@evotecit/canopyx 0.0.0-stage → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (33) hide show
  1. package/CanopyX.Html/Assets/canopyx-filter-editor.css +135 -0
  2. package/CanopyX.Html/Assets/canopyx-filter-editor.js +61 -0
  3. package/CanopyX.Html/Assets/canopyx-grid-module.mjs +1035 -0
  4. package/CanopyX.Html/Assets/canopyx-grid.css +554 -0
  5. package/CanopyX.Html/Assets/canopyx-grid.js +1033 -0
  6. package/CanopyX.Html/Assets/canopyx-interactive.css +351 -0
  7. package/CanopyX.Html/Assets/canopyx-interactive.js +664 -0
  8. package/CanopyX.Html/Assets/canopyx-labels-de.js +225 -0
  9. package/CanopyX.Html/Assets/canopyx-labels-es.js +225 -0
  10. package/CanopyX.Html/Assets/canopyx-labels-pl.js +225 -0
  11. package/CanopyX.Html/Assets/canopyx-module.mjs +665 -0
  12. package/CanopyX.Html/Assets/canopyx-reporting-module.mjs +1278 -0
  13. package/CanopyX.Html/Assets/canopyx-reporting.css +604 -0
  14. package/CanopyX.Html/Assets/canopyx-reporting.js +1276 -0
  15. package/CanopyX.Html/Assets/canopyx.css +325 -0
  16. package/CanopyX.Html/Assets/canopyx.js +534 -0
  17. package/JavaScript/grid.d.ts +591 -0
  18. package/JavaScript/hosts.d.ts +109 -0
  19. package/JavaScript/index.d.ts +85 -0
  20. package/JavaScript/locales/de.d.ts +6 -0
  21. package/JavaScript/locales/de.mjs +223 -0
  22. package/JavaScript/locales/es.d.ts +6 -0
  23. package/JavaScript/locales/es.mjs +223 -0
  24. package/JavaScript/locales/pl.d.ts +6 -0
  25. package/JavaScript/locales/pl.mjs +223 -0
  26. package/JavaScript/protocol.d.ts +229 -0
  27. package/LICENSE +21 -0
  28. package/README.md +198 -2
  29. package/README.nuget.md +131 -0
  30. package/docs/images/static-outline.png +0 -0
  31. package/docs/images/tree-grid-dark.png +0 -0
  32. package/docs/images/tree-grid-light.png +0 -0
  33. package/package.json +82 -4
