@jungherz-de/notionkit-elements 1.0.0

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

@@ -0,0 +1,106 @@
+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">
+//
+// 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']; }
+
+  render() {
+    this._build();
+  }
+
+  _build() {
+    const href = this.getAttribute('href');
+    const el = href ? this.createElement('a', [], { href }) : this.createElement('button', [], { type: this.getAttribute('type') || 'button' });
+    el.className = this._computeClasses().join(' ');
+    el.appendChild(document.createElement('slot'));
+    this._applyState(el);
+    if (this._btn) {
+      this._btn.removeEventListener('click', this._onClick);
+      this._btn.replaceWith(el);
+    } else {
+      this._wrapper.appendChild(el);
+    }
+    this._btn = el;
+    if (this._onClick) el.addEventListener('click', this._onClick);
+  }
+
+  _applyState(el) {
+    const disabled = this.getBoolAttr('disabled');
+    if (el.tagName === 'BUTTON') el.disabled = disabled;
+    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');
+  }
+
+  setupEvents() {
+    this._onClick = (e) => {
+      if (this.getBoolAttr('disabled')) { e.preventDefault(); e.stopPropagation(); 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');
+      if (type === 'submit' || type === 'reset') {
+        const form = this.closest('form');
+        if (form) type === 'submit' ? form.requestSubmit() : form.reset();
+      }
+    };
+    this._btn.addEventListener('click', this._onClick);
+  }
+
+  teardownEvents() {
+    this._btn?.removeEventListener('click', this._onClick);
+  }
+
+  onAttributeChanged(name) {
+    if (!this._btn) return;
+    switch (name) {
+      case 'href':
+        this._build();
+        break;
+      case 'variant':
+      case 'small':
+        this._btn.className = this._computeClasses().join(' ');
+        break;
+      case 'type':
+        if (this._btn.tagName === 'BUTTON') this._btn.setAttribute('type', this.getAttribute('type') || 'button');
+        break;
+      default:
+        this._applyState(this._btn);
+    }
+  }
+
+  _computeClasses() {
+    const variant = this.getAttribute('variant');
+    if (variant === 'topbar') return ['nk-topbar-btn'];
+    if (variant === 'share') return ['nk-topbar-btn', 'nk-share-btn'];
+    const classes = ['nk-btn'];
+    if (VARIANTS.includes(variant)) classes.push(variant);
+    if (this.getBoolAttr('small')) classes.push('small');
+    return classes;
+  }
+
+  focus(options) { this._btn?.focus(options); }
+  click() { this._btn?.click(); }
+
+  get variant() { return this.getAttribute('variant'); }
+  set variant(v) { v ? this.setAttribute('variant', v) : this.removeAttribute('variant'); }
+  get small() { return this.getBoolAttr('small'); }
+  set small(v) { this.setBoolAttr('small', v); }
+  get disabled() { return this.getBoolAttr('disabled'); }
+  set disabled(v) { this.setBoolAttr('disabled', v); }
+  get type() { return this.getAttribute('type') || 'button'; }
+  set type(v) { this.setAttribute('type', v); }
+  get href() { return this.getAttribute('href'); }
+  set href(v) { v ? this.setAttribute('href', v) : this.removeAttribute('href'); }
+}
+
+customElements.define('nk-btn', NkBtn);
+export { NkBtn };

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

