@jungherz-de/notionkit-elements 1.0.0

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

@@ -0,0 +1,84 @@
+import { NkFormElement } from '../../base.js';
+
+// <nk-slider name="size" min="12" max="18" value="14" show-value></nk-slider>
+// → <input type="range" class="nk-slider"> <div class="nk-slider-value">14</div>
+const FORWARDED = ['name', 'min', 'max', 'step', 'aria-label'];
+
+class NkSlider extends NkFormElement {
+  static get observedAttributes() { return ['value', 'disabled', 'show-value', 'unit', ...FORWARDED]; }
+
+  render() {
+    this._input = this.createElement('input', ['nk-slider'], { type: 'range' });
+    this._out = this.createElement('div', ['nk-slider-value']);
+    this._apply();
+    this._input.value = this.getAttribute('value') ?? this._input.value;
+    this._defaultValue = this._input.value;
+    this._wrapper.appendChild(this._input);
+    this._wrapper.appendChild(this._out);
+    this._syncOut();
+    this._syncFormValue();
+  }
+
+  _apply() {
+    for (const attr of FORWARDED) {
+      const v = this.getAttribute(attr);
+      v === null ? this._input.removeAttribute(attr) : this._input.setAttribute(attr, v);
+    }
+    this._input.disabled = this.getBoolAttr('disabled') || !!this._formDisabled;
+    this._out.style.display = this.getBoolAttr('show-value') ? '' : 'none';
+  }
+
+  _syncOut() {
+    this._out.textContent = `${this._input.value}${this.getAttribute('unit') || ''}`;
+  }
+
+  setupEvents() {
+    this._onInput = () => {
+      this._syncOut();
+      this._syncFormValue();
+      this.emit('nk-input', { value: Number(this._input.value), name: this.name });
+    };
+    this._onChange = () => {
+      this._syncFormValue();
+      this.emit('nk-change', { value: Number(this._input.value), name: this.name });
+      this.dispatchEvent(new Event('change', { bubbles: true }));
+    };
+    this._input.addEventListener('input', this._onInput);
+    this._input.addEventListener('change', this._onChange);
+  }
+
+  teardownEvents() {
+    this._input?.removeEventListener('input', this._onInput);
+    this._input?.removeEventListener('change', this._onChange);
+  }
+
+  onAttributeChanged(name) {
+    if (!this._input) return;
+    if (name === 'value') this._input.value = this.getAttribute('value') ?? '';
+    else this._apply();
+    this._syncOut();
+    this._syncFormValue();
+  }
+
+  _syncFormValue() { this.setFormValue(this._input.value); }
+  resetValue() { this._input.value = this._defaultValue; this._syncOut(); this._syncFormValue(); }
+  restoreValue(state) { if (typeof state === 'string') { this._input.value = state; this._syncOut(); this._syncFormValue(); } }
+  onFormDisabled(disabled) { this._formDisabled = disabled; this._apply(); }
+
+  focus(options) { this._input?.focus(options); }
+
+  get value() { return Number(this._input?.value ?? this.getAttribute('value')); }
+  set value(v) {
+    if (this._input) { this._input.value = v; this._syncOut(); this._syncFormValue(); }
+    else this.setAttribute('value', v);
+  }
+  get name() { return this.getAttribute('name'); }
+  set name(v) { this.setAttribute('name', v); }
+  get disabled() { return this.getBoolAttr('disabled'); }
+  set disabled(v) { this.setBoolAttr('disabled', v); }
+  get showValue() { return this.getBoolAttr('show-value'); }
+  set showValue(v) { this.setBoolAttr('show-value', v); }
+}
+
+customElements.define('nk-slider', NkSlider);
+export { NkSlider };

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

