@jungherz-de/notionkit-elements 1.1.0 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jungherz-de/notionkit-elements",
-  "version": "1.1.0",
+  "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.2.0"
+    "@jungherz-de/notionkit": ">=1.3.0"
   },
   "devDependencies": {
-    "@jungherz-de/notionkit": "^1.2.0",
+    "@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/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-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() {
@@ -30,6 +30,7 @@ class NkSelect extends NkFormElement {
     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/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';