@jungherz-de/notionkit-elements 1.16.0 → 1.18.0

package/dist/components/base.js

@@ -1,5 +1,79 @@
 import { tokensCss, componentsSheet } from '@jungherz-de/notionkit/notionkit-styles.js';
 
+// 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.
+ */
+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. */
+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. */
+function onStringsChange(fn) { listeners.add(fn); }
+
+/** The language of `el`: its nearest lang attribute, across shadow roots, else the page's; the primary subtag. */
+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. */
+function str(key, el) {
+  const lang = langOf(el);
+  return custom[lang]?.[key] ?? custom['*']?.[key] ?? BUILT_IN[lang]?.[key] ?? BUILT_IN.en[key] ?? key;
+}
+
 // ============================================================
 // NotionKit Elements – base classes
 //
@@ -50,10 +124,20 @@ function syncAllThemes() {
   for (const instance of instances) instance._syncTheme(theme);
 }
 
+// The built-in texts follow the language (1.17.0): setStrings() and a new
+// lang on <html> reach the elements already on the page, too.
+function syncAllStrings() {
+  for (const instance of instances) instance.onStringsChanged();
+}
+onStringsChange(syncAllStrings);
+
 if (typeof window !== 'undefined' && typeof MutationObserver !== 'undefined') {
-  new MutationObserver(syncAllThemes).observe(document.documentElement, {
+  new MutationObserver(records => {
+    if (records.some(r => r.attributeName === 'data-theme')) syncAllThemes();
+    if (records.some(r => r.attributeName === 'lang')) syncAllStrings();
+  }).observe(document.documentElement, {
     attributes: true,
-    attributeFilter: ['data-theme']
+    attributeFilter: ['data-theme', 'lang']
   });
 }
 
@@ -198,6 +282,21 @@ class NkElement extends HTMLElement {
     this._wrapper?.setAttribute('data-theme', theme);
   }
 
+  /**
+   * The text `key` in this element's language – its nearest lang attribute,
+   * across shadow roots, else the page's: the one setStrings() gave, else the
+   * built-in English or German one (1.17.0). A project's own element reads
+   * its texts here too, after setStrings({ myKey: '…' }).
+   */
+  str(key) { return str(key, this); }
+
+  /**
+   * The texts may have changed: setStrings() ran or <html lang> changed.
+   * Components with built-in texts apply them again here; an attribute on
+   * the element still wins.
+   */
+  onStringsChanged() {}
+
   _upgradeOwnProperties() {
     for (const key of Object.keys(this)) {
       if (key.startsWith('_')) continue;
@@ -347,4 +446,4 @@ class NkFormElement extends NkElement {
   }
 }
 
-export { NkElement, NkFormElement, getCurrentTheme };
+export { NkElement, NkFormElement, builtInStrings, getCurrentTheme, setStrings };

package/dist/components/nk-ai-input-row.js

@@ -11,8 +11,8 @@ class NkAiInputRow extends NkElement {
     this._row = this.createElement('div', ['nk-ai-input-row']);
     this._icon = document.createElement('span');
     this._icon.style.fontSize = '14px';
-    this._input = this.createElement('input', [], { type: 'text', 'aria-label': 'Message' });
-    this._btn = this.createElement('button', ['nk-ai-send'], { type: 'button', 'aria-label': 'Send' });
+    this._input = this.createElement('input', [], { type: 'text' });
+    this._btn = this.createElement('button', ['nk-ai-send'], { type: 'button' });
     this._btn.textContent = '↑';
     this._row.append(this._icon, this._input, this._btn);
     this._wrapper.appendChild(this._row);
@@ -20,7 +20,9 @@ class NkAiInputRow extends NkElement {
   }
 
   _sync() {
-    this._input.placeholder = this.getAttribute('placeholder') || 'Ask something …';
+    this._input.placeholder = this.getAttribute('placeholder') || this.str('askPlaceholder');
+    this._input.setAttribute('aria-label', this.str('message'));
+    this._btn.setAttribute('aria-label', this.str('send'));
     if (this.hasAttribute('value') && this._input.value !== this.getAttribute('value')) this._input.value = this.getAttribute('value');
     this._input.disabled = this._btn.disabled = this.getBoolAttr('disabled');
     const icon = this.getAttribute('icon') ?? '✨';
@@ -48,6 +50,7 @@ class NkAiInputRow extends NkElement {
   }
 
   onAttributeChanged() { this._sync(); }
+  onStringsChanged() { this._sync(); }
   focus(o) { this._input?.focus(o); }
   get value() { return this._input?.value ?? ''; }
   set value(v) { if (this._input) this._input.value = v ?? ''; }

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

@@ -1,5 +1,5 @@
 import { NkElement } from './base.js';
-import { t as tagFor, a as textOf, f as formatDate, r as renderPropertyCell } from './shared/property-cell-BSVcETss.js';
+import { t as tagFor, a as textOf, f as formatPercent, 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';
@@ -58,7 +58,7 @@ class NkBoardView extends NkElement {
           const v = row[c.key];
           if (v === undefined || v === null || v === '') continue;
           const s = document.createElement('span');
-          if (c.type === 'progress') s.textContent = `▰ ${v}%`;
+          if (c.type === 'progress') s.textContent = `▰ ${formatPercent(c, v)}`;
           else if (c.type === 'date') s.textContent = `📅 ${formatDate(c, v)}`;
           else s.appendChild(renderPropertyCell(c, v, row));
           meta.appendChild(s);

package/dist/components/nk-breadcrumb.js

@@ -17,7 +17,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();
   }
@@ -69,6 +69,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/dist/components/nk-calendar-view.js

@@ -1,5 +1,5 @@
 import { NkElement } from './base.js';
-import { a as textOf } from './shared/property-cell-BSVcETss.js';
+import { a as textOf } from './shared/property-cell-DcsfnUNF.js';
 import { C as CHEVRONS, i as isoOf, r as resolveLocale, f as firstWeekday, m as monthGrid, p as parseDay, w as weekLabel, a as weekdayNames, b as isoWeek, s as stepMonth } from './shared/dates-a32DcW1l.js';
 import '@jungherz-de/notionkit/notionkit-styles.js';
 import './shared/avatar-CzPZN3uP.js';
@@ -12,7 +12,8 @@ import './shared/avatar-CzPZN3uP.js';
 // default today's), weeks (the ISO week in front of each row), week-start
 // (0 = Sunday … 6 = Saturday; default from the locale), weekend (weekdays
 // washed like the days of other months, "6,0"), today, locale and the texts
-// today-label, prev-label, next-label, week-label.
+// today-label, prev-label, next-label, week-label – without them English
+// or German after the language (1.17.0).
 // Standalone: view.columns = […]; view.rows = […]. Inside <nk-database> the
 // database pushes the data. A card fires nk-select { row, id, value } like a
 // row of the table, Today and ‹ › nk-month { month }.
@@ -68,9 +69,9 @@ class NkCalendarView extends NkElement {
     }
     this._box.classList.toggle('weeks', weeks);
     this._title.textContent = new Intl.DateTimeFormat(locale, { month: 'long', year: 'numeric' }).format(g.first);
-    this._todayBtn.textContent = this.getAttribute('today-label') || 'Today';
-    this._prev.setAttribute('aria-label', this.getAttribute('prev-label') || 'Previous month');
-    this._next.setAttribute('aria-label', this.getAttribute('next-label') || 'Next month');
+    this._todayBtn.textContent = this.getAttribute('today-label') || this.str('today');
+    this._prev.setAttribute('aria-label', this.getAttribute('prev-label') || this.str('previousMonth'));
+    this._next.setAttribute('aria-label', this.getAttribute('next-label') || this.str('nextMonth'));
 
     const cell = (cls, text) => { const el = this.createElement('div', [cls]); el.textContent = text; return el; };
     const nodes = [];
@@ -116,6 +117,8 @@ class NkCalendarView extends NkElement {
 
   _rowById(id) { return this._rows.find(r => String(r.id) === String(id)); }
 
+  onStringsChanged() { this._render(); }
+
   onAttributeChanged(name) {
     if (name === 'month') this._month = this._attrMonth() ?? this._month;
     this._render();

package/dist/components/nk-calendar.js

@@ -22,8 +22,9 @@ import '@jungherz-de/notionkit/notionkit-styles.js';
 // default from the locale, Monday where the browser cannot say), weeks,
 // weekend (weekdays not worked, "6,0" for Saturday and Sunday), range, time,
 // clearable, label and the texts today-label, prev-label, next-label,
-// week-label, time-label, clear-label. `time` belongs to single days; a
-// range has none.
+// week-label, time-label, clear-label – without them English or German
+// after the language (1.17.0). `time` belongs to single days; a range has
+// none.
 // days (property, or JSON attribute): { 'YYYY-MM-DD': { off, label, marks } }
 // – `off` greys a holiday, `label` names the day (tooltip and screen
 // reader), `marks` puts up to three dots in the nine colours on it.
@@ -152,9 +153,9 @@ class NkCalendar extends NkFormElement {
     const label = this.getAttribute('label');
     if (label) this._cal.setAttribute('aria-label', label); else this._cal.removeAttribute('aria-label');
     this._title.textContent = new Intl.DateTimeFormat(locale, { month: 'long', year: 'numeric' }).format(g.first);
-    this._todayBtn.textContent = this.getAttribute('today-label') || 'Today';
-    this._prev.setAttribute('aria-label', this.getAttribute('prev-label') || 'Previous month');
-    this._next.setAttribute('aria-label', this.getAttribute('next-label') || 'Next month');
+    this._todayBtn.textContent = this.getAttribute('today-label') || this.str('today');
+    this._prev.setAttribute('aria-label', this.getAttribute('prev-label') || this.str('previousMonth'));
+    this._next.setAttribute('aria-label', this.getAttribute('next-label') || this.str('nextMonth'));
 
     // The one tab stop: the focused day, else the chosen one, else the 1st.
     const cells = Array.from({ length: 42 }, (_, i) => isoOf(g.day(i)));
@@ -191,8 +192,8 @@ class NkCalendar extends NkFormElement {
 
     const time = this._hasTime, clearable = this.getBoolAttr('clearable');
     this._timeInput.value = this._time;
-    this._timeInput.setAttribute('aria-label', this.getAttribute('time-label') || 'Time');
-    this._clear.textContent = this.getAttribute('clear-label') || 'Clear';
+    this._timeInput.setAttribute('aria-label', this.getAttribute('time-label') || this.str('time'));
+    this._clear.textContent = this.getAttribute('clear-label') || this.str('clear');
     this._foot.replaceChildren(...[time && this._timeInput, clearable && this._clear].filter(Boolean));
     if (time || clearable) this._cal.appendChild(this._foot); else this._foot.remove();
     this._syncForm();
@@ -302,6 +303,8 @@ class NkCalendar extends NkFormElement {
     document.removeEventListener('click', this._onOutside, true);
   }
 
+  onStringsChanged() { if (this._grid) this._draw(); }
+
   onAttributeChanged(name, _old, value) {
     if (name === 'value') { this._readValue(value); this._draw(); return; }
     if (name === 'month') { this.month = value; return; }

package/dist/components/nk-cmdk.js

@@ -38,7 +38,7 @@ class NkCmdk extends NkElement {
   render() {
     this._backdrop = this.createElement('div', ['nk-cmdk-backdrop']);
     this._backdrop.inert = true;
-    this._box = this.createElement('div', ['nk-cmdk'], { role: 'dialog', 'aria-modal': 'true', 'aria-label': 'Command palette' });
+    this._box = this.createElement('div', ['nk-cmdk'], { role: 'dialog', 'aria-modal': 'true' });
     const row = this.createElement('div', ['nk-cmdk-input-row']);
     const glass = document.createElement('span');
     glass.style.fontSize = '15px';
@@ -63,7 +63,11 @@ class NkCmdk extends NkElement {
     this._syncOpen();
   }
 
-  _syncAttrs() { this._input.placeholder = this.getAttribute('placeholder') || 'Search or type a command …'; }
+  _syncAttrs() {
+    this._input.placeholder = this.getAttribute('placeholder') || this.str('commandPlaceholder');
+    this._box.setAttribute('aria-label', this.str('commandPalette'));
+  }
+  onStringsChanged() { this._syncAttrs(); }
 
   /** Filtered, flat list in group order, best matches first within a group. */
   results() {

package/dist/components/nk-comments.js

@@ -13,7 +13,7 @@ class NkComments extends NkElement {
     const box = this.createElement('div', ['nk-comments']);
     box.appendChild(document.createElement('slot'));
     this._row = this.createElement('div', ['nk-comment-input']);
-    this._input = this.createElement('input', ['nk-input'], { type: 'text', 'aria-label': 'Comment' });
+    this._input = this.createElement('input', ['nk-input'], { type: 'text' });
     this._btn = this.createElement('button', ['nk-btn', 'primary', 'small'], { type: 'button' });
     this._row.append(this._input, this._btn);
     box.appendChild(this._row);
@@ -22,8 +22,9 @@ class NkComments extends NkElement {
   }
 
   _sync() {
-    this._input.placeholder = this.getAttribute('placeholder') || 'Comment …';
-    this._btn.textContent = this.getAttribute('send-label') || 'Send';
+    this._input.placeholder = this.getAttribute('placeholder') || this.str('commentPlaceholder');
+    this._input.setAttribute('aria-label', this.str('comment'));
+    this._btn.textContent = this.getAttribute('send-label') || this.str('send');
     this._row.style.display = this.getBoolAttr('no-input') ? 'none' : '';
     this._input.disabled = this._btn.disabled = this.getBoolAttr('disabled');
   }
@@ -48,6 +49,7 @@ class NkComments extends NkElement {
   }
 
   onAttributeChanged() { this._sync(); }
+  onStringsChanged() { this._sync(); }
   focus(o) { this._input?.focus(o); }
   get value() { return this._input?.value ?? ''; }
   set value(v) { if (this._input) this._input.value = v ?? ''; }

package/dist/components/nk-copy-field.js

@@ -4,16 +4,31 @@ import '@jungherz-de/notionkit/notionkit-styles.js';
 // <nk-copy-field value="https://monahilft.notionkit.app"></nk-copy-field>
 // <nk-copy-field value="ntn_4f2…" secret mono></nk-copy-field>
 // → <div class="nk-copy-field mono"><span class="cf-value">…</span>
-//     <button class="cf-btn">Show</button><button class="cf-btn">Copy</button></div>
+//     <button class="cf-btn" aria-label="Show"><svg>…</svg><span>Show</span></button>
+//     <button class="cf-btn" aria-label="Copy"><svg>…</svg><span>Copy</span></button></div>
 // A value to take along – a link, an address, a key (NotionKit 1.8.0). Copy
 // writes it to the clipboard and says "Copied" in green for a moment; where
 // the clipboard is not allowed, the value is shown and selected instead, for
 // ⌘C. `secret` masks it behind a Show/Hide toggle; Copy still copies the
 // real value. `value` set as a property is not reflected, so a key never
 // lands in the markup. Fires nk-action { action: 'copy', value, ok }. The
-// texts are attributes: copy-label, copied-label, show-label, hide-label.
+// texts come in English or German after the language (1.17.0, setStrings()
+// for others); copy-label, copied-label, show-label, hide-label set them here.
+// Each button carries an icon beside its word (1.18.0): on a phone, and with
+// `icons` anywhere, the icon stands in for the word – two overlapping squares,
+// an eye, a check in green for the moment after – and a masked key keeps a
+// dozen characters more. The word stays the button's name, and while the
+// icons show, its tooltip for <nk-tooltip>.
+const ICONS = {
+  copy: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M15 9V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h4"/><rect x="9" y="9" width="12" height="12" rx="2"/></svg>',
+  copied: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>',
+  show: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z"/><circle cx="12" cy="12" r="3"/></svg>',
+  hide: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z"/><circle cx="12" cy="12" r="3"/><path d="m3 3 18 18"/></svg>',
+};
+const PHONE = typeof matchMedia === 'function' ? matchMedia('(max-width: 860px)') : null;
+
 class NkCopyField extends NkElement {
-  static get observedAttributes() { return ['value', 'mono', 'wrap', 'wide', 'secret', 'copy-label', 'copied-label', 'show-label', 'hide-label']; }
+  static get observedAttributes() { return ['value', 'mono', 'wrap', 'wide', 'secret', 'icons', 'copy-label', 'copied-label', 'show-label', 'hide-label']; }
 
   render() {
     this._val ??= this.getAttribute('value') ?? '';
@@ -28,32 +43,46 @@ class NkCopyField extends NkElement {
 
   _sync() {
     if (!this._box) return;
-    for (const m of ['mono', 'wrap', 'wide']) this._box.classList.toggle(m, this.getBoolAttr(m));
+    for (const m of ['mono', 'wrap', 'wide', 'icons']) this._box.classList.toggle(m, this.getBoolAttr(m));
     const secret = this.getBoolAttr('secret');
     this._text.textContent = secret && !this._revealed ? '•'.repeat(Math.min(this._val.length, 24)) : this._val;
     // Not `hidden`: .cf-btn sets no display of its own that could lose to it,
     // but a button that is not there cannot be tabbed to either.
     if (secret && !this._show.isConnected) this._copy.before(this._show);
     if (!secret) this._show.remove();
-    this._show.textContent = this._revealed ? (this.getAttribute('hide-label') || 'Hide') : (this.getAttribute('show-label') || 'Show');
+    const tip = this.getBoolAttr('icons') || !!PHONE?.matches;
+    this._button(this._show, this._revealed ? 'hide' : 'show', this._revealed ? (this.getAttribute('hide-label') || this.str('hide')) : (this.getAttribute('show-label') || this.str('show')), tip);
     this._show.setAttribute('aria-pressed', String(!!this._revealed));
-    this._copy.textContent = this._copied ? (this.getAttribute('copied-label') || 'Copied') : (this.getAttribute('copy-label') || 'Copy');
+    this._button(this._copy, this._copied ? 'copied' : 'copy', this._copied ? (this.getAttribute('copied-label') || this.str('copied')) : (this.getAttribute('copy-label') || this.str('copy')), tip);
     this._copy.classList.toggle('copied', !!this._copied);
   }
 
+  /** The icon and the word of a button; the word is its name, and its tooltip while the icon stands in for it. */
+  _button(btn, icon, word, tip) {
+    if (btn.dataset.icon !== icon) { btn.innerHTML = `${ICONS[icon]}<span></span>`; btn.dataset.icon = icon; }
+    btn.lastChild.textContent = word;
+    btn.setAttribute('aria-label', word);
+    if (tip) btn.setAttribute('data-tooltip', word); else btn.removeAttribute('data-tooltip');
+  }
+
   setupEvents() {
     this._onCopy = () => this.copy();
     this._onShow = () => { this._revealed = !this._revealed; this._sync(); };
+    this._onPhone = () => this._sync();
     this._copy.addEventListener('click', this._onCopy);
     this._show.addEventListener('click', this._onShow);
+    PHONE?.addEventListener('change', this._onPhone);
   }
 
   teardownEvents() {
     this._copy?.removeEventListener('click', this._onCopy);
     this._show?.removeEventListener('click', this._onShow);
+    PHONE?.removeEventListener('change', this._onPhone);
     clearTimeout(this._timer);
   }
 
+  onStringsChanged() { this._sync(); }
+
   onAttributeChanged(name, _old, value) {
     if (name === 'value') this._val = value ?? '';
     this._sync();
@@ -81,6 +110,8 @@ class NkCopyField extends NkElement {
   set value(v) { this._val = v == null ? '' : String(v); this._sync(); }
   get secret() { return this.getBoolAttr('secret'); }
   set secret(v) { this.setBoolAttr('secret', v); }
+  get icons() { return this.getBoolAttr('icons'); }
+  set icons(v) { this.setBoolAttr('icons', v); }
 }
 
 customElements.define('nk-copy-field', NkCopyField);

package/dist/components/nk-emoji-picker.js

@@ -28,7 +28,7 @@ class NkEmojiPicker extends NkElement {
 
   render() {
     this._box = this.createElement('div', ['nk-pop']);
-    this._search = this.createElement('input', ['nk-emoji-search'], { type: 'search', autocomplete: 'off', 'aria-label': 'Search emoji' });
+    this._search = this.createElement('input', ['nk-emoji-search'], { type: 'search', autocomplete: 'off' });
     this._grid = this.createElement('div', ['nk-emoji-grid'], { role: 'listbox' });
     this._cats = this.createElement('div', ['nk-emoji-cats'], { role: 'tablist' });
     this._box.append(this._search, this._grid, this._cats);
@@ -40,7 +40,11 @@ class NkEmojiPicker extends NkElement {
     this._syncAttrs();
   }
 
-  _syncAttrs() { this._search.placeholder = this.getAttribute('placeholder') || 'Search…'; }
+  _syncAttrs() {
+    this._search.placeholder = this.getAttribute('placeholder') || this.str('emojiPlaceholder');
+    this._search.setAttribute('aria-label', this.str('searchEmoji'));
+  }
+  onStringsChanged() { this._syncAttrs(); }
 
   _renderCats() {
     this._cats.replaceChildren();

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

@@ -13,9 +13,10 @@ import '@jungherz-de/notionkit/notionkit-styles.js';
 // nk-action { action: 'add' } – each with the clicked button as `anchor`, to
 // open a menu under it. × removes the filter; every change to filters or
 // search fires nk-change { filters, search }. In slot="filters" of
-// <nk-database> the row sits right under the view tabs. The texts are
-// attributes, for other languages: filter-label, sort-label, add-label,
-// remove-label (the × reads "<remove-label>: <pill>") and placeholder.
+// <nk-database> the row sits right under the view tabs. The texts come in
+// English or German after the language (1.17.0, setStrings() for others);
+// filter-label, sort-label, add-label, remove-label (the × reads
+// "<remove-label>: <pill>") and placeholder set them here.
 class NkFilterBar extends NkElement {
   static get observedAttributes() { return ['search', 'placeholder', 'no-filter', 'no-sort', 'value', 'add', 'add-label', 'filter-label', 'sort-label', 'remove-label']; }
 
@@ -33,18 +34,18 @@ class NkFilterBar extends NkElement {
   }
 
   _sync() {
-    this._filterBtn.textContent = this.getAttribute('filter-label') || 'Filter';
+    this._filterBtn.textContent = this.getAttribute('filter-label') || this.str('filter');
     this._filterBtn.hidden = this.getBoolAttr('no-filter');
     this._filterBtn.classList.toggle('active', this._filters.length > 0);
-    this._sortBtn.textContent = this.getAttribute('sort-label') || 'Sort';
+    this._sortBtn.textContent = this.getAttribute('sort-label') || this.str('sort');
     this._sortBtn.hidden = this.getBoolAttr('no-sort');
-    this._addBtn.textContent = this.getAttribute('add-label') || '＋ Filter';
+    this._addBtn.textContent = this.getAttribute('add-label') || this.str('addFilter');
     this._addBtn.hidden = !this.getBoolAttr('add');
     this._input.hidden = !this.getBoolAttr('search');
-    this._input.placeholder = this.getAttribute('placeholder') || 'Search …';
+    this._input.placeholder = this.getAttribute('placeholder') || this.str('search');
     if (this.hasAttribute('value') && this._input.value !== this.getAttribute('value')) this._input.value = this.getAttribute('value');
     for (const old of this._row.querySelectorAll('[data-pill]')) old.remove();
-    const removeLabel = this.getAttribute('remove-label') || 'Remove filter';
+    const removeLabel = this.getAttribute('remove-label') || this.str('removeFilter');
     this._pillStart.after(...this._filters.map((f, i) => {
       const pill = this.createElement('span', ['nk-filter-pill', 'active'], { 'data-pill': i });
       const label = this.createElement('button', [], { type: 'button', 'data-edit': i });
@@ -78,6 +79,7 @@ class NkFilterBar extends NkElement {
 
   _emitChange() { this.emit('nk-change', { filters: [...this._filters], search: this._input.value }); }
   onAttributeChanged() { this._sync(); }
+  onStringsChanged() { this._sync(); }
 
   // A copy each way: the caller's array is never changed – removing a pill
   // only reports the new list in nk-change.

package/dist/components/nk-gallery-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, f as formatPercent, 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';
@@ -16,13 +16,20 @@ import './shared/dates-a32DcW1l.js';
 // <nk-database> the database pushes the data. A card fires nk-select
 // { row, id, value } on a click, Enter or Space, like a row of the table;
 // the add card nk-action { action: 'new-row' }.
+// `href-key` (1.17.0) names the row field with the card's address: a row
+// with one gets a link, <a class="nk-card" href>, in a .card-item that
+// carries the list item's role – to open a course 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. A middle click or one with
+// Cmd, Ctrl, Shift or Alt fires nothing and does what a link does.
 // → <div class="nk-gallery" role="list"><div class="nk-card" role="listitem" tabindex="0">
 //     <div class="nk-cover"><img src="…" alt=""></div><div class="card-title">🧭 …</div><div class="card-meta">…</div></div>
+//     <div class="card-item" role="listitem"><a class="nk-card" href="/courses/safety">…</a></div>
 //     <div class="nk-new-row">＋ New page</div></div>
 const SIZES = ['small', 'large'];
 
 class NkGalleryView extends NkElement {
-  static get observedAttributes() { return ['name', 'label', 'badge', 'count', 'cover-key', 'no-cover', 'size', 'fit', 'title-key', 'meta-keys', 'new-row', 'new-row-label']; }
+  static get observedAttributes() { return ['name', 'label', 'badge', 'count', 'cover-key', 'no-cover', 'size', 'fit', 'title-key', 'meta-keys', 'href-key', 'new-row', 'new-row-label']; }
 
   render() {
     this._grid = this.createElement('div', ['nk-gallery'], { role: 'list' });
@@ -48,9 +55,13 @@ class NkGalleryView extends NkElement {
     this._grid.className = ['nk-gallery', SIZES.includes(size) && size, this.getBoolAttr('fit') && 'fit'].filter(Boolean).join(' ');
     const title = this._titleColumn(), meta = this._metaColumns();
     const coverKey = this.getAttribute('cover-key') || 'cover', covers = !this.getBoolAttr('no-cover');
+    const hrefKey = this.getAttribute('href-key');
     this._grid.replaceChildren();
     for (const row of this._rows) {
-      const card = this.createElement('div', ['nk-card'], { role: 'listitem', tabindex: '0', 'data-id': row.id ?? '' });
+      const link = hrefKey ? row[hrefKey] : null, href = link && typeof link === 'object' ? link.href : link;
+      const card = href
+        ? this.createElement('a', ['nk-card'], { href: String(href), 'data-id': row.id ?? '' })
+        : this.createElement('div', ['nk-card'], { role: 'listitem', tabindex: '0', 'data-id': row.id ?? '' });
       if (covers) {
         const cover = this.createElement('div', ['nk-cover']);
         if (row[coverKey]) cover.appendChild(this.createElement('img', [], { src: row[coverKey], alt: '' }));
@@ -63,17 +74,21 @@ class NkGalleryView extends NkElement {
         const v = row[c.key];
         if (v === undefined || v === null || v === '') continue;
         const s = document.createElement('span');
-        if (c.type === 'progress') s.textContent = `▰ ${v}%`;
+        if (c.type === 'progress') s.textContent = `▰ ${formatPercent(c, v)}`;
         else if (c.type === 'date') s.textContent = `📅 ${formatDate(c, v)}`;
         else s.appendChild(renderPropertyCell(c, v, row));
         m.appendChild(s);
       }
       card.append(t, m);
-      this._grid.appendChild(card);
+      if (href) {
+        const item = this.createElement('div', ['card-item'], { role: 'listitem' });
+        item.appendChild(card);
+        this._grid.appendChild(item);
+      } else this._grid.appendChild(card);
     }
     if (this.getBoolAttr('new-row')) {
       const add = this.createElement('div', ['nk-new-row'], { role: 'button', tabindex: '0', 'data-add': '' });
-      add.textContent = this.getAttribute('new-row-label') || '＋ New page';
+      add.textContent = this.getAttribute('new-row-label') || this.str('newPage');
       this._grid.appendChild(add);
     }
   }
@@ -82,10 +97,16 @@ class NkGalleryView extends NkElement {
     this._onClick = (e) => {
       if (e.target.closest('[data-add]')) { this.emit('nk-action', { action: 'new-row' }); return; }
       const card = e.target.closest('.nk-card');
-      if (card) { const row = this._rowById(card.dataset.id); this.emit('nk-select', { row, id: row?.id, value: row?.id }); }
+      if (!card) return;
+      // The link contract: a plain left click is a selection, any other one the browser's.
+      const link = card.localName === 'a';
+      if (link && (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey)) return;
+      const row = this._rowById(card.dataset.id);
+      if (!this.emit('nk-select', { row, id: row?.id, value: row?.id }) && link) e.preventDefault();
     };
     this._onKey = (e) => {
       if (e.key !== 'Enter' && e.key !== ' ') return;
+      if (e.target.localName === 'a') return;  // a link card: Enter is the browser's click, Space scrolls
       if (e.target.matches?.('.nk-card, [data-add]')) { e.preventDefault(); e.target.click(); }
     };
     this._grid.addEventListener('click', this._onClick);
@@ -99,6 +120,7 @@ class NkGalleryView 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') || 'gallery'; }
   get columns() { return this._columns; }

package/dist/components/nk-image-picker.js

@@ -21,7 +21,9 @@ import '@jungherz-de/notionkit/notionkit-styles.js';
 // Events: nk-change { dataUrl, width, height, size } after a pick, and on
 //         remove with an empty dataUrl; nk-error { message, name } when the
 //         file cannot be decoded (HEIC outside Safari, a broken file).
-// Texts:  choose-label, change-label, remove-label; label names the group.
+// Texts:  English or German after the language (1.17.0, setStrings() for
+//         others); choose-label, change-label, remove-label set them here.
+//         label names the group.
 
 function dataUrlBytes(url) {
   const b64 = url.slice(url.indexOf(',') + 1);
@@ -63,8 +65,8 @@ class NkImagePicker extends NkElement {
     }
     const label = this.getAttribute('label');
     if (label) this._row.setAttribute('aria-label', label); else this._row.removeAttribute('aria-label');
-    this._choose.textContent = this._src ? (this.getAttribute('change-label') || 'Change image') : (this.getAttribute('choose-label') || 'Upload image');
-    this._remove.textContent = this.getAttribute('remove-label') || 'Remove';
+    this._choose.textContent = this._src ? (this.getAttribute('change-label') || this.str('changeImage')) : (this.getAttribute('choose-label') || this.str('uploadImage'));
+    this._remove.textContent = this.getAttribute('remove-label') || this.str('remove');
     this._remove.hidden = !this._src;
     this._input.accept = this.getAttribute('accept') || 'image/*';
   }
@@ -112,6 +114,8 @@ class NkImagePicker extends NkElement {
     this._remove?.removeEventListener('click', this._onRemove);
   }
 
+  onStringsChanged() { this._sync(); }
+
   onAttributeChanged(name, _old, value) {
     if (name === 'src') this._src = value || '';
     this._sync();