@jungherz-de/notionkit-elements 1.10.1 → 1.11.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jungherz-de/notionkit-elements",
-  "version": "1.10.1",
+  "version": "1.11.1",
   "description": "Vanilla JavaScript Web Components wrapping the NotionKit CSS foundation – <nk-*> custom elements with Shadow DOM, automatic theme sync and native form participation.",
   "license": "MIT",
   "author": "Jungherz GmbH <info@jungherz.com> (https://www.jungherz.com)",
@@ -27,7 +27,9 @@
   "files": [
     "dist/",
     "src/",
-    "LICENSE"
+    "LICENSE",
+    "SKILL.md",
+    "CHANGELOG.md"
   ],
   "scripts": {
     "prebuild": "node -e \"require('fs').rmSync('dist/components',{recursive:true,force:true})\"",
@@ -38,6 +40,7 @@
     "build:all": "npm run build && npm run build:pages && npm run build:landing && npm run build:app && npm run build:skill && npm run build:meta",
     "check:versions": "node check-versions.mjs",
     "check:coverage": "node tools/check-coverage.mjs",
+    "check:package": "node tools/check-package.mjs",
     "test": "playwright test",
     "dev": "rollup -c --watch",
     "serve": "npx serve .",
@@ -59,10 +62,10 @@
     "dark-mode"
   ],
   "peerDependencies": {
-    "@jungherz-de/notionkit": ">=1.10.1"
+    "@jungherz-de/notionkit": ">=1.11.0"
   },
   "devDependencies": {
-    "@jungherz-de/notionkit": "^1.10.1",
+    "@jungherz-de/notionkit": "^1.11.1",
     "@playwright/test": "^1.50.0",
     "@rollup/plugin-node-resolve": "^15.0.0",
     "@rollup/plugin-terser": "^0.4.0",

package/src/components/data/nk-ai-msg.js

@@ -37,13 +37,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/src/components/data/nk-filter-bar.js

@@ -58,7 +58,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]');
@@ -78,8 +78,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/src/components/forms/nk-calendar.js

@@ -43,7 +43,7 @@ import { deepActiveElement } from '../../util/focus.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/src/components/forms/nk-fields.js

@@ -9,12 +9,22 @@ import { NkElement } from '../../base.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/src/components/forms/nk-select.js

@@ -7,7 +7,9 @@ import { NkFormElement } from '../../base.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; }
@@ -50,9 +52,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();
   }
 
@@ -66,6 +70,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 }));
@@ -106,10 +111,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/src/components/forms/nk-switch.js

@@ -36,7 +36,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/src/components/overlays/nk-dialog.js

@@ -17,10 +17,13 @@ import { lockScroll, unlockScroll, inertOutside, firstFocusable, deepActiveEleme
 // 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>.
@@ -90,11 +93,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/src/components/overlays/nk-menu.js

@@ -19,7 +19,7 @@ import { placeUnder } from '../../util/floating.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/src/components/overlays/nk-tooltip.js

@@ -14,12 +14,15 @@ import { deepActiveElement } from '../../util/focus.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;
@@ -44,6 +47,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;
   }
@@ -52,6 +56,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');
@@ -116,6 +123,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);
   }
 
@@ -125,6 +134,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/src/components/page/nk-banner.js

@@ -1,7 +1,10 @@
 import { NkElement } from '../../base.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/src/components/page/nk-page.js

@@ -43,8 +43,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/src/components/shell/nk-tree-item.js

@@ -59,7 +59,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);
       }
     }
@@ -82,9 +85,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/src/util/avatar.js

@@ -13,5 +13,5 @@ export function paintAvatar(el, color) {
   el.style.background = color && !AVATAR_COLORS.includes(color) ? color : '';
 }
 
-/** "Sara Lindt" → "SL". */
-export 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. */
+export const initialsOf = name => String(name || '').split(/\s+/).map(w => w.match(/[\p{L}\p{N}]/u)?.[0]).filter(Boolean).join('').slice(0, 2).toUpperCase();

package/src/util/floating.js

@@ -1,5 +1,8 @@
 // Placement for elements that float over the page – <nk-menu floating>,
-// <nk-calendar floating>: the host is a fixed box put under its anchor.
+// <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). */
 export function boxOf(el) {
@@ -11,6 +14,20 @@ export function boxOf(el) {
   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
@@ -18,18 +35,30 @@ export function boxOf(el) {
  */
 export function placeNear(host, target, side = 'bottom', gap = 6) {
   const r = target instanceof Element ? boxOf(target) : target;
-  const { width: w, height: h } = host.getBoundingClientRect();
+  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);
-  host.style.top = `${Math.round(top)}px`;
-  host.style.left = `${Math.round(Math.min(Math.max(8, (r.left + r.right) / 2 - w / 2), innerWidth - 8 - w))}px`;
-  host.style.right = '';
+  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". */
+/**
+ * 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.
+ */
 export function placeUnder(host, anchor, align) {
-  const r = boxOf(anchor);
-  host.style.top = `${r.bottom + 6}px`;
-  if (align === 'start') { host.style.left = `${r.left}px`; host.style.right = ''; }
-  else { host.style.right = `${Math.max(8, innerWidth - r.right)}px`; host.style.left = ''; }
+  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'; }
 }

package/dist/components/shared/floating-CxHxy-Cb.js

@@ -1,37 +0,0 @@
-// Placement for elements that float over the page – <nk-menu floating>,
-// <nk-calendar floating>: the host is a fixed box put under its anchor.
-
-/** 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();
-}
-
-/**
- * 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 { width: w, height: h } = host.getBoundingClientRect();
-  const below = r.bottom + gap, above = r.top - gap - h;
-  const top = side === 'top' ? (above < 8 ? below : above) : (below + h > innerHeight - 8 ? above : below);
-  host.style.top = `${Math.round(top)}px`;
-  host.style.left = `${Math.round(Math.min(Math.max(8, (r.left + r.right) / 2 - w / 2), innerWidth - 8 - w))}px`;
-  host.style.right = '';
-}
-
-/** Puts `host` 6px under `anchor`, right edges aligned – left edges with align="start". */
-function placeUnder(host, anchor, align) {
-  const r = boxOf(anchor);
-  host.style.top = `${r.bottom + 6}px`;
-  if (align === 'start') { host.style.left = `${r.left}px`; host.style.right = ''; }
-  else { host.style.right = `${Math.max(8, innerWidth - r.right)}px`; host.style.left = ''; }
-}
-
-export { placeNear as a, placeUnder as p };