@jungherz-de/notionkit-elements 1.17.0 → 1.19.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jungherz-de/notionkit-elements",
-  "version": "1.17.0",
+  "version": "1.19.0",
   "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)",
@@ -63,10 +63,10 @@
     "dark-mode"
   ],
   "peerDependencies": {
-    "@jungherz-de/notionkit": ">=1.17.0"
+    "@jungherz-de/notionkit": ">=1.19.1"
   },
   "devDependencies": {
-    "@jungherz-de/notionkit": "^1.17.0",
+    "@jungherz-de/notionkit": "^1.19.1",
     "@playwright/test": "^1.50.0",
     "@rollup/plugin-node-resolve": "^15.0.0",
     "@rollup/plugin-terser": "^0.4.0",

package/src/components/content/nk-progress.js

@@ -3,6 +3,9 @@ import { NkElement } from '../../base.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']; }
 
@@ -11,8 +14,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();
   }
 
@@ -29,7 +31,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/src/components/forms/nk-calendar.js

@@ -2,6 +2,7 @@ import { NkFormElement } from '../../base.js';
 import { isoOf, parseDay, addDays, isoWeek, resolveLocale, firstWeekday, weekdayNames, monthGrid, stepMonth, weekLabel, CHEVRONS } from '../../util/dates.js';
 import { placeUnder } from '../../util/floating.js';
 import { deepActiveElement } from '../../util/focus.js';
+import { openLayer, closeLayer } from '../../util/layers.js';
 
 // <nk-calendar name="due" value="2026-06-02" weeks weekend="6,0"></nk-calendar>
 // <nk-calendar range value="2026-06-08/2026-06-12"></nk-calendar>
@@ -271,14 +272,13 @@ class NkCalendar extends NkFormElement {
       this._draw();
       this.emit('nk-change', { value: '', start: null, end: null, time: null });
     };
-    // Floating: a tap outside closes it and reaches nothing else; Escape closes (captured, before a modal around it).
+    // Floating: a tap outside closes it and reaches nothing else; Escape closes it, before a dialog around it (util/layers.js).
     this._onOutside = (e) => {
       const path = e.composedPath();
       if (path.includes(this) || (this._anchor && path.includes(this._anchor))) return;
       e.preventDefault(); e.stopPropagation();
       this.close();
     };
-    this._onEscape = (e) => { if (e.key === 'Escape' && this.getBoolAttr('floating') && this.getBoolAttr('open')) { e.stopPropagation(); this.close(); } };
     this._grid.addEventListener('click', this._onGrid);
     this._grid.addEventListener('keydown', this._onKey);
     this._todayBtn.addEventListener('click', this._onToday);
@@ -286,7 +286,6 @@ class NkCalendar extends NkFormElement {
     this._next.addEventListener('click', this._onNext);
     this._timeInput.addEventListener('change', this._onTime);
     this._clear.addEventListener('click', this._onClear);
-    document.addEventListener('keydown', this._onEscape, true);
     if (this.getBoolAttr('open')) document.addEventListener('click', this._onOutside, true);
   }
 
@@ -298,7 +297,7 @@ class NkCalendar extends NkFormElement {
     this._next?.removeEventListener('click', this._onNext);
     this._timeInput?.removeEventListener('change', this._onTime);
     this._clear?.removeEventListener('click', this._onClear);
-    document.removeEventListener('keydown', this._onEscape, true);
+    closeLayer(this);
     document.removeEventListener('click', this._onOutside, true);
   }
 
