@jungherz-de/notionkit-elements 1.0.0

package/dist/components/nk-database.js

@@ -0,0 +1,100 @@
+import { N as NkElement } from './shared/base-6gEcoatG.js';
+
+// <nk-database id="db" view="table" add-view>
+//   <nk-table-view name="table" label="▦ Table" count></nk-table-view>
+//   <nk-board-view name="board" label="▤ Board" group-by="status"></nk-board-view>
+// </nk-database>
+// db.columns = [{ key: 'name', label: 'Name', type: 'text', icon: '📄', title: true }, { key: 'status', type: 'select', options: [...] }, …];
+// db.rows = [{ id: 1, icon: '🧭', name: '…', status: 'done', … }];
+// → <div class="nk-database"><div class="nk-db-tabs">…</div>…active view…</div>
+// The tabs come from the child views; data is pushed into every view.
+class NkDatabase extends NkElement {
+  static get observedAttributes() { return ['view', 'add-view']; }
+
+  render() {
+    this._box = this.createElement('div', ['nk-database']);
+    this._tabs = this.createElement('div', ['nk-db-tabs'], { role: 'tablist' });
+    this._slot = document.createElement('slot');
+    this._box.append(this._tabs, this._slot);
+    this._wrapper.appendChild(this._box);
+    this._columns = []; this._rows = [];
+    this._sync();
+  }
+
+  get views() { return this._slot?.assignedElements().filter(el => /^nk-[a-z]+-view$/.test(el.localName)) ?? []; }
+
+  _sync() {
+    if (!this._tabs) return;
+    const views = this.views;
+    let current = this.getAttribute('view');
+    if (!views.some(v => v.name === current)) current = views[0]?.name ?? null;
+    this._tabs.replaceChildren();
+    for (const v of views) {
+      const tab = this.createElement('span', ['nk-db-tab'], { role: 'tab', 'data-view': v.name, tabindex: '0' });
+      tab.classList.toggle('active', v.name === current);
+      tab.setAttribute('aria-selected', v.name === current ? 'true' : 'false');
+      tab.append(document.createTextNode(v.getAttribute('label') || v.name));
+      const badge = v.hasAttribute('count') ? String(this._rows.length) : v.getAttribute('badge');
+      if (badge) { const b = this.createElement('span', ['badge']); b.textContent = badge; tab.appendChild(b); }
+      this._tabs.appendChild(tab);
+      v.hidden = v.name !== current;
+      // A method call, not a property write: a view that has not been upgraded
+      // yet would otherwise get an own `data` property that shadows its setter.
+      v.setData?.(this._columns, this._rows);
+    }
+    if (this.getBoolAttr('add-view')) {
+      const add = this.createElement('span', ['nk-db-tab'], { role: 'button', 'data-add': '', tabindex: '0' });
+      add.style.color = 'var(--nk-text-tertiary)';
+      add.textContent = '＋';
+      this._tabs.appendChild(add);
+    }
+    this._tabs.style.display = views.length ? '' : 'none';
+    this._current = current;
+  }
+
+  /** Views upgrade after the database; each one asks for a resync once rendered. */
+  requestSync() {
+    if (this._syncQueued) return;
+    this._syncQueued = true;
+    queueMicrotask(() => { this._syncQueued = false; this._sync(); });
+  }
+
+  setupEvents() {
+    this._onClick = (e) => {
+      const tab = e.target.closest('[data-view]');
+      if (tab) { this.view = tab.dataset.view; return; }
+      if (e.target.closest('[data-add]')) this.emit('nk-action', { action: 'add-view' });
+    };
+    this._onKey = (e) => { if ((e.key === 'Enter' || e.key === ' ') && e.target.closest('[data-view],[data-add]')) { e.preventDefault(); e.target.click(); } };
+    this._onSlot = () => this._sync();
+    this._tabs.addEventListener('click', this._onClick);
+    this._tabs.addEventListener('keydown', this._onKey);
+    this._slot.addEventListener('slotchange', this._onSlot);
+    this._sync();
+  }
+
+  teardownEvents() {
+    this._tabs?.removeEventListener('click', this._onClick);
+    this._tabs?.removeEventListener('keydown', this._onKey);
+    this._slot?.removeEventListener('slotchange', this._onSlot);
+  }
+
+  onAttributeChanged(name) {
+    const before = this._current;
+    this._sync();
+    if (name === 'view' && this._current !== before) this.emit('nk-view-change', { view: this._current });
+  }
+
+  get columns() { return this._columns; }
+  set columns(v) { this._columns = Array.isArray(v) ? v : []; this._sync(); }
+  get rows() { return this._rows; }
+  set rows(v) { this._rows = Array.isArray(v) ? v : []; this._sync(); }
+  get view() { return this._current ?? this.getAttribute('view'); }
+  set view(v) { this.setAttribute('view', v); }
+  /** Re-renders every view after in-place row mutations. */
+  refresh() { this._sync(); }
+}
+
+customElements.define('nk-database', NkDatabase);
+
+export { NkDatabase };