@@ -0,0 +1,68 @@
+import { NkFormElement } from '../../base.js';
+
+// <nk-switch name="notify" checked></nk-switch>
+// → <button class="nk-switch" role="switch" aria-checked="true">
+// notionkit.css styles the state through [aria-checked]; the toggling is here.
+class NkSwitch extends NkFormElement {
+  static get observedAttributes() { return ['checked', 'disabled', 'name', 'value', 'label']; }
+
+  render() {
+    this._btn = this.createElement('button', ['nk-switch'], { type: 'button', role: 'switch' });
+    this._defaultChecked = this.getBoolAttr('checked');
+    this._apply();
+    this._wrapper.appendChild(this._btn);
+    this._syncFormValue();
+  }
+
+  _apply() {
+    this._btn.setAttribute('aria-checked', this.getBoolAttr('checked') ? 'true' : 'false');
+    this._btn.disabled = this.getBoolAttr('disabled') || !!this._formDisabled;
+    const label = this.getAttribute('label');
+    label ? this._btn.setAttribute('aria-label', label) : this._btn.removeAttribute('aria-label');
+  }
+
+  setupEvents() {
+    this._onClick = () => this.toggle();
+    this._btn.addEventListener('click', this._onClick);
+  }
+
+  teardownEvents() {
+    this._btn?.removeEventListener('click', this._onClick);
+  }
+
+  toggle() {
+    if (this.getBoolAttr('disabled') || this._formDisabled) return;
+    this.checked = !this.checked;
+    this.emit('nk-change', { checked: this.checked, value: this.getAttribute('value') || 'on', name: this.name });
+    this.dispatchEvent(new Event('change', { bubbles: true }));
+  }
+
+  onAttributeChanged() {
+    if (!this._btn) return;
+    this._apply();
+    this._syncFormValue();
+  }
+
+  _syncFormValue() {
+    const val = this.getAttribute('value') || 'on';
+    this.setFormValue(this.getBoolAttr('checked') ? val : null, this.getBoolAttr('checked') ? 'checked' : 'unchecked');
+  }
+
+  resetValue() { this.setBoolAttr('checked', this._defaultChecked); }
+  restoreValue(state) { if (state === 'checked' || state === 'unchecked') this.setBoolAttr('checked', state === 'checked'); }
+  onFormDisabled(disabled) { this._formDisabled = disabled; this._apply(); }
+
+  focus(options) { this._btn?.focus(options); }
+
+  get checked() { return this.getBoolAttr('checked'); }
+  set checked(v) { this.setBoolAttr('checked', v); }
+  get disabled() { return this.getBoolAttr('disabled'); }
+  set disabled(v) { this.setBoolAttr('disabled', v); }
+  get name() { return this.getAttribute('name'); }
+  set name(v) { this.setAttribute('name', v); }
+  get value() { return this.getAttribute('value') || 'on'; }
+  set value(v) { this.setAttribute('value', v); }
+}
+
+customElements.define('nk-switch', NkSwitch);
+export { NkSwitch };

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

@@ -0,0 +1,94 @@
+import { NkFormElement } from '../../base.js';
+
+// <nk-textarea name="bio" rows="3" wide>Text</nk-textarea>  →  <textarea class="nk-textarea wide">
+// The initial value is the `value` attribute, or the element's text content.
+const FORWARDED = ['placeholder', 'name', 'rows', 'maxlength', 'minlength', 'autocomplete', 'aria-label'];
+const BOOLEANS = ['required', 'disabled', 'readonly'];
+
+class NkTextarea extends NkFormElement {
+  static get observedAttributes() { return ['value', 'wide', ...FORWARDED, ...BOOLEANS]; }
+
+  render() {
+    this._input = this.createElement('textarea', ['nk-textarea']);
+    for (const attr of [...FORWARDED, ...BOOLEANS]) this._forward(attr);
+    this._input.value = this.getAttribute('value') ?? this.textContent.trim();
+    this._syncWide();
+    this._wrapper.appendChild(this._input);
+    this._syncFormValue();
+  }
+
+  _forward(attr) {
+    if (BOOLEANS.includes(attr)) {
+      this._input[attr === 'readonly' ? 'readOnly' : attr] = this.getBoolAttr(attr);
+      return;
+    }
+    const v = this.getAttribute(attr);
+    if (v === null) this._input.removeAttribute(attr);
+    else this._input.setAttribute(attr, v);
+  }
+
+  _syncWide() { this._input.classList.toggle('wide', this.getBoolAttr('wide')); }
+
+  setupEvents() {
+    this._onInput = () => {
+      this._syncFormValue();
+      this.emit('nk-input', { value: this._input.value, name: this.name });
+    };
+    this._onChange = () => {
+      this._syncFormValue();
+      this.emit('nk-change', { value: this._input.value, name: this.name });
+      this.dispatchEvent(new Event('change', { bubbles: true }));
+    };
+    this._input.addEventListener('input', this._onInput);
+    this._input.addEventListener('change', this._onChange);
+  }
+
+  teardownEvents() {
+    this._input?.removeEventListener('input', this._onInput);
+    this._input?.removeEventListener('change', this._onChange);
+  }
+
+  onAttributeChanged(name) {
+    if (!this._input) return;
+    if (name === 'value') { this._input.value = this.getAttribute('value') ?? ''; this._syncFormValue(); return; }
+    if (name === 'wide') { this._syncWide(); return; }
+    this._forward(name);
+    this._syncFormValue();
+  }
+
+  _syncFormValue() {
+    this.setFormValue(this._input.value);
+    this.syncValidityFrom(this._input);
+  }
+
+  resetValue() {
+    this._input.value = this.getAttribute('value') ?? this.textContent.trim();
+    this._syncFormValue();
+  }
+
+  restoreValue(state) {
+    if (typeof state === 'string') { this._input.value = state; this._syncFormValue(); }
+  }
+
+  onFormDisabled(disabled) { this._input.disabled = disabled || this.getBoolAttr('disabled'); }
+
+  focus(options) { this._input?.focus(options); }
+  blur() { this._input?.blur(); }
+
+  get value() { return this._input?.value ?? (this.getAttribute('value') ?? ''); }
+  set value(v) {
+    if (this._input) { this._input.value = v ?? ''; this._syncFormValue(); }
+    else this.setAttribute('value', v ?? '');
+  }
+  get name() { return this.getAttribute('name'); }
+  set name(v) { this.setAttribute('name', v); }
+  get disabled() { return this.getBoolAttr('disabled'); }
+  set disabled(v) { this.setBoolAttr('disabled', v); }
+  get required() { return this.getBoolAttr('required'); }
+  set required(v) { this.setBoolAttr('required', v); }
+  get wide() { return this.getBoolAttr('wide'); }
+  set wide(v) { this.setBoolAttr('wide', v); }
+}
+
+customElements.define('nk-textarea', NkTextarea);
+export { NkTextarea };

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

