@lancar/lxui 1.0.0 → 1.0.2

package/lxui.bundle.js

@@ -1,540 +0,0 @@
-/*!
- * LxUI v1.0.0 Bundle — Modern CSS Framework
- * Includes: LxUI core + all components
- * https://ui.lancar.id | https://cdn.lancar.id/ui/lxui.bundle.js
- * Copyright (c) 2025 lancar.id — MIT License
- */
-/*!
- * LxUI v1.0.0 — Modern CSS Framework
- * https://ui.lancar.id | https://cdn.lancar.id/ui/lxui.js
- * Copyright (c) 2025 lancar.id
- * Licensed under MIT
- */
-(function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
-  typeof define === 'function' && define.amd ? define(factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.LxUI = factory());
-})(this, function () {
-  'use strict';
-
-  /* ── Helpers ── */
-  function qs(sel, ctx) { return (ctx || document).querySelector(sel); }
-  function qsa(sel, ctx) { return Array.from((ctx || document).querySelectorAll(sel)); }
-  function on(el, ev, fn) { el && el.addEventListener(ev, fn); }
-  function off(el, ev, fn) { el && el.removeEventListener(ev, fn); }
-  function emit(el, name, detail) {
-    el.dispatchEvent(new CustomEvent('lx.' + name, { bubbles: true, cancelable: true, detail }));
-  }
-  function trap(el) {
-    const focusable = qsa('button,a,[href],[tabindex]:not([tabindex="-1"]),input,select,textarea', el)
-      .filter(e => !e.disabled && e.offsetParent !== null);
-    if (!focusable.length) return;
-    const first = focusable[0], last = focusable[focusable.length - 1];
-    on(el, 'keydown', e => {
-      if (e.key !== 'Tab') return;
-      if (e.shiftKey) { if (document.activeElement === first) { e.preventDefault(); last.focus(); } }
-      else { if (document.activeElement === last) { e.preventDefault(); first.focus(); } }
-    });
-  }
-
-  /* ================================================================
-   * Modal
-   * ================================================================ */
-  class Modal {
-    constructor(sel, opts = {}) {
-      this.el = typeof sel === 'string' ? qs(sel) : sel;
-      if (!this.el) return;
-      this.opts = Object.assign({ backdrop: true, keyboard: true, focus: true }, opts);
-      this._backdrop = null;
-      this._prevFocus = null;
-    }
-    show() {
-      if (!this.el) return;
-      emit(this.el, 'modal.show');
-      this._prevFocus = document.activeElement;
-      this._backdrop = document.createElement('div');
-      this._backdrop.className = 'lx-modal-backdrop lx-fade lx-show';
-      document.body.appendChild(this._backdrop);
-      document.body.classList.add('lx-modal-open');
-      this.el.classList.add('lx-show');
-      this.el.style.display = 'flex';
-      this.el.removeAttribute('aria-hidden');
-      if (this.opts.focus) trap(this.el);
-      if (this.opts.keyboard) {
-        this._keyHandler = e => { if (e.key === 'Escape') this.hide(); };
-        on(document, 'keydown', this._keyHandler);
-      }
-      if (this.opts.backdrop) on(this._backdrop, 'click', () => this.hide());
-      requestAnimationFrame(() => emit(this.el, 'modal.shown'));
-    }
-    hide() {
-      if (!this.el) return;
-      emit(this.el, 'modal.hide');
-      this.el.classList.remove('lx-show');
-      this.el.style.display = '';
-      this.el.setAttribute('aria-hidden', 'true');
-      if (this._backdrop) { this._backdrop.remove(); this._backdrop = null; }
-      document.body.classList.remove('lx-modal-open');
-      if (this._keyHandler) off(document, 'keydown', this._keyHandler);
-      if (this._prevFocus) this._prevFocus.focus();
-      emit(this.el, 'modal.hidden');
-    }
-    toggle() { this.el.classList.contains('lx-show') ? this.hide() : this.show(); }
-  }
-
-  /* ================================================================
-   * Toast
-   * ================================================================ */
-  const Toast = {
-    _container(pos) {
-      const id = 'lx-toast-' + pos;
-      let c = document.getElementById(id);
-      if (!c) {
-        c = document.createElement('div');
-        c.id = id;
-        const posMap = {
-          'top-right':'top:1rem;right:1rem', 'top-left':'top:1rem;left:1rem',
-          'bottom-right':'bottom:1rem;right:1rem', 'bottom-left':'bottom:1rem;left:1rem',
-          'top-center':'top:1rem;left:50%;transform:translateX(-50%)'
-        };
-        c.setAttribute('style', `position:fixed;z-index:1090;display:flex;flex-direction:column;gap:.5rem;${posMap[pos]||posMap['top-right']}`);
-        document.body.appendChild(c);
-      }
-      return c;
-    },
-    show(opts = {}) {
-      const { message = '', type = 'default', duration = 4000, position = 'top-right', title = '' } = opts;
-      const colors = { success:'#22c55e', warning:'#f59e0b', danger:'#ef4444', info:'#06b6d4', default:'#3b82f6' };
-      const t = document.createElement('div');
-      t.setAttribute('role','alert');
-      t.setAttribute('aria-live','assertive');
-      t.setAttribute('aria-atomic','true');
-      t.style.cssText = `background:var(--surface,#fff);border:1px solid var(--border-default,#e5e7eb);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.12);padding:.875rem 1rem;min-width:280px;max-width:380px;display:flex;align-items:flex-start;gap:.75rem;animation:lxSlideIn .2s ease`;
-      const dot = `<span style="width:8px;height:8px;border-radius:50%;background:${colors[type]||colors.default};flex-shrink:0;margin-top:4px"></span>`;
-      const body = title ? `<div><strong style="display:block;margin-bottom:2px;font-size:.875rem">${title}</strong><span style="font-size:.875rem;color:var(--text-secondary,#6b7280)">${message}</span></div>` : `<span style="font-size:.875rem;color:var(--text-primary,#111827);flex:1">${message}</span>`;
-      const close = `<button onclick="this.closest('[role=alert]').remove()" style="background:none;border:none;cursor:pointer;padding:0;color:var(--text-muted,#9ca3af);font-size:1.125rem;line-height:1;margin-left:auto" aria-label="Tutup">×</button>`;
-      t.innerHTML = dot + body + close;
-      this._container(position).appendChild(t);
-      if (!document.getElementById('lx-toast-style')) {
-        const s = document.createElement('style');
-        s.id = 'lx-toast-style';
-        s.textContent = '@keyframes lxSlideIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}';
-        document.head.appendChild(s);
-      }
-      if (duration > 0) setTimeout(() => { t.style.opacity='0'; t.style.transition='opacity .2s'; setTimeout(()=>t.remove(), 200); }, duration);
-    },
-    success(msg, opts={}) { this.show({...opts, message:msg, type:'success'}); },
-    error(msg, opts={}) { this.show({...opts, message:msg, type:'danger'}); },
-    warning(msg, opts={}) { this.show({...opts, message:msg, type:'warning'}); },
-    info(msg, opts={}) { this.show({...opts, message:msg, type:'info'}); },
-  };
-
-  /* ================================================================
-   * Collapse / Accordion
-   * ================================================================ */
-  class Collapse {
-    constructor(sel) {
-      this.el = typeof sel === 'string' ? qs(sel) : sel;
-    }
-    show() {
-      if (!this.el) return;
-      emit(this.el, 'collapse.show');
-      this.el.style.height = '0px';
-      this.el.classList.add('lx-collapsing');
-      this.el.classList.remove('lx-collapse', 'lx-show');
-      const h = this.el.scrollHeight;
-      this.el.style.height = h + 'px';
-      this.el.addEventListener('transitionend', () => {
-        this.el.classList.remove('lx-collapsing');
-        this.el.classList.add('lx-collapse', 'lx-show');
-        this.el.style.height = '';
-        emit(this.el, 'collapse.shown');
-      }, { once: true });
-    }
-    hide() {
-      if (!this.el) return;
-      emit(this.el, 'collapse.hide');
-      this.el.style.height = this.el.scrollHeight + 'px';
-      this.el.classList.add('lx-collapsing');
-      this.el.classList.remove('lx-collapse', 'lx-show');
-      requestAnimationFrame(() => { this.el.style.height = '0px'; });
-      this.el.addEventListener('transitionend', () => {
-        this.el.classList.remove('lx-collapsing');
-        this.el.classList.add('lx-collapse');
-        this.el.style.height = '';
-        emit(this.el, 'collapse.hidden');
-      }, { once: true });
-    }
-    toggle() { this.el && this.el.classList.contains('lx-show') ? this.hide() : this.show(); }
-  }
-
-  /* ================================================================
-   * Dropdown
-   * ================================================================ */
-  class Dropdown {
-    constructor(trigger) {
-      this.trigger = typeof trigger === 'string' ? qs(trigger) : trigger;
-      this.menu = this.trigger && this.trigger.nextElementSibling;
-      this._outside = e => { if (!this.trigger.closest('.lx-dropdown').contains(e.target)) this.hide(); };
-    }
-    show() {
-      if (!this.menu) return;
-      emit(this.trigger, 'dropdown.show');
-      this.menu.classList.add('lx-show');
-      this.trigger.setAttribute('aria-expanded', 'true');
-      setTimeout(() => on(document, 'click', this._outside), 0);
-      emit(this.trigger, 'dropdown.shown');
-    }
-    hide() {
-      if (!this.menu) return;
-      emit(this.trigger, 'dropdown.hide');
-      this.menu.classList.remove('lx-show');
-      this.trigger.setAttribute('aria-expanded', 'false');
-      off(document, 'click', this._outside);
-      emit(this.trigger, 'dropdown.hidden');
-    }
-    toggle() { this.menu && this.menu.classList.contains('lx-show') ? this.hide() : this.show(); }
-  }
-
-  /* ================================================================
-   * Offcanvas / Drawer
-   * ================================================================ */
-  class Offcanvas {
-    constructor(sel) {
-      this.el = typeof sel === 'string' ? qs(sel) : sel;
-      this._backdrop = null;
-    }
-    show() {
-      if (!this.el) return;
-      this._backdrop = document.createElement('div');
-      this._backdrop.className = 'lx-offcanvas-backdrop';
-      this._backdrop.style.cssText = 'position:fixed;inset:0;z-index:1039;background:rgba(0,0,0,.5)';
-      document.body.appendChild(this._backdrop);
-      document.body.style.overflow = 'hidden';
-      this.el.classList.add('lx-show');
-      this.el.removeAttribute('aria-hidden');
-      trap(this.el);
-      on(this._backdrop, 'click', () => this.hide());
-      on(document, 'keydown', this._esc = e => { if (e.key === 'Escape') this.hide(); });
-    }
-    hide() {
-      if (!this.el) return;
-      this.el.classList.remove('lx-show');
-      this.el.setAttribute('aria-hidden', 'true');
-      if (this._backdrop) { this._backdrop.remove(); this._backdrop = null; }
-      document.body.style.overflow = '';
-      off(document, 'keydown', this._esc);
-    }
-    toggle() { this.el && this.el.classList.contains('lx-show') ? this.hide() : this.show(); }
-  }
-
-  /* ================================================================
-   * Tooltip
-   * ================================================================ */
-  class Tooltip {
-    constructor(el, opts = {}) {
-      this.el = typeof el === 'string' ? qs(el) : el;
-      if (!this.el) return;
-      this.opts = Object.assign({ placement: 'top', trigger: 'hover', html: false, delay: { show: 0, hide: 0 } }, opts);
-      this._tip = null;
-      this._attach();
-    }
-    _attach() {
-      const show = () => { clearTimeout(this._hideTimer); this._showTimer = setTimeout(() => this._show(), this.opts.delay.show); };
-      const hide = () => { clearTimeout(this._showTimer); this._hideTimer = setTimeout(() => this._hide(), this.opts.delay.hide); };
-      if (this.opts.trigger.includes('hover')) { on(this.el, 'mouseenter', show); on(this.el, 'mouseleave', hide); }
-      if (this.opts.trigger.includes('focus')) { on(this.el, 'focusin', show); on(this.el, 'focusout', hide); }
-    }
-    _show() {
-      const text = this.el.getAttribute('title') || this.el.dataset.lxOrigTitle || '';
-      if (!text) return;
-      if (this.el.getAttribute('title')) { this.el.dataset.lxOrigTitle = text; this.el.removeAttribute('title'); }
-      this._tip = document.createElement('div');
-      this._tip.className = 'lx-tooltip lx-tooltip-' + this.opts.placement;
-      this._tip.setAttribute('role','tooltip');
-      this._tip.style.cssText = 'position:absolute;z-index:1080;padding:4px 8px;background:rgba(0,0,0,.85);color:#fff;border-radius:4px;font-size:.75rem;white-space:nowrap;pointer-events:none';
-      this._tip.textContent = text;
-      document.body.appendChild(this._tip);
-      const r = this.el.getBoundingClientRect(), t = this._tip.getBoundingClientRect(), s = window.scrollY;
-      const p = this.opts.placement;
-      let top = 0, left = 0;
-      if (p === 'top') { top = r.top + s - t.height - 6; left = r.left + (r.width - t.width) / 2; }
-      else if (p === 'bottom') { top = r.bottom + s + 6; left = r.left + (r.width - t.width) / 2; }
-      else if (p === 'left') { top = r.top + s + (r.height - t.height) / 2; left = r.left - t.width - 6; }
-      else { top = r.top + s + (r.height - t.height) / 2; left = r.right + 6; }
-      this._tip.style.top = top + 'px';
-      this._tip.style.left = left + 'px';
-    }
-    _hide() { if (this._tip) { this._tip.remove(); this._tip = null; } }
-  }
-
-  /* ================================================================
-   * Popover
-   * ================================================================ */
-  class Popover {
-    constructor(el, opts = {}) {
-      this.el = typeof el === 'string' ? qs(el) : el;
-      if (!this.el) return;
-      this.opts = Object.assign({ placement: 'top', trigger: 'click', html: false }, opts);
-      this._pop = null;
-      const toggle = () => this._pop ? this._hide() : this._show();
-      if (this.opts.trigger.includes('click')) on(this.el, 'click', toggle);
-    }
-    _show() {
-      const title   = this.el.dataset.lxTitle || '';
-      const content = this.el.dataset.lxContent || '';
-      this._pop = document.createElement('div');
-      this._pop.className = 'lx-popover';
-      this._pop.setAttribute('role','tooltip');
-      this._pop.style.cssText = 'position:absolute;z-index:1070;background:var(--surface,#fff);border:1px solid var(--border-default,#e5e7eb);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.12);padding:.75rem 1rem;min-width:200px;max-width:300px';
-      this._pop.innerHTML = (title ? `<strong style="display:block;margin-bottom:.5rem;font-size:.875rem">${title}</strong>` : '') + `<p style="margin:0;font-size:.875rem;color:var(--text-secondary,#6b7280)">${content}</p>`;
-      document.body.appendChild(this._pop);
-      const r = this.el.getBoundingClientRect(), s = window.scrollY;
-      this._pop.style.top = (r.bottom + s + 8) + 'px';
-      this._pop.style.left = r.left + 'px';
-      setTimeout(() => on(document, 'click', this._outside = e => { if (!this.el.contains(e.target) && !this._pop?.contains(e.target)) this._hide(); }), 0);
-    }
-    _hide() { if (this._pop) { this._pop.remove(); this._pop = null; off(document, 'click', this._outside); } }
-  }
-
-  /* ================================================================
-   * Scrollspy
-   * ================================================================ */
-  class Scrollspy {
-    constructor(el, opts = {}) {
-      this.el = typeof el === 'string' ? qs(el) : el;
-      if (!this.el) return;
-      this.opts = Object.assign({ offset: 70 }, opts);
-      const targetSel = this.el.dataset.lxTarget;
-      this.nav = targetSel ? qs(targetSel) : null;
-      this._update = this._update.bind(this);
-      on(this.el === document.body ? window : this.el, 'scroll', this._update);
-      this._update();
-    }
-    _update() {
-      if (!this.nav) return;
-      const links = qsa('a[href^="#"]', this.nav);
-      const scrollTop = (this.el === document.body ? window.scrollY : this.el.scrollTop) + this.opts.offset;
-      let active = null;
-      links.forEach(a => {
-        const target = qs(a.getAttribute('href'));
-        if (target && target.offsetTop <= scrollTop) active = a;
-      });
-      links.forEach(a => a.classList.remove('lx-active'));
-      if (active) active.classList.add('lx-active');
-    }
-  }
-
-  /* ================================================================
-   * Tabs
-   * ================================================================ */
-  class Tab {
-    constructor(trigger) {
-      this.trigger = typeof trigger === 'string' ? qs(trigger) : trigger;
-    }
-    show() {
-      if (!this.trigger) return;
-      const targetSel = this.trigger.dataset.lxTarget;
-      const target = targetSel ? qs(targetSel) : null;
-      if (!target) return;
-      const tablist = this.trigger.closest('[role="tablist"]') || this.trigger.parentElement.parentElement;
-      qsa('.lx-nav-link, .lx-tab-item', tablist).forEach(t => { t.classList.remove('lx-active'); t.setAttribute('aria-selected','false'); });
-      qsa('.lx-tab-pane', target.parentElement).forEach(p => p.classList.remove('lx-active', 'lx-show'));
-      this.trigger.classList.add('lx-active');
-      this.trigger.setAttribute('aria-selected','true');
-      target.classList.add('lx-active', 'lx-show');
-    }
-  }
-
-  /* ================================================================
-   * Carousel
-   * ================================================================ */
-  class Carousel {
-    constructor(sel, opts = {}) {
-      this.el = typeof sel === 'string' ? qs(sel) : sel;
-      if (!this.el) return;
-      this.opts = Object.assign({ interval: 5000, pause: 'hover', wrap: true, touch: true }, opts);
-      this.items = qsa('.lx-carousel-item', this.el);
-      this.current = this.items.findIndex(i => i.classList.contains('lx-active'));
-      if (this.current < 0) { this.current = 0; this.items[0]?.classList.add('lx-active'); }
-      this._timer = null;
-      if (this.opts.interval) this.cycle();
-      if (this.opts.pause === 'hover') { on(this.el, 'mouseenter', () => this.pause()); on(this.el, 'mouseleave', () => this.cycle()); }
-      if (this.opts.touch) this._initTouch();
-      this._updateIndicators();
-    }
-    _go(idx) {
-      const n = this.items.length;
-      if (!this.opts.wrap && (idx < 0 || idx >= n)) return;
-      this.current = ((idx % n) + n) % n;
-      this.items.forEach((item, i) => item.classList.toggle('lx-active', i === this.current));
-      this._updateIndicators();
-    }
-    _updateIndicators() {
-      qsa('.lx-carousel-indicators button, .lx-carousel-indicators [data-lx-slide-to]', this.el).forEach((btn, i) => {
-        btn.classList.toggle('lx-active', i === this.current);
-        btn.setAttribute('aria-current', i === this.current ? 'true' : 'false');
-      });
-    }
-    next() { this._go(this.current + 1); }
-    prev() { this._go(this.current - 1); }
-    to(idx) { this._go(idx); }
-    cycle() { this.pause(); if (this.opts.interval) this._timer = setInterval(() => this.next(), this.opts.interval); }
-    pause() { clearInterval(this._timer); this._timer = null; }
-    _initTouch() {
-      let startX = 0;
-      on(this.el, 'touchstart', e => { startX = e.touches[0].clientX; }, { passive: true });
-      on(this.el, 'touchend', e => {
-        const dx = e.changedTouches[0].clientX - startX;
-        if (Math.abs(dx) > 40) dx > 0 ? this.prev() : this.next();
-      });
-    }
-  }
-
-  /* ================================================================
-   * Alert dismiss
-   * ================================================================ */
-  function initAlerts() {
-    on(document, 'click', e => {
-      const btn = e.target.closest('[data-lx-dismiss="alert"]');
-      if (btn) { const alert = btn.closest('.lx-alert'); if (alert) { alert.style.opacity = '0'; alert.style.transition = 'opacity .15s'; setTimeout(() => alert.remove(), 150); } }
-    });
-  }
-
-  /* ================================================================
-   * Breakpoint utilities
-   * ================================================================ */
-  const breakpoint = {
-    _bp: { xs: 0, sm: 640, md: 768, lg: 1024, xl: 1280, '2xl': 1536 },
-    current() {
-      const w = window.innerWidth;
-      return Object.entries(this._bp).reverse().find(([, v]) => w >= v)?.[0] || 'xs';
-    },
-    on(bp, fn) {
-      const mq = window.matchMedia(`(min-width: ${this._bp[bp]}px)`);
-      mq.addEventListener('change', e => { if (e.matches) fn(); });
-      if (mq.matches) fn();
-    }
-  };
-
-  /* ================================================================
-   * Theme switcher
-   * ================================================================ */
-  const theme = {
-    set(t, mode) {
-      document.documentElement.dataset.theme = t;
-      if (mode) document.documentElement.dataset.mode = mode;
-    },
-    setMode(mode) { document.documentElement.dataset.mode = mode; },
-    toggle() {
-      const cur = document.documentElement.dataset.mode || 'light';
-      this.setMode(cur === 'dark' ? 'light' : 'dark');
-    },
-    current() { return { theme: document.documentElement.dataset.theme, mode: document.documentElement.dataset.mode }; },
-    save(t, mode) { this.set(t, mode); localStorage.setItem('lx-theme', t); if (mode) localStorage.setItem('lx-mode', mode); },
-    restore() {
-      const t = localStorage.getItem('lx-theme'); const m = localStorage.getItem('lx-mode');
-      if (t) this.set(t, m || undefined);
-    }
-  };
-
-  /* ================================================================
-   * Data-attribute bridge (no-JS approach)
-   * ================================================================ */
-  function initDataBridge() {
-    on(document, 'click', e => {
-      const el = e.target.closest('[data-lx-toggle], [data-lx-dismiss], [data-lx-slide], [data-lx-slide-to]');
-      if (!el) return;
-      const toggle = el.dataset.lxToggle;
-      const dismiss = el.dataset.lxDismiss;
-      const target = el.dataset.lxTarget ? qs(el.dataset.lxTarget) : null;
-
-      if (dismiss === 'modal') { const m = el.closest('.lx-modal'); if (m) new Modal(m).hide(); }
-      else if (dismiss === 'offcanvas') { const o = el.closest('.lx-offcanvas'); if (o) new Offcanvas(o).hide(); }
-      else if (dismiss === 'alert') { const a = el.closest('.lx-alert'); if (a) { a.style.opacity='0'; a.style.transition='opacity .15s'; setTimeout(()=>a.remove(),150); } }
-      else if (dismiss === 'toast') { const t = el.closest('.lx-toast'); if (t) { t.style.opacity='0'; t.style.transition='opacity .15s'; setTimeout(()=>t.remove(),150); } }
-
-      if (toggle === 'modal' && target) { e.preventDefault(); new Modal(target).toggle(); }
-      else if (toggle === 'collapse' && target) { e.preventDefault(); new Collapse(target).toggle(); const expanded = target.classList.contains('lx-show'); el.setAttribute('aria-expanded', (!expanded).toString()); }
-      else if (toggle === 'accordion' && target) {
-        e.preventDefault();
-        const isOpen = target.classList.contains('lx-show');
-        const accordion = el.closest('.lx-accordion');
-        if (accordion) {
-          qsa('.lx-accordion-body.lx-show', accordion).forEach(b => { if (b !== target) new Collapse(b).hide(); });
-          qsa('.lx-accordion-trigger', accordion).forEach(t => { if (t !== el) { t.classList.remove('lx-active'); t.setAttribute('aria-expanded','false'); } });
-        }
-        new Collapse(target)[isOpen ? 'hide' : 'show']();
-        el.classList.toggle('lx-active', !isOpen);
-        el.setAttribute('aria-expanded', (!isOpen).toString());
-      }
-      else if (toggle === 'dropdown') { e.preventDefault(); e.stopPropagation(); new Dropdown(el).toggle(); }
-      else if (toggle === 'offcanvas' && target) { e.preventDefault(); new Offcanvas(target).toggle(); }
-      else if (toggle === 'tab' && target) { e.preventDefault(); new Tab(el).show(); }
-      else if (toggle === 'popover') { /* handled by Popover instance */ }
-
-      const slideTo = el.dataset.lxSlideTo;
-      const slideDir = el.dataset.lxSlide;
-      if (slideTo !== undefined || slideDir) {
-        const carouselEl = qs(el.dataset.lxTarget) || el.closest('.lx-carousel');
-        if (carouselEl && carouselEl._lxCarousel) {
-          if (slideDir === 'next') carouselEl._lxCarousel.next();
-          else if (slideDir === 'prev') carouselEl._lxCarousel.prev();
-          else if (slideTo !== undefined) carouselEl._lxCarousel.to(parseInt(slideTo));
-        }
-      }
-    });
-  }
-
-  /* ================================================================
-   * Scrollspy auto-init
-   * ================================================================ */
-  function initScrollspy() {
-    qsa('[data-lx-spy="scroll"]').forEach(el => new Scrollspy(el));
-  }
-
-  /* ================================================================
-   * Tooltip auto-init
-   * ================================================================ */
-  function initTooltips() {
-    qsa('[data-lx-toggle="tooltip"]').forEach(el => new Tooltip(el, {
-      placement: el.dataset.lxPlacement || 'top',
-      trigger: 'hover focus',
-      delay: { show: 100, hide: 0 }
-    }));
-  }
-
-  /* ================================================================
-   * Carousel auto-init
-   * ================================================================ */
-  function initCarousels() {
-    qsa('.lx-carousel').forEach(el => {
-      const c = new Carousel(el, { interval: parseInt(el.dataset.lxInterval) || 5000 });
-      el._lxCarousel = c;
-    });
-  }
-
-  /* ================================================================
-   * LxUI.init() — initialize everything
-   * ================================================================ */
-  function init() {
-    initDataBridge();
-    initAlerts();
-    initScrollspy();
-    initTooltips();
-    initCarousels();
-    theme.restore();
-  }
-
-  if (document.readyState === 'loading') { on(document, 'DOMContentLoaded', init); }
-  else { init(); }
-
-  return {
-    init,
-    Modal, Toast, Collapse, Dropdown, Offcanvas, Tooltip, Popover, Tab, Carousel, Scrollspy,
-    breakpoint, theme,
-    LxToast: Toast,
-    version: '1.0.0',
-    homepage: 'https://ui.lancar.id'
-  };
-});