@@ -0,0 +1,76 @@
+import { NkFormElement } from '../../base.js';
+
+// <nk-check name="mail" value="weekly" checked>Weekly digest</nk-check>
+// → <label class="nk-check"><input type="checkbox"> Weekly digest</label>
+class NkCheck extends NkFormElement {
+  static get observedAttributes() { return ['checked', 'disabled', 'name', 'value', 'indeterminate', 'required']; }
+
+  render() {
+    const label = this.createElement('label', ['nk-check']);
+    this._input = this.createElement('input', [], { type: 'checkbox' });
+    this._apply();
+    this._defaultChecked = this.getBoolAttr('checked');
+    label.appendChild(this._input);
+    label.appendChild(document.createElement('slot'));
+    this._wrapper.appendChild(label);
+    this._syncFormValue();
+  }
+
+  _apply() {
+    this._input.checked = this.getBoolAttr('checked');
+    this._input.indeterminate = this.getBoolAttr('indeterminate');
+    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') || 'on';
+  }
+
+  setupEvents() {
+    this._onChange = () => {
+      this._syncing = true;
+      this.setBoolAttr('checked', this._input.checked);
+      this.removeAttribute('indeterminate');
+      this._syncing = false;
+      this._syncFormValue();
+      this.emit('nk-change', { checked: this._input.checked, value: this._input.value, name: this.name });
+      this.dispatchEvent(new Event('change', { bubbles: true }));
+    };
+    this._input.addEventListener('change', this._onChange);
+  }
+
+  teardownEvents() {
+    this._input?.removeEventListener('change', this._onChange);
+  }
+
+  onAttributeChanged() {
+    if (this._syncing || !this._input) return;
+    this._apply();
+    this._syncFormValue();
+  }
+
+  _syncFormValue() {
+    this.setFormValue(this._input.checked ? this._input.value : null, this._input.checked ? 'checked' : 'unchecked');
+    this.syncValidityFrom(this._input);
+  }
+
+  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._input?.focus(options); }
+
+  get checked() { return this._input?.checked ?? this.getBoolAttr('checked'); }
+  set checked(v) { this.setBoolAttr('checked', v); }
+  get indeterminate() { return this.getBoolAttr('indeterminate'); }
+  set indeterminate(v) { this.setBoolAttr('indeterminate', 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-check', NkCheck);
+export { NkCheck };

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

@@ -0,0 +1,49 @@
+import { NkElement } from '../../base.js';
+
+// <nk-field label="Display name" desc="Shown next to your comments">
+//   <nk-input value="Marcel"></nk-input>
+// </nk-field>
+// → <div class="nk-field"><div><div class="f-label">…</div><div class="f-desc">…</div></div>
+//                         <div class="f-control">…</div></div>
+// Rich label / description content goes through slot="label" / slot="desc"
+// (twins `.nk-field ::slotted([slot="label"])` etc. in notionkit.css).
+class NkField extends NkElement {
+  static get observedAttributes() { return ['label', 'desc']; }
+
+  render() {
+    const field = this.createElement('div', ['nk-field']);
+    const text = document.createElement('div');
+    this._label = this.createElement('div', ['f-label']);
+    const labelSlot = this.createElement('slot', [], { name: 'label' });
+    labelSlot.appendChild(this._label);
+    this._desc = this.createElement('div', ['f-desc']);
+    const descSlot = this.createElement('slot', [], { name: 'desc' });
+    descSlot.appendChild(this._desc);
+    text.appendChild(labelSlot);
+    text.appendChild(descSlot);
+    const control = this.createElement('div', ['f-control']);
+    control.appendChild(document.createElement('slot'));
+    field.appendChild(text);
+    field.appendChild(control);
+    this._wrapper.appendChild(field);
+    this._sync();
+  }
+
+  onAttributeChanged() { this._sync(); }
+
+  _sync() {
+    if (!this._label) return;
+    this._label.textContent = this.getAttribute('label') || '';
+    const desc = this.getAttribute('desc');
+    this._desc.textContent = desc || '';
+    this._desc.style.display = desc ? '' : 'none';
+  }
+
+  get label() { return this.getAttribute('label'); }
+  set label(v) { this.setAttribute('label', v); }
+  get desc() { return this.getAttribute('desc'); }
+  set desc(v) { v == null ? this.removeAttribute('desc') : this.setAttribute('desc', v); }
+}
+
+customElements.define('nk-field', NkField);
+export { NkField };

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

@@ -0,0 +1,107 @@
+import { NkFormElement } from '../../base.js';
+
+// <nk-input name="title" value="…" placeholder="…" wide></nk-input>  →  <input class="nk-input wide">
+// Takes part in the surrounding <form> through ElementInternals.
+const FORWARDED = ['type', 'placeholder', 'name', 'min', 'max', 'step', 'autocomplete', 'pattern', 'maxlength', 'minlength', 'inputmode', 'list', 'aria-label'];
+const BOOLEANS = ['required', 'disabled', 'readonly'];
+
+class NkInput extends NkFormElement {
+  static get observedAttributes() { return ['value', 'wide', ...FORWARDED, ...BOOLEANS]; }
+
+  render() {
+    this._input = this.createElement('input', ['nk-input']);
+    for (const attr of FORWARDED) this._forward(attr);
+    for (const attr of BOOLEANS) this._forward(attr);
+    this._input.value = this.getAttribute('value') ?? '';
+    this._defaultValue = this._input.value;
+    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._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(); }
+  select() { this._input?.select(); }
+
+  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 type() { return this.getAttribute('type') || 'text'; }
+  set type(v) { this.setAttribute('type', v); }
+  get placeholder() { return this.getAttribute('placeholder'); }
+  set placeholder(v) { this.setAttribute('placeholder', 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 readonly() { return this.getBoolAttr('readonly'); }
+  set readonly(v) { this.setBoolAttr('readonly', v); }
+  get wide() { return this.getBoolAttr('wide'); }
+  set wide(v) { this.setBoolAttr('wide', v); }
+}
+
+customElements.define('nk-input', NkInput);
+export { NkInput };

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

@@ -0,0 +1,159 @@
+import { NkFormElement } from '../../base.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/src/components/forms/nk-select.js

@@ -0,0 +1,126 @@
+import { NkFormElement } from '../../base.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 };