@jungherz-de/notionkit-elements 1.5.2 → 1.6.0

package/dist/components/nk-check.js

@@ -1,4 +1,5 @@
-import { a as NkFormElement } from './shared/base-AWFyTskN.js';
+import { NkFormElement } from './base.js';
+import '@jungherz-de/notionkit/notionkit-styles.js';
 
 // <nk-check name="mail" value="weekly" checked>Weekly digest</nk-check>
 // → <label class="nk-check"><input type="checkbox"> Weekly digest</label>

package/dist/components/nk-cmdk.js

@@ -1,5 +1,6 @@
-import { N as NkElement } from './shared/base-AWFyTskN.js';
+import { NkElement } from './base.js';
 import { l as lockScroll, i as inertOutside, u as unlockScroll } from './shared/focus-DXrK9oLe.js';
+import '@jungherz-de/notionkit/notionkit-styles.js';
 
 // Subsequence scoring for the command palette: every query character must
 // appear in order; consecutive hits, word starts and an early first hit score

package/dist/components/nk-code.js

@@ -1,4 +1,5 @@
-import { N as NkElement } from './shared/base-AWFyTskN.js';
+import { NkElement } from './base.js';
+import '@jungherz-de/notionkit/notionkit-styles.js';
 
 // Minimal HTML highlighter emitting the .tag / .attr hooks .nk-code styles.
 // Mirrors tools/highlight.mjs in the NotionKit foundation – no third-party

package/dist/components/nk-comment.js

@@ -1,14 +1,17 @@
-import { N as NkElement } from './shared/base-AWFyTskN.js';
+import { NkElement } from './base.js';
+import { i as initialsOf, p as paintAvatar } from './shared/avatar-BiqCaHOt.js';
+import '@jungherz-de/notionkit/notionkit-styles.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 +32,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/dist/components/nk-comments.js

@@ -1,4 +1,5 @@
-import { N as NkElement } from './shared/base-AWFyTskN.js';
+import { NkElement } from './base.js';
+import '@jungherz-de/notionkit/notionkit-styles.js';
 
 // <nk-comments placeholder="Comment …" send-label="Send">
 //   <nk-comment …>…</nk-comment>

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

@@ -1,4 +1,5 @@
-import { N as NkElement } from './shared/base-AWFyTskN.js';
+import { NkElement } from './base.js';
+import '@jungherz-de/notionkit/notionkit-styles.js';
 
 // <nk-danger-zone title="Danger zone">…</nk-danger-zone>
 // → <div class="nk-danger-zone"><div class="dz-title">Danger zone</div>…</div>

package/dist/components/nk-database.js

@@ -1,4 +1,5 @@
-import { N as NkElement } from './shared/base-AWFyTskN.js';
+import { NkElement } from './base.js';
+import '@jungherz-de/notionkit/notionkit-styles.js';
 
 // <nk-database id="db" view="table" add-view>
 //   <nk-table-view name="table" label="▦ Table" count></nk-table-view>

package/dist/components/nk-divider.js

