@jungherz-de/notionkit-elements 1.16.0 → 1.18.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jungherz-de/notionkit-elements",
-  "version": "1.16.0",
+  "version": "1.18.0",
   "description": "Vanilla JavaScript Web Components wrapping the NotionKit CSS foundation – <nk-*> custom elements with Shadow DOM, automatic theme sync and native form participation.",
   "license": "MIT",
   "author": "Jungherz GmbH <info@jungherz.com> (https://www.jungherz.com)",
@@ -63,10 +63,10 @@
     "dark-mode"
   ],
   "peerDependencies": {
-    "@jungherz-de/notionkit": ">=1.16.0"
+    "@jungherz-de/notionkit": ">=1.18.0"
   },
   "devDependencies": {
-    "@jungherz-de/notionkit": "^1.16.0",
+    "@jungherz-de/notionkit": "^1.18.0",
     "@playwright/test": "^1.50.0",
     "@rollup/plugin-node-resolve": "^15.0.0",
     "@rollup/plugin-terser": "^0.4.0",

package/src/base.js

@@ -6,6 +6,7 @@
 // nothing else; the element ships no visual CSS of its own.
 // ============================================================
 import { componentsSheet, tokensCss } from '@jungherz-de/notionkit/notionkit-styles.js';
+import { onStringsChange, str as textFor } from './util/strings.js';
 
 // ── Design tokens ──
 // The shadow roots deliberately adopt componentsSheet only. The full sheet
@@ -49,10 +50,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']
   });
 }
 
@@ -197,6 +208,21 @@ export 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 textFor(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,3 +373,7 @@ export class NkFormElement extends NkElement {
 }
 
 export { getCurrentTheme };
+
+// For projects that import single elements (components/nk-*.js): the one
+// dictionary every element reads its built-in texts from.
+export { setStrings, builtInStrings } from './util/strings.js';

package/src/components/content/nk-progress.js

@@ -3,6 +3,9 @@ import { NkElement } from '../../base.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']; }
 
@@ -11,8 +14,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();
   }
 
@@ -29,7 +31,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/src/components/data/nk-ai-input-row.js

@@ -10,8 +10,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);
@@ -19,7 +19,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') ?? '✨';
@@ -47,6 +49,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/src/components/data/nk-board-view.js

@@ -1,5 +1,5 @@
 import { NkElement } from '../../base.js';
-import { renderPropertyCell, tagFor, textOf, formatDate } from '../../util/property-cell.js';
+import { renderPropertyCell, tagFor, textOf, formatDate, formatPercent } from '../../util/property-cell.js';
 
 // <nk-board-view name="board" label="▤ Board" group-by="status" new-row></nk-board-view>
 // Groups rows by a select column (default: the first select column); one
@@ -55,7 +55,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/src/components/data/nk-calendar-view.js

@@ -10,7 +10,8 @@ import { isoOf, parseDay, isoWeek, resolveLocale, firstWeekday, weekdayNames, mo
 // 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 }.
@@ -66,9 +67,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 = [];
@@ -114,6 +115,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/src/components/data/nk-comments.js

@@ -12,7 +12,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);
@@ -21,8 +21,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');
   }
@@ -47,6 +48,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/src/components/data/nk-filter-bar.js

@@ -12,9 +12,10 @@ import { NkElement } from '../../base.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']; }
 
@@ -32,18 +33,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 });
@@ -77,6 +78,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/src/components/data/nk-gallery-view.js

@@ -1,5 +1,5 @@
 import { NkElement } from '../../base.js';
-import { renderPropertyCell, textOf, formatDate } from '../../util/property-cell.js';
+import { renderPropertyCell, textOf, formatDate, formatPercent } from '../../util/property-cell.js';
 
 // <nk-gallery-view name="gallery" label="🖼 Gallery" meta-keys="status,due" new-row></nk-gallery-view>
 // The fifth database view (NotionKit 1.14.0): the rows as cards with a
@@ -13,13 +13,20 @@ import { renderPropertyCell, textOf, formatDate } from '../../util/property-cell
 // <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' });
@@ -45,9 +52,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: '' }));
@@ -60,17 +71,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);
     }
   }
@@ -79,10 +94,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);
@@ -96,6 +117,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/src/components/data/nk-list-view.js

@@ -53,7 +53,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';
   }
 
@@ -78,6 +78,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/src/components/data/nk-table-view.js

@@ -63,7 +63,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';
   }
 
@@ -113,6 +113,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/src/components/forms/nk-calendar.js

@@ -21,8 +21,9 @@ import { deepActiveElement } from '../../util/focus.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.
@@ -151,9 +152,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)));
@@ -190,8 +191,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();
@@ -301,6 +302,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/src/components/forms/nk-copy-field.js

@@ -3,16 +3,31 @@ import { NkElement } from '../../base.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') ?? '';
@@ -27,32 +42,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();
@@ -80,6 +109,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/src/components/forms/nk-image-picker.js

@@ -20,7 +20,9 @@ import { NkElement } from '../../base.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);
@@ -62,8 +64,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/*';
   }
@@ -111,6 +113,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/src/components/overlays/nk-cmdk.js

@@ -18,7 +18,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';
@@ -43,7 +43,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/src/components/overlays/nk-emoji-picker.js

@@ -10,7 +10,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);
@@ -22,7 +22,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();