@jungherz-de/notionkit-elements 1.16.0 → 1.18.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 (65) hide show
  1. package/CHANGELOG.md +32 -0
  2. package/README.md +64 -6
  3. package/SKILL.md +79 -65
  4. package/dist/components/base.js +102 -3
  5. package/dist/components/nk-ai-input-row.js +6 -3
  6. package/dist/components/nk-board-view.js +2 -2
  7. package/dist/components/nk-breadcrumb.js +2 -1
  8. package/dist/components/nk-calendar-view.js +8 -5
  9. package/dist/components/nk-calendar.js +10 -7
  10. package/dist/components/nk-cmdk.js +6 -2
  11. package/dist/components/nk-comments.js +5 -3
  12. package/dist/components/nk-copy-field.js +37 -6
  13. package/dist/components/nk-emoji-picker.js +6 -2
  14. package/dist/components/nk-filter-bar.js +10 -8
  15. package/dist/components/nk-gallery-view.js +29 -7
  16. package/dist/components/nk-image-picker.js +7 -3
  17. package/dist/components/nk-list-view.js +3 -2
  18. package/dist/components/nk-modal.js +3 -1
  19. package/dist/components/nk-page-title.js +2 -1
  20. package/dist/components/nk-page.js +3 -1
  21. package/dist/components/nk-peek.js +6 -3
  22. package/dist/components/nk-progress.js +6 -3
  23. package/dist/components/nk-sidebar.js +5 -2
  24. package/dist/components/nk-steps.js +20 -4
  25. package/dist/components/nk-synced.js +2 -1
  26. package/dist/components/nk-tab-bar.js +10 -4
  27. package/dist/components/nk-table-view.js +3 -2
  28. package/dist/components/nk-theme-toggle.js +5 -2
  29. package/dist/components/nk-tree-item.js +3 -1
  30. package/dist/components/shared/{property-cell-BSVcETss.js → property-cell-DcsfnUNF.js} +15 -5
  31. package/dist/notionkit-elements.esm.js +312 -80
  32. package/dist/notionkit-elements.esm.min.js +1 -1
  33. package/dist/notionkit-elements.esm.min.js.map +1 -1
  34. package/dist/notionkit-elements.js +314 -79
  35. package/dist/notionkit-elements.min.js +1 -1
  36. package/package.json +3 -3
  37. package/src/base.js +32 -2
  38. package/src/components/content/nk-progress.js +6 -3
  39. package/src/components/data/nk-ai-input-row.js +6 -3
  40. package/src/components/data/nk-board-view.js +2 -2
  41. package/src/components/data/nk-calendar-view.js +7 -4
  42. package/src/components/data/nk-comments.js +5 -3
  43. package/src/components/data/nk-filter-bar.js +10 -8
  44. package/src/components/data/nk-gallery-view.js +29 -7
  45. package/src/components/data/nk-list-view.js +2 -1
  46. package/src/components/data/nk-table-view.js +2 -1
  47. package/src/components/forms/nk-calendar.js +10 -7
  48. package/src/components/forms/nk-copy-field.js +37 -6
  49. package/src/components/forms/nk-image-picker.js +7 -3
  50. package/src/components/overlays/nk-cmdk.js +6 -2
  51. package/src/components/overlays/nk-emoji-picker.js +6 -2
  52. package/src/components/overlays/nk-modal.js +3 -1
  53. package/src/components/overlays/nk-peek.js +6 -3
  54. package/src/components/page/nk-page-title.js +2 -1
  55. package/src/components/page/nk-page.js +3 -1
  56. package/src/components/page/nk-steps.js +20 -4
  57. package/src/components/page/nk-synced.js +2 -1
  58. package/src/components/shell/nk-breadcrumb.js +2 -1
  59. package/src/components/shell/nk-sidebar.js +5 -2
  60. package/src/components/shell/nk-tab-bar.js +10 -4
  61. package/src/components/shell/nk-theme-toggle.js +5 -2
  62. package/src/components/shell/nk-tree-item.js +3 -1
  63. package/src/index.js +5 -1
  64. package/src/util/property-cell.js +14 -4
  65. package/src/util/strings.js +73 -0
package/dist/notionkit-elements.esm.js CHANGED
@@ -1,4 +1,4 @@
1
- // NotionKit v1.16.0 – Constructable Stylesheet
1
+ // NotionKit v1.18.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: #f
6
6
 
7
7
  // … and everything else, in two pieces around where they were.
8
8
  const componentsHead = "[class*=nk-],[class*=nk-] *,[class*=nk-]:before,[class*=nk-]:after,[class*=nk-] *:before,[class*=nk-] *:after{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}[class*=nk-] :where(button,input,select,textarea,option,optgroup,fieldset,legend),:where(button,input,select,textarea)[class*=nk-]{margin:0;padding:0}[class*=nk-][hidden]:not([hidden=until-found i]){display:none!important}::slotted([hidden]:not([hidden=\"until-found\" i])){display:none!important}";
