@jungherz-de/notionkit-elements 1.5.1 → 1.5.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jungherz-de/notionkit-elements",
-  "version": "1.5.1",
+  "version": "1.5.3",
   "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.5.1"
+    "@jungherz-de/notionkit": ">=1.5.3"
   },
   "devDependencies": {
-    "@jungherz-de/notionkit": "^1.5.1",
+    "@jungherz-de/notionkit": "^1.5.3",
     "@rollup/plugin-node-resolve": "^15.0.0",
     "@rollup/plugin-terser": "^0.4.0",
     "rollup": "^4.0.0",

package/src/base.js

@@ -236,6 +236,25 @@ export class NkElement extends HTMLElement {
 
   // ── Utilities ──
 
+  /**
+   * For elements whose heading arrives as `title` – nk-settings-pane,
+   * nk-danger-zone, nk-empty, nk-model-card. `title` is also the global HTML
+   * attribute, and a title on the host shows as a browser tooltip over the
+   * whole element. So the value is read into this._titleText and the
+   * attribute is taken off the host; a later setAttribute('title') arrives
+   * through attributeChangedCallback and is taken the same way. The removal
+   * fires the callback with null, which is ignored – only '' clears the
+   * heading. The element's own `title` accessor answers from the stored
+   * value, so a framework that binds `title` as a property never puts an
+   * attribute on the host at all. Returns whether a value was taken.
+   */
+  takeTitle(value = this.getAttribute('title')) {
+    if (value === null) return false;
+    this._titleText = value;
+    this.removeAttribute('title');
+    return true;
+  }
+
   getBoolAttr(name) {
     return this.hasAttribute(name);
   }

package/src/components/overlays/nk-settings-pane.js

@@ -1,6 +1,7 @@
 import { NkElement } from '../../base.js';
 
 // <nk-settings-pane name="profile" label="My profile" icon="👤" group="Account" title="My profile" active>…</nk-settings-pane>
+// `title` is the heading, never a tooltip – see NkElement.takeTitle().
 // → <section class="nk-settings-pane active"><h2>My profile</h2>…</section>
 // `label`, `icon` and `group` feed the nav that <nk-modal> renders; `title`
 // renders the pane heading (child-combinator rule, so it lives here). Slotted
@@ -14,22 +15,26 @@ class NkSettingsPane extends NkElement {
     this._section.appendChild(this._h2);
     this._section.appendChild(document.createElement('slot'));
     this._wrapper.appendChild(this._section);
+    this.takeTitle();
     this._sync();
   }
 
   _sync() {
-    const title = this.getAttribute('title');
+    const title = this._titleText;
     this._h2.textContent = title || '';
     this._h2.style.display = title ? '' : 'none';
     this._section.classList.toggle('active', this.getBoolAttr('active'));
     this._section.setAttribute('aria-label', this.getAttribute('label') || title || this.getAttribute('name') || '');
   }
 
-  onAttributeChanged(name) {
+  onAttributeChanged(name, _old, value) {
+    if (name === 'title' && !this.takeTitle(value)) return;
     this._sync();
     if (['label', 'icon', 'group', 'name'].includes(name)) this.closest('nk-modal')?.requestNav?.();
   }
 
+  get title() { return this._titleText ?? ''; }
+  set title(v) { this._titleText = v == null ? '' : String(v); if (this._initialized) this._sync(); }
   get name() { return this.getAttribute('name') ?? this.getAttribute('label') ?? ''; }
   get active() { return this.getBoolAttr('active'); }
   set active(v) { this.setBoolAttr('active', v); }

package/src/components/overlays/nk-toast.js

@@ -3,6 +3,9 @@ import { NkElement } from '../../base.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).
+// Above a tab bar at the bottom of the screen it rises 12px over the bar:
+// notionkit.css does that for class markup with :has(), which cannot see
+// into shadow roots, so the element measures the bar when it opens.
 class NkToast extends NkElement {
   static get observedAttributes() { return ['open', 'duration', 'icon']; }
 
@@ -16,12 +19,27 @@ class NkToast extends NkElement {
   }
 
   _sync() {
+    if (this.getBoolAttr('open')) this._lift();
     this._box.classList.toggle('show', this.getBoolAttr('open'));
     const icon = this.getAttribute('icon') ?? '✓';
     this._icon.textContent = icon;
     this._icon.style.display = icon ? '' : 'none';
   }
 
+  // A bar counts when it is rendered and ends near the bottom of the viewport –
+  // the app's own bar, fixed, sticky or floating. A tab bar shown as a preview
+  // somewhere in a page does not lift the toast.
+  _lift() {
+    const bars = [...document.querySelectorAll('.nk-tab-bar')];
+    for (const host of document.querySelectorAll('nk-tab-bar')) {
+      const bar = host.shadowRoot?.querySelector('.nk-tab-bar');
+      if (bar) bars.push(bar);
+    }
+    const rect = bars.map(b => b.getBoundingClientRect())
+      .find(r => r.height > 0 && r.top < innerHeight && r.bottom > innerHeight - 60);
+    this._box.style.bottom = rect ? `${Math.round(innerHeight - rect.top + 12)}px` : '';
+  }
+
   /** Shows `message` (or the slotted content when omitted) and hides it again after `duration`. */
   show(message, { duration } = {}) {
     if (message !== undefined) this._msg.textContent = message;

package/src/components/page/nk-danger-zone.js

@@ -2,24 +2,33 @@ import { NkElement } from '../../base.js';
 
 // <nk-danger-zone title="Danger zone">…</nk-danger-zone>
 // → <div class="nk-danger-zone"><div class="dz-title">Danger zone</div>…</div>
+// `title` is the heading, never a tooltip – see NkElement.takeTitle().
 class NkDangerZone extends NkElement {
   static get observedAttributes() { return ['title']; }
 
   render() {
     const box = this.createElement('div', ['nk-danger-zone']);
-    this._title = this.createElement('div', ['dz-title']);
-    box.appendChild(this._title);
+    this._titleEl = this.createElement('div', ['dz-title']);
+    box.appendChild(this._titleEl);
     box.appendChild(document.createElement('slot'));
     this._wrapper.appendChild(box);
+    this.takeTitle();
     this._sync();
   }
 
   _sync() {
-    const t = this.getAttribute('title');
-    this._title.textContent = t || '';
-    this._title.style.display = t ? '' : 'none';
+    const t = this._titleText;
+    this._titleEl.textContent = t || '';
+    this._titleEl.style.display = t ? '' : 'none';
   }
-  onAttributeChanged() { this._sync(); }
+
+  onAttributeChanged(name, _old, value) {
+    if (name === 'title' && !this.takeTitle(value)) return;
+    this._sync();
+  }
+
+  get title() { return this._titleText ?? ''; }
+  set title(v) { this._titleText = v == null ? '' : String(v); if (this._initialized) this._sync(); }
 }
 
 customElements.define('nk-danger-zone', NkDangerZone);

package/src/components/page/nk-empty.js

@@ -1,7 +1,9 @@
 import { NkElement } from '../../base.js';
 
 // <nk-empty icon="🗂️" title="No entries yet" desc="Create the first one."><nk-btn variant="primary" small>＋ New</nk-btn></nk-empty>
-// → <div class="nk-empty"><div class="e-icon">🗂️</div><div class="e-title">…</div><div class="e-desc">…</div>…</div>
+// → <div class="nk-empty"><div class="e-icon">🗂️</div><div class="e-title">…</div><div class="e-desc">…</div><div class="e-actions">…</div></div>
+// `title` is the heading, never a tooltip – see NkElement.takeTitle(). The
+// default slot sits in .e-actions, so several buttons keep 8px apart.
 class NkEmpty extends NkElement {
   static get observedAttributes() { return ['icon', 'title', 'desc']; }
 
@@ -15,20 +17,29 @@ class NkEmpty extends NkElement {
       box.appendChild(s);
       this._parts[slot] = el;
     }
-    box.appendChild(document.createElement('slot'));
+    const actions = this.createElement('div', ['e-actions']);
+    actions.appendChild(document.createElement('slot'));
+    box.appendChild(actions);
     this._wrapper.appendChild(box);
+    this.takeTitle();
     this._sync();
   }
 
   _sync() {
     for (const [slot, el] of Object.entries(this._parts)) {
-      const v = this.getAttribute(slot);
+      const v = slot === 'title' ? this._titleText : this.getAttribute(slot);
       el.textContent = v || '';
       el.style.display = v ? '' : 'none';
     }
   }
 
-  onAttributeChanged() { this._sync(); }
+  onAttributeChanged(name, _old, value) {
+    if (name === 'title' && !this.takeTitle(value)) return;
+    this._sync();
+  }
+
+  get title() { return this._titleText ?? ''; }
+  set title(v) { this._titleText = v == null ? '' : String(v); if (this._initialized) this._sync(); }
 }
 
 customElements.define('nk-empty', NkEmpty);

package/src/components/page/nk-model-card.js

@@ -3,7 +3,8 @@ import { NkFormElement } from '../../base.js';
 // <nk-model-card name="model" value="gpt" title="Mona Pro" desc="Best for long documents" selected></nk-model-card>
 // → <div class="nk-model-card selected"><div class="m-radio"></div><div><div class="m-name">…</div><div class="m-desc">…</div></div></div>
 // Cards with the same `name` in the same tree behave like radios and submit
-// the selected value with the form.
+// the selected value with the form. `title` is the card's name, never a
+// tooltip – see NkElement.takeTitle().
 class NkModelCard extends NkFormElement {
   static get observedAttributes() { return ['name', 'value', 'title', 'desc', 'selected', 'disabled']; }
 
@@ -21,6 +22,7 @@ class NkModelCard extends NkFormElement {
     this._card.appendChild(text);
     this._wrapper.appendChild(this._card);
     this._defaultSelected = this.getBoolAttr('selected');
+    this.takeTitle();
     this._sync();
     if (this.getBoolAttr('selected')) this._unselectPeers();
   }
@@ -30,7 +32,7 @@ class NkModelCard extends NkFormElement {
     this._card.classList.toggle('selected', on);
     this._card.setAttribute('aria-checked', on ? 'true' : 'false');
     this._card.setAttribute('aria-disabled', this.getBoolAttr('disabled') ? 'true' : 'false');
-    this._name.textContent = this.getAttribute('title') || '';
+    this._name.textContent = this._titleText || '';
     const desc = this.getAttribute('desc');
     this._desc.textContent = desc || '';
     this._desc.style.display = desc ? '' : 'none';
@@ -64,11 +66,12 @@ class NkModelCard extends NkFormElement {
     if (this.getBoolAttr('disabled') || this.getBoolAttr('selected')) return;
     this.setBoolAttr('selected', true);
     this.emit('nk-change', { value: this.value, name: this.name, checked: true });
-    this.emit('nk-select', { value: this.value, label: this.getAttribute('title') });
+    this.emit('nk-select', { value: this.value, label: this.title });
     this.dispatchEvent(new Event('change', { bubbles: true }));
   }
 
-  onAttributeChanged(name) {
+  onAttributeChanged(name, _old, value) {
+    if (name === 'title' && !this.takeTitle(value)) return;
     this._sync();
     if (name === 'selected' && this.getBoolAttr('selected')) this._unselectPeers();
   }
@@ -76,6 +79,8 @@ class NkModelCard extends NkFormElement {
   resetValue() { this.setBoolAttr('selected', this._defaultSelected); }
   focus(o) { this._card?.focus(o); }
 
+  get title() { return this._titleText ?? ''; }
+  set title(v) { this._titleText = v == null ? '' : String(v); if (this._initialized) this._sync(); }
   get selected() { return this.getBoolAttr('selected'); }
   set selected(v) { this.setBoolAttr('selected', v); }
   get value() { return this.getAttribute('value') || 'on'; }