@jungherz-de/notionkit-elements 1.5.1 → 1.5.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (83) hide show
  1. package/README.md +4 -4
  2. package/dist/components/nk-ai-input-row.js +1 -1
  3. package/dist/components/nk-ai-msg.js +1 -1
  4. package/dist/components/nk-ai-thread.js +1 -1
  5. package/dist/components/nk-app.js +1 -1
  6. package/dist/components/nk-avatar-group.js +1 -1
  7. package/dist/components/nk-banner.js +1 -1
  8. package/dist/components/nk-block-host.js +1 -1
  9. package/dist/components/nk-board-view.js +1 -1
  10. package/dist/components/nk-breadcrumb.js +1 -1
  11. package/dist/components/nk-btn.js +1 -1
  12. package/dist/components/nk-callout.js +1 -1
  13. package/dist/components/nk-check.js +1 -1
  14. package/dist/components/nk-cmdk.js +1 -1
  15. package/dist/components/nk-code.js +1 -1
  16. package/dist/components/nk-comment.js +1 -1
  17. package/dist/components/nk-comments.js +1 -1
  18. package/dist/components/nk-danger-zone.js +16 -7
  19. package/dist/components/nk-database.js +1 -1
  20. package/dist/components/nk-divider.js +1 -1
  21. package/dist/components/nk-emoji-picker.js +1 -1
  22. package/dist/components/nk-empty.js +16 -5
  23. package/dist/components/nk-field.js +1 -1
  24. package/dist/components/nk-fields.js +1 -1
  25. package/dist/components/nk-filter-bar.js +1 -1
  26. package/dist/components/nk-heading.js +1 -1
  27. package/dist/components/nk-input.js +1 -1
  28. package/dist/components/nk-kbd.js +1 -1
  29. package/dist/components/nk-member-list.js +1 -1
  30. package/dist/components/nk-member-row.js +1 -1
  31. package/dist/components/nk-mention.js +1 -1
  32. package/dist/components/nk-menu-item.js +1 -1
  33. package/dist/components/nk-menu.js +1 -1
  34. package/dist/components/nk-modal.js +1 -1
  35. package/dist/components/nk-model-card.js +10 -5
  36. package/dist/components/nk-page-actions.js +1 -1
  37. package/dist/components/nk-page-cover.js +1 -1
  38. package/dist/components/nk-page-title.js +1 -1
  39. package/dist/components/nk-page.js +1 -1
  40. package/dist/components/nk-pop.js +1 -1
  41. package/dist/components/nk-profile-row.js +1 -1
  42. package/dist/components/nk-progress.js +1 -1
  43. package/dist/components/nk-quote.js +1 -1
  44. package/dist/components/nk-radio.js +1 -1
  45. package/dist/components/nk-section-label.js +1 -1
  46. package/dist/components/nk-segmented.js +1 -1
  47. package/dist/components/nk-select.js +1 -1
  48. package/dist/components/nk-settings-pane.js +8 -3
  49. package/dist/components/nk-settings-user.js +1 -1
  50. package/dist/components/nk-sidebar.js +1 -1
  51. package/dist/components/nk-skeleton.js +1 -1
  52. package/dist/components/nk-slider.js +1 -1
  53. package/dist/components/nk-stat.js +1 -1
  54. package/dist/components/nk-stats.js +1 -1
  55. package/dist/components/nk-switch.js +1 -1
  56. package/dist/components/nk-synced.js +1 -1
  57. package/dist/components/nk-tab-bar-item.js +1 -1
  58. package/dist/components/nk-tab-bar.js +1 -1
  59. package/dist/components/nk-tab.js +1 -1
  60. package/dist/components/nk-table-view.js +1 -1
  61. package/dist/components/nk-tabs.js +1 -1
  62. package/dist/components/nk-tag.js +1 -1
  63. package/dist/components/nk-template-btn.js +1 -1
  64. package/dist/components/nk-textarea.js +1 -1
  65. package/dist/components/nk-theme-toggle.js +1 -1
  66. package/dist/components/nk-toast.js +19 -1
  67. package/dist/components/nk-todo.js +1 -1
  68. package/dist/components/nk-toggle.js +1 -1
  69. package/dist/components/nk-topbar.js +1 -1
  70. package/dist/components/nk-tree-item.js +1 -1
  71. package/dist/components/nk-tree.js +1 -1
  72. package/dist/components/nk-workspace-switcher.js +1 -1
  73. package/dist/components/shared/{base-BPIvRI6K.js → base-AWFyTskN.js} +22 -3
  74. package/dist/notionkit-elements.esm.js +86 -19
  75. package/dist/notionkit-elements.js +86 -19
  76. package/dist/notionkit-elements.min.js +1 -1
  77. package/package.json +3 -3
  78. package/src/base.js +19 -0
  79. package/src/components/overlays/nk-settings-pane.js +7 -2
  80. package/src/components/overlays/nk-toast.js +18 -0
  81. package/src/components/page/nk-danger-zone.js +15 -6
  82. package/src/components/page/nk-empty.js +15 -4
  83. package/src/components/page/nk-model-card.js +9 -4
package/README.md CHANGED
@@ -1,11 +1,11 @@
1
1
  <h1 align="center">🧩 NotionKit Elements</h1>
