@jungherz-de/notionkit-elements 1.6.0 → 1.8.0

package/README.md

@@ -1,17 +1,17 @@
 <h1 align="center">🧩 NotionKit Elements</h1>
 
 <p align="center">
-  <a href="https://www.npmjs.com/package/@jungherz-de/notionkit-elements"><img src="https://img.shields.io/badge/version-1.6.0-2383e2?style=flat-square" alt="Version"></a>
+  <a href="https://www.npmjs.com/package/@jungherz-de/notionkit-elements"><img src="https://img.shields.io/badge/version-1.8.0-2383e2?style=flat-square" alt="Version"></a>
   <a href="#"><img src="https://img.shields.io/badge/vanilla_JS-no_dependencies-448361?style=flat-square" alt="Vanilla JS"></a>
-  <a href="#"><img src="https://img.shields.io/badge/elements-77-529cca?style=flat-square" alt="77 Elements"></a>
+  <a href="#"><img src="https://img.shields.io/badge/elements-83-529cca?style=flat-square" alt="83 Elements"></a>
   <a href="LICENSE"><img src="https://img.shields.io/badge/license-MIT-9065b0?style=flat-square" alt="MIT License"></a>
-  <a href="CHANGELOG.md"><img src="https://img.shields.io/badge/changelog-v1.6.0-lightgrey?style=flat-square" alt="Changelog"></a>
+  <a href="CHANGELOG.md"><img src="https://img.shields.io/badge/changelog-v1.8.0-lightgrey?style=flat-square" alt="Changelog"></a>
   <a href="https://www.npmjs.com/package/@jungherz-de/notionkit-elements"><img src="https://img.shields.io/badge/npm-%40jungherz--de%2Fnotionkit--elements-cb3837?style=flat-square&logo=npm" alt="npm"></a>
 </p>
 
 <p align="center">
   <strong>Drop-in Web Components for <a href="https://github.com/JUNGHERZ/NotionKit">NotionKit CSS</a></strong><br>
-  77 vanilla JavaScript custom elements wrapping NotionKit's calm, document-centric workspace look.<br>
+  83 vanilla JavaScript custom elements wrapping NotionKit's calm, document-centric workspace look.<br>
   Shadow DOM &middot; Native form participation &middot; Pixel parity with the class markup &middot; Zero dependencies.
 </p>
 
@@ -28,7 +28,7 @@
 
 ## ✨ What is NotionKit Elements?
 
