@jungherz-de/notionkit-elements 1.0.0

package/src/base.js

@@ -0,0 +1,296 @@
+// ============================================================
+// NotionKit Elements – base classes
+//
+// Every <nk-*> element is a thin shell around the markup notionkit.css already
+// styles. The shadow root adopts the *components* half of that stylesheet and
+// nothing else; the element ships no visual CSS of its own.
+// ============================================================
+import { componentsSheet, tokensCss } from '@jungherz-de/notionkit/notionkit-styles.js';
+
+// ── Design tokens ──
+// The shadow roots deliberately adopt componentsSheet only. The full sheet
+// would bring the :root / [data-theme] token blocks along, and those match the
+// .nk-wrapper below — every --nk-* token would then be re-declared inside each
+// shadow root, where a matching rule always beats an inherited value. A page's
+// own `:root { --nk-accent: … }` would never arrive.
+//
+// So the token defaults go on the document once, and every shadow root
+// inherits them like any other custom property. They sit in a cascade layer so
+// an ordinary (unlayered) brand stylesheet — and notionkit.css itself, if the
+// page loads it — wins over them, no matter the load order.
+
+const TOKENS_INJECTED = '__nkDefaultTokensInjected';
+
+function injectDefaultTokens() {
+  if (typeof document === 'undefined') return;              // SSR / non-DOM
+  if (globalThis[TOKENS_INJECTED]) return;                   // another bundle copy did it
+  globalThis[TOKENS_INJECTED] = true;
+
+  const sheet = new CSSStyleSheet();
+  sheet.replaceSync(`@layer notionkit-defaults { ${tokensCss} }`);
+  // Append — never assign — so an app's own adopted sheets survive.
+  document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
+}
+
+injectDefaultTokens();
+
+// ── Global theme sync ──
+// data-theme on <html> is the only source of truth. One MutationObserver
+// mirrors it onto every registered instance; no element sets a theme itself.
+
+const instances = new Set();
+
+function getCurrentTheme() {
+  return document.documentElement.getAttribute('data-theme') || 'light';
+}
+
+function syncAllThemes() {
+  const theme = getCurrentTheme();
+  for (const instance of instances) instance._syncTheme(theme);
+}
+
+if (typeof window !== 'undefined' && typeof MutationObserver !== 'undefined') {
+  new MutationObserver(syncAllThemes).observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ['data-theme']
+  });
+}
+
+// ── Host stylesheets ──
+// Layout plumbing only: how the host box participates in the outer layout, and
+// that `hidden` keeps working. :host([hidden]) has a higher specificity than
+// :host, so it wins regardless of order. The wrapper is layout-transparent.
+
+const hostSheets = new Map();
+
+function hostSheetFor(display) {
+  let sheet = hostSheets.get(display);
+  if (!sheet) {
+    sheet = new CSSStyleSheet();
+    sheet.replaceSync(`
+      :host { display: ${display}; }
+      :host([hidden]) { display: none; }
+      .nk-wrapper { display: contents; }
+    `);
+    hostSheets.set(display, sheet);
+  }
+  return sheet;
+}
+
+// ── Base class ──
+
+export class NkElement extends HTMLElement {
+
+  /**
+   * How the host takes part in the outer layout. Default 'contents': the host
+   * generates no box, so the inner .nk-* element sits in the parent's layout
+   * exactly where the class markup would – a button stays inline, a sidebar
+   * is a direct flex child of the app, a tree row and its children box are
+   * siblings. That is what makes the pixel parity with the class markup hold.
+   * Consequence: style the parent or the tokens, not the host; `hidden` on
+   * the host still works. Override with 'block' / 'inline-block' only when a
+   * host box is genuinely needed.
+   */
+  static get display() { return 'contents'; }
+
+  /**
+   * Optional CSSStyleSheet with component-specific host rules, adopted after
+   * the shared sheets. Positioning and sizing of the host only — never colour,
+   * spacing or typography; those belong to notionkit.css.
+   */
+  static get hostStyles() { return null; }
+
+  /**
+   * Opt in when the component *copies* light-DOM children into its shadow tree
+   * (options, breadcrumb crumbs). A MutationObserver then calls
+   * projectLightDom() again whenever those children change, so a framework
+   * that swaps them keeps the rendered element in step. Components that merely
+   * *slot* their children use `slotchange` instead.
+   */
+  static get observesLightDom() { return false; }
+
+  /** What the light-DOM observer watches. Drop `subtree` for shallow copies. */
+  static get lightDomObserverInit() {
+    return { childList: true, subtree: true, characterData: true, attributes: true };
+  }
+
+  /**
+   * 'named' (default) or 'manual'. Manual assignment lets a component route
+   * light-DOM nodes itself – text nodes into a label slot, nested elements
+   * into a children slot – so <nk-tree-item icon="🏠">Home</nk-tree-item>
+   * reads naturally. With 'manual' the component calls assignSlots() on
+   * every childList change.
+   */
+  static get slotAssignment() { return 'named'; }
+
+  static get observedAttributes() { return []; }
+
+  constructor() {
+    super();
+    this._initialized = false;
+    this._shadow = this.attachShadow({ mode: 'open', slotAssignment: this.constructor.slotAssignment });
+    const sheets = [componentsSheet, hostSheetFor(this.constructor.display)];
+    const extra = this.constructor.hostStyles;
+    if (extra) sheets.push(extra);
+    this._shadow.adoptedStyleSheets = sheets;
+  }
+
+  connectedCallback() {
+    if (!this._initialized) {
+      this._initialized = true;
+
+      // The wrapper mirrors data-theme from <html> so [data-theme]-keyed
+      // component rules apply inside the root. Token *values* need no
+      // mirroring — they inherit.
+      this._wrapper = document.createElement('div');
+      this._wrapper.className = 'nk-wrapper';
+      this._wrapper.setAttribute('data-theme', getCurrentTheme());
+      this._shadow.appendChild(this._wrapper);
+
+      this.render();
+    } else {
+      this._wrapper.setAttribute('data-theme', getCurrentTheme());
+    }
+
+    // Everything below runs on every connect, not just the first. Moving an
+    // element in the DOM disconnects and reconnects it, and disconnectedCallback
+    // tears all of this down — without re-arming it here a moved element would
+    // keep its markup but silently stop reacting.
+    this.setupEvents();
+    instances.add(this);
+
+    if (this.constructor.observesLightDom) {
+      this._lightDomObserver ??= new MutationObserver(records => this.projectLightDom(records));
+      this._lightDomObserver.observe(this, this.constructor.lightDomObserverInit);
+    }
+    if (this.constructor.slotAssignment === 'manual') {
+      this.assignSlots();
+      this._slotObserver ??= new MutationObserver(() => this.assignSlots());
+      this._slotObserver.observe(this, { childList: true });
+    }
+  }
+
+  disconnectedCallback() {
+    instances.delete(this);
+    this._lightDomObserver?.disconnect();
+    this._slotObserver?.disconnect();
+    this.teardownEvents();
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (!this._initialized) return;
+    if (oldValue === newValue) return;
+    this.onAttributeChanged(name, oldValue, newValue);
+  }
+
+  _syncTheme(theme) {
+    this._wrapper?.setAttribute('data-theme', theme);
+  }
+
+  /** Subclasses override to build the inner DOM inside this._wrapper. Runs once. */
+  render() {}
+
+  /** Subclasses override to attach event listeners. Runs on every connect. */
+  setupEvents() {}
+
+  /** Subclasses override to remove event listeners. Runs on every disconnect. */
+  teardownEvents() {}
+
+  /** Subclasses override to react to attribute changes after render(). */
+  onAttributeChanged(name, oldValue, newValue) {}
+
+  /**
+   * Subclasses that set observesLightDom override this to (re-)copy their
+   * light-DOM children into the shadow tree. Runs on every change to those
+   * children, so it has to be safe to call repeatedly.
+   */
+  projectLightDom() {}
+
+  /** Components with manual slot assignment override this. */
+  assignSlots() {}
+
+  /**
+   * Escape hatch: re-copy the light-DOM children now. The observer covers the
+   * ordinary cases; this is for the ones it cannot see, so nobody has to reach
+   * into element.shadowRoot.
+   */
+  refresh() { this.projectLightDom(); if (this.constructor.slotAssignment === 'manual') this.assignSlots(); }
+
+  // ── Utilities ──
+
+  getBoolAttr(name) {
+    return this.hasAttribute(name);
+  }
+
+  setBoolAttr(name, value) {
+    if (value) this.setAttribute(name, '');
+    else this.removeAttribute(name);
+  }
+
+  createElement(tag, classes = [], attrs = {}) {
+    const el = document.createElement(tag);
+    if (classes.length) el.classList.add(...classes);
+    for (const [key, val] of Object.entries(attrs)) {
+      if (val !== null && val !== undefined && val !== false) el.setAttribute(key, val === true ? '' : val);
+    }
+    return el;
+  }
+
+  /** Dispatches a composed, bubbling CustomEvent — the nk-* event contract. */
+  emit(eventName, detail = null) {
+    return this.dispatchEvent(new CustomEvent(eventName, {
+      bubbles: true,
+      composed: true,
+      cancelable: true,
+      detail
+    }));
+  }
+}
+
+// ── Form-associated base class ──
+// ElementInternals gives the element a place in the surrounding <form>:
+// FormData, reset, validation and :disabled through <fieldset>.
+
+export class NkFormElement extends NkElement {
+
+  static formAssociated = true;
+
+  constructor() {
+    super();
+    this._internals = this.attachInternals();
+  }
+
+  get form() { return this._internals.form; }
+  get validationMessage() { return this._internals.validationMessage; }
+  get validity() { return this._internals.validity; }
+  get willValidate() { return this._internals.willValidate; }
+
+  checkValidity() { return this._internals.checkValidity(); }
+  reportValidity() { return this._internals.reportValidity(); }
+
+  formResetCallback() { this.resetValue(); }
+  formStateRestoreCallback(state, mode) { this.restoreValue(state, mode); }
+  formDisabledCallback(disabled) { this.onFormDisabled(disabled); }
+
+  /** Subclasses override. */
+  resetValue() {}
+  restoreValue(state, mode) {}
+  onFormDisabled(disabled) {}
+
+  setFormValue(value, state) {
+    this._internals.setFormValue(value, state);
+  }
+
+  setValidity(flags, message, anchor) {
+    this._internals.setValidity(flags, message, anchor);
+  }
+
+  /** Mirrors the native control's validity onto the host, so required works. */
+  syncValidityFrom(control) {
+    if (!control) return;
+    if (control.validity.valid) this._internals.setValidity({});
+    else this._internals.setValidity(control.validity, control.validationMessage, control);
+  }
+}
+
+export { getCurrentTheme };