@@ -0,0 +1,201 @@
+import { NkElement } from '../../base.js';
+import { lockScroll, unlockScroll, inertOutside } from '../../util/focus.js';
+import { fuzzyScore } from '../../util/fuzzy.js';
+
+// <nk-cmdk id="palette" placeholder="Search or type a command …"></nk-cmdk>
+// palette.commands = [
+//   { group: 'Pages',   items: [{ id: 'mvp', icon: '🚀', label: 'NotionKit MVP', keywords: 'project' }] },
+//   { group: 'Actions', items: [{ id: 'theme', icon: '🌙', label: 'Toggle theme', shortcut: '⌘⇧L', action: () => … }] },
+// ];
+// → <div class="nk-cmdk-backdrop open"><div class="nk-cmdk"><div class="nk-cmdk-input-row">🔍<input><kbd>esc</kbd></div>
+//     <div class="nk-cmdk-list">…</div><div class="nk-cmdk-footer">…</div></div></div>
+// mod+K toggles (attribute `hotkey`), ↑↓ move, Enter picks (nk-command +
+// item.action), Escape / backdrop close. Fuzzy subsequence search over
+// label + keywords. Put the element directly under <body>.
+class NkCmdk extends NkElement {
+  static get observedAttributes() { return ['open', 'hotkey', 'placeholder']; }
+
+  render() {
+    this._backdrop = this.createElement('div', ['nk-cmdk-backdrop']);
+    this._backdrop.inert = true;
+    this._box = this.createElement('div', ['nk-cmdk'], { role: 'dialog', 'aria-modal': 'true', 'aria-label': 'Command palette' });
+    const row = this.createElement('div', ['nk-cmdk-input-row']);
+    const glass = document.createElement('span');
+    glass.style.fontSize = '15px';
+    glass.textContent = '🔍';
+    this._input = this.createElement('input', [], { type: 'text', autocomplete: 'off', role: 'combobox', 'aria-expanded': 'true', 'aria-autocomplete': 'list' });
+    const esc = this.createElement('kbd', ['nk-kbd']);
+    esc.textContent = 'esc';
+    row.append(glass, this._input, esc);
+    this._list = this.createElement('div', ['nk-cmdk-list'], { role: 'listbox', id: 'list' });
+    this._input.setAttribute('aria-controls', 'list');
+    this._footer = this.createElement('div', ['nk-cmdk-footer']);
+    const footerSlot = this.createElement('slot', [], { name: 'footer' });
+    footerSlot.innerHTML = '<span><kbd class="nk-kbd">↑</kbd><kbd class="nk-kbd">↓</kbd> navigate</span><span><kbd class="nk-kbd">↵</kbd> open</span><span><kbd class="nk-kbd">⌘</kbd><kbd class="nk-kbd">K</kbd> toggle</span>';
+    this._footer.appendChild(footerSlot);
+    this._box.append(row, this._list, this._footer);
+    this._backdrop.appendChild(this._box);
+    this._wrapper.appendChild(this._backdrop);
+    this._commands = [];
+    this._index = 0;
+    this._syncAttrs();
+    this._renderList();
+    this._syncOpen();
+  }
+
+  _syncAttrs() { this._input.placeholder = this.getAttribute('placeholder') || 'Search or type a command …'; }
+
+  /** Filtered, flat list in group order, best matches first within a group. */
+  results() {
+    const q = this._input?.value ?? '';
+    const out = [];
+    for (const group of this._commands) {
+      const scored = (group.items || []).map(item => ({ item, group: group.group, score: fuzzyScore(q, `${item.label} ${item.keywords || ''}`) })).filter(r => r.score > 0);
+      scored.sort((a, b) => b.score - a.score);
+      out.push(...scored);
+    }
+    return out;
+  }
+
+  _renderList() {
+    if (!this._list) return;
+    const results = this.results();
+    this._index = Math.min(this._index, Math.max(0, results.length - 1));
+    this._list.replaceChildren();
+    if (!results.length) {
+      const empty = this.createElement('div', ['nk-cmdk-empty']);
+      empty.textContent = `No results for “${this._input.value}”`;
+      this._list.appendChild(empty);
+      this._input.removeAttribute('aria-activedescendant');
+      return;
+    }
+    let lastGroup = null;
+    results.forEach((r, i) => {
+      if (r.group && r.group !== lastGroup) {
+        const g = this.createElement('div', ['nk-cmdk-group']);
+        g.textContent = r.group;
+        this._list.appendChild(g);
+        lastGroup = r.group;
+      }
+      const el = this.createElement('div', ['nk-cmdk-item'], { role: 'option', id: `opt-${i}`, 'data-index': i });
+      el.classList.toggle('selected', i === this._index);
+      el.setAttribute('aria-selected', i === this._index ? 'true' : 'false');
+      const icon = this.createElement('span', ['m-icon']);
+      icon.textContent = r.item.icon || '';
+      const label = document.createElement('span');
+      label.textContent = r.item.label;
+      el.append(icon, label);
+      if (r.item.shortcut) { const sc = this.createElement('span', ['m-shortcut']); sc.textContent = r.item.shortcut; el.appendChild(sc); }
+      this._list.appendChild(el);
+    });
+    this._input.setAttribute('aria-activedescendant', `opt-${this._index}`);
+  }
+
+  _move(dir) {
+    const n = this.results().length;
+    if (!n) return;
+    this._index = (this._index + dir + n) % n;
+    for (const el of this._list.querySelectorAll('.nk-cmdk-item')) {
+      const on = Number(el.dataset.index) === this._index;
+      el.classList.toggle('selected', on);
+      el.setAttribute('aria-selected', on ? 'true' : 'false');
+      if (on) el.scrollIntoView({ block: 'nearest' });
+    }
+    this._input.setAttribute('aria-activedescendant', `opt-${this._index}`);
+  }
+
+  pick(index = this._index) {
+    const r = this.results()[index];
+    if (!r) return;
+    const query = this._input.value;
+    this.close();
+    const ok = this.emit('nk-command', { id: r.item.id ?? r.item.label, item: r.item, query });
+    if (ok && typeof r.item.action === 'function') r.item.action(r.item);
+  }
+
+  _matchesHotkey(e) {
+    const spec = (this.getAttribute('hotkey') || 'mod+k').toLowerCase().split('+');
+    const key = spec.pop();
+    const mod = spec.includes('mod') ? (e.metaKey || e.ctrlKey) : true;
+    const shift = spec.includes('shift') ? e.shiftKey : !e.shiftKey;
+    const alt = spec.includes('alt') ? e.altKey : !e.altKey;
+    return mod && shift && alt && e.key.toLowerCase() === key;
+  }
+
+  _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 = document.activeElement;
+      this._input.value = '';
+      this._index = 0;
+      this._renderList();
+      lockScroll();
+      this._undoInert = inertOutside(this);
+      requestAnimationFrame(() => this._input.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._onDocKey = (e) => {
+      if (this._matchesHotkey(e)) { e.preventDefault(); this.toggle(); return; }
+      if (e.key === 'Escape' && this.getBoolAttr('open')) { e.stopPropagation(); this.close(); }
+    };
+    this._onInput = () => { this._index = 0; this._renderList(); };
+    this._onInputKey = (e) => {
+      if (e.key === 'ArrowDown') { e.preventDefault(); this._move(1); }
+      else if (e.key === 'ArrowUp') { e.preventDefault(); this._move(-1); }
+      else if (e.key === 'Enter') { e.preventDefault(); this.pick(); }
+    };
+    this._onListClick = (e) => { const el = e.target.closest('.nk-cmdk-item'); if (el) this.pick(Number(el.dataset.index)); };
+    this._onListMove = (e) => { const el = e.target.closest('.nk-cmdk-item'); if (el && Number(el.dataset.index) !== this._index) { this._index = Number(el.dataset.index); this._move(0); } };
+    this._onListDown = (e) => e.preventDefault();   // keep the input focused
+    this._onBackdrop = (e) => { if (e.target === this._backdrop) this.close(); };
+    document.addEventListener('keydown', this._onDocKey);
+    this._input.addEventListener('input', this._onInput);
+    this._input.addEventListener('keydown', this._onInputKey);
+    this._list.addEventListener('click', this._onListClick);
+    this._list.addEventListener('mousemove', this._onListMove);
+    this._list.addEventListener('mousedown', this._onListDown);
+    this._backdrop.addEventListener('click', this._onBackdrop);
+  }
+
+  teardownEvents() {
+    document.removeEventListener('keydown', this._onDocKey);
+    this._input?.removeEventListener('input', this._onInput);
+    this._input?.removeEventListener('keydown', this._onInputKey);
+    this._list?.removeEventListener('click', this._onListClick);
+    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; }
+  }
+
+  onAttributeChanged(name) {
+    if (name === 'open') { this._syncOpen(); this.emit('nk-toggle', { open: this.getBoolAttr('open') }); }
+    else this._syncAttrs();
+  }
+
+  show() { this.setBoolAttr('open', true); }
+  close() { this.setBoolAttr('open', false); }
+  toggle() { this.setBoolAttr('open', !this.getBoolAttr('open')); }
+
+  get commands() { return this._commands; }
+  set commands(list) { this._commands = Array.isArray(list) ? list : []; this._index = 0; this._renderList(); }
+  get open() { return this.getBoolAttr('open'); }
+  set open(v) { this.setBoolAttr('open', v); }
+  get query() { return this._input?.value ?? ''; }
+  set query(v) { if (this._input) { this._input.value = v; this._index = 0; this._renderList(); } }
+}
+
+customElements.define('nk-cmdk', NkCmdk);
+export { NkCmdk };

