@ulu/frontend 0.1.0-beta.11 → 0.1.0-beta.111

package/scss/helpers/_display.scss

@@ -20,53 +20,50 @@
 
   @include utils.file-header('helpers', 'display');
 
-  $hiddenVisuallyPrefix: selector.class("hidden-visually");
+  $prefix-hidden-visually: selector.class("hidden-visually");
+  $prefix-display: selector.class("display");
+  $prefix-hidden: selector.class("hidden");
 
-  #{ $hiddenVisuallyPrefix } {
+  #{ $prefix-hidden-visually } {
     @include element.hidden-visually();
   }
-  #{ $hiddenVisuallyPrefix }-focusable {
+  #{ $prefix-hidden-visually }-focusable {
     &:not(:active):not(:focus) {
       @include element.hidden-visually();
     }
   }
-  // Consider removing
-  .clearfix,
-  .cf { 
-    @include layout.clearfix();
-  }
-  .display-block {
+  #{ $prefix-display }-block {
     display: block;
   }
-  .display-flex {
+  #{ $prefix-display }-flex {
     display: flex;
   }
-  .display-inline-flex {
+  #{ $prefix-display }-inline-flex {
     display: inline-flex;
   }
-  .display-inline {
+  #{ $prefix-display }-inline {
     display: inline;
   }
-  .display-inline-all * {
+  #{ $prefix-display }-inline-all * {
     display: inline;
   }
-  .display-inline-block {
+  #{ $prefix-display }-inline-block {
     display: inline-block;
   }
-  .hidden,
-  .display-none {
+  #{ $prefix-hidden },
+  #{ $prefix-display }-none {
     display: none !important;
   }
 
   // Display none per breakpoint
   @each $name in map.keys(breakpoint.$sizes) {
     @include breakpoint.min($name) {
-      .hidden-min-#{ $name } {
+      #{ $prefix-hidden }-min-#{ $name } {
         display: none !important;
       }
     }
     @include breakpoint.max($name) {
-      .hidden-max-#{ $name } {
+      #{ $prefix-hidden }-max-#{ $name } {
         display: none !important;
       }
     }

package/scss/helpers/_print.scss

@@ -8,18 +8,23 @@
 /// @example scss
 ///  @include ulu.helper-print-styles();
 