package/src/components/content/nk-callout.js

@@ -0,0 +1,35 @@
+import { NkElement } from '../../base.js';
+
+// <nk-callout icon="💡">text</nk-callout>
+// <nk-callout><span slot="icon">📌</span>text</nk-callout>
+// The .c-icon rule has ::slotted(.c-icon) / ::slotted([slot="icon"]) twins in
+// notionkit.css – those size an icon passed in from the light DOM. Pass the
+// icon node itself, never wrapped: ::slotted() only matches the assigned node.
+class NkCallout extends NkElement {
+  static get observedAttributes() { return ['icon']; }
+
+  render() {
+    this._box = this.createElement('div', ['nk-callout']);
+    this._icon = this.createElement('span', ['c-icon']);
+    const iconSlot = this.createElement('slot', [], { name: 'icon' });
+    iconSlot.appendChild(this._icon);
+    const body = document.createElement('div');
+    body.appendChild(document.createElement('slot'));
+    this._box.appendChild(iconSlot);
+    this._box.appendChild(body);
+    this._wrapper.appendChild(this._box);
+    this._syncIcon();
+  }
+
+  onAttributeChanged() { this._syncIcon(); }
+
+  _syncIcon() {
+    if (this._icon) this._icon.textContent = this.getAttribute('icon') || '💡';
+  }
+
+  get icon() { return this.getAttribute('icon'); }
+  set icon(v) { v == null ? this.removeAttribute('icon') : this.setAttribute('icon', v); }
+}
+
+customElements.define('nk-callout', NkCallout);
+export { NkCallout };