package/src/components/overlays/nk-emoji-picker.js

@@ -0,0 +1,94 @@
+import { NkElement } from '../../base.js';
+import { EMOJI, EMOJI_CATEGORIES } from '../../util/emoji.js';
+
+// <nk-emoji-picker></nk-emoji-picker>
+// → <div class="nk-pop"><input class="nk-emoji-search"><div class="nk-emoji-grid">…</div><div class="nk-emoji-cats">…</div></div>
+// Built-in set with names for search; `picker.emojis = [{ char, name, cat }]`
+// replaces it. A click fires nk-select { emoji }.
+class NkEmojiPicker extends NkElement {
+  static get observedAttributes() { return ['placeholder', 'value']; }
+
+  render() {
+    this._box = this.createElement('div', ['nk-pop']);
+    this._search = this.createElement('input', ['nk-emoji-search'], { type: 'search', autocomplete: 'off', 'aria-label': 'Search emoji' });
+    this._grid = this.createElement('div', ['nk-emoji-grid'], { role: 'listbox' });
+    this._cats = this.createElement('div', ['nk-emoji-cats'], { role: 'tablist' });
+    this._box.append(this._search, this._grid, this._cats);
+    this._wrapper.appendChild(this._box);
+    this._emojis = EMOJI;
+    this._cat = EMOJI_CATEGORIES[0].id;
+    this._renderCats();
+    this._renderGrid();
+    this._syncAttrs();
+  }
+
+  _syncAttrs() { this._search.placeholder = this.getAttribute('placeholder') || 'Search…'; }
+
+  _renderCats() {
+    this._cats.replaceChildren();
+    const cats = this._categories();
+    for (const cat of cats) {
+      const el = this.createElement('span', [], { role: 'tab', 'data-cat': cat.id, title: cat.id });
+      el.textContent = cat.icon;
+      el.classList.toggle('active', cat.id === this._cat);
+      this._cats.appendChild(el);
+    }
+    this._cats.style.display = cats.length > 1 ? '' : 'none';
+  }
+
+  _categories() {
+    if (this._catList) return this._catList;
+    const seen = new Map();
+    for (const e of this._emojis) if (e.cat && !seen.has(e.cat)) seen.set(e.cat, { id: e.cat, icon: e.icon || EMOJI_CATEGORIES.find(c => c.id === e.cat)?.icon || e.char });
+    return [...seen.values()];
+  }
+
+  _renderGrid() {
+    const q = this._search.value.trim().toLowerCase();
+    const list = q ? this._emojis.filter(e => (e.name || '').toLowerCase().includes(q) || e.char === q) : this._emojis.filter(e => !e.cat || e.cat === this._cat);
+    this._grid.replaceChildren();
+    for (const e of list.slice(0, 64)) {
+      const s = this.createElement('span', [], { role: 'option', title: e.name || '', 'data-emoji': e.char });
+      s.textContent = e.char;
+      this._grid.appendChild(s);
+    }
+    for (const el of this._cats.children) el.classList.toggle('active', !q && el.dataset.cat === this._cat);
+  }
+
+  setupEvents() {
+    this._onInput = () => this._renderGrid();
+    this._onGrid = (e) => { const s = e.target.closest('[data-emoji]'); if (s) this.select(s.dataset.emoji); };
+    this._onCats = (e) => { const c = e.target.closest('[data-cat]'); if (!c) return; this._cat = c.dataset.cat; this._search.value = ''; this._renderGrid(); };
+    this._onKey = (e) => { if (e.key === 'Enter') { const first = this._grid.querySelector('[data-emoji]'); if (first) this.select(first.dataset.emoji); } };
+    this._search.addEventListener('input', this._onInput);
+    this._search.addEventListener('keydown', this._onKey);
+    this._grid.addEventListener('click', this._onGrid);
+    this._cats.addEventListener('click', this._onCats);
+  }
+
+  teardownEvents() {
+    this._search?.removeEventListener('input', this._onInput);
+    this._search?.removeEventListener('keydown', this._onKey);
+    this._grid?.removeEventListener('click', this._onGrid);
+    this._cats?.removeEventListener('click', this._onCats);
+  }
+
+  select(emoji) {
+    this.setAttribute('value', emoji);
+    this.emit('nk-select', { emoji, value: emoji });
+  }
+
+  onAttributeChanged() { this._syncAttrs(); }
+  focus(o) { this._search?.focus(o); }
+
+  /** Category strip override: [{ id, icon }]. Emojis without `cat` show in every category. */
+  get categories() { return this._categories(); }
+  set categories(list) { this._catList = Array.isArray(list) && list.length ? list : null; this._cat = this._categories()[0]?.id; this._renderCats(); this._renderGrid(); }
+  get emojis() { return this._emojis; }
+  set emojis(list) { this._emojis = Array.isArray(list) ? list : EMOJI; this._cat = this._categories()[0]?.id; this._renderCats(); this._renderGrid(); }
+  get value() { return this.getAttribute('value'); }
+  set value(v) { this.setAttribute('value', v); }
+}
+
+customElements.define('nk-emoji-picker', NkEmojiPicker);
+export { NkEmojiPicker };

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

