@jungherz-de/notionkit-elements 1.15.0 → 1.16.0

package/CHANGELOG.md

@@ -4,6 +4,24 @@ 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.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.
+
+### Fixed
+- **`<nk-panel icon>` without `cover` keeps its icon inside the tile.** The band sat in the shadow root even without `cover`, only hidden, and `.nk-cover + .nk-page-icon` still pulled the icon 24px up, 9px over the tile's edge. The band is in the tree only with `cover` now, and follows the attribute both ways.
+- **`<nk-select>` waits for the option of a value from the attribute, too.** `<nk-select value="b">` with a static first option and `b` loaded later showed the first option: the browser's preselection survived as the live selection. A value – attribute or property – whose option is missing now waits and wins once it arrives, unless someone has chosen another option in the meantime, and settling on it fires no `nk-change`. While it waits, `value` reports it; the visible selection and the form value stay as they are.
+- **`<nk-progress wide>` in a panel is a 6px bar** instead of 60px and more (NotionKit 1.16.0).
+- **A floating date picker or menu under `<body>` works from an open dialog.** An open `<nk-dialog>`, `<nk-modal>`, `<nk-sheet>`, the palette or – on a phone – `<nk-peek>` made every sibling inert, the floating layers under `<body>` among them, and they lay under it besides: a date picker opened from a field in a dialog showed but took no click. Floating menus and date pickers, the tooltip and the toast stay out of the inert page now, and NotionKit 1.16.0 lays them above the dialog.
+- **`<nk-btn>` stretched across a column keeps its label centred** (NotionKit 1.16.0) – Auxdesk's sign-in page.
+
+### Added
+- **`flush` on every element** drops the outer margin of its box, for a block in a flex column with a gap of its own; `--nk-block-space: 0` on the column does it for every block inside (NotionKit 1.16.0). Before, only `<nk-props>` and `<nk-panels>` had `flush`, and the margins of the others sat out of reach in their shadow roots.
+- **A minified ES module: `dist/notionkit-elements.esm.min.js`**, with its source map, the same exports as `notionkit-elements.esm.js` – for an import map without a build step, where the minified bundle was an IIFE only. `@jungherz-de/notionkit-elements/esm.min.js` resolves to it.
+
+### Changed
+- Peer `@jungherz-de/notionkit >= 1.16.0`.
+
 ## [1.15.0] – 2026-09-25
 
 Built against NotionKit CSS 1.15.0 (peer `>= 1.15.0`). Auxdesk's findings 22 and 23 from its jobs, messages and tickets in `<nk-table-view>`.
@@ -684,6 +702,7 @@ 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.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
 [1.13.0]: https://github.com/JUNGHERZ/NotionKit-Elements/releases/tag/v1.13.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.15.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.16.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.15.0-lightgrey?style=flat-square" alt="Changelog"></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="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,8 +59,8 @@ 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** | 280 KB minified / 56 KB gzipped (IIFE, foundation sheet included), no external dependencies |
-| 📦 **Four bundle shapes** | IIFE, minified IIFE, ESM, and per-component ESM entries on a stable `base.js`, which import NotionKit's sheet instead of carrying a copy |
+| 🪶 **Lightweight** | 281 KB minified / 56 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.15.0/notionkit.min.css">
-  <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit-elements@1.15.0/dist/notionkit-elements.min.js"></script>
+  <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>
 </head>
 <body class="nk-body">
   <nk-field label="Display name" desc="Shown next to your comments">
@@ -100,9 +100,11 @@ The per-component files import NotionKit's sheet as `@jungherz-de/notionkit/noti
 <script type="importmap">{ "imports": { "@jungherz-de/notionkit/notionkit-styles.js": "/node_modules/@jungherz-de/notionkit/notionkit-styles.js" } }</script>
 ```
 
+Without a build step, an import map can point at the minified module instead: `"@jungherz-de/notionkit-elements": "/node_modules/@jungherz-de/notionkit-elements/dist/notionkit-elements.esm.min.js"` – the same exports as `notionkit-elements.esm.js`, its source map beside it.
+
 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.15.0`; 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.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.
 
 ## Elements
 

package/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: notionkit-elements
-description: NotionKit Elements is a vanilla-JS Web Components library (v1.15.0) wrapping NotionKit CSS v1.15.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.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.
 ---
 
 # NotionKit Elements – AI Component Reference
