@ulu/frontend 0.1.0-beta.76 → 0.1.0-beta.78

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/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

@@ -4,12 +4,12 @@
  */
 
 import { ComponentInitializer } from "../utils/system.js";
-import { getElement } from "../utils/dom.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
@@ -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 }`,
@@ -106,7 +107,6 @@ export const defaults = {
       ...(config.class ? [config.class] : []), 
     ];
     const labelledby = config.title ? `${ id }--title` : config.labelledby;
-    const hasFooter = footerElement || footerHtml;
     return `
       <dialog 
         id="${ id }" 
@@ -181,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/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;
-}

package/js/utils/system.js

@@ -4,7 +4,8 @@
  */
 
 import { hasRequiredProps } from "@ulu/utils/object.js";
-import { getDatasetOptionalJson, dataAttributeToDatasetKey } from "./dom.js";
+import { getDatasetOptionalJson } from "@ulu/utils/browser/dom.js";
+import { dataAttributeToDatasetKey } from "./dom.js";
 import { getName } from "../events/index.js";
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend",
-  "version": "0.1.0-beta.76",
+  "version": "0.1.0-beta.78",
   "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.24",
+    "@ulu/utils": "^0.0.26",
     "ally.js": "^1.4.1",
     "aria-tablist": "^1.2.2",
     "swipe-listener" : "^1.3.0"

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":"AAgJA;;GAEG;AACH,gDAEC;AAED;;;GAGG;AACH,6BAQC;AAED;;;;GAIG;AACH,oCAHW,IAAI;;EA+Dd;AAzND;;GAEG;AACH,+CAGG;;;;;;;;;;;;;;;;;;;;;;;;IA6DD,uDAGC;IACD,yDAGC;IACD;;;;;OAKG;IACH,0DA4CC;;;;;;;;;;;;WA/GW,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"}

package/types/ui/theme-toggle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme-toggle.d.ts","sourceRoot":"","sources":["../../js/ui/theme-toggle.js"],"names":[],"mappings":"AAkGA;;GAEG;AACH,gDAEC;AAED;;;GAGG;AACH,6BASC;AAED;;;GAGG;AACH,oCAFW,WAAW;;;;;;EA+FrB;AAhND;;GAEG;AACH,+CAGG;;;;;;;;;;;;;;;;;;;;;;;IAmDD;;OAEG;IACH,mCAAiB;;;;;;;qCAjEkB,oBAAoB"}
+{"version":3,"file":"theme-toggle.d.ts","sourceRoot":"","sources":["../../js/ui/theme-toggle.js"],"names":[],"mappings":"AAmGA;;GAEG;AACH,gDAEC;AAED;;;GAGG;AACH,6BASC;AAED;;;GAGG;AACH,oCAFW,WAAW;;;;;;EA+FrB;AAhND;;GAEG;AACH,+CAGG;;;;;;;;;;;;;;;;;;;;;;;IAmDD;;OAEG;IACH,mCAAiB;;;;;;;qCAlEkB,oBAAoB"}

package/types/utils/dom.d.ts

@@ -4,25 +4,6 @@
  * @returns {string} - The dataset property name (e.g., "uluDialog").
  */
 export function dataAttributeToDatasetKey(attribute: any): string;
-/**
- * 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: Node, key: string): any;
-/**
- * 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: Node, key: string): any | string;
-/**
- * Check if a pointer event x/y was outside an elements bounding box
- */
-export function wasClickOutside(element: any, event: any): boolean;
 /**
  *   Sets up the positional classes that would come from the equal
  *   height module. Needs to be rerun by user when layout changes
@@ -34,20 +15,6 @@ export function wasClickOutside(element: any, event: any): boolean;
  *   @param {Object} classes Override the default equal heights classes
  */
 export function setPositionClasses(parent: Node, classes?: any): void;
-/**
- * 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: string | Node, context?: any): HTMLElement;
-/**
- * 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: string | Node, context?: any): any[];
 /**
  * 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.
@@ -58,30 +25,4 @@ export function getElements(target: string | Node, context?: any): any[];
  * resolveClassArray("single-class"); // Returns ["single-class"]
  */
 export function resolveClasses(classes: any): string[];
-/**
- * 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: {
-    scrollableChild?: HTMLElement;
-    container?: Window | HTMLElement;
-    propertyElement?: HTMLElement;
-    propName?: string;
-}): void;
-/**
- * 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?: HTMLElement, container?: Window | HTMLElement): number;
-/**
- * @module utils/dom
- */
-export const regexJsonString: RegExp;
 //# sourceMappingURL=dom.d.ts.map