package/dist/components/nk-divider.js

@@ -0,0 +1,12 @@
+import { N as NkElement } from './shared/base-6gEcoatG.js';
+
+// <nk-divider></nk-divider>  →  <hr class="nk-divider">
+class NkDivider extends NkElement {
+  render() {
+    this._wrapper.appendChild(this.createElement('hr', ['nk-divider']));
+  }
+}
+
+customElements.define('nk-divider', NkDivider);
+
+export { NkDivider };

package/dist/components/nk-emoji-picker.js

@@ -0,0 +1,112 @@
+import { N as NkElement } from './shared/base-6gEcoatG.js';
+
+// Built-in emoji set for <nk-emoji-picker>: eight categories, names for
+// search. Override with `picker.emojis = [{ char, name, cat }]`.
+const C = (cat, icon, list) => list.map(([char, name]) => ({ char, name, cat, icon }));
+const EMOJI_CATEGORIES = [
+  { id: 'smileys', icon: '😀' }, { id: 'people', icon: '👋' }, { id: 'nature', icon: '🌿' }, { id: 'food', icon: '☕' },
+  { id: 'activity', icon: '🎯' }, { id: 'travel', icon: '🚀' }, { id: 'objects', icon: '💡' }, { id: 'symbols', icon: '✅' },
+];
+const EMOJI = [
+  ...C('smileys', '😀', [['😀', 'grinning'], ['😊', 'smile blush'], ['😂', 'joy laugh'], ['🙂', 'slight smile'], ['😉', 'wink'], ['😍', 'heart eyes love'], ['🤔', 'thinking'], ['😎', 'cool sunglasses'], ['🥳', 'party'], ['😴', 'sleep'], ['🤯', 'mind blown'], ['😅', 'sweat smile'], ['🙃', 'upside down'], ['😇', 'angel halo'], ['🤗', 'hug'], ['😢', 'cry sad']]),
+  ...C('people', '👋', [['👋', 'wave hello'], ['👍', 'thumbs up'], ['👎', 'thumbs down'], ['🙏', 'pray thanks'], ['👏', 'clap'], ['🤝', 'handshake deal'], ['💪', 'strong'], ['👀', 'eyes look'], ['🧠', 'brain knowledge'], ['❤️', 'heart love'], ['👤', 'person user'], ['👥', 'people team members'], ['🧑‍💻', 'developer'], ['🙋', 'raise hand'], ['✍️', 'writing'], ['🫶', 'heart hands']]),
+  ...C('nature', '🌿', [['🌿', 'leaf herb'], ['🌱', 'seedling'], ['🌳', 'tree'], ['🌸', 'blossom flower'], ['🌞', 'sun'], ['🌙', 'moon night'], ['⭐', 'star'], ['🔥', 'fire hot'], ['🌈', 'rainbow'], ['🌊', 'wave water'], ['🍀', 'clover luck'], ['🐝', 'bee'], ['🦋', 'butterfly'], ['🐢', 'turtle'], ['🌍', 'earth globe'], ['❄️', 'snow']]),
+  ...C('food', '☕', [['☕', 'coffee'], ['🍵', 'tea'], ['🍎', 'apple'], ['🍕', 'pizza'], ['🍰', 'cake'], ['🍪', 'cookie'], ['🥐', 'croissant'], ['🍔', 'burger'], ['🍜', 'noodles'], ['🍺', 'beer'], ['🍷', 'wine'], ['🥗', 'salad'], ['🍫', 'chocolate'], ['🍓', 'strawberry'], ['🥑', 'avocado'], ['🍩', 'donut']]),
+  ...C('activity', '🎯', [['🎯', 'target goal'], ['🏆', 'trophy win'], ['🎉', 'tada celebration'], ['🎨', 'art palette design'], ['🎙️', 'microphone podcast voice'], ['🎬', 'clapper movie'], ['🎮', 'game'], ['⚽', 'football'], ['🏃', 'run'], ['🧘', 'yoga calm'], ['🎵', 'music'], ['🎲', 'dice'], ['🏁', 'finish flag'], ['🎓', 'graduation learn'], ['🧩', 'puzzle piece'], ['🔁', 'repeat retro']]),
+  ...C('travel', '🚀', [['🚀', 'rocket launch'], ['✈️', 'plane travel'], ['🚗', 'car'], ['🚲', 'bike'], ['🏠', 'house home'], ['🏢', 'office building'], ['🗺️', 'map'], ['🧭', 'compass'], ['⛰️', 'mountain'], ['🏖️', 'beach'], ['🚉', 'station'], ['🛰️', 'satellite'], ['🌆', 'city'], ['🏕️', 'camping'], ['⛵', 'sailboat'], ['🛫', 'departure']]),
+  ...C('objects', '💡', [['💡', 'idea bulb'], ['📊', 'chart bar'], ['📈', 'chart up'], ['📅', 'calendar date'], ['📄', 'page document'], ['📁', 'folder'], ['🗃️', 'card box database'], ['📌', 'pin'], ['🔍', 'search'], ['🛠️', 'tools'], ['⚙️', 'gear settings'], ['🔔', 'bell notification'], ['💎', 'gem diamond'], ['📝', 'memo notes'], ['📎', 'paperclip files'], ['🔒', 'lock secure'], ['💬', 'speech comment'], ['📤', 'export outbox'], ['📥', 'inbox'], ['🗑️', 'trash bin'], ['🖥️', 'desktop'], ['📱', 'phone'], ['💻', 'laptop'], ['🧾', 'receipt']]),
+  ...C('symbols', '✅', [['✅', 'check done'], ['✨', 'sparkles ai magic'], ['❌', 'cross no'], ['⚠️', 'warning'], ['ℹ️', 'info'], ['❓', 'question'], ['➕', 'plus add'], ['➡️', 'arrow right'], ['🔴', 'red circle'], ['🟢', 'green circle'], ['🟡', 'yellow circle'], ['🔵', 'blue circle'], ['⏳', 'hourglass wait'], ['♻️', 'recycle'], ['🆕', 'new'], ['💯', 'hundred']]),
+];
+
+// <nk-emoji-picker></nk-emoji-picker>
+// → <div class="nk-pop"><input class="nk-emoji-search"><div class="nk-emoji-grid">…</div><div class="nk-emoji-cats">…</div></div>
+// Built-in set with names for search; `picker.emojis = [{ char, name, cat }]`
+// replaces it. A click fires nk-select { emoji }.
+class NkEmojiPicker extends NkElement {
+  static get observedAttributes() { return ['placeholder', 'value']; }
+
+  render() {
+    this._box = this.createElement('div', ['nk-pop']);
+    this._search = this.createElement('input', ['nk-emoji-search'], { type: 'search', autocomplete: 'off', 'aria-label': 'Search emoji' });
+    this._grid = this.createElement('div', ['nk-emoji-grid'], { role: 'listbox' });
+    this._cats = this.createElement('div', ['nk-emoji-cats'], { role: 'tablist' });
+    this._box.append(this._search, this._grid, this._cats);
+    this._wrapper.appendChild(this._box);
+    this._emojis = EMOJI;
+    this._cat = EMOJI_CATEGORIES[0].id;
+    this._renderCats();
+    this._renderGrid();
+    this._syncAttrs();
+  }
+
+  _syncAttrs() { this._search.placeholder = this.getAttribute('placeholder') || 'Search…'; }
+
+  _renderCats() {
+    this._cats.replaceChildren();
+    const cats = this._categories();
+    for (const cat of cats) {
+      const el = this.createElement('span', [], { role: 'tab', 'data-cat': cat.id, title: cat.id });
+      el.textContent = cat.icon;
+      el.classList.toggle('active', cat.id === this._cat);
+      this._cats.appendChild(el);
+    }
+    this._cats.style.display = cats.length > 1 ? '' : 'none';
+  }
+
+  _categories() {
+    if (this._catList) return this._catList;
+    const seen = new Map();
+    for (const e of this._emojis) if (e.cat && !seen.has(e.cat)) seen.set(e.cat, { id: e.cat, icon: e.icon || EMOJI_CATEGORIES.find(c => c.id === e.cat)?.icon || e.char });
+    return [...seen.values()];
+  }
+
+  _renderGrid() {
+    const q = this._search.value.trim().toLowerCase();
+    const list = q ? this._emojis.filter(e => (e.name || '').toLowerCase().includes(q) || e.char === q) : this._emojis.filter(e => !e.cat || e.cat === this._cat);
+    this._grid.replaceChildren();
+    for (const e of list.slice(0, 64)) {
+      const s = this.createElement('span', [], { role: 'option', title: e.name || '', 'data-emoji': e.char });
+      s.textContent = e.char;
+      this._grid.appendChild(s);
+    }
+    for (const el of this._cats.children) el.classList.toggle('active', !q && el.dataset.cat === this._cat);
+  }
+
+  setupEvents() {
+    this._onInput = () => this._renderGrid();
+    this._onGrid = (e) => { const s = e.target.closest('[data-emoji]'); if (s) this.select(s.dataset.emoji); };
+    this._onCats = (e) => { const c = e.target.closest('[data-cat]'); if (!c) return; this._cat = c.dataset.cat; this._search.value = ''; this._renderGrid(); };
+    this._onKey = (e) => { if (e.key === 'Enter') { const first = this._grid.querySelector('[data-emoji]'); if (first) this.select(first.dataset.emoji); } };
+    this._search.addEventListener('input', this._onInput);
+    this._search.addEventListener('keydown', this._onKey);
+    this._grid.addEventListener('click', this._onGrid);
+    this._cats.addEventListener('click', this._onCats);
+  }
+
+  teardownEvents() {
+    this._search?.removeEventListener('input', this._onInput);
+    this._search?.removeEventListener('keydown', this._onKey);
+    this._grid?.removeEventListener('click', this._onGrid);
+    this._cats?.removeEventListener('click', this._onCats);
+  }
+
+  select(emoji) {
+    this.setAttribute('value', emoji);
+    this.emit('nk-select', { emoji, value: emoji });
+  }
+
+  onAttributeChanged() { this._syncAttrs(); }
+  focus(o) { this._search?.focus(o); }
+
+  /** Category strip override: [{ id, icon }]. Emojis without `cat` show in every category. */
+  get categories() { return this._categories(); }
+  set categories(list) { this._catList = Array.isArray(list) && list.length ? list : null; this._cat = this._categories()[0]?.id; this._renderCats(); this._renderGrid(); }
+  get emojis() { return this._emojis; }
+  set emojis(list) { this._emojis = Array.isArray(list) ? list : EMOJI; this._cat = this._categories()[0]?.id; this._renderCats(); this._renderGrid(); }
+  get value() { return this.getAttribute('value'); }
+  set value(v) { this.setAttribute('value', v); }
+}
+
+customElements.define('nk-emoji-picker', NkEmojiPicker);
+
+export { NkEmojiPicker };

