juxscript 1.0.17 → 1.0.19

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 (10) hide show
  1. package/README.md +8 -1
  2. package/lib/components/button.ts +16 -50
  3. package/lib/components/docs-data.json +28 -4
  4. package/lib/components/input.ts +80 -83
  5. package/lib/components/paragraph.ts +87 -0
  6. package/lib/components/req.ts +3 -1
  7. package/lib/components/token-calculator.ts +1 -68
  8. package/lib/reactivity/state.ts +13 -299
  9. package/package.json +1 -1
  10. package/presets/notion.css +1567 -843
package/presets/notion.css CHANGED
@@ -9,12 +9,12 @@
9
9
  ============================================ */
10
10
  :root {
11
11
  /* Typography */
12
- --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
13
- --font-family-mono: 'Courier New', monospace;
12
+ --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
13
+ --font-family-mono: 'SF Mono', 'Monaco', 'Menlo', 'Courier New', monospace;
14
14
 
15
15
  --font-size-xs: 0.75rem;
16
16
  --font-size-sm: 0.875rem;
17
- --font-size-base: 1rem;
17
+ --font-size-base: 0.9375rem;
18
18
  --font-size-lg: 1.125rem;
19
19
  --font-size-xl: 1.25rem;
20
20
  --font-size-2xl: 1.5rem;
@@ -32,31 +32,33 @@
32
32
  /* Spacing */
33
33
  --space-xs: 0.25rem;
34
34
  --space-sm: 0.5rem;
35
- --space-md: 1rem;
36
- --space-lg: 1.5rem;
37
- --space-xl: 2rem;
38
- --space-2xl: 3rem;
39
- --space-3xl: 4rem;
35
+ --space-md: 0.75rem;
36
+ --space-lg: 1rem;
37
+ --space-xl: 1.5rem;
38
+ --space-2xl: 2rem;
39
+ --space-3xl: 3rem;
40
40
 
41
41
  /* Borders */
42
- --radius-sm: 4px;
43
- --radius-md: 8px;
44
- --radius-lg: 12px;
45
- --radius-xl: 16px;
42
+ --radius-sm: 3px;
43
+ --radius-md: 6px;
44
+ --radius-lg: 8px;
45
+ --radius-xl: 12px;
46
+ --radius-2xl: 16px;
46
47
  --radius-full: 9999px;
47
48
 
48
49
  --border-width: 1px;
49
50
 
50
51
  /* Transitions */
51
- --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
52
- --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
52
+ --transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
53
+ --transition-base: 180ms cubic-bezier(0.4, 0, 0.2, 1);
53
54
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
55
+ --transition-bounce: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
54
56
 
55
57
  /* Semantic colors (theme-independent) */
56
- --color-success: #10b981;
57
- --color-warning: #f59e0b;
58
- --color-danger: #ef4444;
59
- --color-info: #3b82f6;
58
+ --color-success: #16a34a;
59
+ --color-warning: #ea580c;
60
+ --color-danger: #dc2626;
61
+ --color-info: #2563eb;
60
62
  }
61
63
 
62
64
  /* ============================================
@@ -64,52 +66,64 @@
64
66
  ============================================ */
65
67
  :root,
66
68
  [data-theme="light"] {
67
- --color-brand: #0a9ca5;
68
- --color-brand-hover: #088892;
69
+ --color-brand: #0ea5e9;
70
+ --color-brand-hover: #0284c7;
71
+ --color-brand-subtle: #e0f2fe;
72
+ --color-brand-muted: #f0f9ff;
69
73
 
70
- --color-text-primary: #111827;
71
- --color-text-secondary: #6b7280;
72
- --color-text-tertiary: #9ca3af;
74
+ --color-text-primary: #18181b;
75
+ --color-text-secondary: #71717a;
76
+ --color-text-tertiary: #a1a1aa;
73
77
  --color-text-inverse: #ffffff;
74
78
 
75
- --color-surface-base: #f9fafb;
79
+ --color-surface-base: #fafafa;
76
80
  --color-surface-elevated: #ffffff;
77
- --color-surface-hover: #f3f4f6;
81
+ --color-surface-hover: #f4f4f5;
82
+ --color-surface-active: #e4e4e7;
78
83
  --color-background: #ffffff;
79
84
 
80
- --color-border: rgba(0, 0, 0, 0.06);
81
- --color-border-hover: rgba(0, 0, 0, 0.12);
85
+ --color-border: #e4e4e7;
86
+ --color-border-hover: #d4d4d8;
87
+ --color-border-focus: #0ea5e9;
82
88
 
83
- --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
84
- --shadow-md: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
85
- --shadow-lg: 0 4px 8px 0 rgba(0, 0, 0, 0.12);
86
- --shadow-xl: 0 8px 16px 0 rgba(0, 0, 0, 0.15);
89
+ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
90
+ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
91
+ --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08);
92
+ --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
93
+ --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.12);
94
+ --shadow-glow: 0 0 20px rgba(14, 165, 233, 0.15);
87
95
  }
88
96
 
89
97
  /* ============================================
90
98
  DARK THEME
91
99
  ============================================ */
92
100
  [data-theme="dark"] {
93
- --color-brand: #14b8a6;
94
- --color-brand-hover: #0d9488;
101
+ --color-brand: #38bdf8;
102
+ --color-brand-hover: #0ea5e9;
103
+ --color-brand-subtle: #082f49;
104
+ --color-brand-muted: #0c1e2e;
95
105
 
96
- --color-text-primary: #f9fafb;
97
- --color-text-secondary: #d1d5db;
98
- --color-text-tertiary: #9ca3af;
99
- --color-text-inverse: #111827;
106
+ --color-text-primary: #fafafa;
107
+ --color-text-secondary: #a1a1aa;
108
+ --color-text-tertiary: #71717a;
109
+ --color-text-inverse: #18181b;
100
110
 
101
- --color-surface-base: #1f2937;
102
- --color-surface-elevated: #374151;
103
- --color-surface-hover: #4b5563;
104
- --color-background: #111827;
111
+ --color-surface-base: #18181b;
112
+ --color-surface-elevated: #27272a;
113
+ --color-surface-hover: #3f3f46;
114
+ --color-surface-active: #52525b;
115
+ --color-background: #09090b;
105
116
 
106
- --color-border: rgba(255, 255, 255, 0.08);
107
- --color-border-hover: rgba(255, 255, 255, 0.16);
117
+ --color-border: #3f3f46;
118
+ --color-border-hover: #52525b;
119
+ --color-border-focus: #38bdf8;
108
120
 
109
- --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
110
- --shadow-md: 0 2px 4px 0 rgba(0, 0, 0, 0.4);
111
- --shadow-lg: 0 4px 8px 0 rgba(0, 0, 0, 0.5);
112
- --shadow-xl: 0 8px 16px 0 rgba(0, 0, 0, 0.6);
121
+ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
122
+ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
123
+ --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
124
+ --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.6);
125
+ --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.7);
126
+ --shadow-glow: 0 0 30px rgba(56, 189, 248, 0.2);
113
127
  }
114
128
 
115
129
  /* ============================================
@@ -128,144 +142,6 @@ body {
128
142
  color: var(--color-text-primary);
129
143
  background: var(--color-background);
130
144
  transition: background-color var(--transition-base), color var(--transition-base);
131
- }
132
-
133
- /* ============================================
134
- THEME TOGGLE - CLEAN & MINIMAL
135
- ============================================ */
136
-
137
- .jux-theme-toggle {
138
- display: inline-flex;
139
- align-items: center;
140
- gap: var(--space-sm);
141
- }
142
-
143
- .jux-theme-toggle-button {
144
- /* Remove all borders and backgrounds */
145
- padding: var(--space-sm);
146
- background: transparent;
147
- border: none;
148
- border-radius: var(--radius-md);
149
- cursor: pointer;
150
- font-size: 1.5rem; /* Bigger icons */
151
- line-height: 1;
152
- transition: all var(--transition-fast);
153
- color: var(--color-text-secondary);
154
-
155
- /* Smooth icon transition */
156
- display: flex;
157
- align-items: center;
158
- justify-content: center;
159
- width: 2.5rem;
160
- height: 2.5rem;
161
- }
162
-
163
- .jux-theme-toggle-button:hover {
164
- background: var(--color-surface-hover);
165
- color: var(--color-text-primary);
166
- transform: scale(1.05);
167
- }
168
-
169
- .jux-theme-toggle-button:active {
170
- transform: scale(0.95);
171
- }
172
-
173
- /* Light mode icon styling */
174
- [data-theme="light"] .jux-theme-toggle-button {
175
- color: #f59e0b; /* Warm sun color */
176
- }
177
-
178
- [data-theme="light"] .jux-theme-toggle-button:hover {
179
- color: #d97706;
180
- }
181
-
182
- /* Dark mode icon styling */
183
- [data-theme="dark"] .jux-theme-toggle-button {
184
- color: #fbbf24; /* Bright moon color */
185
- }
186
-
187
- [data-theme="dark"] .jux-theme-toggle-button:hover {
188
- color: #fcd34d;
189
- }
190
-
191
- /* Dropdown variant (if needed) */
192
- .jux-theme-toggle-select {
193
- padding: var(--space-sm) var(--space-md);
194
- background: transparent;
195
- border: var(--border-width) solid var(--color-border);
196
- border-radius: var(--radius-md);
197
- cursor: pointer;
198
- font-size: var(--font-size-base);
199
- color: var(--color-text-primary);
200
- transition: all var(--transition-fast);
201
- }
202
-
203
- .jux-theme-toggle-select:hover {
204
- border-color: var(--color-border-hover);
205
- background: var(--color-surface-hover);
206
- }
207
-
208
- .jux-theme-toggle-select:focus {
209
- outline: none;
210
- border-color: var(--color-brand);
211
- }
212
-
213
- /* ============================================
214
- RESPONSIVE FONT SIZING
215
- ============================================ */
216
-
217
- /* Mobile */
218
- @media (max-width: 768px) {
219
- :root {
220
- --font-size-xs: 0.7rem;
221
- --font-size-sm: 0.8rem;
222
- --font-size-base: 0.9rem;
223
- --font-size-lg: 1rem;
224
- --font-size-xl: 1.1rem;
225
- --font-size-2xl: 1.3rem;
226
- --font-size-3xl: 1.75rem;
227
- }
228
-
229
- .jux-theme-toggle-button {
230
- width: 2.25rem;
231
- height: 2.25rem;
232
- font-size: 1.25rem;
233
- }
234
- }
235
-
236
- /* ============================================
237
- SMOOTH TRANSITIONS
238
- ============================================ */
239
- body,
240
- .jux-theme-toggle-button {
241
- transition: background-color var(--transition-base),
242
- border-color var(--transition-base),
243
- color var(--transition-base);
244
- }
245
-
246
-
247
- /**
248
- * Global Styles
249
- * Base + Components ONLY (NO layout styles)
250
- * Layout grid structures are in lib/layouts/{layout}.jux
251
- * Uses design tokens from tokens/{theme}.css
252
- */
253
-
254
- /* ===== BASE STYLES ===== */
255
-
256
-
257
- * {
258
- box-sizing: border-box;
259
- margin: 0;
260
- padding: 0;
261
- }
262
-
263
- body {
264
- font-family: var(--font-family-base);
265
- font-size: var(--font-size-base);
266
- line-height: var(--line-height-normal);
267
- color: var(--color-text-primary);
268
- background: var(--color-background);
269
145
  -webkit-font-smoothing: antialiased;
270
146
  -moz-osx-font-smoothing: grayscale;
271
147
  }
@@ -274,35 +150,37 @@ a {
274
150
  color: var(--color-brand);
275
151
  text-decoration: none;
276
152
  transition: color var(--transition-fast);
153
+ position: relative;
277
154
  }
278
155
 
279
156
  a:hover {
280
157
  color: var(--color-brand-hover);
281
- text-decoration: underline;
158
+ }
159
+
160
+ /* Subtle underline animation for links */
161
+ a:not(.jux-button):not(.jux-menu-item)::after {
162
+ content: '';
163
+ position: absolute;
164
+ bottom: -2px;
165
+ left: 0;
166
+ width: 0;
167
+ height: 1px;
168
+ background: var(--color-brand);
169
+ transition: width var(--transition-base);
170
+ }
171
+
172
+ a:not(.jux-button):not(.jux-menu-item):hover::after {
173
+ width: 100%;
282
174
  }
283
175
 
284
176
  button {
285
177
  font-family: inherit;
286
- font-size: inherit;
287
178
  cursor: pointer;
288
- border: none;
289
- background: none;
290
179
  }
291
180
 
