@ulu/frontend 0.1.0-beta.99 → 0.2.0-beta.10

package/lib/js/ui/index.js

@@ -0,0 +1,165 @@
+/**
+ * @module ui
+ * @description
+ * Public API for the UI modules.
+ *
+ * This file re-exports the internal implementations from the `ui` directory
+ * with new names where appropriate, defining the public-facing API for the
+ * library bundle.
+ *
+ * For internal library usage, import directly from the specific file within
+ * the `ui` directory (e.g., `import { ... } from './dialog.js'`).
+ *
+ * @internal How to Name Exports
+ *
+ * Each export is renamed with a prefix based on its source module's name
+ * (e.g., `init` from `dialog.js` becomes `dialogInit`). This is a critical
+ * part of the library's bundling strategy, which creates a single, "flat"
+ * module with uniquely named exports.
+ *
+ * This approach:
+ * 1. Prevents name collisions between modules that might use the same export
+ *    names (like `init` or `defaults`).
+ * 2. Allows bundlers in consuming projects to perform dead-code elimination
+ *    (tree-shaking) with maximum effectiveness.
+ *
+ * How To Add New Exports
+ *
+ * When adding a new export, follow the naming convention:
+ * `[moduleName][OriginalExportName]` (using camelCase).
+ *
+ * For example, to export `myFunction` from `./foo.js`, you would add:
+ * `myFunction as fooMyFunction`
+ *
+ * Please keep the exports within each block alphabetized.
+ */
+export {
+  BreakpointManager
+} from "./breakpoints.js";
+
+export {
+  Collapsible
+} from "./collapsible.js";
+
+export {
+  init as detailsGroupInit,
+  initializer as detailsGroupInitializer,
+  setupGroup as detailsGroupSetupGroup
+} from "./details-group.js";
+
+export {
+  baseAttribute as dialogBaseAttribute,
+  closeAttribute as dialogCloseAttribute,
+  defaults as dialogDefaults,
+  getDialogOptions as dialogGetDialogOptions,
+  init as dialogInit,
+  initializer as dialogInitializer,
+  setDefaults as dialogSetDefaults,
+  setupDialog as dialogSetupDialog,
+  setupTrigger as dialogSetupTrigger,
+} from "./dialog.js";
+
+export {
+  Flipcard,
+  init as flipcardInit,
+  initializer as flipcardInitializer,
+} from "./flipcard.js";
+
+export {
+  init as gridInit,
+  initializer as gridInitializer,
+} from "./grid.js";
+
+export {
+  buildModal as modalBuilderBuildModal,
+  defaults as modalBuilderDefaults,
+  init as modalBuilderInit,
+  initializer as modalBuilderInitializer,
+  setDefaults as modalBuilderSetDefaults,
+} from "./modal-builder.js";
+
+export {
+  ProgrammaticModalManager
+} from "./programmatic-modal.js";
+
+export {
+  OverflowScroller
+} from "./overflow-scroller.js";
+
+export {
+  createPager as overflowScrollerCreatePager
+} from "./overflow-scroller-pager.js";
+
+export {
+  init as pageInit
+} from "./page.js";
+
+export {
+  getContentByTrigger as popoverGetContentByTrigger,
+  init as popoverInit,
+  initializer as popoverInitializer,
+  instances as popoverInstances,
+  Popover,
+  resolve as popoverResolve,
+} from "./popover.js";
+
+export {
+  attrs as printDetailsAttrs,
+  init as printDetailsInit
+} from "./print-details.js";
+
+export {
+  init as printInit
+} from "./print.js";
+
+export {
+  attachHandlers as proxyClickAttachHandlers,
+  defaults as proxyClickDefaults,
+  init as proxyClickInit,
+  initializer as proxyClickInitializer,
+  setDefaults as proxyClickSetDefaults,
+  setupProxy as proxyClickSetupProxy,
+} from "./proxy-click.js";
+
+export {
+  Resizer
+} from "./resizer.js";
+
+export {
+  init as scrollSliderInit,
+  initializer as scrollSliderInitializer,
+} from "./scroll-slider.js";
+
+export {
+  init as scrollpointInit,
+  initializer as scrollpointInitializer,
+  Scrollpoint,
+} from "./scrollpoint.js";
+
+export {
+  init as sliderInit,
+  initializer as sliderInitializer,
+  setupSlider as sliderSetupSlider,
+  Slider,
+} from "./slider.js";
+
+export {
+  init as tabsInit,
+  initializer as tabsInitializer,
+  instances as tabsInstances,
+  setup as tabsSetup,
+} from "./tabs.js";
+
+export {
+  defaults as themeToggleDefaults,
+  init as themeToggleInit,
+  initializer as themeToggleInitializer,
+  setDefaults as themeToggleSetDefaults,
+  setupToggle as themeToggleSetupToggle,
+} from "./theme-toggle.js";
+
+export {
+  init as tooltipInit,
+  initializer as tooltipInitializer,
+  Tooltip,
+} from "./tooltip.js";