package/dist/components/nk-empty.js

@@ -0,0 +1,36 @@
+import { N as NkElement } from './shared/base-6gEcoatG.js';
+
+// <nk-empty icon="🗂️" title="No entries yet" desc="Create the first one."><nk-btn variant="primary" small>＋ New</nk-btn></nk-empty>
+// → <div class="nk-empty"><div class="e-icon">🗂️</div><div class="e-title">…</div><div class="e-desc">…</div>…</div>
+class NkEmpty extends NkElement {
+  static get observedAttributes() { return ['icon', 'title', 'desc']; }
+
+  render() {
+    const box = this.createElement('div', ['nk-empty']);
+    this._parts = {};
+    for (const [slot, cls] of [['icon', 'e-icon'], ['title', 'e-title'], ['desc', 'e-desc']]) {
+      const el = this.createElement('div', [cls]);
+      const s = this.createElement('slot', [], { name: slot });
+      s.appendChild(el);
+      box.appendChild(s);
+      this._parts[slot] = el;
+    }
+    box.appendChild(document.createElement('slot'));
+    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 ? '' : 'none';
+    }
+  }
+
+  onAttributeChanged() { this._sync(); }
+}
+
+customElements.define('nk-empty', NkEmpty);
+
+export { NkEmpty };

package/dist/components/nk-field.js

