@boostdev/design-system-components 0.1.11 → 0.1.12

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