@jungherz-de/notionkit-elements 1.5.3 → 1.7.0

package/dist/components/nk-btn.js

@@ -1,15 +1,19 @@
-import { N as NkElement } from './shared/base-C3eJwHKA.js';
+import { NkElement } from './base.js';
+import '@jungherz-de/notionkit/notionkit-styles.js';
 
 // <nk-btn variant="primary" small>Save</nk-btn>   →  <button class="nk-btn primary small">
 // <nk-btn href="/docs" variant="secondary">Docs</nk-btn>  →  <a class="nk-btn secondary">
 // <nk-btn variant="topbar">⭐</nk-btn>  →  <button class="nk-topbar-btn">
+// <nk-btn variant="tool" active>Filter</nk-btn>  →  <button class="nk-db-tool active">  (slot="tools" of nk-database)
+// <nk-btn variant="sidebar" aria-label="Menu">☰</nk-btn>  →  <button class="nk-topbar-btn nk-sidebar-toggle">:
+//   shown on phones only, it opens the page's <nk-sidebar> as a drawer.
 //
 // Modifier classes become attributes. A slotted <svg> is sized by the
 // `.nk-btn ::slotted(svg)` twin; pass the icon itself, never wrapped.
 const VARIANTS = ['primary', 'secondary', 'danger', 'danger-solid', 'topbar', 'share'];
 
 class NkBtn extends NkElement {
-  static get observedAttributes() { return ['variant', 'small', 'disabled', 'type', 'href', 'title', 'aria-label']; }
+  static get observedAttributes() { return ['variant', 'small', 'disabled', 'type', 'href', 'title', 'aria-label', 'aria-haspopup', 'active']; }
 
   render() {
     this._build();
@@ -37,13 +41,22 @@ class NkBtn extends NkElement {
     else el.setAttribute('aria-disabled', disabled ? 'true' : 'false');
     const title = this.getAttribute('title');
     title ? el.setAttribute('title', title) : el.removeAttribute('title');
-    const label = this.getAttribute('aria-label');
-    label ? el.setAttribute('aria-label', label) : el.removeAttribute('aria-label');
+    // The accessible name and the popup hint belong on the button itself.
+    for (const name of ['aria-label', 'aria-haspopup']) {
+      const v = this.getAttribute(name);
+      v ? el.setAttribute(name, v) : el.removeAttribute(name);
+    }
+    if (this.getAttribute('variant') === 'sidebar') el.setAttribute('aria-expanded', this._sidebar()?.open ? 'true' : 'false');
+    else el.removeAttribute('aria-expanded');
   }
 
+  /** The sidebar the ☰ opens: the one in its own app, else the page's. */
+  _sidebar() { return this.closest('nk-app')?.querySelector('nk-sidebar') ?? document.querySelector('nk-sidebar'); }
+
   setupEvents() {
     this._onClick = (e) => {
       if (this.getBoolAttr('disabled')) { e.preventDefault(); e.stopPropagation(); return; }
+      if (this.getAttribute('variant') === 'sidebar') { this._sidebar()?.toggle?.(); return; }
       // A button inside a shadow root is not a submit button of the outer
       // form; forward the intent to the form the host sits in.
       const type = this.getAttribute('type');
@@ -52,11 +65,17 @@ class NkBtn extends NkElement {
         if (form) type === 'submit' ? form.requestSubmit() : form.reset();
       }
     };
+    // The ☰ says whether its drawer is open, however the drawer closed.
+    this._onToggle = (e) => {
+      if (this.getAttribute('variant') === 'sidebar' && e.target === this._sidebar()) this._btn.setAttribute('aria-expanded', e.detail.open ? 'true' : 'false');
+    };
     this._btn.addEventListener('click', this._onClick);
+    document.addEventListener('nk-toggle', this._onToggle);
   }
 
   teardownEvents() {
     this._btn?.removeEventListener('click', this._onClick);
+    document.removeEventListener('nk-toggle', this._onToggle);
   }
 
   onAttributeChanged(name) {
@@ -66,7 +85,11 @@ class NkBtn extends NkElement {
         this._build();
         break;
       case 'variant':
+        this._btn.className = this._computeClasses().join(' ');
+        this._applyState(this._btn);
+        break;
       case 'small':
+      case 'active':
         this._btn.className = this._computeClasses().join(' ');
         break;
       case 'type':
@@ -81,6 +104,8 @@ class NkBtn extends NkElement {
     const variant = this.getAttribute('variant');
     if (variant === 'topbar') return ['nk-topbar-btn'];
     if (variant === 'share') return ['nk-topbar-btn', 'nk-share-btn'];
+    if (variant === 'sidebar') return ['nk-topbar-btn', 'nk-sidebar-toggle'];
+    if (variant === 'tool') return this.getBoolAttr('active') ? ['nk-db-tool', 'active'] : ['nk-db-tool'];
     const classes = ['nk-btn'];
     if (VARIANTS.includes(variant)) classes.push(variant);
     if (this.getBoolAttr('small')) classes.push('small');
@@ -92,6 +117,8 @@ class NkBtn extends NkElement {
 
   get variant() { return this.getAttribute('variant'); }
   set variant(v) { v ? this.setAttribute('variant', v) : this.removeAttribute('variant'); }
+  get active() { return this.getBoolAttr('active'); }
+  set active(v) { this.setBoolAttr('active', v); }
   get small() { return this.getBoolAttr('small'); }
   set small(v) { this.setBoolAttr('small', v); }
   get disabled() { return this.getBoolAttr('disabled'); }

package/dist/components/nk-callout.js

@@ -1,4 +1,5 @@
-import { N as NkElement } from './shared/base-C3eJwHKA.js';
+import { NkElement } from './base.js';
+import '@jungherz-de/notionkit/notionkit-styles.js';
 
 // <nk-callout icon="💡">text</nk-callout>
 // <nk-callout><span slot="icon">📌</span>text</nk-callout>

package/dist/components/nk-check.js

@@ -1,4 +1,5 @@
-import { a as NkFormElement } from './shared/base-C3eJwHKA.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-C3eJwHKA.js';
-import { l as lockScroll, i as inertOutside, u as unlockScroll } from './shared/focus-DXrK9oLe.js';
+import { NkElement } from './base.js';
+import { l as lockScroll, i as inertOutside, u as unlockScroll } from './shared/focus-BNAChOXO.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-C3eJwHKA.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-C3eJwHKA.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-C3eJwHKA.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-C3eJwHKA.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-C3eJwHKA.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>
@@ -6,16 +7,24 @@ import { N as NkElement } from './shared/base-C3eJwHKA.js';
 // </nk-database>
 // db.columns = [{ key: 'name', label: 'Name', type: 'text', icon: '📄', title: true }, { key: 'status', type: 'select', options: [...] }, …];
 // db.rows = [{ id: 1, icon: '🧭', name: '…', status: 'done', … }];
-// → <div class="nk-database"><div class="nk-db-tabs">…</div>…active view…</div>
+// <nk-btn slot="tools" variant="tool">Filter</nk-btn> … sit right of the tabs,
+// <nk-filter-bar slot="filters"> under them (NotionKit 1.7.0's toolbar).
+// → <div class="nk-database"><div class="nk-db-toolbar"><div class="nk-db-tabs">…</div>
+//     <div class="tools">…</div></div>…filters…active view…</div>
 // The tabs come from the child views; data is pushed into every view.
 class NkDatabase extends NkElement {
   static get observedAttributes() { return ['view', 'add-view']; }
 
   render() {
     this._box = this.createElement('div', ['nk-database']);
+    this._toolbar = this.createElement('div', ['nk-db-toolbar']);
     this._tabs = this.createElement('div', ['nk-db-tabs'], { role: 'tablist' });
+    const tools = this.createElement('div', ['tools']);
+    this._toolsSlot = this.createElement('slot', [], { name: 'tools' });
+    tools.appendChild(this._toolsSlot);
+    this._toolbar.append(this._tabs, tools);
     this._slot = document.createElement('slot');
-    this._box.append(this._tabs, this._slot);
+    this._box.append(this._toolbar, this.createElement('slot', [], { name: 'filters' }), this._slot);
     this._wrapper.appendChild(this._box);
     this._columns = []; this._rows = [];
     this._sync();
@@ -43,12 +52,11 @@ class NkDatabase extends NkElement {
       v.setData?.(this._columns, this._rows);
     }
     if (this.getBoolAttr('add-view')) {
-      const add = this.createElement('span', ['nk-db-tab'], { role: 'button', 'data-add': '', tabindex: '0' });
-      add.style.color = 'var(--nk-text-tertiary)';
+      const add = this.createElement('span', ['nk-db-tab', 'add'], { role: 'button', 'data-add': '', tabindex: '0' });
       add.textContent = '＋';
       this._tabs.appendChild(add);
     }
-    this._tabs.style.display = views.length ? '' : 'none';
+    this._toolbar.hidden = !views.length && !this._toolsSlot.assignedElements().length;
     this._current = current;
   }
 
@@ -70,6 +78,7 @@ class NkDatabase extends NkElement {
     this._tabs.addEventListener('click', this._onClick);
     this._tabs.addEventListener('keydown', this._onKey);
     this._slot.addEventListener('slotchange', this._onSlot);
+    this._toolsSlot.addEventListener('slotchange', this._onSlot);
     this._sync();
   }
 
@@ -77,6 +86,7 @@ class NkDatabase extends NkElement {
     this._tabs?.removeEventListener('click', this._onClick);
     this._tabs?.removeEventListener('keydown', this._onKey);
     this._slot?.removeEventListener('slotchange', this._onSlot);
+    this._toolsSlot?.removeEventListener('slotchange', this._onSlot);
   }
 
   onAttributeChanged(name) {

package/dist/components/nk-divider.js

@@ -1,4 +1,5 @@
-import { N as NkElement } from './shared/base-C3eJwHKA.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-C3eJwHKA.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-C3eJwHKA.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-C3eJwHKA.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-C3eJwHKA.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,60 +1,77 @@
-import { N as NkElement } from './shared/base-C3eJwHKA.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' }];
-// Composed from existing classes (nk-btn secondary small, nk-input, nk-tag):
-// filter / sort buttons fire nk-action, chips remove on ×, search and chip
-// changes fire nk-change { filters, search }. The wrapper is layout only.
+// <nk-filter-bar add no-filter no-sort></nk-filter-bar>
+// bar.filters = [{ key: 'status', value: 'done', op: 'is-not', label: 'Status: Open' }];
+// The filters in effect as NotionKit's filter pills (1.7.0), no inline style:
+// → <div class="nk-filter-row">[Filter][Sort]
+//     <span class="nk-filter-pill active"><button>Status: Open</button><button class="fp-remove">×</button></span>…
+//     <button class="nk-filter-pill add">＋ Filter</button> …slot… [search]</div>
+// Filter and Sort are .nk-db-tool buttons (hide them with no-filter / no-sort
+// when the database toolbar carries its own); they fire nk-action. A pill's
+// label fires nk-action { action: 'edit', index, filter }, the add pill
+// nk-action { action: 'add' } – each with the clicked button as `anchor`, to
+// open a menu under it. × removes the filter; every change to filters or
+// search fires nk-change { filters, search }. In slot="filters" of
+// <nk-database> the row sits right under the view tabs. The texts are
+// attributes, for other languages: filter-label, sort-label, add-label,
+// remove-label (the × reads "<remove-label>: <pill>") and placeholder.
 class NkFilterBar extends NkElement {
-  static get observedAttributes() { return ['search', 'placeholder', 'no-filter', 'no-sort', 'value']; }
+  static get observedAttributes() { return ['search', 'placeholder', 'no-filter', 'no-sort', 'value', 'add', 'add-label', 'filter-label', 'sort-label', 'remove-label']; }
 
   render() {
-    this._bar = document.createElement('div');
-    this._bar.style.cssText = 'display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:8px 0';
-    this._filterBtn = this.createElement('button', ['nk-btn', 'secondary', 'small'], { type: 'button', 'data-action': 'filter' });
-    this._filterBtn.textContent = '⚲ Filter';
-    this._sortBtn = this.createElement('button', ['nk-btn', 'secondary', 'small'], { type: 'button', 'data-action': 'sort' });
-    this._sortBtn.textContent = '↕ Sort';
-    this._chips = document.createElement('span');
-    this._chips.style.cssText = 'display:inline-flex;gap:4px;flex-wrap:wrap';
+    this._row = this.createElement('div', ['nk-filter-row']);
+    this._filterBtn = this.createElement('button', ['nk-db-tool'], { type: 'button', 'data-action': 'filter' });
+    this._sortBtn = this.createElement('button', ['nk-db-tool'], { type: 'button', 'data-action': 'sort' });
+    this._pillStart = document.createComment('pills');
+    this._addBtn = this.createElement('button', ['nk-filter-pill', 'add'], { type: 'button', 'data-action': 'add' });
     this._input = this.createElement('input', ['nk-input'], { type: 'search', autocomplete: 'off' });
-    this._input.style.marginLeft = 'auto';
-    this._bar.append(this._filterBtn, this._sortBtn, this._chips, document.createElement('slot'), this._input);
-    this._wrapper.appendChild(this._bar);
+    this._row.append(this._filterBtn, this._sortBtn, this._pillStart, this._addBtn, document.createElement('slot'), this._input);
+    this._wrapper.appendChild(this._row);
     this._filters = [];
     this._sync();
   }
 
   _sync() {
-    this._filterBtn.style.display = this.getBoolAttr('no-filter') ? 'none' : '';
-    this._sortBtn.style.display = this.getBoolAttr('no-sort') ? 'none' : '';
-    this._input.style.display = this.getBoolAttr('search') ? '' : 'none';
+    this._filterBtn.textContent = this.getAttribute('filter-label') || 'Filter';
+    this._filterBtn.hidden = this.getBoolAttr('no-filter');
+    this._filterBtn.classList.toggle('active', this._filters.length > 0);
+    this._sortBtn.textContent = this.getAttribute('sort-label') || 'Sort';
+    this._sortBtn.hidden = this.getBoolAttr('no-sort');
+    this._addBtn.textContent = this.getAttribute('add-label') || '＋ Filter';
+    this._addBtn.hidden = !this.getBoolAttr('add');
+    this._input.hidden = !this.getBoolAttr('search');
     this._input.placeholder = this.getAttribute('placeholder') || 'Search …';
     if (this.hasAttribute('value') && this._input.value !== this.getAttribute('value')) this._input.value = this.getAttribute('value');
-    this._chips.replaceChildren();
-    this._filters.forEach((f, i) => {
-      const chip = this.createElement('span', ['nk-tag', f.color || 'blue'], { 'data-index': i });
-      chip.style.cursor = 'pointer';
-      chip.textContent = `${f.label ?? `${f.key}: ${f.value}`} ×`;
-      chip.title = 'Remove filter';
-      this._chips.appendChild(chip);
-    });
+    for (const old of this._row.querySelectorAll('[data-pill]')) old.remove();
+    const removeLabel = this.getAttribute('remove-label') || 'Remove filter';
+    this._pillStart.after(...this._filters.map((f, i) => {
+      const pill = this.createElement('span', ['nk-filter-pill', 'active'], { 'data-pill': i });
+      const label = this.createElement('button', [], { type: 'button', 'data-edit': i });
+      label.textContent = f.label ?? `${f.key}: ${f.value}`;
+      const remove = this.createElement('button', ['fp-remove'], { type: 'button', 'data-remove': i, 'aria-label': `${removeLabel}: ${label.textContent}` });
+      remove.textContent = '×';
+      pill.append(label, remove);
+      return pill;
+    }));
   }
 
   setupEvents() {
     this._onClick = (e) => {
+      const remove = e.target.closest('[data-remove]');
+      if (remove) { this._filters.splice(Number(remove.dataset.remove), 1); this._sync(); this._emitChange(); return; }
+      const edit = e.target.closest('[data-edit]');
+      if (edit) { const index = Number(edit.dataset.edit); this.emit('nk-action', { action: 'edit', index, filter: this._filters[index], anchor: edit }); return; }
       const btn = e.target.closest('[data-action]');
-      if (btn) { this.emit('nk-action', { action: btn.dataset.action }); return; }
-      const chip = e.target.closest('[data-index]');
-      if (chip) { this._filters.splice(Number(chip.dataset.index), 1); this._sync(); this._emitChange(); }
+      if (btn) this.emit('nk-action', { action: btn.dataset.action, anchor: btn });
     };
     this._onInput = () => { clearTimeout(this._debounce); this._debounce = setTimeout(() => this._emitChange(), 150); };
-    this._bar.addEventListener('click', this._onClick);
+    this._row.addEventListener('click', this._onClick);
     this._input.addEventListener('input', this._onInput);
   }
 
   teardownEvents() {
-    this._bar?.removeEventListener('click', this._onClick);
+    this._row?.removeEventListener('click', this._onClick);
     this._input?.removeEventListener('input', this._onInput);
     clearTimeout(this._debounce);
   }
@@ -63,13 +80,18 @@ class NkFilterBar extends NkElement {
   onAttributeChanged() { this._sync(); }
 
   get filters() { return this._filters; }
-  set filters(v) { this._filters = Array.isArray(v) ? v : []; this._sync(); }
+  set filters(v) { this._filters = Array.isArray(v) ? v : []; if (this._row) this._sync(); }
   get value() { return this._input?.value ?? ''; }
   set value(v) { if (this._input) this._input.value = v ?? ''; }
-  /** Applies filters + search to rows: equality per filter key, substring search over every string field. */
+  /**
+   * Applies filters and search to rows: a filter keeps rows where row[key]
+   * equals value – or differs from it with op: 'is-not'; the search looks
+   * for the text in every string field (a person's name).
+   */
   apply(rows) {
     const q = this.value.trim().toLowerCase();
-    return rows.filter(r => this._filters.every(f => r[f.key] === f.value) && (!q || Object.values(r).some(v => String(typeof v === 'object' && v ? v.name ?? '' : v ?? '').toLowerCase().includes(q))));
+    return rows.filter(r => this._filters.every(f => (f.op === 'is-not' ? r[f.key] !== f.value : r[f.key] === f.value))
+      && (!q || Object.values(r).some(v => String(typeof v === 'object' && v ? v.name ?? '' : v ?? '').toLowerCase().includes(q))));
   }
 }
 

package/dist/components/nk-heading.js

@@ -1,4 +1,5 @@
-import { N as NkElement } from './shared/base-C3eJwHKA.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-C3eJwHKA.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-C3eJwHKA.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-C3eJwHKA.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-C3eJwHKA.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-C3eJwHKA.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>