@@ -0,0 +1,50 @@
+import { N as NkElement } from './shared/base-6gEcoatG.js';
+
+// <nk-field label="Display name" desc="Shown next to your comments">
+//   <nk-input value="Marcel"></nk-input>
+// </nk-field>
+// → <div class="nk-field"><div><div class="f-label">…</div><div class="f-desc">…</div></div>
+//                         <div class="f-control">…</div></div>
+// Rich label / description content goes through slot="label" / slot="desc"
+// (twins `.nk-field ::slotted([slot="label"])` etc. in notionkit.css).
+class NkField extends NkElement {
+  static get observedAttributes() { return ['label', 'desc']; }
+
+  render() {
+    const field = this.createElement('div', ['nk-field']);
+    const text = document.createElement('div');
+    this._label = this.createElement('div', ['f-label']);
+    const labelSlot = this.createElement('slot', [], { name: 'label' });
+    labelSlot.appendChild(this._label);
+    this._desc = this.createElement('div', ['f-desc']);
+    const descSlot = this.createElement('slot', [], { name: 'desc' });
+    descSlot.appendChild(this._desc);
+    text.appendChild(labelSlot);
+    text.appendChild(descSlot);
+    const control = this.createElement('div', ['f-control']);
+    control.appendChild(document.createElement('slot'));
+    field.appendChild(text);
+    field.appendChild(control);
+    this._wrapper.appendChild(field);
+    this._sync();
+  }
+
+  onAttributeChanged() { this._sync(); }
+
+  _sync() {
+    if (!this._label) return;
+    this._label.textContent = this.getAttribute('label') || '';
+    const desc = this.getAttribute('desc');
+    this._desc.textContent = desc || '';
+    this._desc.style.display = desc ? '' : 'none';
+  }
+
+  get label() { return this.getAttribute('label'); }
+  set label(v) { this.setAttribute('label', v); }
+  get desc() { return this.getAttribute('desc'); }
+  set desc(v) { v == null ? this.removeAttribute('desc') : this.setAttribute('desc', v); }
+}
+
+customElements.define('nk-field', NkField);
+
+export { NkField };

