@ulu/frontend 0.1.0-beta.99 → 0.2.0-beta.10

package/scss/components/_card.scss

@@ -1,596 +0,0 @@
-////
-/// @group card
-/// A versatile container for displaying and summarizing individual items, entities, or resources in a visually appealing and concise format
-////
-
-@use "sass:map";
-@use 'sass:list';
-
-@use "../breakpoint";
-@use "../utils";
-@use "../selector";
-@use "../color";
-@use "../layout";
-
-// todo
-// sass color adjust for smooth transition. Add a comment for this if we can’t get to this
-
-/// Module Settings
-/// @type Map
-/// @prop {Dimension} padding [2rem] The padding for the image icon
-/// @prop {Dimension} margin-y [3rem] Top and bottom margin for the card.
-/// @prop {Dimension} border-radius [5rem] The border radius of the card.
-/// @prop {CssValue} box-shadow [null] The box-shadow for the card.
-/// @prop {CssValue} box-shadow-hover [null] The box-shadow for the card when hovered or focused.
-/// @prop {Color} color [null] The type color of the card.
-/// @prop {Color} color-hover [null] The type color of the card when hovered or focused.
-/// @prop {Color} color-overlay [white] The type color of the card when using card--overlay.
-/// @prop {Color} color-overlay-hover [null] The type color of the card when hovered or focused and when using card--overlay.
-/// @prop {Color} overlay-background-color [rgba(0, 0, 0, 0.6)] The background color for the text box when using card--overlay.
-/// @prop {Color} background-color [white] The background color of the card.
-/// @prop {Color} background-color-hover [rgb(242, 244, 246)] The background color of the card when hovered or focused.
-/// @prop {Dimension} max-width [28rem] The max-width of the card.
-/// @prop {Dimension} body-min-height [8rem] the min-height of the card body.
-/// @prop {CssValue} border [1px solid #ccc] The card border.
-/// @prop {CssValue} border-hover [2px solid #278cca] The card border when hovered or focused.
-/// @prop {Dimension} header-margin [0.75em] The margin for the card header.
-/// @prop {Color} title-color [null] The type color of the title.
-/// @prop {Color} title-color-hover [null] The type color of the title (if link/button) when hovered or focused
-/// @prop {Dimension} title-margin [0] The margin for the title.
-/// @prop {CssValue} title-font-weight [bold] The font weight for the title.
-/// @prop {Number} image-ratio [56.25%] The image ratio for the card image.
-/// @prop {Color} image-background-color [rgb(197, 197, 197)] The background color behind the image.
-/// @prop {Dimension} image-margin [null] The margin for the image.
-/// @prop {Dimension} image-border [null] // For when you have a margin, the border for the image.
-/// @prop {CssValue} image-transform-hover [null] Animation for the image when hovered or focused.
-/// @prop {CssValue} image-filter-hover [null] Filter for the image when hovered or focused.
-/// @prop {Color} overlay-background-color-hover [null] The color of the pseudo-element when using proxy click.
-/// @prop {Boolean} clickable-card-enabled [true] Enable or disable proxy click.
-/// @prop {String} clickable-card-selector [data-ulu-proxy-click-init] The selector for proxy-click.js to find the card and implement the clickable card script.
-/// @prop {String} clickable-card-interact-selector [&:hover, &:focus-within] The selectors for the cards being interacted with.
-/// @prop {Dimension} footer-padding-y [0.25rem] The top and bottom padding for the footer.
-/// @prop {Dimension} footer-min-height [2.5rem] The min height for the footer
-/// @prop {String} prefix [card] The class name used to add card styling.
-/// @prop {Boolean} transition-enabled [true] Enable or disable transition for card.
-/// @prop {CssValue} transition-timing-function [ease-in-out] The timing function for the card animation.
-/// @prop {Time} transition-duration [200ms] The animation duration for the card animation.
-/// @prop {List} transition-properties [(border-color, background-color, color, box-shadow, transform)] The properties for the card animation.
-/// @prop {Boolean} image-transition-enabled [true] Enable or disable the image transition.
-/// @prop {Time} image-transition-duration [350ms] The duration of the image transition.
-/// @prop {CssValue} image-transition-timing-function [ease-in-out] The timing function for the image transition.
-/// @prop {Number} image-fit-padding [1rem] Padding on inside of image when using image fit modifier
-/// @prop {CssValue} image-fit-filter [drop-shadow(0 0px 8px rgba(0, 0, 0, 0.2))] Filter to use on image when using image fit modifier
-/// @prop {List} image-icon-max-width [10rem] Max width for image when using the modifier on the .card__image--icon
-/// @prop {List} image-transition-properties [(transform, filter)] The properties for the image transitions.
-/// @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.
-/// @prop {Unit} horizontal-min-height [10rem] Minimum height when horizontal
-/// @prop {Unit} horizontal-max-width [40rem] Maximum width when horizontal
-/// @prop {Unit} horizontal-body-max-width [80rem] The max-width of body when horizontal
-/// @prop {Boolean} aside-rule [false] Whether or not to have a rule separating body and aside
-/// @prop {CssUnit} aside-rule-width [1px] Size of rule
-/// @prop {CssUnit} aside-rule-color ["rule-light"] Color of rule
-/// @prop {CssUnit} aside-rule-background-color [transparent] Color of aside background color
-
-$config: (
-  "background-color" : white,
-  "background-color-hover" : rgb(242, 244, 246),
-  "body-min-height" : 10rem,
-  "border" : 1px solid #ccc,
-  "border-hover" : 2px solid #278cca,
-  "border-radius" : 5px,
-  "box-shadow" : null,
-  "box-shadow-hover" : null,
-  "clickable-card-enabled" : true,
-  "clickable-card-selector" : "[data-ulu-proxy-click-init]",
-  "clickable-card-interact-selector" : "&:hover, &:focus-within",
-  "color" : "type",
-  "color-hover" : null,
-  "footer-padding-y" : 0.25rem,
-  "footer-min-height" : 2.5rem,
-  "horizontal-breakpoint" : "small",
-  "horizontal-image-width" : min(33%, 20rem),
-  "horizontal-body-max-width" : 40rem,
-  "horizontal-min-height" : 20rem,
-  "horizontal-max-width" : 80rem,
-  "header-margin" : 0.75em,
-  "image-ratio" : 56.25%,
-  "image-aspect-ratio": list.slash(5, 3),
-  "image-background-color" : rgb(238, 238, 238),
-  "image-border" : null, // For when you have a margin
-  "image-filter-hover" : null,
-  "image-margin" : null,
-  "image-icon-max-width" : 8rem,
-  "image-transform-hover" : null,
-  "image-transition-duration" :    350ms,
-  "image-transition-enabled" : true,
-  "image-transition-properties" : (transform, filter),
-  "image-transition-timing-function" : ease-in-out,
-  "image-fit-padding" : 1rem,
-  "image-fit-filter" : drop-shadow(0 0px 8px rgba(0, 0, 0, 0.3)),
-  "margin-y" : 3rem,
-  "max-width" : 28rem,
-  "padding" : 2rem,
-  "title-color" : null,
-  "title-color-hover" : null,
-  "title-color-card-hover" : null,
-  "title-margin" : 1rem,
-  "title-font-weight" : bold,
-  "transition-enabled":      true,
-  "transition-timing-function" : ease-in-out,
-  "transition-duration" :    200ms,
-  "transition-properties" :  (border-color, background-color, color, box-shadow, transform),
-  "overlay-aspect-ratio": list.slash(4, 3),
-  "overlay-background-color-hover" : null,
-  "color-overlay" : white,
-  "color-overlay-hover" : null,
-  "overlay-background-color": rgba(0, 0, 0, 0.6),
-  "overlay-shading": true,
-  "overlay-body-padding-y": 1rem,
-  // new below
-  "aside-rule" : false,
-  "aside-rule-width" : 1px,
-  "aside-background-color" : transparent,
-  "aside-rule-color": "rule-light",
-) !default;
-  
-  /// Change modules $config
-/// @param {Map} $changes Map of changes
-/// @example scss
-///   @include ulu.component-card-set(( "property" : value ));
-
-@mixin set($changes) {
-  $config: map.merge($config, $changes) !global;
-}
-
-/// Get a config option
-/// @param {Map} $name Name of property
-/// @example scss
-///   @include ulu.component-card-get(( "property" : value ));
-
-@function get($name) {
-  @return utils.require-map-get($config, $name, "card [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");
-  // When proxy click enabled
-  @if (get("clickable-card-enabled") and get("clickable-card-selector")) {
-    #{ $prefix }#{ get("clickable-card-selector") },
-    a#{ $prefix },
-    button#{ $prefix },
-    #{ $prefix }--clickable {
-      @if ($hover) {
-        #{ get("clickable-card-interact-selector") } {
-          @content;
-        }
-      } @else {
-        @content;
-      }
-    }
-  // Without proxy click (only if interactive)
-  } @else {
-    a#{ $prefix },
-    button#{ $prefix },
-    #{ $prefix }--clickable {
-      @if ($hover) {
-        #{ get("clickable-card-interact-selector") } {
-          @content;
-        }
-      } @else {
-        @content;
-      }
-    }
-  } 
-}
-
-
-@mixin shared-transition-styles() {
-  transition-duration: get("transition-duration");
-  transition-timing-function: get("transition-timing-function");
-}
-/// Prints component styles
-/// @demo card
-/// @example scss
-/// @example
-///   @include ulu.component-card-styles();
-
-@mixin styles {
-  $prefix: selector.class("card");
-
-  #{ $prefix } {
-    color: color.get(get("color"));
-    background-color: color.get(get("background-color"));
-    border-radius: get("border-radius");
-    box-shadow: get("box-shadow");
-    margin-top: get("margin-y");
-    margin-bottom: get("margin-y");
-    position: relative;
-    display: flex; // Reorder image
-    flex-direction: column;
-    justify-content: flex-end;
-    max-width: get("max-width");
-    // Not absolutely necessary, incase we want to remove in future
-    overflow: hidden; 
-
-    // Border is on pseudo so that it's on top of image/etc
-    &::after {
-      @include layout.absolute-fill();
-      content: if(get("border"), "", null);
-      border: get("border");
-      border-radius: get("border-radius");
-      z-index: 4;
-      pointer-events: none;
-    }
-  }
-
-  @include when-clickable($hover: true) {
-    background-color: color.get(get("background-color-hover"));
-    color: color.get(get("color-hover"));
-    box-shadow: get("box-shadow-hover");
-    
-    @if (get("border-hover") or get("overlay-background-color-hover")) {
-      &::after {
-        content: "";
-        border: get("border-hover");
-        background-color: color.get(get("overlay-background-color-hover"));
-      }
-    }
-  }
-
-  // Setting transitions regardless of clickable card selector
-  // This shouldn't interfere since styles aren't changed if not clickable (ie. .card [border-color, etc])
-  @if get("transition-enabled") {
-    #{ $prefix },
-    #{ $prefix }::after,
-    #{ $prefix }__title {
-      @include shared-transition-styles();
-      transition-property: get("transition-properties");
-    }
-  } 
-
-  #{ $prefix }__title {
-    color: color.get(get("title-color"));
-    margin-bottom: get("title-margin");
-    display: block;
-    font-weight: get("title-font-weight");
-    #{ $prefix }__title-link {
-      all: unset;
-      cursor: pointer;
-      @if get("title-color-hover") {
-        &:hover,
-        &:focus {
-          color: color.get(get("title-color-hover"));
-        }
-      }
-    }
-  }
-  @if get("title-color-hover") {
-    @include when-clickable($hover: true) {
-      #{ $prefix }__title {
-        color: color.get(get("title-color-hover"));
-      }
-    }
-  }
-
-  #{ $prefix }__header + #{ $prefix }__content {
-    margin-top: get("header-margin");
-  }
-  
-  // Fix since sometimes these have nested markup sometimes just raw text
-  #{ $prefix }__image {
-    order: -1;
-    position: relative;
-    z-index: 1;
-    overflow: hidden;
-    // padding-top: get("image-ratio"); // 9:16
-    margin: get("image-margin");
-    border: get("image-border");
-    background-color: color.get(get("image-background-color"));
-    border-top-right-radius: get("border-radius");
-    border-top-left-radius: get("border-radius");
-    aspect-ratio: get("image-aspect-ratio");
-    width: 100%;
-  }
-  #{ $prefix }__image img,
-  #{ $prefix}__image-media {
-    @include layout.absolute-fill(true);
-    border: 0;
-    object-fit: cover;
-    transform-origin: center center;
-    @if (get("image-transition-enabled")) {
-      transition-duration: get("image-transition-duration");
-      transition-timing-function: get("image-transition-timing-function");
-      transition-property: get("image-transition-properties");
-    }
-  }
-  @if (get("image-transform-hover") or get("image-filter-hover")) {
-    @include when-clickable($hover: true) {
-      #{ $prefix }__image img,
-      #{ $prefix}__image-media {
-        transform: get("image-transform-hover");
-        filter: get("image-filter-hover");
-      }
-    }
-  }
-
-  #{ $prefix }__footer {
-    padding: get("padding");
-  }
-  #{ $prefix }__main {
-    padding: get("padding");
-  }
-  #{ $prefix }__aside {
-    position: relative;
-    padding: get("padding");
-  }
-
-  #{ $prefix }__image--icon {
-    // background-color: transparent; 
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    // padding: 2rem;
-    img {
-      position: static;
-      display: block;
-      max-width: get("image-icon-max-width");
-      height: auto;
-      top: auto;
-      left: auto;
-    }
-  }
-  #{ $prefix }__body,
-  #{ $prefix }__footer { 
-    position: relative;
-    z-index: 2; // Above image
-  }
-  #{ $prefix }__body {
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-    min-height: get("body-min-height");
-  }
-  @if(get("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
-  #{ $prefix }__footer {
-    flex: 0;
-    z-index: 4;
-    padding-top: get("footer-padding-y");
-    padding-bottom: get("footer-padding-y");
-    min-height: get("footer-min-height");
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-  }
-  // body + footer {
-  // means body keeps before pseudo element while footer loses it
-  #{ $prefix }--overlay {
-    // overflow: hidden;
-    aspect-ratio: get("overlay-aspect-ratio");
-    height: min-content;
-    #{ $prefix }__body {
-      position: relative;
-      flex-grow: 0;
-      z-index: 2;
-      color: color.get(get("color-overlay"));
-      background-color: color.get(get("overlay-background-color"));
-      min-height: 0;
-      padding-top: get("overlay-body-padding-y");
-      padding-bottom: get("overlay-body-padding-y");
-      
-      &:not(:has(~ #{ $prefix }__footer)) {
-        border-bottom-left-radius: get("border-radius");
-        border-bottom-right-radius: get("border-radius");
-      }
-
-      @if (get("overlay-shading")) {
-        margin-top: 4rem;
-        &::before {
-          content: "";
-          position: absolute;
-          bottom: 100%;
-          left: 0;
-          right: 0;
-          height: 4rem;
-          background: linear-gradient(to top, get("overlay-background-color") 0%, rgba(0, 0, 0, 0));
-        }
-      }
-    }
-    #{ $prefix }__footer {
-      background-color: color.get(get("overlay-background-color"));
-      color: color.get(get("color-overlay"));
-      border-bottom-left-radius: get("border-radius");
-      border-bottom-right-radius: get("border-radius");
-    }
-    #{ $prefix }__body,
-    #{ $prefix }__footer {
-      &:last-child {
-        border-bottom-left-radius: get("border-radius");
-        border-bottom-right-radius: get("border-radius");
-      }
-    }
-    #{ $prefix }__title {
-      color: color.get(get("color-overlay"));
-    }
-    #{ $prefix }__image {
-      @include layout.absolute-fill();
-      overflow: hidden;
-      padding-top: 0;
-      background-color: color.get(rgb(255, 255, 255));
-      border-radius: get("border-radius");
-      aspect-ratio: auto;
-      img {      
-        z-index: 1;
-        position: relative;
-        width: 100%;
-        height: 100%;
-        border: 0;
-        object-fit: cover;
-        &::before {
-          @include layout.absolute-fill(true);
-          display: block;
-          background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.9));
-        }
-      }
-    }
-  }
-
-  // Incase this modifier is being used to hide the image
-  // not just to tell the component how to layout without image
-  // - Use case is hiding image when you can't control the output 
-  //   of the inside of the card (printed no matter what). We had
-  //   this happen in HHRC, including this extra CSS for that
-  #{ $prefix }--no-image {
-    #{ $prefix }__image {
-      display: none;
-    }
-  }
-  #{ $prefix }--image-fit {
-    #{ $prefix }__image {
-      img {
-        padding: get("image-fit-padding");
-        object-fit: contain;
-        object-position: top center;
-        filter: get("image-fit-filter");
-      }
-    }
-  }
-  #{ $prefix }--fill {
-    max-width: none;
-    height: 100%;
-    margin: 0;
-  }
-
-  @if (get("horizontal-breakpoint")) {
-    @include breakpoint.min(get("horizontal-breakpoint")) {
-      @include -horizontal-card-styles();
-    }
-  } @else {
-    @include -horizontal-card-styles();
-  }
-}
-
-@mixin -horizontal-card-styles() {
-  $prefix: selector.class("card");
-
-  #{ $prefix }--horizontal {
-    display: grid;
-    grid-template-columns: get("horizontal-image-width") 1fr;
-    // Creating the two rows (body and footer), if one is missing it's height will be 0
-    // Cannot use gap with the grid as it will create space when a row isn't needed
-    grid-template-rows: auto auto;
-    min-height: get("horizontal-min-height");
-    max-width: get("horizontal-max-width");
-
-    // When no footer remove extra row
-    &:not(:has(> #{ $prefix }__footer)) {
-      grid-template-rows: auto;
-    }
-    #{ $prefix }__image {
-      grid-column: 1 / 2;
-      grid-row: 1 / -1;
-      aspect-ratio: auto;
-      border-top-right-radius: 0;
-      border-bottom-left-radius: get("border-radius");
-    }
-    #{ $prefix }__body,
-    #{ $prefix }__footer {
-      grid-column: 2 / 3;
-    }
-    #{ $prefix }__body {
-      flex-direction: row;
-      max-width: get("horizontal-body-max-width");
-    }
-    
-    @if(get("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
-    &:not(:has(#{ $prefix }__image)) {
-      @include -card-horizontal-no-image-styles();
-    }
-    &#{ $prefix }--no-image {
-      @include -card-horizontal-no-image-styles();
-    }
-  }
-  #{ $prefix }--horizontal-center {
-    #{ $prefix }__body {
-      align-self: center;
-    }
-  }
-}
-
-@mixin -card-horizontal-no-image-styles() {
-  $prefix: selector.class("card");
-  grid-template-columns: 1fr;
-  #{ $prefix }__body,
-  #{ $prefix }__footer {
-    grid-column: 1 / 2;
-  }
-}
-
-// OLD CSS FOR HORIZONTAL
-  // #{ $prefix }--horizontal {
-  //   display: flex;
-  //   flex-direction: row;
-  //   justify-content: center;
-  //   align-items: center;
-  //   #{ $prefix }__image {
-  //     align-self: stretch;
-  //     border-top-right-radius: 0;
-  //     border-bottom-left-radius: get("border-radius");
-  //     width: get("horizontal-image-width");
-  //     flex: 0 0 get("horizontal-image-width");
-  //     // max-width: 30rem;
-  //     // min-height: 28rem;
-  //     // padding-top: 0;
-  //   }
-  //   #{ $prefix }__body {
-  //     display: flex;
-  //     flex: 1;
-  //     flex-direction: column;
-  //     justify-content: center;
-  //     max-width: get("horizontal-body-max-width");
-  //   }
-  // }
-

