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

package/docs-dev/javascript/utils-dom/index.html

@@ -5199,32 +5199,11 @@
                     <li><a href="#utils%2Fdom.dataattributetodatasetkey(dataattribute)-%E2%87%92-string">utils/dom.dataAttributeToDatasetKey(dataAttribute) ⇒ string</a>
             		</li>
 
-                    <li><a href="#utils%2Fdom.getdatasetjson(element%2C-key)-%E2%87%92-object">utils/dom.getDatasetJson(element, key) ⇒ Object</a>
-            		</li>
-
-                    <li><a href="#utils%2Fdom.getdatasetoptionaljson(element%2C-key)-%E2%87%92-object-%7C-string">utils/dom.getDatasetOptionalJson(element, key) ⇒ Object | String</a>
-            		</li>
-
-                    <li><a href="#utils%2Fdom.wasclickoutside()">utils/dom.wasClickOutside()</a>
-            		</li>
-
                     <li><a href="#utils%2Fdom.setpositionclasses(parent%2C-classes)">utils/dom.setPositionClasses(parent, classes)</a>
             		</li>
 
-                    <li><a href="#utils%2Fdom.getelement(target%2C-context)-%E2%87%92-htmlelement">utils/dom.getElement(target, context) ⇒ HTMLElement</a>
-            		</li>
-
-                    <li><a href="#utils%2Fdom.getelements(target%2C-context)-%E2%87%92-array">utils/dom.getElements(target, context) ⇒ Array</a>
-            		</li>
-
                     <li><a href="#utils%2Fdom.resolveclasses(input)-%E2%87%92-array.%3Cstring%3E">utils/dom.resolveClasses(input) ⇒ Array.<string></string></a>
             		</li>
-
-                    <li><a href="#utils%2Fdom.addscrollbarproperty(options)">utils/dom.addScrollbarProperty(options)</a>
-            		</li>
-
-                    <li><a href="#utils%2Fdom.getscrollbarwidth(%5Belement%5D%2C-%5Bcontainer%5D)-%E2%87%92-number">utils/dom.getScrollbarWidth([element], [container]) ⇒ number</a>
-            		</li>
                 </ol>
             </div>
 			</div>
@@ -5242,15 +5221,8 @@
 <li><a href="#module_utils/dom">utils/dom</a>
 <ul>
 <li><a href="#module_utils/dom.dataAttributeToDatasetKey">.dataAttributeToDatasetKey(dataAttribute)</a> ⇒ <code>string</code></li>
-<li><a href="#module_utils/dom.getDatasetJson">.getDatasetJson(element, key)</a> ⇒ <code>Object</code></li>
-<li><a href="#module_utils/dom.getDatasetOptionalJson">.getDatasetOptionalJson(element, key)</a> ⇒ <code>Object</code> | <code>String</code></li>
-<li><a href="#module_utils/dom.wasClickOutside">.wasClickOutside()</a></li>
 <li><a href="#module_utils/dom.setPositionClasses">.setPositionClasses(parent, classes)</a></li>
-<li><a href="#module_utils/dom.getElement">.getElement(target, context)</a> ⇒ <code>HTMLElement</code></li>
-<li><a href="#module_utils/dom.getElements">.getElements(target, context)</a> ⇒ <code>Array</code></li>
 <li><a href="#module_utils/dom.resolveClasses">.resolveClasses(input)</a> ⇒ <code>Array.&lt;string&gt;</code></li>
-<li><a href="#module_utils/dom.addScrollbarProperty">.addScrollbarProperty(options)</a></li>
-<li><a href="#module_utils/dom.getScrollbarWidth">.getScrollbarWidth([element], [container])</a> ⇒ <code>number</code></li>
 </ul>
 </li>
 </ul>
@@ -5275,66 +5247,7 @@
 </tr>
 </tbody>
 </table>
