@jungherz-de/notionkit-elements 1.0.1 → 1.1.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.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-68-529cca?style=flat-square" alt="68 Elements"></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.0.1-lightgrey?style=flat-square" alt="Changelog"></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>
 
 <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>
+  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>
 
@@ -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 **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.
 
 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 |
+| 🧩 **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 |
@@ -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.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">
@@ -93,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
 
@@ -101,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()`) |

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>

package/dist/components/nk-tab-bar-item.js

@@ -0,0 +1,83 @@
+import { N as NkElement } from './shared/base-BavgHsS-.js';
+
+// <nk-tab-bar-item icon="📥" value="inbox" active>Inbox</nk-tab-bar-item>
+// → <button class="nk-tab-bar-item active" type="button">
+//     <span class="icon">📥</span><span class="label">Inbox</span></button>
+//
+// One destination of <nk-tab-bar>. A click emits nk-select (cancelable);
+// inside a bar it then moves the bar's `value`, standalone it sets its own
+// `active`. With `href` it navigates afterwards, with `drawer` it opens the
+// nearest <nk-sidebar> as a drawer instead of becoming active – the usual
+// fifth item ("More"). The icon is an attribute or a `slot="icon"` node.
+class NkTabBarItem extends NkElement {
+  static get observedAttributes() { return ['icon', 'label', 'value', 'href', 'active', 'disabled', 'drawer']; }
+
+  render() {
+    this._btn = this.createElement('button', ['nk-tab-bar-item'], { type: 'button' });
+    this._iconSlot = this.createElement('slot', [], { name: 'icon' });
+    this._icon = this.createElement('span', ['icon'], { 'aria-hidden': 'true' });
+    this._iconSlot.appendChild(this._icon);
+    this._label = this.createElement('span', ['label']);
+    this._labelSlot = document.createElement('slot');
+    this._labelText = document.createTextNode('');
+    this._labelSlot.appendChild(this._labelText);
+    this._label.appendChild(this._labelSlot);
+    this._btn.append(this._iconSlot, this._label);
+    this._wrapper.appendChild(this._btn);
+    this._sync();
+  }
+
+  _sync() {
+    this._icon.textContent = this.getAttribute('icon') ?? '';
+    this._labelText.data = this.getAttribute('label') ?? '';
+    const active = this.getBoolAttr('active');
+    this._btn.classList.toggle('active', active);
+    active ? this._btn.setAttribute('aria-current', 'page') : this._btn.removeAttribute('aria-current');
+    this._btn.disabled = this.getBoolAttr('disabled');
+    const href = this.getAttribute('href');
+    href ? this._btn.setAttribute('data-href', href) : this._btn.removeAttribute('data-href');
+  }
+
+  setupEvents() {
+    this._onClick = () => this.select();
+    this._btn.addEventListener('click', this._onClick);
+  }
+
+  teardownEvents() {
+    this._btn?.removeEventListener('click', this._onClick);
+  }
+
+  select() {
+    if (this.getBoolAttr('disabled')) return;
+    const href = this.getAttribute('href');
+    const ok = this.emit('nk-select', { value: this.value, label: this.label, href, item: this, drawer: this.getBoolAttr('drawer') });
+    if (!ok) return;
+    if (this.getBoolAttr('drawer')) {
+      const sidebar = this.closest('nk-app')?.querySelector('nk-sidebar') ?? document.querySelector('nk-sidebar');
+      sidebar?.toggle?.();
+      return;
+    }
+    const bar = this.closest('nk-tab-bar');
+    if (bar) bar.value = this.value;
+    else this.setBoolAttr('active', true);
+    if (href) location.assign(href);
+  }
+
+  onAttributeChanged() { this._sync(); }
+  focus(o) { this._btn?.focus(o); }
+
+  get value() { return this.getAttribute('value') ?? this.label; }
+  set value(v) { this.setAttribute('value', v); }
+  get label() { return this.getAttribute('label') ?? this.textContent.trim(); }
+  set label(v) { this.setAttribute('label', v); }
+  get active() { return this.getBoolAttr('active'); }
+  set active(v) { this.setBoolAttr('active', v); }
+  get disabled() { return this.getBoolAttr('disabled'); }
+  set disabled(v) { this.setBoolAttr('disabled', v); }
+  get drawer() { return this.getBoolAttr('drawer'); }
+  set drawer(v) { this.setBoolAttr('drawer', v); }
+}
+
+customElements.define('nk-tab-bar-item', NkTabBarItem);
+
+export { NkTabBarItem };