@jungherz-de/notionkit-elements 1.10.0 → 1.11.0

package/README.md

@@ -1,11 +1,11 @@
 <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.10.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.11.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-87-529cca?style=flat-square" alt="87 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.10.0-lightgrey?style=flat-square" alt="Changelog"></a>
+  <a href="CHANGELOG.md"><img src="https://img.shields.io/badge/changelog-v1.11.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>
 
@@ -59,7 +59,7 @@ It is the **app layer** of the NotionKit family – three layers, one design lan
 | 🧩 **87 Elements** | Forms with copy field, image picker and date picker, content blocks with bookmarks, app shell & tree with the ☰ drawer and the collapsing sidebar, page shell with properties, panels, avatars and steps, overlays (modal, sheet, dialog, resizable side peek, tooltip, ⌘K palette, menus that float in and become sheets on a phone, popover, emoji picker, toast), database table, board, list & calendar 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** | 265 KB minified / 52 KB gzipped (IIFE, foundation sheet included), no external dependencies |
+| 🪶 **Lightweight** | 267 KB minified / 53 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.10.0/notionkit.min.css">
-  <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit-elements@1.10.0/dist/notionkit-elements.min.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit@1.11.0/notionkit.min.css">
+  <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit-elements@1.11.0/dist/notionkit-elements.min.js"></script>
 </head>
 <body class="nk-body">
   <nk-field label="Display name" desc="Shown next to your comments">
