@devslab/dds-css 0.29.2 → 0.30.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.
- package/dist/components/toast.css +38 -1
- package/dist/dds.css +38 -1
- package/package.json +1 -1
|
@@ -38,7 +38,8 @@
|
|
|
38
38
|
width: max-content;
|
|
39
39
|
inset-inline-end: 0;
|
|
40
40
|
max-width: min(360px, calc(100vw - var(--dds-space-32)));
|
|
41
|
-
animation: dds-toast-in var(--dds-motion-duration-base)
|
|
41
|
+
animation: dds-toast-in var(--dds-motion-duration-base)
|
|
42
|
+
var(--dds-motion-easing-enter);
|
|
42
43
|
}
|
|
43
44
|
|
|
44
45
|
/* A long unbroken string (a URL, an ID) wraps inside the box instead of
|
|
@@ -48,6 +49,42 @@
|
|
|
48
49
|
overflow-wrap: anywhere;
|
|
49
50
|
}
|
|
50
51
|
|
|
52
|
+
/* Put the action beneath its message so long localized labels and notices do
|
|
53
|
+
* not compete for the same narrow mobile row. The close control stays beside
|
|
54
|
+
* the first line; the tone indicator/spinner owns the first column. */
|
|
55
|
+
.dds-toast--action {
|
|
56
|
+
display: grid;
|
|
57
|
+
grid-template-columns: auto minmax(0, 1fr) auto;
|
|
58
|
+
align-items: start;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.dds-toast--action [data-part="description"] {
|
|
62
|
+
grid-column: 2;
|
|
63
|
+
grid-row: 1;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.dds-toast--action [data-part="close-trigger"] {
|
|
67
|
+
grid-column: 3;
|
|
68
|
+
grid-row: 1;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.dds-toast--action::before,
|
|
72
|
+
.dds-toast--action > .dds-spinner {
|
|
73
|
+
grid-column: 1;
|
|
74
|
+
grid-row: 1;
|
|
75
|
+
align-self: center;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.dds-toast__action {
|
|
79
|
+
grid-column: 2;
|
|
80
|
+
grid-row: 2;
|
|
81
|
+
justify-self: start;
|
|
82
|
+
max-inline-size: 100%;
|
|
83
|
+
white-space: normal;
|
|
84
|
+
overflow-wrap: anywhere;
|
|
85
|
+
text-align: start;
|
|
86
|
+
}
|
|
87
|
+
|
|
51
88
|
.dds-toast--success::before,
|
|
52
89
|
.dds-toast--warning::before,
|
|
53
90
|
.dds-toast--danger::before,
|
package/dist/dds.css
CHANGED
|
@@ -1638,7 +1638,8 @@ dialog.dds-dialog::backdrop {
|
|
|
1638
1638
|
width: max-content;
|
|
1639
1639
|
inset-inline-end: 0;
|
|
1640
1640
|
max-width: min(360px, calc(100vw - var(--dds-space-32)));
|
|
1641
|
-
animation: dds-toast-in var(--dds-motion-duration-base)
|
|
1641
|
+
animation: dds-toast-in var(--dds-motion-duration-base)
|
|
1642
|
+
var(--dds-motion-easing-enter);
|
|
1642
1643
|
}
|
|
1643
1644
|
|
|
1644
1645
|
/* A long unbroken string (a URL, an ID) wraps inside the box instead of
|
|
@@ -1648,6 +1649,42 @@ dialog.dds-dialog::backdrop {
|
|
|
1648
1649
|
overflow-wrap: anywhere;
|
|
1649
1650
|
}
|
|
1650
1651
|
|
|
1652
|
+
/* Put the action beneath its message so long localized labels and notices do
|
|
1653
|
+
* not compete for the same narrow mobile row. The close control stays beside
|
|
1654
|
+
* the first line; the tone indicator/spinner owns the first column. */
|
|
1655
|
+
.dds-toast--action {
|
|
1656
|
+
display: grid;
|
|
1657
|
+
grid-template-columns: auto minmax(0, 1fr) auto;
|
|
1658
|
+
align-items: start;
|
|
1659
|
+
}
|
|
1660
|
+
|
|
1661
|
+
.dds-toast--action [data-part="description"] {
|
|
1662
|
+
grid-column: 2;
|
|
1663
|
+
grid-row: 1;
|
|
1664
|
+
}
|
|
1665
|
+
|
|
1666
|
+
.dds-toast--action [data-part="close-trigger"] {
|
|
1667
|
+
grid-column: 3;
|
|
1668
|
+
grid-row: 1;
|
|
1669
|
+
}
|
|
1670
|
+
|
|
1671
|
+
.dds-toast--action::before,
|
|
1672
|
+
.dds-toast--action > .dds-spinner {
|
|
1673
|
+
grid-column: 1;
|
|
1674
|
+
grid-row: 1;
|
|
1675
|
+
align-self: center;
|
|
1676
|
+
}
|
|
1677
|
+
|
|
1678
|
+
.dds-toast__action {
|
|
1679
|
+
grid-column: 2;
|
|
1680
|
+
grid-row: 2;
|
|
1681
|
+
justify-self: start;
|
|
1682
|
+
max-inline-size: 100%;
|
|
1683
|
+
white-space: normal;
|
|
1684
|
+
overflow-wrap: anywhere;
|
|
1685
|
+
text-align: start;
|
|
1686
|
+
}
|
|
1687
|
+
|
|
1651
1688
|
.dds-toast--success::before,
|
|
1652
1689
|
.dds-toast--warning::before,
|
|
1653
1690
|
.dds-toast--danger::before,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@devslab/dds-css",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.30.0",
|
|
4
4
|
"description": "DDS CSS component layer — class-based, framework-neutral, semantic-token-only (spec §4.3 v1 inventory, 20 components)",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "SEE LICENSE IN LICENSE",
|