@ulu/frontend 0.1.0-beta.80 → 0.1.0-beta.81

package/docs-dev/changelog/index.html

@@ -5196,6 +5196,12 @@
 <div class="toc">
                 <ol>
                     
+                    <li><a href="#0.1.0-beta.81">0.1.0-beta.81</a>
+            		</li>
+
+                    <li><a href="#0.1.0-beta.80">0.1.0-beta.80</a>
+            		</li>
+
                     <li><a href="#0.1.0-beta.79">0.1.0-beta.79</a>
             		</li>
 
@@ -5481,6 +5487,40 @@
 
     <div class="changelog">
 <h1 id="change-log" tabindex="-1">Change Log</h1>
+<h2 id="0.1.0-beta.81" tabindex="-1">0.1.0-beta.81</h2>
+<ul>
+<li><strong>scss/components/css-icons.scss</strong>
+<ul>
+<li>Add icon for <code>.css-icon--drag-both</code></li>
+</ul>
+</li>
+<li><strong>scss/components/modal.scss</strong>
+<ul>
+<li>Remove 'resize' native resizing for 'center' position, and use new resizer for both axes</li>
+</ul>
+</li>
+<li><strong>js/utils/modal-builder.js</strong>
+<ul>
+<li>Update resizer to create resizer handle for &quot;center&quot; so we can remove CSS resize in modals.scss</li>
+</ul>
+</li>
+<li><strong>js/utils/resizer.js</strong>
+<ul>
+<li>Refactor API to be fromX, and fromY (instead of fromLeft) to support both axes</li>
+<li>Add events dispatched from resizer's container for user</li>
+<li>Make all events pointer events instead of mouse</li>
+</ul>
+</li>
+<li><strong>js/utils/class-logger.js</strong>
+<ul>
+<li>Add check in allow() for class instance options.debug property</li>
+</ul>
+</li>
+</ul>
+<h2 id="0.1.0-beta.80" tabindex="-1">0.1.0-beta.80</h2>
+<ul>
+<li>Update @ulu/utils</li>
+</ul>
 <h2 id="0.1.0-beta.79" tabindex="-1">0.1.0-beta.79</h2>
 <ul>
 <li><strong>js/ui/dialog.js</strong>

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

@@ -5214,60 +5214,60 @@
   <legend>Elements Visible</legend>
   <div>
 <div class="form-theme__item form-theme__item--checkbox">
-  <input type="checkbox" id="live-demo-id-25" name="title" checked="">
-<label for="live-demo-id-25">
+  <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-26" name="body" checked="">
-<label for="live-demo-id-26">
+  <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-27" name="content" checked="">
-<label for="live-demo-id-27">
+  <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-28" name="aside" checked="">
-<label for="live-demo-id-28">
+  <input type="checkbox" id="live-demo-id-4" name="aside" checked="">
+<label for="live-demo-id-4">
   Aside
 </label>  
 </div>
 <div class="form-theme__item form-theme__item--checkbox">
-  <input type="checkbox" id="live-demo-id-29" name="footer" checked="">
-<label for="live-demo-id-29">
+  <input type="checkbox" id="live-demo-id-5" name="footer" checked="">
+<label for="live-demo-id-5">
   Footer
 </label>  
 </div>
   </div>
 </fieldset>
 <div class="form-theme__item form-theme__item--select">
-<label for="live-demo-id-30">
+<label for="live-demo-id-6">
   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-30" name="action">
+  <select id="live-demo-id-6" 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-31">
+<label for="live-demo-id-7">
   Media
 </label>  
-  <select id="live-demo-id-31" name="media">
+  <select id="live-demo-id-7" 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-32">
+<label for="live-demo-id-8">
   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-32" name="layout">
+  <select id="live-demo-id-8" 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/css-icons/index.html

@@ -5376,6 +5376,20 @@ drag-y
 </tr></p>
 <p><tr>
 <td>