@@ -102,7 +102,7 @@ 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.10.0`; 1.10.0 brings the collapsing sidebar, the resizable side peek, the dialog and the tooltip, 1.9.0 the date picker and the calendar view, 1.8.0 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.
+Two prerequisites, always: `notionkit.css` on the document (the peer dependency, `>= 1.11.0`; 1.11.0 keeps a floating menu inside an open modal or dialog in place and inside the window and brings the banner's action as a button, fields that share a row and tooltips of several lines, 1.10.1 lets a disabled button show its tooltip, 1.10.0 brings the collapsing sidebar, the resizable side peek, the dialog and the tooltip, 1.9.0 the date picker and the calendar view, 1.8.0 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
 

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

@@ -38,13 +38,15 @@ class NkAiMsg extends NkElement {
     this._box.classList.toggle('user', user);
     this._box.classList.toggle('bubble', bubble);
     const name = this.getAttribute('name');
-    this._nameText.data = name || '';
-    const badge = this.getAttribute('badge');
-    this._badge.textContent = badge ? ` ${badge}` : '';
+    // Runs on slotchange: write text on a change only (see nk-switch).
+    if (this._nameText.data !== (name || '')) this._nameText.data = name || '';
+    const badge = this.getAttribute('badge'), badgeText = badge ? ` ${badge}` : '';
+    if (this._badge.textContent !== badgeText) this._badge.textContent = badgeText;
     // A bubble stands without avatar and name; the text says who asked.
     this._name.style.display = name && !bubble ? '' : 'none';
     this._avatarSlot.style.display = bubble ? 'none' : '';
-    this._avatar.textContent = this.getAttribute('avatar') || (user ? (name || 'U').slice(0, 2).toUpperCase() : '✨');
+    const avatar = this.getAttribute('avatar') || (user ? (name || 'U').slice(0, 2).toUpperCase() : '✨');
+    if (this._avatar.textContent !== avatar) this._avatar.textContent = avatar;
     const color = this.getAttribute('color');
     this._avatar.style.background = color || '';
     this._actions.style.display = this._actionSlot.assignedElements().length ? '' : 'none';

package/dist/components/nk-avatar.js

@@ -1,5 +1,5 @@
 import { NkElement } from './base.js';
-import { p as paintAvatar, i as initialsOf } from './shared/avatar-BiqCaHOt.js';
+import { p as paintAvatar, i as initialsOf } from './shared/avatar-CzPZN3uP.js';
 import '@jungherz-de/notionkit/notionkit-styles.js';
 
 // <nk-avatar>MK</nk-avatar>                       → <span class="nk-avatar">MK</span>

package/dist/components/nk-banner.js

@@ -1,8 +1,11 @@
 import { NkElement } from './base.js';
 import '@jungherz-de/notionkit/notionkit-styles.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>
+// <nk-banner variant="info">ℹ️ <span>Text</span><button slot="action" type="button">Open</button></nk-banner>
+// → <div class="nk-banner info">…<button class="b-action" type="button">Open</button></div>
+//
+// The action is a <button>, which NotionKit (1.11.0) strips down to
+// underlined text; below 860px it moves under the text.
 const VARIANTS = ['info', 'success', 'warning', 'danger'];
 
 class NkBanner extends NkElement {

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

@@ -1,7 +1,7 @@
 import { NkElement } from './base.js';
-import { t as tagFor, r as renderPropertyCell } from './shared/property-cell-o7N30kAQ.js';
+import { t as tagFor, r as renderPropertyCell } from './shared/property-cell-Cddz5n2O.js';
 import '@jungherz-de/notionkit/notionkit-styles.js';
-import './shared/avatar-BiqCaHOt.js';
+import './shared/avatar-CzPZN3uP.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

package/dist/components/nk-calendar.js

@@ -1,6 +1,6 @@
 import { NkFormElement } from './base.js';
 import { p as parseDay, i as isoOf, C as CHEVRONS, r as resolveLocale, f as firstWeekday, m as monthGrid, w as weekLabel, a as weekdayNames, b as isoWeek, s as stepMonth, c as addDays } from './shared/dates-a32DcW1l.js';
-import { p as placeUnder } from './shared/floating-CxHxy-Cb.js';
+import { p as placeUnder } from './shared/floating-CtqV6MBj.js';
 import { d as deepActiveElement } from './shared/focus-BNAChOXO.js';
 import '@jungherz-de/notionkit/notionkit-styles.js';
 
@@ -44,7 +44,7 @@ import '@jungherz-de/notionkit/notionkit-styles.js';
 // outside does. Put a floating calendar directly under <body>.
 const STEPS = { ArrowLeft: -1, ArrowRight: 1, ArrowUp: -7, ArrowDown: 7 };
 const floatSheet = new CSSStyleSheet();
-floatSheet.replaceSync(`:host([floating]) { display: block; position: fixed; z-index: 60; pointer-events: none; }`);
+floatSheet.replaceSync(`:host([floating]) { display: block; position: fixed; top: 0; left: 0; z-index: 60; pointer-events: none; }`);
 
 class NkCalendar extends NkFormElement {
   static get hostStyles() { return floatSheet; }

package/dist/components/nk-comment.js

@@ -1,5 +1,5 @@
 import { NkElement } from './base.js';
-import { i as initialsOf, p as paintAvatar } from './shared/avatar-BiqCaHOt.js';
+import { i as initialsOf, p as paintAvatar } from './shared/avatar-CzPZN3uP.js';
 import '@jungherz-de/notionkit/notionkit-styles.js';
 
 // <nk-comment author="Sara Lindt" time="1 hr ago" avatar="SL" color="green">The board view feels close.</nk-comment>

package/dist/components/nk-dialog.js

@@ -18,10 +18,13 @@ import '@jungherz-de/notionkit/notionkit-styles.js';
 // scroll-locked. It lies above the modal and the sheet, so a question can
 // come from either. 440px, `wide` 560px; below 860px a bottom sheet with the
 // buttons stacked, the confirming one on top.
-// A button in slot="actions" with a `value` closes it with that value; so
-// does the submit of a <form method="dialog"> inside, with its submitter's
-// value. Before it closes, nk-close { value } fires and can be cancelled –
-// the place to check an input dialog; Escape and the backdrop close with ''.
+// A button in slot="actions" with a `value` closes it with that value, and
+// one anywhere inside with `data-close` with that attribute's value – a
+// button with a value elsewhere, an option of <nk-segmented> say, leaves it
+// open. The submit of a <form method="dialog"> inside closes it too, with
+// its submitter's value. Before it closes, nk-close { value } fires and can
+// be cancelled – the place to check an input dialog; Escape and the
+// backdrop close with ''.
 // `returnValue` keeps the last value. `alert` makes it an alertdialog, named
 // and described by its title and text. `title` is the heading, never a
 // tooltip – see NkElement.takeTitle(). Put it directly under <body>.
@@ -91,11 +94,14 @@ class NkDialog extends NkElement {
   setupEvents() {
     this._onBackdrop = (e) => { if (e.target === this._backdrop) this.close(''); };
     this._onKey = (e) => { if (e.key === 'Escape' && this.getBoolAttr('open')) { e.stopPropagation(); this.close(''); } };
-    // A button with a value closes it; a submit button is the form's.
+    // A button in the actions with a value closes it, and one with data-close
+    // anywhere inside; a submit button is the form's.
     this._onClick = (e) => {
-      const button = e.composedPath().find(n => n instanceof Element && n !== this && this.contains(n) && n.hasAttribute('value') && (n.localName === 'nk-btn' || n.localName === 'button'));
-      if (!button || button.getAttribute('type') === 'submit') return;
-      this.close(button.getAttribute('value'));
+      const path = e.composedPath(), own = path.slice(0, Math.max(0, path.indexOf(this))).filter(n => n instanceof Element && this.contains(n));
+      const button = own.find(n => n.localName === 'nk-btn' || n.localName === 'button');
+      if (!button || button.getAttribute('type') === 'submit' || button.hasAttribute('disabled')) return;
+      if (button.hasAttribute('data-close')) { this.close(button.getAttribute('data-close')); return; }
+      if (button.hasAttribute('value') && own.some(n => n.getAttribute('slot') === 'actions')) this.close(button.getAttribute('value'));
     };
     this._onSubmit = (e) => {
       if ((e.target.getAttribute('method') || '').toLowerCase() !== 'dialog') return;

package/dist/components/nk-fields.js

@@ -10,12 +10,22 @@ import '@jungherz-de/notionkit/notionkit-styles.js';
 // nk-field inside renders itself stacked and compact (12px label above a
 // full-width control) – the class markup does the same through
 // `.nk-fields > .nk-field`, which cannot cross the shadow boundary here.
+// `fit` (NotionKit 1.11.0) lets the fields share the row instead of keeping
+// 150px columns: two fields in a wide dialog are two halves.
 class NkFields extends NkElement {
+  static get observedAttributes() { return ['fit']; }
+
   render() {
-    const grid = this.createElement('div', ['nk-fields']);
-    grid.appendChild(document.createElement('slot'));
-    this._wrapper.appendChild(grid);
+    this._grid = this.createElement('div', ['nk-fields']);
+    this._grid.appendChild(document.createElement('slot'));
+    this._wrapper.appendChild(this._grid);
+    this.onAttributeChanged();
   }
+
+  onAttributeChanged() { this._grid?.classList.toggle('fit', this.getBoolAttr('fit')); }
+
+  get fit() { return this.getBoolAttr('fit'); }
+  set fit(v) { this.setBoolAttr('fit', v); }
 }
 
 customElements.define('nk-fields', NkFields);

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

@@ -59,7 +59,7 @@ class NkFilterBar extends NkElement {
   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; }
+      if (remove) { const i = Number(remove.dataset.remove); this._filters = this._filters.filter((_, j) => j !== i); 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]');
@@ -79,8 +79,10 @@ class NkFilterBar extends NkElement {
   _emitChange() { this.emit('nk-change', { filters: [...this._filters], search: this._input.value }); }
   onAttributeChanged() { this._sync(); }
 
-  get filters() { return this._filters; }
-  set filters(v) { this._filters = Array.isArray(v) ? v : []; if (this._row) this._sync(); }
+  // A copy each way: the caller's array is never changed – removing a pill
+  // only reports the new list in nk-change.
+  get filters() { return [...this._filters]; }
+  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 ?? ''; }
   /**

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

@@ -1,7 +1,7 @@
 import { NkElement } from './base.js';
-import { r as renderPropertyCell } from './shared/property-cell-o7N30kAQ.js';
+import { r as renderPropertyCell } from './shared/property-cell-Cddz5n2O.js';
 import '@jungherz-de/notionkit/notionkit-styles.js';
-import './shared/avatar-BiqCaHOt.js';
+import './shared/avatar-CzPZN3uP.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`

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