package/src/components/content/nk-code.js

@@ -0,0 +1,51 @@
+import { NkElement } from '../../base.js';
+import { highlightHtml } from '../../util/highlight.js';
+
+// <nk-code lang="html">&lt;div class="nk-btn"&gt;…</nk-code>
+// The block keeps whatever whitespace it is given (white-space: pre). Text
+// content is slotted as-is; add `highlight` to colour HTML tags/attributes,
+// which copies the text into the shadow tree (light DOM is then ignored).
+class NkCode extends NkElement {
+  static get observedAttributes() { return ['lang', 'highlight']; }
+  static get observesLightDom() { return true; }
+
+  render() {
+    this._box = this.createElement('div', ['nk-code']);
+    this._lang = this.createElement('span', ['lang']);
+    this._slot = document.createElement('slot');
+    this._pre = this.createElement('span', ['hl']);
+    this._box.appendChild(this._lang);
+    this._box.appendChild(this._slot);
+    this._box.appendChild(this._pre);
+    this._wrapper.appendChild(this._box);
+    this._sync();
+    this.projectLightDom();
+  }
+
+  onAttributeChanged() { this._sync(); this.projectLightDom(); }
+
+  _sync() {
+    if (!this._lang) return;
+    const lang = this.getAttribute('lang');
+    this._lang.textContent = lang || '';
+    this._lang.style.display = lang ? '' : 'none';
+  }
+
+  projectLightDom() {
+    if (!this._pre) return;
+    const highlight = this.hasAttribute('highlight');
+    this._slot.style.display = highlight ? 'none' : '';
+    this._pre.style.display = highlight ? '' : 'none';
+    if (!highlight) return;
+    const text = this.textContent.replace(/^\n/, '');
+    if (text === this._lastText) return;
+    this._lastText = text;
+    this._pre.innerHTML = highlightHtml(text);
+  }
+
+  get lang() { return this.getAttribute('lang'); }
+  set lang(v) { v == null ? this.removeAttribute('lang') : this.setAttribute('lang', v); }
+}
+
+customElements.define('nk-code', NkCode);
+export { NkCode };

