@jungherz-de/notionkit-elements 1.0.0

package/dist/components/nk-settings-user.js

@@ -0,0 +1,36 @@
+import { N as NkElement } from './shared/base-6gEcoatG.js';
+
+// <nk-settings-user slot="user" name="Marcel Karas" mail="marcel@…" avatar="MK"></nk-settings-user>
+// → <div class="nk-settings-user"><div class="avatar">MK</div><div class="u-text"><div class="name">…</div><div class="mail">…</div></div></div>
+class NkSettingsUser extends NkElement {
+  static get observedAttributes() { return ['name', 'mail', 'avatar']; }
+
+  render() {
+    const box = this.createElement('div', ['nk-settings-user']);
+    this._avatar = this.createElement('div', ['avatar']);
+    const s = this.createElement('slot', [], { name: 'avatar' });
+    s.appendChild(this._avatar);
+    const text = this.createElement('div', ['u-text']);
+    this._name = this.createElement('div', ['name']);
+    this._mail = this.createElement('div', ['mail']);
+    text.append(this._name, this._mail);
+    box.append(s, text);
+    this._wrapper.appendChild(box);
+    this._sync();
+  }
+
+  _sync() {
+    const name = this.getAttribute('name') || '';
+    this._name.textContent = name;
+    const mail = this.getAttribute('mail');
+    this._mail.textContent = mail || '';
+    this._mail.style.display = mail ? '' : 'none';
+    this._avatar.textContent = this.getAttribute('avatar') || name.split(/\s+/).map(w => w[0]).join('').slice(0, 2).toUpperCase();
+  }
+
+  onAttributeChanged() { this._sync(); }
+}
+
+customElements.define('nk-settings-user', NkSettingsUser);
+
+export { NkSettingsUser };

package/dist/components/nk-sidebar.js

@@ -0,0 +1,81 @@
+import { N as NkElement } from './shared/base-6gEcoatG.js';
+
+// <nk-sidebar slot="sidebar">
+//   <nk-workspace-switcher slot="workspace" name="Acme"></nk-workspace-switcher>
+//   <nk-tree>…</nk-tree>
+//   <nk-tree-item slot="footer" icon="⚙️">Settings</nk-tree-item>
+// </nk-sidebar>
+// → <aside class="nk-sidebar"><div class="nk-workspace">…</div>
+//     <div class="nk-sidebar-scroll">…</div><div class="nk-sidebar-footer">…</div></aside>
+//
+// The host is display:contents so the <aside> is a direct flex child of
+// .nk-app, exactly like the class markup. Below 860px notionkit.css hides the
+// aside; `open` brings it back as an off-canvas drawer (position only – the
+// look is still the stylesheet's).
+const drawerSheet = new CSSStyleSheet();
+drawerSheet.replaceSync(`
+  @media (max-width: 860px) {
+    :host([open]) .nk-sidebar { display: flex; position: fixed; inset: 0 auto 0 0; z-index: 60; }
+    :host([open]) .nk-sidebar-backdrop { display: block; }
+  }
+  .nk-sidebar-backdrop { display: none; position: fixed; inset: 0; z-index: 59; background: var(--nk-scrim-soft); }
+`);
+
+class NkSidebar extends NkElement {
+  static get hostStyles() { return drawerSheet; }
+  static get observedAttributes() { return ['open']; }
+
+  render() {
+    this._backdrop = this.createElement('div', ['nk-sidebar-backdrop']);
+    this._aside = this.createElement('aside', ['nk-sidebar']);
+    this._aside.appendChild(this.createElement('slot', [], { name: 'workspace' }));
+    const scroll = this.createElement('div', ['nk-sidebar-scroll']);
+    scroll.appendChild(document.createElement('slot'));
+    this._aside.appendChild(scroll);
+    this._footer = this.createElement('div', ['nk-sidebar-footer']);
+    this._footerSlot = this.createElement('slot', [], { name: 'footer' });
+    this._footer.appendChild(this._footerSlot);
+    this._aside.appendChild(this._footer);
+    this._wrapper.appendChild(this._backdrop);
+    this._wrapper.appendChild(this._aside);
+    this._syncFooter();
+  }
+
+  _syncFooter() {
+    const nodes = this._footerSlot.assignedElements();
+    // The footer box carries padding and a border; only render it when used.
+    this._footer.style.display = nodes.length ? '' : 'none';
+    // Footer rows are 26px in the class version (.nk-sidebar-footer .nk-tree-item).
+    for (const el of nodes) if (el.localName === 'nk-tree-item') el.setAttribute('compact', '');
+  }
+
+  setupEvents() {
+    this._onSlot = () => this._syncFooter();
+    this._onBackdrop = () => this.close();
+    this._onKey = (e) => { if (e.key === 'Escape' && this.getBoolAttr('open')) this.close(); };
+    this._footerSlot.addEventListener('slotchange', this._onSlot);
+    this._backdrop.addEventListener('click', this._onBackdrop);
+    document.addEventListener('keydown', this._onKey);
+  }
+
+  teardownEvents() {
+    this._footerSlot?.removeEventListener('slotchange', this._onSlot);
+    this._backdrop?.removeEventListener('click', this._onBackdrop);
+    document.removeEventListener('keydown', this._onKey);
+  }
+
+  onAttributeChanged(name) {
+    if (name === 'open') this.emit('nk-toggle', { open: this.getBoolAttr('open') });
+  }
+
+  show() { this.setBoolAttr('open', true); }
+  close() { this.setBoolAttr('open', false); }
+  toggle() { this.setBoolAttr('open', !this.getBoolAttr('open')); }
+
+  get open() { return this.getBoolAttr('open'); }
+  set open(v) { this.setBoolAttr('open', v); }
+}
+
+customElements.define('nk-sidebar', NkSidebar);
+
+export { NkSidebar };

