@jungherz-de/notionkit-elements 1.18.0 → 1.20.0

package/dist/components/nk-modal.js

@@ -1,5 +1,6 @@
 import { NkElement } from './base.js';
-import { l as lockScroll, i as inertOutside, f as firstFocusable, u as unlockScroll } from './shared/focus-C4tbSNND.js';
+import { d as deepActiveElement, l as lockScroll, i as inertOutside, f as firstFocusable, u as unlockScroll } from './shared/focus-D55JGjRA.js';
+import { o as openLayer, c as closeLayer } from './shared/layers-D9YYYA5g.js';
 import '@jungherz-de/notionkit/notionkit-styles.js';
 
 // <nk-modal id="settings">
@@ -94,14 +95,17 @@ class NkModal extends NkElement {
     if (open === this._wasOpen) return;
     this._wasOpen = open;
     if (open) {
-      this._returnFocus = document.activeElement;
+      // Behind shadow hosts too: a trigger in a view's shadow root gets the focus back.
+      this._returnFocus = deepActiveElement();
       lockScroll();
       this._undoInert = inertOutside(this);
+      openLayer(this, () => this.close());
       requestAnimationFrame(() => {
         const target = this._rows.querySelector('.nk-tree-item.active') || firstFocusable(this) || this._box;
         target.focus({ preventScroll: true });
       });
     } else {
+      closeLayer(this);
       unlockScroll();
       this._undoInert?.(); this._undoInert = null;
       const back = this._returnFocus;
@@ -112,7 +116,6 @@ class NkModal 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(); } };
     this._onNavClick = (e) => { const row = e.target.closest('[data-pane]'); if (row) { row.focus(); this.pane = row.dataset.pane; } };
     this._onNavKey = (e) => {
       const row = e.target.closest?.('[data-pane]');
@@ -126,7 +129,6 @@ class NkModal extends NkElement {
     };
     this._onSlot = () => this.requestNav();
     this._backdrop.addEventListener('click', this._onBackdrop);
-    document.addEventListener('keydown', this._onKey);
     this._rows.addEventListener('click', this._onNavClick);
     this._rows.addEventListener('keydown', this._onNavKey);
     this._slot.addEventListener('slotchange', this._onSlot);
@@ -134,11 +136,10 @@ class NkModal extends NkElement {
 
   teardownEvents() {
     this._backdrop?.removeEventListener('click', this._onBackdrop);
-    document.removeEventListener('keydown', this._onKey);
     this._rows?.removeEventListener('click', this._onNavClick);
     this._rows?.removeEventListener('keydown', this._onNavKey);
     this._slot?.removeEventListener('slotchange', this._onSlot);
-    if (this._wasOpen) { unlockScroll(); this._undoInert?.(); this._undoInert = null; this._wasOpen = false; }
+    if (this._wasOpen) { closeLayer(this); unlockScroll(); this._undoInert?.(); this._undoInert = null; this._wasOpen = false; }
   }
 
   onStringsChanged() { this._nav.setAttribute('aria-label', this.str('settings')); }

package/dist/components/nk-peek.js

@@ -1,5 +1,6 @@
 import { NkElement } from './base.js';
-import { d as deepActiveElement, l as lockScroll, i as inertOutside, u as unlockScroll } from './shared/focus-C4tbSNND.js';
+import { d as deepActiveElement, l as lockScroll, i as inertOutside, u as unlockScroll } from './shared/focus-D55JGjRA.js';
+import { o as openLayer, c as closeLayer } from './shared/layers-D9YYYA5g.js';
 import '@jungherz-de/notionkit/notionkit-styles.js';
 
 // <nk-peek id="peek" label="Database Table-View">
@@ -109,8 +110,10 @@ class NkPeek extends NkElement {
         lockScroll();
         this._undoInert = inertOutside(this);
       }
+      openLayer(this, () => this.close());
       requestAnimationFrame(() => this._box.focus({ preventScroll: true }));
     } else {
+      closeLayer(this);
       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);
@@ -123,7 +126,6 @@ class NkPeek extends NkElement {
   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) => {
@@ -157,7 +159,6 @@ class NkPeek extends NkElement {
     this._handle.addEventListener('pointermove', this._onResizeMove);
     this._handle.addEventListener('lostpointercapture', this._onResizeEnd);
     this._handle.addEventListener('keydown', this._onResizeKey);
-    document.addEventListener('keydown', this._onKey);
     document.addEventListener('click', this._onOutside);
     addEventListener('resize', this._onViewport);
   }
@@ -169,7 +170,7 @@ class NkPeek extends NkElement {
     this._handle?.removeEventListener('pointermove', this._onResizeMove);
     this._handle?.removeEventListener('lostpointercapture', this._onResizeEnd);
     this._handle?.removeEventListener('keydown', this._onResizeKey);
-    document.removeEventListener('keydown', this._onKey);
+    closeLayer(this);
     document.removeEventListener('click', this._onOutside);
     removeEventListener('resize', this._onViewport);
     if (this._insetApp) { this._app()?.removeAttribute('peek-inset'); this._insetApp = false; }

package/dist/components/nk-pop.js

@@ -1,4 +1,5 @@
 import { NkElement } from './base.js';
+import { c as closeLayer, o as openLayer } from './shared/layers-D9YYYA5g.js';
 import '@jungherz-de/notionkit/notionkit-styles.js';
 
 // <nk-pop placement="bottom-start">
@@ -49,12 +50,10 @@ class NkPop extends NkElement {
       this.toggle();
     };
     this._onDocClick = (e) => { if (this.getBoolAttr('open') && !e.composedPath().includes(this)) this.close(); };
-    this._onKey = (e) => { if (e.key === 'Escape' && this.getBoolAttr('open')) this.close(); };
     this._onSelect = (e) => { if (e.target !== this) this.close(); };
     this._onSlot = () => this._syncSurface();
     this.addEventListener('click', this._onTrigger);
     document.addEventListener('click', this._onDocClick);
-    document.addEventListener('keydown', this._onKey);
     this._float.addEventListener('nk-select', this._onSelect);
     this._slot.addEventListener('slotchange', this._onSlot);
   }
@@ -62,7 +61,7 @@ class NkPop extends NkElement {
   teardownEvents() {
     this.removeEventListener('click', this._onTrigger);
     document.removeEventListener('click', this._onDocClick);
-    document.removeEventListener('keydown', this._onKey);
+    closeLayer(this);
     this._float?.removeEventListener('nk-select', this._onSelect);
     this._slot?.removeEventListener('slotchange', this._onSlot);
   }
@@ -71,6 +70,7 @@ class NkPop extends NkElement {
     if (name === 'bare') this._syncSurface();
     if (name === 'open') {
       const open = this.getBoolAttr('open');
+      if (open) openLayer(this, () => this.close()); else closeLayer(this);
       for (const el of this._triggerSlot.assignedElements()) el.setAttribute('aria-expanded', open ? 'true' : 'false');
       this.emit('nk-toggle', { open });
     }

package/dist/components/nk-sheet.js

@@ -1,5 +1,6 @@
 import { NkElement } from './base.js';
-import { d as deepActiveElement, l as lockScroll, i as inertOutside, f as firstFocusable, u as unlockScroll } from './shared/focus-C4tbSNND.js';
+import { d as deepActiveElement, l as lockScroll, i as inertOutside, f as firstFocusable, u as unlockScroll } from './shared/focus-D55JGjRA.js';
+import { o as openLayer, c as closeLayer } from './shared/layers-D9YYYA5g.js';
 import '@jungherz-de/notionkit/notionkit-styles.js';
 
 // <nk-sheet id="more" title="More">
@@ -53,8 +54,10 @@ class NkSheet extends NkElement {
       this._returnFocus = deepActiveElement();
       lockScroll();
       this._undoInert = inertOutside(this);
+      openLayer(this, () => this.close());
       requestAnimationFrame(() => (firstFocusable(this) || this._box).focus({ preventScroll: true }));
     } else {
+      closeLayer(this);
       unlockScroll();
       this._undoInert?.(); this._undoInert = null;
       const back = this._returnFocus;
@@ -65,15 +68,12 @@ class NkSheet 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(); } };
     this._backdrop.addEventListener('click', this._onBackdrop);
-    document.addEventListener('keydown', this._onKey);
   }
 
   teardownEvents() {
     this._backdrop?.removeEventListener('click', this._onBackdrop);
-    document.removeEventListener('keydown', this._onKey);
-    if (this._wasOpen) { unlockScroll(); this._undoInert?.(); this._undoInert = null; this._wasOpen = false; }
+    if (this._wasOpen) { closeLayer(this); unlockScroll(); this._undoInert?.(); this._undoInert = null; this._wasOpen = false; }
   }
 
   onAttributeChanged(name, oldValue, value) {

package/dist/components/nk-sidebar.js

@@ -1,5 +1,5 @@
 import { NkElement } from './base.js';
-import { d as deepActiveElement } from './shared/focus-C4tbSNND.js';
+import { d as deepActiveElement } from './shared/focus-D55JGjRA.js';
 import '@jungherz-de/notionkit/notionkit-styles.js';
 
 // <nk-sidebar slot="sidebar">

package/dist/components/nk-theme-toggle.js

@@ -8,62 +8,203 @@ import '@jungherz-de/notionkit/notionkit-styles.js';
 // system preference on first connect when <html> carries no theme yet, and
 // accepts postMessage({ nkTheme }) from a parent page (the landing page's
 // embedded demo uses that).
-class NkThemeToggle extends NkElement {
-  static get observedAttributes() { return ['storage-key', 'title'];
+//
+// <nk-theme-toggle modes="auto light dark"> adds a third state (1.20.0):
+// `auto` follows prefers-color-scheme, live, and is what no stored value
+// means – so the documented inline script before first paint keeps working
+// and a choice made without `modes` still counts. The glyph then shows the
+// mode (☀️, 🌙, both for auto) instead of the next theme, the title names
+// the mode and the next one, other tabs follow through the storage event,
+// and `theme-color` keeps <meta name="theme-color"> in step. Two states stay
+// the default, where nothing about this element changes.
+const GLYPH = { light: '☀️', dark: '🌙' };
 
-  }
+class NkThemeToggle extends NkElement {
+  static get observedAttributes() { return ['storage-key', 'title', 'modes', 'theme-color']; }
 
   render() {
     this._btn = this.createElement('button', ['nk-topbar-btn', 'nk-theme-toggle'], { type: 'button' });
-    this._syncTitle();
     this._wrapper.appendChild(this._btn);
-    const root = document.documentElement;
+    this._readThemeColors();
+    if (this.auto) {
+      // With `auto` this element owns the theme: a stored choice, else the
+      // system. The inline script before first paint has set the same value.
+      this._applyMode();
+    } else {
+      const root = document.documentElement;
+      let stored = null;
+      try { stored = localStorage.getItem(this.storageKey); } catch {}
+      if (stored === 'light' || stored === 'dark') root.setAttribute('data-theme', stored);
+      else if (!root.hasAttribute('data-theme')) root.setAttribute('data-theme', this.systemTheme);
+      this._syncThemeColor();
+      this._syncGlyph();
+      this._syncTitle();
+    }
+  }
+
+  // ── Modes ──
+
+  /** The states offered, in the author's order; without a theme among them the default two. */
+  get modes() {
+    const list = [...new Set((this.getAttribute('modes') || '').toLowerCase().split(/\s+/))].filter(m => m === 'auto' || m === 'light' || m === 'dark');
+    return list.some(m => m !== 'auto') ? list : ['light', 'dark'];
+  }
+
+  /** Whether `auto` is offered – the only thing that changes this element's behaviour. */
+  get auto() { return this.modes.includes('auto'); }
+
+  /** One query object per element: a listener on a throwaway one is neither removable nor safe from collection. */
+  get systemQuery() { return (this._query ??= matchMedia('(prefers-color-scheme: dark)')); }
+
+  get systemTheme() { return this.systemQuery.matches ? 'dark' : 'light'; }
+
+  /** The mode in force: 'auto' (nothing stored), 'light' or 'dark'. Without `auto` the theme on screen. */
+  get mode() {
+    if (!this.auto) return getCurrentTheme();
     let stored = null;
-    try { stored = localStorage.getItem(this.storageKey); } catch {}
-    if (stored === 'light' || stored === 'dark') root.setAttribute('data-theme', stored);
-    else if (!root.hasAttribute('data-theme')) root.setAttribute('data-theme', matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
+    try { stored = localStorage.getItem(this.storageKey); } catch { return this._unsaved || 'auto'; }
+    if (stored === 'light' || stored === 'dark') return stored;
+    return this._unsaved || 'auto';
+  }
+
+  /** The theme on screen for a mode: `auto` is whatever the system says. */
+  themeFor(mode = this.mode) { return mode === 'auto' ? this.systemTheme : mode; }
+
+  /**
+   * The mode a click moves to. From `auto` to the theme that is *not* on
+   * screen, then to the other one, then back to `auto` – so every click but
+   * the last changes something visibly. Without `auto` it cycles the themes.
+   */
+  nextMode(mode = this.mode) {
+    const modes = this.modes, themes = modes.filter(m => m !== 'auto'), system = this.systemTheme;
+    if (!modes.includes('auto')) return themes[(themes.indexOf(mode) + 1) % themes.length];
+    if (mode === 'auto') return themes.find(m => m !== system) ?? themes[0];
+    if (mode !== system) return themes.includes(system) ? system : 'auto';
+    return 'auto';
+  }
+
+  // ── Applying ──
+
+  _applyMode(mode = this.mode) {
+    const theme = this.themeFor(mode);
+    const root = document.documentElement;
+    // Only on a change: the observer in base.js mirrors data-theme into every
+    // element, and auto re-applies the same value on every system change.
+    if (root.getAttribute('data-theme') !== theme) root.setAttribute('data-theme', theme);
+    this._syncThemeColor(mode);
     this._syncGlyph();
+    this._syncTitle();
+  }
+
+  /** The page's own theme-color values, per medium, before this element touched them. */
+  _readThemeColors() {
+    this._bars = [...document.querySelectorAll('meta[name="theme-color"]')].map(meta => ({
+      meta, dark: (meta.getAttribute('media') || '').includes('dark'), content: meta.getAttribute('content'),
+    }));
+  }
+
+  /**
+   * `theme-color`: while a theme is fixed every meta carries the colour of
+   * that theme, so the browser bar follows the choice; back on `auto` each
+   * one carries its own again. The colours are the page's – never invented.
+   */
+  _syncThemeColor(mode = this.mode) {
+    if (!this.hasAttribute('theme-color') || !this._bars?.length) return;
+    const auto = mode === 'auto', dark = this.themeFor(mode) === 'dark';
+    const fixed = (this._bars.find(bar => bar.dark === dark) ?? this._bars[0]).content;
+    for (const bar of this._bars) if (bar.content !== null) bar.meta.setAttribute('content', auto ? bar.content : fixed);
   }
 
   _syncGlyph() {
-    if (this._btn) this._btn.textContent = getCurrentTheme() === 'dark' ? '☀️' : '🌙';
+    if (!this._btn) return;
+    if (!this.auto) {
+      // Two states: the glyph is the next theme, as it has always been.
+      this._btn.replaceChildren(getCurrentTheme() === 'dark' ? GLYPH.light : GLYPH.dark);
+      this._btn.removeAttribute('aria-label');
+      return;
+    }
+    const mode = this.mode;
+    const glyph = this.createElement('span', ['nk-theme-glyph'], { 'aria-hidden': 'true' });
+    if (mode === 'auto') glyph.classList.add('auto');
+    for (const text of mode === 'auto' ? [GLYPH.light, GLYPH.dark] : [GLYPH[mode]]) {
+      glyph.appendChild(Object.assign(document.createElement('span'), { textContent: text }));
+    }
+    this._btn.replaceChildren(glyph);
+    // Two emojis are no accessible name; the title's text is.
+    this._btn.setAttribute('aria-label', this._titleText());
   }
 
   _syncTheme(theme) {
     super._syncTheme(theme);
     this._syncGlyph();
+    this._syncTitle();
+  }
+
+  _titleText() {
+    const own = this.getAttribute('title');
+    if (own) return own;
+    if (!this.auto) return this.str('toggleTheme');
+    const name = (mode) => this.str(mode === 'auto' ? 'themeAuto' : mode === 'dark' ? 'themeDark' : 'themeLight');
+    return this.str('appearance').replace('{mode}', name(this.mode)).replace('{next}', name(this.nextMode()));
   }
 
+  _syncTitle() { if (this._btn) this._btn.title = this._titleText(); }
+  onStringsChanged() { this._syncTitle(); if (this.auto) this._syncGlyph(); }
+
   setupEvents() {
-    this._onClick = () => this.apply(getCurrentTheme() === 'dark' ? 'light' : 'dark');
-    this._onMessage = (e) => { const t = e.data?.nkTheme; if (t === 'light' || t === 'dark') this.apply(t); };
+    this._onClick = () => this.apply(this.nextMode());
+    this._onMessage = (e) => { const t = e.data?.nkTheme; if (t === 'light' || t === 'dark' || (t === 'auto' && this.auto)) this.apply(t); };
+    // `auto` has to notice a system switch while the page is open, and a
+    // choice made in another tab. Both only matter where `auto` is offered.
+    this._onSystem = () => { if (this.mode === 'auto') this._applyMode(); };
+    this._onStorage = (e) => { if (e.key === this.storageKey || e.key === null) this._applyMode(); };
     this._btn.addEventListener('click', this._onClick);
     window.addEventListener('message', this._onMessage);
+    if (this.auto) {
+      this.systemQuery.addEventListener('change', this._onSystem);
+      window.addEventListener('storage', this._onStorage);
+    }
   }
 
   teardownEvents() {
     this._btn?.removeEventListener('click', this._onClick);
     window.removeEventListener('message', this._onMessage);
+    if (this._onSystem) this.systemQuery.removeEventListener('change', this._onSystem);
+    window.removeEventListener('storage', this._onStorage);
   }
 
-  _syncTitle() { this._btn.title = this.getAttribute('title') || this.str('toggleTheme'); }
-  onStringsChanged() { this._syncTitle(); }
-
   onAttributeChanged(name) {
-    if (name === 'title' && this._btn) this._syncTitle();
+    if (!this._btn) return;
+    if (name === 'modes') {
+      // Re-arm: the listeners above hang on whether `auto` is offered.
+      if (this.isConnected) { this.teardownEvents(); this.setupEvents(); }
+      this.auto ? this._applyMode() : this._syncGlyph();
+    }
+    this._syncTitle();
   }
 
-  /** Sets the theme on <html>, persists it and reports it. */
-  apply(theme) {
-    document.documentElement.setAttribute('data-theme', theme);
-    try { localStorage.setItem(this.storageKey, theme); } catch {}
-    this._syncGlyph();
-    this.emit('nk-change', { value: theme });
+  /**
+   * Sets the mode on <html>, persists it and reports it. `light` / `dark`
+   * are stored, `auto` (only where it is offered) clears the entry – that is
+   * what the inline script before first paint reads.
+   */
+  apply(mode) {
+    const wanted = mode === 'auto' && this.auto ? 'auto' : mode === 'light' || mode === 'dark' ? mode : this.themeFor(mode);
+    try {
+      if (wanted === 'auto') localStorage.removeItem(this.storageKey);
+      else localStorage.setItem(this.storageKey, wanted);
+      this._unsaved = null;
+    } catch { this._unsaved = wanted; }
+    this._applyMode(wanted);
+    this.emit('nk-change', { value: this.auto ? wanted : this.themeFor(wanted), theme: this.themeFor(wanted) });
   }
 
   get storageKey() { return this.getAttribute('storage-key') || 'nk-theme'; }
-  get value() { return getCurrentTheme(); }
+  /** The mode: 'auto' | 'light' | 'dark'. Without `auto` the theme, as before. */
+  get value() { return this.auto ? this.mode : getCurrentTheme(); }
   set value(v) { this.apply(v); }
+  /** The theme on screen – 'light' or 'dark', whatever the mode. */
+  get theme() { return this.themeFor(); }
 }
 
 customElements.define('nk-theme-toggle', NkThemeToggle);

package/dist/components/nk-toast.js

@@ -1,12 +1,22 @@
 import { NkElement } from './base.js';
+import { d as deepActiveElement, c as containsDeep } from './shared/focus-D55JGjRA.js';
 import '@jungherz-de/notionkit/notionkit-styles.js';
 
 // <nk-toast id="toast"></nk-toast>   …   toast.show('Saved');
-// → <div class="nk-toast show">✓ Saved</div>
+// toast.show('Moved to trash', { action: { label: 'Undo', value: 'undo' } });
+// → <div class="nk-toast show">✓ Moved to trash<button class="t-action">Undo</button><button class="t-close">×</button></div>
 // One node, bottom-centred, auto-hides after `duration` ms (default 2200).
 // Above a tab bar at the bottom of the screen it rises 12px over the bar:
 // notionkit.css does that for class markup with :has(), which cannot see
 // into shadow roots, so the element measures the bar when it opens.
+// An action (1.19.0) – from show() or a <button slot="action"> – makes it
+// Notion's "Moved to trash · Undo": a button, and an × that closes. Such a
+// toast stays until one of them is used, unless show() names a duration,
+// and waits while the pointer or the focus is on it. The action fires
+// nk-action { action, value, label } and, unless cancelled, closes it;
+// Escape closes it while the focus is inside.
+const CLOSE_ICON = '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12"/></svg>';
+
 class NkToast extends NkElement {
   static get observedAttributes() { return ['open', 'duration', 'icon']; }
 
@@ -14,19 +24,37 @@ class NkToast extends NkElement {
     this._box = this.createElement('div', ['nk-toast'], { role: 'status', 'aria-live': 'polite' });
     this._icon = document.createElement('span');
     this._msg = document.createElement('span');
-    this._box.append(this._icon, this._msg, document.createElement('slot'));
+    this._action = this.createElement('button', ['t-action'], { type: 'button' });
+    this._actionSlot = this.createElement('slot', [], { name: 'action' });
+    this._close = this.createElement('button', ['t-close'], { type: 'button' });
+    this._close.innerHTML = CLOSE_ICON;
+    this._box.append(this._icon, this._msg, document.createElement('slot'), this._actionSlot);
     this._wrapper.appendChild(this._box);
     this._sync();
   }
 
   _sync() {
-    if (this.getBoolAttr('open')) this._lift();
-    this._box.classList.toggle('show', this.getBoolAttr('open'));
+    const open = this.getBoolAttr('open');
+    if (open) this._lift();
+    this._box.classList.toggle('show', open);
     const icon = this.getAttribute('icon') ?? '✓';
     this._icon.textContent = icon;
     this._icon.style.display = icon ? '' : 'none';
+    // An empty message takes no place – with slotted text it added a second gap.
+    this._msg.style.display = this._msg.textContent ? '' : 'none';
+    // The action from show() and the × sit in the tree only when there is an
+    // action; a closed toast keeps them for its fade, out of the tab order.
+    const own = this._act, slotted = this._slotted();
+    if (own) { this._action.textContent = own.label; if (!this._action.isConnected) this._actionSlot.before(this._action); }
+    else this._action.remove();
+    if (own || slotted) { if (!this._close.isConnected) this._box.appendChild(this._close); }
+    else this._close.remove();
+    this._close.setAttribute('aria-label', this.str('close'));
+    for (const b of [this._action, this._close]) open ? b.removeAttribute('tabindex') : b.setAttribute('tabindex', '-1');
   }
 
+  _slotted() { return this._actionSlot?.assignedElements()[0] ?? null; }
+
   // A bar counts when it is rendered and ends near the bottom of the viewport –
   // the app's own bar, fixed, sticky or floating. A tab bar shown as a preview
   // somewhere in a page does not lift the toast.
@@ -41,16 +69,83 @@ class NkToast extends NkElement {
     this._box.style.bottom = rect ? `${Math.round(innerHeight - rect.top + 12)}px` : '';
   }
 
-  /** Shows `message` (or the slotted content when omitted) and hides it again after `duration`. */
-  show(message, { duration } = {}) {
+  /**
+   * Shows `message` (or the slotted content when omitted) and hides it again
+   * after `duration` ms – the attribute's, else 2200; with an `action`
+   * ({ label, value }) it stays until the action or the × is used.
+   */
+  show(message, { duration, action } = {}) {
     if (message !== undefined) this._msg.textContent = message;
+    this._shown = (this._shown ?? 0) + 1;
+    this._act = action ? { label: String(action.label ?? action.value ?? ''), value: action.value ?? action.label } : null;
+    const attr = this.getAttribute('duration'), set = attr !== null && attr.trim() !== '' && Number.isFinite(Number(attr));
+    // Number(null) is 0: without the attribute a toast used to stay for good.
+    this._ms = duration ?? (this._act || this._slotted() ? 0 : set ? Number(attr) : 2200);
+    if (this.getBoolAttr('open')) this._sync(); else this.setBoolAttr('open', true);
+    this._arm();
+  }
+
+  close() {
     clearTimeout(this._timer);
-    this.setBoolAttr('open', true);
-    const ms = duration ?? Number(this.getAttribute('duration')) ?? 2200;
-    if (ms > 0) this._timer = setTimeout(() => this.close(), ms || 2200);
+    // The focus leaves with the toast, back to where it came from.
+    const active = deepActiveElement();
+    if (active && containsDeep(this, active)) {
+      this._from?.isConnected && this._from.focus({ preventScroll: true });
+      if (containsDeep(this, deepActiveElement())) active.blur();
+    }
+    this._from = null;
+    this.setBoolAttr('open', false);
   }
 
-  close() { clearTimeout(this._timer); this.setBoolAttr('open', false); }
+  _arm() {
+    clearTimeout(this._timer);
+    if (this._ms > 0 && !this._held && this.getBoolAttr('open')) this._timer = setTimeout(() => this.close(), this._ms);
+  }
+
+  _take(act) {
+    if (!act) return;
+    // A handler that shows the next message – "Restored" – keeps it open.
+    const shown = this._shown;
+    if (this.emit('nk-action', { action: act.value, value: act.value, label: act.label }) && this._shown === shown) this.close();
+  }
+
+  setupEvents() {
+    this._onClick = (e) => {
+      const path = e.composedPath();
+      if (path.includes(this._close)) { this.close(); return; }
+      if (path.includes(this._action)) { this._take(this._act); return; }
+      const slotted = this._slotted();
+      if (slotted && path.includes(slotted)) this._take({ value: slotted.value || slotted.getAttribute('value') || slotted.textContent.trim(), label: slotted.textContent.trim() });
+    };
+    // While the pointer or the focus is on it, a toast with a duration waits.
+    this._onHold = (e) => {
+      if (e.type === 'focusin' && !this._from) this._from = e.relatedTarget ?? null;
+      this._held = true; clearTimeout(this._timer);
+    };
+    this._onRelease = (e) => {
+      if (e.relatedTarget && containsDeep(this, e.relatedTarget)) return;
+      this._held = false; this._arm();
+    };
+    this._onKey = (e) => { if (e.key === 'Escape') { e.stopPropagation(); this.close(); } };
+    this._onSlot = () => this._sync();
+    this._box.addEventListener('click', this._onClick);
+    this._box.addEventListener('pointerover', this._onHold);
+    this._box.addEventListener('pointerout', this._onRelease);
+    this._box.addEventListener('focusin', this._onHold);
+    this._box.addEventListener('focusout', this._onRelease);
+    this._box.addEventListener('keydown', this._onKey);
+    this._actionSlot.addEventListener('slotchange', this._onSlot);
+  }
+
+  teardownEvents() {
+    this._box?.removeEventListener('click', this._onClick);
+    this._box?.removeEventListener('pointerover', this._onHold);
+    this._box?.removeEventListener('pointerout', this._onRelease);
+    this._box?.removeEventListener('focusin', this._onHold);
+    this._box?.removeEventListener('focusout', this._onRelease);
+    this._box?.removeEventListener('keydown', this._onKey);
+    this._actionSlot?.removeEventListener('slotchange', this._onSlot);
+  }
 
   onAttributeChanged(name) {
     this._sync();
@@ -62,7 +157,8 @@ class NkToast extends NkElement {
   get open() { return this.getBoolAttr('open'); }
   set open(v) { this.setBoolAttr('open', v); }
   get message() { return this._msg?.textContent ?? ''; }
-  set message(v) { if (this._msg) this._msg.textContent = v; }
+  set message(v) { if (this._msg) { this._msg.textContent = v; this._sync(); } }
+  onStringsChanged() { if (this._box) this._sync(); }
 }
 
 customElements.define('nk-toast', NkToast);

package/dist/components/nk-tooltip.js

@@ -1,6 +1,6 @@
 import { NkElement } from './base.js';
 import { a as placeNear } from './shared/floating-DOK73b_D.js';
-import { d as deepActiveElement } from './shared/focus-C4tbSNND.js';
+import { d as deepActiveElement } from './shared/focus-D55JGjRA.js';
 import '@jungherz-de/notionkit/notionkit-styles.js';
 
 // <nk-tooltip></nk-tooltip>                    one for the page: every [data-tooltip]

package/dist/components/shared/{focus-C4tbSNND.js → focus-D55JGjRA.js}

@@ -44,6 +44,12 @@ function deepActiveElement() {
   return el;
 }
 
+/** Whether `node` lies inside `root`, across shadow roots – Node.contains() stops at them. */
+function containsDeep(root, node) {
+  for (let n = node; n; n = n.parentNode ?? n.host) if (n === root) return true;
+  return false;
+}
+
 /** The first tabbable element inside a light-DOM subtree, looking into shadow roots. */
 function firstFocusable(root) {
   const SEL = 'a[href], button:not([disabled]), input:not([disabled]):not([type=hidden]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]), [contenteditable="true"], [contenteditable="plaintext-only"]';
@@ -57,4 +63,4 @@ function firstFocusable(root) {
   return walk(root);
 }
 
-export { deepActiveElement as d, firstFocusable as f, inertOutside as i, lockScroll as l, unlockScroll as u };
+export { containsDeep as c, deepActiveElement as d, firstFocusable as f, inertOutside as i, lockScroll as l, unlockScroll as u };

package/dist/components/shared/layers-D9YYYA5g.js

@@ -0,0 +1,35 @@
+// Escape closes the layer that opened last (NotionKit Elements 1.19.0). The
+// overlays – modal, sheet, dialog, side peek, palette, popover, a floating
+// menu or date picker – join this stack while they are open, and one
+// listener on the document, in the capture phase, hands Escape to the top
+// of it only. Each used to listen for itself: a date picker opened from a
+// dialog and the dialog both listened on the document in the same phase,
+// where stopPropagation() does not part them, so one Escape closed both.
+const stack = [];
+let listening = false;
+
+function onKey(e) {
+  if (e.key !== 'Escape') return;
+  // Escape with the focus in a toast is the toast's, not the dialog's below.
+  if (e.composedPath().some(n => n.localName === 'nk-toast')) return;
+  for (let i = stack.length - 1; i >= 0; i--) if (!stack[i].el.isConnected) stack.splice(i, 1);
+  const top = stack.at(-1);
+  if (!top) return;
+  e.stopPropagation();
+  top.close();
+}
+
+/** `el` is open on top of the others; Escape calls `close` until closeLayer(el). */
+function openLayer(el, close) {
+  closeLayer(el);
+  stack.push({ el, close });
+  if (!listening && typeof document !== 'undefined') { document.addEventListener('keydown', onKey, true); listening = true; }
+}
+
+/** `el` is closed or gone. */
+function closeLayer(el) {
+  const i = stack.findIndex(layer => layer.el === el);
+  if (i >= 0) stack.splice(i, 1);
+}
+
+export { closeLayer as c, openLayer as o };