@ulu/frontend 0.1.0-beta.6 → 0.1.0-beta.60

package/docs-dev/assets/main.js

@@ -73,6 +73,48 @@ const __vitePreload = function preload(baseModule, deps, importerUrl) {
     return baseModule().catch(handlePreloadError);
   });
 };
+const defaults$b = {
+  iconClassClose: "css-icon css-icon--close",
+  iconClassDragX: "css-icon css-icon--drag-x",
+  iconClassPrevious: "css-icon  css-icon--angle-left",
+  iconClassNext: "css-icon  css-icon--angle-right"
+};
+let currentSettings = { ...defaults$b };
+function getDefaultSettings() {
+  return { ...defaults$b };
+}
+function updateSettings(changes) {
+  Object.assign(currentSettings, changes);
+}
+function getSettings() {
+  return { ...currentSettings };
+}
+function getSetting(key2) {
+  if (!currentSettings.hasOwnProperty(key2)) {
+    console.warn(`Attempted to access non-existent setting: ${key2}`);
+    return void 0;
+  }
+  return currentSettings[key2];
+}
+function updateSetting(key2, value) {
+  currentSettings[key2] = value;
+}
+function wrapSettingString(key2) {
+  return {
+    toString() {
+      return getSetting(key2);
+    }
+  };
+}
+const settings = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  getDefaultSettings,
+  getSetting,
+  getSettings,
+  updateSetting,
+  updateSettings,
+  wrapSettingString
+}, Symbol.toStringTag, { value: "Module" }));
 function debounce(callback, wait, immediate, valueThis) {
   var timeout;
   return function executedFunction() {
@@ -212,10 +254,34 @@ function getElement(target, context = document) {
   } else if (target instanceof Element) {
     return target;
   } else {
-    console.warn("Unable to getElement()", target);
+    console.warn("getElement: Invalid target type (expected String/Node)", target);
     return null;
   }
 }
+function getElements(target, context = document) {
+  if (typeof target === "string") {
+    return [...context.querySelectorAll(target)];
+  } else if (target instanceof Element) {
+    return [target];
+  } else if (Array.isArray(target) || target instanceof NodeList) {
+    return [...target];
+  } else {
+    console.warn("getElement: Invalid target type (expected String/Node/Array/Node List)", target);
+    return null;
+  }
+}
+function resolveClasses(classes) {
+  if (typeof classes === "string") {
+    return classes.split(" ").filter((c) => c !== "");
+  } else if (Array.isArray(classes)) {
+    return classes;
+  } else if (!classes) {
+    return [];
+  } else {
+    console.warn("resolveClassArray: Invalid class input type.", classes);
+    return [];
+  }
+}
 function addScrollbarProperty(element = document.body, container2 = window, propName = "--ulu-scrollbar-width") {
   const scrollbarWidth = container2.innerWidth - element.clientWidth;
   element.style.setProperty(propName, `${scrollbarWidth}px`);
@@ -226,16 +292,18 @@ const dom = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty(
   getDatasetJson,
   getDatasetOptionalJson,
   getElement,
+  getElements,
   regexJsonString,
+  resolveClasses,
   setPositionClasses,
   wasClickOutside
 }, Symbol.toStringTag, { value: "Module" }));
-function init$f() {
+function init$h() {
   addScrollbarProperty();
 }
 const page = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  init: init$f
+  init: init$h
 }, Symbol.toStringTag, { value: "Module" }));
 function removeArrayElement(array, element) {
   var index2 = array.indexOf(element);
@@ -243,7 +311,7 @@ function removeArrayElement(array, element) {
     array.splice(index2, 1);
   }
 }
