@jungherz-de/notionkit-elements 1.8.0 → 1.10.0

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);

package/dist/components/nk-table-view.js

@@ -7,8 +7,10 @@ import './shared/avatar-BiqCaHOt.js';
 // `wrap` lets cell text break (`.nk-table.wrap`), like Notion's "wrap column".
 // Standalone: view.columns = […]; view.rows = […];  Inside <nk-database> the
 // database pushes `data`. → <div class="nk-table-wrap"><table class="nk-table">…</table><div class="nk-new-row">＋ New page</div></div>
-// Cells are plain markup from renderPropertyCell(); rows fire nk-select,
-// checkboxes nk-change, headers nk-action { action: 'sort' } (and sort locally
+// Cells are plain markup from renderPropertyCell(); rows fire nk-select
+// { row, id, key, cell } – `key` and `cell` say which cell was hit, to open
+// an editor there, like the date picker under a due date – checkboxes
+// nk-change, headers nk-action { action: 'sort' } (and sort locally
 // with `sortable`), the add row nk-action { action: 'new-row' }.
 class NkTableView extends NkElement {
   static get observedAttributes() { return ['name', 'label', 'badge', 'count', 'new-row', 'new-row-label', 'sortable', 'sort-key', 'sort-dir', 'wrap']; }
@@ -76,7 +78,11 @@ class NkTableView extends NkElement {
       }
       if (e.target.closest('input[type=checkbox], a')) return;
       const tr = e.target.closest('tr[data-id]');
-      if (tr) { const row = this._rowById(tr.dataset.id); this.emit('nk-select', { row, id: row?.id, value: row?.id }); }
+      if (!tr) return;
+      // Which cell: `key` names its column, `cell` is there to anchor an editor to.
+      const cell = e.target.closest('td');
+      const row = this._rowById(tr.dataset.id);
+      this.emit('nk-select', { row, id: row?.id, value: row?.id, key: cell ? this._columns[cell.cellIndex]?.key : undefined, cell });
     };
     this._onChange = (e) => {
       const input = e.target;

package/dist/components/nk-tooltip.js

@@ -0,0 +1,138 @@
+import { NkElement } from './base.js';
+import { a as placeNear } from './shared/floating-CxHxy-Cb.js';
+import { d as deepActiveElement } from './shared/focus-BNAChOXO.js';
+import '@jungherz-de/notionkit/notionkit-styles.js';
+
+// <nk-tooltip></nk-tooltip>                    one for the page: every [data-tooltip]
+//   <button data-tooltip="Close sidebar" data-tooltip-key="⌘\">«</button>
+// <nk-tooltip for="saveBtn" shortcut="⌘S">Save the page</nk-tooltip>
+// tip.show(barOrRect, 'Shell · 12.10.–30.11.'); tip.hide();
+// → <div class="nk-tooltip open" role="tooltip">Close sidebar<span class="tt-key">⌘\</span></div>
+//
+// Notion's hover hint (NotionKit 1.10.0). Without `for` it serves every
+// element with data-tooltip – and data-tooltip-key for a shortcut – on the
+// page, inside shadow roots too: the tooltips of a whole toolbar in one
+// element. With `for` it belongs to the element with that id and shows its
+// own content and `shortcut`. It appears after `delay` ms (400) under the
+// pointer and at once on keyboard focus, never on touch; leaving, a press,
+// blur, scrolling and Escape hide it. It sits 6px below its target and
+// centred, above it where the window ends – placement="top" prefers above –
+// and 8px inside the window (placeNear in util/floating.js). show(target,
+// text, shortcut) takes an element or a rect, for what has no element of
+// its own: the bars of a Gantt chart. While it shows, the target's
+// aria-describedby names it (in the same document or shadow root).
+const hostSheet = new CSSStyleSheet();
+hostSheet.replaceSync(`:host { display: block; position: fixed; top: 0; left: 0; z-index: 130; pointer-events: none; }`);
+let count = 0;
+
+class NkTooltip extends NkElement {
+  static get hostStyles() { return hostSheet; }
+  static get observedAttributes() { return ['for', 'shortcut']; }
+
+  render() {
+    this._bubble = this.createElement('div', ['nk-tooltip'], { role: 'tooltip' });
+    this._slot = document.createElement('slot');
+    this._text = document.createTextNode('');
+    this._key = this.createElement('span', ['tt-key']);
+    this._bubble.append(this._slot, this._text, this._key);
+    this._wrapper.appendChild(this._bubble);
+    this._fill(null);
+  }
+
+  get _delay() { const d = Number(this.getAttribute('delay')); return this.hasAttribute('delay') && d >= 0 ? d : 400; }
+
+  /** Own content (text null) or a given text and shortcut. */
+  _fill(text, key = this.getAttribute('shortcut')) {
+    this._slot.style.display = text == null ? '' : 'none';
+    this._text.data = text ?? '';
+    this._key.textContent = key || '';
+    this._key.hidden = !key;
+  }
+
+  /** Shows it at `target` – an element or a rect – with `text` (else its own content) and `shortcut`. */
+  show(target, text, shortcut) {
+    clearTimeout(this._timer);
+    if (!target) return;
+    this._fill(text ?? null, shortcut);
+    this._describe(target);
+    placeNear(this, target, this.getAttribute('placement') === 'top' ? 'top' : 'bottom');
+    this._bubble.classList.add('open');
+  }
+
+  hide() {
+    clearTimeout(this._timer);
+    this._bubble?.classList.remove('open');
+    this._describe(null);
+    this._target = null;
+  }
+
+  get open() { return !!this._bubble?.classList.contains('open'); }
+
+  _describe(target) {
+    if (this._described) {
+      const ids = (this._described.getAttribute('aria-describedby') || '').split(/\s+/).filter(id => id && id !== this.id);
+      ids.length ? this._described.setAttribute('aria-describedby', ids.join(' ')) : this._described.removeAttribute('aria-describedby');
+      this._described = null;
+    }
+    if (!(target instanceof Element) || target.getRootNode() !== this.getRootNode()) return;
+    this.id ||= `nk-tooltip-${++count}`;
+    const ids = (target.getAttribute('aria-describedby') || '').split(/\s+/).filter(Boolean);
+    if (!ids.includes(this.id)) target.setAttribute('aria-describedby', [...ids, this.id].join(' '));
+    this._described = target;
+  }
+
+  /** The element this tooltip serves for an event: its `for` target, or the nearest [data-tooltip]. */
+  _targetOf(e) {
+    const path = e.composedPath();
+    const own = this.getAttribute('for');
+    if (own) { const el = this.getRootNode().getElementById?.(own); return el && path.includes(el) ? el : null; }
+    return path.find(n => n instanceof Element && n.hasAttribute('data-tooltip')) ?? null;
+  }
+
+  _showFor(el) {
+    const own = this.hasAttribute('for');
+    this.show(el, own ? null : el.getAttribute('data-tooltip'), own ? this.getAttribute('shortcut') : el.getAttribute('data-tooltip-key'));
+  }
+
+  setupEvents() {
+    this._onOver = (e) => {
+      const el = e.pointerType === 'touch' ? null : this._targetOf(e);
+      if (el === this._target) return;
+      this.hide();
+      if (!el) return;
+      this._target = el;
+      this._timer = setTimeout(() => this._showFor(el), this._delay);
+    };
+    this._onFocus = (e) => {
+      const el = this._targetOf(e);
+      if (!el || !deepActiveElement()?.matches(':focus-visible')) return;
+      this.hide();
+      this._target = el;
+      this._showFor(el);
+    };
+    this._onHide = () => this.hide();
+    this._onKey = (e) => { if (e.key === 'Escape' && this.open) this.hide(); };
+    document.addEventListener('pointerover', this._onOver);
+    document.addEventListener('focusin', this._onFocus);
+    document.addEventListener('focusout', this._onHide);
+    document.addEventListener('pointerdown', this._onHide, true);
+    document.addEventListener('scroll', this._onHide, true);
+    document.addEventListener('keydown', this._onKey);
+  }
+
+  teardownEvents() {
+    document.removeEventListener('pointerover', this._onOver);
+    document.removeEventListener('focusin', this._onFocus);
+    document.removeEventListener('focusout', this._onHide);
+    document.removeEventListener('pointerdown', this._onHide, true);
+    document.removeEventListener('scroll', this._onHide, true);
+    document.removeEventListener('keydown', this._onKey);
+    this.hide();
+  }
+
+  onAttributeChanged(name) { if (name === 'shortcut' && !this._text.data) this._fill(null); if (name === 'for') this.hide(); }
+}
+
+customElements.define('nk-tooltip', NkTooltip);
+
+export { NkTooltip };

package/dist/components/nk-workspace-switcher.js

@@ -9,7 +9,7 @@ import '@jungherz-de/notionkit/notionkit-styles.js';
 // row; clicking outside or pressing Escape closes it.
 const menuSheet = new CSSStyleSheet();
 menuSheet.replaceSync(`
-  .nk-ws-anchor { position: relative; }
+  .nk-ws-anchor { position: relative; flex: 1 1 auto; min-width: 0; }
   .nk-ws-menu { display: none; position: absolute; left: 8px; top: calc(100% - 2px); z-index: 50; }
   :host([open]) .nk-ws-menu { display: block; }
 `);

package/dist/components/shared/dates-a32DcW1l.js

@@ -0,0 +1,67 @@
+// Calendar days for nk-calendar and nk-calendar-view: local days as
+// 'YYYY-MM-DD', no library. Weeks are ISO weeks (Monday-based, the week with
+// the year's first Thursday); the first weekday comes from the locale.
+const pad = n => String(n).padStart(2, '0');
+
+const isoOf = d => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+const addDays = (d, n) => new Date(d.getFullYear(), d.getMonth(), d.getDate() + n);
+
+/** 'YYYY-MM-DD[THH:MM]', 'D.M.YYYY', a Date or { start } → a local Date at midnight, or null. */
+function parseDay(v) {
+  if (v instanceof Date) return Number.isNaN(v.getTime()) ? null : new Date(v.getFullYear(), v.getMonth(), v.getDate());
+  if (v && typeof v === 'object') return v.start ? parseDay(v.start) : null;
+  const s = String(v ?? '').trim();
+  let m = s.match(/^(\d{4})-(\d{2})-(\d{2})/);
+  if (m) return new Date(+m[1], +m[2] - 1, +m[3]);
+  m = s.match(/^(\d{1,2})\.(\d{1,2})\.(\d{4})$/);
+  return m ? new Date(+m[3], +m[2] - 1, +m[1]) : null;
+}
+
+function isoWeek(d) {
+  const t = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()));
+  t.setUTCDate(t.getUTCDate() + 4 - (t.getUTCDay() || 7));
+  return Math.ceil(((t - Date.UTC(t.getUTCFullYear(), 0, 1)) / 864e5 + 1) / 7);
+}
+
+/** The page's language unless the element names one. */
+const resolveLocale = attr => attr || document.documentElement.lang || navigator.language || 'en';
+
+/** 0 = Sunday … 6 = Saturday, from Intl.Locale's week info; Monday where the browser cannot say. */
+function firstWeekday(locale) {
+  try {
+    const l = new Intl.Locale(locale), info = l.getWeekInfo?.() ?? l.weekInfo;
+    if (info?.firstDay) return info.firstDay % 7;
+  } catch { /* an unknown tag */ }
+  return 1;
+}
+
+/** Short weekday names from `weekStart` on; `length` cuts them (2 → "Mo"). */
+function weekdayNames(locale, weekStart, length = 0) {
+  const f = new Intl.DateTimeFormat(locale, { weekday: 'short' });
+  // 7 June 2026 is a Sunday, so 7 + n is weekday n.
+  return Array.from({ length: 7 }, (_, i) => {
+    const name = f.format(new Date(2026, 5, 7 + ((weekStart + i) % 7))).replace('.', '');
+    return length ? name.slice(0, length) : name;
+  });
+}
+
+/** A month from its week start: `first`, `day(i)` for the i-th cell, the `rows` it needs. */
+function monthGrid(month, weekStart) {
+  const [y, m] = month.split('-').map(Number), first = new Date(y, m - 1, 1), offset = (first.getDay() - weekStart + 7) % 7;
+  return { m, first, day: i => new Date(y, m - 1, 1 - offset + i), rows: Math.ceil((offset + new Date(y, m, 0).getDate()) / 7) };
+}
+
+function stepMonth(month, n) {
+  const [y, m] = month.split('-').map(Number);
+  return isoOf(new Date(y, m - 1 + n, 1)).slice(0, 7);
+}
+
+/** "KW" for German, "W" elsewhere – the head of the week column. */
+const weekLabel = locale => (/^de\b/i.test(locale) ? 'KW' : 'W');
+
+const CHEVRONS = {
+  prev: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M15 6l-6 6 6 6"/></svg>',
+  next: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg>',
+};
+
+export { CHEVRONS as C, weekdayNames as a, isoWeek as b, addDays as c, firstWeekday as f, isoOf as i, monthGrid as m, parseDay as p, resolveLocale as r, stepMonth as s, weekLabel as w };