package/dist/components/nk-skeleton.js

@@ -0,0 +1,31 @@
+import { N as NkElement } from './shared/base-6gEcoatG.js';
+
+// <nk-skeleton height="18" width="60%"></nk-skeleton>
+// <nk-skeleton lines="3" widths="100%,85%,40%"></nk-skeleton>
+// → <div class="nk-skeleton" style="height:…;width:…"></div> × lines
+class NkSkeleton extends NkElement {
+  static get observedAttributes() { return ['lines', 'height', 'width', 'widths']; }
+
+  render() { this._build(); }
+
+  _build() {
+    this._wrapper.replaceChildren();
+    const lines = Math.max(1, Number(this.getAttribute('lines')) || 1);
+    const height = this.getAttribute('height') || '13';
+    const widths = (this.getAttribute('widths') || '').split(',').map(s => s.trim()).filter(Boolean);
+    const width = this.getAttribute('width');
+    for (let i = 0; i < lines; i++) {
+      const line = this.createElement('div', ['nk-skeleton'], { 'aria-hidden': 'true' });
+      line.style.height = /^\d+(\.\d+)?$/.test(height) ? `${height}px` : height;
+      const w = widths[i] ?? width;
+      if (w) line.style.width = w;
+      this._wrapper.appendChild(line);
+    }
+  }
+
+  onAttributeChanged() { this._build(); }
+}
+
+customElements.define('nk-skeleton', NkSkeleton);
+
+export { NkSkeleton };

package/dist/components/nk-slider.js

