@lancar/lxui 1.0.0

package/lxui.esm.js

@@ -0,0 +1,669 @@
+/*!
+ * LxUI v1.0.0 ESM — Modern CSS Framework
+ * https://ui.lancar.id
+ * Copyright (c) 2025 lancar.id — MIT License
+ *
+ * ES Module — import { Modal, Toast, theme } from 'lxui'
+ */
+'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, opts) { el && el.addEventListener(ev, fn, opts); }
+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 ── */
+export 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 ── */
+export 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%)',
+        'bottom-center':'bottom: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 = 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);
+    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);
+    }
+    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 ── */
+export 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 ── */
+export 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 ── */
+export 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 ── */
+export 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', 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 ── */
+export 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' }, 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';
+    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 pb = document.createElement('p');
+    pb.style.cssText = 'margin:0;font-size:.875rem;color:var(--text-secondary,#6b7280)';
+    pb.textContent = content;
+    this._pop.appendChild(pb);
+    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 ── */
+export 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 t = qs(a.getAttribute('href')); if (t && t.offsetTop <= scrollTop) active = a; });
+    links.forEach(a => a.classList.remove('lx-active'));
+    if (active) active.classList.add('lx-active');
+  }
+}
+
+/* ── Tab ── */
+export 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 ── */
+export 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;
+    this.current  = ((idx % n) + n) % n;
+    this.items.forEach((item, i) => item.classList.toggle('lx-active', i === this.current));
+    if (this.inner) {
+      this._applyTransform(this.current, true);
+      this.inner.addEventListener('transitionend', () => { this._sliding = false; emit(this.el, 'carousel.slid'); }, { 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();
+    });
+  }
+}
+
+/* ── Clipboard ── */
+export 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 ── */
+export 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, 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 ── */
+export 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 ── */
+export 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 });
+    });
+  }
+  setValue(v) { this.value = v; this._render(); }
+  getValue()  { return this.value; }
+}
+
+/* ── Breakpoint ── */
+export 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 ── */
+export 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'), m = localStorage.getItem('lx-mode'); if (t) this.set(t, m || undefined); }
+};
+
+/* ── Init ── */
+export function init() {
+  // Data-attribute bridge
+  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, 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(); }
+    if (dismiss === 'offcanvas'){ const o = el.closest('.lx-offcanvas');if (o) new Offcanvas(o).hide(); }
+    if (dismiss === 'alert')    { const a = el.closest('.lx-alert');    if (a) { a.style.opacity='0'; a.style.transition='opacity .15s'; setTimeout(()=>a.remove(),150); } }
+    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(); el.setAttribute('aria-expanded', (!target.classList.contains('lx-show')).toString()); }
+    else if (toggle === 'accordion' && target) {
+      e.preventDefault();
+      const isOpen = target.classList.contains('lx-show'), 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(); }
+    const slideTo = el.dataset.lxSlideTo, slideDir = el.dataset.lxSlide;
+    if (slideTo !== undefined || slideDir) {
+      const c = (qs(el.dataset.lxTarget) || el.closest('.lx-carousel'))?._lxCarousel;
+      if (c) { if (slideDir === 'next') c.next(); else if (slideDir === 'prev') c.prev(); else if (slideTo !== undefined) c.to(parseInt(slideTo)); }
+    }
+  });
+  // Scrollspy
+  qsa('[data-lx-spy="scroll"]').forEach(el => new Scrollspy(el));
+  // Tooltips
+  qsa('[data-lx-toggle="tooltip"]').forEach(el => new Tooltip(el, { placement: el.dataset.lxPlacement || 'top', trigger: 'hover focus', delay: { show: 100, hide: 0 } }));
+  // Carousels
+  qsa('.lx-carousel').forEach(el => { const c = new Carousel(el, { interval: parseInt(el.dataset.lxInterval) || 5000 }); el._lxCarousel = c; });
+  // Number inputs
+  qsa('.lx-number-input').forEach(el => new NumberInput(el));
+  // Ratings
+  qsa('.lx-rating').forEach(el => new Rating(el));
+  // Back to top
+  const btns = qsa('.lx-back-top');
+  if (btns.length) {
+    const toggle = () => btns.forEach(b => b.classList.toggle('lx-show', window.scrollY > 300));
+    on(window, 'scroll', toggle, { passive: true });
+    btns.forEach(btn => on(btn, 'click', e => { e.preventDefault(); window.scrollTo({ top: 0, behavior: 'smooth' }); }));
+    toggle();
+  }
+  // Lazy load
+  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.lxBg)   el.style.backgroundImage = 'url(' + el.dataset.lxBg + ')';
+        el.classList.add('lx-lazy-loaded'); io.unobserve(el);
+      });
+    }, { rootMargin: '200px' });
+    qsa('[data-lx-lazy]').forEach(el => io.observe(el));
+  }
+  // File drops
+  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 }));
+  });
+  theme.restore();
+}
+
+if (typeof document !== 'undefined') {
+  if (document.readyState === 'loading') { on(document, 'DOMContentLoaded', init); }
+  else { init(); }
+}
+
+/* ── Default export ── */
+export default {
+  version: '1.0.0',
+  homepage: 'https://ui.lancar.id',
+  init,
+  Modal, Toast, Collapse, Dropdown, Offcanvas, Tooltip, Popover,
+  Tab, Carousel, Scrollspy, Clipboard, Counter, NumberInput, Rating,
+  breakpoint, theme,
+  LxToast: Toast
+};