@jungherz-de/notionkit-elements 1.5.3 → 1.6.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.5.3-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.6.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-71-529cca?style=flat-square" alt="71 Elements"></a>
+  <a href="#"><img src="https://img.shields.io/badge/elements-77-529cca?style=flat-square" alt="77 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.5.3-lightgrey?style=flat-square" alt="Changelog"></a>
+  <a href="CHANGELOG.md"><img src="https://img.shields.io/badge/changelog-v1.6.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>
-  71 vanilla JavaScript custom elements wrapping NotionKit's calm, document-centric workspace look.<br>
+  77 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 **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.
+NotionKit Elements is the companion library to [NotionKit CSS](https://github.com/JUNGHERZ/NotionKit). It provides **77 Web Components** – from buttons and form controls over the sidebar, page tree and page shell with its properties 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,11 +56,11 @@ 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 |
-| 🧩 **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 |
+| 🧩 **77 Elements** | Forms, content blocks, app shell & tree, page shell with properties, panels and avatars, overlays (modal, ⌘K palette, menus, popover, emoji picker, toast), database table, board & list, 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 |
+| 🪶 **Lightweight** | 197 KB minified / 39 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.5.3/notionkit.min.css">
-  <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit-elements@1.5.3/dist/notionkit-elements.min.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit@1.6.0/notionkit.min.css">
+  <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit-elements@1.6.0/dist/notionkit-elements.min.js"></script>
 </head>
 <body class="nk-body">
   <nk-field label="Display name" desc="Shown next to your comments">
@@ -90,10 +90,19 @@ npm install @jungherz-de/notionkit-elements @jungherz-de/notionkit
 ```js
 import '@jungherz-de/notionkit/notionkit.css';
 import '@jungherz-de/notionkit-elements';                              // everything
-import '@jungherz-de/notionkit-elements/components/nk-btn.js';         // or one element (shared code is one extra chunk)
+import '@jungherz-de/notionkit-elements/components/nk-btn.js';         // or one element (shared code: base.js)
+import { componentsSheet } from '@jungherz-de/notionkit-elements';     // the sheet the elements adopt, for your own views
 ```
 
-Two prerequisites, always: `notionkit.css` on the document (the peer dependency, `>= 1.5.1`; 1.5.1 handles the safe areas, 1.5.0 brings the Notion-2025 tokens, the nine tag colours and the filled inputs, 1.4.x segmented scroll/wrap, the fixed tab bar and the dvh shell, 1.3.x the field layouts; 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.
+The per-component files import NotionKit's sheet as `@jungherz-de/notionkit/notionkit-styles.js` rather than carrying a copy, so a project that adopts the sheet in its own views has it once. A bundler resolves it from `node_modules`; a build-free page adds one import-map entry:
+
+```html
+<script type="importmap">{ "imports": { "@jungherz-de/notionkit/notionkit-styles.js": "/node_modules/@jungherz-de/notionkit/notionkit-styles.js" } }</script>
+```
+
+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.6.0`; 1.6.0 brings 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
 
@@ -102,9 +111,9 @@ 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` `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` `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` |
+| Page shell & blocks | `nk-page` `nk-page-cover` `nk-page-title` `nk-page-actions` `nk-props` `nk-prop` `nk-panels` `nk-panel` `nk-avatar` `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()`) |
+| Data & collaboration | `nk-database` `nk-table-view` `nk-board-view` `nk-list-view` `nk-filter-bar` `nk-comments` `nk-comment` `nk-ai-thread` `nk-ai-msg` `nk-ai-input-row` (+ the exported `renderPropertyCell()`) |
 
 Static content goes in through attributes and slots, dynamic data through properties (`tree.data`, `database.rows`, `palette.commands`). Interactions fire custom events with fixed names: `nk-select`, `nk-change`, `nk-view-change`, `nk-command`, `nk-toggle`, `nk-submit`, `nk-action`. No fetching, no two-way binding – the elements render what they get.
 
@@ -114,7 +123,7 @@ Static content goes in through attributes and slots, dynamic data through proper
 - Every host is `display: contents`: the inner `.nk-*` element sits in the parent layout exactly where the class markup would. That is what makes the pixel parity hold – and why spacing belongs on a wrapper you own, not on the host.
 - Form controls are form-associated custom elements: `FormData`, `reset`, `required` and `<fieldset disabled>` just work. `<nk-radio>`s with the same `name` form a real group across shadow roots, with one tab stop and arrow keys.
 - Elements that copy light-DOM children (`nk-select` options, breadcrumb crumbs) watch them; `element.refresh()` is the escape hatch. Listeners are re-armed on every connect, so a moved element keeps working.
-- `::slotted()` matches only the assigned node: pass icons directly (`<span slot="icon">📁</span>`), never wrapped.
+- `::slotted()` matches only the assigned node: pass icons directly (`<span slot="icon">📁</span>`), never wrapped. For the same reason there is no `<nk-prose>`: rendered Markdown goes into a light-DOM `<div class="nk-prose">`, which reads the same rules as the editor adapter.
 - Overlays (`nk-modal`, `nk-cmdk`, `nk-toast`) go directly under `<body>`; they lock scroll, make the rest of the page `inert` and return focus.
 - The editor stays an adapter: `nk-block-host` is the shell, `docs-editor.js` the TipTap recipe (used in the demo app). `<nk-editor>` follows in v1.1 as an optional import, never in the core bundle.
 
@@ -122,7 +131,7 @@ Static content goes in through attributes and slots, dynamic data through proper
 
 ```bash
 npm install
-npm run build        # dist/: IIFE, minified IIFE, ESM, per-component ESM + shared chunk
+npm run build        # dist/: IIFE, minified IIFE, ESM, per-component ESM on dist/components/base.js
 npm run build:all    # + docs.html, showcase.html, index.html, de/, SKILL.md, llms.txt
 npm test             # Playwright: pixel parity vs. class markup (both themes), branding, reconnect, radio groups, light-DOM drift, forms, overlays, data views, per-component import
 npm run check:coverage && npm run check:versions

package/dist/components/base.js

@@ -0,0 +1,346 @@
+import { tokensCss, componentsSheet } from '@jungherz-de/notionkit/notionkit-styles.js';
+
+// ============================================================
+// NotionKit Elements – base classes
+//
+// Every <nk-*> element is a thin shell around the markup notionkit.css already
+// styles. The shadow root adopts the *components* half of that stylesheet and
+// nothing else; the element ships no visual CSS of its own.
+// ============================================================
+
+// ── Design tokens ──
+// The shadow roots deliberately adopt componentsSheet only. The full sheet
+// would bring the :root / [data-theme] token blocks along, and those match the
+// .nk-wrapper below — every --nk-* token would then be re-declared inside each
+// shadow root, where a matching rule always beats an inherited value. A page's
+// own `:root { --nk-accent: … }` would never arrive.
+//
+// So the token defaults go on the document once, and every shadow root
+// inherits them like any other custom property. They sit in a cascade layer so
+// an ordinary (unlayered) brand stylesheet — and notionkit.css itself, if the
+// page loads it — wins over them, no matter the load order.
+
+const TOKENS_INJECTED = '__nkDefaultTokensInjected';
+
+function injectDefaultTokens() {
+  if (typeof document === 'undefined') return;              // SSR / non-DOM
+  if (globalThis[TOKENS_INJECTED]) return;                   // another bundle copy did it
+  globalThis[TOKENS_INJECTED] = true;
+
+  const sheet = new CSSStyleSheet();
+  sheet.replaceSync(`@layer notionkit-defaults { ${tokensCss} }`);
+  // Append — never assign — so an app's own adopted sheets survive.
+  document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
+}
+
+injectDefaultTokens();
+
+// ── Global theme sync ──
+// data-theme on <html> is the only source of truth. One MutationObserver
+// mirrors it onto every registered instance; no element sets a theme itself.
+
+const instances = new Set();
+
+function getCurrentTheme() {
+  return document.documentElement.getAttribute('data-theme') || 'light';
+}
+
+function syncAllThemes() {
+  const theme = getCurrentTheme();
+  for (const instance of instances) instance._syncTheme(theme);
+}
+
+if (typeof window !== 'undefined' && typeof MutationObserver !== 'undefined') {
+  new MutationObserver(syncAllThemes).observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ['data-theme']
+  });
+}
+
+// ── Host stylesheets ──
+// Layout plumbing only: how the host box participates in the outer layout, and
+// that `hidden` keeps working. :host([hidden]) has a higher specificity than
+// :host, so it wins regardless of order. The wrapper is layout-transparent.
+
+const hostSheets = new Map();
+
+function hostSheetFor(display) {
+  let sheet = hostSheets.get(display);
+  if (!sheet) {
+    sheet = new CSSStyleSheet();
+    sheet.replaceSync(`
+      :host { display: ${display}; }
+      :host([hidden]) { display: none; }
+      .nk-wrapper { display: contents; }
+    `);
+    hostSheets.set(display, sheet);
+  }
+  return sheet;
+}
+
+// ── Base class ──
+
+class NkElement extends HTMLElement {
+
+  /**
+   * How the host takes part in the outer layout. Default 'contents': the host
+   * generates no box, so the inner .nk-* element sits in the parent's layout
+   * exactly where the class markup would – a button stays inline, a sidebar
+   * is a direct flex child of the app, a tree row and its children box are
+   * siblings. That is what makes the pixel parity with the class markup hold.
+   * Consequence: style the parent or the tokens, not the host; `hidden` on
+   * the host still works. Override with 'block' / 'inline-block' only when a
+   * host box is genuinely needed.
+   */
+  static get display() { return 'contents'; }
+
+  /**
+   * Optional CSSStyleSheet with component-specific host rules, adopted after
+   * the shared sheets. Positioning and sizing of the host only — never colour,
+   * spacing or typography; those belong to notionkit.css.
+   */
+  static get hostStyles() { return null; }
+
+  /**
+   * Opt in when the component *copies* light-DOM children into its shadow tree
+   * (options, breadcrumb crumbs). A MutationObserver then calls
+   * projectLightDom() again whenever those children change, so a framework
+   * that swaps them keeps the rendered element in step. Components that merely
+   * *slot* their children use `slotchange` instead.
+   */
+  static get observesLightDom() { return false; }
+
+  /** What the light-DOM observer watches. Drop `subtree` for shallow copies. */
+  static get lightDomObserverInit() {
+    return { childList: true, subtree: true, characterData: true, attributes: true };
+  }
+
+  /**
+   * 'named' (default) or 'manual'. Manual assignment lets a component route
+   * light-DOM nodes itself – text nodes into a label slot, nested elements
+   * into a children slot – so <nk-tree-item icon="🏠">Home</nk-tree-item>
+   * reads naturally. With 'manual' the component calls assignSlots() on
+   * every childList change.
+   */
+  static get slotAssignment() { return 'named'; }
+
+  static get observedAttributes() { return []; }
+
+  constructor() {
+    super();
+    this._initialized = false;
+    this._shadow = this.attachShadow({ mode: 'open', slotAssignment: this.constructor.slotAssignment });
+    const sheets = [componentsSheet, hostSheetFor(this.constructor.display)];
+    const extra = this.constructor.hostStyles;
+    if (extra) sheets.push(extra);
+    this._shadow.adoptedStyleSheets = sheets;
+  }
+
+  connectedCallback() {
+    if (!this._initialized) {
+      // A framework may have set properties on the instance before the
+      // definition arrived (hybrids binds checked="${bool}" as a property
+      // while the element is still a plain HTMLElement). Such an own property
+      // shadows the accessor on the prototype for good; re-apply it through
+      // the setter so the attribute – and with it render() – sees the value.
+      this._upgradeOwnProperties();
+      this._initialized = true;
+
+      // The wrapper mirrors data-theme from <html> so [data-theme]-keyed
+      // component rules apply inside the root. Token *values* need no
+      // mirroring — they inherit.
+      this._wrapper = document.createElement('div');
+      this._wrapper.className = 'nk-wrapper';
+      this._wrapper.setAttribute('data-theme', getCurrentTheme());
+      this._shadow.appendChild(this._wrapper);
+
+      this.render();
+    } else {
+      this._wrapper.setAttribute('data-theme', getCurrentTheme());
+    }
+
+    // Everything below runs on every connect, not just the first. Moving an
+    // element in the DOM disconnects and reconnects it, and disconnectedCallback
+    // tears all of this down — without re-arming it here a moved element would
+    // keep its markup but silently stop reacting.
+    this.setupEvents();
+    instances.add(this);
+
+    if (this.constructor.observesLightDom) {
+      this._lightDomObserver ??= new MutationObserver(records => this.projectLightDom(records));
+      this._lightDomObserver.observe(this, this.constructor.lightDomObserverInit);
+    }
+    if (this.constructor.slotAssignment === 'manual') {
+      this.assignSlots();
+      this._slotObserver ??= new MutationObserver(() => this.assignSlots());
+      this._slotObserver.observe(this, { childList: true });
+    }
+  }
+
+  disconnectedCallback() {
+    instances.delete(this);
+    this._lightDomObserver?.disconnect();
+    this._slotObserver?.disconnect();
+    this.teardownEvents();
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (!this._initialized) return;
+    if (oldValue === newValue) return;
+    this.onAttributeChanged(name, oldValue, newValue);
+  }
+
+  _syncTheme(theme) {
+    this._wrapper?.setAttribute('data-theme', theme);
+  }
+
+  _upgradeOwnProperties() {
+    for (const key of Object.keys(this)) {
+      if (key.startsWith('_')) continue;
+      let proto = Object.getPrototypeOf(this), desc;
+      while (proto && proto !== HTMLElement.prototype && !(desc = Object.getOwnPropertyDescriptor(proto, key))) proto = Object.getPrototypeOf(proto);
+      if (!desc?.set) continue;
+      const value = this[key];
+      delete this[key];
+      this[key] = value;
+    }
+  }
+
+  /** Subclasses override to build the inner DOM inside this._wrapper. Runs once. */
+  render() {}
+
+  /** Subclasses override to attach event listeners. Runs on every connect. */
+  setupEvents() {}
+
+  /** Subclasses override to remove event listeners. Runs on every disconnect. */
+  teardownEvents() {}
+
+  /** Subclasses override to react to attribute changes after render(). */
+  onAttributeChanged(name, oldValue, newValue) {}
+
+  /**
+   * Subclasses that set observesLightDom override this to (re-)copy their
+   * light-DOM children into the shadow tree. Runs on every change to those
+   * children, so it has to be safe to call repeatedly.
+   */
+  projectLightDom() {}
+
+  /** Components with manual slot assignment override this. */
+  assignSlots() {}
+
+  /**
+   * Escape hatch: re-copy the light-DOM children now. The observer covers the
+   * ordinary cases; this is for the ones it cannot see, so nobody has to reach
+   * into element.shadowRoot.
+   */
+  refresh() { this.projectLightDom(); if (this.constructor.slotAssignment === 'manual') this.assignSlots(); }
+
+  // ── Utilities ──
+
+  /**
+   * For elements whose heading arrives as `title` – nk-settings-pane,
+   * nk-danger-zone, nk-empty, nk-model-card. `title` is also the global HTML
+   * attribute, and a title on the host shows as a browser tooltip over the
+   * whole element. So the value is read into this._titleText and the
+   * attribute is taken off the host; a later setAttribute('title') arrives
+   * through attributeChangedCallback and is taken the same way. The removal
+   * fires the callback with null, which is ignored – only '' clears the
+   * heading. The element's own `title` accessor answers from the stored
+   * value, so a framework that binds `title` as a property never puts an
+   * attribute on the host at all. Returns whether a value was taken.
+   */
+  takeTitle(value = this.getAttribute('title')) {
+    if (value === null) return false;
+    this._titleText = value;
+    this.removeAttribute('title');
+    return true;
+  }
+
+  getBoolAttr(name) {
+    return this.hasAttribute(name);
+  }
+
+  setBoolAttr(name, value) {
+    if (value) this.setAttribute(name, '');
+    else this.removeAttribute(name);
+  }
+
+  createElement(tag, classes = [], attrs = {}) {
+    const el = document.createElement(tag);
+    if (classes.length) el.classList.add(...classes);
+    for (const [key, val] of Object.entries(attrs)) {
+      if (val !== null && val !== undefined && val !== false) el.setAttribute(key, val === true ? '' : val);
+    }
+    return el;
+  }
+
+  /** Dispatches a composed, bubbling CustomEvent — the nk-* event contract. */
+  emit(eventName, detail = null) {
+    return this.dispatchEvent(new CustomEvent(eventName, {
+      bubbles: true,
+      composed: true,
+      cancelable: true,
+      detail
+    }));
+  }
+}
+
+// ── Form-associated base class ──
+// ElementInternals gives the element a place in the surrounding <form>:
+// FormData, reset, validation and :disabled through <fieldset>.
+
+class NkFormElement extends NkElement {
+
+  static formAssociated = true;
+
+  constructor() {
+    super();
+    this._internals = this.attachInternals();
+  }
+
+  get form() { return this._internals.form; }
+  get validationMessage() { return this._internals.validationMessage; }
+  get validity() { return this._internals.validity; }
+  get willValidate() { return this._internals.willValidate; }
+
+  checkValidity() { return this._internals.checkValidity(); }
+  reportValidity() { return this._internals.reportValidity(); }
+
+  connectedCallback() {
+    const first = !this._initialized;
+    super.connectedCallback();
+    // A `disabled` attribute in the markup fires formDisabledCallback on
+    // parse or upgrade – before the first connect, when nothing is rendered
+    // yet. The state was remembered below; apply it now that render() ran.
+    if (first && this._formDisabled) this.onFormDisabled(true);
+  }
+
+  formResetCallback() { this.resetValue(); }
+  formStateRestoreCallback(state, mode) { this.restoreValue(state, mode); }
+  formDisabledCallback(disabled) {
+    this._formDisabled = disabled;
+    if (this._initialized) this.onFormDisabled(disabled);
+  }
+
+  /** Subclasses override. */
+  resetValue() {}
+  restoreValue(state, mode) {}
+  onFormDisabled(disabled) {}
+
+  setFormValue(value, state) {
+    this._internals.setFormValue(value, state);
+  }
+
+  setValidity(flags, message, anchor) {
+    this._internals.setValidity(flags, message, anchor);
+  }
+
+  /** Mirrors the native control's validity onto the host, so required works. */
+  syncValidityFrom(control) {
+    if (!control) return;
+    if (control.validity.valid) this._internals.setValidity({});
+    else this._internals.setValidity(control.validity, control.validationMessage, control);
+  }
+}
+
+export { NkElement, NkFormElement, getCurrentTheme };

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

@@ -1,4 +1,5 @@
-import { N as NkElement } from './shared/base-C3eJwHKA.js';
+import { NkElement } from './base.js';
+import '@jungherz-de/notionkit/notionkit-styles.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,20 +1,23 @@
-import { N as NkElement } from './shared/base-C3eJwHKA.js';
+import { NkElement } from './base.js';
+import '@jungherz-de/notionkit/notionkit-styles.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="✨">
 //   Two tasks are open …
 //   <button slot="actions" value="copy">📋 Copy</button><button slot="actions" value="retry">↻ Rephrase</button>
 // </nk-ai-msg>
+// <nk-ai-msg role="user" bubble>What is still open?</nk-ai-msg>   → a grey bubble on the right, as in Notion's AI chat
 // → <div class="nk-ai-msg user"><span class="mini-avatar">MK</span><div class="a-body"><div class="a-name">You</div>…<div class="nk-ai-actions">…</div></div></div>
 // Action buttons stay in the light DOM (slotted twins) and fire nk-action { action: value }.
 class NkAiMsg extends NkElement {
-  static get observedAttributes() { return ['role', 'name', 'badge', 'avatar', 'color']; }
+  static get observedAttributes() { return ['role', 'name', 'badge', 'avatar', 'color', 'bubble']; }
 
   render() {
     this._box = this.createElement('div', ['nk-ai-msg']);
     this._avatar = this.createElement('span', ['mini-avatar']);
     const avatarSlot = this.createElement('slot', [], { name: 'avatar' });
     avatarSlot.appendChild(this._avatar);
+    this._avatarSlot = avatarSlot;
     const body = this.createElement('div', ['a-body']);
     this._name = this.createElement('div', ['a-name']);
     this._nameText = document.createTextNode('');
@@ -31,12 +34,16 @@ class NkAiMsg extends NkElement {
 
   _sync() {
     const user = this.getAttribute('role') === 'user';
+    const bubble = this.getBoolAttr('bubble');
     this._box.classList.toggle('user', user);
+    this._box.classList.toggle('bubble', bubble);
     const name = this.getAttribute('name');
     this._nameText.data = name || '';
     const badge = this.getAttribute('badge');
     this._badge.textContent = badge ? ` ${badge}` : '';
-    this._name.style.display = name ? '' : 'none';
+    // A bubble stands without avatar and name; the text says who asked.
+    this._name.style.display = name && !bubble ? '' : 'none';
+    this._avatarSlot.style.display = bubble ? 'none' : '';
     this._avatar.textContent = this.getAttribute('avatar') || (user ? (name || 'U').slice(0, 2).toUpperCase() : '✨');
     const color = this.getAttribute('color');
     this._avatar.style.background = color || '';

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

@@ -1,4 +1,5 @@
-import { N as NkElement } from './shared/base-C3eJwHKA.js';
+import { NkElement } from './base.js';
+import '@jungherz-de/notionkit/notionkit-styles.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,5 @@
-import { N as NkElement } from './shared/base-C3eJwHKA.js';
+import { NkElement } from './base.js';
+import '@jungherz-de/notionkit/notionkit-styles.js';
 
 // <nk-app>
 //   <nk-sidebar slot="sidebar">…</nk-sidebar>

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

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

package/dist/components/nk-avatar.js

@@ -0,0 +1,57 @@
+import { NkElement } from './base.js';
+import { p as paintAvatar, i as initialsOf } from './shared/avatar-BiqCaHOt.js';
+import '@jungherz-de/notionkit/notionkit-styles.js';
+
+// <nk-avatar>MK</nk-avatar>                       → <span class="nk-avatar">MK</span>
+// <nk-avatar size="small" color="green">SL</nk-avatar>
+// <nk-avatar name="Ada Lovelace" size="large"></nk-avatar>   → initials "AL"
+// <nk-avatar src="ada.jpg" name="Ada Lovelace" size="xlarge"></nk-avatar>
+// <nk-avatar square>A</nk-avatar>                  → a workspace icon
+// size: small (20px) · default 24px · large (32px) · xlarge (56px). color: one
+// of Notion's nine names, or any CSS background. Without content the initials
+// come from `name`; with `src` a photo fills the circle and `name` is its alt.
+class NkAvatar extends NkElement {
+  static get observedAttributes() { return ['size', 'color', 'square', 'src', 'name']; }
+
+  render() {
+    this._box = this.createElement('span', ['nk-avatar']);
+    this._slot = document.createElement('slot');
+    this._initials = document.createTextNode('');
+    this._slot.appendChild(this._initials);
+    this._img = this.createElement('img', [], { alt: '' });
+    this._box.appendChild(this._slot);
+    this._wrapper.appendChild(this._box);
+    this._sync();
+  }
+
+  _sync() {
+    const size = this.getAttribute('size');
+    for (const s of ['small', 'large', 'xlarge']) this._box.classList.toggle(s, s === size);
+    this._box.classList.toggle('square', this.getBoolAttr('square'));
+    paintAvatar(this._box, this.getAttribute('color'));
+    const name = this.getAttribute('name');
+    this._initials.data = initialsOf(name);
+    const src = this.getAttribute('src');
+    if (src) {
+      this._img.src = src;
+      this._img.alt = name || '';
+      if (this._slot.isConnected) this._slot.replaceWith(this._img);
+    } else if (this._img.isConnected) this._img.replaceWith(this._slot);
+    // A picture or initials with a name speak for themselves; a bare glyph is decoration.
+    if (name && !src) { this._box.setAttribute('role', 'img'); this._box.setAttribute('aria-label', name); }
+    else { this._box.removeAttribute('role'); this._box.removeAttribute('aria-label'); }
+  }
+
+  onAttributeChanged() { this._sync(); }
+
+  get size() { return this.getAttribute('size'); }
+  set size(v) { v == null ? this.removeAttribute('size') : this.setAttribute('size', v); }
+  get color() { return this.getAttribute('color'); }
+  set color(v) { v == null ? this.removeAttribute('color') : this.setAttribute('color', v); }
+  get src() { return this.getAttribute('src'); }
+  set src(v) { v == null ? this.removeAttribute('src') : this.setAttribute('src', v); }
+}
+
+customElements.define('nk-avatar', NkAvatar);
+
+export { NkAvatar };

package/dist/components/nk-banner.js

@@ -1,4 +1,5 @@
-import { N as NkElement } from './shared/base-C3eJwHKA.js';
+import { NkElement } from './base.js';
+import '@jungherz-de/notionkit/notionkit-styles.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,5 @@
-import { N as NkElement } from './shared/base-C3eJwHKA.js';
+import { NkElement } from './base.js';
+import '@jungherz-de/notionkit/notionkit-styles.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,5 +1,7 @@
-import { N as NkElement } from './shared/base-C3eJwHKA.js';
-import { t as tagFor, r as renderPropertyCell } from './shared/property-cell-CtXQpUjQ.js';
+import { NkElement } from './base.js';
+import { t as tagFor, r as renderPropertyCell } from './shared/property-cell-o7N30kAQ.js';
+import '@jungherz-de/notionkit/notionkit-styles.js';
+import './shared/avatar-BiqCaHOt.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

package/dist/components/nk-breadcrumb.js

@@ -1,4 +1,5 @@
-import { N as NkElement } from './shared/base-C3eJwHKA.js';
+import { NkElement } from './base.js';
+import '@jungherz-de/notionkit/notionkit-styles.js';
 
 // <nk-breadcrumb>
 //   <a href="/overview">📊 Project overview</a>

package/dist/components/nk-btn.js

@@ -1,4 +1,5 @@
-import { N as NkElement } from './shared/base-C3eJwHKA.js';
+import { NkElement } from './base.js';
+import '@jungherz-de/notionkit/notionkit-styles.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,5 @@
-import { N as NkElement } from './shared/base-C3eJwHKA.js';
+import { NkElement } from './base.js';
+import '@jungherz-de/notionkit/notionkit-styles.js';
 
 // <nk-callout icon="💡">text</nk-callout>
 // <nk-callout><span slot="icon">📌</span>text</nk-callout>