@boostdev/design-system-components 0.1.12 → 0.1.14

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 (121) hide show
  1. package/AGENTS.md +14 -2
  2. package/README.md +35 -5
  3. package/dist/client.cjs +54 -50
  4. package/dist/client.css +498 -509
  5. package/dist/client.d.cts +5 -3
  6. package/dist/client.d.ts +5 -3
  7. package/dist/client.js +54 -50
  8. package/dist/index.cjs +54 -50
  9. package/dist/index.css +498 -509
  10. package/dist/index.d.cts +5 -3
  11. package/dist/index.d.ts +5 -3
  12. package/dist/index.js +54 -50
  13. package/package.json +6 -2
  14. package/src/components/interaction/Button/Button.mdx +73 -0
  15. package/src/components/interaction/Button/Button.module.css +12 -20
  16. package/src/components/interaction/Button/Button.stories.tsx +0 -1
  17. package/src/components/interaction/Command/Command.mdx +28 -0
  18. package/src/components/interaction/Command/Command.module.css +2 -1
  19. package/src/components/interaction/Command/Command.stories.tsx +3 -3
  20. package/src/components/interaction/Dialog/Dialog.mdx +57 -0
  21. package/src/components/interaction/Dialog/Dialog.module.css +6 -0
  22. package/src/components/interaction/Dialog/Dialog.stories.tsx +0 -1
  23. package/src/components/interaction/Drawer/Drawer.mdx +35 -0
  24. package/src/components/interaction/Drawer/Drawer.module.css +3 -9
  25. package/src/components/interaction/Drawer/Drawer.stories.tsx +3 -3
  26. package/src/components/interaction/Drawer/Drawer.tsx +5 -3
  27. package/src/components/interaction/DropdownMenu/DropdownMenu.mdx +40 -0
  28. package/src/components/interaction/DropdownMenu/DropdownMenu.stories.tsx +5 -5
  29. package/src/components/interaction/Popover/Popover.mdx +34 -0
  30. package/src/components/interaction/Popover/Popover.stories.tsx +3 -3
  31. package/src/components/interaction/Rating/Rating.mdx +38 -0
  32. package/src/components/interaction/Rating/Rating.stories.tsx +0 -1
  33. package/src/components/interaction/Toast/Toast.mdx +78 -0
  34. package/src/components/interaction/Toast/Toast.module.css +21 -7
  35. package/src/components/interaction/Toast/Toast.stories.tsx +0 -1
  36. package/src/components/interaction/form/Checkbox/Checkbox.mdx +57 -0
  37. package/src/components/interaction/form/Checkbox/Checkbox.stories.tsx +0 -1
  38. package/src/components/interaction/form/Combobox/Combobox.mdx +37 -0
  39. package/src/components/interaction/form/Combobox/Combobox.stories.tsx +0 -1
  40. package/src/components/interaction/form/FileInput/FileInput.mdx +38 -0
  41. package/src/components/interaction/form/FileInput/FileInput.stories.tsx +0 -1
  42. package/src/components/interaction/form/FormInput/FormInput.mdx +54 -0
  43. package/src/components/interaction/form/FormInput/FormInput.stories.tsx +0 -1
  44. package/src/components/interaction/form/NumberInput/NumberInput.mdx +38 -0
  45. package/src/components/interaction/form/NumberInput/NumberInput.stories.tsx +0 -1
  46. package/src/components/interaction/form/Radio/Radio.mdx +60 -0
  47. package/src/components/interaction/form/Radio/Radio.module.css +24 -11
  48. package/src/components/interaction/form/Radio/Radio.stories.tsx +5 -5
  49. package/src/components/interaction/form/Radio/Radio.tsx +6 -2
  50. package/src/components/interaction/form/Select/Select.mdx +58 -0
  51. package/src/components/interaction/form/Select/Select.stories.tsx +0 -1
  52. package/src/components/interaction/form/Slider/Slider.mdx +58 -0
  53. package/src/components/interaction/form/Slider/Slider.stories.tsx +0 -1
  54. package/src/components/interaction/form/Switch/Switch.mdx +61 -0
  55. package/src/components/interaction/form/Switch/Switch.module.css +6 -10
  56. package/src/components/interaction/form/Switch/Switch.stories.tsx +0 -1
  57. package/src/components/interaction/form/Textarea/Textarea.mdx +41 -0
  58. package/src/components/interaction/form/Textarea/Textarea.stories.tsx +0 -1
  59. package/src/components/layout/ButtonGroup/ButtonGroup.mdx +47 -0
  60. package/src/components/layout/ButtonGroup/ButtonGroup.module.css +10 -10
  61. package/src/components/layout/ButtonGroup/ButtonGroup.stories.tsx +1 -2
  62. package/src/components/layout/Card/Card.mdx +58 -0
  63. package/src/components/layout/Card/Card.stories.tsx +0 -1
  64. package/src/components/layout/IconWrapper/IconWrapper.mdx +39 -0
  65. package/src/components/layout/IconWrapper/IconWrapper.stories.tsx +0 -1
  66. package/src/components/layout/SectionHeader/SectionHeader.mdx +38 -0
  67. package/src/components/layout/SectionHeader/SectionHeader.stories.tsx +0 -1
  68. package/src/components/ui/Accordion/Accordion.mdx +40 -0
  69. package/src/components/ui/Accordion/Accordion.stories.tsx +0 -1
  70. package/src/components/ui/Alert/Alert.mdx +63 -0
  71. package/src/components/ui/Alert/Alert.module.css +3 -7
  72. package/src/components/ui/Alert/Alert.stories.tsx +0 -1
  73. package/src/components/ui/Avatar/Avatar.mdx +53 -0
  74. package/src/components/ui/Avatar/Avatar.module.css +4 -8
  75. package/src/components/ui/Avatar/Avatar.stories.tsx +0 -1
  76. package/src/components/ui/Badge/Badge.mdx +62 -0
  77. package/src/components/ui/Badge/Badge.module.css +4 -10
  78. package/src/components/ui/Badge/Badge.stories.tsx +0 -1
  79. package/src/components/ui/Breadcrumb/Breadcrumb.mdx +36 -0
  80. package/src/components/ui/Breadcrumb/Breadcrumb.stories.tsx +0 -1
  81. package/src/components/ui/Calendar/Calendar.mdx +34 -0
  82. package/src/components/ui/Calendar/Calendar.stories.tsx +0 -1
  83. package/src/components/ui/Carousel/Carousel.mdx +31 -0
  84. package/src/components/ui/Carousel/Carousel.stories.tsx +0 -1
  85. package/src/components/ui/DescriptionList/DescriptionList.mdx +28 -0
  86. package/src/components/ui/DescriptionList/DescriptionList.stories.tsx +0 -1
  87. package/src/components/ui/Link/Link.mdx +44 -0
  88. package/src/components/ui/Link/Link.module.css +2 -5
  89. package/src/components/ui/Link/Link.stories.tsx +0 -1
  90. package/src/components/ui/Loading/Loading.mdx +52 -0
  91. package/src/components/ui/Loading/Loading.stories.tsx +0 -1
  92. package/src/components/ui/NotificationBanner/NotificationBanner.mdx +45 -0
  93. package/src/components/ui/NotificationBanner/NotificationBanner.module.css +3 -7
  94. package/src/components/ui/NotificationBanner/NotificationBanner.stories.tsx +2 -2
  95. package/src/components/ui/Pagination/Pagination.mdx +39 -0
  96. package/src/components/ui/Pagination/Pagination.module.css +3 -7
  97. package/src/components/ui/Pagination/Pagination.stories.tsx +0 -1
  98. package/src/components/ui/Progress/Progress.mdx +52 -0
  99. package/src/components/ui/Progress/Progress.module.css +1 -3
  100. package/src/components/ui/Progress/Progress.stories.tsx +0 -1
  101. package/src/components/ui/ProgressCircle/ProgressCircle.mdx +46 -0
  102. package/src/components/ui/ProgressCircle/ProgressCircle.stories.tsx +0 -1
  103. package/src/components/ui/Separator/Separator.mdx +29 -0
  104. package/src/components/ui/Separator/Separator.stories.tsx +0 -1
  105. package/src/components/ui/Skeleton/Skeleton.mdx +36 -0
  106. package/src/components/ui/Skeleton/Skeleton.stories.tsx +0 -1
  107. package/src/components/ui/SkipLink/SkipLink.mdx +34 -0
  108. package/src/components/ui/SkipLink/SkipLink.stories.tsx +0 -1
  109. package/src/components/ui/Table/Table.mdx +38 -0
  110. package/src/components/ui/Table/Table.stories.tsx +0 -1
  111. package/src/components/ui/Tabs/Tabs.mdx +40 -0
  112. package/src/components/ui/Tabs/Tabs.module.css +2 -5
  113. package/src/components/ui/Tabs/Tabs.stories.tsx +0 -1
  114. package/src/components/ui/Tooltip/Tooltip.mdx +43 -0
  115. package/src/components/ui/Tooltip/Tooltip.module.css +2 -5
  116. package/src/components/ui/Tooltip/Tooltip.stories.tsx +6 -6
  117. package/src/components/ui/Typography/Typography.mdx +41 -0
  118. package/src/components/ui/Typography/Typography.stories.tsx +0 -1
  119. package/src/static/logo.svg +8 -0
  120. package/src/stories/Introduction.css +17 -0
  121. package/src/stories/Introduction.mdx +129 -0
package/dist/client.css CHANGED
@@ -1,22 +1,22 @@
1
1
  /* src/components/ui/Accordion/Accordion.module.css */
