@jungherz-de/notionkit-elements 1.6.0 → 1.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jungherz-de/notionkit-elements",
-  "version": "1.6.0",
+  "version": "1.7.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)",
@@ -59,15 +59,15 @@
     "dark-mode"
   ],
   "peerDependencies": {
-    "@jungherz-de/notionkit": ">=1.6.0"
+    "@jungherz-de/notionkit": ">=1.7.1"
   },
   "devDependencies": {
-    "@jungherz-de/notionkit": "^1.6.0",
+    "@jungherz-de/notionkit": "^1.7.1",
+    "@playwright/test": "^1.50.0",
     "@rollup/plugin-node-resolve": "^15.0.0",
     "@rollup/plugin-terser": "^0.4.0",
-    "rollup": "^4.0.0",
-    "@playwright/test": "^1.50.0",
+    "pixelmatch": "^7.0.0",
     "pngjs": "^7.0.0",
-    "pixelmatch": "^7.0.0"
+    "rollup": "^4.0.0"
   }
 }

package/src/components/data/nk-database.js

@@ -6,16 +6,24 @@ import { NkElement } from '../../base.js';
 // </nk-database>
 // db.columns = [{ key: 'name', label: 'Name', type: 'text', icon: '📄', title: true }, { key: 'status', type: 'select', options: [...] }, …];
 // db.rows = [{ id: 1, icon: '🧭', name: '…', status: 'done', … }];
