@ulu/frontend 0.1.0-beta.1 → 0.1.0-beta.10

package/js/ui/modal-builder.js

@@ -38,7 +38,7 @@ export const defaults = {
   noMinHeight: false,
   class: "",
   classCloseIcon: "css-icon css-icon--close",
-  classResizerIcon: "css-icon css-icon--drag",
+  classResizerIcon: "css-icon css-icon--drag-x",
   debug: false,
   templateCloseIcon(config) {
     return `<span class="modal__close-icon ${ config.classCloseIcon }" aria-hidden="true"></span>`;

package/js/ui/tabs.js

@@ -2,6 +2,12 @@
  * @module ui/tabs
  */
 
+// TODO:
+// - For Vertical tabs we should be updating the orientation when on mobile. 
+//   Currently using all arrows so that the interface works in both 
+//   orientations when vertical. Leaving that behavior for now but maybe consider
+//   setting this up to destroy tab interface when ui layout changes?
+
 import AriaTablist from "aria-tablist";
 
 const initAttr = "data-ulu-tablist-init";
@@ -127,13 +133,27 @@ function setHeights(element) {
   const images = [ ...parent.querySelectorAll("img") ];
   const imagePromises = images.map(image => imagePromise(image));
   function imagePromise(image) {
-    return new Promise((resolve, reject) => {
-      image.onload = () => resolve(image);
-      image.onerror = reject;
+    return new Promise((resolve) => {
+      if (image.complete) {
+        resolve(image);
+      } else {
+        image.onload = resolve;
+        // Errors should also resolve so that height matching continues
+        image.onerror = resolve; 
+      }
     });
   }
+  // Run after images are loaded, or if no images it will resolve and run
   Promise.all(imagePromises).then(() => {
-    const heights = panels.map(panel => panel.offsetHeight);
+    const heights = panels.map(panel => {
+      let panelHeight = panel.offsetHeight;
+      if (panel.hidden) {
+        panel.hidden = false;
+        panelHeight = panel.offsetHeight;
+        panel.hidden = true;
+      }
+      return panelHeight;
+    });
     const max = Math.max(...heights);
     panels.forEach(panel => panel.style.minHeight = `${ max }px`);
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend",
-  "version": "0.1.0-beta.1",
+  "version": "0.1.0-beta.10", 
   "description": "Modular Sass Theming Library",
   "browser": "js/index.js",
   "main": "index.js",
@@ -27,9 +27,10 @@
     "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",
     "docs:inspect": "node --inspect-brk ./node_modules/.bin/eleventy --serve --config=docs.eleventy.js",
-    "docs:build": "npx @11ty/eleventy --config=docs.eleventy.js",
+    "docs:build:prod": "IS_PRODUCTION=true npx @11ty/eleventy --config=docs.eleventy.js",
     "docs:assets": "vite --config docs.vite.config.js --force",
-    "docs:assets:build": "vite build --config docs.vite.config.js"
+    "docs:assets:build": "vite build --config docs.vite.config.js",
+    "docs:assets:build:prod": "IS_PRODUCTION=true vite build --config docs.vite.config.js"
   },
   "repository": {
     "type": "git",
@@ -82,9 +83,7 @@
     "vite": "^5.4.11"
   },
   "dependencies": {
-    "@ulu/utils": "^0.0.17"
-  },
-  "optionalDependencies": {
+    "@ulu/utils": "^0.0.17",
     "ally.js": "^1.4.1",
     "aria-tablist": "^1.2.2",
     "@floating-ui/dom": "^1.6.5"

package/scss/_color.scss

@@ -23,6 +23,7 @@ $palette: (
   "type-tertiary"           : rgb(157, 157, 157),
   "headline"                : inherit,
   "background"              : white,
+  "background-gray"         : #F7F8F7,
   "focus"                   : blue,
   "error"                   : red,
   "warning"                 : orange,
@@ -95,7 +96,7 @@ $color-classes: (
   // Allow non lookup if the value is already a color (helps with code flow)
   @if (meta.type-of($name) == "string") {
     // Allow custom-properties and keyword inherit/transparent to pass through
-    @if ($name == "inherit" or $name == "transparent" or string.index($name, "var(") == 1) {
+    @if ($name == "inherit" or $name == "transparent" or $name == "currentColor" or string.index($name, "var(") == 1) {
       @return $name;
     // Else look up the color from the palette
     } @else {

package/scss/base/_typography.scss

@@ -12,14 +12,14 @@
 /// - These are any type sizes that specify "base-class" in their configuration
 /// - Type sizes with "base-class-prefixed" will be prefixed with the "type-" prefix
 /// @example scss
-///  @include ulu.base-typography-styles();
+///   @include ulu.base-typography-styles();
 /// @example html {preview} Example of type size as base unprefixed
-///  <span class="h1">A</span>
-///  <span class="h2">A</span>
-///  <span class="h3">A</span>
-///  <span class="h4">A</span>
-///  <span class="h5">A</span>
-///  <span class="h6">A</span>
+///   <span class="h1">A</span>
+///   <span class="h2">A</span>
+///   <span class="h3">A</span>
+///   <span class="h4">A</span>
+///   <span class="h5">A</span>
+///   <span class="h6">A</span>
 
 @mixin styles {
 

package/scss/components/_accordion.scss

@@ -13,8 +13,8 @@
 
 /// Module Settings
 /// @type Map
-/// @prop {Color}  background-color  [white] This is the background color of the accordion before it is expanded. 
-/// @prop {Color}  background-color-open  [#F7F8F7] This is the background color of the accordion before it is expanded. This will change the background color of the accordion's summary as well as the details.
+/// @prop {Color}  background-color  [accordion-background] This is the background color of the accordion before it is expanded. 
+/// @prop {Color}  background-color-open  [accordion-background-open] This is the background color of the accordion before it is expanded. This will change the background color of the accordion's summary as well as the details.
 /// @prop {String} border-color ["rule"]
 /// @prop {Number} border-radius  [0] This applies a rounding of edges for the accordion. If there are multiple accordions in a stack, this will only apply to the top of the first accordion and the bottom of the last accordion.
 /// @prop {Dimension} border-width  [1px] The width of the borders of the accordions
@@ -41,8 +41,8 @@
 /// @prop {Dimension} transparent-padding-x  [0] The upper and lower padding of the transparent summary.
 
 $config: (
-  "background-color":            white,
-  "background-color-open":       #F7F8F7,
+  "background-color":            "background",
+  "background-color-open":       "background-gray",
   "border-color":                "rule",
   "border-radius":               0,
   "border-width":                1px,
@@ -59,7 +59,7 @@ $config: (
   "icon-font-size":              1.5rem,
   "icon-size":                   auto,
   "icon-stroke-width":           0.15em,
-  "summary-background-color":    white,
+  "summary-background-color":    "white",
   "summary-color":               null,
   "summary-background-color-hover": null,
   "summary-color-hover":         null,
@@ -72,7 +72,7 @@ $config: (
 
 /// Change modules $config
 /// @param {Map} $changes Map of changes
-/// @example
+/// @example scss
 ///   @include ulu.component-accordion-set(( "property" : value ));
 
 @mixin set($changes) {
@@ -81,7 +81,7 @@ $config: (
 
 /// Get a config option
 /// @param {Map} $name Name of property
-/// @example
+/// @example scss
 ///   @include ulu.component-accordion-get("property");
 
 @function get($name) {
@@ -107,7 +107,7 @@ $config: (
     margin-top: get("margin");
     margin-bottom: get("margin");
     border: $border;
-    background-color: get("background-color");
+    background-color: color.get(get("background-color"));
     box-shadow: get("box-shadow");
     &:first-of-type {
       border-top-left-radius: get("border-radius");
@@ -124,7 +124,7 @@ $config: (
     }
     &[open], 
     &.is-active  {
-      background-color: get("background-color-open");
+      background-color: color.get(get("background-color-open"));
       padding-bottom: get("padding-y");
       z-index: 2; // Above child details
       > #{ $prefix }__summary {
@@ -136,8 +136,8 @@ $config: (
     }
   }
   #{ $prefix }__summary {
-    background-color: get("summary-background-color");
-    color: get("summary-color");
+    background-color: color.get(get("summary-background-color"));
+    color: color.get(get("summary-color"));
     margin-left: -(get("padding-x"));
     margin-right: -(get("padding-x"));
     line-height: get("summary-line-height");
@@ -161,10 +161,10 @@ $config: (
       @include typography.size(get("summary-type-size"));
     }
     &:hover {
-      background-color: get("summary-background-color-hover");
-      color: get("summary-color-hover");
+      background-color: color.get(get("summary-background-color-hover"));
+      color: color.get(get("summary-color-hover"));
       #{ $prefix }__icon {
-        background-color: get("icon-background-color-hover");
+        background-color: color.get(get("icon-background-color-hover"));
         color: color.get(get("icon-color-hover"));
       }
     }
@@ -174,7 +174,7 @@ $config: (
     color: color.get(get("icon-color"));
     margin-left: 0.5em;
     order: 3;
-    background-color: get("icon-background-color");
+    background-color: color.get(get("icon-background-color"));
     border-radius: get("icon-border-radius");
     width: get("icon-size");
     height: get("icon-size");

package/scss/components/_adaptive-spacing.scss

@@ -11,7 +11,7 @@
 
 /// Module Settings
 /// @type Map
-/// @prop {Boolean}  outputMargin  [false] @joe-check need examples for this to build documentation
+/// @prop {Boolean}  outputMargin  [false] Toggles the output of margin classes.
 /// @prop {Boolean}  outputPadding  [true] This is the background color of the accordion before it is expanded. 
 /// @prop {Boolean}  outputX  [true] This is the background color of the accordion before it is expanded. 
 /// @prop {Boolean}  outputY  [true] This is the background color of the accordion before it is expanded. 
@@ -54,7 +54,7 @@ $sizes: (
 
 /// Change modules $config
 /// @param {Map} $changes Map of changes
-/// @example
+/// @example scss
 ///   @include ulu.component-adaptive-spacing-set(( "property" : value ));
 
 @mixin set($changes) {
@@ -71,7 +71,7 @@ $sizes: (
 
 /// Get a config option
 /// @param {Map} $name Name of property
-/// @example
+/// @example scss
 ///   @include ulu.component-adaptive-spacing-get("property");
 
 @function get($name) {

package/scss/components/_badge.scss

@@ -6,6 +6,7 @@
 @use "sass:map";
 @use "../utils";
 @use "../selector";
+@use "../color";
 
 /// Module Settings
 /// @type Map
@@ -34,7 +35,7 @@ $config: (
 
 /// Change modules $config
 /// @param {Map} $changes Map of changes
-/// @example
+/// @example scss
 ///   @include ulu.component-badge-set(( "property" : value ));
 
 @mixin set($changes) {
@@ -43,7 +44,7 @@ $config: (
 
 /// Get a config option
 /// @param {Map} $name Name of property
-/// @example
+/// @example scss
 ///   @include ulu.component-badge-get("property");
 
 @function get($name) {
@@ -94,8 +95,8 @@ $config: (
     &:hover,
     &:focus,
     &:visited {
-      background-color: get("background-color");
-      color: get("color");
+      background-color: color.get(get("background-color"));
+      color: color.get(get("color"));
     }
   }
   #{ $prefix }--clickable {

package/scss/components/_button-verbose.scss

@@ -28,24 +28,24 @@ $-fallbacks: (
 
 /// Module Settings
 /// @type Map
-/// @prop {Color} background-color [white] Font size (basic ie. 1.3rem) for badge
-/// @prop {Color} background-color-hover [link] Font size (basic ie. 1.3rem) for badge
-/// @prop {String} border-radius [border-radius] Font size (basic ie. 1.3rem) for badge
-/// @prop {String} box-shadow [true] Use the fallback. But note it.
-/// @prop {String} box-shadow-hover [true] @joe-check these box-shadows are booleans, but it should be a css value
-/// @prop {String} color [type] Font size (basic ie. 1.3rem) for badge
-/// @prop {String} color-hover [type] Font size (basic ie. 1.3rem) for badge
-/// @prop {Color} icon-color [gray] Font size (basic ie. 1.3rem) for badge
-/// @prop {Dimension} icon-font-size [1.25rem] Font size (basic ie. 1.3rem) for badge
-/// @prop {Number} line-height [1.2] Font size (basic ie. 1.3rem) for badge
-/// @prop {Dimension} margin [1em] Font size (basic ie. 1.3rem) for badge
-/// @prop {Dimension} margin-inline [0.75em] Font size (basic ie. 1.3rem) for badge
-/// @prop {Dimension} min-width [20rem] Font size (basic ie. 1.3rem) for badge
-/// @prop {Dimension} padding-x [0.65em] Font size (basic ie. 1.3rem) for badge
-/// @prop {Dimension} padding-y [1em] Font size (basic ie. 1.3rem) for badge
-/// @prop {String} title-color [link] Font size (basic ie. 1.3rem) for badge
-/// @prop {String} title-color-hover [link-hover] Font size (basic ie. 1.3rem) for badge
-/// @prop {Dimension} title-margin [0.5em] Font size (basic ie. 1.3rem) for badge
+/// @prop {Color} background-color [white] Background color for the button.
+/// @prop {Color} background-color-hover [link] Background color for the button when hovered or focused.
+/// @prop {String} border-radius [border-radius] Border radius of the button.
+/// @prop {CssValue} box-shadow [true] Box shadow for the button. If set to true, uses default box-shadow.
+/// @prop {CssValue} box-shadow-hover [true] Box shadow for the button when hovered or focused. If set to true, uses default box-shadow-hover.
+/// @prop {String} color [type] Text color for the button.
+/// @prop {String} color-hover [type] Text color for the button when hovered or focused.
+/// @prop {Color} icon-color [gray] Color for button icons.
+/// @prop {Dimension} icon-font-size [1.25rem] Font size for the button.
+/// @prop {Number} line-height [1.2] Line height for button text.
+/// @prop {Dimension} margin [1em] Margin for the button.
+/// @prop {Dimension} margin-inline [0.75em] Margin for the button when using the inline modifier.
+/// @prop {Dimension} min-width [20rem] Min-width of the button.
+/// @prop {Dimension} padding-x [0.65em] Horizontal padding of the button.
+/// @prop {Dimension} padding-y [1em] Vertical padding of the button.
+/// @prop {String} title-color [link] Color of the title of the button.
+/// @prop {String} title-color-hover [link-hover] Color of the title of the button when hovered or focused.
+/// @prop {Dimension} title-margin [0.5em] Margin for the button's title.
 
 $config: (
   "background-color" : white,
@@ -70,7 +70,7 @@ $config: (
 
 /// Change modules $config
 /// @param {Map} $changes Map of changes
-/// @example
+/// @example scss
 ///   @include ulu.component-button-verbose-set(( "property" : value ));
 
 @mixin set($changes) {
@@ -79,7 +79,7 @@ $config: (
 
 /// Get a config option
 /// @param {Map} $name Name of property
-/// @example
+/// @example scss
 ///   @include ulu.component-button-verbose-get(( "property" : value ));
 
 @function get($name) {
@@ -102,7 +102,7 @@ $config: (
     margin-bottom: get("margin");
     max-width: 100%;
     width: get("min-width");
-    background-color: get("background-color");
+    background-color: color.get(get("background-color"));
     padding: get("padding-y") get("padding-x");
     padding-right: (get("padding-x") * 2) + 1em;
     color: color.get(get("color"));
@@ -126,7 +126,7 @@ $config: (
     right: get("padding-x");
     transform: translateY(-50%);
     font-size: get("icon-font-size");
-    color: get("icon-color");
+    color: color.get(get("icon-color"));
   }
   .button-verbose--inline {
     display: inline-block;

package/scss/components/_button.scss

@@ -20,6 +20,7 @@ $config: (
 
 /// Change modules $config
 /// @param {Map} $changes Map of changes
+/// @example scss
 ///   @include ulu.component-button-set(( "property" : value ));
 
 @mixin set($changes) {
@@ -28,6 +29,7 @@ $config: (
 
 /// Get a config option
 /// @param {Map} $name Name of property
+/// @example scss
 ///   @include ulu.component-button-get("property");
 
 @function get($name) {

package/scss/components/_callout.scss

@@ -10,6 +10,7 @@
 @use "../utils";
 @use "../selector";
 @use "../element";
+@use "../color";
 
 // Used for function fallback
 $-fallbacks: (
@@ -93,7 +94,7 @@ $styles: (
 
 /// Change modules $config
 /// @param {Map} $changes Map of changes
-/// @example
+/// @example scss
 ///   @include ulu.component-callout-set(( "property" : value ));
 
 @mixin set($changes) {
@@ -102,7 +103,7 @@ $styles: (
 
 /// Get a config option
 /// @param {Map} $name Name of property
-/// @example
+/// @example scss
 ///   @include ulu.component-callout-get("property");
 
 @function get($name) {
@@ -133,7 +134,7 @@ $styles: (
     top: 0;
     bottom: 0;
     width: $width;
-    background-color: $color;
+    background-color: color.get($color);
   }
 }
 
@@ -145,7 +146,7 @@ $styles: (
   $prefix: selector.class("callout");
 
   #{ $prefix } {
-    background-color: get("background-color");
+    background-color: color.get(get("background-color"));
     padding: get("padding");
     border: get("border");
     margin-bottom: get("margin");
@@ -160,11 +161,11 @@ $styles: (
   }
   @each $name, $style in $styles {
     #{ $prefix }--#{ $name } {
-      background-color: map.get($style, "background-color"); 
-      color: map.get($style, "color"); 
+      background-color: color.get(map.get($style, "background-color")); 
+      color: color.get(map.get($style, "color")); 
       border: map.get($style, "border"); 
       border-radius: map.get($style, "border-radius"); 
-      border-color: map.get($style, "border-color"); 
+      border-color: color.get(map.get($style, "border-color")); 
       box-shadow: map.get($style, "box-shadow"); 
       padding: map.get($style, "padding"); 
       @if map.get($style, "left-cap") {

package/scss/components/_captioned-figure.scss

@@ -10,6 +10,7 @@
 @use "../utils";
 @use "../element";
 @use "../typography";
+@use "../color";
 
 // Used for function fallback
 $-fallbacks: (
@@ -52,7 +53,7 @@ $config: (
 
 /// Change modules $config
 /// @param {Map} $changes Map of changes
-/// @example
+/// @example scss
 ///   @include ulu.component-captioned-figure-set(( "property" : value ));
 
 @mixin set($changes) {
@@ -61,7 +62,7 @@ $config: (
 
 /// Get a config option
 /// @param {Map} $name Name of property
-/// @example
+/// @example scss
 ///   @include ulu.component-captioned-figure-get("property");
 
 @function get($name) {
@@ -71,7 +72,6 @@ $config: (
 
 /// Prints component styles
 /// @example scss
-/// @example
 ///  @include ulu.component-captioned-figure-styles();
 
 @mixin styles {
@@ -83,7 +83,7 @@ $config: (
     display: block;
     position: relative;
     margin-bottom: get("margin-bottom");
-    background-color: get("background-color");
+    background-color: color.get(get("background-color"));
     > img {
       width: 100%;
       height: auto;
@@ -102,20 +102,20 @@ $config: (
   }
   #{ $prefix }__caption {
     position: absolute;
-    color: get("color");
+    color: color.get(get("color"));
     @include typography.size(get("type-size"), $only-font-size: true);
     line-height: get("line-height");
     max-width: get("caption-max-width");
-    background-color: get("caption-background-color");
+    background-color: color.get(get("caption-background-color"));
     padding: get("caption-padding");
     backdrop-filter: get("caption-backdrop-filter");
   }
   #{ $prefix }--traditional {
     #{ $prefix }__caption {
       position: static;
-      color: get("traditional-caption-color");
+      color: color.get(get("traditional-caption-color"));
       max-width: get("traditional-caption-max-width");
-      background-color: get("traditional-caption-background-color");
+      background-color: color.get(get("traditional-caption-background-color"));
       padding: get("traditional-caption-padding");
       text-align: get("traditional-caption-text-align");
       @if (get("traditional-caption-text-align") == right) {

package/scss/components/_card-grid.scss

@@ -25,7 +25,7 @@ $config: (
 
 /// Change modules $config
 /// @param {Map} $changes Map of changes
-/// @example
+/// @example scss
 ///   @include ulu.component-card-grid-set(( "property" : value ));
 
 @mixin set($changes) {
@@ -34,7 +34,7 @@ $config: (
 
 /// Get a config option
 /// @param {Map} $name Name of property
-/// @example
+/// @example scss
 ///   @include ulu.component-card-grid-get("property");
 
 @function get($name) {