-NotionKit Elements is the companion library to [NotionKit CSS](https://github.com/JUNGHERZ/NotionKit). It provides **77 Web Components** – from buttons and form controls over the sidebar, page tree and page shell with its properties to the settings modal, ⌘K palette, database views and AI thread – that encapsulate the class markup of the foundation into simple, declarative custom elements.
+NotionKit Elements is the companion library to [NotionKit CSS](https://github.com/JUNGHERZ/NotionKit). It provides **83 Web Components** – from buttons and form controls over the sidebar, page tree and page shell with its properties to the settings modal, the bottom sheet, the side peek, ⌘K palette, database views with Notion’s toolbar and AI thread – that encapsulate the class markup of the foundation into simple, declarative custom elements.
 
 It is the **app layer** of the NotionKit family – three layers, one design language: [NotionKit](https://notionkit.jungherz.com) is the pure-CSS foundation, NotionKit Elements wraps it into web components for application UIs, and [NotionKit Web](https://notionkit-web.jungherz.com) is the Astro template for complete websites on top of the same foundation. The word stem stays the same across the layers: `.nk-callout` becomes `<nk-callout>`, a modifier class becomes an attribute, a state class becomes a boolean attribute.
 
@@ -56,10 +56,10 @@ It is the **app layer** of the NotionKit family – three layers, one design lan
 |---|---|
 | 🎯 **Pixel parity** | Every element renders identically to its class markup – verified by a Playwright pixel test in light and dark; the reference app differs by 0.00 % from the class version |
 | 🔌 **Shadow DOM** | Each root adopts the NotionKit *components* sheet via `adoptedStyleSheets`; tokens are inherited from the document, so one `:root { --nk-accent: … }` re-brands everything |
-| 🧩 **77 Elements** | Forms, content blocks, app shell & tree, page shell with properties, panels and avatars, overlays (modal, ⌘K palette, menus, popover, emoji picker, toast), database table, board & list, comments, AI thread |
+| 🧩 **83 Elements** | Forms with copy field and image picker, content blocks with bookmarks, app shell & tree with the ☰ drawer, page shell with properties, panels, avatars and steps, overlays (modal, sheet, side peek, ⌘K palette, menus that float in and become sheets on a phone, popover, emoji picker, toast), database table, board & list with toolbar and filter pills, comments, AI thread |
 | 🎛️ **Form participation** | Input, textarea, select, switch, check, radio, slider, segmented and model card work natively with `<form>` via `ElementInternals`; radios group across shadow roots |
 | 🌗 **Theme sync** | One observer mirrors `data-theme` on `<html>` into every element |
-| 🪶 **Lightweight** | 197 KB minified / 39 KB gzipped (IIFE, foundation sheet included), no external dependencies |
+| 🪶 **Lightweight** | 225 KB minified / 44 KB gzipped (IIFE, foundation sheet included), no external dependencies |
 | 📦 **Four bundle shapes** | IIFE, minified IIFE, ESM, and per-component ESM entries on a stable `base.js`, which import NotionKit's sheet instead of carrying a copy |
 | 🤖 **AI-ready** | `SKILL.md` with copy-paste markup, six app skeletons and the rules – an agent given only that file built a working app in the release test |
 
@@ -71,8 +71,8 @@ It is the **app layer** of the NotionKit family – three layers, one design lan
 <!DOCTYPE html>
 <html lang="en" data-theme="light">
 <head>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit@1.6.0/notionkit.min.css">
-  <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit-elements@1.6.0/dist/notionkit-elements.min.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit@1.8.0/notionkit.min.css">
+  <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit-elements@1.8.0/dist/notionkit-elements.min.js"></script>
 </head>
 <body class="nk-body">
   <nk-field label="Display name" desc="Shown next to your comments">
@@ -102,17 +102,17 @@ The per-component files import NotionKit's sheet as `@jungherz-de/notionkit/noti
 
 Do not mix the full bundle with the per-component files: each brings its own `NkElement`. With the bundle, take `componentsSheet` and `NkElement` from the bundle (`NotionKitElements.componentsSheet` from the `<script>` build).
 
-Two prerequisites, always: `notionkit.css` on the document (the peer dependency, `>= 1.6.0`; 1.6.0 brings page properties, page options, list view, panels, prose and the avatar, 1.5.1 the safe areas, 1.5.0 the Notion-2025 tokens, the nine tag colours and the filled inputs; from 1.5.0 on, Elements and the foundation share one version number – the elements are built and tested against the same release) 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.
+Two prerequisites, always: `notionkit.css` on the document (the peer dependency, `>= 1.8.0`; 1.8.0 brings the side peek, the bookmark, the copy field and pictures on the profile row, 1.7.0 the sheet, menus that float in and become sheets on a phone, the sidebar drawer, the database toolbar with filter pills and the steps, 1.7.1 minified files that carry all of it, 1.6.0 page properties, page options, list view, panels, prose and the avatar, 1.5.1 the safe areas, 1.5.0 the Notion-2025 tokens, the nine tag colours and the filled inputs; from 1.5.0 on, Elements and the foundation share one version number – the elements are built and tested against the same release) 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` `nk-fields` |
-| Content | `nk-tag` `nk-progress` `nk-callout` `nk-divider` `nk-heading` `nk-toggle` `nk-todo` `nk-kbd` `nk-code` `nk-quote` |
+| Forms & controls | `nk-btn` `nk-input` `nk-textarea` `nk-select` `nk-switch` `nk-check` `nk-radio` `nk-slider` `nk-field` `nk-fields` `nk-copy-field` `nk-image-picker` |
+| Content | `nk-tag` `nk-progress` `nk-callout` `nk-bookmark` `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` `nk-tab-bar` `nk-tab-bar-item` |
-| Page shell & blocks | `nk-page` `nk-page-cover` `nk-page-title` `nk-page-actions` `nk-props` `nk-prop` `nk-panels` `nk-panel` `nk-avatar` `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` |
+| Page shell & blocks | `nk-page` `nk-page-cover` `nk-page-title` `nk-page-actions` `nk-props` `nk-prop` `nk-panels` `nk-panel` `nk-avatar` `nk-block-host` `nk-banner` `nk-empty` `nk-skeleton` `nk-synced` `nk-tabs` `nk-tab` `nk-segmented` `nk-steps` `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-sheet` `nk-peek` `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-list-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.
@@ -124,7 +124,7 @@ Static content goes in through attributes and slots, dynamic data through proper
 - 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. For the same reason there is no `<nk-prose>`: rendered Markdown goes into a light-DOM `<div class="nk-prose">`, which reads the same rules as the editor adapter.
-- Overlays (`nk-modal`, `nk-cmdk`, `nk-toast`) go directly under `<body>`; they lock scroll, make the rest of the page `inert` and return focus.
+- Overlays (`nk-modal`, `nk-sheet`, `nk-peek`, `nk-cmdk`, `nk-toast`, a floating `nk-menu`) go directly under `<body>`. The modal, the sheet and the palette lock scroll and make the rest of the page `inert` – the side peek only as a sheet on a phone, beside the page it leaves it usable; all of them return focus to the control that had it.
 - 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

package/dist/components/nk-bookmark.js

@@ -0,0 +1,69 @@
+import { NkElement } from './base.js';
+import '@jungherz-de/notionkit/notionkit-styles.js';
+
+// <nk-bookmark href="https://notionkit.jungherz.com" title="NotionKit" desc="…"
+//              favicon="favicon.svg" cover="og.jpg"></nk-bookmark>
+// → <a class="nk-bookmark" href="…" target="_blank" rel="noopener">
+//     <span class="bm-text"><span class="bm-title">…</span><span class="bm-desc">…</span>
+//       <span class="bm-url"><img class="bm-favicon"><span>…</span></span></span>
+//     <span class="bm-cover"><img></span></a>
+// Notion's link block (NotionKit 1.8.0), filled from what you know of the
+// page: og:title, og:description, og:image. `title` is the heading, never a
+// tooltip – see NkElement.takeTitle(); without it the host name stands in.
+// The address shown is `href`, or `url` where it should read differently. A
+// part without a value is left out, not hidden – the stylesheet gives the
+// description its own display. Opens in a new tab unless `target` says so.
+class NkBookmark extends NkElement {
+  static get observedAttributes() { return ['href', 'title', 'desc', 'favicon', 'cover', 'target', 'url']; }
+
+  render() {
+    this.takeTitle();
+    this._a = this.createElement('a', ['nk-bookmark']);
+    this._wrapper.appendChild(this._a);
+    this._sync();
+  }
+
+  _sync() {
+    if (!this._a) return;
+    const href = this.getAttribute('href') || '';
+    this._a.setAttribute('href', href);
+    const target = this.getAttribute('target') || '_blank';
+    this._a.setAttribute('target', target);
+    if (target === '_blank') this._a.setAttribute('rel', 'noopener'); else this._a.removeAttribute('rel');
+    let host = href;
+    try { host = new URL(href, location.href).host; } catch { /* keep the text */ }
+
+    const text = this.createElement('span', ['bm-text']);
+    const title = this.createElement('span', ['bm-title']);
+    title.textContent = this._titleText || host;
+    text.appendChild(title);
+    const desc = this.getAttribute('desc');
+    if (desc) { const d = this.createElement('span', ['bm-desc']); d.textContent = desc; text.appendChild(d); }
+    const url = this.createElement('span', ['bm-url']);
+    const favicon = this.getAttribute('favicon');
+    if (favicon) url.appendChild(this.createElement('img', ['bm-favicon'], { src: favicon, alt: '' }));
+    const address = document.createElement('span');
+    address.textContent = this.getAttribute('url') || href;
+    url.appendChild(address);
+    text.appendChild(url);
+    const parts = [text];
+    const cover = this.getAttribute('cover');
+    if (cover) { const c = this.createElement('span', ['bm-cover']); c.appendChild(this.createElement('img', [], { src: cover, alt: '' })); parts.push(c); }
+    this._a.replaceChildren(...parts);
+  }
+
+  onAttributeChanged(name, _old, value) {
+    if (name === 'title' && !this.takeTitle(value)) return;
+    this._sync();
+  }
+
+  focus(o) { this._a?.focus(o); }
+  get title() { return this._titleText ?? ''; }
+  set title(v) { this._titleText = v == null ? '' : String(v); this._sync(); }
+  get href() { return this.getAttribute('href') || ''; }
+  set href(v) { this.setAttribute('href', v); }
+}
+
+customElements.define('nk-bookmark', NkBookmark);
+
+export { NkBookmark };

package/dist/components/nk-btn.js

@@ -4,13 +4,16 @@ 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();
@@ -38,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');
@@ -53,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) {
@@ -67,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':
@@ -82,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');
@@ -93,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-cmdk.js

@@ -1,5 +1,5 @@
 import { NkElement } from './base.js';
-import { l as lockScroll, i as inertOutside, u as unlockScroll } from './shared/focus-DXrK9oLe.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

package/dist/components/nk-copy-field.js

@@ -0,0 +1,88 @@
+import { NkElement } from './base.js';
+import '@jungherz-de/notionkit/notionkit-styles.js';
+
+// <nk-copy-field value="https://monahilft.notionkit.app"></nk-copy-field>
+// <nk-copy-field value="ntn_4f2…" secret mono></nk-copy-field>
+// → <div class="nk-copy-field mono"><span class="cf-value">…</span>
+//     <button class="cf-btn">Show</button><button class="cf-btn">Copy</button></div>
+// A value to take along – a link, an address, a key (NotionKit 1.8.0). Copy
+// writes it to the clipboard and says "Copied" in green for a moment; where
+// the clipboard is not allowed, the value is shown and selected instead, for
+// ⌘C. `secret` masks it behind a Show/Hide toggle; Copy still copies the
+// real value. `value` set as a property is not reflected, so a key never
+// lands in the markup. Fires nk-action { action: 'copy', value, ok }. The
+// texts are attributes: copy-label, copied-label, show-label, hide-label.
+class NkCopyField extends NkElement {
+  static get observedAttributes() { return ['value', 'mono', 'wrap', 'wide', 'secret', 'copy-label', 'copied-label', 'show-label', 'hide-label']; }
+
+  render() {
+    this._val ??= this.getAttribute('value') ?? '';
+    this._box = this.createElement('div', ['nk-copy-field']);
+    this._text = this.createElement('span', ['cf-value']);
+    this._show = this.createElement('button', ['cf-btn'], { type: 'button' });
+    this._copy = this.createElement('button', ['cf-btn'], { type: 'button' });
+    this._box.append(this._text, this._copy);
+    this._wrapper.appendChild(this._box);
+    this._sync();
+  }
+
+  _sync() {
+    if (!this._box) return;
+    for (const m of ['mono', 'wrap', 'wide']) this._box.classList.toggle(m, this.getBoolAttr(m));
+    const secret = this.getBoolAttr('secret');
+    this._text.textContent = secret && !this._revealed ? '•'.repeat(Math.min(this._val.length, 24)) : this._val;
+    // Not `hidden`: .cf-btn sets no display of its own that could lose to it,
+    // but a button that is not there cannot be tabbed to either.
+    if (secret && !this._show.isConnected) this._copy.before(this._show);
+    if (!secret) this._show.remove();
+    this._show.textContent = this._revealed ? (this.getAttribute('hide-label') || 'Hide') : (this.getAttribute('show-label') || 'Show');
+    this._show.setAttribute('aria-pressed', String(!!this._revealed));
+    this._copy.textContent = this._copied ? (this.getAttribute('copied-label') || 'Copied') : (this.getAttribute('copy-label') || 'Copy');
+    this._copy.classList.toggle('copied', !!this._copied);
+  }
+
+  setupEvents() {
+    this._onCopy = () => this.copy();
+    this._onShow = () => { this._revealed = !this._revealed; this._sync(); };
+    this._copy.addEventListener('click', this._onCopy);
+    this._show.addEventListener('click', this._onShow);
+  }
+
+  teardownEvents() {
+    this._copy?.removeEventListener('click', this._onCopy);
+    this._show?.removeEventListener('click', this._onShow);
+    clearTimeout(this._timer);
+  }
+
+  onAttributeChanged(name, _old, value) {
+    if (name === 'value') this._val = value ?? '';
+    this._sync();
+  }
+
+  /** Copies the value; resolves to whether the clipboard took it. */
+  async copy() {
+    const value = this._val;
+    let ok = true;
+    try { await navigator.clipboard.writeText(value); } catch { ok = false; }
+    if (ok) {
+      this._copied = true;
+      clearTimeout(this._timer);
+      this._timer = setTimeout(() => { this._copied = false; this._sync(); }, 1500);
+    } else {
+      this._revealed = true;
+    }
+    this._sync();
+    if (!ok) getSelection()?.selectAllChildren(this._text);
+    this.emit('nk-action', { action: 'copy', value, ok });
+    return ok;
+  }
+
+  get value() { return this._val ?? this.getAttribute('value') ?? ''; }
+  set value(v) { this._val = v == null ? '' : String(v); this._sync(); }
+  get secret() { return this.getBoolAttr('secret'); }
+  set secret(v) { this.setBoolAttr('secret', v); }
+}
+
+customElements.define('nk-copy-field', NkCopyField);
+
+export { NkCopyField };

package/dist/components/nk-database.js

@@ -7,16 +7,24 @@ import '@jungherz-de/notionkit/notionkit-styles.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();
@@ -44,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;
   }
 
@@ -71,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();
   }
 
@@ -78,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-filter-bar.js

@@ -1,61 +1,77 @@
 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);
   }
@@ -64,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))));
   }
 }