package/types/events/index.d.ts

@@ -1,26 +0,0 @@
-/**
- * Triggers one of our custom events (page/document level events)
- * - UI components may dispatch their own events, this is just used for system wide events
- * @param {String} type Type of event to dispatch
- * @param {Node} context Element to trigger the event from
- * @example
- *   if (updatedMarkup) {
- *     dispatch("pageModified", modalElement);
- *   }
- */
-export function dispatch(type: string, context: Node): void;
-/**
- * Namespaced event
- * - Should be used for all ulu script/component events
- * @param {String} type Type of event to get the actual event name for
- * @returns {String}
- */
-export function getName(type: string): string;
-/**
- * Create ulu namespaced custom event
- * @param {String} type Event base name (not prefixed)
- * @param {any} data Custom data to pass with the event (will be available as `event.detail`)
- * @param {Object} options CustomEvent options default `{ bubbles: true }`. If `detail` is also provided, it will be merged with this options object and will override the 'data' argument for this function
- */
-export function createEvent(type: string, data?: any, options?: any): CustomEvent<any>;
-//# sourceMappingURL=index.d.ts.map

package/types/events/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../js/events/index.js"],"names":[],"mappings":"AA6CA;;;;;;;;;GASG;AACH,gDANW,IAAI,QAYd;AAED;;;;;GAKG;AACH,8CAEC;AAED;;;;;GAKG;AACH,iDAHW,GAAG,mCAKb"}

