@ulu/frontend 0.6.29 → 0.6.30

package/dist/es/core/component.d.ts

@@ -24,6 +24,7 @@ export class ComponentInitializer {
      * Initializes the component based on the provided configuration.
      * @param {Object} config The initialization configuration.
      * @param {Function} config.setup The setup function to call for each element.
+     * @param {Function} config.update The update function to call for already initialized elements on coreEvents.
      * @param {String} config.key [null] The optional key to use with attribute selector.
      * @param {Boolean} config.withData [null] Whether to retrieve element data.
      * @param {Array} config.coreEvents [null] An array of core event names (e.g., 'pageModified') that should trigger a re-initialization.
@@ -31,6 +32,7 @@ export class ComponentInitializer {
      */
     init(config: {
         setup: Function;
+        update: Function;
         key: string;
         withData: boolean;
         coreEvents: any[];
@@ -50,6 +52,20 @@ export class ComponentInitializer {
         withData: boolean;
         context: HTMLElement;
     }): void;
+    /**
+     * Processes the already initialized elements based on the provided configuration.
+     * @param {object} config The initialization configuration.
+     * @param {function} config.update The update function to call for each element.
+     * @param {string} config.key The optional key to use with attribute selector.
+     * @param {boolean} config.withData [false] Whether to retrieve element data.
+     * @param {HTMLElement} config.context [document] The context to query within.
+     */
+    updateElements(config: {
+        update: Function;
+        key: string;
+        withData: boolean;
+        context: HTMLElement;
+    }): void;
     /**
      * Get an attribute name
      * @param {String} key Optional key, if no key will return baseAttribute if key will return key added to base
@@ -63,9 +79,21 @@ export class ComponentInitializer {
     attributeSelector(key: string): string;
     /**
      * Create an attribute selector for initial
+     * @param {String} key Optional key
      * @return {String}
      */
-    attributeSelectorInitial(key: any): string;
+    attributeSelectorInitial(key: string): string;
+    /**
+     * Create an attribute selector for initialized elements
+     * @param {String} key Optional key
+     * @return {String}
+     */
+    attributeSelectorInitialized(key: string): string;
+    /**
+     * Internal helper to query and map elements.
+     * @private
+     */
+    private queryElements;
     /**
      * Queries all main elements of a component that have not been initialized and extracts their data attributes.
      * @param {HTMLElement} context The context to query within.
@@ -78,6 +106,17 @@ export class ComponentInitializer {
         data: object;
         initialize: Function;
     }>;
+    /**
+     * Queries all main elements of a component that have already been initialized and extracts their data attributes.
+     * @param {HTMLElement} context The context to query within.
+     * @param {Boolean} withData Include dataset from element (as optional JSON)
+     * @param {Node} context Element to query elements from
+     * @returns {Array<{element: HTMLElement, data: object}>} An array of objects containing the elements and their data
+     */
+    queryAllInitialized(key: any, withData: boolean, context?: HTMLElement): Array<{
+        element: HTMLElement;
+        data: object;
+    }>;
     /**
      * Sets the init attribute on an element, marking it as initialized.
      * @param {HTMLElement} element The element to initialize.

package/dist/es/core/component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../lib/js/core/component.js"],"names":[],"mappings":"AAUA;;GAEG;AACH;IACE;;;MAGE;IACF,iCAGE;IACF,+BAEE;IAEF;;;;;OAKG;IACH,qBAHG;QAAwB,IAAI;QACJ,aAAa;KACvC,EASA;IAFC,eAAwE;IACxE,iBAAgD;IAElD;;;;;;;;OAQG;IACH,aANG;QAAyB,KAAK;QACP,GAAG;QACF,QAAQ;QACV,UAAU;QACJ,OAAO,EAA3B,WAAW;KACrB,QAcA;IACD;;;;;;;OAOG;IACH,sBALG;QAAyB,KAAK;QACP,GAAG,EAAlB,MAAM;QACU,QAAQ,EAAxB,OAAO;QACa,OAAO,EAA3B,WAAW;KACrB,QAKA;IACD;;;;OAIG;IACH,kCAGC;IACD;;;OAGG;IACH,uCAEC;IACD;;;OAGG;IACH,2CAEC;IACD;;;;;;OAMG;IACH,uDALW,WAAW,GAGT,KAAK,CAAC;QAAC,OAAO,EAAE,WAAW,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,UAAU,WAAU;KAAC,CAAC,CAS7E;IACD;;;OAGG;IACH,2BAFW,WAAW,QAIrB;IACD;;;OAGG;IACH,iCAFY,GAAC,CAKZ;IACD;;OAEG;IACH,0BAEC;IACD;;OAEG;IACH,2BAEC;IACD;;OAEG;IACH,+BAEC;CACF"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../lib/js/core/component.js"],"names":[],"mappings":"AAUA;;GAEG;AACH;IACE;;;MAGE;IACF,iCAGE;IACF,+BAEE;IAEF;;;;;OAKG;IACH,qBAHG;QAAwB,IAAI;QACJ,aAAa;KACvC,EASA;IAFC,eAAwE;IACxE,iBAAgD;IAElD;;;;;;;;;OASG;IACH,aAPG;QAAyB,KAAK;QACL,MAAM;QACR,GAAG;QACF,QAAQ;QACV,UAAU;QACJ,OAAO,EAA3B,WAAW;KACrB,QAmBA;IACD;;;;;;;OAOG;IACH,sBALG;QAAyB,KAAK;QACP,GAAG,EAAlB,MAAM;QACU,QAAQ,EAAxB,OAAO;QACa,OAAO,EAA3B,WAAW;KACrB,QAKA;IACD;;;;;;;OAOG;IACH,uBALG;QAAyB,MAAM;QACR,GAAG,EAAlB,MAAM;QACU,QAAQ,EAAxB,OAAO;QACa,OAAO,EAA3B,WAAW;KACrB,QAKA;IACD;;;;OAIG;IACH,kCAGC;IACD;;;OAGG;IACH,uCAEC;IACD;;;;OAIG;IACH,8CAEC;IACD;;;;OAIG;IACH,kDAEC;IACD;;;OAGG;IACH,sBAYC;IACD;;;;;;OAMG;IACH,uDALW,WAAW,GAGT,KAAK,CAAC;QAAC,OAAO,EAAE,WAAW,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,UAAU,WAAU;KAAC,CAAC,CAU7E;IACD;;;;;;OAMG;IACH,2DALW,WAAW,GAGT,KAAK,CAAC;QAAC,OAAO,EAAE,WAAW,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAC,CAAC,CAUvD;IACD;;;OAGG;IACH,2BAFW,WAAW,QAIrB;IACD;;;OAGG;IACH,iCAFY,GAAC,CAKZ;IACD;;OAEG;IACH,0BAEC;IACD;;OAEG;IACH,2BAEC;IACD;;OAEG;IACH,+BAEC;CACF"}

package/dist/es/core/component.js

@@ -1,11 +1,11 @@
-var h = Object.defineProperty;
-var c = (r, t, e) => t in r ? h(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
-var n = (r, t, e) => c(r, typeof t != "symbol" ? t + "" : t, e);
+var d = Object.defineProperty;
+var m = (n, t, e) => t in n ? d(n, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[t] = e;
+var o = (n, t, e) => m(n, typeof t != "symbol" ? t + "" : t, e);
 import { hasRequiredProps as p } from "@ulu/utils/object.js";
 import { getDatasetOptionalJson as b } from "@ulu/utils/browser/dom.js";
-import { dataAttributeToDatasetKey as d } from "../utils/dom.js";
-import { getCoreEventName as g } from "./events.js";
-const i = class i {
+import { dataAttributeToDatasetKey as E } from "../utils/dom.js";
+import { getCoreEventName as A } from "./events.js";
+const s = class s {
   /**
    * Create a new instance of ComponentInitializer
    * @param {Object} options Options for configuring the component initializer.
@@ -13,17 +13,18 @@ const i = class i {
    * @param {String} options.baseAttribute Prefix and base attribute name (used for base attribute and further element attribute names).
    */
   constructor(t) {
-    if (!i.hasRequiredOptions(t))
+    if (!s.hasRequiredOptions(t))
       throw new Error(
-        `Missing a required options: ${i.requiredOptions.join(", ")}`
+        `Missing a required options: ${s.requiredOptions.join(", ")}`
       );
-    this.options = Object.assign({}, i.defaults, t), this.logTitle = `ULU: ${this.options.type}:
+    this.options = Object.assign({}, s.defaults, t), this.logTitle = `ULU: ${this.options.type}:
 `;
   }
   /**
    * Initializes the component based on the provided configuration.
    * @param {Object} config The initialization configuration.
    * @param {Function} config.setup The setup function to call for each element.
+   * @param {Function} config.update The update function to call for already initialized elements on coreEvents.
    * @param {String} config.key [null] The optional key to use with attribute selector.
    * @param {Boolean} config.withData [null] Whether to retrieve element data.
    * @param {Array} config.coreEvents [null] An array of core event names (e.g., 'pageModified') that should trigger a re-initialization.
@@ -31,9 +32,11 @@ const i = class i {
    */
   init(t) {
     var e;
-    this.setupElements(t), (e = t.coreEvents) != null && e.length && t.coreEvents.forEach((s) => {
-      const o = g(s);
-      o && document.addEventListener(o, () => this.setupElements(t));
+    this.setupElements(t), (e = t.coreEvents) != null && e.length && t.coreEvents.forEach((i) => {
+      const r = A(i);
+      r && document.addEventListener(r, () => {
+        this.setupElements(t), t.update && this.updateElements(t);
+      });
     });
   }
   /**
@@ -45,8 +48,20 @@ const i = class i {
    * @param {HTMLElement} config.context [document] The context to query within.
    */
   setupElements(t) {
-    const { setup: e, key: s, withData: o, context: a } = t;
-    this.queryAllInitial(s, o, a).forEach((u) => e(u, this));
+    const { setup: e, key: i, withData: r, context: l } = t;
+    this.queryAllInitial(i, r, l).forEach((a) => e(a, this));
+  }
+  /**
+   * Processes the already initialized elements based on the provided configuration.
+   * @param {object} config The initialization configuration.
+   * @param {function} config.update The update function to call for each element.
+   * @param {string} config.key The optional key to use with attribute selector.
+   * @param {boolean} config.withData [false] Whether to retrieve element data.
+   * @param {HTMLElement} config.context [document] The context to query within.
+   */
+  updateElements(t) {
+    const { update: e, key: i, withData: r, context: l } = t;
+    this.queryAllInitialized(i, r, l).forEach((a) => e(a, this));
   }
   /**
    * Get an attribute name
@@ -66,11 +81,33 @@ const i = class i {
   }
   /**
    * Create an attribute selector for initial
+   * @param {String} key Optional key
    * @return {String}
    */
   attributeSelectorInitial(t) {
     return `${this.attributeSelector(t)}:not([${this.getAttribute("init")}])`;
   }
+  /**
+   * Create an attribute selector for initialized elements
+   * @param {String} key Optional key
+   * @return {String}
+   */
+  attributeSelectorInitialized(t) {
+    return `${this.attributeSelector(t)}[${this.getAttribute("init")}]`;
+  }
+  /**
+   * Internal helper to query and map elements.
+   * @private
+   */
+  queryElements(t, e, i, r = document, l = !1) {
+    return [...r.querySelectorAll(t)].map((a) => {
+      const h = {
+        element: a,
+        data: i ? this.getData(a, e) : null
+      };
+      return l && (h.initialize = () => this.initializeElement(a)), h;
+    });
+  }
   /**
    * Queries all main elements of a component that have not been initialized and extracts their data attributes.
    * @param {HTMLElement} context The context to query within.
@@ -78,12 +115,30 @@ const i = class i {
    * @param {Node} context Element to query elements from
    * @returns {Array<{element: HTMLElement, data: object, initialize: Function}>} An array of objects containing the elements, their data, and convenience function initialize() which when called will set the init attribute on the element
    */
-  queryAllInitial(t, e, s = document) {
-    return [...s.querySelectorAll(this.attributeSelectorInitial(t))].map((a) => ({
-      element: a,
-      data: e ? this.getData(a, t) : null,
-      initialize: () => this.initializeElement(a)
-    }));
+  queryAllInitial(t, e, i = document) {
+    return this.queryElements(
+      this.attributeSelectorInitial(t),
+      t,
+      e,
+      i,
+      !0
+    );
+  }
+  /**
+   * Queries all main elements of a component that have already been initialized and extracts their data attributes.
+   * @param {HTMLElement} context The context to query within.
+   * @param {Boolean} withData Include dataset from element (as optional JSON)
+   * @param {Node} context Element to query elements from
+   * @returns {Array<{element: HTMLElement, data: object}>} An array of objects containing the elements and their data
+   */
+  queryAllInitialized(t, e, i = document) {
+    return this.queryElements(
+      this.attributeSelectorInitialized(t),
+      t,
+      e,
+      i,
+      !1
+    );
   }
   /**
    * Sets the init attribute on an element, marking it as initialized.
@@ -97,8 +152,8 @@ const i = class i {
    * @return {*} The value of the dataset, if JSON will return object else will return string value or undefined
    */
   getData(t, e) {
-    const s = d(this.getAttribute(e));
-    return b(t, s);
+    const i = E(this.getAttribute(e));
+    return b(t, i);
   }
   /**
    * Will output namespaced console logs for the given initializer
@@ -119,16 +174,16 @@ const i = class i {
     console.error(this.logTitle, ...t);
   }
 };
-n(i, "defaults", {
+o(s, "defaults", {
   type: null,
   baseAttribute: null
-}), n(i, "requiredOptions", [
+}), o(s, "requiredOptions", [
   "type",
   "baseAttribute"
-]), n(i, "hasRequiredOptions", p(
-  i.requiredOptions
+]), o(s, "hasRequiredOptions", p(
+  s.requiredOptions
 ));
-let l = i;
+let c = s;
 export {
-  l as ComponentInitializer
+  c as ComponentInitializer
 };

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

@@ -1 +1 @@
-{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../../lib/js/ui/grid.js"],"names":[],"mappings":"AAeA;;;GAGG;AACH,8BAFW,MAAM,QAUhB;AApBD;;GAEG;AACH,+CAGG;qCATkC,sBAAsB"}
+{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../../lib/js/ui/grid.js"],"names":[],"mappings":"AAeA;;;GAGG;AACH,8BAFW,MAAM,QAahB;AAvBD;;GAEG;AACH,+CAGG;qCATkC,sBAAsB"}

package/dist/es/ui/grid.js

@@ -1,18 +1,21 @@
-import { ComponentInitializer as o } from "../core/component.js";
-import { setPositionClasses as n } from "../utils/dom.js";
-const r = new o({
+import { ComponentInitializer as n } from "../core/component.js";
+import { setPositionClasses as e } from "../utils/dom.js";
+const r = new n({
   type: "grid",
   baseAttribute: "data-grid"
 });
-function p(i) {
+function d(t) {
   r.init({
     coreEvents: ["pageModified", "pageResized"],
-    setup({ element: t, initialize: e }) {
-      n(t, i), e();
+    setup({ element: i, initialize: o }) {
+      e(i, t), o();
+    },
+    update({ element: i }) {
+      e(i, t);
     }
   });
 }
 export {
-  p as init,
+  d as init,
   r as initializer
 };

package/dist/es/ui/overflow-scroller.d.ts

@@ -17,8 +17,10 @@ export class OverflowScroller {
     nextEnabled: boolean;
     previousEnabled: boolean;
     scrollHandler: (e: any) => void;
+    updateHandler: () => void;
     checkOverflow(): void;
     hasOverflow: boolean | undefined;
+    update(): void;
     createControls(context: any): {
         controls: HTMLUListElement;
         previousItem: HTMLLIElement;
@@ -35,5 +37,6 @@ export class OverflowScroller {
     next(): void;
     previous(): void;
     getClass(child: any): string;
+    destroy(): void;
 }
 //# sourceMappingURL=overflow-scroller.d.ts.map

package/dist/es/ui/overflow-scroller.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"overflow-scroller.d.ts","sourceRoot":"","sources":["../../../lib/js/ui/overflow-scroller.js"],"names":[],"mappings":"AAmBA;IACE,wBAAsB;IACtB;;;;;;;;;;MAUC;IACD,wCAgBC;IAfC,aAAmE;IAKnE,cAGC;IACD,qBAAuB;IACvB,yBAA2B;IAC3B,gCAA4C;IAK9C,sBAGC;IADC,iCAAwD;IAE1D;;;;;;MA2BC;IACD,oDAQC;IACD,uCAMC;IACD,2BAGC;IACD,2BAiBC;IACD,8CAeC;IACD,6BAaC;IACD,aAMC;IACD,iBAMC;IACD,6BAGC;CACF"}
+{"version":3,"file":"overflow-scroller.d.ts","sourceRoot":"","sources":["../../../lib/js/ui/overflow-scroller.js"],"names":[],"mappings":"AAoBA;IACE,wBAAsB;IACtB;;;;;;;;;;MAUC;IACD,wCAqBC;IApBC,aAAmE;IAKnE,cAGC;IACD,qBAAuB;IACvB,yBAA2B;IAC3B,gCAA4C;IAG5C,0BAAwC;IAO1C,sBAGC;IADC,iCAAwD;IAE1D,eAGC;IACD;;;;;;MA2BC;IACD,oDAQC;IACD,uCAMC;IACD,2BAOC;IACD,2BAiBC;IACD,8CAeC;IACD,6BAaC;IACD,aAMC;IACD,iBAMC;IACD,6BAGC;IACD,gBAOC;CACF"}

package/dist/es/ui/overflow-scroller.js

@@ -1,64 +1,72 @@
 var x = Object.defineProperty;
 var f = Object.getOwnPropertySymbols;
-var E = Object.prototype.hasOwnProperty, L = Object.prototype.propertyIsEnumerable;
-var u = (i, s, t) => s in i ? x(i, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[s] = t, p = (i, s) => {
-  for (var t in s || (s = {}))
-    E.call(s, t) && u(i, t, s[t]);
+var L = Object.prototype.hasOwnProperty, g = Object.prototype.propertyIsEnumerable;
+var p = (i, e, t) => e in i ? x(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t, m = (i, e) => {
+  for (var t in e || (e = {}))
+    L.call(e, t) && p(i, t, e[t]);
   if (f)
-    for (var t of f(s))
-      L.call(s, t) && u(i, t, s[t]);
+    for (var t of f(e))
+      g.call(e, t) && p(i, t, e[t]);
   return i;
 };
-var m = (i, s, t) => u(i, typeof s != "symbol" ? s + "" : s, t);
-import { wrapSettingString as v } from "../core/settings.js";
-import { hasRequiredProps as g } from "@ulu/utils/object.js";
-import { logError as C } from "../utils/class-logger.js";
-const S = [
+var v = (i, e, t) => p(i, typeof e != "symbol" ? e + "" : e, t);
+import { wrapSettingString as C } from "../core/settings.js";
+import { hasRequiredProps as S } from "@ulu/utils/object.js";
+import { logError as b } from "../utils/class-logger.js";
+import { getCoreEventName as u } from "../core/events.js";
+const k = [
   "track",
   "controls"
 ], c = class c {
-  constructor(s, t) {
-    this.options = Object.assign({}, c.defaults, t), g(S) || C(this, "Missing a required Element"), this.elements = p(p({}, s), this.createControls(s.controls)), this.nextEnabled = !0, this.previousEnabled = !0, this.scrollHandler = (e) => this.onScroll(e), this.elements.track.addEventListener("scroll", this.scrollHandler, { passive: !0 }), this.checkOverflow(), this.onScroll();
+  constructor(e, t) {
+    this.options = Object.assign({}, c.defaults, t), S(k) || b(this, "Missing a required Element"), this.elements = m(m({}, e), this.createControls(e.controls)), this.nextEnabled = !0, this.previousEnabled = !0, this.scrollHandler = (s) => this.onScroll(s), this.elements.track.addEventListener("scroll", this.scrollHandler, { passive: !0 }), this.updateHandler = () => this.update(), document.addEventListener(u("pageResized"), this.updateHandler), document.addEventListener(u("pageModified"), this.updateHandler), this.checkOverflow(), this.onScroll();
   }
   checkOverflow() {
-    const { track: s } = this.elements;
-    this.hasOverflow = s.scrollWidth > s.clientWidth;
+    const { track: e } = this.elements;
+    this.hasOverflow = e.scrollWidth > e.clientWidth;
   }
-  createControls(s) {
-    const t = document.createElement("ul"), e = document.createElement("li"), o = document.createElement("li"), n = this.createControlButton("previous"), l = this.createControlButton("next"), r = this.getClass("controls-item");
-    return o.classList.add(r), o.classList.add(r + "--next"), e.classList.add(r), e.classList.add(r + "--previous"), t.classList.add(this.getClass("controls")), e.appendChild(n), o.appendChild(l), t.appendChild(e), t.appendChild(o), n.addEventListener("click", this.previous.bind(this)), l.addEventListener("click", this.next.bind(this)), s.appendChild(t), {
+  update() {
+    this.checkOverflow(), this.onScroll();
+  }
+  createControls(e) {
+    const t = document.createElement("ul"), s = document.createElement("li"), o = document.createElement("li"), n = this.createControlButton("previous"), l = this.createControlButton("next"), r = this.getClass("controls-item");
+    return o.classList.add(r), o.classList.add(r + "--next"), s.classList.add(r), s.classList.add(r + "--previous"), t.classList.add(this.getClass("controls")), s.appendChild(n), o.appendChild(l), t.appendChild(s), t.appendChild(o), n.addEventListener("click", this.previous.bind(this)), l.addEventListener("click", this.next.bind(this)), e.appendChild(t), {
       controls: t,
-      previousItem: e,
+      previousItem: s,
       nextItem: o,
       previous: n,
       next: l
     };
   }
-  createControlButton(s) {
+  createControlButton(e) {
     const t = document.createElement("button");
-    return t.classList.add(this.getClass("control-button")), t.classList.add(this.getClass(`control-button--${s}`)), t.classList.add(...this.options.buttonClasses), t.setAttribute("type", "button"), t.innerHTML = this.getControlContent(s), t;
+    return t.classList.add(this.getClass("control-button")), t.classList.add(this.getClass(`control-button--${e}`)), t.classList.add(...this.options.buttonClasses), t.setAttribute("type", "button"), t.innerHTML = this.getControlContent(e), t;
   }
-  getControlContent(s) {
-    const t = this.options[s === "next" ? "iconClassNext" : "iconClassPrevious"];
+  getControlContent(e) {
+    const t = this.options[e === "next" ? "iconClassNext" : "iconClassPrevious"];
     return `
-      <span class="hidden-visually">${s}</span>
+      <span class="hidden-visually">${e}</span>
       <span class="${t}" aria-hidden="true"></span>
     `;
   }
-  onScroll(s) {
-    this.hasOverflow && this.onScrollHorizontal();
+  onScroll(e) {
+    if (!this.hasOverflow) {
+      this.setControlState("previous", !1), this.setControlState("next", !1);
+      return;
+    }
+    this.onScrollHorizontal();
   }
   onScrollHorizontal() {
-    const { nextEnabled: s, previousEnabled: t } = this, { track: e } = this.elements, { offsetStart: o, offsetEnd: n } = this.options, { scrollWidth: l, clientWidth: r, scrollLeft: d } = e, a = d <= o, h = l - d - n <= r;
-    a && t ? this.setControlState("previous", !1) : !a && !t && this.setControlState("previous", !0), h && s ? this.setControlState("next", !1) : !h && !s && this.setControlState("next", !0);
+    const { nextEnabled: e, previousEnabled: t } = this, { track: s } = this.elements, { offsetStart: o, offsetEnd: n } = this.options, { scrollWidth: l, clientWidth: r, scrollLeft: d } = s, a = d <= o, h = l - d - n <= r;
+    a && t ? this.setControlState("previous", !1) : !a && !t && this.setControlState("previous", !0), h && e ? this.setControlState("next", !1) : !h && !e && this.setControlState("next", !0);
   }
-  setControlState(s, t) {
-    const e = s === "next", { next: o, nextItem: n, previous: l, previousItem: r } = this.elements, d = e ? n : r, a = e ? o : l, h = t ? "remove" : "add";
-    d.classList[h](this.getClass("controls-item--disabled")), a.classList[t ? "remove" : "add"](this.getClass("control--disabled")), t ? a.removeAttribute("disabled") : a.setAttribute("disabled", ""), this[e ? "nextEnabled" : "previousEnabled"] = t;
+  setControlState(e, t) {
+    const s = e === "next", { next: o, nextItem: n, previous: l, previousItem: r } = this.elements, d = s ? n : r, a = s ? o : l, h = t ? "remove" : "add";
+    d.classList[h](this.getClass("controls-item--disabled")), a.classList[t ? "remove" : "add"](this.getClass("control--disabled")), t ? a.removeAttribute("disabled") : a.setAttribute("disabled", ""), this[s ? "nextEnabled" : "previousEnabled"] = t;
   }
-  resolveAmount(s) {
-    const t = s === "next", { amount: e } = this.options, { scrollLeft: o, offsetWidth: n } = this.elements.track;
-    return e === "auto" ? t ? o + n : o - n : typeof e == "function" ? e(this, s) : typeof e == "number" ? t ? o + e : o - e : (C("Unable to resolve amount for scroll"), 500);
+  resolveAmount(e) {
+    const t = e === "next", { amount: s } = this.options, { scrollLeft: o, offsetWidth: n } = this.elements.track;
+    return s === "auto" ? t ? o + n : o - n : typeof s == "function" ? s(this, e) : typeof s == "number" ? t ? o + s : o - s : (b("Unable to resolve amount for scroll"), 500);
   }
   next() {
     this.elements.track.scrollTo({
@@ -74,12 +82,15 @@ const S = [
       behavior: "smooth"
     });
   }
-  getClass(s) {
+  getClass(e) {
     const { namespace: t } = this.options;
-    return `${t}__${s}`;
+    return `${t}__${e}`;
+  }
+  destroy() {
+    this.elements.track.removeEventListener("scroll", this.scrollHandler), document.removeEventListener(u("pageResized"), this.updateHandler), document.removeEventListener(u("pageModified"), this.updateHandler), this.elements.controls && this.elements.controls.parentNode && this.elements.controls.parentNode.removeChild(this.elements.controls);
   }
 };
-m(c, "instances", []), m(c, "defaults", {
+v(c, "instances", []), v(c, "defaults", {
   namespace: "OverflowScroller",
   events: {},
   horizontal: !0,
@@ -87,10 +98,10 @@ m(c, "instances", []), m(c, "defaults", {
   offsetEnd: 100,
   amount: "auto",
   buttonClasses: ["button", "button--icon"],
-  iconClassPrevious: v("iconClassPrevious"),
-  iconClassNext: v("iconClassNext")
+  iconClassPrevious: C("iconClassPrevious"),
+  iconClassNext: C("iconClassNext")
 });
-let b = c;
+let E = c;
 export {
-  b as OverflowScroller
+  E as OverflowScroller
 };

package/dist/es/utils/dom.d.ts

@@ -4,6 +4,13 @@
  * @returns {string} - The dataset property name (e.g., "uluDialog").
  */
 export function dataAttributeToDatasetKey(attribute: any): string;
+/**
+ * Groups a parent's children into rows based on their visual coordinates (top and left positions).
+ * Filters out hidden elements and sorts them visually to support CSS grid order properties.
+ * @param {HTMLElement} parent The grid/parent container
+ * @returns {HTMLElement[][]} A 2D array of rows, where each row is an array of elements in visual order.
+ */
+export function getVisualRows(parent: HTMLElement): HTMLElement[][];
 /**
  *   Sets up the positional classes that would come from the equal
  *   height module. Needs to be rerun by user when layout changes

package/dist/es/utils/dom.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../../../lib/js/utils/dom.js"],"names":[],"mappings":"AAMA;;;;GAIG;AACH,2DAFa,MAAM,CAIlB;AAED;;;;;;;;;GASG;AACH,2CAHa,IAAI,YACJ,MAAM,QAmClB;AAED;;;;;;;;GAQG;AACH,8CANa,MAAM,EAAE,CAiBpB"}
+{"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../../../lib/js/utils/dom.js"],"names":[],"mappings":"AAMA;;;;GAIG;AACH,2DAFa,MAAM,CAIlB;AAED;;;;;GAKG;AACH,sCAHW,WAAW,GACT,WAAW,EAAE,EAAE,CAqC3B;AAED;;;;;;;;;GASG;AACH,2CAHa,IAAI,YACJ,MAAM,QA0BlB;AAED;;;;;;;;GAQG;AACH,8CANa,MAAM,EAAE,CAiBpB"}

package/dist/es/utils/dom.js

@@ -1,29 +1,36 @@
-import { kebabToCamel as f } from "@ulu/utils/string.js";
+import { kebabToCamel as l } from "@ulu/utils/string.js";
+function u(t) {
+  return l(t.replace(/^data-/, ""));
+}
 function c(t) {
-  return f(t.replace(/^data-/, ""));
+  const s = [...t.children].map((e) => ({ child: e, rect: e.getBoundingClientRect() })).filter((e) => e.rect.width !== 0 || e.rect.height !== 0);
+  if (s.length === 0)
+    return [];
+  s.sort((e, i) => Math.abs(e.rect.top - i.rect.top) > 1 ? e.rect.top - i.rect.top : e.rect.left - i.rect.left);
+  const o = [];
+  let r = null;
+  return s.forEach(({ child: e, rect: i }) => {
+    (r === null || Math.abs(i.top - r) > 1) && (o.push([]), r = i.top), o[o.length - 1].push(e);
+  }), o;
 }
-function p(t, o = {
+function f(t, n = {
   columnFirst: "position-column-first",
   columnLast: "position-column-last",
   rowFirst: "position-row-first",
   rowLast: "position-row-last"
 }) {
-  const l = [...t.children], n = [];
-  let e;
-  l.forEach((r) => {
-    const s = r.getBoundingClientRect().y;
-    e !== s && n.push([]), n[n.length - 1].push(r), e = s, r.classList.remove(...Object.values(o));
-  }), n.forEach((r, s) => {
-    s === 0 && r.forEach((i) => i.classList.add(o.rowFirst)), s == n.length - 1 && r.forEach((i) => i.classList.add(o.rowLast)), r.forEach((i, a) => {
-      a === 0 && i.classList.add(o.columnFirst), a == r.length - 1 && i.classList.add(o.columnLast);
-    });
-  });
+  [...t.children].forEach((r) => r.classList.remove(...Object.values(n)));
+  const o = c(t);
+  o.length !== 0 && (o[0].forEach((r) => r.classList.add(n.rowFirst)), o[o.length - 1].forEach((r) => r.classList.add(n.rowLast)), o.forEach((r) => {
+    r[0].classList.add(n.columnFirst), r[r.length - 1].classList.add(n.columnLast);
+  }));
 }
-function m(t) {
-  return typeof t == "string" ? t.split(" ").filter((o) => o !== "") : Array.isArray(t) ? t : t ? (console.warn("resolveClassArray: Invalid class input type.", t), []) : [];
+function h(t) {
+  return typeof t == "string" ? t.split(" ").filter((n) => n !== "") : Array.isArray(t) ? t : t ? (console.warn("resolveClassArray: Invalid class input type.", t), []) : [];
 }
 export {
-  c as dataAttributeToDatasetKey,
-  m as resolveClasses,
-  p as setPositionClasses
+  u as dataAttributeToDatasetKey,
+  c as getVisualRows,
+  h as resolveClasses,
+  f as setPositionClasses
 };