@ulu/frontend 0.2.0-beta.1 → 0.2.0-beta.11

package/lib/js/ui/breakpoints.js

@@ -4,6 +4,7 @@
 
 // Pass breakpoints from CSS to stylesheet, use this to attach behaviors on breakpoints
 import { removeArrayElement } from "@ulu/utils/array.js";
+import { isBrowser } from "@ulu/utils/browser/dom.js";
 import { getCoreEventName } from "../core/events.js";
 import { wrapSettingString } from "../core/settings.js";
 import { getCustomProperty } from "../utils/css.js";
@@ -11,11 +12,6 @@ import { log, logError } from "../utils/class-logger.js";
 
 const getDefaultCustomProperty = prefix => getCustomProperty(prefix, "breakpoint");
 
-// Resize Handler to update breakpoints for all instances (Called after resize finished)
-window.addEventListener(getCoreEventName("pageResized"), () => {
-  BreakpointManager.instances.forEach(i => i.update());
-});
-
 /**
  * @class
  * Class that provides method for retrieving and acting on breakpoints passed
@@ -23,6 +19,17 @@ window.addEventListener(getCoreEventName("pageResized"), () => {
  */
 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;

package/lib/js/ui/index.js

@@ -78,6 +78,10 @@ export {
   setDefaults as modalBuilderSetDefaults,
 } from "./modal-builder.js";
 
+export {
+  ProgrammaticModalManager
+} from "./programmatic-modal.js";
+
 export {
   OverflowScroller
 } from "./overflow-scroller.js";

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

@@ -32,7 +32,6 @@
 
 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";
 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", 
@@ -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/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

@@ -57,7 +57,7 @@
 /// @prop {Dimension} footer-min-height [2.5rem] The min height for the footer
 /// @prop {CssValue} footer-justify [flex-end] Flex alignment of footer items (on end by default)
 /// @prop {Dimension} footer-inline-padding [0.5rem] The padding for the footer when using the 'footer-inline' modifier.
-/// @prop {Color} footer-background-color [#dedede] The background color of the footer.
+/// @prop {Color} footer-background-color [null] The background color of the footer.
 /// @prop {String} horizontal-enabled [false] Enable the output of horizontal related layout modifiers
 /// @prop {String} horizontal-persist-enabled [false] Enable the output of horizontal-persist related layout modifiers
 /// @prop {String} horizontal-breakpoint [small] The breakpoint used to change the card to vertical if using the card--horizontal styling. Uses ulu's breakpoint module.
@@ -131,11 +131,11 @@ $config: (
   "image-icon-max-width": 8rem,
 
   // Footer
-  "footer-padding-y": 0.25rem,
+  "footer-padding-y": 0.5rem,
   "footer-min-height": 2.5rem,
   "footer-justify": flex-end,
   "footer-inline-padding": 0.5rem,
-  "footer-background-color": #dedede,
+  "footer-background-color": null,
 
   // Horizontal
   "horizontal-enabled" : false,
@@ -165,7 +165,7 @@ $config: (
   "overlay-body-padding-y": 1rem
 ) !default;
   
-  /// Change modules $config
+/// Change modules $config
 /// @param {Map} $changes Map of changes
 /// @example scss
 ///   @include ulu.component-card-set(( "property" : value ));
@@ -195,6 +195,7 @@ $config: (
   #{ $prefix } {
     display: grid;
     grid-template-columns: 1fr;
+    grid-template-rows: auto 1fr auto;
     max-width: get("max-width");
     margin-top: get("margin-y");
     margin-bottom: get("margin-y");
@@ -232,7 +233,6 @@ $config: (
     grid-column: 1;
     display: flex;
     flex-direction: column;
-    flex-grow: 1;
     min-height: get("body-min-height");
   }
   #{ $prefix }__main {
@@ -242,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,41 +1,38 @@
 {
   "name": "@ulu/frontend",
-  "version": "0.2.0-beta.1",
-  "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.",
+  "version": "0.2.0-beta.11",
+  "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/*": "./lib/js/*",
-    "./js/*.js": "./lib/js/*.js"
-  },
-  "typesVersions": {
-    "*": {
-      "js/*": [
-        "./dist/types/*"
-      ]
+    "./js/*": {
+      "import": "./dist/es/*",
+      "types": "./dist/es/*"
     }
   },
+  "sideEffects": [
+    "dist/es/core/events.js",
+    "dist/umd/ulu-frontend.umd.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",
@@ -52,28 +49,35 @@
     "url": "git+https://github.com/Jscherbe/frontend.git"
   },
   "keywords": [
-    "SCSS",
-    "sass",
+    "a11y",
+    "accessibility",
     "breakpoints",
-    "theme",
-    "modules",
-    "javascript",
-    "framework",
-    "mixin",
+    "cms",
     "components",
-    "HTML",
-    "frontend framework",
+    "composable",
     "css",
-    "utilities",
-    "design system",
+    "design-system",
+    "framework-agnostic",
+    "frontend",
+    "frontend-framework",
+    "HTML",
+    "integration",
+    "javascript",
+    "modular",
+    "responsive-design",
+    "sass",
+    "scss",
+    "theme",
+    "theming",
     "toolkit",
-    "accessibility",
+    "tree-shaking",
     "ui",
-    "user interface",
-    "responsive design"
+    "user-interface",
+    "utilities",
+    "vanilla-js"
   ],
   "authors": {
-    "name": "Joe Scherben, Informatics Studio",
+    "name": "Joe Scherben",
     "email": "jscherbe@gmail.com"
   },
   "license": "MIT",
@@ -81,17 +85,26 @@
     "url": "https://github.com/Jscherbe/frontend/issues"
   },
   "homepage": "https://github.com/Jscherbe/frontend#readme",
+  "peerDependencies": {
+    "@floating-ui/dom": "^1.6.5",
+    "@ulu/utils": "^0.0.34",
+    "aria-tablist": "^1.2.2",
+    "swipe-listener": "^1.3.0"
+  },
   "devDependencies": {
     "@11ty/eleventy": "^3.0.0-alpha.6",
     "@11ty/eleventy-navigation": "^0.3.5",
     "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
+    "@floating-ui/dom": "^1.6.5",
     "@fortawesome/fontawesome-free": "^6.5.2",
     "@ulu/markdown-output-utils": "^0.0.6",
     "@ulu/sassdoc-to-markdown": "^0.0.16",
+    "@ulu/utils": "^0.0.34",
     "@ulu/vite-config-cms-theme": "^0.0.10",
     "@ulu/vitepress-auto-menus": "^0.0.3",
     "@ulu/vitepress-sassdoc": "^0.0.9",
     "algoliasearch": "^4.23.3",
+    "aria-tablist": "^1.2.2",
     "autoprefixer": "^10.4.16",
     "chokidar": "^3.6.0",
     "eleventy-plugin-nesting-toc": "^1.3.0",
@@ -102,18 +115,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"
-  },
-  "dependencies": {
-    "@floating-ui/dom": "^1.6.5",
-    "@ulu/utils": "^0.0.30",
-    "ally.js": "^1.4.1",
-    "aria-tablist": "^1.2.2",
-    "swipe-listener": "^1.3.0"
+    "vite": "^5.4.11",
+    "vite-plugin-dts": "^4.5.4"
   }
-}
+}