292
181
  input, textarea, select {
293
182
  font-family: inherit;
294
183
  font-size: inherit;
295
- background: var(--color-surface-elevated);
296
- color: var(--color-text-primary);
297
- border: var(--border-width) solid var(--color-border);
298
- border-radius: var(--border-radius-md);
299
- padding: var(--space-sm) var(--space-md);
300
- }
301
-
302
- input:focus, textarea:focus, select:focus {
303
- outline: none;
304
- border-color: var(--color-border-focus);
305
- box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
306
184
  }
307
185
 
308
186
  h1, h2, h3, h4, h5, h6 {
@@ -311,48 +189,86 @@ h1, h2, h3, h4, h5, h6 {
311
189
  color: var(--color-text-primary);
312
190
  }
313
191
 
314
- h1 { font-size: var(--font-size-3xl); }
315
- h2 { font-size: var(--font-size-2xl); }
192
+ h1 { font-size: var(--font-size-3xl); letter-spacing: -0.02em; }
193
+ h2 { font-size: var(--font-size-2xl); letter-spacing: -0.01em; }
316
194
  h3 { font-size: var(--font-size-xl); }
317
195
  h4 { font-size: var(--font-size-lg); }
318
196
  h5 { font-size: var(--font-size-base); }
319
197
  h6 { font-size: var(--font-size-sm); }
320
198
 
321
- p {
322
- margin-bottom: var(--space-md);
199
+ /* ============================================
200
+ THEME TOGGLE - Enhanced
201
+ ============================================ */
202
+ .jux-theme-toggle {
203
+ display: inline-flex;
204
+ align-items: center;
205
+ gap: var(--space-sm);
206
+ }
207
+
208
+ .jux-theme-toggle-button {
209
+ padding: var(--space-sm);
210
+ background: transparent;
211
+ border: none;
212
+ border-radius: var(--radius-md);
213
+ cursor: pointer;
214
+ font-size: 1.25rem;
215
+ line-height: 1;
216
+ transition: all var(--transition-bounce);
217
+ color: var(--color-text-tertiary);
218
+ display: flex;
219
+ align-items: center;
220
+ justify-content: center;
221
+ width: 2rem;
222
+ height: 2rem;
223
+ position: relative;
224
+ }
225
+
226
+ .jux-theme-toggle-button:hover {
227
+ background: var(--color-surface-hover);
228
+ color: var(--color-text-primary);
229
+ transform: scale(1.1) rotate(10deg);
323
230
  }
324
231
 
232
+ .jux-theme-toggle-button:active {
233
+ transform: scale(0.95);
234
+ }
325
235
 
326
- /* ===== COMPONENT STYLES ===== */
236
+ [data-theme="light"] .jux-theme-toggle-button {
237
+ color: #f59e0b;
238
+ }
327
239
 
328
- /* Header Component */
329
- .jux-header {
330
- display: flex;
331
- align-items: center;
332
- gap: var(--space-xl);
333
- padding: var(--space-md) var(--space-xl);
334
- height: 60px;
240
+ [data-theme="dark"] .jux-theme-toggle-button {
241
+ color: #fbbf24;
335
242
  }
336
243
 
337
- .jux-header-logo {
244
+ /* ============================================
245
+ HEADER COMPONENT - Enhanced
246
+ ============================================ */
247
+ .jux-header {
338
248
  display: flex;
339
249
  align-items: center;
340
- gap: var(--space-sm);
341
- color: var(--color-brand);
342
- font-weight: var(--font-weight-bold);
343
- font-size: var(--font-size-xl);
250
+ gap: var(--space-lg);
251
+ padding: 0 var(--space-xl);
252
+ height: 48px;
253
+ background: var(--color-surface-elevated);
254
+ border-bottom: var(--border-width) solid var(--color-border);
255
+ backdrop-filter: blur(10px);
256
+ position: sticky;
257
+ top: 0;
258
+ z-index: 100;
344
259
  }
345
260
 
346
261
  .jux-header-title {
347
- font-size: var(--font-size-2xl);
262
+ font-size: var(--font-size-lg);
348
263
  font-weight: var(--font-weight-semibold);
349
264
  color: var(--color-text-primary);
350
265
  margin: 0;
266
+ letter-spacing: -0.01em;
351
267
  }
352
268
 
353
269
  .jux-header-nav {
354
270
  display: flex;
355
- gap: var(--space-lg);
271
+ gap: var(--space-xs);
356
272
  margin-left: auto;
357
273
  align-items: center;
358
274
  }
@@ -362,54 +278,42 @@ p {
362
278
  text-decoration: none;
363
279
  transition: all var(--transition-fast);
364
280
  padding: var(--space-sm) var(--space-md);
365
- border-radius: var(--border-radius-md);
281
+ border-radius: var(--radius-md);
366
282
  font-weight: var(--font-weight-medium);
283
+ font-size: var(--font-size-sm);
284
+ position: relative;
285
+ }
286
+
287
+ .jux-header-nav-link::after {
288
+ display: none;
367
289
  }
368
290
 
369
291
  .jux-header-nav-link:hover {
370
- color: var(--color-brand);
292
+ color: var(--color-text-primary);
371
293
  background: var(--color-surface-hover);
372
- text-decoration: none;
294
+ transform: translateY(-1px);
373
295
  }
374
296
 
375
297
  .jux-header-nav-link.active {
376
298
  color: var(--color-brand);
377
- background: rgba(10, 156, 165, 0.1);
299
+ background: var(--color-brand-subtle);
378
300
  }
379
301
 
380
- /* Sidebar Component */
302
+ /* ============================================
303
+ SIDEBAR COMPONENT - Enhanced
304
+ ============================================ */
381
305
  .jux-sidebar {
382
306
  height: 100%;
383
307
  overflow-y: auto;
384
- }
385
-
386
- .jux-sidebar-toggle {
387
- background: var(--color-surface-elevated);
388
- border: var(--border-width) solid var(--color-border);
389
- font-size: var(--font-size-xl);
390
- cursor: pointer;
391
- padding: var(--space-sm);
392
- margin-bottom: var(--space-md);
393
- color: var(--color-text-primary);
394
- border-radius: var(--border-radius-md);
395
- transition: all var(--transition-base);
396
- width: 100%;
397
- display: block;
398
- font-weight: var(--font-weight-semibold);
399
- }
400
-
401
- .jux-sidebar-toggle:hover {
402
- background: var(--color-brand);
403
- color: var(--color-text-inverse);
404
- border-color: var(--color-brand);
308
+ background: var(--color-surface-base);
405
309
  }
406
310
 
407
311
  .jux-sidebar-heading {
408
312
  font-size: var(--font-size-xs);
409
313
  text-transform: uppercase;
410
314
  color: var(--color-text-tertiary);
411
- margin: var(--space-lg) 0 var(--space-sm);
412
- font-weight: var(--font-weight-bold);
315
+ margin: var(--space-lg) var(--space-md) var(--space-sm);
316
+ font-weight: var(--font-weight-semibold);
413
317
  letter-spacing: 0.05em;
414
318
  }
415
319
 
@@ -417,292 +321,895 @@ p {
417
321
  display: flex;
418
322
  align-items: center;
419
323
  gap: var(--space-md);
420
- padding: var(--space-md);
324
+ padding: var(--space-sm) var(--space-md);
421
325
  color: var(--color-text-secondary);
422
326
  text-decoration: none;
423
- border-radius: var(--border-radius-md);
424
- transition: all var(--transition-base);
425
- margin-bottom: var(--space-xs);
327
+ border-radius: var(--radius-md);
328
+ transition: all var(--transition-fast);
329
+ margin: 1px var(--space-sm);
426
330
  font-weight: var(--font-weight-medium);
331
+ font-size: var(--font-size-sm);
332
+ position: relative;
333
+ overflow: hidden;
334
+ }
335
+
336
+ .jux-sidebar-link::after {
337
+ display: none;
338
+ }
339
+
340
+ .jux-sidebar-link::before {
341
+ content: '';
342
+ position: absolute;
343
+ left: 0;
344
+ top: 0;
345
+ width: 3px;
346
+ height: 100%;
347
+ background: var(--color-brand);
348
+ transform: translateX(-100%);
349
+ transition: transform var(--transition-fast);
427
350
  }
428
351
 
429
352
  .jux-sidebar-link:hover {
430
353
  background: var(--color-surface-elevated);
431
354
  color: var(--color-text-primary);
432
- transform: translateX(4px);
433
- text-decoration: none;
355
+ transform: translateX(2px);
434
356
  }
435
357
 
436
- .jux-sidebar-link.active {
437
- background: var(--color-brand);
438
- color: var(--color-text-inverse);
358
+ .jux-sidebar-link.active,
359
+ .jux-sidebar-link-active {
360
+ background: var(--color-brand-subtle);
361
+ color: var(--color-brand);
439
362
  font-weight: var(--font-weight-semibold);
440
363
  }
441
364
 
442
- .jux-sidebar-icon {
443
- font-size: var(--font-size-xl);
444
- width: 1.5rem;
445
- text-align: center;
446
- flex-shrink: 0;
447
- }
448
-
449
- .jux-sidebar-divider {
450
- border: none;
451
- border-top: var(--border-width) solid var(--color-border);
452
- margin: var(--space-md) 0;
365
+ .jux-sidebar-link.active::before,
366
+ .jux-sidebar-link-active::before {
367
+ transform: translateX(0);
453
368
  }
454
369
 
455
- /* Footer Component */
370
+ /* ============================================
371
+ FOOTER COMPONENT
372
+ ============================================ */
456
373
  .jux-footer {
457
374
  display: flex;
458
375
  align-items: center;
459
- justify-content: center;
460
- padding: var(--space-lg) var(--space-xl);
461
- min-height: 60px;
462
- color: var(--color-text-secondary);
463
- font-size: var(--font-size-sm);
376
+ justify-content: space-between;
377
+ padding: 0 var(--space-xl);
378
+ min-height: 32px;
379
+ background: var(--color-surface-elevated);
380
+ border-top: var(--border-width) solid var(--color-border);
381
+ color: var(--color-text-tertiary);
382
+ font-size: var(--font-size-xs);
464
383
  }
465
384
 
466
- .jux-footer-content {
467
- text-align: center;
385
+ /* ============================================
386
+ CARD COMPONENT - Enhanced
387
+ ============================================ */
388
+ .jux-card {
389
+ background: var(--color-surface-elevated);
390
+ border: var(--border-width) solid var(--color-border);
391
+ border-radius: var(--radius-lg);
392
+ padding: var(--space-xl);
393
+ transition: all var(--transition-base);
394
+ position: relative;
395
+ overflow: hidden;
468
396
  }
469
397
 
470
- .jux-footer-left,
471
- .jux-footer-center,
472
- .jux-footer-right {
473
- display: flex;
474
- align-items: center;
475
- gap: var(--space-md);
398
+ .jux-card::before {
399
+ content: '';
400
+ position: absolute;
401
+ top: 0;
402
+ left: 0;
403
+ right: 0;
404
+ height: 2px;
405
+ background: linear-gradient(90deg, var(--color-brand), var(--color-info));
406
+ transform: translateY(-100%);
407
+ transition: transform var(--transition-base);
408
+ }
409
+
410
+ .jux-card:hover {
411
+ box-shadow: var(--shadow-lg);
412
+ border-color: var(--color-border-hover);
413
+ transform: translateY(-2px);
414
+ }
415
+
416
+ .jux-card:hover::before {
417
+ transform: translateY(0);
418
+ }
419
+
420
+ .jux-card-title {
421
+ font-size: var(--font-size-xl);
422
+ font-weight: var(--font-weight-semibold);
423
+ margin: 0 0 var(--space-md) 0;
424
+ color: var(--color-text-primary);
425
+ letter-spacing: -0.01em;
426
+ }
427
+
428
+ .jux-card-body {
429
+ font-size: var(--font-size-sm);
430
+ color: var(--color-text-secondary);
431
+ line-height: var(--line-height-relaxed);
432
+ }
433
+
434
+ /* ============================================
435
+ BUTTON COMPONENT - Enhanced
436
+ ============================================ */
437
+ .jux-button {
438
+ padding: var(--space-sm) var(--space-lg);
439
+ border: var(--border-width) solid var(--color-border);
440
+ border-radius: var(--radius-md);
441
+ cursor: pointer;
442
+ font-size: var(--font-size-sm);
443
+ background: var(--color-surface-elevated);
444
+ color: var(--color-text-primary);
445
+ font-weight: var(--font-weight-medium);
446
+ transition: all var(--transition-fast);
447
+ display: inline-flex;
448
+ align-items: center;
449
+ justify-content: center;
450
+ gap: var(--space-sm);
451
+ position: relative;
452
+ overflow: hidden;
453
+ }
454
+
455
+ .jux-button::before {
456
+ content: '';
457
+ position: absolute;
458
+ top: 50%;
459
+ left: 50%;
460
+ width: 0;
461
+ height: 0;
462
+ border-radius: var(--radius-full);
463
+ background: rgba(255, 255, 255, 0.1);
464
+ transform: translate(-50%, -50%);
465
+ transition: width var(--transition-slow), height var(--transition-slow);
466
+ }
467
+
468
+ .jux-button:hover::before {
469
+ width: 300px;
470
+ height: 300px;
471
+ }
472
+
473
+ .jux-button:hover {
474
+ background: var(--color-surface-hover);
475
+ border-color: var(--color-border-hover);
476
+ transform: translateY(-1px);
477
+ box-shadow: var(--shadow-sm);
478
+ }
479
+
480
+ .jux-button-primary {
481
+ background: var(--color-brand);
482
+ color: var(--color-text-inverse);
483
+ border-color: var(--color-brand);
484
+ }
485
+
486
+ .jux-button-primary:hover {
487
+ background: var(--color-brand-hover);
488
+ border-color: var(--color-brand-hover);
489
+ box-shadow: var(--shadow-md), var(--shadow-glow);
490
+ transform: translateY(-2px);
491
+ }
492
+
493
+ .jux-button:active {
494
+ transform: translateY(0);
495
+ }
496
+
497
+ .jux-button:disabled {
498
+ opacity: 0.5;
499
+ cursor: not-allowed;
500
+ transform: none;
501
+ }
502
+
503
+ /* ============================================
504
+ INPUT COMPONENT - Enhanced
505
+ ============================================ */
506
+ .jux-input-wrapper {
507
+ display: flex;
508
+ flex-direction: column;
509
+ gap: var(--space-xs);
510
+ margin-bottom: var(--space-lg);
511
+ }
512
+
513
+ .jux-input-label {
514
+ display: block;
515
+ margin-bottom: var(--space-xs);
516
+ font-size: var(--font-size-sm);
517
+ font-weight: var(--font-weight-medium);
518
+ color: var(--color-text-primary);
519
+ }
520
+
521
+ .jux-input {
522
+ margin-bottom: var(--space-lg);
523
+ width: 100%;
524
+ padding: var(--space-sm) var(--space-md);
525
+ font-size: var(--font-size-sm);
526
+ background: var(--color-surface-elevated);
527
+ border: var(--border-width) solid var(--color-border);
528
+ border-radius: var(--radius-md);
529
+ color: var(--color-text-primary);
530
+ transition: all var(--transition-fast);
531
+ box-sizing: border-box;
532
+ font-family: inherit;
533
+ }
534
+
535
+ .jux-input:hover {
536
+ border-color: var(--color-border-hover);
537
+ box-shadow: var(--shadow-xs);
538
+ }
539
+
540
+ .jux-input:focus {
541
+ outline: none;
542
+ border-color: var(--color-border-focus);
543
+ box-shadow: 0 0 0 3px var(--color-brand-subtle), var(--shadow-sm);
544
+ transform: translateY(-1px);
545
+ }
546
+
547
+ .jux-input::placeholder {
548
+ color: var(--color-text-tertiary);
549
+ }
550
+
551
+ .jux-input-required {
552
+ color: var(--color-danger);
553
+ margin-left: 2px;
554
+ }
555
+
556
+ .jux-input-element {
557
+ width: 100%;
558
+ padding: var(--space-sm) var(--space-md);
559
+ font-size: var(--font-size-sm);
560
+ background: var(--color-surface-elevated);
561
+ border: var(--border-width) solid var(--color-border);
562
+ border-radius: var(--radius-md);
563
+ color: var(--color-text-primary);
564
+ transition: all var(--transition-fast);
565
+ box-sizing: border-box;
566
+ font-family: inherit;
567
+ }
568
+
569
+ .jux-input-element:hover {
570
+ border-color: var(--color-border-hover);
571
+ box-shadow: var(--shadow-xs);
572
+ }
573
+
574
+ .jux-input-element:focus {
575
+ outline: none;
576
+ border-color: var(--color-border-focus);
577
+ box-shadow: 0 0 0 3px var(--color-brand-subtle), var(--shadow-sm);
578
+ transform: translateY(-1px);
579
+ }
580
+
581
+ .jux-input-element:disabled {
582
+ background: var(--color-surface-base);
583
+ color: var(--color-text-tertiary);
584
+ cursor: not-allowed;
585
+ opacity: 0.6;
586
+ }
587
+
588
+ .jux-input-element::placeholder {
589
+ color: var(--color-text-tertiary);
590
+ }
591
+
592
+ .jux-input-element.jux-input-invalid {
593
+ border-color: var(--color-danger);
594
+ }
595
+
596
+ .jux-input-element.jux-input-invalid:focus {
597
+ box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
598
+ }
599
+
600
+ .jux-input-error {
601
+ color: var(--color-danger);
602
+ font-size: var(--font-size-xs);
603
+ margin-top: var(--space-xs);
604
+ display: none;
605
+ }
606
+
607
+ .jux-input-counter {
608
+ text-align: right;
609
+ font-size: var(--font-size-xs);
610
+ color: var(--color-text-tertiary);
611
+ margin-top: var(--space-xs);
612
+ }
613
+
614
+ /* Textarea specific */
615
+ textarea.jux-input-element {
616
+ resize: vertical;
617
+ min-height: 80px;
618
+ line-height: var(--line-height-relaxed);
619
+ }
620
+
621
+ /* ============================================
622
+ SELECT COMPONENT - Enhanced
623
+ ============================================ */
624
+ .jux-select {
625
+ margin-bottom: var(--space-lg);
626
+ }
627
+
628
+ .jux-select-label {
629
+ display: block;
630
+ margin-bottom: var(--space-xs);
631
+ font-size: var(--font-size-sm);
632
+ font-weight: var(--font-weight-medium);
633
+ color: var(--color-text-primary);
634
+ }
635
+
636
+ .jux-select-element {
637
+ width: 100%;
638
+ padding: var(--space-sm) var(--space-md);
639
+ font-size: var(--font-size-sm);
640
+ background: var(--color-surface-elevated);
641
+ border: var(--border-width) solid var(--color-border);
642
+ border-radius: var(--radius-md);
643
+ color: var(--color-text-primary);
644
+ cursor: pointer;
645
+ transition: all var(--transition-fast);
646
+ box-sizing: border-box;
647
+ font-family: inherit;
648
+ appearance: none;
649
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2371717a' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
650
+ background-repeat: no-repeat;
651
+ background-position: right 12px center;
652
+ padding-right: 36px;
653
+ }
654
+
655
+ .jux-select-element:hover {
656
+ border-color: var(--color-border-hover);
657
+ box-shadow: var(--shadow-xs);
658
+ }
659
+
660
+ .jux-select-element:focus {
661
+ outline: none;
662
+ border-color: var(--color-border-focus);
663
+ box-shadow: 0 0 0 3px var(--color-brand-subtle), var(--shadow-sm);
664
+ transform: translateY(-1px);
665
+ }
666
+
667
+ .jux-select-element:disabled {
668
+ background: var(--color-surface-base);
669
+ color: var(--color-text-tertiary);
670
+ cursor: not-allowed;
671
+ opacity: 0.6;
672
+ }
673
+
674
+ .jux-select-element option {
675
+ background: var(--color-surface-elevated);
676
+ color: var(--color-text-primary);
677
+ }
678
+
679
+ .jux-select-element option:disabled {
680
+ color: var(--color-text-tertiary);
681
+ }
682
+
683
+ /* Dark mode dropdown arrow */
684
+ [data-theme="dark"] .jux-select-element {
685
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23a1a1aa' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
686
+ }
687
+
688
+ /* ============================================
689
+ CHECKBOX COMPONENT - Enhanced
690
+ ============================================ */
691
+ .jux-checkbox {
692
+ margin-bottom: var(--space-md);
693
+ }
694
+
695
+ .jux-checkbox-label {
696
+ display: inline-flex;
697
+ align-items: center;
698
+ gap: var(--space-sm);
699
+ cursor: pointer;
700
+ user-select: none;
701
+ transition: transform var(--transition-fast);
702
+ }
703
+
704
+ .jux-checkbox-label:hover {
705
+ transform: translateX(2px);
706
+ }
707
+
708
+ .jux-checkbox-input {
709
+ appearance: none;
710
+ width: 18px;
711
+ height: 18px;
712
+ border: var(--border-width) solid var(--color-border);
713
+ border-radius: var(--radius-sm);
714
+ background: var(--color-surface-elevated);
715
+ cursor: pointer;
716
+ transition: all var(--transition-bounce);
717
+ position: relative;
718
+ flex-shrink: 0;
719
+ }
720
+
721
+ .jux-checkbox-input:hover {
722
+ border-color: var(--color-border-hover);
723
+ box-shadow: var(--shadow-xs);
724
+ transform: scale(1.05);
725
+ }
726
+
727
+ .jux-checkbox-input:focus {
728
+ outline: none;
729
+ border-color: var(--color-border-focus);
730
+ box-shadow: 0 0 0 3px var(--color-brand-subtle);
731
+ }
732
+
733
+ .jux-checkbox-input:checked {
734
+ background: var(--color-brand);
735
+ border-color: var(--color-brand);
736
+ animation: checkBounce var(--transition-bounce);
737
+ }
738
+
739
+ @keyframes checkBounce {
740
+ 0%, 100% { transform: scale(1); }
741
+ 50% { transform: scale(1.15); }
742
+ }
743
+
744
+ .jux-checkbox-input:checked::after {
745
+ content: '';
746
+ position: absolute;
747
+ left: 5px;
748
+ top: 2px;
749
+ width: 5px;
750
+ height: 9px;
751
+ border: solid white;
752
+ border-width: 0 2px 2px 0;
753
+ transform: rotate(45deg);
754
+ animation: checkSlide 0.2s ease-out;
755
+ }
756
+
757
+ @keyframes checkSlide {
758
+ from {
759
+ transform: translateY(-5px) rotate(45deg);
760
+ opacity: 0;
761
+ }
762
+ to {
763
+ transform: translateY(0) rotate(45deg);
764
+ opacity: 1;
765
+ }
766
+ }
767
+
768
+ .jux-checkbox-input:disabled {
769
+ background: var(--color-surface-base);
770
+ border-color: var(--color-border);
771
+ cursor: not-allowed;
772
+ opacity: 0.5;
773
+ }
774
+
775
+ .jux-checkbox-text {
776
+ font-size: var(--font-size-sm);
777
+ color: var(--color-text-primary);
778
+ font-weight: var(--font-weight-medium);
779
+ }
780
+
781
+ /* ============================================
782
+ RADIO COMPONENT - Enhanced
783
+ ============================================ */
784
+ .jux-radio-vertical {
785
+ display: flex;
786
+ flex-direction: column;
787
+ gap: var(--space-sm);
788
+ margin-bottom: var(--space-lg);
789
+ }
790
+
791
+ .jux-radio-horizontal {
792
+ display: flex;
793
+ flex-direction: row;
794
+ flex-wrap: wrap;
795
+ gap: var(--space-lg);
796
+ margin-bottom: var(--space-lg);
797
+ }
798
+
799
+ .jux-radio-label {
800
+ display: inline-flex;
801
+ align-items: center;
802
+ gap: var(--space-sm);
803
+ cursor: pointer;
804
+ user-select: none;
805
+ transition: transform var(--transition-fast);
806
+ }
807
+
808
+ .jux-radio-label:hover {
809
+ transform: translateX(2px);
810
+ }
811
+
812
+ .jux-radio-input {
813
+ appearance: none;
814
+ width: 18px;
815
+ height: 18px;
816
+ border: var(--border-width) solid var(--color-border);
817
+ border-radius: var(--radius-full);
818
+ background: var(--color-surface-elevated);
819
+ cursor: pointer;
820
+ transition: all var(--transition-bounce);
821
+ position: relative;
822
+ flex-shrink: 0;
476
823
  }
477
824
 
478
- .jux-footer-link {
479
- color: var(--color-text-secondary);
480
- text-decoration: none;
481
- transition: color var(--transition-fast);
482
- padding: var(--space-xs) var(--space-sm);
483
- border-radius: var(--border-radius-sm);
825
+ .jux-radio-input:hover {
826
+ border-color: var(--color-border-hover);
827
+ box-shadow: var(--shadow-xs);
828
+ transform: scale(1.05);
484
829
  }
485
830
 
486
- .jux-footer-link:hover {
487
- color: var(--color-brand);
488
- background: var(--color-surface-hover);
831
+ .jux-radio-input:focus {
832
+ outline: none;
833
+ border-color: var(--color-border-focus);
834
+ box-shadow: 0 0 0 3px var(--color-brand-subtle);
489
835
  }
490
836
 
491
- /* Hero Component */
492
- .jux-hero {
493
- text-align: left;
494
- padding: var(--space-2xl) var(--space-xl);
495
- background: var(--color-surface-elevated);
496
- border: var(--border-width) solid var(--color-border);
497
- border-radius: var(--border-radius-lg);
498
- margin-bottom: var(--space-2xl);
499
- transition: all var(--transition-base);
837
+ .jux-radio-input:checked {
838
+ border-color: var(--color-brand);
839
+ border-width: 5px;
840
+ animation: radioPulse var(--transition-bounce);
500
841
  }
501
842
 
502
- .jux-hero:hover {
503
- box-shadow: var(--shadow-sm);
843
+ @keyframes radioPulse {
844
+ 0%, 100% { transform: scale(1); }
845
+ 50% { transform: scale(1.15); }
504
846
  }
505
847
 
506
- .jux-hero-title {
507
- font-size: var(--font-size-2xl);
508
- font-weight: var(--font-weight-bold);
509
- margin-bottom: var(--space-sm);
510
- color: var(--color-text-primary);
511
- letter-spacing: -0.02em;
848
+ .jux-radio-input:disabled {
849
+ background: var(--color-surface-base);
850
+ border-color: var(--color-border);
851
+ cursor: not-allowed;
852
+ opacity: 0.5;
512
853
  }
513
854
 
514
- .jux-hero-subtitle {
515
- font-size: var(--font-size-sm);
516
- margin-bottom: var(--space-md);
517
- color: var(--color-text-tertiary);
855
+ .jux-radio-text {
856
+ font-size: var(--font-size-sm);
857
+ color: var(--color-text-primary);
518
858
  font-weight: var(--font-weight-medium);
519
- font-family: var(--font-family-mono);
859
+ }
860
+
861
+ /* ============================================
862
+ FILE UPLOAD COMPONENT - Enhanced
863
+ ============================================ */
864
+ .jux-fileupload {
865
+ margin-bottom: var(--space-lg);
866
+ }
867
+
868
+ .jux-fileupload-input {
869
+ display: none;
870
+ }
871
+
872
+ .jux-fileupload-dropzone {
873
+ border: 2px dashed var(--color-border);
874
+ border-radius: var(--radius-lg);
875
+ padding: var(--space-3xl) var(--space-2xl);
876
+ text-align: center;
877
+ cursor: pointer;
878
+ transition: all var(--transition-base);
520
879
  background: var(--color-surface-base);
521
- padding: var(--space-xs) var(--space-sm);
522
- border-radius: var(--border-radius-sm);
523
- display: inline-block;
880
+ position: relative;
881
+ overflow: hidden;
882
+ }
883
+
884
+ .jux-fileupload-dropzone::before {
885
+ content: '';
886
+ position: absolute;
887
+ top: -100%;
888
+ left: 0;
889
+ right: 0;
890
+ bottom: 0;
891
+ background: linear-gradient(180deg, transparent, var(--color-brand-muted));
892
+ transition: top var(--transition-base);
893
+ }
894
+
895
+ .jux-fileupload-dropzone:hover {
896
+ border-color: var(--color-brand);
897
+ background: var(--color-brand-subtle);
898
+ transform: scale(1.02);
899
+ }
900
+
901
+ .jux-fileupload-dropzone:hover::before {
902
+ top: 0;
903
+ }
904
+
905
+ .jux-fileupload-dropzone-active {
906
+ border-color: var(--color-brand);
907
+ background: var(--color-brand-subtle);
908
+ border-style: solid;
909
+ transform: scale(1.02);
910
+ }
911
+
912
+ .jux-fileupload-icon {
913
+ font-size: 3rem;
914
+ margin-bottom: var(--space-md);
915
+ position: relative;
916
+ z-index: 1;
917
+ animation: float 3s ease-in-out infinite;
524
918
  }
525
919
 
526
- .jux-hero-description {
527
- font-size: var(--font-size-base);
920
+ @keyframes float {
921
+ 0%, 100% { transform: translateY(0); }
922
+ 50% { transform: translateY(-10px); }
923
+ }
924
+
925
+ .jux-fileupload-text {
926
+ font-size: var(--font-size-sm);
528
927
  color: var(--color-text-secondary);
529
- line-height: var(--line-height-relaxed);
530
- white-space: pre-line;
531
- font-family: var(--font-family-mono);
532
- background: var(--color-surface-base);
533
- padding: var(--space-md);
534
- border-radius: var(--border-radius-sm);
535
- border-left: 3px solid var(--color-brand);
928
+ font-weight: var(--font-weight-medium);
929
+ position: relative;
930
+ z-index: 1;
536
931
  }
537
932
 
538
- /* Card Component */
539
- .jux-card {
933
+ .jux-fileupload-list {
934
+ margin-top: var(--space-md);
935
+ display: flex;
936
+ flex-direction: column;
937
+ gap: var(--space-sm);
938
+ }
939
+
940
+ .jux-fileupload-file {
941
+ display: flex;
942
+ align-items: center;
943
+ gap: var(--space-md);
944
+ padding: var(--space-sm) var(--space-md);
540
945
  background: var(--color-surface-elevated);
541
946
  border: var(--border-width) solid var(--color-border);
542
- border-radius: var(--border-radius-xl);
543
- padding: var(--space-lg);
544
- box-shadow: var(--shadow-sm);
545
- transition: all var(--transition-base);
947
+ border-radius: var(--radius-md);
948
+ transition: all var(--transition-fast);
949
+ animation: slideIn var(--transition-base);
546
950
  }
547
951
 
548
- .jux-card:hover {
549
- box-shadow: var(--shadow-md);
550
- transform: translateY(-2px);
952
+ @keyframes slideIn {
953
+ from {
954
+ opacity: 0;
955
+ transform: translateX(-20px);
956
+ }
957
+ to {
958
+ opacity: 1;
959
+ transform: translateX(0);
960
+ }
551
961
  }
552
962
 
553
- .jux-card-title {
554
- font-size: var(--font-size-xl);
555
- font-weight: var(--font-weight-semibold);
556
- margin: 0 0 var(--space-md) 0;
963
+ .jux-fileupload-file:hover {
964
+ box-shadow: var(--shadow-sm);
965
+ transform: translateX(2px);
966
+ }
967
+
968
+ .jux-fileupload-file-name {
969
+ flex: 1;
970
+ font-size: var(--font-size-sm);
557
971
  color: var(--color-text-primary);
972
+ font-weight: var(--font-weight-medium);
973
+ overflow: hidden;
974
+ text-overflow: ellipsis;
975
+ white-space: nowrap;
558
976
  }
559
977
 
560
- .jux-card-body {
561
- font-size: var(--font-size-base);
562
- color: var(--color-text-secondary);
563
- margin: 0 0 var(--space-md) 0;
564
- line-height: var(--line-height-relaxed);
978
+ .jux-fileupload-file-size {
979
+ font-size: var(--font-size-xs);
980
+ color: var(--color-text-tertiary);
981
+ flex-shrink: 0;
565
982
  }
566
983
 
567
- .jux-card-actions {
984
+ .jux-fileupload-file-remove {
985
+ background: none;
986
+ border: none;
987
+ color: var(--color-text-tertiary);
988
+ font-size: var(--font-size-xl);
989
+ line-height: 1;
990
+ cursor: pointer;
991
+ padding: 0;
992
+ width: 20px;
993
+ height: 20px;
568
994
  display: flex;
569
- gap: var(--space-md);
570
995
  align-items: center;
571
- flex-wrap: wrap;
572
- margin: var(--space-md) 0;
996
+ justify-content: center;
997
+ border-radius: var(--radius-sm);
998
+ transition: all var(--transition-fast);
999
+ flex-shrink: 0;
1000
+ }
1001
+
1002
+ .jux-fileupload-file-remove:hover {
1003
+ background: var(--color-surface-hover);
1004
+ color: var(--color-danger);
1005
+ transform: rotate(90deg) scale(1.2);
1006
+ }
1007
+
1008
+ /* ============================================
1009
+ PROGRESS COMPONENT - Enhanced
1010
+ ============================================ */
1011
+ .jux-progress {
1012
+ display: flex;
1013
+ flex-direction: column;
1014
+ gap: var(--space-xs);
1015
+ width: 100%;
573
1016
  }
574
1017
 
575
- .jux-card-footer {
1018
+ .jux-progress-label {
576
1019
  font-size: var(--font-size-sm);
1020
+ font-weight: var(--font-weight-medium);
577
1021
  color: var(--color-text-secondary);
578
- margin: 0;
579
- padding-top: var(--space-md);
580
- border-top: var(--border-width) solid var(--color-border);
1022
+ display: flex;
1023
+ justify-content: space-between;
1024
+ align-items: center;
581
1025
  }
582
1026
 
583
- /* Button Component */
584
- .jux-button {
585
- padding: var(--space-sm) var(--space-lg);
586
- border: var(--border-width) solid var(--color-border);
587
- border-radius: var(--border-radius-md);
588
- cursor: pointer;
589
- font-size: var(--font-size-base);
590
- background: var(--color-surface-elevated);
591
- color: var(--color-text-primary);
592
- font-weight: var(--font-weight-medium);
593
- transition: all var(--transition-fast);
1027
+ .jux-progress-track {
1028
+ width: 100%;
1029
+ background: var(--color-surface-base);
1030
+ border-radius: var(--radius-full);
1031
+ overflow: hidden;
1032
+ position: relative;
1033
+ box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
594
1034
  }
595
1035
 
596
- .jux-button-primary {
597
- background: var(--color-brand);
598
- color: var(--color-text-inverse);
599
- border-color: var(--color-brand);
1036
+ .jux-progress-bar {
1037
+ height: 100%;
1038
+ background: linear-gradient(90deg, var(--color-brand), var(--color-info));
1039
+ border-radius: var(--radius-full);
1040
+ transition: width var(--transition-slow);
1041
+ position: relative;
1042
+ overflow: hidden;
600
1043
  }
601
1044
 
602
- .jux-button:hover {
603
- transform: translateY(-2px);
604
- box-shadow: var(--shadow-md);
1045
+ .jux-progress-bar::after {
1046
+ content: '';
1047
+ position: absolute;
1048
+ top: 0;
1049
+ left: 0;
1050
+ bottom: 0;
1051
+ right: 0;
1052
+ background: linear-gradient(
1053
+ 90deg,
1054
+ transparent,
1055
+ rgba(255, 255, 255, 0.3),
1056
+ transparent
1057
+ );
1058
+ animation: shimmer 2s infinite;
605
1059
  }
606
1060
 
607
- .jux-button-primary:hover {
608
- background: var(--color-brand-hover);
1061
+ @keyframes shimmer {
1062
+ 0% { transform: translateX(-100%); }
1063
+ 100% { transform: translateX(100%); }
609
1064
  }
610
1065
 
611
- .jux-button:disabled {
612
- opacity: 0.5;
613
- cursor: not-allowed;
614
- transform: none;
1066
+ /* Size variants */
1067
+ .jux-progress-sm .jux-progress-track {
1068
+ height: 4px;
615
1069
  }
616
1070
 
617
- /* Table Component */
618
- .jux-table {
619
- width: 100%;
620
- border-collapse: collapse;
621
- background: var(--color-surface-elevated);
622
- border-radius: var(--border-radius-lg);
623
- overflow: hidden;
1071
+ .jux-progress-md .jux-progress-track {
1072
+ height: 8px;
624
1073
  }
625
1074
 
626
- .jux-table th {
627
- background: var(--color-surface-base);
628
- padding: var(--space-md);
629
- text-align: left;
630
- font-weight: var(--font-weight-semibold);
631
- border-bottom: var(--border-width-thick) solid var(--color-border);
632
- color: var(--color-text-primary);
1075
+ .jux-progress-lg .jux-progress-track {
1076
+ height: 12px;
633
1077
  }
634
1078
 
635
- .jux-table td {
636
- padding: var(--space-md);
637
- border-bottom: var(--border-width) solid var(--color-border);
638
- color: var(--color-text-secondary);
1079
+ /* Color variants */
1080
+ .jux-progress-bar-default {
1081
+ background: linear-gradient(90deg, var(--color-brand), var(--color-info));
639
1082
  }
640
1083
 
641
- .jux-table tr:hover {
642
- background: var(--color-surface-hover);
1084
+ .jux-progress-bar-success {
1085
+ background: linear-gradient(90deg, var(--color-success), #10b981);
643
1086
  }
644
1087
 
645
- .jux-table tr:last-child td {
646
- border-bottom: none;
1088
+ .jux-progress-bar-warning {
1089
+ background: linear-gradient(90deg, var(--color-warning), #f59e0b);
647
1090
  }
648
1091
 
649
- /* Grid Utility */
650
- .jux-grid {
651
- display: grid;
652
- gap: var(--space-lg);
653
- grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
1092
+ .jux-progress-bar-error {
1093
+ background: linear-gradient(90deg, var(--color-danger), #ef4444);
654
1094
  }
655
1095
 
656
- /* Stack Utility */
657
- .jux-stack {
658
- display: flex;
659
- flex-direction: column;
660
- gap: var(--space-md);
1096
+ .jux-progress-bar-info {
1097
+ background: linear-gradient(90deg, var(--color-info), #3b82f6);
661
1098
  }
662
1099
 
663
- .jux-stack-horizontal {
664
- flex-direction: row;
1100
+ /* Striped variant */
1101
+ .jux-progress-bar-striped {
1102
+ background-image: linear-gradient(
1103
+ 45deg,
1104
+ rgba(255, 255, 255, 0.15) 25%,
1105
+ transparent 25%,
1106
+ transparent 50%,
1107
+ rgba(255, 255, 255, 0.15) 50%,
1108
+ rgba(255, 255, 255, 0.15) 75%,
1109
+ transparent 75%,
1110
+ transparent
1111
+ );
1112
+ background-size: 1rem 1rem;
665
1113
  }
666
1114
 
667
- /* Tabs Component */
668
- .jux-tabs-nav {
669
- display: flex;
670
- gap: var(--space-sm);
671
- border-bottom: var(--border-width-thick) solid var(--color-border);
672
- margin-bottom: var(--space-xl);
1115
+ /* Animated variant */
1116
+ .jux-progress-bar-animated {
1117
+ animation: jux-progress-stripes 1s linear infinite;
673
1118
  }
674
1119
 
675
- .jux-tabs-btn {
676
- padding: var(--space-md) var(--space-lg);
677
- background: none;
678
- border: none;
679
- color: var(--color-text-secondary);
680
- cursor: pointer;
681
- font-size: var(--font-size-base);
682
- border-bottom: var(--border-width-thick) solid transparent;
683
- margin-bottom: calc(var(--border-width-thick) * -1);
684
- transition: all var(--transition-fast);
1120
+ @keyframes jux-progress-stripes {
1121
+ 0% {
1122
+ background-position: 1rem 0;
1123
+ }
1124
+ 100% {
1125
+ background-position: 0 0;
1126
+ }
1127
+ }
1128
+
1129
+ /* Dark theme adjustments */
1130
+ [data-theme="dark"] .jux-progress-track {
1131
+ background: var(--color-surface-elevated);
1132
+ }
1133
+
1134
+ /* ============================================
1135
+ HEADING COMPONENT
1136
+ ============================================ */
1137
+ .jux-heading {
1138
+ margin-bottom: var(--space-lg);
1139
+ }
1140
+
1141
+ /* Override default heading styles if needed */
1142
+ h1.jux-heading,
1143
+ h2.jux-heading,
1144
+ h3.jux-heading,
1145
+ h4.jux-heading,
1146
+ h5.jux-heading,
1147
+ h6.jux-heading {
1148
+ margin: 0 0 var(--space-md) 0;
1149
+ }
1150
+
1151
+ /* ============================================
1152
+ MENU/NAV COMPONENT - Enhanced
1153
+ ============================================ */
1154
+ .jux-menu {
1155
+ list-style: none;
1156
+ padding: var(--space-xs);
1157
+ margin: 0;
1158
+ }
1159
+
1160
+ .jux-menu-item {
1161
+ display: flex;
1162
+ align-items: center;
1163
+ gap: var(--space-md);
1164
+ padding: var(--space-sm) var(--space-md);
1165
+ cursor: pointer;
1166
+ border-radius: var(--radius-md);
1167
+ transition: all var(--transition-fast);
1168
+ color: var(--color-text-secondary);
1169
+ font-size: var(--font-size-sm);
685
1170
  font-weight: var(--font-weight-medium);
1171
+ text-decoration: none;
1172
+ position: relative;
686
1173
  }
687
1174
 
688
- .jux-tabs-btn:hover {
689
- color: var(--color-text-primary);
1175
+ .jux-menu-item::after {
1176
+ display: none;
690
1177
  }
691
1178
 
692
- .jux-tabs-btn.active {
693
- color: var(--color-brand);
694
- border-bottom-color: var(--color-brand);
1179
+ .jux-menu-item::before {
1180
+ content: '';
1181
+ position: absolute;
1182
+ left: 0;
1183
+ top: 0;
1184
+ width: 3px;
1185
+ height: 100%;
1186
+ background: var(--color-brand);
1187
+ transform: translateX(-100%);
1188
+ transition: transform var(--transition-fast);
1189
+ border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
695
1190
  }
696
1191
 
697
- .jux-tabs-panel {
698
- display: none;
1192
+ .jux-menu-item:hover {
1193
+ background: var(--color-surface-elevated);
1194
+ color: var(--color-text-primary);
1195
+ transform: translateX(2px);
1196
+ }
1197
+
1198
+ .jux-menu-item.active,
1199
+ .jux-menu-item-active {
1200
+ background: var(--color-brand-subtle);
1201
+ color: var(--color-brand);
1202
+ font-weight: var(--font-weight-semibold);
699
1203
  }
700
1204
 
701
- .jux-tabs-panel.active {
702
- display: block;
1205
+ .jux-menu-item.active::before,
1206
+ .jux-menu-item-active::before {
1207
+ transform: translateX(0);
703
1208
  }
704
1209
 
705
- /* Modal Component */
1210
+ /* ============================================
1211
+ MODAL COMPONENT - Enhanced
1212
+ ============================================ */
706
1213
  .jux-modal {
707
1214
  position: fixed;
708
1215
  top: 0;
@@ -710,13 +1217,19 @@ p {
710
1217
  right: 0;
711
1218
  bottom: 0;
712
1219
  z-index: 2000;
713
- display: flex;
1220
+ display: none;
714
1221
  align-items: center;
715
1222
  justify-content: center;
1223
+ animation: fadeIn var(--transition-base);
716
1224
  }
717
1225
 
718
- .jux-modal-hidden {
719
- display: none;
1226
+ @keyframes fadeIn {
1227
+ from { opacity: 0; }
1228
+ to { opacity: 1; }
1229
+ }
1230
+
1231
+ .jux-modal.active {
1232
+ display: flex;
720
1233
  }
721
1234
 
722
1235
  .jux-modal-overlay {
@@ -726,651 +1239,862 @@ p {
726
1239
  right: 0;
727
1240
  bottom: 0;
728
1241
  background: rgba(0, 0, 0, 0.5);
729
- backdrop-filter: blur(4px);
1242
+ backdrop-filter: blur(8px);
730
1243
  }
731
1244
 
732
1245
  .jux-modal-dialog {
733
1246
  position: relative;
734
1247
  background: var(--color-surface-elevated);
735
- border-radius: var(--border-radius-xl);
1248
+ border-radius: var(--radius-xl);
736
1249
  box-shadow: var(--shadow-xl);
737
1250
  max-width: 90vw;
738
1251
  max-height: 90vh;
739
1252
  overflow: auto;
1253
+ border: var(--border-width) solid var(--color-border);
1254
+ animation: modalSlideUp var(--transition-base);
1255
+ }
1256
+
1257
+ @keyframes modalSlideUp {
1258
+ from {
1259
+ opacity: 0;
1260
+ transform: translateY(20px);
1261
+ }
1262
+ to {
1263
+ opacity: 1;
1264
+ transform: translateY(0);
1265
+ }
740
1266
  }
741
1267
 
742
1268
  .jux-modal-header {
743
1269
  display: flex;
744
1270
  align-items: center;
745
1271
  justify-content: space-between;
746
- padding: var(--space-lg);
1272
+ padding: var(--space-lg) var(--space-xl);
747
1273
  border-bottom: var(--border-width) solid var(--color-border);
748
1274
  }
749
1275
 
750
1276
  .jux-modal-title {
751
1277
  font-size: var(--font-size-xl);
752
1278
  font-weight: var(--font-weight-semibold);
1279
+ letter-spacing: -0.01em;
753
1280
  }
754
1281
 
755
1282
  .jux-modal-close {
756
1283
  background: none;
757
1284
  border: none;
758
- font-size: var(--font-size-2xl);
1285
+ font-size: var(--font-size-xl);
759
1286
  cursor: pointer;
760
- color: var(--color-text-secondary);
761
- line-height: 1;
1287
+ color: var(--color-text-tertiary);
1288
+ padding: var(--space-xs);
1289
+ border-radius: var(--radius-md);
1290
+ transition: all var(--transition-fast);
1291
+ }
1292
+
1293
+ .jux-modal-close:hover {
1294
+ background: var(--color-surface-hover);
1295
+ color: var(--color-text-primary);
1296
+ transform: rotate(90deg);
762
1297
  }
763
1298
 
764
1299
  .jux-modal-body {
765
- padding: var(--space-lg);
1300
+ padding: var(--space-xl);
766
1301
  }
767
1302
 
768
- .jux-modal-footer {
769
- display: flex;
770
- gap: var(--space-md);
771
- justify-content: flex-end;
772
- padding: var(--space-lg);
773
- border-top: var(--border-width) solid var(--color-border);
1303
+ /* ============================================
1304
+ TABLE COMPONENT - Enhanced
1305
+ ============================================ */
1306
+ .jux-table {
1307
+ width: 100%;
1308
+ border-collapse: collapse;
1309
+ font-size: var(--font-size-sm);
774
1310
  }
775
1311
 
776
- /* Utility States */
777
- .jux-loading {
778
- display: flex;
779
- align-items: center;
780
- justify-content: center;
781
- padding: var(--space-xl);
1312
+ .jux-table th {
1313
+ background: var(--color-surface-base);
1314
+ padding: var(--space-md) var(--space-lg);
1315
+ text-align: left;
1316
+ font-weight: var(--font-weight-semibold);
1317
+ border-bottom: 2px solid var(--color-border);
1318
+ color: var(--color-text-primary);
1319
+ font-size: var(--font-size-xs);
1320
+ text-transform: uppercase;
1321
+ letter-spacing: 0.05em;
1322
+ position: sticky;
1323
+ top: 0;
1324
+ z-index: 10;
1325
+ }
1326
+
1327
+ .jux-table td {
1328
+ padding: var(--space-md) var(--space-lg);
1329
+ border-bottom: var(--border-width) solid var(--color-border);
782
1330
  color: var(--color-text-secondary);
783
- font-style: italic;
1331
+ transition: all var(--transition-fast);
784
1332
  }
785
1333
 
786
- .jux-error {
787
- background: rgba(239, 68, 68, 0.1);
788
- border: var(--border-width) solid var(--color-danger);
789
- border-radius: var(--border-radius-md);
790
- padding: var(--space-md);
791
- color: var(--color-danger);
792
- margin: var(--space-md) 0;
1334
+ .jux-table tr {
1335
+ transition: all var(--transition-fast);
793
1336
  }
794
1337
 
795
- /* List Component */
796
- .jux-list-header {
797
- font-size: var(--font-size-xl);
798
- font-weight: var(--font-weight-semibold);
799
- color: var(--color-text-primary);
800
- margin-bottom: var(--space-lg);
801
- padding-bottom: var(--space-sm);
802
- border-bottom: var(--border-width-thick) solid var(--color-border);
1338
+ .jux-table tr:hover {
1339
+ background: var(--color-surface-hover);
1340
+ transform: scale(1.01);
803
1341
  }
804
1342
 
805
- .jux-list {
806
- list-style: none;
807
- padding: 0;
1343
+ .jux-table tr:last-child td {
1344
+ border-bottom: none;
1345
+ }
1346
+
1347
+ /* ============================================
1348
+ CODE COMPONENT - Enhanced
1349
+ ============================================ */
1350
+ .jux-code-container {
1351
+ background: var(--color-surface-elevated);
1352
+ border: var(--border-width) solid var(--color-border);
1353
+ border-radius: var(--radius-lg);
1354
+ overflow: hidden;
1355
+ margin: var(--space-lg) 0;
1356
+ box-shadow: var(--shadow-sm);
1357
+ }
1358
+
1359
+ .jux-code-pre {
808
1360
  margin: 0;
809
- display: flex;
810
- flex-direction: column;
811
- gap: var(--space-sm);
1361
+ padding: var(--space-lg);
1362
+ font-family: var(--font-family-mono);
1363
+ font-size: 13px;
1364
+ line-height: 1.6;
1365
+ overflow-x: auto;
1366
+ }
1367
+
1368
+ /* ============================================
1369
+ SCROLLBAR STYLING - Enhanced
1370
+ ============================================ */
1371
+ ::-webkit-scrollbar {
1372
+ width: 8px;
1373
+ height: 8px;
1374
+ }
1375
+
1376
+ ::-webkit-scrollbar-track {
1377
+ background: transparent;
1378
+ }
1379
+
1380
+ ::-webkit-scrollbar-thumb {
1381
+ background: var(--color-border);
1382
+ border-radius: var(--radius-full);
1383
+ transition: background var(--transition-fast);
1384
+ }
1385
+
1386
+ ::-webkit-scrollbar-thumb:hover {
1387
+ background: var(--color-border-hover);
1388
+ }
1389
+
1390
+ ::-webkit-scrollbar-thumb:active {
1391
+ background: var(--color-brand);
1392
+ }
1393
+
1394
+ /* Firefox scrollbar */
1395
+ * {
1396
+ scrollbar-width: thin;
1397
+ scrollbar-color: var(--color-border) transparent;
1398
+ }
1399
+
1400
+ /* ============================================
1401
+ UTILITIES - Enhanced
1402
+ ============================================ */
1403
+ .jux-grid {
1404
+ display: grid;
1405
+ gap: var(--space-lg);
1406
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
812
1407
  }
813
1408
 
814
- .jux-list-item {
1409
+ .jux-stack {
815
1410
  display: flex;
816
- align-items: flex-start;
1411
+ flex-direction: column;
817
1412
  gap: var(--space-md);
818
- padding: var(--space-md);
819
- background: var(--color-surface-elevated);
820
- border: var(--border-width) solid var(--color-border);
821
- border-radius: var(--border-radius-md);
822
- transition: all var(--transition-base);
823
1413
  }
824
1414
 
825
- .jux-list-item:hover {
826
- background: var(--color-surface-hover);
827
- transform: translateX(4px);
828
- box-shadow: var(--shadow-sm);
1415
+ .jux-stack-horizontal {
1416
+ flex-direction: row;
829
1417
  }
830
1418
 
831
- .jux-list-item-icon {
832
- font-size: var(--font-size-2xl);
833
- line-height: 1;
834
- flex-shrink: 0;
835
- width: 2rem;
836
- text-align: center;
1419
+ /* Fade in animation utility */
1420
+ @keyframes fadeInUp {
1421
+ from {
1422
+ opacity: 0;
1423
+ transform: translateY(10px);
1424
+ }
1425
+ to {
1426
+ opacity: 1;
1427
+ transform: translateY(0);
1428
+ }
837
1429
  }
838
1430
 
839
- .jux-list-item-content {
840
- flex: 1;
841
- min-width: 0;
1431
+ .jux-fade-in {
1432
+ animation: fadeInUp var(--transition-base);
842
1433
  }
843
1434
 
844
- .jux-list-item-title {
845
- font-size: var(--font-size-base);
1435
+ /* ============================================
1436
+ RESPONSIVE FONT SIZING
1437
+ ============================================ */
1438
+
1439
+ /* Mobile */
1440
+ @media (max-width: 768px) {
1441
+ :root {
1442
+ --font-size-xs: 0.7rem;
1443
+ --font-size-sm: 0.8rem;
1444
+ --font-size-base: 0.9rem;
1445
+ --font-size-lg: 1rem;
1446
+ --font-size-xl: 1.1rem;
1447
+ --font-size-2xl: 1.3rem;
1448
+ --font-size-3xl: 1.75rem;
1449
+ }
1450
+
1451
+ .jux-theme-toggle-button {
1452
+ width: 2.25rem;
1453
+ height: 2.25rem;
1454
+ font-size: 1.25rem;
1455
+ }
1456
+ }
1457
+
1458
+ /* ============================================
1459
+ SMOOTH TRANSITIONS
1460
+ ============================================ */
1461
+ body,
1462
+ .jux-theme-toggle-button,
1463
+ .jux-input-element,
1464
+ .jux-select-element,
1465
+ .jux-checkbox-input,
1466
+ .jux-radio-input,
1467
+ .jux-fileupload-dropzone {
1468
+ transition: background-color var(--transition-base),
1469
+ border-color var(--transition-base),
1470
+ color var(--transition-base);
1471
+ }
1472
+
1473
+ /* ============================================
1474
+ BADGE COMPONENT
1475
+ ============================================ */
1476
+ .jux-badge {
1477
+ display: inline-flex;
1478
+ align-items: center;
1479
+ padding: var(--space-xs) var(--space-sm);
1480
+ font-size: var(--font-size-xs);
846
1481
  font-weight: var(--font-weight-semibold);
1482
+ border-radius: var(--radius-sm);
1483
+ line-height: 1;
1484
+ text-transform: uppercase;
1485
+ letter-spacing: 0.025em;
1486
+ transition: all var(--transition-fast);
1487
+ }
1488
+
1489
+ .jux-badge-default {
1490
+ background: var(--color-surface-active);
847
1491
  color: var(--color-text-primary);
848
- margin-bottom: var(--space-xs);
849
1492
  }
850
1493
 
851
- .jux-list-item-body {
852
- font-size: var(--font-size-sm);
853
- color: var(--color-text-secondary);
854
- line-height: var(--line-height-normal);
1494
+ .jux-badge-success {
1495
+ background: #dcfce7;
1496
+ color: #166534;
855
1497
  }
856
1498
 
857
- .jux-list-item-metadata {
858
- font-size: var(--font-size-sm);
859
- color: var(--color-text-tertiary);
860
- font-weight: var(--font-weight-medium);
861
- white-space: nowrap;
862
- align-self: center;
1499
+ [data-theme="dark"] .jux-badge-success {
1500
+ background: #14532d;
1501
+ color: #86efac;
863
1502
  }
864
1503
 
865
- /* List Item Type Variants */
866
- .jux-list-item-default {
867
- border-left: 4px solid var(--color-border);
1504
+ .jux-badge-warning {
1505
+ background: #fed7aa;
1506
+ color: #9a3412;
868
1507
  }
869
1508
 
870
- .jux-list-item-success {
871
- border-left: 4px solid var(--color-success);
872
- background: rgba(34, 197, 94, 0.05);
1509
+ [data-theme="dark"] .jux-badge-warning {
1510
+ background: #7c2d12;
1511
+ color: #fdba74;
873
1512
  }
874
1513
 
875
- .jux-list-item-success .jux-list-item-icon {
876
- color: var(--color-success);
1514
+ .jux-badge-error {
1515
+ background: #fecaca;
1516
+ color: #991b1b;
877
1517
  }
878
1518
 
879
- .jux-list-item-warning {
880
- border-left: 4px solid var(--color-warning);
881
- background: rgba(251, 191, 36, 0.05);
1519
+ [data-theme="dark"] .jux-badge-error {
1520
+ background: #7f1d1d;
1521
+ color: #fca5a5;
882
1522
  }
883
1523
 
884
- .jux-list-item-warning .jux-list-item-icon {
885
- color: var(--color-warning);
1524
+ .jux-badge-info {
1525
+ background: #dbeafe;
1526
+ color: #1e40af;
886
1527
  }
887
1528
 
888
- .jux-list-item-error {
889
- border-left: 4px solid var(--color-danger);
890
- background: rgba(239, 68, 68, 0.05);
1529
+ [data-theme="dark"] .jux-badge-info {
1530
+ background: #1e3a8a;
1531
+ color: #93c5fd;
891
1532
  }
892
1533
 
893
- .jux-list-item-error .jux-list-item-icon {
894
- color: var(--color-danger);
1534
+ .jux-badge-pill {
1535
+ border-radius: var(--radius-full);
1536
+ padding: var(--space-xs) var(--space-md);
895
1537
  }
896
1538
 
897
- .jux-list-item-info {
898
- border-left: 4px solid var(--color-info);
899
- background: rgba(59, 130, 246, 0.05);
1539
+ /* ============================================
1540
+ SWITCH COMPONENT
1541
+ ============================================ */
1542
+ .jux-switch {
1543
+ margin-bottom: var(--space-md);
900
1544
  }
901
1545
 
902
- .jux-list-item-info .jux-list-item-icon {
903
- color: var(--color-info);
1546
+ .jux-switch-label {
1547
+ display: inline-flex;
1548
+ align-items: center;
1549
+ gap: var(--space-sm);
1550
+ cursor: pointer;
1551
+ user-select: none;
904
1552
  }
905
1553
 
906
- .jux-list-item-selectable {
1554
+ .jux-switch-input {
1555
+ appearance: none;
1556
+ width: 40px;
1557
+ height: 22px;
1558
+ background: var(--color-border);
1559
+ border-radius: var(--radius-full);
1560
+ position: relative;
907
1561
  cursor: pointer;
1562
+ transition: all var(--transition-fast);
1563
+ flex-shrink: 0;
908
1564
  }
909
1565
 
910
- .jux-list-item-selectable:active {
911
- transform: scale(0.98);
1566
+ .jux-switch-input:hover {
1567
+ background: var(--color-border-hover);
912
1568
  }
913
1569
 
914
- .jux-list-item-selected {
915
- background: rgba(10, 156, 165, 0.15) !important;
916
- border-color: var(--color-brand) !important;
917
- box-shadow: 0 0 0 2px rgba(10, 156, 165, 0.2);
1570
+ .jux-switch-input::before {
1571
+ content: '';
1572
+ position: absolute;
1573
+ top: 2px;
1574
+ left: 2px;
1575
+ width: 18px;
1576
+ height: 18px;
1577
+ background: white;
1578
+ border-radius: var(--radius-full);
1579
+ transition: all var(--transition-fast);
1580
+ box-shadow: var(--shadow-sm);
918
1581
  }
919
1582
 
920
- .jux-list-item-selected .jux-list-item-title {
921
- color: var(--color-brand);
922
- font-weight: var(--font-weight-bold);
1583
+ .jux-switch-input:checked {
1584
+ background: var(--color-brand);
923
1585
  }
924
1586
 
925
- /* Input Component */
926
- .jux-input-wrapper {
927
- display: flex;
928
- flex-direction: column;
929
- gap: var(--space-xs);
930
- margin-bottom: var(--space-lg);
1587
+ .jux-switch-input:checked::before {
1588
+ left: 20px;
931
1589
  }
932
1590
 
933
- .jux-input-label {
1591
+ .jux-switch-input:focus {
1592
+ outline: none;
1593
+ box-shadow: 0 0 0 3px var(--color-brand-subtle);
1594
+ }
1595
+
1596
+ .jux-switch-input:disabled {
1597
+ opacity: 0.5;
1598
+ cursor: not-allowed;
1599
+ }
1600
+
1601
+ .jux-switch-text {
934
1602
  font-size: var(--font-size-sm);
935
- font-weight: var(--font-weight-semibold);
936
1603
  color: var(--color-text-primary);
937
- display: block;
1604
+ font-weight: var(--font-weight-medium);
938
1605
  }
939
1606
 
940
- .jux-input-required {
941
- color: var(--color-danger);
1607
+ /* ============================================
1608
+ DATEPICKER COMPONENT
1609
+ ============================================ */
1610
+ .jux-datepicker {
1611
+ margin-bottom: var(--space-lg);
942
1612
  }
943
1613
 
944
- .jux-input {
1614
+ .jux-datepicker-label {
1615
+ display: block;
1616
+ margin-bottom: var(--space-xs);
1617
+ font-size: var(--font-size-sm);
1618
+ font-weight: var(--font-weight-medium);
1619
+ color: var(--color-text-primary);
1620
+ }
1621
+
1622
+ .jux-datepicker-input {
945
1623
  width: 100%;
946
1624
  padding: var(--space-sm) var(--space-md);
947
- font-size: var(--font-size-base);
1625
+ font-size: var(--font-size-sm);
948
1626
  background: var(--color-surface-elevated);
949
1627
  border: var(--border-width) solid var(--color-border);
950
- border-radius: var(--border-radius-md);
1628
+ border-radius: var(--radius-md);
951
1629
  color: var(--color-text-primary);
1630
+ cursor: pointer;
952
1631
  transition: all var(--transition-fast);
1632
+ box-sizing: border-box;
1633
+ font-family: inherit;
953
1634
  }
954
1635
 
955
- .jux-input:hover {
956
- border-color: var(--color-border-focus);
1636
+ .jux-datepicker-input:hover {
1637
+ border-color: var(--color-border-hover);
1638
+ box-shadow: var(--shadow-xs);
957
1639
  }
958
1640
 
959
- .jux-input:focus {
1641
+ .jux-datepicker-input:focus {
960
1642
  outline: none;
961
- border-color: var(--color-brand);
962
- box-shadow: 0 0 0 3px rgba(10, 156, 165, 0.1);
963
- }
964
-
965
- .jux-input-focused .jux-input {
966
- border-color: var(--color-brand);
967
- box-shadow: 0 0 0 3px rgba(10, 156, 165, 0.1);
968
- }
969
-
970
- .jux-input-error .jux-input {
971
- border-color: var(--color-danger);
972
- }
973
-
974
- .jux-input-error .jux-input:focus {
975
- box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
1643
+ border-color: var(--color-border-focus);
1644
+ box-shadow: 0 0 0 3px var(--color-brand-subtle), var(--shadow-sm);
1645
+ transform: translateY(-1px);
976
1646
  }
977
1647
 
978
- .jux-input-disabled .jux-input {
979
- opacity: 0.6;
980
- cursor: not-allowed;
1648
+ .jux-datepicker-input:disabled {
981
1649
  background: var(--color-surface-base);
1650
+ color: var(--color-text-tertiary);
1651
+ cursor: not-allowed;
1652
+ opacity: 0.6;
982
1653
  }
983
1654
 
984
- .jux-input-message {
985
- font-size: var(--font-size-sm);
986
- line-height: var(--line-height-tight);
1655
+ /* ============================================
1656
+ DROPDOWN COMPONENT
1657
+ ============================================ */
1658
+ .jux-dropdown {
1659
+ position: relative;
1660
+ display: inline-block;
987
1661
  }
988
1662
 
989
- .jux-input-message-helper {
990
- color: var(--color-text-tertiary);
1663
+ .jux-dropdown-trigger {
1664
+ padding: var(--space-sm) var(--space-lg);
1665
+ background: var(--color-surface-elevated);
1666
+ border: var(--border-width) solid var(--color-border);
1667
+ border-radius: var(--radius-md);
1668
+ color: var(--color-text-primary);
1669
+ font-size: var(--font-size-sm);
1670
+ font-weight: var(--font-weight-medium);
1671
+ cursor: pointer;
1672
+ transition: all var(--transition-fast);
1673
+ display: inline-flex;
1674
+ align-items: center;
1675
+ gap: var(--space-sm);
991
1676
  }
992
1677
 
993
- .jux-input-message-error {
994
- color: var(--color-danger);
995
- font-weight: var(--font-weight-medium);
1678
+ .jux-dropdown-trigger:hover {
1679
+ background: var(--color-surface-hover);
1680
+ border-color: var(--color-border-hover);
1681
+ transform: translateY(-1px);
1682
+ box-shadow: var(--shadow-sm);
996
1683
  }
997
1684
 
998
- /* Menu Component */
999
- .jux-menu-dropdown {
1000
- position: relative;
1685
+ .jux-dropdown-menu {
1686
+ position: absolute;
1687
+ top: calc(100% + 4px);
1688
+ min-width: 200px;
1001
1689
  background: var(--color-surface-elevated);
1002
1690
  border: var(--border-width) solid var(--color-border);
1003
- border-radius: var(--border-radius-lg);
1691
+ border-radius: var(--radius-lg);
1004
1692
  box-shadow: var(--shadow-lg);
1005
- min-width: 200px;
1693
+ padding: var(--space-xs);
1694
+ opacity: 0;
1695
+ visibility: hidden;
1696
+ transform: translateY(-10px);
1697
+ transition: all var(--transition-fast);
1006
1698
  z-index: 1000;
1007
1699
  }
1008
1700
 
1009
- .jux-menu-hidden {
1010
- display: none;
1701
+ .jux-dropdown-menu.active {
1702
+ opacity: 1;
1703
+ visibility: visible;
1704
+ transform: translateY(0);
1011
1705
  }
1012
1706
 
1013
- .jux-menu-list {
1014
- list-style: none;
1015
- padding: var(--space-xs);
1016
- margin: 0;
1707
+ .jux-dropdown-menu-left {
1708
+ left: 0;
1017
1709
  }
1018
1710
 
1019
- .jux-menu-item {
1711
+ .jux-dropdown-menu-right {
1712
+ right: 0;
1713
+ }
1714
+
1715
+ .jux-dropdown-item {
1020
1716
  display: flex;
1021
1717
  align-items: center;
1022
- gap: var(--space-md);
1718
+ gap: var(--space-sm);
1023
1719
  padding: var(--space-sm) var(--space-md);
1720
+ color: var(--color-text-primary);
1721
+ font-size: var(--font-size-sm);
1722
+ border-radius: var(--radius-md);
1024
1723
  cursor: pointer;
1025
- border-radius: var(--border-radius-sm);
1026
1724
  transition: all var(--transition-fast);
1027
- color: var(--color-text-primary);
1028
- font-size: var(--font-size-base);
1029
- position: relative;
1030
- }
1031
-
1032
- .jux-menu-item:hover {
1033
- background: var(--color-surface-hover);
1725
+ white-space: nowrap;
1034
1726
  }
1035
1727
 
1036
- .jux-menu-item-focused {
1728
+ .jux-dropdown-item:hover {
1037
1729
  background: var(--color-surface-hover);
1730
+ transform: translateX(2px);
1038
1731
  }
1039
1732
 
1040
- .jux-menu-item-disabled {
1041
- opacity: 0.5;
1042
- cursor: not-allowed;
1733
+ .jux-dropdown-divider {
1734
+ height: 1px;
1735
+ background: var(--color-border);
1736
+ margin: var(--space-xs) 0;
1043
1737
  }
1044
1738
 
1045
- .jux-menu-item-disabled:hover {
1046
- background: transparent;
1739
+ /* ============================================
1740
+ ALERT COMPONENT
1741
+ ============================================ */
1742
+ .jux-alert {
1743
+ display: flex;
1744
+ align-items: flex-start;
1745
+ gap: var(--space-md);
1746
+ padding: var(--space-md) var(--space-lg);
1747
+ border-radius: var(--radius-lg);
1748
+ margin-bottom: var(--space-lg);
1749
+ border-left: 3px solid;
1750
+ animation: slideIn var(--transition-base);
1047
1751
  }
1048
1752
 
1049
- .jux-menu-item-icon {
1050
- font-size: var(--font-size-lg);
1051
- width: 1.25rem;
1052
- text-align: center;
1753
+ .jux-alert-icon {
1754
+ font-size: var(--font-size-xl);
1053
1755
  flex-shrink: 0;
1054
1756
  }
1055
1757
 
1056
- .jux-menu-item-label {
1758
+ .jux-alert-content {
1057
1759
  flex: 1;
1058
1760
  }
1059
1761
 
1060
- .jux-menu-item-shortcut {
1762
+ .jux-alert-message {
1061
1763
  font-size: var(--font-size-sm);
1062
- color: var(--color-text-tertiary);
1063
- font-family: var(--font-family-mono);
1064
- margin-left: auto;
1764
+ line-height: var(--line-height-relaxed);
1765
+ margin: 0;
1065
1766
  }
1066
1767
 
1067
- .jux-menu-item-arrow {
1068
- font-size: var(--font-size-xs);
1069
- color: var(--color-text-tertiary);
1070
- margin-left: auto;
1768
+ .jux-alert-close {
1769
+ background: none;
1770
+ border: none;
1771
+ font-size: var(--font-size-lg);
1772
+ cursor: pointer;
1773
+ padding: 0;
1774
+ width: 20px;
1775
+ height: 20px;
1776
+ display: flex;
1777
+ align-items: center;
1778
+ justify-content: center;
1779
+ border-radius: var(--radius-sm);
1780
+ transition: all var(--transition-fast);
1781
+ flex-shrink: 0;
1782
+ color: inherit;
1783
+ opacity: 0.6;
1071
1784
  }
1072
1785
 
1073
- .jux-menu-divider {
1074
- height: 1px;
1075
- background: var(--color-border);
1076
- margin: var(--space-xs) 0;
1786
+ .jux-alert-close:hover {
1787
+ opacity: 1;
1788
+ background: rgba(0, 0, 0, 0.1);
1077
1789
  }
1078
1790
 
1079
- .jux-menu-submenu {
1080
- position: absolute;
1081
- left: 100%;
1082
- top: 0;
1083
- margin-left: var(--space-xs);
1084
- background: var(--color-surface-elevated);
1085
- border: var(--border-width) solid var(--color-border);
1086
- border-radius: var(--border-radius-lg);
1087
- box-shadow: var(--shadow-lg);
1088
- min-width: 180px;
1791
+ .jux-alert-success {
1792
+ background: #dcfce7;
1793
+ border-color: var(--color-success);
1794
+ color: #166534;
1089
1795
  }
1090
1796
 
1091
- .jux-menu-submenu .jux-menu-list {
1092
- padding: var(--space-xs);
1797
+ [data-theme="dark"] .jux-alert-success {
1798
+ background: #14532d;
1799
+ color: #86efac;
1093
1800
  }
1094
1801
 
1095
- /* Menu positioning variants */
1096
- .jux-menu-bottom-left {
1097
- top: 100%;
1098
- left: 0;
1099
- margin-top: var(--space-xs);
1802
+ .jux-alert-info {
1803
+ background: #dbeafe;
1804
+ border-color: var(--color-info);
1805
+ color: #1e40af;
1100
1806
  }
1101
1807
 
1102
- .jux-menu-bottom-right {
1103
- top: 100%;
1104
- right: 0;
1105
- margin-top: var(--space-xs);
1808
+ [data-theme="dark"] .jux-alert-info {
1809
+ background: #1e3a8a;
1810
+ color: #93c5fd;
1106
1811
  }
1107
1812
 
1108
- .jux-menu-top-left {
1109
- bottom: 100%;
1110
- left: 0;
1111
- margin-bottom: var(--space-xs);
1813
+ .jux-alert-warning {
1814
+ background: #fed7aa;
1815
+ border-color: var(--color-warning);
1816
+ color: #9a3412;
1112
1817
  }
1113
1818
 
1114
- .jux-menu-top-right {
1115
- bottom: 100%;
1116
- right: 0;
1117
- margin-bottom: var(--space-xs);
1819
+ [data-theme="dark"] .jux-alert-warning {
1820
+ background: #7c2d12;
1821
+ color: #fdba74;
1118
1822
  }
1119
1823
 
1120
- /* Nav Component */
1121
- .jux-nav {
1122
- display: flex;
1824
+ .jux-alert-error {
1825
+ background: #fecaca;
1826
+ border-color: var(--color-danger);
1827
+ color: #991b1b;
1123
1828
  }
1124
1829
 
1125
- .jux-nav-horizontal {
1126
- flex-direction: row;
1830
+ [data-theme="dark"] .jux-alert-error {
1831
+ background: #7f1d1d;
1832
+ color: #fca5a5;
1127
1833
  }
1128
1834
 
1129
- .jux-nav-vertical {
1130
- flex-direction: column;
1835
+ /* ============================================
1836
+ LOADING COMPONENT
1837
+ ============================================ */
1838
+ .jux-loading {
1839
+ display: inline-flex;
1840
+ align-items: center;
1841
+ justify-content: center;
1131
1842
  }
1132
1843
 
1133
- .jux-nav-list {
1134
- list-style: none;
1135
- padding: 0;
1136
- margin: 0;
1137
- display: flex;
1138
- gap: var(--space-xs);
1844
+ /* Spinner variant */
1845
+ .jux-loading-spinner {
1846
+ width: 40px;
1847
+ height: 40px;
1848
+ border: 3px solid var(--color-surface-active);
1849
+ border-top-color: var(--color-brand);
1850
+ border-radius: var(--radius-full);
1851
+ animation: spin 0.8s linear infinite;
1139
1852
  }
1140
1853
 
1141
- .jux-nav-horizontal .jux-nav-list {
1142
- flex-direction: row;
1854
+ @keyframes spin {
1855
+ to { transform: rotate(360deg); }
1143
1856
  }
1144
1857
 
1145
- .jux-nav-vertical .jux-nav-list {
1146
- flex-direction: column;
1858
+ /* Dots variant */
1859
+ .jux-loading-dots {
1860
+ display: flex;
1861
+ gap: var(--space-sm);
1147
1862
  }
1148
1863
 
1149
- .jux-nav-item {
1150
- position: relative;
1864
+ .jux-loading-dot {
1865
+ width: 12px;
1866
+ height: 12px;
1867
+ background: var(--color-brand);
1868
+ border-radius: var(--radius-full);
1869
+ animation: bounce 1.4s infinite ease-in-out both;
1151
1870
  }
1152
1871
 
1153
- .jux-nav-link {
1154
- display: flex;
1155
- align-items: center;
1156
- gap: var(--space-sm);
1157
- padding: var(--space-sm) var(--space-md);
1158
- color: var(--color-text-secondary);
1159
- text-decoration: none;
1160
- border-radius: var(--border-radius-md);
1161
- transition: all var(--transition-fast);
1162
- font-weight: var(--font-weight-medium);
1163
- font-size: var(--font-size-base);
1164
- cursor: pointer;
1165
- background: none;
1166
- border: none;
1167
- width: 100%;
1168
- text-align: left;
1872
+ .jux-loading-dot:nth-child(1) {
1873
+ animation-delay: -0.32s;
1169
1874
  }
1170
1875
 
1171
- .jux-nav-link:hover {
1172
- color: var(--color-text-primary);
1173
- background: var(--color-surface-hover);
1174
- text-decoration: none;
1876
+ .jux-loading-dot:nth-child(2) {
1877
+ animation-delay: -0.16s;
1175
1878
  }
1176
1879
 
1177
- .jux-nav-item-active .jux-nav-link {
1178
- color: var(--color-brand);
1179
- background: rgba(10, 156, 165, 0.1);
1180
- font-weight: var(--font-weight-semibold);
1880
+ @keyframes bounce {
1881
+ 0%, 80%, 100% {
1882
+ transform: scale(0);
1883
+ opacity: 0.5;
1884
+ }
1885
+ 40% {
1886
+ transform: scale(1);
1887
+ opacity: 1;
1888
+ }
1181
1889
  }
1182
1890
 
1183
- .jux-nav-icon {
1184
- font-size: var(--font-size-lg);
1185
- width: 1.25rem;
1186
- text-align: center;
1187
- flex-shrink: 0;
1891
+ /* Pulse variant */
1892
+ .jux-loading-pulse {
1893
+ width: 40px;
1894
+ height: 40px;
1895
+ background: var(--color-brand);
1896
+ border-radius: var(--radius-full);
1897
+ animation: pulse 1.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
1188
1898
  }
1189
1899
 
1190
- .jux-nav-label {
1191
- flex: 1;
1900
+ @keyframes pulse {
1901
+ 0%, 100% {
1902
+ opacity: 1;
1903
+ }
1904
+ 50% {
1905
+ opacity: 0.3;
1906
+ }
1192
1907
  }
1193
1908
 
1194
- .jux-nav-badge {
1195
- font-size: var(--font-size-xs);
1909
+ /* ============================================
1910
+ TOOLTIP COMPONENT
1911
+ ============================================ */
1912
+ .jux-tooltip {
1913
+ position: absolute;
1914
+ background: var(--color-surface-elevated);
1915
+ color: var(--color-text-primary);
1196
1916
  padding: var(--space-xs) var(--space-sm);
1197
- background: var(--color-danger);
1198
- color: var(--color-text-inverse);
1199
- border-radius: var(--border-radius-full);
1200
- font-weight: var(--font-weight-bold);
1201
- line-height: 1;
1917
+ font-size: var(--font-size-xs);
1918
+ border-radius: var(--radius-md);
1919
+ box-shadow: var(--shadow-lg);
1920
+ border: var(--border-width) solid var(--color-border);
1921
+ white-space: nowrap;
1922
+ pointer-events: none;
1923
+ opacity: 0;
1924
+ transition: opacity var(--transition-fast);
1925
+ z-index: 9999;
1202
1926
  }
1203
1927
 
1204
- .jux-nav-arrow {
1205
- font-size: var(--font-size-xs);
1206
- color: var(--color-text-tertiary);
1207
- margin-left: auto;
1208
- transition: transform var(--transition-fast);
1928
+ .jux-tooltip.active {
1929
+ opacity: 1;
1209
1930
  }
1210
1931
 
1211
- .jux-nav-item-expanded .jux-nav-arrow {
1212
- transform: rotate(90deg);
1932
+ .jux-tooltip::before {
1933
+ content: '';
1934
+ position: absolute;
1935
+ width: 0;
1936
+ height: 0;
1937
+ border: 5px solid transparent;
1213
1938
  }
1214
1939
 
1215
- .jux-nav-divider {
1216
- height: 1px;
1217
- background: var(--color-border);
1218
- margin: var(--space-sm) 0;
1940
+ /* Top */
1941
+ .jux-tooltip-top {
1942
+ transform: translateX(-50%) translateY(-8px);
1219
1943
  }
1220
1944
 
1221
- .jux-nav-horizontal .jux-nav-divider {
1222
- width: 1px;
1223
- height: auto;
1224
- margin: 0 var(--space-sm);
1945
+ .jux-tooltip-top::before {
1946
+ bottom: -10px;
1947
+ left: 50%;
1948
+ transform: translateX(-50%);
1949
+ border-top-color: var(--color-border);
1225
1950
  }
1226
1951
 
1227
- .jux-nav-children {
1228
- list-style: none;
1229
- padding: var(--space-xs) 0 var(--space-xs) var(--space-lg);
1230
- margin: 0;
1231
- display: flex;
1232
- flex-direction: column;
1233
- gap: var(--space-xs);
1952
+ /* Bottom */
1953
+ .jux-tooltip-bottom {
1954
+ transform: translateX(-50%) translateY(8px);
1234
1955
  }
1235
1956
 
1236
- .jux-nav-horizontal .jux-nav-children {
1237
- position: absolute;
1238
- top: 100%;
1239
- left: 0;
1240
- margin-top: var(--space-xs);
1241
- padding: var(--space-xs);
1242
- background: var(--color-surface-elevated);
1243
- border: var(--border-width) solid var(--color-border);
1244
- border-radius: var(--border-radius-lg);
1245
- box-shadow: var(--shadow-lg);
1246
- min-width: 200px;
1957
+ .jux-tooltip-bottom::before {
1958
+ top: -10px;
1959
+ left: 50%;
1960
+ transform: translateX(-50%);
1961
+ border-bottom-color: var(--color-border);
1962
+ }
1963
+
1964
+ /* Left */
1965
+ .jux-tooltip-left {
1966
+ transform: translateX(-8px) translateY(-50%);
1247
1967
  }
1248
1968
 
1969
+ .jux-tooltip-left::before {
1970
+ right: -10px;
1971
+ top: 50%;
1972
+ transform: translateY(-50%);
1973
+ border-left-color: var(--color-border);
1974
+ }
1249
1975
 
1250
- /* Code Component */
1251
- .jux-code-container {
1252
- position: relative;
1253
- background: #1e1e1e;
1254
- border: var(--border-width) solid #333;
1255
- border-radius: var(--border-radius-md);
1256
- overflow: visible;
1257
- margin: var(--space-md) 0;
1258
- font-family: var(--font-family-mono);
1976
+ /* Right */
1977
+ .jux-tooltip-right {
1978
+ transform: translateX(8px) translateY(-50%);
1259
1979
  }
1260
1980
 
1261
- .jux-code-title-bar {
1262
- display: flex;
1263
- justify-content: space-between;
1981
+ .jux-tooltip-right::before {
1982
+ left: -10px;
1983
+ top: 50%;
1984
+ transform: translateY(-50%);
1985
+ border-right-color: var(--color-border);
1986
+ }
1987
+
1988
+ /* ============================================
1989
+ DIALOG COMPONENT
1990
+ ============================================ */
1991
+ .jux-dialog {
1992
+ position: fixed;
1993
+ top: 0;
1994
+ left: 0;
1995
+ right: 0;
1996
+ bottom: 0;
1997
+ z-index: 2000;
1998
+ display: none;
1264
1999
  align-items: center;
1265
- padding: var(--space-xs) var(--space-md);
1266
- background: #2d2d2d;
1267
- border-bottom: var(--border-width) solid #333;
2000
+ justify-content: center;
2001
+ animation: fadeIn var(--transition-base);
1268
2002
  }
1269
2003
 
1270
- .jux-code-title {
1271
- font-size: var(--font-size-xs);
1272
- font-weight: var(--font-weight-medium);
1273
- color: #d4d4d4;
1274
- font-family: var(--font-family-mono);
2004
+ .jux-dialog.active {
2005
+ display: flex;
1275
2006
  }
1276
2007
 
1277
- .jux-code-language-badge {
1278
- font-size: var(--font-size-xs);
1279
- padding: 2px var(--space-sm);
1280
- background: #007acc;
1281
- color: #ffffff;
1282
- border-radius: var(--border-radius-sm);
1283
- text-transform: lowercase;
1284
- font-weight: var(--font-weight-medium);
1285
- font-family: var(--font-family-mono);
2008
+ .jux-dialog-overlay {
2009
+ position: absolute;
2010
+ top: 0;
2011
+ left: 0;
2012
+ right: 0;
2013
+ bottom: 0;
2014
+ background: rgba(0, 0, 0, 0.5);
2015
+ backdrop-filter: blur(8px);
1286
2016
  }
1287
2017
 
1288
- .jux-code-wrapper {
1289
- overflow-x: auto;
1290
- overflow-y: visible;
1291
- background: #1e1e1e;
2018
+ .jux-dialog-content {
2019
+ position: relative;
2020
+ background: var(--color-surface-elevated);
2021
+ border-radius: var(--radius-xl);
2022
+ box-shadow: var(--shadow-xl);
2023
+ max-width: 500px;
2024
+ width: 90vw;
2025
+ border: var(--border-width) solid var(--color-border);
2026
+ animation: modalSlideUp var(--transition-base);
1292
2027
  }
1293
2028
 
1294
- .jux-code-pre {
2029
+ .jux-dialog-header {
2030
+ padding: var(--space-lg) var(--space-xl);
2031
+ border-bottom: var(--border-width) solid var(--color-border);
2032
+ }
2033
+
2034
+ .jux-dialog-title {
2035
+ font-size: var(--font-size-xl);
2036
+ font-weight: var(--font-weight-semibold);
2037
+ color: var(--color-text-primary);
1295
2038
  margin: 0;
1296
- padding: var(--space-lg);
1297
- font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
1298
- font-size: 13px;
1299
- line-height: 1.6;
1300
- color: #d4d4d4;
1301
- background: transparent;
1302
- overflow-x: auto;
1303
- tab-size: 2;
1304
- -moz-tab-size: 2;
1305
2039
  }
1306
2040
 
1307
- .jux-code-wrap {
1308
- white-space: pre-wrap;
1309
- word-break: break-all;
1310
- overflow-wrap: break-word;
2041
+ .jux-dialog-body {
2042
+ padding: var(--space-xl);
1311
2043
  }
1312
2044
 
1313
- .jux-code-block {
1314
- display: block;
1315
- color: #d4d4d4;
2045
+ .jux-dialog-message {
2046
+ font-size: var(--font-size-sm);
2047
+ color: var(--color-text-secondary);
2048
+ line-height: var(--line-height-relaxed);
2049
+ margin: 0;
1316
2050
  }
1317
2051
 
1318
- .jux-code-numbered {
2052
+ .jux-dialog-footer {
2053
+ padding: var(--space-lg) var(--space-xl);
2054
+ border-top: var(--border-width) solid var(--color-border);
1319
2055
  display: flex;
1320
- flex-direction: column;
2056
+ gap: var(--space-sm);
2057
+ justify-content: flex-end;
1321
2058
  }
1322
2059
 
1323
- .jux-code-line {
1324
- display: flex;
1325
- min-height: 1.6em;
2060
+ /* Dialog variants */
2061
+ .jux-dialog-danger .jux-dialog-title {
2062
+ color: var(--color-danger);
1326
2063
  }
1327
2064
 
1328
- .jux-code-line-highlighted {
1329
- background: rgba(255, 255, 255, 0.1);
1330
- border-left: 2px solid #007acc;
1331
- margin-left: -2px;
2065
+ .jux-dialog-warning .jux-dialog-title {
2066
+ color: var(--color-warning);
1332
2067
  }
1333
2068
 
1334
- .jux-code-line-number {
1335
- flex-shrink: 0;
1336
- width: 2.5em;
1337
- padding-right: var(--space-md);
1338
- text-align: right;
1339
- color: #858585;
1340
- user-select: none;
1341
- border-right: var(--border-width) solid #333;
1342
- margin-right: var(--space-md);
1343
- font-size: 12px;
2069
+ /* ============================================
2070
+ SECTION SPACING
2071
+ ============================================ */
2072
+ .section {
2073
+ margin-bottom: var(--space-3xl);
2074
+ padding-bottom: var(--space-xl);
1344
2075
  }
1345
2076
 
1346
- .jux-code-line-content {
1347
- flex: 1;
1348
- color: #d4d4d4;
2077
+ .section:not(:last-child) {
2078
+ border-bottom: var(--border-width) solid var(--color-border);
1349
2079
  }
1350
2080
 
1351
- .jux-code-copy-btn {
1352
- position: absolute;
1353
- top: var(--space-xs);
1354
- right: var(--space-xs);
1355
- padding: 4px var(--space-sm);
1356
- font-size: var(--font-size-xs);
1357
- background: #2d2d2d;
1358
- color: #d4d4d4;
1359
- border: var(--border-width) solid #333;
1360
- border-radius: var(--border-radius-sm);
1361
- cursor: pointer;
1362
- transition: all var(--transition-fast);
1363
- font-family: var(--font-family-mono);
1364
- opacity: 0.7;
2081
+ .section h2 {
2082
+ margin-bottom: var(--space-lg);
2083
+ color: var(--color-text-primary);
1365
2084
  }
1366
2085
 
1367
- .jux-code-copy-btn:hover {
1368
- background: #007acc;
1369
- color: #ffffff;
1370
- border-color: #007acc;
1371
- opacity: 1;
2086
+ .section h3 {
2087
+ margin-top: var(--space-xl);
2088
+ margin-bottom: var(--space-md);
2089
+ color: var(--color-text-primary);
1372
2090
  }
1373
2091
 
1374
- .jux-code-container:hover .jux-code-copy-btn {
1375
- opacity: 1;
2092
+ /* ============================================
2093
+ BADGE GROUP SPACING
2094
+ ============================================ */
2095
+ .badge-group {
2096
+ display: flex;
2097
+ gap: var(--space-sm);
2098
+ flex-wrap: wrap;
2099
+ margin-top: var(--space-md);
1376
2100
  }