@jungherz-de/notionkit-elements 1.16.0 → 1.17.0

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

@@ -11,7 +11,8 @@ import '@jungherz-de/notionkit/notionkit-styles.js';
 // ⌘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.
 class NkCopyField extends NkElement {
   static get observedAttributes() { return ['value', 'mono', 'wrap', 'wide', 'secret', 'copy-label', 'copied-label', 'show-label', 'hide-label']; }
 
@@ -35,9 +36,9 @@ class NkCopyField extends NkElement {
     // 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');
+    this._show.textContent = this._revealed ? (this.getAttribute('hide-label') || this.str('hide')) : (this.getAttribute('show-label') || this.str('show'));
     this._show.setAttribute('aria-pressed', String(!!this._revealed));
-    this._copy.textContent = this._copied ? (this.getAttribute('copied-label') || 'Copied') : (this.getAttribute('copy-label') || 'Copy');
+    this._copy.textContent = this._copied ? (this.getAttribute('copied-label') || this.str('copied')) : (this.getAttribute('copy-label') || this.str('copy'));
     this._copy.classList.toggle('copied', !!this._copied);
   }
 
@@ -54,6 +55,8 @@ class NkCopyField extends NkElement {
     clearTimeout(this._timer);
   }
 
+  onStringsChanged() { this._sync(); }
+
   onAttributeChanged(name, _old, value) {
     if (name === 'value') this._val = value ?? '';
     this._sync();

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();

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-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();