@jungherz-de/notionkit-elements 1.0.1 → 1.2.0

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 (90) hide show
  1. package/README.md +11 -11
  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 +9 -3
  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 +1 -1
  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 +1 -1
  23. package/dist/components/nk-field.js +45 -7
  24. package/dist/components/nk-fields.js +22 -0
  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 +2 -2
  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 +1 -1
  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 +9 -3
  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 +6 -3
  48. package/dist/components/nk-settings-pane.js +1 -1
  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 +32 -4
  56. package/dist/components/nk-synced.js +1 -1
  57. package/dist/components/nk-tab-bar-item.js +83 -0
  58. package/dist/components/nk-tab-bar.js +83 -0
  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 +2 -2
  65. package/dist/components/nk-theme-toggle.js +1 -1
  66. package/dist/components/nk-toast.js +1 -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-EVtzqKmc.js +347 -0
  74. package/dist/notionkit-elements.esm.js +311 -21
  75. package/dist/notionkit-elements.js +313 -20
  76. package/dist/notionkit-elements.min.js +1 -1
  77. package/package.json +3 -3
  78. package/src/base.js +31 -1
  79. package/src/components/forms/nk-check.js +8 -2
  80. package/src/components/forms/nk-field.js +44 -6
  81. package/src/components/forms/nk-fields.js +21 -0
  82. package/src/components/forms/nk-input.js +1 -1
  83. package/src/components/forms/nk-radio.js +8 -2
  84. package/src/components/forms/nk-select.js +5 -2
  85. package/src/components/forms/nk-switch.js +31 -3
  86. package/src/components/forms/nk-textarea.js +1 -1
  87. package/src/components/shell/nk-tab-bar-item.js +82 -0
  88. package/src/components/shell/nk-tab-bar.js +82 -0
  89. package/src/index.js +3 -0
  90. package/dist/components/shared/base-6gEcoatG.js +0 -317
package/dist/notionkit-elements.esm.js CHANGED
@@ -1,4 +1,4 @@
1
- // NotionKit v1.1.1 – Constructable Stylesheet
1
+ // NotionKit v1.3.0 – Constructable Stylesheet
2
2
  // Auto-generated by build-styles-js.mjs – do not edit manually.
3
3
 
4
4
  // The :root and [data-theme="dark"] blocks that declare --nk-* …
@@ -6,7 +6,7 @@ const tokensCss = ":root{color-scheme:light;--nk-bg:#ffffff;--nk-bg-sidebar:#f7f
6
6
 
7
7
  // … and everything else, in two pieces around where they were.
8
8
  const componentsHead = "[class*=nk-],[class*=nk-] *,[class*=nk-] ::after,[class*=nk-] ::before,[class*=nk-]::after,[class*=nk-]::before{box-sizing:border-box}[class*=nk-] :where(h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,pre,ul,ol,li){margin:0;padding:0}[class*=nk-] :where(ul,ol){list-style:none}:where(button,input,select,textarea)[class*=nk-],[class*=nk-] :where(button,input,select,textarea,option,optgroup,fieldset,legend){margin:0;padding:0}";
