@boostdev/design-system-components 1.0.0 → 1.0.2

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 (39) hide show
  1. package/AGENTS.md +7 -7
  2. package/dist/client.cjs +57 -51
  3. package/dist/client.css +552 -552
  4. package/dist/client.js +57 -51
  5. package/dist/index.cjs +57 -51
  6. package/dist/index.css +552 -552
  7. package/dist/index.js +57 -51
  8. package/package.json +3 -3
  9. package/src/components/interaction/Button/Button.mdx +6 -6
  10. package/src/components/interaction/Button/Button.module.css +2 -2
  11. package/src/components/interaction/Command/Command.module.css +7 -7
  12. package/src/components/interaction/Dialog/Dialog.module.css +7 -7
  13. package/src/components/interaction/DropdownMenu/DropdownMenu.module.css +5 -5
  14. package/src/components/interaction/Popover/Popover.module.css +4 -4
  15. package/src/components/interaction/form/Checkbox/Checkbox.module.css +5 -5
  16. package/src/components/interaction/form/Combobox/Combobox.module.css +9 -9
  17. package/src/components/interaction/form/FormInput/FormInput.module.css +5 -5
  18. package/src/components/interaction/form/NumberInput/NumberInput.module.css +5 -5
  19. package/src/components/interaction/form/NumberInput/NumberInput.tsx +7 -1
  20. package/src/components/interaction/form/Radio/Radio.module.css +5 -5
  21. package/src/components/interaction/form/SegmentedControl/SegmentedControl.module.css +1 -1
  22. package/src/components/interaction/form/Select/Select.module.css +5 -5
  23. package/src/components/interaction/form/Switch/Switch.module.css +2 -2
  24. package/src/components/interaction/form/Textarea/Textarea.module.css +5 -5
  25. package/src/components/interaction/form/atoms/Message.module.css +1 -1
  26. package/src/components/layout/Card/Card.module.css +2 -2
  27. package/src/components/ui/Accordion/Accordion.module.css +4 -4
  28. package/src/components/ui/Alert/Alert.module.css +2 -2
  29. package/src/components/ui/Breadcrumb/Breadcrumb.module.css +1 -1
  30. package/src/components/ui/Calendar/Calendar.module.css +6 -6
  31. package/src/components/ui/Carousel/Carousel.module.css +2 -2
  32. package/src/components/ui/Link/Link.module.css +4 -4
  33. package/src/components/ui/NotificationBanner/NotificationBanner.module.css +2 -2
  34. package/src/components/ui/Pagination/Pagination.module.css +2 -2
  35. package/src/components/ui/SkipLink/SkipLink.module.css +2 -2
  36. package/src/components/ui/Table/Table.module.css +4 -4
  37. package/src/components/ui/Tabs/Tabs.module.css +2 -2
  38. package/src/css/bdc.css +18 -13
  39. package/src/stories/DesignSystem/Borders.mdx +11 -11
package/dist/client.css CHANGED
@@ -1,26 +1,26 @@
1
1
  /* src/components/ui/Accordion/Accordion.module.css */