package/dist/components/shared/floating-CxHxy-Cb.js

@@ -0,0 +1,37 @@
+// Placement for elements that float over the page – <nk-menu floating>,
+// <nk-calendar floating>: the host is a fixed box put under its anchor.
+
+/** The border box of an element, or of the first descendant with one (display: contents hosts). */
+function boxOf(el) {
+  if (el.getClientRects().length) return el.getBoundingClientRect();
+  for (const child of [...(el.shadowRoot?.children ?? []), ...el.children]) {
+    const r = boxOf(child);
+    if (r.width || r.height) return r;
+  }
+  return el.getBoundingClientRect();
+}
+
+/**
+ * Puts `host` 6px below `target` – an element or a rect ({ left, top, right,
+ * bottom }, a DOMRect) – centred on it: above with side="top", or where the
+ * window ends below; kept 8px inside the window. For <nk-tooltip>.
+ */
+function placeNear(host, target, side = 'bottom', gap = 6) {
+  const r = target instanceof Element ? boxOf(target) : target;
+  const { width: w, height: h } = host.getBoundingClientRect();
+  const below = r.bottom + gap, above = r.top - gap - h;
+  const top = side === 'top' ? (above < 8 ? below : above) : (below + h > innerHeight - 8 ? above : below);
+  host.style.top = `${Math.round(top)}px`;
+  host.style.left = `${Math.round(Math.min(Math.max(8, (r.left + r.right) / 2 - w / 2), innerWidth - 8 - w))}px`;
+  host.style.right = '';
+}
+
+/** Puts `host` 6px under `anchor`, right edges aligned – left edges with align="start". */
+function placeUnder(host, anchor, align) {
+  const r = boxOf(anchor);
+  host.style.top = `${r.bottom + 6}px`;
+  if (align === 'start') { host.style.left = `${r.left}px`; host.style.right = ''; }
+  else { host.style.right = `${Math.max(8, innerWidth - r.right)}px`; host.style.left = ''; }
+}
+
+export { placeNear as a, placeUnder as p };