@jungherz-de/notionkit-elements 1.16.0 → 1.18.0

package/CHANGELOG.md

@@ -4,6 +4,36 @@ All notable changes to NotionKit Elements are documented here. The format follow
 [Keep a Changelog](https://keepachangelog.com/en/1.1.0/); versions follow
 [Semantic Versioning](https://semver.org/).
 
+## [1.18.0] – 2026-09-25
+
+Built against NotionKit CSS 1.18.0 (peer `>= 1.18.0`). What LearnHub and Auxdesk found after their move to 1.17.0: LearnHub's finding 17 and Auxdesk's 26, 27 and 28.
+
+### Added
+- **`<nk-copy-field>` shows icons on a phone.** Each button carries an icon beside its word; below 860px, and with the new `icons` attribute at every width, the icon stands in for the word – two overlapping squares for Copy, an eye and an eye struck through for Show and Hide, a green check for the moment after – and a masked key keeps a dozen characters more (Auxdesk's wish 27). The word stays the button's `aria-label`, from the dictionary or `copy-label` and the other attributes, and while the icons show, its tooltip for `<nk-tooltip>`.
+
+### Changed
+- **`<nk-tab-bar>` marks "More" for a page without a tab of its own.** A `value` no item has – a mailbox, the settings, an account page opened from the drawer – makes the `drawer` item active, as iOS marks "More"; a bar without a drawer item marks none. Before, the bar kept the tab the user came from (Auxdesk's finding 28). `nk-change` reports such a value too; without a value the item marked `active`, else the first, is the one, as before.
+
+### Fixed
+- **`<nk-progress wide label>` in a panel keeps its label beside the bar.** The host is `display: contents`, so bar and label were two flex items of the panel and stood one under the other. With a label the element sets both in one `.nk-progress-row` (NotionKit 1.18.0): beside each other, the label on the bar's middle, the bar filling the rest (LearnHub's finding 17). In a property value the label now stands 7px from the bar, as in a table cell, instead of 13px.
+- **`<nk-prop>` on a phone keeps a long copy field inside its card** – NotionKit 1.18.0's fix for Auxdesk's finding 26 reaches the element's shadow root.
+
+## [1.17.0] – 2026-09-25
+
+Built against NotionKit CSS 1.17.0 (peer `>= 1.17.0`). The rest of LearnHub's consolidated list: German texts in the elements (finding 9) and steps and gallery cards as links (6 and 16), under one link contract. Additive – with `lang="en"` every text stays as it was.
+
+### Added
+- **The elements speak English and German.** Button labels, placeholders and the names a screen reader announces – 38 texts, from Copy, Today and ＋ New page to the names of the palette and the modal – come from a dictionary after the element's language: its nearest `lang` attribute, across shadow roots, else `<html lang>`. `de`, `de-DE` or `de-AT` give German, everything else English. An attribute on the element still wins, so a label with a meaning of its own stays. The fixed accessible names – Message, Send, Breadcrumb, Command palette, Comment, Search emoji, Settings, Title, Change icon – come from the same dictionary; before, they could not be changed at all. README lists every key with its attribute, English and German.
+- **`setStrings(strings, lang?)` and `builtInStrings(lang)`**, from the bundle and from `base.js`: add or replace texts for every language or for one – a language of its own too. The elements on the page take them at once, and again when `<html lang>` changes.
+- **`this.str(key)` and `onStringsChanged()` on `NkElement`**: a project's own element reads the dictionary in its language, its own keys too, and applies new texts when they change.
+- **Percentages as `Intl` writes them.** A progress cell, a board card and a gallery card write 45 as `45%` in English and `45 %` in German, with a no-break space – the column's `locale` first, else the page's language. `formatPercent(column, value)` is exported beside `formatDate()`.
+- **`<nk-steps>`: a step with `href` is a link.** Its label becomes `<a class="st-label" href>`, with or without `selectable`, and opens in a new tab with a middle click or offers "Copy link" – for chapters whose addresses are shared. Steps without `href` stay buttons.
+- **`<nk-gallery-view href-key>`: cards as links.** `href-key` names the row field with a card's address – a string or `{ href }`. Such a card is `<a class="nk-card" href>` in a `.card-item` that carries `role="listitem"`; rows without an address and galleries without `href-key` stay as they were.
+- **The link contract, for both:** a plain left click and Enter fire the cancelable `nk-select` as before – `{ index, value, step }` and `{ row, id, value }`; cancel it and the browser stays, for a router of your own, otherwise it follows the link (and a step becomes current). A middle click or one with Cmd, Ctrl, Shift or Alt fires nothing and does what a link does; Space on a link card scrolls, like on any link. The mark beside a step's link counts as the link.
+
+### Changed
+- **The German demo sets no text attributes any more.** `de/app.html` takes Kopieren, Heute, Seitenleiste schließen and the others from `<html lang="de">`; `app.html` dropped the English ones it only carried to be translated. The docs have a Languages section, show the defaults of text attributes in both languages and write percentages and the new-row text in the page's language.
+
 ## [1.16.0] – 2026-09-25
 
 Built against NotionKit CSS 1.16.0 (peer `>= 1.16.0`). LearnHub checked all its open findings against 1.14.0; this release takes the fixes and small additions from that list – 3, 4, 5, 10, 11 and 15 – together with Auxdesk's finding 25. Links for steps and gallery cards and German texts follow in 1.17.0.
@@ -702,6 +732,8 @@ built and tested against NotionKit CSS 1.1.1 (peer range `>= 1.0.0`).
   import, never in the core bundle – shadow-less, adding `nk-block-host` to
   itself so the foundation's editor adapter rules apply.
 
+[1.18.0]: https://github.com/JUNGHERZ/NotionKit-Elements/releases/tag/v1.18.0
+[1.17.0]: https://github.com/JUNGHERZ/NotionKit-Elements/releases/tag/v1.17.0
 [1.16.0]: https://github.com/JUNGHERZ/NotionKit-Elements/releases/tag/v1.16.0
 [1.15.0]: https://github.com/JUNGHERZ/NotionKit-Elements/releases/tag/v1.15.0
 [1.14.0]: https://github.com/JUNGHERZ/NotionKit-Elements/releases/tag/v1.14.0

package/README.md

@@ -1,11 +1,11 @@
 <h1 align="center">🧩 NotionKit Elements</h1>
 
 <p align="center">
-  <a href="https://www.npmjs.com/package/@jungherz-de/notionkit-elements"><img src="https://img.shields.io/badge/version-1.16.0-2383e2?style=flat-square" alt="Version"></a>
+  <a href="https://www.npmjs.com/package/@jungherz-de/notionkit-elements"><img src="https://img.shields.io/badge/version-1.18.0-2383e2?style=flat-square" alt="Version"></a>
   <a href="#"><img src="https://img.shields.io/badge/vanilla_JS-no_dependencies-448361?style=flat-square" alt="Vanilla JS"></a>
   <a href="#"><img src="https://img.shields.io/badge/elements-88-529cca?style=flat-square" alt="88 Elements"></a>
   <a href="LICENSE"><img src="https://img.shields.io/badge/license-MIT-9065b0?style=flat-square" alt="MIT License"></a>
-  <a href="CHANGELOG.md"><img src="https://img.shields.io/badge/changelog-v1.16.0-lightgrey?style=flat-square" alt="Changelog"></a>
+  <a href="CHANGELOG.md"><img src="https://img.shields.io/badge/changelog-v1.18.0-lightgrey?style=flat-square" alt="Changelog"></a>
   <a href="https://www.npmjs.com/package/@jungherz-de/notionkit-elements"><img src="https://img.shields.io/badge/npm-%40jungherz--de%2Fnotionkit--elements-cb3837?style=flat-square&logo=npm" alt="npm"></a>
 </p>
 
@@ -59,7 +59,7 @@ It is the **app layer** of the NotionKit family – three layers, one design lan
 | 🧩 **88 Elements** | Forms with copy field, image picker and date picker, content blocks with bookmarks, app shell & tree with the ☰ drawer and the collapsing sidebar, page shell with properties, panels, avatars and steps, overlays (modal, sheet, dialog, resizable side peek, tooltip, ⌘K palette, menus that float in and become sheets on a phone, popover, emoji picker, toast), database table, board, list, calendar & gallery with toolbar and filter pills, comments, AI thread |
 | 🎛️ **Form participation** | Input, textarea, select, switch, check, radio, slider, segmented and model card work natively with `<form>` via `ElementInternals`; radios group across shadow roots |
 | 🌗 **Theme sync** | One observer mirrors `data-theme` on `<html>` into every element |
-| 🪶 **Lightweight** | 281 KB minified / 56 KB gzipped (IIFE, foundation sheet included), no external dependencies |
+| 🪶 **Lightweight** | 288 KB minified / 58 KB gzipped (IIFE, foundation sheet included), no external dependencies |
 | 📦 **Five bundle shapes** | IIFE, minified IIFE, ESM, minified ESM with a source map (`esm.min.js`), and per-component ESM entries on a stable `base.js`, which import NotionKit's sheet instead of carrying a copy |
 | 🤖 **AI-ready** | `SKILL.md` with copy-paste markup, six app skeletons and the rules – an agent given only that file built a working app in the release test |
 
@@ -71,8 +71,8 @@ It is the **app layer** of the NotionKit family – three layers, one design lan
 <!DOCTYPE html>
 <html lang="en" data-theme="light">
 <head>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit@1.16.0/notionkit.min.css">
-  <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit-elements@1.16.0/dist/notionkit-elements.min.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit@1.18.0/notionkit.min.css">
+  <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit-elements@1.18.0/dist/notionkit-elements.min.js"></script>
 </head>
 <body class="nk-body">
   <nk-field label="Display name" desc="Shown next to your comments">
@@ -104,7 +104,7 @@ Without a build step, an import map can point at the minified module instead: `"
 
 Do not mix the full bundle with the per-component files: each brings its own `NkElement`. With the bundle, take `componentsSheet` and `NkElement` from the bundle (`NotionKitElements.componentsSheet` from the `<script>` build).
 
-Two prerequisites, always: `notionkit.css` on the document (the peer dependency, `>= 1.16.0`; 1.16.0 brings `--nk-block-space` and `flush` for blocks in a column, keeps a wide progress bar and a stretched button's label in shape and lays floating menus above dialogs, 1.15.0 brings table text with a tone and a second line, 1.14.0 brings the gallery view and a banner action that stands at the right edge again, 1.13.0 keeps fields inside narrow panels, leaves a page without icon its padding under the cover and makes cover heights tokens, 1.12.0 brings a tag or button beside a panel's title, lists and grids without outer margin, text values, steps with states in any order and in a row, scrolling tabs, a cap for full pages and buttons per table row, 1.11.0 keeps a floating menu inside an open modal or dialog in place and inside the window and brings the banner's action as a button, fields that share a row and tooltips of several lines, 1.10.1 lets a disabled button show its tooltip, 1.10.0 brings the collapsing sidebar, the resizable side peek, the dialog and the tooltip, 1.9.0 the date picker and the calendar view, 1.8.0 the side peek, the bookmark, the copy field and pictures on the profile row, 1.7.0 the sheet, menus that float in and become sheets on a phone, the sidebar drawer, the database toolbar with filter pills and the steps, 1.7.1 minified files that carry all of it, 1.6.0 page properties, page options, list view, panels, prose and the avatar, 1.5.1 the safe areas, 1.5.0 the Notion-2025 tokens, the nine tag colours and the filled inputs; from 1.5.0 on, Elements and the foundation share one version number – the elements are built and tested against the same release) and `class="nk-body"` on `<body>`. The elements ship no visual CSS of their own – every rule comes from the foundation. The bundle injects the design tokens once as `@layer notionkit-defaults`, so any plain `:root { --nk-accent: … }` of yours re-brands every element in both themes.
+Two prerequisites, always: `notionkit.css` on the document (the peer dependency, `>= 1.18.0`; 1.18.0 brings a bar and its label in one row, stacked properties that keep to their card on a phone and icons in the copy field, 1.17.0 brings a step's label and a gallery card as links, 1.16.0 brings `--nk-block-space` and `flush` for blocks in a column, keeps a wide progress bar and a stretched button's label in shape and lays floating menus above dialogs, 1.15.0 brings table text with a tone and a second line, 1.14.0 brings the gallery view and a banner action that stands at the right edge again, 1.13.0 keeps fields inside narrow panels, leaves a page without icon its padding under the cover and makes cover heights tokens, 1.12.0 brings a tag or button beside a panel's title, lists and grids without outer margin, text values, steps with states in any order and in a row, scrolling tabs, a cap for full pages and buttons per table row, 1.11.0 keeps a floating menu inside an open modal or dialog in place and inside the window and brings the banner's action as a button, fields that share a row and tooltips of several lines, 1.10.1 lets a disabled button show its tooltip, 1.10.0 brings the collapsing sidebar, the resizable side peek, the dialog and the tooltip, 1.9.0 the date picker and the calendar view, 1.8.0 the side peek, the bookmark, the copy field and pictures on the profile row, 1.7.0 the sheet, menus that float in and become sheets on a phone, the sidebar drawer, the database toolbar with filter pills and the steps, 1.7.1 minified files that carry all of it, 1.6.0 page properties, page options, list view, panels, prose and the avatar, 1.5.1 the safe areas, 1.5.0 the Notion-2025 tokens, the nine tag colours and the filled inputs; from 1.5.0 on, Elements and the foundation share one version number – the elements are built and tested against the same release) and `class="nk-body"` on `<body>`. The elements ship no visual CSS of their own – every rule comes from the foundation. The bundle injects the design tokens once as `@layer notionkit-defaults`, so any plain `:root { --nk-accent: … }` of yours re-brands every element in both themes.
 
 ## Elements
 
@@ -119,6 +119,64 @@ Two prerequisites, always: `notionkit.css` on the document (the peer dependency,
 
 Static content goes in through attributes and slots, dynamic data through properties (`tree.data`, `database.rows`, `palette.commands`). Interactions fire custom events with fixed names: `nk-select`, `nk-change`, `nk-view-change`, `nk-command`, `nk-toggle`, `nk-submit`, `nk-action`. No fetching, no two-way binding – the elements render what they get.
 
+## Languages
+
+The texts the elements bring along – button labels, placeholders and the names a screen reader announces – come in English and German. The language is the element's own: its nearest `lang` attribute, across shadow roots, else `<html lang>`; `de`, `de-DE` or `de-AT` give German, everything else English. An attribute on the element still wins, so a label with a meaning of its own stays (`choose-label="Upload logo"`).
+
+```js
+import { setStrings, builtInStrings } from '@jungherz-de/notionkit-elements'; // or from '…/base.js' with single elements
+setStrings({ newPage: '＋ New course' });                    // every language
+setStrings({ copy: 'Copier', close: 'Fermer' }, 'fr');       // a language of its own
+builtInStrings('de');                                        // the keys and the German texts, a copy
+```
+
+The elements on the page take new texts at once, after `setStrings()` and when `<html lang>` changes. An element of your own built on `NkElement` reads the same dictionary with `this.str('key')` – your keys too – and applies it again in `onStringsChanged()`. Percentages follow the language as well: a progress value of 45 reads `45%` in English and `45 %` in German, with a no-break space, as `Intl.NumberFormat` writes it (a column's `locale` first). Dates and month names already did.
+
+| Key | Element | Attribute | English | German |
+|---|---|---|---|---|
+| `copy` | `nk-copy-field` | `copy-label` | Copy | Kopieren |
+| `copied` | `nk-copy-field` | `copied-label` | Copied | Kopiert |
+| `show` | `nk-copy-field` | `show-label` | Show | Zeigen |
+| `hide` | `nk-copy-field` | `hide-label` | Hide | Verbergen |
+| `uploadImage` | `nk-image-picker` | `choose-label` | Upload image | Bild hochladen |
+| `changeImage` | `nk-image-picker` | `change-label` | Change image | Bild ändern |
+| `remove` | `nk-image-picker` | `remove-label` | Remove | Entfernen |
+| `close` | `nk-peek` | `close-label` | Close | Schließen |
+| `resize` | `nk-peek` | `resize-label` | Resize | Breite ändern |
+| `today` | `nk-calendar`, `nk-calendar-view` | `today-label` | Today | Heute |
+| `previousMonth` | `nk-calendar`, `nk-calendar-view` | `prev-label` | Previous month | Voriger Monat |
+| `nextMonth` | `nk-calendar`, `nk-calendar-view` | `next-label` | Next month | Nächster Monat |
+| `clear` | `nk-calendar` | `clear-label` | Clear | Leeren |
+| `time` | `nk-calendar` | `time-label` | Time | Uhrzeit |
+| `filter` | `nk-filter-bar` | `filter-label` | Filter | Filter |
+| `sort` | `nk-filter-bar` | `sort-label` | Sort | Sortieren |
+| `addFilter` | `nk-filter-bar` | `add-label` | ＋ Filter | ＋ Filter |
+| `removeFilter` | `nk-filter-bar` | `remove-label` | Remove filter | Filter entfernen |
+| `search` | `nk-filter-bar` | `placeholder` | Search … | Suchen … |
+| `closeSidebar` | `nk-sidebar` | `collapse-label` | Close sidebar | Seitenleiste schließen |
+| `newPage` | `nk-table-view`, `nk-list-view`, `nk-gallery-view` | `new-row-label` | ＋ New page | ＋ Neue Seite |
+| `commentPlaceholder` | `nk-comments` | `placeholder` | Comment … | Kommentieren … |
+| `send` | `nk-comments`, `nk-ai-input-row` | `send-label` (comments) | Send | Senden |
+| `askPlaceholder` | `nk-ai-input-row` | `placeholder` | Ask something … | Frag etwas … |
+| `commandPlaceholder` | `nk-cmdk` | `placeholder` | Search or type a command … | Suchen oder Befehl eingeben … |
+| `emojiPlaceholder` | `nk-emoji-picker` | `placeholder` | Search… | Suchen … |
+| `toggleTheme` | `nk-theme-toggle` | `title` | Toggle light / dark | Hell / Dunkel |
+| `synced` | `nk-synced` | `badge` | ⟳ synced | ⟳ synchronisiert |
+| `message` | `nk-ai-input-row` | – | Message | Nachricht |
+| `comment` | `nk-comments` | – | Comment | Kommentar |
+| `commandPalette` | `nk-cmdk` | – | Command palette | Befehlspalette |
+| `searchEmoji` | `nk-emoji-picker` | – | Search emoji | Emoji suchen |
+| `settings` | `nk-modal` | – | Settings | Einstellungen |
+| `title` | `nk-page-title` (editable) | – | Title | Titel |
+| `changeIcon` | `nk-page` | – | Change icon | Symbol ändern |
+| `breadcrumb` | `nk-breadcrumb` | – | Breadcrumb | Pfad |
+| `add` | `nk-tree-item` | – | Add | Hinzufügen |
+| `more` | `nk-tree-item` | – | More | Mehr |
+
+## Links
+
+A step of `<nk-steps>` with `href` and a card of `<nk-gallery-view>` whose row has an address in the field named by `href-key` are real links: they open in a new tab with a middle click and offer "Copy link" in the context menu. A plain left click, and Enter, fire the cancelable `nk-select` as before; cancel it and the browser stays, for a router of your own. A middle click or one with Cmd, Ctrl, Shift or Alt fires nothing and does what a link does. Steps and rows without an address stay buttons and cards.
+
 ## How it works
 
 - Each element's shadow root adopts the NotionKit **components** sheet only; tokens are inherited from the document. A `.nk-wrapper` inside the root mirrors `data-theme` from `<html>` – one observer for all instances.

package/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: notionkit-elements
-description: NotionKit Elements is a vanilla-JS Web Components library (v1.16.0) wrapping NotionKit CSS v1.16.0 – the calm, document-centric design system in the Notion idiom. 88 custom elements with the `nk-` prefix, Shadow DOM, automatic light/dark sync via data-theme on <html>, and form-associated controls. Use this reference whenever generating HTML that uses <nk-*> tags to get attributes, slots, events and composition right.
+description: NotionKit Elements is a vanilla-JS Web Components library (v1.18.0) wrapping NotionKit CSS v1.18.0 – the calm, document-centric design system in the Notion idiom. 88 custom elements with the `nk-` prefix, Shadow DOM, automatic light/dark sync via data-theme on <html>, and form-associated controls. Use this reference whenever generating HTML that uses <nk-*> tags to get attributes, slots, events and composition right.
 ---
 
 # NotionKit Elements – AI Component Reference
@@ -21,8 +21,8 @@ description: NotionKit Elements is a vanilla-JS Web Components library (v1.16.0)
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit@1.16.0/notionkit.min.css">
-  <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit-elements@1.16.0/dist/notionkit-elements.min.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit@1.18.0/notionkit.min.css">
+  <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit-elements@1.18.0/dist/notionkit-elements.min.js"></script>
 </head>
 <body class="nk-body">
   <nk-btn variant="primary">Save</nk-btn>
@@ -72,6 +72,8 @@ Never mix the full bundle with the per-component files – each brings its own `
 | Light-DOM children | Elements that copy children (`nk-select` options, breadcrumb crumbs) watch them; `element.refresh()` is the escape hatch. The empty string is a valid value. |
 | Moving elements | An element moved in the DOM keeps working – listeners and theme registration are re-armed on every connect. |
 | Attributes are live | Every documented attribute re-renders when changed after connect (`stat.setAttribute('value', '129')`, `el.open = true`); properties reflect to attributes where a setter is listed. |
+| Language | The texts an element brings along – button labels, placeholders, accessible names – come in English and German after its nearest `lang` (across shadow roots), else `<html lang>`. An attribute on the element wins. `setStrings({ key: '…' }, lang?)` adds or replaces texts, and the elements on the page take them at once; your own `NkElement` reads them with `this.str('key')`. Percentages follow as `Intl` writes them (`45 %` in German). |
+| Links | A step of `nk-steps` with `href` and a card of `nk-gallery-view` whose row has an address (`href-key`) are real `<a href>`: a middle click opens a new tab, the context menu copies the link. A plain click or Enter fires the cancelable `nk-select` – cancel it to route yourself; middle and modified clicks fire nothing. |
 
 
 # 3. Element Catalog (88 elements)
@@ -146,38 +148,41 @@ A native `<input>` inside the shadow root, wired into the surrounding form throu
 
 ### 3.3 `<nk-copy-field>` – Copy field
 
-A value to take along – a link, an address, a key – as tall as an input, with Copy inside on the right: it writes the clipboard and says “Copied” in green for a moment; where the clipboard is not allowed, the value is shown and selected for ⌘C. `secret` masks it behind Show/Hide, Copy still copies the real value. `value` set as a property is not reflected, so a key never lands in the markup.
+A value to take along – a link, an address, a key – as tall as an input, with Copy inside on the right: it writes the clipboard and says “Copied” in green for a moment; where the clipboard is not allowed, the value is shown and selected for ⌘C. `secret` masks it behind Show/Hide, Copy still copies the real value. `value` set as a property is not reflected, so a key never lands in the markup. Each button carries an icon beside its word: 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`.
 
 ```html
 <div style="max-width:340px"><nk-copy-field value="https://monahilft.notionkit.app" copy-label="Copy"></nk-copy-field></div>
 <div style="max-width:340px;margin-top:10px"><nk-copy-field value="ntn_4f2a9c1e8b7d6a5f3e2c" secret mono copy-label="Copy" show-label="Show"></nk-copy-field></div>
+<div style="max-width:340px;margin-top:10px"><nk-copy-field value="ntn_4f2a9c1e8b7d6a5f3e2c" secret mono icons copy-label="Copy" show-label="Show"></nk-copy-field></div>
 ```
 
 | Attribute | Type | Default | Description |
 |---|---|---|---|
 | `value` | string | – | The value. |
 | `secret` | boolean | – | Masked, with Show/Hide. |
+| `icons` | boolean | – | Icons instead of words at every width, not only on a phone. |
 | `mono` | boolean | – | Monospace – addresses, keys, code. |
 | `wrap` | boolean | – | A long value breaks instead of an ellipsis. |
 | `wide` | boolean | – | Fills the row. |
-| `copy-label` | string | `Copy` | Button text. |
-| `copied-label` | string | `Copied` | Text for the moment after. |
-| `show-label` | string | `Show` | Reveal (secret). |
-| `hide-label` | string | `Hide` | Mask again. |
+| `copy-label` | string | `Copy · Kopieren` | Button text. |
+| `copied-label` | string | `Copied · Kopiert` | Text for the moment after. |
+| `show-label` | string | `Show · Zeigen` | Reveal (secret). |
+| `hide-label` | string | `Hide · Verbergen` | Mask again. |
 
 **Events:** `nk-action` `{ action: 'copy', value, ok }` – Copy clicked; `ok` is false where the clipboard refused.
 
-**Properties:** `value`, `secret` · **Methods:** `copy()`
+**Properties:** `value`, `secret`, `icons` · **Methods:** `copy()`
 
-**Replaces:** `.nk-copy-field`, `.cf-value`, `.cf-btn`, `.copied`, `.mono`, `.wrap`, `.wide`
+**Replaces:** `.nk-copy-field`, `.cf-value`, `.cf-btn`, `.copied`, `.mono`, `.wrap`, `.wide`, `.icons`
 
 ```html
 <!-- equivalent class markup -->
-<div style="max-width:340px"><div class="nk-copy-field"><span class="cf-value">https://monahilft.notionkit.app</span><button class="cf-btn">Copy</button></div></div>
-<div style="max-width:340px;margin-top:10px"><div class="nk-copy-field mono"><span class="cf-value">••••••••••••••••••••••••</span><button class="cf-btn">Show</button><button class="cf-btn">Copy</button></div></div>
+<div style="max-width:340px"><div class="nk-copy-field"><span class="cf-value">https://monahilft.notionkit.app</span><button class="cf-btn" aria-label="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><span>Copy</span></button></div></div>
+<div style="max-width:340px;margin-top:10px"><div class="nk-copy-field mono"><span class="cf-value">••••••••••••••••••••••••</span><button class="cf-btn" aria-label="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><span>Show</span></button><button class="cf-btn" aria-label="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><span>Copy</span></button></div></div>
+<div style="max-width:340px;margin-top:10px"><div class="nk-copy-field mono icons"><span class="cf-value">••••••••••••••••••••••••</span><button class="cf-btn" aria-label="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><span>Show</span></button><button class="cf-btn" aria-label="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><span>Copy</span></button></div></div>
 ```
 
-**Small screens:** Keeps to its column – inside a panel even below its 210px: the value is cut, never the actions.
+**Small screens:** Keeps to its column – inside a panel even below its 210px: the value is cut, never the actions. The actions are icons, with the words as their names and tooltips.
 
 ### 3.4 `<nk-image-picker>` – Image picker
 
@@ -198,9 +203,9 @@ A picture for a person or a workspace, on NotionKit’s profile row: round, or `
 | `quality` | 0–1 | `0.82` | JPEG / WebP quality. |
 | `accept` | string | `image/*` | File dialog filter. |
 | `label` | string | – | Names the group. |
-| `choose-label` | string | `Upload image` | Without a picture. |
-| `change-label` | string | `Change image` | With a picture. |
-| `remove-label` | string | `Remove` | Remove button. |
+| `choose-label` | string | `Upload image · Bild hochladen` | Without a picture. |
+| `change-label` | string | `Change image · Bild ändern` | With a picture. |
+| `remove-label` | string | `Remove · Entfernen` | Remove button. |
 
 **Events:** `nk-change` `{ dataUrl, width, height, size }` – A picture chosen – or removed, with an empty dataUrl. · `nk-error` `{ message, name }` – The file cannot be decoded.
 
@@ -247,12 +252,12 @@ Notion’s date picker as one element (NotionKit 1.9.0): a month with Today and
 | `open` | boolean | – | Floating: shown. |
 | `align` | end | start | `end` | Floating: right or left edge on the anchor’s. |
 | `label` | string | – | Names the month group for screen readers. |
-| `today-label` | string | `Today` | Today button. |
-| `prev-label` | string | `Previous month` | Names ‹. |
-| `next-label` | string | `Next month` | Names ›. |
+| `today-label` | string | `Today · Heute` | Today button. |
+| `prev-label` | string | `Previous month · Voriger Monat` | Names ‹. |
+| `next-label` | string | `Next month · Nächster Monat` | Names ›. |
 | `week-label` | string | `W · KW` | Head of the week column. |
-| `time-label` | string | `Time` | Names the time field. |
-| `clear-label` | string | `Clear` | Clear button. |
+| `time-label` | string | `Time · Uhrzeit` | Names the time field. |
+| `clear-label` | string | `Clear · Leeren` | Clear button. |
 | `name` | string | – | Form field name (FormData key). |
 | `disabled` | boolean | – | Disables the control. |
 | `required` | boolean | – | A value is required; validity is set on the host. |
@@ -605,10 +610,11 @@ The select option as Notion draws it, in its nine colours. The colour modifier c
 
 ### 3.15 `<nk-progress>` – Progress
 
-A 60px bar with an optional label. `value`/`max` set the fill; the bar carries `role="progressbar"`. `wide` fills its row, and in a flex column – a panel – it stays a 6px bar.
+A 60px bar with an optional label. `value`/`max` set the fill; the bar carries `role="progressbar"`. `wide` fills its row, and in a flex column – a panel – it stays a 6px bar. With a `label` the bar and its label form one `.nk-progress-row`: the label sits beside the bar, on its middle, in a panel too, where the host – `display: contents` – would let them stand one under the other.
 
 ```html
 <nk-progress value="72" label="72%"></nk-progress>
+<div class="nk-panel" style="margin-top:12px"><h3>Progress</h3><nk-progress value="40" label="40%" wide></nk-progress></div>
 ```
 
 | Attribute | Type | Default | Description |
@@ -620,11 +626,12 @@ A 60px bar with an optional label. `value`/`max` set the fill; the bar carries `
 
 
 
-**Replaces:** `.nk-progress`, `.nk-progress-label`, `.wide`
+**Replaces:** `.nk-progress`, `.nk-progress-label`, `.wide`, `.nk-progress-row`
 
 ```html
 <!-- equivalent class markup -->
-<span class="nk-progress"><i style="width:72%"></i></span><span class="nk-progress-label">72%</span>
+<span class="nk-progress-row"><span class="nk-progress"><i style="width:72%"></i></span><span class="nk-progress-label">72%</span></span>
+<div class="nk-panel" style="margin-top:12px"><h3>Progress</h3><span class="nk-progress-row"><span class="nk-progress wide"><i style="width:40%"></i></span><span class="nk-progress-label">40%</span></span></div>
 ```
 
 **Small screens:** Unchanged.
@@ -938,7 +945,7 @@ The left rail: workspace slot on top, a scrolling default slot for the tree, a p
 | `open` | boolean | – | Drawer state on small screens (no effect on desktop). |
 | `collapsible` | boolean | – | Shows the « that collapses it on the desktop, and ⌘\. |
 | `collapsed` | boolean | – | Collapsed on the desktop (no effect on a phone). |
-| `collapse-label` | string | `Close sidebar` | Name and tooltip of the «. |
+| `collapse-label` | string | `Close sidebar · Seitenleiste schließen` | Name and tooltip of the «. |
 
 **Slots:** `workspace` – `nk-workspace-switcher`. · `(default)` – The tree (scrolls). · `footer` – Pinned bottom rows (Settings, Trash).
 
@@ -1196,7 +1203,7 @@ The ☀️/🌙 button. Flips `data-theme` on `<html>`, remembers the choice in
 
 ### 3.34 `<nk-tab-bar>` – Tab bar (mobile)
 
-The thumb-reachable twin of the sidebar for phones and installed PWAs. Put it last inside `nk-app`: it is slotted into the main column below the scrolling page, so it never moves and no bottom padding is needed. Keeps exactly one `nk-tab-bar-item` active (listening to `nk-select`); a `drawer` item opens the sidebar instead. Needs NotionKit CSS 1.2.0.
+The thumb-reachable twin of the sidebar for phones and installed PWAs. Put it last inside `nk-app`: it is slotted into the main column below the scrolling page, so it never moves and no bottom padding is needed. Keeps the `nk-tab-bar-item` whose value is `value` active (listening to `nk-select`); a `drawer` item opens the sidebar instead. A value no item has – a page without a tab of its own, opened from the drawer – marks the `drawer` item, as iOS marks “More”; without one no item is active. Needs NotionKit CSS 1.2.0.
 
 ```html
 <div style="max-width:390px;border:1px solid var(--nk-border);border-radius:12px;overflow:hidden"><nk-tab-bar always value="inbox">
@@ -1210,7 +1217,7 @@ The thumb-reachable twin of the sidebar for phones and installed PWAs. Put it la
 
 | Attribute | Type | Default | Description |
 |---|---|---|---|
-| `value` | string | – | Active item value (default: the item with `active`, else the first). |
+| `value` | string | – | Active item value (default: the item with `active`, else the first); a value no item has marks the `drawer` item. |
 | `always` | boolean | – | Visible at every width, not only below 860px. |
 | `fixed` | boolean | – | Pinned to the viewport bottom instead of sitting in the column – for standalone PWAs; a spacer keeps its height (`--nk-tab-bar-height` + safe area) in the flow. |
 | `floating` | boolean | – | A fixed capsule with rounded corners instead of the full-width bar. |
@@ -1624,7 +1631,7 @@ Content that appears in several places, framed with a badge.
 
 | Attribute | Type | Default | Description |
 |---|---|---|---|
-| `badge` | string | `⟳ synced` | Badge text. |
+| `badge` | string | `⟳ synced · ⟳ synchronisiert` | Badge text. |
 
 **Slots:** `(default)` – Content.
 
@@ -1739,13 +1746,13 @@ Plain `<button value>` children stay in the light DOM (the stylesheet’s slotte
 
 ### 3.52 `<nk-steps>` – Steps
 
-A short flow – connecting an account, setting up a model – calm and vertical: a numbered circle per step joined by a hairline, done steps with a check on the green tag, the current one ringed in the accent and marked `aria-current="step"`. `current` counts from 1; one past the last marks every step done, and `next()` moves on. The `steps` attribute is a comma-separated list; the property also takes `{ label, desc }` objects for a line under the label. A `state` in such an object – `done`, `skipped` or `open` – wins over the order, for a wizard that lets a step be skipped while a later one is done; a skipped step shows a dashed ring around a dash. `selectable` makes each label a button: a click or Enter fires `nk-select { index, value, step }` – `index` counts from 1, like `current` – and, unless cancelled, makes that step current. `horizontal` sets the steps in one row above a wizard.
+A short flow – connecting an account, setting up a model – calm and vertical: a numbered circle per step joined by a hairline, done steps with a check on the green tag, the current one ringed in the accent and marked `aria-current="step"`. `current` counts from 1; one past the last marks every step done, and `next()` moves on. The `steps` attribute is a comma-separated list; the property also takes `{ label, desc }` objects for a line under the label. A `state` in such an object – `done`, `skipped` or `open` – wins over the order, for a wizard that lets a step be skipped while a later one is done; a skipped step shows a dashed ring around a dash. `selectable` makes each label a button: a click or Enter fires `nk-select { index, value, step }` – `index` counts from 1, like `current` – and, unless cancelled, makes that step current. A step with `href` shows its label as a link, with or without `selectable` – to open a chapter in a new tab or copy its address. A plain click, and Enter, fire the same `nk-select`; cancel it and the browser stays, for a router of your own. A middle click or one with Cmd, Ctrl, Shift or Alt fires nothing and does what a link does. `horizontal` sets the steps in one row above a wizard.
 
 ```html
 <nk-steps label="Connect your own model" current="2"></nk-steps>
 <script>{ document.currentScript.previousElementSibling.steps = [{ label: 'Choose a provider', desc: 'Anthropic' }, 'Enter the API key', 'Test the connection']; }</script>
 <div style="margin-top:16px"><nk-steps id="stepsWizard" label="Connect your own model" current="3" horizontal selectable></nk-steps></div>
-<script>{ document.getElementById('stepsWizard').steps = [{ label: 'Choose a provider', state: 'done' }, { label: 'Enter the API key', desc: 'skipped', state: 'skipped' }, 'Test the connection']; }</script>
+<script>{ document.getElementById('stepsWizard').steps = [{ label: 'Choose a provider', state: 'done', href: '#nk-steps' }, { label: 'Enter the API key', desc: 'skipped', state: 'skipped' }, 'Test the connection']; }</script>
 ```
 
 | Attribute | Type | Default | Description |
@@ -1756,7 +1763,7 @@ A short flow – connecting an account, setting up a model – calm and vertical
 | `selectable` | boolean | – | Labels are buttons that jump to their step. |
 | `horizontal` | boolean | – | One row above a wizard. |
 
-**Events:** `nk-select` `{ index, value, step }` – A step clicked (with `selectable`); cancel it to stay.
+**Events:** `nk-select` `{ index, value, step }` – A step clicked (with `selectable`, or its link with a plain click or Enter); cancel it to stay.
 
 **Properties:** `steps`, `current`, `selectable`, `horizontal` · **Methods:** `next()`, `select(index)`
 
@@ -1770,7 +1777,7 @@ A short flow – connecting an account, setting up a model – calm and vertical
   <li class="nk-step"><span class="st-mark">3</span><span>Test the connection</span></li>
 </ol>
 <div style="margin-top:16px"><ol class="nk-steps horizontal" aria-label="Connect your own model">
-  <li class="nk-step done"><span class="st-mark">✓</span><button type="button" class="st-label">Choose a provider</button></li>
+  <li class="nk-step done"><span class="st-mark">✓</span><a class="st-label" href="#nk-steps">Choose a provider</a></li>
   <li class="nk-step skipped"><span class="st-mark">–</span><button type="button" class="st-label">Enter the API key<span class="st-desc">skipped</span></button></li>
   <li class="nk-step current" aria-current="step"><span class="st-mark">3</span><button type="button" class="st-label">Test the connection</button></li>
 </ol></div>
@@ -2205,12 +2212,12 @@ Notion’s side peek: a database row opens at the right edge, full height, next
 |---|---|---|---|
 | `open` | boolean | – | Shown. |
 | `label` | string | – | The dialog’s name – the entry’s title. |
-| `close-label` | string | `Close` | Name of ». |
+| `close-label` | string | `Close · Schließen` | Name of ». |
 | `resizable` | boolean | – | The left edge makes it wider or narrower – pointer and arrow keys; the width is the token `--nk-peek-width` on `:root`. |
 | `width` | px | `560` | Sets the width, within min and max. |
 | `min` | px | `380` | Narrowest. |
 | `max` | px | `window − 320` | Widest. |
-| `resize-label` | string | `Resize` | Name of the edge. |
+| `resize-label` | string | `Resize · Breite ändern` | Name of the edge. |
 | `inset` | boolean | – | While open on the desktop, the page’s `nk-app` makes room instead of lying under it – for a chart whose bars must stay visible. |
 
 **Slots:** `(default)` – The page: title, properties, prose, comments. · `actions` – Buttons beside » – open as page, share.
@@ -2682,7 +2689,7 @@ Renders `columns` × `rows` as the NotionKit table. Cells are polymorphic (`text
 | `badge` | string | – | Tab badge. |
 | `count` | boolean | – | Row count as badge. |
 | `new-row` | boolean | – | Show the add row. |
-| `new-row-label` | string | `＋ New page` | Its text. |
+| `new-row-label` | string | `＋ New page · ＋ Neue Seite` | Its text. |
 | `sortable` | boolean | – | Header click sorts locally. |
 | `sort-key` | string | – | Sorted column. |
 | `sort-dir` | asc | desc | – | Direction. |
@@ -2794,7 +2801,7 @@ The third database view: one line per row – icon and title, the `meta-keys` on
 | `title-key` | string | – | Title column. |
 | `meta-keys` | list | – | Comma-separated columns on the right. |
 | `new-row` | boolean | – | Show the add row. |
-| `new-row-label` | string | `＋ New page` | Its text. |
+| `new-row-label` | string | `＋ New page · ＋ Neue Seite` | Its text. |
 
 **Events:** `nk-select` `{ row, id }` – Row clicked or Enter. · `nk-action` `{ action: 'new-row' }` – Add row clicked.
 
@@ -2852,9 +2859,9 @@ The fourth database view (NotionKit 1.9.0): a month, the rows as cards on their
 | `weekend` | list | – | Weekdays not worked, washed – `6,0`. |
 | `today` | YYYY-MM-DD | – | Another today – for tests and docs. |
 | `locale` | BCP 47 | `lang` | Language of the names and the week. |
-| `today-label` | string | `Today` | Today button. |
-| `prev-label` | string | `Previous month` | Names ‹. |
-| `next-label` | string | `Next month` | Names ›. |
+| `today-label` | string | `Today · Heute` | Today button. |
+| `prev-label` | string | `Previous month · Voriger Monat` | Names ‹. |
+| `next-label` | string | `Next month · Nächster Monat` | Names ›. |
 | `week-label` | string | `W · KW` | Head of the week column. |
 
 **Events:** `nk-select` `{ row, id }` – Card clicked or Enter. · `nk-month` `{ month }` – Another month shown.
@@ -2882,7 +2889,7 @@ The fourth database view (NotionKit 1.9.0): a month, the rows as cards on their
 
 ### 3.82 `<nk-gallery-view>` – Gallery view
 
-The fifth database view: the rows as cards with a picture on top, in a grid that fills the row – Notion’s gallery, for a course catalog or a reading list. `cover-key` names the row field with the picture’s URL (default: `cover`); a row without one shows the cover gradient, `no-cover` leaves the pictures out. The picture stands in 2:1, cropped to fill; `fit` shows it whole, for logos. `size` small, medium or large sets the card size – columns from 180, 260 or 340px. Cards show the title and the `meta-keys` (default: the select and date columns) and fire `nk-select` on a click, Enter or Space; `new-row` adds the add card.
+The fifth database view: the rows as cards with a picture on top, in a grid that fills the row – Notion’s gallery, for a course catalog or a reading list. `cover-key` names the row field with the picture’s URL (default: `cover`); a row without one shows the cover gradient, `no-cover` leaves the pictures out. The picture stands in 2:1, cropped to fill; `fit` shows it whole, for logos. `size` small, medium or large sets the card size – columns from 180, 260 or 340px. Cards show the title and the `meta-keys` (default: the select and date columns) and fire `nk-select` on a click, Enter or Space; `new-row` adds the add card. `href-key` names the row field with a card’s address: such a card is 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, and Enter, fire the same `nk-select`; cancel it and the browser stays. A middle click or one with Cmd, Ctrl, Shift or Alt fires nothing and does what a link does.
 
 ```html
 <nk-gallery-view meta-keys="status,due" new-row></nk-gallery-view>
@@ -2916,14 +2923,15 @@ The fifth database view: the rows as cards with a picture on top, in a grid that
 | `fit` | boolean | – | Show a picture whole instead of cropped. |
 | `title-key` | string | – | Title column. |
 | `meta-keys` | list | – | Comma-separated columns under the title. |
+| `href-key` | string | – | Row field with the card’s address; such a card is a link. |
 | `new-row` | boolean | – | Show the add card. |
-| `new-row-label` | string | `＋ New page` | Its text. |
+| `new-row-label` | string | `＋ New page · ＋ Neue Seite` | Its text. |
 
-**Events:** `nk-select` `{ row, id, value }` – Card clicked, Enter or Space. · `nk-action` `{ action: 'new-row' }` – Add card clicked.
+**Events:** `nk-select` `{ row, id, value }` – Card clicked, Enter or Space; a link card with a plain click or Enter – cancel it to stay. · `nk-action` `{ action: 'new-row' }` – Add card clicked.
 
 **Properties:** `columns`, `rows`, `data` · **Methods:** `refresh()`
 
-**Replaces:** `.nk-gallery`, `.small`, `.large`, `.fit`, `.nk-card`, `.nk-cover`, `.card-title`, `.card-meta`, `.nk-new-row`
+**Replaces:** `.nk-gallery`, `.small`, `.large`, `.fit`, `.nk-card`, `.card-item`, `.nk-cover`, `.card-title`, `.card-meta`, `.nk-new-row`
 
 ```html
 <!-- equivalent class markup -->
@@ -2954,8 +2962,8 @@ The filters in effect as NotionKit’s filter pills – `.active` with an accent
 | `no-filter` | boolean | – | Hide the Filter tool. |
 | `no-sort` | boolean | – | Hide the Sort tool. |
 | `filter-label` | string | `Filter` | Text of the Filter tool. |
-| `sort-label` | string | `Sort` | Text of the Sort tool. |
-| `remove-label` | string | `Remove filter` | The ×’s name, followed by the pill’s text. |
+| `sort-label` | string | `Sort · Sortieren` | Text of the Sort tool. |
+| `remove-label` | string | `Remove filter · Filter entfernen` | The ×’s name, followed by the pill’s text. |
 | `search` | boolean | – | Show the search field. |
 | `placeholder` | string | – | Search placeholder. |
 
@@ -2988,7 +2996,7 @@ A left-ruled thread of `nk-comment`s with an input row. Enter or the button fire
 | Attribute | Type | Default | Description |
 |---|---|---|---|
 | `placeholder` | string | – | Input placeholder. |
-| `send-label` | string | `Send` | Button text. |
+| `send-label` | string | `Send · Senden` | Button text. |
 | `no-input` | boolean | – | Read-only thread. |
 | `disabled` | boolean | – | Input disabled. |
 
@@ -3142,8 +3150,8 @@ Eight skeletons, one per app shape, mirroring the NotionKit CSS SKILL.md. Copy o
 <html lang="en" data-theme="light">
 <head>
   <meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit@1.16.0/notionkit.min.css">
-  <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit-elements@1.16.0/dist/notionkit-elements.min.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit@1.18.0/notionkit.min.css">
+  <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit-elements@1.18.0/dist/notionkit-elements.min.js"></script>
 </head>
 <body class="nk-body">
 <nk-app>
@@ -3224,8 +3232,8 @@ Rules of the shell: `nk-sidebar`, `nk-topbar` and `nk-page` are `display: conten
 <html lang="en" data-theme="light">
 <head>
   <meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit@1.16.0/notionkit.min.css">
-  <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit-elements@1.16.0/dist/notionkit-elements.min.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit@1.18.0/notionkit.min.css">
+  <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit-elements@1.18.0/dist/notionkit-elements.min.js"></script>
 </head>
 <body class="nk-body">
 <nk-app>
@@ -3332,8 +3340,8 @@ Data contract: `columns` describe the properties (`type`: text | select | multi-
 <html lang="en" data-theme="light">
 <head>
   <meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit@1.16.0/notionkit.min.css">
-  <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit-elements@1.16.0/dist/notionkit-elements.min.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit@1.18.0/notionkit.min.css">
+  <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit-elements@1.18.0/dist/notionkit-elements.min.js"></script>
 </head>
 <body class="nk-body">
 <nk-app>
@@ -3392,8 +3400,8 @@ Data contract: `columns` describe the properties (`type`: text | select | multi-
 <html lang="en" data-theme="light">
 <head>
   <meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit@1.16.0/notionkit.min.css">
-  <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit-elements@1.16.0/dist/notionkit-elements.min.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit@1.18.0/notionkit.min.css">
+  <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit-elements@1.18.0/dist/notionkit-elements.min.js"></script>
 </head>
 <body class="nk-body">
 <!-- your app -->
@@ -3470,8 +3478,8 @@ The open/close contract is one attribute: `settings.open = true`, `settings.show
 <html lang="en" data-theme="light">
 <head>
   <meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit@1.16.0/notionkit.min.css">
-  <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit-elements@1.16.0/dist/notionkit-elements.min.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit@1.18.0/notionkit.min.css">
+  <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit-elements@1.18.0/dist/notionkit-elements.min.js"></script>
 </head>
 <body class="nk-body">
 <div class="nk-page" style="padding-top:48px">
@@ -3517,8 +3525,8 @@ The open/close contract is one attribute: `settings.open = true`, `settings.show
 <html lang="en" data-theme="light">
 <head>
   <meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit@1.16.0/notionkit.min.css">
-  <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit-elements@1.16.0/dist/notionkit-elements.min.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit@1.18.0/notionkit.min.css">
+  <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit-elements@1.18.0/dist/notionkit-elements.min.js"></script>
 </head>
 <body class="nk-body">
 <nk-page narrow icon="📘" cover>
@@ -3562,8 +3570,8 @@ Note `narrow`: the page is the document, so there is no inner scroll wrapper –
 <html lang="en" data-theme="light">
 <head>
   <meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit@1.16.0/notionkit.min.css">
-  <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit-elements@1.16.0/dist/notionkit-elements.min.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit@1.18.0/notionkit.min.css">
+  <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit-elements@1.18.0/dist/notionkit-elements.min.js"></script>
 </head>
 <body class="nk-body">
 <nk-app>
@@ -3617,8 +3625,8 @@ Note `narrow`: the page is the document, so there is no inner scroll wrapper –
 <html lang="en" data-theme="light">
 <head>
   <meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit@1.16.0/notionkit.min.css">
-  <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit-elements@1.16.0/dist/notionkit-elements.min.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit@1.18.0/notionkit.min.css">
+  <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit-elements@1.18.0/dist/notionkit-elements.min.js"></script>
 </head>
 <body class="nk-body">
 <!-- A narrow column, centred: layout is yours, so it is inline. -->
@@ -3707,6 +3715,11 @@ Form controls additionally re-dispatch a native, bubbling `change` event, so `fo
 | A padding on the page while the side peek is open, or a peek wider by CSS | `<nk-peek resizable inset>` – the width is `--nk-peek-width`, `nk-resize` to keep it |
 | A hand-built month grid, or `<input type="date">` for a date property | `<nk-calendar floating sheet>` and `picker.show(cell)` – the table's `nk-select` names the `key` and the `cell`; `range` for start and end, `weeks` for calendar weeks, `days` for holidays and marks |
 | Rows laid out in a table of weeks to show them by date | `<nk-calendar-view date-key="due">` in `<nk-database>` – a tab like table and board |
+| German labels on every instance (`copy-label="Kopieren"`, `today-label="Heute"`, `new-row-label="＋ Neue Seite"` …) | `<html lang="de">` – the elements bring the German texts, the accessible names too; keep an attribute for a label with a meaning of its own, `setStrings()` for another language |
+| `<nk-steps selectable>` or a gallery whose `nk-select` sets `location.href` | `href` on the step, `href-key` on the gallery: a real link opens in a new tab and can be copied; cancel `nk-select` to route yourself |
+| A `<div style="display:flex">` around `<nk-progress wide label>` in a panel so the label stays beside the bar | Not needed: with a `label` the element sets bar and label in one `.nk-progress-row` – beside each other in a flex column too |
+| `copy-label="⧉"` or other glyphs to save room in `<nk-copy-field>` on a phone | Nothing: on a phone the buttons show icons by themselves, the words stay their names; `icons` does it at every width |
+| `<nk-tab-bar>` kept on the last tab while a page from the drawer is open | Set `value` to that page's own value: a value no item has marks the `drawer` item ("More"), as on iOS |
 
 
 # 7. Quick Reference
@@ -3715,7 +3728,7 @@ Form controls additionally re-dispatch a native, bubbling `change` event, so `fo
 |---|---|---|---|---|
 | `<nk-btn>` | forms | `variant`, `active`, `small`, `disabled` | `(default)` | `click` |
 | `<nk-input>` | forms | `value`, `type`, `placeholder`, `name` | – | `nk-change`, `nk-input` |
-| `<nk-copy-field>` | forms | `value`, `secret`, `mono`, `wrap` | – | `nk-action` |
+| `<nk-copy-field>` | forms | `value`, `secret`, `icons`, `mono` | – | `nk-action` |
 | `<nk-image-picker>` | forms | `src`, `initials`, `square`, `max` | – | `nk-change`, `nk-error` |
 | `<nk-calendar>` | forms | `value`, `month`, `min`, `max` | – | `nk-change`, `nk-month`, `nk-toggle` |
 | `<nk-textarea>` | forms | `value`, `placeholder`, `rows`, `name` | `(default)` | `nk-change`, `nk-input` |
@@ -3818,12 +3831,13 @@ Form controls additionally re-dispatch a native, bubbling `change` event, so `fo
 | Base classes `NkElement` / `NkFormElement` | `src/base.js` – shadow root, adopted `componentsSheet`, theme wrapper, `render/setupEvents/teardownEvents/onAttributeChanged/projectLightDom/refresh`, ElementInternals |
 | Token injection | `src/base.js` – once per page, `@layer notionkit-defaults { tokensCss }` appended to `document.adoptedStyleSheets` |
 | Theme sync | one `MutationObserver` on `<html>[data-theme]`, a `Set` of instances, `.nk-wrapper[data-theme]` inside each root |
+| Texts | `src/util/strings.js` – the English and German dictionary and `setStrings()`; `NkElement#str(key)` reads it in the element's language, `onStringsChanged()` runs after `setStrings()` and when `<html lang>` changes |
 | Components | `src/components/{forms,content,shell,page,overlays,data}/nk-*.js`, one tag per file, `customElements.define` at the bottom |
 | Build | Rollup: IIFE, minified IIFE, ESM, and per-component ESM entries on a stable `dist/components/base.js` that import NotionKit's sheet (`@jungherz-de/notionkit/notionkit-styles.js`) instead of inlining it; the full bundles inline it and export `componentsSheet` |
-| Peer | `@jungherz-de/notionkit >= 1.16.0` – from 1.5.0 on the elements and the foundation share one version number; the bundle embeds that release's stylesheet, so keep them in step |
+| Peer | `@jungherz-de/notionkit >= 1.18.0` – from 1.5.0 on the elements and the foundation share one version number; the bundle embeds that release's stylesheet, so keep them in step |
 
 Lifecycle: construct (attach shadow, adopt sheets) → first connect (wrapper + `render()`) → every connect (`setupEvents()`, theme registration, light-DOM observer) → `attributeChangedCallback` → `onAttributeChanged` → disconnect (`teardownEvents()`, unregister).
 
 
 ---
-*NotionKit Elements v1.16.0 · wrapping NotionKit CSS v1.16.0 · MIT · Jungherz GmbH*
+*NotionKit Elements v1.18.0 · wrapping NotionKit CSS v1.18.0 · MIT · Jungherz GmbH*