kern-ui 0.1.0

package/dist/kern.js

@@ -0,0 +1,529 @@
+(function(window){"use strict";
+
+/* === utils.js === */
+function emit(el, name, detail = {}) {
+  return el.dispatchEvent(
+    new CustomEvent(name, { bubbles: true, cancelable: true, detail })
+  );
+}
+
+function esc(str) {
+  return String(str)
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;');
+}
+
+function firstFocusable(el) {
+  return el?.querySelector(
+    'button:not([disabled]),a[href],[tabindex]:not([tabindex="-1"]),input:not([disabled]),select:not([disabled]),textarea:not([disabled])'
+  ) ?? null;
+}
+
+const $ = (sel, ctx = document) => ctx.querySelector(sel);
+
+const $$ = (sel, ctx = document) => [...ctx.querySelectorAll(sel)];
+
+/* === behaviors/accordion.js === */
+function initAccordions(root = document) {
+  root.querySelectorAll('[data-accordion-trigger]').forEach(trigger => {
+    if (trigger._kernInit) return;
+    trigger._kernInit = true;
+
+    trigger.setAttribute('aria-expanded', 'false');
+    trigger.setAttribute('type', 'button');
+
+    const content = trigger
+      .closest('[data-accordion-item]')
+      ?.querySelector('[data-accordion-content]');
+
+    if (!content) return;
+
+    trigger.addEventListener('click', () => {
+      const isOpen = trigger.getAttribute('aria-expanded') === 'true';
+      const accordion = trigger.closest('[data-accordion]');
+
+      // Close others unless data-multi is present
+      if (accordion && !accordion.hasAttribute('data-multi')) {
+        accordion.querySelectorAll('[data-accordion-trigger]').forEach(other => {
+          if (other === trigger) return;
+          other.setAttribute('aria-expanded', 'false');
+          other
+            .closest('[data-accordion-item]')
+            ?.querySelector('[data-accordion-content]')
+            ?.removeAttribute('data-open');
+        });
+      }
+
+      trigger.setAttribute('aria-expanded', isOpen ? 'false' : 'true');
+      isOpen ? content.removeAttribute('data-open') : content.setAttribute('data-open', '');
+    });
+  });
+}
+
+/* === behaviors/toggle.js === */
+function initToggles(root = document) {
+  root.querySelectorAll('[data-toggle]').forEach(el => {
+    if (el._kernInit) return;
+    el._kernInit = true;
+
+    el.addEventListener('click', () => {
+      const targetId = el.getAttribute('data-toggle');
+      const target   = document.getElementById(targetId);
+      if (!target) return;
+
+      // Walk up to find the WC wrapper (kern-dialog, kern-drawer, etc.)
+      const wc = target.closest('kern-dialog, kern-drawer') || target;
+
+      if (typeof wc.toggle === 'function') wc.toggle();
+      else if (typeof wc.open  === 'function') wc.open();
+    });
+  });
+}
+
+/* === behaviors/table-sort.js === */
+function initTableSort(root = document) {
+  root.querySelectorAll('th[data-sort]').forEach(th => {
+    if (th._kernInit) return;
+    th._kernInit = true;
+
+    th.style.cursor = 'pointer';
+    th.setAttribute('role', 'columnheader');
+    th.setAttribute('aria-sort', 'none');
+
+    th.addEventListener('click', () => {
+      const table = th.closest('table');
+      const tbody = table?.querySelector('tbody');
+      if (!tbody) return;
+
+      const colIndex = [...th.parentElement.children].indexOf(th);
+      const current  = th.getAttribute('data-sort');
+      const asc      = current !== 'asc';
+
+      // Reset all other sortable headers
+      table.querySelectorAll('th[data-sort]').forEach(h => {
+        h.setAttribute('data-sort', '');
+        h.setAttribute('aria-sort', 'none');
+      });
+
+      th.setAttribute('data-sort', asc ? 'asc' : 'desc');
+      th.setAttribute('aria-sort', asc ? 'ascending' : 'descending');
+
+      const rows = [...tbody.querySelectorAll('tr')];
+
+      rows.sort((a, b) => {
+        const av = a.cells[colIndex]?.textContent.trim() ?? '';
+        const bv = b.cells[colIndex]?.textContent.trim() ?? '';
+
+        // Try numeric sort first
+        const an = parseFloat(av.replace(/[^0-9.-]/g, ''));
+        const bn = parseFloat(bv.replace(/[^0-9.-]/g, ''));
+
+        if (!isNaN(an) && !isNaN(bn)) return asc ? an - bn : bn - an;
+        return asc ? av.localeCompare(bv) : bv.localeCompare(av);
+      });
+
+      rows.forEach(row => tbody.appendChild(row));
+    });
+  });
+}
+
+/* === components/tabs.js === */
+class KernTabs extends HTMLElement {
+  connectedCallback() {
+    this._init();
+  }
+
+  _init() {
+    const tabs   = [...this.querySelectorAll('[data-tab]')];
+    const panels = [...this.querySelectorAll('[data-tab-panel]')];
+
+    // Find the initial active index (first by default)
+    const initialActive = Math.max(0, tabs.findIndex(t => t.hasAttribute('data-active')));
+
+    tabs.forEach((tab, i) => {
+      // ARIA
+      tab.setAttribute('role', 'tab');
+      tab.setAttribute('tabindex', i === initialActive ? '0' : '-1');
+      tab.setAttribute('aria-selected', i === initialActive ? 'true' : 'false');
+
+      // Wire panel id
+      if (panels[i]) {
+        const panelId = panels[i].id || `k-panel-${Math.random().toString(36).slice(2)}`;
+        panels[i].id = panelId;
+        tab.setAttribute('aria-controls', panelId);
+        panels[i].setAttribute('role', 'tabpanel');
+        panels[i].setAttribute('aria-labelledby', tab.id || `k-tab-${i}`);
+      }
+
+      tab.addEventListener('click', () => this.goto(i));
+
+      tab.addEventListener('keydown', (e) => {
+        const count = tabs.length;
+        if (e.key === 'ArrowRight') { e.preventDefault(); this.goto((i + 1) % count); }
+        if (e.key === 'ArrowLeft')  { e.preventDefault(); this.goto((i - 1 + count) % count); }
+        if (e.key === 'Home')       { e.preventDefault(); this.goto(0); }
+        if (e.key === 'End')        { e.preventDefault(); this.goto(count - 1); }
+      });
+    });
+
+    // Activate initial panel (no focus)
+    this._activate(initialActive, false);
+  }
+
+  goto(index) {
+    this._activate(index, true);
+  }
+
+  setActive(index) {
+    this._activate(index, false);
+  }
+
+  _activate(index, focus = false) {
+    const tabs   = [...this.querySelectorAll('[data-tab]')];
+    const panels = [...this.querySelectorAll('[data-tab-panel]')];
+
+    tabs.forEach((tab, i) => {
+      const active = i === index;
+      tab.setAttribute('aria-selected', active ? 'true' : 'false');
+      tab.setAttribute('tabindex', active ? '0' : '-1');
+    });
+
+    panels.forEach((panel, i) => {
+      i === index ? panel.setAttribute('data-active', '') : panel.removeAttribute('data-active');
+    });
+
+    if (focus && tabs[index]) tabs[index].focus();
+
+    emit(this, 'kern:tab-change', { index });
+  }
+}
+
+customElements.define('kern-tabs', KernTabs);
+
+/* === components/dropdown.js === */
+class KernDropdown extends HTMLElement {
+  connectedCallback() {
+    this._trigger  = this.querySelector('[data-dropdown-trigger]') || this.firstElementChild;
+    this._content  = this.querySelector('[data-dropdown-content]');
+    this._onOutside = (e) => { if (!this.contains(e.target)) this.close(); };
+
+    if (!this._trigger) return;
+
+    this._trigger.setAttribute('aria-haspopup', 'true');
+    this._trigger.setAttribute('aria-expanded', 'false');
+
+    this._trigger.addEventListener('click', (e) => {
+      e.stopPropagation();
+      this.hasAttribute('open') ? this.close() : this.open();
+    });
+
+    this._trigger.addEventListener('keydown', (e) => {
+      if (e.key === 'ArrowDown') { e.preventDefault(); this.open(); this._focusFirst(); }
+      if (e.key === 'Escape')    this.close();
+    });
+
+    if (this._content) {
+      const items = () => [...this._content.querySelectorAll('[data-dropdown-item]:not([disabled])')];
+
+      this._content.addEventListener('keydown', (e) => {
+        const list = items();
+        const idx  = list.indexOf(document.activeElement);
+        if (e.key === 'ArrowDown')  { e.preventDefault(); list[idx + 1]?.focus() ?? list[0]?.focus(); }
+        if (e.key === 'ArrowUp')    { e.preventDefault(); idx > 0 ? list[idx - 1]?.focus() : this._trigger.focus(); }
+        if (e.key === 'Escape')     { this.close(); this._trigger.focus(); }
+        if (e.key === 'Tab')        this.close();
+      });
+
+      items().forEach(item => {
+        item.setAttribute('role', 'menuitem');
+        item.setAttribute('tabindex', '-1');
+      });
+    }
+  }
+
+  disconnectedCallback() {
+    document.removeEventListener('click', this._onOutside);
+  }
+
+  open() {
+    this.setAttribute('open', '');
+    this._trigger?.setAttribute('aria-expanded', 'true');
+    document.addEventListener('click', this._onOutside);
+    emit(this, 'kern:dropdown-open');
+  }
+
+  close() {
+    this.removeAttribute('open');
+    this._trigger?.setAttribute('aria-expanded', 'false');
+    document.removeEventListener('click', this._onOutside);
+    emit(this, 'kern:dropdown-close');
+  }
+
+  toggle() {
+    this.hasAttribute('open') ? this.close() : this.open();
+  }
+
+  _focusFirst() {
+    const first = this._content?.querySelector('[data-dropdown-item]:not([disabled])');
+    setTimeout(() => first?.focus(), 10);
+  }
+}
+
+customElements.define('kern-dropdown', KernDropdown);
+
+/* === components/dialog.js === */
+class KernDialog extends HTMLElement {
+  connectedCallback() {
+    this._dialog = this.querySelector('dialog');
+    if (!this._dialog) return;
+    this._setup();
+  }
+
+  _setup() {
+    const d = this._dialog;
+
+    // Wire close buttons
+    this.querySelectorAll('[data-dialog-close]').forEach(btn => {
+      btn.addEventListener('click', () => this.close());
+    });
+
+    // Backdrop click to close (unless opted out)
+    d.addEventListener('click', (e) => {
+      if (e.target === d && !d.hasAttribute('data-no-backdrop-close')) this.close();
+    });
+
+    // ESC (native cancel event)
+    d.addEventListener('cancel', (e) => {
+      e.preventDefault();
+      this.close();
+    });
+  }
+
+  open() {
+    if (!this._dialog) return;
+    this._dialog.showModal();
+    // Focus first focusable element
+    const f = firstFocusable(this._dialog);
+    if (f) setTimeout(() => f.focus(), 40);
+    emit(this, 'kern:dialog-open');
+  }
+
+  close() {
+    if (!this._dialog || !this._dialog.open) return;
+    this._dialog.close();
+    emit(this, 'kern:dialog-close');
+  }
+
+  toggle() {
+    this._dialog?.open ? this.close() : this.open();
+  }
+}
+
+customElements.define('kern-dialog', KernDialog);
+
+/* === components/drawer.js === */
+class KernDrawer extends HTMLElement {
+  connectedCallback() {
+    this._panel    = this.querySelector('[data-drawer-panel]');
+    this._backdrop = this.querySelector('[data-drawer-backdrop]');
+
+    this._onKey = (e) => { if (e.key === 'Escape') this.close(); };
+
+    this.querySelectorAll('[data-drawer-close]').forEach(btn => {
+      btn.addEventListener('click', () => this.close());
+    });
+
+    this._backdrop?.addEventListener('click', () => this.close());
+  }
+
+  open() {
+    this.setAttribute('open', '');
+    document.body.style.overflow = 'hidden';
+    document.addEventListener('keydown', this._onKey);
+    const f = firstFocusable(this._panel);
+    if (f) setTimeout(() => f.focus(), 60);
+    emit(this, 'kern:drawer-open');
+  }
+
+  close() {
+    this.removeAttribute('open');
+    document.body.style.overflow = '';
+    document.removeEventListener('keydown', this._onKey);
+    emit(this, 'kern:drawer-close');
+  }
+
+  toggle() {
+    this.hasAttribute('open') ? this.close() : this.open();
+  }
+}
+
+customElements.define('kern-drawer', KernDrawer);
+
+/* === components/toaster.js === */
+class KernToaster extends HTMLElement {
+  connectedCallback() {
+    if (!this.hasAttribute('data-position')) {
+      this.setAttribute('data-position', 'bottom-right');
+    }
+    this.setAttribute('aria-live', 'polite');
+    this.setAttribute('aria-atomic', 'false');
+  }
+
+  
+  add(options = {}) {
+    if (typeof options === 'string') options = { message: options };
+
+    const {
+      title       = '',
+      message     = '',
+      color       = '',
+      duration    = 4000,
+      dismissible = true,
+    } = options;
+
+    const toast = document.createElement('div');
+    toast.setAttribute('data-toast', '');
+    toast.setAttribute('role', 'status');
+    if (color) toast.setAttribute('data-color', color);
+
+    toast.innerHTML = `
+      <div data-toast-body>
+        ${title   ? `<div data-toast-title>${esc(title)}</div>` : ''}
+        ${message ? `<div data-toast-message>${esc(message)}</div>` : ''}
+      </div>
+      ${dismissible ? `<button data-toast-close aria-label="Dismiss">✕</button>` : ''}
+    `.trim();
+
+    toast.querySelector('[data-toast-close]')?.addEventListener('click', () => this._remove(toast));
+
+    this.appendChild(toast);
+    emit(this, 'kern:toast-add', { toast, color, title, message });
+
+    if (duration > 0) setTimeout(() => this._remove(toast), duration);
+
+    return toast;
+  }
+
+  _remove(toast) {
+    if (!toast.isConnected) return;
+    toast.setAttribute('data-removing', '');
+    toast.addEventListener('animationend', () => {
+      toast.remove();
+      emit(this, 'kern:toast-remove', { toast });
+    }, { once: true });
+  }
+
+  clear() {
+    [...this.querySelectorAll('[data-toast]')].forEach(t => this._remove(t));
+  }
+}
+
+customElements.define('kern-toaster', KernToaster);
+
+/* === api.js === */
+const Kern = {
+  version: '1.0.0',
+
+  
+  toast(options = {}) {
+    if (typeof options === 'string') options = { message: options };
+
+    const position = options.position ?? 'bottom-right';
+
+    // Find or create a toaster at the given position
+    let toaster = document.querySelector(`kern-toaster[data-position="${position}"]`)
+      ?? document.querySelector('kern-toaster');
+
+    if (!toaster) {
+      toaster = document.createElement('kern-toaster');
+      toaster.setAttribute('data-position', position);
+      document.body.appendChild(toaster);
+    }
+
+    return toaster.add(options);
+  },
+
+  
+  dialog(selector) {
+    const el = typeof selector === 'string'
+      ? (document.getElementById(selector) ?? document.querySelector(selector))
+      : selector;
+
+    const wc = el?.closest?.('kern-dialog') ?? el;
+
+    if (typeof wc?.open === 'function') wc.open();
+    else if (el instanceof HTMLDialogElement) el.showModal();
+
+    return wc;
+  },
+
+  
+  drawer(selector) {
+    const el = typeof selector === 'string'
+      ? (document.getElementById(selector) ?? document.querySelector(selector))
+      : selector;
+
+    const wc = el?.closest?.('kern-drawer') ?? el;
+
+    if (typeof wc?.open === 'function') wc.open();
+    return wc;
+  },
+
+  
+  setAccent(name) {
+    document.documentElement.setAttribute('data-accent', name);
+  },
+
+  
+  setTheme(theme) {
+    document.documentElement.setAttribute('data-theme', theme);
+    try { localStorage.setItem('kern-theme', theme); } catch (_) {}
+  },
+
+  
+  setRadius(name) {
+    if (name === 'default') document.documentElement.removeAttribute('data-radius');
+    else document.documentElement.setAttribute('data-radius', name);
+  },
+
+  
+  init(root = document) {
+    initAccordions(root);
+    initToggles(root);
+    initTableSort(root);
+  },
+};
+
+/* === boot.js === */
+function boot() {
+  // Restore persisted theme before first paint
+  try {
+    const saved = localStorage.getItem('kern-theme');
+    if (saved) document.documentElement.setAttribute('data-theme', saved);
+  } catch (_) {}
+
+  // Initialize existing DOM
+  Kern.init();
+
+  // Auto-initialize dynamically injected HTML (htmx, alpine, fetch-swapped content, etc.)
+  new MutationObserver((mutations) => {
+    mutations.forEach(mutation => {
+      mutation.addedNodes.forEach(node => {
+        if (node.nodeType === Node.ELEMENT_NODE) {
+          Kern.init(node);
+        }
+      });
+    });
+  }).observe(document.body, { childList: true, subtree: true });
+}
+
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', boot);
+} else {
+  boot();
+}
+
+if(typeof window!=="undefined")window.Kern=Kern;
+})(window);

