@jungherz-de/notionkit-elements 1.6.0 → 1.7.0

package/dist/components/nk-sheet.js

@@ -0,0 +1,97 @@
+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-sheet id="more" title="More">
+//   <nk-tree manual>
+//     <nk-section-label>Favourites</nk-section-label>
+//     <nk-tree-item icon="🚀">NotionKit MVP</nk-tree-item>
+//   </nk-tree>
+// </nk-sheet>
+// → <div class="nk-sheet-backdrop open"><div class="nk-sheet" role="dialog">
+//     <div class="sh-grabber"></div><div class="sh-title">More</div>…</div></div>
+//
+// A bottom sheet (NotionKit 1.7.0) with nk-modal's contract: show(), close()
+// and toggle(), Escape and the backdrop close it, focus moves in and back
+// out, the page behind is scroll-locked and inert. It lies above the tab
+// bar; rows inside are 40px high. `title` is the heading shown under the
+// grabber and the dialog's name, never a tooltip – see NkElement.takeTitle().
+// Choosing a row does not close the sheet – the app decides (nk-select
+// bubbles out). Put the element directly under <body>: a transformed
+// ancestor would trap the fixed backdrop.
+class NkSheet extends NkElement {
+  static get observedAttributes() { return ['open', 'title']; }
+
+  render() {
+    this.takeTitle();
+    this._backdrop = this.createElement('div', ['nk-sheet-backdrop']);
+    this._backdrop.inert = true;
+    this._box = this.createElement('div', ['nk-sheet'], { role: 'dialog', 'aria-modal': 'true', tabindex: '-1' });
+    this._heading = this.createElement('div', ['sh-title'], { id: 'title' });
+    this._box.append(this.createElement('div', ['sh-grabber']), this._heading, document.createElement('slot'));
+    this._backdrop.appendChild(this._box);
+    this._wrapper.appendChild(this._backdrop);
+    this._syncTitle();
+    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');
+  }
+
+  _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 = deepActiveElement();
+      lockScroll();
+      this._undoInert = inertOutside(this);
+      requestAnimationFrame(() => (firstFocusable(this) || this._box).focus({ preventScroll: true }));
+    } else {
+      unlockScroll();
+      this._undoInert?.(); this._undoInert = null;
+      const back = this._returnFocus;
+      if (back && typeof back.focus === 'function' && back.isConnected) back.focus({ preventScroll: true });
+      this._returnFocus = null;
+    }
+  }
+
+  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(); } };
+    this._backdrop.addEventListener('click', this._onBackdrop);
+    document.addEventListener('keydown', this._onKey);
+  }
+
+  teardownEvents() {
+    this._backdrop?.removeEventListener('click', this._onBackdrop);
+    document.removeEventListener('keydown', this._onKey);
+    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; }
+    this._syncOpen();
+    this.emit('nk-toggle', { open: this.getBoolAttr('open') });
+  }
+
+  show() { this.setBoolAttr('open', true); }
+  close() { this.setBoolAttr('open', false); }
+  toggle() { this.setBoolAttr('open', !this.getBoolAttr('open')); }
+
+  get open() { return this.getBoolAttr('open'); }
+  set open(v) { this.setBoolAttr('open', v); }
+  get title() { return this._titleText ?? ''; }
+  set title(v) { this._titleText = v == null ? '' : String(v); if (this._initialized) this._syncTitle(); }
+}
+
+customElements.define('nk-sheet', NkSheet);
+
+export { NkSheet };

package/dist/components/nk-sidebar.js

@@ -11,42 +11,12 @@ import '@jungherz-de/notionkit/notionkit-styles.js';
 //
 // The host is display:contents so the <aside> is a direct flex child of
 // .nk-app, exactly like the class markup. Below 860px notionkit.css hides the
