@boostdev/design-system-components 2.11.0 → 2.12.1

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 (44) hide show
  1. package/AGENTS.md +22 -1
  2. package/README.md +7 -0
  3. package/dist/client.cjs +52 -52
  4. package/dist/client.css +602 -602
  5. package/dist/client.js +52 -52
  6. package/dist/index.cjs +52 -52
  7. package/dist/index.css +602 -602
  8. package/dist/index.js +52 -52
  9. package/dist/web-components/{chunk-JUPCZVVW.js → chunk-FUQEFHRC.js} +1 -1
  10. package/dist/web-components/{chunk-BTCMJQKB.js → chunk-HRD3NOA3.js} +1 -1
  11. package/dist/web-components/{chunk-NIN3JO6Q.js → chunk-IDSM74LM.js} +1 -1
  12. package/dist/web-components/{chunk-47AT5KZD.js → chunk-J3HVUIUH.js} +1 -1
  13. package/dist/web-components/{chunk-QEF2IRID.js → chunk-PLWCDDP6.js} +1 -1
  14. package/dist/web-components/{chunk-DV5T43ZC.js → chunk-QKWXCBTH.js} +1 -1
  15. package/dist/web-components/{chunk-UO7ROSHD.js → chunk-X7PS7GSN.js} +1 -1
  16. package/dist/web-components/{chunk-U3YZE6R6.js → chunk-Z7XTADXX.js} +1 -1
  17. package/dist/web-components/index.js +8 -8
  18. package/dist/web-components/interaction/bds-dialog.js +1 -1
  19. package/dist/web-components/interaction/bds-drawer.js +1 -1
  20. package/dist/web-components/interaction/bds-dropdown-menu.js +1 -1
  21. package/dist/web-components/interaction/bds-popover.js +1 -1
  22. package/dist/web-components/interaction/bds-toast-provider.js +1 -1
  23. package/dist/web-components/interaction/form/bds-combobox.js +1 -1
  24. package/dist/web-components/ui/bds-calendar.js +1 -1
  25. package/dist/web-components/ui/bds-card.js +1 -1
  26. package/package.json +4 -4
  27. package/src/components/interaction/Command/Command.module.css +1 -1
  28. package/src/components/interaction/Dialog/Dialog.module.css +1 -1
  29. package/src/components/interaction/Drawer/Drawer.module.css +1 -1
  30. package/src/components/interaction/DropdownMenu/DropdownMenu.module.css +1 -1
  31. package/src/components/interaction/Popover/Popover.module.css +1 -1
  32. package/src/components/interaction/Toast/Toast.module.css +1 -1
  33. package/src/components/interaction/form/Combobox/Combobox.module.css +1 -1
  34. package/src/components/layout/Card/Card.module.css +1 -1
  35. package/src/components/ui/Calendar/Calendar.module.css +1 -1
  36. package/src/web-components/interaction/bds-dialog.ts +1 -1
  37. package/src/web-components/interaction/bds-drawer.ts +1 -1
  38. package/src/web-components/interaction/bds-dropdown-menu.ts +1 -1
  39. package/src/web-components/interaction/bds-popover.ts +1 -1
  40. package/src/web-components/interaction/bds-toast-provider.spec.ts +1 -1
  41. package/src/web-components/interaction/bds-toast-provider.ts +1 -1
  42. package/src/web-components/interaction/form/bds-combobox.ts +1 -1
  43. package/src/web-components/ui/bds-card.ts +1 -1
  44. package/src/web-components/ui/calendar-styles.ts +1 -1
package/dist/index.css CHANGED
@@ -27,8 +27,8 @@
27
27
  }
28
28
 
29
29
  /* src/components/ui/Accordion/Accordion.module.css */
