@digdir/designsystemet-css 1.0.0-next.33 → 1.0.0-next.34

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (31) hide show
  1. package/badge.css +39 -54
  2. package/breadcrumbs.css +48 -57
  3. package/button.css +9 -3
  4. package/dist/badge.css +1 -1
  5. package/dist/breadcrumbs.css +1 -1
  6. package/dist/button.css +1 -1
  7. package/dist/dropdown.css +1 -0
  8. package/dist/error-summary.css +1 -1
  9. package/dist/fieldset.css +1 -1
  10. package/dist/helptext.css +1 -1
  11. package/dist/index.css +1 -1
  12. package/dist/link.css +1 -1
  13. package/dist/modal.css +1 -1
  14. package/dist/skeleton.css +1 -1
  15. package/dist/tabs.css +1 -1
  16. package/dist/textarea.css +1 -1
  17. package/dist/togglegroup.css +1 -1
  18. package/dropdown.css +45 -0
  19. package/error-summary.css +4 -4
  20. package/fieldset.css +37 -36
  21. package/helptext.css +40 -52
  22. package/index.css +5 -9
  23. package/link.css +5 -4
  24. package/modal.css +67 -59
  25. package/package.json +1 -1
  26. package/skeleton.css +30 -38
  27. package/tabs.css +47 -49
  28. package/textarea.css +1 -0
  29. package/togglegroup.css +7 -18
  30. package/dist/dropdownmenu.css +0 -1
  31. package/dropdownmenu.css +0 -43
package/badge.css CHANGED
@@ -2,43 +2,39 @@
2
2
  --dsc-badge-background: var(--ds-color-accent-base-default);
3
3
  --dsc-badge-color: var(--ds-color-accent-contrast-default);
4
4
  --dsc-badge-padding: 0 calc(var(--ds-spacing-1) + calc(var(--ds-spacing-1) / 2));
5
- --dsc-badge-height: calc(var(--ds-sizing-3) + calc(var(--ds-spacing-1) / 2));
6
- --dsc-badge-width: calc(var(--ds-sizing-3) + calc(var(--ds-spacing-1) / 2));
5
+ --dsc-badge-size: calc(var(--ds-sizing-3) + calc(var(--ds-spacing-1) / 2));
7
6
 
8
- background-color: var(--dsc-badge-background);
9
- color: var(--dsc-badge-color);
10
- border-radius: var(--ds-border-radius-full);
11
- display: grid;
12
- place-items: center;
13
- padding: var(--dsc-badge-padding);
14
- height: var(--dsc-badge-height);
15
- width: var(--dsc-badge-width);
7
+ display: inline-flex;
8
+ position: relative;
16
9
 