+<span class="css-icon css-icon--drag-both" aria-hidden="true"></span>
+drag-both
+</td>
+<td>
+<button class="button button--icon" aria-label="Example Button">
+<span class="css-icon css-icon--drag-both type-small" aria-hidden="true"></span>
+</button>
+</td>
+<td class="type-small">
+<code>css-icon css-icon--drag-both</code>
+</td>
+</tr></p>
+<p><tr>
+<td>
 <span class="css-icon css-icon--triangle-right" aria-hidden="true"></span>
 triangle-right
 </td>
@@ -5753,6 +5767,15 @@ drag-y
 </tr></p>
 <p><tr>
 <td class="type-large-xx">
+<span class="css-icon css-icon--stroke-large css-icon--drag-both" aria-hidden="true"></span>
+drag-both
+</td>
+<td class="type-small">
+<code>css-icon css-icon--stroke-large css-icon--drag-both</code>
+</td>
+</tr></p>
+<p><tr>
+<td class="type-large-xx">
 <span class="css-icon css-icon--stroke-large css-icon--triangle-right" aria-hidden="true"></span>
 triangle-right
 </td>

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

@@ -5252,178 +5252,178 @@
 </table>
 <h2 class="h2">Complex Table</h2>
 <h2 class="h2">Striped Table</h2>
-<table class="data-table data-table--striped" id="dt-13">
+<table class="data-table data-table--striped" id="dt-1">
   <caption>
     This Is The Table's Caption
   </caption>
   <thead>
     <tr>
-      <th id="dt-13-type" rowspan="2">Type</th>
-      <th id="dt-13-group" colspan="2">Group</th>
-      <th id="dt-13-details" colspan="2">Details</th>
-      <th id="dt-13-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-13-group" id="dt-13-primary">Primary</th>
-      <th headers="dt-13-group" id="dt-13-secondary">Secondary</th>
-      <th headers="dt-13-details" id="dt-13-before">Before Task</th>
-      <th headers="dt-13-details" id="dt-13-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-13-type dt-13-r1" id="dt-13-r1">Default</th>
-      <td headers="dt-13-group dt-13-primary dt-13-r1">Lorem Ipsum</td>
-      <td headers="dt-13-group dt-13-secondary dt-13-r1">Lorem Ipsum</td>
-      <td headers="dt-13-details dt-13-before dt-13-r1">Lorem Ipsum</td>
-      <td headers="dt-13-details dt-13-after dt-13-r1">Lorem Ipsum</td>
-      <td headers="dt-13-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-13-group dt-13-primary dt-13-r1">Lorem Ipsum</td>
-      <td headers="dt-13-group dt-13-secondary dt-13-r1">Lorem Ipsum</td>
-      <td headers="dt-13-details dt-13-before dt-13-r1">Lorem Ipsum</td>
-      <td headers="dt-13-details dt-13-after dt-13-r1">Lorem Ipsum</td>
-      <td headers="dt-13-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-13-group dt-13-primary dt-13-r1">Lorem Ipsum</td>
-      <td headers="dt-13-group dt-13-secondary dt-13-r1">Lorem Ipsum</td>
-      <td headers="dt-13-details dt-13-before dt-13-r1">Lorem Ipsum</td>
-      <td headers="dt-13-details dt-13-after dt-13-r1">Lorem Ipsum</td>
-      <td headers="dt-13-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>
 <h2 class="h2">Large-first Table</h2>
-<table class="data-table data-table--large-first" id="dt-14">
+<table class="data-table data-table--large-first" id="dt-2">
   <caption>
     This Is The Table's Caption
   </caption>
   <thead>
     <tr>
-      <th id="dt-14-type" rowspan="2">Type</th>
-      <th id="dt-14-group" colspan="2">Group</th>
-      <th id="dt-14-details" colspan="2">Details</th>
-      <th id="dt-14-id" rowspan="2">Id</th>
+      <th id="dt-2-type" rowspan="2">Type</th>
+      <th id="dt-2-group" colspan="2">Group</th>
+      <th id="dt-2-details" colspan="2">Details</th>
+      <th id="dt-2-id" rowspan="2">Id</th>
     </tr>
     <tr>
