@jungherz-de/notionkit-elements 1.0.0

package/src/components/overlays/nk-modal.js

@@ -0,0 +1,165 @@
+import { NkElement } from '../../base.js';
+import { lockScroll, unlockScroll, inertOutside, firstFocusable } from '../../util/focus.js';
+
+// <nk-modal id="settings">
+//   <nk-settings-user slot="user" name="…" mail="…"></nk-settings-user>
+//   <nk-settings-pane name="profile" group="Account" icon="👤" label="My profile" title="My profile" active>…</nk-settings-pane>
+//   <nk-settings-pane name="members" group="Workspace" icon="👥" label="Members" title="Members">…</nk-settings-pane>
+// </nk-modal>
+// → <div class="nk-modal-backdrop open"><div class="nk-modal" role="dialog">
+//     <nav class="nk-settings-nav">…user… section labels + tree rows…</nav>
+//     <div class="nk-settings-content">…panes…</div></div></div>
+//
+// The modal renders the nav rows itself from the panes' label/icon/group, so
+// `.nk-settings-nav .nk-tree-item` and the 860px icon-rail rules match with
+// no JS breakpoint. Escape and the backdrop close it; focus moves in and
+// back out; the page behind is scroll-locked and inert. Put the element
+// directly under <body>: a transformed ancestor would trap the fixed backdrop.
+class NkModal extends NkElement {
+  static get observedAttributes() { return ['open', 'pane']; }
+
+  render() {
+    this._backdrop = this.createElement('div', ['nk-modal-backdrop']);
+    this._backdrop.inert = true;
+    this._box = this.createElement('div', ['nk-modal'], { role: 'dialog', 'aria-modal': 'true', tabindex: '-1' });
+    this._nav = this.createElement('nav', ['nk-settings-nav'], { 'aria-label': 'Settings' });
+    this._nav.appendChild(this.createElement('slot', [], { name: 'user' }));
+    this._rows = document.createElement('div');
+    this._nav.appendChild(this._rows);
+    this._nav.appendChild(this.createElement('slot', [], { name: 'nav' }));
+    this._content = this.createElement('div', ['nk-settings-content']);
+    this._slot = document.createElement('slot');
+    this._content.appendChild(this._slot);
+    this._box.append(this._nav, this._content);
+    this._backdrop.appendChild(this._box);
+    this._wrapper.appendChild(this._backdrop);
+    this._syncOpen();
+    this.requestNav();
+  }
+
+  get panes() { return [...this.querySelectorAll(':scope > nk-settings-pane')]; }
+
+  /** Rebuilds the nav from the panes (debounced – panes upgrade after the modal). */
+  requestNav() {
+    if (this._navQueued) return;
+    this._navQueued = true;
+    queueMicrotask(() => { this._navQueued = false; this._buildNav(); });
+  }
+
+  _buildNav() {
+    if (!this._rows) return;
+    const panes = this.panes;
+    const labelled = panes.filter(p => p.getAttribute('label'));
+    this._rows.replaceChildren();
+    this._nav.style.display = (labelled.length || this.querySelector(':scope > [slot="nav"], :scope > [slot="user"]')) ? '' : 'none';
+    let lastGroup = null;
+    for (const pane of labelled) {
+      const group = pane.getAttribute('group');
+      if (group && group !== lastGroup) {
+        const label = this.createElement('div', ['nk-section-label']);
+        label.textContent = group;
+        this._rows.appendChild(label);
+        lastGroup = group;
+      }
+      const row = this.createElement('div', ['nk-tree-item'], { role: 'tab', tabindex: '0', 'data-pane': pane.name });
+      const icon = this.createElement('span', ['icon']);
+      icon.textContent = pane.getAttribute('icon') || '';
+      const text = this.createElement('span', ['label']);
+      text.textContent = pane.getAttribute('label');
+      row.append(icon, text);
+      this._rows.appendChild(row);
+    }
+    this._syncActive();
+  }
+
+  /** Marks the active pane and its nav row without rebuilding the rows (keeps focus). */
+  _syncActive() {
+    const panes = this.panes;
+    let current = this.getAttribute('pane');
+    if (!panes.some(p => p.name === current)) current = (panes.find(p => p.hasAttribute('active')) || panes[0])?.name ?? null;
+    for (const row of this._rows.querySelectorAll('[data-pane]')) {
+      const on = row.dataset.pane === current;
+      row.classList.toggle('active', on);
+      row.setAttribute('aria-selected', on ? 'true' : 'false');
+    }
+    for (const pane of panes) pane.active = pane.name === current;
+    this._current = current;
+  }
+
+  _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;
+      lockScroll();
+      this._undoInert = inertOutside(this);
+      requestAnimationFrame(() => {
+        const target = this._rows.querySelector('.nk-tree-item.active') || firstFocusable(this) || this._box;
+        target.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._onBackdrop = (e) => { if (e.target === this._backdrop) this.close(); };
+    this._onKey = (e) => { if (e.key === 'Escape' && this.getBoolAttr('open')) { e.stopPropagation(); this.close(); } };
+    this._onNavClick = (e) => { const row = e.target.closest('[data-pane]'); if (row) { row.focus(); this.pane = row.dataset.pane; } };
+    this._onNavKey = (e) => {
+      const row = e.target.closest?.('[data-pane]');
+      if (!row) return;
+      if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); this.pane = row.dataset.pane; return; }
+      const dir = { ArrowDown: 1, ArrowUp: -1 }[e.key];
+      if (!dir) return;
+      const rows = [...this._rows.querySelectorAll('[data-pane]')];
+      const next = rows[(rows.indexOf(row) + dir + rows.length) % rows.length];
+      e.preventDefault(); next.focus(); this.pane = next.dataset.pane;
+    };
+    this._onSlot = () => this.requestNav();
+    this._backdrop.addEventListener('click', this._onBackdrop);
+    document.addEventListener('keydown', this._onKey);
+    this._rows.addEventListener('click', this._onNavClick);
+    this._rows.addEventListener('keydown', this._onNavKey);
+    this._slot.addEventListener('slotchange', this._onSlot);
+  }
+
+  teardownEvents() {
+    this._backdrop?.removeEventListener('click', this._onBackdrop);
+    document.removeEventListener('keydown', this._onKey);
+    this._rows?.removeEventListener('click', this._onNavClick);
+    this._rows?.removeEventListener('keydown', this._onNavKey);
+    this._slot?.removeEventListener('slotchange', this._onSlot);
+    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 if (name === 'pane') {
+      const before = this._current;
+      this._syncActive();
+      if (this._current !== before) this.emit('nk-select', { value: this._current, label: this.panes.find(p => p.name === this._current)?.getAttribute('label') ?? this._current });
+    }
+  }
+
+  show(pane) { if (pane) this.setAttribute('pane', pane); 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); }
+  get pane() { return this._current ?? this.getAttribute('pane'); }
+  set pane(v) { this.setAttribute('pane', v); }
+}
+
+customElements.define('nk-modal', NkModal);
+export { NkModal };

