@jungherz-de/notionkit-elements 1.0.0

package/dist/components/nk-mention.js

@@ -0,0 +1,31 @@
+import { N as NkElement } from './shared/base-6gEcoatG.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 };

package/dist/components/nk-menu-item.js

@@ -0,0 +1,68 @@
+import { N as NkElement } from './shared/base-6gEcoatG.js';
+
+// <nk-menu-item icon="✏️" shortcut="⌘E" value="rename">Rename</nk-menu-item>
+// <nk-menu-item type="separator"></nk-menu-item>   <nk-menu-item type="label">Danger</nk-menu-item>
+// <nk-menu-item icon="🗑️" danger value="delete">Delete</nk-menu-item>
+// → <div class="nk-menu-item danger"><span class="m-icon">🗑️</span>Delete<span class="m-shortcut">…</span></div>
+class NkMenuItem extends NkElement {
+  static get observedAttributes() { return ['icon', 'shortcut', 'danger', 'value', 'type', 'disabled']; }
+
+  render() { this._build(); }
+
+  _build() {
+    const type = this.getAttribute('type');
+    let el;
+    if (type === 'separator') {
+      el = this.createElement('div', ['nk-menu-sep'], { role: 'separator' });
+    } else if (type === 'label') {
+      el = this.createElement('div', ['nk-menu-label']);
+      el.appendChild(document.createElement('slot'));
+    } else {
+      el = this.createElement('div', ['nk-menu-item'], { role: 'menuitem', tabindex: '-1' });
+      this._icon = this.createElement('span', ['m-icon']);
+      const iconSlot = this.createElement('slot', [], { name: 'icon' });
+      iconSlot.appendChild(this._icon);
+      this._shortcut = this.createElement('span', ['m-shortcut']);
+      el.append(iconSlot, document.createElement('slot'), this._shortcut);
+    }
+    if (this._el) { this._el.removeEventListener('click', this._onClick); this._el.replaceWith(el); } else this._wrapper.appendChild(el);
+    this._el = el;
+    if (this._onClick) el.addEventListener('click', this._onClick);
+    this._sync();
+  }
+
+  _sync() {
+    if (!this._el.classList.contains('nk-menu-item')) return;
+    const icon = this.getAttribute('icon');
+    this._icon.textContent = icon || '';
+    this._icon.style.display = icon ? '' : 'none';
+    const sc = this.getAttribute('shortcut');
+    this._shortcut.textContent = sc || '';
+    this._shortcut.style.display = sc ? '' : 'none';
+    this._el.classList.toggle('danger', this.getBoolAttr('danger'));
+    this._el.setAttribute('aria-disabled', this.getBoolAttr('disabled') ? 'true' : 'false');
+  }
+
+  setupEvents() {
+    this._onClick = () => this.select();
+    this._el.addEventListener('click', this._onClick);
+  }
+
+  teardownEvents() { this._el?.removeEventListener('click', this._onClick); }
+
+  select() {
+    if (!this._el.classList.contains('nk-menu-item') || this.getBoolAttr('disabled')) return;
+    this.emit('nk-select', { value: this.value, label: this.textContent.trim(), item: this });
+  }
+
+  onAttributeChanged(name) { name === 'type' ? this._build() : this._sync(); }
+  focus(o) { this._el?.focus(o); }
+  get selectable() { return this._el?.classList.contains('nk-menu-item') && !this.getBoolAttr('disabled'); }
+
+  get value() { return this.getAttribute('value') ?? this.textContent.trim(); }
+  set value(v) { this.setAttribute('value', v); }
+}
+
+customElements.define('nk-menu-item', NkMenuItem);
+
+export { NkMenuItem };

package/dist/components/nk-menu.js

@@ -0,0 +1,45 @@
+import { N as NkElement } from './shared/base-6gEcoatG.js';
+
+// <nk-menu>
+//   <nk-menu-item type="label">Page</nk-menu-item>
+//   <nk-menu-item icon="✏️" shortcut="⌘E" value="rename">Rename</nk-menu-item>
+//   <nk-menu-item type="separator"></nk-menu-item>
+//   <nk-menu-item icon="🗑️" danger value="delete">Delete</nk-menu-item>
+// </nk-menu>
+// → <div class="nk-pop nk-menu" role="menu">…</div>
+// ↑↓ move between items, Enter selects, nk-select bubbles from the item.
+class NkMenu extends NkElement {
+  render() {
+    this._box = this.createElement('div', ['nk-pop', 'nk-menu'], { role: 'menu' });
+    this._box.appendChild(document.createElement('slot'));
+    this._wrapper.appendChild(this._box);
+  }
+
+  get items() { return [...this.querySelectorAll(':scope > nk-menu-item')].filter(i => i.selectable); }
+
+  setupEvents() {
+    this._onKey = (e) => {
+      const dir = { ArrowDown: 1, ArrowUp: -1 }[e.key];
+      const current = e.target.closest?.('nk-menu-item');
+      const items = this.items;
+      if (!items.length) return;
+      if (dir) {
+        e.preventDefault();
+        const i = items.indexOf(current);
+        items[(i + dir + items.length) % items.length].focus();
+      } else if ((e.key === 'Enter' || e.key === ' ') && current) {
+        e.preventDefault(); current.select();
+      }
+    };
+    this.addEventListener('keydown', this._onKey);
+  }
+
+  teardownEvents() { this.removeEventListener('keydown', this._onKey); }
+
+  /** Focuses the first item (called by a popover when it opens). */
+  focusFirst() { this.items[0]?.focus(); }
+}
+
+customElements.define('nk-menu', NkMenu);
+
+export { NkMenu };

package/dist/components/nk-modal.js

@@ -0,0 +1,166 @@
+import { N as NkElement } from './shared/base-6gEcoatG.js';
+import { l as lockScroll, i as inertOutside, f as firstFocusable, u as unlockScroll } from './shared/focus-DXrK9oLe.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/dist/components/nk-model-card.js

@@ -0,0 +1,89 @@
+import { a as NkFormElement } from './shared/base-6gEcoatG.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/dist/components/nk-page-actions.js

@@ -0,0 +1,15 @@
+import { N as NkElement } from './shared/base-6gEcoatG.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/dist/components/nk-page-cover.js

@@ -0,0 +1,35 @@
+import { N as NkElement } from './shared/base-6gEcoatG.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/dist/components/nk-page-title.js

@@ -0,0 +1,71 @@
+import { N as NkElement } from './shared/base-6gEcoatG.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/dist/components/nk-page.js

@@ -0,0 +1,71 @@
+import { N as NkElement } from './shared/base-6gEcoatG.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 };