-      <th headers="dt-14-group" id="dt-14-primary">Primary</th>
-      <th headers="dt-14-group" id="dt-14-secondary">Secondary</th>
-      <th headers="dt-14-details" id="dt-14-before">Before Task</th>
-      <th headers="dt-14-details" id="dt-14-after">After Task</th>
+      <th headers="dt-2-group" id="dt-2-primary">Primary</th>
+      <th headers="dt-2-group" id="dt-2-secondary">Secondary</th>
+      <th headers="dt-2-details" id="dt-2-before">Before Task</th>
+      <th headers="dt-2-details" id="dt-2-after">After Task</th>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <th rowspan="3" headers="dt-14-type dt-14-r1" id="dt-14-r1">Default</th>
-      <td headers="dt-14-group dt-14-primary dt-14-r1">Lorem Ipsum</td>
-      <td headers="dt-14-group dt-14-secondary dt-14-r1">Lorem Ipsum</td>
-      <td headers="dt-14-details dt-14-before dt-14-r1">Lorem Ipsum</td>
-      <td headers="dt-14-details dt-14-after dt-14-r1">Lorem Ipsum</td>
-      <td headers="dt-14-id">OL-53-GHSLE</td>
+      <th rowspan="3" headers="dt-2-type dt-2-r1" id="dt-2-r1">Default</th>
+      <td headers="dt-2-group dt-2-primary dt-2-r1">Lorem Ipsum</td>
+      <td headers="dt-2-group dt-2-secondary dt-2-r1">Lorem Ipsum</td>
+      <td headers="dt-2-details dt-2-before dt-2-r1">Lorem Ipsum</td>
+      <td headers="dt-2-details dt-2-after dt-2-r1">Lorem Ipsum</td>
+      <td headers="dt-2-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-14-group dt-14-primary dt-14-r1">Lorem Ipsum</td>
-      <td headers="dt-14-group dt-14-secondary dt-14-r1">Lorem Ipsum</td>
-      <td headers="dt-14-details dt-14-before dt-14-r1">Lorem Ipsum</td>
-      <td headers="dt-14-details dt-14-after dt-14-r1">Lorem Ipsum</td>
-      <td headers="dt-14-id">OL-53-GHSLE</td>
+      <td headers="dt-2-group dt-2-primary dt-2-r1">Lorem Ipsum</td>
+      <td headers="dt-2-group dt-2-secondary dt-2-r1">Lorem Ipsum</td>
+      <td headers="dt-2-details dt-2-before dt-2-r1">Lorem Ipsum</td>
+      <td headers="dt-2-details dt-2-after dt-2-r1">Lorem Ipsum</td>
+      <td headers="dt-2-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-14-group dt-14-primary dt-14-r1">Lorem Ipsum</td>
-      <td headers="dt-14-group dt-14-secondary dt-14-r1">Lorem Ipsum</td>
-      <td headers="dt-14-details dt-14-before dt-14-r1">Lorem Ipsum</td>
-      <td headers="dt-14-details dt-14-after dt-14-r1">Lorem Ipsum</td>
-      <td headers="dt-14-id">OL-53-GHSLE</td>
+      <td headers="dt-2-group dt-2-primary dt-2-r1">Lorem Ipsum</td>
+      <td headers="dt-2-group dt-2-secondary dt-2-r1">Lorem Ipsum</td>
+      <td headers="dt-2-details dt-2-before dt-2-r1">Lorem Ipsum</td>
+      <td headers="dt-2-details dt-2-after dt-2-r1">Lorem Ipsum</td>
+      <td headers="dt-2-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-15">
+<table class="data-table data-table--large-header" id="dt-3">
   <caption>
     This Is The Table's Caption
   </caption>
   <thead>
     <tr>
-      <th id="dt-15-type" rowspan="2">Type</th>
-      <th id="dt-15-group" colspan="2">Group</th>
-      <th id="dt-15-details" colspan="2">Details</th>
-      <th id="dt-15-id" rowspan="2">Id</th>
+      <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>
     </tr>
     <tr>