@@ -0,0 +1,85 @@
+import { a as NkFormElement } from './shared/base-6gEcoatG.js';
+
+// <nk-slider name="size" min="12" max="18" value="14" show-value></nk-slider>
+// → <input type="range" class="nk-slider"> <div class="nk-slider-value">14</div>
+const FORWARDED = ['name', 'min', 'max', 'step', 'aria-label'];
+
+class NkSlider extends NkFormElement {
+  static get observedAttributes() { return ['value', 'disabled', 'show-value', 'unit', ...FORWARDED]; }
+
+  render() {
+    this._input = this.createElement('input', ['nk-slider'], { type: 'range' });
+    this._out = this.createElement('div', ['nk-slider-value']);
+    this._apply();
+    this._input.value = this.getAttribute('value') ?? this._input.value;
+    this._defaultValue = this._input.value;
+    this._wrapper.appendChild(this._input);
+    this._wrapper.appendChild(this._out);
+    this._syncOut();
+    this._syncFormValue();
+  }
+
+  _apply() {
+    for (const attr of FORWARDED) {
+      const v = this.getAttribute(attr);
+      v === null ? this._input.removeAttribute(attr) : this._input.setAttribute(attr, v);
+    }
+    this._input.disabled = this.getBoolAttr('disabled') || !!this._formDisabled;
+    this._out.style.display = this.getBoolAttr('show-value') ? '' : 'none';
+  }
+
+  _syncOut() {
+    this._out.textContent = `${this._input.value}${this.getAttribute('unit') || ''}`;
+  }
+
+  setupEvents() {
+    this._onInput = () => {
+      this._syncOut();
+      this._syncFormValue();
+      this.emit('nk-input', { value: Number(this._input.value), name: this.name });
+    };
+    this._onChange = () => {
+      this._syncFormValue();
+      this.emit('nk-change', { value: Number(this._input.value), name: this.name });
+      this.dispatchEvent(new Event('change', { bubbles: true }));
+    };
+    this._input.addEventListener('input', this._onInput);
+    this._input.addEventListener('change', this._onChange);
+  }
+
+  teardownEvents() {
+    this._input?.removeEventListener('input', this._onInput);
+    this._input?.removeEventListener('change', this._onChange);
+  }
+
+  onAttributeChanged(name) {
+    if (!this._input) return;
+    if (name === 'value') this._input.value = this.getAttribute('value') ?? '';
+    else this._apply();
+    this._syncOut();
+    this._syncFormValue();
+  }
+
+  _syncFormValue() { this.setFormValue(this._input.value); }
+  resetValue() { this._input.value = this._defaultValue; this._syncOut(); this._syncFormValue(); }
+  restoreValue(state) { if (typeof state === 'string') { this._input.value = state; this._syncOut(); this._syncFormValue(); } }
+  onFormDisabled(disabled) { this._formDisabled = disabled; this._apply(); }
+
+  focus(options) { this._input?.focus(options); }
+
+  get value() { return Number(this._input?.value ?? this.getAttribute('value')); }
+  set value(v) {
+    if (this._input) { this._input.value = v; this._syncOut(); this._syncFormValue(); }
+    else this.setAttribute('value', v);
+  }
+  get name() { return this.getAttribute('name'); }
+  set name(v) { this.setAttribute('name', v); }
+  get disabled() { return this.getBoolAttr('disabled'); }
+  set disabled(v) { this.setBoolAttr('disabled', v); }
+  get showValue() { return this.getBoolAttr('show-value'); }
+  set showValue(v) { this.setBoolAttr('show-value', v); }
+}
+
+customElements.define('nk-slider', NkSlider);
+
+export { NkSlider };

package/dist/components/nk-stat.js

@@ -0,0 +1,40 @@
+import { N as NkElement } from './shared/base-6gEcoatG.js';
+
+// <nk-stat label="Active pages" value="128" delta="▲ 12 this week" trend="up"></nk-stat>
+// → <div class="nk-stat"><div class="s-label">…</div><div class="s-value">…</div><div class="s-delta up">…</div></div>
+class NkStat extends NkElement {
+  static get observedAttributes() { return ['label', 'value', 'delta', 'trend']; }
+
+  render() {
+    const box = this.createElement('div', ['nk-stat']);
+    this._parts = {};
+    for (const [slot, cls] of [['label', 's-label'], ['value', 's-value'], ['delta', 's-delta']]) {
+      const el = this.createElement('div', [cls]);
+      const s = this.createElement('slot', [], { name: slot });
+      s.appendChild(el);
+      box.appendChild(s);
+      this._parts[slot] = el;
+    }
+    this._wrapper.appendChild(box);
+    this._sync();
+  }
+
+  _sync() {
+    for (const [slot, el] of Object.entries(this._parts)) {
+      const v = this.getAttribute(slot);
+      el.textContent = v ?? '';
+      el.style.display = v === null ? 'none' : '';
+    }
+    const trend = this.getAttribute('trend');
+    this._parts.delta.className = 's-delta' + (trend === 'up' || trend === 'down' ? ` ${trend}` : '');
+  }
+
+  onAttributeChanged() { this._sync(); }
+
+  get value() { return this.getAttribute('value'); }
+  set value(v) { this.setAttribute('value', v); }
+}
+
+customElements.define('nk-stat', NkStat);
+
+export { NkStat };

package/dist/components/nk-stats.js

@@ -0,0 +1,14 @@
+import { N as NkElement } from './shared/base-6gEcoatG.js';
+
+// <nk-stats><nk-stat …></nk-stat>…</nk-stats>  →  <div class="nk-stats">
+class NkStats extends NkElement {
+  render() {
+    const row = this.createElement('div', ['nk-stats']);
+    row.appendChild(document.createElement('slot'));
+    this._wrapper.appendChild(row);
+  }
+}
+
+customElements.define('nk-stats', NkStats);
+
+export { NkStats };

