@boostdev/design-system-components 0.1.11 → 0.1.13

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 (20) hide show
  1. package/AGENTS.md +13 -1
  2. package/README.md +34 -4
  3. package/dist/client.cjs +46 -46
  4. package/dist/client.css +429 -419
  5. package/dist/client.js +46 -46
  6. package/dist/index.cjs +46 -46
  7. package/dist/index.css +429 -419
  8. package/dist/index.js +46 -46
  9. package/package.json +4 -2
  10. package/src/components/interaction/Dialog/Dialog.module.css +6 -0
  11. package/src/components/interaction/form/Checkbox/Checkbox.module.css +1 -0
  12. package/src/components/interaction/form/Combobox/Combobox.module.css +3 -3
  13. package/src/components/interaction/form/FileInput/FileInput.module.css +1 -1
  14. package/src/components/interaction/form/FormInput/FormInput.module.css +1 -0
  15. package/src/components/interaction/form/NumberInput/NumberInput.module.css +2 -2
  16. package/src/components/interaction/form/Radio/Radio.module.css +1 -0
  17. package/src/components/interaction/form/Select/Select.module.css +2 -2
  18. package/src/components/interaction/form/Slider/Slider.module.css +1 -0
  19. package/src/components/interaction/form/Switch/Switch.module.css +1 -0
  20. 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
+ .bds0113Accordion-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
+ .bds0113Accordion-item {
11
11
  border-bottom: 1px solid var(--color_bg--subtle);
12
12
  }