-      <th headers="dt-15-group" id="dt-15-primary">Primary</th>
-      <th headers="dt-15-group" id="dt-15-secondary">Secondary</th>
-      <th headers="dt-15-details" id="dt-15-before">Before Task</th>
-      <th headers="dt-15-details" id="dt-15-after">After Task</th>
+      <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>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <th rowspan="3" headers="dt-15-type dt-15-r1" id="dt-15-r1">Default</th>
-      <td headers="dt-15-group dt-15-primary dt-15-r1">Lorem Ipsum</td>
-      <td headers="dt-15-group dt-15-secondary dt-15-r1">Lorem Ipsum</td>
-      <td headers="dt-15-details dt-15-before dt-15-r1">Lorem Ipsum</td>
-      <td headers="dt-15-details dt-15-after dt-15-r1">Lorem Ipsum</td>
-      <td headers="dt-15-id">OL-53-GHSLE</td>
+      <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>
     </tr>
     <tr>
-      <td headers="dt-15-group dt-15-primary dt-15-r1">Lorem Ipsum</td>
-      <td headers="dt-15-group dt-15-secondary dt-15-r1">Lorem Ipsum</td>
-      <td headers="dt-15-details dt-15-before dt-15-r1">Lorem Ipsum</td>
-      <td headers="dt-15-details dt-15-after dt-15-r1">Lorem Ipsum</td>
-      <td headers="dt-15-id">OL-53-GHSLE</td>
+      <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>
     </tr>
     <tr>
-      <td headers="dt-15-group dt-15-primary dt-15-r1">Lorem Ipsum</td>
-      <td headers="dt-15-group dt-15-secondary dt-15-r1">Lorem Ipsum</td>
-      <td headers="dt-15-details dt-15-before dt-15-r1">Lorem Ipsum</td>
-      <td headers="dt-15-details dt-15-after dt-15-r1">Lorem Ipsum</td>
-      <td headers="dt-15-id">OL-53-GHSLE</td>
+      <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>
     </tr>
   </tbody>
 </table>
 <h2 class="h2">No-border Table</h2>
-<table class="data-table data-table--no-border" id="dt-16">
+<table class="data-table data-table--no-border" id="dt-4">
   <caption>
     This Is The Table's Caption
   </caption>
   <thead>
     <tr>
-      <th id="dt-16-type" rowspan="2">Type</th>
-      <th id="dt-16-group" colspan="2">Group</th>
-      <th id="dt-16-details" colspan="2">Details</th>
-      <th id="dt-16-id" rowspan="2">Id</th>
+      <th id="dt-4-type" rowspan="2">Type</th>
+      <th id="dt-4-group" colspan="2">Group</th>
+      <th id="dt-4-details" colspan="2">Details</th>
+      <th id="dt-4-id" rowspan="2">Id</th>
     </tr>
     <tr>