9
- const componentsTail = ".nk-body{margin:0;min-height:100vh;min-height:100dvh;font-family:var(--nk-font);font-size:14px;background:var(--nk-bg);color:var(--nk-text);-webkit-font-smoothing:auto;transition:background .25s ease,color .25s ease}.nk-app{display:flex;height:100vh;height:100dvh;overflow:hidden}.nk-sidebar{width:calc(var(--nk-sidebar-width) + env(safe-area-inset-left,0px));min-width:calc(var(--nk-sidebar-width) + env(safe-area-inset-left,0px));padding-left:env(safe-area-inset-left,0px);background:var(--nk-bg-sidebar);display:flex;flex-direction:column;border-right:1px solid var(--nk-border);transition:background .25s ease,margin-left .24s cubic-bezier(.2,.8,.25,1)}.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:12px;font-weight:500;letter-spacing:.01em;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-sidebar);font-size:14px}.nk-sidebar-footer .nk-tree-item{min-height:26px}.nk-sidebar-backdrop{display:none;position:fixed;inset:0;z-index:59;background:var(--nk-scrim-soft)}.nk-sidebar-toggle{display:none}.nk-sidebar.collapsed{margin-left:calc(0px - var(--nk-sidebar-width) - env(safe-area-inset-left,0px));visibility:hidden;transition:background .25s ease,margin-left .24s cubic-bezier(.2,.8,.25,1),visibility 0s linear .24s}.nk-sidebar-toggle.collapsed{display:inline-flex}.nk-sidebar-head{display:flex;align-items:center}.nk-sidebar-head>.nk-workspace,.nk-sidebar-head ::slotted(.nk-workspace){flex:1;min-width:0}.nk-sidebar-collapse{flex:none;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;margin:4px 12px 0 -4px;padding:0;border:none;border-radius:var(--nk-radius);background:transparent;color:var(--nk-text-tertiary);cursor:pointer;opacity:0;transition:opacity .15s}.nk-sidebar:hover .nk-sidebar-collapse,.nk-sidebar-collapse:focus-visible{opacity:1}.nk-sidebar-collapse:hover{background:var(--nk-bg-hover);color:var(--nk-text)}.nk-sidebar-collapse svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.nk-main{flex:1;display:flex;flex-direction:column;min-width:0}.nk-topbar{height:44px;display:flex;align-items:center;padding:0 max(12px,env(safe-area-inset-right,0px)) 0 max(12px,env(safe-area-inset-left,0px));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-sidebar);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-sidebar);font-size:14px;user-select:none;border:none;background:transparent;font-family:inherit}.nk-topbar-btn:hover{background:var(--nk-bg-hover)}.nk-topbar-btn svg,.nk-topbar-btn ::slotted(svg){width:16px;height:16px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.nk-share-btn{font-size:14px;padding:4px 8px}.nk-topbar-meta,.nk-topbar-actions ::slotted(.nk-topbar-meta){padding:4px 8px;font-size:12px;color:var(--nk-text-tertiary);white-space:nowrap}.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;box-sizing:border-box;height:calc(var(--nk-tab-bar-height) - 6px + max(6px,env(safe-area-inset-bottom,0px)));padding:6px max(4px,env(safe-area-inset-right,0px)) max(6px,env(safe-area-inset-bottom,0px)) max(4px,env(safe-area-inset-left,0px));background:var(--nk-bg-sidebar);border-top:1px solid var(--nk-border)}.nk-tab-bar.always{display:flex}.nk-tab-bar.fixed{position:fixed;left:0;right:0;bottom:0}.nk-tab-bar-spacer{display:none;flex:none;height:calc(var(--nk-tab-bar-height) - 6px + max(6px,env(safe-area-inset-bottom,0px)))}.nk-tab-bar.always.fixed+.nk-tab-bar-spacer{display:block}.nk-tab-bar.floating{position:fixed;left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));bottom:calc(12px + env(safe-area-inset-bottom,0px));height:var(--nk-tab-bar-height);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;justify-content:center;gap:2px;padding:4px 2px;border:none;border-radius:var(--nk-radius);background:transparent;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-sidebar);position:relative;min-height:var(--_nk-row, 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:var(--nk-cover-height);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-cover>img,.nk-cover ::slotted(img){display:block;width:100%;height:100%;object-fit:cover}.nk-page{max-width:760px;margin:0 auto;padding:24px max(64px,env(safe-area-inset-right,0px)) 120px max(64px,env(safe-area-inset-left,0px));font-size:16px;line-height:1.5}.nk-page.full{max-width:var(--nk-page-full-max)}.nk-page.small{font-size:14px}.nk-cover+.nk-page:has(>.nk-page-icon:not([hidden])),.nk-page.covered{padding-top:0}.nk-page-icon,.nk-page ::slotted(.nk-page-icon),.nk-page ::slotted([slot=\"icon\"]){font-size:64px;line-height:1;margin-top:0;cursor:pointer;user-select:none;display:inline-block}.nk-cover+.nk-page .nk-page-icon,.nk-cover+.nk-page ::slotted(.nk-page-icon),.nk-cover+.nk-page ::slotted([slot=\"icon\"]),.nk-page.covered .nk-page-icon,.nk-page.covered ::slotted(.nk-page-icon),.nk-page.covered ::slotted([slot=\"icon\"]){margin-top:-42px}.nk-page-title{font-size:var(--_nk-title, 40px);font-weight:700;line-height:1.2;margin:8px 0 4px;outline:none;letter-spacing:0}.nk-page-meta{color:var(--nk-text-tertiary);font-size:13px;margin-bottom:24px;display:flex;gap:16px}.nk-props{display:flex;flex-direction:column;margin:0 0 var(--nk-block-space, 20px);font-size:14px;line-height:1.5}.nk-props.flush{margin:0}.nk-prop{display:flex;flex-wrap:wrap;align-items:flex-start;min-width:0}.nk-prop .p-name{flex:0 0 160px;min-width:0;min-height:34px;padding:0 6px;display:flex;align-items:center;gap:6px;overflow:hidden;border-radius:var(--nk-radius);color:var(--nk-text-secondary);white-space:nowrap;user-select:none}.nk-prop .p-icon,.nk-prop ::slotted([slot=\"icon\"]){width:16px;flex-shrink:0;text-align:center;font-size:13px}.nk-prop .p-value{flex:1 1 220px;min-width:0;min-height:34px;padding:5px 8px;display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px;border-radius:var(--nk-radius);overflow-wrap:anywhere}.nk-prop .p-value.text{display:block;align-content:center}.nk-prop .p-name:hover,.nk-prop .p-value:hover{background:var(--nk-bg-hover)}.nk-page p.lead{font-size:1em;line-height:1.6;color:var(--nk-text-secondary);margin-bottom:20px}.nk-page ::slotted(p.lead){font-size:1em;line-height:1.6;color:var(--nk-text-secondary);margin-bottom:20px!important}.nk-heading{font-size:1.5em;font-weight:600;line-height:1.3;margin:32px 0 10px;display:flex;align-items:center;gap:8px}:is(.nk-props,.nk-callout,.nk-bookmark,.nk-toggle,.nk-divider,.nk-quote,.nk-code,.nk-database,.nk-danger-zone,.nk-gallery-grid,.nk-template-btn,.nk-synced,.nk-banner,.nk-panels,.nk-skeleton,.nk-steps,.nk-comments,.nk-block-host,.nk-model-card,.nk-ai-input-row).flush{margin-top:0;margin-bottom:0}.nk-callout{display:flex;gap:10px;align-items:flex-start;background:var(--nk-bg-callout);border-radius:var(--nk-radius);padding:16px 16px 16px 12px;margin:var(--nk-block-space, 16px) 0;line-height:1.5}.nk-callout .c-icon,.nk-callout ::slotted(.c-icon),.nk-callout ::slotted([slot=\"icon\"]){font-size:17px}.nk-bookmark{display:flex;min-width:0;margin:var(--nk-block-space, 8px) 0;overflow:hidden;border:1px solid var(--nk-border);border-radius:var(--nk-radius);color:var(--nk-text);text-decoration:none;transition:background .12s ease}.nk-bookmark:hover{background:var(--nk-bg-hover)}.nk-bookmark .bm-text{flex:1 1 0;min-width:0;padding:12px 14px 14px;font-size:14px;line-height:20px}.nk-bookmark .bm-title{display:block;min-height:24px;margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nk-bookmark .bm-desc{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;max-height:32px;font-size:12px;line-height:16px;color:var(--nk-text-secondary)}.nk-bookmark .bm-url{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:12px;line-height:16px;white-space:nowrap}.nk-bookmark .bm-url>span{min-width:0;overflow:hidden;text-overflow:ellipsis}.nk-bookmark .bm-favicon{flex:none;width:16px;height:16px}.nk-bookmark .bm-cover{position:relative;flex:0 0 33%;max-width:240px}.nk-bookmark .bm-cover>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.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:\"\\2713\";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:var(--nk-block-space, 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:\"\\25b8\";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:var(--nk-block-space, 24px) 0}.nk-quote{border-left:3px solid var(--nk-text);padding:2px 0 2px 14px;margin:var(--nk-block-space, 16px) 0;color:var(--nk-text-secondary);line-height:1.5}.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 .nk-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-color-orange)}.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:var(--nk-block-space, 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-color-orange)}.nk-database{margin:var(--nk-block-space, 12px) 0 var(--nk-block-space, 8px)}.nk-db-tabs{display:flex;gap:2px;align-items:center;padding:0 0 6px;margin-bottom:0;font-size:14px}.nk-db-tab{padding:4px 8px;cursor:pointer;color:var(--nk-text-secondary);border-radius:var(--nk-radius);user-select:none;line-height:20px;display:flex;align-items:center;gap:6px;flex-shrink:0;white-space:nowrap}.nk-db-tab:hover{color:var(--nk-text);background:var(--nk-bg-hover)}.nk-db-tab.active{color:var(--nk-text);background:var(--nk-bg-active);font-weight:500}.nk-db-tab.add{color:var(--nk-text-tertiary)}.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-db-toolbar{display:flex;align-items:center;gap:8px;min-width:0;padding-bottom:6px}.nk-db-toolbar>.nk-db-tabs{flex:1 1 auto;min-width:0;padding-bottom:0;overflow-x:auto;scrollbar-width:none}.nk-db-toolbar>.nk-db-tabs::-webkit-scrollbar{display:none}.nk-db-toolbar .tools{flex:none;display:flex;align-items:center;gap:4px;margin-left:auto}.nk-db-tool{display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 8px;border:none;border-radius:var(--nk-radius);background:transparent;font-family:inherit;font-size:14px;color:var(--nk-text-secondary);white-space:nowrap;cursor:pointer;user-select:none}.nk-db-tool:hover{background:var(--nk-bg-hover);color:var(--nk-text)}.nk-db-tool.active{color:var(--nk-accent)}.nk-filter-row{display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding:2px 0 8px}.nk-filter-pill{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 8px;border:1px solid var(--nk-border-strong);border-radius:12px;background:transparent;font-family:inherit;font-size:13px;line-height:1;color:var(--nk-text-secondary);white-space:nowrap;cursor:pointer;user-select:none}.nk-filter-pill:hover{background:var(--nk-bg-hover)}.nk-filter-pill.active{color:var(--nk-accent);border-color:color-mix(in srgb,var(--nk-accent) 35%,transparent);background:color-mix(in srgb,var(--nk-accent) 6%,transparent)}.nk-filter-pill.add{border-color:transparent;color:var(--nk-text-tertiary)}.nk-filter-pill.add:hover{color:var(--nk-text-secondary)}.nk-filter-pill button{padding:0;border:none;background:none;font:inherit;color:inherit;cursor:pointer}.nk-filter-pill .fp-remove{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-right:-4px;border-radius:50%;font-size:13px}.nk-filter-pill .fp-remove:hover{background:color-mix(in srgb,currentColor 15%,transparent)}.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-secondary);height:36px;padding:0 8px;border-bottom:1px solid var(--nk-border);border-right:1px solid var(--nk-border);font-size:14px;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:6px;font-size:13px;color:var(--nk-text-tertiary)}.nk-table td{height:36px;padding:6px 8px;line-height:1.5;border-bottom:1px solid var(--nk-border);border-right:1px solid var(--nk-border);white-space:nowrap;vertical-align:middle}.nk-table th:last-child,.nk-table td:last-child{border-right:none}.nk-table.wrap td,.nk-table td.wrap{white-space:normal;vertical-align:top}.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 .num{text-align:right;font-variant-numeric:tabular-nums}.nk-table .row-actions{display:flex;justify-content:flex-end;gap:4px}.nk-table th.actions{cursor:default}.nk-table th.actions:hover{background:none}.nk-table .td-desc{display:block;font-size:12px;line-height:16px;color:var(--nk-text-tertiary)}.nk-table .td-text.gray{color:var(--nk-color-gray)}.nk-table .td-text.brown{color:var(--nk-color-brown)}.nk-table .td-text.orange{color:var(--nk-color-orange)}.nk-table .td-text.yellow{color:var(--nk-color-yellow)}.nk-table .td-text.green{color:var(--nk-color-green)}.nk-table .td-text.blue{color:var(--nk-color-blue)}.nk-table .td-text.purple{color:var(--nk-color-purple)}.nk-table .td-text.pink{color:var(--nk-color-pink)}.nk-table .td-text.red{color:var(--nk-color-red)}.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;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-flex;align-items:center;max-width:100%;height:20px;padding:0 6px;border-radius:3px;font-size:14px;font-weight:400;line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;background:var(--nk-tag-gray-bg);color:var(--nk-tag-gray-text)}.nk-tag.gray{background:var(--nk-tag-gray-bg);color:var(--nk-tag-gray-text)}.nk-tag.brown{background:var(--nk-tag-brown-bg);color:var(--nk-tag-brown-text)}.nk-tag.orange{background:var(--nk-tag-orange-bg);color:var(--nk-tag-orange-text)}.nk-tag.yellow{background:var(--nk-tag-yellow-bg);color:var(--nk-tag-yellow-text)}.nk-tag.green{background:var(--nk-tag-green-bg);color:var(--nk-tag-green-text)}.nk-tag.blue{background:var(--nk-tag-blue-bg);color:var(--nk-tag-blue-text)}.nk-tag.purple{background:var(--nk-tag-purple-bg);color:var(--nk-tag-purple-text)}.nk-tag.pink{background:var(--nk-tag-pink-bg);color:var(--nk-tag-pink-text)}.nk-tag.red{background:var(--nk-tag-red-bg);color:var(--nk-tag-red-text)}.nk-progress{width:110px;height:6px;border-radius:3px;background:var(--nk-tint-blue);overflow:hidden;display:inline-block}.nk-progress>i{display:block;height:100%;background:var(--nk-color-blue);border-radius:3px}.nk-progress.wide{width:100%;flex:1 1 60px;max-height:6px}.nk-progress-label{font-size:12px;color:var(--nk-text-tertiary);margin-left:7px;white-space:nowrap}.nk-list{display:flex;flex-direction:column;font-size:14px}.nk-list-item{display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden;min-height:36px;padding:4px 6px;border-bottom:1px solid var(--nk-border);color:inherit;text-decoration:none;cursor:pointer}.nk-list-item:hover{background:var(--nk-bg-hover)}.nk-list-item.static{cursor:default}.nk-list-item.static:hover{background:none}.nk-list>.nk-list-item:last-child,.nk-list ::slotted(.nk-list-item:last-child),.nk-list-item.last{border-bottom:none}.nk-list-item .l-icon,.nk-list-item ::slotted([slot=\"icon\"]){width:20px;flex-shrink:0;text-align:center;font-size:15px}.nk-list-item .l-title,.nk-list-item ::slotted(.l-title){flex:1 1 auto;min-width:0;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nk-list-item .l-meta,.nk-list-item ::slotted(.l-meta){flex:none;display:flex;align-items:center;gap:8px;margin-left:auto;font-size:12px;color:var(--nk-text-secondary);white-space:nowrap}.nk-calendar-view{font-size:14px}.nk-calendar-view .cv-head{display:flex;align-items:center;gap:4px;padding:2px 0 8px}.nk-calendar-view .cv-title{flex:1;font-weight:600;white-space:nowrap}.nk-calendar-view .cv-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-top:1px solid var(--nk-border);border-left:1px solid var(--nk-border)}.nk-calendar-view.weeks .cv-grid{grid-template-columns:32px repeat(7,minmax(0,1fr))}.nk-calendar-view :is(.cv-wd,.cv-week,.cv-day){min-width:0;border-right:1px solid var(--nk-border);border-bottom:1px solid var(--nk-border)}.nk-calendar-view .cv-wd{padding:4px 8px;font-size:12px;color:var(--nk-text-secondary);text-align:center}.nk-calendar-view .cv-week{padding:6px 0;font-size:11px;color:var(--nk-text-tertiary);text-align:center;font-variant-numeric:tabular-nums}.nk-calendar-view .cv-day{display:flex;flex-direction:column;gap:3px;min-height:112px;padding:4px 4px 6px}.nk-calendar-view .cv-day:is(.out,.off){background:var(--nk-bg-sidebar)}.nk-calendar-view .cv-num{align-self:flex-end;min-width:22px;height:22px;padding:0 6px;border-radius:11px;font-size:13px;line-height:22px;text-align:center;color:var(--nk-text-secondary);font-variant-numeric:tabular-nums}.nk-calendar-view .cv-day.out .cv-num{color:var(--nk-text-tertiary)}.nk-calendar-view .cv-day.today .cv-num{background:var(--nk-danger);color:var(--nk-on-accent)}.nk-calendar-view .cv-item{display:block;min-width:0;padding:3px 6px;border-radius:4px;background:var(--nk-bg-card);border:1px solid var(--nk-border);box-shadow:var(--nk-shadow-card);font-size:12.5px;line-height:18px;color:var(--nk-text);text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}.nk-calendar-view .cv-item:hover{background:var(--nk-bg-hover)}.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-secondary)}.nk-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:16px;padding:14px 2px}.nk-gallery.small{grid-template-columns:repeat(auto-fill,minmax(min(180px,100%),1fr));gap:12px}.nk-gallery.large{grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr))}.nk-gallery .nk-card{display:flex;flex-direction:column;min-width:0;margin:0;color:inherit;text-decoration:none;cursor:pointer}.nk-gallery .nk-card>.nk-cover{flex:none;height:auto;aspect-ratio:2 / 1;margin:-10px -12px 10px;border-radius:7px 7px 0 0;overflow:hidden}.nk-gallery.fit .nk-card>.nk-cover:has(>img){background:var(--nk-bg-callout)}.nk-gallery.fit .nk-card>.nk-cover>img{object-fit:contain}.nk-gallery .card-title{min-width:0}.nk-gallery>.nk-new-row{justify-content:center;min-height:64px;border:1px dashed var(--nk-border-strong);border-radius:8px}.nk-field{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:9px 0;--_nk-field-min: 210px}.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:12px;color:var(--nk-text-secondary);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;min-width:0}.nk-field.stacked .f-control,.nk-fields>.nk-field .f-control{width:100%;min-width:0}.nk-field.stacked .nk-input,.nk-field.stacked .nk-textarea,.nk-field.stacked .nk-select,.nk-fields>.nk-field .nk-input,.nk-fields>.nk-field .nk-textarea,.nk-fields>.nk-field .nk-select{width:100%;min-width:0}.nk-field.compact,.nk-fields>.nk-field{padding:0;gap:4px;min-width:0}.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.fit{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.nk-fields>.nk-field{min-width:0}.nk-input,.nk-select,.nk-textarea{font-family:inherit;font-size:14px;line-height:20px;color:var(--nk-text);background:var(--nk-bg-input);border:1px solid var(--nk-border);border-radius:var(--nk-radius);padding:5px 10px;outline:none;transition:border-color .15s,box-shadow .15s;min-width:var(--_nk-field-min, 210px);max-width:100%}.nk-input:hover,.nk-select:hover,.nk-textarea:hover{border-color:var(--nk-border-strong)}.nk-input:focus,.nk-select:focus,.nk-textarea:focus{border-color:color-mix(in srgb,var(--nk-accent) 60%,transparent);box-shadow:0 0 0 2px color-mix(in srgb,var(--nk-accent) 30%,transparent)}.nk-input::placeholder,.nk-textarea::placeholder{color:var(--nk-text-tertiary)}.nk-input.wide,.nk-textarea.wide,.nk-select.wide{width:100%;min-width:0}.nk-input[type=date],.nk-input[type=time],.nk-input[type=datetime-local],.nk-input[type=month]{appearance:none}.nk-input::-webkit-date-and-time-value{text-align:start;min-height:1lh}.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-copy-field{display:flex;align-items:center;gap:2px;min-width:var(--_nk-field-min, 210px);max-width:100%;padding:0 3px 0 10px;font-size:14px;line-height:20px;color:var(--nk-text);background:var(--nk-bg-input);border:1px solid var(--nk-border);border-radius:var(--nk-radius)}.nk-copy-field.wide{width:100%;min-width:0}.nk-copy-field.wrap{align-items:flex-start}.nk-copy-field .cf-value{flex:1 1 auto;min-width:0;padding:5px 6px 5px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;user-select:all}.nk-copy-field.mono .cf-value{font-family:var(--nk-font-mono);font-size:13px}.nk-copy-field.wrap .cf-value{white-space:pre-wrap;overflow-wrap:anywhere}.nk-copy-field .cf-btn{flex:none;height:24px;margin:3px 0;padding:0 8px;border:none;border-radius:4px;background:transparent;font-family:inherit;font-size:13px;color:var(--nk-text-secondary);white-space:nowrap;cursor:pointer}.nk-copy-field .cf-btn:hover{background:var(--nk-bg-hover);color:var(--nk-text)}.nk-copy-field .cf-btn.copied{color:var(--nk-color-green)}.nk-calendar{display:block;width:max-content;max-width:100%;margin-inline:auto;font-size:14px;user-select:none;-webkit-user-select:none}.nk-calendar .cal-head{display:flex;align-items:center;gap:2px;padding:0 0 6px 6px}.nk-calendar .cal-title{flex:1;font-weight:600;white-space:nowrap}.nk-calendar .cal-nav,.nk-calendar-view .cal-nav{display:inline-flex;align-items:center;justify-content:center;height:28px;min-width:28px;padding:0 6px;border:none;border-radius:var(--nk-radius);background:transparent;font-family:inherit;font-size:13px;color:var(--nk-text-secondary);cursor:pointer}.nk-calendar .cal-nav:hover,.nk-calendar-view .cal-nav:hover{background:var(--nk-bg-hover);color:var(--nk-text)}.nk-calendar .cal-nav svg,.nk-calendar-view .cal-nav svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.nk-calendar .cal-grid{display:grid;grid-template-columns:repeat(7,var(--_nk-cell, 36px));row-gap:2px}.nk-calendar.weeks .cal-grid{grid-template-columns:24px repeat(7,var(--_nk-cell, 36px))}.nk-calendar .cal-wd,.nk-calendar .cal-week{display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--nk-text-tertiary);font-variant-numeric:tabular-nums}.nk-calendar .cal-wd{height:24px}.nk-calendar .cal-week{font-size:11px}.nk-calendar .cal-day{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--_nk-cell, 36px);height:var(--_nk-cell, 36px);padding:0;border:none;border-radius:var(--nk-radius);background:transparent;font-family:inherit;font-size:14px;color:var(--nk-text);font-variant-numeric:tabular-nums;cursor:pointer}.nk-calendar .cal-day:hover{background:var(--nk-bg-hover)}.nk-calendar .cal-day:focus-visible{outline:2px solid color-mix(in srgb,var(--nk-accent) 60%,transparent);outline-offset:-2px}.nk-calendar .cal-day.out,.nk-calendar .cal-day.off{color:var(--nk-text-tertiary)}.nk-calendar .cal-day.today{color:var(--nk-danger);font-weight:600}.nk-calendar .cal-day.in-range{border-radius:0;background:color-mix(in srgb,var(--nk-accent) 12%,transparent)}.nk-calendar .cal-day:is(.selected,.start,.end){background:var(--nk-accent);color:var(--nk-on-accent);font-weight:500}.nk-calendar .cal-day.start:not(.end){border-radius:var(--nk-radius) 0 0 var(--nk-radius)}.nk-calendar .cal-day.end:not(.start){border-radius:0 var(--nk-radius) var(--nk-radius) 0}.nk-calendar .cal-day[aria-disabled=true]{color:var(--nk-text-tertiary);background:none;opacity:.5;cursor:default}.nk-calendar .cal-marks{position:absolute;left:0;right:0;bottom:3px;display:flex;justify-content:center;gap:2px;pointer-events:none}.nk-calendar .cal-marks i{width:4px;height:4px;border-radius:50%;background:var(--nk-color-gray)}.nk-calendar .cal-day:is(.selected,.start,.end) .cal-marks i{background:var(--nk-on-accent)}.nk-calendar .cal-foot{display:flex;align-items:center;gap:8px;margin-top:8px;padding:8px 2px 0;border-top:1px solid var(--nk-border)}.nk-calendar .cal-foot .nk-input{min-width:0;flex:1 1 auto}.nk-btn{font-family:inherit;font-size:14px;line-height:20px;font-weight:500;border-radius:var(--nk-radius);cursor:pointer;padding:3px 12px;border:1px solid transparent;transition:background .15s,border-color .15s,box-shadow .15s,opacity .15s;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}.nk-btn svg,.nk-btn ::slotted(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:not(:disabled,[aria-disabled=true]){opacity:.88}.nk-btn.secondary{background:var(--nk-bg-card);color:var(--nk-text);box-shadow:var(--nk-shadow-btn)}.nk-btn.secondary:hover:not(:disabled,[aria-disabled=true]){background:color-mix(in srgb,var(--nk-bg-card),var(--nk-text) 6%)}.nk-btn.danger{background:var(--nk-bg-card);color:var(--nk-danger);box-shadow:var(--nk-shadow-btn)}.nk-btn.danger:hover:not(:disabled,[aria-disabled=true]){background:color-mix(in srgb,var(--nk-danger) 8%,var(--nk-bg-card))}.nk-btn.danger-solid{background:var(--nk-danger);color:var(--nk-on-accent)}.nk-btn.danger-solid:hover:not(:disabled,[aria-disabled=true]){opacity:.88}.nk-btn.small{padding:1px 8px;font-size:13px;line-height:20px}a.nk-btn{text-decoration:none}.nk-btn:disabled,.nk-btn[aria-disabled=true]{opacity:.5;cursor:not-allowed}.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:translate(14px)}.nk-switch:disabled{opacity:.5;cursor:not-allowed}.nk-switch-label{display:inline-flex;align-items:flex-start;gap:8px;font-size:14px;cursor:pointer}.nk-switch-label>.nk-switch{font-size:inherit;line-height:inherit;margin-top:max(0px,calc((1lh - 20px)/2))}.nk-switch-label>span{padding-top:max(0px,calc((20px - 1lh)/2))}.nk-switch-label:has(.nk-switch:disabled){cursor:not-allowed;color:var(--nk-text-tertiary)}.nk-check{display:flex;align-items:flex-start;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);font-size:inherit;line-height:inherit;margin-top:max(0px,calc((1lh - 16px)/2))}.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:\"\\2713\";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:\"\\25cf\";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;overflow:hidden;flex-shrink:0}.nk-profile-row .big-avatar>img{display:block;width:100%;height:100%;object-fit:cover}.nk-profile-row .big-avatar.square,.nk-profile-row ::slotted(.big-avatar.square){border-radius:8px}.nk-profile-row .pr-actions{display:flex;flex-direction:column;gap:6px}.nk-profile-row .pr-remove{color:var(--nk-text-tertiary)}.nk-model-card{border:1px solid var(--nk-border-strong);border-radius:8px;padding:12px 14px;margin-bottom:var(--nk-block-space, 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:12px;color:var(--nk-text-secondary);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:var(--nk-block-space, 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>.nk-member-row:last-child,.nk-member-list ::slotted(.nk-member-row:last-child),.nk-member-row.last{border-bottom:none}.nk-member-row .mini-avatar,.nk-member-row .nk-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>:has(>.m-mail){min-width:0}.nk-member-row .m-mail{font-size:12px;color:var(--nk-text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.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);padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);display:flex;align-items:center;justify-content:center;z-index:100;opacity:0;pointer-events:none;transition:opacity .2s ease}.nk-modal-backdrop.open{opacity:1;pointer-events:auto}.nk-modal{width:min(1150px,92vw);height:min(715px,86vh);max-width:100%;max-height:100%;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 ease}.nk-modal-backdrop.open .nk-modal{transform:none}.nk-settings-nav{width:240px;min-width:240px;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:14px}.nk-settings-user .mail{font-size:12px;color:var(--nk-text-secondary)}.nk-settings-nav .nk-tree-item{min-height:28px}.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 60px 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:800px}.nk-settings-pane.active{display:block}.nk-settings-pane>h2{font-size:22px;font-weight:600;line-height:1.3;margin-bottom:20px}.nk-settings-pane>h3{font-size:16px;font-weight:500;padding-bottom:8px;border-bottom:1px solid var(--nk-border);margin:30px 0 12px}.nk-settings-pane ::slotted(h2){font-size:22px;font-weight:600;line-height:1.3;padding:0!important;margin:0 0 20px!important}.nk-settings-pane ::slotted(h3){font-size:16px;font-weight:500;border:0;border-bottom:1px solid var(--nk-border);padding:0 0 8px!important;margin:30px 0 12px!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:14px;color:var(--nk-text);background:var(--nk-bg-input);border:1px solid var(--nk-border);border-radius:var(--nk-radius);padding:6px 10px;outline:none;margin-bottom:8px}.nk-emoji-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:2px}.nk-emoji-grid span,.nk-emoji-grid ::slotted(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:4px 8px;min-height:var(--_nk-row, 28px);border-radius:5px;cursor:pointer;font-size:14px;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:12px;color:var(--nk-text-tertiary)}.nk-menu-item.danger{color:var(--nk-danger)}.nk-menu-item>.nk-switch{margin-left:auto}.nk-menu-sep{border-top:1px solid var(--nk-border);margin:5px 4px}.nk-menu-label{font-size:12px;color:var(--nk-text-tertiary);padding:5px 8px 2px}.nk-pop.floating{z-index:106;opacity:0;visibility:hidden;pointer-events:none;max-height:min(var(--_nk-float-max, 100dvh),100dvh - 16px);overflow-y:auto;overscroll-behavior:contain;transform:translateY(-4px) scale(.98);transform-origin:top;transition:opacity .15s ease,transform .15s ease,visibility 0s linear .15s}.nk-pop.floating.open{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:opacity .15s ease,transform .15s ease,visibility 0s}.nk-cmdk-backdrop{position:fixed;inset:0;background:var(--nk-scrim-soft);display:flex;justify-content:center;align-items:flex-start;padding:max(14vh,env(safe-area-inset-top,0px)) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);z-index:110;opacity:0;pointer-events:none;transition:opacity .18s ease}.nk-cmdk-backdrop.open{opacity:1;pointer-events:auto}.nk-cmdk{max-width:100%;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 ease}.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:none;background:transparent;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:12px;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:12px;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-sheet-backdrop{position:fixed;inset:0;z-index:100;display:none;flex-direction:column;align-items:center;justify-content:flex-end;padding-top:max(24px,env(safe-area-inset-top,0px));background:var(--nk-scrim-soft);opacity:0;transition:opacity .2s ease,display .25s allow-discrete}.nk-sheet-backdrop.open{display:flex;opacity:1}@starting-style{.nk-sheet-backdrop.open{opacity:0}}.nk-sheet{--_nk-row: 40px;width:100%;max-width:640px;max-height:100%;overflow-y:auto;overscroll-behavior:contain;padding:6px max(10px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(10px,env(safe-area-inset-left,0px));background:var(--nk-bg);color:var(--nk-text);border-radius:14px 14px 0 0;box-shadow:var(--nk-shadow-menu);translate:0 100%;transition:translate .25s cubic-bezier(.2,.8,.2,1)}.nk-sheet-backdrop.open .nk-sheet{translate:none}@starting-style{.nk-sheet-backdrop.open .nk-sheet{translate:0 100%}}.nk-sheet .sh-grabber,.nk-sheet ::slotted(.sh-grabber){width:36px;height:4px;margin:4px auto 10px;border-radius:2px;background:var(--nk-border-strong)}.nk-sheet .sh-title,.nk-sheet ::slotted(.sh-title){font-size:14px;font-weight:600;text-align:center;padding:0 8px 10px}.nk-dialog-backdrop{position:fixed;inset:0;z-index:105;display:none;align-items:center;justify-content:center;padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));background:var(--nk-scrim-soft);opacity:0;transition:opacity .2s ease,display .2s allow-discrete}.nk-dialog-backdrop.open{display:flex;opacity:1}@starting-style{.nk-dialog-backdrop.open{opacity:0}}.nk-dialog{width:440px;max-width:100%;max-height:100%;overflow-y:auto;overscroll-behavior:contain;padding:20px 24px;border-radius:10px;outline:none;background:var(--nk-bg);color:var(--nk-text);box-shadow:var(--nk-shadow-menu);scale:.98;translate:0 6px;transition:scale .2s ease,translate .2s ease}.nk-dialog.wide{width:560px}.nk-dialog-backdrop.open .nk-dialog{scale:none;translate:none}@starting-style{.nk-dialog-backdrop.open .nk-dialog{scale:.98;translate:0 6px}}.nk-dialog .dl-title{font-size:16px;font-weight:600;line-height:1.4;margin-bottom:6px}.nk-dialog .dl-body{font-size:14px;line-height:1.5}.nk-dialog .dl-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}.nk-peek-backdrop{position:fixed;inset:0;z-index:50;display:none;pointer-events:none;transition:background-color .2s ease,display .25s allow-discrete}.nk-peek-backdrop.open{display:block}.nk-peek{--_nk-title: 32px;position:absolute;top:0;right:0;bottom:0;width:min(var(--nk-peek-width),100%);display:flex;flex-direction:column;pointer-events:auto;outline:none;background:var(--nk-bg);color:var(--nk-text);box-shadow:var(--nk-shadow-menu);translate:100% 0;transition:translate .25s cubic-bezier(.2,.8,.2,1)}.nk-peek-backdrop.open .nk-peek{translate:none}@starting-style{.nk-peek-backdrop.open .nk-peek{translate:100% 0}}.nk-peek .pk-bar{flex:none;display:flex;align-items:center;gap:2px;height:44px;padding:0 12px}.nk-peek .pk-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:4px 48px 64px;font-size:16px;line-height:1.5}.nk-peek .pk-resize{position:absolute;top:0;bottom:0;left:-4px;width:8px;z-index:1;cursor:col-resize;touch-action:none;outline:none}.nk-peek .pk-resize:after{content:\"\";position:absolute;top:0;bottom:0;left:3px;width:2px;transition:background .15s}.nk-peek .pk-resize:hover:after,.nk-peek .pk-resize:focus-visible:after,.nk-peek .pk-resize.active:after{background:var(--nk-accent)}.nk-app.peek-inset .nk-main{padding-right:min(var(--nk-peek-width),100%)}.nk-toast{position:fixed;bottom:max(20px,calc(env(safe-area-inset-bottom,0px) + 12px));left:50%;transform:translate(-50%) translateY(80px);z-index:120;width:max-content;max-width:calc(100% - 32px);background:var(--nk-text);color:var(--nk-bg);padding:8px 16px;border-radius:8px;font-size:14px;opacity:0;transition:all .3s ease;pointer-events:none;box-shadow:var(--nk-shadow-menu);display:flex;gap:8px;align-items:center}.nk-toast.show{opacity:1;transform:translate(-50%) translateY(0)}.nk-tooltip{z-index:130;max-width:260px;padding:4px 8px;border-radius:var(--nk-radius);overflow-wrap:break-word;background:var(--nk-text);color:var(--nk-bg);box-shadow:var(--nk-shadow-menu);font-size:12px;font-weight:500;line-height:16px;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .1s ease,visibility 0s linear .1s}.nk-tooltip.open{opacity:1;visibility:visible;transition:opacity .1s ease}.nk-tooltip .tt-key{margin-left:6px;color:color-mix(in srgb,var(--nk-bg) 60%,transparent)}.nk-tooltip.lines{white-space:pre-line}.nk-gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:20px 32px;margin:var(--nk-block-space, 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-tabs.scroll{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;white-space:nowrap;border-bottom:0;padding-bottom:1px;box-shadow:inset 0 -1px 0 var(--nk-border)}.nk-tabs.scroll::-webkit-scrollbar{display:none}.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:var(--nk-block-space, 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-secondary);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:12px;margin-top:3px}.nk-stat .s-delta.up,.nk-stat ::slotted(.s-delta.up),.nk-stat ::slotted([slot=\"delta\"].up){color:var(--nk-color-green)}.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:var(--nk-block-space, 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:14px;border:none;background:transparent;color:var(--nk-text-secondary);padding:4px 12px;border-radius:5px;cursor:pointer}.nk-segmented ::slotted(button){font-family:inherit;font-size:14px;border:none;background:transparent;color:var(--nk-text-secondary);padding:4px 12px!important;border-radius:5px;cursor:pointer}.nk-segmented button.active,.nk-segmented ::slotted(button.active){background:var(--nk-bg);color:var(--nk-text);font-weight:500;box-shadow:var(--nk-shadow-segment)}.nk-segmented.wrap{flex-wrap:wrap}.nk-segmented.scroll{max-width:100%;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}.nk-segmented.scroll::-webkit-scrollbar{display:none}.nk-segmented.scroll button,.nk-segmented.scroll ::slotted(button){flex-shrink:0;white-space:nowrap}.nk-banner{display:flex;align-items:center;gap:10px;font-size:14px;border-radius:8px;padding:10px 14px;margin-bottom:var(--nk-block-space, 8px);color:var(--nk-text)}.nk-banner.info{background:var(--nk-tint-blue)}.nk-banner.success{background:var(--nk-tint-green)}.nk-banner.warning{background:var(--nk-tint-yellow)}.nk-banner.danger{background:var(--nk-tint-red)}.nk-banner .b-action,.nk-banner ::slotted(.b-action),.nk-banner ::slotted([slot=\"action\"]){margin-left:auto;padding:0;border:0;background:none;color:inherit;font:inherit;font-weight:500;text-align:left;cursor:pointer;text-decoration:underline;text-underline-offset:2px}.nk-banner ::slotted(.b-action),.nk-banner ::slotted([slot=\"action\"]){margin-left:auto!important}.nk-avatar-group{display:flex}.nk-avatar-group .mini-avatar,.nk-avatar-group .nk-avatar,.nk-avatar-group ::slotted(.mini-avatar),.nk-avatar-group ::slotted(.nk-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 .nk-avatar:first-child,.nk-avatar-group ::slotted(.mini-avatar:first-child),.nk-avatar-group ::slotted(.nk-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-avatar{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:24px;height:24px;border-radius:50%;overflow:hidden;vertical-align:middle;font-size:10px;font-weight:600;line-height:1;color:var(--nk-on-accent);user-select:none;background:linear-gradient(135deg,var(--nk-decor-purple),var(--nk-decor-blue));object-fit:cover}.nk-avatar.small{width:20px;height:20px;font-size:9px}.nk-avatar.large{width:32px;height:32px;font-size:12px}.nk-avatar.xlarge{width:56px;height:56px;font-size:20px}.nk-avatar.square{border-radius:4px}.nk-avatar>img,.nk-avatar ::slotted(img){display:block;width:100%;height:100%;object-fit:cover}.nk-avatar.gray,.nk-calendar .cal-marks i.gray{background:var(--nk-color-gray)}.nk-avatar.brown,.nk-calendar .cal-marks i.brown{background:var(--nk-color-brown)}.nk-avatar.orange,.nk-calendar .cal-marks i.orange{background:var(--nk-color-orange)}.nk-avatar.yellow,.nk-calendar .cal-marks i.yellow{background:var(--nk-color-yellow)}.nk-avatar.green,.nk-calendar .cal-marks i.green{background:var(--nk-color-green)}.nk-avatar.blue,.nk-calendar .cal-marks i.blue{background:var(--nk-color-blue)}.nk-avatar.purple,.nk-calendar .cal-marks i.purple{background:var(--nk-color-purple)}.nk-avatar.pink,.nk-calendar .cal-marks i.pink{background:var(--nk-color-pink)}.nk-avatar.red,.nk-calendar .cal-marks i.red{background:var(--nk-color-red)}.nk-panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:12px;margin:var(--nk-block-space, 12px) 0}.nk-panels.flush{margin:0}.nk-panel{display:flex;flex-direction:column;gap:6px;min-width:0;--_nk-field-min: min(210px, 100%);padding:14px 16px;border:1px solid var(--nk-border);border-radius:10px;background:var(--nk-bg-card);box-shadow:var(--nk-shadow-card);font-size:14px;line-height:1.5;color:inherit;text-decoration:none;text-align:left}:is(a,button).nk-panel{cursor:pointer;font-family:inherit;transition:border-color .15s,background .15s}:is(a,button).nk-panel:hover{border-color:var(--nk-border-strong)}.nk-panel>h3,.nk-panel>.p-head>h3{font-size:14px;font-weight:600;line-height:1.4}.nk-panel ::slotted(h3){font-size:14px;font-weight:600;line-height:1.4;margin:0!important}.nk-panel>p{font-size:13px;color:var(--nk-text-secondary)}.nk-panel ::slotted(p){font-size:13px;color:var(--nk-text-secondary);margin:0!important}.nk-panel>.p-head{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-width:0}.nk-panel>.p-head>h3{flex:1 1 auto;min-width:0}.nk-panel .p-end{flex:none;display:flex;align-items:center;gap:6px;margin-left:auto}.nk-panel>.nk-cover{flex:none;height:var(--nk-panel-cover-height);margin:-14px -16px 2px;border-radius:9px 9px 0 0}.nk-panel>.nk-page-icon{font-size:28px}.nk-panel>.nk-cover+.nk-page-icon{margin-top:-24px}.nk-skeleton{border-radius:5px;margin-bottom:var(--nk-block-space, 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:nk-shimmer 1.6s infinite}@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:13px;margin-bottom:12px}.nk-empty .e-actions,.nk-empty ::slotted(.e-actions){display:flex;flex-wrap:wrap;justify-content:center;gap:8px}.nk-steps{display:flex;flex-direction:column;margin:var(--nk-block-space, 8px) 0;padding:0;list-style:none;font-size:14px}.nk-step{position:relative;display:flex;align-items:flex-start;gap:10px;padding-bottom:14px;line-height:20px;color:var(--nk-text-tertiary)}.nk-step:last-child{padding-bottom:0}.nk-step:not(:last-child):after{content:\"\";position:absolute;left:10px;top:24px;bottom:4px;width:1px;background:var(--nk-border)}.nk-step .st-mark{flex:none;width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--nk-border-strong);background:var(--nk-bg);font-size:11px;font-weight:600;line-height:1}.nk-step .st-desc{display:block;font-size:12px;line-height:18px;color:var(--nk-text-tertiary);font-weight:400}.nk-step.done{color:var(--nk-text-secondary)}.nk-step.done .st-mark{background:var(--nk-tag-green-bg);color:var(--nk-tag-green-text);border-color:transparent}.nk-step.current{color:var(--nk-text);font-weight:500}.nk-step.current .st-mark{border-color:var(--nk-accent);color:var(--nk-accent)}.nk-step.skipped .st-mark{border-style:dashed}.nk-step button.st-label{font:inherit;color:inherit;text-align:left;background:none;border:0;border-radius:3px;cursor:pointer}.nk-step button.st-label:hover{text-decoration:underline;text-decoration-color:var(--nk-text-tertiary);text-underline-offset:2px}.nk-step button.st-label:focus-visible{outline:2px solid color-mix(in srgb,var(--nk-accent) 60%,transparent);outline-offset:2px}.nk-steps.horizontal{flex-direction:row;align-items:flex-start;gap:10px}.nk-steps.horizontal .nk-step{flex:none;padding-bottom:0;min-width:0;white-space:nowrap}.nk-steps.horizontal .nk-step:not(:last-child){flex:1 1 auto}.nk-steps.horizontal .nk-step:not(:last-child):after{position:static;flex:1 1 16px;width:auto;min-width:16px;height:1px;margin-top:10px}.nk-comments{border-left:1px solid var(--nk-border);padding:4px 0 4px 18px;margin:var(--nk-block-space, 8px) 0 var(--nk-block-space, 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:12px;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:14px;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-msg.user.bubble{justify-content:flex-end}.nk-ai-msg.bubble .a-body,.nk-ai-msg.bubble ::slotted(.a-body){max-width:85%;padding:6px 12px;border-radius:16px;background:var(--nk-bg-callout)}.nk-ai-actions{display:flex;gap:4px;margin-top:6px}.nk-ai-actions button{font-family:inherit;font-size:12px;color:var(--nk-text-secondary);background:transparent;border:1px solid var(--nk-border);border-radius:5px;padding:2px 8px;cursor:pointer}.nk-ai-actions ::slotted(button){font-family:inherit;font-size:12px;color:var(--nk-text-secondary);background:transparent;border:1px solid var(--nk-border);border-radius:5px;padding:2px 8px!important;cursor:pointer}.nk-ai-actions button:hover,.nk-ai-actions ::slotted(button:hover){background:var(--nk-bg-hover);color:var(--nk-text)}.nk-ai-input-row{display:flex;align-items:center;gap:8px;margin-top:var(--nk-block-space, 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:none;background:transparent;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:var(--nk-block-space, 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:transparent;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:transparent}.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 button,.nk-block-host .nk-block-actions ::slotted(button){width:20px;height:22px;padding:0;border:none;border-radius:4px;background:transparent;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-prose,.nk-block-host .ProseMirror{font-family:var(--nk-font);line-height:1.5;color:var(--nk-text);overflow-wrap:break-word}.nk-block-host .ProseMirror{outline:none;min-height:60px;padding:4px 2px}.nk-prose>*+*,.nk-block-host .ProseMirror>*+*{margin-top:6px}.nk-prose h1,.nk-block-host .ProseMirror h1{font-size:1.875em;font-weight:600;line-height:1.3;letter-spacing:-.01em;margin:32px 0 4px}.nk-prose h2,.nk-block-host .ProseMirror h2{font-size:1.5em;font-weight:600;line-height:1.3;margin:24px 0 4px}.nk-prose h3,.nk-block-host .ProseMirror h3{font-size:1.25em;font-weight:600;line-height:1.3;margin:16px 0 2px}.nk-prose :is(h4,h5,h6),.nk-block-host .ProseMirror :is(h4,h5,h6){font-size:1em;font-weight:600;margin:12px 0 0}.nk-prose>:first-child,.nk-block-host .ProseMirror>:first-child{margin-top:0}.nk-prose>:last-child,.nk-block-host .ProseMirror>:last-child{margin-bottom:0}.nk-prose p:empty:before{content:\"\";display:inline-block}.nk-prose :is(strong,b),.nk-block-host .ProseMirror :is(strong,b){font-weight:600}.nk-prose :is(ul,ol),.nk-block-host .ProseMirror :is(ul,ol){padding-left:24px;margin:4px 0}.nk-prose ul,.nk-block-host .ProseMirror ul{list-style:disc}.nk-prose ol,.nk-block-host .ProseMirror ol{list-style:decimal}.nk-prose li,.nk-block-host .ProseMirror li{margin:2px 0}.nk-prose li::marker,.nk-block-host .ProseMirror li::marker{color:var(--nk-text-tertiary)}.nk-prose ul[data-type=taskList],.nk-block-host .ProseMirror ul[data-type=taskList]{list-style:none;padding-left:2px}.nk-prose ul[data-type=taskList] li,.nk-block-host .ProseMirror ul[data-type=taskList] li{display:flex;gap:8px;align-items:flex-start}.nk-prose ul[data-type=taskList] li>label,.nk-block-host .ProseMirror ul[data-type=taskList] li>label{flex-shrink:0;margin-top:max(0px,calc((1lh - 16px)/2));user-select:none}.nk-prose ul[data-type=taskList] li>div,.nk-block-host .ProseMirror ul[data-type=taskList] li>div{flex:1;min-width:0}.nk-prose ul[data-type=taskList] input[type=checkbox],.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-prose ul[data-type=taskList] input[type=checkbox]:checked,.nk-block-host .ProseMirror ul[data-type=taskList] input[type=checkbox]:checked{background:var(--nk-accent);border-color:var(--nk-accent)}.nk-prose ul[data-type=taskList] input[type=checkbox]:checked:after,.nk-block-host .ProseMirror ul[data-type=taskList] input[type=checkbox]:checked:after{content:\"\\2713\";color:var(--nk-on-accent);font-size:11px;position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.nk-prose li[data-checked=true]>div,.nk-block-host .ProseMirror li[data-checked=true]>div{text-decoration:line-through;color:var(--nk-text-tertiary)}.nk-prose blockquote,.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-prose code,.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-prose pre,.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-prose pre code,.nk-block-host .ProseMirror pre code{background:none;color:inherit;padding:0;font-size:inherit}.nk-prose hr,.nk-block-host .ProseMirror hr{border:none;border-top:1px solid var(--nk-border);margin:20px 0}.nk-prose a,.nk-block-host .ProseMirror a{color:var(--nk-accent);text-decoration:underline;text-underline-offset:2px}.nk-prose img{max-width:100%;height:auto}.nk-prose table{display:block;width:max-content;max-width:100%;overflow-x:auto;border-collapse:collapse;font-size:14px;margin:12px 0}.nk-prose :is(th,td){padding:6px 10px;border:1px solid var(--nk-border);text-align:left;vertical-align:top}.nk-prose th{font-weight:600}.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-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 p.is-editor-empty:first-child:before,.nk-block-host .ProseMirror .is-empty: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:transparent}.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-slash-menu,.nk-block-host .bn-suggestion-menu,.nk-block-host .tippy-box{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:14px;color:var(--nk-text)}.nk-slash-menu-label{font-size:12px;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:hover,.nk-slash-item.selected{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:12px;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:transparent;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:transparent;color:var(--nk-text-secondary);padding:4px 8px!important;border-radius:5px;cursor:pointer}.nk-bubble-menu button:hover,.nk-bubble-menu ::slotted(button:hover){background:var(--nk-bg-hover);color:var(--nk-text)}.nk-bubble-menu button.active,.nk-bubble-menu ::slotted(button.active){color:var(--nk-accent)}@media(max-width:860px){.nk-sidebar{display:none;position:fixed;inset:0 auto 0 0;z-index:60;transform:translate(-100%);transition:background .25s ease,transform .24s cubic-bezier(.2,.8,.25,1),display .24s allow-discrete}.nk-sidebar.open{display:flex;transform:none}@starting-style{.nk-sidebar.open{transform:translate(-100%)}}.nk-sidebar-backdrop{opacity:0;transition:opacity .24s ease,display .24s allow-discrete}.nk-sidebar-backdrop.open{display:block;opacity:1}@starting-style{.nk-sidebar-backdrop.open{opacity:0}}.nk-sidebar-toggle{display:inline-flex}.nk-sidebar.collapsed{margin-left:0;visibility:visible;transition:background .25s ease,transform .24s cubic-bezier(.2,.8,.25,1),display .24s allow-discrete}.nk-sidebar-collapse{display:none}.nk-tab-bar{display:flex}.nk-tab-bar.fixed+.nk-tab-bar-spacer{display:block}.nk-page{padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px));padding-bottom: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:max(6vh,env(safe-area-inset-top,0px))}.nk-cmdk{width:min(560px,96vw)}.nk-stats{flex-wrap:wrap}.nk-breadcrumb{min-width:0}.nk-breadcrumb>.crumb:not(:last-child),.nk-breadcrumb ::slotted(.crumb:not(:last-child)),.nk-breadcrumb>.sep,.nk-breadcrumb ::slotted(.sep),.nk-topbar-meta,.nk-topbar-actions ::slotted(.nk-topbar-meta){display:none}.nk-breadcrumb>.crumb:last-child,.nk-breadcrumb ::slotted(.crumb:last-child){display:block;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nk-topbar-actions{flex-shrink:0}.nk-field{flex-wrap:wrap;row-gap:6px}.nk-field .f-control,.nk-field ::slotted(.f-control){max-width:100%;min-width:0}.nk-input,.nk-select,.nk-textarea,.nk-slider{max-width:100%}.nk-prop{flex-direction:column;align-items:stretch}.nk-prop .p-name{flex:none;min-height:26px}.nk-prop .p-value{flex:none;min-height:30px;padding:3px 6px 7px}.nk-steps.horizontal .nk-step:not(.current)>:not(.st-mark){display:none}.nk-pop.sheet{position:fixed!important;inset:auto 0 0!important;width:auto!important;transform:none!important;z-index:106;--_nk-row: 40px;max-height:85dvh;overflow-y:auto;overscroll-behavior:contain;border-radius:14px 14px 0 0;padding:6px max(8px,env(safe-area-inset-right,0px)) max(12px,env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px));box-shadow:0 0 0 100vmax var(--nk-scrim-soft),var(--nk-shadow-menu)}.nk-pop.sheet:before{content:\"\";display:block;width:36px;height:4px;margin:4px auto 8px;border-radius:2px;background:var(--nk-border-strong)}.nk-pop.sheet.floating{translate:0 100%;transition:opacity .2s ease,translate .25s cubic-bezier(.2,.8,.2,1),visibility 0s linear .25s}.nk-pop.sheet.floating.open{translate:none;transition:opacity .2s ease,translate .25s cubic-bezier(.2,.8,.2,1),visibility 0s}.nk-pop.sheet,.nk-sheet{--_nk-cell: 44px}.nk-calendar-view .cv-day{min-height:64px;padding:2px 2px 4px}.nk-calendar-view .cv-item{padding:1px 4px;font-size:11px;line-height:16px}.nk-peek-backdrop{pointer-events:auto}.nk-peek-backdrop.open{background-color:var(--nk-scrim-soft)}@starting-style{.nk-peek-backdrop.open{background-color:transparent}}.nk-peek{--_nk-title: 28px;top:auto;left:0;width:auto;max-height:92dvh;border-radius:14px 14px 0 0;translate:0 100%}.nk-peek-backdrop.open .nk-peek{translate:none}@starting-style{.nk-peek-backdrop.open .nk-peek{translate:0 100%}}.nk-peek:before{content:\"\";flex:none;width:36px;height:4px;margin:10px auto 0;border-radius:2px;background:var(--nk-border-strong)}.nk-peek .pk-bar{height:40px;padding:0 max(8px,env(safe-area-inset-right,0px)) 0 max(8px,env(safe-area-inset-left,0px))}.nk-peek .pk-body{padding:0 max(20px,env(safe-area-inset-right,0px)) max(24px,env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px))}.nk-peek .pk-resize{display:none}.nk-banner{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline}.nk-banner .b-action,.nk-banner ::slotted(.b-action),.nk-banner ::slotted([slot=\"action\"]){grid-column:1 / -1;justify-self:start;margin-left:0}.nk-banner ::slotted(.b-action),.nk-banner ::slotted([slot=\"action\"]){margin-left:0!important}.nk-app.peek-inset .nk-main{padding-right:0}.nk-dialog-backdrop{flex-direction:column;justify-content:flex-end;padding:max(24px,env(safe-area-inset-top,0px)) 0 0}.nk-dialog{width:100%;max-width:640px;border-radius:14px 14px 0 0;scale:none;translate:0 100%;padding:6px max(20px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px));transition:translate .25s cubic-bezier(.2,.8,.2,1)}.nk-dialog.wide{width:100%}.nk-dialog-backdrop.open .nk-dialog{translate:none}@starting-style{.nk-dialog-backdrop.open .nk-dialog{translate:0 100%}}.nk-dialog:before{content:\"\";display:block;width:36px;height:4px;margin:4px auto 14px;border-radius:2px;background:var(--nk-border-strong)}.nk-dialog .dl-actions{flex-direction:column-reverse}:root:has(.nk-tab-bar:not([hidden])) .nk-toast{bottom:calc(var(--nk-tab-bar-height) + max(6px,env(safe-area-inset-bottom,0px)) + 6px)}:root:has(.nk-tab-bar.floating:not([hidden])) .nk-toast{bottom:calc(var(--nk-tab-bar-height) + 24px + env(safe-area-inset-bottom,0px))}}@media(prefers-reduced-motion:reduce){.nk-skeleton{animation:none;background:var(--nk-bg-callout)}[class*=nk-],[class*=nk-]:before,[class*=nk-]:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}\n";
9
+ const componentsTail = ".nk-body{margin:0;min-height:100vh;min-height:100dvh;font-family:var(--nk-font);font-size:14px;background:var(--nk-bg);color:var(--nk-text);-webkit-font-smoothing:auto;transition:background .25s ease,color .25s ease}.nk-app{display:flex;height:100vh;height:100dvh;overflow:hidden}.nk-sidebar{width:calc(var(--nk-sidebar-width) + env(safe-area-inset-left,0px));min-width:calc(var(--nk-sidebar-width) + env(safe-area-inset-left,0px));padding-left:env(safe-area-inset-left,0px);background:var(--nk-bg-sidebar);display:flex;flex-direction:column;border-right:1px solid var(--nk-border);transition:background .25s ease,margin-left .24s cubic-bezier(.2,.8,.25,1)}.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:12px;font-weight:500;letter-spacing:.01em;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-sidebar);font-size:14px}.nk-sidebar-footer .nk-tree-item{min-height:26px}.nk-sidebar-backdrop{display:none;position:fixed;inset:0;z-index:59;background:var(--nk-scrim-soft)}.nk-sidebar-toggle{display:none}.nk-sidebar.collapsed{margin-left:calc(0px - var(--nk-sidebar-width) - env(safe-area-inset-left,0px));visibility:hidden;transition:background .25s ease,margin-left .24s cubic-bezier(.2,.8,.25,1),visibility 0s linear .24s}.nk-sidebar-toggle.collapsed{display:inline-flex}.nk-sidebar-head{display:flex;align-items:center}.nk-sidebar-head>.nk-workspace,.nk-sidebar-head ::slotted(.nk-workspace){flex:1;min-width:0}.nk-sidebar-collapse{flex:none;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;margin:4px 12px 0 -4px;padding:0;border:none;border-radius:var(--nk-radius);background:transparent;color:var(--nk-text-tertiary);cursor:pointer;opacity:0;transition:opacity .15s}.nk-sidebar:hover .nk-sidebar-collapse,.nk-sidebar-collapse:focus-visible{opacity:1}.nk-sidebar-collapse:hover{background:var(--nk-bg-hover);color:var(--nk-text)}.nk-sidebar-collapse svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.nk-main{flex:1;display:flex;flex-direction:column;min-width:0}.nk-topbar{height:44px;display:flex;align-items:center;padding:0 max(12px,env(safe-area-inset-right,0px)) 0 max(12px,env(safe-area-inset-left,0px));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-sidebar);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-sidebar);font-size:14px;user-select:none;border:none;background:transparent;font-family:inherit}.nk-topbar-btn:hover{background:var(--nk-bg-hover)}.nk-topbar-btn svg,.nk-topbar-btn ::slotted(svg){width:16px;height:16px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.nk-share-btn{font-size:14px;padding:4px 8px}.nk-topbar-meta,.nk-topbar-actions ::slotted(.nk-topbar-meta){padding:4px 8px;font-size:12px;color:var(--nk-text-tertiary);white-space:nowrap}.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;box-sizing:border-box;height:calc(var(--nk-tab-bar-height) - 6px + max(6px,env(safe-area-inset-bottom,0px)));padding:6px max(4px,env(safe-area-inset-right,0px)) max(6px,env(safe-area-inset-bottom,0px)) max(4px,env(safe-area-inset-left,0px));background:var(--nk-bg-sidebar);border-top:1px solid var(--nk-border)}.nk-tab-bar.always{display:flex}.nk-tab-bar.fixed{position:fixed;left:0;right:0;bottom:0}.nk-tab-bar-spacer{display:none;flex:none;height:calc(var(--nk-tab-bar-height) - 6px + max(6px,env(safe-area-inset-bottom,0px)))}.nk-tab-bar.always.fixed+.nk-tab-bar-spacer{display:block}.nk-tab-bar.floating{position:fixed;left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));bottom:calc(12px + env(safe-area-inset-bottom,0px));height:var(--nk-tab-bar-height);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;justify-content:center;gap:2px;padding:4px 2px;border:none;border-radius:var(--nk-radius);background:transparent;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-sidebar);position:relative;min-height:var(--_nk-row, 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:var(--nk-cover-height);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-cover>img,.nk-cover ::slotted(img){display:block;width:100%;height:100%;object-fit:cover}.nk-page{max-width:760px;margin:0 auto;padding:24px max(64px,env(safe-area-inset-right,0px)) 120px max(64px,env(safe-area-inset-left,0px));font-size:16px;line-height:1.5}.nk-page.full{max-width:var(--nk-page-full-max)}.nk-page.small{font-size:14px}.nk-cover+.nk-page:has(>.nk-page-icon:not([hidden])),.nk-page.covered{padding-top:0}.nk-page-icon,.nk-page ::slotted(.nk-page-icon),.nk-page ::slotted([slot=\"icon\"]){font-size:64px;line-height:1;margin-top:0;cursor:pointer;user-select:none;display:inline-block}.nk-cover+.nk-page .nk-page-icon,.nk-cover+.nk-page ::slotted(.nk-page-icon),.nk-cover+.nk-page ::slotted([slot=\"icon\"]),.nk-page.covered .nk-page-icon,.nk-page.covered ::slotted(.nk-page-icon),.nk-page.covered ::slotted([slot=\"icon\"]){margin-top:-42px}.nk-page-title{font-size:var(--_nk-title, 40px);font-weight:700;line-height:1.2;margin:8px 0 4px;outline:none;letter-spacing:0}.nk-page-meta{color:var(--nk-text-tertiary);font-size:13px;margin-bottom:24px;display:flex;gap:16px}.nk-props{display:flex;flex-direction:column;margin:0 0 var(--nk-block-space, 20px);font-size:14px;line-height:1.5}.nk-props.flush{margin:0}.nk-prop{display:flex;flex-wrap:wrap;align-items:flex-start;min-width:0}.nk-prop .p-name{flex:0 0 160px;min-width:0;min-height:34px;padding:0 6px;display:flex;align-items:center;gap:6px;overflow:hidden;border-radius:var(--nk-radius);color:var(--nk-text-secondary);white-space:nowrap;user-select:none}.nk-prop .p-icon,.nk-prop ::slotted([slot=\"icon\"]){width:16px;flex-shrink:0;text-align:center;font-size:13px}.nk-prop .p-value{flex:1 1 220px;min-width:0;min-height:34px;padding:5px 8px;display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px;border-radius:var(--nk-radius);overflow-wrap:anywhere}.nk-prop .p-value.text{display:block;align-content:center}.nk-prop .p-name:hover,.nk-prop .p-value:hover{background:var(--nk-bg-hover)}.nk-page p.lead{font-size:1em;line-height:1.6;color:var(--nk-text-secondary);margin-bottom:20px}.nk-page ::slotted(p.lead){font-size:1em;line-height:1.6;color:var(--nk-text-secondary);margin-bottom:20px!important}.nk-heading{font-size:1.5em;font-weight:600;line-height:1.3;margin:32px 0 10px;display:flex;align-items:center;gap:8px}:is(.nk-props,.nk-callout,.nk-bookmark,.nk-toggle,.nk-divider,.nk-quote,.nk-code,.nk-database,.nk-danger-zone,.nk-gallery-grid,.nk-template-btn,.nk-synced,.nk-banner,.nk-panels,.nk-skeleton,.nk-steps,.nk-comments,.nk-block-host,.nk-model-card,.nk-ai-input-row).flush{margin-top:0;margin-bottom:0}.nk-callout{display:flex;gap:10px;align-items:flex-start;background:var(--nk-bg-callout);border-radius:var(--nk-radius);padding:16px 16px 16px 12px;margin:var(--nk-block-space, 16px) 0;line-height:1.5}.nk-callout .c-icon,.nk-callout ::slotted(.c-icon),.nk-callout ::slotted([slot=\"icon\"]){font-size:17px}.nk-bookmark{display:flex;min-width:0;margin:var(--nk-block-space, 8px) 0;overflow:hidden;border:1px solid var(--nk-border);border-radius:var(--nk-radius);color:var(--nk-text);text-decoration:none;transition:background .12s ease}.nk-bookmark:hover{background:var(--nk-bg-hover)}.nk-bookmark .bm-text{flex:1 1 0;min-width:0;padding:12px 14px 14px;font-size:14px;line-height:20px}.nk-bookmark .bm-title{display:block;min-height:24px;margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nk-bookmark .bm-desc{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;max-height:32px;font-size:12px;line-height:16px;color:var(--nk-text-secondary)}.nk-bookmark .bm-url{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:12px;line-height:16px;white-space:nowrap}.nk-bookmark .bm-url>span{min-width:0;overflow:hidden;text-overflow:ellipsis}.nk-bookmark .bm-favicon{flex:none;width:16px;height:16px}.nk-bookmark .bm-cover{position:relative;flex:0 0 33%;max-width:240px}.nk-bookmark .bm-cover>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.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:\"\\2713\";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:var(--nk-block-space, 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:\"\\25b8\";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:var(--nk-block-space, 24px) 0}.nk-quote{border-left:3px solid var(--nk-text);padding:2px 0 2px 14px;margin:var(--nk-block-space, 16px) 0;color:var(--nk-text-secondary);line-height:1.5}.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 .nk-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-color-orange)}.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:var(--nk-block-space, 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-color-orange)}.nk-database{margin:var(--nk-block-space, 12px) 0 var(--nk-block-space, 8px)}.nk-db-tabs{display:flex;gap:2px;align-items:center;padding:0 0 6px;margin-bottom:0;font-size:14px}.nk-db-tab{padding:4px 8px;cursor:pointer;color:var(--nk-text-secondary);border-radius:var(--nk-radius);user-select:none;line-height:20px;display:flex;align-items:center;gap:6px;flex-shrink:0;white-space:nowrap}.nk-db-tab:hover{color:var(--nk-text);background:var(--nk-bg-hover)}.nk-db-tab.active{color:var(--nk-text);background:var(--nk-bg-active);font-weight:500}.nk-db-tab.add{color:var(--nk-text-tertiary)}.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-db-toolbar{display:flex;align-items:center;gap:8px;min-width:0;padding-bottom:6px}.nk-db-toolbar>.nk-db-tabs{flex:1 1 auto;min-width:0;padding-bottom:0;overflow-x:auto;scrollbar-width:none}.nk-db-toolbar>.nk-db-tabs::-webkit-scrollbar{display:none}.nk-db-toolbar .tools{flex:none;display:flex;align-items:center;gap:4px;margin-left:auto}.nk-db-tool{display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 8px;border:none;border-radius:var(--nk-radius);background:transparent;font-family:inherit;font-size:14px;color:var(--nk-text-secondary);white-space:nowrap;cursor:pointer;user-select:none}.nk-db-tool:hover{background:var(--nk-bg-hover);color:var(--nk-text)}.nk-db-tool.active{color:var(--nk-accent)}.nk-filter-row{display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding:2px 0 8px}.nk-filter-pill{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 8px;border:1px solid var(--nk-border-strong);border-radius:12px;background:transparent;font-family:inherit;font-size:13px;line-height:1;color:var(--nk-text-secondary);white-space:nowrap;cursor:pointer;user-select:none}.nk-filter-pill:hover{background:var(--nk-bg-hover)}.nk-filter-pill.active{color:var(--nk-accent);border-color:color-mix(in srgb,var(--nk-accent) 35%,transparent);background:color-mix(in srgb,var(--nk-accent) 6%,transparent)}.nk-filter-pill.add{border-color:transparent;color:var(--nk-text-tertiary)}.nk-filter-pill.add:hover{color:var(--nk-text-secondary)}.nk-filter-pill button{padding:0;border:none;background:none;font:inherit;color:inherit;cursor:pointer}.nk-filter-pill .fp-remove{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-right:-4px;border-radius:50%;font-size:13px}.nk-filter-pill .fp-remove:hover{background:color-mix(in srgb,currentColor 15%,transparent)}.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-secondary);height:36px;padding:0 8px;border-bottom:1px solid var(--nk-border);border-right:1px solid var(--nk-border);font-size:14px;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:6px;font-size:13px;color:var(--nk-text-tertiary)}.nk-table td{height:36px;padding:6px 8px;line-height:1.5;border-bottom:1px solid var(--nk-border);border-right:1px solid var(--nk-border);white-space:nowrap;vertical-align:middle}.nk-table th:last-child,.nk-table td:last-child{border-right:none}.nk-table.wrap td,.nk-table td.wrap{white-space:normal;vertical-align:top}.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 .num{text-align:right;font-variant-numeric:tabular-nums}.nk-table .row-actions{display:flex;justify-content:flex-end;gap:4px}.nk-table th.actions{cursor:default}.nk-table th.actions:hover{background:none}.nk-table .td-desc{display:block;font-size:12px;line-height:16px;color:var(--nk-text-tertiary)}.nk-table .td-text.gray{color:var(--nk-color-gray)}.nk-table .td-text.brown{color:var(--nk-color-brown)}.nk-table .td-text.orange{color:var(--nk-color-orange)}.nk-table .td-text.yellow{color:var(--nk-color-yellow)}.nk-table .td-text.green{color:var(--nk-color-green)}.nk-table .td-text.blue{color:var(--nk-color-blue)}.nk-table .td-text.purple{color:var(--nk-color-purple)}.nk-table .td-text.pink{color:var(--nk-color-pink)}.nk-table .td-text.red{color:var(--nk-color-red)}.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;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-flex;align-items:center;max-width:100%;height:20px;padding:0 6px;border-radius:3px;font-size:14px;font-weight:400;line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;background:var(--nk-tag-gray-bg);color:var(--nk-tag-gray-text)}.nk-tag.gray{background:var(--nk-tag-gray-bg);color:var(--nk-tag-gray-text)}.nk-tag.brown{background:var(--nk-tag-brown-bg);color:var(--nk-tag-brown-text)}.nk-tag.orange{background:var(--nk-tag-orange-bg);color:var(--nk-tag-orange-text)}.nk-tag.yellow{background:var(--nk-tag-yellow-bg);color:var(--nk-tag-yellow-text)}.nk-tag.green{background:var(--nk-tag-green-bg);color:var(--nk-tag-green-text)}.nk-tag.blue{background:var(--nk-tag-blue-bg);color:var(--nk-tag-blue-text)}.nk-tag.purple{background:var(--nk-tag-purple-bg);color:var(--nk-tag-purple-text)}.nk-tag.pink{background:var(--nk-tag-pink-bg);color:var(--nk-tag-pink-text)}.nk-tag.red{background:var(--nk-tag-red-bg);color:var(--nk-tag-red-text)}.nk-progress{width:110px;height:6px;border-radius:3px;background:var(--nk-tint-blue);overflow:hidden;display:inline-block}.nk-progress>i{display:block;height:100%;background:var(--nk-color-blue);border-radius:3px}.nk-progress.wide{width:100%;flex:1 1 60px;max-height:6px}.nk-progress-label{font-size:12px;color:var(--nk-text-tertiary);margin-left:7px;white-space:nowrap}.nk-progress-row{display:inline-flex;align-items:center;max-width:100%;vertical-align:middle}.nk-progress-row:has(>.nk-progress.wide){display:flex;flex:1 1 60px;width:100%;max-height:max-content}.nk-list{display:flex;flex-direction:column;font-size:14px}.nk-list-item{display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden;min-height:36px;padding:4px 6px;border-bottom:1px solid var(--nk-border);color:inherit;text-decoration:none;cursor:pointer}.nk-list-item:hover{background:var(--nk-bg-hover)}.nk-list-item.static{cursor:default}.nk-list-item.static:hover{background:none}.nk-list>.nk-list-item:last-child,.nk-list ::slotted(.nk-list-item:last-child),.nk-list-item.last{border-bottom:none}.nk-list-item .l-icon,.nk-list-item ::slotted([slot=\"icon\"]){width:20px;flex-shrink:0;text-align:center;font-size:15px}.nk-list-item .l-title,.nk-list-item ::slotted(.l-title){flex:1 1 auto;min-width:0;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nk-list-item .l-meta,.nk-list-item ::slotted(.l-meta){flex:none;display:flex;align-items:center;gap:8px;margin-left:auto;font-size:12px;color:var(--nk-text-secondary);white-space:nowrap}.nk-calendar-view{font-size:14px}.nk-calendar-view .cv-head{display:flex;align-items:center;gap:4px;padding:2px 0 8px}.nk-calendar-view .cv-title{flex:1;font-weight:600;white-space:nowrap}.nk-calendar-view .cv-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-top:1px solid var(--nk-border);border-left:1px solid var(--nk-border)}.nk-calendar-view.weeks .cv-grid{grid-template-columns:32px repeat(7,minmax(0,1fr))}.nk-calendar-view :is(.cv-wd,.cv-week,.cv-day){min-width:0;border-right:1px solid var(--nk-border);border-bottom:1px solid var(--nk-border)}.nk-calendar-view .cv-wd{padding:4px 8px;font-size:12px;color:var(--nk-text-secondary);text-align:center}.nk-calendar-view .cv-week{padding:6px 0;font-size:11px;color:var(--nk-text-tertiary);text-align:center;font-variant-numeric:tabular-nums}.nk-calendar-view .cv-day{display:flex;flex-direction:column;gap:3px;min-height:112px;padding:4px 4px 6px}.nk-calendar-view .cv-day:is(.out,.off){background:var(--nk-bg-sidebar)}.nk-calendar-view .cv-num{align-self:flex-end;min-width:22px;height:22px;padding:0 6px;border-radius:11px;font-size:13px;line-height:22px;text-align:center;color:var(--nk-text-secondary);font-variant-numeric:tabular-nums}.nk-calendar-view .cv-day.out .cv-num{color:var(--nk-text-tertiary)}.nk-calendar-view .cv-day.today .cv-num{background:var(--nk-danger);color:var(--nk-on-accent)}.nk-calendar-view .cv-item{display:block;min-width:0;padding:3px 6px;border-radius:4px;background:var(--nk-bg-card);border:1px solid var(--nk-border);box-shadow:var(--nk-shadow-card);font-size:12.5px;line-height:18px;color:var(--nk-text);text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}.nk-calendar-view .cv-item:hover{background:var(--nk-bg-hover)}.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-secondary)}.nk-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:16px;padding:14px 2px}.nk-gallery.small{grid-template-columns:repeat(auto-fill,minmax(min(180px,100%),1fr));gap:12px}.nk-gallery.large{grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr))}.nk-gallery .nk-card{display:flex;flex-direction:column;min-width:0;margin:0;color:inherit;text-decoration:none;cursor:pointer}.nk-gallery .nk-card>.nk-cover{flex:none;height:auto;aspect-ratio:2 / 1;margin:-10px -12px 10px;border-radius:7px 7px 0 0;overflow:hidden}.nk-gallery.fit .nk-card>.nk-cover:has(>img){background:var(--nk-bg-callout)}.nk-gallery.fit .nk-card>.nk-cover>img{object-fit:contain}.nk-gallery .card-title{min-width:0}.nk-gallery>.card-item{display:flex;min-width:0}.nk-gallery>.card-item>.nk-card{flex:1 1 auto}.nk-gallery>.nk-new-row{justify-content:center;min-height:64px;border:1px dashed var(--nk-border-strong);border-radius:8px}.nk-field{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:9px 0;--_nk-field-min: 210px}.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:12px;color:var(--nk-text-secondary);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;min-width:0}.nk-field.stacked .f-control,.nk-fields>.nk-field .f-control{width:100%;min-width:0}.nk-field.stacked .nk-input,.nk-field.stacked .nk-textarea,.nk-field.stacked .nk-select,.nk-fields>.nk-field .nk-input,.nk-fields>.nk-field .nk-textarea,.nk-fields>.nk-field .nk-select{width:100%;min-width:0}.nk-field.compact,.nk-fields>.nk-field{padding:0;gap:4px;min-width:0}.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.fit{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.nk-fields>.nk-field{min-width:0}.nk-input,.nk-select,.nk-textarea{font-family:inherit;font-size:14px;line-height:20px;color:var(--nk-text);background:var(--nk-bg-input);border:1px solid var(--nk-border);border-radius:var(--nk-radius);padding:5px 10px;outline:none;transition:border-color .15s,box-shadow .15s;min-width:var(--_nk-field-min, 210px);max-width:100%}.nk-input:hover,.nk-select:hover,.nk-textarea:hover{border-color:var(--nk-border-strong)}.nk-input:focus,.nk-select:focus,.nk-textarea:focus{border-color:color-mix(in srgb,var(--nk-accent) 60%,transparent);box-shadow:0 0 0 2px color-mix(in srgb,var(--nk-accent) 30%,transparent)}.nk-input::placeholder,.nk-textarea::placeholder{color:var(--nk-text-tertiary)}.nk-input.wide,.nk-textarea.wide,.nk-select.wide{width:100%;min-width:0}.nk-input[type=date],.nk-input[type=time],.nk-input[type=datetime-local],.nk-input[type=month]{appearance:none}.nk-input::-webkit-date-and-time-value{text-align:start;min-height:1lh}.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-copy-field{display:flex;align-items:center;gap:2px;min-width:var(--_nk-field-min, 210px);max-width:100%;padding:0 3px 0 10px;font-size:14px;line-height:20px;color:var(--nk-text);background:var(--nk-bg-input);border:1px solid var(--nk-border);border-radius:var(--nk-radius)}.nk-copy-field.wide{width:100%;min-width:0}.nk-copy-field.wrap{align-items:flex-start}.nk-copy-field .cf-value{flex:1 1 auto;min-width:0;padding:5px 6px 5px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;user-select:all}.nk-copy-field.mono .cf-value{font-family:var(--nk-font-mono);font-size:13px}.nk-copy-field.wrap .cf-value{white-space:pre-wrap;overflow-wrap:anywhere}.nk-copy-field .cf-btn{flex:none;height:24px;margin:3px 0;padding:0 8px;border:none;border-radius:4px;background:transparent;font-family:inherit;font-size:13px;color:var(--nk-text-secondary);white-space:nowrap;cursor:pointer}.nk-copy-field .cf-btn:hover{background:var(--nk-bg-hover);color:var(--nk-text)}.nk-copy-field .cf-btn.copied{color:var(--nk-color-green)}.nk-copy-field .cf-btn>svg{display:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.nk-copy-field.icons .cf-btn:has(>svg){display:inline-flex;align-items:center;justify-content:center;width:28px;padding:0}.nk-copy-field.icons .cf-btn>svg{display:block}.nk-copy-field.icons .cf-btn:has(>svg)>span{display:none}.nk-calendar{display:block;width:max-content;max-width:100%;margin-inline:auto;font-size:14px;user-select:none;-webkit-user-select:none}.nk-calendar .cal-head{display:flex;align-items:center;gap:2px;padding:0 0 6px 6px}.nk-calendar .cal-title{flex:1;font-weight:600;white-space:nowrap}.nk-calendar .cal-nav,.nk-calendar-view .cal-nav{display:inline-flex;align-items:center;justify-content:center;height:28px;min-width:28px;padding:0 6px;border:none;border-radius:var(--nk-radius);background:transparent;font-family:inherit;font-size:13px;color:var(--nk-text-secondary);cursor:pointer}.nk-calendar .cal-nav:hover,.nk-calendar-view .cal-nav:hover{background:var(--nk-bg-hover);color:var(--nk-text)}.nk-calendar .cal-nav svg,.nk-calendar-view .cal-nav svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.nk-calendar .cal-grid{display:grid;grid-template-columns:repeat(7,var(--_nk-cell, 36px));row-gap:2px}.nk-calendar.weeks .cal-grid{grid-template-columns:24px repeat(7,var(--_nk-cell, 36px))}.nk-calendar .cal-wd,.nk-calendar .cal-week{display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--nk-text-tertiary);font-variant-numeric:tabular-nums}.nk-calendar .cal-wd{height:24px}.nk-calendar .cal-week{font-size:11px}.nk-calendar .cal-day{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--_nk-cell, 36px);height:var(--_nk-cell, 36px);padding:0;border:none;border-radius:var(--nk-radius);background:transparent;font-family:inherit;font-size:14px;color:var(--nk-text);font-variant-numeric:tabular-nums;cursor:pointer}.nk-calendar .cal-day:hover{background:var(--nk-bg-hover)}.nk-calendar .cal-day:focus-visible{outline:2px solid color-mix(in srgb,var(--nk-accent) 60%,transparent);outline-offset:-2px}.nk-calendar .cal-day.out,.nk-calendar .cal-day.off{color:var(--nk-text-tertiary)}.nk-calendar .cal-day.today{color:var(--nk-danger);font-weight:600}.nk-calendar .cal-day.in-range{border-radius:0;background:color-mix(in srgb,var(--nk-accent) 12%,transparent)}.nk-calendar .cal-day:is(.selected,.start,.end){background:var(--nk-accent);color:var(--nk-on-accent);font-weight:500}.nk-calendar .cal-day.start:not(.end){border-radius:var(--nk-radius) 0 0 var(--nk-radius)}.nk-calendar .cal-day.end:not(.start){border-radius:0 var(--nk-radius) var(--nk-radius) 0}.nk-calendar .cal-day[aria-disabled=true]{color:var(--nk-text-tertiary);background:none;opacity:.5;cursor:default}.nk-calendar .cal-marks{position:absolute;left:0;right:0;bottom:3px;display:flex;justify-content:center;gap:2px;pointer-events:none}.nk-calendar .cal-marks i{width:4px;height:4px;border-radius:50%;background:var(--nk-color-gray)}.nk-calendar .cal-day:is(.selected,.start,.end) .cal-marks i{background:var(--nk-on-accent)}.nk-calendar .cal-foot{display:flex;align-items:center;gap:8px;margin-top:8px;padding:8px 2px 0;border-top:1px solid var(--nk-border)}.nk-calendar .cal-foot .nk-input{min-width:0;flex:1 1 auto}.nk-btn{font-family:inherit;font-size:14px;line-height:20px;font-weight:500;border-radius:var(--nk-radius);cursor:pointer;padding:3px 12px;border:1px solid transparent;transition:background .15s,border-color .15s,box-shadow .15s,opacity .15s;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}.nk-btn svg,.nk-btn ::slotted(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:not(:disabled,[aria-disabled=true]){opacity:.88}.nk-btn.secondary{background:var(--nk-bg-card);color:var(--nk-text);box-shadow:var(--nk-shadow-btn)}.nk-btn.secondary:hover:not(:disabled,[aria-disabled=true]){background:color-mix(in srgb,var(--nk-bg-card),var(--nk-text) 6%)}.nk-btn.danger{background:var(--nk-bg-card);color:var(--nk-danger);box-shadow:var(--nk-shadow-btn)}.nk-btn.danger:hover:not(:disabled,[aria-disabled=true]){background:color-mix(in srgb,var(--nk-danger) 8%,var(--nk-bg-card))}.nk-btn.danger-solid{background:var(--nk-danger);color:var(--nk-on-accent)}.nk-btn.danger-solid:hover:not(:disabled,[aria-disabled=true]){opacity:.88}.nk-btn.small{padding:1px 8px;font-size:13px;line-height:20px}a.nk-btn{text-decoration:none}.nk-btn:disabled,.nk-btn[aria-disabled=true]{opacity:.5;cursor:not-allowed}.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:translate(14px)}.nk-switch:disabled{opacity:.5;cursor:not-allowed}.nk-switch-label{display:inline-flex;align-items:flex-start;gap:8px;font-size:14px;cursor:pointer}.nk-switch-label>.nk-switch{font-size:inherit;line-height:inherit;margin-top:max(0px,calc((1lh - 20px)/2))}.nk-switch-label>span{padding-top:max(0px,calc((20px - 1lh)/2))}.nk-switch-label:has(.nk-switch:disabled){cursor:not-allowed;color:var(--nk-text-tertiary)}.nk-check{display:flex;align-items:flex-start;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);font-size:inherit;line-height:inherit;margin-top:max(0px,calc((1lh - 16px)/2))}.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:\"\\2713\";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:\"\\25cf\";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;overflow:hidden;flex-shrink:0}.nk-profile-row .big-avatar>img{display:block;width:100%;height:100%;object-fit:cover}.nk-profile-row .big-avatar.square,.nk-profile-row ::slotted(.big-avatar.square){border-radius:8px}.nk-profile-row .pr-actions{display:flex;flex-direction:column;gap:6px}.nk-profile-row .pr-remove{color:var(--nk-text-tertiary)}.nk-model-card{border:1px solid var(--nk-border-strong);border-radius:8px;padding:12px 14px;margin-bottom:var(--nk-block-space, 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:12px;color:var(--nk-text-secondary);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:var(--nk-block-space, 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>.nk-member-row:last-child,.nk-member-list ::slotted(.nk-member-row:last-child),.nk-member-row.last{border-bottom:none}.nk-member-row .mini-avatar,.nk-member-row .nk-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>:has(>.m-mail){min-width:0}.nk-member-row .m-mail{font-size:12px;color:var(--nk-text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.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);padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);display:flex;align-items:center;justify-content:center;z-index:100;opacity:0;pointer-events:none;transition:opacity .2s ease}.nk-modal-backdrop.open{opacity:1;pointer-events:auto}.nk-modal{width:min(1150px,92vw);height:min(715px,86vh);max-width:100%;max-height:100%;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 ease}.nk-modal-backdrop.open .nk-modal{transform:none}.nk-settings-nav{width:240px;min-width:240px;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:14px}.nk-settings-user .mail{font-size:12px;color:var(--nk-text-secondary)}.nk-settings-nav .nk-tree-item{min-height:28px}.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 60px 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:800px}.nk-settings-pane.active{display:block}.nk-settings-pane>h2{font-size:22px;font-weight:600;line-height:1.3;margin-bottom:20px}.nk-settings-pane>h3{font-size:16px;font-weight:500;padding-bottom:8px;border-bottom:1px solid var(--nk-border);margin:30px 0 12px}.nk-settings-pane ::slotted(h2){font-size:22px;font-weight:600;line-height:1.3;padding:0!important;margin:0 0 20px!important}.nk-settings-pane ::slotted(h3){font-size:16px;font-weight:500;border:0;border-bottom:1px solid var(--nk-border);padding:0 0 8px!important;margin:30px 0 12px!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:14px;color:var(--nk-text);background:var(--nk-bg-input);border:1px solid var(--nk-border);border-radius:var(--nk-radius);padding:6px 10px;outline:none;margin-bottom:8px}.nk-emoji-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:2px}.nk-emoji-grid span,.nk-emoji-grid ::slotted(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:4px 8px;min-height:var(--_nk-row, 28px);border-radius:5px;cursor:pointer;font-size:14px;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:12px;color:var(--nk-text-tertiary)}.nk-menu-item.danger{color:var(--nk-danger)}.nk-menu-item>.nk-switch{margin-left:auto}.nk-menu-sep{border-top:1px solid var(--nk-border);margin:5px 4px}.nk-menu-label{font-size:12px;color:var(--nk-text-tertiary);padding:5px 8px 2px}.nk-pop.floating{z-index:106;opacity:0;visibility:hidden;pointer-events:none;max-height:min(var(--_nk-float-max, 100dvh),100dvh - 16px);overflow-y:auto;overscroll-behavior:contain;transform:translateY(-4px) scale(.98);transform-origin:top;transition:opacity .15s ease,transform .15s ease,visibility 0s linear .15s}.nk-pop.floating.open{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:opacity .15s ease,transform .15s ease,visibility 0s}.nk-cmdk-backdrop{position:fixed;inset:0;background:var(--nk-scrim-soft);display:flex;justify-content:center;align-items:flex-start;padding:max(14vh,env(safe-area-inset-top,0px)) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);z-index:110;opacity:0;pointer-events:none;transition:opacity .18s ease}.nk-cmdk-backdrop.open{opacity:1;pointer-events:auto}.nk-cmdk{max-width:100%;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 ease}.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:none;background:transparent;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:12px;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:12px;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-sheet-backdrop{position:fixed;inset:0;z-index:100;display:none;flex-direction:column;align-items:center;justify-content:flex-end;padding-top:max(24px,env(safe-area-inset-top,0px));background:var(--nk-scrim-soft);opacity:0;transition:opacity .2s ease,display .25s allow-discrete}.nk-sheet-backdrop.open{display:flex;opacity:1}@starting-style{.nk-sheet-backdrop.open{opacity:0}}.nk-sheet{--_nk-row: 40px;width:100%;max-width:640px;max-height:100%;overflow-y:auto;overscroll-behavior:contain;padding:6px max(10px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(10px,env(safe-area-inset-left,0px));background:var(--nk-bg);color:var(--nk-text);border-radius:14px 14px 0 0;box-shadow:var(--nk-shadow-menu);translate:0 100%;transition:translate .25s cubic-bezier(.2,.8,.2,1)}.nk-sheet-backdrop.open .nk-sheet{translate:none}@starting-style{.nk-sheet-backdrop.open .nk-sheet{translate:0 100%}}.nk-sheet .sh-grabber,.nk-sheet ::slotted(.sh-grabber){width:36px;height:4px;margin:4px auto 10px;border-radius:2px;background:var(--nk-border-strong)}.nk-sheet .sh-title,.nk-sheet ::slotted(.sh-title){font-size:14px;font-weight:600;text-align:center;padding:0 8px 10px}.nk-dialog-backdrop{position:fixed;inset:0;z-index:105;display:none;align-items:center;justify-content:center;padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));background:var(--nk-scrim-soft);opacity:0;transition:opacity .2s ease,display .2s allow-discrete}.nk-dialog-backdrop.open{display:flex;opacity:1}@starting-style{.nk-dialog-backdrop.open{opacity:0}}.nk-dialog{width:440px;max-width:100%;max-height:100%;overflow-y:auto;overscroll-behavior:contain;padding:20px 24px;border-radius:10px;outline:none;background:var(--nk-bg);color:var(--nk-text);box-shadow:var(--nk-shadow-menu);scale:.98;translate:0 6px;transition:scale .2s ease,translate .2s ease}.nk-dialog.wide{width:560px}.nk-dialog-backdrop.open .nk-dialog{scale:none;translate:none}@starting-style{.nk-dialog-backdrop.open .nk-dialog{scale:.98;translate:0 6px}}.nk-dialog .dl-title{font-size:16px;font-weight:600;line-height:1.4;margin-bottom:6px}.nk-dialog .dl-body{font-size:14px;line-height:1.5}.nk-dialog .dl-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}.nk-peek-backdrop{position:fixed;inset:0;z-index:50;display:none;pointer-events:none;transition:background-color .2s ease,display .25s allow-discrete}.nk-peek-backdrop.open{display:block}.nk-peek{--_nk-title: 32px;position:absolute;top:0;right:0;bottom:0;width:min(var(--nk-peek-width),100%);display:flex;flex-direction:column;pointer-events:auto;outline:none;background:var(--nk-bg);color:var(--nk-text);box-shadow:var(--nk-shadow-menu);translate:100% 0;transition:translate .25s cubic-bezier(.2,.8,.2,1)}.nk-peek-backdrop.open .nk-peek{translate:none}@starting-style{.nk-peek-backdrop.open .nk-peek{translate:100% 0}}.nk-peek .pk-bar{flex:none;display:flex;align-items:center;gap:2px;height:44px;padding:0 12px}.nk-peek .pk-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:4px 48px 64px;font-size:16px;line-height:1.5}.nk-peek .pk-resize{position:absolute;top:0;bottom:0;left:-4px;width:8px;z-index:1;cursor:col-resize;touch-action:none;outline:none}.nk-peek .pk-resize:after{content:\"\";position:absolute;top:0;bottom:0;left:3px;width:2px;transition:background .15s}.nk-peek .pk-resize:hover:after,.nk-peek .pk-resize:focus-visible:after,.nk-peek .pk-resize.active:after{background:var(--nk-accent)}.nk-app.peek-inset .nk-main{padding-right:min(var(--nk-peek-width),100%)}.nk-toast{position:fixed;bottom:max(20px,calc(env(safe-area-inset-bottom,0px) + 12px));left:50%;transform:translate(-50%) translateY(80px);z-index:120;width:max-content;max-width:calc(100% - 32px);background:var(--nk-text);color:var(--nk-bg);padding:8px 16px;border-radius:8px;font-size:14px;opacity:0;transition:all .3s ease;pointer-events:none;box-shadow:var(--nk-shadow-menu);display:flex;gap:8px;align-items:center}.nk-toast.show{opacity:1;transform:translate(-50%) translateY(0)}.nk-tooltip{z-index:130;max-width:260px;padding:4px 8px;border-radius:var(--nk-radius);overflow-wrap:break-word;background:var(--nk-text);color:var(--nk-bg);box-shadow:var(--nk-shadow-menu);font-size:12px;font-weight:500;line-height:16px;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .1s ease,visibility 0s linear .1s}.nk-tooltip.open{opacity:1;visibility:visible;transition:opacity .1s ease}.nk-tooltip .tt-key{margin-left:6px;color:color-mix(in srgb,var(--nk-bg) 60%,transparent)}.nk-tooltip.lines{white-space:pre-line}.nk-gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:20px 32px;margin:var(--nk-block-space, 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-tabs.scroll{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;white-space:nowrap;border-bottom:0;padding-bottom:1px;box-shadow:inset 0 -1px 0 var(--nk-border)}.nk-tabs.scroll::-webkit-scrollbar{display:none}.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:var(--nk-block-space, 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-secondary);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:12px;margin-top:3px}.nk-stat .s-delta.up,.nk-stat ::slotted(.s-delta.up),.nk-stat ::slotted([slot=\"delta\"].up){color:var(--nk-color-green)}.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:var(--nk-block-space, 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:14px;border:none;background:transparent;color:var(--nk-text-secondary);padding:4px 12px;border-radius:5px;cursor:pointer}.nk-segmented ::slotted(button){font-family:inherit;font-size:14px;border:none;background:transparent;color:var(--nk-text-secondary);padding:4px 12px!important;border-radius:5px;cursor:pointer}.nk-segmented button.active,.nk-segmented ::slotted(button.active){background:var(--nk-bg);color:var(--nk-text);font-weight:500;box-shadow:var(--nk-shadow-segment)}.nk-segmented.wrap{flex-wrap:wrap}.nk-segmented.scroll{max-width:100%;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}.nk-segmented.scroll::-webkit-scrollbar{display:none}.nk-segmented.scroll button,.nk-segmented.scroll ::slotted(button){flex-shrink:0;white-space:nowrap}.nk-banner{display:flex;align-items:center;gap:10px;font-size:14px;border-radius:8px;padding:10px 14px;margin-bottom:var(--nk-block-space, 8px);color:var(--nk-text)}.nk-banner.info{background:var(--nk-tint-blue)}.nk-banner.success{background:var(--nk-tint-green)}.nk-banner.warning{background:var(--nk-tint-yellow)}.nk-banner.danger{background:var(--nk-tint-red)}.nk-banner .b-action,.nk-banner ::slotted(.b-action),.nk-banner ::slotted([slot=\"action\"]){margin-left:auto;padding:0;border:0;background:none;color:inherit;font:inherit;font-weight:500;text-align:left;cursor:pointer;text-decoration:underline;text-underline-offset:2px}.nk-banner ::slotted(.b-action),.nk-banner ::slotted([slot=\"action\"]){margin-left:auto!important}.nk-avatar-group{display:flex}.nk-avatar-group .mini-avatar,.nk-avatar-group .nk-avatar,.nk-avatar-group ::slotted(.mini-avatar),.nk-avatar-group ::slotted(.nk-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 .nk-avatar:first-child,.nk-avatar-group ::slotted(.mini-avatar:first-child),.nk-avatar-group ::slotted(.nk-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-avatar{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:24px;height:24px;border-radius:50%;overflow:hidden;vertical-align:middle;font-size:10px;font-weight:600;line-height:1;color:var(--nk-on-accent);user-select:none;background:linear-gradient(135deg,var(--nk-decor-purple),var(--nk-decor-blue));object-fit:cover}.nk-avatar.small{width:20px;height:20px;font-size:9px}.nk-avatar.large{width:32px;height:32px;font-size:12px}.nk-avatar.xlarge{width:56px;height:56px;font-size:20px}.nk-avatar.square{border-radius:4px}.nk-avatar>img,.nk-avatar ::slotted(img){display:block;width:100%;height:100%;object-fit:cover}.nk-avatar.gray,.nk-calendar .cal-marks i.gray{background:var(--nk-color-gray)}.nk-avatar.brown,.nk-calendar .cal-marks i.brown{background:var(--nk-color-brown)}.nk-avatar.orange,.nk-calendar .cal-marks i.orange{background:var(--nk-color-orange)}.nk-avatar.yellow,.nk-calendar .cal-marks i.yellow{background:var(--nk-color-yellow)}.nk-avatar.green,.nk-calendar .cal-marks i.green{background:var(--nk-color-green)}.nk-avatar.blue,.nk-calendar .cal-marks i.blue{background:var(--nk-color-blue)}.nk-avatar.purple,.nk-calendar .cal-marks i.purple{background:var(--nk-color-purple)}.nk-avatar.pink,.nk-calendar .cal-marks i.pink{background:var(--nk-color-pink)}.nk-avatar.red,.nk-calendar .cal-marks i.red{background:var(--nk-color-red)}.nk-panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:12px;margin:var(--nk-block-space, 12px) 0}.nk-panels.flush{margin:0}.nk-panel{display:flex;flex-direction:column;gap:6px;min-width:0;--_nk-field-min: min(210px, 100%);padding:14px 16px;border:1px solid var(--nk-border);border-radius:10px;background:var(--nk-bg-card);box-shadow:var(--nk-shadow-card);font-size:14px;line-height:1.5;color:inherit;text-decoration:none;text-align:left}:is(a,button).nk-panel{cursor:pointer;font-family:inherit;transition:border-color .15s,background .15s}:is(a,button).nk-panel:hover{border-color:var(--nk-border-strong)}.nk-panel>h3,.nk-panel>.p-head>h3{font-size:14px;font-weight:600;line-height:1.4}.nk-panel ::slotted(h3){font-size:14px;font-weight:600;line-height:1.4;margin:0!important}.nk-panel>p{font-size:13px;color:var(--nk-text-secondary)}.nk-panel ::slotted(p){font-size:13px;color:var(--nk-text-secondary);margin:0!important}.nk-panel>.p-head{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-width:0}.nk-panel>.p-head>h3{flex:1 1 auto;min-width:0}.nk-panel .p-end{flex:none;display:flex;align-items:center;gap:6px;margin-left:auto}.nk-panel>.nk-cover{flex:none;height:var(--nk-panel-cover-height);margin:-14px -16px 2px;border-radius:9px 9px 0 0}.nk-panel>.nk-page-icon{font-size:28px}.nk-panel>.nk-cover+.nk-page-icon{margin-top:-24px}.nk-skeleton{border-radius:5px;margin-bottom:var(--nk-block-space, 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:nk-shimmer 1.6s infinite}@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:13px;margin-bottom:12px}.nk-empty .e-actions,.nk-empty ::slotted(.e-actions){display:flex;flex-wrap:wrap;justify-content:center;gap:8px}.nk-steps{display:flex;flex-direction:column;margin:var(--nk-block-space, 8px) 0;padding:0;list-style:none;font-size:14px}.nk-step{position:relative;display:flex;align-items:flex-start;gap:10px;padding-bottom:14px;line-height:20px;color:var(--nk-text-tertiary)}.nk-step:last-child{padding-bottom:0}.nk-step:not(:last-child):after{content:\"\";position:absolute;left:10px;top:24px;bottom:4px;width:1px;background:var(--nk-border)}.nk-step .st-mark{flex:none;width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--nk-border-strong);background:var(--nk-bg);font-size:11px;font-weight:600;line-height:1}.nk-step .st-desc{display:block;font-size:12px;line-height:18px;color:var(--nk-text-tertiary);font-weight:400}.nk-step.done{color:var(--nk-text-secondary)}.nk-step.done .st-mark{background:var(--nk-tag-green-bg);color:var(--nk-tag-green-text);border-color:transparent}.nk-step.current{color:var(--nk-text);font-weight:500}.nk-step.current .st-mark{border-color:var(--nk-accent);color:var(--nk-accent)}.nk-step.skipped .st-mark{border-style:dashed}.nk-step button.st-label,.nk-step a.st-label{font:inherit;color:inherit;text-align:left;text-decoration:none;background:none;border:0;border-radius:3px;cursor:pointer}.nk-step button.st-label:hover,.nk-step a.st-label:hover{text-decoration:underline;text-decoration-color:var(--nk-text-tertiary);text-underline-offset:2px}.nk-step button.st-label:focus-visible,.nk-step a.st-label:focus-visible{outline:2px solid color-mix(in srgb,var(--nk-accent) 60%,transparent);outline-offset:2px}.nk-steps.horizontal{flex-direction:row;align-items:flex-start;gap:10px}.nk-steps.horizontal .nk-step{flex:none;padding-bottom:0;min-width:0;white-space:nowrap}.nk-steps.horizontal .nk-step:not(:last-child){flex:1 1 auto}.nk-steps.horizontal .nk-step:not(:last-child):after{position:static;flex:1 1 16px;width:auto;min-width:16px;height:1px;margin-top:10px}.nk-comments{border-left:1px solid var(--nk-border);padding:4px 0 4px 18px;margin:var(--nk-block-space, 8px) 0 var(--nk-block-space, 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:12px;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:14px;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-msg.user.bubble{justify-content:flex-end}.nk-ai-msg.bubble .a-body,.nk-ai-msg.bubble ::slotted(.a-body){max-width:85%;padding:6px 12px;border-radius:16px;background:var(--nk-bg-callout)}.nk-ai-actions{display:flex;gap:4px;margin-top:6px}.nk-ai-actions button{font-family:inherit;font-size:12px;color:var(--nk-text-secondary);background:transparent;border:1px solid var(--nk-border);border-radius:5px;padding:2px 8px;cursor:pointer}.nk-ai-actions ::slotted(button){font-family:inherit;font-size:12px;color:var(--nk-text-secondary);background:transparent;border:1px solid var(--nk-border);border-radius:5px;padding:2px 8px!important;cursor:pointer}.nk-ai-actions button:hover,.nk-ai-actions ::slotted(button:hover){background:var(--nk-bg-hover);color:var(--nk-text)}.nk-ai-input-row{display:flex;align-items:center;gap:8px;margin-top:var(--nk-block-space, 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:none;background:transparent;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:var(--nk-block-space, 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:transparent;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:transparent}.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 button,.nk-block-host .nk-block-actions ::slotted(button){width:20px;height:22px;padding:0;border:none;border-radius:4px;background:transparent;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-prose,.nk-block-host .ProseMirror{font-family:var(--nk-font);line-height:1.5;color:var(--nk-text);overflow-wrap:break-word}.nk-block-host .ProseMirror{outline:none;min-height:60px;padding:4px 2px}.nk-prose>*+*,.nk-block-host .ProseMirror>*+*{margin-top:6px}.nk-prose h1,.nk-block-host .ProseMirror h1{font-size:1.875em;font-weight:600;line-height:1.3;letter-spacing:-.01em;margin:32px 0 4px}.nk-prose h2,.nk-block-host .ProseMirror h2{font-size:1.5em;font-weight:600;line-height:1.3;margin:24px 0 4px}.nk-prose h3,.nk-block-host .ProseMirror h3{font-size:1.25em;font-weight:600;line-height:1.3;margin:16px 0 2px}.nk-prose :is(h4,h5,h6),.nk-block-host .ProseMirror :is(h4,h5,h6){font-size:1em;font-weight:600;margin:12px 0 0}.nk-prose>:first-child,.nk-block-host .ProseMirror>:first-child{margin-top:0}.nk-prose>:last-child,.nk-block-host .ProseMirror>:last-child{margin-bottom:0}.nk-prose p:empty:before{content:\"\";display:inline-block}.nk-prose :is(strong,b),.nk-block-host .ProseMirror :is(strong,b){font-weight:600}.nk-prose :is(ul,ol),.nk-block-host .ProseMirror :is(ul,ol){padding-left:24px;margin:4px 0}.nk-prose ul,.nk-block-host .ProseMirror ul{list-style:disc}.nk-prose ol,.nk-block-host .ProseMirror ol{list-style:decimal}.nk-prose li,.nk-block-host .ProseMirror li{margin:2px 0}.nk-prose li::marker,.nk-block-host .ProseMirror li::marker{color:var(--nk-text-tertiary)}.nk-prose ul[data-type=taskList],.nk-block-host .ProseMirror ul[data-type=taskList]{list-style:none;padding-left:2px}.nk-prose ul[data-type=taskList] li,.nk-block-host .ProseMirror ul[data-type=taskList] li{display:flex;gap:8px;align-items:flex-start}.nk-prose ul[data-type=taskList] li>label,.nk-block-host .ProseMirror ul[data-type=taskList] li>label{flex-shrink:0;margin-top:max(0px,calc((1lh - 16px)/2));user-select:none}.nk-prose ul[data-type=taskList] li>div,.nk-block-host .ProseMirror ul[data-type=taskList] li>div{flex:1;min-width:0}.nk-prose ul[data-type=taskList] input[type=checkbox],.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-prose ul[data-type=taskList] input[type=checkbox]:checked,.nk-block-host .ProseMirror ul[data-type=taskList] input[type=checkbox]:checked{background:var(--nk-accent);border-color:var(--nk-accent)}.nk-prose ul[data-type=taskList] input[type=checkbox]:checked:after,.nk-block-host .ProseMirror ul[data-type=taskList] input[type=checkbox]:checked:after{content:\"\\2713\";color:var(--nk-on-accent);font-size:11px;position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.nk-prose li[data-checked=true]>div,.nk-block-host .ProseMirror li[data-checked=true]>div{text-decoration:line-through;color:var(--nk-text-tertiary)}.nk-prose blockquote,.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-prose code,.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-prose pre,.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-prose pre code,.nk-block-host .ProseMirror pre code{background:none;color:inherit;padding:0;font-size:inherit}.nk-prose hr,.nk-block-host .ProseMirror hr{border:none;border-top:1px solid var(--nk-border);margin:20px 0}.nk-prose a,.nk-block-host .ProseMirror a{color:var(--nk-accent);text-decoration:underline;text-underline-offset:2px}.nk-prose img{max-width:100%;height:auto}.nk-prose table{display:block;width:max-content;max-width:100%;overflow-x:auto;border-collapse:collapse;font-size:14px;margin:12px 0}.nk-prose :is(th,td){padding:6px 10px;border:1px solid var(--nk-border);text-align:left;vertical-align:top}.nk-prose th{font-weight:600}.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-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 p.is-editor-empty:first-child:before,.nk-block-host .ProseMirror .is-empty: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:transparent}.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-slash-menu,.nk-block-host .bn-suggestion-menu,.nk-block-host .tippy-box{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:14px;color:var(--nk-text)}.nk-slash-menu-label{font-size:12px;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:hover,.nk-slash-item.selected{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:12px;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:transparent;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:transparent;color:var(--nk-text-secondary);padding:4px 8px!important;border-radius:5px;cursor:pointer}.nk-bubble-menu button:hover,.nk-bubble-menu ::slotted(button:hover){background:var(--nk-bg-hover);color:var(--nk-text)}.nk-bubble-menu button.active,.nk-bubble-menu ::slotted(button.active){color:var(--nk-accent)}@media(max-width:860px){.nk-sidebar{display:none;position:fixed;inset:0 auto 0 0;z-index:60;transform:translate(-100%);transition:background .25s ease,transform .24s cubic-bezier(.2,.8,.25,1),display .24s allow-discrete}.nk-sidebar.open{display:flex;transform:none}@starting-style{.nk-sidebar.open{transform:translate(-100%)}}.nk-sidebar-backdrop{opacity:0;transition:opacity .24s ease,display .24s allow-discrete}.nk-sidebar-backdrop.open{display:block;opacity:1}@starting-style{.nk-sidebar-backdrop.open{opacity:0}}.nk-sidebar-toggle{display:inline-flex}.nk-sidebar.collapsed{margin-left:0;visibility:visible;transition:background .25s ease,transform .24s cubic-bezier(.2,.8,.25,1),display .24s allow-discrete}.nk-sidebar-collapse{display:none}.nk-tab-bar{display:flex}.nk-tab-bar.fixed+.nk-tab-bar-spacer{display:block}.nk-page{padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px));padding-bottom: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:max(6vh,env(safe-area-inset-top,0px))}.nk-cmdk{width:min(560px,96vw)}.nk-stats{flex-wrap:wrap}.nk-breadcrumb{min-width:0}.nk-breadcrumb>.crumb:not(:last-child),.nk-breadcrumb ::slotted(.crumb:not(:last-child)),.nk-breadcrumb>.sep,.nk-breadcrumb ::slotted(.sep),.nk-topbar-meta,.nk-topbar-actions ::slotted(.nk-topbar-meta){display:none}.nk-breadcrumb>.crumb:last-child,.nk-breadcrumb ::slotted(.crumb:last-child){display:block;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nk-topbar-actions{flex-shrink:0}.nk-field{flex-wrap:wrap;row-gap:6px}.nk-field .f-control,.nk-field ::slotted(.f-control){max-width:100%;min-width:0}.nk-input,.nk-select,.nk-textarea,.nk-slider{max-width:100%}.nk-prop{flex-direction:column;flex-wrap:nowrap;align-items:stretch}.nk-prop .p-name{flex:none;min-height:26px}.nk-prop .p-value{flex:none;min-height:30px;padding:3px 6px 7px}.nk-copy-field .cf-btn:has(>svg){display:inline-flex;align-items:center;justify-content:center;width:28px;padding:0}.nk-copy-field .cf-btn>svg{display:block}.nk-copy-field .cf-btn:has(>svg)>span{display:none}.nk-steps.horizontal .nk-step:not(.current)>:not(.st-mark){display:none}.nk-pop.sheet{position:fixed!important;inset:auto 0 0!important;width:auto!important;transform:none!important;z-index:106;--_nk-row: 40px;max-height:85dvh;overflow-y:auto;overscroll-behavior:contain;border-radius:14px 14px 0 0;padding:6px max(8px,env(safe-area-inset-right,0px)) max(12px,env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px));box-shadow:0 0 0 100vmax var(--nk-scrim-soft),var(--nk-shadow-menu)}.nk-pop.sheet:before{content:\"\";display:block;width:36px;height:4px;margin:4px auto 8px;border-radius:2px;background:var(--nk-border-strong)}.nk-pop.sheet.floating{translate:0 100%;transition:opacity .2s ease,translate .25s cubic-bezier(.2,.8,.2,1),visibility 0s linear .25s}.nk-pop.sheet.floating.open{translate:none;transition:opacity .2s ease,translate .25s cubic-bezier(.2,.8,.2,1),visibility 0s}.nk-pop.sheet,.nk-sheet{--_nk-cell: 44px}.nk-calendar-view .cv-day{min-height:64px;padding:2px 2px 4px}.nk-calendar-view .cv-item{padding:1px 4px;font-size:11px;line-height:16px}.nk-peek-backdrop{pointer-events:auto}.nk-peek-backdrop.open{background-color:var(--nk-scrim-soft)}@starting-style{.nk-peek-backdrop.open{background-color:transparent}}.nk-peek{--_nk-title: 28px;top:auto;left:0;width:auto;max-height:92dvh;border-radius:14px 14px 0 0;translate:0 100%}.nk-peek-backdrop.open .nk-peek{translate:none}@starting-style{.nk-peek-backdrop.open .nk-peek{translate:0 100%}}.nk-peek:before{content:\"\";flex:none;width:36px;height:4px;margin:10px auto 0;border-radius:2px;background:var(--nk-border-strong)}.nk-peek .pk-bar{height:40px;padding:0 max(8px,env(safe-area-inset-right,0px)) 0 max(8px,env(safe-area-inset-left,0px))}.nk-peek .pk-body{padding:0 max(20px,env(safe-area-inset-right,0px)) max(24px,env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px))}.nk-peek .pk-resize{display:none}.nk-banner{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline}.nk-banner .b-action,.nk-banner ::slotted(.b-action),.nk-banner ::slotted([slot=\"action\"]){grid-column:1 / -1;justify-self:start;margin-left:0}.nk-banner ::slotted(.b-action),.nk-banner ::slotted([slot=\"action\"]){margin-left:0!important}.nk-app.peek-inset .nk-main{padding-right:0}.nk-dialog-backdrop{flex-direction:column;justify-content:flex-end;padding:max(24px,env(safe-area-inset-top,0px)) 0 0}.nk-dialog{width:100%;max-width:640px;border-radius:14px 14px 0 0;scale:none;translate:0 100%;padding:6px max(20px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px));transition:translate .25s cubic-bezier(.2,.8,.2,1)}.nk-dialog.wide{width:100%}.nk-dialog-backdrop.open .nk-dialog{translate:none}@starting-style{.nk-dialog-backdrop.open .nk-dialog{translate:0 100%}}.nk-dialog:before{content:\"\";display:block;width:36px;height:4px;margin:4px auto 14px;border-radius:2px;background:var(--nk-border-strong)}.nk-dialog .dl-actions{flex-direction:column-reverse}:root:has(.nk-tab-bar:not([hidden])) .nk-toast{bottom:calc(var(--nk-tab-bar-height) + max(6px,env(safe-area-inset-bottom,0px)) + 6px)}:root:has(.nk-tab-bar.floating:not([hidden])) .nk-toast{bottom:calc(var(--nk-tab-bar-height) + 24px + env(safe-area-inset-bottom,0px))}}@media(prefers-reduced-motion:reduce){.nk-skeleton{animation:none;background:var(--nk-bg-callout)}[class*=nk-],[class*=nk-]:before,[class*=nk-]:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}\n";
10
10
 