package/dist/kern.min.css

@@ -0,0 +1 @@
+:root{--k-0:#fff;--k-50:#f8f8f7;--k-100:#f0efed;--k-150:#e8e6e2;--k-200:#d8d5d0;--k-300:#b8b4ae;--k-400:#918d87;--k-500:#6b6762;--k-600:#504d49;--k-700:#38352f;--k-800:#242119;--k-850:#1a1812;--k-900:#100f0a;--k-950:#080807;--k-bg:var(--k-0);--k-surface:var(--k-50);--k-surface-2:var(--k-100);--k-border:var(--k-200);--k-border-strong:var(--k-300);--k-text:var(--k-900);--k-text-2:var(--k-600);--k-text-3:var(--k-400);--k-text-invert:var(--k-0);--k-success:#2d8a4e;--k-success-bg:#edf7f1;--k-success-fg:#1a5c32;--k-warning:#c07a10;--k-warning-bg:#fef8ec;--k-warning-fg:#7a4d08;--k-danger:#c0392b;--k-danger-bg:#fdecea;--k-danger-fg:#8b1a10;--k-info:#1a6fa8;--k-info-bg:#eaf3fb;--k-info-fg:#0e4570;}@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--k-bg:var(--k-950);--k-surface:var(--k-900);--k-surface-2:var(--k-850);--k-border:var(--k-700);--k-border-strong:var(--k-600);--k-text:var(--k-50);--k-text-2:var(--k-300);--k-text-3:var(--k-500);--k-success-bg:#0f2b1a;--k-warning-bg:#2a1c07;--k-danger-bg:#2a0f0c;--k-info-bg:#0c1f2e;}}[data-theme="dark"]{--k-bg:var(--k-950);--k-surface:var(--k-900);--k-surface-2:var(--k-850);--k-border:var(--k-700);--k-border-strong:var(--k-600);--k-text:var(--k-50);--k-text-2:var(--k-300);--k-text-3:var(--k-500);--k-success-bg:#0f2b1a;--k-warning-bg:#2a1c07;--k-danger-bg:#2a0f0c;--k-info-bg:#0c1f2e;}[data-theme="light"]{--k-bg:var(--k-0);--k-surface:var(--k-50);--k-surface-2:var(--k-100);--k-border:var(--k-200);--k-border-strong:var(--k-300);--k-text:var(--k-900);--k-text-2:var(--k-600);--k-text-3:var(--k-400);--k-success-bg:#edf7f1;--k-warning-bg:#fef8ec;--k-danger-bg:#fdecea;--k-info-bg:#eaf3fb;}:root{--k-accent-h:38;--k-accent-s:92%;--k-accent-l:50%;--k-accent:hsl(var(--k-accent-h),var(--k-accent-s),var(--k-accent-l));--k-accent-subtle:hsl(var(--k-accent-h),var(--k-accent-s),94%);--k-accent-muted:hsl(var(--k-accent-h),60%,70%);--k-accent-fg:#000;}[data-theme="dark"]{--k-accent-subtle:hsl(var(--k-accent-h),30%,18%);--k-accent-muted:hsl(var(--k-accent-h),60%,45%);}@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--k-accent-subtle:hsl(var(--k-accent-h),30%,18%);--k-accent-muted:hsl(var(--k-accent-h),60%,45%);}}[data-accent="amber"]{--k-accent-h:38;--k-accent-s:92%;--k-accent-l:50%;--k-accent-fg:#000}[data-accent="blue"]{--k-accent-h:214;--k-accent-s:85%;--k-accent-l:52%;--k-accent-fg:#fff}[data-accent="green"]{--k-accent-h:142;--k-accent-s:72%;--k-accent-l:40%;--k-accent-fg:#fff}[data-accent="red"]{--k-accent-h:4;--k-accent-s:80%;--k-accent-l:50%;--k-accent-fg:#fff}[data-accent="violet"]{--k-accent-h:262;--k-accent-s:75%;--k-accent-l:58%;--k-accent-fg:#fff}[data-accent="rose"]{--k-accent-h:346;--k-accent-s:80%;--k-accent-l:55%;--k-accent-fg:#fff}[data-accent="cyan"]{--k-accent-h:192;--k-accent-s:80%;--k-accent-l:42%;--k-accent-fg:#fff}[data-accent="orange"]{--k-accent-h:24;--k-accent-s:95%;--k-accent-l:53%;--k-accent-fg:#fff}:root{--k-font-sans:'DM Sans','Inter',system-ui,sans-serif;--k-font-mono:'DM Mono','Fira Code','Cascadia Code',monospace;--k-font-size:15px;--k-line-height:1.6;--k-fw-normal:400;--k-fw-medium:500;--k-fw-bold:600;}:root{--k-sp-1:.25rem;--k-sp-2:.5rem;--k-sp-3:.75rem;--k-sp-4:1rem;--k-sp-5:1.25rem;--k-sp-6:1.5rem;--k-sp-8:2rem;--k-sp-10:2.5rem;--k-sp-12:3rem;--k-sp-16:4rem;}:root{--k-r-sm:3px;--k-r:6px;--k-r-md:8px;--k-r-lg:12px;--k-r-xl:16px;--k-r-full:9999px;--k-btn-r:var(--k-r);--k-card-r:var(--k-r-md);--k-input-r:var(--k-r);--k-badge-r:var(--k-r-sm);--k-tooltip-r:var(--k-r-sm);--k-dialog-r:var(--k-r-lg);}[data-radius="none"]{--k-r-sm:0;--k-r:0;--k-r-md:0;--k-r-lg:0;--k-r-xl:0;--k-btn-r:0;--k-card-r:0;--k-input-r:0;--k-badge-r:0}[data-radius="sharp"]{--k-r-sm:2px;--k-r:4px;--k-r-md:6px;--k-r-lg:8px;--k-r-xl:10px}[data-radius="round"]{--k-r-sm:6px;--k-r:10px;--k-r-md:14px;--k-r-lg:20px;--k-r-xl:28px;--k-btn-r:var(--k-r-full);--k-input-r:var(--k-r-full)}:root{--k-sh-sm:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.08);--k-sh:0 2px 8px rgba(0,0,0,.08),0 1px 3px rgba(0,0,0,.06);--k-sh-md:0 4px 16px rgba(0,0,0,.10),0 2px 6px rgba(0,0,0,.06);--k-sh-lg:0 8px 32px rgba(0,0,0,.12),0 4px 12px rgba(0,0,0,.08);--k-sh-xl:0 16px 48px rgba(0,0,0,.14),0 8px 24px rgba(0,0,0,.08);}[data-theme="dark"]{--k-sh-sm:0 1px 2px rgba(0,0,0,.3);--k-sh:0 2px 8px rgba(0,0,0,.4);--k-sh-md:0 4px 16px rgba(0,0,0,.5);--k-sh-lg:0 8px 32px rgba(0,0,0,.5);--k-sh-xl:0 16px 48px rgba(0,0,0,.6);}@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--k-sh-sm:0 1px 2px rgba(0,0,0,.3);--k-sh:0 2px 8px rgba(0,0,0,.4);--k-sh-md:0 4px 16px rgba(0,0,0,.5);--k-sh-lg:0 8px 32px rgba(0,0,0,.5);--k-sh-xl:0 16px 48px rgba(0,0,0,.6);}}:root{--k-ease:cubic-bezier(.16,1,.3,1);--k-ease-in:cubic-bezier(.4,0,1,1);--k-ease-out:cubic-bezier(0,0,.2,1);--k-fast:120ms;--k-dur:200ms;--k-slow:350ms;}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}:root{--k-z-drop:100;--k-z-sticky:200;--k-z-overlay:300;--k-z-modal:400;--k-z-toast:500;--k-z-tip:600;}:root{--k-btn-h-sm:28px;--k-btn-h:36px;--k-btn-h-lg:44px;--k-input-h:36px;--k-input-h-sm:28px;--k-input-h-lg:44px;--k-card-p:var(--k-sp-6);--k-sidebar-w:240px;}*,*::before,*::after{box-sizing:border-box;margin:0}html{font-size:var(--k-font-size);-webkit-text-size-adjust:100%;tab-size:2}body{font-family:var(--k-font-sans);font-size:1rem;line-height:var(--k-line-height);color:var(--k-text);background:var(--k-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}img,video,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}a{color:var(--k-accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;transition:opacity var(--k-fast)}a:hover{opacity:.75}hr{border:none;border-top:1px solid var(--k-border);margin:var(--k-sp-6) 0}h1,h2,h3,h4,h5,h6{font-weight:var(--k-fw-bold);line-height:1.25;letter-spacing:-0.02em;color:var(--k-text)}h1{font-size:2.5rem;letter-spacing:-0.03em}h2{font-size:2rem}h3{font-size:1.5rem}h4{font-size:1.25rem}h5{font-size:1.1rem}h6{font-size:1rem}p{margin-bottom:var(--k-sp-4);max-width:68ch}p:last-child{margin-bottom:0}strong{font-weight:var(--k-fw-bold)}em{font-style:italic}small{font-size:.8rem;color:var(--k-text-2)}code{font-family:var(--k-font-mono);font-size:.875em;background:var(--k-surface-2);border:1px solid var(--k-border);padding:.1em .4em;border-radius:var(--k-r-sm)}pre{font-family:var(--k-font-mono);font-size:.875rem;background:var(--k-surface);border:1px solid var(--k-border);border-radius:var(--k-r-md);padding:var(--k-sp-5) var(--k-sp-6);overflow-x:auto;line-height:1.7}pre code{background:none;border:none;padding:0;font-size:inherit}blockquote{border-left:3px solid var(--k-accent);padding-left:var(--k-sp-5);margin:var(--k-sp-6) 0;color:var(--k-text-2);font-style:italic}kbd{font-family:var(--k-font-mono);font-size:.8em;background:var(--k-surface-2);border:1px solid var(--k-border);border-bottom-width:2px;padding:.1em .5em;border-radius:var(--k-r-sm)}mark{background:hsl(var(--k-accent-h),90%,85%);color:var(--k-text);padding:.05em .3em;border-radius:2px}[data-theme="dark"] mark{background:hsl(var(--k-accent-h),50%,28%)}abbr[title]{text-decoration:underline dotted;cursor:help}[data-text="xs"]{font-size:.75rem}[data-text="sm"]{font-size:.875rem}[data-text="lg"]{font-size:1.125rem}[data-text="xl"]{font-size:1.25rem}[data-text="muted"]{color:var(--k-text-2)}[data-text="faint"]{color:var(--k-text-3)}[data-text="accent"]{color:var(--k-accent)}[data-text="mono"]{font-family:var(--k-font-mono)}button,[role="button"],input[type="submit"],input[type="button"],input[type="reset"]{display:inline-flex;align-items:center;justify-content:center;gap:var(--k-sp-2);height:var(--k-btn-h);padding:0 var(--k-sp-4);font-size:.875rem;font-weight:var(--k-fw-medium);line-height:1;white-space:nowrap;border-radius:var(--k-btn-r);border:1px solid transparent;cursor:pointer;text-decoration:none;user-select:none;transition:background var(--k-fast) var(--k-ease),border-color var(--k-fast),color var(--k-fast),box-shadow var(--k-fast),filter var(--k-fast),transform var(--k-fast);background:var(--k-accent);color:var(--k-accent-fg);}button:hover{filter:brightness(1.08);box-shadow:var(--k-sh-sm)}button:active{filter:brightness(.95);transform:translateY(1px)}button:focus-visible{outline:2px solid var(--k-accent);outline-offset:2px}button[data-variant="secondary"]{background:var(--k-surface-2);color:var(--k-text);border-color:var(--k-border)}button[data-variant="secondary"]:hover{background:var(--k-surface);border-color:var(--k-border-strong);filter:none}button[data-variant="outline"]{background:transparent;color:var(--k-text);border-color:var(--k-border-strong)}button[data-variant="outline"]:hover{background:var(--k-surface);filter:none}button[data-variant="ghost"]{background:transparent;color:var(--k-text);border-color:transparent}button[data-variant="ghost"]:hover{background:var(--k-surface-2);filter:none}button[data-variant="danger"]{background:var(--k-danger);color:#fff;border-color:transparent}button[data-variant="link"]{background:transparent;color:var(--k-accent);border-color:transparent;padding:0;height:auto;text-decoration:underline;text-underline-offset:3px}button[data-size="sm"]{height:var(--k-btn-h-sm);padding:0 var(--k-sp-3);font-size:.8rem}button[data-size="lg"]{height:var(--k-btn-h-lg);padding:0 var(--k-sp-6);font-size:.95rem}button[data-size="icon"]{width:var(--k-btn-h);padding:0}button[data-size="icon"][data-size="sm"]{width:var(--k-btn-h-sm)}button[data-color="success"]{background:var(--k-success);color:#fff}button[data-color="warning"]{background:var(--k-warning);color:#fff}button[data-color="info"]{background:var(--k-info);color:#fff}button[data-loading]{pointer-events:none;opacity:.75}button[data-loading]::after{content:'';width:13px;height:13px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:k-spin .6s linear infinite;margin-left:var(--k-sp-2)}button:disabled,button[disabled]{opacity:.45;pointer-events:none;cursor:not-allowed}[role="group"]{display:inline-flex}[role="group"] button{border-radius:0}[role="group"]>:first-child{border-radius:var(--k-btn-r) 0 0 var(--k-btn-r)}[role="group"]>:last-child{border-radius:0 var(--k-btn-r) var(--k-btn-r) 0}[role="group"]>:not(:first-child){border-left-width:0}label{display:block;font-size:.875rem;font-weight:var(--k-fw-medium);color:var(--k-text);margin-bottom:var(--k-sp-1)}label[data-required]::after{content:' *';color:var(--k-danger)}input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),textarea,select{display:block;width:100%;height:var(--k-input-h);padding:0 var(--k-sp-3);font-size:.875rem;color:var(--k-text);background:var(--k-bg);border:1px solid var(--k-border);border-radius:var(--k-input-r);outline:none;appearance:none;-webkit-appearance:none;transition:border-color var(--k-fast),box-shadow var(--k-fast);}textarea{height:auto;min-height:90px;padding:var(--k-sp-3);resize:vertical}select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:32px;cursor:pointer}input:not([type=checkbox]):not([type=radio]):focus,textarea:focus,select:focus{border-color:var(--k-accent);box-shadow:0 0 0 3px hsl(var(--k-accent-h),var(--k-accent-s),var(--k-accent-l),.15);}input[data-size="sm"]:not([type=checkbox]):not([type=radio]){height:var(--k-input-h-sm);font-size:.8rem;padding:0 var(--k-sp-2)}input[data-size="lg"]:not([type=checkbox]):not([type=radio]){height:var(--k-input-h-lg);font-size:1rem;padding:0 var(--k-sp-4)}input[data-state="error"],textarea[data-state="error"]{border-color:var(--k-danger)}input[data-state="error"]:focus{box-shadow:0 0 0 3px rgba(192,57,43,.15)}input[data-state="success"],textarea[data-state="success"]{border-color:var(--k-success)}input:disabled,textarea:disabled,select:disabled{opacity:.55;cursor:not-allowed;background:var(--k-surface)}input[readonly]{background:var(--k-surface)}input[type=checkbox],input[type=radio]{width:16px;height:16px;border:1.5px solid var(--k-border-strong);background:var(--k-bg);appearance:none;-webkit-appearance:none;cursor:pointer;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;position:relative;transition:all var(--k-fast);}input[type=checkbox]{border-radius:var(--k-r-sm)}input[type=radio]{border-radius:50%}input[type=checkbox]:checked,input[type=radio]:checked{background:var(--k-accent);border-color:var(--k-accent)}input[type=checkbox]:checked::after{content:'';width:4px;height:8px;border:2px solid var(--k-accent-fg);border-top:none;border-left:none;transform:rotate(45deg) translateY(-1px);position:absolute}input[type=radio]:checked::after{content:'';width:6px;height:6px;background:var(--k-accent-fg);border-radius:50%;position:absolute}input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{outline:2px solid var(--k-accent);outline-offset:2px}input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:5px;background:var(--k-surface-2);border-radius:var(--k-r-full);outline:none;cursor:pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;background:var(--k-accent);border-radius:50%;border:2px solid var(--k-bg);box-shadow:var(--k-sh-sm);transition:transform var(--k-fast)}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}[data-field]{display:flex;flex-direction:column;gap:var(--k-sp-1);margin-bottom:var(--k-sp-5)}[data-field]:last-child{margin-bottom:0}[data-hint]{font-size:.8rem;color:var(--k-text-2)}[data-hint][data-state="error"]{color:var(--k-danger)}[data-hint][data-state="success"]{color:var(--k-success)}[data-input-group]{display:flex;align-items:stretch;width:100%}[data-input-group] input{border-radius:0;flex:1}[data-input-group] [data-addon]{display:inline-flex;align-items:center;padding:0 var(--k-sp-3);background:var(--k-surface-2);border:1px solid var(--k-border);font-size:.875rem;color:var(--k-text-2);white-space:nowrap}[data-input-group] [data-addon]:first-child{border-right:none;border-radius:var(--k-input-r) 0 0 var(--k-input-r)}[data-input-group] [data-addon]:last-child{border-left:none;border-radius:0 var(--k-input-r) var(--k-input-r) 0}[data-card]{background:var(--k-surface);border:1px solid var(--k-border);border-radius:var(--k-card-r);padding:var(--k-card-p);box-shadow:var(--k-sh-sm);position:relative}[data-card][data-variant="flat"]{box-shadow:none}[data-card][data-variant="raised"]{box-shadow:var(--k-sh-md)}[data-card][data-variant="ghost"]{background:transparent;border-color:transparent;box-shadow:none}[data-card][data-variant="inset"]{background:var(--k-surface-2);border-color:transparent;box-shadow:none}[data-card][data-clickable]{cursor:pointer;transition:box-shadow var(--k-dur),transform var(--k-dur),border-color var(--k-dur)}[data-card][data-clickable]:hover{box-shadow:var(--k-sh-md);transform:translateY(-1px);border-color:var(--k-border-strong)}[data-card][data-clickable]:active{transform:translateY(0)}[data-card] [data-card-header]{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--k-sp-4);margin-bottom:var(--k-sp-5);padding-bottom:var(--k-sp-5);border-bottom:1px solid var(--k-border)}[data-card] [data-card-title]{font-size:1rem;font-weight:var(--k-fw-bold);letter-spacing:-0.01em}[data-card] [data-card-desc]{font-size:.875rem;color:var(--k-text-2);margin-top:var(--k-sp-1)}[data-card] [data-card-footer]{display:flex;align-items:center;gap:var(--k-sp-3);margin-top:var(--k-sp-5);padding-top:var(--k-sp-5);border-top:1px solid var(--k-border)}[data-badge]{display:inline-flex;align-items:center;gap:var(--k-sp-1);padding:2px var(--k-sp-2);font-size:.75rem;font-weight:var(--k-fw-medium);border-radius:var(--k-badge-r);border:1px solid var(--k-border);line-height:1.5;white-space:nowrap;background:var(--k-surface-2);color:var(--k-text-2);}[data-badge][data-color="accent"]{background:var(--k-accent-subtle);color:var(--k-accent);border-color:var(--k-accent-muted)}[data-badge][data-color="success"]{background:var(--k-success-bg);color:var(--k-success-fg);border-color:var(--k-success)}[data-badge][data-color="warning"]{background:var(--k-warning-bg);color:var(--k-warning-fg);border-color:var(--k-warning)}[data-badge][data-color="danger"]{background:var(--k-danger-bg);color:var(--k-danger-fg);border-color:var(--k-danger)}[data-badge][data-color="info"]{background:var(--k-info-bg);color:var(--k-info-fg);border-color:var(--k-info)}[data-badge][data-variant="solid"][data-color="accent"]{background:var(--k-accent);color:var(--k-accent-fg);border-color:transparent}[data-badge][data-variant="solid"][data-color="success"]{background:var(--k-success);color:#fff;border-color:transparent}[data-badge][data-variant="solid"][data-color="danger"]{background:var(--k-danger);color:#fff;border-color:transparent}[data-badge][data-variant="pill"]{border-radius:var(--k-r-full)}[data-badge][data-dot]::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}[role="alert"],[data-alert]{display:flex;gap:var(--k-sp-3);align-items:flex-start;padding:var(--k-sp-4) var(--k-sp-5);border-radius:var(--k-r-md);border:1px solid;font-size:.875rem;line-height:1.5;background:var(--k-info-bg);border-color:var(--k-info);color:var(--k-info-fg);}[data-alert][data-color="success"]{background:var(--k-success-bg);border-color:var(--k-success);color:var(--k-success-fg)}[data-alert][data-color="warning"]{background:var(--k-warning-bg);border-color:var(--k-warning);color:var(--k-warning-fg)}[data-alert][data-color="danger"]{background:var(--k-danger-bg);border-color:var(--k-danger);color:var(--k-danger-fg)}[data-alert][data-color="neutral"]{background:var(--k-surface-2);border-color:var(--k-border);color:var(--k-text)}[data-alert] [data-alert-title]{font-weight:var(--k-fw-bold);margin-bottom:var(--k-sp-1)}[data-alert] [data-alert-icon]{flex-shrink:0;margin-top:1px}table,[data-table]{width:100%;border-collapse:collapse;font-size:.875rem}table th{text-align:left;font-weight:var(--k-fw-medium);font-size:.75rem;color:var(--k-text-2);letter-spacing:.05em;text-transform:uppercase;padding:var(--k-sp-3) var(--k-sp-4);border-bottom:1px solid var(--k-border);white-space:nowrap;background:var(--k-surface)}table th[data-sort]{cursor:pointer;user-select:none}table th[data-sort]:hover{color:var(--k-text)}table th[data-sort]::after{content:' ⇕';opacity:.35;font-size:.75em}table th[data-sort="asc"]::after{content:' ↑';opacity:1;color:var(--k-accent)}table th[data-sort="desc"]::after{content:' ↓';opacity:1;color:var(--k-accent)}table td{padding:var(--k-sp-3) var(--k-sp-4);border-bottom:1px solid var(--k-border);vertical-align:middle}table tr:last-child td{border-bottom:none}table[data-variant="bordered"] td,table[data-variant="bordered"] th{border:1px solid var(--k-border)}table[data-variant="striped"] tbody tr:nth-child(even){background:var(--k-surface)}table[data-variant="compact"] th,table[data-variant="compact"] td{padding:var(--k-sp-2) var(--k-sp-3)}table[data-variant="comfortable"] th,table[data-variant="comfortable"] td{padding:var(--k-sp-4) var(--k-sp-5)}tbody tr{transition:background var(--k-fast)}table[data-hover] tbody tr:hover{background:var(--k-surface)}[data-table-wrap]{border:1px solid var(--k-border);border-radius:var(--k-r-md);overflow:hidden;overflow-x:auto}kern-tabs{display:block}kern-tabs [data-tabs-list]{display:flex;border-bottom:1px solid var(--k-border);overflow-x:auto;scrollbar-width:none}kern-tabs [data-tabs-list]::-webkit-scrollbar{display:none}kern-tabs [data-tab]{display:inline-flex;align-items:center;gap:var(--k-sp-2);padding:var(--k-sp-3) var(--k-sp-4);font-size:.875rem;font-weight:var(--k-fw-medium);color:var(--k-text-2);border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap;transition:color var(--k-fast),border-color var(--k-fast);margin-bottom:-1px;user-select:none;background:none;border-top:none;border-left:none;border-right:none;border-radius:0;height:auto;}kern-tabs [data-tab]:hover{color:var(--k-text)}kern-tabs [data-tab][aria-selected="true"]{color:var(--k-accent);border-bottom-color:var(--k-accent)}kern-tabs [data-tab-panel]{padding:var(--k-sp-6) 0;display:none}kern-tabs [data-tab-panel][data-active]{display:block}kern-tabs[data-variant="pills"] [data-tabs-list]{border-bottom:none;gap:var(--k-sp-1);padding:var(--k-sp-1);background:var(--k-surface-2);border-radius:var(--k-r-md);display:inline-flex}kern-tabs[data-variant="pills"] [data-tab]{border:none;border-radius:var(--k-r);margin-bottom:0;color:var(--k-text-2)}kern-tabs[data-variant="pills"] [data-tab][aria-selected="true"]{background:var(--k-bg);color:var(--k-text);box-shadow:var(--k-sh-sm)}[data-accordion]{border:1px solid var(--k-border);border-radius:var(--k-r-md);overflow:hidden}[data-accordion-item]{border-bottom:1px solid var(--k-border)}[data-accordion-item]:last-child{border-bottom:none}[data-accordion-trigger]{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--k-sp-4) var(--k-sp-5);font-size:.9rem;font-weight:var(--k-fw-medium);cursor:pointer;background:none;border:none;height:auto;color:var(--k-text);text-align:left;transition:background var(--k-fast);border-radius:0;}[data-accordion-trigger]:hover{background:var(--k-surface-2)}[data-accordion-trigger]::after{content:'';width:16px;height:16px;flex-shrink:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;transition:transform var(--k-dur) var(--k-ease);}[data-accordion-trigger][aria-expanded="true"]::after{transform:rotate(180deg)}[data-accordion-content]{overflow:hidden;max-height:0;transition:max-height var(--k-slow) var(--k-ease)}[data-accordion-content][data-open]{max-height:2000px}[data-accordion-content] [data-accordion-body]{padding:0 var(--k-sp-5) var(--k-sp-5);font-size:.875rem;color:var(--k-text-2);line-height:1.7}dialog{border:1px solid var(--k-border);border-radius:var(--k-dialog-r);box-shadow:var(--k-sh-xl);background:var(--k-bg);padding:0;max-width:520px;width:calc(100vw - 2rem);color:var(--k-text);animation:k-dialog-in var(--k-slow) var(--k-ease);}dialog[data-size="sm"]{max-width:380px}dialog[data-size="lg"]{max-width:720px}dialog[data-size="xl"]{max-width:960px}dialog[data-size="full"]{max-width:calc(100vw - 2rem);max-height:calc(100vh - 2rem)}dialog::backdrop{background:rgba(0,0,0,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}dialog [data-dialog-header]{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--k-sp-4);padding:var(--k-sp-6);border-bottom:1px solid var(--k-border)}dialog [data-dialog-title]{font-size:1.05rem;font-weight:var(--k-fw-bold);letter-spacing:-0.015em}dialog [data-dialog-desc]{font-size:.875rem;color:var(--k-text-2);margin-top:var(--k-sp-1)}dialog [data-dialog-close]{background:none;border:none;color:var(--k-text-3);padding:0;height:24px;width:24px;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:var(--k-r-sm);flex-shrink:0;transition:color var(--k-fast),background var(--k-fast);font-size:1.2rem;line-height:1}dialog [data-dialog-close]:hover{color:var(--k-text);background:var(--k-surface-2)}dialog [data-dialog-body]{padding:var(--k-sp-6);font-size:.9rem;line-height:1.7}dialog [data-dialog-footer]{display:flex;align-items:center;justify-content:flex-end;gap:var(--k-sp-3);padding:var(--k-sp-4) var(--k-sp-6);border-top:1px solid var(--k-border);background:var(--k-surface);border-radius:0 0 var(--k-dialog-r) var(--k-dialog-r)}kern-dropdown{display:inline-block;position:relative}kern-dropdown [data-dropdown-content]{position:absolute;top:calc(100%+6px);left:0;min-width:190px;background:var(--k-bg);border:1px solid var(--k-border);border-radius:var(--k-r-md);box-shadow:var(--k-sh-lg);padding:var(--k-sp-1);z-index:var(--k-z-drop);display:none;animation:k-fade-in var(--k-fast) var(--k-ease-out);}kern-dropdown[data-align="end"] [data-dropdown-content]{left:auto;right:0}kern-dropdown[open] [data-dropdown-content]{display:block}kern-dropdown [data-dropdown-item]{display:flex;align-items:center;gap:var(--k-sp-3);padding:var(--k-sp-2) var(--k-sp-3);font-size:.875rem;color:var(--k-text);border-radius:var(--k-r);cursor:pointer;transition:background var(--k-fast);text-decoration:none;}kern-dropdown [data-dropdown-item]:hover{background:var(--k-surface-2)}kern-dropdown [data-dropdown-item][data-color="danger"]{color:var(--k-danger)}kern-dropdown [data-dropdown-item][data-color="danger"]:hover{background:var(--k-danger-bg)}kern-dropdown [data-dropdown-item][disabled]{opacity:.45;pointer-events:none}kern-dropdown [data-dropdown-sep]{height:1px;background:var(--k-border);margin:var(--k-sp-1) 0}kern-dropdown [data-dropdown-label]{padding:var(--k-sp-2) var(--k-sp-3);font-size:.72rem;font-weight:var(--k-fw-medium);color:var(--k-text-3);text-transform:uppercase;letter-spacing:.07em}[data-tooltip]{position:relative}[data-tooltip]::before{content:attr(data-tooltip);position:absolute;bottom:calc(100%+8px);left:50%;transform:translateX(-50%) translateY(4px);background:var(--k-900);color:var(--k-50);font-size:.77rem;padding:var(--k-sp-1) var(--k-sp-3);border-radius:var(--k-tooltip-r);white-space:nowrap;pointer-events:none;opacity:0;z-index:var(--k-z-tip);box-shadow:var(--k-sh-md);max-width:240px;text-align:center;transition:opacity var(--k-fast),transform var(--k-fast);}[data-tooltip]::after{content:'';position:absolute;bottom:calc(100%+3px);left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--k-900);pointer-events:none;opacity:0;transition:opacity var(--k-fast);z-index:var(--k-z-tip);}[data-tooltip]:hover::before,[data-tooltip]:hover::after{opacity:1;transform:translateX(-50%) translateY(0)}[data-tooltip][data-placement="bottom"]::before{bottom:auto;top:calc(100%+8px);transform:translateX(-50%) translateY(-4px)}[data-tooltip][data-placement="bottom"]::after{bottom:auto;top:calc(100%+3px);border-top-color:transparent;border-bottom-color:var(--k-900)}[data-tooltip][data-placement="bottom"]:hover::before{transform:translateX(-50%) translateY(0)}[data-tooltip][data-placement="left"]::before{bottom:auto;left:auto;right:calc(100%+8px);top:50%;transform:translateY(-50%) translateX(4px)}[data-tooltip][data-placement="left"]:hover::before{transform:translateY(-50%) translateX(0)}[data-tooltip][data-placement="right"]::before{bottom:auto;left:calc(100%+8px);top:50%;transform:translateY(-50%) translateX(-4px)}[data-tooltip][data-placement="right"]:hover::before{transform:translateY(-50%) translateX(0)}[data-theme="light"] [data-tooltip]::before{background:var(--k-200);color:var(--k-900)}[data-theme="light"] [data-tooltip]::after{border-top-color:var(--k-200)}kern-toaster{position:fixed;z-index:var(--k-z-toast);display:flex;flex-direction:column;gap:var(--k-sp-3);pointer-events:none;padding:var(--k-sp-4);}kern-toaster[data-position="top-right"]{top:0;right:0;align-items:flex-end}kern-toaster[data-position="top-left"]{top:0;left:0;align-items:flex-start}kern-toaster[data-position="top-center"]{top:0;left:50%;transform:translateX(-50%);align-items:center}kern-toaster[data-position="bottom-right"]{bottom:0;right:0;align-items:flex-end;flex-direction:column-reverse}kern-toaster[data-position="bottom-left"]{bottom:0;left:0;align-items:flex-start;flex-direction:column-reverse}kern-toaster[data-position="bottom-center"]{bottom:0;left:50%;transform:translateX(-50%);align-items:center;flex-direction:column-reverse}[data-toast]{display:flex;align-items:flex-start;gap:var(--k-sp-3);min-width:280px;max-width:400px;padding:var(--k-sp-4);background:var(--k-bg);border:1px solid var(--k-border);border-radius:var(--k-r-md);box-shadow:var(--k-sh-lg);pointer-events:all;animation:k-toast-in var(--k-slow) var(--k-ease);position:relative;overflow:hidden;}[data-toast]::before{content:'';position:absolute;top:0;left:0;width:3px;height:100%;background:var(--k-info)}[data-toast][data-color="success"]::before{background:var(--k-success)}[data-toast][data-color="warning"]::before{background:var(--k-warning)}[data-toast][data-color="danger"]::before{background:var(--k-danger)}[data-toast][data-color="accent"]::before{background:var(--k-accent)}[data-toast-body]{flex:1}[data-toast-title]{font-size:.875rem;font-weight:var(--k-fw-medium);margin-bottom:2px}[data-toast-message]{font-size:.8rem;color:var(--k-text-2)}[data-toast-close]{background:none;border:none;color:var(--k-text-3);cursor:pointer;padding:0;height:20px;width:20px;font-size:1rem;display:flex;align-items:center;justify-content:center;border-radius:var(--k-r-sm);transition:color var(--k-fast),background var(--k-fast);flex-shrink:0}[data-toast-close]:hover{color:var(--k-text);background:var(--k-surface-2)}[data-toast][data-removing]{animation:k-toast-out var(--k-slow) var(--k-ease) forwards}[data-progress]{width:100%;height:6px;background:var(--k-surface-2);border-radius:var(--k-r-full);overflow:hidden}[data-progress][data-size="sm"]{height:3px}[data-progress][data-size="lg"]{height:10px}[data-progress-bar]{height:100%;background:var(--k-accent);border-radius:inherit;transition:width var(--k-slow) var(--k-ease)}[data-progress][data-color="success"] [data-progress-bar]{background:var(--k-success)}[data-progress][data-color="warning"] [data-progress-bar]{background:var(--k-warning)}[data-progress][data-color="danger"] [data-progress-bar]{background:var(--k-danger)}[data-progress][data-animated] [data-progress-bar]{background:repeating-linear-gradient(-45deg,var(--k-accent),var(--k-accent) 10px,hsl(var(--k-accent-h),var(--k-accent-s),calc(var(--k-accent-l)+10%)) 10px,hsl(var(--k-accent-h),var(--k-accent-s),calc(var(--k-accent-l)+10%)) 20px);background-size:28px 100%;animation:k-progress-stripe 1s linear infinite}[data-progress][data-indeterminate] [data-progress-bar]{width:40%!important;animation:k-progress-indeterminate 1.4s ease-in-out infinite}[data-spinner]{display:inline-block;width:20px;height:20px;border:2px solid var(--k-surface-2);border-top-color:var(--k-accent);border-radius:50%;animation:k-spin .7s linear infinite}[data-spinner][data-size="sm"]{width:14px;height:14px}[data-spinner][data-size="lg"]{width:32px;height:32px;border-width:3px}[data-spinner][data-color="text"]{border-color:var(--k-surface-2);border-top-color:currentColor}[data-skeleton]{background:linear-gradient(90deg,var(--k-surface-2) 25%,var(--k-surface) 50%,var(--k-surface-2) 75%);background-size:200% 100%;animation:k-skeleton 1.5s ease-in-out infinite;border-radius:var(--k-r);display:block;}[data-skeleton][data-shape="circle"]{border-radius:50%}[data-skeleton][data-shape="text"]{height:1em;border-radius:var(--k-r-sm)}[data-switch]{position:relative;display:inline-flex;align-items:center;gap:var(--k-sp-3);cursor:pointer;user-select:none}[data-switch] input[type=checkbox]{position:absolute;opacity:0;width:0;height:0}[data-switch-track]{width:40px;height:22px;background:var(--k-border-strong);border-radius:var(--k-r-full);position:relative;transition:background var(--k-fast);flex-shrink:0}[data-switch-track]::after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;background:#fff;border-radius:50%;transition:transform var(--k-dur) var(--k-ease);box-shadow:var(--k-sh-sm)}[data-switch] input:checked~[data-switch-track]{background:var(--k-accent)}[data-switch] input:checked~[data-switch-track]::after{transform:translateX(18px)}[data-switch] input:focus-visible~[data-switch-track]{outline:2px solid var(--k-accent);outline-offset:2px}[data-switch][data-size="sm"] [data-switch-track]{width:32px;height:18px}[data-switch][data-size="sm"] [data-switch-track]::after{width:12px;height:12px}[data-switch][data-size="sm"] input:checked~[data-switch-track]::after{transform:translateX(14px)}[data-avatar]{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--k-accent-subtle);color:var(--k-accent);font-size:.875rem;font-weight:var(--k-fw-bold);overflow:hidden;flex-shrink:0;user-select:none;border:2px solid var(--k-bg)}[data-avatar][data-size="sm"]{width:26px;height:26px;font-size:.7rem}[data-avatar][data-size="lg"]{width:48px;height:48px;font-size:1.1rem}[data-avatar][data-size="xl"]{width:64px;height:64px;font-size:1.4rem}[data-avatar] img{width:100%;height:100%;object-fit:cover}[data-avatar-group]{display:flex}[data-avatar-group] [data-avatar]{margin-left:-8px}[data-avatar-group] [data-avatar]:first-child{margin-left:0}[aria-label="breadcrumb"],[data-breadcrumb]{display:flex;align-items:center;gap:var(--k-sp-2);font-size:.875rem;color:var(--k-text-2);flex-wrap:wrap}[data-breadcrumb] a{color:var(--k-text-2);text-decoration:none}[data-breadcrumb] a:hover{color:var(--k-text)}[data-breadcrumb] [aria-current="page"]{color:var(--k-text);font-weight:var(--k-fw-medium)}[data-breadcrumb-sep]::before{content:'/';color:var(--k-text-3)}[data-breadcrumb][data-sep="dot"] [data-breadcrumb-sep]::before{content:'·'}[data-breadcrumb][data-sep="arrow"] [data-breadcrumb-sep]::before{content:'→'}[data-stepper]{display:flex;align-items:flex-start;counter-reset:step;overflow-x:auto}[data-step]{display:flex;flex-direction:column;align-items:center;flex:1;position:relative;text-align:center;counter-increment:step}[data-step]:not(:last-child)::after{content:'';position:absolute;top:16px;left:50%;width:100%;height:1px;background:var(--k-border)}[data-step][data-done]:not(:last-child)::after{background:var(--k-success)}[data-step-marker]{width:32px;height:32px;border-radius:50%;background:var(--k-surface-2);border:2px solid var(--k-border);display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:var(--k-fw-bold);color:var(--k-text-2);position:relative;z-index:1;transition:all var(--k-dur)}[data-step-marker]::before{content:counter(step)}[data-step][data-active] [data-step-marker]{background:var(--k-accent);border-color:var(--k-accent);color:var(--k-accent-fg)}[data-step][data-done] [data-step-marker]{background:var(--k-success);border-color:var(--k-success);color:#fff}[data-step][data-done] [data-step-marker]::before{content:'✓'}[data-step-label]{font-size:.8rem;color:var(--k-text-2);margin-top:var(--k-sp-2)}[data-step][data-active] [data-step-label]{color:var(--k-text);font-weight:var(--k-fw-medium)}[data-pagination]{display:flex;align-items:center;gap:var(--k-sp-1)}[data-pagination] [data-page]{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:0 var(--k-sp-2);font-size:.875rem;border-radius:var(--k-r);cursor:pointer;border:1px solid var(--k-border);background:var(--k-bg);color:var(--k-text-2);text-decoration:none;transition:all var(--k-fast)}[data-pagination] [data-page]:hover{background:var(--k-surface-2);color:var(--k-text);border-color:var(--k-border-strong)}[data-pagination] [data-page][aria-current="page"]{background:var(--k-accent);color:var(--k-accent-fg);border-color:transparent}[data-pagination] [data-page][disabled]{opacity:.4;pointer-events:none}[data-layout]{display:flex;min-height:100vh}[data-sidebar]{width:var(--k-sidebar-w);flex-shrink:0;background:var(--k-surface);border-right:1px solid var(--k-border);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto;transition:width var(--k-slow) var(--k-ease);}[data-sidebar][data-collapsed]{width:60px}[data-sidebar-header]{padding:var(--k-sp-5) var(--k-sp-4);border-bottom:1px solid var(--k-border);display:flex;align-items:center;gap:var(--k-sp-3)}[data-sidebar-nav]{padding:var(--k-sp-4) var(--k-sp-3);flex:1}[data-sidebar-label]{font-size:.7rem;font-weight:var(--k-fw-bold);text-transform:uppercase;letter-spacing:.08em;color:var(--k-text-3);padding:var(--k-sp-2) var(--k-sp-3);margin-bottom:var(--k-sp-1)}[data-sidebar-item]{display:flex;align-items:center;gap:var(--k-sp-3);padding:var(--k-sp-2) var(--k-sp-3);border-radius:var(--k-r);font-size:.875rem;color:var(--k-text-2);text-decoration:none;transition:all var(--k-fast);cursor:pointer;user-select:none}[data-sidebar-item]:hover{background:var(--k-surface-2);color:var(--k-text)}[data-sidebar-item][data-active]{background:var(--k-accent-subtle);color:var(--k-accent);font-weight:var(--k-fw-medium)}[data-content]{flex:1;min-width:0;overflow-x:hidden}kern-drawer{display:none}kern-drawer[open]{display:block}[data-drawer-backdrop]{position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:calc(var(--k-z-modal) - 1);animation:k-fade-in var(--k-dur) var(--k-ease-out)}[data-drawer-panel]{position:fixed;top:0;right:0;height:100vh;width:380px;max-width:90vw;background:var(--k-bg);border-left:1px solid var(--k-border);box-shadow:var(--k-sh-xl);z-index:var(--k-z-modal);display:flex;flex-direction:column;animation:k-drawer-in var(--k-slow) var(--k-ease);overflow:hidden}[data-drawer-panel][data-side="left"]{right:auto;left:0;border-left:none;border-right:1px solid var(--k-border);animation-name:k-drawer-in-left}kern-drawer[data-size="sm"] [data-drawer-panel]{width:280px}kern-drawer[data-size="lg"] [data-drawer-panel]{width:520px}[data-drawer-header]{display:flex;align-items:center;justify-content:space-between;padding:var(--k-sp-5) var(--k-sp-6);border-bottom:1px solid var(--k-border);flex-shrink:0}[data-drawer-title]{font-weight:var(--k-fw-bold);font-size:1rem}[data-drawer-body]{flex:1;overflow-y:auto;padding:var(--k-sp-6)}[data-drawer-footer]{padding:var(--k-sp-4) var(--k-sp-6);border-top:1px solid var(--k-border);background:var(--k-surface);display:flex;gap:var(--k-sp-3);flex-shrink:0}[data-grid]{display:grid;gap:var(--k-sp-4);grid-template-columns:repeat(var(--k-cols,1),minmax(0,1fr))}[data-grid="2"]{--k-cols:2}[data-grid="3"]{--k-cols:3}[data-grid="4"]{--k-cols:4}[data-grid="5"]{--k-cols:5}[data-grid="auto"]{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}[data-grid][data-gap="xs"]{gap:var(--k-sp-1)}[data-grid][data-gap="sm"]{gap:var(--k-sp-2)}[data-grid][data-gap="md"]{gap:var(--k-sp-4)}[data-grid][data-gap="lg"]{gap:var(--k-sp-8)}[data-grid][data-gap="xl"]{gap:var(--k-sp-12)}@media(min-width:640px){[data-grid][data-sm="2"]{--k-cols:2}[data-grid][data-sm="3"]{--k-cols:3}}@media(min-width:1024px){[data-grid][data-lg="3"]{--k-cols:3}[data-grid][data-lg="4"]{--k-cols:4}}@media(max-width:639px){[data-grid="2"],[data-grid="3"],[data-grid="4"]{--k-cols:1}}[data-stack]{display:flex;flex-direction:column;gap:var(--k-sp-4)}[data-stack][data-gap="xs"]{gap:var(--k-sp-1)}[data-stack][data-gap="sm"]{gap:var(--k-sp-2)}[data-stack][data-gap="lg"]{gap:var(--k-sp-8)}[data-stack][data-gap="xl"]{gap:var(--k-sp-12)}[data-row]{display:flex;align-items:center;gap:var(--k-sp-4);flex-wrap:wrap}[data-row][data-gap="xs"]{gap:var(--k-sp-1)}[data-row][data-gap="sm"]{gap:var(--k-sp-2)}[data-row][data-gap="lg"]{gap:var(--k-sp-8)}[data-row][data-align="start"]{align-items:flex-start}[data-row][data-align="end"]{align-items:flex-end}[data-row][data-align="stretch"]{align-items:stretch}[data-row][data-justify="between"]{justify-content:space-between}[data-row][data-justify="end"]{justify-content:flex-end}[data-row][data-justify="center"]{justify-content:center}[data-row][data-nowrap]{flex-wrap:nowrap}[data-divider]{display:flex;align-items:center;gap:var(--k-sp-4);color:var(--k-text-3);font-size:.8rem;margin:var(--k-sp-6) 0}[data-divider]::before,[data-divider]::after{content:'';flex:1;height:1px;background:var(--k-border)}[data-divider][data-vertical]{flex-direction:column;height:100%;margin:0 var(--k-sp-4);width:auto}[data-divider][data-vertical]::before,[data-divider][data-vertical]::after{width:1px;height:auto;flex:1}[data-sr-only]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}[data-truncate]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[data-surface]{background:var(--k-surface)}[data-surface="2"]{background:var(--k-surface-2)}[data-rounded]{border-radius:var(--k-r)}[data-rounded="full"]{border-radius:var(--k-r-full)}[data-container]{width:100%;max-width:1200px;margin:0 auto;padding:0 var(--k-sp-6)}[data-container="sm"]{max-width:720px}[data-container="lg"]{max-width:1440px}[data-scroll]{overflow:auto}[data-scroll="x"]{overflow-y:hidden;overflow-x:auto}[data-scroll="y"]{overflow-x:hidden;overflow-y:auto}@keyframes k-spin{to{transform:rotate(360deg)}}@keyframes k-fade-in{from{opacity:0}to{opacity:1}}@keyframes k-dialog-in{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}@keyframes k-toast-in{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}@keyframes k-toast-out{from{opacity:1;transform:translateX(0);max-height:100px}to{opacity:0;transform:translateX(16px);max-height:0;padding:0;margin:0}}@keyframes k-drawer-in{from{transform:translateX(100%)}to{transform:none}}@keyframes k-drawer-in-left{from{transform:translateX(-100%)}to{transform:none}}@keyframes k-skeleton{0%{background-position:200% 0}100%{background-position:-200% 0}}@keyframes k-progress-stripe{from{background-position:0 0}to{background-position:28px 0}}@keyframes k-progress-indeterminate{0%{transform:translateX(-100%)}100%{transform:translateX(350%)}}@media(max-width:768px){[data-sidebar]{display:none}[data-sidebar][data-mobile-open]{display:flex;position:fixed;inset:0;z-index:var(--k-z-modal);width:280px}dialog{width:calc(100vw - 1rem)}[data-drawer-panel]{width:100%;max-width:100%}h1{font-size:1.875rem}h2{font-size:1.5rem}}

package/dist/kern.min.js

@@ -0,0 +1,17 @@
+(function(window){"use strict"; function emit(el, name, detail = {}) { return el.dispatchEvent( new CustomEvent(name, { bubbles: true, cancelable: true, detail }) );
+} function esc(str) { return String(str) .replace(/&/g, '&amp;') .replace(/</g, '&lt;') .replace(/>/g, '&gt;') .replace(/"/g, '&quot;');
+} function firstFocusable(el) { return el?.querySelector( 'button:not([disabled]),a[href],[tabindex]:not([tabindex="-1"]),input:not([disabled]),select:not([disabled]),textarea:not([disabled])' ) ?? null;
+} const $ = (sel, ctx = document) => ctx.querySelector(sel); const $$ = (sel, ctx = document) => [...ctx.querySelectorAll(sel)]; function initAccordions(root = document) { root.querySelectorAll('[data-accordion-trigger]').forEach(trigger => { if (trigger._kernInit) return; trigger._kernInit = true; trigger.setAttribute('aria-expanded', 'false'); trigger.setAttribute('type', 'button'); const content = trigger .closest('[data-accordion-item]') ?.querySelector('[data-accordion-content]'); if (!content) return; trigger.addEventListener('click', () => { const isOpen = trigger.getAttribute('aria-expanded') === 'true'; const accordion = trigger.closest('[data-accordion]'); if (accordion && !accordion.hasAttribute('data-multi')) { accordion.querySelectorAll('[data-accordion-trigger]').forEach(other => { if (other === trigger) return; other.setAttribute('aria-expanded', 'false'); other .closest('[data-accordion-item]') ?.querySelector('[data-accordion-content]') ?.removeAttribute('data-open'); }); } trigger.setAttribute('aria-expanded', isOpen ? 'false' : 'true'); isOpen ? content.removeAttribute('data-open') : content.setAttribute('data-open', ''); }); });
+} function initToggles(root = document) { root.querySelectorAll('[data-toggle]').forEach(el => { if (el._kernInit) return; el._kernInit = true; el.addEventListener('click', () => { const targetId = el.getAttribute('data-toggle'); const target = document.getElementById(targetId); if (!target) return; const wc = target.closest('kern-dialog, kern-drawer') || target; if (typeof wc.toggle === 'function') wc.toggle(); else if (typeof wc.open === 'function') wc.open(); }); });
+} function initTableSort(root = document) { root.querySelectorAll('th[data-sort]').forEach(th => { if (th._kernInit) return; th._kernInit = true; th.style.cursor = 'pointer'; th.setAttribute('role', 'columnheader'); th.setAttribute('aria-sort', 'none'); th.addEventListener('click', () => { const table = th.closest('table'); const tbody = table?.querySelector('tbody'); if (!tbody) return; const colIndex = [...th.parentElement.children].indexOf(th); const current = th.getAttribute('data-sort'); const asc = current !== 'asc'; table.querySelectorAll('th[data-sort]').forEach(h => { h.setAttribute('data-sort', ''); h.setAttribute('aria-sort', 'none'); }); th.setAttribute('data-sort', asc ? 'asc' : 'desc'); th.setAttribute('aria-sort', asc ? 'ascending' : 'descending'); const rows = [...tbody.querySelectorAll('tr')]; rows.sort((a, b) => { const av = a.cells[colIndex]?.textContent.trim() ?? ''; const bv = b.cells[colIndex]?.textContent.trim() ?? ''; const an = parseFloat(av.replace(/[^0-9.-]/g, '')); const bn = parseFloat(bv.replace(/[^0-9.-]/g, '')); if (!isNaN(an) && !isNaN(bn)) return asc ? an - bn : bn - an; return asc ? av.localeCompare(bv) : bv.localeCompare(av); }); rows.forEach(row => tbody.appendChild(row)); }); });
+} class KernTabs extends HTMLElement { connectedCallback() { this._init(); } _init() { const tabs = [...this.querySelectorAll('[data-tab]')]; const panels = [...this.querySelectorAll('[data-tab-panel]')]; const initialActive = Math.max(0, tabs.findIndex(t => t.hasAttribute('data-active'))); tabs.forEach((tab, i) => { tab.setAttribute('role', 'tab'); tab.setAttribute('tabindex', i === initialActive ? '0' : '-1'); tab.setAttribute('aria-selected', i === initialActive ? 'true' : 'false'); if (panels[i]) { const panelId = panels[i].id || `k-panel-${Math.random().toString(36).slice(2)}`; panels[i].id = panelId; tab.setAttribute('aria-controls', panelId); panels[i].setAttribute('role', 'tabpanel'); panels[i].setAttribute('aria-labelledby', tab.id || `k-tab-${i}`); } tab.addEventListener('click', () => this.goto(i)); tab.addEventListener('keydown', (e) => { const count = tabs.length; if (e.key === 'ArrowRight') { e.preventDefault(); this.goto((i + 1) % count); } if (e.key === 'ArrowLeft') { e.preventDefault(); this.goto((i - 1 + count) % count); } if (e.key === 'Home') { e.preventDefault(); this.goto(0); } if (e.key === 'End') { e.preventDefault(); this.goto(count - 1); } }); }); this._activate(initialActive, false); } goto(index) { this._activate(index, true); } setActive(index) { this._activate(index, false); } _activate(index, focus = false) { const tabs = [...this.querySelectorAll('[data-tab]')]; const panels = [...this.querySelectorAll('[data-tab-panel]')]; tabs.forEach((tab, i) => { const active = i === index; tab.setAttribute('aria-selected', active ? 'true' : 'false'); tab.setAttribute('tabindex', active ? '0' : '-1'); }); panels.forEach((panel, i) => { i === index ? panel.setAttribute('data-active', '') : panel.removeAttribute('data-active'); }); if (focus && tabs[index]) tabs[index].focus(); emit(this, 'kern:tab-change', { index }); }
+} customElements.define('kern-tabs', KernTabs); class KernDropdown extends HTMLElement { connectedCallback() { this._trigger = this.querySelector('[data-dropdown-trigger]') || this.firstElementChild; this._content = this.querySelector('[data-dropdown-content]'); this._onOutside = (e) => { if (!this.contains(e.target)) this.close(); }; if (!this._trigger) return; this._trigger.setAttribute('aria-haspopup', 'true'); this._trigger.setAttribute('aria-expanded', 'false'); this._trigger.addEventListener('click', (e) => { e.stopPropagation(); this.hasAttribute('open') ? this.close() : this.open(); }); this._trigger.addEventListener('keydown', (e) => { if (e.key === 'ArrowDown') { e.preventDefault(); this.open(); this._focusFirst(); } if (e.key === 'Escape') this.close(); }); if (this._content) { const items = () => [...this._content.querySelectorAll('[data-dropdown-item]:not([disabled])')]; this._content.addEventListener('keydown', (e) => { const list = items(); const idx = list.indexOf(document.activeElement); if (e.key === 'ArrowDown') { e.preventDefault(); list[idx + 1]?.focus() ?? list[0]?.focus(); } if (e.key === 'ArrowUp') { e.preventDefault(); idx > 0 ? list[idx - 1]?.focus() : this._trigger.focus(); } if (e.key === 'Escape') { this.close(); this._trigger.focus(); } if (e.key === 'Tab') this.close(); }); items().forEach(item => { item.setAttribute('role', 'menuitem'); item.setAttribute('tabindex', '-1'); }); } } disconnectedCallback() { document.removeEventListener('click', this._onOutside); } open() { this.setAttribute('open', ''); this._trigger?.setAttribute('aria-expanded', 'true'); document.addEventListener('click', this._onOutside); emit(this, 'kern:dropdown-open'); } close() { this.removeAttribute('open'); this._trigger?.setAttribute('aria-expanded', 'false'); document.removeEventListener('click', this._onOutside); emit(this, 'kern:dropdown-close'); } toggle() { this.hasAttribute('open') ? this.close() : this.open(); } _focusFirst() { const first = this._content?.querySelector('[data-dropdown-item]:not([disabled])'); setTimeout(() => first?.focus(), 10); }
+} customElements.define('kern-dropdown', KernDropdown); class KernDialog extends HTMLElement { connectedCallback() { this._dialog = this.querySelector('dialog'); if (!this._dialog) return; this._setup(); } _setup() { const d = this._dialog; this.querySelectorAll('[data-dialog-close]').forEach(btn => { btn.addEventListener('click', () => this.close()); }); d.addEventListener('click', (e) => { if (e.target === d && !d.hasAttribute('data-no-backdrop-close')) this.close(); }); d.addEventListener('cancel', (e) => { e.preventDefault(); this.close(); }); } open() { if (!this._dialog) return; this._dialog.showModal(); const f = firstFocusable(this._dialog); if (f) setTimeout(() => f.focus(), 40); emit(this, 'kern:dialog-open'); } close() { if (!this._dialog || !this._dialog.open) return; this._dialog.close(); emit(this, 'kern:dialog-close'); } toggle() { this._dialog?.open ? this.close() : this.open(); }
+} customElements.define('kern-dialog', KernDialog); class KernDrawer extends HTMLElement { connectedCallback() { this._panel = this.querySelector('[data-drawer-panel]'); this._backdrop = this.querySelector('[data-drawer-backdrop]'); this._onKey = (e) => { if (e.key === 'Escape') this.close(); }; this.querySelectorAll('[data-drawer-close]').forEach(btn => { btn.addEventListener('click', () => this.close()); }); this._backdrop?.addEventListener('click', () => this.close()); } open() { this.setAttribute('open', ''); document.body.style.overflow = 'hidden'; document.addEventListener('keydown', this._onKey); const f = firstFocusable(this._panel); if (f) setTimeout(() => f.focus(), 60); emit(this, 'kern:drawer-open'); } close() { this.removeAttribute('open'); document.body.style.overflow = ''; document.removeEventListener('keydown', this._onKey); emit(this, 'kern:drawer-close'); } toggle() { this.hasAttribute('open') ? this.close() : this.open(); }
+} customElements.define('kern-drawer', KernDrawer); class KernToaster extends HTMLElement { connectedCallback() { if (!this.hasAttribute('data-position')) { this.setAttribute('data-position', 'bottom-right'); } this.setAttribute('aria-live', 'polite'); this.setAttribute('aria-atomic', 'false'); } add(options = {}) { if (typeof options === 'string') options = { message: options }; const { title = '', message = '', color = '', duration = 4000, dismissible = true, } = options; const toast = document.createElement('div'); toast.setAttribute('data-toast', ''); toast.setAttribute('role', 'status'); if (color) toast.setAttribute('data-color', color); toast.innerHTML = ` <div data-toast-body> ${title ? `<div data-toast-title>${esc(title)}</div>` : ''} ${message ? `<div data-toast-message>${esc(message)}</div>` : ''} </div> ${dismissible ? `<button data-toast-close aria-label="Dismiss">✕</button>` : ''} `.trim(); toast.querySelector('[data-toast-close]')?.addEventListener('click', () => this._remove(toast)); this.appendChild(toast); emit(this, 'kern:toast-add', { toast, color, title, message }); if (duration > 0) setTimeout(() => this._remove(toast), duration); return toast; } _remove(toast) { if (!toast.isConnected) return; toast.setAttribute('data-removing', ''); toast.addEventListener('animationend', () => { toast.remove(); emit(this, 'kern:toast-remove', { toast }); }, { once: true }); } clear() { [...this.querySelectorAll('[data-toast]')].forEach(t => this._remove(t)); }
+} customElements.define('kern-toaster', KernToaster); const Kern = { version: '1.0.0', toast(options = {}) { if (typeof options === 'string') options = { message: options }; const position = options.position ?? 'bottom-right'; let toaster = document.querySelector(`kern-toaster[data-position="${position}"]`) ?? document.querySelector('kern-toaster'); if (!toaster) { toaster = document.createElement('kern-toaster'); toaster.setAttribute('data-position', position); document.body.appendChild(toaster); } return toaster.add(options); }, dialog(selector) { const el = typeof selector === 'string' ? (document.getElementById(selector) ?? document.querySelector(selector)) : selector; const wc = el?.closest?.('kern-dialog') ?? el; if (typeof wc?.open === 'function') wc.open(); else if (el instanceof HTMLDialogElement) el.showModal(); return wc; }, drawer(selector) { const el = typeof selector === 'string' ? (document.getElementById(selector) ?? document.querySelector(selector)) : selector; const wc = el?.closest?.('kern-drawer') ?? el; if (typeof wc?.open === 'function') wc.open(); return wc; }, setAccent(name) { document.documentElement.setAttribute('data-accent', name); }, setTheme(theme) { document.documentElement.setAttribute('data-theme', theme); try { localStorage.setItem('kern-theme', theme); } catch (_) {} }, setRadius(name) { if (name === 'default') document.documentElement.removeAttribute('data-radius'); else document.documentElement.setAttribute('data-radius', name); }, init(root = document) { initAccordions(root); initToggles(root); initTableSort(root); },
+}; function boot() { try { const saved = localStorage.getItem('kern-theme'); if (saved) document.documentElement.setAttribute('data-theme', saved); } catch (_) {} Kern.init(); new MutationObserver((mutations) => { mutations.forEach(mutation => { mutation.addedNodes.forEach(node => { if (node.nodeType === Node.ELEMENT_NODE) { Kern.init(node); } }); }); }).observe(document.body, { childList: true, subtree: true });
+} if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', boot);
+} else { boot();
+} if(typeof window!=="undefined")window.Kern=Kern;
+})(window);