@jungherz-de/notionkit-elements 1.12.0 → 1.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jungherz-de/notionkit-elements",
-  "version": "1.12.0",
+  "version": "1.13.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)",
@@ -62,10 +62,10 @@
     "dark-mode"
   ],
   "peerDependencies": {
-    "@jungherz-de/notionkit": ">=1.12.0"
+    "@jungherz-de/notionkit": ">=1.13.0"
   },
   "devDependencies": {
-    "@jungherz-de/notionkit": "^1.12.0",
+    "@jungherz-de/notionkit": "^1.13.0",
     "@playwright/test": "^1.50.0",
     "@rollup/plugin-node-resolve": "^15.0.0",
     "@rollup/plugin-terser": "^0.4.0",

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

@@ -5,6 +5,8 @@ import { NkElement } from '../../base.js';
 // → <div class="nk-cover"><img src="cover.jpg" alt=""></div>: the picture fills
 // the band, cropped rather than stretched; `position` moves the crop, as
 // Notion's "Reposition" does. The gradient stays underneath while it loads.
+// The band is as tall as the token --nk-cover-height (200px), which reaches
+// the shadow root: style="--nk-cover-height: 30vh" sets one cover.
 class NkPageCover extends NkElement {
   static get observedAttributes() { return ['src', 'position']; }
 

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

@@ -20,9 +20,9 @@ class NkPage extends NkElement {
   render() {
     this._page = this.createElement('div', ['nk-page']);
     this._icon = this.createElement('div', ['nk-page-icon'], { role: 'button', title: 'Change icon' });
-    const iconSlot = this.createElement('slot', [], { name: 'icon' });
-    iconSlot.appendChild(this._icon);
-    this._page.appendChild(iconSlot);
+    this._iconSlot = this.createElement('slot', [], { name: 'icon' });
+    this._iconSlot.appendChild(this._icon);
+    this._page.appendChild(this._iconSlot);
     this._page.appendChild(document.createElement('slot'));
     this._cover = this.createElement('div', ['nk-cover']);
     this._coverSlot = this.createElement('slot', [], { name: 'cover' });
@@ -48,11 +48,14 @@ class NkPage extends NkElement {
     if (this._icon.textContent !== icon) this._icon.textContent = icon;
     this._icon.style.display = icon ? '' : 'none';
     this._cover.style.display = this.getBoolAttr('cover') ? '' : 'none';
-    // `covered` is the stylesheet's twin of `.nk-cover + .nk-page`: the icon
-    // overlaps the cover and the page drops its top padding. Without a cover
-    // (attribute or a slotted nk-page-cover) the icon sits in the padding.
-    const slotted = this._coverSlot.assignedNodes().some(n => n.nodeType === Node.ELEMENT_NODE || n.data.trim());
-    this._page.classList.toggle('covered', this.getBoolAttr('cover') || slotted);
+    // `covered` is the stylesheet's twin of `.nk-cover + .nk-page` with an
+    // icon: the icon overlaps the cover and the page drops its top padding.
+    // Without a cover (attribute or a slotted nk-page-cover) the icon sits in
+    // the padding; without an icon (attribute or slot="icon") the page keeps
+    // it, so the title never touches the cover (NotionKit 1.13.0).
+    const filled = slot => slot.assignedNodes().some(n => n.nodeType === Node.ELEMENT_NODE || n.data.trim());
+    const covered = this.getBoolAttr('cover') || filled(this._coverSlot), iconed = !!icon || filled(this._iconSlot);
+    this._page.classList.toggle('covered', covered && iconed);
     this._page.classList.toggle('full', this.getBoolAttr('full'));
     this._page.classList.toggle('small', this.getBoolAttr('small'));
   }
@@ -62,10 +65,15 @@ class NkPage extends NkElement {
     this._onCover = () => this._sync();
     this._icon.addEventListener('click', this._onIcon);
     this._coverSlot.addEventListener('slotchange', this._onCover);
+    this._iconSlot.addEventListener('slotchange', this._onCover);
     this._sync();
   }
 
-  teardownEvents() { this._icon?.removeEventListener('click', this._onIcon); this._coverSlot?.removeEventListener('slotchange', this._onCover); }
+  teardownEvents() {
+    this._icon?.removeEventListener('click', this._onIcon);
+    this._coverSlot?.removeEventListener('slotchange', this._onCover);
+    this._iconSlot?.removeEventListener('slotchange', this._onCover);
+  }
 
   onAttributeChanged(name) {
     if (name === 'narrow') this._build();