@jungherz-de/notionkit-elements 1.14.0 → 1.15.0

package/CHANGELOG.md

@@ -4,6 +4,23 @@ 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.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>`.
+
+### Fixed
+- **`sortable` sorts by the value, not by the text shown.** Every column but number, progress and checkbox compared its text: dates as text, so 13.09.2026 came before 24.08.2026, and a select by its key – `failed`, `ignored`, `posted` – instead of the order of its options. Dates now sort by their time (D.M.YYYY, ISO dates and date-times, ranges by their start), selects by their options as Notion does, and empty cells come last in both directions. `compareBy()` does the same for tables of one's own.
+
+### Added
+- **A value to sort by.** `sortKey` on a column sorts by another field of the row – a “Time” column that shows “4 min ago” sorts by the ISO time next to it – and a `sort` in a cell's object sorts that cell by its own value.
+- **Date formats.** A `date` column with `format` – `'short'` (day and month, the year when it is not this one), `'relative'` (minutes or hours ago or ahead within a day, else the short date) or the options of Intl.DateTimeFormat – shows ISO dates and date-times formatted in its `locale`, and sorts by their time. Without `format` a date stands as given, as before. Board, list and gallery show the same format; a range reads start → end.
+- **Text cells with a tone, a second line and a tooltip.** A text value may be `{ text, desc, color, tooltip }`: `color` one of Notion's nine text colours – orange for an error –, `desc` a quiet second line under it – the next run under an error, the sender under a subject –, `tooltip` the whole text, which `<nk-tooltip>` shows. A title cell takes `desc` and `tooltip` too. The other views and the filter bar's search read the text of such an object.
+- Exported next to `renderPropertyCell()`: `formatDate()`, `timeOf()` and `textOf()`.
+
+### Changed
+- The docs example of `<nk-table-view>` shows a quiet line under the first title.
+- Peer `@jungherz-de/notionkit >= 1.15.0`.
+
 ## [1.14.0] – 2026-09-25
 
 Built against NotionKit CSS 1.14.0 (peer `>= 1.14.0`). The gallery view – 88 elements now – for LearnHub's course catalog.
@@ -667,6 +684,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.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
 [1.12.0]: https://github.com/JUNGHERZ/NotionKit-Elements/releases/tag/v1.12.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.14.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.15.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.14.0-lightgrey?style=flat-square" alt="Changelog"></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="https://www.npmjs.com/package/@jungherz-de/notionkit-elements"><img src="https://img.shields.io/badge/npm-%40jungherz--de%2Fnotionkit--elements-cb3837?style=flat-square&logo=npm" alt="npm"></a>
 </p>
 
@@ -59,7 +59,7 @@ It is the **app layer** of the NotionKit family – three layers, one design lan
 | 🧩 **88 Elements** | Forms with copy field, image picker and date picker, content blocks with bookmarks, app shell & tree with the ☰ drawer and the collapsing sidebar, page shell with properties, panels, avatars and steps, overlays (modal, sheet, dialog, resizable side peek, tooltip, ⌘K palette, menus that float in and become sheets on a phone, popover, emoji picker, toast), database table, board, list, calendar & gallery with toolbar and filter pills, comments, AI thread |
 | 🎛️ **Form participation** | Input, textarea, select, switch, check, radio, slider, segmented and model card work natively with `<form>` via `ElementInternals`; radios group across shadow roots |
 | 🌗 **Theme sync** | One observer mirrors `data-theme` on `<html>` into every element |
-| 🪶 **Lightweight** | 277 KB minified / 55 KB gzipped (IIFE, foundation sheet included), no external dependencies |
+| 🪶 **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 |
 | 🤖 **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.14.0/notionkit.min.css">
-  <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit-elements@1.14.0/dist/notionkit-elements.min.js"></script>
+  <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>
 </head>
 <body class="nk-body">
   <nk-field label="Display name" desc="Shown next to your comments">
@@ -102,7 +102,7 @@ The per-component files import NotionKit's sheet as `@jungherz-de/notionkit/noti
 
 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.14.0`; 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.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.
 
 ## Elements
 

package/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: notionkit-elements
-description: NotionKit Elements is a vanilla-JS Web Components library (v1.14.0) wrapping NotionKit CSS v1.14.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.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.
 ---
 
 # NotionKit Elements – AI Component Reference
@@ -21,8 +21,8 @@ description: NotionKit Elements is a vanilla-JS Web Components library (v1.14.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.14.0/notionkit.min.css">
-  <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit-elements@1.14.0/dist/notionkit-elements.min.js"></script>
+  <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>
 </head>
 <body class="nk-body">
   <nk-btn variant="primary">Save</nk-btn>
@@ -2650,7 +2650,7 @@ 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.
+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`.
 
 ```html
 <nk-table-view new-row sortable></nk-table-view>
@@ -2667,7 +2667,7 @@ 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: 'App shell & sidebar', 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' },
     { 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: 4, icon: '▤', name: 'Board view & drag-and-drop', status: 'planned', due: '02.06.2026', progress: 0, effort: 8, actions: ['open'], cover: '/covers/tide.svg' },
@@ -2692,14 +2692,14 @@ Renders `columns` × `rows` as the NotionKit table. Cells are polymorphic (`text
 
 **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`, `.nk-new-row`
+**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`
 
 ```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>
   <tbody>
-    <tr><td><span class="row-title">🧭 App shell & sidebar</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">🧭 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>
@@ -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.14.0/notionkit.min.css">
-  <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit-elements@1.14.0/dist/notionkit-elements.min.js"></script>
+  <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>
 </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.14.0/notionkit.min.css">
-  <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit-elements@1.14.0/dist/notionkit-elements.min.js"></script>
+  <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>
 </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.14.0/notionkit.min.css">
-  <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit-elements@1.14.0/dist/notionkit-elements.min.js"></script>
+  <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>
 </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.14.0/notionkit.min.css">
-  <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit-elements@1.14.0/dist/notionkit-elements.min.js"></script>
+  <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>
 </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.14.0/notionkit.min.css">
-  <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit-elements@1.14.0/dist/notionkit-elements.min.js"></script>
+  <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>
 </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.14.0/notionkit.min.css">
-  <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit-elements@1.14.0/dist/notionkit-elements.min.js"></script>
+  <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>
 </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.14.0/notionkit.min.css">
-  <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit-elements@1.14.0/dist/notionkit-elements.min.js"></script>
+  <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>
 </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.14.0/notionkit.min.css">
-  <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit-elements@1.14.0/dist/notionkit-elements.min.js"></script>
+  <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>
 </head>
 <body class="nk-body">
 <!-- A narrow column, centred: layout is yours, so it is inline. -->
@@ -3818,10 +3818,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.14.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.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 |
 
 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.14.0 · wrapping NotionKit CSS v1.14.0 · MIT · Jungherz GmbH*
+*NotionKit Elements v1.15.0 · wrapping NotionKit CSS v1.15.0 · MIT · Jungherz GmbH*

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

@@ -1,7 +1,8 @@
 import { NkElement } from './base.js';
-import { t as tagFor, r as renderPropertyCell } from './shared/property-cell-DKvv6TIG.js';
+import { t as tagFor, a as textOf, f as formatDate, r as renderPropertyCell } from './shared/property-cell-BSVcETss.js';
 import '@jungherz-de/notionkit/notionkit-styles.js';
 import './shared/avatar-CzPZN3uP.js';
+import './shared/dates-a32DcW1l.js';
 
 // <nk-board-view name="board" label="▤ Board" group-by="status" new-row></nk-board-view>
 // Groups rows by a select column (default: the first select column); one
@@ -51,14 +52,14 @@ class NkBoardView extends NkElement {
       for (const row of cards) {
         const card = this.createElement('div', ['nk-card'], { draggable: 'true', 'data-id': row.id ?? '', tabindex: '0' });
         const t = this.createElement('div', ['card-title']);
-        t.textContent = `${row.icon ? row.icon + ' ' : ''}${title ? row[title.key] ?? '' : ''}`;
+        t.textContent = `${row.icon ? row.icon + ' ' : ''}${title ? textOf(row[title.key]) : ''}`;
         const meta = this.createElement('div', ['card-meta']);
         for (const c of this._metaColumns()) {
           const v = row[c.key];
           if (v === undefined || v === null || v === '') continue;
           const s = document.createElement('span');
           if (c.type === 'progress') s.textContent = `▰ ${v}%`;
-          else if (c.type === 'date') s.textContent = `📅 ${v}`;
+          else if (c.type === 'date') s.textContent = `📅 ${formatDate(c, v)}`;
           else s.appendChild(renderPropertyCell(c, v, row));
           meta.appendChild(s);
         }

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

@@ -1,6 +1,8 @@
 import { NkElement } from './base.js';
+import { a as textOf } from './shared/property-cell-BSVcETss.js';
 import { C as CHEVRONS, i as isoOf, r as resolveLocale, f as firstWeekday, m as monthGrid, p as parseDay, w as weekLabel, a as weekdayNames, b as isoWeek, s as stepMonth } from './shared/dates-a32DcW1l.js';
 import '@jungherz-de/notionkit/notionkit-styles.js';
+import './shared/avatar-CzPZN3uP.js';
 
 // <nk-calendar-view name="calendar" label="📅 Calendar" date-key="due" weeks></nk-calendar-view>
 // The fourth database view (NotionKit 1.9.0): a month, the rows as cards on
@@ -83,7 +85,7 @@ class NkCalendarView extends NkElement {
       day.appendChild(num);
       for (const row of byDay[iso] || []) {
         const item = this.createElement('button', ['cv-item'], { type: 'button', 'data-id': row.id ?? '' });
-        const title = titleCol ? String(row[titleCol.key] ?? '') : '';
+        const title = titleCol ? textOf(row[titleCol.key]) : '';
         item.textContent = row.icon ? `${row.icon} ${title}` : title;
         day.appendChild(item);
       }

package/dist/components/nk-filter-bar.js

@@ -88,12 +88,13 @@ class NkFilterBar extends NkElement {
   /**
    * Applies filters and search to rows: a filter keeps rows where row[key]
    * equals value – or differs from it with op: 'is-not'; the search looks
-   * for the text in every string field (a person's name).
+   * for the text in every string field (a person's name, a text or link
+   * object's text).
    */
   apply(rows) {
     const q = this.value.trim().toLowerCase();
     return rows.filter(r => this._filters.every(f => (f.op === 'is-not' ? r[f.key] !== f.value : r[f.key] === f.value))
-      && (!q || Object.values(r).some(v => String(typeof v === 'object' && v ? v.name ?? '' : v ?? '').toLowerCase().includes(q))));
+      && (!q || Object.values(r).some(v => String(typeof v === 'object' && v ? v.name ?? v.text ?? v.label ?? '' : v ?? '').toLowerCase().includes(q))));
   }
 }
 

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

@@ -1,7 +1,8 @@
 import { NkElement } from './base.js';
-import { r as renderPropertyCell } from './shared/property-cell-DKvv6TIG.js';
+import { a as textOf, f as formatDate, r as renderPropertyCell } from './shared/property-cell-BSVcETss.js';
 import '@jungherz-de/notionkit/notionkit-styles.js';
 import './shared/avatar-CzPZN3uP.js';
+import './shared/dates-a32DcW1l.js';
 
 // <nk-gallery-view name="gallery" label="🖼 Gallery" meta-keys="status,due" new-row></nk-gallery-view>
 // The fifth database view (NotionKit 1.14.0): the rows as cards with a
@@ -56,14 +57,14 @@ class NkGalleryView extends NkElement {
         card.appendChild(cover);
       }
       const t = this.createElement('div', ['card-title']);
-      t.textContent = `${row.icon ? row.icon + ' ' : ''}${title ? row[title.key] ?? '' : ''}`;
+      t.textContent = `${row.icon ? row.icon + ' ' : ''}${title ? textOf(row[title.key]) : ''}`;
       const m = this.createElement('div', ['card-meta']);
       for (const c of meta) {
         const v = row[c.key];
         if (v === undefined || v === null || v === '') continue;
         const s = document.createElement('span');
         if (c.type === 'progress') s.textContent = `▰ ${v}%`;
-        else if (c.type === 'date') s.textContent = `📅 ${v}`;
+        else if (c.type === 'date') s.textContent = `📅 ${formatDate(c, v)}`;
         else s.appendChild(renderPropertyCell(c, v, row));
         m.appendChild(s);
       }

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

@@ -1,7 +1,8 @@
 import { NkElement } from './base.js';
-import { r as renderPropertyCell } from './shared/property-cell-DKvv6TIG.js';
+import { a as textOf, f as formatDate, r as renderPropertyCell } from './shared/property-cell-BSVcETss.js';
 import '@jungherz-de/notionkit/notionkit-styles.js';
 import './shared/avatar-CzPZN3uP.js';
+import './shared/dates-a32DcW1l.js';
 
 // <nk-list-view name="list" label="☰ List" meta-keys="due,status" new-row></nk-list-view>
 // The third database view: one line per row – icon and title, the `meta-keys`
@@ -45,12 +46,12 @@ class NkListView extends NkElement {
       icon.textContent = row.icon || '';
       if (!row.icon) icon.style.display = 'none';
       const t = this.createElement('span', ['l-title']);
-      t.textContent = title ? String(row[title.key] ?? '') : '';
+      t.textContent = title ? textOf(row[title.key]) : '';
       const m = this.createElement('span', ['l-meta']);
       for (const c of meta) {
         const v = row[c.key];
         if (v === undefined || v === null || v === '') continue;
-        m.appendChild(c.type === 'date' || c.type === 'text' || !c.type ? document.createTextNode(String(v)) : renderPropertyCell(c, v, row));
+        m.appendChild(c.type === 'date' ? document.createTextNode(formatDate(c, v)) : c.type === 'text' || !c.type ? document.createTextNode(textOf(v)) : renderPropertyCell(c, v, row));
       }
       item.append(icon, t, m);
       this._list.appendChild(item);

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

@@ -1,7 +1,8 @@
 import { NkElement } from './base.js';
-import { c as compareBy, r as renderPropertyCell } from './shared/property-cell-DKvv6TIG.js';
+import { c as compareBy, r as renderPropertyCell } from './shared/property-cell-BSVcETss.js';
 import '@jungherz-de/notionkit/notionkit-styles.js';
 import './shared/avatar-CzPZN3uP.js';
+import './shared/dates-a32DcW1l.js';
 
 // <nk-table-view name="table" label="▦ Table" count new-row sortable wrap></nk-table-view>
 // `wrap` lets cell text break (`.nk-table.wrap`), like Notion's "wrap column".

package/dist/components/shared/property-cell-BSVcETss.js

@@ -0,0 +1,204 @@
+import { i as initialsOf, p as paintAvatar } from './avatar-CzPZN3uP.js';
+import { r as resolveLocale } from './dates-a32DcW1l.js';
+
+// Polymorphic property renderer for database views. Returns plain DOM built
+// from NotionKit classes – deliberately not a custom element: every cell rule
+// starts with `.nk-table`, so a cell inside its own shadow root would never
+// be styled. Exported for consumers who render tables themselves.
+//
+// column: { key, label, type, icon, options: [{ value, label, color }], title }
+// types: text | select | multi-select | date | person | checkbox | url | number | progress | actions
+// url: a string is an address outside, opened in a new tab; { href, label,
+// target } a link of your own – to another page of the app, with its text.
+// actions: buttons for the row from column.actions [{ action, label, icon,
+// danger, disabled, tooltip }]; the row's value – action names or objects –
+// picks which of them it shows, all of them without one.
+// text: a string, or { text, desc, color, tooltip, sort } – one of Notion's
+// nine text colours for a tone, a quiet second line under it, the whole
+// text in a tooltip (served by <nk-tooltip>), a value to sort by.
+// date: the value as given, or with column.format ('short', 'relative' or
+// Intl.DateTimeFormat options) and column.locale formatted from an ISO date
+// or date-time, D.M.YYYY, a Date or a timestamp; { start, end } is a range.
+// Sorting (compareBy) goes by column.sortKey – another field of the row –
+// when there is one, else by a value's `sort`, a date's time, a select's
+// place among its options; empty cells come last in both directions.
+
+const el = (tag, cls, text) => { const n = document.createElement(tag); if (cls) n.className = cls; if (text != null) n.textContent = text; return n; };
+const COLORS = ['gray', 'brown', 'orange', 'yellow', 'green', 'blue', 'purple', 'pink', 'red'];
+
+function optionFor(column, value) {
+  const opts = column.options || [];
+  return opts.find(o => o.value === value) || opts.find(o => o.label === value) || null;
+}
+
+function tagFor(column, value) {
+  const opt = optionFor(column, value);
+  const color = opt?.color && COLORS.includes(opt.color) ? opt.color : 'gray';   // Notion's default option colour
+  return el('span', `nk-tag ${color}`, opt?.label ?? String(value));
+}
+
+/** The text of a value: a string as it is, a text, link or person object's text, label or name. */
+const textOf = v => (v && typeof v === 'object' ? v.text ?? v.label ?? v.name ?? '' : String(v ?? ''));
+
+/** The time of a date value in ms: an ISO date – local midnight – or date-time, D.M.YYYY, a Date, a timestamp, a range's start; NaN when it is none. */
+function timeOf(v) {
+  if (v instanceof Date) return v.getTime();
+  if (typeof v === 'number') return v;
+  if (v && typeof v === 'object') return timeOf(v.start);
+  const s = String(v ?? '').trim();
+  let m = s.match(/^(\d{1,2})\.(\d{1,2})\.(\d{4})$/);
+  if (m) return new Date(+m[3], +m[2] - 1, +m[1]).getTime();
+  m = s.match(/^(\d{4})-(\d{2})-(\d{2})$/);
+  if (m) return new Date(+m[1], +m[2] - 1, +m[3]).getTime();
+  return /^\d{4}-\d{2}-\d{2}T/.test(s) ? Date.parse(s) : NaN;
+}
+
+/**
+ * A date as its column shows it: as given without column.format; 'short' –
+ * day and month, the year when it is not this one; 'relative' – minutes or
+ * hours ago or ahead within a day, else the short date; or the options of
+ * Intl.DateTimeFormat. A range { start, end } stands as start → end.
+ */
+function formatDate(column, value) {
+  if (value && typeof value === 'object' && !(value instanceof Date)) return [value.start, value.end].filter(Boolean).map(v => formatDate(column, v)).join(' → ');
+  const format = column.format, t = timeOf(value);
+  if (!format || Number.isNaN(t)) return String(value ?? '');
+  const d = new Date(t), locale = column.locale || resolveLocale();
+  if (format === 'relative') {
+    const minutes = Math.round((t - Date.now()) / 60000), rel = new Intl.RelativeTimeFormat(locale, { numeric: 'auto', style: 'short' });
+    if (Math.abs(minutes) < 60) return rel.format(minutes, 'minute');
+    if (Math.abs(minutes) < 24 * 60) return rel.format(Math.round(minutes / 60), 'hour');
+  }
+  if (format === 'short' || format === 'relative') {
+    const year = d.getFullYear() === new Date().getFullYear() ? {} : { year: 'numeric' };
+    return d.toLocaleDateString(locale, { day: '2-digit', month: '2-digit', ...year });
+  }
+  return typeof format === 'object' ? new Intl.DateTimeFormat(locale, format).format(d) : String(value);
+}
+
+function renderPropertyCell(column, value, row = {}) {
+  const type = column.type || 'text';
+  if (type === 'actions') return actions(column, value);
+  if (value === undefined || value === null || value === '') {
+    if (type === 'checkbox') return checkbox(column, false, row);
+    if (type === 'progress') return progress(0);
+    return el('span', type === 'person' ? 'person-cell' : null, type === 'text' && column.title ? '' : '—');
+  }
+  switch (type) {
+    case 'select': return tagFor(column, value);
+    case 'multi-select': {
+      const wrap = el('span');
+      wrap.style.display = 'inline-flex'; wrap.style.gap = '4px'; wrap.style.flexWrap = 'wrap';
+      for (const v of Array.isArray(value) ? value : String(value).split(',').map(s => s.trim()).filter(Boolean)) wrap.appendChild(tagFor(column, v));
+      return wrap;
+    }
+    case 'date': return el('span', 'date-cell', formatDate(column, value));
+    case 'person': {
+      const cell = el('span', 'person-cell');
+      const p = typeof value === 'string' ? { name: value } : value;
+      // color: one of Notion's nine names, or any CSS background; none – the avatar gradient.
+      const avatar = el('span', 'nk-avatar small', p.initials || p.avatar || initialsOf(p.name));
+      paintAvatar(avatar, p.color);
+      cell.append(avatar, document.createTextNode(' ' + (p.name || '')));
+      return cell;
+    }
+    case 'checkbox': return checkbox(column, !!value, row);
+    case 'url': {
+      const link = typeof value === 'object' ? value : { href: String(value), label: String(value).replace(/^https?:\/\//, ''), target: '_blank' };
+      const a = el('a', null, link.label ?? link.href);
+      a.href = link.href ?? '';
+      if (link.target) a.target = link.target;
+      if (link.target === '_blank') a.rel = 'noopener';
+      return a;
+    }
+    // column.locale / column.format: Intl.NumberFormat locale and options, e.g. { minimumFractionDigits: 1 }.
+    case 'number': return el('span', null, typeof value === 'number' ? value.toLocaleString(column.locale, column.format) : String(value));
+    case 'progress': return progress(Number(value) || 0);
+    default: {
+      const o = typeof value === 'object' ? value : { text: value };
+      let t;
+      if (column.title) {
+        t = el('span', 'row-title');
+        if (row.icon) t.append(document.createTextNode(row.icon + ' '));
+        t.append(document.createTextNode(String(o.text ?? '')));
+      } else if (typeof value === 'object') {
+        t = el('span', o.color && COLORS.includes(o.color) ? `td-text ${o.color}` : 'td-text', String(o.text ?? ''));
+      } else return el('span', null, String(value));
+      if (o.tooltip) t.dataset.tooltip = o.tooltip;
+      if (!o.desc) return t;
+      const frag = document.createDocumentFragment();
+      frag.append(t, el('span', 'td-desc', String(o.desc)));
+      return frag;
+    }
+  }
+}
+
+function actions(column, value) {
+  const all = column.actions || [];
+  const list = value == null ? all
+    : (Array.isArray(value) ? value : [value]).map(v => typeof v === 'string' ? all.find(a => a.action === v) ?? { action: v, label: v } : v);
+  const wrap = el('span', 'row-actions');
+  for (const a of list) {
+    const b = el('button', `nk-btn ${a.danger ? 'danger' : 'secondary'} small`, [a.icon, a.label ?? a.action].filter(Boolean).join(' '));
+    b.type = 'button';
+    b.dataset.action = a.action;
+    b.disabled = !!a.disabled;
+    if (a.tooltip) b.dataset.tooltip = a.tooltip;
+    wrap.appendChild(b);
+  }
+  return wrap;
+}
+
+function checkbox(column, checked, row) {
+  const label = el('label', 'nk-check');
+  const input = el('input');
+  input.type = 'checkbox'; input.checked = checked;
+  input.dataset.key = column.key;
+  if (row.id != null) input.dataset.rowId = row.id;
+  label.appendChild(input);
+  return label;
+}
+
+function progress(value) {
+  const frag = document.createDocumentFragment();
+  const bar = el('span', 'nk-progress');
+  const fill = el('i'); fill.style.width = `${Math.max(0, Math.min(100, value))}%`;
+  bar.appendChild(fill);
+  frag.append(bar, el('span', 'nk-progress-label', `${Math.round(value)}%`));
+  return frag;
+}
+
+/** A select's place among its options: the order Notion sorts by. */
+function rankOf(column, value) {
+  const i = (column.options || []).findIndex(o => o.value === value || o.label === value);
+  return i < 0 ? (column.options || []).length : i;
+}
+
+/** What a column sorts a row by – see the head of this file. */
+function sortValue(column, row) {
+  if (column.sortKey) return row[column.sortKey];
+  const v = row[column.key];
+  if (v === undefined || v === null || v === '') return null;
+  if (typeof v === 'object' && !Array.isArray(v) && 'sort' in v) return v.sort;
+  switch (column.type || 'text') {
+    case 'number': case 'progress': return Number(v);
+    case 'checkbox': return v ? 1 : 0;
+    case 'date': { const t = timeOf(v); return Number.isNaN(t) ? String(v) : t; }
+    case 'select': return rankOf(column, v);
+    case 'multi-select': { const first = (Array.isArray(v) ? v : String(v).split(','))[0]; return first == null ? null : rankOf(column, String(first).trim()); }
+    default: return textOf(v);
+  }
+}
+
+/** Sort comparator for a column; empty cells come last whichever the direction. */
+function compareBy(column, dir = 1) {
+  const empty = v => v === null || v === undefined || v === '' || Number.isNaN(v);
+  return (a, b) => {
+    const x = sortValue(column, a), y = sortValue(column, b);
+    if (empty(x) || empty(y)) return empty(x) === empty(y) ? 0 : empty(x) ? 1 : -1;
+    if (typeof x === 'number' && typeof y === 'number') return (x - y) * dir;
+    return String(x).localeCompare(String(y), undefined, { numeric: true }) * dir;
+  };
+}
+
+export { textOf as a, compareBy as c, formatDate as f, renderPropertyCell as r, tagFor as t };