@boostdev/design-system-components 0.1.14 → 0.1.16

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