@digdir/designsystemet-css 1.0.0-next.34 → 1.0.0-next.35
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/accordion.css +23 -6
- package/alert.css +17 -7
- package/avatar.css +18 -7
- package/badge.css +7 -0
- package/breadcrumbs.css +7 -1
- package/button.css +5 -1
- package/card.css +90 -148
- package/chip.css +113 -152
- 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/divider.css +1 -1
- package/dist/dropdown.css +1 -1
- package/dist/error-summary.css +1 -1
- package/dist/helptext.css +1 -1
- package/dist/index.css +1 -1
- package/dist/list.css +1 -1
- package/dist/modal.css +1 -1
- package/dist/pagination.css +1 -1
- package/dist/popover.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/tooltip.css +1 -1
- package/dist/utilities.css +1 -1
- package/divider.css +2 -1
- package/dropdown.css +20 -8
- package/error-summary.css +4 -2
- package/helptext.css +1 -0
- package/index.css +2 -1
- package/list.css +16 -10
- package/modal.css +49 -73
- package/package.json +1 -1
- package/pagination.css +33 -24
- package/popover.css +20 -9
- package/skeleton.css +13 -10
- package/skiplink.css +6 -10
- package/spinner.css +5 -6
- package/table.css +7 -0
- package/tabs.css +12 -9
- package/tag.css +6 -0
- package/tooltip.css +5 -2
- package/utilities.css +169 -13
package/chip.css
CHANGED
|
@@ -1,173 +1,134 @@
|
|
|
1
|
-
|
|
2
|
-
The class is unused. There is no root chip component?
|
|
3
|
-
.chip {
|
|
4
|
-
display: flex;
|
|
5
|
-
}
|
|
6
|
-
*/
|
|
7
|
-
|
|
8
|
-
.ds-chip--button {
|
|
9
|
-
--dsc-chip-height: var(--ds-sizing-7);
|
|
10
|
-
--dsc-chip-padding: 0 var(--ds-spacing-3);
|
|
1
|
+
.ds-chip {
|
|
11
2
|
--dsc-chip-background: var(--ds-color-accent-surface-default);
|
|
12
|
-
--dsc-chip-
|
|
13
|
-
--dsc-chip-border: var(--ds-color-accent-border-subtle);
|
|
3
|
+
--dsc-chip-border-color: var(--ds-color-accent-border-subtle);
|
|
14
4
|
--dsc-chip-border-radius: var(--ds-border-radius-full);
|
|
5
|
+
--dsc-chip-color: var(--ds-color-accent-text-default);
|
|
6
|
+
--dsc-chip-height: var(--ds-sizing-8);
|
|
7
|
+
--dsc-chip-icon-size: var(--ds-spacing-6);
|
|
8
|
+
--dsc-chip-input-color: var(--ds-color-accent-border-default);
|
|
9
|
+
--dsc-chip-input-size: var(--ds-spacing-5);
|
|
10
|
+
--dsc-chip-padding: 0 var(--ds-spacing-3);
|
|
11
|
+
|
|
12
|
+
@composes ds-focus from './utilities.css';
|
|
13
|
+
@composes ds-paragraph-short from './utilities.css';
|
|
15
14
|
|
|
15
|
+
align-items: center;
|
|
16
16
|
background: var(--dsc-chip-background);
|
|
17
|
-
padding: var(--dsc-chip-padding);
|
|
18
|
-
min-height: var(--dsc-chip-height);
|
|
19
17
|
border-radius: var(--dsc-chip-border-radius);
|
|
20
|
-
border: 1px solid var(--dsc-chip-border);
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
18
|
+
border: 1px solid var(--dsc-chip-border-color);
|
|
19
|
+
box-sizing: border-box;
|
|
20
|
+
color: var(--dsc-chip-color);
|
|
21
|
+
cursor: pointer;
|
|
24
22
|
display: inline-flex;
|
|
25
|
-
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
.ds-chip--button:disabled,
|
|
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);
|
|
23
|
+
font-family: inherit;
|
|
56
24
|
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
|
-
}
|
|
96
|
-
|
|
97
|
-
.ds-chip--group-container {
|
|
98
|
-
--dsc-chip-group-gap: var(--ds-spacing-2);
|
|
99
|
-
|
|
100
|
-
align-items: center;
|
|
101
|
-
display: flex;
|
|
102
|
-
flex-wrap: wrap;
|
|
103
|
-
gap: var(--dsc-chip-group-gap);
|
|
104
|
-
list-style: none;
|
|
105
|
-
margin: 0;
|
|
106
|
-
padding: 0;
|
|
107
|
-
}
|
|
25
|
+
padding: var(--dsc-chip-padding);
|
|
26
|
+
text-decoration: none;
|
|
108
27
|
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
28
|
+
/* Make focus ring also when input inside is focused */
|
|
29
|
+
&:has(:focus-visible) {
|
|
30
|
+
@composes ds-focus--visible from './utilities.css';
|
|
31
|
+
}
|
|
112
32
|
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
33
|
+
&:disabled,
|
|
34
|
+
&:has(input:disabled),
|
|
35
|
+
&[aria-disabled='true'] {
|
|
36
|
+
cursor: not-allowed;
|
|
37
|
+
opacity: var(--ds-disabled-opacity);
|
|
38
|
+
}
|
|
116
39
|
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
40
|
+
&:has(input[type='checkbox']) {
|
|
41
|
+
--dsc-chip-border-radius: var(--ds-border-radius-lg);
|
|
42
|
+
--dsc-chip-padding: 0 var(--ds-spacing-2) 0 var(--ds-spacing-3);
|
|
43
|
+
}
|
|
120
44
|
|
|
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);
|
|
45
|
+
&[data-removable]::after {
|
|
46
|
+
--gap: calc((var(--dsc-chip-height) - var(--dsc-chip-icon-size)) / 2); /* Gap is based on remaining space between icon and edge */
|
|
127
47
|
|
|
128
|
-
|
|
48
|
+
background: currentcolor;
|
|
49
|
+
content: '';
|
|
50
|
+
height: var(--dsc-chip-icon-size);
|
|
51
|
+
margin: 0 calc(var(--gap) * -1) 0 var(--gap);
|
|
52
|
+
mask: center/contain no-repeat
|
|
53
|
+
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");
|
|
54
|
+
width: var(--dsc-chip-icon-size);
|
|
129
55
|
}
|
|
130
56
|
|
|
131
|
-
|
|
132
|
-
--dsc-chip-
|
|
133
|
-
--dsc-chip-
|
|
57
|
+
&[data-size='sm'] {
|
|
58
|
+
--dsc-chip-height: var(--ds-sizing-7);
|
|
59
|
+
--dsc-chip-icon-size: var(--ds-sizing-5);
|
|
60
|
+
--dsc-chip-input-size: var(--ds-spacing-4);
|
|
134
61
|
}
|
|
135
62
|
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
--dsc-
|
|
139
|
-
--dsc-
|
|
63
|
+
&[data-size='lg'] {
|
|
64
|
+
--dsc-chip-height: var(--ds-sizing-9);
|
|
65
|
+
--dsc-chip-icon-size: var(--ds-sizing-7);
|
|
66
|
+
--dsc-chip-input-size: var(--ds-spacing-6);
|
|
140
67
|
}
|
|
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
68
|
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
69
|
+
& > input {
|
|
70
|
+
--gap: calc((var(--dsc-chip-height) - var(--dsc-chip-input-size)) / 2); /* Gap is based on remaining space between input and edge */
|
|
71
|
+
|
|
72
|
+
appearance: none;
|
|
73
|
+
background: none;
|
|
74
|
+
border-radius: calc(var(--dsc-chip-border-radius) - (var(--gap) / 2)); /* Use same radius as */
|
|
75
|
+
border: 2px solid;
|
|
76
|
+
box-sizing: border-box;
|
|
77
|
+
color: var(--dsc-chip-input-color);
|
|
78
|
+
height: var(--dsc-chip-input-size);
|
|
79
|
+
margin: 0 var(--gap) 0 calc(var(--gap) * -1);
|
|
80
|
+
outline: none;
|
|
81
|
+
width: var(--dsc-chip-input-size);
|
|
82
|
+
|
|
83
|
+
&[type='radio']:checked {
|
|
84
|
+
border-width: calc(var(--dsc-chip-input-size) / 3.5); /* Matches Figma */
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
&[type='checkbox']:checked {
|
|
88
|
+
background: currentcolor;
|
|
89
|
+
mask: center/cover no-repeat
|
|
90
|
+
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M24 0H0v24h24V0Zm-4.44 8.56a1.5 1.5 0 0 0-2.12-2.12L10 13.88l-3.44-3.44a1.5 1.5 0 0 0-2.12 2.12l4.5 4.5a1.5 1.5 0 0 0 2.12 0l8.5-8.5Z'/%3E%3C/svg%3E");
|
|
91
|
+
}
|
|
92
|
+
}
|
|
160
93
|
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
94
|
+
&:has(input:checked),
|
|
95
|
+
&[data-removable] {
|
|
96
|
+
--dsc-chip-background: var(--ds-color-accent-base-default);
|
|
97
|
+
--dsc-chip-border-color: transparent;
|
|
98
|
+
--dsc-chip-color: var(--ds-color-accent-contrast-default);
|
|
99
|
+
--dsc-chip-input-color: currentcolor;
|
|
100
|
+
}
|
|
167
101
|
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
102
|
+
/* Only use hover for non-touch devices to prevent sticky-hovering */
|
|
103
|
+
@media (hover: hover) and (pointer: fine) {
|
|
104
|
+
&:where(:not(:disabled, :has(input:disabled), [aria-disabled='true'])) {
|
|
105
|
+
&:hover {
|
|
106
|
+
--dsc-chip-background: var(--ds-color-accent-surface-hover);
|
|
107
|
+
--dsc-chip-border-color: var(--ds-color-accent-border-default);
|
|
108
|
+
--dsc-chip-color: var(--ds-color-accent-text-default);
|
|
109
|
+
--dsc-chip-input-color: var(--ds-color-accent-border-strong);
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
&:active {
|
|
113
|
+
--dsc-chip-background: var(--ds-color-accent-surface-active);
|
|
114
|
+
--dsc-chip-border-color: var(--ds-color-accent-border-strong);
|
|
115
|
+
--dsc-chip-input-color: var(--ds-color-accent-border-strong);
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
&[data-removable]:hover,
|
|
119
|
+
&:has(input:checked):hover {
|
|
120
|
+
--dsc-chip-background: var(--ds-color-accent-base-hover);
|
|
121
|
+
--dsc-chip-border-color: transparent;
|
|
122
|
+
--dsc-chip-color: var(--ds-color-accent-contrast-default);
|
|
123
|
+
--dsc-chip-input-color: currentcolor;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
&[data-removable]:active,
|
|
127
|
+
&:has(input:checked):active {
|
|
128
|
+
--dsc-chip-background: var(--ds-color-accent-base-active);
|
|
129
|
+
--dsc-chip-border-color: transparent;
|
|
130
|
+
--dsc-chip-color: var(--ds-color-accent-contrast-default);
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
}
|
|
173
134
|
}
|
package/dist/accordion.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.ds-accordion-group{--dsc-accordion-background:var(--ds-color-neutral-background-default);--dsc-accordion-border-radius:min(1rem,var(--ds-border-radius-md));--dsc-accordion-border:1px solid var(--ds-color-neutral-border-subtle);--dsc-accordion-chevron-gap:var(--ds-spacing-2);--dsc-accordion-chevron-size:var(--ds-spacing-6);--dsc-accordion-
|
|
1
|
+
.ds-accordion-group{--dsc-accordion-background:var(--ds-color-neutral-background-default);--dsc-accordion-border-radius:min(1rem,var(--ds-border-radius-md));--dsc-accordion-border:1px solid var(--ds-color-neutral-border-subtle);--dsc-accordion-chevron-gap:var(--ds-spacing-2);--dsc-accordion-chevron-size:var(--ds-spacing-6);--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-padding:var(--ds-spacing-4)}.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-group[data-color=subtle]{--dsc-accordion-background:var(--ds-color-neutral-background-subtle);--dsc-accordion-border:1px solid var(--ds-color-neutral-border-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[data-color=brand1]{--dsc-accordion-background:var(--ds-color-brand1-background-subtle);--dsc-accordion-border:1px solid var(--ds-color-brand1-border-subtle);--dsc-accordion-heading-background--hover:var(--ds-color-brand1-surface-hover);--dsc-accordion-heading-background--open:var(--ds-color-brand1-surface-default);--dsc-accordion-heading-background:var(--ds-color-brand1-surface-default)}.ds-accordion-group[data-color=brand2]{--dsc-accordion-background:var(--ds-color-brand2-background-subtle);--dsc-accordion-border:1px solid var(--ds-color-brand2-border-subtle);--dsc-accordion-heading-background--hover:var(--ds-color-brand2-surface-hover);--dsc-accordion-heading-background--open:var(--ds-color-brand2-surface-default);--dsc-accordion-heading-background:var(--ds-color-brand2-surface-default)}.ds-accordion-group[data-color=brand3]{--dsc-accordion-background:var(--ds-color-brand3-background-subtle);--dsc-accordion-border:1px solid var(--ds-color-brand3-border-subtle);--dsc-accordion-heading-background--hover:var(--ds-color-brand3-surface-hover);--dsc-accordion-heading-background--open:var(--ds-color-brand3-surface-default);--dsc-accordion-heading-background:var(--ds-color-brand3-surface-default)}.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){background:var(--dsc-accordion-heading-background);box-sizing:border-box;cursor:pointer;list-style:none;outline:none;padding-block:var(--dsc-accordion-padding);padding-inline:calc(var(--dsc-accordion-padding) + var(--dsc-accordion-chevron-size) + var(--dsc-accordion-chevron-gap)) var(--dsc-accordion-padding)}:is(.ds-accordion__item>:is(summary,u-summary)):focus-visible{box-shadow:var(--dsc-focus-boxShadow);outline:var(--dsc-focus-outline);outline-offset:var(--dsc-focus-border-width)}:is(.ds-accordion__item>:is(summary,u-summary)){font-size:var(--ds-body-sm-font-size);font-weight:var(--ds-body-sm-font-weight);letter-spacing:var(--ds-body-sm-letter-spacing);line-height:var(--ds-body-sm-line-height)}: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:"";height:var(--dsc-accordion-chevron-size);margin-inline:calc((var(--dsc-accordion-chevron-size) + var(--dsc-accordion-chevron-gap))*-1);-webkit-mask:50%/contain no-repeat 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");mask:50%/contain no-repeat 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");position:absolute;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-strong);--dsc-alert-border-radius:min(1rem,var(--ds-border-radius-md));--dsc-alert-color:var(--ds-color-neutral-text-default);--dsc-alert-gap:var(--ds-spacing-2);--dsc-alert-icon-color:var(--ds-color-info-text-subtle);--dsc-alert-icon-size:var(--ds-sizing-7);--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-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);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)}.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-color:var(--dsc-alert-icon-color);content:"";display:block;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(
|
|
1
|
+
.ds-alert{--dsc-alert-background:var(--ds-color-info-surface-default);--dsc-alert-border-color:var(--ds-color-info-border-strong);--dsc-alert-border-radius:min(1rem,var(--ds-border-radius-md));--dsc-alert-color:var(--ds-color-neutral-text-default);--dsc-alert-gap:var(--ds-spacing-2);--dsc-alert-icon-color:var(--ds-color-info-text-subtle);--dsc-alert-icon-size:var(--ds-sizing-7);--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-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);font-size:var(--ds-body-md-font-size);font-weight:var(--ds-body-md-font-weight);letter-spacing:var(--ds-body-md-letter-spacing);line-height:var(--ds-body-md-line-height);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)}.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-color:var(--dsc-alert-icon-color);content:"";display:block;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=warning]{--dsc-alert-border-color:var(--ds-color-warning-border-default);--dsc-alert-icon-color:var(--ds-color-warning-text-subtle);--dsc-alert-background:var(--ds-color-warning-surface-default);--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-background:var(--ds-color-success-surface-default);--dsc-alert-border-color:var(--ds-color-success-border-default);--dsc-alert-icon-color:var(--ds-color-success-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='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-background:var(--ds-color-danger-surface-default);--dsc-alert-border-color:var(--ds-color-danger-border-default);--dsc-alert-icon-color:var(--ds-color-danger-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='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")}.ds-alert[data-size=sm]{--dsc-alert-icon-size:var(--ds-sizing-6);--dsc-alert-padding:var(--ds-spacing-5);font-size:var(--ds-body-sm-font-size);font-weight:var(--ds-body-sm-font-weight);letter-spacing:var(--ds-body-sm-letter-spacing);line-height:var(--ds-body-sm-line-height)}.ds-alert[data-size=lg]{--dsc-alert-icon-size:var(--ds-sizing-8);--dsc-alert-padding:var(--ds-spacing-7);font-size:var(--ds-body-lg-font-size);font-weight:var(--ds-body-lg-font-weight);letter-spacing:var(--ds-body-lg-letter-spacing);line-height:var(--ds-body-lg-line-height)}
|
package/dist/avatar.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.ds-avatar{--dsc-avatar-background:var(--ds-color-accent-base-default);--dsc-avatar-color:var(--ds-color-accent-contrast-default);--dsc-avatar-size:var(--ds-sizing-12);--dsc-avatar-padding:var(--ds-spacing-2);--dsc-avatar-border-radius:50%;align-items:center;aspect-ratio:1/1;background:var(--dsc-avatar-background);border-radius:var(--dsc-avatar-border-radius);color:var(--dsc-avatar-color);display:inline-flex;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}.ds-avatar:not(:has(>img)){padding:var(--dsc-avatar-padding)}.ds-avatar img{height:100%;object-fit:cover;width:100%}.ds-avatar svg{max-height:100%;max-width:100%}.ds-avatar:empty:before{background-color:currentcolor;content:"";height:100%;-webkit-mask-image: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");mask-image: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");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;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-color=accent]{--dsc-avatar-background:var(--ds-color-accent-base-default);--dsc-avatar-color:var(--ds-color-accent-contrast-default)}.ds-avatar[data-color=neutral]{--dsc-avatar-background:var(--ds-color-neutral-base-default);--dsc-avatar-color:var(--ds-color-neutral-contrast-default)}.ds-avatar[data-color=brand1]{--dsc-avatar-background:var(--ds-color-brand1-base-default);--dsc-avatar-color:var(--ds-color-brand1-contrast-default)}.ds-avatar[data-color=brand2]{--dsc-avatar-background:var(--ds-color-brand2-base-default);--dsc-avatar-color:var(--ds-color-brand2-contrast-default)}.ds-avatar[data-color=brand3]{--dsc-avatar-background:var(--ds-color-brand3-base-default);--dsc-avatar-color:var(--ds-color-brand3-contrast-default)}.ds-avatar[data-size=xs]{--dsc-avatar-size:var(--ds-sizing-7);--dsc-avatar-padding:var(--ds-spacing-1)}.ds-avatar[data-size=sm]{--dsc-avatar-size:var(--ds-sizing-9);--dsc-avatar-padding:var(--ds-spacing-1)}.ds-avatar[data-size=md]{--dsc-avatar-size:var(--ds-sizing-12);--dsc-avatar-padding:var(--ds-spacing-2)}.ds-avatar[data-size=lg]{--dsc-avatar-size:var(--ds-sizing-15);--dsc-avatar-padding:var(--ds-spacing-2)}
|
|
1
|
+
.ds-avatar{--dsc-avatar-background:var(--ds-color-accent-base-default);--dsc-avatar-color:var(--ds-color-accent-contrast-default);--dsc-avatar-size:var(--ds-sizing-12);--dsc-avatar-padding:var(--ds-spacing-2);--dsc-avatar-border-radius:50%;align-items:center;aspect-ratio:1/1;background:var(--dsc-avatar-background);border-radius:var(--dsc-avatar-border-radius);box-sizing:border-box;color:var(--dsc-avatar-color);display:inline-flex;font-size:var(--ds-body-xs-font-size);font-weight:var(--ds-body-xs-font-weight);height:var(--dsc-avatar-size);justify-content:center;letter-spacing:var(--ds-body-xs-letter-spacing);line-height:var(--ds-body-xs-line-height);overflow:hidden;text-decoration:none;text-transform:uppercase;-webkit-user-select:none;-moz-user-select:none;user-select:none}.ds-avatar:not(:has(>img)){padding:var(--dsc-avatar-padding)}.ds-avatar img{height:100%;object-fit:cover;width:100%}.ds-avatar svg{max-height:100%;max-width:100%}.ds-avatar:empty:before{background-color:currentcolor;content:"";height:100%;-webkit-mask-image: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");mask-image: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");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;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-color=accent]{--dsc-avatar-background:var(--ds-color-accent-base-default);--dsc-avatar-color:var(--ds-color-accent-contrast-default)}.ds-avatar[data-color=neutral]{--dsc-avatar-background:var(--ds-color-neutral-base-default);--dsc-avatar-color:var(--ds-color-neutral-contrast-default)}.ds-avatar[data-color=brand1]{--dsc-avatar-background:var(--ds-color-brand1-base-default);--dsc-avatar-color:var(--ds-color-brand1-contrast-default)}.ds-avatar[data-color=brand2]{--dsc-avatar-background:var(--ds-color-brand2-base-default);--dsc-avatar-color:var(--ds-color-brand2-contrast-default)}.ds-avatar[data-color=brand3]{--dsc-avatar-background:var(--ds-color-brand3-base-default);--dsc-avatar-color:var(--ds-color-brand3-contrast-default)}.ds-avatar[data-size=xs]{--dsc-avatar-size:var(--ds-sizing-7);--dsc-avatar-padding:var(--ds-spacing-1);font-size:var(--ds-body-xs-font-size);font-weight:var(--ds-body-xs-font-weight);letter-spacing:var(--ds-body-xs-letter-spacing);line-height:var(--ds-body-xs-line-height)}.ds-avatar[data-size=sm]{--dsc-avatar-size:var(--ds-sizing-9);--dsc-avatar-padding:var(--ds-spacing-1);font-size:var(--ds-heading-2xs-font-size);font-weight:var(--ds-heading-2xs-font-weight);letter-spacing:var(--ds-heading-2xs-letter-spacing);line-height:var(--ds-heading-2xs-line-height)}.ds-avatar[data-size=md]{--dsc-avatar-size:var(--ds-sizing-12);--dsc-avatar-padding:var(--ds-spacing-2);font-size:var(--ds-heading-sm-font-size);font-weight:var(--ds-heading-sm-font-weight);letter-spacing:var(--ds-heading-sm-letter-spacing);line-height:var(--ds-heading-sm-line-height)}.ds-avatar[data-size=lg]{--dsc-avatar-size:var(--ds-sizing-15);--dsc-avatar-padding:var(--ds-spacing-2);font-size:var(--ds-heading-md-font-size);font-weight:var(--ds-heading-md-font-weight);letter-spacing:var(--ds-heading-md-letter-spacing);line-height:var(--ds-heading-md-line-height)}
|
package/dist/badge.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.ds-badge{--dsc-badge-background:var(--ds-color-accent-base-default);--dsc-badge-color:var(--ds-color-accent-contrast-default);--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);display:inline-flex;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;min-height:var(--dsc-badge-size);min-width:var(--dsc-badge-size);padding:var(--dsc-badge-padding);place-items:center}.ds-badge[data-size=sm]{--dsc-badge-size:var(--ds-sizing-3);--dsc-badge-padding:0 var(--ds-spacing-1)}.ds-badge[data-size=sm][data-count]{--dsc-badge-size:var(--ds-sizing-5)}.ds-badge[data-size=lg]{--dsc-badge-size:var(--ds-sizing-4);--dsc-badge-padding:0 var(--ds-spacing-2)}.ds-badge[data-size=lg][data-count]{--dsc-badge-size:var(--ds-sizing-7)}.ds-badge[data-color=info]{--dsc-badge-background:var(--ds-color-info-base-default);--dsc-badge-color:var(--ds-color-info-contrast-default)}.ds-badge[data-color=success]{--dsc-badge-background:var(--ds-color-success-base-default);--dsc-badge-color:var(--ds-color-success-contrast-default)}.ds-badge[data-color=warning]{--dsc-badge-background:var(--ds-color-warning-base-default);--dsc-badge-color:var(--ds-color-warning-contrast-default)}.ds-badge[data-color=danger]{--dsc-badge-background:var(--ds-color-danger-base-default);--dsc-badge-color:var(--ds-color-danger-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[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%}
|
|
1
|
+
.ds-badge{--dsc-badge-background:var(--ds-color-accent-base-default);--dsc-badge-color:var(--ds-color-accent-contrast-default);--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;font-size:var(--ds-body-short-sm-font-size);font-weight:var(--ds-body-short-sm-font-weight);letter-spacing:var(--ds-body-short-sm-letter-spacing);line-height:var(--ds-body-short-sm-line-height);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;min-height:var(--dsc-badge-size);min-width:var(--dsc-badge-size);padding:var(--dsc-badge-padding);place-items:center}.ds-badge[data-size=sm]{--dsc-badge-size:var(--ds-sizing-3);--dsc-badge-padding:0 var(--ds-spacing-1);font-size:var(--ds-body-short-xs-font-size);font-weight:var(--ds-body-short-xs-font-weight);letter-spacing:var(--ds-body-short-xs-letter-spacing);line-height:var(--ds-body-short-xs-line-height)}.ds-badge[data-size=sm][data-count]{--dsc-badge-size:var(--ds-sizing-5)}.ds-badge[data-size=lg]{--dsc-badge-size:var(--ds-sizing-4);--dsc-badge-padding:0 var(--ds-spacing-2);font-size:var(--ds-body-short-md-font-size);font-weight:var(--ds-body-short-md-font-weight);letter-spacing:var(--ds-body-short-md-letter-spacing);line-height:var(--ds-body-short-md-line-height)}.ds-badge[data-size=lg][data-count]{--dsc-badge-size:var(--ds-sizing-7)}.ds-badge[data-color=info]{--dsc-badge-background:var(--ds-color-info-base-default);--dsc-badge-color:var(--ds-color-info-contrast-default)}.ds-badge[data-color=success]{--dsc-badge-background:var(--ds-color-success-base-default);--dsc-badge-color:var(--ds-color-success-contrast-default)}.ds-badge[data-color=warning]{--dsc-badge-background:var(--ds-color-warning-base-default);--dsc-badge-color:var(--ds-color-warning-contrast-default)}.ds-badge[data-color=danger]{--dsc-badge-background:var(--ds-color-danger-base-default);--dsc-badge-color:var(--ds-color-danger-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[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)}.ds-breadcrumbs[data-size=sm]{--dsc-breadcrumbs-spacing:var(--ds-spacing-1);--dsc-breadcrumbs-chevron-size:var(--ds-sizing-5)}.ds-breadcrumbs[data-size=lg]{--dsc-breadcrumbs-spacing:var(--ds-spacing-3);--dsc-breadcrumbs-chevron-size:var(--ds-sizing-7)}.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 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");mask:center/contain no-repeat 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");vertical-align:middle;width:var(--dsc-breadcrumbs-chevron-size)}.ds-breadcrumbs>:not(ol,ul):before{margin:0;rotate:180deg}@media (max-width:650px){.ds-breadcrumbs>:is(ol,ul):not(:only-child){display:none}}@media (min-width:651px){.ds-breadcrumbs>:not(ol,ul){display:none}}
|
|
1
|
+
.ds-breadcrumbs{--dsc-breadcrumbs-spacing:var(--ds-spacing-2);--dsc-breadcrumbs-chevron-size:var(--ds-sizing-6);font-size:var(--ds-body-md-font-size);font-weight:var(--ds-body-md-font-weight);letter-spacing:var(--ds-body-md-letter-spacing);line-height:var(--ds-body-md-line-height)}.ds-breadcrumbs[data-size=sm]{--dsc-breadcrumbs-spacing:var(--ds-spacing-1);--dsc-breadcrumbs-chevron-size:var(--ds-sizing-5);font-size:var(--ds-body-sm-font-size);font-weight:var(--ds-body-sm-font-weight);letter-spacing:var(--ds-body-sm-letter-spacing);line-height:var(--ds-body-sm-line-height)}.ds-breadcrumbs[data-size=lg]{--dsc-breadcrumbs-spacing:var(--ds-spacing-3);--dsc-breadcrumbs-chevron-size:var(--ds-sizing-7);font-size:var(--ds-body-lg-font-size);font-weight:var(--ds-body-lg-font-weight);letter-spacing:var(--ds-body-lg-letter-spacing);line-height:var(--ds-body-lg-line-height)}.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 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");mask:center/contain no-repeat 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");vertical-align:middle;width:var(--dsc-breadcrumbs-chevron-size)}.ds-breadcrumbs>:not(ol,ul):before{margin:0;rotate:180deg}@media (max-width:650px){.ds-breadcrumbs>:is(ol,ul):not(:only-child){display:none}}@media (min-width:651px){.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-font-size:var(--ds-font-size-5);--dsc-button-gap:var(--ds-spacing-2);--dsc-button-padding-block:var(--ds-spacing-2);--dsc-button-padding-inline:var(--ds-spacing-4);--dsc-button-size:var(--ds-sizing-12)
|
|
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-font-size:var(--ds-font-size-5);--dsc-button-gap:var(--ds-spacing-2);--dsc-button-padding-block:var(--ds-spacing-2);--dsc-button-padding-inline:var(--ds-spacing-4);--dsc-button-size:var(--ds-sizing-12);font-size:var(--ds-body-short-md-font-size);font-weight:var(--ds-body-short-md-font-weight);letter-spacing:var(--ds-body-short-md-letter-spacing);line-height:var(--ds-body-short-md-line-height)}.ds-button:focus-visible{box-shadow:var(--dsc-focus-boxShadow);outline:var(--dsc-focus-outline);outline-offset:var(--dsc-focus-border-width)}.ds-button{align-items:center;background:var(--dsc-button-background);border:var(--ds-border-width-default) solid var(--dsc-button-border-color,transparent);border-radius:var(--ds-border-radius-md);box-sizing:border-box;color:var(--dsc-button-color);cursor:pointer;font-family:inherit;gap:var(--dsc-button-gap);justify-content:center;min-height:var(--dsc-button-size);min-width:var(--dsc-button-size);outline:none;padding:var(--dsc-button-padding-block) var(--dsc-button-padding-inline);text-align:inherit;text-decoration:none}.ds-button:focus-visible{position:relative}.ds-button:not([hidden]){display:flex}.ds-button[data-size=sm]{--dsc-button-gap:var(--ds-sizing-1);--dsc-button-padding-block:var(--ds-spacing-2);--dsc-button-padding-inline:var(--ds-spacing-3);--dsc-button-size:var(--ds-sizing-10);font-size:var(--ds-body-short-sm-font-size);font-weight:var(--ds-body-short-sm-font-weight);letter-spacing:var(--ds-body-short-sm-letter-spacing);line-height:var(--ds-body-short-sm-line-height)}.ds-button[data-size=lg]{--dsc-button-padding-block:var(--ds-spacing-3);--dsc-button-padding-inline:var(--ds-spacing-5);--dsc-button-size:var(--ds-sizing-14);font-size:var(--ds-body-short-lg-font-size);font-weight:var(--ds-body-short-lg-font-weight);letter-spacing:var(--ds-body-short-lg-letter-spacing);line-height:var(--ds-body-short-lg-line-height)}.ds-button[data-icon]{padding-inline:var(--dsc-button-padding-block)}.ds-button[data-fullwidth]{text-align:center;width:100%}.ds-button[data-variant=secondary]{--dsc-button-background--active:var(--ds-color-accent-surface-hover);--dsc-button-background--hover:var(--ds-color-accent-surface-default);--dsc-button-background:transparent;--dsc-button-border-color:var(--ds-color-accent-border-strong);--dsc-button-color--active:var(--ds-color-accent-text-default);--dsc-button-color--hover:var(--ds-color-accent-text-default);--dsc-button-color:var(--ds-color-accent-text-subtle)}.ds-button[data-variant=tertiary]{--dsc-button-background--active:var(--ds-color-accent-surface-hover);--dsc-button-background--hover:var(--ds-color-accent-surface-default);--dsc-button-background:transparent;--dsc-button-border-color:var(--dsc-button-tertiary-border-color);--dsc-button-color--active:var(--ds-color-accent-text-default);--dsc-button-color--hover:var(--ds-color-accent-text-default);--dsc-button-color:var(--ds-color-accent-text-subtle)}.ds-button[data-color=neutral]{--dsc-button-background--active:var(--ds-color-neutral-base-active);--dsc-button-background--hover:var(--ds-color-neutral-base-hover);--dsc-button-background:var(--ds-color-neutral-base-default);--dsc-button-color:var(--ds-color-neutral-contrast-default)}.ds-button[data-color=neutral][data-variant=secondary]{--dsc-button-background--active:var(--ds-color-neutral-surface-hover);--dsc-button-background--hover:var(--ds-color-neutral-surface-default);--dsc-button-background:transparent;--dsc-button-border-color:var(--ds-color-neutral-border-strong);--dsc-button-color--active:var(--ds-color-neutral-text-default);--dsc-button-color--hover:var(--ds-color-neutral-text-default);--dsc-button-color:var(--ds-color-neutral-text-subtle)}.ds-button[data-color=neutral][data-variant=tertiary]{--dsc-button-background--active:var(--ds-color-neutral-surface-hover);--dsc-button-background--hover:var(--ds-color-neutral-surface-default);--dsc-button-background:transparent;--dsc-button-color--active:var(--ds-color-neutral-text-default);--dsc-button-color--hover:var(--ds-color-neutral-text-default);--dsc-button-color:var(--ds-color-neutral-text-subtle)}.ds-button[data-color=danger]{--dsc-button-background--active:var(--ds-color-danger-base-active);--dsc-button-background--hover:var(--ds-color-danger-base-hover);--dsc-button-background:var(--ds-color-danger-base-default);--dsc-button-color:var(--ds-color-danger-contrast-default)}.ds-button[data-color=danger][data-variant=secondary]{--dsc-button-background--active:var(--ds-color-danger-surface-hover);--dsc-button-background--hover:var(--ds-color-danger-surface-default);--dsc-button-background:transparent;--dsc-button-border-color:var(--ds-color-danger-border-strong);--dsc-button-color--active:var(--ds-color-danger-text-default);--dsc-button-color--hover:var(--ds-color-danger-text-default);--dsc-button-color:var(--ds-color-danger-text-subtle)}.ds-button[data-color=danger][data-variant=tertiary]{--dsc-button-background--active:var(--ds-color-danger-surface-hover);--dsc-button-background--hover:var(--ds-color-danger-surface-default);--dsc-button-background:transparent;--dsc-button-color--active:var(--ds-color-danger-text-default);--dsc-button-color--hover:var(--ds-color-danger-text-default);--dsc-button-color:var(--ds-color-danger-text-subtle)}@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-border:1px solid var(--dsc-card-border-color);--dsc-card-color:var(--ds-color-neutral-text-default);--dsc-card-gap:1rem;--dsc-card-padding:var(--ds-spacing-6);all:unset;background:var(--dsc-card-background);border:var(--dsc-card-border);border-radius:min(1rem,var(--ds-border-radius-md));box-sizing:border-box;color:var(--dsc-card-color);display:block;font-size:var(--ds-body-md-font-size);font-weight:var(--ds-body-md-font-weight);letter-spacing:var(--ds-body-md-letter-spacing);line-height:var(--ds-body-md-line-height);margin:0;overflow:clip;padding:var(--dsc-card-padding)}.ds-card[data-size=xs]{font-size:var(--ds-body-xs-font-size);font-weight:var(--ds-body-xs-font-weight);letter-spacing:var(--ds-body-xs-letter-spacing);line-height:var(--ds-body-xs-line-height)}.ds-card[data-size=sm]{font-size:var(--ds-body-sm-font-size);font-weight:var(--ds-body-sm-font-weight);letter-spacing:var(--ds-body-sm-letter-spacing);line-height:var(--ds-body-sm-line-height)}.ds-card[data-size=lg]{font-size:var(--ds-body-lg-font-size);font-weight:var(--ds-body-lg-font-weight);letter-spacing:var(--ds-body-lg-letter-spacing);line-height:var(--ds-body-lg-line-height)}.ds-card[data-size=xl]{font-size:var(--ds-body-xl-font-size);font-weight:var(--ds-body-xl-font-weight);letter-spacing:var(--ds-body-xl-letter-spacing);line-height:var(--ds-body-xl-line-height)}.ds-card[data-variant=long]{font-size:var(--ds-body-long-md-font-size);font-weight:var(--ds-body-long-md-font-weight);letter-spacing:var(--ds-body-long-md-letter-spacing);line-height:var(--ds-body-long-md-line-height)}.ds-card[data-variant=long][data-size=xs]{font-size:var(--ds-body-long-xs-font-size);font-weight:var(--ds-body-long-xs-font-weight);letter-spacing:var(--ds-body-long-xs-letter-spacing);line-height:var(--ds-body-long-xs-line-height)}.ds-card[data-variant=long][data-size=sm]{font-size:var(--ds-body-long-sm-font-size);font-weight:var(--ds-body-long-sm-font-weight);letter-spacing:var(--ds-body-long-sm-letter-spacing);line-height:var(--ds-body-long-sm-line-height)}.ds-card[data-variant=long][data-size=lg]{font-size:var(--ds-body-long-lg-font-size);font-weight:var(--ds-body-long-lg-font-weight);letter-spacing:var(--ds-body-long-lg-letter-spacing);line-height:var(--ds-body-long-lg-line-height)}.ds-card[data-variant=long][data-size=xl]{font-size:var(--ds-body-long-xl-font-size);font-weight:var(--ds-body-long-xl-font-weight);letter-spacing:var(--ds-body-long-xl-letter-spacing);line-height:var(--ds-body-long-xl-line-height)}.ds-card[data-variant=short]{font-size:var(--ds-body-short-md-font-size);font-weight:var(--ds-body-short-md-font-weight);letter-spacing:var(--ds-body-short-md-letter-spacing);line-height:var(--ds-body-short-md-line-height)}.ds-card[data-variant=short][data-size=xs]{font-size:var(--ds-body-short-xs-font-size);font-weight:var(--ds-body-short-xs-font-weight);letter-spacing:var(--ds-body-short-xs-letter-spacing);line-height:var(--ds-body-short-xs-line-height)}.ds-card[data-variant=short][data-size=sm]{font-size:var(--ds-body-short-sm-font-size);font-weight:var(--ds-body-short-sm-font-weight);letter-spacing:var(--ds-body-short-sm-letter-spacing);line-height:var(--ds-body-short-sm-line-height)}.ds-card[data-variant=short][data-size=lg]{font-size:var(--ds-body-short-lg-font-size);font-weight:var(--ds-body-short-lg-font-weight);letter-spacing:var(--ds-body-short-lg-letter-spacing);line-height:var(--ds-body-short-lg-line-height)}.ds-card[data-variant=short][data-size=xl]{font-size:var(--ds-body-short-xl-font-size);font-weight:var(--ds-body-short-xl-font-weight);letter-spacing:var(--ds-body-short-xl-letter-spacing);line-height:var(--ds-body-short-xl-line-height)}.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(--dsc-focus-boxShadow);outline:var(--dsc-focus-outline);outline-offset: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))):active{background:var(--dsc-card-background--active)}.ds-card:has(>.ds-card__block){padding:0}.ds-card[data-color=subtle]{--dsc-card-background--active:var(--ds-color-neutral-surface-hover);--dsc-card-background--hover:var(--ds-color-neutral-surface-default);--dsc-card-background:var(--ds-color-neutral-background-subtle);--dsc-card-border-color:var(--ds-color-neutral-border-subtle)}.ds-card[data-color=brand1]{--dsc-card-background--active:var(--ds-color-brand1-surface-active);--dsc-card-background--hover:var(--ds-color-brand1-surface-hover);--dsc-card-background:var(--ds-color-brand1-surface-default);--dsc-card-border-color:var(--ds-color-brand1-border-subtle);--dsc-card-color:var(--ds-color-brand1-text-default)}.ds-card[data-color=brand2]{--dsc-card-background--active:var(--ds-color-brand2-surface-active);--dsc-card-background--hover:var(--ds-color-brand2-surface-hover);--dsc-card-background:var(--ds-color-brand2-surface-default);--dsc-card-border-color:var(--ds-color-brand2-border-subtle);--dsc-card-color:var(--ds-color-brand2-text-default)}.ds-card[data-color=brand3]{--dsc-card-background--active:var(--ds-color-brand3-surface-active);--dsc-card-background--hover:var(--ds-color-brand3-surface-hover);--dsc-card-background:var(--ds-color-brand3-surface-default);--dsc-card-border-color:var(--ds-color-brand3-border-subtle);--dsc-card-color:var(--ds-color-brand3-text-default)}: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-accent-surface-default);--dsc-chip-border-color:var(--ds-color-accent-border-subtle);--dsc-chip-border-radius:var(--ds-border-radius-full);--dsc-chip-color:var(--ds-color-accent-text-default);--dsc-chip-height:var(--ds-sizing-8);--dsc-chip-icon-size:var(--ds-spacing-6);--dsc-chip-input-color:var(--ds-color-accent-border-default);--dsc-chip-input-size:var(--ds-spacing-5);--dsc-chip-padding:0 var(--ds-spacing-3)}.ds-chip:focus-visible{box-shadow:var(--dsc-focus-boxShadow);outline:var(--dsc-focus-outline);outline-offset:var(--dsc-focus-border-width)}.ds-chip{@composes ds-paragraph-short from "./utilities.css";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;min-height:var(--dsc-chip-height);padding:var(--dsc-chip-padding);text-decoration:none}.ds-chip:has(:focus-visible){box-shadow:var(--dsc-focus-boxShadow);outline:var(--dsc-focus-outline);outline-offset:var(--dsc-focus-border-width)}.ds-chip:disabled,.ds-chip:has(input:disabled),.ds-chip[aria-disabled=true]{cursor:not-allowed;opacity:var(--ds-disabled-opacity)}.ds-chip:has(input[type=checkbox]){--dsc-chip-border-radius:var(--ds-border-radius-lg);--dsc-chip-padding:0 var(--ds-spacing-2) 0 var(--ds-spacing-3)}.ds-chip[data-removable]:after{--gap:calc((var(--dsc-chip-height) - var(--dsc-chip-icon-size))/2);background:currentcolor;content:"";height:var(--dsc-chip-icon-size);margin:0 calc(var(--gap)*-1) 0 var(--gap);-webkit-mask:center/contain no-repeat 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");mask:center/contain no-repeat 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");width:var(--dsc-chip-icon-size)}.ds-chip[data-size=sm]{--dsc-chip-height:var(--ds-sizing-7);--dsc-chip-icon-size:var(--ds-sizing-5);--dsc-chip-input-size:var(--ds-spacing-4)}.ds-chip[data-size=lg]{--dsc-chip-height:var(--ds-sizing-9);--dsc-chip-icon-size:var(--ds-sizing-7);--dsc-chip-input-size:var(--ds-spacing-6)}.ds-chip>input{--gap:calc((var(--dsc-chip-height) - var(--dsc-chip-input-size))/2);-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:2px solid;border-radius:calc(var(--dsc-chip-border-radius) - var(--gap)/2);box-sizing:border-box;color:var(--dsc-chip-input-color);height:var(--dsc-chip-input-size);margin:0 var(--gap) 0 calc(var(--gap)*-1);outline:none;width:var(--dsc-chip-input-size)}[type=radio]:is(.ds-chip>input):checked{border-width:calc(var(--dsc-chip-input-size)/3.5)}[type=checkbox]:is(.ds-chip>input):checked{background:currentcolor;-webkit-mask:center/cover no-repeat 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='M24 0H0v24h24zm-4.44 8.56a1.5 1.5 0 0 0-2.12-2.12L10 13.88l-3.44-3.44a1.5 1.5 0 0 0-2.12 2.12l4.5 4.5a1.5 1.5 0 0 0 2.12 0z'/%3E%3C/svg%3E");mask:center/cover no-repeat 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='M24 0H0v24h24zm-4.44 8.56a1.5 1.5 0 0 0-2.12-2.12L10 13.88l-3.44-3.44a1.5 1.5 0 0 0-2.12 2.12l4.5 4.5a1.5 1.5 0 0 0 2.12 0z'/%3E%3C/svg%3E")}.ds-chip:has(input:checked),.ds-chip[data-removable]{--dsc-chip-background:var(--ds-color-accent-base-default);--dsc-chip-border-color:transparent;--dsc-chip-color:var(--ds-color-accent-contrast-default);--dsc-chip-input-color:currentcolor}@media (hover:hover) and (pointer:fine){.ds-chip:where(:not(:disabled,:has(input:disabled),[aria-disabled=true])):hover{--dsc-chip-background:var(--ds-color-accent-surface-hover);--dsc-chip-border-color:var(--ds-color-accent-border-default);--dsc-chip-color:var(--ds-color-accent-text-default);--dsc-chip-input-color:var(--ds-color-accent-border-strong)}.ds-chip:where(:not(:disabled,:has(input:disabled),[aria-disabled=true])):active{--dsc-chip-background:var(--ds-color-accent-surface-active);--dsc-chip-border-color:var(--ds-color-accent-border-strong);--dsc-chip-input-color:var(--ds-color-accent-border-strong)}.ds-chip:where(:not(:disabled,:has(input:disabled),[aria-disabled=true])):has(input:checked):hover,.ds-chip[data-removable]:where(:not(:disabled,:has(input:disabled),[aria-disabled=true])):hover{--dsc-chip-background:var(--ds-color-accent-base-hover);--dsc-chip-border-color:transparent;--dsc-chip-color:var(--ds-color-accent-contrast-default);--dsc-chip-input-color:currentcolor}.ds-chip:where(:not(:disabled,:has(input:disabled),[aria-disabled=true])):has(input:checked):active,.ds-chip[data-removable]:where(:not(:disabled,:has(input:disabled),[aria-disabled=true])):active{--dsc-chip-background:var(--ds-color-accent-base-active);--dsc-chip-border-color:transparent;--dsc-chip-color:var(--ds-color-accent-contrast-default)}}
|
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-min-width:16rem;--dsc-dropdown-item-padding:0 var(--ds-spacing-4);--dsc-dropdown-header-padding:var(--ds-spacing-2) var(--ds-spacing-4);background-color:var(--ds-color-neutral-background-default);border:1px solid var(--ds-color-neutral-border-subtle);border-radius:min(1rem,var(--ds-border-radius-md));box-shadow:var(--ds-shadow-md);list-style:none;min-width:var(--dsc-dropdown-min-width);padding:var(--dsc-dropdown-padding)}.ds-dropdown:before{display:none}.ds-dropdown[data-size=sm]{--dsc-dropdown-padding:var(--ds-spacing-2);--dsc-dropdown-min-width:15rem}.ds-dropdown[data-size=lg]{--dsc-dropdown-padding:var(--ds-spacing-4) var(--ds-spacing-2);--dsc-dropdown-min-width:18rem}.ds-dropdown :is(a,button,[role=button]){justify-content:start;padding:var(--dsc-dropdown-item-padding);width:100%}.ds-dropdown .ds-dropdown__list{list-style:none;margin:0;padding:0}
|
|
1
|
+
.ds-dropdown{--dsc-dropdown-padding:var(--ds-spacing-3) var(--ds-spacing-2);--dsc-dropdown-min-width:16rem;--dsc-dropdown-item-padding:0 var(--ds-spacing-4);--dsc-dropdown-header-padding:var(--ds-spacing-2) var(--ds-spacing-4);background-color:var(--ds-color-neutral-background-default);border:1px solid var(--ds-color-neutral-border-subtle);border-radius:min(1rem,var(--ds-border-radius-md));box-shadow:var(--ds-shadow-md);box-sizing:border-box;list-style:none;min-width:var(--dsc-dropdown-min-width);padding:var(--dsc-dropdown-padding)}.ds-dropdown:before{display:none}.ds-dropdown .ds-dropdown__heading{padding:var(--dsc-dropdown-header-padding)}:is(.ds-dropdown .ds-dropdown__heading){font-size:var(--ds-body-md-font-size);font-weight:var(--ds-body-md-font-weight);letter-spacing:var(--ds-body-md-letter-spacing);line-height:var(--ds-body-md-line-height)}.ds-dropdown[data-size=sm]{--dsc-dropdown-padding:var(--ds-spacing-2);--dsc-dropdown-min-width:15rem}:is(.ds-dropdown[data-size=sm] .ds-dropdown__heading){font-size:var(--ds-body-sm-font-size);font-weight:var(--ds-body-sm-font-weight);letter-spacing:var(--ds-body-sm-letter-spacing);line-height:var(--ds-body-sm-line-height)}.ds-dropdown[data-size=lg]{--dsc-dropdown-padding:var(--ds-spacing-4) var(--ds-spacing-2);--dsc-dropdown-min-width:18rem}:is(.ds-dropdown[data-size=lg] .ds-dropdown__heading){font-size:var(--ds-body-lg-font-size);font-weight:var(--ds-body-lg-font-weight);letter-spacing:var(--ds-body-lg-letter-spacing);line-height:var(--ds-body-lg-line-height)}.ds-dropdown :is(a,button,[role=button]){box-sizing:border-box;justify-content:start;padding:var(--dsc-dropdown-item-padding);width:100%}.ds-dropdown .ds-dropdown__list{list-style:none;margin:0;padding:0}
|
package/dist/error-summary.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.ds-error-summary{--dsc-errorsummary-background:var(--ds-color-danger-surface-default);--dsc-errorsummary-border-radius:min(1rem,var(--ds-border-radius-lg));--dsc-errorsummary-padding:var(--ds-spacing-6) var(--ds-spacing-8);--dsc-errorsummary-link-color:var(--ds-color-neutral-text-default);--dsc-errorsummary-heading-color:var(--ds-color-danger-text-default);background-color:var(--dsc-errorsummary-background);border-radius:var(--dsc-errorsummary-border-radius);padding:var(--dsc-errorsummary-padding)}.ds-error-summary :is(h1,h2,h3,h4,h5,h6){color:var(--dsc-errorsummary-heading-color)}.ds-error-summary a{color:var(--dsc-errorsummary-link-color)}.ds-error-summary li:last-of-type{margin-bottom:0}
|
|
1
|
+
.ds-error-summary{--dsc-errorsummary-background:var(--ds-color-danger-surface-default);--dsc-errorsummary-border-radius:min(1rem,var(--ds-border-radius-lg));--dsc-errorsummary-padding:var(--ds-spacing-6) var(--ds-spacing-8);--dsc-errorsummary-link-color:var(--ds-color-neutral-text-default);--dsc-errorsummary-heading-color:var(--ds-color-danger-text-default);background-color:var(--dsc-errorsummary-background);border-radius:var(--dsc-errorsummary-border-radius);box-sizing:border-box;padding:var(--dsc-errorsummary-padding)}.ds-error-summary :is(h1,h2,h3,h4,h5,h6){color:var(--dsc-errorsummary-heading-color);margin-bottom:var(--ds-spacing-2)}.ds-error-summary a{color:var(--dsc-errorsummary-link-color)}.ds-error-summary li:last-of-type{margin-bottom:0}
|
package/dist/helptext.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.ds-helptext{--dsc-helptext-icon-size:65%;--dsc-helptext-icon-url:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 8 14'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M4 11a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3M4 0c2.2 0 4 1.66 4 3.7 0 .98-.42 1.9-1.17 2.6l-.6.54-.29.29c-.48.46-.87.93-.94 1.41v.96H3v-.81c0-1.26.84-2.22 1.68-3L5.42 5c.38-.35.58-.8.58-1.3 0-1.04-.9-1.87-2-1.87-1.06 0-1.92.75-2 1.7v.15H0C0 1.66 1.8 0 4 0' clip-rule='evenodd'/%3E%3C/svg%3E");--dsc-helptext-size:var(--ds-sizing-7)}.ds-helptext:focus-visible{box-shadow:var(--dsc-focus-boxShadow);outline:
|
|
1
|
+
.ds-helptext{--dsc-helptext-icon-size:65%;--dsc-helptext-icon-url:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 8 14'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M4 11a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3M4 0c2.2 0 4 1.66 4 3.7 0 .98-.42 1.9-1.17 2.6l-.6.54-.29.29c-.48.46-.87.93-.94 1.41v.96H3v-.81c0-1.26.84-2.22 1.68-3L5.42 5c.38-.35.58-.8.58-1.3 0-1.04-.9-1.87-2-1.87-1.06 0-1.92.75-2 1.7v.15H0C0 1.66 1.8 0 4 0' clip-rule='evenodd'/%3E%3C/svg%3E");--dsc-helptext-size:var(--ds-sizing-7)}.ds-helptext:focus-visible{box-shadow:var(--dsc-focus-boxShadow);outline:var(--dsc-focus-outline);outline-offset:var(--dsc-focus-border-width)}.ds-helptext{border:2px solid;border-radius:var(--ds-border-radius-full);box-sizing:border-box;height:var(--dsc-helptext-size);min-height:0;min-width:0;padding:0;position:relative;width:var(--dsc-helptext-size)}.ds-helptext:before{background:currentcolor;border-radius:inherit;content:"";height:100%;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-image:var(--dsc-helptext-icon-url);mask-image:var(--dsc-helptext-icon-url);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:var(--dsc-helptext-icon-size) var(--dsc-helptext-icon-size),cover;mask-size:var(--dsc-helptext-icon-size) var(--dsc-helptext-icon-size),cover;scale:1.1;width:100%}.ds-helptext:has(+:popover-open):before{-webkit-mask-image:var(--dsc-helptext-icon-url),linear-gradient(currentcolor,currentcolor);mask-image:var(--dsc-helptext-icon-url),linear-gradient(currentcolor,currentcolor)}.ds-helptext[data-size=sm]{--dsc-helptext-size:var(--ds-sizing-6)}.ds-helptext[data-size=lg]{--dsc-helptext-size:var(--ds-sizing-8)}@media print{.ds-helptext{display:none}}
|