@@ -0,0 +1,325 @@
1
+ /* CanopyX theme. */
2
+ .cx-host,.cx-static{
3
+ --cx-surface:#ffffff;
4
+ --cx-text:#16181c;
5
+ --cx-accent:#11776f;
6
+ --cx-line:#e2e4e7;
7
+ --cx-tone-info:#0a728b;
8
+ --cx-tone-success:#177345;
9
+ --cx-tone-warning:#8c5c05;
10
+ --cx-tone-danger:#b8292a;
11
+ --cx-font:Calibri,Carlito,"Segoe UI",system-ui,sans-serif;
12
+ --cx-font-mono:"IBM Plex Mono","Cascadia Mono",Consolas,monospace;
13
+ --cx-font-size:14px;
14
+ --cx-radius:6px;
15
+ --cx-radius-sm:4px;
16
+ --cx-control-h:32px;
17
+ --cx-row-h:28px;
18
+ --cx-head-h:36px;
19
+ --cx-cell-px:12px;
20
+ --cx-on-accent:#ffffff;
21
+ --cx-shadow-ink:#000;
22
+ --cx-size-d04em:.04em;
23
+ --cx-size-46ch:46ch;
24
+ --cx-size-440px:440px;
25
+ --cx-size-140px:140px;
26
+ --cx-size-d06em:.06em;
27
+ --cx-size-210px:210px;
28
+ --cx-size-neg-4px:-4px;
29
+ --cx-size-56px:56px;
30
+ --cx-size-64px:64px;
31
+ --cx-size-160px:160px;
32
+ --cx-size-12d5px:12.5px;
33
+ --cx-size-640px:640px;
34
+ --cx-size-17px:17px;
35
+ --cx-size-60vh:60vh;
36
+ --cx-size-11d5px:11.5px;
37
+ --cx-size-13d5px:13.5px;
38
+ --cx-size-38px:38px;
39
+ --cx-size-26px:26px;
40
+ --cx-size-52px:52px;
41
+ --cx-size-30px:30px;
42
+ --cx-size-72px:72px;
43
+ --cx-size-244px:244px;
44
+ --cx-size-44px:44px;
45
+ --cx-size-85vh:85vh;
46
+ --cx-size-480px:480px;
47
+ --cx-size-14px:14px;
48
+ --cx-size-1px:1px;
49
+ --cx-size-neg-1px:-1px;
50
+ --cx-size-8px:8px;
51
+ --cx-size-12px:12px;
52
+ --cx-size-4px:4px;
53
+ --cx-size-10px:10px;
54
+ --cx-size-11px:11px;
55
+ --cx-size-1d5px:1.5px;
56
+ --cx-size-21px:21px;
57
+ --cx-size-5px:5px;
58
+ --cx-size-280px:280px;
59
+ --cx-size-34px:34px;
60
+ --cx-size-6px:6px;
61
+ --cx-size-32px:32px;
62
+ --cx-size-7px:7px;
63
+ --cx-size-420px:420px;
64
+ --cx-size-100vw:100vw;
65
+ --cx-size-16px:16px;
66
+ --cx-size-320px:320px;
67
+ --cx-size-2px:2px;
68
+ --cx-size-d8em:.8em;
69
+ --cx-size-d85em:.85em;
70
+ --cx-size-neg-2px:-2px;
71
+ --cx-size-180px:180px;
72
+ --cx-size-d92em:.92em;
73
+ --cx-size-9px:9px;
74
+ --cx-size-neg-3px:-3px;
75
+ --cx-size-18px:18px;
76
+ --cx-size-1d6px:1.6px;
77
+ --cx-size-999px:999px;
78
+ --cx-size-12em:12em;
79
+ --cx-size-100vh:100vh;
80
+ --cx-size-340px:340px;
81
+ --cx-size-20px:20px;
82
+ --cx-size-36px:36px;
83
+ --cx-size-3px:3px;
84
+ --cx-size-13px:13px;
85
+ --cx-size-360px:360px;
86
+ --cx-size-22px:22px;
87
+ --cx-size-24px:24px;
88
+ --cx-size-80vh:80vh;
89
+ --cx-size-240px:240px;
90
+ --cx-size-d875em:.875em;
91
+ --cx-size-92px:92px;
92
+ --cx-size-28px:28px;
93
+ --cx-text-2:color-mix(in srgb,var(--cx-text) 78%,var(--cx-surface));
94
+ --cx-muted:color-mix(in srgb,var(--cx-text) 66%,var(--cx-surface));
95
+ --cx-control-border:color-mix(in srgb,var(--cx-text) 54%,var(--cx-surface));
96
+ --cx-head-bg:color-mix(in srgb,var(--cx-text) 3.5%,var(--cx-surface));
97
+ --cx-group-bg:color-mix(in srgb,var(--cx-text) 2.5%,var(--cx-surface));
98
+ --cx-alt-bg:var(--cx-group-bg);
99
+ --cx-hover-bg:color-mix(in srgb,var(--cx-text) 4%,var(--cx-surface));
100
+ --cx-selected-bg:color-mix(in srgb,var(--cx-accent) 11%,var(--cx-surface));
101
+ --cx-accent-text:color-mix(in srgb,var(--cx-accent) 98%,var(--cx-text));
102
+ --cx-accent-soft:color-mix(in srgb,var(--cx-accent) 13%,var(--cx-surface));
103
+ --cx-line-strong:color-mix(in srgb,var(--cx-text) 22%,var(--cx-surface));
104
+ --cx-row-line:var(--cx-line);
105
+ --cx-panel-shadow:0 8px 28px color-mix(in srgb,var(--cx-shadow-ink) 14%,transparent),0 1px 3px color-mix(in srgb,var(--cx-shadow-ink) 8%,transparent);
106
+ --cx-tone-danger-bg:color-mix(in srgb,var(--cx-tone-danger) 11%,var(--cx-surface));
107
+ --cx-tone-warning-bg:color-mix(in srgb,var(--cx-tone-warning) 13%,var(--cx-surface));
108
+ --cx-tone-success-bg:color-mix(in srgb,var(--cx-tone-success) 11%,var(--cx-surface));
109
+ --cx-tone-info-bg:color-mix(in srgb,var(--cx-tone-info) 11%,var(--cx-surface));
110
+ --cx-quiet:color-mix(in srgb,var(--cx-tone-success) 55%,var(--cx-surface));
111
+ --cx-scrollbar-thumb:color-mix(in srgb,var(--cx-text) 28%,transparent);
112
+ --cx-scrollbar-thumb-hover:color-mix(in srgb,var(--cx-text) 46%,transparent);
113
+ --cx-scrollbar-track:transparent;
114
+ --cx-scrollbar-size:10px;
115
+ color-scheme:light;
116
+ }
117
+ .cx-host[data-cx-theme="dark"],.cx-static[data-cx-theme="dark"]{
118
+ color-scheme:dark;
119
+ --cx-surface:#16181c;
120
+ --cx-text:#f2f3f5;
121
+ --cx-accent:#37c9b8;
122
+ --cx-line:#272a30;
123
+ --cx-tone-info:#3ec3dd;
124
+ --cx-tone-success:#4cc78a;
125
+ --cx-tone-warning:#eeb640;
126
+ --cx-tone-danger:#f47171;
127
+ --cx-on-accent:#0c0d10;
128
+ --cx-head-bg:color-mix(in srgb,var(--cx-text) 4.5%,var(--cx-surface));
129
+ --cx-panel-shadow:0 10px 32px color-mix(in srgb,var(--cx-shadow-ink) 55%,transparent),0 0 0 1px var(--cx-line);
130
+ }
131
+ @media (prefers-color-scheme:dark){
132
+ .cx-host[data-cx-theme="auto"],.cx-static[data-cx-theme="auto"]{
133
+ color-scheme:dark;
134
+ --cx-surface:#16181c;
135
+ --cx-text:#f2f3f5;
136
+ --cx-accent:#37c9b8;
137
+ --cx-line:#272a30;
138
+ --cx-tone-info:#3ec3dd;
139
+ --cx-tone-success:#4cc78a;
140
+ --cx-tone-warning:#eeb640;
141
+ --cx-tone-danger:#f47171;
142
+ --cx-on-accent:#0c0d10;
143
+ --cx-head-bg:color-mix(in srgb,var(--cx-text) 4.5%,var(--cx-surface));
144
+ --cx-panel-shadow:0 10px 32px color-mix(in srgb,var(--cx-shadow-ink) 55%,transparent),0 0 0 1px var(--cx-line);
145
+ }
146
+ }
147
+ .cx-host{
148
+ box-sizing:border-box;
149
+ display:flex;
150
+ flex-direction:column;
151
+ height:var(--cx-size-480px);
152
+ min-height:0;
153
+ color:var(--cx-text);
154
+ background:var(--cx-surface);
155
+ font-family:var(--cx-font,inherit);
156
+ font-size:var(--cx-font-size,var(--cx-size-14px));
157
+ line-height:1.4;
158
+ }
159
+ .cx-host *,.cx-host *::before,.cx-host *::after{box-sizing:border-box;}
160
+ @media not (forced-colors:active){
161
+ :where(.cx-host,.cx-host *){scrollbar-color:var(--cx-scrollbar-thumb) var(--cx-scrollbar-track);scrollbar-width:thin;}
162
+ .cx-host::-webkit-scrollbar,.cx-host ::-webkit-scrollbar{width:var(--cx-scrollbar-size);height:var(--cx-scrollbar-size);}
163
+ .cx-host::-webkit-scrollbar-track,.cx-host ::-webkit-scrollbar-track,.cx-host ::-webkit-scrollbar-corner{background:var(--cx-scrollbar-track);}
164
+ .cx-host::-webkit-scrollbar-thumb,.cx-host ::-webkit-scrollbar-thumb{background:var(--cx-scrollbar-thumb) padding-box;border:var(--cx-size-2px) solid transparent;border-radius:var(--cx-size-999px);}
165
+ .cx-host ::-webkit-scrollbar-thumb:hover{background-color:var(--cx-scrollbar-thumb-hover);}
166
+ }
167
+ .cx-sr-only{
168
+ --cx-size-1px:1px;--cx-size-neg-1px:-1px;
169
+ position:absolute !important;
170
+ width:var(--cx-size-1px);height:var(--cx-size-1px);padding:0;margin:var(--cx-size-neg-1px);
171
+ overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
172
+ }
173
+ .cx-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cx-size-8px) var(--cx-size-12px);padding:var(--cx-size-4px) 0 var(--cx-size-10px);}
174
+ .cx-search{position:relative;min-width:0;max-width:100%;}
175
+ .cx-search::before{content:"";position:absolute;left:var(--cx-size-12px);top:var(--cx-size-11px);width:var(--cx-size-10px);height:var(--cx-size-10px);border:var(--cx-size-1d5px) solid var(--cx-muted);border-radius:50%;pointer-events:none;}
176
+ .cx-search::after{content:"";position:absolute;left:var(--cx-size-21px);top:var(--cx-size-21px);width:var(--cx-size-5px);border-top:var(--cx-size-1d5px) solid var(--cx-muted);transform:rotate(45deg);pointer-events:none;}
177
+ .cx-search-input{
178
+ font:inherit;width:var(--cx-size-280px);max-width:100%;min-height:var(--cx-size-34px);padding:var(--cx-size-6px) var(--cx-size-10px) var(--cx-size-6px) var(--cx-size-32px);border-radius:var(--cx-size-7px);
179
+ border:var(--cx-size-1px) solid var(--cx-line-strong);background:var(--cx-surface);color:var(--cx-text);
180
+ }
181
+ .cx-search-input::placeholder{color:var(--cx-muted);opacity:1;}
182
+ .cx-results{
183
+ position:absolute;z-index:20;top:100%;left:0;width:var(--cx-size-420px);max-width:calc(var(--cx-size-100vw) - var(--cx-size-16px));max-height:var(--cx-size-320px);overflow:auto;
184
+ margin:0;padding:var(--cx-size-4px);list-style:none;background:var(--cx-surface);
185
+ border:var(--cx-size-1px) solid var(--cx-line-strong);border-radius:var(--cx-size-8px);box-shadow:var(--cx-panel-shadow);
186
+ }
187
+ .cx-result{display:grid;grid-template-columns:1fr auto;gap:var(--cx-size-2px) var(--cx-size-8px);padding:var(--cx-size-6px) var(--cx-size-8px);border-radius:var(--cx-size-4px);cursor:pointer;}
188
+ .cx-result-label{min-width:0;overflow-wrap:anywhere;}
189
+ .cx-result[aria-selected="true"],.cx-result:hover{background:var(--cx-selected-bg);}
190
+ .cx-result-kind{font-size:var(--cx-size-d8em);color:var(--cx-muted);text-transform:uppercase;}
191
+ .cx-result-context{grid-column:1 / -1;font-size:var(--cx-size-d85em);color:var(--cx-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
192
+ .cx-switch{display:inline-flex;align-items:center;gap:var(--cx-size-7px);min-height:var(--cx-size-34px);cursor:pointer;}
193
+ .cx-switch input{accent-color:var(--cx-accent);width:var(--cx-size-16px);height:var(--cx-size-16px);margin:0;}
194
+ .cx-columns{position:relative;}
195
+ .cx-columns:not([open]) > .cx-columns-list{display:none;}
196
+ .cx-columns > summary{display:flex;align-items:center;gap:var(--cx-size-10px);min-height:var(--cx-size-34px);cursor:pointer;padding:var(--cx-size-6px) var(--cx-size-10px);border:var(--cx-size-1px) solid var(--cx-line-strong);border-radius:var(--cx-size-7px);list-style:none;}
197
+ .cx-columns > summary::after{content:"";width:var(--cx-size-6px);height:var(--cx-size-6px);border-right:var(--cx-size-1d5px) solid currentColor;border-bottom:var(--cx-size-1d5px) solid currentColor;transform:rotate(45deg) translateY(var(--cx-size-neg-2px));}
198
+ .cx-columns[open] > summary,.cx-columns > summary:hover{background:var(--cx-hover-bg);}
199
+ .cx-columns > summary::-webkit-details-marker{display:none;}
200
+ .cx-columns-list{
201
+ position:absolute;z-index:20;top:100%;left:0;margin:0;padding:var(--cx-size-6px);
202
+ width:max-content;min-width:min(var(--cx-size-180px),calc(var(--cx-size-100vw) - var(--cx-size-16px)));max-width:calc(var(--cx-size-100vw) - var(--cx-size-16px));max-height:var(--cx-size-320px);overflow:auto;
203
+ display:grid;gap:var(--cx-size-2px);background:var(--cx-surface);border:var(--cx-size-1px) solid var(--cx-line-strong);border-radius:var(--cx-size-8px);box-shadow:var(--cx-panel-shadow);
204
+ }
205
+ .cx-columns-list label{display:flex;gap:var(--cx-size-8px);align-items:center;min-height:var(--cx-size-32px);padding:var(--cx-size-4px) var(--cx-size-6px);border-radius:var(--cx-size-4px);cursor:pointer;overflow-wrap:anywhere;}
206
+ .cx-columns-list label:hover{background:var(--cx-hover-bg);}
207
+ .cx-columns-list input{flex:none;width:var(--cx-size-16px);height:var(--cx-size-16px);margin:0;accent-color:var(--cx-accent);}
208
+ .cx-host :is(.cx-search-input,.cx-sort,.cx-columns > summary,.cx-switch input):focus-visible{outline:var(--cx-size-2px) solid var(--cx-accent);outline-offset:var(--cx-size-1px);}
209
+ .cx-grid{
210
+ position:relative;flex:1 1 auto;min-height:0;overflow:auto;outline:none;contain:strict;
211
+ background:var(--cx-surface);border:var(--cx-size-1px) solid var(--cx-line);border-radius:var(--cx-size-8px);
212
+ }
213
+ .cx-head{position:sticky;top:0;z-index:2;min-width:100%;width:max-content;background:var(--cx-head-bg);border-bottom:var(--cx-size-1px) solid var(--cx-line-strong);}
214
+ .cx-hrow{display:flex;height:var(--cx-row-h);}
215
+ .cx-hcell{
216
+ flex:none;position:relative;display:flex;align-items:center;padding:0 var(--cx-size-8px);overflow:hidden;white-space:nowrap;
217
+ font-weight:600;font-size:var(--cx-size-d92em);color:var(--cx-text);border-right:var(--cx-size-1px) solid var(--cx-row-line);user-select:none;
218
+ }
219
+ .cx-hcell.cx-kind-number{justify-content:flex-end;}
220
+ .cx-sort{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;display:inline-flex;gap:var(--cx-size-4px);align-items:center;}
221
+ .cx-hcell[aria-sort="ascending"] .cx-sort::after{content:"\25B2";font-size:var(--cx-size-9px);}
222
+ .cx-hcell[aria-sort="descending"] .cx-sort::after{content:"\25BC";font-size:var(--cx-size-9px);}
223
+ .cx-resize{padding:0;border:0;background:transparent;position:absolute;right:var(--cx-size-neg-3px);top:0;bottom:0;width:var(--cx-size-7px);cursor:col-resize;z-index:1;}
224
+ .cx-pin-tree .cx-hcell:first-child,.cx-pin-tree .cx-row > .cx-tree{position:sticky;left:0;z-index:1;}
225
+ .cx-pin-tree .cx-hcell:first-child{z-index:2;background:var(--cx-head-bg);}
226
+ .cx-pin-tree .cx-row > .cx-tree{background:inherit;}
227
+ .cx-pin-tree .cx-row:focus-visible > .cx-tree{outline:var(--cx-size-2px) solid var(--cx-accent);outline-offset:var(--cx-size-neg-2px);}
228
+ .cx-canvas{position:relative;min-width:100%;}
229
+ .cx-canvas[data-cx-scaled]{overflow:clip;}
230
+ .cx-row{
231
+ position:absolute;left:0;top:0;display:flex;height:var(--cx-row-h);min-width:100%;
232
+ background:var(--cx-surface);border-bottom:var(--cx-size-1px) solid var(--cx-row-line);cursor:default;contain:strict;
233
+ }
234
+ .cx-row.cx-alt{background:var(--cx-alt-bg);}
235
+ .cx-row:hover{background:var(--cx-hover-bg);}
236
+ .cx-row[aria-selected="true"]{background:var(--cx-selected-bg);}
237
+ .cx-row:focus{outline:none;}
238
+ .cx-row:focus-visible{outline:var(--cx-size-2px) solid var(--cx-accent);outline-offset:var(--cx-size-neg-2px);}
239
+ .cx-cell:focus,.cx-detail-body:focus{outline:none;}
240
+ .cx-cell:focus-visible,.cx-detail-body:focus-visible{outline:var(--cx-size-2px) solid var(--cx-accent);outline-offset:var(--cx-size-neg-2px);}
241
+ .cx-cell{
242
+ flex:none;display:flex;align-items:center;gap:var(--cx-size-6px);padding:0 var(--cx-size-8px);min-width:0;overflow:hidden;
243
+ white-space:nowrap;text-overflow:ellipsis;
244
+ }
245
+ .cx-cell.cx-kind-number{justify-content:flex-end;font-variant-numeric:tabular-nums;}
246
+ .cx-cell.cx-tree{gap:var(--cx-size-2px);}
247
+ .cx-content{display:inline-flex;align-items:center;gap:var(--cx-size-6px);min-width:0;max-width:100%;}
248
+ .cx-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
249
+ .cx-indent{flex:none;display:inline-block;}
250
+ .cx-icon{flex:none;display:inline-flex;width:var(--cx-size-16px);height:var(--cx-size-16px);margin-right:var(--cx-size-4px);color:var(--cx-muted);}
251
+ .cx-icon svg{width:var(--cx-size-16px);height:var(--cx-size-16px);}
252
+ .cx-exp{
253
+ flex:none;width:var(--cx-size-18px);height:var(--cx-size-18px);display:inline-flex;align-items:center;justify-content:center;
254
+ cursor:pointer;color:var(--cx-muted);border-radius:var(--cx-size-4px);
255
+ }
256
+ .cx-exp::before{content:"";width:var(--cx-size-7px);height:var(--cx-size-7px);border-right:var(--cx-size-1d6px) solid currentColor;border-bottom:var(--cx-size-1d6px) solid currentColor;transform:rotate(-45deg);transition:transform .12s ease;}
257
+ .cx-row[aria-expanded="true"] > .cx-tree .cx-exp::before{transform:rotate(45deg);}
258
+ .cx-exp.cx-leaf{cursor:default;}
259
+ .cx-exp:not(.cx-leaf):hover{background:var(--cx-selected-bg);color:var(--cx-text);}
260
+ .cx-exp.cx-leaf::before{display:none;}
261
+ .cx-row[aria-busy="true"] .cx-exp::before{width:var(--cx-size-10px);height:var(--cx-size-10px);transform:none;border:var(--cx-size-1d6px) solid var(--cx-line-strong);border-top-color:var(--cx-accent);border-radius:50%;animation:cx-spin .8s linear infinite;}
262
+ @keyframes cx-spin{to{transform:rotate(360deg);}}
263
+ @media (prefers-reduced-motion:reduce){
264
+ .cx-exp::before{transition:none;}
265
+ .cx-row[aria-busy="true"] .cx-exp::before{animation:none;}
266
+ }
267
+ .cx-group .cx-text{font-weight:600;}
268
+ .cx-row.cx-status .cx-cell{color:var(--cx-muted);font-style:italic;}
269
+ .cx-row.cx-more .cx-cell{color:var(--cx-accent);font-style:normal;}
270
+ .cx-more-btn{cursor:pointer;text-decoration:underline;text-underline-offset:var(--cx-size-2px);}
271
+ .cx-row.cx-error .cx-cell{color:var(--cx-tone-danger);}
272
+ .cx-mount-error{padding:var(--cx-size-8px);color:var(--cx-tone-danger);}
273
+ .cx-tone-info{color:var(--cx-tone-info);}
274
+ .cx-tone-success{color:var(--cx-tone-success);}
275
+ .cx-tone-warning{color:var(--cx-tone-warning);}
276
+ .cx-tone-danger{color:var(--cx-tone-danger);}
277
+ .cx-tone-muted{color:var(--cx-muted);}
278
+ .cx-badge{
279
+ flex:none;display:inline-block;padding:0 var(--cx-size-6px);border-radius:var(--cx-size-999px);font-size:var(--cx-size-d8em);line-height:var(--cx-size-18px);
280
+ font-style:normal;font-weight:400;font-variant-numeric:tabular-nums;
281
+ color:var(--cx-text);background:var(--cx-alt-bg);border:var(--cx-size-1px) solid var(--cx-line);
282
+ }
283
+ .cx-badge.cx-tone-info{color:var(--cx-tone-info);background:color-mix(in srgb,var(--cx-tone-info) 12%,var(--cx-surface));border-color:transparent;}
284
+ .cx-badge.cx-tone-success{color:var(--cx-tone-success);background:color-mix(in srgb,var(--cx-tone-success) 12%,var(--cx-surface));border-color:transparent;}
285
+ .cx-badge.cx-tone-warning{color:var(--cx-tone-warning);background:color-mix(in srgb,var(--cx-tone-warning) 12%,var(--cx-surface));border-color:transparent;}
286
+ .cx-badge.cx-tone-danger{color:var(--cx-tone-danger);background:color-mix(in srgb,var(--cx-tone-danger) 12%,var(--cx-surface));border-color:transparent;}
287
+ .cx-badge.cx-tone-muted{color:var(--cx-muted);}
288
+ .cx-toned{color:var(--cx-t,inherit);}
289
+ .cx-badge.cx-toned{color:var(--cx-t,var(--cx-text));background:var(--cx-t-bg,color-mix(in srgb,var(--cx-t,var(--cx-text)) 12%,var(--cx-surface)));border-color:transparent;}
290
+ .cx-row[aria-selected="true"] :is(.cx-tone-muted,.cx-badge.cx-tone-muted){color:var(--cx-text);}
291
+ .cx-row.cx-detail{background:var(--cx-alt-bg);cursor:auto;contain:layout style;}
292
+ .cx-row.cx-detail > .cx-cell{align-items:stretch;padding:0;white-space:normal;overflow:visible;}
293
+ .cx-detail-body{overflow:auto;padding:var(--cx-size-8px) var(--cx-size-12px);}
294
+ .cx-row .cx-detail-body{
295
+ flex:none;position:sticky;left:var(--cx-detail-left,var(--cx-size-8px));height:100%;
296
+ width:max(var(--cx-size-12em),calc(var(--cx-view-w,100%) - var(--cx-detail-left,var(--cx-size-8px)) - var(--cx-size-8px)));
297
+ }
298
+ .cx-row.cx-detail-auto{min-height:var(--cx-row-h);}
299
+ .cx-detail-auto .cx-detail-body{height:auto;}
300
+ .cx-detail-table{width:100%;border-collapse:collapse;font-size:var(--cx-size-d92em);table-layout:fixed;}
301
+ .cx-detail-table caption{text-align:left;color:var(--cx-muted);padding-bottom:var(--cx-size-6px);}
302
+ .cx-detail-table th{text-align:left;font-weight:600;border-bottom:var(--cx-size-1px) solid var(--cx-line-strong);padding:var(--cx-size-5px) var(--cx-size-8px);overflow-wrap:anywhere;}
303
+ .cx-detail-table td{padding:var(--cx-size-5px) var(--cx-size-8px);border-bottom:var(--cx-size-1px) solid var(--cx-row-line);vertical-align:top;overflow-wrap:anywhere;}
304
+ .cx-props{display:grid;grid-template-columns:max-content 1fr;gap:var(--cx-size-2px) var(--cx-size-16px);margin:0;font-size:var(--cx-size-d92em);}
305
+ .cx-props dt{color:var(--cx-muted);}
306
+ .cx-props dd{margin:0;overflow-wrap:anywhere;}
307
+ .cx-outline{display:none;}
308
+ .cx-outline-table{border-collapse:collapse;font-size:var(--cx-size-11px);}
309
+ .cx-outline-table td,.cx-outline-table th{border:var(--cx-size-1px) solid var(--cx-control-border);padding:var(--cx-size-1px) var(--cx-size-4px);text-align:left;}
310
+ @media print{
311
+ .cx-host,.cx-host[data-cx-theme],.cx-static,.cx-static[data-cx-theme]{
312
+ --cx-surface:#ffffff;--cx-text:#16181c;--cx-accent:#11776f;--cx-line:#e2e4e7;
313
+ --cx-tone-info:#0a728b;--cx-tone-success:#177345;--cx-tone-warning:#8c5c05;--cx-tone-danger:#b8292a;
314
+ color-scheme:light;height:auto !important;color:var(--cx-text);background:var(--cx-surface);
315
+ }
316
+ .cx-outline-table{color:var(--cx-text);background:var(--cx-surface);}
317
+ .cx-grid,.cx-toolbar{display:none !important;}
318
+ .cx-outline{display:block;}
319
+ }
320
+ body.cx-page{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;}
321
+ body.cx-page > .cx-host,body.cx-page > .cx-main > .cx-host{height:var(--cx-size-100vh);padding:var(--cx-size-12px) var(--cx-size-16px);}
322
+ .cx-resize:focus{outline:var(--cx-size-2px) solid var(--cx-accent);outline-offset:var(--cx-size-neg-2px);}
323
+ @media (forced-colors:active){
324
+ .cx-row[aria-selected="true"],.cx-result[aria-selected="true"]{border:var(--cx-size-1px) solid Highlight;}
325
+ }