@@ -1,5 +1,5 @@
 import { NkElement } from './base.js';
-import { i as initialsOf, p as paintAvatar } from './shared/avatar-BiqCaHOt.js';
+import { i as initialsOf, p as paintAvatar } from './shared/avatar-CzPZN3uP.js';
 import '@jungherz-de/notionkit/notionkit-styles.js';
 
 // <nk-member-row name="Sara Lindt" mail="sara@…" avatar="SL" color="green">

package/dist/components/nk-menu.js

@@ -1,6 +1,6 @@
 import { NkElement } from './base.js';
 import { d as deepActiveElement } from './shared/focus-BNAChOXO.js';
-import { p as placeUnder } from './shared/floating-CxHxy-Cb.js';
+import { p as placeUnder } from './shared/floating-CtqV6MBj.js';
 import '@jungherz-de/notionkit/notionkit-styles.js';
 
 // <nk-menu>
@@ -20,7 +20,7 @@ import '@jungherz-de/notionkit/notionkit-styles.js';
 // close it too, a switch row does not. Opened from the keyboard, focus moves
 // to the first item; closing returns it to where it was.
 const floatSheet = new CSSStyleSheet();
-floatSheet.replaceSync(`:host([floating]) { display: block; position: fixed; z-index: 60; pointer-events: none; }`);
+floatSheet.replaceSync(`:host([floating]) { display: block; position: fixed; top: 0; left: 0; z-index: 60; pointer-events: none; }`);
 
 class NkMenu extends NkElement {
   static get hostStyles() { return floatSheet; }

package/dist/components/nk-page.js

@@ -44,8 +44,9 @@ class NkPage extends NkElement {
   }
 
   _sync() {
-    const icon = this.getAttribute('icon');
-    this._icon.textContent = icon || '';
+    const icon = this.getAttribute('icon') || '';
+    // Fallback content: write on a change only (see nk-switch).
+    if (this._icon.textContent !== icon) this._icon.textContent = icon;
     this._icon.style.display = icon ? '' : 'none';
     this._cover.style.display = this.getBoolAttr('cover') ? '' : 'none';
     // `covered` is the stylesheet's twin of `.nk-cover + .nk-page`: the icon

package/dist/components/nk-select.js

@@ -8,7 +8,9 @@ import '@jungherz-de/notionkit/notionkit-styles.js';
 //
 // The light-DOM <option>s are copied into the shadow <select>. A
 // MutationObserver keeps the copy in step when a framework swaps them; the
-// empty string is a valid value; the live selection survives a rebuild.
+// empty string is a valid value; the live selection survives a rebuild. A
+// value set before its option exists – a framework sets properties before
+// children – waits and is applied once the option arrives.
 class NkSelect extends NkFormElement {
   static get observedAttributes() { return ['value', 'name', 'disabled', 'required', 'compact', 'wide', 'aria-label']; }
   static get observesLightDom() { return true; }
@@ -51,9 +53,11 @@ class NkSelect extends NkFormElement {
     this._select.innerHTML = '';
     for (const node of nodes) this._select.appendChild(node.cloneNode(true));
 
-    // Keep the live selection when it survived; otherwise the value attribute;
-    // otherwise the browser default (first option / `selected`).
-    if (!this._applyValue(previous)) this._applyValue(this.getAttribute('value'));
+    // A value that waited for its option first; then the live selection when
+    // it survived; otherwise the value attribute; otherwise the browser
+    // default (first option / `selected`).
+    if (this._pending != null && this._applyValue(this._pending)) this._pending = null;
+    else if (!this._applyValue(previous)) this._applyValue(this.getAttribute('value'));
     this._syncFormValue();
   }
 
@@ -67,6 +71,7 @@ class NkSelect extends NkFormElement {
 
   setupEvents() {
     this._onChange = () => {
+      this._pending = null;
       this._syncFormValue();
       this.emit('nk-change', { value: this._select.value, name: this.name });
       this.dispatchEvent(new Event('change', { bubbles: true }));
@@ -107,10 +112,13 @@ class NkSelect extends NkFormElement {
 
   focus(options) { this._select?.focus(options); }
 
-  get value() { return this._select?.value ?? ''; }
+  get value() { return this._pending ?? this._select?.value ?? ''; }
   set value(v) {
-    if (this._select) { this._select.value = v; this._syncFormValue(); }
-    else this.setAttribute('value', v);
+    const value = v == null ? '' : String(v);
+    if (!this._select) { this.setAttribute('value', value); return; }
+    // No option carries it yet: keep it until one does.
+    this._pending = this._applyValue(value) ? null : value;
+    this._syncFormValue();
   }
   get selectedIndex() { return this._select?.selectedIndex ?? -1; }
   get options() { return this._select?.options ?? []; }

package/dist/components/nk-switch.js

@@ -37,7 +37,11 @@ class NkSwitch extends NkFormElement {
   }
 
   _syncText() {
-    this._textNode.data = this.getAttribute('text') ?? '';
+    // Only on a change: WebKit fires slotchange for a write to the slot's
+    // fallback text, even the same text, and this runs on slotchange – an
+    // endless loop that froze Safari with an empty <nk-switch>.
+    const text = this.getAttribute('text') ?? '';
+    if (this._textNode.data !== text) this._textNode.data = text;
     const hasText = !!(this.getAttribute('text') || this._slot.assignedNodes().some(n => n.nodeType === Node.ELEMENT_NODE || n.data.trim()));
     this._text.hidden = !hasText;
     this._row.style.display = hasText ? '' : 'contents';

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

@@ -1,7 +1,7 @@
 import { NkElement } from './base.js';
-import { c as compareBy, r as renderPropertyCell } from './shared/property-cell-o7N30kAQ.js';
+import { c as compareBy, r as renderPropertyCell } from './shared/property-cell-Cddz5n2O.js';
 import '@jungherz-de/notionkit/notionkit-styles.js';
-import './shared/avatar-BiqCaHOt.js';
+import './shared/avatar-CzPZN3uP.js';
 
 // <nk-table-view name="table" label="▦ Table" count new-row sortable wrap></nk-table-view>
 // `wrap` lets cell text break (`.nk-table.wrap`), like Notion's "wrap column".

package/dist/components/nk-tooltip.js

@@ -1,5 +1,5 @@
 import { NkElement } from './base.js';
-import { a as placeNear } from './shared/floating-CxHxy-Cb.js';
+import { a as placeNear } from './shared/floating-CtqV6MBj.js';
 import { d as deepActiveElement } from './shared/focus-BNAChOXO.js';
 import '@jungherz-de/notionkit/notionkit-styles.js';
 
@@ -15,12 +15,15 @@ import '@jungherz-de/notionkit/notionkit-styles.js';
 // element. With `for` it belongs to the element with that id and shows its
 // own content and `shortcut`. It appears after `delay` ms (400) under the
 // pointer and at once on keyboard focus, never on touch; leaving, a press,
-// blur, scrolling and Escape hide it. It sits 6px below its target and
-// centred, above it where the window ends – placement="top" prefers above –
-// and 8px inside the window (placeNear in util/floating.js). show(target,
-// text, shortcut) takes an element or a rect, for what has no element of
-// its own: the bars of a Gantt chart. While it shows, the target's
-// aria-describedby names it (in the same document or shadow root).
+// blur, scrolling – the wheel too, inside a shadow root – and Escape hide
+// it. It sits 6px below its target and centred, above it where the window
+// ends – placement="top" prefers above – and 8px inside the window
+// (placeNear in util/floating.js). show(target, text, shortcut) takes an
+// element or a rect, for what has no element of its own: the bars of a
+// Gantt chart; such a tooltip stays until hide(), the pointer on another
+// [data-tooltip], a press or Escape. A line break in the text is kept.
+// While it shows, the target's aria-describedby names it (in the same
+// document or shadow root).
 const hostSheet = new CSSStyleSheet();
 hostSheet.replaceSync(`:host { display: block; position: fixed; top: 0; left: 0; z-index: 130; pointer-events: none; }`);
 let count = 0;
@@ -45,6 +48,7 @@ class NkTooltip extends NkElement {
   _fill(text, key = this.getAttribute('shortcut')) {
     this._slot.style.display = text == null ? '' : 'none';
     this._text.data = text ?? '';
+    this._bubble.classList.toggle('lines', (text ?? '').includes('\n'));
     this._key.textContent = key || '';
     this._key.hidden = !key;
   }
@@ -53,6 +57,9 @@ class NkTooltip extends NkElement {
   show(target, text, shortcut) {
     clearTimeout(this._timer);
     if (!target) return;
+    // What the pointer is on now: a rect has no element, so moving over the
+    // page leaves a tooltip shown for one alone.
+    this._target = target instanceof Element ? target : null;
     this._fill(text ?? null, shortcut);
     this._describe(target);
     placeNear(this, target, this.getAttribute('placement') === 'top' ? 'top' : 'bottom');
@@ -117,6 +124,8 @@ class NkTooltip extends NkElement {
     document.addEventListener('focusout', this._onHide);
     document.addEventListener('pointerdown', this._onHide, true);
     document.addEventListener('scroll', this._onHide, true);
+    // Scroll events do not leave a shadow root; the wheel does.
+    document.addEventListener('wheel', this._onHide, { capture: true, passive: true });
     document.addEventListener('keydown', this._onKey);
   }
 
@@ -126,6 +135,7 @@ class NkTooltip extends NkElement {
     document.removeEventListener('focusout', this._onHide);
     document.removeEventListener('pointerdown', this._onHide, true);
     document.removeEventListener('scroll', this._onHide, true);
+    document.removeEventListener('wheel', this._onHide, { capture: true });
     document.removeEventListener('keydown', this._onKey);
     this.hide();
   }

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

@@ -60,7 +60,10 @@ class NkTreeItem extends NkElement {
         else if (slot === 'end') end.push(node);
         else if (node.localName === 'nk-tree-item') children.push(node);
         else label.push(node);
-      } else if (node.nodeType === Node.TEXT_NODE && node.data.trim()) {
+      } else if (node.nodeType === Node.TEXT_NODE) {
+        // Every text node, empty and blank ones too: a template engine fills
+        // an expression's node after the item is built ("${i} ${title}"),
+        // and the blank node between two expressions is the space.
         label.push(node);
       }
     }
@@ -83,9 +86,12 @@ class NkTreeItem extends NkElement {
     if (this._hasChildren) this._row.setAttribute('aria-expanded', open ? 'true' : 'false');
     else this._row.removeAttribute('aria-expanded');
     this._children.classList.toggle('collapsed', !open || !this._hasChildren);
-    this._icon.textContent = this.getAttribute('icon') || '';
-    this._icon.style.display = this.getAttribute('icon') ? '' : 'none';
-    this._labelText.data = this.getAttribute('label') || '';
+    // Fallback content: write on a change only (see nk-switch).
+    const icon = this.getAttribute('icon') || '';
+    if (this._icon.textContent !== icon) this._icon.textContent = icon;
+    this._icon.style.display = icon ? '' : 'none';
+    const label = this.getAttribute('label') || '';
+    if (this._labelText.data !== label) this._labelText.data = label;
     // .actions is display:none until hover (a hover-parent rule); `hidden`
     // would lose to that rule, so the block is detached instead.
     const wantActions = !this.getBoolAttr('no-actions') && !this._hasEnd;

package/dist/components/shared/{avatar-BiqCaHOt.js → avatar-CzPZN3uP.js}

@@ -13,7 +13,7 @@ function paintAvatar(el, color) {
   el.style.background = color && !AVATAR_COLORS.includes(color) ? color : '';
 }
 
-/** "Sara Lindt" → "SL". */
-const initialsOf = name => String(name || '').split(/\s+/).map(w => w[0]).filter(Boolean).join('').slice(0, 2).toUpperCase();
+/** "Sara Lindt" → "SL", "Planer (Dev)" → "PD", "Anna-Lena Groß" → "AG": the first letter or digit of each word; a word without one is skipped. */
+const initialsOf = name => String(name || '').split(/\s+/).map(w => w.match(/[\p{L}\p{N}]/u)?.[0]).filter(Boolean).join('').slice(0, 2).toUpperCase();
 
 export { initialsOf as i, paintAvatar as p };

package/dist/components/shared/floating-CtqV6MBj.js

@@ -0,0 +1,66 @@
+// Placement for elements that float over the page – <nk-menu floating>,
+// <nk-calendar floating>, <nk-tooltip>: the host is a fixed box put under
+// its anchor. A transformed ancestor – an open nk-modal or nk-dialog –
+// becomes the containing block of a fixed box, so the frame it really sits
+// in is measured and taken off.
+
+/** The border box of an element, or of the first descendant with one (display: contents hosts). */
+function boxOf(el) {
+  if (el.getClientRects().length) return el.getBoundingClientRect();
+  for (const child of [...(el.shadowRoot?.children ?? []), ...el.children]) {
+    const r = boxOf(child);
+    if (r.width || r.height) return r;
+  }
+  return el.getBoundingClientRect();
+}
+
+/**
+ * Where a fixed `host` really sits: the viewport position of its containing
+ * block's left, top and right edges – the viewport's own, unless a
+ * transformed ancestor takes its place – and the host's size.
+ */
+function frameOf(host) {
+  const s = host.style;
+  s.top = '0px'; s.left = '0px'; s.right = 'auto';
+  const a = host.getBoundingClientRect();
+  s.left = 'auto'; s.right = '0px';
+  const b = host.getBoundingClientRect();
+  return { x: a.left, y: a.top, right: b.right, width: a.width, height: a.height };
+}
+
+/**
+ * Puts `host` 6px below `target` – an element or a rect ({ left, top, right,
+ * bottom }, a DOMRect) – centred on it: above with side="top", or where the
+ * window ends below; kept 8px inside the window. For <nk-tooltip>.
+ */
+function placeNear(host, target, side = 'bottom', gap = 6) {
+  const r = target instanceof Element ? boxOf(target) : target;
+  const f = frameOf(host), w = f.width, h = f.height;
+  const below = r.bottom + gap, above = r.top - gap - h;
+  const top = side === 'top' ? (above < 8 ? below : above) : (below + h > innerHeight - 8 ? above : below);
+  const left = Math.min(Math.max(8, (r.left + r.right) / 2 - w / 2), innerWidth - 8 - w);
+  host.style.top = `${Math.round(top - f.y)}px`;
+  host.style.left = `${Math.round(left - f.x)}px`;
+  host.style.right = 'auto';
+}
+
+/**
+ * Puts `host` 6px under `anchor`, right edges aligned – left edges with
+ * align="start". Where the window ends below and there is more room above,
+ * it opens upwards; either way --_nk-float-max caps its height to the room
+ * there, and a longer menu scrolls.
+ */
+function placeUnder(host, anchor, align) {
+  const r = boxOf(anchor), gap = 6, edge = 8;
+  host.style.removeProperty('--_nk-float-max');
+  const f = frameOf(host);
+  const roomBelow = innerHeight - r.bottom - gap - edge, roomAbove = r.top - gap - edge;
+  const up = f.height > roomBelow && roomAbove > roomBelow;
+  const room = Math.max(0, Math.floor(up ? roomAbove : roomBelow));
+  if (f.height > room) host.style.setProperty('--_nk-float-max', `${room}px`);
+  host.style.top = `${(up ? r.top - gap - Math.min(f.height, room) : r.bottom + gap) - f.y}px`;
+  if (align === 'start') { host.style.left = `${r.left - f.x}px`; host.style.right = 'auto'; }
+  else { host.style.right = `${f.right - Math.min(r.right, innerWidth - edge)}px`; host.style.left = 'auto'; }
+}
+
+export { placeNear as a, placeUnder as p };

package/dist/components/shared/{property-cell-o7N30kAQ.js → property-cell-Cddz5n2O.js}

@@ -1,4 +1,4 @@
-import { i as initialsOf, p as paintAvatar } from './avatar-BiqCaHOt.js';
+import { i as initialsOf, p as paintAvatar } from './avatar-CzPZN3uP.js';
 
 // Polymorphic property renderer for database views. Returns plain DOM built
 // from NotionKit classes – deliberately not a custom element: every cell rule