@jungherz-de/notionkit-elements 1.5.3 → 1.7.0

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

@@ -1,4 +1,5 @@
 import { NkElement } from '../../base.js';
+import { deepActiveElement } from '../../util/focus.js';
 
 // <nk-menu>
 //   <nk-menu-item type="label">Page</nk-menu-item>
@@ -8,13 +9,79 @@ import { NkElement } from '../../base.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 +99,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/src/components/overlays/nk-sheet.js

@@ -0,0 +1,95 @@
+import { NkElement } from '../../base.js';
+import { lockScroll, unlockScroll, inertOutside, firstFocusable, deepActiveElement } from '../../util/focus.js';
+
+// <nk-sheet id="more" title="More">
+//   <nk-tree manual>
+//     <nk-section-label>Favourites</nk-section-label>
+//     <nk-tree-item icon="🚀">NotionKit MVP</nk-tree-item>
+//   </nk-tree>
+// </nk-sheet>
+// → <div class="nk-sheet-backdrop open"><div class="nk-sheet" role="dialog">
+//     <div class="sh-grabber"></div><div class="sh-title">More</div>…</div></div>
+//
+// A bottom sheet (NotionKit 1.7.0) with nk-modal's contract: show(), close()
+// and toggle(), Escape and the backdrop close it, focus moves in and back
+// out, the page behind is scroll-locked and inert. It lies above the tab
+// bar; rows inside are 40px high. `title` is the heading shown under the
+// grabber and the dialog's name, never a tooltip – see NkElement.takeTitle().
+// Choosing a row does not close the sheet – the app decides (nk-select
+// bubbles out). Put the element directly under <body>: a transformed
+// ancestor would trap the fixed backdrop.
+class NkSheet extends NkElement {
+  static get observedAttributes() { return ['open', 'title']; }
+
+  render() {
+    this.takeTitle();
+    this._backdrop = this.createElement('div', ['nk-sheet-backdrop']);
+    this._backdrop.inert = true;
+    this._box = this.createElement('div', ['nk-sheet'], { role: 'dialog', 'aria-modal': 'true', tabindex: '-1' });
+    this._heading = this.createElement('div', ['sh-title'], { id: 'title' });
+    this._box.append(this.createElement('div', ['sh-grabber']), this._heading, document.createElement('slot'));
+    this._backdrop.appendChild(this._box);
+    this._wrapper.appendChild(this._backdrop);
+    this._syncTitle();
+    this._syncOpen();
+  }
+
+  _syncTitle() {
+    const text = this._titleText || '';
+    this._heading.textContent = text;
+    this._heading.hidden = !text;
+    if (text) this._box.setAttribute('aria-labelledby', 'title');
+    else this._box.removeAttribute('aria-labelledby');
+  }
+
+  _syncOpen() {
+    const open = this.getBoolAttr('open');
+    this._backdrop.classList.toggle('open', open);
+    this._backdrop.inert = !open;
+    if (open === this._wasOpen) return;
+    this._wasOpen = open;
+    if (open) {
+      this._returnFocus = deepActiveElement();
+      lockScroll();
+      this._undoInert = inertOutside(this);
+      requestAnimationFrame(() => (firstFocusable(this) || this._box).focus({ preventScroll: true }));
+    } else {
+      unlockScroll();
+      this._undoInert?.(); this._undoInert = null;
+      const back = this._returnFocus;
+      if (back && typeof back.focus === 'function' && back.isConnected) back.focus({ preventScroll: true });
+      this._returnFocus = null;
+    }
+  }
+
+  setupEvents() {
+    this._onBackdrop = (e) => { if (e.target === this._backdrop) this.close(); };
+    this._onKey = (e) => { if (e.key === 'Escape' && this.getBoolAttr('open')) { e.stopPropagation(); this.close(); } };
+    this._backdrop.addEventListener('click', this._onBackdrop);
+    document.addEventListener('keydown', this._onKey);
+  }
+
+  teardownEvents() {
+    this._backdrop?.removeEventListener('click', this._onBackdrop);
+    document.removeEventListener('keydown', this._onKey);
+    if (this._wasOpen) { unlockScroll(); this._undoInert?.(); this._undoInert = null; this._wasOpen = false; }
+  }
+
+  onAttributeChanged(name, oldValue, value) {
+    if (name === 'title') { if (this.takeTitle(value)) this._syncTitle(); return; }
+    this._syncOpen();
+    this.emit('nk-toggle', { open: this.getBoolAttr('open') });
+  }
+
+  show() { this.setBoolAttr('open', true); }
+  close() { this.setBoolAttr('open', false); }
+  toggle() { this.setBoolAttr('open', !this.getBoolAttr('open')); }
+
+  get open() { return this.getBoolAttr('open'); }
+  set open(v) { this.setBoolAttr('open', v); }
+  get title() { return this._titleText ?? ''; }
+  set title(v) { this._titleText = v == null ? '' : String(v); if (this._initialized) this._syncTitle(); }
+}
+
+customElements.define('nk-sheet', NkSheet);
+export { NkSheet };

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