30
- @layer boostdev.bds2110Accordion-component {
31
- .bds2110Accordion-accordion {
30
+ @layer boostdev.bds2121Accordion-component {
31
+ .bds2121Accordion-accordion {
32
32
  display: flex;
33
33
  flex-direction: column;
34
34
  border: var(--accordion_border, none);
@@ -38,16 +38,16 @@
38
38
  box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--accordion_shadow, var(--bdc-outline_shadow));
39
39
  overflow: hidden;
40
40
  }
41
- .bds2110Accordion-item {
41
+ .bds2121Accordion-item {
42
42
  border-block-end: 1px solid var(--bds-color_bg--subtle);
43
43
  }
44
- .bds2110Accordion-item:last-child {
44
+ .bds2121Accordion-item:last-child {
45
45
  border-block-end: none;
46
46
  }
47
- .bds2110Accordion-heading {
47
+ .bds2121Accordion-heading {
48
48
  margin: 0;
49
49
  }
50
- .bds2110Accordion-trigger {
50
+ .bds2121Accordion-trigger {
51
51
  all: unset;
52
52
  display: flex;
53
53
  align-items: center;
@@ -62,52 +62,52 @@
62
62
  transition: var(--bds-animation_transition);
63
63
  box-sizing: border-box;
64
64
  }
65
- .bds2110Accordion-trigger:disabled {
65
+ .bds2121Accordion-trigger:disabled {
66
66
  opacity: 0.4;
67
67
  cursor: not-allowed;
68
68
  }
69
- .bds2110Accordion-trigger:focus-visible {
69
+ .bds2121Accordion-trigger:focus-visible {
70
70
  outline: var(--bds-outline_default);
71
71
  outline-offset: calc(var(--bds-outline_offset) * -1);
72
72
  border-radius: var(--bds-border_radius--xs);
73
73
  }
74
74
  @media (hover: hover) and (pointer: fine) {
75
- .bds2110Accordion-trigger:not(:disabled):hover {
75
+ .bds2121Accordion-trigger:not(:disabled):hover {
76
76
  background-color: var(--accordion_trigger-bg--hover, var(--bds-color_bg--subtle));
77
77
  }
78
78
  }
79
- .bds2110Accordion-triggerLabel {
79
+ .bds2121Accordion-triggerLabel {
80
80
  flex: 1;
81
81
  text-align: start;
82
82
  }
83
- .bds2110Accordion-chevron {
83
+ .bds2121Accordion-chevron {
84
84
  inline-size: 1.25rem;
85
85
  block-size: 1.25rem;
86
86
  flex-shrink: 0;
87
87
  transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
88
88
  }
89
- .bds2110Accordion-item.bds2110Accordion---open .bds2110Accordion-chevron {
89
+ .bds2121Accordion-item.bds2121Accordion---open .bds2121Accordion-chevron {
90
90
  transform: rotate(180deg);
91
91
  }
92
- .bds2110Accordion-panel {
92
+ .bds2121Accordion-panel {
93
93
  overflow: hidden;
94
94
  }
95
- .bds2110Accordion-panelContent {
95
+ .bds2121Accordion-panelContent {
96
96
  padding: 0 var(--bds-space_m) var(--bds-space_m);
97
97
  color: var(--bds-color_on-bg);
98
98
  font-size: var(--bds-font_size--body);
99
99
  line-height: var(--bds-font_line-height--body);
100
100
  }
101
101
  @media (prefers-reduced-motion: reduce) {
102
- .bds2110Accordion-chevron {
102
+ .bds2121Accordion-chevron {
103
103
  transition: none;
104
104
  }
105
105
  }
106
106
  }
107
107
 
108
108
  /* src/components/ui/Alert/Alert.module.css */
109
- @layer boostdev.bds2110Alert-component {
110
- .bds2110Alert-alert {
109
+ @layer boostdev.bds2121Alert-component {
110
+ .bds2121Alert-alert {
111
111
  display: flex;
112
112
  align-items: flex-start;
113
113
  gap: var(--bds-space_s);
@@ -119,43 +119,43 @@
119
119
  font-size: var(--bds-font_size--body);
120
120
  line-height: var(--bds-font_line-height--body);
121
121
  }
122
- .bds2110Alert---variant_info {
122
+ .bds2121Alert---variant_info {
123
123
  --alert_bg--variant: var(--alert_bg--info, var(--bds-color_blue--subtle));
124
124
  --alert_text--variant: var(--alert_text--info, var(--bds-color_on-blue--subtle));
125
125
  --alert_border--variant: var(--alert_border--info, var(--bds-color_blue));
126
126
  }
127
- .bds2110Alert---variant_success {
127
+ .bds2121Alert---variant_success {
128
128
  --alert_bg--variant: var(--alert_bg--success, var(--bds-color_success--subtle));
129
129
  --alert_text--variant: var(--alert_text--success, var(--bds-color_on-success--subtle));
130
130
  --alert_border--variant: var(--alert_border--success, var(--bds-color_success));
131
131
  }
132
- .bds2110Alert---variant_warning {
132
+ .bds2121Alert---variant_warning {
133
133
  --alert_bg--variant: var(--alert_bg--warning, var(--bds-color_orange--subtle));
134
134
  --alert_text--variant: var(--alert_text--warning, var(--bds-color_on-orange--subtle));
135
135
  --alert_border--variant: var(--alert_border--warning, var(--bds-color_warning));
136
136
  }
137
- .bds2110Alert---variant_error {
137
+ .bds2121Alert---variant_error {
138
138
  --alert_bg--variant: var(--alert_bg--error, rgb(from var(--bds-color_error) r g b / 12%));
139
139
  --alert_text--variant: var(--alert_text--error, var(--bds-color_on-bg));
140
140
  --alert_border--variant: var(--alert_border--error, var(--bds-color_error));
141
141
  }
142
- .bds2110Alert-icon {
142
+ .bds2121Alert-icon {
143
143
  display: flex;
144
144
  align-items: center;
145
145
  flex-shrink: 0;
146
146
  margin-block-start: 0.1em;
147
147
  }
148
- .bds2110Alert-content {
148
+ .bds2121Alert-content {
149
149
  flex: 1;
150
150
  display: flex;
151
151
  flex-direction: column;
152
152
  gap: var(--bds-space_xxs);
153
153
  }
154
- .bds2110Alert-title {
154
+ .bds2121Alert-title {
155
155
  font-weight: var(--bds-font_weight--semibold);
156
156
  font-size: var(--bds-font_size--body);
157
157
  }
158
- .bds2110Alert-dismiss {
158
+ .bds2121Alert-dismiss {
159
159
  all: unset;
160
160
  display: flex;
161
161
  align-items: center;
@@ -171,24 +171,24 @@
171
171
  min-block-size: var(--alert_dismiss-size, 2.75rem);
172
172
  box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--alert_dismiss-shadow, var(--bdc-outline_shadow));
173
173
  }
174
- .bds2110Alert-dismiss svg {
174
+ .bds2121Alert-dismiss svg {
175
175
  inline-size: 1rem;
176
176
  block-size: 1rem;
177
177
  }
178
- .bds2110Alert-dismiss:focus-visible {
178
+ .bds2121Alert-dismiss:focus-visible {
179
179
  outline: var(--bds-outline_default);
180
180
  outline-offset: var(--bds-outline_offset);
181
181
  }
182
182
  @media (hover: hover) and (pointer: fine) {
183
- .bds2110Alert-dismiss:hover {
183
+ .bds2121Alert-dismiss:hover {
184
184
  opacity: var(--alert_dismiss-opacity--hover, 0.7);
185
185
  }
186
186
  }
187
187
  }
188
188
 
189
189
  /* src/components/ui/Avatar/Avatar.module.css */
190
- @layer boostdev.bds2110Avatar-component {
191
- .bds2110Avatar-avatar {
190
+ @layer boostdev.bds2121Avatar-component {
191
+ .bds2121Avatar-avatar {
192
192
  display: inline-flex;
193
193
  align-items: center;
194
194
  justify-content: center;
@@ -198,42 +198,42 @@
198
198
  border-radius: var(--avatar_radius, var(--bds-border_radius--circle));
199
199
  overflow: hidden;
200
200
  }
201
- .bds2110Avatar-avatar.bds2110Avatar---fallback {
201
+ .bds2121Avatar-avatar.bds2121Avatar---fallback {
202
202
  background-color: var(--avatar_bg, var(--bds-color_blue));
203
203
  color: var(--avatar_text, var(--bds-color_on-blue));
204
204
  font-weight: var(--bds-font_weight--semibold);
205
205
  }
206
- .bds2110Avatar-avatar.bds2110Avatar---size_small {
206
+ .bds2121Avatar-avatar.bds2121Avatar---size_small {
207
207
  --avatar_size--variant: 2em;
208
208
  }
209
- .bds2110Avatar-avatar.bds2110Avatar---size_medium {
209
+ .bds2121Avatar-avatar.bds2121Avatar---size_medium {
210
210
  --avatar_size--variant: 3em;
211
211
  }
212
- .bds2110Avatar-avatar.bds2110Avatar---size_large {
212
+ .bds2121Avatar-avatar.bds2121Avatar---size_large {
213
213
  --avatar_size--variant: 4.5em;
214
214
  }
215
- .bds2110Avatar-image {
215
+ .bds2121Avatar-image {
216
216
  inline-size: 100%;
217
217
  block-size: 100%;
218
218
  object-fit: cover;
219
219
  display: block;
220
220
  }
221
- .bds2110Avatar-initials {
221
+ .bds2121Avatar-initials {
222
222
  line-height: 1;
223
223
  user-select: none;
224
224
  font-size: var(--bds-font_size--body);
225
225
  }
226
- .bds2110Avatar-avatar.bds2110Avatar---size_small .bds2110Avatar-initials {
226
+ .bds2121Avatar-avatar.bds2121Avatar---size_small .bds2121Avatar-initials {
227
227
  font-size: var(--bds-font_size--body--s);
228
228
  }
229
- .bds2110Avatar-avatar.bds2110Avatar---size_large .bds2110Avatar-initials {
229
+ .bds2121Avatar-avatar.bds2121Avatar---size_large .bds2121Avatar-initials {
230
230
  font-size: var(--bds-font_size--heading-3);
231
231
  }
232
232
  }
233
233
 
234
234
  /* src/components/ui/Badge/Badge.module.css */
235
- @layer boostdev.bds2110Badge-component {
236
- .bds2110Badge-badge {
235
+ @layer boostdev.bds2121Badge-component {
236
+ .bds2121Badge-badge {
237
237
  display: inline-flex;
238
238
  align-items: center;
239
239
  justify-content: center;
@@ -246,34 +246,34 @@
246
246
  background-color: var(--badge_bg, var(--badge_bg--variant, var(--bds-color_blue)));
247
247
  color: var(--badge_text, var(--badge_text--variant, var(--bds-color_on-blue)));
248
248
  }
249
- .bds2110Badge---variant_primary {
249
+ .bds2121Badge---variant_primary {
250
250
  --badge_bg--variant: var(--badge_bg--primary, var(--bds-color_interactive));
251
251
  --badge_text--variant: var(--badge_text--primary, var(--bds-color_on-interactive));
252
252
  }
253
- .bds2110Badge---variant_secondary {
253
+ .bds2121Badge---variant_secondary {
254
254
  --badge_bg--variant: var(--badge_bg--secondary, var(--bds-color_bg));
255
255
  --badge_text--variant: var(--badge_text--secondary, var(--bds-color_on-bg));
256
256
  }
257
- .bds2110Badge---variant_success {
257
+ .bds2121Badge---variant_success {
258
258
  --badge_bg--variant: var(--badge_bg--success, var(--bds-color_success));
259
259
  --badge_text--variant: var(--badge_text--success, var(--bds-color_on-success));
260
260
  }
261
- .bds2110Badge---variant_error {
261
+ .bds2121Badge---variant_error {
262
262
  --badge_bg--variant: var(--badge_bg--error, var(--bds-color_error));
263
263
  --badge_text--variant: var(--badge_text--error, var(--bds-color_on-error));
264
264
  }
265
- .bds2110Badge---variant_warning {
265
+ .bds2121Badge---variant_warning {
266
266
  --badge_bg--variant: var(--badge_bg--warning, var(--bds-color_warning));
267
267
  --badge_text--variant: var(--badge_text--warning, var(--bds-color_on-warning));
268
268
  }
269
269
  }
270
270
 
271
271
  /* src/components/ui/Breadcrumb/Breadcrumb.module.css */
272
- @layer boostdev.bds2110Breadcrumb-component {
273
- .bds2110Breadcrumb-breadcrumb {
272
+ @layer boostdev.bds2121Breadcrumb-component {
273
+ .bds2121Breadcrumb-breadcrumb {
274
274
  font-size: var(--bds-font_size--body--s);
275
275
  }
276
- .bds2110Breadcrumb-list {
276
+ .bds2121Breadcrumb-list {
277
277
  display: flex;
278
278
  flex-wrap: wrap;
279
279
  align-items: center;
@@ -282,43 +282,43 @@
282
282
  margin: 0;
283
283
  padding: 0;
284
284
  }
285
- .bds2110Breadcrumb-item {
285
+ .bds2121Breadcrumb-item {
286
286
  display: flex;
287
287
  align-items: center;
288
288
  gap: var(--bds-space_xxs);
289
289
  }
290
- .bds2110Breadcrumb-link {
290
+ .bds2121Breadcrumb-link {
291
291
  color: var(--bds-color_interactive_on-bg);
292
292
  text-decoration: none;
293
293
  transition: var(--bds-animation_transition);
294
294
  }
295
- .bds2110Breadcrumb-link:focus-visible {
295
+ .bds2121Breadcrumb-link:focus-visible {
296
296
  outline: var(--bds-outline_default);
297
297
  outline-offset: var(--bds-outline_offset);
298
298
  border-radius: var(--bds-border_radius--xs);
299
299
  }
300
300
  @media (hover: hover) and (pointer: fine) {
301
- .bds2110Breadcrumb-link:hover {
301
+ .bds2121Breadcrumb-link:hover {
302
302
  text-decoration: underline;
303
303
  text-underline-offset: 0.2em;
304
304
  }
305
305
  }
306
- .bds2110Breadcrumb-separator {
306
+ .bds2121Breadcrumb-separator {
307
307
  color: var(--bds-color_on-bg--subtle);
308
308
  user-select: none;
309
309
  }
310
- .bds2110Breadcrumb-text {
310
+ .bds2121Breadcrumb-text {
311
311
  color: var(--bds-color_on-bg--subtle);
312
312
  }
313
- .bds2110Breadcrumb-current {
313
+ .bds2121Breadcrumb-current {
314
314
  color: var(--bds-color_on-bg--subtle);
315
315
  font-weight: var(--bds-font_weight--semibold);
316
316
  }
317
317
  }
318
318
 
319
319
  /* src/components/ui/Collapsible/Collapsible.module.css */
320
- @layer boostdev.bds2110Collapsible-component {
321
- .bds2110Collapsible-collapsible {
320
+ @layer boostdev.bds2121Collapsible-component {
321
+ .bds2121Collapsible-collapsible {
322
322
  border: var(--collapsible_border, none);
323
323
  --bdc_color: var(--collapsible_border-color, var(--bds-color_bg--subtle));
324
324
  --bdc-outline_width: var(--collapsible_border-width, 1px);
@@ -327,7 +327,7 @@
327
327
  box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
328
328
  overflow: hidden;
329
329
  }
330
- .bds2110Collapsible-summary {
330
+ .bds2121Collapsible-summary {
331
331
  list-style: none;
332
332
  display: flex;
333
333
  align-items: center;
@@ -342,25 +342,25 @@
342
342
  user-select: none;
343
343
  transition: var(--bds-animation_transition);
344
344
  }
345
- .bds2110Collapsible-summary::-webkit-details-marker {
345
+ .bds2121Collapsible-summary::-webkit-details-marker {
346
346
  display: none;
347
347
  }
348
- .bds2110Collapsible-summary:focus-visible {
348
+ .bds2121Collapsible-summary:focus-visible {
349
349
  outline: var(--bds-outline_default);
350
350
  outline-offset: calc(var(--bds-outline_offset) * -1);
351
351
  }
352
352
  @media (hover: hover) and (pointer: fine) {
353
- .bds2110Collapsible-summary:hover {
353
+ .bds2121Collapsible-summary:hover {
354
354
  background-color: var(--collapsible_bg--hover, var(--bds-color_bg--subtle));
355
355
  }
356
356
  }
357
- .bds2110Collapsible-collapsible[open] > .bds2110Collapsible-summary {
357
+ .bds2121Collapsible-collapsible[open] > .bds2121Collapsible-summary {
358
358
  border-block-end: var(--collapsible_border-width, 1px) solid var(--collapsible_border-color, var(--bds-color_bg--subtle));
359
359
  }
360
- .bds2110Collapsible-summaryContent {
360
+ .bds2121Collapsible-summaryContent {
361
361
  flex: 1;
362
362
  }
363
- .bds2110Collapsible-icon {
363
+ .bds2121Collapsible-icon {
364
364
  inline-size: 0.5rem;
365
365
  block-size: 0.5rem;
366
366
  border-inline-end: 2px solid currentcolor;
@@ -369,29 +369,29 @@
369
369
  flex-shrink: 0;
370
370
  transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
371
371
  }
372
- .bds2110Collapsible-collapsible[open] > .bds2110Collapsible-summary .bds2110Collapsible-icon {
372
+ .bds2121Collapsible-collapsible[open] > .bds2121Collapsible-summary .bds2121Collapsible-icon {
373
373
  transform: rotate(-135deg);
374
374
  }
375
- .bds2110Collapsible-content {
375
+ .bds2121Collapsible-content {
376
376
  padding: var(--bds-space_m);
377
377
  color: var(--collapsible_on-color, var(--bds-color_on-bg));
378
378
  font-size: var(--bds-font_size--body);
379
379
  line-height: var(--bds-font_line-height--body);
380
380
  }
381
381
  @media (prefers-reduced-motion: reduce) {
382
- .bds2110Collapsible-icon {
382
+ .bds2121Collapsible-icon {
383
383
  transition: none;
384
384
  }
385
385
  }
386
386
  }
387
387
 
388
388
  /* src/components/ui/Calendar/Calendar.module.css */
389
- @layer boostdev.bds2110Calendar-component {
390
- .bds2110Calendar-calendar {
389
+ @layer boostdev.bds2121Calendar-component {
390
+ .bds2121Calendar-calendar {
391
391
  display: inline-block;
392
392
  inline-size: fit-content;
393
393
  max-inline-size: 100%;
394
- background-color: var(--bds-color_bg);
394
+ background-color: var(--bds-color_bg--strong, var(--bds-color_bg));
395
395
  border: var(--calendar_border, none);
396
396
  --bdc_color: var(--bds-color_bg--subtle);
397
397
  --bdc-outline_radius: var(--bds-border_radius--m);
@@ -399,36 +399,36 @@
399
399
  padding: var(--bds-space_m);
400
400
  box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--calendar_shadow, var(--bds-shadow_s));
401
401
  }
402
- .bds2110Calendar-months {
402
+ .bds2121Calendar-months {
403
403
  display: flex;
404
404
  flex-wrap: wrap;
405
405
  gap: var(--bds-space_l);
406
406
  }
407
- .bds2110Calendar-month {
407
+ .bds2121Calendar-month {
408
408
  display: flex;
409
409
  flex-direction: column;
410
410
  gap: var(--bds-space_s);
411
411
  inline-size: var(--calendar_size, 17rem);
412
412
  max-inline-size: 100%;
413
413
  }
414
- .bds2110Calendar-monthHeader {
414
+ .bds2121Calendar-monthHeader {
415
415
  display: flex;
416
416
  align-items: center;
417
417
  justify-content: space-between;
418
418
  gap: var(--bds-space_xs);
419
419
  }
420
- .bds2110Calendar-navSlot {
420
+ .bds2121Calendar-navSlot {
421
421
  display: inline-flex;
422
422
  inline-size: 2.75rem;
423
423
  block-size: 2.75rem;
424
424
  flex: none;
425
425
  }
426
- .bds2110Calendar-monthYear {
426
+ .bds2121Calendar-monthYear {
427
427
  font-size: var(--bds-font_size--body);
428
428
  font-weight: var(--bds-font_weight--semibold);
429
429
  color: var(--bds-color_on-bg);
430
430
  }
431
- .bds2110Calendar-navBtn {
431
+ .bds2121Calendar-navBtn {
432
432
  all: unset;
433
433
  display: flex;
434
434
  align-items: center;
@@ -440,28 +440,28 @@
440
440
  color: var(--bds-color_on-bg);
441
441
  transition: var(--bds-animation_transition);
442
442
  }
443
- .bds2110Calendar-navBtn svg {
443
+ .bds2121Calendar-navBtn svg {
444
444
  inline-size: 1rem;
445
445
  block-size: 1rem;
446
446
  }
447
- .bds2110Calendar-navBtn:focus-visible {
447
+ .bds2121Calendar-navBtn:focus-visible {
448
448
  outline: var(--bds-outline_default);
449
449
  outline-offset: var(--bds-outline_offset);
450
450
  }
451
451
  @media (hover: hover) and (pointer: fine) {
452
- .bds2110Calendar-navBtn:hover {
452
+ .bds2121Calendar-navBtn:hover {
453
453
  background-color: var(--calendar_navBtn-bg--hover, var(--bds-color_bg--subtle));
454
454
  }
455
455
  }
456
- .bds2110Calendar-grid {
456
+ .bds2121Calendar-grid {
457
457
  display: grid;
458
458
  grid-template-columns: repeat(7, 1fr);
459
459
  gap: var(--bds-space_xxxs);
460
460
  }
461
- .bds2110Calendar-row {
461
+ .bds2121Calendar-row {
462
462
  display: contents;
463
463
  }
464
- .bds2110Calendar-weekday {
464
+ .bds2121Calendar-weekday {
465
465
  display: flex;
466
466
  align-items: center;
467
467
  justify-content: center;
@@ -471,11 +471,11 @@
471
471
  color: var(--bds-color_on-bg--subtle);
472
472
  user-select: none;
473
473
  }
474
- .bds2110Calendar-cell {
474
+ .bds2121Calendar-cell {
475
475
  display: flex;
476
476
  aspect-ratio: 1;
477
477
  }
478
- .bds2110Calendar-day {
478
+ .bds2121Calendar-day {
479
479
  all: unset;
480
480
  box-sizing: border-box;
481
481
  display: flex;
@@ -489,60 +489,60 @@
489
489
  cursor: pointer;
490
490
  transition: var(--bds-animation_transition);
491
491
  }
492
- .bds2110Calendar-day:focus-visible {
492
+ .bds2121Calendar-day:focus-visible {
493
493
  outline: var(--bds-outline_default);
494
494
  outline-offset: var(--bds-outline_offset);
495
495
  }
496
496
  @media (hover: hover) and (pointer: fine) {
497
- .bds2110Calendar-day:not(.bds2110Calendar-disabled, .bds2110Calendar-selected, .bds2110Calendar-rangeStart, .bds2110Calendar-rangeEnd):hover {
497
+ .bds2121Calendar-day:not(.bds2121Calendar-disabled, .bds2121Calendar-selected, .bds2121Calendar-rangeStart, .bds2121Calendar-rangeEnd):hover {
498
498
  background-color: var(--calendar_day-bg--hover, var(--bds-color_bg--subtle));
499
499
  }
500
500
  }
501
- .bds2110Calendar-outside {
501
+ .bds2121Calendar-outside {
502
502
  color: var(--bds-color_on-bg--subtle);
503
503
  opacity: 0.4;
504
504
  }
505
- .bds2110Calendar-today {
505
+ .bds2121Calendar-today {
506
506
  font-weight: var(--bds-font_weight--semibold);
507
507
  --bdc_color: var(--calendar_today-color, var(--bds-color_interactive));
508
508
  border: var(--calendar_today-border, none);
509
509
  box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--calendar_today-shadow, var(--bdc-outline_shadow));
510
510
  }
511
- .bds2110Calendar-selected {
511
+ .bds2121Calendar-selected {
512
512
  background-color: var(--calendar_day-bg--selected, var(--bds-color_interactive));
513
513
  color: var(--calendar_day-color--selected, var(--bds-color_on-interactive));
514
514
  font-weight: var(--bds-font_weight--semibold);
515
515
  }
516
- .bds2110Calendar-inRange {
516
+ .bds2121Calendar-inRange {
517
517
  background-color: var(--calendar_day-bg--in-range, var(--bds-color_blue--subtle));
518
518
  border-radius: 0;
519
519
  }
520
- .bds2110Calendar-rangeStart,
521
- .bds2110Calendar-rangeEnd {
520
+ .bds2121Calendar-rangeStart,
521
+ .bds2121Calendar-rangeEnd {
522
522
  background-color: var(--calendar_day-bg--selected, var(--bds-color_interactive));
523
523
  color: var(--calendar_day-color--selected, var(--bds-color_on-interactive));
524
524
  font-weight: var(--bds-font_weight--semibold);
525
525
  }
526
- .bds2110Calendar-disabled {
526
+ .bds2121Calendar-disabled {
527
527
  opacity: 0.35;
528
528
  cursor: not-allowed;
529
529
  }
530
530
  @media (prefers-reduced-motion: reduce) {
531
- .bds2110Calendar-day {
531
+ .bds2121Calendar-day {
532
532
  transition: none;
533
533
  }
534
534
  }
535
535
  }
536
536
 
537
537
  /* src/components/ui/Carousel/Carousel.module.css */
538
- @layer boostdev.bds2110Carousel-component {
539
- .bds2110Carousel-carousel {
538
+ @layer boostdev.bds2121Carousel-component {
539
+ .bds2121Carousel-carousel {
540
540
  position: relative;
541
541
  display: flex;
542
542
  align-items: center;
543
543
  gap: var(--bds-space_xs);
544
544
  }
545
- .bds2110Carousel-track {
545
+ .bds2121Carousel-track {
546
546
  display: flex;
547
547
  gap: var(--bds-space_m);
548
548
  overflow-inline: auto;
@@ -551,14 +551,14 @@
551
551
  flex: 1;
552
552
  scroll-behavior: smooth;
553
553
  }
554
- .bds2110Carousel-track::-webkit-scrollbar {
554
+ .bds2121Carousel-track::-webkit-scrollbar {
555
555
  display: none;
556
556
  }
557
- .bds2110Carousel-slide {
557
+ .bds2121Carousel-slide {
558
558
  scroll-snap-align: start;
559
559
  flex-shrink: 0;
560
560
  }
561
- .bds2110Carousel-navBtn {
561
+ .bds2121Carousel-navBtn {
562
562
  all: unset;
563
563
  display: flex;
564
564
  align-items: center;
@@ -575,29 +575,29 @@
575
575
  flex-shrink: 0;
576
576
  transition: var(--bds-animation_transition);
577
577
  }
578
- .bds2110Carousel-navBtn svg {
578
+ .bds2121Carousel-navBtn svg {
579
579
  inline-size: 1.25rem;
580
580
  block-size: 1.25rem;
581
581
  }
582
- .bds2110Carousel-navBtn:focus-visible {
582
+ .bds2121Carousel-navBtn:focus-visible {
583
583
  outline: var(--bds-outline_default);
584
584
  outline-offset: var(--bds-outline_offset);
585
585
  }
586
586
  @media (hover: hover) and (pointer: fine) {
587
- .bds2110Carousel-navBtn:hover {
587
+ .bds2121Carousel-navBtn:hover {
588
588
  background-color: var(--carousel_navBtn-bg--hover, var(--bds-color_bg--subtle));
589
589
  }
590
590
  }
591
591
  @media (prefers-reduced-motion: reduce) {
592
- .bds2110Carousel-track {
592
+ .bds2121Carousel-track {
593
593
  scroll-behavior: auto;
594
594
  }
595
595
  }
596
596
  }
597
597
 
598
598
  /* src/components/ui/DescriptionList/DescriptionList.module.css */
599
- @layer boostdev.bds2110DescriptionList-component {
600
- .bds2110DescriptionList-list {
599
+ @layer boostdev.bds2121DescriptionList-component {
600
+ .bds2121DescriptionList-list {
601
601
  display: flex;
602
602
  flex-direction: column;
603
603
  gap: var(--bds-space_s);
@@ -606,61 +606,61 @@
606
606
  font-size: var(--bds-font_size--body);
607
607
  color: var(--bds-color_on-bg);
608
608
  }
609
- .bds2110DescriptionList-group {
609
+ .bds2121DescriptionList-group {
610
610
  display: flex;
611
611
  flex-direction: column;
612
612
  gap: var(--bds-space_xxs);
613
613
  }
614
- .bds2110DescriptionList-term {
614
+ .bds2121DescriptionList-term {
615
615
  font-weight: var(--bds-font_weight--semibold);
616
616
  color: var(--bds-color_on-bg);
617
617
  }
618
- .bds2110DescriptionList-details {
618
+ .bds2121DescriptionList-details {
619
619
  margin: 0;
620
620
  color: var(--bds-color_on-bg);
621
621
  }
622
- .bds2110DescriptionList---layout_inline .bds2110DescriptionList-group {
622
+ .bds2121DescriptionList---layout_inline .bds2121DescriptionList-group {
623
623
  display: grid;
624
624
  grid-template-columns: minmax(8rem, 1fr) 2fr;
625
625
  gap: var(--bds-space_xs);
626
626
  align-items: baseline;
627
627
  }
628
- .bds2110DescriptionList---layout_inline .bds2110DescriptionList-term {
628
+ .bds2121DescriptionList---layout_inline .bds2121DescriptionList-term {
629
629
  grid-column: 1;
630
630
  }
631
- .bds2110DescriptionList---layout_inline .bds2110DescriptionList-details {
631
+ .bds2121DescriptionList---layout_inline .bds2121DescriptionList-details {
632
632
  grid-column: 2;
633
633
  }
634
634
  }
635
635
 
636
636
  /* src/components/ui/Link/Link.module.css */
637
- @layer boostdev.bds2110Link-component {
638
- .bds2110Link-link {
637
+ @layer boostdev.bds2121Link-component {
638
+ .bds2121Link-link {
639
639
  color: var(--link_color, var(--link_color--variant, var(--bds-color_interactive_on-bg)));
640
640
  text-decoration: underline;
641
641
  text-underline-offset: 0.2em;
642
642
  transition: var(--bds-animation_transition);
643
643
  cursor: pointer;
644
644
  }
645
- .bds2110Link-link:focus-visible {
645
+ .bds2121Link-link:focus-visible {
646
646
  outline: var(--bds-outline_default);
647
647
  outline-offset: var(--bds-outline_offset);
648
648
  border-radius: var(--bds-border_radius--xs);
649
649
  }
650
650
  @media (hover: hover) and (pointer: fine) {
651
- .bds2110Link-link:hover {
651
+ .bds2121Link-link:hover {
652
652
  color: var(--link_color-hover, var(--link_color-hover--variant, var(--bds-color_blue--strong)));
653
653
  }
654
654
  }
655
- .bds2110Link---variant_default {
655
+ .bds2121Link---variant_default {
656
656
  --link_color--variant: var(--link_color--default, var(--bds-color_interactive_on-bg));
657
657
  --link_color-hover--variant: var(--link_color-hover--default, var(--bds-color_blue--strong));
658
658
  }
659
- .bds2110Link---variant_subtle {
659
+ .bds2121Link---variant_subtle {
660
660
  --link_color--variant: var(--link_color--subtle, var(--bds-color_on-bg));
661
661
  --link_color-hover--variant: var(--link_color-hover--subtle, var(--bds-color_interactive_on-bg));
662
662
  }
663
- .bds2110Link---variant_standalone {
663
+ .bds2121Link---variant_standalone {
664
664
  --link_color--variant: var(--link_color--standalone, var(--bds-color_interactive_on-bg));
665
665
  --link_color-hover--variant: var(--link_color-hover--standalone, var(--bds-color_blue--strong));
666
666
  display: inline-flex;
@@ -670,12 +670,12 @@
670
670
  text-decoration: none;
671
671
  }
672
672
  @media (hover: hover) and (pointer: fine) {
673
- .bds2110Link---variant_standalone:hover {
673
+ .bds2121Link---variant_standalone:hover {
674
674
  text-decoration: underline;
675
675
  text-underline-offset: 0.2em;
676
676
  }
677
677
  }
678
- .bds2110Link-externalLabel {
678
+ .bds2121Link-externalLabel {
679
679
  position: absolute;
680
680
  inline-size: 1px;
681
681
  block-size: 1px;
@@ -689,13 +689,13 @@
689
689
  }
690
690
 
691
691
  /* src/components/ui/Loading/Loading.module.css */
692
- @layer boostdev.bds2110Loading-component {
693
- .bds2110Loading-loading {
692
+ @layer boostdev.bds2121Loading-component {
693
+ .bds2121Loading-loading {
694
694
  display: flex;
695
695
  justify-content: center;
696
696
  align-items: center;
697
697
  }
698
- .bds2110Loading-spinner {
698
+ .bds2121Loading-spinner {
699
699
  inline-size: 2.5em;
700
700
  block-size: 2.5em;
701
701
  border: 4px solid var(--bds-color_bg);
@@ -703,18 +703,18 @@
703
703
  border-radius: var(--loading_radius, var(--bds-border_radius--circle));
704
704
  animation: spin 1s linear infinite;
705
705
  }
706
- .bds2110Loading---size_small .bds2110Loading-spinner {
706
+ .bds2121Loading---size_small .bds2121Loading-spinner {
707
707
  inline-size: 1.5em;
708
708
  block-size: 1.5em;
709
709
  border-width: 2px;
710
710
  }
711
- .bds2110Loading---size_large .bds2110Loading-spinner {
711
+ .bds2121Loading---size_large .bds2121Loading-spinner {
712
712
  inline-size: 4em;
713
713
  block-size: 4em;
714
714
  border-width: 6px;
715
715
  }
716
716
  @media (prefers-reduced-motion: reduce) {
717
- .bds2110Loading-spinner {
717
+ .bds2121Loading-spinner {
718
718
  animation: none;
719
719
  }
720
720
  }
@@ -729,8 +729,8 @@
729
729
  }
730
730
 
731
731
  /* src/components/ui/NotificationBanner/NotificationBanner.module.css */
732
- @layer boostdev.bds2110NotificationBanner-component {
733
- .bds2110NotificationBanner-banner {
732
+ @layer boostdev.bds2121NotificationBanner-component {
733
+ .bds2121NotificationBanner-banner {
734
734
  display: flex;
735
735
  align-items: center;
736
736
  gap: var(--bds-space_m);
@@ -742,33 +742,33 @@
742
742
  line-height: var(--bds-font_line-height--body);
743
743
  inline-size: 100%;
744
744
  }
745
- .bds2110NotificationBanner---variant_info {
745
+ .bds2121NotificationBanner---variant_info {
746
746
  --banner_bg--variant: var(--banner_bg--info, var(--bds-color_blue--subtle));
747
747
  --banner_text--variant: var(--banner_text--info, var(--bds-color_on-blue--subtle));
748
748
  --banner_border--variant: var(--banner_border--info, var(--bds-color_blue));
749
749
  }
750
- .bds2110NotificationBanner---variant_success {
750
+ .bds2121NotificationBanner---variant_success {
751
751
  --banner_bg--variant: var(--banner_bg--success, var(--bds-color_success--subtle));
752
752
  --banner_text--variant: var(--banner_text--success, var(--bds-color_on-success--subtle));
753
753
  --banner_border--variant: var(--banner_border--success, var(--bds-color_success));
754
754
  }
755
- .bds2110NotificationBanner---variant_warning {
755
+ .bds2121NotificationBanner---variant_warning {
756
756
  --banner_bg--variant: var(--banner_bg--warning, var(--bds-color_orange--subtle));
757
757
  --banner_text--variant: var(--banner_text--warning, var(--bds-color_on-orange--subtle));
758
758
  --banner_border--variant: var(--banner_border--warning, var(--bds-color_warning));
759
759
  }
760
- .bds2110NotificationBanner---variant_error {
760
+ .bds2121NotificationBanner---variant_error {
761
761
  --banner_bg--variant: var(--banner_bg--error, rgb(from var(--bds-color_error) r g b / 12%));
762
762
  --banner_text--variant: var(--banner_text--error, var(--bds-color_on-bg));
763
763
  --banner_border--variant: var(--banner_border--error, var(--bds-color_error));
764
764
  }
765
- .bds2110NotificationBanner-content {
765
+ .bds2121NotificationBanner-content {
766
766
  flex: 1;
767
767
  }
768
- .bds2110NotificationBanner-action {
768
+ .bds2121NotificationBanner-action {
769
769
  flex-shrink: 0;
770
770
  }
771
- .bds2110NotificationBanner-dismiss {
771
+ .bds2121NotificationBanner-dismiss {
772
772
  all: unset;
773
773
  display: flex;
774
774
  align-items: center;
@@ -784,28 +784,28 @@
784
784
  --bdc_color: currentcolor;
785
785
  box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
786
786
  }
787
- .bds2110NotificationBanner-dismiss svg {
787
+ .bds2121NotificationBanner-dismiss svg {
788
788
  inline-size: 1rem;
789
789
  block-size: 1rem;
790
790
  }
791
- .bds2110NotificationBanner-dismiss:focus-visible {
791
+ .bds2121NotificationBanner-dismiss:focus-visible {
792
792
  outline: var(--bds-outline_default);
793
793
  outline-offset: var(--bds-outline_offset);
794
794
  }
795
795
  @media (hover: hover) and (pointer: fine) {
796
- .bds2110NotificationBanner-dismiss:hover {
796
+ .bds2121NotificationBanner-dismiss:hover {
797
797
  opacity: var(--banner_dismiss-opacity--hover, 0.7);
798
798
  }
799
799
  }
800
800
  }
801
801
 
802
802
  /* src/components/ui/Pagination/Pagination.module.css */
803
- @layer boostdev.bds2110Pagination-component {
804
- .bds2110Pagination-pagination {
803
+ @layer boostdev.bds2121Pagination-component {
804
+ .bds2121Pagination-pagination {
805
805
  display: flex;
806
806
  justify-content: center;
807
807
  }
808
- .bds2110Pagination-list {
808
+ .bds2121Pagination-list {
809
809
  display: flex;
810
810
  align-items: center;
811
811
  gap: var(--bds-space_xxs);
@@ -813,10 +813,10 @@
813
813
  margin: 0;
814
814
  padding: 0;
815
815
  }
816
- .bds2110Pagination-list li {
816
+ .bds2121Pagination-list li {
817
817
  list-style: none;
818
818
  }
819
- .bds2110Pagination-button {
819
+ .bds2121Pagination-button {
820
820
  all: unset;
821
821
  display: inline-flex;
822
822
  align-items: center;
@@ -837,30 +837,30 @@
837
837
  transition: var(--bds-animation_transition);
838
838
  box-sizing: border-box;
839
839
  }
840
- .bds2110Pagination-button:disabled {
840
+ .bds2121Pagination-button:disabled {
841
841
  opacity: 0.4;
842
842
  cursor: not-allowed;
843
843
  }
844
- .bds2110Pagination-button:focus-visible {
844
+ .bds2121Pagination-button:focus-visible {
845
845
  outline: var(--bds-outline_default);
846
846
  outline-offset: var(--bds-outline_offset);
847
847
  }
848
848
  @media (hover: hover) and (pointer: fine) {
849
- .bds2110Pagination-button:not(:disabled, .bds2110Pagination---active):hover {
849
+ .bds2121Pagination-button:not(:disabled, .bds2121Pagination---active):hover {
850
850
  --btn_bg--state: var(--pagination_item-bg--hover, var(--btn_bg--hover, var(--bds-color_bg--subtle)));
851
851
  --btn_color--state: var(--pagination_item-color--hover, var(--btn_color--hover, var(--bds-color_interactive_on-bg)));
852
852
  }
853
853
  }
854
- .bds2110Pagination-button.bds2110Pagination---active {
854
+ .bds2121Pagination-button.bds2121Pagination---active {
855
855
  --btn_bg--state: var(--pagination_item-bg--active, var(--btn_bg--active, var(--bdc-color_active)));
856
856
  --btn_color--state: var(--pagination_item-color--active, var(--btn_color--active, var(--bdc-color_on-active)));
857
857
  --btn_border--state: var(--pagination_item-border--active, var(--btn_border--active, var(--bdc-color_active)));
858
858
  }
859
- .bds2110Pagination-button.bds2110Pagination---nav svg {
859
+ .bds2121Pagination-button.bds2121Pagination---nav svg {
860
860
  inline-size: 1rem;
861
861
  block-size: 1rem;
862
862
  }
863
- .bds2110Pagination-ellipsis {
863
+ .bds2121Pagination-ellipsis {
864
864
  display: inline-flex;
865
865
  align-items: center;
866
866
  justify-content: center;
@@ -873,71 +873,71 @@
873
873
  }
874
874
 
875
875
  /* src/components/ui/Progress/Progress.module.css */
876
- @layer boostdev.bds2110Progress-component {
877
- .bds2110Progress-container {
876
+ @layer boostdev.bds2121Progress-component {
877
+ .bds2121Progress-container {
878
878
  display: flex;
879
879
  flex-direction: column;
880
880
  gap: var(--bds-space_xxs);
881
881
  inline-size: 100%;
882
882
  }
883
- .bds2110Progress-labelRow {
883
+ .bds2121Progress-labelRow {
884
884
  display: flex;
885
885
  justify-content: space-between;
886
886
  align-items: baseline;
887
887
  font-size: var(--bds-font_size--body--s);
888
888
  color: var(--bds-color_on-bg);
889
889
  }
890
- .bds2110Progress-value {
890
+ .bds2121Progress-value {
891
891
  font-variant-numeric: tabular-nums;
892
892
  }
893
- .bds2110Progress-track {
893
+ .bds2121Progress-track {
894
894
  inline-size: 100%;
895
895
  block-size: var(--progress_height, var(--bds-space_xs));
896
896
  background-color: var(--progress_color-track, var(--bds-color_bg--subtle));
897
897
  border-radius: var(--progress_radius, var(--bds-border_radius--full));
898
898
  overflow: hidden;
899
899
  }
900
- .bds2110Progress-track.bds2110Progress---size_small {
900
+ .bds2121Progress-track.bds2121Progress---size_small {
901
901
  --progress_height: var(--bds-space_xxs);
902
902
  }
903
- .bds2110Progress-track.bds2110Progress---size_medium {
903
+ .bds2121Progress-track.bds2121Progress---size_medium {
904
904
  --progress_height: var(--bds-space_xs);
905
905
  }
906
- .bds2110Progress-track.bds2110Progress---size_large {
906
+ .bds2121Progress-track.bds2121Progress---size_large {
907
907
  --progress_height: var(--bds-space_s);
908
908
  }
909
- .bds2110Progress-fill {
909
+ .bds2121Progress-fill {
910
910
  block-size: 100%;
911
911
  background-color: var(--progress_color-active, var(--bdc-color_active));
912
912
  border-radius: var(--progress_radius, var(--bds-border_radius--full));
913
913
  transition: inline-size var(--bds-animation_transition-duration) var(--bds-animation_easing);
914
914
  }
915
915
  @media (prefers-reduced-motion: reduce) {
916
- .bds2110Progress-fill {
916
+ .bds2121Progress-fill {
917
917
  transition: none;
918
918
  }
919
919
  }
920
920
  }
921
921
 
922
922
  /* src/components/ui/ProgressCircle/ProgressCircle.module.css */
923
- @layer boostdev.bds2110ProgressCircle-component {
924
- .bds2110ProgressCircle-wrapper {
923
+ @layer boostdev.bds2121ProgressCircle-component {
924
+ .bds2121ProgressCircle-wrapper {
925
925
  position: relative;
926
926
  display: inline-flex;
927
927
  align-items: center;
928
928
  justify-content: center;
929
929
  }
930
- .bds2110ProgressCircle-svg {
930
+ .bds2121ProgressCircle-svg {
931
931
  display: block;
932
932
  }
933
- .bds2110ProgressCircle-track {
933
+ .bds2121ProgressCircle-track {
934
934
  stroke: var(--progressCircle_color-track, var(--bds-color_bg--subtle));
935
935
  }
936
- .bds2110ProgressCircle-fill {
936
+ .bds2121ProgressCircle-fill {
937
937
  stroke: var(--progressCircle_color-active, var(--bdc-color_active));
938
938
  transition: stroke-dashoffset var(--bds-animation_transition-duration) var(--bds-animation_easing);
939
939
  }
940
- .bds2110ProgressCircle-value {
940
+ .bds2121ProgressCircle-value {
941
941
  position: absolute;
942
942
  font-size: var(--bds-font_size--body--s);
943
943
  font-weight: var(--bds-font_weight--semibold);
@@ -945,34 +945,34 @@
945
945
  color: var(--bds-color_on-bg);
946
946
  line-height: 1;
947
947
  }
948
- .bds2110ProgressCircle---size_small .bds2110ProgressCircle-value {
948
+ .bds2121ProgressCircle---size_small .bds2121ProgressCircle-value {
949
949
  font-size: var(--progressCircle_font-size--small, var(--bds-font_size--body--s));
950
950
  }
951
- .bds2110ProgressCircle---size_medium .bds2110ProgressCircle-value {
951
+ .bds2121ProgressCircle---size_medium .bds2121ProgressCircle-value {
952
952
  font-size: var(--bds-font_size--body--s);
953
953
  }
954
- .bds2110ProgressCircle---size_large .bds2110ProgressCircle-value {
954
+ .bds2121ProgressCircle---size_large .bds2121ProgressCircle-value {
955
955
  font-size: var(--bds-font_size--body);
956
956
  }
957
957
  @media (prefers-reduced-motion: reduce) {
958
- .bds2110ProgressCircle-fill {
958
+ .bds2121ProgressCircle-fill {
959
959
  transition: none;
960
960
  }
961
961
  }
962
962
  }
963
963
 
964
964
  /* src/components/ui/Separator/Separator.module.css */
965
- @layer boostdev.bds2110Separator-component {
966
- .bds2110Separator-separator {
965
+ @layer boostdev.bds2121Separator-component {
966
+ .bds2121Separator-separator {
967
967
  border: none;
968
968
  background-color: var(--separator_color, var(--bds-color_on-bg));
969
969
  }
970
- .bds2110Separator-separator.bds2110Separator---horizontal {
970
+ .bds2121Separator-separator.bds2121Separator---horizontal {
971
971
  display: block;
972
972
  inline-size: 100%;
973
973
  block-size: var(--separator_thickness, 1px);
974
974
  }
975
- .bds2110Separator-separator.bds2110Separator---vertical {
975
+ .bds2121Separator-separator.bds2121Separator---vertical {
976
976
  display: inline-block;
977
977
  inline-size: var(--separator_thickness, 1px);
978
978
  min-block-size: var(--separator_length, 1em);
@@ -981,8 +981,8 @@
981
981
  }
982
982
 
983
983
  /* src/components/ui/Skeleton/Skeleton.module.css */
984
- @layer boostdev.bds2110Skeleton-component {
985
- .bds2110Skeleton-skeleton {
984
+ @layer boostdev.bds2121Skeleton-component {
985
+ .bds2121Skeleton-skeleton {
986
986
  background:
987
987
  linear-gradient(
988
988
  90deg,
@@ -995,7 +995,7 @@
995
995
  min-block-size: var(--skeleton_min-block-size, var(--bds-space_m));
996
996
  }
997
997
  @media (prefers-reduced-motion: reduce) {
998
- .bds2110Skeleton-skeleton {
998
+ .bds2121Skeleton-skeleton {
999
999
  animation: none;
1000
1000
  background: var(--skeleton_color-base, var(--bds-color_grey--subtle));
1001
1001
  }
@@ -1011,8 +1011,8 @@
1011
1011
  }
1012
1012
 
1013
1013
  /* src/components/ui/SkipLink/SkipLink.module.css */
1014
- @layer boostdev.bds2110SkipLink-component {
1015
- .bds2110SkipLink-skipLink {
1014
+ @layer boostdev.bds2121SkipLink-component {
1015
+ .bds2121SkipLink-skipLink {
1016
1016
  position: absolute;
1017
1017
  inset-block-start: var(--skip-link_inset, var(--bds-space_s));
1018
1018
  inset-inline-start: var(--skip-link_inset, var(--bds-space_s));
@@ -1030,21 +1030,21 @@
1030
1030
  transform: translateY(-200%);
1031
1031
  transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
1032
1032
  }
1033
- .bds2110SkipLink-skipLink:focus-visible {
1033
+ .bds2121SkipLink-skipLink:focus-visible {
1034
1034
  transform: translateY(0);
1035
1035
  outline: var(--bds-outline_default);
1036
1036
  outline-offset: var(--bds-outline_offset);
1037
1037
  }
1038
1038
  @media (prefers-reduced-motion: reduce) {
1039
- .bds2110SkipLink-skipLink {
1039
+ .bds2121SkipLink-skipLink {
1040
1040
  transition: none;
1041
1041
  }
1042
1042
  }
1043
1043
  }
1044
1044
 
1045
1045
  /* src/components/ui/Table/Table.module.css */
1046
- @layer boostdev.bds2110Table-component {
1047
- .bds2110Table-wrapper {
1046
+ @layer boostdev.bds2121Table-component {
1047
+ .bds2121Table-wrapper {
1048
1048
  inline-size: 100%;
1049
1049
  overflow-inline: auto;
1050
1050
  border: var(--table_border, none);
@@ -1053,27 +1053,27 @@
1053
1053
  border-radius: var(--table_radius, var(--bdc-outline_radius));
1054
1054
  box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--table_shadow, var(--bdc-outline_shadow));
1055
1055
  }
1056
- .bds2110Table-wrapper:focus-visible {
1056
+ .bds2121Table-wrapper:focus-visible {
1057
1057
  outline: var(--bds-outline_default);
1058
1058
  outline-offset: calc(var(--bds-outline_offset) * -1);
1059
1059
  }
1060
- .bds2110Table-table {
1060
+ .bds2121Table-table {
1061
1061
  inline-size: 100%;
1062
1062
  border-collapse: collapse;
1063
1063
  font-size: var(--table_font-size, var(--bds-font_size--body));
1064
1064
  font-family: var(--bds-font_family--body);
1065
1065
  }
1066
- .bds2110Table-caption {
1066
+ .bds2121Table-caption {
1067
1067
  caption-side: top;
1068
1068
  text-align: start;
1069
1069
  padding: var(--table_cell-padding, var(--bds-space_s) var(--bds-space_m));
1070
1070
  font-weight: var(--bds-font_weight--semibold);
1071
1071
  color: var(--bds-color_on-bg);
1072
1072
  }
1073
- .bds2110Table-thead {
1073
+ .bds2121Table-thead {
1074
1074
  background-color: var(--bds-color_bg--subtle);
1075
1075
  }
1076
- .bds2110Table-th {
1076
+ .bds2121Table-th {
1077
1077
  padding: var(--table_cell-padding, var(--bds-space_s) var(--bds-space_m));
1078
1078
  text-align: start;
1079
1079
  font-weight: var(--bds-font_weight--semibold);
@@ -1082,10 +1082,10 @@
1082
1082
  white-space: nowrap;
1083
1083
  border-block-end: 1px solid var(--bds-color_bg--subtle);
1084
1084
  }
1085
- .bds2110Table-th.bds2110Table---sortable {
1085
+ .bds2121Table-th.bds2121Table---sortable {
1086
1086
  padding: 0;
1087
1087
  }
1088
- .bds2110Table-sortButton {
1088
+ .bds2121Table-sortButton {
1089
1089
  all: unset;
1090
1090
  display: flex;
1091
1091
  align-items: center;
@@ -1099,64 +1099,64 @@
1099
1099
  transition: var(--bds-animation_transition);
1100
1100
  box-sizing: border-box;
1101
1101
  }
1102
- .bds2110Table-sortButton:focus-visible {
1102
+ .bds2121Table-sortButton:focus-visible {
1103
1103
  outline: var(--bds-outline_default);
1104
1104
  outline-offset: calc(var(--bds-outline_offset) * -1);
1105
1105
  }
1106
1106
  @media (hover: hover) and (pointer: fine) {
1107
- .bds2110Table-sortButton:hover {
1107
+ .bds2121Table-sortButton:hover {
1108
1108
  color: var(--table_sortBtn-color--hover, var(--bds-color_on-bg));
1109
1109
  }
1110
1110
  }
1111
- .bds2110Table-sortIcon {
1111
+ .bds2121Table-sortIcon {
1112
1112
  inline-size: 1rem;
1113
1113
  block-size: 1rem;
1114
1114
  opacity: 0.4;
1115
1115
  transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing), opacity var(--bds-animation_transition-duration) var(--bds-animation_easing);
1116
1116
  }
1117
- .bds2110Table-sortIcon.bds2110Table---sort-active {
1117
+ .bds2121Table-sortIcon.bds2121Table---sort-active {
1118
1118
  opacity: 1;
1119
1119
  color: var(--bds-color_interactive);
1120
1120
  }
1121
- .bds2110Table-sortIcon.bds2110Table---sort-desc {
1121
+ .bds2121Table-sortIcon.bds2121Table---sort-desc {
1122
1122
  transform: rotate(180deg);
1123
1123
  }
1124
- .bds2110Table-tbody .bds2110Table-tr {
1124
+ .bds2121Table-tbody .bds2121Table-tr {
1125
1125
  border-block-end: 1px solid var(--bds-color_bg--subtle);
1126
1126
  transition: var(--bds-animation_transition);
1127
1127
  }
1128
- .bds2110Table-tbody .bds2110Table-tr:last-child {
1128
+ .bds2121Table-tbody .bds2121Table-tr:last-child {
1129
1129
  border-block-end: none;
1130
1130
  }
1131
1131
  @media (hover: hover) and (pointer: fine) {
1132
- .bds2110Table-tbody .bds2110Table-tr:hover {
1132
+ .bds2121Table-tbody .bds2121Table-tr:hover {
1133
1133
  background-color: var(--table_row-bg--hover, var(--bds-color_bg--subtle));
1134
1134
  }
1135
1135
  }
1136
- .bds2110Table-td {
1136
+ .bds2121Table-td {
1137
1137
  padding: var(--table_cell-padding, var(--bds-space_s) var(--bds-space_m));
1138
1138
  color: var(--bds-color_on-bg);
1139
1139
  vertical-align: middle;
1140
1140
  }
1141
1141
  @media (prefers-reduced-motion: reduce) {
1142
- .bds2110Table-sortIcon {
1142
+ .bds2121Table-sortIcon {
1143
1143
  transition: none;
1144
1144
  }
1145
1145
  }
1146
1146
  }
1147
1147
 
1148
1148
  /* src/components/ui/Tabs/Tabs.module.css */
1149
- @layer boostdev.bds2110Tabs-component {
1150
- .bds2110Tabs-tabs {
1149
+ @layer boostdev.bds2121Tabs-component {
1150
+ .bds2121Tabs-tabs {
1151
1151
  display: flex;
1152
1152
  flex-direction: column;
1153
1153
  }
1154
- .bds2110Tabs-tabList {
1154
+ .bds2121Tabs-tabList {
1155
1155
  display: flex;
1156
1156
  border-block-end: 1px solid var(--bds-color_bg--subtle);
1157
1157
  gap: var(--tabs_gap, var(--bds-space_xxs));
1158
1158
  }
1159
- .bds2110Tabs-tab {
1159
+ .bds2121Tabs-tab {
1160
1160
  all: unset;
1161
1161
  display: inline-flex;
1162
1162
  align-items: center;
@@ -1170,41 +1170,41 @@
1170
1170
  cursor: pointer;
1171
1171
  transition: var(--bds-animation_transition);
1172
1172
  }
1173
- .bds2110Tabs-tab.bds2110Tabs---active {
1173
+ .bds2121Tabs-tab.bds2121Tabs---active {
1174
1174
  --tab_color--state: var(--tab_color--active, var(--bds-color_interactive_on-bg));
1175
1175
  --tab_border-color--state: var(--tab_border-color--active, var(--bds-color_interactive));
1176
1176
  }
1177
- .bds2110Tabs-tab:disabled {
1177
+ .bds2121Tabs-tab:disabled {
1178
1178
  opacity: 0.4;
1179
1179
  cursor: not-allowed;
1180
1180
  }
1181
- .bds2110Tabs-tab:focus-visible {
1181
+ .bds2121Tabs-tab:focus-visible {
1182
1182
  outline: var(--bds-outline_default);
1183
1183
  outline-offset: var(--bds-outline_offset);
1184
1184
  border-radius: var(--bds-border_radius--xs);
1185
1185
  }
1186
1186
  @media (hover: hover) and (pointer: fine) {
1187
- .bds2110Tabs-tab:not(:disabled, .bds2110Tabs---active):hover {
1187
+ .bds2121Tabs-tab:not(:disabled, .bds2121Tabs---active):hover {
1188
1188
  --tab_color--state: var(--tab_color--hover, var(--bds-color_interactive_on-bg));
1189
1189
  }
1190
1190
  }
1191
- .bds2110Tabs-panel {
1191
+ .bds2121Tabs-panel {
1192
1192
  padding-block-start: var(--tabs_panel-padding, var(--bds-space_m));
1193
1193
  }
1194
- .bds2110Tabs-panel:focus-visible {
1194
+ .bds2121Tabs-panel:focus-visible {
1195
1195
  outline: var(--bds-outline_default);
1196
1196
  outline-offset: var(--bds-outline_offset);
1197
1197
  }
1198
1198
  }
1199
1199
 
1200
1200
  /* src/components/ui/Tooltip/Tooltip.module.css */
1201
- @layer boostdev.bds2110Tooltip-component {
1202
- .bds2110Tooltip-wrapper {
1201
+ @layer boostdev.bds2121Tooltip-component {
1202
+ .bds2121Tooltip-wrapper {
1203
1203
  position: relative;
1204
1204
  display: inline-flex;
1205
1205
  align-items: center;
1206
1206
  }
1207
- .bds2110Tooltip-tooltip {
1207
+ .bds2121Tooltip-tooltip {
1208
1208
  display: block;
1209
1209
  position: absolute;
1210
1210
  z-index: var(--bds-z-index_popover);
@@ -1222,72 +1222,72 @@
1222
1222
  opacity: 0;
1223
1223
  transition: opacity var(--bds-animation_transition-duration) var(--bds-animation_easing);
1224
1224
  }
1225
- [dir=rtl] .bds2110Tooltip-tooltip,
1226
- .bds2110Tooltip-tooltip[dir=rtl] {
1225
+ [dir=rtl] .bds2121Tooltip-tooltip,
1226
+ .bds2121Tooltip-tooltip[dir=rtl] {
1227
1227
  --tooltip_dir: -1;
1228
1228
  }
1229
- .bds2110Tooltip---visible {
1229
+ .bds2121Tooltip---visible {
1230
1230
  visibility: visible;
1231
1231
  opacity: 1;
1232
1232
  pointer-events: auto;
1233
1233
  }
1234
- .bds2110Tooltip---placement_top {
1234
+ .bds2121Tooltip---placement_top {
1235
1235
  inset-block-end: calc(100% + var(--tooltip_offset, var(--bds-space_xs)));
1236
1236
  inset-inline-start: 50%;
1237
1237
  transform: translateX(calc(-50% * var(--tooltip_dir, 1)));
1238
1238
  }
1239
- .bds2110Tooltip---placement_bottom {
1239
+ .bds2121Tooltip---placement_bottom {
1240
1240
  inset-block-start: calc(100% + var(--tooltip_offset, var(--bds-space_xs)));
1241
1241
  inset-inline-start: 50%;
1242
1242
  transform: translateX(calc(-50% * var(--tooltip_dir, 1)));
1243
1243
  }
1244
- .bds2110Tooltip---placement_left {
1244
+ .bds2121Tooltip---placement_left {
1245
1245
  inset-inline-end: calc(100% + var(--tooltip_offset, var(--bds-space_xs)));
1246
1246
  inset-block-start: 50%;
1247
1247
  transform: translateY(-50%);
1248
1248
  }
1249
- .bds2110Tooltip---placement_right {
1249
+ .bds2121Tooltip---placement_right {
1250
1250
  inset-inline-start: calc(100% + var(--tooltip_offset, var(--bds-space_xs)));
1251
1251
  inset-block-start: 50%;
1252
1252
  transform: translateY(-50%);
1253
1253
  }
1254
1254
  @media (prefers-reduced-motion: reduce) {
1255
- .bds2110Tooltip-tooltip {
1255
+ .bds2121Tooltip-tooltip {
1256
1256
  transition: none;
1257
1257
  }
1258
1258
  }
1259
1259
  }
1260
1260
 
1261
1261
  /* src/components/ui/Typography/Typography.module.css */
1262
- @layer boostdev.bds2110Typography-component {
1263
- .bds2110Typography-typography {
1262
+ @layer boostdev.bds2121Typography-component {
1263
+ .bds2121Typography-typography {
1264
1264
  margin: 0;
1265
1265
  font-family: var(--bds-font_family--body);
1266
1266
  color: var(--typography_color, var(--bds-color_on-bg));
1267
1267
  }
1268
- .bds2110Typography---h1 {
1268
+ .bds2121Typography---h1 {
1269
1269
  font-family: var(--bds-font_family--heading);
1270
1270
  font-size: var(--typography_font-size--h1, var(--bds-font_size--heading-1));
1271
1271
  font-weight: var(--bds-font_weight--bold);
1272
1272
  line-height: var(--bds-font_line-height--heading);
1273
1273
  }
1274
- .bds2110Typography---h2 {
1274
+ .bds2121Typography---h2 {
1275
1275
  font-family: var(--bds-font_family--heading);
1276
1276
  font-size: var(--typography_font-size--h2, var(--bds-font_size--heading-2));
1277
1277
  font-weight: var(--bds-font_weight--semibold);
1278
1278
  line-height: var(--bds-font_line-height--heading);
1279
1279
  }
1280
- .bds2110Typography---h3 {
1280
+ .bds2121Typography---h3 {
1281
1281
  font-family: var(--bds-font_family--heading);
1282
1282
  font-size: var(--typography_font-size--h3, var(--bds-font_size--heading-3));
1283
1283
  font-weight: var(--bds-font_weight--semibold);
1284
1284
  line-height: var(--bds-font_line-height--heading);
1285
1285
  }
1286
- .bds2110Typography---body {
1286
+ .bds2121Typography---body {
1287
1287
  font-size: var(--typography_font-size--body, var(--bds-font_size--body));
1288
1288
  line-height: var(--bds-font_line-height--body);
1289
1289
  }
1290
- .bds2110Typography---body_s {
1290
+ .bds2121Typography---body_s {
1291
1291
  font-size: var(--typography_font-size--body_s, var(--bds-font_size--body--s));
1292
1292
  line-height: var(--bds-font_line-height--body);
1293
1293
  }
@@ -1318,9 +1318,9 @@
1318
1318
  box-shadow: 0 0 0 0 rgb(from var(--button_pulse-color, var(--button_color, var(--bds-color_interactive))) r g b / 0%);
1319
1319
  }
1320
1320
  }
1321
- @layer boostdev.bds2110Button-component {
1322
- .bds2110Button-button,
1323
- .bds2110Button-button[href] {
1321
+ @layer boostdev.bds2121Button-component {
1322
+ .bds2121Button-button,
1323
+ .bds2121Button-button[href] {
1324
1324
  all: unset;
1325
1325
  position: relative;
1326
1326
  font: inherit;
@@ -1342,78 +1342,78 @@
1342
1342
  box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
1343
1343
  transition: var(--bds-animation_transition), --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing);
1344
1344
  }
1345
- .bds2110Button-button.bds2110Button---default {
1345
+ .bds2121Button-button.bds2121Button---default {
1346
1346
  }
1347
- .bds2110Button-button.bds2110Button---outline,
1348
- .bds2110Button-button.bds2110Button---ghost {
1347
+ .bds2121Button-button.bds2121Button---outline,
1348
+ .bds2121Button-button.bds2121Button---ghost {
1349
1349
  --button_bg--variant: var(--button_bg--outline, transparent);
1350
1350
  --button_text--variant: var(--button_text--outline, var(--button_color--on-bg, var(--bds-color_interactive_on-bg)));
1351
1351
  --button_border--variant: var(--button_border--outline, var(--button_color--on-bg, var(--bds-color_interactive_on-bg)));
1352
1352
  }
1353
- .bds2110Button-button.bds2110Button---size_small {
1353
+ .bds2121Button-button.bds2121Button---size_small {
1354
1354
  --button_height: 2.25em;
1355
1355
  --button_font-size: var(--bds-font_size--body--s);
1356
1356
  padding-inline: var(--bds-space_m);
1357
1357
  }
1358
- .bds2110Button-button.bds2110Button---size_medium {
1358
+ .bds2121Button-button.bds2121Button---size_medium {
1359
1359
  --button_height: 3em;
1360
1360
  padding-inline: var(--bds-space_l);
1361
1361
  }
1362
- .bds2110Button-button.bds2110Button---size_large {
1362
+ .bds2121Button-button.bds2121Button---size_large {
1363
1363
  --button_font-size: var(--bds-font_size--heading-3);
1364
1364
  padding-inline: var(--bds-space_xl);
1365
1365
  }
1366
- .bds2110Button-button.bds2110Button---hasPulse {
1366
+ .bds2121Button-button.bds2121Button---hasPulse {
1367
1367
  animation: pulse 3s infinite;
1368
1368
  }
1369
- .bds2110Button-button.bds2110Button---iconOnly {
1369
+ .bds2121Button-button.bds2121Button---iconOnly {
1370
1370
  aspect-ratio: 1;
1371
1371
  box-sizing: border-box;
1372
1372
  padding: var(--bds-space_xxs);
1373
1373
  }
1374
- .bds2110Button-button.bds2110Button---iconOnly > * {
1374
+ .bds2121Button-button.bds2121Button---iconOnly > * {
1375
1375
  inline-size: 100%;
1376
1376
  block-size: 100%;
1377
1377
  }
1378
- .bds2110Button-button[href] {
1378
+ .bds2121Button-button[href] {
1379
1379
  text-decoration: none;
1380
1380
  }
1381
- .bds2110Button-button svg {
1381
+ .bds2121Button-button svg {
1382
1382
  --icon__stroke: currentcolor;
1383
1383
  fill: currentcolor;
1384
1384
  color: currentcolor;
1385
1385
  flex-shrink: 0;
1386
1386
  }
1387
- .bds2110Button-iconStart {
1387
+ .bds2121Button-iconStart {
1388
1388
  display: flex;
1389
1389
  align-items: center;
1390
1390
  margin-inline-start: calc(var(--bds-space_s) * -1);
1391
1391
  transition: var(--bds-animation_transition);
1392
1392
  }
1393
- .bds2110Button-iconEnd {
1393
+ .bds2121Button-iconEnd {
1394
1394
  display: flex;
1395
1395
  align-items: center;
1396
1396
  margin-inline-end: calc(var(--bds-space_s) * -1);
1397
1397
  transition: var(--bds-animation_transition);
1398
1398
  }
1399
- .bds2110Button-button.bds2110Button---iconOnly .bds2110Button-iconStart,
1400
- .bds2110Button-button.bds2110Button---iconOnly .bds2110Button-iconEnd {
1399
+ .bds2121Button-button.bds2121Button---iconOnly .bds2121Button-iconStart,
1400
+ .bds2121Button-button.bds2121Button---iconOnly .bds2121Button-iconEnd {
1401
1401
  margin-inline: 0;
1402
1402
  }
1403
1403
  @media (hover: hover) and (pointer: fine) {
1404
- .bds2110Button-button:hover .bds2110Button-iconStart svg {
1404
+ .bds2121Button-button:hover .bds2121Button-iconStart svg {
1405
1405
  animation: fadeZoom 2s ease-out infinite;
1406
1406
  }
1407
- .bds2110Button-button:hover .bds2110Button-iconEnd svg {
1407
+ .bds2121Button-button:hover .bds2121Button-iconEnd svg {
1408
1408
  animation: fadeZoom 2s ease-out infinite;
1409
1409
  }
1410
1410
  }
1411
- .bds2110Button-button:focus-visible {
1411
+ .bds2121Button-button:focus-visible {
1412
1412
  outline: var(--bds-outline_default);
1413
1413
  outline-offset: var(--bds-outline_offset);
1414
1414
  }
1415
1415
  @media (hover: hover) and (pointer: fine) {
1416
- .bds2110Button-button.bds2110Button---default:hover {
1416
+ .bds2121Button-button.bds2121Button---default:hover {
1417
1417
  --button_bg--variant: var(--button_bg--hover, var(--bds-color_bg));
1418
1418
  --button_text--variant: var(--button_text--hover, var(--bds-color_interactive_on-bg));
1419
1419
  --button_border--variant: var(--button_border--hover, currentcolor);
@@ -1421,25 +1421,25 @@
1421
1421
  }
1422
1422
  }
1423
1423
  @media (hover: hover) and (pointer: fine) {
1424
- .bds2110Button-button.bds2110Button---outline:hover,
1425
- .bds2110Button-button.bds2110Button---ghost:hover {
1424
+ .bds2121Button-button.bds2121Button---outline:hover,
1425
+ .bds2121Button-button.bds2121Button---ghost:hover {
1426
1426
  --button_bg--variant: var(--button_bg--outline-hover, var(--button_color, var(--bds-color_interactive)));
1427
1427
  --button_text--variant: var(--button_text--outline-hover, var(--button_on-color, var(--bds-color_on-interactive)));
1428
1428
  --button_border--variant: var(--button_border--outline-hover, transparent);
1429
1429
  }
1430
1430
  }
1431
1431
  @media (prefers-reduced-motion: reduce) {
1432
- .bds2110Button-button.bds2110Button---hasPulse,
1433
- .bds2110Button-button:hover .bds2110Button-iconStart svg,
1434
- .bds2110Button-button:hover .bds2110Button-iconEnd svg {
1432
+ .bds2121Button-button.bds2121Button---hasPulse,
1433
+ .bds2121Button-button:hover .bds2121Button-iconStart svg,
1434
+ .bds2121Button-button:hover .bds2121Button-iconEnd svg {
1435
1435
  animation: none;
1436
1436
  }
1437
1437
  }
1438
1438
  }
1439
1439
 
1440
1440
  /* src/components/interaction/Command/Command.module.css */
1441
- @layer boostdev.bds2110Command-component {
1442
- .bds2110Command-dialog {
1441
+ @layer boostdev.bds2121Command-component {
1442
+ .bds2121Command-dialog {
1443
1443
  padding: 0;
1444
1444
  border: none;
1445
1445
  border-radius: var(--command_radius, var(--bds-border_radius--m));
@@ -1449,14 +1449,14 @@
1449
1449
  overflow: visible;
1450
1450
  margin-block-start: 10vh;
1451
1451
  }
1452
- .bds2110Command-dialog::backdrop {
1452
+ .bds2121Command-dialog::backdrop {
1453
1453
  background-color: var(--color_backdrop, rgb(0 0 0 / 50%));
1454
1454
  backdrop-filter: blur(3px);
1455
1455
  }
1456
- .bds2110Command-palette {
1456
+ .bds2121Command-palette {
1457
1457
  display: flex;
1458
1458
  flex-direction: column;
1459
- background-color: var(--command_color, var(--bds-color_bg));
1459
+ background-color: var(--command_color, var(--bds-color_bg--strong, var(--bds-color_bg)));
1460
1460
  color: var(--command_on-color, var(--bds-color_on-bg));
1461
1461
  overflow: hidden;
1462
1462
  max-block-size: 70vh;
@@ -1466,7 +1466,7 @@
1466
1466
  border-radius: var(--command_radius, var(--bdc-outline_radius));
1467
1467
  box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--command_shadow, var(--bds-shadow_xl));
1468
1468
  }
1469
- .bds2110Command-searchRow {
1469
+ .bds2121Command-searchRow {
1470
1470
  display: flex;
1471
1471
  align-items: center;
1472
1472
  gap: var(--bds-space_xs);
@@ -1474,13 +1474,13 @@
1474
1474
  border-block-end: 1px solid currentcolor;
1475
1475
  flex-shrink: 0;
1476
1476
  }
1477
- .bds2110Command-searchIcon {
1477
+ .bds2121Command-searchIcon {
1478
1478
  inline-size: 1.25rem;
1479
1479
  block-size: 1.25rem;
1480
1480
  color: var(--bds-color_on-bg);
1481
1481
  flex-shrink: 0;
1482
1482
  }
1483
- .bds2110Command-search {
1483
+ .bds2121Command-search {
1484
1484
  flex: 1;
1485
1485
  border: none;
1486
1486
  font-family: var(--bds-font_family--body);
@@ -1489,14 +1489,14 @@
1489
1489
  background: transparent;
1490
1490
  min-inline-size: 0;
1491
1491
  }
1492
- .bds2110Command-search:focus-visible {
1492
+ .bds2121Command-search:focus-visible {
1493
1493
  outline: var(--bds-outline_default);
1494
1494
  outline-offset: var(--bds-outline_offset);
1495
1495
  }
1496
- .bds2110Command-search::placeholder {
1496
+ .bds2121Command-search::placeholder {
1497
1497
  color: var(--bds-color_on-bg);
1498
1498
  }
1499
- .bds2110Command-escHint {
1499
+ .bds2121Command-escHint {
1500
1500
  font-size: var(--bds-font_size--body--s);
1501
1501
  color: var(--bds-color_on-bg);
1502
1502
  border-radius: var(--command_kbd-radius, var(--bds-border_radius--xs));
@@ -1506,18 +1506,18 @@
1506
1506
  border: none;
1507
1507
  box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
1508
1508
  }
1509
- .bds2110Command-list {
1509
+ .bds2121Command-list {
1510
1510
  overflow-block: auto;
1511
1511
  list-style: none;
1512
1512
  margin: 0;
1513
1513
  padding: var(--bds-space_xs) 0;
1514
1514
  }
1515
- .bds2110Command-groupList {
1515
+ .bds2121Command-groupList {
1516
1516
  list-style: none;
1517
1517
  margin: 0;
1518
1518
  padding: 0;
1519
1519
  }
1520
- .bds2110Command-group {
1520
+ .bds2121Command-group {
1521
1521
  padding: var(--bds-space_xs) var(--bds-space_m);
1522
1522
  font-size: var(--bds-font_size--body--s);
1523
1523
  font-weight: var(--bds-font_weight--semibold);
@@ -1525,7 +1525,7 @@
1525
1525
  text-transform: uppercase;
1526
1526
  letter-spacing: 0.05em;
1527
1527
  }
1528
- .bds2110Command-item {
1528
+ .bds2121Command-item {
1529
1529
  display: flex;
1530
1530
  align-items: center;
1531
1531
  gap: var(--bds-space_s);
@@ -1533,19 +1533,19 @@
1533
1533
  cursor: pointer;
1534
1534
  transition: background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
1535
1535
  }
1536
- .bds2110Command-itemActive {
1536
+ .bds2121Command-itemActive {
1537
1537
  background-color: var(--command_item-bg--active, var(--bds-color_bg--subtle));
1538
1538
  }
1539
- .bds2110Command-itemLabel {
1539
+ .bds2121Command-itemLabel {
1540
1540
  flex: 1;
1541
1541
  font-size: var(--bds-font_size--body);
1542
1542
  color: var(--bds-color_on-bg);
1543
1543
  }
1544
- .bds2110Command-itemDesc {
1544
+ .bds2121Command-itemDesc {
1545
1545
  font-size: var(--bds-font_size--body--s);
1546
1546
  color: var(--bds-color_on-bg);
1547
1547
  }
1548
- .bds2110Command-shortcut {
1548
+ .bds2121Command-shortcut {
1549
1549
  font-size: var(--bds-font_size--body--s);
1550
1550
  color: var(--bds-color_on-bg);
1551
1551
  border-radius: var(--command_kbd-radius, var(--bds-border_radius--xs));
@@ -1554,13 +1554,13 @@
1554
1554
  border: none;
1555
1555
  box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
1556
1556
  }
1557
- .bds2110Command-empty {
1557
+ .bds2121Command-empty {
1558
1558
  padding: var(--bds-space_l) var(--bds-space_m);
1559
1559
  text-align: center;
1560
1560
  color: var(--bds-color_on-bg);
1561
1561
  font-size: var(--bds-font_size--body);
1562
1562
  }
1563
- .bds2110Command-srOnly {
1563
+ .bds2121Command-srOnly {
1564
1564
  position: absolute;
1565
1565
  inline-size: 1px;
1566
1566
  block-size: 1px;
@@ -1572,8 +1572,8 @@
1572
1572
  }
1573
1573
 
1574
1574
  /* src/components/interaction/Dialog/Dialog.module.css */
1575
- @layer boostdev.bds2110Dialog-component {
1576
- .bds2110Dialog-dialog {
1575
+ @layer boostdev.bds2121Dialog-component {
1576
+ .bds2121Dialog-dialog {
1577
1577
  font-size: var(--bds-font_size--body--s);
1578
1578
  border: var(--dialog_border, none);
1579
1579
  --bdc_color: currentcolor;
@@ -1582,24 +1582,24 @@
1582
1582
  flex-direction: column;
1583
1583
  border-radius: var(--dialog_radius, var(--bdc-outline_radius));
1584
1584
  box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--dialog_shadow, var(--bdc-outline_shadow));
1585
- background-color: var(--dialog_color ,var(--bds-color_grey--subtle));
1585
+ background-color: var(--dialog_color ,var(--bds-color_bg--strong, var(--bds-color_grey--subtle)));
1586
1586
  color: var(--dialog_on-color, var(--bds-color_on-grey--subtle));
1587
1587
  padding: var(--bds-space_l);
1588
1588
  max-inline-size: 90svw;
1589
1589
  max-block-size: 90svh;
1590
1590
  overflow: visible;
1591
1591
  }
1592
- .bds2110Dialog-dialog:not([open]) {
1592
+ .bds2121Dialog-dialog:not([open]) {
1593
1593
  display: none;
1594
1594
  }
1595
- .bds2110Dialog-dialogContent {
1595
+ .bds2121Dialog-dialogContent {
1596
1596
  display: grid;
1597
1597
  gap: var(--bds-grid_gap);
1598
1598
  overflow-block: auto;
1599
1599
  min-block-size: 0;
1600
1600
  flex: 1;
1601
1601
  }
1602
- .bds2110Dialog-closeButton {
1602
+ .bds2121Dialog-closeButton {
1603
1603
  all: unset;
1604
1604
  position: absolute;
1605
1605
  inset-block-start: -1em;
@@ -1617,29 +1617,29 @@
1617
1617
  box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
1618
1618
  cursor: pointer;
1619
1619
  }
1620
- .bds2110Dialog-closeButton::after {
1620
+ .bds2121Dialog-closeButton::after {
1621
1621
  content: "";
1622
1622
  position: absolute;
1623
1623
  inset-block: -0.5rem;
1624
1624
  inset-inline: -0.5rem;
1625
1625
  }
1626
- .bds2110Dialog-closeButton:focus-visible {
1626
+ .bds2121Dialog-closeButton:focus-visible {
1627
1627
  outline: var(--bds-outline_default);
1628
1628
  outline-offset: var(--bds-outline_offset);
1629
1629
  }
1630
- .bds2110Dialog-closeButton svg {
1630
+ .bds2121Dialog-closeButton svg {
1631
1631
  inline-size: 1.25em;
1632
1632
  block-size: 1.25em;
1633
1633
  }
1634
- .bds2110Dialog-dialog::backdrop {
1634
+ .bds2121Dialog-dialog::backdrop {
1635
1635
  background-color: var(--color_backdrop, rgb(0 0 0 / 50%));
1636
1636
  backdrop-filter: blur(3px);
1637
1637
  }
1638
1638
  }
1639
1639
 
1640
1640
  /* src/components/interaction/Drawer/Drawer.module.css */
1641
- @layer boostdev.bds2110Drawer-component {
1642
- .bds2110Drawer-drawer {
1641
+ @layer boostdev.bds2121Drawer-component {
1642
+ .bds2121Drawer-drawer {
1643
1643
  position: fixed;
1644
1644
  inset-block: 0;
1645
1645
  inset-inline: auto 0;
@@ -1651,7 +1651,7 @@
1651
1651
  padding: 0;
1652
1652
  display: flex;
1653
1653
  flex-direction: column;
1654
- background-color: var(--drawer_color, var(--bds-color_bg));
1654
+ background-color: var(--drawer_color, var(--bds-color_bg--strong, var(--bds-color_bg)));
1655
1655
  color: var(--drawer_on-color, var(--bds-color_on-bg));
1656
1656
  border: none;
1657
1657
  box-shadow: var(--drawer_shadow, var(--bds-shadow_xl));
@@ -1662,37 +1662,37 @@
1662
1662
  display var(--bds-animation_transition-duration) var(--bds-animation_easing) allow-discrete,
1663
1663
  overlay var(--bds-animation_transition-duration) var(--bds-animation_easing) allow-discrete;
1664
1664
  }
1665
- .bds2110Drawer-drawer:not([open]) {
1665
+ .bds2121Drawer-drawer:not([open]) {
1666
1666
  display: none;
1667
1667
  }
1668
- .bds2110Drawer-drawer:dir(rtl) {
1668
+ .bds2121Drawer-drawer:dir(rtl) {
1669
1669
  translate: -100% 0;
1670
1670
  }
1671
- .bds2110Drawer---side_left.bds2110Drawer-drawer {
1671
+ .bds2121Drawer---side_left.bds2121Drawer-drawer {
1672
1672
  inset-inline: 0 auto;
1673
1673
  translate: -100% 0;
1674
1674
  }
1675
- .bds2110Drawer---side_left.bds2110Drawer-drawer:dir(rtl) {
1675
+ .bds2121Drawer---side_left.bds2121Drawer-drawer:dir(rtl) {
1676
1676
  translate: 100% 0;
1677
1677
  }
1678
- .bds2110Drawer-drawer[open] {
1678
+ .bds2121Drawer-drawer[open] {
1679
1679
  translate: 0 0;
1680
1680
  }
1681
1681
  @starting-style {
1682
- .bds2110Drawer-drawer[open] {
1682
+ .bds2121Drawer-drawer[open] {
1683
1683
  translate: 100% 0;
1684
1684
  }
1685
- .bds2110Drawer-drawer[open]:dir(rtl) {
1685
+ .bds2121Drawer-drawer[open]:dir(rtl) {
1686
1686
  translate: -100% 0;
1687
1687
  }
1688
- .bds2110Drawer---side_left.bds2110Drawer-drawer[open] {
1688
+ .bds2121Drawer---side_left.bds2121Drawer-drawer[open] {
1689
1689
  translate: -100% 0;
1690
1690
  }
1691
- .bds2110Drawer---side_left.bds2110Drawer-drawer[open]:dir(rtl) {
1691
+ .bds2121Drawer---side_left.bds2121Drawer-drawer[open]:dir(rtl) {
1692
1692
  translate: 100% 0;
1693
1693
  }
1694
1694
  }
1695
- .bds2110Drawer-drawer::backdrop {
1695
+ .bds2121Drawer-drawer::backdrop {
1696
1696
  background-color: var(--color_backdrop, rgb(0 0 0 / 50%));
1697
1697
  backdrop-filter: blur(3px);
1698
1698
  opacity: 0;
@@ -1701,15 +1701,15 @@
1701
1701
  display var(--bds-animation_transition-duration) var(--bds-animation_easing) allow-discrete,
1702
1702
  overlay var(--bds-animation_transition-duration) var(--bds-animation_easing) allow-discrete;
1703
1703
  }
1704
- .bds2110Drawer-drawer[open]::backdrop {
1704
+ .bds2121Drawer-drawer[open]::backdrop {
1705
1705
  opacity: 1;
1706
1706
  }
1707
1707
  @starting-style {
1708
- .bds2110Drawer-drawer[open]::backdrop {
1708
+ .bds2121Drawer-drawer[open]::backdrop {
1709
1709
  opacity: 0;
1710
1710
  }
1711
1711
  }
1712
- .bds2110Drawer-header {
1712
+ .bds2121Drawer-header {
1713
1713
  display: flex;
1714
1714
  align-items: center;
1715
1715
  justify-content: space-between;
@@ -1717,7 +1717,7 @@
1717
1717
  border-block-end: 1px solid currentcolor;
1718
1718
  flex-shrink: 0;
1719
1719
  }
1720
- .bds2110Drawer-closeButton {
1720
+ .bds2121Drawer-closeButton {
1721
1721
  all: unset;
1722
1722
  display: flex;
1723
1723
  align-items: center;
@@ -1728,20 +1728,20 @@
1728
1728
  cursor: pointer;
1729
1729
  transition: var(--bds-animation_transition);
1730
1730
  }
1731
- .bds2110Drawer-closeButton svg {
1731
+ .bds2121Drawer-closeButton svg {
1732
1732
  inline-size: 1.25rem;
1733
1733
  block-size: 1.25rem;
1734
1734
  }
1735
- .bds2110Drawer-closeButton:focus-visible {
1735
+ .bds2121Drawer-closeButton:focus-visible {
1736
1736
  outline: var(--bds-outline_default);
1737
1737
  outline-offset: var(--bds-outline_offset);
1738
1738
  }
1739
1739
  @media (hover: hover) and (pointer: fine) {
1740
- .bds2110Drawer-closeButton:hover {
1740
+ .bds2121Drawer-closeButton:hover {
1741
1741
  background-color: var(--drawer_close-bg--hover, var(--bds-color_bg--subtle));
1742
1742
  }
1743
1743
  }
1744
- .bds2110Drawer-body {
1744
+ .bds2121Drawer-body {
1745
1745
  flex: 1;
1746
1746
  overflow-block: auto;
1747
1747
  padding: var(--bds-space_l);
@@ -1749,20 +1749,20 @@
1749
1749
  flex-direction: column;
1750
1750
  }
1751
1751
  @media (prefers-reduced-motion: reduce) {
1752
- .bds2110Drawer-drawer,
1753
- .bds2110Drawer-drawer::backdrop {
1752
+ .bds2121Drawer-drawer,
1753
+ .bds2121Drawer-drawer::backdrop {
1754
1754
  transition: none;
1755
1755
  }
1756
1756
  }
1757
1757
  }
1758
1758
 
1759
1759
  /* src/components/interaction/DropdownMenu/DropdownMenu.module.css */
1760
- @layer boostdev.bds2110DropdownMenu-component {
1761
- .bds2110DropdownMenu-wrapper {
1760
+ @layer boostdev.bds2121DropdownMenu-component {
1761
+ .bds2121DropdownMenu-wrapper {
1762
1762
  position: relative;
1763
1763
  display: inline-flex;
1764
1764
  }
1765
- .bds2110DropdownMenu-menu {
1765
+ .bds2121DropdownMenu-menu {
1766
1766
  position: absolute;
1767
1767
  inset-block-start: calc(100% + var(--bds-space_xxs));
1768
1768
  z-index: var(--bds-z-index_dropdown);
@@ -1772,28 +1772,28 @@
1772
1772
  --bdc_color: currentcolor;
1773
1773
  --bdc-outline_radius: var(--bds-border_radius--s);
1774
1774
  border-radius: var(--dropdown_radius, var(--bdc-outline_radius));
1775
- background-color: var(--dropdown_color, var(--bds-color_bg));
1775
+ background-color: var(--dropdown_color, var(--bds-color_bg--strong, var(--bds-color_bg)));
1776
1776
  color: var(--dropdown_on-color, var(--bds-color_on-bg));
1777
1777
  box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--dropdown_shadow, var(--bds-shadow_m));
1778
1778
  list-style: none;
1779
1779
  margin: 0;
1780
1780
  }
1781
- .bds2110DropdownMenu-menu li {
1781
+ .bds2121DropdownMenu-menu li {
1782
1782
  list-style: none;
1783
1783
  }
1784
- .bds2110DropdownMenu---placement_bottom-start {
1784
+ .bds2121DropdownMenu---placement_bottom-start {
1785
1785
  inset-inline-start: 0;
1786
1786
  }
1787
- .bds2110DropdownMenu---placement_bottom-end {
1787
+ .bds2121DropdownMenu---placement_bottom-end {
1788
1788
  inset-inline-end: 0;
1789
1789
  }
1790
- .bds2110DropdownMenu-separator {
1790
+ .bds2121DropdownMenu-separator {
1791
1791
  border: none;
1792
1792
  border-block-start: 1px solid currentcolor;
1793
1793
  margin: var(--bds-space_xxs) 0;
1794
1794
  opacity: 0.15;
1795
1795
  }
1796
- .bds2110DropdownMenu-item {
1796
+ .bds2121DropdownMenu-item {
1797
1797
  all: unset;
1798
1798
  display: flex;
1799
1799
  align-items: center;
@@ -1807,22 +1807,22 @@
1807
1807
  box-sizing: border-box;
1808
1808
  transition: var(--bds-animation_transition);
1809
1809
  }
1810
- .bds2110DropdownMenu-item:disabled {
1810
+ .bds2121DropdownMenu-item:disabled {
1811
1811
  opacity: 0.4;
1812
1812
  cursor: not-allowed;
1813
1813
  }
1814
- .bds2110DropdownMenu-item:focus-visible {
1814
+ .bds2121DropdownMenu-item:focus-visible {
1815
1815
  outline: var(--bds-outline_default);
1816
1816
  outline-offset: calc(var(--bds-outline_offset) * -1);
1817
1817
  border-radius: var(--bds-border_radius--xs);
1818
1818
  }
1819
1819
  @media (hover: hover) and (pointer: fine) {
1820
- .bds2110DropdownMenu-item:not(:disabled):hover {
1820
+ .bds2121DropdownMenu-item:not(:disabled):hover {
1821
1821
  background-color: var(--dropdown_item-bg--hover, var(--bds-color_bg--subtle));
1822
1822
  color: var(--dropdown_item-color--hover, var(--bds-color_interactive_on-bg));
1823
1823
  }
1824
1824
  }
1825
- .bds2110DropdownMenu-icon {
1825
+ .bds2121DropdownMenu-icon {
1826
1826
  display: flex;
1827
1827
  align-items: center;
1828
1828
  flex-shrink: 0;
@@ -1830,11 +1830,11 @@
1830
1830
  }
1831
1831
 
1832
1832
  /* src/components/interaction/Popover/Popover.module.css */
1833
- @layer boostdev.bds2110Popover-component {
1834
- .bds2110Popover-wrapper {
1833
+ @layer boostdev.bds2121Popover-component {
1834
+ .bds2121Popover-wrapper {
1835
1835
  display: inline-flex;
1836
1836
  }
1837
- .bds2110Popover-panel {
1837
+ .bds2121Popover-panel {
1838
1838
  position: fixed;
1839
1839
  inset: unset;
1840
1840
  margin: 0;
@@ -1848,12 +1848,12 @@
1848
1848
  --bdc_color: currentcolor;
1849
1849
  --bdc-outline_radius: var(--bds-border_radius--s);
1850
1850
  border-radius: var(--popover_radius, var(--bdc-outline_radius));
1851
- background-color: var(--popover_color, var(--bds-color_bg));
1851
+ background-color: var(--popover_color, var(--bds-color_bg--strong, var(--bds-color_bg)));
1852
1852
  box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--popover_shadow, var(--bds-shadow_m));
1853
1853
  color: var(--popover_on-color, var(--bds-color_on-bg));
1854
1854
  font-size: var(--bds-font_size--body);
1855
1855
  }
1856
- .bds2110Popover-panel[data-placement=bottom] {
1856
+ .bds2121Popover-panel[data-placement=bottom] {
1857
1857
  top: anchor(bottom);
1858
1858
  left: anchor(left);
1859
1859
  margin-block-start: var(--bds-space_xs);
@@ -1862,7 +1862,7 @@
1862
1862
  --popover-right,
1863
1863
  --popover-left;
1864
1864
  }
1865
- .bds2110Popover-panel[data-placement=top] {
1865
+ .bds2121Popover-panel[data-placement=top] {
1866
1866
  bottom: anchor(top);
1867
1867
  left: anchor(left);
1868
1868
  margin-block-end: var(--bds-space_xs);
@@ -1871,7 +1871,7 @@
1871
1871
  --popover-right,
1872
1872
  --popover-left;
1873
1873
  }
1874
- .bds2110Popover-panel[data-placement=right] {
1874
+ .bds2121Popover-panel[data-placement=right] {
1875
1875
  top: anchor(top);
1876
1876
  left: anchor(right);
1877
1877
  margin-inline-start: var(--bds-space_xs);
@@ -1880,7 +1880,7 @@
1880
1880
  --popover-bottom,
1881
1881
  --popover-top;
1882
1882
  }
1883
- .bds2110Popover-panel[data-placement=left] {
1883
+ .bds2121Popover-panel[data-placement=left] {
1884
1884
  top: anchor(top);
1885
1885
  right: anchor(left);
1886
1886
  margin-inline-end: var(--bds-space_xs);
@@ -1938,10 +1938,10 @@
1938
1938
  margin-block-end: var(--bds-space_xs);
1939
1939
  }
1940
1940
  @media (width <= 420px) {
1941
- .bds2110Popover-panel[data-placement=bottom],
1942
- .bds2110Popover-panel[data-placement=top],
1943
- .bds2110Popover-panel[data-placement=left],
1944
- .bds2110Popover-panel[data-placement=right] {
1941
+ .bds2121Popover-panel[data-placement=bottom],
1942
+ .bds2121Popover-panel[data-placement=top],
1943
+ .bds2121Popover-panel[data-placement=left],
1944
+ .bds2121Popover-panel[data-placement=right] {
1945
1945
  inset-inline: var(--bds-space_xs);
1946
1946
  inline-size: 100%;
1947
1947
  max-inline-size: calc(100svw - 2 * var(--bds-space_xs));
@@ -1949,13 +1949,13 @@
1949
1949
  }
1950
1950
  }
1951
1951
  @media (aspect-ratio >= 2/1) {
1952
- .bds2110Popover-panel[data-placement=bottom] {
1952
+ .bds2121Popover-panel[data-placement=bottom] {
1953
1953
  position-try-fallbacks:
1954
1954
  --popover-top,
1955
1955
  --popover-right,
1956
1956
  --popover-left;
1957
1957
  }
1958
- .bds2110Popover-panel[data-placement=top] {
1958
+ .bds2121Popover-panel[data-placement=top] {
1959
1959
  position-try-fallbacks:
1960
1960
  --popover-bottom,
1961
1961
  --popover-right,
@@ -1965,24 +1965,24 @@
1965
1965
  }
1966
1966
 
1967
1967
  /* src/components/interaction/Rating/Rating.module.css */
1968
- @layer boostdev.bds2110Rating-component {
1969
- .bds2110Rating-rating {
1968
+ @layer boostdev.bds2121Rating-component {
1969
+ .bds2121Rating-rating {
1970
1970
  display: inline-flex;
1971
1971
  gap: var(--bds-space_xxxs);
1972
1972
  color: var(--rating_color, var(--bds-color_bg));
1973
1973
  }
1974
- .bds2110Rating-star {
1974
+ .bds2121Rating-star {
1975
1975
  inline-size: 1.5em;
1976
1976
  block-size: 1.5em;
1977
1977
  }
1978
- .bds2110Rating---filled {
1978
+ .bds2121Rating---filled {
1979
1979
  color: var(--rating_color--filled, var(--bds-color_warning));
1980
1980
  }
1981
1981
  }
1982
1982
 
1983
1983
  /* src/components/interaction/Toast/Toast.module.css */
1984
- @layer boostdev.bds2110Toast-component {
1985
- .bds2110Toast-toastContainer {
1984
+ @layer boostdev.bds2121Toast-component {
1985
+ .bds2121Toast-toastContainer {
1986
1986
  position: fixed;
1987
1987
  inset: unset;
1988
1988
  inset-block-end: var(--bds-space_xl);
@@ -1994,9 +1994,9 @@
1994
1994
  padding: 0;
1995
1995
  background: transparent;
1996
1996
  }
1997
- .bds2110Toast-toast {
1997
+ .bds2121Toast-toast {
1998
1998
  padding: var(--bds-space_m) var(--bds-space_l);
1999
- background-color: var(--toast_color, var(--toast_color--variant, var(--bds-color_bg)));
1999
+ background-color: var(--toast_color, var(--toast_color--variant, var(--bds-color_bg--strong, var(--bds-color_bg))));
2000
2000
  color: var(--toast_on-color, var(--toast_on-color--variant, var(--bds-color_on-bg)));
2001
2001
  border-radius: var(--toast_radius, var(--bds-border_radius--s));
2002
2002
  box-shadow: var(--toast_shadow, var(--bds-shadow_s));
@@ -2006,29 +2006,29 @@
2006
2006
  min-inline-size: min(300px, calc(100svw - 2 * var(--bds-space_xl)));
2007
2007
  animation: slideIn var(--bds-animation_duration--fast) var(--bds-animation_easing);
2008
2008
  }
2009
- .bds2110Toast-toast:dir(rtl) {
2009
+ .bds2121Toast-toast:dir(rtl) {
2010
2010
  --toast_slide-offset: -100%;
2011
2011
  }
2012
- .bds2110Toast-toast.bds2110Toast---variant_success {
2012
+ .bds2121Toast-toast.bds2121Toast---variant_success {
2013
2013
  --toast_color--variant: var(--toast_color--success, var(--bds-color_success));
2014
2014
  --toast_on-color--variant: var(--toast_on-color--success, var(--bds-color_on-success));
2015
2015
  }
2016
- .bds2110Toast-toast.bds2110Toast---variant_warning {
2016
+ .bds2121Toast-toast.bds2121Toast---variant_warning {
2017
2017
  --toast_color--variant: var(--toast_color--warning, var(--bds-color_warning));
2018
2018
  --toast_on-color--variant: var(--toast_on-color--warning, var(--bds-color_on-warning));
2019
2019
  }
2020
- .bds2110Toast-toast.bds2110Toast---variant_info {
2020
+ .bds2121Toast-toast.bds2121Toast---variant_info {
2021
2021
  --toast_color--variant: var(--toast_color--info, var(--bds-color_bg--subtle));
2022
2022
  --toast_on-color--variant: var(--toast_on-color--info, var(--bds-color_on-bg--subtle));
2023
2023
  }
2024
- .bds2110Toast-toast.bds2110Toast---variant_error {
2024
+ .bds2121Toast-toast.bds2121Toast---variant_error {
2025
2025
  --toast_color--variant: var(--toast_color--error, var(--bds-color_error));
2026
2026
  --toast_on-color--variant: var(--toast_on-color--error, var(--bds-color_on-error));
2027
2027
  }
2028
- .bds2110Toast-message {
2028
+ .bds2121Toast-message {
2029
2029
  flex: 1;
2030
2030
  }
2031
- .bds2110Toast-closeButton {
2031
+ .bds2121Toast-closeButton {
2032
2032
  position: relative;
2033
2033
  display: flex;
2034
2034
  align-items: center;
@@ -2042,16 +2042,16 @@
2042
2042
  cursor: pointer;
2043
2043
  color: currentcolor;
2044
2044
  }
2045
- .bds2110Toast-closeButton::after {
2045
+ .bds2121Toast-closeButton::after {
2046
2046
  content: "";
2047
2047
  position: absolute;
2048
2048
  inset: -0.75rem;
2049
2049
  }
2050
- .bds2110Toast-closeButton:focus-visible {
2050
+ .bds2121Toast-closeButton:focus-visible {
2051
2051
  outline: var(--bds-outline_default);
2052
2052
  outline-offset: var(--bds-outline_offset);
2053
2053
  }
2054
- .bds2110Toast-closeButton svg {
2054
+ .bds2121Toast-closeButton svg {
2055
2055
  inline-size: 1rem;
2056
2056
  block-size: 1rem;
2057
2057
  }
@@ -2067,25 +2067,25 @@
2067
2067
  }
2068
2068
  }
2069
2069
  @media (prefers-reduced-motion: reduce) {
2070
- .bds2110Toast-toast {
2070
+ .bds2121Toast-toast {
2071
2071
  animation: none;
2072
2072
  }
2073
2073
  }
2074
2074
 
2075
2075
  /* src/components/interaction/form/Checkbox/Checkbox.module.css */
2076
- @layer boostdev.bds2110Checkbox-component {
2077
- .bds2110Checkbox-checkboxGroup {
2076
+ @layer boostdev.bds2121Checkbox-component {
2077
+ .bds2121Checkbox-checkboxGroup {
2078
2078
  --checkbox_size: calc(var(--bds-space_s) * 2);
2079
2079
  --inputSize: var(--checkbox_size);
2080
2080
  display: flex;
2081
2081
  flex-direction: column;
2082
2082
  }
2083
- .bds2110Checkbox-inputWrapper {
2083
+ .bds2121Checkbox-inputWrapper {
2084
2084
  display: flex;
2085
2085
  align-items: stretch;
2086
2086
  gap: var(--checkbox_gap, var(--bds-space_m));
2087
2087
  }
2088
- .bds2110Checkbox-checkbox {
2088
+ .bds2121Checkbox-checkbox {
2089
2089
  margin-block-start: var(--checkbox_offset, 0.25em);
2090
2090
  inline-size: var(--checkbox_size);
2091
2091
  block-size: var(--checkbox_size);
@@ -2101,11 +2101,11 @@
2101
2101
  position: relative;
2102
2102
  transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing), background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
2103
2103
  }
2104
- .bds2110Checkbox-checkbox:checked {
2104
+ .bds2121Checkbox-checkbox:checked {
2105
2105
  background-color: var(--checkbox_color-active, var(--bdc-color_active));
2106
2106
  --bdc_color: var(--checkbox_color-active, var(--bdc-color_active));
2107
2107
  }
2108
- .bds2110Checkbox-checkbox:checked::after {
2108
+ .bds2121Checkbox-checkbox:checked::after {
2109
2109
  content: "";
2110
2110
  position: absolute;
2111
2111
  inset-inline-start: 0.6em;
@@ -2116,40 +2116,40 @@
2116
2116
  border-width: 0 2px 2px 0;
2117
2117
  transform: rotate(45deg);
2118
2118
  }
2119
- .bds2110Checkbox-checkbox:focus {
2119
+ .bds2121Checkbox-checkbox:focus {
2120
2120
  --bdc_color: var(--bdc_color--focus);
2121
2121
  }
2122
- .bds2110Checkbox-checkbox:focus-visible {
2122
+ .bds2121Checkbox-checkbox:focus-visible {
2123
2123
  outline: var(--bds-outline_default);
2124
2124
  outline-offset: var(--bds-outline_offset);
2125
2125
  }
2126
- .bds2110Checkbox-checkbox:disabled {
2126
+ .bds2121Checkbox-checkbox:disabled {
2127
2127
  opacity: 0.5;
2128
2128
  cursor: not-allowed;
2129
2129
  }
2130
- .bds2110Checkbox-checkboxError {
2130
+ .bds2121Checkbox-checkboxError {
2131
2131
  --bdc_color: var(--bdc_color--error);
2132
2132
  }
2133
2133
  }
2134
2134
 
2135
2135
  /* src/components/interaction/form/atoms/Message.module.css */
2136
- @layer boostdev.bds2110Message-component {
2137
- .bds2110Message-error,
2138
- .bds2110Message-hint {
2136
+ @layer boostdev.bds2121Message-component {
2137
+ .bds2121Message-error,
2138
+ .bds2121Message-hint {
2139
2139
  font-size: var(--bds-font_size--body--s);
2140
2140
  margin-inline-start: var(--labelPosition, 0);
2141
2141
  }
2142
- .bds2110Message-error {
2142
+ .bds2121Message-error {
2143
2143
  color: var(--bds-color_error_on-bg);
2144
2144
  }
2145
- .bds2110Message-hint {
2145
+ .bds2121Message-hint {
2146
2146
  font-style: italic;
2147
2147
  }
2148
2148
  }
2149
2149
 
2150
2150
  /* src/components/interaction/form/atoms/Label.module.css */
2151
- @layer boostdev.bds2110Label-component {
2152
- .bds2110Label-label {
2151
+ @layer boostdev.bds2121Label-component {
2152
+ .bds2121Label-label {
2153
2153
  display: flex;
2154
2154
  align-items: center;
2155
2155
  font-family: var(--bds-font_family--body);
@@ -2159,8 +2159,8 @@
2159
2159
  }
2160
2160
 
2161
2161
  /* src/components/interaction/form/atoms/InputContainer.module.css */
2162
- @layer boostdev.bds2110InputContainer-component {
2163
- .bds2110InputContainer-container {
2162
+ @layer boostdev.bds2121InputContainer-component {
2163
+ .bds2121InputContainer-container {
2164
2164
  --labelPosition: calc(var(--inputSize) + var(--bds-space_m));
2165
2165
  display: flex;
2166
2166
  flex-direction: column;
@@ -2169,8 +2169,8 @@
2169
2169
  }
2170
2170
 
2171
2171
  /* src/components/interaction/form/CheckboxGroup/CheckboxGroup.module.css */
2172
- @layer boostdev.bds2110CheckboxGroup-component {
2173
- .bds2110CheckboxGroup-group {
2172
+ @layer boostdev.bds2121CheckboxGroup-component {
2173
+ .bds2121CheckboxGroup-group {
2174
2174
  border: none;
2175
2175
  padding: 0;
2176
2176
  margin: 0;
@@ -2178,7 +2178,7 @@
2178
2178
  flex-direction: column;
2179
2179
  gap: var(--checkboxGroup_gap, var(--bds-space_xs));
2180
2180
  }
2181
- .bds2110CheckboxGroup-legend {
2181
+ .bds2121CheckboxGroup-legend {
2182
2182
  font-family: var(--checkboxGroup_legend-font-family, var(--bds-font_family--body));
2183
2183
  font-size: var(--checkboxGroup_legend-font-size, var(--bds-font_size--body--s));
2184
2184
  font-weight: var(--checkboxGroup_legend-font-weight, var(--bds-font_weight--medium));
@@ -2186,10 +2186,10 @@
2186
2186
  padding: 0;
2187
2187
  margin-block-end: var(--checkboxGroup_legend-gap, var(--bds-space_xs));
2188
2188
  }
2189
- .bds2110CheckboxGroup-required {
2189
+ .bds2121CheckboxGroup-required {
2190
2190
  color: var(--checkboxGroup_required-color, var(--bds-color_error));
2191
2191
  }
2192
- .bds2110CheckboxGroup-requiredLabel {
2192
+ .bds2121CheckboxGroup-requiredLabel {
2193
2193
  position: absolute;
2194
2194
  inline-size: 1px;
2195
2195
  block-size: 1px;
@@ -2200,7 +2200,7 @@
2200
2200
  white-space: nowrap;
2201
2201
  border-width: 0;
2202
2202
  }
2203
- .bds2110CheckboxGroup-items {
2203
+ .bds2121CheckboxGroup-items {
2204
2204
  display: flex;
2205
2205
  flex-direction: column;
2206
2206
  gap: var(--checkboxGroup_items-gap, var(--bds-space_xs));
@@ -2208,17 +2208,17 @@
2208
2208
  }
2209
2209
 
2210
2210
  /* src/components/interaction/form/Combobox/Combobox.module.css */
2211
- @layer boostdev.bds2110Combobox-component {
2212
- .bds2110Combobox-formGroup {
2211
+ @layer boostdev.bds2121Combobox-component {
2212
+ .bds2121Combobox-formGroup {
2213
2213
  display: flex;
2214
2214
  flex-direction: column;
2215
2215
  }
2216
- .bds2110Combobox-inputWrapper {
2216
+ .bds2121Combobox-inputWrapper {
2217
2217
  position: relative;
2218
2218
  display: flex;
2219
2219
  align-items: center;
2220
2220
  }
2221
- .bds2110Combobox-input {
2221
+ .bds2121Combobox-input {
2222
2222
  appearance: none;
2223
2223
  inline-size: 100%;
2224
2224
  font-family: var(--bds-font_family--body);
@@ -2234,21 +2234,21 @@
2234
2234
  color: var(--combobox_color, var(--bds-color_on-bg));
2235
2235
  transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing), background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
2236
2236
  }
2237
- .bds2110Combobox-input:focus {
2237
+ .bds2121Combobox-input:focus {
2238
2238
  --bdc_color: var(--bdc_color--focus);
2239
2239
  }
2240
- .bds2110Combobox-input:focus-visible {
2240
+ .bds2121Combobox-input:focus-visible {
2241
2241
  outline: var(--bds-outline_default);
2242
2242
  outline-offset: var(--bds-outline_offset);
2243
2243
  }
2244
- .bds2110Combobox-input:disabled {
2244
+ .bds2121Combobox-input:disabled {
2245
2245
  opacity: 0.5;
2246
2246
  cursor: not-allowed;
2247
2247
  }
2248
- .bds2110Combobox-inputError {
2248
+ .bds2121Combobox-inputError {
2249
2249
  --bdc_color: var(--bdc_color--error);
2250
2250
  }
2251
- .bds2110Combobox-chevron {
2251
+ .bds2121Combobox-chevron {
2252
2252
  position: absolute;
2253
2253
  inset-inline-end: var(--bds-space_s);
2254
2254
  display: flex;
@@ -2256,11 +2256,11 @@
2256
2256
  pointer-events: none;
2257
2257
  color: var(--combobox_color, var(--bds-color_on-bg));
2258
2258
  }
2259
- .bds2110Combobox-chevron svg {
2259
+ .bds2121Combobox-chevron svg {
2260
2260
  inline-size: 1rem;
2261
2261
  block-size: 1rem;
2262
2262
  }
2263
- .bds2110Combobox-listbox {
2263
+ .bds2121Combobox-listbox {
2264
2264
  position: absolute;
2265
2265
  inset-block-start: calc(100% + var(--bds-space_xxs));
2266
2266
  inset-inline: 0;
@@ -2274,11 +2274,11 @@
2274
2274
  --bdc_color: currentcolor;
2275
2275
  --bdc-outline_radius: var(--bds-border_radius--s);
2276
2276
  border-radius: var(--combobox_listbox-radius, var(--bdc-outline_radius));
2277
- background-color: var(--combobox_listbox-bg, var(--combobox_color_bg, var(--bds-color_bg)));
2277
+ background-color: var(--combobox_listbox-bg, var(--combobox_color_bg, var(--bds-color_bg--strong, var(--bds-color_bg))));
2278
2278
  color: var(--combobox_on-color, var(--bds-color_on-bg));
2279
2279
  box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--combobox_listbox-shadow, var(--bds-shadow_m));
2280
2280
  }
2281
- .bds2110Combobox-option {
2281
+ .bds2121Combobox-option {
2282
2282
  display: flex;
2283
2283
  align-items: center;
2284
2284
  padding: var(--combobox_option-padding-block, var(--bds-space_xs)) var(--combobox_option-padding-inline, var(--bds-space_m));
@@ -2287,29 +2287,29 @@
2287
2287
  cursor: pointer;
2288
2288
  transition: var(--bds-animation_transition);
2289
2289
  }
2290
- .bds2110Combobox-option.bds2110Combobox---highlighted {
2290
+ .bds2121Combobox-option.bds2121Combobox---highlighted {
2291
2291
  background-color: var(--combobox_option-bg--highlighted, var(--bds-color_bg--subtle));
2292
2292
  color: var(--combobox_option-color--highlighted, var(--bds-color_interactive_on-bg));
2293
2293
  }
2294
- .bds2110Combobox-option.bds2110Combobox---selected {
2294
+ .bds2121Combobox-option.bds2121Combobox---selected {
2295
2295
  font-weight: var(--bds-font_weight--semibold);
2296
2296
  }
2297
- .bds2110Combobox-option.bds2110Combobox---disabled {
2297
+ .bds2121Combobox-option.bds2121Combobox---disabled {
2298
2298
  opacity: 0.4;
2299
2299
  cursor: not-allowed;
2300
2300
  }
2301
2301
  }
2302
2302
 
2303
2303
  /* src/components/interaction/form/FieldGroup/FieldGroup.module.css */
2304
- @layer boostdev.bds2110FieldGroup-component {
2305
- .bds2110FieldGroup-fieldGroup {
2304
+ @layer boostdev.bds2121FieldGroup-component {
2305
+ .bds2121FieldGroup-fieldGroup {
2306
2306
  border: 0;
2307
2307
  margin: 0;
2308
2308
  padding: 0;
2309
2309
  min-inline-size: 0;
2310
2310
  --fieldGroup_collapse-threshold: calc( var(--fieldGroup_field-count, 1) * var(--fieldGroup_min-field-width, 12rem) + (var(--fieldGroup_field-count, 1) - 1) * var(--fieldGroup_gap, var(--bds-space_m)) );
2311
2311
  }
2312
- .bds2110FieldGroup-legend {
2312
+ .bds2121FieldGroup-legend {
2313
2313
  inline-size: 100%;
2314
2314
  padding-inline: 0;
2315
2315
  padding-block: var(--fieldGroup_legend-padding-block, var(--bds-space_xs));
@@ -2321,28 +2321,28 @@
2321
2321
  font-weight: var(--fieldGroup_legend-font-weight, var(--bds-font_weight--semibold));
2322
2322
  line-height: var(--fieldGroup_legend-line-height, var(--bds-font_line-height--heading));
2323
2323
  }
2324
- .bds2110FieldGroup-fieldGroup:disabled .bds2110FieldGroup-legend {
2324
+ .bds2121FieldGroup-fieldGroup:disabled .bds2121FieldGroup-legend {
2325
2325
  opacity: 0.5;
2326
2326
  }
2327
- .bds2110FieldGroup-fields {
2327
+ .bds2121FieldGroup-fields {
2328
2328
  display: flex;
2329
2329
  flex-direction: column;
2330
2330
  gap: var(--fieldGroup_gap, var(--bds-space_m));
2331
2331
  }
2332
- .bds2110FieldGroup-fieldGroup.bds2110FieldGroup---variant_horizontal .bds2110FieldGroup-fields {
2332
+ .bds2121FieldGroup-fieldGroup.bds2121FieldGroup---variant_horizontal .bds2121FieldGroup-fields {
2333
2333
  flex-flow: row wrap;
2334
2334
  }
2335
- .bds2110FieldGroup-fieldGroup.bds2110FieldGroup---variant_horizontal .bds2110FieldGroup-fields > * {
2335
+ .bds2121FieldGroup-fieldGroup.bds2121FieldGroup---variant_horizontal .bds2121FieldGroup-fields > * {
2336
2336
  flex: 1 1 var(--fieldGroup_min-field-width, 12rem);
2337
2337
  min-inline-size: 0;
2338
2338
  }
2339
- .bds2110FieldGroup-probeContainer {
2339
+ .bds2121FieldGroup-probeContainer {
2340
2340
  position: relative;
2341
2341
  inline-size: 0;
2342
2342
  block-size: 0;
2343
2343
  overflow: hidden;
2344
2344
  }
2345
- .bds2110FieldGroup-probe {
2345
+ .bds2121FieldGroup-probe {
2346
2346
  position: absolute;
2347
2347
  inset-block-start: 0;
2348
2348
  inset-inline-start: 0;
@@ -2350,28 +2350,28 @@
2350
2350
  inline-size: var(--fieldGroup_collapse-threshold);
2351
2351
  visibility: hidden;
2352
2352
  }
2353
- .bds2110FieldGroup-fieldGroup.bds2110FieldGroup---variant_horizontal[data-collapsed=true] .bds2110FieldGroup-fields {
2353
+ .bds2121FieldGroup-fieldGroup.bds2121FieldGroup---variant_horizontal[data-collapsed=true] .bds2121FieldGroup-fields {
2354
2354
  flex-direction: column;
2355
2355
  }
2356
- .bds2110FieldGroup-fieldGroup.bds2110FieldGroup---variant_horizontal[data-collapsed=true] .bds2110FieldGroup-fields > * {
2356
+ .bds2121FieldGroup-fieldGroup.bds2121FieldGroup---variant_horizontal[data-collapsed=true] .bds2121FieldGroup-fields > * {
2357
2357
  flex: 1 1 auto;
2358
2358
  }
2359
2359
  }
2360
2360
 
2361
2361
  /* src/components/interaction/form/FileInput/FileInput.module.css */
2362
- @layer boostdev.bds2110FileInput-component {
2363
- .bds2110FileInput-formGroup {
2362
+ @layer boostdev.bds2121FileInput-component {
2363
+ .bds2121FileInput-formGroup {
2364
2364
  display: flex;
2365
2365
  flex-direction: column;
2366
2366
  }
2367
- .bds2110FileInput-fieldLabel {
2367
+ .bds2121FileInput-fieldLabel {
2368
2368
  display: flex;
2369
2369
  align-items: center;
2370
2370
  font-family: var(--bds-font_family--body);
2371
2371
  color: var(--bds-color_on-bg);
2372
2372
  margin-block-end: var(--fileInput_label-margin, var(--bds-space_xs));
2373
2373
  }
2374
- .bds2110FileInput-dropZone {
2374
+ .bds2121FileInput-dropZone {
2375
2375
  display: flex;
2376
2376
  flex-direction: column;
2377
2377
  align-items: center;
@@ -2385,40 +2385,40 @@
2385
2385
  text-align: center;
2386
2386
  transition: var(--bds-animation_transition);
2387
2387
  }
2388
- .bds2110FileInput-dropZone:focus-within {
2388
+ .bds2121FileInput-dropZone:focus-within {
2389
2389
  outline: var(--bds-outline_default);
2390
2390
  outline-offset: var(--bds-outline_offset);
2391
2391
  border-color: var(--fileInput_border-color, currentcolor);
2392
2392
  }
2393
- .bds2110FileInput-isDragging {
2393
+ .bds2121FileInput-isDragging {
2394
2394
  border-color: currentcolor;
2395
2395
  background-color: var(--fileInput_bg--dragging, rgb(from currentcolor r g b / 8%));
2396
2396
  }
2397
- .bds2110FileInput-hasError {
2397
+ .bds2121FileInput-hasError {
2398
2398
  border-color: var(--bds-color_error);
2399
2399
  }
2400
- .bds2110FileInput-isDisabled {
2400
+ .bds2121FileInput-isDisabled {
2401
2401
  opacity: 0.5;
2402
2402
  cursor: not-allowed;
2403
2403
  }
2404
- .bds2110FileInput-icon {
2404
+ .bds2121FileInput-icon {
2405
2405
  inline-size: 2rem;
2406
2406
  block-size: 2rem;
2407
2407
  flex-shrink: 0;
2408
2408
  }
2409
- .bds2110FileInput-prompt {
2409
+ .bds2121FileInput-prompt {
2410
2410
  font-size: var(--fileInput_font-size, var(--bds-font_size--body));
2411
2411
  color: var(--bds-color_on-bg);
2412
2412
  }
2413
- .bds2110FileInput-prompt strong {
2413
+ .bds2121FileInput-prompt strong {
2414
2414
  color: var(--bds-color_interactive_on-bg);
2415
2415
  font-weight: var(--bds-font_weight--semibold);
2416
2416
  }
2417
- .bds2110FileInput-acceptHint {
2417
+ .bds2121FileInput-acceptHint {
2418
2418
  font-size: var(--fileInput_font-size--hint, var(--bds-font_size--body--s));
2419
2419
  color: var(--bds-color_on-bg);
2420
2420
  }
2421
- .bds2110FileInput-hiddenInput {
2421
+ .bds2121FileInput-hiddenInput {
2422
2422
  position: absolute;
2423
2423
  inline-size: 1px;
2424
2424
  block-size: 1px;
@@ -2428,7 +2428,7 @@
2428
2428
  border: 0;
2429
2429
  }
2430
2430
  @media (hover: hover) and (pointer: fine) {
2431
- .bds2110FileInput-dropZone:not(.bds2110FileInput-isDisabled):hover {
2431
+ .bds2121FileInput-dropZone:not(.bds2121FileInput-isDisabled):hover {
2432
2432
  border-color: var(--fileInput_border-color--hover, var(--bds-color_interactive));
2433
2433
  background-color: var(--fileInput_bg--hover, rgb(from var(--bds-color_interactive) r g b / 4%));
2434
2434
  }
@@ -2436,13 +2436,13 @@
2436
2436
  }
2437
2437
 
2438
2438
  /* src/components/interaction/form/FormInput/FormInput.module.css */
2439
- @layer boostdev.bds2110FormInput-component {
2440
- .bds2110FormInput-formGroup {
2439
+ @layer boostdev.bds2121FormInput-component {
2440
+ .bds2121FormInput-formGroup {
2441
2441
  --labelPosition: 0;
2442
2442
  display: flex;
2443
2443
  flex-direction: column;
2444
2444
  }
2445
- .bds2110FormInput-input {
2445
+ .bds2121FormInput-input {
2446
2446
  font-family: var(--formInput_font-family, var(--bds-font_family--body));
2447
2447
  font-size: var(--formInput_font-size, var(--bds-font_size--body));
2448
2448
  padding: var(--formInput_padding, var(--bds-space_s));
@@ -2455,29 +2455,29 @@
2455
2455
  background-color: var(--formInput_color_bg, var(--input_color_bg, var(--bds-color_bg)));
2456
2456
  transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing), background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
2457
2457
  }
2458
- .bds2110FormInput-input:focus {
2458
+ .bds2121FormInput-input:focus {
2459
2459
  --bdc_color: var(--bdc_color--focus);
2460
2460
  }
2461
- .bds2110FormInput-input:focus-visible {
2461
+ .bds2121FormInput-input:focus-visible {
2462
2462
  outline: var(--bds-outline_default);
2463
2463
  outline-offset: var(--bds-outline_offset);
2464
2464
  }
2465
- .bds2110FormInput-input:disabled {
2465
+ .bds2121FormInput-input:disabled {
2466
2466
  cursor: not-allowed;
2467
2467
  opacity: 0.5;
2468
2468
  }
2469
- .bds2110FormInput-inputError {
2469
+ .bds2121FormInput-inputError {
2470
2470
  --bdc_color: var(--bdc_color--error);
2471
2471
  }
2472
2472
  }
2473
2473
 
2474
2474
  /* src/components/interaction/form/NumberInput/NumberInput.module.css */
2475
- @layer boostdev.bds2110NumberInput-component {
2476
- .bds2110NumberInput-formGroup {
2475
+ @layer boostdev.bds2121NumberInput-component {
2476
+ .bds2121NumberInput-formGroup {
2477
2477
  display: flex;
2478
2478
  flex-direction: column;
2479
2479
  }
2480
- .bds2110NumberInput-inputRow {
2480
+ .bds2121NumberInput-inputRow {
2481
2481
  display: flex;
2482
2482
  align-items: stretch;
2483
2483
  border: var(--numberInput_border, none);
@@ -2489,14 +2489,14 @@
2489
2489
  overflow: hidden;
2490
2490
  transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing);
2491
2491
  }
2492
- .bds2110NumberInput-inputRow:focus-within {
2492
+ .bds2121NumberInput-inputRow:focus-within {
2493
2493
  --bdc_color: var(--bdc_color--focus);
2494
2494
  }
2495
- .bds2110NumberInput-inputRow:focus-within:has(:focus-visible) {
2495
+ .bds2121NumberInput-inputRow:focus-within:has(:focus-visible) {
2496
2496
  outline: var(--bds-outline_default);
2497
2497
  outline-offset: var(--bds-outline_offset);
2498
2498
  }
2499
- .bds2110NumberInput-input {
2499
+ .bds2121NumberInput-input {
2500
2500
  flex: 1;
2501
2501
  border: none;
2502
2502
  outline: none;
@@ -2509,14 +2509,14 @@
2509
2509
  min-inline-size: 0;
2510
2510
  appearance: textfield;
2511
2511
  }
2512
- .bds2110NumberInput-input::-webkit-inner-spin-button,
2513
- .bds2110NumberInput-input::-webkit-outer-spin-button {
2512
+ .bds2121NumberInput-input::-webkit-inner-spin-button,
2513
+ .bds2121NumberInput-input::-webkit-outer-spin-button {
2514
2514
  appearance: none;
2515
2515
  }
2516
- .bds2110NumberInput-inputError {
2516
+ .bds2121NumberInput-inputError {
2517
2517
  --bdc_color: var(--bdc_color--error);
2518
2518
  }
2519
- .bds2110NumberInput-stepper {
2519
+ .bds2121NumberInput-stepper {
2520
2520
  all: unset;
2521
2521
  display: flex;
2522
2522
  align-items: center;
@@ -2529,25 +2529,25 @@
2529
2529
  transition: var(--bds-animation_transition);
2530
2530
  flex-shrink: 0;
2531
2531
  }
2532
- .bds2110NumberInput-stepper svg {
2532
+ .bds2121NumberInput-stepper svg {
2533
2533
  inline-size: 1rem;
2534
2534
  block-size: 1rem;
2535
2535
  color: var(--numberInput_stepper-color, var(--bds-color_interactive));
2536
2536
  }
2537
- .bds2110NumberInput-stepper:first-child {
2537
+ .bds2121NumberInput-stepper:first-child {
2538
2538
  border-start-start-radius: var(--_radius);
2539
2539
  border-end-start-radius: var(--_radius);
2540
2540
  }
2541
- .bds2110NumberInput-stepper:last-child {
2541
+ .bds2121NumberInput-stepper:last-child {
2542
2542
  border-start-end-radius: var(--_radius);
2543
2543
  border-end-end-radius: var(--_radius);
2544
2544
  }
2545
- .bds2110NumberInput-stepper:disabled {
2545
+ .bds2121NumberInput-stepper:disabled {
2546
2546
  opacity: 0.4;
2547
2547
  cursor: not-allowed;
2548
2548
  }
2549
2549
  @media (hover: hover) and (pointer: fine) {
2550
- .bds2110NumberInput-stepper:not(:disabled):hover {
2550
+ .bds2121NumberInput-stepper:not(:disabled):hover {
2551
2551
  background-color: var(--numberInput_stepper-bg--hover, var(--bds-color_bg--subtle));
2552
2552
  opacity: var(--numberInput_stepper-opacity--hover, 0.7);
2553
2553
  }
@@ -2555,30 +2555,30 @@
2555
2555
  }
2556
2556
 
2557
2557
  /* src/components/interaction/form/Radio/Radio.module.css */
2558
- @layer boostdev.bds2110Radio-component {
2559
- .bds2110Radio-radioGroup {
2558
+ @layer boostdev.bds2121Radio-component {
2559
+ .bds2121Radio-radioGroup {
2560
2560
  --radio_size: calc(var(--bds-space_s) * 2);
2561
2561
  --inputSize: var(--radio_size);
2562
2562
  display: flex;
2563
2563
  flex-direction: column;
2564
2564
  }
2565
- .bds2110Radio-inputWrapper {
2565
+ .bds2121Radio-inputWrapper {
2566
2566
  display: flex;
2567
2567
  align-items: flex-start;
2568
2568
  gap: var(--bds-space_xs);
2569
2569
  }
2570
- .bds2110Radio-textWrapper {
2570
+ .bds2121Radio-textWrapper {
2571
2571
  display: flex;
2572
2572
  flex-direction: column;
2573
2573
  gap: var(--bds-space_xxxs);
2574
2574
  padding-block-start: var(--bds-space_xxxs);
2575
2575
  }
2576
- .bds2110Radio-description {
2576
+ .bds2121Radio-description {
2577
2577
  font-size: var(--bds-font_size--body--s);
2578
2578
  color: var(--radio_description-color, var(--bds-color_on-bg--subtle));
2579
2579
  line-height: var(--bds-font_line-height--body);
2580
2580
  }
2581
- .bds2110Radio-radio {
2581
+ .bds2121Radio-radio {
2582
2582
  flex-shrink: 0;
2583
2583
  margin-block-start: var(--radio_offset, 0.2em);
2584
2584
  inline-size: var(--radio_size);
@@ -2595,7 +2595,7 @@
2595
2595
  position: relative;
2596
2596
  transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing), background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
2597
2597
  }
2598
- .bds2110Radio-radio:checked {
2598
+ .bds2121Radio-radio:checked {
2599
2599
  background:
2600
2600
  radial-gradient(
2601
2601
  circle,
@@ -2603,29 +2603,29 @@
2603
2603
  var(--radio_color_bg, var(--bds-color_bg)) 42%);
2604
2604
  --bdc_color: var(--radio_color-active, var(--bdc-color_active));
2605
2605
  }
2606
- .bds2110Radio-radio:focus {
2606
+ .bds2121Radio-radio:focus {
2607
2607
  --bdc_color: var(--bdc_color--focus);
2608
2608
  }
2609
- .bds2110Radio-radio:focus-visible {
2609
+ .bds2121Radio-radio:focus-visible {
2610
2610
  outline: var(--bds-outline_default);
2611
2611
  outline-offset: var(--bds-outline_offset);
2612
2612
  }
2613
- .bds2110Radio-radio:disabled {
2613
+ .bds2121Radio-radio:disabled {
2614
2614
  cursor: not-allowed;
2615
2615
  opacity: 0.5;
2616
2616
  }
2617
- .bds2110Radio-radio:disabled ~ .bds2110Radio-textWrapper {
2617
+ .bds2121Radio-radio:disabled ~ .bds2121Radio-textWrapper {
2618
2618
  opacity: 0.5;
2619
2619
  cursor: not-allowed;
2620
2620
  }
2621
- .bds2110Radio-radioError {
2621
+ .bds2121Radio-radioError {
2622
2622
  --bdc_color: var(--bdc_color--error);
2623
2623
  }
2624
2624
  }
2625
2625
 
2626
2626
  /* src/components/interaction/form/RadioGroup/RadioGroup.module.css */
2627
- @layer boostdev.bds2110RadioGroup-component {
2628
- .bds2110RadioGroup-group {
2627
+ @layer boostdev.bds2121RadioGroup-component {
2628
+ .bds2121RadioGroup-group {
2629
2629
  border: none;
2630
2630
  padding: 0;
2631
2631
  margin: 0;
@@ -2633,7 +2633,7 @@
2633
2633
  flex-direction: column;
2634
2634
  gap: var(--radioGroup_gap, var(--bds-space_xs));
2635
2635
  }
2636
- .bds2110RadioGroup-legend {
2636
+ .bds2121RadioGroup-legend {
2637
2637
  font-family: var(--radioGroup_legend-font-family, var(--bds-font_family--body));
2638
2638
  font-size: var(--radioGroup_legend-font-size, var(--bds-font_size--body--s));
2639
2639
  font-weight: var(--radioGroup_legend-font-weight, var(--bds-font_weight--medium));
@@ -2641,10 +2641,10 @@
2641
2641
  padding: 0;
2642
2642
  margin-block-end: var(--radioGroup_legend-gap, var(--bds-space_xs));
2643
2643
  }
2644
- .bds2110RadioGroup-required {
2644
+ .bds2121RadioGroup-required {
2645
2645
  color: var(--radioGroup_required-color, var(--bds-color_error));
2646
2646
  }
2647
- .bds2110RadioGroup-requiredLabel {
2647
+ .bds2121RadioGroup-requiredLabel {
2648
2648
  position: absolute;
2649
2649
  inline-size: 1px;
2650
2650
  block-size: 1px;
@@ -2655,7 +2655,7 @@
2655
2655
  white-space: nowrap;
2656
2656
  border-width: 0;
2657
2657
  }
2658
- .bds2110RadioGroup-items {
2658
+ .bds2121RadioGroup-items {
2659
2659
  display: flex;
2660
2660
  flex-direction: column;
2661
2661
  gap: var(--radioGroup_items-gap, var(--bds-space_xs));
@@ -2663,8 +2663,8 @@
2663
2663
  }
2664
2664
 
2665
2665
  /* src/components/interaction/form/SegmentedControl/SegmentedControl.module.css */
2666
- @layer boostdev.bds2110SegmentedControl-component {
2667
- .bds2110SegmentedControl-control {
2666
+ @layer boostdev.bds2121SegmentedControl-component {
2667
+ .bds2121SegmentedControl-control {
2668
2668
  position: relative;
2669
2669
  display: inline-grid;
2670
2670
  grid-auto-flow: column;
@@ -2675,11 +2675,11 @@
2675
2675
  gap: 0;
2676
2676
  --control_dir: 1;
2677
2677
  }
2678
- [dir=rtl] .bds2110SegmentedControl-control,
2679
- .bds2110SegmentedControl-control[dir=rtl] {
2678
+ [dir=rtl] .bds2121SegmentedControl-control,
2679
+ .bds2121SegmentedControl-control[dir=rtl] {
2680
2680
  --control_dir: -1;
2681
2681
  }
2682
- .bds2110SegmentedControl-thumb {
2682
+ .bds2121SegmentedControl-thumb {
2683
2683
  position: absolute;
2684
2684
  inset-block: var(--control_track-pad, var(--bds-space_xxs));
2685
2685
  inset-inline-start: var(--control_track-pad, var(--bds-space_xxs));
@@ -2691,7 +2691,7 @@
2691
2691
  transform: translateX(calc(var(--control_selected-index, 0) * var(--control_dir, 1) * 100%));
2692
2692
  transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
2693
2693
  }
2694
- .bds2110SegmentedControl-indicator {
2694
+ .bds2121SegmentedControl-indicator {
2695
2695
  position: absolute;
2696
2696
  inset-block: var(--control_track-pad, var(--bds-space_xxs));
2697
2697
  inset-inline-start: var(--control_track-pad, var(--bds-space_xxs));
@@ -2703,7 +2703,7 @@
2703
2703
  transform: translateX(calc(var(--control_selected-index, 0) * var(--control_dir, 1) * 100%));
2704
2704
  transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
2705
2705
  }
2706
- .bds2110SegmentedControl-item {
2706
+ .bds2121SegmentedControl-item {
2707
2707
  position: relative;
2708
2708
  z-index: 1;
2709
2709
  display: flex;
@@ -2724,73 +2724,73 @@
2724
2724
  border: none;
2725
2725
  outline: none;
2726
2726
  }
2727
- .bds2110SegmentedControl-item:focus-visible {
2727
+ .bds2121SegmentedControl-item:focus-visible {
2728
2728
  outline: var(--bds-outline_default);
2729
2729
  outline-offset: calc(var(--bds-outline_offset) * -1);
2730
2730
  border-radius: var(--control_thumb-radius, var(--bds-border_radius--full));
2731
2731
  }
2732
- .bds2110SegmentedControl-item.bds2110SegmentedControl---active {
2732
+ .bds2121SegmentedControl-item.bds2121SegmentedControl---active {
2733
2733
  color: var(--control_label-color--active, var(--bds-color_on-interactive));
2734
2734
  }
2735
- .bds2110SegmentedControl-item.bds2110SegmentedControl---disabled {
2735
+ .bds2121SegmentedControl-item.bds2121SegmentedControl---disabled {
2736
2736
  opacity: 0.5;
2737
2737
  cursor: not-allowed;
2738
2738
  pointer-events: none;
2739
2739
  }
2740
- .bds2110SegmentedControl-control.bds2110SegmentedControl---size_small .bds2110SegmentedControl-item {
2740
+ .bds2121SegmentedControl-control.bds2121SegmentedControl---size_small .bds2121SegmentedControl-item {
2741
2741
  padding: var(--bds-space_xxs) var(--bds-space_s);
2742
2742
  font-size: var(--bds-font_size--body--s);
2743
2743
  }
2744
- .bds2110SegmentedControl-control.bds2110SegmentedControl---size_large .bds2110SegmentedControl-item {
2744
+ .bds2121SegmentedControl-control.bds2121SegmentedControl---size_large .bds2121SegmentedControl-item {
2745
2745
  padding: var(--bds-space_s) var(--bds-space_m);
2746
2746
  white-space: normal;
2747
2747
  text-align: center;
2748
2748
  }
2749
- .bds2110SegmentedControl-control.bds2110SegmentedControl---variant_outline {
2749
+ .bds2121SegmentedControl-control.bds2121SegmentedControl---variant_outline {
2750
2750
  --control_label-color--active: var(--bds-color_interactive);
2751
2751
  }
2752
- .bds2110SegmentedControl-control.bds2110SegmentedControl---variant_outline .bds2110SegmentedControl-thumb {
2752
+ .bds2121SegmentedControl-control.bds2121SegmentedControl---variant_outline .bds2121SegmentedControl-thumb {
2753
2753
  display: none;
2754
2754
  }
2755
- .bds2110SegmentedControl-control.bds2110SegmentedControl---variant_outline .bds2110SegmentedControl-item {
2755
+ .bds2121SegmentedControl-control.bds2121SegmentedControl---variant_outline .bds2121SegmentedControl-item {
2756
2756
  background-color: var(--control_item-bg, transparent);
2757
2757
  }
2758
- .bds2110SegmentedControl-control.bds2110SegmentedControl---variant_outline .bds2110SegmentedControl-item.bds2110SegmentedControl---active {
2758
+ .bds2121SegmentedControl-control.bds2121SegmentedControl---variant_outline .bds2121SegmentedControl-item.bds2121SegmentedControl---active {
2759
2759
  background-color: var(--control_item-bg--active, var(--bds-color_bg));
2760
2760
  }
2761
- .bds2110SegmentedControl-control.bds2110SegmentedControl---variant_outline .bds2110SegmentedControl-indicator {
2761
+ .bds2121SegmentedControl-control.bds2121SegmentedControl---variant_outline .bds2121SegmentedControl-indicator {
2762
2762
  display: block;
2763
2763
  box-shadow: inset 0 0 0 var(--control_indicator-width, 2px) var(--control_indicator-color, var(--bds-color_interactive));
2764
2764
  }
2765
- .bds2110SegmentedControl-control.bds2110SegmentedControl---no-selection .bds2110SegmentedControl-thumb,
2766
- .bds2110SegmentedControl-control.bds2110SegmentedControl---no-selection .bds2110SegmentedControl-indicator {
2765
+ .bds2121SegmentedControl-control.bds2121SegmentedControl---no-selection .bds2121SegmentedControl-thumb,
2766
+ .bds2121SegmentedControl-control.bds2121SegmentedControl---no-selection .bds2121SegmentedControl-indicator {
2767
2767
  display: none;
2768
2768
  }
2769
2769
  @media (hover: hover) and (pointer: fine) {
2770
- .bds2110SegmentedControl-item:not(.bds2110SegmentedControl---active, .bds2110SegmentedControl---disabled):hover {
2770
+ .bds2121SegmentedControl-item:not(.bds2121SegmentedControl---active, .bds2121SegmentedControl---disabled):hover {
2771
2771
  color: var(--control_label-color--hover, var(--bds-color_on-bg));
2772
2772
  }
2773
2773
  }
2774
2774
  @media (prefers-reduced-motion: reduce) {
2775
- .bds2110SegmentedControl-thumb,
2776
- .bds2110SegmentedControl-indicator {
2775
+ .bds2121SegmentedControl-thumb,
2776
+ .bds2121SegmentedControl-indicator {
2777
2777
  transition: none;
2778
2778
  }
2779
2779
  }
2780
2780
  }
2781
2781
 
2782
2782
  /* src/components/interaction/form/Select/Select.module.css */
2783
- @layer boostdev.bds2110Select-component {
2784
- .bds2110Select-formGroup {
2783
+ @layer boostdev.bds2121Select-component {
2784
+ .bds2121Select-formGroup {
2785
2785
  display: flex;
2786
2786
  flex-direction: column;
2787
2787
  }
2788
- .bds2110Select-selectWrapper {
2788
+ .bds2121Select-selectWrapper {
2789
2789
  position: relative;
2790
2790
  display: flex;
2791
2791
  align-items: center;
2792
2792
  }
2793
- .bds2110Select-select {
2793
+ .bds2121Select-select {
2794
2794
  appearance: none;
2795
2795
  inline-size: 100%;
2796
2796
  font-family: var(--bds-font_family--body);
@@ -2807,21 +2807,21 @@
2807
2807
  cursor: pointer;
2808
2808
  transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing), background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
2809
2809
  }
2810
- .bds2110Select-select:focus {
2810
+ .bds2121Select-select:focus {
2811
2811
  --bdc_color: var(--bdc_color--focus);
2812
2812
  }
2813
- .bds2110Select-select:focus-visible {
2813
+ .bds2121Select-select:focus-visible {
2814
2814
  outline: var(--bds-outline_default);
2815
2815
  outline-offset: var(--bds-outline_offset);
2816
2816
  }
2817
- .bds2110Select-select:disabled {
2817
+ .bds2121Select-select:disabled {
2818
2818
  opacity: 0.5;
2819
2819
  cursor: not-allowed;
2820
2820
  }
2821
- .bds2110Select-selectError {
2821
+ .bds2121Select-selectError {
2822
2822
  --bdc_color: var(--bdc_color--error);
2823
2823
  }
2824
- .bds2110Select-chevron {
2824
+ .bds2121Select-chevron {
2825
2825
  position: absolute;
2826
2826
  inset-inline-end: var(--bds-space_s);
2827
2827
  display: flex;
@@ -2829,30 +2829,30 @@
2829
2829
  pointer-events: none;
2830
2830
  color: var(--select_chevron-color, var(--bds-color_interactive));
2831
2831
  }
2832
- .bds2110Select-chevron svg {
2832
+ .bds2121Select-chevron svg {
2833
2833
  inline-size: var(--select_chevron-size, 1rem);
2834
2834
  block-size: var(--select_chevron-size, 1rem);
2835
2835
  }
2836
2836
  }
2837
2837
 
2838
2838
  /* src/components/interaction/form/Slider/Slider.module.css */
2839
- @layer boostdev.bds2110Slider-component {
2840
- .bds2110Slider-formGroup {
2839
+ @layer boostdev.bds2121Slider-component {
2840
+ .bds2121Slider-formGroup {
2841
2841
  display: flex;
2842
2842
  flex-direction: column;
2843
2843
  gap: var(--bds-space_xxs);
2844
2844
  }
2845
- .bds2110Slider-labelRow {
2845
+ .bds2121Slider-labelRow {
2846
2846
  display: flex;
2847
2847
  justify-content: space-between;
2848
2848
  align-items: baseline;
2849
2849
  }
2850
- .bds2110Slider-value {
2850
+ .bds2121Slider-value {
2851
2851
  font-size: var(--bds-font_size--body--s);
2852
2852
  font-variant-numeric: tabular-nums;
2853
2853
  color: var(--bds-color_on-bg--subtle);
2854
2854
  }
2855
- .bds2110Slider-slider {
2855
+ .bds2121Slider-slider {
2856
2856
  --slider_fill: 0%;
2857
2857
  color: var(--slider_color, var(--bds-color_on-bg));
2858
2858
  appearance: none;
@@ -2869,7 +2869,7 @@
2869
2869
  cursor: pointer;
2870
2870
  transition: var(--bds-animation_transition);
2871
2871
  }
2872
- .bds2110Slider-slider:dir(rtl) {
2872
+ .bds2121Slider-slider:dir(rtl) {
2873
2873
  background:
2874
2874
  linear-gradient(
2875
2875
  to left,
@@ -2878,16 +2878,16 @@
2878
2878
  var(--slider_track-bg, var(--bds-color_bg--subtle)) var(--slider_fill),
2879
2879
  var(--slider_track-bg, var(--bds-color_bg--subtle)) 100%);
2880
2880
  }
2881
- .bds2110Slider-slider:focus-visible {
2881
+ .bds2121Slider-slider:focus-visible {
2882
2882
  outline: var(--bds-outline_default);
2883
2883
  outline-offset: var(--bds-outline_offset);
2884
2884
  border-radius: var(--slider_track-radius, var(--bds-border_radius--full));
2885
2885
  }
2886
- .bds2110Slider-slider:disabled {
2886
+ .bds2121Slider-slider:disabled {
2887
2887
  opacity: 0.4;
2888
2888
  cursor: not-allowed;
2889
2889
  }
2890
- .bds2110Slider-slider::-webkit-slider-thumb {
2890
+ .bds2121Slider-slider::-webkit-slider-thumb {
2891
2891
  appearance: none;
2892
2892
  inline-size: var(--slider_thumb-size, calc(var(--bds-space_s) * 2));
2893
2893
  block-size: var(--slider_thumb-size, calc(var(--bds-space_s) * 2));
@@ -2897,7 +2897,7 @@
2897
2897
  transition: var(--bds-animation_transition);
2898
2898
  cursor: pointer;
2899
2899
  }
2900
- .bds2110Slider-slider::-moz-range-thumb {
2900
+ .bds2121Slider-slider::-moz-range-thumb {
2901
2901
  inline-size: var(--slider_thumb-size, calc(var(--bds-space_s) * 2));
2902
2902
  block-size: var(--slider_thumb-size, calc(var(--bds-space_s) * 2));
2903
2903
  border: none;
@@ -2906,7 +2906,7 @@
2906
2906
  box-shadow: var(--bds-shadow_s);
2907
2907
  cursor: pointer;
2908
2908
  }
2909
- .bds2110Slider-sliderError {
2909
+ .bds2121Slider-sliderError {
2910
2910
  background:
2911
2911
  linear-gradient(
2912
2912
  to right,
@@ -2915,7 +2915,7 @@
2915
2915
  var(--slider_track-bg, var(--bds-color_bg--subtle)) var(--slider_fill),
2916
2916
  var(--slider_track-bg, var(--bds-color_bg--subtle)) 100%);
2917
2917
  }
2918
- .bds2110Slider-sliderError:dir(rtl) {
2918
+ .bds2121Slider-sliderError:dir(rtl) {
2919
2919
  background:
2920
2920
  linear-gradient(
2921
2921
  to left,
@@ -2924,43 +2924,43 @@
2924
2924
  var(--slider_track-bg, var(--bds-color_bg--subtle)) var(--slider_fill),
2925
2925
  var(--slider_track-bg, var(--bds-color_bg--subtle)) 100%);
2926
2926
  }
2927
- .bds2110Slider-sliderError::-webkit-slider-thumb {
2927
+ .bds2121Slider-sliderError::-webkit-slider-thumb {
2928
2928
  background-color: var(--slider_color--error, var(--bds-color_error));
2929
2929
  }
2930
- .bds2110Slider-sliderError::-moz-range-thumb {
2930
+ .bds2121Slider-sliderError::-moz-range-thumb {
2931
2931
  background-color: var(--slider_color--error, var(--bds-color_error));
2932
2932
  }
2933
2933
  @media (prefers-reduced-motion: reduce) {
2934
- .bds2110Slider-slider,
2935
- .bds2110Slider-slider::-webkit-slider-thumb,
2936
- .bds2110Slider-slider::-moz-range-thumb {
2934
+ .bds2121Slider-slider,
2935
+ .bds2121Slider-slider::-webkit-slider-thumb,
2936
+ .bds2121Slider-slider::-moz-range-thumb {
2937
2937
  transition: none;
2938
2938
  }
2939
2939
  }
2940
2940
  }
2941
2941
 
2942
2942
  /* src/components/interaction/form/Switch/Switch.module.css */
2943
- @layer boostdev.bds2110Switch-component {
2944
- .bds2110Switch-switchGroup {
2943
+ @layer boostdev.bds2121Switch-component {
2944
+ .bds2121Switch-switchGroup {
2945
2945
  color: var(--switch_color, var(--bds-color_on-bg));
2946
2946
  display: flex;
2947
2947
  flex-direction: column;
2948
2948
  }
2949
- .bds2110Switch-switchGroup.bds2110Switch---size_small {
2949
+ .bds2121Switch-switchGroup.bds2121Switch---size_small {
2950
2950
  --switch_thumb-size: 1em;
2951
2951
  }
2952
- .bds2110Switch-switchGroup.bds2110Switch---size_medium {
2952
+ .bds2121Switch-switchGroup.bds2121Switch---size_medium {
2953
2953
  --switch_thumb-size: 1.25em;
2954
2954
  }
2955
- .bds2110Switch-switchGroup.bds2110Switch---size_large {
2955
+ .bds2121Switch-switchGroup.bds2121Switch---size_large {
2956
2956
  --switch_thumb-size: 1.5em;
2957
2957
  }
2958
- .bds2110Switch-inputWrapper {
2958
+ .bds2121Switch-inputWrapper {
2959
2959
  display: flex;
2960
2960
  align-items: center;
2961
2961
  gap: var(--bds-space_xs);
2962
2962
  }
2963
- .bds2110Switch-trackWrapper {
2963
+ .bds2121Switch-trackWrapper {
2964
2964
  position: relative;
2965
2965
  display: inline-flex;
2966
2966
  align-items: center;
@@ -2968,7 +2968,7 @@
2968
2968
  inline-size: calc(var(--switch_thumb-size, 1.25em) * 2 + var(--switch_track-pad, var(--bds-space_xxxs)) * 2);
2969
2969
  block-size: calc(var(--switch_thumb-size, 1.25em) + var(--switch_track-pad, var(--bds-space_xxxs)) * 2);
2970
2970
  }
2971
- .bds2110Switch-switch {
2971
+ .bds2121Switch-switch {
2972
2972
  position: absolute;
2973
2973
  inset: 0;
2974
2974
  appearance: none;
@@ -2979,10 +2979,10 @@
2979
2979
  cursor: pointer;
2980
2980
  z-index: 1;
2981
2981
  }
2982
- .bds2110Switch-switch:disabled {
2982
+ .bds2121Switch-switch:disabled {
2983
2983
  cursor: not-allowed;
2984
2984
  }
2985
- .bds2110Switch-track {
2985
+ .bds2121Switch-track {
2986
2986
  display: inline-flex;
2987
2987
  align-items: center;
2988
2988
  inline-size: calc(var(--switch_thumb-size, 1.25em) * 2 + var(--switch_track-pad, var(--bds-space_xxxs)) * 2);
@@ -2998,7 +2998,7 @@
2998
2998
  transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
2999
2999
  --bdc_color: var(--switch_thumb-bg, var(--bds-color_interactive));
3000
3000
  }
3001
- .bds2110Switch-thumb {
3001
+ .bds2121Switch-thumb {
3002
3002
  display: block;
3003
3003
  inline-size: var(--switch_thumb-size, 1.25em);
3004
3004
  block-size: var(--switch_thumb-size, 1.25em);
@@ -3008,43 +3008,43 @@
3008
3008
  transition: var(--bds-animation_transition);
3009
3009
  transform: translateX(0);
3010
3010
  }
3011
- .bds2110Switch-switch.bds2110Switch-switchError + .bds2110Switch-track {
3011
+ .bds2121Switch-switch.bds2121Switch-switchError + .bds2121Switch-track {
3012
3012
  --bdc_color: var(--switch_border-color--error, var(--bds-color_error));
3013
3013
  }
3014
- .bds2110Switch-switch:checked + .bds2110Switch-track {
3014
+ .bds2121Switch-switch:checked + .bds2121Switch-track {
3015
3015
  background-color: var(--switch_track-bg--active, var(--bdc-color_active--subtle));
3016
3016
  --bdc_color: var(--switch_thumb-bg--active, var(--bds-color_interactive));
3017
3017
  }
3018
- .bds2110Switch-switch:checked + .bds2110Switch-track .bds2110Switch-thumb {
3018
+ .bds2121Switch-switch:checked + .bds2121Switch-track .bds2121Switch-thumb {
3019
3019
  background-color: var(--switch_thumb-bg--active, var(--bds-color_interactive));
3020
3020
  transform: translateX(var(--switch_thumb-size, 1.25em));
3021
3021
  }
3022
- [dir=rtl] .bds2110Switch-switch:checked + .bds2110Switch-track .bds2110Switch-thumb {
3022
+ [dir=rtl] .bds2121Switch-switch:checked + .bds2121Switch-track .bds2121Switch-thumb {
3023
3023
  transform: translateX(calc(var(--switch_thumb-size, 1.25em) * -1));
3024
3024
  }
3025
- .bds2110Switch-switch:focus-visible + .bds2110Switch-track {
3025
+ .bds2121Switch-switch:focus-visible + .bds2121Switch-track {
3026
3026
  outline: var(--bds-outline_default);
3027
3027
  outline-offset: var(--bds-outline_offset);
3028
3028
  border-radius: var(--switch_track-radius, var(--bds-border_radius--full));
3029
3029
  }
3030
- .bds2110Switch-switch:disabled + .bds2110Switch-track {
3030
+ .bds2121Switch-switch:disabled + .bds2121Switch-track {
3031
3031
  opacity: 0.4;
3032
3032
  }
3033
3033
  @media (prefers-reduced-motion: reduce) {
3034
- .bds2110Switch-track,
3035
- .bds2110Switch-thumb {
3034
+ .bds2121Switch-track,
3035
+ .bds2121Switch-thumb {
3036
3036
  transition: none;
3037
3037
  }
3038
3038
  }
3039
3039
  }
3040
3040
 
3041
3041
  /* src/components/interaction/form/Textarea/Textarea.module.css */
3042
- @layer boostdev.bds2110Textarea-component {
3043
- .bds2110Textarea-formGroup {
3042
+ @layer boostdev.bds2121Textarea-component {
3043
+ .bds2121Textarea-formGroup {
3044
3044
  display: flex;
3045
3045
  flex-direction: column;
3046
3046
  }
3047
- .bds2110Textarea-textarea {
3047
+ .bds2121Textarea-textarea {
3048
3048
  font-family: var(--textarea_font-family, var(--bds-font_family--body));
3049
3049
  font-size: var(--textarea_font-size, var(--bds-font_size--body));
3050
3050
  line-height: var(--textarea_line-height, var(--bds-font_line-height--body));
@@ -3060,65 +3060,65 @@
3060
3060
  min-block-size: var(--textarea_min-block-size, calc(var(--bds-space_m) * 5));
3061
3061
  transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing), background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
3062
3062
  }
3063
- .bds2110Textarea-textarea:focus {
3063
+ .bds2121Textarea-textarea:focus {
3064
3064
  --bdc_color: var(--bdc_color--focus);
3065
3065
  }
3066
- .bds2110Textarea-textarea:focus-visible {
3066
+ .bds2121Textarea-textarea:focus-visible {
3067
3067
  outline: var(--bds-outline_default);
3068
3068
  outline-offset: var(--bds-outline_offset);
3069
3069
  }
3070
- .bds2110Textarea-textarea:disabled {
3070
+ .bds2121Textarea-textarea:disabled {
3071
3071
  opacity: 0.5;
3072
3072
  cursor: not-allowed;
3073
3073
  resize: none;
3074
3074
  }
3075
- .bds2110Textarea-textareaError {
3075
+ .bds2121Textarea-textareaError {
3076
3076
  --bdc_color: var(--bdc_color--error);
3077
3077
  }
3078
3078
  }
3079
3079
 
3080
3080
  /* src/components/layout/ButtonGroup/ButtonGroup.module.css */
3081
- @layer boostdev.bds2110ButtonGroup-component {
3082
- .bds2110ButtonGroup-buttonGroup {
3081
+ @layer boostdev.bds2121ButtonGroup-component {
3082
+ .bds2121ButtonGroup-buttonGroup {
3083
3083
  container-type: inline-size;
3084
3084
  container-name: button-group;
3085
3085
  grid-column: var(--bds-grid_span-100);
3086
3086
  inline-size: 100%;
3087
3087
  }
3088
- .bds2110ButtonGroup-buttonGroup .bds2110ButtonGroup-container {
3088
+ .bds2121ButtonGroup-buttonGroup .bds2121ButtonGroup-container {
3089
3089
  position: relative;
3090
3090
  display: flex;
3091
3091
  flex-direction: column-reverse;
3092
3092
  gap: var(--buttonGroup_gap, var(--bds-space_l));
3093
3093
  align-items: center;
3094
3094
  }
3095
- .bds2110ButtonGroup-buttonGroup.bds2110ButtonGroup---variant_card .bds2110ButtonGroup-container {
3095
+ .bds2121ButtonGroup-buttonGroup.bds2121ButtonGroup---variant_card .bds2121ButtonGroup-container {
3096
3096
  align-items: stretch;
3097
3097
  }
3098
- .bds2110ButtonGroup-buttonGroup.bds2110ButtonGroup---variant_flow .bds2110ButtonGroup-container,
3099
- .bds2110ButtonGroup-buttonGroup.bds2110ButtonGroup---variant_modal .bds2110ButtonGroup-container {
3098
+ .bds2121ButtonGroup-buttonGroup.bds2121ButtonGroup---variant_flow .bds2121ButtonGroup-container,
3099
+ .bds2121ButtonGroup-buttonGroup.bds2121ButtonGroup---variant_modal .bds2121ButtonGroup-container {
3100
3100
  align-items: center;
3101
3101
  }
3102
- .bds2110ButtonGroup-buttonGroup.bds2110ButtonGroup---variant_content .bds2110ButtonGroup-container {
3102
+ .bds2121ButtonGroup-buttonGroup.bds2121ButtonGroup---variant_content .bds2121ButtonGroup-container {
3103
3103
  align-items: flex-start;
3104
3104
  }
3105
3105
  @supports (contain: inline-size) {
3106
3106
  @container button-group (min-width: 30rem) {
3107
- .bds2110ButtonGroup-buttonGroup .bds2110ButtonGroup-container {
3107
+ .bds2121ButtonGroup-buttonGroup .bds2121ButtonGroup-container {
3108
3108
  flex-direction: row;
3109
3109
  justify-content: space-between;
3110
3110
  }
3111
- .bds2110ButtonGroup-buttonGroup.bds2110ButtonGroup---variant_modal .bds2110ButtonGroup-container > :first-child:last-child,
3112
- .bds2110ButtonGroup-buttonGroup.bds2110ButtonGroup---variant_flow .bds2110ButtonGroup-container > :first-child:last-child {
3111
+ .bds2121ButtonGroup-buttonGroup.bds2121ButtonGroup---variant_modal .bds2121ButtonGroup-container > :first-child:last-child,
3112
+ .bds2121ButtonGroup-buttonGroup.bds2121ButtonGroup---variant_flow .bds2121ButtonGroup-container > :first-child:last-child {
3113
3113
  margin-inline-start: auto;
3114
3114
  }
3115
- .bds2110ButtonGroup-buttonGroup.bds2110ButtonGroup---variant_card .bds2110ButtonGroup-container {
3115
+ .bds2121ButtonGroup-buttonGroup.bds2121ButtonGroup---variant_card .bds2121ButtonGroup-container {
3116
3116
  justify-content: center;
3117
3117
  }
3118
- .bds2110ButtonGroup-buttonGroup.bds2110ButtonGroup---variant_modal .bds2110ButtonGroup-container {
3118
+ .bds2121ButtonGroup-buttonGroup.bds2121ButtonGroup---variant_modal .bds2121ButtonGroup-container {
3119
3119
  justify-content: flex-end;
3120
3120
  }
3121
- .bds2110ButtonGroup-buttonGroup.bds2110ButtonGroup---variant_content .bds2110ButtonGroup-container {
3121
+ .bds2121ButtonGroup-buttonGroup.bds2121ButtonGroup---variant_content .bds2121ButtonGroup-container {
3122
3122
  justify-content: flex-start;
3123
3123
  align-items: center;
3124
3124
  }
@@ -3127,199 +3127,199 @@
3127
3127
  }
3128
3128
 
3129
3129
  /* src/components/layout/Card/Card.module.css */
3130
- @layer boostdev.bds2110Card-component {
3131
- .bds2110Card-card {
3132
- background-color: var(--card_color, var(--bds-color_bg));
3130
+ @layer boostdev.bds2121Card-component {
3131
+ .bds2121Card-card {
3132
+ background-color: var(--card_color, var(--bds-color_bg--strong, var(--bds-color_bg)));
3133
3133
  color: var(--card_on-color, var(--bds-color_on-bg));
3134
3134
  border-radius: var(--card_radius, var(--bds-border_radius--m));
3135
3135
  transition: var(--card_transition, var(--bds-animation_transition));
3136
3136
  position: relative;
3137
3137
  }
3138
- .bds2110Card-card:is(button) {
3138
+ .bds2121Card-card:is(button) {
3139
3139
  border: none;
3140
3140
  font: inherit;
3141
3141
  text-align: inherit;
3142
3142
  display: block;
3143
3143
  inline-size: 100%;
3144
3144
  }
3145
- .bds2110Card-card.bds2110Card---default {
3145
+ .bds2121Card-card.bds2121Card---default {
3146
3146
  box-shadow: var(--card_shadow--default, var(--bds-shadow_s));
3147
3147
  }
3148
- .bds2110Card-card.bds2110Card---elevated {
3148
+ .bds2121Card-card.bds2121Card---elevated {
3149
3149
  box-shadow: var(--card_shadow--elevated, var(--bds-shadow_m));
3150
3150
  }
3151
- .bds2110Card-card.bds2110Card---outlined {
3151
+ .bds2121Card-card.bds2121Card---outlined {
3152
3152
  border: var(--card_border, none);
3153
3153
  --bdc_color: currentcolor;
3154
3154
  box-shadow: var(--card_shadow--outlined, inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--bds-shadow_s));
3155
3155
  }
3156
- .bds2110Card-card.bds2110Card---clickable {
3156
+ .bds2121Card-card.bds2121Card---clickable {
3157
3157
  cursor: pointer;
3158
3158
  }
3159
- .bds2110Card-card.bds2110Card---padding-none {
3159
+ .bds2121Card-card.bds2121Card---padding-none {
3160
3160
  padding: var(--card_padding, 0);
3161
3161
  }
3162
- .bds2110Card-card.bds2110Card---padding-small {
3162
+ .bds2121Card-card.bds2121Card---padding-small {
3163
3163
  padding: var(--card_padding, var(--bds-space_s));
3164
3164
  }
3165
- .bds2110Card-card.bds2110Card---padding-medium {
3165
+ .bds2121Card-card.bds2121Card---padding-medium {
3166
3166
  padding: var(--card_padding, var(--bds-space_m));
3167
3167
  }
3168
- .bds2110Card-card.bds2110Card---padding-large {
3168
+ .bds2121Card-card.bds2121Card---padding-large {
3169
3169
  padding: var(--card_padding, var(--bds-space_l));
3170
3170
  }
3171
- .bds2110Card-card.bds2110Card---padding-extra-large {
3171
+ .bds2121Card-card.bds2121Card---padding-extra-large {
3172
3172
  padding: var(--card_padding, var(--bds-space_xl));
3173
3173
  }
3174
- .bds2110Card-card.bds2110Card---text-start {
3174
+ .bds2121Card-card.bds2121Card---text-start {
3175
3175
  text-align: start;
3176
3176
  }
3177
- .bds2110Card-card.bds2110Card---text-center {
3177
+ .bds2121Card-card.bds2121Card---text-center {
3178
3178
  text-align: center;
3179
3179
  }
3180
- .bds2110Card-card.bds2110Card---text-end {
3180
+ .bds2121Card-card.bds2121Card---text-end {
3181
3181
  text-align: end;
3182
3182
  }
3183
- .bds2110Card-card.bds2110Card---clickable:focus-visible {
3183
+ .bds2121Card-card.bds2121Card---clickable:focus-visible {
3184
3184
  outline: var(--bds-outline_default);
3185
3185
  outline-offset: var(--bds-outline_offset);
3186
3186
  }
3187
- .bds2110Card-card.bds2110Card---clickable:active {
3187
+ .bds2121Card-card.bds2121Card---clickable:active {
3188
3188
  transform: translateY(0);
3189
3189
  box-shadow: var(--card_shadow--active, var(--bds-shadow_s));
3190
3190
  }
3191
3191
  @media (hover: hover) and (pointer: fine) {
3192
- .bds2110Card-card.bds2110Card---clickable:hover {
3192
+ .bds2121Card-card.bds2121Card---clickable:hover {
3193
3193
  transform: translateY(-2px);
3194
3194
  box-shadow: var(--card_shadow--clickable-hover, var(--bds-shadow_xl));
3195
3195
  }
3196
- .bds2110Card-card.bds2110Card---default:hover {
3196
+ .bds2121Card-card.bds2121Card---default:hover {
3197
3197
  box-shadow: var(--card_shadow--default-hover, var(--bds-shadow_m));
3198
3198
  }
3199
- .bds2110Card-card.bds2110Card---elevated:hover {
3199
+ .bds2121Card-card.bds2121Card---elevated:hover {
3200
3200
  box-shadow: var(--card_shadow--elevated-hover, var(--bds-shadow_2xl));
3201
3201
  }
3202
- .bds2110Card-card.bds2110Card---outlined:hover {
3202
+ .bds2121Card-card.bds2121Card---outlined:hover {
3203
3203
  box-shadow: var(--card_shadow--outlined-hover, var(--bds-shadow_s));
3204
3204
  }
3205
3205
  }
3206
3206
  @media (prefers-reduced-motion: reduce) {
3207
- .bds2110Card-card {
3207
+ .bds2121Card-card {
3208
3208
  transition: none;
3209
3209
  }
3210
- .bds2110Card-card.bds2110Card---clickable:hover,
3211
- .bds2110Card-card.bds2110Card---clickable:active {
3210
+ .bds2121Card-card.bds2121Card---clickable:hover,
3211
+ .bds2121Card-card.bds2121Card---clickable:active {
3212
3212
  transform: none;
3213
3213
  }
3214
3214
  }
3215
3215
  }
3216
3216
 
3217
3217
  /* src/components/layout/Grid/Grid.module.css */
3218
- @layer boostdev.bds2110Grid-component {
3219
- .bds2110Grid-grid {
3218
+ @layer boostdev.bds2121Grid-component {
3219
+ .bds2121Grid-grid {
3220
3220
  display: grid;
3221
3221
  gap: var(--grid_gap, var(--bds-grid_gap));
3222
3222
  }
3223
- .bds2110Grid-grid.bds2110Grid---main {
3223
+ .bds2121Grid-grid.bds2121Grid---main {
3224
3224
  grid-template-columns: var(--bds-grid_template-columns);
3225
3225
  }
3226
- .bds2110Grid-grid.bds2110Grid---page {
3226
+ .bds2121Grid-grid.bds2121Grid---page {
3227
3227
  grid-template-columns: 1fr;
3228
3228
  grid-column: 1 / -1;
3229
3229
  }
3230
- .bds2110Grid-grid.bds2110Grid---funnel {
3230
+ .bds2121Grid-grid.bds2121Grid---funnel {
3231
3231
  grid-template-columns: var(--bds-grid_template-columns);
3232
3232
  max-inline-size: var(--bds-container_max-width--narrow);
3233
3233
  margin-inline: auto;
3234
3234
  }
3235
- .bds2110Grid-grid.bds2110Grid---custom {
3235
+ .bds2121Grid-grid.bds2121Grid---custom {
3236
3236
  grid-template-columns: repeat(var(--grid_columns, 4), minmax(0, 1fr));
3237
3237
  }
3238
- .bds2110Grid-grid.bds2110Grid---centered {
3238
+ .bds2121Grid-grid.bds2121Grid---centered {
3239
3239
  margin-inline: auto;
3240
3240
  max-inline-size: var(--bds-container_max-width);
3241
3241
  padding-inline: var(--bds-container_spacing-inline);
3242
3242
  }
3243
- .bds2110Grid-item {
3243
+ .bds2121Grid-item {
3244
3244
  min-inline-size: 0;
3245
3245
  }
3246
3246
  @supports (grid-template-rows: masonry) {
3247
- .bds2110Grid-grid.bds2110Grid---masonry {
3247
+ .bds2121Grid-grid.bds2121Grid---masonry {
3248
3248
  grid-template-rows: masonry;
3249
3249
  }
3250
3250
  }
3251
3251
  @supports (display: grid-lanes) {
3252
- .bds2110Grid-grid.bds2110Grid---masonry {
3252
+ .bds2121Grid-grid.bds2121Grid---masonry {
3253
3253
  display: grid-lanes;
3254
3254
  }
3255
3255
  }
3256
3256
  }
3257
3257
 
3258
3258
  /* src/components/layout/SectionHeader/SectionHeader.module.css */
3259
- @layer boostdev.bds2110SectionHeader-component {
3260
- .bds2110SectionHeader-sectionHeader {
3259
+ @layer boostdev.bds2121SectionHeader-component {
3260
+ .bds2121SectionHeader-sectionHeader {
3261
3261
  display: flex;
3262
3262
  flex-direction: column;
3263
3263
  gap: var(--sectionHeader_gap, var(--bds-space_m));
3264
3264
  grid-column: var(--bds-grid_span-100);
3265
3265
  }
3266
- .bds2110SectionHeader-title {
3266
+ .bds2121SectionHeader-title {
3267
3267
  color: var(--sectionHeader_title-color, var(--sectionHeader-title-color, var(--bds-color_on-bg)));
3268
3268
  margin: 0;
3269
3269
  font-family: var(--bds-font_family--body);
3270
3270
  }
3271
- .bds2110SectionHeader-subtitle {
3271
+ .bds2121SectionHeader-subtitle {
3272
3272
  color: var(--sectionHeader_subtitle-color, var(--bds-color_grey--strong));
3273
3273
  margin: 0;
3274
3274
  font-family: var(--bds-font_family--body);
3275
3275
  font-weight: var(--bds-font_weight--medium);
3276
3276
  }
3277
- .bds2110SectionHeader-sectionHeader.bds2110SectionHeader---start {
3277
+ .bds2121SectionHeader-sectionHeader.bds2121SectionHeader---start {
3278
3278
  align-items: flex-start;
3279
3279
  text-align: start;
3280
3280
  }
3281
- .bds2110SectionHeader-sectionHeader.bds2110SectionHeader---center {
3281
+ .bds2121SectionHeader-sectionHeader.bds2121SectionHeader---center {
3282
3282
  align-items: center;
3283
3283
  text-align: center;
3284
3284
  }
3285
- .bds2110SectionHeader-sectionHeader.bds2110SectionHeader---end {
3285
+ .bds2121SectionHeader-sectionHeader.bds2121SectionHeader---end {
3286
3286
  align-items: flex-end;
3287
3287
  text-align: end;
3288
3288
  }
3289
- .bds2110SectionHeader-sectionHeader.bds2110SectionHeader---medium .bds2110SectionHeader-title {
3289
+ .bds2121SectionHeader-sectionHeader.bds2121SectionHeader---medium .bds2121SectionHeader-title {
3290
3290
  font-size: var(--sectionHeader_title-size, var(--bds-font_size--heading-1));
3291
3291
  line-height: var(--sectionHeader_title-line-height, var(--bds-font_line-height--heading));
3292
3292
  font-weight: var(--sectionHeader_title-weight, var(--bds-font_weight--bold));
3293
3293
  }
3294
- .bds2110SectionHeader-sectionHeader.bds2110SectionHeader---medium .bds2110SectionHeader-subtitle {
3294
+ .bds2121SectionHeader-sectionHeader.bds2121SectionHeader---medium .bds2121SectionHeader-subtitle {
3295
3295
  font-size: var(--sectionHeader_subtitle-size, var(--bds-font_size--heading-3));
3296
3296
  line-height: var(--sectionHeader_subtitle-line-height, 1.3);
3297
3297
  }
3298
- .bds2110SectionHeader-sectionHeader.bds2110SectionHeader---xs .bds2110SectionHeader-title {
3298
+ .bds2121SectionHeader-sectionHeader.bds2121SectionHeader---xs .bds2121SectionHeader-title {
3299
3299
  font-size: var(--sectionHeader_title-size, var(--bds-font_size--heading-2));
3300
3300
  line-height: var(--sectionHeader_title-line-height, var(--bds-font_line-height--heading));
3301
3301
  font-weight: var(--sectionHeader_title-weight, var(--bds-font_weight--bold));
3302
3302
  }
3303
- .bds2110SectionHeader-sectionHeader.bds2110SectionHeader---xs .bds2110SectionHeader-subtitle {
3303
+ .bds2121SectionHeader-sectionHeader.bds2121SectionHeader---xs .bds2121SectionHeader-subtitle {
3304
3304
  font-size: var(--sectionHeader_subtitle-size, var(--bds-font_size--body));
3305
3305
  line-height: var(--sectionHeader_subtitle-line-height, 1.4);
3306
3306
  }
3307
- .bds2110SectionHeader-sectionHeader.bds2110SectionHeader---small .bds2110SectionHeader-title {
3307
+ .bds2121SectionHeader-sectionHeader.bds2121SectionHeader---small .bds2121SectionHeader-title {
3308
3308
  font-size: var(--sectionHeader_title-size, var(--bds-font_size--heading-1));
3309
3309
  line-height: var(--sectionHeader_title-line-height, var(--bds-font_line-height--heading));
3310
3310
  font-weight: var(--sectionHeader_title-weight, var(--bds-font_weight--bold));
3311
3311
  }
3312
- .bds2110SectionHeader-sectionHeader.bds2110SectionHeader---small .bds2110SectionHeader-subtitle {
3312
+ .bds2121SectionHeader-sectionHeader.bds2121SectionHeader---small .bds2121SectionHeader-subtitle {
3313
3313
  font-size: var(--sectionHeader_subtitle-size, var(--bds-font_size--body));
3314
3314
  line-height: var(--sectionHeader_subtitle-line-height, 1.4);
3315
3315
  }
3316
- .bds2110SectionHeader-sectionHeader.bds2110SectionHeader---large .bds2110SectionHeader-title {
3316
+ .bds2121SectionHeader-sectionHeader.bds2121SectionHeader---large .bds2121SectionHeader-title {
3317
3317
  font-size: var(--sectionHeader_title-size, var(--bds-font_size--display));
3318
3318
  line-height: var(--sectionHeader_title-line-height, var(--bds-font_line-height--display));
3319
3319
  font-weight: var(--sectionHeader_title-weight, var(--bds-font_weight--bold));
3320
3320
  letter-spacing: var(--bds-font_tracking--tight);
3321
3321
  }
3322
- .bds2110SectionHeader-sectionHeader.bds2110SectionHeader---large .bds2110SectionHeader-subtitle {
3322
+ .bds2121SectionHeader-sectionHeader.bds2121SectionHeader---large .bds2121SectionHeader-subtitle {
3323
3323
  font-size: var(--sectionHeader_subtitle-size, var(--bds-font_size--heading-2));
3324
3324
  line-height: var(--sectionHeader_subtitle-line-height, 1.3);
3325
3325
  font-weight: var(--bds-font_weight--medium);
@@ -3327,8 +3327,8 @@
3327
3327
  }
3328
3328
 
3329
3329
  /* src/components/layout/IconWrapper/IconWrapper.module.css */
3330
- @layer boostdev.bds2110IconWrapper-component {
3331
- .bds2110IconWrapper-wrapper {
3330
+ @layer boostdev.bds2121IconWrapper-component {
3331
+ .bds2121IconWrapper-wrapper {
3332
3332
  inline-size: 2em;
3333
3333
  block-size: 2em;
3334
3334
  font-size: var(--icon-wrapper_size, 3em);
@@ -3344,7 +3344,7 @@
3344
3344
  position: relative;
3345
3345
  transition: var(--bds-animation_transition);
3346
3346
  }
3347
- .bds2110IconWrapper-wrapper svg {
3347
+ .bds2121IconWrapper-wrapper svg {
3348
3348
  fill: currentcolor;
3349
3349
  }
3350
3350
  }