2
2
 
3
3
  <p align="center">
4
- <a href="https://www.npmjs.com/package/@jungherz-de/notionkit-elements"><img src="https://img.shields.io/badge/version-1.5.1-2383e2?style=flat-square" alt="Version"></a>
4
+ <a href="https://www.npmjs.com/package/@jungherz-de/notionkit-elements"><img src="https://img.shields.io/badge/version-1.5.2-2383e2?style=flat-square" alt="Version"></a>
5
5
  <a href="#"><img src="https://img.shields.io/badge/vanilla_JS-no_dependencies-448361?style=flat-square" alt="Vanilla JS"></a>
6
6
  <a href="#"><img src="https://img.shields.io/badge/elements-71-529cca?style=flat-square" alt="71 Elements"></a>
7
7
  <a href="LICENSE"><img src="https://img.shields.io/badge/license-MIT-9065b0?style=flat-square" alt="MIT License"></a>
8
- <a href="CHANGELOG.md"><img src="https://img.shields.io/badge/changelog-v1.5.1-lightgrey?style=flat-square" alt="Changelog"></a>
8
+ <a href="CHANGELOG.md"><img src="https://img.shields.io/badge/changelog-v1.5.2-lightgrey?style=flat-square" alt="Changelog"></a>
9
9
  <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>
10
10
  </p>
11
11
 
@@ -71,8 +71,8 @@ It is the **app layer** of the NotionKit family – three layers, one design lan
71
71
  <!DOCTYPE html>
72
72
  <html lang="en" data-theme="light">
73
73
  <head>
74
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit@1.5.1/notionkit.min.css">
75
- <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit-elements@1.5.1/dist/notionkit-elements.min.js"></script>
74
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit@1.5.2/notionkit.min.css">
75
+ <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit-elements@1.5.2/dist/notionkit-elements.min.js"></script>
76
76
  </head>
77
77
  <body class="nk-body">
78
78
  <nk-field label="Display name" desc="Shown next to your comments">
package/dist/components/nk-ai-input-row.js CHANGED
@@ -1,4 +1,4 @@
1
- import { N as NkElement } from './shared/base-BPIvRI6K.js';
1
+ import { N as NkElement } from './shared/base-AWFyTskN.js';
2
2
 
3
3
  // <nk-ai-input-row placeholder="Ask Mona something …"></nk-ai-input-row>
4
4
  // → <div class="nk-ai-input-row"><span>✨</span><input><button class="nk-ai-send">↑</button></div>
package/dist/components/nk-ai-msg.js CHANGED
@@ -1,4 +1,4 @@
1
- import { N as NkElement } from './shared/base-BPIvRI6K.js';
1
+ import { N as NkElement } from './shared/base-AWFyTskN.js';
2
2
 
3
3
  // <nk-ai-msg role="user" name="You" avatar="MK">Summarise the open tasks.</nk-ai-msg>
4
4
  // <nk-ai-msg role="assistant" name="Mona" badge="· AI" avatar="✨">
package/dist/components/nk-ai-thread.js CHANGED
@@ -1,4 +1,4 @@
1
- import { N as NkElement } from './shared/base-BPIvRI6K.js';
1
+ import { N as NkElement } from './shared/base-AWFyTskN.js';
2
2
 
3
3
  // <nk-ai-thread><nk-ai-msg …>…</nk-ai-msg>…</nk-ai-thread> → <div class="nk-ai-thread">
