@ulu/frontend 0.1.0-beta.35 → 0.1.0-beta.36

package/js/ui/collapsible.js

@@ -71,7 +71,14 @@ export class Collapsible {
     }
     this.focusoutHandler = (event) => {
       if (focusoutCloses) {
-        this.close(event);
+        // If closing on focus out we attach one-time event to 
+        // see which element is focused next (in between focusout and focusin 
+        // it's the body) so doing the logic in focusout won't work
+        document.addEventListener('focusin', () => {
+          if (!content.contains(document.activeElement)) {
+            this.close(event);
+          }
+        }, { once: true });
       }
     };
     trigger.addEventListener("click", this.clickHandler);

package/js/ui/modal-builder.js

@@ -37,14 +37,17 @@ export const defaults = {
   print: false,
   noMinHeight: false,
   class: "",
+  baseClass: "modal",
   classCloseIcon: wrapSettingString("iconClassClose"),
   classResizerIcon: wrapSettingString("iconClassDragX"),
   debug: false,
   templateCloseIcon(config) {
-    return `<span class="modal__close-icon ${ config.classCloseIcon }" aria-hidden="true"></span>`;
+    const { baseClass, classCloseIcon } = config;
+    return `<span class="${ baseClass }__close-icon ${ classCloseIcon }" aria-hidden="true"></span>`;
   },
   templateResizerIcon(config) {
-    return `<span class="modal__resizer-icon ${ config.classResizerIcon }" aria-hidden="true"></span>`;
+    const { baseClass, classResizerIcon } = config;
+    return `<span class="${ baseClass }__resizer-icon ${ classResizerIcon }" aria-hidden="true"></span>`;
   },
   /**
    * Default modal template
@@ -53,35 +56,36 @@ export const defaults = {
    * @returns {String} Markup for modal
    */
   template(id, config) {
+    const { baseClass } = config;
     const classes = [
-      "modal",
-      `modal--${ config.position }`,
-      `modal--${ config.size }`,
-      `modal--${ config.allowResize ? "resize" : "no-resize" }`,
-      ...(!config.title ? ["modal--no-header"] : []),
-      ...(config.bodyFills ? ["modal--body-fills"] : []), 
-      ...(config.noBackdrop ? ["modal--no-backdrop"] : []), 
-      ...(config.noMinHeight ? ["modal--no-min-height"] : [] ),
+      baseClass,
+      `${ baseClass }--${ config.position }`,
+      `${ baseClass }--${ config.size }`,
+      `${ baseClass }--${ config.allowResize ? "resize" : "no-resize" }`,
+      ...(!config.title ? [`${ baseClass }--no-header`] : []),
+      ...(config.bodyFills ? [`${ baseClass }--body-fills`] : []), 
+      ...(config.noBackdrop ? [`${ baseClass }--no-backdrop`] : []), 
+      ...(config.noMinHeight ? [`${ baseClass }--no-min-height`] : [] ),
       ...(config.class ? [config.class] : []), 
     ];
     return `
       <dialog id="${ id }" class="${ classes.join(" ") }">
         ${ config.title ? `
-          <header class="modal__header">
-            <h2 class="modal__title">
+          <header class="${ baseClass }__header">
+            <h2 class="${ baseClass }__title">
               ${ config.titleIcon ? 
-                `<span class="modal__title-icon ${ config.titleIcon }" aria-hidden="true"></span>` : "" 
+                `<span class="${ baseClass }__title-icon ${ config.titleIcon }" aria-hidden="true"></span>` : "" 
               }
-              <span class="modal__title-text">${ config.title }</span>
+              <span class="${ baseClass }__title-text">${ config.title }</span>
             </h2>
-            <button class="modal__close" aria-label="Close modal" ${ closeAttribute } autofocus>
+            <button class="${ baseClass }__close" aria-label="Close modal" ${ closeAttribute } autofocus>
               ${ config.templateCloseIcon(config) }
             </button>
           </header>
         ` : "" }
-        <div class="modal__body" ${ initializer.getAttribute("body") }></div>
+        <div class="${ baseClass }__body" ${ initializer.getAttribute("body") }></div>
         ${ config.hasResizer ? 
-          `<div class="modal__resizer" ${ initializer.getAttribute("resizer") }>
+          `<div class="${ baseClass }__resizer" ${ initializer.getAttribute("resizer") }>
             ${ config.templateResizerIcon(config) }
           </div>` : "" 
         }

package/js/ui/overflow-scroller.js

@@ -35,6 +35,7 @@ export class OverflowScroller {
     if (!hasRequiredProps(requiredElements)) {
       logError(this, 'Missing a required Element');
     }
+    console.log(elements)
     this.elements = {
       ...elements,
       ...this.createControls(elements.controls)

package/js/utils/css.js

@@ -0,0 +1,13 @@
+/**
+ * @module utils/css
+ */
+
+/**
+ * Generates a CSS custom property name with a given prefix.
+ * @param {string} prefix The prefix to apply to the custom property name.
+ * @param {string} propertyName The base name of the custom property.
+ * @returns {string} The fully formed CSS custom property name (e.g., "--prefix-propertyName").
+ */
+export function getCustomProperty(prefix, propertyName) {
+  return `--${prefix}-${propertyName}`;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend",
-  "version": "0.1.0-beta.35",
+  "version": "0.1.0-beta.36",
   "description": "Modular Sass Theming Library",
   "browser": "js/index.js",
   "main": "index.js",

package/scss/_breakpoint.scss

@@ -4,6 +4,7 @@
 ////
 
 @use "sass:map";
+@use "sass:list";
 @use "utils";
 
 /// Module Settings
@@ -30,8 +31,12 @@ $config: (
 }
 
 /// Get a config option
-/// @example scss Get default breakpoint name
-///   $default: ulu.breakpoint-get("default");
+/// @compiler
+///   @use "index" as ulu;
+/// @example scss {compile} Example usage
+///   .test-get {
+///     font-size: ulu.breakpoint-get("base");
+///   }
 /// @param {Map} $name Name of property
 /// @return {*} Property Value
 
@@ -66,6 +71,14 @@ $sizes: (
 
 /// Get all breakpoint sizes
 /// @return {Map} Map of breakpoints (equivalent to $sizes)
+/// @compiler
+///   @use "index" as ulu;
+///   @use "sass:map";
+/// @example scss {compile} Example usage
+///   .test-get {
+///     $sizes: ulu.breakpoint-get-sizes();
+///     height: map.get($sizes, "medium");
+///   }
 
 @function get-sizes() {
   @return $sizes;

package/scss/_utils.scss

@@ -34,8 +34,12 @@ $config: (
 
 /// Get a config option
 /// @param {Map} $name Name of property
-/// @example scss - General example
-///   @include ulu.utils-get("property");
+/// @compiler
+///   @use "index" as ulu;
+/// @example scss {compile} Example usage
+///   .test-em-to-pixel {
+///     width: ulu.utils-get("pixel-em-base");
+///   }
 
 @function get($name) {
   @return require-map-get($config, $name, 'utils');
@@ -47,6 +51,13 @@ $config: (
 /// @param {String} $key The key in the map to get value from
 /// @param {String} $context The context of using this function for debugging help
 /// @return {*} The value from the map
+/// @compiler
+///   @use "index" as ulu;
+/// @example scss {compile} Example usage
+///   .test-require-map {
+///     $test-map: ("test-font-size": 12px);
+///     font-size: ulu.utils-require-map-get($test-map, "test-font-size");
+///   }
 
 @function require-map-get($map, $key, $context: "unknown") {
   // $value: map.get($map, $key);
@@ -473,6 +484,12 @@ $config: (
 /// Strips the unit from the number
 /// - Normally this shouldn't be needed
 /// @link https://stackoverflow.com/questions/12328259/how-do-you-strip-the-unit-from-any-number-in-sass/12335841#12335841 Original source (Miriam Suzanne)
+/// @compiler
+///   @use "index" as ulu;
+/// @example scss {compile} Example usage
+///   .test {
+///     line-height: ulu.utils-strip-unit(4rem);
+///   }
 
 @function strip-unit($value) {
   @if (is-number($value)) {

package/scss/components/_button-verbose.scss

@@ -10,6 +10,7 @@
 @use "../color";
 @use "../element";
 @use "../selector";
+@use "../button";
 
 // Used for function fallback
 $-fallbacks: (
@@ -24,6 +25,14 @@ $-fallbacks: (
   "box-shadow-hover" : (
     "function" : meta.get-function("get", false, "element"),
     "property" : "box-shadow-hover"
+  ),
+  "border-color" : (
+    "function" : meta.get-function("get", false, "button"),
+    "property" : "border-color"
+  ),
+  "border-width" : (
+    "function" : meta.get-function("get", false, "button"),
+    "property" : "border-width"
   )
 );
 
@@ -32,6 +41,8 @@ $-fallbacks: (
 /// @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 {String} border-width [null] Border width (or set to true to inherit button border width default)
+/// @prop {String} border-color [null] Border color (or set to true to inherit button border width default)
 /// @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.
@@ -58,6 +69,8 @@ $config: (
   "background-color" : white,
   "background-color-hover" : #F7F8F7,
   "border-radius" : true,
+  "border-color" : null,
+  "border-width" : null,
   "box-shadow" : true,
   "box-shadow-hover" : true,
   "color" : "type",
@@ -122,17 +135,21 @@ $config: (
   $padding-right: ($padding-x * 2) + 1em;
   $cap-side: get("cap-side");
   $cap-defaults: (
+    "offset" : utils.if-type("number", get("border-width"), 0),
     "border-radius" : if(get("cap-match-radius"), get("border-radius"), 0),
     "padding-adjust" : if(utils.is-side($cap-side), $padding-x, $padding-y)
   );
   
   #{ $prefix } {
+    position: relative; // For cap and icon
+    display: block;
     text-decoration: none;
     border-radius: get("border-radius");
+    @if (get("border-width")) {
+      border: get("border-width") solid color.get(get("border-color"));
+    }
     box-shadow: get("box-shadow");
     line-height: get("line-height");
-    position: relative; // For cap and icon
-    display: block;
     margin-bottom: get("margin");
     max-width: 100%;
     width: get("min-width");

package/scss/components/_card.scss

@@ -122,6 +122,12 @@ $config: (
   "overlay-background-color": rgba(0, 0, 0, 0.6),
   "overlay-shading": true,
   "overlay-body-padding-y": 1rem,
+  // new below
+  "toggle-aside-rule" : true,
+  "aside-rule-width" : 6px,
+  "aside-background-color" : rgb(197, 197, 197),
+  "aside-rule-color": green,
+
 ) !default;
   
   /// Change modules $config
@@ -309,9 +315,15 @@ $config: (
       }
     }
   }
-  #{ $prefix }__body,
-  #{ $prefix }__footer,
-  #{ $prefix }__image--icon {
+
+  #{ $prefix }__footer {
+    padding: get("padding");
+  }
+  #{ $prefix }__main {
+    padding: get("padding");
+  }
+  #{ $prefix }__aside {
+    position: relative;
     padding: get("padding");
   }
 
@@ -320,6 +332,7 @@ $config: (
     display: flex;
     align-items: center;
     justify-content: center;
+    // padding: 2rem;
     img {
       position: static;
       display: block;
@@ -335,9 +348,25 @@ $config: (
     z-index: 2; // Above image
   }
   #{ $prefix }__body {
+    display: flex;
+    flex-direction: column;
     flex-grow: 1;
     min-height: get("body-min-height");
   }
+  @if(get("toggle-aside-rule")) {
+    #{ $prefix }__aside {
+      background-color: color.get(get("aside-background-color"));
+    }
+    #{ $prefix }__aside::after {
+      content: "";
+      position: absolute;
+      top: calc(0rem - get("aside-rule-width") / 2);
+      left: get("padding");
+      right: get("padding");
+      height: get("aside-rule-width");
+      background-color: color.get(get("aside-rule-color"));
+    }
+  }
   // For actions/messages
   // - Layout as flex with min height to support buttons 
   //   and text without relying so much on padding
@@ -475,11 +504,31 @@ $config: (
       grid-column: 2 / 3;
     }
     #{ $prefix }__body {
-      display: flex;
-      flex-direction: column;
+      // display: flex;
+      flex-direction: row;
       justify-content: center;
       max-width: get("horizontal-body-max-width");
     }
+    @if(get("toggle-aside-rule")) {
+      #{ $prefix }__main {
+        flex: 1 1 60%;
+      }
+      #{ $prefix }__aside {
+        flex: 1 1 40%;
+        height: 100%;
+        // flex-basis: 40%;
+        // min-width: 40%;
+      }
+      #{ $prefix }__aside::after {
+        content: "";
+        position: absolute;
+        top: get("padding");
+        left: calc(0rem - get("aside-rule-width") / 2);
+        height: calc(100% - get("padding") - get("padding"));
+        width: get("aside-rule-width");
+        background-color: get("aside-rule-color");
+      }
+    }
 
     // For modern browsers
     // Optionally use no-image modifier for older browser support

package/scss/components/_data-grid.scss

@@ -38,6 +38,7 @@
 $config: (
   "attribute":           "data-grid",
   "attribute-container": "data-grid-container",
+  "attribute-init":      "data-grid-init",
   "breakpoint":          false,                   // Fallback to default
   "columns":             12,
   "gutter":              14px,
@@ -49,6 +50,7 @@ $config: (
   "sticky-top":                  var(--ulu-sticky-top-offset, 0),
   "rule-color" : "rule",
   "rule-size" : 1px,
+  "rule-fade-duration" : 400ms,
   "extra-breakpoints":   (
     "medium" : (
       "breakpoint": "medium",
@@ -134,6 +136,7 @@ $config: (
 /// @param {Map} $extra-rule-styles Map of other rule styles to add (map of maps of size, and color), key is the styles name ("name": ("size" : 4px, "color" : "color name" || color))
 /// @param {String} $extra-gutter-scales A map of gutter scales used like `data-grid="gutter-scale: large`, configuration map property becomes scale name and value is the amount (multiplier) to apply to the grid's gutter ie `( "large" : 2.25 )`
 /// @param {Map} $attribute Attribute to use for selecting grid and children. Children attribute get's "-item" as a suffix ("ie. data-grid, data-grid-item")
+/// @param {CssDuration} $rule-fade-duration The amount of time for rules to fade in (after init, script positioning), set to falsey value to disable rule fade in (rules will always be shown)
 
 @mixin create(
   $columns: get("columns"),
@@ -146,14 +149,17 @@ $config: (
   $extra-rule-styles: get("extra-rule-styles"),
   $extra-gutter-scales: get("extra-gutter-scales"),
   $attribute: get("attribute"),
+  $attribute-init: get("attribute-init"),
   $include-container: true,
   $container-attribute: get("attribute-container"),
   $container-gutter-scales: true,
   $sticky-top: get("sticky-top"),
-  $sticky-bottom: get("sticky-bottom")
+  $sticky-bottom: get("sticky-bottom"),
+  $rule-fade-duration: get("rule-fade-duration")
 ) {
   $attribute-item: "#{ $attribute }-item";
   $select-grid: '[#{ $attribute }*="columns: #{ $columns }"]';
+  $select-grid-not-init: '[#{ $attribute }]:not([#{ $attribute-init }])';
   $select-item: '[#{ $attribute-item }]';
   $select-rule-col: "::before";
   $select-rule-row: "::after";
@@ -215,6 +221,20 @@ $config: (
         }
       }
     }
+    // Rules: Applies to both column and row
+    &#{'[#{ $attribute }*="rules"]'} { 
+      > #{ $select-item } {
+        position: relative;
+        @if ($rule-fade-duration) {
+          &#{ $select-rule-col },
+          &#{ $select-rule-row } {
+            // For when grid init fades them in
+            opacity: 1;
+            transition: opacity $rule-fade-duration ease-in; 
+          }
+        }
+      }
+    }
     // Rules: Row
     &#{'[#{ $attribute }*="rules-row:"]'} { 
       > #{ $select-item } {
@@ -227,12 +247,6 @@ $config: (
         }
       }
     }
-    // Rules: Applies to both column and row
-    &#{'[#{ $attribute }*="rules"]'} { 
-      > #{ $select-item } {
-        position: relative;
-      }
-    }
     // Rules: Column
     &#{'[#{ $attribute }*="rules-column:"]'} { 
       > #{ $select-item } {
@@ -580,6 +594,21 @@ $config: (
       }
     }
   }
+
+  // Disable grid rules until init attribute it present (from positioning script)
+  // - In order to keep the rules for this compact it will only hide them if the init
+  //   is not present
+  
+  @if ($rule-fade-duration) {
+    #{ $select-grid-not-init } {
+      > #{ $select-item } {
+        &#{ $select-rule-col },
+        &#{ $select-rule-row } {
+          opacity: 0 !important;
+        }
+      }
+    }
+  }
 }
 
 @mixin -create-extra-breakpoint(

package/scss/components/_form-theme.scss

@@ -85,25 +85,25 @@ $-fallbacks: (
 /// @prop {CssValue} description-margin [(0.25em 0)] Margin for help text.
 /// @prop {Dimension} description-max-width [25em] Max width of help text.
 /// @prop {Number} description-line-height [true] Line height for description element, defaults to typography line-height-dense
-/// @prop {Color} fieldset-background [transparent] Background color of fieldset.
+/// @prop {Color} fieldset-background [transparent] Background color of fieldset element.
 /// @prop {CssValue} fieldset-border [none] Border for fieldset
-/// @prop {Dimension} fieldset-margin-bottom [1rem]
-/// @prop {Dimension} fieldset-margin-top [1rem]
-/// @prop {Dimension} fieldset-padding [0]
+/// @prop {Dimension} fieldset-margin-bottom [1rem] Bottom margin for the fieldset element.
+/// @prop {Dimension} fieldset-margin-top [1rem] Bottom margin for the fieldset element.
+/// @prop {Dimension} fieldset-padding [0] Padding for the fieldset element.
 /// @prop {Dimension} fieldset-margin-compact [0] @joe-check unused
-/// @prop {Dimension} fieldset-border-radius [0]
-/// @prop {Color} fieldset-legend-color [inherit]
-/// @prop {Dimension} fieldset-legend-border-bottom [null]
-/// @prop {Dimension} fieldset-legend-padding-bottom [null]
-/// @prop {Dimension} select-border-radius [4px]
-/// @prop {Color} select-background-color [null]
-/// @prop {CssValue} select-border [null]
-/// @prop {Dimension} select-padding-x [null]
-/// @prop {Dimension} select-padding-y [null]
-/// @prop {CssValue} select-image [null] 
-/// @prop {Dimension} select-image-size [0.9em]
-/// @prop {Dimension} select-image-offset [0.7em]
-/// @prop {Dimension} select-image-margin [0.65em]
+/// @prop {Dimension} fieldset-border-radius [0] Border radius of the fieldset element.
+/// @prop {Color} fieldset-legend-color [inherit] Text color for the fieldset's label.
+/// @prop {Dimension} fieldset-legend-border-bottom [null] Bottom border color for the fieldset's label
+/// @prop {Dimension} fieldset-legend-padding-bottom [null] Bottom padding for the fieldset's label
+/// @prop {Dimension} select-border-radius [4px] Border radius for the select element.
+/// @prop {Color} select-background-color [null] Background color for the select element.
+/// @prop {CssValue} select-border [null] The border for the select element. Fallback to input border.
+/// @prop {Dimension} select-padding-x [null] Horizontal padding for the select element. Fallback to input-padding-x.
+/// @prop {Dimension} select-padding-y [null] Vertical padding for the select element. Fallback to input-padding-y.
+/// @prop {CssValue} select-image [null] Url for select element's background image.
+/// @prop {Dimension} select-image-size [0.9em] Background size for the select image.
+/// @prop {Dimension} select-image-offset [0.7em] Offset for the select image.
+/// @prop {Dimension} select-image-margin [0.65em] select image margin.
 /// @prop {Dimension} inline-gap [1em] Gap between items that are inline like checkboxes
 
 $config: (

package/scss/components/_modal.scss

@@ -260,6 +260,12 @@ $config: (
       width: $size-width;
     }
   }
+
+  #{ $prefix }--fullscreen {
+    width: 100%;
+    height: 100%;
+    border-radius: 0;
+  }
   #{ $prefix }--right,
   #{ $prefix }--left {
     border-radius: 0;

package/scss/components/_rule.scss

@@ -82,6 +82,7 @@ $config: (
       width: $short-width;
       max-width: 100%;
       border-bottom-width: get("short-border-width");
+      display: inline-block;
     }
     @if get("short-modifiers") {
       @each $mod, $opts in get("short-modifiers") {

package/types/settings.d.ts

@@ -31,8 +31,36 @@ export function updateSetting(key: string, value: any): void;
  * retrieves the current value of the specified setting. This allows the setting
  * to be used as a string literal, dynamically retrieving its value.
  *
- * @param {string} key The key of the setting to wrap.
- * @returns {object} An object with a `toString()` method that returns the setting value.
+ * @param {String} key The key of the setting to wrap.
+ * @param {Function} transform Optional function to transform the setting's
+ * value when its string representation is requested.
+ * @returns {Object} An object with a `toString()` method that returns the
+ * (optionally transformed) setting value as a string.
  */
-export function wrapSettingString(key: string): object;
+export function wrapSettingString(key: string, transform: Function): any;
+/**
+ * Default settings
+ */
+export type Defaults = {
+    /**
+     * - The CSS class string for the close icon
+     */
+    iconClassClose: string;
+    /**
+     * - The CSS class string for the drag X icon
+     */
+    iconClassDragX: string;
+    /**
+     * - The CSS class string for the previous icon
+     */
+    iconClassPrevious: string;
+    /**
+     * - The CSS class string for the next icon
+     */
+    iconClassNext: string;
+    /**
+     * - The prefix to use for CSS custom properties
+     */
+    cssvarPrefix: string;
+};
 //# sourceMappingURL=settings.d.ts.map

package/types/settings.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"settings.d.ts","sourceRoot":"","sources":["../js/settings.js"],"names":[],"mappings":"AAgBA;;;GAGG;AACH,sCAFa,MAAM,CAIlB;AAED;;;GAGG;AACH,wCAFW,MAAM,QAIhB;AAED;;;GAGG;AACH,+BAFa,MAAM,CAIlB;AAED;;;;GAIG;AACH,gCAHW,MAAM,OAShB;AAED;;;;GAIG;AACH,mCAHW,MAAM,oBAKhB;AAED;;;;;;;;GAQG;AACH,uCAHW,MAAM,GACJ,MAAM,CAQlB"}
+{"version":3,"file":"settings.d.ts","sourceRoot":"","sources":["../js/settings.js"],"names":[],"mappings":"AA6BA;;;GAGG;AACH,sCAFa,MAAM,CAIlB;AAED;;;GAGG;AACH,wCAFW,MAAM,QAIhB;AAED;;;GAGG;AACH,+BAFa,MAAM,CAIlB;AAED;;;;GAIG;AACH,gCAHW,MAAM,OAShB;AAED;;;;GAIG;AACH,mCAHW,MAAM,oBAKhB;AAED;;;;;;;;;;;GAWG;AACH,yEAOC;;;;;;;;oBAtFa,MAAM;;;;oBACN,MAAM;;;;uBACN,MAAM;;;;mBACN,MAAM;;;;kBACN,MAAM"}

package/types/ui/breakpoints.d.ts

@@ -1,32 +1,32 @@
 /**
  * @class
  * Class that provides method for retrieving and acting on breakpoints passed
- * from CSS (using element psuedo content prop)
+ * from CSS (using element pseudo content prop)
  */
 export class BreakpointManager {
     static instances: any[];
     static defaults: {
         element: HTMLElement;
-        valueFromPsuedo: boolean;
-        customProperty: string;
-        psuedoSelector: string;
+        valueFromPseudo: boolean;
+        customProperty: any;
+        pseudoSelector: string;
         order: string[];
         debug: boolean;
     };
     /**
-     * @param {Object} config Configruation object
+     * @param {Object} config Configuration object
      * @param {Array} config.order Array of strings that correspond to the breakpoints setup in the styles, Breakpoints from smallest to largest, defaults to [small, medium, large]
      * @param {Array} config.customProperty Property to grab breakpoint from (default is --breakpoint)
-     * @param {Array} config.valueFromPsuedo Use the legacy method of grabbing breakpoint from psuedo element, default uses custom property
-     * @param {Node} config.element The element to retrieve active breakpoint from stylesheet. (default is html) For using the old psuedo method, adjust this to document.body
-     * @param {String} config.psuedoSelector Change psuedo selector used to get the breakpoint from the psuedo's content property
+     * @param {Array} config.valueFromPseudo Use the legacy method of grabbing breakpoint from pseudo element, default uses custom property
+     * @param {Node} config.element The element to retrieve active breakpoint from stylesheet. (default is html) For using the old pseudo method, adjust this to document.body
+     * @param {String} config.pseudoSelector Change pseudo selector used to get the breakpoint from the pseudo's content property
      */
     constructor(config: {
         order: any[];
         customProperty: any[];
-        valueFromPsuedo: any[];
+        valueFromPseudo: any[];
         element: Node;
-        psuedoSelector: string;
+        pseudoSelector: string;
     });
     active: any;
     previous: any;
@@ -36,9 +36,9 @@ export class BreakpointManager {
     breakpoints: {};
     onChangeCallbacks: any[];
     /**
-     * Add a callback for everytime a breakpoint changes
+     * Add a callback for every time a breakpoint changes
      * - Not recommended, possibly use to watch for changes, etc
-     * - For more control use intance.at(name) with breakpoint methods
+     * - For more control use instance.at(name) with breakpoint methods
      * @param {Function} callback Function to call, passed one argument current instance which can be used to get information about breakpoints
      */
     onChange(callback: Function): void;
@@ -48,9 +48,9 @@ export class BreakpointManager {
      */
     removeOnChange(callback: Function): void;
     /**
-     * Get breakpoint from a psuedo element
+     * Get breakpoint from a pseudo element
      */
-    getBreakpointInPsuedo(): string;
+    getBreakpointInPseudo(): string;
     /**
      * Get breakpoint from a custom property
      */

package/types/ui/breakpoints.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"breakpoints.d.ts","sourceRoot":"","sources":["../../js/ui/breakpoints.js"],"names":[],"mappings":"AAeA;;;;GAIG;AACH;IACE,wBAAsB;IACtB;;;;;;;MAOC;IACD;;;;;;;OAOG;IACH;QANyB,KAAK;QACL,cAAc;QACd,eAAe;QAChB,OAAO,EAApB,IAAI;QACW,cAAc;OAevC;IAXC,YAAkB;IAClB,cAAoB;IACpB,iBAAuB;IACvB,wBAA2B;IAC3B,mBAAyB;IACzB,gBAAqB;IACrB,yBAA2B;IAM7B;;;;;OAKG;IACH,mCAEC;IACD;;;OAGG;IACH,yCAEC;IACD;;OAEG;IACH,gCAEC;IACD;;OAEG;IACH,kCAEC;IACD;;OAEG;IACH,wBAMC;IACD;;OAEG;IACH,eA4CC;IACD;;;;OAIG;IACH,kBAFY,UAAU,CAQrB;CACF;AAsED;;;GAGG;AACH;IACE,qCAQC;IAPC;;;;MAIC;IACD,cAAuB;IACvB,UAAgB;IAElB;;;;;OAKG;IACH,wDAEC;IACD;;;;;OAKG;IACH,6BAEC;IACD;;;;;OAKG;IACH,6BAEC;IACD;;;OAGG;IACH,8BAEC;IACD;;;;OAIG;IACH,mDAGC;IAED,yBAGC;CACF;AAnID;;;GAGG;AACH;IACE,6CAMC;IALC,eAA0B;IAC1B,gBAAmB;IACnB,UAAY;IACZ,WAAa;IACb,gBAA4B;IAE9B;;OAEG;IACH,sBAMC;IACD;;OAEG;IACH,4BAIC;IACD;;OAEG;IACH,+BAEC;IACD;;;;;OAKG;IACH,aAJW,cAAe,QAiBzB;IACD;;OAEG;IACH,2BAQC;CACF"}
+{"version":3,"file":"breakpoints.d.ts","sourceRoot":"","sources":["../../js/ui/breakpoints.js"],"names":[],"mappings":"AAkBA;;;;GAIG;AACH;IACE,wBAAsB;IACtB;;;;;;;MAQC;IACD;;;;;;;OAOG;IACH;QANyB,KAAK;QACL,cAAc;QACd,eAAe;QAChB,OAAO,EAApB,IAAI;QACW,cAAc;OAevC;IAXC,YAAkB;IAClB,cAAoB;IACpB,iBAAuB;IACvB,wBAA2B;IAC3B,mBAAyB;IACzB,gBAAqB;IACrB,yBAA2B;IAM7B;;;;;OAKG;IACH,mCAEC;IACD;;;OAGG;IACH,yCAEC;IACD;;OAEG;IACH,gCAEC;IACD;;OAEG;IACH,kCAEC;IACD;;OAEG;IACH,wBAMC;IACD;;OAEG;IACH,eA4CC;IACD;;;;OAIG;IACH,kBAFY,UAAU,CAQrB;CACF;AAsED;;;GAGG;AACH;IACE,qCAQC;IAPC;;;;MAIC;IACD,cAAuB;IACvB,UAAgB;IAElB;;;;;OAKG;IACH,wDAEC;IACD;;;;;OAKG;IACH,6BAEC;IACD;;;;;OAKG;IACH,6BAEC;IACD;;;OAGG;IACH,8BAEC;IACD;;;;OAIG;IACH,mDAGC;IAED,yBAGC;CACF;AAnID;;;GAGG;AACH;IACE,6CAMC;IALC,eAA0B;IAC1B,gBAAmB;IACnB,UAAY;IACZ,WAAa;IACb,gBAA4B;IAE9B;;OAEG;IACH,sBAMC;IACD;;OAEG;IACH,4BAIC;IACD;;OAEG;IACH,+BAEC;IACD;;;;;OAKG;IACH,aAJW,cAAe,QAiBzB;IACD;;OAEG;IACH,2BAQC;CACF"}

package/types/ui/collapsible.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"collapsible.d.ts","sourceRoot":"","sources":["../../js/ui/collapsible.js"],"names":[],"mappings":"AAQA;;GAEG;AACH;IACE;;;;QAME;;WAEG;;QAGH;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;;MAKH;IACF;;;;;;OAMG;IACH;QAL0B,OAAO,EAAtB,IAAI;QACW,OAAO,EAAtB,IAAI;oBAsBd;IAXC;iBAZS,IAAI;iBACJ,IAAI;MAWW;IACxB,aAAsB;IACtB,gBAAmB;IACnB,aAAkB;IASpB,uBAaC;IAVC,mCAEC;IACD,sCAIC;IAIH,uBAIC;IACD,0BAEC;IACD,gBAGC;IACD,+BAIC;IACD,cAOC;IACD,sDAEC;IACD,wCAqBC;IACD;;OAEG;IACH,+BAoBC;IACD;;OAEG;IACH,iCAQC;IACD,uBAEC;IACD,wBAEC;IACD,yBAEC;CAqBF"}
+{"version":3,"file":"collapsible.d.ts","sourceRoot":"","sources":["../../js/ui/collapsible.js"],"names":[],"mappings":"AAQA;;GAEG;AACH;IACE;;;;QAME;;WAEG;;QAGH;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;;MAKH;IACF;;;;;;OAMG;IACH;QAL0B,OAAO,EAAtB,IAAI;QACW,OAAO,EAAtB,IAAI;oBAsBd;IAXC;iBAZS,IAAI;iBACJ,IAAI;MAWW;IACxB,aAAsB;IACtB,gBAAmB;IACnB,aAAkB;IASpB,uBAoBC;IAjBC,mCAEC;IACD,sCAWC;IAIH,uBAIC;IACD,0BAEC;IACD,gBAGC;IACD,+BAIC;IACD,cAOC;IACD,sDAEC;IACD,wCAqBC;IACD;;OAEG;IACH,+BAoBC;IACD;;OAEG;IACH,iCAQC;IACD,uBAEC;IACD,wBAEC;IACD,yBAEC;CAqBF"}