@jungherz-de/notionkit-elements 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Jungherz GmbH
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,90 @@
+<p align="center">
+  <img src="https://img.shields.io/badge/version-1.0.0-2383e2?style=flat-square" alt="Version">
+  <a href="https://www.npmjs.com/package/@jungherz-de/notionkit-elements"><img src="https://img.shields.io/npm/v/@jungherz-de/notionkit-elements?style=flat-square&color=529cca" alt="npm"></a>
+  <a href="CHANGELOG.md"><img src="https://img.shields.io/badge/changelog-v1.0.0-9065b0?style=flat-square" alt="Changelog"></a>
+  <img src="https://img.shields.io/badge/license-MIT-448361?style=flat-square" alt="MIT">
+</p>
+
+# NotionKit Elements
+
+Vanilla-JS Web Components for the [NotionKit](https://notionkit.jungherz.com) CSS foundation – 68 `<nk-*>` custom elements with Shadow DOM, automatic light/dark sync, native form participation and pixel parity with the class markup. Same word stem as the CSS classes: `.nk-callout` becomes `<nk-callout>`, a modifier class becomes an attribute, a state class becomes a boolean attribute.
+
+- **Docs:** https://notionkit-elements.jungherz.com/docs.html – attributes, slots, events, before/after against the class markup
+- **Showcase:** https://notionkit-elements.jungherz.com/showcase.html – every element live, both themes, brand switch
+- **Demo app:** https://notionkit-elements.jungherz.com/app.html – the NotionKit reference app, elements only
+- **AI reference:** [SKILL.md](SKILL.md) – copy-paste markup, six app skeletons, rules and common mistakes
+
+## Quick start
+
+```html
+<!DOCTYPE html>
+<html lang="en" data-theme="light">
+<head>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit@1.1.1/notionkit.min.css">
+  <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit-elements@1.0.0/dist/notionkit-elements.min.js"></script>
+</head>
+<body class="nk-body">
+  <nk-field label="Display name" desc="Shown next to your comments">
+    <nk-input name="name" value="Ada Lovelace"></nk-input>
+  </nk-field>
+  <nk-btn variant="primary">Save</nk-btn>
+</body>
+</html>
+```
+
+```bash
+npm install @jungherz-de/notionkit-elements @jungherz-de/notionkit
+```
+
+```js
+import '@jungherz-de/notionkit/notionkit.css';
+import '@jungherz-de/notionkit-elements';                              // everything
+import '@jungherz-de/notionkit-elements/components/nk-btn.js';         // or one element (shared code is one extra chunk)
+```
+
+Two prerequisites, always: `notionkit.css` on the document (the peer dependency, `>= 1.0.0`; 1.1.1 is what the elements are built and tested against) and `class="nk-body"` on `<body>`. The elements ship no visual CSS of their own – every rule comes from the foundation. The bundle injects the design tokens once as `@layer notionkit-defaults`, so any plain `:root { --nk-accent: … }` of yours re-brands every element in both themes.
+
+## Elements
+
+| Group | Elements |
+|---|---|
+| Forms & controls | `nk-btn` `nk-input` `nk-textarea` `nk-select` `nk-switch` `nk-check` `nk-radio` `nk-slider` `nk-field` |
+| Content | `nk-tag` `nk-progress` `nk-callout` `nk-divider` `nk-heading` `nk-toggle` `nk-todo` `nk-kbd` `nk-code` `nk-quote` |
+| App shell & navigation | `nk-app` `nk-sidebar` `nk-workspace-switcher` `nk-section-label` `nk-tree` `nk-tree-item` `nk-topbar` `nk-breadcrumb` `nk-theme-toggle` |
+| Page shell & blocks | `nk-page` `nk-page-cover` `nk-page-title` `nk-page-actions` `nk-block-host` `nk-banner` `nk-empty` `nk-skeleton` `nk-synced` `nk-tabs` `nk-tab` `nk-segmented` `nk-stats` `nk-stat` `nk-avatar-group` `nk-mention` `nk-template-btn` `nk-model-card` `nk-profile-row` `nk-danger-zone` `nk-member-list` `nk-member-row` |
+| Overlays | `nk-modal` `nk-settings-pane` `nk-settings-user` `nk-cmdk` `nk-menu` `nk-menu-item` `nk-pop` `nk-emoji-picker` `nk-toast` |
+| Data & collaboration | `nk-database` `nk-table-view` `nk-board-view` `nk-filter-bar` `nk-comments` `nk-comment` `nk-ai-thread` `nk-ai-msg` `nk-ai-input-row` (+ the exported `renderPropertyCell()`) |
+
+Static content goes in through attributes and slots, dynamic data through properties (`tree.data`, `database.rows`, `palette.commands`). Interactions fire custom events with fixed names: `nk-select`, `nk-change`, `nk-view-change`, `nk-command`, `nk-toggle`, `nk-submit`, `nk-action`. No fetching, no two-way binding – the elements render what they get.
+
+## How it works
+
+- Each element's shadow root adopts the NotionKit **components** sheet only; tokens are inherited from the document. A `.nk-wrapper` inside the root mirrors `data-theme` from `<html>` – one observer for all instances.
+- Every host is `display: contents`: the inner `.nk-*` element sits in the parent layout exactly where the class markup would. That is what makes the pixel parity hold – and why spacing belongs on a wrapper you own, not on the host.
+- Form controls are form-associated custom elements: `FormData`, `reset`, `required` and `<fieldset disabled>` just work. `<nk-radio>`s with the same `name` form a real group across shadow roots, with one tab stop and arrow keys.
+- Elements that copy light-DOM children (`nk-select` options, breadcrumb crumbs) watch them; `element.refresh()` is the escape hatch. Listeners are re-armed on every connect, so a moved element keeps working.
+- `::slotted()` matches only the assigned node: pass icons directly (`<span slot="icon">📁</span>`), never wrapped.
+- Overlays (`nk-modal`, `nk-cmdk`, `nk-toast`) go directly under `<body>`; they lock scroll, make the rest of the page `inert` and return focus.
+- The editor stays an adapter: `nk-block-host` is the shell, `docs-editor.js` the TipTap recipe (used in the demo app). `<nk-editor>` follows in v1.1 as an optional import, never in the core bundle.
+
+## Development
+
+```bash
+npm install
+npm run build        # dist/: IIFE, minified IIFE, ESM, per-component ESM + shared chunk
+npm run build:all    # + docs.html, showcase.html, index.html, de/, SKILL.md, llms.txt
+npm test             # Playwright: pixel parity vs. class markup (both themes), branding, reconnect, radio groups, light-DOM drift, forms, overlays, data views, per-component import
+npm run check:coverage && npm run check:versions
+```
+
+`tools/catalog.mjs` is the single source for docs, showcase, SKILL.md, llms.txt, the coverage check and the parity test. `dist/` and the generated pages are committed; CI rebuilds them and fails on drift. `dist/` embeds the installed NotionKit version – release order: publish the CSS package first, `npm install` here, rebuild, commit, tag.
+
+## The NotionKit family
+
+| Layer | Package |
+|---|---|
+| **NotionKit** – CSS foundation | [`@jungherz-de/notionkit`](https://github.com/JUNGHERZ/NotionKit) |
+| **NotionKit Elements** – this package | `@jungherz-de/notionkit-elements` |
+| NotionKit Web – Astro template | planned |
+
+MIT · Jungherz GmbH

package/dist/components/nk-ai-input-row.js

@@ -0,0 +1,57 @@
+import { N as NkElement } from './shared/base-6gEcoatG.js';
+
+// <nk-ai-input-row placeholder="Ask Mona something …"></nk-ai-input-row>
+// → <div class="nk-ai-input-row"><span>✨</span><input><button class="nk-ai-send">↑</button></div>
+// Enter or the send button fires nk-submit { text } and clears the field.
+class NkAiInputRow extends NkElement {
+  static get observedAttributes() { return ['placeholder', 'value', 'disabled', 'icon']; }
+
+  render() {
+    this._row = this.createElement('div', ['nk-ai-input-row']);
+    this._icon = document.createElement('span');
+    this._icon.style.fontSize = '14px';
+    this._input = this.createElement('input', [], { type: 'text', 'aria-label': 'Message' });
+    this._btn = this.createElement('button', ['nk-ai-send'], { type: 'button', 'aria-label': 'Send' });
+    this._btn.textContent = '↑';
+    this._row.append(this._icon, this._input, this._btn);
+    this._wrapper.appendChild(this._row);
+    this._sync();
+  }
+
+  _sync() {
+    this._input.placeholder = this.getAttribute('placeholder') || 'Ask something …';
+    if (this.hasAttribute('value') && this._input.value !== this.getAttribute('value')) this._input.value = this.getAttribute('value');
+    this._input.disabled = this._btn.disabled = this.getBoolAttr('disabled');
+    const icon = this.getAttribute('icon') ?? '✨';
+    this._icon.textContent = icon;
+    this._icon.style.display = icon ? '' : 'none';
+  }
+
+  setupEvents() {
+    this._onSend = () => this.submit();
+    this._onKey = (e) => { if (e.key === 'Enter') { e.preventDefault(); this.submit(); } };
+    this._btn.addEventListener('click', this._onSend);
+    this._input.addEventListener('keydown', this._onKey);
+  }
+
+  teardownEvents() {
+    this._btn?.removeEventListener('click', this._onSend);
+    this._input?.removeEventListener('keydown', this._onKey);
+  }
+
+  submit() {
+    const text = this._input.value.trim();
+    if (!text || this.getBoolAttr('disabled')) return;
+    const ok = this.emit('nk-submit', { text });
+    if (ok) this._input.value = '';
+  }
+
+  onAttributeChanged() { this._sync(); }
+  focus(o) { this._input?.focus(o); }
+  get value() { return this._input?.value ?? ''; }
+  set value(v) { if (this._input) this._input.value = v ?? ''; }
+}
+
+customElements.define('nk-ai-input-row', NkAiInputRow);
+
+export { NkAiInputRow };

package/dist/components/nk-ai-msg.js

@@ -0,0 +1,67 @@
+import { N as NkElement } from './shared/base-6gEcoatG.js';
+
+// <nk-ai-msg role="user" name="You" avatar="MK">Summarise the open tasks.</nk-ai-msg>
+// <nk-ai-msg role="assistant" name="Mona" badge="· AI" avatar="✨">
+//   Two tasks are open …
+//   <button slot="actions" value="copy">📋 Copy</button><button slot="actions" value="retry">↻ Rephrase</button>
+// </nk-ai-msg>
+// → <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']; }
+
+  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);
+    const body = this.createElement('div', ['a-body']);
+    this._name = this.createElement('div', ['a-name']);
+    this._nameText = document.createTextNode('');
+    this._badge = document.createElement('span');
+    this._name.append(this._nameText, this._badge);
+    this._actions = this.createElement('div', ['nk-ai-actions']);
+    this._actionSlot = this.createElement('slot', [], { name: 'actions' });
+    this._actions.appendChild(this._actionSlot);
+    body.append(this._name, document.createElement('slot'), this._actions);
+    this._box.append(avatarSlot, body);
+    this._wrapper.appendChild(this._box);
+    this._sync();
+  }
+
+  _sync() {
+    const user = this.getAttribute('role') === 'user';
+    this._box.classList.toggle('user', user);
+    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';
+    this._avatar.textContent = this.getAttribute('avatar') || (user ? (name || 'U').slice(0, 2).toUpperCase() : '✨');
+    const color = this.getAttribute('color');
+    this._avatar.style.background = color || '';
+    this._actions.style.display = this._actionSlot.assignedElements().length ? '' : 'none';
+  }
+
+  setupEvents() {
+    this._onSlot = () => this._sync();
+    this._onClick = (e) => {
+      const btn = e.target.closest?.('button');
+      if (btn && this._actionSlot.assignedElements().includes(btn)) this.emit('nk-action', { action: btn.value || btn.textContent.trim(), value: btn.value || btn.textContent.trim() });
+    };
+    this._actionSlot.addEventListener('slotchange', this._onSlot);
+    this.addEventListener('click', this._onClick);
+    this._sync();
+  }
+
+  teardownEvents() {
+    this._actionSlot?.removeEventListener('slotchange', this._onSlot);
+    this.removeEventListener('click', this._onClick);
+  }
+
+  onAttributeChanged() { this._sync(); }
+}
+
+customElements.define('nk-ai-msg', NkAiMsg);
+
+export { NkAiMsg };

