@jungherz-de/notionkit-elements 1.6.0 → 1.8.0

package/dist/components/nk-image-picker.js

@@ -0,0 +1,130 @@
+import { NkElement } from './base.js';
+import '@jungherz-de/notionkit/notionkit-styles.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/dist/components/nk-menu-item.js

@@ -5,10 +5,12 @@ import '@jungherz-de/notionkit/notionkit-styles.js';
 // <nk-menu-item type="separator"></nk-menu-item>   <nk-menu-item type="label">Danger</nk-menu-item>
 // <nk-menu-item icon="🗑️" danger value="delete">Delete</nk-menu-item>
 // <nk-menu-item type="switch" icon="🔡" value="small" checked>Small text</nk-menu-item>
+// <nk-menu-item type="check" icon="◉" value="open" checked>Status: Open</nk-menu-item>
 // → <div class="nk-menu-item danger"><span class="m-icon">🗑️</span>Delete<span class="m-shortcut">…</span></div>
 // A switch item carries a .nk-switch on the right, as "Small text" does in
-// Notion's page menu: a click flips `checked` and fires nk-change { value,
-// checked } instead of nk-select, so the menu around it stays open.
+// Notion's page menu; a check item a ✓ where the shortcut stands, as in a
+// filter menu. A click on either flips `checked` and fires nk-change
+// { value, checked } instead of nk-select, so the menu around it stays open.
 class NkMenuItem extends NkElement {
   static get observedAttributes() { return ['icon', 'shortcut', 'danger', 'value', 'type', 'disabled', 'checked']; }
 
@@ -24,7 +26,8 @@ class NkMenuItem extends NkElement {
       el.appendChild(document.createElement('slot'));
     } else {
       const isSwitch = type === 'switch';
-      el = this.createElement('div', ['nk-menu-item'], { role: isSwitch ? 'menuitemcheckbox' : 'menuitem', tabindex: '-1' });
+      this._check = type === 'check';
+      el = this.createElement('div', ['nk-menu-item'], { role: isSwitch || this._check ? 'menuitemcheckbox' : 'menuitem', tabindex: '-1' });
       this._icon = this.createElement('span', ['m-icon']);
       const iconSlot = this.createElement('slot', [], { name: 'icon' });
       iconSlot.appendChild(this._icon);
@@ -49,10 +52,11 @@ class NkMenuItem extends NkElement {
     this._shortcut.style.display = sc ? '' : 'none';
     this._el.classList.toggle('danger', this.getBoolAttr('danger'));
     this._el.setAttribute('aria-disabled', this.getBoolAttr('disabled') ? 'true' : 'false');
-    if (this._switch) {
+    if (this._switch || this._check) {
       const on = this.getBoolAttr('checked') ? 'true' : 'false';
       this._el.setAttribute('aria-checked', on);
-      this._switch.setAttribute('aria-checked', on);
+      if (this._switch) this._switch.setAttribute('aria-checked', on);
+      if (this._check) { this._shortcut.textContent = on === 'true' ? '✓' : ''; this._shortcut.style.display = ''; }
     }
   }
 
@@ -65,7 +69,7 @@ class NkMenuItem extends NkElement {
 
   select() {
     if (!this._el.classList.contains('nk-menu-item') || this.getBoolAttr('disabled')) return;
-    if (this._switch) {
+    if (this._switch || this._check) {
       this.checked = !this.checked;
       this.emit('nk-change', { value: this.value, checked: this.checked, item: this });
       return;

package/dist/components/nk-menu.js

@@ -1,4 +1,5 @@
 import { NkElement } from './base.js';
+import { d as deepActiveElement } from './shared/focus-BNAChOXO.js';
 import '@jungherz-de/notionkit/notionkit-styles.js';
 
 // <nk-menu>
@@ -9,13 +10,79 @@ import '@jungherz-de/notionkit/notionkit-styles.js';
 // </nk-menu>
 // → <div class="nk-pop nk-menu" role="menu">…</div>
 // ↑↓ move between items, Enter selects, nk-select bubbles from the item.
+//
+// <nk-menu floating sheet> is a menu over the page (NotionKit 1.7.0): it
+// fades in like the palette when `open` is set and is a bottom sheet on a
+// phone. The host becomes the fixed box you position – show(anchor) puts it
+// under the anchor, right edges aligned (align="start": left edges). A tap
+// outside closes it and reaches nothing else; Escape and a chosen item
+// close it too, a switch row does not. Opened from the keyboard, focus moves
+// to the first item; closing returns it to where it was.
+const floatSheet = new CSSStyleSheet();
+floatSheet.replaceSync(`:host([floating]) { display: block; position: fixed; z-index: 60; pointer-events: none; }`);
+
+/** 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']; }
+
   render() {
     this._box = this.createElement('div', ['nk-pop', 'nk-menu'], { role: 'menu' });
     this._box.appendChild(document.createElement('slot'));
     this._wrapper.appendChild(this._box);
+    this._syncMode();
+  }
+
+  _syncMode() {
+    this._box.classList.toggle('floating', this.getBoolAttr('floating'));
+    this._box.classList.toggle('sheet', this.getBoolAttr('sheet'));
+    this._box.classList.toggle('open', this.getBoolAttr('open'));
   }
 
+  onAttributeChanged(name) {
+    this._syncMode();
+    if (name !== 'open') return;
+    const open = this.getBoolAttr('open');
+    // aria-expanded belongs on the control itself, inside a host such as <nk-btn>.
+    if (this._anchor) (this._anchor.shadowRoot?.querySelector('button, a[href]') ?? this._anchor).setAttribute('aria-expanded', String(open));
+    if (open) {
+      this._returnFocus = deepActiveElement();
+      if (this._returnFocus?.matches(':focus-visible')) requestAnimationFrame(() => this.focusFirst());
+      document.addEventListener('click', this._onOutside, true);
+    } else {
+      document.removeEventListener('click', this._onOutside, true);
+      const back = this._returnFocus;
+      this._returnFocus = null;
+      if (back?.isConnected && this.contains(document.activeElement)) back.focus({ preventScroll: true });
+    }
+    this.emit('nk-toggle', { open });
+  }
+
+  /** Opens under `anchor` (any element, display: contents hosts included). */
+  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 = ''; }
+    }
+    this.setBoolAttr('open', true);
+  }
+  close() { this.setBoolAttr('open', false); }
+  toggle(anchor) { this.getBoolAttr('open') ? this.close() : this.show(anchor); }
+  get open() { return this.getBoolAttr('open'); }
+  set open(v) { this.setBoolAttr('open', v); }
+
   get items() { return [...this.querySelectorAll(':scope > nk-menu-item')].filter(i => i.selectable); }
 
   setupEvents() {
@@ -33,9 +100,27 @@ class NkMenu extends NkElement {
       }
     };
     this.addEventListener('keydown', this._onKey);
+    // Floating: outside taps close and go nowhere else; Escape and a chosen item close.
+    this._onOutside = (e) => {
+      const path = e.composedPath();
+      if (path.includes(this) || (this._anchor && path.includes(this._anchor))) return;
+      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); }
+  teardownEvents() {
+    this.removeEventListener('keydown', this._onKey);
+    document.removeEventListener('keydown', this._onEscape, true);
+    this.removeEventListener('nk-select', this._onSelect);
+    document.removeEventListener('click', this._onOutside, true);
+  }
 
   /** Focuses the first item (called by a popover when it opens). */
   focusFirst() { this.items[0]?.focus(); }

package/dist/components/nk-modal.js

@@ -1,5 +1,5 @@
 import { NkElement } from './base.js';
-import { l as lockScroll, i as inertOutside, f as firstFocusable, u as unlockScroll } from './shared/focus-DXrK9oLe.js';
+import { l as lockScroll, i as inertOutside, f as firstFocusable, u as unlockScroll } from './shared/focus-BNAChOXO.js';
 import '@jungherz-de/notionkit/notionkit-styles.js';
 
 // <nk-modal id="settings">

package/dist/components/nk-peek.js

@@ -0,0 +1,122 @@
+import { NkElement } from './base.js';
+import { d as deepActiveElement, l as lockScroll, i as inertOutside, u as unlockScroll } from './shared/focus-BNAChOXO.js';
+import '@jungherz-de/notionkit/notionkit-styles.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/dist/components/nk-segmented.js

@@ -7,6 +7,9 @@ import '@jungherz-de/notionkit/notionkit-styles.js';
 // → <div class="nk-segmented">…</div> with .active on the chosen button.
 // The buttons stay in the light DOM (their look comes from the ::slotted
 // twins); the element sets type/role, moves .active and submits the value.
+// With `scroll` the chosen option is kept in view – after the first layout,
+// on every change and when the row's width changes – by scrolling the row
+// alone, never the page, by a relative distance, so right-to-left works too.
 const KEYS = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 };
 
 class NkSegmented extends NkFormElement {
@@ -50,6 +53,19 @@ class NkSegmented extends NkFormElement {
     }
     this._value = value;
     this.setFormValue(value);
+    this._reveal(this._revealed ? 'smooth' : 'instant');
+  }
+
+  /** Scrolls the row the least distance that shows the chosen button whole. */
+  _reveal(behavior) {
+    if (!this.getBoolAttr('scroll') || !this._box?.clientWidth) return;
+    const btn = this.buttons.find(b => b.classList.contains('active'));
+    if (!btn) return;
+    const row = this._box.getBoundingClientRect(), r = btn.getBoundingClientRect(), pad = 8;
+    const delta = r.left < row.left ? r.left - row.left - pad : r.right > row.right ? r.right - row.right + pad : 0;
+    const smooth = behavior === 'smooth' && !matchMedia('(prefers-reduced-motion: reduce)').matches;
+    if (delta) this._box.scrollBy({ left: delta, behavior: smooth ? 'smooth' : 'instant' });
+    this._revealed = true;
   }
 
   setupEvents() {
@@ -73,6 +89,8 @@ class NkSegmented extends NkFormElement {
     this._slot.addEventListener('slotchange', this._onSlot);
     this.addEventListener('click', this._onClick);
     this.addEventListener('keydown', this._onKey);
+    this._resize = new ResizeObserver(() => this._reveal('instant'));
+    this._resize.observe(this._box);
     this._sync();
   }
 
@@ -80,6 +98,7 @@ class NkSegmented extends NkFormElement {
     this._slot?.removeEventListener('slotchange', this._onSlot);
     this.removeEventListener('click', this._onClick);
     this.removeEventListener('keydown', this._onKey);
+    this._resize?.disconnect();
   }
 
   _choose(value) {

package/dist/components/nk-sheet.js

@@ -0,0 +1,97 @@
+import { NkElement } from './base.js';
+import { d as deepActiveElement, l as lockScroll, i as inertOutside, f as firstFocusable, u as unlockScroll } from './shared/focus-BNAChOXO.js';
+import '@jungherz-de/notionkit/notionkit-styles.js';
+
+// <nk-sheet id="more" title="More">
+//   <nk-tree manual>
+//     <nk-section-label>Favourites</nk-section-label>
+//     <nk-tree-item icon="🚀">NotionKit MVP</nk-tree-item>
+//   </nk-tree>
+// </nk-sheet>
+// → <div class="nk-sheet-backdrop open"><div class="nk-sheet" role="dialog">
+//     <div class="sh-grabber"></div><div class="sh-title">More</div>…</div></div>
+//
+// A bottom sheet (NotionKit 1.7.0) with nk-modal's contract: show(), close()
+// and toggle(), Escape and the backdrop close it, focus moves in and back
+// out, the page behind is scroll-locked and inert. It lies above the tab
+// bar; rows inside are 40px high. `title` is the heading shown under the
+// grabber and the dialog's name, never a tooltip – see NkElement.takeTitle().
+// Choosing a row does not close the sheet – the app decides (nk-select
+// bubbles out). Put the element directly under <body>: a transformed
+// ancestor would trap the fixed backdrop.
+class NkSheet extends NkElement {
+  static get observedAttributes() { return ['open', 'title']; }
+
+  render() {
+    this.takeTitle();
+    this._backdrop = this.createElement('div', ['nk-sheet-backdrop']);
+    this._backdrop.inert = true;
+    this._box = this.createElement('div', ['nk-sheet'], { role: 'dialog', 'aria-modal': 'true', tabindex: '-1' });
+    this._heading = this.createElement('div', ['sh-title'], { id: 'title' });
+    this._box.append(this.createElement('div', ['sh-grabber']), this._heading, document.createElement('slot'));
+    this._backdrop.appendChild(this._box);
+    this._wrapper.appendChild(this._backdrop);
+    this._syncTitle();
+    this._syncOpen();
+  }
+
+  _syncTitle() {
+    const text = this._titleText || '';
+    this._heading.textContent = text;
+    this._heading.hidden = !text;
+    if (text) this._box.setAttribute('aria-labelledby', 'title');
+    else this._box.removeAttribute('aria-labelledby');
+  }
+
+  _syncOpen() {
+    const open = this.getBoolAttr('open');
+    this._backdrop.classList.toggle('open', open);
+    this._backdrop.inert = !open;
+    if (open === this._wasOpen) return;
+    this._wasOpen = open;
+    if (open) {
+      this._returnFocus = deepActiveElement();
+      lockScroll();
+      this._undoInert = inertOutside(this);
+      requestAnimationFrame(() => (firstFocusable(this) || this._box).focus({ preventScroll: true }));
+    } else {
+      unlockScroll();
+      this._undoInert?.(); this._undoInert = null;
+      const back = this._returnFocus;
+      if (back && typeof back.focus === 'function' && back.isConnected) back.focus({ preventScroll: true });
+      this._returnFocus = null;
+    }
+  }
+
+  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; }
+  }
+
+  onAttributeChanged(name, oldValue, value) {
+    if (name === 'title') { if (this.takeTitle(value)) this._syncTitle(); return; }
+    this._syncOpen();
+    this.emit('nk-toggle', { open: this.getBoolAttr('open') });
+  }
+
+  show() { this.setBoolAttr('open', true); }
+  close() { this.setBoolAttr('open', false); }
+  toggle() { this.setBoolAttr('open', !this.getBoolAttr('open')); }
+
+  get open() { return this.getBoolAttr('open'); }
+  set open(v) { this.setBoolAttr('open', v); }
+  get title() { return this._titleText ?? ''; }
+  set title(v) { this._titleText = v == null ? '' : String(v); if (this._initialized) this._syncTitle(); }
+}
+
+customElements.define('nk-sheet', NkSheet);
+
+export { NkSheet };

package/dist/components/nk-sidebar.js

@@ -11,42 +11,12 @@ import '@jungherz-de/notionkit/notionkit-styles.js';
 //
 // The host is display:contents so the <aside> is a direct flex child of
 // .nk-app, exactly like the class markup. Below 860px notionkit.css hides the
-// aside; `open` brings it back as an off-canvas drawer (position only – the
-// look is still the stylesheet's).
-//
-// The drawer slides and the scrim fades without a line of JavaScript:
-// `display` transitions with transition-behavior: allow-discrete (the old
-// value is held for the whole duration, so closing animates too) and
-// @starting-style gives the first frame after display: none its start
-// values. `position: fixed` lives on the plain .nk-sidebar, not on the open
-// state – while closing, the aside is still displayed and must not fall
-// back into the flow. Browsers without either feature switch hard, as
-// before; prefers-reduced-motion switches hard on purpose.
-const drawerSheet = new CSSStyleSheet();
-drawerSheet.replaceSync(`
-  .nk-sidebar-backdrop { display: none; position: fixed; inset: 0; z-index: 59; background: var(--nk-scrim-soft); }
-  @media (max-width: 860px) {
-    .nk-sidebar {
-      position: fixed; inset: 0 auto 0 0; z-index: 60;
-      transform: translateX(-100%);
-      transition: background .25s ease, transform .24s cubic-bezier(.2, .8, .25, 1), display .24s;
-      transition-behavior: allow-discrete;
-    }
-    :host([open]) .nk-sidebar { display: flex; transform: none; }
-    @starting-style { :host([open]) .nk-sidebar { transform: translateX(-100%); } }
-    .nk-sidebar-backdrop {
-      opacity: 0;
-      transition: opacity .24s ease, display .24s;
-      transition-behavior: allow-discrete;
-    }
-    :host([open]) .nk-sidebar-backdrop { display: block; opacity: 1; }
-    @starting-style { :host([open]) .nk-sidebar-backdrop { opacity: 0; } }
-  }
-  @media (prefers-reduced-motion: reduce) { .nk-sidebar, .nk-sidebar-backdrop { transition: none; } }
-`);
-
+// aside; `open` brings it back as a drawer over the page. The drawer is the
+// stylesheet's since NotionKit 1.7.0 (.nk-sidebar.open, .nk-sidebar-backdrop
+// .open) – the sidebar slides and the scrim fades by the same rules as the
+// class markup; the element toggles the two classes. <nk-btn variant="sidebar">
+// in the topbar is the ☰ that opens it.
 class NkSidebar extends NkElement {
-  static get hostStyles() { return drawerSheet; }
   static get observedAttributes() { return ['open']; }
 
   render() {
@@ -63,6 +33,13 @@ class NkSidebar extends NkElement {
     this._wrapper.appendChild(this._backdrop);
     this._wrapper.appendChild(this._aside);
     this._syncFooter();
+    this._syncOpen();
+  }
+
+  _syncOpen() {
+    const open = this.getBoolAttr('open');
+    this._aside.classList.toggle('open', open);
+    this._backdrop.classList.toggle('open', open);
   }
 
   _syncFooter() {
@@ -89,7 +66,9 @@ class NkSidebar extends NkElement {
   }
 
   onAttributeChanged(name) {
-    if (name === 'open') this.emit('nk-toggle', { open: this.getBoolAttr('open') });
+    if (name !== 'open') return;
+    this._syncOpen();
+    this.emit('nk-toggle', { open: this.getBoolAttr('open') });
   }
 
   show() { this.setBoolAttr('open', true); }