@jungherz-de/notionkit-elements 1.0.0

package/src/components/page/nk-model-card.js

@@ -0,0 +1,88 @@
+import { NkFormElement } from '../../base.js';
+
+// <nk-model-card name="model" value="gpt" title="Mona Pro" desc="Best for long documents" selected></nk-model-card>
+// → <div class="nk-model-card selected"><div class="m-radio"></div><div><div class="m-name">…</div><div class="m-desc">…</div></div></div>
+// Cards with the same `name` in the same tree behave like radios and submit
+// the selected value with the form.
+class NkModelCard extends NkFormElement {
+  static get observedAttributes() { return ['name', 'value', 'title', 'desc', 'selected', 'disabled']; }
+
+  render() {
+    this._card = this.createElement('div', ['nk-model-card'], { role: 'radio', tabindex: '0' });
+    this._card.appendChild(this.createElement('div', ['m-radio']));
+    const text = document.createElement('div');
+    this._name = this.createElement('div', ['m-name']);
+    const titleSlot = this.createElement('slot', [], { name: 'title' });
+    titleSlot.appendChild(this._name);
+    this._desc = this.createElement('div', ['m-desc']);
+    const descSlot = this.createElement('slot', [], { name: 'desc' });
+    descSlot.appendChild(this._desc);
+    text.append(titleSlot, descSlot);
+    this._card.appendChild(text);
+    this._wrapper.appendChild(this._card);
+    this._defaultSelected = this.getBoolAttr('selected');
+    this._sync();
+    if (this.getBoolAttr('selected')) this._unselectPeers();
+  }
+
+  _sync() {
+    const on = this.getBoolAttr('selected');
+    this._card.classList.toggle('selected', on);
+    this._card.setAttribute('aria-checked', on ? 'true' : 'false');
+    this._card.setAttribute('aria-disabled', this.getBoolAttr('disabled') ? 'true' : 'false');
+    this._name.textContent = this.getAttribute('title') || '';
+    const desc = this.getAttribute('desc');
+    this._desc.textContent = desc || '';
+    this._desc.style.display = desc ? '' : 'none';
+    this.setFormValue(on ? (this.getAttribute('value') || 'on') : null, on ? 'selected' : 'unselected');
+  }
+
+  _group() {
+    const name = this.getAttribute('name');
+    const root = this.getRootNode();
+    if (!name || typeof root?.querySelectorAll !== 'function') return [this];
+    return [...root.querySelectorAll('nk-model-card')].filter(el => el.getAttribute('name') === name);
+  }
+
+  _unselectPeers() {
+    for (const el of this._group()) if (el !== this && el.hasAttribute('selected')) el.removeAttribute('selected');
+  }
+
+  setupEvents() {
+    this._onClick = () => this.select();
+    this._onKey = (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); this.select(); } };
+    this._card.addEventListener('click', this._onClick);
+    this._card.addEventListener('keydown', this._onKey);
+  }
+
+  teardownEvents() {
+    this._card?.removeEventListener('click', this._onClick);
+    this._card?.removeEventListener('keydown', this._onKey);
+  }
+
+  select() {
+    if (this.getBoolAttr('disabled') || this.getBoolAttr('selected')) return;
+    this.setBoolAttr('selected', true);
+    this.emit('nk-change', { value: this.value, name: this.name, checked: true });
+    this.emit('nk-select', { value: this.value, label: this.getAttribute('title') });
+    this.dispatchEvent(new Event('change', { bubbles: true }));
+  }
+
+  onAttributeChanged(name) {
+    this._sync();
+    if (name === 'selected' && this.getBoolAttr('selected')) this._unselectPeers();
+  }
+
+  resetValue() { this.setBoolAttr('selected', this._defaultSelected); }
+  focus(o) { this._card?.focus(o); }
+
+  get selected() { return this.getBoolAttr('selected'); }
+  set selected(v) { this.setBoolAttr('selected', v); }
+  get value() { return this.getAttribute('value') || 'on'; }
+  set value(v) { this.setAttribute('value', v); }
+  get name() { return this.getAttribute('name'); }
+  set name(v) { this.setAttribute('name', v); }
+}
+
+customElements.define('nk-model-card', NkModelCard);
+export { NkModelCard };

package/src/components/page/nk-page-actions.js

@@ -0,0 +1,14 @@
+import { NkElement } from '../../base.js';
+
+// <nk-page-actions><span>👤 Ada</span><span>📅 12 May</span><span>🏷️ <nk-tag color="purple">Design</nk-tag></span></nk-page-actions>
+// → <div class="nk-page-meta">…</div>  – the meta row under the title
+class NkPageActions extends NkElement {
+  render() {
+    const row = this.createElement('div', ['nk-page-meta']);
+    row.appendChild(document.createElement('slot'));
+    this._wrapper.appendChild(row);
+  }
+}
+
+customElements.define('nk-page-actions', NkPageActions);
+export { NkPageActions };

