@avento-space/ts-ui 1.2.1 → 1.2.3
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/README.md +123 -213
- package/dist/{form.wc-CwjVsdUu.d.ts → card.wc-CLzyZAbJ.d.ts} +110 -1
- package/dist/{chunk-PRZASPFU.js → chunk-2UKGVIH2.js} +616 -259
- package/dist/chunk-2UKGVIH2.js.map +1 -0
- package/dist/chunk-NJHLJNRI.js +4983 -0
- package/dist/chunk-NJHLJNRI.js.map +1 -0
- package/dist/{chunk-DO3PEBDS.js → chunk-NUMML2ZR.js} +6 -4
- package/dist/chunk-NUMML2ZR.js.map +1 -0
- package/dist/{chunk-NJAZMTMT.js → chunk-PIXJHFME.js} +618 -116
- package/dist/chunk-PIXJHFME.js.map +1 -0
- package/dist/chunk-T7QLIHHU.js +3 -0
- package/dist/{chunk-MFONNOJU.js.map → chunk-T7QLIHHU.js.map} +1 -1
- package/dist/components/index.d.ts +1 -1
- package/dist/components/index.js +3 -3
- package/dist/define.js +4 -4
- package/dist/icons/index.js +2 -2
- package/dist/index.d.ts +1 -1
- package/dist/index.js +5 -5
- package/dist/react/index.d.ts +7 -4
- package/dist/react/index.js +84 -11
- package/dist/react/index.js.map +1 -1
- package/package.json +9 -5
- package/dist/chunk-42QSY3LJ.js +0 -4855
- package/dist/chunk-42QSY3LJ.js.map +0 -1
- package/dist/chunk-DO3PEBDS.js.map +0 -1
- package/dist/chunk-MFONNOJU.js +0 -3
- package/dist/chunk-NJAZMTMT.js.map +0 -1
- package/dist/chunk-PRZASPFU.js.map +0 -1
|
@@ -1,5 +1,55 @@
|
|
|
1
1
|
import { effect } from './chunk-Q5RCPPCF.js';
|
|
2
2
|
|
|
3
|
+
// src/core/tokens.ts
|
|
4
|
+
var sheet = new CSSStyleSheet();
|
|
5
|
+
sheet.replaceSync(`
|
|
6
|
+
:host {
|
|
7
|
+
--u-color-primary: #3b82f6;
|
|
8
|
+
--u-color-primary-hover: #2563eb;
|
|
9
|
+
--u-color-primary-text: #2563eb;
|
|
10
|
+
--u-color-danger: #ef4444;
|
|
11
|
+
--u-color-danger-hover: #dc2626;
|
|
12
|
+
--u-color-success: #16a34a;
|
|
13
|
+
--u-color-warning: #d97706;
|
|
14
|
+
--u-color-info: #0284c7;
|
|
15
|
+
--u-color-text: #111827;
|
|
16
|
+
--u-color-text-secondary: #374151;
|
|
17
|
+
--u-color-text-muted: #4b5563;
|
|
18
|
+
--u-color-text-disabled: #6b7280;
|
|
19
|
+
--u-color-border: #9ca3af;
|
|
20
|
+
--u-color-border-light: #d1d5db;
|
|
21
|
+
--u-color-border-lighter: #e5e7eb;
|
|
22
|
+
--u-color-bg: #fff;
|
|
23
|
+
--u-color-bg-muted: #f9fafb;
|
|
24
|
+
--u-color-bg-hover: #f3f4f6;
|
|
25
|
+
--u-color-bg-selected: #eff6ff;
|
|
26
|
+
--u-color-focus: #3b82f6;
|
|
27
|
+
--u-color-overlay: rgba(0,0,0,0.5);
|
|
28
|
+
--u-radius-sm: 4px;
|
|
29
|
+
--u-radius-md: 6px;
|
|
30
|
+
--u-radius-lg: 8px;
|
|
31
|
+
--u-radius-xl: 10px;
|
|
32
|
+
--u-radius-2xl: 12px;
|
|
33
|
+
--u-font-xs: 0.75rem;
|
|
34
|
+
--u-font-sm: 0.875rem;
|
|
35
|
+
--u-font-md: 1rem;
|
|
36
|
+
--u-font-lg: 1.125rem;
|
|
37
|
+
--u-shadow-sm: 0 1px 3px rgba(0,0,0,.05);
|
|
38
|
+
--u-shadow-md: 0 4px 16px rgba(0,0,0,.08);
|
|
39
|
+
--u-shadow-lg: 0 8px 24px rgba(0,0,0,.12);
|
|
40
|
+
--u-shadow-xl: 0 20px 60px rgba(0,0,0,.15);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
@media (prefers-reduced-motion: reduce) {
|
|
44
|
+
*, *::before, *::after {
|
|
45
|
+
animation-duration: 0.01ms !important;
|
|
46
|
+
animation-iteration-count: 1 !important;
|
|
47
|
+
transition-duration: 0.01ms !important;
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
`);
|
|
51
|
+
var globalStyles = sheet;
|
|
52
|
+
|
|
3
53
|
// src/core/element.ts
|
|
4
54
|
var nextId = 0;
|
|
5
55
|
var UElement = class extends HTMLElement {
|
|
@@ -8,6 +58,13 @@ var UElement = class extends HTMLElement {
|
|
|
8
58
|
this._cleanups = [];
|
|
9
59
|
this._id = ++nextId;
|
|
10
60
|
this._root = this.attachShadow({ mode: "open" });
|
|
61
|
+
try {
|
|
62
|
+
this._root.adoptedStyleSheets = [globalStyles];
|
|
63
|
+
} catch {
|
|
64
|
+
const style = document.createElement("style");
|
|
65
|
+
style.textContent = ":host {}";
|
|
66
|
+
this._root.appendChild(style);
|
|
67
|
+
}
|
|
11
68
|
}
|
|
12
69
|
connectedCallback() {
|
|
13
70
|
this._mount();
|
|
@@ -39,60 +96,60 @@ button {
|
|
|
39
96
|
font-size: 14px;
|
|
40
97
|
line-height: 1;
|
|
41
98
|
border: 1px solid transparent;
|
|
42
|
-
border-radius:
|
|
99
|
+
border-radius: var(--u-radius-md);
|
|
43
100
|
cursor: pointer;
|
|
44
101
|
display: inline-flex;
|
|
45
102
|
align-items: center;
|
|
46
103
|
justify-content: center;
|
|
47
104
|
gap: 6px;
|
|
48
|
-
transition: background-color .15s, opacity .15s;
|
|
105
|
+
transition: background-color .15s, opacity .15s, box-shadow .15s;
|
|
49
106
|
outline: none;
|
|
50
107
|
}
|
|
51
108
|
button:focus-visible {
|
|
52
|
-
box-shadow: 0 0 0 2px
|
|
109
|
+
box-shadow: 0 0 0 2px var(--u-color-focus);
|
|
53
110
|
}
|
|
54
111
|
button:disabled {
|
|
55
112
|
opacity: .5;
|
|
56
113
|
cursor: not-allowed;
|
|
57
114
|
}
|
|
58
115
|
.btn-primary {
|
|
59
|
-
background:
|
|
116
|
+
background: var(--u-color-primary);
|
|
60
117
|
color: #fff;
|
|
61
|
-
border-color:
|
|
118
|
+
border-color: var(--u-color-primary-hover);
|
|
62
119
|
}
|
|
63
120
|
.btn-primary:hover:not(:disabled) {
|
|
64
|
-
background:
|
|
121
|
+
background: var(--u-color-primary-hover);
|
|
65
122
|
}
|
|
66
123
|
.btn-secondary {
|
|
67
|
-
background:
|
|
68
|
-
color:
|
|
69
|
-
border-color:
|
|
124
|
+
background: var(--u-color-bg-hover);
|
|
125
|
+
color: var(--u-color-text-secondary);
|
|
126
|
+
border-color: var(--u-color-border);
|
|
70
127
|
}
|
|
71
128
|
.btn-secondary:hover:not(:disabled) {
|
|
72
129
|
background: #e5e7eb;
|
|
73
130
|
}
|
|
74
131
|
.btn-ghost {
|
|
75
132
|
background: transparent;
|
|
76
|
-
color:
|
|
133
|
+
color: var(--u-color-text-secondary);
|
|
77
134
|
border-color: transparent;
|
|
78
135
|
}
|
|
79
136
|
.btn-ghost:hover:not(:disabled) {
|
|
80
|
-
background:
|
|
137
|
+
background: var(--u-color-bg-hover);
|
|
81
138
|
}
|
|
82
139
|
.btn-danger {
|
|
83
|
-
background:
|
|
140
|
+
background: var(--u-color-danger);
|
|
84
141
|
color: #fff;
|
|
85
|
-
border-color:
|
|
142
|
+
border-color: var(--u-color-danger);
|
|
86
143
|
}
|
|
87
144
|
.btn-danger:hover:not(:disabled) {
|
|
88
|
-
background:
|
|
145
|
+
background: var(--u-color-danger-hover);
|
|
89
146
|
}
|
|
90
147
|
.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; }
|
|
91
148
|
.btn-md { height: 40px; padding: 0 16px; font-size: 14px; }
|
|
92
149
|
.btn-lg { height: 48px; padding: 0 24px; font-size: 16px; }
|
|
93
150
|
.btn-link {
|
|
94
151
|
background: transparent;
|
|
95
|
-
color: #
|
|
152
|
+
color: #2563eb;
|
|
96
153
|
border-color: transparent;
|
|
97
154
|
padding: 0;
|
|
98
155
|
height: auto;
|
|
@@ -127,23 +184,23 @@ input {
|
|
|
127
184
|
font-size: 14px;
|
|
128
185
|
line-height: 1.5;
|
|
129
186
|
padding: 8px 12px;
|
|
130
|
-
border: 1px solid
|
|
131
|
-
border-radius:
|
|
187
|
+
border: 1px solid var(--u-color-border-light);
|
|
188
|
+
border-radius: var(--u-radius-md);
|
|
132
189
|
outline: none;
|
|
133
190
|
width: 100%;
|
|
134
191
|
box-sizing: border-box;
|
|
135
|
-
background:
|
|
136
|
-
color:
|
|
192
|
+
background: var(--u-color-bg);
|
|
193
|
+
color: var(--u-color-text);
|
|
137
194
|
transition: border-color .15s;
|
|
138
195
|
}
|
|
139
|
-
input::placeholder { color:
|
|
196
|
+
input::placeholder { color: var(--u-color-text-muted); }
|
|
140
197
|
input:focus {
|
|
141
|
-
border-color: #
|
|
198
|
+
border-color: #2563eb;
|
|
142
199
|
box-shadow: 0 0 0 2px rgba(59,130,246,.25);
|
|
143
200
|
}
|
|
144
201
|
input:disabled {
|
|
145
|
-
background:
|
|
146
|
-
color:
|
|
202
|
+
background: var(--u-color-bg-muted);
|
|
203
|
+
color: var(--u-color-text-muted);
|
|
147
204
|
cursor: not-allowed;
|
|
148
205
|
}
|
|
149
206
|
`;
|
|
@@ -168,7 +225,7 @@ ul, ol {
|
|
|
168
225
|
.list-empty {
|
|
169
226
|
padding: 24px;
|
|
170
227
|
text-align: center;
|
|
171
|
-
color:
|
|
228
|
+
color: var(--u-color-text-muted);
|
|
172
229
|
}
|
|
173
230
|
`;
|
|
174
231
|
|
|
@@ -209,10 +266,10 @@ var textStyles = `
|
|
|
209
266
|
.text-semibold { font-weight: 600; }
|
|
210
267
|
.text-bold { font-weight: 700; }
|
|
211
268
|
.text-default { color: inherit; }
|
|
212
|
-
.text-muted { color:
|
|
213
|
-
.text-accent { color: #
|
|
214
|
-
.text-danger { color:
|
|
215
|
-
.text-success { color: #
|
|
269
|
+
.text-muted { color: var(--u-color-text-muted); }
|
|
270
|
+
.text-accent { color: #2563eb; }
|
|
271
|
+
.text-danger { color: var(--u-color-danger); }
|
|
272
|
+
.text-success { color: #16a34a; }
|
|
216
273
|
.text-left { text-align: left; }
|
|
217
274
|
.text-center { text-align: center; }
|
|
218
275
|
.text-right { text-align: right; }
|
|
@@ -260,7 +317,7 @@ var overlayStyles = `
|
|
|
260
317
|
[part="overlay"] {
|
|
261
318
|
position: fixed;
|
|
262
319
|
inset: 0;
|
|
263
|
-
background:
|
|
320
|
+
background: var(--u-color-overlay);
|
|
264
321
|
display: flex;
|
|
265
322
|
align-items: center;
|
|
266
323
|
justify-content: center;
|
|
@@ -286,11 +343,11 @@ var fieldStyles = `
|
|
|
286
343
|
.field-label {
|
|
287
344
|
font-size: 0.875rem;
|
|
288
345
|
font-weight: 500;
|
|
289
|
-
color:
|
|
346
|
+
color: var(--u-color-text-secondary);
|
|
290
347
|
}
|
|
291
348
|
.field-label-required::after {
|
|
292
349
|
content: ' *';
|
|
293
|
-
color:
|
|
350
|
+
color: var(--u-color-danger);
|
|
294
351
|
}
|
|
295
352
|
.field-content {
|
|
296
353
|
display: flex;
|
|
@@ -298,11 +355,11 @@ var fieldStyles = `
|
|
|
298
355
|
}
|
|
299
356
|
.field-hint {
|
|
300
357
|
font-size: 0.75rem;
|
|
301
|
-
color:
|
|
358
|
+
color: var(--u-color-text-muted);
|
|
302
359
|
}
|
|
303
360
|
.field-error {
|
|
304
361
|
font-size: 0.75rem;
|
|
305
|
-
color:
|
|
362
|
+
color: var(--u-color-danger);
|
|
306
363
|
}
|
|
307
364
|
.hidden {
|
|
308
365
|
display: none;
|
|
@@ -321,6 +378,7 @@ var checkboxStyles = `
|
|
|
321
378
|
gap: 8px;
|
|
322
379
|
cursor: pointer;
|
|
323
380
|
}
|
|
381
|
+
:host(:focus-visible) .checkbox-indicator { outline: 2px solid var(--u-color-focus); outline-offset: 2px; }
|
|
324
382
|
input {
|
|
325
383
|
position: absolute;
|
|
326
384
|
opacity: 0;
|
|
@@ -334,15 +392,15 @@ input {
|
|
|
334
392
|
justify-content: center;
|
|
335
393
|
width: 18px;
|
|
336
394
|
height: 18px;
|
|
337
|
-
border: 2px solid
|
|
338
|
-
border-radius:
|
|
395
|
+
border: 2px solid var(--u-color-border);
|
|
396
|
+
border-radius: var(--u-radius-sm);
|
|
339
397
|
transition: all .15s;
|
|
340
398
|
flex-shrink: 0;
|
|
341
399
|
box-sizing: border-box;
|
|
342
400
|
}
|
|
343
401
|
.checkbox-indicator.checked {
|
|
344
|
-
background:
|
|
345
|
-
border-color:
|
|
402
|
+
background: var(--u-color-primary);
|
|
403
|
+
border-color: var(--u-color-primary-hover);
|
|
346
404
|
color: #fff;
|
|
347
405
|
}
|
|
348
406
|
.checkbox-indicator svg {
|
|
@@ -354,7 +412,7 @@ input {
|
|
|
354
412
|
}
|
|
355
413
|
.checkbox-label {
|
|
356
414
|
font-size: 0.875rem;
|
|
357
|
-
color:
|
|
415
|
+
color: var(--u-color-text-secondary);
|
|
358
416
|
}
|
|
359
417
|
:host([disabled]) [part="checkbox"] {
|
|
360
418
|
opacity: 0.5;
|
|
@@ -378,32 +436,32 @@ var selectStyles = `
|
|
|
378
436
|
font-size: 14px;
|
|
379
437
|
line-height: 1.5;
|
|
380
438
|
padding: 8px 32px 8px 12px;
|
|
381
|
-
border: 1px solid
|
|
382
|
-
border-radius:
|
|
439
|
+
border: 1px solid var(--u-color-border-light);
|
|
440
|
+
border-radius: var(--u-radius-md);
|
|
383
441
|
outline: none;
|
|
384
442
|
width: 100%;
|
|
385
443
|
box-sizing: border-box;
|
|
386
|
-
background:
|
|
387
|
-
color:
|
|
444
|
+
background: var(--u-color-bg);
|
|
445
|
+
color: var(--u-color-text);
|
|
388
446
|
transition: border-color .15s;
|
|
389
447
|
appearance: none;
|
|
390
448
|
-webkit-appearance: none;
|
|
391
449
|
cursor: pointer;
|
|
392
450
|
}
|
|
393
451
|
.select:focus {
|
|
394
|
-
border-color: #
|
|
452
|
+
border-color: #2563eb;
|
|
395
453
|
box-shadow: 0 0 0 2px rgba(59,130,246,.25);
|
|
396
454
|
}
|
|
397
455
|
.select:disabled {
|
|
398
|
-
background:
|
|
399
|
-
color:
|
|
456
|
+
background: var(--u-color-bg-muted);
|
|
457
|
+
color: var(--u-color-text-muted);
|
|
400
458
|
cursor: not-allowed;
|
|
401
459
|
}
|
|
402
460
|
.select-arrow {
|
|
403
461
|
position: absolute;
|
|
404
462
|
right: 8px;
|
|
405
463
|
pointer-events: none;
|
|
406
|
-
color:
|
|
464
|
+
color: var(--u-color-text-muted);
|
|
407
465
|
display: flex;
|
|
408
466
|
align-items: center;
|
|
409
467
|
}
|
|
@@ -424,21 +482,21 @@ var linkStyles = `
|
|
|
424
482
|
border-radius: 2px;
|
|
425
483
|
}
|
|
426
484
|
[part="link"]:focus-visible {
|
|
427
|
-
outline: 2px solid
|
|
485
|
+
outline: 2px solid var(--u-color-focus);
|
|
428
486
|
outline-offset: 2px;
|
|
429
487
|
}
|
|
430
|
-
.link-default { color: #
|
|
488
|
+
.link-default { color: #2563eb; }
|
|
431
489
|
.link-default:hover { color: #2563eb; text-decoration: underline; }
|
|
432
|
-
.link-accent { color:
|
|
433
|
-
.link-accent:hover { color:
|
|
434
|
-
.link-muted { color:
|
|
435
|
-
.link-muted:hover { color:
|
|
436
|
-
.link-danger { color:
|
|
437
|
-
.link-danger:hover { color:
|
|
490
|
+
.link-accent { color: var(--u-color-text-secondary); font-weight: 500; }
|
|
491
|
+
.link-accent:hover { color: var(--u-color-text); text-decoration: underline; }
|
|
492
|
+
.link-muted { color: var(--u-color-text-muted); }
|
|
493
|
+
.link-muted:hover { color: var(--u-color-text-secondary); text-decoration: underline; }
|
|
494
|
+
.link-danger { color: var(--u-color-danger); }
|
|
495
|
+
.link-danger:hover { color: var(--u-color-danger-hover); text-decoration: underline; }
|
|
438
496
|
.link-underline-always { text-decoration: underline; }
|
|
439
497
|
.link-underline-none:hover { text-decoration: none; }
|
|
440
498
|
.link-disabled {
|
|
441
|
-
color:
|
|
499
|
+
color: var(--u-color-text-muted) !important;
|
|
442
500
|
cursor: not-allowed;
|
|
443
501
|
pointer-events: none;
|
|
444
502
|
text-decoration: none !important;
|
|
@@ -481,7 +539,7 @@ var tooltipStyles = `
|
|
|
481
539
|
color: #fff;
|
|
482
540
|
font-size: 0.75rem;
|
|
483
541
|
padding: 6px 10px;
|
|
484
|
-
border-radius:
|
|
542
|
+
border-radius: var(--u-radius-md);
|
|
485
543
|
pointer-events: none;
|
|
486
544
|
line-height: 1.4;
|
|
487
545
|
max-width: 200px;
|
|
@@ -519,25 +577,25 @@ textarea {
|
|
|
519
577
|
font-size: 14px;
|
|
520
578
|
line-height: 1.5;
|
|
521
579
|
padding: 8px 12px;
|
|
522
|
-
border: 1px solid
|
|
523
|
-
border-radius:
|
|
580
|
+
border: 1px solid var(--u-color-border-light);
|
|
581
|
+
border-radius: var(--u-radius-md);
|
|
524
582
|
outline: none;
|
|
525
583
|
width: 100%;
|
|
526
584
|
box-sizing: border-box;
|
|
527
|
-
background:
|
|
528
|
-
color:
|
|
585
|
+
background: var(--u-color-bg);
|
|
586
|
+
color: var(--u-color-text);
|
|
529
587
|
transition: border-color .15s;
|
|
530
588
|
resize: vertical;
|
|
531
589
|
min-height: 60px;
|
|
532
590
|
}
|
|
533
|
-
textarea::placeholder { color:
|
|
591
|
+
textarea::placeholder { color: var(--u-color-text-muted); }
|
|
534
592
|
textarea:focus {
|
|
535
|
-
border-color: #
|
|
593
|
+
border-color: #2563eb;
|
|
536
594
|
box-shadow: 0 0 0 2px rgba(59,130,246,.25);
|
|
537
595
|
}
|
|
538
596
|
textarea:disabled {
|
|
539
|
-
background:
|
|
540
|
-
color:
|
|
597
|
+
background: var(--u-color-bg-muted);
|
|
598
|
+
color: var(--u-color-text-muted);
|
|
541
599
|
cursor: not-allowed;
|
|
542
600
|
}
|
|
543
601
|
`;
|
|
@@ -556,8 +614,9 @@ var radioStyles = `
|
|
|
556
614
|
gap: 8px;
|
|
557
615
|
cursor: pointer;
|
|
558
616
|
font-size: 0.875rem;
|
|
559
|
-
color:
|
|
617
|
+
color: var(--u-color-text-secondary);
|
|
560
618
|
}
|
|
619
|
+
:host(:focus-visible) .radio-circle { outline: 2px solid var(--u-color-focus); outline-offset: 2px; }
|
|
561
620
|
input[type="radio"] {
|
|
562
621
|
position: absolute;
|
|
563
622
|
opacity: 0;
|
|
@@ -571,15 +630,15 @@ input[type="radio"] {
|
|
|
571
630
|
justify-content: center;
|
|
572
631
|
width: 18px;
|
|
573
632
|
height: 18px;
|
|
574
|
-
border: 2px solid
|
|
633
|
+
border: 2px solid var(--u-color-border);
|
|
575
634
|
border-radius: 50%;
|
|
576
635
|
transition: all .15s;
|
|
577
636
|
flex-shrink: 0;
|
|
578
637
|
box-sizing: border-box;
|
|
579
638
|
}
|
|
580
639
|
.radio-circle.checked {
|
|
581
|
-
border-color:
|
|
582
|
-
background:
|
|
640
|
+
border-color: var(--u-color-primary-hover);
|
|
641
|
+
background: var(--u-color-primary);
|
|
583
642
|
box-shadow: inset 0 0 0 3px #fff;
|
|
584
643
|
}
|
|
585
644
|
:host([disabled]) [part="radio"] {
|
|
@@ -597,6 +656,7 @@ var switchStyles = `
|
|
|
597
656
|
display: inline-flex;
|
|
598
657
|
cursor: pointer;
|
|
599
658
|
}
|
|
659
|
+
:host(:focus-visible) .switch-track { outline: 2px solid var(--u-color-focus); outline-offset: 3px; }
|
|
600
660
|
input {
|
|
601
661
|
position: absolute;
|
|
602
662
|
opacity: 0;
|
|
@@ -607,13 +667,13 @@ input {
|
|
|
607
667
|
.switch-track {
|
|
608
668
|
width: 40px;
|
|
609
669
|
height: 22px;
|
|
610
|
-
background: #
|
|
670
|
+
background: #9ca3af;
|
|
611
671
|
border-radius: 11px;
|
|
612
672
|
position: relative;
|
|
613
673
|
transition: background .2s;
|
|
614
674
|
}
|
|
615
675
|
.switch-track.checked {
|
|
616
|
-
background:
|
|
676
|
+
background: var(--u-color-primary);
|
|
617
677
|
}
|
|
618
678
|
.switch-thumb {
|
|
619
679
|
position: absolute;
|
|
@@ -621,7 +681,7 @@ input {
|
|
|
621
681
|
left: 2px;
|
|
622
682
|
width: 18px;
|
|
623
683
|
height: 18px;
|
|
624
|
-
background:
|
|
684
|
+
background: var(--u-color-bg);
|
|
625
685
|
border-radius: 50%;
|
|
626
686
|
transition: transform .2s;
|
|
627
687
|
box-shadow: 0 1px 2px rgba(0,0,0,.15);
|
|
@@ -643,12 +703,12 @@ var labelStyles = `
|
|
|
643
703
|
[part="label"] {
|
|
644
704
|
font-size: 0.875rem;
|
|
645
705
|
font-weight: 500;
|
|
646
|
-
color:
|
|
706
|
+
color: var(--u-color-text-secondary);
|
|
647
707
|
cursor: default;
|
|
648
708
|
}
|
|
649
709
|
.label-required::after {
|
|
650
710
|
content: ' *';
|
|
651
|
-
color:
|
|
711
|
+
color: var(--u-color-danger);
|
|
652
712
|
}
|
|
653
713
|
`;
|
|
654
714
|
|
|
@@ -672,24 +732,25 @@ var treeStyles = `
|
|
|
672
732
|
gap: 4px;
|
|
673
733
|
padding: 4px 8px;
|
|
674
734
|
cursor: pointer;
|
|
675
|
-
border-radius:
|
|
735
|
+
border-radius: var(--u-radius-sm);
|
|
676
736
|
}
|
|
737
|
+
.tree-row:focus-visible { outline: 2px solid var(--u-color-focus); outline-offset: -2px; }
|
|
677
738
|
.tree-row:hover {
|
|
678
|
-
background:
|
|
739
|
+
background: var(--u-color-bg-hover);
|
|
679
740
|
}
|
|
680
741
|
.tree-toggle {
|
|
681
742
|
width: 16px;
|
|
682
743
|
flex-shrink: 0;
|
|
683
744
|
text-align: center;
|
|
684
|
-
font-size:
|
|
685
|
-
color:
|
|
745
|
+
font-size: 12px;
|
|
746
|
+
color: var(--u-color-text-muted);
|
|
686
747
|
}
|
|
687
748
|
.tree-toggle-spacer {
|
|
688
749
|
width: 16px;
|
|
689
750
|
flex-shrink: 0;
|
|
690
751
|
}
|
|
691
752
|
.tree-label {
|
|
692
|
-
color:
|
|
753
|
+
color: var(--u-color-text-secondary);
|
|
693
754
|
}
|
|
694
755
|
.tree-children {
|
|
695
756
|
list-style: none;
|
|
@@ -715,26 +776,27 @@ var tableStyles = `
|
|
|
715
776
|
.table th {
|
|
716
777
|
text-align: left;
|
|
717
778
|
padding: 10px 12px;
|
|
718
|
-
border-bottom: 2px solid
|
|
779
|
+
border-bottom: 2px solid var(--u-color-border-lighter);
|
|
719
780
|
font-weight: 600;
|
|
720
|
-
color:
|
|
781
|
+
color: var(--u-color-text-secondary);
|
|
721
782
|
white-space: nowrap;
|
|
722
|
-
background:
|
|
783
|
+
background: var(--u-color-bg-muted);
|
|
723
784
|
}
|
|
724
785
|
.table th.sortable {
|
|
725
786
|
cursor: pointer;
|
|
726
787
|
user-select: none;
|
|
727
788
|
}
|
|
789
|
+
.table th.sortable:focus-visible { outline: 2px solid var(--u-color-focus); outline-offset: -2px; }
|
|
728
790
|
.table th.sortable:hover {
|
|
729
|
-
background:
|
|
791
|
+
background: var(--u-color-bg-hover);
|
|
730
792
|
}
|
|
731
793
|
.table td {
|
|
732
794
|
padding: 10px 12px;
|
|
733
|
-
border-bottom: 1px solid
|
|
734
|
-
color:
|
|
795
|
+
border-bottom: 1px solid var(--u-color-border-lighter);
|
|
796
|
+
color: var(--u-color-text-muted);
|
|
735
797
|
}
|
|
736
798
|
.table tr:hover td {
|
|
737
|
-
background:
|
|
799
|
+
background: var(--u-color-bg-muted);
|
|
738
800
|
}
|
|
739
801
|
`;
|
|
740
802
|
|
|
@@ -758,21 +820,22 @@ var breadcrumbStyles = `
|
|
|
758
820
|
display: flex;
|
|
759
821
|
align-items: center;
|
|
760
822
|
gap: 4px;
|
|
761
|
-
color:
|
|
823
|
+
color: var(--u-color-text-muted);
|
|
762
824
|
}
|
|
763
825
|
.breadcrumb-item a {
|
|
764
|
-
color:
|
|
826
|
+
color: var(--u-color-primary-text);
|
|
765
827
|
text-decoration: none;
|
|
766
828
|
}
|
|
829
|
+
.breadcrumb-item a:focus-visible { outline: 2px solid var(--u-color-focus); outline-offset: 2px; border-radius: 2px; }
|
|
767
830
|
.breadcrumb-item a:hover {
|
|
768
831
|
text-decoration: underline;
|
|
769
832
|
}
|
|
770
833
|
.breadcrumb-item[aria-current="page"] {
|
|
771
|
-
color:
|
|
834
|
+
color: var(--u-color-text);
|
|
772
835
|
font-weight: 500;
|
|
773
836
|
}
|
|
774
837
|
.breadcrumb-separator {
|
|
775
|
-
color:
|
|
838
|
+
color: var(--u-color-border-light);
|
|
776
839
|
margin: 0 2px;
|
|
777
840
|
}
|
|
778
841
|
`;
|
|
@@ -789,37 +852,113 @@ var tabsStyles = `
|
|
|
789
852
|
[part="tablist"] {
|
|
790
853
|
display: flex;
|
|
791
854
|
gap: 0;
|
|
792
|
-
|
|
855
|
+
position: relative;
|
|
856
|
+
outline: none;
|
|
857
|
+
}
|
|
858
|
+
.tablist-underline {
|
|
859
|
+
border-bottom: 1px solid var(--u-color-border-light);
|
|
860
|
+
}
|
|
861
|
+
.tablist-underline .tab-indicator {
|
|
862
|
+
position: absolute;
|
|
863
|
+
bottom: 0;
|
|
864
|
+
height: 2px;
|
|
865
|
+
background: var(--u-color-primary);
|
|
866
|
+
transition: left .2s ease, width .2s ease;
|
|
867
|
+
border-radius: 1px;
|
|
868
|
+
}
|
|
869
|
+
.tablist-pills {
|
|
870
|
+
gap: 4px;
|
|
871
|
+
flex-wrap: wrap;
|
|
872
|
+
}
|
|
873
|
+
.tablist-buttons {
|
|
874
|
+
gap: 4px;
|
|
875
|
+
flex-wrap: wrap;
|
|
876
|
+
}
|
|
877
|
+
.tablist-full {
|
|
878
|
+
width: 100%;
|
|
879
|
+
}
|
|
880
|
+
.tablist-full .tab-trigger {
|
|
881
|
+
flex: 1;
|
|
882
|
+
text-align: center;
|
|
793
883
|
}
|
|
794
884
|
.tab-trigger {
|
|
795
885
|
font-family: inherit;
|
|
796
886
|
font-size: 0.875rem;
|
|
797
887
|
padding: 10px 16px;
|
|
798
888
|
border: none;
|
|
799
|
-
border-bottom: 2px solid transparent;
|
|
800
889
|
background: none;
|
|
801
890
|
cursor: pointer;
|
|
802
|
-
color:
|
|
891
|
+
color: var(--u-color-text-muted);
|
|
803
892
|
transition: all .15s;
|
|
804
893
|
outline: none;
|
|
894
|
+
display: inline-flex;
|
|
895
|
+
align-items: center;
|
|
896
|
+
justify-content: center;
|
|
897
|
+
gap: 8px;
|
|
898
|
+
white-space: nowrap;
|
|
899
|
+
user-select: none;
|
|
900
|
+
position: relative;
|
|
901
|
+
border-radius: 0;
|
|
805
902
|
}
|
|
806
|
-
.tab-trigger:hover {
|
|
807
|
-
color:
|
|
903
|
+
.tab-trigger:hover:not(:disabled):not(.active) {
|
|
904
|
+
color: var(--u-color-text-secondary);
|
|
808
905
|
}
|
|
809
906
|
.tab-trigger.active {
|
|
810
|
-
color:
|
|
811
|
-
border-bottom-color: #3b82f6;
|
|
907
|
+
color: var(--u-color-primary-text);
|
|
812
908
|
font-weight: 500;
|
|
813
909
|
}
|
|
814
910
|
.tab-trigger:focus-visible {
|
|
815
|
-
|
|
816
|
-
|
|
911
|
+
box-shadow: inset 0 0 0 2px var(--u-color-focus);
|
|
912
|
+
}
|
|
913
|
+
.tab-trigger:disabled {
|
|
914
|
+
opacity: .4;
|
|
915
|
+
cursor: not-allowed;
|
|
916
|
+
}
|
|
917
|
+
.tab-trigger-icon {
|
|
918
|
+
display: inline-flex;
|
|
919
|
+
align-items: center;
|
|
920
|
+
justify-content: center;
|
|
921
|
+
width: 16px;
|
|
922
|
+
height: 16px;
|
|
923
|
+
flex-shrink: 0;
|
|
924
|
+
}
|
|
925
|
+
.tab-trigger-icon svg {
|
|
926
|
+
width: 16px;
|
|
927
|
+
height: 16px;
|
|
928
|
+
}
|
|
929
|
+
.tablist-pills .tab-trigger {
|
|
930
|
+
border-radius: 999px;
|
|
931
|
+
padding: 6px 14px;
|
|
932
|
+
}
|
|
933
|
+
.tablist-pills .tab-trigger:hover:not(:disabled) {
|
|
934
|
+
background: var(--u-color-bg-hover);
|
|
935
|
+
}
|
|
936
|
+
.tablist-pills .tab-trigger.active {
|
|
937
|
+
background: var(--u-color-bg-selected);
|
|
938
|
+
color: var(--u-color-primary-text);
|
|
939
|
+
}
|
|
940
|
+
.tablist-buttons .tab-trigger {
|
|
941
|
+
border-radius: var(--u-radius-md);
|
|
942
|
+
padding: 6px 14px;
|
|
943
|
+
}
|
|
944
|
+
.tablist-buttons .tab-trigger:hover:not(:disabled) {
|
|
945
|
+
background: var(--u-color-bg-hover);
|
|
946
|
+
}
|
|
947
|
+
.tablist-buttons .tab-trigger.active {
|
|
948
|
+
background: var(--u-color-primary);
|
|
949
|
+
color: #fff;
|
|
817
950
|
}
|
|
818
951
|
[part="tabpanels"] {
|
|
819
952
|
padding: 16px 0;
|
|
953
|
+
outline: none;
|
|
820
954
|
}
|
|
821
955
|
.tab-panel {
|
|
822
956
|
outline: none;
|
|
957
|
+
animation: u-tab-panel-in .15s ease;
|
|
958
|
+
}
|
|
959
|
+
@keyframes u-tab-panel-in {
|
|
960
|
+
from { opacity: 0; }
|
|
961
|
+
to { opacity: 1; }
|
|
823
962
|
}
|
|
824
963
|
`;
|
|
825
964
|
|
|
@@ -917,11 +1056,20 @@ var modalStyles = `
|
|
|
917
1056
|
:host {
|
|
918
1057
|
display: contents;
|
|
919
1058
|
}
|
|
1059
|
+
@keyframes u-modal-fade-in {
|
|
1060
|
+
from { opacity: 0; }
|
|
1061
|
+
to { opacity: 1; }
|
|
1062
|
+
}
|
|
1063
|
+
@keyframes u-modal-scale-in {
|
|
1064
|
+
from { opacity: 0; transform: scale(0.95) translateY(8px); }
|
|
1065
|
+
to { opacity: 1; transform: scale(1) translateY(0); }
|
|
1066
|
+
}
|
|
920
1067
|
.modal-backdrop {
|
|
921
1068
|
position: fixed;
|
|
922
1069
|
inset: 0;
|
|
923
|
-
background:
|
|
1070
|
+
background: var(--u-color-overlay);
|
|
924
1071
|
z-index: 9998;
|
|
1072
|
+
animation: u-modal-fade-in .15s ease;
|
|
925
1073
|
}
|
|
926
1074
|
.modal {
|
|
927
1075
|
position: fixed;
|
|
@@ -933,14 +1081,14 @@ var modalStyles = `
|
|
|
933
1081
|
padding: 16px;
|
|
934
1082
|
}
|
|
935
1083
|
.modal-wrapper {
|
|
936
|
-
background:
|
|
937
|
-
border-radius:
|
|
1084
|
+
background: var(--u-color-bg);
|
|
1085
|
+
border-radius: var(--u-radius-2xl);
|
|
938
1086
|
box-shadow: 0 20px 60px rgba(0,0,0,.15);
|
|
939
1087
|
display: flex;
|
|
940
1088
|
flex-direction: column;
|
|
941
1089
|
max-height: 85vh;
|
|
942
1090
|
width: 100%;
|
|
943
|
-
animation: u-scale-in .2s ease;
|
|
1091
|
+
animation: u-modal-scale-in .2s ease;
|
|
944
1092
|
}
|
|
945
1093
|
.modal-sm { max-width: 400px; }
|
|
946
1094
|
.modal-md { max-width: 500px; }
|
|
@@ -952,26 +1100,46 @@ var modalStyles = `
|
|
|
952
1100
|
align-items: center;
|
|
953
1101
|
justify-content: space-between;
|
|
954
1102
|
padding: 16px 20px;
|
|
955
|
-
border-bottom: 1px solid
|
|
1103
|
+
border-bottom: 1px solid var(--u-color-border-lighter);
|
|
1104
|
+
gap: 12px;
|
|
1105
|
+
}
|
|
1106
|
+
.modal-title {
|
|
956
1107
|
font-weight: 600;
|
|
957
1108
|
font-size: 1.125rem;
|
|
1109
|
+
color: var(--u-color-text);
|
|
1110
|
+
flex: 1;
|
|
1111
|
+
min-width: 0;
|
|
1112
|
+
overflow: hidden;
|
|
1113
|
+
text-overflow: ellipsis;
|
|
1114
|
+
white-space: nowrap;
|
|
958
1115
|
}
|
|
959
1116
|
.modal-close {
|
|
960
1117
|
background: none;
|
|
961
1118
|
border: none;
|
|
962
|
-
font-size: 1.5rem;
|
|
963
1119
|
cursor: pointer;
|
|
964
|
-
color:
|
|
965
|
-
padding:
|
|
1120
|
+
color: var(--u-color-text-muted);
|
|
1121
|
+
padding: 4px;
|
|
966
1122
|
line-height: 1;
|
|
1123
|
+
border-radius: var(--u-radius-md);
|
|
1124
|
+
display: inline-flex;
|
|
1125
|
+
align-items: center;
|
|
1126
|
+
justify-content: center;
|
|
1127
|
+
flex-shrink: 0;
|
|
1128
|
+
transition: color .15s, background .15s;
|
|
1129
|
+
}
|
|
1130
|
+
.modal-close:hover { color: var(--u-color-text-secondary); background: var(--u-color-bg-hover); }
|
|
1131
|
+
.modal-close:focus-visible { outline: 2px solid var(--u-color-focus); outline-offset: 2px; }
|
|
1132
|
+
.modal-close svg {
|
|
1133
|
+
width: 18px;
|
|
1134
|
+
height: 18px;
|
|
967
1135
|
}
|
|
968
|
-
.modal-close:hover { color: #374151; }
|
|
969
1136
|
.modal-content {
|
|
970
1137
|
padding: 20px;
|
|
971
1138
|
overflow-y: auto;
|
|
972
1139
|
flex: 1;
|
|
973
|
-
color:
|
|
1140
|
+
color: var(--u-color-text-secondary);
|
|
974
1141
|
font-size: 0.875rem;
|
|
1142
|
+
line-height: 1.6;
|
|
975
1143
|
}
|
|
976
1144
|
.modal-footer {
|
|
977
1145
|
display: flex;
|
|
@@ -979,7 +1147,11 @@ var modalStyles = `
|
|
|
979
1147
|
justify-content: flex-end;
|
|
980
1148
|
gap: 8px;
|
|
981
1149
|
padding: 12px 20px;
|
|
982
|
-
border-top: 1px solid
|
|
1150
|
+
border-top: 1px solid var(--u-color-border-lighter);
|
|
1151
|
+
}
|
|
1152
|
+
.modal-mobile.modal-wrapper {
|
|
1153
|
+
max-height: calc(100vh - 32px) !important;
|
|
1154
|
+
border-radius: var(--u-radius-xl);
|
|
983
1155
|
}
|
|
984
1156
|
`;
|
|
985
1157
|
|
|
@@ -991,7 +1163,7 @@ var drawerStyles = `
|
|
|
991
1163
|
.drawer-backdrop {
|
|
992
1164
|
position: fixed;
|
|
993
1165
|
inset: 0;
|
|
994
|
-
background:
|
|
1166
|
+
background: var(--u-color-overlay);
|
|
995
1167
|
z-index: 9998;
|
|
996
1168
|
}
|
|
997
1169
|
.drawer {
|
|
@@ -1003,22 +1175,22 @@ var drawerStyles = `
|
|
|
1003
1175
|
.drawer-top { top: 0; left: 0; width: 100%; }
|
|
1004
1176
|
.drawer-bottom { bottom: 0; left: 0; width: 100%; }
|
|
1005
1177
|
.drawer-content {
|
|
1006
|
-
background:
|
|
1178
|
+
background: var(--u-color-bg);
|
|
1007
1179
|
display: flex;
|
|
1008
1180
|
flex-direction: column;
|
|
1009
1181
|
box-shadow: 0 0 40px rgba(0,0,0,.1);
|
|
1010
1182
|
}
|
|
1011
|
-
.drawer-right .drawer-content { height: 100%; transform: translateX(100%); transition: transform .25s ease; border-radius:
|
|
1012
|
-
.drawer-left .drawer-content { height: 100%; transform: translateX(-100%); transition: transform .25s ease; border-radius: 0
|
|
1013
|
-
.drawer-top .drawer-content { width: 100%; transform: translateY(-100%); transition: transform .25s ease; border-radius: 0 0
|
|
1014
|
-
.drawer-bottom .drawer-content { width: 100%; transform: translateY(100%); transition: transform .25s ease; border-radius:
|
|
1183
|
+
.drawer-right .drawer-content { height: 100%; transform: translateX(100%); transition: transform .25s ease; border-radius: var(--u-radius-2xl) 0 0 var(--u-radius-2xl); }
|
|
1184
|
+
.drawer-left .drawer-content { height: 100%; transform: translateX(-100%); transition: transform .25s ease; border-radius: 0 var(--u-radius-2xl) var(--u-radius-2xl) 0; }
|
|
1185
|
+
.drawer-top .drawer-content { width: 100%; transform: translateY(-100%); transition: transform .25s ease; border-radius: 0 0 var(--u-radius-2xl) var(--u-radius-2xl); }
|
|
1186
|
+
.drawer-bottom .drawer-content { width: 100%; transform: translateY(100%); transition: transform .25s ease; border-radius: var(--u-radius-2xl) var(--u-radius-2xl) 0 0; }
|
|
1015
1187
|
.drawer-open .drawer-content { transform: translate(0,0); }
|
|
1016
1188
|
.drawer-header {
|
|
1017
1189
|
display: flex;
|
|
1018
1190
|
align-items: center;
|
|
1019
1191
|
justify-content: space-between;
|
|
1020
1192
|
padding: 16px 20px;
|
|
1021
|
-
border-bottom: 1px solid
|
|
1193
|
+
border-bottom: 1px solid var(--u-color-border-lighter);
|
|
1022
1194
|
font-weight: 600;
|
|
1023
1195
|
font-size: 1.125rem;
|
|
1024
1196
|
}
|
|
@@ -1027,13 +1199,14 @@ var drawerStyles = `
|
|
|
1027
1199
|
border: none;
|
|
1028
1200
|
font-size: 1.5rem;
|
|
1029
1201
|
cursor: pointer;
|
|
1030
|
-
color:
|
|
1202
|
+
color: var(--u-color-text-muted);
|
|
1031
1203
|
padding: 0;
|
|
1032
1204
|
line-height: 1;
|
|
1033
1205
|
}
|
|
1034
|
-
.drawer-close:
|
|
1035
|
-
.drawer-
|
|
1036
|
-
.drawer-
|
|
1206
|
+
.drawer-close:focus-visible { outline: 2px solid var(--u-color-focus); outline-offset: 2px; }
|
|
1207
|
+
.drawer-close:hover { color: var(--u-color-text-secondary); }
|
|
1208
|
+
.drawer-body { padding: 20px; overflow-y: auto; flex: 1; color: var(--u-color-text-muted); font-size: 0.875rem; }
|
|
1209
|
+
.drawer-footer { padding: 12px 20px; border-top: 1px solid var(--u-color-border-lighter); display: flex; gap: 8px; justify-content: flex-end; }
|
|
1037
1210
|
`;
|
|
1038
1211
|
|
|
1039
1212
|
// src/components/styles/popover.ts
|
|
@@ -1051,12 +1224,12 @@ var popoverStyles = `
|
|
|
1051
1224
|
filter: drop-shadow(0 8px 24px rgba(0,0,0,.14));
|
|
1052
1225
|
}
|
|
1053
1226
|
.popover-content {
|
|
1054
|
-
background:
|
|
1055
|
-
border: 1px solid
|
|
1056
|
-
border-radius:
|
|
1227
|
+
background: var(--u-color-bg);
|
|
1228
|
+
border: 1px solid var(--u-color-border-light);
|
|
1229
|
+
border-radius: var(--u-radius-xl);
|
|
1057
1230
|
padding: 8px;
|
|
1058
1231
|
font-size: 0.875rem;
|
|
1059
|
-
color:
|
|
1232
|
+
color: var(--u-color-text-secondary);
|
|
1060
1233
|
min-width: 160px;
|
|
1061
1234
|
animation: u-popover-in .15s ease;
|
|
1062
1235
|
}
|
|
@@ -1068,8 +1241,8 @@ var popoverStyles = `
|
|
|
1068
1241
|
position: absolute;
|
|
1069
1242
|
width: 10px;
|
|
1070
1243
|
height: 10px;
|
|
1071
|
-
background:
|
|
1072
|
-
border: 1px solid
|
|
1244
|
+
background: var(--u-color-bg);
|
|
1245
|
+
border: 1px solid var(--u-color-border-light);
|
|
1073
1246
|
transform: rotate(45deg);
|
|
1074
1247
|
z-index: -1;
|
|
1075
1248
|
}
|
|
@@ -1091,9 +1264,9 @@ var dropdownStyles = `
|
|
|
1091
1264
|
.dropdown-menu {
|
|
1092
1265
|
position: fixed;
|
|
1093
1266
|
z-index: 99999;
|
|
1094
|
-
background:
|
|
1095
|
-
border: 1px solid
|
|
1096
|
-
border-radius:
|
|
1267
|
+
background: var(--u-color-bg);
|
|
1268
|
+
border: 1px solid var(--u-color-border-light);
|
|
1269
|
+
border-radius: var(--u-radius-xl);
|
|
1097
1270
|
box-shadow: 0 8px 24px rgba(0,0,0,.14);
|
|
1098
1271
|
padding: 4px;
|
|
1099
1272
|
min-width: 180px;
|
|
@@ -1115,9 +1288,9 @@ var dropdownStyles = `
|
|
|
1115
1288
|
border: none;
|
|
1116
1289
|
background: none;
|
|
1117
1290
|
cursor: pointer;
|
|
1118
|
-
color:
|
|
1291
|
+
color: var(--u-color-text-secondary);
|
|
1119
1292
|
text-align: left;
|
|
1120
|
-
border-radius:
|
|
1293
|
+
border-radius: var(--u-radius-md);
|
|
1121
1294
|
transition: background .1s;
|
|
1122
1295
|
display: flex;
|
|
1123
1296
|
align-items: center;
|
|
@@ -1125,11 +1298,11 @@ var dropdownStyles = `
|
|
|
1125
1298
|
width: 100%;
|
|
1126
1299
|
box-sizing: border-box;
|
|
1127
1300
|
}
|
|
1128
|
-
.dropdown-item:hover { background:
|
|
1129
|
-
.dropdown-item:focus-visible {
|
|
1130
|
-
.dropdown-item.selected { color:
|
|
1301
|
+
.dropdown-item:hover { background: var(--u-color-bg-hover); }
|
|
1302
|
+
.dropdown-item:focus-visible { box-shadow: 0 0 0 2px var(--u-color-focus); }
|
|
1303
|
+
.dropdown-item.selected { color: var(--u-color-primary-hover); font-weight: 500; background: var(--u-color-bg-selected); }
|
|
1131
1304
|
.dropdown-item:disabled { opacity: 0.4; cursor: not-allowed; }
|
|
1132
|
-
.dropdown-item-active { background:
|
|
1305
|
+
.dropdown-item-active { background: var(--u-color-bg-selected); color: var(--u-color-primary-hover); }
|
|
1133
1306
|
.dropdown-item-icon {
|
|
1134
1307
|
width: 16px;
|
|
1135
1308
|
height: 16px;
|
|
@@ -1137,7 +1310,7 @@ var dropdownStyles = `
|
|
|
1137
1310
|
display: inline-flex;
|
|
1138
1311
|
align-items: center;
|
|
1139
1312
|
justify-content: center;
|
|
1140
|
-
color:
|
|
1313
|
+
color: var(--u-color-text-muted);
|
|
1141
1314
|
}
|
|
1142
1315
|
.dropdown-item-icon svg {
|
|
1143
1316
|
width: 16px;
|
|
@@ -1154,28 +1327,28 @@ var dropdownStyles = `
|
|
|
1154
1327
|
.dropdown-item-desc {
|
|
1155
1328
|
display: block;
|
|
1156
1329
|
font-size: 0.75rem;
|
|
1157
|
-
color:
|
|
1330
|
+
color: var(--u-color-text-muted);
|
|
1158
1331
|
line-height: 1.3;
|
|
1159
1332
|
margin-top: 1px;
|
|
1160
1333
|
}
|
|
1161
1334
|
.dropdown-item-shortcut {
|
|
1162
|
-
font-size: 0.
|
|
1163
|
-
color:
|
|
1335
|
+
font-size: 0.75rem;
|
|
1336
|
+
color: var(--u-color-text-muted);
|
|
1164
1337
|
padding: 2px 6px;
|
|
1165
|
-
background:
|
|
1166
|
-
border-radius:
|
|
1338
|
+
background: var(--u-color-bg-hover);
|
|
1339
|
+
border-radius: var(--u-radius-sm);
|
|
1167
1340
|
font-family: inherit;
|
|
1168
1341
|
flex-shrink: 0;
|
|
1169
1342
|
}
|
|
1170
1343
|
.dropdown-group-label {
|
|
1171
|
-
font-size: 0.
|
|
1344
|
+
font-size: 0.75rem;
|
|
1172
1345
|
font-weight: 600;
|
|
1173
|
-
color:
|
|
1346
|
+
color: var(--u-color-text-muted);
|
|
1174
1347
|
text-transform: uppercase;
|
|
1175
1348
|
letter-spacing: 0.05em;
|
|
1176
1349
|
padding: 8px 12px 4px;
|
|
1177
1350
|
}
|
|
1178
|
-
.dropdown-divider { height: 1px; background:
|
|
1351
|
+
.dropdown-divider { height: 1px; background: var(--u-color-bg-hover); margin: 4px 0; }
|
|
1179
1352
|
`;
|
|
1180
1353
|
|
|
1181
1354
|
// src/components/styles/accordion.ts
|
|
@@ -1184,12 +1357,12 @@ var accordionStyles = `
|
|
|
1184
1357
|
display: block;
|
|
1185
1358
|
}
|
|
1186
1359
|
[part="accordion"] {
|
|
1187
|
-
border: 1px solid
|
|
1188
|
-
border-radius:
|
|
1360
|
+
border: 1px solid var(--u-color-border);
|
|
1361
|
+
border-radius: var(--u-radius-lg);
|
|
1189
1362
|
overflow: hidden;
|
|
1190
1363
|
}
|
|
1191
1364
|
.accordion-item {
|
|
1192
|
-
border-bottom: 1px solid
|
|
1365
|
+
border-bottom: 1px solid var(--u-color-border-lighter);
|
|
1193
1366
|
}
|
|
1194
1367
|
.accordion-item:last-child { border-bottom: none; }
|
|
1195
1368
|
.accordion-header {
|
|
@@ -1200,15 +1373,16 @@ var accordionStyles = `
|
|
|
1200
1373
|
cursor: pointer;
|
|
1201
1374
|
font-weight: 500;
|
|
1202
1375
|
font-size: 0.875rem;
|
|
1203
|
-
color:
|
|
1376
|
+
color: var(--u-color-text-secondary);
|
|
1204
1377
|
transition: background .15s;
|
|
1205
1378
|
user-select: none;
|
|
1206
1379
|
}
|
|
1207
|
-
.accordion-header:
|
|
1380
|
+
.accordion-header:focus-visible { box-shadow: 0 0 0 2px var(--u-color-focus); }
|
|
1381
|
+
.accordion-header:hover { background: var(--u-color-bg-muted); }
|
|
1208
1382
|
.accordion-icon {
|
|
1209
1383
|
transition: transform .2s;
|
|
1210
1384
|
font-size: 12px;
|
|
1211
|
-
color:
|
|
1385
|
+
color: var(--u-color-text-muted);
|
|
1212
1386
|
}
|
|
1213
1387
|
.accordion-item[open] .accordion-icon { transform: rotate(180deg); }
|
|
1214
1388
|
.accordion-content {
|
|
@@ -1218,7 +1392,7 @@ var accordionStyles = `
|
|
|
1218
1392
|
.accordion-body {
|
|
1219
1393
|
padding: 0 16px 12px;
|
|
1220
1394
|
font-size: 0.875rem;
|
|
1221
|
-
color:
|
|
1395
|
+
color: var(--u-color-text-muted);
|
|
1222
1396
|
}
|
|
1223
1397
|
`;
|
|
1224
1398
|
|
|
@@ -1230,8 +1404,8 @@ var calendarStyles = `
|
|
|
1230
1404
|
.calendar {
|
|
1231
1405
|
font-size: 0.875rem;
|
|
1232
1406
|
width: 280px;
|
|
1233
|
-
background:
|
|
1234
|
-
border-radius:
|
|
1407
|
+
background: var(--u-color-bg);
|
|
1408
|
+
border-radius: var(--u-radius-lg);
|
|
1235
1409
|
box-shadow: 0 4px 20px rgba(0,0,0,.08);
|
|
1236
1410
|
padding: 16px;
|
|
1237
1411
|
}
|
|
@@ -1243,12 +1417,12 @@ var calendarStyles = `
|
|
|
1243
1417
|
}
|
|
1244
1418
|
.cal-title {
|
|
1245
1419
|
font-weight: 600;
|
|
1246
|
-
color:
|
|
1420
|
+
color: var(--u-color-text);
|
|
1247
1421
|
}
|
|
1248
1422
|
.cal-nav-btn {
|
|
1249
1423
|
background: none;
|
|
1250
|
-
border: 1px solid
|
|
1251
|
-
border-radius:
|
|
1424
|
+
border: 1px solid var(--u-color-border);
|
|
1425
|
+
border-radius: var(--u-radius-md);
|
|
1252
1426
|
width: 32px;
|
|
1253
1427
|
height: 32px;
|
|
1254
1428
|
cursor: pointer;
|
|
@@ -1256,19 +1430,20 @@ var calendarStyles = `
|
|
|
1256
1430
|
display: flex;
|
|
1257
1431
|
align-items: center;
|
|
1258
1432
|
justify-content: center;
|
|
1259
|
-
color:
|
|
1433
|
+
color: var(--u-color-text-muted);
|
|
1260
1434
|
transition: all .15s;
|
|
1261
1435
|
}
|
|
1436
|
+
.cal-nav-btn:focus-visible { box-shadow: 0 0 0 2px var(--u-color-focus); }
|
|
1262
1437
|
.cal-nav-btn:hover {
|
|
1263
|
-
background:
|
|
1264
|
-
color:
|
|
1438
|
+
background: var(--u-color-bg-hover);
|
|
1439
|
+
color: var(--u-color-text-secondary);
|
|
1265
1440
|
}
|
|
1266
1441
|
.cal-day-names {
|
|
1267
1442
|
display: grid;
|
|
1268
1443
|
grid-template-columns: repeat(7, 1fr);
|
|
1269
1444
|
text-align: center;
|
|
1270
1445
|
font-size: 0.75rem;
|
|
1271
|
-
color:
|
|
1446
|
+
color: var(--u-color-text-muted);
|
|
1272
1447
|
font-weight: 500;
|
|
1273
1448
|
margin-bottom: 8px;
|
|
1274
1449
|
}
|
|
@@ -1283,20 +1458,21 @@ var calendarStyles = `
|
|
|
1283
1458
|
.cal-day {
|
|
1284
1459
|
background: none;
|
|
1285
1460
|
border: none;
|
|
1286
|
-
border-radius:
|
|
1461
|
+
border-radius: var(--u-radius-md);
|
|
1287
1462
|
width: 100%;
|
|
1288
1463
|
aspect-ratio: 1;
|
|
1289
1464
|
cursor: pointer;
|
|
1290
1465
|
font-size: 0.875rem;
|
|
1291
|
-
color:
|
|
1466
|
+
color: var(--u-color-text-secondary);
|
|
1292
1467
|
transition: all .1s;
|
|
1293
1468
|
font-family: inherit;
|
|
1294
1469
|
}
|
|
1295
|
-
.cal-day:
|
|
1470
|
+
.cal-day:focus-visible { outline: 2px solid var(--u-color-focus); outline-offset: -2px; }
|
|
1471
|
+
.cal-day:hover { background: var(--u-color-bg-hover); }
|
|
1296
1472
|
.cal-day-empty { pointer-events: none; }
|
|
1297
|
-
.cal-today { font-weight: 600; color:
|
|
1298
|
-
.cal-selected { background:
|
|
1299
|
-
.cal-selected:hover { background:
|
|
1473
|
+
.cal-today { font-weight: 600; color: var(--u-color-primary-text); }
|
|
1474
|
+
.cal-selected { background: var(--u-color-primary); color: #fff; font-weight: 600; }
|
|
1475
|
+
.cal-selected:hover { background: var(--u-color-primary-hover); }
|
|
1300
1476
|
.cal-disabled { opacity: 0.3; pointer-events: none; }
|
|
1301
1477
|
`;
|
|
1302
1478
|
|
|
@@ -1307,8 +1483,8 @@ var dataTableStyles = `
|
|
|
1307
1483
|
}
|
|
1308
1484
|
.data-table {
|
|
1309
1485
|
font-size: 0.875rem;
|
|
1310
|
-
border: 1px solid
|
|
1311
|
-
border-radius:
|
|
1486
|
+
border: 1px solid var(--u-color-border);
|
|
1487
|
+
border-radius: var(--u-radius-lg);
|
|
1312
1488
|
overflow: hidden;
|
|
1313
1489
|
}
|
|
1314
1490
|
.dt-toolbar {
|
|
@@ -1316,60 +1492,62 @@ var dataTableStyles = `
|
|
|
1316
1492
|
align-items: center;
|
|
1317
1493
|
justify-content: space-between;
|
|
1318
1494
|
padding: 12px 16px;
|
|
1319
|
-
border-bottom: 1px solid
|
|
1320
|
-
background:
|
|
1495
|
+
border-bottom: 1px solid var(--u-color-border);
|
|
1496
|
+
background: var(--u-color-bg-muted);
|
|
1321
1497
|
}
|
|
1322
1498
|
.dt-search-input {
|
|
1323
1499
|
font-family: inherit;
|
|
1324
1500
|
font-size: 0.875rem;
|
|
1325
1501
|
padding: 6px 12px;
|
|
1326
|
-
border: 1px solid
|
|
1327
|
-
border-radius:
|
|
1502
|
+
border: 1px solid var(--u-color-border);
|
|
1503
|
+
border-radius: var(--u-radius-md);
|
|
1328
1504
|
outline: none;
|
|
1329
1505
|
width: 200px;
|
|
1330
1506
|
}
|
|
1331
1507
|
.dt-search-input:focus {
|
|
1332
|
-
border-color:
|
|
1508
|
+
border-color: var(--u-color-primary-text);
|
|
1333
1509
|
box-shadow: 0 0 0 2px rgba(59,130,246,.25);
|
|
1334
1510
|
}
|
|
1335
|
-
.dt-page-info { color:
|
|
1511
|
+
.dt-page-info { color: var(--u-color-text-muted); font-size: 0.8rem; }
|
|
1336
1512
|
.dt-table-wrapper { overflow-x: auto; }
|
|
1337
1513
|
.dt-table { width: 100%; border-collapse: collapse; }
|
|
1338
1514
|
.dt-table th {
|
|
1339
1515
|
text-align: left;
|
|
1340
1516
|
padding: 10px 12px;
|
|
1341
|
-
border-bottom: 2px solid
|
|
1517
|
+
border-bottom: 2px solid var(--u-color-border-lighter);
|
|
1342
1518
|
font-weight: 600;
|
|
1343
|
-
color:
|
|
1519
|
+
color: var(--u-color-text-secondary);
|
|
1344
1520
|
white-space: nowrap;
|
|
1345
|
-
background:
|
|
1521
|
+
background: var(--u-color-bg-muted);
|
|
1346
1522
|
}
|
|
1347
1523
|
.dt-table th.dt-sortable { cursor: pointer; user-select: none; }
|
|
1348
|
-
.dt-table th.dt-sortable:
|
|
1349
|
-
.dt-table
|
|
1350
|
-
.dt-table
|
|
1351
|
-
.dt-
|
|
1524
|
+
.dt-table th.dt-sortable:focus-visible { outline: 2px solid var(--u-color-focus); outline-offset: -2px; }
|
|
1525
|
+
.dt-table th.dt-sortable:hover { background: var(--u-color-bg-hover); }
|
|
1526
|
+
.dt-table td { padding: 10px 12px; border-bottom: 1px solid var(--u-color-border-lighter); color: var(--u-color-text-muted); }
|
|
1527
|
+
.dt-table tr:hover td { background: var(--u-color-bg-muted); }
|
|
1528
|
+
.dt-row-selected td { background: var(--u-color-bg-selected); }
|
|
1352
1529
|
.dt-col-check { width: 40px; }
|
|
1353
|
-
.dt-empty { text-align: center; color:
|
|
1530
|
+
.dt-empty { text-align: center; color: var(--u-color-text-muted); padding: 32px; }
|
|
1354
1531
|
.dt-pagination {
|
|
1355
1532
|
display: flex;
|
|
1356
1533
|
align-items: center;
|
|
1357
1534
|
justify-content: space-between;
|
|
1358
1535
|
padding: 8px 16px;
|
|
1359
|
-
border-top: 1px solid
|
|
1360
|
-
background:
|
|
1536
|
+
border-top: 1px solid var(--u-color-border);
|
|
1537
|
+
background: var(--u-color-bg-muted);
|
|
1361
1538
|
}
|
|
1362
1539
|
.dt-page-btn {
|
|
1363
1540
|
font-family: inherit;
|
|
1364
1541
|
font-size: 0.8rem;
|
|
1365
1542
|
padding: 6px 12px;
|
|
1366
|
-
border: 1px solid
|
|
1367
|
-
border-radius:
|
|
1368
|
-
background:
|
|
1543
|
+
border: 1px solid var(--u-color-border);
|
|
1544
|
+
border-radius: var(--u-radius-md);
|
|
1545
|
+
background: var(--u-color-bg);
|
|
1369
1546
|
cursor: pointer;
|
|
1370
|
-
color:
|
|
1547
|
+
color: var(--u-color-text-secondary);
|
|
1371
1548
|
}
|
|
1372
|
-
.dt-page-btn:
|
|
1549
|
+
.dt-page-btn:focus-visible { outline: 2px solid var(--u-color-focus); outline-offset: 2px; }
|
|
1550
|
+
.dt-page-btn:hover { background: var(--u-color-bg-hover); }
|
|
1373
1551
|
.dt-page-numbers { display: flex; gap: 4px; }
|
|
1374
1552
|
.dt-page-num {
|
|
1375
1553
|
font-family: inherit;
|
|
@@ -1377,13 +1555,14 @@ var dataTableStyles = `
|
|
|
1377
1555
|
width: 32px;
|
|
1378
1556
|
height: 32px;
|
|
1379
1557
|
border: 1px solid transparent;
|
|
1380
|
-
border-radius:
|
|
1558
|
+
border-radius: var(--u-radius-md);
|
|
1381
1559
|
background: none;
|
|
1382
1560
|
cursor: pointer;
|
|
1383
|
-
color:
|
|
1561
|
+
color: var(--u-color-text-muted);
|
|
1384
1562
|
}
|
|
1385
|
-
.dt-page-num:
|
|
1386
|
-
.dt-page-num
|
|
1563
|
+
.dt-page-num:focus-visible { outline: 2px solid var(--u-color-focus); outline-offset: 2px; }
|
|
1564
|
+
.dt-page-num:hover { background: var(--u-color-bg-hover); }
|
|
1565
|
+
.dt-page-num.active { background: var(--u-color-primary); color: #fff; font-weight: 600; }
|
|
1387
1566
|
`;
|
|
1388
1567
|
|
|
1389
1568
|
// src/components/styles/command-palette.ts
|
|
@@ -1394,7 +1573,7 @@ var commandPaletteStyles = `
|
|
|
1394
1573
|
.cp-backdrop {
|
|
1395
1574
|
position: fixed;
|
|
1396
1575
|
inset: 0;
|
|
1397
|
-
background:
|
|
1576
|
+
background: var(--u-color-overlay);
|
|
1398
1577
|
z-index: 99999;
|
|
1399
1578
|
}
|
|
1400
1579
|
.cp-dialog {
|
|
@@ -1407,8 +1586,8 @@ var commandPaletteStyles = `
|
|
|
1407
1586
|
max-width: calc(100vw - 32px);
|
|
1408
1587
|
}
|
|
1409
1588
|
.cp-dialog-inner {
|
|
1410
|
-
background:
|
|
1411
|
-
border-radius:
|
|
1589
|
+
background: var(--u-color-bg);
|
|
1590
|
+
border-radius: var(--u-radius-2xl);
|
|
1412
1591
|
box-shadow: 0 20px 60px rgba(0,0,0,.2);
|
|
1413
1592
|
overflow: hidden;
|
|
1414
1593
|
}
|
|
@@ -1416,25 +1595,25 @@ var commandPaletteStyles = `
|
|
|
1416
1595
|
display: flex;
|
|
1417
1596
|
align-items: center;
|
|
1418
1597
|
padding: 12px 16px;
|
|
1419
|
-
border-bottom: 1px solid
|
|
1598
|
+
border-bottom: 1px solid var(--u-color-border-lighter);
|
|
1420
1599
|
gap: 8px;
|
|
1421
1600
|
}
|
|
1422
|
-
.cp-search-icon { font-size: 1rem; color:
|
|
1601
|
+
.cp-search-icon { font-size: 1rem; color: var(--u-color-text-muted); }
|
|
1423
1602
|
.cp-search-input {
|
|
1424
1603
|
flex: 1;
|
|
1425
1604
|
border: none;
|
|
1426
1605
|
outline: none;
|
|
1427
1606
|
font-family: inherit;
|
|
1428
1607
|
font-size: 1rem;
|
|
1429
|
-
color:
|
|
1608
|
+
color: var(--u-color-text);
|
|
1430
1609
|
background: none;
|
|
1431
1610
|
}
|
|
1432
1611
|
.cp-shortcut-hint {
|
|
1433
|
-
font-size: 0.
|
|
1612
|
+
font-size: 0.75rem;
|
|
1434
1613
|
padding: 2px 6px;
|
|
1435
|
-
background:
|
|
1436
|
-
border-radius:
|
|
1437
|
-
color:
|
|
1614
|
+
background: var(--u-color-bg-hover);
|
|
1615
|
+
border-radius: var(--u-radius-sm);
|
|
1616
|
+
color: var(--u-color-text-muted);
|
|
1438
1617
|
font-family: inherit;
|
|
1439
1618
|
}
|
|
1440
1619
|
.cp-results {
|
|
@@ -1444,9 +1623,9 @@ var commandPaletteStyles = `
|
|
|
1444
1623
|
}
|
|
1445
1624
|
.cp-group-label {
|
|
1446
1625
|
padding: 8px 12px 4px;
|
|
1447
|
-
font-size: 0.
|
|
1626
|
+
font-size: 0.75rem;
|
|
1448
1627
|
font-weight: 600;
|
|
1449
|
-
color:
|
|
1628
|
+
color: var(--u-color-text-muted);
|
|
1450
1629
|
text-transform: uppercase;
|
|
1451
1630
|
letter-spacing: 0.05em;
|
|
1452
1631
|
}
|
|
@@ -1460,30 +1639,31 @@ var commandPaletteStyles = `
|
|
|
1460
1639
|
background: none;
|
|
1461
1640
|
cursor: pointer;
|
|
1462
1641
|
text-align: left;
|
|
1463
|
-
border-radius:
|
|
1642
|
+
border-radius: var(--u-radius-md);
|
|
1464
1643
|
font-family: inherit;
|
|
1465
1644
|
box-sizing: border-box;
|
|
1466
1645
|
}
|
|
1467
|
-
.cp-item:hover { background:
|
|
1468
|
-
.cp-item-
|
|
1469
|
-
.cp-item-
|
|
1470
|
-
.cp-item-
|
|
1646
|
+
.cp-item:hover { background: var(--u-color-bg-hover); }
|
|
1647
|
+
.cp-item:focus-visible { box-shadow: 0 0 0 2px var(--u-color-focus); }
|
|
1648
|
+
.cp-item-active { background: var(--u-color-bg-selected); }
|
|
1649
|
+
.cp-item-label { font-size: 0.875rem; color: var(--u-color-text); flex: 1; }
|
|
1650
|
+
.cp-item-desc { font-size: 0.75rem; color: var(--u-color-text-muted); flex: 1; }
|
|
1471
1651
|
.cp-item-shortcut {
|
|
1472
|
-
font-size: 0.
|
|
1652
|
+
font-size: 0.75rem;
|
|
1473
1653
|
padding: 2px 6px;
|
|
1474
|
-
background:
|
|
1475
|
-
border-radius:
|
|
1476
|
-
color:
|
|
1654
|
+
background: var(--u-color-bg-hover);
|
|
1655
|
+
border-radius: var(--u-radius-sm);
|
|
1656
|
+
color: var(--u-color-text-muted);
|
|
1477
1657
|
font-family: inherit;
|
|
1478
1658
|
}
|
|
1479
|
-
.cp-empty { padding: 24px; text-align: center; color:
|
|
1659
|
+
.cp-empty { padding: 24px; text-align: center; color: var(--u-color-text-muted); font-size: 0.875rem; }
|
|
1480
1660
|
.cp-footer {
|
|
1481
1661
|
display: flex;
|
|
1482
1662
|
gap: 16px;
|
|
1483
1663
|
padding: 8px 16px;
|
|
1484
|
-
border-top: 1px solid
|
|
1485
|
-
font-size: 0.
|
|
1486
|
-
color:
|
|
1664
|
+
border-top: 1px solid var(--u-color-border-lighter);
|
|
1665
|
+
font-size: 0.75rem;
|
|
1666
|
+
color: var(--u-color-text-muted);
|
|
1487
1667
|
}
|
|
1488
1668
|
`;
|
|
1489
1669
|
|
|
@@ -1499,13 +1679,13 @@ var comboboxStyles = `
|
|
|
1499
1679
|
.combobox-input-wrapper {
|
|
1500
1680
|
display: flex;
|
|
1501
1681
|
align-items: center;
|
|
1502
|
-
border: 1px solid
|
|
1503
|
-
border-radius:
|
|
1682
|
+
border: 1px solid var(--u-color-border-light);
|
|
1683
|
+
border-radius: var(--u-radius-md);
|
|
1504
1684
|
transition: border-color .15s;
|
|
1505
|
-
background:
|
|
1685
|
+
background: var(--u-color-bg);
|
|
1506
1686
|
}
|
|
1507
1687
|
.combobox-input-wrapper:focus-within {
|
|
1508
|
-
border-color:
|
|
1688
|
+
border-color: var(--u-color-primary-hover);
|
|
1509
1689
|
box-shadow: 0 0 0 2px rgba(59,130,246,.25);
|
|
1510
1690
|
}
|
|
1511
1691
|
.combobox-input {
|
|
@@ -1517,14 +1697,14 @@ var comboboxStyles = `
|
|
|
1517
1697
|
background: none;
|
|
1518
1698
|
width: 100%;
|
|
1519
1699
|
box-sizing: border-box;
|
|
1520
|
-
color:
|
|
1700
|
+
color: var(--u-color-text);
|
|
1521
1701
|
}
|
|
1522
1702
|
.combobox-toggle {
|
|
1523
1703
|
background: none;
|
|
1524
1704
|
border: none;
|
|
1525
1705
|
padding: 0 8px;
|
|
1526
1706
|
cursor: pointer;
|
|
1527
|
-
color:
|
|
1707
|
+
color: var(--u-color-text-muted);
|
|
1528
1708
|
font-size: 12px;
|
|
1529
1709
|
display: flex;
|
|
1530
1710
|
align-items: center;
|
|
@@ -1532,8 +1712,8 @@ var comboboxStyles = `
|
|
|
1532
1712
|
.combobox-listbox {
|
|
1533
1713
|
position: fixed;
|
|
1534
1714
|
z-index: 99999;
|
|
1535
|
-
background:
|
|
1536
|
-
border-radius:
|
|
1715
|
+
background: var(--u-color-bg);
|
|
1716
|
+
border-radius: var(--u-radius-md);
|
|
1537
1717
|
box-shadow: 0 4px 20px rgba(0,0,0,.1);
|
|
1538
1718
|
max-height: 240px;
|
|
1539
1719
|
overflow-y: auto;
|
|
@@ -1548,15 +1728,15 @@ var comboboxStyles = `
|
|
|
1548
1728
|
border: none;
|
|
1549
1729
|
background: none;
|
|
1550
1730
|
cursor: pointer;
|
|
1551
|
-
color:
|
|
1731
|
+
color: var(--u-color-text-secondary);
|
|
1552
1732
|
text-align: left;
|
|
1553
|
-
border-radius:
|
|
1733
|
+
border-radius: var(--u-radius-sm);
|
|
1554
1734
|
box-sizing: border-box;
|
|
1555
1735
|
}
|
|
1556
|
-
.combobox-option:hover { background:
|
|
1557
|
-
.combobox-option.active { color:
|
|
1558
|
-
.combobox-option:focus-visible {
|
|
1559
|
-
.combobox-empty { padding: 12px; text-align: center; color:
|
|
1736
|
+
.combobox-option:hover { background: var(--u-color-bg-hover); }
|
|
1737
|
+
.combobox-option.active { color: var(--u-color-primary-hover); font-weight: 500; }
|
|
1738
|
+
.combobox-option:focus-visible { box-shadow: 0 0 0 2px var(--u-color-focus); }
|
|
1739
|
+
.combobox-empty { padding: 12px; text-align: center; color: var(--u-color-text-muted); font-size: 0.875rem; }
|
|
1560
1740
|
`;
|
|
1561
1741
|
|
|
1562
1742
|
// src/components/styles/toast.ts
|
|
@@ -1588,29 +1768,29 @@ var toastStyles = `
|
|
|
1588
1768
|
align-items: flex-start;
|
|
1589
1769
|
gap: 12px;
|
|
1590
1770
|
padding: 14px 16px;
|
|
1591
|
-
border-radius:
|
|
1771
|
+
border-radius: var(--u-radius-lg);
|
|
1592
1772
|
box-shadow: 0 8px 24px rgba(0,0,0,.12);
|
|
1593
1773
|
font-size: 0.875rem;
|
|
1594
1774
|
min-width: 280px;
|
|
1595
1775
|
max-width: 400px;
|
|
1596
1776
|
animation: u-slide-in-right .2s ease;
|
|
1597
|
-
background:
|
|
1598
|
-
border: 1px solid
|
|
1777
|
+
background: var(--u-color-bg);
|
|
1778
|
+
border: 1px solid var(--u-color-border);
|
|
1599
1779
|
}
|
|
1600
1780
|
.toast-exit {
|
|
1601
1781
|
animation: u-slide-out-right .2s ease forwards;
|
|
1602
1782
|
}
|
|
1603
|
-
.toast-info { border-left: 4px solid
|
|
1604
|
-
.toast-success { border-left: 4px solid #
|
|
1605
|
-
.toast-warning { border-left: 4px solid #
|
|
1606
|
-
.toast-error { border-left: 4px solid
|
|
1783
|
+
.toast-info { border-left: 4px solid var(--u-color-primary); }
|
|
1784
|
+
.toast-success { border-left: 4px solid #16a34a; }
|
|
1785
|
+
.toast-warning { border-left: 4px solid #d97706; }
|
|
1786
|
+
.toast-error { border-left: 4px solid var(--u-color-danger); }
|
|
1607
1787
|
.toast-body { flex: 1; }
|
|
1608
|
-
.toast-title { font-weight: 600; color:
|
|
1609
|
-
.toast-desc { color:
|
|
1788
|
+
.toast-title { font-weight: 600; color: var(--u-color-text); }
|
|
1789
|
+
.toast-desc { color: var(--u-color-text-muted); margin-top: 4px; font-size: 0.8rem; }
|
|
1610
1790
|
.toast-action {
|
|
1611
1791
|
background: none;
|
|
1612
1792
|
border: none;
|
|
1613
|
-
color:
|
|
1793
|
+
color: var(--u-color-primary-hover);
|
|
1614
1794
|
cursor: pointer;
|
|
1615
1795
|
font-weight: 500;
|
|
1616
1796
|
font-family: inherit;
|
|
@@ -1619,18 +1799,20 @@ var toastStyles = `
|
|
|
1619
1799
|
padding: 0;
|
|
1620
1800
|
margin-top: 4px;
|
|
1621
1801
|
}
|
|
1622
|
-
.toast-action:
|
|
1802
|
+
.toast-action:focus-visible { outline: 2px solid var(--u-color-focus); outline-offset: 2px; border-radius: 2px; }
|
|
1803
|
+
.toast-action:hover { color: var(--u-color-primary-hover); }
|
|
1623
1804
|
.toast-close {
|
|
1624
1805
|
background: none;
|
|
1625
1806
|
border: none;
|
|
1626
1807
|
cursor: pointer;
|
|
1627
|
-
color:
|
|
1808
|
+
color: var(--u-color-text-muted);
|
|
1628
1809
|
font-size: 1.2rem;
|
|
1629
1810
|
padding: 0;
|
|
1630
1811
|
line-height: 1;
|
|
1631
1812
|
flex-shrink: 0;
|
|
1632
1813
|
}
|
|
1633
|
-
.toast-close:
|
|
1814
|
+
.toast-close:focus-visible { outline: 2px solid var(--u-color-focus); outline-offset: 2px; border-radius: 2px; }
|
|
1815
|
+
.toast-close:hover { color: var(--u-color-text-secondary); }
|
|
1634
1816
|
`;
|
|
1635
1817
|
|
|
1636
1818
|
// src/components/styles/context-menu.ts
|
|
@@ -1645,9 +1827,9 @@ var contextMenuStyles = `
|
|
|
1645
1827
|
.cm-menu {
|
|
1646
1828
|
position: fixed;
|
|
1647
1829
|
z-index: 99999;
|
|
1648
|
-
background:
|
|
1649
|
-
border: 1px solid
|
|
1650
|
-
border-radius:
|
|
1830
|
+
background: var(--u-color-bg);
|
|
1831
|
+
border: 1px solid var(--u-color-border-light);
|
|
1832
|
+
border-radius: var(--u-radius-xl);
|
|
1651
1833
|
box-shadow: 0 8px 24px rgba(0,0,0,.14);
|
|
1652
1834
|
padding: 4px;
|
|
1653
1835
|
min-width: 180px;
|
|
@@ -1670,9 +1852,9 @@ var contextMenuStyles = `
|
|
|
1670
1852
|
border: none;
|
|
1671
1853
|
background: none;
|
|
1672
1854
|
cursor: pointer;
|
|
1673
|
-
color:
|
|
1855
|
+
color: var(--u-color-text-secondary);
|
|
1674
1856
|
text-align: left;
|
|
1675
|
-
border-radius:
|
|
1857
|
+
border-radius: var(--u-radius-md);
|
|
1676
1858
|
transition: background .1s;
|
|
1677
1859
|
display: flex;
|
|
1678
1860
|
align-items: center;
|
|
@@ -1680,12 +1862,12 @@ var contextMenuStyles = `
|
|
|
1680
1862
|
width: 100%;
|
|
1681
1863
|
box-sizing: border-box;
|
|
1682
1864
|
}
|
|
1683
|
-
.cm-item:hover { background:
|
|
1684
|
-
.cm-item:focus-visible {
|
|
1865
|
+
.cm-item:hover { background: var(--u-color-bg-hover); }
|
|
1866
|
+
.cm-item:focus-visible { box-shadow: 0 0 0 2px var(--u-color-focus); }
|
|
1685
1867
|
.cm-item:disabled { opacity: 0.4; cursor: not-allowed; }
|
|
1686
1868
|
.cm-item-icon { width: 16px; text-align: center; font-size: 1rem; flex-shrink: 0; }
|
|
1687
1869
|
.cm-item-label { flex: 1; }
|
|
1688
|
-
.cm-divider { height: 1px; background:
|
|
1870
|
+
.cm-divider { height: 1px; background: var(--u-color-bg-hover); margin: 4px 0; }
|
|
1689
1871
|
`;
|
|
1690
1872
|
|
|
1691
1873
|
// src/components/styles/sortable.ts
|
|
@@ -1701,12 +1883,13 @@ var sortableStyles = `
|
|
|
1701
1883
|
.sortable-dragging {
|
|
1702
1884
|
opacity: 0.9;
|
|
1703
1885
|
box-shadow: 0 8px 24px rgba(0,0,0,.15);
|
|
1704
|
-
border-radius:
|
|
1886
|
+
border-radius: var(--u-radius-md);
|
|
1705
1887
|
cursor: grabbing;
|
|
1706
1888
|
}
|
|
1889
|
+
.sortable-item:focus-visible { outline: 2px solid var(--u-color-focus); outline-offset: 2px; }
|
|
1707
1890
|
.sortable-placeholder {
|
|
1708
|
-
border: 2px dashed
|
|
1709
|
-
border-radius:
|
|
1891
|
+
border: 2px dashed var(--u-color-border-light);
|
|
1892
|
+
border-radius: var(--u-radius-md);
|
|
1710
1893
|
opacity: 0.5;
|
|
1711
1894
|
box-sizing: border-box;
|
|
1712
1895
|
transition: height 0.15s ease, margin 0.15s ease;
|
|
@@ -1725,6 +1908,180 @@ var formStyles = `
|
|
|
1725
1908
|
}
|
|
1726
1909
|
`;
|
|
1727
1910
|
|
|
1728
|
-
|
|
1729
|
-
|
|
1730
|
-
|
|
1911
|
+
// src/components/styles/badge.ts
|
|
1912
|
+
var badgeStyles = `
|
|
1913
|
+
:host {
|
|
1914
|
+
display: inline-flex;
|
|
1915
|
+
vertical-align: middle;
|
|
1916
|
+
}
|
|
1917
|
+
[part="badge"] {
|
|
1918
|
+
font-family: inherit;
|
|
1919
|
+
display: inline-flex;
|
|
1920
|
+
align-items: center;
|
|
1921
|
+
justify-content: center;
|
|
1922
|
+
font-weight: 500;
|
|
1923
|
+
line-height: 1;
|
|
1924
|
+
white-space: nowrap;
|
|
1925
|
+
user-select: none;
|
|
1926
|
+
transition: background .15s, color .15s;
|
|
1927
|
+
}
|
|
1928
|
+
.badge-pill {
|
|
1929
|
+
border-radius: 999px;
|
|
1930
|
+
}
|
|
1931
|
+
.badge-square {
|
|
1932
|
+
border-radius: var(--u-radius-sm);
|
|
1933
|
+
}
|
|
1934
|
+
.badge-sm {
|
|
1935
|
+
font-size: 0.6875rem;
|
|
1936
|
+
padding: 2px 6px;
|
|
1937
|
+
min-height: 16px;
|
|
1938
|
+
min-width: 16px;
|
|
1939
|
+
}
|
|
1940
|
+
.badge-md {
|
|
1941
|
+
font-size: 0.75rem;
|
|
1942
|
+
padding: 3px 8px;
|
|
1943
|
+
min-height: 20px;
|
|
1944
|
+
min-width: 20px;
|
|
1945
|
+
}
|
|
1946
|
+
.badge-lg {
|
|
1947
|
+
font-size: 0.8125rem;
|
|
1948
|
+
padding: 4px 10px;
|
|
1949
|
+
min-height: 24px;
|
|
1950
|
+
min-width: 24px;
|
|
1951
|
+
}
|
|
1952
|
+
.badge-default {
|
|
1953
|
+
background: var(--u-color-bg-hover);
|
|
1954
|
+
color: var(--u-color-text-secondary);
|
|
1955
|
+
}
|
|
1956
|
+
.badge-primary {
|
|
1957
|
+
background: var(--u-color-bg-selected);
|
|
1958
|
+
color: #2563eb;
|
|
1959
|
+
}
|
|
1960
|
+
.badge-success {
|
|
1961
|
+
background: #dcfce7;
|
|
1962
|
+
color: #15803d;
|
|
1963
|
+
}
|
|
1964
|
+
.badge-warning {
|
|
1965
|
+
background: #fef3c7;
|
|
1966
|
+
color: #b45309;
|
|
1967
|
+
}
|
|
1968
|
+
.badge-danger {
|
|
1969
|
+
background: #fef2f2;
|
|
1970
|
+
color: #dc2626;
|
|
1971
|
+
}
|
|
1972
|
+
.badge-info {
|
|
1973
|
+
background: #e0f2fe;
|
|
1974
|
+
color: #0369a1;
|
|
1975
|
+
}
|
|
1976
|
+
.badge-dot {
|
|
1977
|
+
width: 8px;
|
|
1978
|
+
height: 8px;
|
|
1979
|
+
padding: 0;
|
|
1980
|
+
border-radius: 50%;
|
|
1981
|
+
min-width: 8px;
|
|
1982
|
+
min-height: 8px;
|
|
1983
|
+
}
|
|
1984
|
+
.badge-dot.badge-sm {
|
|
1985
|
+
width: 6px;
|
|
1986
|
+
height: 6px;
|
|
1987
|
+
min-width: 6px;
|
|
1988
|
+
min-height: 6px;
|
|
1989
|
+
}
|
|
1990
|
+
.badge-dot.badge-lg {
|
|
1991
|
+
width: 10px;
|
|
1992
|
+
height: 10px;
|
|
1993
|
+
min-width: 10px;
|
|
1994
|
+
min-height: 10px;
|
|
1995
|
+
}
|
|
1996
|
+
`;
|
|
1997
|
+
|
|
1998
|
+
// src/components/styles/card.ts
|
|
1999
|
+
var cardStyles = `
|
|
2000
|
+
:host {
|
|
2001
|
+
display: block;
|
|
2002
|
+
}
|
|
2003
|
+
[part="card"] {
|
|
2004
|
+
display: flex;
|
|
2005
|
+
flex-direction: column;
|
|
2006
|
+
font-family: inherit;
|
|
2007
|
+
transition: box-shadow .2s, border-color .2s, transform .2s;
|
|
2008
|
+
position: relative;
|
|
2009
|
+
overflow: hidden;
|
|
2010
|
+
}
|
|
2011
|
+
.card-default {
|
|
2012
|
+
background: var(--u-color-bg);
|
|
2013
|
+
border: 1px solid var(--u-color-border-light);
|
|
2014
|
+
border-radius: var(--u-radius-2xl);
|
|
2015
|
+
box-shadow: 0 1px 3px rgba(0,0,0,.05);
|
|
2016
|
+
}
|
|
2017
|
+
.card-outlined {
|
|
2018
|
+
background: transparent;
|
|
2019
|
+
border: 1px solid var(--u-color-border-light);
|
|
2020
|
+
border-radius: var(--u-radius-2xl);
|
|
2021
|
+
}
|
|
2022
|
+
.card-elevated {
|
|
2023
|
+
background: var(--u-color-bg);
|
|
2024
|
+
border: 1px solid transparent;
|
|
2025
|
+
border-radius: var(--u-radius-2xl);
|
|
2026
|
+
box-shadow: 0 4px 16px rgba(0,0,0,.08);
|
|
2027
|
+
}
|
|
2028
|
+
.card-hoverable:hover {
|
|
2029
|
+
box-shadow: 0 8px 24px rgba(0,0,0,.12);
|
|
2030
|
+
border-color: var(--u-color-border);
|
|
2031
|
+
transform: translateY(-2px);
|
|
2032
|
+
}
|
|
2033
|
+
.card-image {
|
|
2034
|
+
width: 100%;
|
|
2035
|
+
overflow: hidden;
|
|
2036
|
+
line-height: 0;
|
|
2037
|
+
}
|
|
2038
|
+
.card-image img,
|
|
2039
|
+
.card-image ::slotted(img) {
|
|
2040
|
+
width: 100%;
|
|
2041
|
+
height: auto;
|
|
2042
|
+
display: block;
|
|
2043
|
+
object-fit: cover;
|
|
2044
|
+
}
|
|
2045
|
+
.card-image-full {
|
|
2046
|
+
border-radius: 0;
|
|
2047
|
+
}
|
|
2048
|
+
.card-image-top {
|
|
2049
|
+
border-radius: var(--u-radius-2xl) var(--u-radius-2xl) 0 0;
|
|
2050
|
+
}
|
|
2051
|
+
.card-image-bottom {
|
|
2052
|
+
border-radius: 0 0 var(--u-radius-2xl) var(--u-radius-2xl);
|
|
2053
|
+
}
|
|
2054
|
+
[part="header"] {
|
|
2055
|
+
padding: 16px 20px 0;
|
|
2056
|
+
font-weight: 600;
|
|
2057
|
+
font-size: 1rem;
|
|
2058
|
+
color: var(--u-color-text);
|
|
2059
|
+
}
|
|
2060
|
+
[part="content"] {
|
|
2061
|
+
padding: 16px 20px;
|
|
2062
|
+
flex: 1;
|
|
2063
|
+
min-width: 0;
|
|
2064
|
+
color: var(--u-color-text-secondary);
|
|
2065
|
+
font-size: 0.875rem;
|
|
2066
|
+
line-height: 1.6;
|
|
2067
|
+
}
|
|
2068
|
+
[part="footer"] {
|
|
2069
|
+
padding: 0 20px 16px;
|
|
2070
|
+
display: flex;
|
|
2071
|
+
align-items: center;
|
|
2072
|
+
gap: 8px;
|
|
2073
|
+
}
|
|
2074
|
+
.card-padding-none [part="header"] { padding: 0; }
|
|
2075
|
+
.card-padding-none [part="content"] { padding: 0; }
|
|
2076
|
+
.card-padding-none [part="footer"] { padding: 0; }
|
|
2077
|
+
.card-padding-sm [part="header"] { padding: 12px 14px 0; }
|
|
2078
|
+
.card-padding-sm [part="content"] { padding: 12px 14px; }
|
|
2079
|
+
.card-padding-sm [part="footer"] { padding: 0 14px 12px; }
|
|
2080
|
+
.card-padding-lg [part="header"] { padding: 20px 24px 0; }
|
|
2081
|
+
.card-padding-lg [part="content"] { padding: 20px 24px; }
|
|
2082
|
+
.card-padding-lg [part="footer"] { padding: 0 24px 20px; }
|
|
2083
|
+
`;
|
|
2084
|
+
|
|
2085
|
+
export { UElement, accordionStyles, animateKeyframes, badgeStyles, boxStyles, breadcrumbStyles, buttonStyles, calendarStyles, cardStyles, checkboxStyles, comboboxStyles, commandPaletteStyles, containerStyles, contextMenuStyles, dataTableStyles, dialogStyles, drawerStyles, dropdownStyles, fieldStyles, formStyles, gridStyles, iconStyles, inputStyles, labelStyles, linkStyles, listStyles, modalStyles, overlayStyles, popoverStyles, presenceStyles, radioStyles, selectStyles, sortableStyles, stackStyles, switchStyles, tableStyles, tabsStyles, textStyles, textareaStyles, toastStyles, tooltipStyles, treeStyles, visuallyHiddenStyles };
|
|
2086
|
+
//# sourceMappingURL=chunk-2UKGVIH2.js.map
|
|
2087
|
+
//# sourceMappingURL=chunk-2UKGVIH2.js.map
|