@ulu/frontend 0.1.0-beta.77 → 0.1.0-beta.79

package/docs-dev/changelog/index.html

@@ -5196,6 +5196,15 @@
 <div class="toc">
                 <ol>
                     
+                    <li><a href="#0.1.0-beta.79">0.1.0-beta.79</a>
+            		</li>
+
+                    <li><a href="#0.1.0-beta.78">0.1.0-beta.78</a>
+            		</li>
+
+                    <li><a href="#0.1.0-beta.77">0.1.0-beta.77</a>
+            		</li>
+
                     <li><a href="#0.1.0-beta.76">0.1.0-beta.76</a>
             		</li>
 
@@ -5472,6 +5481,37 @@
 
     <div class="changelog">
 <h1 id="change-log" tabindex="-1">Change Log</h1>
+<h2 id="0.1.0-beta.79" tabindex="-1">0.1.0-beta.79</h2>
+<ul>
+<li><strong>js/ui/dialog.js</strong>
+<ul>
+<li>Move preventScroll logic to utils library, refactor (no api changes)</li>
+</ul>
+</li>
+</ul>
+<h2 id="0.1.0-beta.78" tabindex="-1">0.1.0-beta.78</h2>
+<ul>
+<li><strong>js/ui/modal-builder.js</strong>
+<ul>
+<li>Fix unused documented config property <code>titleId</code></li>
+<li>Document <code>labeledby</code>and `describedby``</li>
+<li>Code cleanup</li>
+</ul>
+</li>
+</ul>
+<h2 id="0.1.0-beta.77" tabindex="-1">0.1.0-beta.77</h2>
+<ul>
+<li><strong>js</strong>
+<ul>
+<li>Move dom utils that were reusable to utils library</li>
+</ul>
+</li>
+<li><strong>docs</strong>
+<ul>
+<li>Fix popover fixed demo for fixed strategy</li>
+</ul>
+</li>
+</ul>
 <h2 id="0.1.0-beta.76" tabindex="-1">0.1.0-beta.76</h2>
 <ul>
 <li><strong>scss/components/modal.scss</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-1" name="title" checked="">
-<label for="live-demo-id-1">
+  <input type="checkbox" id="live-demo-id-25" name="title" checked="">
+<label for="live-demo-id-25">
   Title
 </label>  
 </div>
 <div class="form-theme__item form-theme__item--checkbox">
-  <input type="checkbox" id="live-demo-id-2" name="body" checked="">
-<label for="live-demo-id-2">
+  <input type="checkbox" id="live-demo-id-26" name="body" checked="">
+<label for="live-demo-id-26">
   Body
 </label>  
 </div>
 <div class="form-theme__item form-theme__item--checkbox">
-  <input type="checkbox" id="live-demo-id-3" name="content" checked="">
-<label for="live-demo-id-3">
+  <input type="checkbox" id="live-demo-id-27" name="content" checked="">
+<label for="live-demo-id-27">
   Content
 </label>  
 </div>
 <div class="form-theme__item form-theme__item--checkbox">
-  <input type="checkbox" id="live-demo-id-4" name="aside" checked="">
-<label for="live-demo-id-4">
+  <input type="checkbox" id="live-demo-id-28" name="aside" checked="">
+<label for="live-demo-id-28">
   Aside
 </label>  
 </div>
 <div class="form-theme__item form-theme__item--checkbox">
-  <input type="checkbox" id="live-demo-id-5" name="footer" checked="">
-<label for="live-demo-id-5">
+  <input type="checkbox" id="live-demo-id-29" name="footer" checked="">
+<label for="live-demo-id-29">
   Footer
 </label>  
 </div>
   </div>
 </fieldset>
 <div class="form-theme__item form-theme__item--select">
-<label for="live-demo-id-6">
+<label for="live-demo-id-30">
   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-6" name="action">
+  <select id="live-demo-id-30" 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-7">
+<label for="live-demo-id-31">
   Media
 </label>  
-  <select id="live-demo-id-7" name="media">
+  <select id="live-demo-id-31" 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-8">
+<label for="live-demo-id-32">
   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-8" name="layout">
+  <select id="live-demo-id-32" 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

@@ -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-1">
+<table class="data-table data-table--striped" id="dt-13">
   <caption>
     This Is The Table's Caption
   </caption>
   <thead>
     <tr>
-      <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>
+      <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>
     </tr>
     <tr>
-      <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>
+      <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>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <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>
+      <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>
     </tr>
     <tr>
-      <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>
+      <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>
     </tr>
     <tr>
-      <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>
+      <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>
     </tr>
   </tbody>
 </table>
 <h2 class="h2">Large-first Table</h2>
-<table class="data-table data-table--large-first" id="dt-2">
+<table class="data-table data-table--large-first" id="dt-14">
   <caption>
     This Is The Table's Caption
   </caption>
   <thead>
     <tr>
-      <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>
+      <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>
     </tr>
     <tr>
-      <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>
+      <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>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <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>
+      <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>
     </tr>
     <tr>
-      <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>
+      <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>
     </tr>
     <tr>
-      <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>
+      <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>
     </tr>
   </tbody>
 </table>
 <h2 class="h2">Large-header Table</h2>
-<table class="data-table data-table--large-header" id="dt-3">
+<table class="data-table data-table--large-header" id="dt-15">
   <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-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>
     </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-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>
     </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-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>
     </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-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>
     </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-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>
     </tr>
   </tbody>
 </table>
 <h2 class="h2">No-border Table</h2>
-<table class="data-table data-table--no-border" id="dt-4">
+<table class="data-table data-table--no-border" id="dt-16">
   <caption>
     This Is The Table's Caption
   </caption>
   <thead>
     <tr>
-      <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>
+      <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>
     </tr>
     <tr>
-      <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>
+      <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>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <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>
+      <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>
     </tr>
     <tr>
-      <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>
+      <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>
     </tr>
     <tr>
-      <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>
+      <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>
     </tr>
   </tbody>
 </table>

package/docs-dev/javascript/ui-modal-builder/index.html

@@ -5378,9 +5378,14 @@ in twig for example)</li>
 <td>Extra class/classes to add to title</td>
 </tr>
 <tr>
-<td>titleId</td>
+<td>labelledby</td>
 <td><code>string</code></td>
-<td>Set the title id (to tie to a custom title implementation, if using built in title this will be set automatically)</td>
+<td>Set the aria-labelledby attribute to a specific title within the modal, to connect to a custom title implementation, if using built in title this will be set automatically</td>
+</tr>
+<tr>
+<td>describedby</td>
+<td><code>string</code></td>
+<td>Set the aria-describedby on the dialog, elements id, to tie a specific part of the content to be the accessible description</td>
 </tr>
 <tr>
 <td>nonModal</td>

package/js/ui/dialog.js

@@ -3,7 +3,7 @@
  */
 
 import { ComponentInitializer } from "../utils/system.js";
-import { wasClickOutside, getScrollbarWidth } from "@ulu/utils/browser/dom.js";
+import { wasClickOutside, preventScroll as setupPreventScroll } from "@ulu/utils/browser/dom.js";
 import { pauseVideos as pauseYoutubeVideos, prepVideos as prepYoutubeVideos } from "../utils/pause-youtube-video.js";
 
 /**
@@ -130,7 +130,8 @@ export function setupTrigger(trigger, dialogId) {
 export function setupDialog(dialog, userOptions) {
   const options = Object.assign({}, currentDefaults, userOptions);
   const body = document.body;
-  
+  const { preventScrollShift: preventShift } = options;
+
   dialog.addEventListener("click", handleClicks);
 
   if (options.documentEnd) {
@@ -143,23 +144,17 @@ export function setupDialog(dialog, userOptions) {
   // Allow preventScroll if it is a modal dialog
   // Caching value of overflow before setting so we don't assume what it's initial value is
   if (!options.nonModal && options.preventScroll) {
-    
-    let overflowValue = body.style.overflow;
-    let paddingRightValue = body.style.paddingRight;
-    
+    // Cache restore function
+    let restoreScroll; 
+
+    // Toggle prevent scroll
     dialog.addEventListener("toggle", (event) => {
       const isOpen = event.newState === "open";
       if (isOpen) {
-        overflowValue = body.style.overflow;
-        paddingRightValue = body.style.paddingRight;
-      }
-      
-      // This will compensate for scrollbar jump (if user has it enabled)
-      if (options.preventScrollShift) {
-        body.style.paddingRight = isOpen ? `${ getScrollbarWidth() }px` : paddingRightValue;
+        restoreScroll = setupPreventScroll({ preventShift });
+      } else if (restoreScroll) {
+        restoreScroll();
       }
-
-      body.style.overflow = isOpen ? "hidden" : overflowValue;
     });
   }
 

package/js/ui/modal-builder.js

@@ -28,7 +28,8 @@ export const initializer = new ComponentInitializer({
  * @property {string|null} title - The title of the modal. Defaults to `null`.
  * @property {string|null} titleIcon - The class name for an icon to display in the title. Defaults to `null`.
  * @property {string} titleClass - Extra class/classes to add to title
- * @property {string} titleId - Set the title id (to tie to a custom title implementation, if using built in title this will be set automatically)
+ * @property {string} labelledby - Set the aria-labelledby attribute to a specific title within the modal, to connect to a custom title implementation, if using built in title this will be set automatically
+ * @property {string} describedby - Set the aria-describedby on the dialog, elements id, to tie a specific part of the content to be the accessible description
  * @property {boolean} nonModal - If `true`, the modal will not prevent interaction with elements behind it. Defaults to `false`.
  * @property {boolean} documentEnd - If `true`, the modal will be appended to the end of the `document.body`. Defaults to `true`.
  * @property {boolean} allowResize - If `true`, the modal will be resizable. Defaults to `false`.
@@ -93,7 +94,7 @@ export const defaults = {
    * @returns {String} Markup for modal
    */
   template(id, config) {
-    const { baseClass, describedby, footerElement, footerHtml } = config;
+    const { baseClass, describedby, footerHtml } = config;
     const classes = [
       baseClass,
       `${ baseClass }--${ config.position }`,
@@ -180,8 +181,6 @@ export function buildModal(content, options) {
   if (!content.id) {
     throw new Error("Missing ID on modal");
   }
-
-  const { footerHtml, footerElement } = config;
   
   const markup = config.template(content.id, config);
   const modal = createElementFromHtml(markup.trim());

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend",
-  "version": "0.1.0-beta.77",
+  "version": "0.1.0-beta.79",
   "description": "A versatile SCSS and JavaScript component library offering configurable, accessible components and flexible integration into any project, with SCSS modules suitable for modern JS frameworks.",
   "browser": "js/index.js",
   "main": "index.js",
@@ -98,7 +98,7 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.6.5",
-    "@ulu/utils": "^0.0.26",
+    "@ulu/utils": "^0.0.29",
     "ally.js": "^1.4.1",
     "aria-tablist": "^1.2.2",
     "swipe-listener" : "^1.3.0"

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

@@ -1 +1 @@
-{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../js/ui/dialog.js"],"names":[],"mappings":"AA4DA;;GAEG;AACH,gDAEC;AAED;;;GAGG;AACH,6BAqBC;AAED;;;;GAIG;AACH,sCAHW,IAAI,0BA2Bd;AAED;;;GAGG;AACH,oCAFW,IAAI,0BAmDd;AAED;;;;GAIG;AACH,yCAHW,IAAI,OAKd;AAnLD;;GAEG;AACH,8CAA+C;AAE/C;;GAEG;AACH,+CAAuF;AAEvF;;GAEG;AACH,oCAAgE;;;;;;;;;qCAjB3B,oBAAoB"}
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../js/ui/dialog.js"],"names":[],"mappings":"AA4DA;;GAEG;AACH,gDAEC;AAED;;;GAGG;AACH,6BAqBC;AAED;;;;GAIG;AACH,sCAHW,IAAI,0BA2Bd;AAED;;;GAGG;AACH,oCAFW,IAAI,0BA8Cd;AAED;;;;GAIG;AACH,yCAHW,IAAI,OAKd;AA9KD;;GAEG;AACH,8CAA+C;AAE/C;;GAEG;AACH,+CAAuF;AAEvF;;GAEG;AACH,oCAAgE;;;;;;;;;qCAjB3B,oBAAoB"}

package/types/ui/modal-builder.d.ts

@@ -72,9 +72,13 @@ export type DefaultModalOptions = {
      */
     titleClass: string;
     /**
-     * - Set the title id (to tie to a custom title implementation, if using built in title this will be set automatically)
+     * - Set the aria-labelledby attribute to a specific title within the modal, to connect to a custom title implementation, if using built in title this will be set automatically
      */
-    titleId: string;
+    labelledby: string;
+    /**
+     * - Set the aria-describedby on the dialog, elements id, to tie a specific part of the content to be the accessible description
+     */
+    describedby: string;
     /**
      * - If `true`, the modal will not prevent interaction with elements behind it. Defaults to `false`.
      */

package/types/ui/modal-builder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal-builder.d.ts","sourceRoot":"","sources":["../../js/ui/modal-builder.js"],"names":[],"mappings":"AA+IA;;GAEG;AACH,gDAEC;AAED;;;GAGG;AACH,6BAQC;AAED;;;;GAIG;AACH,oCAHW,IAAI;;EA+Dd;AAxND;;GAEG;AACH,+CAGG;;;;;;;;;;;;;;;;;;;;;;;;IA6DD,uDAGC;IACD,yDAGC;IACD;;;;;OAKG;IACH,0DA2CC;;;;;;;;;;;;WA9GW,MAAM,GAAC,IAAI;;;;eACX,MAAM,GAAC,IAAI;;;;gBACX,MAAM;;;;aACN,MAAM;;;;cACN,OAAO;;;;iBACP,OAAO;;;;iBACP,OAAO;;;;cACP,QAAQ,GAAC,UAAU,GAAC,YAAY,GAAC,WAAW,GAAC,aAAa,GAAC,eAAe,GAAC,cAAc;;;;eACzF,OAAO;;;;gBACP,OAAO;;;;UACP,SAAS,GAAC,OAAO,GAAC,OAAO,GAAC,YAAY;;;;WACtC,OAAO;;;;iBACP,OAAO;;;;WACP,MAAM;;;;eACN,MAAM;;;;oBACN,MAAM;;;;sBACN,MAAM;;;;mBACN,MAAM,GAAC,IAAI;;;;gBACX,MAAM,GAAC,IAAI;;;;WACX,OAAO;;;;8BACE,MAAM,KAAG,MAAM;;;;mBACf,MAAM,KAAG,MAAM;;qCA3CD,oBAAoB"}
+{"version":3,"file":"modal-builder.d.ts","sourceRoot":"","sources":["../../js/ui/modal-builder.js"],"names":[],"mappings":"AAgJA;;GAEG;AACH,gDAEC;AAED;;;GAGG;AACH,6BAQC;AAED;;;;GAIG;AACH,oCAHW,IAAI;;EA6Dd;AAvND;;GAEG;AACH,+CAGG;;;;;;;;;;;;;;;;;;;;;;;;IA8DD,uDAGC;IACD,yDAGC;IACD;;;;;OAKG;IACH,0DA2CC;;;;;;;;;;;;WA/GW,MAAM,GAAC,IAAI;;;;eACX,MAAM,GAAC,IAAI;;;;gBACX,MAAM;;;;gBACN,MAAM;;;;iBACN,MAAM;;;;cACN,OAAO;;;;iBACP,OAAO;;;;iBACP,OAAO;;;;cACP,QAAQ,GAAC,UAAU,GAAC,YAAY,GAAC,WAAW,GAAC,aAAa,GAAC,eAAe,GAAC,cAAc;;;;eACzF,OAAO;;;;gBACP,OAAO;;;;UACP,SAAS,GAAC,OAAO,GAAC,OAAO,GAAC,YAAY;;;;WACtC,OAAO;;;;iBACP,OAAO;;;;WACP,MAAM;;;;eACN,MAAM;;;;oBACN,MAAM;;;;sBACN,MAAM;;;;mBACN,MAAM,GAAC,IAAI;;;;gBACX,MAAM,GAAC,IAAI;;;;WACX,OAAO;;;;8BACE,MAAM,KAAG,MAAM;;;;mBACf,MAAM,KAAG,MAAM;;qCA5CD,oBAAoB"}