@lancar/lxui 1.0.0

package/lxui.js

@@ -0,0 +1,859 @@
+/*!
+ * 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';
+      // dot indicator
+      const dot = document.createElement('span');
+      dot.style.cssText = 'width:8px;height:8px;border-radius:50%;background:' + (colors[type] || colors.default) + ';flex-shrink:0;margin-top:4px';
+      t.appendChild(dot);
+      // body — textContent prevents XSS
+      if (title) {
+        const wrap = document.createElement('div');
+        const strong = document.createElement('strong');
+        strong.style.cssText = 'display:block;margin-bottom:2px;font-size:.875rem';
+        strong.textContent = title;
+        const span = document.createElement('span');
+        span.style.cssText = 'font-size:.875rem;color:var(--text-secondary,#6b7280)';
+        span.textContent = message;
+        wrap.appendChild(strong); wrap.appendChild(span);
+        t.appendChild(wrap);
+      } else {
+        const span = document.createElement('span');
+        span.style.cssText = 'font-size:.875rem;color:var(--text-primary,#111827);flex:1';
+        span.textContent = message;
+        t.appendChild(span);
+      }
+      // close button
+      const close = document.createElement('button');
+      close.style.cssText = 'background:none;border:none;cursor:pointer;padding:0;color:var(--text-muted,#9ca3af);font-size:1.125rem;line-height:1;margin-left:auto';
+      close.setAttribute('aria-label', 'Close');
+      close.textContent = '×';
+      close.addEventListener('click', () => t.remove());
+      t.appendChild(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';
+      // build with DOM API — textContent prevents XSS from data attributes
+      if (title) {
+        const h = document.createElement('strong');
+        h.style.cssText = 'display:block;margin-bottom:.5rem;font-size:.875rem';
+        h.textContent = title;
+        this._pop.appendChild(h);
+      }
+      const body = document.createElement('p');
+      body.style.cssText = 'margin:0;font-size:.875rem;color:var(--text-secondary,#6b7280)';
+      body.textContent = content;
+      this._pop.appendChild(body);
+      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.inner = qs('.lx-carousel-inner', this.el);
+      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; if (this.items[0]) this.items[0].classList.add('lx-active'); }
+      this._timer = null;
+      this._sliding = false;
+      if (this.inner) this._applyTransform(this.current, false);
+      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();
+    }
+    _applyTransform(idx, animate) {
+      if (!this.inner) return;
+      if (!animate) this.inner.style.transition = 'none';
+      this.inner.style.transform = 'translateX(-' + (idx * 100) + '%)';
+      if (!animate) {
+        this.inner.getBoundingClientRect();
+        this.inner.style.transition = '';
+      }
+    }
+    _go(idx) {
+      const n = this.items.length;
+      if (!this.opts.wrap && (idx < 0 || idx >= n)) return;
+      if (this._sliding) return;
+      this._sliding = true;
+      const next = ((idx % n) + n) % n;
+      this.items.forEach((item, i) => item.classList.toggle('lx-active', i === next));
+      this.current = next;
+      if (this.inner) {
+        this._applyTransform(this.current, true);
+        const done = () => { this._sliding = false; emit(this.el, 'carousel.slid'); };
+        this.inner.addEventListener('transitionend', done, { once: true });
+        setTimeout(() => { this._sliding = false; }, 400);
+      } else {
+        this._sliding = false;
+      }
+      this._updateIndicators();
+      emit(this.el, 'carousel.slide');
+    }
+    _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, startY = 0;
+      on(this.el, 'touchstart', e => { startX = e.touches[0].clientX; startY = e.touches[0].clientY; }, { passive: true });
+      on(this.el, 'touchend', e => {
+        const dx = e.changedTouches[0].clientX - startX;
+        const dy = e.changedTouches[0].clientY - startY;
+        if (Math.abs(dx) > Math.abs(dy) && 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;
+    });
+  }
+
+  /* ================================================================
+   * Clipboard
+   * ================================================================ */
+  const Clipboard = {
+    copy(text) {
+      if (navigator.clipboard && window.isSecureContext) {
+        return navigator.clipboard.writeText(text);
+      }
+      const el = document.createElement('textarea');
+      el.value = text;
+      el.style.cssText = 'position:fixed;top:-9999px;left:-9999px;opacity:0';
+      document.body.appendChild(el);
+      el.focus(); el.select();
+      try { document.execCommand('copy'); } catch(e) {}
+      el.remove();
+      return Promise.resolve();
+    },
+    bind(sel, getText) {
+      qsa(sel).forEach(btn => {
+        on(btn, 'click', async () => {
+          const text = typeof getText === 'function' ? getText(btn) : (btn.dataset.lxCopy || btn.textContent);
+          await this.copy(text);
+          const orig = btn.textContent;
+          btn.textContent = btn.dataset.lxCopiedText || 'Copied!';
+          btn.classList.add('lx-copied');
+          setTimeout(() => { btn.textContent = orig; btn.classList.remove('lx-copied'); }, 2000);
+        });
+      });
+    }
+  };
+
+  /* ================================================================
+   * Counter — animated number counter
+   * ================================================================ */
+  class Counter {
+    constructor(el, opts = {}) {
+      this.el = typeof el === 'string' ? qs(el) : el;
+      if (!this.el) return;
+      this.opts = Object.assign({
+        start:    0,
+        end:      parseInt(this.el.dataset.lxEnd || this.el.textContent) || 0,
+        duration: parseInt(this.el.dataset.lxDuration) || 2000,
+        prefix:   this.el.dataset.lxPrefix || '',
+        suffix:   this.el.dataset.lxSuffix || '',
+        decimals: parseInt(this.el.dataset.lxDecimals) || 0,
+        easing:   true
+      }, opts);
+    }
+    _ease(t) { return t < .5 ? 2*t*t : -1+(4-2*t)*t; }
+    _format(n) {
+      return this.opts.prefix + n.toFixed(this.opts.decimals).replace(/\B(?=(\d{3})+(?!\d))/g, ',') + this.opts.suffix;
+    }
+    start() {
+      const { start, end, duration, easing } = this.opts;
+      const range = end - start;
+      let startTime = null;
+      const step = ts => {
+        if (!startTime) startTime = ts;
+        const elapsed = Math.min(ts - startTime, duration);
+        const progress = easing ? this._ease(elapsed / duration) : elapsed / duration;
+        this.el.textContent = this._format(start + range * progress);
+        if (elapsed < duration) requestAnimationFrame(step);
+        else this.el.textContent = this._format(end);
+      };
+      requestAnimationFrame(step);
+    }
+    static observeAll(sel, opts) {
+      if ('IntersectionObserver' in window) {
+        const io = new IntersectionObserver(entries => {
+          entries.forEach(e => { if (e.isIntersecting) { new Counter(e.target, opts).start(); io.unobserve(e.target); } });
+        }, { threshold: .5 });
+        qsa(sel).forEach(el => io.observe(el));
+      } else {
+        qsa(sel).forEach(el => new Counter(el, opts).start());
+      }
+    }
+  }
+
+  /* ================================================================
+   * NumberInput — increment / decrement control
+   * ================================================================ */
+  class NumberInput {
+    constructor(el, opts = {}) {
+      this.wrap  = typeof el === 'string' ? qs(el) : el;
+      if (!this.wrap) return;
+      this.input = qs('input', this.wrap);
+      if (!this.input) return;
+      this.opts  = Object.assign({ step: 1, min: -Infinity, max: Infinity }, opts);
+      this.opts.min  = parseFloat(this.input.min  || this.opts.min);
+      this.opts.max  = parseFloat(this.input.max  || this.opts.max);
+      this.opts.step = parseFloat(this.input.step || this.opts.step) || 1;
+      this._attach();
+    }
+    _val() { return parseFloat(this.input.value) || 0; }
+    _set(v) {
+      const clamped = Math.min(this.opts.max, Math.max(this.opts.min, v));
+      this.input.value = clamped;
+      emit(this.input, 'change', { value: clamped });
+      this._updateBtns();
+    }
+    _updateBtns() {
+      const v = this._val();
+      const dec = qs('.lx-number-btn[data-lx-dec]', this.wrap) || qs('.lx-number-dec', this.wrap);
+      const inc = qs('.lx-number-btn[data-lx-inc]', this.wrap) || qs('.lx-number-inc', this.wrap);
+      if (dec) dec.disabled = v <= this.opts.min;
+      if (inc) inc.disabled = v >= this.opts.max;
+    }
+    _attach() {
+      on(this.wrap, 'click', e => {
+        const btn = e.target.closest('[data-lx-dec],[data-lx-inc],.lx-number-dec,.lx-number-inc');
+        if (!btn) return;
+        if (btn.matches('[data-lx-dec],.lx-number-dec')) this._set(this._val() - this.opts.step);
+        if (btn.matches('[data-lx-inc],.lx-number-inc')) this._set(this._val() + this.opts.step);
+      });
+      on(this.input, 'change', () => this._set(this._val()));
+      on(this.input, 'keydown', e => {
+        if (e.key === 'ArrowUp')   { e.preventDefault(); this._set(this._val() + this.opts.step); }
+        if (e.key === 'ArrowDown') { e.preventDefault(); this._set(this._val() - this.opts.step); }
+      });
+      this._updateBtns();
+    }
+  }
+
+  /* ================================================================
+   * Rating — interactive star rating
+   * ================================================================ */
+  class Rating {
+    constructor(el, opts = {}) {
+      this.el   = typeof el === 'string' ? qs(el) : el;
+      if (!this.el) return;
+      this.opts = Object.assign({ stars: 5, value: 0, readonly: this.el.dataset.lxReadonly !== undefined }, opts);
+      this.value = parseFloat(this.el.dataset.lxValue || this.opts.value) || 0;
+      this._render();
+    }
+    _render() {
+      this.el.innerHTML = '';
+      this.el.setAttribute('role', 'radiogroup');
+      for (let i = 1; i <= this.opts.stars; i++) {
+        const s = document.createElement('span');
+        s.className = 'lx-rating-star' + (i <= this.value ? ' lx-filled' : '');
+        s.setAttribute('role', 'radio');
+        s.setAttribute('aria-label', i + ' star' + (i !== 1 ? 's' : ''));
+        s.setAttribute('aria-checked', i <= this.value ? 'true' : 'false');
+        s.dataset.value = i;
+        this.el.appendChild(s);
+      }
+      if (this.opts.readonly) { this.el.dataset.readonly = ''; return; }
+      on(this.el, 'click', e => {
+        const s = e.target.closest('.lx-rating-star');
+        if (!s) return;
+        this.value = parseInt(s.dataset.value);
+        qsa('.lx-rating-star', this.el).forEach((st, i) => {
+          const filled = i + 1 <= this.value;
+          st.classList.toggle('lx-filled', filled);
+          st.setAttribute('aria-checked', filled ? 'true' : 'false');
+        });
+        emit(this.el, 'rating.change', { value: this.value });
+      });
+      on(this.el, 'mouseover', e => {
+        const s = e.target.closest('.lx-rating-star');
+        if (!s) return;
+        const hover = parseInt(s.dataset.value);
+        qsa('.lx-rating-star', this.el).forEach((st, i) => st.classList.toggle('lx-hovered', i + 1 <= hover));
+      });
+      on(this.el, 'mouseleave', () => qsa('.lx-rating-star', this.el).forEach(st => st.classList.remove('lx-hovered')));
+    }
+    setValue(v) { this.value = v; this._render(); }
+    getValue()  { return this.value; }
+  }
+
+  /* ================================================================
+   * Lazy load — IntersectionObserver images / iframes
+   * ================================================================ */
+  function initLazy(sel) {
+    const targets = qsa(sel || '[data-lx-lazy]');
+    if (!targets.length) return;
+    if ('IntersectionObserver' in window) {
+      const io = new IntersectionObserver(entries => {
+        entries.forEach(e => {
+          if (!e.isIntersecting) return;
+          const el = e.target;
+          if (el.dataset.lxSrc)    el.src    = el.dataset.lxSrc;
+          if (el.dataset.lxSrcset) el.srcset = el.dataset.lxSrcset;
+          if (el.dataset.lxBg)     el.style.backgroundImage = 'url(' + el.dataset.lxBg + ')';
+          el.removeAttribute('data-lx-lazy');
+          el.classList.add('lx-lazy-loaded');
+          io.unobserve(el);
+        });
+      }, { rootMargin: '200px' });
+      targets.forEach(el => io.observe(el));
+    } else {
+      targets.forEach(el => {
+        if (el.dataset.lxSrc)    el.src    = el.dataset.lxSrc;
+        if (el.dataset.lxSrcset) el.srcset = el.dataset.lxSrcset;
+        if (el.dataset.lxBg)     el.style.backgroundImage = 'url(' + el.dataset.lxBg + ')';
+      });
+    }
+  }
+
+  /* ================================================================
+   * Back-to-top
+   * ================================================================ */
+  function initBackTop() {
+    const btns = qsa('.lx-back-top');
+    if (!btns.length) return;
+    const toggle = () => { const show = window.scrollY > 300; btns.forEach(b => b.classList.toggle('lx-show', show)); };
+    on(window, 'scroll', toggle, { passive: true });
+    btns.forEach(btn => on(btn, 'click', e => { e.preventDefault(); window.scrollTo({ top: 0, behavior: 'smooth' }); }));
+    toggle();
+  }
+
+  /* ================================================================
+   * Code block copy buttons
+   * ================================================================ */
+  function initCodeCopy() {
+    qsa('[data-lx-copy-trigger]').forEach(btn => {
+      on(btn, 'click', async () => {
+        const target = btn.dataset.lxCopyTarget ? qs(btn.dataset.lxCopyTarget) : btn.closest('.lx-code-block')?.querySelector('pre');
+        if (!target) return;
+        await Clipboard.copy(target.textContent);
+        btn.classList.add('lx-copied');
+        const orig = btn.textContent;
+        btn.textContent = 'Copied!';
+        setTimeout(() => { btn.textContent = orig; btn.classList.remove('lx-copied'); }, 2000);
+      });
+    });
+  }
+
+  /* ================================================================
+   * File drop zone
+   * ================================================================ */
+  function initFileDrops() {
+    qsa('.lx-file-drop').forEach(zone => {
+      const input = qs('input[type="file"]', zone);
+      ['dragenter', 'dragover'].forEach(ev => on(zone, ev, e => { e.preventDefault(); zone.classList.add('lx-drag-over'); }));
+      ['dragleave', 'drop'].forEach(ev => on(zone, ev, e => { e.preventDefault(); zone.classList.remove('lx-drag-over'); }));
+      on(zone, 'drop', e => { const files = e.dataTransfer.files; if (input) { try { input.files = files; } catch(x){} } emit(zone, 'file.drop', { files }); });
+      on(zone, 'click', () => input && input.click());
+      if (input) on(input, 'change', () => emit(zone, 'file.select', { files: input.files }));
+    });
+  }
+
+  /* ================================================================
+   * Number inputs auto-init
+   * ================================================================ */
+  function initNumberInputs() {
+    qsa('.lx-number-input').forEach(el => new NumberInput(el));
+  }
+
+  /* ================================================================
+   * Rating auto-init
+   * ================================================================ */
+  function initRatings() {
+    qsa('.lx-rating').forEach(el => new Rating(el));
+  }
+
+  /* ================================================================
+   * LxUI.init() — initialize everything
+   * ================================================================ */
+  function init() {
+    initDataBridge();
+    initAlerts();
+    initScrollspy();
+    initTooltips();
+    initCarousels();
+    initLazy();
+    initBackTop();
+    initCodeCopy();
+    initFileDrops();
+    initNumberInputs();
+    initRatings();
+    theme.restore();
+  }
+
+  if (document.readyState === 'loading') { on(document, 'DOMContentLoaded', init); }
+  else { init(); }
+
+  return {
+    init,
+    Modal, Toast, Collapse, Dropdown, Offcanvas, Tooltip, Popover, Tab, Carousel, Scrollspy,
+    Clipboard, Counter, NumberInput, Rating,
+    breakpoint, theme,
+    LxToast: Toast,
+    version: '1.0.0',
+    homepage: 'https://ui.lancar.id'
+  };
+});