13
- .bds0111Accordion-item:last-child {
13
+ .bds0113Accordion-item:last-child {
14
14
  border-bottom: none;
15
15
  }
16
- .bds0111Accordion-heading {
16
+ .bds0113Accordion-heading {
17
17
  margin: 0;
18
18
  }
19
- .bds0111Accordion-trigger {
19
+ .bds0113Accordion-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
+ .bds0113Accordion-trigger:disabled {
35
35
  opacity: 0.4;
36
36
  cursor: not-allowed;
37
37
  }
38
- .bds0111Accordion-trigger:focus-visible {
38
+ .bds0113Accordion-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
+ .bds0113Accordion-trigger:not(:disabled):hover {
45
45
  background-color: var(--color_bg--subtle);
46
46
  }
47
47
  }
48
- .bds0111Accordion-triggerLabel {
48
+ .bds0113Accordion-triggerLabel {
49
49
  flex: 1;
50
50
  text-align: start;
51
51
  }
52
- .bds0111Accordion-chevron {
52
+ .bds0113Accordion-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
+ .bds0113Accordion-item.bds0113Accordion---open .bds0113Accordion-chevron {
59
59
  transform: rotate(180deg);
60
60
  }
61
- .bds0111Accordion-panel {
61
+ .bds0113Accordion-panel {
62
62
  overflow: hidden;
63
63
  }
64
- .bds0111Accordion-panelContent {
64
+ .bds0113Accordion-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
+ .bds0113Accordion-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
+ .bds0113Alert-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
+ .bds0113Alert---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
+ .bds0113Alert---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
+ .bds0113Alert---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
+ .bds0113Alert---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
+ .bds0113Alert-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
+ .bds0113Alert-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
+ .bds0113Alert-title {
127
127
  font-weight: var(--font_weight--semibold);
128
128
  font-size: var(--font_size--body);
129
129
  }
130
- .bds0111Alert-dismiss {
130
+ .bds0113Alert-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
+ .bds0113Alert-dismiss svg {
143
143
  width: 1rem;
144
144
  height: 1rem;
145
145
  }
146
- .bds0111Alert-dismiss:focus-visible {
146
+ .bds0113Alert-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
+ .bds0113Alert-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
+ .bds0113Avatar-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
+ .bds0113Avatar-avatar.bds0113Avatar---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
+ .bds0113Avatar-avatar.bds0113Avatar---size_small {
178
178
  --avatar_size: 2em;
179
179
  }
180
- .bds0111Avatar-avatar.bds0111Avatar---size_medium {
180
+ .bds0113Avatar-avatar.bds0113Avatar---size_medium {
181
181
  --avatar_size: 3em;
182
182
  }
183
- .bds0111Avatar-avatar.bds0111Avatar---size_large {
183
+ .bds0113Avatar-avatar.bds0113Avatar---size_large {
184
184
  --avatar_size: 4.5em;
185
185
  }
186
- .bds0111Avatar-image {
186
+ .bds0113Avatar-image {
187
187
  width: 100%;
188
188
  height: 100%;
189
189
  object-fit: cover;
190
190
  display: block;
191
191
  }
192
- .bds0111Avatar-initials {
192
+ .bds0113Avatar-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
+ .bds0113Avatar-avatar.bds0113Avatar---size_small .bds0113Avatar-initials {
198
198
  font-size: var(--font_size--body--s);
199
199
  }
200
- .bds0111Avatar-avatar.bds0111Avatar---size_large .bds0111Avatar-initials {
200
+ .bds0113Avatar-avatar.bds0113Avatar---size_large .bds0113Avatar-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
+ .bds0113Badge-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
+ .bds0113Badge---variant_primary {
225
225
  --badge_bg: var(--color_interactive);
226
226
  --badge_text: var(--color_on-interactive);
227
227
  }
228
- .bds0111Badge---variant_secondary {
228
+ .bds0113Badge---variant_secondary {
229
229
  --badge_bg: var(--color_bg);
230
230
  --badge_text: var(--color_on-bg);
231
231
  }
232
- .bds0111Badge---variant_success {
232
+ .bds0113Badge---variant_success {
233
233
  --badge_bg: var(--color_success);
234
234
  --badge_text: var(--color_on-success);
235
235
  }
236
- .bds0111Badge---variant_error {
236
+ .bds0113Badge---variant_error {
237
237
  --badge_bg: var(--color_error);
238
238
  --badge_text: var(--color_on-error);
239
239
  }
240
- .bds0111Badge---variant_warning {
240
+ .bds0113Badge---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
+ .bds0113Breadcrumb-breadcrumb {
249
249
  font-size: var(--font_size--body--s);
250
250
  }
251
- .bds0111Breadcrumb-list {
251
+ .bds0113Breadcrumb-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
+ .bds0113Breadcrumb-item {
261
261
  display: flex;
262
262
  align-items: center;
263
263
  gap: var(--space_xxs);
264
264
  }
265
- .bds0111Breadcrumb-link {
265
+ .bds0113Breadcrumb-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
+ .bds0113Breadcrumb-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
+ .bds0113Breadcrumb-link:hover {
277
277
  text-decoration: underline;
278
278
  text-underline-offset: 0.2em;
279
279
  }
280
280
  }
281
- .bds0111Breadcrumb-separator {
281
+ .bds0113Breadcrumb-separator {
282
282
  color: var(--color_on-bg--subtle);
283
283
  user-select: none;
284
284
  }
285
- .bds0111Breadcrumb-current {
285
+ .bds0113Breadcrumb-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
+ .bds0113Calendar-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
+ .bds0113Calendar-header {
305
305
  display: flex;
306
306
  align-items: center;
307
307
  justify-content: space-between;
308
308
  }
309
- .bds0111Calendar-monthYear {
309
+ .bds0113Calendar-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
+ .bds0113Calendar-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
+ .bds0113Calendar-navBtn svg {
327
327
  width: 1rem;
328
328
  height: 1rem;
329
329
  }
330
- .bds0111Calendar-navBtn:focus-visible {
330
+ .bds0113Calendar-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
+ .bds0113Calendar-navBtn:hover {
336
336
  background-color: var(--color_bg--subtle);
337
337
  }
338
338
  }
339
- .bds0111Calendar-grid {
339
+ .bds0113Calendar-grid {
340
340
  border-collapse: collapse;
341
341
  width: 100%;
342
342
  table-layout: fixed;
343
343
  }
344
- .bds0111Calendar-weekday {
344
+ .bds0113Calendar-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
+ .bds0113Calendar-empty {
352
352
  padding: 0;
353
353
  }
354
- .bds0111Calendar-day {
354
+ .bds0113Calendar-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
+ .bds0113Calendar-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
+ .bds0113Calendar-day:not(.bds0113Calendar-disabled, .bds0113Calendar-selected):hover {
374
374
  background-color: var(--color_bg--subtle);
375
375
  }
376
376
  }
377
- .bds0111Calendar-today {
377
+ .bds0113Calendar-today {
378
378
  border: 2px solid var(--color_interactive);
379
379
  font-weight: var(--font_weight--semibold);
380
380
  }
381
- .bds0111Calendar-selected {
381
+ .bds0113Calendar-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
+ .bds0113Calendar-disabled {
387
387
  opacity: 0.35;
388
388
  cursor: not-allowed;
389
389
  }
390
390
  @media (prefers-reduced-motion: reduce) {
391
- .bds0111Calendar-day {
391
+ .bds0113Calendar-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
+ .bds0113Carousel-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
+ .bds0113Carousel-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
+ .bds0113Carousel-track::-webkit-scrollbar {
415
415
  display: none;
416
416
  }
417
- .bds0111Carousel-slide {
417
+ .bds0113Carousel-slide {
418
418
  scroll-snap-align: start;
419
419
  flex-shrink: 0;
420
420
  }
421
- .bds0111Carousel-navBtn {
421
+ .bds0113Carousel-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
+ .bds0113Carousel-navBtn svg {
438
438
  width: 1.25rem;
439
439
  height: 1.25rem;
440
440
  }
441
- .bds0111Carousel-navBtn:focus-visible {
441
+ .bds0113Carousel-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
+ .bds0113Carousel-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
+ .bds0113Carousel-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
+ .bds0113DescriptionList-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
+ .bds0113DescriptionList-group {
469
469
  display: flex;
470
470
  flex-direction: column;
471
471
  gap: var(--space_xxs);
472
472
  }
473
- .bds0111DescriptionList-term {
473
+ .bds0113DescriptionList-term {
474
474
  font-weight: var(--font_weight--semibold);
475
475
  color: var(--color_on-bg);
476
476
  }
477
- .bds0111DescriptionList-details {
477
+ .bds0113DescriptionList-details {
478
478
  margin: 0;
479
479
  color: var(--color_on-bg--muted);
480
480
  }
481
- .bds0111DescriptionList---layout_inline .bds0111DescriptionList-group {
481
+ .bds0113DescriptionList---layout_inline .bds0113DescriptionList-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
+ .bds0113DescriptionList---layout_inline .bds0113DescriptionList-term {
488
488
  grid-column: 1;
489
489
  }
490
- .bds0111DescriptionList---layout_inline .bds0111DescriptionList-details {
490
+ .bds0113DescriptionList---layout_inline .bds0113DescriptionList-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
+ .bds0113Link-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
+ .bds0113Link-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
+ .bds0113Link-link:hover {
513
513
  --link_color: var(--link_color-hover);
514
514
  }
515
515
  }
516
- .bds0111Link---variant_default {
516
+ .bds0113Link---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
+ .bds0113Link---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
+ .bds0113Link---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
+ .bds0113Link---variant_standalone:hover {
535
535
  text-decoration: underline;
536
536
  text-underline-offset: 0.2em;
537
537
  }
538
538
  }
539
- .bds0111Link-externalLabel {
539
+ .bds0113Link-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
+ .bds0113Loading-loading {
555
555
  display: flex;
556
556
  justify-content: center;
557
557
  align-items: center;
558
558
  }
559
- .bds0111Loading-spinner {
559
+ .bds0113Loading-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
+ .bds0113Loading---size_small .bds0113Loading-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
+ .bds0113Loading---size_large .bds0113Loading-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
+ .bds0113NotificationBanner-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
+ .bds0113NotificationBanner---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
+ .bds0113NotificationBanner---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
+ .bds0113NotificationBanner---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
+ .bds0113NotificationBanner---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
+ .bds0113NotificationBanner-content {
625
625
  flex: 1;
626
626
  }
627
- .bds0111NotificationBanner-action {
627
+ .bds0113NotificationBanner-action {
628
628
  flex-shrink: 0;
629
629
  }
630
- .bds0111NotificationBanner-dismiss {
630
+ .bds0113NotificationBanner-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
+ .bds0113NotificationBanner-dismiss svg {
643
643
  width: 1rem;
644
644
  height: 1rem;
645
645
  }
646
- .bds0111NotificationBanner-dismiss:focus-visible {
646
+ .bds0113NotificationBanner-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
+ .bds0113NotificationBanner-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
+ .bds0113Pagination-pagination {
660
660
  display: flex;
661
661
  justify-content: center;
662
662
  }
663
- .bds0111Pagination-list {
663
+ .bds0113Pagination-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
+ .bds0113Pagination-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
+ .bds0113Pagination-button:disabled {
694
694
  opacity: 0.4;
695
695
  cursor: not-allowed;
696
696
  }
697
- .bds0111Pagination-button:focus-visible {
697
+ .bds0113Pagination-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
+ .bds0113Pagination-button:not(:disabled, .bds0113Pagination---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
+ .bds0113Pagination-button.bds0113Pagination---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
+ .bds0113Pagination-button.bds0113Pagination---nav svg {
713
713
  width: 1rem;
714
714
  height: 1rem;
715
715
  }
716
- .bds0111Pagination-ellipsis {
716
+ .bds0113Pagination-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
+ .bds0113Progress-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
+ .bds0113Progress-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
+ .bds0113Progress-label {
744
744
  font-weight: var(--font_weight--semibold);
745
745
  }
746
- .bds0111Progress-value {
746
+ .bds0113Progress-value {
747
747
  font-variant-numeric: tabular-nums;
748
748
  }
749
- .bds0111Progress-track {
749
+ .bds0113Progress-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
+ .bds0113Progress-track.bds0113Progress---size_small {
758
758
  --progress_height: var(--space_xxs);
759
759
  }
760
- .bds0111Progress-track.bds0111Progress---size_medium {
760
+ .bds0113Progress-track.bds0113Progress---size_medium {
761
761
  --progress_height: var(--space_xs);
762
762
  }
763
- .bds0111Progress-track.bds0111Progress---size_large {
763
+ .bds0113Progress-track.bds0113Progress---size_large {
764
764
  --progress_height: var(--space_s);
765
765
  }
766
- .bds0111Progress-fill {
766
+ .bds0113Progress-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
+ .bds0113Progress-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
+ .bds0113ProgressCircle-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
+ .bds0113ProgressCircle-svg {
788
788
  display: block;
789
789
  }
790
- .bds0111ProgressCircle-track {
790
+ .bds0113ProgressCircle-track {
791
791
  stroke: var(--color_bg--subtle);
792
792
  }
793
- .bds0111ProgressCircle-fill {
793
+ .bds0113ProgressCircle-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
+ .bds0113ProgressCircle-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
+ .bds0113ProgressCircle---size_small .bds0113ProgressCircle-value {
806
806
  font-size: 0.5rem;
807
807
  }
808
- .bds0111ProgressCircle---size_medium .bds0111ProgressCircle-value {
808
+ .bds0113ProgressCircle---size_medium .bds0113ProgressCircle-value {
809
809
  font-size: var(--font_size--body--s);
810
810
  }
811
- .bds0111ProgressCircle---size_large .bds0111ProgressCircle-value {
811
+ .bds0113ProgressCircle---size_large .bds0113ProgressCircle-value {
812
812
  font-size: var(--font_size--body);
813
813
  }
814
814
  @media (prefers-reduced-motion: reduce) {
815
- .bds0111ProgressCircle-fill {
815
+ .bds0113ProgressCircle-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
+ .bds0113Separator-separator {
824
824
  border: none;
825
825
  background-color: var(--separator_color, var(--color_on-bg));
826
826
  }
827
- .bds0111Separator-separator.bds0111Separator---horizontal {
827
+ .bds0113Separator-separator.bds0113Separator---horizontal {
828
828
  display: block;
829
829
  width: 100%;
830
830
  height: var(--separator_thickness, 1px);
831
831
  }
832
- .bds0111Separator-separator.bds0111Separator---vertical {
832
+ .bds0113Separator-separator.bds0113Separator---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
+ .bds0113Skeleton-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
+ .bds0113SkipLink-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
+ .bds0113SkipLink-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
+ .bds0113SkipLink-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
+ .bds0113Table-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
+ .bds0113Table-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
+ .bds0113Table-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
+ .bds0113Table-thead {
915
915
  background-color: var(--color_bg--subtle);
916
916
  }
917
- .bds0111Table-th {
917
+ .bds0113Table-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
+ .bds0113Table-th.bds0113Table---sortable {
927
927
  padding: 0;
928
928
  }
929
- .bds0111Table-sortButton {
929
+ .bds0113Table-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
+ .bds0113Table-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
+ .bds0113Table-sortButton:hover {
949
949
  color: var(--color_on-bg);
950
950
  }
951
951
  }
952
- .bds0111Table-sortIcon {
952
+ .bds0113Table-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
+ .bds0113Table-sortIcon.bds0113Table---sort-active {
959
959
  opacity: 1;
960
960
  color: var(--color_interactive);
961
961
  }
962
- .bds0111Table-sortIcon.bds0111Table---sort-desc {
962
+ .bds0113Table-sortIcon.bds0113Table---sort-desc {
963
963
  transform: rotate(180deg);
964
964
  }
965
- .bds0111Table-tbody .bds0111Table-tr {
965
+ .bds0113Table-tbody .bds0113Table-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
+ .bds0113Table-tbody .bds0113Table-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
+ .bds0113Table-tbody .bds0113Table-tr:hover {
974
974
  background-color: var(--color_bg--subtle);
975
975
  }
976
976
  }
977
- .bds0111Table-td {
977
+ .bds0113Table-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
+ .bds0113Table-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
+ .bds0113Tabs-tabs {
992
992
  display: flex;
993
993
  flex-direction: column;
994
994
  }
995
- .bds0111Tabs-tabList {
995
+ .bds0113Tabs-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
+ .bds0113Tabs-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
+ .bds0113Tabs-tab.bds0113Tabs---active {
1017
1017
  --tab_color: var(--color_interactive);
1018
1018
  --tab_border-color: var(--color_interactive);
1019
1019
  }
1020
- .bds0111Tabs-tab:disabled {
1020
+ .bds0113Tabs-tab:disabled {
1021
1021
  opacity: 0.4;
1022
1022
  cursor: not-allowed;
1023
1023
  }
1024
- .bds0111Tabs-tab:focus-visible {
1024
+ .bds0113Tabs-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
+ .bds0113Tabs-tab:not(:disabled, .bds0113Tabs---active):hover {
1031
1031
  --tab_color: var(--color_interactive);
1032
1032
  }
1033
1033
  }
1034
- .bds0111Tabs-panel {
1034
+ .bds0113Tabs-panel {
1035
1035
  padding-block-start: var(--space_m);
1036
1036
  }
1037
- .bds0111Tabs-panel:focus-visible {
1037
+ .bds0113Tabs-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
+ .bds0113Tooltip-wrapper {
1046
1046
  position: relative;
1047
1047
  display: inline-flex;
1048
1048
  align-items: center;
1049
1049
  }
1050
- .bds0111Tooltip-tooltip {
1050
+ .bds0113Tooltip-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
+ .bds0113Tooltip-wrapper:hover .bds0113Tooltip-tooltip,
1068
+ .bds0113Tooltip-wrapper:focus-within .bds0113Tooltip-tooltip {
1069
1069
  visibility: visible;
1070
1070
  opacity: 1;
1071
1071
  }
1072
- .bds0111Tooltip---placement_top {
1072
+ .bds0113Tooltip---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
+ .bds0113Tooltip---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
+ .bds0113Tooltip---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
+ .bds0113Tooltip---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
+ .bds0113Tooltip-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
+ .bds0113Typography-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
+ .bds0113Typography---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
+ .bds0113Typography---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
+ .bds0113Typography---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
+ .bds0113Typography---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
+ .bds0113Typography---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
+ .bds0113Button-button,
1151
+ .bds0113Button-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
+ .bds0113Button-button.bds0113Button---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
+ .bds0113Button-button.bds0113Button---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
+ .bds0113Button-button.bds0113Button---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
+ .bds0113Button-button.bds0113Button---size_medium {
1194
1194
  --button_height: 3em;
1195
1195
  padding-inline: var(--space_l);
1196
1196
  }
1197
- .bds0111Button-button.bds0111Button---size_large {
1197
+ .bds0113Button-button.bds0113Button---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
+ .bds0113Button-button.bds0113Button---hasPulse {
1203
1203
  animation: pulse 3s infinite;
1204
1204
  }
1205
- .bds0111Button-button[href] {
1205
+ .bds0113Button-button[href] {
1206
1206
  text-decoration: none;
1207
1207
  }
1208
- .bds0111Button-button svg {
1208
+ .bds0113Button-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
+ .bds0113Button-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
+ .bds0113Button-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
+ .bds0113Button-button:hover .bds0113Button-prefix svg {
1228
1228
  animation: 2s infinite fadeZoom ease-out;
1229
1229
  }
1230
- .bds0111Button-button:hover .bds0111Button-suffix svg {
1230
+ .bds0113Button-button:hover .bds0113Button-suffix svg {
1231
1231
  animation: 2s infinite fadeZoom ease-out;
1232
1232
  }
1233
1233
  }
1234
- .bds0111Button-button:focus-visible {
1234
+ .bds0113Button-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
+ .bds0113Button-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
+ .bds0113Command-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
+ .bds0113Command-dialog::backdrop {
1262
1262
  background: rgb(0 0 0 / 50%);
1263
1263
  }
1264
- .bds0111Command-palette {
1264
+ .bds0113Command-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
+ .bds0113Command-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
+ .bds0113Command-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
+ .bds0113Command-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
+ .bds0113Command-search::placeholder {
1300
1300
  color: var(--color_on-bg--muted);
1301
1301
  }
1302
- .bds0111Command-escHint {
1302
+ .bds0113Command-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
+ .bds0113Command-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
+ .bds0113Command-groupList {
1317
1317
  list-style: none;
1318
1318
  margin: 0;
1319
1319
  padding: 0;
1320
1320
  }
1321
- .bds0111Command-group {
1321
+ .bds0113Command-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
+ .bds0113Command-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
+ .bds0113Command-itemActive {
1338
1338
  background-color: var(--color_bg--subtle);
1339
1339
  }
1340
- .bds0111Command-itemLabel {
1340
+ .bds0113Command-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
+ .bds0113Command-itemDesc {
1346
1346
  font-size: var(--font_size--body--s);
1347
1347
  color: var(--color_on-bg--muted);
1348
1348
  }
1349
- .bds0111Command-shortcut {
1349
+ .bds0113Command-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
+ .bds0113Command-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
+ .bds0113Dialog-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));
@@ -1372,20 +1372,21 @@
1372
1372
  padding: var(--space_l);
1373
1373
  max-width: 90svw;
1374
1374
  max-height: 90svh;
1375
+ overflow: visible;
1375
1376
  }
1376
- .bds0111Dialog-dialogContent {
1377
+ .bds0113Dialog-dialogContent {
1377
1378
  display: grid;
1378
1379
  gap: var(--grid_gap);
1379
1380
  overflow-y: auto;
1380
1381
  min-height: 0;
1381
1382
  flex: 1;
1382
1383
  }
1383
- .bds0111Dialog-closeForm {
1384
+ .bds0113Dialog-closeForm {
1384
1385
  position: absolute;
1385
1386
  inset-block-start: -1em;
1386
1387
  inset-inline-end: -1em;
1387
1388
  }
1388
- .bds0111Dialog-closeButton {
1389
+ .bds0113Dialog-closeButton {
1389
1390
  all: unset;
1390
1391
  width: 2em;
1391
1392
  height: 2em;
@@ -1398,15 +1399,19 @@
1398
1399
  border: 2px solid currentcolor;
1399
1400
  cursor: pointer;
1400
1401
  }
1401
- .bds0111Dialog-closeButton svg {
1402
+ .bds0113Dialog-closeButton svg {
1402
1403
  width: 1.25em;
1403
1404
  height: 1.25em;
1404
1405
  }
1406
+ .bds0113Dialog-dialog::backdrop {
1407
+ background-color: var(--dialog_backdrop-color, rgb(0 0 0 / 50%));
1408
+ backdrop-filter: blur(2px);
1409
+ }
1405
1410
  }
1406
1411
 
1407
1412
  /* src/components/interaction/Drawer/Drawer.module.css */
1408
1413
  @layer component {
1409
- .bds0111Drawer-drawer {
1414
+ .bds0113Drawer-drawer {
1410
1415
  position: fixed;
1411
1416
  inset: 0;
1412
1417
  margin: 0;
@@ -1419,10 +1424,10 @@
1419
1424
  background: transparent;
1420
1425
  overflow: hidden;
1421
1426
  }
1422
- .bds0111Drawer-drawer::backdrop {
1427
+ .bds0113Drawer-drawer::backdrop {
1423
1428
  background: rgb(0 0 0 / 50%);
1424
1429
  }
1425
- .bds0111Drawer-panel {
1430
+ .bds0113Drawer-panel {
1426
1431
  position: absolute;
1427
1432
  inset-block: 0;
1428
1433
  display: flex;
@@ -1435,13 +1440,13 @@
1435
1440
  overflow: hidden;
1436
1441
  transition: transform var(--animation_transition-duration) var(--animation_easing);
1437
1442
  }
1438
- .bds0111Drawer---side_right .bds0111Drawer-panel {
1443
+ .bds0113Drawer---side_right .bds0113Drawer-panel {
1439
1444
  inset-inline-end: 0;
1440
1445
  }
1441
- .bds0111Drawer---side_left .bds0111Drawer-panel {
1446
+ .bds0113Drawer---side_left .bds0113Drawer-panel {
1442
1447
  inset-inline-start: 0;
1443
1448
  }
1444
- .bds0111Drawer-header {
1449
+ .bds0113Drawer-header {
1445
1450
  display: flex;
1446
1451
  align-items: center;
1447
1452
  justify-content: space-between;
@@ -1449,13 +1454,13 @@
1449
1454
  border-block-end: 1px solid currentcolor;
1450
1455
  flex-shrink: 0;
1451
1456
  }
1452
- .bds0111Drawer-title {
1457
+ .bds0113Drawer-title {
1453
1458
  margin: 0;
1454
1459
  font-size: var(--font_size--heading--s);
1455
1460
  font-weight: var(--font_weight--semibold);
1456
1461
  line-height: var(--font_line-height--heading);
1457
1462
  }
1458
- .bds0111Drawer-closeButton {
1463
+ .bds0113Drawer-closeButton {
1459
1464
  all: unset;
1460
1465
  display: flex;
1461
1466
  align-items: center;
@@ -1466,26 +1471,26 @@
1466
1471
  cursor: pointer;
1467
1472
  transition: var(--animation_transition);
1468
1473
  }
1469
- .bds0111Drawer-closeButton svg {
1474
+ .bds0113Drawer-closeButton svg {
1470
1475
  width: 1.25rem;
1471
1476
  height: 1.25rem;
1472
1477
  }
1473
- .bds0111Drawer-closeButton:focus-visible {
1478
+ .bds0113Drawer-closeButton:focus-visible {
1474
1479
  outline: var(--outline_default);
1475
1480
  outline-offset: var(--outline_offset);
1476
1481
  }
1477
1482
  @media (hover: hover) and (pointer: fine) {
1478
- .bds0111Drawer-closeButton:hover {
1483
+ .bds0113Drawer-closeButton:hover {
1479
1484
  background-color: var(--color_bg--subtle);
1480
1485
  }
1481
1486
  }
1482
- .bds0111Drawer-body {
1487
+ .bds0113Drawer-body {
1483
1488
  flex: 1;
1484
1489
  overflow-y: auto;
1485
1490
  padding: var(--space_l);
1486
1491
  }
1487
1492
  @media (prefers-reduced-motion: reduce) {
1488
- .bds0111Drawer-panel {
1493
+ .bds0113Drawer-panel {
1489
1494
  transition: none;
1490
1495
  }
1491
1496
  }
@@ -1493,11 +1498,11 @@
1493
1498
 
1494
1499
  /* src/components/interaction/DropdownMenu/DropdownMenu.module.css */
1495
1500
  @layer component {
1496
- .bds0111DropdownMenu-wrapper {
1501
+ .bds0113DropdownMenu-wrapper {
1497
1502
  position: relative;
1498
1503
  display: inline-flex;
1499
1504
  }
1500
- .bds0111DropdownMenu-menu {
1505
+ .bds0113DropdownMenu-menu {
1501
1506
  position: absolute;
1502
1507
  top: calc(100% + var(--space_xxs));
1503
1508
  z-index: var(--z-index_dropdown);
@@ -1511,19 +1516,19 @@
1511
1516
  list-style: none;
1512
1517
  margin: 0;
1513
1518
  }
1514
- .bds0111DropdownMenu---placement_bottom-start {
1519
+ .bds0113DropdownMenu---placement_bottom-start {
1515
1520
  left: 0;
1516
1521
  }
1517
- .bds0111DropdownMenu---placement_bottom-end {
1522
+ .bds0113DropdownMenu---placement_bottom-end {
1518
1523
  right: 0;
1519
1524
  }
1520
- .bds0111DropdownMenu-separator {
1525
+ .bds0113DropdownMenu-separator {
1521
1526
  border: none;
1522
1527
  border-top: 1px solid currentcolor;
1523
1528
  margin: var(--space_xxs) 0;
1524
1529
  opacity: 0.15;
1525
1530
  }
1526
- .bds0111DropdownMenu-item {
1531
+ .bds0113DropdownMenu-item {
1527
1532
  all: unset;
1528
1533
  display: flex;
1529
1534
  align-items: center;
@@ -1537,22 +1542,22 @@
1537
1542
  box-sizing: border-box;
1538
1543
  transition: var(--animation_transition);
1539
1544
  }
1540
- .bds0111DropdownMenu-item:disabled {
1545
+ .bds0113DropdownMenu-item:disabled {
1541
1546
  opacity: 0.4;
1542
1547
  cursor: not-allowed;
1543
1548
  }
1544
- .bds0111DropdownMenu-item:focus-visible {
1549
+ .bds0113DropdownMenu-item:focus-visible {
1545
1550
  outline: var(--outline_default);
1546
1551
  outline-offset: calc(var(--outline_offset) * -1);
1547
1552
  border-radius: var(--border_radius--xs);
1548
1553
  }
1549
1554
  @media (hover: hover) and (pointer: fine) {
1550
- .bds0111DropdownMenu-item:not(:disabled):hover {
1555
+ .bds0113DropdownMenu-item:not(:disabled):hover {
1551
1556
  background-color: var(--color_bg--subtle);
1552
1557
  color: var(--color_interactive);
1553
1558
  }
1554
1559
  }
1555
- .bds0111DropdownMenu-icon {
1560
+ .bds0113DropdownMenu-icon {
1556
1561
  display: flex;
1557
1562
  align-items: center;
1558
1563
  flex-shrink: 0;
@@ -1561,11 +1566,11 @@
1561
1566
 
1562
1567
  /* src/components/interaction/Popover/Popover.module.css */
1563
1568
  @layer component {
1564
- .bds0111Popover-wrapper {
1569
+ .bds0113Popover-wrapper {
1565
1570
  position: relative;
1566
1571
  display: inline-flex;
1567
1572
  }
1568
- .bds0111Popover-panel {
1573
+ .bds0113Popover-panel {
1569
1574
  position: absolute;
1570
1575
  z-index: var(--z-index_popover);
1571
1576
  min-width: 12rem;
@@ -1577,19 +1582,19 @@
1577
1582
  color: var(--popover_on-color, var(--color_on-bg));
1578
1583
  font-size: var(--font_size--body);
1579
1584
  }
1580
- .bds0111Popover---placement_bottom {
1585
+ .bds0113Popover---placement_bottom {
1581
1586
  top: calc(100% + var(--space_xs));
1582
1587
  left: 0;
1583
1588
  }
1584
- .bds0111Popover---placement_top {
1589
+ .bds0113Popover---placement_top {
1585
1590
  bottom: calc(100% + var(--space_xs));
1586
1591
  left: 0;
1587
1592
  }
1588
- .bds0111Popover---placement_right {
1593
+ .bds0113Popover---placement_right {
1589
1594
  left: calc(100% + var(--space_xs));
1590
1595
  top: 0;
1591
1596
  }
1592
- .bds0111Popover---placement_left {
1597
+ .bds0113Popover---placement_left {
1593
1598
  right: calc(100% + var(--space_xs));
1594
1599
  top: 0;
1595
1600
  }
@@ -1597,23 +1602,23 @@
1597
1602
 
1598
1603
  /* src/components/interaction/Rating/Rating.module.css */
1599
1604
  @layer component {
1600
- .bds0111Rating-rating {
1605
+ .bds0113Rating-rating {
1601
1606
  display: inline-flex;
1602
1607
  gap: var(--space_xxxs);
1603
1608
  color: var(--color_bg);
1604
1609
  }
1605
- .bds0111Rating-star {
1610
+ .bds0113Rating-star {
1606
1611
  width: 1.5em;
1607
1612
  height: 1.5em;
1608
1613
  }
1609
- .bds0111Rating---filled {
1614
+ .bds0113Rating---filled {
1610
1615
  color: var(--color_warning);
1611
1616
  }
1612
1617
  }
1613
1618
 
1614
1619
  /* src/components/interaction/Toast/Toast.module.css */
1615
1620
  @layer component {
1616
- .bds0111Toast-toastContainer {
1621
+ .bds0113Toast-toastContainer {
1617
1622
  position: fixed;
1618
1623
  bottom: var(--space_xl);
1619
1624
  right: var(--space_xl);
@@ -1622,7 +1627,7 @@
1622
1627
  gap: var(--space_m);
1623
1628
  z-index: var(--z-index_toast);
1624
1629
  }
1625
- .bds0111Toast-toast {
1630
+ .bds0113Toast-toast {
1626
1631
  padding: var(--space_m) var(--space_l);
1627
1632
  background-color: var(--toast_color, var(--color_bg));
1628
1633
  color: var(--toast_on-color, var(--color_on-bg));
@@ -1635,10 +1640,10 @@
1635
1640
  min-width: 300px;
1636
1641
  animation: slideIn var(--animation_duration--fast) var(--animation_easing);
1637
1642
  }
1638
- .bds0111Toast-message {
1643
+ .bds0113Toast-message {
1639
1644
  flex: 1;
1640
1645
  }
1641
- .bds0111Toast-closeButton {
1646
+ .bds0113Toast-closeButton {
1642
1647
  display: flex;
1643
1648
  align-items: center;
1644
1649
  justify-content: center;
@@ -1652,10 +1657,10 @@
1652
1657
  color: inherit;
1653
1658
  opacity: 0.6;
1654
1659
  }
1655
- .bds0111Toast-closeButton:hover {
1660
+ .bds0113Toast-closeButton:hover {
1656
1661
  opacity: 1;
1657
1662
  }
1658
- .bds0111Toast-closeButton svg {
1663
+ .bds0113Toast-closeButton svg {
1659
1664
  width: 1rem;
1660
1665
  height: 1rem;
1661
1666
  }
@@ -1673,20 +1678,21 @@
1673
1678
 
1674
1679
  /* src/components/interaction/form/Checkbox/Checkbox.module.css */
1675
1680
  @layer component {
1676
- .bds0111Checkbox-checkboxGroup {
1681
+ .bds0113Checkbox-checkboxGroup {
1677
1682
  --inputSize: calc(var(--space_s) * 2);
1678
1683
  display: flex;
1679
1684
  flex-direction: column;
1680
1685
  }
1681
- .bds0111Checkbox-inputWrapper {
1686
+ .bds0113Checkbox-inputWrapper {
1682
1687
  display: flex;
1683
1688
  align-items: stretch;
1684
1689
  gap: var(--space_xs);
1685
1690
  }
1686
- .bds0111Checkbox-checkbox {
1691
+ .bds0113Checkbox-checkbox {
1687
1692
  margin-block-start: 0.25em;
1688
1693
  width: var(--inputSize);
1689
1694
  height: var(--inputSize);
1695
+ color: var(--checkbox_color, var(--color_on-bg));
1690
1696
  border: 1px solid currentcolor;
1691
1697
  border-radius: var(--border_radius--xs);
1692
1698
  appearance: none;
@@ -1695,11 +1701,11 @@
1695
1701
  position: relative;
1696
1702
  transition: background-color 0.3s ease, border-color 0.3s ease;
1697
1703
  }
1698
- .bds0111Checkbox-checkbox:checked {
1704
+ .bds0113Checkbox-checkbox:checked {
1699
1705
  background-color: var(--checkbox_color-active, var(--color_active));
1700
1706
  border-color: var(--checkbox_color-active, var(--color_active));
1701
1707
  }
1702
- .bds0111Checkbox-checkbox:checked::after {
1708
+ .bds0113Checkbox-checkbox:checked::after {
1703
1709
  content: "";
1704
1710
  position: absolute;
1705
1711
  left: 0.6em;
@@ -1710,15 +1716,15 @@
1710
1716
  border-width: 0 2px 2px 0;
1711
1717
  transform: rotate(45deg);
1712
1718
  }
1713
- .bds0111Checkbox-checkbox:focus {
1719
+ .bds0113Checkbox-checkbox:focus {
1714
1720
  outline: none;
1715
1721
  border-color: var(--color_interactive);
1716
1722
  box-shadow: 0 0 0 2px rgb(from var(--color_interactive) r g b / 20%);
1717
1723
  }
1718
- .bds0111Checkbox-checkboxError {
1724
+ .bds0113Checkbox-checkboxError {
1719
1725
  border-color: var(--color_error);
1720
1726
  }
1721
- .bds0111Checkbox-checkboxError:focus {
1727
+ .bds0113Checkbox-checkboxError:focus {
1722
1728
  border-color: var(--color_error);
1723
1729
  box-shadow: 0 0 0 2px rgb(from var(--color_error) r g b / 20%);
1724
1730
  }
@@ -1726,19 +1732,19 @@
1726
1732
 
1727
1733
  /* src/components/interaction/form/atoms/Message.module.css */
1728
1734
  @layer component {
1729
- .bds0111Message-error,
1730
- .bds0111Message-hint {
1735
+ .bds0113Message-error,
1736
+ .bds0113Message-hint {
1731
1737
  font-size: var(--font_size--body--s);
1732
1738
  margin-inline-start: var(--labelPosition);
1733
1739
  }
1734
- .bds0111Message-error {
1740
+ .bds0113Message-error {
1735
1741
  color: var(--color_error);
1736
1742
  }
1737
1743
  }
1738
1744
 
1739
1745
  /* src/components/interaction/form/atoms/Label.module.css */
1740
1746
  @layer component {
1741
- .bds0111Label-label {
1747
+ .bds0113Label-label {
1742
1748
  display: flex;
1743
1749
  align-items: center;
1744
1750
  font-family: var(--font_family--body);
@@ -1750,7 +1756,7 @@
1750
1756
 
1751
1757
  /* src/components/interaction/form/atoms/InputContainer.module.css */
1752
1758
  @layer component {
1753
- .bds0111InputContainer-container {
1759
+ .bds0113InputContainer-container {
1754
1760
  --labelPosition: calc(var(--inputSize) + var(--space_m));
1755
1761
  display: flex;
1756
1762
  flex-direction: column;
@@ -1760,16 +1766,16 @@
1760
1766
 
1761
1767
  /* src/components/interaction/form/Combobox/Combobox.module.css */
1762
1768
  @layer component {
1763
- .bds0111Combobox-formGroup {
1769
+ .bds0113Combobox-formGroup {
1764
1770
  display: flex;
1765
1771
  flex-direction: column;
1766
1772
  }
1767
- .bds0111Combobox-inputWrapper {
1773
+ .bds0113Combobox-inputWrapper {
1768
1774
  position: relative;
1769
1775
  display: flex;
1770
1776
  align-items: center;
1771
1777
  }
1772
- .bds0111Combobox-input {
1778
+ .bds0113Combobox-input {
1773
1779
  appearance: none;
1774
1780
  width: 100%;
1775
1781
  font-family: var(--font_family--body);
@@ -1779,37 +1785,37 @@
1779
1785
  border: 1px solid var(--combobox_border-color, currentcolor);
1780
1786
  border-radius: var(--border_radius--xs);
1781
1787
  background-color: var(--combobox_color_bg, var(--color_bg));
1782
- color: var(--color_on-bg);
1788
+ color: var(--combobox_color, var(--color_on-bg));
1783
1789
  transition: var(--animation_transition);
1784
1790
  }
1785
- .bds0111Combobox-input:focus {
1791
+ .bds0113Combobox-input:focus {
1786
1792
  --combobox_border-color: var(--color_interactive);
1787
1793
  outline: none;
1788
1794
  box-shadow: var(--combobox_focus-ring, 0 0 0 2px rgb(from var(--color_interactive) r g b / 20%));
1789
1795
  }
1790
- .bds0111Combobox-input:disabled {
1796
+ .bds0113Combobox-input:disabled {
1791
1797
  opacity: 0.5;
1792
1798
  cursor: not-allowed;
1793
1799
  }
1794
- .bds0111Combobox-inputError {
1800
+ .bds0113Combobox-inputError {
1795
1801
  --combobox_border-color: var(--color_error);
1796
1802
  }
1797
- .bds0111Combobox-inputError:focus {
1803
+ .bds0113Combobox-inputError:focus {
1798
1804
  --combobox_focus-ring: 0 0 0 2px rgb(from var(--color_error) r g b / 20%);
1799
1805
  }
1800
- .bds0111Combobox-chevron {
1806
+ .bds0113Combobox-chevron {
1801
1807
  position: absolute;
1802
1808
  inset-inline-end: var(--space_s);
1803
1809
  display: flex;
1804
1810
  align-items: center;
1805
1811
  pointer-events: none;
1806
- color: var(--color_on-bg);
1812
+ color: var(--combobox_color, var(--color_on-bg));
1807
1813
  }
1808
- .bds0111Combobox-chevron svg {
1814
+ .bds0113Combobox-chevron svg {
1809
1815
  width: 1rem;
1810
1816
  height: 1rem;
1811
1817
  }
1812
- .bds0111Combobox-listbox {
1818
+ .bds0113Combobox-listbox {
1813
1819
  position: absolute;
1814
1820
  top: calc(100% + var(--space_xxs));
1815
1821
  left: 0;
@@ -1826,23 +1832,23 @@
1826
1832
  color: var(--combobox_on-color, var(--color_on-bg));
1827
1833
  box-shadow: var(--shadow_m);
1828
1834
  }
1829
- .bds0111Combobox-option {
1835
+ .bds0113Combobox-option {
1830
1836
  display: flex;
1831
1837
  align-items: center;
1832
1838
  padding: var(--space_xs) var(--space_m);
1833
1839
  font-size: var(--font_size--body);
1834
- color: var(--color_on-bg);
1840
+ color: var(--combobox_color, var(--color_on-bg));
1835
1841
  cursor: pointer;
1836
1842
  transition: var(--animation_transition);
1837
1843
  }
1838
- .bds0111Combobox-option.bds0111Combobox---highlighted {
1844
+ .bds0113Combobox-option.bds0113Combobox---highlighted {
1839
1845
  background-color: var(--color_bg--subtle);
1840
1846
  color: var(--color_interactive);
1841
1847
  }
1842
- .bds0111Combobox-option.bds0111Combobox---selected {
1848
+ .bds0113Combobox-option.bds0113Combobox---selected {
1843
1849
  font-weight: var(--font_weight--semibold);
1844
1850
  }
1845
- .bds0111Combobox-option.bds0111Combobox---disabled {
1851
+ .bds0113Combobox-option.bds0113Combobox---disabled {
1846
1852
  opacity: 0.4;
1847
1853
  cursor: not-allowed;
1848
1854
  }
@@ -1850,11 +1856,11 @@
1850
1856
 
1851
1857
  /* src/components/interaction/form/FileInput/FileInput.module.css */
1852
1858
  @layer component {
1853
- .bds0111FileInput-formGroup {
1859
+ .bds0113FileInput-formGroup {
1854
1860
  display: flex;
1855
1861
  flex-direction: column;
1856
1862
  }
1857
- .bds0111FileInput-dropZone {
1863
+ .bds0113FileInput-dropZone {
1858
1864
  display: flex;
1859
1865
  flex-direction: column;
1860
1866
  align-items: center;
@@ -1863,45 +1869,45 @@
1863
1869
  padding: var(--space_l) var(--space_m);
1864
1870
  border: 2px dashed currentcolor;
1865
1871
  border-radius: var(--border_radius--s);
1866
- color: currentcolor;
1872
+ color: var(--fileInput_color, var(--color_on-bg));
1867
1873
  cursor: pointer;
1868
1874
  text-align: center;
1869
1875
  transition: var(--animation_transition);
1870
1876
  }
1871
- .bds0111FileInput-dropZone:focus-within {
1877
+ .bds0113FileInput-dropZone:focus-within {
1872
1878
  outline: var(--outline_default);
1873
1879
  outline-offset: var(--outline_offset);
1874
1880
  border-color: var(--fileInput_border-color, currentcolor);
1875
1881
  }
1876
- .bds0111FileInput-isDragging {
1882
+ .bds0113FileInput-isDragging {
1877
1883
  border-color: currentcolor;
1878
1884
  background-color: rgb(from currentcolor r g b / 8%);
1879
1885
  }
1880
- .bds0111FileInput-hasError {
1886
+ .bds0113FileInput-hasError {
1881
1887
  border-color: var(--color_error);
1882
1888
  }
1883
- .bds0111FileInput-isDisabled {
1889
+ .bds0113FileInput-isDisabled {
1884
1890
  opacity: 0.5;
1885
1891
  cursor: not-allowed;
1886
1892
  }
1887
- .bds0111FileInput-icon {
1893
+ .bds0113FileInput-icon {
1888
1894
  width: 2rem;
1889
1895
  height: 2rem;
1890
1896
  flex-shrink: 0;
1891
1897
  }
1892
- .bds0111FileInput-prompt {
1898
+ .bds0113FileInput-prompt {
1893
1899
  font-size: var(--font_size--body);
1894
1900
  color: var(--color_on-bg--muted);
1895
1901
  }
1896
- .bds0111FileInput-prompt strong {
1902
+ .bds0113FileInput-prompt strong {
1897
1903
  color: var(--color_interactive);
1898
1904
  font-weight: var(--font_weight--semibold);
1899
1905
  }
1900
- .bds0111FileInput-acceptHint {
1906
+ .bds0113FileInput-acceptHint {
1901
1907
  font-size: var(--font_size--body--s);
1902
1908
  color: var(--color_on-bg--muted);
1903
1909
  }
1904
- .bds0111FileInput-hiddenInput {
1910
+ .bds0113FileInput-hiddenInput {
1905
1911
  position: absolute;
1906
1912
  width: 1px;
1907
1913
  height: 1px;
@@ -1911,7 +1917,7 @@
1911
1917
  border: 0;
1912
1918
  }
1913
1919
  @media (hover: hover) and (pointer: fine) {
1914
- .bds0111FileInput-dropZone:not(.bds0111FileInput-isDisabled):hover {
1920
+ .bds0113FileInput-dropZone:not(.bds0113FileInput-isDisabled):hover {
1915
1921
  border-color: var(--color_interactive);
1916
1922
  background-color: rgb(from var(--color_interactive) r g b / 4%);
1917
1923
  }
@@ -1920,40 +1926,41 @@
1920
1926
 
1921
1927
  /* src/components/interaction/form/FormInput/FormInput.module.css */
1922
1928
  @layer component {
1923
- .bds0111FormInput-formGroup {
1929
+ .bds0113FormInput-formGroup {
1924
1930
  --labelPosition: 0;
1925
1931
  display: flex;
1926
1932
  flex-direction: column;
1927
1933
  }
1928
- .bds0111FormInput-input {
1934
+ .bds0113FormInput-input {
1929
1935
  font-family: var(--font_family--body);
1930
1936
  font-size: var(--font_size--body);
1931
1937
  padding: var(--space_s);
1932
1938
  border: 1px solid var(--input_border-color, currentcolor);
1933
1939
  border-radius: var(--input_radius, var(--border_radius--xs));
1934
1940
  transition: var(--animation_transition);
1941
+ color: var(--input_color, var(--color_on-bg));
1935
1942
  background-color: var(--input_color_bg, var(--color_bg));
1936
1943
  }
1937
- .bds0111FormInput-input:focus {
1944
+ .bds0113FormInput-input:focus {
1938
1945
  --input_border-color: var(--color_interactive);
1939
1946
  outline: none;
1940
1947
  box-shadow: var(--input_focus-ring, 0 0 0 2px rgb(from var(--color_interactive) r g b / 20%));
1941
1948
  }
1942
- .bds0111FormInput-inputError {
1949
+ .bds0113FormInput-inputError {
1943
1950
  --input_border-color: var(--color_error);
1944
1951
  }
1945
- .bds0111FormInput-inputError:focus {
1952
+ .bds0113FormInput-inputError:focus {
1946
1953
  --input_focus-ring: 0 0 0 2px rgb(from var(--color_error) r g b / 20%);
1947
1954
  }
1948
1955
  }
1949
1956
 
1950
1957
  /* src/components/interaction/form/NumberInput/NumberInput.module.css */
1951
1958
  @layer component {
1952
- .bds0111NumberInput-formGroup {
1959
+ .bds0113NumberInput-formGroup {
1953
1960
  display: flex;
1954
1961
  flex-direction: column;
1955
1962
  }
1956
- .bds0111NumberInput-inputRow {
1963
+ .bds0113NumberInput-inputRow {
1957
1964
  display: flex;
1958
1965
  align-items: stretch;
1959
1966
  border: 1px solid currentcolor;
@@ -1961,11 +1968,11 @@
1961
1968
  overflow: hidden;
1962
1969
  transition: var(--animation_transition);
1963
1970
  }
1964
- .bds0111NumberInput-inputRow:focus-within {
1971
+ .bds0113NumberInput-inputRow:focus-within {
1965
1972
  border-color: var(--numberInput_border-color, var(--color_interactive));
1966
1973
  box-shadow: var(--numberInput_focus-ring, 0 0 0 2px rgb(from var(--color_interactive) r g b / 20%));
1967
1974
  }
1968
- .bds0111NumberInput-input {
1975
+ .bds0113NumberInput-input {
1969
1976
  flex: 1;
1970
1977
  border: none;
1971
1978
  outline: none;
@@ -1974,42 +1981,42 @@
1974
1981
  text-align: center;
1975
1982
  padding: var(--space_s);
1976
1983
  background: transparent;
1977
- color: var(--color_on-bg);
1984
+ color: var(--numberInput_color, var(--color_on-bg));
1978
1985
  min-width: 0;
1979
1986
  appearance: textfield;
1980
1987
  }
1981
- .bds0111NumberInput-input::-webkit-inner-spin-button,
1982
- .bds0111NumberInput-input::-webkit-outer-spin-button {
1988
+ .bds0113NumberInput-input::-webkit-inner-spin-button,
1989
+ .bds0113NumberInput-input::-webkit-outer-spin-button {
1983
1990
  appearance: none;
1984
1991
  }
1985
- .bds0111NumberInput-inputError {
1992
+ .bds0113NumberInput-inputError {
1986
1993
  --numberInput_border-color: var(--color_error);
1987
1994
  }
1988
- .bds0111NumberInput-inputError:focus-within {
1995
+ .bds0113NumberInput-inputError:focus-within {
1989
1996
  --numberInput_focus-ring: 0 0 0 2px rgb(from var(--color_error) r g b / 20%);
1990
1997
  }
1991
- .bds0111NumberInput-stepper {
1998
+ .bds0113NumberInput-stepper {
1992
1999
  all: unset;
1993
2000
  display: flex;
1994
2001
  align-items: center;
1995
2002
  justify-content: center;
1996
2003
  padding: var(--space_xs);
1997
2004
  background-color: var(--color_bg--subtle);
1998
- color: var(--color_on-bg);
2005
+ color: var(--numberInput_color, var(--color_on-bg));
1999
2006
  cursor: pointer;
2000
2007
  transition: var(--animation_transition);
2001
2008
  flex-shrink: 0;
2002
2009
  }
2003
- .bds0111NumberInput-stepper svg {
2010
+ .bds0113NumberInput-stepper svg {
2004
2011
  width: 1rem;
2005
2012
  height: 1rem;
2006
2013
  }
2007
- .bds0111NumberInput-stepper:disabled {
2014
+ .bds0113NumberInput-stepper:disabled {
2008
2015
  opacity: 0.4;
2009
2016
  cursor: not-allowed;
2010
2017
  }
2011
2018
  @media (hover: hover) and (pointer: fine) {
2012
- .bds0111NumberInput-stepper:not(:disabled):hover {
2019
+ .bds0113NumberInput-stepper:not(:disabled):hover {
2013
2020
  background-color: var(--color_bg--subtle);
2014
2021
  opacity: 0.7;
2015
2022
  }
@@ -2018,22 +2025,23 @@
2018
2025
 
2019
2026
  /* src/components/interaction/form/Radio/Radio.module.css */
2020
2027
  @layer component {
2021
- .bds0111Radio-radioGroup {
2028
+ .bds0113Radio-radioGroup {
2022
2029
  --inputSize: calc(var(--space_s) * 2);
2023
2030
  --labelPosition: calc(var(--inputSize) + var(--space_m));
2024
2031
  display: flex;
2025
2032
  flex-direction: column;
2026
2033
  }
2027
- .bds0111Radio-inputWrapper {
2034
+ .bds0113Radio-inputWrapper {
2028
2035
  display: flex;
2029
2036
  align-items: stretch;
2030
2037
  gap: var(--space_xs);
2031
2038
  }
2032
- .bds0111Radio-radio {
2039
+ .bds0113Radio-radio {
2033
2040
  flex-shrink: 0;
2034
2041
  margin-block-start: 0.25em;
2035
2042
  width: var(--inputSize);
2036
2043
  height: var(--inputSize);
2044
+ color: var(--radio_color, var(--color_on-bg));
2037
2045
  border: 1px solid currentcolor;
2038
2046
  border-radius: 50%;
2039
2047
  appearance: none;
@@ -2042,11 +2050,11 @@
2042
2050
  position: relative;
2043
2051
  transition: background-color 0.3s ease, border-color 0.3s ease;
2044
2052
  }
2045
- .bds0111Radio-radio:checked {
2053
+ .bds0113Radio-radio:checked {
2046
2054
  background-color: var(--radio_color-active, var(--color_active));
2047
2055
  border-color: var(--radio_color-active, var(--color_active));
2048
2056
  }
2049
- .bds0111Radio-radio:checked::after {
2057
+ .bds0113Radio-radio:checked::after {
2050
2058
  content: "";
2051
2059
  position: absolute;
2052
2060
  left: 0.6em;
@@ -2057,15 +2065,15 @@
2057
2065
  border-width: 0 2px 2px 0;
2058
2066
  transform: rotate(45deg);
2059
2067
  }
2060
- .bds0111Radio-radio:focus {
2068
+ .bds0113Radio-radio:focus {
2061
2069
  outline: none;
2062
2070
  border-color: var(--color_interactive);
2063
2071
  box-shadow: 0 0 0 2px rgb(from var(--color_interactive) r g b / 20%);
2064
2072
  }
2065
- .bds0111Radio-radioError {
2073
+ .bds0113Radio-radioError {
2066
2074
  border-color: var(--color_error);
2067
2075
  }
2068
- .bds0111Radio-radioError:focus {
2076
+ .bds0113Radio-radioError:focus {
2069
2077
  border-color: var(--color_error);
2070
2078
  box-shadow: 0 0 0 2px rgb(from var(--color_error) r g b / 20%);
2071
2079
  }
@@ -2073,16 +2081,16 @@
2073
2081
 
2074
2082
  /* src/components/interaction/form/Select/Select.module.css */
2075
2083
  @layer component {
2076
- .bds0111Select-formGroup {
2084
+ .bds0113Select-formGroup {
2077
2085
  display: flex;
2078
2086
  flex-direction: column;
2079
2087
  }
2080
- .bds0111Select-selectWrapper {
2088
+ .bds0113Select-selectWrapper {
2081
2089
  position: relative;
2082
2090
  display: flex;
2083
2091
  align-items: center;
2084
2092
  }
2085
- .bds0111Select-select {
2093
+ .bds0113Select-select {
2086
2094
  appearance: none;
2087
2095
  width: 100%;
2088
2096
  font-family: var(--font_family--body);
@@ -2092,34 +2100,34 @@
2092
2100
  border: 1px solid var(--select_border-color, currentcolor);
2093
2101
  border-radius: var(--border_radius--xs);
2094
2102
  background-color: var(--select_color_bg, var(--color_bg));
2095
- color: var(--color_on-bg);
2103
+ color: var(--select_color, var(--color_on-bg));
2096
2104
  cursor: pointer;
2097
2105
  transition: var(--animation_transition);
2098
2106
  }
2099
- .bds0111Select-select:focus {
2107
+ .bds0113Select-select:focus {
2100
2108
  --select_border-color: var(--color_interactive);
2101
2109
  outline: none;
2102
2110
  box-shadow: var(--select_focus-ring, 0 0 0 2px rgb(from var(--color_interactive) r g b / 20%));
2103
2111
  }
2104
- .bds0111Select-select:disabled {
2112
+ .bds0113Select-select:disabled {
2105
2113
  opacity: 0.5;
2106
2114
  cursor: not-allowed;
2107
2115
  }
2108
- .bds0111Select-selectError {
2116
+ .bds0113Select-selectError {
2109
2117
  --select_border-color: var(--color_error);
2110
2118
  }
2111
- .bds0111Select-selectError:focus {
2119
+ .bds0113Select-selectError:focus {
2112
2120
  --select_focus-ring: 0 0 0 2px rgb(from var(--color_error) r g b / 20%);
2113
2121
  }
2114
- .bds0111Select-chevron {
2122
+ .bds0113Select-chevron {
2115
2123
  position: absolute;
2116
2124
  inset-inline-end: var(--space_s);
2117
2125
  display: flex;
2118
2126
  align-items: center;
2119
2127
  pointer-events: none;
2120
- color: var(--color_on-bg);
2128
+ color: var(--select_color, var(--color_on-bg));
2121
2129
  }
2122
- .bds0111Select-chevron svg {
2130
+ .bds0113Select-chevron svg {
2123
2131
  width: 1rem;
2124
2132
  height: 1rem;
2125
2133
  }
@@ -2127,25 +2135,26 @@
2127
2135
 
2128
2136
  /* src/components/interaction/form/Slider/Slider.module.css */
2129
2137
  @layer component {
2130
- .bds0111Slider-formGroup {
2138
+ .bds0113Slider-formGroup {
2131
2139
  display: flex;
2132
2140
  flex-direction: column;
2133
2141
  gap: var(--space_xxs);
2134
2142
  }
2135
- .bds0111Slider-labelRow {
2143
+ .bds0113Slider-labelRow {
2136
2144
  display: flex;
2137
2145
  justify-content: space-between;
2138
2146
  align-items: baseline;
2139
2147
  }
2140
- .bds0111Slider-value {
2148
+ .bds0113Slider-value {
2141
2149
  font-size: var(--font_size--body--s);
2142
2150
  font-variant-numeric: tabular-nums;
2143
2151
  color: var(--color_on-bg--subtle);
2144
2152
  }
2145
- .bds0111Slider-slider {
2153
+ .bds0113Slider-slider {
2146
2154
  --slider_fill: 0%;
2147
2155
  --slider_track-height: var(--space_xxs);
2148
2156
  --slider_thumb-size: calc(var(--space_s) * 2);
2157
+ color: var(--slider_color, var(--color_on-bg));
2149
2158
  appearance: none;
2150
2159
  width: 100%;
2151
2160
  height: var(--slider_track-height);
@@ -2160,16 +2169,16 @@
2160
2169
  cursor: pointer;
2161
2170
  transition: var(--animation_transition);
2162
2171
  }
2163
- .bds0111Slider-slider:focus-visible {
2172
+ .bds0113Slider-slider:focus-visible {
2164
2173
  outline: var(--outline_default);
2165
2174
  outline-offset: var(--outline_offset);
2166
2175
  border-radius: 999px;
2167
2176
  }
2168
- .bds0111Slider-slider:disabled {
2177
+ .bds0113Slider-slider:disabled {
2169
2178
  opacity: 0.4;
2170
2179
  cursor: not-allowed;
2171
2180
  }
2172
- .bds0111Slider-slider::-webkit-slider-thumb {
2181
+ .bds0113Slider-slider::-webkit-slider-thumb {
2173
2182
  appearance: none;
2174
2183
  width: var(--slider_thumb-size);
2175
2184
  height: var(--slider_thumb-size);
@@ -2179,7 +2188,7 @@
2179
2188
  transition: var(--animation_transition);
2180
2189
  cursor: pointer;
2181
2190
  }
2182
- .bds0111Slider-slider::-moz-range-thumb {
2191
+ .bds0113Slider-slider::-moz-range-thumb {
2183
2192
  width: var(--slider_thumb-size);
2184
2193
  height: var(--slider_thumb-size);
2185
2194
  border: none;
@@ -2188,7 +2197,7 @@
2188
2197
  box-shadow: var(--shadow_s);
2189
2198
  cursor: pointer;
2190
2199
  }
2191
- .bds0111Slider-sliderError {
2200
+ .bds0113Slider-sliderError {
2192
2201
  background:
2193
2202
  linear-gradient(
2194
2203
  to right,
@@ -2197,16 +2206,16 @@
2197
2206
  var(--color_bg--subtle) var(--slider_fill),
2198
2207
  var(--color_bg--subtle) 100%);
2199
2208
  }
2200
- .bds0111Slider-sliderError::-webkit-slider-thumb {
2209
+ .bds0113Slider-sliderError::-webkit-slider-thumb {
2201
2210
  background-color: var(--color_error);
2202
2211
  }
2203
- .bds0111Slider-sliderError::-moz-range-thumb {
2212
+ .bds0113Slider-sliderError::-moz-range-thumb {
2204
2213
  background-color: var(--color_error);
2205
2214
  }
2206
2215
  @media (prefers-reduced-motion: reduce) {
2207
- .bds0111Slider-slider,
2208
- .bds0111Slider-slider::-webkit-slider-thumb,
2209
- .bds0111Slider-slider::-moz-range-thumb {
2216
+ .bds0113Slider-slider,
2217
+ .bds0113Slider-slider::-webkit-slider-thumb,
2218
+ .bds0113Slider-slider::-moz-range-thumb {
2210
2219
  transition: none;
2211
2220
  }
2212
2221
  }
@@ -2214,7 +2223,7 @@
2214
2223
 
2215
2224
  /* src/components/interaction/form/Switch/Switch.module.css */
2216
2225
  @layer component {
2217
- .bds0111Switch-switchGroup {
2226
+ .bds0113Switch-switchGroup {
2218
2227
  --switch_thumb-size: 1.25em;
2219
2228
  --switch_track-pad: var(--space_xxxs);
2220
2229
  --switch_track-height: calc(var(--switch_thumb-size) + var(--switch_track-pad) * 2);
@@ -2223,24 +2232,25 @@
2223
2232
  --track_active: var(--color_active--subtle);
2224
2233
  --thumb_bg: var(--color_grey);
2225
2234
  --thumb_bg--active: var(--color_active--strong);
2235
+ color: var(--switch_color, var(--color_on-bg));
2226
2236
  display: flex;
2227
2237
  flex-direction: column;
2228
2238
  }
2229
- .bds0111Switch-switchGroup.bds0111Switch---size_small {
2239
+ .bds0113Switch-switchGroup.bds0113Switch---size_small {
2230
2240
  --switch_thumb-size: 1em;
2231
2241
  }
2232
- .bds0111Switch-switchGroup.bds0111Switch---size_medium {
2242
+ .bds0113Switch-switchGroup.bds0113Switch---size_medium {
2233
2243
  --switch_thumb-size: 1.25em;
2234
2244
  }
2235
- .bds0111Switch-switchGroup.bds0111Switch---size_large {
2245
+ .bds0113Switch-switchGroup.bds0113Switch---size_large {
2236
2246
  --switch_thumb-size: 1.5em;
2237
2247
  }
2238
- .bds0111Switch-inputWrapper {
2248
+ .bds0113Switch-inputWrapper {
2239
2249
  display: flex;
2240
2250
  align-items: center;
2241
2251
  gap: var(--space_xs);
2242
2252
  }
2243
- .bds0111Switch-trackWrapper {
2253
+ .bds0113Switch-trackWrapper {
2244
2254
  position: relative;
2245
2255
  display: inline-flex;
2246
2256
  align-items: center;
@@ -2248,7 +2258,7 @@
2248
2258
  width: var(--switch_track-width);
2249
2259
  height: var(--switch_track-height);
2250
2260
  }
2251
- .bds0111Switch-switch {
2261
+ .bds0113Switch-switch {
2252
2262
  position: absolute;
2253
2263
  inset: 0;
2254
2264
  appearance: none;
@@ -2259,10 +2269,10 @@
2259
2269
  cursor: pointer;
2260
2270
  z-index: 1;
2261
2271
  }
2262
- .bds0111Switch-switch:disabled {
2272
+ .bds0113Switch-switch:disabled {
2263
2273
  cursor: not-allowed;
2264
2274
  }
2265
- .bds0111Switch-track {
2275
+ .bds0113Switch-track {
2266
2276
  display: inline-flex;
2267
2277
  align-items: center;
2268
2278
  width: var(--switch_track-width);
@@ -2275,7 +2285,7 @@
2275
2285
  outline: 1px solid var(--thumb_bg);
2276
2286
  outline-offset: var(--outline_offset);
2277
2287
  }
2278
- .bds0111Switch-thumb {
2288
+ .bds0113Switch-thumb {
2279
2289
  display: block;
2280
2290
  width: var(--switch_thumb-size);
2281
2291
  height: var(--switch_thumb-size);
@@ -2285,28 +2295,28 @@
2285
2295
  transition: var(--animation_transition);
2286
2296
  transform: translateX(0);
2287
2297
  }
2288
- .bds0111Switch-switch.bds0111Switch-switchError + .bds0111Switch-track {
2298
+ .bds0113Switch-switch.bds0113Switch-switchError + .bds0113Switch-track {
2289
2299
  outline: 1px solid var(--color_error);
2290
2300
  }
2291
- .bds0111Switch-switch:checked + .bds0111Switch-track {
2301
+ .bds0113Switch-switch:checked + .bds0113Switch-track {
2292
2302
  background-color: var(--track_active);
2293
2303
  outline-color: var(--thumb_bg--active);
2294
2304
  }
2295
- .bds0111Switch-switch:checked + .bds0111Switch-track .bds0111Switch-thumb {
2305
+ .bds0113Switch-switch:checked + .bds0113Switch-track .bds0113Switch-thumb {
2296
2306
  background-color: var(--thumb_bg--active);
2297
2307
  transform: translateX(var(--switch_thumb-size));
2298
2308
  }
2299
- .bds0111Switch-switch:focus-visible + .bds0111Switch-track {
2309
+ .bds0113Switch-switch:focus-visible + .bds0113Switch-track {
2300
2310
  outline: var(--outline_default);
2301
2311
  outline-offset: var(--outline_offset);
2302
2312
  border-radius: 999px;
2303
2313
  }
2304
- .bds0111Switch-switch:disabled + .bds0111Switch-track {
2314
+ .bds0113Switch-switch:disabled + .bds0113Switch-track {
2305
2315
  opacity: 0.4;
2306
2316
  }
2307
2317
  @media (prefers-reduced-motion: reduce) {
2308
- .bds0111Switch-track,
2309
- .bds0111Switch-thumb {
2318
+ .bds0113Switch-track,
2319
+ .bds0113Switch-thumb {
2310
2320
  transition: none;
2311
2321
  }
2312
2322
  }
@@ -2314,11 +2324,11 @@
2314
2324
 
2315
2325
  /* src/components/interaction/form/Textarea/Textarea.module.css */
2316
2326
  @layer component {
2317
- .bds0111Textarea-formGroup {
2327
+ .bds0113Textarea-formGroup {
2318
2328
  display: flex;
2319
2329
  flex-direction: column;
2320
2330
  }
2321
- .bds0111Textarea-textarea {
2331
+ .bds0113Textarea-textarea {
2322
2332
  font-family: var(--font_family--body);
2323
2333
  font-size: var(--font_size--body);
2324
2334
  line-height: var(--font_line-height--body);
@@ -2326,74 +2336,74 @@
2326
2336
  border: 1px solid var(--textarea_border-color, currentcolor);
2327
2337
  border-radius: var(--border_radius--xs);
2328
2338
  background-color: var(--textarea_color_bg, var(--color_bg));
2329
- color: var(--color_on-bg);
2339
+ color: var(--textarea_color, var(--color_on-bg));
2330
2340
  resize: vertical;
2331
2341
  min-height: calc(var(--space_m) * 5);
2332
2342
  transition: var(--animation_transition);
2333
2343
  }
2334
- .bds0111Textarea-textarea:focus {
2344
+ .bds0113Textarea-textarea:focus {
2335
2345
  --textarea_border-color: var(--color_interactive);
2336
2346
  outline: none;
2337
2347
  box-shadow: var(--textarea_focus-ring, 0 0 0 2px rgb(from var(--color_interactive) r g b / 20%));
2338
2348
  }
2339
- .bds0111Textarea-textarea:disabled {
2349
+ .bds0113Textarea-textarea:disabled {
2340
2350
  opacity: 0.5;
2341
2351
  cursor: not-allowed;
2342
2352
  resize: none;
2343
2353
  }
2344
- .bds0111Textarea-textareaError {
2354
+ .bds0113Textarea-textareaError {
2345
2355
  --textarea_border-color: var(--color_error);
2346
2356
  }
2347
- .bds0111Textarea-textareaError:focus {
2357
+ .bds0113Textarea-textareaError:focus {
2348
2358
  --textarea_focus-ring: 0 0 0 2px rgb(from var(--color_error) r g b / 20%);
2349
2359
  }
2350
2360
  }
2351
2361
 
2352
2362
  /* src/components/layout/ButtonGroup/ButtonGroup.module.css */
2353
2363
  @layer component {
2354
- .bds0111ButtonGroup-buttonGroup {
2364
+ .bds0113ButtonGroup-buttonGroup {
2355
2365
  container-type: inline-size;
2356
2366
  container-name: button-group;
2357
2367
  grid-column: var(--grid_span-100);
2358
2368
  }
2359
- .bds0111ButtonGroup-buttonGroup .bds0111ButtonGroup-container {
2369
+ .bds0113ButtonGroup-buttonGroup .bds0113ButtonGroup-container {
2360
2370
  position: relative;
2361
2371
  display: flex;
2362
2372
  flex-direction: column-reverse;
2363
2373
  gap: var(--space_l);
2364
2374
  align-items: center;
2365
2375
  }
2366
- .bds0111ButtonGroup-buttonGroup.bds0111ButtonGroup---variant__card .bds0111ButtonGroup-container {
2376
+ .bds0113ButtonGroup-buttonGroup.bds0113ButtonGroup---variant__card .bds0113ButtonGroup-container {
2367
2377
  align-items: stretch;
2368
2378
  }
2369
- .bds0111ButtonGroup-buttonGroup.bds0111ButtonGroup---variant__flow .bds0111ButtonGroup-container,
2370
- .bds0111ButtonGroup-buttonGroup.bds0111ButtonGroup---variant__modal .bds0111ButtonGroup-container {
2379
+ .bds0113ButtonGroup-buttonGroup.bds0113ButtonGroup---variant__flow .bds0113ButtonGroup-container,
2380
+ .bds0113ButtonGroup-buttonGroup.bds0113ButtonGroup---variant__modal .bds0113ButtonGroup-container {
2371
2381
  align-items: center;
2372
2382
  }
2373
- .bds0111ButtonGroup-buttonGroup.bds0111ButtonGroup---variant__content .bds0111ButtonGroup-container {
2383
+ .bds0113ButtonGroup-buttonGroup.bds0113ButtonGroup---variant__content .bds0113ButtonGroup-container {
2374
2384
  align-items: flex-start;
2375
2385
  }
2376
2386
  @supports (contain: inline-size) {
2377
2387
  @container button-group (min-width: 30rem) {
2378
- .bds0111ButtonGroup-buttonGroup .bds0111ButtonGroup-container {
2388
+ .bds0113ButtonGroup-buttonGroup .bds0113ButtonGroup-container {
2379
2389
  flex-direction: row;
2380
2390
  justify-content: space-between;
2381
2391
  }
2382
- .bds0111ButtonGroup-buttonGroup.bds0111ButtonGroup---variant__modal .bds0111ButtonGroup-container > :first-child:last-child,
2383
- .bds0111ButtonGroup-buttonGroup.bds0111ButtonGroup---variant__flow .bds0111ButtonGroup-container > :first-child:last-child {
2392
+ .bds0113ButtonGroup-buttonGroup.bds0113ButtonGroup---variant__modal .bds0113ButtonGroup-container > :first-child:last-child,
2393
+ .bds0113ButtonGroup-buttonGroup.bds0113ButtonGroup---variant__flow .bds0113ButtonGroup-container > :first-child:last-child {
2384
2394
  margin-inline-start: auto;
2385
2395
  }
2386
- .bds0111ButtonGroup-buttonGroup.bds0111ButtonGroup---variant__card .bds0111ButtonGroup-container {
2396
+ .bds0113ButtonGroup-buttonGroup.bds0113ButtonGroup---variant__card .bds0113ButtonGroup-container {
2387
2397
  justify-content: center;
2388
2398
  }
2389
- .bds0111ButtonGroup-buttonGroup.bds0111ButtonGroup---variant__modal .bds0111ButtonGroup-container {
2399
+ .bds0113ButtonGroup-buttonGroup.bds0113ButtonGroup---variant__modal .bds0113ButtonGroup-container {
2390
2400
  justify-content: flex-end;
2391
2401
  }
2392
- .bds0111ButtonGroup-buttonGroup.bds0111ButtonGroup---variant__content .bds0111ButtonGroup-container {
2402
+ .bds0113ButtonGroup-buttonGroup.bds0113ButtonGroup---variant__content .bds0113ButtonGroup-container {
2393
2403
  justify-content: flex-start;
2394
2404
  align-items: center;
2395
2405
  }
2396
- .bds0111ButtonGroup-buttonGroup.bds0111ButtonGroup---variant__grid .bds0111ButtonGroup-container {
2406
+ .bds0113ButtonGroup-buttonGroup.bds0113ButtonGroup---variant__grid .bds0113ButtonGroup-container {
2397
2407
  justify-content: center;
2398
2408
  }
2399
2409
  }
@@ -2402,59 +2412,59 @@
2402
2412
 
2403
2413
  /* src/components/layout/Card/Card.module.css */
2404
2414
  @layer component {
2405
- .bds0111Card-card {
2415
+ .bds0113Card-card {
2406
2416
  background-color: var(--card_color, var(--color_bg));
2407
2417
  color: var(--card_on-color, var(--color_on-bg));
2408
2418
  border-radius: var(--border_radius--m);
2409
2419
  transition: all 0.3s ease;
2410
2420
  position: relative;
2411
2421
  }
2412
- .bds0111Card-card.bds0111Card---default {
2422
+ .bds0113Card-card.bds0113Card---default {
2413
2423
  box-shadow: var(--shadow_s);
2414
2424
  }
2415
- .bds0111Card-card.bds0111Card---elevated {
2425
+ .bds0113Card-card.bds0113Card---elevated {
2416
2426
  box-shadow: var(--shadow_m);
2417
2427
  }
2418
- .bds0111Card-card.bds0111Card---outlined {
2428
+ .bds0113Card-card.bds0113Card---outlined {
2419
2429
  border: 1px solid currentcolor;
2420
2430
  box-shadow: var(--shadow_s);
2421
2431
  }
2422
- .bds0111Card-card.bds0111Card---clickable {
2432
+ .bds0113Card-card.bds0113Card---clickable {
2423
2433
  cursor: pointer;
2424
2434
  }
2425
- .bds0111Card-card.bds0111Card---padding-none {
2435
+ .bds0113Card-card.bds0113Card---padding-none {
2426
2436
  padding: 0;
2427
2437
  }
2428
- .bds0111Card-card.bds0111Card---padding-small {
2438
+ .bds0113Card-card.bds0113Card---padding-small {
2429
2439
  padding: var(--space_s);
2430
2440
  }
2431
- .bds0111Card-card.bds0111Card---padding-medium {
2441
+ .bds0113Card-card.bds0113Card---padding-medium {
2432
2442
  padding: var(--space_m);
2433
2443
  }
2434
- .bds0111Card-card.bds0111Card---padding-large {
2444
+ .bds0113Card-card.bds0113Card---padding-large {
2435
2445
  padding: var(--space_l);
2436
2446
  }
2437
- .bds0111Card-card.bds0111Card---text-start {
2447
+ .bds0113Card-card.bds0113Card---text-start {
2438
2448
  text-align: left;
2439
2449
  }
2440
- .bds0111Card-card.bds0111Card---text-center {
2450
+ .bds0113Card-card.bds0113Card---text-center {
2441
2451
  text-align: center;
2442
2452
  }
2443
- .bds0111Card-card.bds0111Card---text-end {
2453
+ .bds0113Card-card.bds0113Card---text-end {
2444
2454
  text-align: right;
2445
2455
  }
2446
2456
  @media (hover: hover) and (pointer: fine) {
2447
- .bds0111Card-card.bds0111Card---clickable:hover {
2457
+ .bds0113Card-card.bds0113Card---clickable:hover {
2448
2458
  transform: translateY(-2px);
2449
2459
  box-shadow: var(--shadow_xl);
2450
2460
  }
2451
- .bds0111Card-card.bds0111Card---default:hover {
2461
+ .bds0113Card-card.bds0113Card---default:hover {
2452
2462
  box-shadow: var(--shadow_m);
2453
2463
  }
2454
- .bds0111Card-card.bds0111Card---elevated:hover {
2464
+ .bds0113Card-card.bds0113Card---elevated:hover {
2455
2465
  box-shadow: var(--shadow_2xl);
2456
2466
  }
2457
- .bds0111Card-card.bds0111Card---outlined:hover {
2467
+ .bds0113Card-card.bds0113Card---outlined:hover {
2458
2468
  box-shadow: var(--shadow_s);
2459
2469
  }
2460
2470
  }
@@ -2462,60 +2472,60 @@
2462
2472
 
2463
2473
  /* src/components/layout/SectionHeader/SectionHeader.module.css */
2464
2474
  @layer component {
2465
- .bds0111SectionHeader-sectionHeader {
2475
+ .bds0113SectionHeader-sectionHeader {
2466
2476
  display: flex;
2467
2477
  flex-direction: column;
2468
2478
  gap: var(--space_m);
2469
2479
  grid-column: var(--grid_span-100);
2470
2480
  }
2471
- .bds0111SectionHeader-title {
2481
+ .bds0113SectionHeader-title {
2472
2482
  color: var(--sectionHeader-title-color, var(--color_on-bg));
2473
2483
  margin: 0;
2474
2484
  font-family: var(--font_family--body);
2475
2485
  }
2476
- .bds0111SectionHeader-subtitle {
2486
+ .bds0113SectionHeader-subtitle {
2477
2487
  color: var(--sectionHeader_subtitle-color, var(--color_grey--strong));
2478
2488
  margin: 0;
2479
2489
  font-family: var(--font_family--body);
2480
2490
  font-weight: var(--font_weight--medium);
2481
2491
  }
2482
- .bds0111SectionHeader-sectionHeader.bds0111SectionHeader---start {
2492
+ .bds0113SectionHeader-sectionHeader.bds0113SectionHeader---start {
2483
2493
  align-items: flex-start;
2484
2494
  text-align: left;
2485
2495
  }
2486
- .bds0111SectionHeader-sectionHeader.bds0111SectionHeader---center {
2496
+ .bds0113SectionHeader-sectionHeader.bds0113SectionHeader---center {
2487
2497
  align-items: center;
2488
2498
  text-align: center;
2489
2499
  }
2490
- .bds0111SectionHeader-sectionHeader.bds0111SectionHeader---end {
2500
+ .bds0113SectionHeader-sectionHeader.bds0113SectionHeader---end {
2491
2501
  align-items: flex-end;
2492
2502
  text-align: right;
2493
2503
  }
2494
- .bds0111SectionHeader-sectionHeader.bds0111SectionHeader---small .bds0111SectionHeader-title {
2504
+ .bds0113SectionHeader-sectionHeader.bds0113SectionHeader---small .bds0113SectionHeader-title {
2495
2505
  font-size: var(--font_size--heading-1);
2496
2506
  line-height: var(--font_line-height--heading);
2497
2507
  font-weight: var(--font_weight--bold);
2498
2508
  }
2499
- .bds0111SectionHeader-sectionHeader.bds0111SectionHeader---small .bds0111SectionHeader-subtitle {
2509
+ .bds0113SectionHeader-sectionHeader.bds0113SectionHeader---small .bds0113SectionHeader-subtitle {
2500
2510
  font-size: var(--font_size--body);
2501
2511
  line-height: 1.4;
2502
2512
  }
2503
- .bds0111SectionHeader-sectionHeader.bds0111SectionHeader---medium .bds0111SectionHeader-title {
2513
+ .bds0113SectionHeader-sectionHeader.bds0113SectionHeader---medium .bds0113SectionHeader-title {
2504
2514
  font-size: var(--font_size--display);
2505
2515
  line-height: var(--font_line-height--display);
2506
2516
  font-weight: var(--font_weight--bold);
2507
2517
  }
2508
- .bds0111SectionHeader-sectionHeader.bds0111SectionHeader---medium .bds0111SectionHeader-subtitle {
2518
+ .bds0113SectionHeader-sectionHeader.bds0113SectionHeader---medium .bds0113SectionHeader-subtitle {
2509
2519
  font-size: var(--font_size--heading-3);
2510
2520
  line-height: 1.3;
2511
2521
  }
2512
- .bds0111SectionHeader-sectionHeader.bds0111SectionHeader---large .bds0111SectionHeader-title {
2522
+ .bds0113SectionHeader-sectionHeader.bds0113SectionHeader---large .bds0113SectionHeader-title {
2513
2523
  font-size: var(--font_size--display);
2514
2524
  line-height: var(--font_line-height--display);
2515
2525
  font-weight: var(--font_weight--bold);
2516
2526
  letter-spacing: var(--font_tracking--tight);
2517
2527
  }
2518
- .bds0111SectionHeader-sectionHeader.bds0111SectionHeader---large .bds0111SectionHeader-subtitle {
2528
+ .bds0113SectionHeader-sectionHeader.bds0113SectionHeader---large .bds0113SectionHeader-subtitle {
2519
2529
  font-size: var(--font_size--heading-2);
2520
2530
  line-height: 1.3;
2521
2531
  font-weight: var(--font_weight--medium);
@@ -2524,7 +2534,7 @@
2524
2534
 
2525
2535
  /* src/components/layout/IconWrapper/IconWrapper.module.css */
2526
2536
  @layer component {
2527
- .bds0111IconWrapper-wrapper {
2537
+ .bds0113IconWrapper-wrapper {
2528
2538
  width: 2em;
2529
2539
  height: 2em;
2530
2540
  font-size: 3em;
@@ -2539,7 +2549,7 @@
2539
2549
  position: relative;
2540
2550
  transition: var(--animation_transition);
2541
2551
  }
2542
- .bds0111IconWrapper-wrapper svg {
2552
+ .bds0113IconWrapper-wrapper svg {
2543
2553
  fill: currentcolor;
2544
2554
  }
2545
2555
  }