-<p><a name="module_utils/dom.getDatasetJson"></a></p>
-<h2 id="utils%2Fdom.getdatasetjson(element%2C-key)-%E2%87%92-object" tabindex="-1">utils/dom.getDatasetJson(element, key) ⇒ <code>Object</code></h2>
-<p>Get an elements JSON dataset value</p>
-<p><strong>Kind</strong>: static method of <a href="#module_utils/dom"><code>utils/dom</code></a><br>
-<strong>Returns</strong>: <code>Object</code> - Empty object or JSON object from dataset</p>
-<table>
-<thead>
-<tr>
-<th>Param</th>
-<th>Type</th>
-<th>Description</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td>element</td>
-<td><code>Node</code></td>
-<td></td>
-</tr>
-<tr>
-<td>key</td>
-<td><code>String</code></td>
-<td>key in dataset object for element</td>
-</tr>
-</tbody>
-</table>
-<p><a name="module_utils/dom.getDatasetOptionalJson"></a></p>
-<h2 id="utils%2Fdom.getdatasetoptionaljson(element%2C-key)-%E2%87%92-object-%7C-string" tabindex="-1">utils/dom.getDatasetOptionalJson(element, key) ⇒ <code>Object</code> | <code>String</code></h2>
-<p>Get an elements JSON dataset value that could potentially just be a single string</p>
-<ul>
-<li>If JSON it will return the object else it will return the value directly</li>
-</ul>
-<p><strong>Kind</strong>: static method of <a href="#module_utils/dom"><code>utils/dom</code></a><br>
-<strong>Returns</strong>: <code>Object</code> | <code>String</code> - JSON object or current dataset value (string or empty string if no value)</p>
-<table>
-<thead>
-<tr>
-<th>Param</th>
-<th>Type</th>
-<th>Description</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td>element</td>
-<td><code>Node</code></td>
-<td></td>
-</tr>
-<tr>
-<td>key</td>
-<td><code>String</code></td>
-<td>key in dataset object for element</td>
-</tr>
-</tbody>
-</table>
-<p><a name="module_utils/dom.wasClickOutside"></a></p>
-<h2 id="utils%2Fdom.wasclickoutside()" tabindex="-1">utils/dom.wasClickOutside()</h2>
-<p>Check if a pointer event x/y was outside an elements bounding box</p>
-<p><strong>Kind</strong>: static method of <a href="#module_utils/dom"><code>utils/dom</code></a><br>
-<a name="module_utils/dom.setPositionClasses"></a></p>
+<p><a name="module_utils/dom.setPositionClasses"></a></p>
 <h2 id="utils%2Fdom.setpositionclasses(parent%2C-classes)" tabindex="-1">utils/dom.setPositionClasses(parent, classes)</h2>
 <p>Sets up the positional classes that would come from the equal
 height module. Needs to be rerun by user when layout changes
@@ -5366,58 +5279,6 @@ or new instances are added to the screen</p>
 </tr>
 </tbody>
 </table>
-<p><a name="module_utils/dom.getElement"></a></p>
-<h2 id="utils%2Fdom.getelement(target%2C-context)-%E2%87%92-htmlelement" tabindex="-1">utils/dom.getElement(target, context) ⇒ <code>HTMLElement</code></h2>
-<p>Resolve a target to Element</p>
-<p><strong>Kind</strong>: static method of <a href="#module_utils/dom"><code>utils/dom</code></a><br>
-<strong>Returns</strong>: <code>HTMLElement</code> - The element or null if not found</p>
-<table>
-<thead>
-<tr>
-<th>Param</th>
-<th>Type</th>
-<th>Description</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td>target</td>
-<td><code>String</code> | <code>Node</code></td>
-<td>The selector or node/element</td>
-</tr>
-<tr>
-<td>context</td>
-<td><code>Object</code></td>
-<td>[document] The context to query possible selectors from</td>
-</tr>
-</tbody>
-</table>
-<p><a name="module_utils/dom.getElements"></a></p>
-<h2 id="utils%2Fdom.getelements(target%2C-context)-%E2%87%92-array" tabindex="-1">utils/dom.getElements(target, context) ⇒ <code>Array</code></h2>
-<p>Resolve a target to Elements</p>
-<p><strong>Kind</strong>: static method of <a href="#module_utils/dom"><code>utils/dom</code></a><br>
-<strong>Returns</strong>: <code>Array</code> - The elements or null if not found</p>
-<table>
-<thead>
-<tr>
-<th>Param</th>
-<th>Type</th>
-<th>Description</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td>target</td>
-<td><code>String</code> | <code>Node</code></td>
-<td>The selector or node/element</td>
-</tr>
-<tr>
-<td>context</td>
-<td><code>Object</code></td>
-<td>[document] The context to query possible selectors from</td>
-</tr>
-</tbody>
-</table>
 <p><a name="module_utils/dom.resolveClasses"></a></p>
 <h2 id="utils%2Fdom.resolveclasses(input)-%E2%87%92-array.%3Cstring%3E" tabindex="-1">utils/dom.resolveClasses(input) ⇒ <code>Array.&lt;string&gt;</code></h2>
 <p>Resolves a class input (string or array) into a consistent array of class names.</p>