-      <th headers="dt-16-group" id="dt-16-primary">Primary</th>
-      <th headers="dt-16-group" id="dt-16-secondary">Secondary</th>
-      <th headers="dt-16-details" id="dt-16-before">Before Task</th>
-      <th headers="dt-16-details" id="dt-16-after">After Task</th>
+      <th headers="dt-4-group" id="dt-4-primary">Primary</th>
+      <th headers="dt-4-group" id="dt-4-secondary">Secondary</th>
+      <th headers="dt-4-details" id="dt-4-before">Before Task</th>
+      <th headers="dt-4-details" id="dt-4-after">After Task</th>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <th rowspan="3" headers="dt-16-type dt-16-r1" id="dt-16-r1">Default</th>
-      <td headers="dt-16-group dt-16-primary dt-16-r1">Lorem Ipsum</td>
-      <td headers="dt-16-group dt-16-secondary dt-16-r1">Lorem Ipsum</td>
-      <td headers="dt-16-details dt-16-before dt-16-r1">Lorem Ipsum</td>
-      <td headers="dt-16-details dt-16-after dt-16-r1">Lorem Ipsum</td>
-      <td headers="dt-16-id">OL-53-GHSLE</td>
+      <th rowspan="3" headers="dt-4-type dt-4-r1" id="dt-4-r1">Default</th>
+      <td headers="dt-4-group dt-4-primary dt-4-r1">Lorem Ipsum</td>
+      <td headers="dt-4-group dt-4-secondary dt-4-r1">Lorem Ipsum</td>
+      <td headers="dt-4-details dt-4-before dt-4-r1">Lorem Ipsum</td>
+      <td headers="dt-4-details dt-4-after dt-4-r1">Lorem Ipsum</td>
+      <td headers="dt-4-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-16-group dt-16-primary dt-16-r1">Lorem Ipsum</td>
-      <td headers="dt-16-group dt-16-secondary dt-16-r1">Lorem Ipsum</td>
-      <td headers="dt-16-details dt-16-before dt-16-r1">Lorem Ipsum</td>
-      <td headers="dt-16-details dt-16-after dt-16-r1">Lorem Ipsum</td>
-      <td headers="dt-16-id">OL-53-GHSLE</td>
+      <td headers="dt-4-group dt-4-primary dt-4-r1">Lorem Ipsum</td>
+      <td headers="dt-4-group dt-4-secondary dt-4-r1">Lorem Ipsum</td>
+      <td headers="dt-4-details dt-4-before dt-4-r1">Lorem Ipsum</td>
+      <td headers="dt-4-details dt-4-after dt-4-r1">Lorem Ipsum</td>
+      <td headers="dt-4-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-16-group dt-16-primary dt-16-r1">Lorem Ipsum</td>
-      <td headers="dt-16-group dt-16-secondary dt-16-r1">Lorem Ipsum</td>
-      <td headers="dt-16-details dt-16-before dt-16-r1">Lorem Ipsum</td>
-      <td headers="dt-16-details dt-16-after dt-16-r1">Lorem Ipsum</td>
-      <td headers="dt-16-id">OL-53-GHSLE</td>
+      <td headers="dt-4-group dt-4-primary dt-4-r1">Lorem Ipsum</td>
+      <td headers="dt-4-group dt-4-secondary dt-4-r1">Lorem Ipsum</td>
+      <td headers="dt-4-details dt-4-before dt-4-r1">Lorem Ipsum</td>
+      <td headers="dt-4-details dt-4-after dt-4-r1">Lorem Ipsum</td>
+      <td headers="dt-4-id">OL-53-GHSLE</td>
     </tr>
   </tbody>
 </table>

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

@@ -5367,7 +5367,8 @@
 <h2 class="h2">Resizing</h2>
 <p>The modals setup with the builder allow resizing. Center, top and bottom modals will use the native resize handle (resize in all directions). The left/right sidebar type modals will be given a drag handle and only able to extend their width (since they already span the full screen height). To enable this behavior pass <code>{ &quot;allowResize&quot; : true }</code> in builder options (data attribute)</p>
 <p><button class="button" data-ulu-dialog-trigger="modal-id-center-resize">Center Resizable</button>
-<button class="button" data-ulu-dialog-trigger="modal-id-right-resize">Right Resizable</button></p>
+<button class="button" data-ulu-dialog-trigger="modal-id-right-resize">Right Resizable</button>
+<button class="button" data-ulu-dialog-trigger="modal-id-left-resize">Left Resizable</button></p>
 <div id="modal-id-center-resize" class="wysiwyg" data-ulu-modal-builder='{ 
     "title" : "Test Title",
     "allowResize" : true
@@ -5381,6 +5382,13 @@
   }' hidden="">
   Test
 </div>
