@jungherz-de/notionkit-elements 1.0.0 → 1.1.0

package/README.md

@@ -1,18 +1,69 @@
+<h1 align="center">🧩 NotionKit Elements</h1>
+
 <p align="center">
-  <img src="https://img.shields.io/badge/version-1.0.0-2383e2?style=flat-square" alt="Version">
-  <a href="https://www.npmjs.com/package/@jungherz-de/notionkit-elements"><img src="https://img.shields.io/npm/v/@jungherz-de/notionkit-elements?style=flat-square&color=529cca" alt="npm"></a>
-  <a href="CHANGELOG.md"><img src="https://img.shields.io/badge/changelog-v1.0.0-9065b0?style=flat-square" alt="Changelog"></a>
-  <img src="https://img.shields.io/badge/license-MIT-448361?style=flat-square" alt="MIT">
+  <a href="https://www.npmjs.com/package/@jungherz-de/notionkit-elements"><img src="https://img.shields.io/badge/version-1.1.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-70-529cca?style=flat-square" alt="70 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.1.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>
 
-# NotionKit Elements
+<p align="center">
+  <strong>Drop-in Web Components for <a href="https://github.com/JUNGHERZ/NotionKit">NotionKit CSS</a></strong><br>
+  70 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>
+
+<p align="center">
+  <a href="https://notionkit-elements.jungherz.com/">🌐 Live Demo</a> &nbsp;&middot;&nbsp;
+  <a href="https://notionkit-elements.jungherz.com/docs.html">📖 Documentation</a> &nbsp;&middot;&nbsp;
+  <a href="https://notionkit-elements.jungherz.com/showcase.html">🎨 Showcase</a> &nbsp;&middot;&nbsp;
+  <a href="https://notionkit.jungherz.com/">📓 NotionKit CSS</a> &nbsp;&middot;&nbsp;
+  <a href="https://notionkit-web.jungherz.com/">🚀 NotionKit Web</a> &nbsp;&middot;&nbsp;
+  <a href="SKILL.md">🤖 SKILL.md</a>
+</p>
+
+---
+
+## ✨ What is NotionKit Elements?
+
+NotionKit Elements is the companion library to [NotionKit CSS](https://github.com/JUNGHERZ/NotionKit). It provides **70 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.
 
-Vanilla-JS Web Components for the [NotionKit](https://notionkit.jungherz.com) CSS foundation – 68 `<nk-*>` custom elements with Shadow DOM, automatic light/dark sync, native form participation and pixel parity with the class markup. Same word stem as the CSS classes: `.nk-callout` becomes `<nk-callout>`, a modifier class becomes an attribute, a state class becomes a boolean attribute.
+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.
 
-- **Docs:** https://notionkit-elements.jungherz.com/docs.html – attributes, slots, events, before/after against the class markup
-- **Showcase:** https://notionkit-elements.jungherz.com/showcase.html – every element live, both themes, brand switch
-- **Demo app:** https://notionkit-elements.jungherz.com/app.html – the NotionKit reference app, elements only
-- **AI reference:** [SKILL.md](SKILL.md) – copy-paste markup, six app skeletons, rules and common mistakes
+```html
+<!-- Before: 6 elements, 6 classes -->
+<div class="nk-field">
+  <div>
+    <div class="f-label">Email notifications</div>
+    <div class="f-desc">Shown next to your comments.</div>
+  </div>
+  <div class="f-control"><button class="nk-switch" role="switch" aria-checked="true"></button></div>
+</div>
+
+<!-- After: 2 elements, 0 classes -->
+<nk-field label="Email notifications" desc="Shown next to your comments.">
+  <nk-switch checked></nk-switch>
+</nk-field>
+```
+
+---
+
+## 🎯 Why NotionKit Elements?
+
+| Feature | Details |
+|---|---|
+| 🎯 **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 |
+| 🧩 **70 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 |
+| 📦 **Four bundle shapes** | IIFE, minified IIFE, ESM, and per-component ESM entries with a shared chunk |
+| 🤖 **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 |
+
+---
 
 ## Quick start
 
@@ -20,8 +71,8 @@ Vanilla-JS Web Components for the [NotionKit](https://notionkit.jungherz.com) CS
 <!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.0/dist/notionkit-elements.min.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit@1.2.0/notionkit.min.css">
+  <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit-elements@1.1.0/dist/notionkit-elements.min.js"></script>
 </head>
 <body class="nk-body">
   <nk-field label="Display name" desc="Shown next to your comments">
@@ -42,7 +93,7 @@ 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.2.0`; 1.2.0 brings the `.nk-tab-bar` rules 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
 
@@ -50,7 +101,7 @@ Two prerequisites, always: `notionkit.css` on the document (the peer dependency,
 |---|---|
 | Forms & controls | `nk-btn` `nk-input` `nk-textarea` `nk-select` `nk-switch` `nk-check` `nk-radio` `nk-slider` `nk-field` |
 | 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()`) |
@@ -81,10 +132,12 @@ npm run check:coverage && npm run check:versions
 
 ## The NotionKit family
 
-| Layer | Package |
-|---|---|
-| **NotionKit** – CSS foundation | [`@jungherz-de/notionkit`](https://github.com/JUNGHERZ/NotionKit) |
-| **NotionKit Elements** – this package | `@jungherz-de/notionkit-elements` |
-| NotionKit Web – Astro template | planned |
+| Layer | Repository | Website |
+|---|---|---|
+| **NotionKit** – CSS foundation | [`JUNGHERZ/NotionKit`](https://github.com/JUNGHERZ/NotionKit) | [notionkit.jungherz.com](https://notionkit.jungherz.com) |
+| **NotionKit Elements** – Web Components (this package) | [`JUNGHERZ/NotionKit-Elements`](https://github.com/JUNGHERZ/NotionKit-Elements) | [notionkit-elements.jungherz.com](https://notionkit-elements.jungherz.com) |
+| **NotionKit Web** – Astro template for complete websites | [`JUNGHERZ/NotionKit-Web`](https://github.com/JUNGHERZ/NotionKit-Web) | [notionkit-web.jungherz.com](https://notionkit-web.jungherz.com) |
+
+npm: [`@jungherz-de/notionkit`](https://www.npmjs.com/package/@jungherz-de/notionkit) · [`@jungherz-de/notionkit-elements`](https://www.npmjs.com/package/@jungherz-de/notionkit-elements)
 
-MIT · Jungherz GmbH
+MIT · [Jungherz GmbH](https://www.jungherz.com)

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-BavgHsS-.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-BavgHsS-.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-BavgHsS-.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-BavgHsS-.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-BavgHsS-.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-BavgHsS-.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-BavgHsS-.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-BavgHsS-.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-BavgHsS-.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-BavgHsS-.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-BavgHsS-.js';
 
 // <nk-callout icon="💡">text</nk-callout>
 // <nk-callout><span slot="icon">📌</span>text</nk-callout>

package/dist/components/nk-check.js

@@ -1,4 +1,4 @@
-import { a as NkFormElement } from './shared/base-6gEcoatG.js';
+import { a as NkFormElement } from './shared/base-BavgHsS-.js';
 
 // <nk-check name="mail" value="weekly" checked>Weekly digest</nk-check>
 // → <label class="nk-check"><input type="checkbox"> Weekly digest</label>

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-BavgHsS-.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-BavgHsS-.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-BavgHsS-.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-BavgHsS-.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-BavgHsS-.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-BavgHsS-.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-BavgHsS-.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-BavgHsS-.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-BavgHsS-.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-BavgHsS-.js';
 
 // <nk-field label="Display name" desc="Shown next to your comments">
 //   <nk-input value="Marcel"></nk-input>

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-BavgHsS-.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-BavgHsS-.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-BavgHsS-.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-BavgHsS-.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-BavgHsS-.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-BavgHsS-.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-BavgHsS-.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-BavgHsS-.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-BavgHsS-.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-BavgHsS-.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-BavgHsS-.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-BavgHsS-.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-BavgHsS-.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-BavgHsS-.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-BavgHsS-.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-BavgHsS-.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-BavgHsS-.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-BavgHsS-.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-BavgHsS-.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-BavgHsS-.js';
 
 // <nk-radio name="style" value="concise" checked>Concise</nk-radio>
 // → <label class="nk-check"><input type="radio"> Concise</label>

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-BavgHsS-.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-BavgHsS-.js';
 
 // <nk-segmented name="range" value="week">
 //   <button value="week">Week</button><button value="month">Month</button>

package/dist/components/nk-select.js

@@ -1,4 +1,4 @@
-import { a as NkFormElement } from './shared/base-6gEcoatG.js';
+import { a as NkFormElement } from './shared/base-BavgHsS-.js';
 
 // <nk-select name="role" value="editor">
 //   <option value="viewer">Viewer</option>
@@ -27,7 +27,7 @@ class NkSelect extends NkFormElement {
     name ? this._select.setAttribute('name', name) : this._select.removeAttribute('name');
     const label = this.getAttribute('aria-label');
     label ? this._select.setAttribute('aria-label', label) : this._select.removeAttribute('aria-label');
-    this._select.disabled = this.getBoolAttr('disabled');
+    this._select.disabled = this.getBoolAttr('disabled') || !!this._formDisabled;
     this._select.required = this.getBoolAttr('required');
     this._select.classList.toggle('compact', this.getBoolAttr('compact'));
   }

package/dist/components/nk-settings-pane.js

@@ -1,4 +1,4 @@
-import { N as NkElement } from './shared/base-6gEcoatG.js';
+import { N as NkElement } from './shared/base-BavgHsS-.js';
 
 // <nk-settings-pane name="profile" label="My profile" icon="👤" group="Account" title="My profile" active>…</nk-settings-pane>
 // → <section class="nk-settings-pane active"><h2>My profile</h2>…</section>

package/dist/components/nk-settings-user.js

@@ -1,4 +1,4 @@
-import { N as NkElement } from './shared/base-6gEcoatG.js';
+import { N as NkElement } from './shared/base-BavgHsS-.js';
 
 // <nk-settings-user slot="user" name="Marcel Karas" mail="marcel@…" avatar="MK"></nk-settings-user>
 // → <div class="nk-settings-user"><div class="avatar">MK</div><div class="u-text"><div class="name">…</div><div class="mail">…</div></div></div>

package/dist/components/nk-sidebar.js

@@ -1,4 +1,4 @@
-import { N as NkElement } from './shared/base-6gEcoatG.js';
+import { N as NkElement } from './shared/base-BavgHsS-.js';
 
 // <nk-sidebar slot="sidebar">
 //   <nk-workspace-switcher slot="workspace" name="Acme"></nk-workspace-switcher>

package/dist/components/nk-skeleton.js

@@ -1,4 +1,4 @@
-import { N as NkElement } from './shared/base-6gEcoatG.js';
+import { N as NkElement } from './shared/base-BavgHsS-.js';
 
 // <nk-skeleton height="18" width="60%"></nk-skeleton>
 // <nk-skeleton lines="3" widths="100%,85%,40%"></nk-skeleton>

package/dist/components/nk-slider.js

@@ -1,4 +1,4 @@
-import { a as NkFormElement } from './shared/base-6gEcoatG.js';
+import { a as NkFormElement } from './shared/base-BavgHsS-.js';
 
 // <nk-slider name="size" min="12" max="18" value="14" show-value></nk-slider>
 // → <input type="range" class="nk-slider"> <div class="nk-slider-value">14</div>

package/dist/components/nk-stat.js

@@ -1,4 +1,4 @@
-import { N as NkElement } from './shared/base-6gEcoatG.js';
+import { N as NkElement } from './shared/base-BavgHsS-.js';
 
 // <nk-stat label="Active pages" value="128" delta="▲ 12 this week" trend="up"></nk-stat>
 // → <div class="nk-stat"><div class="s-label">…</div><div class="s-value">…</div><div class="s-delta up">…</div></div>

package/dist/components/nk-stats.js

@@ -1,4 +1,4 @@
-import { N as NkElement } from './shared/base-6gEcoatG.js';
+import { N as NkElement } from './shared/base-BavgHsS-.js';
 
 // <nk-stats><nk-stat …></nk-stat>…</nk-stats>  →  <div class="nk-stats">
 class NkStats extends NkElement {

package/dist/components/nk-switch.js

@@ -1,4 +1,4 @@
-import { a as NkFormElement } from './shared/base-6gEcoatG.js';
+import { a as NkFormElement } from './shared/base-BavgHsS-.js';
 
 // <nk-switch name="notify" checked></nk-switch>
 // → <button class="nk-switch" role="switch" aria-checked="true">

package/dist/components/nk-synced.js

@@ -1,4 +1,4 @@
-import { N as NkElement } from './shared/base-6gEcoatG.js';
+import { N as NkElement } from './shared/base-BavgHsS-.js';
 
 // <nk-synced badge="⟳ 3 places">…</nk-synced>
 // → <div class="nk-synced"><span class="synced-badge">⟳ 3 places</span>…</div>