@@ -5443,81 +5304,6 @@ or new instances are added to the screen</p>
 <pre class="language-js"><code class="language-js"><span class="pjs-token pjs-function">resolveClassArray</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-string">"fas fa-check  my-class"</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span> <span class="pjs-token pjs-comment">// Returns ["fas", "fa-check", "my-class"]</span>
 <span class="pjs-token pjs-function">resolveClassArray</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-punctuation">[</span><span class="pjs-token pjs-string">"another-class"</span><span class="pjs-token pjs-punctuation">,</span> <span class="pjs-token pjs-string">"yet-another-class"</span><span class="pjs-token pjs-punctuation">]</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span> <span class="pjs-token pjs-comment">// Returns ["another-class", "yet-another-class"]</span>
 <span class="pjs-token pjs-function">resolveClassArray</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-string">"single-class"</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span> <span class="pjs-token pjs-comment">// Returns ["single-class"]</span></code></pre>
-<p><a name="module_utils/dom.addScrollbarProperty"></a></p>
-<h2 id="utils%2Fdom.addscrollbarproperty(options)" tabindex="-1">utils/dom.addScrollbarProperty(options)</h2>
-<p>Sets a CSS custom property equal to the scrollbar width.</p>
-<p><strong>Kind</strong>: static method of <a href="#module_utils/dom"><code>utils/dom</code></a></p>
-<table>
-<thead>
-<tr>
-<th>Param</th>
-<th>Type</th>
-<th>Default</th>
-<th>Description</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td>options</td>
-<td><code>object</code></td>
-<td></td>
-<td>Configuration options.</td>
-</tr>
-<tr>
-<td>[options.scrollableChild]</td>
-<td><code>HTMLElement</code></td>
-<td><code>document.body</code></td>
-<td>An element that is a child of a scrollable container (used for width calculation).</td>
-</tr>
-<tr>
-<td>[options.container]</td>
-<td><code>Window</code> | <code>HTMLElement</code></td>
-<td><code>window</code></td>
-<td>The container that can be scrolled (used for width calculation).</td>
-</tr>
-<tr>
-<td>[options.propertyElement]</td>
-<td><code>HTMLElement</code></td>
-<td><code>document.documentElement</code></td>
-<td>The element to which the custom property will be added. Defaults to document.documentElement for :root access.</td>
-</tr>
-<tr>
-<td>[options.propName]</td>
-<td><code>string</code></td>
-<td><code>&quot;&amp;quot;--ulu-scrollbar-width&amp;quot;&quot;</code></td>
-<td>The name of the custom property to set.</td>
-</tr>
-</tbody>
-</table>
-<p><a name="module_utils/dom.getScrollbarWidth"></a></p>
-<h2 id="utils%2Fdom.getscrollbarwidth(%5Belement%5D%2C-%5Bcontainer%5D)-%E2%87%92-number" tabindex="-1">utils/dom.getScrollbarWidth([element], [container]) ⇒ <code>number</code></h2>
-<p>Calculates the width of the scrollbar.</p>
-<p><strong>Kind</strong>: static method of <a href="#module_utils/dom"><code>utils/dom</code></a><br>
-<strong>Returns</strong>: <code>number</code> - The width of the scrollbar in pixels.</p>
-<table>
-<thead>
-<tr>
-<th>Param</th>
-<th>Type</th>
-<th>Default</th>
-<th>Description</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td>[element]</td>
-<td><code>HTMLElement</code></td>
-<td><code>document.body</code></td>
-<td>The element that is the child of a scrollable container</td>
-</tr>
-<tr>
-<td>[container]</td>
-<td><code>Window</code> | <code>HTMLElement</code></td>
-<td><code>window</code></td>
-<td>The container that can be scrolled</td>
-</tr>
-</tbody>
-</table>
 
     </div>
   </div>

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