package/{js → lib/js}/ui/modal-builder.js

@@ -3,9 +3,9 @@
  * @description Note this module needs to be initialized before dialogs!
  */
 
-import { ComponentInitializer } from "../utils/system.js";
-import { wrapSettingString } from "../settings.js";
-import { getName } from "../events/index.js";
+import { ComponentInitializer } from "../core/component.js";
+import { wrapSettingString } from "../core/settings.js";
+import { getCoreEventName } from "../core/events.js";
 import { Resizer } from "./resizer.js";
 import { baseAttribute, closeAttribute, defaults as dialogDefaults } from "./dialog.js";
 import { getElement } from "@ulu/utils/browser/dom.js";
@@ -41,7 +41,8 @@ export const initializer = new ComponentInitializer({
  * @property {boolean} noMinHeight - If `true`, the modal will not have a minimum height. Defaults to `false`.
  * @property {string} class - Additional CSS class(es) to add to the modal. Defaults to `""`.
  * @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} classClose - The class name for the close button. Defaults to 'button button--icon' styling.
+ * @property {string} classCloseIcon - The class name for the close icon. Defaults to 'button__icon' styling. 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
@@ -76,7 +77,8 @@ export const defaults = {
   baseClass: "modal",
   footerElement: null,
   footerHtml: null,
-  classCloseIcon: wrapSettingString("iconClassClose"),
+  classClose: "button button--icon",
+  classCloseIcon: wrapSettingString("iconClassClose", (v) => `${v} button__icon`),
   classResizerIcon: wrapSettingString("iconClassDragX"),
   classResizerIconBoth: wrapSettingString("iconClassDragBoth"),
   debug: false,
@@ -124,7 +126,7 @@ export const defaults = {
               }
               <span class="${ baseClass }__title-text">${ config.title }</span>
             </h2>
-            <button class="${ baseClass }__close" aria-label="Close modal" ${ closeAttribute } autofocus>
+            <button class="${ baseClass }__close ${ config.classClose }" aria-label="Close modal" ${ closeAttribute } autofocus>
               ${ config.templateCloseIcon(config) }
             </button>
           </header>
@@ -158,7 +160,7 @@ export function setDefaults(options) {
 export function init() {
   initializer.init({
     withData: true,
-    events: ["pageModified"],
+    coreEvents: ["pageModified"],
     setup({ element, data }) {
       buildModal(element, data);
     }
@@ -228,11 +230,11 @@ export function buildModal(content, options) {
 
   if (config.print) {
     let printClone;
-    document.addEventListener(getName("beforePrint"), () => {
+    document.addEventListener(getCoreEventName("beforePrint"), () => {
       printClone = content.cloneNode(true);
       modal.after(printClone);
     });
-    document.addEventListener(getName("afterPrint"), () => {
+    document.addEventListener(getCoreEventName("afterPrint"), () => {
       printClone.remove();
     });
   }

package/{js → lib/js}/ui/overflow-scroller.js

@@ -10,7 +10,7 @@
  * @todo - Document that user could use something like [https://github.com/LachlanArthur/scroll-snap-api/tree/master/src] to have it go between items
  * 
  */
-import { wrapSettingString } from "../settings.js";
+import { wrapSettingString } from "../core/settings.js";
 import { hasRequiredProps } from '@ulu/utils/object.js';
 import { logError } from "../utils/class-logger.js";
 const requiredElements = [
@@ -35,7 +35,7 @@ export class OverflowScroller {
     if (!hasRequiredProps(requiredElements)) {
       logError(this, 'Missing a required Element');
     }
-    console.log(elements)
+    // console.log(elements)
     this.elements = {
       ...elements,
       ...this.createControls(elements.controls)

package/{js → lib/js}/ui/popover.js

@@ -2,7 +2,7 @@
  * @module ui/popover
  */
 
-import { ComponentInitializer } from "../utils/system.js";
+import { ComponentInitializer } from "../core/component.js";
 import { createFloatingUi } from "../utils/floating-ui.js";
 import { Collapsible } from "./collapsible.js";
 
@@ -37,7 +37,7 @@ export function init() {
   initializer.init({
     key: "trigger",
     withData: true,
-    events: ["pageModified"],
+    coreEvents: ["pageModified"],
     setup({ element, data, initialize }) {
       if (instances.has(element)) return;
       const resolved = resolve(element, data);

package/{js → lib/js}/ui/print-details.js

@@ -2,7 +2,7 @@
  * @module ui/print-details
  */
 
-import { getName } from "../events/index.js";
+import { getCoreEventName } from "../core/events.js";
 
 /**
  * Default data attributes
@@ -26,7 +26,7 @@ export function init(options) {
   const config = Object.assign({}, defaults, options);
   
   // Add flag and open each details that's closed
-  document.addEventListener(getName("beforePrint"), () => {
+  document.addEventListener(getCoreEventName("beforePrint"), () => {
     document.querySelectorAll(config.selector).forEach(details => {
       if (!details.open) {
         details.setAttribute(attrs.opened, true);
@@ -35,7 +35,7 @@ export function init(options) {
     });
   });
   // When print ends find all flagged and close
-  document.addEventListener(getName("afterPrint"), () => {
+  document.addEventListener(getCoreEventName("afterPrint"), () => {
     document.querySelectorAll(attrSelector("opened")).forEach(details => {
       details.removeAttribute(attrs.opened);
       details.open = false;

package/{js → lib/js}/ui/print.js

@@ -2,7 +2,7 @@
  * @module ui/print
  */
 
-import { ComponentInitializer } from "../utils/system.js";
+import { ComponentInitializer } from "../core/component.js";
 import { getElement } from "@ulu/utils/browser/dom.js";
 import { printElement } from "@ulu/utils/browser/print.js";
 
@@ -28,7 +28,7 @@ const defaults = {
 export function init() {
   initializer.init({
     withData: true,
-    events: ["pageModified"],
+    coreEvents: ["pageModified"],
     setup({ element, data, initialize }) {
       setupTrigger(element, data);
       initialize();

package/{js → lib/js}/ui/programmatic-modal.js

@@ -3,7 +3,7 @@
  */
 
 
-import { getName, dispatch } from "../events/index.js";
+import { getCoreEventName, dispatchCoreEvent } from "../core/events.js";
 import { newId } from "../utils/id.js";
 import { buildModal } from "./modal-builder.js";
 import { getElement } from "@ulu/utils/browser/dom.js";
@@ -26,7 +26,7 @@ export class ProgrammaticModalManager {
     this.onPageModified = () => {
       this.setupTriggers();
     };
-    document.addEventListener(getName("pageModified"), this.onPageModified);
+    document.addEventListener(getCoreEventName("pageModified"), this.onPageModified);
     this.setupTriggers();
   }
   setupTriggers() {
@@ -89,7 +89,7 @@ export class ProgrammaticModalManager {
         modal.showModal();
       });
     }
-    dispatch("pageModified", modal);
+    dispatchCoreEvent("pageModified", modal);
     // Open the new modal for the first time
     modal.showModal();
     return ctx;

package/{js → lib/js}/ui/proxy-click.js

@@ -9,7 +9,7 @@
  * uses the elements .click(). Uses data-attributes for selection by default.
  */
 
-import { ComponentInitializer } from "../utils/system.js";
+import { ComponentInitializer } from "../core/component.js";
 
 /**
  * Proxy Click Component Initializer
@@ -45,7 +45,7 @@ export function setDefaults(options) {
 export function init() {
   initializer.init({
     withData: true,
-    events: ["pageModified"],
+    coreEvents: ["pageModified"],
     setup({ element, data, initialize }) {
       setupProxy(element, data);
       initialize();

package/{js → lib/js}/ui/resizer.js

@@ -5,7 +5,7 @@
 // Note: Gzip Test = 1.6kb (7-28-25), which seems appropriate  
 // based on how many options/events it handles
 
-import { createEvent } from "../events/index.js";
+import { createUluEvent } from "../core/events.js";
 import { logError, log } from "../utils/class-logger.js";
 
 /**
@@ -427,6 +427,6 @@ export class Resizer {
    * @param {Object} [data={}] Optional data to attach to the event's detail property.
    */
   dispatchEvent(type, data = {}) {
-    this.container.dispatchEvent(createEvent(type, data));
+    this.container.dispatchEvent(createUluEvent(type, data));
   }
 }

package/{js → lib/js}/ui/scroll-slider.js

@@ -2,7 +2,7 @@
  * @module ui/scroll-slider
  */
 
-import { ComponentInitializer } from "../utils/system.js";
+import { ComponentInitializer } from "../core/component.js";
 import { OverflowScroller } from "./overflow-scroller.js";
 import { createPager } from "./overflow-scroller-pager.js";
 
@@ -28,7 +28,7 @@ const defaults = {
 export function init() {
   initializer.init({
     withData: true,
-    events: ["pageModified"],
+    coreEvents: ["pageModified"],
     setup({ element, data, initialize }) {
       setupSlider(element, data);
       initialize();

package/{js → lib/js}/ui/scrollpoint.js

@@ -3,7 +3,7 @@
  * @description Module that uses intersection observer to add scrollpoint like behavior.
  */
 
-import { ComponentInitializer } from "../utils/system.js";
+import { ComponentInitializer } from "../core/component.js";
 import { logError } from "../utils/class-logger.js";
 import { getElement } from "@ulu/utils/browser/dom.js";
 
@@ -32,7 +32,7 @@ export const initializer = new ComponentInitializer({
 export function init() {
   initializer.init({
     withData: true,
-    events: ["pageModified"],
+    coreEvents: ["pageModified"],
     setup({ element, data, initialize }) {
       const config = Object.assign({}, data);
       (new Scrollpoint(element, config));

package/{js → lib/js}/ui/slider.js

@@ -30,9 +30,8 @@
 //                            https://dev.opera.com/articles/css-will-change-property/
 //                              * Will Change use
 
-import { ComponentInitializer } from "../utils/system.js";
-import { wrapSettingString } from "../settings.js";
-import maintain from 'ally.js/maintain/_maintain';
+import { ComponentInitializer } from "../core/component.js";
+import { wrapSettingString } from "../core/settings.js";
 import { hasRequiredProps } from '@ulu/utils/object.js';
 import { trimWhitespace } from "@ulu/utils/string.js";
 import { debounce } from "@ulu/utils/performance.js";
@@ -53,17 +52,9 @@ const attrSelectorControlContext = initializer.attributeSelector("control-contex
 const attrSelectorSlide = initializer.attributeSelector("slide");
 
 const instances = [];
-const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
 const eventOnce = { once: true };
 const cssDuration = d => `${ d }ms`;
 
-// Resize handlers for all slider instances, Load event to avoid triggering
-addEventListener('load', () => {
-  addEventListener('resize', debounce(() => {
-    Slider.instances.forEach(i => i.handleResize());
-  }, 250));
-});
-
 const requiredElements = [
   "container", 
   "trackContainer", 
@@ -77,7 +68,7 @@ const requiredElements = [
 export function init() {
   initializer.init({
     withData: true,
-    events: ["pageModified"],
+    coreEvents: ["pageModified"],
     setup({ element, data, initialize }) {
       setupSlider(element, data);
       initialize();
@@ -112,6 +103,22 @@ export function setupSlider(container, options) {
  */
 export class Slider {
   static instances = [];
+  static globalsInitialized = false;
+  static reduceMotion = false;
+
+  static _initializeGlobals() {
+    if (Slider.globalsInitialized) {
+      return;
+    }
+    // Load event to avoid triggering before page is ready
+    addEventListener('load', () => {
+      addEventListener('resize', debounce(() => {
+        Slider.instances.forEach(i => i.handleResize());
+      }, 250));
+    });
+    Slider.reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
+    Slider.globalsInitialized = true;
+  }
   /**
    * Default options for slider
    */
@@ -133,6 +140,7 @@ export class Slider {
     }
   }
   constructor(elements, config) {
+    Slider._initializeGlobals();
     const options = Object.assign({}, Slider.defaults, config);
     this.options = options;
     this.slide = null;
@@ -161,8 +169,8 @@ export class Slider {
       ...this.createNav(elements.navContext || elements.container)
     };
     // Choose the appropriate transition method
-    this.transition =  options.transition ? options.transitionFade || reduceMotion 
-                          ? this.fadeTransition : this.slideTransition :  this.noTransition;
+    this.transition = options.transition ? options.transitionFade || Slider.reduceMotion ? 
+                      this.fadeTransition : this.slideTransition : this.noTransition;
     this.setup();
     this.goto(0, null, "init");
     log(this, "Slider Instance Created", this);
@@ -383,8 +391,9 @@ export class Slider {
     }
 
     // Make all slide interactive elements inert
-    const lockInteractives = maintain.disabled({ context: this.elements.track  });
+    this.elements.track.inert = true;
     this.transitioning = true;
+
     // Set classes first just feels better
     if (old) old.navButton.classList.remove(activeClass);
     slide.navButton.classList.add(activeClass);
@@ -394,8 +403,8 @@ export class Slider {
       this.index = index;
       this.slide = slide;
       this.transitioning = false;
+      this.elements.track.inert = false;
       elements.container.classList.remove(transitionClass);
-      lockInteractives.disengage();
       if (!isInit) {
         slide.element.focus();
         this.emit("goto", [event, index, slide]);

package/{js → lib/js}/ui/tabs.js

@@ -9,7 +9,7 @@
 //   setting this up to destroy tab interface when ui layout changes?
 
 import AriaTablist from "aria-tablist";
-import { ComponentInitializer } from "../utils/system.js";
+import { ComponentInitializer } from "../core/component.js";
 
 /**
  * Array of current tab instances (exported if you need to interact with them)
@@ -31,7 +31,7 @@ export const initializer = new ComponentInitializer({
 export function init() {
   const initial = () => {
     initializer.init({
-      events: ["pageModified"],
+      coreEvents: ["pageModified"],
       withData: true,
       setup({ element, data, initialize }) {
         setup(element, data);

package/{js → lib/js}/ui/theme-toggle.js

@@ -2,8 +2,8 @@
  * @module ui/theme-toggle
  */
 
-import { ComponentInitializer } from "../utils/system.js";
-import { getName } from "../events/index.js";
+import { ComponentInitializer } from "../core/component.js";
+import { getCoreEventName } from "../core/events.js";
 import { resolveClasses } from "../utils/dom.js";
 import { hasRequiredProps } from "@ulu/utils/object.js";
 import { getElements } from "@ulu/utils/browser/dom.js";
@@ -110,7 +110,7 @@ export function setDefaults(options) {
  */
 export function init() {
   initializer.init({
-    events: ["pageModified"],
+    coreEvents: ["pageModified"],
     withData: true,
     setup({ element, data, initialize }) {
       setupToggle(element, data);
@@ -148,7 +148,7 @@ export function setupToggle(toggle, userOptions) {
   // update them vs toggles which would be updated by the main pageModified 
   // event in init
   attachRemotes();
-  document.addEventListener(getName("pageModified"), attachRemotes);
+  document.addEventListener(getCoreEventName("pageModified"), attachRemotes);
 
   /**
    * Instance function to get the next theme in cycle
@@ -204,7 +204,7 @@ export function setupToggle(toggle, userOptions) {
     toggle.removeEventListener("click", onToggleClick);
     toggle.removeAttribute(attrInit, "");
     cleanupRemotes();
-    document.removeEventListener(getName("pageModified"), attachRemotes);
+    document.removeEventListener(getCoreEventName("pageModified"), attachRemotes);
   }
 
   return { 

package/{js → lib/js}/ui/tooltip.js

@@ -2,8 +2,8 @@
  * @module ui/tooltip
  */
 
-import { ComponentInitializer } from "../utils/system.js";
-import { getName as getEventName } from "../events/index.js";
+import { ComponentInitializer } from "../core/component.js";
+import { getUluEventName } from "../core/events.js";
 import { createFloatingUi } from "../utils/floating-ui.js";
 import { createElementFromHtml } from "@ulu/utils/browser/dom.js";
 import { logError } from "../utils/class-logger.js";
@@ -26,7 +26,7 @@ const attrSelectorArrow = initializer.attributeSelector("arrow");
  */
 export function init() {
   initializer.init({
-    events: ["pageModified"],
+    coreEvents: ["pageModified"],
     withData: true,
     setup({ element: trigger, data, initialize }) {
       const options = typeof data === "object" ? data : {};
@@ -261,7 +261,7 @@ export class Tooltip {
     }
   }
   createEvent(name, detail) {
-    return new CustomEvent(getEventName("tooltip:" + name), { detail });
+    return new CustomEvent(getUluEventName("tooltip:" + name), { detail });
   }
   createFloatingInstance() {
     this.floatingCleanup = createFloatingUi(this.elements, this.floatingOptions);

package/{js → lib/js}/utils/css.js

@@ -9,5 +9,5 @@
  * @returns {string} The fully formed CSS custom property name (e.g., "--prefix-propertyName").
  */
 export function getCustomProperty(prefix, propertyName) {
-  return `--${prefix}-${propertyName}`;
+  return `--${ prefix }-${ propertyName }`;
 }

package/{js → lib/js}/utils/font-awesome.js

@@ -1,9 +1,9 @@
 /**
- * @module settings
+ * @module utils/font-awesome
  * @description Utility module for setting up Font Awesome
  */
 
-import { updateSettings } from "../settings.js";
+import { updateSettings } from "../core/settings.js";
 
 /**
  * Sets icon settings to Font Awesome icons