@@ -1,4 +1,5 @@
-import { N as NkElement } from './shared/base-AWFyTskN.js';
+import { NkElement } from './base.js';
+import '@jungherz-de/notionkit/notionkit-styles.js';
 
 // <nk-divider></nk-divider>  →  <hr class="nk-divider">
 class NkDivider extends NkElement {

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

@@ -1,4 +1,5 @@
-import { N as NkElement } from './shared/base-AWFyTskN.js';
+import { NkElement } from './base.js';
+import '@jungherz-de/notionkit/notionkit-styles.js';
 
 // Built-in emoji set for <nk-emoji-picker>: eight categories, names for
 // search. Override with `picker.emojis = [{ char, name, cat }]`.

package/dist/components/nk-empty.js

@@ -1,4 +1,5 @@
-import { N as NkElement } from './shared/base-AWFyTskN.js';
+import { NkElement } from './base.js';
+import '@jungherz-de/notionkit/notionkit-styles.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="e-actions">…</div></div>

package/dist/components/nk-field.js

@@ -1,4 +1,5 @@
-import { N as NkElement } from './shared/base-AWFyTskN.js';
+import { NkElement } from './base.js';
+import '@jungherz-de/notionkit/notionkit-styles.js';
 
 // <nk-field label="Display name" desc="Shown next to your comments">
 //   <nk-input value="Marcel"></nk-input>

package/dist/components/nk-fields.js

@@ -1,4 +1,5 @@
-import { N as NkElement } from './shared/base-AWFyTskN.js';
+import { NkElement } from './base.js';
+import '@jungherz-de/notionkit/notionkit-styles.js';
 
 // <nk-fields>
 //   <nk-field label="Name"><nk-input name="name"></nk-input></nk-field>

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

@@ -1,4 +1,5 @@
-import { N as NkElement } from './shared/base-AWFyTskN.js';
+import { NkElement } from './base.js';
+import '@jungherz-de/notionkit/notionkit-styles.js';
 
 // <nk-filter-bar search placeholder="Search rows …"></nk-filter-bar>
 // bar.filters = [{ key: 'status', label: 'Status: Done', value: 'done' }];

package/dist/components/nk-heading.js

@@ -1,4 +1,5 @@
-import { N as NkElement } from './shared/base-AWFyTskN.js';
+import { NkElement } from './base.js';
+import '@jungherz-de/notionkit/notionkit-styles.js';
 
 // <nk-heading level="2">Section</nk-heading>  →  <h2 class="nk-heading">
 // The heading level is real markup (h1–h4), so the outline stays honest.

package/dist/components/nk-input.js

@@ -1,4 +1,5 @@
-import { a as NkFormElement } from './shared/base-AWFyTskN.js';
+import { NkFormElement } from './base.js';
+import '@jungherz-de/notionkit/notionkit-styles.js';
 
 // <nk-input name="title" value="…" placeholder="…" wide></nk-input>  →  <input class="nk-input wide">
 // Takes part in the surrounding <form> through ElementInternals.

package/dist/components/nk-kbd.js

@@ -1,4 +1,5 @@
-import { N as NkElement } from './shared/base-AWFyTskN.js';
+import { NkElement } from './base.js';
+import '@jungherz-de/notionkit/notionkit-styles.js';
 
 // <nk-kbd>⌘</nk-kbd> <nk-kbd>K</nk-kbd>  →  <kbd class="nk-kbd">
 class NkKbd extends NkElement {

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

@@ -0,0 +1,96 @@
+import { NkElement } from './base.js';
+import { r as renderPropertyCell } from './shared/property-cell-o7N30kAQ.js';
+import '@jungherz-de/notionkit/notionkit-styles.js';
+import './shared/avatar-BiqCaHOt.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/dist/components/nk-member-list.js

@@ -1,4 +1,5 @@
-import { N as NkElement } from './shared/base-AWFyTskN.js';
+import { NkElement } from './base.js';
+import '@jungherz-de/notionkit/notionkit-styles.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).

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

@@ -1,15 +1,19 @@
-import { N as NkElement } from './shared/base-AWFyTskN.js';
+import { NkElement } from './base.js';
+import { i as initialsOf, p as paintAvatar } from './shared/avatar-BiqCaHOt.js';
+import '@jungherz-de/notionkit/notionkit-styles.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 +37,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/dist/components/nk-mention.js

@@ -1,4 +1,5 @@
-import { N as NkElement } from './shared/base-AWFyTskN.js';
+import { NkElement } from './base.js';
+import '@jungherz-de/notionkit/notionkit-styles.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>

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

@@ -1,11 +1,16 @@
-import { N as NkElement } from './shared/base-AWFyTskN.js';
+import { NkElement } from './base.js';
+import '@jungherz-de/notionkit/notionkit-styles.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 +23,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 +49,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 +65,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 +77,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/dist/components/nk-menu.js

@@ -1,4 +1,5 @@
-import { N as NkElement } from './shared/base-AWFyTskN.js';
+import { NkElement } from './base.js';
+import '@jungherz-de/notionkit/notionkit-styles.js';
 
 // <nk-menu>
 //   <nk-menu-item type="label">Page</nk-menu-item>

package/dist/components/nk-modal.js

@@ -1,5 +1,6 @@
-import { N as NkElement } from './shared/base-AWFyTskN.js';
+import { NkElement } from './base.js';
 import { l as lockScroll, i as inertOutside, f as firstFocusable, u as unlockScroll } from './shared/focus-DXrK9oLe.js';
+import '@jungherz-de/notionkit/notionkit-styles.js';
 
 // <nk-modal id="settings">
 //   <nk-settings-user slot="user" name="…" mail="…"></nk-settings-user>

package/dist/components/nk-model-card.js

@@ -1,4 +1,5 @@
-import { a as NkFormElement } from './shared/base-AWFyTskN.js';
+import { NkFormElement } from './base.js';
+import '@jungherz-de/notionkit/notionkit-styles.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>

package/dist/components/nk-page-actions.js

@@ -1,4 +1,5 @@
-import { N as NkElement } from './shared/base-AWFyTskN.js';
+import { NkElement } from './base.js';
+import '@jungherz-de/notionkit/notionkit-styles.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

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

@@ -1,12 +1,17 @@
-import { N as NkElement } from './shared/base-AWFyTskN.js';
+import { NkElement } from './base.js';
+import '@jungherz-de/notionkit/notionkit-styles.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 +19,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/dist/components/nk-page-title.js

@@ -1,4 +1,5 @@
-import { N as NkElement } from './shared/base-AWFyTskN.js';
+import { NkElement } from './base.js';
+import '@jungherz-de/notionkit/notionkit-styles.js';
 
 // <nk-page-title>NotionKit MVP</nk-page-title>          → <h1 class="nk-page-title">
 // <nk-page-title editable placeholder="Untitled">…</nk-page-title>

package/dist/components/nk-page.js

@@ -1,6 +1,7 @@
-import { N as NkElement } from './shared/base-AWFyTskN.js';
+import { NkElement } from './base.js';
+import '@jungherz-de/notionkit/notionkit-styles.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 +13,10 @@ import { N as NkElement } from './shared/base-AWFyTskN.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 +53,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 +76,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/dist/components/nk-panel.js

@@ -0,0 +1,61 @@
+import { NkElement } from './base.js';
+import '@jungherz-de/notionkit/notionkit-styles.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/dist/components/nk-panels.js

@@ -0,0 +1,18 @@
+import { NkElement } from './base.js';
+import '@jungherz-de/notionkit/notionkit-styles.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/dist/components/nk-pop.js

@@ -1,4 +1,5 @@
-import { N as NkElement } from './shared/base-AWFyTskN.js';
+import { NkElement } from './base.js';
+import '@jungherz-de/notionkit/notionkit-styles.js';
 
 // <nk-pop placement="bottom-start">
 //   <nk-btn slot="trigger" variant="secondary">Options</nk-btn>

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

@@ -1,4 +1,5 @@
-import { N as NkElement } from './shared/base-AWFyTskN.js';
+import { NkElement } from './base.js';
+import '@jungherz-de/notionkit/notionkit-styles.js';
 
 // <nk-profile-row avatar="MK"><nk-btn variant="secondary" small>Change photo</nk-btn></nk-profile-row>
 // → <div class="nk-profile-row"><div class="big-avatar">MK</div>…</div>

package/dist/components/nk-progress.js

@@ -1,9 +1,11 @@
-import { N as NkElement } from './shared/base-AWFyTskN.js';
+import { NkElement } from './base.js';
+import '@jungherz-de/notionkit/notionkit-styles.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 +24,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);