package/dist/components/nk-ai-thread.js

@@ -0,0 +1,14 @@
+import { N as NkElement } from './shared/base-6gEcoatG.js';
+
+// <nk-ai-thread><nk-ai-msg …>…</nk-ai-msg>…</nk-ai-thread>  →  <div class="nk-ai-thread">
+class NkAiThread extends NkElement {
+  render() {
+    const box = this.createElement('div', ['nk-ai-thread'], { role: 'log', 'aria-live': 'polite' });
+    box.appendChild(document.createElement('slot'));
+    this._wrapper.appendChild(box);
+  }
+}
+
+customElements.define('nk-ai-thread', NkAiThread);
+
+export { NkAiThread };

package/dist/components/nk-app.js

@@ -0,0 +1,23 @@
+import { N as NkElement } from './shared/base-6gEcoatG.js';
+
+// <nk-app>
+//   <nk-sidebar slot="sidebar">…</nk-sidebar>
+//   <nk-topbar>…</nk-topbar>
+//   <nk-page>…</nk-page>
+// </nk-app>
+// → <div class="nk-app"><aside class="nk-sidebar">…</aside><main class="nk-main">…</main></div>
+// The outermost element of a workspace app: a full-height flex row.
+class NkApp extends NkElement {
+  render() {
+    const app = this.createElement('div', ['nk-app']);
+    app.appendChild(this.createElement('slot', [], { name: 'sidebar' }));
+    const main = this.createElement('main', ['nk-main']);
+    main.appendChild(document.createElement('slot'));
+    app.appendChild(main);
+    this._wrapper.appendChild(app);
+  }
+}
+
+customElements.define('nk-app', NkApp);
+
+export { NkApp };