@@ -0,0 +1,55 @@
+import { NkElement } from '../../base.js';
+import { paintAvatar, initialsOf } from '../../util/avatar.js';
+
+// <nk-avatar>MK</nk-avatar>                       → <span class="nk-avatar">MK</span>
+// <nk-avatar size="small" color="green">SL</nk-avatar>
+// <nk-avatar name="Ada Lovelace" size="large"></nk-avatar>   → initials "AL"
+// <nk-avatar src="ada.jpg" name="Ada Lovelace" size="xlarge"></nk-avatar>
+// <nk-avatar square>A</nk-avatar>                  → a workspace icon
+// size: small (20px) · default 24px · large (32px) · xlarge (56px). color: one
+// of Notion's nine names, or any CSS background. Without content the initials
+// come from `name`; with `src` a photo fills the circle and `name` is its alt.
+class NkAvatar extends NkElement {
+  static get observedAttributes() { return ['size', 'color', 'square', 'src', 'name']; }
+
+  render() {
+    this._box = this.createElement('span', ['nk-avatar']);
+    this._slot = document.createElement('slot');
+    this._initials = document.createTextNode('');
+    this._slot.appendChild(this._initials);
+    this._img = this.createElement('img', [], { alt: '' });
+    this._box.appendChild(this._slot);
+    this._wrapper.appendChild(this._box);
+    this._sync();
+  }
+
+  _sync() {
+    const size = this.getAttribute('size');
+    for (const s of ['small', 'large', 'xlarge']) this._box.classList.toggle(s, s === size);
+    this._box.classList.toggle('square', this.getBoolAttr('square'));
+    paintAvatar(this._box, this.getAttribute('color'));
+    const name = this.getAttribute('name');
+    this._initials.data = initialsOf(name);
+    const src = this.getAttribute('src');
+    if (src) {
+      this._img.src = src;
+      this._img.alt = name || '';
+      if (this._slot.isConnected) this._slot.replaceWith(this._img);
+    } else if (this._img.isConnected) this._img.replaceWith(this._slot);
+    // A picture or initials with a name speak for themselves; a bare glyph is decoration.
+    if (name && !src) { this._box.setAttribute('role', 'img'); this._box.setAttribute('aria-label', name); }
+    else { this._box.removeAttribute('role'); this._box.removeAttribute('aria-label'); }
+  }
+
+  onAttributeChanged() { this._sync(); }
+
+  get size() { return this.getAttribute('size'); }
+  set size(v) { v == null ? this.removeAttribute('size') : this.setAttribute('size', v); }
+  get color() { return this.getAttribute('color'); }
+  set color(v) { v == null ? this.removeAttribute('color') : this.setAttribute('color', v); }
+  get src() { return this.getAttribute('src'); }
+  set src(v) { v == null ? this.removeAttribute('src') : this.setAttribute('src', v); }
+}
+
+customElements.define('nk-avatar', NkAvatar);
+export { NkAvatar };

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

@@ -1,15 +1,18 @@
 import { NkElement } from '../../base.js';
+import { paintAvatar, initialsOf } from '../../util/avatar.js';
 
-// <nk-member-row name="Sara Lindt" mail="sara@…" avatar="SL" color="#448361">
+// <nk-member-row name="Sara Lindt" mail="sara@…" avatar="SL" color="green">
 //   <nk-select slot="role" compact>…</nk-select>
 // </nk-member-row>