package/src/components/content/nk-divider.js

@@ -0,0 +1,11 @@
+import { NkElement } from '../../base.js';
+
+// <nk-divider></nk-divider>  →  <hr class="nk-divider">
+class NkDivider extends NkElement {
+  render() {
+    this._wrapper.appendChild(this.createElement('hr', ['nk-divider']));
+  }
+}
+
+customElements.define('nk-divider', NkDivider);
+export { NkDivider };

package/src/components/content/nk-heading.js

@@ -0,0 +1,28 @@
+import { NkElement } from '../../base.js';
+
+// <nk-heading level="2">Section</nk-heading>  →  <h2 class="nk-heading">
+// The heading level is real markup (h1–h4), so the outline stays honest.
+class NkHeading extends NkElement {
+  static get observedAttributes() { return ['level']; }
+
+  render() {
+    this._build();
+  }
+
+  _build() {
+    const level = Math.min(4, Math.max(1, Number(this.getAttribute('level')) || 2));
+    const h = this.createElement(`h${level}`, ['nk-heading']);
+    h.appendChild(document.createElement('slot'));
+    if (this._heading) this._heading.replaceWith(h);
+    else this._wrapper.appendChild(h);
+    this._heading = h;
+  }
+
+  onAttributeChanged() { this._build(); }
+
+  get level() { return Number(this.getAttribute('level')) || 2; }
+  set level(v) { this.setAttribute('level', v); }
+}
+
+customElements.define('nk-heading', NkHeading);
+export { NkHeading };

package/src/components/content/nk-kbd.js

@@ -0,0 +1,14 @@
+import { NkElement } from '../../base.js';
+
+// <nk-kbd>⌘</nk-kbd> <nk-kbd>K</nk-kbd>  →  <kbd class="nk-kbd">
+class NkKbd extends NkElement {
+
+  render() {
+    const kbd = this.createElement('kbd', ['nk-kbd']);
+    kbd.appendChild(document.createElement('slot'));
+    this._wrapper.appendChild(kbd);
+  }
+}
+
+customElements.define('nk-kbd', NkKbd);
+export { NkKbd };

package/src/components/content/nk-progress.js

@@ -0,0 +1,42 @@
+import { NkElement } from '../../base.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/src/components/content/nk-quote.js

@@ -0,0 +1,31 @@
+import { NkElement } from '../../base.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/src/components/content/nk-tag.js

@@ -0,0 +1,31 @@
+import { NkElement } from '../../base.js';
+
+// <nk-tag color="blue">Text</nk-tag>  —  modifier class .blue becomes color="blue"
+const COLORS = ['blue', 'green', 'orange', 'purple'];
+
+class NkTag extends NkElement {
+  static get observedAttributes() { return ['color']; }
+
+  render() {
+    this._tag = this.createElement('span', this._computeClasses());
+    this._tag.appendChild(document.createElement('slot'));
+    this._wrapper.appendChild(this._tag);
+  }
+
+  onAttributeChanged() {
+    if (this._tag) this._tag.className = this._computeClasses().join(' ');
+  }
+
+  _computeClasses() {
+    const classes = ['nk-tag'];
+    const color = this.getAttribute('color');
+    if (COLORS.includes(color)) classes.push(color);
+    return classes;
+  }
+
+  get color() { return this.getAttribute('color'); }
+  set color(v) { v ? this.setAttribute('color', v) : this.removeAttribute('color'); }
+}
+
+customElements.define('nk-tag', NkTag);
+export { NkTag };

package/src/components/content/nk-todo.js

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

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