+<div id="modal-id-left-resize" class="wysiwyg" data-ulu-modal-builder='{ 
+    "title" : "Test Title",
+    "position" : "left",
+    "allowResize" : true
+  }' hidden="">
+  Test
+</div>
 <h2 class="h2">Click Outside</h2>
 <p>By default clicking outside the modal will close it, this can be disabled by passing <code>{ &quot;clickOutsideCloses&quot; : false }</code></p>
 <p><button class="button" data-ulu-dialog-trigger="modal-id-no-outside">No Click Outside</button></p>

package/docs-dev/javascript/events/index.html

@@ -5202,6 +5202,9 @@
                     <li><a href="#events.getname(type)-%E2%87%92-string">events.getName(type) ⇒ String</a>
             		</li>
 
+                    <li><a href="#events.createevent(type%2C-data%2C-options)">events.createEvent(type, data, options)</a>
+            		</li>
+
                     <li><a href="#events~events">events~events</a>
             
                 <ol>
@@ -5245,6 +5248,7 @@
 <ul>
 <li><a href="#module_events.dispatch">.dispatch(type, context)</a></li>
 <li><a href="#module_events.getName">.getName(type)</a> ⇒ <code>String</code></li>
+<li><a href="#module_events.createEvent">.createEvent(type, data, options)</a></li>
 </ul>
 </li>
 <li><em>inner</em>
@@ -5266,7 +5270,10 @@
 </ul>
 <p><a name="module_events.dispatch"></a></p>
 <h2 id="events.dispatch(type%2C-context)" tabindex="-1">events.dispatch(type, context)</h2>
-<p>Triggers one of our custom events</p>
+<p>Triggers one of our custom events (page/document level events)</p>
+<ul>
+<li>UI components may dispatch their own events, this is just used for system wide events</li>
+</ul>
 <p><strong>Kind</strong>: static method of <a href="#module_events"><code>events</code></a></p>
 <table>
 <thead>
@@ -5296,6 +5303,9 @@
 <p><a name="module_events.getName"></a></p>
 <h2 id="events.getname(type)-%E2%87%92-string" tabindex="-1">events.getName(type) ⇒ <code>String</code></h2>
 <p>Namespaced event</p>
+<ul>
+<li>Should be used for all ulu script/component events</li>
+</ul>
 <p><strong>Kind</strong>: static method of <a href="#module_events"><code>events</code></a></p>
 <table>
 <thead>
@@ -5313,6 +5323,36 @@
 </tr>
 </tbody>
 </table>
+<p><a name="module_events.createEvent"></a></p>
+<h2 id="events.createevent(type%2C-data%2C-options)" tabindex="-1">events.createEvent(type, data, options)</h2>
+<p>Create ulu namespaced custom event</p>
+<p><strong>Kind</strong>: static method of <a href="#module_events"><code>events</code></a></p>
+<table>
+<thead>
+<tr>
+<th>Param</th>
+<th>Type</th>
+<th>Description</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>type</td>
+<td><code>String</code></td>
+<td>Event base name (not prefixed)</td>
+</tr>
+<tr>
+<td>data</td>
+<td><code>any</code></td>
+<td>Custom data to pass with the event (will be available as <code>event.detail</code>)</td>
+</tr>
+<tr>
+<td>options</td>
+<td><code>Object</code></td>
+<td>CustomEvent options default <code>{ bubbles: true }</code>. If <code>detail</code> is also provided, it will be merged with this options object and will override the 'data' argument for this function</td>
+</tr>
+</tbody>
+</table>
 <p><a name="module_events..events"></a></p>
 <h2 id="events~events" tabindex="-1">events~events</h2>
 <p>Event object - called on dispatch</p>

package/docs-dev/javascript/settings/index.html

@@ -5397,6 +5397,11 @@ to be used as a string literal, dynamically retrieving its value.</p>
 <td>The CSS class string for the drag X icon</td>
 </tr>
 <tr>
+<td>iconClassDragBoth</td>
+<td><code>string</code></td>
+<td>The CSS class string for the dragging in both directions</td>
+</tr>
+<tr>
 <td>iconClassPrevious</td>
 <td><code>string</code></td>
 <td>The CSS class string for the previous icon</td>