package/dist/components/nk-switch.js

@@ -0,0 +1,69 @@
+import { a as NkFormElement } from './shared/base-6gEcoatG.js';
+
+// <nk-switch name="notify" checked></nk-switch>
+// → <button class="nk-switch" role="switch" aria-checked="true">
+// notionkit.css styles the state through [aria-checked]; the toggling is here.
+class NkSwitch extends NkFormElement {
+  static get observedAttributes() { return ['checked', 'disabled', 'name', 'value', 'label']; }
+
+  render() {
+    this._btn = this.createElement('button', ['nk-switch'], { type: 'button', role: 'switch' });
+    this._defaultChecked = this.getBoolAttr('checked');
+    this._apply();
+    this._wrapper.appendChild(this._btn);
+    this._syncFormValue();
+  }
+
+  _apply() {
+    this._btn.setAttribute('aria-checked', this.getBoolAttr('checked') ? 'true' : 'false');
+    this._btn.disabled = this.getBoolAttr('disabled') || !!this._formDisabled;
+    const label = this.getAttribute('label');
+    label ? this._btn.setAttribute('aria-label', label) : this._btn.removeAttribute('aria-label');
+  }
+
+  setupEvents() {
+    this._onClick = () => this.toggle();
+    this._btn.addEventListener('click', this._onClick);
+  }
+
+  teardownEvents() {
+    this._btn?.removeEventListener('click', this._onClick);
+  }
+
+  toggle() {
+    if (this.getBoolAttr('disabled') || this._formDisabled) return;
+    this.checked = !this.checked;
+    this.emit('nk-change', { checked: this.checked, value: this.getAttribute('value') || 'on', name: this.name });
+    this.dispatchEvent(new Event('change', { bubbles: true }));
+  }
+
+  onAttributeChanged() {
+    if (!this._btn) return;
+    this._apply();
+    this._syncFormValue();
+  }
+
+  _syncFormValue() {
+    const val = this.getAttribute('value') || 'on';
+    this.setFormValue(this.getBoolAttr('checked') ? val : null, this.getBoolAttr('checked') ? 'checked' : 'unchecked');
+  }
+
+  resetValue() { this.setBoolAttr('checked', this._defaultChecked); }
+  restoreValue(state) { if (state === 'checked' || state === 'unchecked') this.setBoolAttr('checked', state === 'checked'); }
+  onFormDisabled(disabled) { this._formDisabled = disabled; this._apply(); }
+
+  focus(options) { this._btn?.focus(options); }
+
+  get checked() { return this.getBoolAttr('checked'); }
+  set checked(v) { this.setBoolAttr('checked', v); }
+  get disabled() { return this.getBoolAttr('disabled'); }
+  set disabled(v) { this.setBoolAttr('disabled', v); }
+  get name() { return this.getAttribute('name'); }
+  set name(v) { this.setAttribute('name', v); }
+  get value() { return this.getAttribute('value') || 'on'; }
+  set value(v) { this.setAttribute('value', v); }
+}
+
+customElements.define('nk-switch', NkSwitch);
+
+export { NkSwitch };

package/dist/components/nk-synced.js

@@ -0,0 +1,26 @@
+import { N as NkElement } from './shared/base-6gEcoatG.js';
+
+// <nk-synced badge="⟳ 3 places">…</nk-synced>
+// → <div class="nk-synced"><span class="synced-badge">⟳ 3 places</span>…</div>
+class NkSynced extends NkElement {
+  static get observedAttributes() { return ['badge']; }
+
+  render() {
+    const box = this.createElement('div', ['nk-synced']);
+    this._badge = this.createElement('span', ['synced-badge']);
+    box.appendChild(this._badge);
+    box.appendChild(document.createElement('slot'));
+    this._wrapper.appendChild(box);
+    this._sync();
+  }
+
+  _sync() { this._badge.textContent = this.getAttribute('badge') ?? '⟳ synced'; }
+  onAttributeChanged() { this._sync(); }
+
+  get badge() { return this.getAttribute('badge'); }
+  set badge(v) { this.setAttribute('badge', v); }
+}
+
+customElements.define('nk-synced', NkSynced);
+
+export { NkSynced };

