@jungherz-de/notionkit-elements 1.15.0 → 1.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jungherz-de/notionkit-elements",
-  "version": "1.15.0",
+  "version": "1.16.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)",
@@ -20,6 +20,7 @@
       "import": "./dist/notionkit-elements.esm.js",
       "default": "./dist/notionkit-elements.js"
     },
+    "./esm.min.js": "./dist/notionkit-elements.esm.min.js",
     "./base.js": "./dist/components/base.js",
     "./components/*.js": "./dist/components/*.js",
     "./package.json": "./package.json"
@@ -62,10 +63,10 @@
     "dark-mode"
   ],
   "peerDependencies": {
-    "@jungherz-de/notionkit": ">=1.15.0"
+    "@jungherz-de/notionkit": ">=1.16.0"
   },
   "devDependencies": {
-    "@jungherz-de/notionkit": "^1.15.0",
+    "@jungherz-de/notionkit": "^1.16.0",
     "@playwright/test": "^1.50.0",
     "@rollup/plugin-node-resolve": "^15.0.0",
     "@rollup/plugin-terser": "^0.4.0",

package/src/base.js

@@ -60,6 +60,9 @@ if (typeof window !== 'undefined' && typeof MutationObserver !== 'undefined') {
 // Layout plumbing only: how the host box participates in the outer layout, and
 // that `hidden` keeps working. :host([hidden]) has a higher specificity than
 // :host, so it wins regardless of order. The wrapper is layout-transparent.
+// `flush` on any element drops the outer margin of its box (NotionKit
+// 1.16.0) – for a block in a flex column with a gap of its own; a whole
+// column does it for every block with --nk-block-space: 0.
 
 const hostSheets = new Map();
 
@@ -70,6 +73,7 @@ function hostSheetFor(display) {
     sheet.replaceSync(`
       :host { display: ${display}; }
       :host([hidden]) { display: none; }
+      :host([flush]) .nk-wrapper > * { margin-top: 0; margin-bottom: 0; }
       .nk-wrapper { display: contents; }
     `);
     hostSheets.set(display, sheet);

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

@@ -43,7 +43,7 @@ import { deepActiveElement } from '../../util/focus.js';
 // outside does. Put a floating calendar directly under <body>.
 const STEPS = { ArrowLeft: -1, ArrowRight: 1, ArrowUp: -7, ArrowDown: 7 };
 const floatSheet = new CSSStyleSheet();
-floatSheet.replaceSync(`:host([floating]) { display: block; position: fixed; top: 0; left: 0; z-index: 60; pointer-events: none; }`);
+floatSheet.replaceSync(`:host([floating]) { display: block; position: fixed; top: 0; left: 0; z-index: 106; pointer-events: none; }`);
 
 class NkCalendar extends NkFormElement {
   static get hostStyles() { return floatSheet; }

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

@@ -8,8 +8,10 @@ import { NkFormElement } from '../../base.js';
 // The light-DOM <option>s are copied into the shadow <select>. A
 // MutationObserver keeps the copy in step when a framework swaps them; the
 // empty string is a valid value; the live selection survives a rebuild. A
-// value set before its option exists – a framework sets properties before
-// children – waits and is applied once the option arrives.
+// value – attribute or property – whose option is not there yet waits and
+// wins over the browser's preselection once the option arrives, unless
+// someone has chosen another option in the meantime; settling on it fires
+// no nk-change.
 class NkSelect extends NkFormElement {
   static get observedAttributes() { return ['value', 'name', 'disabled', 'required', 'compact', 'wide', 'aria-label']; }
   static get observesLightDom() { return true; }
@@ -19,6 +21,7 @@ class NkSelect extends NkFormElement {
     this._forwardAll();
     this._wrapper.appendChild(this._select);
     this._defaultValue = this.getAttribute('value');
+    this._pending = this._defaultValue;
     // Children may not be parsed yet when connectedCallback runs.
     this.projectLightDom();
     requestAnimationFrame(() => this.projectLightDom());
@@ -52,11 +55,11 @@ class NkSelect extends NkFormElement {
     this._select.innerHTML = '';
     for (const node of nodes) this._select.appendChild(node.cloneNode(true));
 
-    // A value that waited for its option first; then the live selection when
-    // it survived; otherwise the value attribute; otherwise the browser
-    // default (first option / `selected`).
-    if (this._pending != null && this._applyValue(this._pending)) this._pending = null;
-    else if (!this._applyValue(previous)) this._applyValue(this.getAttribute('value'));
+    // A value that waits for its option first – it keeps waiting while the
+    // option is missing; else the live selection when it survived; else the
+    // browser default (first option / `selected`).
+    if (this._pending != null) { if (this._applyValue(this._pending)) this._pending = null; }
+    else this._applyValue(previous);
     this._syncFormValue();
   }
 
@@ -85,7 +88,8 @@ class NkSelect extends NkFormElement {
   onAttributeChanged(name) {
     if (!this._select) return;
     if (name === 'value') {
-      this._applyValue(this.getAttribute('value'));
+      const value = this.getAttribute('value');
+      this._pending = value === null || this._applyValue(value) ? null : value;
       this._syncFormValue();
       return;
     }
@@ -99,6 +103,7 @@ class NkSelect extends NkFormElement {
   }
 
   resetValue() {
+    this._pending = null;
     if (!this._applyValue(this._defaultValue)) this._select.selectedIndex = 0;
     this._syncFormValue();
   }

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

@@ -19,7 +19,7 @@ import { placeUnder } from '../../util/floating.js';
 // close it too, a switch row does not. Opened from the keyboard, focus moves
 // to the first item; closing returns it to where it was.
 const floatSheet = new CSSStyleSheet();
-floatSheet.replaceSync(`:host([floating]) { display: block; position: fixed; top: 0; left: 0; z-index: 60; pointer-events: none; }`);
+floatSheet.replaceSync(`:host([floating]) { display: block; position: fixed; top: 0; left: 0; z-index: 106; pointer-events: none; }`);
 
 class NkMenu extends NkElement {
   static get hostStyles() { return floatSheet; }

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

@@ -42,7 +42,10 @@ class NkPanel extends NkElement {
     const href = this.getAttribute('href');
     if (href) { this._box.setAttribute('href', href); this._box.target = this.getAttribute('target') || ''; }
     const cover = this.getAttribute('cover');
-    this._cover.style.display = cover === null ? 'none' : '';
+    // The band is in the tree only with `cover`: hidden, it still matched
+    // `.nk-cover + .nk-page-icon` and pulled a lone icon over the tile's edge.
+    if (cover === null) this._cover.remove();
+    else if (!this._cover.isConnected) this._box.prepend(this._cover);
     if (cover) { this._img.src = cover; if (!this._img.isConnected) this._cover.appendChild(this._img); }
     else this._img.remove();
     const icon = this.getAttribute('icon');

package/src/util/focus.js

@@ -15,7 +15,12 @@ export function unlockScroll() {
   if (locks > 0 && --locks === 0) document.documentElement.style.overflow = previousOverflow;
 }
 
-/** Makes every sibling along `el`'s ancestor chain inert (shadow hosts included); returns the undo. */
+// Floating layers under <body> that open from inside an overlay – a menu, a
+// date picker – and the tooltip and toast stay usable: made inert, a date
+// picker opened from a dialog showed but took no click.
+const LAYERS = 'nk-menu[floating], nk-calendar[floating], nk-tooltip, nk-toast';
+
+/** Makes every sibling along `el`'s ancestor chain inert (shadow hosts included), floating layers aside; returns the undo. */
 export function inertOutside(el) {
   const made = [];
   let node = el;
@@ -23,7 +28,7 @@ export function inertOutside(el) {
     const parent = node.parentNode instanceof ShadowRoot ? node.parentNode : node.parentNode;
     if (!parent) break;
     for (const sib of parent.children) {
-      if (sib === node || sib.inert || /^(SCRIPT|STYLE|LINK|TEMPLATE)$/.test(sib.tagName)) continue;
+      if (sib === node || sib.inert || /^(SCRIPT|STYLE|LINK|TEMPLATE)$/.test(sib.tagName) || sib.matches(LAYERS)) continue;
       sib.inert = true;
       made.push(sib);
     }