+@use "../selector";
+
 @mixin styles {
+  $prefix-print: selector.class("print");
+  $prefix-no-print: selector.class("no-print");
   
-  .print-exact {
-    print-color-adjust: exact;
-    -webkit-print-color-adjust: exact;
-  }
-  .no-print {
+  #{ $prefix-no-print } {
     @media print {
       display: none !important;
     }
   }
-  .print-only {
+
+  #{ $prefix-print }-exact {
+    print-color-adjust: exact;
+    -webkit-print-color-adjust: exact;
+  }
+  #{ $prefix-print }-only {
     @media screen {
       display: none !important;
     }
@@ -27,7 +32,7 @@
   // Utility for making dark backgrounds print "ok"
   // - Grayscale added because colors are flipped
   // - Rotating colors doesn't really work
-  .print-invert {
+  #{ $prefix-print }-invert {
     @media print {
       filter: invert(1) saturate(0);
     }

package/scss/helpers/_utilities.scss

@@ -5,6 +5,8 @@
 
 @use "../utils";
 @use "../layout";
+@use "../selector";
+@use "../typography";
 
 /// Print utilities helper styles
 /// - Includes classes like (.crop-margins, .no-scroll-y, .image-full-width, etc)
@@ -13,102 +15,122 @@
 
 @mixin styles {
 
+  $prefix-no-scroll: selector.class("no-scroll");
+  $prefix-image: selector.class("image");
+  $prefix-margin: selector.class("margin");
+  $prefix-no-margin: selector.class("no-margin");
+  $prefix-crop-margins: selector.class("crop-margins");
+  $prefix-no-padding: selector.class("no-padding");
+  $prefix-align-self: selector.class("align-self");
+
+
   @include utils.file-header('helpers', 'utilities');
   
   // Consider removing
-  .no-scroll-y { 
+  #{ $prefix-no-scroll }-y { 
     overflow-y: hidden; 
   }
-  .no-scroll-x { 
+  #{ $prefix-no-scroll }-x { 
     overflow-x: hidden; 
   }
-  .full-height {
+  #{ selector.class("full-height") } {
     height: 100%;
   }
-  .full-width {
+  #{ selector.class("full-width") } {
     width: 100%;
   }
-  .flex-basis-full {
+  #{ selector.class("flex-basis-full") } {
     flex-basis: 100%;
   }
-  .full-min-height {
+  #{ selector.class("flex-grow") } {
+    flex-grow: 1;
+  }
+  #{ selector.class("flex-shrink") } {
+    flex-shrink: 1;
+  }
+  #{ selector.class("full-min-height") } {
     min-height: 100%;
   }
-  .image-fill {
+  #{ $prefix-image }-fill {
     width: 100%;
     height: 100%;
     object-fit: cover;
   }
-  .image-full-width img,
-  .image-full-width {
+  #{ $prefix-image }-full-width img,
+  #{ $prefix-image }-full-width {
     width: 100%;
     height: auto;
   }
-  .margin-auto,
-  .center {
+  #{ $prefix-margin }-auto,
+  #{ selector.class("center") } {
     margin-left: auto;
     margin-right: auto;
   }
-  .margin-left-auto {
+  #{ $prefix-margin }-left-auto {
     margin-left: auto;
   }
-  .margin-right-auto {
+  #{ $prefix-margin }-right-auto {
     margin-right: auto;
   }
-  .no-margin {
+  #{ $prefix-no-margin } {
     margin: 0;
   }
-  .no-margin-top {
+  #{ $prefix-no-margin }-top {
     margin-top: 0;
   }
-  .no-margin-bottom {
+  #{ $prefix-no-margin }-bottom {
     margin-bottom: 0;
   }
-  .no-margin-left {
+  #{ $prefix-no-margin }-left {
     margin-left: 0;
   }
-  .no-margin-right {
+  #{ $prefix-no-margin }-right {
     margin-right: 0;
   }
-  .crop-margins {
-    &:not(.crop-margins--last) >:first-child {
+  #{ $prefix-crop-margins } {
+    &:not( #{ $prefix-crop-margins }--last) >:first-child {
       margin-top: 0;
     }
-    &:not(.crop-margins--first) >:last-child {
+    &:not( #{ $prefix-crop-margins }--first) >:last-child {
       margin-bottom: 0;
     }
   }
-  .no-padding {
+  #{ $prefix-no-padding } {
     padding: 0;
   }
-  .no-padding-top {
+  #{ $prefix-no-padding }-top {
     padding-top: 0;
   }
-  .no-padding-bottom {
+  #{ $prefix-no-padding }-bottom {
     padding-bottom: 0;
   }
-  .no-padding-left {
+  #{ $prefix-no-padding }-left {
     padding-left: 0;
   }
-  .no-padding-right {
+  #{ $prefix-no-padding }-right {
     padding-right: 0;
   }
-  .align-self-start {
+  #{ $prefix-align-self }-start {
     align-self: start;
   }
-  .align-self-center {
+  #{ $prefix-align-self }-center {
     align-self: center;
   }
-  .align-self-end {
+  #{ $prefix-align-self }-end {
     align-self: end;
   }
-  .align-self-baseline {
+  #{ $prefix-align-self }-baseline {
     align-self: baseline;
   }
-  .overflow-hidden {
+  #{ selector.class("overflow-hidden") } {
     overflow: hidden;
   }
-  // .justify-self-center {
-  //   justify-self: center;
-  // }
+  #{ selector.class("flow-inline") } {
+    &:not(:first-child) {
+      margin-left: typography.get("space-size");
+    }
+    &:not(:last-child) {
+      margin-right: typography.get("space-size");
+    }
+  }
 }

package/types/events/index.d.ts

@@ -1,5 +1,6 @@
 /**
- * Triggers one of our custom events
+ * 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
@@ -10,8 +11,16 @@
 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 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../js/events/index.js"],"names":[],"mappings":"AA6CA;;;;;;;;GAQG;AACH,gDANW,IAAI,QAYd;AAED;;;;GAIG;AACH,8CAEC"}
+{"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,3 +1,4 @@
+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";

package/types/settings.d.ts

@@ -0,0 +1,70 @@
+/**
+ * Retrieves a copy of the default settings.
+ * @returns {object} A copy of the default settings object.
+ */
+export function getDefaultSettings(): object;
+/**
+ * Updates multiple configuration settings.
+ * @param {object} changes An object containing the settings to update.
+ */
+export function updateSettings(changes: object): void;
+/**
+ * Retrieves a copy of the current configuration settings.
+ * @returns {object} A copy of the current settings object.
+ */
+export function getSettings(): object;
+/**
+ * Retrieves a specific configuration setting by key.
+ * @param {string} key The key of the setting to retrieve.
+ * @returns {*} The value of the setting, or undefined if not found.
+ */
+export function getSetting(key: string): any;
+/**
+ * Updates a specific configuration setting.
+ * @param {string} key The key of the setting to update.
+ * @param {*} value The new value for the setting.
+ */
+export function updateSetting(key: string, value: any): void;
+/**
+ * Creates a wrapped string representation of a configuration setting.
+ * This function returns an object with a `toString()` method that, when called,
+ * 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.
+ * @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, 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 dragging in both directions
+     */
+    iconClassDragBoth: 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

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

@@ -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,eA6CC;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"}

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

@@ -0,0 +1,38 @@
+/**
+ * Initialize everything in document
+ * - This will only initialize elements once, it is safe to call on page changes
+ */
+export function init(): void;
+/**
+ * @typedef {Object} DetailsGroupInstance
+ * @property {Function} destroy A function to remove event listeners and attributes.
+ * @property {HTMLElement} element The parent element.
+ * @property {Function} setupChildren A function to initialize the child details elements.
+ */
+/**
+ * Sets up a single group of details elements to manage their behavior.
+ * @param {HTMLElement} element - The parent element containing the details elements.
+ * @param {Object} options - The options for this group
+ * @returns {DetailsGroupInstance}
+ */
+export function setupGroup(element: HTMLElement, userOptions: any): DetailsGroupInstance;
+/**
+ * Dialog Component Initializer
+ */
+export const initializer: ComponentInitializer;
+export type DetailsGroupInstance = {
+    /**
+     * A function to remove event listeners and attributes.
+     */
+    destroy: Function;
+    /**
+     * The parent element.
+     */
+    element: HTMLElement;
+    /**
+     * A function to initialize the child details elements.
+     */
+    setupChildren: Function;
+};
+import { ComponentInitializer } from "../utils/system.js";
+//# sourceMappingURL=details-group.d.ts.map

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

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

@@ -1,5 +1,5 @@
 /**
- * @param {Object} options Change options used as default for dialogs, can then be overriden by data attribute settings on element
+ * @param {Object} options Change options used as default for dialogs, can then be overridden by data attribute settings on element
  */
 export function setDefaults(options: any): void;
 /**
@@ -7,36 +7,42 @@ export function setDefaults(options: any): void;
  * - This will only initialize elements once, it is safe to call on page changes
  */
 export function init(): void;
-/**
- * Setup dialogs and triggers
- */
-export function setup(): void;
 /**
  * Setup click handlers on a trigger
- * @param {Node} trigger
+ * @param {Node} trigger Trigger button element
+ * @param {String} dialogId The dialog's id to open
  */
-export function setupTrigger(trigger: Node): void;
+export function setupTrigger(trigger: Node, dialogId: string): void;
 /**
  * Setup click handlers for a dialog
  * @param {Node} dialog
  */
-export function setupDialog(dialog: Node): void;
+export function setupDialog(dialog: Node, userOptions: any): void;
 /**
  * For a given dialog, get it's options (from data attribute)
  * @param {Node} dialog
  * @returns {Object}
  */
 export function getDialogOptions(dialog: Node): any;
-export namespace attrs {
-    let init: string;
-    let dialog: string;
-    let trigger: string;
-    let close: string;
-}
+/**
+ * Base attribute for a dialog
+ */
+export const baseAttribute: "data-ulu-dialog";
+/**
+ * Dialog Component Initializer
+ */
+export const initializer: ComponentInitializer;
+/**
+ * Attribute for close buttons within a dialog
+ */
+export const closeAttribute: string;
 export namespace defaults {
     let nonModal: boolean;
     let documentEnd: boolean;
     let clickOutsideCloses: boolean;
     let pauseVideos: boolean;
+    let preventScroll: boolean;
+    let preventScrollShift: boolean;
 }
+import { ComponentInitializer } from "../utils/system.js";
 //# sourceMappingURL=dialog.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../js/ui/dialog.js"],"names":[],"mappings":"AAkDA;;GAEG;AACH,gDAEC;AAED;;;GAGG;AACH,6BAGC;AAED;;GAEG;AACH,8BAOC;AAED;;;GAGG;AACH,sCAFW,IAAI,QAoBd;AAED;;;GAGG;AACH,oCAFW,IAAI,QA0Bd;AAED;;;;GAIG;AACH,yCAHW,IAAI,OAMd"}
+{"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

@@ -1,7 +1,19 @@
+/**
+ * Initialize flipcards using data-ulu-flipcard attribute
+ */
 export function init(): void;
-export function setup(): void;
+/**
+ * Flipcard Component Initializer
+ */
+export const initializer: ComponentInitializer;
+/**
+ * Flipcard class (creates flipcard instance and behaviors)
+ */
 export class Flipcard {
     static instances: any[];
+    /**
+     * Default options for Flipcard
+     */
     static defaults: {
         namespace: string;
         proxyClick: {
@@ -10,9 +22,8 @@ export class Flipcard {
             exclude: string;
         };
     };
-    constructor(container: any, front: any, back: any, config: any, debug?: boolean);
+    constructor(container: any, front: any, back: any, config: any);
     options: any;
-    debug: boolean;
     elements: {
         container: any;
         front: any;
@@ -32,14 +43,9 @@ export class Flipcard {
     }): void;
     getClass(child: any): any;
     createControlContent(): string;
-    setVisiblity(visible: any): void;
+    setVisibility(visible: any): void;
     containerCss(): string;
     panelCss(zIndex?: number): string;
 }
-export namespace attrs {
-    let init: string;
-    let flipcard: string;
-    let front: string;
-    let back: string;
-}
+import { ComponentInitializer } from "../utils/system.js";
 //# sourceMappingURL=flipcard.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"flipcard.d.ts","sourceRoot":"","sources":["../../js/ui/flipcard.js"],"names":[],"mappings":"AAmJA,6BAGC;AAED,8BAGC;AAjJD;IACE,wBAAsB;IACtB;;;;;;;MAOE;IACF,iFAgBC;IAZC,aAA2D;IAI3D,eAA+B;IAC/B;;;;MAA0C;IAC1C,gBAAmB;IACnB,YAA6D;IAC7D,kBAA0D;IAK5D,eAEC;IACD,cAqCC;IACD;;;OAGG;IACH;;aAQC;IACD,0BAGC;IACD,+BAIC;IACD,iCASC;IACD,uBAWC;IACD,kCAKC;CACF"}
+{"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

@@ -1,13 +1,11 @@
 /**
  * Sets up document for grid position classes
- * @param {String} selector The selector for the parent element
  * @param {Object} classes Classes (optional) @see setPositionClasses
  */
-export function init(selector: string, classes: any): void;
+export function init(classes: any): void;
 /**
- * Goes through document and finds elements that need to have positioning classes
- * @param {String} selector The selector for the parent element
- * @param {Object} classes Classes (optional) @see setPositionClasses
+ * Dialog Component Initializer
  */
-export function setup(selector: string, classes: any): void;
+export const initializer: ComponentInitializer;
+import { ComponentInitializer } from "../utils/system.js";
 //# sourceMappingURL=grid.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../js/ui/grid.js"],"names":[],"mappings":"AAOA;;;;GAIG;AACH,2DAIC;AAED;;;;GAIG;AACH,4DAEC"}
+{"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

@@ -19,5 +19,6 @@ 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_joescherben_Personal_Projects_ULU_frontend_js_ui_index_ { }
 //# sourceMappingURL=index.d.ts.map