2
2
  @layer component {
3
- .bds100Accordion-accordion {
3
+ .bds102Accordion-accordion {
4
4
  display: flex;
5
5
  flex-direction: column;
6
6
  border: var(--accordion_border, none);
7
7
  --bdc_color: var(--bds-bg--subtle);
8
- --bdc_radius: var(--bds-border_radius--s);
9
- outline: var(--bdc_width) solid var(--bdc_color);
10
- outline-offset: var(--bdc_offset);
11
- border-radius: var(--accordion_radius, var(--bdc_radius));
8
+ --bdc-outline_radius: var(--bds-border_radius--s);
9
+ outline: var(--bdc-outline_width) solid var(--bdc_color);
10
+ outline-offset: var(--bdc-outline_offset);
11
+ border-radius: var(--accordion_radius, var(--bdc-outline_radius));
12
12
  overflow: hidden;
13
13
  }
14
- .bds100Accordion-item {
14
+ .bds102Accordion-item {
15
15
  border-bottom: 1px solid var(--bds-bg--subtle);
16
16
  }
17
- .bds100Accordion-item:last-child {
17
+ .bds102Accordion-item:last-child {
18
18
  border-bottom: none;
19
19
  }
20
- .bds100Accordion-heading {
20
+ .bds102Accordion-heading {
21
21
  margin: 0;
22
22
  }
23
- .bds100Accordion-trigger {
23
+ .bds102Accordion-trigger {
24
24
  all: unset;
25
25
  display: flex;
26
26
  align-items: center;
@@ -35,44 +35,44 @@
35
35
  transition: var(--bds-animation_transition);
36
36
  box-sizing: border-box;
37
37
  }
38
- .bds100Accordion-trigger:disabled {
38
+ .bds102Accordion-trigger:disabled {
39
39
  opacity: 0.4;
40
40
  cursor: not-allowed;
41
41
  }
42
- .bds100Accordion-trigger:focus-visible {
42
+ .bds102Accordion-trigger:focus-visible {
43
43
  outline: var(--bds-outline_default);
44
44
  outline-offset: calc(var(--bds-outline_offset) * -1);
45
45
  border-radius: var(--bds-border_radius--xs);
46
46
  }
47
47
  @media (hover: hover) and (pointer: fine) {
48
- .bds100Accordion-trigger:not(:disabled):hover {
48
+ .bds102Accordion-trigger:not(:disabled):hover {
49
49
  background-color: var(--bds-bg--subtle);
50
50
  }
51
51
  }
52
- .bds100Accordion-triggerLabel {
52
+ .bds102Accordion-triggerLabel {
53
53
  flex: 1;
54
54
  text-align: start;
55
55
  }
56
- .bds100Accordion-chevron {
56
+ .bds102Accordion-chevron {
57
57
  width: 1.25rem;
58
58
  height: 1.25rem;
59
59
  flex-shrink: 0;
60
60
  transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
61
61
  }
62
- .bds100Accordion-item.bds100Accordion---open .bds100Accordion-chevron {
62
+ .bds102Accordion-item.bds102Accordion---open .bds102Accordion-chevron {
63
63
  transform: rotate(180deg);
64
64
  }
65
- .bds100Accordion-panel {
65
+ .bds102Accordion-panel {
66
66
  overflow: hidden;
67
67
  }
68
- .bds100Accordion-panelContent {
68
+ .bds102Accordion-panelContent {
69
69
  padding: 0 var(--bds-space_m) var(--bds-space_m);
70
70
  color: var(--bds-on-bg);
71
71
  font-size: var(--bds-font_size--body);
72
72
  line-height: var(--bds-font_line-height--body);
73
73
  }
74
74
  @media (prefers-reduced-motion: reduce) {
75
- .bds100Accordion-chevron {
75
+ .bds102Accordion-chevron {
76
76
  transition: none;
77
77
  }
78
78
  }
@@ -80,7 +80,7 @@
80
80
 
81
81
  /* src/components/ui/Alert/Alert.module.css */
82
82
  @layer component {
83
- .bds100Alert-alert {
83
+ .bds102Alert-alert {
84
84
  display: flex;
85
85
  align-items: flex-start;
86
86
  gap: var(--bds-space_s);
@@ -92,43 +92,43 @@
92
92
  font-size: var(--bds-font_size--body);
93
93
  line-height: var(--bds-font_line-height--body);
94
94
  }
95
- .bds100Alert---variant_info {
95
+ .bds102Alert---variant_info {
96
96
  --alert_bg: var(--bds-blue--subtle);
97
97
  --alert_text: var(--bds-on-blue--subtle);
98
98
  --alert_border: var(--bds-blue);
99
99
  }
100
- .bds100Alert---variant_success {
100
+ .bds102Alert---variant_success {
101
101
  --alert_bg: var(--bds-success--subtle);
102
102
  --alert_text: var(--bds-on-success--subtle);
103
103
  --alert_border: var(--bds-success);
104
104
  }
105
- .bds100Alert---variant_warning {
105
+ .bds102Alert---variant_warning {
106
106
  --alert_bg: var(--bds-orange--subtle);
107
107
  --alert_text: var(--bds-on-orange--subtle);
108
108
  --alert_border: var(--bds-warning);
109
109
  }
110
- .bds100Alert---variant_error {
110
+ .bds102Alert---variant_error {
111
111
  --alert_bg: rgb(from var(--bds-error) r g b / 12%);
112
112
  --alert_text: var(--bds-on-bg);
113
113
  --alert_border: var(--bds-error);
114
114
  }
115
- .bds100Alert-icon {
115
+ .bds102Alert-icon {
116
116
  display: flex;
117
117
  align-items: center;
118
118
  flex-shrink: 0;
119
119
  margin-block-start: 0.1em;
120
120
  }
121
- .bds100Alert-content {
121
+ .bds102Alert-content {
122
122
  flex: 1;
123
123
  display: flex;
124
124
  flex-direction: column;
125
125
  gap: var(--bds-space_xxs);
126
126
  }
127
- .bds100Alert-title {
127
+ .bds102Alert-title {
128
128
  font-weight: var(--bds-font_weight--semibold);
129
129
  font-size: var(--bds-font_size--body);
130
130
  }
131
- .bds100Alert-dismiss {
131
+ .bds102Alert-dismiss {
132
132
  all: unset;
133
133
  display: flex;
134
134
  align-items: center;
@@ -140,19 +140,19 @@
140
140
  border: var(--alert_dismiss-border, none);
141
141
  border-radius: 50%;
142
142
  --bdc_color: currentcolor;
143
- outline: var(--bdc_width) solid var(--bdc_color);
144
- outline-offset: var(--bdc_offset);
143
+ outline: var(--bdc-outline_width) solid var(--bdc_color);
144
+ outline-offset: var(--bdc-outline_offset);
145
145
  }
146
- .bds100Alert-dismiss svg {
146
+ .bds102Alert-dismiss svg {
147
147
  width: 1rem;
148
148
  height: 1rem;
149
149
  }
150
- .bds100Alert-dismiss:focus-visible {
150
+ .bds102Alert-dismiss:focus-visible {
151
151
  outline: var(--bds-outline_default);
152
152
  outline-offset: var(--bds-outline_offset);
153
153
  }
154
154
  @media (hover: hover) and (pointer: fine) {
155
- .bds100Alert-dismiss:hover {
155
+ .bds102Alert-dismiss:hover {
156
156
  opacity: 0.7;
157
157
  }
158
158
  }
@@ -160,7 +160,7 @@
160
160
 
161
161
  /* src/components/ui/Avatar/Avatar.module.css */
162
162
  @layer component {
163
- .bds100Avatar-avatar {
163
+ .bds102Avatar-avatar {
164
164
  display: inline-flex;
165
165
  align-items: center;
166
166
  justify-content: center;
@@ -170,42 +170,42 @@
170
170
  overflow: hidden;
171
171
  flex-shrink: 0;
172
172
  }
173
- .bds100Avatar-avatar.bds100Avatar---fallback {
173
+ .bds102Avatar-avatar.bds102Avatar---fallback {
174
174
  background-color: var(--avatar_bg, var(--bds-blue));
175
175
  color: var(--avatar_text, var(--bds-on-blue));
176
176
  font-weight: var(--bds-font_weight--semibold);
177
177
  }
178
- .bds100Avatar-avatar.bds100Avatar---size_small {
178
+ .bds102Avatar-avatar.bds102Avatar---size_small {
179
179
  --avatar_size: 2em;
180
180
  }
181
- .bds100Avatar-avatar.bds100Avatar---size_medium {
181
+ .bds102Avatar-avatar.bds102Avatar---size_medium {
182
182
  --avatar_size: 3em;
183
183
  }
184
- .bds100Avatar-avatar.bds100Avatar---size_large {
184
+ .bds102Avatar-avatar.bds102Avatar---size_large {
185
185
  --avatar_size: 4.5em;
186
186
  }
187
- .bds100Avatar-image {
187
+ .bds102Avatar-image {
188
188
  width: 100%;
189
189
  height: 100%;
190
190
  object-fit: cover;
191
191
  display: block;
192
192
  }
193
- .bds100Avatar-initials {
193
+ .bds102Avatar-initials {
194
194
  line-height: 1;
195
195
  user-select: none;
196
196
  font-size: var(--bds-font_size--body);
197
197
  }
198
- .bds100Avatar-avatar.bds100Avatar---size_small .bds100Avatar-initials {
198
+ .bds102Avatar-avatar.bds102Avatar---size_small .bds102Avatar-initials {
199
199
  font-size: var(--bds-font_size--body--s);
200
200
  }
201
- .bds100Avatar-avatar.bds100Avatar---size_large .bds100Avatar-initials {
201
+ .bds102Avatar-avatar.bds102Avatar---size_large .bds102Avatar-initials {
202
202
  font-size: var(--bds-font_size--heading-3);
203
203
  }
204
204
  }
205
205
 
206
206
  /* src/components/ui/Badge/Badge.module.css */
207
207
  @layer component {
208
- .bds100Badge-badge {
208
+ .bds102Badge-badge {
209
209
  display: inline-flex;
210
210
  align-items: center;
211
211
  justify-content: center;
@@ -218,23 +218,23 @@
218
218
  background-color: var(--badge_bg, var(--bds-blue));
219
219
  color: var(--badge_text, var(--bds-on-blue));
220
220
  }
221
- .bds100Badge---variant_primary {
221
+ .bds102Badge---variant_primary {
222
222
  --badge_bg: var(--bds-interactive);
223
223
  --badge_text: var(--bds-on-interactive);
224
224
  }
225
- .bds100Badge---variant_secondary {
225
+ .bds102Badge---variant_secondary {
226
226
  --badge_bg: var(--bds-bg);
227
227
  --badge_text: var(--bds-on-bg);
228
228
  }
229
- .bds100Badge---variant_success {
229
+ .bds102Badge---variant_success {
230
230
  --badge_bg: var(--bds-success);
231
231
  --badge_text: var(--bds-on-success);
232
232
  }
233
- .bds100Badge---variant_error {
233
+ .bds102Badge---variant_error {
234
234
  --badge_bg: var(--bds-error);
235
235
  --badge_text: var(--bds-on-error);
236
236
  }
237
- .bds100Badge---variant_warning {
237
+ .bds102Badge---variant_warning {
238
238
  --badge_bg: var(--bds-warning);
239
239
  --badge_text: var(--bds-on-warning);
240
240
  }
@@ -242,10 +242,10 @@
242
242
 
243
243
  /* src/components/ui/Breadcrumb/Breadcrumb.module.css */
244
244
  @layer component {
245
- .bds100Breadcrumb-breadcrumb {
245
+ .bds102Breadcrumb-breadcrumb {
246
246
  font-size: var(--bds-font_size--body--s);
247
247
  }
248
- .bds100Breadcrumb-list {
248
+ .bds102Breadcrumb-list {
249
249
  display: flex;
250
250
  flex-wrap: wrap;
251
251
  align-items: center;
@@ -254,32 +254,32 @@
254
254
  margin: 0;
255
255
  padding: 0;
256
256
  }
257
- .bds100Breadcrumb-item {
257
+ .bds102Breadcrumb-item {
258
258
  display: flex;
259
259
  align-items: center;
260
260
  gap: var(--bds-space_xxs);
261
261
  }
262
- .bds100Breadcrumb-link {
263
- color: var(--bds-interactive);
262
+ .bds102Breadcrumb-link {
263
+ color: var(--bds-color_interactive_on-bg);
264
264
  text-decoration: none;
265
265
  transition: var(--bds-animation_transition);
266
266
  }
267
- .bds100Breadcrumb-link:focus-visible {
267
+ .bds102Breadcrumb-link:focus-visible {
268
268
  outline: var(--bds-outline_default);
269
269
  outline-offset: var(--bds-outline_offset);
270
270
  border-radius: var(--bds-border_radius--xs);
271
271
  }
272
272
  @media (hover: hover) and (pointer: fine) {
273
- .bds100Breadcrumb-link:hover {
273
+ .bds102Breadcrumb-link:hover {
274
274
  text-decoration: underline;
275
275
  text-underline-offset: 0.2em;
276
276
  }
277
277
  }
278
- .bds100Breadcrumb-separator {
278
+ .bds102Breadcrumb-separator {
279
279
  color: var(--bds-on-bg--subtle);
280
280
  user-select: none;
281
281
  }
282
- .bds100Breadcrumb-current {
282
+ .bds102Breadcrumb-current {
283
283
  color: var(--bds-on-bg--subtle);
284
284
  font-weight: var(--bds-font_weight--semibold);
285
285
  }
@@ -287,12 +287,12 @@
287
287
 
288
288
  /* src/components/ui/Collapsible/Collapsible.module.css */
289
289
  @layer component {
290
- .bds100Collapsible-collapsible {
290
+ .bds102Collapsible-collapsible {
291
291
  border: var(--collapsible_border-width, 1px) solid var(--collapsible_border-color, var(--bds-bg--subtle));
292
292
  border-radius: var(--collapsible_border-radius, var(--bds-border_radius--m));
293
293
  overflow: hidden;
294
294
  }
295
- .bds100Collapsible-summary {
295
+ .bds102Collapsible-summary {
296
296
  list-style: none;
297
297
  display: flex;
298
298
  align-items: center;
@@ -307,25 +307,25 @@
307
307
  user-select: none;
308
308
  transition: var(--bds-animation_transition);
309
309
  }
310
- .bds100Collapsible-summary::-webkit-details-marker {
310
+ .bds102Collapsible-summary::-webkit-details-marker {
311
311
  display: none;
312
312
  }
313
- .bds100Collapsible-summary:focus-visible {
313
+ .bds102Collapsible-summary:focus-visible {
314
314
  outline: var(--bds-outline_default);
315
315
  outline-offset: calc(var(--bds-outline_offset) * -1);
316
316
  }
317
317
  @media (hover: hover) and (pointer: fine) {
318
- .bds100Collapsible-summary:hover {
318
+ .bds102Collapsible-summary:hover {
319
319
  background-color: var(--collapsible_bg--hover, var(--bds-bg--subtle));
320
320
  }
321
321
  }
322
- .bds100Collapsible-collapsible[open] > .bds100Collapsible-summary {
322
+ .bds102Collapsible-collapsible[open] > .bds102Collapsible-summary {
323
323
  border-block-end: var(--collapsible_border-width, 1px) solid var(--collapsible_border-color, var(--bds-bg--subtle));
324
324
  }
325
- .bds100Collapsible-summaryContent {
325
+ .bds102Collapsible-summaryContent {
326
326
  flex: 1;
327
327
  }
328
- .bds100Collapsible-icon {
328
+ .bds102Collapsible-icon {
329
329
  width: 0.5rem;
330
330
  height: 0.5rem;
331
331
  border-right: 2px solid currentcolor;
@@ -334,17 +334,17 @@
334
334
  flex-shrink: 0;
335
335
  transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
336
336
  }
337
- .bds100Collapsible-collapsible[open] > .bds100Collapsible-summary .bds100Collapsible-icon {
337
+ .bds102Collapsible-collapsible[open] > .bds102Collapsible-summary .bds102Collapsible-icon {
338
338
  transform: rotate(-135deg);
339
339
  }
340
- .bds100Collapsible-content {
340
+ .bds102Collapsible-content {
341
341
  padding: var(--bds-space_m);
342
342
  color: var(--collapsible_on-color, var(--bds-on-bg));
343
343
  font-size: var(--bds-font_size--body);
344
344
  line-height: var(--bds-font_line-height--body);
345
345
  }
346
346
  @media (prefers-reduced-motion: reduce) {
347
- .bds100Collapsible-icon {
347
+ .bds102Collapsible-icon {
348
348
  transition: none;
349
349
  }
350
350
  }
@@ -352,32 +352,32 @@
352
352
 
353
353
  /* src/components/ui/Calendar/Calendar.module.css */
354
354
  @layer component {
355
- .bds100Calendar-calendar {
355
+ .bds102Calendar-calendar {
356
356
  display: inline-flex;
357
357
  flex-direction: column;
358
358
  gap: var(--bds-space_s);
359
359
  background-color: var(--bds-bg);
360
360
  border: var(--calendar_border, none);
361
361
  --bdc_color: var(--bds-bg--subtle);
362
- --bdc_radius: var(--bds-border_radius--m);
363
- outline: var(--bdc_width) solid var(--bdc_color);
364
- outline-offset: var(--bdc_offset);
365
- border-radius: var(--calendar_radius, var(--bdc_radius));
362
+ --bdc-outline_radius: var(--bds-border_radius--m);
363
+ outline: var(--bdc-outline_width) solid var(--bdc_color);
364
+ outline-offset: var(--bdc-outline_offset);
365
+ border-radius: var(--calendar_radius, var(--bdc-outline_radius));
366
366
  padding: var(--bds-space_m);
367
367
  box-shadow: var(--calendar_shadow, var(--bds-shadow_s));
368
368
  width: 20rem;
369
369
  }
370
- .bds100Calendar-header {
370
+ .bds102Calendar-header {
371
371
  display: flex;
372
372
  align-items: center;
373
373
  justify-content: space-between;
374
374
  }
375
- .bds100Calendar-monthYear {
375
+ .bds102Calendar-monthYear {
376
376
  font-size: var(--bds-font_size--body);
377
377
  font-weight: var(--bds-font_weight--semibold);
378
378
  color: var(--bds-on-bg);
379
379
  }
380
- .bds100Calendar-navBtn {
380
+ .bds102Calendar-navBtn {
381
381
  all: unset;
382
382
  display: flex;
383
383
  align-items: center;
@@ -389,35 +389,35 @@
389
389
  color: var(--bds-on-bg);
390
390
  transition: var(--bds-animation_transition);
391
391
  }
392
- .bds100Calendar-navBtn svg {
392
+ .bds102Calendar-navBtn svg {
393
393
  width: 1rem;
394
394
  height: 1rem;
395
395
  }
396
- .bds100Calendar-navBtn:focus-visible {
396
+ .bds102Calendar-navBtn:focus-visible {
397
397
  outline: var(--bds-outline_default);
398
398
  outline-offset: var(--bds-outline_offset);
399
399
  }
400
400
  @media (hover: hover) and (pointer: fine) {
401
- .bds100Calendar-navBtn:hover {
401
+ .bds102Calendar-navBtn:hover {
402
402
  background-color: var(--bds-bg--subtle);
403
403
  }
404
404
  }
405
- .bds100Calendar-grid {
405
+ .bds102Calendar-grid {
406
406
  border-collapse: collapse;
407
407
  width: 100%;
408
408
  table-layout: fixed;
409
409
  }
410
- .bds100Calendar-weekday {
410
+ .bds102Calendar-weekday {
411
411
  font-size: var(--bds-font_size--body--s);
412
412
  font-weight: var(--bds-font_weight--semibold);
413
413
  color: var(--bds-on-bg);
414
414
  text-align: center;
415
415
  padding-block-end: var(--bds-space_xs);
416
416
  }
417
- .bds100Calendar-empty {
417
+ .bds102Calendar-empty {
418
418
  padding: 0;
419
419
  }
420
- .bds100Calendar-day {
420
+ .bds102Calendar-day {
421
421
  all: unset;
422
422
  display: flex;
423
423
  align-items: center;
@@ -431,33 +431,33 @@
431
431
  transition: var(--bds-animation_transition);
432
432
  box-sizing: border-box;
433
433
  }
434
- .bds100Calendar-day:focus-visible {
434
+ .bds102Calendar-day:focus-visible {
435
435
  outline: var(--bds-outline_default);
436
436
  outline-offset: var(--bds-outline_offset);
437
437
  }
438
438
  @media (hover: hover) and (pointer: fine) {
439
- .bds100Calendar-day:not(.bds100Calendar-disabled, .bds100Calendar-selected):hover {
439
+ .bds102Calendar-day:not(.bds102Calendar-disabled, .bds102Calendar-selected):hover {
440
440
  background-color: var(--bds-bg--subtle);
441
441
  }
442
442
  }
443
- .bds100Calendar-today {
443
+ .bds102Calendar-today {
444
444
  font-weight: var(--bds-font_weight--semibold);
445
445
  --bdc_color: var(--bds-interactive);
446
446
  border: var(--calendar_today-border, none);
447
- outline: var(--bdc_width) solid var(--bdc_color);
448
- outline-offset: var(--bdc_offset);
447
+ outline: var(--bdc-outline_width) solid var(--bdc_color);
448
+ outline-offset: var(--bdc-outline_offset);
449
449
  }
450
- .bds100Calendar-selected {
450
+ .bds102Calendar-selected {
451
451
  background-color: var(--bds-interactive);
452
452
  color: var(--bds-on-interactive);
453
453
  font-weight: var(--bds-font_weight--semibold);
454
454
  }
455
- .bds100Calendar-disabled {
455
+ .bds102Calendar-disabled {
456
456
  opacity: 0.35;
457
457
  cursor: not-allowed;
458
458
  }
459
459
  @media (prefers-reduced-motion: reduce) {
460
- .bds100Calendar-day {
460
+ .bds102Calendar-day {
461
461
  transition: none;
462
462
  }
463
463
  }
@@ -465,13 +465,13 @@
465
465
 
466
466
  /* src/components/ui/Carousel/Carousel.module.css */
467
467
  @layer component {
468
- .bds100Carousel-carousel {
468
+ .bds102Carousel-carousel {
469
469
  position: relative;
470
470
  display: flex;
471
471
  align-items: center;
472
472
  gap: var(--bds-space_xs);
473
473
  }
474
- .bds100Carousel-track {
474
+ .bds102Carousel-track {
475
475
  display: flex;
476
476
  gap: var(--bds-space_m);
477
477
  overflow-x: auto;
@@ -480,14 +480,14 @@
480
480
  flex: 1;
481
481
  scroll-behavior: smooth;
482
482
  }
483
- .bds100Carousel-track::-webkit-scrollbar {
483
+ .bds102Carousel-track::-webkit-scrollbar {
484
484
  display: none;
485
485
  }
486
- .bds100Carousel-slide {
486
+ .bds102Carousel-slide {
487
487
  scroll-snap-align: start;
488
488
  flex-shrink: 0;
489
489
  }
490
- .bds100Carousel-navBtn {
490
+ .bds102Carousel-navBtn {
491
491
  all: unset;
492
492
  display: flex;
493
493
  align-items: center;
@@ -499,28 +499,28 @@
499
499
  color: var(--bds-on-bg);
500
500
  --bdc_color: var(--bds-on-bg);
501
501
  border: none;
502
- outline: var(--bdc_width) solid var(--bdc_color);
503
- outline-offset: var(--bdc_offset);
502
+ outline: var(--bdc-outline_width) solid var(--bdc_color);
503
+ outline-offset: var(--bdc-outline_offset);
504
504
  cursor: pointer;
505
505
  flex-shrink: 0;
506
506
  transition: var(--bds-animation_transition);
507
507
  box-shadow: var(--bds-shadow_s);
508
508
  }
509
- .bds100Carousel-navBtn svg {
509
+ .bds102Carousel-navBtn svg {
510
510
  width: 1.25rem;
511
511
  height: 1.25rem;
512
512
  }
513
- .bds100Carousel-navBtn:focus-visible {
513
+ .bds102Carousel-navBtn:focus-visible {
514
514
  outline: var(--bds-outline_default);
515
515
  outline-offset: var(--bds-outline_offset);
516
516
  }
517
517
  @media (hover: hover) and (pointer: fine) {
518
- .bds100Carousel-navBtn:hover {
518
+ .bds102Carousel-navBtn:hover {
519
519
  background-color: var(--bds-bg--subtle);
520
520
  }
521
521
  }
522
522
  @media (prefers-reduced-motion: reduce) {
523
- .bds100Carousel-track {
523
+ .bds102Carousel-track {
524
524
  scroll-behavior: auto;
525
525
  }
526
526
  }
@@ -528,7 +528,7 @@
528
528
 
529
529
  /* src/components/ui/DescriptionList/DescriptionList.module.css */
530
530
  @layer component {
531
- .bds100DescriptionList-list {
531
+ .bds102DescriptionList-list {
532
532
  display: flex;
533
533
  flex-direction: column;
534
534
  gap: var(--bds-space_s);
@@ -537,62 +537,62 @@
537
537
  font-size: var(--bds-font_size--body);
538
538
  color: var(--bds-on-bg);
539
539
  }
540
- .bds100DescriptionList-group {
540
+ .bds102DescriptionList-group {
541
541
  display: flex;
542
542
  flex-direction: column;
543
543
  gap: var(--bds-space_xxs);
544
544
  }
545
- .bds100DescriptionList-term {
545
+ .bds102DescriptionList-term {
546
546
  font-weight: var(--bds-font_weight--semibold);
547
547
  color: var(--bds-on-bg);
548
548
  }
549
- .bds100DescriptionList-details {
549
+ .bds102DescriptionList-details {
550
550
  margin: 0;
551
551
  color: var(--bds-on-bg);
552
552
  }
553
- .bds100DescriptionList---layout_inline .bds100DescriptionList-group {
553
+ .bds102DescriptionList---layout_inline .bds102DescriptionList-group {
554
554
  display: grid;
555
555
  grid-template-columns: minmax(8rem, 1fr) 2fr;
556
556
  gap: var(--bds-space_xs);
557
557
  align-items: baseline;
558
558
  }
559
- .bds100DescriptionList---layout_inline .bds100DescriptionList-term {
559
+ .bds102DescriptionList---layout_inline .bds102DescriptionList-term {
560
560
  grid-column: 1;
561
561
  }
562
- .bds100DescriptionList---layout_inline .bds100DescriptionList-details {
562
+ .bds102DescriptionList---layout_inline .bds102DescriptionList-details {
563
563
  grid-column: 2;
564
564
  }
565
565
  }
566
566
 
567
567
  /* src/components/ui/Link/Link.module.css */
568
568
  @layer component {
569
- .bds100Link-link {
570
- color: var(--link_color, var(--bds-interactive));
569
+ .bds102Link-link {
570
+ color: var(--link_color, var(--bds-color_interactive_on-bg));
571
571
  text-decoration: underline;
572
572
  text-underline-offset: 0.2em;
573
573
  transition: var(--bds-animation_transition);
574
574
  cursor: pointer;
575
575
  }
576
- .bds100Link-link:focus-visible {
576
+ .bds102Link-link:focus-visible {
577
577
  outline: var(--bds-outline_default);
578
578
  outline-offset: var(--bds-outline_offset);
579
579
  border-radius: var(--bds-border_radius--xs);
580
580
  }
581
581
  @media (hover: hover) and (pointer: fine) {
582
- .bds100Link-link:hover {
582
+ .bds102Link-link:hover {
583
583
  --link_color: var(--link_color-hover, var(--bds-blue--strong));
584
584
  }
585
585
  }
586
- .bds100Link---variant_default {
587
- --link_color: var(--bds-interactive);
586
+ .bds102Link---variant_default {
587
+ --link_color: var(--bds-color_interactive_on-bg);
588
588
  --link_color-hover: var(--bds-blue--strong);
589
589
  }
590
- .bds100Link---variant_subtle {
590
+ .bds102Link---variant_subtle {
591
591
  --link_color: var(--bds-on-bg);
592
- --link_color-hover: var(--bds-interactive);
592
+ --link_color-hover: var(--bds-color_interactive_on-bg);
593
593
  }
594
- .bds100Link---variant_standalone {
595
- --link_color: var(--bds-interactive);
594
+ .bds102Link---variant_standalone {
595
+ --link_color: var(--bds-color_interactive_on-bg);
596
596
  --link_color-hover: var(--bds-blue--strong);
597
597
  display: inline-flex;
598
598
  align-items: center;
@@ -601,12 +601,12 @@
601
601
  text-decoration: none;
602
602
  }
603
603
  @media (hover: hover) and (pointer: fine) {
604
- .bds100Link---variant_standalone:hover {
604
+ .bds102Link---variant_standalone:hover {
605
605
  text-decoration: underline;
606
606
  text-underline-offset: 0.2em;
607
607
  }
608
608
  }
609
- .bds100Link-externalLabel {
609
+ .bds102Link-externalLabel {
610
610
  position: absolute;
611
611
  width: 1px;
612
612
  height: 1px;
@@ -621,12 +621,12 @@
621
621
 
622
622
  /* src/components/ui/Loading/Loading.module.css */
623
623
  @layer component {
624
- .bds100Loading-loading {
624
+ .bds102Loading-loading {
625
625
  display: flex;
626
626
  justify-content: center;
627
627
  align-items: center;
628
628
  }
629
- .bds100Loading-spinner {
629
+ .bds102Loading-spinner {
630
630
  width: 2.5em;
631
631
  height: 2.5em;
632
632
  border: 4px solid var(--bds-bg);
@@ -634,12 +634,12 @@
634
634
  border-radius: 50%;
635
635
  animation: spin 1s linear infinite;
636
636
  }
637
- .bds100Loading---size_small .bds100Loading-spinner {
637
+ .bds102Loading---size_small .bds102Loading-spinner {
638
638
  width: 1.5em;
639
639
  height: 1.5em;
640
640
  border-width: 2px;
641
641
  }
642
- .bds100Loading---size_large .bds100Loading-spinner {
642
+ .bds102Loading---size_large .bds102Loading-spinner {
643
643
  width: 4em;
644
644
  height: 4em;
645
645
  border-width: 6px;
@@ -654,14 +654,14 @@
654
654
  }
655
655
  }
656
656
  @media (prefers-reduced-motion: reduce) {
657
- .bds100Loading-spinner {
657
+ .bds102Loading-spinner {
658
658
  animation: none;
659
659
  }
660
660
  }
661
661
 
662
662
  /* src/components/ui/NotificationBanner/NotificationBanner.module.css */
663
663
  @layer component {
664
- .bds100NotificationBanner-banner {
664
+ .bds102NotificationBanner-banner {
665
665
  display: flex;
666
666
  align-items: center;
667
667
  gap: var(--bds-space_m);
@@ -673,33 +673,33 @@
673
673
  line-height: var(--bds-font_line-height--body);
674
674
  width: 100%;
675
675
  }
676
- .bds100NotificationBanner---variant_info {
676
+ .bds102NotificationBanner---variant_info {
677
677
  --banner_bg: var(--bds-blue--subtle);
678
678
  --banner_text: var(--bds-on-blue--subtle);
679
679
  --banner_border: var(--bds-blue);
680
680
  }
681
- .bds100NotificationBanner---variant_success {
681
+ .bds102NotificationBanner---variant_success {
682
682
  --banner_bg: var(--bds-success--subtle);
683
683
  --banner_text: var(--bds-on-success--subtle);
684
684
  --banner_border: var(--bds-success);
685
685
  }
686
- .bds100NotificationBanner---variant_warning {
686
+ .bds102NotificationBanner---variant_warning {
687
687
  --banner_bg: var(--bds-orange--subtle);
688
688
  --banner_text: var(--bds-on-orange--subtle);
689
689
  --banner_border: var(--bds-warning);
690
690
  }
691
- .bds100NotificationBanner---variant_error {
691
+ .bds102NotificationBanner---variant_error {
692
692
  --banner_bg: rgb(from var(--bds-error) r g b / 12%);
693
693
  --banner_text: var(--bds-on-bg);
694
694
  --banner_border: var(--bds-error);
695
695
  }
696
- .bds100NotificationBanner-content {
696
+ .bds102NotificationBanner-content {
697
697
  flex: 1;
698
698
  }
699
- .bds100NotificationBanner-action {
699
+ .bds102NotificationBanner-action {
700
700
  flex-shrink: 0;
701
701
  }
702
- .bds100NotificationBanner-dismiss {
702
+ .bds102NotificationBanner-dismiss {
703
703
  all: unset;
704
704
  display: flex;
705
705
  align-items: center;
@@ -711,19 +711,19 @@
711
711
  border: var(--banner_dismiss-border, none);
712
712
  transition: var(--bds-animation_transition);
713
713
  --bdc_color: currentcolor;
714
- outline: var(--bdc_width) solid var(--bdc_color);
715
- outline-offset: var(--bdc_offset);
714
+ outline: var(--bdc-outline_width) solid var(--bdc_color);
715
+ outline-offset: var(--bdc-outline_offset);
716
716
  }
717
- .bds100NotificationBanner-dismiss svg {
717
+ .bds102NotificationBanner-dismiss svg {
718
718
  width: 1rem;
719
719
  height: 1rem;
720
720
  }
721
- .bds100NotificationBanner-dismiss:focus-visible {
721
+ .bds102NotificationBanner-dismiss:focus-visible {
722
722
  outline: var(--bds-outline_default);
723
723
  outline-offset: var(--bds-outline_offset);
724
724
  }
725
725
  @media (hover: hover) and (pointer: fine) {
726
- .bds100NotificationBanner-dismiss:hover {
726
+ .bds102NotificationBanner-dismiss:hover {
727
727
  opacity: 0.7;
728
728
  }
729
729
  }
@@ -731,11 +731,11 @@
731
731
 
732
732
  /* src/components/ui/Pagination/Pagination.module.css */
733
733
  @layer component {
734
- .bds100Pagination-pagination {
734
+ .bds102Pagination-pagination {
735
735
  display: flex;
736
736
  justify-content: center;
737
737
  }
738
- .bds100Pagination-list {
738
+ .bds102Pagination-list {
739
739
  display: flex;
740
740
  align-items: center;
741
741
  gap: var(--bds-space_xxs);
@@ -743,7 +743,7 @@
743
743
  margin: 0;
744
744
  padding: 0;
745
745
  }
746
- .bds100Pagination-button {
746
+ .bds102Pagination-button {
747
747
  all: unset;
748
748
  display: inline-flex;
749
749
  align-items: center;
@@ -755,8 +755,8 @@
755
755
  background-color: var(--btn_bg, transparent);
756
756
  --bdc_color: var(--btn_border, var(--bds-bg--subtle));
757
757
  border: none;
758
- outline: var(--bdc_width) solid var(--bdc_color);
759
- outline-offset: var(--bdc_offset);
758
+ outline: var(--bdc-outline_width) solid var(--bdc_color);
759
+ outline-offset: var(--bdc-outline_offset);
760
760
  color: var(--btn_color, var(--bds-on-bg));
761
761
  font-family: var(--bds-font_family--body);
762
762
  font-size: var(--bds-font_size--body);
@@ -765,30 +765,30 @@
765
765
  transition: var(--bds-animation_transition);
766
766
  box-sizing: border-box;
767
767
  }
768
- .bds100Pagination-button:disabled {
768
+ .bds102Pagination-button:disabled {
769
769
  opacity: 0.4;
770
770
  cursor: not-allowed;
771
771
  }
772
- .bds100Pagination-button:focus-visible {
772
+ .bds102Pagination-button:focus-visible {
773
773
  outline: var(--bds-outline_default);
774
774
  outline-offset: var(--bds-outline_offset);
775
775
  }
776
776
  @media (hover: hover) and (pointer: fine) {
777
- .bds100Pagination-button:not(:disabled, .bds100Pagination---active):hover {
777
+ .bds102Pagination-button:not(:disabled, .bds102Pagination---active):hover {
778
778
  --btn_bg: var(--bds-bg--subtle);
779
779
  --btn_color: var(--bds-interactive);
780
780
  }
781
781
  }
782
- .bds100Pagination-button.bds100Pagination---active {
782
+ .bds102Pagination-button.bds102Pagination---active {
783
783
  --btn_bg: var(--bds-interactive);
784
784
  --btn_color: var(--bds-on-interactive);
785
785
  --btn_border: var(--bds-interactive);
786
786
  }
787
- .bds100Pagination-button.bds100Pagination---nav svg {
787
+ .bds102Pagination-button.bds102Pagination---nav svg {
788
788
  width: 1rem;
789
789
  height: 1rem;
790
790
  }
791
- .bds100Pagination-ellipsis {
791
+ .bds102Pagination-ellipsis {
792
792
  display: inline-flex;
793
793
  align-items: center;
794
794
  justify-content: center;
@@ -802,46 +802,46 @@
802
802
 
803
803
  /* src/components/ui/Progress/Progress.module.css */
804
804
  @layer component {
805
- .bds100Progress-container {
805
+ .bds102Progress-container {
806
806
  display: flex;
807
807
  flex-direction: column;
808
808
  gap: var(--bds-space_xxs);
809
809
  width: 100%;
810
810
  }
811
- .bds100Progress-labelRow {
811
+ .bds102Progress-labelRow {
812
812
  display: flex;
813
813
  justify-content: space-between;
814
814
  align-items: baseline;
815
815
  font-size: var(--bds-font_size--body--s);
816
816
  color: var(--bds-on-bg);
817
817
  }
818
- .bds100Progress-value {
818
+ .bds102Progress-value {
819
819
  font-variant-numeric: tabular-nums;
820
820
  }
821
- .bds100Progress-track {
821
+ .bds102Progress-track {
822
822
  width: 100%;
823
823
  height: var(--progress_height, var(--bds-space_xs));
824
824
  background-color: var(--bds-bg--subtle);
825
825
  border-radius: 999px;
826
826
  overflow: hidden;
827
827
  }
828
- .bds100Progress-track.bds100Progress---size_small {
828
+ .bds102Progress-track.bds102Progress---size_small {
829
829
  --progress_height: var(--bds-space_xxs);
830
830
  }
831
- .bds100Progress-track.bds100Progress---size_medium {
831
+ .bds102Progress-track.bds102Progress---size_medium {
832
832
  --progress_height: var(--bds-space_xs);
833
833
  }
834
- .bds100Progress-track.bds100Progress---size_large {
834
+ .bds102Progress-track.bds102Progress---size_large {
835
835
  --progress_height: var(--bds-space_s);
836
836
  }
837
- .bds100Progress-fill {
837
+ .bds102Progress-fill {
838
838
  height: 100%;
839
839
  background-color: var(--progress_color-active, var(--bds-active));
840
840
  border-radius: 999px;
841
841
  transition: width var(--bds-animation_transition-duration) var(--bds-animation_easing);
842
842
  }
843
843
  @media (prefers-reduced-motion: reduce) {
844
- .bds100Progress-fill {
844
+ .bds102Progress-fill {
845
845
  transition: none;
846
846
  }
847
847
  }
@@ -849,23 +849,23 @@
849
849
 
850
850
  /* src/components/ui/ProgressCircle/ProgressCircle.module.css */
851
851
  @layer component {
852
- .bds100ProgressCircle-wrapper {
852
+ .bds102ProgressCircle-wrapper {
853
853
  position: relative;
854
854
  display: inline-flex;
855
855
  align-items: center;
856
856
  justify-content: center;
857
857
  }
858
- .bds100ProgressCircle-svg {
858
+ .bds102ProgressCircle-svg {
859
859
  display: block;
860
860
  }
861
- .bds100ProgressCircle-track {
861
+ .bds102ProgressCircle-track {
862
862
  stroke: var(--bds-bg--subtle);
863
863
  }
864
- .bds100ProgressCircle-fill {
864
+ .bds102ProgressCircle-fill {
865
865
  stroke: var(--progressCircle_color-active, var(--bds-active));
866
866
  transition: stroke-dashoffset var(--bds-animation_transition-duration) var(--bds-animation_easing);
867
867
  }
868
- .bds100ProgressCircle-value {
868
+ .bds102ProgressCircle-value {
869
869
  position: absolute;
870
870
  font-size: var(--bds-font_size--body--s);
871
871
  font-weight: var(--bds-font_weight--semibold);
@@ -873,17 +873,17 @@
873
873
  color: var(--bds-on-bg);
874
874
  line-height: 1;
875
875
  }
876
- .bds100ProgressCircle---size_small .bds100ProgressCircle-value {
876
+ .bds102ProgressCircle---size_small .bds102ProgressCircle-value {
877
877
  font-size: 0.5rem;
878
878
  }
879
- .bds100ProgressCircle---size_medium .bds100ProgressCircle-value {
879
+ .bds102ProgressCircle---size_medium .bds102ProgressCircle-value {
880
880
  font-size: var(--bds-font_size--body--s);
881
881
  }
882
- .bds100ProgressCircle---size_large .bds100ProgressCircle-value {
882
+ .bds102ProgressCircle---size_large .bds102ProgressCircle-value {
883
883
  font-size: var(--bds-font_size--body);
884
884
  }
885
885
  @media (prefers-reduced-motion: reduce) {
886
- .bds100ProgressCircle-fill {
886
+ .bds102ProgressCircle-fill {
887
887
  transition: none;
888
888
  }
889
889
  }
@@ -891,16 +891,16 @@
891
891
 
892
892
  /* src/components/ui/Separator/Separator.module.css */
893
893
  @layer component {
894
- .bds100Separator-separator {
894
+ .bds102Separator-separator {
895
895
  border: none;
896
896
  background-color: var(--separator_color, var(--bds-on-bg));
897
897
  }
898
- .bds100Separator-separator.bds100Separator---horizontal {
898
+ .bds102Separator-separator.bds102Separator---horizontal {
899
899
  display: block;
900
900
  width: 100%;
901
901
  height: var(--separator_thickness, 1px);
902
902
  }
903
- .bds100Separator-separator.bds100Separator---vertical {
903
+ .bds102Separator-separator.bds102Separator---vertical {
904
904
  display: inline-block;
905
905
  width: var(--separator_thickness, 1px);
906
906
  align-self: stretch;
@@ -909,7 +909,7 @@
909
909
 
910
910
  /* src/components/ui/Skeleton/Skeleton.module.css */
911
911
  @layer component {
912
- .bds100Skeleton-skeleton {
912
+ .bds102Skeleton-skeleton {
913
913
  background:
914
914
  linear-gradient(
915
915
  90deg,
@@ -933,7 +933,7 @@
933
933
 
934
934
  /* src/components/ui/SkipLink/SkipLink.module.css */
935
935
  @layer component {
936
- .bds100SkipLink-skipLink {
936
+ .bds102SkipLink-skipLink {
937
937
  position: absolute;
938
938
  inset-block-start: var(--bds-space_s);
939
939
  inset-inline-start: var(--bds-space_s);
@@ -947,18 +947,18 @@
947
947
  text-decoration: none;
948
948
  --bdc_color: var(--color_focus, var(--bds-interactive));
949
949
  border: var(--skip-link_border, none);
950
- outline: var(--bdc_width) solid var(--bdc_color);
951
- outline-offset: var(--bdc_offset);
950
+ outline: var(--bdc-outline_width) solid var(--bdc_color);
951
+ outline-offset: var(--bdc-outline_offset);
952
952
  transform: translateY(-200%);
953
953
  transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
954
954
  }
955
- .bds100SkipLink-skipLink:focus-visible {
955
+ .bds102SkipLink-skipLink:focus-visible {
956
956
  transform: translateY(0);
957
957
  outline: var(--bds-outline_default);
958
958
  outline-offset: var(--bds-outline_offset);
959
959
  }
960
960
  @media (prefers-reduced-motion: reduce) {
961
- .bds100SkipLink-skipLink {
961
+ .bds102SkipLink-skipLink {
962
962
  transition: none;
963
963
  }
964
964
  }
@@ -966,33 +966,33 @@
966
966
 
967
967
  /* src/components/ui/Table/Table.module.css */
968
968
  @layer component {
969
- .bds100Table-wrapper {
969
+ .bds102Table-wrapper {
970
970
  width: 100%;
971
971
  overflow-x: auto;
972
972
  border: var(--table_border, none);
973
973
  --bdc_color: var(--bds-bg--subtle);
974
- --bdc_radius: var(--bds-border_radius--s);
975
- outline: var(--bdc_width) solid var(--bdc_color);
976
- outline-offset: var(--bdc_offset);
977
- border-radius: var(--table_radius, var(--bdc_radius));
974
+ --bdc-outline_radius: var(--bds-border_radius--s);
975
+ outline: var(--bdc-outline_width) solid var(--bdc_color);
976
+ outline-offset: var(--bdc-outline_offset);
977
+ border-radius: var(--table_radius, var(--bdc-outline_radius));
978
978
  }
979
- .bds100Table-table {
979
+ .bds102Table-table {
980
980
  width: 100%;
981
981
  border-collapse: collapse;
982
982
  font-size: var(--bds-font_size--body);
983
983
  font-family: var(--bds-font_family--body);
984
984
  }
985
- .bds100Table-caption {
985
+ .bds102Table-caption {
986
986
  caption-side: top;
987
987
  text-align: start;
988
988
  padding: var(--bds-space_s) var(--bds-space_m);
989
989
  font-weight: var(--bds-font_weight--semibold);
990
990
  color: var(--bds-on-bg);
991
991
  }
992
- .bds100Table-thead {
992
+ .bds102Table-thead {
993
993
  background-color: var(--bds-bg--subtle);
994
994
  }
995
- .bds100Table-th {
995
+ .bds102Table-th {
996
996
  padding: var(--bds-space_s) var(--bds-space_m);
997
997
  text-align: start;
998
998
  font-weight: var(--bds-font_weight--semibold);
@@ -1001,10 +1001,10 @@
1001
1001
  white-space: nowrap;
1002
1002
  border-bottom: 1px solid var(--bds-bg--subtle);
1003
1003
  }
1004
- .bds100Table-th.bds100Table---sortable {
1004
+ .bds102Table-th.bds102Table---sortable {
1005
1005
  padding: 0;
1006
1006
  }
1007
- .bds100Table-sortButton {
1007
+ .bds102Table-sortButton {
1008
1008
  all: unset;
1009
1009
  display: flex;
1010
1010
  align-items: center;
@@ -1018,47 +1018,47 @@
1018
1018
  transition: var(--bds-animation_transition);
1019
1019
  box-sizing: border-box;
1020
1020
  }
1021
- .bds100Table-sortButton:focus-visible {
1021
+ .bds102Table-sortButton:focus-visible {
1022
1022
  outline: var(--bds-outline_default);
1023
1023
  outline-offset: calc(var(--bds-outline_offset) * -1);
1024
1024
  }
1025
1025
  @media (hover: hover) and (pointer: fine) {
1026
- .bds100Table-sortButton:hover {
1026
+ .bds102Table-sortButton:hover {
1027
1027
  color: var(--bds-on-bg);
1028
1028
  }
1029
1029
  }
1030
- .bds100Table-sortIcon {
1030
+ .bds102Table-sortIcon {
1031
1031
  width: 1rem;
1032
1032
  height: 1rem;
1033
1033
  opacity: 0.4;
1034
1034
  transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing), opacity var(--bds-animation_transition-duration) var(--bds-animation_easing);
1035
1035
  }
1036
- .bds100Table-sortIcon.bds100Table---sort-active {
1036
+ .bds102Table-sortIcon.bds102Table---sort-active {
1037
1037
  opacity: 1;
1038
1038
  color: var(--bds-interactive);
1039
1039
  }
1040
- .bds100Table-sortIcon.bds100Table---sort-desc {
1040
+ .bds102Table-sortIcon.bds102Table---sort-desc {
1041
1041
  transform: rotate(180deg);
1042
1042
  }
1043
- .bds100Table-tbody .bds100Table-tr {
1043
+ .bds102Table-tbody .bds102Table-tr {
1044
1044
  border-bottom: 1px solid var(--bds-bg--subtle);
1045
1045
  transition: var(--bds-animation_transition);
1046
1046
  }
1047
- .bds100Table-tbody .bds100Table-tr:last-child {
1047
+ .bds102Table-tbody .bds102Table-tr:last-child {
1048
1048
  border-bottom: none;
1049
1049
  }
1050
1050
  @media (hover: hover) and (pointer: fine) {
1051
- .bds100Table-tbody .bds100Table-tr:hover {
1051
+ .bds102Table-tbody .bds102Table-tr:hover {
1052
1052
  background-color: var(--bds-bg--subtle);
1053
1053
  }
1054
1054
  }
1055
- .bds100Table-td {
1055
+ .bds102Table-td {
1056
1056
  padding: var(--bds-space_s) var(--bds-space_m);
1057
1057
  color: var(--bds-on-bg);
1058
1058
  vertical-align: middle;
1059
1059
  }
1060
1060
  @media (prefers-reduced-motion: reduce) {
1061
- .bds100Table-sortIcon {
1061
+ .bds102Table-sortIcon {
1062
1062
  transition: none;
1063
1063
  }
1064
1064
  }
@@ -1066,16 +1066,16 @@
1066
1066
 
1067
1067
  /* src/components/ui/Tabs/Tabs.module.css */
1068
1068
  @layer component {
1069
- .bds100Tabs-tabs {
1069
+ .bds102Tabs-tabs {
1070
1070
  display: flex;
1071
1071
  flex-direction: column;
1072
1072
  }
1073
- .bds100Tabs-tabList {
1073
+ .bds102Tabs-tabList {
1074
1074
  display: flex;
1075
1075
  border-bottom: 1px solid var(--bds-bg--subtle);
1076
1076
  gap: var(--bds-space_xxs);
1077
1077
  }
1078
- .bds100Tabs-tab {
1078
+ .bds102Tabs-tab {
1079
1079
  all: unset;
1080
1080
  display: inline-flex;
1081
1081
  align-items: center;
@@ -1089,28 +1089,28 @@
1089
1089
  cursor: pointer;
1090
1090
  transition: var(--bds-animation_transition);
1091
1091
  }
1092
- .bds100Tabs-tab.bds100Tabs---active {
1093
- --tab_color: var(--bds-interactive);
1092
+ .bds102Tabs-tab.bds102Tabs---active {
1093
+ --tab_color: var(--bds-color_interactive_on-bg);
1094
1094
  --tab_border-color: var(--bds-interactive);
1095
1095
  }
1096
- .bds100Tabs-tab:disabled {
1096
+ .bds102Tabs-tab:disabled {
1097
1097
  opacity: 0.4;
1098
1098
  cursor: not-allowed;
1099
1099
  }
1100
- .bds100Tabs-tab:focus-visible {
1100
+ .bds102Tabs-tab:focus-visible {
1101
1101
  outline: var(--bds-outline_default);
1102
1102
  outline-offset: var(--bds-outline_offset);
1103
1103
  border-radius: var(--bds-border_radius--xs);
1104
1104
  }
1105
1105
  @media (hover: hover) and (pointer: fine) {
1106
- .bds100Tabs-tab:not(:disabled, .bds100Tabs---active):hover {
1107
- --tab_color: var(--bds-interactive);
1106
+ .bds102Tabs-tab:not(:disabled, .bds102Tabs---active):hover {
1107
+ --tab_color: var(--bds-color_interactive_on-bg);
1108
1108
  }
1109
1109
  }
1110
- .bds100Tabs-panel {
1110
+ .bds102Tabs-panel {
1111
1111
  padding-block-start: var(--bds-space_m);
1112
1112
  }
1113
- .bds100Tabs-panel:focus-visible {
1113
+ .bds102Tabs-panel:focus-visible {
1114
1114
  outline: var(--bds-outline_default);
1115
1115
  outline-offset: var(--bds-outline_offset);
1116
1116
  }
@@ -1118,12 +1118,12 @@
1118
1118
 
1119
1119
  /* src/components/ui/Tooltip/Tooltip.module.css */
1120
1120
  @layer component {
1121
- .bds100Tooltip-wrapper {
1121
+ .bds102Tooltip-wrapper {
1122
1122
  position: relative;
1123
1123
  display: inline-flex;
1124
1124
  align-items: center;
1125
1125
  }
1126
- .bds100Tooltip-tooltip {
1126
+ .bds102Tooltip-tooltip {
1127
1127
  position: absolute;
1128
1128
  z-index: var(--bds-z-index_popover);
1129
1129
  padding: var(--bds-space_xxs) var(--bds-space_xs);
@@ -1138,33 +1138,33 @@
1138
1138
  opacity: 0;
1139
1139
  transition: opacity var(--bds-animation_transition-duration) var(--bds-animation_easing);
1140
1140
  }
1141
- .bds100Tooltip-wrapper:hover .bds100Tooltip-tooltip,
1142
- .bds100Tooltip-wrapper:focus-within .bds100Tooltip-tooltip {
1141
+ .bds102Tooltip-wrapper:hover .bds102Tooltip-tooltip,
1142
+ .bds102Tooltip-wrapper:focus-within .bds102Tooltip-tooltip {
1143
1143
  visibility: visible;
1144
1144
  opacity: 1;
1145
1145
  }
1146
- .bds100Tooltip---placement_top {
1146
+ .bds102Tooltip---placement_top {
1147
1147
  bottom: calc(100% + var(--bds-space_xs));
1148
1148
  left: 50%;
1149
1149
  transform: translateX(-50%);
1150
1150
  }
1151
- .bds100Tooltip---placement_bottom {
1151
+ .bds102Tooltip---placement_bottom {
1152
1152
  top: calc(100% + var(--bds-space_xs));
1153
1153
  left: 50%;
1154
1154
  transform: translateX(-50%);
1155
1155
  }
1156
- .bds100Tooltip---placement_left {
1156
+ .bds102Tooltip---placement_left {
1157
1157
  right: calc(100% + var(--bds-space_xs));
1158
1158
  top: 50%;
1159
1159
  transform: translateY(-50%);
1160
1160
  }
1161
- .bds100Tooltip---placement_right {
1161
+ .bds102Tooltip---placement_right {
1162
1162
  left: calc(100% + var(--bds-space_xs));
1163
1163
  top: 50%;
1164
1164
  transform: translateY(-50%);
1165
1165
  }
1166
1166
  @media (prefers-reduced-motion: reduce) {
1167
- .bds100Tooltip-tooltip {
1167
+ .bds102Tooltip-tooltip {
1168
1168
  transition: none;
1169
1169
  }
1170
1170
  }
@@ -1172,34 +1172,34 @@
1172
1172
 
1173
1173
  /* src/components/ui/Typography/Typography.module.css */
1174
1174
  @layer component {
1175
- .bds100Typography-typography {
1175
+ .bds102Typography-typography {
1176
1176
  margin: 0;
1177
1177
  font-family: var(--bds-font_family--body);
1178
1178
  color: var(--typography_color, var(--bds-on-bg));
1179
1179
  }
1180
- .bds100Typography---h1 {
1180
+ .bds102Typography---h1 {
1181
1181
  font-family: var(--bds-font_family--heading);
1182
1182
  font-size: var(--bds-font_size--heading-1);
1183
1183
  font-weight: var(--bds-font_weight--bold);
1184
1184
  line-height: var(--bds-font_line-height--heading);
1185
1185
  }
1186
- .bds100Typography---h2 {
1186
+ .bds102Typography---h2 {
1187
1187
  font-family: var(--bds-font_family--heading);
1188
1188
  font-size: var(--bds-font_size--heading-2);
1189
1189
  font-weight: var(--bds-font_weight--semibold);
1190
1190
  line-height: var(--bds-font_line-height--heading);
1191
1191
  }
1192
- .bds100Typography---h3 {
1192
+ .bds102Typography---h3 {
1193
1193
  font-family: var(--bds-font_family--heading);
1194
1194
  font-size: var(--bds-font_size--heading-3);
1195
1195
  font-weight: var(--bds-font_weight--semibold);
1196
1196
  line-height: var(--bds-font_line-height--heading);
1197
1197
  }
1198
- .bds100Typography---body {
1198
+ .bds102Typography---body {
1199
1199
  font-size: var(--bds-font_size--body);
1200
1200
  line-height: var(--bds-font_line-height--body);
1201
1201
  }
1202
- .bds100Typography---body_s {
1202
+ .bds102Typography---body_s {
1203
1203
  font-size: var(--bds-font_size--body--s);
1204
1204
  line-height: var(--bds-font_line-height--body);
1205
1205
  }
@@ -1231,8 +1231,8 @@
1231
1231
  }
1232
1232
  }
1233
1233
  @layer component {
1234
- .bds100Button-button,
1235
- .bds100Button-button[href] {
1234
+ .bds102Button-button,
1235
+ .bds102Button-button[href] {
1236
1236
  all: unset;
1237
1237
  position: relative;
1238
1238
  font: inherit;
@@ -1254,71 +1254,71 @@
1254
1254
  color: var(--button_text, var(--button_on-color));
1255
1255
  border: var(--button_border, none);
1256
1256
  --bdc_color: transparent;
1257
- outline: var(--bdc_width) solid var(--bdc_color);
1258
- outline-offset: var(--bdc_offset);
1257
+ outline: var(--bdc-outline_width) solid var(--bdc_color);
1258
+ outline-offset: var(--bdc-outline_offset);
1259
1259
  transition: var(--bds-animation_transition), --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing);
1260
1260
  }
1261
- .bds100Button-button.bds100Button---default {
1261
+ .bds102Button-button.bds102Button---default {
1262
1262
  }
1263
- .bds100Button-button.bds100Button---ghost {
1263
+ .bds102Button-button.bds102Button---ghost {
1264
1264
  --button_bg: transparent;
1265
1265
  --button_text: var(--button_color);
1266
1266
  --bdc_color: var(--button_color);
1267
1267
  }
1268
- .bds100Button-button.bds100Button---size_small {
1268
+ .bds102Button-button.bds102Button---size_small {
1269
1269
  --button_height: 2.25em;
1270
1270
  --button_font-size: var(--bds-font_size--body--s);
1271
1271
  --button_border_radius--s: var(--bds-border_radius--xs);
1272
1272
  padding-inline: var(--bds-space_m);
1273
1273
  }
1274
- .bds100Button-button.bds100Button---size_medium {
1274
+ .bds102Button-button.bds102Button---size_medium {
1275
1275
  --button_height: 3em;
1276
1276
  padding-inline: var(--bds-space_l);
1277
1277
  }
1278
- .bds100Button-button.bds100Button---size_large {
1278
+ .bds102Button-button.bds102Button---size_large {
1279
1279
  --button_font-size: var(--bds-font_size--heading-3);
1280
1280
  --button_border_radius--s: var(--bds-border_radius--m);
1281
1281
  padding-inline: var(--bds-space_xl);
1282
1282
  }
1283
- .bds100Button-button.bds100Button---hasPulse {
1283
+ .bds102Button-button.bds102Button---hasPulse {
1284
1284
  animation: pulse 3s infinite;
1285
1285
  }
1286
- .bds100Button-button[href] {
1286
+ .bds102Button-button[href] {
1287
1287
  text-decoration: none;
1288
1288
  }
1289
- .bds100Button-button svg {
1289
+ .bds102Button-button svg {
1290
1290
  --icon__stroke: currentcolor;
1291
1291
  fill: currentcolor;
1292
1292
  color: currentcolor;
1293
1293
  flex-shrink: 0;
1294
1294
  }
1295
- .bds100Button-iconStart {
1295
+ .bds102Button-iconStart {
1296
1296
  display: flex;
1297
1297
  align-items: center;
1298
1298
  margin-inline-start: calc(var(--bds-space_s) * -1);
1299
1299
  transition: var(--bds-animation_transition);
1300
1300
  }
1301
- .bds100Button-iconEnd {
1301
+ .bds102Button-iconEnd {
1302
1302
  display: flex;
1303
1303
  align-items: center;
1304
1304
  margin-inline-end: calc(var(--bds-space_s) * -1);
1305
1305
  transition: var(--bds-animation_transition);
1306
1306
  }
1307
1307
  @media (hover: hover) and (pointer: fine) {
1308
- .bds100Button-button:hover .bds100Button-iconStart svg {
1308
+ .bds102Button-button:hover .bds102Button-iconStart svg {
1309
1309
  animation: fadeZoom 2s ease-out infinite;
1310
1310
  }
1311
- .bds100Button-button:hover .bds100Button-iconEnd svg {
1311
+ .bds102Button-button:hover .bds102Button-iconEnd svg {
1312
1312
  animation: fadeZoom 2s ease-out infinite;
1313
1313
  }
1314
1314
  }
1315
- .bds100Button-button:focus-visible {
1315
+ .bds102Button-button:focus-visible {
1316
1316
  outline: var(--bds-outline_default);
1317
1317
  outline-offset: var(--bds-outline_offset);
1318
1318
  border-radius: var(--bds-border_radius--s);
1319
1319
  }
1320
1320
  @media (hover: hover) and (pointer: fine) {
1321
- .bds100Button-button.bds100Button---default:hover {
1321
+ .bds102Button-button.bds102Button---default:hover {
1322
1322
  --button_bg: var(--bds-bg);
1323
1323
  --button_text: var(--bds-interactive);
1324
1324
  --button_pulse-color: var(--bds-interactive);
@@ -1326,7 +1326,7 @@
1326
1326
  }
1327
1327
  }
1328
1328
  @media (hover: hover) and (pointer: fine) {
1329
- .bds100Button-button.bds100Button---ghost:hover {
1329
+ .bds102Button-button.bds102Button---ghost:hover {
1330
1330
  --button_bg: var(--button_color);
1331
1331
  --button_text: var(--button_on-color);
1332
1332
  --bdc_color: transparent;
@@ -1336,7 +1336,7 @@
1336
1336
 
1337
1337
  /* src/components/interaction/Command/Command.module.css */
1338
1338
  @layer component {
1339
- .bds100Command-dialog {
1339
+ .bds102Command-dialog {
1340
1340
  padding: 0;
1341
1341
  border: none;
1342
1342
  border-radius: var(--bds-border_radius--m);
@@ -1346,11 +1346,11 @@
1346
1346
  overflow: visible;
1347
1347
  margin-block-start: 10vh;
1348
1348
  }
1349
- .bds100Command-dialog::backdrop {
1349
+ .bds102Command-dialog::backdrop {
1350
1350
  background-color: var(--color_backdrop, rgb(0 0 0 / 50%));
1351
1351
  backdrop-filter: blur(3px);
1352
1352
  }
1353
- .bds100Command-palette {
1353
+ .bds102Command-palette {
1354
1354
  display: flex;
1355
1355
  flex-direction: column;
1356
1356
  background-color: var(--command_color, var(--bds-bg));
@@ -1361,11 +1361,11 @@
1361
1361
  max-height: 70vh;
1362
1362
  border: var(--command_border, none);
1363
1363
  --bdc_color: currentcolor;
1364
- --bdc_radius: var(--bds-border_radius--m);
1365
- outline: var(--bdc_width) solid var(--bdc_color);
1366
- outline-offset: var(--bdc_offset);
1364
+ --bdc-outline_radius: var(--bds-border_radius--m);
1365
+ outline: var(--bdc-outline_width) solid var(--bdc_color);
1366
+ outline-offset: var(--bdc-outline_offset);
1367
1367
  }
1368
- .bds100Command-searchRow {
1368
+ .bds102Command-searchRow {
1369
1369
  display: flex;
1370
1370
  align-items: center;
1371
1371
  gap: var(--bds-space_xs);
@@ -1373,13 +1373,13 @@
1373
1373
  border-block-end: 1px solid currentcolor;
1374
1374
  flex-shrink: 0;
1375
1375
  }
1376
- .bds100Command-searchIcon {
1376
+ .bds102Command-searchIcon {
1377
1377
  width: 1.25rem;
1378
1378
  height: 1.25rem;
1379
1379
  color: var(--bds-on-bg);
1380
1380
  flex-shrink: 0;
1381
1381
  }
1382
- .bds100Command-search {
1382
+ .bds102Command-search {
1383
1383
  flex: 1;
1384
1384
  border: none;
1385
1385
  outline: none;
@@ -1389,10 +1389,10 @@
1389
1389
  background: transparent;
1390
1390
  min-width: 0;
1391
1391
  }
1392
- .bds100Command-search::placeholder {
1392
+ .bds102Command-search::placeholder {
1393
1393
  color: var(--bds-on-bg);
1394
1394
  }
1395
- .bds100Command-escHint {
1395
+ .bds102Command-escHint {
1396
1396
  font-size: var(--bds-font_size--body--s);
1397
1397
  color: var(--bds-on-bg);
1398
1398
  border-radius: var(--bds-border_radius--xs);
@@ -1400,21 +1400,21 @@
1400
1400
  flex-shrink: 0;
1401
1401
  --bdc_color: currentcolor;
1402
1402
  border: none;
1403
- outline: var(--bdc_width) solid var(--bdc_color);
1404
- outline-offset: var(--bdc_offset);
1403
+ outline: var(--bdc-outline_width) solid var(--bdc_color);
1404
+ outline-offset: var(--bdc-outline_offset);
1405
1405
  }
1406
- .bds100Command-list {
1406
+ .bds102Command-list {
1407
1407
  overflow-y: auto;
1408
1408
  list-style: none;
1409
1409
  margin: 0;
1410
1410
  padding: var(--bds-space_xs) 0;
1411
1411
  }
1412
- .bds100Command-groupList {
1412
+ .bds102Command-groupList {
1413
1413
  list-style: none;
1414
1414
  margin: 0;
1415
1415
  padding: 0;
1416
1416
  }
1417
- .bds100Command-group {
1417
+ .bds102Command-group {
1418
1418
  padding: var(--bds-space_xs) var(--bds-space_m);
1419
1419
  font-size: var(--bds-font_size--body--s);
1420
1420
  font-weight: var(--bds-font_weight--semibold);
@@ -1422,7 +1422,7 @@
1422
1422
  text-transform: uppercase;
1423
1423
  letter-spacing: 0.05em;
1424
1424
  }
1425
- .bds100Command-item {
1425
+ .bds102Command-item {
1426
1426
  display: flex;
1427
1427
  align-items: center;
1428
1428
  gap: var(--bds-space_s);
@@ -1430,29 +1430,29 @@
1430
1430
  cursor: pointer;
1431
1431
  transition: background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
1432
1432
  }
1433
- .bds100Command-itemActive {
1433
+ .bds102Command-itemActive {
1434
1434
  background-color: var(--bds-bg--subtle);
1435
1435
  }
1436
- .bds100Command-itemLabel {
1436
+ .bds102Command-itemLabel {
1437
1437
  flex: 1;
1438
1438
  font-size: var(--bds-font_size--body);
1439
1439
  color: var(--bds-on-bg);
1440
1440
  }
1441
- .bds100Command-itemDesc {
1441
+ .bds102Command-itemDesc {
1442
1442
  font-size: var(--bds-font_size--body--s);
1443
1443
  color: var(--bds-on-bg);
1444
1444
  }
1445
- .bds100Command-shortcut {
1445
+ .bds102Command-shortcut {
1446
1446
  font-size: var(--bds-font_size--body--s);
1447
1447
  color: var(--bds-on-bg);
1448
1448
  border-radius: var(--bds-border_radius--xs);
1449
1449
  padding: 0.1em 0.4em;
1450
1450
  --bdc_color: currentcolor;
1451
1451
  border: none;
1452
- outline: var(--bdc_width) solid var(--bdc_color);
1453
- outline-offset: var(--bdc_offset);
1452
+ outline: var(--bdc-outline_width) solid var(--bdc_color);
1453
+ outline-offset: var(--bdc-outline_offset);
1454
1454
  }
1455
- .bds100Command-empty {
1455
+ .bds102Command-empty {
1456
1456
  padding: var(--bds-space_l) var(--bds-space_m);
1457
1457
  text-align: center;
1458
1458
  color: var(--bds-on-bg);
@@ -1462,15 +1462,15 @@
1462
1462
 
1463
1463
  /* src/components/interaction/Dialog/Dialog.module.css */
1464
1464
  @layer component {
1465
- .bds100Dialog-dialog {
1465
+ .bds102Dialog-dialog {
1466
1466
  font-size: var(--bds-font_size--body--s);
1467
1467
  border: var(--dialog_border, none);
1468
1468
  --bdc_color: currentcolor;
1469
- --bdc_radius: var(--bds-border_radius--m);
1470
- outline: var(--bdc_width) solid var(--bdc_color);
1471
- outline-offset: var(--bdc_offset);
1472
- border-radius: var(--dialog_radius, var(--bdc_radius));
1473
- box-shadow: var(--dialog_shadow, var(--bdc_shadow));
1469
+ --bdc-outline_radius: var(--bds-border_radius--m);
1470
+ outline: var(--bdc-outline_width) solid var(--bdc_color);
1471
+ outline-offset: var(--bdc-outline_offset);
1472
+ border-radius: var(--dialog_radius, var(--bdc-outline_radius));
1473
+ box-shadow: var(--dialog_shadow, var(--bdc-outline_shadow));
1474
1474
  background-color: var(--dialog_color ,var(--bds-grey--subtle));
1475
1475
  color: var(--dialog_on-color, var(--bds-on-grey--subtle));
1476
1476
  padding: var(--bds-space_l);
@@ -1478,19 +1478,19 @@
1478
1478
  max-height: 90svh;
1479
1479
  overflow: visible;
1480
1480
  }
1481
- .bds100Dialog-dialogContent {
1481
+ .bds102Dialog-dialogContent {
1482
1482
  display: grid;
1483
1483
  gap: var(--bds-grid_gap);
1484
1484
  overflow-y: auto;
1485
1485
  min-height: 0;
1486
1486
  flex: 1;
1487
1487
  }
1488
- .bds100Dialog-closeForm {
1488
+ .bds102Dialog-closeForm {
1489
1489
  position: absolute;
1490
1490
  inset-block-start: -1em;
1491
1491
  inset-inline-end: -1em;
1492
1492
  }
1493
- .bds100Dialog-closeButton {
1493
+ .bds102Dialog-closeButton {
1494
1494
  all: unset;
1495
1495
  width: 2em;
1496
1496
  height: 2em;
@@ -1502,15 +1502,15 @@
1502
1502
  color: currentcolor;
1503
1503
  border: var(--dialog_close-border, none);
1504
1504
  --bdc_color: currentcolor;
1505
- outline: var(--bdc_width) solid var(--bdc_color);
1506
- outline-offset: var(--bdc_offset);
1505
+ outline: var(--bdc-outline_width) solid var(--bdc_color);
1506
+ outline-offset: var(--bdc-outline_offset);
1507
1507
  cursor: pointer;
1508
1508
  }
1509
- .bds100Dialog-closeButton svg {
1509
+ .bds102Dialog-closeButton svg {
1510
1510
  width: 1.25em;
1511
1511
  height: 1.25em;
1512
1512
  }
1513
- .bds100Dialog-dialog::backdrop {
1513
+ .bds102Dialog-dialog::backdrop {
1514
1514
  background-color: var(--color_backdrop, rgb(0 0 0 / 50%));
1515
1515
  backdrop-filter: blur(3px);
1516
1516
  }
@@ -1518,7 +1518,7 @@
1518
1518
 
1519
1519
  /* src/components/interaction/Drawer/Drawer.module.css */
1520
1520
  @layer component {
1521
- .bds100Drawer-drawer {
1521
+ .bds102Drawer-drawer {
1522
1522
  position: fixed;
1523
1523
  inset: 0;
1524
1524
  margin: 0;
@@ -1531,11 +1531,11 @@
1531
1531
  background: transparent;
1532
1532
  overflow: hidden;
1533
1533
  }
1534
- .bds100Drawer-drawer::backdrop {
1534
+ .bds102Drawer-drawer::backdrop {
1535
1535
  background-color: var(--color_backdrop, rgb(0 0 0 / 50%));
1536
1536
  backdrop-filter: blur(3px);
1537
1537
  }
1538
- .bds100Drawer-panel {
1538
+ .bds102Drawer-panel {
1539
1539
  position: absolute;
1540
1540
  inset-block: 0;
1541
1541
  display: flex;
@@ -1548,13 +1548,13 @@
1548
1548
  overflow: hidden;
1549
1549
  transition: var(--bds-animation_transition);
1550
1550
  }
1551
- .bds100Drawer---side_right .bds100Drawer-panel {
1551
+ .bds102Drawer---side_right .bds102Drawer-panel {
1552
1552
  inset-inline-end: 0;
1553
1553
  }
1554
- .bds100Drawer---side_left .bds100Drawer-panel {
1554
+ .bds102Drawer---side_left .bds102Drawer-panel {
1555
1555
  inset-inline-start: 0;
1556
1556
  }
1557
- .bds100Drawer-header {
1557
+ .bds102Drawer-header {
1558
1558
  display: flex;
1559
1559
  align-items: center;
1560
1560
  justify-content: space-between;
@@ -1562,7 +1562,7 @@
1562
1562
  border-block-end: 1px solid currentcolor;
1563
1563
  flex-shrink: 0;
1564
1564
  }
1565
- .bds100Drawer-closeButton {
1565
+ .bds102Drawer-closeButton {
1566
1566
  all: unset;
1567
1567
  display: flex;
1568
1568
  align-items: center;
@@ -1573,20 +1573,20 @@
1573
1573
  cursor: pointer;
1574
1574
  transition: var(--bds-animation_transition);
1575
1575
  }
1576
- .bds100Drawer-closeButton svg {
1576
+ .bds102Drawer-closeButton svg {
1577
1577
  width: 1.25rem;
1578
1578
  height: 1.25rem;
1579
1579
  }
1580
- .bds100Drawer-closeButton:focus-visible {
1580
+ .bds102Drawer-closeButton:focus-visible {
1581
1581
  outline: var(--bds-outline_default);
1582
1582
  outline-offset: var(--bds-outline_offset);
1583
1583
  }
1584
1584
  @media (hover: hover) and (pointer: fine) {
1585
- .bds100Drawer-closeButton:hover {
1585
+ .bds102Drawer-closeButton:hover {
1586
1586
  background-color: var(--bds-bg--subtle);
1587
1587
  }
1588
1588
  }
1589
- .bds100Drawer-body {
1589
+ .bds102Drawer-body {
1590
1590
  flex: 1;
1591
1591
  overflow-y: auto;
1592
1592
  padding: var(--bds-space_l);
@@ -1594,7 +1594,7 @@
1594
1594
  flex-direction: column;
1595
1595
  }
1596
1596
  @media (prefers-reduced-motion: reduce) {
1597
- .bds100Drawer-panel {
1597
+ .bds102Drawer-panel {
1598
1598
  transition: none;
1599
1599
  }
1600
1600
  }
@@ -1602,11 +1602,11 @@
1602
1602
 
1603
1603
  /* src/components/interaction/DropdownMenu/DropdownMenu.module.css */
1604
1604
  @layer component {
1605
- .bds100DropdownMenu-wrapper {
1605
+ .bds102DropdownMenu-wrapper {
1606
1606
  position: relative;
1607
1607
  display: inline-flex;
1608
1608
  }
1609
- .bds100DropdownMenu-menu {
1609
+ .bds102DropdownMenu-menu {
1610
1610
  position: absolute;
1611
1611
  top: calc(100% + var(--bds-space_xxs));
1612
1612
  z-index: var(--bds-z-index_dropdown);
@@ -1614,29 +1614,29 @@
1614
1614
  padding: var(--bds-space_xxs) 0;
1615
1615
  border: var(--dropdown_border, none);
1616
1616
  --bdc_color: currentcolor;
1617
- --bdc_radius: var(--bds-border_radius--s);
1618
- outline: var(--bdc_width) solid var(--bdc_color);
1619
- outline-offset: var(--bdc_offset);
1620
- border-radius: var(--dropdown_radius, var(--bdc_radius));
1617
+ --bdc-outline_radius: var(--bds-border_radius--s);
1618
+ outline: var(--bdc-outline_width) solid var(--bdc_color);
1619
+ outline-offset: var(--bdc-outline_offset);
1620
+ border-radius: var(--dropdown_radius, var(--bdc-outline_radius));
1621
1621
  background-color: var(--dropdown_color, var(--bds-bg));
1622
1622
  color: var(--dropdown_on-color, var(--bds-on-bg));
1623
1623
  box-shadow: var(--dropdown_shadow, var(--bds-shadow_m));
1624
1624
  list-style: none;
1625
1625
  margin: 0;
1626
1626
  }
1627
- .bds100DropdownMenu---placement_bottom-start {
1627
+ .bds102DropdownMenu---placement_bottom-start {
1628
1628
  left: 0;
1629
1629
  }
1630
- .bds100DropdownMenu---placement_bottom-end {
1630
+ .bds102DropdownMenu---placement_bottom-end {
1631
1631
  right: 0;
1632
1632
  }
1633
- .bds100DropdownMenu-separator {
1633
+ .bds102DropdownMenu-separator {
1634
1634
  border: none;
1635
1635
  border-top: 1px solid currentcolor;
1636
1636
  margin: var(--bds-space_xxs) 0;
1637
1637
  opacity: 0.15;
1638
1638
  }
1639
- .bds100DropdownMenu-item {
1639
+ .bds102DropdownMenu-item {
1640
1640
  all: unset;
1641
1641
  display: flex;
1642
1642
  align-items: center;
@@ -1650,22 +1650,22 @@
1650
1650
  box-sizing: border-box;
1651
1651
  transition: var(--bds-animation_transition);
1652
1652
  }
1653
- .bds100DropdownMenu-item:disabled {
1653
+ .bds102DropdownMenu-item:disabled {
1654
1654
  opacity: 0.4;
1655
1655
  cursor: not-allowed;
1656
1656
  }
1657
- .bds100DropdownMenu-item:focus-visible {
1657
+ .bds102DropdownMenu-item:focus-visible {
1658
1658
  outline: var(--bds-outline_default);
1659
1659
  outline-offset: calc(var(--bds-outline_offset) * -1);
1660
1660
  border-radius: var(--bds-border_radius--xs);
1661
1661
  }
1662
1662
  @media (hover: hover) and (pointer: fine) {
1663
- .bds100DropdownMenu-item:not(:disabled):hover {
1663
+ .bds102DropdownMenu-item:not(:disabled):hover {
1664
1664
  background-color: var(--bds-bg--subtle);
1665
- color: var(--bds-interactive);
1665
+ color: var(--bds-color_interactive_on-bg);
1666
1666
  }
1667
1667
  }
1668
- .bds100DropdownMenu-icon {
1668
+ .bds102DropdownMenu-icon {
1669
1669
  display: flex;
1670
1670
  align-items: center;
1671
1671
  flex-shrink: 0;
@@ -1674,39 +1674,39 @@
1674
1674
 
1675
1675
  /* src/components/interaction/Popover/Popover.module.css */
1676
1676
  @layer component {
1677
- .bds100Popover-wrapper {
1677
+ .bds102Popover-wrapper {
1678
1678
  position: relative;
1679
1679
  display: inline-flex;
1680
1680
  }
1681
- .bds100Popover-panel {
1681
+ .bds102Popover-panel {
1682
1682
  position: absolute;
1683
1683
  z-index: var(--bds-z-index_popover);
1684
1684
  min-width: 12rem;
1685
1685
  padding: var(--bds-space_m);
1686
1686
  border: var(--popover_border, none);
1687
1687
  --bdc_color: currentcolor;
1688
- --bdc_radius: var(--bds-border_radius--s);
1689
- outline: var(--bdc_width) solid var(--bdc_color);
1690
- outline-offset: var(--bdc_offset);
1691
- border-radius: var(--popover_radius, var(--bdc_radius));
1688
+ --bdc-outline_radius: var(--bds-border_radius--s);
1689
+ outline: var(--bdc-outline_width) solid var(--bdc_color);
1690
+ outline-offset: var(--bdc-outline_offset);
1691
+ border-radius: var(--popover_radius, var(--bdc-outline_radius));
1692
1692
  background-color: var(--popover_color, var(--bds-bg));
1693
1693
  box-shadow: var(--popover_shadow, var(--bds-shadow_m));
1694
1694
  color: var(--popover_on-color, var(--bds-on-bg));
1695
1695
  font-size: var(--bds-font_size--body);
1696
1696
  }
1697
- .bds100Popover---placement_bottom {
1697
+ .bds102Popover---placement_bottom {
1698
1698
  top: calc(100% + var(--bds-space_xs));
1699
1699
  left: 0;
1700
1700
  }
1701
- .bds100Popover---placement_top {
1701
+ .bds102Popover---placement_top {
1702
1702
  bottom: calc(100% + var(--bds-space_xs));
1703
1703
  left: 0;
1704
1704
  }
1705
- .bds100Popover---placement_right {
1705
+ .bds102Popover---placement_right {
1706
1706
  left: calc(100% + var(--bds-space_xs));
1707
1707
  top: 0;
1708
1708
  }
1709
- .bds100Popover---placement_left {
1709
+ .bds102Popover---placement_left {
1710
1710
  right: calc(100% + var(--bds-space_xs));
1711
1711
  top: 0;
1712
1712
  }
@@ -1714,23 +1714,23 @@
1714
1714
 
1715
1715
  /* src/components/interaction/Rating/Rating.module.css */
1716
1716
  @layer component {
1717
- .bds100Rating-rating {
1717
+ .bds102Rating-rating {
1718
1718
  display: inline-flex;
1719
1719
  gap: var(--bds-space_xxxs);
1720
1720
  color: var(--bds-bg);
1721
1721
  }
1722
- .bds100Rating-star {
1722
+ .bds102Rating-star {
1723
1723
  width: 1.5em;
1724
1724
  height: 1.5em;
1725
1725
  }
1726
- .bds100Rating---filled {
1726
+ .bds102Rating---filled {
1727
1727
  color: var(--bds-warning);
1728
1728
  }
1729
1729
  }
1730
1730
 
1731
1731
  /* src/components/interaction/Toast/Toast.module.css */
1732
1732
  @layer component {
1733
- .bds100Toast-toastContainer {
1733
+ .bds102Toast-toastContainer {
1734
1734
  position: fixed;
1735
1735
  bottom: var(--bds-space_xl);
1736
1736
  right: var(--bds-space_xl);
@@ -1739,7 +1739,7 @@
1739
1739
  gap: var(--bds-space_m);
1740
1740
  z-index: var(--bds-z-index_toast);
1741
1741
  }
1742
- .bds100Toast-toast {
1742
+ .bds102Toast-toast {
1743
1743
  padding: var(--bds-space_m) var(--bds-space_l);
1744
1744
  background-color: var(--toast_color, var(--bds-bg));
1745
1745
  color: var(--toast_on-color, var(--bds-on-bg));
@@ -1751,26 +1751,26 @@
1751
1751
  min-width: 300px;
1752
1752
  animation: slideIn var(--bds-animation_duration--fast) var(--bds-animation_easing);
1753
1753
  }
1754
- .bds100Toast-toast.bds100Toast---variant_success {
1754
+ .bds102Toast-toast.bds102Toast---variant_success {
1755
1755
  --toast_color: var(--bds-success);
1756
1756
  --toast_on-color: var(--bds-on-success);
1757
1757
  }
1758
- .bds100Toast-toast.bds100Toast---variant_warning {
1758
+ .bds102Toast-toast.bds102Toast---variant_warning {
1759
1759
  --toast_color: var(--bds-warning);
1760
1760
  --toast_on-color: var(--bds-on-warning);
1761
1761
  }
1762
- .bds100Toast-toast.bds100Toast---variant_info {
1762
+ .bds102Toast-toast.bds102Toast---variant_info {
1763
1763
  --toast_color: var(--bds-bg--subtle);
1764
1764
  --toast_on-color: var(--bds-on-bg--subtle);
1765
1765
  }
1766
- .bds100Toast-toast.bds100Toast---variant_error {
1766
+ .bds102Toast-toast.bds102Toast---variant_error {
1767
1767
  --toast_color: var(--bds-error);
1768
1768
  --toast_on-color: var(--bds-on-error);
1769
1769
  }
1770
- .bds100Toast-message {
1770
+ .bds102Toast-message {
1771
1771
  flex: 1;
1772
1772
  }
1773
- .bds100Toast-closeButton {
1773
+ .bds102Toast-closeButton {
1774
1774
  display: flex;
1775
1775
  align-items: center;
1776
1776
  justify-content: center;
@@ -1783,7 +1783,7 @@
1783
1783
  cursor: pointer;
1784
1784
  color: var(--toast_on-color);
1785
1785
  }
1786
- .bds100Toast-closeButton svg {
1786
+ .bds102Toast-closeButton svg {
1787
1787
  width: 1rem;
1788
1788
  height: 1rem;
1789
1789
  }
@@ -1801,39 +1801,39 @@
1801
1801
 
1802
1802
  /* src/components/interaction/form/Checkbox/Checkbox.module.css */
1803
1803
  @layer component {
1804
- .bds100Checkbox-checkboxGroup {
1804
+ .bds102Checkbox-checkboxGroup {
1805
1805
  --inputSize: calc(var(--bds-space_s) * 2);
1806
1806
  display: flex;
1807
1807
  flex-direction: column;
1808
1808
  }
1809
- .bds100Checkbox-inputWrapper {
1809
+ .bds102Checkbox-inputWrapper {
1810
1810
  display: flex;
1811
1811
  align-items: stretch;
1812
1812
  gap: var(--bds-space_xs);
1813
1813
  }
1814
- .bds100Checkbox-checkbox {
1814
+ .bds102Checkbox-checkbox {
1815
1815
  margin-block-start: 0.25em;
1816
1816
  width: var(--inputSize);
1817
1817
  height: var(--inputSize);
1818
1818
  color: var(--checkbox_color, var(--bds-on-bg));
1819
1819
  border: var(--checkbox_border, none);
1820
1820
  --bdc_color: currentcolor;
1821
- --bdc_radius: var(--bds-border_radius--xs);
1822
- outline: var(--bdc_width) solid var(--bdc_color);
1823
- outline-offset: var(--bdc_offset);
1824
- border-radius: var(--checkbox_radius, var(--bdc_radius));
1825
- box-shadow: var(--checkbox_shadow, var(--bdc_shadow));
1821
+ --bdc-outline_radius: var(--bds-border_radius--xs);
1822
+ outline: var(--bdc-outline_width) solid var(--bdc_color);
1823
+ outline-offset: var(--bdc-outline_offset);
1824
+ border-radius: var(--checkbox_radius, var(--bdc-outline_radius));
1825
+ box-shadow: var(--checkbox_shadow, var(--bdc-outline_shadow));
1826
1826
  appearance: none;
1827
1827
  background-color: var(--checkbox_color_bg, var(--bds-bg));
1828
1828
  cursor: pointer;
1829
1829
  position: relative;
1830
1830
  transition: --bdc_color 0.3s ease, background-color 0.3s ease;
1831
1831
  }
1832
- .bds100Checkbox-checkbox:checked {
1832
+ .bds102Checkbox-checkbox:checked {
1833
1833
  background-color: var(--checkbox_color-active, var(--bds-active));
1834
1834
  --bdc_color: var(--checkbox_color-active, var(--bds-active));
1835
1835
  }
1836
- .bds100Checkbox-checkbox:checked::after {
1836
+ .bds102Checkbox-checkbox:checked::after {
1837
1837
  content: "";
1838
1838
  position: absolute;
1839
1839
  left: 0.6em;
@@ -1844,33 +1844,33 @@
1844
1844
  border-width: 0 2px 2px 0;
1845
1845
  transform: rotate(45deg);
1846
1846
  }
1847
- .bds100Checkbox-checkbox:focus {
1847
+ .bds102Checkbox-checkbox:focus {
1848
1848
  --bdc_color: var(--bdc_color--focus);
1849
1849
  }
1850
- .bds100Checkbox-checkbox:focus-visible {
1850
+ .bds102Checkbox-checkbox:focus-visible {
1851
1851
  outline: var(--bds-outline_default);
1852
1852
  outline-offset: var(--bds-outline_offset);
1853
1853
  }
1854
- .bds100Checkbox-checkboxError {
1854
+ .bds102Checkbox-checkboxError {
1855
1855
  --bdc_color: var(--bdc_color--error);
1856
1856
  }
1857
1857
  }
1858
1858
 
1859
1859
  /* src/components/interaction/form/atoms/Message.module.css */
1860
1860
  @layer component {
1861
- .bds100Message-error,
1862
- .bds100Message-hint {
1861
+ .bds102Message-error,
1862
+ .bds102Message-hint {
1863
1863
  font-size: var(--bds-font_size--body--s);
1864
1864
  margin-inline-start: var(--labelPosition);
1865
1865
  }
1866
- .bds100Message-error {
1867
- color: var(--bds-error);
1866
+ .bds102Message-error {
1867
+ color: var(--bds-color_error_on-bg);
1868
1868
  }
1869
1869
  }
1870
1870
 
1871
1871
  /* src/components/interaction/form/atoms/Label.module.css */
1872
1872
  @layer component {
1873
- .bds100Label-label {
1873
+ .bds102Label-label {
1874
1874
  display: flex;
1875
1875
  align-items: center;
1876
1876
  font-family: var(--bds-font_family--body);
@@ -1881,7 +1881,7 @@
1881
1881
 
1882
1882
  /* src/components/interaction/form/atoms/InputContainer.module.css */
1883
1883
  @layer component {
1884
- .bds100InputContainer-container {
1884
+ .bds102InputContainer-container {
1885
1885
  --labelPosition: calc(var(--inputSize) + var(--bds-space_m));
1886
1886
  display: flex;
1887
1887
  flex-direction: column;
@@ -1891,7 +1891,7 @@
1891
1891
 
1892
1892
  /* src/components/interaction/form/CheckboxGroup/CheckboxGroup.module.css */
1893
1893
  @layer component {
1894
- .bds100CheckboxGroup-group {
1894
+ .bds102CheckboxGroup-group {
1895
1895
  border: none;
1896
1896
  padding: 0;
1897
1897
  margin: 0;
@@ -1899,7 +1899,7 @@
1899
1899
  flex-direction: column;
1900
1900
  gap: var(--bds-space_xs);
1901
1901
  }
1902
- .bds100CheckboxGroup-legend {
1902
+ .bds102CheckboxGroup-legend {
1903
1903
  font-family: var(--bds-font_family--body);
1904
1904
  font-size: var(--bds-font_size--body--s);
1905
1905
  font-weight: var(--bds-font_weight--medium);
@@ -1907,10 +1907,10 @@
1907
1907
  padding: 0;
1908
1908
  margin-block-end: var(--bds-space_xs);
1909
1909
  }
1910
- .bds100CheckboxGroup-required {
1910
+ .bds102CheckboxGroup-required {
1911
1911
  color: var(--bds-error);
1912
1912
  }
1913
- .bds100CheckboxGroup-items {
1913
+ .bds102CheckboxGroup-items {
1914
1914
  display: flex;
1915
1915
  flex-direction: column;
1916
1916
  gap: var(--bds-space_xs);
@@ -1919,16 +1919,16 @@
1919
1919
 
1920
1920
  /* src/components/interaction/form/Combobox/Combobox.module.css */
1921
1921
  @layer component {
1922
- .bds100Combobox-formGroup {
1922
+ .bds102Combobox-formGroup {
1923
1923
  display: flex;
1924
1924
  flex-direction: column;
1925
1925
  }
1926
- .bds100Combobox-inputWrapper {
1926
+ .bds102Combobox-inputWrapper {
1927
1927
  position: relative;
1928
1928
  display: flex;
1929
1929
  align-items: center;
1930
1930
  }
1931
- .bds100Combobox-input {
1931
+ .bds102Combobox-input {
1932
1932
  appearance: none;
1933
1933
  width: 100%;
1934
1934
  font-family: var(--bds-font_family--body);
@@ -1937,30 +1937,30 @@
1937
1937
  padding-inline-end: var(--bds-space_xxl);
1938
1938
  border: var(--combobox_border, none);
1939
1939
  --bdc_color: currentcolor;
1940
- --bdc_radius: var(--bds-border_radius--xs);
1941
- outline: var(--bdc_width) solid var(--bdc_color);
1942
- outline-offset: var(--bdc_offset);
1943
- border-radius: var(--combobox_radius, var(--bdc_radius));
1944
- box-shadow: var(--combobox_shadow, var(--bdc_shadow));
1940
+ --bdc-outline_radius: var(--bds-border_radius--xs);
1941
+ outline: var(--bdc-outline_width) solid var(--bdc_color);
1942
+ outline-offset: var(--bdc-outline_offset);
1943
+ border-radius: var(--combobox_radius, var(--bdc-outline_radius));
1944
+ box-shadow: var(--combobox_shadow, var(--bdc-outline_shadow));
1945
1945
  background-color: var(--combobox_color_bg, var(--bds-bg));
1946
1946
  color: var(--combobox_color, var(--bds-on-bg));
1947
1947
  transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing), background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
1948
1948
  }
1949
- .bds100Combobox-input:focus {
1949
+ .bds102Combobox-input:focus {
1950
1950
  --bdc_color: var(--bdc_color--focus);
1951
1951
  }
1952
- .bds100Combobox-input:focus-visible {
1952
+ .bds102Combobox-input:focus-visible {
1953
1953
  outline: var(--bds-outline_default);
1954
1954
  outline-offset: var(--bds-outline_offset);
1955
1955
  }
1956
- .bds100Combobox-input:disabled {
1956
+ .bds102Combobox-input:disabled {
1957
1957
  opacity: 0.5;
1958
1958
  cursor: not-allowed;
1959
1959
  }
1960
- .bds100Combobox-inputError {
1960
+ .bds102Combobox-inputError {
1961
1961
  --bdc_color: var(--bdc_color--error);
1962
1962
  }
1963
- .bds100Combobox-chevron {
1963
+ .bds102Combobox-chevron {
1964
1964
  position: absolute;
1965
1965
  inset-inline-end: var(--bds-space_s);
1966
1966
  display: flex;
@@ -1968,11 +1968,11 @@
1968
1968
  pointer-events: none;
1969
1969
  color: var(--combobox_color, var(--bds-on-bg));
1970
1970
  }
1971
- .bds100Combobox-chevron svg {
1971
+ .bds102Combobox-chevron svg {
1972
1972
  width: 1rem;
1973
1973
  height: 1rem;
1974
1974
  }
1975
- .bds100Combobox-listbox {
1975
+ .bds102Combobox-listbox {
1976
1976
  position: absolute;
1977
1977
  top: calc(100% + var(--bds-space_xxs));
1978
1978
  left: 0;
@@ -1985,15 +1985,15 @@
1985
1985
  padding: var(--bds-space_xxs) 0;
1986
1986
  border: var(--combobox_listbox-border, none);
1987
1987
  --bdc_color: currentcolor;
1988
- --bdc_radius: var(--bds-border_radius--xs);
1989
- outline: var(--bdc_width) solid var(--bdc_color);
1990
- outline-offset: var(--bdc_offset);
1991
- border-radius: var(--combobox_listbox-radius, var(--bdc_radius));
1988
+ --bdc-outline_radius: var(--bds-border_radius--xs);
1989
+ outline: var(--bdc-outline_width) solid var(--bdc_color);
1990
+ outline-offset: var(--bdc-outline_offset);
1991
+ border-radius: var(--combobox_listbox-radius, var(--bdc-outline_radius));
1992
1992
  background-color: var(--combobox_color, var(--bds-bg));
1993
1993
  color: var(--combobox_on-color, var(--bds-on-bg));
1994
1994
  box-shadow: var(--combobox_listbox-shadow, var(--bds-shadow_m));
1995
1995
  }
1996
- .bds100Combobox-option {
1996
+ .bds102Combobox-option {
1997
1997
  display: flex;
1998
1998
  align-items: center;
1999
1999
  padding: var(--bds-space_xs) var(--bds-space_m);
@@ -2002,14 +2002,14 @@
2002
2002
  cursor: pointer;
2003
2003
  transition: var(--bds-animation_transition);
2004
2004
  }
2005
- .bds100Combobox-option.bds100Combobox---highlighted {
2005
+ .bds102Combobox-option.bds102Combobox---highlighted {
2006
2006
  background-color: var(--bds-bg--subtle);
2007
2007
  color: var(--bds-interactive);
2008
2008
  }
2009
- .bds100Combobox-option.bds100Combobox---selected {
2009
+ .bds102Combobox-option.bds102Combobox---selected {
2010
2010
  font-weight: var(--bds-font_weight--semibold);
2011
2011
  }
2012
- .bds100Combobox-option.bds100Combobox---disabled {
2012
+ .bds102Combobox-option.bds102Combobox---disabled {
2013
2013
  opacity: 0.4;
2014
2014
  cursor: not-allowed;
2015
2015
  }
@@ -2017,18 +2017,18 @@
2017
2017
 
2018
2018
  /* src/components/interaction/form/FileInput/FileInput.module.css */
2019
2019
  @layer component {
2020
- .bds100FileInput-formGroup {
2020
+ .bds102FileInput-formGroup {
2021
2021
  display: flex;
2022
2022
  flex-direction: column;
2023
2023
  }
2024
- .bds100FileInput-fieldLabel {
2024
+ .bds102FileInput-fieldLabel {
2025
2025
  display: flex;
2026
2026
  align-items: center;
2027
2027
  font-family: var(--bds-font_family--body);
2028
2028
  color: var(--bds-on-bg);
2029
2029
  margin-block-end: var(--bds-space_xs);
2030
2030
  }
2031
- .bds100FileInput-dropZone {
2031
+ .bds102FileInput-dropZone {
2032
2032
  display: flex;
2033
2033
  flex-direction: column;
2034
2034
  align-items: center;
@@ -2042,40 +2042,40 @@
2042
2042
  text-align: center;
2043
2043
  transition: var(--bds-animation_transition);
2044
2044
  }
2045
- .bds100FileInput-dropZone:focus-within {
2045
+ .bds102FileInput-dropZone:focus-within {
2046
2046
  outline: var(--bds-outline_default);
2047
2047
  outline-offset: var(--bds-outline_offset);
2048
2048
  border-color: var(--fileInput_border-color, currentcolor);
2049
2049
  }
2050
- .bds100FileInput-isDragging {
2050
+ .bds102FileInput-isDragging {
2051
2051
  border-color: currentcolor;
2052
2052
  background-color: rgb(from currentcolor r g b / 8%);
2053
2053
  }
2054
- .bds100FileInput-hasError {
2054
+ .bds102FileInput-hasError {
2055
2055
  border-color: var(--bds-error);
2056
2056
  }
2057
- .bds100FileInput-isDisabled {
2057
+ .bds102FileInput-isDisabled {
2058
2058
  opacity: 0.5;
2059
2059
  cursor: not-allowed;
2060
2060
  }
2061
- .bds100FileInput-icon {
2061
+ .bds102FileInput-icon {
2062
2062
  width: 2rem;
2063
2063
  height: 2rem;
2064
2064
  flex-shrink: 0;
2065
2065
  }
2066
- .bds100FileInput-prompt {
2066
+ .bds102FileInput-prompt {
2067
2067
  font-size: var(--bds-font_size--body);
2068
2068
  color: var(--bds-on-bg);
2069
2069
  }
2070
- .bds100FileInput-prompt strong {
2070
+ .bds102FileInput-prompt strong {
2071
2071
  color: var(--bds-interactive);
2072
2072
  font-weight: var(--bds-font_weight--semibold);
2073
2073
  }
2074
- .bds100FileInput-acceptHint {
2074
+ .bds102FileInput-acceptHint {
2075
2075
  font-size: var(--bds-font_size--body--s);
2076
2076
  color: var(--bds-on-bg);
2077
2077
  }
2078
- .bds100FileInput-hiddenInput {
2078
+ .bds102FileInput-hiddenInput {
2079
2079
  position: absolute;
2080
2080
  width: 1px;
2081
2081
  height: 1px;
@@ -2085,7 +2085,7 @@
2085
2085
  border: 0;
2086
2086
  }
2087
2087
  @media (hover: hover) and (pointer: fine) {
2088
- .bds100FileInput-dropZone:not(.bds100FileInput-isDisabled):hover {
2088
+ .bds102FileInput-dropZone:not(.bds102FileInput-isDisabled):hover {
2089
2089
  border-color: var(--bds-interactive);
2090
2090
  background-color: rgb(from var(--bds-interactive) r g b / 4%);
2091
2091
  }
@@ -2094,65 +2094,65 @@
2094
2094
 
2095
2095
  /* src/components/interaction/form/FormInput/FormInput.module.css */
2096
2096
  @layer component {
2097
- .bds100FormInput-formGroup {
2097
+ .bds102FormInput-formGroup {
2098
2098
  --labelPosition: 0;
2099
2099
  display: flex;
2100
2100
  flex-direction: column;
2101
2101
  }
2102
- .bds100FormInput-input {
2102
+ .bds102FormInput-input {
2103
2103
  font-family: var(--bds-font_family--body);
2104
2104
  font-size: var(--bds-font_size--body);
2105
2105
  padding: var(--bds-space_s);
2106
2106
  border: var(--input_border, none);
2107
2107
  --bdc_color: currentcolor;
2108
- --bdc_radius: var(--bds-border_radius--xs);
2109
- outline: var(--bdc_width) solid var(--bdc_color);
2110
- outline-offset: var(--bdc_offset);
2111
- border-radius: var(--input_radius, var(--bdc_radius));
2112
- box-shadow: var(--input_shadow, var(--bdc_shadow));
2108
+ --bdc-outline_radius: var(--bds-border_radius--xs);
2109
+ outline: var(--bdc-outline_width) solid var(--bdc_color);
2110
+ outline-offset: var(--bdc-outline_offset);
2111
+ border-radius: var(--input_radius, var(--bdc-outline_radius));
2112
+ box-shadow: var(--input_shadow, var(--bdc-outline_shadow));
2113
2113
  color: var(--input_color, var(--bds-on-bg));
2114
2114
  background-color: var(--input_color_bg, var(--bds-bg));
2115
2115
  transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing), background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
2116
2116
  }
2117
- .bds100FormInput-input:focus {
2117
+ .bds102FormInput-input:focus {
2118
2118
  --bdc_color: var(--bdc_color--focus);
2119
2119
  }
2120
- .bds100FormInput-input:focus-visible {
2120
+ .bds102FormInput-input:focus-visible {
2121
2121
  outline: var(--bds-outline_default);
2122
2122
  outline-offset: var(--bds-outline_offset);
2123
2123
  }
2124
- .bds100FormInput-inputError {
2124
+ .bds102FormInput-inputError {
2125
2125
  --bdc_color: var(--bdc_color--error);
2126
2126
  }
2127
2127
  }
2128
2128
 
2129
2129
  /* src/components/interaction/form/NumberInput/NumberInput.module.css */
2130
2130
  @layer component {
2131
- .bds100NumberInput-formGroup {
2131
+ .bds102NumberInput-formGroup {
2132
2132
  display: flex;
2133
2133
  flex-direction: column;
2134
2134
  }
2135
- .bds100NumberInput-inputRow {
2135
+ .bds102NumberInput-inputRow {
2136
2136
  display: flex;
2137
2137
  align-items: stretch;
2138
2138
  border: var(--numberInput_border, none);
2139
2139
  --bdc_color: currentcolor;
2140
- --bdc_radius: var(--bds-border_radius--xs);
2141
- outline: var(--bdc_width) solid var(--bdc_color);
2142
- outline-offset: var(--bdc_offset);
2143
- border-radius: var(--numberInput_radius, var(--bdc_radius));
2144
- box-shadow: var(--numberInput_shadow, var(--bdc_shadow));
2140
+ --bdc-outline_radius: var(--bds-border_radius--xs);
2141
+ outline: var(--bdc-outline_width) solid var(--bdc_color);
2142
+ outline-offset: var(--bdc-outline_offset);
2143
+ border-radius: var(--numberInput_radius, var(--bdc-outline_radius));
2144
+ box-shadow: var(--numberInput_shadow, var(--bdc-outline_shadow));
2145
2145
  overflow: hidden;
2146
2146
  transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing);
2147
2147
  }
2148
- .bds100NumberInput-inputRow:focus-within {
2148
+ .bds102NumberInput-inputRow:focus-within {
2149
2149
  --bdc_color: var(--bdc_color--focus);
2150
2150
  }
2151
- .bds100NumberInput-inputRow:focus-within:has(:focus-visible) {
2151
+ .bds102NumberInput-inputRow:focus-within:has(:focus-visible) {
2152
2152
  outline: var(--bds-outline_default);
2153
2153
  outline-offset: var(--bds-outline_offset);
2154
2154
  }
2155
- .bds100NumberInput-input {
2155
+ .bds102NumberInput-input {
2156
2156
  flex: 1;
2157
2157
  border: none;
2158
2158
  outline: none;
@@ -2165,14 +2165,14 @@
2165
2165
  min-width: 0;
2166
2166
  appearance: textfield;
2167
2167
  }
2168
- .bds100NumberInput-input::-webkit-inner-spin-button,
2169
- .bds100NumberInput-input::-webkit-outer-spin-button {
2168
+ .bds102NumberInput-input::-webkit-inner-spin-button,
2169
+ .bds102NumberInput-input::-webkit-outer-spin-button {
2170
2170
  appearance: none;
2171
2171
  }
2172
- .bds100NumberInput-inputError {
2172
+ .bds102NumberInput-inputError {
2173
2173
  --bdc_color: var(--bdc_color--error);
2174
2174
  }
2175
- .bds100NumberInput-stepper {
2175
+ .bds102NumberInput-stepper {
2176
2176
  all: unset;
2177
2177
  display: flex;
2178
2178
  align-items: center;
@@ -2184,16 +2184,16 @@
2184
2184
  transition: var(--bds-animation_transition);
2185
2185
  flex-shrink: 0;
2186
2186
  }
2187
- .bds100NumberInput-stepper svg {
2187
+ .bds102NumberInput-stepper svg {
2188
2188
  width: 1rem;
2189
2189
  height: 1rem;
2190
2190
  }
2191
- .bds100NumberInput-stepper:disabled {
2191
+ .bds102NumberInput-stepper:disabled {
2192
2192
  opacity: 0.4;
2193
2193
  cursor: not-allowed;
2194
2194
  }
2195
2195
  @media (hover: hover) and (pointer: fine) {
2196
- .bds100NumberInput-stepper:not(:disabled):hover {
2196
+ .bds102NumberInput-stepper:not(:disabled):hover {
2197
2197
  background-color: var(--bds-bg--subtle);
2198
2198
  opacity: 0.7;
2199
2199
  }
@@ -2202,29 +2202,29 @@
2202
2202
 
2203
2203
  /* src/components/interaction/form/Radio/Radio.module.css */
2204
2204
  @layer component {
2205
- .bds100Radio-radioGroup {
2205
+ .bds102Radio-radioGroup {
2206
2206
  --inputSize: calc(var(--bds-space_s) * 2);
2207
2207
  --labelPosition: calc(var(--inputSize) + var(--bds-space_m));
2208
2208
  display: flex;
2209
2209
  flex-direction: column;
2210
2210
  }
2211
- .bds100Radio-inputWrapper {
2211
+ .bds102Radio-inputWrapper {
2212
2212
  display: flex;
2213
2213
  align-items: flex-start;
2214
2214
  gap: var(--bds-space_xs);
2215
2215
  }
2216
- .bds100Radio-textWrapper {
2216
+ .bds102Radio-textWrapper {
2217
2217
  display: flex;
2218
2218
  flex-direction: column;
2219
2219
  gap: var(--bds-space_xxxs);
2220
2220
  padding-block-start: var(--bds-space_xxxs);
2221
2221
  }
2222
- .bds100Radio-description {
2222
+ .bds102Radio-description {
2223
2223
  font-size: var(--bds-font_size--body--s);
2224
2224
  color: var(--radio_description-color, var(--bds-on-bg--subtle));
2225
2225
  line-height: var(--bds-font_line-height--body);
2226
2226
  }
2227
- .bds100Radio-radio {
2227
+ .bds102Radio-radio {
2228
2228
  flex-shrink: 0;
2229
2229
  margin-block-start: 0.2em;
2230
2230
  width: var(--inputSize);
@@ -2232,22 +2232,22 @@
2232
2232
  color: var(--radio_color, var(--bds-on-bg));
2233
2233
  border: var(--radio_border, none);
2234
2234
  --bdc_color: currentcolor;
2235
- --bdc_radius: 50%;
2236
- outline: var(--bdc_width) solid var(--bdc_color);
2237
- outline-offset: var(--bdc_offset);
2238
- border-radius: var(--radio_radius, var(--bdc_radius));
2239
- box-shadow: var(--radio_shadow, var(--bdc_shadow));
2235
+ --bdc-outline_radius: 50%;
2236
+ outline: var(--bdc-outline_width) solid var(--bdc_color);
2237
+ outline-offset: var(--bdc-outline_offset);
2238
+ border-radius: var(--radio_radius, var(--bdc-outline_radius));
2239
+ box-shadow: var(--radio_shadow, var(--bdc-outline_shadow));
2240
2240
  appearance: none;
2241
2241
  background-color: var(--radio_color_bg, var(--bds-bg));
2242
2242
  cursor: pointer;
2243
2243
  position: relative;
2244
2244
  transition: --bdc_color 0.2s ease, background-color 0.2s ease;
2245
2245
  }
2246
- .bds100Radio-radio:checked {
2246
+ .bds102Radio-radio:checked {
2247
2247
  background-color: var(--radio_color-active, var(--bds-active));
2248
2248
  --bdc_color: var(--radio_color-active, var(--bds-active));
2249
2249
  }
2250
- .bds100Radio-radio:checked::after {
2250
+ .bds102Radio-radio:checked::after {
2251
2251
  content: "";
2252
2252
  position: absolute;
2253
2253
  left: 50%;
@@ -2258,21 +2258,21 @@
2258
2258
  border-radius: 50%;
2259
2259
  background-color: var(--radio_color-on-active, var(--bds-on-active));
2260
2260
  }
2261
- .bds100Radio-radio:focus {
2261
+ .bds102Radio-radio:focus {
2262
2262
  --bdc_color: var(--bdc_color--focus);
2263
2263
  }
2264
- .bds100Radio-radio:focus-visible {
2264
+ .bds102Radio-radio:focus-visible {
2265
2265
  outline: var(--bds-outline_default);
2266
2266
  outline-offset: var(--bds-outline_offset);
2267
2267
  }
2268
- .bds100Radio-radioError {
2268
+ .bds102Radio-radioError {
2269
2269
  --bdc_color: var(--bdc_color--error);
2270
2270
  }
2271
2271
  }
2272
2272
 
2273
2273
  /* src/components/interaction/form/RadioGroup/RadioGroup.module.css */
2274
2274
  @layer component {
2275
- .bds100RadioGroup-group {
2275
+ .bds102RadioGroup-group {
2276
2276
  border: none;
2277
2277
  padding: 0;
2278
2278
  margin: 0;
@@ -2280,7 +2280,7 @@
2280
2280
  flex-direction: column;
2281
2281
  gap: var(--bds-space_xs);
2282
2282
  }
2283
- .bds100RadioGroup-legend {
2283
+ .bds102RadioGroup-legend {
2284
2284
  font-family: var(--bds-font_family--body);
2285
2285
  font-size: var(--bds-font_size--body--s);
2286
2286
  font-weight: var(--bds-font_weight--medium);
@@ -2288,10 +2288,10 @@
2288
2288
  padding: 0;
2289
2289
  margin-block-end: var(--bds-space_xs);
2290
2290
  }
2291
- .bds100RadioGroup-required {
2291
+ .bds102RadioGroup-required {
2292
2292
  color: var(--bds-error);
2293
2293
  }
2294
- .bds100RadioGroup-items {
2294
+ .bds102RadioGroup-items {
2295
2295
  display: flex;
2296
2296
  flex-direction: column;
2297
2297
  gap: var(--bds-space_xs);
@@ -2300,7 +2300,7 @@
2300
2300
 
2301
2301
  /* src/components/interaction/form/SegmentedControl/SegmentedControl.module.css */
2302
2302
  @layer component {
2303
- .bds100SegmentedControl-control {
2303
+ .bds102SegmentedControl-control {
2304
2304
  position: relative;
2305
2305
  display: inline-grid;
2306
2306
  grid-auto-flow: column;
@@ -2310,7 +2310,7 @@
2310
2310
  border-radius: var(--bds-border_radius--m);
2311
2311
  gap: 0;
2312
2312
  }
2313
- .bds100SegmentedControl-thumb {
2313
+ .bds102SegmentedControl-thumb {
2314
2314
  position: absolute;
2315
2315
  top: var(--bds-space_xxxs);
2316
2316
  bottom: var(--bds-space_xxxs);
@@ -2323,7 +2323,7 @@
2323
2323
  transform: translateX(calc(var(--control_selected-index, 0) * 100%));
2324
2324
  transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
2325
2325
  }
2326
- .bds100SegmentedControl-item {
2326
+ .bds102SegmentedControl-item {
2327
2327
  position: relative;
2328
2328
  z-index: 1;
2329
2329
  display: flex;
@@ -2333,18 +2333,18 @@
2333
2333
  border-radius: var(--bds-border_radius--s);
2334
2334
  transition: var(--bds-animation_transition);
2335
2335
  }
2336
- .bds100SegmentedControl-item.bds100SegmentedControl---disabled {
2337
- opacity: 0.4;
2336
+ .bds102SegmentedControl-item.bds102SegmentedControl---disabled {
2337
+ opacity: 0.5;
2338
2338
  cursor: not-allowed;
2339
2339
  }
2340
- .bds100SegmentedControl-radio {
2340
+ .bds102SegmentedControl-radio {
2341
2341
  position: absolute;
2342
2342
  opacity: 0;
2343
2343
  width: 0;
2344
2344
  height: 0;
2345
2345
  margin: 0;
2346
2346
  }
2347
- .bds100SegmentedControl-label {
2347
+ .bds102SegmentedControl-label {
2348
2348
  display: block;
2349
2349
  padding: var(--bds-space_xs) var(--bds-space_m);
2350
2350
  white-space: nowrap;
@@ -2355,33 +2355,33 @@
2355
2355
  pointer-events: none;
2356
2356
  user-select: none;
2357
2357
  }
2358
- .bds100SegmentedControl-control.bds100SegmentedControl---size_small .bds100SegmentedControl-label {
2358
+ .bds102SegmentedControl-control.bds102SegmentedControl---size_small .bds102SegmentedControl-label {
2359
2359
  padding: var(--bds-space_xxs) var(--bds-space_s);
2360
2360
  font-size: var(--bds-font_size--body--s);
2361
2361
  }
2362
- .bds100SegmentedControl-control.bds100SegmentedControl---size_large .bds100SegmentedControl-label {
2362
+ .bds102SegmentedControl-control.bds102SegmentedControl---size_large .bds102SegmentedControl-label {
2363
2363
  padding: var(--bds-space_s) var(--bds-space_m);
2364
2364
  white-space: normal;
2365
2365
  text-align: center;
2366
2366
  }
2367
- .bds100SegmentedControl-item.bds100SegmentedControl---active .bds100SegmentedControl-label {
2367
+ .bds102SegmentedControl-item.bds102SegmentedControl---active .bds102SegmentedControl-label {
2368
2368
  color: var(--control_label-color--active, var(--bds-on-bg));
2369
2369
  }
2370
- .bds100SegmentedControl-radio:focus-visible ~ .bds100SegmentedControl-label {
2370
+ .bds102SegmentedControl-radio:focus-visible ~ .bds102SegmentedControl-label {
2371
2371
  outline: var(--bds-outline_default);
2372
2372
  outline-offset: calc(var(--bds-outline_offset) * -1);
2373
2373
  border-radius: var(--bds-border_radius--s);
2374
2374
  }
2375
2375
  @media (hover: hover) and (pointer: fine) {
2376
- .bds100SegmentedControl-item:not(.bds100SegmentedControl---active, .bds100SegmentedControl---disabled):hover .bds100SegmentedControl-label {
2376
+ .bds102SegmentedControl-item:not(.bds102SegmentedControl---active, .bds102SegmentedControl---disabled):hover .bds102SegmentedControl-label {
2377
2377
  color: var(--control_label-color--hover, var(--bds-on-bg));
2378
2378
  }
2379
2379
  }
2380
2380
  @media (prefers-reduced-motion: reduce) {
2381
- .bds100SegmentedControl-thumb {
2381
+ .bds102SegmentedControl-thumb {
2382
2382
  transition: none;
2383
2383
  }
2384
- .bds100SegmentedControl-label {
2384
+ .bds102SegmentedControl-label {
2385
2385
  transition: none;
2386
2386
  }
2387
2387
  }
@@ -2389,16 +2389,16 @@
2389
2389
 
2390
2390
  /* src/components/interaction/form/Select/Select.module.css */
2391
2391
  @layer component {
2392
- .bds100Select-formGroup {
2392
+ .bds102Select-formGroup {
2393
2393
  display: flex;
2394
2394
  flex-direction: column;
2395
2395
  }
2396
- .bds100Select-selectWrapper {
2396
+ .bds102Select-selectWrapper {
2397
2397
  position: relative;
2398
2398
  display: flex;
2399
2399
  align-items: center;
2400
2400
  }
2401
- .bds100Select-select {
2401
+ .bds102Select-select {
2402
2402
  appearance: none;
2403
2403
  width: 100%;
2404
2404
  font-family: var(--bds-font_family--body);
@@ -2407,31 +2407,31 @@
2407
2407
  padding-inline-end: var(--bds-space_xxl);
2408
2408
  border: var(--select_border, none);
2409
2409
  --bdc_color: currentcolor;
2410
- --bdc_radius: var(--bds-border_radius--xs);
2411
- outline: var(--bdc_width) solid var(--bdc_color);
2412
- outline-offset: var(--bdc_offset);
2413
- border-radius: var(--select_radius, var(--bdc_radius));
2414
- box-shadow: var(--select_shadow, var(--bdc_shadow));
2410
+ --bdc-outline_radius: var(--bds-border_radius--xs);
2411
+ outline: var(--bdc-outline_width) solid var(--bdc_color);
2412
+ outline-offset: var(--bdc-outline_offset);
2413
+ border-radius: var(--select_radius, var(--bdc-outline_radius));
2414
+ box-shadow: var(--select_shadow, var(--bdc-outline_shadow));
2415
2415
  background-color: var(--select_color_bg, var(--bds-bg));
2416
2416
  color: var(--select_color, var(--bds-on-bg));
2417
2417
  cursor: pointer;
2418
2418
  transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing), background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
2419
2419
  }
2420
- .bds100Select-select:focus {
2420
+ .bds102Select-select:focus {
2421
2421
  --bdc_color: var(--bdc_color--focus);
2422
2422
  }
2423
- .bds100Select-select:focus-visible {
2423
+ .bds102Select-select:focus-visible {
2424
2424
  outline: var(--bds-outline_default);
2425
2425
  outline-offset: var(--bds-outline_offset);
2426
2426
  }
2427
- .bds100Select-select:disabled {
2427
+ .bds102Select-select:disabled {
2428
2428
  opacity: 0.5;
2429
2429
  cursor: not-allowed;
2430
2430
  }
2431
- .bds100Select-selectError {
2431
+ .bds102Select-selectError {
2432
2432
  --bdc_color: var(--bdc_color--error);
2433
2433
  }
2434
- .bds100Select-chevron {
2434
+ .bds102Select-chevron {
2435
2435
  position: absolute;
2436
2436
  inset-inline-end: var(--bds-space_s);
2437
2437
  display: flex;
@@ -2439,7 +2439,7 @@
2439
2439
  pointer-events: none;
2440
2440
  color: var(--select_color, var(--bds-on-bg));
2441
2441
  }
2442
- .bds100Select-chevron svg {
2442
+ .bds102Select-chevron svg {
2443
2443
  width: 1rem;
2444
2444
  height: 1rem;
2445
2445
  }
@@ -2447,22 +2447,22 @@
2447
2447
 
2448
2448
  /* src/components/interaction/form/Slider/Slider.module.css */
2449
2449
  @layer component {
2450
- .bds100Slider-formGroup {
2450
+ .bds102Slider-formGroup {
2451
2451
  display: flex;
2452
2452
  flex-direction: column;
2453
2453
  gap: var(--bds-space_xxs);
2454
2454
  }
2455
- .bds100Slider-labelRow {
2455
+ .bds102Slider-labelRow {
2456
2456
  display: flex;
2457
2457
  justify-content: space-between;
2458
2458
  align-items: baseline;
2459
2459
  }
2460
- .bds100Slider-value {
2460
+ .bds102Slider-value {
2461
2461
  font-size: var(--bds-font_size--body--s);
2462
2462
  font-variant-numeric: tabular-nums;
2463
2463
  color: var(--bds-on-bg--subtle);
2464
2464
  }
2465
- .bds100Slider-slider {
2465
+ .bds102Slider-slider {
2466
2466
  --slider_fill: 0%;
2467
2467
  --slider_track-height: var(--bds-space_xxs);
2468
2468
  --slider_thumb-size: calc(var(--bds-space_s) * 2);
@@ -2481,16 +2481,16 @@
2481
2481
  cursor: pointer;
2482
2482
  transition: var(--bds-animation_transition);
2483
2483
  }
2484
- .bds100Slider-slider:focus-visible {
2484
+ .bds102Slider-slider:focus-visible {
2485
2485
  outline: var(--bds-outline_default);
2486
2486
  outline-offset: var(--bds-outline_offset);
2487
2487
  border-radius: 999px;
2488
2488
  }
2489
- .bds100Slider-slider:disabled {
2489
+ .bds102Slider-slider:disabled {
2490
2490
  opacity: 0.4;
2491
2491
  cursor: not-allowed;
2492
2492
  }
2493
- .bds100Slider-slider::-webkit-slider-thumb {
2493
+ .bds102Slider-slider::-webkit-slider-thumb {
2494
2494
  appearance: none;
2495
2495
  width: var(--slider_thumb-size);
2496
2496
  height: var(--slider_thumb-size);
@@ -2500,7 +2500,7 @@
2500
2500
  transition: var(--bds-animation_transition);
2501
2501
  cursor: pointer;
2502
2502
  }
2503
- .bds100Slider-slider::-moz-range-thumb {
2503
+ .bds102Slider-slider::-moz-range-thumb {
2504
2504
  width: var(--slider_thumb-size);
2505
2505
  height: var(--slider_thumb-size);
2506
2506
  border: none;
@@ -2509,7 +2509,7 @@
2509
2509
  box-shadow: var(--bds-shadow_s);
2510
2510
  cursor: pointer;
2511
2511
  }
2512
- .bds100Slider-sliderError {
2512
+ .bds102Slider-sliderError {
2513
2513
  background:
2514
2514
  linear-gradient(
2515
2515
  to right,
@@ -2518,16 +2518,16 @@
2518
2518
  var(--bds-bg--subtle) var(--slider_fill),
2519
2519
  var(--bds-bg--subtle) 100%);
2520
2520
  }
2521
- .bds100Slider-sliderError::-webkit-slider-thumb {
2521
+ .bds102Slider-sliderError::-webkit-slider-thumb {
2522
2522
  background-color: var(--bds-error);
2523
2523
  }
2524
- .bds100Slider-sliderError::-moz-range-thumb {
2524
+ .bds102Slider-sliderError::-moz-range-thumb {
2525
2525
  background-color: var(--bds-error);
2526
2526
  }
2527
2527
  @media (prefers-reduced-motion: reduce) {
2528
- .bds100Slider-slider,
2529
- .bds100Slider-slider::-webkit-slider-thumb,
2530
- .bds100Slider-slider::-moz-range-thumb {
2528
+ .bds102Slider-slider,
2529
+ .bds102Slider-slider::-webkit-slider-thumb,
2530
+ .bds102Slider-slider::-moz-range-thumb {
2531
2531
  transition: none;
2532
2532
  }
2533
2533
  }
@@ -2535,7 +2535,7 @@
2535
2535
 
2536
2536
  /* src/components/interaction/form/Switch/Switch.module.css */
2537
2537
  @layer component {
2538
- .bds100Switch-switchGroup {
2538
+ .bds102Switch-switchGroup {
2539
2539
  --switch_thumb-size: 1.25em;
2540
2540
  --switch_track-pad: var(--bds-space_xxxs);
2541
2541
  --switch_track-height: calc(var(--switch_thumb-size) + var(--switch_track-pad) * 2);
@@ -2544,21 +2544,21 @@
2544
2544
  display: flex;
2545
2545
  flex-direction: column;
2546
2546
  }
2547
- .bds100Switch-switchGroup.bds100Switch---size_small {
2547
+ .bds102Switch-switchGroup.bds102Switch---size_small {
2548
2548
  --switch_thumb-size: 1em;
2549
2549
  }
2550
- .bds100Switch-switchGroup.bds100Switch---size_medium {
2550
+ .bds102Switch-switchGroup.bds102Switch---size_medium {
2551
2551
  --switch_thumb-size: 1.25em;
2552
2552
  }
2553
- .bds100Switch-switchGroup.bds100Switch---size_large {
2553
+ .bds102Switch-switchGroup.bds102Switch---size_large {
2554
2554
  --switch_thumb-size: 1.5em;
2555
2555
  }
2556
- .bds100Switch-inputWrapper {
2556
+ .bds102Switch-inputWrapper {
2557
2557
  display: flex;
2558
2558
  align-items: center;
2559
2559
  gap: var(--bds-space_xs);
2560
2560
  }
2561
- .bds100Switch-trackWrapper {
2561
+ .bds102Switch-trackWrapper {
2562
2562
  position: relative;
2563
2563
  display: inline-flex;
2564
2564
  align-items: center;
@@ -2566,7 +2566,7 @@
2566
2566
  width: var(--switch_track-width);
2567
2567
  height: var(--switch_track-height);
2568
2568
  }
2569
- .bds100Switch-switch {
2569
+ .bds102Switch-switch {
2570
2570
  position: absolute;
2571
2571
  inset: 0;
2572
2572
  appearance: none;
@@ -2577,10 +2577,10 @@
2577
2577
  cursor: pointer;
2578
2578
  z-index: 1;
2579
2579
  }
2580
- .bds100Switch-switch:disabled {
2580
+ .bds102Switch-switch:disabled {
2581
2581
  cursor: not-allowed;
2582
2582
  }
2583
- .bds100Switch-track {
2583
+ .bds102Switch-track {
2584
2584
  display: inline-flex;
2585
2585
  align-items: center;
2586
2586
  width: var(--switch_track-width);
@@ -2589,16 +2589,16 @@
2589
2589
  background-color: var(--switch_track-bg, var(--bds-grey--subtle));
2590
2590
  padding-inline: var(--switch_track-pad);
2591
2591
  pointer-events: none;
2592
- outline: var(--bdc_width) solid var(--bdc_color);
2592
+ outline: var(--bdc-outline_width) solid var(--bdc_color);
2593
2593
  outline-offset: var(--bds-outline_offset);
2594
- box-shadow: var(--switch_shadow, var(--bdc_shadow));
2594
+ box-shadow: var(--switch_shadow, var(--bdc-outline_shadow));
2595
2595
  transition:
2596
2596
  --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing),
2597
2597
  background-color var(--bds-animation_transition-duration) var(--bds-animation_easing),
2598
2598
  transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
2599
2599
  --bdc_color: var(--switch_thumb-bg, var(--bds-grey));
2600
2600
  }
2601
- .bds100Switch-thumb {
2601
+ .bds102Switch-thumb {
2602
2602
  display: block;
2603
2603
  width: var(--switch_thumb-size);
2604
2604
  height: var(--switch_thumb-size);
@@ -2608,28 +2608,28 @@
2608
2608
  transition: var(--bds-animation_transition);
2609
2609
  transform: translateX(0);
2610
2610
  }
2611
- .bds100Switch-switch.bds100Switch-switchError + .bds100Switch-track {
2611
+ .bds102Switch-switch.bds102Switch-switchError + .bds102Switch-track {
2612
2612
  --bdc_color: var(--bds-error);
2613
2613
  }
2614
- .bds100Switch-switch:checked + .bds100Switch-track {
2614
+ .bds102Switch-switch:checked + .bds102Switch-track {
2615
2615
  background-color: var(--switch_track-bg--active, var(--bds-active--subtle));
2616
2616
  --bdc_color: var(--switch_thumb-bg--active, var(--bds-active--strong));
2617
2617
  }
2618
- .bds100Switch-switch:checked + .bds100Switch-track .bds100Switch-thumb {
2618
+ .bds102Switch-switch:checked + .bds102Switch-track .bds102Switch-thumb {
2619
2619
  background-color: var(--switch_thumb-bg--active, var(--bds-active--strong));
2620
2620
  transform: translateX(var(--switch_thumb-size));
2621
2621
  }
2622
- .bds100Switch-switch:focus-visible + .bds100Switch-track {
2622
+ .bds102Switch-switch:focus-visible + .bds102Switch-track {
2623
2623
  outline: var(--bds-outline_default);
2624
2624
  outline-offset: var(--bds-outline_offset);
2625
2625
  border-radius: 999px;
2626
2626
  }
2627
- .bds100Switch-switch:disabled + .bds100Switch-track {
2627
+ .bds102Switch-switch:disabled + .bds102Switch-track {
2628
2628
  opacity: 0.4;
2629
2629
  }
2630
2630
  @media (prefers-reduced-motion: reduce) {
2631
- .bds100Switch-track,
2632
- .bds100Switch-thumb {
2631
+ .bds102Switch-track,
2632
+ .bds102Switch-thumb {
2633
2633
  transition: none;
2634
2634
  }
2635
2635
  }
@@ -2637,90 +2637,90 @@
2637
2637
 
2638
2638
  /* src/components/interaction/form/Textarea/Textarea.module.css */
2639
2639
  @layer component {
2640
- .bds100Textarea-formGroup {
2640
+ .bds102Textarea-formGroup {
2641
2641
  display: flex;
2642
2642
  flex-direction: column;
2643
2643
  }
2644
- .bds100Textarea-textarea {
2644
+ .bds102Textarea-textarea {
2645
2645
  font-family: var(--bds-font_family--body);
2646
2646
  font-size: var(--bds-font_size--body);
2647
2647
  line-height: var(--bds-font_line-height--body);
2648
2648
  padding: var(--bds-space_s);
2649
2649
  border: var(--textarea_border, none);
2650
2650
  --bdc_color: currentcolor;
2651
- --bdc_radius: var(--bds-border_radius--xs);
2652
- outline: var(--bdc_width) solid var(--bdc_color);
2653
- outline-offset: var(--bdc_offset);
2654
- border-radius: var(--textarea_radius, var(--bdc_radius));
2655
- box-shadow: var(--textarea_shadow, var(--bdc_shadow));
2651
+ --bdc-outline_radius: var(--bds-border_radius--xs);
2652
+ outline: var(--bdc-outline_width) solid var(--bdc_color);
2653
+ outline-offset: var(--bdc-outline_offset);
2654
+ border-radius: var(--textarea_radius, var(--bdc-outline_radius));
2655
+ box-shadow: var(--textarea_shadow, var(--bdc-outline_shadow));
2656
2656
  background-color: var(--textarea_color_bg, var(--bds-bg));
2657
2657
  color: var(--textarea_color, var(--bds-on-bg));
2658
2658
  resize: vertical;
2659
2659
  min-height: calc(var(--bds-space_m) * 5);
2660
2660
  transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing), background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
2661
2661
  }
2662
- .bds100Textarea-textarea:focus {
2662
+ .bds102Textarea-textarea:focus {
2663
2663
  --bdc_color: var(--bdc_color--focus);
2664
2664
  }
2665
- .bds100Textarea-textarea:focus-visible {
2665
+ .bds102Textarea-textarea:focus-visible {
2666
2666
  outline: var(--bds-outline_default);
2667
2667
  outline-offset: var(--bds-outline_offset);
2668
2668
  }
2669
- .bds100Textarea-textarea:disabled {
2669
+ .bds102Textarea-textarea:disabled {
2670
2670
  opacity: 0.5;
2671
2671
  cursor: not-allowed;
2672
2672
  resize: none;
2673
2673
  }
2674
- .bds100Textarea-textareaError {
2674
+ .bds102Textarea-textareaError {
2675
2675
  --bdc_color: var(--bdc_color--error);
2676
2676
  }
2677
2677
  }
2678
2678
 
2679
2679
  /* src/components/layout/ButtonGroup/ButtonGroup.module.css */
2680
2680
  @layer component {
2681
- .bds100ButtonGroup-buttonGroup {
2681
+ .bds102ButtonGroup-buttonGroup {
2682
2682
  container-type: inline-size;
2683
2683
  container-name: button-group;
2684
2684
  grid-column: var(--bds-grid_span-100);
2685
2685
  }
2686
- .bds100ButtonGroup-buttonGroup .bds100ButtonGroup-container {
2686
+ .bds102ButtonGroup-buttonGroup .bds102ButtonGroup-container {
2687
2687
  position: relative;
2688
2688
  display: flex;
2689
2689
  flex-direction: column-reverse;
2690
2690
  gap: var(--bds-space_l);
2691
2691
  align-items: center;
2692
2692
  }
2693
- .bds100ButtonGroup-buttonGroup.bds100ButtonGroup---variant_card .bds100ButtonGroup-container {
2693
+ .bds102ButtonGroup-buttonGroup.bds102ButtonGroup---variant_card .bds102ButtonGroup-container {
2694
2694
  align-items: stretch;
2695
2695
  }
2696
- .bds100ButtonGroup-buttonGroup.bds100ButtonGroup---variant_flow .bds100ButtonGroup-container,
2697
- .bds100ButtonGroup-buttonGroup.bds100ButtonGroup---variant_modal .bds100ButtonGroup-container {
2696
+ .bds102ButtonGroup-buttonGroup.bds102ButtonGroup---variant_flow .bds102ButtonGroup-container,
2697
+ .bds102ButtonGroup-buttonGroup.bds102ButtonGroup---variant_modal .bds102ButtonGroup-container {
2698
2698
  align-items: center;
2699
2699
  }
2700
- .bds100ButtonGroup-buttonGroup.bds100ButtonGroup---variant_content .bds100ButtonGroup-container {
2700
+ .bds102ButtonGroup-buttonGroup.bds102ButtonGroup---variant_content .bds102ButtonGroup-container {
2701
2701
  align-items: flex-start;
2702
2702
  }
2703
2703
  @supports (contain: inline-size) {
2704
2704
  @container button-group (min-width: 30rem) {
2705
- .bds100ButtonGroup-buttonGroup .bds100ButtonGroup-container {
2705
+ .bds102ButtonGroup-buttonGroup .bds102ButtonGroup-container {
2706
2706
  flex-direction: row;
2707
2707
  justify-content: space-between;
2708
2708
  }
2709
- .bds100ButtonGroup-buttonGroup.bds100ButtonGroup---variant_modal .bds100ButtonGroup-container > :first-child:last-child,
2710
- .bds100ButtonGroup-buttonGroup.bds100ButtonGroup---variant_flow .bds100ButtonGroup-container > :first-child:last-child {
2709
+ .bds102ButtonGroup-buttonGroup.bds102ButtonGroup---variant_modal .bds102ButtonGroup-container > :first-child:last-child,
2710
+ .bds102ButtonGroup-buttonGroup.bds102ButtonGroup---variant_flow .bds102ButtonGroup-container > :first-child:last-child {
2711
2711
  margin-inline-start: auto;
2712
2712
  }
2713
- .bds100ButtonGroup-buttonGroup.bds100ButtonGroup---variant_card .bds100ButtonGroup-container {
2713
+ .bds102ButtonGroup-buttonGroup.bds102ButtonGroup---variant_card .bds102ButtonGroup-container {
2714
2714
  justify-content: center;
2715
2715
  }
2716
- .bds100ButtonGroup-buttonGroup.bds100ButtonGroup---variant_modal .bds100ButtonGroup-container {
2716
+ .bds102ButtonGroup-buttonGroup.bds102ButtonGroup---variant_modal .bds102ButtonGroup-container {
2717
2717
  justify-content: flex-end;
2718
2718
  }
2719
- .bds100ButtonGroup-buttonGroup.bds100ButtonGroup---variant_content .bds100ButtonGroup-container {
2719
+ .bds102ButtonGroup-buttonGroup.bds102ButtonGroup---variant_content .bds102ButtonGroup-container {
2720
2720
  justify-content: flex-start;
2721
2721
  align-items: center;
2722
2722
  }
2723
- .bds100ButtonGroup-buttonGroup.bds100ButtonGroup---variant_grid .bds100ButtonGroup-container {
2723
+ .bds102ButtonGroup-buttonGroup.bds102ButtonGroup---variant_grid .bds102ButtonGroup-container {
2724
2724
  justify-content: center;
2725
2725
  }
2726
2726
  }
@@ -2729,70 +2729,70 @@
2729
2729
 
2730
2730
  /* src/components/layout/Card/Card.module.css */
2731
2731
  @layer component {
2732
- .bds100Card-card {
2732
+ .bds102Card-card {
2733
2733
  background-color: var(--card_color, var(--bds-bg));
2734
2734
  color: var(--card_on-color, var(--bds-on-bg));
2735
2735
  border-radius: var(--bds-border_radius--m);
2736
2736
  transition: all 0.3s ease;
2737
2737
  position: relative;
2738
2738
  }
2739
- .bds100Card-card.bds100Card---default {
2739
+ .bds102Card-card.bds102Card---default {
2740
2740
  box-shadow: var(--bds-shadow_s);
2741
2741
  }
2742
- .bds100Card-card.bds100Card---elevated {
2742
+ .bds102Card-card.bds102Card---elevated {
2743
2743
  box-shadow: var(--bds-shadow_m);
2744
2744
  }
2745
- .bds100Card-card.bds100Card---outlined {
2745
+ .bds102Card-card.bds102Card---outlined {
2746
2746
  border: var(--card_border, none);
2747
2747
  --bdc_color: currentcolor;
2748
- outline: var(--bdc_width) solid var(--bdc_color);
2749
- outline-offset: var(--bdc_offset);
2748
+ outline: var(--bdc-outline_width) solid var(--bdc_color);
2749
+ outline-offset: var(--bdc-outline_offset);
2750
2750
  box-shadow: var(--bds-shadow_s);
2751
2751
  }
2752
- .bds100Card-card.bds100Card---clickable {
2752
+ .bds102Card-card.bds102Card---clickable {
2753
2753
  cursor: pointer;
2754
2754
  }
2755
- .bds100Card-card.bds100Card---padding-none {
2755
+ .bds102Card-card.bds102Card---padding-none {
2756
2756
  padding: 0;
2757
2757
  }
2758
- .bds100Card-card.bds100Card---padding-small {
2758
+ .bds102Card-card.bds102Card---padding-small {
2759
2759
  padding: var(--bds-space_s);
2760
2760
  }
2761
- .bds100Card-card.bds100Card---padding-medium {
2761
+ .bds102Card-card.bds102Card---padding-medium {
2762
2762
  padding: var(--bds-space_m);
2763
2763
  }
2764
- .bds100Card-card.bds100Card---padding-large {
2764
+ .bds102Card-card.bds102Card---padding-large {
2765
2765
  padding: var(--bds-space_l);
2766
2766
  }
2767
- .bds100Card-card.bds100Card---text-start {
2767
+ .bds102Card-card.bds102Card---text-start {
2768
2768
  text-align: start;
2769
2769
  }
2770
- .bds100Card-card.bds100Card---text-center {
2770
+ .bds102Card-card.bds102Card---text-center {
2771
2771
  text-align: center;
2772
2772
  }
2773
- .bds100Card-card.bds100Card---text-end {
2773
+ .bds102Card-card.bds102Card---text-end {
2774
2774
  text-align: end;
2775
2775
  }
2776
- .bds100Card-card.bds100Card---clickable:focus-visible {
2776
+ .bds102Card-card.bds102Card---clickable:focus-visible {
2777
2777
  outline: 2px solid var(--color_focus, currentcolor);
2778
2778
  outline-offset: 2px;
2779
2779
  }
2780
- .bds100Card-card.bds100Card---clickable:active {
2780
+ .bds102Card-card.bds102Card---clickable:active {
2781
2781
  transform: translateY(0);
2782
2782
  box-shadow: var(--bds-shadow_s);
2783
2783
  }
2784
2784
  @media (hover: hover) and (pointer: fine) {
2785
- .bds100Card-card.bds100Card---clickable:hover {
2785
+ .bds102Card-card.bds102Card---clickable:hover {
2786
2786
  transform: translateY(-2px);
2787
2787
  box-shadow: var(--bds-shadow_xl);
2788
2788
  }
2789
- .bds100Card-card.bds100Card---default:hover {
2789
+ .bds102Card-card.bds102Card---default:hover {
2790
2790
  box-shadow: var(--bds-shadow_m);
2791
2791
  }
2792
- .bds100Card-card.bds100Card---elevated:hover {
2792
+ .bds102Card-card.bds102Card---elevated:hover {
2793
2793
  box-shadow: var(--bds-shadow_2xl);
2794
2794
  }
2795
- .bds100Card-card.bds100Card---outlined:hover {
2795
+ .bds102Card-card.bds102Card---outlined:hover {
2796
2796
  box-shadow: var(--bds-shadow_s);
2797
2797
  }
2798
2798
  }
@@ -2800,60 +2800,60 @@
2800
2800
 
2801
2801
  /* src/components/layout/SectionHeader/SectionHeader.module.css */
2802
2802
  @layer component {
2803
- .bds100SectionHeader-sectionHeader {
2803
+ .bds102SectionHeader-sectionHeader {
2804
2804
  display: flex;
2805
2805
  flex-direction: column;
2806
2806
  gap: var(--bds-space_m);
2807
2807
  grid-column: var(--bds-grid_span-100);
2808
2808
  }
2809
- .bds100SectionHeader-title {
2809
+ .bds102SectionHeader-title {
2810
2810
  color: var(--sectionHeader-title-color, var(--bds-on-bg));
2811
2811
  margin: 0;
2812
2812
  font-family: var(--bds-font_family--body);
2813
2813
  }
2814
- .bds100SectionHeader-subtitle {
2814
+ .bds102SectionHeader-subtitle {
2815
2815
  color: var(--sectionHeader_subtitle-color, var(--bds-grey--strong));
2816
2816
  margin: 0;
2817
2817
  font-family: var(--bds-font_family--body);
2818
2818
  font-weight: var(--bds-font_weight--medium);
2819
2819
  }
2820
- .bds100SectionHeader-sectionHeader.bds100SectionHeader---start {
2820
+ .bds102SectionHeader-sectionHeader.bds102SectionHeader---start {
2821
2821
  align-items: flex-start;
2822
2822
  text-align: start;
2823
2823
  }
2824
- .bds100SectionHeader-sectionHeader.bds100SectionHeader---center {
2824
+ .bds102SectionHeader-sectionHeader.bds102SectionHeader---center {
2825
2825
  align-items: center;
2826
2826
  text-align: center;
2827
2827
  }
2828
- .bds100SectionHeader-sectionHeader.bds100SectionHeader---end {
2828
+ .bds102SectionHeader-sectionHeader.bds102SectionHeader---end {
2829
2829
  align-items: flex-end;
2830
2830
  text-align: end;
2831
2831
  }
2832
- .bds100SectionHeader-sectionHeader.bds100SectionHeader---small .bds100SectionHeader-title {
2832
+ .bds102SectionHeader-sectionHeader.bds102SectionHeader---small .bds102SectionHeader-title {
2833
2833
  font-size: var(--bds-font_size--heading-1);
2834
2834
  line-height: var(--bds-font_line-height--heading);
2835
2835
  font-weight: var(--bds-font_weight--bold);
2836
2836
  }
2837
- .bds100SectionHeader-sectionHeader.bds100SectionHeader---small .bds100SectionHeader-subtitle {
2837
+ .bds102SectionHeader-sectionHeader.bds102SectionHeader---small .bds102SectionHeader-subtitle {
2838
2838
  font-size: var(--bds-font_size--body);
2839
2839
  line-height: 1.4;
2840
2840
  }
2841
- .bds100SectionHeader-sectionHeader.bds100SectionHeader---medium .bds100SectionHeader-title {
2841
+ .bds102SectionHeader-sectionHeader.bds102SectionHeader---medium .bds102SectionHeader-title {
2842
2842
  font-size: var(--bds-font_size--display);
2843
2843
  line-height: var(--bds-font_line-height--display);
2844
2844
  font-weight: var(--bds-font_weight--bold);
2845
2845
  }
2846
- .bds100SectionHeader-sectionHeader.bds100SectionHeader---medium .bds100SectionHeader-subtitle {
2846
+ .bds102SectionHeader-sectionHeader.bds102SectionHeader---medium .bds102SectionHeader-subtitle {
2847
2847
  font-size: var(--bds-font_size--heading-3);
2848
2848
  line-height: 1.3;
2849
2849
  }
2850
- .bds100SectionHeader-sectionHeader.bds100SectionHeader---large .bds100SectionHeader-title {
2850
+ .bds102SectionHeader-sectionHeader.bds102SectionHeader---large .bds102SectionHeader-title {
2851
2851
  font-size: var(--bds-font_size--display);
2852
2852
  line-height: var(--bds-font_line-height--display);
2853
2853
  font-weight: var(--bds-font_weight--bold);
2854
2854
  letter-spacing: var(--bds-font_tracking--tight);
2855
2855
  }
2856
- .bds100SectionHeader-sectionHeader.bds100SectionHeader---large .bds100SectionHeader-subtitle {
2856
+ .bds102SectionHeader-sectionHeader.bds102SectionHeader---large .bds102SectionHeader-subtitle {
2857
2857
  font-size: var(--bds-font_size--heading-2);
2858
2858
  line-height: 1.3;
2859
2859
  font-weight: var(--bds-font_weight--medium);
@@ -2862,7 +2862,7 @@
2862
2862
 
2863
2863
  /* src/components/layout/IconWrapper/IconWrapper.module.css */
2864
2864
  @layer component {
2865
- .bds100IconWrapper-wrapper {
2865
+ .bds102IconWrapper-wrapper {
2866
2866
  width: 2em;
2867
2867
  height: 2em;
2868
2868
  font-size: 3em;
@@ -2877,7 +2877,7 @@
2877
2877
  position: relative;
2878
2878
  transition: var(--bds-animation_transition);
2879
2879
  }
2880
- .bds100IconWrapper-wrapper svg {
2880
+ .bds102IconWrapper-wrapper svg {
2881
2881
  fill: currentcolor;
2882
2882
  }
2883
2883
  }