@@ -21,8 +21,8 @@ description: NotionKit Elements is a vanilla-JS Web Components library (v1.15.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.15.0/notionkit.min.css">
-  <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit-elements@1.15.0/dist/notionkit-elements.min.js"></script>
+  <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>
 </head>
 <body class="nk-body">
   <nk-btn variant="primary">Save</nk-btn>
@@ -80,7 +80,7 @@ Never mix the full bundle with the per-component files – each brings its own `
 
 ### 3.1 `<nk-btn>` – Button
 
-Renders `button.nk-btn`, or `a.nk-btn` when `href` is set. Modifier classes become attributes. A slotted `<svg>` is sized by the stylesheet – pass it directly, never wrapped.
+Renders `button.nk-btn`, or `a.nk-btn` when `href` is set. Modifier classes become attributes. A slotted `<svg>` is sized by the stylesheet – pass it directly, never wrapped. Stretched across a column – a full-width button on a sign-in page – it keeps its label centred.
 
 ```html
 <nk-btn variant="primary">Save</nk-btn>
@@ -218,7 +218,7 @@ A picture for a person or a workspace, on NotionKit’s profile row: round, or `
 
 ### 3.5 `<nk-calendar>` – Date picker
 
-Notion’s date picker as one element (NotionKit 1.9.0): a month with Today and ‹ ›, the keys, bounds and a form value. The value is a day (`YYYY-MM-DD`); with `range` an interval `start/end`, picked in two clicks in either order; with `time` a day and a time (`YYYY-MM-DDTHH:MM`). `weeks` puts the ISO calendar week in front of each row (“KW” in German), `weekend` greys the days not worked, the `days` property adds holidays (`off` with a `label`) and up to three `marks` per day in the nine colours – deadlines, milestones. Days outside `min`/`max` are announced as unavailable and cannot be picked. Arrows move by a day or a week, Home/End to the ends of the week, PageUp/PageDown by a month (with Shift a year), Enter or Space picks; one day is in the tab order. Month names, weekdays and the first day of the week come from the page’s language; `week-start="1"` fixes Monday. With `floating sheet` it is a popover that `show(anchor)` opens under a property or a cell, and a bottom sheet on a phone; a pick closes it.
+Notion’s date picker as one element (NotionKit 1.9.0): a month with Today and ‹ ›, the keys, bounds and a form value. The value is a day (`YYYY-MM-DD`); with `range` an interval `start/end`, picked in two clicks in either order; with `time` a day and a time (`YYYY-MM-DDTHH:MM`). `weeks` puts the ISO calendar week in front of each row (“KW” in German), `weekend` greys the days not worked, the `days` property adds holidays (`off` with a `label`) and up to three `marks` per day in the nine colours – deadlines, milestones. Days outside `min`/`max` are announced as unavailable and cannot be picked. Arrows move by a day or a week, Home/End to the ends of the week, PageUp/PageDown by a month (with Shift a year), Enter or Space picks; one day is in the tab order. Month names, weekdays and the first day of the week come from the page’s language; `week-start="1"` fixes Monday. With `floating sheet` it is a popover that `show(anchor)` opens under a property or a cell, and a bottom sheet on a phone; a pick closes it. Put a floating one directly under `<body>`: an open `nk-dialog`, `nk-modal` or `nk-sheet` leaves it usable, so it opens from a field in a dialog as well.
 
 ```html
 <div style="display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start">
@@ -333,7 +333,7 @@ Multi-line sibling of `nk-input`. The initial value is the `value` attribute or
 
 ### 3.7 `<nk-select>` – Select
 
-Light-DOM `<option>` and `<optgroup>` children are copied into the shadow `<select>` and kept in step when a framework swaps them. The empty string is a valid value; a `value` naming no option leaves the selection alone. A `value` set before its option exists – a framework sets properties before children – waits and is applied once the option arrives.
+Light-DOM `<option>` and `<optgroup>` children are copied into the shadow `<select>` and kept in step when a framework swaps them. The empty string is a valid value; a `value` naming no option leaves the selection alone. A `value` – attribute or property – whose option is not there yet waits and is applied once the option arrives, over the browser’s preselection of the first option, unless someone has chosen another in the meantime; settling on it fires no `nk-change`.
 
 ```html
 <nk-select name="role" value="editor">
@@ -605,7 +605,7 @@ 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"`.
+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.
 
 ```html
 <nk-progress value="72" label="72%"></nk-progress>
@@ -2241,7 +2241,7 @@ Notion’s side peek: a database row opens at the right edge, full height, next
 
 ### 3.67 `<nk-dialog>` – Dialog
 
-A question or a short form – “Move to trash?”, the name of a new view, the link between two tasks – with the contract of `nk-modal` and `nk-sheet`: `show()`, `close()`, `toggle()`, `nk-toggle`; Escape – captured, before a peek, a menu or a modal behind it – and the backdrop close it; focus moves in, to an `[autofocus]` element or the first field or button, and back; the page behind is inert and scroll-locked. It lies above the modal and the sheet. `title` is the heading, the default slot the text or the fields, `slot="actions"` the buttons, the confirming one last. A button in `slot="actions"` with a `value` closes it with that value, one anywhere inside with `data-close` too – another button with a value, an option of `nk-segmented` say, leaves it open – and so does the submit of a `<form method="dialog">` inside; before it closes, `nk-close` fires and can be cancelled – the place to check an input. `alert` for a question, `wide` (560px) for a form. `show(from)` hands focus back to `from` – the ⋯ of a menu that closed. Place it directly under `<body>`.
+A question or a short form – “Move to trash?”, the name of a new view, the link between two tasks – with the contract of `nk-modal` and `nk-sheet`: `show()`, `close()`, `toggle()`, `nk-toggle`; Escape – captured, before a peek, a menu or a modal behind it – and the backdrop close it; focus moves in, to an `[autofocus]` element or the first field or button, and back; the page behind is inert and scroll-locked. It lies above the modal and the sheet. `title` is the heading, the default slot the text or the fields, `slot="actions"` the buttons, the confirming one last. A button in `slot="actions"` with a `value` closes it with that value, one anywhere inside with `data-close` too – another button with a value, an option of `nk-segmented` say, leaves it open – and so does the submit of a `<form method="dialog">` inside; before it closes, `nk-close` fires and can be cancelled – the place to check an input. `alert` for a question, `wide` (560px) for a form. `show(from)` hands focus back to `from` – the ⋯ of a menu that closed. Place it directly under `<body>`. While it is open the page behind is inert, but floating menus and date pickers under `<body>` – and the tooltip and toast – stay usable, so a field in the dialog can open one.
 
 ```html
 <nk-dialog open alert title="Move “NotionKit MVP” to trash?">
@@ -2388,7 +2388,7 @@ The user card at the top of the settings nav.
 
 ### 3.71 `<nk-menu>` – Menu
 
-A 230px context menu. Items are `nk-menu-item`s (`type="separator"` / `"label"` for the rest); ↑↓ move, Enter selects, `nk-select` bubbles up. Inside `nk-pop` or the workspace switcher it is part of their surface. With `floating` it is a menu over the page of its own, NotionKit’s `.nk-pop.floating`: `menu.show(button)` opens it under the button, right edges aligned (`align="start"`: left edges), and it fades in like the palette. A tap outside closes it and reaches nothing else; Escape and a chosen item close it, a switch row keeps it open. Opened from the keyboard, focus moves to the first item and back when it closes. Put it directly under `<body>`, like the other overlays. Floating, it opens upwards where the window ends below and there is more room above, and a menu longer than the room scrolls inside; in an `nk-modal` or `nk-dialog` it sits right as well.
+A 230px context menu. Items are `nk-menu-item`s (`type="separator"` / `"label"` for the rest); ↑↓ move, Enter selects, `nk-select` bubbles up. Inside `nk-pop` or the workspace switcher it is part of their surface. With `floating` it is a menu over the page of its own, NotionKit’s `.nk-pop.floating`: `menu.show(button)` opens it under the button, right edges aligned (`align="start"`: left edges), and it fades in like the palette. A tap outside closes it and reaches nothing else; Escape and a chosen item close it, a switch row keeps it open. Opened from the keyboard, focus moves to the first item and back when it closes. Put it directly under `<body>`, like the other overlays. Floating, it opens upwards where the window ends below and there is more room above, and a menu longer than the room scrolls inside; in an `nk-modal` or `nk-dialog` it sits right as well, and opened from one of them it stays usable – an open dialog, modal or sheet leaves floating menus alone.
 
 ```html
 <nk-menu>
@@ -3142,8 +3142,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.15.0/notionkit.min.css">
-  <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit-elements@1.15.0/dist/notionkit-elements.min.js"></script>
+  <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>
 </head>
 <body class="nk-body">
 <nk-app>
@@ -3224,8 +3224,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.15.0/notionkit.min.css">
-  <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit-elements@1.15.0/dist/notionkit-elements.min.js"></script>
+  <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>
 </head>
 <body class="nk-body">
 <nk-app>
@@ -3332,8 +3332,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.15.0/notionkit.min.css">
-  <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit-elements@1.15.0/dist/notionkit-elements.min.js"></script>
+  <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>
 </head>
 <body class="nk-body">
 <nk-app>
@@ -3392,8 +3392,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.15.0/notionkit.min.css">
-  <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit-elements@1.15.0/dist/notionkit-elements.min.js"></script>
+  <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>
 </head>
 <body class="nk-body">
 <!-- your app -->
@@ -3470,8 +3470,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.15.0/notionkit.min.css">
-  <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit-elements@1.15.0/dist/notionkit-elements.min.js"></script>
+  <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>
 </head>
 <body class="nk-body">
 <div class="nk-page" style="padding-top:48px">
@@ -3517,8 +3517,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.15.0/notionkit.min.css">
-  <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit-elements@1.15.0/dist/notionkit-elements.min.js"></script>
+  <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>
 </head>
 <body class="nk-body">
 <nk-page narrow icon="📘" cover>
@@ -3562,8 +3562,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.15.0/notionkit.min.css">
-  <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit-elements@1.15.0/dist/notionkit-elements.min.js"></script>
+  <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>
 </head>
 <body class="nk-body">
 <nk-app>
@@ -3617,8 +3617,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.15.0/notionkit.min.css">
-  <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit-elements@1.15.0/dist/notionkit-elements.min.js"></script>
+  <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>
 </head>
 <body class="nk-body">
 <!-- A narrow column, centred: layout is yours, so it is inline. -->
@@ -3693,6 +3693,8 @@ Form controls additionally re-dispatch a native, bubbling `change` event, so `fo
 | `<button class="nk-btn">` inside `<nk-btn>` | The element renders the button – slot only the label and icon |
 | Loading the bundle without `notionkit.css` and wondering about the serif font | The token layer only covers colours and metrics; typography comes from `.nk-body` |
 | `<nk-btn style="margin-top:16px">` or `nk-callout { margin: … }` | Hosts are `display: contents` and have no box – put spacing on a wrapper you own |
+| Blocks in a flex column with a `gap` that stand too far apart | `--nk-block-space: 0` on the column drops every block's outer margin; `flush` on one element drops its own. Headings keep theirs |
+| A `<nk-calendar floating>` or `<nk-menu floating>` moved into a dialog so that it can be clicked | Leave it under `<body>`: an open `nk-dialog`, `nk-modal` or `nk-sheet` keeps floating menus, date pickers, the tooltip and the toast usable |
 | A positioned wrapper around `<nk-menu>` to open it under a button | `<nk-menu floating sheet>` and `menu.show(button)`: it measures the button, closes on a tap outside and is a sheet on a phone |
 | `<nk-sheet id="more">` opened from `app.html#more` | Give the overlay an id other than the hash: the browser scrolls to the fragment target and takes the focus the overlay just gave |
 | `<nk-btn variant="topbar" onclick="sidebar.toggle()">☰</nk-btn>` plus a script that hides it on the desktop | `<nk-btn variant="sidebar">☰</nk-btn>` – shown below 860px only, opens the drawer |
@@ -3818,10 +3820,10 @@ Form controls additionally re-dispatch a native, bubbling `change` event, so `fo
 | Theme sync | one `MutationObserver` on `<html>[data-theme]`, a `Set` of instances, `.nk-wrapper[data-theme]` inside each root |
 | 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.15.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.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 |
 
 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.15.0 · wrapping NotionKit CSS v1.15.0 · MIT · Jungherz GmbH*
+*NotionKit Elements v1.16.0 · wrapping NotionKit CSS v1.16.0 · MIT · Jungherz GmbH*

package/dist/components/base.js

@@ -61,6 +61,9 @@ if (typeof window !== 'undefined' && typeof MutationObserver !== 'undefined') {
 // Layout plumbing only: how the host box participates in the outer layout, and
 // that `hidden` keeps working. :host([hidden]) has a higher specificity than
 // :host, so it wins regardless of order. The wrapper is layout-transparent.
+// `flush` on any element drops the outer margin of its box (NotionKit
+// 1.16.0) – for a block in a flex column with a gap of its own; a whole
+// column does it for every block with --nk-block-space: 0.
 
 const hostSheets = new Map();
 
@@ -71,6 +74,7 @@ function hostSheetFor(display) {
     sheet.replaceSync(`
       :host { display: ${display}; }
       :host([hidden]) { display: none; }
+      :host([flush]) .nk-wrapper > * { margin-top: 0; margin-bottom: 0; }
       .nk-wrapper { display: contents; }
     `);
     hostSheets.set(display, sheet);

package/dist/components/nk-calendar.js

@@ -1,7 +1,7 @@
 import { NkFormElement } from './base.js';
 import { p as parseDay, i as isoOf, C as CHEVRONS, r as resolveLocale, f as firstWeekday, m as monthGrid, w as weekLabel, a as weekdayNames, b as isoWeek, s as stepMonth, c as addDays } from './shared/dates-a32DcW1l.js';
 import { p as placeUnder } from './shared/floating-DOK73b_D.js';
-import { d as deepActiveElement } from './shared/focus-BNAChOXO.js';
+import { d as deepActiveElement } from './shared/focus-C4tbSNND.js';
 import '@jungherz-de/notionkit/notionkit-styles.js';
 
 // <nk-calendar name="due" value="2026-06-02" weeks weekend="6,0"></nk-calendar>
@@ -44,7 +44,7 @@ import '@jungherz-de/notionkit/notionkit-styles.js';
 // outside does. Put a floating calendar directly under <body>.
 const STEPS = { ArrowLeft: -1, ArrowRight: 1, ArrowUp: -7, ArrowDown: 7 };
 const floatSheet = new CSSStyleSheet();
-floatSheet.replaceSync(`:host([floating]) { display: block; position: fixed; top: 0; left: 0; z-index: 60; pointer-events: none; }`);
+floatSheet.replaceSync(`:host([floating]) { display: block; position: fixed; top: 0; left: 0; z-index: 106; pointer-events: none; }`);
 
 class NkCalendar extends NkFormElement {
   static get hostStyles() { return floatSheet; }

package/dist/components/nk-cmdk.js

@@ -1,5 +1,5 @@
 import { NkElement } from './base.js';
-import { l as lockScroll, i as inertOutside, u as unlockScroll } from './shared/focus-BNAChOXO.js';
+import { l as lockScroll, i as inertOutside, u as unlockScroll } from './shared/focus-C4tbSNND.js';
 import '@jungherz-de/notionkit/notionkit-styles.js';
 
 // Subsequence scoring for the command palette: every query character must

package/dist/components/nk-dialog.js

@@ -1,5 +1,5 @@
 import { NkElement } from './base.js';
-import { d as deepActiveElement, l as lockScroll, i as inertOutside, f as firstFocusable, u as unlockScroll } from './shared/focus-BNAChOXO.js';
+import { d as deepActiveElement, l as lockScroll, i as inertOutside, f as firstFocusable, u as unlockScroll } from './shared/focus-C4tbSNND.js';
 import '@jungherz-de/notionkit/notionkit-styles.js';
 
 // <nk-dialog id="trash" title="Move “Roadmap” to trash?" alert>

package/dist/components/nk-menu.js

@@ -1,5 +1,5 @@
 import { NkElement } from './base.js';
-import { d as deepActiveElement } from './shared/focus-BNAChOXO.js';
+import { d as deepActiveElement } from './shared/focus-C4tbSNND.js';
 import { p as placeUnder } from './shared/floating-DOK73b_D.js';
 import '@jungherz-de/notionkit/notionkit-styles.js';
 
@@ -20,7 +20,7 @@ import '@jungherz-de/notionkit/notionkit-styles.js';
 // close it too, a switch row does not. Opened from the keyboard, focus moves
 // to the first item; closing returns it to where it was.
 const floatSheet = new CSSStyleSheet();
-floatSheet.replaceSync(`:host([floating]) { display: block; position: fixed; top: 0; left: 0; z-index: 60; pointer-events: none; }`);
+floatSheet.replaceSync(`:host([floating]) { display: block; position: fixed; top: 0; left: 0; z-index: 106; pointer-events: none; }`);
 
 class NkMenu extends NkElement {
   static get hostStyles() { return floatSheet; }

package/dist/components/nk-modal.js

@@ -1,5 +1,5 @@
 import { NkElement } from './base.js';
-import { l as lockScroll, i as inertOutside, f as firstFocusable, u as unlockScroll } from './shared/focus-BNAChOXO.js';
+import { l as lockScroll, i as inertOutside, f as firstFocusable, u as unlockScroll } from './shared/focus-C4tbSNND.js';
 import '@jungherz-de/notionkit/notionkit-styles.js';
 
 // <nk-modal id="settings">

package/dist/components/nk-panel.js

@@ -43,7 +43,10 @@ class NkPanel extends NkElement {
     const href = this.getAttribute('href');
     if (href) { this._box.setAttribute('href', href); this._box.target = this.getAttribute('target') || ''; }
     const cover = this.getAttribute('cover');
-    this._cover.style.display = cover === null ? 'none' : '';
+    // The band is in the tree only with `cover`: hidden, it still matched
+    // `.nk-cover + .nk-page-icon` and pulled a lone icon over the tile's edge.
+    if (cover === null) this._cover.remove();
+    else if (!this._cover.isConnected) this._box.prepend(this._cover);
     if (cover) { this._img.src = cover; if (!this._img.isConnected) this._cover.appendChild(this._img); }
     else this._img.remove();
     const icon = this.getAttribute('icon');

package/dist/components/nk-peek.js

@@ -1,5 +1,5 @@
 import { NkElement } from './base.js';
-import { d as deepActiveElement, l as lockScroll, i as inertOutside, u as unlockScroll } from './shared/focus-BNAChOXO.js';
+import { d as deepActiveElement, l as lockScroll, i as inertOutside, u as unlockScroll } from './shared/focus-C4tbSNND.js';
 import '@jungherz-de/notionkit/notionkit-styles.js';
 
 // <nk-peek id="peek" label="Database Table-View">

package/dist/components/nk-select.js

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

package/dist/components/nk-sheet.js

@@ -1,5 +1,5 @@
 import { NkElement } from './base.js';
-import { d as deepActiveElement, l as lockScroll, i as inertOutside, f as firstFocusable, u as unlockScroll } from './shared/focus-BNAChOXO.js';
+import { d as deepActiveElement, l as lockScroll, i as inertOutside, f as firstFocusable, u as unlockScroll } from './shared/focus-C4tbSNND.js';
 import '@jungherz-de/notionkit/notionkit-styles.js';
 
 // <nk-sheet id="more" title="More">

package/dist/components/nk-sidebar.js

@@ -1,5 +1,5 @@
 import { NkElement } from './base.js';
-import { d as deepActiveElement } from './shared/focus-BNAChOXO.js';
+import { d as deepActiveElement } from './shared/focus-C4tbSNND.js';
 import '@jungherz-de/notionkit/notionkit-styles.js';
 
 // <nk-sidebar slot="sidebar">

package/dist/components/nk-tooltip.js

@@ -1,6 +1,6 @@
 import { NkElement } from './base.js';
 import { a as placeNear } from './shared/floating-DOK73b_D.js';
-import { d as deepActiveElement } from './shared/focus-BNAChOXO.js';
+import { d as deepActiveElement } from './shared/focus-C4tbSNND.js';
 import '@jungherz-de/notionkit/notionkit-styles.js';
 
 // <nk-tooltip></nk-tooltip>                    one for the page: every [data-tooltip]

package/dist/components/shared/{focus-BNAChOXO.js → focus-C4tbSNND.js}

@@ -15,7 +15,12 @@ function unlockScroll() {
   if (locks > 0 && --locks === 0) document.documentElement.style.overflow = previousOverflow;
 }
 
-/** Makes every sibling along `el`'s ancestor chain inert (shadow hosts included); returns the undo. */
+// Floating layers under <body> that open from inside an overlay – a menu, a
+// date picker – and the tooltip and toast stay usable: made inert, a date
+// picker opened from a dialog showed but took no click.
+const LAYERS = 'nk-menu[floating], nk-calendar[floating], nk-tooltip, nk-toast';
+
+/** Makes every sibling along `el`'s ancestor chain inert (shadow hosts included), floating layers aside; returns the undo. */
 function inertOutside(el) {
   const made = [];
   let node = el;
@@ -23,7 +28,7 @@ function inertOutside(el) {
     const parent = node.parentNode instanceof ShadowRoot ? node.parentNode : node.parentNode;
     if (!parent) break;
     for (const sib of parent.children) {
-      if (sib === node || sib.inert || /^(SCRIPT|STYLE|LINK|TEMPLATE)$/.test(sib.tagName)) continue;
+      if (sib === node || sib.inert || /^(SCRIPT|STYLE|LINK|TEMPLATE)$/.test(sib.tagName) || sib.matches(LAYERS)) continue;
       sib.inert = true;
       made.push(sib);
     }