package/dist/components/nk-avatar-group.js

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

package/dist/components/nk-banner.js

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

package/dist/components/nk-block-host.js

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

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

@@ -0,0 +1,129 @@
+import { N as NkElement } from './shared/base-6gEcoatG.js';
+import { t as tagFor, r as renderPropertyCell } from './shared/property-cell-Dn91uFkf.js';
+
+// <nk-board-view name="board" label="▤ Board" group-by="status" new-row></nk-board-view>
+// Groups rows by a select column (default: the first select column); one
+// column per option, in option order. Cards show the title column and the
+// `meta-keys` (default: date and progress columns). Drag a card onto another
+// column to change its value – the row is updated and nk-change fires.
+// → <div class="nk-board active"><div class="nk-board-col">…</div>…</div>
+class NkBoardView extends NkElement {
+  static get observedAttributes() { return ['name', 'label', 'badge', 'count', 'group-by', 'title-key', 'meta-keys', 'new-row']; }
+
+  render() {
+    this._board = this.createElement('div', ['nk-board', 'active']);
+    this._wrapper.appendChild(this._board);
+    this._columns ??= []; this._rows ??= [];
+    this._render();
+    this.closest('nk-database')?.requestSync?.();
+  }
+
+  _groupColumn() {
+    const key = this.getAttribute('group-by');
+    return this._columns.find(c => c.key === key) || this._columns.find(c => c.type === 'select') || null;
+  }
+  _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 === 'date' || c.type === 'progress');
+  }
+
+  _render() {
+    if (!this._board) return;
+    this._board.replaceChildren();
+    const group = this._groupColumn(), title = this._titleColumn();
+    if (!group) return;
+    const options = group.options?.length ? group.options : [...new Set(this._rows.map(r => r[group.key]))].map(v => ({ value: v, label: String(v) }));
+    for (const opt of options) {
+      const col = this.createElement('div', ['nk-board-col'], { 'data-value': opt.value });
+      const header = this.createElement('div', ['nk-board-col-header']);
+      const cards = this._rows.filter(r => r[group.key] === opt.value || r[group.key] === opt.label);
+      const count = this.createElement('span', ['count']);
+      count.textContent = String(cards.length);
+      header.append(tagFor(group, opt.value), count);
+      col.appendChild(header);
+      for (const row of cards) {
+        const card = this.createElement('div', ['nk-card'], { draggable: 'true', 'data-id': row.id ?? '', tabindex: '0' });
+        const t = this.createElement('div', ['card-title']);
+        t.textContent = `${row.icon ? row.icon + ' ' : ''}${title ? row[title.key] ?? '' : ''}`;
+        const meta = this.createElement('div', ['card-meta']);
+        for (const c of this._metaColumns()) {
+          const v = row[c.key];
+          if (v === undefined || v === null || v === '') continue;
+          const s = document.createElement('span');
+          if (c.type === 'progress') s.textContent = `▰ ${v}%`;
+          else if (c.type === 'date') s.textContent = `📅 ${v}`;
+          else s.appendChild(renderPropertyCell(c, v, row));
+          meta.appendChild(s);
+        }
+        card.append(t, meta);
+        col.appendChild(card);
+      }
+      if (this.getBoolAttr('new-row')) {
+        const add = this.createElement('div', ['nk-new-row'], { role: 'button', tabindex: '0', 'data-add': opt.value });
+        add.style.padding = '6px 10px';
+        add.textContent = '＋';
+        col.appendChild(add);
+      }
+      this._board.appendChild(col);
+    }
+  }
+
+  setupEvents() {
+    this._onClick = (e) => {
+      const add = e.target.closest('[data-add]');
+      if (add) { this.emit('nk-action', { action: 'new-row', value: add.dataset.add }); return; }
+      const card = e.target.closest('.nk-card');
+      if (card) { const row = this._rowById(card.dataset.id); this.emit('nk-select', { row, id: row?.id, value: row?.id }); }
+    };
+    this._onDragStart = (e) => { const card = e.target.closest?.('.nk-card'); if (!card) return; this._dragId = card.dataset.id; e.dataTransfer.effectAllowed = 'move'; try { e.dataTransfer.setData('text/plain', card.dataset.id); } catch {} };
+    this._onDragOver = (e) => { if (this._dragId != null && e.target.closest('.nk-board-col')) { e.preventDefault(); e.dataTransfer.dropEffect = 'move'; } };
+    this._onDrop = (e) => {
+      const col = e.target.closest('.nk-board-col');
+      if (!col || this._dragId == null) return;
+      e.preventDefault();
+      this.move(this._dragId, col.dataset.value);
+      this._dragId = null;
+    };
+    this._board.addEventListener('click', this._onClick);
+    this._board.addEventListener('dragstart', this._onDragStart);
+    this._board.addEventListener('dragover', this._onDragOver);
+    this._board.addEventListener('drop', this._onDrop);
+  }
+
+  teardownEvents() {
+    this._board?.removeEventListener('click', this._onClick);
+    this._board?.removeEventListener('dragstart', this._onDragStart);
+    this._board?.removeEventListener('dragover', this._onDragOver);
+    this._board?.removeEventListener('drop', this._onDrop);
+  }
+
+  /** Moves a row into another column (sets the group value) and reports it. */
+  move(id, value) {
+    const row = this._rowById(id), group = this._groupColumn();
+    if (!row || !group || row[group.key] === value) return;
+    row[group.key] = value;
+    this._render();
+    this.emit('nk-change', { row, key: group.key, value });
+  }
+
+  _rowById(id) { return this._rows.find(r => String(r.id) === String(id)); }
+  onAttributeChanged() { this._render(); }
+
+  get name() { return this.getAttribute('name') || 'board'; }
+  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-board-view', NkBoardView);
+
+export { NkBoardView };