package/dist/components/nk-tab.js

@@ -0,0 +1,54 @@
+import { N as NkElement } from './shared/base-6gEcoatG.js';
+
+// <nk-tab value="notes" active>📝 Notes</nk-tab>  →  <span class="nk-tab active" role="tab">
+class NkTab extends NkElement {
+  static get observedAttributes() { return ['active', 'value', 'disabled']; }
+
+  render() {
+    this._tab = this.createElement('span', ['nk-tab'], { role: 'tab' });
+    this._tab.appendChild(document.createElement('slot'));
+    this._wrapper.appendChild(this._tab);
+    this._sync();
+  }
+
+  _sync() {
+    const active = this.getBoolAttr('active');
+    this._tab.classList.toggle('active', active);
+    this._tab.setAttribute('aria-selected', active ? 'true' : 'false');
+    this._tab.tabIndex = active ? 0 : -1;
+    this._tab.setAttribute('aria-disabled', this.getBoolAttr('disabled') ? 'true' : 'false');
+  }
+
+  setupEvents() {
+    this._onClick = () => this.select();
+    this._onKey = (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); this.select(); } };
+    this._tab.addEventListener('click', this._onClick);
+    this._tab.addEventListener('keydown', this._onKey);
+  }
+
+  teardownEvents() {
+    this._tab?.removeEventListener('click', this._onClick);
+    this._tab?.removeEventListener('keydown', this._onKey);
+  }
+
+  select() {
+    if (this.getBoolAttr('disabled')) return;
+    const ok = this.emit('nk-select', { value: this.value, label: this.textContent.trim(), item: this });
+    if (!ok) return;
+    const tabs = this.closest('nk-tabs');
+    if (tabs) tabs.value = this.value;
+    else this.setBoolAttr('active', true);
+  }
+
+  onAttributeChanged() { this._sync(); }
+  focus(o) { this._tab?.focus(o); }
+
+  get value() { return this.getAttribute('value') ?? this.textContent.trim(); }
+  set value(v) { this.setAttribute('value', v); }
+  get active() { return this.getBoolAttr('active'); }
+  set active(v) { this.setBoolAttr('active', v); }
+}
+
+customElements.define('nk-tab', NkTab);
+
+export { NkTab };

package/dist/components/nk-table-view.js

