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

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.3", 
   "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

@@ -95,7 +95,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

@@ -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) {

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

@@ -34,7 +34,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 +43,7 @@ $config: (
 
 /// Get a config option
 /// @param {Map} $name Name of property
-/// @example
+/// @example scss
 ///   @include ulu.component-badge-get("property");
 
 @function get($name) {

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) {

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

@@ -93,7 +93,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 +102,7 @@ $styles: (
 
 /// Get a config option
 /// @param {Map} $name Name of property
-/// @example
+/// @example scss
 ///   @include ulu.component-callout-get("property");
 
 @function get($name) {

package/scss/components/_captioned-figure.scss

@@ -52,7 +52,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 +61,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 +71,6 @@ $config: (
 
 /// Prints component styles
 /// @example scss
-/// @example
 ///  @include ulu.component-captioned-figure-styles();
 
 @mixin styles {

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) {

package/scss/components/_card.scss

@@ -113,7 +113,7 @@ $config: (
   
   /// Change modules $config
 /// @param {Map} $changes Map of changes
-/// @example
+/// @example scss
 ///   @include ulu.component-card-set(( "property" : value ));
 
 @mixin set($changes) {
@@ -122,7 +122,7 @@ $config: (
 
 /// Get a config option
 /// @param {Map} $name Name of property
-/// @example
+/// @example scss
 ///   @include ulu.component-card-get(( "property" : value ));
 
 @function get($name) {
@@ -131,6 +131,9 @@ $config: (
 
 /// Mixin styles for card when it has proxy click enabled and is being interacted with (hover/focus)
 /// @param {Boolean} $hover [false] Apply styles when the card is being hover/focused within, else applies styles to rest state of a clickable card (one who has a proxy click setup)
+/// Prints component styles
+/// @example scss
+///  @include ulu.component-card-styles();
 
 @mixin when-clickable($hover: false) {
   $prefix: selector.class("card");

package/scss/components/_css-icon.scss

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

package/scss/components/_data-grid.scss

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

package/scss/components/_data-table.scss

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

package/scss/components/_flipcard-grid.scss

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

package/scss/components/_flipcard.scss

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

package/scss/components/_form-theme.scss

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

package/scss/components/_hero.scss

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

package/scss/components/_image-grid.scss

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

package/scss/components/_list-lines.scss

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

package/scss/components/_menu-stack.scss

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

package/scss/components/_modal.scss

@@ -28,8 +28,6 @@ $-fallbacks: (
   )
 );
 
-// todo [joe-check] for config options should items like 'dark-background-color' be 'background-color-dark' instead? Line 94
-
 /// Module Settings
 /// @type Map
 /// @prop {CssValue} backdrop-blur [4px] Determines the blur of the backdrop.
@@ -51,11 +49,6 @@ $-fallbacks: (
 /// @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 {} dark-background-color [false] @joe-check unused
-/// @prop {} dark-color [white] @joe-check unused
-/// @prop {} dark-header-background-color [false] @joe-check unused
-/// @prop {} dark-header-border-bottom [false] @joe-check unused
-/// @prop {} dark-header-color [false] @joe-check unused
 /// @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.
@@ -93,11 +86,6 @@ $config: (
   "close-font-size":                1.2rem,
   "close-margin":                   0.5rem,
   "close-size":                     2.5rem,
-  "dark-background-color" :         false,
-  "dark-color" :                   white,
-  "dark-header-border-bottom" :     false,
-  "dark-header-background-color" :  false,
-  "dark-header-color" :             false,
   "header-background-color":        black,
   "header-border-bottom":           none,
   "header-color":                   white,
@@ -121,7 +109,6 @@ $config: (
 /// Change modules $config
 /// @param {Map} $changes Map of changes
 /// @example scss 
-/// @example
 ///   @include ulu.component-modal-set(( "property" : value ));
 
 @mixin set($changes) {
@@ -130,7 +117,7 @@ $config: (
 
 /// Get a config option
 /// @param {Map} $name Name of property
-/// @example
+/// @example scss
 ///   @include ulu.component-modal-get("property");
 
 @function get($name) {

package/scss/components/_nav-strip.scss

@@ -53,7 +53,7 @@ $config: (
 
 /// Change modules $config
 /// @param {Map} $changes Map of changes
-/// @example
+/// @example scss
 ///   @include ulu.component-nav-strip-set(( "property" : value ));
 
 @mixin set($changes) {
@@ -62,7 +62,7 @@ $config: (
 
 /// Get a config option
 /// @param {Map} $name Name of property
-/// @example
+/// @example scss
 ///   @include ulu.component-nav-strip-get("property");
 
 @function get($name) {
@@ -70,7 +70,7 @@ $config: (
 }
 
 /// Prints component styles
-/// @example
+/// @example scss
 ///   @include ulu.component-nav-strip-styles();
 
 @mixin styles {

package/scss/components/_overlay-section.scss

@@ -41,7 +41,7 @@ $config: (
 
 /// Change modules $config
 /// @param {Map} $changes Map of changes
-/// @example
+/// @example scss
 ///   @include ulu.component-overlay-section-set(( "property" : value ));
 
 @mixin set($changes) {
@@ -50,7 +50,7 @@ $config: (
 
 /// Get a config option
 /// @param {Map} $name Name of property
-/// @example
+/// @example scss
 ///   @include ulu.component-overlay-section-get("property");
 
 @function get($name) {
@@ -59,7 +59,6 @@ $config: (
 
 /// Prints component styles
 /// @example scss
-/// @example scss
 ///  @include ulu.component-overlay-section-styles();
 
 @mixin styles {