@jungherz-de/notionkit-elements 1.0.1 → 1.2.0

package/dist/components/nk-select.js

@@ -1,4 +1,4 @@
-import { a as NkFormElement } from './shared/base-6gEcoatG.js';
+import { a as NkFormElement } from './shared/base-EVtzqKmc.js';
 
 // <nk-select name="role" value="editor">
 //   <option value="viewer">Viewer</option>
@@ -9,7 +9,7 @@ import { a as NkFormElement } from './shared/base-6gEcoatG.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/dist/components/nk-settings-pane.js

@@ -1,4 +1,4 @@
-import { N as NkElement } from './shared/base-6gEcoatG.js';
+import { N as NkElement } from './shared/base-EVtzqKmc.js';
 
 // <nk-settings-pane name="profile" label="My profile" icon="👤" group="Account" title="My profile" active>…</nk-settings-pane>
 // → <section class="nk-settings-pane active"><h2>My profile</h2>…</section>

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

@@ -1,4 +1,4 @@
-import { N as NkElement } from './shared/base-6gEcoatG.js';
+import { N as NkElement } from './shared/base-EVtzqKmc.js';
 
 // <nk-settings-user slot="user" name="Marcel Karas" mail="marcel@…" avatar="MK"></nk-settings-user>
 // → <div class="nk-settings-user"><div class="avatar">MK</div><div class="u-text"><div class="name">…</div><div class="mail">…</div></div></div>

package/dist/components/nk-sidebar.js

@@ -1,4 +1,4 @@
-import { N as NkElement } from './shared/base-6gEcoatG.js';
+import { N as NkElement } from './shared/base-EVtzqKmc.js';
 
 // <nk-sidebar slot="sidebar">
 //   <nk-workspace-switcher slot="workspace" name="Acme"></nk-workspace-switcher>

package/dist/components/nk-skeleton.js

@@ -1,4 +1,4 @@
-import { N as NkElement } from './shared/base-6gEcoatG.js';
+import { N as NkElement } from './shared/base-EVtzqKmc.js';
 
 // <nk-skeleton height="18" width="60%"></nk-skeleton>
 // <nk-skeleton lines="3" widths="100%,85%,40%"></nk-skeleton>

package/dist/components/nk-slider.js

@@ -1,4 +1,4 @@
-import { a as NkFormElement } from './shared/base-6gEcoatG.js';
+import { a as NkFormElement } from './shared/base-EVtzqKmc.js';
 
 // <nk-slider name="size" min="12" max="18" value="14" show-value></nk-slider>
 // → <input type="range" class="nk-slider"> <div class="nk-slider-value">14</div>

package/dist/components/nk-stat.js

@@ -1,4 +1,4 @@
-import { N as NkElement } from './shared/base-6gEcoatG.js';
+import { N as NkElement } from './shared/base-EVtzqKmc.js';
 
 // <nk-stat label="Active pages" value="128" delta="▲ 12 this week" trend="up"></nk-stat>
 // → <div class="nk-stat"><div class="s-label">…</div><div class="s-value">…</div><div class="s-delta up">…</div></div>

package/dist/components/nk-stats.js