9
- const componentsTail = ".nk-body{margin:0;min-height:100vh;font-family:var(--nk-font);font-size:14px;background:var(--nk-bg);color:var(--nk-text);-webkit-font-smoothing:antialiased;transition:background .25s,color .25s}.nk-app{display:flex;height:100vh;overflow:hidden}.nk-sidebar{width:var(--nk-sidebar-width);min-width:var(--nk-sidebar-width);background:var(--nk-bg-sidebar);display:flex;flex-direction:column;border-right:1px solid var(--nk-border);transition:background .25s}.nk-workspace{display:flex;align-items:center;gap:8px;padding:10px 12px;margin:6px 8px 2px;border-radius:var(--nk-radius);cursor:pointer;font-weight:500;user-select:none}.nk-workspace:hover{background:var(--nk-bg-hover)}.nk-workspace .avatar,.nk-workspace ::slotted(.avatar),.nk-workspace ::slotted([slot=avatar]){width:22px;height:22px;border-radius:4px;background:linear-gradient(135deg,var(--nk-decor-purple),var(--nk-decor-blue));color:var(--nk-on-accent);font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center}.nk-workspace .chev{margin-left:auto;color:var(--nk-text-tertiary);font-size:11px}.nk-sidebar-scroll{flex:1;overflow-y:auto;padding:4px 8px 16px}.nk-sidebar-scroll::-webkit-scrollbar{width:8px}.nk-sidebar-scroll::-webkit-scrollbar-thumb{background:var(--nk-border-strong);border-radius:4px}.nk-section-label{font-size:11px;font-weight:500;letter-spacing:.02em;color:var(--nk-text-tertiary);padding:14px 10px 4px;display:flex;justify-content:space-between;align-items:center}.nk-section-label .plus{cursor:pointer;border-radius:4px;padding:0 4px;font-size:13px;opacity:0;transition:opacity .15s}.nk-section-label:hover .plus{opacity:1}.nk-section-label .plus:hover{background:var(--nk-bg-hover)}.nk-sidebar-footer{padding:8px;border-top:1px solid var(--nk-border);color:var(--nk-text-secondary);font-size:13px}.nk-sidebar-footer .nk-tree-item{min-height:26px}.nk-main{flex:1;display:flex;flex-direction:column;min-width:0}.nk-topbar{height:45px;display:flex;align-items:center;padding:0 12px;gap:8px;flex-shrink:0}.nk-breadcrumb{display:flex;align-items:center;gap:4px;font-size:14px}.nk-breadcrumb .crumb,.nk-breadcrumb ::slotted(.crumb){padding:2px 6px;border-radius:4px;cursor:pointer;color:var(--nk-text-secondary);display:flex;align-items:center;gap:5px}.nk-breadcrumb .crumb:hover{background:var(--nk-bg-hover)}a.crumb{text-decoration:none}.nk-breadcrumb .crumb.current,.nk-breadcrumb ::slotted(.crumb.current){color:var(--nk-text)}.nk-breadcrumb .sep{color:var(--nk-text-tertiary);font-size:12px}.nk-topbar-actions{margin-left:auto;display:flex;align-items:center;gap:4px}.nk-topbar-btn{padding:4px 8px;border-radius:var(--nk-radius);cursor:pointer;color:var(--nk-text-secondary);font-size:14px;user-select:none;border:none;background:0 0;font-family:inherit}.nk-topbar-btn:hover{background:var(--nk-bg-hover)}.nk-topbar-btn ::slotted(svg),.nk-topbar-btn svg{width:16px;height:16px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.nk-share-btn{border:1px solid var(--nk-border-strong);font-size:13px;padding:3px 10px}.nk-theme-toggle{font-size:15px;width:30px;height:28px;padding:0}.nk-tree-item{display:flex;align-items:center;gap:6px;padding:3px 8px 3px 10px;border-radius:var(--nk-radius);cursor:pointer;user-select:none;color:var(--nk-text-secondary);position:relative;min-height:28px}.nk-tree-item:hover{background:var(--nk-bg-hover)}.nk-tree-item.active{background:var(--nk-bg-active);color:var(--nk-text);font-weight:500}.nk-tree-item.compact{min-height:26px}.nk-tree-item .icon,.nk-tree-item ::slotted(.icon),.nk-tree-item ::slotted([slot=icon]){font-size:15px;width:20px;text-align:center;flex-shrink:0}.nk-tree-item .label,.nk-tree-item ::slotted(.label){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nk-tree-item .actions{margin-left:auto;display:none;gap:2px;color:var(--nk-text-tertiary)}.nk-tree-item:hover .actions{display:flex}.nk-tree-item .actions span{padding:0 3px;border-radius:3px;font-size:12px}.nk-tree-item .actions span:hover{background:var(--nk-bg-active)}.nk-tree-children{margin-left:14px;border-left:1px solid var(--nk-border);padding-left:4px;overflow:hidden}.nk-tree-children.collapsed{display:none}.nk-toggle-arrow{width:16px;height:16px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;font-size:9px;color:var(--nk-text-tertiary);border-radius:3px;transition:transform .15s}.nk-toggle-arrow.open{transform:rotate(90deg)}.nk-kbd-hint{margin-left:auto;display:flex;gap:3px;align-items:center}.nk-kbd{font-family:inherit;font-size:10.5px;background:var(--nk-bg-callout);border:1px solid var(--nk-border-strong);border-bottom-width:2px;border-radius:4px;padding:0 4px}.nk-page-scroll{flex:1;overflow-y:auto}.nk-page-scroll::-webkit-scrollbar{width:10px}.nk-page-scroll::-webkit-scrollbar-thumb{background:var(--nk-border-strong);border-radius:5px;border:2px solid var(--nk-bg)}.nk-cover{height:200px;background:radial-gradient(ellipse at 20% 40%,color-mix(in srgb,var(--nk-decor-purple) 35%,transparent),transparent 55%),radial-gradient(ellipse at 80% 20%,color-mix(in srgb,var(--nk-decor-blue) 35%,transparent),transparent 55%),radial-gradient(ellipse at 60% 90%,color-mix(in srgb,var(--nk-decor-orange) 25%,transparent),transparent 55%),var(--nk-bg-callout)}.nk-page{max-width:760px;margin:0 auto;padding:0 64px 120px}.nk-page ::slotted(.nk-page-icon),.nk-page ::slotted([slot=icon]),.nk-page-icon{font-size:64px;line-height:1;margin-top:-42px;cursor:pointer;user-select:none;display:inline-block}.nk-page-title{font-size:40px;font-weight:700;margin:8px 0 4px;outline:0;letter-spacing:-.01em}.nk-page-meta{color:var(--nk-text-tertiary);font-size:13px;margin-bottom:24px;display:flex;gap:16px}.nk-page p.lead{font-size:16px;line-height:1.6;color:var(--nk-text-secondary);margin-bottom:20px}.nk-page ::slotted(p.lead){font-size:16px;line-height:1.6;color:var(--nk-text-secondary);margin-bottom:20px!important}.nk-heading{font-size:22px;font-weight:600;margin:32px 0 10px;display:flex;align-items:center;gap:8px}.nk-callout{display:flex;gap:10px;align-items:flex-start;background:var(--nk-bg-callout);border-radius:var(--nk-radius);padding:14px 16px;margin:16px 0;line-height:1.55;font-size:14.5px}.nk-callout .c-icon,.nk-callout ::slotted(.c-icon),.nk-callout ::slotted([slot=icon]){font-size:17px}.nk-todo{display:flex;align-items:flex-start;gap:8px;padding:4px 0}.nk-todo input[type=checkbox]{appearance:none;width:16px;height:16px;margin-top:3px;border:1.4px solid var(--nk-border-strong);border-radius:2px;cursor:pointer;flex-shrink:0;position:relative;background:var(--nk-bg)}.nk-todo input[type=checkbox]:checked{background:var(--nk-accent);border-color:var(--nk-accent)}.nk-todo input[type=checkbox]:checked::after{content:\"✓\";color:var(--nk-on-accent);font-size:11px;position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.nk-todo input:checked+span{text-decoration:line-through;color:var(--nk-text-tertiary)}.nk-todo input:disabled{opacity:.5;cursor:not-allowed}.nk-toggle{margin:6px 0}.nk-toggle summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:6px;padding:4px 6px;border-radius:var(--nk-radius);font-weight:500;user-select:none}.nk-toggle summary::-webkit-details-marker{display:none}.nk-toggle summary:hover{background:var(--nk-bg-hover)}.nk-toggle summary::before{content:\"▸\";color:var(--nk-text-tertiary);font-size:11px;transition:transform .15s;display:inline-block}.nk-toggle[open] summary::before{transform:rotate(90deg)}.nk-toggle .toggle-body,.nk-toggle ::slotted(.toggle-body){padding:4px 0 8px 26px;color:var(--nk-text-secondary);line-height:1.55}.nk-divider{border:none;border-top:1px solid var(--nk-border);margin:24px 0}.nk-quote{border-left:3px solid var(--nk-text);padding:2px 0 2px 14px;margin:16px 0;color:var(--nk-text-secondary);font-size:14.5px;line-height:1.55}.nk-quote .q-cite{display:block;margin-top:6px;font-size:12.5px;color:var(--nk-text-tertiary)}.nk-mention{display:inline-flex;align-items:center;gap:4px;padding:0 4px;border-radius:4px;font-weight:500;cursor:pointer;white-space:nowrap}.nk-mention:hover{background:var(--nk-bg-hover)}.nk-mention.person{color:var(--nk-text)}.nk-mention.person .mini-avatar,.nk-mention.person ::slotted(.mini-avatar),.nk-mention.person ::slotted([slot=avatar]){width:16px;height:16px;border-radius:50%;color:var(--nk-on-accent);font-size:8.5px;font-weight:600;display:inline-flex;align-items:center;justify-content:center}.nk-mention.page{color:var(--nk-text-secondary);text-decoration:underline;text-decoration-color:var(--nk-border-strong);text-underline-offset:2px}.nk-mention.date{color:var(--nk-tag-orange-text)}.nk-inline-code{font-family:var(--nk-font-mono);font-size:85%;color:var(--nk-danger);background:color-mix(in srgb,var(--nk-danger) 8%,transparent);border-radius:4px;padding:1px 5px}.nk-code{background:var(--nk-bg-code);border:1px solid var(--nk-border);border-radius:var(--nk-radius);padding:20px 24px;font-family:var(--nk-font-mono);font-size:13px;line-height:1.6;margin:14px 0;overflow-x:auto;color:var(--nk-text-secondary);white-space:pre;position:relative}.nk-code .lang{position:absolute;top:6px;right:10px;font-size:11px;color:var(--nk-text-tertiary);font-family:var(--nk-font)}.nk-code .tag,.nk-code ::slotted(.tag){color:var(--nk-accent)}.nk-code .attr,.nk-code ::slotted(.attr){color:var(--nk-tag-orange-text)}.nk-database{margin:12px 0 8px}.nk-db-tabs{display:flex;gap:2px;border-bottom:1px solid var(--nk-border);margin-bottom:0;font-size:13.5px}.nk-db-tab{padding:6px 10px;cursor:pointer;color:var(--nk-text-secondary);border-bottom:2px solid transparent;margin-bottom:-1px;user-select:none;display:flex;align-items:center;gap:6px}.nk-db-tab:hover{color:var(--nk-text)}.nk-db-tab.active{color:var(--nk-text);border-bottom-color:var(--nk-text);font-weight:500}.nk-db-tab .badge,.nk-db-tab ::slotted(.badge){background:var(--nk-bg-callout);border-radius:8px;font-size:11px;padding:0 6px;color:var(--nk-text-tertiary)}.nk-table-wrap{overflow-x:auto}.nk-table{width:100%;border-collapse:collapse;font-size:14px}.nk-table th{text-align:left;font-weight:400;color:var(--nk-text-tertiary);padding:8px 10px;border-bottom:1px solid var(--nk-border);font-size:13px;white-space:nowrap;user-select:none;cursor:pointer}.nk-table th:hover{background:var(--nk-bg-hover)}.nk-table th .th-icon,.nk-table th ::slotted(.th-icon){margin-right:5px;font-size:12px}.nk-table td{padding:7px 10px;border-bottom:1px solid var(--nk-border);white-space:nowrap;vertical-align:middle}.nk-table tbody tr:hover{background:var(--nk-bg-hover)}.nk-table .row-title{display:flex;align-items:center;gap:7px;font-weight:500;cursor:pointer}.nk-table .row-title:hover{text-decoration:underline;text-decoration-color:var(--nk-text-tertiary)}.nk-table .date-cell{color:var(--nk-text-secondary)}.nk-table .person-cell{display:flex;align-items:center;gap:6px;color:var(--nk-text-secondary)}.nk-table .person-cell .mini-avatar,.nk-table .person-cell ::slotted(.mini-avatar){width:20px;height:20px;border-radius:50%;font-size:10px;color:var(--nk-on-accent);display:inline-flex;align-items:center;justify-content:center;font-weight:600}.nk-new-row,.nk-table .new-row{color:var(--nk-text-tertiary);cursor:pointer;padding:8px 10px;display:flex;align-items:center;gap:7px;font-size:14px}.nk-new-row:hover,.nk-table .new-row:hover{background:var(--nk-bg-hover)}.nk-tag{display:inline-block;padding:1px 8px;border-radius:10px;font-size:12.5px;font-weight:450;line-height:1.6}.nk-tag.blue{background:var(--nk-tag-blue-bg);color:var(--nk-tag-blue-text)}.nk-tag.green{background:var(--nk-tag-green-bg);color:var(--nk-tag-green-text)}.nk-tag.orange{background:var(--nk-tag-orange-bg);color:var(--nk-tag-orange-text)}.nk-tag.purple{background:var(--nk-tag-purple-bg);color:var(--nk-tag-purple-text)}.nk-progress{width:110px;height:6px;border-radius:3px;background:var(--nk-tag-blue-bg);overflow:hidden;display:inline-block}.nk-progress>i{display:block;height:100%;background:var(--nk-tag-blue-text);border-radius:3px}.nk-progress-label{font-size:12px;color:var(--nk-text-tertiary);margin-left:7px}.nk-board{display:none;gap:12px;padding:14px 2px;overflow-x:auto}.nk-board.active{display:flex}.nk-board-col{min-width:220px;width:220px;flex-shrink:0}.nk-board-col-header{display:flex;align-items:center;gap:7px;margin-bottom:8px;font-size:13.5px;font-weight:500}.nk-board-col-header .count{color:var(--nk-text-tertiary);font-weight:400}.nk-card{background:var(--nk-bg-card);border:1px solid var(--nk-border);border-radius:8px;padding:10px 12px;margin-bottom:8px;cursor:grab;box-shadow:var(--nk-shadow-card);transition:border-color .15s}.nk-card:hover{border-color:var(--nk-border-strong)}.nk-card .card-title,.nk-card ::slotted(.card-title){font-weight:500;margin-bottom:7px;display:flex;gap:6px;align-items:center}.nk-card .card-meta,.nk-card ::slotted(.card-meta){display:flex;gap:6px;flex-wrap:wrap;align-items:center;font-size:12px;color:var(--nk-text-tertiary)}.nk-field{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:9px 0}.nk-field .f-label,.nk-field ::slotted(.f-label),.nk-field ::slotted([slot=label]){font-size:14px}.nk-field .f-desc,.nk-field ::slotted(.f-desc),.nk-field ::slotted([slot=desc]){font-size:12.5px;color:var(--nk-text-tertiary);margin-top:2px;line-height:1.45}.nk-field .f-control,.nk-field ::slotted(.f-control){flex-shrink:0}.nk-input,.nk-select,.nk-textarea{font-family:inherit;font-size:13.5px;color:var(--nk-text);background:var(--nk-bg);border:1px solid var(--nk-border-strong);border-radius:var(--nk-radius);padding:5px 10px;outline:0;transition:border-color .15s,box-shadow .15s;min-width:210px}.nk-input:focus,.nk-select:focus,.nk-textarea:focus{border-color:var(--nk-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--nk-accent) 25%,transparent)}.nk-input::placeholder,.nk-textarea::placeholder{color:var(--nk-text-tertiary)}.nk-input.wide,.nk-textarea.wide{width:100%}.nk-select.compact{min-width:120px}.nk-textarea{resize:vertical;min-height:70px;line-height:1.5}.nk-select{appearance:none;cursor:pointer;padding-right:26px;background-image:linear-gradient(45deg,transparent 50%,var(--nk-text-tertiary) 50%),linear-gradient(135deg,var(--nk-text-tertiary) 50%,transparent 50%);background-position:calc(100% - 14px) 55%,calc(100% - 10px) 55%;background-size:4px 4px;background-repeat:no-repeat}.nk-btn{font-family:inherit;font-size:13.5px;font-weight:500;border-radius:var(--nk-radius);cursor:pointer;padding:5px 12px;border:1px solid transparent;transition:background .15s,border-color .15s,opacity .15s;display:inline-flex;align-items:center;gap:6px}.nk-btn ::slotted(svg),.nk-btn svg{width:15px;height:15px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.nk-btn.primary{background:var(--nk-accent);color:var(--nk-on-accent)}.nk-btn.primary:hover{opacity:.88}.nk-btn.secondary{background:0 0;color:var(--nk-text);border-color:var(--nk-border-strong)}.nk-btn.secondary:hover{background:var(--nk-bg-hover)}.nk-btn.danger{background:0 0;color:var(--nk-danger);border-color:var(--nk-border-strong)}.nk-btn.danger:hover{background:color-mix(in srgb,var(--nk-danger) 8%,transparent)}.nk-btn.danger-solid{background:var(--nk-danger);color:var(--nk-on-accent)}.nk-btn.danger-solid:hover{opacity:.88}.nk-btn.small{padding:3px 9px;font-size:12.5px}a.nk-btn{text-decoration:none}.nk-btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.nk-switch{position:relative;width:34px;height:20px;flex-shrink:0;appearance:none;border:none;cursor:pointer;border-radius:20px;background:var(--nk-border-strong);transition:background .2s}.nk-switch::after{content:\"\";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--nk-on-accent);transition:transform .2s;box-shadow:var(--nk-shadow-knob)}.nk-switch:checked,.nk-switch[aria-checked=true]{background:var(--nk-accent)}.nk-switch:checked::after,.nk-switch[aria-checked=true]::after{transform:translateX(14px)}.nk-switch:disabled{opacity:.5;cursor:not-allowed}.nk-check{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:14px;cursor:pointer}.nk-check input{appearance:none;width:16px;height:16px;flex-shrink:0;border:1.4px solid var(--nk-border-strong);border-radius:3px;cursor:pointer;position:relative;background:var(--nk-bg)}.nk-check input[type=radio]{border-radius:50%}.nk-check input:checked{background:var(--nk-accent);border-color:var(--nk-accent)}.nk-check input:checked::after{content:\"✓\";color:var(--nk-on-accent);font-size:10.5px;position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.nk-check input[type=radio]:checked::after{content:\"●\";font-size:7px}.nk-check input:disabled{opacity:.5;cursor:not-allowed}.nk-check input:disabled+*{opacity:.6}.nk-slider{width:210px;accent-color:var(--nk-accent);cursor:pointer}.nk-slider-value{font-size:12.5px;color:var(--nk-text-tertiary);margin-top:3px}.nk-profile-row{display:flex;align-items:center;gap:14px;padding:8px 0}.nk-profile-row .big-avatar,.nk-profile-row ::slotted(.big-avatar),.nk-profile-row ::slotted([slot=avatar]){width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--nk-decor-purple),var(--nk-decor-blue));color:var(--nk-on-accent);font-size:20px;font-weight:600;display:flex;align-items:center;justify-content:center}.nk-model-card{border:1px solid var(--nk-border-strong);border-radius:8px;padding:12px 14px;margin-bottom:10px;cursor:pointer;display:flex;align-items:flex-start;gap:11px;transition:border-color .15s,background .15s}.nk-model-card:hover{background:var(--nk-bg-hover)}.nk-model-card.selected{border-color:var(--nk-accent);background:color-mix(in srgb,var(--nk-accent) 6%,transparent)}.nk-model-card .m-radio{width:15px;height:15px;border-radius:50%;flex-shrink:0;margin-top:2px;border:1.4px solid var(--nk-border-strong);position:relative}.nk-model-card.selected .m-radio{border-color:var(--nk-accent)}.nk-model-card.selected .m-radio::after{content:\"\";position:absolute;inset:3px;border-radius:50%;background:var(--nk-accent)}.nk-model-card .m-name,.nk-model-card ::slotted(.m-name),.nk-model-card ::slotted([slot=title]){font-weight:500;font-size:14px;display:flex;align-items:center;gap:7px}.nk-model-card .m-desc,.nk-model-card ::slotted(.m-desc),.nk-model-card ::slotted([slot=desc]){font-size:12.5px;color:var(--nk-text-tertiary);margin-top:2px;line-height:1.45}.nk-danger-zone{border:1px solid color-mix(in srgb,var(--nk-danger) 40%,transparent);border-radius:8px;padding:14px 16px;margin-top:26px}.nk-danger-zone .dz-title{color:var(--nk-danger);font-weight:600;font-size:13px;margin-bottom:8px}.nk-member-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--nk-border)}.nk-member-list ::slotted(.nk-member-row:last-child),.nk-member-list>.nk-member-row:last-child,.nk-member-row.last{border-bottom:none}.nk-member-row .mini-avatar,.nk-member-row ::slotted(.mini-avatar),.nk-member-row ::slotted([slot=avatar]){width:28px;height:28px;border-radius:50%;color:var(--nk-on-accent);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;flex-shrink:0}.nk-member-row .m-mail{font-size:12px;color:var(--nk-text-tertiary)}.nk-member-row .nk-select{min-width:120px;margin-left:auto}.nk-member-row ::slotted([slot=role]){margin-left:auto}.nk-modal-backdrop{position:fixed;inset:0;background:var(--nk-scrim);display:flex;align-items:center;justify-content:center;z-index:100;opacity:0;pointer-events:none;transition:opacity .2s}.nk-modal-backdrop.open{opacity:1;pointer-events:auto}.nk-modal{width:min(960px,92vw);height:min(640px,86vh);background:var(--nk-bg);border-radius:10px;box-shadow:var(--nk-shadow-menu);display:flex;overflow:hidden;transform:scale(.98) translateY(6px);transition:transform .2s}.nk-modal-backdrop.open .nk-modal{transform:scale(1) translateY(0)}.nk-settings-nav{width:230px;min-width:230px;background:var(--nk-bg-sidebar);border-right:1px solid var(--nk-border);padding:10px 8px;overflow-y:auto;flex-shrink:0}.nk-settings-user{display:flex;align-items:center;gap:9px;padding:6px 10px 12px;margin-bottom:4px}.nk-settings-user .avatar,.nk-settings-user ::slotted(.avatar),.nk-settings-user ::slotted([slot=avatar]){width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--nk-decor-purple),var(--nk-decor-blue));color:var(--nk-on-accent);font-weight:600;font-size:13px;display:flex;align-items:center;justify-content:center}.nk-settings-user .name{font-weight:500;font-size:13.5px}.nk-settings-user .mail{font-size:11.5px;color:var(--nk-text-tertiary)}.nk-settings-nav .nk-tree-item{min-height:27px}.nk-settings-nav .nk-tree-item.active{background:var(--nk-bg-active);color:var(--nk-text);font-weight:500}.nk-settings-content{flex:1;overflow-y:auto;padding:36px 48px 80px;min-width:0}.nk-settings-content::-webkit-scrollbar{width:10px}.nk-settings-content::-webkit-scrollbar-thumb{background:var(--nk-border-strong);border-radius:5px;border:2px solid var(--nk-bg)}.nk-settings-pane{display:none;max-width:520px}.nk-settings-pane.active{display:block}.nk-settings-pane>h2{font-size:16px;font-weight:600;padding-bottom:12px;border-bottom:1px solid var(--nk-border);margin-bottom:20px}.nk-settings-pane>h3{font-size:13px;font-weight:600;margin:26px 0 10px}.nk-settings-pane ::slotted(h2){font-size:16px;font-weight:600;border:0;border-bottom:1px solid var(--nk-border);padding:0 0 12px!important;margin:0 0 20px!important}.nk-settings-pane ::slotted(h3){font-size:13px;font-weight:600;padding:0!important;margin:26px 0 10px!important}.nk-pop{background:var(--nk-bg);border-radius:10px;box-shadow:var(--nk-shadow-menu);padding:10px;width:296px}.nk-emoji-search{width:100%;font-family:inherit;font-size:13px;color:var(--nk-text);background:var(--nk-bg-callout);border:none;border-radius:var(--nk-radius);padding:6px 10px;outline:0;margin-bottom:8px}.nk-emoji-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:2px}.nk-emoji-grid ::slotted(span),.nk-emoji-grid span{font-size:18px;text-align:center;padding:4px 0;border-radius:5px;cursor:pointer;user-select:none}.nk-emoji-grid span:hover{background:var(--nk-bg-hover)}.nk-emoji-cats{display:flex;gap:2px;margin-top:8px;padding-top:8px;border-top:1px solid var(--nk-border)}.nk-emoji-cats span{font-size:14px;padding:3px 7px;border-radius:5px;cursor:pointer;color:var(--nk-text-tertiary);filter:grayscale(1);opacity:.6}.nk-emoji-cats span.active,.nk-emoji-cats span:hover{filter:none;opacity:1;background:var(--nk-bg-hover)}.nk-menu{padding:5px;width:230px}.nk-menu-item{display:flex;align-items:center;gap:9px;padding:5px 9px;border-radius:5px;cursor:pointer;font-size:13.5px;user-select:none}.nk-menu-item:hover{background:var(--nk-bg-hover)}.nk-menu-item .m-icon,.nk-menu-item ::slotted(.m-icon),.nk-menu-item ::slotted([slot=icon]){width:17px;text-align:center;font-size:14px}.nk-menu-item .m-shortcut,.nk-menu-item ::slotted(.m-shortcut){margin-left:auto;font-size:11.5px;color:var(--nk-text-tertiary)}.nk-menu-item.danger{color:var(--nk-danger)}.nk-menu-sep{border-top:1px solid var(--nk-border);margin:5px 4px}.nk-menu-label{font-size:11px;color:var(--nk-text-tertiary);padding:5px 9px 2px}.nk-cmdk-backdrop{position:fixed;inset:0;background:var(--nk-scrim-soft);display:flex;justify-content:center;align-items:flex-start;padding-top:14vh;z-index:110;opacity:0;pointer-events:none;transition:opacity .18s}.nk-cmdk-backdrop.open{opacity:1;pointer-events:auto}.nk-cmdk{width:min(560px,92vw);background:var(--nk-bg);border-radius:12px;box-shadow:var(--nk-shadow-menu);overflow:hidden;transform:scale(.98);transition:transform .18s}.nk-cmdk-backdrop.open .nk-cmdk{transform:scale(1)}.nk-cmdk-input-row{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--nk-border)}.nk-cmdk-input-row input{flex:1;border:none;outline:0;background:0 0;font-family:inherit;font-size:16px;color:var(--nk-text)}.nk-cmdk-input-row input::placeholder{color:var(--nk-text-tertiary)}.nk-cmdk-list{max-height:320px;overflow-y:auto;padding:6px}.nk-cmdk-group{font-size:11px;color:var(--nk-text-tertiary);padding:8px 10px 3px}.nk-cmdk-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:6px;cursor:pointer;font-size:14px;user-select:none}.nk-cmdk-item.selected{background:var(--nk-bg-active)}.nk-cmdk-item .m-icon,.nk-cmdk-item ::slotted(.m-icon),.nk-cmdk-item ::slotted([slot=icon]){width:17px;text-align:center;font-size:14px}.nk-cmdk-item .m-shortcut,.nk-cmdk-item ::slotted(.m-shortcut){margin-left:auto;font-size:11.5px;color:var(--nk-text-tertiary)}.nk-cmdk-empty{padding:30px;text-align:center;color:var(--nk-text-tertiary);font-size:13.5px}.nk-cmdk-footer{display:flex;gap:14px;padding:8px 16px;border-top:1px solid var(--nk-border);font-size:11.5px;color:var(--nk-text-tertiary)}.nk-toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--nk-text);color:var(--nk-bg);padding:8px 16px;border-radius:8px;font-size:13.5px;opacity:0;transition:.3s;pointer-events:none;box-shadow:var(--nk-shadow-menu);display:flex;gap:8px;align-items:center}.nk-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}.nk-gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:20px 32px;margin:12px 0}.nk-g-item>h4{font-size:12px;font-weight:500;color:var(--nk-text-tertiary);text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px}.nk-g-item ::slotted(h4){font-size:12px;font-weight:500;color:var(--nk-text-tertiary);text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px!important}.nk-tabs{display:flex;gap:2px;border-bottom:1px solid var(--nk-border);font-size:14px}.nk-tab{padding:7px 11px;cursor:pointer;color:var(--nk-text-secondary);border-bottom:2px solid transparent;margin-bottom:-1px;user-select:none}.nk-tab:hover{color:var(--nk-text)}.nk-tab.active{color:var(--nk-text);border-bottom-color:var(--nk-text);font-weight:500}.nk-tab-panel{padding:12px 2px;color:var(--nk-text-secondary);line-height:1.55;font-size:14px}.nk-template-btn{display:flex;align-items:center;gap:8px;width:100%;font-family:inherit;font-size:14px;color:var(--nk-text-secondary);background:var(--nk-bg-callout);border:none;border-radius:var(--nk-radius);padding:8px 12px;cursor:pointer;margin-bottom:6px;text-align:left}.nk-template-btn:hover{background:var(--nk-bg-hover)}.nk-stats{display:flex;gap:10px}.nk-stat{flex:1;border:1px solid var(--nk-border);border-radius:8px;padding:12px 14px}.nk-stat .s-label,.nk-stat ::slotted(.s-label),.nk-stat ::slotted([slot=label]){font-size:12px;color:var(--nk-text-tertiary);margin-bottom:4px}.nk-stat .s-value,.nk-stat ::slotted(.s-value),.nk-stat ::slotted([slot=value]){font-size:22px;font-weight:600;letter-spacing:-.01em}.nk-stat .s-delta,.nk-stat ::slotted(.s-delta),.nk-stat ::slotted([slot=delta]){font-size:11.5px;margin-top:3px}.nk-stat .s-delta.up,.nk-stat ::slotted(.s-delta.up),.nk-stat ::slotted([slot=delta].up){color:var(--nk-tag-green-text)}.nk-stat .s-delta.down,.nk-stat ::slotted(.s-delta.down),.nk-stat ::slotted([slot=delta].down){color:var(--nk-danger)}.nk-synced{border:1.5px solid color-mix(in srgb,var(--nk-danger) 55%,transparent);border-radius:8px;padding:12px 14px;position:relative;margin:8px 0}.nk-synced .synced-badge{position:absolute;top:-9px;right:10px;font-size:11px;background:var(--nk-danger);color:var(--nk-on-accent);border-radius:8px;padding:1px 8px}.nk-segmented{display:inline-flex;background:var(--nk-bg-callout);border-radius:7px;padding:2px}.nk-segmented button{font-family:inherit;font-size:13px;border:none;background:0 0;color:var(--nk-text-secondary);padding:4px 12px;border-radius:5px;cursor:pointer}.nk-segmented ::slotted(button){font-family:inherit;font-size:13px;border:none;background:0 0;color:var(--nk-text-secondary);padding:4px 12px!important;border-radius:5px;cursor:pointer}.nk-segmented ::slotted(button.active),.nk-segmented button.active{background:var(--nk-bg);color:var(--nk-text);font-weight:500;box-shadow:var(--nk-shadow-segment)}.nk-banner{display:flex;align-items:center;gap:10px;font-size:13.5px;border-radius:8px;padding:9px 14px;margin-bottom:8px}.nk-banner.info{background:var(--nk-tag-blue-bg);color:var(--nk-tag-blue-text)}.nk-banner.success{background:var(--nk-tag-green-bg);color:var(--nk-tag-green-text)}.nk-banner.warning{background:var(--nk-tag-orange-bg);color:var(--nk-tag-orange-text)}.nk-banner .b-action,.nk-banner ::slotted(.b-action),.nk-banner ::slotted([slot=action]){margin-left:auto;font-weight:500;cursor:pointer;text-decoration:underline;text-underline-offset:2px}.nk-avatar-group{display:flex}.nk-avatar-group .mini-avatar,.nk-avatar-group ::slotted(.mini-avatar){width:26px;height:26px;border-radius:50%;color:var(--nk-on-accent);font-size:10.5px;font-weight:600;border:2px solid var(--nk-bg);display:flex;align-items:center;justify-content:center;margin-left:-7px}.nk-avatar-group .mini-avatar:first-child,.nk-avatar-group ::slotted(.mini-avatar:first-child){margin-left:0}.nk-avatar-group .more,.nk-avatar-group ::slotted(.more){background:var(--nk-bg-callout);color:var(--nk-text-secondary)}.nk-skeleton{border-radius:5px;margin-bottom:10px;background:linear-gradient(90deg,var(--nk-bg-callout) 25%,var(--nk-bg-hover) 50%,var(--nk-bg-callout) 75%);background-size:200% 100%;animation:1.6s infinite nk-shimmer}@keyframes nk-shimmer{to{background-position:-200% 0}}.nk-empty{text-align:center;padding:36px 20px;border:1.5px dashed var(--nk-border-strong);border-radius:10px;color:var(--nk-text-tertiary)}.nk-empty .e-icon,.nk-empty ::slotted(.e-icon),.nk-empty ::slotted([slot=icon]){font-size:30px;margin-bottom:8px}.nk-empty .e-title,.nk-empty ::slotted(.e-title),.nk-empty ::slotted([slot=title]){font-weight:500;color:var(--nk-text-secondary);margin-bottom:3px;font-size:14px}.nk-empty .e-desc,.nk-empty ::slotted(.e-desc),.nk-empty ::slotted([slot=desc]){font-size:12.5px;margin-bottom:12px}.nk-comments{border-left:1px solid var(--nk-border);padding:4px 0 4px 18px;margin:8px 0 8px 8px}.nk-comment{display:flex;gap:9px;margin-bottom:14px}.nk-comment .mini-avatar,.nk-comment ::slotted(.mini-avatar),.nk-comment ::slotted([slot=avatar]){width:24px;height:24px;border-radius:50%;color:var(--nk-on-accent);flex-shrink:0;font-size:10px;font-weight:600;display:flex;align-items:center;justify-content:center}.nk-comment .c-head,.nk-comment ::slotted(.c-head){font-size:12.5px;color:var(--nk-text-tertiary);margin-bottom:2px}.nk-comment .c-head b{color:var(--nk-text);font-weight:600}.nk-comment .c-body,.nk-comment ::slotted(.c-body){font-size:13.5px;line-height:1.5}.nk-comment-input{display:flex;gap:8px;align-items:center;margin-top:4px}.nk-comment-input input{min-width:0;flex:1}.nk-ai-thread{display:flex;flex-direction:column;gap:14px}.nk-ai-msg{display:flex;gap:9px}.nk-ai-msg .mini-avatar,.nk-ai-msg ::slotted(.mini-avatar),.nk-ai-msg ::slotted([slot=avatar]){width:24px;height:24px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:12px;background:var(--nk-bg-callout)}.nk-ai-msg.user .mini-avatar,.nk-ai-msg.user ::slotted(.mini-avatar),.nk-ai-msg.user ::slotted([slot=avatar]){background:linear-gradient(135deg,var(--nk-decor-purple),var(--nk-decor-blue));color:var(--nk-on-accent);font-size:9.5px;font-weight:600}.nk-ai-msg .a-body,.nk-ai-msg ::slotted(.a-body){font-size:14px;line-height:1.55;padding-top:2px}.nk-ai-msg .a-name,.nk-ai-msg ::slotted(.a-name){font-size:12px;font-weight:600;margin-bottom:2px}.nk-ai-msg .a-name span{color:var(--nk-text-tertiary);font-weight:400}.nk-ai-actions{display:flex;gap:4px;margin-top:6px}.nk-ai-actions button{font-family:inherit;font-size:11.5px;color:var(--nk-text-tertiary);background:0 0;border:1px solid var(--nk-border);border-radius:5px;padding:2px 8px;cursor:pointer}.nk-ai-actions ::slotted(button){font-family:inherit;font-size:11.5px;color:var(--nk-text-tertiary);background:0 0;border:1px solid var(--nk-border);border-radius:5px;padding:2px 8px!important;cursor:pointer}.nk-ai-actions ::slotted(button:hover),.nk-ai-actions button:hover{background:var(--nk-bg-hover);color:var(--nk-text)}.nk-ai-input-row{display:flex;align-items:center;gap:8px;margin-top:14px;border:1px solid var(--nk-border-strong);border-radius:10px;padding:8px 12px}.nk-ai-input-row:focus-within{border-color:var(--nk-accent)}.nk-ai-input-row input{flex:1;border:none;outline:0;background:0 0;font-family:inherit;font-size:14px;color:var(--nk-text);min-width:0}.nk-ai-input-row input::placeholder{color:var(--nk-text-tertiary)}.nk-ai-send{border:none;background:var(--nk-accent);color:var(--nk-on-accent);border-radius:6px;width:26px;height:26px;cursor:pointer;font-size:13px;flex-shrink:0}.nk-block-host{position:relative;border-radius:var(--nk-radius);margin:8px 0;padding:2px 0 2px 2px;transition:background .15s,box-shadow .15s}.nk-block-host:hover{background:var(--nk-bg-hover)}.nk-block-host:focus-within{background:0 0;box-shadow:0 0 0 2px color-mix(in srgb,var(--nk-accent) 25%,transparent)}.nk-block-host.nk-drop-target{box-shadow:0 -2px 0 0 var(--nk-accent);background:0 0}.nk-block-host .nk-block-handle,.nk-block-host ::slotted(.nk-block-handle){position:absolute;left:-26px;top:4px;width:18px;height:20px;border-radius:4px;display:flex;align-items:center;justify-content:center;color:var(--nk-text-tertiary);font-size:13px;cursor:grab;opacity:0;transition:opacity .15s;user-select:none}.nk-block-host:hover .nk-block-handle{opacity:1}.nk-block-host .nk-block-actions{position:absolute;display:flex;gap:1px;z-index:2;opacity:0;transition:opacity .15s;pointer-events:none}.nk-block-host .nk-block-actions.show{opacity:1;pointer-events:auto}.nk-block-host .nk-block-actions ::slotted(button),.nk-block-host .nk-block-actions button{width:20px;height:22px;padding:0;border:none;border-radius:4px;background:0 0;color:var(--nk-text-tertiary);font-family:inherit;font-size:14px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}.nk-block-host .nk-block-actions button:hover{background:var(--nk-bg-hover);color:var(--nk-text)}.nk-block-host .nk-block-actions .drag{cursor:grab}.nk-block-host .nk-block-actions .drag:active{cursor:grabbing}.nk-block-host .ProseMirror{outline:0;font-family:var(--nk-font);font-size:14px;line-height:1.6;color:var(--nk-text);min-height:60px;padding:4px 2px}.nk-block-host .ProseMirror>*+*{margin-top:6px}.nk-block-host .ProseMirror h1{font-size:30px;font-weight:600;letter-spacing:-.01em;margin:24px 0 6px}.nk-block-host .ProseMirror h2{font-size:22px;font-weight:600;margin:20px 0 6px}.nk-block-host .ProseMirror h3{font-size:17px;font-weight:600;margin:16px 0 4px}.nk-block-host .ProseMirror p{margin:0}.nk-block-host .ProseMirror ol,.nk-block-host .ProseMirror ul{padding-left:24px;margin:4px 0}.nk-block-host .ProseMirror ul{list-style:disc}.nk-block-host .ProseMirror ol{list-style:decimal}.nk-block-host .ProseMirror li{margin:2px 0}.nk-block-host .ProseMirror li::marker{color:var(--nk-text-tertiary)}.nk-block-host .ProseMirror ul[data-type=taskList]{list-style:none;padding-left:2px}.nk-block-host .ProseMirror ul[data-type=taskList] li{display:flex;gap:8px;align-items:flex-start}.nk-block-host .ProseMirror ul[data-type=taskList] li>label{flex-shrink:0;margin-top:3px;user-select:none}.nk-block-host .ProseMirror ul[data-type=taskList] li>div{flex:1;min-width:0}.nk-block-host .ProseMirror ul[data-type=taskList] input[type=checkbox]{appearance:none;width:16px;height:16px;margin:0;border:1.4px solid var(--nk-border-strong);border-radius:2px;cursor:pointer;position:relative;background:var(--nk-bg);display:block}.nk-block-host .ProseMirror ul[data-type=taskList] input[type=checkbox]:checked{background:var(--nk-accent);border-color:var(--nk-accent)}.nk-block-host .ProseMirror ul[data-type=taskList] input[type=checkbox]:checked::after{content:\"✓\";color:var(--nk-on-accent);font-size:11px;position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.nk-block-host .ProseMirror li[data-checked=true]>div{text-decoration:line-through;color:var(--nk-text-tertiary)}.nk-block-host .ProseMirror-gapcursor::after{border-top-color:var(--nk-text)}.nk-block-host .ProseMirror .ProseMirror-selectednode{background:color-mix(in srgb,var(--nk-accent) 8%,transparent)}.nk-block-host .ProseMirror blockquote{border-left:3px solid var(--nk-text);padding:2px 0 2px 14px;margin:12px 0;color:var(--nk-text-secondary)}.nk-block-host .ProseMirror code{font-family:var(--nk-font-mono);font-size:85%;color:var(--nk-danger);background:color-mix(in srgb,var(--nk-danger) 8%,transparent);border-radius:4px;padding:1px 5px}.nk-block-host .ProseMirror pre{background:var(--nk-bg-code);border:1px solid var(--nk-border);border-radius:var(--nk-radius);padding:16px 20px;margin:12px 0;font-family:var(--nk-font-mono);font-size:13px;line-height:1.6;color:var(--nk-text-secondary);overflow-x:auto}.nk-block-host .ProseMirror pre code{background:0 0;color:inherit;padding:0;font-size:inherit}.nk-block-host .ProseMirror hr{border:none;border-top:1px solid var(--nk-border);margin:20px 0}.nk-block-host .ProseMirror a{color:var(--nk-accent);text-decoration:underline;text-underline-offset:2px}.nk-block-host .ProseMirror-selectednode{box-shadow:0 0 0 2px color-mix(in srgb,var(--nk-accent) 35%,transparent);border-radius:3px}.nk-block-host .ProseMirror ::selection{background:color-mix(in srgb,var(--nk-accent) 25%,transparent)}.nk-block-host .ProseMirror .is-empty::before,.nk-block-host .ProseMirror p.is-editor-empty:first-child::before{content:attr(data-placeholder);color:var(--nk-text-tertiary);float:left;height:0;pointer-events:none}.nk-block-host .bn-container{font-family:var(--nk-font);color:var(--nk-text);background:0 0}.nk-block-host .bn-editor{padding:4px 2px}.nk-block-host .bn-block-content{font-size:14px;line-height:1.6}.nk-block-host .bn-side-menu{color:var(--nk-text-tertiary)}.nk-block-host .bn-drag-handle{border-radius:4px}.nk-block-host .bn-drag-handle:hover{background:var(--nk-bg-hover)}.nk-block-host .novel-editor{font-family:var(--nk-font);color:var(--nk-text)}.nk-block-host .novel-prose{max-width:none}.nk-block-host .bn-suggestion-menu,.nk-block-host .tippy-box,.nk-slash-menu{background:var(--nk-bg);border-radius:10px;box-shadow:var(--nk-shadow-menu);padding:6px;width:280px;max-height:320px;overflow-y:auto;font-family:var(--nk-font);font-size:13.5px;color:var(--nk-text)}.nk-slash-menu-label{font-size:11px;color:var(--nk-text-tertiary);padding:6px 9px 2px}.nk-slash-item{display:flex;align-items:center;gap:10px;padding:6px 9px;border-radius:5px;cursor:pointer;user-select:none}.nk-slash-item.selected,.nk-slash-item:hover{background:var(--nk-bg-hover)}.nk-slash-item .m-icon,.nk-slash-item ::slotted(.m-icon){width:28px;height:28px;flex-shrink:0;border-radius:4px;background:var(--nk-bg-callout);border:1px solid var(--nk-border);display:flex;align-items:center;justify-content:center;font-size:15px}.nk-slash-item .m-desc{font-size:11.5px;color:var(--nk-text-tertiary)}.nk-bubble-menu{display:flex;align-items:center;gap:2px;background:var(--nk-bg);border-radius:8px;box-shadow:var(--nk-shadow-menu);padding:4px}.nk-bubble-menu button{font-family:inherit;font-size:13px;border:none;background:0 0;color:var(--nk-text-secondary);padding:4px 8px;border-radius:5px;cursor:pointer}.nk-bubble-menu ::slotted(button){font-family:inherit;font-size:13px;border:none;background:0 0;color:var(--nk-text-secondary);padding:4px 8px!important;border-radius:5px;cursor:pointer}.nk-bubble-menu ::slotted(button:hover),.nk-bubble-menu button:hover{background:var(--nk-bg-hover);color:var(--nk-text)}.nk-bubble-menu ::slotted(button.active),.nk-bubble-menu button.active{color:var(--nk-accent)}@media (max-width:860px){.nk-sidebar{display:none}.nk-page{padding:0 24px 80px}.nk-settings-nav{width:60px;min-width:60px}.nk-settings-nav .label,.nk-settings-nav .nk-section-label,.nk-settings-user .u-text{display:none}.nk-settings-content{padding:24px}.nk-cmdk-backdrop{padding-top:6vh}.nk-cmdk{width:min(560px,96vw)}.nk-stats{flex-wrap:wrap}}@media (prefers-reduced-motion:reduce){.nk-skeleton{animation:none;background:var(--nk-bg-callout)}[class*=nk-],[class*=nk-]::after,[class*=nk-]::before{animation-duration:NaNs!important;animation-iteration-count:1!important;transition-duration:NaNs!important;scroll-behavior:auto!important}}\n/*# sourceMappingURL=notionkit.min.css.map */";
9
+ const componentsTail = ".nk-body{margin:0;min-height:100vh;font-family:var(--nk-font);font-size:14px;background:var(--nk-bg);color:var(--nk-text);-webkit-font-smoothing:antialiased;transition:background .25s,color .25s}.nk-app{display:flex;height:100vh;overflow:hidden}.nk-sidebar{width:var(--nk-sidebar-width);min-width:var(--nk-sidebar-width);background:var(--nk-bg-sidebar);display:flex;flex-direction:column;border-right:1px solid var(--nk-border);transition:background .25s}.nk-workspace{display:flex;align-items:center;gap:8px;padding:10px 12px;margin:6px 8px 2px;border-radius:var(--nk-radius);cursor:pointer;font-weight:500;user-select:none}.nk-workspace:hover{background:var(--nk-bg-hover)}.nk-workspace .avatar,.nk-workspace ::slotted(.avatar),.nk-workspace ::slotted([slot=avatar]){width:22px;height:22px;border-radius:4px;background:linear-gradient(135deg,var(--nk-decor-purple),var(--nk-decor-blue));color:var(--nk-on-accent);font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center}.nk-workspace .chev{margin-left:auto;color:var(--nk-text-tertiary);font-size:11px}.nk-sidebar-scroll{flex:1;overflow-y:auto;padding:4px 8px 16px}.nk-sidebar-scroll::-webkit-scrollbar{width:8px}.nk-sidebar-scroll::-webkit-scrollbar-thumb{background:var(--nk-border-strong);border-radius:4px}.nk-section-label{font-size:11px;font-weight:500;letter-spacing:.02em;color:var(--nk-text-tertiary);padding:14px 10px 4px;display:flex;justify-content:space-between;align-items:center}.nk-section-label .plus{cursor:pointer;border-radius:4px;padding:0 4px;font-size:13px;opacity:0;transition:opacity .15s}.nk-section-label:hover .plus{opacity:1}.nk-section-label .plus:hover{background:var(--nk-bg-hover)}.nk-sidebar-footer{padding:8px;border-top:1px solid var(--nk-border);color:var(--nk-text-secondary);font-size:13px}.nk-sidebar-footer .nk-tree-item{min-height:26px}.nk-main{flex:1;display:flex;flex-direction:column;min-width:0}.nk-topbar{height:45px;display:flex;align-items:center;padding:0 12px;gap:8px;flex-shrink:0}.nk-breadcrumb{display:flex;align-items:center;gap:4px;font-size:14px}.nk-breadcrumb .crumb,.nk-breadcrumb ::slotted(.crumb){padding:2px 6px;border-radius:4px;cursor:pointer;color:var(--nk-text-secondary);display:flex;align-items:center;gap:5px}.nk-breadcrumb .crumb:hover{background:var(--nk-bg-hover)}a.crumb{text-decoration:none}.nk-breadcrumb .crumb.current,.nk-breadcrumb ::slotted(.crumb.current){color:var(--nk-text)}.nk-breadcrumb .sep{color:var(--nk-text-tertiary);font-size:12px}.nk-topbar-actions{margin-left:auto;display:flex;align-items:center;gap:4px}.nk-topbar-btn{padding:4px 8px;border-radius:var(--nk-radius);cursor:pointer;color:var(--nk-text-secondary);font-size:14px;user-select:none;border:none;background:0 0;font-family:inherit}.nk-topbar-btn:hover{background:var(--nk-bg-hover)}.nk-topbar-btn ::slotted(svg),.nk-topbar-btn svg{width:16px;height:16px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.nk-share-btn{border:1px solid var(--nk-border-strong);font-size:13px;padding:3px 10px}.nk-theme-toggle{font-size:15px;width:30px;height:28px;padding:0}.nk-tab-bar{display:none;flex:none;align-items:stretch;gap:2px;position:sticky;bottom:0;z-index:30;padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));background:var(--nk-bg-sidebar);border-top:1px solid var(--nk-border)}.nk-tab-bar.always{display:flex}.nk-tab-bar.floating{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));padding:6px;border:1px solid var(--nk-border);border-radius:16px;box-shadow:var(--nk-shadow-menu)}.nk-tab-bar-item{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 2px;border:none;border-radius:var(--nk-radius);background:0 0;font-family:inherit;font-size:10.5px;line-height:1.2;color:var(--nk-text-secondary);text-decoration:none;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}.nk-tab-bar-item:hover{color:var(--nk-text);background:var(--nk-bg-hover)}.nk-tab-bar-item.active{color:var(--nk-accent)}.nk-tab-bar-item:disabled{opacity:.5;cursor:not-allowed}.nk-tab-bar-item .icon,.nk-tab-bar-item ::slotted([slot=icon]){font-size:20px;line-height:1}.nk-tab-bar-item .label,.nk-tab-bar-item ::slotted(.label){max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nk-tree-item{display:flex;align-items:center;gap:6px;padding:3px 8px 3px 10px;border-radius:var(--nk-radius);cursor:pointer;user-select:none;color:var(--nk-text-secondary);position:relative;min-height:28px}.nk-tree-item:hover{background:var(--nk-bg-hover)}.nk-tree-item.active{background:var(--nk-bg-active);color:var(--nk-text);font-weight:500}.nk-tree-item.compact{min-height:26px}.nk-tree-item .icon,.nk-tree-item ::slotted(.icon),.nk-tree-item ::slotted([slot=icon]){font-size:15px;width:20px;text-align:center;flex-shrink:0}.nk-tree-item .label,.nk-tree-item ::slotted(.label){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nk-tree-item .actions{margin-left:auto;display:none;gap:2px;color:var(--nk-text-tertiary)}.nk-tree-item:hover .actions{display:flex}.nk-tree-item .actions span{padding:0 3px;border-radius:3px;font-size:12px}.nk-tree-item .actions span:hover{background:var(--nk-bg-active)}.nk-tree-children{margin-left:14px;border-left:1px solid var(--nk-border);padding-left:4px;overflow:hidden}.nk-tree-children.collapsed{display:none}.nk-toggle-arrow{width:16px;height:16px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;font-size:9px;color:var(--nk-text-tertiary);border-radius:3px;transition:transform .15s}.nk-toggle-arrow.open{transform:rotate(90deg)}.nk-kbd-hint{margin-left:auto;display:flex;gap:3px;align-items:center}.nk-kbd{font-family:inherit;font-size:10.5px;background:var(--nk-bg-callout);border:1px solid var(--nk-border-strong);border-bottom-width:2px;border-radius:4px;padding:0 4px}.nk-page-scroll{flex:1;overflow-y:auto}.nk-page-scroll::-webkit-scrollbar{width:10px}.nk-page-scroll::-webkit-scrollbar-thumb{background:var(--nk-border-strong);border-radius:5px;border:2px solid var(--nk-bg)}.nk-cover{height:200px;background:radial-gradient(ellipse at 20% 40%,color-mix(in srgb,var(--nk-decor-purple) 35%,transparent),transparent 55%),radial-gradient(ellipse at 80% 20%,color-mix(in srgb,var(--nk-decor-blue) 35%,transparent),transparent 55%),radial-gradient(ellipse at 60% 90%,color-mix(in srgb,var(--nk-decor-orange) 25%,transparent),transparent 55%),var(--nk-bg-callout)}.nk-page{max-width:760px;margin:0 auto;padding:0 64px 120px}.nk-page ::slotted(.nk-page-icon),.nk-page ::slotted([slot=icon]),.nk-page-icon{font-size:64px;line-height:1;margin-top:-42px;cursor:pointer;user-select:none;display:inline-block}.nk-page-title{font-size:40px;font-weight:700;margin:8px 0 4px;outline:0;letter-spacing:-.01em}.nk-page-meta{color:var(--nk-text-tertiary);font-size:13px;margin-bottom:24px;display:flex;gap:16px}.nk-page p.lead{font-size:16px;line-height:1.6;color:var(--nk-text-secondary);margin-bottom:20px}.nk-page ::slotted(p.lead){font-size:16px;line-height:1.6;color:var(--nk-text-secondary);margin-bottom:20px!important}.nk-heading{font-size:22px;font-weight:600;margin:32px 0 10px;display:flex;align-items:center;gap:8px}.nk-callout{display:flex;gap:10px;align-items:flex-start;background:var(--nk-bg-callout);border-radius:var(--nk-radius);padding:14px 16px;margin:16px 0;line-height:1.55;font-size:14.5px}.nk-callout .c-icon,.nk-callout ::slotted(.c-icon),.nk-callout ::slotted([slot=icon]){font-size:17px}.nk-todo{display:flex;align-items:flex-start;gap:8px;padding:4px 0}.nk-todo input[type=checkbox]{appearance:none;width:16px;height:16px;margin-top:3px;border:1.4px solid var(--nk-border-strong);border-radius:2px;cursor:pointer;flex-shrink:0;position:relative;background:var(--nk-bg)}.nk-todo input[type=checkbox]:checked{background:var(--nk-accent);border-color:var(--nk-accent)}.nk-todo input[type=checkbox]:checked::after{content:\"✓\";color:var(--nk-on-accent);font-size:11px;position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.nk-todo input:checked+span{text-decoration:line-through;color:var(--nk-text-tertiary)}.nk-todo input:disabled{opacity:.5;cursor:not-allowed}.nk-toggle{margin:6px 0}.nk-toggle summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:6px;padding:4px 6px;border-radius:var(--nk-radius);font-weight:500;user-select:none}.nk-toggle summary::-webkit-details-marker{display:none}.nk-toggle summary:hover{background:var(--nk-bg-hover)}.nk-toggle summary::before{content:\"▸\";color:var(--nk-text-tertiary);font-size:11px;transition:transform .15s;display:inline-block}.nk-toggle[open] summary::before{transform:rotate(90deg)}.nk-toggle .toggle-body,.nk-toggle ::slotted(.toggle-body){padding:4px 0 8px 26px;color:var(--nk-text-secondary);line-height:1.55}.nk-divider{border:none;border-top:1px solid var(--nk-border);margin:24px 0}.nk-quote{border-left:3px solid var(--nk-text);padding:2px 0 2px 14px;margin:16px 0;color:var(--nk-text-secondary);font-size:14.5px;line-height:1.55}.nk-quote .q-cite{display:block;margin-top:6px;font-size:12.5px;color:var(--nk-text-tertiary)}.nk-mention{display:inline-flex;align-items:center;gap:4px;padding:0 4px;border-radius:4px;font-weight:500;cursor:pointer;white-space:nowrap}.nk-mention:hover{background:var(--nk-bg-hover)}.nk-mention.person{color:var(--nk-text)}.nk-mention.person .mini-avatar,.nk-mention.person ::slotted(.mini-avatar),.nk-mention.person ::slotted([slot=avatar]){width:16px;height:16px;border-radius:50%;color:var(--nk-on-accent);font-size:8.5px;font-weight:600;display:inline-flex;align-items:center;justify-content:center}.nk-mention.page{color:var(--nk-text-secondary);text-decoration:underline;text-decoration-color:var(--nk-border-strong);text-underline-offset:2px}.nk-mention.date{color:var(--nk-tag-orange-text)}.nk-inline-code{font-family:var(--nk-font-mono);font-size:85%;color:var(--nk-danger);background:color-mix(in srgb,var(--nk-danger) 8%,transparent);border-radius:4px;padding:1px 5px}.nk-code{background:var(--nk-bg-code);border:1px solid var(--nk-border);border-radius:var(--nk-radius);padding:20px 24px;font-family:var(--nk-font-mono);font-size:13px;line-height:1.6;margin:14px 0;overflow-x:auto;color:var(--nk-text-secondary);white-space:pre;position:relative}.nk-code .lang{position:absolute;top:6px;right:10px;font-size:11px;color:var(--nk-text-tertiary);font-family:var(--nk-font)}.nk-code .tag,.nk-code ::slotted(.tag){color:var(--nk-accent)}.nk-code .attr,.nk-code ::slotted(.attr){color:var(--nk-tag-orange-text)}.nk-database{margin:12px 0 8px}.nk-db-tabs{display:flex;gap:2px;border-bottom:1px solid var(--nk-border);margin-bottom:0;font-size:13.5px}.nk-db-tab{padding:6px 10px;cursor:pointer;color:var(--nk-text-secondary);border-bottom:2px solid transparent;margin-bottom:-1px;user-select:none;display:flex;align-items:center;gap:6px}.nk-db-tab:hover{color:var(--nk-text)}.nk-db-tab.active{color:var(--nk-text);border-bottom-color:var(--nk-text);font-weight:500}.nk-db-tab .badge,.nk-db-tab ::slotted(.badge){background:var(--nk-bg-callout);border-radius:8px;font-size:11px;padding:0 6px;color:var(--nk-text-tertiary)}.nk-table-wrap{overflow-x:auto}.nk-table{width:100%;border-collapse:collapse;font-size:14px}.nk-table th{text-align:left;font-weight:400;color:var(--nk-text-tertiary);padding:8px 10px;border-bottom:1px solid var(--nk-border);font-size:13px;white-space:nowrap;user-select:none;cursor:pointer}.nk-table th:hover{background:var(--nk-bg-hover)}.nk-table th .th-icon,.nk-table th ::slotted(.th-icon){margin-right:5px;font-size:12px}.nk-table td{padding:7px 10px;border-bottom:1px solid var(--nk-border);white-space:nowrap;vertical-align:middle}.nk-table tbody tr:hover{background:var(--nk-bg-hover)}.nk-table .row-title{display:flex;align-items:center;gap:7px;font-weight:500;cursor:pointer}.nk-table .row-title:hover{text-decoration:underline;text-decoration-color:var(--nk-text-tertiary)}.nk-table .date-cell{color:var(--nk-text-secondary)}.nk-table .person-cell{display:flex;align-items:center;gap:6px;color:var(--nk-text-secondary)}.nk-table .person-cell .mini-avatar,.nk-table .person-cell ::slotted(.mini-avatar){width:20px;height:20px;border-radius:50%;font-size:10px;color:var(--nk-on-accent);display:inline-flex;align-items:center;justify-content:center;font-weight:600}.nk-new-row,.nk-table .new-row{color:var(--nk-text-tertiary);cursor:pointer;padding:8px 10px;display:flex;align-items:center;gap:7px;font-size:14px}.nk-new-row:hover,.nk-table .new-row:hover{background:var(--nk-bg-hover)}.nk-tag{display:inline-block;padding:1px 8px;border-radius:10px;font-size:12.5px;font-weight:450;line-height:1.6}.nk-tag.blue{background:var(--nk-tag-blue-bg);color:var(--nk-tag-blue-text)}.nk-tag.green{background:var(--nk-tag-green-bg);color:var(--nk-tag-green-text)}.nk-tag.orange{background:var(--nk-tag-orange-bg);color:var(--nk-tag-orange-text)}.nk-tag.purple{background:var(--nk-tag-purple-bg);color:var(--nk-tag-purple-text)}.nk-progress{width:110px;height:6px;border-radius:3px;background:var(--nk-tag-blue-bg);overflow:hidden;display:inline-block}.nk-progress>i{display:block;height:100%;background:var(--nk-tag-blue-text);border-radius:3px}.nk-progress-label{font-size:12px;color:var(--nk-text-tertiary);margin-left:7px}.nk-board{display:none;gap:12px;padding:14px 2px;overflow-x:auto}.nk-board.active{display:flex}.nk-board-col{min-width:220px;width:220px;flex-shrink:0}.nk-board-col-header{display:flex;align-items:center;gap:7px;margin-bottom:8px;font-size:13.5px;font-weight:500}.nk-board-col-header .count{color:var(--nk-text-tertiary);font-weight:400}.nk-card{background:var(--nk-bg-card);border:1px solid var(--nk-border);border-radius:8px;padding:10px 12px;margin-bottom:8px;cursor:grab;box-shadow:var(--nk-shadow-card);transition:border-color .15s}.nk-card:hover{border-color:var(--nk-border-strong)}.nk-card .card-title,.nk-card ::slotted(.card-title){font-weight:500;margin-bottom:7px;display:flex;gap:6px;align-items:center}.nk-card .card-meta,.nk-card ::slotted(.card-meta){display:flex;gap:6px;flex-wrap:wrap;align-items:center;font-size:12px;color:var(--nk-text-tertiary)}.nk-field{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:9px 0}.nk-field .f-label,.nk-field ::slotted(.f-label),.nk-field ::slotted([slot=label]){font-size:14px}.nk-field .f-desc,.nk-field ::slotted(.f-desc),.nk-field ::slotted([slot=desc]){font-size:12.5px;color:var(--nk-text-tertiary);margin-top:2px;line-height:1.45}.nk-field .f-control,.nk-field ::slotted(.f-control){flex-shrink:0}.nk-field.stacked,.nk-fields>.nk-field{flex-direction:column;align-items:stretch;gap:6px}.nk-field.stacked .f-control,.nk-field.stacked .nk-input,.nk-field.stacked .nk-select,.nk-field.stacked .nk-textarea,.nk-fields>.nk-field .f-control,.nk-fields>.nk-field .nk-input,.nk-fields>.nk-field .nk-select,.nk-fields>.nk-field .nk-textarea{width:100%}.nk-field.compact,.nk-fields>.nk-field{padding:0;gap:4px}.nk-field.compact .f-label,.nk-field.compact ::slotted([slot=label]),.nk-fields>.nk-field .f-label,.nk-fields>.nk-field ::slotted([slot=label]){font-size:12px;color:var(--nk-text-tertiary)}.nk-fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px 12px;padding:9px 0}.nk-fields>.nk-field{min-width:0}.nk-input,.nk-select,.nk-textarea{font-family:inherit;font-size:13.5px;color:var(--nk-text);background:var(--nk-bg);border:1px solid var(--nk-border-strong);border-radius:var(--nk-radius);padding:5px 10px;outline:0;transition:border-color .15s,box-shadow .15s;min-width:210px}.nk-input:focus,.nk-select:focus,.nk-textarea:focus{border-color:var(--nk-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--nk-accent) 25%,transparent)}.nk-input::placeholder,.nk-textarea::placeholder{color:var(--nk-text-tertiary)}.nk-input.wide,.nk-select.wide,.nk-textarea.wide{width:100%}.nk-select.compact{min-width:120px}.nk-textarea{resize:vertical;min-height:70px;line-height:1.5}.nk-select{appearance:none;cursor:pointer;padding-right:26px;background-image:linear-gradient(45deg,transparent 50%,var(--nk-text-tertiary) 50%),linear-gradient(135deg,var(--nk-text-tertiary) 50%,transparent 50%);background-position:calc(100% - 14px) 55%,calc(100% - 10px) 55%;background-size:4px 4px;background-repeat:no-repeat}.nk-btn{font-family:inherit;font-size:13.5px;font-weight:500;border-radius:var(--nk-radius);cursor:pointer;padding:5px 12px;border:1px solid transparent;transition:background .15s,border-color .15s,opacity .15s;display:inline-flex;align-items:center;gap:6px}.nk-btn ::slotted(svg),.nk-btn svg{width:15px;height:15px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.nk-btn.primary{background:var(--nk-accent);color:var(--nk-on-accent)}.nk-btn.primary:hover{opacity:.88}.nk-btn.secondary{background:0 0;color:var(--nk-text);border-color:var(--nk-border-strong)}.nk-btn.secondary:hover{background:var(--nk-bg-hover)}.nk-btn.danger{background:0 0;color:var(--nk-danger);border-color:var(--nk-border-strong)}.nk-btn.danger:hover{background:color-mix(in srgb,var(--nk-danger) 8%,transparent)}.nk-btn.danger-solid{background:var(--nk-danger);color:var(--nk-on-accent)}.nk-btn.danger-solid:hover{opacity:.88}.nk-btn.small{padding:3px 9px;font-size:12.5px}a.nk-btn{text-decoration:none}.nk-btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.nk-switch{position:relative;width:34px;height:20px;flex-shrink:0;appearance:none;border:none;cursor:pointer;border-radius:20px;background:var(--nk-border-strong);transition:background .2s}.nk-switch::after{content:\"\";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--nk-on-accent);transition:transform .2s;box-shadow:var(--nk-shadow-knob)}.nk-switch:checked,.nk-switch[aria-checked=true]{background:var(--nk-accent)}.nk-switch:checked::after,.nk-switch[aria-checked=true]::after{transform:translateX(14px)}.nk-switch:disabled{opacity:.5;cursor:not-allowed}.nk-switch-label{display:inline-flex;align-items:center;gap:8px;font-size:14px;cursor:pointer}.nk-switch-label:has(.nk-switch:disabled){cursor:not-allowed;color:var(--nk-text-tertiary)}.nk-check{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:14px;cursor:pointer}.nk-check input{appearance:none;width:16px;height:16px;flex-shrink:0;border:1.4px solid var(--nk-border-strong);border-radius:3px;cursor:pointer;position:relative;background:var(--nk-bg)}.nk-check input[type=radio]{border-radius:50%}.nk-check input:checked{background:var(--nk-accent);border-color:var(--nk-accent)}.nk-check input:checked::after{content:\"✓\";color:var(--nk-on-accent);font-size:10.5px;position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.nk-check input[type=radio]:checked::after{content:\"●\";font-size:7px}.nk-check input:disabled{opacity:.5;cursor:not-allowed}.nk-check input:disabled+*{opacity:.6}.nk-slider{width:210px;accent-color:var(--nk-accent);cursor:pointer}.nk-slider-value{font-size:12.5px;color:var(--nk-text-tertiary);margin-top:3px}.nk-profile-row{display:flex;align-items:center;gap:14px;padding:8px 0}.nk-profile-row .big-avatar,.nk-profile-row ::slotted(.big-avatar),.nk-profile-row ::slotted([slot=avatar]){width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--nk-decor-purple),var(--nk-decor-blue));color:var(--nk-on-accent);font-size:20px;font-weight:600;display:flex;align-items:center;justify-content:center}.nk-model-card{border:1px solid var(--nk-border-strong);border-radius:8px;padding:12px 14px;margin-bottom:10px;cursor:pointer;display:flex;align-items:flex-start;gap:11px;transition:border-color .15s,background .15s}.nk-model-card:hover{background:var(--nk-bg-hover)}.nk-model-card.selected{border-color:var(--nk-accent);background:color-mix(in srgb,var(--nk-accent) 6%,transparent)}.nk-model-card .m-radio{width:15px;height:15px;border-radius:50%;flex-shrink:0;margin-top:2px;border:1.4px solid var(--nk-border-strong);position:relative}.nk-model-card.selected .m-radio{border-color:var(--nk-accent)}.nk-model-card.selected .m-radio::after{content:\"\";position:absolute;inset:3px;border-radius:50%;background:var(--nk-accent)}.nk-model-card .m-name,.nk-model-card ::slotted(.m-name),.nk-model-card ::slotted([slot=title]){font-weight:500;font-size:14px;display:flex;align-items:center;gap:7px}.nk-model-card .m-desc,.nk-model-card ::slotted(.m-desc),.nk-model-card ::slotted([slot=desc]){font-size:12.5px;color:var(--nk-text-tertiary);margin-top:2px;line-height:1.45}.nk-danger-zone{border:1px solid color-mix(in srgb,var(--nk-danger) 40%,transparent);border-radius:8px;padding:14px 16px;margin-top:26px}.nk-danger-zone .dz-title{color:var(--nk-danger);font-weight:600;font-size:13px;margin-bottom:8px}.nk-member-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--nk-border)}.nk-member-list ::slotted(.nk-member-row:last-child),.nk-member-list>.nk-member-row:last-child,.nk-member-row.last{border-bottom:none}.nk-member-row .mini-avatar,.nk-member-row ::slotted(.mini-avatar),.nk-member-row ::slotted([slot=avatar]){width:28px;height:28px;border-radius:50%;color:var(--nk-on-accent);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;flex-shrink:0}.nk-member-row .m-mail{font-size:12px;color:var(--nk-text-tertiary)}.nk-member-row .nk-select{min-width:120px;margin-left:auto}.nk-member-row ::slotted([slot=role]){margin-left:auto}.nk-modal-backdrop{position:fixed;inset:0;background:var(--nk-scrim);display:flex;align-items:center;justify-content:center;z-index:100;opacity:0;pointer-events:none;transition:opacity .2s}.nk-modal-backdrop.open{opacity:1;pointer-events:auto}.nk-modal{width:min(960px,92vw);height:min(640px,86vh);background:var(--nk-bg);border-radius:10px;box-shadow:var(--nk-shadow-menu);display:flex;overflow:hidden;transform:scale(.98) translateY(6px);transition:transform .2s}.nk-modal-backdrop.open .nk-modal{transform:scale(1) translateY(0)}.nk-settings-nav{width:230px;min-width:230px;background:var(--nk-bg-sidebar);border-right:1px solid var(--nk-border);padding:10px 8px;overflow-y:auto;flex-shrink:0}.nk-settings-user{display:flex;align-items:center;gap:9px;padding:6px 10px 12px;margin-bottom:4px}.nk-settings-user .avatar,.nk-settings-user ::slotted(.avatar),.nk-settings-user ::slotted([slot=avatar]){width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--nk-decor-purple),var(--nk-decor-blue));color:var(--nk-on-accent);font-weight:600;font-size:13px;display:flex;align-items:center;justify-content:center}.nk-settings-user .name{font-weight:500;font-size:13.5px}.nk-settings-user .mail{font-size:11.5px;color:var(--nk-text-tertiary)}.nk-settings-nav .nk-tree-item{min-height:27px}.nk-settings-nav .nk-tree-item.active{background:var(--nk-bg-active);color:var(--nk-text);font-weight:500}.nk-settings-content{flex:1;overflow-y:auto;padding:36px 48px 80px;min-width:0}.nk-settings-content::-webkit-scrollbar{width:10px}.nk-settings-content::-webkit-scrollbar-thumb{background:var(--nk-border-strong);border-radius:5px;border:2px solid var(--nk-bg)}.nk-settings-pane{display:none;max-width:520px}.nk-settings-pane.active{display:block}.nk-settings-pane>h2{font-size:16px;font-weight:600;padding-bottom:12px;border-bottom:1px solid var(--nk-border);margin-bottom:20px}.nk-settings-pane>h3{font-size:13px;font-weight:600;margin:26px 0 10px}.nk-settings-pane ::slotted(h2){font-size:16px;font-weight:600;border:0;border-bottom:1px solid var(--nk-border);padding:0 0 12px!important;margin:0 0 20px!important}.nk-settings-pane ::slotted(h3){font-size:13px;font-weight:600;padding:0!important;margin:26px 0 10px!important}.nk-pop{background:var(--nk-bg);border-radius:10px;box-shadow:var(--nk-shadow-menu);padding:10px;width:296px}.nk-emoji-search{width:100%;font-family:inherit;font-size:13px;color:var(--nk-text);background:var(--nk-bg-callout);border:none;border-radius:var(--nk-radius);padding:6px 10px;outline:0;margin-bottom:8px}.nk-emoji-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:2px}.nk-emoji-grid ::slotted(span),.nk-emoji-grid span{font-size:18px;text-align:center;padding:4px 0;border-radius:5px;cursor:pointer;user-select:none}.nk-emoji-grid span:hover{background:var(--nk-bg-hover)}.nk-emoji-cats{display:flex;gap:2px;margin-top:8px;padding-top:8px;border-top:1px solid var(--nk-border)}.nk-emoji-cats span{font-size:14px;padding:3px 7px;border-radius:5px;cursor:pointer;color:var(--nk-text-tertiary);filter:grayscale(1);opacity:.6}.nk-emoji-cats span.active,.nk-emoji-cats span:hover{filter:none;opacity:1;background:var(--nk-bg-hover)}.nk-menu{padding:5px;width:230px}.nk-menu-item{display:flex;align-items:center;gap:9px;padding:5px 9px;border-radius:5px;cursor:pointer;font-size:13.5px;user-select:none}.nk-menu-item:hover{background:var(--nk-bg-hover)}.nk-menu-item .m-icon,.nk-menu-item ::slotted(.m-icon),.nk-menu-item ::slotted([slot=icon]){width:17px;text-align:center;font-size:14px}.nk-menu-item .m-shortcut,.nk-menu-item ::slotted(.m-shortcut){margin-left:auto;font-size:11.5px;color:var(--nk-text-tertiary)}.nk-menu-item.danger{color:var(--nk-danger)}.nk-menu-sep{border-top:1px solid var(--nk-border);margin:5px 4px}.nk-menu-label{font-size:11px;color:var(--nk-text-tertiary);padding:5px 9px 2px}.nk-cmdk-backdrop{position:fixed;inset:0;background:var(--nk-scrim-soft);display:flex;justify-content:center;align-items:flex-start;padding-top:14vh;z-index:110;opacity:0;pointer-events:none;transition:opacity .18s}.nk-cmdk-backdrop.open{opacity:1;pointer-events:auto}.nk-cmdk{width:min(560px,92vw);background:var(--nk-bg);border-radius:12px;box-shadow:var(--nk-shadow-menu);overflow:hidden;transform:scale(.98);transition:transform .18s}.nk-cmdk-backdrop.open .nk-cmdk{transform:scale(1)}.nk-cmdk-input-row{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--nk-border)}.nk-cmdk-input-row input{flex:1;border:none;outline:0;background:0 0;font-family:inherit;font-size:16px;color:var(--nk-text)}.nk-cmdk-input-row input::placeholder{color:var(--nk-text-tertiary)}.nk-cmdk-list{max-height:320px;overflow-y:auto;padding:6px}.nk-cmdk-group{font-size:11px;color:var(--nk-text-tertiary);padding:8px 10px 3px}.nk-cmdk-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:6px;cursor:pointer;font-size:14px;user-select:none}.nk-cmdk-item.selected{background:var(--nk-bg-active)}.nk-cmdk-item .m-icon,.nk-cmdk-item ::slotted(.m-icon),.nk-cmdk-item ::slotted([slot=icon]){width:17px;text-align:center;font-size:14px}.nk-cmdk-item .m-shortcut,.nk-cmdk-item ::slotted(.m-shortcut){margin-left:auto;font-size:11.5px;color:var(--nk-text-tertiary)}.nk-cmdk-empty{padding:30px;text-align:center;color:var(--nk-text-tertiary);font-size:13.5px}.nk-cmdk-footer{display:flex;gap:14px;padding:8px 16px;border-top:1px solid var(--nk-border);font-size:11.5px;color:var(--nk-text-tertiary)}.nk-toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--nk-text);color:var(--nk-bg);padding:8px 16px;border-radius:8px;font-size:13.5px;opacity:0;transition:.3s;pointer-events:none;box-shadow:var(--nk-shadow-menu);display:flex;gap:8px;align-items:center}.nk-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}.nk-gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:20px 32px;margin:12px 0}.nk-g-item>h4{font-size:12px;font-weight:500;color:var(--nk-text-tertiary);text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px}.nk-g-item ::slotted(h4){font-size:12px;font-weight:500;color:var(--nk-text-tertiary);text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px!important}.nk-tabs{display:flex;gap:2px;border-bottom:1px solid var(--nk-border);font-size:14px}.nk-tab{padding:7px 11px;cursor:pointer;color:var(--nk-text-secondary);border-bottom:2px solid transparent;margin-bottom:-1px;user-select:none}.nk-tab:hover{color:var(--nk-text)}.nk-tab.active{color:var(--nk-text);border-bottom-color:var(--nk-text);font-weight:500}.nk-tab-panel{padding:12px 2px;color:var(--nk-text-secondary);line-height:1.55;font-size:14px}.nk-template-btn{display:flex;align-items:center;gap:8px;width:100%;font-family:inherit;font-size:14px;color:var(--nk-text-secondary);background:var(--nk-bg-callout);border:none;border-radius:var(--nk-radius);padding:8px 12px;cursor:pointer;margin-bottom:6px;text-align:left}.nk-template-btn:hover{background:var(--nk-bg-hover)}.nk-stats{display:flex;gap:10px}.nk-stat{flex:1;border:1px solid var(--nk-border);border-radius:8px;padding:12px 14px}.nk-stat .s-label,.nk-stat ::slotted(.s-label),.nk-stat ::slotted([slot=label]){font-size:12px;color:var(--nk-text-tertiary);margin-bottom:4px}.nk-stat .s-value,.nk-stat ::slotted(.s-value),.nk-stat ::slotted([slot=value]){font-size:22px;font-weight:600;letter-spacing:-.01em}.nk-stat .s-delta,.nk-stat ::slotted(.s-delta),.nk-stat ::slotted([slot=delta]){font-size:11.5px;margin-top:3px}.nk-stat .s-delta.up,.nk-stat ::slotted(.s-delta.up),.nk-stat ::slotted([slot=delta].up){color:var(--nk-tag-green-text)}.nk-stat .s-delta.down,.nk-stat ::slotted(.s-delta.down),.nk-stat ::slotted([slot=delta].down){color:var(--nk-danger)}.nk-synced{border:1.5px solid color-mix(in srgb,var(--nk-danger) 55%,transparent);border-radius:8px;padding:12px 14px;position:relative;margin:8px 0}.nk-synced .synced-badge{position:absolute;top:-9px;right:10px;font-size:11px;background:var(--nk-danger);color:var(--nk-on-accent);border-radius:8px;padding:1px 8px}.nk-segmented{display:inline-flex;background:var(--nk-bg-callout);border-radius:7px;padding:2px}.nk-segmented button{font-family:inherit;font-size:13px;border:none;background:0 0;color:var(--nk-text-secondary);padding:4px 12px;border-radius:5px;cursor:pointer}.nk-segmented ::slotted(button){font-family:inherit;font-size:13px;border:none;background:0 0;color:var(--nk-text-secondary);padding:4px 12px!important;border-radius:5px;cursor:pointer}.nk-segmented ::slotted(button.active),.nk-segmented button.active{background:var(--nk-bg);color:var(--nk-text);font-weight:500;box-shadow:var(--nk-shadow-segment)}.nk-banner{display:flex;align-items:center;gap:10px;font-size:13.5px;border-radius:8px;padding:9px 14px;margin-bottom:8px}.nk-banner.info{background:var(--nk-tag-blue-bg);color:var(--nk-tag-blue-text)}.nk-banner.success{background:var(--nk-tag-green-bg);color:var(--nk-tag-green-text)}.nk-banner.warning{background:var(--nk-tag-orange-bg);color:var(--nk-tag-orange-text)}.nk-banner .b-action,.nk-banner ::slotted(.b-action),.nk-banner ::slotted([slot=action]){margin-left:auto;font-weight:500;cursor:pointer;text-decoration:underline;text-underline-offset:2px}.nk-avatar-group{display:flex}.nk-avatar-group .mini-avatar,.nk-avatar-group ::slotted(.mini-avatar){width:26px;height:26px;border-radius:50%;color:var(--nk-on-accent);font-size:10.5px;font-weight:600;border:2px solid var(--nk-bg);display:flex;align-items:center;justify-content:center;margin-left:-7px}.nk-avatar-group .mini-avatar:first-child,.nk-avatar-group ::slotted(.mini-avatar:first-child){margin-left:0}.nk-avatar-group .more,.nk-avatar-group ::slotted(.more){background:var(--nk-bg-callout);color:var(--nk-text-secondary)}.nk-skeleton{border-radius:5px;margin-bottom:10px;background:linear-gradient(90deg,var(--nk-bg-callout) 25%,var(--nk-bg-hover) 50%,var(--nk-bg-callout) 75%);background-size:200% 100%;animation:1.6s infinite nk-shimmer}@keyframes nk-shimmer{to{background-position:-200% 0}}.nk-empty{text-align:center;padding:36px 20px;border:1.5px dashed var(--nk-border-strong);border-radius:10px;color:var(--nk-text-tertiary)}.nk-empty .e-icon,.nk-empty ::slotted(.e-icon),.nk-empty ::slotted([slot=icon]){font-size:30px;margin-bottom:8px}.nk-empty .e-title,.nk-empty ::slotted(.e-title),.nk-empty ::slotted([slot=title]){font-weight:500;color:var(--nk-text-secondary);margin-bottom:3px;font-size:14px}.nk-empty .e-desc,.nk-empty ::slotted(.e-desc),.nk-empty ::slotted([slot=desc]){font-size:12.5px;margin-bottom:12px}.nk-comments{border-left:1px solid var(--nk-border);padding:4px 0 4px 18px;margin:8px 0 8px 8px}.nk-comment{display:flex;gap:9px;margin-bottom:14px}.nk-comment .mini-avatar,.nk-comment ::slotted(.mini-avatar),.nk-comment ::slotted([slot=avatar]){width:24px;height:24px;border-radius:50%;color:var(--nk-on-accent);flex-shrink:0;font-size:10px;font-weight:600;display:flex;align-items:center;justify-content:center}.nk-comment .c-head,.nk-comment ::slotted(.c-head){font-size:12.5px;color:var(--nk-text-tertiary);margin-bottom:2px}.nk-comment .c-head b{color:var(--nk-text);font-weight:600}.nk-comment .c-body,.nk-comment ::slotted(.c-body){font-size:13.5px;line-height:1.5}.nk-comment-input{display:flex;gap:8px;align-items:center;margin-top:4px}.nk-comment-input input{min-width:0;flex:1}.nk-ai-thread{display:flex;flex-direction:column;gap:14px}.nk-ai-msg{display:flex;gap:9px}.nk-ai-msg .mini-avatar,.nk-ai-msg ::slotted(.mini-avatar),.nk-ai-msg ::slotted([slot=avatar]){width:24px;height:24px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:12px;background:var(--nk-bg-callout)}.nk-ai-msg.user .mini-avatar,.nk-ai-msg.user ::slotted(.mini-avatar),.nk-ai-msg.user ::slotted([slot=avatar]){background:linear-gradient(135deg,var(--nk-decor-purple),var(--nk-decor-blue));color:var(--nk-on-accent);font-size:9.5px;font-weight:600}.nk-ai-msg .a-body,.nk-ai-msg ::slotted(.a-body){font-size:14px;line-height:1.55;padding-top:2px}.nk-ai-msg .a-name,.nk-ai-msg ::slotted(.a-name){font-size:12px;font-weight:600;margin-bottom:2px}.nk-ai-msg .a-name span{color:var(--nk-text-tertiary);font-weight:400}.nk-ai-actions{display:flex;gap:4px;margin-top:6px}.nk-ai-actions button{font-family:inherit;font-size:11.5px;color:var(--nk-text-tertiary);background:0 0;border:1px solid var(--nk-border);border-radius:5px;padding:2px 8px;cursor:pointer}.nk-ai-actions ::slotted(button){font-family:inherit;font-size:11.5px;color:var(--nk-text-tertiary);background:0 0;border:1px solid var(--nk-border);border-radius:5px;padding:2px 8px!important;cursor:pointer}.nk-ai-actions ::slotted(button:hover),.nk-ai-actions button:hover{background:var(--nk-bg-hover);color:var(--nk-text)}.nk-ai-input-row{display:flex;align-items:center;gap:8px;margin-top:14px;border:1px solid var(--nk-border-strong);border-radius:10px;padding:8px 12px}.nk-ai-input-row:focus-within{border-color:var(--nk-accent)}.nk-ai-input-row input{flex:1;border:none;outline:0;background:0 0;font-family:inherit;font-size:14px;color:var(--nk-text);min-width:0}.nk-ai-input-row input::placeholder{color:var(--nk-text-tertiary)}.nk-ai-send{border:none;background:var(--nk-accent);color:var(--nk-on-accent);border-radius:6px;width:26px;height:26px;cursor:pointer;font-size:13px;flex-shrink:0}.nk-block-host{position:relative;border-radius:var(--nk-radius);margin:8px 0;padding:2px 0 2px 2px;transition:background .15s,box-shadow .15s}.nk-block-host:hover{background:var(--nk-bg-hover)}.nk-block-host:focus-within{background:0 0;box-shadow:0 0 0 2px color-mix(in srgb,var(--nk-accent) 25%,transparent)}.nk-block-host.nk-drop-target{box-shadow:0 -2px 0 0 var(--nk-accent);background:0 0}.nk-block-host .nk-block-handle,.nk-block-host ::slotted(.nk-block-handle){position:absolute;left:-26px;top:4px;width:18px;height:20px;border-radius:4px;display:flex;align-items:center;justify-content:center;color:var(--nk-text-tertiary);font-size:13px;cursor:grab;opacity:0;transition:opacity .15s;user-select:none}.nk-block-host:hover .nk-block-handle{opacity:1}.nk-block-host .nk-block-actions{position:absolute;display:flex;gap:1px;z-index:2;opacity:0;transition:opacity .15s;pointer-events:none}.nk-block-host .nk-block-actions.show{opacity:1;pointer-events:auto}.nk-block-host .nk-block-actions ::slotted(button),.nk-block-host .nk-block-actions button{width:20px;height:22px;padding:0;border:none;border-radius:4px;background:0 0;color:var(--nk-text-tertiary);font-family:inherit;font-size:14px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}.nk-block-host .nk-block-actions button:hover{background:var(--nk-bg-hover);color:var(--nk-text)}.nk-block-host .nk-block-actions .drag{cursor:grab}.nk-block-host .nk-block-actions .drag:active{cursor:grabbing}.nk-block-host .ProseMirror{outline:0;font-family:var(--nk-font);font-size:14px;line-height:1.6;color:var(--nk-text);min-height:60px;padding:4px 2px}.nk-block-host .ProseMirror>*+*{margin-top:6px}.nk-block-host .ProseMirror h1{font-size:30px;font-weight:600;letter-spacing:-.01em;margin:24px 0 6px}.nk-block-host .ProseMirror h2{font-size:22px;font-weight:600;margin:20px 0 6px}.nk-block-host .ProseMirror h3{font-size:17px;font-weight:600;margin:16px 0 4px}.nk-block-host .ProseMirror p{margin:0}.nk-block-host .ProseMirror ol,.nk-block-host .ProseMirror ul{padding-left:24px;margin:4px 0}.nk-block-host .ProseMirror ul{list-style:disc}.nk-block-host .ProseMirror ol{list-style:decimal}.nk-block-host .ProseMirror li{margin:2px 0}.nk-block-host .ProseMirror li::marker{color:var(--nk-text-tertiary)}.nk-block-host .ProseMirror ul[data-type=taskList]{list-style:none;padding-left:2px}.nk-block-host .ProseMirror ul[data-type=taskList] li{display:flex;gap:8px;align-items:flex-start}.nk-block-host .ProseMirror ul[data-type=taskList] li>label{flex-shrink:0;margin-top:3px;user-select:none}.nk-block-host .ProseMirror ul[data-type=taskList] li>div{flex:1;min-width:0}.nk-block-host .ProseMirror ul[data-type=taskList] input[type=checkbox]{appearance:none;width:16px;height:16px;margin:0;border:1.4px solid var(--nk-border-strong);border-radius:2px;cursor:pointer;position:relative;background:var(--nk-bg);display:block}.nk-block-host .ProseMirror ul[data-type=taskList] input[type=checkbox]:checked{background:var(--nk-accent);border-color:var(--nk-accent)}.nk-block-host .ProseMirror ul[data-type=taskList] input[type=checkbox]:checked::after{content:\"✓\";color:var(--nk-on-accent);font-size:11px;position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.nk-block-host .ProseMirror li[data-checked=true]>div{text-decoration:line-through;color:var(--nk-text-tertiary)}.nk-block-host .ProseMirror-gapcursor::after{border-top-color:var(--nk-text)}.nk-block-host .ProseMirror .ProseMirror-selectednode{background:color-mix(in srgb,var(--nk-accent) 8%,transparent)}.nk-block-host .ProseMirror blockquote{border-left:3px solid var(--nk-text);padding:2px 0 2px 14px;margin:12px 0;color:var(--nk-text-secondary)}.nk-block-host .ProseMirror code{font-family:var(--nk-font-mono);font-size:85%;color:var(--nk-danger);background:color-mix(in srgb,var(--nk-danger) 8%,transparent);border-radius:4px;padding:1px 5px}.nk-block-host .ProseMirror pre{background:var(--nk-bg-code);border:1px solid var(--nk-border);border-radius:var(--nk-radius);padding:16px 20px;margin:12px 0;font-family:var(--nk-font-mono);font-size:13px;line-height:1.6;color:var(--nk-text-secondary);overflow-x:auto}.nk-block-host .ProseMirror pre code{background:0 0;color:inherit;padding:0;font-size:inherit}.nk-block-host .ProseMirror hr{border:none;border-top:1px solid var(--nk-border);margin:20px 0}.nk-block-host .ProseMirror a{color:var(--nk-accent);text-decoration:underline;text-underline-offset:2px}.nk-block-host .ProseMirror-selectednode{box-shadow:0 0 0 2px color-mix(in srgb,var(--nk-accent) 35%,transparent);border-radius:3px}.nk-block-host .ProseMirror ::selection{background:color-mix(in srgb,var(--nk-accent) 25%,transparent)}.nk-block-host .ProseMirror .is-empty::before,.nk-block-host .ProseMirror p.is-editor-empty:first-child::before{content:attr(data-placeholder);color:var(--nk-text-tertiary);float:left;height:0;pointer-events:none}.nk-block-host .bn-container{font-family:var(--nk-font);color:var(--nk-text);background:0 0}.nk-block-host .bn-editor{padding:4px 2px}.nk-block-host .bn-block-content{font-size:14px;line-height:1.6}.nk-block-host .bn-side-menu{color:var(--nk-text-tertiary)}.nk-block-host .bn-drag-handle{border-radius:4px}.nk-block-host .bn-drag-handle:hover{background:var(--nk-bg-hover)}.nk-block-host .novel-editor{font-family:var(--nk-font);color:var(--nk-text)}.nk-block-host .novel-prose{max-width:none}.nk-block-host .bn-suggestion-menu,.nk-block-host .tippy-box,.nk-slash-menu{background:var(--nk-bg);border-radius:10px;box-shadow:var(--nk-shadow-menu);padding:6px;width:280px;max-height:320px;overflow-y:auto;font-family:var(--nk-font);font-size:13.5px;color:var(--nk-text)}.nk-slash-menu-label{font-size:11px;color:var(--nk-text-tertiary);padding:6px 9px 2px}.nk-slash-item{display:flex;align-items:center;gap:10px;padding:6px 9px;border-radius:5px;cursor:pointer;user-select:none}.nk-slash-item.selected,.nk-slash-item:hover{background:var(--nk-bg-hover)}.nk-slash-item .m-icon,.nk-slash-item ::slotted(.m-icon){width:28px;height:28px;flex-shrink:0;border-radius:4px;background:var(--nk-bg-callout);border:1px solid var(--nk-border);display:flex;align-items:center;justify-content:center;font-size:15px}.nk-slash-item .m-desc{font-size:11.5px;color:var(--nk-text-tertiary)}.nk-bubble-menu{display:flex;align-items:center;gap:2px;background:var(--nk-bg);border-radius:8px;box-shadow:var(--nk-shadow-menu);padding:4px}.nk-bubble-menu button{font-family:inherit;font-size:13px;border:none;background:0 0;color:var(--nk-text-secondary);padding:4px 8px;border-radius:5px;cursor:pointer}.nk-bubble-menu ::slotted(button){font-family:inherit;font-size:13px;border:none;background:0 0;color:var(--nk-text-secondary);padding:4px 8px!important;border-radius:5px;cursor:pointer}.nk-bubble-menu ::slotted(button:hover),.nk-bubble-menu button:hover{background:var(--nk-bg-hover);color:var(--nk-text)}.nk-bubble-menu ::slotted(button.active),.nk-bubble-menu button.active{color:var(--nk-accent)}@media (max-width:860px){.nk-sidebar{display:none}.nk-tab-bar{display:flex}.nk-page{padding:0 24px 80px}.nk-settings-nav{width:60px;min-width:60px}.nk-settings-nav .label,.nk-settings-nav .nk-section-label,.nk-settings-user .u-text{display:none}.nk-settings-content{padding:24px}.nk-cmdk-backdrop{padding-top:6vh}.nk-cmdk{width:min(560px,96vw)}.nk-stats{flex-wrap:wrap}}@media (prefers-reduced-motion:reduce){.nk-skeleton{animation:none;background:var(--nk-bg-callout)}[class*=nk-],[class*=nk-]::after,[class*=nk-]::before{animation-duration:NaNs!important;animation-iteration-count:1!important;transition-duration:NaNs!important;scroll-behavior:auto!important}}\n/*# sourceMappingURL=notionkit.min.css.map */";
10
10
 
