@jungherz-de/notionkit-elements 1.0.0 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jungherz-de/notionkit-elements",
-  "version": "1.0.0",
+  "version": "1.1.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.2.0"
   },
   "devDependencies": {
-    "@jungherz-de/notionkit": "^1.1.1",
+    "@jungherz-de/notionkit": "^1.2.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-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-select.js

@@ -27,7 +27,7 @@ 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'));
   }

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

@@ -39,6 +39,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';