@@ -322,7 +321,9 @@ class NkCalendar extends NkFormElement {
       this._returnFocus = deepActiveElement();
       if (this._returnFocus?.matches(':focus-visible')) requestAnimationFrame(() => this.focusDay());
       document.addEventListener('click', this._onOutside, true);
+      if (this.getBoolAttr('floating')) openLayer(this, () => this.close());
     } else {
+      closeLayer(this);
       document.removeEventListener('click', this._onOutside, true);
       const back = this._returnFocus;
       this._returnFocus = null;

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

@@ -3,7 +3,8 @@ 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>
+//     <button class="cf-btn" aria-label="Show"><svg>…</svg><span>Show</span></button>
+//     <button class="cf-btn" aria-label="Copy"><svg>…</svg><span>Copy</span></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
@@ -12,8 +13,21 @@ import { NkElement } from '../../base.js';
 // lands in the markup. Fires nk-action { action: 'copy', value, ok }. The
 // texts come in English or German after the language (1.17.0, setStrings()
 // for others); copy-label, copied-label, show-label, hide-label set them here.
+// Each button carries an icon beside its word (1.18.0): on a phone, and with
+// `icons` anywhere, the icon stands in for the word – two overlapping squares,
+// an eye, a check in green for the moment after – and a masked key keeps a
+// dozen characters more. The word stays the button's name, and while the
+// icons show, its tooltip for <nk-tooltip>.
+const ICONS = {
+  copy: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M15 9V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h4"/><rect x="9" y="9" width="12" height="12" rx="2"/></svg>',
+  copied: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>',
+  show: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z"/><circle cx="12" cy="12" r="3"/></svg>',
+  hide: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z"/><circle cx="12" cy="12" r="3"/><path d="m3 3 18 18"/></svg>',
+};
+const PHONE = typeof matchMedia === 'function' ? matchMedia('(max-width: 860px)') : null;
+
 class NkCopyField extends NkElement {
-  static get observedAttributes() { return ['value', 'mono', 'wrap', 'wide', 'secret', 'copy-label', 'copied-label', 'show-label', 'hide-label']; }
+  static get observedAttributes() { return ['value', 'mono', 'wrap', 'wide', 'secret', 'icons', 'copy-label', 'copied-label', 'show-label', 'hide-label']; }
 
   render() {
     this._val ??= this.getAttribute('value') ?? '';
@@ -28,29 +42,41 @@ class NkCopyField extends NkElement {
 
   _sync() {
     if (!this._box) return;
-    for (const m of ['mono', 'wrap', 'wide']) this._box.classList.toggle(m, this.getBoolAttr(m));
+    for (const m of ['mono', 'wrap', 'wide', 'icons']) 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') || this.str('hide')) : (this.getAttribute('show-label') || this.str('show'));
+    const tip = this.getBoolAttr('icons') || !!PHONE?.matches;
+    this._button(this._show, this._revealed ? 'hide' : 'show', this._revealed ? (this.getAttribute('hide-label') || this.str('hide')) : (this.getAttribute('show-label') || this.str('show')), tip);
     this._show.setAttribute('aria-pressed', String(!!this._revealed));
-    this._copy.textContent = this._copied ? (this.getAttribute('copied-label') || this.str('copied')) : (this.getAttribute('copy-label') || this.str('copy'));
+    this._button(this._copy, this._copied ? 'copied' : 'copy', this._copied ? (this.getAttribute('copied-label') || this.str('copied')) : (this.getAttribute('copy-label') || this.str('copy')), tip);
     this._copy.classList.toggle('copied', !!this._copied);
   }
 
+  /** The icon and the word of a button; the word is its name, and its tooltip while the icon stands in for it. */
+  _button(btn, icon, word, tip) {
+    if (btn.dataset.icon !== icon) { btn.innerHTML = `${ICONS[icon]}<span></span>`; btn.dataset.icon = icon; }
+    btn.lastChild.textContent = word;
+    btn.setAttribute('aria-label', word);
+    if (tip) btn.setAttribute('data-tooltip', word); else btn.removeAttribute('data-tooltip');
+  }
+
   setupEvents() {
     this._onCopy = () => this.copy();
     this._onShow = () => { this._revealed = !this._revealed; this._sync(); };
+    this._onPhone = () => this._sync();
     this._copy.addEventListener('click', this._onCopy);
     this._show.addEventListener('click', this._onShow);
+    PHONE?.addEventListener('change', this._onPhone);
   }
 
   teardownEvents() {
     this._copy?.removeEventListener('click', this._onCopy);
     this._show?.removeEventListener('click', this._onShow);
+    PHONE?.removeEventListener('change', this._onPhone);
     clearTimeout(this._timer);
   }
 
@@ -83,6 +109,8 @@ class NkCopyField extends NkElement {
   set value(v) { this._val = v == null ? '' : String(v); this._sync(); }
   get secret() { return this.getBoolAttr('secret'); }
   set secret(v) { this.setBoolAttr('secret', v); }
+  get icons() { return this.getBoolAttr('icons'); }
+  set icons(v) { this.setBoolAttr('icons', v); }
 }
 
 customElements.define('nk-copy-field', NkCopyField);

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

@@ -1,5 +1,6 @@
 import { NkElement } from '../../base.js';
-import { lockScroll, unlockScroll, inertOutside } from '../../util/focus.js';
+import { lockScroll, unlockScroll, inertOutside, deepActiveElement } from '../../util/focus.js';
+import { openLayer, closeLayer } from '../../util/layers.js';
 import { fuzzyScore } from '../../util/fuzzy.js';
 
 // <nk-cmdk id="palette" placeholder="Search or type a command …"></nk-cmdk>
@@ -133,14 +134,16 @@ class NkCmdk extends NkElement {
     if (open === this._wasOpen) return;
     this._wasOpen = open;
     if (open) {
-      this._returnFocus = document.activeElement;
+      this._returnFocus = deepActiveElement();
       this._input.value = '';
       this._index = 0;
       this._renderList();
       lockScroll();
       this._undoInert = inertOutside(this);
+      openLayer(this, () => this.close());
       requestAnimationFrame(() => this._input.focus({ preventScroll: true }));
     } else {
+      closeLayer(this);
       unlockScroll();
       this._undoInert?.(); this._undoInert = null;
       const back = this._returnFocus;
@@ -151,8 +154,7 @@ class NkCmdk extends NkElement {
 
   setupEvents() {
     this._onDocKey = (e) => {
-      if (this._matchesHotkey(e)) { e.preventDefault(); this.toggle(); return; }
-      if (e.key === 'Escape' && this.getBoolAttr('open')) { e.stopPropagation(); this.close(); }
+      if (this._matchesHotkey(e)) { e.preventDefault(); this.toggle(); }
     };
     this._onInput = () => { this._index = 0; this._renderList(); };
     this._onInputKey = (e) => {
@@ -181,7 +183,7 @@ class NkCmdk extends NkElement {
     this._list?.removeEventListener('mousemove', this._onListMove);
     this._list?.removeEventListener('mousedown', this._onListDown);
     this._backdrop?.removeEventListener('click', this._onBackdrop);
-    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) {

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

@@ -1,5 +1,6 @@
 import { NkElement } from '../../base.js';
 import { lockScroll, unlockScroll, inertOutside, firstFocusable, deepActiveElement } from '../../util/focus.js';
+import { openLayer, closeLayer } from '../../util/layers.js';
 
 // <nk-dialog id="trash" title="Move “Roadmap” to trash?" alert>
 //   The page and its sub-pages can be restored from Trash for 30 days.
@@ -79,8 +80,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;
@@ -92,7 +95,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) => {
@@ -112,7 +114,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();
   }
 
@@ -121,8 +122,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/src/components/overlays/nk-menu.js

@@ -1,5 +1,6 @@
 import { NkElement } from '../../base.js';
-import { deepActiveElement } from '../../util/focus.js';
+import { deepActiveElement, containsDeep } from '../../util/focus.js';
+import { openLayer, closeLayer } from '../../util/layers.js';
 import { placeUnder } from '../../util/floating.js';
 
 // <nk-menu>
@@ -48,15 +49,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) {
@@ -94,17 +110,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/src/components/overlays/nk-modal.js

@@ -1,5 +1,6 @@
 import { NkElement } from '../../base.js';
-import { lockScroll, unlockScroll, inertOutside, firstFocusable } from '../../util/focus.js';
+import { lockScroll, unlockScroll, inertOutside, firstFocusable, deepActiveElement } from '../../util/focus.js';
+import { openLayer, closeLayer } from '../../util/layers.js';
 
 // <nk-modal id="settings">
 //   <nk-settings-user slot="user" name="…" mail="…"></nk-settings-user>
@@ -93,14 +94,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;
@@ -111,7 +115,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]');
@@ -125,7 +128,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);
@@ -133,11 +135,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/src/components/overlays/nk-peek.js

@@ -1,5 +1,6 @@
 import { NkElement } from '../../base.js';
 import { lockScroll, unlockScroll, inertOutside, deepActiveElement } from '../../util/focus.js';
+import { openLayer, closeLayer } from '../../util/layers.js';
 
 // <nk-peek id="peek" label="Database Table-View">
 //   <nk-btn slot="actions" variant="topbar" aria-label="Open as page"><svg …></svg></nk-btn>
@@ -108,8 +109,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);
@@ -122,7 +125,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) => {
@@ -156,7 +158,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);
   }
@@ -168,7 +169,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/src/components/overlays/nk-pop.js

@@ -1,4 +1,5 @@
 import { NkElement } from '../../base.js';
+import { openLayer, closeLayer } from '../../util/layers.js';
 
 // <nk-pop placement="bottom-start">
 //   <nk-btn slot="trigger" variant="secondary">Options</nk-btn>
@@ -48,12 +49,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);
   }
@@ -61,7 +60,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);
   }
@@ -70,6 +69,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/src/components/overlays/nk-sheet.js

@@ -1,5 +1,6 @@
 import { NkElement } from '../../base.js';
 import { lockScroll, unlockScroll, inertOutside, firstFocusable, deepActiveElement } from '../../util/focus.js';
+import { openLayer, closeLayer } from '../../util/layers.js';
 
 // <nk-sheet id="more" title="More">
 //   <nk-tree manual>
@@ -52,8 +53,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;
@@ -64,15 +67,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) {