-// → <div class="nk-member-row"><span class="mini-avatar">SL</span><div>Sara Lindt<div class="m-mail">…</div></div><select …></div>
+// → <div class="nk-member-row"><span class="nk-avatar green">SL</span><div>Sara Lindt<div class="m-mail">…</div></div><select …></div>
+// color: one of Notion's nine names, or any CSS background; without it the
+// avatar gradient. The row sizes the avatar to 28px.
 class NkMemberRow extends NkElement {
   static get observedAttributes() { return ['name', 'mail', 'avatar', 'color', 'last']; }
 
   render() {
     this._row = this.createElement('div', ['nk-member-row']);
-    this._avatar = this.createElement('span', ['mini-avatar']);
+    this._avatar = this.createElement('span', ['nk-avatar']);
     const avatarSlot = this.createElement('slot', [], { name: 'avatar' });
     avatarSlot.appendChild(this._avatar);
     const text = document.createElement('div');
@@ -33,8 +36,8 @@ class NkMemberRow extends NkElement {
     this._mail.textContent = mail || '';
     this._mail.style.display = mail ? '' : 'none';
     const avatar = this.getAttribute('avatar');
-    this._avatar.textContent = avatar || (this.getAttribute('name') || '').split(/\s+/).map(w => w[0]).join('').slice(0, 2).toUpperCase();
-    this._avatar.style.background = this.getAttribute('color') || 'var(--nk-text-tertiary)';
+    this._avatar.textContent = avatar || initialsOf(this.getAttribute('name'));
+    paintAvatar(this._avatar, this.getAttribute('color'));
     this._row.classList.toggle('last', this.getBoolAttr('last'));
   }
 

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

@@ -1,12 +1,16 @@
 import { NkElement } from '../../base.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 +18,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/src/components/page/nk-page.js

@@ -1,6 +1,6 @@
 import { NkElement } from '../../base.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 +12,10 @@ import { NkElement } from '../../base.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 +52,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 +75,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/src/components/page/nk-panel.js

@@ -0,0 +1,59 @@
+import { NkElement } from '../../base.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/src/components/page/nk-panels.js

@@ -0,0 +1,16 @@
+import { NkElement } from '../../base.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/src/components/page/nk-prop.js

@@ -0,0 +1,52 @@
+import { NkElement } from '../../base.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/src/components/page/nk-props.js

@@ -0,0 +1,19 @@
+import { NkElement } from '../../base.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/src/components/page/nk-segmented.js

@@ -6,6 +6,9 @@ import { NkFormElement } from '../../base.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 +52,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 +88,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 +97,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/src/components/page/nk-steps.js

@@ -0,0 +1,59 @@
+import { NkElement } from '../../base.js';
+
+// <nk-steps label="Connect your own model" current="2"
+//           steps="Choose a provider, Enter the API key, Test the connection"></nk-steps>
+// steps.steps = [{ label: 'Choose a provider', desc: 'Anthropic' }, 'Enter the API key', …];
+// → <ol class="nk-steps" aria-label="…">
+//     <li class="nk-step done"><span class="st-mark">✓</span><span>Choose a provider<span class="st-desc">Anthropic</span></span></li>
+//     <li class="nk-step current" aria-current="step"><span class="st-mark">2</span><span>Enter the API key</span></li>
+//     <li class="nk-step"><span class="st-mark">3</span><span>Test the connection</span></li></ol>
+// A setup in a few steps (NotionKit 1.7.0). `current` counts from 1; the
+// steps before it are done, one past the last marks all of them done. The
+// `steps` attribute is a comma-separated list; the property also takes
+// { label, desc } objects for a line under the label.
+class NkSteps extends NkElement {
+  static get observedAttributes() { return ['steps', 'current', 'label']; }
+
+  render() {
+    this._list = this.createElement('ol', ['nk-steps']);
+    this._wrapper.appendChild(this._list);
+    this._sync();
+  }
+
+  _items() {
+    if (this._steps) return this._steps;
+    return (this.getAttribute('steps') || '').split(',').map(s => s.trim()).filter(Boolean);
+  }
+
+  _sync() {
+    const label = this.getAttribute('label');
+    if (label) this._list.setAttribute('aria-label', label); else this._list.removeAttribute('aria-label');
+    const current = this.current;
+    this._list.replaceChildren(...this._items().map((step, i) => {
+      const n = i + 1, { label: text, desc } = typeof step === 'object' && step ? step : { label: String(step) };
+      const li = this.createElement('li', ['nk-step']);
+      li.classList.toggle('done', n < current);
+      li.classList.toggle('current', n === current);
+      if (n === current) li.setAttribute('aria-current', 'step');
+      const mark = this.createElement('span', ['st-mark'], { 'aria-hidden': 'true' });
+      mark.textContent = n < current ? '✓' : String(n);
+      const body = document.createElement('span');
+      body.textContent = text ?? '';
+      if (desc) { const d = this.createElement('span', ['st-desc']); d.textContent = desc; body.appendChild(d); }
+      li.append(mark, body);
+      return li;
+    }));
+  }
+
+  onAttributeChanged() { this._sync(); }
+
+  get steps() { return this._items(); }
+  set steps(v) { this._steps = Array.isArray(v) ? v : null; if (this._list) this._sync(); }
+  get current() { const n = parseInt(this.getAttribute('current'), 10); return Number.isFinite(n) ? n : 1; }
+  set current(v) { this.setAttribute('current', String(v)); }
+  /** Moves on to the next step; returns the new current step. */
+  next() { this.current = Math.min(this.current + 1, this._items().length + 1); return this.current; }
+}
+
+customElements.define('nk-steps', NkSteps);
+export { NkSteps };