@jungherz-de/notionkit-elements 1.0.0

package/dist/components/nk-btn.js

@@ -0,0 +1,107 @@
+import { N as NkElement } from './shared/base-6gEcoatG.js';
+
+// <nk-btn variant="primary" small>Save</nk-btn>   →  <button class="nk-btn primary small">
+// <nk-btn href="/docs" variant="secondary">Docs</nk-btn>  →  <a class="nk-btn secondary">
+// <nk-btn variant="topbar">⭐</nk-btn>  →  <button class="nk-topbar-btn">
+//
+// Modifier classes become attributes. A slotted <svg> is sized by the
+// `.nk-btn ::slotted(svg)` twin; pass the icon itself, never wrapped.
+const VARIANTS = ['primary', 'secondary', 'danger', 'danger-solid', 'topbar', 'share'];
+
+class NkBtn extends NkElement {
+  static get observedAttributes() { return ['variant', 'small', 'disabled', 'type', 'href', 'title', 'aria-label']; }
+
+  render() {
+    this._build();
+  }
+
+  _build() {
+    const href = this.getAttribute('href');
+    const el = href ? this.createElement('a', [], { href }) : this.createElement('button', [], { type: this.getAttribute('type') || 'button' });
+    el.className = this._computeClasses().join(' ');
+    el.appendChild(document.createElement('slot'));
+    this._applyState(el);
+    if (this._btn) {
+      this._btn.removeEventListener('click', this._onClick);
+      this._btn.replaceWith(el);
+    } else {
+      this._wrapper.appendChild(el);
+    }
+    this._btn = el;
+    if (this._onClick) el.addEventListener('click', this._onClick);
+  }
+
+  _applyState(el) {
+    const disabled = this.getBoolAttr('disabled');
+    if (el.tagName === 'BUTTON') el.disabled = disabled;
+    else el.setAttribute('aria-disabled', disabled ? 'true' : 'false');
+    const title = this.getAttribute('title');
+    title ? el.setAttribute('title', title) : el.removeAttribute('title');
+    const label = this.getAttribute('aria-label');
+    label ? el.setAttribute('aria-label', label) : el.removeAttribute('aria-label');
+  }
+
+  setupEvents() {
+    this._onClick = (e) => {
+      if (this.getBoolAttr('disabled')) { e.preventDefault(); e.stopPropagation(); return; }
+      // A button inside a shadow root is not a submit button of the outer
+      // form; forward the intent to the form the host sits in.
+      const type = this.getAttribute('type');
+      if (type === 'submit' || type === 'reset') {
+        const form = this.closest('form');
+        if (form) type === 'submit' ? form.requestSubmit() : form.reset();
+      }
+    };
+    this._btn.addEventListener('click', this._onClick);
+  }
+
+  teardownEvents() {
+    this._btn?.removeEventListener('click', this._onClick);
+  }
+
+  onAttributeChanged(name) {
+    if (!this._btn) return;
+    switch (name) {
+      case 'href':
+        this._build();
+        break;
+      case 'variant':
+      case 'small':
+        this._btn.className = this._computeClasses().join(' ');
+        break;
+      case 'type':
+        if (this._btn.tagName === 'BUTTON') this._btn.setAttribute('type', this.getAttribute('type') || 'button');
+        break;
+      default:
+        this._applyState(this._btn);
+    }
+  }
+
+  _computeClasses() {
+    const variant = this.getAttribute('variant');
+    if (variant === 'topbar') return ['nk-topbar-btn'];
+    if (variant === 'share') return ['nk-topbar-btn', 'nk-share-btn'];
+    const classes = ['nk-btn'];
+    if (VARIANTS.includes(variant)) classes.push(variant);
+    if (this.getBoolAttr('small')) classes.push('small');
+    return classes;
+  }
+
+  focus(options) { this._btn?.focus(options); }
+  click() { this._btn?.click(); }
+
+  get variant() { return this.getAttribute('variant'); }
+  set variant(v) { v ? this.setAttribute('variant', v) : this.removeAttribute('variant'); }
+  get small() { return this.getBoolAttr('small'); }
+  set small(v) { this.setBoolAttr('small', v); }
+  get disabled() { return this.getBoolAttr('disabled'); }
+  set disabled(v) { this.setBoolAttr('disabled', v); }
+  get type() { return this.getAttribute('type') || 'button'; }
+  set type(v) { this.setAttribute('type', v); }
+  get href() { return this.getAttribute('href'); }
+  set href(v) { v ? this.setAttribute('href', v) : this.removeAttribute('href'); }
+}
+
+customElements.define('nk-btn', NkBtn);
+
+export { NkBtn };

