@jungherz-de/notionkit-elements 1.9.0 → 1.10.1

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.9.0-2383e2?style=flat-square" alt="Version"></a>
+  <a href="https://www.npmjs.com/package/@jungherz-de/notionkit-elements"><img src="https://img.shields.io/badge/version-1.10.1-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-85-529cca?style=flat-square" alt="85 Elements"></a>
+  <a href="#"><img src="https://img.shields.io/badge/elements-87-529cca?style=flat-square" alt="87 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.9.0-lightgrey?style=flat-square" alt="Changelog"></a>
+  <a href="CHANGELOG.md"><img src="https://img.shields.io/badge/changelog-v1.10.1-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>
-  85 vanilla JavaScript custom elements wrapping NotionKit's calm, document-centric workspace look.<br>
+  87 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 **85 Web Components** – from buttons, form controls and the date picker over the sidebar, page tree and page shell with its properties to the settings modal, the bottom sheet, the side peek, ⌘K palette, database views – a calendar among them – with Notion’s toolbar 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 **87 Web Components** – from buttons, form controls and the date picker over the sidebar, page tree and page shell with its properties to the settings modal, the bottom sheet, the side peek, dialogs, tooltips, ⌘K palette, database views – a calendar among them – with Notion’s toolbar 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,10 +56,10 @@ 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 |
-| 🧩 **85 Elements** | Forms with copy field, image picker and date picker, content blocks with bookmarks, app shell & tree with the ☰ drawer, page shell with properties, panels, avatars and steps, overlays (modal, sheet, side peek, ⌘K palette, menus that float in and become sheets on a phone, popover, emoji picker, toast), database table, board, list & calendar with toolbar and filter pills, comments, AI thread |
+| 🧩 **87 Elements** | Forms with copy field, image picker and date picker, content blocks with bookmarks, app shell & tree with the ☰ drawer and the collapsing sidebar, page shell with properties, panels, avatars and steps, overlays (modal, sheet, dialog, resizable side peek, tooltip, ⌘K palette, menus that float in and become sheets on a phone, popover, emoji picker, toast), database table, board, list & calendar with toolbar and filter pills, comments, AI thread |
 | 🎛️ **Form participation** | Input, textarea, select, switch, check, radio, slider, segmented and model card work natively with `<form>` via `ElementInternals`; radios group across shadow roots |
 | 🌗 **Theme sync** | One observer mirrors `data-theme` on `<html>` into every element |
-| 🪶 **Lightweight** | 248 KB minified / 49 KB gzipped (IIFE, foundation sheet included), no external dependencies |
+| 🪶 **Lightweight** | 265 KB minified / 52 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.9.0/notionkit.min.css">
-  <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit-elements@1.9.0/dist/notionkit-elements.min.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit@1.10.1/notionkit.min.css">
+  <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit-elements@1.10.1/dist/notionkit-elements.min.js"></script>
 </head>
 <body class="nk-body">
   <nk-field label="Display name" desc="Shown next to your comments">
@@ -102,7 +102,7 @@ The per-component files import NotionKit's sheet as `@jungherz-de/notionkit/noti
 
 Do not mix the full bundle with the per-component files: each brings its own `NkElement`. With the bundle, take `componentsSheet` and `NkElement` from the bundle (`NotionKitElements.componentsSheet` from the `<script>` build).
 
-Two prerequisites, always: `notionkit.css` on the document (the peer dependency, `>= 1.9.0`; 1.9.0 brings the date picker and the calendar view, 1.8.0 the side peek, the bookmark, the copy field and pictures on the profile row, 1.7.0 the sheet, menus that float in and become sheets on a phone, the sidebar drawer, the database toolbar with filter pills and the steps, 1.7.1 minified files that carry all of it, 1.6.0 page properties, page options, list view, panels, prose and the avatar, 1.5.1 the safe areas, 1.5.0 the Notion-2025 tokens, the nine tag colours and the filled inputs; from 1.5.0 on, Elements and the foundation share one version number – the elements are built and tested against the same release) and `class="nk-body"` on `<body>`. The elements ship no visual CSS of their own – every rule comes from the foundation. The bundle injects the design tokens once as `@layer notionkit-defaults`, so any plain `:root { --nk-accent: … }` of yours re-brands every element in both themes.
+Two prerequisites, always: `notionkit.css` on the document (the peer dependency, `>= 1.10.1`; 1.10.1 lets a disabled button show its tooltip, 1.10.0 brings the collapsing sidebar, the resizable side peek, the dialog and the tooltip, 1.9.0 the date picker and the calendar view, 1.8.0 the side peek, the bookmark, the copy field and pictures on the profile row, 1.7.0 the sheet, menus that float in and become sheets on a phone, the sidebar drawer, the database toolbar with filter pills and the steps, 1.7.1 minified files that carry all of it, 1.6.0 page properties, page options, list view, panels, prose and the avatar, 1.5.1 the safe areas, 1.5.0 the Notion-2025 tokens, the nine tag colours and the filled inputs; from 1.5.0 on, Elements and the foundation share one version number – the elements are built and tested against the same release) and `class="nk-body"` on `<body>`. The elements ship no visual CSS of their own – every rule comes from the foundation. The bundle injects the design tokens once as `@layer notionkit-defaults`, so any plain `:root { --nk-accent: … }` of yours re-brands every element in both themes.
 
 ## Elements
 
