@jungherz-de/notionkit-elements 1.0.0

package/dist/components/nk-template-btn.js

@@ -0,0 +1,43 @@
+import { N as NkElement } from './shared/base-6gEcoatG.js';
+
+// <nk-template-btn icon="📅" value="week-plan">Insert week plan</nk-template-btn>
+// → <button class="nk-template-btn">📅 Insert week plan</button>
+class NkTemplateBtn extends NkElement {
+  static get observedAttributes() { return ['icon', 'value', 'disabled']; }
+
+  render() {
+    this._btn = this.createElement('button', ['nk-template-btn'], { type: 'button' });
+    // One flex item: "📅 Insert week plan" is a single text run in the class
+    // markup, so icon, space and label must not become separate flex items.
+    const run = document.createElement('span');
+    this._icon = document.createElement('span');
+    this._space = document.createTextNode(' ');
+    run.append(this._icon, this._space, document.createElement('slot'));
+    this._btn.appendChild(run);
+    this._wrapper.appendChild(this._btn);
+    this._sync();
+  }
+
+  _sync() {
+    const icon = this.getAttribute('icon');
+    this._icon.textContent = icon || '';
+    this._space.data = icon ? ' ' : '';
+    this._btn.disabled = this.getBoolAttr('disabled');
+  }
+
+  setupEvents() {
+    this._onClick = () => this.emit('nk-select', { value: this.value, label: this.textContent.trim() });
+    this._btn.addEventListener('click', this._onClick);
+  }
+
+  teardownEvents() { this._btn?.removeEventListener('click', this._onClick); }
+  onAttributeChanged() { this._sync(); }
+  focus(o) { this._btn?.focus(o); }
+
+  get value() { return this.getAttribute('value') ?? this.textContent.trim(); }
+  set value(v) { this.setAttribute('value', v); }
+}
+
+customElements.define('nk-template-btn', NkTemplateBtn);
+
+export { NkTemplateBtn };

package/dist/components/nk-textarea.js

@@ -0,0 +1,95 @@
+import { a as NkFormElement } from './shared/base-6gEcoatG.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/dist/components/nk-theme-toggle.js

