@jungherz-de/notionkit-elements 1.5.3 → 1.7.0

package/dist/components/nk-sheet.js

@@ -0,0 +1,97 @@
+import { NkElement } from './base.js';
+import { d as deepActiveElement, 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-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/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>
@@ -10,42 +11,12 @@ import { N as NkElement } from './shared/base-C3eJwHKA.js';
 //
 // The host is display:contents so the <aside> is a direct flex child of
 // .nk-app, exactly like the class markup. Below 860px notionkit.css hides the
-// aside; `open` brings it back as an off-canvas drawer (position only – the
-// look is still the stylesheet's).
-//
-// The drawer slides and the scrim fades without a line of JavaScript:
-// `display` transitions with transition-behavior: allow-discrete (the old
-// value is held for the whole duration, so closing animates too) and
-// @starting-style gives the first frame after display: none its start
-// values. `position: fixed` lives on the plain .nk-sidebar, not on the open
-// state – while closing, the aside is still displayed and must not fall
-// back into the flow. Browsers without either feature switch hard, as
-// before; prefers-reduced-motion switches hard on purpose.
-const drawerSheet = new CSSStyleSheet();
-drawerSheet.replaceSync(`
-  .nk-sidebar-backdrop { display: none; position: fixed; inset: 0; z-index: 59; background: var(--nk-scrim-soft); }
-  @media (max-width: 860px) {
-    .nk-sidebar {
-      position: fixed; inset: 0 auto 0 0; z-index: 60;
-      transform: translateX(-100%);
-      transition: background .25s ease, transform .24s cubic-bezier(.2, .8, .25, 1), display .24s;
-      transition-behavior: allow-discrete;
-    }
-    :host([open]) .nk-sidebar { display: flex; transform: none; }
-    @starting-style { :host([open]) .nk-sidebar { transform: translateX(-100%); } }
-    .nk-sidebar-backdrop {
-      opacity: 0;
-      transition: opacity .24s ease, display .24s;
-      transition-behavior: allow-discrete;
-    }
-    :host([open]) .nk-sidebar-backdrop { display: block; opacity: 1; }
-    @starting-style { :host([open]) .nk-sidebar-backdrop { opacity: 0; } }
-  }
-  @media (prefers-reduced-motion: reduce) { .nk-sidebar, .nk-sidebar-backdrop { transition: none; } }
-`);
-
+// aside; `open` brings it back as a drawer over the page. The drawer is the
+// stylesheet's since NotionKit 1.7.0 (.nk-sidebar.open, .nk-sidebar-backdrop
+// .open) – the sidebar slides and the scrim fades by the same rules as the
+// class markup; the element toggles the two classes. <nk-btn variant="sidebar">
+// in the topbar is the ☰ that opens it.
 class NkSidebar extends NkElement {
-  static get hostStyles() { return drawerSheet; }
   static get observedAttributes() { return ['open']; }
 
   render() {
@@ -62,6 +33,13 @@ class NkSidebar extends NkElement {
     this._wrapper.appendChild(this._backdrop);
     this._wrapper.appendChild(this._aside);
     this._syncFooter();
+    this._syncOpen();
+  }
+
+  _syncOpen() {
+    const open = this.getBoolAttr('open');
+    this._aside.classList.toggle('open', open);
+    this._backdrop.classList.toggle('open', open);
   }
 
   _syncFooter() {
@@ -88,7 +66,9 @@ class NkSidebar extends NkElement {
   }
 
   onAttributeChanged(name) {
-    if (name === 'open') this.emit('nk-toggle', { open: this.getBoolAttr('open') });
+    if (name !== 'open') return;
+    this._syncOpen();
+    this.emit('nk-toggle', { open: this.getBoolAttr('open') });
   }
 
   show() { this.setBoolAttr('open', true); }

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-steps.js

@@ -0,0 +1,61 @@
+import { NkElement } from './base.js';
+import '@jungherz-de/notionkit/notionkit-styles.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 };

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/{focus-DXrK9oLe.js → focus-BNAChOXO.js}

@@ -1,6 +1,7 @@
-// Overlay plumbing shared by nk-modal and nk-cmdk: body scroll lock with a
-// refcount, and `inert` on everything outside the overlay so focus and
-// assistive technology stay inside – nested shadow roots included.
+// Overlay plumbing shared by nk-modal, nk-sheet, nk-cmdk and nk-menu: body
+// scroll lock with a refcount, `inert` on everything outside the overlay so
+// focus and assistive technology stay inside – nested shadow roots included –
+// and the focused element behind shadow hosts, to return focus to.
 let locks = 0, previousOverflow = '';
 
 function lockScroll() {
@@ -31,6 +32,13 @@ function inertOutside(el) {
   return () => { for (const c of made) c.inert = false; };
 }
 
+/** The focused element itself, looking into shadow roots (document.activeElement stops at the host). */
+function deepActiveElement() {
+  let el = document.activeElement;
+  while (el?.shadowRoot?.activeElement) el = el.shadowRoot.activeElement;
+  return el;
+}
+
 /** The first tabbable element inside a light-DOM subtree, looking into shadow roots. */
 function firstFocusable(root) {
   const SEL = 'a[href], button:not([disabled]), input:not([disabled]):not([type=hidden]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]), [contenteditable="true"], [contenteditable="plaintext-only"]';
@@ -44,4 +52,4 @@ function firstFocusable(root) {
   return walk(root);
 }
 
-export { firstFocusable as f, inertOutside as i, lockScroll as l, unlockScroll as u };
+export { deepActiveElement as d, firstFocusable as f, inertOutside as i, lockScroll as l, unlockScroll as u };

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) {