@@ -0,0 +1,67 @@
+import { NkElement } from '../../base.js';
+
+// <nk-menu-item icon="✏️" shortcut="⌘E" value="rename">Rename</nk-menu-item>
+// <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>
+// → <div class="nk-menu-item danger"><span class="m-icon">🗑️</span>Delete<span class="m-shortcut">…</span></div>
+class NkMenuItem extends NkElement {
+  static get observedAttributes() { return ['icon', 'shortcut', 'danger', 'value', 'type', 'disabled']; }
+
+  render() { this._build(); }
+
+  _build() {
+    const type = this.getAttribute('type');
+    let el;
+    if (type === 'separator') {
+      el = this.createElement('div', ['nk-menu-sep'], { role: 'separator' });
+    } else if (type === 'label') {
+      el = this.createElement('div', ['nk-menu-label']);
+      el.appendChild(document.createElement('slot'));
+    } else {
+      el = this.createElement('div', ['nk-menu-item'], { role: 'menuitem', tabindex: '-1' });
+      this._icon = this.createElement('span', ['m-icon']);
+      const iconSlot = this.createElement('slot', [], { name: 'icon' });
+      iconSlot.appendChild(this._icon);
+      this._shortcut = this.createElement('span', ['m-shortcut']);
+      el.append(iconSlot, document.createElement('slot'), this._shortcut);
+    }
+    if (this._el) { this._el.removeEventListener('click', this._onClick); this._el.replaceWith(el); } else this._wrapper.appendChild(el);
+    this._el = el;
+    if (this._onClick) el.addEventListener('click', this._onClick);
+    this._sync();
+  }
+
+  _sync() {
+    if (!this._el.classList.contains('nk-menu-item')) return;
+    const icon = this.getAttribute('icon');
+    this._icon.textContent = icon || '';
+    this._icon.style.display = icon ? '' : 'none';
+    const sc = this.getAttribute('shortcut');
+    this._shortcut.textContent = sc || '';
+    this._shortcut.style.display = sc ? '' : 'none';
+    this._el.classList.toggle('danger', this.getBoolAttr('danger'));
+    this._el.setAttribute('aria-disabled', this.getBoolAttr('disabled') ? 'true' : 'false');
+  }
+
+  setupEvents() {
+    this._onClick = () => this.select();
+    this._el.addEventListener('click', this._onClick);
+  }
+
+  teardownEvents() { this._el?.removeEventListener('click', this._onClick); }
+
+  select() {
+    if (!this._el.classList.contains('nk-menu-item') || this.getBoolAttr('disabled')) return;
+    this.emit('nk-select', { value: this.value, label: this.textContent.trim(), item: this });
+  }
+
+  onAttributeChanged(name) { name === 'type' ? this._build() : this._sync(); }
+  focus(o) { this._el?.focus(o); }
+  get selectable() { return this._el?.classList.contains('nk-menu-item') && !this.getBoolAttr('disabled'); }
+
+  get value() { return this.getAttribute('value') ?? this.textContent.trim(); }
+  set value(v) { this.setAttribute('value', v); }
+}
+
+customElements.define('nk-menu-item', NkMenuItem);
+export { NkMenuItem };

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

