@jungherz-de/notionkit-elements 1.20.0 → 1.21.0

package/CHANGELOG.md

@@ -4,6 +4,65 @@ 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.21.0] – 2026-10-18
+
+Built against NotionKit CSS 1.21.0 (peer `>= 1.21.0`).
+
+### Added
+- **Select all from the header of a checkbox column (#4).** A `checkbox`
+  column with `selectAll: true` is a selection column: its header holds the
+  cells' own checkbox instead of a name – empty when no row is chosen, a dash
+  for some, a check for all (`th.select-all`, NotionKit 1.21.0) – and sorts
+  nothing. A click or Space sets the column for every row the view has – a
+  dash selects all, as in Notion –, renders the cells again and fires **one**
+  `nk-change { key, value, all: true, rows }`, so an app that keeps its own
+  selection follows with one update instead of one per row; Space leaves the
+  focus on the header box. A row's own box keeps the header in step without
+  losing its focus. Without rows the header box is disabled. What "all" means
+  beyond the view's rows – more pages, a filter on the server – stays with
+  the app. Its accessible name is the new built-in text `selectAll`
+  ("Select all" / "Alle auswählen"). Requested by Mailverse for its
+  quarantine list.
+- `<nk-check indeterminate>` finally shows its mixed state – a dash in the
+  accent box (NotionKit 1.21.0); it looked empty before. The docs show it
+  next to the table's selection column.
+
+### Fixed
+- Through NotionKit 1.21.0: a table row with a checkbox cell was 39.5px
+  instead of 36px; a selection column would have grown every row.
+
+### Tests
+- The parity test runs a script in the class markup too, for what only a
+  script sets – an `indeterminate` checkbox – as the docs page does.
+
+## [1.20.1] – 2026-10-14
+
+Elements only; NotionKit CSS stays at 1.20.0 (peer `>= 1.20.0`).
+
+### Fixed
+- **`<nk-tooltip>` follows the pointer and the focus inside a shadow root
+  (#3).** Moving from one `[data-tooltip]` to the next in the same shadow
+  root never updated the tooltip – the first one stayed, or none appeared –
+  for the pointer and for Tab alike; `<nk-copy-field icons secret>` kept
+  saying "Show" over Copy, an app's toolbar or chart bars in one root did
+  the same. `pointerover`, `focusin` and `focusout` carry a `relatedTarget`,
+  and when target and `relatedTarget` share a shadow tree the DOM standard
+  ends the event path at its host, so the listeners on the document never
+  heard of the move. The tooltip now also reads `pointermove` (no
+  `relatedTarget`, it always reaches the document) and acts only when the
+  element under the pointer changes, so a hand resting on the page leaves a
+  tooltip the keyboard or `show(rect)` opened alone; and it catches a key
+  that moved the focus – Tab, Option+Tab in Safari, the arrow keys of a
+  roving tab stop that moves the focus in its own `keydown` – on `keyup`,
+  against the focus recorded before the key went down. Nested shadow roots
+  are followed too. A focus move by script alone inside one shadow root
+  stays unseen. Reported by Mailverse.
+- **Leaving the window** over a `[data-tooltip]` left its tooltip standing,
+  and one still waiting appeared after the pointer had gone. It now goes
+  with the pointer (`pointerout` without a `relatedTarget`); a tooltip the
+  keyboard or `show(rect)` opened is not the pointer's and stays. Found
+  while testing #3.
+
 ## [1.20.0] – 2026-10-12
 
 Built against NotionKit CSS 1.20.0 (peer `>= 1.20.0`).
@@ -778,6 +837,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.21.0]: https://github.com/JUNGHERZ/NotionKit-Elements/releases/tag/v1.21.0
+[1.20.1]: https://github.com/JUNGHERZ/NotionKit-Elements/releases/tag/v1.20.1
 [1.20.0]: https://github.com/JUNGHERZ/NotionKit-Elements/releases/tag/v1.20.0
 [1.19.0]: https://github.com/JUNGHERZ/NotionKit-Elements/releases/tag/v1.19.0
 [1.18.0]: https://github.com/JUNGHERZ/NotionKit-Elements/releases/tag/v1.18.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.20.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.21.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.20.0-lightgrey?style=flat-square" alt="Changelog"></a>
+  <a href="CHANGELOG.md"><img src="https://img.shields.io/badge/changelog-v1.21.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>
 
@@ -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.20.0/notionkit.min.css">
-  <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit-elements@1.20.0/dist/notionkit-elements.min.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit@1.21.0/notionkit.min.css">
+  <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit-elements@1.21.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.19.1`; 1.19.1 keeps a toast with an × at its height, 1.19.0 brings the toast with an action, 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.
+Two prerequisites, always: `notionkit.css` on the document (the peer dependency, `>= 1.21.0`; 1.21.0 brings the select-all header of a table and the dash of an indeterminate checkbox and keeps a row with a checkbox at 36px, 1.20.0 brings the appearance glyph of a three-state theme toggle, 1.19.1 keeps a toast with an × at its height, 1.19.0 brings the toast with an action, 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
 
@@ -161,6 +161,7 @@ The elements on the page take new texts at once, after `setStrings()` and when `
 | `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 |
+| `selectAll` | `nk-table-view` (a `checkbox` column with `selectAll`) | – | Select all | Alle auswählen |
 | `appearance` | `nk-theme-toggle` (`modes` with `auto`) | `title` | Appearance: {mode} – click: {next} | Darstellung: {mode} – Klick: {next} |
 | `themeAuto` | `nk-theme-toggle` (`modes` with `auto`) | – | automatic (follows the system) | automatisch (wie das System) |
 | `themeLight` | `nk-theme-toggle` (`modes` with `auto`) | – | light | hell |

package/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: notionkit-elements
-description: NotionKit Elements is a vanilla-JS Web Components library (v1.20.0) wrapping NotionKit CSS v1.20.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.21.0) wrapping NotionKit CSS v1.21.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.20.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.20.0/notionkit.min.css">
-  <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit-elements@1.20.0/dist/notionkit-elements.min.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit@1.21.0/notionkit.min.css">
+  <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit-elements@1.21.0/dist/notionkit-elements.min.js"></script>
 </head>
 <body class="nk-body">
   <nk-btn variant="primary">Save</nk-btn>
@@ -412,9 +412,10 @@ Renders `button.nk-switch[role=switch]`; the stylesheet keys the knob on `aria-c
 
 ### 3.9 `<nk-check>` – Checkbox
 
-A `label.nk-check` with a custom-drawn checkbox; the label text is slotted, so clicking it toggles the box.
+A `label.nk-check` with a custom-drawn checkbox; the label text is slotted, so clicking it toggles the box. `indeterminate` shows a dash (NotionKit 1.21.0) – for a box over a group partly chosen.
 
 ```html
+<nk-check indeterminate>All</nk-check>
 <nk-check name="digest" value="weekly" checked>Weekly digest</nk-check>
 <nk-check name="digest" value="mentions">Mentions only</nk-check>
 ```
@@ -437,6 +438,7 @@ A `label.nk-check` with a custom-drawn checkbox; the label text is slotted, so c
 
 ```html
 <!-- equivalent class markup -->
+<label class="nk-check"><input type="checkbox">All</label><script>document.currentScript.previousElementSibling.querySelector('input').indeterminate = true</script>
 <label class="nk-check"><input type="checkbox" name="digest" value="weekly" checked>Weekly digest</label>
 <label class="nk-check"><input type="checkbox" name="digest" value="mentions">Mentions only</label>
 ```
@@ -2562,7 +2564,7 @@ One inverted pill at the bottom centre, above every overlay; over a tab bar at t
 
 ### 3.76 `<nk-tooltip>` – Tooltip
 
-Notion’s hover hint in the toast’s colours, a shortcut muted beside it. One `<nk-tooltip>` without `for` serves every element with `data-tooltip` (and `data-tooltip-key`) on the page, inside shadow roots too – a whole toolbar in one element; with `for` it belongs to one element and shows its own content and `shortcut`. It appears after `delay` ms (400) under the pointer and at once on keyboard focus, never on touch; leaving, a press, blur, scrolling and Escape hide it. It sits 6px below its target and centred, above it where the window ends, 8px inside the window – `placeNear` in `util/floating.js`. `show(target, text, shortcut)` takes an element or a rect, for what has no element of its own: the bars of a chart. The target’s `aria-describedby` names it while it shows. Hover the buttons. A tooltip shown with `show(rect, …)` stays until `hide()`, the pointer on another `[data-tooltip]`, a press or Escape; the wheel hides it too, also inside a shadow root. A line break in the text is kept.
+Notion’s hover hint in the toast’s colours, a shortcut muted beside it. One `<nk-tooltip>` without `for` serves every element with `data-tooltip` (and `data-tooltip-key`) on the page, inside shadow roots too – a whole toolbar in one element, and it follows pointer and keyboard from one such element to the next within the same shadow root; with `for` it belongs to one element and shows its own content and `shortcut`. It appears after `delay` ms (400) under the pointer and at once on keyboard focus, never on touch; leaving – the window too –, a press, blur, scrolling and Escape hide it. It sits 6px below its target and centred, above it where the window ends, 8px inside the window – `placeNear` in `util/floating.js`. `show(target, text, shortcut)` takes an element or a rect, for what has no element of its own: the bars of a chart. The target’s `aria-describedby` names it while it shows. Hover the buttons. A tooltip shown with `show(rect, …)` stays until `hide()`, the pointer on another `[data-tooltip]`, a press or Escape; the wheel hides it too, also inside a shadow root. A line break in the text is kept.
 
 ```html
 <div style="display:flex;gap:16px;align-items:center;padding:4px 0 44px">
@@ -2659,13 +2661,14 @@ The view switcher with Notion’s toolbar: child views (`nk-table-view`, `nk-boa
 
 ### 3.78 `<nk-table-view>` – Table view
 
-Renders `columns` × `rows` as the NotionKit table. Cells are polymorphic (`text`, `select`, `multi-select`, `date`, `person`, `checkbox`, `url`, `number`, `progress`) and rendered as plain markup by the exported `renderPropertyCell()` – every cell rule starts with `.nk-table`, so a cell element of its own would never be styled. Header clicks sort with `sortable`. A `number` column stands right-aligned in figures of equal width, formatted by its `locale` and `format` (Intl.NumberFormat options); a person’s `color` takes one of the nine names. A column of type `actions` (NotionKit 1.12.0) sets buttons in each row from `column.actions` – `[{ action, label, icon, danger, disabled, tooltip }]` –, and a row’s value – a list of action names – picks which of them it shows; a click fires `nk-action { action, row, id, anchor }` instead of selecting the row. A `url` value may be `{ href, label, target }`: a link of your own, to another page of the app, with its own text. A text value may be `{ text, desc, color, tooltip }` (NotionKit 1.15.0): a quiet second line, one of Notion’s nine text colours – `orange` for an error –, the whole text in a tooltip. Sorting goes by the value, not the text shown: dates by their time, selects by the order of their options, empty cells last; `sortKey` on a column sorts by another field of the row, a `sort` in a cell’s object by that value. A `date` column with `format` – `'short'`, `'relative'` or the options of Intl.DateTimeFormat – shows ISO dates and date-times formatted in its `locale`.
+Renders `columns` × `rows` as the NotionKit table. Cells are polymorphic (`text`, `select`, `multi-select`, `date`, `person`, `checkbox`, `url`, `number`, `progress`) and rendered as plain markup by the exported `renderPropertyCell()` – every cell rule starts with `.nk-table`, so a cell element of its own would never be styled. Header clicks sort with `sortable`. A `number` column stands right-aligned in figures of equal width, formatted by its `locale` and `format` (Intl.NumberFormat options); a person’s `color` takes one of the nine names. A column of type `actions` (NotionKit 1.12.0) sets buttons in each row from `column.actions` – `[{ action, label, icon, danger, disabled, tooltip }]` –, and a row’s value – a list of action names – picks which of them it shows; a click fires `nk-action { action, row, id, anchor }` instead of selecting the row. A `url` value may be `{ href, label, target }`: a link of your own, to another page of the app, with its own text. A text value may be `{ text, desc, color, tooltip }` (NotionKit 1.15.0): a quiet second line, one of Notion’s nine text colours – `orange` for an error –, the whole text in a tooltip. Sorting goes by the value, not the text shown: dates by their time, selects by the order of their options, empty cells last; `sortKey` on a column sorts by another field of the row, a `sort` in a cell’s object by that value. A `date` column with `format` – `'short'`, `'relative'` or the options of Intl.DateTimeFormat – shows ISO dates and date-times formatted in its `locale`. A `checkbox` column with `selectAll: true` (1.21.0) is a selection column: its header is a checkbox – empty, a dash for some rows, a check for all – that sorts nothing; a click or Space sets the column for every row the view has (a dash selects all, as in Notion) and fires one `nk-change { key, value, all: true, rows }`. What “all” means beyond these rows – more pages, a filter on the server – stays with the app. Its name comes from the texts (`selectAll`).
 
 ```html
 <nk-table-view new-row sortable></nk-table-view>
 <script>{
   const db = document.currentScript.previousElementSibling;
   db.columns = [
+    { key: 'selected', type: 'checkbox', selectAll: true },
     { key: 'name', label: 'Name', type: 'text', icon: '📄', title: true },
     { key: 'status', label: 'Status', type: 'select', icon: '◉', options: [
       { value: 'planned', label: 'Planned', color: 'orange' }, { value: 'progress', label: 'In progress', color: 'blue' }, { value: 'done', label: 'Done', color: 'green' } ] },
@@ -2676,9 +2679,9 @@ Renders `columns` × `rows` as the NotionKit table. Cells are polymorphic (`text
     { key: 'actions', type: 'actions', actions: [{ action: 'open', label: 'Open' }, { action: 'archive', label: 'Archive', danger: true }] },
   ];
   db.rows = [
-    { id: 1, icon: '🧭', name: { text: 'App shell & sidebar', desc: 'Three open questions' }, status: 'done', owner: { name: 'Marcel', initials: 'MK', color: 'purple' }, due: '08.05.2026', progress: 100, effort: 6, cover: '/covers/aurora.svg' },
+    { id: 1, icon: '🧭', name: { text: 'App shell & sidebar', desc: 'Three open questions' }, status: 'done', owner: { name: 'Marcel', initials: 'MK', color: 'purple' }, due: '08.05.2026', progress: 100, effort: 6, cover: '/covers/aurora.svg', selected: true },
     { id: 2, icon: '📄', name: 'Page shell & typography', status: 'done', owner: { name: 'Marcel', initials: 'MK', color: 'purple' }, due: '10.05.2026', progress: 100, effort: 4.5, cover: '/covers/dunes.svg' },
-    { id: 3, icon: '🗃️', name: 'Database table view', status: 'progress', owner: { name: 'Marcel', initials: 'MK', color: 'purple' }, due: '20.05.2026', progress: 65, effort: 12.5, cover: '/covers/meadow.svg' },
+    { id: 3, icon: '🗃️', name: 'Database table view', status: 'progress', owner: { name: 'Marcel', initials: 'MK', color: 'purple' }, due: '20.05.2026', progress: 65, effort: 12.5, cover: '/covers/meadow.svg', selected: true },
     { id: 4, icon: '▤', name: 'Board view & drag-and-drop', status: 'planned', due: '02.06.2026', progress: 0, effort: 8, actions: ['open'], cover: '/covers/tide.svg' },
   ];
 }</script>
