@jungherz-de/notionkit-elements 1.6.0 → 1.7.0

package/src/components/page/nk-steps.js

@@ -0,0 +1,59 @@
+import { NkElement } from '../../base.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/src/components/shell/nk-sidebar.js

@@ -10,42 +10,12 @@ import { NkElement } from '../../base.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() {
@@ -62,6 +32,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() {
@@ -88,7 +65,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/src/index.js

@@ -80,6 +80,10 @@ export { NkProp } from './components/page/nk-prop.js';
 export { NkPanels } from './components/page/nk-panels.js';
 export { NkPanel } from './components/page/nk-panel.js';
 
+// 1.7.0 – mobile and filter
+export { NkSheet } from './components/overlays/nk-sheet.js';
+export { NkSteps } from './components/page/nk-steps.js';
+
 // Wave 4 – overlays
 export { NkModal } from './components/overlays/nk-modal.js';
 export { NkSettingsPane } from './components/overlays/nk-settings-pane.js';

package/src/util/focus.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 = '';
 
 export function lockScroll() {
@@ -31,6 +32,13 @@ export 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). */
+export 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. */
 export 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"]';