@duskmoon-dev/core 1.9.0 → 1.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (48) hide show
  1. package/dist/components/appbar.css +2 -2
  2. package/dist/components/autocomplete.css +1 -1
  3. package/dist/components/card.css +4 -4
  4. package/dist/components/cascader.css +1 -1
  5. package/dist/components/collapse.css +1 -1
  6. package/dist/components/datepicker.css +2 -2
  7. package/dist/components/dialog.css +1 -1
  8. package/dist/components/drawer.css +1 -1
  9. package/dist/components/file-upload.css +1 -1
  10. package/dist/components/form-group.css +33 -1
  11. package/dist/components/index.css +349 -42
  12. package/dist/components/modal.css +1 -1
  13. package/dist/components/multi-select.css +1 -1
  14. package/dist/components/navigation.css +2 -2
  15. package/dist/components/nested-menu.css +261 -0
  16. package/dist/components/popover.css +28 -16
  17. package/dist/components/snackbar.css +1 -1
  18. package/dist/components/time-input.css +1 -1
  19. package/dist/components/toast.css +1 -1
  20. package/dist/components/tooltip.css +2 -2
  21. package/dist/components/tree-select.css +1 -1
  22. package/dist/esm/components/appbar.js +2 -2
  23. package/dist/esm/components/autocomplete.js +1 -1
  24. package/dist/esm/components/card.js +4 -4
  25. package/dist/esm/components/cascader.js +1 -1
  26. package/dist/esm/components/collapse.js +1 -1
  27. package/dist/esm/components/datepicker.js +2 -2
  28. package/dist/esm/components/dialog.js +1 -1
  29. package/dist/esm/components/drawer.js +1 -1
  30. package/dist/esm/components/file-upload.js +1 -1
  31. package/dist/esm/components/form-group.js +33 -1
  32. package/dist/esm/components/modal.js +1 -1
  33. package/dist/esm/components/multi-select.js +1 -1
  34. package/dist/esm/components/navigation.js +2 -2
  35. package/dist/esm/components/nested-menu.js +268 -0
  36. package/dist/esm/components/popover.js +28 -16
  37. package/dist/esm/components/snackbar.js +1 -1
  38. package/dist/esm/components/time-input.js +1 -1
  39. package/dist/esm/components/toast.js +1 -1
  40. package/dist/esm/components/tooltip.js +2 -2
  41. package/dist/esm/components/tree-select.js +1 -1
  42. package/dist/index.css +421 -73
  43. package/dist/index.min.css +1 -0
  44. package/dist/themes/moonlight.css +34 -16
  45. package/dist/themes/ocean.css +16 -7
  46. package/dist/themes/sunset.css +5 -4
  47. package/dist/themes/sunshine.css +6 -4
  48. package/package.json +1 -1
@@ -14,7 +14,7 @@
14
14
  padding: 0 1rem;
15
15
  background-color: var(--color-surface);
16
16
  color: var(--color-on-surface);
17
- box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
17
+ box-shadow: var(--shadow-sm);
18
18
  }
19
19
 
20
20
  /* Static App Bar (default) */
@@ -55,7 +55,7 @@
55
55
 
56
56
  /* App Bar with Shadow (elevated) */
57
57
  .appbar-elevated {
58
- box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
58
+ box-shadow: var(--shadow-sm);
59
59
  }
60
60
 
61
61
  /* Flat App Bar (no shadow) */
@@ -49,7 +49,7 @@
49
49
  background-color: var(--color-surface);
50
50
  border: 1px solid var(--color-outline);
51
51
  border-radius: 0.5rem;
52
- box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
52
+ box-shadow: var(--shadow-lg);
53
53
  overflow-y: auto;
54
54
  opacity: 0;
55
55
  visibility: hidden;
@@ -13,12 +13,12 @@
13
13
  border-radius: 1rem;
14
14
  background-color: var(--color-surface);
15
15
  color: var(--color-on-surface);
16
- box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
16
+ box-shadow: var(--shadow-sm);
17
17
  transition: box-shadow 150ms ease-in-out, transform 150ms ease-in-out;
18
18
  }
19
19
 
20
20
  .card:hover {
21
- box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
21
+ box-shadow: var(--shadow-md);
22
22
  }
23
23
 
24
24
  /* Card Image */
@@ -171,11 +171,11 @@
171
171
 
172
172
  /* Elevated Variants */
