@ulu/frontend 0.1.0-beta.2 → 0.1.0-beta.20

package/scss/components/_slider.scss

@@ -37,17 +37,17 @@ $config: (
   "margin-bottom" : 3rem,
   "margin-top" : 1rem,
   "button-icon-offset-x" : 2rem,
-  "button-icon-offset-y" : false,
+  "button-icon-offset-y" : null,
   "button-margin" : 2rem,
   "button-size" : 3rem,
   "button-height": 2.5rem,
   "button-width": 2.5rem,
   "dot-background-color" : transparent,
-  "dot-background-color-hover" : color.get("link"),
-  "dot-background-color-selected" : color.get("link"),
-  "dot-border-color" : color.get("link"),
-  "dot-border-color-hover" : color.get("link"),
-  "dot-border-color-selected" : color.get("link"),
+  "dot-background-color-hover" : "link",
+  "dot-background-color-selected" : "link",
+  "dot-border-color" : "link",
+  "dot-border-color-hover" : "link",
+  "dot-border-color-selected" : "link",
   "dot-border-radius" : 50%,
   "dot-border-width" : 2px,
   "dot-size" :  1rem,
@@ -83,7 +83,7 @@ $config: (
   $slide-padding-x: get("button-width") + get("button-margin");
   #{ $prefix } {
     position: relative; // for controls
-    background-color: get("background-color");
+    background-color: color.get(get("background-color"));
     margin: get("margin-top") 0 get("margin-bottom") 0;
   }
   #{ $prefix }__track,
@@ -97,11 +97,7 @@ $config: (
     top: 50%;
     transform: translateY(-50%);
     z-index: 10;
-  }
-  @if get("button-icon-offset-y") {
-    #{ $prefix-plugin }__control-icon {
-      margin-top: get("button-icon-offset-y");
-    }
+    margin-top: get("button-icon-offset-y");
   }
   #{ $prefix-plugin }__nav {
     display: flex;
@@ -114,17 +110,17 @@ $config: (
     display: block;
     width: get("dot-size");
     height: get("dot-size");
-    background-color: get("dot-background-color");
-    border: get("dot-border-width") solid get("dot-border-color");
+    background-color: color.get(get("dot-background-color"));
+    border: get("dot-border-width") solid color.get(get("dot-border-color"));
     border-radius: get("dot-border-radius");
     &:hover {
-      background-color: get("dot-background-color-hover");
+      background-color: color.get(get("dot-background-color-hover"));
     }
   }
   #{ $prefix-plugin }__nav-button--active,
   #{ $prefix-plugin }__nav-button--active:hover {
-    background-color: get("dot-background-color-selected");
-    border-color: get("dot-border-color-selected");
+    background-color: color.get(get("dot-background-color-selected"));
+    border-color: color.get(get("dot-border-color-selected"));
   }
   #{ $prefix-plugin }__control-button,
   #{ $prefix-plugin }__nav-button {
@@ -164,19 +160,11 @@ $config: (
   }
   #{ $prefix-plugin }__control-button--previous {
     left: 0;
-    @if get("button-icon-offset-x")  {
-      #{ $prefix-plugin }__control-icon {
-        margin-left: get("button-icon-offset-x");
-      }
-    }
+    margin-left: get("button-icon-offset-x");
   }
   #{ $prefix-plugin }__control-button--next {
     right: 0;
-    @if get("button-icon-offset-x")  {
-      #{ $prefix-plugin }__control-icon {
-        margin-right: get("button-icon-offset-x");
-      }
-    }
+    margin-right: get("button-icon-offset-x");
   }
   #{ $prefix }--inset-controls {
     #{ $prefix }__slide-gap-for-controls {
@@ -186,20 +174,11 @@ $config: (
     }
     #{ $prefix-plugin }__control-button--previous {
       left: 0;