17
- &.ds-badge--count {
18
- --dsc-badge-height: var(--ds-sizing-6);
19
- --dsc-badge-width: auto;
20
- --dsc-badge-padding: 0 calc(var(--ds-spacing-1) + calc(var(--ds-spacing-1) / 2));
10
+ &::before {
11
+ content: attr(data-count);
12
+ background: var(--dsc-badge-background);
13
+ border-radius: var(--ds-border-radius-full);
14
+ box-sizing: border-box;
15
+ color: var(--dsc-badge-color);
16
+ display: grid;
17
+ min-height: var(--dsc-badge-size);
18
+ min-width: var(--dsc-badge-size);
19
+ padding: var(--dsc-badge-padding);
20
+ place-items: center;
21
21
  }
22
22
 
23
23
  &[data-size='sm'] {
24
- --dsc-badge-height: var(--ds-sizing-3);
25
- --dsc-badge-width: var(--ds-sizing-3);
24
+ --dsc-badge-size: var(--ds-sizing-3);
25
+ --dsc-badge-padding: 0 var(--ds-spacing-1);
26
26
 
27
- &.ds-badge--count {
28
- --dsc-badge-height: var(--ds-sizing-5);
29
- --dsc-badge-width: auto;
30
- --dsc-badge-padding: 0 var(--ds-spacing-1);
27
+ &[data-count] {
28
+ --dsc-badge-size: var(--ds-sizing-5);
31
29
  }
32
30
  }
33
31
 
34
32
  &[data-size='lg'] {
35
- --dsc-badge-height: var(--ds-sizing-4);
36
- --dsc-badge-width: var(--ds-sizing-4);
33
+ --dsc-badge-size: var(--ds-sizing-4);
34
+ --dsc-badge-padding: 0 var(--ds-spacing-2);
37
35
 
38
- &.ds-badge--count {
39
- --dsc-badge-height: var(--ds-sizing-7);
40
- --dsc-badge-width: auto;
41
- --dsc-badge-padding: 0 var(--ds-spacing-2);
36
+ &[data-count] {
37
+ --dsc-badge-size: var(--ds-sizing-7);
42
38
  }
43
39
  }
44
40
 
@@ -68,66 +64,55 @@
68
64
  }
69
65
 
70
66
  /* If placement is present, we are floating */
71
- &[data-placement] {
72
- transform-origin: center;
67
+ &[data-placement]::before {
73
68
  position: absolute;
74
69
  }
75
70
 
76
- &[data-placement='top-right'][data-overlap='rectangle'] {
71
+ &[data-placement='top-right']::before {
77
72
  top: 0;
78
73
  right: 0;
79
- transform: translateX(50%) translateY(-50%);
74
+ translate: 50% -50%;
80
75
  }
81
76
 
82
- &[data-placement='top-left'][data-overlap='rectangle'] {
77
+ &[data-placement='top-left']::before {
83
78
  top: 0;
84
79
  left: 0;
85
- transform: translateX(-50%) translateY(-50%);
80
+ translate: -50% -50%;
86
81
  }
87
82
 
88
- &[data-placement='bottom-right'][data-overlap='rectangle'] {
83
+ &[data-placement='bottom-right']::before {
89
84
  bottom: 0;
90
85
  right: 0;
91
- transform: translateX(50%) translateY(50%);
86
+ translate: 50% 50%;
92
87
  }
93
88
 
94
- &[data-placement='bottom-left'][data-overlap='rectangle'] {
89
+ &[data-placement='bottom-left']::before {
95
90
  bottom: 0;
96
91
  left: 0;
97
- transform: translateX(-50%) translateY(50%);
92
+ translate: -50% 50%;
98
93
  }
99
94
 
100
- &[data-placement='top-right'][data-overlap='circle'] {
95
+ &[data-placement='top-right'][data-overlap='circle']::before {
101
96
  top: 14%;
102
97
  right: 14%;
103
- transform: translateX(50%) translateY(-50%);
98
+ translate: 50% -50%;
104
99
  }
105
100
 
106
- &[data-placement='top-left'][data-overlap='circle'] {
101
+ &[data-placement='top-left'][data-overlap='circle']::before {
107
102
  top: 14%;
108
103
  left: 14%;
109
- transform: translateX(-50%) translateY(-50%);
104
+ translate: -50% -50%;
110
105
  }
111
106
 
112
- &[data-placement='bottom-right'][data-overlap='circle'] {
107
+ &[data-placement='bottom-right'][data-overlap='circle']::before {
113
108
  bottom: 14%;
114
109
  right: 14%;
115
- transform: translateX(50%) translateY(50%);
110
+ translate: 50% 50%;
116
111
  }
117
112
 
118
- &[data-placement='bottom-left'][data-overlap='circle'] {
113
+ &[data-placement='bottom-left'][data-overlap='circle']::before {
119
114
  bottom: 14%;
120
115
  left: 14%;
121
- transform: translateX(-50%) translateY(50%);
116
+ translate: -50% 50%;
122
117
  }
123
118
  }
124
-
125
- .ds-badge__wrapper {
126
- display: inline-flex;
127
- position: relative;
128
- width: fit-content;
129
- height: fit-content;
130
- flex-shrink: 0;
131
- align-items: center;
132
- justify-content: center;
133
- }
package/breadcrumbs.css CHANGED
@@ -1,72 +1,63 @@
1
1
  .ds-breadcrumbs {
2
2
  --dsc-breadcrumbs-spacing: var(--ds-spacing-2);
3
3
  --dsc-breadcrumbs-chevron-size: var(--ds-sizing-6);
4
- --dsc-breadcrumbs-link-color: inherit;
5
- }
6
-
7
- .ds-breadcrumbs--sm {
8
- --dsc-breadcrumbs-spacing: var(--ds-spacing-1);
9
- --dsc-breadcrumbs-chevron-size: var(--ds-sizing-5);
10
- }
11
4
 
12
- .ds-breadcrumbs--md {
13
- --dsc-breadcrumbs-spacing: var(--ds-spacing-2);
14
- --dsc-breadcrumbs-chevron-size: var(--ds-sizing-6);
15
- }
16
-
17
- .ds-breadcrumbs--lg {
18
- --dsc-breadcrumbs-spacing: var(--ds-spacing-3);
19
- --dsc-breadcrumbs-chevron-size: var(--ds-sizing-7);
20
- }
5
+ &[data-size='sm'] {
6
+ --dsc-breadcrumbs-spacing: var(--ds-spacing-1);
7
+ --dsc-breadcrumbs-chevron-size: var(--ds-sizing-5);
8
+ }
21
9
 
22
- .ds-breadcrumbs__list {
23
- display: flex;
24
- flex-wrap: wrap;
25
- list-style-type: none;
26
- margin: 0;
27
- padding: 0;
28
- gap: var(--dsc-breadcrumbs-spacing) 0;
29
- }
10
+ &[data-size='lg'] {
11
+ --dsc-breadcrumbs-spacing: var(--ds-spacing-3);
12
+ --dsc-breadcrumbs-chevron-size: var(--ds-sizing-7);
13
+ }
30
14
 
31
- .ds-breadcrumbs__item:where(:not(:last-child))::after,
32
- .ds-breadcrumbs > .ds-breadcrumbs__link::before {
33
- background: currentcolor;
34
- content: '';
35
- display: inline-block;
36
- height: var(--dsc-breadcrumbs-chevron-size);
37
- margin-inline: var(--dsc-breadcrumbs-spacing);
38
- mask: url("data:image/svg+xml,%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")
39
- 50% / contain no-repeat;
40
- vertical-align: middle;
41
- width: var(--dsc-breadcrumbs-chevron-size);
42
- }
15
+ & > :is(ol, ul) {
16
+ display: flex;
17
+ flex-wrap: wrap;
18
+ list-style-type: none;
19
+ margin: 0;
20
+ padding: 0;
21
+ gap: var(--dsc-breadcrumbs-spacing) 0;
22
+ }
43
23
 
44
- /* When link is direct child of Breadcrumbs, make it back button */
45
- .ds-breadcrumbs > .ds-breadcrumbs__link::before {
46
- margin: 0;
47
- rotate: 180deg;
48
- }
24
+ & a:not(:focus-visible) {
25
+ color: inherit;
26
+ }
49
27
 
50
- .ds-breadcrumbs__link {
51
- --dsc-link-color: var(--dsc-breadcrumbs-link-color);
52
- --dsc-link-color-visited: var(--dsc-breadcrumbs-link-color);
53
- }
28
+ & a[aria-current='page'] {
29
+ text-decoration: none;
30
+ }
54
31
 
55
- .ds-breadcrumbs__link[aria-current='page'] {
56
- text-decoration: none;
57
- }
32
+ /* Draw chevron between items and before back link */
33
+ & li:where(:not(:last-child))::after,
34
+ & > :not(ol, ul)::before {
35
+ background: currentcolor;
36
+ content: '';
37
+ display: inline-block;
38
+ height: var(--dsc-breadcrumbs-chevron-size);
39
+ margin-inline: var(--dsc-breadcrumbs-spacing);
40
+ mask: center / contain no-repeat
41
+ url("data:image/svg+xml,%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");
42
+ vertical-align: middle;
43
+ width: var(--dsc-breadcrumbs-chevron-size);
44
+ }
58
45
 
59
- .ds-breadcrumbs > .ds-breadcrumbs__link:where(:not(:only-child)) {
60
- display: none;
61
- }
46
+ /* When link is direct child of Breadcrumbs, make it back button */
47
+ & > :not(ol, ul)::before {
48
+ margin: 0;
49
+ rotate: 180deg;
50
+ }
62
51
 
63
- @media (max-width: 650px) {
64
- .ds-breadcrumbs > .ds-breadcrumbs__nav:where(:not(:only-child)) {
65
- display: none;
52
+ @media (max-width: 650px) {
53
+ & > :is(ol, ul):not(:only-child) {
54
+ display: none; /* Hide list when mobile and having back link */
55
+ }
66
56
  }
67
57
 
68
- .ds-breadcrumbs > .ds-breadcrumbs__link {
69
- display: block;
70
- width: fit-content;
58
+ @media (min-width: 651px) {
59
+ & > :not(ol, ul) {
60
+ display: none; /* Hide back link when desktop and having list */
61
+ }
71
62
  }
72
63
  }
package/button.css CHANGED
@@ -10,6 +10,7 @@
10
10
  --dsc-button-size: var(--ds-sizing-12);
11
11
 
12
12
  @composes ds-focus from './utilities.css';
13
+ @composes ds-paragraph-short from './baseline/typography.css';
13
14
 
14
15
  align-items: center;
15
16
  background: var(--dsc-button-background);
@@ -28,6 +29,10 @@
28
29
  text-align: inherit;
29
30
  text-decoration: none;
30
31
 
32
+ &:focus-visible {
33
+ position: relative; /* Place focusring on top */
34
+ }
35
+
31
36
  &:not([hidden]) {
32
37
  display: flex;
33
38
  }
@@ -137,8 +142,8 @@
137
142
  */
138
143
 
139
144
  @media (hover: hover) and (pointer: fine) {
140
- /* Only use hover for non-touch devices to prevent sticky-hovering */
141
- &:not(:disabled, [aria-disabled='true'], [aria-busy='true']):hover {
145
+ /* Only use hover for non-touch devices to prevent sticky-hovering, using :where to prevent adding specificity */
146
+ &:where(:not(:disabled, [aria-disabled='true'], [aria-busy='true'])):hover {
142
147
  background: var(--dsc-button-background--hover);
143
148
  }
144
149
  }
@@ -152,7 +157,8 @@
152
157
  opacity: var(--ds-disabled-opacity);
153
158
  }
154
159
 
155
- &:not(:disabled, [aria-disabled='true'], [aria-busy='true']):active {
160
+ /* Using :where to prevent adding specificity */
161
+ &:where(:not(:disabled, [aria-disabled='true'], [aria-busy='true'])):active {
156
162
  background-color: var(--dsc-button-background--active);
157
163
  }
158
164
  }
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-height:calc(var(--ds-sizing-3) + var(--ds-spacing-1)/2);--dsc-badge-width:calc(var(--ds-sizing-3) + var(--ds-spacing-1)/2);background-color:var(--dsc-badge-background);border-radius:var(--ds-border-radius-full);color:var(--dsc-badge-color);display:grid;height:var(--dsc-badge-height);padding:var(--dsc-badge-padding);place-items:center;width:var(--dsc-badge-width)}.ds-badge.ds-badge--count{--dsc-badge-height:var(--ds-sizing-6);--dsc-badge-width:auto;--dsc-badge-padding:0 calc(var(--ds-spacing-1) + var(--ds-spacing-1)/2)}.ds-badge[data-size=sm]{--dsc-badge-height:var(--ds-sizing-3);--dsc-badge-width:var(--ds-sizing-3)}.ds-badge.ds-badge--count[data-size=sm]{--dsc-badge-height:var(--ds-sizing-5);--dsc-badge-width:auto;--dsc-badge-padding:0 var(--ds-spacing-1)}.ds-badge[data-size=lg]{--dsc-badge-height:var(--ds-sizing-4);--dsc-badge-width:var(--ds-sizing-4)}.ds-badge.ds-badge--count[data-size=lg]{--dsc-badge-height:var(--ds-sizing-7);--dsc-badge-width:auto;--dsc-badge-padding:0 var(--ds-spacing-2)}.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]{position:absolute;transform-origin:center}.ds-badge[data-placement=top-right][data-overlap=rectangle]{right:0;top:0;transform:translateX(50%) translateY(-50%)}.ds-badge[data-placement=top-left][data-overlap=rectangle]{left:0;top:0;transform:translateX(-50%) translateY(-50%)}.ds-badge[data-placement=bottom-right][data-overlap=rectangle]{bottom:0;right:0;transform:translateX(50%) translateY(50%)}.ds-badge[data-placement=bottom-left][data-overlap=rectangle]{bottom:0;left:0;transform:translateX(-50%) translateY(50%)}.ds-badge[data-placement=top-right][data-overlap=circle]{right:14%;top:14%;transform:translateX(50%) translateY(-50%)}.ds-badge[data-placement=top-left][data-overlap=circle]{left:14%;top:14%;transform:translateX(-50%) translateY(-50%)}.ds-badge[data-placement=bottom-right][data-overlap=circle]{bottom:14%;right:14%;transform:translateX(50%) translateY(50%)}.ds-badge[data-placement=bottom-left][data-overlap=circle]{bottom:14%;left:14%;transform:translateX(-50%) translateY(50%)}.ds-badge__wrapper{align-items:center;display:inline-flex;flex-shrink:0;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;justify-content:center;position:relative;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}
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%}
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);--dsc-breadcrumbs-link-color:inherit}.ds-breadcrumbs--sm{--dsc-breadcrumbs-spacing:var(--ds-spacing-1);--dsc-breadcrumbs-chevron-size:var(--ds-sizing-5)}.ds-breadcrumbs--md{--dsc-breadcrumbs-spacing:var(--ds-spacing-2);--dsc-breadcrumbs-chevron-size:var(--ds-sizing-6)}.ds-breadcrumbs--lg{--dsc-breadcrumbs-spacing:var(--ds-spacing-3);--dsc-breadcrumbs-chevron-size:var(--ds-sizing-7)}.ds-breadcrumbs__list{display:flex;flex-wrap:wrap;gap:var(--dsc-breadcrumbs-spacing) 0;list-style-type:none;margin:0;padding:0}.ds-breadcrumbs>.ds-breadcrumbs__link:before,.ds-breadcrumbs__item:where(:not(:last-child)):after{background:currentcolor;content:"";display:inline-block;height:var(--dsc-breadcrumbs-chevron-size);margin-inline:var(--dsc-breadcrumbs-spacing);-webkit-mask: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") 50% /contain no-repeat;mask: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") 50% /contain no-repeat;vertical-align:middle;width:var(--dsc-breadcrumbs-chevron-size)}.ds-breadcrumbs>.ds-breadcrumbs__link:before{margin:0;rotate:180deg}.ds-breadcrumbs__link{--dsc-link-color:var(--dsc-breadcrumbs-link-color);--dsc-link-color-visited:var(--dsc-breadcrumbs-link-color)}.ds-breadcrumbs__link[aria-current=page]{text-decoration:none}.ds-breadcrumbs>.ds-breadcrumbs__link:where(:not(:only-child)){display:none}@media (max-width:650px){.ds-breadcrumbs>.ds-breadcrumbs__nav:where(:not(:only-child)){display:none}.ds-breadcrumbs>.ds-breadcrumbs__link{display:block;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}}
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}}
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)}.ds-button:focus-visible{box-shadow:var(--dsc-focus-boxShadow);outline:none}.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: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)}.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)}.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: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:not(:disabled,[aria-disabled=true],[aria-busy=true]):active{background-color:var(--dsc-button-background--active)}
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)}.ds-button:focus-visible{box-shadow:var(--dsc-focus-boxShadow);outline:none}.ds-button{--dsc-bottom-spacing:var(--ds-spacing-5);color:var(--ds-color-neutral-text-default);font-size:var(--ds-paragraph-short-md-font-size);font-weight:var(--ds-paragraph-short-md-font-weight);letter-spacing:var(--ds-paragraph-short-md-letter-spacing);line-height:var(--ds-paragraph-short-md-line-height);margin:0}.ds-button[data-size=xs]{--dsc-bottom-spacing:var(--ds-spacing-3);font-size:var(--ds-paragraph-short-xs-font-size);font-weight:var(--ds-paragraph-short-xs-font-weight);letter-spacing:var(--ds-paragraph-short-xs-letter-spacing);line-height:var(--ds-paragraph-short-xs-line-height)}.ds-button[data-size=sm]{--dsc-bottom-spacing:var(--ds-spacing-4);font-size:var(--ds-paragraph-short-sm-font-size);font-weight:var(--ds-paragraph-short-sm-font-weight);letter-spacing:var(--ds-paragraph-short-sm-letter-spacing);line-height:var(--ds-paragraph-short-sm-line-height)}.ds-button[data-size=md]{--dsc-bottom-spacing:var(--ds-spacing-5);font-size:var(--ds-paragraph-short-md-font-size);font-weight:var(--ds-paragraph-short-md-font-weight);letter-spacing:var(--ds-paragraph-short-md-letter-spacing);line-height:var(--ds-paragraph-short-md-line-height)}.ds-button[data-size=lg]{--dsc-bottom-spacing:var(--ds-spacing-6);font-size:var(--ds-paragraph-short-lg-font-size);font-weight:var(--ds-paragraph-short-lg-font-weight);letter-spacing:var(--ds-paragraph-short-lg-letter-spacing);line-height:var(--ds-paragraph-short-lg-line-height)}.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)}.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)}.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/dropdown.css ADDED
@@ -0,0 +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}.ds-dropdown .ds-dropdown__heading{padding:var(--dsc-dropdown-header-padding)}
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 a{color:var(--dsc-errorsummary-link-color)}.ds-error-summary li:last-of-type{margin-bottom:0}.ds-error-summary__heading{color:var(--dsc-errorsummary-heading-color)}
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}
package/dist/fieldset.css CHANGED
@@ -1 +1 @@
1
- .ds-fieldset{border:0;margin:0;min-width:0;padding:0}.ds-fieldset--spacing{display:flex;flex-direction:column;gap:var(--ds-spacing-2)}.ds-fieldset__description{color:var(--ds-color-neutral-text-subtle);margin-bottom:var(--ds-spacing-2)}.ds-fieldset__legend{display:contents}.ds-fieldset--readonly .ds-fieldset__legend__content{display:inline-flex}.ds-fieldset:not(:has(.ds-fieldset__description)) .ds-fieldset__legend__content{margin-bottom:var(--ds-spacing-2)}.ds-fieldset--readonly .ds-fieldset__readonly__icon{height:1.2em;width:1.2em}.ds-fieldset:disabled .ds-fieldset__description,.ds-fieldset:disabled .ds-fieldset__legend{color:var(--ds-color-neutral-border-subtle)}.ds-fieldset__error-message{display:contents}
1
+ .ds-fieldset{--dsc-fieldset-icon-size:1.2em;--dsc-fieldset-gap:var(--ds-spacing-2);border:0;margin:0;min-width:0;padding:0}.ds-fieldset>:not(:last-child){margin-bottom:var(--ds-spacing-2)}.ds-fieldset>legend{display:inline-flex}.ds-fieldset>legend:empty{display:none}:is(.ds-fieldset[data-hidelegend]>legend,.ds-fieldset[data-hidelegend]>legend+p){border:0;clip:rect(0 0 0 0);height:1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.ds-fieldset[data-readonly]>legend:before{background:currentcolor;content:"";height:var(--dsc-fieldset-icon-size);-webkit-mask:center/contain no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2.25A4.75 4.75 0 0 0 7.25 7v2.25H7A1.75 1.75 0 0 0 5.25 11v9c0 .41.34.75.75.75h12a.75.75 0 0 0 .75-.75v-9A1.75 1.75 0 0 0 17 9.25h-.25V7A4.75 4.75 0 0 0 12 2.25m3.25 7V7a3.25 3.25 0 0 0-6.5 0v2.25zM12 13a1.5 1.5 0 0 0-.75 2.8V17a.75.75 0 0 0 1.5 0v-1.2A1.5 1.5 0 0 0 12 13'/%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' aria-hidden='true' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2.25A4.75 4.75 0 0 0 7.25 7v2.25H7A1.75 1.75 0 0 0 5.25 11v9c0 .41.34.75.75.75h12a.75.75 0 0 0 .75-.75v-9A1.75 1.75 0 0 0 17 9.25h-.25V7A4.75 4.75 0 0 0 12 2.25m3.25 7V7a3.25 3.25 0 0 0-6.5 0v2.25zM12 13a1.5 1.5 0 0 0-.75 2.8V17a.75.75 0 0 0 1.5 0v-1.2A1.5 1.5 0 0 0 12 13'/%3E%3C/svg%3E");width:var(--dsc-fieldset-icon-size)}.ds-fieldset>legend+p{color:var(--ds-color-neutral-text-subtle)}.ds-fieldset:disabled>legend,.ds-fieldset:disabled>legend+p{color:var(--ds-color-neutral-border-subtle)}
package/dist/helptext.css CHANGED
@@ -1 +1 @@
1
- .ds-helptext__button{--dsc-helptext-color:var(--ds-color-neutral-text-default);--dsc-helptext-icon-color:var(--ds-color-accent-base-default);--dsc-helptext-icon-width:var(--ds-sizing-7);--dsc-helptext-icon-height:var(--ds-sizing-7);background-color:initial;border:none;border-radius:50px;cursor:pointer;display:flex;min-height:0;min-width:0;padding:0!important}@media print{.ds-helptext__button{display:none}}.ds-helptext__icon--filled{display:none}.ds-helptext__icon{color:var(--dsc-helptext-icon-color);height:var(--dsc-helptext-icon-height);width:var(--dsc-helptext-icon-width)}.ds-helptext__button:where(:hover,:focus,[data-state^=open])>.ds-helptext__icon{display:none}.ds-helptext__button:where(:hover,:focus,[data-state^=open])>.ds-helptext__icon--filled{display:inline-block}.ds-helptext__content{color:var(--dsc-helptext-color);max-width:700px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.ds-helptext--sm .ds-helptext__icon{--dsc-helptext-icon-width:var(--ds-sizing-6);--dsc-helptext-icon-height:var(--ds-sizing-6)}.ds-helptext--md .ds-helptext__icon{--dsc-helptext-icon-width:var(--ds-sizing-7);--dsc-helptext-icon-height:var(--ds-sizing-7)}.ds-helptext--lg .ds-helptext__icon{--dsc-helptext-icon-width:var(--ds-sizing-8);--dsc-helptext-icon-height:var(--ds-sizing-8)}
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:none}.ds-helptext{border:2px solid;border-radius:var(--ds-border-radius-full);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}}