@duskmoon-dev/core 1.19.4 → 1.19.5

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 (29) hide show
  1. package/README.md +1 -1
  2. package/dist/components/alert.css +81 -3
  3. package/dist/components/index.css +622 -104
  4. package/dist/components/loading.css +105 -0
  5. package/dist/components/modal.css +62 -1
  6. package/dist/components/progress.css +74 -0
  7. package/dist/components/radial-progress.css +47 -0
  8. package/dist/components/skeleton.css +13 -1
  9. package/dist/components/snackbar.css +48 -18
  10. package/dist/components/toast.css +188 -34
  11. package/dist/components/tooltip.css +2 -47
  12. package/dist/esm/components/alert.js +81 -3
  13. package/dist/esm/components/loading.d.ts +5 -0
  14. package/dist/esm/components/loading.js +114 -0
  15. package/dist/esm/components/modal.js +62 -1
  16. package/dist/esm/components/progress.js +74 -0
  17. package/dist/esm/components/radial-progress.d.ts +5 -0
  18. package/dist/esm/components/radial-progress.js +56 -0
  19. package/dist/esm/components/skeleton.js +13 -1
  20. package/dist/esm/components/snackbar.js +48 -18
  21. package/dist/esm/components/toast.js +188 -34
  22. package/dist/esm/components/tooltip.js +2 -47
  23. package/dist/index.css +622 -104
  24. package/dist/index.min.css +1 -1
  25. package/dist/standalone/duskmoonui-themes.css +1 -1
  26. package/dist/standalone/duskmoonui.css +624 -106
  27. package/dist/standalone/duskmoonui.js +11 -8
  28. package/dist/standalone/duskmoonui.mjs +11 -8
  29. package/package.json +13 -1
package/README.md CHANGED
@@ -442,4 +442,4 @@ See [specs/004-oklch-color-system/quickstart.md](./specs/004-oklch-color-system/
442
442
 
443
443
  MIT
444
444
 
445
- <!-- release 35341084904 -->
445
+ <!-- release 35490001841 -->
package/dist/components/alert.css CHANGED
@@ -6,8 +6,11 @@
6
6
  @layer components {
7
7
  /* Base Alert */
8
8
  .alert {
9
- display: flex;
10
- align-items: flex-start;
9
+ display: grid;
10
+ grid-template-columns: auto minmax(0, 1fr) auto auto;
11
+ grid-template-areas:
12
+ "icon content actions close";
13
+ align-items: center;
11
14
  gap: 0.75rem;
12
15
  padding: 1rem;
13
16
  border-radius: var(--radius-sm);
@@ -18,6 +21,7 @@
18
21
 
19
22
  /* Alert Icon */
20
23
  .alert-icon {
24
+ grid-area: icon;
21
25
  display: flex;
22
26
  align-items: center;
23
27
  justify-content: center;
@@ -25,10 +29,12 @@
25
29
  height: 1.5rem;
26
30
  font-size: 1.25rem;
27
31
  flex-shrink: 0;
32
+ align-self: start;
28
33
  }
29
34
 
30
35
  /* Alert Content */
31
36
  .alert-content {
37
+ grid-area: content;
32
38
  display: flex;
33
39
  flex-direction: column;
34
40
  gap: 0.25rem;
@@ -36,13 +42,42 @@
36
42
  min-width: 0;
37
43
  }
38
44
 
45
+ .alert-content > p {
46
+ margin: 0;
47
+ }
48
+
49
+ /* Keep the compact single-message form vertically balanced against global typography margins. */
50
+ .alert > p {
51
+ margin: 0;
52
+ }
53
+
54
+ .alert-horizontal { display: grid; }
55
+ .alert-actions-end { grid-template-areas: "icon content actions close"; }
56
+ .alert-actions-bottom {
57
+ grid-template-columns: auto minmax(0, 1fr) auto;
58
+ grid-template-areas:
59
+ "icon content close"
60
+ ". actions .";
61
+ }
62
+
63
+ .alert-actions-bottom .alert-actions {
64
+ justify-self: start;
65
+ margin-top: 0.5rem;
66
+ }
67
+ .alert-vertical {
68
+ display: flex;
69
+ flex-direction: column;
70
+ }
71
+
39
72
  .alert-title {
73
+ margin: 0;
40
74
  font-size: 0.875rem;
41
75
  font-weight: 600;
42
76
  line-height: 1.25rem;
43
77
  }
44
78
 
45
79
  .alert-description {
80
+ margin: 0;
46
81
  font-size: 0.875rem;
47
82
  line-height: 1.25rem;
48
83
  opacity: 0.9;
@@ -50,6 +85,7 @@
50
85
 
51
86
  /* Alert Close Button */
52
87
  .alert-close {
88
+ grid-area: close;
53
89
  display: flex;
54
90
  align-items: center;
55
91
  justify-content: center;
@@ -263,6 +299,7 @@
263
299
  /* Dismissible */
264
300
  .alert-dismissible {
265
301
  padding-right: 2.5rem;
302
+ padding-inline-end: 2.5rem;
266
303
  position: relative;
267
304
  }
268
305
 
@@ -270,6 +307,7 @@
270
307
  position: absolute;
271
308
  top: 0.75rem;
272
309
  right: 0.75rem;
310
+ inset-inline-end: 0.75rem;
273
311
  }
274
312
 
275
313
  /* Compact */
@@ -289,11 +327,25 @@
289
327
  font-size: 0.8125rem;
290
328
  }
291
329
 
330
+ .alert-comfortable {
331
+ padding: 1.25rem;
332
+ gap: 1rem;
333
+ }
334
+
292
335
  /* Alert Actions */
293
336
  .alert-actions {
337
+ grid-area: actions;
294
338
  display: flex;
295
339
  gap: 0.5rem;
296
- margin-top: 0.5rem;
340
+ margin-top: 0;
341
+ flex-wrap: wrap;
342
+ align-self: center;
343
+ justify-self: end;
344
+ }
345
+
346
+ .alert-vertical .alert-actions {
347
+ align-self: stretch;
348
+ width: 100%;
297
349
  }
298
350
 
299
351
  .alert-filled .alert-actions .btn-text {
@@ -317,4 +369,30 @@
317
369
  transition: none;
318
370
  }
319
371
  }
372
+
373
+ @media (max-width: 32rem) {
374
+ .alert:not(.alert-vertical) .alert-content,
375
+ .alert-horizontal .alert-content {
376
+ flex-basis: min(100%, 18rem);
377
+ }
378
+ .alert:not(.alert-vertical),
379
+ .alert-horizontal {
380
+ grid-template-columns: auto minmax(0, 1fr) auto;
381
+ grid-template-areas:
382
+ "icon content close"
383
+ ". actions actions";
384
+ }
385
+ .alert:not(.alert-vertical).alert-actions-end,
386
+ .alert-horizontal.alert-actions-end {
387
+ grid-template-columns: auto minmax(0, 1fr) auto;
388
+ grid-template-areas:
389
+ "icon content close"
390
+ ". actions actions";
391
+ }
392
+ .alert:not(.alert-vertical) .alert-actions,
393
+ .alert-horizontal .alert-actions {
394
+ justify-self: start;
395
+ margin-top: 0.5rem;
396
+ }
397
+ }
320
398
  }