173
173
  .card-elevated {
174
- box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
174
+ box-shadow: var(--shadow-lg);
175
175
  }
176
176
 
177
177
  .card-elevated:hover {
178
- box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
178
+ box-shadow: var(--shadow-xl);
179
179
  transform: translateY(-2px);
180
180
  }
181
181
 
@@ -125,7 +125,7 @@
125
125
  background-color: var(--color-surface);
126
126
  border: 1px solid var(--color-outline-variant);
127
127
  border-radius: 0.5rem;
128
- box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
128
+ box-shadow: var(--shadow-md);
129
129
  overflow: hidden;
130
130
  }
131
131
 
@@ -156,7 +156,7 @@
156
156
  border: 1px solid var(--color-outline-variant);
157
157
  border-radius: 0.75rem;
158
158
  overflow: hidden;
159
- box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
159
+ box-shadow: var(--shadow-sm);
160
160
  }
161
161
 
162
162
  .collapse-card .collapse-toggle,
@@ -116,7 +116,7 @@
116
116
  background-color: var(--color-surface);
117
117
  border: 1px solid var(--color-outline);
118
118
  border-radius: 0.75rem;
119
- box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
119
+ box-shadow: var(--shadow-lg);
120
120
  opacity: 0;
121
121
  visibility: hidden;
122
122
  transform: translateY(-0.5rem);
@@ -142,7 +142,7 @@
142
142
  background-color: var(--color-surface);
143
143
  border: 1px solid var(--color-outline);
144
144
  border-radius: 0.75rem;
145
- box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
145
+ box-shadow: var(--shadow-lg);
146
146
  }
147
147
 
148
148
  /* Calendar Header */
@@ -17,7 +17,7 @@
17
17
  background-color: var(--color-surface);
18
18
  color: var(--color-on-surface);
19
19
  border-radius: 1.5rem;
20
- box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
20
+ box-shadow: var(--shadow-2xl);
21
21
  overflow: hidden;
22
22
  }
23
23
 
@@ -27,7 +27,7 @@
27
27
  display: flex;
28
28
  flex-direction: column;
29
29
  background-color: var(--color-surface-container-low);
30
- box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
30
+ box-shadow: var(--shadow-2xl);
31
31
  transition: transform 300ms ease-out;
32
32
  }
33
33
 
@@ -286,7 +286,7 @@
286
286
  }
287
287
 
288
288
  .file-upload-button:hover {
289
- box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
289
+ box-shadow: var(--shadow-md);
290
290
  }
291
291
 
292
292
  .file-upload-button:focus-visible {
@@ -147,7 +147,7 @@
147
147
  .fieldset-card {
148
148
  background-color: var(--color-surface);
149
149
  border-color: transparent;
150
- box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
150
+ box-shadow: var(--shadow-xs);
151
151
  padding: 1.5rem;
152
152
  }
153
153
 
@@ -289,6 +289,13 @@
289
289
  border-color: var(--color-error);
290
290
  }
291
291
 
292
+ .form-group-error .input:focus-visible,
293
+ .form-group-error .select:focus-visible,
294
+ .form-group-error .textarea:focus-visible {
295
+ border-color: var(--color-error);
296
+ box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-error) 10%, transparent);
297
+ }
298
+
292
299
  /* Success State on Form Group */
293
300
  .form-group-success .form-label {
294
301
  color: var(--color-success);
@@ -300,6 +307,31 @@
300
307
  border-color: var(--color-success);
301
308
  }
302
309
 
310
+ .form-group-success .input:focus-visible,
311
+ .form-group-success .select:focus-visible,
312
+ .form-group-success .textarea:focus-visible {
313
+ border-color: var(--color-success);
314
+ box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-success) 10%, transparent);
315
+ }
316
+
317
+ /* Warning State on Form Group */
318
+ .form-group-warning .form-label {
319
+ color: var(--color-warning);
320
+ }
321
+
322
+ .form-group-warning .input,
323
+ .form-group-warning .select,
324
+ .form-group-warning .textarea {
325
+ border-color: var(--color-warning);
326
+ }
327
+
328
+ .form-group-warning .input:focus-visible,
329
+ .form-group-warning .select:focus-visible,
330
+ .form-group-warning .textarea:focus-visible {
331
+ border-color: var(--color-warning);
332
+ box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-warning) 10%, transparent);
333
+ }
334
+
303
335
  /* Disabled Form Group */
304
336
  .form-group-disabled {
305
337
  opacity: 0.5;