@boostdev/design-system-components 0.1.8 → 0.1.10

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 (28) hide show
  1. package/AGENTS.md +56 -0
  2. package/README.md +40 -1
  3. package/dist/client.cjs +46 -46
  4. package/dist/client.css +453 -465
  5. package/dist/client.d.cts +2 -2
  6. package/dist/client.d.ts +2 -2
  7. package/dist/client.js +46 -46
  8. package/dist/index.cjs +46 -46
  9. package/dist/index.css +453 -465
  10. package/dist/index.d.cts +2 -2
  11. package/dist/index.d.ts +2 -2
  12. package/dist/index.js +46 -46
  13. package/package.json +2 -2
  14. package/src/components/interaction/Button/Button.tsx +2 -2
  15. package/src/components/interaction/form/Checkbox/Checkbox.module.css +5 -6
  16. package/src/components/interaction/form/Combobox/Combobox.module.css +2 -5
  17. package/src/components/interaction/form/FileInput/FileInput.module.css +5 -5
  18. package/src/components/interaction/form/FormInput/FormInput.module.css +3 -8
  19. package/src/components/interaction/form/NumberInput/NumberInput.module.css +5 -6
  20. package/src/components/interaction/form/Radio/Radio.module.css +5 -6
  21. package/src/components/interaction/form/Select/Select.module.css +2 -5
  22. package/src/components/interaction/form/Slider/Slider.module.css +4 -4
  23. package/src/components/interaction/form/Switch/Switch.module.css +2 -2
  24. package/src/components/interaction/form/Textarea/Textarea.module.css +2 -5
  25. package/src/components/ui/Alert/Alert.module.css +3 -3
  26. package/src/components/ui/NotificationBanner/NotificationBanner.module.css +3 -3
  27. package/src/components/ui/Progress/Progress.module.css +1 -1
  28. package/src/components/ui/ProgressCircle/ProgressCircle.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