-// → <div class="nk-database"><div class="nk-db-tabs">…</div>…active view…</div>
+// <nk-btn slot="tools" variant="tool">Filter</nk-btn> … sit right of the tabs,
+// <nk-filter-bar slot="filters"> under them (NotionKit 1.7.0's toolbar).
+// → <div class="nk-database"><div class="nk-db-toolbar"><div class="nk-db-tabs">…</div>
+//     <div class="tools">…</div></div>…filters…active view…</div>
 // The tabs come from the child views; data is pushed into every view.
 class NkDatabase extends NkElement {
   static get observedAttributes() { return ['view', 'add-view']; }
 
   render() {
     this._box = this.createElement('div', ['nk-database']);
+    this._toolbar = this.createElement('div', ['nk-db-toolbar']);
     this._tabs = this.createElement('div', ['nk-db-tabs'], { role: 'tablist' });
+    const tools = this.createElement('div', ['tools']);
+    this._toolsSlot = this.createElement('slot', [], { name: 'tools' });
+    tools.appendChild(this._toolsSlot);
+    this._toolbar.append(this._tabs, tools);
     this._slot = document.createElement('slot');
-    this._box.append(this._tabs, this._slot);
+    this._box.append(this._toolbar, this.createElement('slot', [], { name: 'filters' }), this._slot);
     this._wrapper.appendChild(this._box);
     this._columns = []; this._rows = [];
     this._sync();
@@ -43,12 +51,11 @@ class NkDatabase extends NkElement {
       v.setData?.(this._columns, this._rows);
     }
     if (this.getBoolAttr('add-view')) {
-      const add = this.createElement('span', ['nk-db-tab'], { role: 'button', 'data-add': '', tabindex: '0' });
-      add.style.color = 'var(--nk-text-tertiary)';
+      const add = this.createElement('span', ['nk-db-tab', 'add'], { role: 'button', 'data-add': '', tabindex: '0' });
       add.textContent = '＋';
       this._tabs.appendChild(add);
     }
-    this._tabs.style.display = views.length ? '' : 'none';
+    this._toolbar.hidden = !views.length && !this._toolsSlot.assignedElements().length;
     this._current = current;
   }
 
@@ -70,6 +77,7 @@ class NkDatabase extends NkElement {
     this._tabs.addEventListener('click', this._onClick);
     this._tabs.addEventListener('keydown', this._onKey);
     this._slot.addEventListener('slotchange', this._onSlot);
+    this._toolsSlot.addEventListener('slotchange', this._onSlot);
     this._sync();
   }
 
@@ -77,6 +85,7 @@ class NkDatabase extends NkElement {
     this._tabs?.removeEventListener('click', this._onClick);
     this._tabs?.removeEventListener('keydown', this._onKey);
     this._slot?.removeEventListener('slotchange', this._onSlot);
+    this._toolsSlot?.removeEventListener('slotchange', this._onSlot);
   }
 
   onAttributeChanged(name) {

package/src/components/data/nk-filter-bar.js

@@ -1,60 +1,76 @@
 import { NkElement } from '../../base.js';
 
-// <nk-filter-bar search placeholder="Search rows …"></nk-filter-bar>
-// bar.filters = [{ key: 'status', label: 'Status: Done', value: 'done' }];
-// Composed from existing classes (nk-btn secondary small, nk-input, nk-tag):
-// filter / sort buttons fire nk-action, chips remove on ×, search and chip
-// changes fire nk-change { filters, search }. The wrapper is layout only.
+// <nk-filter-bar add no-filter no-sort></nk-filter-bar>
+// bar.filters = [{ key: 'status', value: 'done', op: 'is-not', label: 'Status: Open' }];
+// The filters in effect as NotionKit's filter pills (1.7.0), no inline style:
+// → <div class="nk-filter-row">[Filter][Sort]
+//     <span class="nk-filter-pill active"><button>Status: Open</button><button class="fp-remove">×</button></span>…
+//     <button class="nk-filter-pill add">＋ Filter</button> …slot… [search]</div>
+// Filter and Sort are .nk-db-tool buttons (hide them with no-filter / no-sort
+// when the database toolbar carries its own); they fire nk-action. A pill's
+// label fires nk-action { action: 'edit', index, filter }, the add pill
+// nk-action { action: 'add' } – each with the clicked button as `anchor`, to
+// open a menu under it. × removes the filter; every change to filters or
+// search fires nk-change { filters, search }. In slot="filters" of
+// <nk-database> the row sits right under the view tabs. The texts are
+// attributes, for other languages: filter-label, sort-label, add-label,
+// remove-label (the × reads "<remove-label>: <pill>") and placeholder.
 class NkFilterBar extends NkElement {
-  static get observedAttributes() { return ['search', 'placeholder', 'no-filter', 'no-sort', 'value']; }
+  static get observedAttributes() { return ['search', 'placeholder', 'no-filter', 'no-sort', 'value', 'add', 'add-label', 'filter-label', 'sort-label', 'remove-label']; }
 
   render() {
-    this._bar = document.createElement('div');
-    this._bar.style.cssText = 'display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:8px 0';
-    this._filterBtn = this.createElement('button', ['nk-btn', 'secondary', 'small'], { type: 'button', 'data-action': 'filter' });
-    this._filterBtn.textContent = '⚲ Filter';
-    this._sortBtn = this.createElement('button', ['nk-btn', 'secondary', 'small'], { type: 'button', 'data-action': 'sort' });
-    this._sortBtn.textContent = '↕ Sort';
-    this._chips = document.createElement('span');
-    this._chips.style.cssText = 'display:inline-flex;gap:4px;flex-wrap:wrap';
+    this._row = this.createElement('div', ['nk-filter-row']);
+    this._filterBtn = this.createElement('button', ['nk-db-tool'], { type: 'button', 'data-action': 'filter' });
+    this._sortBtn = this.createElement('button', ['nk-db-tool'], { type: 'button', 'data-action': 'sort' });
+    this._pillStart = document.createComment('pills');
+    this._addBtn = this.createElement('button', ['nk-filter-pill', 'add'], { type: 'button', 'data-action': 'add' });
     this._input = this.createElement('input', ['nk-input'], { type: 'search', autocomplete: 'off' });
-    this._input.style.marginLeft = 'auto';
-    this._bar.append(this._filterBtn, this._sortBtn, this._chips, document.createElement('slot'), this._input);
-    this._wrapper.appendChild(this._bar);
+    this._row.append(this._filterBtn, this._sortBtn, this._pillStart, this._addBtn, document.createElement('slot'), this._input);
+    this._wrapper.appendChild(this._row);
     this._filters = [];
     this._sync();
   }
 
   _sync() {
-    this._filterBtn.style.display = this.getBoolAttr('no-filter') ? 'none' : '';
-    this._sortBtn.style.display = this.getBoolAttr('no-sort') ? 'none' : '';
-    this._input.style.display = this.getBoolAttr('search') ? '' : 'none';
+    this._filterBtn.textContent = this.getAttribute('filter-label') || 'Filter';
+    this._filterBtn.hidden = this.getBoolAttr('no-filter');
+    this._filterBtn.classList.toggle('active', this._filters.length > 0);
+    this._sortBtn.textContent = this.getAttribute('sort-label') || 'Sort';
+    this._sortBtn.hidden = this.getBoolAttr('no-sort');
+    this._addBtn.textContent = this.getAttribute('add-label') || '＋ Filter';
+    this._addBtn.hidden = !this.getBoolAttr('add');
+    this._input.hidden = !this.getBoolAttr('search');
     this._input.placeholder = this.getAttribute('placeholder') || 'Search …';
     if (this.hasAttribute('value') && this._input.value !== this.getAttribute('value')) this._input.value = this.getAttribute('value');
-    this._chips.replaceChildren();
-    this._filters.forEach((f, i) => {
-      const chip = this.createElement('span', ['nk-tag', f.color || 'blue'], { 'data-index': i });
-      chip.style.cursor = 'pointer';
-      chip.textContent = `${f.label ?? `${f.key}: ${f.value}`} ×`;
-      chip.title = 'Remove filter';
-      this._chips.appendChild(chip);
-    });
+    for (const old of this._row.querySelectorAll('[data-pill]')) old.remove();
+    const removeLabel = this.getAttribute('remove-label') || 'Remove filter';
+    this._pillStart.after(...this._filters.map((f, i) => {
+      const pill = this.createElement('span', ['nk-filter-pill', 'active'], { 'data-pill': i });
+      const label = this.createElement('button', [], { type: 'button', 'data-edit': i });
+      label.textContent = f.label ?? `${f.key}: ${f.value}`;
+      const remove = this.createElement('button', ['fp-remove'], { type: 'button', 'data-remove': i, 'aria-label': `${removeLabel}: ${label.textContent}` });
+      remove.textContent = '×';
+      pill.append(label, remove);
+      return pill;
+    }));
   }
 
   setupEvents() {
     this._onClick = (e) => {
+      const remove = e.target.closest('[data-remove]');
+      if (remove) { this._filters.splice(Number(remove.dataset.remove), 1); this._sync(); this._emitChange(); return; }
+      const edit = e.target.closest('[data-edit]');
+      if (edit) { const index = Number(edit.dataset.edit); this.emit('nk-action', { action: 'edit', index, filter: this._filters[index], anchor: edit }); return; }
       const btn = e.target.closest('[data-action]');
-      if (btn) { this.emit('nk-action', { action: btn.dataset.action }); return; }
-      const chip = e.target.closest('[data-index]');
-      if (chip) { this._filters.splice(Number(chip.dataset.index), 1); this._sync(); this._emitChange(); }
+      if (btn) this.emit('nk-action', { action: btn.dataset.action, anchor: btn });
     };
     this._onInput = () => { clearTimeout(this._debounce); this._debounce = setTimeout(() => this._emitChange(), 150); };
-    this._bar.addEventListener('click', this._onClick);
+    this._row.addEventListener('click', this._onClick);
     this._input.addEventListener('input', this._onInput);
   }
 
   teardownEvents() {
-    this._bar?.removeEventListener('click', this._onClick);
+    this._row?.removeEventListener('click', this._onClick);
     this._input?.removeEventListener('input', this._onInput);
     clearTimeout(this._debounce);
   }
@@ -63,13 +79,18 @@ class NkFilterBar extends NkElement {
   onAttributeChanged() { this._sync(); }
 
   get filters() { return this._filters; }
-  set filters(v) { this._filters = Array.isArray(v) ? v : []; this._sync(); }
+  set filters(v) { this._filters = Array.isArray(v) ? v : []; if (this._row) this._sync(); }
   get value() { return this._input?.value ?? ''; }
   set value(v) { if (this._input) this._input.value = v ?? ''; }
-  /** Applies filters + search to rows: equality per filter key, substring search over every string field. */
+  /**
+   * Applies filters and search to rows: a filter keeps rows where row[key]
+   * equals value – or differs from it with op: 'is-not'; the search looks
+   * for the text in every string field (a person's name).
+   */
   apply(rows) {
     const q = this.value.trim().toLowerCase();
-    return rows.filter(r => this._filters.every(f => r[f.key] === f.value) && (!q || Object.values(r).some(v => String(typeof v === 'object' && v ? v.name ?? '' : v ?? '').toLowerCase().includes(q))));
+    return rows.filter(r => this._filters.every(f => (f.op === 'is-not' ? r[f.key] !== f.value : r[f.key] === f.value))
+      && (!q || Object.values(r).some(v => String(typeof v === 'object' && v ? v.name ?? '' : v ?? '').toLowerCase().includes(q))));
   }
 }
 

package/src/components/forms/nk-btn.js

@@ -3,13 +3,16 @@ import { NkElement } from '../../base.js';
 // <nk-btn variant="primary" small>Save</nk-btn>   →  <button class="nk-btn primary small">
 // <nk-btn href="/docs" variant="secondary">Docs</nk-btn>  →  <a class="nk-btn secondary">
 // <nk-btn variant="topbar">⭐</nk-btn>  →  <button class="nk-topbar-btn">
+// <nk-btn variant="tool" active>Filter</nk-btn>  →  <button class="nk-db-tool active">  (slot="tools" of nk-database)
+// <nk-btn variant="sidebar" aria-label="Menu">☰</nk-btn>  →  <button class="nk-topbar-btn nk-sidebar-toggle">:
+//   shown on phones only, it opens the page's <nk-sidebar> as a drawer.
 //
 // Modifier classes become attributes. A slotted <svg> is sized by the
 // `.nk-btn ::slotted(svg)` twin; pass the icon itself, never wrapped.
 const VARIANTS = ['primary', 'secondary', 'danger', 'danger-solid', 'topbar', 'share'];
 
 class NkBtn extends NkElement {
-  static get observedAttributes() { return ['variant', 'small', 'disabled', 'type', 'href', 'title', 'aria-label']; }
+  static get observedAttributes() { return ['variant', 'small', 'disabled', 'type', 'href', 'title', 'aria-label', 'aria-haspopup', 'active']; }
 
   render() {
     this._build();
@@ -37,13 +40,22 @@ class NkBtn extends NkElement {
     else el.setAttribute('aria-disabled', disabled ? 'true' : 'false');
     const title = this.getAttribute('title');
     title ? el.setAttribute('title', title) : el.removeAttribute('title');
-    const label = this.getAttribute('aria-label');
-    label ? el.setAttribute('aria-label', label) : el.removeAttribute('aria-label');
+    // The accessible name and the popup hint belong on the button itself.
+    for (const name of ['aria-label', 'aria-haspopup']) {
+      const v = this.getAttribute(name);
+      v ? el.setAttribute(name, v) : el.removeAttribute(name);
+    }
+    if (this.getAttribute('variant') === 'sidebar') el.setAttribute('aria-expanded', this._sidebar()?.open ? 'true' : 'false');
+    else el.removeAttribute('aria-expanded');
   }
 
+  /** The sidebar the ☰ opens: the one in its own app, else the page's. */
+  _sidebar() { return this.closest('nk-app')?.querySelector('nk-sidebar') ?? document.querySelector('nk-sidebar'); }
+
   setupEvents() {
     this._onClick = (e) => {
       if (this.getBoolAttr('disabled')) { e.preventDefault(); e.stopPropagation(); return; }
+      if (this.getAttribute('variant') === 'sidebar') { this._sidebar()?.toggle?.(); return; }
       // A button inside a shadow root is not a submit button of the outer
       // form; forward the intent to the form the host sits in.
       const type = this.getAttribute('type');
@@ -52,11 +64,17 @@ class NkBtn extends NkElement {
         if (form) type === 'submit' ? form.requestSubmit() : form.reset();
       }
     };
+    // The ☰ says whether its drawer is open, however the drawer closed.
+    this._onToggle = (e) => {
+      if (this.getAttribute('variant') === 'sidebar' && e.target === this._sidebar()) this._btn.setAttribute('aria-expanded', e.detail.open ? 'true' : 'false');
+    };
     this._btn.addEventListener('click', this._onClick);
+    document.addEventListener('nk-toggle', this._onToggle);
   }
 
   teardownEvents() {
     this._btn?.removeEventListener('click', this._onClick);
+    document.removeEventListener('nk-toggle', this._onToggle);
   }
 
   onAttributeChanged(name) {
@@ -66,7 +84,11 @@ class NkBtn extends NkElement {
         this._build();
         break;
       case 'variant':
+        this._btn.className = this._computeClasses().join(' ');
+        this._applyState(this._btn);
+        break;
       case 'small':
+      case 'active':
         this._btn.className = this._computeClasses().join(' ');
         break;
       case 'type':
@@ -81,6 +103,8 @@ class NkBtn extends NkElement {
     const variant = this.getAttribute('variant');
     if (variant === 'topbar') return ['nk-topbar-btn'];
     if (variant === 'share') return ['nk-topbar-btn', 'nk-share-btn'];
+    if (variant === 'sidebar') return ['nk-topbar-btn', 'nk-sidebar-toggle'];
+    if (variant === 'tool') return this.getBoolAttr('active') ? ['nk-db-tool', 'active'] : ['nk-db-tool'];
     const classes = ['nk-btn'];
     if (VARIANTS.includes(variant)) classes.push(variant);
     if (this.getBoolAttr('small')) classes.push('small');
@@ -92,6 +116,8 @@ class NkBtn extends NkElement {
 
   get variant() { return this.getAttribute('variant'); }
   set variant(v) { v ? this.setAttribute('variant', v) : this.removeAttribute('variant'); }
+  get active() { return this.getBoolAttr('active'); }
+  set active(v) { this.setBoolAttr('active', v); }
   get small() { return this.getBoolAttr('small'); }
   set small(v) { this.setBoolAttr('small', v); }
   get disabled() { return this.getBoolAttr('disabled'); }

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

@@ -4,10 +4,12 @@ import { NkElement } from '../../base.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']; }
 
@@ -23,7 +25,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);
@@ -48,10 +51,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 = ''; }
     }
   }
 
@@ -64,7 +68,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/src/components/overlays/nk-menu.js

@@ -1,4 +1,5 @@
 import { NkElement } from '../../base.js';
+import { deepActiveElement } from '../../util/focus.js';
 
 // <nk-menu>
 //   <nk-menu-item type="label">Page</nk-menu-item>
@@ -8,13 +9,79 @@ import { NkElement } from '../../base.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() {
@@ -32,9 +99,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/src/components/overlays/nk-sheet.js

@@ -0,0 +1,95 @@
+import { NkElement } from '../../base.js';
+import { lockScroll, unlockScroll, inertOutside, firstFocusable, deepActiveElement } from '../../util/focus.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/src/components/page/nk-segmented.js

@@ -6,6 +6,9 @@ import { NkFormElement } from '../../base.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 {
@@ -49,6 +52,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() {
@@ -72,6 +88,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();
   }
 
@@ -79,6 +97,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) {