@@ -2697,23 +2700,23 @@ Renders `columns` × `rows` as the NotionKit table. Cells are polymorphic (`text
 | `sort-dir` | asc | desc | – | Direction. |
 | `wrap` | boolean | – | Cell text may break (Notion's "wrap column"). |
 
-**Events:** `nk-select` `{ row, id, key, cell }` – Row clicked. · `nk-change` `{ row, key, value }` – Checkbox cell toggled (row updated in place). · `nk-action` `{ action: 'sort' | 'new-row' | an actions column's action, key?, value?, row?, id?, anchor? }` – Header, add row or a row’s button clicked.
+**Events:** `nk-select` `{ row, id, key, cell }` – Row clicked. · `nk-change` `{ row, key, value } · selectAll: { key, value, all: true, rows }` – Checkbox cell toggled (row updated in place); from a selectAll header once for every row. · `nk-action` `{ action: 'sort' | 'new-row' | an actions column's action, key?, value?, row?, id?, anchor? }` – Header, add row or a row’s button clicked.
 
 **Properties:** `columns`, `rows`, `data` · **Methods:** `refresh()`
 
-**Replaces:** `.nk-table-wrap`, `.nk-table`, `.wrap`, `.th-icon`, `.row-title`, `.date-cell`, `.person-cell`, `.nk-avatar`, `.num`, `.row-actions`, `.actions`, `.td-text`, `.td-desc`, `.nk-new-row`
+**Replaces:** `.nk-table-wrap`, `.nk-table`, `.wrap`, `.th-icon`, `.row-title`, `.date-cell`, `.person-cell`, `.nk-avatar`, `.num`, `.row-actions`, `.actions`, `.select-all`, `.nk-check`, `.td-text`, `.td-desc`, `.nk-new-row`
 
 ```html
 <!-- equivalent class markup -->
 <div class="nk-table-wrap"><table class="nk-table">
-  <thead><tr><th><span class="th-icon">📄</span>Name</th><th><span class="th-icon">◉</span>Status</th><th><span class="th-icon">👤</span>Owner</th><th><span class="th-icon">📅</span>Due</th><th><span class="th-icon">▰</span>Progress</th><th><span class="th-icon">#</span>Effort (h)</th><th class="actions"></th></tr></thead>
+  <thead><tr><th class="select-all"><label class="nk-check"><input type="checkbox" aria-label="Select all"></label></th><th><span class="th-icon">📄</span>Name</th><th><span class="th-icon">◉</span>Status</th><th><span class="th-icon">👤</span>Owner</th><th><span class="th-icon">📅</span>Due</th><th><span class="th-icon">▰</span>Progress</th><th><span class="th-icon">#</span>Effort (h)</th><th class="actions"></th></tr></thead>
   <tbody>
-    <tr><td><span class="row-title">🧭 App shell & sidebar</span><span class="td-desc">Three open questions</span></td><td><span class="nk-tag green">Done</span></td><td><span class="person-cell"><span class="nk-avatar small purple">MK</span> Marcel</span></td><td><span class="date-cell">08.05.2026</span></td><td><span class="nk-progress"><i style="width:100%"></i></span><span class="nk-progress-label">100%</span></td><td class="num"><span>6.0</span></td><td><span class="row-actions"><button class="nk-btn secondary small">Open</button><button class="nk-btn danger small">Archive</button></span></td></tr>
-    <tr><td><span class="row-title">📄 Page shell & typography</span></td><td><span class="nk-tag green">Done</span></td><td><span class="person-cell"><span class="nk-avatar small purple">MK</span> Marcel</span></td><td><span class="date-cell">10.05.2026</span></td><td><span class="nk-progress"><i style="width:100%"></i></span><span class="nk-progress-label">100%</span></td><td class="num"><span>4.5</span></td><td><span class="row-actions"><button class="nk-btn secondary small">Open</button><button class="nk-btn danger small">Archive</button></span></td></tr>
-    <tr><td><span class="row-title">🗃️ Database table view</span></td><td><span class="nk-tag blue">In progress</span></td><td><span class="person-cell"><span class="nk-avatar small purple">MK</span> Marcel</span></td><td><span class="date-cell">20.05.2026</span></td><td><span class="nk-progress"><i style="width:65%"></i></span><span class="nk-progress-label">65%</span></td><td class="num"><span>12.5</span></td><td><span class="row-actions"><button class="nk-btn secondary small">Open</button><button class="nk-btn danger small">Archive</button></span></td></tr>
-    <tr><td><span class="row-title">▤ Board view & drag-and-drop</span></td><td><span class="nk-tag orange">Planned</span></td><td><span class="person-cell">—</span></td><td><span class="date-cell">02.06.2026</span></td><td><span class="nk-progress"><i style="width:0%"></i></span><span class="nk-progress-label">0%</span></td><td class="num"><span>8.0</span></td><td><span class="row-actions"><button class="nk-btn secondary small">Open</button></span></td></tr>
+    <tr><td><label class="nk-check"><input type="checkbox" checked></label></td><td><span class="row-title">🧭 App shell & sidebar</span><span class="td-desc">Three open questions</span></td><td><span class="nk-tag green">Done</span></td><td><span class="person-cell"><span class="nk-avatar small purple">MK</span> Marcel</span></td><td><span class="date-cell">08.05.2026</span></td><td><span class="nk-progress"><i style="width:100%"></i></span><span class="nk-progress-label">100%</span></td><td class="num"><span>6.0</span></td><td><span class="row-actions"><button class="nk-btn secondary small">Open</button><button class="nk-btn danger small">Archive</button></span></td></tr>
+    <tr><td><label class="nk-check"><input type="checkbox"></label></td><td><span class="row-title">📄 Page shell & typography</span></td><td><span class="nk-tag green">Done</span></td><td><span class="person-cell"><span class="nk-avatar small purple">MK</span> Marcel</span></td><td><span class="date-cell">10.05.2026</span></td><td><span class="nk-progress"><i style="width:100%"></i></span><span class="nk-progress-label">100%</span></td><td class="num"><span>4.5</span></td><td><span class="row-actions"><button class="nk-btn secondary small">Open</button><button class="nk-btn danger small">Archive</button></span></td></tr>
+    <tr><td><label class="nk-check"><input type="checkbox" checked></label></td><td><span class="row-title">🗃️ Database table view</span></td><td><span class="nk-tag blue">In progress</span></td><td><span class="person-cell"><span class="nk-avatar small purple">MK</span> Marcel</span></td><td><span class="date-cell">20.05.2026</span></td><td><span class="nk-progress"><i style="width:65%"></i></span><span class="nk-progress-label">65%</span></td><td class="num"><span>12.5</span></td><td><span class="row-actions"><button class="nk-btn secondary small">Open</button><button class="nk-btn danger small">Archive</button></span></td></tr>
+    <tr><td><label class="nk-check"><input type="checkbox"></label></td><td><span class="row-title">▤ Board view & drag-and-drop</span></td><td><span class="nk-tag orange">Planned</span></td><td><span class="person-cell">—</span></td><td><span class="date-cell">02.06.2026</span></td><td><span class="nk-progress"><i style="width:0%"></i></span><span class="nk-progress-label">0%</span></td><td class="num"><span>8.0</span></td><td><span class="row-actions"><button class="nk-btn secondary small">Open</button></span></td></tr>
   </tbody>
-</table><div class="nk-new-row">＋ New page</div></div>
+</table><div class="nk-new-row">＋ New page</div></div><script>document.currentScript.previousElementSibling.querySelector('th.select-all input').indeterminate = true</script>
 ```
 
 **Small screens:** Scrolls horizontally inside `.nk-table-wrap`.
@@ -3152,8 +3155,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.20.0/notionkit.min.css">
-  <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit-elements@1.20.0/dist/notionkit-elements.min.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit@1.21.0/notionkit.min.css">
+  <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit-elements@1.21.0/dist/notionkit-elements.min.js"></script>
 </head>
 <body class="nk-body">
 <nk-app>
@@ -3234,8 +3237,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.20.0/notionkit.min.css">
-  <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit-elements@1.20.0/dist/notionkit-elements.min.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit@1.21.0/notionkit.min.css">
+  <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit-elements@1.21.0/dist/notionkit-elements.min.js"></script>
 </head>
 <body class="nk-body">
 <nk-app>
@@ -3342,8 +3345,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.20.0/notionkit.min.css">
-  <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit-elements@1.20.0/dist/notionkit-elements.min.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit@1.21.0/notionkit.min.css">
+  <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit-elements@1.21.0/dist/notionkit-elements.min.js"></script>
 </head>
 <body class="nk-body">
 <nk-app>
@@ -3402,8 +3405,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.20.0/notionkit.min.css">
-  <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit-elements@1.20.0/dist/notionkit-elements.min.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit@1.21.0/notionkit.min.css">
+  <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit-elements@1.21.0/dist/notionkit-elements.min.js"></script>
 </head>
 <body class="nk-body">
 <!-- your app -->
@@ -3480,8 +3483,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.20.0/notionkit.min.css">
-  <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit-elements@1.20.0/dist/notionkit-elements.min.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit@1.21.0/notionkit.min.css">
+  <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit-elements@1.21.0/dist/notionkit-elements.min.js"></script>
 </head>
 <body class="nk-body">
 <div class="nk-page" style="padding-top:48px">
@@ -3527,8 +3530,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.20.0/notionkit.min.css">
-  <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit-elements@1.20.0/dist/notionkit-elements.min.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit@1.21.0/notionkit.min.css">
+  <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit-elements@1.21.0/dist/notionkit-elements.min.js"></script>
 </head>
 <body class="nk-body">
 <nk-page narrow icon="📘" cover>
@@ -3572,8 +3575,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.20.0/notionkit.min.css">
-  <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit-elements@1.20.0/dist/notionkit-elements.min.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit@1.21.0/notionkit.min.css">
+  <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit-elements@1.21.0/dist/notionkit-elements.min.js"></script>
 </head>
 <body class="nk-body">
 <nk-app>
@@ -3627,8 +3630,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.20.0/notionkit.min.css">
-  <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit-elements@1.20.0/dist/notionkit-elements.min.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit@1.21.0/notionkit.min.css">
+  <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit-elements@1.21.0/dist/notionkit-elements.min.js"></script>
 </head>
 <body class="nk-body">
 <!-- A narrow column, centred: layout is yours, so it is inline. -->
@@ -3839,10 +3842,10 @@ Form controls additionally re-dispatch a native, bubbling `change` event, so `fo
 | 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.20.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.21.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.20.0 · wrapping NotionKit CSS v1.20.0 · MIT · Jungherz GmbH*
+*NotionKit Elements v1.21.0 · wrapping NotionKit CSS v1.21.0 · MIT · Jungherz GmbH*

package/dist/components/base.js

@@ -21,7 +21,7 @@ const BUILT_IN = {
     appearance: 'Appearance: {mode} – click: {next}', themeAuto: 'automatic (follows the system)', themeLight: 'light', themeDark: 'dark',
     message: 'Message', breadcrumb: 'Breadcrumb', commandPalette: 'Command palette', comment: 'Comment',
     searchEmoji: 'Search emoji', settings: 'Settings', title: 'Title', changeIcon: 'Change icon',
-    add: 'Add', more: 'More',
+    add: 'Add', more: 'More', selectAll: 'Select all',
   },
   de: {
     copy: 'Kopieren', copied: 'Kopiert', show: 'Zeigen', hide: 'Verbergen',
@@ -36,7 +36,7 @@ const BUILT_IN = {
     appearance: 'Darstellung: {mode} – Klick: {next}', themeAuto: 'automatisch (wie das System)', themeLight: 'hell', themeDark: 'dunkel',
     message: 'Nachricht', breadcrumb: 'Pfad', commandPalette: 'Befehlspalette', comment: 'Kommentar',
     searchEmoji: 'Emoji suchen', settings: 'Einstellungen', title: 'Titel', changeIcon: 'Symbol ändern',
-    add: 'Hinzufügen', more: 'Mehr',
+    add: 'Hinzufügen', more: 'Mehr', selectAll: 'Alle auswählen',
   },
 };
 const custom = {};

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

@@ -16,6 +16,15 @@ import './shared/dates-a32DcW1l.js';
 // type 'actions' (NotionKit 1.12.0) sets buttons in each row; a click on one
 // fires nk-action { action, row, id, anchor } instead of selecting the row,
 // and its header sorts nothing.
+//
+// A checkbox column with `selectAll: true` (1.21.0) is a selection column:
+// its header holds a checkbox instead of a name – empty, a dash for some
+// rows, a check for all – and sorts nothing (th.select-all, NotionKit
+// 1.21.0). A click or Space sets the column for every row the view has –
+// a dash selects all, as Notion does –, renders again and fires one
+// nk-change { key, value, all: true, rows }, so an app that keeps its own
+// selection follows with one update. What "all" means beyond these rows –
+// more pages, a filter on the server – stays with the app.
 class NkTableView extends NkElement {
   static get observedAttributes() { return ['name', 'label', 'badge', 'count', 'new-row', 'new-row-label', 'sortable', 'sort-key', 'sort-dir', 'wrap']; }
 
@@ -45,6 +54,7 @@ class NkTableView extends NkElement {
     this._table.classList.toggle('wrap', this.getBoolAttr('wrap'));
     const tr = document.createElement('tr');
     for (const col of this._columns) {
+      if (col.type === 'checkbox' && col.selectAll) { tr.appendChild(this._selectAllHeader(col)); continue; }
       const actions = col.type === 'actions';
       const th = this.createElement('th', actions ? ['actions'] : [], actions ? { scope: 'col' } : { 'data-key': col.key, scope: 'col' });
       if (col.icon) { const i = this.createElement('span', ['th-icon']); i.textContent = col.icon; th.appendChild(i); }
@@ -68,6 +78,40 @@ class NkTableView extends NkElement {
     }
     this._newRow.textContent = this.getAttribute('new-row-label') || this.str('newPage');
     this._newRow.style.display = this.getBoolAttr('new-row') ? '' : 'none';
+    this._syncSelectAll();
+  }
+
+  /** The header of a selection column: the cells' own checkbox, named "Select all". */
+  _selectAllHeader(col) {
+    const th = this.createElement('th', ['select-all'], { scope: 'col' });
+    const label = this.createElement('label', ['nk-check']);
+    label.appendChild(this.createElement('input', [], { type: 'checkbox', 'aria-label': this.str('selectAll'), 'data-select-all': col.key }));
+    th.appendChild(label);
+    if (col.width) th.style.width = col.width;
+    return th;
+  }
+
+  /** Every header box shows its column: checked for all rows, a dash for some, empty for none – and nothing to choose without rows. */
+  _syncSelectAll() {
+    for (const input of this._thead?.querySelectorAll('input[data-select-all]') ?? []) {
+      const key = input.dataset.selectAll, on = this._rows.filter(r => r[key]).length;
+      input.checked = on > 0 && on === this._rows.length;
+      input.indeterminate = on > 0 && on < this._rows.length;
+      input.disabled = !this._rows.length;
+    }
+  }
+
+  /** A click or Space on a header box: the column for every row, one event. */
+  _selectAll(input) {
+    const key = input.dataset.selectAll;
+    // A dash selects all, as Notion does; only a full column clears.
+    const value = !(this._rows.length && this._rows.every(r => r[key]));
+    for (const row of this._rows) row[key] = value;
+    const focused = this._shadow.activeElement === input;
+    this._render();
+    // Space should leave the focus where it was – on the new header box.
+    if (focused) [...this._thead.querySelectorAll('input[data-select-all]')].find(i => i.dataset.selectAll === key)?.focus();
+    this.emit('nk-change', { key, value, all: true, rows: this._rows });
   }
 
   setupEvents() {
@@ -98,8 +142,10 @@ class NkTableView extends NkElement {
     this._onChange = (e) => {
       const input = e.target;
       if (input.type !== 'checkbox') return;
+      if (input.dataset.selectAll != null) { this._selectAll(input); return; }
       const row = this._rowById(input.dataset.rowId);
       if (row) row[input.dataset.key] = input.checked;
+      this._syncSelectAll();
       this.emit('nk-change', { row, key: input.dataset.key, value: input.checked });
     };
     this._onKey = (e) => { if ((e.key === 'Enter' || e.key === ' ') && e.target === this._newRow) { e.preventDefault(); this.emit('nk-action', { action: 'new-row' }); } };

package/dist/components/nk-tooltip.js

@@ -24,6 +24,17 @@ import '@jungherz-de/notionkit/notionkit-styles.js';
 // [data-tooltip], a press or Escape. A line break in the text is kept.
 // While it shows, the target's aria-describedby names it (in the same
 // document or shadow root).
+//
+// Following the pointer and the focus inside a shadow root (1.20.1):
+// pointerover, focusin and focusout carry a relatedTarget, and when target
+// and relatedTarget share a shadow tree the DOM standard ends the event path
+// at its host – the document never hears of a move from one [data-tooltip]
+// to the next in the same root. So the pointer is also read from
+// pointermove, which has no relatedTarget, and acted on only when the
+// element under it changes; and a key that moved the focus – Tab, the arrow
+// keys of a group – is caught on keyup, comparing the focused element with
+// the one before the key went down. A move by script alone inside one
+// shadow root stays unseen.
 const hostSheet = new CSSStyleSheet();
 hostSheet.replaceSync(`:host { display: block; position: fixed; top: 0; left: 0; z-index: 130; pointer-events: none; }`);
 let count = 0;
@@ -101,14 +112,50 @@ class NkTooltip extends NkElement {
     this.show(el, own ? null : el.getAttribute('data-tooltip'), own ? this.getAttribute('shortcut') : el.getAttribute('data-tooltip-key'));
   }
 
+  /**
+   * The pointer is over `el` now (null: no [data-tooltip]). pointerover acts
+   * on every boundary it crosses, as it always has; pointermove – the only
+   * one that reaches the document from inside a shadow root – only when the
+   * element under the pointer changed, so a hand resting on the page leaves
+   * a tooltip the keyboard or show(rect) opened alone.
+   */
+  _pointer(e, move) {
+    const el = e.pointerType === 'touch' ? null : this._targetOf(e);
+    if (move && el === this._hover) return;
+    this._hover = el;
+    if (el === this._target) return;
+    this.hide();
+    if (!el) return;
+    this._target = el;
+    this._timer = setTimeout(() => this._showFor(el), this._delay);
+  }
+
   setupEvents() {
-    this._onOver = (e) => {
-      const el = e.pointerType === 'touch' ? null : this._targetOf(e);
-      if (el === this._target) return;
+    this._onOver = (e) => this._pointer(e, false);
+    this._onMove = (e) => this._pointer(e, true);
+    // The pointer left the window (no relatedTarget): a tooltip – shown or
+    // still waiting – for what it was on goes with it. One the keyboard or
+    // show(rect) opened is not the pointer's and stays.
+    this._onOut = (e) => {
+      if (e.relatedTarget || e.pointerType === 'touch') return;
+      if (this._target && this._target === this._hover) this.hide();
+      this._hover = null;
+    };
+    // Capture, before an element's own keydown moves the focus (a roving tab
+    // stop does); not for a held key's repeats, so keyup compares with where
+    // the focus was before the key went down.
+    this._onKeyDown = (e) => { if (!e.repeat) this._focusBefore = deepActiveElement(); };
+    this._onKeyUp = (e) => {
+      const active = deepActiveElement();
+      if (active === this._focusBefore) return;
+      this._focusBefore = active;
+      // keyup goes to the focused element, so its path is the focus's path.
+      const el = this._targetOf(e);
+      if (el && el === this._target) return;   // focusin got there first
       this.hide();
-      if (!el) return;
+      if (!el || !active?.matches(':focus-visible')) return;
       this._target = el;
-      this._timer = setTimeout(() => this._showFor(el), this._delay);
+      this._showFor(el);
     };
     this._onFocus = (e) => {
       const el = this._targetOf(e);
@@ -120,7 +167,11 @@ class NkTooltip extends NkElement {
     this._onHide = () => this.hide();
     this._onKey = (e) => { if (e.key === 'Escape' && this.open) this.hide(); };
     document.addEventListener('pointerover', this._onOver);
+    document.addEventListener('pointermove', this._onMove, { capture: true, passive: true });
+    document.addEventListener('pointerout', this._onOut);
     document.addEventListener('focusin', this._onFocus);
+    document.addEventListener('keydown', this._onKeyDown, true);
+    document.addEventListener('keyup', this._onKeyUp, true);
     document.addEventListener('focusout', this._onHide);
     document.addEventListener('pointerdown', this._onHide, true);
     document.addEventListener('scroll', this._onHide, true);
@@ -131,13 +182,18 @@ class NkTooltip extends NkElement {
 
   teardownEvents() {
     document.removeEventListener('pointerover', this._onOver);
+    document.removeEventListener('pointermove', this._onMove, { capture: true });
+    document.removeEventListener('pointerout', this._onOut);
     document.removeEventListener('focusin', this._onFocus);
+    document.removeEventListener('keydown', this._onKeyDown, true);
+    document.removeEventListener('keyup', this._onKeyUp, true);
     document.removeEventListener('focusout', this._onHide);
     document.removeEventListener('pointerdown', this._onHide, true);
     document.removeEventListener('scroll', this._onHide, true);
     document.removeEventListener('wheel', this._onHide, { capture: true });
     document.removeEventListener('keydown', this._onKey);
     this.hide();
+    this._hover = this._focusBefore = null;
   }
 
   onAttributeChanged(name) { if (name === 'shortcut' && !this._text.data) this._fill(null); if (name === 'for') this.hide(); }