2
2
  @layer component {
3
- .bds0112Accordion-accordion {
3
+ .bds0114Accordion-accordion {
4
4
  display: flex;
5
5
  flex-direction: column;
6
6
  border: 1px solid var(--color_bg--subtle);
7
7
  border-radius: var(--border_radius--s);
8
8
  overflow: hidden;
9
9
  }
10
- .bds0112Accordion-item {
10
+ .bds0114Accordion-item {
11
11
  border-bottom: 1px solid var(--color_bg--subtle);
12
12
  }
13
- .bds0112Accordion-item:last-child {
13
+ .bds0114Accordion-item:last-child {
14
14
  border-bottom: none;
15
15
  }
16
- .bds0112Accordion-heading {
16
+ .bds0114Accordion-heading {
17
17
  margin: 0;
18
18
  }
19
- .bds0112Accordion-trigger {
19
+ .bds0114Accordion-trigger {
20
20
  all: unset;
21
21
  display: flex;
22
22
  align-items: center;
@@ -31,44 +31,44 @@
31
31
  transition: var(--animation_transition);
32
32
  box-sizing: border-box;
33
33
  }
34
- .bds0112Accordion-trigger:disabled {
34
+ .bds0114Accordion-trigger:disabled {
35
35
  opacity: 0.4;
36
36
  cursor: not-allowed;
37
37
  }
38
- .bds0112Accordion-trigger:focus-visible {
38
+ .bds0114Accordion-trigger:focus-visible {
39
39
  outline: var(--outline_default);
40
40
  outline-offset: calc(var(--outline_offset) * -1);
41
41
  border-radius: var(--border_radius--xs);
42
42
  }
43
43
  @media (hover: hover) and (pointer: fine) {
44
- .bds0112Accordion-trigger:not(:disabled):hover {
44
+ .bds0114Accordion-trigger:not(:disabled):hover {
45
45
  background-color: var(--color_bg--subtle);
46
46
  }
47
47
  }
48
- .bds0112Accordion-triggerLabel {
48
+ .bds0114Accordion-triggerLabel {
49
49
  flex: 1;
50
50
  text-align: start;
51
51
  }
52
- .bds0112Accordion-chevron {
52
+ .bds0114Accordion-chevron {
53
53
  width: 1.25rem;
54
54
  height: 1.25rem;
55
55
  flex-shrink: 0;
56
56
  transition: transform var(--animation_transition-duration) var(--animation_easing);
57
57
  }
58
- .bds0112Accordion-item.bds0112Accordion---open .bds0112Accordion-chevron {
58
+ .bds0114Accordion-item.bds0114Accordion---open .bds0114Accordion-chevron {
59
59
  transform: rotate(180deg);
60
60
  }
61
- .bds0112Accordion-panel {
61
+ .bds0114Accordion-panel {
62
62
  overflow: hidden;
63
63
  }
64
- .bds0112Accordion-panelContent {
64
+ .bds0114Accordion-panelContent {
65
65
  padding: 0 var(--space_m) var(--space_m);
66
66
  color: var(--color_on-bg);
67
67
  font-size: var(--font_size--body);
68
68
  line-height: var(--font_line-height--body);
69
69
  }
70
70
  @media (prefers-reduced-motion: reduce) {
71
- .bds0112Accordion-chevron {
71
+ .bds0114Accordion-chevron {
72
72
  transition: none;
73
73
  }
74
74
  }
@@ -76,58 +76,55 @@
76
76
 
77
77
  /* src/components/ui/Alert/Alert.module.css */
78
78
  @layer component {
79
- .bds0112Alert-alert {
80
- --alert_bg: var(--color_blue--subtle);
81
- --alert_text: var(--color_on-blue--subtle);
82
- --alert_border: var(--color_blue);
79
+ .bds0114Alert-alert {
83
80
  display: flex;
84
81
  align-items: flex-start;
85
82
  gap: var(--space_s);
86
83
  padding: var(--space_m);
87
84
  border-radius: var(--border_radius--s);
88
- border-inline-start: var(--space_s) solid var(--alert_border);
89
- background-color: var(--alert_bg);
90
- color: var(--alert_text);
85
+ border-inline-start: var(--space_s) solid var(--alert_border, var(--color_blue));
86
+ background-color: var(--alert_bg, var(--color_blue--subtle));
87
+ color: var(--alert_text, var(--color_on-blue--subtle));
91
88
  font-size: var(--font_size--body);
92
89
  line-height: var(--font_line-height--body);
93
90
  }
94
- .bds0112Alert---variant_info {
91
+ .bds0114Alert---variant_info {
95
92
  --alert_bg: var(--color_blue--subtle);
96
93
  --alert_text: var(--color_on-blue--subtle);
97
94
  --alert_border: var(--color_blue);
98
95
  }
99
- .bds0112Alert---variant_success {
96
+ .bds0114Alert---variant_success {
100
97
  --alert_bg: var(--color_success--subtle);
101
98
  --alert_text: var(--color_on-success--subtle);
102
99
  --alert_border: var(--color_success);
103
100
  }
104
- .bds0112Alert---variant_warning {
101
+ .bds0114Alert---variant_warning {
105
102
  --alert_bg: var(--color_orange--subtle);
106
103
  --alert_text: var(--color_on-orange--subtle);
107
104
  --alert_border: var(--color_warning);
108
105
  }
109
- .bds0112Alert---variant_error {
106
+ .bds0114Alert---variant_error {
110
107
  --alert_bg: rgb(from var(--color_error) r g b / 12%);
111
108
  --alert_text: var(--color_on-bg);
112
109
  --alert_border: var(--color_error);
113
110
  }
114
- .bds0112Alert-icon {
111
+ .bds0114Alert-icon {
115
112
  display: flex;
116
113
  align-items: center;
117
114
  flex-shrink: 0;
118
115
  margin-block-start: 0.1em;
119
116
  }
120
- .bds0112Alert-content {
117
+ .bds0114Alert-content {
121
118
  flex: 1;
122
119
  display: flex;
123
120
  flex-direction: column;
124
121
  gap: var(--space_xxs);
125
122
  }
126
- .bds0112Alert-title {
123
+ .bds0114Alert-title {
127
124
  font-weight: var(--font_weight--semibold);
128
125
  font-size: var(--font_size--body);
129
126
  }
130
- .bds0112Alert-dismiss {
127
+ .bds0114Alert-dismiss {
131
128
  all: unset;
132
129
  display: flex;
133
130
  align-items: center;
@@ -139,16 +136,16 @@
139
136
  border: 1px solid currentcolor;
140
137
  border-radius: 50%;
141
138
  }
142
- .bds0112Alert-dismiss svg {
139
+ .bds0114Alert-dismiss svg {
143
140
  width: 1rem;
144
141
  height: 1rem;
145
142
  }
146
- .bds0112Alert-dismiss:focus-visible {
143
+ .bds0114Alert-dismiss:focus-visible {
147
144
  outline: var(--outline_default);
148
145
  outline-offset: var(--outline_offset);
149
146
  }
150
147
  @media (hover: hover) and (pointer: fine) {
151
- .bds0112Alert-dismiss:hover {
148
+ .bds0114Alert-dismiss:hover {
152
149
  opacity: 0.7;
153
150
  }
154
151
  }
@@ -156,88 +153,81 @@
156
153
 
157
154
  /* src/components/ui/Avatar/Avatar.module.css */
158
155
  @layer component {
159
- .bds0112Avatar-avatar {
160
- --avatar_size: 3em;
161
- --avatar_bg: var(--color_blue);
162
- --avatar_text: var(--color_on-blue);
156
+ .bds0114Avatar-avatar {
163
157
  display: inline-flex;
164
158
  align-items: center;
165
159
  justify-content: center;
166
- width: var(--avatar_size);
167
- height: var(--avatar_size);
160
+ width: var(--avatar_size, 3em);
161
+ height: var(--avatar_size, 3em);
168
162
  border-radius: 50%;
169
163
  overflow: hidden;
170
164
  flex-shrink: 0;
171
165
  }
172
- .bds0112Avatar-avatar.bds0112Avatar---fallback {
173
- background-color: var(--avatar_bg);
174
- color: var(--avatar_text);
166
+ .bds0114Avatar-avatar.bds0114Avatar---fallback {
167
+ background-color: var(--avatar_bg, var(--color_blue));
168
+ color: var(--avatar_text, var(--color_on-blue));
175
169
  font-weight: var(--font_weight--semibold);
176
170
  }
177
- .bds0112Avatar-avatar.bds0112Avatar---size_small {
171
+ .bds0114Avatar-avatar.bds0114Avatar---size_small {
178
172
  --avatar_size: 2em;
179
173
  }
180
- .bds0112Avatar-avatar.bds0112Avatar---size_medium {
174
+ .bds0114Avatar-avatar.bds0114Avatar---size_medium {
181
175
  --avatar_size: 3em;
182
176
  }
183
- .bds0112Avatar-avatar.bds0112Avatar---size_large {
177
+ .bds0114Avatar-avatar.bds0114Avatar---size_large {
184
178
  --avatar_size: 4.5em;
185
179
  }
186
- .bds0112Avatar-image {
180
+ .bds0114Avatar-image {
187
181
  width: 100%;
188
182
  height: 100%;
189
183
  object-fit: cover;
190
184
  display: block;
191
185
  }
192
- .bds0112Avatar-initials {
186
+ .bds0114Avatar-initials {
193
187
  line-height: 1;
194
188
  user-select: none;
195
189
  font-size: var(--font_size--body);
196
190
  }
197
- .bds0112Avatar-avatar.bds0112Avatar---size_small .bds0112Avatar-initials {
191
+ .bds0114Avatar-avatar.bds0114Avatar---size_small .bds0114Avatar-initials {
198
192
  font-size: var(--font_size--body--s);
199
193
  }
200
- .bds0112Avatar-avatar.bds0112Avatar---size_large .bds0112Avatar-initials {
194
+ .bds0114Avatar-avatar.bds0114Avatar---size_large .bds0114Avatar-initials {
201
195
  font-size: var(--font_size--heading-3);
202
196
  }
203
197
  }
204
198
 
205
199
  /* src/components/ui/Badge/Badge.module.css */
206
200
  @layer component {
207
- .bds0112Badge-badge {
208
- --badge_bg: var(--color_blue);
209
- --badge_text: var(--color_on-blue);
210
- --badge_radius: 2em;
211
- --badge_font-size: var(--font_size--body--s);
201
+ .bds0114Badge-badge {
212
202
  display: inline-flex;
213
203
  align-items: center;
214
204
  justify-content: center;
215
205
  padding: var(--space_xxs) var(--space_xs);
216
- border-radius: var(--badge_radius);
217
- font-size: var(--badge_font-size);
206
+ border-radius: var(--badge_radius, 2em);
207
+ font-size: var(--badge_font-size, var(--font_size--body--s));
218
208
  font-weight: var(--font_weight--semibold);
219
209
  line-height: 1;
220
210
  white-space: nowrap;
221
- background-color: var(--badge_bg);
222
- color: var(--badge_text);
211
+ background-color: var(--badge_bg, var(--color_blue));
212
+ color: var(--badge_text, var(--color_on-blue));
223
213
  }
224
- .bds0112Badge---variant_primary {
214
+ .bds0114Badge---variant_primary {
225
215
  --badge_bg: var(--color_interactive);
226
216
  --badge_text: var(--color_on-interactive);
227
217
  }
228
- .bds0112Badge---variant_secondary {
218
+ .bds0114Badge---variant_secondary {
229
219
  --badge_bg: var(--color_bg);
230
220
  --badge_text: var(--color_on-bg);
231
221
  }
232
- .bds0112Badge---variant_success {
222
+ .bds0114Badge---variant_success {
233
223
  --badge_bg: var(--color_success);
234
224
  --badge_text: var(--color_on-success);
235
225
  }
236
- .bds0112Badge---variant_error {
226
+ .bds0114Badge---variant_error {
237
227
  --badge_bg: var(--color_error);
238
228
  --badge_text: var(--color_on-error);
239
229
  }
240
- .bds0112Badge---variant_warning {
230
+ .bds0114Badge---variant_warning {
241
231
  --badge_bg: var(--color_warning);
242
232
  --badge_text: var(--color_on-warning);
243
233
  }
@@ -245,10 +235,10 @@
245
235
 
246
236
  /* src/components/ui/Breadcrumb/Breadcrumb.module.css */
247
237
  @layer component {
248
- .bds0112Breadcrumb-breadcrumb {
238
+ .bds0114Breadcrumb-breadcrumb {
249
239
  font-size: var(--font_size--body--s);
250
240
  }
251
- .bds0112Breadcrumb-list {
241
+ .bds0114Breadcrumb-list {
252
242
  display: flex;
253
243
  flex-wrap: wrap;
254
244
  align-items: center;
@@ -257,32 +247,32 @@
257
247
  margin: 0;
258
248
  padding: 0;
259
249
  }
260
- .bds0112Breadcrumb-item {
250
+ .bds0114Breadcrumb-item {
261
251
  display: flex;
262
252
  align-items: center;
263
253
  gap: var(--space_xxs);
264
254
  }
265
- .bds0112Breadcrumb-link {
255
+ .bds0114Breadcrumb-link {
266
256
  color: var(--color_interactive);
267
257
  text-decoration: none;
268
258
  transition: var(--animation_transition);
269
259
  }
270
- .bds0112Breadcrumb-link:focus-visible {
260
+ .bds0114Breadcrumb-link:focus-visible {
271
261
  outline: var(--outline_default);
272
262
  outline-offset: var(--outline_offset);
273
263
  border-radius: var(--border_radius--xs);
274
264
  }
275
265
  @media (hover: hover) and (pointer: fine) {
276
- .bds0112Breadcrumb-link:hover {
266
+ .bds0114Breadcrumb-link:hover {
277
267
  text-decoration: underline;
278
268
  text-underline-offset: 0.2em;
279
269
  }
280
270
  }
281
- .bds0112Breadcrumb-separator {
271
+ .bds0114Breadcrumb-separator {
282
272
  color: var(--color_on-bg--subtle);
283
273
  user-select: none;
284
274
  }
285
- .bds0112Breadcrumb-current {
275
+ .bds0114Breadcrumb-current {
286
276
  color: var(--color_on-bg--subtle);
287
277
  font-weight: var(--font_weight--semibold);
288
278
  }
@@ -290,7 +280,7 @@
290
280
 
291
281
  /* src/components/ui/Calendar/Calendar.module.css */
292
282
  @layer component {
293
- .bds0112Calendar-calendar {
283
+ .bds0114Calendar-calendar {
294
284
  display: inline-flex;
295
285
  flex-direction: column;
296
286
  gap: var(--space_s);
@@ -301,17 +291,17 @@
301
291
  box-shadow: var(--shadow_s);
302
292
  width: 20rem;
303
293
  }
304
- .bds0112Calendar-header {
294
+ .bds0114Calendar-header {
305
295
  display: flex;
306
296
  align-items: center;
307
297
  justify-content: space-between;
308
298
  }
309
- .bds0112Calendar-monthYear {
299
+ .bds0114Calendar-monthYear {
310
300
  font-size: var(--font_size--body);
311
301
  font-weight: var(--font_weight--semibold);
312
302
  color: var(--color_on-bg);
313
303
  }
314
- .bds0112Calendar-navBtn {
304
+ .bds0114Calendar-navBtn {
315
305
  all: unset;
316
306
  display: flex;
317
307
  align-items: center;
@@ -323,35 +313,35 @@
323
313
  color: var(--color_on-bg);
324
314
  transition: var(--animation_transition);
325
315
  }
326
- .bds0112Calendar-navBtn svg {
316
+ .bds0114Calendar-navBtn svg {
327
317
  width: 1rem;
328
318
  height: 1rem;
329
319
  }
330
- .bds0112Calendar-navBtn:focus-visible {
320
+ .bds0114Calendar-navBtn:focus-visible {
331
321
  outline: var(--outline_default);
332
322
  outline-offset: var(--outline_offset);
333
323
  }
334
324
  @media (hover: hover) and (pointer: fine) {
335
- .bds0112Calendar-navBtn:hover {
325
+ .bds0114Calendar-navBtn:hover {
336
326
  background-color: var(--color_bg--subtle);
337
327
  }
338
328
  }
339
- .bds0112Calendar-grid {
329
+ .bds0114Calendar-grid {
340
330
  border-collapse: collapse;
341
331
  width: 100%;
342
332
  table-layout: fixed;
343
333
  }
344
- .bds0112Calendar-weekday {
334
+ .bds0114Calendar-weekday {
345
335
  font-size: var(--font_size--body--s);
346
336
  font-weight: var(--font_weight--semibold);
347
337
  color: var(--color_on-bg--muted);
348
338
  text-align: center;
349
339
  padding-block-end: var(--space_xs);
350
340
  }
351
- .bds0112Calendar-empty {
341
+ .bds0114Calendar-empty {
352
342
  padding: 0;
353
343
  }
354
- .bds0112Calendar-day {
344
+ .bds0114Calendar-day {
355
345
  all: unset;
356
346
  display: flex;
357
347
  align-items: center;
@@ -365,30 +355,30 @@
365
355
  transition: var(--animation_transition);
366
356
  box-sizing: border-box;
367
357
  }
368
- .bds0112Calendar-day:focus-visible {
358
+ .bds0114Calendar-day:focus-visible {
369
359
  outline: var(--outline_default);
370
360
  outline-offset: var(--outline_offset);
371
361
  }
372
362
  @media (hover: hover) and (pointer: fine) {
373
- .bds0112Calendar-day:not(.bds0112Calendar-disabled, .bds0112Calendar-selected):hover {
363
+ .bds0114Calendar-day:not(.bds0114Calendar-disabled, .bds0114Calendar-selected):hover {
374
364
  background-color: var(--color_bg--subtle);
375
365
  }
376
366
  }
377
- .bds0112Calendar-today {
367
+ .bds0114Calendar-today {
378
368
  border: 2px solid var(--color_interactive);
379
369
  font-weight: var(--font_weight--semibold);
380
370
  }
381
- .bds0112Calendar-selected {
371
+ .bds0114Calendar-selected {
382
372
  background-color: var(--color_interactive);
383
373
  color: var(--color_on-interactive);
384
374
  font-weight: var(--font_weight--semibold);
385
375
  }
386
- .bds0112Calendar-disabled {
376
+ .bds0114Calendar-disabled {
387
377
  opacity: 0.35;
388
378
  cursor: not-allowed;
389
379
  }
390
380
  @media (prefers-reduced-motion: reduce) {
391
- .bds0112Calendar-day {
381
+ .bds0114Calendar-day {
392
382
  transition: none;
393
383
  }
394
384
  }
@@ -396,13 +386,13 @@
396
386
 
397
387
  /* src/components/ui/Carousel/Carousel.module.css */
398
388
  @layer component {
399
- .bds0112Carousel-carousel {
389
+ .bds0114Carousel-carousel {
400
390
  position: relative;
401
391
  display: flex;
402
392
  align-items: center;
403
393
  gap: var(--space_xs);
404
394
  }
405
- .bds0112Carousel-track {
395
+ .bds0114Carousel-track {
406
396
  display: flex;
407
397
  gap: var(--space_m);
408
398
  overflow-x: auto;
@@ -411,14 +401,14 @@
411
401
  flex: 1;
412
402
  scroll-behavior: smooth;
413
403
  }
414
- .bds0112Carousel-track::-webkit-scrollbar {
404
+ .bds0114Carousel-track::-webkit-scrollbar {
415
405
  display: none;
416
406
  }
417
- .bds0112Carousel-slide {
407
+ .bds0114Carousel-slide {
418
408
  scroll-snap-align: start;
419
409
  flex-shrink: 0;
420
410
  }
421
- .bds0112Carousel-navBtn {
411
+ .bds0114Carousel-navBtn {
422
412
  all: unset;
423
413
  display: flex;
424
414
  align-items: center;
@@ -434,21 +424,21 @@
434
424
  transition: var(--animation_transition);
435
425
  box-shadow: var(--shadow_s);
436
426
  }
437
- .bds0112Carousel-navBtn svg {
427
+ .bds0114Carousel-navBtn svg {
438
428
  width: 1.25rem;
439
429
  height: 1.25rem;
440
430
  }
441
- .bds0112Carousel-navBtn:focus-visible {
431
+ .bds0114Carousel-navBtn:focus-visible {
442
432
  outline: var(--outline_default);
443
433
  outline-offset: var(--outline_offset);
444
434
  }
445
435
  @media (hover: hover) and (pointer: fine) {
446
- .bds0112Carousel-navBtn:hover {
436
+ .bds0114Carousel-navBtn:hover {
447
437
  background-color: var(--color_bg--subtle);
448
438
  }
449
439
  }
450
440
  @media (prefers-reduced-motion: reduce) {
451
- .bds0112Carousel-track {
441
+ .bds0114Carousel-track {
452
442
  scroll-behavior: auto;
453
443
  }
454
444
  }
@@ -456,7 +446,7 @@
456
446
 
457
447
  /* src/components/ui/DescriptionList/DescriptionList.module.css */
458
448
  @layer component {
459
- .bds0112DescriptionList-list {
449
+ .bds0114DescriptionList-list {
460
450
  display: flex;
461
451
  flex-direction: column;
462
452
  gap: var(--space_s);
@@ -465,63 +455,61 @@
465
455
  font-size: var(--font_size--body);
466
456
  color: var(--color_on-bg);
467
457
  }
468
- .bds0112DescriptionList-group {
458
+ .bds0114DescriptionList-group {
469
459
  display: flex;
470
460
  flex-direction: column;
471
461
  gap: var(--space_xxs);
472
462
  }
473
- .bds0112DescriptionList-term {
463
+ .bds0114DescriptionList-term {
474
464
  font-weight: var(--font_weight--semibold);
475
465
  color: var(--color_on-bg);
476
466
  }
477
- .bds0112DescriptionList-details {
467
+ .bds0114DescriptionList-details {
478
468
  margin: 0;
479
469
  color: var(--color_on-bg--muted);
480
470
  }
481
- .bds0112DescriptionList---layout_inline .bds0112DescriptionList-group {
471
+ .bds0114DescriptionList---layout_inline .bds0114DescriptionList-group {
482
472
  display: grid;
483
473
  grid-template-columns: minmax(8rem, 1fr) 2fr;
484
474
  gap: var(--space_xs);
485
475
  align-items: baseline;
486
476
  }
487
- .bds0112DescriptionList---layout_inline .bds0112DescriptionList-term {
477
+ .bds0114DescriptionList---layout_inline .bds0114DescriptionList-term {
488
478
  grid-column: 1;
489
479
  }
490
- .bds0112DescriptionList---layout_inline .bds0112DescriptionList-details {
480
+ .bds0114DescriptionList---layout_inline .bds0114DescriptionList-details {
491
481
  grid-column: 2;
492
482
  }
493
483
  }
494
484
 
495
485
  /* src/components/ui/Link/Link.module.css */
496
486
  @layer component {
497
- .bds0112Link-link {
498
- --link_color: var(--color_interactive);
499
- --link_color-hover: var(--color_blue--strong);
500
- color: var(--link_color);
487
+ .bds0114Link-link {
488
+ color: var(--link_color, var(--color_interactive));
501
489
  text-decoration: underline;
502
490
  text-underline-offset: 0.2em;
503
491
  transition: var(--animation_transition);
504
492
  cursor: pointer;
505
493
  }
506
- .bds0112Link-link:focus-visible {
494
+ .bds0114Link-link:focus-visible {
507
495
  outline: var(--outline_default);
508
496
  outline-offset: var(--outline_offset);
509
497
  border-radius: var(--border_radius--xs);
510
498
  }
511
499
  @media (hover: hover) and (pointer: fine) {
512
- .bds0112Link-link:hover {
513
- --link_color: var(--link_color-hover);
500
+ .bds0114Link-link:hover {
501
+ --link_color: var(--link_color-hover, var(--color_blue--strong));
514
502
  }
515
503
  }
516
- .bds0112Link---variant_default {
504
+ .bds0114Link---variant_default {
517
505
  --link_color: var(--color_interactive);
518
506
  --link_color-hover: var(--color_blue--strong);
519
507
  }
520
- .bds0112Link---variant_subtle {
508
+ .bds0114Link---variant_subtle {
521
509
  --link_color: var(--color_on-bg);
522
510
  --link_color-hover: var(--color_interactive);
523
511
  }
524
- .bds0112Link---variant_standalone {
512
+ .bds0114Link---variant_standalone {
525
513
  --link_color: var(--color_interactive);
526
514
  --link_color-hover: var(--color_blue--strong);
527
515
  display: inline-flex;
@@ -531,12 +519,12 @@
531
519
  text-decoration: none;
532
520
  }
533
521
  @media (hover: hover) and (pointer: fine) {
534
- .bds0112Link---variant_standalone:hover {
522
+ .bds0114Link---variant_standalone:hover {
535
523
  text-decoration: underline;
536
524
  text-underline-offset: 0.2em;
537
525
  }
538
526
  }
539
- .bds0112Link-externalLabel {
527
+ .bds0114Link-externalLabel {
540
528
  position: absolute;
541
529
  width: 1px;
542
530
  height: 1px;
@@ -551,12 +539,12 @@
551
539
 
552
540
  /* src/components/ui/Loading/Loading.module.css */
553
541
  @layer component {
554
- .bds0112Loading-loading {
542
+ .bds0114Loading-loading {
555
543
  display: flex;
556
544
  justify-content: center;
557
545
  align-items: center;
558
546
  }
559
- .bds0112Loading-spinner {
547
+ .bds0114Loading-spinner {
560
548
  width: 2.5em;
561
549
  height: 2.5em;
562
550
  border: 4px solid var(--color_bg);
@@ -564,12 +552,12 @@
564
552
  border-radius: 50%;
565
553
  animation: spin 1s linear infinite;
566
554
  }
567
- .bds0112Loading---size_small .bds0112Loading-spinner {
555
+ .bds0114Loading---size_small .bds0114Loading-spinner {
568
556
  width: 1.5em;
569
557
  height: 1.5em;
570
558
  border-width: 2px;
571
559
  }
572
- .bds0112Loading---size_large .bds0112Loading-spinner {
560
+ .bds0114Loading---size_large .bds0114Loading-spinner {
573
561
  width: 4em;
574
562
  height: 4em;
575
563
  border-width: 6px;
@@ -586,48 +574,45 @@
586
574
 
587
575
  /* src/components/ui/NotificationBanner/NotificationBanner.module.css */
588
576
  @layer component {
589
- .bds0112NotificationBanner-banner {
590
- --banner_bg: var(--color_blue--subtle);
591
- --banner_text: var(--color_on-blue--subtle);
592
- --banner_border: var(--color_blue);
577
+ .bds0114NotificationBanner-banner {
593
578
  display: flex;
594
579
  align-items: center;
595
580
  gap: var(--space_m);
596
581
  padding: var(--space_s) var(--space_m);
597
- background-color: var(--banner_bg);
598
- color: var(--banner_text);
599
- border-block-end: 3px solid var(--banner_border);
582
+ background-color: var(--banner_bg, var(--color_blue--subtle));
583
+ color: var(--banner_text, var(--color_on-blue--subtle));
584
+ border-block-end: 3px solid var(--banner_border, var(--color_blue));
600
585
  font-size: var(--font_size--body);
601
586
  line-height: var(--font_line-height--body);
602
587
  width: 100%;
603
588
  }
604
- .bds0112NotificationBanner---variant_info {
589
+ .bds0114NotificationBanner---variant_info {
605
590
  --banner_bg: var(--color_blue--subtle);
606
591
  --banner_text: var(--color_on-blue--subtle);
607
592
  --banner_border: var(--color_blue);
608
593
  }
609
- .bds0112NotificationBanner---variant_success {
594
+ .bds0114NotificationBanner---variant_success {
610
595
  --banner_bg: var(--color_success--subtle);
611
596
  --banner_text: var(--color_on-success--subtle);
612
597
  --banner_border: var(--color_success);
613
598
  }
614
- .bds0112NotificationBanner---variant_warning {
599
+ .bds0114NotificationBanner---variant_warning {
615
600
  --banner_bg: var(--color_orange--subtle);
616
601
  --banner_text: var(--color_on-orange--subtle);
617
602
  --banner_border: var(--color_warning);
618
603
  }
619
- .bds0112NotificationBanner---variant_error {
604
+ .bds0114NotificationBanner---variant_error {
620
605
  --banner_bg: rgb(from var(--color_error) r g b / 12%);
621
606
  --banner_text: var(--color_on-bg);
622
607
  --banner_border: var(--color_error);
623
608
  }
624
- .bds0112NotificationBanner-content {
609
+ .bds0114NotificationBanner-content {
625
610
  flex: 1;
626
611
  }
627
- .bds0112NotificationBanner-action {
612
+ .bds0114NotificationBanner-action {
628
613
  flex-shrink: 0;
629
614
  }
630
- .bds0112NotificationBanner-dismiss {
615
+ .bds0114NotificationBanner-dismiss {
631
616
  all: unset;
632
617
  display: flex;
633
618
  align-items: center;
@@ -639,16 +624,16 @@
639
624
  border: 1px solid currentcolor;
640
625
  transition: var(--animation_transition);
641
626
  }
642
- .bds0112NotificationBanner-dismiss svg {
627
+ .bds0114NotificationBanner-dismiss svg {
643
628
  width: 1rem;
644
629
  height: 1rem;
645
630
  }
646
- .bds0112NotificationBanner-dismiss:focus-visible {
631
+ .bds0114NotificationBanner-dismiss:focus-visible {
647
632
  outline: var(--outline_default);
648
633
  outline-offset: var(--outline_offset);
649
634
  }
650
635
  @media (hover: hover) and (pointer: fine) {
651
- .bds0112NotificationBanner-dismiss:hover {
636
+ .bds0114NotificationBanner-dismiss:hover {
652
637
  opacity: 0.7;
653
638
  }
654
639
  }
@@ -656,11 +641,11 @@
656
641
 
657
642
  /* src/components/ui/Pagination/Pagination.module.css */
658
643
  @layer component {
659
- .bds0112Pagination-pagination {
644
+ .bds0114Pagination-pagination {
660
645
  display: flex;
661
646
  justify-content: center;
662
647
  }
663
- .bds0112Pagination-list {
648
+ .bds0114Pagination-list {
664
649
  display: flex;
665
650
  align-items: center;
666
651
  gap: var(--space_xxs);
@@ -668,10 +653,7 @@
668
653
  margin: 0;
669
654
  padding: 0;
670
655
  }
671
- .bds0112Pagination-button {
672
- --btn_bg: transparent;
673
- --btn_color: var(--color_on-bg);
674
- --btn_border: var(--color_bg--subtle);
656
+ .bds0114Pagination-button {
675
657
  all: unset;
676
658
  display: inline-flex;
677
659
  align-items: center;
@@ -680,9 +662,9 @@
680
662
  height: 2.25rem;
681
663
  padding-inline: var(--space_xs);
682
664
  border-radius: var(--border_radius--xs);
683
- border: 1px solid var(--btn_border);
684
- background-color: var(--btn_bg);
685
- color: var(--btn_color);
665
+ border: 1px solid var(--btn_border, var(--color_bg--subtle));
666
+ background-color: var(--btn_bg, transparent);
667
+ color: var(--btn_color, var(--color_on-bg));
686
668
  font-family: var(--font_family--body);
687
669
  font-size: var(--font_size--body);
688
670
  font-variant-numeric: tabular-nums;
@@ -690,30 +672,30 @@
690
672
  transition: var(--animation_transition);
691
673
  box-sizing: border-box;
692
674
  }
693
- .bds0112Pagination-button:disabled {
675
+ .bds0114Pagination-button:disabled {
694
676
  opacity: 0.4;
695
677
  cursor: not-allowed;
696
678
  }
697
- .bds0112Pagination-button:focus-visible {
679
+ .bds0114Pagination-button:focus-visible {
698
680
  outline: var(--outline_default);
699
681
  outline-offset: var(--outline_offset);
700
682
  }
701
683
  @media (hover: hover) and (pointer: fine) {
702
- .bds0112Pagination-button:not(:disabled, .bds0112Pagination---active):hover {
684
+ .bds0114Pagination-button:not(:disabled, .bds0114Pagination---active):hover {
703
685
  --btn_bg: var(--color_bg--subtle);
704
686
  --btn_color: var(--color_interactive);
705
687
  }
706
688
  }
707
- .bds0112Pagination-button.bds0112Pagination---active {
689
+ .bds0114Pagination-button.bds0114Pagination---active {
708
690
  --btn_bg: var(--color_interactive);
709
691
  --btn_color: var(--color_on-interactive);
710
692
  --btn_border: var(--color_interactive);
711
693
  }
712
- .bds0112Pagination-button.bds0112Pagination---nav svg {
694
+ .bds0114Pagination-button.bds0114Pagination---nav svg {
713
695
  width: 1rem;
714
696
  height: 1rem;
715
697
  }
716
- .bds0112Pagination-ellipsis {
698
+ .bds0114Pagination-ellipsis {
717
699
  display: inline-flex;
718
700
  align-items: center;
719
701
  justify-content: center;
@@ -727,50 +709,49 @@
727
709
 
728
710
  /* src/components/ui/Progress/Progress.module.css */
729
711
  @layer component {
730
- .bds0112Progress-container {
712
+ .bds0114Progress-container {
731
713
  display: flex;
732
714
  flex-direction: column;
733
715
  gap: var(--space_xxs);
734
716
  width: 100%;
735
717
  }
736
- .bds0112Progress-labelRow {
718
+ .bds0114Progress-labelRow {
737
719
  display: flex;
738
720
  justify-content: space-between;
739
721
  align-items: baseline;
740
722
  font-size: var(--font_size--body--s);
741
723
  color: var(--color_on-bg);
742
724
  }
743
- .bds0112Progress-label {
725
+ .bds0114Progress-label {
744
726
  font-weight: var(--font_weight--semibold);
745
727
  }
746
- .bds0112Progress-value {
728
+ .bds0114Progress-value {
747
729
  font-variant-numeric: tabular-nums;
748
730
  }
749
- .bds0112Progress-track {
750
- --progress_height: var(--space_xs);
731
+ .bds0114Progress-track {
751
732
  width: 100%;
752
- height: var(--progress_height);
733
+ height: var(--progress_height, var(--space_xs));
753
734
  background-color: var(--color_bg--subtle);
754
735
  border-radius: 999px;
755
736
  overflow: hidden;
756
737
  }
757
- .bds0112Progress-track.bds0112Progress---size_small {
738
+ .bds0114Progress-track.bds0114Progress---size_small {
758
739
  --progress_height: var(--space_xxs);
759
740
  }
760
- .bds0112Progress-track.bds0112Progress---size_medium {
741
+ .bds0114Progress-track.bds0114Progress---size_medium {
761
742
  --progress_height: var(--space_xs);
762
743
  }
763
- .bds0112Progress-track.bds0112Progress---size_large {
744
+ .bds0114Progress-track.bds0114Progress---size_large {
764
745
  --progress_height: var(--space_s);
765
746
  }
766
- .bds0112Progress-fill {
747
+ .bds0114Progress-fill {
767
748
  height: 100%;
768
749
  background-color: var(--progress_color-active, var(--color_active));
769
750
  border-radius: 999px;
770
751
  transition: width var(--animation_transition-duration) var(--animation_easing);
771
752
  }
772
753
  @media (prefers-reduced-motion: reduce) {
773
- .bds0112Progress-fill {
754
+ .bds0114Progress-fill {
774
755
  transition: none;
775
756
  }
776
757
  }
@@ -778,23 +759,23 @@
778
759
 
779
760
  /* src/components/ui/ProgressCircle/ProgressCircle.module.css */
780
761
  @layer component {
781
- .bds0112ProgressCircle-wrapper {
762
+ .bds0114ProgressCircle-wrapper {
782
763
  position: relative;
783
764
  display: inline-flex;
784
765
  align-items: center;
785
766
  justify-content: center;
786
767
  }
787
- .bds0112ProgressCircle-svg {
768
+ .bds0114ProgressCircle-svg {
788
769
  display: block;
789
770
  }
790
- .bds0112ProgressCircle-track {
771
+ .bds0114ProgressCircle-track {
791
772
  stroke: var(--color_bg--subtle);
792
773
  }
793
- .bds0112ProgressCircle-fill {
774
+ .bds0114ProgressCircle-fill {
794
775
  stroke: var(--progressCircle_color-active, var(--color_active));
795
776
  transition: stroke-dashoffset var(--animation_transition-duration) var(--animation_easing);
796
777
  }
797
- .bds0112ProgressCircle-value {
778
+ .bds0114ProgressCircle-value {
798
779
  position: absolute;
799
780
  font-size: var(--font_size--body--s);
800
781
  font-weight: var(--font_weight--semibold);
@@ -802,17 +783,17 @@
802
783
  color: var(--color_on-bg);
803
784
  line-height: 1;
804
785
  }
805
- .bds0112ProgressCircle---size_small .bds0112ProgressCircle-value {
786
+ .bds0114ProgressCircle---size_small .bds0114ProgressCircle-value {
806
787
  font-size: 0.5rem;
807
788
  }
808
- .bds0112ProgressCircle---size_medium .bds0112ProgressCircle-value {
789
+ .bds0114ProgressCircle---size_medium .bds0114ProgressCircle-value {
809
790
  font-size: var(--font_size--body--s);
810
791
  }
811
- .bds0112ProgressCircle---size_large .bds0112ProgressCircle-value {
792
+ .bds0114ProgressCircle---size_large .bds0114ProgressCircle-value {
812
793
  font-size: var(--font_size--body);
813
794
  }
814
795
  @media (prefers-reduced-motion: reduce) {
815
- .bds0112ProgressCircle-fill {
796
+ .bds0114ProgressCircle-fill {
816
797
  transition: none;
817
798
  }
818
799
  }
@@ -820,16 +801,16 @@
820
801
 
821
802
  /* src/components/ui/Separator/Separator.module.css */
822
803
  @layer component {
823
- .bds0112Separator-separator {
804
+ .bds0114Separator-separator {
824
805
  border: none;
825
806
  background-color: var(--separator_color, var(--color_on-bg));
826
807
  }
827
- .bds0112Separator-separator.bds0112Separator---horizontal {
808
+ .bds0114Separator-separator.bds0114Separator---horizontal {
828
809
  display: block;
829
810
  width: 100%;
830
811
  height: var(--separator_thickness, 1px);
831
812
  }
832
- .bds0112Separator-separator.bds0112Separator---vertical {
813
+ .bds0114Separator-separator.bds0114Separator---vertical {
833
814
  display: inline-block;
834
815
  width: var(--separator_thickness, 1px);
835
816
  align-self: stretch;
@@ -838,7 +819,7 @@
838
819
 
839
820
  /* src/components/ui/Skeleton/Skeleton.module.css */
840
821
  @layer component {
841
- .bds0112Skeleton-skeleton {
822
+ .bds0114Skeleton-skeleton {
842
823
  background:
843
824
  linear-gradient(
844
825
  90deg,
@@ -862,7 +843,7 @@
862
843
 
863
844
  /* src/components/ui/SkipLink/SkipLink.module.css */
864
845
  @layer component {
865
- .bds0112SkipLink-skipLink {
846
+ .bds0114SkipLink-skipLink {
866
847
  position: absolute;
867
848
  inset-block-start: var(--space_s);
868
849
  inset-inline-start: var(--space_s);
@@ -878,13 +859,13 @@
878
859
  transform: translateY(-200%);
879
860
  transition: transform var(--animation_transition-duration) var(--animation_easing);
880
861
  }
881
- .bds0112SkipLink-skipLink:focus-visible {
862
+ .bds0114SkipLink-skipLink:focus-visible {
882
863
  transform: translateY(0);
883
864
  outline: var(--outline_default);
884
865
  outline-offset: var(--outline_offset);
885
866
  }
886
867
  @media (prefers-reduced-motion: reduce) {
887
- .bds0112SkipLink-skipLink {
868
+ .bds0114SkipLink-skipLink {
888
869
  transition: none;
889
870
  }
890
871
  }
@@ -892,29 +873,29 @@
892
873
 
893
874
  /* src/components/ui/Table/Table.module.css */
894
875
  @layer component {
895
- .bds0112Table-wrapper {
876
+ .bds0114Table-wrapper {
896
877
  width: 100%;
897
878
  overflow-x: auto;
898
879
  border-radius: var(--border_radius--s);
899
880
  border: 1px solid var(--color_bg--subtle);
900
881
  }
901
- .bds0112Table-table {
882
+ .bds0114Table-table {
902
883
  width: 100%;
903
884
  border-collapse: collapse;
904
885
  font-size: var(--font_size--body);
905
886
  font-family: var(--font_family--body);
906
887
  }
907
- .bds0112Table-caption {
888
+ .bds0114Table-caption {
908
889
  caption-side: top;
909
890
  text-align: start;
910
891
  padding: var(--space_s) var(--space_m);
911
892
  font-weight: var(--font_weight--semibold);
912
893
  color: var(--color_on-bg);
913
894
  }
914
- .bds0112Table-thead {
895
+ .bds0114Table-thead {
915
896
  background-color: var(--color_bg--subtle);
916
897
  }
917
- .bds0112Table-th {
898
+ .bds0114Table-th {
918
899
  padding: var(--space_s) var(--space_m);
919
900
  text-align: start;
920
901
  font-weight: var(--font_weight--semibold);
@@ -923,10 +904,10 @@
923
904
  white-space: nowrap;
924
905
  border-bottom: 1px solid var(--color_bg--subtle);
925
906
  }
926
- .bds0112Table-th.bds0112Table---sortable {
907
+ .bds0114Table-th.bds0114Table---sortable {
927
908
  padding: 0;
928
909
  }
929
- .bds0112Table-sortButton {
910
+ .bds0114Table-sortButton {
930
911
  all: unset;
931
912
  display: flex;
932
913
  align-items: center;
@@ -940,47 +921,47 @@
940
921
  transition: var(--animation_transition);
941
922
  box-sizing: border-box;
942
923
  }
943
- .bds0112Table-sortButton:focus-visible {
924
+ .bds0114Table-sortButton:focus-visible {
944
925
  outline: var(--outline_default);
945
926
  outline-offset: calc(var(--outline_offset) * -1);
946
927
  }
947
928
  @media (hover: hover) and (pointer: fine) {
948
- .bds0112Table-sortButton:hover {
929
+ .bds0114Table-sortButton:hover {
949
930
  color: var(--color_on-bg);
950
931
  }
951
932
  }
952
- .bds0112Table-sortIcon {
933
+ .bds0114Table-sortIcon {
953
934
  width: 1rem;
954
935
  height: 1rem;
955
936
  opacity: 0.4;
956
937
  transition: transform var(--animation_transition-duration) var(--animation_easing), opacity var(--animation_transition-duration) var(--animation_easing);
957
938
  }
958
- .bds0112Table-sortIcon.bds0112Table---sort-active {
939
+ .bds0114Table-sortIcon.bds0114Table---sort-active {
959
940
  opacity: 1;
960
941
  color: var(--color_interactive);
961
942
  }
962
- .bds0112Table-sortIcon.bds0112Table---sort-desc {
943
+ .bds0114Table-sortIcon.bds0114Table---sort-desc {
963
944
  transform: rotate(180deg);
964
945
  }
965
- .bds0112Table-tbody .bds0112Table-tr {
946
+ .bds0114Table-tbody .bds0114Table-tr {
966
947
  border-bottom: 1px solid var(--color_bg--subtle);
967
948
  transition: var(--animation_transition);
968
949
  }
969
- .bds0112Table-tbody .bds0112Table-tr:last-child {
950
+ .bds0114Table-tbody .bds0114Table-tr:last-child {
970
951
  border-bottom: none;
971
952
  }
972
953
  @media (hover: hover) and (pointer: fine) {
973
- .bds0112Table-tbody .bds0112Table-tr:hover {
954
+ .bds0114Table-tbody .bds0114Table-tr:hover {
974
955
  background-color: var(--color_bg--subtle);
975
956
  }
976
957
  }
977
- .bds0112Table-td {
958
+ .bds0114Table-td {
978
959
  padding: var(--space_s) var(--space_m);
979
960
  color: var(--color_on-bg);
980
961
  vertical-align: middle;
981
962
  }
982
963
  @media (prefers-reduced-motion: reduce) {
983
- .bds0112Table-sortIcon {
964
+ .bds0114Table-sortIcon {
984
965
  transition: none;
985
966
  }
986
967
  }
@@ -988,18 +969,16 @@
988
969
 
989
970
  /* src/components/ui/Tabs/Tabs.module.css */
990
971
  @layer component {
991
- .bds0112Tabs-tabs {
972
+ .bds0114Tabs-tabs {
992
973
  display: flex;
993
974
  flex-direction: column;
994
975
  }
995
- .bds0112Tabs-tabList {
976
+ .bds0114Tabs-tabList {
996
977
  display: flex;
997
978
  border-bottom: 1px solid var(--color_bg--subtle);
998
979
  gap: var(--space_xxs);
999
980
  }
1000
- .bds0112Tabs-tab {
1001
- --tab_color: var(--color_on-bg);
1002
- --tab_border-color: transparent;
981
+ .bds0114Tabs-tab {
1003
982
  all: unset;
1004
983
  display: inline-flex;
1005
984
  align-items: center;
@@ -1007,34 +986,34 @@
1007
986
  font-family: var(--font_family--body);
1008
987
  font-size: var(--font_size--body);
1009
988
  font-weight: var(--font_weight--semibold);
1010
- color: var(--tab_color);
1011
- border-bottom: 2px solid var(--tab_border-color);
989
+ color: var(--tab_color, var(--color_on-bg));
990
+ border-bottom: 2px solid var(--tab_border-color, transparent);
1012
991
  margin-bottom: -1px;
1013
992
  cursor: pointer;
1014
993
  transition: var(--animation_transition);
1015
994
  }
1016
- .bds0112Tabs-tab.bds0112Tabs---active {
995
+ .bds0114Tabs-tab.bds0114Tabs---active {
1017
996
  --tab_color: var(--color_interactive);
1018
997
  --tab_border-color: var(--color_interactive);
1019
998
  }
1020
- .bds0112Tabs-tab:disabled {
999
+ .bds0114Tabs-tab:disabled {
1021
1000
  opacity: 0.4;
1022
1001
  cursor: not-allowed;
1023
1002
  }
1024
- .bds0112Tabs-tab:focus-visible {
1003
+ .bds0114Tabs-tab:focus-visible {
1025
1004
  outline: var(--outline_default);
1026
1005
  outline-offset: var(--outline_offset);
1027
1006
  border-radius: var(--border_radius--xs);
1028
1007
  }
1029
1008
  @media (hover: hover) and (pointer: fine) {
1030
- .bds0112Tabs-tab:not(:disabled, .bds0112Tabs---active):hover {
1009
+ .bds0114Tabs-tab:not(:disabled, .bds0114Tabs---active):hover {
1031
1010
  --tab_color: var(--color_interactive);
1032
1011
  }
1033
1012
  }
1034
- .bds0112Tabs-panel {
1013
+ .bds0114Tabs-panel {
1035
1014
  padding-block-start: var(--space_m);
1036
1015
  }
1037
- .bds0112Tabs-panel:focus-visible {
1016
+ .bds0114Tabs-panel:focus-visible {
1038
1017
  outline: var(--outline_default);
1039
1018
  outline-offset: var(--outline_offset);
1040
1019
  }
@@ -1042,20 +1021,18 @@
1042
1021
 
1043
1022
  /* src/components/ui/Tooltip/Tooltip.module.css */
1044
1023
  @layer component {
1045
- .bds0112Tooltip-wrapper {
1024
+ .bds0114Tooltip-wrapper {
1046
1025
  position: relative;
1047
1026
  display: inline-flex;
1048
1027
  align-items: center;
1049
1028
  }
1050
- .bds0112Tooltip-tooltip {
1051
- --tooltip_bg: var(--color_on-bg);
1052
- --tooltip_text: var(--color_bg);
1029
+ .bds0114Tooltip-tooltip {
1053
1030
  position: absolute;
1054
1031
  z-index: var(--z-index_popover);
1055
1032
  padding: var(--space_xxs) var(--space_xs);
1056
1033
  border-radius: var(--border_radius--xs);
1057
- background-color: var(--tooltip_bg);
1058
- color: var(--tooltip_text);
1034
+ background-color: var(--tooltip_bg, var(--color_on-bg));
1035
+ color: var(--tooltip_text, var(--color_bg));
1059
1036
  font-size: var(--font_size--body--s);
1060
1037
  line-height: var(--font_line-height--body);
1061
1038
  white-space: nowrap;
@@ -1064,33 +1041,33 @@
1064
1041
  opacity: 0;
1065
1042
  transition: opacity var(--animation_transition-duration) var(--animation_easing);
1066
1043
  }
1067
- .bds0112Tooltip-wrapper:hover .bds0112Tooltip-tooltip,
1068
- .bds0112Tooltip-wrapper:focus-within .bds0112Tooltip-tooltip {
1044
+ .bds0114Tooltip-wrapper:hover .bds0114Tooltip-tooltip,
1045
+ .bds0114Tooltip-wrapper:focus-within .bds0114Tooltip-tooltip {
1069
1046
  visibility: visible;
1070
1047
  opacity: 1;
1071
1048
  }
1072
- .bds0112Tooltip---placement_top {
1049
+ .bds0114Tooltip---placement_top {
1073
1050
  bottom: calc(100% + var(--space_xs));
1074
1051
  left: 50%;
1075
1052
  transform: translateX(-50%);
1076
1053
  }
1077
- .bds0112Tooltip---placement_bottom {
1054
+ .bds0114Tooltip---placement_bottom {
1078
1055
  top: calc(100% + var(--space_xs));
1079
1056
  left: 50%;
1080
1057
  transform: translateX(-50%);
1081
1058
  }
1082
- .bds0112Tooltip---placement_left {
1059
+ .bds0114Tooltip---placement_left {
1083
1060
  right: calc(100% + var(--space_xs));
1084
1061
  top: 50%;
1085
1062
  transform: translateY(-50%);
1086
1063
  }
1087
- .bds0112Tooltip---placement_right {
1064
+ .bds0114Tooltip---placement_right {
1088
1065
  left: calc(100% + var(--space_xs));
1089
1066
  top: 50%;
1090
1067
  transform: translateY(-50%);
1091
1068
  }
1092
1069
  @media (prefers-reduced-motion: reduce) {
1093
- .bds0112Tooltip-tooltip {
1070
+ .bds0114Tooltip-tooltip {
1094
1071
  transition: none;
1095
1072
  }
1096
1073
  }
@@ -1098,34 +1075,34 @@
1098
1075
 
1099
1076
  /* src/components/ui/Typography/Typography.module.css */
1100
1077
  @layer component {
1101
- .bds0112Typography-typography {
1078
+ .bds0114Typography-typography {
1102
1079
  margin: 0;
1103
1080
  font-family: var(--font_family--body);
1104
1081
  color: var(--typography_color, var(--color_on-bg));
1105
1082
  }
1106
- .bds0112Typography---h1 {
1083
+ .bds0114Typography---h1 {
1107
1084
  font-family: var(--font_family--heading);
1108
1085
  font-size: var(--font_size--heading-1);
1109
1086
  font-weight: var(--font_weight--bold);
1110
1087
  line-height: var(--font_line-height--heading);
1111
1088
  }
1112
- .bds0112Typography---h2 {
1089
+ .bds0114Typography---h2 {
1113
1090
  font-family: var(--font_family--heading);
1114
1091
  font-size: var(--font_size--heading-2);
1115
1092
  font-weight: var(--font_weight--semibold);
1116
1093
  line-height: var(--font_line-height--heading);
1117
1094
  }
1118
- .bds0112Typography---h3 {
1095
+ .bds0114Typography---h3 {
1119
1096
  font-family: var(--font_family--heading);
1120
1097
  font-size: var(--font_size--heading-3);
1121
1098
  font-weight: var(--font_weight--semibold);
1122
1099
  line-height: var(--font_line-height--heading);
1123
1100
  }
1124
- .bds0112Typography---body {
1101
+ .bds0114Typography---body {
1125
1102
  font-size: var(--font_size--body);
1126
1103
  line-height: var(--font_line-height--body);
1127
1104
  }
1128
- .bds0112Typography---body_s {
1105
+ .bds0114Typography---body_s {
1129
1106
  font-size: var(--font_size--body--s);
1130
1107
  line-height: var(--font_line-height--body);
1131
1108
  }
@@ -1135,109 +1112,102 @@
1135
1112
  @keyframes pulse {
1136
1113
  0% {
1137
1114
  transform: scale(1);
1138
- box-shadow: 0 0 0 0 rgb(from var(--button_pulse-color) r g b / 50%);
1115
+ box-shadow: 0 0 0 0 rgb(from var(--button_pulse-color, var(--color_cta)) r g b / 50%);
1139
1116
  }
1140
1117
  70% {
1141
1118
  transform: scale(1.01);
1142
- box-shadow: 0 0 0 var(--space_m) rgb(from var(--button_pulse-color) r g b / 0%);
1119
+ box-shadow: 0 0 0 var(--space_m) rgb(from var(--button_pulse-color, var(--color_cta)) r g b / 0%);
1143
1120
  }
1144
1121
  100% {
1145
1122
  transform: scale(1);
1146
- box-shadow: 0 0 0 0 rgb(from var(--button_pulse-color) r g b / 0%);
1123
+ box-shadow: 0 0 0 0 rgb(from var(--button_pulse-color, var(--color_cta)) r g b / 0%);
1147
1124
  }
1148
1125
  }
1149
1126
  @layer component {
1150
- .bds0112Button-button,
1151
- .bds0112Button-button[href] {
1152
- --button_height: 3em;
1153
- --button_font-size: inherit;
1154
- --button_bg: var(--color_cta);
1155
- --button_text: var(--color_on-cta);
1156
- --button_border-color: var(--color_cta);
1157
- --button_pulse-color: var(--button_bg);
1127
+ .bds0114Button-button,
1128
+ .bds0114Button-button[href] {
1158
1129
  all: unset;
1159
1130
  position: relative;
1160
1131
  font: inherit;
1161
1132
  padding-inline: var(--space_l);
1162
1133
  display: inline-flex;
1163
1134
  gap: var(--space_xs);
1164
- border-radius: var(--border_radius--s);
1135
+ border-radius: var(--button_border_radius--s, var(--border_radius--s));
1165
1136
  align-items: center;
1166
1137
  cursor: pointer;
1167
1138
  scroll-padding-block-end: var(--space_l);
1168
1139
  justify-content: center;
1169
- height: var(--button_height);
1170
- font-size: var(--button_font-size);
1140
+ height: var(--button_height, 3em);
1141
+ font-size: var(--button_font-size, inherit);
1171
1142
  white-space: nowrap;
1172
1143
  line-height: 1;
1173
- background-color: var(--button_bg);
1174
- color: var(--button_text);
1175
- border: 2px solid var(--button_border-color);
1144
+ background-color: var(--button_bg, var(--color_cta));
1145
+ color: var(--button_text, var(--color_on-cta));
1146
+ border: 2px solid var(--button_border-color, var(--color_cta));
1176
1147
  transition: var(--animation_transition);
1177
1148
  }
1178
- .bds0112Button-button.bds0112Button---primary {
1179
- --button_bg: var(--color_cta);
1180
- --button_text: var(--color_on-cta);
1149
+ .bds0114Button-button.bds0114Button---primary {
1181
1150
  --button_border-color: transparent;
1182
1151
  }
1183
- .bds0112Button-button.bds0112Button---secondary {
1152
+ .bds0114Button-button.bds0114Button---secondary {
1184
1153
  --button_bg: var(--color_bg);
1185
1154
  --button_text: var(--color_on-bg);
1186
1155
  --button_border-color: var(--button_text);
1187
1156
  }
1188
- .bds0112Button-button.bds0112Button---size_small {
1157
+ .bds0114Button-button.bds0114Button---size_small {
1189
1158
  --button_height: 2.25em;
1190
1159
  --button_font-size: var(--font_size--body--s);
1160
+ --button_border_radius--s: var(--border_radius--xs);
1191
1161
  padding-inline: var(--space_m);
1192
1162
  }
1193
- .bds0112Button-button.bds0112Button---size_medium {
1163
+ .bds0114Button-button.bds0114Button---size_medium {
1194
1164
  --button_height: 3em;
1195
1165
  padding-inline: var(--space_l);
1196
1166
  }
1197
- .bds0112Button-button.bds0112Button---size_large {
1198
- --button_height: 3.75em;
1167
+ .bds0114Button-button.bds0114Button---size_large {
1199
1168
  --button_font-size: var(--font_size--heading-3);
1200
1169
  padding-inline: var(--space_xl);
1170
+ --button_border_radius--s: var(--border_radius--m);
1201
1171
  }
1202
- .bds0112Button-button.bds0112Button---hasPulse {
1172
+ .bds0114Button-button.bds0114Button---hasPulse {
1203
1173
  animation: pulse 3s infinite;
1204
1174
  }
1205
- .bds0112Button-button[href] {
1175
+ .bds0114Button-button[href] {
1206
1176
  text-decoration: none;
1207
1177
  }
1208
- .bds0112Button-button svg {
1178
+ .bds0114Button-button svg {
1209
1179
  --icon__stroke: currentcolor;
1210
1180
  fill: currentcolor;
1211
1181
  color: currentcolor;
1212
1182
  flex-shrink: 0;
1213
1183
  }
1214
- .bds0112Button-prefix {
1184
+ .bds0114Button-prefix {
1215
1185
  display: flex;
1216
1186
  align-items: center;
1217
1187
  margin-inline-start: calc(var(--space_s) * -1);
1218
1188
  transition: var(--animation_transition);
1219
1189
  }
1220
- .bds0112Button-suffix {
1190
+ .bds0114Button-suffix {
1221
1191
  display: flex;
1222
1192
  align-items: center;
1223
1193
  margin-inline-end: calc(var(--space_s) * -1);
1224
1194
  transition: var(--animation_transition);
1225
1195
  }
1226
1196
  @media (hover: hover) and (pointer: fine) {
1227
- .bds0112Button-button:hover .bds0112Button-prefix svg {
1197
+ .bds0114Button-button:hover .bds0114Button-prefix svg {
1228
1198
  animation: 2s infinite fadeZoom ease-out;
1229
1199
  }
1230
- .bds0112Button-button:hover .bds0112Button-suffix svg {
1200
+ .bds0114Button-button:hover .bds0114Button-suffix svg {
1231
1201
  animation: 2s infinite fadeZoom ease-out;
1232
1202
  }
1233
1203
  }
1234
- .bds0112Button-button:focus-visible {
1204
+ .bds0114Button-button:focus-visible {
1235
1205
  outline-offset: var(--outline_offset);
1236
1206
  outline: var(--outline_default);
1237
1207
  border-radius: var(--border_radius--s);
1238
1208
  }
1239
1209
  @media (hover: hover) and (pointer: fine) {
1240
- .bds0112Button-button:hover {
1210
+ .bds0114Button-button:hover {
1241
1211
  --button_bg: var(--color_bg);
1242
1212
  --button_text: var(--color_interactive);
1243
1213
  --button_pulse-color: var(--color_interactive);
@@ -1248,7 +1218,7 @@
1248
1218
 
1249
1219
  /* src/components/interaction/Command/Command.module.css */
1250
1220
  @layer component {
1251
- .bds0112Command-dialog {
1221
+ .bds0114Command-dialog {
1252
1222
  padding: 0;
1253
1223
  border: none;
1254
1224
  border-radius: var(--border_radius--m);
@@ -1258,10 +1228,11 @@
1258
1228
  overflow: visible;
1259
1229
  margin-block-start: 10vh;
1260
1230
  }
1261
- .bds0112Command-dialog::backdrop {
1262
- background: rgb(0 0 0 / 50%);
1231
+ .bds0114Command-dialog::backdrop {
1232
+ background-color: var(--command_backdrop-color, rgb(0 0 0 / 50%));
1233
+ backdrop-filter: blur(3px);
1263
1234
  }
1264
- .bds0112Command-palette {
1235
+ .bds0114Command-palette {
1265
1236
  display: flex;
1266
1237
  flex-direction: column;
1267
1238
  background-color: var(--command_color, var(--color_bg));
@@ -1272,7 +1243,7 @@
1272
1243
  max-height: 70vh;
1273
1244
  border: 1px solid currentcolor;
1274
1245
  }
1275
- .bds0112Command-searchRow {
1246
+ .bds0114Command-searchRow {
1276
1247
  display: flex;
1277
1248
  align-items: center;
1278
1249
  gap: var(--space_xs);
@@ -1280,13 +1251,13 @@
1280
1251
  border-block-end: 1px solid currentcolor;
1281
1252
  flex-shrink: 0;
1282
1253
  }
1283
- .bds0112Command-searchIcon {
1254
+ .bds0114Command-searchIcon {
1284
1255
  width: 1.25rem;
1285
1256
  height: 1.25rem;
1286
1257
  color: var(--color_on-bg--muted);
1287
1258
  flex-shrink: 0;
1288
1259
  }
1289
- .bds0112Command-search {
1260
+ .bds0114Command-search {
1290
1261
  flex: 1;
1291
1262
  border: none;
1292
1263
  outline: none;
@@ -1296,10 +1267,10 @@
1296
1267
  background: transparent;
1297
1268
  min-width: 0;
1298
1269
  }
1299
- .bds0112Command-search::placeholder {
1270
+ .bds0114Command-search::placeholder {
1300
1271
  color: var(--color_on-bg--muted);
1301
1272
  }
1302
- .bds0112Command-escHint {
1273
+ .bds0114Command-escHint {
1303
1274
  font-size: var(--font_size--body--s);
1304
1275
  color: var(--color_on-bg--muted);
1305
1276
  border: 1px solid currentcolor;
@@ -1307,18 +1278,18 @@
1307
1278
  padding: 0.1em 0.4em;
1308
1279
  flex-shrink: 0;
1309
1280
  }
1310
- .bds0112Command-list {
1281
+ .bds0114Command-list {
1311
1282
  overflow-y: auto;
1312
1283
  list-style: none;
1313
1284
  margin: 0;
1314
1285
  padding: var(--space_xs) 0;
1315
1286
  }
1316
- .bds0112Command-groupList {
1287
+ .bds0114Command-groupList {
1317
1288
  list-style: none;
1318
1289
  margin: 0;
1319
1290
  padding: 0;
1320
1291
  }
1321
- .bds0112Command-group {
1292
+ .bds0114Command-group {
1322
1293
  padding: var(--space_xs) var(--space_m);
1323
1294
  font-size: var(--font_size--body--s);
1324
1295
  font-weight: var(--font_weight--semibold);
@@ -1326,7 +1297,7 @@
1326
1297
  text-transform: uppercase;
1327
1298
  letter-spacing: 0.05em;
1328
1299
  }
1329
- .bds0112Command-item {
1300
+ .bds0114Command-item {
1330
1301
  display: flex;
1331
1302
  align-items: center;
1332
1303
  gap: var(--space_s);
@@ -1334,26 +1305,26 @@
1334
1305
  cursor: pointer;
1335
1306
  transition: background-color var(--animation_transition-duration) var(--animation_easing);
1336
1307
  }
1337
- .bds0112Command-itemActive {
1308
+ .bds0114Command-itemActive {
1338
1309
  background-color: var(--color_bg--subtle);
1339
1310
  }
1340
- .bds0112Command-itemLabel {
1311
+ .bds0114Command-itemLabel {
1341
1312
  flex: 1;
1342
1313
  font-size: var(--font_size--body);
1343
1314
  color: var(--color_on-bg);
1344
1315
  }
1345
- .bds0112Command-itemDesc {
1316
+ .bds0114Command-itemDesc {
1346
1317
  font-size: var(--font_size--body--s);
1347
1318
  color: var(--color_on-bg--muted);
1348
1319
  }
1349
- .bds0112Command-shortcut {
1320
+ .bds0114Command-shortcut {
1350
1321
  font-size: var(--font_size--body--s);
1351
1322
  color: var(--color_on-bg--muted);
1352
1323
  border: 1px solid currentcolor;
1353
1324
  border-radius: var(--border_radius--xs);
1354
1325
  padding: 0.1em 0.4em;
1355
1326
  }
1356
- .bds0112Command-empty {
1327
+ .bds0114Command-empty {
1357
1328
  padding: var(--space_l) var(--space_m);
1358
1329
  text-align: center;
1359
1330
  color: var(--color_on-bg--muted);
@@ -1363,7 +1334,7 @@
1363
1334
 
1364
1335
  /* src/components/interaction/Dialog/Dialog.module.css */
1365
1336
  @layer component {
1366
- .bds0112Dialog-dialog {
1337
+ .bds0114Dialog-dialog {
1367
1338
  font-size: var(--font_size--body--s);
1368
1339
  border: 2px solid currentcolor;
1369
1340
  background-color: var(--dialog_color ,var(--color_grey--subtle));
@@ -1372,20 +1343,21 @@
1372
1343
  padding: var(--space_l);
1373
1344
  max-width: 90svw;
1374
1345
  max-height: 90svh;
1346
+ overflow: visible;
1375
1347
  }
1376
- .bds0112Dialog-dialogContent {
1348
+ .bds0114Dialog-dialogContent {
1377
1349
  display: grid;
1378
1350
  gap: var(--grid_gap);
1379
1351
  overflow-y: auto;
1380
1352
  min-height: 0;
1381
1353
  flex: 1;
1382
1354
  }
1383
- .bds0112Dialog-closeForm {
1355
+ .bds0114Dialog-closeForm {
1384
1356
  position: absolute;
1385
1357
  inset-block-start: -1em;
1386
1358
  inset-inline-end: -1em;
1387
1359
  }
1388
- .bds0112Dialog-closeButton {
1360
+ .bds0114Dialog-closeButton {
1389
1361
  all: unset;
1390
1362
  width: 2em;
1391
1363
  height: 2em;
@@ -1398,15 +1370,19 @@
1398
1370
  border: 2px solid currentcolor;
1399
1371
  cursor: pointer;
1400
1372
  }
1401
- .bds0112Dialog-closeButton svg {
1373
+ .bds0114Dialog-closeButton svg {
1402
1374
  width: 1.25em;
1403
1375
  height: 1.25em;
1404
1376
  }
1377
+ .bds0114Dialog-dialog::backdrop {
1378
+ background-color: var(--dialog_backdrop-color, rgb(0 0 0 / 50%));
1379
+ backdrop-filter: blur(3px);
1380
+ }
1405
1381
  }
1406
1382
 
1407
1383
  /* src/components/interaction/Drawer/Drawer.module.css */
1408
1384
  @layer component {
1409
- .bds0112Drawer-drawer {
1385
+ .bds0114Drawer-drawer {
1410
1386
  position: fixed;
1411
1387
  inset: 0;
1412
1388
  margin: 0;
@@ -1419,10 +1395,11 @@
1419
1395
  background: transparent;
1420
1396
  overflow: hidden;
1421
1397
  }
1422
- .bds0112Drawer-drawer::backdrop {
1423
- background: rgb(0 0 0 / 50%);
1398
+ .bds0114Drawer-drawer::backdrop {
1399
+ background-color: var(--drawer_backdrop-color, rgb(0 0 0 / 50%));
1400
+ backdrop-filter: blur(3px);
1424
1401
  }
1425
- .bds0112Drawer-panel {
1402
+ .bds0114Drawer-panel {
1426
1403
  position: absolute;
1427
1404
  inset-block: 0;
1428
1405
  display: flex;
@@ -1433,15 +1410,15 @@
1433
1410
  color: var(--drawer_on-color, var(--color_on-bg));
1434
1411
  box-shadow: var(--shadow_xl);
1435
1412
  overflow: hidden;
1436
- transition: transform var(--animation_transition-duration) var(--animation_easing);
1413
+ transition: var(--animation_transition);
1437
1414
  }
1438
- .bds0112Drawer---side_right .bds0112Drawer-panel {
1415
+ .bds0114Drawer---side_right .bds0114Drawer-panel {
1439
1416
  inset-inline-end: 0;
1440
1417
  }
1441
- .bds0112Drawer---side_left .bds0112Drawer-panel {
1418
+ .bds0114Drawer---side_left .bds0114Drawer-panel {
1442
1419
  inset-inline-start: 0;
1443
1420
  }
1444
- .bds0112Drawer-header {
1421
+ .bds0114Drawer-header {
1445
1422
  display: flex;
1446
1423
  align-items: center;
1447
1424
  justify-content: space-between;
@@ -1449,13 +1426,7 @@
1449
1426
  border-block-end: 1px solid currentcolor;
1450
1427
  flex-shrink: 0;
1451
1428
  }
1452
- .bds0112Drawer-title {
1453
- margin: 0;
1454
- font-size: var(--font_size--heading--s);
1455
- font-weight: var(--font_weight--semibold);
1456
- line-height: var(--font_line-height--heading);
1457
- }
1458
- .bds0112Drawer-closeButton {
1429
+ .bds0114Drawer-closeButton {
1459
1430
  all: unset;
1460
1431
  display: flex;
1461
1432
  align-items: center;
@@ -1466,26 +1437,26 @@
1466
1437
  cursor: pointer;
1467
1438
  transition: var(--animation_transition);
1468
1439
  }
1469
- .bds0112Drawer-closeButton svg {
1440
+ .bds0114Drawer-closeButton svg {
1470
1441
  width: 1.25rem;
1471
1442
  height: 1.25rem;
1472
1443
  }
1473
- .bds0112Drawer-closeButton:focus-visible {
1444
+ .bds0114Drawer-closeButton:focus-visible {
1474
1445
  outline: var(--outline_default);
1475
1446
  outline-offset: var(--outline_offset);
1476
1447
  }
1477
1448
  @media (hover: hover) and (pointer: fine) {
1478
- .bds0112Drawer-closeButton:hover {
1449
+ .bds0114Drawer-closeButton:hover {
1479
1450
  background-color: var(--color_bg--subtle);
1480
1451
  }
1481
1452
  }
1482
- .bds0112Drawer-body {
1453
+ .bds0114Drawer-body {
1483
1454
  flex: 1;
1484
1455
  overflow-y: auto;
1485
1456
  padding: var(--space_l);
1486
1457
  }
1487
1458
  @media (prefers-reduced-motion: reduce) {
1488
- .bds0112Drawer-panel {
1459
+ .bds0114Drawer-panel {
1489
1460
  transition: none;
1490
1461
  }
1491
1462
  }
@@ -1493,11 +1464,11 @@
1493
1464
 
1494
1465
  /* src/components/interaction/DropdownMenu/DropdownMenu.module.css */
1495
1466
  @layer component {
1496
- .bds0112DropdownMenu-wrapper {
1467
+ .bds0114DropdownMenu-wrapper {
1497
1468
  position: relative;
1498
1469
  display: inline-flex;
1499
1470
  }
1500
- .bds0112DropdownMenu-menu {
1471
+ .bds0114DropdownMenu-menu {
1501
1472
  position: absolute;
1502
1473
  top: calc(100% + var(--space_xxs));
1503
1474
  z-index: var(--z-index_dropdown);
@@ -1511,19 +1482,19 @@
1511
1482
  list-style: none;
1512
1483
  margin: 0;
1513
1484
  }
1514
- .bds0112DropdownMenu---placement_bottom-start {
1485
+ .bds0114DropdownMenu---placement_bottom-start {
1515
1486
  left: 0;
1516
1487
  }
1517
- .bds0112DropdownMenu---placement_bottom-end {
1488
+ .bds0114DropdownMenu---placement_bottom-end {
1518
1489
  right: 0;
1519
1490
  }
1520
- .bds0112DropdownMenu-separator {
1491
+ .bds0114DropdownMenu-separator {
1521
1492
  border: none;
1522
1493
  border-top: 1px solid currentcolor;
1523
1494
  margin: var(--space_xxs) 0;
1524
1495
  opacity: 0.15;
1525
1496
  }
1526
- .bds0112DropdownMenu-item {
1497
+ .bds0114DropdownMenu-item {
1527
1498
  all: unset;
1528
1499
  display: flex;
1529
1500
  align-items: center;
@@ -1537,22 +1508,22 @@
1537
1508
  box-sizing: border-box;
1538
1509
  transition: var(--animation_transition);
1539
1510
  }
1540
- .bds0112DropdownMenu-item:disabled {
1511
+ .bds0114DropdownMenu-item:disabled {
1541
1512
  opacity: 0.4;
1542
1513
  cursor: not-allowed;
1543
1514
  }
1544
- .bds0112DropdownMenu-item:focus-visible {
1515
+ .bds0114DropdownMenu-item:focus-visible {
1545
1516
  outline: var(--outline_default);
1546
1517
  outline-offset: calc(var(--outline_offset) * -1);
1547
1518
  border-radius: var(--border_radius--xs);
1548
1519
  }
1549
1520
  @media (hover: hover) and (pointer: fine) {
1550
- .bds0112DropdownMenu-item:not(:disabled):hover {
1521
+ .bds0114DropdownMenu-item:not(:disabled):hover {
1551
1522
  background-color: var(--color_bg--subtle);
1552
1523
  color: var(--color_interactive);
1553
1524
  }
1554
1525
  }
1555
- .bds0112DropdownMenu-icon {
1526
+ .bds0114DropdownMenu-icon {
1556
1527
  display: flex;
1557
1528
  align-items: center;
1558
1529
  flex-shrink: 0;
@@ -1561,11 +1532,11 @@
1561
1532
 
1562
1533
  /* src/components/interaction/Popover/Popover.module.css */
1563
1534
  @layer component {
1564
- .bds0112Popover-wrapper {
1535
+ .bds0114Popover-wrapper {
1565
1536
  position: relative;
1566
1537
  display: inline-flex;
1567
1538
  }
1568
- .bds0112Popover-panel {
1539
+ .bds0114Popover-panel {
1569
1540
  position: absolute;
1570
1541
  z-index: var(--z-index_popover);
1571
1542
  min-width: 12rem;
@@ -1577,19 +1548,19 @@
1577
1548
  color: var(--popover_on-color, var(--color_on-bg));
1578
1549
  font-size: var(--font_size--body);
1579
1550
  }
1580
- .bds0112Popover---placement_bottom {
1551
+ .bds0114Popover---placement_bottom {
1581
1552
  top: calc(100% + var(--space_xs));
1582
1553
  left: 0;
1583
1554
  }
1584
- .bds0112Popover---placement_top {
1555
+ .bds0114Popover---placement_top {
1585
1556
  bottom: calc(100% + var(--space_xs));
1586
1557
  left: 0;
1587
1558
  }
1588
- .bds0112Popover---placement_right {
1559
+ .bds0114Popover---placement_right {
1589
1560
  left: calc(100% + var(--space_xs));
1590
1561
  top: 0;
1591
1562
  }
1592
- .bds0112Popover---placement_left {
1563
+ .bds0114Popover---placement_left {
1593
1564
  right: calc(100% + var(--space_xs));
1594
1565
  top: 0;
1595
1566
  }
@@ -1597,23 +1568,23 @@
1597
1568
 
1598
1569
  /* src/components/interaction/Rating/Rating.module.css */
1599
1570
  @layer component {
1600
- .bds0112Rating-rating {
1571
+ .bds0114Rating-rating {
1601
1572
  display: inline-flex;
1602
1573
  gap: var(--space_xxxs);
1603
1574
  color: var(--color_bg);
1604
1575
  }
1605
- .bds0112Rating-star {
1576
+ .bds0114Rating-star {
1606
1577
  width: 1.5em;
1607
1578
  height: 1.5em;
1608
1579
  }
1609
- .bds0112Rating---filled {
1580
+ .bds0114Rating---filled {
1610
1581
  color: var(--color_warning);
1611
1582
  }
1612
1583
  }
1613
1584
 
1614
1585
  /* src/components/interaction/Toast/Toast.module.css */
1615
1586
  @layer component {
1616
- .bds0112Toast-toastContainer {
1587
+ .bds0114Toast-toastContainer {
1617
1588
  position: fixed;
1618
1589
  bottom: var(--space_xl);
1619
1590
  right: var(--space_xl);
@@ -1622,11 +1593,10 @@
1622
1593
  gap: var(--space_m);
1623
1594
  z-index: var(--z-index_toast);
1624
1595
  }
1625
- .bds0112Toast-toast {
1596
+ .bds0114Toast-toast {
1626
1597
  padding: var(--space_m) var(--space_l);
1627
1598
  background-color: var(--toast_color, var(--color_bg));
1628
1599
  color: var(--toast_on-color, var(--color_on-bg));
1629
- border: 1px solid currentcolor;
1630
1600
  border-radius: var(--border_radius--s);
1631
1601
  box-shadow: var(--shadow_s);
1632
1602
  display: flex;
@@ -1635,10 +1605,26 @@
1635
1605
  min-width: 300px;
1636
1606
  animation: slideIn var(--animation_duration--fast) var(--animation_easing);
1637
1607
  }
1638
- .bds0112Toast-message {
1608
+ .bds0114Toast-toast.bds0114Toast---variant_success {
1609
+ --toast_color: var(--color_success);
1610
+ --toast_on-color: var(--color_on-success);
1611
+ }
1612
+ .bds0114Toast-toast.bds0114Toast---variant_warning {
1613
+ --toast_color: var(--color_warning);
1614
+ --toast_on-color: var(--color_on-warning);
1615
+ }
1616
+ .bds0114Toast-toast.bds0114Toast---variant_info {
1617
+ --toast_color: var(--color_bg--subtle);
1618
+ --toast_on-color: var(--color_on-bg--subtle);
1619
+ }
1620
+ .bds0114Toast-toast.bds0114Toast---variant_error {
1621
+ --toast_color: var(--color_error);
1622
+ --toast_on-color: var(--color_on-error);
1623
+ }
1624
+ .bds0114Toast-message {
1639
1625
  flex: 1;
1640
1626
  }
1641
- .bds0112Toast-closeButton {
1627
+ .bds0114Toast-closeButton {
1642
1628
  display: flex;
1643
1629
  align-items: center;
1644
1630
  justify-content: center;
@@ -1649,13 +1635,9 @@
1649
1635
  background: none;
1650
1636
  border: none;
1651
1637
  cursor: pointer;
1652
- color: inherit;
1653
- opacity: 0.6;
1654
- }
1655
- .bds0112Toast-closeButton:hover {
1656
- opacity: 1;
1638
+ color: var(--toast_on-color);
1657
1639
  }
1658
- .bds0112Toast-closeButton svg {
1640
+ .bds0114Toast-closeButton svg {
1659
1641
  width: 1rem;
1660
1642
  height: 1rem;
1661
1643
  }
@@ -1673,17 +1655,17 @@
1673
1655
 
1674
1656
  /* src/components/interaction/form/Checkbox/Checkbox.module.css */
1675
1657
  @layer component {
1676
- .bds0112Checkbox-checkboxGroup {
1658
+ .bds0114Checkbox-checkboxGroup {
1677
1659
  --inputSize: calc(var(--space_s) * 2);
1678
1660
  display: flex;
1679
1661
  flex-direction: column;
1680
1662
  }
1681
- .bds0112Checkbox-inputWrapper {
1663
+ .bds0114Checkbox-inputWrapper {
1682
1664
  display: flex;
1683
1665
  align-items: stretch;
1684
1666
  gap: var(--space_xs);
1685
1667
  }
1686
- .bds0112Checkbox-checkbox {
1668
+ .bds0114Checkbox-checkbox {
1687
1669
  margin-block-start: 0.25em;
1688
1670
  width: var(--inputSize);
1689
1671
  height: var(--inputSize);
@@ -1696,11 +1678,11 @@
1696
1678
  position: relative;
1697
1679
  transition: background-color 0.3s ease, border-color 0.3s ease;
1698
1680
  }
1699
- .bds0112Checkbox-checkbox:checked {
1681
+ .bds0114Checkbox-checkbox:checked {
1700
1682
  background-color: var(--checkbox_color-active, var(--color_active));
1701
1683
  border-color: var(--checkbox_color-active, var(--color_active));
1702
1684
  }
1703
- .bds0112Checkbox-checkbox:checked::after {
1685
+ .bds0114Checkbox-checkbox:checked::after {
1704
1686
  content: "";
1705
1687
  position: absolute;
1706
1688
  left: 0.6em;
@@ -1711,15 +1693,15 @@
1711
1693
  border-width: 0 2px 2px 0;
1712
1694
  transform: rotate(45deg);
1713
1695
  }
1714
- .bds0112Checkbox-checkbox:focus {
1696
+ .bds0114Checkbox-checkbox:focus {
1715
1697
  outline: none;
1716
1698
  border-color: var(--color_interactive);
1717
1699
  box-shadow: 0 0 0 2px rgb(from var(--color_interactive) r g b / 20%);
1718
1700
  }
1719
- .bds0112Checkbox-checkboxError {
1701
+ .bds0114Checkbox-checkboxError {
1720
1702
  border-color: var(--color_error);
1721
1703
  }
1722
- .bds0112Checkbox-checkboxError:focus {
1704
+ .bds0114Checkbox-checkboxError:focus {
1723
1705
  border-color: var(--color_error);
1724
1706
  box-shadow: 0 0 0 2px rgb(from var(--color_error) r g b / 20%);
1725
1707
  }
@@ -1727,19 +1709,19 @@
1727
1709
 
1728
1710
  /* src/components/interaction/form/atoms/Message.module.css */
1729
1711
  @layer component {
1730
- .bds0112Message-error,
1731
- .bds0112Message-hint {
1712
+ .bds0114Message-error,
1713
+ .bds0114Message-hint {
1732
1714
  font-size: var(--font_size--body--s);
1733
1715
  margin-inline-start: var(--labelPosition);
1734
1716
  }
1735
- .bds0112Message-error {
1717
+ .bds0114Message-error {
1736
1718
  color: var(--color_error);
1737
1719
  }
1738
1720
  }
1739
1721
 
1740
1722
  /* src/components/interaction/form/atoms/Label.module.css */
1741
1723
  @layer component {
1742
- .bds0112Label-label {
1724
+ .bds0114Label-label {
1743
1725
  display: flex;
1744
1726
  align-items: center;
1745
1727
  font-family: var(--font_family--body);
@@ -1751,7 +1733,7 @@
1751
1733
 
1752
1734
  /* src/components/interaction/form/atoms/InputContainer.module.css */
1753
1735
  @layer component {
1754
- .bds0112InputContainer-container {
1736
+ .bds0114InputContainer-container {
1755
1737
  --labelPosition: calc(var(--inputSize) + var(--space_m));
1756
1738
  display: flex;
1757
1739
  flex-direction: column;
@@ -1761,16 +1743,16 @@
1761
1743
 
1762
1744
  /* src/components/interaction/form/Combobox/Combobox.module.css */
1763
1745
  @layer component {
1764
- .bds0112Combobox-formGroup {
1746
+ .bds0114Combobox-formGroup {
1765
1747
  display: flex;
1766
1748
  flex-direction: column;
1767
1749
  }
1768
- .bds0112Combobox-inputWrapper {
1750
+ .bds0114Combobox-inputWrapper {
1769
1751
  position: relative;
1770
1752
  display: flex;
1771
1753
  align-items: center;
1772
1754
  }
1773
- .bds0112Combobox-input {
1755
+ .bds0114Combobox-input {
1774
1756
  appearance: none;
1775
1757
  width: 100%;
1776
1758
  font-family: var(--font_family--body);
@@ -1783,22 +1765,22 @@
1783
1765
  color: var(--combobox_color, var(--color_on-bg));
1784
1766
  transition: var(--animation_transition);
1785
1767
  }
1786
- .bds0112Combobox-input:focus {
1768
+ .bds0114Combobox-input:focus {
1787
1769
  --combobox_border-color: var(--color_interactive);
1788
1770
  outline: none;
1789
1771
  box-shadow: var(--combobox_focus-ring, 0 0 0 2px rgb(from var(--color_interactive) r g b / 20%));
1790
1772
  }
1791
- .bds0112Combobox-input:disabled {
1773
+ .bds0114Combobox-input:disabled {
1792
1774
  opacity: 0.5;
1793
1775
  cursor: not-allowed;
1794
1776
  }
1795
- .bds0112Combobox-inputError {
1777
+ .bds0114Combobox-inputError {
1796
1778
  --combobox_border-color: var(--color_error);
1797
1779
  }
1798
- .bds0112Combobox-inputError:focus {
1780
+ .bds0114Combobox-inputError:focus {
1799
1781
  --combobox_focus-ring: 0 0 0 2px rgb(from var(--color_error) r g b / 20%);
1800
1782
  }
1801
- .bds0112Combobox-chevron {
1783
+ .bds0114Combobox-chevron {
1802
1784
  position: absolute;
1803
1785
  inset-inline-end: var(--space_s);
1804
1786
  display: flex;
@@ -1806,11 +1788,11 @@
1806
1788
  pointer-events: none;
1807
1789
  color: var(--combobox_color, var(--color_on-bg));
1808
1790
  }
1809
- .bds0112Combobox-chevron svg {
1791
+ .bds0114Combobox-chevron svg {
1810
1792
  width: 1rem;
1811
1793
  height: 1rem;
1812
1794
  }
1813
- .bds0112Combobox-listbox {
1795
+ .bds0114Combobox-listbox {
1814
1796
  position: absolute;
1815
1797
  top: calc(100% + var(--space_xxs));
1816
1798
  left: 0;
@@ -1827,7 +1809,7 @@
1827
1809
  color: var(--combobox_on-color, var(--color_on-bg));
1828
1810
  box-shadow: var(--shadow_m);
1829
1811
  }
1830
- .bds0112Combobox-option {
1812
+ .bds0114Combobox-option {
1831
1813
  display: flex;
1832
1814
  align-items: center;
1833
1815
  padding: var(--space_xs) var(--space_m);
@@ -1836,14 +1818,14 @@
1836
1818
  cursor: pointer;
1837
1819
  transition: var(--animation_transition);
1838
1820
  }
1839
- .bds0112Combobox-option.bds0112Combobox---highlighted {
1821
+ .bds0114Combobox-option.bds0114Combobox---highlighted {
1840
1822
  background-color: var(--color_bg--subtle);
1841
1823
  color: var(--color_interactive);
1842
1824
  }
1843
- .bds0112Combobox-option.bds0112Combobox---selected {
1825
+ .bds0114Combobox-option.bds0114Combobox---selected {
1844
1826
  font-weight: var(--font_weight--semibold);
1845
1827
  }
1846
- .bds0112Combobox-option.bds0112Combobox---disabled {
1828
+ .bds0114Combobox-option.bds0114Combobox---disabled {
1847
1829
  opacity: 0.4;
1848
1830
  cursor: not-allowed;
1849
1831
  }
@@ -1851,11 +1833,11 @@
1851
1833
 
1852
1834
  /* src/components/interaction/form/FileInput/FileInput.module.css */
1853
1835
  @layer component {
1854
- .bds0112FileInput-formGroup {
1836
+ .bds0114FileInput-formGroup {
1855
1837
  display: flex;
1856
1838
  flex-direction: column;
1857
1839
  }
1858
- .bds0112FileInput-dropZone {
1840
+ .bds0114FileInput-dropZone {
1859
1841
  display: flex;
1860
1842
  flex-direction: column;
1861
1843
  align-items: center;
@@ -1869,40 +1851,40 @@
1869
1851
  text-align: center;
1870
1852
  transition: var(--animation_transition);
1871
1853
  }
1872
- .bds0112FileInput-dropZone:focus-within {
1854
+ .bds0114FileInput-dropZone:focus-within {
1873
1855
  outline: var(--outline_default);
1874
1856
  outline-offset: var(--outline_offset);
1875
1857
  border-color: var(--fileInput_border-color, currentcolor);
1876
1858
  }
1877
- .bds0112FileInput-isDragging {
1859
+ .bds0114FileInput-isDragging {
1878
1860
  border-color: currentcolor;
1879
1861
  background-color: rgb(from currentcolor r g b / 8%);
1880
1862
  }
1881
- .bds0112FileInput-hasError {
1863
+ .bds0114FileInput-hasError {
1882
1864
  border-color: var(--color_error);
1883
1865
  }
1884
- .bds0112FileInput-isDisabled {
1866
+ .bds0114FileInput-isDisabled {
1885
1867
  opacity: 0.5;
1886
1868
  cursor: not-allowed;
1887
1869
  }
1888
- .bds0112FileInput-icon {
1870
+ .bds0114FileInput-icon {
1889
1871
  width: 2rem;
1890
1872
  height: 2rem;
1891
1873
  flex-shrink: 0;
1892
1874
  }
1893
- .bds0112FileInput-prompt {
1875
+ .bds0114FileInput-prompt {
1894
1876
  font-size: var(--font_size--body);
1895
1877
  color: var(--color_on-bg--muted);
1896
1878
  }
1897
- .bds0112FileInput-prompt strong {
1879
+ .bds0114FileInput-prompt strong {
1898
1880
  color: var(--color_interactive);
1899
1881
  font-weight: var(--font_weight--semibold);
1900
1882
  }
1901
- .bds0112FileInput-acceptHint {
1883
+ .bds0114FileInput-acceptHint {
1902
1884
  font-size: var(--font_size--body--s);
1903
1885
  color: var(--color_on-bg--muted);
1904
1886
  }
1905
- .bds0112FileInput-hiddenInput {
1887
+ .bds0114FileInput-hiddenInput {
1906
1888
  position: absolute;
1907
1889
  width: 1px;
1908
1890
  height: 1px;
@@ -1912,7 +1894,7 @@
1912
1894
  border: 0;
1913
1895
  }
1914
1896
  @media (hover: hover) and (pointer: fine) {
1915
- .bds0112FileInput-dropZone:not(.bds0112FileInput-isDisabled):hover {
1897
+ .bds0114FileInput-dropZone:not(.bds0114FileInput-isDisabled):hover {
1916
1898
  border-color: var(--color_interactive);
1917
1899
  background-color: rgb(from var(--color_interactive) r g b / 4%);
1918
1900
  }
@@ -1921,12 +1903,12 @@
1921
1903
 
1922
1904
  /* src/components/interaction/form/FormInput/FormInput.module.css */
1923
1905
  @layer component {
1924
- .bds0112FormInput-formGroup {
1906
+ .bds0114FormInput-formGroup {
1925
1907
  --labelPosition: 0;
1926
1908
  display: flex;
1927
1909
  flex-direction: column;
1928
1910
  }
1929
- .bds0112FormInput-input {
1911
+ .bds0114FormInput-input {
1930
1912
  font-family: var(--font_family--body);
1931
1913
  font-size: var(--font_size--body);
1932
1914
  padding: var(--space_s);
@@ -1936,26 +1918,26 @@
1936
1918
  color: var(--input_color, var(--color_on-bg));
1937
1919
  background-color: var(--input_color_bg, var(--color_bg));
1938
1920
  }
1939
- .bds0112FormInput-input:focus {
1921
+ .bds0114FormInput-input:focus {
1940
1922
  --input_border-color: var(--color_interactive);
1941
1923
  outline: none;
1942
1924
  box-shadow: var(--input_focus-ring, 0 0 0 2px rgb(from var(--color_interactive) r g b / 20%));
1943
1925
  }
1944
- .bds0112FormInput-inputError {
1926
+ .bds0114FormInput-inputError {
1945
1927
  --input_border-color: var(--color_error);
1946
1928
  }
1947
- .bds0112FormInput-inputError:focus {
1929
+ .bds0114FormInput-inputError:focus {
1948
1930
  --input_focus-ring: 0 0 0 2px rgb(from var(--color_error) r g b / 20%);
1949
1931
  }
1950
1932
  }
1951
1933
 
1952
1934
  /* src/components/interaction/form/NumberInput/NumberInput.module.css */
1953
1935
  @layer component {
1954
- .bds0112NumberInput-formGroup {
1936
+ .bds0114NumberInput-formGroup {
1955
1937
  display: flex;
1956
1938
  flex-direction: column;
1957
1939
  }
1958
- .bds0112NumberInput-inputRow {
1940
+ .bds0114NumberInput-inputRow {
1959
1941
  display: flex;
1960
1942
  align-items: stretch;
1961
1943
  border: 1px solid currentcolor;
@@ -1963,11 +1945,11 @@
1963
1945
  overflow: hidden;
1964
1946
  transition: var(--animation_transition);
1965
1947
  }
1966
- .bds0112NumberInput-inputRow:focus-within {
1948
+ .bds0114NumberInput-inputRow:focus-within {
1967
1949
  border-color: var(--numberInput_border-color, var(--color_interactive));
1968
1950
  box-shadow: var(--numberInput_focus-ring, 0 0 0 2px rgb(from var(--color_interactive) r g b / 20%));
1969
1951
  }
1970
- .bds0112NumberInput-input {
1952
+ .bds0114NumberInput-input {
1971
1953
  flex: 1;
1972
1954
  border: none;
1973
1955
  outline: none;
@@ -1980,17 +1962,17 @@
1980
1962
  min-width: 0;
1981
1963
  appearance: textfield;
1982
1964
  }
1983
- .bds0112NumberInput-input::-webkit-inner-spin-button,
1984
- .bds0112NumberInput-input::-webkit-outer-spin-button {
1965
+ .bds0114NumberInput-input::-webkit-inner-spin-button,
1966
+ .bds0114NumberInput-input::-webkit-outer-spin-button {
1985
1967
  appearance: none;
1986
1968
  }
1987
- .bds0112NumberInput-inputError {
1969
+ .bds0114NumberInput-inputError {
1988
1970
  --numberInput_border-color: var(--color_error);
1989
1971
  }
1990
- .bds0112NumberInput-inputError:focus-within {
1972
+ .bds0114NumberInput-inputError:focus-within {
1991
1973
  --numberInput_focus-ring: 0 0 0 2px rgb(from var(--color_error) r g b / 20%);
1992
1974
  }
1993
- .bds0112NumberInput-stepper {
1975
+ .bds0114NumberInput-stepper {
1994
1976
  all: unset;
1995
1977
  display: flex;
1996
1978
  align-items: center;
@@ -2002,16 +1984,16 @@
2002
1984
  transition: var(--animation_transition);
2003
1985
  flex-shrink: 0;
2004
1986
  }
2005
- .bds0112NumberInput-stepper svg {
1987
+ .bds0114NumberInput-stepper svg {
2006
1988
  width: 1rem;
2007
1989
  height: 1rem;
2008
1990
  }
2009
- .bds0112NumberInput-stepper:disabled {
1991
+ .bds0114NumberInput-stepper:disabled {
2010
1992
  opacity: 0.4;
2011
1993
  cursor: not-allowed;
2012
1994
  }
2013
1995
  @media (hover: hover) and (pointer: fine) {
2014
- .bds0112NumberInput-stepper:not(:disabled):hover {
1996
+ .bds0114NumberInput-stepper:not(:disabled):hover {
2015
1997
  background-color: var(--color_bg--subtle);
2016
1998
  opacity: 0.7;
2017
1999
  }
@@ -2020,55 +2002,66 @@
2020
2002
 
2021
2003
  /* src/components/interaction/form/Radio/Radio.module.css */
2022
2004
  @layer component {
2023
- .bds0112Radio-radioGroup {
2005
+ .bds0114Radio-radioGroup {
2024
2006
  --inputSize: calc(var(--space_s) * 2);
2025
2007
  --labelPosition: calc(var(--inputSize) + var(--space_m));
2026
2008
  display: flex;
2027
2009
  flex-direction: column;
2028
2010
  }
2029
- .bds0112Radio-inputWrapper {
2011
+ .bds0114Radio-inputWrapper {
2030
2012
  display: flex;
2031
- align-items: stretch;
2013
+ align-items: flex-start;
2032
2014
  gap: var(--space_xs);
2033
2015
  }
2034
- .bds0112Radio-radio {
2016
+ .bds0114Radio-textWrapper {
2017
+ display: flex;
2018
+ flex-direction: column;
2019
+ gap: var(--space_xxxs);
2020
+ padding-block-start: var(--space_xxxs);
2021
+ }
2022
+ .bds0114Radio-description {
2023
+ font-size: var(--font_size--body--s);
2024
+ color: var(--radio_description-color, var(--color_on-bg--subtle));
2025
+ line-height: var(--font_line-height--body);
2026
+ }
2027
+ .bds0114Radio-radio {
2035
2028
  flex-shrink: 0;
2036
- margin-block-start: 0.25em;
2029
+ margin-block-start: 0.2em;
2037
2030
  width: var(--inputSize);
2038
2031
  height: var(--inputSize);
2039
2032
  color: var(--radio_color, var(--color_on-bg));
2040
- border: 1px solid currentcolor;
2033
+ border: 1.5px solid currentcolor;
2041
2034
  border-radius: 50%;
2042
2035
  appearance: none;
2043
2036
  background-color: var(--radio_color_bg, var(--color_bg));
2044
2037
  cursor: pointer;
2045
2038
  position: relative;
2046
- transition: background-color 0.3s ease, border-color 0.3s ease;
2039
+ transition: background-color 0.2s ease, border-color 0.2s ease;
2047
2040
  }
2048
- .bds0112Radio-radio:checked {
2041
+ .bds0114Radio-radio:checked {
2049
2042
  background-color: var(--radio_color-active, var(--color_active));
2050
2043
  border-color: var(--radio_color-active, var(--color_active));
2051
2044
  }
2052
- .bds0112Radio-radio:checked::after {
2045
+ .bds0114Radio-radio:checked::after {
2053
2046
  content: "";
2054
2047
  position: absolute;
2055
- left: 0.6em;
2056
- top: 0.25em;
2057
- width: 0.5em;
2058
- height: 1em;
2059
- border: solid var(--radio_color-on-active, var(--color_on-active));
2060
- border-width: 0 2px 2px 0;
2061
- transform: rotate(45deg);
2048
+ left: 50%;
2049
+ top: 50%;
2050
+ transform: translate(-50%, -50%);
2051
+ width: 0.4em;
2052
+ height: 0.4em;
2053
+ border-radius: 50%;
2054
+ background-color: var(--radio_color-on-active, var(--color_on-active));
2062
2055
  }
2063
- .bds0112Radio-radio:focus {
2056
+ .bds0114Radio-radio:focus {
2064
2057
  outline: none;
2065
2058
  border-color: var(--color_interactive);
2066
2059
  box-shadow: 0 0 0 2px rgb(from var(--color_interactive) r g b / 20%);
2067
2060
  }
2068
- .bds0112Radio-radioError {
2061
+ .bds0114Radio-radioError {
2069
2062
  border-color: var(--color_error);
2070
2063
  }
2071
- .bds0112Radio-radioError:focus {
2064
+ .bds0114Radio-radioError:focus {
2072
2065
  border-color: var(--color_error);
2073
2066
  box-shadow: 0 0 0 2px rgb(from var(--color_error) r g b / 20%);
2074
2067
  }
@@ -2076,16 +2069,16 @@
2076
2069
 
2077
2070
  /* src/components/interaction/form/Select/Select.module.css */
2078
2071
  @layer component {
2079
- .bds0112Select-formGroup {
2072
+ .bds0114Select-formGroup {
2080
2073
  display: flex;
2081
2074
  flex-direction: column;
2082
2075
  }
2083
- .bds0112Select-selectWrapper {
2076
+ .bds0114Select-selectWrapper {
2084
2077
  position: relative;
2085
2078
  display: flex;
2086
2079
  align-items: center;
2087
2080
  }
2088
- .bds0112Select-select {
2081
+ .bds0114Select-select {
2089
2082
  appearance: none;
2090
2083
  width: 100%;
2091
2084
  font-family: var(--font_family--body);
@@ -2099,22 +2092,22 @@
2099
2092
  cursor: pointer;
2100
2093
  transition: var(--animation_transition);
2101
2094
  }
2102
- .bds0112Select-select:focus {
2095
+ .bds0114Select-select:focus {
2103
2096
  --select_border-color: var(--color_interactive);
2104
2097
  outline: none;
2105
2098
  box-shadow: var(--select_focus-ring, 0 0 0 2px rgb(from var(--color_interactive) r g b / 20%));
2106
2099
  }
2107
- .bds0112Select-select:disabled {
2100
+ .bds0114Select-select:disabled {
2108
2101
  opacity: 0.5;
2109
2102
  cursor: not-allowed;
2110
2103
  }
2111
- .bds0112Select-selectError {
2104
+ .bds0114Select-selectError {
2112
2105
  --select_border-color: var(--color_error);
2113
2106
  }
2114
- .bds0112Select-selectError:focus {
2107
+ .bds0114Select-selectError:focus {
2115
2108
  --select_focus-ring: 0 0 0 2px rgb(from var(--color_error) r g b / 20%);
2116
2109
  }
2117
- .bds0112Select-chevron {
2110
+ .bds0114Select-chevron {
2118
2111
  position: absolute;
2119
2112
  inset-inline-end: var(--space_s);
2120
2113
  display: flex;
@@ -2122,7 +2115,7 @@
2122
2115
  pointer-events: none;
2123
2116
  color: var(--select_color, var(--color_on-bg));
2124
2117
  }
2125
- .bds0112Select-chevron svg {
2118
+ .bds0114Select-chevron svg {
2126
2119
  width: 1rem;
2127
2120
  height: 1rem;
2128
2121
  }
@@ -2130,22 +2123,22 @@
2130
2123
 
2131
2124
  /* src/components/interaction/form/Slider/Slider.module.css */
2132
2125
  @layer component {
2133
- .bds0112Slider-formGroup {
2126
+ .bds0114Slider-formGroup {
2134
2127
  display: flex;
2135
2128
  flex-direction: column;
2136
2129
  gap: var(--space_xxs);
2137
2130
  }
2138
- .bds0112Slider-labelRow {
2131
+ .bds0114Slider-labelRow {
2139
2132
  display: flex;
2140
2133
  justify-content: space-between;
2141
2134
  align-items: baseline;
2142
2135
  }
2143
- .bds0112Slider-value {
2136
+ .bds0114Slider-value {
2144
2137
  font-size: var(--font_size--body--s);
2145
2138
  font-variant-numeric: tabular-nums;
2146
2139
  color: var(--color_on-bg--subtle);
2147
2140
  }
2148
- .bds0112Slider-slider {
2141
+ .bds0114Slider-slider {
2149
2142
  --slider_fill: 0%;
2150
2143
  --slider_track-height: var(--space_xxs);
2151
2144
  --slider_thumb-size: calc(var(--space_s) * 2);
@@ -2164,16 +2157,16 @@
2164
2157
  cursor: pointer;
2165
2158
  transition: var(--animation_transition);
2166
2159
  }
2167
- .bds0112Slider-slider:focus-visible {
2160
+ .bds0114Slider-slider:focus-visible {
2168
2161
  outline: var(--outline_default);
2169
2162
  outline-offset: var(--outline_offset);
2170
2163
  border-radius: 999px;
2171
2164
  }
2172
- .bds0112Slider-slider:disabled {
2165
+ .bds0114Slider-slider:disabled {
2173
2166
  opacity: 0.4;
2174
2167
  cursor: not-allowed;
2175
2168
  }
2176
- .bds0112Slider-slider::-webkit-slider-thumb {
2169
+ .bds0114Slider-slider::-webkit-slider-thumb {
2177
2170
  appearance: none;
2178
2171
  width: var(--slider_thumb-size);
2179
2172
  height: var(--slider_thumb-size);
@@ -2183,7 +2176,7 @@
2183
2176
  transition: var(--animation_transition);
2184
2177
  cursor: pointer;
2185
2178
  }
2186
- .bds0112Slider-slider::-moz-range-thumb {
2179
+ .bds0114Slider-slider::-moz-range-thumb {
2187
2180
  width: var(--slider_thumb-size);
2188
2181
  height: var(--slider_thumb-size);
2189
2182
  border: none;
@@ -2192,7 +2185,7 @@
2192
2185
  box-shadow: var(--shadow_s);
2193
2186
  cursor: pointer;
2194
2187
  }
2195
- .bds0112Slider-sliderError {
2188
+ .bds0114Slider-sliderError {
2196
2189
  background:
2197
2190
  linear-gradient(
2198
2191
  to right,
@@ -2201,16 +2194,16 @@
2201
2194
  var(--color_bg--subtle) var(--slider_fill),
2202
2195
  var(--color_bg--subtle) 100%);
2203
2196
  }
2204
- .bds0112Slider-sliderError::-webkit-slider-thumb {
2197
+ .bds0114Slider-sliderError::-webkit-slider-thumb {
2205
2198
  background-color: var(--color_error);
2206
2199
  }
2207
- .bds0112Slider-sliderError::-moz-range-thumb {
2200
+ .bds0114Slider-sliderError::-moz-range-thumb {
2208
2201
  background-color: var(--color_error);
2209
2202
  }
2210
2203
  @media (prefers-reduced-motion: reduce) {
2211
- .bds0112Slider-slider,
2212
- .bds0112Slider-slider::-webkit-slider-thumb,
2213
- .bds0112Slider-slider::-moz-range-thumb {
2204
+ .bds0114Slider-slider,
2205
+ .bds0114Slider-slider::-webkit-slider-thumb,
2206
+ .bds0114Slider-slider::-moz-range-thumb {
2214
2207
  transition: none;
2215
2208
  }
2216
2209
  }
@@ -2218,34 +2211,30 @@
2218
2211
 
2219
2212
  /* src/components/interaction/form/Switch/Switch.module.css */
2220
2213
  @layer component {
2221
- .bds0112Switch-switchGroup {
2214
+ .bds0114Switch-switchGroup {
2222
2215
  --switch_thumb-size: 1.25em;
2223
2216
  --switch_track-pad: var(--space_xxxs);
2224
2217
  --switch_track-height: calc(var(--switch_thumb-size) + var(--switch_track-pad) * 2);
2225
2218
  --switch_track-width: calc(var(--switch_thumb-size) * 2 + var(--switch_track-pad) * 2);
2226
- --track_bg: var(--color_grey--subtle);
2227
- --track_active: var(--color_active--subtle);
2228
- --thumb_bg: var(--color_grey);
2229
- --thumb_bg--active: var(--color_active--strong);
2230
2219
  color: var(--switch_color, var(--color_on-bg));
2231
2220
  display: flex;
2232
2221
  flex-direction: column;
2233
2222
  }
2234
- .bds0112Switch-switchGroup.bds0112Switch---size_small {
2223
+ .bds0114Switch-switchGroup.bds0114Switch---size_small {
2235
2224
  --switch_thumb-size: 1em;
2236
2225
  }
2237
- .bds0112Switch-switchGroup.bds0112Switch---size_medium {
2226
+ .bds0114Switch-switchGroup.bds0114Switch---size_medium {
2238
2227
  --switch_thumb-size: 1.25em;
2239
2228
  }
2240
- .bds0112Switch-switchGroup.bds0112Switch---size_large {
2229
+ .bds0114Switch-switchGroup.bds0114Switch---size_large {
2241
2230
  --switch_thumb-size: 1.5em;
2242
2231
  }
2243
- .bds0112Switch-inputWrapper {
2232
+ .bds0114Switch-inputWrapper {
2244
2233
  display: flex;
2245
2234
  align-items: center;
2246
2235
  gap: var(--space_xs);
2247
2236
  }
2248
- .bds0112Switch-trackWrapper {
2237
+ .bds0114Switch-trackWrapper {
2249
2238
  position: relative;
2250
2239
  display: inline-flex;
2251
2240
  align-items: center;
@@ -2253,7 +2242,7 @@
2253
2242
  width: var(--switch_track-width);
2254
2243
  height: var(--switch_track-height);
2255
2244
  }
2256
- .bds0112Switch-switch {
2245
+ .bds0114Switch-switch {
2257
2246
  position: absolute;
2258
2247
  inset: 0;
2259
2248
  appearance: none;
@@ -2264,54 +2253,54 @@
2264
2253
  cursor: pointer;
2265
2254
  z-index: 1;
2266
2255
  }
2267
- .bds0112Switch-switch:disabled {
2256
+ .bds0114Switch-switch:disabled {
2268
2257
  cursor: not-allowed;
2269
2258
  }
2270
- .bds0112Switch-track {
2259
+ .bds0114Switch-track {
2271
2260
  display: inline-flex;
2272
2261
  align-items: center;
2273
2262
  width: var(--switch_track-width);
2274
2263
  height: var(--switch_track-height);
2275
2264
  border-radius: 999px;
2276
- background-color: var(--track_bg);
2265
+ background-color: var(--track_bg, var(--color_grey--subtle));
2277
2266
  padding-inline: var(--switch_track-pad);
2278
2267
  pointer-events: none;
2279
2268
  transition: var(--animation_transition);
2280
- outline: 1px solid var(--thumb_bg);
2269
+ outline: 1px solid var(--thumb_bg, var(--color_grey));
2281
2270
  outline-offset: var(--outline_offset);
2282
2271
  }
2283
- .bds0112Switch-thumb {
2272
+ .bds0114Switch-thumb {
2284
2273
  display: block;
2285
2274
  width: var(--switch_thumb-size);
2286
2275
  height: var(--switch_thumb-size);
2287
2276
  border-radius: 50%;
2288
- background-color: var(--thumb_bg);
2277
+ background-color: var(--thumb_bg, var(--color_grey));
2289
2278
  box-shadow: var(--shadow_s);
2290
2279
  transition: var(--animation_transition);
2291
2280
  transform: translateX(0);
2292
2281
  }
2293
- .bds0112Switch-switch.bds0112Switch-switchError + .bds0112Switch-track {
2282
+ .bds0114Switch-switch.bds0114Switch-switchError + .bds0114Switch-track {
2294
2283
  outline: 1px solid var(--color_error);
2295
2284
  }
2296
- .bds0112Switch-switch:checked + .bds0112Switch-track {
2297
- background-color: var(--track_active);
2298
- outline-color: var(--thumb_bg--active);
2285
+ .bds0114Switch-switch:checked + .bds0114Switch-track {
2286
+ background-color: var(--track_active, var(--color_active--subtle));
2287
+ outline-color: var(--thumb_bg--active, var(--color_active--strong));
2299
2288
  }
2300
- .bds0112Switch-switch:checked + .bds0112Switch-track .bds0112Switch-thumb {
2301
- background-color: var(--thumb_bg--active);
2289
+ .bds0114Switch-switch:checked + .bds0114Switch-track .bds0114Switch-thumb {
2290
+ background-color: var(--thumb_bg--active, var(--color_active--strong));
2302
2291
  transform: translateX(var(--switch_thumb-size));
2303
2292
  }
2304
- .bds0112Switch-switch:focus-visible + .bds0112Switch-track {
2293
+ .bds0114Switch-switch:focus-visible + .bds0114Switch-track {
2305
2294
  outline: var(--outline_default);
2306
2295
  outline-offset: var(--outline_offset);
2307
2296
  border-radius: 999px;
2308
2297
  }
2309
- .bds0112Switch-switch:disabled + .bds0112Switch-track {
2298
+ .bds0114Switch-switch:disabled + .bds0114Switch-track {
2310
2299
  opacity: 0.4;
2311
2300
  }
2312
2301
  @media (prefers-reduced-motion: reduce) {
2313
- .bds0112Switch-track,
2314
- .bds0112Switch-thumb {
2302
+ .bds0114Switch-track,
2303
+ .bds0114Switch-thumb {
2315
2304
  transition: none;
2316
2305
  }
2317
2306
  }
@@ -2319,11 +2308,11 @@
2319
2308
 
2320
2309
  /* src/components/interaction/form/Textarea/Textarea.module.css */
2321
2310
  @layer component {
2322
- .bds0112Textarea-formGroup {
2311
+ .bds0114Textarea-formGroup {
2323
2312
  display: flex;
2324
2313
  flex-direction: column;
2325
2314
  }
2326
- .bds0112Textarea-textarea {
2315
+ .bds0114Textarea-textarea {
2327
2316
  font-family: var(--font_family--body);
2328
2317
  font-size: var(--font_size--body);
2329
2318
  line-height: var(--font_line-height--body);
@@ -2336,69 +2325,69 @@
2336
2325
  min-height: calc(var(--space_m) * 5);
2337
2326
  transition: var(--animation_transition);
2338
2327
  }
2339
- .bds0112Textarea-textarea:focus {
2328
+ .bds0114Textarea-textarea:focus {
2340
2329
  --textarea_border-color: var(--color_interactive);
2341
2330
  outline: none;
2342
2331
  box-shadow: var(--textarea_focus-ring, 0 0 0 2px rgb(from var(--color_interactive) r g b / 20%));
2343
2332
  }
2344
- .bds0112Textarea-textarea:disabled {
2333
+ .bds0114Textarea-textarea:disabled {
2345
2334
  opacity: 0.5;
2346
2335
  cursor: not-allowed;
2347
2336
  resize: none;
2348
2337
  }
2349
- .bds0112Textarea-textareaError {
2338
+ .bds0114Textarea-textareaError {
2350
2339
  --textarea_border-color: var(--color_error);
2351
2340
  }
2352
- .bds0112Textarea-textareaError:focus {
2341
+ .bds0114Textarea-textareaError:focus {
2353
2342
  --textarea_focus-ring: 0 0 0 2px rgb(from var(--color_error) r g b / 20%);
2354
2343
  }
2355
2344
  }
2356
2345
 
2357
2346
  /* src/components/layout/ButtonGroup/ButtonGroup.module.css */
2358
2347
  @layer component {
2359
- .bds0112ButtonGroup-buttonGroup {
2348
+ .bds0114ButtonGroup-buttonGroup {
2360
2349
  container-type: inline-size;
2361
2350
  container-name: button-group;
2362
2351
  grid-column: var(--grid_span-100);
2363
2352
  }
2364
- .bds0112ButtonGroup-buttonGroup .bds0112ButtonGroup-container {
2353
+ .bds0114ButtonGroup-buttonGroup .bds0114ButtonGroup-container {
2365
2354
  position: relative;
2366
2355
  display: flex;
2367
2356
  flex-direction: column-reverse;
2368
2357
  gap: var(--space_l);
2369
2358
  align-items: center;
2370
2359
  }
2371
- .bds0112ButtonGroup-buttonGroup.bds0112ButtonGroup---variant__card .bds0112ButtonGroup-container {
2360
+ .bds0114ButtonGroup-buttonGroup.bds0114ButtonGroup---variant_card .bds0114ButtonGroup-container {
2372
2361
  align-items: stretch;
2373
2362
  }
2374
- .bds0112ButtonGroup-buttonGroup.bds0112ButtonGroup---variant__flow .bds0112ButtonGroup-container,
2375
- .bds0112ButtonGroup-buttonGroup.bds0112ButtonGroup---variant__modal .bds0112ButtonGroup-container {
2363
+ .bds0114ButtonGroup-buttonGroup.bds0114ButtonGroup---variant_flow .bds0114ButtonGroup-container,
2364
+ .bds0114ButtonGroup-buttonGroup.bds0114ButtonGroup---variant_modal .bds0114ButtonGroup-container {
2376
2365
  align-items: center;
2377
2366
  }
2378
- .bds0112ButtonGroup-buttonGroup.bds0112ButtonGroup---variant__content .bds0112ButtonGroup-container {
2367
+ .bds0114ButtonGroup-buttonGroup.bds0114ButtonGroup---variant_content .bds0114ButtonGroup-container {
2379
2368
  align-items: flex-start;
2380
2369
  }
2381
2370
  @supports (contain: inline-size) {
2382
2371
  @container button-group (min-width: 30rem) {
2383
- .bds0112ButtonGroup-buttonGroup .bds0112ButtonGroup-container {
2372
+ .bds0114ButtonGroup-buttonGroup .bds0114ButtonGroup-container {
2384
2373
  flex-direction: row;
2385
2374
  justify-content: space-between;
2386
2375
  }
2387
- .bds0112ButtonGroup-buttonGroup.bds0112ButtonGroup---variant__modal .bds0112ButtonGroup-container > :first-child:last-child,
2388
- .bds0112ButtonGroup-buttonGroup.bds0112ButtonGroup---variant__flow .bds0112ButtonGroup-container > :first-child:last-child {
2376
+ .bds0114ButtonGroup-buttonGroup.bds0114ButtonGroup---variant_modal .bds0114ButtonGroup-container > :first-child:last-child,
2377
+ .bds0114ButtonGroup-buttonGroup.bds0114ButtonGroup---variant_flow .bds0114ButtonGroup-container > :first-child:last-child {
2389
2378
  margin-inline-start: auto;
2390
2379
  }
2391
- .bds0112ButtonGroup-buttonGroup.bds0112ButtonGroup---variant__card .bds0112ButtonGroup-container {
2380
+ .bds0114ButtonGroup-buttonGroup.bds0114ButtonGroup---variant_card .bds0114ButtonGroup-container {
2392
2381
  justify-content: center;
2393
2382
  }
2394
- .bds0112ButtonGroup-buttonGroup.bds0112ButtonGroup---variant__modal .bds0112ButtonGroup-container {
2383
+ .bds0114ButtonGroup-buttonGroup.bds0114ButtonGroup---variant_modal .bds0114ButtonGroup-container {
2395
2384
  justify-content: flex-end;
2396
2385
  }
2397
- .bds0112ButtonGroup-buttonGroup.bds0112ButtonGroup---variant__content .bds0112ButtonGroup-container {
2386
+ .bds0114ButtonGroup-buttonGroup.bds0114ButtonGroup---variant_content .bds0114ButtonGroup-container {
2398
2387
  justify-content: flex-start;
2399
2388
  align-items: center;
2400
2389
  }
2401
- .bds0112ButtonGroup-buttonGroup.bds0112ButtonGroup---variant__grid .bds0112ButtonGroup-container {
2390
+ .bds0114ButtonGroup-buttonGroup.bds0114ButtonGroup---variant_grid .bds0114ButtonGroup-container {
2402
2391
  justify-content: center;
2403
2392
  }
2404
2393
  }
@@ -2407,59 +2396,59 @@
2407
2396
 
2408
2397
  /* src/components/layout/Card/Card.module.css */
2409
2398
  @layer component {
2410
- .bds0112Card-card {
2399
+ .bds0114Card-card {
2411
2400
  background-color: var(--card_color, var(--color_bg));
2412
2401
  color: var(--card_on-color, var(--color_on-bg));
2413
2402
  border-radius: var(--border_radius--m);
2414
2403
  transition: all 0.3s ease;
2415
2404
  position: relative;
2416
2405
  }
2417
- .bds0112Card-card.bds0112Card---default {
2406
+ .bds0114Card-card.bds0114Card---default {
2418
2407
  box-shadow: var(--shadow_s);
2419
2408
  }
2420
- .bds0112Card-card.bds0112Card---elevated {
2409
+ .bds0114Card-card.bds0114Card---elevated {
2421
2410
  box-shadow: var(--shadow_m);
2422
2411
  }
2423
- .bds0112Card-card.bds0112Card---outlined {
2412
+ .bds0114Card-card.bds0114Card---outlined {
2424
2413
  border: 1px solid currentcolor;
2425
2414
  box-shadow: var(--shadow_s);
2426
2415
  }
2427
- .bds0112Card-card.bds0112Card---clickable {
2416
+ .bds0114Card-card.bds0114Card---clickable {
2428
2417
  cursor: pointer;
2429
2418
  }
2430
- .bds0112Card-card.bds0112Card---padding-none {
2419
+ .bds0114Card-card.bds0114Card---padding-none {
2431
2420
  padding: 0;
2432
2421
  }
2433
- .bds0112Card-card.bds0112Card---padding-small {
2422
+ .bds0114Card-card.bds0114Card---padding-small {
2434
2423
  padding: var(--space_s);
2435
2424
  }
2436
- .bds0112Card-card.bds0112Card---padding-medium {
2425
+ .bds0114Card-card.bds0114Card---padding-medium {
2437
2426
  padding: var(--space_m);
2438
2427
  }
2439
- .bds0112Card-card.bds0112Card---padding-large {
2428
+ .bds0114Card-card.bds0114Card---padding-large {
2440
2429
  padding: var(--space_l);
2441
2430
  }
2442
- .bds0112Card-card.bds0112Card---text-start {
2431
+ .bds0114Card-card.bds0114Card---text-start {
2443
2432
  text-align: left;
2444
2433
  }
2445
- .bds0112Card-card.bds0112Card---text-center {
2434
+ .bds0114Card-card.bds0114Card---text-center {
2446
2435
  text-align: center;
2447
2436
  }
2448
- .bds0112Card-card.bds0112Card---text-end {
2437
+ .bds0114Card-card.bds0114Card---text-end {
2449
2438
  text-align: right;
2450
2439
  }
2451
2440
  @media (hover: hover) and (pointer: fine) {
2452
- .bds0112Card-card.bds0112Card---clickable:hover {
2441
+ .bds0114Card-card.bds0114Card---clickable:hover {
2453
2442
  transform: translateY(-2px);
2454
2443
  box-shadow: var(--shadow_xl);
2455
2444
  }
2456
- .bds0112Card-card.bds0112Card---default:hover {
2445
+ .bds0114Card-card.bds0114Card---default:hover {
2457
2446
  box-shadow: var(--shadow_m);
2458
2447
  }
2459
- .bds0112Card-card.bds0112Card---elevated:hover {
2448
+ .bds0114Card-card.bds0114Card---elevated:hover {
2460
2449
  box-shadow: var(--shadow_2xl);
2461
2450
  }
2462
- .bds0112Card-card.bds0112Card---outlined:hover {
2451
+ .bds0114Card-card.bds0114Card---outlined:hover {
2463
2452
  box-shadow: var(--shadow_s);
2464
2453
  }
2465
2454
  }
@@ -2467,60 +2456,60 @@
2467
2456
 
2468
2457
  /* src/components/layout/SectionHeader/SectionHeader.module.css */
2469
2458
  @layer component {
2470
- .bds0112SectionHeader-sectionHeader {
2459
+ .bds0114SectionHeader-sectionHeader {
2471
2460
  display: flex;
2472
2461
  flex-direction: column;
2473
2462
  gap: var(--space_m);
2474
2463
  grid-column: var(--grid_span-100);
2475
2464
  }
2476
- .bds0112SectionHeader-title {
2465
+ .bds0114SectionHeader-title {
2477
2466
  color: var(--sectionHeader-title-color, var(--color_on-bg));
2478
2467
  margin: 0;
2479
2468
  font-family: var(--font_family--body);
2480
2469
  }
2481
- .bds0112SectionHeader-subtitle {
2470
+ .bds0114SectionHeader-subtitle {
2482
2471
  color: var(--sectionHeader_subtitle-color, var(--color_grey--strong));
2483
2472
  margin: 0;
2484
2473
  font-family: var(--font_family--body);
2485
2474
  font-weight: var(--font_weight--medium);
2486
2475
  }
2487
- .bds0112SectionHeader-sectionHeader.bds0112SectionHeader---start {
2476
+ .bds0114SectionHeader-sectionHeader.bds0114SectionHeader---start {
2488
2477
  align-items: flex-start;
2489
2478
  text-align: left;
2490
2479
  }
2491
- .bds0112SectionHeader-sectionHeader.bds0112SectionHeader---center {
2480
+ .bds0114SectionHeader-sectionHeader.bds0114SectionHeader---center {
2492
2481
  align-items: center;
2493
2482
  text-align: center;
2494
2483
  }
2495
- .bds0112SectionHeader-sectionHeader.bds0112SectionHeader---end {
2484
+ .bds0114SectionHeader-sectionHeader.bds0114SectionHeader---end {
2496
2485
  align-items: flex-end;
2497
2486
  text-align: right;
2498
2487
  }
2499
- .bds0112SectionHeader-sectionHeader.bds0112SectionHeader---small .bds0112SectionHeader-title {
2488
+ .bds0114SectionHeader-sectionHeader.bds0114SectionHeader---small .bds0114SectionHeader-title {
2500
2489
  font-size: var(--font_size--heading-1);
2501
2490
  line-height: var(--font_line-height--heading);
2502
2491
  font-weight: var(--font_weight--bold);
2503
2492
  }
2504
- .bds0112SectionHeader-sectionHeader.bds0112SectionHeader---small .bds0112SectionHeader-subtitle {
2493
+ .bds0114SectionHeader-sectionHeader.bds0114SectionHeader---small .bds0114SectionHeader-subtitle {
2505
2494
  font-size: var(--font_size--body);
2506
2495
  line-height: 1.4;
2507
2496
  }
2508
- .bds0112SectionHeader-sectionHeader.bds0112SectionHeader---medium .bds0112SectionHeader-title {
2497
+ .bds0114SectionHeader-sectionHeader.bds0114SectionHeader---medium .bds0114SectionHeader-title {
2509
2498
  font-size: var(--font_size--display);
2510
2499
  line-height: var(--font_line-height--display);
2511
2500
  font-weight: var(--font_weight--bold);
2512
2501
  }
2513
- .bds0112SectionHeader-sectionHeader.bds0112SectionHeader---medium .bds0112SectionHeader-subtitle {
2502
+ .bds0114SectionHeader-sectionHeader.bds0114SectionHeader---medium .bds0114SectionHeader-subtitle {
2514
2503
  font-size: var(--font_size--heading-3);
2515
2504
  line-height: 1.3;
2516
2505
  }
2517
- .bds0112SectionHeader-sectionHeader.bds0112SectionHeader---large .bds0112SectionHeader-title {
2506
+ .bds0114SectionHeader-sectionHeader.bds0114SectionHeader---large .bds0114SectionHeader-title {
2518
2507
  font-size: var(--font_size--display);
2519
2508
  line-height: var(--font_line-height--display);
2520
2509
  font-weight: var(--font_weight--bold);
2521
2510
  letter-spacing: var(--font_tracking--tight);
2522
2511
  }
2523
- .bds0112SectionHeader-sectionHeader.bds0112SectionHeader---large .bds0112SectionHeader-subtitle {
2512
+ .bds0114SectionHeader-sectionHeader.bds0114SectionHeader---large .bds0114SectionHeader-subtitle {
2524
2513
  font-size: var(--font_size--heading-2);
2525
2514
  line-height: 1.3;
2526
2515
  font-weight: var(--font_weight--medium);
@@ -2529,7 +2518,7 @@
2529
2518
 
2530
2519
  /* src/components/layout/IconWrapper/IconWrapper.module.css */
2531
2520
  @layer component {
2532
- .bds0112IconWrapper-wrapper {
2521
+ .bds0114IconWrapper-wrapper {
2533
2522
  width: 2em;
2534
2523
  height: 2em;
2535
2524
  font-size: 3em;
@@ -2544,7 +2533,7 @@
2544
2533
  position: relative;
2545
2534
  transition: var(--animation_transition);
2546
2535
  }
2547
- .bds0112IconWrapper-wrapper svg {
2536
+ .bds0114IconWrapper-wrapper svg {
2548
2537
  fill: currentcolor;
2549
2538
  }
2550
2539
  }