11
11
  const componentsCss = componentsHead + componentsTail;
12
12
  const css = componentsHead + tokensCss + componentsTail;
@@ -20,6 +20,80 @@ tokensSheet.replaceSync(tokensCss);
20
20
  const componentsSheet = new CSSStyleSheet();
21
21
  componentsSheet.replaceSync(componentsCss);
22
22
 
23
+ // The texts the elements show and announce by themselves – button labels,
24
+ // placeholders, accessible names – in English and German (NotionKit
25
+ // Elements 1.17.0). The language is the element's own: the nearest `lang`
26
+ // attribute, across shadow roots, else <html lang>; German for "de…",
27
+ // English for anything else. setStrings() adds or replaces texts, for one
28
+ // language or for all of them, and an attribute on the element wins over
29
+ // every one of these.
30
+ const BUILT_IN = {
31
+ en: {
32
+ copy: 'Copy', copied: 'Copied', show: 'Show', hide: 'Hide',
33
+ uploadImage: 'Upload image', changeImage: 'Change image', remove: 'Remove',
34
+ close: 'Close', resize: 'Resize',
35
+ today: 'Today', previousMonth: 'Previous month', nextMonth: 'Next month', clear: 'Clear', time: 'Time',
36
+ filter: 'Filter', sort: 'Sort', addFilter: '＋ Filter', removeFilter: 'Remove filter', search: 'Search …',
37
+ closeSidebar: 'Close sidebar', newPage: '＋ New page',
38
+ commentPlaceholder: 'Comment …', send: 'Send', askPlaceholder: 'Ask something …',
39
+ commandPlaceholder: 'Search or type a command …', emojiPlaceholder: 'Search…',
40
+ toggleTheme: 'Toggle light / dark', synced: '⟳ synced',
41
+ message: 'Message', breadcrumb: 'Breadcrumb', commandPalette: 'Command palette', comment: 'Comment',
42
+ searchEmoji: 'Search emoji', settings: 'Settings', title: 'Title', changeIcon: 'Change icon',
43
+ add: 'Add', more: 'More',
44
+ },
45
+ de: {
46
+ copy: 'Kopieren', copied: 'Kopiert', show: 'Zeigen', hide: 'Verbergen',
47
+ uploadImage: 'Bild hochladen', changeImage: 'Bild ändern', remove: 'Entfernen',
48
+ close: 'Schließen', resize: 'Breite ändern',
49
+ today: 'Heute', previousMonth: 'Voriger Monat', nextMonth: 'Nächster Monat', clear: 'Leeren', time: 'Uhrzeit',
50
+ filter: 'Filter', sort: 'Sortieren', addFilter: '＋ Filter', removeFilter: 'Filter entfernen', search: 'Suchen …',
51
+ closeSidebar: 'Seitenleiste schließen', newPage: '＋ Neue Seite',
52
+ commentPlaceholder: 'Kommentieren …', send: 'Senden', askPlaceholder: 'Frag etwas …',
53
+ commandPlaceholder: 'Suchen oder Befehl eingeben …', emojiPlaceholder: 'Suchen …',
54
+ toggleTheme: 'Hell / Dunkel', synced: '⟳ synchronisiert',
55
+ message: 'Nachricht', breadcrumb: 'Pfad', commandPalette: 'Befehlspalette', comment: 'Kommentar',
56
+ searchEmoji: 'Emoji suchen', settings: 'Einstellungen', title: 'Titel', changeIcon: 'Symbol ändern',
57
+ add: 'Hinzufügen', more: 'Mehr',
58
+ },
59
+ };
60
+ const custom = {};
61
+ const listeners = new Set();
62
+
63
+ /**
64
+ * Adds or replaces texts: setStrings({ copy: 'Copy link' }) for every
65
+ * language, setStrings({ copy: 'Copier' }, 'fr') for one – a language of its
66
+ * own too. The elements on the page take them at once.
67
+ */
68
+ function setStrings(strings, lang = '*') {
69
+ const key = String(lang).toLowerCase().split('-')[0];
70
+ custom[key] = { ...custom[key], ...strings };
71
+ for (const fn of listeners) fn();
72
+ }
73
+
74
+ /** The keys and texts built in for a language ('en' or 'de'), for an app that fills in its own. */
75
+ function builtInStrings(lang = 'en') {
76
+ return { ...(BUILT_IN[String(lang).toLowerCase().split('-')[0]] || BUILT_IN.en) };
77
+ }
78
+
79
+ /** Called after every setStrings(); base.js hands the change on to the elements. */
80
+ function onStringsChange(fn) { listeners.add(fn); }
81
+
82
+ /** The language of `el`: its nearest lang attribute, across shadow roots, else the page's; the primary subtag. */
83
+ function langOf(el) {
84
+ for (let node = el; node; node = node.getRootNode?.().host) {
85
+ const hit = node.closest?.('[lang]');
86
+ if (hit) return hit.getAttribute('lang').toLowerCase().split('-')[0];
87
+ }
88
+ return (document.documentElement.lang || 'en').toLowerCase().split('-')[0];
89
+ }
90
+
91
+ /** The text `key` for `el`: its language's own set by setStrings(), then the one for every language, the built-in one, English. */
92
+ function str(key, el) {
93
+ const lang = langOf(el);
94
+ return custom[lang]?.[key] ?? custom['*']?.[key] ?? BUILT_IN[lang]?.[key] ?? BUILT_IN.en[key] ?? key;
95
+ }
96
+
23
97
  // ============================================================
