@jungherz-de/notionkit-elements 1.17.0 → 1.19.0

package/dist/components/nk-dialog.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-dialog id="trash" title="Move “Roadmap” to trash?" alert>
@@ -80,8 +81,10 @@ class NkDialog extends NkElement {
       this.inert = false;
       lockScroll();
       this._undoInert = inertOutside(this);
+      openLayer(this, () => this.close(''));
       requestAnimationFrame(() => (this.querySelector('[autofocus]') || firstFocusable(this) || this._box).focus({ preventScroll: true }));
     } else {
+      closeLayer(this);
       unlockScroll();
       this._undoInert?.(); this._undoInert = null;
       this.inert = this._wasInert;
@@ -93,7 +96,6 @@ 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 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) => {
@@ -113,7 +115,6 @@ class NkDialog extends NkElement {
     this.addEventListener('click', this._onClick);
     this.addEventListener('submit', this._onSubmit);
     this._actionsSlot.addEventListener('slotchange', this._onSlot);
-    document.addEventListener('keydown', this._onKey, true);
     this._onSlot();
   }
 
@@ -122,8 +123,7 @@ class NkDialog extends NkElement {
     this.removeEventListener('click', this._onClick);
     this.removeEventListener('submit', this._onSubmit);
     this._actionsSlot?.removeEventListener('slotchange', this._onSlot);
-    document.removeEventListener('keydown', this._onKey, true);
-    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-menu.js

@@ -1,5 +1,6 @@
 import { NkElement } from './base.js';
-import { d as deepActiveElement } from './shared/focus-C4tbSNND.js';
+import { d as deepActiveElement, c as containsDeep } from './shared/focus-D55JGjRA.js';
+import { o as openLayer, c as closeLayer } from './shared/layers-D9YYYA5g.js';
 import { p as placeUnder } from './shared/floating-DOK73b_D.js';
 import '@jungherz-de/notionkit/notionkit-styles.js';
 
@@ -49,15 +50,30 @@ class NkMenu extends NkElement {
       this._returnFocus = deepActiveElement();
       if (this._returnFocus?.matches(':focus-visible')) requestAnimationFrame(() => this.focusFirst());
       document.addEventListener('click', this._onOutside, true);
+      if (this.getBoolAttr('floating')) { openLayer(this, () => this.close()); this._scrollToStart(); }
     } else {
+      closeLayer(this);
       document.removeEventListener('click', this._onOutside, true);
       const back = this._returnFocus;
       this._returnFocus = null;
-      if (back?.isConnected && this.contains(document.activeElement)) back.focus({ preventScroll: true });
+      // The focus behind shadow hosts: document.activeElement stops at the
+      // host of a view that holds the menu (1.19.0).
+      const active = deepActiveElement();
+      if (back?.isConnected && active && (containsDeep(this, active) || active === document.body)) back.focus({ preventScroll: true });
     }
     this.emit('nk-toggle', { open });
   }
 
+  // A long menu opens at its top again, or at its first checked item (1.19.0):
+  // it kept where it had been scrolled to, its heading out of sight.
+  _scrollToStart() {
+    this._box.scrollTop = 0;
+    const item = this.items.find(i => i.hasAttribute('checked'))?.shadowRoot?.querySelector('.nk-menu-item');
+    if (!item) return;
+    const box = this._box.getBoundingClientRect(), r = item.getBoundingClientRect();
+    if (r.bottom > box.bottom) this._box.scrollTop += r.top - box.top - (box.height - r.height) / 2;
+  }
+
   /** Opens under `anchor` (any element, display: contents hosts included). */
   show(anchor) {
     if (anchor) {
@@ -95,17 +111,14 @@ class NkMenu extends NkElement {
       e.preventDefault(); e.stopPropagation();
       this.close();
     };
-    // Captured, so a menu inside a modal or sheet closes before they do.
-    this._onEscape = (e) => { if (e.key === 'Escape' && this.getBoolAttr('floating') && this.getBoolAttr('open')) { e.stopPropagation(); this.close(); } };
     this._onSelect = () => { if (this.getBoolAttr('floating')) this.close(); };
-    document.addEventListener('keydown', this._onEscape, true);
     this.addEventListener('nk-select', this._onSelect);
     if (this.getBoolAttr('open')) document.addEventListener('click', this._onOutside, true);
   }
 
   teardownEvents() {
     this.removeEventListener('keydown', this._onKey);
-    document.removeEventListener('keydown', this._onEscape, true);
+    closeLayer(this);
     this.removeEventListener('nk-select', this._onSelect);
     document.removeEventListener('click', this._onOutside, true);
   }

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-progress.js

@@ -4,6 +4,9 @@ import '@jungherz-de/notionkit/notionkit-styles.js';
 // <nk-progress value="72" label="72%"></nk-progress>
 // <nk-progress value="72" label="72 %" wide></nk-progress>   → fills its row, the label stays beside it
 // The bar is `.nk-progress > i` — a child combinator, so both nodes live here.
+// With a label the two form one .nk-progress-row (1.18.0): the label beside
+// the bar in a flex column too – a panel – where the host, display: contents,
+// would let them stand one under the other.
 class NkProgress extends NkElement {
   static get observedAttributes() { return ['value', 'max', 'label', 'wide']; }
 
@@ -12,8 +15,7 @@ class NkProgress extends NkElement {
     this._fill = document.createElement('i');
     this._bar.appendChild(this._fill);
     this._label = this.createElement('span', ['nk-progress-label']);
-    this._wrapper.appendChild(this._bar);
-    this._wrapper.appendChild(this._label);
+    this._row = this.createElement('span', ['nk-progress-row']);
     this._sync();
   }
 
@@ -30,7 +32,8 @@ class NkProgress extends NkElement {
     this._bar.setAttribute('aria-valuemax', max);
     const label = this.getAttribute('label');
     this._label.textContent = label ?? '';
-    this._label.style.display = label === null ? 'none' : '';
+    if (label === null) { if (this._bar.parentNode !== this._wrapper) this._wrapper.replaceChildren(this._bar); }
+    else if (this._bar.parentNode !== this._row) { this._row.replaceChildren(this._bar, this._label); this._wrapper.replaceChildren(this._row); }
   }
 
   get value() { return Number(this.getAttribute('value')) || 0; }

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-tab-bar.js

@@ -14,8 +14,12 @@ import '@jungherz-de/notionkit/notionkit-styles.js';
 // stylesheet hides it above 860px – there the sidebar is the navigation –
 // and shows it below; `always` shows it at every width (previews, phone
 // frames), `fixed` pins it to the viewport (standalone PWAs) with a spacer
-// holding its place, `floating` makes it a capsule. Exactly one item is `active`; a
-// `drawer` item opens the sidebar instead of becoming active.
+// holding its place, `floating` makes it a capsule. The item whose value is
+// the bar's `value` is `active`; a `drawer` item opens the sidebar instead of
+// becoming active when clicked. A value no item has – a page without a tab
+// of its own, opened from the drawer – marks the drawer item, as iOS marks
+// "More" (1.18.0); without one no item is active. Without a value the item
+// marked `active`, else the first, is the one.
 class NkTabBar extends NkElement {
   static get observedAttributes() { return ['value', 'always', 'fixed', 'floating', 'label']; }
 
@@ -46,16 +50,18 @@ class NkTabBar extends NkElement {
   }
 
   _sync() {
-    const items = this.items.filter(i => !i.hasAttribute('drawer'));
+    const items = this.items.filter(i => !i.hasAttribute('drawer')), drawers = this.items.filter(i => i.hasAttribute('drawer'));
     if (!items.length) return;
     let value = this.getAttribute('value');
-    if (value === null || !items.some(i => this._valueOf(i) === value)) {
+    if (value === null) {
       const preset = items.find(i => i.hasAttribute('active')) || items[0];
       value = this._valueOf(preset);
     }
+    const known = items.some(i => this._valueOf(i) === value);
     for (const item of items) {
       if (this._valueOf(item) === value) item.setAttribute('active', ''); else item.removeAttribute('active');
     }
+    drawers.forEach((item, n) => { if (!known && n === 0) item.setAttribute('active', ''); else item.removeAttribute('active'); });
     this._value = value;
   }
 

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 };