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

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,8 +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 { ComponentInitializer } from "../core/component.js";
+import { wrapSettingString } from "../core/settings.js";
 import maintain from 'ally.js/maintain/_maintain';
 import { hasRequiredProps } from '@ulu/utils/object.js';
 import { trimWhitespace } from "@ulu/utils/string.js";
@@ -77,7 +77,7 @@ const requiredElements = [
 export function init() {
   initializer.init({
     withData: true,
-    events: ["pageModified"],
+    coreEvents: ["pageModified"],
     setup({ element, data, initialize }) {
       setupSlider(element, data);
       initialize();

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

package/lib/js/utils/index.js

@@ -0,0 +1,63 @@
+/**
+ * @module utils
+ * @description
+ * Public API for the utility modules.
+ *
+ * This file re-exports the internal implementations from the `utils` 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 `utils` directory (e.g., `import { ... } from './dom.js'`).
+ *
+ * @internal
+ *
+ * Naming Convention
+ * To ensure tree-shaking works correctly while avoiding name collisions in the
+ * final library, the following naming convention is used for re-exporting:
+ *
+ * 1. Generic Names: Functions with highly generic names (e.g., `log`, `set`, `defaults`)
+ *    MUST be prefixed with a name derived from their module to prevent conflicts.
+ *    Example: `export { log as classLoggerLog } from "./class-logger.js";`
+ *
+ * 2. Descriptive Names: Functions with specific, descriptive names that are unlikely
+ *    to cause conflicts (e.g., `newId`, `createFloatingUi`, `configureIcons`)
+ *    can be re-exported directly without a prefix for better readability.
+ *    Example: `export { newId } from "./id.js";`
+ */
+
+export {
+  set as classLoggerSet,
+  log as classLoggerLog,
+  logWarning as classLoggerLogWarning,
+  logError as classLoggerLogError
+} from "./class-logger.js";
+
+export {
+  dataAttributeToDatasetKey,
+  setPositionClasses,
+  resolveClasses
+} from "./dom.js";
+
+export { 
+  FileSave 
+} from "./file-save.js";
+
+export {
+  defaults as floatingUiDefaults,
+  createFloatingUi
+} from "./floating-ui.js";
+
+export { 
+  configureIcons as fontAwesomeConfigureIcons
+} from "./font-awesome.js";
+
+export {
+  newId,
+  ensureId
+} from "./id.js";
+
+export {
+  pauseVideos as youtubePauseVideos,
+  prepVideos as youtubePrepVideos
+} from "./pause-youtube-video.js";

package/{scss → lib/scss}/_breakpoint.scss

@@ -72,7 +72,7 @@ $sizes: (
 /// @example scss {compile} Example usage
 ///   .test-get-sizes {
 ///     $sizes: ulu.breakpoint-get-sizes();
-///     height: map.get($sizes, "medium");
+///     content: map.get($sizes, "medium");
 ///   }
 /// @return {Map} Map of breakpoints (equivalent to $sizes)
 
@@ -85,7 +85,7 @@ $sizes: (
 /// @compiler
 /// @example scss {compile} Example usage
 ///   .test-get-size {
-///     height: ulu.breakpoint-get-size("medium");
+///     content: ulu.breakpoint-get-size("medium");
 ///   }
 /// @return {Number} The sizes value
 
@@ -98,8 +98,8 @@ $sizes: (
 /// @compiler
 /// @example scss {compile} Example usage
 ///   .test-get-size-value {
-///     height: ulu.breakpoint-get-size-value("medium", true);
-///     max-height: ulu.breakpoint-get-size-value("medium");
+///     content: ulu.breakpoint-get-size-value("medium", true);
+///     content: ulu.breakpoint-get-size-value("medium");
 ///   }
 /// @return {Number} The value for the given size
 

package/{scss → lib/scss}/_button.scss

@@ -84,6 +84,7 @@ $config: (
   "transition-enabled":      true,
   "transition-duration":     200ms,
   "transition-properties":   (border-color, background-color, color, box-shadow),
+  "button-icon-offset":      true,
 ) !default;
   
 /// Button sizes

package/{scss → lib/scss}/_color.scss

@@ -16,44 +16,48 @@
 /// @type map  
 
 $palette: (
-  "black"                   : black,
-  "white"                   : white,
-  "type"                    : black,
-  "type-secondary"          : rgb(82, 82, 82),
-  "type-tertiary"           : rgb(125, 125, 125),
-  "type-disabled"           : rgb(160, 160, 160),
-  "headline"                : inherit,
-  "background"              : white,
-  "background-gray"         : #fafafa,
-  "focus"                   : blue,
-  "accent"                  : orange,
-  "info"                    : #00bde3,
-  "success"                 : #00a91c,
-  "warning"                 : #ffbe2e,  
-  "danger"                  : #d54309,  
-  "info-background"         : #e7f6f8,
-  "success-background"      : #ecf3ec,
-  "warning-background"      : #faf3d1,
-  "danger-background"       : #f4e3db,
-  "selected"                : green,
-  "box-shadow"              : rgba(0, 0, 0, 0.349),
-  "box-shadow-hover"        : rgba(0, 0, 0, 0.5),
-  "rule"                    : gray,
-  "rule-light"              : lightgray,
-  "link"                    : blue,
-  "link-hover"              : darkblue,
-  "link-active"             : darkblue,
-  "link-visited"            : purple,
-  "bullet"                  : inherit,
-  "control"                 : white,
-  "control-hover"           : white,
-  "control-active"          : white,
-  "control-border"          : purple,
-  "control-border-hover"    : blue,
-  "control-border-active"   : orange,
-  "control-background"      : purple,
-  "control-background-hover": blue,
-  "control-background-active": orange,
+  "black":                      black,
+  "white":                      white,
+  "type":                       black,
+  "type-secondary":             rgb(82, 82, 82),
+  "type-tertiary":              rgb(125, 125, 125),
+  "type-disabled":              rgb(160, 160, 160),
+  "headline":                   inherit,
+  "background":                 white,
+  "focus":                      blue,
+  "accent":                     orange,
+  "info":                       #00bde3,
+  "success":                    #00a91c,
+  "warning":                    #ffbe2e,
+  "danger":                     #d54309,
+  "info-background":            #e7f6f8,
+  "success-background":         #ecf3ec,
+  "warning-background":         #faf3d1,
+  "danger-background":          #f4e3db,
+  // Used for background of elements that are placeholder or that have no value (think charts)
+  "placeholder-background":     #e2e2e2,
+  "placeholder-background-alt": #bababa,
+  "selected":                   green,
+  "box-shadow":                 rgba(0, 0, 0, 0.349),
+  "box-shadow-hover":           rgba(0, 0, 0, 0.5),
+  "rule":                       gray,
+  "rule-light":                 lightgray,
+  "link":                       blue,
+  "link-hover":                 darkblue,
+  "link-active":                darkblue,
+  "link-visited":               purple,
+  "bullet":                     inherit,
+  "control":                    white,
+  "control-hover":              white,
+  "control-active":             white,
+  "control-border":             purple,
+  "control-border-hover":       blue,
+  "control-border-active":      orange,
+  "control-background":         purple,
+  "control-background-hover":   blue,
+  "control-background-active":  orange,
+  // Like accent indicator like things in ui (progress, etc)
+  "indicator" :                 #5050ab, 
 ) !default;
 
 /// Pairs of background-color and color definitions

package/{scss → lib/scss}/_element.scss

@@ -70,7 +70,8 @@ $config: (
   "ul-list-style-type-2":             circle,
   "ul-list-style-type-3":             square,
   "cap-color" :                       "accent",
-  "cap-size" :                        5px
+  "cap-size" :                        5px,
+  "icon-centered-vertical-offset" :   0.05em,
 ) !default;
 
 /// Rule style map, redefine defaults or add to
@@ -412,4 +413,8 @@ $rule-margins: (
   &:focus:not(:focus-visible) {
     outline: none;
   }
+}
+
+@mixin icon-vert-translate($adjustment : get("icon-centered-vertical-offset")) {
+  transform: translateY($adjustment);
 }

package/{scss → lib/scss}/_typography.scss

@@ -35,6 +35,7 @@
 /// @prop {Number} line-height-dense [1.3] Default dense line height
 /// @prop {Number} line-height-densest [1.1]
 /// @prop {Number} line-height-spaced [1.75]
+/// @prop {CssUnit} space-size [0.38em] The size of a space for the site's typography (used when creating faux spaces, like for .flow-inline utility)
 
 $config: (
   "letter-spacing-uppercase": 0.04em,
@@ -61,6 +62,7 @@ $config: (
   "max-width":                60em,
   "max-width-large":          75em,
   "max-width-small":          45em,
+  "space-size":               0.38em
 ) !default;
 
 /// Change modules $config
@@ -304,6 +306,19 @@ $sizes: get-default-sizes() !default;
   font-size: calc(#{ $font-size } + #{ $amount });
 }
 
+
+/// Output an optional typography size
+/// - If $name is not a string (ie. null, etc) no size will be output
+/// - If the size is not defined no size will be output
+/// @param {*} $name Size name
+/// @param {*} $args... All args are passed as-is to size() mixin
+
+@mixin optional-size($name, $changes: false, $only-font-size: null) {
+  @if (meta.type-of($name) == "string" and has-size($name)) {
+    @include size($name, $changes, $only-font-size);
+  }
+}
+
 /// Print a typography size (font-size, line-height)
 /// @param {String} $nameOrMap Name to retrieve from sizes map or a unique size map that follows the API
 /// @param {Map} $changes Modifications to be merged into size before output