ux4g-components-web 1.1.0 → 1.1.2

package/dist/runtime/index.mjs

@@ -1,297 +1,1112 @@
 /**
  * UX4G Runtime Module
  *
- * Framework-agnostic runtime that encapsulates all interactive behaviors
- * previously delivered via CDN scripts (ux4g.js, ux4g-custom.js).
- *
- * Behaviors: dropdown toggling, modal management, tooltip positioning,
- * accordion expand/collapse, carousel sliding, drawer open/close.
+ * Framework-agnostic runtime that encapsulates ALL interactive behaviors
+ * from the vendor CDN scripts (ux4g.js + ux4g-custom.js).
  *
  * Uses a singleton guard (window.__UX4G_RUNTIME_INITIALIZED__) to ensure
- * initialization happens exactly once, even when multiple components import
- * the bootstrap module.
+ * initialization happens exactly once.
  */
-/** Registry of all active event listeners for cleanup */
+const isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined';
 let activeListeners = [];
-/** Registry of active MutationObservers for cleanup */
 let activeObservers = [];
-// ─── Helper: register a listener for later cleanup ───────────────────────────
-function addListener(target, event, handler) {
-    target.addEventListener(event, handler);
-    activeListeners.push({ target, event, handler });
-}
-// ─── Dropdown Toggling ───────────────────────────────────────────────────────
-function initDropdowns() {
-    const handler = (e) => {
-        const target = e.target;
-        const trigger = target.closest('[data-ux4g-dropdown-toggle]');
-        if (trigger) {
-            e.preventDefault();
-            const dropdown = trigger.closest('.ux4g-dropdown');
-            if (dropdown) {
-                const isOpen = dropdown.classList.contains('is-open');
-                // Close all other open dropdowns
-                document.querySelectorAll('.ux4g-dropdown.is-open').forEach((el) => {
-                    if (el !== dropdown)
-                        el.classList.remove('is-open');
-                });
-                dropdown.classList.toggle('is-open', !isOpen);
+const Registry = new WeakMap();
+// ─── Utilities ───────────────────────────────────────────────────────────────
+const U = {
+    qs(sel, root = document) { return root.querySelector(sel); },
+    qsa(sel, root = document) { return Array.from(root.querySelectorAll(sel)); },
+    on(el, evt, cb, opts) { if (!el)
+        return; el.addEventListener(evt, cb, opts); activeListeners.push({ target: el, event: evt, handler: cb, options: opts }); },
+    off(el, evt, cb, opts) { if (!el)
+        return; el.removeEventListener(evt, cb, opts); },
+    closest(el, sel) { return el ? el.closest(sel) : null; },
+    isVisible(el) { const h = el; return !!(el && (h.offsetWidth || h.offsetHeight || el.getClientRects().length)); },
+    reflow(el) { return el.offsetHeight; },
+    attr(el, name, fallback = null) { if (!el)
+        return fallback; const v = el.getAttribute(name); return v == null ? fallback : v; },
+    data(el, key, fallback = null) {
+        if (!el)
+            return fallback;
+        const ux = el.getAttribute(`data-ux-${key}`);
+        if (ux != null)
+            return ux;
+        const bs = el.getAttribute(`data-bs-${key}`);
+        if (bs != null)
+            return bs;
+        const u4 = el.getAttribute(`ux4g-${key}`);
+        if (u4 != null)
+            return u4;
+        return fallback;
+    },
+    bool(v, fallback = false) { if (v == null)
+        return fallback; if (typeof v === 'boolean')
+        return v; const s = String(v).trim().toLowerCase(); if (s === '' || s === 'true' || s === '1')
+        return true; if (s === 'false' || s === '0')
+        return false; return fallback; },
+    num(v, fallback = 0) { const n = Number(v); return Number.isFinite(n) ? n : fallback; },
+    dispatch(el, name, detail) { if (!el)
+        return; el.dispatchEvent(new CustomEvent(name, { bubbles: true, cancelable: true, detail })); },
+    focusables(root) { if (!root)
+        return []; return U.qsa('a[href],area[href],button:not([disabled]),input:not([disabled]):not([type="hidden"]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"]),[contenteditable="true"]', root).filter(el => U.isVisible(el)); },
+    lockBody(lock) { if (lock)
+        document.body.classList.add('ux4g-scroll-lock');
+    else
+        document.body.classList.remove('ux4g-scroll-lock'); },
+    ensureBackdrop(kind) { let bd = U.qs(`.ux4g-backdrop[data-kind="${kind}"]`); if (!bd) {
+        bd = document.createElement('div');
+        bd.className = 'ux4g-backdrop';
+        bd.setAttribute('data-kind', kind);
+        document.body.appendChild(bd);
+    } return bd; },
+    removeBackdrop(kind) { const bd = U.qs(`.ux4g-backdrop[data-kind="${kind}"]`); if (bd)
+        bd.remove(); },
+    placeFloating(target, floating, placement = 'bottom', offset = 8) {
+        if (!target || !floating)
+            return;
+        const rect = target.getBoundingClientRect();
+        const od = floating.style.display;
+        const ov = floating.style.visibility;
+        floating.style.display = 'block';
+        floating.style.visibility = 'hidden';
+        const fr = floating.getBoundingClientRect();
+        floating.style.display = od;
+        floating.style.visibility = ov;
+        const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
+        const vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);
+        const clamp = (v, min, max) => Math.min(max, Math.max(min, v));
+        const ws = placement.split('-')[0];
+        const opp = { top: 'bottom', bottom: 'top', left: 'right', right: 'left' };
+        const tries = [placement];
+        if (opp[ws])
+            tries.push(placement.replace(ws, opp[ws]));
+        ['bottom', 'top', 'right', 'left'].forEach(s => { if (!tries.includes(s))
+            tries.push(s); });
+        const compute = (p) => {
+            let t = 0, l = 0;
+            const [side, align] = p.split('-');
+            if (side === 'top') {
+                t = rect.top - fr.height - offset;
+                l = align === 'start' ? rect.left : align === 'end' ? rect.right - fr.width : rect.left + (rect.width - fr.width) / 2;
+            }
+            else if (side === 'bottom') {
+                t = rect.bottom + offset;
+                l = align === 'start' ? rect.left : align === 'end' ? rect.right - fr.width : rect.left + (rect.width - fr.width) / 2;
+            }
+            else if (side === 'left') {
+                l = rect.left - fr.width - offset;
+                t = align === 'start' ? rect.top : align === 'end' ? rect.bottom - fr.height : rect.top + (rect.height - fr.height) / 2;
+            }
+            else if (side === 'right') {
+                l = rect.right + offset;
+                t = align === 'start' ? rect.top : align === 'end' ? rect.bottom - fr.height : rect.top + (rect.height - fr.height) / 2;
+            }
+            else {
+                t = rect.bottom + offset;
+                l = rect.left + (rect.width - fr.width) / 2;
+                p = 'bottom';
             }
+            return { t, l, p };
+        };
+        let chosen = null;
+        for (const p of tries) {
+            const c = compute(p);
+            if (c.t >= 0 && (c.t + fr.height) <= vh && c.l >= 0 && (c.l + fr.width) <= vw) {
+                chosen = c;
+                break;
+            }
+        }
+        if (!chosen)
+            chosen = compute(placement);
+        const top = clamp(chosen.t, 8, Math.max(8, vh - fr.height - 8));
+        const left = clamp(chosen.l, 8, Math.max(8, vw - fr.width - 8));
+        floating.style.position = 'fixed';
+        floating.style.top = `${top}px`;
+        floating.style.left = `${left}px`;
+        floating.setAttribute('data-placement', chosen.p);
+        const isTooltip = floating.classList.contains('ux4g-tooltip');
+        const base = isTooltip ? 'ux4g-tooltip' : 'ux4g-popover';
+        Array.from(floating.classList).forEach(cls => { if (cls.startsWith(`${base}-`) && cls !== base)
+            floating.classList.remove(cls); });
+        floating.classList.add(`${base}-${chosen.p}`);
+    },
+    repositionMenu(container, menu) {
+        if (!menu)
             return;
+        menu.style.top = '';
+        menu.style.bottom = '';
+        menu.style.left = '';
+        menu.style.right = '';
+        const vh = window.innerHeight;
+        const vw = window.innerWidth;
+        const mr = menu.getBoundingClientRect();
+        const cr = container.getBoundingClientRect();
+        if (mr.bottom > vh && cr.top > mr.height) {
+            menu.style.top = 'auto';
+            menu.style.bottom = '100%';
+        }
+        const ur = menu.getBoundingClientRect();
+        if (ur.right > vw) {
+            menu.style.left = 'auto';
+            menu.style.right = '0';
+        }
+        if (ur.left < 0) {
+            menu.style.left = '0';
+            menu.style.right = 'auto';
         }
-        // Close dropdowns when clicking outside
-        if (!target.closest('.ux4g-dropdown')) {
-            document.querySelectorAll('.ux4g-dropdown.is-open').forEach((el) => {
-                el.classList.remove('is-open');
-            });
+    },
+};
+function getI(el, key) { return Registry.get(el)?.[key] || null; }
+function setI(el, key, inst) { let m = Registry.get(el); if (!m) {
+    m = {};
+    Registry.set(el, m);
+} m[key] = inst; }
+function escapeHtml(s) { return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#039;'); }
+class DropdownComponent {
+    constructor(toggle) {
+        this._open = false;
+        this.toggle = toggle;
+        this.menu = this._findMenu(toggle);
+        U.on(this.toggle, 'click', ((e) => { e.preventDefault(); this.toggleDropdown(); }));
+        U.on(document, 'click', ((e) => { if (!this._open)
+            return; const t = e.target; if (this.menu && (this.menu.contains(t) || this.toggle.contains(t)))
+            return; this.hide(); }));
+        U.on(document, 'keydown', ((e) => { if (!this._open)
+            return; if (e.key === 'Escape') {
+            this.hide();
+            this.toggle.focus();
+        } }));
+    }
+    _findMenu(toggle) { const p = toggle.parentElement; let m = p ? p.querySelector('.dropdown-menu') : null; if (!m) {
+        const t = U.data(toggle, 'target') || U.attr(toggle, 'aria-controls');
+        if (t && t.startsWith('#'))
+            m = U.qs(t);
+    } return m; }
+    show() { if (!this.menu)
+        return; this._open = true; this.toggle.classList.add('show'); this.menu.classList.add('show'); this.toggle.setAttribute('aria-expanded', 'true'); U.placeFloating(this.toggle, this.menu, U.data(this.toggle, 'placement', 'bottom') || 'bottom', U.num(U.data(this.toggle, 'offset', '6'), 6)); U.dispatch(this.toggle, 'ux4g.dropdown.shown', { menu: this.menu }); }
+    hide() { if (!this.menu)
+        return; this._open = false; this.toggle.classList.remove('show'); this.menu.classList.remove('show'); this.toggle.setAttribute('aria-expanded', 'false'); U.dispatch(this.toggle, 'ux4g.dropdown.hidden', { menu: this.menu }); }
+    toggleDropdown() { this._open ? this.hide() : this.show(); }
+    static getOrCreate(el) { let i = getI(el, 'dropdown'); if (!i) {
+        i = new DropdownComponent(el);
+        setI(el, 'dropdown', i);
+    } return i; }
+}
+class CollapseComponent {
+    constructor(trigger) {
+        this.trigger = trigger;
+        this.target = this._resolveTarget(trigger);
+        this.parentSel = U.data(this.target, 'parent') || U.data(this.trigger, 'parent');
+        this.duration = this._readDur(this.target, 200);
+        U.on(this.trigger, 'click', ((e) => { e.preventDefault(); this.toggle(); }));
+    }
+    _resolveTarget(tr) { const s = U.data(tr, 'target') || U.attr(tr, 'href') || U.attr(tr, 'aria-controls') || U.attr(tr, 'ux4g-target'); if (s && s.startsWith('#'))
+        return U.qs(s); if (s)
+        return U.qs('#' + s); return null; }
+    _readDur(el, fb) { if (!el)
+        return fb; const d = getComputedStyle(el).transitionDuration || ''; const ms = d.includes('ms') ? parseFloat(d) : (d.includes('s') ? parseFloat(d) * 1000 : NaN); return Number.isFinite(ms) && ms > 0 ? ms : fb; }
+    show() {
+        if (!this.target)
+            return;
+        const t = this.target;
+        if (this.parentSel) {
+            const p = U.qs(this.parentSel);
+            if (p)
+                U.qsa('.collapse.show', p).forEach(el => { if (el === this.target)
+                    return; el.classList.remove('show'); if (el.id) {
+                    const id = el.id;
+                    U.qsa(`[data-bs-target="#${id}"],[data-ux-target="#${id}"],[ux4g-target="#${id}"],a[href="#${id}"]`).forEach(x => { x.classList.add('collapsed'); x.setAttribute('aria-expanded', 'false'); });
+                } });
         }
-    };
-    addListener(document, 'click', handler);
+        t.classList.add('collapsing');
+        t.classList.remove('collapse');
+        t.style.height = '0px';
+        U.reflow(t);
+        t.style.height = t.scrollHeight + 'px';
+        this.trigger.classList.remove('collapsed');
+        this.trigger.setAttribute('aria-expanded', 'true');
+        setTimeout(() => { t.classList.remove('collapsing'); t.classList.add('collapse', 'show'); t.style.height = ''; U.dispatch(t, 'ux4g.collapse.shown', {}); }, this.duration);
+    }
+    hide() {
+        if (!this.target)
+            return;
+        const t = this.target;
+        t.style.height = t.getBoundingClientRect().height + 'px';
+        U.reflow(t);
+        t.classList.add('collapsing');
+        t.classList.remove('collapse', 'show');
+        this.trigger.classList.add('collapsed');
+        this.trigger.setAttribute('aria-expanded', 'false');
+        setTimeout(() => { t.style.height = '0px'; }, 10);
+        setTimeout(() => { t.classList.remove('collapsing'); t.classList.add('collapse'); t.style.height = ''; U.dispatch(t, 'ux4g.collapse.hidden', {}); }, this.duration);
+    }
+    toggle() { if (!this.target)
+        return; this.target.classList.contains('show') ? this.hide() : this.show(); }
+    static getOrCreate(el) { let i = getI(el, 'collapse'); if (!i) {
+        i = new CollapseComponent(el);
+        setI(el, 'collapse', i);
+    } return i; }
 }
-// ─── Modal Management ────────────────────────────────────────────────────────
-function initModals() {
-    const openHandler = (e) => {
-        const target = e.target;
-        const trigger = target.closest('[data-ux4g-modal-open]');
-        if (trigger) {
+class ModalComponent {
+    constructor(el) {
+        this._shown = false;
+        this._bdKind = 'modal';
+        this._lastFocus = null;
+        this.el = el;
+        this.duration = 250;
+        U.on(this.el, 'click', ((e) => { const d = U.closest(e.target, '[data-bs-dismiss="modal"],[data-ux-dismiss="modal"],.close-modal'); if (d) {
             e.preventDefault();
-            const modalId = trigger.getAttribute('data-ux4g-modal-open');
-            if (modalId) {
-                const backdrop = document.getElementById(modalId);
-                if (backdrop) {
-                    backdrop.classList.add('is-open');
-                    document.body.style.overflow = 'hidden';
-                }
-            }
+            this.hide();
+        } }));
+        U.on(document, 'keydown', ((e) => { if (!this._shown)
+            return; if (e.key === 'Escape') {
+            if (U.bool(U.data(this.el, 'keyboard', 'true'), true))
+                this.hide();
+        }
+        else if (e.key === 'Tab') {
+            this._trapTab(e);
+        } }));
+    }
+    _trapTab(e) { const f = U.focusables(this.el); if (!f.length)
+        return; const first = f[0], last = f[f.length - 1]; if (e.shiftKey && document.activeElement === first) {
+        e.preventDefault();
+        last.focus();
+    }
+    else if (!e.shiftKey && document.activeElement === last) {
+        e.preventDefault();
+        first.focus();
+    } }
+    show(trigger) {
+        if (this._shown)
+            return;
+        this._shown = true;
+        this._lastFocus = document.activeElement;
+        const bo = U.data(this.el, 'backdrop', 'true');
+        if (bo !== 'false') {
+            const bd = U.ensureBackdrop(this._bdKind);
+            bd.classList.add('show');
+            U.on(bd, 'click', (() => { if (bo === 'static')
+                return; this.hide(); }));
+        }
+        U.lockBody(true);
+        this.el.style.display = 'block';
+        this.el.removeAttribute('aria-hidden');
+        this.el.setAttribute('aria-modal', 'true');
+        this.el.setAttribute('role', this.el.getAttribute('role') || 'dialog');
+        U.reflow(this.el);
+        this.el.classList.add('show');
+        if (U.bool(U.data(this.el, 'focus', 'true'), true)) {
+            const f = U.focusables(this.el);
+            (f[0] || this.el).focus({ preventScroll: true });
         }
-    };
-    const closeHandler = (e) => {
-        const target = e.target;
-        // Close button inside modal
-        const closeBtn = target.closest('[data-ux4g-modal-close]');
-        if (closeBtn) {
+        U.dispatch(this.el, 'ux4g.modal.shown', { relatedTarget: trigger || null });
+    }
+    hide() {
+        if (!this._shown)
+            return;
+        this._shown = false;
+        this.el.classList.remove('show');
+        this.el.setAttribute('aria-hidden', 'true');
+        this.el.removeAttribute('aria-modal');
+        setTimeout(() => { this.el.style.display = 'none'; U.lockBody(false); U.removeBackdrop(this._bdKind); if (this._lastFocus?.focus)
+            this._lastFocus.focus({ preventScroll: true }); U.dispatch(this.el, 'ux4g.modal.hidden', {}); }, this.duration);
+    }
+    toggle(trigger) { this._shown ? this.hide() : this.show(trigger); }
+    static getOrCreate(el) { let i = getI(el, 'modal'); if (!i) {
+        i = new ModalComponent(el);
+        setI(el, 'modal', i);
+    } return i; }
+}
+class OffcanvasComponent {
+    constructor(el) {
+        this._shown = false;
+        this._bdKind = 'offcanvas';
+        this._lastFocus = null;
+        this.duration = 250;
+        this.el = el;
+        U.on(this.el, 'click', ((e) => { const d = U.closest(e.target, '[data-bs-dismiss="offcanvas"],[data-ux-dismiss="offcanvas"]'); if (d) {
             e.preventDefault();
-            const backdrop = closeBtn.closest('.ux4g-modal-backdrop');
-            if (backdrop) {
-                backdrop.classList.remove('is-open');
-                document.body.style.overflow = '';
+            this.hide();
+        } }));
+        U.on(document, 'keydown', ((e) => { if (!this._shown)
+            return; if (e.key === 'Escape') {
+            if (U.bool(U.data(this.el, 'keyboard', 'true'), true))
+                this.hide();
+        }
+        else if (e.key === 'Tab') {
+            const f = U.focusables(this.el);
+            if (!f.length)
+                return;
+            const first = f[0], last = f[f.length - 1];
+            if (e.shiftKey && document.activeElement === first) {
+                e.preventDefault();
+                last.focus();
+            }
+            else if (!e.shiftKey && document.activeElement === last) {
+                e.preventDefault();
+                first.focus();
             }
+        } }));
+    }
+    show(trigger) {
+        if (this._shown)
             return;
+        this._shown = true;
+        this._lastFocus = document.activeElement;
+        const bo = U.data(this.el, 'backdrop', 'true');
+        if (bo !== 'false') {
+            const bd = U.ensureBackdrop(this._bdKind);
+            bd.classList.add('show');
+            U.on(bd, 'click', (() => { if (bo === 'static')
+                return; this.hide(); }));
         }
-        // Click on backdrop (outside modal box) closes modal
-        if (target.classList.contains('ux4g-modal-backdrop') && target.classList.contains('is-open')) {
-            target.classList.remove('is-open');
-            document.body.style.overflow = '';
-        }
-    };
-    const keyHandler = (e) => {
-        if (e.key === 'Escape') {
-            const openModal = document.querySelector('.ux4g-modal-backdrop.is-open');
-            if (openModal) {
-                openModal.classList.remove('is-open');
-                document.body.style.overflow = '';
-            }
+        U.lockBody(true);
+        this.el.style.visibility = 'visible';
+        this.el.classList.add('show');
+        this.el.setAttribute('aria-modal', 'true');
+        if (U.bool(U.data(this.el, 'focus', 'true'), true)) {
+            const f = U.focusables(this.el);
+            (f[0] || this.el).focus({ preventScroll: true });
         }
-    };
-    addListener(document, 'click', openHandler);
-    addListener(document, 'click', closeHandler);
-    addListener(document, 'keydown', keyHandler);
+        U.dispatch(this.el, 'ux4g.offcanvas.shown', { relatedTarget: trigger || null });
+    }
+    hide() {
+        if (!this._shown)
+            return;
+        this._shown = false;
+        this.el.classList.remove('show');
+        this.el.removeAttribute('aria-modal');
+        setTimeout(() => { this.el.style.visibility = ''; U.lockBody(false); U.removeBackdrop(this._bdKind); if (this._lastFocus?.focus)
+            this._lastFocus.focus({ preventScroll: true }); U.dispatch(this.el, 'ux4g.offcanvas.hidden', {}); }, this.duration);
+    }
+    toggle(trigger) { this._shown ? this.hide() : this.show(trigger); }
+    static getOrCreate(el) { let i = getI(el, 'offcanvas'); if (!i) {
+        i = new OffcanvasComponent(el);
+        setI(el, 'offcanvas', i);
+    } return i; }
 }
-// ─── Tooltip Positioning ─────────────────────────────────────────────────────
-function initTooltips() {
-    const showHandler = (e) => {
-        const target = e.target;
-        const trigger = target.closest('[data-ux4g-tooltip]');
-        if (trigger) {
-            const tooltipId = trigger.getAttribute('data-ux4g-tooltip');
-            if (tooltipId) {
-                const tooltip = document.getElementById(tooltipId);
-                if (tooltip) {
-                    tooltip.classList.add('show');
-                }
+class FloatingComponent {
+    constructor(el, kind) {
+        this._open = false;
+        this._floating = null;
+        this._onWin = null;
+        this._raf = null;
+        this.el = el;
+        this.kind = kind;
+        this.placement = U.data(el, 'placement', kind === 'tooltip' ? 'top' : 'right') || (kind === 'tooltip' ? 'top' : 'right');
+        this.offset = U.num(U.data(el, 'offset', '8'), 8);
+        this.triggerMode = U.data(el, 'trigger', kind === 'tooltip' ? 'hover focus' : 'click') || (kind === 'tooltip' ? 'hover focus' : 'click');
+        this.html = U.bool(U.data(el, 'html', 'false'), false);
+        this._bind();
+    }
+    _getContent() {
+        const content = U.data(this.el, 'content');
+        if (this.kind === 'popover') {
+            const title = U.data(this.el, 'title') || this.el.getAttribute('title') || '';
+            const body = content || this.el.getAttribute('data-content') || '';
+            const t = this.html ? String(title) : escapeHtml(title);
+            const b = this.html ? String(body) : escapeHtml(body);
+            return `<div class="ux4g-popover-header">${t}</div><div class="ux4g-popover-body">${b}</div>`;
+        }
+        const t = content != null ? content : (this.el.getAttribute('title') || '');
+        return this.html ? String(t) : escapeHtml(t);
+    }
+    _create() { if (this._floating)
+        return; const div = document.createElement('div'); div.className = this.kind === 'tooltip' ? 'ux4g-tooltip' : 'ux4g-popover'; div.setAttribute('role', this.kind === 'tooltip' ? 'tooltip' : 'dialog'); div.innerHTML = this._getContent() || ''; document.body.appendChild(div); this._floating = div; }
+    show() {
+        if (this._open)
+            return;
+        this._open = true;
+        if (this.kind === 'tooltip') {
+            const t = this.el.getAttribute('title');
+            if (t != null) {
+                this.el.setAttribute('data-ux-original-title', t);
+                this.el.removeAttribute('title');
             }
         }
-    };
-    const hideHandler = (e) => {
-        const target = e.target;
-        const trigger = target.closest('[data-ux4g-tooltip]');
-        if (trigger) {
-            const tooltipId = trigger.getAttribute('data-ux4g-tooltip');
-            if (tooltipId) {
-                const tooltip = document.getElementById(tooltipId);
-                if (tooltip) {
-                    tooltip.classList.remove('show');
-                }
+        this._create();
+        this._floating.style.display = 'block';
+        this._floating.classList.add('show');
+        const update = () => { if (!this._open)
+            return; U.placeFloating(this.el, this._floating, this.placement, this.offset); this._raf = requestAnimationFrame(update); };
+        this._onWin = update;
+        this._raf = requestAnimationFrame(update);
+        U.on(window, 'scroll', this._onWin, { capture: true, passive: true });
+        U.on(window, 'resize', this._onWin);
+        U.dispatch(this.el, `ux4g.${this.kind}.shown`, {});
+    }
+    hide() {
+        if (!this._open)
+            return;
+        this._open = false;
+        if (this._floating) {
+            this._floating.classList.remove('show');
+            this._floating.style.display = 'none';
+        }
+        if (this.kind === 'tooltip') {
+            const ot = this.el.getAttribute('data-ux-original-title');
+            if (ot != null) {
+                this.el.setAttribute('title', ot);
+                this.el.removeAttribute('data-ux-original-title');
             }
         }
-    };
-    addListener(document, 'mouseenter', showHandler);
-    addListener(document, 'mouseleave', hideHandler);
-    addListener(document, 'focusin', showHandler);
-    addListener(document, 'focusout', hideHandler);
+        if (this._raf) {
+            cancelAnimationFrame(this._raf);
+            this._raf = null;
+        }
+        if (this._onWin) {
+            U.off(window, 'scroll', this._onWin, { capture: true });
+            U.off(window, 'resize', this._onWin);
+            this._onWin = null;
+        }
+        U.dispatch(this.el, `ux4g.${this.kind}.hidden`, {});
+    }
+    toggle() { this._open ? this.hide() : this.show(); }
+    _bind() {
+        let triggers = String(this.triggerMode).split(/\s+/).filter(Boolean);
+        if (this.kind === 'popover') {
+            triggers = triggers.filter(t => t !== 'hover');
+            if (!triggers.length)
+                triggers = ['click'];
+        }
+        if (triggers.includes('hover')) {
+            U.on(this.el, 'mouseenter', (() => this.show()));
+            U.on(this.el, 'mouseleave', (() => this.hide()));
+        }
+        if (triggers.includes('focus')) {
+            U.on(this.el, 'focus', (() => this.show()));
+            U.on(this.el, 'blur', (() => this.hide()));
+        }
+        if (triggers.includes('click')) {
+            U.on(this.el, 'click', ((e) => { e.preventDefault(); this.toggle(); }));
+            U.on(document, 'click', ((e) => { if (!this._open)
+                return; const t = e.target; if (this.el.contains(t) || (this._floating && this._floating.contains(t)))
+                return; this.hide(); }));
+            U.on(document, 'keydown', ((e) => { if (!this._open)
+                return; if (e.key === 'Escape')
+                this.hide(); }));
+        }
+    }
+    static getOrCreate(el, kind) { let i = getI(el, kind); if (!i) {
+        i = new FloatingComponent(el, kind);
+        setI(el, kind, i);
+    } return i; }
 }
-// ─── Accordion Expand/Collapse ───────────────────────────────────────────────
-function initAccordions() {
-    const handler = (e) => {
-        const target = e.target;
-        const trigger = target.closest('[data-ux4g-accordion-toggle]');
-        if (trigger) {
+class ToastComponent {
+    constructor(el) {
+        this._timer = null;
+        this.el = el;
+        U.on(this.el, 'click', ((e) => { const d = U.closest(e.target, '[data-bs-dismiss="toast"],[data-ux-dismiss="toast"],.close-toast'); if (d) {
             e.preventDefault();
-            const item = trigger.closest('.ux4g-accordion-item');
-            if (item) {
-                const isExpanded = item.classList.contains('is-expanded');
-                item.classList.toggle('is-expanded', !isExpanded);
-                // Update aria-expanded attribute
-                trigger.setAttribute('aria-expanded', String(!isExpanded));
-                // Toggle the panel visibility
-                const panel = item.querySelector('.ux4g-accordion-panel');
-                if (panel) {
-                    panel.style.display = isExpanded ? 'none' : '';
-                }
-            }
-        }
-    };
-    addListener(document, 'click', handler);
+            this.hide();
+        } }));
+    }
+    show() { this.el.classList.add('show'); this.el.classList.remove('hide'); const ah = U.bool(U.data(this.el, 'autohide', 'true'), true); const delay = U.num(U.data(this.el, 'delay', '5000'), 5000); if (ah) {
+        if (this._timer)
+            clearTimeout(this._timer);
+        this._timer = setTimeout(() => this.hide(), delay);
+    } U.dispatch(this.el, 'ux4g.toast.shown', {}); }
+    hide() { this.el.classList.remove('show'); this.el.classList.add('hide'); if (this._timer)
+        clearTimeout(this._timer); U.dispatch(this.el, 'ux4g.toast.hidden', {}); }
+    static getOrCreate(el) { let i = getI(el, 'toast'); if (!i) {
+        i = new ToastComponent(el);
+        setI(el, 'toast', i);
+    } return i; }
 }
-// ─── Carousel Sliding ────────────────────────────────────────────────────────
-function initCarousels() {
-    const handler = (e) => {
-        const target = e.target;
-        // Next button
-        const nextBtn = target.closest('[data-ux4g-carousel-next]');
-        if (nextBtn) {
+class CarouselComponent {
+    constructor(el) {
+        this._timer = null;
+        this.el = el;
+        this.items = U.qsa('.carousel-item', el);
+        this.indicators = U.qsa('[data-bs-slide-to],[data-ux-slide-to]', el);
+        this.interval = U.num(U.data(el, 'interval', '5000'), 5000);
+        this.wrap = U.bool(U.data(el, 'wrap', 'true'), true);
+        U.on(el, 'click', ((e) => { const t = e.target; if (U.closest(t, '[data-bs-slide="prev"],[data-ux-slide="prev"]')) {
+            e.preventDefault();
+            this.prev();
+        } if (U.closest(t, '[data-bs-slide="next"],[data-ux-slide="next"]')) {
+            e.preventDefault();
+            this.next();
+        } const ind = U.closest(t, '[data-bs-slide-to],[data-ux-slide-to]'); if (ind) {
             e.preventDefault();
-            const carousel = nextBtn.closest('.ux4g-carousel');
-            if (carousel) {
-                const items = carousel.querySelectorAll('.ux4g-carousel-item');
-                const activeItem = carousel.querySelector('.ux4g-carousel-item.active');
-                if (activeItem && items.length > 0) {
-                    const currentIndex = Array.from(items).indexOf(activeItem);
-                    const nextIndex = (currentIndex + 1) % items.length;
-                    activeItem.classList.remove('active');
-                    items[nextIndex].classList.add('active');
+            this.to(U.num(ind.getAttribute('data-bs-slide-to') ?? ind.getAttribute('data-ux-slide-to'), 0));
+        } }));
+        if (U.data(el, 'pause', 'hover') === 'hover') {
+            U.on(el, 'mouseenter', (() => this._stop()));
+            U.on(el, 'mouseleave', (() => this._start()));
+        }
+        if (U.data(el, 'ride') === 'carousel')
+            this._start();
+    }
+    _activeIndex() { const idx = this.items.findIndex(i => i.classList.contains('active')); return idx >= 0 ? idx : 0; }
+    _setActive(ni) {
+        if (!this.items.length)
+            return;
+        const cur = this._activeIndex();
+        if (ni < 0)
+            ni = this.wrap ? this.items.length - 1 : 0;
+        if (ni >= this.items.length)
+            ni = this.wrap ? 0 : this.items.length - 1;
+        if (cur === ni)
+            return;
+        this.items[cur]?.classList.remove('active');
+        this.items[ni]?.classList.add('active');
+        this.indicators.forEach(ind => ind.classList.remove('active'));
+        const mi = this.indicators.find(x => U.num(x.getAttribute('data-bs-slide-to') ?? x.getAttribute('data-ux-slide-to'), -1) === ni);
+        if (mi)
+            mi.classList.add('active');
+        U.dispatch(this.el, 'ux4g.carousel.slid', { from: cur, to: ni });
+    }
+    next() { this._setActive(this._activeIndex() + 1); }
+    prev() { this._setActive(this._activeIndex() - 1); }
+    to(i) { this._setActive(i); }
+    _start() { if (this._timer || this.interval <= 0)
+        return; this._timer = setInterval(() => this.next(), this.interval); }
+    _stop() { if (this._timer) {
+        clearInterval(this._timer);
+        this._timer = null;
+    } }
+    static getOrCreate(el) { let i = getI(el, 'carousel'); if (!i) {
+        i = new CarouselComponent(el);
+        setI(el, 'carousel', i);
+    } return i; }
+}
+class TabComponent {
+    constructor(el) {
+        this.el = el;
+        U.on(el, 'click', ((e) => { e.preventDefault(); this.show(); }));
+        U.on(el, 'keydown', ((e) => { if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight')
+            return; const list = U.closest(this.el, ".nav, [role='tablist']"); if (!list)
+            return; const tabs = U.qsa("[data-bs-toggle='tab'],[data-ux-toggle='tab'],[role='tab']", list); const idx = tabs.indexOf(this.el); if (idx < 0)
+            return; e.preventDefault(); const n = e.key === 'ArrowRight' ? idx + 1 : idx - 1; const wi = (n + tabs.length) % tabs.length; tabs[wi].focus(); TabComponent.getOrCreate(tabs[wi]).show(); }));
+    }
+    _target() { const s = U.data(this.el, 'target') || U.attr(this.el, 'href') || U.attr(this.el, 'data-target'); if (s && s.startsWith('#'))
+        return U.qs(s); const c = this.el.getAttribute('aria-controls'); if (c)
+        return U.qs('#' + c); return null; }
+    show() {
+        const list = U.closest(this.el, ".nav, [role='tablist']");
+        const pane = this._target();
+        if (!list || !pane)
+            return;
+        U.qsa("[data-bs-toggle='tab'],[data-ux-toggle='tab'],[role='tab']", list).forEach(t => { t.classList.remove('active'); t.setAttribute('aria-selected', 'false'); t.setAttribute('tabindex', '-1'); });
+        this.el.classList.add('active');
+        this.el.setAttribute('aria-selected', 'true');
+        this.el.setAttribute('tabindex', '0');
+        const container = U.closest(pane, '.tab-content') || pane.parentElement;
+        if (container)
+            U.qsa('.tab-pane', container).forEach(p => p.classList.remove('active', 'show'));
+        pane.classList.add('active', 'show');
+        U.dispatch(this.el, 'ux4g.tab.shown', { relatedTarget: pane });
+    }
+    static getOrCreate(el) { let i = getI(el, 'tab'); if (!i) {
+        i = new TabComponent(el);
+        setI(el, 'tab', i);
+    } return i; }
+}
+class ScrollSpyComponent {
+    constructor(el) {
+        this._links = [];
+        this._sections = [];
+        this._io = null;
+        this.el = el;
+        this.targetSel = U.data(el, 'target');
+        this.offset = U.num(U.data(el, 'offset', '10'), 10);
+        this.refresh();
+        this._bind();
+    }
+    refresh() { const nav = this.targetSel ? U.qs(this.targetSel) : null; if (!nav)
+        return; this._links = U.qsa('a[href^="#"]', nav).filter(a => (a.getAttribute('href') || '').length > 1); this._sections = this._links.map(a => U.qs(a.getAttribute('href'))).filter(Boolean); }
+    _activate(id) { const nav = this.targetSel ? U.qs(this.targetSel) : null; if (!nav)
+        return; this._links.forEach(a => a.classList.remove('active')); const link = this._links.find(a => a.getAttribute('href') === '#' + id); if (link)
+        link.classList.add('active'); }
+    _bind() {
+        const container = (this.el === document.body || this.el === document.documentElement) ? window : this.el;
+        if ('IntersectionObserver' in window) {
+            const root = container === window ? null : this.el;
+            this._io = new IntersectionObserver((entries) => { const v = entries.filter(e => e.isIntersecting).sort((a, b) => b.intersectionRatio - a.intersectionRatio)[0]; if (v?.target?.id)
+                this._activate(v.target.id); }, { root, rootMargin: `-${this.offset}px 0px -60% 0px`, threshold: [0.1, 0.25, 0.5, 0.75] });
+            this._sections.forEach(s => this._io.observe(s));
+            activeObservers.push(this._io);
+            return;
+        }
+        const onScroll = () => { const st = container === window ? window.pageYOffset : this.el.scrollTop; let active = null; for (const s of this._sections) {
+            if (st + this.offset >= s.getBoundingClientRect().top + window.pageYOffset)
+                active = s;
+        } if (active?.id)
+            this._activate(active.id); };
+        U.on(container, 'scroll', onScroll, { passive: true });
+        onScroll();
+    }
+    static getOrCreate(el) { let i = getI(el, 'scrollspy'); if (!i) {
+        i = new ScrollSpyComponent(el);
+        setI(el, 'scrollspy', i);
+    } return i; }
+}
+class TableComponent {
+    constructor(el) { this.el = el; this._bindSort(); this._bindSelection(); }
+    _bindSort() { const cols = U.qsa('.ux4g-table-sortable th[data-sort]', this.el); cols.forEach(th => { U.on(th, 'click', ((e) => { if (U.closest(e.target, '.ux4g-table-filter-icon,.ux4g-search-input,.ux4g-search-clear'))
+        return; const cur = U.attr(th, 'data-sort', 'none'); const next = cur === 'asc' ? 'desc' : 'asc'; cols.forEach(o => { if (o !== th)
+        o.setAttribute('data-sort', 'none'); }); th.setAttribute('data-sort', next); const tbody = U.qs('tbody', this.el); if (tbody) {
+        const trs = Array.from(tbody.querySelectorAll('tr'));
+        const ci = Array.from(th.parentNode.children).indexOf(th);
+        trs.sort((a, b) => { const at = (a.children[ci]?.textContent || '').trim(); const bt = (b.children[ci]?.textContent || '').trim(); const an = Number(at.replace(/[₹$,\s]/g, '')); const bn = Number(bt.replace(/[₹$,\s]/g, '')); if (!isNaN(an) && !isNaN(bn))
+            return next === 'asc' ? an - bn : bn - an; const c = at.localeCompare(bt, undefined, { numeric: true, sensitivity: 'base' }); return next === 'asc' ? c : -c; });
+        trs.forEach(tr => tbody.appendChild(tr));
+    } U.dispatch(this.el, 'ux4g.table.sort', { column: th, direction: next }); })); }); }
+    _bindSelection() {
+        const sa = U.qs('thead .ux4g-checkbox', this.el);
+        if (!sa)
+            return;
+        const rcs = U.qsa('tbody .ux4g-checkbox', this.el);
+        if (!rcs.length)
+            return;
+        const upd = () => { let c = 0; rcs.forEach(cb => { const tr = U.closest(cb, 'tr'); if (cb.checked) {
+            c++;
+            if (tr)
+                tr.classList.add('ux4g-is-selected');
+        }
+        else {
+            if (tr)
+                tr.classList.remove('ux4g-is-selected');
+        } }); sa.checked = c === rcs.length; sa.indeterminate = c > 0 && c < rcs.length; };
+        U.on(sa, 'change', (() => { rcs.forEach(cb => { cb.checked = sa.checked; }); upd(); }));
+        rcs.forEach(cb => U.on(cb, 'change', upd));
+        upd();
+    }
+    static getOrCreate(el) { let i = getI(el, 'table'); if (!i) {
+        i = new TableComponent(el);
+        setI(el, 'table', i);
+    } return i; }
+}
+class ListComponent {
+    constructor(el) {
+        this.el = el;
+        U.on(this.el, 'click', ((e) => {
+            const t = e.target;
+            const item = U.closest(t, '.ux4g-list-item-row') || U.closest(t, '.ux4g-list-select-item');
+            if (!item)
+                return;
+            const isMulti = this.el.classList.contains('ux4g-multiselect') || this.el.classList.contains('ux4g-list-multiselect');
+            if (t.tagName === 'INPUT')
+                return;
+            const cb = U.qs('input[type="checkbox"]', item);
+            if (isMulti) {
+                const active = item.classList.toggle('active');
+                if (cb) {
+                    cb.checked = active;
+                    cb.dispatchEvent(new Event('change', { bubbles: true }));
                 }
             }
+            else {
+                const was = item.classList.contains('active');
+                U.qsa('.ux4g-list-item-row,.ux4g-list-select-item', this.el).forEach(i => { i.classList.remove('active'); const inp = U.qs('input', i); if (inp)
+                    inp.checked = false; });
+                if (!was) {
+                    item.classList.add('active');
+                    if (cb) {
+                        cb.checked = true;
+                        cb.dispatchEvent(new Event('change', { bubbles: true }));
+                    }
+                }
+            }
+            U.dispatch(this.el, 'ux4g.list.change', { item, active: item.classList.contains('active') });
+        }));
+    }
+    static getOrCreate(el) { let i = getI(el, 'list'); if (!i) {
+        i = new ListComponent(el);
+        setI(el, 'list', i);
+    } return i; }
+}
+// ─── Init + Custom Behaviors + Public API ────────────────────────────────────
+function init(root = document) {
+    U.qsa('[data-bs-toggle="dropdown"],[data-ux-toggle="dropdown"]', root).forEach(el => DropdownComponent.getOrCreate(el));
+    U.qsa('[data-bs-toggle="collapse"],[data-ux-toggle="collapse"],[ux4g-toggle="collapse"]', root).forEach(el => CollapseComponent.getOrCreate(el));
+    U.qsa('[data-bs-toggle="tab"],[data-ux-toggle="tab"]', root).forEach(el => TabComponent.getOrCreate(el));
+    U.qsa('[data-bs-toggle="tooltip"],[data-ux-toggle="tooltip"]', root).forEach(el => FloatingComponent.getOrCreate(el, 'tooltip'));
+    U.qsa('[data-bs-toggle="popover"],[data-ux-toggle="popover"]', root).forEach(el => FloatingComponent.getOrCreate(el, 'popover'));
+    U.qsa('.toast', root).forEach(el => ToastComponent.getOrCreate(el));
+    U.qsa('.carousel', root).forEach(el => CarouselComponent.getOrCreate(el));
+    U.qsa('[data-bs-spy="scroll"],[data-ux-spy="scroll"]', root).forEach(el => ScrollSpyComponent.getOrCreate(el));
+    U.qsa('.ux4g-table', root).forEach(el => TableComponent.getOrCreate(el));
+    U.qsa('.ux4g-list', root).forEach(el => ListComponent.getOrCreate(el));
+}
+function initDelegatedToggles() {
+    U.on(document, 'click', ((e) => {
+        const t = e.target;
+        const mb = U.closest(t, '[data-bs-toggle="modal"],[data-ux-toggle="modal"]');
+        if (mb) {
+            e.preventDefault();
+            const s = U.data(mb, 'target') || U.attr(mb, 'href');
+            const el = s && s.startsWith('#') ? U.qs(s) : null;
+            if (el)
+                ModalComponent.getOrCreate(el).toggle(mb);
             return;
         }
-        // Previous button
-        const prevBtn = target.closest('[data-ux4g-carousel-prev]');
-        if (prevBtn) {
+        const om = U.closest(t, '.open-modal');
+        if (om) {
             e.preventDefault();
-            const carousel = prevBtn.closest('.ux4g-carousel');
-            if (carousel) {
-                const items = carousel.querySelectorAll('.ux4g-carousel-item');
-                const activeItem = carousel.querySelector('.ux4g-carousel-item.active');
-                if (activeItem && items.length > 0) {
-                    const currentIndex = Array.from(items).indexOf(activeItem);
-                    const prevIndex = (currentIndex - 1 + items.length) % items.length;
-                    activeItem.classList.remove('active');
-                    items[prevIndex].classList.add('active');
-                }
-            }
+            const el = U.qs('#exampleModal');
+            if (el)
+                ModalComponent.getOrCreate(el).show(om);
+            return;
         }
-    };
-    addListener(document, 'click', handler);
-}
-// ─── Drawer Open/Close ───────────────────────────────────────────────────────
-function initDrawers() {
-    const openHandler = (e) => {
-        const target = e.target;
-        const trigger = target.closest('[data-ux4g-drawer-open]');
-        if (trigger) {
+        const ob = U.closest(t, '[data-bs-toggle="offcanvas"],[data-ux-toggle="offcanvas"]');
+        if (ob) {
             e.preventDefault();
-            const drawerId = trigger.getAttribute('data-ux4g-drawer-open');
-            if (drawerId) {
-                const drawer = document.getElementById(drawerId);
-                if (drawer) {
-                    drawer.classList.add('ux4g-drawer-open');
-                    document.body.style.overflow = 'hidden';
-                }
+            const s = U.data(ob, 'target') || U.attr(ob, 'href');
+            const el = s && s.startsWith('#') ? U.qs(s) : null;
+            if (el)
+                OffcanvasComponent.getOrCreate(el).toggle(ob);
+            return;
+        }
+        const ct = U.closest(t, '.close-toast');
+        if (ct) {
+            e.preventDefault();
+            const el = U.closest(ct, '.toast');
+            if (el)
+                ToastComponent.getOrCreate(el).hide();
+            return;
+        }
+        const cm = U.closest(t, '.close-modal');
+        if (cm) {
+            e.preventDefault();
+            const el = U.closest(cm, '.modal');
+            if (el)
+                ModalComponent.getOrCreate(el).hide();
+            return;
+        }
+    }));
+}
+function initCustomBehaviors() {
+    // Manual tooltip repositioning
+    U.on(document.body, 'mouseover', ((e) => { const w = U.closest(e.target, '.ux4g-tooltip-wrapper'); if (w) {
+        const tt = U.qs('.ux4g-tooltip', w);
+        if (tt && tt.dataset.uxAdjusted !== 'true') {
+            const vw = window.innerWidth;
+            const vh = window.innerHeight;
+            tt.style.transition = 'none';
+            tt.style.display = 'flex';
+            tt.style.opacity = '0';
+            tt.offsetHeight;
+            const r = tt.getBoundingClientRect();
+            let sx = 0, sy = 0;
+            if (r.left < 18)
+                sx = 18 - r.left;
+            else if (r.right > vw - 18)
+                sx = (vw - 18) - r.right;
+            if (r.top < 18)
+                sy = 18 - r.top;
+            else if (r.bottom > vh - 18)
+                sy = (vh - 18) - r.bottom;
+            if (sx || sy) {
+                tt.style.transform = `translate(${sx}px, ${sy}px)`;
+                tt.dataset.uxAdjusted = 'true';
             }
+            tt.style.display = '';
+            tt.style.opacity = '';
+            setTimeout(() => { tt.style.transition = ''; }, 50);
         }
-    };
-    const closeHandler = (e) => {
-        const target = e.target;
-        const closeBtn = target.closest('[data-ux4g-drawer-close]');
-        if (closeBtn) {
+    } }));
+    U.on(document.body, 'mouseout', ((e) => { const w = U.closest(e.target, '.ux4g-tooltip-wrapper'); if (w && !w.contains(e.relatedTarget)) {
+        const tt = U.qs('.ux4g-tooltip', w);
+        if (tt) {
+            tt.style.transform = '';
+            delete tt.dataset.uxAdjusted;
+        }
+    } }));
+    // Breadcrumb dropdowns
+    const bds = U.qsa('.ux4g-breadcrumb-dropdown');
+    if (bds.length) {
+        const closeBd = (d) => { const tg = U.qs('.ux4g-breadcrumb-toggle', d); const mn = U.qs('.ux4g-breadcrumb-menu', d); if (tg && mn) {
+            tg.classList.remove('show');
+            mn.classList.remove('show');
+            tg.setAttribute('aria-expanded', 'false');
+        } };
+        bds.forEach(d => {
+            const tg = U.qs('.ux4g-breadcrumb-toggle', d);
+            const mn = U.qs('.ux4g-breadcrumb-menu', d);
+            if (!tg || !mn)
+                return;
+            U.on(tg, 'click', ((e) => { e.preventDefault(); e.stopPropagation(); const isOpen = mn.classList.contains('show'); bds.forEach(x => closeBd(x)); if (!isOpen) {
+                tg.classList.add('show');
+                mn.classList.add('show');
+                tg.setAttribute('aria-expanded', 'true');
+                U.repositionMenu(d, mn);
+            } }));
+            U.on(mn, 'click', (() => closeBd(d)));
+        });
+        U.on(document, 'click', (() => bds.forEach(x => closeBd(x))));
+        U.on(document, 'keydown', ((e) => { if (e.key === 'Escape')
+            bds.forEach(x => closeBd(x)); }));
+    }
+    // Drawer
+    const closeDrawer = () => { const od = document.querySelector('.ux4g-drawer.ux4g-drawer-open'); const oo = document.querySelector('.ux4g-drawer-overlay.ux4g-drawer-open'); if (!od || !oo)
+        return; od.classList.remove('ux4g-drawer-open'); oo.classList.remove('ux4g-drawer-open'); document.body.classList.remove('ux4g-drawer-lock'); };
+    U.qsa('[data-drawer]').forEach(btn => { U.on(btn, 'click', (() => { const dr = document.getElementById(btn.getAttribute('data-drawer') || ''); if (!dr)
+        return; const ov = dr.closest('.ux4g-drawer-overlay'); document.querySelectorAll('.ux4g-drawer-open').forEach(el => el.classList.remove('ux4g-drawer-open')); if (ov)
+        ov.classList.add('ux4g-drawer-open'); dr.classList.add('ux4g-drawer-open'); document.body.classList.add('ux4g-drawer-lock'); })); });
+    U.on(document, 'click', ((e) => { if (U.closest(e.target, '[data-drawer-close]')) {
+        closeDrawer();
+        return;
+    } const ov = U.closest(e.target, '.ux4g-drawer-overlay'); if (ov && !U.closest(e.target, '.ux4g-drawer'))
+        closeDrawer(); }));
+    U.on(document, 'keydown', ((e) => { if (e.key === 'Escape')
+        closeDrawer(); }));
+    // Modal helpers (data-modal-target)
+    U.qsa('[data-modal-target]').forEach(btn => { U.on(btn, 'click', (() => { const s = btn.getAttribute('data-modal-target'); const m = s ? document.querySelector(s) : null; if (m) {
+        m.classList.add('is-open');
+        document.body.style.overflow = 'hidden';
+    } })); });
+    U.qsa('[data-close-modal]').forEach(btn => { U.on(btn, 'click', ((e) => { const m = U.closest(e.target, '.ux4g-modal-backdrop'); if (m) {
+        m.classList.remove('is-open');
+        document.body.style.overflow = '';
+    } })); });
+    // Search/filter
+    U.qsa('.ux4g-search-container').forEach(sw => {
+        const inp = U.qs('.ux4g-search-input', sw);
+        const cb = U.qs('.ux4g-search-clear', sw);
+        if (!inp)
+            return;
+        const toggle = () => { sw.classList.toggle('ux4g-has-value', inp.value.trim() !== ''); };
+        U.on(inp, 'input', toggle);
+        if (cb)
+            U.on(cb, 'click', (() => { inp.value = ''; toggle(); inp.focus(); }));
+        toggle();
+    });
+    // Textarea counter
+    U.on(document, 'input', ((e) => { const t = e.target; if (t.matches && t.matches('.ux4g-textarea-input')) {
+        const w = t.closest('.ux4g-textarea');
+        if (!w)
+            return;
+        const c = w.querySelector('.ux4g-textarea-counter');
+        if (c)
+            c.textContent = `${t.value.length} / ${t.getAttribute('maxlength') || '0'}`;
+    } }));
+    // Switch keyboard
+    U.on(document, 'keydown', ((e) => { if (e.key === 'Enter') {
+        const inp = U.closest(e.target, '.ux4g-switch-input');
+        if (inp && !inp.disabled) {
             e.preventDefault();
-            const drawer = closeBtn.closest('.ux4g-drawer');
-            if (drawer) {
-                drawer.classList.remove('ux4g-drawer-open');
-                document.body.style.overflow = '';
+            inp.checked = !inp.checked;
+            inp.dispatchEvent(new Event('change', { bubbles: true }));
+        }
+    } }));
+    // Custom dropdown (ux4g-dropdown)
+    const dds = Array.from(document.querySelectorAll('.ux4g-dropdown'));
+    if (dds.length) {
+        const closeDd = (d) => { d.classList.remove('is-open'); const c = U.qs('.ux4g-dropdown-control', d); if (c)
+            c.setAttribute('aria-expanded', 'false'); };
+        const openDd = (d) => { dds.forEach(x => { if (x !== d)
+            closeDd(x); }); d.classList.add('is-open'); const c = U.qs('.ux4g-dropdown-control', d); if (c)
+            c.setAttribute('aria-expanded', 'true'); const m = U.qs('.ux4g-dropdown-menu', d); if (m)
+            U.repositionMenu(d, m); };
+        dds.forEach(dd => {
+            const ctrl = U.qs('.ux4g-dropdown-control', dd);
+            const menu = U.qs('.ux4g-dropdown-menu', dd);
+            if (!ctrl || !menu)
+                return;
+            U.on(ctrl, 'click', ((ev) => { if (U.closest(ev.target, '[ux4g-dropdown-search]')) {
+                if (!dd.classList.contains('is-open'))
+                    openDd(dd);
+                return;
+            } ev.preventDefault(); ev.stopPropagation(); dd.classList.contains('is-open') ? closeDd(dd) : openDd(dd); }));
+            U.on(menu, 'click', ((ev) => { const ch = U.closest(ev.target, '[ux4g-dropdown-choice]'); if (ch) {
+                ev.stopPropagation();
+                closeDd(dd);
+            } }));
+            U.on(menu, 'change', ((ev) => { const inp = U.closest(ev.target, '.ux4g-dropdown-option-input'); if (!inp)
+                return; if (!dd.classList.contains('ux4g-dropdown-multi'))
+                closeDd(dd); }));
+        });
+        U.on(document, 'click', ((ev) => { dds.forEach(d => { if (!d.contains(ev.target))
+            closeDd(d); }); }));
+        U.on(document, 'keydown', ((ev) => { if (ev.key === 'Escape')
+            dds.forEach(d => closeDd(d)); }));
+    }
+    // Combobox
+    const cbs = Array.from(document.querySelectorAll('.ux4g-combobox'));
+    if (cbs.length) {
+        const closeCb = (c) => { c.classList.remove('is-open'); const ctrl = U.qs('.ux4g-combobox-control', c); if (ctrl)
+            ctrl.setAttribute('aria-expanded', 'false'); };
+        const openCb = (c) => { cbs.forEach(x => { if (x !== c)
+            closeCb(x); }); c.classList.add('is-open'); const ctrl = U.qs('.ux4g-combobox-control', c); if (ctrl)
+            ctrl.setAttribute('aria-expanded', 'true'); const m = U.qs('.ux4g-combobox-menu', c); if (m)
+            U.repositionMenu(c, m); };
+        cbs.forEach(cb => {
+            const ctrl = U.qs('.ux4g-combobox-control', cb);
+            const menu = U.qs('.ux4g-combobox-menu', cb);
+            if (!ctrl || !menu)
+                return;
+            const inp = cb.querySelector('[ux4g-combobox-search]');
+            if (inp) {
+                U.on(inp, 'focus', (() => openCb(cb)));
+                U.on(inp, 'input', (() => openCb(cb)));
             }
+            const caret = cb.querySelector('.ux4g-combobox-caret');
+            if (caret)
+                U.on(caret, 'click', ((e) => { e.stopPropagation(); cb.classList.contains('is-open') ? closeCb(cb) : openCb(cb); }));
+            U.on(ctrl, 'click', ((ev) => { if (U.closest(ev.target, '[ux4g-combobox-search]')) {
+                if (!cb.classList.contains('is-open'))
+                    openCb(cb);
+                return;
+            } ev.preventDefault(); ev.stopPropagation(); cb.classList.contains('is-open') ? closeCb(cb) : openCb(cb); }));
+            U.on(menu, 'click', ((ev) => { const ch = U.closest(ev.target, '[ux4g-combobox-choice]'); if (ch) {
+                ev.stopPropagation();
+                closeCb(cb);
+            } }));
+        });
+        U.on(document, 'click', ((ev) => { cbs.forEach(c => { if (!c.contains(ev.target))
+            closeCb(c); }); }));
+        U.on(document, 'keydown', ((ev) => { if (ev.key === 'Escape')
+            cbs.forEach(c => closeCb(c)); }));
+    }
+    // UX4G Tabs
+    U.qsa('[data-ux4g-tab]').forEach(root => {
+        const list = U.qs('.ux4g-tab-list', root);
+        if (!list)
+            return;
+        const items = U.qsa('.ux4g-tab-item:not(.ux4g-tab-more)', list);
+        const panels = U.qsa('.ux4g-tab-panel', root);
+        const resetActive = () => { U.qsa('.ux4g-tab-item', list).forEach(i => i.classList.remove('is-active')); root.querySelectorAll('.ux4g-tab-dropdown-item').forEach(i => i.classList.remove('is-active')); };
+        const showPanel = (id) => { panels.forEach(p => p.classList.remove('is-active')); const t = root.querySelector('#' + id); if (t)
+            t.classList.add('is-active'); };
+        items.forEach(item => { U.on(item, 'click', (() => { if (item.classList.contains('ux4g-tab-item-disabled'))
+            return; resetActive(); item.classList.add('is-active'); const pid = item.dataset.panel; if (pid)
+            showPanel(pid); })); });
+    });
+    // Sliders
+    U.on(document, 'input', ((e) => {
+        const t = e.target;
+        if (!t.classList.contains('ux4g-slider-input'))
+            return;
+        const slider = t.closest('.ux4g-slider');
+        if (!slider)
+            return;
+        const fill = slider.querySelector('.ux4g-slider-fill');
+        const inp = t;
+        if (!slider.classList.contains('ux4g-slider-dual')) {
+            const thumb = slider.querySelector('.ux4g-slider-thumb');
+            const pct = ((parseFloat(inp.value) - parseFloat(inp.min)) / (parseFloat(inp.max) - parseFloat(inp.min))) * 100;
+            if (fill)
+                fill.style.width = pct + '%';
+            if (thumb)
+                thumb.style.left = pct + '%';
         }
-    };
-    const keyHandler = (e) => {
-        if (e.key === 'Escape') {
-            const openDrawer = document.querySelector('.ux4g-drawer.ux4g-drawer-open');
-            if (openDrawer) {
-                openDrawer.classList.remove('ux4g-drawer-open');
-                document.body.style.overflow = '';
+    }));
+    // Custom carousel (.ux4g-carousel)
+    document.querySelectorAll('.ux4g-carousel').forEach(car => {
+        const sc = car.querySelector('.ux4g-carousel-slides');
+        const slides = car.querySelectorAll('.ux4g-carousel-slide');
+        const dots = car.querySelectorAll('.ux4g-carousel-dot');
+        if (!slides.length)
+            return;
+        let ci = 0;
+        const upd = (i) => { if (i < 0)
+            i = slides.length - 1; if (i >= slides.length)
+            i = 0; ci = i; if (sc)
+            sc.style.transform = `translateX(-${ci * 100}%)`; slides.forEach((s, idx) => { s.classList.toggle('is-active', idx === ci); }); dots.forEach((d, idx) => d.classList.toggle('is-active', idx === ci)); };
+        const pb = car.querySelector('.ux4g-carousel-arrow-prev');
+        const nb = car.querySelector('.ux4g-carousel-arrow-next');
+        if (pb)
+            U.on(pb, 'click', ((e) => { e.preventDefault(); upd(ci - 1); }));
+        if (nb)
+            U.on(nb, 'click', ((e) => { e.preventDefault(); upd(ci + 1); }));
+        dots.forEach((d, idx) => U.on(d, 'click', ((e) => { e.preventDefault(); upd(idx); })));
+        upd(ci);
+    });
+    // Context alerts
+    U.qsa('[data-ux4g-toggle="toast"]').forEach(btn => {
+        U.on(btn, 'click', (() => {
+            const pos = btn.dataset.ux4gPosition || 'top-right';
+            const variant = btn.dataset.ux4gVariant || 'info';
+            const title = btn.dataset.ux4gTitle || variant;
+            const body = btn.dataset.ux4gBody || '';
+            const cid = `ux4g-alert-container-${pos}`;
+            let cont = document.getElementById(cid);
+            if (!cont) {
+                cont = document.createElement('div');
+                cont.id = cid;
+                cont.className = `ux4g-alert-container ux4g-alert-${pos}`;
+                document.body.appendChild(cont);
             }
+            const al = document.createElement('div');
+            al.className = `ux4g-context-alert ux4g-alert-${variant} ${pos.includes('left') ? 'ux4g-animate-left' : 'ux4g-animate-right'}`;
+            al.innerHTML = `<span class="ux4g-alert-title">${title}</span><button class="ux4g-alert-close"><i class="ux4g-icon">close</i></button><div class="ux4g-alert-message">${body}</div>`;
+            const cb = al.querySelector('.ux4g-alert-close');
+            if (cb)
+                cb.addEventListener('click', () => { al.style.opacity = '0'; setTimeout(() => al.remove(), 400); });
+            cont.appendChild(al);
+            setTimeout(() => { if (al.parentNode) {
+                al.style.opacity = '0';
+                setTimeout(() => al.remove(), 400);
+            } }, 5000);
+        }));
+    });
+    // Feedback (NPS, Emoji, Stars)
+    U.qsa('.feedback-nps-button').forEach(btn => { U.on(btn, 'click', (() => { const c = btn.closest('.ux4g-feedback-nps-wrapper') || btn.parentElement; const sibs = Array.from(c.querySelectorAll('.feedback-nps-button')); const ci = sibs.indexOf(btn); sibs.forEach((s, i) => s.classList.toggle('active', i <= ci)); })); });
+    U.qsa('.feedback-emoji-button').forEach(btn => { U.on(btn, 'click', (() => { const c = btn.closest('.ux4g-d-flex') || document; c.querySelectorAll('.feedback-emoji-button').forEach(b => b.classList.remove('active')); btn.classList.add('active'); })); });
+    U.qsa('.ux4g-feedback-star').forEach(star => { U.on(star, 'click', (() => { const c = star.parentElement; const sibs = Array.from(c.querySelectorAll('.ux4g-feedback-star')); const ci = sibs.indexOf(star); sibs.forEach((s, i) => s.classList.toggle('active', i <= ci)); })); });
+    // Mega menu
+    const catItems = U.qsa('.ux4g-mega-menu__category-item');
+    const contentBlocks = U.qsa('.ux4g-mega-menu__content');
+    if (catItems.length && contentBlocks.length) {
+        catItems.forEach((item, idx) => { U.on(item, 'click', ((e) => { e.preventDefault(); catItems.forEach(c => c.classList.remove('ux4g-mega-menu__category-item--active')); item.classList.add('ux4g-mega-menu__category-item--active'); contentBlocks.forEach(b => b.classList.remove('ux4g-mega-menu__content--active')); const tb = document.getElementById(`category-${idx + 1}`); if (tb)
+            tb.classList.add('ux4g-mega-menu__content--active'); })); });
+    }
+    // Result list accordion
+    U.qsa('.ux4g-result-list-accordion-toggle').forEach(btn => { U.on(btn, 'click', (() => { const exp = btn.getAttribute('aria-expanded') === 'true'; btn.setAttribute('aria-expanded', String(!exp)); btn.innerText = exp ? 'expand_more' : 'expand_less'; })); });
+    // Resize handler
+    U.on(window, 'resize', (() => { document.querySelectorAll('.ux4g-dropdown.is-open,.ux4g-combobox.is-open').forEach(el => { const m = el.querySelector('.ux4g-dropdown-menu,.ux4g-combobox-menu'); if (m)
+        U.repositionMenu(el, m); }); }));
+}
+function initMutationObserver() {
+    if (typeof MutationObserver === 'undefined')
+        return;
+    const obs = new MutationObserver((mutations) => { let shouldInit = false; for (const m of mutations) {
+        if (m.addedNodes.length) {
+            shouldInit = true;
+            break;
         }
-    };
-    addListener(document, 'click', openHandler);
-    addListener(document, 'click', closeHandler);
-    addListener(document, 'keydown', keyHandler);
+    } if (shouldInit) {
+        if (window.__ux4gInitRaf)
+            cancelAnimationFrame(window.__ux4gInitRaf);
+        window.__ux4gInitRaf = requestAnimationFrame(() => init(document));
+    } });
+    const start = () => { if (document.body)
+        obs.observe(document.body, { childList: true, subtree: true });
+    else
+        setTimeout(start, 50); };
+    start();
+    activeObservers.push(obs);
 }
-// ─── Public API ──────────────────────────────────────────────────────────────
-/**
- * Initialize the UX4G runtime.
- *
- * Encapsulates all interactive behaviors from the CDN scripts (ux4g.js, ux4g-custom.js):
- * - Dropdown toggling
- * - Modal management (open/close/escape/backdrop click)
- * - Tooltip positioning (show/hide on hover/focus)
- * - Accordion expand/collapse
- * - Carousel sliding (next/prev)
- * - Drawer open/close
- *
- * Uses a singleton guard to ensure initialization happens exactly once.
- * Safe for SSR — no-ops when window/document are unavailable.
- */
 function initRuntime() {
-    // Guard against non-browser environments (SSR/Node.js)
-    if (typeof window === 'undefined' || typeof document === 'undefined') {
+    if (!isBrowser)
         return;
-    }
-    // Singleton guard: prevent duplicate initialization
-    if (window.__UX4G_RUNTIME_INITIALIZED__) {
+    if (window.__UX4G_RUNTIME_INITIALIZED__)
         return;
-    }
-    // Initialize all interactive behaviors
-    initDropdowns();
-    initModals();
-    initTooltips();
-    initAccordions();
-    initCarousels();
-    initDrawers();
-    // Mark as initialized
     window.__UX4G_RUNTIME_INITIALIZED__ = true;
+    init(document);
+    initDelegatedToggles();
+    initCustomBehaviors();
+    initMutationObserver();
 }
-/**
- * Destroy the UX4G runtime.
- *
- * Resets the singleton guard and removes all event listeners.
- * Useful for testing and SSR cleanup.
- */
 function destroyRuntime() {
-    // Guard against non-browser environments
-    if (typeof window === 'undefined') {
+    if (!isBrowser)
         return;
-    }
-    // Remove all registered event listeners
-    for (const { target, event, handler } of activeListeners) {
-        target.removeEventListener(event, handler);
-    }
+    activeListeners.forEach(({ target, event, handler, options }) => { target.removeEventListener(event, handler, options); });
     activeListeners = [];
-    // Disconnect all observers
-    for (const observer of activeObservers) {
-        observer.disconnect();
-    }
+    activeObservers.forEach(obs => obs.disconnect());
     activeObservers = [];
-    // Reset the singleton guard
-    window.__UX4G_RUNTIME_INITIALIZED__ = undefined;
+    if (window.__ux4gInitRaf) {
+        cancelAnimationFrame(window.__ux4gInitRaf);
+        window.__ux4gInitRaf = undefined;
+    }
+    document.querySelectorAll('.ux4g-backdrop').forEach(el => el.remove());
+    document.querySelectorAll('.ux4g-tooltip,.ux4g-popover').forEach(el => { if (el.parentElement === document.body)
+        el.remove(); });
+    document.querySelectorAll('[id^="ux4g-alert-container-"]').forEach(el => el.remove());
+    document.body.classList.remove('ux4g-scroll-lock', 'ux4g-drawer-lock');
+    document.body.style.overflow = '';
+    window.__UX4G_RUNTIME_INITIALIZED__ = false;
 }
 
 export { destroyRuntime, initRuntime };