package/dist/components/nk-filter-bar.js

@@ -0,0 +1,78 @@
+import { N as NkElement } from './shared/base-6gEcoatG.js';
+
+// <nk-filter-bar search placeholder="Search rows …"></nk-filter-bar>
+// bar.filters = [{ key: 'status', label: 'Status: Done', value: 'done' }];
+// Composed from existing classes (nk-btn secondary small, nk-input, nk-tag):
+// filter / sort buttons fire nk-action, chips remove on ×, search and chip
+// changes fire nk-change { filters, search }. The wrapper is layout only.
+class NkFilterBar extends NkElement {
+  static get observedAttributes() { return ['search', 'placeholder', 'no-filter', 'no-sort', 'value']; }
+
+  render() {
+    this._bar = document.createElement('div');
+    this._bar.style.cssText = 'display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:8px 0';
+    this._filterBtn = this.createElement('button', ['nk-btn', 'secondary', 'small'], { type: 'button', 'data-action': 'filter' });
+    this._filterBtn.textContent = '⚲ Filter';
+    this._sortBtn = this.createElement('button', ['nk-btn', 'secondary', 'small'], { type: 'button', 'data-action': 'sort' });
+    this._sortBtn.textContent = '↕ Sort';
+    this._chips = document.createElement('span');
+    this._chips.style.cssText = 'display:inline-flex;gap:4px;flex-wrap:wrap';
+    this._input = this.createElement('input', ['nk-input'], { type: 'search', autocomplete: 'off' });
+    this._input.style.marginLeft = 'auto';
+    this._bar.append(this._filterBtn, this._sortBtn, this._chips, document.createElement('slot'), this._input);
+    this._wrapper.appendChild(this._bar);
+    this._filters = [];
+    this._sync();
+  }
+
+  _sync() {
+    this._filterBtn.style.display = this.getBoolAttr('no-filter') ? 'none' : '';
+    this._sortBtn.style.display = this.getBoolAttr('no-sort') ? 'none' : '';
+    this._input.style.display = this.getBoolAttr('search') ? '' : 'none';
+    this._input.placeholder = this.getAttribute('placeholder') || 'Search …';
+    if (this.hasAttribute('value') && this._input.value !== this.getAttribute('value')) this._input.value = this.getAttribute('value');
+    this._chips.replaceChildren();
+    this._filters.forEach((f, i) => {
+      const chip = this.createElement('span', ['nk-tag', f.color || 'blue'], { 'data-index': i });
+      chip.style.cursor = 'pointer';
+      chip.textContent = `${f.label ?? `${f.key}: ${f.value}`} ×`;
+      chip.title = 'Remove filter';
+      this._chips.appendChild(chip);
+    });
+  }
+
+  setupEvents() {
+    this._onClick = (e) => {
+      const btn = e.target.closest('[data-action]');
+      if (btn) { this.emit('nk-action', { action: btn.dataset.action }); return; }
+      const chip = e.target.closest('[data-index]');
+      if (chip) { this._filters.splice(Number(chip.dataset.index), 1); this._sync(); this._emitChange(); }
+    };
+    this._onInput = () => { clearTimeout(this._debounce); this._debounce = setTimeout(() => this._emitChange(), 150); };
+    this._bar.addEventListener('click', this._onClick);
+    this._input.addEventListener('input', this._onInput);
+  }
+
+  teardownEvents() {
+    this._bar?.removeEventListener('click', this._onClick);
+    this._input?.removeEventListener('input', this._onInput);
+    clearTimeout(this._debounce);
+  }
+
+  _emitChange() { this.emit('nk-change', { filters: [...this._filters], search: this._input.value }); }
+  onAttributeChanged() { this._sync(); }
+
+  get filters() { return this._filters; }
+  set filters(v) { this._filters = Array.isArray(v) ? v : []; this._sync(); }
+  get value() { return this._input?.value ?? ''; }
+  set value(v) { if (this._input) this._input.value = v ?? ''; }
+  /** Applies filters + search to rows: equality per filter key, substring search over every string field. */
+  apply(rows) {
+    const q = this.value.trim().toLowerCase();
+    return rows.filter(r => this._filters.every(f => r[f.key] === f.value) && (!q || Object.values(r).some(v => String(typeof v === 'object' && v ? v.name ?? '' : v ?? '').toLowerCase().includes(q))));
+  }
+}
+
+customElements.define('nk-filter-bar', NkFilterBar);
+
+export { NkFilterBar };

