@boostdev/design-system-components 2.12.1 → 2.14.0

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 (48) hide show
  1. package/AGENTS.md +23 -1
  2. package/README.md +6 -0
  3. package/dist/client.cjs +52 -52
  4. package/dist/client.css +600 -601
  5. package/dist/client.js +52 -52
  6. package/dist/index.cjs +52 -52
  7. package/dist/index.css +600 -601
  8. package/dist/index.js +52 -52
  9. package/dist/web-components/{chunk-SFZ6Q4BP.js → chunk-5HUAFCU6.js} +1 -1
  10. package/dist/web-components/{chunk-YFAXGRPR.js → chunk-6ZNQPSQJ.js} +1 -1
  11. package/dist/web-components/{chunk-JMCXAAFK.js → chunk-HBLJ4SLY.js} +2 -2
  12. package/dist/web-components/{chunk-FUQEFHRC.js → chunk-SOYAOLKR.js} +1 -1
  13. package/dist/web-components/{chunk-F3ZDNHZZ.js → chunk-Z3BPJNEL.js} +1 -1
  14. package/dist/web-components/index.js +5 -5
  15. package/dist/web-components/interaction/bds-accordion-item.js +1 -1
  16. package/dist/web-components/interaction/bds-drawer.js +1 -1
  17. package/dist/web-components/interaction/bds-tabs.js +1 -1
  18. package/dist/web-components/ui/bds-separator.js +1 -1
  19. package/dist/web-components/ui/bds-table.js +1 -1
  20. package/package.json +2 -2
  21. package/src/components/interaction/Drawer/Drawer.mdx +1 -0
  22. package/src/components/interaction/Drawer/Drawer.module.css +1 -1
  23. package/src/components/interaction/DropdownMenu/DropdownMenu.mdx +1 -0
  24. package/src/components/interaction/DropdownMenu/DropdownMenu.module.css +1 -2
  25. package/src/components/ui/Accordion/Accordion.mdx +1 -0
  26. package/src/components/ui/Accordion/Accordion.module.css +1 -1
  27. package/src/components/ui/Separator/Separator.mdx +1 -1
  28. package/src/components/ui/Separator/Separator.module.css +1 -1
  29. package/src/components/ui/Table/Table.mdx +1 -0
  30. package/src/components/ui/Table/Table.module.css +2 -2
  31. package/src/components/ui/Tabs/Tabs.mdx +1 -0
  32. package/src/components/ui/Tabs/Tabs.module.css +1 -1
  33. package/src/stories/DesignSystem/Colors.mdx +14 -0
  34. package/src/stories/DesignSystem/Overview.mdx +3 -0
  35. package/src/stories/DesignSystem/TokenSets.mdx +291 -0
  36. package/src/test/token-contract.spec.ts +71 -0
  37. package/src/web-components/interaction/BdsAccordion.mdx +1 -0
  38. package/src/web-components/interaction/BdsDrawer.mdx +10 -0
  39. package/src/web-components/interaction/BdsTabs.mdx +1 -0
  40. package/src/web-components/interaction/bds-accordion-item.ts +1 -1
  41. package/src/web-components/interaction/bds-drawer.spec.ts +7 -0
  42. package/src/web-components/interaction/bds-drawer.ts +1 -1
  43. package/src/web-components/interaction/bds-tabs.ts +1 -1
  44. package/src/web-components/ui/BdsSeparator.mdx +1 -1
  45. package/src/web-components/ui/BdsTable.mdx +1 -0
  46. package/src/web-components/ui/bds-separator.spec.ts +7 -0
  47. package/src/web-components/ui/bds-separator.ts +1 -1
  48. package/src/web-components/ui/bds-table.ts +2 -2
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.bds2121Accordion-component {
31
- .bds2121Accordion-accordion {
30
+ @layer boostdev.bds2140Accordion-component {
31
+ .bds2140Accordion-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
- .bds2121Accordion-item {
42
- border-block-end: 1px solid var(--bds-color_bg--subtle);
41
+ .bds2140Accordion-item {
42
+ border-block-end: 1px solid var(--accordion_divider-color, var(--bds-color_on-bg--as-surface, var(--bds-color_on-bg--border, var(--bds-color_bg--subtle))));
43
43
  }
44
- .bds2121Accordion-item:last-child {
44
+ .bds2140Accordion-item:last-child {
45
45
  border-block-end: none;
46
46
  }
47
- .bds2121Accordion-heading {
47
+ .bds2140Accordion-heading {
48
48
  margin: 0;
49
49
  }
50
- .bds2121Accordion-trigger {
50
+ .bds2140Accordion-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
- .bds2121Accordion-trigger:disabled {
65
+ .bds2140Accordion-trigger:disabled {
66
66
  opacity: 0.4;
67
67
  cursor: not-allowed;
68
68
  }
69
- .bds2121Accordion-trigger:focus-visible {
69
+ .bds2140Accordion-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
- .bds2121Accordion-trigger:not(:disabled):hover {
75
+ .bds2140Accordion-trigger:not(:disabled):hover {
76
76
  background-color: var(--accordion_trigger-bg--hover, var(--bds-color_bg--subtle));
77
77
  }
78
78
  }
79
- .bds2121Accordion-triggerLabel {
79
+ .bds2140Accordion-triggerLabel {
80
80
  flex: 1;
81
81
  text-align: start;
82
82
  }
83
- .bds2121Accordion-chevron {
83
+ .bds2140Accordion-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
- .bds2121Accordion-item.bds2121Accordion---open .bds2121Accordion-chevron {
89
+ .bds2140Accordion-item.bds2140Accordion---open .bds2140Accordion-chevron {
90
90
  transform: rotate(180deg);
91
91
  }
92
- .bds2121Accordion-panel {
92
+ .bds2140Accordion-panel {
93
93
  overflow: hidden;
94
94
  }
95
- .bds2121Accordion-panelContent {
95
+ .bds2140Accordion-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
- .bds2121Accordion-chevron {
102
+ .bds2140Accordion-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.bds2121Alert-component {
110
- .bds2121Alert-alert {
109
+ @layer boostdev.bds2140Alert-component {
110
+ .bds2140Alert-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
- .bds2121Alert---variant_info {
122
+ .bds2140Alert---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
- .bds2121Alert---variant_success {
127
+ .bds2140Alert---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
- .bds2121Alert---variant_warning {
132
+ .bds2140Alert---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
- .bds2121Alert---variant_error {
137
+ .bds2140Alert---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
- .bds2121Alert-icon {
142
+ .bds2140Alert-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
- .bds2121Alert-content {
148
+ .bds2140Alert-content {
149
149
  flex: 1;
150
150
  display: flex;
151
151
  flex-direction: column;
152
152
  gap: var(--bds-space_xxs);
153
153
  }
154
- .bds2121Alert-title {
154
+ .bds2140Alert-title {
155
155
  font-weight: var(--bds-font_weight--semibold);
156
156
  font-size: var(--bds-font_size--body);
157
157
  }
158
- .bds2121Alert-dismiss {
158
+ .bds2140Alert-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
- .bds2121Alert-dismiss svg {
174
+ .bds2140Alert-dismiss svg {
175
175
  inline-size: 1rem;
176
176
  block-size: 1rem;
177
177
  }
178
- .bds2121Alert-dismiss:focus-visible {
178
+ .bds2140Alert-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
- .bds2121Alert-dismiss:hover {
183
+ .bds2140Alert-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.bds2121Avatar-component {
191
- .bds2121Avatar-avatar {
190
+ @layer boostdev.bds2140Avatar-component {
191
+ .bds2140Avatar-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
- .bds2121Avatar-avatar.bds2121Avatar---fallback {
201
+ .bds2140Avatar-avatar.bds2140Avatar---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
- .bds2121Avatar-avatar.bds2121Avatar---size_small {
206
+ .bds2140Avatar-avatar.bds2140Avatar---size_small {
207
207
  --avatar_size--variant: 2em;
208
208
  }
209
- .bds2121Avatar-avatar.bds2121Avatar---size_medium {
209
+ .bds2140Avatar-avatar.bds2140Avatar---size_medium {
210
210
  --avatar_size--variant: 3em;
211
211
  }
212
- .bds2121Avatar-avatar.bds2121Avatar---size_large {
212
+ .bds2140Avatar-avatar.bds2140Avatar---size_large {
213
213
  --avatar_size--variant: 4.5em;
214
214
  }
215
- .bds2121Avatar-image {
215
+ .bds2140Avatar-image {
216
216
  inline-size: 100%;
217
217
  block-size: 100%;
218
218
  object-fit: cover;
219
219
  display: block;
220
220
  }
221
- .bds2121Avatar-initials {
221
+ .bds2140Avatar-initials {
222
222
  line-height: 1;
223
223
  user-select: none;
224
224
  font-size: var(--bds-font_size--body);
225
225
  }
226
- .bds2121Avatar-avatar.bds2121Avatar---size_small .bds2121Avatar-initials {
226
+ .bds2140Avatar-avatar.bds2140Avatar---size_small .bds2140Avatar-initials {
227
227
  font-size: var(--bds-font_size--body--s);
228
228
  }
229
- .bds2121Avatar-avatar.bds2121Avatar---size_large .bds2121Avatar-initials {
229
+ .bds2140Avatar-avatar.bds2140Avatar---size_large .bds2140Avatar-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.bds2121Badge-component {
236
- .bds2121Badge-badge {
235
+ @layer boostdev.bds2140Badge-component {
236
+ .bds2140Badge-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
- .bds2121Badge---variant_primary {
249
+ .bds2140Badge---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
- .bds2121Badge---variant_secondary {
253
+ .bds2140Badge---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
- .bds2121Badge---variant_success {
257
+ .bds2140Badge---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
- .bds2121Badge---variant_error {
261
+ .bds2140Badge---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
- .bds2121Badge---variant_warning {
265
+ .bds2140Badge---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.bds2121Breadcrumb-component {
273
- .bds2121Breadcrumb-breadcrumb {
272
+ @layer boostdev.bds2140Breadcrumb-component {
273
+ .bds2140Breadcrumb-breadcrumb {
274
274
  font-size: var(--bds-font_size--body--s);
275
275
  }
276
- .bds2121Breadcrumb-list {
276
+ .bds2140Breadcrumb-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
- .bds2121Breadcrumb-item {
285
+ .bds2140Breadcrumb-item {
286
286
  display: flex;
287
287
  align-items: center;
288
288
  gap: var(--bds-space_xxs);
289
289
  }
290
- .bds2121Breadcrumb-link {
290
+ .bds2140Breadcrumb-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
- .bds2121Breadcrumb-link:focus-visible {
295
+ .bds2140Breadcrumb-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
- .bds2121Breadcrumb-link:hover {
301
+ .bds2140Breadcrumb-link:hover {
302
302
  text-decoration: underline;
303
303
  text-underline-offset: 0.2em;
304
304
  }
305
305
  }
306
- .bds2121Breadcrumb-separator {
306
+ .bds2140Breadcrumb-separator {
307
307
  color: var(--bds-color_on-bg--subtle);
308
308
  user-select: none;
309
309
  }
310
- .bds2121Breadcrumb-text {
310
+ .bds2140Breadcrumb-text {
311
311
  color: var(--bds-color_on-bg--subtle);
312
312
  }
313
- .bds2121Breadcrumb-current {
313
+ .bds2140Breadcrumb-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.bds2121Collapsible-component {
321
- .bds2121Collapsible-collapsible {
320
+ @layer boostdev.bds2140Collapsible-component {
321
+ .bds2140Collapsible-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
- .bds2121Collapsible-summary {
330
+ .bds2140Collapsible-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
- .bds2121Collapsible-summary::-webkit-details-marker {
345
+ .bds2140Collapsible-summary::-webkit-details-marker {
346
346
  display: none;
347
347
  }
348
- .bds2121Collapsible-summary:focus-visible {
348
+ .bds2140Collapsible-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
- .bds2121Collapsible-summary:hover {
353
+ .bds2140Collapsible-summary:hover {
354
354
  background-color: var(--collapsible_bg--hover, var(--bds-color_bg--subtle));
355
355
  }
356
356
  }
357
- .bds2121Collapsible-collapsible[open] > .bds2121Collapsible-summary {
357
+ .bds2140Collapsible-collapsible[open] > .bds2140Collapsible-summary {
358
358
  border-block-end: var(--collapsible_border-width, 1px) solid var(--collapsible_border-color, var(--bds-color_bg--subtle));
359
359
  }
360
- .bds2121Collapsible-summaryContent {
360
+ .bds2140Collapsible-summaryContent {
361
361
  flex: 1;
362
362
  }
363
- .bds2121Collapsible-icon {
363
+ .bds2140Collapsible-icon {
364
364
  inline-size: 0.5rem;
365
365
  block-size: 0.5rem;
366
366
  border-inline-end: 2px solid currentcolor;
@@ -369,25 +369,25 @@
369
369
  flex-shrink: 0;
370
370
  transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
371
371
  }
372
- .bds2121Collapsible-collapsible[open] > .bds2121Collapsible-summary .bds2121Collapsible-icon {
372
+ .bds2140Collapsible-collapsible[open] > .bds2140Collapsible-summary .bds2140Collapsible-icon {
373
373
  transform: rotate(-135deg);
374
374
  }
375
- .bds2121Collapsible-content {
375
+ .bds2140Collapsible-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
- .bds2121Collapsible-icon {
382
+ .bds2140Collapsible-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.bds2121Calendar-component {
390
- .bds2121Calendar-calendar {
389
+ @layer boostdev.bds2140Calendar-component {
390
+ .bds2140Calendar-calendar {
391
391
  display: inline-block;
392
392
  inline-size: fit-content;
393
393
  max-inline-size: 100%;
@@ -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
- .bds2121Calendar-months {
402
+ .bds2140Calendar-months {
403
403
  display: flex;
404
404
  flex-wrap: wrap;
405
405
  gap: var(--bds-space_l);
406
406
  }
407
- .bds2121Calendar-month {
407
+ .bds2140Calendar-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
- .bds2121Calendar-monthHeader {
414
+ .bds2140Calendar-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
- .bds2121Calendar-navSlot {
420
+ .bds2140Calendar-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
- .bds2121Calendar-monthYear {
426
+ .bds2140Calendar-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
- .bds2121Calendar-navBtn {
431
+ .bds2140Calendar-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
- .bds2121Calendar-navBtn svg {
443
+ .bds2140Calendar-navBtn svg {
444
444
  inline-size: 1rem;
445
445
  block-size: 1rem;
446
446
  }
447
- .bds2121Calendar-navBtn:focus-visible {
447
+ .bds2140Calendar-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
- .bds2121Calendar-navBtn:hover {
452
+ .bds2140Calendar-navBtn:hover {
453
453
  background-color: var(--calendar_navBtn-bg--hover, var(--bds-color_bg--subtle));
454
454
  }
455
455
  }
456
- .bds2121Calendar-grid {
456
+ .bds2140Calendar-grid {
457
457
  display: grid;
458
458
  grid-template-columns: repeat(7, 1fr);
459
459
  gap: var(--bds-space_xxxs);
460
460
  }
461
- .bds2121Calendar-row {
461
+ .bds2140Calendar-row {
462
462
  display: contents;
463
463
  }
464
- .bds2121Calendar-weekday {
464
+ .bds2140Calendar-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
- .bds2121Calendar-cell {
474
+ .bds2140Calendar-cell {
475
475
  display: flex;
476
476
  aspect-ratio: 1;
477
477
  }
478
- .bds2121Calendar-day {
478
+ .bds2140Calendar-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
- .bds2121Calendar-day:focus-visible {
492
+ .bds2140Calendar-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
- .bds2121Calendar-day:not(.bds2121Calendar-disabled, .bds2121Calendar-selected, .bds2121Calendar-rangeStart, .bds2121Calendar-rangeEnd):hover {
497
+ .bds2140Calendar-day:not(.bds2140Calendar-disabled, .bds2140Calendar-selected, .bds2140Calendar-rangeStart, .bds2140Calendar-rangeEnd):hover {
498
498
  background-color: var(--calendar_day-bg--hover, var(--bds-color_bg--subtle));
499
499
  }
500
500
  }
501
- .bds2121Calendar-outside {
501
+ .bds2140Calendar-outside {
502
502
  color: var(--bds-color_on-bg--subtle);
503
503
  opacity: 0.4;
504
504
  }
505
- .bds2121Calendar-today {
505
+ .bds2140Calendar-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
- .bds2121Calendar-selected {
511
+ .bds2140Calendar-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
- .bds2121Calendar-inRange {
516
+ .bds2140Calendar-inRange {
517
517
  background-color: var(--calendar_day-bg--in-range, var(--bds-color_blue--subtle));
518
518
  border-radius: 0;
519
519
  }
520
- .bds2121Calendar-rangeStart,
521
- .bds2121Calendar-rangeEnd {
520
+ .bds2140Calendar-rangeStart,
521
+ .bds2140Calendar-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
- .bds2121Calendar-disabled {
526
+ .bds2140Calendar-disabled {
527
527
  opacity: 0.35;
528
528
  cursor: not-allowed;
529
529
  }
530
530
  @media (prefers-reduced-motion: reduce) {
531
- .bds2121Calendar-day {
531
+ .bds2140Calendar-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.bds2121Carousel-component {
539
- .bds2121Carousel-carousel {
538
+ @layer boostdev.bds2140Carousel-component {
539
+ .bds2140Carousel-carousel {
540
540
  position: relative;
541
541
  display: flex;
542
542
  align-items: center;
543
543
  gap: var(--bds-space_xs);
544
544
  }
545
- .bds2121Carousel-track {
545
+ .bds2140Carousel-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
- .bds2121Carousel-track::-webkit-scrollbar {
554
+ .bds2140Carousel-track::-webkit-scrollbar {
555
555
  display: none;
556
556
  }
557
- .bds2121Carousel-slide {
557
+ .bds2140Carousel-slide {
558
558
  scroll-snap-align: start;
559
559
  flex-shrink: 0;
560
560
  }
561
- .bds2121Carousel-navBtn {
561
+ .bds2140Carousel-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
- .bds2121Carousel-navBtn svg {
578
+ .bds2140Carousel-navBtn svg {
579
579
  inline-size: 1.25rem;
580
580
  block-size: 1.25rem;
581
581
  }
582
- .bds2121Carousel-navBtn:focus-visible {
582
+ .bds2140Carousel-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
- .bds2121Carousel-navBtn:hover {
587
+ .bds2140Carousel-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
- .bds2121Carousel-track {
592
+ .bds2140Carousel-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.bds2121DescriptionList-component {
600
- .bds2121DescriptionList-list {
599
+ @layer boostdev.bds2140DescriptionList-component {
600
+ .bds2140DescriptionList-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
- .bds2121DescriptionList-group {
609
+ .bds2140DescriptionList-group {
610
610
  display: flex;
611
611
  flex-direction: column;
612
612
  gap: var(--bds-space_xxs);
613
613
  }
614
- .bds2121DescriptionList-term {
614
+ .bds2140DescriptionList-term {
615
615
  font-weight: var(--bds-font_weight--semibold);
616
616
  color: var(--bds-color_on-bg);
617
617
  }
618
- .bds2121DescriptionList-details {
618
+ .bds2140DescriptionList-details {
619
619
  margin: 0;
620
620
  color: var(--bds-color_on-bg);
621
621
  }
622
- .bds2121DescriptionList---layout_inline .bds2121DescriptionList-group {
622
+ .bds2140DescriptionList---layout_inline .bds2140DescriptionList-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
- .bds2121DescriptionList---layout_inline .bds2121DescriptionList-term {
628
+ .bds2140DescriptionList---layout_inline .bds2140DescriptionList-term {
629
629
  grid-column: 1;
630
630
  }
631
- .bds2121DescriptionList---layout_inline .bds2121DescriptionList-details {
631
+ .bds2140DescriptionList---layout_inline .bds2140DescriptionList-details {
632
632
  grid-column: 2;
633
633
  }
634
634
  }
635
635
 
636
636
  /* src/components/ui/Link/Link.module.css */
637
- @layer boostdev.bds2121Link-component {
638
- .bds2121Link-link {
637
+ @layer boostdev.bds2140Link-component {
638
+ .bds2140Link-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
- .bds2121Link-link:focus-visible {
645
+ .bds2140Link-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
- .bds2121Link-link:hover {
651
+ .bds2140Link-link:hover {
652
652
  color: var(--link_color-hover, var(--link_color-hover--variant, var(--bds-color_blue--strong)));
653
653
  }
654
654
  }
655
- .bds2121Link---variant_default {
655
+ .bds2140Link---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
- .bds2121Link---variant_subtle {
659
+ .bds2140Link---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
- .bds2121Link---variant_standalone {
663
+ .bds2140Link---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
- .bds2121Link---variant_standalone:hover {
673
+ .bds2140Link---variant_standalone:hover {
674
674
  text-decoration: underline;
675
675
  text-underline-offset: 0.2em;
676
676
  }
677
677
  }
678
- .bds2121Link-externalLabel {
678
+ .bds2140Link-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.bds2121Loading-component {
693
- .bds2121Loading-loading {
692
+ @layer boostdev.bds2140Loading-component {
693
+ .bds2140Loading-loading {
694
694
  display: flex;
695
695
  justify-content: center;
696
696
  align-items: center;
697
697
  }
698
- .bds2121Loading-spinner {
698
+ .bds2140Loading-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
- .bds2121Loading---size_small .bds2121Loading-spinner {
706
+ .bds2140Loading---size_small .bds2140Loading-spinner {
707
707
  inline-size: 1.5em;
708
708
  block-size: 1.5em;
709
709
  border-width: 2px;
710
710
  }
711
- .bds2121Loading---size_large .bds2121Loading-spinner {
711
+ .bds2140Loading---size_large .bds2140Loading-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
- .bds2121Loading-spinner {
717
+ .bds2140Loading-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.bds2121NotificationBanner-component {
733
- .bds2121NotificationBanner-banner {
732
+ @layer boostdev.bds2140NotificationBanner-component {
733
+ .bds2140NotificationBanner-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
- .bds2121NotificationBanner---variant_info {
745
+ .bds2140NotificationBanner---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
- .bds2121NotificationBanner---variant_success {
750
+ .bds2140NotificationBanner---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
- .bds2121NotificationBanner---variant_warning {
755
+ .bds2140NotificationBanner---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
- .bds2121NotificationBanner---variant_error {
760
+ .bds2140NotificationBanner---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
- .bds2121NotificationBanner-content {
765
+ .bds2140NotificationBanner-content {
766
766
  flex: 1;
767
767
  }
768
- .bds2121NotificationBanner-action {
768
+ .bds2140NotificationBanner-action {
769
769
  flex-shrink: 0;
770
770
  }
771
- .bds2121NotificationBanner-dismiss {
771
+ .bds2140NotificationBanner-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
- .bds2121NotificationBanner-dismiss svg {
787
+ .bds2140NotificationBanner-dismiss svg {
788
788
  inline-size: 1rem;
789
789
  block-size: 1rem;
790
790
  }
791
- .bds2121NotificationBanner-dismiss:focus-visible {
791
+ .bds2140NotificationBanner-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
- .bds2121NotificationBanner-dismiss:hover {
796
+ .bds2140NotificationBanner-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.bds2121Pagination-component {
804
- .bds2121Pagination-pagination {
803
+ @layer boostdev.bds2140Pagination-component {
804
+ .bds2140Pagination-pagination {
805
805
  display: flex;
806
806
  justify-content: center;
807
807
  }
808
- .bds2121Pagination-list {
808
+ .bds2140Pagination-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
- .bds2121Pagination-list li {
816
+ .bds2140Pagination-list li {
817
817
  list-style: none;
818
818
  }
819
- .bds2121Pagination-button {
819
+ .bds2140Pagination-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
- .bds2121Pagination-button:disabled {
840
+ .bds2140Pagination-button:disabled {
841
841
  opacity: 0.4;
842
842
  cursor: not-allowed;
843
843
  }
844
- .bds2121Pagination-button:focus-visible {
844
+ .bds2140Pagination-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
- .bds2121Pagination-button:not(:disabled, .bds2121Pagination---active):hover {
849
+ .bds2140Pagination-button:not(:disabled, .bds2140Pagination---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
- .bds2121Pagination-button.bds2121Pagination---active {
854
+ .bds2140Pagination-button.bds2140Pagination---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
- .bds2121Pagination-button.bds2121Pagination---nav svg {
859
+ .bds2140Pagination-button.bds2140Pagination---nav svg {
860
860
  inline-size: 1rem;
861
861
  block-size: 1rem;
862
862
  }
863
- .bds2121Pagination-ellipsis {
863
+ .bds2140Pagination-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.bds2121Progress-component {
877
- .bds2121Progress-container {
876
+ @layer boostdev.bds2140Progress-component {
877
+ .bds2140Progress-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
- .bds2121Progress-labelRow {
883
+ .bds2140Progress-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
- .bds2121Progress-value {
890
+ .bds2140Progress-value {
891
891
  font-variant-numeric: tabular-nums;
892
892
  }
893
- .bds2121Progress-track {
893
+ .bds2140Progress-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
- .bds2121Progress-track.bds2121Progress---size_small {
900
+ .bds2140Progress-track.bds2140Progress---size_small {
901
901
  --progress_height: var(--bds-space_xxs);
902
902
  }
903
- .bds2121Progress-track.bds2121Progress---size_medium {
903
+ .bds2140Progress-track.bds2140Progress---size_medium {
904
904
  --progress_height: var(--bds-space_xs);
905
905
  }
906
- .bds2121Progress-track.bds2121Progress---size_large {
906
+ .bds2140Progress-track.bds2140Progress---size_large {
907
907
  --progress_height: var(--bds-space_s);
908
908
  }
909
- .bds2121Progress-fill {
909
+ .bds2140Progress-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
- .bds2121Progress-fill {
916
+ .bds2140Progress-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.bds2121ProgressCircle-component {
924
- .bds2121ProgressCircle-wrapper {
923
+ @layer boostdev.bds2140ProgressCircle-component {
924
+ .bds2140ProgressCircle-wrapper {
925
925
  position: relative;
926
926
  display: inline-flex;
927
927
  align-items: center;
928
928
  justify-content: center;
929
929
  }
930
- .bds2121ProgressCircle-svg {
930
+ .bds2140ProgressCircle-svg {
931
931
  display: block;
932
932
  }
933
- .bds2121ProgressCircle-track {
933
+ .bds2140ProgressCircle-track {
934
934
  stroke: var(--progressCircle_color-track, var(--bds-color_bg--subtle));
935
935
  }
936
- .bds2121ProgressCircle-fill {
936
+ .bds2140ProgressCircle-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
- .bds2121ProgressCircle-value {
940
+ .bds2140ProgressCircle-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
- .bds2121ProgressCircle---size_small .bds2121ProgressCircle-value {
948
+ .bds2140ProgressCircle---size_small .bds2140ProgressCircle-value {
949
949
  font-size: var(--progressCircle_font-size--small, var(--bds-font_size--body--s));
950
950
  }
951
- .bds2121ProgressCircle---size_medium .bds2121ProgressCircle-value {
951
+ .bds2140ProgressCircle---size_medium .bds2140ProgressCircle-value {
952
952
  font-size: var(--bds-font_size--body--s);
953
953
  }
954
- .bds2121ProgressCircle---size_large .bds2121ProgressCircle-value {
954
+ .bds2140ProgressCircle---size_large .bds2140ProgressCircle-value {
955
955
  font-size: var(--bds-font_size--body);
956
956
  }
957
957
  @media (prefers-reduced-motion: reduce) {
958
- .bds2121ProgressCircle-fill {
958
+ .bds2140ProgressCircle-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.bds2121Separator-component {
966
- .bds2121Separator-separator {
965
+ @layer boostdev.bds2140Separator-component {
966
+ .bds2140Separator-separator {
967
967
  border: none;
968
- background-color: var(--separator_color, var(--bds-color_on-bg));
968
+ background-color: var(--separator_color, var(--bds-color_on-bg--as-surface, var(--bds-color_on-bg--border, var(--bds-color_on-bg))));
969
969
  }
970
- .bds2121Separator-separator.bds2121Separator---horizontal {
970
+ .bds2140Separator-separator.bds2140Separator---horizontal {
971
971
  display: block;
972
972
  inline-size: 100%;
973
973
  block-size: var(--separator_thickness, 1px);
974
974
  }
975
- .bds2121Separator-separator.bds2121Separator---vertical {
975
+ .bds2140Separator-separator.bds2140Separator---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.bds2121Skeleton-component {
985
- .bds2121Skeleton-skeleton {
984
+ @layer boostdev.bds2140Skeleton-component {
985
+ .bds2140Skeleton-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
- .bds2121Skeleton-skeleton {
998
+ .bds2140Skeleton-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.bds2121SkipLink-component {
1015
- .bds2121SkipLink-skipLink {
1014
+ @layer boostdev.bds2140SkipLink-component {
1015
+ .bds2140SkipLink-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
- .bds2121SkipLink-skipLink:focus-visible {
1033
+ .bds2140SkipLink-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
- .bds2121SkipLink-skipLink {
1039
+ .bds2140SkipLink-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.bds2121Table-component {
1047
- .bds2121Table-wrapper {
1046
+ @layer boostdev.bds2140Table-component {
1047
+ .bds2140Table-wrapper {
1048
1048
  inline-size: 100%;
1049
1049
  overflow-inline: auto;
1050
1050
  border: var(--table_border, none);
@@ -1053,39 +1053,39 @@
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
- .bds2121Table-wrapper:focus-visible {
1056
+ .bds2140Table-wrapper:focus-visible {
1057
1057
  outline: var(--bds-outline_default);
1058
1058
  outline-offset: calc(var(--bds-outline_offset) * -1);
1059
1059
  }
1060
- .bds2121Table-table {
1060
+ .bds2140Table-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
- .bds2121Table-caption {
1066
+ .bds2140Table-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
- .bds2121Table-thead {
1073
+ .bds2140Table-thead {
1074
1074
  background-color: var(--bds-color_bg--subtle);
1075
1075
  }
1076
- .bds2121Table-th {
1076
+ .bds2140Table-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);
1080
1080
  font-size: var(--table_header-font-size, var(--bds-font_size--body--s));
1081
1081
  color: var(--bds-color_on-bg--subtle);
1082
1082
  white-space: nowrap;
1083
- border-block-end: 1px solid var(--bds-color_bg--subtle);
1083
+ border-block-end: 1px solid var(--table_divider-color, var(--bds-color_on-bg--as-surface, var(--bds-color_on-bg--border, var(--bds-color_bg--subtle))));
1084
1084
  }
1085
- .bds2121Table-th.bds2121Table---sortable {
1085
+ .bds2140Table-th.bds2140Table---sortable {
1086
1086
  padding: 0;
1087
1087
  }
1088
- .bds2121Table-sortButton {
1088
+ .bds2140Table-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
- .bds2121Table-sortButton:focus-visible {
1102
+ .bds2140Table-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
- .bds2121Table-sortButton:hover {
1107
+ .bds2140Table-sortButton:hover {
1108
1108
  color: var(--table_sortBtn-color--hover, var(--bds-color_on-bg));
1109
1109
  }
1110
1110
  }
1111
- .bds2121Table-sortIcon {
1111
+ .bds2140Table-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
- .bds2121Table-sortIcon.bds2121Table---sort-active {
1117
+ .bds2140Table-sortIcon.bds2140Table---sort-active {
1118
1118
  opacity: 1;
1119
1119
  color: var(--bds-color_interactive);
1120
1120
  }
1121
- .bds2121Table-sortIcon.bds2121Table---sort-desc {
1121
+ .bds2140Table-sortIcon.bds2140Table---sort-desc {
1122
1122
  transform: rotate(180deg);
1123
1123
  }
1124
- .bds2121Table-tbody .bds2121Table-tr {
1125
- border-block-end: 1px solid var(--bds-color_bg--subtle);
1124
+ .bds2140Table-tbody .bds2140Table-tr {
1125
+ border-block-end: 1px solid var(--table_divider-color, var(--bds-color_on-bg--as-surface, var(--bds-color_on-bg--border, var(--bds-color_bg--subtle))));
1126
1126
  transition: var(--bds-animation_transition);
1127
1127
  }
1128
- .bds2121Table-tbody .bds2121Table-tr:last-child {
1128
+ .bds2140Table-tbody .bds2140Table-tr:last-child {
1129
1129
  border-block-end: none;
1130
1130
  }
1131
1131
  @media (hover: hover) and (pointer: fine) {
1132
- .bds2121Table-tbody .bds2121Table-tr:hover {
1132
+ .bds2140Table-tbody .bds2140Table-tr:hover {
1133
1133
  background-color: var(--table_row-bg--hover, var(--bds-color_bg--subtle));
1134
1134
  }
1135
1135
  }
1136
- .bds2121Table-td {
1136
+ .bds2140Table-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
- .bds2121Table-sortIcon {
1142
+ .bds2140Table-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.bds2121Tabs-component {
1150
- .bds2121Tabs-tabs {
1149
+ @layer boostdev.bds2140Tabs-component {
1150
+ .bds2140Tabs-tabs {
1151
1151
  display: flex;
1152
1152
  flex-direction: column;
1153
1153
  }
1154
- .bds2121Tabs-tabList {
1154
+ .bds2140Tabs-tabList {
1155
1155
  display: flex;
1156
- border-block-end: 1px solid var(--bds-color_bg--subtle);
1156
+ border-block-end: 1px solid var(--tabs_divider-color, var(--bds-color_on-bg--as-surface, var(--bds-color_on-bg--border, var(--bds-color_bg--subtle))));
1157
1157
  gap: var(--tabs_gap, var(--bds-space_xxs));
1158
1158
  }
1159
- .bds2121Tabs-tab {
1159
+ .bds2140Tabs-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
- .bds2121Tabs-tab.bds2121Tabs---active {
1173
+ .bds2140Tabs-tab.bds2140Tabs---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
- .bds2121Tabs-tab:disabled {
1177
+ .bds2140Tabs-tab:disabled {
1178
1178
  opacity: 0.4;
1179
1179
  cursor: not-allowed;
1180
1180
  }
1181
- .bds2121Tabs-tab:focus-visible {
1181
+ .bds2140Tabs-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
- .bds2121Tabs-tab:not(:disabled, .bds2121Tabs---active):hover {
1187
+ .bds2140Tabs-tab:not(:disabled, .bds2140Tabs---active):hover {
1188
1188
  --tab_color--state: var(--tab_color--hover, var(--bds-color_interactive_on-bg));
1189
1189
  }
1190
1190
  }
1191
- .bds2121Tabs-panel {
1191
+ .bds2140Tabs-panel {
1192
1192
  padding-block-start: var(--tabs_panel-padding, var(--bds-space_m));
1193
1193
  }
1194
- .bds2121Tabs-panel:focus-visible {
1194
+ .bds2140Tabs-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.bds2121Tooltip-component {
1202
- .bds2121Tooltip-wrapper {
1201
+ @layer boostdev.bds2140Tooltip-component {
1202
+ .bds2140Tooltip-wrapper {
1203
1203
  position: relative;
1204
1204
  display: inline-flex;
1205
1205
  align-items: center;
1206
1206
  }
1207
- .bds2121Tooltip-tooltip {
1207
+ .bds2140Tooltip-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] .bds2121Tooltip-tooltip,
1226
- .bds2121Tooltip-tooltip[dir=rtl] {
1225
+ [dir=rtl] .bds2140Tooltip-tooltip,
1226
+ .bds2140Tooltip-tooltip[dir=rtl] {
1227
1227
  --tooltip_dir: -1;
1228
1228
  }
1229
- .bds2121Tooltip---visible {
1229
+ .bds2140Tooltip---visible {
1230
1230
  visibility: visible;
1231
1231
  opacity: 1;
1232
1232
  pointer-events: auto;
1233
1233
  }
1234
- .bds2121Tooltip---placement_top {
1234
+ .bds2140Tooltip---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
- .bds2121Tooltip---placement_bottom {
1239
+ .bds2140Tooltip---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
- .bds2121Tooltip---placement_left {
1244
+ .bds2140Tooltip---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
- .bds2121Tooltip---placement_right {
1249
+ .bds2140Tooltip---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
- .bds2121Tooltip-tooltip {
1255
+ .bds2140Tooltip-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.bds2121Typography-component {
1263
- .bds2121Typography-typography {
1262
+ @layer boostdev.bds2140Typography-component {
1263
+ .bds2140Typography-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
- .bds2121Typography---h1 {
1268
+ .bds2140Typography---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
- .bds2121Typography---h2 {
1274
+ .bds2140Typography---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
- .bds2121Typography---h3 {
1280
+ .bds2140Typography---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
- .bds2121Typography---body {
1286
+ .bds2140Typography---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
- .bds2121Typography---body_s {
1290
+ .bds2140Typography---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.bds2121Button-component {
1322
- .bds2121Button-button,
1323
- .bds2121Button-button[href] {
1321
+ @layer boostdev.bds2140Button-component {
1322
+ .bds2140Button-button,
1323
+ .bds2140Button-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
- .bds2121Button-button.bds2121Button---default {
1345
+ .bds2140Button-button.bds2140Button---default {
1346
1346
  }
1347
- .bds2121Button-button.bds2121Button---outline,
1348
- .bds2121Button-button.bds2121Button---ghost {
1347
+ .bds2140Button-button.bds2140Button---outline,
1348
+ .bds2140Button-button.bds2140Button---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
- .bds2121Button-button.bds2121Button---size_small {
1353
+ .bds2140Button-button.bds2140Button---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
- .bds2121Button-button.bds2121Button---size_medium {
1358
+ .bds2140Button-button.bds2140Button---size_medium {
1359
1359
  --button_height: 3em;
1360
1360
  padding-inline: var(--bds-space_l);
1361
1361
  }
1362
- .bds2121Button-button.bds2121Button---size_large {
1362
+ .bds2140Button-button.bds2140Button---size_large {
1363
1363
  --button_font-size: var(--bds-font_size--heading-3);
1364
1364
  padding-inline: var(--bds-space_xl);
1365
1365
  }
1366
- .bds2121Button-button.bds2121Button---hasPulse {
1366
+ .bds2140Button-button.bds2140Button---hasPulse {
1367
1367
  animation: pulse 3s infinite;
1368
1368
  }
1369
- .bds2121Button-button.bds2121Button---iconOnly {
1369
+ .bds2140Button-button.bds2140Button---iconOnly {
1370
1370
  aspect-ratio: 1;
1371
1371
  box-sizing: border-box;
1372
1372
  padding: var(--bds-space_xxs);
1373
1373
  }
1374
- .bds2121Button-button.bds2121Button---iconOnly > * {
1374
+ .bds2140Button-button.bds2140Button---iconOnly > * {
1375
1375
  inline-size: 100%;
1376
1376
  block-size: 100%;
1377
1377
  }
1378
- .bds2121Button-button[href] {
1378
+ .bds2140Button-button[href] {
1379
1379
  text-decoration: none;
1380
1380
  }
1381
- .bds2121Button-button svg {
1381
+ .bds2140Button-button svg {
1382
1382
  --icon__stroke: currentcolor;
1383
1383
  fill: currentcolor;
1384
1384
  color: currentcolor;
1385
1385
  flex-shrink: 0;
1386
1386
  }
1387
- .bds2121Button-iconStart {
1387
+ .bds2140Button-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
- .bds2121Button-iconEnd {
1393
+ .bds2140Button-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
- .bds2121Button-button.bds2121Button---iconOnly .bds2121Button-iconStart,
1400
- .bds2121Button-button.bds2121Button---iconOnly .bds2121Button-iconEnd {
1399
+ .bds2140Button-button.bds2140Button---iconOnly .bds2140Button-iconStart,
1400
+ .bds2140Button-button.bds2140Button---iconOnly .bds2140Button-iconEnd {
1401
1401
  margin-inline: 0;
1402
1402
  }
1403
1403
  @media (hover: hover) and (pointer: fine) {
1404
- .bds2121Button-button:hover .bds2121Button-iconStart svg {
1404
+ .bds2140Button-button:hover .bds2140Button-iconStart svg {
1405
1405
  animation: fadeZoom 2s ease-out infinite;
1406
1406
  }
1407
- .bds2121Button-button:hover .bds2121Button-iconEnd svg {
1407
+ .bds2140Button-button:hover .bds2140Button-iconEnd svg {
1408
1408
  animation: fadeZoom 2s ease-out infinite;
1409
1409
  }
1410
1410
  }
1411
- .bds2121Button-button:focus-visible {
1411
+ .bds2140Button-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
- .bds2121Button-button.bds2121Button---default:hover {
1416
+ .bds2140Button-button.bds2140Button---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
- .bds2121Button-button.bds2121Button---outline:hover,
1425
- .bds2121Button-button.bds2121Button---ghost:hover {
1424
+ .bds2140Button-button.bds2140Button---outline:hover,
1425
+ .bds2140Button-button.bds2140Button---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
- .bds2121Button-button.bds2121Button---hasPulse,
1433
- .bds2121Button-button:hover .bds2121Button-iconStart svg,
1434
- .bds2121Button-button:hover .bds2121Button-iconEnd svg {
1432
+ .bds2140Button-button.bds2140Button---hasPulse,
1433
+ .bds2140Button-button:hover .bds2140Button-iconStart svg,
1434
+ .bds2140Button-button:hover .bds2140Button-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.bds2121Command-component {
1442
- .bds2121Command-dialog {
1441
+ @layer boostdev.bds2140Command-component {
1442
+ .bds2140Command-dialog {
1443
1443
  padding: 0;
1444
1444
  border: none;
1445
1445
  border-radius: var(--command_radius, var(--bds-border_radius--m));
@@ -1449,11 +1449,11 @@
1449
1449
  overflow: visible;
1450
1450
  margin-block-start: 10vh;
1451
1451
  }
1452
- .bds2121Command-dialog::backdrop {
1452
+ .bds2140Command-dialog::backdrop {
1453
1453
  background-color: var(--color_backdrop, rgb(0 0 0 / 50%));
1454
1454
  backdrop-filter: blur(3px);
1455
1455
  }
1456
- .bds2121Command-palette {
1456
+ .bds2140Command-palette {
1457
1457
  display: flex;
1458
1458
  flex-direction: column;
1459
1459
  background-color: var(--command_color, var(--bds-color_bg--strong, var(--bds-color_bg)));
@@ -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
- .bds2121Command-searchRow {
1469
+ .bds2140Command-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
- .bds2121Command-searchIcon {
1477
+ .bds2140Command-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
- .bds2121Command-search {
1483
+ .bds2140Command-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
- .bds2121Command-search:focus-visible {
1492
+ .bds2140Command-search:focus-visible {
1493
1493
  outline: var(--bds-outline_default);
1494
1494
  outline-offset: var(--bds-outline_offset);
1495
1495
  }
1496
- .bds2121Command-search::placeholder {
1496
+ .bds2140Command-search::placeholder {
1497
1497
  color: var(--bds-color_on-bg);
1498
1498
  }
1499
- .bds2121Command-escHint {
1499
+ .bds2140Command-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
- .bds2121Command-list {
1509
+ .bds2140Command-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
- .bds2121Command-groupList {
1515
+ .bds2140Command-groupList {
1516
1516
  list-style: none;
1517
1517
  margin: 0;
1518
1518
  padding: 0;
1519
1519
  }
1520
- .bds2121Command-group {
1520
+ .bds2140Command-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
- .bds2121Command-item {
1528
+ .bds2140Command-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
- .bds2121Command-itemActive {
1536
+ .bds2140Command-itemActive {
1537
1537
  background-color: var(--command_item-bg--active, var(--bds-color_bg--subtle));
1538
1538
  }
1539
- .bds2121Command-itemLabel {
1539
+ .bds2140Command-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
- .bds2121Command-itemDesc {
1544
+ .bds2140Command-itemDesc {
1545
1545
  font-size: var(--bds-font_size--body--s);
1546
1546
  color: var(--bds-color_on-bg);
1547
1547
  }
1548
- .bds2121Command-shortcut {
1548
+ .bds2140Command-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
- .bds2121Command-empty {
1557
+ .bds2140Command-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
- .bds2121Command-srOnly {
1563
+ .bds2140Command-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.bds2121Dialog-component {
1576
- .bds2121Dialog-dialog {
1575
+ @layer boostdev.bds2140Dialog-component {
1576
+ .bds2140Dialog-dialog {
1577
1577
  font-size: var(--bds-font_size--body--s);
1578
1578
  border: var(--dialog_border, none);
1579
1579
  --bdc_color: currentcolor;
@@ -1589,17 +1589,17 @@
1589
1589
  max-block-size: 90svh;
1590
1590
  overflow: visible;
1591
1591
  }
1592
- .bds2121Dialog-dialog:not([open]) {
1592
+ .bds2140Dialog-dialog:not([open]) {
1593
1593
  display: none;
1594
1594
  }
1595
- .bds2121Dialog-dialogContent {
1595
+ .bds2140Dialog-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
- .bds2121Dialog-closeButton {
1602
+ .bds2140Dialog-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
- .bds2121Dialog-closeButton::after {
1620
+ .bds2140Dialog-closeButton::after {
1621
1621
  content: "";
1622
1622
  position: absolute;
1623
1623
  inset-block: -0.5rem;
1624
1624
  inset-inline: -0.5rem;
1625
1625
  }
1626
- .bds2121Dialog-closeButton:focus-visible {
1626
+ .bds2140Dialog-closeButton:focus-visible {
1627
1627
  outline: var(--bds-outline_default);
1628
1628
  outline-offset: var(--bds-outline_offset);
1629
1629
  }
1630
- .bds2121Dialog-closeButton svg {
1630
+ .bds2140Dialog-closeButton svg {
1631
1631
  inline-size: 1.25em;
1632
1632
  block-size: 1.25em;
1633
1633
  }
1634
- .bds2121Dialog-dialog::backdrop {
1634
+ .bds2140Dialog-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.bds2121Drawer-component {
1642
- .bds2121Drawer-drawer {
1641
+ @layer boostdev.bds2140Drawer-component {
1642
+ .bds2140Drawer-drawer {
1643
1643
  position: fixed;
1644
1644
  inset-block: 0;
1645
1645
  inset-inline: auto 0;
@@ -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
- .bds2121Drawer-drawer:not([open]) {
1665
+ .bds2140Drawer-drawer:not([open]) {
1666
1666
  display: none;
1667
1667
  }
1668
- .bds2121Drawer-drawer:dir(rtl) {
1668
+ .bds2140Drawer-drawer:dir(rtl) {
1669
1669
  translate: -100% 0;
1670
1670
  }
1671
- .bds2121Drawer---side_left.bds2121Drawer-drawer {
1671
+ .bds2140Drawer---side_left.bds2140Drawer-drawer {
1672
1672
  inset-inline: 0 auto;
1673
1673
  translate: -100% 0;
1674
1674
  }
1675
- .bds2121Drawer---side_left.bds2121Drawer-drawer:dir(rtl) {
1675
+ .bds2140Drawer---side_left.bds2140Drawer-drawer:dir(rtl) {
1676
1676
  translate: 100% 0;
1677
1677
  }
1678
- .bds2121Drawer-drawer[open] {
1678
+ .bds2140Drawer-drawer[open] {
1679
1679
  translate: 0 0;
1680
1680
  }
1681
1681
  @starting-style {
1682
- .bds2121Drawer-drawer[open] {
1682
+ .bds2140Drawer-drawer[open] {
1683
1683
  translate: 100% 0;
1684
1684
  }
1685
- .bds2121Drawer-drawer[open]:dir(rtl) {
1685
+ .bds2140Drawer-drawer[open]:dir(rtl) {
1686
1686
  translate: -100% 0;
1687
1687
  }
1688
- .bds2121Drawer---side_left.bds2121Drawer-drawer[open] {
1688
+ .bds2140Drawer---side_left.bds2140Drawer-drawer[open] {
1689
1689
  translate: -100% 0;
1690
1690
  }
1691
- .bds2121Drawer---side_left.bds2121Drawer-drawer[open]:dir(rtl) {
1691
+ .bds2140Drawer---side_left.bds2140Drawer-drawer[open]:dir(rtl) {
1692
1692
  translate: 100% 0;
1693
1693
  }
1694
1694
  }
1695
- .bds2121Drawer-drawer::backdrop {
1695
+ .bds2140Drawer-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,23 +1701,23 @@
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
- .bds2121Drawer-drawer[open]::backdrop {
1704
+ .bds2140Drawer-drawer[open]::backdrop {
1705
1705
  opacity: 1;
1706
1706
  }
1707
1707
  @starting-style {
1708
- .bds2121Drawer-drawer[open]::backdrop {
1708
+ .bds2140Drawer-drawer[open]::backdrop {
1709
1709
  opacity: 0;
1710
1710
  }
1711
1711
  }
1712
- .bds2121Drawer-header {
1712
+ .bds2140Drawer-header {
1713
1713
  display: flex;
1714
1714
  align-items: center;
1715
1715
  justify-content: space-between;
1716
1716
  padding: var(--bds-space_m) var(--bds-space_l);
1717
- border-block-end: 1px solid currentcolor;
1717
+ border-block-end: 1px solid var(--drawer_border-color, var(--bds-color_on-bg--as-surface, var(--bds-color_on-bg--border, var(--bds-color_on-bg))));
1718
1718
  flex-shrink: 0;
1719
1719
  }
1720
- .bds2121Drawer-closeButton {
1720
+ .bds2140Drawer-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
- .bds2121Drawer-closeButton svg {
1731
+ .bds2140Drawer-closeButton svg {
1732
1732
  inline-size: 1.25rem;
1733
1733
  block-size: 1.25rem;
1734
1734
  }
1735
- .bds2121Drawer-closeButton:focus-visible {
1735
+ .bds2140Drawer-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
- .bds2121Drawer-closeButton:hover {
1740
+ .bds2140Drawer-closeButton:hover {
1741
1741
  background-color: var(--drawer_close-bg--hover, var(--bds-color_bg--subtle));
1742
1742
  }
1743
1743
  }
1744
- .bds2121Drawer-body {
1744
+ .bds2140Drawer-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
- .bds2121Drawer-drawer,
1753
- .bds2121Drawer-drawer::backdrop {
1752
+ .bds2140Drawer-drawer,
1753
+ .bds2140Drawer-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.bds2121DropdownMenu-component {
1761
- .bds2121DropdownMenu-wrapper {
1760
+ @layer boostdev.bds2140DropdownMenu-component {
1761
+ .bds2140DropdownMenu-wrapper {
1762
1762
  position: relative;
1763
1763
  display: inline-flex;
1764
1764
  }
1765
- .bds2121DropdownMenu-menu {
1765
+ .bds2140DropdownMenu-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);
@@ -1778,22 +1778,21 @@
1778
1778
  list-style: none;
1779
1779
  margin: 0;
1780
1780
  }
1781
- .bds2121DropdownMenu-menu li {
1781
+ .bds2140DropdownMenu-menu li {
1782
1782
  list-style: none;
1783
1783
  }
1784
- .bds2121DropdownMenu---placement_bottom-start {
1784
+ .bds2140DropdownMenu---placement_bottom-start {
1785
1785
  inset-inline-start: 0;
1786
1786
  }
1787
- .bds2121DropdownMenu---placement_bottom-end {
1787
+ .bds2140DropdownMenu---placement_bottom-end {
1788
1788
  inset-inline-end: 0;
1789
1789
  }
1790
- .bds2121DropdownMenu-separator {
1790
+ .bds2140DropdownMenu-separator {
1791
1791
  border: none;
1792
- border-block-start: 1px solid currentcolor;
1792
+ border-block-start: 1px solid var(--dropdown_separator-color, var(--bds-color_on-bg--as-surface, var(--bds-color_on-bg--border, var(--bds-color_on-bg))));
1793
1793
  margin: var(--bds-space_xxs) 0;
1794
- opacity: 0.15;
1795
1794
  }
1796
- .bds2121DropdownMenu-item {
1795
+ .bds2140DropdownMenu-item {
1797
1796
  all: unset;
1798
1797
  display: flex;
1799
1798
  align-items: center;
@@ -1807,22 +1806,22 @@
1807
1806
  box-sizing: border-box;
1808
1807
  transition: var(--bds-animation_transition);
1809
1808
  }
1810
- .bds2121DropdownMenu-item:disabled {
1809
+ .bds2140DropdownMenu-item:disabled {
1811
1810
  opacity: 0.4;
1812
1811
  cursor: not-allowed;
1813
1812
  }
1814
- .bds2121DropdownMenu-item:focus-visible {
1813
+ .bds2140DropdownMenu-item:focus-visible {
1815
1814
  outline: var(--bds-outline_default);
1816
1815
  outline-offset: calc(var(--bds-outline_offset) * -1);
1817
1816
  border-radius: var(--bds-border_radius--xs);
1818
1817
  }
1819
1818
  @media (hover: hover) and (pointer: fine) {
1820
- .bds2121DropdownMenu-item:not(:disabled):hover {
1819
+ .bds2140DropdownMenu-item:not(:disabled):hover {
1821
1820
  background-color: var(--dropdown_item-bg--hover, var(--bds-color_bg--subtle));
1822
1821
  color: var(--dropdown_item-color--hover, var(--bds-color_interactive_on-bg));
1823
1822
  }
1824
1823
  }
1825
- .bds2121DropdownMenu-icon {
1824
+ .bds2140DropdownMenu-icon {
1826
1825
  display: flex;
1827
1826
  align-items: center;
1828
1827
  flex-shrink: 0;
@@ -1830,11 +1829,11 @@
1830
1829
  }
1831
1830
 
1832
1831
  /* src/components/interaction/Popover/Popover.module.css */
1833
- @layer boostdev.bds2121Popover-component {
1834
- .bds2121Popover-wrapper {
1832
+ @layer boostdev.bds2140Popover-component {
1833
+ .bds2140Popover-wrapper {
1835
1834
  display: inline-flex;
1836
1835
  }
1837
- .bds2121Popover-panel {
1836
+ .bds2140Popover-panel {
1838
1837
  position: fixed;
1839
1838
  inset: unset;
1840
1839
  margin: 0;
@@ -1853,7 +1852,7 @@
1853
1852
  color: var(--popover_on-color, var(--bds-color_on-bg));
1854
1853
  font-size: var(--bds-font_size--body);
1855
1854
  }
1856
- .bds2121Popover-panel[data-placement=bottom] {
1855
+ .bds2140Popover-panel[data-placement=bottom] {
1857
1856
  top: anchor(bottom);
1858
1857
  left: anchor(left);
1859
1858
  margin-block-start: var(--bds-space_xs);
@@ -1862,7 +1861,7 @@
1862
1861
  --popover-right,
1863
1862
  --popover-left;
1864
1863
  }
1865
- .bds2121Popover-panel[data-placement=top] {
1864
+ .bds2140Popover-panel[data-placement=top] {
1866
1865
  bottom: anchor(top);
1867
1866
  left: anchor(left);
1868
1867
  margin-block-end: var(--bds-space_xs);
@@ -1871,7 +1870,7 @@
1871
1870
  --popover-right,
1872
1871
  --popover-left;
1873
1872
  }
1874
- .bds2121Popover-panel[data-placement=right] {
1873
+ .bds2140Popover-panel[data-placement=right] {
1875
1874
  top: anchor(top);
1876
1875
  left: anchor(right);
1877
1876
  margin-inline-start: var(--bds-space_xs);
@@ -1880,7 +1879,7 @@
1880
1879
  --popover-bottom,
1881
1880
  --popover-top;
1882
1881
  }
1883
- .bds2121Popover-panel[data-placement=left] {
1882
+ .bds2140Popover-panel[data-placement=left] {
1884
1883
  top: anchor(top);
1885
1884
  right: anchor(left);
1886
1885
  margin-inline-end: var(--bds-space_xs);
@@ -1938,10 +1937,10 @@
1938
1937
  margin-block-end: var(--bds-space_xs);
1939
1938
  }
1940
1939
  @media (width <= 420px) {
1941
- .bds2121Popover-panel[data-placement=bottom],
1942
- .bds2121Popover-panel[data-placement=top],
1943
- .bds2121Popover-panel[data-placement=left],
1944
- .bds2121Popover-panel[data-placement=right] {
1940
+ .bds2140Popover-panel[data-placement=bottom],
1941
+ .bds2140Popover-panel[data-placement=top],
1942
+ .bds2140Popover-panel[data-placement=left],
1943
+ .bds2140Popover-panel[data-placement=right] {
1945
1944
  inset-inline: var(--bds-space_xs);
1946
1945
  inline-size: 100%;
1947
1946
  max-inline-size: calc(100svw - 2 * var(--bds-space_xs));
@@ -1949,13 +1948,13 @@
1949
1948
  }
1950
1949
  }
1951
1950
  @media (aspect-ratio >= 2/1) {
1952
- .bds2121Popover-panel[data-placement=bottom] {
1951
+ .bds2140Popover-panel[data-placement=bottom] {
1953
1952
  position-try-fallbacks:
1954
1953
  --popover-top,
1955
1954
  --popover-right,
1956
1955
  --popover-left;
1957
1956
  }
1958
- .bds2121Popover-panel[data-placement=top] {
1957
+ .bds2140Popover-panel[data-placement=top] {
1959
1958
  position-try-fallbacks:
1960
1959
  --popover-bottom,
1961
1960
  --popover-right,
@@ -1965,24 +1964,24 @@
1965
1964
  }
1966
1965
 
1967
1966
  /* src/components/interaction/Rating/Rating.module.css */
1968
- @layer boostdev.bds2121Rating-component {
1969
- .bds2121Rating-rating {
1967
+ @layer boostdev.bds2140Rating-component {
1968
+ .bds2140Rating-rating {
1970
1969
  display: inline-flex;
1971
1970
  gap: var(--bds-space_xxxs);
1972
1971
  color: var(--rating_color, var(--bds-color_bg));
1973
1972
  }
1974
- .bds2121Rating-star {
1973
+ .bds2140Rating-star {
1975
1974
  inline-size: 1.5em;
1976
1975
  block-size: 1.5em;
1977
1976
  }
1978
- .bds2121Rating---filled {
1977
+ .bds2140Rating---filled {
1979
1978
  color: var(--rating_color--filled, var(--bds-color_warning));
1980
1979
  }
1981
1980
  }
1982
1981
 
1983
1982
  /* src/components/interaction/Toast/Toast.module.css */
1984
- @layer boostdev.bds2121Toast-component {
1985
- .bds2121Toast-toastContainer {
1983
+ @layer boostdev.bds2140Toast-component {
1984
+ .bds2140Toast-toastContainer {
1986
1985
  position: fixed;
1987
1986
  inset: unset;
1988
1987
  inset-block-end: var(--bds-space_xl);
@@ -1994,7 +1993,7 @@
1994
1993
  padding: 0;
1995
1994
  background: transparent;
1996
1995
  }
1997
- .bds2121Toast-toast {
1996
+ .bds2140Toast-toast {
1998
1997
  padding: var(--bds-space_m) var(--bds-space_l);
1999
1998
  background-color: var(--toast_color, var(--toast_color--variant, var(--bds-color_bg--strong, var(--bds-color_bg))));
2000
1999
  color: var(--toast_on-color, var(--toast_on-color--variant, var(--bds-color_on-bg)));
@@ -2006,29 +2005,29 @@
2006
2005
  min-inline-size: min(300px, calc(100svw - 2 * var(--bds-space_xl)));
2007
2006
  animation: slideIn var(--bds-animation_duration--fast) var(--bds-animation_easing);
2008
2007
  }
2009
- .bds2121Toast-toast:dir(rtl) {
2008
+ .bds2140Toast-toast:dir(rtl) {
2010
2009
  --toast_slide-offset: -100%;
2011
2010
  }
2012
- .bds2121Toast-toast.bds2121Toast---variant_success {
2011
+ .bds2140Toast-toast.bds2140Toast---variant_success {
2013
2012
  --toast_color--variant: var(--toast_color--success, var(--bds-color_success));
2014
2013
  --toast_on-color--variant: var(--toast_on-color--success, var(--bds-color_on-success));
2015
2014
  }
2016
- .bds2121Toast-toast.bds2121Toast---variant_warning {
2015
+ .bds2140Toast-toast.bds2140Toast---variant_warning {
2017
2016
  --toast_color--variant: var(--toast_color--warning, var(--bds-color_warning));
2018
2017
  --toast_on-color--variant: var(--toast_on-color--warning, var(--bds-color_on-warning));
2019
2018
  }
2020
- .bds2121Toast-toast.bds2121Toast---variant_info {
2019
+ .bds2140Toast-toast.bds2140Toast---variant_info {
2021
2020
  --toast_color--variant: var(--toast_color--info, var(--bds-color_bg--subtle));
2022
2021
  --toast_on-color--variant: var(--toast_on-color--info, var(--bds-color_on-bg--subtle));
2023
2022
  }
2024
- .bds2121Toast-toast.bds2121Toast---variant_error {
2023
+ .bds2140Toast-toast.bds2140Toast---variant_error {
2025
2024
  --toast_color--variant: var(--toast_color--error, var(--bds-color_error));
2026
2025
  --toast_on-color--variant: var(--toast_on-color--error, var(--bds-color_on-error));
2027
2026
  }
2028
- .bds2121Toast-message {
2027
+ .bds2140Toast-message {
2029
2028
  flex: 1;
2030
2029
  }
2031
- .bds2121Toast-closeButton {
2030
+ .bds2140Toast-closeButton {
2032
2031
  position: relative;
2033
2032
  display: flex;
2034
2033
  align-items: center;
@@ -2042,16 +2041,16 @@
2042
2041
  cursor: pointer;
2043
2042
  color: currentcolor;
2044
2043
  }
2045
- .bds2121Toast-closeButton::after {
2044
+ .bds2140Toast-closeButton::after {
2046
2045
  content: "";
2047
2046
  position: absolute;
2048
2047
  inset: -0.75rem;
2049
2048
  }
2050
- .bds2121Toast-closeButton:focus-visible {
2049
+ .bds2140Toast-closeButton:focus-visible {
2051
2050
  outline: var(--bds-outline_default);
2052
2051
  outline-offset: var(--bds-outline_offset);
2053
2052
  }
2054
- .bds2121Toast-closeButton svg {
2053
+ .bds2140Toast-closeButton svg {
2055
2054
  inline-size: 1rem;
2056
2055
  block-size: 1rem;
2057
2056
  }
@@ -2067,25 +2066,25 @@
2067
2066
  }
2068
2067
  }
2069
2068
  @media (prefers-reduced-motion: reduce) {
2070
- .bds2121Toast-toast {
2069
+ .bds2140Toast-toast {
2071
2070
  animation: none;
2072
2071
  }
2073
2072
  }
2074
2073
 
2075
2074
  /* src/components/interaction/form/Checkbox/Checkbox.module.css */
2076
- @layer boostdev.bds2121Checkbox-component {
2077
- .bds2121Checkbox-checkboxGroup {
2075
+ @layer boostdev.bds2140Checkbox-component {
2076
+ .bds2140Checkbox-checkboxGroup {
2078
2077
  --checkbox_size: calc(var(--bds-space_s) * 2);
2079
2078
  --inputSize: var(--checkbox_size);
2080
2079
  display: flex;
2081
2080
  flex-direction: column;
2082
2081
  }
2083
- .bds2121Checkbox-inputWrapper {
2082
+ .bds2140Checkbox-inputWrapper {
2084
2083
  display: flex;
2085
2084
  align-items: stretch;
2086
2085
  gap: var(--checkbox_gap, var(--bds-space_m));
2087
2086
  }
2088
- .bds2121Checkbox-checkbox {
2087
+ .bds2140Checkbox-checkbox {
2089
2088
  margin-block-start: var(--checkbox_offset, 0.25em);
2090
2089
  inline-size: var(--checkbox_size);
2091
2090
  block-size: var(--checkbox_size);
@@ -2101,11 +2100,11 @@
2101
2100
  position: relative;
2102
2101
  transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing), background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
2103
2102
  }
2104
- .bds2121Checkbox-checkbox:checked {
2103
+ .bds2140Checkbox-checkbox:checked {
2105
2104
  background-color: var(--checkbox_color-active, var(--bdc-color_active));
2106
2105
  --bdc_color: var(--checkbox_color-active, var(--bdc-color_active));
2107
2106
  }
2108
- .bds2121Checkbox-checkbox:checked::after {
2107
+ .bds2140Checkbox-checkbox:checked::after {
2109
2108
  content: "";
2110
2109
  position: absolute;
2111
2110
  inset-inline-start: 0.6em;
@@ -2116,40 +2115,40 @@
2116
2115
  border-width: 0 2px 2px 0;
2117
2116
  transform: rotate(45deg);
2118
2117
  }
2119
- .bds2121Checkbox-checkbox:focus {
2118
+ .bds2140Checkbox-checkbox:focus {
2120
2119
  --bdc_color: var(--bdc_color--focus);
2121
2120
  }
2122
- .bds2121Checkbox-checkbox:focus-visible {
2121
+ .bds2140Checkbox-checkbox:focus-visible {
2123
2122
  outline: var(--bds-outline_default);
2124
2123
  outline-offset: var(--bds-outline_offset);
2125
2124
  }
2126
- .bds2121Checkbox-checkbox:disabled {
2125
+ .bds2140Checkbox-checkbox:disabled {
2127
2126
  opacity: 0.5;
2128
2127
  cursor: not-allowed;
2129
2128
  }
2130
- .bds2121Checkbox-checkboxError {
2129
+ .bds2140Checkbox-checkboxError {
2131
2130
  --bdc_color: var(--bdc_color--error);
2132
2131
  }
2133
2132
  }
2134
2133
 
2135
2134
  /* src/components/interaction/form/atoms/Message.module.css */
2136
- @layer boostdev.bds2121Message-component {
2137
- .bds2121Message-error,
2138
- .bds2121Message-hint {
2135
+ @layer boostdev.bds2140Message-component {
2136
+ .bds2140Message-error,
2137
+ .bds2140Message-hint {
2139
2138
  font-size: var(--bds-font_size--body--s);
2140
2139
  margin-inline-start: var(--labelPosition, 0);
2141
2140
  }
2142
- .bds2121Message-error {
2141
+ .bds2140Message-error {
2143
2142
  color: var(--bds-color_error_on-bg);
2144
2143
  }
2145
- .bds2121Message-hint {
2144
+ .bds2140Message-hint {
2146
2145
  font-style: italic;
2147
2146
  }
2148
2147
  }
2149
2148
 
2150
2149
  /* src/components/interaction/form/atoms/Label.module.css */
2151
- @layer boostdev.bds2121Label-component {
2152
- .bds2121Label-label {
2150
+ @layer boostdev.bds2140Label-component {
2151
+ .bds2140Label-label {
2153
2152
  display: flex;
2154
2153
  align-items: center;
2155
2154
  font-family: var(--bds-font_family--body);
@@ -2159,8 +2158,8 @@
2159
2158
  }
2160
2159
 
2161
2160
  /* src/components/interaction/form/atoms/InputContainer.module.css */
2162
- @layer boostdev.bds2121InputContainer-component {
2163
- .bds2121InputContainer-container {
2161
+ @layer boostdev.bds2140InputContainer-component {
2162
+ .bds2140InputContainer-container {
2164
2163
  --labelPosition: calc(var(--inputSize) + var(--bds-space_m));
2165
2164
  display: flex;
2166
2165
  flex-direction: column;
@@ -2169,8 +2168,8 @@
2169
2168
  }
2170
2169
 
2171
2170
  /* src/components/interaction/form/CheckboxGroup/CheckboxGroup.module.css */
2172
- @layer boostdev.bds2121CheckboxGroup-component {
2173
- .bds2121CheckboxGroup-group {
2171
+ @layer boostdev.bds2140CheckboxGroup-component {
2172
+ .bds2140CheckboxGroup-group {
2174
2173
  border: none;
2175
2174
  padding: 0;
2176
2175
  margin: 0;
@@ -2178,7 +2177,7 @@
2178
2177
  flex-direction: column;
2179
2178
  gap: var(--checkboxGroup_gap, var(--bds-space_xs));
2180
2179
  }
2181
- .bds2121CheckboxGroup-legend {
2180
+ .bds2140CheckboxGroup-legend {
2182
2181
  font-family: var(--checkboxGroup_legend-font-family, var(--bds-font_family--body));
2183
2182
  font-size: var(--checkboxGroup_legend-font-size, var(--bds-font_size--body--s));
2184
2183
  font-weight: var(--checkboxGroup_legend-font-weight, var(--bds-font_weight--medium));
@@ -2186,10 +2185,10 @@
2186
2185
  padding: 0;
2187
2186
  margin-block-end: var(--checkboxGroup_legend-gap, var(--bds-space_xs));
2188
2187
  }
2189
- .bds2121CheckboxGroup-required {
2188
+ .bds2140CheckboxGroup-required {
2190
2189
  color: var(--checkboxGroup_required-color, var(--bds-color_error));
2191
2190
  }
2192
- .bds2121CheckboxGroup-requiredLabel {
2191
+ .bds2140CheckboxGroup-requiredLabel {
2193
2192
  position: absolute;
2194
2193
  inline-size: 1px;
2195
2194
  block-size: 1px;
@@ -2200,7 +2199,7 @@
2200
2199
  white-space: nowrap;
2201
2200
  border-width: 0;
2202
2201
  }
2203
- .bds2121CheckboxGroup-items {
2202
+ .bds2140CheckboxGroup-items {
2204
2203
  display: flex;
2205
2204
  flex-direction: column;
2206
2205
  gap: var(--checkboxGroup_items-gap, var(--bds-space_xs));
@@ -2208,17 +2207,17 @@
2208
2207
  }
2209
2208
 
2210
2209
  /* src/components/interaction/form/Combobox/Combobox.module.css */
2211
- @layer boostdev.bds2121Combobox-component {
2212
- .bds2121Combobox-formGroup {
2210
+ @layer boostdev.bds2140Combobox-component {
2211
+ .bds2140Combobox-formGroup {
2213
2212
  display: flex;
2214
2213
  flex-direction: column;
2215
2214
  }
2216
- .bds2121Combobox-inputWrapper {
2215
+ .bds2140Combobox-inputWrapper {
2217
2216
  position: relative;
2218
2217
  display: flex;
2219
2218
  align-items: center;
2220
2219
  }
2221
- .bds2121Combobox-input {
2220
+ .bds2140Combobox-input {
2222
2221
  appearance: none;
2223
2222
  inline-size: 100%;
2224
2223
  font-family: var(--bds-font_family--body);
@@ -2234,21 +2233,21 @@
2234
2233
  color: var(--combobox_color, var(--bds-color_on-bg));
2235
2234
  transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing), background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
2236
2235
  }
2237
- .bds2121Combobox-input:focus {
2236
+ .bds2140Combobox-input:focus {
2238
2237
  --bdc_color: var(--bdc_color--focus);
2239
2238
  }
2240
- .bds2121Combobox-input:focus-visible {
2239
+ .bds2140Combobox-input:focus-visible {
2241
2240
  outline: var(--bds-outline_default);
2242
2241
  outline-offset: var(--bds-outline_offset);
2243
2242
  }
2244
- .bds2121Combobox-input:disabled {
2243
+ .bds2140Combobox-input:disabled {
2245
2244
  opacity: 0.5;
2246
2245
  cursor: not-allowed;
2247
2246
  }
2248
- .bds2121Combobox-inputError {
2247
+ .bds2140Combobox-inputError {
2249
2248
  --bdc_color: var(--bdc_color--error);
2250
2249
  }
2251
- .bds2121Combobox-chevron {
2250
+ .bds2140Combobox-chevron {
2252
2251
  position: absolute;
2253
2252
  inset-inline-end: var(--bds-space_s);
2254
2253
  display: flex;
@@ -2256,11 +2255,11 @@
2256
2255
  pointer-events: none;
2257
2256
  color: var(--combobox_color, var(--bds-color_on-bg));
2258
2257
  }
2259
- .bds2121Combobox-chevron svg {
2258
+ .bds2140Combobox-chevron svg {
2260
2259
  inline-size: 1rem;
2261
2260
  block-size: 1rem;
2262
2261
  }
2263
- .bds2121Combobox-listbox {
2262
+ .bds2140Combobox-listbox {
2264
2263
  position: absolute;
2265
2264
  inset-block-start: calc(100% + var(--bds-space_xxs));
2266
2265
  inset-inline: 0;
@@ -2278,7 +2277,7 @@
2278
2277
  color: var(--combobox_on-color, var(--bds-color_on-bg));
2279
2278
  box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--combobox_listbox-shadow, var(--bds-shadow_m));
2280
2279
  }
2281
- .bds2121Combobox-option {
2280
+ .bds2140Combobox-option {
2282
2281
  display: flex;
2283
2282
  align-items: center;
2284
2283
  padding: var(--combobox_option-padding-block, var(--bds-space_xs)) var(--combobox_option-padding-inline, var(--bds-space_m));
@@ -2287,29 +2286,29 @@
2287
2286
  cursor: pointer;
2288
2287
  transition: var(--bds-animation_transition);
2289
2288
  }
2290
- .bds2121Combobox-option.bds2121Combobox---highlighted {
2289
+ .bds2140Combobox-option.bds2140Combobox---highlighted {
2291
2290
  background-color: var(--combobox_option-bg--highlighted, var(--bds-color_bg--subtle));
2292
2291
  color: var(--combobox_option-color--highlighted, var(--bds-color_interactive_on-bg));
2293
2292
  }
2294
- .bds2121Combobox-option.bds2121Combobox---selected {
2293
+ .bds2140Combobox-option.bds2140Combobox---selected {
2295
2294
  font-weight: var(--bds-font_weight--semibold);
2296
2295
  }
2297
- .bds2121Combobox-option.bds2121Combobox---disabled {
2296
+ .bds2140Combobox-option.bds2140Combobox---disabled {
2298
2297
  opacity: 0.4;
2299
2298
  cursor: not-allowed;
2300
2299
  }
2301
2300
  }
2302
2301
 
2303
2302
  /* src/components/interaction/form/FieldGroup/FieldGroup.module.css */
2304
- @layer boostdev.bds2121FieldGroup-component {
2305
- .bds2121FieldGroup-fieldGroup {
2303
+ @layer boostdev.bds2140FieldGroup-component {
2304
+ .bds2140FieldGroup-fieldGroup {
2306
2305
  border: 0;
2307
2306
  margin: 0;
2308
2307
  padding: 0;
2309
2308
  min-inline-size: 0;
2310
2309
  --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
2310
  }
2312
- .bds2121FieldGroup-legend {
2311
+ .bds2140FieldGroup-legend {
2313
2312
  inline-size: 100%;
2314
2313
  padding-inline: 0;
2315
2314
  padding-block: var(--fieldGroup_legend-padding-block, var(--bds-space_xs));
@@ -2321,28 +2320,28 @@
2321
2320
  font-weight: var(--fieldGroup_legend-font-weight, var(--bds-font_weight--semibold));
2322
2321
  line-height: var(--fieldGroup_legend-line-height, var(--bds-font_line-height--heading));
2323
2322
  }
2324
- .bds2121FieldGroup-fieldGroup:disabled .bds2121FieldGroup-legend {
2323
+ .bds2140FieldGroup-fieldGroup:disabled .bds2140FieldGroup-legend {
2325
2324
  opacity: 0.5;
2326
2325
  }
2327
- .bds2121FieldGroup-fields {
2326
+ .bds2140FieldGroup-fields {
2328
2327
  display: flex;
2329
2328
  flex-direction: column;
2330
2329
  gap: var(--fieldGroup_gap, var(--bds-space_m));
2331
2330
  }
2332
- .bds2121FieldGroup-fieldGroup.bds2121FieldGroup---variant_horizontal .bds2121FieldGroup-fields {
2331
+ .bds2140FieldGroup-fieldGroup.bds2140FieldGroup---variant_horizontal .bds2140FieldGroup-fields {
2333
2332
  flex-flow: row wrap;
2334
2333
  }
2335
- .bds2121FieldGroup-fieldGroup.bds2121FieldGroup---variant_horizontal .bds2121FieldGroup-fields > * {
2334
+ .bds2140FieldGroup-fieldGroup.bds2140FieldGroup---variant_horizontal .bds2140FieldGroup-fields > * {
2336
2335
  flex: 1 1 var(--fieldGroup_min-field-width, 12rem);
2337
2336
  min-inline-size: 0;
2338
2337
  }
2339
- .bds2121FieldGroup-probeContainer {
2338
+ .bds2140FieldGroup-probeContainer {
2340
2339
  position: relative;
2341
2340
  inline-size: 0;
2342
2341
  block-size: 0;
2343
2342
  overflow: hidden;
2344
2343
  }
2345
- .bds2121FieldGroup-probe {
2344
+ .bds2140FieldGroup-probe {
2346
2345
  position: absolute;
2347
2346
  inset-block-start: 0;
2348
2347
  inset-inline-start: 0;
@@ -2350,28 +2349,28 @@
2350
2349
  inline-size: var(--fieldGroup_collapse-threshold);
2351
2350
  visibility: hidden;
2352
2351
  }
2353
- .bds2121FieldGroup-fieldGroup.bds2121FieldGroup---variant_horizontal[data-collapsed=true] .bds2121FieldGroup-fields {
2352
+ .bds2140FieldGroup-fieldGroup.bds2140FieldGroup---variant_horizontal[data-collapsed=true] .bds2140FieldGroup-fields {
2354
2353
  flex-direction: column;
2355
2354
  }
2356
- .bds2121FieldGroup-fieldGroup.bds2121FieldGroup---variant_horizontal[data-collapsed=true] .bds2121FieldGroup-fields > * {
2355
+ .bds2140FieldGroup-fieldGroup.bds2140FieldGroup---variant_horizontal[data-collapsed=true] .bds2140FieldGroup-fields > * {
2357
2356
  flex: 1 1 auto;
2358
2357
  }
2359
2358
  }
2360
2359
 
2361
2360
  /* src/components/interaction/form/FileInput/FileInput.module.css */
2362
- @layer boostdev.bds2121FileInput-component {
2363
- .bds2121FileInput-formGroup {
2361
+ @layer boostdev.bds2140FileInput-component {
2362
+ .bds2140FileInput-formGroup {
2364
2363
  display: flex;
2365
2364
  flex-direction: column;
2366
2365
  }
2367
- .bds2121FileInput-fieldLabel {
2366
+ .bds2140FileInput-fieldLabel {
2368
2367
  display: flex;
2369
2368
  align-items: center;
2370
2369
  font-family: var(--bds-font_family--body);
2371
2370
  color: var(--bds-color_on-bg);
2372
2371
  margin-block-end: var(--fileInput_label-margin, var(--bds-space_xs));
2373
2372
  }
2374
- .bds2121FileInput-dropZone {
2373
+ .bds2140FileInput-dropZone {
2375
2374
  display: flex;
2376
2375
  flex-direction: column;
2377
2376
  align-items: center;
@@ -2385,40 +2384,40 @@
2385
2384
  text-align: center;
2386
2385
  transition: var(--bds-animation_transition);
2387
2386
  }
2388
- .bds2121FileInput-dropZone:focus-within {
2387
+ .bds2140FileInput-dropZone:focus-within {
2389
2388
  outline: var(--bds-outline_default);
2390
2389
  outline-offset: var(--bds-outline_offset);
2391
2390
  border-color: var(--fileInput_border-color, currentcolor);
2392
2391
  }
2393
- .bds2121FileInput-isDragging {
2392
+ .bds2140FileInput-isDragging {
2394
2393
  border-color: currentcolor;
2395
2394
  background-color: var(--fileInput_bg--dragging, rgb(from currentcolor r g b / 8%));
2396
2395
  }
2397
- .bds2121FileInput-hasError {
2396
+ .bds2140FileInput-hasError {
2398
2397
  border-color: var(--bds-color_error);
2399
2398
  }
2400
- .bds2121FileInput-isDisabled {
2399
+ .bds2140FileInput-isDisabled {
2401
2400
  opacity: 0.5;
2402
2401
  cursor: not-allowed;
2403
2402
  }
2404
- .bds2121FileInput-icon {
2403
+ .bds2140FileInput-icon {
2405
2404
  inline-size: 2rem;
2406
2405
  block-size: 2rem;
2407
2406
  flex-shrink: 0;
2408
2407
  }
2409
- .bds2121FileInput-prompt {
2408
+ .bds2140FileInput-prompt {
2410
2409
  font-size: var(--fileInput_font-size, var(--bds-font_size--body));
2411
2410
  color: var(--bds-color_on-bg);
2412
2411
  }
2413
- .bds2121FileInput-prompt strong {
2412
+ .bds2140FileInput-prompt strong {
2414
2413
  color: var(--bds-color_interactive_on-bg);
2415
2414
  font-weight: var(--bds-font_weight--semibold);
2416
2415
  }
2417
- .bds2121FileInput-acceptHint {
2416
+ .bds2140FileInput-acceptHint {
2418
2417
  font-size: var(--fileInput_font-size--hint, var(--bds-font_size--body--s));
2419
2418
  color: var(--bds-color_on-bg);
2420
2419
  }
2421
- .bds2121FileInput-hiddenInput {
2420
+ .bds2140FileInput-hiddenInput {
2422
2421
  position: absolute;
2423
2422
  inline-size: 1px;
2424
2423
  block-size: 1px;
@@ -2428,7 +2427,7 @@
2428
2427
  border: 0;
2429
2428
  }
2430
2429
  @media (hover: hover) and (pointer: fine) {
2431
- .bds2121FileInput-dropZone:not(.bds2121FileInput-isDisabled):hover {
2430
+ .bds2140FileInput-dropZone:not(.bds2140FileInput-isDisabled):hover {
2432
2431
  border-color: var(--fileInput_border-color--hover, var(--bds-color_interactive));
2433
2432
  background-color: var(--fileInput_bg--hover, rgb(from var(--bds-color_interactive) r g b / 4%));
2434
2433
  }
@@ -2436,13 +2435,13 @@
2436
2435
  }
2437
2436
 
2438
2437
  /* src/components/interaction/form/FormInput/FormInput.module.css */
2439
- @layer boostdev.bds2121FormInput-component {
2440
- .bds2121FormInput-formGroup {
2438
+ @layer boostdev.bds2140FormInput-component {
2439
+ .bds2140FormInput-formGroup {
2441
2440
  --labelPosition: 0;
2442
2441
  display: flex;
2443
2442
  flex-direction: column;
2444
2443
  }
2445
- .bds2121FormInput-input {
2444
+ .bds2140FormInput-input {
2446
2445
  font-family: var(--formInput_font-family, var(--bds-font_family--body));
2447
2446
  font-size: var(--formInput_font-size, var(--bds-font_size--body));
2448
2447
  padding: var(--formInput_padding, var(--bds-space_s));
@@ -2455,29 +2454,29 @@
2455
2454
  background-color: var(--formInput_color_bg, var(--input_color_bg, var(--bds-color_bg)));
2456
2455
  transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing), background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
2457
2456
  }
2458
- .bds2121FormInput-input:focus {
2457
+ .bds2140FormInput-input:focus {
2459
2458
  --bdc_color: var(--bdc_color--focus);
2460
2459
  }
2461
- .bds2121FormInput-input:focus-visible {
2460
+ .bds2140FormInput-input:focus-visible {
2462
2461
  outline: var(--bds-outline_default);
2463
2462
  outline-offset: var(--bds-outline_offset);
2464
2463
  }
2465
- .bds2121FormInput-input:disabled {
2464
+ .bds2140FormInput-input:disabled {
2466
2465
  cursor: not-allowed;
2467
2466
  opacity: 0.5;
2468
2467
  }
2469
- .bds2121FormInput-inputError {
2468
+ .bds2140FormInput-inputError {
2470
2469
  --bdc_color: var(--bdc_color--error);
2471
2470
  }
2472
2471
  }
2473
2472
 
2474
2473
  /* src/components/interaction/form/NumberInput/NumberInput.module.css */
2475
- @layer boostdev.bds2121NumberInput-component {
2476
- .bds2121NumberInput-formGroup {
2474
+ @layer boostdev.bds2140NumberInput-component {
2475
+ .bds2140NumberInput-formGroup {
2477
2476
  display: flex;
2478
2477
  flex-direction: column;
2479
2478
  }
2480
- .bds2121NumberInput-inputRow {
2479
+ .bds2140NumberInput-inputRow {
2481
2480
  display: flex;
2482
2481
  align-items: stretch;
2483
2482
  border: var(--numberInput_border, none);
@@ -2489,14 +2488,14 @@
2489
2488
  overflow: hidden;
2490
2489
  transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing);
2491
2490
  }
2492
- .bds2121NumberInput-inputRow:focus-within {
2491
+ .bds2140NumberInput-inputRow:focus-within {
2493
2492
  --bdc_color: var(--bdc_color--focus);
2494
2493
  }
2495
- .bds2121NumberInput-inputRow:focus-within:has(:focus-visible) {
2494
+ .bds2140NumberInput-inputRow:focus-within:has(:focus-visible) {
2496
2495
  outline: var(--bds-outline_default);
2497
2496
  outline-offset: var(--bds-outline_offset);
2498
2497
  }
2499
- .bds2121NumberInput-input {
2498
+ .bds2140NumberInput-input {
2500
2499
  flex: 1;
2501
2500
  border: none;
2502
2501
  outline: none;
@@ -2509,14 +2508,14 @@
2509
2508
  min-inline-size: 0;
2510
2509
  appearance: textfield;
2511
2510
  }
2512
- .bds2121NumberInput-input::-webkit-inner-spin-button,
2513
- .bds2121NumberInput-input::-webkit-outer-spin-button {
2511
+ .bds2140NumberInput-input::-webkit-inner-spin-button,
2512
+ .bds2140NumberInput-input::-webkit-outer-spin-button {
2514
2513
  appearance: none;
2515
2514
  }
2516
- .bds2121NumberInput-inputError {
2515
+ .bds2140NumberInput-inputError {
2517
2516
  --bdc_color: var(--bdc_color--error);
2518
2517
  }
2519
- .bds2121NumberInput-stepper {
2518
+ .bds2140NumberInput-stepper {
2520
2519
  all: unset;
2521
2520
  display: flex;
2522
2521
  align-items: center;
@@ -2529,25 +2528,25 @@
2529
2528
  transition: var(--bds-animation_transition);
2530
2529
  flex-shrink: 0;
2531
2530
  }
2532
- .bds2121NumberInput-stepper svg {
2531
+ .bds2140NumberInput-stepper svg {
2533
2532
  inline-size: 1rem;
2534
2533
  block-size: 1rem;
2535
2534
  color: var(--numberInput_stepper-color, var(--bds-color_interactive));
2536
2535
  }
2537
- .bds2121NumberInput-stepper:first-child {
2536
+ .bds2140NumberInput-stepper:first-child {
2538
2537
  border-start-start-radius: var(--_radius);
2539
2538
  border-end-start-radius: var(--_radius);
2540
2539
  }
2541
- .bds2121NumberInput-stepper:last-child {
2540
+ .bds2140NumberInput-stepper:last-child {
2542
2541
  border-start-end-radius: var(--_radius);
2543
2542
  border-end-end-radius: var(--_radius);
2544
2543
  }
2545
- .bds2121NumberInput-stepper:disabled {
2544
+ .bds2140NumberInput-stepper:disabled {
2546
2545
  opacity: 0.4;
2547
2546
  cursor: not-allowed;
2548
2547
  }
2549
2548
  @media (hover: hover) and (pointer: fine) {
2550
- .bds2121NumberInput-stepper:not(:disabled):hover {
2549
+ .bds2140NumberInput-stepper:not(:disabled):hover {
2551
2550
  background-color: var(--numberInput_stepper-bg--hover, var(--bds-color_bg--subtle));
2552
2551
  opacity: var(--numberInput_stepper-opacity--hover, 0.7);
2553
2552
  }
@@ -2555,30 +2554,30 @@
2555
2554
  }
2556
2555
 
2557
2556
  /* src/components/interaction/form/Radio/Radio.module.css */
2558
- @layer boostdev.bds2121Radio-component {
2559
- .bds2121Radio-radioGroup {
2557
+ @layer boostdev.bds2140Radio-component {
2558
+ .bds2140Radio-radioGroup {
2560
2559
  --radio_size: calc(var(--bds-space_s) * 2);
2561
2560
  --inputSize: var(--radio_size);
2562
2561
  display: flex;
2563
2562
  flex-direction: column;
2564
2563
  }
2565
- .bds2121Radio-inputWrapper {
2564
+ .bds2140Radio-inputWrapper {
2566
2565
  display: flex;
2567
2566
  align-items: flex-start;
2568
2567
  gap: var(--bds-space_xs);
2569
2568
  }
2570
- .bds2121Radio-textWrapper {
2569
+ .bds2140Radio-textWrapper {
2571
2570
  display: flex;
2572
2571
  flex-direction: column;
2573
2572
  gap: var(--bds-space_xxxs);
2574
2573
  padding-block-start: var(--bds-space_xxxs);
2575
2574
  }
2576
- .bds2121Radio-description {
2575
+ .bds2140Radio-description {
2577
2576
  font-size: var(--bds-font_size--body--s);
2578
2577
  color: var(--radio_description-color, var(--bds-color_on-bg--subtle));
2579
2578
  line-height: var(--bds-font_line-height--body);
2580
2579
  }
2581
- .bds2121Radio-radio {
2580
+ .bds2140Radio-radio {
2582
2581
  flex-shrink: 0;
2583
2582
  margin-block-start: var(--radio_offset, 0.2em);
2584
2583
  inline-size: var(--radio_size);
@@ -2595,7 +2594,7 @@
2595
2594
  position: relative;
2596
2595
  transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing), background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
2597
2596
  }
2598
- .bds2121Radio-radio:checked {
2597
+ .bds2140Radio-radio:checked {
2599
2598
  background:
2600
2599
  radial-gradient(
2601
2600
  circle,
@@ -2603,29 +2602,29 @@
2603
2602
  var(--radio_color_bg, var(--bds-color_bg)) 42%);
2604
2603
  --bdc_color: var(--radio_color-active, var(--bdc-color_active));
2605
2604
  }
2606
- .bds2121Radio-radio:focus {
2605
+ .bds2140Radio-radio:focus {
2607
2606
  --bdc_color: var(--bdc_color--focus);
2608
2607
  }
2609
- .bds2121Radio-radio:focus-visible {
2608
+ .bds2140Radio-radio:focus-visible {
2610
2609
  outline: var(--bds-outline_default);
2611
2610
  outline-offset: var(--bds-outline_offset);
2612
2611
  }
2613
- .bds2121Radio-radio:disabled {
2612
+ .bds2140Radio-radio:disabled {
2614
2613
  cursor: not-allowed;
2615
2614
  opacity: 0.5;
2616
2615
  }
2617
- .bds2121Radio-radio:disabled ~ .bds2121Radio-textWrapper {
2616
+ .bds2140Radio-radio:disabled ~ .bds2140Radio-textWrapper {
2618
2617
  opacity: 0.5;
2619
2618
  cursor: not-allowed;
2620
2619
  }
2621
- .bds2121Radio-radioError {
2620
+ .bds2140Radio-radioError {
2622
2621
  --bdc_color: var(--bdc_color--error);
2623
2622
  }
2624
2623
  }
2625
2624
 
2626
2625
  /* src/components/interaction/form/RadioGroup/RadioGroup.module.css */
2627
- @layer boostdev.bds2121RadioGroup-component {
2628
- .bds2121RadioGroup-group {
2626
+ @layer boostdev.bds2140RadioGroup-component {
2627
+ .bds2140RadioGroup-group {
2629
2628
  border: none;
2630
2629
  padding: 0;
2631
2630
  margin: 0;
@@ -2633,7 +2632,7 @@
2633
2632
  flex-direction: column;
2634
2633
  gap: var(--radioGroup_gap, var(--bds-space_xs));
2635
2634
  }
2636
- .bds2121RadioGroup-legend {
2635
+ .bds2140RadioGroup-legend {
2637
2636
  font-family: var(--radioGroup_legend-font-family, var(--bds-font_family--body));
2638
2637
  font-size: var(--radioGroup_legend-font-size, var(--bds-font_size--body--s));
2639
2638
  font-weight: var(--radioGroup_legend-font-weight, var(--bds-font_weight--medium));
@@ -2641,10 +2640,10 @@
2641
2640
  padding: 0;
2642
2641
  margin-block-end: var(--radioGroup_legend-gap, var(--bds-space_xs));
2643
2642
  }
2644
- .bds2121RadioGroup-required {
2643
+ .bds2140RadioGroup-required {
2645
2644
  color: var(--radioGroup_required-color, var(--bds-color_error));
2646
2645
  }
2647
- .bds2121RadioGroup-requiredLabel {
2646
+ .bds2140RadioGroup-requiredLabel {
2648
2647
  position: absolute;
2649
2648
  inline-size: 1px;
2650
2649
  block-size: 1px;
@@ -2655,7 +2654,7 @@
2655
2654
  white-space: nowrap;
2656
2655
  border-width: 0;
2657
2656
  }
2658
- .bds2121RadioGroup-items {
2657
+ .bds2140RadioGroup-items {
2659
2658
  display: flex;
2660
2659
  flex-direction: column;
2661
2660
  gap: var(--radioGroup_items-gap, var(--bds-space_xs));
@@ -2663,8 +2662,8 @@
2663
2662
  }
2664
2663
 
2665
2664
  /* src/components/interaction/form/SegmentedControl/SegmentedControl.module.css */
2666
- @layer boostdev.bds2121SegmentedControl-component {
2667
- .bds2121SegmentedControl-control {
2665
+ @layer boostdev.bds2140SegmentedControl-component {
2666
+ .bds2140SegmentedControl-control {
2668
2667
  position: relative;
2669
2668
  display: inline-grid;
2670
2669
  grid-auto-flow: column;
@@ -2675,11 +2674,11 @@
2675
2674
  gap: 0;
2676
2675
  --control_dir: 1;
2677
2676
  }
2678
- [dir=rtl] .bds2121SegmentedControl-control,
2679
- .bds2121SegmentedControl-control[dir=rtl] {
2677
+ [dir=rtl] .bds2140SegmentedControl-control,
2678
+ .bds2140SegmentedControl-control[dir=rtl] {
2680
2679
  --control_dir: -1;
2681
2680
  }
2682
- .bds2121SegmentedControl-thumb {
2681
+ .bds2140SegmentedControl-thumb {
2683
2682
  position: absolute;
2684
2683
  inset-block: var(--control_track-pad, var(--bds-space_xxs));
2685
2684
  inset-inline-start: var(--control_track-pad, var(--bds-space_xxs));
@@ -2691,7 +2690,7 @@
2691
2690
  transform: translateX(calc(var(--control_selected-index, 0) * var(--control_dir, 1) * 100%));
2692
2691
  transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
2693
2692
  }
2694
- .bds2121SegmentedControl-indicator {
2693
+ .bds2140SegmentedControl-indicator {
2695
2694
  position: absolute;
2696
2695
  inset-block: var(--control_track-pad, var(--bds-space_xxs));
2697
2696
  inset-inline-start: var(--control_track-pad, var(--bds-space_xxs));
@@ -2703,7 +2702,7 @@
2703
2702
  transform: translateX(calc(var(--control_selected-index, 0) * var(--control_dir, 1) * 100%));
2704
2703
  transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
2705
2704
  }
2706
- .bds2121SegmentedControl-item {
2705
+ .bds2140SegmentedControl-item {
2707
2706
  position: relative;
2708
2707
  z-index: 1;
2709
2708
  display: flex;
@@ -2724,73 +2723,73 @@
2724
2723
  border: none;
2725
2724
  outline: none;
2726
2725
  }
2727
- .bds2121SegmentedControl-item:focus-visible {
2726
+ .bds2140SegmentedControl-item:focus-visible {
2728
2727
  outline: var(--bds-outline_default);
2729
2728
  outline-offset: calc(var(--bds-outline_offset) * -1);
2730
2729
  border-radius: var(--control_thumb-radius, var(--bds-border_radius--full));
2731
2730
  }
2732
- .bds2121SegmentedControl-item.bds2121SegmentedControl---active {
2731
+ .bds2140SegmentedControl-item.bds2140SegmentedControl---active {
2733
2732
  color: var(--control_label-color--active, var(--bds-color_on-interactive));
2734
2733
  }
2735
- .bds2121SegmentedControl-item.bds2121SegmentedControl---disabled {
2734
+ .bds2140SegmentedControl-item.bds2140SegmentedControl---disabled {
2736
2735
  opacity: 0.5;
2737
2736
  cursor: not-allowed;
2738
2737
  pointer-events: none;
2739
2738
  }
2740
- .bds2121SegmentedControl-control.bds2121SegmentedControl---size_small .bds2121SegmentedControl-item {
2739
+ .bds2140SegmentedControl-control.bds2140SegmentedControl---size_small .bds2140SegmentedControl-item {
2741
2740
  padding: var(--bds-space_xxs) var(--bds-space_s);
2742
2741
  font-size: var(--bds-font_size--body--s);
2743
2742
  }
2744
- .bds2121SegmentedControl-control.bds2121SegmentedControl---size_large .bds2121SegmentedControl-item {
2743
+ .bds2140SegmentedControl-control.bds2140SegmentedControl---size_large .bds2140SegmentedControl-item {
2745
2744
  padding: var(--bds-space_s) var(--bds-space_m);
2746
2745
  white-space: normal;
2747
2746
  text-align: center;
2748
2747
  }
2749
- .bds2121SegmentedControl-control.bds2121SegmentedControl---variant_outline {
2748
+ .bds2140SegmentedControl-control.bds2140SegmentedControl---variant_outline {
2750
2749
  --control_label-color--active: var(--bds-color_interactive);
2751
2750
  }
2752
- .bds2121SegmentedControl-control.bds2121SegmentedControl---variant_outline .bds2121SegmentedControl-thumb {
2751
+ .bds2140SegmentedControl-control.bds2140SegmentedControl---variant_outline .bds2140SegmentedControl-thumb {
2753
2752
  display: none;
2754
2753
  }
2755
- .bds2121SegmentedControl-control.bds2121SegmentedControl---variant_outline .bds2121SegmentedControl-item {
2754
+ .bds2140SegmentedControl-control.bds2140SegmentedControl---variant_outline .bds2140SegmentedControl-item {
2756
2755
  background-color: var(--control_item-bg, transparent);
2757
2756
  }
2758
- .bds2121SegmentedControl-control.bds2121SegmentedControl---variant_outline .bds2121SegmentedControl-item.bds2121SegmentedControl---active {
2757
+ .bds2140SegmentedControl-control.bds2140SegmentedControl---variant_outline .bds2140SegmentedControl-item.bds2140SegmentedControl---active {
2759
2758
  background-color: var(--control_item-bg--active, var(--bds-color_bg));
2760
2759
  }
2761
- .bds2121SegmentedControl-control.bds2121SegmentedControl---variant_outline .bds2121SegmentedControl-indicator {
2760
+ .bds2140SegmentedControl-control.bds2140SegmentedControl---variant_outline .bds2140SegmentedControl-indicator {
2762
2761
  display: block;
2763
2762
  box-shadow: inset 0 0 0 var(--control_indicator-width, 2px) var(--control_indicator-color, var(--bds-color_interactive));
2764
2763
  }
2765
- .bds2121SegmentedControl-control.bds2121SegmentedControl---no-selection .bds2121SegmentedControl-thumb,
2766
- .bds2121SegmentedControl-control.bds2121SegmentedControl---no-selection .bds2121SegmentedControl-indicator {
2764
+ .bds2140SegmentedControl-control.bds2140SegmentedControl---no-selection .bds2140SegmentedControl-thumb,
2765
+ .bds2140SegmentedControl-control.bds2140SegmentedControl---no-selection .bds2140SegmentedControl-indicator {
2767
2766
  display: none;
2768
2767
  }
2769
2768
  @media (hover: hover) and (pointer: fine) {
2770
- .bds2121SegmentedControl-item:not(.bds2121SegmentedControl---active, .bds2121SegmentedControl---disabled):hover {
2769
+ .bds2140SegmentedControl-item:not(.bds2140SegmentedControl---active, .bds2140SegmentedControl---disabled):hover {
2771
2770
  color: var(--control_label-color--hover, var(--bds-color_on-bg));
2772
2771
  }
2773
2772
  }
2774
2773
  @media (prefers-reduced-motion: reduce) {
2775
- .bds2121SegmentedControl-thumb,
2776
- .bds2121SegmentedControl-indicator {
2774
+ .bds2140SegmentedControl-thumb,
2775
+ .bds2140SegmentedControl-indicator {
2777
2776
  transition: none;
2778
2777
  }
2779
2778
  }
2780
2779
  }
2781
2780
 
2782
2781
  /* src/components/interaction/form/Select/Select.module.css */
2783
- @layer boostdev.bds2121Select-component {
2784
- .bds2121Select-formGroup {
2782
+ @layer boostdev.bds2140Select-component {
2783
+ .bds2140Select-formGroup {
2785
2784
  display: flex;
2786
2785
  flex-direction: column;
2787
2786
  }
2788
- .bds2121Select-selectWrapper {
2787
+ .bds2140Select-selectWrapper {
2789
2788
  position: relative;
2790
2789
  display: flex;
2791
2790
  align-items: center;
2792
2791
  }
2793
- .bds2121Select-select {
2792
+ .bds2140Select-select {
2794
2793
  appearance: none;
2795
2794
  inline-size: 100%;
2796
2795
  font-family: var(--bds-font_family--body);
@@ -2807,21 +2806,21 @@
2807
2806
  cursor: pointer;
2808
2807
  transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing), background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
2809
2808
  }
2810
- .bds2121Select-select:focus {
2809
+ .bds2140Select-select:focus {
2811
2810
  --bdc_color: var(--bdc_color--focus);
2812
2811
  }
2813
- .bds2121Select-select:focus-visible {
2812
+ .bds2140Select-select:focus-visible {
2814
2813
  outline: var(--bds-outline_default);
2815
2814
  outline-offset: var(--bds-outline_offset);
2816
2815
  }
2817
- .bds2121Select-select:disabled {
2816
+ .bds2140Select-select:disabled {
2818
2817
  opacity: 0.5;
2819
2818
  cursor: not-allowed;
2820
2819
  }
2821
- .bds2121Select-selectError {
2820
+ .bds2140Select-selectError {
2822
2821
  --bdc_color: var(--bdc_color--error);
2823
2822
  }
2824
- .bds2121Select-chevron {
2823
+ .bds2140Select-chevron {
2825
2824
  position: absolute;
2826
2825
  inset-inline-end: var(--bds-space_s);
2827
2826
  display: flex;
@@ -2829,30 +2828,30 @@
2829
2828
  pointer-events: none;
2830
2829
  color: var(--select_chevron-color, var(--bds-color_interactive));
2831
2830
  }
2832
- .bds2121Select-chevron svg {
2831
+ .bds2140Select-chevron svg {
2833
2832
  inline-size: var(--select_chevron-size, 1rem);
2834
2833
  block-size: var(--select_chevron-size, 1rem);
2835
2834
  }
2836
2835
  }
2837
2836
 
2838
2837
  /* src/components/interaction/form/Slider/Slider.module.css */
2839
- @layer boostdev.bds2121Slider-component {
2840
- .bds2121Slider-formGroup {
2838
+ @layer boostdev.bds2140Slider-component {
2839
+ .bds2140Slider-formGroup {
2841
2840
  display: flex;
2842
2841
  flex-direction: column;
2843
2842
  gap: var(--bds-space_xxs);
2844
2843
  }
2845
- .bds2121Slider-labelRow {
2844
+ .bds2140Slider-labelRow {
2846
2845
  display: flex;
2847
2846
  justify-content: space-between;
2848
2847
  align-items: baseline;
2849
2848
  }
2850
- .bds2121Slider-value {
2849
+ .bds2140Slider-value {
2851
2850
  font-size: var(--bds-font_size--body--s);
2852
2851
  font-variant-numeric: tabular-nums;
2853
2852
  color: var(--bds-color_on-bg--subtle);
2854
2853
  }
2855
- .bds2121Slider-slider {
2854
+ .bds2140Slider-slider {
2856
2855
  --slider_fill: 0%;
2857
2856
  color: var(--slider_color, var(--bds-color_on-bg));
2858
2857
  appearance: none;
@@ -2869,7 +2868,7 @@
2869
2868
  cursor: pointer;
2870
2869
  transition: var(--bds-animation_transition);
2871
2870
  }
2872
- .bds2121Slider-slider:dir(rtl) {
2871
+ .bds2140Slider-slider:dir(rtl) {
2873
2872
  background:
2874
2873
  linear-gradient(
2875
2874
  to left,
@@ -2878,16 +2877,16 @@
2878
2877
  var(--slider_track-bg, var(--bds-color_bg--subtle)) var(--slider_fill),
2879
2878
  var(--slider_track-bg, var(--bds-color_bg--subtle)) 100%);
2880
2879
  }
2881
- .bds2121Slider-slider:focus-visible {
2880
+ .bds2140Slider-slider:focus-visible {
2882
2881
  outline: var(--bds-outline_default);
2883
2882
  outline-offset: var(--bds-outline_offset);
2884
2883
  border-radius: var(--slider_track-radius, var(--bds-border_radius--full));
2885
2884
  }
2886
- .bds2121Slider-slider:disabled {
2885
+ .bds2140Slider-slider:disabled {
2887
2886
  opacity: 0.4;
2888
2887
  cursor: not-allowed;
2889
2888
  }
2890
- .bds2121Slider-slider::-webkit-slider-thumb {
2889
+ .bds2140Slider-slider::-webkit-slider-thumb {
2891
2890
  appearance: none;
2892
2891
  inline-size: var(--slider_thumb-size, calc(var(--bds-space_s) * 2));
2893
2892
  block-size: var(--slider_thumb-size, calc(var(--bds-space_s) * 2));
@@ -2897,7 +2896,7 @@
2897
2896
  transition: var(--bds-animation_transition);
2898
2897
  cursor: pointer;
2899
2898
  }
2900
- .bds2121Slider-slider::-moz-range-thumb {
2899
+ .bds2140Slider-slider::-moz-range-thumb {
2901
2900
  inline-size: var(--slider_thumb-size, calc(var(--bds-space_s) * 2));
2902
2901
  block-size: var(--slider_thumb-size, calc(var(--bds-space_s) * 2));
2903
2902
  border: none;
@@ -2906,7 +2905,7 @@
2906
2905
  box-shadow: var(--bds-shadow_s);
2907
2906
  cursor: pointer;
2908
2907
  }
2909
- .bds2121Slider-sliderError {
2908
+ .bds2140Slider-sliderError {
2910
2909
  background:
2911
2910
  linear-gradient(
2912
2911
  to right,
@@ -2915,7 +2914,7 @@
2915
2914
  var(--slider_track-bg, var(--bds-color_bg--subtle)) var(--slider_fill),
2916
2915
  var(--slider_track-bg, var(--bds-color_bg--subtle)) 100%);
2917
2916
  }
2918
- .bds2121Slider-sliderError:dir(rtl) {
2917
+ .bds2140Slider-sliderError:dir(rtl) {
2919
2918
  background:
2920
2919
  linear-gradient(
2921
2920
  to left,
@@ -2924,43 +2923,43 @@
2924
2923
  var(--slider_track-bg, var(--bds-color_bg--subtle)) var(--slider_fill),
2925
2924
  var(--slider_track-bg, var(--bds-color_bg--subtle)) 100%);
2926
2925
  }
2927
- .bds2121Slider-sliderError::-webkit-slider-thumb {
2926
+ .bds2140Slider-sliderError::-webkit-slider-thumb {
2928
2927
  background-color: var(--slider_color--error, var(--bds-color_error));
2929
2928
  }
2930
- .bds2121Slider-sliderError::-moz-range-thumb {
2929
+ .bds2140Slider-sliderError::-moz-range-thumb {
2931
2930
  background-color: var(--slider_color--error, var(--bds-color_error));
2932
2931
  }
2933
2932
  @media (prefers-reduced-motion: reduce) {
2934
- .bds2121Slider-slider,
2935
- .bds2121Slider-slider::-webkit-slider-thumb,
2936
- .bds2121Slider-slider::-moz-range-thumb {
2933
+ .bds2140Slider-slider,
2934
+ .bds2140Slider-slider::-webkit-slider-thumb,
2935
+ .bds2140Slider-slider::-moz-range-thumb {
2937
2936
  transition: none;
2938
2937
  }
2939
2938
  }
2940
2939
  }
2941
2940
 
2942
2941
  /* src/components/interaction/form/Switch/Switch.module.css */
2943
- @layer boostdev.bds2121Switch-component {
2944
- .bds2121Switch-switchGroup {
2942
+ @layer boostdev.bds2140Switch-component {
2943
+ .bds2140Switch-switchGroup {
2945
2944
  color: var(--switch_color, var(--bds-color_on-bg));
2946
2945
  display: flex;
2947
2946
  flex-direction: column;
2948
2947
  }
2949
- .bds2121Switch-switchGroup.bds2121Switch---size_small {
2948
+ .bds2140Switch-switchGroup.bds2140Switch---size_small {
2950
2949
  --switch_thumb-size: 1em;
2951
2950
  }
2952
- .bds2121Switch-switchGroup.bds2121Switch---size_medium {
2951
+ .bds2140Switch-switchGroup.bds2140Switch---size_medium {
2953
2952
  --switch_thumb-size: 1.25em;
2954
2953
  }
2955
- .bds2121Switch-switchGroup.bds2121Switch---size_large {
2954
+ .bds2140Switch-switchGroup.bds2140Switch---size_large {
2956
2955
  --switch_thumb-size: 1.5em;
2957
2956
  }
2958
- .bds2121Switch-inputWrapper {
2957
+ .bds2140Switch-inputWrapper {
2959
2958
  display: flex;
2960
2959
  align-items: center;
2961
2960
  gap: var(--bds-space_xs);
2962
2961
  }
2963
- .bds2121Switch-trackWrapper {
2962
+ .bds2140Switch-trackWrapper {
2964
2963
  position: relative;
2965
2964
  display: inline-flex;
2966
2965
  align-items: center;
@@ -2968,7 +2967,7 @@
2968
2967
  inline-size: calc(var(--switch_thumb-size, 1.25em) * 2 + var(--switch_track-pad, var(--bds-space_xxxs)) * 2);
2969
2968
  block-size: calc(var(--switch_thumb-size, 1.25em) + var(--switch_track-pad, var(--bds-space_xxxs)) * 2);
2970
2969
  }
2971
- .bds2121Switch-switch {
2970
+ .bds2140Switch-switch {
2972
2971
  position: absolute;
2973
2972
  inset: 0;
2974
2973
  appearance: none;
@@ -2979,10 +2978,10 @@
2979
2978
  cursor: pointer;
2980
2979
  z-index: 1;
2981
2980
  }
2982
- .bds2121Switch-switch:disabled {
2981
+ .bds2140Switch-switch:disabled {
2983
2982
  cursor: not-allowed;
2984
2983
  }
2985
- .bds2121Switch-track {
2984
+ .bds2140Switch-track {
2986
2985
  display: inline-flex;
2987
2986
  align-items: center;
2988
2987
  inline-size: calc(var(--switch_thumb-size, 1.25em) * 2 + var(--switch_track-pad, var(--bds-space_xxxs)) * 2);
@@ -2998,7 +2997,7 @@
2998
2997
  transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
2999
2998
  --bdc_color: var(--switch_thumb-bg, var(--bds-color_interactive));
3000
2999
  }
3001
- .bds2121Switch-thumb {
3000
+ .bds2140Switch-thumb {
3002
3001
  display: block;
3003
3002
  inline-size: var(--switch_thumb-size, 1.25em);
3004
3003
  block-size: var(--switch_thumb-size, 1.25em);
@@ -3008,43 +3007,43 @@
3008
3007
  transition: var(--bds-animation_transition);
3009
3008
  transform: translateX(0);
3010
3009
  }
3011
- .bds2121Switch-switch.bds2121Switch-switchError + .bds2121Switch-track {
3010
+ .bds2140Switch-switch.bds2140Switch-switchError + .bds2140Switch-track {
3012
3011
  --bdc_color: var(--switch_border-color--error, var(--bds-color_error));
3013
3012
  }
3014
- .bds2121Switch-switch:checked + .bds2121Switch-track {
3013
+ .bds2140Switch-switch:checked + .bds2140Switch-track {
3015
3014
  background-color: var(--switch_track-bg--active, var(--bdc-color_active--subtle));
3016
3015
  --bdc_color: var(--switch_thumb-bg--active, var(--bds-color_interactive));
3017
3016
  }
3018
- .bds2121Switch-switch:checked + .bds2121Switch-track .bds2121Switch-thumb {
3017
+ .bds2140Switch-switch:checked + .bds2140Switch-track .bds2140Switch-thumb {
3019
3018
  background-color: var(--switch_thumb-bg--active, var(--bds-color_interactive));
3020
3019
  transform: translateX(var(--switch_thumb-size, 1.25em));
3021
3020
  }
3022
- [dir=rtl] .bds2121Switch-switch:checked + .bds2121Switch-track .bds2121Switch-thumb {
3021
+ [dir=rtl] .bds2140Switch-switch:checked + .bds2140Switch-track .bds2140Switch-thumb {
3023
3022
  transform: translateX(calc(var(--switch_thumb-size, 1.25em) * -1));
3024
3023
  }
3025
- .bds2121Switch-switch:focus-visible + .bds2121Switch-track {
3024
+ .bds2140Switch-switch:focus-visible + .bds2140Switch-track {
3026
3025
  outline: var(--bds-outline_default);
3027
3026
  outline-offset: var(--bds-outline_offset);
3028
3027
  border-radius: var(--switch_track-radius, var(--bds-border_radius--full));
3029
3028
  }
3030
- .bds2121Switch-switch:disabled + .bds2121Switch-track {
3029
+ .bds2140Switch-switch:disabled + .bds2140Switch-track {
3031
3030
  opacity: 0.4;
3032
3031
  }
3033
3032
  @media (prefers-reduced-motion: reduce) {
3034
- .bds2121Switch-track,
3035
- .bds2121Switch-thumb {
3033
+ .bds2140Switch-track,
3034
+ .bds2140Switch-thumb {
3036
3035
  transition: none;
3037
3036
  }
3038
3037
  }
3039
3038
  }
3040
3039
 
3041
3040
  /* src/components/interaction/form/Textarea/Textarea.module.css */
3042
- @layer boostdev.bds2121Textarea-component {
3043
- .bds2121Textarea-formGroup {
3041
+ @layer boostdev.bds2140Textarea-component {
3042
+ .bds2140Textarea-formGroup {
3044
3043
  display: flex;
3045
3044
  flex-direction: column;
3046
3045
  }
3047
- .bds2121Textarea-textarea {
3046
+ .bds2140Textarea-textarea {
3048
3047
  font-family: var(--textarea_font-family, var(--bds-font_family--body));
3049
3048
  font-size: var(--textarea_font-size, var(--bds-font_size--body));
3050
3049
  line-height: var(--textarea_line-height, var(--bds-font_line-height--body));
@@ -3060,65 +3059,65 @@
3060
3059
  min-block-size: var(--textarea_min-block-size, calc(var(--bds-space_m) * 5));
3061
3060
  transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing), background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
3062
3061
  }
3063
- .bds2121Textarea-textarea:focus {
3062
+ .bds2140Textarea-textarea:focus {
3064
3063
  --bdc_color: var(--bdc_color--focus);
3065
3064
  }
3066
- .bds2121Textarea-textarea:focus-visible {
3065
+ .bds2140Textarea-textarea:focus-visible {
3067
3066
  outline: var(--bds-outline_default);
3068
3067
  outline-offset: var(--bds-outline_offset);
3069
3068
  }
3070
- .bds2121Textarea-textarea:disabled {
3069
+ .bds2140Textarea-textarea:disabled {
3071
3070
  opacity: 0.5;
3072
3071
  cursor: not-allowed;
3073
3072
  resize: none;
3074
3073
  }
3075
- .bds2121Textarea-textareaError {
3074
+ .bds2140Textarea-textareaError {
3076
3075
  --bdc_color: var(--bdc_color--error);
3077
3076
  }
3078
3077
  }
3079
3078
 
3080
3079
  /* src/components/layout/ButtonGroup/ButtonGroup.module.css */
3081
- @layer boostdev.bds2121ButtonGroup-component {
3082
- .bds2121ButtonGroup-buttonGroup {
3080
+ @layer boostdev.bds2140ButtonGroup-component {
3081
+ .bds2140ButtonGroup-buttonGroup {
3083
3082
  container-type: inline-size;
3084
3083
  container-name: button-group;
3085
3084
  grid-column: var(--bds-grid_span-100);
3086
3085
  inline-size: 100%;
3087
3086
  }
3088
- .bds2121ButtonGroup-buttonGroup .bds2121ButtonGroup-container {
3087
+ .bds2140ButtonGroup-buttonGroup .bds2140ButtonGroup-container {
3089
3088
  position: relative;
3090
3089
  display: flex;
3091
3090
  flex-direction: column-reverse;
3092
3091
  gap: var(--buttonGroup_gap, var(--bds-space_l));
3093
3092
  align-items: center;
3094
3093
  }
3095
- .bds2121ButtonGroup-buttonGroup.bds2121ButtonGroup---variant_card .bds2121ButtonGroup-container {
3094
+ .bds2140ButtonGroup-buttonGroup.bds2140ButtonGroup---variant_card .bds2140ButtonGroup-container {
3096
3095
  align-items: stretch;
3097
3096
  }
3098
- .bds2121ButtonGroup-buttonGroup.bds2121ButtonGroup---variant_flow .bds2121ButtonGroup-container,
3099
- .bds2121ButtonGroup-buttonGroup.bds2121ButtonGroup---variant_modal .bds2121ButtonGroup-container {
3097
+ .bds2140ButtonGroup-buttonGroup.bds2140ButtonGroup---variant_flow .bds2140ButtonGroup-container,
3098
+ .bds2140ButtonGroup-buttonGroup.bds2140ButtonGroup---variant_modal .bds2140ButtonGroup-container {
3100
3099
  align-items: center;
3101
3100
  }
3102
- .bds2121ButtonGroup-buttonGroup.bds2121ButtonGroup---variant_content .bds2121ButtonGroup-container {
3101
+ .bds2140ButtonGroup-buttonGroup.bds2140ButtonGroup---variant_content .bds2140ButtonGroup-container {
3103
3102
  align-items: flex-start;
3104
3103
  }
3105
3104
  @supports (contain: inline-size) {
3106
3105
  @container button-group (min-width: 30rem) {
3107
- .bds2121ButtonGroup-buttonGroup .bds2121ButtonGroup-container {
3106
+ .bds2140ButtonGroup-buttonGroup .bds2140ButtonGroup-container {
3108
3107
  flex-direction: row;
3109
3108
  justify-content: space-between;
3110
3109
  }
3111
- .bds2121ButtonGroup-buttonGroup.bds2121ButtonGroup---variant_modal .bds2121ButtonGroup-container > :first-child:last-child,
3112
- .bds2121ButtonGroup-buttonGroup.bds2121ButtonGroup---variant_flow .bds2121ButtonGroup-container > :first-child:last-child {
3110
+ .bds2140ButtonGroup-buttonGroup.bds2140ButtonGroup---variant_modal .bds2140ButtonGroup-container > :first-child:last-child,
3111
+ .bds2140ButtonGroup-buttonGroup.bds2140ButtonGroup---variant_flow .bds2140ButtonGroup-container > :first-child:last-child {
3113
3112
  margin-inline-start: auto;
3114
3113
  }
3115
- .bds2121ButtonGroup-buttonGroup.bds2121ButtonGroup---variant_card .bds2121ButtonGroup-container {
3114
+ .bds2140ButtonGroup-buttonGroup.bds2140ButtonGroup---variant_card .bds2140ButtonGroup-container {
3116
3115
  justify-content: center;
3117
3116
  }
3118
- .bds2121ButtonGroup-buttonGroup.bds2121ButtonGroup---variant_modal .bds2121ButtonGroup-container {
3117
+ .bds2140ButtonGroup-buttonGroup.bds2140ButtonGroup---variant_modal .bds2140ButtonGroup-container {
3119
3118
  justify-content: flex-end;
3120
3119
  }
3121
- .bds2121ButtonGroup-buttonGroup.bds2121ButtonGroup---variant_content .bds2121ButtonGroup-container {
3120
+ .bds2140ButtonGroup-buttonGroup.bds2140ButtonGroup---variant_content .bds2140ButtonGroup-container {
3122
3121
  justify-content: flex-start;
3123
3122
  align-items: center;
3124
3123
  }
@@ -3127,199 +3126,199 @@
3127
3126
  }
3128
3127
 
3129
3128
  /* src/components/layout/Card/Card.module.css */
3130
- @layer boostdev.bds2121Card-component {
3131
- .bds2121Card-card {
3129
+ @layer boostdev.bds2140Card-component {
3130
+ .bds2140Card-card {
3132
3131
  background-color: var(--card_color, var(--bds-color_bg--strong, var(--bds-color_bg)));
3133
3132
  color: var(--card_on-color, var(--bds-color_on-bg));
3134
3133
  border-radius: var(--card_radius, var(--bds-border_radius--m));
3135
3134
  transition: var(--card_transition, var(--bds-animation_transition));
3136
3135
  position: relative;
3137
3136
  }
3138
- .bds2121Card-card:is(button) {
3137
+ .bds2140Card-card:is(button) {
3139
3138
  border: none;
3140
3139
  font: inherit;
3141
3140
  text-align: inherit;
3142
3141
  display: block;
3143
3142
  inline-size: 100%;
3144
3143
  }
3145
- .bds2121Card-card.bds2121Card---default {
3144
+ .bds2140Card-card.bds2140Card---default {
3146
3145
  box-shadow: var(--card_shadow--default, var(--bds-shadow_s));
3147
3146
  }
3148
- .bds2121Card-card.bds2121Card---elevated {
3147
+ .bds2140Card-card.bds2140Card---elevated {
3149
3148
  box-shadow: var(--card_shadow--elevated, var(--bds-shadow_m));
3150
3149
  }
3151
- .bds2121Card-card.bds2121Card---outlined {
3150
+ .bds2140Card-card.bds2140Card---outlined {
3152
3151
  border: var(--card_border, none);
3153
3152
  --bdc_color: currentcolor;
3154
3153
  box-shadow: var(--card_shadow--outlined, inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--bds-shadow_s));
3155
3154
  }
3156
- .bds2121Card-card.bds2121Card---clickable {
3155
+ .bds2140Card-card.bds2140Card---clickable {
3157
3156
  cursor: pointer;
3158
3157
  }
3159
- .bds2121Card-card.bds2121Card---padding-none {
3158
+ .bds2140Card-card.bds2140Card---padding-none {
3160
3159
  padding: var(--card_padding, 0);
3161
3160
  }
3162
- .bds2121Card-card.bds2121Card---padding-small {
3161
+ .bds2140Card-card.bds2140Card---padding-small {
3163
3162
  padding: var(--card_padding, var(--bds-space_s));
3164
3163
  }
3165
- .bds2121Card-card.bds2121Card---padding-medium {
3164
+ .bds2140Card-card.bds2140Card---padding-medium {
3166
3165
  padding: var(--card_padding, var(--bds-space_m));
3167
3166
  }
3168
- .bds2121Card-card.bds2121Card---padding-large {
3167
+ .bds2140Card-card.bds2140Card---padding-large {
3169
3168
  padding: var(--card_padding, var(--bds-space_l));
3170
3169
  }
3171
- .bds2121Card-card.bds2121Card---padding-extra-large {
3170
+ .bds2140Card-card.bds2140Card---padding-extra-large {
3172
3171
  padding: var(--card_padding, var(--bds-space_xl));
3173
3172
  }
3174
- .bds2121Card-card.bds2121Card---text-start {
3173
+ .bds2140Card-card.bds2140Card---text-start {
3175
3174
  text-align: start;
3176
3175
  }
3177
- .bds2121Card-card.bds2121Card---text-center {
3176
+ .bds2140Card-card.bds2140Card---text-center {
3178
3177
  text-align: center;
3179
3178
  }
3180
- .bds2121Card-card.bds2121Card---text-end {
3179
+ .bds2140Card-card.bds2140Card---text-end {
3181
3180
  text-align: end;
3182
3181
  }
3183
- .bds2121Card-card.bds2121Card---clickable:focus-visible {
3182
+ .bds2140Card-card.bds2140Card---clickable:focus-visible {
3184
3183
  outline: var(--bds-outline_default);
3185
3184
  outline-offset: var(--bds-outline_offset);
3186
3185
  }
3187
- .bds2121Card-card.bds2121Card---clickable:active {
3186
+ .bds2140Card-card.bds2140Card---clickable:active {
3188
3187
  transform: translateY(0);
3189
3188
  box-shadow: var(--card_shadow--active, var(--bds-shadow_s));
3190
3189
  }
3191
3190
  @media (hover: hover) and (pointer: fine) {
3192
- .bds2121Card-card.bds2121Card---clickable:hover {
3191
+ .bds2140Card-card.bds2140Card---clickable:hover {
3193
3192
  transform: translateY(-2px);
3194
3193
  box-shadow: var(--card_shadow--clickable-hover, var(--bds-shadow_xl));
3195
3194
  }
3196
- .bds2121Card-card.bds2121Card---default:hover {
3195
+ .bds2140Card-card.bds2140Card---default:hover {
3197
3196
  box-shadow: var(--card_shadow--default-hover, var(--bds-shadow_m));
3198
3197
  }
3199
- .bds2121Card-card.bds2121Card---elevated:hover {
3198
+ .bds2140Card-card.bds2140Card---elevated:hover {
3200
3199
  box-shadow: var(--card_shadow--elevated-hover, var(--bds-shadow_2xl));
3201
3200
  }
3202
- .bds2121Card-card.bds2121Card---outlined:hover {
3201
+ .bds2140Card-card.bds2140Card---outlined:hover {
3203
3202
  box-shadow: var(--card_shadow--outlined-hover, var(--bds-shadow_s));
3204
3203
  }
3205
3204
  }
3206
3205
  @media (prefers-reduced-motion: reduce) {
3207
- .bds2121Card-card {
3206
+ .bds2140Card-card {
3208
3207
  transition: none;
3209
3208
  }
3210
- .bds2121Card-card.bds2121Card---clickable:hover,
3211
- .bds2121Card-card.bds2121Card---clickable:active {
3209
+ .bds2140Card-card.bds2140Card---clickable:hover,
3210
+ .bds2140Card-card.bds2140Card---clickable:active {
3212
3211
  transform: none;
3213
3212
  }
3214
3213
  }
3215
3214
  }
3216
3215
 
3217
3216
  /* src/components/layout/Grid/Grid.module.css */
3218
- @layer boostdev.bds2121Grid-component {
3219
- .bds2121Grid-grid {
3217
+ @layer boostdev.bds2140Grid-component {
3218
+ .bds2140Grid-grid {
3220
3219
  display: grid;
3221
3220
  gap: var(--grid_gap, var(--bds-grid_gap));
3222
3221
  }
3223
- .bds2121Grid-grid.bds2121Grid---main {
3222
+ .bds2140Grid-grid.bds2140Grid---main {
3224
3223
  grid-template-columns: var(--bds-grid_template-columns);
3225
3224
  }
3226
- .bds2121Grid-grid.bds2121Grid---page {
3225
+ .bds2140Grid-grid.bds2140Grid---page {
3227
3226
  grid-template-columns: 1fr;
3228
3227
  grid-column: 1 / -1;
3229
3228
  }
3230
- .bds2121Grid-grid.bds2121Grid---funnel {
3229
+ .bds2140Grid-grid.bds2140Grid---funnel {
3231
3230
  grid-template-columns: var(--bds-grid_template-columns);
3232
3231
  max-inline-size: var(--bds-container_max-width--narrow);
3233
3232
  margin-inline: auto;
3234
3233
  }
3235
- .bds2121Grid-grid.bds2121Grid---custom {
3234
+ .bds2140Grid-grid.bds2140Grid---custom {
3236
3235
  grid-template-columns: repeat(var(--grid_columns, 4), minmax(0, 1fr));
3237
3236
  }
3238
- .bds2121Grid-grid.bds2121Grid---centered {
3237
+ .bds2140Grid-grid.bds2140Grid---centered {
3239
3238
  margin-inline: auto;
3240
3239
  max-inline-size: var(--bds-container_max-width);
3241
3240
  padding-inline: var(--bds-container_spacing-inline);
3242
3241
  }
3243
- .bds2121Grid-item {
3242
+ .bds2140Grid-item {
3244
3243
  min-inline-size: 0;
3245
3244
  }
3246
3245
  @supports (grid-template-rows: masonry) {
3247
- .bds2121Grid-grid.bds2121Grid---masonry {
3246
+ .bds2140Grid-grid.bds2140Grid---masonry {
3248
3247
  grid-template-rows: masonry;
3249
3248
  }
3250
3249
  }
3251
3250
  @supports (display: grid-lanes) {
3252
- .bds2121Grid-grid.bds2121Grid---masonry {
3251
+ .bds2140Grid-grid.bds2140Grid---masonry {
3253
3252
  display: grid-lanes;
3254
3253
  }
3255
3254
  }
3256
3255
  }
3257
3256
 
3258
3257
  /* src/components/layout/SectionHeader/SectionHeader.module.css */
3259
- @layer boostdev.bds2121SectionHeader-component {
3260
- .bds2121SectionHeader-sectionHeader {
3258
+ @layer boostdev.bds2140SectionHeader-component {
3259
+ .bds2140SectionHeader-sectionHeader {
3261
3260
  display: flex;
3262
3261
  flex-direction: column;
3263
3262
  gap: var(--sectionHeader_gap, var(--bds-space_m));
3264
3263
  grid-column: var(--bds-grid_span-100);
3265
3264
  }
3266
- .bds2121SectionHeader-title {
3265
+ .bds2140SectionHeader-title {
3267
3266
  color: var(--sectionHeader_title-color, var(--sectionHeader-title-color, var(--bds-color_on-bg)));
3268
3267
  margin: 0;
3269
3268
  font-family: var(--bds-font_family--body);
3270
3269
  }
3271
- .bds2121SectionHeader-subtitle {
3270
+ .bds2140SectionHeader-subtitle {
3272
3271
  color: var(--sectionHeader_subtitle-color, var(--bds-color_grey--strong));
3273
3272
  margin: 0;
3274
3273
  font-family: var(--bds-font_family--body);
3275
3274
  font-weight: var(--bds-font_weight--medium);
3276
3275
  }
3277
- .bds2121SectionHeader-sectionHeader.bds2121SectionHeader---start {
3276
+ .bds2140SectionHeader-sectionHeader.bds2140SectionHeader---start {
3278
3277
  align-items: flex-start;
3279
3278
  text-align: start;
3280
3279
  }
3281
- .bds2121SectionHeader-sectionHeader.bds2121SectionHeader---center {
3280
+ .bds2140SectionHeader-sectionHeader.bds2140SectionHeader---center {
3282
3281
  align-items: center;
3283
3282
  text-align: center;
3284
3283
  }
3285
- .bds2121SectionHeader-sectionHeader.bds2121SectionHeader---end {
3284
+ .bds2140SectionHeader-sectionHeader.bds2140SectionHeader---end {
3286
3285
  align-items: flex-end;
3287
3286
  text-align: end;
3288
3287
  }
3289
- .bds2121SectionHeader-sectionHeader.bds2121SectionHeader---medium .bds2121SectionHeader-title {
3288
+ .bds2140SectionHeader-sectionHeader.bds2140SectionHeader---medium .bds2140SectionHeader-title {
3290
3289
  font-size: var(--sectionHeader_title-size, var(--bds-font_size--heading-1));
3291
3290
  line-height: var(--sectionHeader_title-line-height, var(--bds-font_line-height--heading));
3292
3291
  font-weight: var(--sectionHeader_title-weight, var(--bds-font_weight--bold));
3293
3292
  }
3294
- .bds2121SectionHeader-sectionHeader.bds2121SectionHeader---medium .bds2121SectionHeader-subtitle {
3293
+ .bds2140SectionHeader-sectionHeader.bds2140SectionHeader---medium .bds2140SectionHeader-subtitle {
3295
3294
  font-size: var(--sectionHeader_subtitle-size, var(--bds-font_size--heading-3));
3296
3295
  line-height: var(--sectionHeader_subtitle-line-height, 1.3);
3297
3296
  }
3298
- .bds2121SectionHeader-sectionHeader.bds2121SectionHeader---xs .bds2121SectionHeader-title {
3297
+ .bds2140SectionHeader-sectionHeader.bds2140SectionHeader---xs .bds2140SectionHeader-title {
3299
3298
  font-size: var(--sectionHeader_title-size, var(--bds-font_size--heading-2));
3300
3299
  line-height: var(--sectionHeader_title-line-height, var(--bds-font_line-height--heading));
3301
3300
  font-weight: var(--sectionHeader_title-weight, var(--bds-font_weight--bold));
3302
3301
  }
3303
- .bds2121SectionHeader-sectionHeader.bds2121SectionHeader---xs .bds2121SectionHeader-subtitle {
3302
+ .bds2140SectionHeader-sectionHeader.bds2140SectionHeader---xs .bds2140SectionHeader-subtitle {
3304
3303
  font-size: var(--sectionHeader_subtitle-size, var(--bds-font_size--body));
3305
3304
  line-height: var(--sectionHeader_subtitle-line-height, 1.4);
3306
3305
  }
3307
- .bds2121SectionHeader-sectionHeader.bds2121SectionHeader---small .bds2121SectionHeader-title {
3306
+ .bds2140SectionHeader-sectionHeader.bds2140SectionHeader---small .bds2140SectionHeader-title {
3308
3307
  font-size: var(--sectionHeader_title-size, var(--bds-font_size--heading-1));
3309
3308
  line-height: var(--sectionHeader_title-line-height, var(--bds-font_line-height--heading));
3310
3309
  font-weight: var(--sectionHeader_title-weight, var(--bds-font_weight--bold));
3311
3310
  }
3312
- .bds2121SectionHeader-sectionHeader.bds2121SectionHeader---small .bds2121SectionHeader-subtitle {
3311
+ .bds2140SectionHeader-sectionHeader.bds2140SectionHeader---small .bds2140SectionHeader-subtitle {
3313
3312
  font-size: var(--sectionHeader_subtitle-size, var(--bds-font_size--body));
3314
3313
  line-height: var(--sectionHeader_subtitle-line-height, 1.4);
3315
3314
  }
3316
- .bds2121SectionHeader-sectionHeader.bds2121SectionHeader---large .bds2121SectionHeader-title {
3315
+ .bds2140SectionHeader-sectionHeader.bds2140SectionHeader---large .bds2140SectionHeader-title {
3317
3316
  font-size: var(--sectionHeader_title-size, var(--bds-font_size--display));
3318
3317
  line-height: var(--sectionHeader_title-line-height, var(--bds-font_line-height--display));
3319
3318
  font-weight: var(--sectionHeader_title-weight, var(--bds-font_weight--bold));
3320
3319
  letter-spacing: var(--bds-font_tracking--tight);
3321
3320
  }
3322
- .bds2121SectionHeader-sectionHeader.bds2121SectionHeader---large .bds2121SectionHeader-subtitle {
3321
+ .bds2140SectionHeader-sectionHeader.bds2140SectionHeader---large .bds2140SectionHeader-subtitle {
3323
3322
  font-size: var(--sectionHeader_subtitle-size, var(--bds-font_size--heading-2));
3324
3323
  line-height: var(--sectionHeader_subtitle-line-height, 1.3);
3325
3324
  font-weight: var(--bds-font_weight--medium);
@@ -3327,8 +3326,8 @@
3327
3326
  }
3328
3327
 
3329
3328
  /* src/components/layout/IconWrapper/IconWrapper.module.css */
3330
- @layer boostdev.bds2121IconWrapper-component {
3331
- .bds2121IconWrapper-wrapper {
3329
+ @layer boostdev.bds2140IconWrapper-component {
3330
+ .bds2140IconWrapper-wrapper {
3332
3331
  inline-size: 2em;
3333
3332
  block-size: 2em;
3334
3333
  font-size: var(--icon-wrapper_size, 3em);
@@ -3344,7 +3343,7 @@
3344
3343
  position: relative;
3345
3344
  transition: var(--bds-animation_transition);
3346
3345
  }
3347
- .bds2121IconWrapper-wrapper svg {
3346
+ .bds2140IconWrapper-wrapper svg {
3348
3347
  fill: currentcolor;
3349
3348
  }
3350
3349
  }