package/src/components/page/nk-page-cover.js

@@ -0,0 +1,34 @@
+import { NkElement } from '../../base.js';
+
+// <nk-page-cover slot="cover"></nk-page-cover>            → the token gradient
+// <nk-page-cover slot="cover" src="cover.jpg"></nk-page-cover>  → an image
+class NkPageCover extends NkElement {
+  static get observedAttributes() { return ['src']; }
+
+  render() {
+    this._cover = this.createElement('div', ['nk-cover']);
+    this._wrapper.appendChild(this._cover);
+    this._sync();
+  }
+
+  _sync() {
+    const src = this.getAttribute('src');
+    if (src) {
+      this._cover.style.backgroundImage = `url("${src}")`;
+      this._cover.style.backgroundSize = 'cover';
+      this._cover.style.backgroundPosition = 'center';
+    } else {
+      this._cover.style.backgroundImage = '';
+      this._cover.style.backgroundSize = '';
+      this._cover.style.backgroundPosition = '';
+    }
+  }
+
+  onAttributeChanged() { this._sync(); }
+
+  get src() { return this.getAttribute('src'); }
+  set src(v) { v == null ? this.removeAttribute('src') : this.setAttribute('src', v); }
+}
+
+customElements.define('nk-page-cover', NkPageCover);
+export { NkPageCover };

package/src/components/page/nk-page-title.js

@@ -0,0 +1,70 @@
+import { NkElement } from '../../base.js';
+
+// <nk-page-title>NotionKit MVP</nk-page-title>          → <h1 class="nk-page-title">
+// <nk-page-title editable placeholder="Untitled">…</nk-page-title>
+// With `editable` the text is copied into the shadow heading (contenteditable
+// cannot edit slotted nodes) and nk-change fires on blur / Enter.
+class NkPageTitle extends NkElement {
+  static get observedAttributes() { return ['editable', 'placeholder', 'value']; }
+  static get observesLightDom() { return true; }
+
+  render() {
+    this._h1 = this.createElement('h1', ['nk-page-title']);
+    this._slot = document.createElement('slot');
+    this._h1.appendChild(this._slot);
+    this._wrapper.appendChild(this._h1);
+    this._sync();
+  }
+
+  _sync() {
+    const editable = this.getBoolAttr('editable');
+    if (editable) {
+      if (this._slot.isConnected) this._slot.remove();
+      this._h1.setAttribute('contenteditable', 'plaintext-only');
+      this._h1.setAttribute('spellcheck', 'false');
+      this._h1.setAttribute('role', 'textbox');
+      this._h1.setAttribute('aria-label', 'Title');
+      const text = this.getAttribute('value') ?? this.textContent.trim();
+      if (this._h1.textContent !== text && document.activeElement !== this) this._h1.textContent = text;
+      this._h1.setAttribute('data-placeholder', this.getAttribute('placeholder') || '');
+    } else {
+      this._h1.removeAttribute('contenteditable');
+      this._h1.removeAttribute('role');
+      if (this.hasAttribute('value')) { if (this._slot.isConnected) this._slot.remove(); this._h1.textContent = this.getAttribute('value'); }
+      else if (!this._slot.isConnected) { this._h1.textContent = ''; this._h1.appendChild(this._slot); }
+    }
+  }
+
+  projectLightDom() { if (this._h1 && !this.hasAttribute('value')) this._sync(); }
+
+  setupEvents() {
+    this._committed = this.value;
+    this._onKey = (e) => { if (e.key === 'Enter') { e.preventDefault(); this._h1.blur(); } };
+    this._onBlur = () => this._commit();
+    this._h1.addEventListener('keydown', this._onKey);
+    this._h1.addEventListener('blur', this._onBlur);
+  }
+
+  teardownEvents() {
+    this._h1?.removeEventListener('keydown', this._onKey);
+    this._h1?.removeEventListener('blur', this._onBlur);
+  }
+
+  _commit() {
+    const value = this._h1.textContent.trim();
+    if (value === this._committed) return;
+    this._committed = value;
+    this.emit('nk-change', { value });
+  }
+
+  onAttributeChanged() { this._sync(); }
+
+  get value() { return this.getBoolAttr('editable') ? (this._h1?.textContent.trim() ?? '') : (this.getAttribute('value') ?? this.textContent.trim()); }
+  set value(v) { this.setAttribute('value', v); }
+  get editable() { return this.getBoolAttr('editable'); }
+  set editable(v) { this.setBoolAttr('editable', v); }
+  focus(o) { this._h1?.focus(o); }
+}
+
+customElements.define('nk-page-title', NkPageTitle);
+export { NkPageTitle };