package/dist/components/nk-callout.js

@@ -0,0 +1,36 @@
+import { N as NkElement } from './shared/base-6gEcoatG.js';
+
+// <nk-callout icon="💡">text</nk-callout>
+// <nk-callout><span slot="icon">📌</span>text</nk-callout>
+// The .c-icon rule has ::slotted(.c-icon) / ::slotted([slot="icon"]) twins in
+// notionkit.css – those size an icon passed in from the light DOM. Pass the
+// icon node itself, never wrapped: ::slotted() only matches the assigned node.
+class NkCallout extends NkElement {
+  static get observedAttributes() { return ['icon']; }
+
+  render() {
+    this._box = this.createElement('div', ['nk-callout']);
+    this._icon = this.createElement('span', ['c-icon']);
+    const iconSlot = this.createElement('slot', [], { name: 'icon' });
+    iconSlot.appendChild(this._icon);
+    const body = document.createElement('div');
+    body.appendChild(document.createElement('slot'));
+    this._box.appendChild(iconSlot);
+    this._box.appendChild(body);
+    this._wrapper.appendChild(this._box);
+    this._syncIcon();
+  }
+
+  onAttributeChanged() { this._syncIcon(); }
+
+  _syncIcon() {
+    if (this._icon) this._icon.textContent = this.getAttribute('icon') || '💡';
+  }
+
+  get icon() { return this.getAttribute('icon'); }
+  set icon(v) { v == null ? this.removeAttribute('icon') : this.setAttribute('icon', v); }
+}
+
+customElements.define('nk-callout', NkCallout);
+
+export { NkCallout };

package/dist/components/nk-check.js

