@ulu/frontend 0.2.0-beta.6 → 0.2.0-beta.8

package/dist/{types → es}/ui/slider.d.ts

@@ -1,3 +1,4 @@
+import { ComponentInitializer } from '../core/component.js';
 /**
  * Initialize all sliders based on data attribute selectors
  */
@@ -7,7 +8,7 @@ export function init(): void;
  * @param {Node} container The slide container to query children from
  * @param {Object} options Options for slider class
  */
-export function setupSlider(container: Node, options: any): void;
+export function setupSlider(container: Node, options: Object): void;
 /**
  * Slider Component Initializer
  */
@@ -17,6 +18,9 @@ export const initializer: ComponentInitializer;
  */
 export class Slider {
     static instances: any[];
+    static globalsInitialized: boolean;
+    static reduceMotion: boolean;
+    static _initializeGlobals(): void;
     /**
      * Default options for slider
      */
@@ -30,8 +34,8 @@ export class Slider {
         transitionDurationExit: number;
         transitionTimingFunction: string;
         buttonClasses: string[];
-        iconClassPrevious: any;
-        iconClassNext: any;
+        iconClassPrevious: Object;
+        iconClassNext: Object;
         swipeEnabled: boolean;
         swipeOptions: {
             preventScroll: boolean;
@@ -43,11 +47,11 @@ export class Slider {
         element: any;
         index: number;
         number: number;
-    };
+    } | null;
     index: any;
     swipeInstance: any;
-    swipeListener: (event: any) => void;
-    swipeImageListener: (event: any) => void;
+    swipeListener: ((event: any) => void) | null;
+    swipeImageListener: ((event: any) => void) | null;
     transitioning: boolean;
     slides: {
         element: any;
@@ -135,7 +139,7 @@ export class Slider {
     };
     createNav(container: any): {
         nav: HTMLUListElement;
-        navButtons: any[];
+        navButtons: HTMLButtonElement[];
         navItems: HTMLLIElement[];
     };
     createNavButton(slide: any, index: any): HTMLButtonElement;
@@ -143,5 +147,4 @@ export class Slider {
     getNavContent(slide: any): string;
     emit(name: any, args: any): void;
 }
-import { ComponentInitializer } from "../core/component.js";
 //# sourceMappingURL=slider.d.ts.map

package/dist/es/ui/slider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../../lib/js/ui/slider.js"],"names":[],"mappings":"AAiEA;;GAEG;AACH,6BASC;AAED;;;;GAIG;AACH,uCAHW,IAAI,WACJ,MAAM,QAiBhB;AA1DD;;GAEG;AACH,+CAGG;AAsDH;;GAEG;AACH;IACE,wBAAsB;IACtB,mCAAkC;IAClC,6BAA4B;IAE5B,kCAYC;IACD;;OAEG;IACH;;;;;;;;;;;;;;;;MAgBC;IACD,wCAoCC;IAjCC,aAAsB;IACtB;;;;aAAiB;IACjB,WAAiB;IACjB,mBAAyB;IACzB,6CAAyB;IACzB,kDAA8B;IAC9B,uBAA0B;IAQ1B;;;;QAME;IACF,cAIC;IAED;;;wBACgF;IAMlF;;OAEG;IACH,qBAKC;IACD;;OAEG;IACH,2BAOC;IACD;;OAEG;IACH,uBAMC;IACD;;;;;;OAMG;IACH,8BAJW,MAAM,YACN,MAAM,2CAqChB;IACD;;OAEG;IACH,kDASC;IACD;;;OAGG;IACH,oDASC;IACD;;OAEG;IACH,kDAOC;IACD;;OAEG;IACH;;;;;;sBAoDC;IACD;;OAEG;IACH;;;sBAUC;IACD;;OAEG;IACH;;;sBAOC;IACD,qDA0CC;IACD,cAmBC;IACD,mBAsBC;IACD,0BAMC;IACD,+BAKC;IACD,qCAOC;IACD,mBAQC;IACD,mBASC;IACD,yCASC;IACD,oDAUC;IACD;;;;;;MAwBC;IACD;;;;MAmBC;IACD,2DAQC;IACD,uCAMC;IACD,kCAEC;IACD,iCAIC;CACF;qCA1iBoC,sBAAsB"}

package/dist/es/ui/slider.js

@@ -0,0 +1,292 @@
+var T = Object.defineProperty;
+var x = (a, t, s) => t in a ? T(a, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : a[t] = s;
+var m = (a, t, s) => x(a, typeof t != "symbol" ? t + "" : t, s);
+import { ComponentInitializer as S } from "../core/component.js";
+import { wrapSettingString as b } from "../core/settings.js";
+import k from "ally.js/maintain/_maintain";
+import { hasRequiredProps as $ } from "@ulu/utils/object.js";
+import { trimWhitespace as v } from "@ulu/utils/string.js";
+import { debounce as I } from "@ulu/utils/performance.js";
+import { logError as y, log as A, logWarning as L } from "../utils/class-logger.js";
+import z from "swipe-listener";
+const f = new S({
+  type: "slider",
+  baseAttribute: "data-ulu-slider"
+}), D = f.attributeSelector("track"), M = f.attributeSelector("track-container"), B = f.attributeSelector("control-context"), N = f.attributeSelector("slide"), q = [], h = { once: !0 }, E = (a) => `${a}ms`, P = [
+  "container",
+  "trackContainer",
+  "track",
+  "slides"
+];
+function K() {
+  f.init({
+    withData: !0,
+    coreEvents: ["pageModified"],
+    setup({ element: a, data: t, initialize: s }) {
+      V(a, t), s();
+    }
+  });
+}
+function V(a, t) {
+  const s = Object.assign({}, t), e = {
+    container: a,
+    track: a.querySelector(D),
+    trackContainer: a.querySelector(M),
+    controlContext: a.querySelector(B),
+    slides: a.querySelectorAll(N)
+  };
+  e.slides.length && q.push(new g(e, s, !1));
+}
+const l = class l {
+  static _initializeGlobals() {
+    l.globalsInitialized || (addEventListener("load", () => {
+      addEventListener("resize", I(() => {
+        l.instances.forEach((t) => t.handleResize());
+      }, 250));
+    }), l.reduceMotion = matchMedia("(prefers-reduced-motion: reduce)").matches, l.globalsInitialized = !0);
+  }
+  constructor(t, s) {
+    l._initializeGlobals();
+    const e = Object.assign({}, l.defaults, s);
+    this.options = e, this.slide = null, this.index = null, this.swipeInstance = null, this.swipeListener = null, this.swipeImageListener = null, this.transitioning = !1, $(P) || y(this, "Missing a required Element"), t.slides.length || y(this, "Missing slides"), this.slides = [...t.slides].map((i, n) => ({
+      element: i,
+      index: n,
+      number: n + 1
+    })), this.elements = {
+      ...t,
+      ...this.createControls(t.controlContext || t.container),
+      ...this.createNav(t.navContext || t.container)
+    }, this.transition = e.transition ? e.transitionFade || l.reduceMotion ? this.fadeTransition : this.slideTransition : this.noTransition, this.setup(), this.goto(0, null, "init"), A(this, "Slider Instance Created", this), l.instances.push(this);
+  }
+  /**
+   * Sliding mechanism needs translate updated on resize
+   */
+  handleResize() {
+    const { slide: t, transition: s, slideTransition: e } = this;
+    s === e && t && this.translateTo(t.element.offsetLeft, 0);
+  }
+  /**
+   * Goto to the previous slide
+   */
+  previous(t) {
+    const { index: s, slides: e } = this, i = e.length - 1, n = s - 1, o = n < 0 ? i : n;
+    this.emit("previous", [t, o]), this.goto(o, t, "previous");
+  }
+  /**
+   * Goto to the next slide
+   */
+  next(t) {
+    const { index: s, slides: e } = this, i = s + 1, n = i > e.length - 1 ? 0 : i;
+    this.emit("next", [t, n]), this.goto(n, t, "next");
+  }
+  /**
+   *  Makes sure that no matter what the callback is called if transition event
+   * doesn't start or fails to finish/cancel
+   * @param {number} element
+   * @param {number} duration Duration to wait for complete 
+   * @param {Function} beginTransition Css changes to begin/start transtion 
+   */
+  ensureTransitionEnds(t, s, e) {
+    return new Promise((i) => {
+      const n = {}, o = () => {
+        clearTimeout(n.start), n.end = setTimeout(r, s + 500);
+      }, r = () => {
+        clearTimeout(n.start), clearTimeout(n.end), t.removeEventListener("transitionrun", o, h), t.removeEventListener("transitionend", r, h), t.removeEventListener("transitioncancel", r, h), i();
+      };
+      t.addEventListener("transitionrun", o, h), t.addEventListener("transitionend", r, h), t.addEventListener("transitioncancel", r, h), n.start = setTimeout(r, s + 500), t.style.transitionDuration = E(s), e(), s || r();
+    });
+  }
+  /**
+   * Translate the track to X
+   */
+  translateTo(t, s) {
+    const { track: e } = this.elements, i = () => e.style.transform = `translateX(-${t}px)`;
+    return e.style.willChange = "transform", this.ensureTransitionEnds(e, s, i).then(() => {
+      e.style.willChange = "auto";
+    });
+  }
+  /**
+   * Show's a specifc slide and hides others, except when passing true to show all
+   * then all slides will visible
+   */
+  setVisibility(t, s) {
+    s || (t.element.style.visibility = "visible"), this.slides.forEach((e) => {
+      e !== t && (e.element.style.visibility = s ? "visible" : "hidden");
+    });
+  }
+  /**
+   * Perform a fade on a single slide
+   */
+  fadeSlide(t, s) {
+    const { options: e } = this, { element: i } = t, n = s ? e.transitionDuration : e.transitionDurationExit;
+    return this.ensureTransitionEnds(i, n, () => {
+      i.style.opacity = s ? "1" : "0";
+    });
+  }
+  /**
+   * Handler for the entire slide transtion
+   */
+  async slideTransition({ slide: t, index: s, old: e, oldIndex: i, triggerType: n }) {
+    const o = this.slides.length, r = n === "previous", C = o - 1, u = s === 0 && i === C, d = s === C && i === 0;
+    let c, p = this.options.transitionDuration;
+    i && !u && !d && (p = p * Math.abs(i - s)), o < 3 ? u && !r ? c = e : d && (c = r ? t : e) : u ? c = e : d && (c = t), this.setVisibility(null, !0), c && (c.element.style.order = "-1", await this.translateTo(u ? 0 : e.element.offsetLeft, 0)), await this.translateTo(t.element.offsetLeft, p), c && (c.element.style.order = "0", await this.translateTo(t.element.offsetLeft, 0)), this.setVisibility(t, !1);
+  }
+  /**
+   * Handler for the entire fade transtion
+   */
+  async fadeTransition({ slide: t, old: s }) {
+    this.setVisibility(null, !0), s && (await this.fadeSlide(s, !1), s.element.style.order = "0"), t.element.style.order = "-1", await this.fadeSlide(t, !0), this.setVisibility(t, !1);
+  }
+  /**
+   * Handler for the entire NO transtion
+   */
+  noTransition({ slide: t, old: s }) {
+    return this.setVisibility(t, !1), s && (s.element.style.order = "0"), t.element.style.order = "-1", Promise.resolve();
+  }
+  goto(t, s, e) {
+    const {
+      slide: i,
+      index: n,
+      slides: o,
+      elements: r
+    } = this, C = e === "init", u = o[t], d = this.getClass("nav-button--active"), c = this.getClass("transition", !0), p = { slide: u, index: t, old: i, oldIndex: n, triggerType: e };
+    if (t === n) {
+      L(this, "Could not goto slide, still performing transition");
+      return;
+    }
+    if (this.transitioning) {
+      L(this, "Cancel goto(), same slide index as current slide");
+      return;
+    }
+    const w = k.disabled({ context: this.elements.track });
+    this.transitioning = !0, i && i.navButton.classList.remove(d), u.navButton.classList.add(d), r.container.classList.add(c), this.transition(p).then(() => {
+      this.index = t, this.slide = u, this.transitioning = !1, r.container.classList.remove(c), w.disengage(), C || (u.element.focus(), this.emit("goto", [s, t, u]));
+    });
+  }
+  setup() {
+    const { container: t, track: s, trackContainer: e } = this.elements, i = v(this.trackCss()), n = v(this.trackContainerStyles()), o = v(this.slideCss());
+    s.setAttribute("style", i), e.setAttribute("style", n), this.slides.forEach((r) => {
+      r.element.setAttribute("style", o), r.element.setAttribute("tabindex", "-1");
+    }), t.classList.add(this.getClass()), this.options.swipeEnabled && this.setupSwipe();
+  }
+  setupSwipe() {
+    const t = this.elements.track.querySelectorAll("img");
+    this.swipeListener = (s) => {
+      this.onSwipe(s);
+    }, this.swipeImageListener = (s) => {
+      s.preventDefault();
+    }, this.slides.forEach((s) => {
+      const { element: e } = s;
+      s.swipeInstance = z(e, this.options.swipeOptions), e.addEventListener("swipe", this.swipeListener);
+    }), t.forEach((s) => {
+      s.addEventListener("dragstart", this.swipeImageListener);
+    });
+  }
+  onSwipe(t) {
+    const { directions: s } = t.detail, e = s.left ? "next" : s.right ? "previous" : null;
+    e && this[e](t);
+  }
+  trackContainerStyles() {
+    return `
+      overflow: hidden;
+    `;
+  }
+  transitionCss(t) {
+    const { transitionTimingFunction: s, transitionDuration: e } = this.options;
+    return `
+      transition-property: ${t};
+      transition-duration: ${E(e)};
+      transition-timing-function: ${s};
+    `;
+  }
+  trackCss() {
+    return `
+      display: flex;
+      position: relative;
+      list-style: none;
+      ${this.transition === this.slideTransition ? this.transitionCss("transform") : ""}
+    `;
+  }
+  slideCss() {
+    const t = this.transition === this.fadeTransition;
+    return `
+      width: 100%;
+      flex: 0 0 100%;
+      ${t ? this.transitionCss("opacity") : ""}
+      opacity: ${t ? "0" : "1"}
+    `;
+  }
+  getClass(t, s) {
+    const { namespace: e } = this.options;
+    return s ? `${e}--${t}` : t ? `${e}__${t}` : e;
+  }
+  createControlButton(t) {
+    const s = document.createElement("button");
+    return s.classList.add(this.getClass("control-button")), s.classList.add(this.getClass(`control-button--${t}`)), s.classList.add(...this.options.buttonClasses), s.setAttribute("data-slider-control", t), s.setAttribute("type", "button"), s.innerHTML = this.getControlContent(t), s;
+  }
+  createControls(t) {
+    const s = document.createElement("ul"), e = document.createElement("li"), i = document.createElement("li"), n = this.createControlButton("previous"), o = this.createControlButton("next");
+    return s.classList.add(this.getClass("controls")), e.appendChild(n), i.appendChild(o), s.appendChild(e), s.appendChild(i), n.addEventListener("click", this.previous.bind(this)), o.addEventListener("click", this.next.bind(this)), t.appendChild(s), {
+      controls: s,
+      previousItem: e,
+      nextItem: i,
+      previous: n,
+      next: o
+    };
+  }
+  createNav(t) {
+    const s = document.createElement("ul"), e = this.slides.map(this.createNavButton.bind(this)), i = e.map((n) => {
+      const o = document.createElement("li");
+      return o.appendChild(n), s.appendChild(o), o;
+    });
+    return s.classList.add(this.getClass("nav")), t.appendChild(s), {
+      nav: s,
+      navButtons: e,
+      navItems: i
+    };
+  }
+  createNavButton(t, s) {
+    const e = document.createElement("button");
+    return e.classList.add(this.getClass("nav-button")), e.setAttribute("type", "button"), e.innerHTML = this.getNavContent(t), t.navButton = e, e.addEventListener("click", this.goto.bind(this, s)), e;
+  }
+  getControlContent(t) {
+    const s = this.options[t === "next" ? "iconClassNext" : "iconClassPrevious"];
+    return `
+      <span class="${this.options.classAccessiblyHidden}">${t}</span>
+      <span class="${this.getClass("control-icon")} ${s}" aria-hidden="true"></span>
+    `;
+  }
+  getNavContent(t) {
+    return `<span class="${this.options.classAccessiblyHidden}">Item ${t.number}</span>`;
+  }
+  emit(t, s) {
+    this.options.events[t] && this.options.events[t].apply(this, s);
+  }
+};
+m(l, "instances", []), m(l, "globalsInitialized", !1), m(l, "reduceMotion", !1), /**
+ * Default options for slider
+ */
+m(l, "defaults", {
+  classAccessiblyHidden: "hidden-visually",
+  namespace: "Slider",
+  events: {},
+  transition: !0,
+  transitionFade: !1,
+  transitionDuration: 700,
+  transitionDurationExit: 400,
+  transitionTimingFunction: "ease-in-out",
+  buttonClasses: ["button", "button--icon"],
+  iconClassPrevious: b("iconClassPrevious"),
+  iconClassNext: b("iconClassNext"),
+  swipeEnabled: !0,
+  swipeOptions: {
+    preventScroll: !0
+  }
+});
+let g = l;
+export {
+  g as Slider,
+  K as init,
+  f as initializer,
+  V as setupSlider
+};

package/dist/{types → es}/ui/tabs.d.ts

@@ -1,3 +1,4 @@
+import { ComponentInitializer } from '../core/component.js';
 /**
  * Init all instances currently in document
  */
@@ -8,7 +9,7 @@ export function init(): void;
  * @param {Node} options Options to set as defaults (can be overridden by element dataset options)
  * @return {Object} Instance object
  */
-export function setup(element: Node, options?: Node): any;
+export function setup(element: Node, options?: Node): Object;
 /**
  * Array of current tab instances (exported if you need to interact with them)
  * @type {Array}
@@ -18,5 +19,4 @@ export const instances: any[];
  * Tabs Component Initializer
  */
 export const initializer: ComponentInitializer;
-import { ComponentInitializer } from "../core/component.js";
 //# sourceMappingURL=tabs.d.ts.map

package/dist/{types → es}/ui/tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../lib/js/ui/tabs.js"],"names":[],"mappings":"AA2BA;;GAEG;AACH,6BAoBC;AAED;;;;;GAKG;AACH,+BAJW,IAAI,YACJ,IAAI,OA2Bd;AArED;;;GAGG;AACH,8BAA4B;AAE5B;;GAEG;AACH,+CAGG;qCAdkC,sBAAsB"}
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../lib/js/ui/tabs.js"],"names":[],"mappings":"AA2BA;;GAEG;AACH,6BAoBC;AAED;;;;;GAKG;AACH,+BAJW,IAAI,YACJ,IAAI,GACH,MAAM,CA0BjB;AArED;;;GAGG;AACH,8BAA4B;AAE5B;;GAEG;AACH,+CAGG;qCAdkC,sBAAsB"}

package/dist/es/ui/tabs.js

@@ -0,0 +1,64 @@
+import f from "aria-tablist";
+import { ComponentInitializer as u } from "../core/component.js";
+const l = [], p = new u({
+  type: "tabs",
+  baseAttribute: "data-ulu-tablist"
+});
+function E() {
+  const e = () => {
+    p.init({
+      coreEvents: ["pageModified"],
+      withData: !0,
+      setup({ element: n, data: t, initialize: o }) {
+        m(n, t), o();
+      }
+    }), l.forEach(b);
+  };
+  document.readyState === "complete" ? e() : window.addEventListener("load", e);
+}
+function m(e, n = {}) {
+  const t = Object.assign({}, n);
+  t.vertical && (t.allArrows = !0);
+  const o = { element: e, options: n };
+  return o.ariaTablist = f(e, {
+    onOpen(...a) {
+      a.unshift(o), g.apply(null, a);
+    },
+    ...t
+  }), l.push(o), t.equalHeights && w(e), o;
+}
+function b({ options: e, ariaTablist: n }) {
+  if (e.openByUrlHash) {
+    const { hash: t } = window.location;
+    if (t && t.length > 1) {
+      const o = t.substring(1);
+      n.tabs.forEach((a) => {
+        o === a.id && n.open(a);
+      });
+    }
+  }
+}
+function g({ options: e }, n, t) {
+  e.openByUrlHash && window.history && window.history.replaceState(null, "", `#${t.id}`);
+}
+function w(e) {
+  const t = [...e.children].map((i) => document.querySelector(`[aria-labelledby="${i.id}"]`)), h = [...t[0].parentElement.querySelectorAll("img")].map((i) => d(i));
+  function d(i) {
+    return new Promise((r) => {
+      i.complete ? r(i) : (i.onload = r, i.onerror = r);
+    });
+  }
+  Promise.all(h).then(() => {
+    const i = t.map((s) => {
+      let c = s.offsetHeight;
+      return s.hidden && (s.hidden = !1, c = s.offsetHeight, s.setAttribute("hidden", "hidden")), c;
+    }), r = Math.max(...i);
+    t.forEach((s) => s.style.minHeight = `${r}px`);
+  });
+}
+export {
+  E as init,
+  p as initializer,
+  l as instances,
+  m as setup
+};

package/dist/{types → es}/ui/theme-toggle.d.ts

@@ -1,7 +1,8 @@
+import { ComponentInitializer } from '../core/component.js';
 /**
  * @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;
+export function setDefaults(options: Object): void;
 /**
  * Initialize everything in document
  * - This will only initialize elements once, it is safe to call on page changes
@@ -17,7 +18,7 @@ export function setupToggle(toggle: HTMLElement, userOptions: any): {
     options: any;
     toggleState: (event: any) => void;
     setState(themeKey: any): void;
-};
+} | undefined;
 /**
  * Theme Toggle Component Initializer
  */
@@ -43,7 +44,7 @@ export namespace defaults {
         }
     }
     let target: string;
-    let group: any;
+    let group: null;
     /**
      * Optional callback to do something when the state changes
      */
@@ -54,5 +55,4 @@ export namespace defaults {
     let storagePrefix: string;
     let debug: boolean;
 }
-import { ComponentInitializer } from "../core/component.js";
 //# sourceMappingURL=theme-toggle.d.ts.map

package/dist/es/ui/theme-toggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-toggle.d.ts","sourceRoot":"","sources":["../../../lib/js/ui/theme-toggle.js"],"names":[],"mappings":"AAmGA;;GAEG;AACH,qCAFW,MAAM,QAIhB;AAED;;;GAGG;AACH,6BASC;AAED;;;GAGG;AACH,oCAFW,WAAW;;;;;;cA+FrB;AAhND;;GAEG;AACH,+CAGG;;;;;;;;;;;;;;;;;;;;;;;IAmDD;;OAEG;IACH,mCAAiB;;;;;;;qCAlEkB,sBAAsB"}

package/dist/es/ui/theme-toggle.js

@@ -0,0 +1,190 @@
+import { ComponentInitializer as M } from "../core/component.js";
+import { getCoreEventName as y } from "../core/events.js";
+import { resolveClasses as b } from "../utils/dom.js";
+import { hasRequiredProps as q } from "@ulu/utils/object.js";
+import { getElements as I } from "@ulu/utils/browser/dom.js";
+const c = new M({
+  type: "theme-toggle",
+  baseAttribute: "data-ulu-theme-toggle"
+}), Q = c.attributeSelector("label"), $ = c.attributeSelector("icon"), L = c.getAttribute("remote"), v = c.getAttribute("init"), S = c.getAttribute("state"), j = (e) => document.querySelectorAll(
+  `[${L}="${e}"]`
+), C = (e) => document.querySelectorAll(
+  `[${L}="${e}"]:not([${v}])`
+), T = ["target"], O = q(T), E = (e, r) => e ? r() : null, P = {
+  /**
+   * Object of each theme that should be toggle/cycled through
+   */
+  themes: {
+    light: {
+      label: "Light",
+      value: "light",
+      iconClass: "fas fa-moon",
+      targetClass: "theme-light",
+      mediaQuery: "(prefers-color-scheme: light)"
+    },
+    dark: {
+      label: "Dark",
+      iconClass: "fas fa-sun",
+      targetClass: "theme-dark",
+      mediaQuery: "(prefers-color-scheme: dark)"
+    }
+  },
+  /**
+   * Required this is the element(s) that should be changed by a specific toggle
+   * - The element should have data-ulu-theme-toggle-target="SOME_IDENTIFIER"
+   */
+  target: "body",
+  /**
+   * Optional group to link remote toggles (toggles that follow the main one and can toggle too)
+   */
+  group: null,
+  /**
+   * Optional callback to do something when the state changes
+   */
+  onChange(e) {
+  },
+  /**
+   * The initial state for this component
+   * - May be overridden by saved preference or media query if options are enabled
+   */
+  initialState: "light",
+  /**
+   * Check the OS systems user preference via 'preferenceQuery' option
+   */
+  checkMediaQuery: !1,
+  /**
+   * Will store the preference in local storage so it persists between page loads
+   */
+  savePreference: !1,
+  /**
+   * The key that will be used to store the preference in local storage
+   * - This will be used as prefix in combination with group if defined
+   */
+  storagePrefix: "ulu-theme-",
+  /**
+   * Output information to console for debugging
+   */
+  debug: !1
+};
+let k = { ...P };
+function G(e) {
+  k = Object.assign({}, k, e);
+}
+function H() {
+  c.init({
+    coreEvents: ["pageModified"],
+    withData: !0,
+    setup({ element: e, data: r, initialize: o }) {
+      R(e, r), o();
+    }
+  });
+}
+function R(e, r) {
+  const o = Object.assign({}, P, r);
+  if (!O(o)) {
+    console.error(`Missing a required option: ${T.join(", ")}`);
+    return;
+  }
+  const t = o.group, n = { toggle: e, options: o }, u = w(o);
+  if (!u) {
+    console.error("Unable to resolve initial key");
+    return;
+  }
+  p(u, n), e.addEventListener("click", a), l(), document.addEventListener(y("pageModified"), l);
+  function s(g) {
+    const d = I(o.target)[0].dataset.uluThemeToggleState, f = D(d, o);
+    if (!f) {
+      console.error("Issue getting next theme key");
+      return;
+    }
+    p(f, { ...n, event: g });
+  }
+  function a(g) {
+    s(g);
+  }
+  function l() {
+    if (!t) return;
+    C(t).forEach((i) => {
+      i.addEventListener("click", a), c.initializeElement(i);
+    });
+  }
+  function m() {
+    if (!t) return;
+    C(t).forEach((i) => {
+      i.removeEventListener("click", a), i.removeAttribute(v, "");
+    });
+  }
+  function h() {
+    e.removeEventListener("click", a), e.removeAttribute(v, ""), m(), document.removeEventListener(y("pageModified"), l);
+  }
+  return {
+    destroy: h,
+    toggle: e,
+    options: o,
+    toggleState: s,
+    setState(g) {
+      p(g, n);
+    }
+  };
+}
+function p(e, r) {
+  if (!e) {
+    console.error("Missing key");
+    return;
+  }
+  const { toggle: o, options: t } = r, { themes: n, group: u } = t, s = {
+    targets: I(t.target),
+    toggles: [o, ...u ? j(u) : []]
+  };
+  if (!s.targets.length || !s.toggles.length) {
+    console.error("Issue setting state, couldn't find needed elements", s);
+    return;
+  }
+  const a = n[e], l = z(e, n), m = {
+    ...r,
+    key: e,
+    elements: s,
+    theme: a,
+    otherThemes: l
+  };
+  t.debug && c.log("Set state context", m);
+  const h = x(l, "targetClass"), g = x(l, "iconClass");
+  s.targets.forEach((i) => {
+    i.setAttribute(S, e), i.classList.remove(...h), i.classList.add(...b(a.targetClass));
+  }), s.toggles.forEach((i) => {
+    const d = i.querySelector(Q), f = i.querySelector($);
+    d && (d.textContent = a.label), f && (f.classList.remove(...g), f.classList.add(...b(a.iconClass))), i.setAttribute(S, e);
+  }), t.onChange && t.onChange(m), t.savePreference && localStorage.setItem(A(t), e);
+}
+function w(e) {
+  const { savePreference: r, checkMediaQuery: o, themes: t, initialState: n } = e, u = A(e), s = E(r, () => localStorage.getItem(u)), a = E(o, () => K(t)), l = s || a || n;
+  return e.debug && (c.log("Preference Saved", s), c.log("Media Query Preference", a), c.log("Initial State:", n)), l || c.logError("Failed to resolve initial theme (pass 'initialState' to options)"), l;
+}
+function K(e) {
+  const r = Object.entries(e).find(([o, t]) => {
+    if (t.mediaQuery)
+      return window.matchMedia(t.mediaQuery).matches;
+  });
+  return r ? r[0] : null;
+}
+function D(e, r) {
+  const { themes: o } = r, t = Object.keys(o), n = t.findIndex((s) => s === e), u = n === -1 ? 0 : (n + 1) % t.length;
+  return t[u];
+}
+function z(e, r) {
+  return Object.entries(r).filter(([t]) => t !== e).map(([t, n]) => n);
+}
+function x(e, r) {
+  return e.reduce((o, t) => o.concat(b(t[r])), []);
+}
+function A(e) {
+  const { storagePrefix: r, group: o } = e;
+  return o ? `${r}${o}` : r;
+}
+export {
+  P as defaults,
+  H as init,
+  c as initializer,
+  G as setDefaults,
+  R as setupToggle
+};