@@ -0,0 +1,109 @@
+import { N as NkElement } from './shared/base-6gEcoatG.js';
+import { c as compareBy, r as renderPropertyCell } from './shared/property-cell-Dn91uFkf.js';
+
+// <nk-table-view name="table" label="▦ Table" count new-row sortable></nk-table-view>
+// Standalone: view.columns = […]; view.rows = […];  Inside <nk-database> the
+// database pushes `data`. → <div class="nk-table-wrap"><table class="nk-table">…</table><div class="nk-new-row">＋ New page</div></div>
+// Cells are plain markup from renderPropertyCell(); rows fire nk-select,
+// checkboxes nk-change, headers nk-action { action: 'sort' } (and sort locally
+// with `sortable`), the add row nk-action { action: 'new-row' }.
+class NkTableView extends NkElement {
+  static get observedAttributes() { return ['name', 'label', 'badge', 'count', 'new-row', 'new-row-label', 'sortable', 'sort-key', 'sort-dir']; }
+
+  render() {
+    this._wrap = this.createElement('div', ['nk-table-wrap']);
+    this._table = this.createElement('table', ['nk-table']);
+    this._thead = document.createElement('thead');
+    this._tbody = document.createElement('tbody');
+    this._table.append(this._thead, this._tbody);
+    this._newRow = this.createElement('div', ['nk-new-row'], { role: 'button', tabindex: '0' });
+    this._wrap.append(this._table, this._newRow);
+    this._wrapper.appendChild(this._wrap);
+    this._columns ??= []; this._rows ??= [];
+    this._render();
+    this.closest('nk-database')?.requestSync?.();
+  }
+
+  _sortedRows() {
+    const key = this.getAttribute('sort-key');
+    const col = this._columns.find(c => c.key === key);
+    if (!col) return this._rows;
+    return [...this._rows].sort(compareBy(col, this.getAttribute('sort-dir') === 'desc' ? -1 : 1));
+  }
+
+  _render() {
+    if (!this._thead) return;
+    const tr = document.createElement('tr');
+    for (const col of this._columns) {
+      const th = this.createElement('th', [], { 'data-key': col.key, scope: 'col' });
+      if (col.icon) { const i = this.createElement('span', ['th-icon']); i.textContent = col.icon; th.appendChild(i); }
+      th.appendChild(document.createTextNode(col.label ?? col.key));
+      if (col.key === this.getAttribute('sort-key')) th.appendChild(document.createTextNode(this.getAttribute('sort-dir') === 'desc' ? ' ↓' : ' ↑'));
+      if (col.width) th.style.width = col.width;
+      tr.appendChild(th);
+    }
+    this._thead.replaceChildren(tr);
+    this._tbody.replaceChildren();
+    for (const row of this._sortedRows()) {
+      const r = this.createElement('tr', [], { 'data-id': row.id ?? '' });
+      for (const col of this._columns) {
+        const td = document.createElement('td');
+        td.appendChild(renderPropertyCell(col, row[col.key], row));
+        r.appendChild(td);
+      }
+      this._tbody.appendChild(r);
+    }
+    this._newRow.textContent = this.getAttribute('new-row-label') || '＋ New page';
+    this._newRow.style.display = this.getBoolAttr('new-row') ? '' : 'none';
+  }
+
+  setupEvents() {
+    this._onClick = (e) => {
+      if (this._newRow.contains(e.target)) { this.emit('nk-action', { action: 'new-row' }); return; }
+      const th = e.target.closest('th[data-key]');
+      if (th) {
+        const key = th.dataset.key;
+        const dir = this.getAttribute('sort-key') === key && this.getAttribute('sort-dir') !== 'desc' ? 'desc' : 'asc';
+        const ok = this.emit('nk-action', { action: 'sort', key, value: dir });
+        if (ok && this.getBoolAttr('sortable')) { this.setAttribute('sort-key', key); this.setAttribute('sort-dir', dir); }
+        return;
+      }
+      if (e.target.closest('input[type=checkbox], a')) return;
+      const tr = e.target.closest('tr[data-id]');
+      if (tr) { const row = this._rowById(tr.dataset.id); this.emit('nk-select', { row, id: row?.id, value: row?.id }); }
+    };
+    this._onChange = (e) => {
+      const input = e.target;
+      if (input.type !== 'checkbox') return;
+      const row = this._rowById(input.dataset.rowId);
+      if (row) row[input.dataset.key] = input.checked;
+      this.emit('nk-change', { row, key: input.dataset.key, value: input.checked });
+    };
+    this._onKey = (e) => { if ((e.key === 'Enter' || e.key === ' ') && e.target === this._newRow) { e.preventDefault(); this.emit('nk-action', { action: 'new-row' }); } };
+    this._wrap.addEventListener('click', this._onClick);
+    this._wrap.addEventListener('change', this._onChange);
+    this._wrap.addEventListener('keydown', this._onKey);
+  }
+
+  teardownEvents() {
+    this._wrap?.removeEventListener('click', this._onClick);
+    this._wrap?.removeEventListener('change', this._onChange);
+    this._wrap?.removeEventListener('keydown', this._onKey);
+  }
+
+  _rowById(id) { return this._rows.find(r => String(r.id) === String(id)); }
+  onAttributeChanged() { this._render(); }
+
+  get name() { return this.getAttribute('name') || 'table'; }
+  get columns() { return this._columns; }
+  set columns(v) { this._columns = Array.isArray(v) ? v : []; this._render(); }
+  get rows() { return this._rows; }
+  set rows(v) { this._rows = Array.isArray(v) ? v : []; this._render(); }
+  set data({ columns, rows }) { this.setData(columns, rows); }
+  setData(columns, rows) { this._columns = columns || []; this._rows = rows || []; this._render(); }
+  refresh() { this._render(); }
+}
+
+customElements.define('nk-table-view', NkTableView);
+
+export { NkTableView };

package/dist/components/nk-tabs.js

