@jungherz-de/notionkit-elements 1.16.0 → 1.18.0

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

@@ -22,7 +22,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);
@@ -140,6 +140,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/src/components/overlays/nk-peek.js

@@ -26,7 +26,8 @@ import { lockScroll, unlockScroll, inertOutside, deepActiveElement } from '../..
 // 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>';
@@ -73,7 +74,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));
   }
@@ -90,7 +91,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() {
@@ -175,6 +176,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/src/components/page/nk-page-title.js

@@ -23,7 +23,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') || '');
@@ -58,6 +58,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/src/components/page/nk-page.js

@@ -19,7 +19,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);
@@ -75,6 +75,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/src/components/page/nk-steps.js

@@ -17,6 +17,12 @@ import { NkElement } from '../../base.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']; }
 
@@ -44,7 +50,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) });
@@ -54,7 +60,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);
@@ -65,9 +72,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/src/components/page/nk-synced.js

@@ -14,8 +14,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/src/components/shell/nk-breadcrumb.js

@@ -16,7 +16,7 @@ class NkBreadcrumb extends NkElement {
   static get observesLightDom() { return true; }
 
   render() {
-    this._nav = this.createElement('nav', ['nk-breadcrumb'], { 'aria-label': 'Breadcrumb' });
+    this._nav = this.createElement('nav', ['nk-breadcrumb'], { 'aria-label': this.str('breadcrumb') });
     this._wrapper.appendChild(this._nav);
     this.projectLightDom();
   }
@@ -68,6 +68,7 @@ class NkBreadcrumb extends NkElement {
   teardownEvents() { this._nav?.removeEventListener('click', this._onClick); }
 
   onAttributeChanged() { this.projectLightDom(); }
+  onStringsChanged() { this._nav.setAttribute('aria-label', this.str('breadcrumb')); }
 
   get separator() { return this.getAttribute('separator') ?? '/'; }
   set separator(v) { this.setAttribute('separator', v); }

package/src/components/shell/nk-sidebar.js

@@ -23,7 +23,8 @@ import { deepActiveElement } from '../../util/focus.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;
 
@@ -53,7 +54,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;
@@ -105,6 +106,8 @@ class NkSidebar extends NkElement {
     document.removeEventListener('keydown', this._onKey);
   }
 
+  onStringsChanged() { this._syncCollapse(); }
+
   onAttributeChanged(name) {
     if (name === 'open') {
       this._syncOpen();

package/src/components/shell/nk-tab-bar.js

@@ -13,8 +13,12 @@ import { NkElement } from '../../base.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']; }
 
@@ -45,16 +49,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/src/components/shell/nk-theme-toggle.js

@@ -14,7 +14,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;
@@ -45,8 +45,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/src/components/shell/nk-tree-item.js

@@ -33,7 +33,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);
@@ -119,6 +119,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/src/index.js

@@ -117,4 +117,8 @@ export { NkComment } from './components/data/nk-comment.js';
 export { NkAiThread } from './components/data/nk-ai-thread.js';
 export { NkAiMsg } from './components/data/nk-ai-msg.js';
 export { NkAiInputRow } from './components/data/nk-ai-input-row.js';
-export { renderPropertyCell, tagFor, compareBy, formatDate, timeOf, textOf } from './util/property-cell.js';
+export { renderPropertyCell, tagFor, compareBy, formatDate, formatPercent, timeOf, textOf } from './util/property-cell.js';
+
+// 1.17.0 – the built-in texts in English and German, after the lang of the
+// page or of the element; setStrings() adds or replaces them.
+export { setStrings, builtInStrings } from './util/strings.js';

package/src/util/property-cell.js

@@ -13,6 +13,8 @@
 // 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.
@@ -80,7 +82,7 @@ export 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) {
@@ -112,7 +114,7 @@ export 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;
@@ -158,15 +160,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 %". */
+export 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);

package/src/util/strings.js

