@digdir/designsystemet-css 1.0.0-next.34 → 1.0.0-next.36
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +4 -3
- package/accordion.css +62 -52
- package/alert.css +23 -37
- package/avatar.css +31 -57
- package/badge.css +16 -43
- package/breadcrumbs.css +5 -15
- package/button.css +54 -102
- package/card.css +91 -161
- package/chip.css +85 -151
- package/combobox.css +22 -16
- package/dist/accordion.css +1 -1
- package/dist/alert.css +1 -1
- package/dist/avatar.css +1 -1
- package/dist/badge.css +1 -1
- package/dist/breadcrumbs.css +1 -1
- package/dist/button.css +1 -1
- package/dist/card.css +1 -1
- package/dist/chip.css +1 -1
- package/dist/combobox.css +1 -1
- package/dist/divider.css +1 -1
- package/dist/dropdown.css +1 -1
- package/dist/error-summary.css +1 -1
- package/dist/field.css +1 -0
- package/dist/fieldset.css +1 -1
- package/dist/heading.css +1 -0
- package/dist/helptext.css +1 -1
- package/dist/index.css +1 -1
- package/dist/input.css +1 -0
- package/dist/label.css +1 -0
- package/dist/link.css +1 -1
- package/dist/list.css +1 -1
- package/dist/modal.css +1 -1
- package/dist/pagination.css +1 -1
- package/dist/paragraph.css +1 -0
- package/dist/popover.css +1 -1
- package/dist/search.css +1 -1
- package/dist/skeleton.css +1 -1
- package/dist/skiplink.css +1 -1
- package/dist/spinner.css +1 -1
- package/dist/table.css +1 -1
- package/dist/tabs.css +1 -1
- package/dist/tag.css +1 -1
- package/dist/textfield.css +1 -1
- package/dist/togglegroup.css +1 -1
- package/dist/tooltip.css +1 -1
- package/dist/validation-message.css +1 -0
- package/divider.css +2 -1
- package/dropdown.css +24 -24
- package/error-summary.css +6 -3
- package/field.css +124 -0
- package/fieldset.css +10 -28
- package/heading.css +55 -0
- package/helptext.css +3 -14
- package/index.css +114 -10
- package/input.css +186 -0
- package/label.css +30 -0
- package/link.css +18 -12
- package/list.css +8 -16
- package/modal.css +53 -77
- package/package.json +1 -1
- package/pagination.css +28 -33
- package/paragraph.css +11 -0
- package/popover.css +14 -28
- package/search.css +82 -153
- package/skeleton.css +18 -8
- package/skiplink.css +12 -12
- package/spinner.css +20 -21
- package/table.css +23 -21
- package/tabs.css +27 -27
- package/tag.css +8 -47
- package/textfield.css +2 -2
- package/togglegroup.css +6 -1
- package/tooltip.css +21 -6
- package/validation-message.css +25 -0
- package/checkbox.css +0 -223
- package/dist/checkbox.css +0 -1
- package/dist/radio.css +0 -1
- package/dist/select.css +0 -1
- package/dist/switch.css +0 -1
- package/dist/textarea.css +0 -1
- package/dist/utilities.css +0 -1
- package/radio.css +0 -200
- package/select.css +0 -106
- package/switch.css +0 -246
- package/textarea.css +0 -80
- package/utilities.css +0 -41
package/chip.css
CHANGED
|
@@ -1,173 +1,107 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
1
|
+
.ds-chip {
|
|
2
|
+
--dsc-chip-background: var(--ds-color-surface-default);
|
|
3
|
+
--dsc-chip-background--hover: var(--ds-color-surface-hover);
|
|
4
|
+
--dsc-chip-background--active: var(--ds-color-surface-active);
|
|
5
|
+
--dsc-chip-background--checked: var(--ds-color-base-default);
|
|
6
|
+
--dsc-chip-background--checked--hover: var(--ds-color-base-hover);
|
|
7
|
+
--dsc-chip-background--checked--active: var(--ds-color-base-active);
|
|
8
|
+
--dsc-chip-border-color: var(--ds-color-border-subtle);
|
|
9
|
+
--dsc-chip-border-color--checked: transparent;
|
|
10
|
+
--dsc-chip-color: var(--ds-color-text-default);
|
|
11
|
+
--dsc-chip-color--checked: var(--ds-color-contrast-default);
|
|
12
|
+
--dsc-chip-input-color: var(--ds-color-border-strong);
|
|
13
|
+
--dsc-chip-input-color--checked: var(--ds-color-base-default);
|
|
7
14
|
|
|
8
|
-
.ds-chip--button {
|
|
9
|
-
--dsc-chip-height: var(--ds-sizing-7);
|
|
10
|
-
--dsc-chip-padding: 0 var(--ds-spacing-3);
|
|
11
|
-
--dsc-chip-background: var(--ds-color-accent-surface-default);
|
|
12
|
-
--dsc-chip-text-color: var(--ds-color-accent-text-default);
|
|
13
|
-
--dsc-chip-border: var(--ds-color-accent-border-subtle);
|
|
14
15
|
--dsc-chip-border-radius: var(--ds-border-radius-full);
|
|
16
|
+
--dsc-chip-height: var(--ds-sizing-8);
|
|
17
|
+
--dsc-chip-icon-size: var(--ds-spacing-7);
|
|
18
|
+
--dsc-chip-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' fill='none' viewBox='0 0 24 24' focusable='false' role='img'%3E%3Cpath fill='currentColor' d='M6.53 5.47a.75.75 0 0 0-1.06 1.06L10.94 12l-5.47 5.47a.75.75 0 1 0 1.06 1.06L12 13.06l5.47 5.47a.75.75 0 1 0 1.06-1.06L13.06 12l5.47-5.47a.75.75 0 0 0-1.06-1.06L12 10.94z'%3E%3C/path%3E%3C/svg%3E");
|
|
19
|
+
--dsc-chip-input-size: var(--ds-spacing-6);
|
|
20
|
+
--gap: calc((var(--dsc-chip-height) - var(--dsc-chip-input-size)) / 2); /* Distance between edge of input and chip */
|
|
15
21
|
|
|
22
|
+
align-items: center;
|
|
16
23
|
background: var(--dsc-chip-background);
|
|
17
|
-
padding: var(--dsc-chip-padding);
|
|
18
|
-
min-height: var(--dsc-chip-height);
|
|
19
24
|
border-radius: var(--dsc-chip-border-radius);
|
|
20
|
-
border: 1px solid var(--dsc-chip-border);
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
25
|
+
border: 1px solid var(--dsc-chip-border-color);
|
|
26
|
+
box-sizing: border-box;
|
|
27
|
+
color: var(--dsc-chip-color);
|
|
28
|
+
cursor: pointer;
|
|
24
29
|
display: inline-flex;
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
.ds-chip--button[aria-disabled='true'] {
|
|
30
|
-
cursor: not-allowed;
|
|
31
|
-
opacity: var(--ds-disabled-opacity);
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
.ds-chip--button .ds-chip__label {
|
|
35
|
-
color: inherit;
|
|
36
|
-
line-height: normal;
|
|
37
|
-
display: flex;
|
|
38
|
-
align-items: center;
|
|
39
|
-
flex-direction: row;
|
|
40
|
-
gap: var(--ds-spacing-2);
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
.ds-chip--removable {
|
|
44
|
-
--dsc-removable-background: var(--ds-color-accent-base-default);
|
|
45
|
-
--dsc-removable-text-color: var(--ds-color-neutral-contrast-default);
|
|
46
|
-
--dsc-removable-chip-size: var(--ds-sizing-7);
|
|
47
|
-
--dsc-removable-chip-xmark-color: var(--ds-color-neutral-contrast-default);
|
|
48
|
-
--dsc-removable-chip-xmark-padding_right: var(--ds-spacing-1);
|
|
49
|
-
--dsc-removable-chip-xmark-size: var(--ds-sizing-6);
|
|
50
|
-
--dsc-removable-chip-xmark-wrapper-width: calc(var(--dsc-removable-chip-xmark-size) + var(--dsc-removable-chip-xmark-padding_right));
|
|
51
|
-
|
|
52
|
-
color: var(--dsc-removable-text-color);
|
|
53
|
-
background: var(--dsc-removable-background);
|
|
54
|
-
border: 0;
|
|
55
|
-
padding-right: var(--ds-spacing-2);
|
|
30
|
+
font-family: inherit;
|
|
31
|
+
gap: var(--gap);
|
|
32
|
+
line-height: var(--ds-line-height-sm);
|
|
33
|
+
margin: 0;
|
|
56
34
|
min-height: var(--dsc-chip-height);
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
.ds-chip--removable.ds-chip--sm {
|
|
60
|
-
padding-right: var(--ds-spacing-1);
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
.ds-chip--removable.ds-chip--lg {
|
|
64
|
-
padding-right: var(--ds-spacing-2);
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
.ds-chip__x-mark {
|
|
68
|
-
color: var(--dsc-removable-chip-xmark-color);
|
|
69
|
-
height: var(--dsc-removable-chip-xmark-size);
|
|
70
|
-
width: var(--dsc-removable-chip-xmark-size);
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
.ds-chip__x-mark .ds-chip__icon {
|
|
74
|
-
height: var(--dsc-removable-chip-xmark-size);
|
|
75
|
-
width: var(--dsc-removable-chip-xmark-size);
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
.ds-chip--spacing {
|
|
79
|
-
padding-left: var(--ds-spacing-2) !important;
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
.ds-chip--sm .ds-chip__checkmark-icon {
|
|
83
|
-
height: var(--ds-sizing-5);
|
|
84
|
-
width: auto;
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
.ds-chip--md .ds-chip__checkmark-icon {
|
|
88
|
-
height: 24px;
|
|
89
|
-
width: auto;
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
.ds-chip--lg .ds-chip__checkmark-icon {
|
|
93
|
-
height: 26px;
|
|
94
|
-
width: auto;
|
|
95
|
-
}
|
|
35
|
+
padding: 0 var(--ds-spacing-3);
|
|
36
|
+
text-decoration: none;
|
|
96
37
|
|
|
97
|
-
|
|
98
|
-
--dsc-chip-group-gap: var(--ds-spacing-2);
|
|
38
|
+
@composes ds-focus from './base/base.css';
|
|
99
39
|
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
gap: var(--dsc-chip-group-gap);
|
|
104
|
-
list-style: none;
|
|
105
|
-
margin: 0;
|
|
106
|
-
padding: 0;
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
.ds-chip--group-container.ds-chip--sm {
|
|
110
|
-
--dsc-chip-group-gap: var(--ds-spacing-2);
|
|
111
|
-
}
|
|
40
|
+
&:not([data-size]) {
|
|
41
|
+
font-size: var(--ds-font-size-minus-1);
|
|
42
|
+
}
|
|
112
43
|
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
44
|
+
/* Show focus ring when input inside is focused by keyboard interaction */
|
|
45
|
+
&:has(:focus-visible) {
|
|
46
|
+
@composes ds-focus--visible from './base/base.css';
|
|
47
|
+
}
|
|
116
48
|
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
49
|
+
&:disabled,
|
|
50
|
+
&:has(input:disabled),
|
|
51
|
+
&[aria-disabled='true'] {
|
|
52
|
+
cursor: not-allowed;
|
|
53
|
+
opacity: var(--ds-disabled-opacity);
|
|
54
|
+
}
|
|
120
55
|
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
.ds-chip--button:not(:disabled, [aria-disabled='true']):hover {
|
|
124
|
-
--dsc-chip-background: var(--ds-color-accent-surface-hover);
|
|
125
|
-
--dsc-chip-text-color: var(--ds-color-accent-text-default);
|
|
126
|
-
--dsc-chip-border: var(--ds-color-accent-border-default);
|
|
56
|
+
&[data-removable] {
|
|
57
|
+
padding-inline-end: var(--gap);
|
|
127
58
|
|
|
128
|
-
|
|
59
|
+
&::after {
|
|
60
|
+
content: '';
|
|
61
|
+
background: currentcolor;
|
|
62
|
+
height: var(--dsc-chip-icon-size);
|
|
63
|
+
mask: center / contain no-repeat var(--dsc-chip-icon-url);
|
|
64
|
+
width: var(--dsc-chip-icon-size);
|
|
65
|
+
}
|
|
129
66
|
}
|
|
130
67
|
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
--dsc-chip-text-color: var(--ds-color-accent-text-default);
|
|
68
|
+
&:has(input[type='radio']) {
|
|
69
|
+
padding-inline-start: var(--gap);
|
|
134
70
|
}
|
|
135
71
|
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
--dsc-removable-chip-xmark-color: var(--ds-color-accent-contrast-default);
|
|
72
|
+
&:has(input[type='checkbox']) {
|
|
73
|
+
--dsc-chip-border-radius: var(--ds-border-radius-md);
|
|
74
|
+
padding-inline: var(--gap);
|
|
140
75
|
}
|
|
141
|
-
}
|
|
142
|
-
|
|
143
|
-
.ds-chip--button:is([aria-pressed='true']),
|
|
144
|
-
.ds-chip--button:not(:disabled, [aria-disabled='true']):active,
|
|
145
|
-
.ds-chip--removable:is([aria-pressed='true']),
|
|
146
|
-
.ds-chip--removable:not(:disabled, [aria-disabled='true']):active {
|
|
147
|
-
--dsc-chip-background: var(--ds-color-accent-base-active);
|
|
148
|
-
--dsc-chip-text-color: var(--ds-color-accent-contrast-default);
|
|
149
|
-
--dsc-chip-border: var(--ds-color-accent-base-active);
|
|
150
|
-
--dsc-removable-background: var(--ds-color-accent-base-active);
|
|
151
|
-
--dsc-removable-text-color: var(--ds-color-neutral-contrast-default);
|
|
152
|
-
}
|
|
153
76
|
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
77
|
+
& > input {
|
|
78
|
+
--dsc-input-background--checked: var(--dsc-chip-color);
|
|
79
|
+
--dsc-input-background: transparent;
|
|
80
|
+
--dsc-input-border-color--checked: var(--dsc-chip-color);
|
|
81
|
+
--dsc-input-border-color: var(--dsc-chip-input-color);
|
|
82
|
+
--dsc-input-color--checked: var(--dsc-chip-input-color--checked);
|
|
83
|
+
--dsc-input-size--toggle: var(--dsc-chip-input-size);
|
|
84
|
+
}
|
|
160
85
|
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
86
|
+
&:has(input:checked),
|
|
87
|
+
&[data-removable] {
|
|
88
|
+
--dsc-chip-color: var(--dsc-chip-color--checked);
|
|
89
|
+
--dsc-chip-background: var(--dsc-chip-background--checked);
|
|
90
|
+
--dsc-chip-border-color: var(--dsc-chip-border-color--checked);
|
|
91
|
+
--dsc-chip-background--hover: var(--dsc-chip-background--checked--hover);
|
|
92
|
+
--dsc-chip-background--active: var(--dsc-chip-background--checked--active);
|
|
93
|
+
}
|
|
167
94
|
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
95
|
+
/* Only use hover for non-touch devices to prevent sticky-hovering */
|
|
96
|
+
@media (hover: hover) and (pointer: fine) {
|
|
97
|
+
&:not(:has(:disabled, [aria-disabled='true'])) {
|
|
98
|
+
&:hover {
|
|
99
|
+
--dsc-chip-background: var(--dsc-chip-background--hover);
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
&:active {
|
|
103
|
+
--dsc-chip-background: var(--dsc-chip-background--active);
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
}
|
|
173
107
|
}
|
package/combobox.css
CHANGED
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
color: var(--ds-color-neutral-text-default);
|
|
16
16
|
overflow-y: auto;
|
|
17
17
|
z-index: 1600;
|
|
18
|
-
border-radius:
|
|
18
|
+
border-radius: var(--ds-border-radius-md);
|
|
19
19
|
box-shadow: var(--ds-shadow-md);
|
|
20
20
|
border: 1px solid var(--ds-color-neutral-border-default);
|
|
21
21
|
}
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
gap: var(--ds-spacing-1);
|
|
32
32
|
cursor: text;
|
|
33
33
|
padding: var(--ds-spacing-2);
|
|
34
|
-
border-radius:
|
|
34
|
+
border-radius: var(--ds-border-radius-md);
|
|
35
35
|
width: 100%;
|
|
36
36
|
height: auto;
|
|
37
37
|
justify-content: space-between;
|
|
@@ -40,11 +40,17 @@
|
|
|
40
40
|
.ds-combobox__input__wrapper .ds-combobox__input {
|
|
41
41
|
height: 100%;
|
|
42
42
|
min-width: 50px;
|
|
43
|
+
width: 100%;
|
|
43
44
|
flex-grow: 1;
|
|
44
45
|
appearance: none;
|
|
45
46
|
border: none;
|
|
46
47
|
background-color: transparent;
|
|
47
48
|
color: var(--ds-color-neutral-text-default);
|
|
49
|
+
box-sizing: border-box;
|
|
50
|
+
font-family: inherit;
|
|
51
|
+
font-size: inherit;
|
|
52
|
+
line-height: inherit;
|
|
53
|
+
font-weight: inherit;
|
|
48
54
|
}
|
|
49
55
|
|
|
50
56
|
.ds-combobox--sm .ds-combobox__input__wrapper {
|
|
@@ -87,8 +93,8 @@
|
|
|
87
93
|
}
|
|
88
94
|
|
|
89
95
|
.ds-combobox__input__wrapper.ds-combobox--readonly {
|
|
90
|
-
background: var(--ds-color-
|
|
91
|
-
border-color: var(--ds-color-
|
|
96
|
+
background: var(--ds-color-base-default);
|
|
97
|
+
border-color: var(--ds-color-base-default);
|
|
92
98
|
}
|
|
93
99
|
|
|
94
100
|
.ds-combobox__label {
|
|
@@ -167,8 +173,8 @@
|
|
|
167
173
|
}
|
|
168
174
|
|
|
169
175
|
/**
|
|
170
|
-
|
|
171
|
-
|
|
176
|
+
* Apply a focus outline on an element when it is focused with keyboard
|
|
177
|
+
*/
|
|
172
178
|
.ds-combobox__input__wrapper:has(input:focus) {
|
|
173
179
|
--dsc-focus-border-width: 3px;
|
|
174
180
|
|
|
@@ -199,7 +205,7 @@
|
|
|
199
205
|
padding-left: var(--ds-spacing-1);
|
|
200
206
|
border: none;
|
|
201
207
|
border-left: 5px solid transparent;
|
|
202
|
-
border-radius:
|
|
208
|
+
border-radius: var(--ds-border-radius-sm);
|
|
203
209
|
justify-content: start;
|
|
204
210
|
background: none;
|
|
205
211
|
text-align: left;
|
|
@@ -210,8 +216,8 @@
|
|
|
210
216
|
}
|
|
211
217
|
|
|
212
218
|
.ds-combobox__option.ds-combobox__option--active {
|
|
213
|
-
background: var(--ds-color-
|
|
214
|
-
border-left: 5px solid var(--ds-color-
|
|
219
|
+
background: var(--ds-color-background-subtle);
|
|
220
|
+
border-left: 5px solid var(--ds-color-base-default);
|
|
215
221
|
}
|
|
216
222
|
|
|
217
223
|
.ds-combobox__option > div {
|
|
@@ -234,21 +240,21 @@
|
|
|
234
240
|
}
|
|
235
241
|
|
|
236
242
|
.ds-combobox__option--active .ds-combobox__option__label {
|
|
237
|
-
color: var(--ds-color-
|
|
243
|
+
color: var(--ds-color-text-default);
|
|
238
244
|
}
|
|
239
245
|
|
|
240
246
|
.ds-combobox__option__icon-wrapper {
|
|
241
247
|
width: var(--ds-spacing-6);
|
|
242
248
|
aspect-ratio: 1 / 1;
|
|
243
249
|
border: 2px solid var(--ds-color-neutral-border-default);
|
|
244
|
-
border-radius:
|
|
250
|
+
border-radius: var(--ds-border-radius-sm);
|
|
245
251
|
background-color: var(--ds-color-neutral-background-default);
|
|
246
252
|
display: grid;
|
|
247
253
|
place-items: center;
|
|
248
254
|
}
|
|
249
255
|
|
|
250
256
|
.ds-combobox__option--active .ds-combobox__option__icon-wrapper {
|
|
251
|
-
border-color: var(--ds-color-
|
|
257
|
+
border-color: var(--ds-color-base-default);
|
|
252
258
|
}
|
|
253
259
|
|
|
254
260
|
.ds-combobox--sm .ds-combobox__option .ds-combobox__option__icon-wrapper {
|
|
@@ -264,8 +270,8 @@
|
|
|
264
270
|
}
|
|
265
271
|
|
|
266
272
|
.ds-combobox__option__icon-wrapper.ds-combobox__option__icon-wrapper--selected {
|
|
267
|
-
border-color: var(--ds-color-
|
|
268
|
-
background-color: var(--ds-color-
|
|
273
|
+
border-color: var(--ds-color-base-default);
|
|
274
|
+
background-color: var(--ds-color-base-default);
|
|
269
275
|
}
|
|
270
276
|
|
|
271
277
|
.ds-combobox__option__icon-wrapper__icon {
|
|
@@ -281,8 +287,8 @@
|
|
|
281
287
|
}
|
|
282
288
|
|
|
283
289
|
.ds-combobox__option--active .ds-combobox__option__icon-wrapper__icon {
|
|
284
|
-
stroke: var(--ds-color-
|
|
285
|
-
color: var(--ds-color-
|
|
290
|
+
stroke: var(--ds-color-text-default);
|
|
291
|
+
color: var(--ds-color-text-default);
|
|
286
292
|
}
|
|
287
293
|
|
|
288
294
|
.ds-combobox__option__icon-wrapper.ds-combobox__option__icon-wrapper--selected .ds-combobox__option__icon-wrapper__icon {
|
package/dist/accordion.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.ds-accordion-group{--dsc-accordion-background:var(--ds-color-neutral-background-default);--dsc-accordion-
|
|
1
|
+
.ds-accordion-group{--dsc-accordion-background:var(--ds-color-neutral-background-default);--dsc-accordion-heading-background--hover:var(--ds-color-neutral-surface-default);--dsc-accordion-heading-background--open:var(--ds-color-neutral-background-subtle);--dsc-accordion-heading-background:var(--ds-color-neutral-background-default);--dsc-accordion-border-color:var(--ds-color-neutral-border-subtle)}.ds-accordion-group[data-color]:where(:not([data-color=subtle])){--dsc-accordion-background:var(--ds-color-background-subtle);--dsc-accordion-heading-background--hover:var(--ds-color-surface-hover);--dsc-accordion-heading-background--open:var(--ds-color-surface-default);--dsc-accordion-heading-background:var(--ds-color-surface-default);--dsc-accordion-border-color:var(--ds-color-border-subtle)}.ds-accordion-group[data-color=neutral]{--dsc-accordion-background:var(--ds-color-background-default);--dsc-accordion-heading-background--hover:var(--ds-color-surface-default);--dsc-accordion-heading-background--open:var(--ds-color-background-subtle);--dsc-accordion-heading-background:var(--ds-color-background-default)}.ds-accordion-group[data-color=subtle]{--dsc-accordion-background:var(--ds-color-neutral-background-subtle);--dsc-accordion-heading-background--hover:var(--ds-color-neutral-surface-hover);--dsc-accordion-heading-background--open:var(--ds-color-neutral-surface-default);--dsc-accordion-heading-background:var(--ds-color-neutral-background-subtle)}.ds-accordion-group{--dsc-accordion-border:1px solid var(--dsc-accordion-border-color);--dsc-accordion-border-radius:var(--ds-border-radius-md);--dsc-accordion-chevron-gap:var(--ds-spacing-2);--dsc-accordion-chevron-size:var(--ds-spacing-6);--dsc-accordion-chevron-url:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.97 9.47a.75.75 0 0 1 1.06 0L12 14.44l4.97-4.97a.75.75 0 1 1 1.06 1.06l-5.5 5.5a.75.75 0 0 1-1.06 0l-5.5-5.5a.75.75 0 0 1 0-1.06'/%3E%3C/svg%3E");--dsc-accordion-padding:var(--ds-spacing-2) var(--ds-spacing-4);--dsc-accordion-size:var(--ds-sizing-14)}.ds-accordion-group[data-border]>*{border:var(--dsc-accordion-border)}:is(.ds-accordion-group[data-border]>*):first-child,:is(.ds-accordion-group[data-border]>*):first-child>:is(summary,u-summary){border-top-left-radius:var(--dsc-accordion-border-radius);border-top-right-radius:var(--dsc-accordion-border-radius)}:is(.ds-accordion-group[data-border]>*):last-child,:is(.ds-accordion-group[data-border]>*):last-child:not([open])>:is(summary,u-summary){border-bottom-left-radius:var(--dsc-accordion-border-radius);border-bottom-right-radius:var(--dsc-accordion-border-radius)}.ds-accordion__item{background:var(--dsc-accordion-background);border-block:var(--dsc-accordion-border);box-sizing:border-box}.ds-accordion__item>:is(summary,u-summary){align-items:center;background:var(--dsc-accordion-heading-background);box-sizing:border-box;cursor:pointer;display:flex;gap:var(--dsc-accordion-chevron-gap);list-style:none;min-height:var(--dsc-accordion-size);outline:none;padding:var(--dsc-accordion-padding);position:relative}:is(.ds-accordion__item>:is(summary,u-summary)):focus-visible{box-shadow:var(--ds--focus,var(--dsc-focus-boxShadow));outline:var(--ds--focus,var(--dsc-focus-outline));outline-offset:var(--ds--focus,var(--dsc-focus-border-width))}:is(.ds-accordion__item>:is(summary,u-summary)):focus-visible *{--ds--focus: }:is(.ds-accordion__item>:is(summary,u-summary)):focus-visible{position:relative}:is(.ds-accordion__item>:is(summary,u-summary)):before{background:currentcolor;border-radius:var(--ds-border-radius-md);content:"";flex-shrink:0;height:var(--dsc-accordion-chevron-size);-webkit-mask:50%/contain no-repeat var(--dsc-accordion-chevron-url);mask:50%/contain no-repeat var(--dsc-accordion-chevron-url);width:var(--dsc-accordion-chevron-size)}.ds-accordion__item+.ds-accordion__item{border-top:0}.ds-accordion__item>:not(summary,u-summary){border-radius:inherit;padding:var(--ds-spacing-5,1rem)}.ds-accordion__item[open]>:is(summary,u-summary){background:var(--dsc-accordion-heading-background--open)}:is(.ds-accordion__item[open]>:is(summary,u-summary)):before{rotate:180deg}@media (hover:hover) and (pointer:fine){.ds-accordion__item>:is(summary,u-summary):hover{background:var(--dsc-accordion-heading-background--hover)}}@media (prefers-reduced-motion:no-preference){.ds-accordion__item{interpolate-size:allow-keywords}}.ds-accordion__item::part(details-content){block-size:0;overflow-y:clip;transition:content-visibility allow-discrete .4s,height .4s}.ds-accordion__item[open]::part(details-content){height:auto}
|
package/dist/alert.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.ds-alert{--dsc-alert-background:var(--ds-color-info-surface-default);--dsc-alert-border-color:var(--ds-color-info-border-
|
|
1
|
+
.ds-alert{--dsc-alert-background:var(--ds-color-info-surface-default);--dsc-alert-border-color:var(--ds-color-info-border-default);--dsc-alert-icon-color:var(--ds-color-info-text-subtle);--dsc-alert-icon-url:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M3.25 4A.75.75 0 0 1 4 3.25h16a.75.75 0 0 1 .75.75v16a.75.75 0 0 1-.75.75H4a.75.75 0 0 1-.75-.75zM11 7.75a1 1 0 1 1 2 0 1 1 0 0 1-2 0m-1.25 3a.75.75 0 0 1 .75-.75H12a.75.75 0 0 1 .75.75v4.75h.75a.75.75 0 0 1 0 1.5h-3a.75.75 0 0 1 0-1.5h.75v-4h-.75a.75.75 0 0 1-.75-.75'/%3E%3C/svg%3E");--dsc-alert-border-radius:var(--ds-border-radius-md);--dsc-alert-color:var(--ds-color-neutral-text-default);--dsc-alert-gap:var(--ds-spacing-2);--dsc-alert-icon-size:var(--ds-sizing-7);--dsc-alert-padding:var(--ds-spacing-6);background:var(--dsc-alert-background);border:1px solid var(--dsc-alert-border-color);border-radius:var(--dsc-alert-border-radius);box-sizing:border-box;color:var(--dsc-alert-color);padding-block:var(--dsc-alert-padding);padding-inline:calc(var(--dsc-alert-padding) + var(--dsc-alert-icon-size) + var(--dsc-alert-gap)) var(--dsc-alert-padding);position:relative}.ds-alert:not(:has(>:is(h1,h2,h3,h4,h5,h6):first-child)):before,.ds-alert>:is(h1,h2,h3,h4,h5,h6):first-child:before{background:var(--dsc-alert-icon-color);content:"";height:var(--dsc-alert-icon-size);margin-inline:calc((var(--dsc-alert-icon-size) + var(--dsc-alert-gap))*-1);-webkit-mask:var(--dsc-alert-icon-url) center /contain no-repeat;mask:var(--dsc-alert-icon-url) center /contain no-repeat;position:absolute;translate:0 calc((1lh - var(--dsc-alert-icon-size))/2);width:var(--dsc-alert-icon-size)}.ds-alert[data-color]{--dsc-alert-background:var(--ds-color-surface-default);--dsc-alert-border-color:var(--ds-color-border-default);--dsc-alert-icon-color:var(--ds-color-text-subtle)}.ds-alert[data-color=warning]{--dsc-alert-icon-url:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2.25a.75.75 0 0 1 .66.39l9.52 17.25a.75.75 0 0 1-.65 1.11H2.47a.75.75 0 0 1-.65-1.11l9.52-17.25a.75.75 0 0 1 .66-.39m0 6.5a.75.75 0 0 1 .75.75v4a.75.75 0 0 1-1.5 0v-4a.75.75 0 0 1 .75-.75m-1 7.75a1 1 0 1 1 2 0 1 1 0 0 1-2 0'/%3E%3C/svg%3E")}.ds-alert[data-color=success]{--dsc-alert-icon-url:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 21.75a9.75 9.75 0 1 0 0-19.5 9.75 9.75 0 0 0 0 19.5m4.95-12.47a.81.81 0 0 0-1.24-1.05l-5.39 6.36-2.62-2.62a.81.81 0 0 0-1.15 1.15l3.25 3.25a.81.81 0 0 0 1.2-.05z'/%3E%3C/svg%3E")}.ds-alert[data-color=danger]{--dsc-alert-icon-url:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M7.74 2.47a.75.75 0 0 1 .53-.22h7.46a.75.75 0 0 1 .53.22l5.27 5.27c.14.14.22.33.22.53v7.46a.75.75 0 0 1-.22.53l-5.27 5.27a.75.75 0 0 1-.53.22H8.27a.75.75 0 0 1-.53-.22l-5.27-5.27a.75.75 0 0 1-.22-.53V8.27a.75.75 0 0 1 .22-.53zm1.29 5.5a.75.75 0 0 0-1.06 1.06L10.94 12l-2.97 2.97a.75.75 0 1 0 1.06 1.06L12 13.06l2.97 2.97a.75.75 0 1 0 1.06-1.06L13.06 12l2.97-2.97a.75.75 0 0 0-1.06-1.06L12 10.94z'/%3E%3C/svg%3E")}
|
package/dist/avatar.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.ds-avatar{--dsc-avatar-
|
|
1
|
+
.ds-avatar{--dsc-avatar-icon-url:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M8.25 7.5a3.75 3.75 0 1 1 7.5 0 3.75 3.75 0 0 1-7.5 0M12 2.25a5.25 5.25 0 1 0 0 10.5 5.25 5.25 0 0 0 0-10.5M8.288 17.288A5.25 5.25 0 0 1 17.25 21a.75.75 0 0 0 1.5 0 6.75 6.75 0 0 0-13.5 0 .75.75 0 0 0 1.5 0 5.25 5.25 0 0 1 1.538-3.712' clip-rule='evenodd'/%3E%3C/svg%3E");--dsc-avatar-background:var(--ds-color-accent-base-default);--dsc-avatar-color:var(--ds-color-accent-contrast-default)}.ds-avatar[data-color]{--dsc-avatar-background:var(--ds-color-base-default);--dsc-avatar-color:var(--ds-color-contrast-default)}.ds-avatar{--dsc-avatar-size:var(--ds-sizing-12);--dsc-avatar-padding:var(--ds-spacing-2);--dsc-avatar-border-radius:var(--ds-border-radius-full);align-items:center;background:var(--dsc-avatar-background);border-radius:var(--dsc-avatar-border-radius);box-sizing:border-box;color:var(--dsc-avatar-color);display:inline-flex;flex-shrink:0;font-weight:var(--ds-font-weight-medium);height:var(--dsc-avatar-size);justify-content:center;overflow:hidden;text-decoration:none;text-transform:uppercase;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:var(--dsc-avatar-size)}.ds-avatar:not(:has(img)){padding:var(--dsc-avatar-padding)}.ds-avatar img,.ds-avatar svg{height:100%;object-fit:cover;width:100%}.ds-avatar[data-initials]:empty:before{content:attr(data-initials);font-size:round(down,1.3em,.0625rem)}.ds-avatar:not([data-initials]):empty:before{background:currentcolor;content:"";height:100%;-webkit-mask:var(--dsc-avatar-icon-url) center /contain no-repeat;mask:var(--dsc-avatar-icon-url) center /contain no-repeat;width:100%}.ds-avatar[data-variant=circle]{--dsc-avatar-border-radius:var(--ds-border-radius-full)}.ds-avatar[data-variant=square]{--dsc-avatar-border-radius:var(--ds-border-radius-sm)}.ds-avatar[data-size=xs]{font-size:var(--ds-font-size-1)}.ds-avatar[data-size=sm]{font-size:var(--ds-font-size-3)}
|
package/dist/badge.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.ds-badge{--dsc-badge-background:var(--ds-color-
|
|
1
|
+
.ds-badge{--dsc-badge-background:var(--ds-color-base-default);--dsc-badge-color:var(--ds-color-contrast-default)}.ds-badge[data-color=neutral]{--dsc-badge-background:var(--ds-color-neutral-surface-default);--dsc-badge-color:var(--ds-color-neutral-text-default)}.ds-badge{--dsc-badge-padding:0 calc(var(--ds-spacing-1) + var(--ds-spacing-1)/2);--dsc-badge-size:calc(var(--ds-sizing-3) + var(--ds-spacing-1)/2);box-sizing:border-box;display:inline-flex;line-height:var(--ds-line-height-sm);position:relative}.ds-badge:before{background:var(--dsc-badge-background);border-radius:var(--ds-border-radius-full);box-sizing:border-box;color:var(--dsc-badge-color);content:attr(data-count);display:grid;font-size:var(--ds-font-size-minus-1);min-height:var(--dsc-badge-size);min-width:var(--dsc-badge-size);padding:var(--dsc-badge-padding);place-items:center}.ds-badge :where(img,svg){flex-shrink:0;font-size:1.25em}.ds-badge[data-placement]:before{position:absolute}.ds-badge[data-placement=top-right]:before{right:0;top:0;translate:50% -50%}.ds-badge[data-placement=top-left]:before{left:0;top:0;translate:-50% -50%}.ds-badge[data-placement=bottom-right]:before{bottom:0;right:0;translate:50% 50%}.ds-badge[data-placement=bottom-left]:before{bottom:0;left:0;translate:-50% 50%}.ds-badge[data-placement=top-right][data-overlap=circle]:before{right:14%;top:14%;translate:50% -50%}.ds-badge[data-placement=top-left][data-overlap=circle]:before{left:14%;top:14%;translate:-50% -50%}.ds-badge[data-placement=bottom-right][data-overlap=circle]:before{bottom:14%;right:14%;translate:50% 50%}.ds-badge[data-placement=bottom-left][data-overlap=circle]:before{bottom:14%;left:14%;translate:-50% 50%}
|
package/dist/breadcrumbs.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.ds-breadcrumbs{--dsc-breadcrumbs-spacing:var(--ds-spacing-2);--dsc-breadcrumbs-chevron-size:var(--ds-sizing-6)
|
|
1
|
+
.ds-breadcrumbs{--dsc-breadcrumbs-spacing:var(--ds-spacing-2);--dsc-breadcrumbs-chevron-size:var(--ds-sizing-6);--dsc-breadcrumbs-icon-url:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath d='M9.47 5.97a.75.75 0 0 1 1.06 0l5.5 5.5a.75.75 0 0 1 0 1.06l-5.5 5.5a.75.75 0 1 1-1.06-1.06L14.44 12 9.47 7.03a.75.75 0 0 1 0-1.06'/%3E%3C/svg%3E")}.ds-breadcrumbs>:is(ol,ul){display:flex;flex-wrap:wrap;gap:var(--dsc-breadcrumbs-spacing) 0;list-style-type:none;margin:0;padding:0}.ds-breadcrumbs a:not(:focus-visible){color:inherit}.ds-breadcrumbs a[aria-current=page]{text-decoration:none}.ds-breadcrumbs li:where(:not(:last-child)):after,.ds-breadcrumbs>:not(ol,ul):before{background:currentcolor;content:"";display:inline-block;height:var(--dsc-breadcrumbs-chevron-size);margin-inline:var(--dsc-breadcrumbs-spacing);-webkit-mask:center/contain no-repeat var(--dsc-breadcrumbs-icon-url);mask:center/contain no-repeat var(--dsc-breadcrumbs-icon-url);vertical-align:middle;width:var(--dsc-breadcrumbs-chevron-size)}.ds-breadcrumbs>:not(ol,ul):before{margin:0;rotate:180deg}@media (width < 650px){.ds-breadcrumbs>:is(ol,ul):not(:only-child){display:none}}@media (min-width:650px){.ds-breadcrumbs>:is(:not(ol,ul)):not(:only-child){display:none}}
|
package/dist/button.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.ds-button{--dsc-button-background--active:var(--ds-color-accent-base-active);--dsc-button-background--hover:var(--ds-color-accent-base-hover);--dsc-button-background:var(--ds-color-accent-base-default);--dsc-button-color:var(--ds-color-accent-contrast-default);--dsc-button-
|
|
1
|
+
.ds-button{--dsc-button-background--active:var(--ds-color-accent-base-active);--dsc-button-background--hover:var(--ds-color-accent-base-hover);--dsc-button-background:var(--ds-color-accent-base-default);--dsc-button-color:var(--ds-color-accent-contrast-default);--dsc-button-border-color:transparent}.ds-button[data-variant=secondary],.ds-button[data-variant=tertiary]{--dsc-button-background:transparent;--dsc-button-background--active:var(--ds-color-accent-surface-hover);--dsc-button-background--hover:var(--ds-color-accent-surface-default);--dsc-button-color:var(--ds-color-accent-text-subtle)}.ds-button[data-variant=secondary]{--dsc-button-border-color:var(--ds-color-accent-border-strong)}.ds-button[data-color]{--dsc-button-background--active:var(--ds-color-base-active);--dsc-button-background--hover:var(--ds-color-base-hover);--dsc-button-background:var(--ds-color-base-default);--dsc-button-color:var(--ds-color-contrast-default)}.ds-button[data-color][data-variant=secondary],.ds-button[data-color][data-variant=tertiary]{--dsc-button-background:transparent;--dsc-button-background--active:var(--ds-color-surface-hover);--dsc-button-background--hover:var(--ds-color-surface-default);--dsc-button-color:var(--ds-color-text-subtle)}.ds-button[data-color][data-variant=secondary]{--dsc-button-border-color:var(--ds-color-border-strong)}.ds-button{--dsc-button-font-size:var(--ds-font-size-5);--dsc-button-gap:var(--ds-spacing-2);--dsc-button-padding:var(--ds-spacing-2) var(--ds-spacing-4);--dsc-button-size:var(--ds-sizing-12);align-items:center;background:var(--dsc-button-background);border:var(--ds-border-width-default) solid var(--dsc-button-border-color);border-radius:var(--ds-border-radius-default);box-sizing:border-box;color:var(--dsc-button-color);cursor:pointer;font-family:inherit;font-weight:var(--ds-font-weight-medium);gap:var(--dsc-button-gap);justify-content:center;line-height:var(--ds-line-height-sm);min-height:var(--dsc-button-size);min-width:var(--dsc-button-size);outline:none;padding:var(--dsc-button-padding);text-align:inherit;text-decoration:none}.ds-button:focus-visible{box-shadow:var(--ds--focus,var(--dsc-focus-boxShadow));outline:var(--ds--focus,var(--dsc-focus-outline));outline-offset:var(--ds--focus,var(--dsc-focus-border-width))}.ds-button:focus-visible *{--ds--focus: }.ds-button:not([data-size]){font-size:inherit}.ds-button :where(img,svg){flex-shrink:0;font-size:1.25em}.ds-button:focus-visible{position:relative}.ds-button:not([hidden]){display:flex}.ds-button[data-icon]{height:var(--dsc-button-size);padding:0;width:var(--dsc-button-size)}.ds-button[data-fullwidth]{text-align:center;width:100%}@media (hover:hover) and (pointer:fine){.ds-button:where(:not(:disabled,[aria-disabled=true],[aria-busy=true])):hover{background:var(--dsc-button-background--hover)}}.ds-button[aria-busy=true]{cursor:progress}.ds-button:is(:disabled,[aria-disabled=true]){cursor:not-allowed;opacity:var(--ds-disabled-opacity)}.ds-button:where(:not(:disabled,[aria-disabled=true],[aria-busy=true])):active{background-color:var(--dsc-button-background--active)}
|
package/dist/card.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.ds-card{--dsc-card-
|
|
1
|
+
.ds-card{--dsc-card-background--active:var(--ds-color-neutral-surface-default);--dsc-card-background--hover:var(--ds-color-neutral-background-subtle);--dsc-card-background:var(--ds-color-neutral-background-default);--dsc-card-border-color:var(--ds-color-neutral-border-subtle);--dsc-card-color:var(--ds-color-neutral-text-default)}.ds-card[data-color]:where(:not([data-color=subtle])){--dsc-card-background--active:var(--ds-color-surface-default);--dsc-card-background--hover:var(--ds-color-background-subtle);--dsc-card-background:var(--ds-color-surface-default);--dsc-card-border-color:var(--ds-color-border-subtle);--dsc-card-color:var(--ds-color-text-default)}.ds-card[data-color=neutral]{--dsc-card-background:var(--ds-color-background-default)}.ds-card[data-color=subtle]{--dsc-card-background:var(--ds-color-neutral-background-subtle)}.ds-card{--dsc-card-border:1px solid var(--dsc-card-border-color);--dsc-card-gap:var(--ds-spacing-3);--dsc-card-padding:var(--ds-spacing-6);background:var(--dsc-card-background);border:var(--dsc-card-border);border-radius:var(--ds-border-radius-lg);box-sizing:border-box;color:var(--dsc-card-color);display:block;font-family:inherit;margin:0;overflow:clip;padding:var(--dsc-card-padding);text-align:inherit}.ds-card:not([data-size]){font-size:inherit}.ds-card :is(h1,h2,h3,h4,h5,h6) a:-moz-any-link, .ds-card:is(a:-moz-any-link,button,[role=button]) :is(h1,h2,h3,h4,h5,h6){color:inherit;outline:0;text-decoration:underline;text-decoration-thickness:max(1px,.0625rem,.1025em);text-underline-offset:max(6px,.25rem,.22em)}.ds-card :is(h1,h2,h3,h4,h5,h6) a:any-link,.ds-card:is(a:any-link,button,[role=button]) :is(h1,h2,h3,h4,h5,h6){color:inherit;outline:0;text-decoration:underline;text-decoration-thickness:max(1px,.0625rem,.1025em);text-underline-offset:max(6px,.25rem,.22em)}.ds-card:where(:has(:is(h1,h2,h3,h4,h5,h6) a)),.ds-card:where(a,button,[role=button]){cursor:pointer;text-decoration:none}@media (hover:hover) and (pointer:fine){:is(.ds-card:where(a,button,[role=button]),.ds-card:where(:has(:is(h1,h2,h3,h4,h5,h6) a))):hover{background:var(--dsc-card-background--hover)}}:is(.ds-card:where(a,button,[role=button]),.ds-card:where(:has(:is(h1,h2,h3,h4,h5,h6) a))):where(:focus-visible,:has(:focus-visible)){box-shadow:var(--ds--focus,var(--dsc-focus-boxShadow));outline:var(--ds--focus,var(--dsc-focus-outline));outline-offset:var(--ds--focus,var(--dsc-focus-border-width))}:is(.ds-card:where(a,button,[role=button]),.ds-card:where(:has(:is(h1,h2,h3,h4,h5,h6) a))):where(:focus-visible,:has(:focus-visible)) *{--ds--focus: }:is(.ds-card:where(a,button,[role=button]),.ds-card:where(:has(:is(h1,h2,h3,h4,h5,h6) a))):active{background:var(--dsc-card-background--active)}.ds-card:has(>.ds-card__block){padding:0}:where(.ds-card,.ds-card__block)>:first-child{margin-block:0}:where(.ds-card,.ds-card__block)>*+*{margin-block:var(--dsc-card-gap) 0}.ds-card__block{box-sizing:border-box;margin:0;padding:var(--dsc-card-padding);position:relative}.ds-card__block:before{border-top:var(--dsc-card-border);content:"";inset:0 0 auto;position:absolute;translate:0 -100%}.ds-card__block:after{border-left:var(--dsc-card-border);content:"";inset:0 auto 0 0;position:absolute;translate:-100%}.ds-card__block:has(>:is(audio,figure,iframe,img,video):only-child){padding:0}.ds-card__block:has(>:is(audio,figure,iframe,img,video):only-child)>*{border:0;display:block;height:auto;width:100%}.ds-card__block:has(>:is(audio,figure,iframe,img,video):only-child)>iframe{aspect-ratio:16/9}
|
package/dist/chip.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.ds-chip
|
|
1
|
+
.ds-chip{--dsc-chip-background:var(--ds-color-surface-default);--dsc-chip-background--hover:var(--ds-color-surface-hover);--dsc-chip-background--active:var(--ds-color-surface-active);--dsc-chip-background--checked:var(--ds-color-base-default);--dsc-chip-background--checked--hover:var(--ds-color-base-hover);--dsc-chip-background--checked--active:var(--ds-color-base-active);--dsc-chip-border-color:var(--ds-color-border-subtle);--dsc-chip-border-color--checked:transparent;--dsc-chip-color:var(--ds-color-text-default);--dsc-chip-color--checked:var(--ds-color-contrast-default);--dsc-chip-input-color:var(--ds-color-border-strong);--dsc-chip-input-color--checked:var(--ds-color-base-default);--dsc-chip-border-radius:var(--ds-border-radius-full);--dsc-chip-height:var(--ds-sizing-8);--dsc-chip-icon-size:var(--ds-spacing-7);--dsc-chip-icon-url:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M6.53 5.47a.75.75 0 0 0-1.06 1.06L10.94 12l-5.47 5.47a.75.75 0 1 0 1.06 1.06L12 13.06l5.47 5.47a.75.75 0 1 0 1.06-1.06L13.06 12l5.47-5.47a.75.75 0 0 0-1.06-1.06L12 10.94z'/%3E%3C/svg%3E");--dsc-chip-input-size:var(--ds-spacing-6);--gap:calc((var(--dsc-chip-height) - var(--dsc-chip-input-size))/2);align-items:center;background:var(--dsc-chip-background);border:1px solid var(--dsc-chip-border-color);border-radius:var(--dsc-chip-border-radius);box-sizing:border-box;color:var(--dsc-chip-color);cursor:pointer;display:inline-flex;font-family:inherit;gap:var(--gap);line-height:var(--ds-line-height-sm);margin:0;min-height:var(--dsc-chip-height);padding:0 var(--ds-spacing-3);text-decoration:none}.ds-chip:focus-visible{box-shadow:var(--ds--focus,var(--dsc-focus-boxShadow));outline:var(--ds--focus,var(--dsc-focus-outline));outline-offset:var(--ds--focus,var(--dsc-focus-border-width))}.ds-chip:focus-visible *{--ds--focus: }.ds-chip:not([data-size]){font-size:var(--ds-font-size-minus-1)}.ds-chip:has(:focus-visible){box-shadow:var(--ds--focus,var(--dsc-focus-boxShadow));outline:var(--ds--focus,var(--dsc-focus-outline));outline-offset:var(--ds--focus,var(--dsc-focus-border-width))}.ds-chip:has(:focus-visible) *{--ds--focus: }.ds-chip:disabled,.ds-chip:has(input:disabled),.ds-chip[aria-disabled=true]{cursor:not-allowed;opacity:var(--ds-disabled-opacity)}.ds-chip[data-removable]{padding-inline-end:var(--gap)}.ds-chip[data-removable]:after{background:currentcolor;content:"";height:var(--dsc-chip-icon-size);-webkit-mask:center/contain no-repeat var(--dsc-chip-icon-url);mask:center/contain no-repeat var(--dsc-chip-icon-url);width:var(--dsc-chip-icon-size)}.ds-chip:has(input[type=radio]){padding-inline-start:var(--gap)}.ds-chip:has(input[type=checkbox]){--dsc-chip-border-radius:var(--ds-border-radius-md);padding-inline:var(--gap)}.ds-chip>input{--dsc-input-background--checked:var(--dsc-chip-color);--dsc-input-background:transparent;--dsc-input-border-color--checked:var(--dsc-chip-color);--dsc-input-border-color:var(--dsc-chip-input-color);--dsc-input-color--checked:var(--dsc-chip-input-color--checked);--dsc-input-size--toggle:var(--dsc-chip-input-size)}.ds-chip:has(input:checked),.ds-chip[data-removable]{--dsc-chip-color:var(--dsc-chip-color--checked);--dsc-chip-background:var(--dsc-chip-background--checked);--dsc-chip-border-color:var(--dsc-chip-border-color--checked);--dsc-chip-background--hover:var(--dsc-chip-background--checked--hover);--dsc-chip-background--active:var(--dsc-chip-background--checked--active)}@media (hover:hover) and (pointer:fine){.ds-chip:not(:has(:disabled,[aria-disabled=true])):hover{--dsc-chip-background:var(--dsc-chip-background--hover)}.ds-chip:not(:has(:disabled,[aria-disabled=true])):active{--dsc-chip-background:var(--dsc-chip-background--active)}}
|
package/dist/combobox.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.ds-combobox{background-color:initial;display:grid;gap:var(--ds-spacing-2)}.ds-combobox [data-floating-ui-portal]{grid-column:1/2;grid-row:1/2}.ds-combobox__options-wrapper{background:var(--ds-color-neutral-background-default);border:1px solid var(--ds-color-neutral-border-default);border-radius:
|
|
1
|
+
.ds-combobox{background-color:initial;display:grid;gap:var(--ds-spacing-2)}.ds-combobox [data-floating-ui-portal]{grid-column:1/2;grid-row:1/2}.ds-combobox__options-wrapper{background:var(--ds-color-neutral-background-default);border:1px solid var(--ds-color-neutral-border-default);border-radius:var(--ds-border-radius-md);box-shadow:var(--ds-shadow-md);color:var(--ds-color-neutral-text-default);overflow-y:auto;padding:var(--ds-spacing-2);z-index:1600}.ds-combobox--readonly .ds-combobox__input{pointer-events:none}.ds-combobox__input__wrapper{align-items:center;border-radius:var(--ds-border-radius-md);cursor:text;display:flex;gap:var(--ds-spacing-1);height:auto;justify-content:space-between;padding:var(--ds-spacing-2);position:relative;width:100%}.ds-combobox__input__wrapper .ds-combobox__input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:initial;border:none;box-sizing:border-box;color:var(--ds-color-neutral-text-default);flex-grow:1;font-family:inherit;font-size:inherit;font-weight:inherit;height:100%;line-height:inherit;min-width:50px;width:100%}.ds-combobox--sm .ds-combobox__input__wrapper{min-height:var(--ds-sizing-10);padding:5px var(--ds-spacing-2)}.ds-combobox--md .ds-combobox__input__wrapper{min-height:var(--ds-sizing-12);padding:7px var(--ds-spacing-3)}.ds-combobox--lg .ds-combobox__input__wrapper{min-height:var(--ds-sizing-14);padding:7px var(--ds-spacing-4)}.ds-combobox__input__wrapper .ds-combobox__input:focus{outline:none}.ds-combobox__input__wrapper.ds-combobox--error{border-color:var(--ds-color-danger-border-default);border-width:2px}.ds-combobox__chip-and-input{align-items:center;background-color:initial;display:flex;flex-wrap:wrap;gap:var(--ds-spacing-2);width:100%}.ds-combobox__arrow{cursor:pointer;display:grid;place-items:center}.ds-combobox__input__wrapper.ds-combobox--readonly{background:var(--ds-color-base-default);border-color:var(--ds-color-base-default)}.ds-combobox__label{align-items:center;display:inline-flex;flex-direction:row;gap:var(--ds-spacing-1);grid-column:1/2;grid-row:1/2;min-width:-webkit-min-content;min-width:-moz-min-content;min-width:min-content}.ds-combobox__description{color:var(--ds-color-neutral-text-subtle);margin-top:calc(var(--ds-spacing-2)*-1)}.ds-combobox__clear-button{aspect-ratio:1;background-color:initial;border:none;border-radius:var(--ds-border-radius-sm);color:var(--ds-color-neutral-text-default);cursor:pointer;display:grid;height:29px;padding:0;place-items:center;width:29px}.ds-combobox--sm .ds-combobox__clear-button{height:25px;width:25px}.ds-combobox--md .ds-combobox__clear-button{height:29px;width:29px}.ds-combobox--lg .ds-combobox__clear-button{height:31px;width:31px}.ds-combobox__clear-button:not(:disabled):hover{background-color:var(--ds-color-neutral-surface-default)}.ds-combobox__disabled{opacity:var(--ds-disabled-opacity)}.ds-combobox__disabled *{cursor:not-allowed}.ds-combobox__readonly__icon{height:1.2em;width:1.2em}.ds-combobox__error-message{margin-top:var(--ds-spacing-2)}.ds-combobox__error-message:empty{display:none}.ds-combobox__loading{align-content:center;display:flex;gap:var(--ds-spacing-2)}.ds-combobox__input__wrapper:has(input:focus){--dsc-focus-border-width:3px;box-shadow:0 0 0 var(--dsc-focus-border-width) var(--ds-color-focus-inner);outline:var(--dsc-focus-border-width) solid var(--ds-color-focus-outer);outline-offset:var(--dsc-focus-border-width)}.ds-combobox__input__wrapper:focus-within:hover{border-color:var(--ds-color-neutral-border-default)}.ds-combobox__custom,.ds-combobox__empty,.ds-combobox__option{font-weight:400;padding:var(--ds-spacing-2) var(--ds-spacing-3)}.ds-combobox__option{background:none;border:none;border-left:5px solid transparent;border-radius:var(--ds-border-radius-sm);cursor:pointer;display:grid;font-family:inherit;grid-template-columns:1.2em 1fr;height:auto;justify-content:start;padding-left:var(--ds-spacing-1);text-align:left;width:100%}.ds-combobox__option.ds-combobox__option--active{background:var(--ds-color-background-subtle);border-left:5px solid var(--ds-color-base-default)}.ds-combobox__option>div{align-self:flex-start}.ds-combobox__option.ds-combobox__option--multiple{gap:var(--ds-spacing-2);grid-template-columns:auto 1fr}.ds-combobox__option__label{color:var(--ds-color-neutral-text-default);cursor:pointer;display:flex;flex-direction:column;flex-wrap:wrap;gap:var(--ds-spacing-1);margin:auto 0}.ds-combobox__option--active .ds-combobox__option__label{color:var(--ds-color-text-default)}.ds-combobox__option__icon-wrapper{aspect-ratio:1/1;background-color:var(--ds-color-neutral-background-default);border:2px solid var(--ds-color-neutral-border-default);border-radius:var(--ds-border-radius-sm);display:grid;place-items:center;width:var(--ds-spacing-6)}.ds-combobox__option--active .ds-combobox__option__icon-wrapper{border-color:var(--ds-color-base-default)}.ds-combobox--sm .ds-combobox__option .ds-combobox__option__icon-wrapper{width:var(--ds-spacing-5)}.ds-combobox--md .ds-combobox__option .ds-combobox__option__icon-wrapper{width:var(--ds-spacing-6)}.ds-combobox--lg .ds-combobox__option .ds-combobox__option__icon-wrapper{width:var(--ds-spacing-7)}.ds-combobox__option__icon-wrapper.ds-combobox__option__icon-wrapper--selected{background-color:var(--ds-color-base-default);border-color:var(--ds-color-base-default)}.ds-combobox__option__icon-wrapper__icon{box-sizing:border-box;padding-top:.2em;transform:scale(1.4);stroke:var(--ds-color-neutral-text-default);color:var(--ds-color-neutral-text-default)}.ds-combobox__option__icon-wrapper .ds-combobox__option__icon-wrapper__icon{padding-top:0}.ds-combobox__option--active .ds-combobox__option__icon-wrapper__icon{stroke:var(--ds-color-text-default);color:var(--ds-color-text-default)}.ds-combobox__option__icon-wrapper.ds-combobox__option__icon-wrapper--selected .ds-combobox__option__icon-wrapper__icon{color:#fff;stroke:#fff}.ds-combobox__option__description{color:var(--ds-color-neutral-text-subtle);display:flex;flex-direction:column;flex-wrap:wrap;font-weight:400;gap:var(--ds-spacing-1)}
|
package/dist/divider.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.ds-divider{--dsc-divider-color:var(--ds-color-neutral-border-subtle);border-width:1px 0 0;border-top:1px solid var(--dsc-divider-color);margin-block:.5em;width:100%}
|
|
1
|
+
.ds-divider{--dsc-divider-color:var(--ds-color-neutral-border-subtle);border-width:1px 0 0;border-top:1px solid var(--dsc-divider-color);box-sizing:border-box;margin-block:.5em;width:100%}
|
package/dist/dropdown.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.ds-dropdown{--dsc-dropdown-padding:var(--ds-spacing-3) var(--ds-spacing-2);--dsc-dropdown-
|
|
1
|
+
.ds-dropdown{--dsc-dropdown-padding:var(--ds-spacing-3) var(--ds-spacing-2);--dsc-dropdown-item-padding:var(--ds-spacing-2) var(--ds-spacing-4);--dsc-dropdown-item-size:var(--ds-spacing-12);background-color:var(--ds-color-neutral-background-default);border:1px solid var(--ds-color-neutral-border-subtle);border-radius:var(--ds-border-radius-md);box-shadow:var(--ds-shadow-md);box-sizing:border-box;list-style:none;min-width:15em;padding:var(--dsc-dropdown-padding)}.ds-dropdown:before{display:none}.ds-dropdown>:is(h2,h3,h4,h5,h6){align-items:center;box-sizing:border-box;color:var(--ds-color-neutral-text-subtle);display:flex;font-size:inherit;font-weight:inherit;margin:0;min-height:var(--dsc-dropdown-item-size);padding:var(--dsc-dropdown-item-padding)}.ds-dropdown>ul{list-style:none;margin:0;padding:0}.ds-dropdown :is(a,button,[role=button]){font-weight:var(--ds-font-weight-regular);justify-content:start;min-height:var(--dsc-dropdown-item-size);padding:var(--dsc-dropdown-item-padding);width:100%}
|