@@ -1,4 +1,4 @@
-import { N as NkElement } from './shared/base-6gEcoatG.js';
+import { N as NkElement } from './shared/base-EVtzqKmc.js';
 
 // <nk-stats><nk-stat …></nk-stat>…</nk-stats>  →  <div class="nk-stats">
 class NkStats extends NkElement {

package/dist/components/nk-switch.js

@@ -1,16 +1,30 @@
-import { a as NkFormElement } from './shared/base-6gEcoatG.js';
+import { a as NkFormElement } from './shared/base-EVtzqKmc.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/dist/components/nk-synced.js

@@ -1,4 +1,4 @@
-import { N as NkElement } from './shared/base-6gEcoatG.js';
+import { N as NkElement } from './shared/base-EVtzqKmc.js';
 
 // <nk-synced badge="⟳ 3 places">…</nk-synced>
 // → <div class="nk-synced"><span class="synced-badge">⟳ 3 places</span>…</div>

package/dist/components/nk-tab-bar-item.js

@@ -0,0 +1,83 @@
+import { N as NkElement } from './shared/base-EVtzqKmc.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/dist/components/nk-tab-bar.js

@@ -0,0 +1,83 @@
+import { N as NkElement } from './shared/base-EVtzqKmc.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/dist/components/nk-tab.js

@@ -1,4 +1,4 @@
-import { N as NkElement } from './shared/base-6gEcoatG.js';
+import { N as NkElement } from './shared/base-EVtzqKmc.js';
 
 // <nk-tab value="notes" active>📝 Notes</nk-tab>  →  <span class="nk-tab active" role="tab">
 class NkTab extends NkElement {

package/dist/components/nk-table-view.js

@@ -1,4 +1,4 @@
-import { N as NkElement } from './shared/base-6gEcoatG.js';
+import { N as NkElement } from './shared/base-EVtzqKmc.js';
 import { c as compareBy, r as renderPropertyCell } from './shared/property-cell-Dn91uFkf.js';
 
 // <nk-table-view name="table" label="▦ Table" count new-row sortable></nk-table-view>

package/dist/components/nk-tabs.js

@@ -1,4 +1,4 @@
-import { N as NkElement } from './shared/base-6gEcoatG.js';
+import { N as NkElement } from './shared/base-EVtzqKmc.js';
 
 // <nk-tabs value="notes">
 //   <nk-tab value="notes">📝 Notes</nk-tab>

package/dist/components/nk-tag.js

@@ -1,4 +1,4 @@
-import { N as NkElement } from './shared/base-6gEcoatG.js';
+import { N as NkElement } from './shared/base-EVtzqKmc.js';
 
 // <nk-tag color="blue">Text</nk-tag>  —  modifier class .blue becomes color="blue"
 const COLORS = ['blue', 'green', 'orange', 'purple'];

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

@@ -1,4 +1,4 @@
-import { N as NkElement } from './shared/base-6gEcoatG.js';
+import { N as NkElement } from './shared/base-EVtzqKmc.js';
 
 // <nk-template-btn icon="📅" value="week-plan">Insert week plan</nk-template-btn>
 // → <button class="nk-template-btn">📅 Insert week plan</button>

package/dist/components/nk-textarea.js

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

@@ -1,4 +1,4 @@
-import { N as NkElement, g as getCurrentTheme } from './shared/base-6gEcoatG.js';
+import { N as NkElement, g as getCurrentTheme } from './shared/base-EVtzqKmc.js';
 
 // <nk-theme-toggle slot="actions"></nk-theme-toggle>
 // → <button class="nk-topbar-btn nk-theme-toggle">🌙</button>

package/dist/components/nk-toast.js

@@ -1,4 +1,4 @@
-import { N as NkElement } from './shared/base-6gEcoatG.js';
+import { N as NkElement } from './shared/base-EVtzqKmc.js';
 
 // <nk-toast id="toast"></nk-toast>   …   toast.show('Saved');
 // → <div class="nk-toast show">✓ Saved</div>

package/dist/components/nk-todo.js

@@ -1,4 +1,4 @@
-import { a as NkFormElement } from './shared/base-6gEcoatG.js';
+import { a as NkFormElement } from './shared/base-EVtzqKmc.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>

package/dist/components/nk-toggle.js

@@ -1,4 +1,4 @@
-import { N as NkElement } from './shared/base-6gEcoatG.js';
+import { N as NkElement } from './shared/base-EVtzqKmc.js';
 
 // <nk-toggle label="Details" open>Body…</nk-toggle>
 // → <details class="nk-toggle" open><summary>Details</summary><div class="toggle-body">…</div></details>

package/dist/components/nk-topbar.js

@@ -1,4 +1,4 @@
-import { N as NkElement } from './shared/base-6gEcoatG.js';
+import { N as NkElement } from './shared/base-EVtzqKmc.js';
 
 // <nk-topbar>
 //   <nk-breadcrumb>…</nk-breadcrumb>

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

@@ -1,4 +1,4 @@
-import { N as NkElement } from './shared/base-6gEcoatG.js';
+import { N as NkElement } from './shared/base-EVtzqKmc.js';
 
 // <nk-tree-item icon="📊" value="overview" open>
 //   Project overview

package/dist/components/nk-tree.js

@@ -1,4 +1,4 @@
-import { N as NkElement } from './shared/base-6gEcoatG.js';
+import { N as NkElement } from './shared/base-EVtzqKmc.js';
 
 // <nk-tree>
 //   <nk-section-label addable>Favourites</nk-section-label>

package/dist/components/nk-workspace-switcher.js

@@ -1,4 +1,4 @@
-import { N as NkElement } from './shared/base-6gEcoatG.js';
+import { N as NkElement } from './shared/base-EVtzqKmc.js';
 
 // <nk-workspace-switcher slot="workspace" name="Acme" avatar="A">
 //   <nk-menu slot="menu">…</nk-menu>