-// aside; `open` brings it back as an off-canvas drawer (position only – the
-// look is still the stylesheet's).
-//
-// The drawer slides and the scrim fades without a line of JavaScript:
-// `display` transitions with transition-behavior: allow-discrete (the old
-// value is held for the whole duration, so closing animates too) and
-// @starting-style gives the first frame after display: none its start
-// values. `position: fixed` lives on the plain .nk-sidebar, not on the open
-// state – while closing, the aside is still displayed and must not fall
-// back into the flow. Browsers without either feature switch hard, as
-// before; prefers-reduced-motion switches hard on purpose.
-const drawerSheet = new CSSStyleSheet();
-drawerSheet.replaceSync(`
-  .nk-sidebar-backdrop { display: none; position: fixed; inset: 0; z-index: 59; background: var(--nk-scrim-soft); }
-  @media (max-width: 860px) {
-    .nk-sidebar {
-      position: fixed; inset: 0 auto 0 0; z-index: 60;
-      transform: translateX(-100%);
-      transition: background .25s ease, transform .24s cubic-bezier(.2, .8, .25, 1), display .24s;
-      transition-behavior: allow-discrete;
-    }
-    :host([open]) .nk-sidebar { display: flex; transform: none; }
-    @starting-style { :host([open]) .nk-sidebar { transform: translateX(-100%); } }
-    .nk-sidebar-backdrop {
-      opacity: 0;
-      transition: opacity .24s ease, display .24s;
-      transition-behavior: allow-discrete;
-    }
-    :host([open]) .nk-sidebar-backdrop { display: block; opacity: 1; }
-    @starting-style { :host([open]) .nk-sidebar-backdrop { opacity: 0; } }
-  }
-  @media (prefers-reduced-motion: reduce) { .nk-sidebar, .nk-sidebar-backdrop { transition: none; } }
-`);
-
+// aside; `open` brings it back as a drawer over the page. The drawer is the
+// stylesheet's since NotionKit 1.7.0 (.nk-sidebar.open, .nk-sidebar-backdrop
+// .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.
 class NkSidebar extends NkElement {
-  static get hostStyles() { return drawerSheet; }
   static get observedAttributes() { return ['open']; }
 
   render() {
@@ -63,6 +33,13 @@ class NkSidebar extends NkElement {
     this._wrapper.appendChild(this._backdrop);
     this._wrapper.appendChild(this._aside);
     this._syncFooter();
+    this._syncOpen();
+  }
+
+  _syncOpen() {
+    const open = this.getBoolAttr('open');
+    this._aside.classList.toggle('open', open);
+    this._backdrop.classList.toggle('open', open);
   }
 
   _syncFooter() {
@@ -89,7 +66,9 @@ class NkSidebar extends NkElement {
   }
 
   onAttributeChanged(name) {
-    if (name === 'open') this.emit('nk-toggle', { open: this.getBoolAttr('open') });
+    if (name !== 'open') return;
+    this._syncOpen();
+    this.emit('nk-toggle', { open: this.getBoolAttr('open') });
   }
 
   show() { this.setBoolAttr('open', true); }

package/dist/components/nk-steps.js

@@ -0,0 +1,61 @@
+import { NkElement } from './base.js';
+import '@jungherz-de/notionkit/notionkit-styles.js';
+
+// <nk-steps label="Connect your own model" current="2"
+//           steps="Choose a provider, Enter the API key, Test the connection"></nk-steps>
+// steps.steps = [{ label: 'Choose a provider', desc: 'Anthropic' }, 'Enter the API key', …];
+// → <ol class="nk-steps" aria-label="…">
+//     <li class="nk-step done"><span class="st-mark">✓</span><span>Choose a provider<span class="st-desc">Anthropic</span></span></li>
+//     <li class="nk-step current" aria-current="step"><span class="st-mark">2</span><span>Enter the API key</span></li>
+//     <li class="nk-step"><span class="st-mark">3</span><span>Test the connection</span></li></ol>
+// A setup in a few steps (NotionKit 1.7.0). `current` counts from 1; the
+// steps before it are done, one past the last marks all of them done. The
+// `steps` attribute is a comma-separated list; the property also takes
+// { label, desc } objects for a line under the label.
+class NkSteps extends NkElement {
+  static get observedAttributes() { return ['steps', 'current', 'label']; }
+
+  render() {
+    this._list = this.createElement('ol', ['nk-steps']);
+    this._wrapper.appendChild(this._list);
+    this._sync();
+  }
+
+  _items() {
+    if (this._steps) return this._steps;
+    return (this.getAttribute('steps') || '').split(',').map(s => s.trim()).filter(Boolean);
+  }
+
+  _sync() {
+    const label = this.getAttribute('label');
+    if (label) this._list.setAttribute('aria-label', label); else this._list.removeAttribute('aria-label');
+    const current = this.current;
+    this._list.replaceChildren(...this._items().map((step, i) => {
+      const n = i + 1, { label: text, desc } = typeof step === 'object' && step ? step : { label: String(step) };
+      const li = this.createElement('li', ['nk-step']);
+      li.classList.toggle('done', n < current);
+      li.classList.toggle('current', n === current);
+      if (n === current) li.setAttribute('aria-current', 'step');
+      const mark = this.createElement('span', ['st-mark'], { 'aria-hidden': 'true' });
+      mark.textContent = n < current ? '✓' : String(n);
+      const body = document.createElement('span');
+      body.textContent = text ?? '';
+      if (desc) { const d = this.createElement('span', ['st-desc']); d.textContent = desc; body.appendChild(d); }
+      li.append(mark, body);
+      return li;
+    }));
+  }
+
+  onAttributeChanged() { this._sync(); }
+
+  get steps() { return this._items(); }
+  set steps(v) { this._steps = Array.isArray(v) ? v : null; if (this._list) this._sync(); }
+  get current() { const n = parseInt(this.getAttribute('current'), 10); return Number.isFinite(n) ? n : 1; }
+  set current(v) { this.setAttribute('current', String(v)); }
+  /** Moves on to the next step; returns the new current step. */
+  next() { this.current = Math.min(this.current + 1, this._items().length + 1); return this.current; }
+}
+
+customElements.define('nk-steps', NkSteps);
+
+export { NkSteps };

package/dist/components/shared/{focus-DXrK9oLe.js → focus-BNAChOXO.js}

@@ -1,6 +1,7 @@
-// Overlay plumbing shared by nk-modal and nk-cmdk: body scroll lock with a
-// refcount, and `inert` on everything outside the overlay so focus and
-// assistive technology stay inside – nested shadow roots included.
+// Overlay plumbing shared by nk-modal, nk-sheet, nk-cmdk and nk-menu: body
+// scroll lock with a refcount, `inert` on everything outside the overlay so
+// focus and assistive technology stay inside – nested shadow roots included –
+// and the focused element behind shadow hosts, to return focus to.
 let locks = 0, previousOverflow = '';
 
 function lockScroll() {
@@ -31,6 +32,13 @@ function inertOutside(el) {
   return () => { for (const c of made) c.inert = false; };
 }
 
+/** The focused element itself, looking into shadow roots (document.activeElement stops at the host). */
+function deepActiveElement() {
+  let el = document.activeElement;
+  while (el?.shadowRoot?.activeElement) el = el.shadowRoot.activeElement;
+  return el;
+}
+
 /** The first tabbable element inside a light-DOM subtree, looking into shadow roots. */
 function firstFocusable(root) {
   const SEL = 'a[href], button:not([disabled]), input:not([disabled]):not([type=hidden]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]), [contenteditable="true"], [contenteditable="plaintext-only"]';
@@ -44,4 +52,4 @@ function firstFocusable(root) {
   return walk(root);
 }
 
-export { firstFocusable as f, inertOutside as i, lockScroll as l, unlockScroll as u };
+export { deepActiveElement as d, firstFocusable as f, inertOutside as i, lockScroll as l, unlockScroll as u };