package/types/index.d.ts

@@ -1,5 +0,0 @@
-export * as settings from "./settings.js";
-export * as events from "./events/index.js";
-export * as ui from "./ui/index.js";
-export * as utils from "./utils/index.js";
-//# sourceMappingURL=index.d.ts.map

package/types/settings.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"settings.d.ts","sourceRoot":"","sources":["../js/settings.js"],"names":[],"mappings":"AA+BA;;;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;;;;;;;;oBAxFa,MAAM;;;;oBACN,MAAM;;;;uBACN,MAAM;;;;uBACN,MAAM;;;;mBACN,MAAM;;;;kBACN,MAAM"}

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

@@ -1 +0,0 @@
-{"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 +0,0 @@
-{"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"}

package/types/ui/details-group.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"details-group.d.ts","sourceRoot":"","sources":["../../js/ui/details-group.js"],"names":[],"mappings":"AAqBA;;;GAGG;AACH,6BASC;AAED;;;;;GAKG;AAEH;;;;;GAKG;AACH,oCAJW,WAAW,qBAET,oBAAoB,CAgEhC;AAxGD;;GAEG;AACH,+CAGG;;;;;;;;;aA0BW,WAAW;;;;;;qCAlCY,oBAAoB"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../js/ui/dialog.js"],"names":[],"mappings":"AA6DA;;GAEG;AACH,gDAEC;AAED;;;GAGG;AACH,6BAqBC;AAED;;;;GAIG;AACH,sCAHW,IAAI,0BA2Bd;AAED;;;GAGG;AACH,oCAFW,IAAI,0BA6Dd;AAED;;;;GAIG;AACH,yCAHW,IAAI,OAKd;AA7LD;;GAEG;AACH,8CAA+C;AAE/C;;GAEG;AACH,+CAAuF;AAEvF;;GAEG;AACH,oCAAgE;;;;;;;;;qCAjB3B,oBAAoB"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"flipcard.d.ts","sourceRoot":"","sources":["../../js/ui/flipcard.js"],"names":[],"mappings":"AAgBA;;GAEG;AACH,6BAYC;AAvBD;;GAEG;AACH,+CAGG;AAmBH;;GAEG;AACH;IACE,wBAAsB;IACtB;;OAEG;IACH;;;;;;;MAOE;IACF,gEAgBC;IAZC,aAA2D;IAK3D;;;;MAA0C;IAC1C,gBAAmB;IACnB,YAA6D;IAC7D,kBAA0D;IAK5D,eAEC;IACD,cAqCC;IACD;;;OAGG;IACH;;aAQC;IACD,0BAGC;IACD,+BAIC;IACD,kCASC;IACD,uBAWC;IACD,kCAKC;CACF;qCAzJoC,oBAAoB"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../js/ui/grid.js"],"names":[],"mappings":"AAeA;;;GAGG;AACH,yCAQC;AApBD;;GAEG;AACH,+CAGG;qCATkC,oBAAoB"}

package/types/ui/index.d.ts

@@ -1,24 +0,0 @@
-export * as page from "./page.js";
-export * as breakpoints from "./breakpoints.js";
-export * as collapsible from "./collapsible.js";
-export * as modalBuilder from "./modal-builder.js";
-export * as dialog from "./dialog.js";
-export * as flipcard from "./flipcard.js";
-export * as grid from "./grid.js";
-export * as index from "./index.js";
-export * as overflowScrollerPager from "./overflow-scroller-pager.js";
-export * as overflowScroller from "./overflow-scroller.js";
-export * as popover from "./popover.js";
-export * as tooltip from "./tooltip.js";
-export * as resizer from "./resizer.js";
-export * as slider from "./slider.js";
-export * as tabs from "./tabs.js";
-export * as proxyClick from "./proxy-click.js";
-export * as scrollpoint from "./scrollpoint.js";
-export * as print from "./print.js";
-export * as printDetails from "./print-details.js";
-export * as scrollSlider from "./scroll-slider.js";
-export * as themeToggle from "./theme-toggle.js";
-export * as detailsGroup from "./details-group.js";
-declare namespace ___Users_joe_Projects_Personal_Github_frontend_js_ui_index_ { }
-//# sourceMappingURL=index.d.ts.map