package/dist/components/nk-heading.js

@@ -0,0 +1,29 @@
+import { N as NkElement } from './shared/base-6gEcoatG.js';
+
+// <nk-heading level="2">Section</nk-heading>  →  <h2 class="nk-heading">
+// The heading level is real markup (h1–h4), so the outline stays honest.
+class NkHeading extends NkElement {
+  static get observedAttributes() { return ['level']; }
+
+  render() {
+    this._build();
+  }
+
+  _build() {
+    const level = Math.min(4, Math.max(1, Number(this.getAttribute('level')) || 2));
+    const h = this.createElement(`h${level}`, ['nk-heading']);
+    h.appendChild(document.createElement('slot'));
+    if (this._heading) this._heading.replaceWith(h);
+    else this._wrapper.appendChild(h);
+    this._heading = h;
+  }
+
+  onAttributeChanged() { this._build(); }
+
+  get level() { return Number(this.getAttribute('level')) || 2; }
+  set level(v) { this.setAttribute('level', v); }
+}
+
+customElements.define('nk-heading', NkHeading);
+
+export { NkHeading };

package/dist/components/nk-input.js

@@ -0,0 +1,108 @@
+import { a as NkFormElement } from './shared/base-6gEcoatG.js';
+
+// <nk-input name="title" value="…" placeholder="…" wide></nk-input>  →  <input class="nk-input wide">
+// Takes part in the surrounding <form> through ElementInternals.
+const FORWARDED = ['type', 'placeholder', 'name', 'min', 'max', 'step', 'autocomplete', 'pattern', 'maxlength', 'minlength', 'inputmode', 'list', 'aria-label'];
+const BOOLEANS = ['required', 'disabled', 'readonly'];
+
+class NkInput extends NkFormElement {
+  static get observedAttributes() { return ['value', 'wide', ...FORWARDED, ...BOOLEANS]; }
+
+  render() {
+    this._input = this.createElement('input', ['nk-input']);
+    for (const attr of FORWARDED) this._forward(attr);
+    for (const attr of BOOLEANS) this._forward(attr);
+    this._input.value = this.getAttribute('value') ?? '';
+    this._defaultValue = this._input.value;
+    this._syncWide();
+    this._wrapper.appendChild(this._input);
+    this._syncFormValue();
+  }
+
+  _forward(attr) {
+    if (BOOLEANS.includes(attr)) {
+      this._input[attr === 'readonly' ? 'readOnly' : attr] = this.getBoolAttr(attr);
+      return;
+    }
+    const v = this.getAttribute(attr);
+    if (v === null) this._input.removeAttribute(attr);
+    else this._input.setAttribute(attr, v);
+  }
+
+  _syncWide() {
+    this._input.classList.toggle('wide', this.getBoolAttr('wide'));
+  }
+
+  setupEvents() {
+    this._onInput = () => {
+      this._syncFormValue();
+      this.emit('nk-input', { value: this._input.value, name: this.name });
+    };
+    this._onChange = () => {
+      this._syncFormValue();
+      this.emit('nk-change', { value: 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') ?? ''; this._syncFormValue(); return; }
+    if (name === 'wide') { this._syncWide(); return; }
+    this._forward(name);
+    this._syncFormValue();
+  }
+
+  _syncFormValue() {
+    this.setFormValue(this._input.value);
+    this.syncValidityFrom(this._input);
+  }
+
+  resetValue() {
+    this._input.value = this.getAttribute('value') ?? '';
+    this._syncFormValue();
+  }
+
+  restoreValue(state) {
+    if (typeof state === 'string') { this._input.value = state; this._syncFormValue(); }
+  }
+
+  onFormDisabled(disabled) {
+    this._input.disabled = disabled || this.getBoolAttr('disabled');
+  }
+
+  focus(options) { this._input?.focus(options); }
+  blur() { this._input?.blur(); }
+  select() { this._input?.select(); }
+
+  get value() { return this._input?.value ?? (this.getAttribute('value') ?? ''); }
+  set value(v) {
+    if (this._input) { this._input.value = v ?? ''; this._syncFormValue(); }
+    else this.setAttribute('value', v ?? '');
+  }
+  get name() { return this.getAttribute('name'); }
+  set name(v) { this.setAttribute('name', v); }
+  get type() { return this.getAttribute('type') || 'text'; }
+  set type(v) { this.setAttribute('type', v); }
+  get placeholder() { return this.getAttribute('placeholder'); }
+  set placeholder(v) { this.setAttribute('placeholder', v); }
+  get disabled() { return this.getBoolAttr('disabled'); }
+  set disabled(v) { this.setBoolAttr('disabled', v); }
+  get required() { return this.getBoolAttr('required'); }
+  set required(v) { this.setBoolAttr('required', v); }
+  get readonly() { return this.getBoolAttr('readonly'); }
+  set readonly(v) { this.setBoolAttr('readonly', v); }
+  get wide() { return this.getBoolAttr('wide'); }
+  set wide(v) { this.setBoolAttr('wide', v); }
+}
+
+customElements.define('nk-input', NkInput);
+
+export { NkInput };

package/dist/components/nk-kbd.js

@@ -0,0 +1,15 @@
+import { N as NkElement } from './shared/base-6gEcoatG.js';
+
+// <nk-kbd>⌘</nk-kbd> <nk-kbd>K</nk-kbd>  →  <kbd class="nk-kbd">
+class NkKbd extends NkElement {
+
+  render() {
+    const kbd = this.createElement('kbd', ['nk-kbd']);
+    kbd.appendChild(document.createElement('slot'));
+    this._wrapper.appendChild(kbd);
+  }
+}
+
+customElements.define('nk-kbd', NkKbd);
+
+export { NkKbd };

package/dist/components/nk-member-list.js

@@ -0,0 +1,30 @@
+import { N as NkElement } from './shared/base-6gEcoatG.js';
+
+// <nk-member-list><nk-member-row …></nk-member-row>…</nk-member-list>
+// → <div class="nk-member-list">…</div>; the last row gets `last` (no border).
+class NkMemberList extends NkElement {
+  render() {
+    const box = this.createElement('div', ['nk-member-list']);
+    this._slot = document.createElement('slot');
+    box.appendChild(this._slot);
+    this._wrapper.appendChild(box);
+    this._mark();
+  }
+
+  _mark() {
+    const rows = this._slot.assignedElements().filter(el => el.localName === 'nk-member-row');
+    rows.forEach((row, i) => { if (i === rows.length - 1) row.setAttribute('last', ''); else row.removeAttribute('last'); });
+  }
+
+  setupEvents() {
+    this._onSlot = () => this._mark();
+    this._slot.addEventListener('slotchange', this._onSlot);
+    this._mark();
+  }
+
+  teardownEvents() { this._slot?.removeEventListener('slotchange', this._onSlot); }
+}
+
+customElements.define('nk-member-list', NkMemberList);
+
+export { NkMemberList };

package/dist/components/nk-member-row.js

@@ -0,0 +1,46 @@
+import { N as NkElement } from './shared/base-6gEcoatG.js';
+
+// <nk-member-row name="Sara Lindt" mail="sara@…" avatar="SL" color="#448361">
+//   <nk-select slot="role" compact>…</nk-select>
+// </nk-member-row>
+// → <div class="nk-member-row"><span class="mini-avatar">SL</span><div>Sara Lindt<div class="m-mail">…</div></div><select …></div>
+class NkMemberRow extends NkElement {
+  static get observedAttributes() { return ['name', 'mail', 'avatar', 'color', 'last']; }
+
+  render() {
+    this._row = this.createElement('div', ['nk-member-row']);
+    this._avatar = this.createElement('span', ['mini-avatar']);
+    const avatarSlot = this.createElement('slot', [], { name: 'avatar' });
+    avatarSlot.appendChild(this._avatar);
+    const text = document.createElement('div');
+    this._name = document.createTextNode('');
+    this._mail = this.createElement('div', ['m-mail']);
+    text.append(this._name, this._mail);
+    // `.nk-member-row .nk-select { margin-left: auto }` cannot reach a select
+    // inside another shadow root, and a display:contents host takes no margin –
+    // so the role slot sits in a box that carries that rule.
+    const role = document.createElement('div');
+    role.style.marginLeft = 'auto';
+    role.appendChild(this.createElement('slot', [], { name: 'role' }));
+    this._row.append(avatarSlot, text, role, document.createElement('slot'));
+    this._wrapper.appendChild(this._row);
+    this._sync();
+  }
+
+  _sync() {
+    this._name.data = this.getAttribute('name') || '';
+    const mail = this.getAttribute('mail');
+    this._mail.textContent = mail || '';
+    this._mail.style.display = mail ? '' : 'none';
+    const avatar = this.getAttribute('avatar');
+    this._avatar.textContent = avatar || (this.getAttribute('name') || '').split(/\s+/).map(w => w[0]).join('').slice(0, 2).toUpperCase();
+    this._avatar.style.background = this.getAttribute('color') || 'var(--nk-text-tertiary)';
+    this._row.classList.toggle('last', this.getBoolAttr('last'));
+  }
+
+  onAttributeChanged() { this._sync(); }
+}
+
+customElements.define('nk-member-row', NkMemberRow);
+
+export { NkMemberRow };