@jungherz-de/notionkit-elements 1.5.3 → 1.7.0

package/dist/components/nk-menu-item.js

@@ -1,11 +1,18 @@
-import { N as NkElement } from './shared/base-C3eJwHKA.js';
+import { NkElement } from './base.js';
+import '@jungherz-de/notionkit/notionkit-styles.js';
 
 // <nk-menu-item icon="✏️" shortcut="⌘E" value="rename">Rename</nk-menu-item>
 // <nk-menu-item type="separator"></nk-menu-item>   <nk-menu-item type="label">Danger</nk-menu-item>
 // <nk-menu-item icon="🗑️" danger value="delete">Delete</nk-menu-item>
+// <nk-menu-item type="switch" icon="🔡" value="small" checked>Small text</nk-menu-item>
+// <nk-menu-item type="check" icon="◉" value="open" checked>Status: Open</nk-menu-item>
 // → <div class="nk-menu-item danger"><span class="m-icon">🗑️</span>Delete<span class="m-shortcut">…</span></div>
+// A switch item carries a .nk-switch on the right, as "Small text" does in
+// Notion's page menu; a check item a ✓ where the shortcut stands, as in a
+// filter menu. A click on either flips `checked` and fires nk-change
+// { value, checked } instead of nk-select, so the menu around it stays open.
 class NkMenuItem extends NkElement {
-  static get observedAttributes() { return ['icon', 'shortcut', 'danger', 'value', 'type', 'disabled']; }
+  static get observedAttributes() { return ['icon', 'shortcut', 'danger', 'value', 'type', 'disabled', 'checked']; }
 
   render() { this._build(); }
 
@@ -18,12 +25,16 @@ class NkMenuItem extends NkElement {
       el = this.createElement('div', ['nk-menu-label']);
       el.appendChild(document.createElement('slot'));
     } else {
-      el = this.createElement('div', ['nk-menu-item'], { role: 'menuitem', tabindex: '-1' });
+      const isSwitch = type === 'switch';
+      this._check = type === 'check';
+      el = this.createElement('div', ['nk-menu-item'], { role: isSwitch || this._check ? 'menuitemcheckbox' : 'menuitem', tabindex: '-1' });
       this._icon = this.createElement('span', ['m-icon']);
       const iconSlot = this.createElement('slot', [], { name: 'icon' });
       iconSlot.appendChild(this._icon);
       this._shortcut = this.createElement('span', ['m-shortcut']);
       el.append(iconSlot, document.createElement('slot'), this._shortcut);
+      this._switch = isSwitch ? this.createElement('span', ['nk-switch'], { 'aria-hidden': 'true' }) : null;
+      if (this._switch) el.appendChild(this._switch);
     }
     if (this._el) { this._el.removeEventListener('click', this._onClick); this._el.replaceWith(el); } else this._wrapper.appendChild(el);
     this._el = el;
@@ -41,6 +52,12 @@ class NkMenuItem extends NkElement {
     this._shortcut.style.display = sc ? '' : 'none';
     this._el.classList.toggle('danger', this.getBoolAttr('danger'));
     this._el.setAttribute('aria-disabled', this.getBoolAttr('disabled') ? 'true' : 'false');
+    if (this._switch || this._check) {
+      const on = this.getBoolAttr('checked') ? 'true' : 'false';
+      this._el.setAttribute('aria-checked', on);
+      if (this._switch) this._switch.setAttribute('aria-checked', on);
+      if (this._check) { this._shortcut.textContent = on === 'true' ? '✓' : ''; this._shortcut.style.display = ''; }
+    }
   }
 
   setupEvents() {
@@ -52,6 +69,11 @@ class NkMenuItem extends NkElement {
 
   select() {
     if (!this._el.classList.contains('nk-menu-item') || this.getBoolAttr('disabled')) return;
+    if (this._switch || this._check) {
+      this.checked = !this.checked;
+      this.emit('nk-change', { value: this.value, checked: this.checked, item: this });
+      return;
+    }
     this.emit('nk-select', { value: this.value, label: this.textContent.trim(), item: this });
   }
 
@@ -59,6 +81,8 @@ class NkMenuItem extends NkElement {
   focus(o) { this._el?.focus(o); }
   get selectable() { return this._el?.classList.contains('nk-menu-item') && !this.getBoolAttr('disabled'); }
 
+  get checked() { return this.getBoolAttr('checked'); }
+  set checked(v) { this.setBoolAttr('checked', v); }
   get value() { return this.getAttribute('value') ?? this.textContent.trim(); }
   set value(v) { this.setAttribute('value', v); }
 }

package/dist/components/nk-menu.js

@@ -1,4 +1,6 @@
-import { N as NkElement } from './shared/base-C3eJwHKA.js';
+import { NkElement } from './base.js';
+import { d as deepActiveElement } from './shared/focus-BNAChOXO.js';
+import '@jungherz-de/notionkit/notionkit-styles.js';
 
 // <nk-menu>
 //   <nk-menu-item type="label">Page</nk-menu-item>
@@ -8,13 +10,79 @@ import { N as NkElement } from './shared/base-C3eJwHKA.js';
 // </nk-menu>
 // → <div class="nk-pop nk-menu" role="menu">…</div>
 // ↑↓ move between items, Enter selects, nk-select bubbles from the item.
+//
+// <nk-menu floating sheet> is a menu over the page (NotionKit 1.7.0): it
+// fades in like the palette when `open` is set and is a bottom sheet on a
+// phone. The host becomes the fixed box you position – show(anchor) puts it
+// under the anchor, right edges aligned (align="start": left edges). A tap
+// outside closes it and reaches nothing else; Escape and a chosen item
+// 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; z-index: 60; pointer-events: none; }`);
+
+/** The border box of an element, or of the first descendant with one (display: contents hosts). */
+function boxOf(el) {
+  if (el.getClientRects().length) return el.getBoundingClientRect();
+  for (const child of [...(el.shadowRoot?.children ?? []), ...el.children]) {
+    const r = boxOf(child);
+    if (r.width || r.height) return r;
+  }
+  return el.getBoundingClientRect();
+}
+
 class NkMenu extends NkElement {
+  static get hostStyles() { return floatSheet; }
+  static get observedAttributes() { return ['floating', 'sheet', 'open', 'align']; }
+
   render() {
     this._box = this.createElement('div', ['nk-pop', 'nk-menu'], { role: 'menu' });
     this._box.appendChild(document.createElement('slot'));
     this._wrapper.appendChild(this._box);
+    this._syncMode();
+  }
+
+  _syncMode() {
+    this._box.classList.toggle('floating', this.getBoolAttr('floating'));
+    this._box.classList.toggle('sheet', this.getBoolAttr('sheet'));
+    this._box.classList.toggle('open', this.getBoolAttr('open'));
   }
 
+  onAttributeChanged(name) {
+    this._syncMode();
+    if (name !== 'open') return;
+    const open = this.getBoolAttr('open');
+    // aria-expanded belongs on the control itself, inside a host such as <nk-btn>.
+    if (this._anchor) (this._anchor.shadowRoot?.querySelector('button, a[href]') ?? this._anchor).setAttribute('aria-expanded', String(open));
+    if (open) {
+      this._returnFocus = deepActiveElement();
+      if (this._returnFocus?.matches(':focus-visible')) requestAnimationFrame(() => this.focusFirst());
+      document.addEventListener('click', this._onOutside, true);
+    } else {
+      document.removeEventListener('click', this._onOutside, true);
+      const back = this._returnFocus;
+      this._returnFocus = null;
+      if (back?.isConnected && this.contains(document.activeElement)) back.focus({ preventScroll: true });
+    }
+    this.emit('nk-toggle', { open });
+  }
+
+  /** Opens under `anchor` (any element, display: contents hosts included). */
+  show(anchor) {
+    if (anchor) {
+      this._anchor = anchor;
+      const r = boxOf(anchor);
+      this.style.top = `${r.bottom + 6}px`;
+      if (this.getAttribute('align') === 'start') { this.style.left = `${r.left}px`; this.style.right = ''; }
+      else { this.style.right = `${Math.max(8, innerWidth - r.right)}px`; this.style.left = ''; }
+    }
+    this.setBoolAttr('open', true);
+  }
+  close() { this.setBoolAttr('open', false); }
+  toggle(anchor) { this.getBoolAttr('open') ? this.close() : this.show(anchor); }
+  get open() { return this.getBoolAttr('open'); }
+  set open(v) { this.setBoolAttr('open', v); }
+
   get items() { return [...this.querySelectorAll(':scope > nk-menu-item')].filter(i => i.selectable); }
 
   setupEvents() {
@@ -32,9 +100,27 @@ class NkMenu extends NkElement {
       }
     };
     this.addEventListener('keydown', this._onKey);
+    // Floating: outside taps close and go nowhere else; Escape and a chosen item close.
+    this._onOutside = (e) => {
+      const path = e.composedPath();
+      if (path.includes(this) || (this._anchor && path.includes(this._anchor))) return;
+      e.preventDefault(); e.stopPropagation();
+      this.close();
+    };
+    // Captured, so a menu inside a modal or sheet closes before they do.
+    this._onEscape = (e) => { if (e.key === 'Escape' && this.getBoolAttr('floating') && this.getBoolAttr('open')) { e.stopPropagation(); this.close(); } };
+    this._onSelect = () => { if (this.getBoolAttr('floating')) this.close(); };
+    document.addEventListener('keydown', this._onEscape, true);
+    this.addEventListener('nk-select', this._onSelect);
+    if (this.getBoolAttr('open')) document.addEventListener('click', this._onOutside, true);
   }
 
-  teardownEvents() { this.removeEventListener('keydown', this._onKey); }
+  teardownEvents() {
+    this.removeEventListener('keydown', this._onKey);
+    document.removeEventListener('keydown', this._onEscape, true);
+    this.removeEventListener('nk-select', this._onSelect);
+    document.removeEventListener('click', this._onOutside, true);
+  }
 
   /** Focuses the first item (called by a popover when it opens). */
   focusFirst() { this.items[0]?.focus(); }

package/dist/components/nk-modal.js

@@ -1,5 +1,6 @@
-import { N as NkElement } from './shared/base-C3eJwHKA.js';
-import { l as lockScroll, i as inertOutside, f as firstFocusable, u as unlockScroll } from './shared/focus-DXrK9oLe.js';
+import { NkElement } from './base.js';
+import { l as lockScroll, i as inertOutside, f as firstFocusable, u as unlockScroll } from './shared/focus-BNAChOXO.js';
+import '@jungherz-de/notionkit/notionkit-styles.js';
 
 // <nk-modal id="settings">
 //   <nk-settings-user slot="user" name="…" mail="…"></nk-settings-user>

package/dist/components/nk-model-card.js

@@ -1,4 +1,5 @@
-import { a as NkFormElement } from './shared/base-C3eJwHKA.js';
+import { NkFormElement } from './base.js';
+import '@jungherz-de/notionkit/notionkit-styles.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>

package/dist/components/nk-page-actions.js

@@ -1,4 +1,5 @@
-import { N as NkElement } from './shared/base-C3eJwHKA.js';
+import { NkElement } from './base.js';
+import '@jungherz-de/notionkit/notionkit-styles.js';
 
 // <nk-page-actions><span>👤 Ada</span><span>📅 12 May</span><span>🏷️ <nk-tag color="purple">Design</nk-tag></span></nk-page-actions>
 // → <div class="nk-page-meta">…</div>  – the meta row under the title

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

@@ -1,12 +1,17 @@
-import { N as NkElement } from './shared/base-C3eJwHKA.js';
+import { NkElement } from './base.js';
+import '@jungherz-de/notionkit/notionkit-styles.js';
 
 // <nk-page-cover slot="cover"></nk-page-cover>            → the token gradient
-// <nk-page-cover slot="cover" src="cover.jpg"></nk-page-cover>  → an image
+// <nk-page-cover slot="cover" src="cover.jpg" position="center 30%"></nk-page-cover>  → a picture
+// → <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.
 class NkPageCover extends NkElement {
-  static get observedAttributes() { return ['src']; }
+  static get observedAttributes() { return ['src', 'position']; }
 
   render() {
     this._cover = this.createElement('div', ['nk-cover']);
+    this._img = this.createElement('img', [], { alt: '' });
     this._wrapper.appendChild(this._cover);
     this._sync();
   }
@@ -14,14 +19,10 @@ class NkPageCover extends NkElement {
   _sync() {
     const src = this.getAttribute('src');
     if (src) {
-      this._cover.style.backgroundImage = `url("${src}")`;
-      this._cover.style.backgroundSize = 'cover';
-      this._cover.style.backgroundPosition = 'center';
-    } else {
-      this._cover.style.backgroundImage = '';
-      this._cover.style.backgroundSize = '';
-      this._cover.style.backgroundPosition = '';
-    }
+      this._img.src = src;
+      this._img.style.objectPosition = this.getAttribute('position') || '';
+      if (!this._img.isConnected) this._cover.appendChild(this._img);
+    } else this._img.remove();
   }
 
   onAttributeChanged() { this._sync(); }

package/dist/components/nk-page-title.js

@@ -1,4 +1,5 @@
-import { N as NkElement } from './shared/base-C3eJwHKA.js';
+import { NkElement } from './base.js';
+import '@jungherz-de/notionkit/notionkit-styles.js';
 
 // <nk-page-title>NotionKit MVP</nk-page-title>          → <h1 class="nk-page-title">
 // <nk-page-title editable placeholder="Untitled">…</nk-page-title>

package/dist/components/nk-page.js

@@ -1,6 +1,7 @@
-import { N as NkElement } from './shared/base-C3eJwHKA.js';
+import { NkElement } from './base.js';
+import '@jungherz-de/notionkit/notionkit-styles.js';
 
-// <nk-page icon="🚀" cover>
+// <nk-page icon="🚀" cover full small>
 //   <nk-page-title>NotionKit MVP</nk-page-title>
 //   <nk-page-actions>…</nk-page-actions>
 //   <p class="lead">…</p>
@@ -12,9 +13,10 @@ import { N as NkElement } from './shared/base-C3eJwHKA.js';
 // The host is display:contents, so .nk-page-scroll is the flex child of
 // .nk-main that scrolls. `narrow` drops the scroll wrapper for pages that are
 // the document itself (landing / docs skeleton). The page icon is rendered
-// here because its ::slotted twin is keyed on the parent (.nk-page).
+// here because its ::slotted twin is keyed on the parent (.nk-page). `full` and
+// `small` are Notion's page options – full width, 14px text – set on the page.
 class NkPage extends NkElement {
-  static get observedAttributes() { return ['icon', 'cover', 'narrow']; }
+  static get observedAttributes() { return ['icon', 'cover', 'narrow', 'full', 'small']; }
 
   render() {
     this._page = this.createElement('div', ['nk-page']);
@@ -51,6 +53,8 @@ class NkPage extends NkElement {
     // (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);
+    this._page.classList.toggle('full', this.getBoolAttr('full'));
+    this._page.classList.toggle('small', this.getBoolAttr('small'));
   }
 
   setupEvents() {
@@ -72,6 +76,10 @@ class NkPage extends NkElement {
   set icon(v) { v == null ? this.removeAttribute('icon') : this.setAttribute('icon', v); }
   get cover() { return this.getBoolAttr('cover'); }
   set cover(v) { this.setBoolAttr('cover', v); }
+  get full() { return this.getBoolAttr('full'); }
+  set full(v) { this.setBoolAttr('full', v); }
+  get small() { return this.getBoolAttr('small'); }
+  set small(v) { this.setBoolAttr('small', v); }
 }
 
 customElements.define('nk-page', NkPage);

package/dist/components/nk-panel.js

@@ -0,0 +1,61 @@
+import { NkElement } from './base.js';
+import '@jungherz-de/notionkit/notionkit-styles.js';
+
+// <nk-panel title="Weekly review"><p>Three pages changed.</p></nk-panel>
+// <nk-panel href="/roadmap" cover="covers/aurora.svg" icon="🚀" title="Roadmap"><p>2 min ago</p></nk-panel>
+// → <a class="nk-panel" href="/roadmap"><div class="nk-cover"><img src="…" alt=""></div>
+//      <div class="nk-page-icon">🚀</div><h3>Roadmap</h3>…</a>
+// `cover` without a value draws the token gradient, with one a picture; `icon`
+// overlaps the cover as on a page – a page tile, as on Notion's Home. With
+// `href` the panel is a link. `title` is the heading, never a tooltip.
+class NkPanel extends NkElement {
+  static get observedAttributes() { return ['title', 'icon', 'cover', 'href', 'target']; }
+
+  render() {
+    this._cover = this.createElement('div', ['nk-cover']);
+    this._img = this.createElement('img', [], { alt: '' });
+    this._icon = this.createElement('div', ['nk-page-icon']);
+    this._heading = document.createElement('h3');
+    this._slot = document.createElement('slot');
+    this.takeTitle();
+    this._build();
+  }
+
+  _build() {
+    const href = this.getAttribute('href');
+    const box = this.createElement(href ? 'a' : 'div', ['nk-panel']);
+    box.append(this._cover, this._icon, this._heading, this._slot);
+    this._wrapper.replaceChildren(box);
+    this._box = box;
+    this._sync();
+  }
+
+  _sync() {
+    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' : '';
+    if (cover) { this._img.src = cover; if (!this._img.isConnected) this._cover.appendChild(this._img); }
+    else this._img.remove();
+    const icon = this.getAttribute('icon');
+    this._icon.textContent = icon || '';
+    this._icon.style.display = icon ? '' : 'none';
+    this._heading.textContent = this._titleText || '';
+    this._heading.style.display = this._titleText ? '' : 'none';
+  }
+
+  onAttributeChanged(name, _old, value) {
+    if (name === 'title' && !this.takeTitle(value)) return;
+    if (name === 'href' && (value === null) !== (this._box.localName === 'div')) { this._build(); return; }
+    this._sync();
+  }
+
+  get title() { return this._titleText ?? ''; }
+  set title(v) { this._titleText = v == null ? '' : String(v); if (this._initialized) this._sync(); }
+  get href() { return this.getAttribute('href'); }
+  set href(v) { v == null ? this.removeAttribute('href') : this.setAttribute('href', v); }
+}
+
+customElements.define('nk-panel', NkPanel);
+
+export { NkPanel };

package/dist/components/nk-panels.js

@@ -0,0 +1,18 @@
+import { NkElement } from './base.js';
+import '@jungherz-de/notionkit/notionkit-styles.js';
+
+// <nk-panels><nk-panel …></nk-panel><nk-panel …></nk-panel></nk-panels>
+// → <div class="nk-panels">…</div>: columns of at least 200px that share the
+// row and fall to one on a phone. The <nk-panel> hosts are display: contents,
+// so each .nk-panel is a cell of this grid.
+class NkPanels extends NkElement {
+  render() {
+    const grid = this.createElement('div', ['nk-panels']);
+    grid.appendChild(document.createElement('slot'));
+    this._wrapper.appendChild(grid);
+  }
+}
+
+customElements.define('nk-panels', NkPanels);
+
+export { NkPanels };

package/dist/components/nk-pop.js

@@ -1,4 +1,5 @@
-import { N as NkElement } from './shared/base-C3eJwHKA.js';
+import { NkElement } from './base.js';
+import '@jungherz-de/notionkit/notionkit-styles.js';
 
 // <nk-pop placement="bottom-start">
 //   <nk-btn slot="trigger" variant="secondary">Options</nk-btn>

package/dist/components/nk-profile-row.js

@@ -1,4 +1,5 @@
-import { N as NkElement } from './shared/base-C3eJwHKA.js';
+import { NkElement } from './base.js';
+import '@jungherz-de/notionkit/notionkit-styles.js';
 
 // <nk-profile-row avatar="MK"><nk-btn variant="secondary" small>Change photo</nk-btn></nk-profile-row>
 // → <div class="nk-profile-row"><div class="big-avatar">MK</div>…</div>

package/dist/components/nk-progress.js

@@ -1,9 +1,11 @@
-import { N as NkElement } from './shared/base-C3eJwHKA.js';
+import { NkElement } from './base.js';
+import '@jungherz-de/notionkit/notionkit-styles.js';
 
 // <nk-progress value="72" label="72%"></nk-progress>
+// <nk-progress value="72" label="72 %" wide></nk-progress>   → fills its row, the label stays beside it
 // The bar is `.nk-progress > i` — a child combinator, so both nodes live here.
 class NkProgress extends NkElement {
-  static get observedAttributes() { return ['value', 'max', 'label']; }
+  static get observedAttributes() { return ['value', 'max', 'label', 'wide']; }
 
   render() {
     this._bar = this.createElement('span', ['nk-progress'], { role: 'progressbar' });
@@ -22,6 +24,7 @@ class NkProgress extends NkElement {
     const max = Number(this.getAttribute('max')) || 100;
     const value = Math.min(max, Math.max(0, Number(this.getAttribute('value')) || 0));
     this._fill.style.width = `${(value / max) * 100}%`;
+    this._bar.classList.toggle('wide', this.getBoolAttr('wide'));
     this._bar.setAttribute('aria-valuenow', value);
     this._bar.setAttribute('aria-valuemin', 0);
     this._bar.setAttribute('aria-valuemax', max);

package/dist/components/nk-prop.js

@@ -0,0 +1,54 @@
+import { NkElement } from './base.js';
+import '@jungherz-de/notionkit/notionkit-styles.js';
+
+// <nk-prop label="Due" icon="📅">2 June 2026</nk-prop>
+// → <div class="nk-prop"><dt class="p-name"><span class="p-icon">📅</span>Due</dt><dd class="p-value">2 June 2026</dd></div>
+// The value is the element's content – tags, an avatar and a name, a date, a
+// <nk-progress wide>. slot="icon" replaces the icon glyph. A click on the
+// name or the value fires nk-action { action: 'name' | 'value', label }, the
+// moment Notion opens the property's editor.
+class NkProp extends NkElement {
+  static get observedAttributes() { return ['label', 'icon']; }
+
+  render() {
+    this._row = this.createElement('div', ['nk-prop']);
+    this._name = this.createElement('dt', ['p-name']);
+    this._icon = this.createElement('span', ['p-icon']);
+    const iconSlot = this.createElement('slot', [], { name: 'icon' });
+    iconSlot.appendChild(this._icon);
+    this._label = document.createTextNode('');
+    this._name.append(iconSlot, this._label);
+    this._value = this.createElement('dd', ['p-value']);
+    this._value.appendChild(document.createElement('slot'));
+    this._row.append(this._name, this._value);
+    this._wrapper.appendChild(this._row);
+    this._sync();
+  }
+
+  _sync() {
+    const icon = this.getAttribute('icon');
+    this._icon.textContent = icon || '';
+    this._icon.style.display = icon ? '' : 'none';
+    this._label.data = this.getAttribute('label') || '';
+  }
+
+  setupEvents() {
+    this._onClick = (e) => {
+      const part = e.composedPath().includes(this._name) ? 'name' : 'value';
+      this.emit('nk-action', { action: part, label: this.label });
+    };
+    this._row.addEventListener('click', this._onClick);
+  }
+
+  teardownEvents() { this._row?.removeEventListener('click', this._onClick); }
+  onAttributeChanged() { this._sync(); }
+
+  get label() { return this.getAttribute('label') || ''; }
+  set label(v) { this.setAttribute('label', v); }
+  get icon() { return this.getAttribute('icon'); }
+  set icon(v) { v == null ? this.removeAttribute('icon') : this.setAttribute('icon', v); }
+}
+
+customElements.define('nk-prop', NkProp);
+
+export { NkProp };

package/dist/components/nk-props.js

@@ -0,0 +1,21 @@
+import { NkElement } from './base.js';
+import '@jungherz-de/notionkit/notionkit-styles.js';
+
+// <nk-props>
+//   <nk-prop label="Status" icon="◉"><nk-tag color="blue">In progress</nk-tag></nk-prop>
+//   <nk-prop label="Owner" icon="👤"><nk-avatar size="small">MK</nk-avatar>Marcel Karas</nk-prop>
+// </nk-props>
+// → <dl class="nk-props">…</dl> – the properties under a page title. The rows
+// are <nk-prop> hosts with display: contents, so each .nk-prop is a row of
+// this list.
+class NkProps extends NkElement {
+  render() {
+    const list = this.createElement('dl', ['nk-props']);
+    list.appendChild(document.createElement('slot'));
+    this._wrapper.appendChild(list);
+  }
+}
+
+customElements.define('nk-props', NkProps);
+
+export { NkProps };

package/dist/components/nk-quote.js

@@ -1,4 +1,5 @@
-import { N as NkElement } from './shared/base-C3eJwHKA.js';
+import { NkElement } from './base.js';
+import '@jungherz-de/notionkit/notionkit-styles.js';
 
 // <nk-quote cite="Ada Lovelace">The Analytical Engine weaves…</nk-quote>
 // .q-cite has no ::slotted() twin, so the citation is rendered here.

package/dist/components/nk-radio.js

@@ -1,4 +1,5 @@
-import { a as NkFormElement } from './shared/base-C3eJwHKA.js';
+import { NkFormElement } from './base.js';
+import '@jungherz-de/notionkit/notionkit-styles.js';
 
 // <nk-radio name="style" value="concise" checked>Concise</nk-radio>
 // → <label class="nk-check"><input type="radio"> Concise</label>

package/dist/components/nk-section-label.js

@@ -1,4 +1,5 @@
-import { N as NkElement } from './shared/base-C3eJwHKA.js';
+import { NkElement } from './base.js';
+import '@jungherz-de/notionkit/notionkit-styles.js';
 
 // <nk-section-label addable>Favourites</nk-section-label>
 // → <div class="nk-section-label">Favourites <span class="plus">＋</span></div>

package/dist/components/nk-segmented.js

@@ -1,4 +1,5 @@
-import { a as NkFormElement } from './shared/base-C3eJwHKA.js';
+import { NkFormElement } from './base.js';
+import '@jungherz-de/notionkit/notionkit-styles.js';
 
 // <nk-segmented name="range" value="week">
 //   <button value="week">Week</button><button value="month">Month</button>
@@ -6,6 +7,9 @@ import { a as NkFormElement } from './shared/base-C3eJwHKA.js';
 // → <div class="nk-segmented">…</div> with .active on the chosen button.
 // The buttons stay in the light DOM (their look comes from the ::slotted
 // twins); the element sets type/role, moves .active and submits the value.
+// With `scroll` the chosen option is kept in view – after the first layout,
+// on every change and when the row's width changes – by scrolling the row
+// alone, never the page, by a relative distance, so right-to-left works too.
 const KEYS = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 };
 
 class NkSegmented extends NkFormElement {
@@ -49,6 +53,19 @@ class NkSegmented extends NkFormElement {
     }
     this._value = value;
     this.setFormValue(value);
+    this._reveal(this._revealed ? 'smooth' : 'instant');
+  }
+
+  /** Scrolls the row the least distance that shows the chosen button whole. */
+  _reveal(behavior) {
+    if (!this.getBoolAttr('scroll') || !this._box?.clientWidth) return;
+    const btn = this.buttons.find(b => b.classList.contains('active'));
+    if (!btn) return;
+    const row = this._box.getBoundingClientRect(), r = btn.getBoundingClientRect(), pad = 8;
+    const delta = r.left < row.left ? r.left - row.left - pad : r.right > row.right ? r.right - row.right + pad : 0;
+    const smooth = behavior === 'smooth' && !matchMedia('(prefers-reduced-motion: reduce)').matches;
+    if (delta) this._box.scrollBy({ left: delta, behavior: smooth ? 'smooth' : 'instant' });
+    this._revealed = true;
   }
 
   setupEvents() {
@@ -72,6 +89,8 @@ class NkSegmented extends NkFormElement {
     this._slot.addEventListener('slotchange', this._onSlot);
     this.addEventListener('click', this._onClick);
     this.addEventListener('keydown', this._onKey);
+    this._resize = new ResizeObserver(() => this._reveal('instant'));
+    this._resize.observe(this._box);
     this._sync();
   }
 
@@ -79,6 +98,7 @@ class NkSegmented extends NkFormElement {
     this._slot?.removeEventListener('slotchange', this._onSlot);
     this.removeEventListener('click', this._onClick);
     this.removeEventListener('keydown', this._onKey);
+    this._resize?.disconnect();
   }
 
   _choose(value) {

package/dist/components/nk-select.js

@@ -1,4 +1,5 @@
-import { a as NkFormElement } from './shared/base-C3eJwHKA.js';
+import { NkFormElement } from './base.js';
+import '@jungherz-de/notionkit/notionkit-styles.js';
 
 // <nk-select name="role" value="editor">
 //   <option value="viewer">Viewer</option>

package/dist/components/nk-settings-pane.js

@@ -1,4 +1,5 @@
-import { N as NkElement } from './shared/base-C3eJwHKA.js';
+import { NkElement } from './base.js';
+import '@jungherz-de/notionkit/notionkit-styles.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().

package/dist/components/nk-settings-user.js

@@ -1,4 +1,5 @@
-import { N as NkElement } from './shared/base-C3eJwHKA.js';
+import { NkElement } from './base.js';
+import '@jungherz-de/notionkit/notionkit-styles.js';
 
 // <nk-settings-user slot="user" name="Marcel Karas" mail="marcel@…" avatar="MK"></nk-settings-user>
 // → <div class="nk-settings-user"><div class="avatar">MK</div><div class="u-text"><div class="name">…</div><div class="mail">…</div></div></div>