package/src/components/page/nk-page.js

@@ -0,0 +1,70 @@
+import { NkElement } from '../../base.js';
+
+// <nk-page icon="🚀" cover>
+//   <nk-page-title>NotionKit MVP</nk-page-title>
+//   <nk-page-actions>…</nk-page-actions>
+//   <p class="lead">…</p>
+//   …blocks…
+// </nk-page>
+// → <div class="nk-page-scroll"><div class="nk-cover"></div><div class="nk-page">
+//     <div class="nk-page-icon">🚀</div>…</div></div>
+//
+// The host is display:contents, so .nk-page-scroll is the flex child of
+// .nk-main that scrolls. `narrow` drops the scroll wrapper for pages that are
+// the document itself (landing / docs skeleton). The page icon is rendered
+// here because its ::slotted twin is keyed on the parent (.nk-page).
+class NkPage extends NkElement {
+  static get observedAttributes() { return ['icon', 'cover', 'narrow']; }
+
+  render() {
+    this._page = this.createElement('div', ['nk-page']);
+    this._icon = this.createElement('div', ['nk-page-icon'], { role: 'button', title: 'Change icon' });
+    const iconSlot = this.createElement('slot', [], { name: 'icon' });
+    iconSlot.appendChild(this._icon);
+    this._page.appendChild(iconSlot);
+    this._page.appendChild(document.createElement('slot'));
+    this._cover = this.createElement('div', ['nk-cover']);
+    this._coverSlot = this.createElement('slot', [], { name: 'cover' });
+    this._coverSlot.appendChild(this._cover);
+    this._build();
+  }
+
+  _build() {
+    this._wrapper.replaceChildren();
+    if (this.getBoolAttr('narrow')) {
+      this._wrapper.append(this._coverSlot, this._page);
+    } else {
+      const scroll = this.createElement('div', ['nk-page-scroll']);
+      scroll.append(this._coverSlot, this._page);
+      this._wrapper.appendChild(scroll);
+    }
+    this._sync();
+  }
+
+  _sync() {
+    const icon = this.getAttribute('icon');
+    this._icon.textContent = icon || '';
+    this._icon.style.display = icon ? '' : 'none';
+    this._cover.style.display = this.getBoolAttr('cover') ? '' : 'none';
+  }
+
+  setupEvents() {
+    this._onIcon = () => this.emit('nk-action', { action: 'icon', value: this.getAttribute('icon') });
+    this._icon.addEventListener('click', this._onIcon);
+  }
+
+  teardownEvents() { this._icon?.removeEventListener('click', this._onIcon); }
+
+  onAttributeChanged(name) {
+    if (name === 'narrow') this._build();
+    else this._sync();
+  }
+
+  get icon() { return this.getAttribute('icon'); }
+  set icon(v) { v == null ? this.removeAttribute('icon') : this.setAttribute('icon', v); }
+  get cover() { return this.getBoolAttr('cover'); }
+  set cover(v) { this.setBoolAttr('cover', v); }
+}
+
+customElements.define('nk-page', NkPage);
+export { NkPage };

package/src/components/page/nk-profile-row.js

@@ -0,0 +1,24 @@
+import { NkElement } from '../../base.js';
+
+// <nk-profile-row avatar="MK"><nk-btn variant="secondary" small>Change photo</nk-btn></nk-profile-row>
+// → <div class="nk-profile-row"><div class="big-avatar">MK</div>…</div>
+class NkProfileRow extends NkElement {
+  static get observedAttributes() { return ['avatar']; }
+
+  render() {
+    const row = this.createElement('div', ['nk-profile-row']);
+    this._avatar = this.createElement('div', ['big-avatar']);
+    const s = this.createElement('slot', [], { name: 'avatar' });
+    s.appendChild(this._avatar);
+    row.appendChild(s);
+    row.appendChild(document.createElement('slot'));
+    this._wrapper.appendChild(row);
+    this._sync();
+  }
+
+  _sync() { this._avatar.textContent = this.getAttribute('avatar') || ''; }
+  onAttributeChanged() { this._sync(); }
+}
+
+customElements.define('nk-profile-row', NkProfileRow);
+export { NkProfileRow };

package/src/components/page/nk-segmented.js

