@jungherz-de/notionkit-elements 1.15.0 → 1.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jungherz-de/notionkit-elements",
-  "version": "1.15.0",
+  "version": "1.17.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)",
@@ -20,6 +20,7 @@
       "import": "./dist/notionkit-elements.esm.js",
       "default": "./dist/notionkit-elements.js"
     },
+    "./esm.min.js": "./dist/notionkit-elements.esm.min.js",
     "./base.js": "./dist/components/base.js",
     "./components/*.js": "./dist/components/*.js",
     "./package.json": "./package.json"
@@ -62,10 +63,10 @@
     "dark-mode"
   ],
   "peerDependencies": {
-    "@jungherz-de/notionkit": ">=1.15.0"
+    "@jungherz-de/notionkit": ">=1.17.0"
   },
   "devDependencies": {
-    "@jungherz-de/notionkit": "^1.15.0",
+    "@jungherz-de/notionkit": "^1.17.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']
   });
 }
 
@@ -60,6 +71,9 @@ if (typeof window !== 'undefined' && typeof MutationObserver !== 'undefined') {
 // Layout plumbing only: how the host box participates in the outer layout, and
 // that `hidden` keeps working. :host([hidden]) has a higher specificity than
 // :host, so it wins regardless of order. The wrapper is layout-transparent.
+// `flush` on any element drops the outer margin of its box (NotionKit
+// 1.16.0) – for a block in a flex column with a gap of its own; a whole
+// column does it for every block with --nk-block-space: 0.
 
 const hostSheets = new Map();
 
@@ -70,6 +84,7 @@ function hostSheetFor(display) {
     sheet.replaceSync(`
       :host { display: ${display}; }
       :host([hidden]) { display: none; }
+      :host([flush]) .nk-wrapper > * { margin-top: 0; margin-bottom: 0; }
       .nk-wrapper { display: contents; }
     `);
     hostSheets.set(display, sheet);
@@ -193,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;
@@ -343,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/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.
@@ -43,7 +44,7 @@ import { deepActiveElement } from '../../util/focus.js';
 // outside does. Put a floating calendar directly under <body>.
 const STEPS = { ArrowLeft: -1, ArrowRight: 1, ArrowUp: -7, ArrowDown: 7 };
 const floatSheet = new CSSStyleSheet();
-floatSheet.replaceSync(`:host([floating]) { display: block; position: fixed; top: 0; left: 0; z-index: 60; pointer-events: none; }`);
+floatSheet.replaceSync(`:host([floating]) { display: block; position: fixed; top: 0; left: 0; z-index: 106; pointer-events: none; }`);
 
 class NkCalendar extends NkFormElement {
   static get hostStyles() { return floatSheet; }
@@ -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

@@ -10,7 +10,8 @@ import { NkElement } from '../../base.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']; }
 
@@ -34,9 +35,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);
   }
 
@@ -53,6 +54,8 @@ class NkCopyField extends NkElement {
     clearTimeout(this._timer);
   }
 
+  onStringsChanged() { this._sync(); }
+
   onAttributeChanged(name, _old, value) {
     if (name === 'value') this._val = value ?? '';
     this._sync();

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/forms/nk-select.js

@@ -8,8 +8,10 @@ import { NkFormElement } from '../../base.js';
 // The light-DOM <option>s are copied into the shadow <select>. A
 // MutationObserver keeps the copy in step when a framework swaps them; the
 // empty string is a valid value; the live selection survives a rebuild. A
-// value set before its option exists – a framework sets properties before
-// children – waits and is applied once the option arrives.
+// value – attribute or property – whose option is not there yet waits and
+// wins over the browser's preselection once the option arrives, unless
+// someone has chosen another option in the meantime; settling on it fires
+// no nk-change.
 class NkSelect extends NkFormElement {
   static get observedAttributes() { return ['value', 'name', 'disabled', 'required', 'compact', 'wide', 'aria-label']; }
   static get observesLightDom() { return true; }
@@ -19,6 +21,7 @@ class NkSelect extends NkFormElement {
     this._forwardAll();
     this._wrapper.appendChild(this._select);
     this._defaultValue = this.getAttribute('value');
+    this._pending = this._defaultValue;
     // Children may not be parsed yet when connectedCallback runs.
     this.projectLightDom();
     requestAnimationFrame(() => this.projectLightDom());
@@ -52,11 +55,11 @@ class NkSelect extends NkFormElement {
     this._select.innerHTML = '';
     for (const node of nodes) this._select.appendChild(node.cloneNode(true));
 
-    // A value that waited for its option first; then the live selection when
-    // it survived; otherwise the value attribute; otherwise the browser
-    // default (first option / `selected`).
-    if (this._pending != null && this._applyValue(this._pending)) this._pending = null;
-    else if (!this._applyValue(previous)) this._applyValue(this.getAttribute('value'));
+    // A value that waits for its option first – it keeps waiting while the
+    // option is missing; else the live selection when it survived; else the
+    // browser default (first option / `selected`).
+    if (this._pending != null) { if (this._applyValue(this._pending)) this._pending = null; }
+    else this._applyValue(previous);
     this._syncFormValue();
   }
 
@@ -85,7 +88,8 @@ class NkSelect extends NkFormElement {
   onAttributeChanged(name) {
     if (!this._select) return;
     if (name === 'value') {
-      this._applyValue(this.getAttribute('value'));
+      const value = this.getAttribute('value');
+      this._pending = value === null || this._applyValue(value) ? null : value;
       this._syncFormValue();
       return;
     }
@@ -99,6 +103,7 @@ class NkSelect extends NkFormElement {
   }
 
   resetValue() {
+    this._pending = null;
     if (!this._applyValue(this._defaultValue)) this._select.selectedIndex = 0;
     this._syncFormValue();
   }

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

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

@@ -19,7 +19,7 @@ import { placeUnder } from '../../util/floating.js';
 // close it too, a switch row does not. Opened from the keyboard, focus moves
 // to the first item; closing returns it to where it was.
 const floatSheet = new CSSStyleSheet();
-floatSheet.replaceSync(`:host([floating]) { display: block; position: fixed; top: 0; left: 0; z-index: 60; pointer-events: none; }`);
+floatSheet.replaceSync(`:host([floating]) { display: block; position: fixed; top: 0; left: 0; z-index: 106; pointer-events: none; }`);
 
 class NkMenu extends NkElement {
   static get hostStyles() { return floatSheet; }