@lancar/lxui 1.0.0

package/lxui.bundle.js

@@ -0,0 +1,540 @@
+/*!
+ * 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'
+  };
+});

package/lxui.bundle.min.js

@@ -0,0 +1,13 @@
+/*!
+ * 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(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).LxUI=e()}(this,function(){"use strict";function t(t,e){return(e||document).querySelector(t)}function e(t,e){return Array.from((e||document).querySelectorAll(t))}function s(t,e,s){t&&t.addEventListener(e,s)}function i(t,e,s){t&&t.removeEventListener(e,s)}function o(t,e,s){t.dispatchEvent(new CustomEvent("lx."+e,{bubbles:!0,cancelable:!0,detail:s}))}function l(t){const i=e('button,a,[href],[tabindex]:not([tabindex="-1"]),input,select,textarea',t).filter(t=>!t.disabled&&null!==t.offsetParent);if(!i.length)return;const o=i[0],l=i[i.length-1];s(t,"keydown",t=>{"Tab"===t.key&&(t.shiftKey?document.activeElement===o&&(t.preventDefault(),l.focus()):document.activeElement===l&&(t.preventDefault(),o.focus()))})}class a{constructor(e,s={}){this.el="string"==typeof e?t(e):e,this.el&&(this.opts=Object.assign({backdrop:!0,keyboard:!0,focus:!0},s),this._backdrop=null,this._prevFocus=null)}show(){this.el&&(o(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"),this.opts.focus&&l(this.el),this.opts.keyboard&&(this._keyHandler=t=>{"Escape"===t.key&&this.hide()},s(document,"keydown",this._keyHandler)),this.opts.backdrop&&s(this._backdrop,"click",()=>this.hide()),requestAnimationFrame(()=>o(this.el,"modal.shown")))}hide(){this.el&&(o(this.el,"modal.hide"),this.el.classList.remove("lx-show"),this.el.style.display="",this.el.setAttribute("aria-hidden","true"),this._backdrop&&(this._backdrop.remove(),this._backdrop=null),document.body.classList.remove("lx-modal-open"),this._keyHandler&&i(document,"keydown",this._keyHandler),this._prevFocus&&this._prevFocus.focus(),o(this.el,"modal.hidden"))}toggle(){this.el.classList.contains("lx-show")?this.hide():this.show()}}const n={_container(t){const e="lx-toast-"+t;let s=document.getElementById(e);if(!s){s=document.createElement("div"),s.id=e;const i={"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%)"};s.setAttribute("style",`position:fixed;z-index:1090;display:flex;flex-direction:column;gap:.5rem;${i[t]||i["top-right"]}`),document.body.appendChild(s)}return s},show(t={}){const{message:e="",type:s="default",duration:i=4e3,position:o="top-right",title:l=""}=t,a={success:"#22c55e",warning:"#f59e0b",danger:"#ef4444",info:"#06b6d4",default:"#3b82f6"},n=document.createElement("div");if(n.setAttribute("role","alert"),n.setAttribute("aria-live","assertive"),n.setAttribute("aria-atomic","true"),n.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",n.innerHTML=`<span style="width:8px;height:8px;border-radius:50%;background:${a[s]||a.default};flex-shrink:0;margin-top:4px"></span>`+(l?`<div><strong style="display:block;margin-bottom:2px;font-size:.875rem">${l}</strong><span style="font-size:.875rem;color:var(--text-secondary,#6b7280)">${e}</span></div>`:`<span style="font-size:.875rem;color:var(--text-primary,#111827);flex:1">${e}</span>`)+'<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>',this._container(o).appendChild(n),!document.getElementById("lx-toast-style")){const t=document.createElement("style");t.id="lx-toast-style",t.textContent="@keyframes lxSlideIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}",document.head.appendChild(t)}i>0&&setTimeout(()=>{n.style.opacity="0",n.style.transition="opacity .2s",setTimeout(()=>n.remove(),200)},i)},success(t,e={}){this.show({...e,message:t,type:"success"})},error(t,e={}){this.show({...e,message:t,type:"danger"})},warning(t,e={}){this.show({...e,message:t,type:"warning"})},info(t,e={}){this.show({...e,message:t,type:"info"})}};class r{constructor(e){this.el="string"==typeof e?t(e):e}show(){this.el&&(o(this.el,"collapse.show"),this.el.style.height="0px",this.el.classList.add("lx-collapsing"),this.el.classList.remove("lx-collapse","lx-show"),this.el.style.height=this.el.scrollHeight+"px",this.el.addEventListener("transitionend",()=>{this.el.classList.remove("lx-collapsing"),this.el.classList.add("lx-collapse","lx-show"),this.el.style.height="",o(this.el,"collapse.shown")},{once:!0}))}hide(){this.el&&(o(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="",o(this.el,"collapse.hidden")},{once:!0}))}toggle(){this.el&&this.el.classList.contains("lx-show")?this.hide():this.show()}}class h{constructor(e){this.trigger="string"==typeof e?t(e):e,this.menu=this.trigger&&this.trigger.nextElementSibling,this._outside=t=>{this.trigger.closest(".lx-dropdown").contains(t.target)||this.hide()}}show(){this.menu&&(o(this.trigger,"dropdown.show"),this.menu.classList.add("lx-show"),this.trigger.setAttribute("aria-expanded","true"),setTimeout(()=>s(document,"click",this._outside),0),o(this.trigger,"dropdown.shown"))}hide(){this.menu&&(o(this.trigger,"dropdown.hide"),this.menu.classList.remove("lx-show"),this.trigger.setAttribute("aria-expanded","false"),i(document,"click",this._outside),o(this.trigger,"dropdown.hidden"))}toggle(){this.menu&&this.menu.classList.contains("lx-show")?this.hide():this.show()}}class c{constructor(e){this.el="string"==typeof e?t(e):e,this._backdrop=null}show(){this.el&&(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"),l(this.el),s(this._backdrop,"click",()=>this.hide()),s(document,"keydown",this._esc=t=>{"Escape"===t.key&&this.hide()}))}hide(){this.el&&(this.el.classList.remove("lx-show"),this.el.setAttribute("aria-hidden","true"),this._backdrop&&(this._backdrop.remove(),this._backdrop=null),document.body.style.overflow="",i(document,"keydown",this._esc))}toggle(){this.el&&this.el.classList.contains("lx-show")?this.hide():this.show()}}class d{constructor(e,s={}){this.el="string"==typeof e?t(e):e,this.el&&(this.opts=Object.assign({placement:"top",trigger:"hover",html:!1,delay:{show:0,hide:0}},s),this._tip=null,this._attach())}_attach(){const t=()=>{clearTimeout(this._hideTimer),this._showTimer=setTimeout(()=>this._show(),this.opts.delay.show)},e=()=>{clearTimeout(this._showTimer),this._hideTimer=setTimeout(()=>this._hide(),this.opts.delay.hide)};this.opts.trigger.includes("hover")&&(s(this.el,"mouseenter",t),s(this.el,"mouseleave",e)),this.opts.trigger.includes("focus")&&(s(this.el,"focusin",t),s(this.el,"focusout",e))}_show(){const t=this.el.getAttribute("title")||this.el.dataset.lxOrigTitle||"";if(!t)return;this.el.getAttribute("title")&&(this.el.dataset.lxOrigTitle=t,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=t,document.body.appendChild(this._tip);const e=this.el.getBoundingClientRect(),s=this._tip.getBoundingClientRect(),i=window.scrollY,o=this.opts.placement;let l=0,a=0;"top"===o?(l=e.top+i-s.height-6,a=e.left+(e.width-s.width)/2):"bottom"===o?(l=e.bottom+i+6,a=e.left+(e.width-s.width)/2):"left"===o?(l=e.top+i+(e.height-s.height)/2,a=e.left-s.width-6):(l=e.top+i+(e.height-s.height)/2,a=e.right+6),this._tip.style.top=l+"px",this._tip.style.left=a+"px"}_hide(){this._tip&&(this._tip.remove(),this._tip=null)}}class p{constructor(e,i={}){if(this.el="string"==typeof e?t(e):e,!this.el)return;this.opts=Object.assign({offset:70},i);const o=this.el.dataset.lxTarget;this.nav=o?t(o):null,this._update=this._update.bind(this),s(this.el===document.body?window:this.el,"scroll",this._update),this._update()}_update(){if(!this.nav)return;const s=e('a[href^="#"]',this.nav),i=(this.el===document.body?window.scrollY:this.el.scrollTop)+this.opts.offset;let o=null;s.forEach(e=>{const s=t(e.getAttribute("href"));s&&s.offsetTop<=i&&(o=e)}),s.forEach(t=>t.classList.remove("lx-active")),o&&o.classList.add("lx-active")}}class u{constructor(e){this.trigger="string"==typeof e?t(e):e}show(){if(!this.trigger)return;const s=this.trigger.dataset.lxTarget,i=s?t(s):null;i&&(e(".lx-nav-link, .lx-tab-item",this.trigger.closest('[role="tablist"]')||this.trigger.parentElement.parentElement).forEach(t=>{t.classList.remove("lx-active"),t.setAttribute("aria-selected","false")}),e(".lx-tab-pane",i.parentElement).forEach(t=>t.classList.remove("lx-active","lx-show")),this.trigger.classList.add("lx-active"),this.trigger.setAttribute("aria-selected","true"),i.classList.add("lx-active","lx-show"))}}class m{constructor(i,o={}){this.el="string"==typeof i?t(i):i,this.el&&(this.opts=Object.assign({interval:5e3,pause:"hover",wrap:!0,touch:!0},o),this.items=e(".lx-carousel-item",this.el),this.current=this.items.findIndex(t=>t.classList.contains("lx-active")),this.current<0&&(this.current=0,this.items[0]?.classList.add("lx-active")),this._timer=null,this.opts.interval&&this.cycle(),"hover"===this.opts.pause&&(s(this.el,"mouseenter",()=>this.pause()),s(this.el,"mouseleave",()=>this.cycle())),this.opts.touch&&this._initTouch(),this._updateIndicators())}_go(t){const e=this.items.length;!this.opts.wrap&&(t<0||t>=e)||(this.current=(t%e+e)%e,this.items.forEach((t,e)=>t.classList.toggle("lx-active",e===this.current)),this._updateIndicators())}_updateIndicators(){e(".lx-carousel-indicators button, .lx-carousel-indicators [data-lx-slide-to]",this.el).forEach((t,e)=>{t.classList.toggle("lx-active",e===this.current),t.setAttribute("aria-current",e===this.current?"true":"false")})}next(){this._go(this.current+1)}prev(){this._go(this.current-1)}to(t){this._go(t)}cycle(){this.pause(),this.opts.interval&&(this._timer=setInterval(()=>this.next(),this.opts.interval))}pause(){clearInterval(this._timer),this._timer=null}_initTouch(){let t=0;s(this.el,"touchstart",e=>{t=e.touches[0].clientX}),s(this.el,"touchend",e=>{const s=e.changedTouches[0].clientX-t;Math.abs(s)>40&&(s>0?this.prev():this.next())})}}const g={_bp:{xs:0,sm:640,md:768,lg:1024,xl:1280,"2xl":1536},current(){const t=window.innerWidth;return Object.entries(this._bp).reverse().find(([,e])=>t>=e)?.[0]||"xs"},on(t,e){const s=window.matchMedia(`(min-width: ${this._bp[t]}px)`);s.addEventListener("change",t=>{t.matches&&e()}),s.matches&&e()}},x={set(t,e){document.documentElement.dataset.theme=t,e&&(document.documentElement.dataset.mode=e)},setMode(t){document.documentElement.dataset.mode=t},toggle(){const t=document.documentElement.dataset.mode||"light";this.setMode("dark"===t?"light":"dark")},current:()=>({theme:document.documentElement.dataset.theme,mode:document.documentElement.dataset.mode}),save(t,e){this.set(t,e),localStorage.setItem("lx-theme",t),e&&localStorage.setItem("lx-mode",e)},restore(){const t=localStorage.getItem("lx-theme"),e=localStorage.getItem("lx-mode");t&&this.set(t,e||void 0)}};function f(){s(document,"click",s=>{const i=s.target.closest("[data-lx-toggle], [data-lx-dismiss], [data-lx-slide], [data-lx-slide-to]");if(!i)return;const o=i.dataset.lxToggle,l=i.dataset.lxDismiss,n=i.dataset.lxTarget?t(i.dataset.lxTarget):null;if("modal"===l){const t=i.closest(".lx-modal");t&&new a(t).hide()}else if("offcanvas"===l){const t=i.closest(".lx-offcanvas");t&&new c(t).hide()}else if("alert"===l){const t=i.closest(".lx-alert");t&&(t.style.opacity="0",t.style.transition="opacity .15s",setTimeout(()=>t.remove(),150))}else if("toast"===l){const t=i.closest(".lx-toast");t&&(t.style.opacity="0",t.style.transition="opacity .15s",setTimeout(()=>t.remove(),150))}if("modal"===o&&n)s.preventDefault(),new a(n).toggle();else if("collapse"===o&&n){s.preventDefault(),new r(n).toggle();const t=n.classList.contains("lx-show");i.setAttribute("aria-expanded",(!t).toString())}else if("accordion"===o&&n){s.preventDefault();const t=n.classList.contains("lx-show"),o=i.closest(".lx-accordion");o&&(e(".lx-accordion-body.lx-show",o).forEach(t=>{t!==n&&new r(t).hide()}),e(".lx-accordion-trigger",o).forEach(t=>{t!==i&&(t.classList.remove("lx-active"),t.setAttribute("aria-expanded","false"))})),new r(n)[t?"hide":"show"](),i.classList.toggle("lx-active",!t),i.setAttribute("aria-expanded",(!t).toString())}else"dropdown"===o?(s.preventDefault(),s.stopPropagation(),new h(i).toggle()):"offcanvas"===o&&n?(s.preventDefault(),new c(n).toggle()):"tab"===o&&n&&(s.preventDefault(),new u(i).show());const d=i.dataset.lxSlideTo,p=i.dataset.lxSlide;if(void 0!==d||p){const e=t(i.dataset.lxTarget)||i.closest(".lx-carousel");e&&e._lxCarousel&&("next"===p?e._lxCarousel.next():"prev"===p?e._lxCarousel.prev():void 0!==d&&e._lxCarousel.to(parseInt(d)))}}),s(document,"click",t=>{const e=t.target.closest('[data-lx-dismiss="alert"]');if(e){const t=e.closest(".lx-alert");t&&(t.style.opacity="0",t.style.transition="opacity .15s",setTimeout(()=>t.remove(),150))}}),e('[data-lx-spy="scroll"]').forEach(t=>new p(t)),e('[data-lx-toggle="tooltip"]').forEach(t=>new d(t,{placement:t.dataset.lxPlacement||"top",trigger:"hover focus",delay:{show:100,hide:0}})),e(".lx-carousel").forEach(t=>{const e=new m(t,{interval:parseInt(t.dataset.lxInterval)||5e3});t._lxCarousel=e}),x.restore()}return"loading"===document.readyState?s(document,"DOMContentLoaded",f):f(),{init:f,Modal:a,Toast:n,Collapse:r,Dropdown:h,Offcanvas:c,Tooltip:d,Popover:class{constructor(e,i={}){this.el="string"==typeof e?t(e):e,this.el&&(this.opts=Object.assign({placement:"top",trigger:"click",html:!1},i),this._pop=null,this.opts.trigger.includes("click")&&s(this.el,"click",()=>this._pop?this._hide():this._show()))}_show(){const t=this.el.dataset.lxTitle||"",e=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=(t?`<strong style="display:block;margin-bottom:.5rem;font-size:.875rem">${t}</strong>`:"")+`<p style="margin:0;font-size:.875rem;color:var(--text-secondary,#6b7280)">${e}</p>`,document.body.appendChild(this._pop);const i=this.el.getBoundingClientRect(),o=window.scrollY;this._pop.style.top=i.bottom+o+8+"px",this._pop.style.left=i.left+"px",setTimeout(()=>s(document,"click",this._outside=t=>{this.el.contains(t.target)||this._pop?.contains(t.target)||this._hide()}),0)}_hide(){this._pop&&(this._pop.remove(),this._pop=null,i(document,"click",this._outside))}},Tab:u,Carousel:m,Scrollspy:p,breakpoint:g,theme:x,LxToast:n,version:"1.0.0",homepage:"https://ui.lancar.id"}});