@@ -5250,8 +5250,8 @@
 <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">"backdrop-color"</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">"backdrop-blur"</span> <span class="pjs-token pjs-punctuation">:</span>                 4px<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">"body-padding"</span><span class="pjs-token pjs-punctuation">:</span>                   1rem<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">"body-padding"</span> <span class="pjs-token pjs-punctuation">:</span>                  1rem<span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"border-radius"</span> <span class="pjs-token pjs-punctuation">:</span>                 <span class="pjs-token pjs-boolean">true</span><span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"box-shadow"</span> <span class="pjs-token pjs-punctuation">:</span>                    <span class="pjs-token pjs-boolean">true</span><span class="pjs-token pjs-punctuation">,</span>         
   <span class="pjs-token pjs-string">"height"</span><span class="pjs-token pjs-punctuation">:</span>                         340px<span class="pjs-token pjs-punctuation">,</span>
@@ -5272,6 +5272,10 @@
   <span class="pjs-token pjs-string">"header-border-bottom"</span><span class="pjs-token pjs-punctuation">:</span>           none<span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"header-color"</span><span class="pjs-token pjs-punctuation">:</span>                   white<span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"header-padding"</span><span class="pjs-token pjs-punctuation">:</span>                 1rem<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"footer-padding"</span> <span class="pjs-token pjs-punctuation">:</span>                <span class="pjs-token pjs-punctuation">(</span>0.5rem 1rem<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"footer-background-color"</span> <span class="pjs-token pjs-punctuation">:</span>       #f6f6f6<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"footer-border-top"</span> <span class="pjs-token pjs-punctuation">:</span>             none<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"footer-text-align"</span> <span class="pjs-token pjs-punctuation">:</span>             right<span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"resizer-background-color"</span><span class="pjs-token pjs-punctuation">:</span>       <span class="pjs-token pjs-function">rgb</span><span class="pjs-token pjs-punctuation">(</span>221<span class="pjs-token pjs-punctuation">,</span> 221<span class="pjs-token pjs-punctuation">,</span> 221<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"resizer-background-color-hover"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-function">rgb</span><span class="pjs-token pjs-punctuation">(</span>192<span class="pjs-token pjs-punctuation">,</span> 192<span class="pjs-token pjs-punctuation">,</span> 192<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"resizer-color"</span><span class="pjs-token pjs-punctuation">:</span>                  <span class="pjs-token pjs-function">rgb</span><span class="pjs-token pjs-punctuation">(</span>99<span class="pjs-token pjs-punctuation">,</span> 99<span class="pjs-token pjs-punctuation">,</span> 99<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
@@ -5294,8 +5298,8 @@
 <li><strong>File:</strong> _modal.scss</li>
 <li><strong>Group:</strong> modal</li>
 <li><strong>Type:</strong> variable</li>
-<li><strong>Lines (comments):</strong> 31-67</li>
-<li><strong>Lines (code):</strong> 69-109</li>
+<li><strong>Lines (comments):</strong> 31-71</li>
+<li><strong>Lines (code):</strong> 73-117</li>
 </ul>
 </details>
 <h4 id="map-properties" tabindex="-1">Map Properties</h4>
@@ -5448,6 +5452,30 @@
 <td style="text-align:left">The padding of the modal header.</td>
 </tr>
 <tr>
+<td style="text-align:left">footer-padding</td>
+<td style="text-align:left">Dimension</td>
+<td style="text-align:left">(0.5rem 1rem)</td>
+<td style="text-align:left">The padding of the modal footer.</td>
+</tr>
+<tr>
+<td style="text-align:left">footer-background-color</td>
+<td style="text-align:left">Color</td>
+<td style="text-align:left">(0.5rem 1rem)</td>
+<td style="text-align:left">The background color of the footer</td>
+</tr>
+<tr>
+<td style="text-align:left">footer-border-top</td>
+<td style="text-align:left">Color</td>
+<td style="text-align:left">(0.5rem 1rem)</td>
+<td style="text-align:left">The border between body and footer</td>
+</tr>
+<tr>
+<td style="text-align:left">footer-text-align</td>
+<td style="text-align:left">CssValue</td>
+<td style="text-align:left">right</td>
+<td style="text-align:left">Text alignment for footer</td>
+</tr>
+<tr>
 <td style="text-align:left">resizer-background-color</td>
 <td style="text-align:left">Color</td>
 <td style="text-align:left">rgb(221, 221, 221)</td>
@@ -5535,8 +5563,8 @@
 <li><strong>File:</strong> _modal.scss</li>
 <li><strong>Group:</strong> modal</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 111-114</li>
-<li><strong>Lines (code):</strong> 116-118</li>
+<li><strong>Lines (comments):</strong> 119-122</li>
+<li><strong>Lines (code):</strong> 124-126</li>
 </ul>
 </details>
 <h4 id="examples" tabindex="-1">Examples</h4>
@@ -5575,8 +5603,8 @@
 <li><strong>File:</strong> _modal.scss</li>
 <li><strong>Group:</strong> modal</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 130-132</li>
-<li><strong>Lines (code):</strong> 134-485</li>
+<li><strong>Lines (comments):</strong> 138-140</li>
+<li><strong>Lines (code):</strong> 142-500</li>
 </ul>
 </details>
 <h4 id="examples-1" tabindex="-1">Examples</h4>
@@ -5599,8 +5627,8 @@
 <li><strong>File:</strong> _modal.scss</li>
 <li><strong>Group:</strong> modal</li>
 <li><strong>Type:</strong> function</li>
-<li><strong>Lines (comments):</strong> 120-123</li>
-<li><strong>Lines (code):</strong> 125-128</li>
+<li><strong>Lines (comments):</strong> 128-131</li>
+<li><strong>Lines (code):</strong> 133-136</li>
 </ul>
 </details>
 <h4 id="examples-2" tabindex="-1">Examples</h4>

package/js/ui/dialog.js

@@ -3,7 +3,7 @@
  */
 
 import { ComponentInitializer } from "../utils/system.js";
-import { wasClickOutside, getScrollbarWidth } from "../utils/dom.js";
+import { wasClickOutside, getScrollbarWidth } from "@ulu/utils/browser/dom.js";
 import { pauseVideos as pauseYoutubeVideos, prepVideos as prepYoutubeVideos } from "../utils/pause-youtube-video.js";
 
 /**

package/js/ui/modal-builder.js

@@ -6,10 +6,10 @@
 import { ComponentInitializer } from "../utils/system.js";
 import { wrapSettingString } from "../settings.js";
 import { getName } from "../events/index.js";
-import { createElementFromHtml } from "@ulu/utils/browser/dom.js";
 import { Resizer } from "./resizer.js";
 import { baseAttribute, closeAttribute, defaults as dialogDefaults } from "./dialog.js";
-
+import { getElement } from "@ulu/utils/browser/dom.js";
+import { createElementFromHtml } from "@ulu/utils/browser/dom.js";
 
 /**
  * Modal Builder Component Initializer
@@ -42,6 +42,8 @@ export const initializer = new ComponentInitializer({
  * @property {string} baseClass - The base CSS class for the modal elements. Defaults to `"modal"`.
  * @property {string} classCloseIcon - The class name for the close icon. Uses the wrapped setting string.
  * @property {string} classResizerIcon - The class name for the resizer icon. Uses the wrapped setting string.
+ * @property {string|Node} footerElement - Element or selector to use as the footer (will be moved to dialog on creation, used for DOM API)
+ * @property {string|Node} footerHtml - Markup to use in the footer
  * @property {boolean} debug - Enables debug logging. Defaults to `false`.
  * @property {function(object): string} templateCloseIcon - A function that returns the HTML for the close icon.
  * @property {function(object): string} templateCloseIcon.config - The resolved modal configuration object.
@@ -71,6 +73,8 @@ export const defaults = {
   noMinHeight: false,
   class: "",
   baseClass: "modal",
+  footerElement: null,
+  footerHtml: null,
   classCloseIcon: wrapSettingString("iconClassClose"),
   classResizerIcon: wrapSettingString("iconClassDragX"),
   debug: false,
@@ -89,7 +93,7 @@ export const defaults = {
    * @returns {String} Markup for modal
    */
   template(id, config) {
-    const { baseClass, describedby } = config;
+    const { baseClass, describedby, footerElement, footerHtml } = config;
     const classes = [
       baseClass,
       `${ baseClass }--${ config.position }`,
@@ -123,6 +127,7 @@ export const defaults = {
           </header>
         ` : "" }
         <div class="${ baseClass }__body" ${ initializer.getAttribute("body") }></div>
+        ${ footerHtml ? `<div class="${ baseClass }__footer">${ footerHtml }</div>`: "" }
         ${ config.hasResizer ? 
           `<div class="${ baseClass }__resizer" ${ initializer.getAttribute("resizer") }>
             ${ config.templateResizerIcon(config) }
@@ -175,6 +180,8 @@ 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());
@@ -193,6 +200,16 @@ export function buildModal(content, options) {
   // Add dialog options for other scripts
   modal.setAttribute(baseAttribute, JSON.stringify(dialogOptions));
 
+  // If they passed a footer element we need to move it in and
+  // make sure it has the class
+  if (config.footerElement) {
+    const footerElement = getElement(config.footerElement);
+    if (footerElement) {
+      footerElement.classList.add(`${ config.baseClass }__footer`);
+      body.after(footerElement);
+    }
+  }
+
   if (config.hasResizer) {
     new Resizer(modal, resizer, {
       fromLeft: config.position === "right"

package/js/ui/page.js

@@ -4,11 +4,11 @@
  * @module ui/page
  */
 
-import { addScrollbarProperty } from "../utils/dom";
+import { addScrollbarCustomProperty } from "@ulu/utils/browser/dom.js";
 
 /**
  * Initialize page module
  */
 export function init() {
-  addScrollbarProperty();
+  addScrollbarCustomProperty();
 }

package/js/ui/print.js

@@ -3,7 +3,7 @@
  */
 
 import { ComponentInitializer } from "../utils/system.js";
-import { getElement } from "../utils/dom.js";
+import { getElement } from "@ulu/utils/browser/dom.js";
 import { printElement } from "@ulu/utils/browser/print.js";
 
 const initializer = new ComponentInitializer({

package/js/ui/programmatic-modal.js

@@ -5,8 +5,8 @@
 
 import { getName, dispatch } from "../events/index.js";
 import { newId } from "../utils/id.js";
-import { getElement } from "../utils/dom.js";
 import { buildModal } from "./modal-builder.js";
+import { getElement } from "@ulu/utils/browser/dom.js";
 
 export class ProgrammaticModalManager {
   static defaults = {

package/js/ui/scrollpoint.js

@@ -5,7 +5,7 @@
 
 import { ComponentInitializer } from "../utils/system.js";
 import { logError } from "../utils/class-logger.js";
-import { getElement } from "../utils/dom.js";
+import { getElement } from "@ulu/utils/browser/dom.js";
 
 // TODO:
 //  - Included a group option or attribute (on container), for things like anchor menus (one active in group at a time).

package/js/ui/theme-toggle.js

@@ -4,8 +4,9 @@
 
 import { ComponentInitializer } from "../utils/system.js";
 import { getName } from "../events/index.js";
-import { getElements, resolveClasses } from "../utils/dom.js";
+import { resolveClasses } from "../utils/dom.js";
 import { hasRequiredProps } from "@ulu/utils/object.js";
+import { getElements } from "@ulu/utils/browser/dom.js";
 
 /**
  * Theme Toggle Component Initializer

package/js/utils/dom.js

@@ -2,8 +2,7 @@
  * @module utils/dom
  */
 
-
-export const regexJsonString = /^[{\[][\s\S]*[}\]]$/;
+import { kebabToCamel } from "@ulu/utils/string.js";
 
 /**
  * Converts a data attribute name to its corresponding dataset property name.
@@ -11,56 +10,9 @@ export const regexJsonString = /^[{\[][\s\S]*[}\]]$/;
  * @returns {string} - The dataset property name (e.g., "uluDialog").
  */
 export function dataAttributeToDatasetKey(attribute) {
-  // Remove "data-" prefix then convert kebab-case to camelCase
-  return attribute
-    .replace(/^data-/, "")
-    .replace(/-([a-z])/g, (_match, letter) => letter.toUpperCase());
-}
-
-/**
- * Get an elements JSON dataset value
- * @param {Node} element 
- * @param {String} key key in dataset object for element
- * @returns {Object} Empty object or JSON object from dataset
- */
-export function getDatasetJson(element, key) {
-  const passed = element.dataset[key];
-  try {
-    return JSON.parse(passed);
-  } catch (error) {
-    console.error(`Error getting JSON from dataset (${ key }) -- "${ passed }"\n`, element, error);
-    return {};
-  }
-}
-
-/**
- * Get an elements JSON dataset value that could potentially just be a single string
- * - If JSON it will return the object else it will return the value directly
- * @param {Node} element 
- * @param {String} key key in dataset object for element
- * @returns {Object|String} JSON object or current dataset value (string or empty string if no value)
- */
-export function getDatasetOptionalJson(element, key) {
-  const passed = element.dataset[key];
-  if (passed && regexJsonString.test(passed.trim())) {
-    return getDatasetJson(element, key);
-  } else {
-    return passed;
-  }
+  return kebabToCamel(attribute.replace(/^data-/, ""));
 }
 
-/**
- * Check if a pointer event x/y was outside an elements bounding box
- */
-export function wasClickOutside(element, event) {
-  const rect = element.getBoundingClientRect();
-  return (event.clientY < rect.top || // above
-    event.clientY > rect.top + rect.height || // below
-    event.clientX < rect.left || // left side
-    event.clientX > rect.left + rect.width); // right side
-}
-
-
 /**
  *   Sets up the positional classes that would come from the equal
  *   height module. Needs to be rerun by user when layout changes
@@ -106,42 +58,6 @@ export function setPositionClasses(parent, classes = {
   });
 }
 
-/**
- * Resolve a target to Element
- * @param {String|Node} target The selector or node/element
- * @param {Object} context [document] The context to query possible selectors from
- * @return {HTMLElement} The element or null if not found
- */
-export function getElement(target, context = document) {
-  if (typeof target === "string") {
-    return context.querySelector(target);
-  } else if (target instanceof Element) {
-    return target;
-  } else {
-    console.warn("getElement: Invalid target type (expected String/Node)", target);
-    return null;
-  }
-} 
-
-/**
- * Resolve a target to Elements
- * @param {String|Node} target The selector or node/element
- * @param {Object} context [document] The context to query possible selectors from
- * @return {Array} The elements or null if not found
- */
-export function getElements(target, context = document) {
-  if (typeof target === "string") {
-    return [...context.querySelectorAll(target)];
-  } else if (target instanceof Element) {
-    return [target];
-  } else if (Array.isArray(target) || target instanceof NodeList) {
-    return [...target];
-  } else {
-    console.warn("getElement: Invalid target type (expected String/Node/Array/Node List)", target);
-    return null;
-  }
-} 
-
 /**
  * Resolves a class input (string or array) into a consistent array of class names.
  * @param {string|string[]} input - The class input, which can be a string, an array of strings, or any other value.
@@ -163,37 +79,3 @@ export function resolveClasses(classes) {
     return [];
   }
 }
-
-/**
- * Sets a CSS custom property equal to the scrollbar width.
- * @param {object} options - Configuration options.
- * @param {HTMLElement} [options.scrollableChild=document.body] - An element that is a child of a scrollable container (used for width calculation).
- * @param {Window|HTMLElement} [options.container=window] - The container that can be scrolled (used for width calculation).
- * @param {HTMLElement} [options.propertyElement=document.documentElement] - The element to which the custom property will be added. Defaults to document.documentElement for :root access.
- * @param {string} [options.propName="--ulu-scrollbar-width"] - The name of the custom property to set.
- */
-export function addScrollbarProperty(options) {
-  const defaults = {
-    scrollableChild: document.body,
-    container: window,
-    propertyElement: document.documentElement,
-    propName: "--ulu-scrollbar-width",
-  };
-
-  const config = { ...defaults, ...options };
-  const { scrollableChild, container, propertyElement, propName } = config;
-
-  const scrollbarWidth = getScrollbarWidth(scrollableChild, container);
-  propertyElement.style.setProperty(propName, `${ scrollbarWidth }px`);
-}
-
-/**
- * Calculates the width of the scrollbar.
- *
- * @param {HTMLElement} [element=document.body] -The element that is the child of a scrollable container
- * @param {Window|HTMLElement} [container=window] - The container that can be scrolled
- * @returns {number} The width of the scrollbar in pixels.
- */
-export function getScrollbarWidth(element = document.body, container = window) {
-  return container.innerWidth - element.clientWidth;
-}