ux4g-components-web 1.1.2 → 1.2.0

package/dist/runtime/bootstrap.cjs

@@ -3,1092 +3,41 @@
 /**
  * UX4G Runtime Module
  *
- * Framework-agnostic runtime that encapsulates ALL interactive behaviors
- * from the vendor CDN scripts (ux4g.js + ux4g-custom.js).
+ * Injects the vendor JS (ux4g.js + ux4g-custom.js) into the page as inline scripts.
+ * These files handle all interactive behaviors: dropdowns, modals, tooltips,
+ * accordions, carousels, drawers, tabs, popovers, toasts, scrollspy, etc.
+ *
+ * The vendor JS is inlined at build time by the Rollup virtual plugin.
+ * At runtime, initRuntime() creates <script> elements with the inlined code.
  *
  * Uses a singleton guard (window.__UX4G_RUNTIME_INITIALIZED__) to ensure
- * initialization happens exactly once.
+ * the scripts are injected exactly once.
  */
 const isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined';
-let activeObservers = [];
-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); },
-    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';
-        }
-    },
-};
-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'); });
-                } });
-        }
-        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; }
-}
-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();
-            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 });
-        }
-        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();
-            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(); }));
-        }
-        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 });
-        }
-        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; }
-}
-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');
-            }
-        }
-        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');
-            }
-        }
-        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; }
-}
-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();
-            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; }
-}
-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();
-            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;
-        }
-        const om = U.closest(t, '.open-modal');
-        if (om) {
-            e.preventDefault();
-            const el = U.qs('#exampleModal');
-            if (el)
-                ModalComponent.getOrCreate(el).show(om);
-            return;
-        }
-        const ob = U.closest(t, '[data-bs-toggle="offcanvas"],[data-ux-toggle="offcanvas"]');
-        if (ob) {
-            e.preventDefault();
-            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);
-        }
-    } }));
-    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();
-            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 + '%';
-        }
-    }));
-    // 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;
-        }
-    } 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);
-}
+/**
+ * Initialize the UX4G runtime by injecting the vendor JS scripts into the page.
+ *
+ * - Safe for SSR — no-ops when window/document are unavailable.
+ * - Singleton guard prevents double-injection.
+ * - The vendor JS handles its own DOMContentLoaded timing internally.
+ * - MutationObserver in the vendor JS auto-initializes dynamically added elements.
+ */
 function initRuntime() {
     if (!isBrowser)
         return;
     if (window.__UX4G_RUNTIME_INITIALIZED__)
         return;
     window.__UX4G_RUNTIME_INITIALIZED__ = true;
-    init(document);
-    initDelegatedToggles();
-    initCustomBehaviors();
-    initMutationObserver();
+    // Inject ux4g.js (sets up window.ux4g with all core components)
+    const script1 = document.createElement('script');
+    script1.setAttribute('data-ux4g-runtime', 'main');
+    script1.textContent = __UX4G_VENDOR_MAIN__;
+    document.head.appendChild(script1);
+    // Inject ux4g-custom.js (extends window.ux4g with custom behaviors)
+    const script2 = document.createElement('script');
+    script2.setAttribute('data-ux4g-runtime', 'custom');
+    script2.textContent = __UX4G_VENDOR_CUSTOM__;
+    document.head.appendChild(script2);
 }
 
 /**