@@ -0,0 +1,73 @@
+// The texts the elements show and announce by themselves – button labels,
+// placeholders, accessible names – in English and German (NotionKit
+// Elements 1.17.0). The language is the element's own: the nearest `lang`
+// attribute, across shadow roots, else <html lang>; German for "de…",
+// English for anything else. setStrings() adds or replaces texts, for one
+// language or for all of them, and an attribute on the element wins over
+// every one of these.
+const BUILT_IN = {
+  en: {
+    copy: 'Copy', copied: 'Copied', show: 'Show', hide: 'Hide',
+    uploadImage: 'Upload image', changeImage: 'Change image', remove: 'Remove',
+    close: 'Close', resize: 'Resize',
+    today: 'Today', previousMonth: 'Previous month', nextMonth: 'Next month', clear: 'Clear', time: 'Time',
+    filter: 'Filter', sort: 'Sort', addFilter: '＋ Filter', removeFilter: 'Remove filter', search: 'Search …',
+    closeSidebar: 'Close sidebar', newPage: '＋ New page',
+    commentPlaceholder: 'Comment …', send: 'Send', askPlaceholder: 'Ask something …',
+    commandPlaceholder: 'Search or type a command …', emojiPlaceholder: 'Search…',
+    toggleTheme: 'Toggle light / dark', synced: '⟳ synced',
+    message: 'Message', breadcrumb: 'Breadcrumb', commandPalette: 'Command palette', comment: 'Comment',
+    searchEmoji: 'Search emoji', settings: 'Settings', title: 'Title', changeIcon: 'Change icon',
+    add: 'Add', more: 'More',
+  },
+  de: {
+    copy: 'Kopieren', copied: 'Kopiert', show: 'Zeigen', hide: 'Verbergen',
+    uploadImage: 'Bild hochladen', changeImage: 'Bild ändern', remove: 'Entfernen',
+    close: 'Schließen', resize: 'Breite ändern',
+    today: 'Heute', previousMonth: 'Voriger Monat', nextMonth: 'Nächster Monat', clear: 'Leeren', time: 'Uhrzeit',
+    filter: 'Filter', sort: 'Sortieren', addFilter: '＋ Filter', removeFilter: 'Filter entfernen', search: 'Suchen …',
+    closeSidebar: 'Seitenleiste schließen', newPage: '＋ Neue Seite',
+    commentPlaceholder: 'Kommentieren …', send: 'Senden', askPlaceholder: 'Frag etwas …',
+    commandPlaceholder: 'Suchen oder Befehl eingeben …', emojiPlaceholder: 'Suchen …',
+    toggleTheme: 'Hell / Dunkel', synced: '⟳ synchronisiert',
+    message: 'Nachricht', breadcrumb: 'Pfad', commandPalette: 'Befehlspalette', comment: 'Kommentar',
+    searchEmoji: 'Emoji suchen', settings: 'Einstellungen', title: 'Titel', changeIcon: 'Symbol ändern',
+    add: 'Hinzufügen', more: 'Mehr',
+  },
+};
+const custom = {};
+const listeners = new Set();
+
+/**
+ * Adds or replaces texts: setStrings({ copy: 'Copy link' }) for every
+ * language, setStrings({ copy: 'Copier' }, 'fr') for one – a language of its
+ * own too. The elements on the page take them at once.
+ */
+export function setStrings(strings, lang = '*') {
+  const key = String(lang).toLowerCase().split('-')[0];
+  custom[key] = { ...custom[key], ...strings };
+  for (const fn of listeners) fn();
+}
+
+/** The keys and texts built in for a language ('en' or 'de'), for an app that fills in its own. */
+export function builtInStrings(lang = 'en') {
+  return { ...(BUILT_IN[String(lang).toLowerCase().split('-')[0]] || BUILT_IN.en) };
+}
+
+/** Called after every setStrings(); base.js hands the change on to the elements. */
+export function onStringsChange(fn) { listeners.add(fn); }
+
+/** The language of `el`: its nearest lang attribute, across shadow roots, else the page's; the primary subtag. */
+export function langOf(el) {
+  for (let node = el; node; node = node.getRootNode?.().host) {
+    const hit = node.closest?.('[lang]');
+    if (hit) return hit.getAttribute('lang').toLowerCase().split('-')[0];
+  }
+  return (document.documentElement.lang || 'en').toLowerCase().split('-')[0];
+}
+
+/** The text `key` for `el`: its language's own set by setStrings(), then the one for every language, the built-in one, English. */
+export function str(key, el) {
+  const lang = langOf(el);
+  return custom[lang]?.[key] ?? custom['*']?.[key] ?? BUILT_IN[lang]?.[key] ?? BUILT_IN.en[key] ?? key;
+}