-      @if get("button-icon-offset-x")  {
-        &#{ $prefix-plugin }__control-icon {
-          margin-left: get("button-icon-offset-x");
-          
-        }
-      }
+      margin-left: get("button-icon-offset-x");
     }
     #{ $prefix-plugin }__control-button--next {
       right: 0;
-      @if get("button-icon-offset-x")  {
-        &#{ $prefix-plugin }__control-icon {
-          margin-right: get("button-icon-offset-x");
-        }
-      }
+      margin-right: get("button-icon-offset-x");
     }
   }
 }

package/scss/components/_tabs.scss

@@ -22,6 +22,10 @@ $-fallbacks: (
   "tab-font-weight" : (
     "function" : meta.get-function("get", false, "typography"),
     "property" : "font-weight-semibold"
+  ),
+  "vertical-breakpoint" : (
+    "function" : meta.get-function("get", false, "breakpoint"),
+    "property" : "default"
   )
 );
 
@@ -47,6 +51,7 @@ $-fallbacks: (
 /// @prop {Dimension} vertical-divider-width [0px] Divider between tabs and panels when vertical
 /// @prop {Dimension} vertical-tab-gap [0.75em] The gap between tabs when vertical
 /// @prop {Boolean} vertical-indicator-left [true] The indicator for selected tab should be on the left when vertical (false will be on right/inside)
+/// @prop {Boolean} vertical-breakpoint [true] Set the breakpoint when the vertical tabs should switch to horizontal (defaults to breakpoint 'default')
 /// @prop {Boolean} horizontal-tab-wrap [false] Set to true to allow line wrapping when the tabs are in horizontal orientation, vertical is always allowed to wrap
 
 $config: (
@@ -70,6 +75,7 @@ $config: (
   "vertical-divider-width" : 0px,
   "vertical-tab-gap" : 0.75em,
   "vertical-indicator-left" : true,
+  "vertical-breakpoint" : true,
   "horizontal-tab-wrap" : false
 ) !default;
 
@@ -110,20 +116,30 @@ $config: (
       display: flex; 
       gap: get("tab-gap");
       overflow-x: auto;
+      border-bottom: get("tablist-divider");
+      border-bottom-width: get("tablist-divider-width");
     }
     [role="tab"] {
       display: block;
       position: relative; 
       cursor: pointer;
+      text-align: center;
       padding: get("tab-padding");
       color: color.get(get("tab-color"));
       font-weight: get("tab-font-weight");
+      @if (not get("horizontal-tab-wrap")) {
+        white-space: nowrap;
+      }
       // Indicator
       &::after {
         content: "";
         position: absolute;
         background-color: color.get(get("indicator-color"));
         opacity: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: get("indicator-size");
       }
       &:hover {
         color: color.get(get("tab-color-hover"));
@@ -131,41 +147,17 @@ $config: (
       &[aria-selected="true"] {
         color: color.get(get("tab-color-selected"));
         background-color: color.get(get("tab-background-color-selected"));
-
-      }
-    }
-
-    // Styling for horizontal tabs
-    &:not(#{ $prefix }--vertical) {
-      [role="tablist"] {
-        border-bottom: get("tablist-divider");
-        border-bottom-width: get("tablist-divider-width");
-      }
-      [role="tab"] {
-        text-align: center;
-        @if (not get("horizontal-tab-wrap")) {
-          white-space: nowrap;
-        }
         &::after {
-          bottom: 0;
-          left: 0;
-          right: 0;
-          height: get("indicator-size");
-        }
-        &[aria-selected="true"] {
-          &::after {
-            opacity: 1;
-          }
+          opacity: 1;
         }
       }
     }
-
     [role="tabpanel"] {
       position: relative;
       z-index: 1;
       padding: get("tabpanel-padding");
       overflow: hidden;
-      background-color: get("tabpanel-background-color");
+      background-color: color.get(get("tabpanel-background-color"));
     }
   }
   // For images, etc that should fill tabpanel
@@ -182,36 +174,34 @@ $config: (
     }
   }
 
-  #{ $prefix }--vertical {
-    display: grid;
-    grid-template-columns: get("vertical-tablist-width") auto; 
-    [role="tablist"] {
-      flex-direction: column;
-      gap: get("vertical-tab-gap");
-      border-right: get("tablist-divider");
-      border-right-width: get("vertical-divider-width");
-      grid-column: 1;
-    }
-    [role="tab"] {
-      padding: get("vertical-tab-padding");
-      &::after {
-        @if (get("vertical-indicator-left")) {
-          left: 0;
-        } @else {
-          right: 0;
-        }
-        bottom: 0;
-        top: 0;
-        width: get("indicator-size");
+  @include breakpoint.min(get("vertical-breakpoint")) {
+    #{ $prefix }--vertical {
+      display: grid;
+      grid-template-columns: get("vertical-tablist-width") auto; 
+      [role="tablist"] {
+        flex-direction: column;
+        gap: get("vertical-tab-gap");
+        border-right: get("tablist-divider");
+        border-right-width: get("vertical-divider-width");
+        border-bottom: none;
+        grid-column: 1;
       }
-      &[aria-selected="true"] {
+      [role="tab"] {
+        padding: get("vertical-tab-padding");
+        white-space: normal;
+        text-align: left;
         &::after {
-          opacity: 1;
+          left: if(get("vertical-indicator-left"), 0, auto);
+          right: if(not get("vertical-indicator-left"), 0, auto);;
+          bottom: 0;
+          top: 0;
+          width: get("indicator-size");
+          height: auto;
         }
       }
-    }
-    [role="tabpanel"] {
-      grid-column: 2; // needed for equalHeights in vertical
+      [role="tabpanel"] {
+        grid-column: 2; // needed for equalHeights in vertical
+      }
     }
   }
 

package/scss/components/_tag.scss

@@ -144,7 +144,7 @@ $styles: (
       border: map.get($style, "border"); 
       border-radius: map.get($style, "border-radius"); 
       border-color: color.get(map.get($style, "border-color")); 
-      border-width: color.get(map.get($style, "border-width")); 
+      border-width: map.get($style, "border-width"); 
       box-shadow: map.get($style, "box-shadow"); 
       padding: map.get($style, "padding");  
       @if (typography.has-size($type-size)) {

package/scss/components/_vignette.scss

@@ -12,6 +12,7 @@
 /// Module Settings
 /// @type Map
 /// @prop {Color} background-color [rgb(0,0,0)] Color used for the fade-in of the vignette. Must be actual color not color module palette name
+/// @prop {CssValue} image-filter [saturate(85%)] Filter value placed over image.
 
 $config: (
   "background-color" : rgb(0,0,0),

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,38 @@
+/**
+ * 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.
+ * @returns {object} An object with a `toString()` method that returns the setting value.
+ */
+export function wrapSettingString(key: string): object;
+//# 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":"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"}

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

@@ -0,0 +1,43 @@
+/**
+ * Initialize everything in document
+ * - This will only initialize elements once, it is safe to call on page changes
+ */
+export function init(): void;
+/**
+ * Setup all dialog groups within context
+ * @param {HTMLElement} context [document] Element to query within
+ * @returns {Array} Array matching the groups queried with their return objects from setupGroup() [used for destroy/etc]
+ */
+export function setup(context?: HTMLElement): any[];
+/**
+ * @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.
+ * @returns {DetailsGroupInstance}
+ */
+export function setupGroup(element: HTMLElement): DetailsGroupInstance;
+export namespace attrs {
+    let init: string;
+    let childInit: string;
+    let group: string;
+}
+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;
+};
+//# 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":"AAuBA;;;GAGG;AACH,6BAGC;AAED;;;;GAIG;AACH,gCAHW,WAAW,SAYrB;AAED;;;;;GAKG;AAEH;;;;GAIG;AACH,oCAHW,WAAW,GACT,oBAAoB,CA8DhC;;;;;;;;;;;;;;aArEa,WAAW"}

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

package/types/ui/modal-builder.d.ts

@@ -38,8 +38,8 @@ export namespace defaults {
     export let noMinHeight: boolean;
     let _class: string;
     export { _class as class };
-    export let classCloseIcon: string;
-    export let classResizerIcon: string;
+    export let classCloseIcon: any;
+    export let classResizerIcon: any;
     export let debug: boolean;
     export function templateCloseIcon(config: any): string;
     export function templateResizerIcon(config: any): string;

package/types/ui/modal-builder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal-builder.d.ts","sourceRoot":"","sources":["../../js/ui/modal-builder.js"],"names":[],"mappings":"AA+FA;;GAEG;AACH,gDAEC;AAED;;;GAGG;AACH,6BAGC;AAED;;GAEG;AACH,8BAGC;AAED;;;GAGG;AACH,sCAFW,IAAI,QAMd;AAED;;;;GAIG;AACH,oCAHW,IAAI;;EAmDd;;;;;;;;;;;;;;;;;;IA5IC,uDAEC;IACD,yDAEC;IACD;;;;;OAKG;IACH,0DAmCC"}
+{"version":3,"file":"modal-builder.d.ts","sourceRoot":"","sources":["../../js/ui/modal-builder.js"],"names":[],"mappings":"AAgGA;;GAEG;AACH,gDAEC;AAED;;;GAGG;AACH,6BAGC;AAED;;GAEG;AACH,8BAGC;AAED;;;GAGG;AACH,sCAFW,IAAI,QAMd;AAED;;;;GAIG;AACH,oCAHW,IAAI;;EAmDd;;;;;;;;;;;;;;;;;;IA5IC,uDAEC;IACD,yDAEC;IACD;;;;;OAKG;IACH,0DAmCC"}

package/types/ui/overflow-scroller.d.ts

@@ -8,8 +8,8 @@ export class OverflowScroller {
         offsetEnd: number;
         amount: string;
         buttonClasses: string[];
-        iconClassesPrevious: string[];
-        iconClassesNext: string[];
+        iconClassPrevious: any;
+        iconClassNext: any;
     };
     constructor(elements: any, config: any);
     options: any;

package/types/ui/overflow-scroller.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"overflow-scroller.d.ts","sourceRoot":"","sources":["../../js/ui/overflow-scroller.js"],"names":[],"mappings":"AAkBA;IACE,wBAAsB;IACtB;;;;;;;;;;MAUC;IACD,wCAeC;IAdC,aAAmE;IAInE,cAGC;IACD,qBAAuB;IACvB,yBAA2B;IAC3B,gCAA4C;IAK9C,sBAGC;IADC,qBAAwD;IAE1D;;;;;;MA2BC;IACD,oDAQC;IACD,uCAMC;IACD,2BAGC;IACD,2BAiBC;IACD,8CAeC;IACD,6BAaC;IACD,aAMC;IACD,iBAMC;IACD,6BAGC;CACF"}
+{"version":3,"file":"overflow-scroller.d.ts","sourceRoot":"","sources":["../../js/ui/overflow-scroller.js"],"names":[],"mappings":"AAmBA;IACE,wBAAsB;IACtB;;;;;;;;;;MAUC;IACD,wCAeC;IAdC,aAAmE;IAInE,cAGC;IACD,qBAAuB;IACvB,yBAA2B;IAC3B,gCAA4C;IAK9C,sBAGC;IADC,qBAAwD;IAE1D;;;;;;MA2BC;IACD,oDAQC;IACD,uCAMC;IACD,2BAGC;IACD,2BAiBC;IACD,8CAeC;IACD,6BAaC;IACD,aAMC;IACD,iBAMC;IACD,6BAGC;CACF"}

package/types/ui/programmatic-modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"programmatic-modal.d.ts","sourceRoot":"","sources":["../../js/ui/programmatic-modal.js"],"names":[],"mappings":"AASA;IACE;;;MAGE;IACF,gCAeC;IAbC,aAAsB;IACtB,cAAoB;IACpB,mBAAyB;IAEzB,qCAGC;IACD,2BAEC;IAIH,sBAMC;IACD,gBAMC;IACD;;;;MA6CC;CACF"}
+{"version":3,"file":"programmatic-modal.d.ts","sourceRoot":"","sources":["../../js/ui/programmatic-modal.js"],"names":[],"mappings":"AAUA;IACE;;;MAGE;IACF,gCAeC;IAbC,aAAsB;IACtB,cAAoB;IACpB,mBAAyB;IAEzB,qCAGC;IACD,2BAEC;IAIH,sBAMC;IACD,gBAMC;IACD;;;;MAkDC;CACF"}

package/types/ui/slider.d.ts

@@ -20,8 +20,8 @@ export class Slider {
         transitionDurationExit: number;
         transitionTimingFunction: string;
         buttonClasses: string[];
-        iconClassesPrevious: string[];
-        iconClassesNext: string[];
+        iconClassPrevious: any;
+        iconClassNext: any;
     };
     constructor(elements: any, config: any, debug?: boolean);
     debug: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../js/ui/slider.js"],"names":[],"mappings":"AA8EA,6BAGC;AAED,8BAGC;AAED,kDAqBC;;;;;;;;AAED;IACE,wBAAsB;IACtB;;;;;;;;;;;;MAaC;IAED,yDAiCC;IA/BC,eAA+B;IAC/B,aAAsB;IACtB;;;;MAAiB;IACjB,WAAiB;IACjB,uBAA0B;IAQ1B;;;;QAME;IACF,cAIC;IAED;;;cACuF;IAMzF;;OAEG;IACH,qBAKC;IACD;;OAEG;IACH,2BAOC;IACD;;OAEG;IACH,uBAMC;IACD;;;;;;OAMG;IACH,8BAJW,MAAM,YACN,MAAM,kCAqChB;IACD;;OAEG;IACH,wCASC;IACD;;;OAGG;IACH,oDASC;IACD;;OAEG;IACH,yCAOC;IACD;;OAEG;IACH;;;;;;sBAoDC;IACD;;OAEG;IACH;;;sBAUC;IACD;;OAEG;IACH;;;YAOC;IACD,qDA0CC;IACD,cAYC;IACD,+BAKC;IACD,qCAOC;IACD,mBAQC;IACD,mBASC;IACD,yCASC;IACD,oDASC;IACD;;;;;;MAwBC;IACD;;;;MAmBC;IACD,2DAQC;IAED,uCAMC;IACD,mCAEC;IACD,iCAIC;CACF"}
+{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../js/ui/slider.js"],"names":[],"mappings":"AA+EA,6BAGC;AAED,8BAGC;AAED,kDAqBC;;;;;;;;AAED;IACE,wBAAsB;IACtB;;;;;;;;;;;;MAaC;IAED,yDAiCC;IA/BC,eAA+B;IAC/B,aAAsB;IACtB;;;;MAAiB;IACjB,WAAiB;IACjB,uBAA0B;IAQ1B;;;;QAME;IACF,cAIC;IAED;;;cACuF;IAMzF;;OAEG;IACH,qBAKC;IACD;;OAEG;IACH,2BAOC;IACD;;OAEG;IACH,uBAMC;IACD;;;;;;OAMG;IACH,8BAJW,MAAM,YACN,MAAM,kCAqChB;IACD;;OAEG;IACH,wCASC;IACD;;;OAGG;IACH,oDASC;IACD;;OAEG;IACH,yCAOC;IACD;;OAEG;IACH;;;;;;sBAoDC;IACD;;OAEG;IACH;;;sBAUC;IACD;;OAEG;IACH;;;YAOC;IACD,qDA0CC;IACD,cAYC;IACD,+BAKC;IACD,qCAOC;IACD,mBAQC;IACD,mBASC;IACD,yCASC;IACD,oDAUC;IACD;;;;;;MAwBC;IACD;;;;MAmBC;IACD,2DAQC;IACD,uCAMC;IACD,mCAEC;IACD,iCAIC;CACF"}

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

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../js/ui/tabs.js"],"names":[],"mappings":"AAeA;;;GAGG;AACH,0CAcC;AAED;;;;GAIG;AACH,oCAHW,IAAI,uBAUd;AAED;;;;;GAKG;AACH,+BAJW,IAAI,YACJ,IAAI,OAuCd;AAlFD;;;GAGG;AACH,8BAA4B"}
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../js/ui/tabs.js"],"names":[],"mappings":"AAqBA;;;GAGG;AACH,0CAcC;AAED;;;;GAIG;AACH,oCAHW,IAAI,uBAUd;AAED;;;;;GAKG;AACH,+BAJW,IAAI,YACJ,IAAI,OAuCd;AAlFD;;;GAGG;AACH,8BAA4B"}

package/types/ui/theme-toggle.d.ts

@@ -1,14 +1,65 @@
+/**
+ * @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;
 /**
  * Initialize everything in document
  * - This will only initialize elements once, it is safe to call on page changes
  */
 export function init(): void;
-export function setup(context?: Document): void;
-export namespace options {
-    let darkTheme: string;
-    let lightTheme: string;
-    let defaultTheme: string;
-    let darkIcon: string;
-    let lightIcon: string;
+/**
+ * Query and setup all
+ */
+export function setup(): void;
+/**
+ * Sets up a single toggle
+ * @param {HTMLElement} toggle A toggle to be setup
+ */
+export function setupToggle(toggle: HTMLElement, passedOptions: any): {
+    destroy: () => void;
+    toggle: HTMLElement;
+    options: any;
+    toggleState: (event: any) => void;
+    setState(themeKey: any): void;
+};
+export namespace attrs {
+    let init: string;
+    let toggle: string;
+    let toggleIcon: string;
+    let toggleLabel: string;
+    let toggleRemote: string;
+    let state: string;
+}
+export namespace defaults {
+    namespace themes {
+        namespace light {
+            let label: string;
+            let value: string;
+            let iconClass: string;
+            let targetClass: string;
+            let mediaQuery: string;
+        }
+        namespace dark {
+            let label_1: string;
+            export { label_1 as label };
+            let iconClass_1: string;
+            export { iconClass_1 as iconClass };
+            let targetClass_1: string;
+            export { targetClass_1 as targetClass };
+            let mediaQuery_1: string;
+            export { mediaQuery_1 as mediaQuery };
+        }
+    }
+    let target: string;
+    let group: any;
+    /**
+     * Optional callback to do something when the state changes
+     */
+    function onChange(_ctx: any): void;
+    let initialState: string;
+    let checkMediaQuery: boolean;
+    let savePreference: boolean;
+    let storagePrefix: string;
+    let debug: boolean;
 }
 //# sourceMappingURL=theme-toggle.d.ts.map

package/types/ui/theme-toggle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme-toggle.d.ts","sourceRoot":"","sources":["../../js/ui/theme-toggle.js"],"names":[],"mappings":"AA6BA;;;GAGG;AACH,6BAOC;AAED,gDAeC"}
+{"version":3,"file":"theme-toggle.d.ts","sourceRoot":"","sources":["../../js/ui/theme-toggle.js"],"names":[],"mappings":"AAmGA;;GAEG;AACH,gDAEC;AAED;;;GAGG;AACH,6BAGC;AAED;;GAEG;AACH,8BAEC;AAED;;;GAGG;AACH,oCAFW,WAAW;;;;;;EAiGrB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA1JC;;OAEG;IACH,mCAAiB"}

package/types/utils/dom.d.ts

@@ -32,8 +32,26 @@ export function setPositionClasses(parent: Node, classes?: any): void;
  * Resolve a target to Element
  * @param {String|Node} target The selector or node/element
  * @param {Object} context [document] The context to query possible selectors from
+ * @return {HTMLElement} The element or null if not found
  */
-export function getElement(target: string | Node, context?: any): any;
+export function getElement(target: string | Node, context?: any): HTMLElement;
+/**
+ * Resolve a target to Elements
+ * @param {String|Node} target The selector or node/element
+ * @param {Object} context [document] The context to query possible selectors from
+ * @return {Array} The elements or null if not found
+ */
+export function getElements(target: string | Node, context?: any): any[];
+/**
+ * Resolves a class input (string or array) into a consistent array of class names.
+ * @param {string|string[]} input - The class input, which can be a string, an array of strings, or any other value.
+ * @returns {string[]} An array of class names. Returns an empty array for invalid or falsy input.
+ * @example
+ * resolveClassArray("fas fa-check  my-class"); // Returns ["fas", "fa-check", "my-class"]
+ * resolveClassArray(["another-class", "yet-another-class"]); // Returns ["another-class", "yet-another-class"]
+ * resolveClassArray("single-class"); // Returns ["single-class"]
+ */
+export function resolveClasses(classes: any): string[];
 /**
  * Sets a CSS custom property equal to the scrollbar width
  * @param {Node} element The element that is the child of a scrollabel container

package/types/utils/dom.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../../js/utils/dom.js"],"names":[],"mappings":"AAOA;;;;;GAKG;AACH,wCAJW,IAAI,oBAYd;AAED;;;;;;GAMG;AACH,gDAJW,IAAI,gBAEF,YAAa,CASzB;AAED;;GAEG;AACH,mEAMC;AAGD;;;;;;;;;GASG;AACH,2CAHa,IAAI,uBAoChB;AAED;;;;GAIG;AACH,mCAHW,SAAO,IAAI,sBAYrB;AAED;;;;;GAKG;AACH,+CAJW,IAAI,cACJ,IAAI,2BAMd;AAzHD;;GAEG;AAGH,qCAAqD"}
+{"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../../js/utils/dom.js"],"names":[],"mappings":"AAOA;;;;;GAKG;AACH,wCAJW,IAAI,oBAYd;AAED;;;;;;GAMG;AACH,gDAJW,IAAI,gBAEF,YAAa,CASzB;AAED;;GAEG;AACH,mEAMC;AAGD;;;;;;;;;GASG;AACH,2CAHa,IAAI,uBAoChB;AAED;;;;;GAKG;AACH,mCAJW,SAAO,IAAI,kBAEV,WAAW,CAWtB;AAED;;;;;GAKG;AACH,oCAJW,SAAO,IAAI,wBAerB;AAED;;;;;;;;GAQG;AACH,8CANa,MAAM,EAAE,CAiBpB;AAED;;;;;GAKG;AACH,+CAJW,IAAI,cACJ,IAAI,2BAMd;AAnKD;;GAEG;AAGH,qCAAqD"}

package/types/utils/font-awesome.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Sets icon settings to Font Awesome icons
+ */
+export function configureIcons(): void;
+//# sourceMappingURL=font-awesome.d.ts.map

package/types/utils/font-awesome.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"font-awesome.d.ts","sourceRoot":"","sources":["../../js/utils/font-awesome.js"],"names":[],"mappings":"AAOA;;GAEG;AACH,uCAOC"}

package/types/utils/index.d.ts

@@ -5,5 +5,6 @@ export * as id from "./id.js";
 export * as index from "./index.js";
 export * as pauseYoutubeVideo from "./pause-youtube-video.js";
 export * as fileSave from "./file-save.js";
+export * as fontAwesome from "./font-awesome.js";
 declare namespace ___Users_joescherben_Personal_Projects_ULU_frontend_js_utils_index_ { }
 //# sourceMappingURL=index.d.ts.map