@@ -0,0 +1,98 @@
+import { NkFormElement } from '../../base.js';
+
+// <nk-segmented name="range" value="week">
+//   <button value="week">Week</button><button value="month">Month</button>
+// </nk-segmented>
+// → <div class="nk-segmented">…</div> with .active on the chosen button.
+// The buttons stay in the light DOM (their look comes from the ::slotted
+// twins); the element sets type/role, moves .active and submits the value.
+const KEYS = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 };
+
+class NkSegmented extends NkFormElement {
+  static get observedAttributes() { return ['value', 'name', 'disabled']; }
+
+  render() {
+    this._box = this.createElement('div', ['nk-segmented'], { role: 'radiogroup' });
+    this._slot = document.createElement('slot');
+    this._box.appendChild(this._slot);
+    this._wrapper.appendChild(this._box);
+    this._sync();
+  }
+
+  get buttons() { return this._slot?.assignedElements().filter(el => el.localName === 'button') ?? []; }
+  _valueOf(btn) { return btn.getAttribute('value') ?? btn.textContent.trim(); }
+
+  _sync() {
+    const buttons = this.buttons;
+    if (!buttons.length) return;
+    let value = this.getAttribute('value');
+    if (value === null || !buttons.some(b => this._valueOf(b) === value)) {
+      value = this._valueOf(buttons.find(b => b.classList.contains('active')) || buttons[0]);
+    }
+    if (this._defaultValue === undefined) this._defaultValue = value;
+    const disabled = this.getBoolAttr('disabled') || !!this._formDisabled;
+    for (const b of buttons) {
+      const on = this._valueOf(b) === value;
+      b.type = 'button';
+      b.setAttribute('role', 'radio');
+      b.setAttribute('aria-checked', on ? 'true' : 'false');
+      b.classList.toggle('active', on);
+      b.tabIndex = on ? 0 : -1;
+      b.disabled = disabled;
+    }
+    this._value = value;
+    this.setFormValue(value);
+  }
+
+  setupEvents() {
+    this._onSlot = () => this._sync();
+    this._onClick = (e) => {
+      const btn = e.target.closest?.('button');
+      if (!btn || !this.buttons.includes(btn) || btn.disabled) return;
+      this._choose(this._valueOf(btn));
+    };
+    this._onKey = (e) => {
+      const dir = KEYS[e.key];
+      if (!dir) return;
+      const buttons = this.buttons;
+      const i = buttons.indexOf(e.target.closest?.('button'));
+      if (i < 0 || buttons.length < 2) return;
+      e.preventDefault();
+      const next = buttons[(i + dir + buttons.length) % buttons.length];
+      this._choose(this._valueOf(next));
+      next.focus();
+    };
+    this._slot.addEventListener('slotchange', this._onSlot);
+    this.addEventListener('click', this._onClick);
+    this.addEventListener('keydown', this._onKey);
+    this._sync();
+  }
+
+  teardownEvents() {
+    this._slot?.removeEventListener('slotchange', this._onSlot);
+    this.removeEventListener('click', this._onClick);
+    this.removeEventListener('keydown', this._onKey);
+  }
+
+  _choose(value) {
+    if (value === this._value) return;
+    this._syncing = true;
+    this.setAttribute('value', value);
+    this._syncing = false;
+    this._sync();
+    this.emit('nk-change', { value, name: this.name });
+    this.dispatchEvent(new Event('change', { bubbles: true }));
+  }
+
+  onAttributeChanged() { if (!this._syncing) this._sync(); }
+  resetValue() { if (this._defaultValue !== undefined) this.setAttribute('value', this._defaultValue); }
+  onFormDisabled(d) { this._formDisabled = d; this._sync(); }
+
+  get value() { return this._value ?? this.getAttribute('value'); }
+  set value(v) { this.setAttribute('value', v); }
+  get name() { return this.getAttribute('name'); }
+  set name(v) { this.setAttribute('name', v); }
+}
+
+customElements.define('nk-segmented', NkSegmented);
+export { NkSegmented };

package/src/components/page/nk-skeleton.js

@@ -0,0 +1,30 @@
+import { NkElement } from '../../base.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/src/components/page/nk-stat.js

@@ -0,0 +1,39 @@
+import { NkElement } from '../../base.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/src/components/page/nk-stats.js

@@ -0,0 +1,13 @@
+import { NkElement } from '../../base.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/src/components/page/nk-synced.js

@@ -0,0 +1,25 @@
+import { NkElement } from '../../base.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/src/components/page/nk-tab.js

@@ -0,0 +1,53 @@
+import { NkElement } from '../../base.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/src/components/page/nk-tabs.js

@@ -0,0 +1,81 @@
+import { NkElement } from '../../base.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 };