@jungherz-de/notionkit-elements 1.0.0

package/dist/components/nk-pop.js

@@ -0,0 +1,90 @@
+import { N as NkElement } from './shared/base-6gEcoatG.js';
+
+// <nk-pop placement="bottom-start">
+//   <nk-btn slot="trigger" variant="secondary">Options</nk-btn>
+//   <nk-menu>…</nk-menu>
+// </nk-pop>
+// The trigger stays in the light DOM; a click on it toggles `open`, outside
+// clicks and Escape close. Content is wrapped in `.nk-pop` unless it brings
+// its own surface (nk-menu, nk-emoji-picker) or `bare` is set. The only
+// styling here is positioning – the surface look is the stylesheet's.
+const popSheet = new CSSStyleSheet();
+popSheet.replaceSync(`
+  .nk-pop-anchor { position: relative; display: inline-block; }
+  .nk-pop-float { display: none; position: absolute; z-index: 50; top: 100%; left: 0; margin-top: 4px; }
+  :host([open]) .nk-pop-float { display: block; }
+  :host([placement="bottom-end"]) .nk-pop-float { left: auto; right: 0; }
+  :host([placement="top-start"]) .nk-pop-float { top: auto; bottom: 100%; margin: 0 0 4px; }
+  :host([placement="top-end"]) .nk-pop-float { top: auto; bottom: 100%; left: auto; right: 0; margin: 0 0 4px; }
+`);
+const OWN_SURFACE = new Set(['nk-menu', 'nk-emoji-picker']);
+
+class NkPop extends NkElement {
+  static get hostStyles() { return popSheet; }
+  static get observedAttributes() { return ['open', 'placement', 'bare']; }
+
+  render() {
+    const anchor = this.createElement('div', ['nk-pop-anchor']);
+    this._triggerSlot = this.createElement('slot', [], { name: 'trigger' });
+    this._float = this.createElement('div', ['nk-pop-float']);
+    this._surface = this.createElement('div', ['nk-pop']);
+    this._slot = document.createElement('slot');
+    this._surface.appendChild(this._slot);
+    this._float.appendChild(this._surface);
+    anchor.append(this._triggerSlot, this._float);
+    this._wrapper.appendChild(anchor);
+    this._syncSurface();
+  }
+
+  _syncSurface() {
+    const bare = this.getBoolAttr('bare') || this._slot.assignedElements().some(el => OWN_SURFACE.has(el.localName));
+    this._surface.className = bare ? '' : 'nk-pop';
+  }
+
+  setupEvents() {
+    this._onTrigger = (e) => {
+      if (!e.composedPath().some(n => n instanceof Element && n.getAttribute?.('slot') === 'trigger')) return;
+      e.stopPropagation();
+      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);
+  }
+
+  teardownEvents() {
+    this.removeEventListener('click', this._onTrigger);
+    document.removeEventListener('click', this._onDocClick);
+    document.removeEventListener('keydown', this._onKey);
+    this._float?.removeEventListener('nk-select', this._onSelect);
+    this._slot?.removeEventListener('slotchange', this._onSlot);
+  }
+
+  onAttributeChanged(name) {
+    if (name === 'bare') this._syncSurface();
+    if (name === 'open') {
+      const open = this.getBoolAttr('open');
+      for (const el of this._triggerSlot.assignedElements()) el.setAttribute('aria-expanded', open ? 'true' : 'false');
+      this.emit('nk-toggle', { 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 placement() { return this.getAttribute('placement') || 'bottom-start'; }
+  set placement(v) { this.setAttribute('placement', v); }
+}
+
+customElements.define('nk-pop', NkPop);
+
+export { NkPop };

package/dist/components/nk-profile-row.js

@@ -0,0 +1,25 @@
+import { N as NkElement } from './shared/base-6gEcoatG.js';
+
+// <nk-profile-row avatar="MK"><nk-btn variant="secondary" small>Change photo</nk-btn></nk-profile-row>
+// → <div class="nk-profile-row"><div class="big-avatar">MK</div>…</div>
+class NkProfileRow extends NkElement {
+  static get observedAttributes() { return ['avatar']; }
+
+  render() {
+    const row = this.createElement('div', ['nk-profile-row']);
+    this._avatar = this.createElement('div', ['big-avatar']);
+    const s = this.createElement('slot', [], { name: 'avatar' });
+    s.appendChild(this._avatar);
+    row.appendChild(s);
+    row.appendChild(document.createElement('slot'));
+    this._wrapper.appendChild(row);
+    this._sync();
+  }
+
+  _sync() { this._avatar.textContent = this.getAttribute('avatar') || ''; }
+  onAttributeChanged() { this._sync(); }
+}
+
+customElements.define('nk-profile-row', NkProfileRow);
+
+export { NkProfileRow };

package/dist/components/nk-progress.js

@@ -0,0 +1,43 @@
+import { N as NkElement } from './shared/base-6gEcoatG.js';
+
+// <nk-progress value="72" label="72%"></nk-progress>
+// The bar is `.nk-progress > i` — a child combinator, so both nodes live here.
+class NkProgress extends NkElement {
+  static get observedAttributes() { return ['value', 'max', 'label']; }
+
+  render() {
+    this._bar = this.createElement('span', ['nk-progress'], { role: 'progressbar' });
+    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._sync();
+  }
+
+  onAttributeChanged() { this._sync(); }
+
+  _sync() {
+    if (!this._bar) return;
+    const max = Number(this.getAttribute('max')) || 100;
+    const value = Math.min(max, Math.max(0, Number(this.getAttribute('value')) || 0));
+    this._fill.style.width = `${(value / max) * 100}%`;
+    this._bar.setAttribute('aria-valuenow', value);
+    this._bar.setAttribute('aria-valuemin', 0);
+    this._bar.setAttribute('aria-valuemax', max);
+    const label = this.getAttribute('label');
+    this._label.textContent = label ?? '';
+    this._label.style.display = label === null ? 'none' : '';
+  }
+
+  get value() { return Number(this.getAttribute('value')) || 0; }
+  set value(v) { this.setAttribute('value', v); }
+  get max() { return Number(this.getAttribute('max')) || 100; }
+  set max(v) { this.setAttribute('max', v); }
+  get label() { return this.getAttribute('label'); }
+  set label(v) { v == null ? this.removeAttribute('label') : this.setAttribute('label', v); }
+}
+
+customElements.define('nk-progress', NkProgress);
+
+export { NkProgress };

package/dist/components/nk-quote.js

@@ -0,0 +1,32 @@
+import { N as NkElement } from './shared/base-6gEcoatG.js';
+
+// <nk-quote cite="Ada Lovelace">The Analytical Engine weaves…</nk-quote>
+// .q-cite has no ::slotted() twin, so the citation is rendered here.
+class NkQuote extends NkElement {
+  static get observedAttributes() { return ['cite']; }
+
+  render() {
+    this._quote = this.createElement('blockquote', ['nk-quote']);
+    this._quote.appendChild(document.createElement('slot'));
+    this._cite = this.createElement('cite', ['q-cite']);
+    this._quote.appendChild(this._cite);
+    this._wrapper.appendChild(this._quote);
+    this._sync();
+  }
+
+  onAttributeChanged() { this._sync(); }
+
+  _sync() {
+    if (!this._cite) return;
+    const cite = this.getAttribute('cite');
+    this._cite.textContent = cite || '';
+    this._cite.style.display = cite ? '' : 'none';
+  }
+
+  get cite() { return this.getAttribute('cite'); }
+  set cite(v) { v == null ? this.removeAttribute('cite') : this.setAttribute('cite', v); }
+}
+
+customElements.define('nk-quote', NkQuote);
+
+export { NkQuote };

package/dist/components/nk-radio.js

@@ -0,0 +1,160 @@
+import { a as NkFormElement } from './shared/base-6gEcoatG.js';
+
+// <nk-radio name="style" value="concise" checked>Concise</nk-radio>
+// → <label class="nk-check"><input type="radio"> Concise</label>
+//
+// ── Grouping ──
+// Every <nk-radio> keeps its <input type="radio"> in its own shadow root, and
+// native radio grouping works per tree — it does not reach across shadow
+// boundaries. Two <nk-radio name="x"> would therefore both stay checked. So
+// the group is kept here, following the native definition: same `name`,
+// same containing tree, same form owner. One tab stop per group, arrow keys
+// move within it (wrapping, skipping disabled), and select as they go.
+
+const ARROW_KEYS = { ArrowDown: 1, ArrowRight: 1, ArrowUp: -1, ArrowLeft: -1 };
+
+/** Form owner, also for a peer that has not been upgraded yet. */
+function ownerForm(el) {
+  return (el.form !== undefined ? el.form : el.closest('form')) ?? null;
+}
+
+/** Only the selected radio is a tab stop; arrow keys move within the group. */
+function syncGroupTabIndex(group) {
+  const enabled = group.filter(el => !el.disabled);
+  if (!enabled.length) return;
+  const focusable = enabled.find(el => el.checked) || enabled[0];
+  for (const el of group) {
+    if (el._input) el._input.tabIndex = el === focusable ? 0 : -1;
+  }
+}
+
+class NkRadio extends NkFormElement {
+  static get observedAttributes() { return ['checked', 'disabled', 'name', 'value', 'required']; }
+
+  render() {
+    const label = this.createElement('label', ['nk-check']);
+    this._input = this.createElement('input', [], { type: 'radio' });
+    // `name` on the inner input is inert (it is alone in its tree); it stays
+    // as a devtools courtesy. The group above is the real one.
+    this._apply();
+    this._defaultChecked = this.getBoolAttr('checked');
+    label.appendChild(this._input);
+    label.appendChild(document.createElement('slot'));
+    this._wrapper.appendChild(label);
+    this._syncFormValue();
+    // Elements upgrade in document order, so the last `checked` one in the
+    // markup wins the group — the same outcome native radios produce.
+    if (this._input.checked) this._uncheckPeers();
+    syncGroupTabIndex(this._group());
+  }
+
+  _apply() {
+    this._input.checked = this.getBoolAttr('checked');
+    this._input.disabled = this.getBoolAttr('disabled') || !!this._formDisabled;
+    this._input.required = this.getBoolAttr('required');
+    const name = this.getAttribute('name');
+    name ? this._input.setAttribute('name', name) : this._input.removeAttribute('name');
+    this._input.value = this.getAttribute('value') || '';
+  }
+
+  setupEvents() {
+    this._onChange = () => this._applyChange();
+    this._onKeyDown = (e) => {
+      const dir = ARROW_KEYS[e.key];
+      if (!dir || e.ctrlKey || e.metaKey || e.altKey) return;
+      const group = this._group().filter(el => !el.disabled);
+      if (group.length < 2) return;
+      e.preventDefault();
+      const next = group[(group.indexOf(this) + dir + group.length) % group.length];
+      next._input.focus();
+      next._input.checked = true;
+      next._applyChange();
+    };
+    this._input.addEventListener('change', this._onChange);
+    this._input.addEventListener('keydown', this._onKeyDown);
+    syncGroupTabIndex(this._group());
+  }
+
+  teardownEvents() {
+    this._input?.removeEventListener('change', this._onChange);
+    this._input?.removeEventListener('keydown', this._onKeyDown);
+  }
+
+  /** Shared by user change and arrow-key selection, so both look identical. */
+  _applyChange() {
+    if (this._input.checked) this._uncheckPeers();
+    this._syncing = true;
+    this.setBoolAttr('checked', this._input.checked);
+    this._syncing = false;
+    this._syncFormValue();
+    syncGroupTabIndex(this._group());
+    this.emit('nk-change', { checked: this._input.checked, value: this._input.value, name: this.name });
+    this.dispatchEvent(new Event('change', { bubbles: true }));
+  }
+
+  /** Same name, same tree, same form owner — in document order, this element included. */
+  _group() {
+    const name = this.getAttribute('name');
+    const root = this.getRootNode();
+    if (!name || typeof root?.querySelectorAll !== 'function') return [this];
+    const form = ownerForm(this);
+    return [...root.querySelectorAll('nk-radio')].filter(
+      el => el.getAttribute('name') === name && ownerForm(el) === form
+    );
+  }
+
+  _uncheckPeers() {
+    for (const el of this._group()) {
+      if (el !== this && el.checked) el.checked = false;
+    }
+  }
+
+  onAttributeChanged(name) {
+    if (this._syncing || !this._input) return;
+    this._apply();
+    if (name === 'checked' && this._input.checked) this._uncheckPeers();
+    this._syncFormValue();
+    syncGroupTabIndex(this._group());
+  }
+
+  _syncFormValue() {
+    const val = this.getAttribute('value') || '';
+    this.setFormValue(this._input.checked ? val : null, this._input.checked ? 'checked' : 'unchecked');
+    this.syncValidityFrom(this._input);
+  }
+
+  resetValue() {
+    this._input.checked = this._defaultChecked;
+    this.setBoolAttr('checked', this._defaultChecked);
+    this._syncFormValue();
+    syncGroupTabIndex(this._group());
+  }
+
+  restoreValue(state) {
+    if (state === 'checked') this.checked = true;
+  }
+
+  onFormDisabled(disabled) { this._formDisabled = disabled; this._apply(); syncGroupTabIndex(this._group()); }
+
+  focus(options) { this._input?.focus(options); }
+
+  get checked() { return this._input?.checked ?? this.getBoolAttr('checked'); }
+  set checked(v) {
+    if (this._input) this._input.checked = v;
+    // Also covers the case where the attribute is already present, so
+    // setBoolAttr stays silent and onAttributeChanged never runs.
+    if (v) this._uncheckPeers();
+    this.setBoolAttr('checked', v);
+    if (this._input) { this._syncFormValue(); syncGroupTabIndex(this._group()); }
+  }
+  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') || ''; }
+  set value(v) { this.setAttribute('value', v); }
+}
+
+customElements.define('nk-radio', NkRadio);
+
+export { NkRadio };

package/dist/components/nk-section-label.js

@@ -0,0 +1,42 @@
+import { N as NkElement } from './shared/base-6gEcoatG.js';
+
+// <nk-section-label addable>Favourites</nk-section-label>
+// → <div class="nk-section-label">Favourites <span class="plus">＋</span></div>
+// The ＋ appears on hover (a hover-parent rule, so it lives in the same tree)
+// and fires nk-action { action: 'add' }.
+class NkSectionLabel extends NkElement {
+  static get observedAttributes() { return ['label', 'addable']; }
+
+  render() {
+    this._box = this.createElement('div', ['nk-section-label']);
+    this._text = document.createElement('span');
+    this._text.appendChild(document.createElement('slot'));
+    this._plus = this.createElement('span', ['plus'], { role: 'button', title: '+' });
+    this._plus.textContent = '＋';
+    this._box.append(this._text, this._plus);
+    this._wrapper.appendChild(this._box);
+    this._sync();
+  }
+
+  _sync() {
+    const label = this.getAttribute('label');
+    if (label !== null) this._text.textContent = label;
+    this._plus.style.display = this.getBoolAttr('addable') ? '' : 'none';
+  }
+
+  setupEvents() {
+    this._onPlus = (e) => { e.stopPropagation(); this.emit('nk-action', { action: 'add' }); };
+    this._plus.addEventListener('click', this._onPlus);
+  }
+
+  teardownEvents() { this._plus?.removeEventListener('click', this._onPlus); }
+
+  onAttributeChanged() { this._sync(); }
+
+  get addable() { return this.getBoolAttr('addable'); }
+  set addable(v) { this.setBoolAttr('addable', v); }
+}
+
+customElements.define('nk-section-label', NkSectionLabel);
+
+export { NkSectionLabel };

package/dist/components/nk-segmented.js

@@ -0,0 +1,99 @@
+import { a as NkFormElement } from './shared/base-6gEcoatG.js';
+
+// <nk-segmented name="range" value="week">
+//   <button value="week">Week</button><button value="month">Month</button>
+// </nk-segmented>
+// → <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.
+const KEYS = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 };
+
+class NkSegmented extends NkFormElement {
+  static get observedAttributes() { return ['value', 'name', 'disabled']; }
+
+  render() {
+    this._box = this.createElement('div', ['nk-segmented'], { role: 'radiogroup' });
+    this._slot = document.createElement('slot');
+    this._box.appendChild(this._slot);
+    this._wrapper.appendChild(this._box);
+    this._sync();
+  }
+
+  get buttons() { return this._slot?.assignedElements().filter(el => el.localName === 'button') ?? []; }
+  _valueOf(btn) { return btn.getAttribute('value') ?? btn.textContent.trim(); }
+
+  _sync() {
+    const buttons = this.buttons;
+    if (!buttons.length) return;
+    let value = this.getAttribute('value');
+    if (value === null || !buttons.some(b => this._valueOf(b) === value)) {
+      value = this._valueOf(buttons.find(b => b.classList.contains('active')) || buttons[0]);
+    }
+    if (this._defaultValue === undefined) this._defaultValue = value;
+    const disabled = this.getBoolAttr('disabled') || !!this._formDisabled;
+    for (const b of buttons) {
+      const on = this._valueOf(b) === value;
+      b.type = 'button';
+      b.setAttribute('role', 'radio');
+      b.setAttribute('aria-checked', on ? 'true' : 'false');
+      b.classList.toggle('active', on);
+      b.tabIndex = on ? 0 : -1;
+      b.disabled = disabled;
+    }
+    this._value = value;
+    this.setFormValue(value);
+  }
+
+  setupEvents() {
+    this._onSlot = () => this._sync();
+    this._onClick = (e) => {
+      const btn = e.target.closest?.('button');
+      if (!btn || !this.buttons.includes(btn) || btn.disabled) return;
+      this._choose(this._valueOf(btn));
+    };
+    this._onKey = (e) => {
+      const dir = KEYS[e.key];
+      if (!dir) return;
+      const buttons = this.buttons;
+      const i = buttons.indexOf(e.target.closest?.('button'));
+      if (i < 0 || buttons.length < 2) return;
+      e.preventDefault();
+      const next = buttons[(i + dir + buttons.length) % buttons.length];
+      this._choose(this._valueOf(next));
+      next.focus();
+    };
+    this._slot.addEventListener('slotchange', this._onSlot);
+    this.addEventListener('click', this._onClick);
+    this.addEventListener('keydown', this._onKey);
+    this._sync();
+  }
+
+  teardownEvents() {
+    this._slot?.removeEventListener('slotchange', this._onSlot);
+    this.removeEventListener('click', this._onClick);
+    this.removeEventListener('keydown', this._onKey);
+  }
+
+  _choose(value) {
+    if (value === this._value) return;
+    this._syncing = true;
+    this.setAttribute('value', value);
+    this._syncing = false;
+    this._sync();
+    this.emit('nk-change', { value, name: this.name });
+    this.dispatchEvent(new Event('change', { bubbles: true }));
+  }
+
+  onAttributeChanged() { if (!this._syncing) this._sync(); }
+  resetValue() { if (this._defaultValue !== undefined) this.setAttribute('value', this._defaultValue); }
+  onFormDisabled(d) { this._formDisabled = d; this._sync(); }
+
+  get value() { return this._value ?? this.getAttribute('value'); }
+  set value(v) { this.setAttribute('value', v); }
+  get name() { return this.getAttribute('name'); }
+  set name(v) { this.setAttribute('name', v); }
+}
+
+customElements.define('nk-segmented', NkSegmented);
+
+export { NkSegmented };

package/dist/components/nk-select.js

@@ -0,0 +1,127 @@
+import { a as NkFormElement } from './shared/base-6gEcoatG.js';
+
+// <nk-select name="role" value="editor">
+//   <option value="viewer">Viewer</option>
+//   <option value="editor">Editor</option>
+// </nk-select>
+//
+// The light-DOM <option>s are copied into the shadow <select>. A
+// MutationObserver keeps the copy in step when a framework swaps them; the
+// empty string is a valid value; the live selection survives a rebuild.
+class NkSelect extends NkFormElement {
+  static get observedAttributes() { return ['value', 'name', 'disabled', 'required', 'compact', 'aria-label']; }
+  static get observesLightDom() { return true; }
+
+  render() {
+    this._select = this.createElement('select', ['nk-select']);
+    this._forwardAll();
+    this._wrapper.appendChild(this._select);
+    this._defaultValue = this.getAttribute('value');
+    // Children may not be parsed yet when connectedCallback runs.
+    this.projectLightDom();
+    requestAnimationFrame(() => this.projectLightDom());
+  }
+
+  _forwardAll() {
+    const name = this.getAttribute('name');
+    name ? this._select.setAttribute('name', name) : this._select.removeAttribute('name');
+    const label = this.getAttribute('aria-label');
+    label ? this._select.setAttribute('aria-label', label) : this._select.removeAttribute('aria-label');
+    this._select.disabled = this.getBoolAttr('disabled');
+    this._select.required = this.getBoolAttr('required');
+    this._select.classList.toggle('compact', this.getBoolAttr('compact'));
+  }
+
+  projectLightDom() {
+    if (!this._select) return;
+    // The options are pure data — the clones carry no listeners — so skipping
+    // an unchanged rebuild is safe, and it keeps an open dropdown from
+    // snapping shut on light-DOM churn elsewhere.
+    const nodes = [...this.children].filter(n => n.matches('option, optgroup'));
+    const signature = nodes.map(n => n.outerHTML).join('');
+    if (signature === this._optionSignature) return;
+    this._optionSignature = signature;
+
+    // innerHTML = '' drops the selection; remember it first. selectedIndex -1
+    // means "nothing selected", which is not an option whose value is "".
+    const previous = this._select.selectedIndex >= 0 ? this._select.value : null;
+
+    this._select.innerHTML = '';
+    for (const node of nodes) this._select.appendChild(node.cloneNode(true));
+
+    // Keep the live selection when it survived; otherwise the value attribute;
+    // otherwise the browser default (first option / `selected`).
+    if (!this._applyValue(previous)) this._applyValue(this.getAttribute('value'));
+    this._syncFormValue();
+  }
+
+  /** Selects `value` if an option carries it, and reports whether it did. */
+  _applyValue(value) {
+    if (value === null) return false;
+    if (![...this._select.options].some(o => o.value === value)) return false;
+    this._select.value = value;
+    return true;
+  }
+
+  setupEvents() {
+    this._onChange = () => {
+      this._syncFormValue();
+      this.emit('nk-change', { value: this._select.value, name: this.name });
+      this.dispatchEvent(new Event('change', { bubbles: true }));
+    };
+    this._select.addEventListener('change', this._onChange);
+  }
+
+  teardownEvents() {
+    this._select?.removeEventListener('change', this._onChange);
+  }
+
+  onAttributeChanged(name) {
+    if (!this._select) return;
+    if (name === 'value') {
+      this._applyValue(this.getAttribute('value'));
+      this._syncFormValue();
+      return;
+    }
+    this._forwardAll();
+    this._syncFormValue();
+  }
+
+  _syncFormValue() {
+    this.setFormValue(this._select.value);
+    this.syncValidityFrom(this._select);
+  }
+
+  resetValue() {
+    if (!this._applyValue(this._defaultValue)) this._select.selectedIndex = 0;
+    this._syncFormValue();
+  }
+
+  restoreValue(state) {
+    if (typeof state === 'string') { this._applyValue(state); this._syncFormValue(); }
+  }
+
+  onFormDisabled(disabled) { this._select.disabled = disabled || this.getBoolAttr('disabled'); }
+
+  focus(options) { this._select?.focus(options); }
+
+  get value() { return this._select?.value ?? ''; }
+  set value(v) {
+    if (this._select) { this._select.value = v; this._syncFormValue(); }
+    else this.setAttribute('value', v);
+  }
+  get selectedIndex() { return this._select?.selectedIndex ?? -1; }
+  get options() { return this._select?.options ?? []; }
+  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 compact() { return this.getBoolAttr('compact'); }
+  set compact(v) { this.setBoolAttr('compact', v); }
+}
+
+customElements.define('nk-select', NkSelect);
+
+export { NkSelect };

package/dist/components/nk-settings-pane.js

@@ -0,0 +1,40 @@
+import { N as NkElement } from './shared/base-6gEcoatG.js';
+
+// <nk-settings-pane name="profile" label="My profile" icon="👤" group="Account" title="My profile" active>…</nk-settings-pane>
+// → <section class="nk-settings-pane active"><h2>My profile</h2>…</section>
+// `label`, `icon` and `group` feed the nav that <nk-modal> renders; `title`
+// renders the pane heading (child-combinator rule, so it lives here). Slotted
+// <h2>/<h3> are styled by their twins.
+class NkSettingsPane extends NkElement {
+  static get observedAttributes() { return ['name', 'label', 'icon', 'group', 'title', 'active']; }
+
+  render() {
+    this._section = this.createElement('section', ['nk-settings-pane'], { role: 'tabpanel' });
+    this._h2 = document.createElement('h2');
+    this._section.appendChild(this._h2);
+    this._section.appendChild(document.createElement('slot'));
+    this._wrapper.appendChild(this._section);
+    this._sync();
+  }
+
+  _sync() {
+    const title = this.getAttribute('title');
+    this._h2.textContent = title || '';
+    this._h2.style.display = title ? '' : 'none';
+    this._section.classList.toggle('active', this.getBoolAttr('active'));
+    this._section.setAttribute('aria-label', this.getAttribute('label') || title || this.getAttribute('name') || '');
+  }
+
+  onAttributeChanged(name) {
+    this._sync();
+    if (['label', 'icon', 'group', 'name'].includes(name)) this.closest('nk-modal')?.requestNav?.();
+  }
+
+  get name() { return this.getAttribute('name') ?? this.getAttribute('label') ?? ''; }
+  get active() { return this.getBoolAttr('active'); }
+  set active(v) { this.setBoolAttr('active', v); }
+}
+
+customElements.define('nk-settings-pane', NkSettingsPane);
+
+export { NkSettingsPane };