@jungherz-de/notionkit-elements 1.5.3 → 1.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jungherz-de/notionkit-elements",
-  "version": "1.5.3",
+  "version": "1.6.0",
   "description": "Vanilla JavaScript Web Components wrapping the NotionKit CSS foundation – <nk-*> custom elements with Shadow DOM, automatic theme sync and native form participation.",
   "license": "MIT",
   "author": "Jungherz GmbH <info@jungherz.com> (https://www.jungherz.com)",
@@ -20,6 +20,7 @@
       "import": "./dist/notionkit-elements.esm.js",
       "default": "./dist/notionkit-elements.js"
     },
+    "./base.js": "./dist/components/base.js",
     "./components/*.js": "./dist/components/*.js",
     "./package.json": "./package.json"
   },
@@ -58,10 +59,10 @@
     "dark-mode"
   ],
   "peerDependencies": {
-    "@jungherz-de/notionkit": ">=1.5.3"
+    "@jungherz-de/notionkit": ">=1.6.0"
   },
   "devDependencies": {
-    "@jungherz-de/notionkit": "^1.5.3",
+    "@jungherz-de/notionkit": "^1.6.0",
     "@rollup/plugin-node-resolve": "^15.0.0",
     "@rollup/plugin-terser": "^0.4.0",
     "rollup": "^4.0.0",

package/src/components/content/nk-progress.js

@@ -1,9 +1,10 @@
 import { NkElement } from '../../base.js';
 
 // <nk-progress value="72" label="72%"></nk-progress>
+// <nk-progress value="72" label="72 %" wide></nk-progress>   → fills its row, the label stays beside it
 // The bar is `.nk-progress > i` — a child combinator, so both nodes live here.
 class NkProgress extends NkElement {
-  static get observedAttributes() { return ['value', 'max', 'label']; }
+  static get observedAttributes() { return ['value', 'max', 'label', 'wide']; }
 
   render() {
     this._bar = this.createElement('span', ['nk-progress'], { role: 'progressbar' });
@@ -22,6 +23,7 @@ class NkProgress extends NkElement {
     const max = Number(this.getAttribute('max')) || 100;
     const value = Math.min(max, Math.max(0, Number(this.getAttribute('value')) || 0));
     this._fill.style.width = `${(value / max) * 100}%`;
+    this._bar.classList.toggle('wide', this.getBoolAttr('wide'));
     this._bar.setAttribute('aria-valuenow', value);
     this._bar.setAttribute('aria-valuemin', 0);
     this._bar.setAttribute('aria-valuemax', max);

package/src/components/data/nk-ai-msg.js

@@ -5,16 +5,18 @@ import { NkElement } from '../../base.js';
 //   Two tasks are open …
 //   <button slot="actions" value="copy">📋 Copy</button><button slot="actions" value="retry">↻ Rephrase</button>
 // </nk-ai-msg>
+// <nk-ai-msg role="user" bubble>What is still open?</nk-ai-msg>   → a grey bubble on the right, as in Notion's AI chat
 // → <div class="nk-ai-msg user"><span class="mini-avatar">MK</span><div class="a-body"><div class="a-name">You</div>…<div class="nk-ai-actions">…</div></div></div>
 // Action buttons stay in the light DOM (slotted twins) and fire nk-action { action: value }.
 class NkAiMsg extends NkElement {
-  static get observedAttributes() { return ['role', 'name', 'badge', 'avatar', 'color']; }
+  static get observedAttributes() { return ['role', 'name', 'badge', 'avatar', 'color', 'bubble']; }
 
   render() {
     this._box = this.createElement('div', ['nk-ai-msg']);
     this._avatar = this.createElement('span', ['mini-avatar']);
     const avatarSlot = this.createElement('slot', [], { name: 'avatar' });
     avatarSlot.appendChild(this._avatar);
+    this._avatarSlot = avatarSlot;
     const body = this.createElement('div', ['a-body']);
     this._name = this.createElement('div', ['a-name']);
     this._nameText = document.createTextNode('');
@@ -31,12 +33,16 @@ class NkAiMsg extends NkElement {
 
   _sync() {
     const user = this.getAttribute('role') === 'user';
+    const bubble = this.getBoolAttr('bubble');
     this._box.classList.toggle('user', user);
+    this._box.classList.toggle('bubble', bubble);
     const name = this.getAttribute('name');
     this._nameText.data = name || '';
     const badge = this.getAttribute('badge');
     this._badge.textContent = badge ? ` ${badge}` : '';
-    this._name.style.display = name ? '' : 'none';
+    // A bubble stands without avatar and name; the text says who asked.
+    this._name.style.display = name && !bubble ? '' : 'none';
+    this._avatarSlot.style.display = bubble ? 'none' : '';
     this._avatar.textContent = this.getAttribute('avatar') || (user ? (name || 'U').slice(0, 2).toUpperCase() : '✨');
     const color = this.getAttribute('color');
     this._avatar.style.background = color || '';

package/src/components/data/nk-comment.js

@@ -1,14 +1,16 @@
 import { NkElement } from '../../base.js';
+import { paintAvatar, initialsOf } from '../../util/avatar.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>
+// <nk-comment author="Sara Lindt" time="1 hr ago" avatar="SL" color="green">The board view feels close.</nk-comment>
+// → <div class="nk-comment"><span class="nk-avatar green">SL</span><div><div class="c-head"><b>Sara Lindt</b> · 1 hr ago</div><div class="c-body">…</div></div></div>
+// color: one of Notion's nine names, or any CSS background; without it the avatar gradient.
 // 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']);
+    this._avatar = this.createElement('span', ['nk-avatar']);
     const avatarSlot = this.createElement('slot', [], { name: 'avatar' });
     avatarSlot.appendChild(this._avatar);
     const text = document.createElement('div');
@@ -29,8 +31,8 @@ class NkComment extends NkElement {
     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)';
+    this._avatar.textContent = this.getAttribute('avatar') || initialsOf(author);
+    paintAvatar(this._avatar, this.getAttribute('color'));
   }
 
   onAttributeChanged() { this._sync(); }

package/src/components/data/nk-list-view.js

@@ -0,0 +1,93 @@
+import { NkElement } from '../../base.js';
+import { renderPropertyCell } from '../../util/property-cell.js';
+
+// <nk-list-view name="list" label="☰ List" meta-keys="due,status" new-row></nk-list-view>
+// The third database view: one line per row – icon and title, the `meta-keys`
+// on the right (default: the select and date columns, in column order). Dates
+// and text stand as text, selects as tags, a person as avatar and name.
+// Standalone: view.columns = […]; view.rows = […]. Inside <nk-database> the
+// database pushes the data. Rows fire nk-select, the add row nk-action
+// { action: 'new-row' }.
+// → <div class="nk-list"><div class="nk-list-item"><span class="l-icon">…</span><span class="l-title">…</span><span class="l-meta">…</span></div>…</div>
+class NkListView extends NkElement {
+  static get observedAttributes() { return ['name', 'label', 'badge', 'count', 'title-key', 'meta-keys', 'new-row', 'new-row-label']; }
+
+  render() {
+    this._box = document.createElement('div');
+    this._list = this.createElement('div', ['nk-list'], { role: 'list' });
+    this._newRow = this.createElement('div', ['nk-new-row'], { role: 'button', tabindex: '0' });
+    this._box.append(this._list, this._newRow);
+    this._wrapper.appendChild(this._box);
+    this._columns ??= []; this._rows ??= [];
+    this._render();
+    this.closest('nk-database')?.requestSync?.();
+  }
+
+  _titleColumn() {
+    const key = this.getAttribute('title-key');
+    return this._columns.find(c => c.key === key) || this._columns.find(c => c.title) || this._columns[0] || null;
+  }
+  _metaColumns() {
+    const keys = (this.getAttribute('meta-keys') || '').split(',').map(s => s.trim()).filter(Boolean);
+    if (keys.length) return keys.map(k => this._columns.find(c => c.key === k)).filter(Boolean);
+    return this._columns.filter(c => c.type === 'select' || c.type === 'date');
+  }
+
+  _render() {
+    if (!this._list) return;
+    const title = this._titleColumn(), meta = this._metaColumns();
+    this._list.replaceChildren();
+    for (const row of this._rows) {
+      const item = this.createElement('div', ['nk-list-item'], { role: 'listitem', tabindex: '0', 'data-id': row.id ?? '' });
+      const icon = this.createElement('span', ['l-icon']);
+      icon.textContent = row.icon || '';
+      if (!row.icon) icon.style.display = 'none';
+      const t = this.createElement('span', ['l-title']);
+      t.textContent = title ? String(row[title.key] ?? '') : '';
+      const m = this.createElement('span', ['l-meta']);
+      for (const c of meta) {
+        const v = row[c.key];
+        if (v === undefined || v === null || v === '') continue;
+        m.appendChild(c.type === 'date' || c.type === 'text' || !c.type ? document.createTextNode(String(v)) : renderPropertyCell(c, v, row));
+      }
+      item.append(icon, t, m);
+      this._list.appendChild(item);
+    }
+    this._newRow.textContent = this.getAttribute('new-row-label') || '＋ New page';
+    this._newRow.style.display = this.getBoolAttr('new-row') ? '' : 'none';
+  }
+
+  setupEvents() {
+    this._onClick = (e) => {
+      if (this._newRow.contains(e.target)) { this.emit('nk-action', { action: 'new-row' }); return; }
+      const item = e.target.closest('.nk-list-item');
+      if (item) { const row = this._rowById(item.dataset.id); this.emit('nk-select', { row, id: row?.id, value: row?.id }); }
+    };
+    this._onKey = (e) => {
+      if (e.key !== 'Enter' && e.key !== ' ') return;
+      if (e.target === this._newRow || e.target.classList?.contains('nk-list-item')) { e.preventDefault(); e.target.click(); }
+    };
+    this._box.addEventListener('click', this._onClick);
+    this._box.addEventListener('keydown', this._onKey);
+  }
+
+  teardownEvents() {
+    this._box?.removeEventListener('click', this._onClick);
+    this._box?.removeEventListener('keydown', this._onKey);
+  }
+
+  _rowById(id) { return this._rows.find(r => String(r.id) === String(id)); }
+  onAttributeChanged() { this._render(); }
+
+  get name() { return this.getAttribute('name') || 'list'; }
+  get columns() { return this._columns; }
+  set columns(v) { this._columns = Array.isArray(v) ? v : []; this._render(); }
+  get rows() { return this._rows; }
+  set rows(v) { this._rows = Array.isArray(v) ? v : []; this._render(); }
+  set data({ columns, rows }) { this.setData(columns, rows); }
+  setData(columns, rows) { this._columns = columns || []; this._rows = rows || []; this._render(); }
+  refresh() { this._render(); }
+}
+
+customElements.define('nk-list-view', NkListView);
+export { NkListView };

package/src/components/data/nk-table-view.js

@@ -50,6 +50,8 @@ class NkTableView extends NkElement {
       const r = this.createElement('tr', [], { 'data-id': row.id ?? '' });
       for (const col of this._columns) {
         const td = document.createElement('td');
+        // Numbers right-aligned in figures of equal width, as Notion sets them.
+        if (col.type === 'number') td.className = 'num';
         td.appendChild(renderPropertyCell(col, row[col.key], row));
         r.appendChild(td);
       }

package/src/components/overlays/nk-menu-item.js

@@ -3,9 +3,13 @@ import { NkElement } from '../../base.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>
+// <nk-menu-item type="switch" icon="🔡" value="small" checked>Small text</nk-menu-item>
 // → <div class="nk-menu-item danger"><span class="m-icon">🗑️</span>Delete<span class="m-shortcut">…</span></div>
+// A switch item carries a .nk-switch on the right, as "Small text" does in
+// Notion's page menu: a click flips `checked` and fires nk-change { value,
+// checked } instead of nk-select, so the menu around it stays open.
 class NkMenuItem extends NkElement {
-  static get observedAttributes() { return ['icon', 'shortcut', 'danger', 'value', 'type', 'disabled']; }
+  static get observedAttributes() { return ['icon', 'shortcut', 'danger', 'value', 'type', 'disabled', 'checked']; }
 
   render() { this._build(); }
 
@@ -18,12 +22,15 @@ class NkMenuItem extends NkElement {
       el = this.createElement('div', ['nk-menu-label']);
       el.appendChild(document.createElement('slot'));
     } else {
-      el = this.createElement('div', ['nk-menu-item'], { role: 'menuitem', tabindex: '-1' });
+      const isSwitch = type === 'switch';
+      el = this.createElement('div', ['nk-menu-item'], { role: isSwitch ? 'menuitemcheckbox' : '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);
+      this._switch = isSwitch ? this.createElement('span', ['nk-switch'], { 'aria-hidden': 'true' }) : null;
+      if (this._switch) el.appendChild(this._switch);
     }
     if (this._el) { this._el.removeEventListener('click', this._onClick); this._el.replaceWith(el); } else this._wrapper.appendChild(el);
     this._el = el;
@@ -41,6 +48,11 @@ class NkMenuItem extends NkElement {
     this._shortcut.style.display = sc ? '' : 'none';
     this._el.classList.toggle('danger', this.getBoolAttr('danger'));
     this._el.setAttribute('aria-disabled', this.getBoolAttr('disabled') ? 'true' : 'false');
+    if (this._switch) {
+      const on = this.getBoolAttr('checked') ? 'true' : 'false';
+      this._el.setAttribute('aria-checked', on);
+      this._switch.setAttribute('aria-checked', on);
+    }
   }
 
   setupEvents() {
@@ -52,6 +64,11 @@ class NkMenuItem extends NkElement {
 
   select() {
     if (!this._el.classList.contains('nk-menu-item') || this.getBoolAttr('disabled')) return;
+    if (this._switch) {
+      this.checked = !this.checked;
+      this.emit('nk-change', { value: this.value, checked: this.checked, item: this });
+      return;
+    }
     this.emit('nk-select', { value: this.value, label: this.textContent.trim(), item: this });
   }
 
@@ -59,6 +76,8 @@ class NkMenuItem extends NkElement {
   focus(o) { this._el?.focus(o); }
   get selectable() { return this._el?.classList.contains('nk-menu-item') && !this.getBoolAttr('disabled'); }
 
+  get checked() { return this.getBoolAttr('checked'); }
+  set checked(v) { this.setBoolAttr('checked', v); }
   get value() { return this.getAttribute('value') ?? this.textContent.trim(); }
   set value(v) { this.setAttribute('value', v); }
 }

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

@@ -0,0 +1,55 @@
+import { NkElement } from '../../base.js';
+import { paintAvatar, initialsOf } from '../../util/avatar.js';
+
+// <nk-avatar>MK</nk-avatar>                       → <span class="nk-avatar">MK</span>
+// <nk-avatar size="small" color="green">SL</nk-avatar>
+// <nk-avatar name="Ada Lovelace" size="large"></nk-avatar>   → initials "AL"
+// <nk-avatar src="ada.jpg" name="Ada Lovelace" size="xlarge"></nk-avatar>
+// <nk-avatar square>A</nk-avatar>                  → a workspace icon
+// size: small (20px) · default 24px · large (32px) · xlarge (56px). color: one
+// of Notion's nine names, or any CSS background. Without content the initials
+// come from `name`; with `src` a photo fills the circle and `name` is its alt.
+class NkAvatar extends NkElement {
+  static get observedAttributes() { return ['size', 'color', 'square', 'src', 'name']; }
+
+  render() {
+    this._box = this.createElement('span', ['nk-avatar']);
+    this._slot = document.createElement('slot');
+    this._initials = document.createTextNode('');
+    this._slot.appendChild(this._initials);
+    this._img = this.createElement('img', [], { alt: '' });
+    this._box.appendChild(this._slot);
+    this._wrapper.appendChild(this._box);
+    this._sync();
+  }
+
+  _sync() {
+    const size = this.getAttribute('size');
+    for (const s of ['small', 'large', 'xlarge']) this._box.classList.toggle(s, s === size);
+    this._box.classList.toggle('square', this.getBoolAttr('square'));
+    paintAvatar(this._box, this.getAttribute('color'));
+    const name = this.getAttribute('name');
+    this._initials.data = initialsOf(name);
+    const src = this.getAttribute('src');
+    if (src) {
+      this._img.src = src;
+      this._img.alt = name || '';
+      if (this._slot.isConnected) this._slot.replaceWith(this._img);
+    } else if (this._img.isConnected) this._img.replaceWith(this._slot);
+    // A picture or initials with a name speak for themselves; a bare glyph is decoration.
+    if (name && !src) { this._box.setAttribute('role', 'img'); this._box.setAttribute('aria-label', name); }
+    else { this._box.removeAttribute('role'); this._box.removeAttribute('aria-label'); }
+  }
+
+  onAttributeChanged() { this._sync(); }
+
+  get size() { return this.getAttribute('size'); }
+  set size(v) { v == null ? this.removeAttribute('size') : this.setAttribute('size', v); }
+  get color() { return this.getAttribute('color'); }
+  set color(v) { v == null ? this.removeAttribute('color') : this.setAttribute('color', v); }
+  get src() { return this.getAttribute('src'); }
+  set src(v) { v == null ? this.removeAttribute('src') : this.setAttribute('src', v); }
+}
+
+customElements.define('nk-avatar', NkAvatar);
+export { NkAvatar };

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

@@ -1,15 +1,18 @@
 import { NkElement } from '../../base.js';
+import { paintAvatar, initialsOf } from '../../util/avatar.js';
 
-// <nk-member-row name="Sara Lindt" mail="sara@…" avatar="SL" color="#448361">
+// <nk-member-row name="Sara Lindt" mail="sara@…" avatar="SL" color="green">
 //   <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>
+// → <div class="nk-member-row"><span class="nk-avatar green">SL</span><div>Sara Lindt<div class="m-mail">…</div></div><select …></div>
+// color: one of Notion's nine names, or any CSS background; without it the
+// avatar gradient. The row sizes the avatar to 28px.
 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']);
+    this._avatar = this.createElement('span', ['nk-avatar']);
     const avatarSlot = this.createElement('slot', [], { name: 'avatar' });
     avatarSlot.appendChild(this._avatar);
     const text = document.createElement('div');
@@ -33,8 +36,8 @@ class NkMemberRow extends NkElement {
     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._avatar.textContent = avatar || initialsOf(this.getAttribute('name'));
+    paintAvatar(this._avatar, this.getAttribute('color'));
     this._row.classList.toggle('last', this.getBoolAttr('last'));
   }
 

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

@@ -1,12 +1,16 @@
 import { NkElement } from '../../base.js';
 
 // <nk-page-cover slot="cover"></nk-page-cover>            → the token gradient
-// <nk-page-cover slot="cover" src="cover.jpg"></nk-page-cover>  → an image
+// <nk-page-cover slot="cover" src="cover.jpg" position="center 30%"></nk-page-cover>  → a picture
+// → <div class="nk-cover"><img src="cover.jpg" alt=""></div>: the picture fills
+// the band, cropped rather than stretched; `position` moves the crop, as
+// Notion's "Reposition" does. The gradient stays underneath while it loads.
 class NkPageCover extends NkElement {
-  static get observedAttributes() { return ['src']; }
+  static get observedAttributes() { return ['src', 'position']; }
 
   render() {
     this._cover = this.createElement('div', ['nk-cover']);
+    this._img = this.createElement('img', [], { alt: '' });
     this._wrapper.appendChild(this._cover);
     this._sync();
   }
@@ -14,14 +18,10 @@ class NkPageCover extends NkElement {
   _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 = '';
-    }
+      this._img.src = src;
+      this._img.style.objectPosition = this.getAttribute('position') || '';
+      if (!this._img.isConnected) this._cover.appendChild(this._img);
+    } else this._img.remove();
   }
 
   onAttributeChanged() { this._sync(); }

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

@@ -1,6 +1,6 @@
 import { NkElement } from '../../base.js';
 
-// <nk-page icon="🚀" cover>
+// <nk-page icon="🚀" cover full small>
 //   <nk-page-title>NotionKit MVP</nk-page-title>
 //   <nk-page-actions>…</nk-page-actions>
 //   <p class="lead">…</p>
@@ -12,9 +12,10 @@ import { NkElement } from '../../base.js';
 // 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).
+// here because its ::slotted twin is keyed on the parent (.nk-page). `full` and
+// `small` are Notion's page options – full width, 14px text – set on the page.
 class NkPage extends NkElement {
-  static get observedAttributes() { return ['icon', 'cover', 'narrow']; }
+  static get observedAttributes() { return ['icon', 'cover', 'narrow', 'full', 'small']; }
 
   render() {
     this._page = this.createElement('div', ['nk-page']);
@@ -51,6 +52,8 @@ class NkPage extends NkElement {
     // (attribute or a slotted nk-page-cover) the icon sits in the padding.
     const slotted = this._coverSlot.assignedNodes().some(n => n.nodeType === Node.ELEMENT_NODE || n.data.trim());
     this._page.classList.toggle('covered', this.getBoolAttr('cover') || slotted);
+    this._page.classList.toggle('full', this.getBoolAttr('full'));
+    this._page.classList.toggle('small', this.getBoolAttr('small'));
   }
 
   setupEvents() {
@@ -72,6 +75,10 @@ class NkPage extends NkElement {
   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); }
+  get full() { return this.getBoolAttr('full'); }
+  set full(v) { this.setBoolAttr('full', v); }
+  get small() { return this.getBoolAttr('small'); }
+  set small(v) { this.setBoolAttr('small', v); }
 }
 
 customElements.define('nk-page', NkPage);

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

@@ -0,0 +1,59 @@
+import { NkElement } from '../../base.js';
+
+// <nk-panel title="Weekly review"><p>Three pages changed.</p></nk-panel>
+// <nk-panel href="/roadmap" cover="covers/aurora.svg" icon="🚀" title="Roadmap"><p>2 min ago</p></nk-panel>
+// → <a class="nk-panel" href="/roadmap"><div class="nk-cover"><img src="…" alt=""></div>
+//      <div class="nk-page-icon">🚀</div><h3>Roadmap</h3>…</a>
+// `cover` without a value draws the token gradient, with one a picture; `icon`
+// overlaps the cover as on a page – a page tile, as on Notion's Home. With
+// `href` the panel is a link. `title` is the heading, never a tooltip.
+class NkPanel extends NkElement {
+  static get observedAttributes() { return ['title', 'icon', 'cover', 'href', 'target']; }
+
+  render() {
+    this._cover = this.createElement('div', ['nk-cover']);
+    this._img = this.createElement('img', [], { alt: '' });
+    this._icon = this.createElement('div', ['nk-page-icon']);
+    this._heading = document.createElement('h3');
+    this._slot = document.createElement('slot');
+    this.takeTitle();
+    this._build();
+  }
+
+  _build() {
+    const href = this.getAttribute('href');
+    const box = this.createElement(href ? 'a' : 'div', ['nk-panel']);
+    box.append(this._cover, this._icon, this._heading, this._slot);
+    this._wrapper.replaceChildren(box);
+    this._box = box;
+    this._sync();
+  }
+
+  _sync() {
+    const href = this.getAttribute('href');
+    if (href) { this._box.setAttribute('href', href); this._box.target = this.getAttribute('target') || ''; }
+    const cover = this.getAttribute('cover');
+    this._cover.style.display = cover === null ? 'none' : '';
+    if (cover) { this._img.src = cover; if (!this._img.isConnected) this._cover.appendChild(this._img); }
+    else this._img.remove();
+    const icon = this.getAttribute('icon');
+    this._icon.textContent = icon || '';
+    this._icon.style.display = icon ? '' : 'none';
+    this._heading.textContent = this._titleText || '';
+    this._heading.style.display = this._titleText ? '' : 'none';
+  }
+
+  onAttributeChanged(name, _old, value) {
+    if (name === 'title' && !this.takeTitle(value)) return;
+    if (name === 'href' && (value === null) !== (this._box.localName === 'div')) { this._build(); return; }
+    this._sync();
+  }
+
+  get title() { return this._titleText ?? ''; }
+  set title(v) { this._titleText = v == null ? '' : String(v); if (this._initialized) this._sync(); }
+  get href() { return this.getAttribute('href'); }
+  set href(v) { v == null ? this.removeAttribute('href') : this.setAttribute('href', v); }
+}
+
+customElements.define('nk-panel', NkPanel);
+export { NkPanel };

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

@@ -0,0 +1,16 @@
+import { NkElement } from '../../base.js';
+
+// <nk-panels><nk-panel …></nk-panel><nk-panel …></nk-panel></nk-panels>
+// → <div class="nk-panels">…</div>: columns of at least 200px that share the
+// row and fall to one on a phone. The <nk-panel> hosts are display: contents,
+// so each .nk-panel is a cell of this grid.
+class NkPanels extends NkElement {
+  render() {
+    const grid = this.createElement('div', ['nk-panels']);
+    grid.appendChild(document.createElement('slot'));
+    this._wrapper.appendChild(grid);
+  }
+}
+
+customElements.define('nk-panels', NkPanels);
+export { NkPanels };

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

@@ -0,0 +1,52 @@
+import { NkElement } from '../../base.js';
+
+// <nk-prop label="Due" icon="📅">2 June 2026</nk-prop>
+// → <div class="nk-prop"><dt class="p-name"><span class="p-icon">📅</span>Due</dt><dd class="p-value">2 June 2026</dd></div>
+// The value is the element's content – tags, an avatar and a name, a date, a
+// <nk-progress wide>. slot="icon" replaces the icon glyph. A click on the
+// name or the value fires nk-action { action: 'name' | 'value', label }, the
+// moment Notion opens the property's editor.
+class NkProp extends NkElement {
+  static get observedAttributes() { return ['label', 'icon']; }
+
+  render() {
+    this._row = this.createElement('div', ['nk-prop']);
+    this._name = this.createElement('dt', ['p-name']);
+    this._icon = this.createElement('span', ['p-icon']);
+    const iconSlot = this.createElement('slot', [], { name: 'icon' });
+    iconSlot.appendChild(this._icon);
+    this._label = document.createTextNode('');
+    this._name.append(iconSlot, this._label);
+    this._value = this.createElement('dd', ['p-value']);
+    this._value.appendChild(document.createElement('slot'));
+    this._row.append(this._name, this._value);
+    this._wrapper.appendChild(this._row);
+    this._sync();
+  }
+
+  _sync() {
+    const icon = this.getAttribute('icon');
+    this._icon.textContent = icon || '';
+    this._icon.style.display = icon ? '' : 'none';
+    this._label.data = this.getAttribute('label') || '';
+  }
+
+  setupEvents() {
+    this._onClick = (e) => {
+      const part = e.composedPath().includes(this._name) ? 'name' : 'value';
+      this.emit('nk-action', { action: part, label: this.label });
+    };
+    this._row.addEventListener('click', this._onClick);
+  }
+
+  teardownEvents() { this._row?.removeEventListener('click', this._onClick); }
+  onAttributeChanged() { this._sync(); }
+
+  get label() { return this.getAttribute('label') || ''; }
+  set label(v) { this.setAttribute('label', v); }
+  get icon() { return this.getAttribute('icon'); }
+  set icon(v) { v == null ? this.removeAttribute('icon') : this.setAttribute('icon', v); }
+}
+
+customElements.define('nk-prop', NkProp);
+export { NkProp };

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

@@ -0,0 +1,19 @@
+import { NkElement } from '../../base.js';
+
+// <nk-props>
+//   <nk-prop label="Status" icon="◉"><nk-tag color="blue">In progress</nk-tag></nk-prop>
+//   <nk-prop label="Owner" icon="👤"><nk-avatar size="small">MK</nk-avatar>Marcel Karas</nk-prop>
+// </nk-props>
+// → <dl class="nk-props">…</dl> – the properties under a page title. The rows
+// are <nk-prop> hosts with display: contents, so each .nk-prop is a row of
+// this list.
+class NkProps extends NkElement {
+  render() {
+    const list = this.createElement('dl', ['nk-props']);
+    list.appendChild(document.createElement('slot'));
+    this._wrapper.appendChild(list);
+  }
+}
+
+customElements.define('nk-props', NkProps);
+export { NkProps };