11
11
  const componentsCss = componentsHead + componentsTail;
12
12
  const css = componentsHead + tokensCss + componentsTail;
@@ -158,6 +158,12 @@ class NkElement extends HTMLElement {
158
158
 
159
159
  connectedCallback() {
160
160
  if (!this._initialized) {
161
+ // A framework may have set properties on the instance before the
162
+ // definition arrived (hybrids binds checked="${bool}" as a property
163
+ // while the element is still a plain HTMLElement). Such an own property
164
+ // shadows the accessor on the prototype for good; re-apply it through
165
+ // the setter so the attribute – and with it render() – sees the value.
166
+ this._upgradeOwnProperties();
161
167
  this._initialized = true;
162
168
 
163
169
  // The wrapper mirrors data-theme from <html> so [data-theme]-keyed
@@ -208,6 +214,18 @@ class NkElement extends HTMLElement {
208
214
  this._wrapper?.setAttribute('data-theme', theme);
209
215
  }
210
216
 
217
+ _upgradeOwnProperties() {
218
+ for (const key of Object.keys(this)) {
219
+ if (key.startsWith('_')) continue;
220
+ let proto = Object.getPrototypeOf(this), desc;
221
+ while (proto && proto !== HTMLElement.prototype && !(desc = Object.getOwnPropertyDescriptor(proto, key))) proto = Object.getPrototypeOf(proto);
222
+ if (!desc?.set) continue;
223
+ const value = this[key];
224
+ delete this[key];
225
+ this[key] = value;
226
+ }
227
+ }
228
+
211
229
  /** Subclasses override to build the inner DOM inside this._wrapper. Runs once. */
212
230
  render() {}
213
231
 
@@ -289,9 +307,21 @@ class NkFormElement extends NkElement {
289
307
  checkValidity() { return this._internals.checkValidity(); }
290
308
  reportValidity() { return this._internals.reportValidity(); }
291
309
 
310
+ connectedCallback() {
311
+ const first = !this._initialized;
312
+ super.connectedCallback();
313
+ // A `disabled` attribute in the markup fires formDisabledCallback on
314
+ // parse or upgrade – before the first connect, when nothing is rendered
315
+ // yet. The state was remembered below; apply it now that render() ran.
316
+ if (first && this._formDisabled) this.onFormDisabled(true);
317
+ }
318
+
292
319
  formResetCallback() { this.resetValue(); }
293
320
  formStateRestoreCallback(state, mode) { this.restoreValue(state, mode); }
294
- formDisabledCallback(disabled) { this.onFormDisabled(disabled); }
321
+ formDisabledCallback(disabled) {
322
+ this._formDisabled = disabled;
323
+ if (this._initialized) this.onFormDisabled(disabled);
324
+ }
295
325
 
296
326
  /** Subclasses override. */
297
327
  resetValue() {}
@@ -439,7 +469,7 @@ class NkInput extends NkFormElement {
439
469
 
440
470
  _forward(attr) {
441
471
  if (BOOLEANS$1.includes(attr)) {
442
- this._input[attr === 'readonly' ? 'readOnly' : attr] = this.getBoolAttr(attr);
472
+ this._input[attr === 'readonly' ? 'readOnly' : attr] = this.getBoolAttr(attr) || (attr === 'disabled' && !!this._formDisabled);
443
473
  return;
444
474
  }
445
475
  const v = this.getAttribute(attr);
@@ -542,7 +572,7 @@ class NkTextarea extends NkFormElement {
542
572
 
543
573
  _forward(attr) {
544
574
  if (BOOLEANS.includes(attr)) {
545
- this._input[attr === 'readonly' ? 'readOnly' : attr] = this.getBoolAttr(attr);
575
+ this._input[attr === 'readonly' ? 'readOnly' : attr] = this.getBoolAttr(attr) || (attr === 'disabled' && !!this._formDisabled);
546
576
  return;
547
577
  }
548
578
  const v = this.getAttribute(attr);
@@ -624,7 +654,7 @@ customElements.define('nk-textarea', NkTextarea);
624
654
  // MutationObserver keeps the copy in step when a framework swaps them; the
625
655
  // empty string is a valid value; the live selection survives a rebuild.
626
656
  class NkSelect extends NkFormElement {
627
- static get observedAttributes() { return ['value', 'name', 'disabled', 'required', 'compact', 'aria-label']; }
657
+ static get observedAttributes() { return ['value', 'name', 'disabled', 'required', 'compact', 'wide', 'aria-label']; }
628
658
  static get observesLightDom() { return true; }
629
659
 
630
660
  render() {
@@ -642,9 +672,10 @@ class NkSelect extends NkFormElement {
642
672
  name ? this._select.setAttribute('name', name) : this._select.removeAttribute('name');
643
673
  const label = this.getAttribute('aria-label');
644
674
  label ? this._select.setAttribute('aria-label', label) : this._select.removeAttribute('aria-label');
645
- this._select.disabled = this.getBoolAttr('disabled');
675
+ this._select.disabled = this.getBoolAttr('disabled') || !!this._formDisabled;
646
676
  this._select.required = this.getBoolAttr('required');
647
677
  this._select.classList.toggle('compact', this.getBoolAttr('compact'));
678
+ this._select.classList.toggle('wide', this.getBoolAttr('wide'));
648
679
  }
649
680
 
650
681
  projectLightDom() {
@@ -735,6 +766,8 @@ class NkSelect extends NkFormElement {
735
766
  set required(v) { this.setBoolAttr('required', v); }
736
767
  get compact() { return this.getBoolAttr('compact'); }
737
768
  set compact(v) { this.setBoolAttr('compact', v); }
769
+ get wide() { return this.getBoolAttr('wide'); }
770
+ set wide(v) { this.setBoolAttr('wide', v); }
738
771
  }
739
772
 
740
773
  customElements.define('nk-select', NkSelect);
@@ -742,14 +775,28 @@ customElements.define('nk-select', NkSelect);
742
775
  // <nk-switch name="notify" checked></nk-switch>
743
776
  // → <button class="nk-switch" role="switch" aria-checked="true">
744
777
  // notionkit.css styles the state through [aria-checked]; the toggling is here.
778
+ //
779
+ // <nk-switch checked>Waiting</nk-switch> (or text="Waiting")
780
+ // → <label class="nk-switch-label"><button class="nk-switch" …></button><span>Waiting</span></label>
781
+ // Visible text beside the switch, for several switches in one row where no
782
+ // nk-field row names them. Without text the label wrapper is layout-
783
+ // transparent (display: contents), so the bare button stays the bare button.
745
784
  class NkSwitch extends NkFormElement {
746
- static get observedAttributes() { return ['checked', 'disabled', 'name', 'value', 'label']; }
785
+ static get observedAttributes() { return ['checked', 'disabled', 'name', 'value', 'label', 'text']; }
747
786
 
748
787
  render() {
788
+ this._row = this.createElement('label', ['nk-switch-label']);
749
789
  this._btn = this.createElement('button', ['nk-switch'], { type: 'button', role: 'switch' });
790
+ this._text = document.createElement('span');
791
+ this._slot = document.createElement('slot');
792
+ this._textNode = document.createTextNode('');
793
+ this._slot.appendChild(this._textNode);
794
+ this._text.appendChild(this._slot);
795
+ this._row.append(this._btn, this._text);
750
796
  this._defaultChecked = this.getBoolAttr('checked');
751
797
  this._apply();
752
- this._wrapper.appendChild(this._btn);
798
+ this._syncText();
799
+ this._wrapper.appendChild(this._row);
753
800
  this._syncFormValue();
754
801
  }
755
802
 
@@ -760,13 +807,24 @@ class NkSwitch extends NkFormElement {
760
807
  label ? this._btn.setAttribute('aria-label', label) : this._btn.removeAttribute('aria-label');
761
808
  }
762
809
 
810
+ _syncText() {
811
+ this._textNode.data = this.getAttribute('text') ?? '';
812
+ const hasText = !!(this.getAttribute('text') || this._slot.assignedNodes().some(n => n.nodeType === Node.ELEMENT_NODE || n.data.trim()));
813
+ this._text.hidden = !hasText;
814
+ this._row.style.display = hasText ? '' : 'contents';
815
+ }
816
+
763
817
  setupEvents() {
764
818
  this._onClick = () => this.toggle();
819
+ this._onSlot = () => this._syncText();
765
820
  this._btn.addEventListener('click', this._onClick);
821
+ this._slot.addEventListener('slotchange', this._onSlot);
822
+ this._syncText();
766
823
  }
767
824
 
768
825
  teardownEvents() {
769
826
  this._btn?.removeEventListener('click', this._onClick);
827
+ this._slot?.removeEventListener('slotchange', this._onSlot);
770
828
  }
771
829
 
772
830
  toggle() {
@@ -776,8 +834,9 @@ class NkSwitch extends NkFormElement {
776
834
  this.dispatchEvent(new Event('change', { bubbles: true }));
777
835
  }
778
836
 
779
- onAttributeChanged() {
837
+ onAttributeChanged(name) {
780
838
  if (!this._btn) return;
839
+ if (name === 'text') { this._syncText(); return; }
781
840
  this._apply();
782
841
  this._syncFormValue();
783
842
  }
@@ -801,6 +860,8 @@ class NkSwitch extends NkFormElement {
801
860
  set name(v) { this.setAttribute('name', v); }
802
861
  get value() { return this.getAttribute('value') || 'on'; }
803
862
  set value(v) { this.setAttribute('value', v); }
863
+ get text() { return this.getAttribute('text'); }
864
+ set text(v) { v == null ? this.removeAttribute('text') : this.setAttribute('text', v); }
804
865
  }
805
866
 
806
867
  customElements.define('nk-switch', NkSwitch);
@@ -808,15 +869,18 @@ customElements.define('nk-switch', NkSwitch);
808
869
  // <nk-check name="mail" value="weekly" checked>Weekly digest</nk-check>
809
870
  // → <label class="nk-check"><input type="checkbox"> Weekly digest</label>
810
871
  class NkCheck extends NkFormElement {
811
- static get observedAttributes() { return ['checked', 'disabled', 'name', 'value', 'indeterminate', 'required']; }
872
+ static get observedAttributes() { return ['checked', 'disabled', 'name', 'value', 'text', 'indeterminate', 'required']; }
812
873
 
813
874
  render() {
814
875
  const label = this.createElement('label', ['nk-check']);
815
876
  this._input = this.createElement('input', [], { type: 'checkbox' });
877
+ const slot = document.createElement('slot');
878
+ this._text = document.createTextNode('');
879
+ slot.appendChild(this._text);
816
880
  this._apply();
817
881
  this._defaultChecked = this.getBoolAttr('checked');
818
882
  label.appendChild(this._input);
819
- label.appendChild(document.createElement('slot'));
883
+ label.appendChild(slot);
820
884
  this._wrapper.appendChild(label);
821
885
  this._syncFormValue();
822
886
  }
@@ -829,6 +893,7 @@ class NkCheck extends NkFormElement {
829
893
  const name = this.getAttribute('name');
830
894
  name ? this._input.setAttribute('name', name) : this._input.removeAttribute('name');
831
895
  this._input.value = this.getAttribute('value') || 'on';
896
+ if (this._text) this._text.data = this.getAttribute('text') ?? '';
832
897
  }
833
898
 
834
899
  setupEvents() {
@@ -873,6 +938,8 @@ class NkCheck extends NkFormElement {
873
938
  set disabled(v) { this.setBoolAttr('disabled', v); }
874
939
  get name() { return this.getAttribute('name'); }
875
940
  set name(v) { this.setAttribute('name', v); }
941
+ get text() { return this.getAttribute('text'); }
942
+ set text(v) { v == null ? this.removeAttribute('text') : this.setAttribute('text', v); }
876
943
  get value() { return this.getAttribute('value') || 'on'; }
877
944
  set value(v) { this.setAttribute('value', v); }
878
945
  }
@@ -908,17 +975,20 @@ function syncGroupTabIndex(group) {
908
975
  }
909
976
 
910
977
  class NkRadio extends NkFormElement {
911
- static get observedAttributes() { return ['checked', 'disabled', 'name', 'value', 'required']; }
978
+ static get observedAttributes() { return ['checked', 'disabled', 'name', 'value', 'text', 'required']; }
912
979
 
913
980
  render() {
914
981
  const label = this.createElement('label', ['nk-check']);
915
982
  this._input = this.createElement('input', [], { type: 'radio' });
983
+ const slot = document.createElement('slot');
984
+ this._text = document.createTextNode('');
985
+ slot.appendChild(this._text);
916
986
  // `name` on the inner input is inert (it is alone in its tree); it stays
917
987
  // as a devtools courtesy. The group above is the real one.
918
988
  this._apply();
919
989
  this._defaultChecked = this.getBoolAttr('checked');
920
990
  label.appendChild(this._input);
921
- label.appendChild(document.createElement('slot'));
991
+ label.appendChild(slot);
922
992
  this._wrapper.appendChild(label);
923
993
  this._syncFormValue();
924
994
  // Elements upgrade in document order, so the last `checked` one in the
@@ -934,6 +1004,7 @@ class NkRadio extends NkFormElement {
934
1004
  const name = this.getAttribute('name');
935
1005
  name ? this._input.setAttribute('name', name) : this._input.removeAttribute('name');
936
1006
  this._input.value = this.getAttribute('value') || '';
1007
+ if (this._text) this._text.data = this.getAttribute('text') ?? '';
937
1008
  }
938
1009
 
939
1010
  setupEvents() {
@@ -1030,6 +1101,8 @@ class NkRadio extends NkFormElement {
1030
1101
  set disabled(v) { this.setBoolAttr('disabled', v); }
1031
1102
  get name() { return this.getAttribute('name'); }
1032
1103
  set name(v) { this.setAttribute('name', v); }
1104
+ get text() { return this.getAttribute('text'); }
1105
+ set text(v) { v == null ? this.removeAttribute('text') : this.setAttribute('text', v); }
1033
1106
  get value() { return this.getAttribute('value') || ''; }
1034
1107
  set value(v) { this.setAttribute('value', v); }
1035
1108
  }
@@ -1125,11 +1198,19 @@ customElements.define('nk-slider', NkSlider);
1125
1198
  // <div class="f-control">…</div></div>
1126
1199
  // Rich label / description content goes through slot="label" / slot="desc"
1127
1200
  // (twins `.nk-field ::slotted([slot="label"])` etc. in notionkit.css).
1201
+ //
1202
+ // `stacked` puts the label above a full-width control, `compact` shrinks the
1203
+ // label and drops the row padding; inside <nk-fields> both are on by
1204
+ // default. A stacked field sets `wide` on its nk-input / nk-textarea /
1205
+ // nk-select, since the stylesheet's `.nk-field.stacked .nk-input` cannot
1206
+ // reach into the control's shadow root.
1207
+ const WIDE = ['nk-input', 'nk-textarea', 'nk-select'];
1208
+
1128
1209
  class NkField extends NkElement {
1129
- static get observedAttributes() { return ['label', 'desc']; }
1210
+ static get observedAttributes() { return ['label', 'desc', 'stacked', 'compact']; }
1130
1211
 
1131
1212
  render() {
1132
- const field = this.createElement('div', ['nk-field']);
1213
+ this._field = this.createElement('div', ['nk-field']);
1133
1214
  const text = document.createElement('div');
1134
1215
  this._label = this.createElement('div', ['f-label']);
1135
1216
  const labelSlot = this.createElement('slot', [], { name: 'label' });
@@ -1140,21 +1221,51 @@ class NkField extends NkElement {
1140
1221
  text.appendChild(labelSlot);
1141
1222
  text.appendChild(descSlot);
1142
1223
  const control = this.createElement('div', ['f-control']);
1143
- control.appendChild(document.createElement('slot'));
1144
- field.appendChild(text);
1145
- field.appendChild(control);
1146
- this._wrapper.appendChild(field);
1224
+ this._slot = document.createElement('slot');
1225
+ control.appendChild(this._slot);
1226
+ this._field.appendChild(text);
1227
+ this._field.appendChild(control);
1228
+ this._wrapper.appendChild(this._field);
1229
+ this._widened = new Set();
1147
1230
  this._sync();
1148
1231
  }
1149
1232
 
1233
+ setupEvents() {
1234
+ this._onSlot = () => this._syncWide();
1235
+ this._slot.addEventListener('slotchange', this._onSlot);
1236
+ this._sync();
1237
+ }
1238
+
1239
+ teardownEvents() {
1240
+ this._slot?.removeEventListener('slotchange', this._onSlot);
1241
+ }
1242
+
1150
1243
  onAttributeChanged() { this._sync(); }
1151
1244
 
1245
+ get stacked() { return this.getBoolAttr('stacked') || !!this.closest('nk-fields'); }
1246
+ set stacked(v) { this.setBoolAttr('stacked', v); }
1247
+ get compact() { return this.getBoolAttr('compact') || !!this.closest('nk-fields'); }
1248
+ set compact(v) { this.setBoolAttr('compact', v); }
1249
+
1152
1250
  _sync() {
1153
1251
  if (!this._label) return;
1154
1252
  this._label.textContent = this.getAttribute('label') || '';
1155
1253
  const desc = this.getAttribute('desc');
1156
1254
  this._desc.textContent = desc || '';
1157
1255
  this._desc.style.display = desc ? '' : 'none';
1256
+ this._field.classList.toggle('stacked', this.stacked);
1257
+ this._field.classList.toggle('compact', this.compact);
1258
+ this._syncWide();
1259
+ }
1260
+
1261
+ _syncWide() {
1262
+ if (!this._slot) return;
1263
+ const stacked = this.stacked;
1264
+ for (const el of this._slot.assignedElements()) {
1265
+ if (!WIDE.includes(el.localName)) continue;
1266
+ if (stacked && !el.hasAttribute('wide')) { el.setAttribute('wide', ''); this._widened.add(el); }
1267
+ else if (!stacked && this._widened.has(el)) { el.removeAttribute('wide'); this._widened.delete(el); }
1268
+ }
1158
1269
  }
1159
1270
 
1160
1271
  get label() { return this.getAttribute('label'); }
@@ -1165,6 +1276,25 @@ class NkField extends NkElement {
1165
1276
 
1166
1277
  customElements.define('nk-field', NkField);
1167
1278
 
1279
+ // <nk-fields>
1280
+ // <nk-field label="Name"><nk-input name="name"></nk-input></nk-field>
1281
+ // <nk-field label="Email"><nk-input name="email"></nk-input></nk-field>
1282
+ // </nk-fields>
1283
+ // → <div class="nk-fields">…</div>
1284
+ // A grid of short fields side by side, wrapping as the width allows. Every
1285
+ // nk-field inside renders itself stacked and compact (12px label above a
1286
+ // full-width control) – the class markup does the same through
1287
+ // `.nk-fields > .nk-field`, which cannot cross the shadow boundary here.
1288
+ class NkFields extends NkElement {
1289
+ render() {
1290
+ const grid = this.createElement('div', ['nk-fields']);
1291
+ grid.appendChild(document.createElement('slot'));
1292
+ this._wrapper.appendChild(grid);
1293
+ }
1294
+ }
1295
+
1296
+ customElements.define('nk-fields', NkFields);
1297
+
1168
1298
  // <nk-tag color="blue">Text</nk-tag> — modifier class .blue becomes color="blue"
1169
1299
  const COLORS$1 = ['blue', 'green', 'orange', 'purple'];
1170
1300
 
@@ -2177,6 +2307,166 @@ class NkThemeToggle extends NkElement {
2177
2307
 
2178
2308
  customElements.define('nk-theme-toggle', NkThemeToggle);
2179
2309
 
2310
+ // <nk-tab-bar value="inbox">
2311
+ // <nk-tab-bar-item icon="🏠" value="home">Home</nk-tab-bar-item>
2312
+ // <nk-tab-bar-item icon="📥" value="inbox">Inbox</nk-tab-bar-item>
2313
+ // <nk-tab-bar-item icon="☰" drawer>More</nk-tab-bar-item>
2314
+ // </nk-tab-bar>
2315
+ // → <nav class="nk-tab-bar">…</nav>
2316
+ //
2317
+ // The thumb-reachable twin of the sidebar for phones and installed PWAs. As
2318
+ // the last child of <nk-app> it is slotted into .nk-main below the scrolling
2319
+ // page, so it never moves and needs no bottom padding anywhere. The
2320
+ // stylesheet hides it above 860px – there the sidebar is the navigation –
2321
+ // and shows it below; `always` shows it at every width (previews, phone
2322
+ // frames), `floating` makes it a capsule. Exactly one item is `active`; a
2323
+ // `drawer` item opens the sidebar instead of becoming active.
2324
+ class NkTabBar extends NkElement {
2325
+ static get observedAttributes() { return ['value', 'always', 'floating', 'label']; }
2326
+
2327
+ render() {
2328
+ this._bar = this.createElement('nav', ['nk-tab-bar']);
2329
+ this._slot = document.createElement('slot');
2330
+ this._bar.appendChild(this._slot);
2331
+ this._wrapper.appendChild(this._bar);
2332
+ this._syncBar();
2333
+ this._sync();
2334
+ }
2335
+
2336
+ get items() { return [...this.querySelectorAll(':scope > nk-tab-bar-item')]; }
2337
+
2338
+ // Attribute access only: on the first connect the children are in the DOM
2339
+ // but not yet upgraded, so their accessors do not exist.
2340
+ _valueOf(item) { return item.getAttribute('value') ?? item.getAttribute('label') ?? item.textContent.trim(); }
2341
+
2342
+ _syncBar() {
2343
+ this._bar.classList.toggle('always', this.getBoolAttr('always'));
2344
+ this._bar.classList.toggle('floating', this.getBoolAttr('floating'));
2345
+ const label = this.getAttribute('label');
2346
+ label ? this._bar.setAttribute('aria-label', label) : this._bar.removeAttribute('aria-label');
2347
+ }
2348
+
2349
+ _sync() {
2350
+ const items = this.items.filter(i => !i.hasAttribute('drawer'));
2351
+ if (!items.length) return;
2352
+ let value = this.getAttribute('value');
2353
+ if (value === null || !items.some(i => this._valueOf(i) === value)) {
2354
+ const preset = items.find(i => i.hasAttribute('active')) || items[0];
2355
+ value = this._valueOf(preset);
2356
+ }
2357
+ for (const item of items) {
2358
+ if (this._valueOf(item) === value) item.setAttribute('active', ''); else item.removeAttribute('active');
2359
+ }
2360
+ this._value = value;
2361
+ }
2362
+
2363
+ setupEvents() {
2364
+ this._onSlot = () => this._sync();
2365
+ this._slot.addEventListener('slotchange', this._onSlot);
2366
+ this._sync();
2367
+ }
2368
+
2369
+ teardownEvents() {
2370
+ this._slot?.removeEventListener('slotchange', this._onSlot);
2371
+ }
2372
+
2373
+ onAttributeChanged(name) {
2374
+ if (name !== 'value') { this._syncBar(); return; }
2375
+ const before = this._value;
2376
+ this._sync();
2377
+ if (this._value !== before) this.emit('nk-change', { value: this._value });
2378
+ }
2379
+
2380
+ get value() { return this._value ?? this.getAttribute('value'); }
2381
+ set value(v) { this.setAttribute('value', v); }
2382
+ get always() { return this.getBoolAttr('always'); }
2383
+ set always(v) { this.setBoolAttr('always', v); }
2384
+ get floating() { return this.getBoolAttr('floating'); }
2385
+ set floating(v) { this.setBoolAttr('floating', v); }
2386
+ }
2387
+
2388
+ customElements.define('nk-tab-bar', NkTabBar);
2389
+
2390
+ // <nk-tab-bar-item icon="📥" value="inbox" active>Inbox</nk-tab-bar-item>
2391
+ // → <button class="nk-tab-bar-item active" type="button">
2392
+ // <span class="icon">📥</span><span class="label">Inbox</span></button>
2393
+ //
2394
+ // One destination of <nk-tab-bar>. A click emits nk-select (cancelable);
2395
+ // inside a bar it then moves the bar's `value`, standalone it sets its own
2396
+ // `active`. With `href` it navigates afterwards, with `drawer` it opens the
2397
+ // nearest <nk-sidebar> as a drawer instead of becoming active – the usual
2398
+ // fifth item ("More"). The icon is an attribute or a `slot="icon"` node.
2399
+ class NkTabBarItem extends NkElement {
2400
+ static get observedAttributes() { return ['icon', 'label', 'value', 'href', 'active', 'disabled', 'drawer']; }
2401
+
2402
+ render() {
2403
+ this._btn = this.createElement('button', ['nk-tab-bar-item'], { type: 'button' });
2404
+ this._iconSlot = this.createElement('slot', [], { name: 'icon' });
2405
+ this._icon = this.createElement('span', ['icon'], { 'aria-hidden': 'true' });
2406
+ this._iconSlot.appendChild(this._icon);
2407
+ this._label = this.createElement('span', ['label']);
2408
+ this._labelSlot = document.createElement('slot');
2409
+ this._labelText = document.createTextNode('');
2410
+ this._labelSlot.appendChild(this._labelText);
2411
+ this._label.appendChild(this._labelSlot);
2412
+ this._btn.append(this._iconSlot, this._label);
2413
+ this._wrapper.appendChild(this._btn);
2414
+ this._sync();
2415
+ }
2416
+
2417
+ _sync() {
2418
+ this._icon.textContent = this.getAttribute('icon') ?? '';
2419
+ this._labelText.data = this.getAttribute('label') ?? '';
2420
+ const active = this.getBoolAttr('active');
2421
+ this._btn.classList.toggle('active', active);
2422
+ active ? this._btn.setAttribute('aria-current', 'page') : this._btn.removeAttribute('aria-current');
2423
+ this._btn.disabled = this.getBoolAttr('disabled');
2424
+ const href = this.getAttribute('href');
2425
+ href ? this._btn.setAttribute('data-href', href) : this._btn.removeAttribute('data-href');
2426
+ }
2427
+
2428
+ setupEvents() {
2429
+ this._onClick = () => this.select();
2430
+ this._btn.addEventListener('click', this._onClick);
2431
+ }
2432
+
2433
+ teardownEvents() {
2434
+ this._btn?.removeEventListener('click', this._onClick);
2435
+ }
2436
+
2437
+ select() {
2438
+ if (this.getBoolAttr('disabled')) return;
2439
+ const href = this.getAttribute('href');
2440
+ const ok = this.emit('nk-select', { value: this.value, label: this.label, href, item: this, drawer: this.getBoolAttr('drawer') });
2441
+ if (!ok) return;
2442
+ if (this.getBoolAttr('drawer')) {
2443
+ const sidebar = this.closest('nk-app')?.querySelector('nk-sidebar') ?? document.querySelector('nk-sidebar');
2444
+ sidebar?.toggle?.();
2445
+ return;
2446
+ }
2447
+ const bar = this.closest('nk-tab-bar');
2448
+ if (bar) bar.value = this.value;
2449
+ else this.setBoolAttr('active', true);
2450
+ if (href) location.assign(href);
2451
+ }
2452
+
2453
+ onAttributeChanged() { this._sync(); }
2454
+ focus(o) { this._btn?.focus(o); }
2455
+
2456
+ get value() { return this.getAttribute('value') ?? this.label; }
2457
+ set value(v) { this.setAttribute('value', v); }
2458
+ get label() { return this.getAttribute('label') ?? this.textContent.trim(); }
2459
+ set label(v) { this.setAttribute('label', v); }
2460
+ get active() { return this.getBoolAttr('active'); }
2461
+ set active(v) { this.setBoolAttr('active', v); }
2462
+ get disabled() { return this.getBoolAttr('disabled'); }
2463
+ set disabled(v) { this.setBoolAttr('disabled', v); }
2464
+ get drawer() { return this.getBoolAttr('drawer'); }
2465
+ set drawer(v) { this.setBoolAttr('drawer', v); }
2466
+ }
2467
+
2468
+ customElements.define('nk-tab-bar-item', NkTabBarItem);
2469
+
2180
2470
  // <nk-page icon="🚀" cover>
2181
2471
  // <nk-page-title>NotionKit MVP</nk-page-title>
2182
2472
  // <nk-page-actions>…</nk-page-actions>
@@ -4636,4 +4926,4 @@ class NkAiInputRow extends NkElement {
4636
4926
 
4637
4927
  customElements.define('nk-ai-input-row', NkAiInputRow);
4638
4928
 
4639
- export { NkAiInputRow, NkAiMsg, NkAiThread, NkApp, NkAvatarGroup, NkBanner, NkBlockHost, NkBoardView, NkBreadcrumb, NkBtn, NkCallout, NkCheck, NkCmdk, NkCode, NkComment, NkComments, NkDangerZone, NkDatabase, NkDivider, NkElement, NkEmojiPicker, NkEmpty, NkField, NkFilterBar, NkFormElement, NkHeading, NkInput, NkKbd, NkMemberList, NkMemberRow, NkMention, NkMenu, NkMenuItem, NkModal, NkModelCard, NkPage, NkPageActions, NkPageCover, NkPageTitle, NkPop, NkProfileRow, NkProgress, NkQuote, NkRadio, NkSectionLabel, NkSegmented, NkSelect, NkSettingsPane, NkSettingsUser, NkSidebar, NkSkeleton, NkSlider, NkStat, NkStats, NkSwitch, NkSynced, NkTab, NkTableView, NkTabs, NkTag, NkTemplateBtn, NkTextarea, NkThemeToggle, NkToast, NkTodo, NkToggle, NkTopbar, NkTree, NkTreeItem, NkWorkspaceSwitcher, compareBy, renderPropertyCell, tagFor };
4929
+ export { NkAiInputRow, NkAiMsg, NkAiThread, NkApp, NkAvatarGroup, NkBanner, NkBlockHost, NkBoardView, NkBreadcrumb, NkBtn, NkCallout, NkCheck, NkCmdk, NkCode, NkComment, NkComments, NkDangerZone, NkDatabase, NkDivider, NkElement, NkEmojiPicker, NkEmpty, NkField, NkFields, NkFilterBar, NkFormElement, NkHeading, NkInput, NkKbd, NkMemberList, NkMemberRow, NkMention, NkMenu, NkMenuItem, NkModal, NkModelCard, NkPage, NkPageActions, NkPageCover, NkPageTitle, NkPop, NkProfileRow, NkProgress, NkQuote, NkRadio, NkSectionLabel, NkSegmented, NkSelect, NkSettingsPane, NkSettingsUser, NkSidebar, NkSkeleton, NkSlider, NkStat, NkStats, NkSwitch, NkSynced, NkTab, NkTabBar, NkTabBarItem, NkTableView, NkTabs, NkTag, NkTemplateBtn, NkTextarea, NkThemeToggle, NkToast, NkTodo, NkToggle, NkTopbar, NkTree, NkTreeItem, NkWorkspaceSwitcher, compareBy, renderPropertyCell, tagFor };