@ulu/frontend 0.2.0-beta.9 → 0.3.0

package/dist/es/ui/slider.js

@@ -1,46 +1,70 @@
-var T = Object.defineProperty;
-var x = (a, t, s) => t in a ? T(a, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : a[t] = s;
-var m = (a, t, s) => x(a, typeof t != "symbol" ? t + "" : t, s);
-import { ComponentInitializer as S } from "../core/component.js";
-import { wrapSettingString as b } from "../core/settings.js";
-import k from "ally.js/maintain/_maintain";
-import { hasRequiredProps as $ } from "@ulu/utils/object.js";
-import { trimWhitespace as v } from "@ulu/utils/string.js";
-import { debounce as I } from "@ulu/utils/performance.js";
-import { logError as y, log as A, logWarning as L } from "../utils/class-logger.js";
-import z from "swipe-listener";
-const f = new S({
+var $ = Object.defineProperty;
+var w = Object.getOwnPropertySymbols;
+var I = Object.prototype.hasOwnProperty, A = Object.prototype.propertyIsEnumerable;
+var b = (o, t, s) => t in o ? $(o, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : o[t] = s, v = (o, t) => {
+  for (var s in t || (t = {}))
+    I.call(t, s) && b(o, s, t[s]);
+  if (w)
+    for (var s of w(t))
+      A.call(t, s) && b(o, s, t[s]);
+  return o;
+};
+var f = (o, t, s) => b(o, typeof t != "symbol" ? t + "" : t, s);
+var y = (o, t, s) => new Promise((e, i) => {
+  var n = (c) => {
+    try {
+      r(s.next(c));
+    } catch (u) {
+      i(u);
+    }
+  }, a = (c) => {
+    try {
+      r(s.throw(c));
+    } catch (u) {
+      i(u);
+    }
+  }, r = (c) => c.done ? e(c.value) : Promise.resolve(c.value).then(n, a);
+  r((s = s.apply(o, t)).next());
+});
+import { ComponentInitializer as z } from "../core/component.js";
+import { wrapSettingString as T } from "../core/settings.js";
+import { hasRequiredProps as D } from "@ulu/utils/object.js";
+import { trimWhitespace as L } from "@ulu/utils/string.js";
+import { debounce as M } from "@ulu/utils/performance.js";
+import { logError as x, log as B, logWarning as S } from "../utils/class-logger.js";
+import N from "swipe-listener";
+const C = new z({
   type: "slider",
   baseAttribute: "data-ulu-slider"
-}), D = f.attributeSelector("track"), M = f.attributeSelector("track-container"), B = f.attributeSelector("control-context"), N = f.attributeSelector("slide"), q = [], h = { once: !0 }, E = (a) => `${a}ms`, P = [
+}), q = C.attributeSelector("track"), P = C.attributeSelector("track-container"), V = C.attributeSelector("control-context"), F = C.attributeSelector("slide"), H = [], m = { once: !0 }, k = (o) => `${o}ms`, O = [
   "container",
   "trackContainer",
   "track",
   "slides"
 ];
-function K() {
-  f.init({
+function Y() {
+  C.init({
     withData: !0,
     coreEvents: ["pageModified"],
-    setup({ element: a, data: t, initialize: s }) {
-      V(a, t), s();
+    setup({ element: o, data: t, initialize: s }) {
+      R(o, t), s();
     }
   });
 }
-function V(a, t) {
+function R(o, t) {
   const s = Object.assign({}, t), e = {
-    container: a,
-    track: a.querySelector(D),
-    trackContainer: a.querySelector(M),
-    controlContext: a.querySelector(B),
-    slides: a.querySelectorAll(N)
+    container: o,
+    track: o.querySelector(q),
+    trackContainer: o.querySelector(P),
+    controlContext: o.querySelector(V),
+    slides: o.querySelectorAll(F)
   };
-  e.slides.length && q.push(new g(e, s, !1));
+  e.slides.length && H.push(new E(e, s, !1));
 }
 const l = class l {
   static _initializeGlobals() {
     l.globalsInitialized || (addEventListener("load", () => {
-      addEventListener("resize", I(() => {
+      addEventListener("resize", M(() => {
         l.instances.forEach((t) => t.handleResize());
       }, 250));
     }), l.reduceMotion = matchMedia("(prefers-reduced-motion: reduce)").matches, l.globalsInitialized = !0);
@@ -48,15 +72,11 @@ const l = class l {
   constructor(t, s) {
     l._initializeGlobals();
     const e = Object.assign({}, l.defaults, s);
-    this.options = e, this.slide = null, this.index = null, this.swipeInstance = null, this.swipeListener = null, this.swipeImageListener = null, this.transitioning = !1, $(P) || y(this, "Missing a required Element"), t.slides.length || y(this, "Missing slides"), this.slides = [...t.slides].map((i, n) => ({
+    this.options = e, this.slide = null, this.index = null, this.swipeInstance = null, this.swipeListener = null, this.swipeImageListener = null, this.transitioning = !1, D(O) || x(this, "Missing a required Element"), t.slides.length || x(this, "Missing slides"), this.slides = [...t.slides].map((i, n) => ({
       element: i,
       index: n,
       number: n + 1
-    })), this.elements = {
-      ...t,
-      ...this.createControls(t.controlContext || t.container),
-      ...this.createNav(t.navContext || t.container)
-    }, this.transition = e.transition ? e.transitionFade || l.reduceMotion ? this.fadeTransition : this.slideTransition : this.noTransition, this.setup(), this.goto(0, null, "init"), A(this, "Slider Instance Created", this), l.instances.push(this);
+    })), this.elements = v(v(v({}, t), this.createControls(t.controlContext || t.container)), this.createNav(t.navContext || t.container)), this.transition = e.transition ? e.transitionFade || l.reduceMotion ? this.fadeTransition : this.slideTransition : this.noTransition, this.setup(), this.goto(0, null, "init"), B(this, "Slider Instance Created", this), l.instances.push(this);
   }
   /**
    * Sliding mechanism needs translate updated on resize
@@ -69,8 +89,8 @@ const l = class l {
    * Goto to the previous slide
    */
   previous(t) {
-    const { index: s, slides: e } = this, i = e.length - 1, n = s - 1, o = n < 0 ? i : n;
-    this.emit("previous", [t, o]), this.goto(o, t, "previous");
+    const { index: s, slides: e } = this, i = e.length - 1, n = s - 1, a = n < 0 ? i : n;
+    this.emit("previous", [t, a]), this.goto(a, t, "previous");
   }
   /**
    * Goto to the next slide
@@ -88,12 +108,12 @@ const l = class l {
    */
   ensureTransitionEnds(t, s, e) {
     return new Promise((i) => {
-      const n = {}, o = () => {
+      const n = {}, a = () => {
         clearTimeout(n.start), n.end = setTimeout(r, s + 500);
       }, r = () => {
-        clearTimeout(n.start), clearTimeout(n.end), t.removeEventListener("transitionrun", o, h), t.removeEventListener("transitionend", r, h), t.removeEventListener("transitioncancel", r, h), i();
+        clearTimeout(n.start), clearTimeout(n.end), t.removeEventListener("transitionrun", a, m), t.removeEventListener("transitionend", r, m), t.removeEventListener("transitioncancel", r, m), i();
       };
-      t.addEventListener("transitionrun", o, h), t.addEventListener("transitionend", r, h), t.addEventListener("transitioncancel", r, h), n.start = setTimeout(r, s + 500), t.style.transitionDuration = E(s), e(), s || r();
+      t.addEventListener("transitionrun", a, m), t.addEventListener("transitionend", r, m), t.addEventListener("transitioncancel", r, m), n.start = setTimeout(r, s + 500), t.style.transitionDuration = k(s), e(), s || r();
     });
   }
   /**
@@ -126,16 +146,20 @@ const l = class l {
   /**
    * Handler for the entire slide transtion
    */
-  async slideTransition({ slide: t, index: s, old: e, oldIndex: i, triggerType: n }) {
-    const o = this.slides.length, r = n === "previous", C = o - 1, u = s === 0 && i === C, d = s === C && i === 0;
-    let c, p = this.options.transitionDuration;
-    i && !u && !d && (p = p * Math.abs(i - s)), o < 3 ? u && !r ? c = e : d && (c = r ? t : e) : u ? c = e : d && (c = t), this.setVisibility(null, !0), c && (c.element.style.order = "-1", await this.translateTo(u ? 0 : e.element.offsetLeft, 0)), await this.translateTo(t.element.offsetLeft, p), c && (c.element.style.order = "0", await this.translateTo(t.element.offsetLeft, 0)), this.setVisibility(t, !1);
+  slideTransition(a) {
+    return y(this, arguments, function* ({ slide: t, index: s, old: e, oldIndex: i, triggerType: n }) {
+      const r = this.slides.length, c = n === "previous", u = r - 1, h = s === 0 && i === u, p = s === u && i === 0;
+      let d, g = this.options.transitionDuration;
+      i && !h && !p && (g = g * Math.abs(i - s)), r < 3 ? h && !c ? d = e : p && (d = c ? t : e) : h ? d = e : p && (d = t), this.setVisibility(null, !0), d && (d.element.style.order = "-1", yield this.translateTo(h ? 0 : e.element.offsetLeft, 0)), yield this.translateTo(t.element.offsetLeft, g), d && (d.element.style.order = "0", yield this.translateTo(t.element.offsetLeft, 0)), this.setVisibility(t, !1);
+    });
   }
   /**
    * Handler for the entire fade transtion
    */
-  async fadeTransition({ slide: t, old: s }) {
-    this.setVisibility(null, !0), s && (await this.fadeSlide(s, !1), s.element.style.order = "0"), t.element.style.order = "-1", await this.fadeSlide(t, !0), this.setVisibility(t, !1);
+  fadeTransition(e) {
+    return y(this, arguments, function* ({ slide: t, old: s }) {
+      this.setVisibility(null, !0), s && (yield this.fadeSlide(s, !1), s.element.style.order = "0"), t.element.style.order = "-1", yield this.fadeSlide(t, !0), this.setVisibility(t, !1);
+    });
   }
   /**
    * Handler for the entire NO transtion
@@ -147,26 +171,25 @@ const l = class l {
     const {
       slide: i,
       index: n,
-      slides: o,
+      slides: a,
       elements: r
-    } = this, C = e === "init", u = o[t], d = this.getClass("nav-button--active"), c = this.getClass("transition", !0), p = { slide: u, index: t, old: i, oldIndex: n, triggerType: e };
+    } = this, c = e === "init", u = a[t], h = this.getClass("nav-button--active"), p = this.getClass("transition", !0), d = { slide: u, index: t, old: i, oldIndex: n, triggerType: e };
     if (t === n) {
-      L(this, "Could not goto slide, still performing transition");
+      S(this, "Could not goto slide, still performing transition");
       return;
     }
     if (this.transitioning) {
-      L(this, "Cancel goto(), same slide index as current slide");
+      S(this, "Cancel goto(), same slide index as current slide");
       return;
     }
-    const w = k.disabled({ context: this.elements.track });
-    this.transitioning = !0, i && i.navButton.classList.remove(d), u.navButton.classList.add(d), r.container.classList.add(c), this.transition(p).then(() => {
-      this.index = t, this.slide = u, this.transitioning = !1, r.container.classList.remove(c), w.disengage(), C || (u.element.focus(), this.emit("goto", [s, t, u]));
+    this.elements.track.inert = !0, this.transitioning = !0, i && i.navButton.classList.remove(h), u.navButton.classList.add(h), r.container.classList.add(p), this.transition(d).then(() => {
+      this.index = t, this.slide = u, this.transitioning = !1, this.elements.track.inert = !1, r.container.classList.remove(p), c || (u.element.focus(), this.emit("goto", [s, t, u]));
     });
   }
   setup() {
-    const { container: t, track: s, trackContainer: e } = this.elements, i = v(this.trackCss()), n = v(this.trackContainerStyles()), o = v(this.slideCss());
+    const { container: t, track: s, trackContainer: e } = this.elements, i = L(this.trackCss()), n = L(this.trackContainerStyles()), a = L(this.slideCss());
     s.setAttribute("style", i), e.setAttribute("style", n), this.slides.forEach((r) => {
-      r.element.setAttribute("style", o), r.element.setAttribute("tabindex", "-1");
+      r.element.setAttribute("style", a), r.element.setAttribute("tabindex", "-1");
     }), t.classList.add(this.getClass()), this.options.swipeEnabled && this.setupSwipe();
   }
   setupSwipe() {
@@ -177,7 +200,7 @@ const l = class l {
       s.preventDefault();
     }, this.slides.forEach((s) => {
       const { element: e } = s;
-      s.swipeInstance = z(e, this.options.swipeOptions), e.addEventListener("swipe", this.swipeListener);
+      s.swipeInstance = N(e, this.options.swipeOptions), e.addEventListener("swipe", this.swipeListener);
     }), t.forEach((s) => {
       s.addEventListener("dragstart", this.swipeImageListener);
     });
@@ -195,7 +218,7 @@ const l = class l {
     const { transitionTimingFunction: s, transitionDuration: e } = this.options;
     return `
       transition-property: ${t};
-      transition-duration: ${E(e)};
+      transition-duration: ${k(e)};
       transition-timing-function: ${s};
     `;
   }
@@ -225,19 +248,19 @@ const l = class l {
     return s.classList.add(this.getClass("control-button")), s.classList.add(this.getClass(`control-button--${t}`)), s.classList.add(...this.options.buttonClasses), s.setAttribute("data-slider-control", t), s.setAttribute("type", "button"), s.innerHTML = this.getControlContent(t), s;
   }
   createControls(t) {
-    const s = document.createElement("ul"), e = document.createElement("li"), i = document.createElement("li"), n = this.createControlButton("previous"), o = this.createControlButton("next");
-    return s.classList.add(this.getClass("controls")), e.appendChild(n), i.appendChild(o), s.appendChild(e), s.appendChild(i), n.addEventListener("click", this.previous.bind(this)), o.addEventListener("click", this.next.bind(this)), t.appendChild(s), {
+    const s = document.createElement("ul"), e = document.createElement("li"), i = document.createElement("li"), n = this.createControlButton("previous"), a = this.createControlButton("next");
+    return s.classList.add(this.getClass("controls")), e.appendChild(n), i.appendChild(a), s.appendChild(e), s.appendChild(i), n.addEventListener("click", this.previous.bind(this)), a.addEventListener("click", this.next.bind(this)), t.appendChild(s), {
       controls: s,
       previousItem: e,
       nextItem: i,
       previous: n,
-      next: o
+      next: a
     };
   }
   createNav(t) {
     const s = document.createElement("ul"), e = this.slides.map(this.createNavButton.bind(this)), i = e.map((n) => {
-      const o = document.createElement("li");
-      return o.appendChild(n), s.appendChild(o), o;
+      const a = document.createElement("li");
+      return a.appendChild(n), s.appendChild(a), a;
     });
     return s.classList.add(this.getClass("nav")), t.appendChild(s), {
       nav: s,
@@ -263,10 +286,10 @@ const l = class l {
     this.options.events[t] && this.options.events[t].apply(this, s);
   }
 };
-m(l, "instances", []), m(l, "globalsInitialized", !1), m(l, "reduceMotion", !1), /**
+f(l, "instances", []), f(l, "globalsInitialized", !1), f(l, "reduceMotion", !1), /**
  * Default options for slider
  */
-m(l, "defaults", {
+f(l, "defaults", {
   classAccessiblyHidden: "hidden-visually",
   namespace: "Slider",
   events: {},
@@ -276,17 +299,17 @@ m(l, "defaults", {
   transitionDurationExit: 400,
   transitionTimingFunction: "ease-in-out",
   buttonClasses: ["button", "button--icon"],
-  iconClassPrevious: b("iconClassPrevious"),
-  iconClassNext: b("iconClassNext"),
+  iconClassPrevious: T("iconClassPrevious"),
+  iconClassNext: T("iconClassNext"),
   swipeEnabled: !0,
   swipeOptions: {
     preventScroll: !0
   }
 });
-let g = l;
+let E = l;
 export {
-  g as Slider,
-  K as init,
-  f as initializer,
-  V as setupSlider
+  E as Slider,
+  Y as init,
+  C as initializer,
+  R as setupSlider
 };

package/dist/es/ui/tab-manager.d.ts

@@ -0,0 +1,145 @@
+/**
+ * @typedef {Object} TabManagerOptions
+ * @property {String|null} [orientation=null] - "horizontal"|"vertical", auto-detected if omitted.
+ * @property {Number} [initialIndex=0] - Index to activate on load.
+ * @property {Boolean} [allArrows=false] - Allow all arrow keys to navigate regardless of orientation.
+ * @property {Boolean} [openByUrlHash=false] - Activate tab based on URL hash on initialization.
+ * @property {Boolean} [setUrlHash=false] - Update URL hash when a new tab is activated.
+ * @property {Boolean} [equalHeights=false] - Automatically match the height of all panels.
+ * @property {Function|null} [onReady=null] - Callback fired after initialization: (instance) => {}
+ * @property {Function|null} [onChange=null] - Callback fired when tab changes: (active, previous) => {}
+ */
+/**
+ * Class for managing  Aria tabs
+ * - Designed to be minimal and lightweight but cover all traditional needs
+ * - Designed for static / traditional webpages (not SPA)
+ * - Separated from tabs.js so it can be used by itself as needed (tree-shaking)
+ */
+export class TabManager {
+    /**
+     * Default options for TabManager.
+     * @type {TabManagerOptions}
+     */
+    static defaults: TabManagerOptions;
+    /**
+     * @param {HTMLElement} tablistElement - The element with role="tablist"
+     * @param {Partial<TabManagerOptions>} [options] - Configuration options.
+     */
+    constructor(tablistElement: HTMLElement, options?: Partial<TabManagerOptions>);
+    tablist: HTMLElement;
+    options: {
+        /**
+         * - "horizontal"|"vertical", auto-detected if omitted.
+         */
+        orientation?: string | null | undefined;
+        /**
+         * - Index to activate on load.
+         */
+        initialIndex?: number | undefined;
+        /**
+         * - Allow all arrow keys to navigate regardless of orientation.
+         */
+        allArrows?: boolean | undefined;
+        /**
+         * - Activate tab based on URL hash on initialization.
+         */
+        openByUrlHash?: boolean | undefined;
+        /**
+         * - Update URL hash when a new tab is activated.
+         */
+        setUrlHash?: boolean | undefined;
+        /**
+         * - Automatically match the height of all panels.
+         */
+        equalHeights?: boolean | undefined;
+        /**
+         * - Callback fired after initialization: (instance) => {}
+         */
+        onReady?: Function | null | undefined;
+        /**
+         * - Callback fired when tab changes: (active, previous) => {}
+         */
+        onChange?: Function | null | undefined;
+    };
+    tabs: Element[];
+    panels: (HTMLElement | null)[];
+    currentIndex: number;
+    /**
+     * Handles keyboard navigation (arrows, Home, End) on the tab list.
+     * @param {KeyboardEvent} e - The keydown event.
+     * @private
+     */
+    private handleKeydown;
+    /**
+     * Handles click events on tabs, activating the corresponding panel.
+     * @param {MouseEvent} e - The click event.
+     * @private
+     */
+    private handleClick;
+    /**
+     * Calculates and applies equal heights to all panels.
+     * Waits for images within panels to load before calculating.
+     */
+    updatePanelHeights(): void;
+    orientation: string | undefined;
+    /**
+     * Sets the necessary ARIA attributes and initial states for tabs and panels.
+     * @private
+     */
+    private setupAttributes;
+    /**
+     * Attaches click and keydown event listeners to each tab.
+     * @private
+     */
+    private attachListeners;
+    /**
+     * Activates a tab. Can be called with an index or a tab ID string.
+     * @param {Number|String} indexOrId - The index or ID of the tab to activate.
+     * @param {Boolean} [triggerActions=true] - If false, will not fire onChange or set URL hash.
+     */
+    activate(indexOrId: number | string, triggerActions?: boolean): void;
+    /**
+     * Public method to activate a tab by its ID.
+     * @param {String} id - The ID of the tab element to activate.
+     */
+    activateById(id: string): void;
+    /**
+     * Removes event listeners, cleans up ARIA attributes, and resets the DOM to its pre-initialized state.
+     */
+    destroy(): void;
+}
+export type TabManagerOptions = {
+    /**
+     * - "horizontal"|"vertical", auto-detected if omitted.
+     */
+    orientation?: string | null | undefined;
+    /**
+     * - Index to activate on load.
+     */
+    initialIndex?: number | undefined;
+    /**
+     * - Allow all arrow keys to navigate regardless of orientation.
+     */
+    allArrows?: boolean | undefined;
+    /**
+     * - Activate tab based on URL hash on initialization.
+     */
+    openByUrlHash?: boolean | undefined;
+    /**
+     * - Update URL hash when a new tab is activated.
+     */
+    setUrlHash?: boolean | undefined;
+    /**
+     * - Automatically match the height of all panels.
+     */
+    equalHeights?: boolean | undefined;
+    /**
+     * - Callback fired after initialization: (instance) => {}
+     */
+    onReady?: Function | null | undefined;
+    /**
+     * - Callback fired when tab changes: (active, previous) => {}
+     */
+    onChange?: Function | null | undefined;
+};
+//# sourceMappingURL=tab-manager.d.ts.map

package/dist/es/ui/tab-manager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-manager.d.ts","sourceRoot":"","sources":["../../../lib/js/ui/tab-manager.js"],"names":[],"mappings":"AAOA;;;;;;;;;;GAUG;AAEH;;;;;GAKG;AACH;IACE;;;OAGG;IACH,iBAFU,iBAAiB,CAWzB;IAEF;;;OAGG;IACH,4BAHW,WAAW,YACX,OAAO,CAAC,iBAAiB,CAAC,EAqDpC;IAlDC,qBAA6B;IAC7B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAAqD;IACrD,gBAA6C;IAG7C,+BAGkB;IAElB,qBAAsB;IA8FxB;;;;OAIG;IACH,sBAgCC;IA/CD;;;;OAIG;IACH,oBAGC;IAoGD;;;OAGG;IACH,2BAoCC;IA1NC,gCAA4G;IA4B9G;;;OAGG;IACH,wBAyBC;IAED;;;OAGG;IACH,wBAKC;IAmDD;;;;OAIG;IACH,oBAHW,eAAa,kCA+CvB;IAED;;;OAGG;IACH,+BAEC;IA4CD;;OAEG;IACH,gBA6BC;CACF"}

package/dist/es/ui/tab-manager.js

@@ -0,0 +1,155 @@
+var y = Object.defineProperty;
+var b = Object.getOwnPropertySymbols;
+var A = Object.prototype.hasOwnProperty, x = Object.prototype.propertyIsEnumerable;
+var c = (h, t, i) => t in h ? y(h, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : h[t] = i, u = (h, t) => {
+  for (var i in t || (t = {}))
+    A.call(t, i) && c(h, i, t[i]);
+  if (b)
+    for (var i of b(t))
+      x.call(t, i) && c(h, i, t[i]);
+  return h;
+};
+var f = (h, t, i) => c(h, typeof t != "symbol" ? t + "" : t, i);
+import { ensureId as p } from "../utils/id.js";
+import { getCoreEventName as g } from "../core/events.js";
+const o = class o {
+  /**
+   * @param {HTMLElement} tablistElement - The element with role="tablist"
+   * @param {Partial<TabManagerOptions>} [options] - Configuration options.
+   */
+  constructor(t, i = {}) {
+    if (this.tablist = t, this.options = u(u({}, o.defaults), i), this.tabs = Array.from(this.tablist.children), this.panels = this.tabs.map((n) => {
+      const s = n.getAttribute("aria-controls");
+      return s ? document.getElementById(s) : null;
+    }).filter(Boolean), this.currentIndex = -1, this.handleKeydown = this.handleKeydown.bind(this), this.handleClick = this.handleClick.bind(this), this.updatePanelHeights = this.updatePanelHeights.bind(this), this.tabs.length === 0 || this.tabs.length !== this.panels.length) {
+      console.warn("TabManager: Tab/Panel count mismatch. Check aria-controls.", { tabs: this.tabs, panels: this.panels });
+      return;
+    }
+    this.orientation = this.options.orientation || this.tablist.getAttribute("aria-orientation") || "horizontal", this.setupAttributes(), this.attachListeners();
+    let e = this.options.initialIndex;
+    if (this.options.openByUrlHash) {
+      const n = window.location.hash.substring(1), s = this.tabs.findIndex((r) => r.id === n);
+      s > -1 && (e = s);
+    }
+    this.activate(e, !1), this.options.equalHeights && (this.updatePanelHeights(), document.addEventListener(g("pageResized"), this.updatePanelHeights)), this.options.onReady && this.options.onReady(this);
+  }
+  /**
+   * Sets the necessary ARIA attributes and initial states for tabs and panels.
+   * @private
+   */
+  setupAttributes() {
+    this.tablist.setAttribute("role", "tablist"), this.tabs.forEach((t, i) => {
+      const e = this.panels[i];
+      p(t), p(e), t.setAttribute("role", "tab"), t.hasAttribute("aria-controls") || t.setAttribute("aria-controls", e.id), e.setAttribute("role", "tabpanel"), e.setAttribute("aria-labelledby", t.id), e.hidden = !0, t.setAttribute("tabindex", "-1"), t.setAttribute("aria-selected", "false");
+    });
+  }
+  /**
+   * Attaches click and keydown event listeners to each tab.
+   * @private
+   */
+  attachListeners() {
+    this.tabs.forEach((t) => {
+      t.addEventListener("click", this.handleClick), t.addEventListener("keydown", this.handleKeydown);
+    });
+  }
+  /**
+   * Handles click events on tabs, activating the corresponding panel.
+   * @param {MouseEvent} e - The click event.
+   * @private
+   */
+  handleClick(t) {
+    const i = this.tabs.indexOf(t.currentTarget);
+    this.activate(i);
+  }
+  /**
+   * Handles keyboard navigation (arrows, Home, End) on the tab list.
+   * @param {KeyboardEvent} e - The keydown event.
+   * @private
+   */
+  handleKeydown(t) {
+    const i = this.tabs.indexOf(t.currentTarget);
+    let e = null;
+    const n = this.orientation === "vertical", s = this.options.allArrows, r = (this.tablist.dir === "rtl" || document.dir === "rtl") && this.tablist.dir !== "ltr", a = r ? "ArrowLeft" : "ArrowRight", l = r ? "ArrowRight" : "ArrowLeft";
+    t.key === "ArrowDown" ? (n || s) && (e = (i + 1) % this.tabs.length) : t.key === "ArrowUp" ? (n || s) && (e = (i - 1 + this.tabs.length) % this.tabs.length) : t.key === a ? (!n || s) && (e = (i + 1) % this.tabs.length) : t.key === l ? (!n || s) && (e = (i - 1 + this.tabs.length) % this.tabs.length) : t.key === "Home" ? e = 0 : t.key === "End" && (e = this.tabs.length - 1), e !== null && (t.preventDefault(), this.activate(e), this.tabs[e].focus());
+  }
+  /**
+   * Activates a tab. Can be called with an index or a tab ID string.
+   * @param {Number|String} indexOrId - The index or ID of the tab to activate.
+   * @param {Boolean} [triggerActions=true] - If false, will not fire onChange or set URL hash.
+   */
+  activate(t, i = !0) {
+    let e = -1;
+    if (typeof t == "string" ? e = this.tabs.findIndex((d) => d.id === t) : e = t, e < 0 || e >= this.tabs.length || this.currentIndex === e) return;
+    const n = this.currentIndex, s = n > -1 ? this.tabs[n] : null, r = n > -1 ? this.panels[n] : null;
+    s && (s.setAttribute("aria-selected", "false"), s.setAttribute("tabindex", "-1"), r.hidden = !0);
+    const a = this.tabs[e], l = this.panels[e];
+    a.setAttribute("aria-selected", "true"), a.setAttribute("tabindex", "0"), l.hidden = !1, this.currentIndex = e, i && this.options.setUrlHash && window.history && window.history.replaceState(null, "", `#${a.id}`), i && this.options.onChange && this.options.onChange(
+      { index: e, tab: a, panel: l },
+      { index: n, tab: s, panel: r }
+    );
+  }
+  /**
+   * Public method to activate a tab by its ID.
+   * @param {String} id - The ID of the tab element to activate.
+   */
+  activateById(t) {
+    this.activate(t, !0);
+  }
+  /**
+   * Calculates and applies equal heights to all panels.
+   * Waits for images within panels to load before calculating.
+   */
+  updatePanelHeights() {
+    if (!this.panels || this.panels.length === 0) return;
+    const t = this.panels[0].parentElement;
+    if (!t) return;
+    const i = [...t.querySelectorAll("img")], e = (s) => new Promise((r) => {
+      if (s.complete) return r(s);
+      s.onload = () => r(s), s.onerror = () => r(s);
+    }), n = i.map(e);
+    Promise.all(n).then(() => {
+      this.panels.forEach((a) => {
+        a.style.minHeight = "";
+      });
+      const s = this.panels.map((a) => {
+        const l = a.hidden;
+        a.hidden = !1;
+        const d = a.offsetHeight;
+        return a.hidden = l, d;
+      }), r = Math.max(...s);
+      r > 0 && this.panels.forEach((a) => {
+        a.style.minHeight = `${r}px`;
+      });
+    });
+  }
+  /**
+   * Removes event listeners, cleans up ARIA attributes, and resets the DOM to its pre-initialized state.
+   */
+  destroy() {
+    this.tabs.forEach((t) => {
+      t.removeEventListener("click", this.handleClick), t.removeEventListener("keydown", this.handleKeydown);
+    }), this.options.equalHeights && document.removeEventListener(g("pageResized"), this.updatePanelHeights), this.tablist.removeAttribute("role"), this.tabs.forEach((t) => {
+      t.removeAttribute("role"), t.removeAttribute("aria-selected"), t.removeAttribute("tabindex");
+    }), this.panels.forEach((t) => {
+      t.removeAttribute("role"), t.removeAttribute("aria-labelledby"), t.hidden = !1, t.style.minHeight = "";
+    }), this.tablist = null, this.tabs = [], this.panels = [], this.options = {}, this.currentIndex = -1;
+  }
+};
+/**
+ * Default options for TabManager.
+ * @type {TabManagerOptions}
+ */
+f(o, "defaults", {
+  orientation: null,
+  initialIndex: 0,
+  allArrows: !1,
+  openByUrlHash: !1,
+  setUrlHash: !1,
+  equalHeights: !1,
+  onReady: null,
+  onChange: null
+});
+let m = o;
+export {
+  m as TabManager
+};

package/dist/es/ui/tabs.d.ts

@@ -4,12 +4,12 @@ import { ComponentInitializer } from '../core/component.js';
  */
 export function init(): void;
 /**
- *
- * @param {Node} element Tablist Element
- * @param {Node} options Options to set as defaults (can be overridden by element dataset options)
- * @return {Object} Instance object
+ * Setup a new TabManager instance
+ * @param {HTMLElement} element Tablist Element
+ * @param {object} options Options to set as defaults
+ * @return {object} Instance object
  */
-export function setup(element: Node, options?: Node): Object;
+export function setup(element: HTMLElement, options?: object): object;
 /**
  * Array of current tab instances (exported if you need to interact with them)
  * @type {Array}

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

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