@jungherz-de/notionkit-elements 1.7.0 → 1.9.0

package/src/components/forms/nk-copy-field.js

@@ -0,0 +1,86 @@
+import { NkElement } from '../../base.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/src/components/forms/nk-image-picker.js

@@ -0,0 +1,128 @@
+import { NkElement } from '../../base.js';
+
+// <nk-image-picker initials="MK" label="Profile picture"></nk-image-picker>
+// <nk-image-picker square initials="M" max="256" type="image/png"></nk-image-picker>
+// → <div class="nk-profile-row"><div class="big-avatar">MK | <img></div>
+//     <div class="pr-actions"><button class="nk-btn secondary small">Upload image</button>
+//       <button class="nk-btn secondary small pr-remove">Remove</button><input type="file" hidden></div></div>
+//
+// A picture for a person or a workspace (NotionKit 1.8.0): the profile row
+// with its actions, round – or `square`, a workspace icon. Ported from
+// GlassKit Elements' glk-image-picker: the file goes through
+// createImageBitmap with imageOrientation 'from-image' – the EXIF rotation
+// of a phone photo without a library – onto a canvas no larger than `max`
+// (default 512), out as `type` (default image/jpeg, on white; image/png
+// keeps transparency) at `quality` (0.82). The file input is hidden and
+// opened from a real button, and cleared after every pick, so the same file
+// can be chosen again. Not form-associated: listen to nk-change and upload
+// the data URL. `src` set as a property is not reflected, so megabytes of
+// data URL never land in the DOM.
+// Events: nk-change { dataUrl, width, height, size } after a pick, and on
+//         remove with an empty dataUrl; nk-error { message, name } when the
+//         file cannot be decoded (HEIC outside Safari, a broken file).
+// Texts:  choose-label, change-label, remove-label; label names the group.
+
+function dataUrlBytes(url) {
+  const b64 = url.slice(url.indexOf(',') + 1);
+  const padding = b64.endsWith('==') ? 2 : b64.endsWith('=') ? 1 : 0;
+  return Math.floor((b64.length * 3) / 4) - padding;
+}
+
+class NkImagePicker extends NkElement {
+  static get observedAttributes() { return ['src', 'initials', 'square', 'label', 'max', 'type', 'quality', 'accept', 'choose-label', 'change-label', 'remove-label']; }
+
+  render() {
+    this._src ??= this.getAttribute('src') || '';
+    this._row = this.createElement('div', ['nk-profile-row'], { role: 'group' });
+    this._avatar = this.createElement('div', ['big-avatar']);
+    const actions = this.createElement('div', ['pr-actions']);
+    this._choose = this.createElement('button', ['nk-btn', 'secondary', 'small'], { type: 'button' });
+    this._remove = this.createElement('button', ['nk-btn', 'secondary', 'small', 'pr-remove'], { type: 'button' });
+    this._input = this.createElement('input', [], { type: 'file', tabindex: '-1' });
+    this._input.hidden = true;
+    actions.append(this._choose, this._remove, this._input);
+    this._row.append(this._avatar, actions);
+    this._wrapper.appendChild(this._row);
+    this._sync();
+  }
+
+  get _max() { return Math.max(1, Math.floor(Number(this.getAttribute('max'))) || 512); }
+  get _type() { return this.getAttribute('type') || 'image/jpeg'; }
+  get _quality() { const q = Number(this.getAttribute('quality')); return this.hasAttribute('quality') && q >= 0 && q <= 1 ? q : 0.82; }
+
+  _sync() {
+    if (!this._row) return;
+    this._avatar.classList.toggle('square', this.getBoolAttr('square'));
+    if (!this._src) {
+      this._img = null;
+      this._avatar.textContent = this.getAttribute('initials') || '';
+    } else if (!this._img || this._img.getAttribute('src') !== this._src) {
+      this._img = this.createElement('img', [], { src: this._src, alt: '' });
+      this._avatar.replaceChildren(this._img);
+    }
+    const label = this.getAttribute('label');
+    if (label) this._row.setAttribute('aria-label', label); else this._row.removeAttribute('aria-label');
+    this._choose.textContent = this._src ? (this.getAttribute('change-label') || 'Change image') : (this.getAttribute('choose-label') || 'Upload image');
+    this._remove.textContent = this.getAttribute('remove-label') || 'Remove';
+    this._remove.hidden = !this._src;
+    this._input.accept = this.getAttribute('accept') || 'image/*';
+  }
+
+  async _pick(file) {
+    if (!file) return;
+    try {
+      const bitmap = await createImageBitmap(file, { imageOrientation: 'from-image' });
+      const scale = Math.min(1, this._max / Math.max(bitmap.width, bitmap.height));
+      const canvas = document.createElement('canvas');
+      canvas.width = Math.max(1, Math.round(bitmap.width * scale));
+      canvas.height = Math.max(1, Math.round(bitmap.height * scale));
+      const ctx = canvas.getContext('2d');
+      if (this._type === 'image/jpeg') {
+        // JPEG has no alpha; without this a transparent PNG comes out on black.
+        ctx.fillStyle = '#fff';
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+      }
+      ctx.drawImage(bitmap, 0, 0, canvas.width, canvas.height);
+      bitmap.close();
+      const dataUrl = canvas.toDataURL(this._type, this._quality);
+      this.src = dataUrl;
+      this.emit('nk-change', { dataUrl, width: canvas.width, height: canvas.height, size: dataUrlBytes(dataUrl) });
+    } catch (error) {
+      this.emit('nk-error', { message: error?.message || String(error), name: file.name });
+    }
+  }
+
+  setupEvents() {
+    this._onChoose = () => this._input.click();
+    this._onChange = (e) => { const file = e.target.files?.[0]; e.target.value = ''; this._pick(file); };
+    this._onRemove = () => {
+      this.src = '';
+      this._choose.focus();   // the remove button just went away under the focus
+      this.emit('nk-change', { dataUrl: '', width: 0, height: 0, size: 0 });
+    };
+    this._choose.addEventListener('click', this._onChoose);
+    this._input.addEventListener('change', this._onChange);
+    this._remove.addEventListener('click', this._onRemove);
+  }
+
+  teardownEvents() {
+    this._choose?.removeEventListener('click', this._onChoose);
+    this._input?.removeEventListener('change', this._onChange);
+    this._remove?.removeEventListener('click', this._onRemove);
+  }
+
+  onAttributeChanged(name, _old, value) {
+    if (name === 'src') this._src = value || '';
+    this._sync();
+  }
+
+  /** Opens the file dialog, as the button does. */
+  choose() { this._input?.click(); }
+  get src() { return this._src ?? this.getAttribute('src') ?? ''; }
+  set src(v) { this._src = v || ''; this._sync(); }
+  get square() { return this.getBoolAttr('square'); }
+  set square(v) { this.setBoolAttr('square', v); }
+}
+
+customElements.define('nk-image-picker', NkImagePicker);
+export { NkImagePicker };