@@ -0,0 +1,77 @@
+import { a as NkFormElement } from './shared/base-6gEcoatG.js';
+
+// <nk-check name="mail" value="weekly" checked>Weekly digest</nk-check>
+// → <label class="nk-check"><input type="checkbox"> Weekly digest</label>
+class NkCheck extends NkFormElement {
+  static get observedAttributes() { return ['checked', 'disabled', 'name', 'value', 'indeterminate', 'required']; }
+
+  render() {
+    const label = this.createElement('label', ['nk-check']);
+    this._input = this.createElement('input', [], { type: 'checkbox' });
+    this._apply();
+    this._defaultChecked = this.getBoolAttr('checked');
+    label.appendChild(this._input);
+    label.appendChild(document.createElement('slot'));
+    this._wrapper.appendChild(label);
+    this._syncFormValue();
+  }
+
+  _apply() {
+    this._input.checked = this.getBoolAttr('checked');
+    this._input.indeterminate = this.getBoolAttr('indeterminate');
+    this._input.disabled = this.getBoolAttr('disabled') || !!this._formDisabled;
+    this._input.required = this.getBoolAttr('required');
+    const name = this.getAttribute('name');
+    name ? this._input.setAttribute('name', name) : this._input.removeAttribute('name');
+    this._input.value = this.getAttribute('value') || 'on';
+  }
+
+  setupEvents() {
+    this._onChange = () => {
+      this._syncing = true;
+      this.setBoolAttr('checked', this._input.checked);
+      this.removeAttribute('indeterminate');
+      this._syncing = false;
+      this._syncFormValue();
+      this.emit('nk-change', { checked: this._input.checked, value: this._input.value, name: this.name });
+      this.dispatchEvent(new Event('change', { bubbles: true }));
+    };
+    this._input.addEventListener('change', this._onChange);
+  }
+
+  teardownEvents() {
+    this._input?.removeEventListener('change', this._onChange);
+  }
+
+  onAttributeChanged() {
+    if (this._syncing || !this._input) return;
+    this._apply();
+    this._syncFormValue();
+  }
+
+  _syncFormValue() {
+    this.setFormValue(this._input.checked ? this._input.value : null, this._input.checked ? 'checked' : 'unchecked');
+    this.syncValidityFrom(this._input);
+  }
+
+  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._input?.focus(options); }
+
+  get checked() { return this._input?.checked ?? this.getBoolAttr('checked'); }
+  set checked(v) { this.setBoolAttr('checked', v); }
+  get indeterminate() { return this.getBoolAttr('indeterminate'); }
+  set indeterminate(v) { this.setBoolAttr('indeterminate', 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-check', NkCheck);
+
+export { NkCheck };

package/dist/components/nk-cmdk.js

@@ -0,0 +1,221 @@
+import { N as NkElement } from './shared/base-6gEcoatG.js';
+import { l as lockScroll, i as inertOutside, u as unlockScroll } from './shared/focus-DXrK9oLe.js';
+
+// Subsequence scoring for the command palette: every query character must
+// appear in order; consecutive hits, word starts and an early first hit score
+// higher. Returns 0 when the query does not match.
+function fuzzyScore(query, text) {
+  const q = query.trim().toLowerCase();
+  if (!q) return 1;
+  const t = text.toLowerCase();
+  let ti = 0, score = 0, streak = 0;
+  for (let qi = 0; qi < q.length; qi++) {
+    const idx = t.indexOf(q[qi], ti);
+    if (idx < 0) return 0;
+    const wordStart = idx === 0 || /[\s\-_/.]/.test(t[idx - 1]);
+    streak = idx === ti ? streak + 1 : 0;
+    score += 1 + streak * 2 + (wordStart ? 3 : 0) - Math.min(3, (idx - ti) * 0.25);
+    ti = idx + 1;
+  }
+  if (t.startsWith(q)) score += 10;
+  return Math.max(0.01, score / (1 + t.length / 40));
+}
+
+// <nk-cmdk id="palette" placeholder="Search or type a command …"></nk-cmdk>
+// palette.commands = [
+//   { group: 'Pages',   items: [{ id: 'mvp', icon: '🚀', label: 'NotionKit MVP', keywords: 'project' }] },
+//   { group: 'Actions', items: [{ id: 'theme', icon: '🌙', label: 'Toggle theme', shortcut: '⌘⇧L', action: () => … }] },
+// ];
+// → <div class="nk-cmdk-backdrop open"><div class="nk-cmdk"><div class="nk-cmdk-input-row">🔍<input><kbd>esc</kbd></div>
+//     <div class="nk-cmdk-list">…</div><div class="nk-cmdk-footer">…</div></div></div>
+// mod+K toggles (attribute `hotkey`), ↑↓ move, Enter picks (nk-command +
+// item.action), Escape / backdrop close. Fuzzy subsequence search over
+// label + keywords. Put the element directly under <body>.
+class NkCmdk extends NkElement {
+  static get observedAttributes() { return ['open', 'hotkey', 'placeholder']; }
+
+  render() {
+    this._backdrop = this.createElement('div', ['nk-cmdk-backdrop']);
+    this._backdrop.inert = true;
+    this._box = this.createElement('div', ['nk-cmdk'], { role: 'dialog', 'aria-modal': 'true', 'aria-label': 'Command palette' });
+    const row = this.createElement('div', ['nk-cmdk-input-row']);
+    const glass = document.createElement('span');
+    glass.style.fontSize = '15px';
+    glass.textContent = '🔍';
+    this._input = this.createElement('input', [], { type: 'text', autocomplete: 'off', role: 'combobox', 'aria-expanded': 'true', 'aria-autocomplete': 'list' });
+    const esc = this.createElement('kbd', ['nk-kbd']);
+    esc.textContent = 'esc';
+    row.append(glass, this._input, esc);
+    this._list = this.createElement('div', ['nk-cmdk-list'], { role: 'listbox', id: 'list' });
+    this._input.setAttribute('aria-controls', 'list');
+    this._footer = this.createElement('div', ['nk-cmdk-footer']);
+    const footerSlot = this.createElement('slot', [], { name: 'footer' });
+    footerSlot.innerHTML = '<span><kbd class="nk-kbd">↑</kbd><kbd class="nk-kbd">↓</kbd> navigate</span><span><kbd class="nk-kbd">↵</kbd> open</span><span><kbd class="nk-kbd">⌘</kbd><kbd class="nk-kbd">K</kbd> toggle</span>';
+    this._footer.appendChild(footerSlot);
+    this._box.append(row, this._list, this._footer);
+    this._backdrop.appendChild(this._box);
+    this._wrapper.appendChild(this._backdrop);
+    this._commands = [];
+    this._index = 0;
+    this._syncAttrs();
+    this._renderList();
+    this._syncOpen();
+  }
+
+  _syncAttrs() { this._input.placeholder = this.getAttribute('placeholder') || 'Search or type a command …'; }
+
+  /** Filtered, flat list in group order, best matches first within a group. */
+  results() {
+    const q = this._input?.value ?? '';
+    const out = [];
+    for (const group of this._commands) {
+      const scored = (group.items || []).map(item => ({ item, group: group.group, score: fuzzyScore(q, `${item.label} ${item.keywords || ''}`) })).filter(r => r.score > 0);
+      scored.sort((a, b) => b.score - a.score);
+      out.push(...scored);
+    }
+    return out;
+  }
+
+  _renderList() {
+    if (!this._list) return;
+    const results = this.results();
+    this._index = Math.min(this._index, Math.max(0, results.length - 1));
+    this._list.replaceChildren();
+    if (!results.length) {
+      const empty = this.createElement('div', ['nk-cmdk-empty']);
+      empty.textContent = `No results for “${this._input.value}”`;
+      this._list.appendChild(empty);
+      this._input.removeAttribute('aria-activedescendant');
+      return;
+    }
+    let lastGroup = null;
+    results.forEach((r, i) => {
+      if (r.group && r.group !== lastGroup) {
+        const g = this.createElement('div', ['nk-cmdk-group']);
+        g.textContent = r.group;
+        this._list.appendChild(g);
+        lastGroup = r.group;
+      }
+      const el = this.createElement('div', ['nk-cmdk-item'], { role: 'option', id: `opt-${i}`, 'data-index': i });
+      el.classList.toggle('selected', i === this._index);
+      el.setAttribute('aria-selected', i === this._index ? 'true' : 'false');
+      const icon = this.createElement('span', ['m-icon']);
+      icon.textContent = r.item.icon || '';
+      const label = document.createElement('span');
+      label.textContent = r.item.label;
+      el.append(icon, label);
+      if (r.item.shortcut) { const sc = this.createElement('span', ['m-shortcut']); sc.textContent = r.item.shortcut; el.appendChild(sc); }
+      this._list.appendChild(el);
+    });
+    this._input.setAttribute('aria-activedescendant', `opt-${this._index}`);
+  }
+
+  _move(dir) {
+    const n = this.results().length;
+    if (!n) return;
+    this._index = (this._index + dir + n) % n;
+    for (const el of this._list.querySelectorAll('.nk-cmdk-item')) {
+      const on = Number(el.dataset.index) === this._index;
+      el.classList.toggle('selected', on);
+      el.setAttribute('aria-selected', on ? 'true' : 'false');
+      if (on) el.scrollIntoView({ block: 'nearest' });
+    }
+    this._input.setAttribute('aria-activedescendant', `opt-${this._index}`);
+  }
+
+  pick(index = this._index) {
+    const r = this.results()[index];
+    if (!r) return;
+    const query = this._input.value;
+    this.close();
+    const ok = this.emit('nk-command', { id: r.item.id ?? r.item.label, item: r.item, query });
+    if (ok && typeof r.item.action === 'function') r.item.action(r.item);
+  }
+
+  _matchesHotkey(e) {
+    const spec = (this.getAttribute('hotkey') || 'mod+k').toLowerCase().split('+');
+    const key = spec.pop();
+    const mod = spec.includes('mod') ? (e.metaKey || e.ctrlKey) : true;
+    const shift = spec.includes('shift') ? e.shiftKey : !e.shiftKey;
+    const alt = spec.includes('alt') ? e.altKey : !e.altKey;
+    return mod && shift && alt && e.key.toLowerCase() === key;
+  }
+
+  _syncOpen() {
+    const open = this.getBoolAttr('open');
+    this._backdrop.classList.toggle('open', open);
+    this._backdrop.inert = !open;
+    if (open === this._wasOpen) return;
+    this._wasOpen = open;
+    if (open) {
+      this._returnFocus = document.activeElement;
+      this._input.value = '';
+      this._index = 0;
+      this._renderList();
+      lockScroll();
+      this._undoInert = inertOutside(this);
+      requestAnimationFrame(() => this._input.focus({ preventScroll: true }));
+    } else {
+      unlockScroll();
+      this._undoInert?.(); this._undoInert = null;
+      const back = this._returnFocus;
+      if (back && typeof back.focus === 'function' && back.isConnected) back.focus({ preventScroll: true });
+      this._returnFocus = null;
+    }
+  }
+
+  setupEvents() {
+    this._onDocKey = (e) => {
+      if (this._matchesHotkey(e)) { e.preventDefault(); this.toggle(); return; }
+      if (e.key === 'Escape' && this.getBoolAttr('open')) { e.stopPropagation(); this.close(); }
+    };
+    this._onInput = () => { this._index = 0; this._renderList(); };
+    this._onInputKey = (e) => {
+      if (e.key === 'ArrowDown') { e.preventDefault(); this._move(1); }
+      else if (e.key === 'ArrowUp') { e.preventDefault(); this._move(-1); }
+      else if (e.key === 'Enter') { e.preventDefault(); this.pick(); }
+    };
+    this._onListClick = (e) => { const el = e.target.closest('.nk-cmdk-item'); if (el) this.pick(Number(el.dataset.index)); };
+    this._onListMove = (e) => { const el = e.target.closest('.nk-cmdk-item'); if (el && Number(el.dataset.index) !== this._index) { this._index = Number(el.dataset.index); this._move(0); } };
+    this._onListDown = (e) => e.preventDefault();   // keep the input focused
+    this._onBackdrop = (e) => { if (e.target === this._backdrop) this.close(); };
+    document.addEventListener('keydown', this._onDocKey);
+    this._input.addEventListener('input', this._onInput);
+    this._input.addEventListener('keydown', this._onInputKey);
+    this._list.addEventListener('click', this._onListClick);
+    this._list.addEventListener('mousemove', this._onListMove);
+    this._list.addEventListener('mousedown', this._onListDown);
+    this._backdrop.addEventListener('click', this._onBackdrop);
+  }
+
+  teardownEvents() {
+    document.removeEventListener('keydown', this._onDocKey);
+    this._input?.removeEventListener('input', this._onInput);
+    this._input?.removeEventListener('keydown', this._onInputKey);
+    this._list?.removeEventListener('click', this._onListClick);
+    this._list?.removeEventListener('mousemove', this._onListMove);
+    this._list?.removeEventListener('mousedown', this._onListDown);
+    this._backdrop?.removeEventListener('click', this._onBackdrop);
+    if (this._wasOpen) { unlockScroll(); this._undoInert?.(); this._undoInert = null; this._wasOpen = false; }
+  }
+
+  onAttributeChanged(name) {
+    if (name === 'open') { this._syncOpen(); this.emit('nk-toggle', { open: this.getBoolAttr('open') }); }
+    else this._syncAttrs();
+  }
+
+  show() { this.setBoolAttr('open', true); }
+  close() { this.setBoolAttr('open', false); }
+  toggle() { this.setBoolAttr('open', !this.getBoolAttr('open')); }
+
+  get commands() { return this._commands; }
+  set commands(list) { this._commands = Array.isArray(list) ? list : []; this._index = 0; this._renderList(); }
+  get open() { return this.getBoolAttr('open'); }
+  set open(v) { this.setBoolAttr('open', v); }
+  get query() { return this._input?.value ?? ''; }
+  set query(v) { if (this._input) { this._input.value = v; this._index = 0; this._renderList(); } }
+}
+
+customElements.define('nk-cmdk', NkCmdk);
+
+export { NkCmdk };

package/dist/components/nk-code.js

@@ -0,0 +1,66 @@
+import { N as NkElement } from './shared/base-6gEcoatG.js';
+
+// Minimal HTML highlighter emitting the .tag / .attr hooks .nk-code styles.
+// Mirrors tools/highlight.mjs in the NotionKit foundation – no third-party
+// highlighter, no other languages. Anything that is not HTML is escaped only.
+function escapeHtml(s) {
+  return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+}
+
+function highlightHtml(source) {
+  return escapeHtml(source).replace(/&lt;(\/?)([a-zA-Z][\w-]*)([^&]*?)(\/?)&gt;/g, (m, close, tag, attrs, self) => {
+    const attrHtml = attrs.replace(/([\w-]+)(=)("[^"]*"|'[^']*')?/g,
+      (a, name, eq, val) => `<span class="attr">${name}</span>${eq}${val ?? ''}`);
+    return `&lt;${close}<span class="tag">${tag}</span>${attrHtml}${self}&gt;`;
+  });
+}
+
+// <nk-code lang="html">&lt;div class="nk-btn"&gt;…</nk-code>
+// The block keeps whatever whitespace it is given (white-space: pre). Text
+// content is slotted as-is; add `highlight` to colour HTML tags/attributes,
+// which copies the text into the shadow tree (light DOM is then ignored).
+class NkCode extends NkElement {
+  static get observedAttributes() { return ['lang', 'highlight']; }
+  static get observesLightDom() { return true; }
+
+  render() {
+    this._box = this.createElement('div', ['nk-code']);
+    this._lang = this.createElement('span', ['lang']);
+    this._slot = document.createElement('slot');
+    this._pre = this.createElement('span', ['hl']);
+    this._box.appendChild(this._lang);
+    this._box.appendChild(this._slot);
+    this._box.appendChild(this._pre);
+    this._wrapper.appendChild(this._box);
+    this._sync();
+    this.projectLightDom();
+  }
+
+  onAttributeChanged() { this._sync(); this.projectLightDom(); }
+
+  _sync() {
+    if (!this._lang) return;
+    const lang = this.getAttribute('lang');
+    this._lang.textContent = lang || '';
+    this._lang.style.display = lang ? '' : 'none';
+  }
+
+  projectLightDom() {
+    if (!this._pre) return;
+    const highlight = this.hasAttribute('highlight');
+    this._slot.style.display = highlight ? 'none' : '';
+    this._pre.style.display = highlight ? '' : 'none';
+    if (!highlight) return;
+    const text = this.textContent.replace(/^\n/, '');
+    if (text === this._lastText) return;
+    this._lastText = text;
+    this._pre.innerHTML = highlightHtml(text);
+  }
+
+  get lang() { return this.getAttribute('lang'); }
+  set lang(v) { v == null ? this.removeAttribute('lang') : this.setAttribute('lang', v); }
+}
+
+customElements.define('nk-code', NkCode);
+
+export { NkCode };

package/dist/components/nk-comment.js

@@ -0,0 +1,41 @@
+import { N as NkElement } from './shared/base-6gEcoatG.js';
+
+// <nk-comment author="Sara Lindt" time="1 hr ago" avatar="SL" color="#448361">The board view feels close.</nk-comment>
+// → <div class="nk-comment"><span class="mini-avatar">SL</span><div><div class="c-head"><b>Sara Lindt</b> · 1 hr ago</div><div class="c-body">…</div></div></div>
+// slot="head" adds content after the name (e.g. an <nk-tag>).
+class NkComment extends NkElement {
+  static get observedAttributes() { return ['author', 'time', 'avatar', 'color']; }
+
+  render() {
+    const box = this.createElement('div', ['nk-comment']);
+    this._avatar = this.createElement('span', ['mini-avatar']);
+    const avatarSlot = this.createElement('slot', [], { name: 'avatar' });
+    avatarSlot.appendChild(this._avatar);
+    const text = document.createElement('div');
+    this._head = this.createElement('div', ['c-head']);
+    this._author = document.createElement('b');
+    this._time = document.createTextNode('');
+    this._head.append(this._author, this.createElement('slot', [], { name: 'head' }), this._time);
+    const body = this.createElement('div', ['c-body']);
+    body.appendChild(document.createElement('slot'));
+    text.append(this._head, body);
+    box.append(avatarSlot, text);
+    this._wrapper.appendChild(box);
+    this._sync();
+  }
+
+  _sync() {
+    const author = this.getAttribute('author') || '';
+    this._author.textContent = author;
+    const time = this.getAttribute('time');
+    this._time.data = time ? ` · ${time}` : '';
+    this._avatar.textContent = this.getAttribute('avatar') || author.split(/\s+/).map(w => w[0]).join('').slice(0, 2).toUpperCase();
+    this._avatar.style.background = this.getAttribute('color') || 'var(--nk-text-tertiary)';
+  }
+
+  onAttributeChanged() { this._sync(); }
+}
+
+customElements.define('nk-comment', NkComment);
+
+export { NkComment };

package/dist/components/nk-comments.js

@@ -0,0 +1,57 @@
+import { N as NkElement } from './shared/base-6gEcoatG.js';
+
+// <nk-comments placeholder="Comment …" send-label="Send">
+//   <nk-comment …>…</nk-comment>
+// </nk-comments>
+// → <div class="nk-comments">…<div class="nk-comment-input"><input class="nk-input"><button class="nk-btn primary small">Send</button></div></div>
+// Enter or the button fires nk-submit { text } and clears the field.
+class NkComments extends NkElement {
+  static get observedAttributes() { return ['placeholder', 'send-label', 'no-input', 'disabled']; }
+
+  render() {
+    const box = this.createElement('div', ['nk-comments']);
+    box.appendChild(document.createElement('slot'));
+    this._row = this.createElement('div', ['nk-comment-input']);
+    this._input = this.createElement('input', ['nk-input'], { type: 'text', 'aria-label': 'Comment' });
+    this._btn = this.createElement('button', ['nk-btn', 'primary', 'small'], { type: 'button' });
+    this._row.append(this._input, this._btn);
+    box.appendChild(this._row);
+    this._wrapper.appendChild(box);
+    this._sync();
+  }
+
+  _sync() {
+    this._input.placeholder = this.getAttribute('placeholder') || 'Comment …';
+    this._btn.textContent = this.getAttribute('send-label') || 'Send';
+    this._row.style.display = this.getBoolAttr('no-input') ? 'none' : '';
+    this._input.disabled = this._btn.disabled = this.getBoolAttr('disabled');
+  }
+
+  setupEvents() {
+    this._onSend = () => this.submit();
+    this._onKey = (e) => { if (e.key === 'Enter') { e.preventDefault(); this.submit(); } };
+    this._btn.addEventListener('click', this._onSend);
+    this._input.addEventListener('keydown', this._onKey);
+  }
+
+  teardownEvents() {
+    this._btn?.removeEventListener('click', this._onSend);
+    this._input?.removeEventListener('keydown', this._onKey);
+  }
+
+  submit() {
+    const text = this._input.value.trim();
+    if (!text) return;
+    const ok = this.emit('nk-submit', { text });
+    if (ok) this._input.value = '';
+  }
+
+  onAttributeChanged() { this._sync(); }
+  focus(o) { this._input?.focus(o); }
+  get value() { return this._input?.value ?? ''; }
+  set value(v) { if (this._input) this._input.value = v ?? ''; }
+}
+
+customElements.define('nk-comments', NkComments);
+
+export { NkComments };

package/dist/components/nk-danger-zone.js

@@ -0,0 +1,27 @@
+import { N as NkElement } from './shared/base-6gEcoatG.js';
+
+// <nk-danger-zone title="Danger zone">…</nk-danger-zone>
+// → <div class="nk-danger-zone"><div class="dz-title">Danger zone</div>…</div>
+class NkDangerZone extends NkElement {
+  static get observedAttributes() { return ['title']; }
+
+  render() {
+    const box = this.createElement('div', ['nk-danger-zone']);
+    this._title = this.createElement('div', ['dz-title']);
+    box.appendChild(this._title);
+    box.appendChild(document.createElement('slot'));
+    this._wrapper.appendChild(box);
+    this._sync();
+  }
+
+  _sync() {
+    const t = this.getAttribute('title');
+    this._title.textContent = t || '';
+    this._title.style.display = t ? '' : 'none';
+  }
+  onAttributeChanged() { this._sync(); }
+}
+
+customElements.define('nk-danger-zone', NkDangerZone);
+
+export { NkDangerZone };