@@ -0,0 +1,44 @@
+import { NkElement } from '../../base.js';
+
+// <nk-menu>
+//   <nk-menu-item type="label">Page</nk-menu-item>
+//   <nk-menu-item icon="✏️" shortcut="⌘E" value="rename">Rename</nk-menu-item>
+//   <nk-menu-item type="separator"></nk-menu-item>
+//   <nk-menu-item icon="🗑️" danger value="delete">Delete</nk-menu-item>
+// </nk-menu>
+// → <div class="nk-pop nk-menu" role="menu">…</div>
+// ↑↓ move between items, Enter selects, nk-select bubbles from the item.
+class NkMenu extends NkElement {
+  render() {
+    this._box = this.createElement('div', ['nk-pop', 'nk-menu'], { role: 'menu' });
+    this._box.appendChild(document.createElement('slot'));
+    this._wrapper.appendChild(this._box);
+  }
+
+  get items() { return [...this.querySelectorAll(':scope > nk-menu-item')].filter(i => i.selectable); }
+
+  setupEvents() {
+    this._onKey = (e) => {
+      const dir = { ArrowDown: 1, ArrowUp: -1 }[e.key];
+      const current = e.target.closest?.('nk-menu-item');
+      const items = this.items;
+      if (!items.length) return;
+      if (dir) {
+        e.preventDefault();
+        const i = items.indexOf(current);
+        items[(i + dir + items.length) % items.length].focus();
+      } else if ((e.key === 'Enter' || e.key === ' ') && current) {
+        e.preventDefault(); current.select();
+      }
+    };
+    this.addEventListener('keydown', this._onKey);
+  }
+
+  teardownEvents() { this.removeEventListener('keydown', this._onKey); }
+
+  /** Focuses the first item (called by a popover when it opens). */
+  focusFirst() { this.items[0]?.focus(); }
+}
+
+customElements.define('nk-menu', NkMenu);
+export { NkMenu };