@jungherz-de/notionkit-elements 1.5.3 → 1.6.0

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>

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>

package/dist/components/nk-sidebar.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-sidebar slot="sidebar">
 //   <nk-workspace-switcher slot="workspace" name="Acme"></nk-workspace-switcher>

package/dist/components/nk-skeleton.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-skeleton height="18" width="60%"></nk-skeleton>
 // <nk-skeleton lines="3" widths="100%,85%,40%"></nk-skeleton>

package/dist/components/nk-slider.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-slider name="size" min="12" max="18" value="14" show-value></nk-slider>
 // → <input type="range" class="nk-slider"> <div class="nk-slider-value">14</div>

package/dist/components/nk-stat.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-stat label="Active pages" value="128" delta="▲ 12 this week" trend="up"></nk-stat>
 // → <div class="nk-stat"><div class="s-label">…</div><div class="s-value">…</div><div class="s-delta up">…</div></div>

package/dist/components/nk-stats.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-stats><nk-stat …></nk-stat>…</nk-stats>  →  <div class="nk-stats">
 class NkStats extends NkElement {

package/dist/components/nk-switch.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-switch name="notify" checked></nk-switch>
 // → <button class="nk-switch" role="switch" aria-checked="true">

package/dist/components/nk-synced.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-synced badge="⟳ 3 places">…</nk-synced>
 // → <div class="nk-synced"><span class="synced-badge">⟳ 3 places</span>…</div>

package/dist/components/nk-tab-bar-item.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-tab-bar-item icon="📥" value="inbox" active>Inbox</nk-tab-bar-item>
 // → <button class="nk-tab-bar-item active" type="button">

package/dist/components/nk-tab-bar.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-tab-bar value="inbox">
 //   <nk-tab-bar-item icon="🏠" value="home">Home</nk-tab-bar-item>

package/dist/components/nk-tab.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-tab value="notes" active>📝 Notes</nk-tab>  →  <span class="nk-tab active" role="tab">
 class NkTab extends NkElement {

package/dist/components/nk-table-view.js

@@ -1,5 +1,7 @@
-import { N as NkElement } from './shared/base-C3eJwHKA.js';
-import { c as compareBy, r as renderPropertyCell } from './shared/property-cell-CtXQpUjQ.js';
+import { NkElement } from './base.js';
+import { c as compareBy, r as renderPropertyCell } from './shared/property-cell-o7N30kAQ.js';
+import '@jungherz-de/notionkit/notionkit-styles.js';
+import './shared/avatar-BiqCaHOt.js';
 
 // <nk-table-view name="table" label="▦ Table" count new-row sortable wrap></nk-table-view>
 // `wrap` lets cell text break (`.nk-table.wrap`), like Notion's "wrap column".
@@ -50,6 +52,8 @@ class NkTableView extends NkElement {
       const r = this.createElement('tr', [], { 'data-id': row.id ?? '' });
       for (const col of this._columns) {
         const td = document.createElement('td');
+        // Numbers right-aligned in figures of equal width, as Notion sets them.
+        if (col.type === 'number') td.className = 'num';
         td.appendChild(renderPropertyCell(col, row[col.key], row));
         r.appendChild(td);
       }

package/dist/components/nk-tabs.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-tabs value="notes">
 //   <nk-tab value="notes">📝 Notes</nk-tab>

package/dist/components/nk-tag.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-tag color="blue">Text</nk-tag>  —  modifier class .blue becomes color="blue".
 // Notion's nine select colours; without `color` the stylesheet draws the grey tag.

package/dist/components/nk-template-btn.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-template-btn icon="📅" value="week-plan">Insert week plan</nk-template-btn>
 // → <button class="nk-template-btn">📅 Insert week plan</button>

package/dist/components/nk-textarea.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-textarea name="bio" rows="3" wide>Text</nk-textarea>  →  <textarea class="nk-textarea wide">
 // The initial value is the `value` attribute, or the element's text content.

package/dist/components/nk-theme-toggle.js

@@ -1,4 +1,5 @@
-import { N as NkElement, g as getCurrentTheme } from './shared/base-C3eJwHKA.js';
+import { NkElement, getCurrentTheme } from './base.js';
+import '@jungherz-de/notionkit/notionkit-styles.js';
 
 // <nk-theme-toggle slot="actions"></nk-theme-toggle>
 // → <button class="nk-topbar-btn nk-theme-toggle">🌙</button>

package/dist/components/nk-toast.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-toast id="toast"></nk-toast>   …   toast.show('Saved');
 // → <div class="nk-toast show">✓ Saved</div>

package/dist/components/nk-todo.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-todo name="task" value="1" checked>Write the docs</nk-todo>
 // → <label class="nk-todo"><input type="checkbox"><span>Write the docs</span></label>

package/dist/components/nk-toggle.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-toggle label="Details" open>Body…</nk-toggle>
 // → <details class="nk-toggle" open><summary>Details</summary><div class="toggle-body">…</div></details>

package/dist/components/nk-topbar.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-topbar>
 //   <nk-breadcrumb>…</nk-breadcrumb>

package/dist/components/nk-tree-item.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-tree-item icon="📊" value="overview" open>
 //   Project overview

package/dist/components/nk-tree.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-tree>
 //   <nk-section-label addable>Favourites</nk-section-label>

package/dist/components/nk-workspace-switcher.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-workspace-switcher slot="workspace" name="Acme" avatar="A">
 //   <nk-menu slot="menu">…</nk-menu>

package/dist/components/shared/avatar-BiqCaHOt.js

@@ -0,0 +1,19 @@
+// Shared by every element that draws an avatar: nk-avatar itself, member
+// rows, comments and the person cells of a database view.
+const AVATAR_COLORS = ['gray', 'brown', 'orange', 'yellow', 'green', 'blue', 'purple', 'pink', 'red'];
+
+/**
+ * Paints an .nk-avatar. One of Notion's nine colour names becomes its class,
+ * so the tokens decide the shade in each theme; any other value – a hex, a
+ * gradient, a var() – is taken as an inline background, as before 1.6.0.
+ * Without a colour the avatar keeps the stylesheet's gradient.
+ */
+function paintAvatar(el, color) {
+  for (const c of AVATAR_COLORS) el.classList.toggle(c, c === color);
+  el.style.background = color && !AVATAR_COLORS.includes(color) ? color : '';
+}
+
+/** "Sara Lindt" → "SL". */
+const initialsOf = name => String(name || '').split(/\s+/).map(w => w[0]).filter(Boolean).join('').slice(0, 2).toUpperCase();
+
+export { initialsOf as i, paintAvatar as p };

package/dist/components/shared/{property-cell-CtXQpUjQ.js → property-cell-o7N30kAQ.js}

@@ -1,3 +1,5 @@
+import { i as initialsOf, p as paintAvatar } from './avatar-BiqCaHOt.js';
+
 // Polymorphic property renderer for database views. Returns plain DOM built
 // from NotionKit classes – deliberately not a custom element: every cell rule
 // starts with `.nk-table`, so a cell inside its own shadow root would never
@@ -5,6 +7,7 @@
 //
 // column: { key, label, type, icon, options: [{ value, label, color }], title }
 // types: text | select | multi-select | date | person | checkbox | url | number | progress
+
 const el = (tag, cls, text) => { const n = document.createElement(tag); if (cls) n.className = cls; if (text != null) n.textContent = text; return n; };
 const COLORS = ['gray', 'brown', 'orange', 'yellow', 'green', 'blue', 'purple', 'pink', 'red'];
 
@@ -38,14 +41,16 @@ function renderPropertyCell(column, value, row = {}) {
     case 'person': {
       const cell = el('span', 'person-cell');
       const p = typeof value === 'string' ? { name: value } : value;
-      const avatar = el('span', 'mini-avatar', p.initials || p.avatar || (p.name || '').split(/\s+/).map(w => w[0]).join('').slice(0, 2).toUpperCase());
-      avatar.style.background = p.color || 'var(--nk-text-tertiary)';
+      // color: one of Notion's nine names, or any CSS background; none – the avatar gradient.
+      const avatar = el('span', 'nk-avatar small', p.initials || p.avatar || initialsOf(p.name));
+      paintAvatar(avatar, p.color);
       cell.append(avatar, document.createTextNode(' ' + (p.name || '')));
       return cell;
     }
     case 'checkbox': return checkbox(column, !!value, row);
     case 'url': { const a = el('a', null, String(value).replace(/^https?:\/\//, '')); a.href = String(value); a.target = '_blank'; a.rel = 'noopener'; return a; }
-    case 'number': return el('span', null, typeof value === 'number' ? value.toLocaleString() : String(value));
+    // column.locale / column.format: Intl.NumberFormat locale and options, e.g. { minimumFractionDigits: 1 }.
+    case 'number': return el('span', null, typeof value === 'number' ? value.toLocaleString(column.locale, column.format) : String(value));
     case 'progress': return progress(Number(value) || 0);
     default: {
       if (column.title) {