4
4
  class NkAiThread extends NkElement {
package/dist/components/nk-app.js CHANGED
@@ -1,4 +1,4 @@
1
- import { N as NkElement } from './shared/base-BPIvRI6K.js';
1
+ import { N as NkElement } from './shared/base-AWFyTskN.js';
2
2
 
3
3
  // <nk-app>
4
4
  // <nk-sidebar slot="sidebar">…</nk-sidebar>
package/dist/components/nk-avatar-group.js CHANGED
@@ -1,4 +1,4 @@
1
- import { N as NkElement } from './shared/base-BPIvRI6K.js';
1
+ import { N as NkElement } from './shared/base-AWFyTskN.js';
2
2
 
3
3
  // <nk-avatar-group more="+2">
4
4
  // <span class="mini-avatar" style="background:#448361">SL</span>…
package/dist/components/nk-banner.js CHANGED
@@ -1,4 +1,4 @@
1
- import { N as NkElement } from './shared/base-BPIvRI6K.js';
1
+ import { N as NkElement } from './shared/base-AWFyTskN.js';
2
2
 
3
3
  // <nk-banner variant="info">ℹ️ <span>Text</span><span slot="action">Open</span></nk-banner>
4
4
  // → <div class="nk-banner info">…<span class="b-action">Open</span></div>
package/dist/components/nk-block-host.js CHANGED
@@ -1,4 +1,4 @@
1
- import { N as NkElement } from './shared/base-BPIvRI6K.js';
1
+ import { N as NkElement } from './shared/base-AWFyTskN.js';
2
2
 
3
3
  // <nk-block-host handle><p>Editable content lives here.</p></nk-block-host>
4
4
  // → <div class="nk-block-host"><span class="nk-block-handle">⠿</span>…</div>
package/dist/components/nk-board-view.js CHANGED
@@ -1,4 +1,4 @@
1
- import { N as NkElement } from './shared/base-BPIvRI6K.js';
1
+ import { N as NkElement } from './shared/base-AWFyTskN.js';
2
2
  import { t as tagFor, r as renderPropertyCell } from './shared/property-cell-CtXQpUjQ.js';
3
3
 
4
4
  // <nk-board-view name="board" label="▤ Board" group-by="status" new-row></nk-board-view>
package/dist/components/nk-breadcrumb.js CHANGED
@@ -1,4 +1,4 @@
1
- import { N as NkElement } from './shared/base-BPIvRI6K.js';
1
+ import { N as NkElement } from './shared/base-AWFyTskN.js';
2
2
 
3
3
  // <nk-breadcrumb>
4
4
  // <a href="/overview">📊 Project overview</a>
package/dist/components/nk-btn.js CHANGED
@@ -1,4 +1,4 @@
1
- import { N as NkElement } from './shared/base-BPIvRI6K.js';
1
+ import { N as NkElement } from './shared/base-AWFyTskN.js';
2
2
 
3
3
  // <nk-btn variant="primary" small>Save</nk-btn> → <button class="nk-btn primary small">
4
4
  // <nk-btn href="/docs" variant="secondary">Docs</nk-btn> → <a class="nk-btn secondary">
package/dist/components/nk-callout.js CHANGED
@@ -1,4 +1,4 @@
1
- import { N as NkElement } from './shared/base-BPIvRI6K.js';
1
+ import { N as NkElement } from './shared/base-AWFyTskN.js';
2
2
 
3
3
  // <nk-callout icon="💡">text</nk-callout>
4
4
  // <nk-callout><span slot="icon">📌</span>text</nk-callout>
package/dist/components/nk-check.js CHANGED
@@ -1,4 +1,4 @@
1
- import { a as NkFormElement } from './shared/base-BPIvRI6K.js';
1
+ import { a as NkFormElement } from './shared/base-AWFyTskN.js';
2
2
 
3
3
  // <nk-check name="mail" value="weekly" checked>Weekly digest</nk-check>
4
4
  // → <label class="nk-check"><input type="checkbox"> Weekly digest</label>
package/dist/components/nk-cmdk.js CHANGED
@@ -1,4 +1,4 @@
1
- import { N as NkElement } from './shared/base-BPIvRI6K.js';
1
+ import { N as NkElement } from './shared/base-AWFyTskN.js';
2
2
  import { l as lockScroll, i as inertOutside, u as unlockScroll } from './shared/focus-DXrK9oLe.js';
3
3
 
4
4
  // Subsequence scoring for the command palette: every query character must
package/dist/components/nk-code.js CHANGED
@@ -1,4 +1,4 @@
1
- import { N as NkElement } from './shared/base-BPIvRI6K.js';
1
+ import { N as NkElement } from './shared/base-AWFyTskN.js';
2
2
 
3
3
  // Minimal HTML highlighter emitting the .tag / .attr hooks .nk-code styles.
4
4
  // Mirrors tools/highlight.mjs in the NotionKit foundation – no third-party
package/dist/components/nk-comment.js CHANGED
@@ -1,4 +1,4 @@
1
- import { N as NkElement } from './shared/base-BPIvRI6K.js';
1
+ import { N as NkElement } from './shared/base-AWFyTskN.js';
2
2
 
3
3
  // <nk-comment author="Sara Lindt" time="1 hr ago" avatar="SL" color="#448361">The board view feels close.</nk-comment>
4
4
  // → <div class="nk-comment"><span class="mini-avatar">SL</span><div><div class="c-head"><b>Sara Lindt</b> · 1 hr ago</div><div class="c-body">…</div></div></div>
package/dist/components/nk-comments.js CHANGED
@@ -1,4 +1,4 @@
1
- import { N as NkElement } from './shared/base-BPIvRI6K.js';
1
+ import { N as NkElement } from './shared/base-AWFyTskN.js';
2
2
 
3
3
  // <nk-comments placeholder="Comment …" send-label="Send">
4
4
  // <nk-comment …>…</nk-comment>
package/dist/components/nk-danger-zone.js CHANGED
@@ -1,25 +1,34 @@
1
- import { N as NkElement } from './shared/base-BPIvRI6K.js';
1
+ import { N as NkElement } from './shared/base-AWFyTskN.js';
2
2
 
3
3
  // <nk-danger-zone title="Danger zone">…</nk-danger-zone>
4
4
  // → <div class="nk-danger-zone"><div class="dz-title">Danger zone</div>…</div>
5
+ // `title` is the heading, never a tooltip – see NkElement.takeTitle().
5
6
  class NkDangerZone extends NkElement {
6
7
  static get observedAttributes() { return ['title']; }
7
8
 
8
9
  render() {
9
10
  const box = this.createElement('div', ['nk-danger-zone']);
10
- this._title = this.createElement('div', ['dz-title']);
11
- box.appendChild(this._title);
11
+ this._titleEl = this.createElement('div', ['dz-title']);
12
+ box.appendChild(this._titleEl);
12
13
  box.appendChild(document.createElement('slot'));
13
14
  this._wrapper.appendChild(box);
15
+ this.takeTitle();
14
16
  this._sync();
15
17
  }
16
18
 
17
19
  _sync() {
18
- const t = this.getAttribute('title');
19
- this._title.textContent = t || '';
20
- this._title.style.display = t ? '' : 'none';
20
+ const t = this._titleText;
21
+ this._titleEl.textContent = t || '';
22
+ this._titleEl.style.display = t ? '' : 'none';
21
23
  }
22
- onAttributeChanged() { this._sync(); }
24
+
25
+ onAttributeChanged(name, _old, value) {
26
+ if (name === 'title' && !this.takeTitle(value)) return;
27
+ this._sync();
28
+ }
29
+
30
+ get title() { return this._titleText ?? ''; }
31
+ set title(v) { this._titleText = v == null ? '' : String(v); if (this._initialized) this._sync(); }
23
32
  }
24
33
 
25
34
  customElements.define('nk-danger-zone', NkDangerZone);
package/dist/components/nk-database.js CHANGED
@@ -1,4 +1,4 @@
1
- import { N as NkElement } from './shared/base-BPIvRI6K.js';
1
+ import { N as NkElement } from './shared/base-AWFyTskN.js';
2
2
 
3
3
  // <nk-database id="db" view="table" add-view>
4
4
  // <nk-table-view name="table" label="▦ Table" count></nk-table-view>
package/dist/components/nk-divider.js CHANGED
@@ -1,4 +1,4 @@
1
- import { N as NkElement } from './shared/base-BPIvRI6K.js';
1
+ import { N as NkElement } from './shared/base-AWFyTskN.js';
2
2
 
3
3
  // <nk-divider></nk-divider> → <hr class="nk-divider">
4
4
  class NkDivider extends NkElement {
package/dist/components/nk-emoji-picker.js CHANGED
@@ -1,4 +1,4 @@
1
- import { N as NkElement } from './shared/base-BPIvRI6K.js';
1
+ import { N as NkElement } from './shared/base-AWFyTskN.js';
2
2
 
3
3
  // Built-in emoji set for <nk-emoji-picker>: eight categories, names for
4
4
  // search. Override with `picker.emojis = [{ char, name, cat }]`.
package/dist/components/nk-empty.js CHANGED
@@ -1,7 +1,9 @@
1
- import { N as NkElement } from './shared/base-BPIvRI6K.js';
1
+ import { N as NkElement } from './shared/base-AWFyTskN.js';
2
2
 
3
3
  // <nk-empty icon="🗂️" title="No entries yet" desc="Create the first one."><nk-btn variant="primary" small>＋ New</nk-btn></nk-empty>
4
- // → <div class="nk-empty"><div class="e-icon">🗂️</div><div class="e-title">…</div><div class="e-desc">…</div>…</div>
4
+ // → <div class="nk-empty"><div class="e-icon">🗂️</div><div class="e-title">…</div><div class="e-desc">…</div><div class="e-actions">…</div></div>
5
+ // `title` is the heading, never a tooltip – see NkElement.takeTitle(). The
6
+ // default slot sits in .e-actions, so several buttons keep 8px apart.
5
7
  class NkEmpty extends NkElement {
6
8
  static get observedAttributes() { return ['icon', 'title', 'desc']; }
7
9
 
@@ -15,20 +17,29 @@ class NkEmpty extends NkElement {
15
17
  box.appendChild(s);
16
18
  this._parts[slot] = el;
17
19
  }
18
- box.appendChild(document.createElement('slot'));
20
+ const actions = this.createElement('div', ['e-actions']);
21
+ actions.appendChild(document.createElement('slot'));
22
+ box.appendChild(actions);
19
23
  this._wrapper.appendChild(box);
24
+ this.takeTitle();
20
25
  this._sync();
21
26
  }
22
27
 
23
28
  _sync() {
24
29
  for (const [slot, el] of Object.entries(this._parts)) {
25
- const v = this.getAttribute(slot);
30
+ const v = slot === 'title' ? this._titleText : this.getAttribute(slot);
26
31
  el.textContent = v || '';
27
32
  el.style.display = v ? '' : 'none';
28
33
  }
29
34
  }
30
35
 
31
- onAttributeChanged() { this._sync(); }
36
+ onAttributeChanged(name, _old, value) {
37
+ if (name === 'title' && !this.takeTitle(value)) return;
38
+ this._sync();
39
+ }
40
+
41
+ get title() { return this._titleText ?? ''; }
42
+ set title(v) { this._titleText = v == null ? '' : String(v); if (this._initialized) this._sync(); }
32
43
  }
33
44
 
34
45
  customElements.define('nk-empty', NkEmpty);
package/dist/components/nk-field.js CHANGED
@@ -1,4 +1,4 @@
1
- import { N as NkElement } from './shared/base-BPIvRI6K.js';
1
+ import { N as NkElement } from './shared/base-AWFyTskN.js';
2
2
 
3
3
  // <nk-field label="Display name" desc="Shown next to your comments">
4
4
  // <nk-input value="Marcel"></nk-input>
package/dist/components/nk-fields.js CHANGED
@@ -1,4 +1,4 @@
1
- import { N as NkElement } from './shared/base-BPIvRI6K.js';
1
+ import { N as NkElement } from './shared/base-AWFyTskN.js';
2
2
 
3
3
  // <nk-fields>
4
4
  // <nk-field label="Name"><nk-input name="name"></nk-input></nk-field>
package/dist/components/nk-filter-bar.js CHANGED
@@ -1,4 +1,4 @@
1
- import { N as NkElement } from './shared/base-BPIvRI6K.js';
1
+ import { N as NkElement } from './shared/base-AWFyTskN.js';
2
2
 
3
3
  // <nk-filter-bar search placeholder="Search rows …"></nk-filter-bar>
4
4
  // bar.filters = [{ key: 'status', label: 'Status: Done', value: 'done' }];
package/dist/components/nk-heading.js CHANGED
@@ -1,4 +1,4 @@
1
- import { N as NkElement } from './shared/base-BPIvRI6K.js';
1
+ import { N as NkElement } from './shared/base-AWFyTskN.js';
2
2
 
3
3
  // <nk-heading level="2">Section</nk-heading> → <h2 class="nk-heading">
4
4
  // The heading level is real markup (h1–h4), so the outline stays honest.
package/dist/components/nk-input.js CHANGED
@@ -1,4 +1,4 @@
1
- import { a as NkFormElement } from './shared/base-BPIvRI6K.js';
1
+ import { a as NkFormElement } from './shared/base-AWFyTskN.js';
2
2
 
3
3
  // <nk-input name="title" value="…" placeholder="…" wide></nk-input> → <input class="nk-input wide">
4
4
  // Takes part in the surrounding <form> through ElementInternals.
package/dist/components/nk-kbd.js CHANGED
@@ -1,4 +1,4 @@
1
- import { N as NkElement } from './shared/base-BPIvRI6K.js';
1
+ import { N as NkElement } from './shared/base-AWFyTskN.js';
2
2
 
3
3
  // <nk-kbd>⌘</nk-kbd> <nk-kbd>K</nk-kbd> → <kbd class="nk-kbd">
4
4
  class NkKbd extends NkElement {
package/dist/components/nk-member-list.js CHANGED
@@ -1,4 +1,4 @@
1
- import { N as NkElement } from './shared/base-BPIvRI6K.js';
1
+ import { N as NkElement } from './shared/base-AWFyTskN.js';
2
2
 
3
3
  // <nk-member-list><nk-member-row …></nk-member-row>…</nk-member-list>
4
4
  // → <div class="nk-member-list">…</div>; the last row gets `last` (no border).
package/dist/components/nk-member-row.js CHANGED
@@ -1,4 +1,4 @@
1
- import { N as NkElement } from './shared/base-BPIvRI6K.js';
1
+ import { N as NkElement } from './shared/base-AWFyTskN.js';
2
2
 
3
3
  // <nk-member-row name="Sara Lindt" mail="sara@…" avatar="SL" color="#448361">
4
4
  // <nk-select slot="role" compact>…</nk-select>
package/dist/components/nk-mention.js CHANGED
@@ -1,4 +1,4 @@
1
- import { N as NkElement } from './shared/base-BPIvRI6K.js';
1
+ import { N as NkElement } from './shared/base-AWFyTskN.js';
2
2
 
3
3
  // <nk-mention type="person"><span slot="avatar" class="mini-avatar" style="background:#448361">SL</span>Sara Lindt</nk-mention>
4
4
  // <nk-mention type="page">📄 Onboarding</nk-mention> <nk-mention type="date">📅 May 20</nk-mention>
package/dist/components/nk-menu-item.js CHANGED
@@ -1,4 +1,4 @@
1
- import { N as NkElement } from './shared/base-BPIvRI6K.js';
1
+ import { N as NkElement } from './shared/base-AWFyTskN.js';
2
2
 
3
3
  // <nk-menu-item icon="✏️" shortcut="⌘E" value="rename">Rename</nk-menu-item>
4
4
  // <nk-menu-item type="separator"></nk-menu-item> <nk-menu-item type="label">Danger</nk-menu-item>
package/dist/components/nk-menu.js CHANGED
@@ -1,4 +1,4 @@
1
- import { N as NkElement } from './shared/base-BPIvRI6K.js';
1
+ import { N as NkElement } from './shared/base-AWFyTskN.js';
2
2
 
3
3
  // <nk-menu>
4
4
  // <nk-menu-item type="label">Page</nk-menu-item>
package/dist/components/nk-modal.js CHANGED
@@ -1,4 +1,4 @@
1
- import { N as NkElement } from './shared/base-BPIvRI6K.js';
1
+ import { N as NkElement } from './shared/base-AWFyTskN.js';
2
2
  import { l as lockScroll, i as inertOutside, f as firstFocusable, u as unlockScroll } from './shared/focus-DXrK9oLe.js';
3
3
 
4
4
  // <nk-modal id="settings">
package/dist/components/nk-model-card.js CHANGED
@@ -1,9 +1,10 @@
1
- import { a as NkFormElement } from './shared/base-BPIvRI6K.js';
1
+ import { a as NkFormElement } from './shared/base-AWFyTskN.js';
2
2
 
3
3
  // <nk-model-card name="model" value="gpt" title="Mona Pro" desc="Best for long documents" selected></nk-model-card>
4
4
  // → <div class="nk-model-card selected"><div class="m-radio"></div><div><div class="m-name">…</div><div class="m-desc">…</div></div></div>
5
5
  // Cards with the same `name` in the same tree behave like radios and submit
6
- // the selected value with the form.
6
+ // the selected value with the form. `title` is the card's name, never a
7
+ // tooltip – see NkElement.takeTitle().
7
8
  class NkModelCard extends NkFormElement {
8
9
  static get observedAttributes() { return ['name', 'value', 'title', 'desc', 'selected', 'disabled']; }
9
10
 
@@ -21,6 +22,7 @@ class NkModelCard extends NkFormElement {
21
22
  this._card.appendChild(text);
22
23
  this._wrapper.appendChild(this._card);
23
24
  this._defaultSelected = this.getBoolAttr('selected');
25
+ this.takeTitle();
24
26
  this._sync();
25
27
  if (this.getBoolAttr('selected')) this._unselectPeers();
26
28
  }
@@ -30,7 +32,7 @@ class NkModelCard extends NkFormElement {
30
32
  this._card.classList.toggle('selected', on);
31
33
  this._card.setAttribute('aria-checked', on ? 'true' : 'false');
32
34
  this._card.setAttribute('aria-disabled', this.getBoolAttr('disabled') ? 'true' : 'false');
33
- this._name.textContent = this.getAttribute('title') || '';
35
+ this._name.textContent = this._titleText || '';
34
36
  const desc = this.getAttribute('desc');
35
37
  this._desc.textContent = desc || '';
36
38
  this._desc.style.display = desc ? '' : 'none';
@@ -64,11 +66,12 @@ class NkModelCard extends NkFormElement {
64
66
  if (this.getBoolAttr('disabled') || this.getBoolAttr('selected')) return;
65
67
  this.setBoolAttr('selected', true);
66
68
  this.emit('nk-change', { value: this.value, name: this.name, checked: true });
67
- this.emit('nk-select', { value: this.value, label: this.getAttribute('title') });
69
+ this.emit('nk-select', { value: this.value, label: this.title });
68
70
  this.dispatchEvent(new Event('change', { bubbles: true }));
69
71
  }
70
72
 
71
- onAttributeChanged(name) {
73
+ onAttributeChanged(name, _old, value) {
74
+ if (name === 'title' && !this.takeTitle(value)) return;
72
75
  this._sync();
73
76
  if (name === 'selected' && this.getBoolAttr('selected')) this._unselectPeers();
74
77
  }
@@ -76,6 +79,8 @@ class NkModelCard extends NkFormElement {
76
79
  resetValue() { this.setBoolAttr('selected', this._defaultSelected); }
77
80
  focus(o) { this._card?.focus(o); }
78
81
 
82
+ get title() { return this._titleText ?? ''; }
83
+ set title(v) { this._titleText = v == null ? '' : String(v); if (this._initialized) this._sync(); }
79
84
  get selected() { return this.getBoolAttr('selected'); }
80
85
  set selected(v) { this.setBoolAttr('selected', v); }
81
86
  get value() { return this.getAttribute('value') || 'on'; }
package/dist/components/nk-page-actions.js CHANGED
@@ -1,4 +1,4 @@
1
- import { N as NkElement } from './shared/base-BPIvRI6K.js';
1
+ import { N as NkElement } from './shared/base-AWFyTskN.js';
2
2
 
3
3
  // <nk-page-actions><span>👤 Ada</span><span>📅 12 May</span><span>🏷️ <nk-tag color="purple">Design</nk-tag></span></nk-page-actions>
4
4
  // → <div class="nk-page-meta">…</div> – the meta row under the title
package/dist/components/nk-page-cover.js CHANGED
@@ -1,4 +1,4 @@
1
- import { N as NkElement } from './shared/base-BPIvRI6K.js';
1
+ import { N as NkElement } from './shared/base-AWFyTskN.js';
2
2
 
3
3
  // <nk-page-cover slot="cover"></nk-page-cover> → the token gradient
4
4
  // <nk-page-cover slot="cover" src="cover.jpg"></nk-page-cover> → an image
package/dist/components/nk-page-title.js CHANGED
@@ -1,4 +1,4 @@
1
- import { N as NkElement } from './shared/base-BPIvRI6K.js';
1
+ import { N as NkElement } from './shared/base-AWFyTskN.js';
2
2
 
3
3
  // <nk-page-title>NotionKit MVP</nk-page-title> → <h1 class="nk-page-title">
4
4
  // <nk-page-title editable placeholder="Untitled">…</nk-page-title>
package/dist/components/nk-page.js CHANGED
@@ -1,4 +1,4 @@
1
- import { N as NkElement } from './shared/base-BPIvRI6K.js';
1
+ import { N as NkElement } from './shared/base-AWFyTskN.js';
2
2
 
3
3
  // <nk-page icon="🚀" cover>
4
4
  // <nk-page-title>NotionKit MVP</nk-page-title>
package/dist/components/nk-pop.js CHANGED
@@ -1,4 +1,4 @@
1
- import { N as NkElement } from './shared/base-BPIvRI6K.js';
1
+ import { N as NkElement } from './shared/base-AWFyTskN.js';
2
2
 
3
3
  // <nk-pop placement="bottom-start">
4
4
  // <nk-btn slot="trigger" variant="secondary">Options</nk-btn>
package/dist/components/nk-profile-row.js CHANGED
@@ -1,4 +1,4 @@
1
- import { N as NkElement } from './shared/base-BPIvRI6K.js';
1
+ import { N as NkElement } from './shared/base-AWFyTskN.js';
2
2
 
3
3
  // <nk-profile-row avatar="MK"><nk-btn variant="secondary" small>Change photo</nk-btn></nk-profile-row>
4
4
  // → <div class="nk-profile-row"><div class="big-avatar">MK</div>…</div>
package/dist/components/nk-progress.js CHANGED
@@ -1,4 +1,4 @@
1
- import { N as NkElement } from './shared/base-BPIvRI6K.js';
1
+ import { N as NkElement } from './shared/base-AWFyTskN.js';
2
2
 
3
3
  // <nk-progress value="72" label="72%"></nk-progress>
4
4
  // The bar is `.nk-progress > i` — a child combinator, so both nodes live here.
package/dist/components/nk-quote.js CHANGED
@@ -1,4 +1,4 @@
1
- import { N as NkElement } from './shared/base-BPIvRI6K.js';
1
+ import { N as NkElement } from './shared/base-AWFyTskN.js';
2
2
 
3
3
  // <nk-quote cite="Ada Lovelace">The Analytical Engine weaves…</nk-quote>
4
4
  // .q-cite has no ::slotted() twin, so the citation is rendered here.
package/dist/components/nk-radio.js CHANGED
@@ -1,4 +1,4 @@
1
- import { a as NkFormElement } from './shared/base-BPIvRI6K.js';
1
+ import { a as NkFormElement } from './shared/base-AWFyTskN.js';
2
2
 
3
3
  // <nk-radio name="style" value="concise" checked>Concise</nk-radio>
4
4
  // → <label class="nk-check"><input type="radio"> Concise</label>
package/dist/components/nk-section-label.js CHANGED
@@ -1,4 +1,4 @@
1
- import { N as NkElement } from './shared/base-BPIvRI6K.js';
1
+ import { N as NkElement } from './shared/base-AWFyTskN.js';
2
2
 
3
3
  // <nk-section-label addable>Favourites</nk-section-label>
4
4
  // → <div class="nk-section-label">Favourites <span class="plus">＋</span></div>
package/dist/components/nk-segmented.js CHANGED
@@ -1,4 +1,4 @@
1
- import { a as NkFormElement } from './shared/base-BPIvRI6K.js';
1
+ import { a as NkFormElement } from './shared/base-AWFyTskN.js';
2
2
 
3
3
  // <nk-segmented name="range" value="week">
4
4
  // <button value="week">Week</button><button value="month">Month</button>
package/dist/components/nk-select.js CHANGED
@@ -1,4 +1,4 @@
1
- import { a as NkFormElement } from './shared/base-BPIvRI6K.js';
1
+ import { a as NkFormElement } from './shared/base-AWFyTskN.js';
2
2
 
3
3
  // <nk-select name="role" value="editor">
4
4
  // <option value="viewer">Viewer</option>
package/dist/components/nk-settings-pane.js CHANGED
@@ -1,6 +1,7 @@
1
- import { N as NkElement } from './shared/base-BPIvRI6K.js';
1
+ import { N as NkElement } from './shared/base-AWFyTskN.js';
2
2
 
3
3
  // <nk-settings-pane name="profile" label="My profile" icon="👤" group="Account" title="My profile" active>…</nk-settings-pane>
4
+ // `title` is the heading, never a tooltip – see NkElement.takeTitle().
4
5
  // → <section class="nk-settings-pane active"><h2>My profile</h2>…</section>
5
6
  // `label`, `icon` and `group` feed the nav that <nk-modal> renders; `title`
6
7
  // renders the pane heading (child-combinator rule, so it lives here). Slotted
@@ -14,22 +15,26 @@ class NkSettingsPane extends NkElement {
14
15
  this._section.appendChild(this._h2);
15
16
  this._section.appendChild(document.createElement('slot'));
16
17
  this._wrapper.appendChild(this._section);
18
+ this.takeTitle();
17
19
  this._sync();
18
20
  }
19
21
 
20
22
  _sync() {
21
- const title = this.getAttribute('title');
23
+ const title = this._titleText;
22
24
  this._h2.textContent = title || '';
23
25
  this._h2.style.display = title ? '' : 'none';
24
26
  this._section.classList.toggle('active', this.getBoolAttr('active'));
25
27
  this._section.setAttribute('aria-label', this.getAttribute('label') || title || this.getAttribute('name') || '');
26
28
  }
27
29
 
28
- onAttributeChanged(name) {
30
+ onAttributeChanged(name, _old, value) {
31
+ if (name === 'title' && !this.takeTitle(value)) return;
29
32
  this._sync();
30
33
  if (['label', 'icon', 'group', 'name'].includes(name)) this.closest('nk-modal')?.requestNav?.();
31
34
  }
32
35
 
36
+ get title() { return this._titleText ?? ''; }
37
+ set title(v) { this._titleText = v == null ? '' : String(v); if (this._initialized) this._sync(); }
33
38
  get name() { return this.getAttribute('name') ?? this.getAttribute('label') ?? ''; }
34
39
  get active() { return this.getBoolAttr('active'); }
35
40
  set active(v) { this.setBoolAttr('active', v); }
package/dist/components/nk-settings-user.js CHANGED
@@ -1,4 +1,4 @@
1
- import { N as NkElement } from './shared/base-BPIvRI6K.js';
1
+ import { N as NkElement } from './shared/base-AWFyTskN.js';
2
2
 
3
3
  // <nk-settings-user slot="user" name="Marcel Karas" mail="marcel@…" avatar="MK"></nk-settings-user>
4
4
  // → <div class="nk-settings-user"><div class="avatar">MK</div><div class="u-text"><div class="name">…</div><div class="mail">…</div></div></div>
package/dist/components/nk-sidebar.js CHANGED
@@ -1,4 +1,4 @@
1
- import { N as NkElement } from './shared/base-BPIvRI6K.js';
1
+ import { N as NkElement } from './shared/base-AWFyTskN.js';
2
2
 
3
3
  // <nk-sidebar slot="sidebar">
4
4
  // <nk-workspace-switcher slot="workspace" name="Acme"></nk-workspace-switcher>
package/dist/components/nk-skeleton.js CHANGED
@@ -1,4 +1,4 @@
1
- import { N as NkElement } from './shared/base-BPIvRI6K.js';
1
+ import { N as NkElement } from './shared/base-AWFyTskN.js';
2
2
 
3
3
  // <nk-skeleton height="18" width="60%"></nk-skeleton>
4
4
  // <nk-skeleton lines="3" widths="100%,85%,40%"></nk-skeleton>
package/dist/components/nk-slider.js CHANGED
@@ -1,4 +1,4 @@
1
- import { a as NkFormElement } from './shared/base-BPIvRI6K.js';
1
+ import { a as NkFormElement } from './shared/base-AWFyTskN.js';
2
2
 
3
3
  // <nk-slider name="size" min="12" max="18" value="14" show-value></nk-slider>
4
4
  // → <input type="range" class="nk-slider"> <div class="nk-slider-value">14</div>
package/dist/components/nk-stat.js CHANGED
@@ -1,4 +1,4 @@
1
- import { N as NkElement } from './shared/base-BPIvRI6K.js';
1
+ import { N as NkElement } from './shared/base-AWFyTskN.js';
2
2
 
3
3
  // <nk-stat label="Active pages" value="128" delta="▲ 12 this week" trend="up"></nk-stat>
4
4
  // → <div class="nk-stat"><div class="s-label">…</div><div class="s-value">…</div><div class="s-delta up">…</div></div>
package/dist/components/nk-stats.js CHANGED
@@ -1,4 +1,4 @@
1
- import { N as NkElement } from './shared/base-BPIvRI6K.js';
1
+ import { N as NkElement } from './shared/base-AWFyTskN.js';
2
2
 
3
3
  // <nk-stats><nk-stat …></nk-stat>…</nk-stats> → <div class="nk-stats">
4
4
  class NkStats extends NkElement {
package/dist/components/nk-switch.js CHANGED
@@ -1,4 +1,4 @@
1
- import { a as NkFormElement } from './shared/base-BPIvRI6K.js';
1
+ import { a as NkFormElement } from './shared/base-AWFyTskN.js';
2
2
 
3
3
  // <nk-switch name="notify" checked></nk-switch>
4
4
  // → <button class="nk-switch" role="switch" aria-checked="true">
package/dist/components/nk-synced.js CHANGED
@@ -1,4 +1,4 @@
1
- import { N as NkElement } from './shared/base-BPIvRI6K.js';
1
+ import { N as NkElement } from './shared/base-AWFyTskN.js';
2
2
 
3
3
  // <nk-synced badge="⟳ 3 places">…</nk-synced>
4
4
  // → <div class="nk-synced"><span class="synced-badge">⟳ 3 places</span>…</div>
package/dist/components/nk-tab-bar-item.js CHANGED
@@ -1,4 +1,4 @@
1
- import { N as NkElement } from './shared/base-BPIvRI6K.js';
1
+ import { N as NkElement } from './shared/base-AWFyTskN.js';
2
2
 
3
3
  // <nk-tab-bar-item icon="📥" value="inbox" active>Inbox</nk-tab-bar-item>
4
4
  // → <button class="nk-tab-bar-item active" type="button">
package/dist/components/nk-tab-bar.js CHANGED
@@ -1,4 +1,4 @@
1
- import { N as NkElement } from './shared/base-BPIvRI6K.js';
1
+ import { N as NkElement } from './shared/base-AWFyTskN.js';
2
2
 
3
3
  // <nk-tab-bar value="inbox">
4
4
  // <nk-tab-bar-item icon="🏠" value="home">Home</nk-tab-bar-item>
package/dist/components/nk-tab.js CHANGED
@@ -1,4 +1,4 @@
1
- import { N as NkElement } from './shared/base-BPIvRI6K.js';
1
+ import { N as NkElement } from './shared/base-AWFyTskN.js';
2
2
 
3
3
  // <nk-tab value="notes" active>📝 Notes</nk-tab> → <span class="nk-tab active" role="tab">
4
4
  class NkTab extends NkElement {