@jungherz-de/notionkit-elements 1.10.1 → 1.11.1

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