@jungherz-de/notionkit-elements 1.0.1 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jungherz-de/notionkit-elements",
-  "version": "1.0.1",
+  "version": "1.2.0",
   "description": "Vanilla JavaScript Web Components wrapping the NotionKit CSS foundation – <nk-*> custom elements with Shadow DOM, automatic theme sync and native form participation.",
   "license": "MIT",
   "author": "Jungherz GmbH <info@jungherz.com> (https://www.jungherz.com)",
@@ -58,10 +58,10 @@
     "dark-mode"
   ],
   "peerDependencies": {
-    "@jungherz-de/notionkit": ">=1.0.0"
+    "@jungherz-de/notionkit": ">=1.3.0"
   },
   "devDependencies": {
-    "@jungherz-de/notionkit": "^1.1.1",
+    "@jungherz-de/notionkit": "^1.3.0",
     "@rollup/plugin-node-resolve": "^15.0.0",
     "@rollup/plugin-terser": "^0.4.0",
     "rollup": "^4.0.0",

package/src/base.js

@@ -137,6 +137,12 @@ export class NkElement extends HTMLElement {
 
   connectedCallback() {
     if (!this._initialized) {
+      // A framework may have set properties on the instance before the
+      // definition arrived (hybrids binds checked="${bool}" as a property
+      // while the element is still a plain HTMLElement). Such an own property
+      // shadows the accessor on the prototype for good; re-apply it through
+      // the setter so the attribute – and with it render() – sees the value.
+      this._upgradeOwnProperties();
       this._initialized = true;
 
       // The wrapper mirrors data-theme from <html> so [data-theme]-keyed
@@ -187,6 +193,18 @@ export class NkElement extends HTMLElement {
     this._wrapper?.setAttribute('data-theme', theme);
   }
 
+  _upgradeOwnProperties() {
+    for (const key of Object.keys(this)) {
+      if (key.startsWith('_')) continue;
+      let proto = Object.getPrototypeOf(this), desc;
+      while (proto && proto !== HTMLElement.prototype && !(desc = Object.getOwnPropertyDescriptor(proto, key))) proto = Object.getPrototypeOf(proto);
+      if (!desc?.set) continue;
+      const value = this[key];
+      delete this[key];
+      this[key] = value;
+    }
+  }
+
   /** Subclasses override to build the inner DOM inside this._wrapper. Runs once. */
   render() {}
 
@@ -268,9 +286,21 @@ export class NkFormElement extends NkElement {
   checkValidity() { return this._internals.checkValidity(); }
   reportValidity() { return this._internals.reportValidity(); }
 
+  connectedCallback() {
+    const first = !this._initialized;
+    super.connectedCallback();
+    // A `disabled` attribute in the markup fires formDisabledCallback on
+    // parse or upgrade – before the first connect, when nothing is rendered
+    // yet. The state was remembered below; apply it now that render() ran.
+    if (first && this._formDisabled) this.onFormDisabled(true);
+  }
+
   formResetCallback() { this.resetValue(); }
   formStateRestoreCallback(state, mode) { this.restoreValue(state, mode); }
-  formDisabledCallback(disabled) { this.onFormDisabled(disabled); }
+  formDisabledCallback(disabled) {
+    this._formDisabled = disabled;
+    if (this._initialized) this.onFormDisabled(disabled);
+  }
 
   /** Subclasses override. */
   resetValue() {}

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

@@ -3,15 +3,18 @@ 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']; }
+  static get observedAttributes() { return ['checked', 'disabled', 'name', 'value', 'text', 'indeterminate', 'required']; }
 
   render() {
     const label = this.createElement('label', ['nk-check']);
     this._input = this.createElement('input', [], { type: 'checkbox' });
+    const slot = document.createElement('slot');
+    this._text = document.createTextNode('');
+    slot.appendChild(this._text);
     this._apply();
     this._defaultChecked = this.getBoolAttr('checked');
     label.appendChild(this._input);
-    label.appendChild(document.createElement('slot'));
+    label.appendChild(slot);
     this._wrapper.appendChild(label);
     this._syncFormValue();
   }
@@ -24,6 +27,7 @@ class NkCheck extends NkFormElement {
     const name = this.getAttribute('name');
     name ? this._input.setAttribute('name', name) : this._input.removeAttribute('name');
     this._input.value = this.getAttribute('value') || 'on';
+    if (this._text) this._text.data = this.getAttribute('text') ?? '';
   }
 
   setupEvents() {
@@ -68,6 +72,8 @@ class NkCheck extends NkFormElement {
   set disabled(v) { this.setBoolAttr('disabled', v); }
   get name() { return this.getAttribute('name'); }
   set name(v) { this.setAttribute('name', v); }
+  get text() { return this.getAttribute('text'); }
+  set text(v) { v == null ? this.removeAttribute('text') : this.setAttribute('text', v); }
   get value() { return this.getAttribute('value') || 'on'; }
   set value(v) { this.setAttribute('value', v); }
 }

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

@@ -7,11 +7,19 @@ import { NkElement } from '../../base.js';
 //                         <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).
+//
+// `stacked` puts the label above a full-width control, `compact` shrinks the
+// label and drops the row padding; inside <nk-fields> both are on by
+// default. A stacked field sets `wide` on its nk-input / nk-textarea /
+// nk-select, since the stylesheet's `.nk-field.stacked .nk-input` cannot
+// reach into the control's shadow root.
+const WIDE = ['nk-input', 'nk-textarea', 'nk-select'];
+
 class NkField extends NkElement {
-  static get observedAttributes() { return ['label', 'desc']; }
+  static get observedAttributes() { return ['label', 'desc', 'stacked', 'compact']; }
 
   render() {
-    const field = this.createElement('div', ['nk-field']);
+    this._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' });
@@ -22,21 +30,51 @@ class NkField extends NkElement {
     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._slot = document.createElement('slot');
+    control.appendChild(this._slot);
+    this._field.appendChild(text);
+    this._field.appendChild(control);
+    this._wrapper.appendChild(this._field);
+    this._widened = new Set();
     this._sync();
   }
 
+  setupEvents() {
+    this._onSlot = () => this._syncWide();
+    this._slot.addEventListener('slotchange', this._onSlot);
+    this._sync();
+  }
+
+  teardownEvents() {
+    this._slot?.removeEventListener('slotchange', this._onSlot);
+  }
+
   onAttributeChanged() { this._sync(); }
 
+  get stacked() { return this.getBoolAttr('stacked') || !!this.closest('nk-fields'); }
+  set stacked(v) { this.setBoolAttr('stacked', v); }
+  get compact() { return this.getBoolAttr('compact') || !!this.closest('nk-fields'); }
+  set compact(v) { this.setBoolAttr('compact', v); }
+
   _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';
+    this._field.classList.toggle('stacked', this.stacked);
+    this._field.classList.toggle('compact', this.compact);
+    this._syncWide();
+  }
+
+  _syncWide() {
+    if (!this._slot) return;
+    const stacked = this.stacked;
+    for (const el of this._slot.assignedElements()) {
+      if (!WIDE.includes(el.localName)) continue;
+      if (stacked && !el.hasAttribute('wide')) { el.setAttribute('wide', ''); this._widened.add(el); }
+      else if (!stacked && this._widened.has(el)) { el.removeAttribute('wide'); this._widened.delete(el); }
+    }
   }
 
   get label() { return this.getAttribute('label'); }

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

@@ -0,0 +1,21 @@
+import { NkElement } from '../../base.js';
+
+// <nk-fields>
+//   <nk-field label="Name"><nk-input name="name"></nk-input></nk-field>
+//   <nk-field label="Email"><nk-input name="email"></nk-input></nk-field>
+// </nk-fields>
+// → <div class="nk-fields">…</div>
+// A grid of short fields side by side, wrapping as the width allows. Every
+// nk-field inside renders itself stacked and compact (12px label above a
+// full-width control) – the class markup does the same through
+// `.nk-fields > .nk-field`, which cannot cross the shadow boundary here.
+class NkFields extends NkElement {
+  render() {
+    const grid = this.createElement('div', ['nk-fields']);
+    grid.appendChild(document.createElement('slot'));
+    this._wrapper.appendChild(grid);
+  }
+}
+
+customElements.define('nk-fields', NkFields);
+export { NkFields };

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

@@ -21,7 +21,7 @@ class NkInput extends NkFormElement {
 
   _forward(attr) {
     if (BOOLEANS.includes(attr)) {
-      this._input[attr === 'readonly' ? 'readOnly' : attr] = this.getBoolAttr(attr);
+      this._input[attr === 'readonly' ? 'readOnly' : attr] = this.getBoolAttr(attr) || (attr === 'disabled' && !!this._formDisabled);
       return;
     }
     const v = this.getAttribute(attr);

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

@@ -29,17 +29,20 @@ function syncGroupTabIndex(group) {
 }
 
 class NkRadio extends NkFormElement {
-  static get observedAttributes() { return ['checked', 'disabled', 'name', 'value', 'required']; }
+  static get observedAttributes() { return ['checked', 'disabled', 'name', 'value', 'text', 'required']; }
 
   render() {
     const label = this.createElement('label', ['nk-check']);
     this._input = this.createElement('input', [], { type: 'radio' });
+    const slot = document.createElement('slot');
+    this._text = document.createTextNode('');
+    slot.appendChild(this._text);
     // `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'));
+    label.appendChild(slot);
     this._wrapper.appendChild(label);
     this._syncFormValue();
     // Elements upgrade in document order, so the last `checked` one in the
@@ -55,6 +58,7 @@ class NkRadio extends NkFormElement {
     const name = this.getAttribute('name');
     name ? this._input.setAttribute('name', name) : this._input.removeAttribute('name');
     this._input.value = this.getAttribute('value') || '';
+    if (this._text) this._text.data = this.getAttribute('text') ?? '';
   }
 
   setupEvents() {
@@ -151,6 +155,8 @@ class NkRadio extends NkFormElement {
   set disabled(v) { this.setBoolAttr('disabled', v); }
   get name() { return this.getAttribute('name'); }
   set name(v) { this.setAttribute('name', v); }
+  get text() { return this.getAttribute('text'); }
+  set text(v) { v == null ? this.removeAttribute('text') : this.setAttribute('text', v); }
   get value() { return this.getAttribute('value') || ''; }
   set value(v) { this.setAttribute('value', v); }
 }

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

@@ -9,7 +9,7 @@ import { NkFormElement } from '../../base.js';
 // 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 observedAttributes() { return ['value', 'name', 'disabled', 'required', 'compact', 'wide', 'aria-label']; }
   static get observesLightDom() { return true; }
 
   render() {
@@ -27,9 +27,10 @@ class NkSelect extends NkFormElement {
     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.disabled = this.getBoolAttr('disabled') || !!this._formDisabled;
     this._select.required = this.getBoolAttr('required');
     this._select.classList.toggle('compact', this.getBoolAttr('compact'));
+    this._select.classList.toggle('wide', this.getBoolAttr('wide'));
   }
 
   projectLightDom() {
@@ -120,6 +121,8 @@ class NkSelect extends NkFormElement {
   set required(v) { this.setBoolAttr('required', v); }
   get compact() { return this.getBoolAttr('compact'); }
   set compact(v) { this.setBoolAttr('compact', v); }
+  get wide() { return this.getBoolAttr('wide'); }
+  set wide(v) { this.setBoolAttr('wide', v); }
 }
 
 customElements.define('nk-select', NkSelect);

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

@@ -3,14 +3,28 @@ import { NkFormElement } from '../../base.js';
 // <nk-switch name="notify" checked></nk-switch>
 // → <button class="nk-switch" role="switch" aria-checked="true">
 // notionkit.css styles the state through [aria-checked]; the toggling is here.
+//
+// <nk-switch checked>Waiting</nk-switch>   (or text="Waiting")
+// → <label class="nk-switch-label"><button class="nk-switch" …></button><span>Waiting</span></label>
+// Visible text beside the switch, for several switches in one row where no
+// nk-field row names them. Without text the label wrapper is layout-
+// transparent (display: contents), so the bare button stays the bare button.
 class NkSwitch extends NkFormElement {
-  static get observedAttributes() { return ['checked', 'disabled', 'name', 'value', 'label']; }
+  static get observedAttributes() { return ['checked', 'disabled', 'name', 'value', 'label', 'text']; }
 
   render() {
+    this._row = this.createElement('label', ['nk-switch-label']);
     this._btn = this.createElement('button', ['nk-switch'], { type: 'button', role: 'switch' });
+    this._text = document.createElement('span');
+    this._slot = document.createElement('slot');
+    this._textNode = document.createTextNode('');
+    this._slot.appendChild(this._textNode);
+    this._text.appendChild(this._slot);
+    this._row.append(this._btn, this._text);
     this._defaultChecked = this.getBoolAttr('checked');
     this._apply();
-    this._wrapper.appendChild(this._btn);
+    this._syncText();
+    this._wrapper.appendChild(this._row);
     this._syncFormValue();
   }
 
@@ -21,13 +35,24 @@ class NkSwitch extends NkFormElement {
     label ? this._btn.setAttribute('aria-label', label) : this._btn.removeAttribute('aria-label');
   }
 
+  _syncText() {
+    this._textNode.data = this.getAttribute('text') ?? '';
+    const hasText = !!(this.getAttribute('text') || this._slot.assignedNodes().some(n => n.nodeType === Node.ELEMENT_NODE || n.data.trim()));
+    this._text.hidden = !hasText;
+    this._row.style.display = hasText ? '' : 'contents';
+  }
+
   setupEvents() {
     this._onClick = () => this.toggle();
+    this._onSlot = () => this._syncText();
     this._btn.addEventListener('click', this._onClick);
+    this._slot.addEventListener('slotchange', this._onSlot);
+    this._syncText();
   }
 
   teardownEvents() {
     this._btn?.removeEventListener('click', this._onClick);
+    this._slot?.removeEventListener('slotchange', this._onSlot);
   }
 
   toggle() {
@@ -37,8 +62,9 @@ class NkSwitch extends NkFormElement {
     this.dispatchEvent(new Event('change', { bubbles: true }));
   }
 
-  onAttributeChanged() {
+  onAttributeChanged(name) {
     if (!this._btn) return;
+    if (name === 'text') { this._syncText(); return; }
     this._apply();
     this._syncFormValue();
   }
@@ -62,6 +88,8 @@ class NkSwitch extends NkFormElement {
   set name(v) { this.setAttribute('name', v); }
   get value() { return this.getAttribute('value') || 'on'; }
   set value(v) { this.setAttribute('value', v); }
+  get text() { return this.getAttribute('text'); }
+  set text(v) { v == null ? this.removeAttribute('text') : this.setAttribute('text', v); }
 }
 
 customElements.define('nk-switch', NkSwitch);

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

@@ -19,7 +19,7 @@ class NkTextarea extends NkFormElement {
 
   _forward(attr) {
     if (BOOLEANS.includes(attr)) {
-      this._input[attr === 'readonly' ? 'readOnly' : attr] = this.getBoolAttr(attr);
+      this._input[attr === 'readonly' ? 'readOnly' : attr] = this.getBoolAttr(attr) || (attr === 'disabled' && !!this._formDisabled);
       return;
     }
     const v = this.getAttribute(attr);

package/src/components/shell/nk-tab-bar-item.js

@@ -0,0 +1,82 @@
+import { NkElement } from '../../base.js';
+
+// <nk-tab-bar-item icon="📥" value="inbox" active>Inbox</nk-tab-bar-item>
+// → <button class="nk-tab-bar-item active" type="button">
+//     <span class="icon">📥</span><span class="label">Inbox</span></button>
+//
+// One destination of <nk-tab-bar>. A click emits nk-select (cancelable);
+// inside a bar it then moves the bar's `value`, standalone it sets its own
+// `active`. With `href` it navigates afterwards, with `drawer` it opens the
+// nearest <nk-sidebar> as a drawer instead of becoming active – the usual
+// fifth item ("More"). The icon is an attribute or a `slot="icon"` node.
+class NkTabBarItem extends NkElement {
+  static get observedAttributes() { return ['icon', 'label', 'value', 'href', 'active', 'disabled', 'drawer']; }
+
+  render() {
+    this._btn = this.createElement('button', ['nk-tab-bar-item'], { type: 'button' });
+    this._iconSlot = this.createElement('slot', [], { name: 'icon' });
+    this._icon = this.createElement('span', ['icon'], { 'aria-hidden': 'true' });
+    this._iconSlot.appendChild(this._icon);
+    this._label = this.createElement('span', ['label']);
+    this._labelSlot = document.createElement('slot');
+    this._labelText = document.createTextNode('');
+    this._labelSlot.appendChild(this._labelText);
+    this._label.appendChild(this._labelSlot);
+    this._btn.append(this._iconSlot, this._label);
+    this._wrapper.appendChild(this._btn);
+    this._sync();
+  }
+
+  _sync() {
+    this._icon.textContent = this.getAttribute('icon') ?? '';
+    this._labelText.data = this.getAttribute('label') ?? '';
+    const active = this.getBoolAttr('active');
+    this._btn.classList.toggle('active', active);
+    active ? this._btn.setAttribute('aria-current', 'page') : this._btn.removeAttribute('aria-current');
+    this._btn.disabled = this.getBoolAttr('disabled');
+    const href = this.getAttribute('href');
+    href ? this._btn.setAttribute('data-href', href) : this._btn.removeAttribute('data-href');
+  }
+
+  setupEvents() {
+    this._onClick = () => this.select();
+    this._btn.addEventListener('click', this._onClick);
+  }
+
+  teardownEvents() {
+    this._btn?.removeEventListener('click', this._onClick);
+  }
+
+  select() {
+    if (this.getBoolAttr('disabled')) return;
+    const href = this.getAttribute('href');
+    const ok = this.emit('nk-select', { value: this.value, label: this.label, href, item: this, drawer: this.getBoolAttr('drawer') });
+    if (!ok) return;
+    if (this.getBoolAttr('drawer')) {
+      const sidebar = this.closest('nk-app')?.querySelector('nk-sidebar') ?? document.querySelector('nk-sidebar');
+      sidebar?.toggle?.();
+      return;
+    }
+    const bar = this.closest('nk-tab-bar');
+    if (bar) bar.value = this.value;
+    else this.setBoolAttr('active', true);
+    if (href) location.assign(href);
+  }
+
+  onAttributeChanged() { this._sync(); }
+  focus(o) { this._btn?.focus(o); }
+
+  get value() { return this.getAttribute('value') ?? this.label; }
+  set value(v) { this.setAttribute('value', v); }
+  get label() { return this.getAttribute('label') ?? this.textContent.trim(); }
+  set label(v) { this.setAttribute('label', v); }
+  get active() { return this.getBoolAttr('active'); }
+  set active(v) { this.setBoolAttr('active', v); }
+  get disabled() { return this.getBoolAttr('disabled'); }
+  set disabled(v) { this.setBoolAttr('disabled', v); }
+  get drawer() { return this.getBoolAttr('drawer'); }
+  set drawer(v) { this.setBoolAttr('drawer', v); }
+}
+
+customElements.define('nk-tab-bar-item', NkTabBarItem);
+export { NkTabBarItem };

package/src/components/shell/nk-tab-bar.js

@@ -0,0 +1,82 @@
+import { NkElement } from '../../base.js';
+
+// <nk-tab-bar value="inbox">
+//   <nk-tab-bar-item icon="🏠" value="home">Home</nk-tab-bar-item>
+//   <nk-tab-bar-item icon="📥" value="inbox">Inbox</nk-tab-bar-item>
+//   <nk-tab-bar-item icon="☰" drawer>More</nk-tab-bar-item>
+// </nk-tab-bar>
+// → <nav class="nk-tab-bar">…</nav>
+//
+// The thumb-reachable twin of the sidebar for phones and installed PWAs. As
+// the last child of <nk-app> it is slotted into .nk-main below the scrolling
+// page, so it never moves and needs no bottom padding anywhere. The
+// stylesheet hides it above 860px – there the sidebar is the navigation –
+// and shows it below; `always` shows it at every width (previews, phone
+// frames), `floating` makes it a capsule. Exactly one item is `active`; a
+// `drawer` item opens the sidebar instead of becoming active.
+class NkTabBar extends NkElement {
+  static get observedAttributes() { return ['value', 'always', 'floating', 'label']; }
+
+  render() {
+    this._bar = this.createElement('nav', ['nk-tab-bar']);
+    this._slot = document.createElement('slot');
+    this._bar.appendChild(this._slot);
+    this._wrapper.appendChild(this._bar);
+    this._syncBar();
+    this._sync();
+  }
+
+  get items() { return [...this.querySelectorAll(':scope > nk-tab-bar-item')]; }
+
+  // Attribute access only: on the first connect the children are in the DOM
+  // but not yet upgraded, so their accessors do not exist.
+  _valueOf(item) { return item.getAttribute('value') ?? item.getAttribute('label') ?? item.textContent.trim(); }
+
+  _syncBar() {
+    this._bar.classList.toggle('always', this.getBoolAttr('always'));
+    this._bar.classList.toggle('floating', this.getBoolAttr('floating'));
+    const label = this.getAttribute('label');
+    label ? this._bar.setAttribute('aria-label', label) : this._bar.removeAttribute('aria-label');
+  }
+
+  _sync() {
+    const items = this.items.filter(i => !i.hasAttribute('drawer'));
+    if (!items.length) return;
+    let value = this.getAttribute('value');
+    if (value === null || !items.some(i => this._valueOf(i) === value)) {
+      const preset = items.find(i => i.hasAttribute('active')) || items[0];
+      value = this._valueOf(preset);
+    }
+    for (const item of items) {
+      if (this._valueOf(item) === value) item.setAttribute('active', ''); else item.removeAttribute('active');
+    }
+    this._value = value;
+  }
+
+  setupEvents() {
+    this._onSlot = () => this._sync();
+    this._slot.addEventListener('slotchange', this._onSlot);
+    this._sync();
+  }
+
+  teardownEvents() {
+    this._slot?.removeEventListener('slotchange', this._onSlot);
+  }
+
+  onAttributeChanged(name) {
+    if (name !== 'value') { this._syncBar(); return; }
+    const before = this._value;
+    this._sync();
+    if (this._value !== before) this.emit('nk-change', { value: this._value });
+  }
+
+  get value() { return this._value ?? this.getAttribute('value'); }
+  set value(v) { this.setAttribute('value', v); }
+  get always() { return this.getBoolAttr('always'); }
+  set always(v) { this.setBoolAttr('always', v); }
+  get floating() { return this.getBoolAttr('floating'); }
+  set floating(v) { this.setBoolAttr('floating', v); }
+}
+
+customElements.define('nk-tab-bar', NkTabBar);
+export { NkTabBar };

package/src/index.js

@@ -16,6 +16,7 @@ export { NkCheck } from './components/forms/nk-check.js';
 export { NkRadio } from './components/forms/nk-radio.js';
 export { NkSlider } from './components/forms/nk-slider.js';
 export { NkField } from './components/forms/nk-field.js';
+export { NkFields } from './components/forms/nk-fields.js';
 
 // Wave 1 – content
 export { NkTag } from './components/content/nk-tag.js';
@@ -39,6 +40,8 @@ export { NkTreeItem } from './components/shell/nk-tree-item.js';
 export { NkTopbar } from './components/shell/nk-topbar.js';
 export { NkBreadcrumb } from './components/shell/nk-breadcrumb.js';
 export { NkThemeToggle } from './components/shell/nk-theme-toggle.js';
+export { NkTabBar } from './components/shell/nk-tab-bar.js';
+export { NkTabBarItem } from './components/shell/nk-tab-bar-item.js';
 
 // Wave 3 – page shell & blocks
 export { NkPage } from './components/page/nk-page.js';