@@ -0,0 +1,67 @@
+import { N as NkElement, g as getCurrentTheme } from './shared/base-6gEcoatG.js';
+
+// <nk-theme-toggle slot="actions"></nk-theme-toggle>
+// → <button class="nk-topbar-btn nk-theme-toggle">🌙</button>
+// Flips data-theme on <html> (the only theme source), remembers the choice in
+// localStorage (`storage-key`, default nk-theme), applies a stored or
+// system preference on first connect when <html> carries no theme yet, and
+// accepts postMessage({ nkTheme }) from a parent page (the landing page's
+// embedded demo uses that).
+class NkThemeToggle extends NkElement {
+  static get observedAttributes() { return ['storage-key', 'title'];
+
+  }
+
+  render() {
+    this._btn = this.createElement('button', ['nk-topbar-btn', 'nk-theme-toggle'], { type: 'button' });
+    this._btn.title = this.getAttribute('title') || 'Toggle light / dark';
+    this._wrapper.appendChild(this._btn);
+    const root = document.documentElement;
+    let stored = null;
+    try { stored = localStorage.getItem(this.storageKey); } catch {}
+    if (stored === 'light' || stored === 'dark') root.setAttribute('data-theme', stored);
+    else if (!root.hasAttribute('data-theme')) root.setAttribute('data-theme', matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
+    this._syncGlyph();
+  }
+
+  _syncGlyph() {
+    if (this._btn) this._btn.textContent = getCurrentTheme() === 'dark' ? '☀️' : '🌙';
+  }
+
+  _syncTheme(theme) {
+    super._syncTheme(theme);
+    this._syncGlyph();
+  }
+
+  setupEvents() {
+    this._onClick = () => this.apply(getCurrentTheme() === 'dark' ? 'light' : 'dark');
+    this._onMessage = (e) => { const t = e.data?.nkTheme; if (t === 'light' || t === 'dark') this.apply(t); };
+    this._btn.addEventListener('click', this._onClick);
+    window.addEventListener('message', this._onMessage);
+  }
+
+  teardownEvents() {
+    this._btn?.removeEventListener('click', this._onClick);
+    window.removeEventListener('message', this._onMessage);
+  }
+
+  onAttributeChanged(name) {
+    if (name === 'title' && this._btn) this._btn.title = this.getAttribute('title') || 'Toggle light / dark';
+  }
+
+  /** Sets the theme on <html>, persists it and reports it. */
+  apply(theme) {
+    document.documentElement.setAttribute('data-theme', theme);
+    try { localStorage.setItem(this.storageKey, theme); } catch {}
+    this._syncGlyph();
+    this.emit('nk-change', { value: theme });
+  }
+
+  get storageKey() { return this.getAttribute('storage-key') || 'nk-theme'; }
+  get value() { return getCurrentTheme(); }
+  set value(v) { this.apply(v); }
+}
+
+customElements.define('nk-theme-toggle', NkThemeToggle);
+
+export { NkThemeToggle };

package/dist/components/nk-toast.js

@@ -0,0 +1,51 @@
+import { N as NkElement } from './shared/base-6gEcoatG.js';
+
+// <nk-toast id="toast"></nk-toast>   …   toast.show('Saved');
+// → <div class="nk-toast show">✓ Saved</div>
+// One node, bottom-centred, auto-hides after `duration` ms (default 2200).
+class NkToast extends NkElement {
+  static get observedAttributes() { return ['open', 'duration', 'icon']; }
+
+  render() {
+    this._box = this.createElement('div', ['nk-toast'], { role: 'status', 'aria-live': 'polite' });
+    this._icon = document.createElement('span');
+    this._msg = document.createElement('span');
+    this._box.append(this._icon, this._msg, document.createElement('slot'));
+    this._wrapper.appendChild(this._box);
+    this._sync();
+  }
+
+  _sync() {
+    this._box.classList.toggle('show', this.getBoolAttr('open'));
+    const icon = this.getAttribute('icon') ?? '✓';
+    this._icon.textContent = icon;
+    this._icon.style.display = icon ? '' : 'none';
+  }
+
+  /** Shows `message` (or the slotted content when omitted) and hides it again after `duration`. */
+  show(message, { duration } = {}) {
+    if (message !== undefined) this._msg.textContent = message;
+    clearTimeout(this._timer);
+    this.setBoolAttr('open', true);
+    const ms = duration ?? Number(this.getAttribute('duration')) ?? 2200;
+    if (ms > 0) this._timer = setTimeout(() => this.close(), ms || 2200);
+  }
+
+  close() { clearTimeout(this._timer); this.setBoolAttr('open', false); }
+
+  onAttributeChanged(name) {
+    this._sync();
+    if (name === 'open') this.emit('nk-toggle', { open: this.getBoolAttr('open') });
+  }
+
+  disconnectedCallback() { super.disconnectedCallback(); clearTimeout(this._timer); }
+
+  get open() { return this.getBoolAttr('open'); }
+  set open(v) { this.setBoolAttr('open', v); }
+  get message() { return this._msg?.textContent ?? ''; }
+  set message(v) { if (this._msg) this._msg.textContent = v; }
+}
+
+customElements.define('nk-toast', NkToast);
+
+export { NkToast };

package/dist/components/nk-todo.js

@@ -0,0 +1,73 @@
+import { a as NkFormElement } from './shared/base-6gEcoatG.js';
+
+// <nk-todo name="task" value="1" checked>Write the docs</nk-todo>
+// → <label class="nk-todo"><input type="checkbox"><span>Write the docs</span></label>
+// `.nk-todo input:checked + span` strikes the text through — both siblings
+// are rendered here so the combinator works; the text is slotted into <span>.
+class NkTodo extends NkFormElement {
+  static get observedAttributes() { return ['checked', 'disabled', 'name', 'value']; }
+
+  render() {
+    const label = this.createElement('label', ['nk-todo']);
+    this._input = this.createElement('input', [], { type: 'checkbox' });
+    this._apply();
+    this._defaultChecked = this.getBoolAttr('checked');
+    const text = document.createElement('span');
+    text.appendChild(document.createElement('slot'));
+    label.appendChild(this._input);
+    label.appendChild(text);
+    this._wrapper.appendChild(label);
+    this._syncFormValue();
+  }
+
+  _apply() {
+    this._input.checked = this.getBoolAttr('checked');
+    this._input.disabled = this.getBoolAttr('disabled') || !!this._formDisabled;
+    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._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');
+  }
+
+  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(); }
+
+  get checked() { return this._input?.checked ?? 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-todo', NkTodo);
+
+export { NkTodo };

package/dist/components/nk-toggle.js

@@ -0,0 +1,56 @@
+import { N as NkElement } from './shared/base-6gEcoatG.js';
+
+// <nk-toggle label="Details" open>Body…</nk-toggle>
+// → <details class="nk-toggle" open><summary>Details</summary><div class="toggle-body">…</div></details>
+// The summary marker is a pseudo-element and cannot be styled on slotted
+// content, so the summary is rendered here (label attribute or slot="label").
+class NkToggle extends NkElement {
+  static get observedAttributes() { return ['label', 'open']; }
+
+  render() {
+    this._details = this.createElement('details', ['nk-toggle']);
+    const summary = document.createElement('summary');
+    this._label = document.createElement('span');
+    const labelSlot = this.createElement('slot', [], { name: 'label' });
+    labelSlot.appendChild(this._label);
+    summary.appendChild(labelSlot);
+    const body = this.createElement('div', ['toggle-body']);
+    body.appendChild(document.createElement('slot'));
+    this._details.appendChild(summary);
+    this._details.appendChild(body);
+    this._details.open = this.getBoolAttr('open');
+    this._wrapper.appendChild(this._details);
+    this._sync();
+  }
+
+  setupEvents() {
+    this._onToggle = () => {
+      this._syncing = true;
+      this.setBoolAttr('open', this._details.open);
+      this._syncing = false;
+      this.emit('nk-toggle', { open: this._details.open });
+    };
+    this._details.addEventListener('toggle', this._onToggle);
+  }
+
+  teardownEvents() {
+    this._details?.removeEventListener('toggle', this._onToggle);
+  }
+
+  onAttributeChanged(name) {
+    if (!this._details) return;
+    if (name === 'open') { if (!this._syncing) this._details.open = this.getBoolAttr('open'); return; }
+    this._sync();
+  }
+
+  _sync() { this._label.textContent = this.getAttribute('label') || ''; }
+
+  get open() { return this.getBoolAttr('open'); }
+  set open(v) { this.setBoolAttr('open', v); }
+  get label() { return this.getAttribute('label'); }
+  set label(v) { this.setAttribute('label', v); }
+}
+
+customElements.define('nk-toggle', NkToggle);
+
+export { NkToggle };

package/dist/components/nk-topbar.js

@@ -0,0 +1,24 @@
+import { N as NkElement } from './shared/base-6gEcoatG.js';
+
+// <nk-topbar>
+//   <nk-breadcrumb>…</nk-breadcrumb>
+//   <nk-btn slot="actions" variant="share">Share</nk-btn>
+//   <nk-theme-toggle slot="actions"></nk-theme-toggle>
+// </nk-topbar>
+// → <div class="nk-topbar">…<div class="nk-topbar-actions">…</div></div>
+// display:contents host, so the bar is a direct flex child of .nk-main.
+class NkTopbar extends NkElement {
+
+  render() {
+    const bar = this.createElement('div', ['nk-topbar']);
+    bar.appendChild(document.createElement('slot'));
+    const actions = this.createElement('div', ['nk-topbar-actions']);
+    actions.appendChild(this.createElement('slot', [], { name: 'actions' }));
+    bar.appendChild(actions);
+    this._wrapper.appendChild(bar);
+  }
+}
+
+customElements.define('nk-topbar', NkTopbar);
+
+export { NkTopbar };

package/dist/components/nk-tree-item.js

@@ -0,0 +1,155 @@
+import { N as NkElement } from './shared/base-6gEcoatG.js';
+
+// <nk-tree-item icon="📊" value="overview" open>
+//   Project overview
+//   <nk-tree-item icon="🚀" value="mvp" active>NotionKit MVP</nk-tree-item>
+// </nk-tree-item>
+//
+// → <div class="nk-tree-item active"><span class="nk-toggle-arrow open">▸</span>
+//     <span class="icon">📊</span><span class="label">…</span>
+//     <span class="actions"><span>＋</span><span>⋯</span></span></div>
+//   <div class="nk-tree-children">…</div>
+//
+// Both halves – the row and the .nk-tree-children box that must be its next
+// sibling – are rendered here. Slots are assigned manually: text becomes the
+// label, nested <nk-tree-item>s become the children, `slot="icon"` /
+// `slot="end"` nodes go where they say. The hover actions are shadow-internal
+// (`.nk-tree-item:hover .actions` is a hover-parent rule) and report through
+// nk-action.
+class NkTreeItem extends NkElement {
+  static get slotAssignment() { return 'manual'; }
+  static get observedAttributes() { return ['label', 'icon', 'value', 'href', 'active', 'open', 'compact', 'no-actions']; }
+
+  render() {
+    this._row = this.createElement('div', ['nk-tree-item'], { role: 'treeitem', tabindex: '-1' });
+    this._arrow = this.createElement('span', ['nk-toggle-arrow'], { 'aria-hidden': 'true' });
+    this._arrow.textContent = '▸';
+    this._iconSlot = this.createElement('slot', [], { name: 'icon' });
+    this._icon = this.createElement('span', ['icon']);
+    this._iconSlot.appendChild(this._icon);
+    this._label = this.createElement('span', ['label']);
+    this._labelSlot = this.createElement('slot', [], { name: 'label' });
+    this._labelText = document.createTextNode('');
+    this._labelSlot.appendChild(this._labelText);
+    this._label.appendChild(this._labelSlot);
+    this._actions = this.createElement('span', ['actions']);
+    for (const [action, glyph, title] of [['add', '＋', 'Add'], ['more', '⋯', 'More']]) {
+      const b = this.createElement('span', [], { 'data-action': action, role: 'button', title });
+      b.textContent = glyph;
+      this._actions.appendChild(b);
+    }
+    this._endSlot = this.createElement('slot', [], { name: 'end' });
+    this._row.append(this._arrow, this._iconSlot, this._label, this._actions, this._endSlot);
+    this._children = this.createElement('div', ['nk-tree-children'], { role: 'group' });
+    this._childSlot = this.createElement('slot', [], { name: 'children' });
+    this._children.appendChild(this._childSlot);
+    this._wrapper.append(this._row, this._children);
+    this._sync();
+    this.closest('nk-tree')?.requestSync?.();
+  }
+
+  /** Routes light-DOM nodes: nested items → children, slot="icon"/"end" → there, the rest → label. */
+  assignSlots() {
+    if (!this._row) return;
+    const icon = [], end = [], children = [], label = [];
+    for (const node of this.childNodes) {
+      if (node.nodeType === Node.ELEMENT_NODE) {
+        const slot = node.getAttribute('slot');
+        if (slot === 'icon') icon.push(node);
+        else if (slot === 'end') end.push(node);
+        else if (node.localName === 'nk-tree-item') children.push(node);
+        else label.push(node);
+      } else if (node.nodeType === Node.TEXT_NODE && node.data.trim()) {
+        label.push(node);
+      }
+    }
+    this._iconSlot.assign(...icon);
+    this._endSlot.assign(...end);
+    this._childSlot.assign(...children);
+    this._labelSlot.assign(...(this.hasAttribute('label') ? [] : label));
+    this._hasChildren = children.length > 0;
+    this._hasEnd = end.length > 0;
+    this._sync();
+  }
+
+  _sync() {
+    const active = this.getBoolAttr('active'), open = this.getBoolAttr('open');
+    this._row.classList.toggle('active', active);
+    this._row.classList.toggle('compact', this.getBoolAttr('compact'));
+    this._row.setAttribute('aria-selected', active ? 'true' : 'false');
+    this._arrow.classList.toggle('open', open);
+    this._arrow.style.display = this._hasChildren ? '' : 'none';
+    if (this._hasChildren) this._row.setAttribute('aria-expanded', open ? 'true' : 'false');
+    else this._row.removeAttribute('aria-expanded');
+    this._children.classList.toggle('collapsed', !open || !this._hasChildren);
+    this._icon.textContent = this.getAttribute('icon') || '';
+    this._icon.style.display = this.getAttribute('icon') ? '' : 'none';
+    this._labelText.data = this.getAttribute('label') || '';
+    // .actions is display:none until hover (a hover-parent rule); `hidden`
+    // would lose to that rule, so the block is detached instead.
+    const wantActions = !this.getBoolAttr('no-actions') && !this._hasEnd;
+    if (wantActions && !this._actions.isConnected) this._row.insertBefore(this._actions, this._endSlot);
+    if (!wantActions && this._actions.isConnected) this._actions.remove();
+    const href = this.getAttribute('href');
+    href ? this._row.setAttribute('data-href', href) : this._row.removeAttribute('data-href');
+  }
+
+  setupEvents() {
+    this._onRowClick = (e) => {
+      const action = e.target.closest?.('[data-action]');
+      if (action) { e.stopPropagation(); this.emit('nk-action', { action: action.dataset.action, value: this.value, label: this.label }); return; }
+      if (e.target === this._arrow || this._arrow.contains(e.target)) { e.stopPropagation(); this.toggle(); return; }
+      this.select();
+    };
+    this._onKey = (e) => {
+      if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); this.select(); }
+    };
+    this._row.addEventListener('click', this._onRowClick);
+    this._row.addEventListener('keydown', this._onKey);
+  }
+
+  teardownEvents() {
+    this._row?.removeEventListener('click', this._onRowClick);
+    this._row?.removeEventListener('keydown', this._onKey);
+  }
+
+  onAttributeChanged(name) {
+    if (name === 'label') this.assignSlots();
+    else this._sync();
+    if (name === 'open') this.emit('nk-toggle', { open: this.getBoolAttr('open'), value: this.value });
+  }
+
+  /** Fires nk-select; a listener may preventDefault to keep the item from becoming active. */
+  select() {
+    const ok = this.emit('nk-select', { value: this.value, label: this.label, href: this.getAttribute('href'), item: this });
+    if (!ok) return;
+    const tree = this.closest('nk-tree');
+    if (tree) tree.setActive(this);
+    else this.setBoolAttr('active', true);
+    if (this.getAttribute('href')) location.assign(this.getAttribute('href'));
+  }
+
+  toggle() { this.setBoolAttr('open', !this.getBoolAttr('open')); }
+  focus(options) { this._row?.focus(options); }
+  /** Roving tabindex, managed by <nk-tree>. */
+  setTabbable(v) { if (this._row) this._row.tabIndex = v ? 0 : -1; }
+  get tabbable() { return this._row?.tabIndex === 0; }
+  get hasChildren() { return !!this._hasChildren; }
+
+  get label() { return this.getAttribute('label') ?? this._labelSlot?.assignedNodes().map(n => n.textContent).join('').trim() ?? ''; }
+  set label(v) { this.setAttribute('label', v); }
+  get value() { return this.getAttribute('value') ?? this.label; }
+  set value(v) { this.setAttribute('value', v); }
+  get icon() { return this.getAttribute('icon'); }
+  set icon(v) { v == null ? this.removeAttribute('icon') : this.setAttribute('icon', v); }
+  get active() { return this.getBoolAttr('active'); }
+  set active(v) { this.setBoolAttr('active', v); }
+  get open() { return this.getBoolAttr('open'); }
+  set open(v) { this.setBoolAttr('open', v); }
+  get compact() { return this.getBoolAttr('compact'); }
+  set compact(v) { this.setBoolAttr('compact', v); }
+}
+
+customElements.define('nk-tree-item', NkTreeItem);
+
+export { NkTreeItem };