@lancar/lxui 1.0.0 → 1.0.2

package/lxui.esm.js

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