-const config = {
+const config$1 = {
   debug: false,
   warningsAlways: true,
   errorsAlways: true,
@@ -251,7 +319,7 @@ const config = {
 };
 const hasConsole = "console" in window;
 function allow(context) {
-  return hasConsole && config.debug && ((context == null ? void 0 : context.debug) || context == null);
+  return hasConsole && config$1.debug && ((context == null ? void 0 : context.debug) || context == null);
 }
 function getName(context) {
   var _a;
@@ -260,12 +328,12 @@ function getName(context) {
 function output(method, context, messages) {
   const label = getName(context) || "Logger";
   console[method](label, ...messages);
-  if (config.outputContext) {
+  if (config$1.outputContext) {
     console.log("Context:\n", context);
   }
 }
 function set(changes) {
-  Object.assign(config, changes);
+  Object.assign(config$1, changes);
 }
 function log(context, ...messages) {
   if (allow(context)) {
@@ -273,12 +341,12 @@ function log(context, ...messages) {
   }
 }
 function logWarning(context, ...messages) {
-  if (config.warningsAlways || allow(context)) {
+  if (config$1.warningsAlways || allow(context)) {
     output("warn", context, messages);
   }
 }
 function logError$1(context, ...messages) {
-  if (config.errorsAlways || allow(context)) {
+  if (config$1.errorsAlways || allow(context)) {
     output("error", context, messages);
   }
 }
@@ -566,15 +634,15 @@ const _Collapsible = class _Collapsible {
       logError$1(this, "missing required elements (trigger or content)");
       return;
     }
-    const options2 = Object.assign({}, _Collapsible.defaults, config2);
+    const options = Object.assign({}, _Collapsible.defaults, config2);
     this.elements = elements;
-    this.options = options2;
+    this.options = options;
     this.isOpen = false;
     this.handlers = {};
     ensureId(trigger);
     ensureId(content);
     this.debugLog(this, this);
-    if (!options2.selfManaged) {
+    if (!options.selfManaged) {
       this.attachHandlers();
     }
     this.setup();
@@ -748,11 +816,11 @@ const _Resizer = class _Resizer {
    * @param {Boolean} options.overrideMaxWidth When script is activated by handle remove the elements max-width and allow the width of the resize to exceed the max (default false)
    * @param {Boolean} options.fromLeft The script should assume the handle is on the left side of the element
    */
-  constructor(container2, control, options2) {
+  constructor(container2, control, options) {
     if (!control || !container2) {
       logError$1(this, "Missing required elements 'control' or 'container'");
     }
-    this.options = Object.assign({}, _Resizer.defaults, options2);
+    this.options = Object.assign({}, _Resizer.defaults, options);
     this.container = container2;
     this.control = control;
     this.handlerMousedown = this.onMousedown.bind(this);
@@ -823,16 +891,16 @@ const pauseYoutubeVideo = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.d
   pauseVideos: pauseVideos$1,
   prepVideos: prepVideos$1
 }, Symbol.toStringTag, { value: "Module" }));
-const attrs$b = {
+const attrs$d = {
   init: "data-ulu-dialog-init",
   dialog: "data-ulu-dialog",
   trigger: "data-ulu-dialog-trigger",
   close: "data-ulu-dialog-close"
 };
-const attrSelector$b = (key2) => `[${attrs$b[key2]}]`;
-const attrSelectorInitial$8 = (key2) => `${attrSelector$b(key2)}:not([${attrs$b.init}])`;
-const queryAllInitial$2 = (key2) => document.querySelectorAll(attrSelectorInitial$8(key2));
-const defaults$7 = {
+const attrSelector$d = (key2) => `[${attrs$d[key2]}]`;
+const attrSelectorInitial$9 = (key2) => `${attrSelector$d(key2)}:not([${attrs$d.init}])`;
+const queryAllInitial$3 = (key2) => document.querySelectorAll(attrSelectorInitial$9(key2));
+const defaults$a = {
   /**
    * Use non-modal interface for dialog
    */
@@ -851,23 +919,23 @@ const defaults$7 = {
    */
   pauseVideos: true
 };
-let currentDefaults$2 = { ...defaults$7 };
-function setDefaults$2(options2) {
-  currentDefaults$2 = Object.assign({}, currentDefaults$2, options2);
+let currentDefaults$3 = { ...defaults$a };
+function setDefaults$3(options) {
+  currentDefaults$3 = Object.assign({}, currentDefaults$3, options);
 }
-function init$e() {
-  document.addEventListener(getName$1("pageModified"), setup$c);
-  setup$c();
+function init$g() {
+  document.addEventListener(getName$1("pageModified"), setup$d);
+  setup$d();
 }
-function setup$c() {
-  const dialogs = queryAllInitial$2("dialog");
+function setup$d() {
+  const dialogs = queryAllInitial$3("dialog");
   dialogs.forEach(setupDialog);
-  const triggers = queryAllInitial$2("trigger");
+  const triggers = queryAllInitial$3("trigger");
   triggers.forEach(setupTrigger$2);
 }
 function setupTrigger$2(trigger) {
   trigger.addEventListener("click", handleTrigger);
-  trigger.setAttribute(attrs$b.init, "");
+  trigger.setAttribute(attrs$d.init, "");
   function handleTrigger() {
     var _a;
     const id2 = trigger.dataset.uluDialogTrigger;
@@ -880,26 +948,26 @@ function setupTrigger$2(trigger) {
       console.error("Attempted to trigger non <dialog> element. Did you mean to use modal builder?");
       return;
     }
-    const options2 = getDialogOptions(dialog2);
-    dialog2[options2.nonModal ? "show" : "showModal"]();
+    const options = getDialogOptions(dialog2);
+    dialog2[options.nonModal ? "show" : "showModal"]();
   }
 }
 function setupDialog(dialog2) {
-  const options2 = getDialogOptions(dialog2);
+  const options = getDialogOptions(dialog2);
   dialog2.addEventListener("click", handleClicks);
-  dialog2.setAttribute(attrs$b.init, "");
-  if (options2.documentEnd) {
+  dialog2.setAttribute(attrs$d.init, "");
+  if (options.documentEnd) {
     document.body.appendChild(dialog2);
   }
-  if (options2.pauseVideos) {
+  if (options.pauseVideos) {
     prepVideos(dialog2);
   }
   function handleClicks(event) {
     const { target } = event;
     const closeFromButton = target.closest("[data-ulu-dialog-close]");
-    let closeFromOutside = options2.clickOutsideCloses && target === dialog2 && wasClickOutside(dialog2, event);
+    let closeFromOutside = options.clickOutsideCloses && target === dialog2 && wasClickOutside(dialog2, event);
     if (closeFromOutside || closeFromButton) {
-      if (options2.pauseVideos) {
+      if (options.pauseVideos) {
         pauseVideos(dialog2);
       }
       dialog2.close();
@@ -907,8 +975,8 @@ function setupDialog(dialog2) {
   }
 }
 function getDialogOptions(dialog2) {
-  const options2 = getDatasetJson(dialog2, "uluDialog");
-  return Object.assign({}, currentDefaults$2, options2);
+  const options = getDatasetJson(dialog2, "uluDialog");
+  return Object.assign({}, currentDefaults$3, options);
 }
 function prepVideos(dialog2) {
   prepVideos$1(dialog2);
@@ -920,22 +988,22 @@ function pauseVideos(dialog2) {
 }
 const dialog = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  attrs: attrs$b,
-  defaults: defaults$7,
+  attrs: attrs$d,
+  defaults: defaults$a,
   getDialogOptions,
-  init: init$e,
-  setDefaults: setDefaults$2,
-  setup: setup$c,
+  init: init$g,
+  setDefaults: setDefaults$3,
+  setup: setup$d,
   setupDialog,
   setupTrigger: setupTrigger$2
 }, Symbol.toStringTag, { value: "Module" }));
-const attrs$a = {
+const attrs$c = {
   builder: "data-ulu-modal-builder",
   body: "data-ulu-modal-builder-body",
   resizer: "data-ulu-modal-builder-resizer"
 };
-const attrSelector$a = (key2) => `[${attrs$a[key2]}]`;
-const defaults$6 = {
+const attrSelector$c = (key2) => `[${attrs$c[key2]}]`;
+const defaults$9 = {
   title: null,
   titleIcon: null,
   nonModal: false,
@@ -948,8 +1016,8 @@ const defaults$6 = {
   print: false,
   noMinHeight: false,
   class: "",
-  classCloseIcon: "css-icon css-icon--close",
-  classResizerIcon: "css-icon css-icon--drag",
+  classCloseIcon: wrapSettingString("iconClassClose"),
+  classResizerIcon: wrapSettingString("iconClassDragX"),
   debug: false,
   templateCloseIcon(config2) {
     return `<span class="modal__close-icon ${config2.classCloseIcon}" aria-hidden="true"></span>`;
@@ -983,38 +1051,38 @@ const defaults$6 = {
               ${config2.titleIcon ? `<span class="modal__title-icon ${config2.titleIcon}" aria-hidden="true"></span>` : ""}
               <span class="modal__title-text">${config2.title}</span>
             </h2>
-            <button class="modal__close" aria-label="Close modal" ${attrs$b.close} autofocus>
+            <button class="modal__close" aria-label="Close modal" ${attrs$d.close} autofocus>
               ${config2.templateCloseIcon(config2)}
             </button>
           </header>
         ` : ""}
-        <div class="modal__body" ${attrs$a.body}></div>
-        ${config2.hasResizer ? `<div class="modal__resizer" ${attrs$a.resizer}>
+        <div class="modal__body" ${attrs$c.body}></div>
+        ${config2.hasResizer ? `<div class="modal__resizer" ${attrs$c.resizer}>
             ${config2.templateResizerIcon(config2)}
           </div>` : ""}
       </div>
     `;
   }
 };
-let currentDefaults$1 = { ...defaults$6 };
-function setDefaults$1(options2) {
-  currentDefaults$1 = Object.assign({}, currentDefaults$1, options2);
+let currentDefaults$2 = { ...defaults$9 };
+function setDefaults$2(options) {
+  currentDefaults$2 = Object.assign({}, currentDefaults$2, options);
 }
-function init$d() {
-  document.addEventListener(getName$1("pageModified"), setup$b);
-  setup$b();
+function init$f() {
+  document.addEventListener(getName$1("pageModified"), setup$c);
+  setup$c();
 }
-function setup$b() {
-  const builders = document.querySelectorAll(attrSelector$a("builder"));
+function setup$c() {
+  const builders = document.querySelectorAll(attrSelector$c("builder"));
   builders.forEach(setupBuilder);
 }
 function setupBuilder(element) {
-  const options2 = getDatasetJson(element, "uluModalBuilder");
-  element.removeAttribute(attrs$a.builder);
-  buildModal(element, options2);
+  const options = getDatasetJson(element, "uluModalBuilder");
+  element.removeAttribute(attrs$c.builder);
+  buildModal(element, options);
 }
-function buildModal(content, options2) {
-  const config2 = Object.assign({}, currentDefaults$1, options2);
+function buildModal(content, options) {
+  const config2 = Object.assign({}, currentDefaults$2, options);
   if (config2.position !== "center" && config2.allowResize) {
     config2.hasResizer = true;
   }
@@ -1026,16 +1094,16 @@ function buildModal(content, options2) {
   }
   const markup = config2.template(content.id, config2);
   const modal = createElementFromHtml(markup.trim());
-  const selectChild = (key2) => modal.querySelector(attrSelector$a(key2));
-  const body2 = selectChild("body");
+  const selectChild = (key2) => modal.querySelector(attrSelector$c(key2));
+  const body = selectChild("body");
   const resizer2 = selectChild("resizer");
   const dialogOptions = separateDialogOptions(config2);
   content.removeAttribute("id");
   content.removeAttribute("hidden");
-  content.removeAttribute(attrs$a.builder);
+  content.removeAttribute(attrs$c.builder);
   content.parentNode.replaceChild(modal, content);
-  body2.appendChild(content);
-  modal.setAttribute(attrs$b.dialog, JSON.stringify(dialogOptions));
+  body.appendChild(content);
+  modal.setAttribute(attrs$d.dialog, JSON.stringify(dialogOptions));
   if (config2.hasResizer) {
     new Resizer(modal, resizer2, {
       fromLeft: config2.position === "right"
@@ -1054,7 +1122,7 @@ function buildModal(content, options2) {
   return { modal };
 }
 function separateDialogOptions(config2) {
-  return Object.keys(defaults$7).reduce((acc, key2) => {
+  return Object.keys(defaults$a).reduce((acc, key2) => {
     if (key2 in config2) {
       acc[key2] = config2[key2];
     }
@@ -1064,10 +1132,10 @@ function separateDialogOptions(config2) {
 const modalBuilder = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   buildModal,
-  defaults: defaults$6,
-  init: init$d,
-  setDefaults: setDefaults$1,
-  setup: setup$b,
+  defaults: defaults$9,
+  init: init$f,
+  setDefaults: setDefaults$2,
+  setup: setup$c,
   setupBuilder
 }, Symbol.toStringTag, { value: "Module" }));
 const linebreaks = /(\r\n|\n|\r)/gm;
@@ -1191,50 +1259,50 @@ __publicField(_Flipcard, "defaults", {
   }
 });
 let Flipcard = _Flipcard;
-const attrs$9 = {
+const attrs$b = {
   init: "data-ulu-flipcard-init",
   flipcard: "data-ulu-flipcard",
   front: "data-ulu-flipcard-front",
   back: "data-ulu-flipcard-back"
 };
-const attrSelector$9 = (key2) => `[${attrs$9[key2]}]`;
-const attrSelectorInitial$7 = (key2) => `${attrSelector$9(key2)}:not([${attrs$9.init}])`;
+const attrSelector$b = (key2) => `[${attrs$b[key2]}]`;
+const attrSelectorInitial$8 = (key2) => `${attrSelector$b(key2)}:not([${attrs$b.init}])`;
 const instances$4 = [];
-function init$c() {
-  document.addEventListener(getName$1("pageModified"), setup$a);
-  setup$a();
+function init$e() {
+  document.addEventListener(getName$1("pageModified"), setup$b);
+  setup$b();
 }
-function setup$a() {
-  const builders = document.querySelectorAll(attrSelectorInitial$7("flipcard"));
+function setup$b() {
+  const builders = document.querySelectorAll(attrSelectorInitial$8("flipcard"));
   builders.forEach(setupFlipcard);
 }
 function setupFlipcard(container2) {
-  container2.setAttribute(attrs$9.init, "");
-  const options2 = getDatasetOptionalJson(container2, "uluFlipcard");
-  const config2 = Object.assign({}, options2);
-  const front = container2.querySelector(attrSelectorInitial$7("front"));
-  const back = container2.querySelector(attrSelectorInitial$7("back"));
+  container2.setAttribute(attrs$b.init, "");
+  const options = getDatasetOptionalJson(container2, "uluFlipcard");
+  const config2 = Object.assign({}, options);
+  const front = container2.querySelector(attrSelectorInitial$8("front"));
+  const back = container2.querySelector(attrSelectorInitial$8("back"));
   instances$4.push(new Flipcard(container2, front, back, config2));
 }
 const flipcard = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   Flipcard,
-  attrs: attrs$9,
-  init: init$c,
-  setup: setup$a
+  attrs: attrs$b,
+  init: init$e,
+  setup: setup$b
 }, Symbol.toStringTag, { value: "Module" }));
-function init$b(selector = "[data-grid]", classes) {
-  document.addEventListener(getName$1("pageModified"), () => setup$9(selector, classes));
-  document.addEventListener(getName$1("pageResized"), () => setup$9(selector, classes));
-  setup$9(selector, classes);
+function init$d(selector = "[data-grid]", classes) {
+  document.addEventListener(getName$1("pageModified"), () => setup$a(selector, classes));
+  document.addEventListener(getName$1("pageResized"), () => setup$a(selector, classes));
+  setup$a(selector, classes);
 }
-function setup$9(selector, classes) {
+function setup$a(selector, classes) {
   document.querySelectorAll(selector).forEach((element) => setPositionClasses(element, classes || void 0));
 }
 const grid = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  init: init$b,
-  setup: setup$9
+  init: init$d,
+  setup: setup$a
 }, Symbol.toStringTag, { value: "Module" }));
 function createPager() {
   return function pager(instance, dir) {
@@ -1348,10 +1416,10 @@ const _OverflowScroller = class _OverflowScroller {
     return button;
   }
   getControlContent(action) {
-    const classes = this.options[action === "next" ? "iconClassesNext" : "iconClassesPrevious"];
+    const classes = this.options[action === "next" ? "iconClassNext" : "iconClassPrevious"];
     return `
       <span class="hidden-visually">${action}</span>
-      <span class="${classes.join(" ")}" aria-hidden="true"></span>
+      <span class="${classes}" aria-hidden="true"></span>
     `;
   }
   onScroll(event) {
@@ -1433,8 +1501,8 @@ __publicField(_OverflowScroller, "defaults", {
   offsetEnd: 100,
   amount: "auto",
   buttonClasses: ["button", "button--icon"],
-  iconClassesPrevious: ["css-icon", "css-icon--angle-left"],
-  iconClassesNext: ["css-icon", "css-icon--angle-right"]
+  iconClassPrevious: wrapSettingString("iconClassPrevious"),
+  iconClassNext: wrapSettingString("iconClassNext")
 });
 let OverflowScroller = _OverflowScroller;
 const overflowScroller = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
@@ -1707,10 +1775,10 @@ const computePosition$1 = async (reference, floating, config2) => {
     middlewareData
   };
 };
-async function detectOverflow(state, options2) {
+async function detectOverflow(state, options) {
   var _await$platform$isEle;
-  if (options2 === void 0) {
-    options2 = {};
+  if (options === void 0) {
+    options = {};
   }
   const {
     x,
@@ -1726,7 +1794,7 @@ async function detectOverflow(state, options2) {
     elementContext = "floating",
     altBoundary = false,
     padding = 0
-  } = evaluate(options2, state);
+  } = evaluate(options, state);
   const paddingObject = getPaddingObject(padding);
   const altContext = elementContext === "floating" ? "reference" : "floating";
   const element = elements[altBoundary ? altContext : elementContext];
@@ -1763,9 +1831,9 @@ async function detectOverflow(state, options2) {
     right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
   };
 }
-const arrow$1 = (options2) => ({
+const arrow$1 = (options) => ({
   name: "arrow",
-  options: options2,
+  options,
   async fn(state) {
     const {
       x,
@@ -1779,7 +1847,7 @@ const arrow$1 = (options2) => ({
     const {
       element,
       padding = 0
-    } = evaluate(options2, state) || {};
+    } = evaluate(options, state) || {};
     if (element == null) {
       return {};
     }
@@ -1825,13 +1893,13 @@ const arrow$1 = (options2) => ({
     };
   }
 });
-const flip$1 = function(options2) {
-  if (options2 === void 0) {
-    options2 = {};
+const flip$1 = function(options) {
+  if (options === void 0) {
+    options = {};
   }
   return {
     name: "flip",
-    options: options2,
+    options,
     async fn(state) {
       var _middlewareData$arrow, _middlewareData$flip;
       const {
@@ -1850,7 +1918,7 @@ const flip$1 = function(options2) {
         fallbackAxisSideDirection = "none",
         flipAlignment = true,
         ...detectOverflowOptions
-      } = evaluate(options2, state);
+      } = evaluate(options, state);
       if ((_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
         return {};
       }
@@ -1946,13 +2014,13 @@ function getRectsByLine(rects) {
   }
   return groups.map((rect) => rectToClientRect(getBoundingRect(rect)));
 }
-const inline$1 = function(options2) {
-  if (options2 === void 0) {
-    options2 = {};
+const inline$1 = function(options) {
+  if (options === void 0) {
+    options = {};
   }
   return {
     name: "inline",
-    options: options2,
+    options,
     async fn(state) {
       const {
         placement,
@@ -1965,7 +2033,7 @@ const inline$1 = function(options2) {
         padding = 2,
         x,
         y
-      } = evaluate(options2, state);
+      } = evaluate(options, state);
       const nativeClientRects = Array.from(await (platform2.getClientRects == null ? void 0 : platform2.getClientRects(elements.reference)) || []);
       const clientRects = getRectsByLine(nativeClientRects);
       const fallback = rectToClientRect(getBoundingRect(nativeClientRects));
@@ -2037,7 +2105,7 @@ const inline$1 = function(options2) {
     }
   };
 };
-async function convertValueToCoords(state, options2) {
+async function convertValueToCoords(state, options) {
   const {
     placement,
     platform: platform2,
@@ -2049,7 +2117,7 @@ async function convertValueToCoords(state, options2) {
   const isVertical = getSideAxis(placement) === "y";
   const mainAxisMulti = ["left", "top"].includes(side) ? -1 : 1;
   const crossAxisMulti = rtl && isVertical ? -1 : 1;
-  const rawValue = evaluate(options2, state);
+  const rawValue = evaluate(options, state);
   let {
     mainAxis,
     crossAxis,
@@ -2075,13 +2143,13 @@ async function convertValueToCoords(state, options2) {
     y: crossAxis * crossAxisMulti
   };
 }
-const offset$1 = function(options2) {
-  if (options2 === void 0) {
-    options2 = 0;
+const offset$1 = function(options) {
+  if (options === void 0) {
+    options = 0;
   }
   return {
     name: "offset",
-    options: options2,
+    options,
     async fn(state) {
       var _middlewareData$offse, _middlewareData$arrow;
       const {
@@ -2090,7 +2158,7 @@ const offset$1 = function(options2) {
         placement,
         middlewareData
       } = state;
-      const diffCoords = await convertValueToCoords(state, options2);
+      const diffCoords = await convertValueToCoords(state, options);
       if (placement === ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse.placement) && (_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
         return {};
       }
@@ -2105,13 +2173,13 @@ const offset$1 = function(options2) {
     }
   };
 };
-const shift$1 = function(options2) {
-  if (options2 === void 0) {
-    options2 = {};
+const shift$1 = function(options) {
+  if (options === void 0) {
+    options = {};
   }
   return {
     name: "shift",
-    options: options2,
+    options,
     async fn(state) {
       const {
         x,
@@ -2134,7 +2202,7 @@ const shift$1 = function(options2) {
           }
         },
         ...detectOverflowOptions
-      } = evaluate(options2, state);
+      } = evaluate(options, state);
       const coords = {
         x,
         y
@@ -2464,13 +2532,13 @@ function getWindowScrollBarX(element) {
 function getDocumentRect(element) {
   const html = getDocumentElement(element);
   const scroll = getNodeScroll(element);
-  const body2 = element.ownerDocument.body;
-  const width = max(html.scrollWidth, html.clientWidth, body2.scrollWidth, body2.clientWidth);
-  const height = max(html.scrollHeight, html.clientHeight, body2.scrollHeight, body2.clientHeight);
+  const body = element.ownerDocument.body;
+  const width = max(html.scrollWidth, html.clientWidth, body.scrollWidth, body.clientWidth);
+  const height = max(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight);
   let x = -scroll.scrollLeft + getWindowScrollBarX(element);
   const y = -scroll.scrollTop;
-  if (getComputedStyle$1(body2).direction === "rtl") {
-    x += max(html.clientWidth, body2.clientWidth) - width;
+  if (getComputedStyle$1(body).direction === "rtl") {
+    x += max(html.clientWidth, body.clientWidth) - width;
   }
   return {
     width,
@@ -2736,7 +2804,7 @@ function observeMove(element, onMove) {
     const insetBottom = floor(root.clientHeight - (top + height));
     const insetLeft = floor(left);
     const rootMargin = -insetTop + "px " + -insetRight + "px " + -insetBottom + "px " + -insetLeft + "px";
-    const options2 = {
+    const options = {
       rootMargin,
       threshold: max(0, min(1, threshold)) || 1
     };
@@ -2759,21 +2827,21 @@ function observeMove(element, onMove) {
     }
     try {
       io = new IntersectionObserver(handleObserve, {
-        ...options2,
+        ...options,
         // Handle <iframe>s
         root: root.ownerDocument
       });
     } catch (e) {
-      io = new IntersectionObserver(handleObserve, options2);
+      io = new IntersectionObserver(handleObserve, options);
     }
     io.observe(element);
   }
   refresh(true);
   return cleanup;
 }
-function autoUpdate(reference, floating, update, options2) {
-  if (options2 === void 0) {
-    options2 = {};
+function autoUpdate(reference, floating, update, options) {
+  if (options === void 0) {
+    options = {};
   }
   const {
     ancestorScroll = true,
@@ -2781,7 +2849,7 @@ function autoUpdate(reference, floating, update, options2) {
     elementResize = typeof ResizeObserver === "function",
     layoutShift = typeof IntersectionObserver === "function",
     animationFrame = false
-  } = options2;
+  } = options;
   const referenceEl = unwrapElement(reference);
   const ancestors = ancestorScroll || ancestorResize ? [...referenceEl ? getOverflowAncestors(referenceEl) : [], ...getOverflowAncestors(floating)] : [];
   ancestors.forEach((ancestor) => {
@@ -2844,11 +2912,11 @@ const shift = shift$1;
 const flip = flip$1;
 const arrow = arrow$1;
 const inline = inline$1;
-const computePosition = (reference, floating, options2) => {
+const computePosition = (reference, floating, options) => {
   const cache = /* @__PURE__ */ new Map();
   const mergedOptions = {
     platform: platform$2,
-    ...options2
+    ...options
   };
   const platformWithCache = {
     ...mergedOptions.platform,
@@ -2859,7 +2927,7 @@ const computePosition = (reference, floating, options2) => {
     platform: platformWithCache
   });
 };
-const defaults$5 = {
+const defaults$8 = {
   strategy: "absolute",
   placement: "bottom",
   inline: false,
@@ -2872,19 +2940,19 @@ const defaults$5 = {
   // Options for arrow (not element)
 };
 function createFloatingUi(elements, config2) {
-  const options2 = Object.assign({}, defaults$5, config2);
-  const { placement, strategy } = options2;
+  const options = Object.assign({}, defaults$8, config2);
+  const { placement, strategy } = options;
   const { trigger, content, contentArrow } = elements;
   return autoUpdate(trigger, content, () => {
     computePosition(trigger, content, {
       placement,
       strategy,
       middleware: [
-        ...addPlugin(inline, options2.inline),
-        ...addPlugin(offset, options2.offset),
-        ...addPlugin(flip, options2.flip),
-        ...addPlugin(shift, options2.shift),
-        ...addPlugin(arrow, contentArrow && options2.arrow, { element: contentArrow })
+        ...addPlugin(inline, options.inline),
+        ...addPlugin(offset, options.offset),
+        ...addPlugin(flip, options.flip),
+        ...addPlugin(shift, options.shift),
+        ...addPlugin(arrow, contentArrow && options.arrow, { element: contentArrow })
       ]
     }).then((data) => {
       const { x, y, middlewareData, placement: placement2 } = data;
@@ -2916,46 +2984,46 @@ function addPlugin(plugin, option, overrides = {}) {
 const floatingUi = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   createFloatingUi,
-  defaults: defaults$5
+  defaults: defaults$8
 }, Symbol.toStringTag, { value: "Module" }));
 const instances$3 = /* @__PURE__ */ new WeakMap();
 const logError = (...msgs) => console.error("@ulu (popovers):", ...msgs);
-const attrs$8 = {
+const attrs$a = {
   trigger: "data-ulu-popover-trigger",
   content: "data-ulu-popover-content",
   arrow: "data-ulu-popover-arrow",
   anchor: "data-ulu-popover-trigger-anchor"
 };
-const attrSelector$8 = (key2) => `[${attrs$8[key2]}]`;
+const attrSelector$a = (key2) => `[${attrs$a[key2]}]`;
 const collapsibleDefaults = {
   clickOutsideCloses: true,
   escapeCloses: true
 };
-function init$a() {
-  document.addEventListener(getName$1("pageModified"), setup$8);
-  setup$8();
+function init$c() {
+  document.addEventListener(getName$1("pageModified"), setup$9);
+  setup$9();
 }
-function setup$8() {
-  const triggers = document.querySelectorAll(attrSelector$8("trigger"));
+function setup$9() {
+  const triggers = document.querySelectorAll(attrSelector$a("trigger"));
   const resolved = Array.from(triggers).filter((trigger) => !instances$3.has(trigger)).map(resolve).filter((v) => v);
-  resolved.forEach(({ elements, options: options2, floatingOptions }) => {
-    instances$3.set(elements.trigger, new Popover(elements, options2, floatingOptions));
+  resolved.forEach(({ elements, options, floatingOptions }) => {
+    instances$3.set(elements.trigger, new Popover(elements, options, floatingOptions));
   });
 }
 function resolve(trigger) {
   const raw = trigger.dataset.uluPopoverTrigger;
-  const options2 = (raw == null ? void 0 : raw.length) ? JSON.parse(raw) : {};
+  const options = (raw == null ? void 0 : raw.length) ? JSON.parse(raw) : {};
   const content = getContentByTrigger(trigger);
   const elements = {
     trigger,
     content,
-    anchor: trigger.querySelector(attrSelector$8("anchor")) || trigger,
-    contentArrow: content.querySelector(attrSelector$8("arrow"))
+    anchor: trigger.querySelector(attrSelector$a("anchor")) || trigger,
+    contentArrow: content.querySelector(attrSelector$a("arrow"))
   };
-  const floatingOptions = options2.floating || {};
-  delete options2.floating;
+  const floatingOptions = options.floating || {};
+  delete options.floating;
   if (content) {
-    return { elements, options: options2, floatingOptions };
+    return { elements, options, floatingOptions };
   } else {
     logError("Unable to make popover for", trigger);
     return false;
@@ -2967,13 +3035,13 @@ function getContentByTrigger(trigger) {
   const ariaControls = trigger.getAttribute("aria-controls");
   if (ariaControls) {
     content = document.getElementById(ariaControls);
-  } else if ((_a = trigger == null ? void 0 : trigger.nextElementSibling) == null ? void 0 : _a.hasAttribute(attrs$8.content)) {
+  } else if ((_a = trigger == null ? void 0 : trigger.nextElementSibling) == null ? void 0 : _a.hasAttribute(attrs$a.content)) {
     content = trigger.nextElementSibling;
   } else {
     const children = Array.from(trigger.parentNode.children);
     const triggerIndex = children.findIndex((c) => c === trigger);
     const childrenAfter = children.slice(triggerIndex);
-    content = childrenAfter.find((child) => child.matches(attrSelector$8("content")));
+    content = childrenAfter.find((child) => child.matches(attrSelector$a("content")));
   }
   if (!content) {
     logError("Unable to resolve 'content' element for popover", trigger);
@@ -2982,8 +3050,8 @@ function getContentByTrigger(trigger) {
 }
 class Popover extends Collapsible {
   constructor(elements, config2, floatingOptions) {
-    const options2 = Object.assign({}, collapsibleDefaults, config2);
-    super(elements, options2);
+    const options = Object.assign({}, collapsibleDefaults, config2);
+    super(elements, options);
     this.floatingOptions = floatingOptions || {};
   }
   setState(isOpen, event) {
@@ -3000,6 +3068,7 @@ class Popover extends Collapsible {
   createFloatingInstance() {
     const { content, anchor, contentArrow } = this.elements;
     const floatingElements = { trigger: anchor, contentArrow, content };
+    console.log("this.floatingOptions:\n", this.floatingOptions);
     this.floatingCleanup = createFloatingUi(floatingElements, this.floatingOptions);
   }
   destroyFloatingInstance() {
@@ -3013,34 +3082,34 @@ const popover = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePrope
   __proto__: null,
   Popover,
   getContentByTrigger,
-  init: init$a,
+  init: init$c,
   instances: instances$3,
   resolve,
-  setup: setup$8
+  setup: setup$9
 }, Symbol.toStringTag, { value: "Module" }));
-const attrs$7 = {
+const attrs$9 = {
   trigger: "data-ulu-tooltip",
   init: "data-ulu-init",
   body: "data-ulu-tooltip-display-body",
   arrow: "data-ulu-tooltip-arrow"
 };
-const attrSelector$7 = (key2) => `[${attrs$7[key2]}]`;
-const attrSelectorInitial$6 = (key2) => `${attrSelector$7(key2)}:not([${attrs$7.init}])`;
-function init$9() {
-  document.addEventListener(getName$1("pageModified"), setup$7);
-  setup$7();
+const attrSelector$9 = (key2) => `[${attrs$9[key2]}]`;
+const attrSelectorInitial$7 = (key2) => `${attrSelector$9(key2)}:not([${attrs$9.init}])`;
+function init$b() {
+  document.addEventListener(getName$1("pageModified"), setup$8);
+  setup$8();
 }
-function setup$7() {
-  const triggers = document.querySelectorAll(attrSelectorInitial$6("trigger"));
+function setup$8() {
+  const triggers = document.querySelectorAll(attrSelectorInitial$7("trigger"));
   triggers.forEach(setupTrigger$1);
 }
 function setupTrigger$1(trigger) {
   const passed = getDatasetOptionalJson(trigger, "uluTooltip");
-  const options2 = typeof passed === "object" ? passed : {};
+  const options = typeof passed === "object" ? passed : {};
   if (typeof passed === "string") {
-    options2.content = passed;
+    options.content = passed;
   }
-  return new Tooltip({ trigger }, options2);
+  return new Tooltip({ trigger }, options);
 }
 const _Tooltip = class _Tooltip {
   constructor(elements, userOptions, floatingOptions) {
@@ -3098,21 +3167,21 @@ const _Tooltip = class _Tooltip {
     return element;
   }
   createContentElement() {
-    const { options: options2 } = this;
-    const content = createElementFromHtml(options2.template(options2));
-    const body2 = content.querySelector(attrSelector$7("body"));
+    const { options } = this;
+    const content = createElementFromHtml(options.template(options));
+    const body = content.querySelector(attrSelector$9("body"));
     const innerContent = this.getInnerContent();
-    if (options2.isHtml) {
-      body2.innerHTML = innerContent;
+    if (options.isHtml) {
+      body.innerHTML = innerContent;
     } else {
-      body2.textContent = innerContent;
+      body.textContent = innerContent;
     }
     content.id = newId();
-    if (options2.contentClass) {
-      content.classList.add(options2.contentClass);
+    if (options.contentClass) {
+      content.classList.add(options.contentClass);
     }
     this.elements.content = content;
-    this.elements.contentArrow = content.querySelector(attrSelector$7("arrow"));
+    this.elements.contentArrow = content.querySelector(attrSelector$9("arrow"));
     document.body.appendChild(content);
   }
   attachHandlers() {
@@ -3256,7 +3325,7 @@ __publicField(_Tooltip, "defaults", {
   template(_config) {
     return `
         <div class="popover popover--tooltip">
-          <div class="popover__inner" ${attrs$7.body}>
+          <div class="popover__inner" ${attrs$9.body}>
           </div>
           <span class="popover__arrow" data-ulu-tooltip-arrow></span>
         </div>
@@ -3276,8 +3345,8 @@ let Tooltip = _Tooltip;
 const tooltip = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   Tooltip,
-  init: init$9,
-  setup: setup$7,
+  init: init$b,
+  setup: setup$8,
   setupTrigger: setupTrigger$1
 }, Symbol.toStringTag, { value: "Module" }));
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
@@ -4125,16 +4194,16 @@ var platformExports = platform$1.exports;
     data.document = _document;
     return data;
   }
-  function test(data, options2) {
+  function test(data, options) {
     data.wrapper.innerHTML = "";
-    var element = typeof options2.element === "string" ? data.document.createElement(options2.element) : options2.element(data.wrapper, data.document);
-    var focus2 = options2.mutate && options2.mutate(element, data.wrapper, data.document);
+    var element = typeof options.element === "string" ? data.document.createElement(options.element) : options.element(data.wrapper, data.document);
+    var focus2 = options.mutate && options.mutate(element, data.wrapper, data.document);
     if (!focus2 && focus2 !== false) {
       focus2 = element;
     }
     !element.parentNode && data.wrapper.appendChild(element);
     focus2 && focus2.focus && focus2.focus();
-    return options2.validate ? options2.validate(element, focus2, data.document) : data.document.activeElement === focus2;
+    return options.validate ? options.validate(element, focus2, data.document) : data.document.activeElement === focus2;
   }
   function after(data) {
     if (data.activeElement === document.body) {
@@ -6312,16 +6381,16 @@ var focusable_quickExports = focusable_quick.exports;
       defaultToDocument: true,
       context
     });
-    var options2 = {
+    var options = {
       context: element,
       includeContext,
       includeOnlyTabbable,
       strategy
     };
     if (strategy === "quick") {
-      return (0, _focusable4.default)(options2);
+      return (0, _focusable4.default)(options);
     } else if (strategy === "strict" || strategy === "all") {
-      return (0, _focusable2.default)(options2);
+      return (0, _focusable2.default)(options);
     }
     throw new TypeError('query/focusable requires option.strategy to be one of ["quick", "strict", "all"]');
   };
@@ -8150,31 +8219,31 @@ const requiredElements = [
   "track",
   "slides"
 ];
-const attrs$6 = {
+const attrs$8 = {
   init: "data-ulu-slider-init",
   slider: "data-ulu-slider",
   track: "data-ulu-slider-track",
   trackContainer: "data-ulu-slider-track-container",
   controls: "data-ulu-slider-control-context"
 };
-const attrSelector$6 = (key2) => `[${attrs$6[key2]}]`;
-const attrSelectorInitial$5 = (key2) => `${attrSelector$6(key2)}:not([${attrs$6.init}])`;
-const defaults$4 = {
+const attrSelector$8 = (key2) => `[${attrs$8[key2]}]`;
+const attrSelectorInitial$6 = (key2) => `${attrSelector$8(key2)}:not([${attrs$8.init}])`;
+const defaults$7 = {
   amount: createPager()
 };
 const instances$2 = [];
-function init$8() {
-  document.addEventListener(getName$1("pageModified"), setup$6);
-  setup$6();
+function init$a() {
+  document.addEventListener(getName$1("pageModified"), setup$7);
+  setup$7();
 }
-function setup$6() {
-  const builders = document.querySelectorAll(attrSelectorInitial$5("slider"));
+function setup$7() {
+  const builders = document.querySelectorAll(attrSelectorInitial$6("slider"));
   builders.forEach(setupSlider$1);
 }
 function setupSlider$1(container2) {
-  container2.setAttribute(attrs$6.init, "");
-  const options2 = getDatasetOptionalJson(container2, "uluScrollSlider");
-  const config2 = Object.assign({}, defaults$4, options2);
+  container2.setAttribute(attrs$8.init, "");
+  const options = getDatasetOptionalJson(container2, "uluScrollSlider");
+  const config2 = Object.assign({}, defaults$7, options);
   const elements = {
     container: container2,
     track: container2.querySelector("[data-ulu-slider-track]"),
@@ -8189,9 +8258,9 @@ function setupSlider$1(container2) {
 const _Slider = class _Slider {
   // constructor(container, title, trackContainer, track, slides, config, debug = false) {
   constructor(elements, config2, debug = false) {
-    const options2 = Object.assign({}, _Slider.defaults, config2);
+    const options = Object.assign({}, _Slider.defaults, config2);
     this.debug = debug;
-    this.options = options2;
+    this.options = options;
     this.slide = null;
     this.index = null;
     this.transitioning = false;
@@ -8213,7 +8282,7 @@ const _Slider = class _Slider {
       ...this.createControls(elements.controlContext || elements.container),
       ...this.createNav(elements.navContext || elements.container)
     };
-    this.transition = options2.transition ? options2.transitionFade || reduceMotion ? this.fadeTransition : this.slideTransition : this.noTransition;
+    this.transition = options.transition ? options.transitionFade || reduceMotion ? this.fadeTransition : this.slideTransition : this.noTransition;
     this.setup();
     this.goto(0, null, "init");
     log(this, "Slider Instance Created", this);
@@ -8311,9 +8380,9 @@ const _Slider = class _Slider {
    * Perform a fade on a single slide
    */
   fadeSlide(slide, visible2) {
-    const { options: options2 } = this;
+    const { options } = this;
     const { element } = slide;
-    const duration = visible2 ? options2.transitionDuration : options2.transitionDurationExit;
+    const duration = visible2 ? options.transitionDuration : options.transitionDurationExit;
     return this.ensureTransitionEnds(element, duration, () => {
       element.style.opacity = visible2 ? "1" : "0";
     });
@@ -8529,12 +8598,11 @@ const _Slider = class _Slider {
     button.addEventListener("click", this.goto.bind(this, index2));
     return button;
   }
-  // change to css-icon 
   getControlContent(action) {
-    const classes = this.options[action === "next" ? "iconClassesNext" : "iconClassesPrevious"];
+    const classes = this.options[action === "next" ? "iconClassNext" : "iconClassPrevious"];
     return `
       <span class="hidden-visually">${action}</span>
-      <span class="${classes.join(" ")}" aria-hidden="true"></span>
+      <span class="${this.getClass("control-icon")} ${classes}" aria-hidden="true"></span>
     `;
   }
   getNavContent(number) {
@@ -8556,18 +8624,18 @@ __publicField(_Slider, "defaults", {
   transitionDuration: 700,
   transitionDurationExit: 400,
   transitionTimingFunction: "ease-in-out",
-  buttonClasses: ["Slider__control-icon", "button", "button--icon"],
-  iconClassesPrevious: ["css-icon", "css-icon--angle-left"],
-  iconClassesNext: ["css-icon", "css-icon--angle-right"]
+  buttonClasses: ["button", "button--icon"],
+  iconClassPrevious: wrapSettingString("iconClassPrevious"),
+  iconClassNext: wrapSettingString("iconClassNext")
   // transition: true
 });
 let Slider = _Slider;
 const slider = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   Slider,
-  attrs: attrs$6,
-  init: init$8,
-  setup: setup$6,
+  attrs: attrs$8,
+  init: init$a,
+  setup: setup$7,
   setupSlider: setupSlider$1
 }, Symbol.toStringTag, { value: "Module" }));
 var ariaTablist_min = { exports: {} };
@@ -8816,9 +8884,9 @@ const AriaTablist = /* @__PURE__ */ getDefaultExportFromCjs(ariaTablist_minExpor
 const initAttr = "data-ulu-tablist-init";
 const errorHeader = "[data-ulu-tablist] error:";
 const instances$1 = [];
-function init$7(options2 = {}) {
+function init$9(options = {}) {
   const initial = () => {
-    initWithin(document, options2);
+    initWithin(document, options);
     instances$1.forEach(openByCurrentHash);
   };
   if (document.readyState === "complete") {
@@ -8826,17 +8894,17 @@ function init$7(options2 = {}) {
   } else {
     window.addEventListener("load", initial);
   }
-  document.addEventListener("pageModified", (e) => initWithin(e.target, options2));
+  document.addEventListener("pageModified", (e) => initWithin(e.target, options));
 }
-function initWithin(context, options2 = {}) {
+function initWithin(context, options = {}) {
   if (!context) {
     console.warn("Missing context to initWithin, skipping init of tabs");
     return;
   }
   const tablists = context.querySelectorAll(`[data-ulu-tablist]:not([${initAttr}])`);
-  tablists.forEach((element) => setup$5(element, options2));
+  tablists.forEach((element) => setup$6(element, options));
 }
-function setup$5(element, options2 = {}) {
+function setup$6(element, options = {}) {
   let elementOptions = {};
   if (element.dataset.uluTablist) {
     try {
@@ -8845,11 +8913,11 @@ function setup$5(element, options2 = {}) {
       console.error(errorHeader, "(JSON Parse for options)", element);
     }
   }
-  const config2 = Object.assign({}, options2, elementOptions);
+  const config2 = Object.assign({}, options, elementOptions);
   if (config2.vertical) {
     config2.allArrows = true;
   }
-  const instance = { element, options: options2 };
+  const instance = { element, options };
   instance.ariaTablist = AriaTablist(element, {
     onOpen(...args) {
       args.unshift(instance);
@@ -8864,8 +8932,8 @@ function setup$5(element, options2 = {}) {
   element.setAttribute(initAttr, "");
   return instance;
 }
-function openByCurrentHash({ options: options2, ariaTablist }) {
-  if (options2.openByUrlHash) {
+function openByCurrentHash({ options, ariaTablist }) {
+  if (options.openByUrlHash) {
     const { hash } = window.location;
     if (hash && hash.length > 1) {
       const possibleId = hash.substring(1);
@@ -8877,8 +8945,8 @@ function openByCurrentHash({ options: options2, ariaTablist }) {
     }
   }
 }
-function handleOpen({ options: options2 }, panel, tab) {
-  if (options2.openByUrlHash && window.history) {
+function handleOpen({ options }, panel, tab) {
+  if (options.openByUrlHash && window.history) {
     window.history.replaceState(null, "", `#${tab.id}`);
   }
 }
@@ -8914,47 +8982,47 @@ function setHeights(element) {
 }
 const tabs = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  init: init$7,
+  init: init$9,
   initWithin,
   instances: instances$1,
-  setup: setup$5
+  setup: setup$6
 }, Symbol.toStringTag, { value: "Module" }));
-const attrs$5 = {
+const attrs$7 = {
   trigger: "data-ulu-proxy-click",
   init: "data-ulu-proxy-click-init"
 };
-const attrSelector$5 = (key2) => `[${attrs$5[key2]}]`;
-const attrSelectorInitial$4 = (key2) => `${attrSelector$5(key2)}:not([${attrs$5.init}])`;
-const defaults$3 = {
+const attrSelector$7 = (key2) => `[${attrs$7[key2]}]`;
+const attrSelectorInitial$5 = (key2) => `${attrSelector$7(key2)}:not([${attrs$7.init}])`;
+const defaults$6 = {
   selector: "[data-ulu-proxy-click-source]",
   selectorPreventBase: "input, select, textarea, button, a, [tabindex='-1']",
   selectorPrevent: "",
   mousedownDurationPrevent: 250
 };
-let currentDefaults = { ...defaults$3 };
-function setDefaults(options2) {
-  currentDefaults = Object.assign({}, currentDefaults, options2);
+let currentDefaults$1 = { ...defaults$6 };
+function setDefaults$1(options) {
+  currentDefaults$1 = Object.assign({}, currentDefaults$1, options);
 }
-function init$6() {
-  document.addEventListener(getName$1("pageModified"), () => setup$4());
-  setup$4();
+function init$8() {
+  document.addEventListener(getName$1("pageModified"), () => setup$5());
+  setup$5();
 }
-function setup$4(context = document) {
-  const proxies = context.querySelectorAll(attrSelectorInitial$4("trigger"));
+function setup$5(context = document) {
+  const proxies = context.querySelectorAll(attrSelectorInitial$5("trigger"));
   proxies.forEach((proxy) => {
     const elOptions = getDatasetOptionalJson(proxy, "siteProxyClick");
-    const options2 = Object.assign({}, currentDefaults, elOptions);
-    const child = proxy.querySelector(options2.selector);
+    const options = Object.assign({}, currentDefaults$1, elOptions);
+    const child = proxy.querySelector(options.selector);
     if (child) {
-      attachHandlers(proxy, child, options2);
-      proxy.setAttribute(attrs$5.init, "");
+      attachHandlers(proxy, child, options);
+      proxy.setAttribute(attrs$7.init, "");
     } else {
-      console.error("Unable to locate proxy click source", options2.selector);
+      console.error("Unable to locate proxy click source", options.selector);
     }
   });
 }
-function attachHandlers(proxy, child, options2) {
-  const { selectorPreventBase: spb, selectorPrevent: sp } = options2;
+function attachHandlers(proxy, child, options) {
+  const { selectorPreventBase: spb, selectorPrevent: sp } = options;
   const selectorPrevent = `${spb}${sp ? `, ${sp}` : ""}`;
   let start, shouldProxy;
   proxy.addEventListener("mousedown", ({ target, timeStamp }) => {
@@ -8965,7 +9033,7 @@ function attachHandlers(proxy, child, options2) {
     }
   });
   proxy.addEventListener("mouseup", ({ timeStamp }) => {
-    if (shouldProxy && timeStamp - start < options2.mousedownDurationPrevent) {
+    if (shouldProxy && timeStamp - start < options.mousedownDurationPrevent) {
       child.click();
     }
   });
@@ -8974,12 +9042,12 @@ function attachHandlers(proxy, child, options2) {
 const proxyClick = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   attachHandlers,
-  defaults: defaults$3,
-  init: init$6,
-  setDefaults,
-  setup: setup$4
+  defaults: defaults$6,
+  init: init$8,
+  setDefaults: setDefaults$1,
+  setup: setup$5
 }, Symbol.toStringTag, { value: "Module" }));
-const attrs$4 = {
+const attrs$6 = {
   init: "data-ulu-scrollpoint-init",
   /**
    * Individual scrollpoint
@@ -8990,19 +9058,19 @@ const attrs$4 = {
   // Goes on container for all items
   // group: "data-ulu-scrollpoint-group"
 };
-const attrSelector$4 = (key2) => `[${attrs$4[key2]}]`;
-const attrSelectorInitial$3 = (key2) => `${attrSelector$4(key2)}:not([${attrs$4.init}])`;
-const queryAllInitial$1 = (key2) => document.querySelectorAll(attrSelectorInitial$3(key2));
-function init$5() {
-  document.addEventListener(getName$1("pageModified"), setup$3);
-  setup$3();
+const attrSelector$6 = (key2) => `[${attrs$6[key2]}]`;
+const attrSelectorInitial$4 = (key2) => `${attrSelector$6(key2)}:not([${attrs$6.init}])`;
+const queryAllInitial$2 = (key2) => document.querySelectorAll(attrSelectorInitial$4(key2));
+function init$7() {
+  document.addEventListener(getName$1("pageModified"), setup$4);
+  setup$4();
 }
-function setup$3() {
-  const elements = queryAllInitial$1("point");
+function setup$4() {
+  const elements = queryAllInitial$2("point");
   elements.forEach((element) => {
     const elOptions = getDatasetOptionalJson(element, "uluScrollpoint");
     const config2 = Object.assign({}, elOptions);
-    element.setAttribute(attrs$4.init, "");
+    element.setAttribute(attrs$6.init, "");
     new Scrollpoint(element, config2);
   });
 }
@@ -9013,23 +9081,23 @@ const _Scrollpoint = class _Scrollpoint {
    * @param {Object} config Options to configure the scrollpoint see Scrollpoint.defaults for more information on settings
    */
   constructor(element, config2) {
-    const options2 = Object.assign({}, _Scrollpoint.defaults, config2);
+    const options = Object.assign({}, _Scrollpoint.defaults, config2);
     if (!element) {
       logError$1(this, "Missing required element");
       return;
     }
-    if (options2.rootSelector) {
-      options2.root = document.querySelector(options2.rootSelector);
-      delete options2.rootSelector;
+    if (options.rootSelector) {
+      options.root = document.querySelector(options.rootSelector);
+      delete options.rootSelector;
     }
-    this.options = options2;
+    this.options = options;
     this.observer = null;
     this.lastPosition = null;
     this.isActive = false;
     this.element = element;
     this.syncedElements = [
       element,
-      ...options2.syncElements.map((target) => getElement(target))
+      ...options.syncElements.map((target) => getElement(target))
     ];
     this.classes = {
       enter: this.getClassname("enter"),
@@ -9040,7 +9108,7 @@ const _Scrollpoint = class _Scrollpoint {
       exitReverse: this.getClassname("exit--from-reverse")
     };
     this.setupObserver();
-    if (options2.debug) {
+    if (options.debug) {
       console.log("Scrollpoint", this);
     }
   }
@@ -9058,14 +9126,14 @@ const _Scrollpoint = class _Scrollpoint {
    */
   onObserve(entries) {
     const y = this.getScrollY();
-    const { lastPosition, isActive, options: options2 } = this;
+    const { lastPosition, isActive, options } = this;
     const isForward = lastPosition === null ? null : lastPosition < y;
     entries.forEach((entry) => {
       const { isIntersecting } = entry;
       if (isIntersecting && !isActive) {
         this.setState(true, isForward);
-      } else if (!isIntersecting && isActive && options2.exit) {
-        if (isForward && options2.exitForward || !isForward && options2.exitReverse) {
+      } else if (!isIntersecting && isActive && options.exit) {
+        if (isForward && options.exitForward || !isForward && options.exitReverse) {
           this.setState(false, isForward);
         }
       }
@@ -9218,9 +9286,9 @@ let Scrollpoint = _Scrollpoint;
 const scrollpoint = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   Scrollpoint,
-  attrs: attrs$4,
-  init: init$5,
-  setup: setup$3
+  attrs: attrs$6,
+  init: init$7,
+  setup: setup$4
 }, Symbol.toStringTag, { value: "Module" }));
 function printOnly(content) {
   const w = window.open();
@@ -9232,32 +9300,32 @@ function printElement(element) {
   var content = element.innerHTML;
   printOnly(content);
 }
-const attrs$3 = {
+const attrs$5 = {
   trigger: "data-ulu-print",
   init: "data-ulu-print-init"
 };
-const attrSelector$3 = (key2) => `[${attrs$3[key2]}]`;
-const attrSelectorInitial$2 = (key2) => `${attrSelector$3(key2)}:not([${attrs$3.init}])`;
-const queryAllInitial = (key2) => document.querySelectorAll(attrSelectorInitial$2(key2));
-const defaults$2 = {
+const attrSelector$5 = (key2) => `[${attrs$5[key2]}]`;
+const attrSelectorInitial$3 = (key2) => `${attrSelector$5(key2)}:not([${attrs$5.init}])`;
+const queryAllInitial$1 = (key2) => document.querySelectorAll(attrSelectorInitial$3(key2));
+const defaults$5 = {
   /**
    * Print element/selector
    */
   element: null
 };
-function init$4() {
-  document.addEventListener(getName$1("pageModified"), setup$2);
-  setup$2();
+function init$6() {
+  document.addEventListener(getName$1("pageModified"), setup$3);
+  setup$3();
 }
-function setup$2() {
-  const triggers = queryAllInitial("trigger");
+function setup$3() {
+  const triggers = queryAllInitial$1("trigger");
   triggers.forEach((trigger) => {
-    const options2 = getDatasetOptionalJson(trigger, "uluPrint");
-    setupTrigger(trigger, options2);
+    const options = getDatasetOptionalJson(trigger, "uluPrint");
+    setupTrigger(trigger, options);
   });
 }
-function setupTrigger(trigger, options2) {
-  const config2 = Object.assign({}, defaults$2, options2);
+function setupTrigger(trigger, options) {
+  const config2 = Object.assign({}, defaults$5, options);
   trigger.addEventListener("click", (event) => {
     if (config2.element) {
       const element = getElement(config2.element);
@@ -9273,167 +9341,406 @@ function setupTrigger(trigger, options2) {
 }
 const print = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  attrs: attrs$3,
-  init: init$4
+  attrs: attrs$5,
+  init: init$6
 }, Symbol.toStringTag, { value: "Module" }));
-const attrs$2 = {
+const attrs$4 = {
   opened: "data-ulu-print-details-opened"
 };
-const attrSelector$2 = (key2) => `[${attrs$2[key2]}]`;
-const defaults$1 = {
+const attrSelector$4 = (key2) => `[${attrs$4[key2]}]`;
+const defaults$4 = {
   selector: "details:not([open])"
 };
-function init$3(options2) {
-  const config2 = Object.assign({}, defaults$1, options2);
+function init$5(options) {
+  const config2 = Object.assign({}, defaults$4, options);
   document.addEventListener(getName$1("beforePrint"), () => {
     document.querySelectorAll(config2.selector).forEach((details) => {
       if (!details.open) {
-        details.setAttribute(attrs$2.opened, true);
+        details.setAttribute(attrs$4.opened, true);
         details.open = true;
       }
     });
   });
   document.addEventListener(getName$1("afterPrint"), () => {
-    document.querySelectorAll(attrSelector$2("opened")).forEach((details) => {
-      details.removeAttribute(attrs$2.opened);
+    document.querySelectorAll(attrSelector$4("opened")).forEach((details) => {
+      details.removeAttribute(attrs$4.opened);
       details.open = false;
     });
   });
 }
 const printDetails = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  attrs: attrs$2,
-  init: init$3
+  attrs: attrs$4,
+  init: init$5
 }, Symbol.toStringTag, { value: "Module" }));
-const attrs$1 = {
+const attrs$3 = {
   init: "data-ulu-scroll-slider-init",
   slider: "data-ulu-scroll-slider",
   track: "data-ulu-scroll-slider-track",
   controls: "data-ulu-scroll-slider-control-context"
 };
-const attrSelector$1 = (key2) => `[${attrs$1[key2]}]`;
-const attrSelectorInitial$1 = (key2) => `${attrSelector$1(key2)}:not([${attrs$1.init}])`;
+const attrSelector$3 = (key2) => `[${attrs$3[key2]}]`;
+const attrSelectorInitial$2 = (key2) => `${attrSelector$3(key2)}:not([${attrs$3.init}])`;
 const instances = [];
-const defaults = {
+const defaults$3 = {
   amount: createPager()
 };
-function init$2() {
-  document.addEventListener(getName$1("pageModified"), setup$1);
-  setup$1();
+function init$4() {
+  document.addEventListener(getName$1("pageModified"), setup$2);
+  setup$2();
 }
-function setup$1() {
-  const builders = document.querySelectorAll(attrSelectorInitial$1("slider"));
+function setup$2() {
+  const builders = document.querySelectorAll(attrSelectorInitial$2("slider"));
   builders.forEach(setupSlider);
 }
 function setupSlider(container2) {
-  container2.setAttribute(attrs$1.init, "");
-  const options2 = getDatasetOptionalJson(container2, "uluScrollSlider");
-  const config2 = Object.assign({}, defaults, options2);
+  container2.setAttribute(attrs$3.init, "");
+  const options = getDatasetOptionalJson(container2, "uluScrollSlider");
+  const config2 = Object.assign({}, defaults$3, options);
   const elements = {
-    track: container2.querySelector(attrSelector$1("track")),
-    controls: container2.querySelector(attrSelector$1("controls"))
+    track: container2.querySelector(attrSelector$3("track")),
+    controls: container2.querySelector(attrSelector$3("controls"))
   };
   instances.push(new OverflowScroller(elements, config2));
 }
 const scrollSlider = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  attrs: attrs$1,
-  init: init$2,
-  setup: setup$1
+  attrs: attrs$3,
+  init: init$4,
+  setup: setup$2
 }, Symbol.toStringTag, { value: "Module" }));
-const attrs = {
-  trigger: "data-site-theme-toggle",
-  icon: "data-site-theme-toggle-icon",
-  init: "data-site-theme-toggle-init"
+const attrs$2 = {
+  init: "data-ulu-theme-toggle-init",
+  toggle: "data-ulu-theme-toggle",
+  toggleIcon: "data-ulu-theme-toggle-icon",
+  toggleLabel: "data-ulu-theme-toggle-label",
+  toggleRemote: "data-ulu-theme-toggle-remote",
+  state: "data-ulu-theme-toggle-state"
 };
-const attrSelector = (key2) => `[${attrs[key2]}]`;
-const attrSelectorInitial = (key2) => `${attrSelector(key2)}:not([${attrs.init}])`;
-const options = {
-  darkTheme: "theme-dark",
-  lightTheme: "theme-light",
-  defaultTheme: "dark",
-  darkIcon: "fa-solid fa-moon",
-  lightIcon: "fa-solid fa-sun"
+const attrSelector$2 = (key2) => `[${attrs$2[key2]}]`;
+const attrSelectorInitial$1 = (key2) => `${attrSelector$2(key2)}:not([${attrs$2.init}])`;
+const queryAllInitial = (key2) => document.querySelectorAll(attrSelectorInitial$1(key2));
+const queryRemotes = (group) => document.querySelectorAll(
+  `[${attrs$2.toggleRemote}="${group}"]`
+);
+const queryRemotesInitial = (group) => document.querySelectorAll(
+  `[${attrs$2.toggleRemote}="${group}"]:not([${attrs$2.init}])`
+);
+const debugLog = (...msgs) => console.log("Theme Toggle:", ...msgs);
+const requiredToggleProps = ["target"];
+const checkToggleProps = hasRequiredProps(requiredToggleProps);
+const when = (cond, fn) => cond ? fn() : null;
+const defaults$2 = {
+  /**
+   * 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(_ctx) {
+  },
+  /**
+   * 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: false,
+  /**
+   * Will store the preference in local storage so it persists between page loads
+   */
+  savePreference: false,
+  /**
+   * 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: false
 };
-const body = document.querySelector("[data-site-theme]");
-let currentTheme = body.classList.contains(options.darkTheme) ? options.darkTheme : options.lightTheme;
-const defaultThemeInverse = options.defaultTheme === "dark" ? "light" : "dark";
-function init$1() {
-  document.addEventListener(getName$1("beforePrint"), () => printSetup());
-  document.addEventListener(getName$1("afterPrint"), () => printTearDown());
-  setup();
+let currentDefaults = { ...defaults$2 };
+function setDefaults(options) {
+  currentDefaults = Object.assign({}, currentDefaults, options);
 }
-function setup(context = document) {
-  const body2 = context.querySelector("[data-site-theme]");
-  setupTheme(body2);
-  const elements = context.querySelectorAll(attrSelectorInitial("trigger"));
-  elements.forEach((element) => {
-    element.setAttribute(attrs.init, "");
-    element.addEventListener("click", () => {
-      changeTheme(body2);
+function init$3() {
+  document.addEventListener(getName$1("pageModified"), setup$1);
+  setup$1();
+}
+function setup$1() {
+  queryAllInitial("toggle").forEach(setupToggle);
+}
+function setupToggle(toggle, passedOptions) {
+  const elementOptions = getDatasetJson(toggle, "uluThemeToggle");
+  const options = Object.assign({}, defaults$2, passedOptions, elementOptions);
+  if (!checkToggleProps(options)) {
+    console.error(`Missing a required option: ${requiredToggleProps.join(", ")}`);
+    return;
+  }
+  const group = options.group;
+  const ctx = { toggle, options };
+  const initialKey = resolveInitial(options);
+  if (!initialKey) {
+    console.error("Unable to resolve initial key");
+    return;
+  }
+  setState$1(initialKey, ctx);
+  toggle.addEventListener("click", onToggleClick);
+  toggle.setAttribute(attrs$2.init, "");
+  attachRemotes();
+  document.addEventListener(getName$1("pageModified"), attachRemotes);
+  function toggleState(event) {
+    const targets = getElements(options.target);
+    const lastKey = targets[0].dataset.uluThemeToggleState;
+    const key2 = getNextThemeKey(lastKey, options);
+    if (!key2) {
+      console.error("Issue getting next theme key");
+      return;
+    }
+    setState$1(key2, { ...ctx, event });
+  }
+  function onToggleClick(event) {
+    toggleState(event);
+  }
+  function attachRemotes() {
+    if (!group) return;
+    const remotes = queryRemotesInitial(group);
+    remotes.forEach((remote) => {
+      remote.addEventListener("click", onToggleClick);
+      remote.setAttribute(attrs$2.init, "");
+    });
+  }
+  function cleanupRemotes() {
+    if (!group) return;
+    const remotes = queryRemotesInitial(group);
+    remotes.forEach((remote) => {
+      remote.removeEventListener("click", onToggleClick);
+      remote.removeAttribute(attrs$2.init, "");
     });
+  }
+  function destroy() {
+    toggle.removeEventListener("click", onToggleClick);
+    toggle.removeAttribute(attrs$2.init, "");
+    cleanupRemotes();
+    document.removeEventListener(getName$1("pageModified"), attachRemotes);
+  }
+  return {
+    destroy,
+    toggle,
+    options,
+    toggleState,
+    setState(themeKey) {
+      setState$1(themeKey, ctx);
+    }
+  };
+}
+function setState$1(key2, ctx) {
+  if (!key2) {
+    console.error("Missing key");
+    return;
+  }
+  const { toggle, options } = ctx;
+  const { themes, group } = options;
+  const elements = {
+    targets: getElements(options.target),
+    toggles: [toggle, ...group ? queryRemotes(group) : []]
+  };
+  if (!elements.targets.length || !elements.toggles.length) {
+    console.error("Issue setting state, couldn't find needed elements", elements);
+    return;
+  }
+  const theme = themes[key2];
+  const otherThemes = getOtherThemes(key2, themes);
+  const stateCtx = {
+    ...ctx,
+    key: key2,
+    elements,
+    theme,
+    otherThemes
+  };
+  if (options.debug) {
+    debugLog("set state context", stateCtx);
+  }
+  const otherTargetClasses = concatThemeClasses(otherThemes, "targetClass");
+  const otherIconClasses = concatThemeClasses(otherThemes, "iconClass");
+  elements.targets.forEach((element) => {
+    element.setAttribute(attrs$2.state, key2);
+    element.classList.remove(...otherTargetClasses);
+    element.classList.add(...resolveClasses(theme.targetClass));
   });
-  changeIcons();
-}
-function setupTheme(body2) {
-  const sitePreference = localStorage.getItem("data-theme");
-  const machinePreference = window.matchMedia && window.matchMedia(`(prefers-color-scheme: ${defaultThemeInverse})`).matches;
-  if (sitePreference && sitePreference != currentTheme) {
-    changeTheme(body2);
-  } else if (machinePreference) {
-    changeTheme(body2);
-  }
-}
-function changeTheme(body2) {
-  let newTheme;
-  let oldTheme;
-  if (body2.classList.contains(options.darkTheme)) {
-    oldTheme = options.darkTheme;
-    newTheme = options.lightTheme;
-  } else if (body2.classList.contains(options.lightTheme)) {
-    oldTheme = options.lightTheme;
-    newTheme = options.darkTheme;
-  }
-  body2.classList.remove(oldTheme);
-  body2.classList.add(newTheme);
-  localStorage.setItem("data-theme", newTheme);
-  currentTheme = newTheme;
-  changeIcons();
-}
-function changeIcons(context = document) {
-  const icons = context.querySelectorAll(attrSelectorInitial("icon"));
-  icons.forEach((icon) => {
-    if (currentTheme == options.lightTheme) {
-      icon.classList = options.darkIcon;
-    } else {
-      icon.classList = options.lightIcon;
+  elements.toggles.forEach((element) => {
+    const label = element.querySelector(attrSelector$2("toggleLabel"));
+    const icon = element.querySelector(attrSelector$2("toggleIcon"));
+    if (label) {
+      label.textContent = theme.label;
     }
+    if (icon) {
+      icon.classList.remove(...otherIconClasses);
+      icon.classList.add(...resolveClasses(theme.iconClass));
+    }
+    element.setAttribute(attrs$2.state, key2);
   });
-}
-function printSetup() {
-  const body2 = document.querySelector("body");
-  if (body2.classList.contains(options.darkTheme)) {
-    body2.classList.remove(options.darkTheme);
-    body2.classList.add(options.lightTheme);
+  if (options.onChange) {
+    options.onChange(stateCtx);
+  }
+  if (options.savePreference) {
+    localStorage.setItem(getStorageKey(options), key2);
   }
 }
-function printTearDown() {
-  const body2 = document.querySelector("body");
-  if (!body2.classList.contains(currentTheme)) {
-    body2.classList.remove(options.lightTheme);
-    body2.classList.add(options.darkTheme);
+function resolveInitial(options) {
+  const { savePreference, checkMediaQuery, themes, initialState } = options;
+  const storageKey = getStorageKey(options);
+  const saved = when(savePreference, () => localStorage.getItem(storageKey));
+  const mediaQueryPreference = when(checkMediaQuery, () => getMatchingThemeQuery(themes));
+  const resolved = saved || mediaQueryPreference || initialState;
+  if (options.debug) {
+    debugLog("Preference Saved:", saved);
+    debugLog("Media Query Preference:", mediaQueryPreference);
+    debugLog("Initial State:", initialState);
   }
+  if (!resolved) {
+    console.error("Failed to resolve initial theme (pass 'initialState' to options)");
+  }
+  return resolved;
+}
+function getMatchingThemeQuery(themes) {
+  const found = Object.entries(themes).find(([_key, theme]) => {
+    if (theme.mediaQuery) {
+      return window.matchMedia(theme.mediaQuery).matches;
+    }
+  });
+  return found ? found[0] : null;
+}
+function getNextThemeKey(activeKey, options) {
+  const { themes } = options;
+  const keys = Object.keys(themes);
+  const index2 = keys.findIndex((theme) => theme === activeKey);
+  const nextIndex = index2 === -1 ? 0 : (index2 + 1) % keys.length;
+  return keys[nextIndex];
+}
+function getOtherThemes(currentKey, themes) {
+  const all = Object.entries(themes);
+  return all.filter(([key2]) => key2 !== currentKey).map(([_key, value]) => value);
+}
+function concatThemeClasses(themes, property) {
+  return themes.reduce((acc, theme) => {
+    return acc.concat(resolveClasses(theme[property]));
+  }, []);
+}
+function getStorageKey(options) {
+  const { storagePrefix, group } = options;
+  return group ? `${storagePrefix}${group}` : storagePrefix;
 }
 const themeToggle = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  init: init$1,
-  options,
-  setup
+  attrs: attrs$2,
+  defaults: defaults$2,
+  init: init$3,
+  setDefaults,
+  setup: setup$1,
+  setupToggle
+}, Symbol.toStringTag, { value: "Module" }));
+const attrs$1 = {
+  init: "data-ulu-details-group-init",
+  childInit: "data-ulu-details-group-child-init",
+  group: "data-ulu-details-group"
+};
+const attrSelector$1 = (key2) => `[${attrs$1[key2]}]`;
+const attrSelectorInitial = (key2) => `${attrSelector$1(key2)}:not([${attrs$1.init}])`;
+const defaults$1 = {
+  onlyOneOpen: true,
+  childSelector: ":scope > details"
+};
+function init$2() {
+  document.addEventListener(getName$1("pageModified"), () => setup());
+  setup();
+}
+function setup(context = document) {
+  try {
+    const elements = context.querySelectorAll(attrSelectorInitial("group"));
+    return [...elements].map(setupGroup);
+  } catch (error) {
+    console.error(error);
+  }
+}
+function setupGroup(element) {
+  const elementOptions = getDatasetOptionalJson(element, "uluDetailsGroup");
+  const options = Object.assign({}, defaults$1, elementOptions);
+  element.setAttribute(attrs$1.t, "");
+  setupChildren();
+  function queryChildren() {
+    return element.querySelectorAll(options.childSelector);
+  }
+  function setupChildren() {
+    queryChildren().forEach((child) => {
+      if (child.hasAttribute(attrs$1.childInit)) {
+        return;
+      } else {
+        child.setAttribute(attrs$1.childInit, "");
+      }
+      console.log(child);
+      child.addEventListener("toggle", toggleHandler);
+    });
+  }
+  function toggleHandler({ target }) {
+    if (options.onlyOneOpen) {
+      if (target.open) {
+        queryChildren().forEach((child) => {
+          if (child !== target && child.open) {
+            child.open = false;
+          }
+        });
+      }
+    }
+  }
+  function destroy() {
+    queryChildren().forEach((child) => {
+      child.removeEventListener("toggle", toggleHandler);
+      child.removeAttribute(attrs$1.childInit);
+    });
+    element.removeAttribute(attrs$1.init);
+  }
+  return { destroy, element, setupChildren };
+}
+const detailsGroup = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  attrs: attrs$1,
+  init: init$2,
+  setup,
+  setupGroup
 }, Symbol.toStringTag, { value: "Module" }));
 const index$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   breakpoints,
   collapsible,
+  detailsGroup,
   dialog,
   flipcard,
   grid,
@@ -9461,8 +9768,8 @@ const _FileSave = class _FileSave {
    * @param {*} data Data to put in blob file
    * @param {FileSaveOptions} options Options for file, see defaults (ie. type, filename)
    */
-  constructor(data, options2) {
-    this.options = Object.assign({}, _FileSave.defaults, options2);
+  constructor(data, options) {
+    this.options = Object.assign({}, _FileSave.defaults, options);
     this.data = data;
     this.blob = new Blob([data], { type: this.options.type });
     this.url = URL.createObjectURL(this.blob);
@@ -9507,12 +9814,25 @@ const fileSave = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProp
   __proto__: null,
   FileSave
 }, Symbol.toStringTag, { value: "Module" }));
+function configureIcons() {
+  updateSettings({
+    iconClassClose: "fas fa-xmark",
+    iconClassDragX: "fas fa-solid fa-grip-lines-vertical",
+    iconClassPrevious: "fas fa-solid fa-chevron-left",
+    iconClassNext: "fas fa-solid fa-chevron-right"
+  });
+}
+const fontAwesome = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  configureIcons
+}, Symbol.toStringTag, { value: "Module" }));
 const index = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   classLogger,
   dom,
   fileSave,
   floatingUi,
+  fontAwesome,
   id,
   get index() {
     return index;
@@ -9522,6 +9842,7 @@ const index = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePropert
 const ulu = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   events: index$2,
+  settings,
   ui: index$1,
   utils: index
 }, Symbol.toStringTag, { value: "Module" }));
@@ -15599,9 +15920,9 @@ const instantsearch = /* @__PURE__ */ getDefaultExportFromCjs(instantsearch_prod
 const container = document.querySelector(".site-search");
 if (container) {
   console.log("init");
-  init();
+  init$1();
 }
-function init() {
+function init$1() {
   const searchClient = algoliasearch(
     "3PP8YC3MQX",
     "ab9e8106a1317eb9a3da408229b70590"
@@ -15636,22 +15957,112 @@ function init() {
   ]);
   search.start();
 }
+const attrs = {
+  container: "data-list-grid",
+  toggle: "data-list-grid-toggle",
+  toggleItemList: "data-list-grid-toggle-list",
+  toggleItemGrid: "data-list-grid-toggle-grid"
+};
+const defaults = {
+  activeClass: "is-active",
+  localStorageKey: "siteListGrid",
+  onChange() {
+  }
+};
+let config = defaults;
+const attrSelector = (key2) => `[${attrs[key2]}]`;
+function getPreference() {
+  return localStorage.getItem(config.localStorageKey);
+}
+function setConfig(changes) {
+  config = Object.assign({}, defaults, changes);
+}
+function init() {
+  const preference = getPreference();
+  const containers = document.querySelectorAll(attrSelector("container"));
+  if (!containers) return;
+  containers.forEach((container2) => {
+    const toggle = container2.querySelector(attrSelector("toggle"));
+    if (preference) {
+      setState(container2, preference);
+    }
+    if (toggle) {
+      toggle.addEventListener("click", onToggle);
+    }
+  });
+}
+function setState(container2, value) {
+  const toggle = container2.querySelector(attrSelector("toggle"));
+  container2.setAttribute(attrs.container, value);
+  localStorage.setItem(config.localStorageKey, value);
+  if (toggle) {
+    setStateToggle(toggle, value);
+  } else {
+    console.warn("Unable to get toggle for list grid");
+  }
+  if (config.onChange) {
+    try {
+      config.onChange(container2, value);
+    } catch (error) {
+      console.error(error);
+    }
+  }
+}
+function setStateToggle(toggle, value) {
+  const isList = value === "list";
+  const list = toggle.querySelector(attrSelector("toggleItemList"));
+  const grid2 = toggle.querySelector(attrSelector("toggleItemGrid"));
+  if (list && grid2) {
+    list.classList[isList ? "add" : "remove"](config.activeClass);
+    grid2.classList[isList ? "remove" : "add"](config.activeClass);
+  } else {
+    console.warn("Unable to get elements for setStateToggle()");
+  }
+}
+function onToggle() {
+  const container2 = this.closest(attrSelector("container"));
+  if (!container2) {
+    console.warn("Unable to find container list grid");
+    return;
+  }
+  const state = container2.getAttribute(attrs.container);
+  const to = state === "list" ? "grid" : "list";
+  setState(container2, to);
+}
 window.Ulu = ulu;
-init$f();
+configureIcons();
+init$h();
+init$d();
+init$c();
 init$b();
-init$a();
 init$9();
+init$f();
+init$g();
+init$8();
 init$7();
-init$d();
-init$e();
 init$6();
 init$5();
 init$4();
+init$a();
+init$e();
 init$3();
 init$2();
-init$8();
-init$c();
-init$1();
+setConfig({
+  onChange(container2, value) {
+    const isList = value === "list";
+    const cards = container2.querySelectorAll(".card");
+    const cardGrid = container2.querySelector(".card-grid");
+    if (cards) {
+      cards.forEach((card) => {
+        card.classList[isList ? "add" : "remove"]("card--horizontal");
+      });
+    }
+    if (cardGrid) {
+      cardGrid.classList[isList ? "add" : "remove"]("card-grid--one-column");
+    }
+  }
+});
+init();
 {
   __vitePreload(() => import("./chunks/modulepreload-polyfill.DaKOjhqt.js"), true ? [] : void 0, import.meta.url);
 }