@jungherz-de/notionkit-elements 1.16.0 → 1.18.0

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

@@ -1,5 +1,5 @@
 import { NkElement } from './base.js';
-import { a as textOf, f as formatDate, r as renderPropertyCell } from './shared/property-cell-BSVcETss.js';
+import { a as textOf, b as formatDate, r as renderPropertyCell } from './shared/property-cell-DcsfnUNF.js';
 import '@jungherz-de/notionkit/notionkit-styles.js';
 import './shared/avatar-CzPZN3uP.js';
 import './shared/dates-a32DcW1l.js';
@@ -56,7 +56,7 @@ class NkListView extends NkElement {
       item.append(icon, t, m);
       this._list.appendChild(item);
     }
-    this._newRow.textContent = this.getAttribute('new-row-label') || '＋ New page';
+    this._newRow.textContent = this.getAttribute('new-row-label') || this.str('newPage');
     this._newRow.style.display = this.getBoolAttr('new-row') ? '' : 'none';
   }
 
@@ -81,6 +81,7 @@ class NkListView extends NkElement {
 
   _rowById(id) { return this._rows.find(r => String(r.id) === String(id)); }
   onAttributeChanged() { this._render(); }
+  onStringsChanged() { this._render(); }
 
   get name() { return this.getAttribute('name') || 'list'; }
   get columns() { return this._columns; }

package/dist/components/nk-modal.js

@@ -23,7 +23,7 @@ class NkModal extends NkElement {
     this._backdrop = this.createElement('div', ['nk-modal-backdrop']);
     this._backdrop.inert = true;
     this._box = this.createElement('div', ['nk-modal'], { role: 'dialog', 'aria-modal': 'true', tabindex: '-1' });
-    this._nav = this.createElement('nav', ['nk-settings-nav'], { 'aria-label': 'Settings' });
+    this._nav = this.createElement('nav', ['nk-settings-nav'], { 'aria-label': this.str('settings') });
     this._nav.appendChild(this.createElement('slot', [], { name: 'user' }));
     this._rows = document.createElement('div');
     this._nav.appendChild(this._rows);
@@ -141,6 +141,8 @@ class NkModal extends NkElement {
     if (this._wasOpen) { unlockScroll(); this._undoInert?.(); this._undoInert = null; this._wasOpen = false; }
   }
 
+  onStringsChanged() { this._nav.setAttribute('aria-label', this.str('settings')); }
+
   onAttributeChanged(name) {
     if (name === 'open') {
       this._syncOpen();

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

@@ -24,7 +24,7 @@ class NkPageTitle extends NkElement {
       this._h1.setAttribute('contenteditable', 'plaintext-only');
       this._h1.setAttribute('spellcheck', 'false');
       this._h1.setAttribute('role', 'textbox');
-      this._h1.setAttribute('aria-label', 'Title');
+      this._h1.setAttribute('aria-label', this.str('title'));
       const text = this.getAttribute('value') ?? this.textContent.trim();
       if (this._h1.textContent !== text && document.activeElement !== this) this._h1.textContent = text;
       this._h1.setAttribute('data-placeholder', this.getAttribute('placeholder') || '');
@@ -59,6 +59,7 @@ class NkPageTitle extends NkElement {
   }
 
   onAttributeChanged() { this._sync(); }
+  onStringsChanged() { if (this._h1.hasAttribute('role')) this._h1.setAttribute('aria-label', this.str('title')); }
 
   get value() { return this.getBoolAttr('editable') ? (this._h1?.textContent.trim() ?? '') : (this.getAttribute('value') ?? this.textContent.trim()); }
   set value(v) { this.setAttribute('value', v); }

package/dist/components/nk-page.js

@@ -20,7 +20,7 @@ class NkPage extends NkElement {
 
   render() {
     this._page = this.createElement('div', ['nk-page']);
-    this._icon = this.createElement('div', ['nk-page-icon'], { role: 'button', title: 'Change icon' });
+    this._icon = this.createElement('div', ['nk-page-icon'], { role: 'button', title: this.str('changeIcon') });
     this._iconSlot = this.createElement('slot', [], { name: 'icon' });
     this._iconSlot.appendChild(this._icon);
     this._page.appendChild(this._iconSlot);
@@ -76,6 +76,8 @@ class NkPage extends NkElement {
     this._iconSlot?.removeEventListener('slotchange', this._onCover);
   }
 
+  onStringsChanged() { this._icon.title = this.str('changeIcon'); }
+
   onAttributeChanged(name) {
     if (name === 'narrow') this._build();
     else this._sync();

package/dist/components/nk-peek.js

@@ -27,7 +27,8 @@ import '@jungherz-de/notionkit/notionkit-styles.js';
 // Notion: from `min` (380) to `max` (all but 320px of the window). The width
 // is the token --nk-peek-width, set on :root; `width` (px) sets it too, and
 // nk-resize { width } fires when a drag or a key ends – the moment to keep
-// it. resize-label names the edge (default "Resize").
+// it. resize-label names the edge (default "Resize", in German "Breite
+// ändern").
 // `inset`: while it is open on the desktop, the page's <nk-app> gets
 // `peek-inset` – its main column makes room instead of lying under the peek.
 const CLOSE_ICON = '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="m6 17 5-5-5-5M13 17l5-5-5-5"/></svg>';
@@ -74,7 +75,7 @@ class NkPeek extends NkElement {
 
   _syncResize() {
     this._handle.hidden = !this.getBoolAttr('resizable');
-    this._handle.setAttribute('aria-label', this.getAttribute('resize-label') || 'Resize');
+    this._handle.setAttribute('aria-label', this.getAttribute('resize-label') || this.str('resize'));
     this._handle.setAttribute('aria-valuemin', this._min);
     this._handle.setAttribute('aria-valuenow', Math.round(this.width));
   }
@@ -91,7 +92,7 @@ class NkPeek extends NkElement {
   _syncLabels() {
     const label = this.getAttribute('label');
     if (label) this._box.setAttribute('aria-label', label); else this._box.removeAttribute('aria-label');
-    this._close.setAttribute('aria-label', this.getAttribute('close-label') || 'Close');
+    this._close.setAttribute('aria-label', this.getAttribute('close-label') || this.str('close'));
   }
 
   _syncOpen() {
@@ -176,6 +177,8 @@ class NkPeek extends NkElement {
     this._wasOpen = false;
   }
 
+  onStringsChanged() { this._syncResize(); this._syncLabels(); }
+
   onAttributeChanged(name, _old, value) {
     if (name === 'width') { this._setWidth(Number(value)); return; }
     if (name === 'inset') { this._syncInset(); return; }

package/dist/components/nk-progress.js

@@ -4,6 +4,9 @@ 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.
+// With a label the two form one .nk-progress-row (1.18.0): the label beside
+// the bar in a flex column too – a panel – where the host, display: contents,
+// would let them stand one under the other.
 class NkProgress extends NkElement {
   static get observedAttributes() { return ['value', 'max', 'label', 'wide']; }
 
@@ -12,8 +15,7 @@ class NkProgress extends NkElement {
     this._fill = document.createElement('i');
     this._bar.appendChild(this._fill);
     this._label = this.createElement('span', ['nk-progress-label']);
-    this._wrapper.appendChild(this._bar);
-    this._wrapper.appendChild(this._label);
+    this._row = this.createElement('span', ['nk-progress-row']);
     this._sync();
   }
 
@@ -30,7 +32,8 @@ class NkProgress extends NkElement {
     this._bar.setAttribute('aria-valuemax', max);
     const label = this.getAttribute('label');
     this._label.textContent = label ?? '';
-    this._label.style.display = label === null ? 'none' : '';
+    if (label === null) { if (this._bar.parentNode !== this._wrapper) this._wrapper.replaceChildren(this._bar); }
+    else if (this._bar.parentNode !== this._row) { this._row.replaceChildren(this._bar, this._label); this._wrapper.replaceChildren(this._row); }
   }
 
   get value() { return Number(this.getAttribute('value')) || 0; }

package/dist/components/nk-sidebar.js

@@ -24,7 +24,8 @@ import '@jungherz-de/notionkit/notionkit-styles.js';
 // brings it back; ⌘\ or Ctrl+\ toggles it (on a phone the drawer).
 // `collapsed` is the state, collapse() / expand() / toggleCollapsed() the
 // API, nk-collapse { collapsed } the moment to keep it. collapse-label names
-// the « (default "Close sidebar") and is its tooltip for <nk-tooltip>.
+// the « (default "Close sidebar", in German "Seitenleiste schließen") and is
+// its tooltip for <nk-tooltip>.
 const COLLAPSE_ICON = '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="m18 17-5-5 5-5M11 17l-5-5 5-5"/></svg>';
 const phone = () => matchMedia('(max-width: 860px)').matches;
 
@@ -54,7 +55,7 @@ class NkSidebar extends NkElement {
   }
 
   _syncCollapse() {
-    const label = this.getAttribute('collapse-label') || 'Close sidebar';
+    const label = this.getAttribute('collapse-label') || this.str('closeSidebar');
     this._collapse.hidden = !this.getBoolAttr('collapsible');
     this._collapse.setAttribute('aria-label', label);
     this._collapse.dataset.tooltip = label;
@@ -106,6 +107,8 @@ class NkSidebar extends NkElement {
     document.removeEventListener('keydown', this._onKey);
   }
 
+  onStringsChanged() { this._syncCollapse(); }
+
   onAttributeChanged(name) {
     if (name === 'open') {
       this._syncOpen();

package/dist/components/nk-steps.js

@@ -18,6 +18,12 @@ import '@jungherz-de/notionkit/notionkit-styles.js';
 // nk-select { index, value, step } – index counts from 1, like `current` –
 // and, unless cancelled, makes that step current. `horizontal` sets the
 // steps in one row above a wizard.
+// A step with `href` (1.17.0) shows its label as a link, <a class="st-label">,
+// with or without `selectable` – to open a chapter in a new tab or copy its
+// address. A plain click, or Enter, fires the same nk-select; cancelling it
+// keeps the browser from following the link, for a router of your own. A
+// middle click or one with Cmd, Ctrl, Shift or Alt fires nothing and does
+// what a link does.
 class NkSteps extends NkElement {
   static get observedAttributes() { return ['steps', 'current', 'label', 'selectable', 'horizontal']; }
 
@@ -45,7 +51,7 @@ class NkSteps extends NkElement {
     // Rebuilding drops the focused label; the new one at that place takes it back.
     const focused = this.shadowRoot?.activeElement?.closest?.('li')?.dataset.index;
     this._list.replaceChildren(...this._items().map((_, i) => {
-      const n = i + 1, { label: text, desc, state } = this._step(i);
+      const n = i + 1, { label: text, desc, state, href } = this._step(i);
       // A state of its own wins; without one, the steps before `current` are done.
       const done = state ? state === 'done' : n < current, skipped = state === 'skipped';
       const li = this.createElement('li', ['nk-step'], { 'data-index': String(n) });
@@ -55,7 +61,8 @@ class NkSteps extends NkElement {
       if (n === current) li.setAttribute('aria-current', 'step');
       const mark = this.createElement('span', ['st-mark'], { 'aria-hidden': 'true' });
       mark.textContent = done ? '✓' : skipped ? '–' : String(n);
-      const body = selectable ? this.createElement('button', ['st-label'], { type: 'button' }) : document.createElement('span');
+      const body = href != null && href !== '' ? this.createElement('a', ['st-label'], { href: String(href) })
+        : selectable ? this.createElement('button', ['st-label'], { type: 'button' }) : 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);
@@ -66,9 +73,18 @@ class NkSteps extends NkElement {
 
   setupEvents() {
     this._onClick = (e) => {
-      if (!this.getBoolAttr('selectable')) return;
       const li = e.target.closest?.('li.nk-step');
-      if (li && this._list.contains(li)) this.select(Number(li.dataset.index));
+      if (!li || !this._list.contains(li)) return;
+      const link = li.querySelector('a.st-label');
+      if (link) {
+        // The link contract: a plain left click is a selection, any other
+        // one the browser's. The mark beside the link counts as the link.
+        if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
+        if (!link.contains(e.target)) { link.click(); return; }
+        if (!this.select(Number(li.dataset.index))) e.preventDefault();
+        return;
+      }
+      if (this.getBoolAttr('selectable')) this.select(Number(li.dataset.index));
     };
     this._list.addEventListener('click', this._onClick);
   }

package/dist/components/nk-synced.js

@@ -15,8 +15,9 @@ class NkSynced extends NkElement {
     this._sync();
   }
 
-  _sync() { this._badge.textContent = this.getAttribute('badge') ?? '⟳ synced'; }
+  _sync() { this._badge.textContent = this.getAttribute('badge') ?? this.str('synced'); }
   onAttributeChanged() { this._sync(); }
+  onStringsChanged() { this._sync(); }
 
   get badge() { return this.getAttribute('badge'); }
   set badge(v) { this.setAttribute('badge', v); }

package/dist/components/nk-tab-bar.js

@@ -14,8 +14,12 @@ import '@jungherz-de/notionkit/notionkit-styles.js';
 // stylesheet hides it above 860px – there the sidebar is the navigation –
 // and shows it below; `always` shows it at every width (previews, phone
 // frames), `fixed` pins it to the viewport (standalone PWAs) with a spacer
-// holding its place, `floating` makes it a capsule. Exactly one item is `active`; a
-// `drawer` item opens the sidebar instead of becoming active.
+// holding its place, `floating` makes it a capsule. The item whose value is
+// the bar's `value` is `active`; a `drawer` item opens the sidebar instead of
+// becoming active when clicked. A value no item has – a page without a tab
+// of its own, opened from the drawer – marks the drawer item, as iOS marks
+// "More" (1.18.0); without one no item is active. Without a value the item
+// marked `active`, else the first, is the one.
 class NkTabBar extends NkElement {
   static get observedAttributes() { return ['value', 'always', 'fixed', 'floating', 'label']; }
 
@@ -46,16 +50,18 @@ class NkTabBar extends NkElement {
   }
 
   _sync() {
-    const items = this.items.filter(i => !i.hasAttribute('drawer'));
+    const items = this.items.filter(i => !i.hasAttribute('drawer')), drawers = this.items.filter(i => i.hasAttribute('drawer'));
     if (!items.length) return;
     let value = this.getAttribute('value');
-    if (value === null || !items.some(i => this._valueOf(i) === value)) {
+    if (value === null) {
       const preset = items.find(i => i.hasAttribute('active')) || items[0];
       value = this._valueOf(preset);
     }
+    const known = items.some(i => this._valueOf(i) === value);
     for (const item of items) {
       if (this._valueOf(item) === value) item.setAttribute('active', ''); else item.removeAttribute('active');
     }
+    drawers.forEach((item, n) => { if (!known && n === 0) item.setAttribute('active', ''); else item.removeAttribute('active'); });
     this._value = value;
   }
 

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

@@ -1,5 +1,5 @@
 import { NkElement } from './base.js';
-import { c as compareBy, r as renderPropertyCell } from './shared/property-cell-BSVcETss.js';
+import { c as compareBy, r as renderPropertyCell } from './shared/property-cell-DcsfnUNF.js';
 import '@jungherz-de/notionkit/notionkit-styles.js';
 import './shared/avatar-CzPZN3uP.js';
 import './shared/dates-a32DcW1l.js';
@@ -66,7 +66,7 @@ class NkTableView extends NkElement {
       }
       this._tbody.appendChild(r);
     }
-    this._newRow.textContent = this.getAttribute('new-row-label') || '＋ New page';
+    this._newRow.textContent = this.getAttribute('new-row-label') || this.str('newPage');
     this._newRow.style.display = this.getBoolAttr('new-row') ? '' : 'none';
   }
 
@@ -116,6 +116,7 @@ class NkTableView extends NkElement {
 
   _rowById(id) { return this._rows.find(r => String(r.id) === String(id)); }
   onAttributeChanged() { this._render(); }
+  onStringsChanged() { this._render(); }
 
   get name() { return this.getAttribute('name') || 'table'; }
   get columns() { return this._columns; }

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

@@ -15,7 +15,7 @@ class NkThemeToggle extends NkElement {
 
   render() {
     this._btn = this.createElement('button', ['nk-topbar-btn', 'nk-theme-toggle'], { type: 'button' });
-    this._btn.title = this.getAttribute('title') || 'Toggle light / dark';
+    this._syncTitle();
     this._wrapper.appendChild(this._btn);
     const root = document.documentElement;
     let stored = null;
@@ -46,8 +46,11 @@ class NkThemeToggle extends NkElement {
     window.removeEventListener('message', this._onMessage);
   }
 
+  _syncTitle() { this._btn.title = this.getAttribute('title') || this.str('toggleTheme'); }
+  onStringsChanged() { this._syncTitle(); }
+
   onAttributeChanged(name) {
-    if (name === 'title' && this._btn) this._btn.title = this.getAttribute('title') || 'Toggle light / dark';
+    if (name === 'title' && this._btn) this._syncTitle();
   }
 
   /** Sets the theme on <html>, persists it and reports it. */

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

@@ -34,7 +34,7 @@ class NkTreeItem extends NkElement {
     this._labelSlot.appendChild(this._labelText);
     this._label.appendChild(this._labelSlot);
     this._actions = this.createElement('span', ['actions']);
-    for (const [action, glyph, title] of [['add', '＋', 'Add'], ['more', '⋯', 'More']]) {
+    for (const [action, glyph, title] of [['add', '＋', this.str('add')], ['more', '⋯', this.str('more')]]) {
       const b = this.createElement('span', [], { 'data-action': action, role: 'button', title });
       b.textContent = glyph;
       this._actions.appendChild(b);
@@ -120,6 +120,8 @@ class NkTreeItem extends NkElement {
     this._row?.removeEventListener('keydown', this._onKey);
   }
 
+  onStringsChanged() { for (const b of this._actions.children) b.title = this.str(b.dataset.action); }
+
   onAttributeChanged(name) {
     if (name === 'label') this.assignSlots();
     else this._sync();

package/dist/components/shared/{property-cell-BSVcETss.js → property-cell-DcsfnUNF.js}

@@ -16,6 +16,8 @@ import { r as resolveLocale } from './dates-a32DcW1l.js';
 // text: a string, or { text, desc, color, tooltip, sort } – one of Notion's
 // nine text colours for a tone, a quiet second line under it, the whole
 // text in a tooltip (served by <nk-tooltip>), a value to sort by.
+// progress: 0–100, the bar and its percentage as Intl writes it in
+// column.locale, else the page's language ("45 %" in German).
 // date: the value as given, or with column.format ('short', 'relative' or
 // Intl.DateTimeFormat options) and column.locale formatted from an ISO date
 // or date-time, D.M.YYYY, a Date or a timestamp; { start, end } is a range.
@@ -81,7 +83,7 @@ function renderPropertyCell(column, value, row = {}) {
   if (type === 'actions') return actions(column, value);
   if (value === undefined || value === null || value === '') {
     if (type === 'checkbox') return checkbox(column, false, row);
-    if (type === 'progress') return progress(0);
+    if (type === 'progress') return progress(column, 0);
     return el('span', type === 'person' ? 'person-cell' : null, type === 'text' && column.title ? '' : '—');
   }
   switch (type) {
@@ -113,7 +115,7 @@ function renderPropertyCell(column, value, row = {}) {
     }
     // 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);
+    case 'progress': return progress(column, Number(value) || 0);
     default: {
       const o = typeof value === 'object' ? value : { text: value };
       let t;
@@ -159,15 +161,23 @@ function checkbox(column, checked, row) {
   return label;
 }
 
-function progress(value) {
+function progress(column, value) {
   const frag = document.createDocumentFragment();
   const bar = el('span', 'nk-progress');
   const fill = el('i'); fill.style.width = `${Math.max(0, Math.min(100, value))}%`;
   bar.appendChild(fill);
-  frag.append(bar, el('span', 'nk-progress-label', `${Math.round(value)}%`));
+  frag.append(bar, el('span', 'nk-progress-label', formatPercent(column, value)));
   return frag;
 }
 
+/** A progress value of 0–100 as Intl writes a percentage in column.locale, else the page's language: 45 → "45%", in German "45 %". */
+function formatPercent(column, value) {
+  const n = Number(value) || 0;
+  try {
+    return new Intl.NumberFormat(column.locale || resolveLocale(), { style: 'percent', maximumFractionDigits: 0 }).format(n / 100);
+  } catch { return `${Math.round(n)}%`; }  // a lang Intl does not take
+}
+
 /** A select's place among its options: the order Notion sorts by. */
 function rankOf(column, value) {
   const i = (column.options || []).findIndex(o => o.value === value || o.label === value);
@@ -201,4 +211,4 @@ function compareBy(column, dir = 1) {
   };
 }
 
-export { textOf as a, compareBy as c, formatDate as f, renderPropertyCell as r, tagFor as t };
+export { textOf as a, formatDate as b, compareBy as c, formatPercent as f, renderPropertyCell as r, tagFor as t };