@ulu/frontend 0.2.0-beta.5 → 0.2.0-beta.7

package/lib/js/ui/breakpoints.js

@@ -12,10 +12,6 @@ import { log, logError } from "../utils/class-logger.js";
 
 const getDefaultCustomProperty = prefix => getCustomProperty(prefix, "breakpoint");
 
-if (isBrowser()) {
-  initResizeHandler();
-}
-
 /**
  * @class
  * Class that provides method for retrieving and acting on breakpoints passed
@@ -23,6 +19,17 @@ if (isBrowser()) {
  */
 export class BreakpointManager {
   static instances = [];
+  static globalsInitialized = false;
+
+  static _initializeGlobals() {
+    if (BreakpointManager.globalsInitialized || !isBrowser()) {
+      return;
+    }
+    window.addEventListener(getCoreEventName("pageResized"), () => {
+      BreakpointManager.instances.forEach(i => i.update());
+    });
+    BreakpointManager.globalsInitialized = true;
+  }
   static defaults = {
     element: document?.documentElement,
     valueFromPseudo: false,
@@ -41,6 +48,7 @@ export class BreakpointManager {
    * @param {String} config.pseudoSelector Change pseudo selector used to get the breakpoint from the pseudo's content property
    */
   constructor(config) {
+    BreakpointManager._initializeGlobals();
     Object.assign(this, BreakpointManager.defaults, config);
     this.active = null;
     this.previous = null;
@@ -281,12 +289,4 @@ class Breakpoint {
     msg.unshift(`Breakpoint (${ this.name }):`);
     this._manager.log.apply(this._manager, msg);
   }
-}
-
-// Resize Handler to update breakpoints for all instances (Called after resize finished)
-// - Only setup in browser environment
-function initResizeHandler() {
-  window.addEventListener(getCoreEventName("pageResized"), () => {
-    BreakpointManager.instances.forEach(i => i.update());
-  });
 }

package/lib/js/ui/modal-builder.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>

package/lib/js/ui/slider.js

@@ -53,17 +53,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", 
@@ -112,6 +104,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 +141,7 @@ export class Slider {
     }
   }
   constructor(elements, config) {
+    Slider._initializeGlobals();
     const options = Object.assign({}, Slider.defaults, config);
     this.options = options;
     this.slide = null;
@@ -161,8 +170,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);

package/lib/scss/_element.scss

@@ -71,7 +71,7 @@ $config: (
   "ul-list-style-type-3":             square,
   "cap-color" :                       "accent",
   "cap-size" :                        5px,
-  "icon-centered-vertical-offset" :   0.05em,
+  "icon-centered-vertical-offset" :   0.02em,
 ) !default;
 
 /// Rule style map, redefine defaults or add to
@@ -415,6 +415,12 @@ $rule-margins: (
   }
 }
 
-@mixin icon-vert-translate($adjustment : get("icon-centered-vertical-offset")) {
-  transform: translateY($adjustment);
-}
+/// Remove default details arrow from the summary element
+@mixin summary-remove-marker() {
+  list-style: none; // Remove the default arrow (old safari?)
+  &::-webkit-details-marker,
+  &::marker {
+    display: none;
+    content: "";
+  }
+}

package/lib/scss/components/_accordion.scss

@@ -180,7 +180,6 @@ $config: (
   #{ $prefix }__summary {
     position: relative; // For pseudo border (done this way for animations)
     display: flex;
-    list-style: none; // Remove the default arrow (old safari?)
     width: 100%; // For <button>
     background-color: color.get(get("summary-background-color"));
     color: color.get(get("summary-color"));
@@ -192,12 +191,7 @@ $config: (
     align-items: center;
 
     @include typography.optional-size(get("summary-type-size"), $only-font-size: true);
-
-    &::-webkit-details-marker,
-    &::marker {
-      display: none;
-      content: "";
-    }
+    @include element.summary-remove-marker;
     &:hover,
     &:focus {
       background-color: color.get(get("summary-background-color-hover"));

package/lib/scss/components/_button.scss

@@ -22,7 +22,7 @@ $-fallbacks: (
 
 $config: (
   "icon-margin" : 0.5em,
-  "icon-centered-vertical-offset": 0
+  "icon-centered-vertical-offset": true
 ) !default;
 
 /// Change modules $config
@@ -63,7 +63,6 @@ $config: (
     @include button.default();
   }
   #{ $prefix }__icon {
-    @include element.icon-vert-translate(get("icon-centered-vertical-offset"));
     &:first-child {
       margin-right: get("icon-margin");
     }
@@ -96,6 +95,16 @@ $config: (
     width: button.get("icon-size");
     height: button.get("icon-size");
     padding: 0 !important;
+
+    #{ $prefix }__icon {
+      transform: translatey(get("icon-centered-vertical-offset"));
+      &:first-child {
+        margin-right: 0;
+      }
+      &:last-child {
+        margin-left: 0;
+      }
+    }
   }
 
   @each $size, $values in button.$sizes {

package/lib/scss/components/_card.scss

@@ -233,7 +233,6 @@ $config: (
     grid-column: 1;
     display: flex;
     flex-direction: column;
-    flex-grow: 1;
     min-height: get("body-min-height");
   }
   #{ $prefix }__main {
@@ -243,7 +242,6 @@ $config: (
     grid-column: 1;
     display: flex;
     align-items: center;
-    flex: 0;
     padding-top: get("footer-padding-y");
     padding-bottom: get("footer-padding-y");
     min-height: get("footer-min-height");

package/lib/scss/components/_form-theme.scss

@@ -80,7 +80,7 @@ $-fallbacks: (
 /// @prop {Color} check-input-mark-color-checked [null] Check input color when checked.
 /// @prop {Color} check-input-mark-color-indeterminate [null] Check input color when indeterminate.
 /// @prop {Number} check-input-disabled-opacity [0.6] Opacity of the check input when disabled.
-/// @prop {Dimension} check-input-border-radius [null] Checkbox input border radius.
+/// @prop {Dimension} check-input-border-radius [0] Checkbox input border radius.
 /// @prop {Color} description-color [false] Color of help text.
 /// @prop {CssValue} description-margin [(0.25em 0)] Margin for help text.
 /// @prop {Dimension} description-max-width [25em] Max width of help text.
@@ -164,7 +164,7 @@ $config: (
   "check-input-mark-color-checked"            : null,
   "check-input-mark-color-indeterminate"      : null,
   "check-input-disabled-opacity"              : 0.6,
-  "check-input-border-radius"                 : null,
+  "check-input-border-radius"                 : 0,
   "description-color"                         : false,
   "description-margin"                        : (0.25em 0),
   "description-max-width"                     : 25em,
@@ -427,7 +427,7 @@ $config: (
   }
   [type="checkbox"] {
     &::before {
-      border-radius: -fallback("check-input-border-radius", "input-border-radius");
+      border-radius: get("check-input-border-radius");
     }
     &::after {
       border-radius: 0;

package/lib/scss/components/_menu-stack.scss

@@ -296,6 +296,7 @@ $styles: (
     justify-content: space-between;
     align-items: center;
     cursor: pointer;
+    @include element.summary-remove-marker;
   }
 
   // Modifiers

package/lib/scss/components/_modal.scss

@@ -48,11 +48,12 @@ $-fallbacks: (
 /// @prop {CssValue} animation-timing-function [cubic-bezier(0, 0, .2, 1)] The animation timing menu of the modal.
 /// @prop {Color} close-background-color [white] Background color for the modal close icon.
 /// @prop {Close} close-background-color-hover [blue] Background color for the modal close icon when hovered or focused.
+/// @prop {Color} close-border-color [null] Border color of the modal__close element. Overrides button border color if using button styling. Fallback to close-background-color.
+/// @prop {Color} close-border-color-hover [null] Border color hover of the modal__close element. Overrides button border color if using button styling. Fallback to close-background-color-hover.
+/// @prop {Color} close-box-shadow [none] Box-shadow of the modal__close element. Overrides button border color if using button styling. Defaults to remove box-shadow styling.
 /// @prop {Color} close-color [black] Type color for the modal close icon.
 /// @prop {Color} close-color-hover [black] Type color for the modal close icon when hovered or focused.
-/// @prop {Dimension} close-font-size [1.2rem] Font-siz of of the modal close icon font size.
 /// @prop {Dimension} close-margin [0.5rem] The margin for the modal close icon.
-/// @prop {Dimension} close-size [2.5rem] Size of the modal close icon.
 /// @prop {Color} header-background-color [black] Background color for the header.
 /// @prop {CssValue} header-border-bottom [none] Bottom-border on the modal header.
 /// @prop {Color} header-color [white] Type color of the header.
@@ -91,12 +92,13 @@ $config: (
   "animation-timing-function" :     cubic-bezier(0, 0, .2, 1),
   "close-background-color":         white,
   "close-background-color-hover":   blue,
+  "close-border-color":             null,
+  "close-border-color-hover":       null,
+  "close-box-shadow":               none,
   "close-color":                    black,
   "close-color-hover":              black,
-  "close-font-size":                1.2rem,
   "close-margin":                   0.5rem,
   "close-icon-vertical-offset" : true,
-  "close-size":                     2.5rem,
   "header-background-color":        black,
   "header-border-bottom":           none,
   "header-color":                   white,
@@ -230,23 +232,21 @@ $config: (
   #{ $prefix }__close {
     margin: 0 0 0 get("close-margin");
     flex: 0 0 auto;
-    font-size: get("close-font-size");
-    width: get("close-size");
-    height: get("close-size");
     background-color: color.get(get("close-background-color"));
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    border-color: color.get(utils.fallback(get("close-border-color"), get("close-background-color")));
     color: color.get(get("close-color"));
-    &:hover {
+    box-shadow: get("close-box-shadow");
+    &:hover,
+    &:focus {
       background-color: color.get(get("close-background-color-hover"));
       color: color.get(get("close-color-hover"));
+      border-color: color.get(utils.fallback(get("close-border-color-hover"), get("close-background-color-hover")));
+      // need border-color-hover use utils fallback
     }
   }
 
   #{ $prefix }__close-icon {
-    @include element.icon-vert-translate(get("close-icon-vertical-offset"));
+  // transform: translatey(get("close-icon-vertical-offset"));
   }
 
   #{ $prefix }__resizer {

package/lib/scss/helpers/_utilities.scss

@@ -140,7 +140,4 @@
       margin-right: typography.get("space-size");
     }
   }
-  .icon-vert-translate {
-    @include element.icon-vert-translate();
-  }
 }

package/package.json

@@ -1,36 +1,37 @@
 {
   "name": "@ulu/frontend",
-  "version": "0.2.0-beta.5",
+  "version": "0.2.0-beta.7",
   "description": "A framework-agnostic frontend toolkit providing a modular, tree-shakable library of accessible components and utilities. Designed for seamless integration, it features a highly configurable SCSS system for any environment and vanilla JavaScript modules optimized for traditional websites and content management systems.",
   "type": "module",
   "files": [
     "dist",
     "lib"
   ],
-  "main": "./dist/ulu-frontend.umd.js",
-  "module": "./dist/ulu-frontend.es.js",
-  "types": "./dist/types/index.d.ts",
+  "main": "./dist/umd/ulu-frontend.umd.js",
+  "module": "./dist/es/index.js",
+  "types": "./dist/es/index.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/ulu-frontend.es.js",
-      "require": "./dist/ulu-frontend.umd.js",
-      "types": "./dist/types/index.d.ts"
+      "import": "./dist/es/index.js",
+      "require": "./dist/umd/ulu-frontend.umd.js",
+      "types": "./dist/es/index.d.ts"
     },
-    "./style.css": "./dist/style.css",
+    "./style.css": "./dist/umd/style.css",
     "./scss/*.scss": "./lib/scss/*.scss",
     "./scss/*": "./lib/scss/*",
     "./scss": "./lib/scss/index.scss",
     "./js/*": {
-      "import": "./lib/js/*",
-      "types": "./dist/types/*"
+      "import": "./dist/es/*",
+      "types": "./dist/es/*"
     }
   },
+  "sideEffects": [
+    "lib/js/core/events.js"
+  ],
   "scripts": {
-    "clean": "rm -rf dist",
-    "build": "npm run clean && npm run build:es && npm run build:umd && npm run types",
-    "build:es": "vite build",
+    "build": "npm run build:es && npm run build:umd",
+    "build:es": "BUILD_FORMAT=es vite build",
     "build:umd": "BUILD_FORMAT=umd vite build",
-    "types": "npx tsc",
     "docs": "npx @11ty/eleventy --serve --config=docs.eleventy.js",
     "docs:incremental": "npx @11ty/eleventy --serve --incremental --config=docs.eleventy.js",
     "docs:nogen": "NO_DOC_GEN=true npx @11ty/eleventy --serve --incremental --config=docs.eleventy.js",
@@ -115,12 +116,14 @@
     "markdown-it-anchor": "^8.6.7",
     "markdown-it-attrs": "^4.1.6",
     "micromodal": "^0.4.10",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
     "sass-embedded": "^1.81.0",
     "sharp": "^0.33.4",
     "svgo": "^3.3.2",
     "swipe-listener": "^1.3.0",
     "twig": "^1.17.1",
     "typescript": "^5.3.3",
-    "vite": "^5.4.11"
+    "vite": "^5.4.11",
+    "vite-plugin-dts": "^4.5.4"
   }
-}
+}