@jungherz-de/notionkit-elements 1.5.3 → 1.7.0

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

@@ -6,6 +6,12 @@
 
 export { NkElement, NkFormElement } from './base.js';
 
+// The component sheet the elements adopt, for a project's own views: a view
+// that adopts this instance shares it with every element instead of loading
+// NotionKit's stylesheet a second time next to the bundle
+// (NotionKitElements.componentsSheet from the <script> bundle).
+export { componentsSheet } from '@jungherz-de/notionkit/notionkit-styles.js';
+
 // Wave 1 – forms
 export { NkBtn } from './components/forms/nk-btn.js';
 export { NkInput } from './components/forms/nk-input.js';
@@ -59,6 +65,7 @@ export { NkSegmented } from './components/page/nk-segmented.js';
 export { NkStats } from './components/page/nk-stats.js';
 export { NkStat } from './components/page/nk-stat.js';
 export { NkAvatarGroup } from './components/page/nk-avatar-group.js';
+export { NkAvatar } from './components/page/nk-avatar.js';
 export { NkMention } from './components/page/nk-mention.js';
 export { NkTemplateBtn } from './components/page/nk-template-btn.js';
 export { NkModelCard } from './components/page/nk-model-card.js';
@@ -67,6 +74,16 @@ export { NkDangerZone } from './components/page/nk-danger-zone.js';
 export { NkMemberList } from './components/page/nk-member-list.js';
 export { NkMemberRow } from './components/page/nk-member-row.js';
 
+// 1.6.0 – app views
+export { NkProps } from './components/page/nk-props.js';
+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';
@@ -82,6 +99,7 @@ export { NkToast } from './components/overlays/nk-toast.js';
 export { NkDatabase } from './components/data/nk-database.js';
 export { NkTableView } from './components/data/nk-table-view.js';
 export { NkBoardView } from './components/data/nk-board-view.js';
+export { NkListView } from './components/data/nk-list-view.js';
 export { NkFilterBar } from './components/data/nk-filter-bar.js';
 export { NkComments } from './components/data/nk-comments.js';
 export { NkComment } from './components/data/nk-comment.js';

package/src/util/avatar.js

@@ -0,0 +1,17 @@
+// Shared by every element that draws an avatar: nk-avatar itself, member
+// rows, comments and the person cells of a database view.
+export const AVATAR_COLORS = ['gray', 'brown', 'orange', 'yellow', 'green', 'blue', 'purple', 'pink', 'red'];
+
+/**
+ * Paints an .nk-avatar. One of Notion's nine colour names becomes its class,
+ * so the tokens decide the shade in each theme; any other value – a hex, a
+ * gradient, a var() – is taken as an inline background, as before 1.6.0.
+ * Without a colour the avatar keeps the stylesheet's gradient.
+ */
+export function paintAvatar(el, color) {
+  for (const c of AVATAR_COLORS) el.classList.toggle(c, c === color);
+  el.style.background = color && !AVATAR_COLORS.includes(color) ? color : '';
+}
+
+/** "Sara Lindt" → "SL". */
+export const initialsOf = name => String(name || '').split(/\s+/).map(w => w[0]).filter(Boolean).join('').slice(0, 2).toUpperCase();

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"]';

package/src/util/property-cell.js

@@ -5,6 +5,8 @@
 //
 // column: { key, label, type, icon, options: [{ value, label, color }], title }
 // types: text | select | multi-select | date | person | checkbox | url | number | progress
+import { paintAvatar, initialsOf } from './avatar.js';
+
 const el = (tag, cls, text) => { const n = document.createElement(tag); if (cls) n.className = cls; if (text != null) n.textContent = text; return n; };
 const COLORS = ['gray', 'brown', 'orange', 'yellow', 'green', 'blue', 'purple', 'pink', 'red'];
 
@@ -38,14 +40,16 @@ export function renderPropertyCell(column, value, row = {}) {
     case 'person': {
       const cell = el('span', 'person-cell');
       const p = typeof value === 'string' ? { name: value } : value;
-      const avatar = el('span', 'mini-avatar', p.initials || p.avatar || (p.name || '').split(/\s+/).map(w => w[0]).join('').slice(0, 2).toUpperCase());
-      avatar.style.background = p.color || 'var(--nk-text-tertiary)';
+      // color: one of Notion's nine names, or any CSS background; none – the avatar gradient.
+      const avatar = el('span', 'nk-avatar small', p.initials || p.avatar || initialsOf(p.name));
+      paintAvatar(avatar, p.color);
       cell.append(avatar, document.createTextNode(' ' + (p.name || '')));
       return cell;
     }
     case 'checkbox': return checkbox(column, !!value, row);
     case 'url': { const a = el('a', null, String(value).replace(/^https?:\/\//, '')); a.href = String(value); a.target = '_blank'; a.rel = 'noopener'; return a; }
-    case 'number': return el('span', null, typeof value === 'number' ? value.toLocaleString() : String(value));
+    // column.locale / column.format: Intl.NumberFormat locale and options, e.g. { minimumFractionDigits: 1 }.
+    case 'number': return el('span', null, typeof value === 'number' ? value.toLocaleString(column.locale, column.format) : String(value));
     case 'progress': return progress(Number(value) || 0);
     default: {
       if (column.title) {