@@ -112,7 +112,7 @@ Two prerequisites, always: `notionkit.css` on the document (the peer dependency,
 | Content | `nk-tag` `nk-progress` `nk-callout` `nk-bookmark` `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-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-steps` `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-sheet` `nk-peek` `nk-settings-pane` `nk-settings-user` `nk-cmdk` `nk-menu` `nk-menu-item` `nk-pop` `nk-emoji-picker` `nk-toast` |
+| Overlays | `nk-modal` `nk-sheet` `nk-dialog` `nk-peek` `nk-tooltip` `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-list-view` `nk-calendar-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.

package/dist/components/nk-app.js

@@ -8,15 +8,22 @@ import '@jungherz-de/notionkit/notionkit-styles.js';
 // </nk-app>
 // → <div class="nk-app"><aside class="nk-sidebar">…</aside><main class="nk-main">…</main></div>
 // The outermost element of a workspace app: a full-height flex row.
+// `peek-inset` (NotionKit 1.10.0) gives the main column a right padding as
+// wide as the side peek – <nk-peek inset> sets it while it is open.
 class NkApp extends NkElement {
+  static get observedAttributes() { return ['peek-inset']; }
+
   render() {
-    const app = this.createElement('div', ['nk-app']);
+    const app = this._app = this.createElement('div', ['nk-app']);
+    app.classList.toggle('peek-inset', this.getBoolAttr('peek-inset'));
     app.appendChild(this.createElement('slot', [], { name: 'sidebar' }));
     const main = this.createElement('main', ['nk-main']);
     main.appendChild(document.createElement('slot'));
     app.appendChild(main);
     this._wrapper.appendChild(app);
   }
+
+  onAttributeChanged() { this._app.classList.toggle('peek-inset', this.getBoolAttr('peek-inset')); }
 }
 
 customElements.define('nk-app', NkApp);

package/dist/components/nk-btn.js

@@ -6,7 +6,8 @@ import '@jungherz-de/notionkit/notionkit-styles.js';
 // <nk-btn variant="topbar">⭐</nk-btn>  →  <button class="nk-topbar-btn">
 // <nk-btn variant="tool" active>Filter</nk-btn>  →  <button class="nk-db-tool active">  (slot="tools" of nk-database)
 // <nk-btn variant="sidebar" aria-label="Menu">☰</nk-btn>  →  <button class="nk-topbar-btn nk-sidebar-toggle">:
-//   shown on phones only, it opens the page's <nk-sidebar> as a drawer.
+//   on a phone it opens the page's <nk-sidebar> as a drawer; on the desktop
+//   it shows while that sidebar is collapsed (.collapsed) and expands it.
 //
 // Modifier classes become attributes. A slotted <svg> is sized by the
 // `.nk-btn ::slotted(svg)` twin; pass the icon itself, never wrapped.
@@ -52,11 +53,17 @@ class NkBtn extends NkElement {
 
   /** The sidebar the ☰ opens: the one in its own app, else the page's. */
   _sidebar() { return this.closest('nk-app')?.querySelector('nk-sidebar') ?? document.querySelector('nk-sidebar'); }
+  _sidebarCollapsed() { return this.getAttribute('variant') === 'sidebar' && !!this._sidebar()?.hasAttribute('collapsed'); }
 
   setupEvents() {
     this._onClick = (e) => {
       if (this.getBoolAttr('disabled')) { e.preventDefault(); e.stopPropagation(); return; }
-      if (this.getAttribute('variant') === 'sidebar') { this._sidebar()?.toggle?.(); return; }
+      if (this.getAttribute('variant') === 'sidebar') {
+        const sidebar = this._sidebar();
+        if (sidebar?.hasAttribute('collapsed') && !matchMedia('(max-width: 860px)').matches) sidebar.expand?.();
+        else sidebar?.toggle?.();
+        return;
+      }
       // A button inside a shadow root is not a submit button of the outer
       // form; forward the intent to the form the host sits in.
       const type = this.getAttribute('type');
@@ -69,13 +76,20 @@ class NkBtn extends NkElement {
     this._onToggle = (e) => {
       if (this.getAttribute('variant') === 'sidebar' && e.target === this._sidebar()) this._btn.setAttribute('aria-expanded', e.detail.open ? 'true' : 'false');
     };
+    // On the desktop the ☰ shows while its sidebar is collapsed.
+    this._onCollapse = (e) => {
+      if (this.getAttribute('variant') === 'sidebar' && e.target === this._sidebar()) this._btn.classList.toggle('collapsed', e.detail.collapsed);
+    };
     this._btn.addEventListener('click', this._onClick);
     document.addEventListener('nk-toggle', this._onToggle);
+    document.addEventListener('nk-collapse', this._onCollapse);
+    if (this.getAttribute('variant') === 'sidebar') this._btn.className = this._computeClasses().join(' ');
   }
 
   teardownEvents() {
     this._btn?.removeEventListener('click', this._onClick);
     document.removeEventListener('nk-toggle', this._onToggle);
+    document.removeEventListener('nk-collapse', this._onCollapse);
   }
 
   onAttributeChanged(name) {
@@ -104,7 +118,7 @@ class NkBtn extends NkElement {
     const variant = this.getAttribute('variant');
     if (variant === 'topbar') return ['nk-topbar-btn'];
     if (variant === 'share') return ['nk-topbar-btn', 'nk-share-btn'];
-    if (variant === 'sidebar') return ['nk-topbar-btn', 'nk-sidebar-toggle'];
+    if (variant === 'sidebar') return this._sidebarCollapsed() ? ['nk-topbar-btn', 'nk-sidebar-toggle', 'collapsed'] : ['nk-topbar-btn', 'nk-sidebar-toggle'];
     if (variant === 'tool') return this.getBoolAttr('active') ? ['nk-db-tool', 'active'] : ['nk-db-tool'];
     const classes = ['nk-btn'];
     if (VARIANTS.includes(variant)) classes.push(variant);

package/dist/components/nk-calendar.js

@@ -1,6 +1,6 @@
 import { NkFormElement } from './base.js';
 import { p as parseDay, i as isoOf, C as CHEVRONS, r as resolveLocale, f as firstWeekday, m as monthGrid, w as weekLabel, a as weekdayNames, b as isoWeek, s as stepMonth, c as addDays } from './shared/dates-a32DcW1l.js';
-import { p as placeUnder } from './shared/floating-B8CwbXnV.js';
+import { p as placeUnder } from './shared/floating-CxHxy-Cb.js';
 import { d as deepActiveElement } from './shared/focus-BNAChOXO.js';
 import '@jungherz-de/notionkit/notionkit-styles.js';
 

package/dist/components/nk-dialog.js

@@ -0,0 +1,150 @@
+import { NkElement } from './base.js';
+import { d as deepActiveElement, l as lockScroll, i as inertOutside, f as firstFocusable, u as unlockScroll } from './shared/focus-BNAChOXO.js';
+import '@jungherz-de/notionkit/notionkit-styles.js';
+
+// <nk-dialog id="trash" title="Move “Roadmap” to trash?" alert>
+//   The page and its sub-pages can be restored from Trash for 30 days.
+//   <nk-btn slot="actions" variant="secondary" value="">Cancel</nk-btn>
+//   <nk-btn slot="actions" variant="danger-solid" value="trash">Move to trash</nk-btn>
+// </nk-dialog>
+// → <div class="nk-dialog-backdrop open"><div class="nk-dialog" role="alertdialog">
+//     <div class="dl-title">…</div><div class="dl-body">…</div><div class="dl-actions">…</div></div></div>
+//
+// A question or a short form (NotionKit 1.10.0) with the contract of
+// <nk-modal> and <nk-sheet>: show(), close(), toggle(), nk-toggle; Escape –
+// captured, so it closes before a peek, a menu or a modal behind it – and
+// the backdrop close it; focus moves in, to an [autofocus] element or the
+// first field or button, and back out; the page behind is inert and
+// scroll-locked. It lies above the modal and the sheet, so a question can
+// come from either. 440px, `wide` 560px; below 860px a bottom sheet with the
+// buttons stacked, the confirming one on top.
+// A button in slot="actions" with a `value` closes it with that value; so
+// does the submit of a <form method="dialog"> inside, with its submitter's
+// value. Before it closes, nk-close { value } fires and can be cancelled –
+// the place to check an input dialog; Escape and the backdrop close with ''.
+// `returnValue` keeps the last value. `alert` makes it an alertdialog, named
+// and described by its title and text. `title` is the heading, never a
+// tooltip – see NkElement.takeTitle(). Put it directly under <body>.
+class NkDialog extends NkElement {
+  static get observedAttributes() { return ['open', 'title', 'wide', 'alert']; }
+
+  render() {
+    this.takeTitle();
+    this.returnValue = '';
+    this._backdrop = this.createElement('div', ['nk-dialog-backdrop']);
+    this._backdrop.inert = true;
+    this._box = this.createElement('div', ['nk-dialog'], { 'aria-modal': 'true', tabindex: '-1' });
+    this._heading = this.createElement('div', ['dl-title'], { id: 'title' });
+    const body = this.createElement('div', ['dl-body'], { id: 'body' });
+    body.appendChild(document.createElement('slot'));
+    this._actions = this.createElement('div', ['dl-actions']);
+    this._actionsSlot = this.createElement('slot', [], { name: 'actions' });
+    this._actions.appendChild(this._actionsSlot);
+    this._box.append(this._heading, body, this._actions);
+    this._backdrop.appendChild(this._box);
+    this._wrapper.appendChild(this._backdrop);
+    this._syncTitle();
+    this._syncMode();
+    this._syncOpen();
+  }
+
+  _syncTitle() {
+    const text = this._titleText || '';
+    this._heading.textContent = text;
+    this._heading.hidden = !text;
+    if (text) this._box.setAttribute('aria-labelledby', 'title');
+    else this._box.removeAttribute('aria-labelledby');
+  }
+
+  _syncMode() {
+    const alert = this.getBoolAttr('alert');
+    this._box.setAttribute('role', alert ? 'alertdialog' : 'dialog');
+    if (alert) this._box.setAttribute('aria-describedby', 'body'); else this._box.removeAttribute('aria-describedby');
+    this._box.classList.toggle('wide', this.getBoolAttr('wide'));
+  }
+
+  _syncOpen() {
+    const open = this.getBoolAttr('open');
+    this._backdrop.classList.toggle('open', open);
+    this._backdrop.inert = !open;
+    if (open === this._wasOpen) return;
+    this._wasOpen = open;
+    if (open) {
+      this._returnFocus = this._from ?? deepActiveElement();
+      this._from = null;
+      // An overlay behind – a modal – made this host inert; the dialog lifts that while it is open.
+      this._wasInert = this.inert;
+      this.inert = false;
+      lockScroll();
+      this._undoInert = inertOutside(this);
+      requestAnimationFrame(() => (this.querySelector('[autofocus]') || firstFocusable(this) || this._box).focus({ preventScroll: true }));
+    } else {
+      unlockScroll();
+      this._undoInert?.(); this._undoInert = null;
+      this.inert = this._wasInert;
+      const back = this._returnFocus;
+      this._returnFocus = null;
+      if (back?.isConnected && typeof back.focus === 'function') back.focus({ preventScroll: true });
+    }
+  }
+
+  setupEvents() {
+    this._onBackdrop = (e) => { if (e.target === this._backdrop) this.close(''); };
+    this._onKey = (e) => { if (e.key === 'Escape' && this.getBoolAttr('open')) { e.stopPropagation(); this.close(''); } };
+    // A button with a value closes it; a submit button is the form's.
+    this._onClick = (e) => {
+      const button = e.composedPath().find(n => n instanceof Element && n !== this && this.contains(n) && n.hasAttribute('value') && (n.localName === 'nk-btn' || n.localName === 'button'));
+      if (!button || button.getAttribute('type') === 'submit') return;
+      this.close(button.getAttribute('value'));
+    };
+    this._onSubmit = (e) => {
+      if ((e.target.getAttribute('method') || '').toLowerCase() !== 'dialog') return;
+      e.preventDefault();
+      this.close(e.submitter?.value || e.submitter?.getAttribute?.('value') || 'submit');
+    };
+    this._onSlot = () => { this._actions.hidden = !this._actionsSlot.assignedElements().length; };
+    this._backdrop.addEventListener('click', this._onBackdrop);
+    this.addEventListener('click', this._onClick);
+    this.addEventListener('submit', this._onSubmit);
+    this._actionsSlot.addEventListener('slotchange', this._onSlot);
+    document.addEventListener('keydown', this._onKey, true);
+    this._onSlot();
+  }
+
+  teardownEvents() {
+    this._backdrop?.removeEventListener('click', this._onBackdrop);
+    this.removeEventListener('click', this._onClick);
+    this.removeEventListener('submit', this._onSubmit);
+    this._actionsSlot?.removeEventListener('slotchange', this._onSlot);
+    document.removeEventListener('keydown', this._onKey, true);
+    if (this._wasOpen) { unlockScroll(); this._undoInert?.(); this._undoInert = null; this._wasOpen = false; }
+  }
+
+  onAttributeChanged(name, oldValue, value) {
+    if (name === 'title') { if (this.takeTitle(value)) this._syncTitle(); return; }
+    if (name !== 'open') { this._syncMode(); return; }
+    this._syncOpen();
+    this.emit('nk-toggle', { open: this.getBoolAttr('open') });
+  }
+
+  /** Opens it; focus goes back to `from` when it closes (default: what had focus – pass the ⋯ of a menu that closes). */
+  show(from) { this.returnValue = ''; this._from = from ?? null; this.setBoolAttr('open', true); }
+  /** Closes with `value`, unless an nk-close listener cancels it. Returns whether it closed. */
+  close(value = '') {
+    if (!this.getBoolAttr('open')) return false;
+    if (!this.emit('nk-close', { value })) return false;
+    this.returnValue = value;
+    this.setBoolAttr('open', false);
+    return true;
+  }
+  toggle() { this.getBoolAttr('open') ? this.close('') : this.show(); }
+
+  get open() { return this.getBoolAttr('open'); }
+  set open(v) { v ? this.show() : this.close(''); }
+  get title() { return this._titleText ?? ''; }
+  set title(v) { this._titleText = v == null ? '' : String(v); if (this._initialized) this._syncTitle(); }
+}
+
+customElements.define('nk-dialog', NkDialog);
+
+export { NkDialog };

package/dist/components/nk-menu.js

@@ -1,6 +1,6 @@
 import { NkElement } from './base.js';
 import { d as deepActiveElement } from './shared/focus-BNAChOXO.js';
-import { p as placeUnder } from './shared/floating-B8CwbXnV.js';
+import { p as placeUnder } from './shared/floating-CxHxy-Cb.js';
 import '@jungherz-de/notionkit/notionkit-styles.js';
 
 // <nk-menu>

package/dist/components/nk-peek.js

@@ -21,17 +21,28 @@ import '@jungherz-de/notionkit/notionkit-styles.js';
 // the peek) leave it open. Below 860px it is a bottom sheet over a dimmed
 // page; there it is modal: the page is inert and scroll-locked, the dimmed
 // page takes the tap that closes it. Put it directly under <body>.
+//
+// `resizable` (NotionKit 1.10.0): the left edge takes the pointer – and the
+// arrow keys, 16px a step – to make the peek wider or narrower, as in
+// Notion: from `min` (380) to `max` (all but 320px of the window). The width
+// is the token --nk-peek-width, set on :root; `width` (px) sets it too, and
+// nk-resize { width } fires when a drag or a key ends – the moment to keep
+// it. resize-label names the edge (default "Resize").
+// `inset`: while it is open on the desktop, the page's <nk-app> gets
+// `peek-inset` – its main column makes room instead of lying under the peek.
 const CLOSE_ICON = '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="m6 17 5-5-5-5M13 17l5-5-5-5"/></svg>';
-const OVERLAYS = new Set(['nk-menu', 'nk-pop', 'nk-modal', 'nk-sheet', 'nk-cmdk', 'nk-toast']);
-const OVERLAY_CLASSES = ['nk-pop', 'nk-modal-backdrop', 'nk-sheet-backdrop', 'nk-cmdk-backdrop'];
+const OVERLAYS = new Set(['nk-menu', 'nk-pop', 'nk-modal', 'nk-sheet', 'nk-dialog', 'nk-cmdk', 'nk-toast']);
+const OVERLAY_CLASSES = ['nk-pop', 'nk-modal-backdrop', 'nk-sheet-backdrop', 'nk-dialog-backdrop', 'nk-cmdk-backdrop'];
 const phone = () => matchMedia('(max-width: 860px)').matches;
 
 class NkPeek extends NkElement {
-  static get observedAttributes() { return ['open', 'label', 'close-label']; }
+  static get observedAttributes() { return ['open', 'label', 'close-label', 'resizable', 'width', 'min', 'max', 'resize-label', 'inset']; }
 
   render() {
     this._backdrop = this.createElement('div', ['nk-peek-backdrop']);
     this._box = this.createElement('aside', ['nk-peek'], { role: 'dialog', tabindex: '-1' });
+    this._handle = this.createElement('div', ['pk-resize'], { role: 'separator', 'aria-orientation': 'vertical', tabindex: '0' });
+    this._box.appendChild(this._handle);
     const bar = this.createElement('div', ['pk-bar']);
     this._close = this.createElement('button', ['nk-topbar-btn'], { type: 'button' });
     this._close.innerHTML = CLOSE_ICON;
@@ -42,9 +53,41 @@ class NkPeek extends NkElement {
     this._backdrop.appendChild(this._box);
     this._wrapper.appendChild(this._backdrop);
     this._syncLabels();
+    this._syncResize();
+    if (this.hasAttribute('width')) this._setWidth(Number(this.getAttribute('width')));
     this._syncOpen();
   }
 
+  // ── width ──
+  get _min() { return Number(this.getAttribute('min')) || 380; }
+  get _max() { return Number(this.getAttribute('max')) || Math.max(this._min, innerWidth - 320); }
+  /** The peek's width in px – the token --nk-peek-width. */
+  get width() { return parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--nk-peek-width')) || 560; }
+  set width(v) { this._setWidth(Number(v)); }
+
+  _setWidth(w) {
+    if (!Number.isFinite(w)) return;
+    w = Math.round(Math.min(Math.max(w, this._min), Math.max(this._min, this._max)));
+    document.documentElement.style.setProperty('--nk-peek-width', `${w}px`);
+    this._handle.setAttribute('aria-valuenow', w);
+  }
+
+  _syncResize() {
+    this._handle.hidden = !this.getBoolAttr('resizable');
+    this._handle.setAttribute('aria-label', this.getAttribute('resize-label') || 'Resize');
+    this._handle.setAttribute('aria-valuemin', this._min);
+    this._handle.setAttribute('aria-valuenow', Math.round(this.width));
+  }
+
+  /** The app whose main column makes room: the peek's own, else the page's. */
+  _app() { return this.closest('nk-app') ?? document.querySelector('nk-app'); }
+  _syncInset() {
+    const on = this.getBoolAttr('inset') && this.getBoolAttr('open') && !phone();
+    if (on) this._app()?.setAttribute('peek-inset', '');
+    else if (this._insetApp) this._app()?.removeAttribute('peek-inset');
+    this._insetApp = on;
+  }
+
   _syncLabels() {
     const label = this.getAttribute('label');
     if (label) this._box.setAttribute('aria-label', label); else this._box.removeAttribute('aria-label');
@@ -54,6 +97,7 @@ class NkPeek extends NkElement {
   _syncOpen() {
     const open = this.getBoolAttr('open');
     this._backdrop.classList.toggle('open', open);
+    this._syncInset();
     if (open === this._wasOpen) return;
     this._wasOpen = open;
     if (open) {
@@ -88,23 +132,54 @@ class NkPeek extends NkElement {
       if (path.some(n => n.nodeType === 1 && (OVERLAYS.has(n.localName) || OVERLAY_CLASSES.some(c => n.classList.contains(c))))) return;
       this.close();
     };
+    // The left edge: a drag with pointer capture, or the arrow keys.
+    const resized = () => this.emit('nk-resize', { width: Math.round(this.width) });
+    this._onResizeStart = (e) => {
+      if (e.button !== 0) return;
+      e.preventDefault();
+      this._handle.setPointerCapture(e.pointerId);
+      this._handle.classList.add('active');
+    };
+    this._onResizeMove = (e) => { if (this._handle.hasPointerCapture(e.pointerId)) this._setWidth(innerWidth - e.clientX); };
+    this._onResizeEnd = () => { this._handle.classList.remove('active'); resized(); };
+    this._onResizeKey = (e) => {
+      const step = { ArrowLeft: 16, ArrowRight: -16 }[e.key];
+      if (!step) return;
+      e.preventDefault();
+      this._setWidth(this.width + step);
+      resized();
+    };
+    this._onViewport = () => this._syncInset();
     this._close.addEventListener('click', this._onClose);
     this._backdrop.addEventListener('click', this._onBackdrop);
+    this._handle.addEventListener('pointerdown', this._onResizeStart);
+    this._handle.addEventListener('pointermove', this._onResizeMove);
+    this._handle.addEventListener('lostpointercapture', this._onResizeEnd);
+    this._handle.addEventListener('keydown', this._onResizeKey);
     document.addEventListener('keydown', this._onKey);
     document.addEventListener('click', this._onOutside);
+    addEventListener('resize', this._onViewport);
   }
 
   teardownEvents() {
     this._close?.removeEventListener('click', this._onClose);
     this._backdrop?.removeEventListener('click', this._onBackdrop);
+    this._handle?.removeEventListener('pointerdown', this._onResizeStart);
+    this._handle?.removeEventListener('pointermove', this._onResizeMove);
+    this._handle?.removeEventListener('lostpointercapture', this._onResizeEnd);
+    this._handle?.removeEventListener('keydown', this._onResizeKey);
     document.removeEventListener('keydown', this._onKey);
     document.removeEventListener('click', this._onOutside);
+    removeEventListener('resize', this._onViewport);
+    if (this._insetApp) { this._app()?.removeAttribute('peek-inset'); this._insetApp = false; }
     if (this._modal) { this._modal = false; unlockScroll(); this._undoInert?.(); this._undoInert = null; }
     this._wasOpen = false;
   }
 
-  onAttributeChanged(name) {
-    if (name !== 'open') { this._syncLabels(); return; }
+  onAttributeChanged(name, _old, value) {
+    if (name === 'width') { this._setWidth(Number(value)); return; }
+    if (name === 'inset') { this._syncInset(); return; }
+    if (name !== 'open') { this._syncLabels(); this._syncResize(); return; }
     this._syncOpen();
     this.emit('nk-toggle', { open: this.getBoolAttr('open') });
   }

package/dist/components/nk-sidebar.js

@@ -1,4 +1,5 @@
 import { NkElement } from './base.js';
+import { d as deepActiveElement } from './shared/focus-BNAChOXO.js';
 import '@jungherz-de/notionkit/notionkit-styles.js';
 
 // <nk-sidebar slot="sidebar">
@@ -16,13 +17,28 @@ import '@jungherz-de/notionkit/notionkit-styles.js';
 // .open) – the sidebar slides and the scrim fades by the same rules as the
 // class markup; the element toggles the two classes. <nk-btn variant="sidebar">
 // in the topbar is the ☰ that opens it.
+//
+// `collapsible` (NotionKit 1.10.0): on the desktop Notion's « beside the
+// workspace row collapses the sidebar – it slides out to the left, the main
+// column takes the width, nothing in it takes focus – and the topbar's ☰
+// brings it back; ⌘\ or Ctrl+\ toggles it (on a phone the drawer).
+// `collapsed` is the state, collapse() / expand() / toggleCollapsed() the
+// API, nk-collapse { collapsed } the moment to keep it. collapse-label names
+// the « (default "Close sidebar") and is its tooltip for <nk-tooltip>.
+const COLLAPSE_ICON = '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="m18 17-5-5 5-5M11 17l-5-5 5-5"/></svg>';
+const phone = () => matchMedia('(max-width: 860px)').matches;
+
 class NkSidebar extends NkElement {
-  static get observedAttributes() { return ['open']; }
+  static get observedAttributes() { return ['open', 'collapsible', 'collapsed', 'collapse-label']; }
 
   render() {
     this._backdrop = this.createElement('div', ['nk-sidebar-backdrop']);
     this._aside = this.createElement('aside', ['nk-sidebar']);
-    this._aside.appendChild(this.createElement('slot', [], { name: 'workspace' }));
+    const head = this.createElement('div', ['nk-sidebar-head']);
+    this._collapse = this.createElement('button', ['nk-sidebar-collapse'], { type: 'button', 'data-tooltip-key': '⌘\\' });
+    this._collapse.innerHTML = COLLAPSE_ICON;
+    head.append(this.createElement('slot', [], { name: 'workspace' }), this._collapse);
+    this._aside.appendChild(head);
     const scroll = this.createElement('div', ['nk-sidebar-scroll']);
     scroll.appendChild(document.createElement('slot'));
     this._aside.appendChild(scroll);
@@ -34,6 +50,21 @@ class NkSidebar extends NkElement {
     this._wrapper.appendChild(this._aside);
     this._syncFooter();
     this._syncOpen();
+    this._syncCollapse();
+  }
+
+  _syncCollapse() {
+    const label = this.getAttribute('collapse-label') || 'Close sidebar';
+    this._collapse.hidden = !this.getBoolAttr('collapsible');
+    this._collapse.setAttribute('aria-label', label);
+    this._collapse.dataset.tooltip = label;
+    this._aside.classList.toggle('collapsed', this.getBoolAttr('collapsed'));
+  }
+
+  /** The ☰ that brings the sidebar back: the one in its own app, else the page's. */
+  _toggleButton() {
+    const sel = 'nk-btn[variant="sidebar"]';
+    return this.closest('nk-app')?.querySelector(sel) ?? document.querySelector(sel);
   }
 
   _syncOpen() {
@@ -53,22 +84,47 @@ class NkSidebar extends NkElement {
   setupEvents() {
     this._onSlot = () => this._syncFooter();
     this._onBackdrop = () => this.close();
-    this._onKey = (e) => { if (e.key === 'Escape' && this.getBoolAttr('open')) this.close(); };
+    this._onKey = (e) => {
+      if (e.key === 'Escape' && this.getBoolAttr('open')) this.close();
+      // Notion's ⌘\: the collapse on the desktop, the drawer on a phone.
+      if (e.key === '\\' && (e.metaKey || e.ctrlKey) && this.getBoolAttr('collapsible') && !e.defaultPrevented) {
+        e.preventDefault();
+        phone() ? this.toggle() : this.toggleCollapsed();
+      }
+    };
+    this._onCollapse = () => this.collapse();
     this._footerSlot.addEventListener('slotchange', this._onSlot);
     this._backdrop.addEventListener('click', this._onBackdrop);
+    this._collapse.addEventListener('click', this._onCollapse);
     document.addEventListener('keydown', this._onKey);
   }
 
   teardownEvents() {
     this._footerSlot?.removeEventListener('slotchange', this._onSlot);
     this._backdrop?.removeEventListener('click', this._onBackdrop);
+    this._collapse?.removeEventListener('click', this._onCollapse);
     document.removeEventListener('keydown', this._onKey);
   }
 
   onAttributeChanged(name) {
-    if (name !== 'open') return;
-    this._syncOpen();
-    this.emit('nk-toggle', { open: this.getBoolAttr('open') });
+    if (name === 'open') {
+      this._syncOpen();
+      this.emit('nk-toggle', { open: this.getBoolAttr('open') });
+      return;
+    }
+    // Focus follows to the control that is left: the ☰ after collapsing, the « after expanding.
+    const active = deepActiveElement();
+    const fromSidebar = active && (this.contains(active) || this._shadow.contains(active));
+    const fromToggle = active?.closest?.('.nk-sidebar-toggle');
+    this._syncCollapse();
+    if (name !== 'collapsed') return;
+    const collapsed = this.getBoolAttr('collapsed');
+    this.emit('nk-collapse', { collapsed });
+    // Two frames later: with reduced motion every nk- element transitions for
+    // .01ms, the inherited visibility included, so the « is focusable only then.
+    const later = fn => requestAnimationFrame(() => requestAnimationFrame(fn));
+    if (collapsed && fromSidebar) later(() => this._toggleButton()?.focus({ preventScroll: true }));
+    if (!collapsed && fromToggle && !this._collapse.hidden) later(() => this._collapse.focus({ preventScroll: true }));
   }
 
   show() { this.setBoolAttr('open', true); }
@@ -77,6 +133,12 @@ class NkSidebar extends NkElement {
 
   get open() { return this.getBoolAttr('open'); }
   set open(v) { this.setBoolAttr('open', v); }
+
+  collapse() { this.setBoolAttr('collapsed', true); }
+  expand() { this.setBoolAttr('collapsed', false); }
+  toggleCollapsed() { this.setBoolAttr('collapsed', !this.getBoolAttr('collapsed')); }
+  get collapsed() { return this.getBoolAttr('collapsed'); }
+  set collapsed(v) { this.setBoolAttr('collapsed', v); }
 }
 
 customElements.define('nk-sidebar', NkSidebar);