package/src/components/overlays/nk-menu.js

@@ -1,5 +1,6 @@
 import { NkElement } from '../../base.js';
 import { deepActiveElement } from '../../util/focus.js';
+import { placeUnder } from '../../util/floating.js';
 
 // <nk-menu>
 //   <nk-menu-item type="label">Page</nk-menu-item>
@@ -20,16 +21,6 @@ import { deepActiveElement } from '../../util/focus.js';
 const floatSheet = new CSSStyleSheet();
 floatSheet.replaceSync(`:host([floating]) { display: block; position: fixed; z-index: 60; pointer-events: none; }`);
 
-/** 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();
-}
-
 class NkMenu extends NkElement {
   static get hostStyles() { return floatSheet; }
   static get observedAttributes() { return ['floating', 'sheet', 'open', 'align']; }
@@ -70,10 +61,7 @@ class NkMenu extends NkElement {
   show(anchor) {
     if (anchor) {
       this._anchor = anchor;
-      const r = boxOf(anchor);
-      this.style.top = `${r.bottom + 6}px`;
-      if (this.getAttribute('align') === 'start') { this.style.left = `${r.left}px`; this.style.right = ''; }
-      else { this.style.right = `${Math.max(8, innerWidth - r.right)}px`; this.style.left = ''; }
+      placeUnder(this, anchor, this.getAttribute('align'));
     }
     this.setBoolAttr('open', true);
   }

package/src/components/overlays/nk-peek.js

@@ -0,0 +1,120 @@
+import { NkElement } from '../../base.js';
+import { lockScroll, unlockScroll, inertOutside, deepActiveElement } from '../../util/focus.js';
+
+// <nk-peek id="peek" label="Database Table-View">
+//   <nk-btn slot="actions" variant="topbar" aria-label="Open as page"><svg …></svg></nk-btn>
+//   <nk-page-title>🗃️ Database Table-View</nk-page-title>
+//   <nk-props>…</nk-props>
+//   <div class="nk-prose">…</div>
+//   <nk-comments>…</nk-comments>
+// </nk-peek>
+// → <div class="nk-peek-backdrop open"><aside class="nk-peek" role="dialog">
+//     <div class="pk-bar"><button class="nk-topbar-btn">»</button>…actions…</div>
+//     <div class="pk-body">…</div></aside></div>
+//
+// Notion's side peek (NotionKit 1.8.0): a row beside the table, which stays
+// usable – no scrim, nothing inert. show() slides it in and moves focus to
+// it; », Escape and a click elsewhere on the page close it, and Escape and »
+// hand focus back. A click that calls show() again – on another row – only
+// swaps the content, and clicks inside other overlays (a menu opened from
+// the peek) leave it open. Below 860px it is a bottom sheet over a dimmed
+// page; there it is modal: the page is inert and scroll-locked, the dimmed
+// page takes the tap that closes it. Put it directly under <body>.
+const CLOSE_ICON = '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="m6 17 5-5-5-5M13 17l5-5-5-5"/></svg>';
+const OVERLAYS = new Set(['nk-menu', 'nk-pop', 'nk-modal', 'nk-sheet', 'nk-cmdk', 'nk-toast']);
+const OVERLAY_CLASSES = ['nk-pop', 'nk-modal-backdrop', 'nk-sheet-backdrop', 'nk-cmdk-backdrop'];
+const phone = () => matchMedia('(max-width: 860px)').matches;
+
+class NkPeek extends NkElement {
+  static get observedAttributes() { return ['open', 'label', 'close-label']; }
+
+  render() {
+    this._backdrop = this.createElement('div', ['nk-peek-backdrop']);
+    this._box = this.createElement('aside', ['nk-peek'], { role: 'dialog', tabindex: '-1' });
+    const bar = this.createElement('div', ['pk-bar']);
+    this._close = this.createElement('button', ['nk-topbar-btn'], { type: 'button' });
+    this._close.innerHTML = CLOSE_ICON;
+    bar.append(this._close, this.createElement('slot', [], { name: 'actions' }));
+    const body = this.createElement('div', ['pk-body']);
+    body.appendChild(document.createElement('slot'));
+    this._box.append(bar, body);
+    this._backdrop.appendChild(this._box);
+    this._wrapper.appendChild(this._backdrop);
+    this._syncLabels();
+    this._syncOpen();
+  }
+
+  _syncLabels() {
+    const label = this.getAttribute('label');
+    if (label) this._box.setAttribute('aria-label', label); else this._box.removeAttribute('aria-label');
+    this._close.setAttribute('aria-label', this.getAttribute('close-label') || 'Close');
+  }
+
+  _syncOpen() {
+    const open = this.getBoolAttr('open');
+    this._backdrop.classList.toggle('open', open);
+    if (open === this._wasOpen) return;
+    this._wasOpen = open;
+    if (open) {
+      this._returnFocus = deepActiveElement();
+      if (phone()) {
+        this._modal = true;
+        this._box.setAttribute('aria-modal', 'true');
+        lockScroll();
+        this._undoInert = inertOutside(this);
+      }
+      requestAnimationFrame(() => this._box.focus({ preventScroll: true }));
+    } else {
+      if (this._modal) { this._modal = false; this._box.removeAttribute('aria-modal'); unlockScroll(); this._undoInert?.(); this._undoInert = null; }
+      const active = deepActiveElement();
+      const inside = active && (this.contains(active) || this._shadow.contains(active) || active === document.body);
+      const back = this._returnFocus;
+      this._returnFocus = null;
+      if (inside && back?.isConnected && typeof back.focus === 'function') back.focus({ preventScroll: true });
+    }
+  }
+
+  setupEvents() {
+    this._onClose = () => this.close();
+    this._onBackdrop = (e) => { if (e.target === this._backdrop) this.close(); };
+    this._onKey = (e) => { if (e.key === 'Escape' && this.getBoolAttr('open')) this.close(); };
+    // Bubble phase, after the page's own handlers: a click that showed the
+    // peek again (another row) must not close it.
+    this._onOutside = (e) => {
+      if (!this.getBoolAttr('open') || this._shownAt >= e.timeStamp) return;
+      const path = e.composedPath();
+      if (path.includes(this)) return;
+      if (path.some(n => n.nodeType === 1 && (OVERLAYS.has(n.localName) || OVERLAY_CLASSES.some(c => n.classList.contains(c))))) return;
+      this.close();
+    };
+    this._close.addEventListener('click', this._onClose);
+    this._backdrop.addEventListener('click', this._onBackdrop);
+    document.addEventListener('keydown', this._onKey);
+    document.addEventListener('click', this._onOutside);
+  }
+
+  teardownEvents() {
+    this._close?.removeEventListener('click', this._onClose);
+    this._backdrop?.removeEventListener('click', this._onBackdrop);
+    document.removeEventListener('keydown', this._onKey);
+    document.removeEventListener('click', this._onOutside);
+    if (this._modal) { this._modal = false; unlockScroll(); this._undoInert?.(); this._undoInert = null; }
+    this._wasOpen = false;
+  }
+
+  onAttributeChanged(name) {
+    if (name !== 'open') { this._syncLabels(); return; }
+    this._syncOpen();
+    this.emit('nk-toggle', { open: this.getBoolAttr('open') });
+  }
+
+  show() { this._shownAt = performance.now(); this.setBoolAttr('open', true); }
+  close() { this.setBoolAttr('open', false); }
+  toggle() { this.getBoolAttr('open') ? this.close() : this.show(); }
+
+  get open() { return this.getBoolAttr('open'); }
+  set open(v) { v ? this.show() : this.close(); }
+}
+
+customElements.define('nk-peek', NkPeek);
+export { NkPeek };

package/src/index.js

@@ -84,6 +84,13 @@ export { NkPanel } from './components/page/nk-panel.js';
 export { NkSheet } from './components/overlays/nk-sheet.js';
 export { NkSteps } from './components/page/nk-steps.js';
 
+// 1.8.0 – links and peeks
+export { NkBookmark } from './components/content/nk-bookmark.js';
+export { NkCopyField } from './components/forms/nk-copy-field.js';
+export { NkImagePicker } from './components/forms/nk-image-picker.js';
+export { NkCalendar } from './components/forms/nk-calendar.js';
+export { NkPeek } from './components/overlays/nk-peek.js';
+
 // Wave 4 – overlays
 export { NkModal } from './components/overlays/nk-modal.js';
 export { NkSettingsPane } from './components/overlays/nk-settings-pane.js';
@@ -100,6 +107,7 @@ export { NkDatabase } from './components/data/nk-database.js';
 export { NkTableView } from './components/data/nk-table-view.js';
 export { NkBoardView } from './components/data/nk-board-view.js';
 export { NkListView } from './components/data/nk-list-view.js';
+export { NkCalendarView } from './components/data/nk-calendar-view.js';
 export { NkFilterBar } from './components/data/nk-filter-bar.js';
 export { NkComments } from './components/data/nk-comments.js';
 export { NkComment } from './components/data/nk-comment.js';

package/src/util/dates.js

@@ -0,0 +1,65 @@
+// Calendar days for nk-calendar and nk-calendar-view: local days as
+// 'YYYY-MM-DD', no library. Weeks are ISO weeks (Monday-based, the week with
+// the year's first Thursday); the first weekday comes from the locale.
+const pad = n => String(n).padStart(2, '0');
+
+export const isoOf = d => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+export const addDays = (d, n) => new Date(d.getFullYear(), d.getMonth(), d.getDate() + n);
+
+/** 'YYYY-MM-DD[THH:MM]', 'D.M.YYYY', a Date or { start } → a local Date at midnight, or null. */
+export function parseDay(v) {
+  if (v instanceof Date) return Number.isNaN(v.getTime()) ? null : new Date(v.getFullYear(), v.getMonth(), v.getDate());
+  if (v && typeof v === 'object') return v.start ? parseDay(v.start) : null;
+  const s = String(v ?? '').trim();
+  let m = s.match(/^(\d{4})-(\d{2})-(\d{2})/);
+  if (m) return new Date(+m[1], +m[2] - 1, +m[3]);
+  m = s.match(/^(\d{1,2})\.(\d{1,2})\.(\d{4})$/);
+  return m ? new Date(+m[3], +m[2] - 1, +m[1]) : null;
+}
+
+export function isoWeek(d) {
+  const t = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()));
+  t.setUTCDate(t.getUTCDate() + 4 - (t.getUTCDay() || 7));
+  return Math.ceil(((t - Date.UTC(t.getUTCFullYear(), 0, 1)) / 864e5 + 1) / 7);
+}
+
+/** The page's language unless the element names one. */
+export const resolveLocale = attr => attr || document.documentElement.lang || navigator.language || 'en';
+
+/** 0 = Sunday … 6 = Saturday, from Intl.Locale's week info; Monday where the browser cannot say. */
+export function firstWeekday(locale) {
+  try {
+    const l = new Intl.Locale(locale), info = l.getWeekInfo?.() ?? l.weekInfo;
+    if (info?.firstDay) return info.firstDay % 7;
+  } catch { /* an unknown tag */ }
+  return 1;
+}
+
+/** Short weekday names from `weekStart` on; `length` cuts them (2 → "Mo"). */
+export function weekdayNames(locale, weekStart, length = 0) {
+  const f = new Intl.DateTimeFormat(locale, { weekday: 'short' });
+  // 7 June 2026 is a Sunday, so 7 + n is weekday n.
+  return Array.from({ length: 7 }, (_, i) => {
+    const name = f.format(new Date(2026, 5, 7 + ((weekStart + i) % 7))).replace('.', '');
+    return length ? name.slice(0, length) : name;
+  });
+}
+
+/** A month from its week start: `first`, `day(i)` for the i-th cell, the `rows` it needs. */
+export function monthGrid(month, weekStart) {
+  const [y, m] = month.split('-').map(Number), first = new Date(y, m - 1, 1), offset = (first.getDay() - weekStart + 7) % 7;
+  return { m, first, day: i => new Date(y, m - 1, 1 - offset + i), rows: Math.ceil((offset + new Date(y, m, 0).getDate()) / 7) };
+}
+
+export function stepMonth(month, n) {
+  const [y, m] = month.split('-').map(Number);
+  return isoOf(new Date(y, m - 1 + n, 1)).slice(0, 7);
+}
+
+/** "KW" for German, "W" elsewhere – the head of the week column. */
+export const weekLabel = locale => (/^de\b/i.test(locale) ? 'KW' : 'W');
+
+export const CHEVRONS = {
+  prev: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M15 6l-6 6 6 6"/></svg>',
+  next: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg>',
+};

package/src/util/floating.js

@@ -0,0 +1,20 @@
+// 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). */
+export 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 under `anchor`, right edges aligned – left edges with align="start". */
+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 = ''; }
+}