- .bds018-accordion {
3
+ .bds0110Accordion-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
- .bds018-item {
10
+ .bds0110Accordion-item {
11
11
  border-bottom: 1px solid var(--color_bg--subtle);
12
12
  }
13
- .bds018-item:last-child {
13
+ .bds0110Accordion-item:last-child {
14
14
  border-bottom: none;
15
15
  }
16
- .bds018-heading {
16
+ .bds0110Accordion-heading {
17
17
  margin: 0;
18
18
  }
19
- .bds018-trigger {
19
+ .bds0110Accordion-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
- .bds018-trigger:disabled {
34
+ .bds0110Accordion-trigger:disabled {
35
35
  opacity: 0.4;
36
36
  cursor: not-allowed;
37
37
  }
38
- .bds018-trigger:focus-visible {
38
+ .bds0110Accordion-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
- .bds018-trigger:not(:disabled):hover {
44
+ .bds0110Accordion-trigger:not(:disabled):hover {
45
45
  background-color: var(--color_bg--subtle);
46
46
  }
47
47
  }
48
- .bds018-triggerLabel {
48
+ .bds0110Accordion-triggerLabel {
49
49
  flex: 1;
50
50
  text-align: start;
51
51
  }
52
- .bds018-chevron {
52
+ .bds0110Accordion-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
- .bds018-item.bds018---open .bds018-chevron {
58
+ .bds0110Accordion-item.bds0110Accordion---open .bds0110Accordion-chevron {
59
59
  transform: rotate(180deg);
60
60
  }
61
- .bds018-panel {
61
+ .bds0110Accordion-panel {
62
62
  overflow: hidden;
63
63
  }
64
- .bds018-panelContent {
64
+ .bds0110Accordion-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
- .bds018-chevron {
71
+ .bds0110Accordion-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
- .bds018-alert {
79
+ .bds0110Alert-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
- .bds018---variant_info {
94
+ .bds0110Alert---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
- .bds018---variant_success {
100
- --alert_bg: var(--color_green--subtle);
101
- --alert_text: var(--color_on-green--subtle);
102
- --alert_border: var(--color_green);
99
+ .bds0110Alert---variant_success {
100
+ --alert_bg: var(--color_success--subtle);
101
+ --alert_text: var(--color_on-success--subtle);
102
+ --alert_border: var(--color_success);
103
103
  }
104
- .bds018---variant_warning {
104
+ .bds0110Alert---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
- .bds018---variant_error {
109
+ .bds0110Alert---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
- .bds018-icon {
114
+ .bds0110Alert-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
- .bds018-content {
120
+ .bds0110Alert-content {
121
121
  flex: 1;
122
122
  display: flex;
123
123
  flex-direction: column;
124
124
  gap: var(--space_xxs);
125
125
  }
126
- .bds018-title {
126
+ .bds0110Alert-title {
127
127
  font-weight: var(--font_weight--semibold);
128
128
  font-size: var(--font_size--body);
129
129
  }
130
- .bds018-dismiss {
130
+ .bds0110Alert-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
- .bds018-dismiss svg {
142
+ .bds0110Alert-dismiss svg {
143
143
  width: 1rem;
144
144
  height: 1rem;
145
145
  }
146
- .bds018-dismiss:focus-visible {
146
+ .bds0110Alert-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
- .bds018-dismiss:hover {
151
+ .bds0110Alert-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
- .bds018-avatar {
159
+ .bds0110Avatar-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
- .bds018-avatar.bds018---fallback {
172
+ .bds0110Avatar-avatar.bds0110Avatar---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
- .bds018-avatar.bds018---size_small {
177
+ .bds0110Avatar-avatar.bds0110Avatar---size_small {
178
178
  --avatar_size: 2em;
179
179
  }
180
- .bds018-avatar.bds018---size_medium {
180
+ .bds0110Avatar-avatar.bds0110Avatar---size_medium {
181
181
  --avatar_size: 3em;
182
182
  }
183
- .bds018-avatar.bds018---size_large {
183
+ .bds0110Avatar-avatar.bds0110Avatar---size_large {
184
184
  --avatar_size: 4.5em;
185
185
  }
186
- .bds018-image {
186
+ .bds0110Avatar-image {
187
187
  width: 100%;
188
188
  height: 100%;
189
189
  object-fit: cover;
190
190
  display: block;
191
191
  }
192
- .bds018-initials {
192
+ .bds0110Avatar-initials {
193
193
  line-height: 1;
194
194
  user-select: none;
195
195
  font-size: var(--font_size--body);
196
196
  }
197
- .bds018-avatar.bds018---size_small .bds018-initials {
197
+ .bds0110Avatar-avatar.bds0110Avatar---size_small .bds0110Avatar-initials {
198
198
  font-size: var(--font_size--body--s);
199
199
  }
200
- .bds018-avatar.bds018---size_large .bds018-initials {
200
+ .bds0110Avatar-avatar.bds0110Avatar---size_large .bds0110Avatar-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
- .bds018-badge {
207
+ .bds0110Badge-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
- .bds018---variant_primary {
224
+ .bds0110Badge---variant_primary {
225
225
  --badge_bg: var(--color_interactive);
226
226
  --badge_text: var(--color_on-interactive);
227
227
  }
228
- .bds018---variant_secondary {
228
+ .bds0110Badge---variant_secondary {
229
229
  --badge_bg: var(--color_bg);
230
230
  --badge_text: var(--color_on-bg);
231
231
  }
232
- .bds018---variant_success {
232
+ .bds0110Badge---variant_success {
233
233
  --badge_bg: var(--color_success);
234
234
  --badge_text: var(--color_on-success);
235
235
  }
236
- .bds018---variant_error {
236
+ .bds0110Badge---variant_error {
237
237
  --badge_bg: var(--color_error);
238
238
  --badge_text: var(--color_on-error);
239
239
  }
240
- .bds018---variant_warning {
240
+ .bds0110Badge---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
- .bds018-breadcrumb {
248
+ .bds0110Breadcrumb-breadcrumb {
249
249
  font-size: var(--font_size--body--s);
250
250
  }
251
- .bds018-list {
251
+ .bds0110Breadcrumb-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
- .bds018-item {
260
+ .bds0110Breadcrumb-item {
261
261
  display: flex;
262
262
  align-items: center;
263
263
  gap: var(--space_xxs);
264
264
  }
265
- .bds018-link {
265
+ .bds0110Breadcrumb-link {
266
266
  color: var(--color_interactive);
267
267
  text-decoration: none;
268
268
  transition: var(--animation_transition);
269
269
  }
270
- .bds018-link:focus-visible {
270
+ .bds0110Breadcrumb-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
- .bds018-link:hover {
276
+ .bds0110Breadcrumb-link:hover {
277
277
  text-decoration: underline;
278
278
  text-underline-offset: 0.2em;
279
279
  }
280
280
  }
281
- .bds018-separator {
281
+ .bds0110Breadcrumb-separator {
282
282
  color: var(--color_on-bg--subtle);
283
283
  user-select: none;
284
284
  }
285
- .bds018-current {
285
+ .bds0110Breadcrumb-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
- .bds018-calendar {
293
+ .bds0110Calendar-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
- .bds018-header {
304
+ .bds0110Calendar-header {
305
305
  display: flex;
306
306
  align-items: center;
307
307
  justify-content: space-between;
308
308
  }
309
- .bds018-monthYear {
309
+ .bds0110Calendar-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
- .bds018-navBtn {
314
+ .bds0110Calendar-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
- .bds018-navBtn svg {
326
+ .bds0110Calendar-navBtn svg {
327
327
  width: 1rem;
328
328
  height: 1rem;
329
329
  }
330
- .bds018-navBtn:focus-visible {
330
+ .bds0110Calendar-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
- .bds018-navBtn:hover {
335
+ .bds0110Calendar-navBtn:hover {
336
336
  background-color: var(--color_bg--subtle);
337
337
  }
338
338
  }
339
- .bds018-grid {
339
+ .bds0110Calendar-grid {
340
340
  border-collapse: collapse;
341
341
  width: 100%;
342
342
  table-layout: fixed;
343
343
  }
344
- .bds018-weekday {
344
+ .bds0110Calendar-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
- .bds018-empty {
351
+ .bds0110Calendar-empty {
352
352
  padding: 0;
353
353
  }
354
- .bds018-day {
354
+ .bds0110Calendar-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
- .bds018-day:focus-visible {
368
+ .bds0110Calendar-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
- .bds018-day:not(.bds018-disabled, .bds018-selected):hover {
373
+ .bds0110Calendar-day:not(.bds0110Calendar-disabled, .bds0110Calendar-selected):hover {
374
374
  background-color: var(--color_bg--subtle);
375
375
  }
376
376
  }
377
- .bds018-today {
377
+ .bds0110Calendar-today {
378
378
  border: 2px solid var(--color_interactive);
379
379
  font-weight: var(--font_weight--semibold);
380
380
  }
381
- .bds018-selected {
381
+ .bds0110Calendar-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
- .bds018-disabled {
386
+ .bds0110Calendar-disabled {
387
387
  opacity: 0.35;
388
388
  cursor: not-allowed;
389
389
  }
390
390
  @media (prefers-reduced-motion: reduce) {
391
- .bds018-day {
391
+ .bds0110Calendar-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
- .bds018-carousel {
399
+ .bds0110Carousel-carousel {
400
400
  position: relative;
401
401
  display: flex;
402
402
  align-items: center;
403
403
  gap: var(--space_xs);
404
404
  }
405
- .bds018-track {
405
+ .bds0110Carousel-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
- .bds018-track::-webkit-scrollbar {
414
+ .bds0110Carousel-track::-webkit-scrollbar {
415
415
  display: none;
416
416
  }
417
- .bds018-slide {
417
+ .bds0110Carousel-slide {
418
418
  scroll-snap-align: start;
419
419
  flex-shrink: 0;
420
420
  }
421
- .bds018-navBtn {
421
+ .bds0110Carousel-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
- .bds018-navBtn svg {
437
+ .bds0110Carousel-navBtn svg {
438
438
  width: 1.25rem;
439
439
  height: 1.25rem;
440
440
  }
441
- .bds018-navBtn:focus-visible {
441
+ .bds0110Carousel-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
- .bds018-navBtn:hover {
446
+ .bds0110Carousel-navBtn:hover {
447
447
  background-color: var(--color_bg--subtle);
448
448
  }
449
449
  }
450
450
  @media (prefers-reduced-motion: reduce) {
451
- .bds018-track {
451
+ .bds0110Carousel-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
- .bds018-list {
459
+ .bds0110DescriptionList-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
- .bds018-group {
468
+ .bds0110DescriptionList-group {
469
469
  display: flex;
470
470
  flex-direction: column;
471
471
  gap: var(--space_xxs);
472
472
  }
473
- .bds018-term {
473
+ .bds0110DescriptionList-term {
474
474
  font-weight: var(--font_weight--semibold);
475
475
  color: var(--color_on-bg);
476
476
  }
477
- .bds018-details {
477
+ .bds0110DescriptionList-details {
478
478
  margin: 0;
479
479
  color: var(--color_on-bg--muted);
480
480
  }
481
- .bds018---layout_inline .bds018-group {
481
+ .bds0110DescriptionList---layout_inline .bds0110DescriptionList-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
- .bds018---layout_inline .bds018-term {
487
+ .bds0110DescriptionList---layout_inline .bds0110DescriptionList-term {
488
488
  grid-column: 1;
489
489
  }
490
- .bds018---layout_inline .bds018-details {
490
+ .bds0110DescriptionList---layout_inline .bds0110DescriptionList-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
- .bds018-link {
497
+ .bds0110Link-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
- .bds018-link:focus-visible {
506
+ .bds0110Link-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
- .bds018-link:hover {
512
+ .bds0110Link-link:hover {
513
513
  --link_color: var(--link_color-hover);
514
514
  }
515
515
  }
516
- .bds018---variant_default {
516
+ .bds0110Link---variant_default {
517
517
  --link_color: var(--color_interactive);
518
518
  --link_color-hover: var(--color_blue--strong);
519
519
  }
520
- .bds018---variant_subtle {
520
+ .bds0110Link---variant_subtle {
521
521
  --link_color: var(--color_on-bg);
522
522
  --link_color-hover: var(--color_interactive);
523
523
  }
524
- .bds018---variant_standalone {
524
+ .bds0110Link---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
- .bds018---variant_standalone:hover {
534
+ .bds0110Link---variant_standalone:hover {
535
535
  text-decoration: underline;
536
536
  text-underline-offset: 0.2em;
537
537
  }
538
538
  }
539
- .bds018-externalLabel {
539
+ .bds0110Link-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
- .bds018-loading {
554
+ .bds0110Loading-loading {
555
555
  display: flex;
556
556
  justify-content: center;
557
557
  align-items: center;
558
558
  }
559
- .bds018-spinner {
559
+ .bds0110Loading-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
- .bds018---size_small .bds018-spinner {
567
+ .bds0110Loading---size_small .bds0110Loading-spinner {
568
568
  width: 1.5em;
569
569
  height: 1.5em;
570
570
  border-width: 2px;
571
571
  }
572
- .bds018---size_large .bds018-spinner {
572
+ .bds0110Loading---size_large .bds0110Loading-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
- .bds018-banner {
589
+ .bds0110NotificationBanner-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
- .bds018---variant_info {
604
+ .bds0110NotificationBanner---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
- .bds018---variant_success {
610
- --banner_bg: var(--color_green--subtle);
611
- --banner_text: var(--color_on-green--subtle);
612
- --banner_border: var(--color_green);
609
+ .bds0110NotificationBanner---variant_success {
610
+ --banner_bg: var(--color_success--subtle);
611
+ --banner_text: var(--color_on-success--subtle);
612
+ --banner_border: var(--color_success);
613
613
  }
614
- .bds018---variant_warning {
614
+ .bds0110NotificationBanner---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
- .bds018---variant_error {
619
+ .bds0110NotificationBanner---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
- .bds018-content {
624
+ .bds0110NotificationBanner-content {
625
625
  flex: 1;
626
626
  }
627
- .bds018-action {
627
+ .bds0110NotificationBanner-action {
628
628
  flex-shrink: 0;
629
629
  }
630
- .bds018-dismiss {
630
+ .bds0110NotificationBanner-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
- .bds018-dismiss svg {
642
+ .bds0110NotificationBanner-dismiss svg {
643
643
  width: 1rem;
644
644
  height: 1rem;
645
645
  }
646
- .bds018-dismiss:focus-visible {
646
+ .bds0110NotificationBanner-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
- .bds018-dismiss:hover {
651
+ .bds0110NotificationBanner-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
- .bds018-pagination {
659
+ .bds0110Pagination-pagination {
660
660
  display: flex;
661
661
  justify-content: center;
662
662
  }
663
- .bds018-list {
663
+ .bds0110Pagination-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
- .bds018-button {
671
+ .bds0110Pagination-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
- .bds018-button:disabled {
693
+ .bds0110Pagination-button:disabled {
694
694
  opacity: 0.4;
695
695
  cursor: not-allowed;
696
696
  }
697
- .bds018-button:focus-visible {
697
+ .bds0110Pagination-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
- .bds018-button:not(:disabled, .bds018---active):hover {
702
+ .bds0110Pagination-button:not(:disabled, .bds0110Pagination---active):hover {
703
703
  --btn_bg: var(--color_bg--subtle);
704
704
  --btn_color: var(--color_interactive);
705
705
  }
706
706
  }
707
- .bds018-button.bds018---active {
707
+ .bds0110Pagination-button.bds0110Pagination---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
- .bds018-button.bds018---nav svg {
712
+ .bds0110Pagination-button.bds0110Pagination---nav svg {
713
713
  width: 1rem;
714
714
  height: 1rem;
715
715
  }
716
- .bds018-ellipsis {
716
+ .bds0110Pagination-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
- .bds018-container {
730
+ .bds0110Progress-container {
731
731
  display: flex;
732
732
  flex-direction: column;
733
733
  gap: var(--space_xxs);
734
734
  width: 100%;
735
735
  }
736
- .bds018-labelRow {
736
+ .bds0110Progress-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
- .bds018-label {
743
+ .bds0110Progress-label {
744
744
  font-weight: var(--font_weight--semibold);
745
745
  }
746
- .bds018-value {
746
+ .bds0110Progress-value {
747
747
  font-variant-numeric: tabular-nums;
748
748
  }
749
- .bds018-track {
749
+ .bds0110Progress-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
- .bds018-track.bds018---size_small {
757
+ .bds0110Progress-track.bds0110Progress---size_small {
758
758
  --progress_height: var(--space_xxs);
759
759
  }
760
- .bds018-track.bds018---size_medium {
760
+ .bds0110Progress-track.bds0110Progress---size_medium {
761
761
  --progress_height: var(--space_xs);
762
762
  }
763
- .bds018-track.bds018---size_large {
763
+ .bds0110Progress-track.bds0110Progress---size_large {
764
764
  --progress_height: var(--space_s);
765
765
  }
766
- .bds018-fill {
766
+ .bds0110Progress-fill {
767
767
  height: 100%;
768
- background-color: var(--color_green);
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
- .bds018-fill {
773
+ .bds0110Progress-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
- .bds018-wrapper {
781
+ .bds0110ProgressCircle-wrapper {
782
782
  position: relative;
783
783
  display: inline-flex;
784
784
  align-items: center;
785
785
  justify-content: center;
786
786
  }
787
- .bds018-svg {
787
+ .bds0110ProgressCircle-svg {
788
788
  display: block;
789
789
  }
790
- .bds018-track {
790
+ .bds0110ProgressCircle-track {
791
791
  stroke: var(--color_bg--subtle);
792
792
  }
793
- .bds018-fill {
794
- stroke: var(--color_green);
793
+ .bds0110ProgressCircle-fill {
794
+ stroke: var(--progressCircle_color-active, var(--color_active));
795
795
  transition: stroke-dashoffset var(--animation_transition-duration) var(--animation_easing);
796
796
  }
797
- .bds018-value {
797
+ .bds0110ProgressCircle-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
- .bds018---size_small .bds018-value {
805
+ .bds0110ProgressCircle---size_small .bds0110ProgressCircle-value {
806
806
  font-size: 0.5rem;
807
807
  }
808
- .bds018---size_medium .bds018-value {
808
+ .bds0110ProgressCircle---size_medium .bds0110ProgressCircle-value {
809
809
  font-size: var(--font_size--body--s);
810
810
  }
811
- .bds018---size_large .bds018-value {
811
+ .bds0110ProgressCircle---size_large .bds0110ProgressCircle-value {
812
812
  font-size: var(--font_size--body);
813
813
  }
814
814
  @media (prefers-reduced-motion: reduce) {
815
- .bds018-fill {
815
+ .bds0110ProgressCircle-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
- .bds018-separator {
823
+ .bds0110Separator-separator {
824
824
  border: none;
825
825
  background-color: var(--separator_color, var(--color_on-bg));
826
826
  }
827
- .bds018-separator.bds018---horizontal {
827
+ .bds0110Separator-separator.bds0110Separator---horizontal {
828
828
  display: block;
829
829
  width: 100%;
830
830
  height: var(--separator_thickness, 1px);
831
831
  }
832
- .bds018-separator.bds018---vertical {
832
+ .bds0110Separator-separator.bds0110Separator---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
- .bds018-skeleton {
841
+ .bds0110Skeleton-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
- .bds018-skipLink {
865
+ .bds0110SkipLink-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
- .bds018-skipLink:focus-visible {
881
+ .bds0110SkipLink-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
- .bds018-skipLink {
887
+ .bds0110SkipLink-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
- .bds018-wrapper {
895
+ .bds0110Table-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
- .bds018-table {
901
+ .bds0110Table-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
- .bds018-caption {
907
+ .bds0110Table-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
- .bds018-thead {
914
+ .bds0110Table-thead {
915
915
  background-color: var(--color_bg--subtle);
916
916
  }
917
- .bds018-th {
917
+ .bds0110Table-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
- .bds018-th.bds018---sortable {
926
+ .bds0110Table-th.bds0110Table---sortable {
927
927
  padding: 0;
928
928
  }
929
- .bds018-sortButton {
929
+ .bds0110Table-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
- .bds018-sortButton:focus-visible {
943
+ .bds0110Table-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
- .bds018-sortButton:hover {
948
+ .bds0110Table-sortButton:hover {
949
949
  color: var(--color_on-bg);
950
950
  }
951
951
  }
952
- .bds018-sortIcon {
952
+ .bds0110Table-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
- .bds018-sortIcon.bds018---sort-active {
958
+ .bds0110Table-sortIcon.bds0110Table---sort-active {
959
959
  opacity: 1;
960
960
  color: var(--color_interactive);
961
961
  }
962
- .bds018-sortIcon.bds018---sort-desc {
962
+ .bds0110Table-sortIcon.bds0110Table---sort-desc {
963
963
  transform: rotate(180deg);
964
964
  }
965
- .bds018-tbody .bds018-tr {
965
+ .bds0110Table-tbody .bds0110Table-tr {
966
966
  border-bottom: 1px solid var(--color_bg--subtle);
967
967
  transition: var(--animation_transition);
968
968
  }
969
- .bds018-tbody .bds018-tr:last-child {
969
+ .bds0110Table-tbody .bds0110Table-tr:last-child {
970
970
  border-bottom: none;
971
971
  }
972
972
  @media (hover: hover) and (pointer: fine) {
973
- .bds018-tbody .bds018-tr:hover {
973
+ .bds0110Table-tbody .bds0110Table-tr:hover {
974
974
  background-color: var(--color_bg--subtle);
975
975
  }
976
976
  }
977
- .bds018-td {
977
+ .bds0110Table-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
- .bds018-sortIcon {
983
+ .bds0110Table-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
- .bds018-tabs {
991
+ .bds0110Tabs-tabs {
992
992
  display: flex;
993
993
  flex-direction: column;
994
994
  }
995
- .bds018-tabList {
995
+ .bds0110Tabs-tabList {
996
996
  display: flex;
997
997
  border-bottom: 1px solid var(--color_bg--subtle);
998
998
  gap: var(--space_xxs);
999
999
  }
1000
- .bds018-tab {
1000
+ .bds0110Tabs-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
- .bds018-tab.bds018---active {
1016
+ .bds0110Tabs-tab.bds0110Tabs---active {
1017
1017
  --tab_color: var(--color_interactive);
1018
1018
  --tab_border-color: var(--color_interactive);
1019
1019
  }
1020
- .bds018-tab:disabled {
1020
+ .bds0110Tabs-tab:disabled {
1021
1021
  opacity: 0.4;
1022
1022
  cursor: not-allowed;
1023
1023
  }
1024
- .bds018-tab:focus-visible {
1024
+ .bds0110Tabs-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
- .bds018-tab:not(:disabled, .bds018---active):hover {
1030
+ .bds0110Tabs-tab:not(:disabled, .bds0110Tabs---active):hover {
1031
1031
  --tab_color: var(--color_interactive);
1032
1032
  }
1033
1033
  }
1034
- .bds018-panel {
1034
+ .bds0110Tabs-panel {
1035
1035
  padding-block-start: var(--space_m);
1036
1036
  }
1037
- .bds018-panel:focus-visible {
1037
+ .bds0110Tabs-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
- .bds018-wrapper {
1045
+ .bds0110Tooltip-wrapper {
1046
1046
  position: relative;
1047
1047
  display: inline-flex;
1048
1048
  align-items: center;
1049
1049
  }
1050
- .bds018-tooltip {
1050
+ .bds0110Tooltip-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
- .bds018-wrapper:hover .bds018-tooltip,
1068
- .bds018-wrapper:focus-within .bds018-tooltip {
1067
+ .bds0110Tooltip-wrapper:hover .bds0110Tooltip-tooltip,
1068
+ .bds0110Tooltip-wrapper:focus-within .bds0110Tooltip-tooltip {
1069
1069
  visibility: visible;
1070
1070
  opacity: 1;
1071
1071
  }
1072
- .bds018---placement_top {
1072
+ .bds0110Tooltip---placement_top {
1073
1073
  bottom: calc(100% + var(--space_xs));
1074
1074
  left: 50%;
1075
1075
  transform: translateX(-50%);
1076
1076
  }
1077
- .bds018---placement_bottom {
1077
+ .bds0110Tooltip---placement_bottom {
1078
1078
  top: calc(100% + var(--space_xs));
1079
1079
  left: 50%;
1080
1080
  transform: translateX(-50%);
1081
1081
  }
1082
- .bds018---placement_left {
1082
+ .bds0110Tooltip---placement_left {
1083
1083
  right: calc(100% + var(--space_xs));
1084
1084
  top: 50%;
1085
1085
  transform: translateY(-50%);
1086
1086
  }
1087
- .bds018---placement_right {
1087
+ .bds0110Tooltip---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
- .bds018-tooltip {
1093
+ .bds0110Tooltip-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
- .bds018-typography {
1101
+ .bds0110Typography-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
- .bds018---h1 {
1106
+ .bds0110Typography---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
- .bds018---h2 {
1112
+ .bds0110Typography---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
- .bds018---h3 {
1118
+ .bds0110Typography---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
- .bds018---body {
1124
+ .bds0110Typography---body {
1125
1125
  font-size: var(--font_size--body);
1126
1126
  line-height: var(--font_line-height--body);
1127
1127
  }
1128
- .bds018---body_s {
1128
+ .bds0110Typography---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
- .bds018-button,
1151
- .bds018-button[href] {
1150
+ .bds0110Button-button,
1151
+ .bds0110Button-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
- .bds018-button.bds018---primary {
1178
+ .bds0110Button-button.bds0110Button---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
- .bds018-button.bds018---secondary {
1183
+ .bds0110Button-button.bds0110Button---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
- .bds018-button.bds018---size_small {
1188
+ .bds0110Button-button.bds0110Button---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
- .bds018-button.bds018---size_medium {
1193
+ .bds0110Button-button.bds0110Button---size_medium {
1194
1194
  --button_height: 3em;
1195
1195
  padding-inline: var(--space_l);
1196
1196
  }
1197
- .bds018-button.bds018---size_large {
1197
+ .bds0110Button-button.bds0110Button---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
- .bds018-button.bds018---hasPulse {
1202
+ .bds0110Button-button.bds0110Button---hasPulse {
1203
1203
  animation: pulse 3s infinite;
1204
1204
  }
1205
- .bds018-button[href] {
1205
+ .bds0110Button-button[href] {
1206
1206
  text-decoration: none;
1207
1207
  }
1208
- .bds018-button svg {
1208
+ .bds0110Button-button svg {
1209
1209
  --icon__stroke: currentcolor;
1210
1210
  fill: currentcolor;
1211
1211
  color: currentcolor;
1212
1212
  flex-shrink: 0;
1213
1213
  }
1214
- .bds018-prefix {
1214
+ .bds0110Button-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
- .bds018-suffix {
1220
+ .bds0110Button-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
- .bds018-button:hover .bds018-prefix svg {
1227
+ .bds0110Button-button:hover .bds0110Button-prefix svg {
1228
1228
  animation: 2s infinite fadeZoom ease-out;
1229
1229
  }
1230
- .bds018-button:hover .bds018-suffix svg {
1230
+ .bds0110Button-button:hover .bds0110Button-suffix svg {
1231
1231
  animation: 2s infinite fadeZoom ease-out;
1232
1232
  }
1233
1233
  }
1234
- .bds018-button:focus-visible {
1234
+ .bds0110Button-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
- .bds018-button:hover {
1240
+ .bds0110Button-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
- .bds018-dialog {
1251
+ .bds0110Command-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
- .bds018-dialog::backdrop {
1261
+ .bds0110Command-dialog::backdrop {
1262
1262
  background: rgb(0 0 0 / 50%);
1263
1263
  }
1264
- .bds018-palette {
1264
+ .bds0110Command-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
- .bds018-searchRow {
1275
+ .bds0110Command-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
- .bds018-searchIcon {
1283
+ .bds0110Command-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
- .bds018-search {
1289
+ .bds0110Command-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
- .bds018-search::placeholder {
1299
+ .bds0110Command-search::placeholder {
1300
1300
  color: var(--color_on-bg--muted);
1301
1301
  }
1302
- .bds018-escHint {
1302
+ .bds0110Command-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
- .bds018-list {
1310
+ .bds0110Command-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
- .bds018-groupList {
1316
+ .bds0110Command-groupList {
1317
1317
  list-style: none;
1318
1318
  margin: 0;
1319
1319
  padding: 0;
1320
1320
  }
1321
- .bds018-group {
1321
+ .bds0110Command-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
- .bds018-item {
1329
+ .bds0110Command-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
- .bds018-itemActive {
1337
+ .bds0110Command-itemActive {
1338
1338
  background-color: var(--color_bg--subtle);
1339
1339
  }
1340
- .bds018-itemLabel {
1340
+ .bds0110Command-itemLabel {
1341
1341
  flex: 1;
1342
1342
  font-size: var(--font_size--body);
1343
1343
  color: var(--color_on-bg);
1344
1344
  }
1345
- .bds018-itemDesc {
1345
+ .bds0110Command-itemDesc {
1346
1346
  font-size: var(--font_size--body--s);
1347
1347
  color: var(--color_on-bg--muted);
1348
1348
  }
1349
- .bds018-shortcut {
1349
+ .bds0110Command-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
- .bds018-empty {
1356
+ .bds0110Command-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
- .bds018-dialog {
1366
+ .bds0110Dialog-dialog {
1367
1367
  font-size: var(--font_size--body--s);
1368
1368
  border: 2px solid currentcolor;
1369
1369
  background-color: var(--dialog_color ,var(--color_grey--subtle));
@@ -1373,19 +1373,19 @@
1373
1373
  max-width: 90svw;
1374
1374
  max-height: 90svh;
1375
1375
  }
1376
- .bds018-dialogContent {
1376
+ .bds0110Dialog-dialogContent {
1377
1377
  display: grid;
1378
1378
  gap: var(--grid_gap);
1379
1379
  overflow-y: auto;
1380
1380
  min-height: 0;
1381
1381
  flex: 1;
1382
1382
  }
1383
- .bds018-closeForm {
1383
+ .bds0110Dialog-closeForm {
1384
1384
  position: absolute;
1385
1385
  inset-block-start: -1em;
1386
1386
  inset-inline-end: -1em;
1387
1387
  }
1388
- .bds018-closeButton {
1388
+ .bds0110Dialog-closeButton {
1389
1389
  all: unset;
1390
1390
  width: 2em;
1391
1391
  height: 2em;
@@ -1398,7 +1398,7 @@
1398
1398
  border: 2px solid currentcolor;
1399
1399
  cursor: pointer;
1400
1400
  }
1401
- .bds018-closeButton svg {
1401
+ .bds0110Dialog-closeButton svg {
1402
1402
  width: 1.25em;
1403
1403
  height: 1.25em;
1404
1404
  }
@@ -1406,7 +1406,7 @@
1406
1406
 
1407
1407
  /* src/components/interaction/Drawer/Drawer.module.css */
1408
1408
  @layer component {
1409
- .bds018-drawer {
1409
+ .bds0110Drawer-drawer {
1410
1410
  position: fixed;
1411
1411
  inset: 0;
1412
1412
  margin: 0;
@@ -1419,10 +1419,10 @@
1419
1419
  background: transparent;
1420
1420
  overflow: hidden;
1421
1421
  }
1422
- .bds018-drawer::backdrop {
1422
+ .bds0110Drawer-drawer::backdrop {
1423
1423
  background: rgb(0 0 0 / 50%);
1424
1424
  }
1425
- .bds018-panel {
1425
+ .bds0110Drawer-panel {
1426
1426
  position: absolute;
1427
1427
  inset-block: 0;
1428
1428
  display: flex;
@@ -1435,13 +1435,13 @@
1435
1435
  overflow: hidden;
1436
1436
  transition: transform var(--animation_transition-duration) var(--animation_easing);
1437
1437
  }
1438
- .bds018---side_right .bds018-panel {
1438
+ .bds0110Drawer---side_right .bds0110Drawer-panel {
1439
1439
  inset-inline-end: 0;
1440
1440
  }
1441
- .bds018---side_left .bds018-panel {
1441
+ .bds0110Drawer---side_left .bds0110Drawer-panel {
1442
1442
  inset-inline-start: 0;
1443
1443
  }
1444
- .bds018-header {
1444
+ .bds0110Drawer-header {
1445
1445
  display: flex;
1446
1446
  align-items: center;
1447
1447
  justify-content: space-between;
@@ -1449,13 +1449,13 @@
1449
1449
  border-block-end: 1px solid currentcolor;
1450
1450
  flex-shrink: 0;
1451
1451
  }
1452
- .bds018-title {
1452
+ .bds0110Drawer-title {
1453
1453
  margin: 0;
1454
1454
  font-size: var(--font_size--heading--s);
1455
1455
  font-weight: var(--font_weight--semibold);
1456
1456
  line-height: var(--font_line-height--heading);
1457
1457
  }
1458
- .bds018-closeButton {
1458
+ .bds0110Drawer-closeButton {
1459
1459
  all: unset;
1460
1460
  display: flex;
1461
1461
  align-items: center;
@@ -1466,26 +1466,26 @@
1466
1466
  cursor: pointer;
1467
1467
  transition: var(--animation_transition);
1468
1468
  }
1469
- .bds018-closeButton svg {
1469
+ .bds0110Drawer-closeButton svg {
1470
1470
  width: 1.25rem;
1471
1471
  height: 1.25rem;
1472
1472
  }
1473
- .bds018-closeButton:focus-visible {
1473
+ .bds0110Drawer-closeButton:focus-visible {
1474
1474
  outline: var(--outline_default);
1475
1475
  outline-offset: var(--outline_offset);
1476
1476
  }
1477
1477
  @media (hover: hover) and (pointer: fine) {
1478
- .bds018-closeButton:hover {
1478
+ .bds0110Drawer-closeButton:hover {
1479
1479
  background-color: var(--color_bg--subtle);
1480
1480
  }
1481
1481
  }
1482
- .bds018-body {
1482
+ .bds0110Drawer-body {
1483
1483
  flex: 1;
1484
1484
  overflow-y: auto;
1485
1485
  padding: var(--space_l);
1486
1486
  }
1487
1487
  @media (prefers-reduced-motion: reduce) {
1488
- .bds018-panel {
1488
+ .bds0110Drawer-panel {
1489
1489
  transition: none;
1490
1490
  }
1491
1491
  }
@@ -1493,11 +1493,11 @@
1493
1493
 
1494
1494
  /* src/components/interaction/DropdownMenu/DropdownMenu.module.css */
1495
1495
  @layer component {
1496
- .bds018-wrapper {
1496
+ .bds0110DropdownMenu-wrapper {
1497
1497
  position: relative;
1498
1498
  display: inline-flex;
1499
1499
  }
1500
- .bds018-menu {
1500
+ .bds0110DropdownMenu-menu {
1501
1501
  position: absolute;
1502
1502
  top: calc(100% + var(--space_xxs));
1503
1503
  z-index: var(--z-index_dropdown);
@@ -1511,19 +1511,19 @@
1511
1511
  list-style: none;
1512
1512
  margin: 0;
1513
1513
  }
1514
- .bds018---placement_bottom-start {
1514
+ .bds0110DropdownMenu---placement_bottom-start {
1515
1515
  left: 0;
1516
1516
  }
1517
- .bds018---placement_bottom-end {
1517
+ .bds0110DropdownMenu---placement_bottom-end {
1518
1518
  right: 0;
1519
1519
  }
1520
- .bds018-separator {
1520
+ .bds0110DropdownMenu-separator {
1521
1521
  border: none;
1522
1522
  border-top: 1px solid currentcolor;
1523
1523
  margin: var(--space_xxs) 0;
1524
1524
  opacity: 0.15;
1525
1525
  }
1526
- .bds018-item {
1526
+ .bds0110DropdownMenu-item {
1527
1527
  all: unset;
1528
1528
  display: flex;
1529
1529
  align-items: center;
@@ -1537,22 +1537,22 @@
1537
1537
  box-sizing: border-box;
1538
1538
  transition: var(--animation_transition);
1539
1539
  }
1540
- .bds018-item:disabled {
1540
+ .bds0110DropdownMenu-item:disabled {
1541
1541
  opacity: 0.4;
1542
1542
  cursor: not-allowed;
1543
1543
  }
1544
- .bds018-item:focus-visible {
1544
+ .bds0110DropdownMenu-item:focus-visible {
1545
1545
  outline: var(--outline_default);
1546
1546
  outline-offset: calc(var(--outline_offset) * -1);
1547
1547
  border-radius: var(--border_radius--xs);
1548
1548
  }
1549
1549
  @media (hover: hover) and (pointer: fine) {
1550
- .bds018-item:not(:disabled):hover {
1550
+ .bds0110DropdownMenu-item:not(:disabled):hover {
1551
1551
  background-color: var(--color_bg--subtle);
1552
1552
  color: var(--color_interactive);
1553
1553
  }
1554
1554
  }
1555
- .bds018-icon {
1555
+ .bds0110DropdownMenu-icon {
1556
1556
  display: flex;
1557
1557
  align-items: center;
1558
1558
  flex-shrink: 0;
@@ -1561,11 +1561,11 @@
1561
1561
 
1562
1562
  /* src/components/interaction/Popover/Popover.module.css */
1563
1563
  @layer component {
1564
- .bds018-wrapper {
1564
+ .bds0110Popover-wrapper {
1565
1565
  position: relative;
1566
1566
  display: inline-flex;
1567
1567
  }
1568
- .bds018-panel {
1568
+ .bds0110Popover-panel {
1569
1569
  position: absolute;
1570
1570
  z-index: var(--z-index_popover);
1571
1571
  min-width: 12rem;
@@ -1577,19 +1577,19 @@
1577
1577
  color: var(--popover_on-color, var(--color_on-bg));
1578
1578
  font-size: var(--font_size--body);
1579
1579
  }
1580
- .bds018---placement_bottom {
1580
+ .bds0110Popover---placement_bottom {
1581
1581
  top: calc(100% + var(--space_xs));
1582
1582
  left: 0;
1583
1583
  }
1584
- .bds018---placement_top {
1584
+ .bds0110Popover---placement_top {
1585
1585
  bottom: calc(100% + var(--space_xs));
1586
1586
  left: 0;
1587
1587
  }
1588
- .bds018---placement_right {
1588
+ .bds0110Popover---placement_right {
1589
1589
  left: calc(100% + var(--space_xs));
1590
1590
  top: 0;
1591
1591
  }
1592
- .bds018---placement_left {
1592
+ .bds0110Popover---placement_left {
1593
1593
  right: calc(100% + var(--space_xs));
1594
1594
  top: 0;
1595
1595
  }
@@ -1597,23 +1597,23 @@
1597
1597
 
1598
1598
  /* src/components/interaction/Rating/Rating.module.css */
1599
1599
  @layer component {
1600
- .bds018-rating {
1600
+ .bds0110Rating-rating {
1601
1601
  display: inline-flex;
1602
1602
  gap: var(--space_xxxs);
1603
1603
  color: var(--color_bg);
1604
1604
  }
1605
- .bds018-star {
1605
+ .bds0110Rating-star {
1606
1606
  width: 1.5em;
1607
1607
  height: 1.5em;
1608
1608
  }
1609
- .bds018---filled {
1609
+ .bds0110Rating---filled {
1610
1610
  color: var(--color_warning);
1611
1611
  }
1612
1612
  }
1613
1613
 
1614
1614
  /* src/components/interaction/Toast/Toast.module.css */
1615
1615
  @layer component {
1616
- .bds018-toastContainer {
1616
+ .bds0110Toast-toastContainer {
1617
1617
  position: fixed;
1618
1618
  bottom: var(--space_xl);
1619
1619
  right: var(--space_xl);
@@ -1622,7 +1622,7 @@
1622
1622
  gap: var(--space_m);
1623
1623
  z-index: var(--z-index_toast);
1624
1624
  }
1625
- .bds018-toast {
1625
+ .bds0110Toast-toast {
1626
1626
  padding: var(--space_m) var(--space_l);
1627
1627
  background-color: var(--toast_color, var(--color_bg));
1628
1628
  color: var(--toast_on-color, var(--color_on-bg));
@@ -1635,10 +1635,10 @@
1635
1635
  min-width: 300px;
1636
1636
  animation: slideIn var(--animation_duration--fast) var(--animation_easing);
1637
1637
  }
1638
- .bds018-message {
1638
+ .bds0110Toast-message {
1639
1639
  flex: 1;
1640
1640
  }
1641
- .bds018-closeButton {
1641
+ .bds0110Toast-closeButton {
1642
1642
  display: flex;
1643
1643
  align-items: center;
1644
1644
  justify-content: center;
@@ -1652,10 +1652,10 @@
1652
1652
  color: inherit;
1653
1653
  opacity: 0.6;
1654
1654
  }
1655
- .bds018-closeButton:hover {
1655
+ .bds0110Toast-closeButton:hover {
1656
1656
  opacity: 1;
1657
1657
  }
1658
- .bds018-closeButton svg {
1658
+ .bds0110Toast-closeButton svg {
1659
1659
  width: 1rem;
1660
1660
  height: 1rem;
1661
1661
  }
@@ -1673,21 +1673,21 @@
1673
1673
 
1674
1674
  /* src/components/interaction/form/Checkbox/Checkbox.module.css */
1675
1675
  @layer component {
1676
- .bds018-checkboxGroup {
1676
+ .bds0110Checkbox-checkboxGroup {
1677
1677
  --inputSize: calc(var(--space_s) * 2);
1678
1678
  display: flex;
1679
1679
  flex-direction: column;
1680
1680
  }
1681
- .bds018-inputWrapper {
1681
+ .bds0110Checkbox-inputWrapper {
1682
1682
  display: flex;
1683
1683
  align-items: stretch;
1684
1684
  gap: var(--space_xs);
1685
1685
  }
1686
- .bds018-checkbox {
1686
+ .bds0110Checkbox-checkbox {
1687
1687
  margin-block-start: 0.25em;
1688
1688
  width: var(--inputSize);
1689
1689
  height: var(--inputSize);
1690
- border: 1px solid var(--color_on-bg);
1690
+ border: 1px solid currentcolor;
1691
1691
  border-radius: var(--border_radius--xs);
1692
1692
  appearance: none;
1693
1693
  background-color: var(--color_bg);
@@ -1695,31 +1695,30 @@
1695
1695
  position: relative;
1696
1696
  transition: background-color 0.3s ease, border-color 0.3s ease;
1697
1697
  }
1698
- .bds018-checkbox:checked {
1699
- background-color: var(--color_green);
1700
- border-color: var(--color_green);
1701
- box-shadow: 0 0 0 2px var(--color_green);
1698
+ .bds0110Checkbox-checkbox:checked {
1699
+ background-color: var(--checkbox_color-active, var(--color_active));
1700
+ border-color: var(--checkbox_color-active, var(--color_active));
1702
1701
  }
1703
- .bds018-checkbox:checked::after {
1702
+ .bds0110Checkbox-checkbox:checked::after {
1704
1703
  content: "";
1705
1704
  position: absolute;
1706
1705
  left: 0.6em;
1707
1706
  top: 0.2em;
1708
1707
  width: 0.5em;
1709
1708
  height: 1em;
1710
- border: solid var(--color_on-green);
1709
+ border: solid var(--checkbox_color-on-active, var(--color_on-active));
1711
1710
  border-width: 0 2px 2px 0;
1712
1711
  transform: rotate(45deg);
1713
1712
  }
1714
- .bds018-checkbox:focus {
1713
+ .bds0110Checkbox-checkbox:focus {
1715
1714
  outline: none;
1716
1715
  border-color: var(--color_interactive);
1717
- box-shadow: 0 0 0 2px var(--color_green);
1716
+ box-shadow: 0 0 0 2px rgb(from var(--color_interactive) r g b / 20%);
1718
1717
  }
1719
- .bds018-checkboxError {
1718
+ .bds0110Checkbox-checkboxError {
1720
1719
  border-color: var(--color_error);
1721
1720
  }
1722
- .bds018-checkboxError:focus {
1721
+ .bds0110Checkbox-checkboxError:focus {
1723
1722
  border-color: var(--color_error);
1724
1723
  box-shadow: 0 0 0 2px rgb(from var(--color_error) r g b / 20%);
1725
1724
  }
@@ -1727,19 +1726,19 @@
1727
1726
 
1728
1727
  /* src/components/interaction/form/atoms/Message.module.css */
1729
1728
  @layer component {
1730
- .bds018-error,
1731
- .bds018-hint {
1729
+ .bds0110Message-error,
1730
+ .bds0110Message-hint {
1732
1731
  font-size: var(--font_size--body--s);
1733
1732
  margin-inline-start: var(--labelPosition);
1734
1733
  }
1735
- .bds018-error {
1734
+ .bds0110Message-error {
1736
1735
  color: var(--color_error);
1737
1736
  }
1738
1737
  }
1739
1738
 
1740
1739
  /* src/components/interaction/form/atoms/Label.module.css */
1741
1740
  @layer component {
1742
- .bds018-label {
1741
+ .bds0110Label-label {
1743
1742
  display: flex;
1744
1743
  align-items: center;
1745
1744
  font-family: var(--font_family--body);
@@ -1751,7 +1750,7 @@
1751
1750
 
1752
1751
  /* src/components/interaction/form/atoms/InputContainer.module.css */
1753
1752
  @layer component {
1754
- .bds018-container {
1753
+ .bds0110InputContainer-container {
1755
1754
  --labelPosition: calc(var(--inputSize) + var(--space_m));
1756
1755
  display: flex;
1757
1756
  flex-direction: column;
@@ -1761,46 +1760,44 @@
1761
1760
 
1762
1761
  /* src/components/interaction/form/Combobox/Combobox.module.css */
1763
1762
  @layer component {
1764
- .bds018-formGroup {
1763
+ .bds0110Combobox-formGroup {
1765
1764
  display: flex;
1766
1765
  flex-direction: column;
1767
1766
  }
1768
- .bds018-inputWrapper {
1767
+ .bds0110Combobox-inputWrapper {
1769
1768
  position: relative;
1770
1769
  display: flex;
1771
1770
  align-items: center;
1772
1771
  }
1773
- .bds018-input {
1774
- --combobox_border-color: var(--color_on-bg);
1775
- --combobox_focus-ring: 0 0 0 2px rgb(from var(--color_interactive) r g b / 20%);
1772
+ .bds0110Combobox-input {
1776
1773
  appearance: none;
1777
1774
  width: 100%;
1778
1775
  font-family: var(--font_family--body);
1779
1776
  font-size: var(--font_size--body);
1780
1777
  padding: var(--space_s);
1781
1778
  padding-inline-end: var(--space_xxl);
1782
- border: 1px solid var(--combobox_border-color);
1779
+ border: 1px solid var(--combobox_border-color, currentcolor);
1783
1780
  border-radius: var(--border_radius--xs);
1784
1781
  background-color: var(--color_bg);
1785
1782
  color: var(--color_on-bg);
1786
1783
  transition: var(--animation_transition);
1787
1784
  }
1788
- .bds018-input:focus {
1785
+ .bds0110Combobox-input:focus {
1789
1786
  --combobox_border-color: var(--color_interactive);
1790
1787
  outline: none;
1791
- box-shadow: var(--combobox_focus-ring);
1788
+ box-shadow: var(--combobox_focus-ring, 0 0 0 2px rgb(from var(--color_interactive) r g b / 20%));
1792
1789
  }
1793
- .bds018-input:disabled {
1790
+ .bds0110Combobox-input:disabled {
1794
1791
  opacity: 0.5;
1795
1792
  cursor: not-allowed;
1796
1793
  }
1797
- .bds018-inputError {
1794
+ .bds0110Combobox-inputError {
1798
1795
  --combobox_border-color: var(--color_error);
1799
1796
  }
1800
- .bds018-inputError:focus {
1797
+ .bds0110Combobox-inputError:focus {
1801
1798
  --combobox_focus-ring: 0 0 0 2px rgb(from var(--color_error) r g b / 20%);
1802
1799
  }
1803
- .bds018-chevron {
1800
+ .bds0110Combobox-chevron {
1804
1801
  position: absolute;
1805
1802
  inset-inline-end: var(--space_s);
1806
1803
  display: flex;
@@ -1808,11 +1805,11 @@
1808
1805
  pointer-events: none;
1809
1806
  color: var(--color_on-bg);
1810
1807
  }
1811
- .bds018-chevron svg {
1808
+ .bds0110Combobox-chevron svg {
1812
1809
  width: 1rem;
1813
1810
  height: 1rem;
1814
1811
  }
1815
- .bds018-listbox {
1812
+ .bds0110Combobox-listbox {
1816
1813
  position: absolute;
1817
1814
  top: calc(100% + var(--space_xxs));
1818
1815
  left: 0;
@@ -1829,7 +1826,7 @@
1829
1826
  color: var(--combobox_on-color, var(--color_on-bg));
1830
1827
  box-shadow: var(--shadow_m);
1831
1828
  }
1832
- .bds018-option {
1829
+ .bds0110Combobox-option {
1833
1830
  display: flex;
1834
1831
  align-items: center;
1835
1832
  padding: var(--space_xs) var(--space_m);
@@ -1838,14 +1835,14 @@
1838
1835
  cursor: pointer;
1839
1836
  transition: var(--animation_transition);
1840
1837
  }
1841
- .bds018-option.bds018---highlighted {
1838
+ .bds0110Combobox-option.bds0110Combobox---highlighted {
1842
1839
  background-color: var(--color_bg--subtle);
1843
1840
  color: var(--color_interactive);
1844
1841
  }
1845
- .bds018-option.bds018---selected {
1842
+ .bds0110Combobox-option.bds0110Combobox---selected {
1846
1843
  font-weight: var(--font_weight--semibold);
1847
1844
  }
1848
- .bds018-option.bds018---disabled {
1845
+ .bds0110Combobox-option.bds0110Combobox---disabled {
1849
1846
  opacity: 0.4;
1850
1847
  cursor: not-allowed;
1851
1848
  }
@@ -1853,58 +1850,58 @@
1853
1850
 
1854
1851
  /* src/components/interaction/form/FileInput/FileInput.module.css */
1855
1852
  @layer component {
1856
- .bds018-formGroup {
1853
+ .bds0110FileInput-formGroup {
1857
1854
  display: flex;
1858
1855
  flex-direction: column;
1859
1856
  }
1860
- .bds018-dropZone {
1857
+ .bds0110FileInput-dropZone {
1861
1858
  display: flex;
1862
1859
  flex-direction: column;
1863
1860
  align-items: center;
1864
1861
  justify-content: center;
1865
1862
  gap: var(--space_xs);
1866
1863
  padding: var(--space_l) var(--space_m);
1867
- border: 2px dashed var(--color_on-bg);
1864
+ border: 2px dashed currentcolor;
1868
1865
  border-radius: var(--border_radius--s);
1866
+ color: currentcolor;
1869
1867
  cursor: pointer;
1870
1868
  text-align: center;
1871
1869
  transition: var(--animation_transition);
1872
- color: var(--color_on-bg--muted);
1873
1870
  }
1874
- .bds018-dropZone:focus-within {
1871
+ .bds0110FileInput-dropZone:focus-within {
1875
1872
  outline: var(--outline_default);
1876
1873
  outline-offset: var(--outline_offset);
1877
- border-color: var(--color_interactive);
1874
+ border-color: var(--fileInput_border-color, currentcolor);
1878
1875
  }
1879
- .bds018-isDragging {
1880
- border-color: var(--color_interactive);
1881
- background-color: rgb(from var(--color_interactive) r g b / 8%);
1876
+ .bds0110FileInput-isDragging {
1877
+ border-color: currentcolor;
1878
+ background-color: rgb(from currentcolor r g b / 8%);
1882
1879
  }
1883
- .bds018-hasError {
1880
+ .bds0110FileInput-hasError {
1884
1881
  border-color: var(--color_error);
1885
1882
  }
1886
- .bds018-isDisabled {
1883
+ .bds0110FileInput-isDisabled {
1887
1884
  opacity: 0.5;
1888
1885
  cursor: not-allowed;
1889
1886
  }
1890
- .bds018-icon {
1887
+ .bds0110FileInput-icon {
1891
1888
  width: 2rem;
1892
1889
  height: 2rem;
1893
1890
  flex-shrink: 0;
1894
1891
  }
1895
- .bds018-prompt {
1892
+ .bds0110FileInput-prompt {
1896
1893
  font-size: var(--font_size--body);
1897
1894
  color: var(--color_on-bg--muted);
1898
1895
  }
1899
- .bds018-prompt strong {
1896
+ .bds0110FileInput-prompt strong {
1900
1897
  color: var(--color_interactive);
1901
1898
  font-weight: var(--font_weight--semibold);
1902
1899
  }
1903
- .bds018-acceptHint {
1900
+ .bds0110FileInput-acceptHint {
1904
1901
  font-size: var(--font_size--body--s);
1905
1902
  color: var(--color_on-bg--muted);
1906
1903
  }
1907
- .bds018-hiddenInput {
1904
+ .bds0110FileInput-hiddenInput {
1908
1905
  position: absolute;
1909
1906
  width: 1px;
1910
1907
  height: 1px;
@@ -1914,7 +1911,7 @@
1914
1911
  border: 0;
1915
1912
  }
1916
1913
  @media (hover: hover) and (pointer: fine) {
1917
- .bds018-dropZone:not(.bds018-isDisabled):hover {
1914
+ .bds0110FileInput-dropZone:not(.bds0110FileInput-isDisabled):hover {
1918
1915
  border-color: var(--color_interactive);
1919
1916
  background-color: rgb(from var(--color_interactive) r g b / 4%);
1920
1917
  }
@@ -1923,54 +1920,51 @@
1923
1920
 
1924
1921
  /* src/components/interaction/form/FormInput/FormInput.module.css */
1925
1922
  @layer component {
1926
- .bds018-formGroup {
1923
+ .bds0110FormInput-formGroup {
1927
1924
  --labelPosition: 0;
1928
1925
  display: flex;
1929
1926
  flex-direction: column;
1930
1927
  }
1931
- .bds018-input {
1932
- --input_border-color: var(--color_on-bg);
1933
- --input_radius: var(--border_radius--xs);
1934
- --input_focus-ring: 0 0 0 2px rgb(from var(--color_interactive) r g b / 20%);
1928
+ .bds0110FormInput-input {
1935
1929
  font-family: var(--font_family--body);
1936
1930
  font-size: var(--font_size--body);
1937
1931
  padding: var(--space_s);
1938
- border: 1px solid var(--input_border-color);
1939
- border-radius: var(--input_radius);
1932
+ border: 1px solid var(--input_border-color, currentcolor);
1933
+ border-radius: var(--input_radius, var(--border_radius--xs));
1940
1934
  transition: var(--animation_transition);
1941
1935
  }
1942
- .bds018-input:focus {
1936
+ .bds0110FormInput-input:focus {
1943
1937
  --input_border-color: var(--color_interactive);
1944
1938
  outline: none;
1945
- box-shadow: var(--input_focus-ring);
1939
+ box-shadow: var(--input_focus-ring, 0 0 0 2px rgb(from var(--color_interactive) r g b / 20%));
1946
1940
  }
1947
- .bds018-inputError {
1941
+ .bds0110FormInput-inputError {
1948
1942
  --input_border-color: var(--color_error);
1949
1943
  }
1950
- .bds018-inputError:focus {
1944
+ .bds0110FormInput-inputError:focus {
1951
1945
  --input_focus-ring: 0 0 0 2px rgb(from var(--color_error) r g b / 20%);
1952
1946
  }
1953
1947
  }
1954
1948
 
1955
1949
  /* src/components/interaction/form/NumberInput/NumberInput.module.css */
1956
1950
  @layer component {
1957
- .bds018-formGroup {
1951
+ .bds0110NumberInput-formGroup {
1958
1952
  display: flex;
1959
1953
  flex-direction: column;
1960
1954
  }
1961
- .bds018-inputRow {
1955
+ .bds0110NumberInput-inputRow {
1962
1956
  display: flex;
1963
1957
  align-items: stretch;
1964
- border: 1px solid var(--color_on-bg);
1958
+ border: 1px solid currentcolor;
1965
1959
  border-radius: var(--border_radius--xs);
1966
1960
  overflow: hidden;
1967
1961
  transition: var(--animation_transition);
1968
1962
  }
1969
- .bds018-inputRow:focus-within {
1970
- border-color: var(--color_interactive);
1971
- box-shadow: 0 0 0 2px rgb(from var(--color_interactive) r g b / 20%);
1963
+ .bds0110NumberInput-inputRow:focus-within {
1964
+ border-color: var(--numberInput_border-color, var(--color_interactive));
1965
+ box-shadow: var(--numberInput_focus-ring, 0 0 0 2px rgb(from var(--color_interactive) r g b / 20%));
1972
1966
  }
1973
- .bds018-input {
1967
+ .bds0110NumberInput-input {
1974
1968
  flex: 1;
1975
1969
  border: none;
1976
1970
  outline: none;
@@ -1983,18 +1977,17 @@
1983
1977
  min-width: 0;
1984
1978
  appearance: textfield;
1985
1979
  }
1986
- .bds018-input::-webkit-inner-spin-button,
1987
- .bds018-input::-webkit-outer-spin-button {
1980
+ .bds0110NumberInput-input::-webkit-inner-spin-button,
1981
+ .bds0110NumberInput-input::-webkit-outer-spin-button {
1988
1982
  appearance: none;
1989
1983
  }
1990
- .bds018-inputError {
1991
- border-color: var(--color_error);
1984
+ .bds0110NumberInput-inputError {
1985
+ --numberInput_border-color: var(--color_error);
1992
1986
  }
1993
- .bds018-inputError:focus-within {
1994
- border-color: var(--color_error);
1995
- box-shadow: 0 0 0 2px rgb(from var(--color_error) r g b / 20%);
1987
+ .bds0110NumberInput-inputError:focus-within {
1988
+ --numberInput_focus-ring: 0 0 0 2px rgb(from var(--color_error) r g b / 20%);
1996
1989
  }
1997
- .bds018-stepper {
1990
+ .bds0110NumberInput-stepper {
1998
1991
  all: unset;
1999
1992
  display: flex;
2000
1993
  align-items: center;
@@ -2006,16 +1999,16 @@
2006
1999
  transition: var(--animation_transition);
2007
2000
  flex-shrink: 0;
2008
2001
  }
2009
- .bds018-stepper svg {
2002
+ .bds0110NumberInput-stepper svg {
2010
2003
  width: 1rem;
2011
2004
  height: 1rem;
2012
2005
  }
2013
- .bds018-stepper:disabled {
2006
+ .bds0110NumberInput-stepper:disabled {
2014
2007
  opacity: 0.4;
2015
2008
  cursor: not-allowed;
2016
2009
  }
2017
2010
  @media (hover: hover) and (pointer: fine) {
2018
- .bds018-stepper:not(:disabled):hover {
2011
+ .bds0110NumberInput-stepper:not(:disabled):hover {
2019
2012
  background-color: var(--color_bg--subtle);
2020
2013
  opacity: 0.7;
2021
2014
  }
@@ -2024,23 +2017,23 @@
2024
2017
 
2025
2018
  /* src/components/interaction/form/Radio/Radio.module.css */
2026
2019
  @layer component {
2027
- .bds018-radioGroup {
2020
+ .bds0110Radio-radioGroup {
2028
2021
  --inputSize: calc(var(--space_s) * 2);
2029
2022
  --labelPosition: calc(var(--inputSize) + var(--space_m));
2030
2023
  display: flex;
2031
2024
  flex-direction: column;
2032
2025
  }
2033
- .bds018-inputWrapper {
2026
+ .bds0110Radio-inputWrapper {
2034
2027
  display: flex;
2035
2028
  align-items: stretch;
2036
2029
  gap: var(--space_xs);
2037
2030
  }
2038
- .bds018-radio {
2031
+ .bds0110Radio-radio {
2039
2032
  flex-shrink: 0;
2040
2033
  margin-block-start: 0.25em;
2041
2034
  width: var(--inputSize);
2042
2035
  height: var(--inputSize);
2043
- border: 1px solid var(--color_on-bg);
2036
+ border: 1px solid currentcolor;
2044
2037
  border-radius: 50%;
2045
2038
  appearance: none;
2046
2039
  background-color: var(--color_bg);
@@ -2048,31 +2041,30 @@
2048
2041
  position: relative;
2049
2042
  transition: background-color 0.3s ease, border-color 0.3s ease;
2050
2043
  }
2051
- .bds018-radio:checked {
2052
- background-color: var(--color_green);
2053
- border-color: var(--color_green);
2054
- box-shadow: 0 0 0 2px var(--color_green);
2044
+ .bds0110Radio-radio:checked {
2045
+ background-color: var(--radio_color-active, var(--color_active));
2046
+ border-color: var(--radio_color-active, var(--color_active));
2055
2047
  }
2056
- .bds018-radio:checked::after {
2048
+ .bds0110Radio-radio:checked::after {
2057
2049
  content: "";
2058
2050
  position: absolute;
2059
2051
  left: 0.6em;
2060
2052
  top: 0.25em;
2061
2053
  width: 0.5em;
2062
2054
  height: 1em;
2063
- border: solid var(--color_on-green);
2055
+ border: solid var(--radio_color-on-active, var(--color_on-active));
2064
2056
  border-width: 0 2px 2px 0;
2065
2057
  transform: rotate(45deg);
2066
2058
  }
2067
- .bds018-radio:focus {
2059
+ .bds0110Radio-radio:focus {
2068
2060
  outline: none;
2069
2061
  border-color: var(--color_interactive);
2070
- box-shadow: 0 0 0 2px var(--color_green);
2062
+ box-shadow: 0 0 0 2px rgb(from var(--color_interactive) r g b / 20%);
2071
2063
  }
2072
- .bds018-radioError {
2064
+ .bds0110Radio-radioError {
2073
2065
  border-color: var(--color_error);
2074
2066
  }
2075
- .bds018-radioError:focus {
2067
+ .bds0110Radio-radioError:focus {
2076
2068
  border-color: var(--color_error);
2077
2069
  box-shadow: 0 0 0 2px rgb(from var(--color_error) r g b / 20%);
2078
2070
  }
@@ -2080,47 +2072,45 @@
2080
2072
 
2081
2073
  /* src/components/interaction/form/Select/Select.module.css */
2082
2074
  @layer component {
2083
- .bds018-formGroup {
2075
+ .bds0110Select-formGroup {
2084
2076
  display: flex;
2085
2077
  flex-direction: column;
2086
2078
  }
2087
- .bds018-selectWrapper {
2079
+ .bds0110Select-selectWrapper {
2088
2080
  position: relative;
2089
2081
  display: flex;
2090
2082
  align-items: center;
2091
2083
  }
2092
- .bds018-select {
2093
- --select_border-color: var(--color_on-bg);
2094
- --select_focus-ring: 0 0 0 2px rgb(from var(--color_interactive) r g b / 20%);
2084
+ .bds0110Select-select {
2095
2085
  appearance: none;
2096
2086
  width: 100%;
2097
2087
  font-family: var(--font_family--body);
2098
2088
  font-size: var(--font_size--body);
2099
2089
  padding: var(--space_s);
2100
2090
  padding-inline-end: var(--space_xxl);
2101
- border: 1px solid var(--select_border-color);
2091
+ border: 1px solid var(--select_border-color, currentcolor);
2102
2092
  border-radius: var(--border_radius--xs);
2103
2093
  background-color: var(--color_bg);
2104
2094
  color: var(--color_on-bg);
2105
2095
  cursor: pointer;
2106
2096
  transition: var(--animation_transition);
2107
2097
  }
2108
- .bds018-select:focus {
2098
+ .bds0110Select-select:focus {
2109
2099
  --select_border-color: var(--color_interactive);
2110
2100
  outline: none;
2111
- box-shadow: var(--select_focus-ring);
2101
+ box-shadow: var(--select_focus-ring, 0 0 0 2px rgb(from var(--color_interactive) r g b / 20%));
2112
2102
  }
2113
- .bds018-select:disabled {
2103
+ .bds0110Select-select:disabled {
2114
2104
  opacity: 0.5;
2115
2105
  cursor: not-allowed;
2116
2106
  }
2117
- .bds018-selectError {
2107
+ .bds0110Select-selectError {
2118
2108
  --select_border-color: var(--color_error);
2119
2109
  }
2120
- .bds018-selectError:focus {
2110
+ .bds0110Select-selectError:focus {
2121
2111
  --select_focus-ring: 0 0 0 2px rgb(from var(--color_error) r g b / 20%);
2122
2112
  }
2123
- .bds018-chevron {
2113
+ .bds0110Select-chevron {
2124
2114
  position: absolute;
2125
2115
  inset-inline-end: var(--space_s);
2126
2116
  display: flex;
@@ -2128,7 +2118,7 @@
2128
2118
  pointer-events: none;
2129
2119
  color: var(--color_on-bg);
2130
2120
  }
2131
- .bds018-chevron svg {
2121
+ .bds0110Select-chevron svg {
2132
2122
  width: 1rem;
2133
2123
  height: 1rem;
2134
2124
  }
@@ -2136,22 +2126,22 @@
2136
2126
 
2137
2127
  /* src/components/interaction/form/Slider/Slider.module.css */
2138
2128
  @layer component {
2139
- .bds018-formGroup {
2129
+ .bds0110Slider-formGroup {
2140
2130
  display: flex;
2141
2131
  flex-direction: column;
2142
2132
  gap: var(--space_xxs);
2143
2133
  }
2144
- .bds018-labelRow {
2134
+ .bds0110Slider-labelRow {
2145
2135
  display: flex;
2146
2136
  justify-content: space-between;
2147
2137
  align-items: baseline;
2148
2138
  }
2149
- .bds018-value {
2139
+ .bds0110Slider-value {
2150
2140
  font-size: var(--font_size--body--s);
2151
2141
  font-variant-numeric: tabular-nums;
2152
2142
  color: var(--color_on-bg--subtle);
2153
2143
  }
2154
- .bds018-slider {
2144
+ .bds0110Slider-slider {
2155
2145
  --slider_fill: 0%;
2156
2146
  --slider_track-height: var(--space_xxs);
2157
2147
  --slider_thumb-size: calc(var(--space_s) * 2);
@@ -2162,42 +2152,42 @@
2162
2152
  background:
2163
2153
  linear-gradient(
2164
2154
  to right,
2165
- var(--color_green) 0%,
2166
- var(--color_green) var(--slider_fill),
2155
+ var(--slider_color-active, var(--color_active)) 0%,
2156
+ var(--slider_color-active, var(--color_active)) var(--slider_fill),
2167
2157
  var(--color_bg--subtle) var(--slider_fill),
2168
2158
  var(--color_bg--subtle) 100%);
2169
2159
  cursor: pointer;
2170
2160
  transition: var(--animation_transition);
2171
2161
  }
2172
- .bds018-slider:focus-visible {
2162
+ .bds0110Slider-slider:focus-visible {
2173
2163
  outline: var(--outline_default);
2174
2164
  outline-offset: var(--outline_offset);
2175
2165
  border-radius: 999px;
2176
2166
  }
2177
- .bds018-slider:disabled {
2167
+ .bds0110Slider-slider:disabled {
2178
2168
  opacity: 0.4;
2179
2169
  cursor: not-allowed;
2180
2170
  }
2181
- .bds018-slider::-webkit-slider-thumb {
2171
+ .bds0110Slider-slider::-webkit-slider-thumb {
2182
2172
  appearance: none;
2183
2173
  width: var(--slider_thumb-size);
2184
2174
  height: var(--slider_thumb-size);
2185
2175
  border-radius: 50%;
2186
- background-color: var(--color_green);
2176
+ background-color: var(--slider_color-active, var(--color_active));
2187
2177
  box-shadow: var(--shadow_s);
2188
2178
  transition: var(--animation_transition);
2189
2179
  cursor: pointer;
2190
2180
  }
2191
- .bds018-slider::-moz-range-thumb {
2181
+ .bds0110Slider-slider::-moz-range-thumb {
2192
2182
  width: var(--slider_thumb-size);
2193
2183
  height: var(--slider_thumb-size);
2194
2184
  border: none;
2195
2185
  border-radius: 50%;
2196
- background-color: var(--color_green);
2186
+ background-color: var(--slider_color-active, var(--color_active));
2197
2187
  box-shadow: var(--shadow_s);
2198
2188
  cursor: pointer;
2199
2189
  }
2200
- .bds018-sliderError {
2190
+ .bds0110Slider-sliderError {
2201
2191
  background:
2202
2192
  linear-gradient(
2203
2193
  to right,
@@ -2206,16 +2196,16 @@
2206
2196
  var(--color_bg--subtle) var(--slider_fill),
2207
2197
  var(--color_bg--subtle) 100%);
2208
2198
  }
2209
- .bds018-sliderError::-webkit-slider-thumb {
2199
+ .bds0110Slider-sliderError::-webkit-slider-thumb {
2210
2200
  background-color: var(--color_error);
2211
2201
  }
2212
- .bds018-sliderError::-moz-range-thumb {
2202
+ .bds0110Slider-sliderError::-moz-range-thumb {
2213
2203
  background-color: var(--color_error);
2214
2204
  }
2215
2205
  @media (prefers-reduced-motion: reduce) {
2216
- .bds018-slider,
2217
- .bds018-slider::-webkit-slider-thumb,
2218
- .bds018-slider::-moz-range-thumb {
2206
+ .bds0110Slider-slider,
2207
+ .bds0110Slider-slider::-webkit-slider-thumb,
2208
+ .bds0110Slider-slider::-moz-range-thumb {
2219
2209
  transition: none;
2220
2210
  }
2221
2211
  }
@@ -2223,33 +2213,33 @@
2223
2213
 
2224
2214
  /* src/components/interaction/form/Switch/Switch.module.css */
2225
2215
  @layer component {
2226
- .bds018-switchGroup {
2216
+ .bds0110Switch-switchGroup {
2227
2217
  --switch_thumb-size: 1.25em;
2228
2218
  --switch_track-pad: var(--space_xxxs);
2229
2219
  --switch_track-height: calc(var(--switch_thumb-size) + var(--switch_track-pad) * 2);
2230
2220
  --switch_track-width: calc(var(--switch_thumb-size) * 2 + var(--switch_track-pad) * 2);
2231
2221
  --track_bg: var(--color_grey--subtle);
2232
- --track_active: var(--color_green--subtle);
2222
+ --track_active: var(--color_active--subtle);
2233
2223
  --thumb_bg: var(--color_grey);
2234
- --thumb_bg--active: var(--color_green--strong);
2224
+ --thumb_bg--active: var(--color_active--strong);
2235
2225
  display: flex;
2236
2226
  flex-direction: column;
2237
2227
  }
2238
- .bds018-switchGroup.bds018---size_small {
2228
+ .bds0110Switch-switchGroup.bds0110Switch---size_small {
2239
2229
  --switch_thumb-size: 1em;
2240
2230
  }
2241
- .bds018-switchGroup.bds018---size_medium {
2231
+ .bds0110Switch-switchGroup.bds0110Switch---size_medium {
2242
2232
  --switch_thumb-size: 1.25em;
2243
2233
  }
2244
- .bds018-switchGroup.bds018---size_large {
2234
+ .bds0110Switch-switchGroup.bds0110Switch---size_large {
2245
2235
  --switch_thumb-size: 1.5em;
2246
2236
  }
2247
- .bds018-inputWrapper {
2237
+ .bds0110Switch-inputWrapper {
2248
2238
  display: flex;
2249
2239
  align-items: center;
2250
2240
  gap: var(--space_xs);
2251
2241
  }
2252
- .bds018-trackWrapper {
2242
+ .bds0110Switch-trackWrapper {
2253
2243
  position: relative;
2254
2244
  display: inline-flex;
2255
2245
  align-items: center;
@@ -2257,7 +2247,7 @@
2257
2247
  width: var(--switch_track-width);
2258
2248
  height: var(--switch_track-height);
2259
2249
  }
2260
- .bds018-switch {
2250
+ .bds0110Switch-switch {
2261
2251
  position: absolute;
2262
2252
  inset: 0;
2263
2253
  appearance: none;
@@ -2268,10 +2258,10 @@
2268
2258
  cursor: pointer;
2269
2259
  z-index: 1;
2270
2260
  }
2271
- .bds018-switch:disabled {
2261
+ .bds0110Switch-switch:disabled {
2272
2262
  cursor: not-allowed;
2273
2263
  }
2274
- .bds018-track {
2264
+ .bds0110Switch-track {
2275
2265
  display: inline-flex;
2276
2266
  align-items: center;
2277
2267
  width: var(--switch_track-width);
@@ -2284,7 +2274,7 @@
2284
2274
  outline: 1px solid var(--thumb_bg);
2285
2275
  outline-offset: var(--outline_offset);
2286
2276
  }
2287
- .bds018-thumb {
2277
+ .bds0110Switch-thumb {
2288
2278
  display: block;
2289
2279
  width: var(--switch_thumb-size);
2290
2280
  height: var(--switch_thumb-size);
@@ -2294,28 +2284,28 @@
2294
2284
  transition: var(--animation_transition);
2295
2285
  transform: translateX(0);
2296
2286
  }
2297
- .bds018-switch.bds018-switchError + .bds018-track {
2287
+ .bds0110Switch-switch.bds0110Switch-switchError + .bds0110Switch-track {
2298
2288
  outline: 1px solid var(--color_error);
2299
2289
  }
2300
- .bds018-switch:checked + .bds018-track {
2290
+ .bds0110Switch-switch:checked + .bds0110Switch-track {
2301
2291
  background-color: var(--track_active);
2302
2292
  outline-color: var(--thumb_bg--active);
2303
2293
  }
2304
- .bds018-switch:checked + .bds018-track .bds018-thumb {
2294
+ .bds0110Switch-switch:checked + .bds0110Switch-track .bds0110Switch-thumb {
2305
2295
  background-color: var(--thumb_bg--active);
2306
2296
  transform: translateX(var(--switch_thumb-size));
2307
2297
  }
2308
- .bds018-switch:focus-visible + .bds018-track {
2298
+ .bds0110Switch-switch:focus-visible + .bds0110Switch-track {
2309
2299
  outline: var(--outline_default);
2310
2300
  outline-offset: var(--outline_offset);
2311
2301
  border-radius: 999px;
2312
2302
  }
2313
- .bds018-switch:disabled + .bds018-track {
2303
+ .bds0110Switch-switch:disabled + .bds0110Switch-track {
2314
2304
  opacity: 0.4;
2315
2305
  }
2316
2306
  @media (prefers-reduced-motion: reduce) {
2317
- .bds018-track,
2318
- .bds018-thumb {
2307
+ .bds0110Switch-track,
2308
+ .bds0110Switch-thumb {
2319
2309
  transition: none;
2320
2310
  }
2321
2311
  }
@@ -2323,18 +2313,16 @@
2323
2313
 
2324
2314
  /* src/components/interaction/form/Textarea/Textarea.module.css */
2325
2315
  @layer component {
2326
- .bds018-formGroup {
2316
+ .bds0110Textarea-formGroup {
2327
2317
  display: flex;
2328
2318
  flex-direction: column;
2329
2319
  }
2330
- .bds018-textarea {
2331
- --textarea_border-color: var(--color_on-bg);
2332
- --textarea_focus-ring: 0 0 0 2px rgb(from var(--color_interactive) r g b / 20%);
2320
+ .bds0110Textarea-textarea {
2333
2321
  font-family: var(--font_family--body);
2334
2322
  font-size: var(--font_size--body);
2335
2323
  line-height: var(--font_line-height--body);
2336
2324
  padding: var(--space_s);
2337
- border: 1px solid var(--textarea_border-color);
2325
+ border: 1px solid var(--textarea_border-color, currentcolor);
2338
2326
  border-radius: var(--border_radius--xs);
2339
2327
  background-color: var(--color_bg);
2340
2328
  color: var(--color_on-bg);
@@ -2342,69 +2330,69 @@
2342
2330
  min-height: calc(var(--space_m) * 5);
2343
2331
  transition: var(--animation_transition);
2344
2332
  }
2345
- .bds018-textarea:focus {
2333
+ .bds0110Textarea-textarea:focus {
2346
2334
  --textarea_border-color: var(--color_interactive);
2347
2335
  outline: none;
2348
- box-shadow: var(--textarea_focus-ring);
2336
+ box-shadow: var(--textarea_focus-ring, 0 0 0 2px rgb(from var(--color_interactive) r g b / 20%));
2349
2337
  }
2350
- .bds018-textarea:disabled {
2338
+ .bds0110Textarea-textarea:disabled {
2351
2339
  opacity: 0.5;
2352
2340
  cursor: not-allowed;
2353
2341
  resize: none;
2354
2342
  }
2355
- .bds018-textareaError {
2343
+ .bds0110Textarea-textareaError {
2356
2344
  --textarea_border-color: var(--color_error);
2357
2345
  }
2358
- .bds018-textareaError:focus {
2346
+ .bds0110Textarea-textareaError:focus {
2359
2347
  --textarea_focus-ring: 0 0 0 2px rgb(from var(--color_error) r g b / 20%);
2360
2348
  }
2361
2349
  }
2362
2350
 
2363
2351
  /* src/components/layout/ButtonGroup/ButtonGroup.module.css */
2364
2352
  @layer component {
2365
- .bds018-buttonGroup {
2353
+ .bds0110ButtonGroup-buttonGroup {
2366
2354
  container-type: inline-size;
2367
2355
  container-name: button-group;
2368
2356
  grid-column: var(--grid_span-100);
2369
2357
  }
2370
- .bds018-buttonGroup .bds018-container {
2358
+ .bds0110ButtonGroup-buttonGroup .bds0110ButtonGroup-container {
2371
2359
  position: relative;
2372
2360
  display: flex;
2373
2361
  flex-direction: column-reverse;
2374
2362
  gap: var(--space_l);
2375
2363
  align-items: center;
2376
2364
  }
2377
- .bds018-buttonGroup.bds018---variant__card .bds018-container {
2365
+ .bds0110ButtonGroup-buttonGroup.bds0110ButtonGroup---variant__card .bds0110ButtonGroup-container {
2378
2366
  align-items: stretch;
2379
2367
  }
2380
- .bds018-buttonGroup.bds018---variant__flow .bds018-container,
2381
- .bds018-buttonGroup.bds018---variant__modal .bds018-container {
2368
+ .bds0110ButtonGroup-buttonGroup.bds0110ButtonGroup---variant__flow .bds0110ButtonGroup-container,
2369
+ .bds0110ButtonGroup-buttonGroup.bds0110ButtonGroup---variant__modal .bds0110ButtonGroup-container {
2382
2370
  align-items: center;
2383
2371
  }
2384
- .bds018-buttonGroup.bds018---variant__content .bds018-container {
2372
+ .bds0110ButtonGroup-buttonGroup.bds0110ButtonGroup---variant__content .bds0110ButtonGroup-container {
2385
2373
  align-items: flex-start;
2386
2374
  }
2387
2375
  @supports (contain: inline-size) {
2388
2376
  @container button-group (min-width: 30rem) {
2389
- .bds018-buttonGroup .bds018-container {
2377
+ .bds0110ButtonGroup-buttonGroup .bds0110ButtonGroup-container {
2390
2378
  flex-direction: row;
2391
2379
  justify-content: space-between;
2392
2380
  }
2393
- .bds018-buttonGroup.bds018---variant__modal .bds018-container > :first-child:last-child,
2394
- .bds018-buttonGroup.bds018---variant__flow .bds018-container > :first-child:last-child {
2381
+ .bds0110ButtonGroup-buttonGroup.bds0110ButtonGroup---variant__modal .bds0110ButtonGroup-container > :first-child:last-child,
2382
+ .bds0110ButtonGroup-buttonGroup.bds0110ButtonGroup---variant__flow .bds0110ButtonGroup-container > :first-child:last-child {
2395
2383
  margin-inline-start: auto;
2396
2384
  }
2397
- .bds018-buttonGroup.bds018---variant__card .bds018-container {
2385
+ .bds0110ButtonGroup-buttonGroup.bds0110ButtonGroup---variant__card .bds0110ButtonGroup-container {
2398
2386
  justify-content: center;
2399
2387
  }
2400
- .bds018-buttonGroup.bds018---variant__modal .bds018-container {
2388
+ .bds0110ButtonGroup-buttonGroup.bds0110ButtonGroup---variant__modal .bds0110ButtonGroup-container {
2401
2389
  justify-content: flex-end;
2402
2390
  }
2403
- .bds018-buttonGroup.bds018---variant__content .bds018-container {
2391
+ .bds0110ButtonGroup-buttonGroup.bds0110ButtonGroup---variant__content .bds0110ButtonGroup-container {
2404
2392
  justify-content: flex-start;
2405
2393
  align-items: center;
2406
2394
  }
2407
- .bds018-buttonGroup.bds018---variant__grid .bds018-container {
2395
+ .bds0110ButtonGroup-buttonGroup.bds0110ButtonGroup---variant__grid .bds0110ButtonGroup-container {
2408
2396
  justify-content: center;
2409
2397
  }
2410
2398
  }
@@ -2413,59 +2401,59 @@
2413
2401
 
2414
2402
  /* src/components/layout/Card/Card.module.css */
2415
2403
  @layer component {
2416
- .bds018-card {
2404
+ .bds0110Card-card {
2417
2405
  background-color: var(--card_color, var(--color_bg));
2418
2406
  color: var(--card_on-color, var(--color_on-bg));
2419
2407
  border-radius: var(--border_radius--m);
2420
2408
  transition: all 0.3s ease;
2421
2409
  position: relative;
2422
2410
  }
2423
- .bds018-card.bds018---default {
2411
+ .bds0110Card-card.bds0110Card---default {
2424
2412
  box-shadow: var(--shadow_s);
2425
2413
  }
2426
- .bds018-card.bds018---elevated {
2414
+ .bds0110Card-card.bds0110Card---elevated {
2427
2415
  box-shadow: var(--shadow_m);
2428
2416
  }
2429
- .bds018-card.bds018---outlined {
2417
+ .bds0110Card-card.bds0110Card---outlined {
2430
2418
  border: 1px solid currentcolor;
2431
2419
  box-shadow: var(--shadow_s);
2432
2420
  }
2433
- .bds018-card.bds018---clickable {
2421
+ .bds0110Card-card.bds0110Card---clickable {
2434
2422
  cursor: pointer;
2435
2423
  }
2436
- .bds018-card.bds018---padding-none {
2424
+ .bds0110Card-card.bds0110Card---padding-none {
2437
2425
  padding: 0;
2438
2426
  }
2439
- .bds018-card.bds018---padding-small {
2427
+ .bds0110Card-card.bds0110Card---padding-small {
2440
2428
  padding: var(--space_s);
2441
2429
  }
2442
- .bds018-card.bds018---padding-medium {
2430
+ .bds0110Card-card.bds0110Card---padding-medium {
2443
2431
  padding: var(--space_m);
2444
2432
  }
2445
- .bds018-card.bds018---padding-large {
2433
+ .bds0110Card-card.bds0110Card---padding-large {
2446
2434
  padding: var(--space_l);
2447
2435
  }
2448
- .bds018-card.bds018---text-start {
2436
+ .bds0110Card-card.bds0110Card---text-start {
2449
2437
  text-align: left;
2450
2438
  }
2451
- .bds018-card.bds018---text-center {
2439
+ .bds0110Card-card.bds0110Card---text-center {
2452
2440
  text-align: center;
2453
2441
  }
2454
- .bds018-card.bds018---text-end {
2442
+ .bds0110Card-card.bds0110Card---text-end {
2455
2443
  text-align: right;
2456
2444
  }
2457
2445
  @media (hover: hover) and (pointer: fine) {
2458
- .bds018-card.bds018---clickable:hover {
2446
+ .bds0110Card-card.bds0110Card---clickable:hover {
2459
2447
  transform: translateY(-2px);
2460
2448
  box-shadow: var(--shadow_xl);
2461
2449
  }
2462
- .bds018-card.bds018---default:hover {
2450
+ .bds0110Card-card.bds0110Card---default:hover {
2463
2451
  box-shadow: var(--shadow_m);
2464
2452
  }
2465
- .bds018-card.bds018---elevated:hover {
2453
+ .bds0110Card-card.bds0110Card---elevated:hover {
2466
2454
  box-shadow: var(--shadow_2xl);
2467
2455
  }
2468
- .bds018-card.bds018---outlined:hover {
2456
+ .bds0110Card-card.bds0110Card---outlined:hover {
2469
2457
  box-shadow: var(--shadow_s);
2470
2458
  }
2471
2459
  }
@@ -2473,60 +2461,60 @@
2473
2461
 
2474
2462
  /* src/components/layout/SectionHeader/SectionHeader.module.css */
2475
2463
  @layer component {
2476
- .bds018-sectionHeader {
2464
+ .bds0110SectionHeader-sectionHeader {
2477
2465
  display: flex;
2478
2466
  flex-direction: column;
2479
2467
  gap: var(--space_m);
2480
2468
  grid-column: var(--grid_span-100);
2481
2469
  }
2482
- .bds018-title {
2470
+ .bds0110SectionHeader-title {
2483
2471
  color: var(--sectionHeader-title-color, var(--color_on-bg));
2484
2472
  margin: 0;
2485
2473
  font-family: var(--font_family--body);
2486
2474
  }
2487
- .bds018-subtitle {
2475
+ .bds0110SectionHeader-subtitle {
2488
2476
  color: var(--sectionHeader_subtitle-color, var(--color_grey--strong));
2489
2477
  margin: 0;
2490
2478
  font-family: var(--font_family--body);
2491
2479
  font-weight: var(--font_weight--medium);
2492
2480
  }
2493
- .bds018-sectionHeader.bds018---start {
2481
+ .bds0110SectionHeader-sectionHeader.bds0110SectionHeader---start {
2494
2482
  align-items: flex-start;
2495
2483
  text-align: left;
2496
2484
  }
2497
- .bds018-sectionHeader.bds018---center {
2485
+ .bds0110SectionHeader-sectionHeader.bds0110SectionHeader---center {
2498
2486
  align-items: center;
2499
2487
  text-align: center;
2500
2488
  }
2501
- .bds018-sectionHeader.bds018---end {
2489
+ .bds0110SectionHeader-sectionHeader.bds0110SectionHeader---end {
2502
2490
  align-items: flex-end;
2503
2491
  text-align: right;
2504
2492
  }
2505
- .bds018-sectionHeader.bds018---small .bds018-title {
2493
+ .bds0110SectionHeader-sectionHeader.bds0110SectionHeader---small .bds0110SectionHeader-title {
2506
2494
  font-size: var(--font_size--heading-1);
2507
2495
  line-height: var(--font_line-height--heading);
2508
2496
  font-weight: var(--font_weight--bold);
2509
2497
  }
2510
- .bds018-sectionHeader.bds018---small .bds018-subtitle {
2498
+ .bds0110SectionHeader-sectionHeader.bds0110SectionHeader---small .bds0110SectionHeader-subtitle {
2511
2499
  font-size: var(--font_size--body);
2512
2500
  line-height: 1.4;
2513
2501
  }
2514
- .bds018-sectionHeader.bds018---medium .bds018-title {
2502
+ .bds0110SectionHeader-sectionHeader.bds0110SectionHeader---medium .bds0110SectionHeader-title {
2515
2503
  font-size: var(--font_size--display);
2516
2504
  line-height: var(--font_line-height--display);
2517
2505
  font-weight: var(--font_weight--bold);
2518
2506
  }
2519
- .bds018-sectionHeader.bds018---medium .bds018-subtitle {
2507
+ .bds0110SectionHeader-sectionHeader.bds0110SectionHeader---medium .bds0110SectionHeader-subtitle {
2520
2508
  font-size: var(--font_size--heading-3);
2521
2509
  line-height: 1.3;
2522
2510
  }
2523
- .bds018-sectionHeader.bds018---large .bds018-title {
2511
+ .bds0110SectionHeader-sectionHeader.bds0110SectionHeader---large .bds0110SectionHeader-title {
2524
2512
  font-size: var(--font_size--display);
2525
2513
  line-height: var(--font_line-height--display);
2526
2514
  font-weight: var(--font_weight--bold);
2527
2515
  letter-spacing: var(--font_tracking--tight);
2528
2516
  }
2529
- .bds018-sectionHeader.bds018---large .bds018-subtitle {
2517
+ .bds0110SectionHeader-sectionHeader.bds0110SectionHeader---large .bds0110SectionHeader-subtitle {
2530
2518
  font-size: var(--font_size--heading-2);
2531
2519
  line-height: 1.3;
2532
2520
  font-weight: var(--font_weight--medium);
@@ -2535,7 +2523,7 @@
2535
2523
 
2536
2524
  /* src/components/layout/IconWrapper/IconWrapper.module.css */
2537
2525
  @layer component {
2538
- .bds018-wrapper {
2526
+ .bds0110IconWrapper-wrapper {
2539
2527
  width: 2em;
2540
2528
  height: 2em;
2541
2529
  font-size: 3em;
@@ -2550,7 +2538,7 @@
2550
2538
  position: relative;
2551
2539
  transition: var(--animation_transition);
2552
2540
  }
2553
- .bds018-wrapper svg {
2541
+ .bds0110IconWrapper-wrapper svg {
2554
2542
  fill: currentcolor;
2555
2543
  }
2556
2544
  }