package/dist/components/nk-breadcrumb.js

@@ -0,0 +1,78 @@
+import { N as NkElement } from './shared/base-6gEcoatG.js';
+
+// <nk-breadcrumb>
+//   <a href="/overview">📊 Project overview</a>
+//   <span>🚀 NotionKit MVP</span>
+// </nk-breadcrumb>
+// → <nav class="nk-breadcrumb"><a class="crumb">…</a><span class="sep">/</span><span class="crumb current">…</span></nav>
+//
+// The children are *cloned* into the shadow tree so the separators can be
+// interleaved and `.crumb:hover` (no ::slotted twin) applies. A
+// MutationObserver keeps the copy in step. Clicking a clone fires nk-select
+// and, unless prevented, forwards the click to the original – so an <a>
+// navigates exactly once and framework listeners see it.
+class NkBreadcrumb extends NkElement {
+  static get observedAttributes() { return ['separator']; }
+  static get observesLightDom() { return true; }
+
+  render() {
+    this._nav = this.createElement('nav', ['nk-breadcrumb'], { 'aria-label': 'Breadcrumb' });
+    this._wrapper.appendChild(this._nav);
+    this.projectLightDom();
+  }
+
+  projectLightDom() {
+    if (!this._nav) return;
+    const originals = [...this.children];
+    const sep = this.getAttribute('separator') ?? '/';
+    const signature = originals.map(o => o.outerHTML).join('') + sep;
+    if (signature === this._signature) return;
+    this._signature = signature;
+    this._nav.innerHTML = '';
+    const explicitCurrent = originals.some(o => o.hasAttribute('current') || o.classList.contains('current'));
+    originals.forEach((original, i) => {
+      if (i > 0) {
+        const s = this.createElement('span', ['sep'], { 'aria-hidden': 'true' });
+        s.textContent = sep;
+        this._nav.appendChild(s);
+      }
+      const clone = original.cloneNode(true);
+      clone.removeAttribute('slot');
+      clone.classList.add('crumb');
+      const current = explicitCurrent ? (original.hasAttribute('current') || original.classList.contains('current')) : i === originals.length - 1;
+      clone.classList.toggle('current', current);
+      if (current) clone.setAttribute('aria-current', 'page');
+      clone.dataset.index = i;
+      this._nav.appendChild(clone);
+    });
+  }
+
+  setupEvents() {
+    this._onClick = (e) => {
+      const clone = e.target.closest('.crumb');
+      if (!clone) return;
+      e.preventDefault();
+      const index = Number(clone.dataset.index);
+      // Look the original up at click time: a framework may have replaced it.
+      const original = this.children[index];
+      const ok = this.emit('nk-select', {
+        index, label: clone.textContent.trim(), href: original?.getAttribute('href') ?? null,
+        value: original?.dataset.value ?? original?.getAttribute('href') ?? clone.textContent.trim(),
+        current: clone.classList.contains('current'),
+      });
+      if (ok) original?.click();
+    };
+    this._nav.addEventListener('click', this._onClick);
+  }
+
+  teardownEvents() { this._nav?.removeEventListener('click', this._onClick); }
+
+  onAttributeChanged() { this.projectLightDom(); }
+
+  get separator() { return this.getAttribute('separator') ?? '/'; }
+  set separator(v) { this.setAttribute('separator', v); }
+}
+
+customElements.define('nk-breadcrumb', NkBreadcrumb);
+
+export { NkBreadcrumb };