24
98
  // NotionKit Elements – base classes
25
99
  //
@@ -70,10 +144,20 @@ function syncAllThemes() {
70
144
  for (const instance of instances) instance._syncTheme(theme);
71
145
  }
72
146
 
147
+ // The built-in texts follow the language (1.17.0): setStrings() and a new
148
+ // lang on <html> reach the elements already on the page, too.
149
+ function syncAllStrings() {
150
+ for (const instance of instances) instance.onStringsChanged();
151
+ }
152
+ onStringsChange(syncAllStrings);
153
+
73
154
  if (typeof window !== 'undefined' && typeof MutationObserver !== 'undefined') {
74
- new MutationObserver(syncAllThemes).observe(document.documentElement, {
155
+ new MutationObserver(records => {
156
+ if (records.some(r => r.attributeName === 'data-theme')) syncAllThemes();
157
+ if (records.some(r => r.attributeName === 'lang')) syncAllStrings();
158
+ }).observe(document.documentElement, {
75
159
  attributes: true,
76
- attributeFilter: ['data-theme']
160
+ attributeFilter: ['data-theme', 'lang']
77
161
  });
78
162
  }
79
163
 
@@ -218,6 +302,21 @@ class NkElement extends HTMLElement {
218
302
  this._wrapper?.setAttribute('data-theme', theme);
219
303
  }
220
304
 
305
+ /**
306
+ * The text `key` in this element's language – its nearest lang attribute,
307
+ * across shadow roots, else the page's: the one setStrings() gave, else the
308
+ * built-in English or German one (1.17.0). A project's own element reads
309
+ * its texts here too, after setStrings({ myKey: '…' }).
310
+ */
311
+ str(key) { return str(key, this); }
312
+
313
+ /**
314
+ * The texts may have changed: setStrings() ran or <html lang> changed.
315
+ * Components with built-in texts apply them again here; an attribute on
316
+ * the element still wins.
317
+ */
318
+ onStringsChanged() {}
319
+
221
320
  _upgradeOwnProperties() {
222
321
  for (const key of Object.keys(this)) {
223
322
  if (key.startsWith('_')) continue;
@@ -1418,6 +1517,9 @@ customElements.define('nk-tag', NkTag);
1418
1517
  // <nk-progress value="72" label="72%"></nk-progress>
1419
1518
  // <nk-progress value="72" label="72 %" wide></nk-progress> → fills its row, the label stays beside it
1420
1519
  // The bar is `.nk-progress > i` — a child combinator, so both nodes live here.
1520
+ // With a label the two form one .nk-progress-row (1.18.0): the label beside
1521
+ // the bar in a flex column too – a panel – where the host, display: contents,
1522
+ // would let them stand one under the other.
1421
1523
  class NkProgress extends NkElement {
1422
1524
  static get observedAttributes() { return ['value', 'max', 'label', 'wide']; }
1423
1525
 
@@ -1426,8 +1528,7 @@ class NkProgress extends NkElement {
1426
1528
  this._fill = document.createElement('i');
1427
1529
  this._bar.appendChild(this._fill);
1428
1530
  this._label = this.createElement('span', ['nk-progress-label']);
1429
- this._wrapper.appendChild(this._bar);
1430
- this._wrapper.appendChild(this._label);
1531
+ this._row = this.createElement('span', ['nk-progress-row']);
1431
1532
  this._sync();
1432
1533
  }
1433
1534
 
@@ -1444,7 +1545,8 @@ class NkProgress extends NkElement {
1444
1545
  this._bar.setAttribute('aria-valuemax', max);
1445
1546
  const label = this.getAttribute('label');
1446
1547
  this._label.textContent = label ?? '';
1447
- this._label.style.display = label === null ? 'none' : '';
1548
+ if (label === null) { if (this._bar.parentNode !== this._wrapper) this._wrapper.replaceChildren(this._bar); }
1549
+ else if (this._bar.parentNode !== this._row) { this._row.replaceChildren(this._bar, this._label); this._wrapper.replaceChildren(this._row); }
1448
1550
  }
1449
1551
 
1450
1552
  get value() { return Number(this.getAttribute('value')) || 0; }
@@ -1860,7 +1962,8 @@ function firstFocusable(root) {
1860
1962
  // brings it back; ⌘\ or Ctrl+\ toggles it (on a phone the drawer).
1861
1963
  // `collapsed` is the state, collapse() / expand() / toggleCollapsed() the
1862
1964
  // API, nk-collapse { collapsed } the moment to keep it. collapse-label names
1863
- // the « (default "Close sidebar") and is its tooltip for <nk-tooltip>.
1965
+ // the « (default "Close sidebar", in German "Seitenleiste schließen") and is
1966
+ // its tooltip for <nk-tooltip>.
1864
1967
  const COLLAPSE_ICON = '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="m18 17-5-5 5-5M11 17l-5-5 5-5"/></svg>';
1865
1968
  const phone$1 = () => matchMedia('(max-width: 860px)').matches;
1866
1969
 
@@ -1890,7 +1993,7 @@ class NkSidebar extends NkElement {
1890
1993
  }
1891
1994
 
1892
1995
  _syncCollapse() {
1893
- const label = this.getAttribute('collapse-label') || 'Close sidebar';
1996
+ const label = this.getAttribute('collapse-label') || this.str('closeSidebar');
1894
1997
  this._collapse.hidden = !this.getBoolAttr('collapsible');
1895
1998
  this._collapse.setAttribute('aria-label', label);
1896
1999
  this._collapse.dataset.tooltip = label;
@@ -1942,6 +2045,8 @@ class NkSidebar extends NkElement {
1942
2045
  document.removeEventListener('keydown', this._onKey);
1943
2046
  }
1944
2047
 
2048
+ onStringsChanged() { this._syncCollapse(); }
2049
+
1945
2050
  onAttributeChanged(name) {
1946
2051
  if (name === 'open') {
1947
2052
  this._syncOpen();
@@ -2250,7 +2355,7 @@ class NkTreeItem extends NkElement {
2250
2355
  this._labelSlot.appendChild(this._labelText);
2251
2356
  this._label.appendChild(this._labelSlot);
2252
2357
  this._actions = this.createElement('span', ['actions']);
2253
- for (const [action, glyph, title] of [['add', '＋', 'Add'], ['more', '⋯', 'More']]) {
2358
+ for (const [action, glyph, title] of [['add', '＋', this.str('add')], ['more', '⋯', this.str('more')]]) {
2254
2359
  const b = this.createElement('span', [], { 'data-action': action, role: 'button', title });
2255
2360
  b.textContent = glyph;
2256
2361
  this._actions.appendChild(b);
@@ -2336,6 +2441,8 @@ class NkTreeItem extends NkElement {
2336
2441
  this._row?.removeEventListener('keydown', this._onKey);
2337
2442
  }
2338
2443
 
2444
+ onStringsChanged() { for (const b of this._actions.children) b.title = this.str(b.dataset.action); }
2445
+
2339
2446
  onAttributeChanged(name) {
2340
2447
  if (name === 'label') this.assignSlots();
2341
2448
  else this._sync();
@@ -2412,7 +2519,7 @@ class NkBreadcrumb extends NkElement {
2412
2519
  static get observesLightDom() { return true; }
2413
2520
 
2414
2521
  render() {
2415
- this._nav = this.createElement('nav', ['nk-breadcrumb'], { 'aria-label': 'Breadcrumb' });
2522
+ this._nav = this.createElement('nav', ['nk-breadcrumb'], { 'aria-label': this.str('breadcrumb') });
2416
2523
  this._wrapper.appendChild(this._nav);
2417
2524
  this.projectLightDom();
2418
2525
  }
@@ -2464,6 +2571,7 @@ class NkBreadcrumb extends NkElement {
2464
2571
  teardownEvents() { this._nav?.removeEventListener('click', this._onClick); }
2465
2572
 
2466
2573
  onAttributeChanged() { this.projectLightDom(); }
2574
+ onStringsChanged() { this._nav.setAttribute('aria-label', this.str('breadcrumb')); }
2467
2575
 
2468
2576
  get separator() { return this.getAttribute('separator') ?? '/'; }
2469
2577
  set separator(v) { this.setAttribute('separator', v); }
@@ -2485,7 +2593,7 @@ class NkThemeToggle extends NkElement {
2485
2593
 
2486
2594
  render() {
2487
2595
  this._btn = this.createElement('button', ['nk-topbar-btn', 'nk-theme-toggle'], { type: 'button' });
2488
- this._btn.title = this.getAttribute('title') || 'Toggle light / dark';
2596
+ this._syncTitle();
2489
2597
  this._wrapper.appendChild(this._btn);
2490
2598
  const root = document.documentElement;
2491
2599
  let stored = null;
@@ -2516,8 +2624,11 @@ class NkThemeToggle extends NkElement {
2516
2624
  window.removeEventListener('message', this._onMessage);
2517
2625
  }
2518
2626
 
2627
+ _syncTitle() { this._btn.title = this.getAttribute('title') || this.str('toggleTheme'); }
2628
+ onStringsChanged() { this._syncTitle(); }
2629
+
2519
2630
  onAttributeChanged(name) {
2520
- if (name === 'title' && this._btn) this._btn.title = this.getAttribute('title') || 'Toggle light / dark';
2631
+ if (name === 'title' && this._btn) this._syncTitle();
2521
2632
  }
2522
2633
 
2523
2634
  /** Sets the theme on <html>, persists it and reports it. */
@@ -2548,8 +2659,12 @@ customElements.define('nk-theme-toggle', NkThemeToggle);
2548
2659
  // stylesheet hides it above 860px – there the sidebar is the navigation –
2549
2660
  // and shows it below; `always` shows it at every width (previews, phone
2550
2661
  // frames), `fixed` pins it to the viewport (standalone PWAs) with a spacer
2551
- // holding its place, `floating` makes it a capsule. Exactly one item is `active`; a
2552
- // `drawer` item opens the sidebar instead of becoming active.
2662
+ // holding its place, `floating` makes it a capsule. The item whose value is
2663
+ // the bar's `value` is `active`; a `drawer` item opens the sidebar instead of
2664
+ // becoming active when clicked. A value no item has – a page without a tab
2665
+ // of its own, opened from the drawer – marks the drawer item, as iOS marks
2666
+ // "More" (1.18.0); without one no item is active. Without a value the item
2667
+ // marked `active`, else the first, is the one.
2553
2668
  class NkTabBar extends NkElement {
2554
2669
  static get observedAttributes() { return ['value', 'always', 'fixed', 'floating', 'label']; }
2555
2670
 
@@ -2580,16 +2695,18 @@ class NkTabBar extends NkElement {
2580
2695
  }
2581
2696
 
2582
2697
  _sync() {
2583
- const items = this.items.filter(i => !i.hasAttribute('drawer'));
2698
+ const items = this.items.filter(i => !i.hasAttribute('drawer')), drawers = this.items.filter(i => i.hasAttribute('drawer'));
2584
2699
  if (!items.length) return;
2585
2700
  let value = this.getAttribute('value');
2586
- if (value === null || !items.some(i => this._valueOf(i) === value)) {
2701
+ if (value === null) {
2587
2702
  const preset = items.find(i => i.hasAttribute('active')) || items[0];
2588
2703
  value = this._valueOf(preset);
2589
2704
  }
2705
+ const known = items.some(i => this._valueOf(i) === value);
2590
2706
  for (const item of items) {
2591
2707
  if (this._valueOf(item) === value) item.setAttribute('active', ''); else item.removeAttribute('active');
2592
2708
  }
2709
+ drawers.forEach((item, n) => { if (!known && n === 0) item.setAttribute('active', ''); else item.removeAttribute('active'); });
2593
2710
  this._value = value;
2594
2711
  }
2595
2712
 
@@ -2721,7 +2838,7 @@ class NkPage extends NkElement {
2721
2838
 
2722
2839
  render() {
2723
2840
  this._page = this.createElement('div', ['nk-page']);
2724
- this._icon = this.createElement('div', ['nk-page-icon'], { role: 'button', title: 'Change icon' });
2841
+ this._icon = this.createElement('div', ['nk-page-icon'], { role: 'button', title: this.str('changeIcon') });
2725
2842
  this._iconSlot = this.createElement('slot', [], { name: 'icon' });
2726
2843
  this._iconSlot.appendChild(this._icon);
2727
2844
  this._page.appendChild(this._iconSlot);
@@ -2777,6 +2894,8 @@ class NkPage extends NkElement {
2777
2894
  this._iconSlot?.removeEventListener('slotchange', this._onCover);
2778
2895
  }
2779
2896
 
2897
+ onStringsChanged() { this._icon.title = this.str('changeIcon'); }
2898
+
2780
2899
  onAttributeChanged(name) {
2781
2900
  if (name === 'narrow') this._build();
2782
2901
  else this._sync();
@@ -2851,7 +2970,7 @@ class NkPageTitle extends NkElement {
2851
2970
  this._h1.setAttribute('contenteditable', 'plaintext-only');
2852
2971
  this._h1.setAttribute('spellcheck', 'false');
2853
2972
  this._h1.setAttribute('role', 'textbox');
2854
- this._h1.setAttribute('aria-label', 'Title');
2973
+ this._h1.setAttribute('aria-label', this.str('title'));
2855
2974
  const text = this.getAttribute('value') ?? this.textContent.trim();
2856
2975
  if (this._h1.textContent !== text && document.activeElement !== this) this._h1.textContent = text;
2857
2976
  this._h1.setAttribute('data-placeholder', this.getAttribute('placeholder') || '');
@@ -2886,6 +3005,7 @@ class NkPageTitle extends NkElement {
2886
3005
  }
2887
3006
 
2888
3007
  onAttributeChanged() { this._sync(); }
3008
+ onStringsChanged() { if (this._h1.hasAttribute('role')) this._h1.setAttribute('aria-label', this.str('title')); }
2889
3009
 
2890
3010
  get value() { return this.getBoolAttr('editable') ? (this._h1?.textContent.trim() ?? '') : (this.getAttribute('value') ?? this.textContent.trim()); }
2891
3011
  set value(v) { this.setAttribute('value', v); }
@@ -3056,8 +3176,9 @@ class NkSynced extends NkElement {
3056
3176
  this._sync();
3057
3177
  }
3058
3178
 
3059
- _sync() { this._badge.textContent = this.getAttribute('badge') ?? '⟳ synced'; }
3179
+ _sync() { this._badge.textContent = this.getAttribute('badge') ?? this.str('synced'); }
3060
3180
  onAttributeChanged() { this._sync(); }
3181
+ onStringsChanged() { this._sync(); }
3061
3182
 
3062
3183
  get badge() { return this.getAttribute('badge'); }
3063
3184
  set badge(v) { this.setAttribute('badge', v); }
@@ -4142,6 +4263,12 @@ customElements.define('nk-sheet', NkSheet);
4142
4263
  // nk-select { index, value, step } – index counts from 1, like `current` –
4143
4264
  // and, unless cancelled, makes that step current. `horizontal` sets the
4144
4265
  // steps in one row above a wizard.
4266
+ // A step with `href` (1.17.0) shows its label as a link, <a class="st-label">,
4267
+ // with or without `selectable` – to open a chapter in a new tab or copy its
4268
+ // address. A plain click, or Enter, fires the same nk-select; cancelling it
4269
+ // keeps the browser from following the link, for a router of your own. A
4270
+ // middle click or one with Cmd, Ctrl, Shift or Alt fires nothing and does
4271
+ // what a link does.
4145
4272
  class NkSteps extends NkElement {
4146
4273
  static get observedAttributes() { return ['steps', 'current', 'label', 'selectable', 'horizontal']; }
4147
4274
 
@@ -4169,7 +4296,7 @@ class NkSteps extends NkElement {
4169
4296
  // Rebuilding drops the focused label; the new one at that place takes it back.
4170
4297
  const focused = this.shadowRoot?.activeElement?.closest?.('li')?.dataset.index;
4171
4298
  this._list.replaceChildren(...this._items().map((_, i) => {
4172
- const n = i + 1, { label: text, desc, state } = this._step(i);
4299
+ const n = i + 1, { label: text, desc, state, href } = this._step(i);
4173
4300
  // A state of its own wins; without one, the steps before `current` are done.
4174
4301
  const done = state ? state === 'done' : n < current, skipped = state === 'skipped';
4175
4302
  const li = this.createElement('li', ['nk-step'], { 'data-index': String(n) });
@@ -4179,7 +4306,8 @@ class NkSteps extends NkElement {
4179
4306
  if (n === current) li.setAttribute('aria-current', 'step');
4180
4307
  const mark = this.createElement('span', ['st-mark'], { 'aria-hidden': 'true' });
4181
4308
  mark.textContent = done ? '✓' : skipped ? '–' : String(n);
4182
- const body = selectable ? this.createElement('button', ['st-label'], { type: 'button' }) : document.createElement('span');
4309
+ const body = href != null && href !== '' ? this.createElement('a', ['st-label'], { href: String(href) })
4310
+ : selectable ? this.createElement('button', ['st-label'], { type: 'button' }) : document.createElement('span');
4183
4311
  body.textContent = text ?? '';
4184
4312
  if (desc) { const d = this.createElement('span', ['st-desc']); d.textContent = desc; body.appendChild(d); }
4185
4313
  li.append(mark, body);
@@ -4190,9 +4318,18 @@ class NkSteps extends NkElement {
4190
4318
 
4191
4319
  setupEvents() {
4192
4320
  this._onClick = (e) => {
4193
- if (!this.getBoolAttr('selectable')) return;
4194
4321
  const li = e.target.closest?.('li.nk-step');
4195
- if (li && this._list.contains(li)) this.select(Number(li.dataset.index));
4322
+ if (!li || !this._list.contains(li)) return;
4323
+ const link = li.querySelector('a.st-label');
4324
+ if (link) {
4325
+ // The link contract: a plain left click is a selection, any other
4326
+ // one the browser's. The mark beside the link counts as the link.
4327
+ if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
4328
+ if (!link.contains(e.target)) { link.click(); return; }
4329
+ if (!this.select(Number(li.dataset.index))) e.preventDefault();
4330
+ return;
4331
+ }
4332
+ if (this.getBoolAttr('selectable')) this.select(Number(li.dataset.index));
4196
4333
  };
4197
4334
  this._list.addEventListener('click', this._onClick);
4198
4335
  }
@@ -4291,16 +4428,31 @@ customElements.define('nk-bookmark', NkBookmark);
4291
4428
  // <nk-copy-field value="https://monahilft.notionkit.app"></nk-copy-field>
4292
4429
  // <nk-copy-field value="ntn_4f2…" secret mono></nk-copy-field>
4293
4430
  // → <div class="nk-copy-field mono"><span class="cf-value">…</span>
4294
- // <button class="cf-btn">Show</button><button class="cf-btn">Copy</button></div>
4431
+ // <button class="cf-btn" aria-label="Show"><svg>…</svg><span>Show</span></button>
4432
+ // <button class="cf-btn" aria-label="Copy"><svg>…</svg><span>Copy</span></button></div>
4295
4433
  // A value to take along – a link, an address, a key (NotionKit 1.8.0). Copy
4296
4434
  // writes it to the clipboard and says "Copied" in green for a moment; where
4297
4435
  // the clipboard is not allowed, the value is shown and selected instead, for
4298
4436
  // ⌘C. `secret` masks it behind a Show/Hide toggle; Copy still copies the
4299
4437
  // real value. `value` set as a property is not reflected, so a key never
4300
4438
  // lands in the markup. Fires nk-action { action: 'copy', value, ok }. The
4301
- // texts are attributes: copy-label, copied-label, show-label, hide-label.
4439
+ // texts come in English or German after the language (1.17.0, setStrings()
4440
+ // for others); copy-label, copied-label, show-label, hide-label set them here.
4441
+ // Each button carries an icon beside its word (1.18.0): on a phone, and with
4442
+ // `icons` anywhere, the icon stands in for the word – two overlapping squares,
4443
+ // an eye, a check in green for the moment after – and a masked key keeps a
4444
+ // dozen characters more. The word stays the button's name, and while the
4445
+ // icons show, its tooltip for <nk-tooltip>.
4446
+ const ICONS = {
4447
+ copy: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M15 9V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h4"/><rect x="9" y="9" width="12" height="12" rx="2"/></svg>',
4448
+ copied: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>',
4449
+ show: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z"/><circle cx="12" cy="12" r="3"/></svg>',
4450
+ hide: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z"/><circle cx="12" cy="12" r="3"/><path d="m3 3 18 18"/></svg>',
4451
+ };
4452
+ const PHONE = typeof matchMedia === 'function' ? matchMedia('(max-width: 860px)') : null;
4453
+
4302
4454
  class NkCopyField extends NkElement {
4303
- static get observedAttributes() { return ['value', 'mono', 'wrap', 'wide', 'secret', 'copy-label', 'copied-label', 'show-label', 'hide-label']; }
4455
+ static get observedAttributes() { return ['value', 'mono', 'wrap', 'wide', 'secret', 'icons', 'copy-label', 'copied-label', 'show-label', 'hide-label']; }
4304
4456
 
4305
4457
  render() {
4306
4458
  this._val ??= this.getAttribute('value') ?? '';
@@ -4315,32 +4467,46 @@ class NkCopyField extends NkElement {
4315
4467
 
4316
4468
  _sync() {
4317
4469
  if (!this._box) return;
4318
- for (const m of ['mono', 'wrap', 'wide']) this._box.classList.toggle(m, this.getBoolAttr(m));
4470
+ for (const m of ['mono', 'wrap', 'wide', 'icons']) this._box.classList.toggle(m, this.getBoolAttr(m));
4319
4471
  const secret = this.getBoolAttr('secret');
4320
4472
  this._text.textContent = secret && !this._revealed ? '•'.repeat(Math.min(this._val.length, 24)) : this._val;
4321
4473
  // Not `hidden`: .cf-btn sets no display of its own that could lose to it,
4322
4474
  // but a button that is not there cannot be tabbed to either.
4323
4475
  if (secret && !this._show.isConnected) this._copy.before(this._show);
4324
4476
  if (!secret) this._show.remove();
4325
- this._show.textContent = this._revealed ? (this.getAttribute('hide-label') || 'Hide') : (this.getAttribute('show-label') || 'Show');
4477
+ const tip = this.getBoolAttr('icons') || !!PHONE?.matches;
4478
+ this._button(this._show, this._revealed ? 'hide' : 'show', this._revealed ? (this.getAttribute('hide-label') || this.str('hide')) : (this.getAttribute('show-label') || this.str('show')), tip);
4326
4479
  this._show.setAttribute('aria-pressed', String(!!this._revealed));
4327
- this._copy.textContent = this._copied ? (this.getAttribute('copied-label') || 'Copied') : (this.getAttribute('copy-label') || 'Copy');
4480
+ this._button(this._copy, this._copied ? 'copied' : 'copy', this._copied ? (this.getAttribute('copied-label') || this.str('copied')) : (this.getAttribute('copy-label') || this.str('copy')), tip);
4328
4481
  this._copy.classList.toggle('copied', !!this._copied);
4329
4482
  }
4330
4483
 
4484
+ /** The icon and the word of a button; the word is its name, and its tooltip while the icon stands in for it. */
4485
+ _button(btn, icon, word, tip) {
4486
+ if (btn.dataset.icon !== icon) { btn.innerHTML = `${ICONS[icon]}<span></span>`; btn.dataset.icon = icon; }
4487
+ btn.lastChild.textContent = word;
4488
+ btn.setAttribute('aria-label', word);
4489
+ if (tip) btn.setAttribute('data-tooltip', word); else btn.removeAttribute('data-tooltip');
4490
+ }
4491
+
4331
4492
  setupEvents() {
4332
4493
  this._onCopy = () => this.copy();
4333
4494
  this._onShow = () => { this._revealed = !this._revealed; this._sync(); };
4495
+ this._onPhone = () => this._sync();
4334
4496
  this._copy.addEventListener('click', this._onCopy);
4335
4497
  this._show.addEventListener('click', this._onShow);
4498
+ PHONE?.addEventListener('change', this._onPhone);
4336
4499
  }
4337
4500
 
4338
4501
  teardownEvents() {
4339
4502
  this._copy?.removeEventListener('click', this._onCopy);
4340
4503
  this._show?.removeEventListener('click', this._onShow);
4504
+ PHONE?.removeEventListener('change', this._onPhone);
4341
4505
  clearTimeout(this._timer);
4342
4506
  }
4343
4507
 
4508
+ onStringsChanged() { this._sync(); }
4509
+
4344
4510
  onAttributeChanged(name, _old, value) {
4345
4511
  if (name === 'value') this._val = value ?? '';
4346
4512
  this._sync();
@@ -4368,6 +4534,8 @@ class NkCopyField extends NkElement {
4368
4534
  set value(v) { this._val = v == null ? '' : String(v); this._sync(); }
4369
4535
  get secret() { return this.getBoolAttr('secret'); }
4370
4536
  set secret(v) { this.setBoolAttr('secret', v); }
4537
+ get icons() { return this.getBoolAttr('icons'); }
4538
+ set icons(v) { this.setBoolAttr('icons', v); }
4371
4539
  }
4372
4540
 
4373
4541
  customElements.define('nk-copy-field', NkCopyField);
@@ -4392,7 +4560,9 @@ customElements.define('nk-copy-field', NkCopyField);
4392
4560
  // Events: nk-change { dataUrl, width, height, size } after a pick, and on
4393
4561
  // remove with an empty dataUrl; nk-error { message, name } when the
4394
4562
  // file cannot be decoded (HEIC outside Safari, a broken file).
4395
- // Texts: choose-label, change-label, remove-label; label names the group.
4563
+ // Texts: English or German after the language (1.17.0, setStrings() for
4564
+ // others); choose-label, change-label, remove-label set them here.
4565
+ // label names the group.
4396
4566
 
4397
4567
  function dataUrlBytes(url) {
4398
4568
  const b64 = url.slice(url.indexOf(',') + 1);
@@ -4434,8 +4604,8 @@ class NkImagePicker extends NkElement {
4434
4604
  }
4435
4605
  const label = this.getAttribute('label');
4436
4606
  if (label) this._row.setAttribute('aria-label', label); else this._row.removeAttribute('aria-label');
4437
- this._choose.textContent = this._src ? (this.getAttribute('change-label') || 'Change image') : (this.getAttribute('choose-label') || 'Upload image');
4438
- this._remove.textContent = this.getAttribute('remove-label') || 'Remove';
4607
+ this._choose.textContent = this._src ? (this.getAttribute('change-label') || this.str('changeImage')) : (this.getAttribute('choose-label') || this.str('uploadImage'));
4608
+ this._remove.textContent = this.getAttribute('remove-label') || this.str('remove');
4439
4609
  this._remove.hidden = !this._src;
4440
4610
  this._input.accept = this.getAttribute('accept') || 'image/*';
4441
4611
  }
@@ -4483,6 +4653,8 @@ class NkImagePicker extends NkElement {
4483
4653
  this._remove?.removeEventListener('click', this._onRemove);
4484
4654
  }
4485
4655
 
4656
+ onStringsChanged() { this._sync(); }
4657
+
4486
4658
  onAttributeChanged(name, _old, value) {
4487
4659
  if (name === 'src') this._src = value || '';
4488
4660
  this._sync();
@@ -4582,8 +4754,9 @@ const CHEVRONS = {
4582
4754
  // default from the locale, Monday where the browser cannot say), weeks,
4583
4755
  // weekend (weekdays not worked, "6,0" for Saturday and Sunday), range, time,
4584
4756
  // clearable, label and the texts today-label, prev-label, next-label,
4585
- // week-label, time-label, clear-label. `time` belongs to single days; a
4586
- // range has none.
4757
+ // week-label, time-label, clear-label – without them English or German
4758
+ // after the language (1.17.0). `time` belongs to single days; a range has
4759
+ // none.
4587
4760
  // days (property, or JSON attribute): { 'YYYY-MM-DD': { off, label, marks } }
4588
4761
  // – `off` greys a holiday, `label` names the day (tooltip and screen
4589
4762
  // reader), `marks` puts up to three dots in the nine colours on it.
@@ -4712,9 +4885,9 @@ class NkCalendar extends NkFormElement {
4712
4885
  const label = this.getAttribute('label');
4713
4886
  if (label) this._cal.setAttribute('aria-label', label); else this._cal.removeAttribute('aria-label');
4714
4887
  this._title.textContent = new Intl.DateTimeFormat(locale, { month: 'long', year: 'numeric' }).format(g.first);
4715
- this._todayBtn.textContent = this.getAttribute('today-label') || 'Today';
4716
- this._prev.setAttribute('aria-label', this.getAttribute('prev-label') || 'Previous month');
4717
- this._next.setAttribute('aria-label', this.getAttribute('next-label') || 'Next month');
4888
+ this._todayBtn.textContent = this.getAttribute('today-label') || this.str('today');
4889
+ this._prev.setAttribute('aria-label', this.getAttribute('prev-label') || this.str('previousMonth'));
4890
+ this._next.setAttribute('aria-label', this.getAttribute('next-label') || this.str('nextMonth'));
4718
4891
 
4719
4892
  // The one tab stop: the focused day, else the chosen one, else the 1st.
4720
4893
  const cells = Array.from({ length: 42 }, (_, i) => isoOf(g.day(i)));
@@ -4751,8 +4924,8 @@ class NkCalendar extends NkFormElement {
4751
4924
 
4752
4925
  const time = this._hasTime, clearable = this.getBoolAttr('clearable');
4753
4926
  this._timeInput.value = this._time;
4754
- this._timeInput.setAttribute('aria-label', this.getAttribute('time-label') || 'Time');
4755
- this._clear.textContent = this.getAttribute('clear-label') || 'Clear';
4927
+ this._timeInput.setAttribute('aria-label', this.getAttribute('time-label') || this.str('time'));
4928
+ this._clear.textContent = this.getAttribute('clear-label') || this.str('clear');
4756
4929
  this._foot.replaceChildren(...[time && this._timeInput, clearable && this._clear].filter(Boolean));
4757
4930
  if (time || clearable) this._cal.appendChild(this._foot); else this._foot.remove();
4758
4931
  this._syncForm();
@@ -4862,6 +5035,8 @@ class NkCalendar extends NkFormElement {
4862
5035
  document.removeEventListener('click', this._onOutside, true);
4863
5036
  }
4864
5037
 
5038
+ onStringsChanged() { if (this._grid) this._draw(); }
5039
+
4865
5040
  onAttributeChanged(name, _old, value) {
4866
5041
  if (name === 'value') { this._readValue(value); this._draw(); return; }
4867
5042
  if (name === 'month') { this.month = value; return; }
@@ -4938,7 +5113,8 @@ customElements.define('nk-calendar', NkCalendar);
4938
5113
  // Notion: from `min` (380) to `max` (all but 320px of the window). The width
4939
5114
  // is the token --nk-peek-width, set on :root; `width` (px) sets it too, and
4940
5115
  // nk-resize { width } fires when a drag or a key ends – the moment to keep
4941
- // it. resize-label names the edge (default "Resize").
5116
+ // it. resize-label names the edge (default "Resize", in German "Breite
5117
+ // ändern").
4942
5118
  // `inset`: while it is open on the desktop, the page's <nk-app> gets
4943
5119
  // `peek-inset` – its main column makes room instead of lying under the peek.
4944
5120
  const CLOSE_ICON = '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="m6 17 5-5-5-5M13 17l5-5-5-5"/></svg>';
@@ -4985,7 +5161,7 @@ class NkPeek extends NkElement {
4985
5161
 
4986
5162
  _syncResize() {
4987
5163
  this._handle.hidden = !this.getBoolAttr('resizable');
4988
- this._handle.setAttribute('aria-label', this.getAttribute('resize-label') || 'Resize');
5164
+ this._handle.setAttribute('aria-label', this.getAttribute('resize-label') || this.str('resize'));
4989
5165
  this._handle.setAttribute('aria-valuemin', this._min);
4990
5166
  this._handle.setAttribute('aria-valuenow', Math.round(this.width));
4991
5167
  }
@@ -5002,7 +5178,7 @@ class NkPeek extends NkElement {
5002
5178
  _syncLabels() {
5003
5179
  const label = this.getAttribute('label');
5004
5180
  if (label) this._box.setAttribute('aria-label', label); else this._box.removeAttribute('aria-label');
5005
- this._close.setAttribute('aria-label', this.getAttribute('close-label') || 'Close');
5181
+ this._close.setAttribute('aria-label', this.getAttribute('close-label') || this.str('close'));
5006
5182
  }
5007
5183
 
5008
5184
  _syncOpen() {
@@ -5087,6 +5263,8 @@ class NkPeek extends NkElement {
5087
5263
  this._wasOpen = false;
5088
5264
  }
5089
5265
 
5266
+ onStringsChanged() { this._syncResize(); this._syncLabels(); }
5267
+
5090
5268
  onAttributeChanged(name, _old, value) {
5091
5269
  if (name === 'width') { this._setWidth(Number(value)); return; }
5092
5270
  if (name === 'inset') { this._syncInset(); return; }
@@ -5419,7 +5597,7 @@ class NkModal extends NkElement {
5419
5597
  this._backdrop = this.createElement('div', ['nk-modal-backdrop']);
5420
5598
  this._backdrop.inert = true;
5421
5599
  this._box = this.createElement('div', ['nk-modal'], { role: 'dialog', 'aria-modal': 'true', tabindex: '-1' });
5422
- this._nav = this.createElement('nav', ['nk-settings-nav'], { 'aria-label': 'Settings' });
5600
+ this._nav = this.createElement('nav', ['nk-settings-nav'], { 'aria-label': this.str('settings') });
5423
5601
  this._nav.appendChild(this.createElement('slot', [], { name: 'user' }));
5424
5602
  this._rows = document.createElement('div');
5425
5603
  this._nav.appendChild(this._rows);
@@ -5537,6 +5715,8 @@ class NkModal extends NkElement {
5537
5715
  if (this._wasOpen) { unlockScroll(); this._undoInert?.(); this._undoInert = null; this._wasOpen = false; }
5538
5716
  }
5539
5717
 
5718
+ onStringsChanged() { this._nav.setAttribute('aria-label', this.str('settings')); }
5719
+
5540
5720
  onAttributeChanged(name) {
5541
5721
  if (name === 'open') {
5542
5722
  this._syncOpen();
@@ -5671,7 +5851,7 @@ class NkCmdk extends NkElement {
5671
5851
  render() {
5672
5852
  this._backdrop = this.createElement('div', ['nk-cmdk-backdrop']);
5673
5853
  this._backdrop.inert = true;
5674
- this._box = this.createElement('div', ['nk-cmdk'], { role: 'dialog', 'aria-modal': 'true', 'aria-label': 'Command palette' });
5854
+ this._box = this.createElement('div', ['nk-cmdk'], { role: 'dialog', 'aria-modal': 'true' });
5675
5855
  const row = this.createElement('div', ['nk-cmdk-input-row']);
5676
5856
  const glass = document.createElement('span');
5677
5857
  glass.style.fontSize = '15px';
@@ -5696,7 +5876,11 @@ class NkCmdk extends NkElement {
5696
5876
  this._syncOpen();
5697
5877
  }
5698
5878
 
5699
- _syncAttrs() { this._input.placeholder = this.getAttribute('placeholder') || 'Search or type a command …'; }
5879
+ _syncAttrs() {
5880
+ this._input.placeholder = this.getAttribute('placeholder') || this.str('commandPlaceholder');
5881
+ this._box.setAttribute('aria-label', this.str('commandPalette'));
5882
+ }
5883
+ onStringsChanged() { this._syncAttrs(); }
5700
5884
 
5701
5885
  /** Filtered, flat list in group order, best matches first within a group. */
5702
5886
  results() {
@@ -6167,7 +6351,7 @@ class NkEmojiPicker extends NkElement {
6167
6351
 
6168
6352
  render() {
6169
6353
  this._box = this.createElement('div', ['nk-pop']);
6170
- this._search = this.createElement('input', ['nk-emoji-search'], { type: 'search', autocomplete: 'off', 'aria-label': 'Search emoji' });
6354
+ this._search = this.createElement('input', ['nk-emoji-search'], { type: 'search', autocomplete: 'off' });
6171
6355
  this._grid = this.createElement('div', ['nk-emoji-grid'], { role: 'listbox' });
6172
6356
  this._cats = this.createElement('div', ['nk-emoji-cats'], { role: 'tablist' });
6173
6357
  this._box.append(this._search, this._grid, this._cats);
@@ -6179,7 +6363,11 @@ class NkEmojiPicker extends NkElement {
6179
6363
  this._syncAttrs();
6180
6364
  }
6181
6365
 
6182
- _syncAttrs() { this._search.placeholder = this.getAttribute('placeholder') || 'Search…'; }
6366
+ _syncAttrs() {
6367
+ this._search.placeholder = this.getAttribute('placeholder') || this.str('emojiPlaceholder');
6368
+ this._search.setAttribute('aria-label', this.str('searchEmoji'));
6369
+ }
6370
+ onStringsChanged() { this._syncAttrs(); }
6183
6371
 
6184
6372
  _renderCats() {
6185
6373
  this._cats.replaceChildren();
@@ -6436,6 +6624,8 @@ customElements.define('nk-database', NkDatabase);
6436
6624
  // text: a string, or { text, desc, color, tooltip, sort } – one of Notion's
6437
6625
  // nine text colours for a tone, a quiet second line under it, the whole
6438
6626
  // text in a tooltip (served by <nk-tooltip>), a value to sort by.
6627
+ // progress: 0–100, the bar and its percentage as Intl writes it in
6628
+ // column.locale, else the page's language ("45 %" in German).
6439
6629
  // date: the value as given, or with column.format ('short', 'relative' or
6440
6630
  // Intl.DateTimeFormat options) and column.locale formatted from an ISO date
6441
6631
  // or date-time, D.M.YYYY, a Date or a timestamp; { start, end } is a range.
@@ -6501,7 +6691,7 @@ function renderPropertyCell(column, value, row = {}) {
6501
6691
  if (type === 'actions') return actions(column, value);
6502
6692
  if (value === undefined || value === null || value === '') {
6503
6693
  if (type === 'checkbox') return checkbox(column, false, row);
6504
- if (type === 'progress') return progress(0);
6694
+ if (type === 'progress') return progress(column, 0);
6505
6695
  return el('span', type === 'person' ? 'person-cell' : null, type === 'text' && column.title ? '' : '—');
6506
6696
  }
6507
6697
  switch (type) {
@@ -6533,7 +6723,7 @@ function renderPropertyCell(column, value, row = {}) {
6533
6723
  }
6534
6724
  // column.locale / column.format: Intl.NumberFormat locale and options, e.g. { minimumFractionDigits: 1 }.
6535
6725
  case 'number': return el('span', null, typeof value === 'number' ? value.toLocaleString(column.locale, column.format) : String(value));
6536
- case 'progress': return progress(Number(value) || 0);
6726
+ case 'progress': return progress(column, Number(value) || 0);
6537
6727
  default: {
6538
6728
  const o = typeof value === 'object' ? value : { text: value };
6539
6729
  let t;
@@ -6579,15 +6769,23 @@ function checkbox(column, checked, row) {
6579
6769
  return label;
6580
6770
  }
6581
6771
 
6582
- function progress(value) {
6772
+ function progress(column, value) {
6583
6773
  const frag = document.createDocumentFragment();
6584
6774
  const bar = el('span', 'nk-progress');
6585
6775
  const fill = el('i'); fill.style.width = `${Math.max(0, Math.min(100, value))}%`;
6586
6776
  bar.appendChild(fill);
6587
- frag.append(bar, el('span', 'nk-progress-label', `${Math.round(value)}%`));
6777
+ frag.append(bar, el('span', 'nk-progress-label', formatPercent(column, value)));
6588
6778
  return frag;
6589
6779
  }
6590
6780
 
6781
+ /** A progress value of 0–100 as Intl writes a percentage in column.locale, else the page's language: 45 → "45%", in German "45 %". */
6782
+ function formatPercent(column, value) {
6783
+ const n = Number(value) || 0;
6784
+ try {
6785
+ return new Intl.NumberFormat(column.locale || resolveLocale(), { style: 'percent', maximumFractionDigits: 0 }).format(n / 100);
6786
+ } catch { return `${Math.round(n)}%`; } // a lang Intl does not take
6787
+ }
6788
+
6591
6789
  /** A select's place among its options: the order Notion sorts by. */
6592
6790
  function rankOf(column, value) {
6593
6791
  const i = (column.options || []).findIndex(o => o.value === value || o.label === value);
@@ -6683,7 +6881,7 @@ class NkTableView extends NkElement {
6683
6881
  }
6684
6882
  this._tbody.appendChild(r);
6685
6883
  }
6686
- this._newRow.textContent = this.getAttribute('new-row-label') || '＋ New page';
6884
+ this._newRow.textContent = this.getAttribute('new-row-label') || this.str('newPage');
6687
6885
  this._newRow.style.display = this.getBoolAttr('new-row') ? '' : 'none';
6688
6886
  }
6689
6887
 
@@ -6733,6 +6931,7 @@ class NkTableView extends NkElement {
6733
6931
 
6734
6932
  _rowById(id) { return this._rows.find(r => String(r.id) === String(id)); }
6735
6933
  onAttributeChanged() { this._render(); }
6934
+ onStringsChanged() { this._render(); }
6736
6935
 
6737
6936
  get name() { return this.getAttribute('name') || 'table'; }
6738
6937
  get columns() { return this._columns; }
@@ -6800,7 +6999,7 @@ class NkBoardView extends NkElement {
6800
6999
  const v = row[c.key];
6801
7000
  if (v === undefined || v === null || v === '') continue;
6802
7001
  const s = document.createElement('span');
6803
- if (c.type === 'progress') s.textContent = `▰ ${v}%`;
7002
+ if (c.type === 'progress') s.textContent = `▰ ${formatPercent(c, v)}`;
6804
7003
  else if (c.type === 'date') s.textContent = `📅 ${formatDate(c, v)}`;
6805
7004
  else s.appendChild(renderPropertyCell(c, v, row));
6806
7005
  meta.appendChild(s);
@@ -6923,7 +7122,7 @@ class NkListView extends NkElement {
6923
7122
  item.append(icon, t, m);
6924
7123
  this._list.appendChild(item);
6925
7124
  }
6926
- this._newRow.textContent = this.getAttribute('new-row-label') || '＋ New page';
7125
+ this._newRow.textContent = this.getAttribute('new-row-label') || this.str('newPage');
6927
7126
  this._newRow.style.display = this.getBoolAttr('new-row') ? '' : 'none';
6928
7127
  }
6929
7128
 
@@ -6948,6 +7147,7 @@ class NkListView extends NkElement {
6948
7147
 
6949
7148
  _rowById(id) { return this._rows.find(r => String(r.id) === String(id)); }
6950
7149
  onAttributeChanged() { this._render(); }
7150
+ onStringsChanged() { this._render(); }
6951
7151
 
6952
7152
  get name() { return this.getAttribute('name') || 'list'; }
6953
7153
  get columns() { return this._columns; }
@@ -6969,7 +7169,8 @@ customElements.define('nk-list-view', NkListView);
6969
7169
  // default today's), weeks (the ISO week in front of each row), week-start
6970
7170
  // (0 = Sunday … 6 = Saturday; default from the locale), weekend (weekdays
6971
7171
  // washed like the days of other months, "6,0"), today, locale and the texts
6972
- // today-label, prev-label, next-label, week-label.
7172
+ // today-label, prev-label, next-label, week-label – without them English
7173
+ // or German after the language (1.17.0).
6973
7174
  // Standalone: view.columns = […]; view.rows = […]. Inside <nk-database> the
6974
7175
  // database pushes the data. A card fires nk-select { row, id, value } like a
6975
7176
  // row of the table, Today and ‹ › nk-month { month }.
@@ -7025,9 +7226,9 @@ class NkCalendarView extends NkElement {
7025
7226
  }
7026
7227
  this._box.classList.toggle('weeks', weeks);
7027
7228
  this._title.textContent = new Intl.DateTimeFormat(locale, { month: 'long', year: 'numeric' }).format(g.first);
7028
- this._todayBtn.textContent = this.getAttribute('today-label') || 'Today';
7029
- this._prev.setAttribute('aria-label', this.getAttribute('prev-label') || 'Previous month');
7030
- this._next.setAttribute('aria-label', this.getAttribute('next-label') || 'Next month');
7229
+ this._todayBtn.textContent = this.getAttribute('today-label') || this.str('today');
7230
+ this._prev.setAttribute('aria-label', this.getAttribute('prev-label') || this.str('previousMonth'));
7231
+ this._next.setAttribute('aria-label', this.getAttribute('next-label') || this.str('nextMonth'));
7031
7232
 
7032
7233
  const cell = (cls, text) => { const el = this.createElement('div', [cls]); el.textContent = text; return el; };
7033
7234
  const nodes = [];
@@ -7073,6 +7274,8 @@ class NkCalendarView extends NkElement {
7073
7274
 
7074
7275
  _rowById(id) { return this._rows.find(r => String(r.id) === String(id)); }
7075
7276
 
7277
+ onStringsChanged() { this._render(); }
7278
+
7076
7279
  onAttributeChanged(name) {
7077
7280
  if (name === 'month') this._month = this._attrMonth() ?? this._month;
7078
7281
  this._render();
@@ -7106,13 +7309,20 @@ customElements.define('nk-calendar-view', NkCalendarView);
7106
7309
  // <nk-database> the database pushes the data. A card fires nk-select
7107
7310
  // { row, id, value } on a click, Enter or Space, like a row of the table;
7108
7311
  // the add card nk-action { action: 'new-row' }.
7312
+ // `href-key` (1.17.0) names the row field with the card's address: a row
7313
+ // with one gets a link, <a class="nk-card" href>, in a .card-item that
7314
+ // carries the list item's role – to open a course in a new tab or copy its
7315
+ // address. A plain click, or Enter, fires the same nk-select; cancelling it
7316
+ // keeps the browser from following the link. A middle click or one with
7317
+ // Cmd, Ctrl, Shift or Alt fires nothing and does what a link does.
7109
7318
  // → <div class="nk-gallery" role="list"><div class="nk-card" role="listitem" tabindex="0">
7110
7319
  // <div class="nk-cover"><img src="…" alt=""></div><div class="card-title">🧭 …</div><div class="card-meta">…</div></div>
7320
+ // <div class="card-item" role="listitem"><a class="nk-card" href="/courses/safety">…</a></div>
7111
7321
  // <div class="nk-new-row">＋ New page</div></div>
7112
7322
  const SIZES = ['small', 'large'];
7113
7323
 
7114
7324
  class NkGalleryView extends NkElement {
7115
- static get observedAttributes() { return ['name', 'label', 'badge', 'count', 'cover-key', 'no-cover', 'size', 'fit', 'title-key', 'meta-keys', 'new-row', 'new-row-label']; }
7325
+ static get observedAttributes() { return ['name', 'label', 'badge', 'count', 'cover-key', 'no-cover', 'size', 'fit', 'title-key', 'meta-keys', 'href-key', 'new-row', 'new-row-label']; }
7116
7326
 
7117
7327
  render() {
7118
7328
  this._grid = this.createElement('div', ['nk-gallery'], { role: 'list' });
@@ -7138,9 +7348,13 @@ class NkGalleryView extends NkElement {
7138
7348
  this._grid.className = ['nk-gallery', SIZES.includes(size) && size, this.getBoolAttr('fit') && 'fit'].filter(Boolean).join(' ');
7139
7349
  const title = this._titleColumn(), meta = this._metaColumns();
7140
7350
  const coverKey = this.getAttribute('cover-key') || 'cover', covers = !this.getBoolAttr('no-cover');
7351
+ const hrefKey = this.getAttribute('href-key');
7141
7352
  this._grid.replaceChildren();
7142
7353
  for (const row of this._rows) {
7143
- const card = this.createElement('div', ['nk-card'], { role: 'listitem', tabindex: '0', 'data-id': row.id ?? '' });
7354
+ const link = hrefKey ? row[hrefKey] : null, href = link && typeof link === 'object' ? link.href : link;
7355
+ const card = href
7356
+ ? this.createElement('a', ['nk-card'], { href: String(href), 'data-id': row.id ?? '' })
7357
+ : this.createElement('div', ['nk-card'], { role: 'listitem', tabindex: '0', 'data-id': row.id ?? '' });
7144
7358
  if (covers) {
7145
7359
  const cover = this.createElement('div', ['nk-cover']);
7146
7360
  if (row[coverKey]) cover.appendChild(this.createElement('img', [], { src: row[coverKey], alt: '' }));
@@ -7153,17 +7367,21 @@ class NkGalleryView extends NkElement {
7153
7367
  const v = row[c.key];
7154
7368
  if (v === undefined || v === null || v === '') continue;
7155
7369
  const s = document.createElement('span');
7156
- if (c.type === 'progress') s.textContent = `▰ ${v}%`;
7370
+ if (c.type === 'progress') s.textContent = `▰ ${formatPercent(c, v)}`;
7157
7371
  else if (c.type === 'date') s.textContent = `📅 ${formatDate(c, v)}`;
7158
7372
  else s.appendChild(renderPropertyCell(c, v, row));
7159
7373
  m.appendChild(s);
7160
7374
  }
7161
7375
  card.append(t, m);
7162
- this._grid.appendChild(card);
7376
+ if (href) {
7377
+ const item = this.createElement('div', ['card-item'], { role: 'listitem' });
7378
+ item.appendChild(card);
7379
+ this._grid.appendChild(item);
7380
+ } else this._grid.appendChild(card);
7163
7381
  }
7164
7382
  if (this.getBoolAttr('new-row')) {
7165
7383
  const add = this.createElement('div', ['nk-new-row'], { role: 'button', tabindex: '0', 'data-add': '' });
7166
- add.textContent = this.getAttribute('new-row-label') || '＋ New page';
7384
+ add.textContent = this.getAttribute('new-row-label') || this.str('newPage');
7167
7385
  this._grid.appendChild(add);
7168
7386
  }
7169
7387
  }
@@ -7172,10 +7390,16 @@ class NkGalleryView extends NkElement {
7172
7390
  this._onClick = (e) => {
7173
7391
  if (e.target.closest('[data-add]')) { this.emit('nk-action', { action: 'new-row' }); return; }
7174
7392
  const card = e.target.closest('.nk-card');
7175
- if (card) { const row = this._rowById(card.dataset.id); this.emit('nk-select', { row, id: row?.id, value: row?.id }); }
7393
+ if (!card) return;
7394
+ // The link contract: a plain left click is a selection, any other one the browser's.
7395
+ const link = card.localName === 'a';
7396
+ if (link && (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey)) return;
7397
+ const row = this._rowById(card.dataset.id);
7398
+ if (!this.emit('nk-select', { row, id: row?.id, value: row?.id }) && link) e.preventDefault();
7176
7399
  };
7177
7400
  this._onKey = (e) => {
7178
7401
  if (e.key !== 'Enter' && e.key !== ' ') return;
7402
+ if (e.target.localName === 'a') return; // a link card: Enter is the browser's click, Space scrolls
7179
7403
  if (e.target.matches?.('.nk-card, [data-add]')) { e.preventDefault(); e.target.click(); }
7180
7404
  };
7181
7405
  this._grid.addEventListener('click', this._onClick);
@@ -7189,6 +7413,7 @@ class NkGalleryView extends NkElement {
7189
7413
 
7190
7414
  _rowById(id) { return this._rows.find(r => String(r.id) === String(id)); }
7191
7415
  onAttributeChanged() { this._render(); }
7416
+ onStringsChanged() { this._render(); }
7192
7417
 
7193
7418
  get name() { return this.getAttribute('name') || 'gallery'; }
7194
7419
  get columns() { return this._columns; }
@@ -7214,9 +7439,10 @@ customElements.define('nk-gallery-view', NkGalleryView);
7214
7439
  // nk-action { action: 'add' } – each with the clicked button as `anchor`, to
7215
7440
  // open a menu under it. × removes the filter; every change to filters or
7216
7441
  // search fires nk-change { filters, search }. In slot="filters" of
7217
- // <nk-database> the row sits right under the view tabs. The texts are
7218
- // attributes, for other languages: filter-label, sort-label, add-label,
7219
- // remove-label (the × reads "<remove-label>: <pill>") and placeholder.
7442
+ // <nk-database> the row sits right under the view tabs. The texts come in
7443
+ // English or German after the language (1.17.0, setStrings() for others);
7444
+ // filter-label, sort-label, add-label, remove-label (the × reads
7445
+ // "<remove-label>: <pill>") and placeholder set them here.
7220
7446
  class NkFilterBar extends NkElement {
7221
7447
  static get observedAttributes() { return ['search', 'placeholder', 'no-filter', 'no-sort', 'value', 'add', 'add-label', 'filter-label', 'sort-label', 'remove-label']; }
7222
7448
 
@@ -7234,18 +7460,18 @@ class NkFilterBar extends NkElement {
7234
7460
  }
7235
7461
 
7236
7462
  _sync() {
7237
- this._filterBtn.textContent = this.getAttribute('filter-label') || 'Filter';
7463
+ this._filterBtn.textContent = this.getAttribute('filter-label') || this.str('filter');
7238
7464
  this._filterBtn.hidden = this.getBoolAttr('no-filter');
7239
7465
  this._filterBtn.classList.toggle('active', this._filters.length > 0);
7240
- this._sortBtn.textContent = this.getAttribute('sort-label') || 'Sort';
7466
+ this._sortBtn.textContent = this.getAttribute('sort-label') || this.str('sort');
7241
7467
  this._sortBtn.hidden = this.getBoolAttr('no-sort');
7242
- this._addBtn.textContent = this.getAttribute('add-label') || '＋ Filter';
7468
+ this._addBtn.textContent = this.getAttribute('add-label') || this.str('addFilter');
7243
7469
  this._addBtn.hidden = !this.getBoolAttr('add');
7244
7470
  this._input.hidden = !this.getBoolAttr('search');
7245
- this._input.placeholder = this.getAttribute('placeholder') || 'Search …';
7471
+ this._input.placeholder = this.getAttribute('placeholder') || this.str('search');
7246
7472
  if (this.hasAttribute('value') && this._input.value !== this.getAttribute('value')) this._input.value = this.getAttribute('value');
7247
7473
  for (const old of this._row.querySelectorAll('[data-pill]')) old.remove();
7248
- const removeLabel = this.getAttribute('remove-label') || 'Remove filter';
7474
+ const removeLabel = this.getAttribute('remove-label') || this.str('removeFilter');
7249
7475
  this._pillStart.after(...this._filters.map((f, i) => {
7250
7476
  const pill = this.createElement('span', ['nk-filter-pill', 'active'], { 'data-pill': i });
7251
7477
  const label = this.createElement('button', [], { type: 'button', 'data-edit': i });
@@ -7279,6 +7505,7 @@ class NkFilterBar extends NkElement {
7279
7505
 
7280
7506
  _emitChange() { this.emit('nk-change', { filters: [...this._filters], search: this._input.value }); }
7281
7507
  onAttributeChanged() { this._sync(); }
7508
+ onStringsChanged() { this._sync(); }
7282
7509
 
7283
7510
  // A copy each way: the caller's array is never changed – removing a pill
7284
7511
  // only reports the new list in nk-change.
@@ -7313,7 +7540,7 @@ class NkComments extends NkElement {
7313
7540
  const box = this.createElement('div', ['nk-comments']);
7314
7541
  box.appendChild(document.createElement('slot'));
7315
7542
  this._row = this.createElement('div', ['nk-comment-input']);
7316
- this._input = this.createElement('input', ['nk-input'], { type: 'text', 'aria-label': 'Comment' });
7543
+ this._input = this.createElement('input', ['nk-input'], { type: 'text' });
7317
7544
  this._btn = this.createElement('button', ['nk-btn', 'primary', 'small'], { type: 'button' });
7318
7545
  this._row.append(this._input, this._btn);
7319
7546
  box.appendChild(this._row);
@@ -7322,8 +7549,9 @@ class NkComments extends NkElement {
7322
7549
  }
7323
7550
 
7324
7551
  _sync() {
7325
- this._input.placeholder = this.getAttribute('placeholder') || 'Comment …';
7326
- this._btn.textContent = this.getAttribute('send-label') || 'Send';
7552
+ this._input.placeholder = this.getAttribute('placeholder') || this.str('commentPlaceholder');
7553
+ this._input.setAttribute('aria-label', this.str('comment'));
7554
+ this._btn.textContent = this.getAttribute('send-label') || this.str('send');
7327
7555
  this._row.style.display = this.getBoolAttr('no-input') ? 'none' : '';
7328
7556
  this._input.disabled = this._btn.disabled = this.getBoolAttr('disabled');
7329
7557
  }
@@ -7348,6 +7576,7 @@ class NkComments extends NkElement {
7348
7576
  }
7349
7577
 
7350
7578
  onAttributeChanged() { this._sync(); }
7579
+ onStringsChanged() { this._sync(); }
7351
7580
  focus(o) { this._input?.focus(o); }
7352
7581
  get value() { return this._input?.value ?? ''; }
7353
7582
  set value(v) { if (this._input) this._input.value = v ?? ''; }
@@ -7487,8 +7716,8 @@ class NkAiInputRow extends NkElement {
7487
7716
  this._row = this.createElement('div', ['nk-ai-input-row']);
7488
7717
  this._icon = document.createElement('span');
7489
7718
  this._icon.style.fontSize = '14px';
7490
- this._input = this.createElement('input', [], { type: 'text', 'aria-label': 'Message' });
7491
- this._btn = this.createElement('button', ['nk-ai-send'], { type: 'button', 'aria-label': 'Send' });
7719
+ this._input = this.createElement('input', [], { type: 'text' });
7720
+ this._btn = this.createElement('button', ['nk-ai-send'], { type: 'button' });
7492
7721
  this._btn.textContent = '↑';
7493
7722
  this._row.append(this._icon, this._input, this._btn);
7494
7723
  this._wrapper.appendChild(this._row);
@@ -7496,7 +7725,9 @@ class NkAiInputRow extends NkElement {
7496
7725
  }
7497
7726
 
7498
7727
  _sync() {
7499
- this._input.placeholder = this.getAttribute('placeholder') || 'Ask something …';
7728
+ this._input.placeholder = this.getAttribute('placeholder') || this.str('askPlaceholder');
7729
+ this._input.setAttribute('aria-label', this.str('message'));
7730
+ this._btn.setAttribute('aria-label', this.str('send'));
7500
7731
  if (this.hasAttribute('value') && this._input.value !== this.getAttribute('value')) this._input.value = this.getAttribute('value');
7501
7732
  this._input.disabled = this._btn.disabled = this.getBoolAttr('disabled');
7502
7733
  const icon = this.getAttribute('icon') ?? '✨';
@@ -7524,6 +7755,7 @@ class NkAiInputRow extends NkElement {
7524
7755
  }
7525
7756
 
7526
7757
  onAttributeChanged() { this._sync(); }
7758
+ onStringsChanged() { this._sync(); }
7527
7759
  focus(o) { this._input?.focus(o); }
7528
7760
  get value() { return this._input?.value ?? ''; }
7529
7761
  set value(v) { if (this._input) this._input.value = v ?? ''; }
@@ -7531,4 +7763,4 @@ class NkAiInputRow extends NkElement {
7531
7763
 
7532
7764
  customElements.define('nk-ai-input-row', NkAiInputRow);
7533
7765
 
7534
- export { NkAiInputRow, NkAiMsg, NkAiThread, NkApp, NkAvatar, NkAvatarGroup, NkBanner, NkBlockHost, NkBoardView, NkBookmark, NkBreadcrumb, NkBtn, NkCalendar, NkCalendarView, NkCallout, NkCheck, NkCmdk, NkCode, NkComment, NkComments, NkCopyField, NkDangerZone, NkDatabase, NkDialog, NkDivider, NkElement, NkEmojiPicker, NkEmpty, NkField, NkFields, NkFilterBar, NkFormElement, NkGalleryView, NkHeading, NkImagePicker, NkInput, NkKbd, NkListView, NkMemberList, NkMemberRow, NkMention, NkMenu, NkMenuItem, NkModal, NkModelCard, NkPage, NkPageActions, NkPageCover, NkPageTitle, NkPanel, NkPanels, NkPeek, NkPop, NkProfileRow, NkProgress, NkProp, NkProps, NkQuote, NkRadio, NkSectionLabel, NkSegmented, NkSelect, NkSettingsPane, NkSettingsUser, NkSheet, NkSidebar, NkSkeleton, NkSlider, NkStat, NkStats, NkSteps, NkSwitch, NkSynced, NkTab, NkTabBar, NkTabBarItem, NkTableView, NkTabs, NkTag, NkTemplateBtn, NkTextarea, NkThemeToggle, NkToast, NkTodo, NkToggle, NkTooltip, NkTopbar, NkTree, NkTreeItem, NkWorkspaceSwitcher, compareBy, componentsSheet, formatDate, renderPropertyCell, tagFor, textOf, timeOf };
7766
+ export { NkAiInputRow, NkAiMsg, NkAiThread, NkApp, NkAvatar, NkAvatarGroup, NkBanner, NkBlockHost, NkBoardView, NkBookmark, NkBreadcrumb, NkBtn, NkCalendar, NkCalendarView, NkCallout, NkCheck, NkCmdk, NkCode, NkComment, NkComments, NkCopyField, NkDangerZone, NkDatabase, NkDialog, NkDivider, NkElement, NkEmojiPicker, NkEmpty, NkField, NkFields, NkFilterBar, NkFormElement, NkGalleryView, NkHeading, NkImagePicker, NkInput, NkKbd, NkListView, NkMemberList, NkMemberRow, NkMention, NkMenu, NkMenuItem, NkModal, NkModelCard, NkPage, NkPageActions, NkPageCover, NkPageTitle, NkPanel, NkPanels, NkPeek, NkPop, NkProfileRow, NkProgress, NkProp, NkProps, NkQuote, NkRadio, NkSectionLabel, NkSegmented, NkSelect, NkSettingsPane, NkSettingsUser, NkSheet, NkSidebar, NkSkeleton, NkSlider, NkStat, NkStats, NkSteps, NkSwitch, NkSynced, NkTab, NkTabBar, NkTabBarItem, NkTableView, NkTabs, NkTag, NkTemplateBtn, NkTextarea, NkThemeToggle, NkToast, NkTodo, NkToggle, NkTooltip, NkTopbar, NkTree, NkTreeItem, NkWorkspaceSwitcher, builtInStrings, compareBy, componentsSheet, formatDate, formatPercent, renderPropertyCell, setStrings, tagFor, textOf, timeOf };