@jungherz-de/notionkit-elements 1.0.1 → 1.2.0

package/README.md

@@ -1,17 +1,17 @@
 <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.0.1-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.2.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-68-529cca?style=flat-square" alt="68 Elements"></a>
+  <a href="#"><img src="https://img.shields.io/badge/elements-71-529cca?style=flat-square" alt="71 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.0.1-lightgrey?style=flat-square" alt="Changelog"></a>
+  <a href="CHANGELOG.md"><img src="https://img.shields.io/badge/changelog-v1.2.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>
 
 <p align="center">
   <strong>Drop-in Web Components for <a href="https://github.com/JUNGHERZ/NotionKit">NotionKit CSS</a></strong><br>
-  68 vanilla JavaScript custom elements wrapping NotionKit's calm, document-centric workspace look.<br>
+  71 vanilla JavaScript custom elements wrapping NotionKit's calm, document-centric workspace look.<br>
   Shadow DOM &middot; Native form participation &middot; Pixel parity with the class markup &middot; Zero dependencies.
 </p>
 
@@ -28,7 +28,7 @@
 
 ## ✨ What is NotionKit Elements?
 
-NotionKit Elements is the companion library to [NotionKit CSS](https://github.com/JUNGHERZ/NotionKit). It provides **68 Web Components** – from buttons and form controls over the sidebar, page tree and page shell to the settings modal, ⌘K palette, database views and AI thread – that encapsulate the class markup of the foundation into simple, declarative custom elements.
+NotionKit Elements is the companion library to [NotionKit CSS](https://github.com/JUNGHERZ/NotionKit). It provides **71 Web Components** – from buttons and form controls over the sidebar, page tree and page shell to the settings modal, ⌘K palette, database views and AI thread – that encapsulate the class markup of the foundation into simple, declarative custom elements.
 
 It is the **app layer** of the NotionKit family – three layers, one design language: [NotionKit](https://notionkit.jungherz.com) is the pure-CSS foundation, NotionKit Elements wraps it into web components for application UIs, and [NotionKit Web](https://notionkit-web.jungherz.com) is the Astro template for complete websites on top of the same foundation. The word stem stays the same across the layers: `.nk-callout` becomes `<nk-callout>`, a modifier class becomes an attribute, a state class becomes a boolean attribute.
 
@@ -56,7 +56,7 @@ It is the **app layer** of the NotionKit family – three layers, one design lan
 |---|---|
 | 🎯 **Pixel parity** | Every element renders identically to its class markup – verified by a Playwright pixel test in light and dark; the reference app differs by 0.00 % from the class version |
 | 🔌 **Shadow DOM** | Each root adopts the NotionKit *components* sheet via `adoptedStyleSheets`; tokens are inherited from the document, so one `:root { --nk-accent: … }` re-brands everything |
-| 🧩 **68 Elements** | Forms, content blocks, app shell & tree, page shell, overlays (modal, ⌘K palette, menus, popover, emoji picker, toast), database table & board, comments, AI thread |
+| 🧩 **71 Elements** | Forms, content blocks, app shell & tree, page shell, overlays (modal, ⌘K palette, menus, popover, emoji picker, toast), database table & board, 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** | 167 KB minified / 33 KB gzipped (IIFE, foundation sheet included), no external dependencies |
@@ -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.1.1/notionkit.min.css">
-  <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit-elements@1.0.1/dist/notionkit-elements.min.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit@1.3.0/notionkit.min.css">
+  <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit-elements@1.2.0/dist/notionkit-elements.min.js"></script>
 </head>
 <body class="nk-body">
   <nk-field label="Display name" desc="Shown next to your comments">
@@ -93,15 +93,15 @@ import '@jungherz-de/notionkit-elements';                              // everyt
 import '@jungherz-de/notionkit-elements/components/nk-btn.js';         // or one element (shared code is one extra chunk)
 ```
 
-Two prerequisites, always: `notionkit.css` on the document (the peer dependency, `>= 1.0.0`; 1.1.1 is what the elements are built and tested against) 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.3.0`; 1.3.0 brings the field layouts and the labelled switch, 1.2.0 the tab bar, and is what the elements are built and tested against) 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
 
 | Group | Elements |
 |---|---|
-| Forms & controls | `nk-btn` `nk-input` `nk-textarea` `nk-select` `nk-switch` `nk-check` `nk-radio` `nk-slider` `nk-field` |
+| Forms & controls | `nk-btn` `nk-input` `nk-textarea` `nk-select` `nk-switch` `nk-check` `nk-radio` `nk-slider` `nk-field` `nk-fields` |
 | Content | `nk-tag` `nk-progress` `nk-callout` `nk-divider` `nk-heading` `nk-toggle` `nk-todo` `nk-kbd` `nk-code` `nk-quote` |
-| App shell & navigation | `nk-app` `nk-sidebar` `nk-workspace-switcher` `nk-section-label` `nk-tree` `nk-tree-item` `nk-topbar` `nk-breadcrumb` `nk-theme-toggle` |
+| App shell & navigation | `nk-app` `nk-sidebar` `nk-workspace-switcher` `nk-section-label` `nk-tree` `nk-tree-item` `nk-topbar` `nk-breadcrumb` `nk-theme-toggle` `nk-tab-bar` `nk-tab-bar-item` |
 | Page shell & blocks | `nk-page` `nk-page-cover` `nk-page-title` `nk-page-actions` `nk-block-host` `nk-banner` `nk-empty` `nk-skeleton` `nk-synced` `nk-tabs` `nk-tab` `nk-segmented` `nk-stats` `nk-stat` `nk-avatar-group` `nk-mention` `nk-template-btn` `nk-model-card` `nk-profile-row` `nk-danger-zone` `nk-member-list` `nk-member-row` |
 | Overlays | `nk-modal` `nk-settings-pane` `nk-settings-user` `nk-cmdk` `nk-menu` `nk-menu-item` `nk-pop` `nk-emoji-picker` `nk-toast` |
 | Data & collaboration | `nk-database` `nk-table-view` `nk-board-view` `nk-filter-bar` `nk-comments` `nk-comment` `nk-ai-thread` `nk-ai-msg` `nk-ai-input-row` (+ the exported `renderPropertyCell()`) |

package/dist/components/nk-ai-input-row.js

@@ -1,4 +1,4 @@
-import { N as NkElement } from './shared/base-6gEcoatG.js';
+import { N as NkElement } from './shared/base-EVtzqKmc.js';
 
 // <nk-ai-input-row placeholder="Ask Mona something …"></nk-ai-input-row>
 // → <div class="nk-ai-input-row"><span>✨</span><input><button class="nk-ai-send">↑</button></div>

package/dist/components/nk-ai-msg.js

@@ -1,4 +1,4 @@
-import { N as NkElement } from './shared/base-6gEcoatG.js';
+import { N as NkElement } from './shared/base-EVtzqKmc.js';
 
 // <nk-ai-msg role="user" name="You" avatar="MK">Summarise the open tasks.</nk-ai-msg>
 // <nk-ai-msg role="assistant" name="Mona" badge="· AI" avatar="✨">

package/dist/components/nk-ai-thread.js

@@ -1,4 +1,4 @@
-import { N as NkElement } from './shared/base-6gEcoatG.js';
+import { N as NkElement } from './shared/base-EVtzqKmc.js';
 
 // <nk-ai-thread><nk-ai-msg …>…</nk-ai-msg>…</nk-ai-thread>  →  <div class="nk-ai-thread">
 class NkAiThread extends NkElement {

package/dist/components/nk-app.js

@@ -1,4 +1,4 @@
-import { N as NkElement } from './shared/base-6gEcoatG.js';
+import { N as NkElement } from './shared/base-EVtzqKmc.js';
 
 // <nk-app>
 //   <nk-sidebar slot="sidebar">…</nk-sidebar>

package/dist/components/nk-avatar-group.js

@@ -1,4 +1,4 @@
-import { N as NkElement } from './shared/base-6gEcoatG.js';
+import { N as NkElement } from './shared/base-EVtzqKmc.js';
 
 // <nk-avatar-group more="+2">
 //   <span class="mini-avatar" style="background:#448361">SL</span>…

package/dist/components/nk-banner.js

@@ -1,4 +1,4 @@
-import { N as NkElement } from './shared/base-6gEcoatG.js';
+import { N as NkElement } from './shared/base-EVtzqKmc.js';
 
 // <nk-banner variant="info">ℹ️ <span>Text</span><span slot="action">Open</span></nk-banner>
 // → <div class="nk-banner info">…<span class="b-action">Open</span></div>

package/dist/components/nk-block-host.js

@@ -1,4 +1,4 @@
-import { N as NkElement } from './shared/base-6gEcoatG.js';
+import { N as NkElement } from './shared/base-EVtzqKmc.js';
 
 // <nk-block-host handle><p>Editable content lives here.</p></nk-block-host>
 // → <div class="nk-block-host"><span class="nk-block-handle">⠿</span>…</div>

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

@@ -1,4 +1,4 @@
-import { N as NkElement } from './shared/base-6gEcoatG.js';
+import { N as NkElement } from './shared/base-EVtzqKmc.js';
 import { t as tagFor, r as renderPropertyCell } from './shared/property-cell-Dn91uFkf.js';
 
 // <nk-board-view name="board" label="▤ Board" group-by="status" new-row></nk-board-view>

package/dist/components/nk-breadcrumb.js

@@ -1,4 +1,4 @@
-import { N as NkElement } from './shared/base-6gEcoatG.js';
+import { N as NkElement } from './shared/base-EVtzqKmc.js';
 
 // <nk-breadcrumb>
 //   <a href="/overview">📊 Project overview</a>

package/dist/components/nk-btn.js

@@ -1,4 +1,4 @@
-import { N as NkElement } from './shared/base-6gEcoatG.js';
+import { N as NkElement } from './shared/base-EVtzqKmc.js';
 
 // <nk-btn variant="primary" small>Save</nk-btn>   →  <button class="nk-btn primary small">
 // <nk-btn href="/docs" variant="secondary">Docs</nk-btn>  →  <a class="nk-btn secondary">

package/dist/components/nk-callout.js

@@ -1,4 +1,4 @@
-import { N as NkElement } from './shared/base-6gEcoatG.js';
+import { N as NkElement } from './shared/base-EVtzqKmc.js';
 
 // <nk-callout icon="💡">text</nk-callout>
 // <nk-callout><span slot="icon">📌</span>text</nk-callout>

package/dist/components/nk-check.js

@@ -1,17 +1,20 @@
-import { a as NkFormElement } from './shared/base-6gEcoatG.js';
+import { a as NkFormElement } from './shared/base-EVtzqKmc.js';
 
 // <nk-check name="mail" value="weekly" checked>Weekly digest</nk-check>
 // → <label class="nk-check"><input type="checkbox"> Weekly digest</label>
 class NkCheck extends NkFormElement {
-  static get observedAttributes() { return ['checked', 'disabled', 'name', 'value', 'indeterminate', 'required']; }
+  static get observedAttributes() { return ['checked', 'disabled', 'name', 'value', 'text', 'indeterminate', 'required']; }
 
   render() {
     const label = this.createElement('label', ['nk-check']);
     this._input = this.createElement('input', [], { type: 'checkbox' });
+    const slot = document.createElement('slot');
+    this._text = document.createTextNode('');
+    slot.appendChild(this._text);
     this._apply();
     this._defaultChecked = this.getBoolAttr('checked');
     label.appendChild(this._input);
-    label.appendChild(document.createElement('slot'));
+    label.appendChild(slot);
     this._wrapper.appendChild(label);
     this._syncFormValue();
   }
@@ -24,6 +27,7 @@ class NkCheck extends NkFormElement {
     const name = this.getAttribute('name');
     name ? this._input.setAttribute('name', name) : this._input.removeAttribute('name');
     this._input.value = this.getAttribute('value') || 'on';
+    if (this._text) this._text.data = this.getAttribute('text') ?? '';
   }
 
   setupEvents() {
@@ -68,6 +72,8 @@ class NkCheck extends NkFormElement {
   set disabled(v) { this.setBoolAttr('disabled', v); }
   get name() { return this.getAttribute('name'); }
   set name(v) { this.setAttribute('name', v); }
+  get text() { return this.getAttribute('text'); }
+  set text(v) { v == null ? this.removeAttribute('text') : this.setAttribute('text', v); }
   get value() { return this.getAttribute('value') || 'on'; }
   set value(v) { this.setAttribute('value', v); }
 }

package/dist/components/nk-cmdk.js

@@ -1,4 +1,4 @@
-import { N as NkElement } from './shared/base-6gEcoatG.js';
+import { N as NkElement } from './shared/base-EVtzqKmc.js';
 import { l as lockScroll, i as inertOutside, u as unlockScroll } from './shared/focus-DXrK9oLe.js';
 
 // Subsequence scoring for the command palette: every query character must

package/dist/components/nk-code.js

@@ -1,4 +1,4 @@
-import { N as NkElement } from './shared/base-6gEcoatG.js';
+import { N as NkElement } from './shared/base-EVtzqKmc.js';
 
 // Minimal HTML highlighter emitting the .tag / .attr hooks .nk-code styles.
 // Mirrors tools/highlight.mjs in the NotionKit foundation – no third-party

package/dist/components/nk-comment.js

@@ -1,4 +1,4 @@
-import { N as NkElement } from './shared/base-6gEcoatG.js';
+import { N as NkElement } from './shared/base-EVtzqKmc.js';
 
 // <nk-comment author="Sara Lindt" time="1 hr ago" avatar="SL" color="#448361">The board view feels close.</nk-comment>
 // → <div class="nk-comment"><span class="mini-avatar">SL</span><div><div class="c-head"><b>Sara Lindt</b> · 1 hr ago</div><div class="c-body">…</div></div></div>

package/dist/components/nk-comments.js

@@ -1,4 +1,4 @@
-import { N as NkElement } from './shared/base-6gEcoatG.js';
+import { N as NkElement } from './shared/base-EVtzqKmc.js';
 
 // <nk-comments placeholder="Comment …" send-label="Send">
 //   <nk-comment …>…</nk-comment>

package/dist/components/nk-danger-zone.js

@@ -1,4 +1,4 @@
-import { N as NkElement } from './shared/base-6gEcoatG.js';
+import { N as NkElement } from './shared/base-EVtzqKmc.js';
 
 // <nk-danger-zone title="Danger zone">…</nk-danger-zone>
 // → <div class="nk-danger-zone"><div class="dz-title">Danger zone</div>…</div>

package/dist/components/nk-database.js

@@ -1,4 +1,4 @@
-import { N as NkElement } from './shared/base-6gEcoatG.js';
+import { N as NkElement } from './shared/base-EVtzqKmc.js';
 
 // <nk-database id="db" view="table" add-view>
 //   <nk-table-view name="table" label="▦ Table" count></nk-table-view>

package/dist/components/nk-divider.js

@@ -1,4 +1,4 @@
-import { N as NkElement } from './shared/base-6gEcoatG.js';
+import { N as NkElement } from './shared/base-EVtzqKmc.js';
 
 // <nk-divider></nk-divider>  →  <hr class="nk-divider">
 class NkDivider extends NkElement {

package/dist/components/nk-emoji-picker.js

@@ -1,4 +1,4 @@
-import { N as NkElement } from './shared/base-6gEcoatG.js';
+import { N as NkElement } from './shared/base-EVtzqKmc.js';
 
 // Built-in emoji set for <nk-emoji-picker>: eight categories, names for
 // search. Override with `picker.emojis = [{ char, name, cat }]`.

package/dist/components/nk-empty.js

@@ -1,4 +1,4 @@
-import { N as NkElement } from './shared/base-6gEcoatG.js';
+import { N as NkElement } from './shared/base-EVtzqKmc.js';
 
 // <nk-empty icon="🗂️" title="No entries yet" desc="Create the first one."><nk-btn variant="primary" small>＋ New</nk-btn></nk-empty>
 // → <div class="nk-empty"><div class="e-icon">🗂️</div><div class="e-title">…</div><div class="e-desc">…</div>…</div>

package/dist/components/nk-field.js

@@ -1,4 +1,4 @@
-import { N as NkElement } from './shared/base-6gEcoatG.js';
+import { N as NkElement } from './shared/base-EVtzqKmc.js';
 
 // <nk-field label="Display name" desc="Shown next to your comments">
 //   <nk-input value="Marcel"></nk-input>
@@ -7,11 +7,19 @@ import { N as NkElement } from './shared/base-6gEcoatG.js';
 //                         <div class="f-control">…</div></div>
 // Rich label / description content goes through slot="label" / slot="desc"
 // (twins `.nk-field ::slotted([slot="label"])` etc. in notionkit.css).
+//
+// `stacked` puts the label above a full-width control, `compact` shrinks the
+// label and drops the row padding; inside <nk-fields> both are on by
+// default. A stacked field sets `wide` on its nk-input / nk-textarea /
+// nk-select, since the stylesheet's `.nk-field.stacked .nk-input` cannot
+// reach into the control's shadow root.
+const WIDE = ['nk-input', 'nk-textarea', 'nk-select'];
+
 class NkField extends NkElement {
-  static get observedAttributes() { return ['label', 'desc']; }
+  static get observedAttributes() { return ['label', 'desc', 'stacked', 'compact']; }
 
   render() {
-    const field = this.createElement('div', ['nk-field']);
+    this._field = this.createElement('div', ['nk-field']);
     const text = document.createElement('div');
     this._label = this.createElement('div', ['f-label']);
     const labelSlot = this.createElement('slot', [], { name: 'label' });
@@ -22,21 +30,51 @@ class NkField extends NkElement {
     text.appendChild(labelSlot);
     text.appendChild(descSlot);
     const control = this.createElement('div', ['f-control']);
-    control.appendChild(document.createElement('slot'));
-    field.appendChild(text);
-    field.appendChild(control);
-    this._wrapper.appendChild(field);
+    this._slot = document.createElement('slot');
+    control.appendChild(this._slot);
+    this._field.appendChild(text);
+    this._field.appendChild(control);
+    this._wrapper.appendChild(this._field);
+    this._widened = new Set();
     this._sync();
   }
 
+  setupEvents() {
+    this._onSlot = () => this._syncWide();
+    this._slot.addEventListener('slotchange', this._onSlot);
+    this._sync();
+  }
+
+  teardownEvents() {
+    this._slot?.removeEventListener('slotchange', this._onSlot);
+  }
+
   onAttributeChanged() { this._sync(); }
 
+  get stacked() { return this.getBoolAttr('stacked') || !!this.closest('nk-fields'); }
+  set stacked(v) { this.setBoolAttr('stacked', v); }
+  get compact() { return this.getBoolAttr('compact') || !!this.closest('nk-fields'); }
+  set compact(v) { this.setBoolAttr('compact', v); }
+
   _sync() {
     if (!this._label) return;
     this._label.textContent = this.getAttribute('label') || '';
     const desc = this.getAttribute('desc');
     this._desc.textContent = desc || '';
     this._desc.style.display = desc ? '' : 'none';
+    this._field.classList.toggle('stacked', this.stacked);
+    this._field.classList.toggle('compact', this.compact);
+    this._syncWide();
+  }
+
+  _syncWide() {
+    if (!this._slot) return;
+    const stacked = this.stacked;
+    for (const el of this._slot.assignedElements()) {
+      if (!WIDE.includes(el.localName)) continue;
+      if (stacked && !el.hasAttribute('wide')) { el.setAttribute('wide', ''); this._widened.add(el); }
+      else if (!stacked && this._widened.has(el)) { el.removeAttribute('wide'); this._widened.delete(el); }
+    }
   }
 
   get label() { return this.getAttribute('label'); }

package/dist/components/nk-fields.js

@@ -0,0 +1,22 @@
+import { N as NkElement } from './shared/base-EVtzqKmc.js';
+
+// <nk-fields>
+//   <nk-field label="Name"><nk-input name="name"></nk-input></nk-field>
+//   <nk-field label="Email"><nk-input name="email"></nk-input></nk-field>
+// </nk-fields>
+// → <div class="nk-fields">…</div>
+// A grid of short fields side by side, wrapping as the width allows. Every
+// nk-field inside renders itself stacked and compact (12px label above a
+// full-width control) – the class markup does the same through
+// `.nk-fields > .nk-field`, which cannot cross the shadow boundary here.
+class NkFields extends NkElement {
+  render() {
+    const grid = this.createElement('div', ['nk-fields']);
+    grid.appendChild(document.createElement('slot'));
+    this._wrapper.appendChild(grid);
+  }
+}
+
+customElements.define('nk-fields', NkFields);
+
+export { NkFields };

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

@@ -1,4 +1,4 @@
-import { N as NkElement } from './shared/base-6gEcoatG.js';
+import { N as NkElement } from './shared/base-EVtzqKmc.js';
 
 // <nk-filter-bar search placeholder="Search rows …"></nk-filter-bar>
 // bar.filters = [{ key: 'status', label: 'Status: Done', value: 'done' }];

package/dist/components/nk-heading.js

@@ -1,4 +1,4 @@
-import { N as NkElement } from './shared/base-6gEcoatG.js';
+import { N as NkElement } from './shared/base-EVtzqKmc.js';
 
 // <nk-heading level="2">Section</nk-heading>  →  <h2 class="nk-heading">
 // The heading level is real markup (h1–h4), so the outline stays honest.

package/dist/components/nk-input.js

@@ -1,4 +1,4 @@
-import { a as NkFormElement } from './shared/base-6gEcoatG.js';
+import { a as NkFormElement } from './shared/base-EVtzqKmc.js';
 
 // <nk-input name="title" value="…" placeholder="…" wide></nk-input>  →  <input class="nk-input wide">
 // Takes part in the surrounding <form> through ElementInternals.
@@ -21,7 +21,7 @@ class NkInput extends NkFormElement {
 
   _forward(attr) {
     if (BOOLEANS.includes(attr)) {
-      this._input[attr === 'readonly' ? 'readOnly' : attr] = this.getBoolAttr(attr);
+      this._input[attr === 'readonly' ? 'readOnly' : attr] = this.getBoolAttr(attr) || (attr === 'disabled' && !!this._formDisabled);
       return;
     }
     const v = this.getAttribute(attr);

package/dist/components/nk-kbd.js

@@ -1,4 +1,4 @@
-import { N as NkElement } from './shared/base-6gEcoatG.js';
+import { N as NkElement } from './shared/base-EVtzqKmc.js';
 
 // <nk-kbd>⌘</nk-kbd> <nk-kbd>K</nk-kbd>  →  <kbd class="nk-kbd">
 class NkKbd extends NkElement {

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

@@ -1,4 +1,4 @@
-import { N as NkElement } from './shared/base-6gEcoatG.js';
+import { N as NkElement } from './shared/base-EVtzqKmc.js';
 
 // <nk-member-list><nk-member-row …></nk-member-row>…</nk-member-list>
 // → <div class="nk-member-list">…</div>; the last row gets `last` (no border).

package/dist/components/nk-member-row.js

@@ -1,4 +1,4 @@
-import { N as NkElement } from './shared/base-6gEcoatG.js';
+import { N as NkElement } from './shared/base-EVtzqKmc.js';
 
 // <nk-member-row name="Sara Lindt" mail="sara@…" avatar="SL" color="#448361">
 //   <nk-select slot="role" compact>…</nk-select>

package/dist/components/nk-mention.js

@@ -1,4 +1,4 @@
-import { N as NkElement } from './shared/base-6gEcoatG.js';
+import { N as NkElement } from './shared/base-EVtzqKmc.js';
 
 // <nk-mention type="person"><span slot="avatar" class="mini-avatar" style="background:#448361">SL</span>Sara Lindt</nk-mention>
 // <nk-mention type="page">📄 Onboarding</nk-mention>   <nk-mention type="date">📅 May 20</nk-mention>

package/dist/components/nk-menu-item.js

@@ -1,4 +1,4 @@
-import { N as NkElement } from './shared/base-6gEcoatG.js';
+import { N as NkElement } from './shared/base-EVtzqKmc.js';
 
 // <nk-menu-item icon="✏️" shortcut="⌘E" value="rename">Rename</nk-menu-item>
 // <nk-menu-item type="separator"></nk-menu-item>   <nk-menu-item type="label">Danger</nk-menu-item>

package/dist/components/nk-menu.js

@@ -1,4 +1,4 @@
-import { N as NkElement } from './shared/base-6gEcoatG.js';
+import { N as NkElement } from './shared/base-EVtzqKmc.js';
 
 // <nk-menu>
 //   <nk-menu-item type="label">Page</nk-menu-item>

package/dist/components/nk-modal.js

@@ -1,4 +1,4 @@
-import { N as NkElement } from './shared/base-6gEcoatG.js';
+import { N as NkElement } from './shared/base-EVtzqKmc.js';
 import { l as lockScroll, i as inertOutside, f as firstFocusable, u as unlockScroll } from './shared/focus-DXrK9oLe.js';
 
 // <nk-modal id="settings">

package/dist/components/nk-model-card.js

@@ -1,4 +1,4 @@
-import { a as NkFormElement } from './shared/base-6gEcoatG.js';
+import { a as NkFormElement } from './shared/base-EVtzqKmc.js';
 
 // <nk-model-card name="model" value="gpt" title="Mona Pro" desc="Best for long documents" selected></nk-model-card>
 // → <div class="nk-model-card selected"><div class="m-radio"></div><div><div class="m-name">…</div><div class="m-desc">…</div></div></div>

package/dist/components/nk-page-actions.js

@@ -1,4 +1,4 @@
-import { N as NkElement } from './shared/base-6gEcoatG.js';
+import { N as NkElement } from './shared/base-EVtzqKmc.js';
 
 // <nk-page-actions><span>👤 Ada</span><span>📅 12 May</span><span>🏷️ <nk-tag color="purple">Design</nk-tag></span></nk-page-actions>
 // → <div class="nk-page-meta">…</div>  – the meta row under the title

package/dist/components/nk-page-cover.js

@@ -1,4 +1,4 @@
-import { N as NkElement } from './shared/base-6gEcoatG.js';
+import { N as NkElement } from './shared/base-EVtzqKmc.js';
 
 // <nk-page-cover slot="cover"></nk-page-cover>            → the token gradient
 // <nk-page-cover slot="cover" src="cover.jpg"></nk-page-cover>  → an image

package/dist/components/nk-page-title.js

@@ -1,4 +1,4 @@
-import { N as NkElement } from './shared/base-6gEcoatG.js';
+import { N as NkElement } from './shared/base-EVtzqKmc.js';
 
 // <nk-page-title>NotionKit MVP</nk-page-title>          → <h1 class="nk-page-title">
 // <nk-page-title editable placeholder="Untitled">…</nk-page-title>

package/dist/components/nk-page.js

@@ -1,4 +1,4 @@
-import { N as NkElement } from './shared/base-6gEcoatG.js';
+import { N as NkElement } from './shared/base-EVtzqKmc.js';
 
 // <nk-page icon="🚀" cover>
 //   <nk-page-title>NotionKit MVP</nk-page-title>

package/dist/components/nk-pop.js

@@ -1,4 +1,4 @@
-import { N as NkElement } from './shared/base-6gEcoatG.js';
+import { N as NkElement } from './shared/base-EVtzqKmc.js';
 
 // <nk-pop placement="bottom-start">
 //   <nk-btn slot="trigger" variant="secondary">Options</nk-btn>

package/dist/components/nk-profile-row.js

@@ -1,4 +1,4 @@
-import { N as NkElement } from './shared/base-6gEcoatG.js';
+import { N as NkElement } from './shared/base-EVtzqKmc.js';
 
 // <nk-profile-row avatar="MK"><nk-btn variant="secondary" small>Change photo</nk-btn></nk-profile-row>
 // → <div class="nk-profile-row"><div class="big-avatar">MK</div>…</div>

package/dist/components/nk-progress.js

@@ -1,4 +1,4 @@
-import { N as NkElement } from './shared/base-6gEcoatG.js';
+import { N as NkElement } from './shared/base-EVtzqKmc.js';
 
 // <nk-progress value="72" label="72%"></nk-progress>
 // The bar is `.nk-progress > i` — a child combinator, so both nodes live here.

package/dist/components/nk-quote.js

@@ -1,4 +1,4 @@
-import { N as NkElement } from './shared/base-6gEcoatG.js';
+import { N as NkElement } from './shared/base-EVtzqKmc.js';
 
 // <nk-quote cite="Ada Lovelace">The Analytical Engine weaves…</nk-quote>
 // .q-cite has no ::slotted() twin, so the citation is rendered here.

package/dist/components/nk-radio.js

@@ -1,4 +1,4 @@
-import { a as NkFormElement } from './shared/base-6gEcoatG.js';
+import { a as NkFormElement } from './shared/base-EVtzqKmc.js';
 
 // <nk-radio name="style" value="concise" checked>Concise</nk-radio>
 // → <label class="nk-check"><input type="radio"> Concise</label>
@@ -29,17 +29,20 @@ function syncGroupTabIndex(group) {
 }
 
 class NkRadio extends NkFormElement {
-  static get observedAttributes() { return ['checked', 'disabled', 'name', 'value', 'required']; }
+  static get observedAttributes() { return ['checked', 'disabled', 'name', 'value', 'text', 'required']; }
 
   render() {
     const label = this.createElement('label', ['nk-check']);
     this._input = this.createElement('input', [], { type: 'radio' });
+    const slot = document.createElement('slot');
+    this._text = document.createTextNode('');
+    slot.appendChild(this._text);
     // `name` on the inner input is inert (it is alone in its tree); it stays
     // as a devtools courtesy. The group above is the real one.
     this._apply();
     this._defaultChecked = this.getBoolAttr('checked');
     label.appendChild(this._input);
-    label.appendChild(document.createElement('slot'));
+    label.appendChild(slot);
     this._wrapper.appendChild(label);
     this._syncFormValue();
     // Elements upgrade in document order, so the last `checked` one in the
@@ -55,6 +58,7 @@ class NkRadio extends NkFormElement {
     const name = this.getAttribute('name');
     name ? this._input.setAttribute('name', name) : this._input.removeAttribute('name');
     this._input.value = this.getAttribute('value') || '';
+    if (this._text) this._text.data = this.getAttribute('text') ?? '';
   }
 
   setupEvents() {
@@ -151,6 +155,8 @@ class NkRadio extends NkFormElement {
   set disabled(v) { this.setBoolAttr('disabled', v); }
   get name() { return this.getAttribute('name'); }
   set name(v) { this.setAttribute('name', v); }
+  get text() { return this.getAttribute('text'); }
+  set text(v) { v == null ? this.removeAttribute('text') : this.setAttribute('text', v); }
   get value() { return this.getAttribute('value') || ''; }
   set value(v) { this.setAttribute('value', v); }
 }

package/dist/components/nk-section-label.js

@@ -1,4 +1,4 @@
-import { N as NkElement } from './shared/base-6gEcoatG.js';
+import { N as NkElement } from './shared/base-EVtzqKmc.js';
 
 // <nk-section-label addable>Favourites</nk-section-label>
 // → <div class="nk-section-label">Favourites <span class="plus">＋</span></div>

package/dist/components/nk-segmented.js

@@ -1,4 +1,4 @@
-import { a as NkFormElement } from './shared/base-6gEcoatG.js';
+import { a as NkFormElement } from './shared/base-EVtzqKmc.js';
 
 // <nk-segmented name="range" value="week">
 //   <button value="week">Week</button><button value="month">Month</button>