package/src/components/overlays/nk-pop.js

@@ -0,0 +1,89 @@
+import { NkElement } from '../../base.js';
+
+// <nk-pop placement="bottom-start">
+//   <nk-btn slot="trigger" variant="secondary">Options</nk-btn>
+//   <nk-menu>…</nk-menu>
+// </nk-pop>
+// The trigger stays in the light DOM; a click on it toggles `open`, outside
+// clicks and Escape close. Content is wrapped in `.nk-pop` unless it brings
+// its own surface (nk-menu, nk-emoji-picker) or `bare` is set. The only
+// styling here is positioning – the surface look is the stylesheet's.
+const popSheet = new CSSStyleSheet();
+popSheet.replaceSync(`
+  .nk-pop-anchor { position: relative; display: inline-block; }
+  .nk-pop-float { display: none; position: absolute; z-index: 50; top: 100%; left: 0; margin-top: 4px; }
+  :host([open]) .nk-pop-float { display: block; }
+  :host([placement="bottom-end"]) .nk-pop-float { left: auto; right: 0; }
+  :host([placement="top-start"]) .nk-pop-float { top: auto; bottom: 100%; margin: 0 0 4px; }
+  :host([placement="top-end"]) .nk-pop-float { top: auto; bottom: 100%; left: auto; right: 0; margin: 0 0 4px; }
+`);
+const OWN_SURFACE = new Set(['nk-menu', 'nk-emoji-picker']);
+
+class NkPop extends NkElement {
+  static get hostStyles() { return popSheet; }
+  static get observedAttributes() { return ['open', 'placement', 'bare']; }
+
+  render() {
+    const anchor = this.createElement('div', ['nk-pop-anchor']);
+    this._triggerSlot = this.createElement('slot', [], { name: 'trigger' });
+    this._float = this.createElement('div', ['nk-pop-float']);
+    this._surface = this.createElement('div', ['nk-pop']);
+    this._slot = document.createElement('slot');
+    this._surface.appendChild(this._slot);
+    this._float.appendChild(this._surface);
+    anchor.append(this._triggerSlot, this._float);
+    this._wrapper.appendChild(anchor);
+    this._syncSurface();
+  }
+
+  _syncSurface() {
+    const bare = this.getBoolAttr('bare') || this._slot.assignedElements().some(el => OWN_SURFACE.has(el.localName));
+    this._surface.className = bare ? '' : 'nk-pop';
+  }
+
+  setupEvents() {
+    this._onTrigger = (e) => {
+      if (!e.composedPath().some(n => n instanceof Element && n.getAttribute?.('slot') === 'trigger')) return;
+      e.stopPropagation();
+      this.toggle();
+    };
+    this._onDocClick = (e) => { if (this.getBoolAttr('open') && !e.composedPath().includes(this)) this.close(); };
+    this._onKey = (e) => { if (e.key === 'Escape' && this.getBoolAttr('open')) this.close(); };
+    this._onSelect = (e) => { if (e.target !== this) this.close(); };
+    this._onSlot = () => this._syncSurface();
+    this.addEventListener('click', this._onTrigger);
+    document.addEventListener('click', this._onDocClick);
+    document.addEventListener('keydown', this._onKey);
+    this._float.addEventListener('nk-select', this._onSelect);
+    this._slot.addEventListener('slotchange', this._onSlot);
+  }
+
+  teardownEvents() {
+    this.removeEventListener('click', this._onTrigger);
+    document.removeEventListener('click', this._onDocClick);
+    document.removeEventListener('keydown', this._onKey);
+    this._float?.removeEventListener('nk-select', this._onSelect);
+    this._slot?.removeEventListener('slotchange', this._onSlot);
+  }
+
+  onAttributeChanged(name) {
+    if (name === 'bare') this._syncSurface();
+    if (name === 'open') {
+      const open = this.getBoolAttr('open');
+      for (const el of this._triggerSlot.assignedElements()) el.setAttribute('aria-expanded', open ? 'true' : 'false');
+      this.emit('nk-toggle', { 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); }
+  get placement() { return this.getAttribute('placement') || 'bottom-start'; }
+  set placement(v) { this.setAttribute('placement', v); }
+}
+
+customElements.define('nk-pop', NkPop);
+export { NkPop };

package/src/components/overlays/nk-settings-pane.js

@@ -0,0 +1,39 @@
+import { NkElement } from '../../base.js';
+
+// <nk-settings-pane name="profile" label="My profile" icon="👤" group="Account" title="My profile" active>…</nk-settings-pane>
+// → <section class="nk-settings-pane active"><h2>My profile</h2>…</section>
+// `label`, `icon` and `group` feed the nav that <nk-modal> renders; `title`
+// renders the pane heading (child-combinator rule, so it lives here). Slotted
+// <h2>/<h3> are styled by their twins.
+class NkSettingsPane extends NkElement {
+  static get observedAttributes() { return ['name', 'label', 'icon', 'group', 'title', 'active']; }
+
+  render() {
+    this._section = this.createElement('section', ['nk-settings-pane'], { role: 'tabpanel' });
+    this._h2 = document.createElement('h2');
+    this._section.appendChild(this._h2);
+    this._section.appendChild(document.createElement('slot'));
+    this._wrapper.appendChild(this._section);
+    this._sync();
+  }
+
+  _sync() {
+    const title = this.getAttribute('title');
+    this._h2.textContent = title || '';
+    this._h2.style.display = title ? '' : 'none';
+    this._section.classList.toggle('active', this.getBoolAttr('active'));
+    this._section.setAttribute('aria-label', this.getAttribute('label') || title || this.getAttribute('name') || '');
+  }
+
+  onAttributeChanged(name) {
+    this._sync();
+    if (['label', 'icon', 'group', 'name'].includes(name)) this.closest('nk-modal')?.requestNav?.();
+  }
+
+  get name() { return this.getAttribute('name') ?? this.getAttribute('label') ?? ''; }
+  get active() { return this.getBoolAttr('active'); }
+  set active(v) { this.setBoolAttr('active', v); }
+}
+
+customElements.define('nk-settings-pane', NkSettingsPane);
+export { NkSettingsPane };

package/src/components/overlays/nk-settings-user.js

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

@@ -0,0 +1,50 @@
+import { NkElement } from '../../base.js';
+
+// <nk-toast id="toast"></nk-toast>   …   toast.show('Saved');
+// → <div class="nk-toast show">✓ Saved</div>
+// One node, bottom-centred, auto-hides after `duration` ms (default 2200).
+class NkToast extends NkElement {
+  static get observedAttributes() { return ['open', 'duration', 'icon']; }
+
+  render() {
+    this._box = this.createElement('div', ['nk-toast'], { role: 'status', 'aria-live': 'polite' });
+    this._icon = document.createElement('span');
+    this._msg = document.createElement('span');
+    this._box.append(this._icon, this._msg, document.createElement('slot'));
+    this._wrapper.appendChild(this._box);
+    this._sync();
+  }
+
+  _sync() {
+    this._box.classList.toggle('show', this.getBoolAttr('open'));
+    const icon = this.getAttribute('icon') ?? '✓';
+    this._icon.textContent = icon;
+    this._icon.style.display = icon ? '' : 'none';
+  }
+
+  /** Shows `message` (or the slotted content when omitted) and hides it again after `duration`. */
+  show(message, { duration } = {}) {
+    if (message !== undefined) this._msg.textContent = message;
+    clearTimeout(this._timer);
+    this.setBoolAttr('open', true);
+    const ms = duration ?? Number(this.getAttribute('duration')) ?? 2200;
+    if (ms > 0) this._timer = setTimeout(() => this.close(), ms || 2200);
+  }
+
+  close() { clearTimeout(this._timer); this.setBoolAttr('open', false); }
+
+  onAttributeChanged(name) {
+    this._sync();
+    if (name === 'open') this.emit('nk-toggle', { open: this.getBoolAttr('open') });
+  }
+
+  disconnectedCallback() { super.disconnectedCallback(); clearTimeout(this._timer); }
+
+  get open() { return this.getBoolAttr('open'); }
+  set open(v) { this.setBoolAttr('open', v); }
+  get message() { return this._msg?.textContent ?? ''; }
+  set message(v) { if (this._msg) this._msg.textContent = v; }
+}
+
+customElements.define('nk-toast', NkToast);
+export { NkToast };

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

@@ -0,0 +1,34 @@
+import { NkElement } from '../../base.js';
+
+// <nk-avatar-group more="+2">
+//   <span class="mini-avatar" style="background:#448361">SL</span>…
+// </nk-avatar-group>
+// → <div class="nk-avatar-group">…<span class="mini-avatar more">+2</span></div>
+// The avatars stay in the light DOM (::slotted twins size and overlap them);
+// the "more" bubble is rendered here from the attribute.
+class NkAvatarGroup extends NkElement {
+  static get observedAttributes() { return ['more']; }
+
+  render() {
+    const box = this.createElement('div', ['nk-avatar-group']);
+    box.appendChild(document.createElement('slot'));
+    this._more = this.createElement('span', ['mini-avatar', 'more']);
+    box.appendChild(this._more);
+    this._wrapper.appendChild(box);
+    this._sync();
+  }
+
+  _sync() {
+    const more = this.getAttribute('more');
+    this._more.textContent = more || '';
+    this._more.style.display = more ? '' : 'none';
+  }
+
+  onAttributeChanged() { this._sync(); }
+
+  get more() { return this.getAttribute('more'); }
+  set more(v) { v == null ? this.removeAttribute('more') : this.setAttribute('more', v); }
+}
+
+customElements.define('nk-avatar-group', NkAvatarGroup);
+export { NkAvatarGroup };

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

@@ -0,0 +1,29 @@
+import { NkElement } from '../../base.js';
+
+// <nk-banner variant="info">ℹ️ <span>Text</span><span slot="action">Open</span></nk-banner>
+// → <div class="nk-banner info">…<span class="b-action">Open</span></div>
+const VARIANTS = ['info', 'success', 'warning'];
+
+class NkBanner extends NkElement {
+  static get observedAttributes() { return ['variant']; }
+
+  render() {
+    this._box = this.createElement('div', this._classes(), { role: 'status' });
+    this._box.appendChild(document.createElement('slot'));
+    this._box.appendChild(this.createElement('slot', [], { name: 'action' }));
+    this._wrapper.appendChild(this._box);
+  }
+
+  _classes() {
+    const v = this.getAttribute('variant');
+    return ['nk-banner', ...(VARIANTS.includes(v) ? [v] : [])];
+  }
+
+  onAttributeChanged() { if (this._box) this._box.className = this._classes().join(' '); }
+
+  get variant() { return this.getAttribute('variant'); }
+  set variant(v) { v ? this.setAttribute('variant', v) : this.removeAttribute('variant'); }
+}
+
+customElements.define('nk-banner', NkBanner);
+export { NkBanner };

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

@@ -0,0 +1,34 @@
+import { NkElement } from '../../base.js';
+
+// <nk-block-host handle><p>Editable content lives here.</p></nk-block-host>
+// → <div class="nk-block-host"><span class="nk-block-handle">⠿</span>…</div>
+// The optical shell for editor content (hover wash, focus ring, drop target).
+// Mount an editor into the light DOM; <nk-editor> (v1.1) does that for TipTap.
+class NkBlockHost extends NkElement {
+  static get observedAttributes() { return ['handle', 'drop-target']; }
+
+  render() {
+    this._box = this.createElement('div', ['nk-block-host']);
+    this._handle = this.createElement('span', ['nk-block-handle'], { 'aria-hidden': 'true' });
+    this._handle.textContent = '⠿';
+    this._box.appendChild(this._handle);
+    this._box.appendChild(document.createElement('slot'));
+    this._wrapper.appendChild(this._box);
+    this._sync();
+  }
+
+  _sync() {
+    this._handle.style.display = this.getBoolAttr('handle') ? '' : 'none';
+    this._box.classList.toggle('nk-drop-target', this.getBoolAttr('drop-target'));
+  }
+
+  onAttributeChanged() { this._sync(); }
+
+  get handle() { return this.getBoolAttr('handle'); }
+  set handle(v) { this.setBoolAttr('handle', v); }
+  get dropTarget() { return this.getBoolAttr('drop-target'); }
+  set dropTarget(v) { this.setBoolAttr('drop-target', v); }
+}
+
+customElements.define('nk-block-host', NkBlockHost);
+export { NkBlockHost };

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

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

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

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

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

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

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

@@ -0,0 +1,30 @@
+import { NkElement } from '../../base.js';
+
+// <nk-mention type="person"><span slot="avatar" class="mini-avatar" style="background:#448361">SL</span>Sara Lindt</nk-mention>
+// <nk-mention type="page">📄 Onboarding</nk-mention>   <nk-mention type="date">📅 May 20</nk-mention>
+// → <span class="nk-mention person">…</span>
+const TYPES = ['person', 'page', 'date'];
+
+class NkMention extends NkElement {
+  static get observedAttributes() { return ['type']; }
+
+  render() {
+    this._box = this.createElement('span', this._classes());
+    this._box.appendChild(this.createElement('slot', [], { name: 'avatar' }));
+    this._box.appendChild(document.createElement('slot'));
+    this._wrapper.appendChild(this._box);
+  }
+
+  _classes() {
+    const t = this.getAttribute('type');
+    return ['nk-mention', ...(TYPES.includes(t) ? [t] : [])];
+  }
+
+  onAttributeChanged() { if (this._box) this._box.className = this._classes().join(' '); }
+
+  get type() { return this.getAttribute('type'); }
+  set type(v) { v ? this.setAttribute('type', v) : this.removeAttribute('type'); }
+}
+
+customElements.define('nk-mention', NkMention);
+export { NkMention };