@jungherz-de/notionkit-elements 1.16.0 → 1.17.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.
- package/CHANGELOG.md +17 -0
- package/README.md +64 -6
- package/SKILL.md +59 -53
- package/dist/components/base.js +102 -3
- package/dist/components/nk-ai-input-row.js +6 -3
- package/dist/components/nk-board-view.js +2 -2
- package/dist/components/nk-breadcrumb.js +2 -1
- package/dist/components/nk-calendar-view.js +8 -5
- package/dist/components/nk-calendar.js +10 -7
- package/dist/components/nk-cmdk.js +6 -2
- package/dist/components/nk-comments.js +5 -3
- package/dist/components/nk-copy-field.js +6 -3
- package/dist/components/nk-emoji-picker.js +6 -2
- package/dist/components/nk-filter-bar.js +10 -8
- package/dist/components/nk-gallery-view.js +29 -7
- package/dist/components/nk-image-picker.js +7 -3
- package/dist/components/nk-list-view.js +3 -2
- package/dist/components/nk-modal.js +3 -1
- package/dist/components/nk-page-title.js +2 -1
- package/dist/components/nk-page.js +3 -1
- package/dist/components/nk-peek.js +6 -3
- package/dist/components/nk-sidebar.js +5 -2
- package/dist/components/nk-steps.js +20 -4
- package/dist/components/nk-synced.js +2 -1
- package/dist/components/nk-table-view.js +3 -2
- package/dist/components/nk-theme-toggle.js +5 -2
- package/dist/components/nk-tree-item.js +3 -1
- package/dist/components/shared/{property-cell-BSVcETss.js → property-cell-DcsfnUNF.js} +15 -5
- package/dist/notionkit-elements.esm.js +265 -70
- package/dist/notionkit-elements.esm.min.js +1 -1
- package/dist/notionkit-elements.esm.min.js.map +1 -1
- package/dist/notionkit-elements.js +267 -69
- package/dist/notionkit-elements.min.js +1 -1
- package/package.json +3 -3
- package/src/base.js +32 -2
- package/src/components/data/nk-ai-input-row.js +6 -3
- package/src/components/data/nk-board-view.js +2 -2
- package/src/components/data/nk-calendar-view.js +7 -4
- package/src/components/data/nk-comments.js +5 -3
- package/src/components/data/nk-filter-bar.js +10 -8
- package/src/components/data/nk-gallery-view.js +29 -7
- package/src/components/data/nk-list-view.js +2 -1
- package/src/components/data/nk-table-view.js +2 -1
- package/src/components/forms/nk-calendar.js +10 -7
- package/src/components/forms/nk-copy-field.js +6 -3
- package/src/components/forms/nk-image-picker.js +7 -3
- package/src/components/overlays/nk-cmdk.js +6 -2
- package/src/components/overlays/nk-emoji-picker.js +6 -2
- package/src/components/overlays/nk-modal.js +3 -1
- package/src/components/overlays/nk-peek.js +6 -3
- package/src/components/page/nk-page-title.js +2 -1
- package/src/components/page/nk-page.js +3 -1
- package/src/components/page/nk-steps.js +20 -4
- package/src/components/page/nk-synced.js +2 -1
- package/src/components/shell/nk-breadcrumb.js +2 -1
- package/src/components/shell/nk-sidebar.js +5 -2
- package/src/components/shell/nk-theme-toggle.js +5 -2
- package/src/components/shell/nk-tree-item.js +3 -1
- package/src/index.js +5 -1
- package/src/util/property-cell.js +14 -4
- package/src/util/strings.js +73 -0
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// NotionKit v1.
|
|
1
|
+
// NotionKit v1.17.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-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-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;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";
|
|
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(
|
|
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;
|
|
@@ -1860,7 +1959,8 @@ function firstFocusable(root) {
|
|
|
1860
1959
|
// brings it back; ⌘\ or Ctrl+\ toggles it (on a phone the drawer).
|
|
1861
1960
|
// `collapsed` is the state, collapse() / expand() / toggleCollapsed() the
|
|
1862
1961
|
// API, nk-collapse { collapsed } the moment to keep it. collapse-label names
|
|
1863
|
-
// the « (default "Close sidebar"
|
|
1962
|
+
// the « (default "Close sidebar", in German "Seitenleiste schließen") and is
|
|
1963
|
+
// its tooltip for <nk-tooltip>.
|
|
1864
1964
|
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
1965
|
const phone$1 = () => matchMedia('(max-width: 860px)').matches;
|
|
1866
1966
|
|
|
@@ -1890,7 +1990,7 @@ class NkSidebar extends NkElement {
|
|
|
1890
1990
|
}
|
|
1891
1991
|
|
|
1892
1992
|
_syncCollapse() {
|
|
1893
|
-
const label = this.getAttribute('collapse-label') || '
|
|
1993
|
+
const label = this.getAttribute('collapse-label') || this.str('closeSidebar');
|
|
1894
1994
|
this._collapse.hidden = !this.getBoolAttr('collapsible');
|
|
1895
1995
|
this._collapse.setAttribute('aria-label', label);
|
|
1896
1996
|
this._collapse.dataset.tooltip = label;
|
|
@@ -1942,6 +2042,8 @@ class NkSidebar extends NkElement {
|
|
|
1942
2042
|
document.removeEventListener('keydown', this._onKey);
|
|
1943
2043
|
}
|
|
1944
2044
|
|
|
2045
|
+
onStringsChanged() { this._syncCollapse(); }
|
|
2046
|
+
|
|
1945
2047
|
onAttributeChanged(name) {
|
|
1946
2048
|
if (name === 'open') {
|
|
1947
2049
|
this._syncOpen();
|
|
@@ -2250,7 +2352,7 @@ class NkTreeItem extends NkElement {
|
|
|
2250
2352
|
this._labelSlot.appendChild(this._labelText);
|
|
2251
2353
|
this._label.appendChild(this._labelSlot);
|
|
2252
2354
|
this._actions = this.createElement('span', ['actions']);
|
|
2253
|
-
for (const [action, glyph, title] of [['add', '+', '
|
|
2355
|
+
for (const [action, glyph, title] of [['add', '+', this.str('add')], ['more', '⋯', this.str('more')]]) {
|
|
2254
2356
|
const b = this.createElement('span', [], { 'data-action': action, role: 'button', title });
|
|
2255
2357
|
b.textContent = glyph;
|
|
2256
2358
|
this._actions.appendChild(b);
|
|
@@ -2336,6 +2438,8 @@ class NkTreeItem extends NkElement {
|
|
|
2336
2438
|
this._row?.removeEventListener('keydown', this._onKey);
|
|
2337
2439
|
}
|
|
2338
2440
|
|
|
2441
|
+
onStringsChanged() { for (const b of this._actions.children) b.title = this.str(b.dataset.action); }
|
|
2442
|
+
|
|
2339
2443
|
onAttributeChanged(name) {
|
|
2340
2444
|
if (name === 'label') this.assignSlots();
|
|
2341
2445
|
else this._sync();
|
|
@@ -2412,7 +2516,7 @@ class NkBreadcrumb extends NkElement {
|
|
|
2412
2516
|
static get observesLightDom() { return true; }
|
|
2413
2517
|
|
|
2414
2518
|
render() {
|
|
2415
|
-
this._nav = this.createElement('nav', ['nk-breadcrumb'], { 'aria-label': '
|
|
2519
|
+
this._nav = this.createElement('nav', ['nk-breadcrumb'], { 'aria-label': this.str('breadcrumb') });
|
|
2416
2520
|
this._wrapper.appendChild(this._nav);
|
|
2417
2521
|
this.projectLightDom();
|
|
2418
2522
|
}
|
|
@@ -2464,6 +2568,7 @@ class NkBreadcrumb extends NkElement {
|
|
|
2464
2568
|
teardownEvents() { this._nav?.removeEventListener('click', this._onClick); }
|
|
2465
2569
|
|
|
2466
2570
|
onAttributeChanged() { this.projectLightDom(); }
|
|
2571
|
+
onStringsChanged() { this._nav.setAttribute('aria-label', this.str('breadcrumb')); }
|
|
2467
2572
|
|
|
2468
2573
|
get separator() { return this.getAttribute('separator') ?? '/'; }
|
|
2469
2574
|
set separator(v) { this.setAttribute('separator', v); }
|
|
@@ -2485,7 +2590,7 @@ class NkThemeToggle extends NkElement {
|
|
|
2485
2590
|
|
|
2486
2591
|
render() {
|
|
2487
2592
|
this._btn = this.createElement('button', ['nk-topbar-btn', 'nk-theme-toggle'], { type: 'button' });
|
|
2488
|
-
this.
|
|
2593
|
+
this._syncTitle();
|
|
2489
2594
|
this._wrapper.appendChild(this._btn);
|
|
2490
2595
|
const root = document.documentElement;
|
|
2491
2596
|
let stored = null;
|
|
@@ -2516,8 +2621,11 @@ class NkThemeToggle extends NkElement {
|
|
|
2516
2621
|
window.removeEventListener('message', this._onMessage);
|
|
2517
2622
|
}
|
|
2518
2623
|
|
|
2624
|
+
_syncTitle() { this._btn.title = this.getAttribute('title') || this.str('toggleTheme'); }
|
|
2625
|
+
onStringsChanged() { this._syncTitle(); }
|
|
2626
|
+
|
|
2519
2627
|
onAttributeChanged(name) {
|
|
2520
|
-
if (name === 'title' && this._btn) this.
|
|
2628
|
+
if (name === 'title' && this._btn) this._syncTitle();
|
|
2521
2629
|
}
|
|
2522
2630
|
|
|
2523
2631
|
/** Sets the theme on <html>, persists it and reports it. */
|
|
@@ -2721,7 +2829,7 @@ class NkPage extends NkElement {
|
|
|
2721
2829
|
|
|
2722
2830
|
render() {
|
|
2723
2831
|
this._page = this.createElement('div', ['nk-page']);
|
|
2724
|
-
this._icon = this.createElement('div', ['nk-page-icon'], { role: 'button', title: '
|
|
2832
|
+
this._icon = this.createElement('div', ['nk-page-icon'], { role: 'button', title: this.str('changeIcon') });
|
|
2725
2833
|
this._iconSlot = this.createElement('slot', [], { name: 'icon' });
|
|
2726
2834
|
this._iconSlot.appendChild(this._icon);
|
|
2727
2835
|
this._page.appendChild(this._iconSlot);
|
|
@@ -2777,6 +2885,8 @@ class NkPage extends NkElement {
|
|
|
2777
2885
|
this._iconSlot?.removeEventListener('slotchange', this._onCover);
|
|
2778
2886
|
}
|
|
2779
2887
|
|
|
2888
|
+
onStringsChanged() { this._icon.title = this.str('changeIcon'); }
|
|
2889
|
+
|
|
2780
2890
|
onAttributeChanged(name) {
|
|
2781
2891
|
if (name === 'narrow') this._build();
|
|
2782
2892
|
else this._sync();
|
|
@@ -2851,7 +2961,7 @@ class NkPageTitle extends NkElement {
|
|
|
2851
2961
|
this._h1.setAttribute('contenteditable', 'plaintext-only');
|
|
2852
2962
|
this._h1.setAttribute('spellcheck', 'false');
|
|
2853
2963
|
this._h1.setAttribute('role', 'textbox');
|
|
2854
|
-
this._h1.setAttribute('aria-label', '
|
|
2964
|
+
this._h1.setAttribute('aria-label', this.str('title'));
|
|
2855
2965
|
const text = this.getAttribute('value') ?? this.textContent.trim();
|
|
2856
2966
|
if (this._h1.textContent !== text && document.activeElement !== this) this._h1.textContent = text;
|
|
2857
2967
|
this._h1.setAttribute('data-placeholder', this.getAttribute('placeholder') || '');
|
|
@@ -2886,6 +2996,7 @@ class NkPageTitle extends NkElement {
|
|
|
2886
2996
|
}
|
|
2887
2997
|
|
|
2888
2998
|
onAttributeChanged() { this._sync(); }
|
|
2999
|
+
onStringsChanged() { if (this._h1.hasAttribute('role')) this._h1.setAttribute('aria-label', this.str('title')); }
|
|
2889
3000
|
|
|
2890
3001
|
get value() { return this.getBoolAttr('editable') ? (this._h1?.textContent.trim() ?? '') : (this.getAttribute('value') ?? this.textContent.trim()); }
|
|
2891
3002
|
set value(v) { this.setAttribute('value', v); }
|
|
@@ -3056,8 +3167,9 @@ class NkSynced extends NkElement {
|
|
|
3056
3167
|
this._sync();
|
|
3057
3168
|
}
|
|
3058
3169
|
|
|
3059
|
-
_sync() { this._badge.textContent = this.getAttribute('badge') ?? '
|
|
3170
|
+
_sync() { this._badge.textContent = this.getAttribute('badge') ?? this.str('synced'); }
|
|
3060
3171
|
onAttributeChanged() { this._sync(); }
|
|
3172
|
+
onStringsChanged() { this._sync(); }
|
|
3061
3173
|
|
|
3062
3174
|
get badge() { return this.getAttribute('badge'); }
|
|
3063
3175
|
set badge(v) { this.setAttribute('badge', v); }
|
|
@@ -4142,6 +4254,12 @@ customElements.define('nk-sheet', NkSheet);
|
|
|
4142
4254
|
// nk-select { index, value, step } – index counts from 1, like `current` –
|
|
4143
4255
|
// and, unless cancelled, makes that step current. `horizontal` sets the
|
|
4144
4256
|
// steps in one row above a wizard.
|
|
4257
|
+
// A step with `href` (1.17.0) shows its label as a link, <a class="st-label">,
|
|
4258
|
+
// with or without `selectable` – to open a chapter in a new tab or copy its
|
|
4259
|
+
// address. A plain click, or Enter, fires the same nk-select; cancelling it
|
|
4260
|
+
// keeps the browser from following the link, for a router of your own. A
|
|
4261
|
+
// middle click or one with Cmd, Ctrl, Shift or Alt fires nothing and does
|
|
4262
|
+
// what a link does.
|
|
4145
4263
|
class NkSteps extends NkElement {
|
|
4146
4264
|
static get observedAttributes() { return ['steps', 'current', 'label', 'selectable', 'horizontal']; }
|
|
4147
4265
|
|
|
@@ -4169,7 +4287,7 @@ class NkSteps extends NkElement {
|
|
|
4169
4287
|
// Rebuilding drops the focused label; the new one at that place takes it back.
|
|
4170
4288
|
const focused = this.shadowRoot?.activeElement?.closest?.('li')?.dataset.index;
|
|
4171
4289
|
this._list.replaceChildren(...this._items().map((_, i) => {
|
|
4172
|
-
const n = i + 1, { label: text, desc, state } = this._step(i);
|
|
4290
|
+
const n = i + 1, { label: text, desc, state, href } = this._step(i);
|
|
4173
4291
|
// A state of its own wins; without one, the steps before `current` are done.
|
|
4174
4292
|
const done = state ? state === 'done' : n < current, skipped = state === 'skipped';
|
|
4175
4293
|
const li = this.createElement('li', ['nk-step'], { 'data-index': String(n) });
|
|
@@ -4179,7 +4297,8 @@ class NkSteps extends NkElement {
|
|
|
4179
4297
|
if (n === current) li.setAttribute('aria-current', 'step');
|
|
4180
4298
|
const mark = this.createElement('span', ['st-mark'], { 'aria-hidden': 'true' });
|
|
4181
4299
|
mark.textContent = done ? '✓' : skipped ? '–' : String(n);
|
|
4182
|
-
const body =
|
|
4300
|
+
const body = href != null && href !== '' ? this.createElement('a', ['st-label'], { href: String(href) })
|
|
4301
|
+
: selectable ? this.createElement('button', ['st-label'], { type: 'button' }) : document.createElement('span');
|
|
4183
4302
|
body.textContent = text ?? '';
|
|
4184
4303
|
if (desc) { const d = this.createElement('span', ['st-desc']); d.textContent = desc; body.appendChild(d); }
|
|
4185
4304
|
li.append(mark, body);
|
|
@@ -4190,9 +4309,18 @@ class NkSteps extends NkElement {
|
|
|
4190
4309
|
|
|
4191
4310
|
setupEvents() {
|
|
4192
4311
|
this._onClick = (e) => {
|
|
4193
|
-
if (!this.getBoolAttr('selectable')) return;
|
|
4194
4312
|
const li = e.target.closest?.('li.nk-step');
|
|
4195
|
-
if (li
|
|
4313
|
+
if (!li || !this._list.contains(li)) return;
|
|
4314
|
+
const link = li.querySelector('a.st-label');
|
|
4315
|
+
if (link) {
|
|
4316
|
+
// The link contract: a plain left click is a selection, any other
|
|
4317
|
+
// one the browser's. The mark beside the link counts as the link.
|
|
4318
|
+
if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
|
|
4319
|
+
if (!link.contains(e.target)) { link.click(); return; }
|
|
4320
|
+
if (!this.select(Number(li.dataset.index))) e.preventDefault();
|
|
4321
|
+
return;
|
|
4322
|
+
}
|
|
4323
|
+
if (this.getBoolAttr('selectable')) this.select(Number(li.dataset.index));
|
|
4196
4324
|
};
|
|
4197
4325
|
this._list.addEventListener('click', this._onClick);
|
|
4198
4326
|
}
|
|
@@ -4298,7 +4426,8 @@ customElements.define('nk-bookmark', NkBookmark);
|
|
|
4298
4426
|
// ⌘C. `secret` masks it behind a Show/Hide toggle; Copy still copies the
|
|
4299
4427
|
// real value. `value` set as a property is not reflected, so a key never
|
|
4300
4428
|
// lands in the markup. Fires nk-action { action: 'copy', value, ok }. The
|
|
4301
|
-
// texts
|
|
4429
|
+
// texts come in English or German after the language (1.17.0, setStrings()
|
|
4430
|
+
// for others); copy-label, copied-label, show-label, hide-label set them here.
|
|
4302
4431
|
class NkCopyField extends NkElement {
|
|
4303
4432
|
static get observedAttributes() { return ['value', 'mono', 'wrap', 'wide', 'secret', 'copy-label', 'copied-label', 'show-label', 'hide-label']; }
|
|
4304
4433
|
|
|
@@ -4322,9 +4451,9 @@ class NkCopyField extends NkElement {
|
|
|
4322
4451
|
// but a button that is not there cannot be tabbed to either.
|
|
4323
4452
|
if (secret && !this._show.isConnected) this._copy.before(this._show);
|
|
4324
4453
|
if (!secret) this._show.remove();
|
|
4325
|
-
this._show.textContent = this._revealed ? (this.getAttribute('hide-label') || '
|
|
4454
|
+
this._show.textContent = this._revealed ? (this.getAttribute('hide-label') || this.str('hide')) : (this.getAttribute('show-label') || this.str('show'));
|
|
4326
4455
|
this._show.setAttribute('aria-pressed', String(!!this._revealed));
|
|
4327
|
-
this._copy.textContent = this._copied ? (this.getAttribute('copied-label') || '
|
|
4456
|
+
this._copy.textContent = this._copied ? (this.getAttribute('copied-label') || this.str('copied')) : (this.getAttribute('copy-label') || this.str('copy'));
|
|
4328
4457
|
this._copy.classList.toggle('copied', !!this._copied);
|
|
4329
4458
|
}
|
|
4330
4459
|
|
|
@@ -4341,6 +4470,8 @@ class NkCopyField extends NkElement {
|
|
|
4341
4470
|
clearTimeout(this._timer);
|
|
4342
4471
|
}
|
|
4343
4472
|
|
|
4473
|
+
onStringsChanged() { this._sync(); }
|
|
4474
|
+
|
|
4344
4475
|
onAttributeChanged(name, _old, value) {
|
|
4345
4476
|
if (name === 'value') this._val = value ?? '';
|
|
4346
4477
|
this._sync();
|
|
@@ -4392,7 +4523,9 @@ customElements.define('nk-copy-field', NkCopyField);
|
|
|
4392
4523
|
// Events: nk-change { dataUrl, width, height, size } after a pick, and on
|
|
4393
4524
|
// remove with an empty dataUrl; nk-error { message, name } when the
|
|
4394
4525
|
// file cannot be decoded (HEIC outside Safari, a broken file).
|
|
4395
|
-
// Texts:
|
|
4526
|
+
// Texts: English or German after the language (1.17.0, setStrings() for
|
|
4527
|
+
// others); choose-label, change-label, remove-label set them here.
|
|
4528
|
+
// label names the group.
|
|
4396
4529
|
|
|
4397
4530
|
function dataUrlBytes(url) {
|
|
4398
4531
|
const b64 = url.slice(url.indexOf(',') + 1);
|
|
@@ -4434,8 +4567,8 @@ class NkImagePicker extends NkElement {
|
|
|
4434
4567
|
}
|
|
4435
4568
|
const label = this.getAttribute('label');
|
|
4436
4569
|
if (label) this._row.setAttribute('aria-label', label); else this._row.removeAttribute('aria-label');
|
|
4437
|
-
this._choose.textContent = this._src ? (this.getAttribute('change-label') || '
|
|
4438
|
-
this._remove.textContent = this.getAttribute('remove-label') || '
|
|
4570
|
+
this._choose.textContent = this._src ? (this.getAttribute('change-label') || this.str('changeImage')) : (this.getAttribute('choose-label') || this.str('uploadImage'));
|
|
4571
|
+
this._remove.textContent = this.getAttribute('remove-label') || this.str('remove');
|
|
4439
4572
|
this._remove.hidden = !this._src;
|
|
4440
4573
|
this._input.accept = this.getAttribute('accept') || 'image/*';
|
|
4441
4574
|
}
|
|
@@ -4483,6 +4616,8 @@ class NkImagePicker extends NkElement {
|
|
|
4483
4616
|
this._remove?.removeEventListener('click', this._onRemove);
|
|
4484
4617
|
}
|
|
4485
4618
|
|
|
4619
|
+
onStringsChanged() { this._sync(); }
|
|
4620
|
+
|
|
4486
4621
|
onAttributeChanged(name, _old, value) {
|
|
4487
4622
|
if (name === 'src') this._src = value || '';
|
|
4488
4623
|
this._sync();
|
|
@@ -4582,8 +4717,9 @@ const CHEVRONS = {
|
|
|
4582
4717
|
// default from the locale, Monday where the browser cannot say), weeks,
|
|
4583
4718
|
// weekend (weekdays not worked, "6,0" for Saturday and Sunday), range, time,
|
|
4584
4719
|
// clearable, label and the texts today-label, prev-label, next-label,
|
|
4585
|
-
// week-label, time-label, clear-label
|
|
4586
|
-
// range has
|
|
4720
|
+
// week-label, time-label, clear-label – without them English or German
|
|
4721
|
+
// after the language (1.17.0). `time` belongs to single days; a range has
|
|
4722
|
+
// none.
|
|
4587
4723
|
// days (property, or JSON attribute): { 'YYYY-MM-DD': { off, label, marks } }
|
|
4588
4724
|
// – `off` greys a holiday, `label` names the day (tooltip and screen
|
|
4589
4725
|
// reader), `marks` puts up to three dots in the nine colours on it.
|
|
@@ -4712,9 +4848,9 @@ class NkCalendar extends NkFormElement {
|
|
|
4712
4848
|
const label = this.getAttribute('label');
|
|
4713
4849
|
if (label) this._cal.setAttribute('aria-label', label); else this._cal.removeAttribute('aria-label');
|
|
4714
4850
|
this._title.textContent = new Intl.DateTimeFormat(locale, { month: 'long', year: 'numeric' }).format(g.first);
|
|
4715
|
-
this._todayBtn.textContent = this.getAttribute('today-label') || '
|
|
4716
|
-
this._prev.setAttribute('aria-label', this.getAttribute('prev-label') || '
|
|
4717
|
-
this._next.setAttribute('aria-label', this.getAttribute('next-label') || '
|
|
4851
|
+
this._todayBtn.textContent = this.getAttribute('today-label') || this.str('today');
|
|
4852
|
+
this._prev.setAttribute('aria-label', this.getAttribute('prev-label') || this.str('previousMonth'));
|
|
4853
|
+
this._next.setAttribute('aria-label', this.getAttribute('next-label') || this.str('nextMonth'));
|
|
4718
4854
|
|
|
4719
4855
|
// The one tab stop: the focused day, else the chosen one, else the 1st.
|
|
4720
4856
|
const cells = Array.from({ length: 42 }, (_, i) => isoOf(g.day(i)));
|
|
@@ -4751,8 +4887,8 @@ class NkCalendar extends NkFormElement {
|
|
|
4751
4887
|
|
|
4752
4888
|
const time = this._hasTime, clearable = this.getBoolAttr('clearable');
|
|
4753
4889
|
this._timeInput.value = this._time;
|
|
4754
|
-
this._timeInput.setAttribute('aria-label', this.getAttribute('time-label') || '
|
|
4755
|
-
this._clear.textContent = this.getAttribute('clear-label') || '
|
|
4890
|
+
this._timeInput.setAttribute('aria-label', this.getAttribute('time-label') || this.str('time'));
|
|
4891
|
+
this._clear.textContent = this.getAttribute('clear-label') || this.str('clear');
|
|
4756
4892
|
this._foot.replaceChildren(...[time && this._timeInput, clearable && this._clear].filter(Boolean));
|
|
4757
4893
|
if (time || clearable) this._cal.appendChild(this._foot); else this._foot.remove();
|
|
4758
4894
|
this._syncForm();
|
|
@@ -4862,6 +4998,8 @@ class NkCalendar extends NkFormElement {
|
|
|
4862
4998
|
document.removeEventListener('click', this._onOutside, true);
|
|
4863
4999
|
}
|
|
4864
5000
|
|
|
5001
|
+
onStringsChanged() { if (this._grid) this._draw(); }
|
|
5002
|
+
|
|
4865
5003
|
onAttributeChanged(name, _old, value) {
|
|
4866
5004
|
if (name === 'value') { this._readValue(value); this._draw(); return; }
|
|
4867
5005
|
if (name === 'month') { this.month = value; return; }
|
|
@@ -4938,7 +5076,8 @@ customElements.define('nk-calendar', NkCalendar);
|
|
|
4938
5076
|
// Notion: from `min` (380) to `max` (all but 320px of the window). The width
|
|
4939
5077
|
// is the token --nk-peek-width, set on :root; `width` (px) sets it too, and
|
|
4940
5078
|
// nk-resize { width } fires when a drag or a key ends – the moment to keep
|
|
4941
|
-
// it. resize-label names the edge (default "Resize"
|
|
5079
|
+
// it. resize-label names the edge (default "Resize", in German "Breite
|
|
5080
|
+
// ändern").
|
|
4942
5081
|
// `inset`: while it is open on the desktop, the page's <nk-app> gets
|
|
4943
5082
|
// `peek-inset` – its main column makes room instead of lying under the peek.
|
|
4944
5083
|
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 +5124,7 @@ class NkPeek extends NkElement {
|
|
|
4985
5124
|
|
|
4986
5125
|
_syncResize() {
|
|
4987
5126
|
this._handle.hidden = !this.getBoolAttr('resizable');
|
|
4988
|
-
this._handle.setAttribute('aria-label', this.getAttribute('resize-label') || '
|
|
5127
|
+
this._handle.setAttribute('aria-label', this.getAttribute('resize-label') || this.str('resize'));
|
|
4989
5128
|
this._handle.setAttribute('aria-valuemin', this._min);
|
|
4990
5129
|
this._handle.setAttribute('aria-valuenow', Math.round(this.width));
|
|
4991
5130
|
}
|
|
@@ -5002,7 +5141,7 @@ class NkPeek extends NkElement {
|
|
|
5002
5141
|
_syncLabels() {
|
|
5003
5142
|
const label = this.getAttribute('label');
|
|
5004
5143
|
if (label) this._box.setAttribute('aria-label', label); else this._box.removeAttribute('aria-label');
|
|
5005
|
-
this._close.setAttribute('aria-label', this.getAttribute('close-label') || '
|
|
5144
|
+
this._close.setAttribute('aria-label', this.getAttribute('close-label') || this.str('close'));
|
|
5006
5145
|
}
|
|
5007
5146
|
|
|
5008
5147
|
_syncOpen() {
|
|
@@ -5087,6 +5226,8 @@ class NkPeek extends NkElement {
|
|
|
5087
5226
|
this._wasOpen = false;
|
|
5088
5227
|
}
|
|
5089
5228
|
|
|
5229
|
+
onStringsChanged() { this._syncResize(); this._syncLabels(); }
|
|
5230
|
+
|
|
5090
5231
|
onAttributeChanged(name, _old, value) {
|
|
5091
5232
|
if (name === 'width') { this._setWidth(Number(value)); return; }
|
|
5092
5233
|
if (name === 'inset') { this._syncInset(); return; }
|
|
@@ -5419,7 +5560,7 @@ class NkModal extends NkElement {
|
|
|
5419
5560
|
this._backdrop = this.createElement('div', ['nk-modal-backdrop']);
|
|
5420
5561
|
this._backdrop.inert = true;
|
|
5421
5562
|
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': '
|
|
5563
|
+
this._nav = this.createElement('nav', ['nk-settings-nav'], { 'aria-label': this.str('settings') });
|
|
5423
5564
|
this._nav.appendChild(this.createElement('slot', [], { name: 'user' }));
|
|
5424
5565
|
this._rows = document.createElement('div');
|
|
5425
5566
|
this._nav.appendChild(this._rows);
|
|
@@ -5537,6 +5678,8 @@ class NkModal extends NkElement {
|
|
|
5537
5678
|
if (this._wasOpen) { unlockScroll(); this._undoInert?.(); this._undoInert = null; this._wasOpen = false; }
|
|
5538
5679
|
}
|
|
5539
5680
|
|
|
5681
|
+
onStringsChanged() { this._nav.setAttribute('aria-label', this.str('settings')); }
|
|
5682
|
+
|
|
5540
5683
|
onAttributeChanged(name) {
|
|
5541
5684
|
if (name === 'open') {
|
|
5542
5685
|
this._syncOpen();
|
|
@@ -5671,7 +5814,7 @@ class NkCmdk extends NkElement {
|
|
|
5671
5814
|
render() {
|
|
5672
5815
|
this._backdrop = this.createElement('div', ['nk-cmdk-backdrop']);
|
|
5673
5816
|
this._backdrop.inert = true;
|
|
5674
|
-
this._box = this.createElement('div', ['nk-cmdk'], { role: 'dialog', 'aria-modal': 'true'
|
|
5817
|
+
this._box = this.createElement('div', ['nk-cmdk'], { role: 'dialog', 'aria-modal': 'true' });
|
|
5675
5818
|
const row = this.createElement('div', ['nk-cmdk-input-row']);
|
|
5676
5819
|
const glass = document.createElement('span');
|
|
5677
5820
|
glass.style.fontSize = '15px';
|
|
@@ -5696,7 +5839,11 @@ class NkCmdk extends NkElement {
|
|
|
5696
5839
|
this._syncOpen();
|
|
5697
5840
|
}
|
|
5698
5841
|
|
|
5699
|
-
_syncAttrs() {
|
|
5842
|
+
_syncAttrs() {
|
|
5843
|
+
this._input.placeholder = this.getAttribute('placeholder') || this.str('commandPlaceholder');
|
|
5844
|
+
this._box.setAttribute('aria-label', this.str('commandPalette'));
|
|
5845
|
+
}
|
|
5846
|
+
onStringsChanged() { this._syncAttrs(); }
|
|
5700
5847
|
|
|
5701
5848
|
/** Filtered, flat list in group order, best matches first within a group. */
|
|
5702
5849
|
results() {
|
|
@@ -6167,7 +6314,7 @@ class NkEmojiPicker extends NkElement {
|
|
|
6167
6314
|
|
|
6168
6315
|
render() {
|
|
6169
6316
|
this._box = this.createElement('div', ['nk-pop']);
|
|
6170
|
-
this._search = this.createElement('input', ['nk-emoji-search'], { type: 'search', autocomplete: 'off'
|
|
6317
|
+
this._search = this.createElement('input', ['nk-emoji-search'], { type: 'search', autocomplete: 'off' });
|
|
6171
6318
|
this._grid = this.createElement('div', ['nk-emoji-grid'], { role: 'listbox' });
|
|
6172
6319
|
this._cats = this.createElement('div', ['nk-emoji-cats'], { role: 'tablist' });
|
|
6173
6320
|
this._box.append(this._search, this._grid, this._cats);
|
|
@@ -6179,7 +6326,11 @@ class NkEmojiPicker extends NkElement {
|
|
|
6179
6326
|
this._syncAttrs();
|
|
6180
6327
|
}
|
|
6181
6328
|
|
|
6182
|
-
_syncAttrs() {
|
|
6329
|
+
_syncAttrs() {
|
|
6330
|
+
this._search.placeholder = this.getAttribute('placeholder') || this.str('emojiPlaceholder');
|
|
6331
|
+
this._search.setAttribute('aria-label', this.str('searchEmoji'));
|
|
6332
|
+
}
|
|
6333
|
+
onStringsChanged() { this._syncAttrs(); }
|
|
6183
6334
|
|
|
6184
6335
|
_renderCats() {
|
|
6185
6336
|
this._cats.replaceChildren();
|
|
@@ -6436,6 +6587,8 @@ customElements.define('nk-database', NkDatabase);
|
|
|
6436
6587
|
// text: a string, or { text, desc, color, tooltip, sort } – one of Notion's
|
|
6437
6588
|
// nine text colours for a tone, a quiet second line under it, the whole
|
|
6438
6589
|
// text in a tooltip (served by <nk-tooltip>), a value to sort by.
|
|
6590
|
+
// progress: 0–100, the bar and its percentage as Intl writes it in
|
|
6591
|
+
// column.locale, else the page's language ("45 %" in German).
|
|
6439
6592
|
// date: the value as given, or with column.format ('short', 'relative' or
|
|
6440
6593
|
// Intl.DateTimeFormat options) and column.locale formatted from an ISO date
|
|
6441
6594
|
// or date-time, D.M.YYYY, a Date or a timestamp; { start, end } is a range.
|
|
@@ -6501,7 +6654,7 @@ function renderPropertyCell(column, value, row = {}) {
|
|
|
6501
6654
|
if (type === 'actions') return actions(column, value);
|
|
6502
6655
|
if (value === undefined || value === null || value === '') {
|
|
6503
6656
|
if (type === 'checkbox') return checkbox(column, false, row);
|
|
6504
|
-
if (type === 'progress') return progress(0);
|
|
6657
|
+
if (type === 'progress') return progress(column, 0);
|
|
6505
6658
|
return el('span', type === 'person' ? 'person-cell' : null, type === 'text' && column.title ? '' : '—');
|
|
6506
6659
|
}
|
|
6507
6660
|
switch (type) {
|
|
@@ -6533,7 +6686,7 @@ function renderPropertyCell(column, value, row = {}) {
|
|
|
6533
6686
|
}
|
|
6534
6687
|
// column.locale / column.format: Intl.NumberFormat locale and options, e.g. { minimumFractionDigits: 1 }.
|
|
6535
6688
|
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);
|
|
6689
|
+
case 'progress': return progress(column, Number(value) || 0);
|
|
6537
6690
|
default: {
|
|
6538
6691
|
const o = typeof value === 'object' ? value : { text: value };
|
|
6539
6692
|
let t;
|
|
@@ -6579,15 +6732,23 @@ function checkbox(column, checked, row) {
|
|
|
6579
6732
|
return label;
|
|
6580
6733
|
}
|
|
6581
6734
|
|
|
6582
|
-
function progress(value) {
|
|
6735
|
+
function progress(column, value) {
|
|
6583
6736
|
const frag = document.createDocumentFragment();
|
|
6584
6737
|
const bar = el('span', 'nk-progress');
|
|
6585
6738
|
const fill = el('i'); fill.style.width = `${Math.max(0, Math.min(100, value))}%`;
|
|
6586
6739
|
bar.appendChild(fill);
|
|
6587
|
-
frag.append(bar, el('span', 'nk-progress-label',
|
|
6740
|
+
frag.append(bar, el('span', 'nk-progress-label', formatPercent(column, value)));
|
|
6588
6741
|
return frag;
|
|
6589
6742
|
}
|
|
6590
6743
|
|
|
6744
|
+
/** A progress value of 0–100 as Intl writes a percentage in column.locale, else the page's language: 45 → "45%", in German "45 %". */
|
|
6745
|
+
function formatPercent(column, value) {
|
|
6746
|
+
const n = Number(value) || 0;
|
|
6747
|
+
try {
|
|
6748
|
+
return new Intl.NumberFormat(column.locale || resolveLocale(), { style: 'percent', maximumFractionDigits: 0 }).format(n / 100);
|
|
6749
|
+
} catch { return `${Math.round(n)}%`; } // a lang Intl does not take
|
|
6750
|
+
}
|
|
6751
|
+
|
|
6591
6752
|
/** A select's place among its options: the order Notion sorts by. */
|
|
6592
6753
|
function rankOf(column, value) {
|
|
6593
6754
|
const i = (column.options || []).findIndex(o => o.value === value || o.label === value);
|
|
@@ -6683,7 +6844,7 @@ class NkTableView extends NkElement {
|
|
|
6683
6844
|
}
|
|
6684
6845
|
this._tbody.appendChild(r);
|
|
6685
6846
|
}
|
|
6686
|
-
this._newRow.textContent = this.getAttribute('new-row-label') || '
|
|
6847
|
+
this._newRow.textContent = this.getAttribute('new-row-label') || this.str('newPage');
|
|
6687
6848
|
this._newRow.style.display = this.getBoolAttr('new-row') ? '' : 'none';
|
|
6688
6849
|
}
|
|
6689
6850
|
|
|
@@ -6733,6 +6894,7 @@ class NkTableView extends NkElement {
|
|
|
6733
6894
|
|
|
6734
6895
|
_rowById(id) { return this._rows.find(r => String(r.id) === String(id)); }
|
|
6735
6896
|
onAttributeChanged() { this._render(); }
|
|
6897
|
+
onStringsChanged() { this._render(); }
|
|
6736
6898
|
|
|
6737
6899
|
get name() { return this.getAttribute('name') || 'table'; }
|
|
6738
6900
|
get columns() { return this._columns; }
|
|
@@ -6800,7 +6962,7 @@ class NkBoardView extends NkElement {
|
|
|
6800
6962
|
const v = row[c.key];
|
|
6801
6963
|
if (v === undefined || v === null || v === '') continue;
|
|
6802
6964
|
const s = document.createElement('span');
|
|
6803
|
-
if (c.type === 'progress') s.textContent = `▰ ${v}
|
|
6965
|
+
if (c.type === 'progress') s.textContent = `▰ ${formatPercent(c, v)}`;
|
|
6804
6966
|
else if (c.type === 'date') s.textContent = `📅 ${formatDate(c, v)}`;
|
|
6805
6967
|
else s.appendChild(renderPropertyCell(c, v, row));
|
|
6806
6968
|
meta.appendChild(s);
|
|
@@ -6923,7 +7085,7 @@ class NkListView extends NkElement {
|
|
|
6923
7085
|
item.append(icon, t, m);
|
|
6924
7086
|
this._list.appendChild(item);
|
|
6925
7087
|
}
|
|
6926
|
-
this._newRow.textContent = this.getAttribute('new-row-label') || '
|
|
7088
|
+
this._newRow.textContent = this.getAttribute('new-row-label') || this.str('newPage');
|
|
6927
7089
|
this._newRow.style.display = this.getBoolAttr('new-row') ? '' : 'none';
|
|
6928
7090
|
}
|
|
6929
7091
|
|
|
@@ -6948,6 +7110,7 @@ class NkListView extends NkElement {
|
|
|
6948
7110
|
|
|
6949
7111
|
_rowById(id) { return this._rows.find(r => String(r.id) === String(id)); }
|
|
6950
7112
|
onAttributeChanged() { this._render(); }
|
|
7113
|
+
onStringsChanged() { this._render(); }
|
|
6951
7114
|
|
|
6952
7115
|
get name() { return this.getAttribute('name') || 'list'; }
|
|
6953
7116
|
get columns() { return this._columns; }
|
|
@@ -6969,7 +7132,8 @@ customElements.define('nk-list-view', NkListView);
|
|
|
6969
7132
|
// default today's), weeks (the ISO week in front of each row), week-start
|
|
6970
7133
|
// (0 = Sunday … 6 = Saturday; default from the locale), weekend (weekdays
|
|
6971
7134
|
// washed like the days of other months, "6,0"), today, locale and the texts
|
|
6972
|
-
// today-label, prev-label, next-label, week-label
|
|
7135
|
+
// today-label, prev-label, next-label, week-label – without them English
|
|
7136
|
+
// or German after the language (1.17.0).
|
|
6973
7137
|
// Standalone: view.columns = […]; view.rows = […]. Inside <nk-database> the
|
|
6974
7138
|
// database pushes the data. A card fires nk-select { row, id, value } like a
|
|
6975
7139
|
// row of the table, Today and ‹ › nk-month { month }.
|
|
@@ -7025,9 +7189,9 @@ class NkCalendarView extends NkElement {
|
|
|
7025
7189
|
}
|
|
7026
7190
|
this._box.classList.toggle('weeks', weeks);
|
|
7027
7191
|
this._title.textContent = new Intl.DateTimeFormat(locale, { month: 'long', year: 'numeric' }).format(g.first);
|
|
7028
|
-
this._todayBtn.textContent = this.getAttribute('today-label') || '
|
|
7029
|
-
this._prev.setAttribute('aria-label', this.getAttribute('prev-label') || '
|
|
7030
|
-
this._next.setAttribute('aria-label', this.getAttribute('next-label') || '
|
|
7192
|
+
this._todayBtn.textContent = this.getAttribute('today-label') || this.str('today');
|
|
7193
|
+
this._prev.setAttribute('aria-label', this.getAttribute('prev-label') || this.str('previousMonth'));
|
|
7194
|
+
this._next.setAttribute('aria-label', this.getAttribute('next-label') || this.str('nextMonth'));
|
|
7031
7195
|
|
|
7032
7196
|
const cell = (cls, text) => { const el = this.createElement('div', [cls]); el.textContent = text; return el; };
|
|
7033
7197
|
const nodes = [];
|
|
@@ -7073,6 +7237,8 @@ class NkCalendarView extends NkElement {
|
|
|
7073
7237
|
|
|
7074
7238
|
_rowById(id) { return this._rows.find(r => String(r.id) === String(id)); }
|
|
7075
7239
|
|
|
7240
|
+
onStringsChanged() { this._render(); }
|
|
7241
|
+
|
|
7076
7242
|
onAttributeChanged(name) {
|
|
7077
7243
|
if (name === 'month') this._month = this._attrMonth() ?? this._month;
|
|
7078
7244
|
this._render();
|
|
@@ -7106,13 +7272,20 @@ customElements.define('nk-calendar-view', NkCalendarView);
|
|
|
7106
7272
|
// <nk-database> the database pushes the data. A card fires nk-select
|
|
7107
7273
|
// { row, id, value } on a click, Enter or Space, like a row of the table;
|
|
7108
7274
|
// the add card nk-action { action: 'new-row' }.
|
|
7275
|
+
// `href-key` (1.17.0) names the row field with the card's address: a row
|
|
7276
|
+
// with one gets a link, <a class="nk-card" href>, in a .card-item that
|
|
7277
|
+
// carries the list item's role – to open a course in a new tab or copy its
|
|
7278
|
+
// address. A plain click, or Enter, fires the same nk-select; cancelling it
|
|
7279
|
+
// keeps the browser from following the link. A middle click or one with
|
|
7280
|
+
// Cmd, Ctrl, Shift or Alt fires nothing and does what a link does.
|
|
7109
7281
|
// → <div class="nk-gallery" role="list"><div class="nk-card" role="listitem" tabindex="0">
|
|
7110
7282
|
// <div class="nk-cover"><img src="…" alt=""></div><div class="card-title">🧭 …</div><div class="card-meta">…</div></div>
|
|
7283
|
+
// <div class="card-item" role="listitem"><a class="nk-card" href="/courses/safety">…</a></div>
|
|
7111
7284
|
// <div class="nk-new-row">+ New page</div></div>
|
|
7112
7285
|
const SIZES = ['small', 'large'];
|
|
7113
7286
|
|
|
7114
7287
|
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']; }
|
|
7288
|
+
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
7289
|
|
|
7117
7290
|
render() {
|
|
7118
7291
|
this._grid = this.createElement('div', ['nk-gallery'], { role: 'list' });
|
|
@@ -7138,9 +7311,13 @@ class NkGalleryView extends NkElement {
|
|
|
7138
7311
|
this._grid.className = ['nk-gallery', SIZES.includes(size) && size, this.getBoolAttr('fit') && 'fit'].filter(Boolean).join(' ');
|
|
7139
7312
|
const title = this._titleColumn(), meta = this._metaColumns();
|
|
7140
7313
|
const coverKey = this.getAttribute('cover-key') || 'cover', covers = !this.getBoolAttr('no-cover');
|
|
7314
|
+
const hrefKey = this.getAttribute('href-key');
|
|
7141
7315
|
this._grid.replaceChildren();
|
|
7142
7316
|
for (const row of this._rows) {
|
|
7143
|
-
const
|
|
7317
|
+
const link = hrefKey ? row[hrefKey] : null, href = link && typeof link === 'object' ? link.href : link;
|
|
7318
|
+
const card = href
|
|
7319
|
+
? this.createElement('a', ['nk-card'], { href: String(href), 'data-id': row.id ?? '' })
|
|
7320
|
+
: this.createElement('div', ['nk-card'], { role: 'listitem', tabindex: '0', 'data-id': row.id ?? '' });
|
|
7144
7321
|
if (covers) {
|
|
7145
7322
|
const cover = this.createElement('div', ['nk-cover']);
|
|
7146
7323
|
if (row[coverKey]) cover.appendChild(this.createElement('img', [], { src: row[coverKey], alt: '' }));
|
|
@@ -7153,17 +7330,21 @@ class NkGalleryView extends NkElement {
|
|
|
7153
7330
|
const v = row[c.key];
|
|
7154
7331
|
if (v === undefined || v === null || v === '') continue;
|
|
7155
7332
|
const s = document.createElement('span');
|
|
7156
|
-
if (c.type === 'progress') s.textContent = `▰ ${v}
|
|
7333
|
+
if (c.type === 'progress') s.textContent = `▰ ${formatPercent(c, v)}`;
|
|
7157
7334
|
else if (c.type === 'date') s.textContent = `📅 ${formatDate(c, v)}`;
|
|
7158
7335
|
else s.appendChild(renderPropertyCell(c, v, row));
|
|
7159
7336
|
m.appendChild(s);
|
|
7160
7337
|
}
|
|
7161
7338
|
card.append(t, m);
|
|
7162
|
-
|
|
7339
|
+
if (href) {
|
|
7340
|
+
const item = this.createElement('div', ['card-item'], { role: 'listitem' });
|
|
7341
|
+
item.appendChild(card);
|
|
7342
|
+
this._grid.appendChild(item);
|
|
7343
|
+
} else this._grid.appendChild(card);
|
|
7163
7344
|
}
|
|
7164
7345
|
if (this.getBoolAttr('new-row')) {
|
|
7165
7346
|
const add = this.createElement('div', ['nk-new-row'], { role: 'button', tabindex: '0', 'data-add': '' });
|
|
7166
|
-
add.textContent = this.getAttribute('new-row-label') || '
|
|
7347
|
+
add.textContent = this.getAttribute('new-row-label') || this.str('newPage');
|
|
7167
7348
|
this._grid.appendChild(add);
|
|
7168
7349
|
}
|
|
7169
7350
|
}
|
|
@@ -7172,10 +7353,16 @@ class NkGalleryView extends NkElement {
|
|
|
7172
7353
|
this._onClick = (e) => {
|
|
7173
7354
|
if (e.target.closest('[data-add]')) { this.emit('nk-action', { action: 'new-row' }); return; }
|
|
7174
7355
|
const card = e.target.closest('.nk-card');
|
|
7175
|
-
if (card)
|
|
7356
|
+
if (!card) return;
|
|
7357
|
+
// The link contract: a plain left click is a selection, any other one the browser's.
|
|
7358
|
+
const link = card.localName === 'a';
|
|
7359
|
+
if (link && (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey)) return;
|
|
7360
|
+
const row = this._rowById(card.dataset.id);
|
|
7361
|
+
if (!this.emit('nk-select', { row, id: row?.id, value: row?.id }) && link) e.preventDefault();
|
|
7176
7362
|
};
|
|
7177
7363
|
this._onKey = (e) => {
|
|
7178
7364
|
if (e.key !== 'Enter' && e.key !== ' ') return;
|
|
7365
|
+
if (e.target.localName === 'a') return; // a link card: Enter is the browser's click, Space scrolls
|
|
7179
7366
|
if (e.target.matches?.('.nk-card, [data-add]')) { e.preventDefault(); e.target.click(); }
|
|
7180
7367
|
};
|
|
7181
7368
|
this._grid.addEventListener('click', this._onClick);
|
|
@@ -7189,6 +7376,7 @@ class NkGalleryView extends NkElement {
|
|
|
7189
7376
|
|
|
7190
7377
|
_rowById(id) { return this._rows.find(r => String(r.id) === String(id)); }
|
|
7191
7378
|
onAttributeChanged() { this._render(); }
|
|
7379
|
+
onStringsChanged() { this._render(); }
|
|
7192
7380
|
|
|
7193
7381
|
get name() { return this.getAttribute('name') || 'gallery'; }
|
|
7194
7382
|
get columns() { return this._columns; }
|
|
@@ -7214,9 +7402,10 @@ customElements.define('nk-gallery-view', NkGalleryView);
|
|
|
7214
7402
|
// nk-action { action: 'add' } – each with the clicked button as `anchor`, to
|
|
7215
7403
|
// open a menu under it. × removes the filter; every change to filters or
|
|
7216
7404
|
// search fires nk-change { filters, search }. In slot="filters" of
|
|
7217
|
-
// <nk-database> the row sits right under the view tabs. The texts
|
|
7218
|
-
//
|
|
7219
|
-
//
|
|
7405
|
+
// <nk-database> the row sits right under the view tabs. The texts come in
|
|
7406
|
+
// English or German after the language (1.17.0, setStrings() for others);
|
|
7407
|
+
// filter-label, sort-label, add-label, remove-label (the × reads
|
|
7408
|
+
// "<remove-label>: <pill>") and placeholder set them here.
|
|
7220
7409
|
class NkFilterBar extends NkElement {
|
|
7221
7410
|
static get observedAttributes() { return ['search', 'placeholder', 'no-filter', 'no-sort', 'value', 'add', 'add-label', 'filter-label', 'sort-label', 'remove-label']; }
|
|
7222
7411
|
|
|
@@ -7234,18 +7423,18 @@ class NkFilterBar extends NkElement {
|
|
|
7234
7423
|
}
|
|
7235
7424
|
|
|
7236
7425
|
_sync() {
|
|
7237
|
-
this._filterBtn.textContent = this.getAttribute('filter-label') || '
|
|
7426
|
+
this._filterBtn.textContent = this.getAttribute('filter-label') || this.str('filter');
|
|
7238
7427
|
this._filterBtn.hidden = this.getBoolAttr('no-filter');
|
|
7239
7428
|
this._filterBtn.classList.toggle('active', this._filters.length > 0);
|
|
7240
|
-
this._sortBtn.textContent = this.getAttribute('sort-label') || '
|
|
7429
|
+
this._sortBtn.textContent = this.getAttribute('sort-label') || this.str('sort');
|
|
7241
7430
|
this._sortBtn.hidden = this.getBoolAttr('no-sort');
|
|
7242
|
-
this._addBtn.textContent = this.getAttribute('add-label') || '
|
|
7431
|
+
this._addBtn.textContent = this.getAttribute('add-label') || this.str('addFilter');
|
|
7243
7432
|
this._addBtn.hidden = !this.getBoolAttr('add');
|
|
7244
7433
|
this._input.hidden = !this.getBoolAttr('search');
|
|
7245
|
-
this._input.placeholder = this.getAttribute('placeholder') || '
|
|
7434
|
+
this._input.placeholder = this.getAttribute('placeholder') || this.str('search');
|
|
7246
7435
|
if (this.hasAttribute('value') && this._input.value !== this.getAttribute('value')) this._input.value = this.getAttribute('value');
|
|
7247
7436
|
for (const old of this._row.querySelectorAll('[data-pill]')) old.remove();
|
|
7248
|
-
const removeLabel = this.getAttribute('remove-label') || '
|
|
7437
|
+
const removeLabel = this.getAttribute('remove-label') || this.str('removeFilter');
|
|
7249
7438
|
this._pillStart.after(...this._filters.map((f, i) => {
|
|
7250
7439
|
const pill = this.createElement('span', ['nk-filter-pill', 'active'], { 'data-pill': i });
|
|
7251
7440
|
const label = this.createElement('button', [], { type: 'button', 'data-edit': i });
|
|
@@ -7279,6 +7468,7 @@ class NkFilterBar extends NkElement {
|
|
|
7279
7468
|
|
|
7280
7469
|
_emitChange() { this.emit('nk-change', { filters: [...this._filters], search: this._input.value }); }
|
|
7281
7470
|
onAttributeChanged() { this._sync(); }
|
|
7471
|
+
onStringsChanged() { this._sync(); }
|
|
7282
7472
|
|
|
7283
7473
|
// A copy each way: the caller's array is never changed – removing a pill
|
|
7284
7474
|
// only reports the new list in nk-change.
|
|
@@ -7313,7 +7503,7 @@ class NkComments extends NkElement {
|
|
|
7313
7503
|
const box = this.createElement('div', ['nk-comments']);
|
|
7314
7504
|
box.appendChild(document.createElement('slot'));
|
|
7315
7505
|
this._row = this.createElement('div', ['nk-comment-input']);
|
|
7316
|
-
this._input = this.createElement('input', ['nk-input'], { type: 'text'
|
|
7506
|
+
this._input = this.createElement('input', ['nk-input'], { type: 'text' });
|
|
7317
7507
|
this._btn = this.createElement('button', ['nk-btn', 'primary', 'small'], { type: 'button' });
|
|
7318
7508
|
this._row.append(this._input, this._btn);
|
|
7319
7509
|
box.appendChild(this._row);
|
|
@@ -7322,8 +7512,9 @@ class NkComments extends NkElement {
|
|
|
7322
7512
|
}
|
|
7323
7513
|
|
|
7324
7514
|
_sync() {
|
|
7325
|
-
this._input.placeholder = this.getAttribute('placeholder') || '
|
|
7326
|
-
this.
|
|
7515
|
+
this._input.placeholder = this.getAttribute('placeholder') || this.str('commentPlaceholder');
|
|
7516
|
+
this._input.setAttribute('aria-label', this.str('comment'));
|
|
7517
|
+
this._btn.textContent = this.getAttribute('send-label') || this.str('send');
|
|
7327
7518
|
this._row.style.display = this.getBoolAttr('no-input') ? 'none' : '';
|
|
7328
7519
|
this._input.disabled = this._btn.disabled = this.getBoolAttr('disabled');
|
|
7329
7520
|
}
|
|
@@ -7348,6 +7539,7 @@ class NkComments extends NkElement {
|
|
|
7348
7539
|
}
|
|
7349
7540
|
|
|
7350
7541
|
onAttributeChanged() { this._sync(); }
|
|
7542
|
+
onStringsChanged() { this._sync(); }
|
|
7351
7543
|
focus(o) { this._input?.focus(o); }
|
|
7352
7544
|
get value() { return this._input?.value ?? ''; }
|
|
7353
7545
|
set value(v) { if (this._input) this._input.value = v ?? ''; }
|
|
@@ -7487,8 +7679,8 @@ class NkAiInputRow extends NkElement {
|
|
|
7487
7679
|
this._row = this.createElement('div', ['nk-ai-input-row']);
|
|
7488
7680
|
this._icon = document.createElement('span');
|
|
7489
7681
|
this._icon.style.fontSize = '14px';
|
|
7490
|
-
this._input = this.createElement('input', [], { type: 'text'
|
|
7491
|
-
this._btn = this.createElement('button', ['nk-ai-send'], { type: 'button'
|
|
7682
|
+
this._input = this.createElement('input', [], { type: 'text' });
|
|
7683
|
+
this._btn = this.createElement('button', ['nk-ai-send'], { type: 'button' });
|
|
7492
7684
|
this._btn.textContent = '↑';
|
|
7493
7685
|
this._row.append(this._icon, this._input, this._btn);
|
|
7494
7686
|
this._wrapper.appendChild(this._row);
|
|
@@ -7496,7 +7688,9 @@ class NkAiInputRow extends NkElement {
|
|
|
7496
7688
|
}
|
|
7497
7689
|
|
|
7498
7690
|
_sync() {
|
|
7499
|
-
this._input.placeholder = this.getAttribute('placeholder') || '
|
|
7691
|
+
this._input.placeholder = this.getAttribute('placeholder') || this.str('askPlaceholder');
|
|
7692
|
+
this._input.setAttribute('aria-label', this.str('message'));
|
|
7693
|
+
this._btn.setAttribute('aria-label', this.str('send'));
|
|
7500
7694
|
if (this.hasAttribute('value') && this._input.value !== this.getAttribute('value')) this._input.value = this.getAttribute('value');
|
|
7501
7695
|
this._input.disabled = this._btn.disabled = this.getBoolAttr('disabled');
|
|
7502
7696
|
const icon = this.getAttribute('icon') ?? '✨';
|
|
@@ -7524,6 +7718,7 @@ class NkAiInputRow extends NkElement {
|
|
|
7524
7718
|
}
|
|
7525
7719
|
|
|
7526
7720
|
onAttributeChanged() { this._sync(); }
|
|
7721
|
+
onStringsChanged() { this._sync(); }
|
|
7527
7722
|
focus(o) { this._input?.focus(o); }
|
|
7528
7723
|
get value() { return this._input?.value ?? ''; }
|
|
7529
7724
|
set value(v) { if (this._input) this._input.value = v ?? ''; }
|
|
@@ -7531,4 +7726,4 @@ class NkAiInputRow extends NkElement {
|
|
|
7531
7726
|
|
|
7532
7727
|
customElements.define('nk-ai-input-row', NkAiInputRow);
|
|
7533
7728
|
|
|
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 };
|
|
7729
|
+
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 };
|