@@ -0,0 +1,82 @@
+import { N as NkElement } from './shared/base-6gEcoatG.js';
+
+// <nk-tabs value="notes">
+//   <nk-tab value="notes">📝 Notes</nk-tab>
+//   <nk-tab value="tasks">✅ Tasks</nk-tab>
+//   <div slot="panel" data-tab="notes" class="nk-tab-panel">…</div>
+//   <div slot="panel" data-tab="tasks" class="nk-tab-panel">…</div>
+// </nk-tabs>
+// → <div class="nk-tabs" role="tablist">…</div> + the panels below it.
+// The tabs keep one tab active and hide every panel whose data-tab does not
+// match `value` (through the hidden attribute – the panels stay yours).
+const KEYS = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 };
+
+class NkTabs extends NkElement {
+  static get observedAttributes() { return ['value']; }
+
+  render() {
+    this._strip = this.createElement('div', ['nk-tabs'], { role: 'tablist' });
+    this._tabSlot = document.createElement('slot');
+    this._strip.appendChild(this._tabSlot);
+    this._panelSlot = this.createElement('slot', [], { name: 'panel' });
+    this._wrapper.append(this._strip, this._panelSlot);
+    this._sync();
+  }
+
+  get tabs() { return [...this.querySelectorAll(':scope > nk-tab')]; }
+  get panels() { return [...this.querySelectorAll(':scope > [slot="panel"]')]; }
+
+  _sync() {
+    const tabs = this.tabs;
+    if (!tabs.length) return;
+    let value = this.getAttribute('value');
+    if (value === null || !tabs.some(t => t.getAttribute('value') === value || (t.getAttribute('value') === null && t.textContent.trim() === value))) {
+      const preset = tabs.find(t => t.hasAttribute('active')) || tabs[0];
+      value = preset.getAttribute('value') ?? preset.textContent.trim();
+    }
+    for (const tab of tabs) {
+      const v = tab.getAttribute('value') ?? tab.textContent.trim();
+      if (v === value) tab.setAttribute('active', ''); else tab.removeAttribute('active');
+    }
+    for (const panel of this.panels) panel.hidden = panel.dataset.tab !== value;
+    this._value = value;
+  }
+
+  setupEvents() {
+    this._onSlot = () => this._sync();
+    this._onKey = (e) => {
+      const dir = KEYS[e.key];
+      if (!dir) return;
+      const tabs = this.tabs.filter(t => !t.hasAttribute('disabled'));
+      const i = tabs.indexOf(e.target.closest?.('nk-tab'));
+      if (i < 0 || tabs.length < 2) return;
+      e.preventDefault();
+      const next = tabs[(i + dir + tabs.length) % tabs.length];
+      next.select();
+      next.focus();
+    };
+    this._tabSlot.addEventListener('slotchange', this._onSlot);
+    this._panelSlot.addEventListener('slotchange', this._onSlot);
+    this.addEventListener('keydown', this._onKey);
+    this._sync();
+  }
+
+  teardownEvents() {
+    this._tabSlot?.removeEventListener('slotchange', this._onSlot);
+    this._panelSlot?.removeEventListener('slotchange', this._onSlot);
+    this.removeEventListener('keydown', this._onKey);
+  }
+
+  onAttributeChanged() {
+    const before = this._value;
+    this._sync();
+    if (this._value !== before) this.emit('nk-change', { value: this._value });
+  }
+
+  get value() { return this._value ?? this.getAttribute('value'); }
+  set value(v) { this.setAttribute('value', v); }
+}
+
+customElements.define('nk-tabs', NkTabs);
+
+export { NkTabs };

package/dist/components/nk-tag.js

@@ -0,0 +1,32 @@
+import { N as NkElement } from './shared/base-6gEcoatG.js';
+
+// <nk-tag color="blue">Text</nk-tag>  —  modifier class .blue becomes color="blue"
+const COLORS = ['blue', 'green', 'orange', 'purple'];
+
+class NkTag extends NkElement {
+  static get observedAttributes() { return ['color']; }
+
+  render() {
+    this._tag = this.createElement('span', this._computeClasses());
+    this._tag.appendChild(document.createElement('slot'));
+    this._wrapper.appendChild(this._tag);
+  }
+
+  onAttributeChanged() {
+    if (this._tag) this._tag.className = this._computeClasses().join(' ');
+  }
+
+  _computeClasses() {
+    const classes = ['nk-tag'];
+    const color = this.getAttribute('color');
+    if (COLORS.includes(color)) classes.push(color);
+    return classes;
+  }
+
+  get color() { return this.getAttribute('color'); }
+  set color(v) { v ? this.setAttribute('color', v) : this.removeAttribute('color'); }
+}
+
+customElements.define('nk-tag', NkTag);
+
+export { NkTag };