@boostdev/design-system-components 2.7.1 → 2.8.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 (43) hide show
  1. package/dist/client.cjs +52 -52
  2. package/dist/client.css +546 -546
  3. package/dist/client.js +52 -52
  4. package/dist/index.cjs +52 -52
  5. package/dist/index.css +546 -546
  6. package/dist/index.js +52 -52
  7. package/dist/web-components/{chunk-7FMR53BW.js → chunk-7YURXHTS.js} +35 -15
  8. package/dist/web-components/{chunk-5TFWOPLH.js → chunk-A3RLT3AS.js} +3 -3
  9. package/dist/web-components/{chunk-CM3KYZ6Z.js → chunk-ARMKC4BQ.js} +1 -1
  10. package/dist/web-components/{chunk-QBB6ZX4R.js → chunk-DZOEPVFT.js} +1 -1
  11. package/dist/web-components/{chunk-57TRNCWQ.js → chunk-FSZRP43R.js} +1 -1
  12. package/dist/web-components/{chunk-IYGF6CD5.js → chunk-JYYRJS2D.js} +2 -2
  13. package/dist/web-components/chunk-OF6FFGOT.js +167 -0
  14. package/dist/web-components/{chunk-F5E3IT7G.js → chunk-ORC56MDY.js} +5 -5
  15. package/dist/web-components/{chunk-5R6IFELV.js → chunk-QLT6MTZF.js} +1 -1
  16. package/dist/web-components/{chunk-CZBIVR4V.js → chunk-UUKSDCYS.js} +1 -1
  17. package/dist/web-components/{chunk-ITHLKR7Q.js → chunk-X3NQMBAQ.js} +2 -2
  18. package/dist/web-components/index.js +18 -18
  19. package/dist/web-components/interaction/bds-button.js +1 -1
  20. package/dist/web-components/interaction/form/bds-combobox.js +1 -1
  21. package/dist/web-components/interaction/form/bds-radio.js +1 -1
  22. package/dist/web-components/interaction/form/bds-select.js +1 -1
  23. package/dist/web-components/interaction/form/bds-slider.js +1 -1
  24. package/dist/web-components/interaction/form/bds-switch.js +1 -1
  25. package/dist/web-components/interaction/form/bds-textarea.js +1 -1
  26. package/dist/web-components/ui/bds-avatar.js +1 -1
  27. package/dist/web-components/ui/bds-icon-wrapper.js +1 -1
  28. package/dist/web-components/ui/bds-loading.js +1 -1
  29. package/dist/web-components/ui/bds-progress.js +1 -1
  30. package/package.json +1 -1
  31. package/src/web-components/interaction/bds-button.ts +5 -5
  32. package/src/web-components/interaction/form/bds-combobox.ts +1 -1
  33. package/src/web-components/interaction/form/bds-radio.ts +2 -2
  34. package/src/web-components/interaction/form/bds-select.ts +1 -1
  35. package/src/web-components/interaction/form/bds-slider.ts +35 -15
  36. package/src/web-components/interaction/form/bds-switch.ts +73 -39
  37. package/src/web-components/interaction/form/bds-textarea.ts +1 -1
  38. package/src/web-components/ui/bds-avatar.ts +1 -1
  39. package/src/web-components/ui/bds-carousel.ts +7 -7
  40. package/src/web-components/ui/bds-icon-wrapper.ts +3 -3
  41. package/src/web-components/ui/bds-loading.ts +1 -1
  42. package/src/web-components/ui/bds-progress.ts +2 -2
  43. package/dist/web-components/chunk-Y3POAKGS.js +0 -133
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.bds271Accordion-component {
31
- .bds271Accordion-accordion {
30
+ @layer boostdev.bds280Accordion-component {
31
+ .bds280Accordion-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);
39
39
  overflow: hidden;
40
40
  }
41
- .bds271Accordion-item {
41
+ .bds280Accordion-item {
42
42
  border-block-end: 1px solid var(--bds-color_bg--subtle);
43
43
  }
44
- .bds271Accordion-item:last-child {
44
+ .bds280Accordion-item:last-child {
45
45
  border-block-end: none;
46
46
  }
47
- .bds271Accordion-heading {
47
+ .bds280Accordion-heading {
48
48
  margin: 0;
49
49
  }
50
- .bds271Accordion-trigger {
50
+ .bds280Accordion-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
- .bds271Accordion-trigger:disabled {
65
+ .bds280Accordion-trigger:disabled {
66
66
  opacity: 0.4;
67
67
  cursor: not-allowed;
68
68
  }
69
- .bds271Accordion-trigger:focus-visible {
69
+ .bds280Accordion-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
- .bds271Accordion-trigger:not(:disabled):hover {
75
+ .bds280Accordion-trigger:not(:disabled):hover {
76
76
  background-color: var(--accordion_trigger-bg--hover, var(--bds-color_bg--subtle));
77
77
  }
78
78
  }
79
- .bds271Accordion-triggerLabel {
79
+ .bds280Accordion-triggerLabel {
80
80
  flex: 1;
81
81
  text-align: start;
82
82
  }
83
- .bds271Accordion-chevron {
83
+ .bds280Accordion-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
- .bds271Accordion-item.bds271Accordion---open .bds271Accordion-chevron {
89
+ .bds280Accordion-item.bds280Accordion---open .bds280Accordion-chevron {
90
90
  transform: rotate(180deg);
91
91
  }
92
- .bds271Accordion-panel {
92
+ .bds280Accordion-panel {
93
93
  overflow: hidden;
94
94
  }
95
- .bds271Accordion-panelContent {
95
+ .bds280Accordion-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
- .bds271Accordion-chevron {
102
+ .bds280Accordion-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.bds271Alert-component {
110
- .bds271Alert-alert {
109
+ @layer boostdev.bds280Alert-component {
110
+ .bds280Alert-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
- .bds271Alert---variant_info {
122
+ .bds280Alert---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
- .bds271Alert---variant_success {
127
+ .bds280Alert---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
- .bds271Alert---variant_warning {
132
+ .bds280Alert---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
- .bds271Alert---variant_error {
137
+ .bds280Alert---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
- .bds271Alert-icon {
142
+ .bds280Alert-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
- .bds271Alert-content {
148
+ .bds280Alert-content {
149
149
  flex: 1;
150
150
  display: flex;
151
151
  flex-direction: column;
152
152
  gap: var(--bds-space_xxs);
153
153
  }
154
- .bds271Alert-title {
154
+ .bds280Alert-title {
155
155
  font-weight: var(--bds-font_weight--semibold);
156
156
  font-size: var(--bds-font_size--body);
157
157
  }
158
- .bds271Alert-dismiss {
158
+ .bds280Alert-dismiss {
159
159
  all: unset;
160
160
  display: flex;
161
161
  align-items: center;
@@ -169,24 +169,24 @@
169
169
  --bdc_color: currentcolor;
170
170
  box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
171
171
  }
172
- .bds271Alert-dismiss svg {
172
+ .bds280Alert-dismiss svg {
173
173
  width: 1rem;
174
174
  height: 1rem;
175
175
  }
176
- .bds271Alert-dismiss:focus-visible {
176
+ .bds280Alert-dismiss:focus-visible {
177
177
  outline: var(--bds-outline_default);
178
178
  outline-offset: var(--bds-outline_offset);
179
179
  }
180
180
  @media (hover: hover) and (pointer: fine) {
181
- .bds271Alert-dismiss:hover {
181
+ .bds280Alert-dismiss:hover {
182
182
  opacity: var(--alert_dismiss-opacity--hover, 0.7);
183
183
  }
184
184
  }
185
185
  }
186
186
 
187
187
  /* src/components/ui/Avatar/Avatar.module.css */
188
- @layer boostdev.bds271Avatar-component {
189
- .bds271Avatar-avatar {
188
+ @layer boostdev.bds280Avatar-component {
189
+ .bds280Avatar-avatar {
190
190
  display: inline-flex;
191
191
  align-items: center;
192
192
  justify-content: center;
@@ -196,42 +196,42 @@
196
196
  overflow: hidden;
197
197
  flex-shrink: 0;
198
198
  }
199
- .bds271Avatar-avatar.bds271Avatar---fallback {
199
+ .bds280Avatar-avatar.bds280Avatar---fallback {
200
200
  background-color: var(--avatar_bg, var(--bds-color_blue));
201
201
  color: var(--avatar_text, var(--bds-color_on-blue));
202
202
  font-weight: var(--bds-font_weight--semibold);
203
203
  }
204
- .bds271Avatar-avatar.bds271Avatar---size_small {
204
+ .bds280Avatar-avatar.bds280Avatar---size_small {
205
205
  --avatar_size: 2em;
206
206
  }
207
- .bds271Avatar-avatar.bds271Avatar---size_medium {
207
+ .bds280Avatar-avatar.bds280Avatar---size_medium {
208
208
  --avatar_size: 3em;
209
209
  }
210
- .bds271Avatar-avatar.bds271Avatar---size_large {
210
+ .bds280Avatar-avatar.bds280Avatar---size_large {
211
211
  --avatar_size: 4.5em;
212
212
  }
213
- .bds271Avatar-image {
213
+ .bds280Avatar-image {
214
214
  width: 100%;
215
215
  height: 100%;
216
216
  object-fit: cover;
217
217
  display: block;
218
218
  }
219
- .bds271Avatar-initials {
219
+ .bds280Avatar-initials {
220
220
  line-height: 1;
221
221
  user-select: none;
222
222
  font-size: var(--bds-font_size--body);
223
223
  }
224
- .bds271Avatar-avatar.bds271Avatar---size_small .bds271Avatar-initials {
224
+ .bds280Avatar-avatar.bds280Avatar---size_small .bds280Avatar-initials {
225
225
  font-size: var(--bds-font_size--body--s);
226
226
  }
227
- .bds271Avatar-avatar.bds271Avatar---size_large .bds271Avatar-initials {
227
+ .bds280Avatar-avatar.bds280Avatar---size_large .bds280Avatar-initials {
228
228
  font-size: var(--bds-font_size--heading-3);
229
229
  }
230
230
  }
231
231
 
232
232
  /* src/components/ui/Badge/Badge.module.css */
233
- @layer boostdev.bds271Badge-component {
234
- .bds271Badge-badge {
233
+ @layer boostdev.bds280Badge-component {
234
+ .bds280Badge-badge {
235
235
  display: inline-flex;
236
236
  align-items: center;
237
237
  justify-content: center;
@@ -244,34 +244,34 @@
244
244
  background-color: var(--badge_bg, var(--badge_bg--variant, var(--bds-color_blue)));
245
245
  color: var(--badge_text, var(--badge_text--variant, var(--bds-color_on-blue)));
246
246
  }
247
- .bds271Badge---variant_primary {
247
+ .bds280Badge---variant_primary {
248
248
  --badge_bg--variant: var(--badge_bg--primary, var(--bds-color_interactive));
249
249
  --badge_text--variant: var(--badge_text--primary, var(--bds-color_on-interactive));
250
250
  }
251
- .bds271Badge---variant_secondary {
251
+ .bds280Badge---variant_secondary {
252
252
  --badge_bg--variant: var(--badge_bg--secondary, var(--bds-color_bg));
253
253
  --badge_text--variant: var(--badge_text--secondary, var(--bds-color_on-bg));
254
254
  }
255
- .bds271Badge---variant_success {
255
+ .bds280Badge---variant_success {
256
256
  --badge_bg--variant: var(--badge_bg--success, var(--bds-color_success));
257
257
  --badge_text--variant: var(--badge_text--success, var(--bds-color_on-success));
258
258
  }
259
- .bds271Badge---variant_error {
259
+ .bds280Badge---variant_error {
260
260
  --badge_bg--variant: var(--badge_bg--error, var(--bds-color_error));
261
261
  --badge_text--variant: var(--badge_text--error, var(--bds-color_on-error));
262
262
  }
263
- .bds271Badge---variant_warning {
263
+ .bds280Badge---variant_warning {
264
264
  --badge_bg--variant: var(--badge_bg--warning, var(--bds-color_warning));
265
265
  --badge_text--variant: var(--badge_text--warning, var(--bds-color_on-warning));
266
266
  }
267
267
  }
268
268
 
269
269
  /* src/components/ui/Breadcrumb/Breadcrumb.module.css */
270
- @layer boostdev.bds271Breadcrumb-component {
271
- .bds271Breadcrumb-breadcrumb {
270
+ @layer boostdev.bds280Breadcrumb-component {
271
+ .bds280Breadcrumb-breadcrumb {
272
272
  font-size: var(--bds-font_size--body--s);
273
273
  }
274
- .bds271Breadcrumb-list {
274
+ .bds280Breadcrumb-list {
275
275
  display: flex;
276
276
  flex-wrap: wrap;
277
277
  align-items: center;
@@ -280,45 +280,45 @@
280
280
  margin: 0;
281
281
  padding: 0;
282
282
  }
283
- .bds271Breadcrumb-item {
283
+ .bds280Breadcrumb-item {
284
284
  display: flex;
285
285
  align-items: center;
286
286
  gap: var(--bds-space_xxs);
287
287
  }
288
- .bds271Breadcrumb-link {
288
+ .bds280Breadcrumb-link {
289
289
  color: var(--bds-color_interactive_on-bg);
290
290
  text-decoration: none;
291
291
  transition: var(--bds-animation_transition);
292
292
  }
293
- .bds271Breadcrumb-link:focus-visible {
293
+ .bds280Breadcrumb-link:focus-visible {
294
294
  outline: var(--bds-outline_default);
295
295
  outline-offset: var(--bds-outline_offset);
296
296
  border-radius: var(--bds-border_radius--xs);
297
297
  }
298
298
  @media (hover: hover) and (pointer: fine) {
299
- .bds271Breadcrumb-link:hover {
299
+ .bds280Breadcrumb-link:hover {
300
300
  text-decoration: underline;
301
301
  text-underline-offset: 0.2em;
302
302
  }
303
303
  }
304
- .bds271Breadcrumb-separator {
304
+ .bds280Breadcrumb-separator {
305
305
  color: var(--bds-color_on-bg--subtle);
306
306
  user-select: none;
307
307
  }
308
- .bds271Breadcrumb-current {
308
+ .bds280Breadcrumb-current {
309
309
  color: var(--bds-color_on-bg--subtle);
310
310
  font-weight: var(--bds-font_weight--semibold);
311
311
  }
312
312
  }
313
313
 
314
314
  /* src/components/ui/Collapsible/Collapsible.module.css */
315
- @layer boostdev.bds271Collapsible-component {
316
- .bds271Collapsible-collapsible {
315
+ @layer boostdev.bds280Collapsible-component {
316
+ .bds280Collapsible-collapsible {
317
317
  border: var(--collapsible_border-width, 1px) solid var(--collapsible_border-color, var(--bds-color_bg--subtle));
318
318
  border-radius: var(--collapsible_border-radius, var(--bds-border_radius--m));
319
319
  overflow: hidden;
320
320
  }
321
- .bds271Collapsible-summary {
321
+ .bds280Collapsible-summary {
322
322
  list-style: none;
323
323
  display: flex;
324
324
  align-items: center;
@@ -333,25 +333,25 @@
333
333
  user-select: none;
334
334
  transition: var(--bds-animation_transition);
335
335
  }
336
- .bds271Collapsible-summary::-webkit-details-marker {
336
+ .bds280Collapsible-summary::-webkit-details-marker {
337
337
  display: none;
338
338
  }
339
- .bds271Collapsible-summary:focus-visible {
339
+ .bds280Collapsible-summary:focus-visible {
340
340
  outline: var(--bds-outline_default);
341
341
  outline-offset: calc(var(--bds-outline_offset) * -1);
342
342
  }
343
343
  @media (hover: hover) and (pointer: fine) {
344
- .bds271Collapsible-summary:hover {
344
+ .bds280Collapsible-summary:hover {
345
345
  background-color: var(--collapsible_bg--hover, var(--bds-color_bg--subtle));
346
346
  }
347
347
  }
348
- .bds271Collapsible-collapsible[open] > .bds271Collapsible-summary {
348
+ .bds280Collapsible-collapsible[open] > .bds280Collapsible-summary {
349
349
  border-block-end: var(--collapsible_border-width, 1px) solid var(--collapsible_border-color, var(--bds-color_bg--subtle));
350
350
  }
351
- .bds271Collapsible-summaryContent {
351
+ .bds280Collapsible-summaryContent {
352
352
  flex: 1;
353
353
  }
354
- .bds271Collapsible-icon {
354
+ .bds280Collapsible-icon {
355
355
  inline-size: 0.5rem;
356
356
  block-size: 0.5rem;
357
357
  border-inline-end: 2px solid currentcolor;
@@ -360,25 +360,25 @@
360
360
  flex-shrink: 0;
361
361
  transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
362
362
  }
363
- .bds271Collapsible-collapsible[open] > .bds271Collapsible-summary .bds271Collapsible-icon {
363
+ .bds280Collapsible-collapsible[open] > .bds280Collapsible-summary .bds280Collapsible-icon {
364
364
  transform: rotate(-135deg);
365
365
  }
366
- .bds271Collapsible-content {
366
+ .bds280Collapsible-content {
367
367
  padding: var(--bds-space_m);
368
368
  color: var(--collapsible_on-color, var(--bds-color_on-bg));
369
369
  font-size: var(--bds-font_size--body);
370
370
  line-height: var(--bds-font_line-height--body);
371
371
  }
372
372
  @media (prefers-reduced-motion: reduce) {
373
- .bds271Collapsible-icon {
373
+ .bds280Collapsible-icon {
374
374
  transition: none;
375
375
  }
376
376
  }
377
377
  }
378
378
 
379
379
  /* src/components/ui/Calendar/Calendar.module.css */
380
- @layer boostdev.bds271Calendar-component {
381
- .bds271Calendar-calendar {
380
+ @layer boostdev.bds280Calendar-component {
381
+ .bds280Calendar-calendar {
382
382
  display: inline-flex;
383
383
  flex-direction: column;
384
384
  gap: var(--bds-space_s);
@@ -391,17 +391,17 @@
391
391
  box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--calendar_shadow, var(--bds-shadow_s));
392
392
  inline-size: 20rem;
393
393
  }
394
- .bds271Calendar-header {
394
+ .bds280Calendar-header {
395
395
  display: flex;
396
396
  align-items: center;
397
397
  justify-content: space-between;
398
398
  }
399
- .bds271Calendar-monthYear {
399
+ .bds280Calendar-monthYear {
400
400
  font-size: var(--bds-font_size--body);
401
401
  font-weight: var(--bds-font_weight--semibold);
402
402
  color: var(--bds-color_on-bg);
403
403
  }
404
- .bds271Calendar-navBtn {
404
+ .bds280Calendar-navBtn {
405
405
  all: unset;
406
406
  display: flex;
407
407
  align-items: center;
@@ -413,35 +413,35 @@
413
413
  color: var(--bds-color_on-bg);
414
414
  transition: var(--bds-animation_transition);
415
415
  }
416
- .bds271Calendar-navBtn svg {
416
+ .bds280Calendar-navBtn svg {
417
417
  inline-size: 1rem;
418
418
  block-size: 1rem;
419
419
  }
420
- .bds271Calendar-navBtn:focus-visible {
420
+ .bds280Calendar-navBtn:focus-visible {
421
421
  outline: var(--bds-outline_default);
422
422
  outline-offset: var(--bds-outline_offset);
423
423
  }
424
424
  @media (hover: hover) and (pointer: fine) {
425
- .bds271Calendar-navBtn:hover {
425
+ .bds280Calendar-navBtn:hover {
426
426
  background-color: var(--calendar_navBtn-bg--hover, var(--bds-color_bg--subtle));
427
427
  }
428
428
  }
429
- .bds271Calendar-grid {
429
+ .bds280Calendar-grid {
430
430
  border-collapse: collapse;
431
431
  inline-size: 100%;
432
432
  table-layout: fixed;
433
433
  }
434
- .bds271Calendar-weekday {
434
+ .bds280Calendar-weekday {
435
435
  font-size: var(--bds-font_size--body--s);
436
436
  font-weight: var(--bds-font_weight--semibold);
437
437
  color: var(--bds-color_on-bg);
438
438
  text-align: center;
439
439
  padding-block-end: var(--bds-space_xs);
440
440
  }
441
- .bds271Calendar-empty {
441
+ .bds280Calendar-empty {
442
442
  padding: 0;
443
443
  }
444
- .bds271Calendar-day {
444
+ .bds280Calendar-day {
445
445
  all: unset;
446
446
  display: flex;
447
447
  align-items: center;
@@ -455,46 +455,46 @@
455
455
  transition: var(--bds-animation_transition);
456
456
  box-sizing: border-box;
457
457
  }
458
- .bds271Calendar-day:focus-visible {
458
+ .bds280Calendar-day:focus-visible {
459
459
  outline: var(--bds-outline_default);
460
460
  outline-offset: var(--bds-outline_offset);
461
461
  }
462
462
  @media (hover: hover) and (pointer: fine) {
463
- .bds271Calendar-day:not(.bds271Calendar-disabled, .bds271Calendar-selected):hover {
463
+ .bds280Calendar-day:not(.bds280Calendar-disabled, .bds280Calendar-selected):hover {
464
464
  background-color: var(--calendar_day-bg--hover, var(--bds-color_bg--subtle));
465
465
  }
466
466
  }
467
- .bds271Calendar-today {
467
+ .bds280Calendar-today {
468
468
  font-weight: var(--bds-font_weight--semibold);
469
469
  --bdc_color: var(--calendar_today-color, var(--bds-color_interactive));
470
470
  border: var(--calendar_today-border, none);
471
471
  box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
472
472
  }
473
- .bds271Calendar-selected {
473
+ .bds280Calendar-selected {
474
474
  background-color: var(--calendar_day-bg--selected, var(--bds-color_interactive));
475
475
  color: var(--calendar_day-color--selected, var(--bds-color_on-interactive));
476
476
  font-weight: var(--bds-font_weight--semibold);
477
477
  }
478
- .bds271Calendar-disabled {
478
+ .bds280Calendar-disabled {
479
479
  opacity: 0.35;
480
480
  cursor: not-allowed;
481
481
  }
482
482
  @media (prefers-reduced-motion: reduce) {
483
- .bds271Calendar-day {
483
+ .bds280Calendar-day {
484
484
  transition: none;
485
485
  }
486
486
  }
487
487
  }
488
488
 
489
489
  /* src/components/ui/Carousel/Carousel.module.css */
490
- @layer boostdev.bds271Carousel-component {
491
- .bds271Carousel-carousel {
490
+ @layer boostdev.bds280Carousel-component {
491
+ .bds280Carousel-carousel {
492
492
  position: relative;
493
493
  display: flex;
494
494
  align-items: center;
495
495
  gap: var(--bds-space_xs);
496
496
  }
497
- .bds271Carousel-track {
497
+ .bds280Carousel-track {
498
498
  display: flex;
499
499
  gap: var(--bds-space_m);
500
500
  overflow-inline: auto;
@@ -503,14 +503,14 @@
503
503
  flex: 1;
504
504
  scroll-behavior: smooth;
505
505
  }
506
- .bds271Carousel-track::-webkit-scrollbar {
506
+ .bds280Carousel-track::-webkit-scrollbar {
507
507
  display: none;
508
508
  }
509
- .bds271Carousel-slide {
509
+ .bds280Carousel-slide {
510
510
  scroll-snap-align: start;
511
511
  flex-shrink: 0;
512
512
  }
513
- .bds271Carousel-navBtn {
513
+ .bds280Carousel-navBtn {
514
514
  all: unset;
515
515
  display: flex;
516
516
  align-items: center;
@@ -527,29 +527,29 @@
527
527
  flex-shrink: 0;
528
528
  transition: var(--bds-animation_transition);
529
529
  }
530
- .bds271Carousel-navBtn svg {
530
+ .bds280Carousel-navBtn svg {
531
531
  inline-size: 1.25rem;
532
532
  block-size: 1.25rem;
533
533
  }
534
- .bds271Carousel-navBtn:focus-visible {
534
+ .bds280Carousel-navBtn:focus-visible {
535
535
  outline: var(--bds-outline_default);
536
536
  outline-offset: var(--bds-outline_offset);
537
537
  }
538
538
  @media (hover: hover) and (pointer: fine) {
539
- .bds271Carousel-navBtn:hover {
539
+ .bds280Carousel-navBtn:hover {
540
540
  background-color: var(--carousel_navBtn-bg--hover, var(--bds-color_bg--subtle));
541
541
  }
542
542
  }
543
543
  @media (prefers-reduced-motion: reduce) {
544
- .bds271Carousel-track {
544
+ .bds280Carousel-track {
545
545
  scroll-behavior: auto;
546
546
  }
547
547
  }
548
548
  }
549
549
 
550
550
  /* src/components/ui/DescriptionList/DescriptionList.module.css */
551
- @layer boostdev.bds271DescriptionList-component {
552
- .bds271DescriptionList-list {
551
+ @layer boostdev.bds280DescriptionList-component {
552
+ .bds280DescriptionList-list {
553
553
  display: flex;
554
554
  flex-direction: column;
555
555
  gap: var(--bds-space_s);
@@ -558,61 +558,61 @@
558
558
  font-size: var(--bds-font_size--body);
559
559
  color: var(--bds-color_on-bg);
560
560
  }
561
- .bds271DescriptionList-group {
561
+ .bds280DescriptionList-group {
562
562
  display: flex;
563
563
  flex-direction: column;
564
564
  gap: var(--bds-space_xxs);
565
565
  }
566
- .bds271DescriptionList-term {
566
+ .bds280DescriptionList-term {
567
567
  font-weight: var(--bds-font_weight--semibold);
568
568
  color: var(--bds-color_on-bg);
569
569
  }
570
- .bds271DescriptionList-details {
570
+ .bds280DescriptionList-details {
571
571
  margin: 0;
572
572
  color: var(--bds-color_on-bg);
573
573
  }
574
- .bds271DescriptionList---layout_inline .bds271DescriptionList-group {
574
+ .bds280DescriptionList---layout_inline .bds280DescriptionList-group {
575
575
  display: grid;
576
576
  grid-template-columns: minmax(8rem, 1fr) 2fr;
577
577
  gap: var(--bds-space_xs);
578
578
  align-items: baseline;
579
579
  }
580
- .bds271DescriptionList---layout_inline .bds271DescriptionList-term {
580
+ .bds280DescriptionList---layout_inline .bds280DescriptionList-term {
581
581
  grid-column: 1;
582
582
  }
583
- .bds271DescriptionList---layout_inline .bds271DescriptionList-details {
583
+ .bds280DescriptionList---layout_inline .bds280DescriptionList-details {
584
584
  grid-column: 2;
585
585
  }
586
586
  }
587
587
 
588
588
  /* src/components/ui/Link/Link.module.css */
589
- @layer boostdev.bds271Link-component {
590
- .bds271Link-link {
589
+ @layer boostdev.bds280Link-component {
590
+ .bds280Link-link {
591
591
  color: var(--link_color, var(--link_color--variant, var(--bds-color_interactive_on-bg)));
592
592
  text-decoration: underline;
593
593
  text-underline-offset: 0.2em;
594
594
  transition: var(--bds-animation_transition);
595
595
  cursor: pointer;
596
596
  }
597
- .bds271Link-link:focus-visible {
597
+ .bds280Link-link:focus-visible {
598
598
  outline: var(--bds-outline_default);
599
599
  outline-offset: var(--bds-outline_offset);
600
600
  border-radius: var(--bds-border_radius--xs);
601
601
  }
602
602
  @media (hover: hover) and (pointer: fine) {
603
- .bds271Link-link:hover {
603
+ .bds280Link-link:hover {
604
604
  color: var(--link_color-hover, var(--link_color-hover--variant, var(--bds-color_blue--strong)));
605
605
  }
606
606
  }
607
- .bds271Link---variant_default {
607
+ .bds280Link---variant_default {
608
608
  --link_color--variant: var(--link_color--default, var(--bds-color_interactive_on-bg));
609
609
  --link_color-hover--variant: var(--link_color-hover--default, var(--bds-color_blue--strong));
610
610
  }
611
- .bds271Link---variant_subtle {
611
+ .bds280Link---variant_subtle {
612
612
  --link_color--variant: var(--link_color--subtle, var(--bds-color_on-bg));
613
613
  --link_color-hover--variant: var(--link_color-hover--subtle, var(--bds-color_interactive_on-bg));
614
614
  }
615
- .bds271Link---variant_standalone {
615
+ .bds280Link---variant_standalone {
616
616
  --link_color--variant: var(--link_color--standalone, var(--bds-color_interactive_on-bg));
617
617
  --link_color-hover--variant: var(--link_color-hover--standalone, var(--bds-color_blue--strong));
618
618
  display: inline-flex;
@@ -622,12 +622,12 @@
622
622
  text-decoration: none;
623
623
  }
624
624
  @media (hover: hover) and (pointer: fine) {
625
- .bds271Link---variant_standalone:hover {
625
+ .bds280Link---variant_standalone:hover {
626
626
  text-decoration: underline;
627
627
  text-underline-offset: 0.2em;
628
628
  }
629
629
  }
630
- .bds271Link-externalLabel {
630
+ .bds280Link-externalLabel {
631
631
  position: absolute;
632
632
  inline-size: 1px;
633
633
  block-size: 1px;
@@ -641,13 +641,13 @@
641
641
  }
642
642
 
643
643
  /* src/components/ui/Loading/Loading.module.css */
644
- @layer boostdev.bds271Loading-component {
645
- .bds271Loading-loading {
644
+ @layer boostdev.bds280Loading-component {
645
+ .bds280Loading-loading {
646
646
  display: flex;
647
647
  justify-content: center;
648
648
  align-items: center;
649
649
  }
650
- .bds271Loading-spinner {
650
+ .bds280Loading-spinner {
651
651
  inline-size: 2.5em;
652
652
  block-size: 2.5em;
653
653
  border: 4px solid var(--bds-color_bg);
@@ -655,12 +655,12 @@
655
655
  border-radius: var(--loading_radius, var(--bds-border_radius--circle));
656
656
  animation: spin 1s linear infinite;
657
657
  }
658
- .bds271Loading---size_small .bds271Loading-spinner {
658
+ .bds280Loading---size_small .bds280Loading-spinner {
659
659
  inline-size: 1.5em;
660
660
  block-size: 1.5em;
661
661
  border-width: 2px;
662
662
  }
663
- .bds271Loading---size_large .bds271Loading-spinner {
663
+ .bds280Loading---size_large .bds280Loading-spinner {
664
664
  inline-size: 4em;
665
665
  block-size: 4em;
666
666
  border-width: 6px;
@@ -675,14 +675,14 @@
675
675
  }
676
676
  }
677
677
  @media (prefers-reduced-motion: reduce) {
678
- .bds271Loading-spinner {
678
+ .bds280Loading-spinner {
679
679
  animation: none;
680
680
  }
681
681
  }
682
682
 
683
683
  /* src/components/ui/NotificationBanner/NotificationBanner.module.css */
684
- @layer boostdev.bds271NotificationBanner-component {
685
- .bds271NotificationBanner-banner {
684
+ @layer boostdev.bds280NotificationBanner-component {
685
+ .bds280NotificationBanner-banner {
686
686
  display: flex;
687
687
  align-items: center;
688
688
  gap: var(--bds-space_m);
@@ -694,33 +694,33 @@
694
694
  line-height: var(--bds-font_line-height--body);
695
695
  inline-size: 100%;
696
696
  }
697
- .bds271NotificationBanner---variant_info {
697
+ .bds280NotificationBanner---variant_info {
698
698
  --banner_bg--variant: var(--banner_bg--info, var(--bds-color_blue--subtle));
699
699
  --banner_text--variant: var(--banner_text--info, var(--bds-color_on-blue--subtle));
700
700
  --banner_border--variant: var(--banner_border--info, var(--bds-color_blue));
701
701
  }
702
- .bds271NotificationBanner---variant_success {
702
+ .bds280NotificationBanner---variant_success {
703
703
  --banner_bg--variant: var(--banner_bg--success, var(--bds-color_success--subtle));
704
704
  --banner_text--variant: var(--banner_text--success, var(--bds-color_on-success--subtle));
705
705
  --banner_border--variant: var(--banner_border--success, var(--bds-color_success));
706
706
  }
707
- .bds271NotificationBanner---variant_warning {
707
+ .bds280NotificationBanner---variant_warning {
708
708
  --banner_bg--variant: var(--banner_bg--warning, var(--bds-color_orange--subtle));
709
709
  --banner_text--variant: var(--banner_text--warning, var(--bds-color_on-orange--subtle));
710
710
  --banner_border--variant: var(--banner_border--warning, var(--bds-color_warning));
711
711
  }
712
- .bds271NotificationBanner---variant_error {
712
+ .bds280NotificationBanner---variant_error {
713
713
  --banner_bg--variant: var(--banner_bg--error, rgb(from var(--bds-color_error) r g b / 12%));
714
714
  --banner_text--variant: var(--banner_text--error, var(--bds-color_on-bg));
715
715
  --banner_border--variant: var(--banner_border--error, var(--bds-color_error));
716
716
  }
717
- .bds271NotificationBanner-content {
717
+ .bds280NotificationBanner-content {
718
718
  flex: 1;
719
719
  }
720
- .bds271NotificationBanner-action {
720
+ .bds280NotificationBanner-action {
721
721
  flex-shrink: 0;
722
722
  }
723
- .bds271NotificationBanner-dismiss {
723
+ .bds280NotificationBanner-dismiss {
724
724
  all: unset;
725
725
  display: flex;
726
726
  align-items: center;
@@ -734,28 +734,28 @@
734
734
  --bdc_color: currentcolor;
735
735
  box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
736
736
  }
737
- .bds271NotificationBanner-dismiss svg {
737
+ .bds280NotificationBanner-dismiss svg {
738
738
  inline-size: 1rem;
739
739
  block-size: 1rem;
740
740
  }
741
- .bds271NotificationBanner-dismiss:focus-visible {
741
+ .bds280NotificationBanner-dismiss:focus-visible {
742
742
  outline: var(--bds-outline_default);
743
743
  outline-offset: var(--bds-outline_offset);
744
744
  }
745
745
  @media (hover: hover) and (pointer: fine) {
746
- .bds271NotificationBanner-dismiss:hover {
746
+ .bds280NotificationBanner-dismiss:hover {
747
747
  opacity: var(--banner_dismiss-opacity--hover, 0.7);
748
748
  }
749
749
  }
750
750
  }
751
751
 
752
752
  /* src/components/ui/Pagination/Pagination.module.css */
753
- @layer boostdev.bds271Pagination-component {
754
- .bds271Pagination-pagination {
753
+ @layer boostdev.bds280Pagination-component {
754
+ .bds280Pagination-pagination {
755
755
  display: flex;
756
756
  justify-content: center;
757
757
  }
758
- .bds271Pagination-list {
758
+ .bds280Pagination-list {
759
759
  display: flex;
760
760
  align-items: center;
761
761
  gap: var(--bds-space_xxs);
@@ -763,10 +763,10 @@
763
763
  margin: 0;
764
764
  padding: 0;
765
765
  }
766
- .bds271Pagination-list li {
766
+ .bds280Pagination-list li {
767
767
  list-style: none;
768
768
  }
769
- .bds271Pagination-button {
769
+ .bds280Pagination-button {
770
770
  all: unset;
771
771
  display: inline-flex;
772
772
  align-items: center;
@@ -787,30 +787,30 @@
787
787
  transition: var(--bds-animation_transition);
788
788
  box-sizing: border-box;
789
789
  }
790
- .bds271Pagination-button:disabled {
790
+ .bds280Pagination-button:disabled {
791
791
  opacity: 0.4;
792
792
  cursor: not-allowed;
793
793
  }
794
- .bds271Pagination-button:focus-visible {
794
+ .bds280Pagination-button:focus-visible {
795
795
  outline: var(--bds-outline_default);
796
796
  outline-offset: var(--bds-outline_offset);
797
797
  }
798
798
  @media (hover: hover) and (pointer: fine) {
799
- .bds271Pagination-button:not(:disabled, .bds271Pagination---active):hover {
799
+ .bds280Pagination-button:not(:disabled, .bds280Pagination---active):hover {
800
800
  --btn_bg--state: var(--btn_bg--hover, var(--bds-color_bg--subtle));
801
801
  --btn_color--state: var(--btn_color--hover, var(--bds-color_interactive_on-bg));
802
802
  }
803
803
  }
804
- .bds271Pagination-button.bds271Pagination---active {
804
+ .bds280Pagination-button.bds280Pagination---active {
805
805
  --btn_bg--state: var(--btn_bg--active, var(--bds-color_interactive));
806
806
  --btn_color--state: var(--btn_color--active, var(--bds-color_on-interactive));
807
807
  --btn_border--state: var(--btn_border--active, var(--bds-color_interactive));
808
808
  }
809
- .bds271Pagination-button.bds271Pagination---nav svg {
809
+ .bds280Pagination-button.bds280Pagination---nav svg {
810
810
  inline-size: 1rem;
811
811
  block-size: 1rem;
812
812
  }
813
- .bds271Pagination-ellipsis {
813
+ .bds280Pagination-ellipsis {
814
814
  display: inline-flex;
815
815
  align-items: center;
816
816
  justify-content: center;
@@ -823,71 +823,71 @@
823
823
  }
824
824
 
825
825
  /* src/components/ui/Progress/Progress.module.css */
826
- @layer boostdev.bds271Progress-component {
827
- .bds271Progress-container {
826
+ @layer boostdev.bds280Progress-component {
827
+ .bds280Progress-container {
828
828
  display: flex;
829
829
  flex-direction: column;
830
830
  gap: var(--bds-space_xxs);
831
831
  inline-size: 100%;
832
832
  }
833
- .bds271Progress-labelRow {
833
+ .bds280Progress-labelRow {
834
834
  display: flex;
835
835
  justify-content: space-between;
836
836
  align-items: baseline;
837
837
  font-size: var(--bds-font_size--body--s);
838
838
  color: var(--bds-color_on-bg);
839
839
  }
840
- .bds271Progress-value {
840
+ .bds280Progress-value {
841
841
  font-variant-numeric: tabular-nums;
842
842
  }
843
- .bds271Progress-track {
843
+ .bds280Progress-track {
844
844
  inline-size: 100%;
845
845
  block-size: var(--progress_height, var(--bds-space_xs));
846
846
  background-color: var(--bds-color_bg--subtle);
847
847
  border-radius: var(--progress_radius, var(--bds-border_radius--full));
848
848
  overflow: hidden;
849
849
  }
850
- .bds271Progress-track.bds271Progress---size_small {
850
+ .bds280Progress-track.bds280Progress---size_small {
851
851
  --progress_height: var(--bds-space_xxs);
852
852
  }
853
- .bds271Progress-track.bds271Progress---size_medium {
853
+ .bds280Progress-track.bds280Progress---size_medium {
854
854
  --progress_height: var(--bds-space_xs);
855
855
  }
856
- .bds271Progress-track.bds271Progress---size_large {
856
+ .bds280Progress-track.bds280Progress---size_large {
857
857
  --progress_height: var(--bds-space_s);
858
858
  }
859
- .bds271Progress-fill {
859
+ .bds280Progress-fill {
860
860
  block-size: 100%;
861
861
  background-color: var(--progress_color-active, var(--bdc-color_active));
862
862
  border-radius: var(--progress_radius, var(--bds-border_radius--full));
863
863
  transition: inline-size var(--bds-animation_transition-duration) var(--bds-animation_easing);
864
864
  }
865
865
  @media (prefers-reduced-motion: reduce) {
866
- .bds271Progress-fill {
866
+ .bds280Progress-fill {
867
867
  transition: none;
868
868
  }
869
869
  }
870
870
  }
871
871
 
872
872
  /* src/components/ui/ProgressCircle/ProgressCircle.module.css */
873
- @layer boostdev.bds271ProgressCircle-component {
874
- .bds271ProgressCircle-wrapper {
873
+ @layer boostdev.bds280ProgressCircle-component {
874
+ .bds280ProgressCircle-wrapper {
875
875
  position: relative;
876
876
  display: inline-flex;
877
877
  align-items: center;
878
878
  justify-content: center;
879
879
  }
880
- .bds271ProgressCircle-svg {
880
+ .bds280ProgressCircle-svg {
881
881
  display: block;
882
882
  }
883
- .bds271ProgressCircle-track {
883
+ .bds280ProgressCircle-track {
884
884
  stroke: var(--bds-color_bg--subtle);
885
885
  }
886
- .bds271ProgressCircle-fill {
886
+ .bds280ProgressCircle-fill {
887
887
  stroke: var(--progressCircle_color-active, var(--bdc-color_active));
888
888
  transition: stroke-dashoffset var(--bds-animation_transition-duration) var(--bds-animation_easing);
889
889
  }
890
- .bds271ProgressCircle-value {
890
+ .bds280ProgressCircle-value {
891
891
  position: absolute;
892
892
  font-size: var(--bds-font_size--body--s);
893
893
  font-weight: var(--bds-font_weight--semibold);
@@ -895,34 +895,34 @@
895
895
  color: var(--bds-color_on-bg);
896
896
  line-height: 1;
897
897
  }
898
- .bds271ProgressCircle---size_small .bds271ProgressCircle-value {
898
+ .bds280ProgressCircle---size_small .bds280ProgressCircle-value {
899
899
  font-size: 0.5rem;
900
900
  }
901
- .bds271ProgressCircle---size_medium .bds271ProgressCircle-value {
901
+ .bds280ProgressCircle---size_medium .bds280ProgressCircle-value {
902
902
  font-size: var(--bds-font_size--body--s);
903
903
  }
904
- .bds271ProgressCircle---size_large .bds271ProgressCircle-value {
904
+ .bds280ProgressCircle---size_large .bds280ProgressCircle-value {
905
905
  font-size: var(--bds-font_size--body);
906
906
  }
907
907
  @media (prefers-reduced-motion: reduce) {
908
- .bds271ProgressCircle-fill {
908
+ .bds280ProgressCircle-fill {
909
909
  transition: none;
910
910
  }
911
911
  }
912
912
  }
913
913
 
914
914
  /* src/components/ui/Separator/Separator.module.css */
915
- @layer boostdev.bds271Separator-component {
916
- .bds271Separator-separator {
915
+ @layer boostdev.bds280Separator-component {
916
+ .bds280Separator-separator {
917
917
  border: none;
918
918
  background-color: var(--separator_color, var(--bds-color_on-bg));
919
919
  }
920
- .bds271Separator-separator.bds271Separator---horizontal {
920
+ .bds280Separator-separator.bds280Separator---horizontal {
921
921
  display: block;
922
922
  inline-size: 100%;
923
923
  block-size: var(--separator_thickness, 1px);
924
924
  }
925
- .bds271Separator-separator.bds271Separator---vertical {
925
+ .bds280Separator-separator.bds280Separator---vertical {
926
926
  display: inline-block;
927
927
  inline-size: var(--separator_thickness, 1px);
928
928
  align-self: stretch;
@@ -930,8 +930,8 @@
930
930
  }
931
931
 
932
932
  /* src/components/ui/Skeleton/Skeleton.module.css */
933
- @layer boostdev.bds271Skeleton-component {
934
- .bds271Skeleton-skeleton {
933
+ @layer boostdev.bds280Skeleton-component {
934
+ .bds280Skeleton-skeleton {
935
935
  background:
936
936
  linear-gradient(
937
937
  90deg,
@@ -954,8 +954,8 @@
954
954
  }
955
955
 
956
956
  /* src/components/ui/SkipLink/SkipLink.module.css */
957
- @layer boostdev.bds271SkipLink-component {
958
- .bds271SkipLink-skipLink {
957
+ @layer boostdev.bds280SkipLink-component {
958
+ .bds280SkipLink-skipLink {
959
959
  position: absolute;
960
960
  inset-block-start: var(--bds-space_s);
961
961
  inset-inline-start: var(--bds-space_s);
@@ -973,21 +973,21 @@
973
973
  transform: translateY(-200%);
974
974
  transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
975
975
  }
976
- .bds271SkipLink-skipLink:focus-visible {
976
+ .bds280SkipLink-skipLink:focus-visible {
977
977
  transform: translateY(0);
978
978
  outline: var(--bds-outline_default);
979
979
  outline-offset: var(--bds-outline_offset);
980
980
  }
981
981
  @media (prefers-reduced-motion: reduce) {
982
- .bds271SkipLink-skipLink {
982
+ .bds280SkipLink-skipLink {
983
983
  transition: none;
984
984
  }
985
985
  }
986
986
  }
987
987
 
988
988
  /* src/components/ui/Table/Table.module.css */
989
- @layer boostdev.bds271Table-component {
990
- .bds271Table-wrapper {
989
+ @layer boostdev.bds280Table-component {
990
+ .bds280Table-wrapper {
991
991
  inline-size: 100%;
992
992
  overflow-inline: auto;
993
993
  border: var(--table_border, none);
@@ -996,23 +996,23 @@
996
996
  border-radius: var(--table_radius, var(--bdc-outline_radius));
997
997
  box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
998
998
  }
999
- .bds271Table-table {
999
+ .bds280Table-table {
1000
1000
  inline-size: 100%;
1001
1001
  border-collapse: collapse;
1002
1002
  font-size: var(--bds-font_size--body);
1003
1003
  font-family: var(--bds-font_family--body);
1004
1004
  }
1005
- .bds271Table-caption {
1005
+ .bds280Table-caption {
1006
1006
  caption-side: top;
1007
1007
  text-align: start;
1008
1008
  padding: var(--bds-space_s) var(--bds-space_m);
1009
1009
  font-weight: var(--bds-font_weight--semibold);
1010
1010
  color: var(--bds-color_on-bg);
1011
1011
  }
1012
- .bds271Table-thead {
1012
+ .bds280Table-thead {
1013
1013
  background-color: var(--bds-color_bg--subtle);
1014
1014
  }
1015
- .bds271Table-th {
1015
+ .bds280Table-th {
1016
1016
  padding: var(--bds-space_s) var(--bds-space_m);
1017
1017
  text-align: start;
1018
1018
  font-weight: var(--bds-font_weight--semibold);
@@ -1021,10 +1021,10 @@
1021
1021
  white-space: nowrap;
1022
1022
  border-block-end: 1px solid var(--bds-color_bg--subtle);
1023
1023
  }
1024
- .bds271Table-th.bds271Table---sortable {
1024
+ .bds280Table-th.bds280Table---sortable {
1025
1025
  padding: 0;
1026
1026
  }
1027
- .bds271Table-sortButton {
1027
+ .bds280Table-sortButton {
1028
1028
  all: unset;
1029
1029
  display: flex;
1030
1030
  align-items: center;
@@ -1038,64 +1038,64 @@
1038
1038
  transition: var(--bds-animation_transition);
1039
1039
  box-sizing: border-box;
1040
1040
  }
1041
- .bds271Table-sortButton:focus-visible {
1041
+ .bds280Table-sortButton:focus-visible {
1042
1042
  outline: var(--bds-outline_default);
1043
1043
  outline-offset: calc(var(--bds-outline_offset) * -1);
1044
1044
  }
1045
1045
  @media (hover: hover) and (pointer: fine) {
1046
- .bds271Table-sortButton:hover {
1046
+ .bds280Table-sortButton:hover {
1047
1047
  color: var(--table_sortBtn-color--hover, var(--bds-color_on-bg));
1048
1048
  }
1049
1049
  }
1050
- .bds271Table-sortIcon {
1050
+ .bds280Table-sortIcon {
1051
1051
  inline-size: 1rem;
1052
1052
  block-size: 1rem;
1053
1053
  opacity: 0.4;
1054
1054
  transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing), opacity var(--bds-animation_transition-duration) var(--bds-animation_easing);
1055
1055
  }
1056
- .bds271Table-sortIcon.bds271Table---sort-active {
1056
+ .bds280Table-sortIcon.bds280Table---sort-active {
1057
1057
  opacity: 1;
1058
1058
  color: var(--bds-color_interactive);
1059
1059
  }
1060
- .bds271Table-sortIcon.bds271Table---sort-desc {
1060
+ .bds280Table-sortIcon.bds280Table---sort-desc {
1061
1061
  transform: rotate(180deg);
1062
1062
  }
1063
- .bds271Table-tbody .bds271Table-tr {
1063
+ .bds280Table-tbody .bds280Table-tr {
1064
1064
  border-block-end: 1px solid var(--bds-color_bg--subtle);
1065
1065
  transition: var(--bds-animation_transition);
1066
1066
  }
1067
- .bds271Table-tbody .bds271Table-tr:last-child {
1067
+ .bds280Table-tbody .bds280Table-tr:last-child {
1068
1068
  border-block-end: none;
1069
1069
  }
1070
1070
  @media (hover: hover) and (pointer: fine) {
1071
- .bds271Table-tbody .bds271Table-tr:hover {
1071
+ .bds280Table-tbody .bds280Table-tr:hover {
1072
1072
  background-color: var(--table_row-bg--hover, var(--bds-color_bg--subtle));
1073
1073
  }
1074
1074
  }
1075
- .bds271Table-td {
1075
+ .bds280Table-td {
1076
1076
  padding: var(--bds-space_s) var(--bds-space_m);
1077
1077
  color: var(--bds-color_on-bg);
1078
1078
  vertical-align: middle;
1079
1079
  }
1080
1080
  @media (prefers-reduced-motion: reduce) {
1081
- .bds271Table-sortIcon {
1081
+ .bds280Table-sortIcon {
1082
1082
  transition: none;
1083
1083
  }
1084
1084
  }
1085
1085
  }
1086
1086
 
1087
1087
  /* src/components/ui/Tabs/Tabs.module.css */
1088
- @layer boostdev.bds271Tabs-component {
1089
- .bds271Tabs-tabs {
1088
+ @layer boostdev.bds280Tabs-component {
1089
+ .bds280Tabs-tabs {
1090
1090
  display: flex;
1091
1091
  flex-direction: column;
1092
1092
  }
1093
- .bds271Tabs-tabList {
1093
+ .bds280Tabs-tabList {
1094
1094
  display: flex;
1095
1095
  border-block-end: 1px solid var(--bds-color_bg--subtle);
1096
1096
  gap: var(--bds-space_xxs);
1097
1097
  }
1098
- .bds271Tabs-tab {
1098
+ .bds280Tabs-tab {
1099
1099
  all: unset;
1100
1100
  display: inline-flex;
1101
1101
  align-items: center;
@@ -1109,41 +1109,41 @@
1109
1109
  cursor: pointer;
1110
1110
  transition: var(--bds-animation_transition);
1111
1111
  }
1112
- .bds271Tabs-tab.bds271Tabs---active {
1112
+ .bds280Tabs-tab.bds280Tabs---active {
1113
1113
  --tab_color--state: var(--tab_color--active, var(--bds-color_interactive_on-bg));
1114
1114
  --tab_border-color--state: var(--tab_border-color--active, var(--bds-color_interactive));
1115
1115
  }
1116
- .bds271Tabs-tab:disabled {
1116
+ .bds280Tabs-tab:disabled {
1117
1117
  opacity: 0.4;
1118
1118
  cursor: not-allowed;
1119
1119
  }
1120
- .bds271Tabs-tab:focus-visible {
1120
+ .bds280Tabs-tab:focus-visible {
1121
1121
  outline: var(--bds-outline_default);
1122
1122
  outline-offset: var(--bds-outline_offset);
1123
1123
  border-radius: var(--bds-border_radius--xs);
1124
1124
  }
1125
1125
  @media (hover: hover) and (pointer: fine) {
1126
- .bds271Tabs-tab:not(:disabled, .bds271Tabs---active):hover {
1126
+ .bds280Tabs-tab:not(:disabled, .bds280Tabs---active):hover {
1127
1127
  --tab_color--state: var(--tab_color--hover, var(--bds-color_interactive_on-bg));
1128
1128
  }
1129
1129
  }
1130
- .bds271Tabs-panel {
1130
+ .bds280Tabs-panel {
1131
1131
  padding-block-start: var(--bds-space_m);
1132
1132
  }
1133
- .bds271Tabs-panel:focus-visible {
1133
+ .bds280Tabs-panel:focus-visible {
1134
1134
  outline: var(--bds-outline_default);
1135
1135
  outline-offset: var(--bds-outline_offset);
1136
1136
  }
1137
1137
  }
1138
1138
 
1139
1139
  /* src/components/ui/Tooltip/Tooltip.module.css */
1140
- @layer boostdev.bds271Tooltip-component {
1141
- .bds271Tooltip-wrapper {
1140
+ @layer boostdev.bds280Tooltip-component {
1141
+ .bds280Tooltip-wrapper {
1142
1142
  position: relative;
1143
1143
  display: inline-flex;
1144
1144
  align-items: center;
1145
1145
  }
1146
- .bds271Tooltip-tooltip {
1146
+ .bds280Tooltip-tooltip {
1147
1147
  position: absolute;
1148
1148
  z-index: var(--bds-z-index_popover);
1149
1149
  padding: var(--bds-space_xxs) var(--bds-space_xs);
@@ -1158,68 +1158,68 @@
1158
1158
  opacity: 0;
1159
1159
  transition: opacity var(--bds-animation_transition-duration) var(--bds-animation_easing);
1160
1160
  }
1161
- .bds271Tooltip-wrapper:hover .bds271Tooltip-tooltip,
1162
- .bds271Tooltip-wrapper:focus-within .bds271Tooltip-tooltip {
1161
+ .bds280Tooltip-wrapper:hover .bds280Tooltip-tooltip,
1162
+ .bds280Tooltip-wrapper:focus-within .bds280Tooltip-tooltip {
1163
1163
  visibility: visible;
1164
1164
  opacity: 1;
1165
1165
  }
1166
- .bds271Tooltip---placement_top {
1166
+ .bds280Tooltip---placement_top {
1167
1167
  inset-block-end: calc(100% + var(--bds-space_xs));
1168
1168
  inset-inline-start: 50%;
1169
1169
  transform: translateX(-50%);
1170
1170
  }
1171
- .bds271Tooltip---placement_bottom {
1171
+ .bds280Tooltip---placement_bottom {
1172
1172
  inset-block-start: calc(100% + var(--bds-space_xs));
1173
1173
  inset-inline-start: 50%;
1174
1174
  transform: translateX(-50%);
1175
1175
  }
1176
- .bds271Tooltip---placement_left {
1176
+ .bds280Tooltip---placement_left {
1177
1177
  inset-inline-end: calc(100% + var(--bds-space_xs));
1178
1178
  inset-block-start: 50%;
1179
1179
  transform: translateY(-50%);
1180
1180
  }
1181
- .bds271Tooltip---placement_right {
1181
+ .bds280Tooltip---placement_right {
1182
1182
  inset-inline-start: calc(100% + var(--bds-space_xs));
1183
1183
  inset-block-start: 50%;
1184
1184
  transform: translateY(-50%);
1185
1185
  }
1186
1186
  @media (prefers-reduced-motion: reduce) {
1187
- .bds271Tooltip-tooltip {
1187
+ .bds280Tooltip-tooltip {
1188
1188
  transition: none;
1189
1189
  }
1190
1190
  }
1191
1191
  }
1192
1192
 
1193
1193
  /* src/components/ui/Typography/Typography.module.css */
1194
- @layer boostdev.bds271Typography-component {
1195
- .bds271Typography-typography {
1194
+ @layer boostdev.bds280Typography-component {
1195
+ .bds280Typography-typography {
1196
1196
  margin: 0;
1197
1197
  font-family: var(--bds-font_family--body);
1198
1198
  color: var(--typography_color, var(--bds-color_on-bg));
1199
1199
  }
1200
- .bds271Typography---h1 {
1200
+ .bds280Typography---h1 {
1201
1201
  font-family: var(--bds-font_family--heading);
1202
1202
  font-size: var(--bds-font_size--heading-1);
1203
1203
  font-weight: var(--bds-font_weight--bold);
1204
1204
  line-height: var(--bds-font_line-height--heading);
1205
1205
  }
1206
- .bds271Typography---h2 {
1206
+ .bds280Typography---h2 {
1207
1207
  font-family: var(--bds-font_family--heading);
1208
1208
  font-size: var(--bds-font_size--heading-2);
1209
1209
  font-weight: var(--bds-font_weight--semibold);
1210
1210
  line-height: var(--bds-font_line-height--heading);
1211
1211
  }
1212
- .bds271Typography---h3 {
1212
+ .bds280Typography---h3 {
1213
1213
  font-family: var(--bds-font_family--heading);
1214
1214
  font-size: var(--bds-font_size--heading-3);
1215
1215
  font-weight: var(--bds-font_weight--semibold);
1216
1216
  line-height: var(--bds-font_line-height--heading);
1217
1217
  }
1218
- .bds271Typography---body {
1218
+ .bds280Typography---body {
1219
1219
  font-size: var(--bds-font_size--body);
1220
1220
  line-height: var(--bds-font_line-height--body);
1221
1221
  }
1222
- .bds271Typography---body_s {
1222
+ .bds280Typography---body_s {
1223
1223
  font-size: var(--bds-font_size--body--s);
1224
1224
  line-height: var(--bds-font_line-height--body);
1225
1225
  }
@@ -1250,9 +1250,9 @@
1250
1250
  box-shadow: 0 0 0 0 rgb(from var(--button_pulse-color, var(--button_color, var(--bds-color_interactive))) r g b / 0%);
1251
1251
  }
1252
1252
  }
1253
- @layer boostdev.bds271Button-component {
1254
- .bds271Button-button,
1255
- .bds271Button-button[href] {
1253
+ @layer boostdev.bds280Button-component {
1254
+ .bds280Button-button,
1255
+ .bds280Button-button[href] {
1256
1256
  all: unset;
1257
1257
  position: relative;
1258
1258
  font: inherit;
@@ -1277,78 +1277,78 @@
1277
1277
  box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
1278
1278
  transition: var(--bds-animation_transition), --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing);
1279
1279
  }
1280
- .bds271Button-button.bds271Button---default {
1280
+ .bds280Button-button.bds280Button---default {
1281
1281
  }
1282
- .bds271Button-button.bds271Button---outline,
1283
- .bds271Button-button.bds271Button---ghost {
1282
+ .bds280Button-button.bds280Button---outline,
1283
+ .bds280Button-button.bds280Button---ghost {
1284
1284
  --button_bg--variant: var(--button_bg--outline, transparent);
1285
1285
  --button_text--variant: var(--button_text--outline, var(--button_color--on-bg));
1286
1286
  --button_border--variant: var(--button_border--outline, var(--button_color--on-bg));
1287
1287
  }
1288
- .bds271Button-button.bds271Button---size_small {
1288
+ .bds280Button-button.bds280Button---size_small {
1289
1289
  --button_height: 2.25em;
1290
1290
  --button_font-size: var(--bds-font_size--body--s);
1291
1291
  padding-inline: var(--bds-space_m);
1292
1292
  }
1293
- .bds271Button-button.bds271Button---size_medium {
1293
+ .bds280Button-button.bds280Button---size_medium {
1294
1294
  --button_height: 3em;
1295
1295
  padding-inline: var(--bds-space_l);
1296
1296
  }
1297
- .bds271Button-button.bds271Button---size_large {
1297
+ .bds280Button-button.bds280Button---size_large {
1298
1298
  --button_font-size: var(--bds-font_size--heading-3);
1299
1299
  padding-inline: var(--bds-space_xl);
1300
1300
  }
1301
- .bds271Button-button.bds271Button---hasPulse {
1301
+ .bds280Button-button.bds280Button---hasPulse {
1302
1302
  animation: pulse 3s infinite;
1303
1303
  }
1304
- .bds271Button-button.bds271Button---iconOnly {
1304
+ .bds280Button-button.bds280Button---iconOnly {
1305
1305
  aspect-ratio: 1;
1306
1306
  box-sizing: border-box;
1307
1307
  padding: var(--bds-space_xxs);
1308
1308
  }
1309
- .bds271Button-button.bds271Button---iconOnly > * {
1309
+ .bds280Button-button.bds280Button---iconOnly > * {
1310
1310
  inline-size: 100%;
1311
1311
  block-size: 100%;
1312
1312
  }
1313
- .bds271Button-button[href] {
1313
+ .bds280Button-button[href] {
1314
1314
  text-decoration: none;
1315
1315
  }
1316
- .bds271Button-button svg {
1316
+ .bds280Button-button svg {
1317
1317
  --icon__stroke: currentcolor;
1318
1318
  fill: currentcolor;
1319
1319
  color: currentcolor;
1320
1320
  flex-shrink: 0;
1321
1321
  }
1322
- .bds271Button-iconStart {
1322
+ .bds280Button-iconStart {
1323
1323
  display: flex;
1324
1324
  align-items: center;
1325
1325
  margin-inline-start: calc(var(--bds-space_s) * -1);
1326
1326
  transition: var(--bds-animation_transition);
1327
1327
  }
1328
- .bds271Button-iconEnd {
1328
+ .bds280Button-iconEnd {
1329
1329
  display: flex;
1330
1330
  align-items: center;
1331
1331
  margin-inline-end: calc(var(--bds-space_s) * -1);
1332
1332
  transition: var(--bds-animation_transition);
1333
1333
  }
1334
- .bds271Button-button.bds271Button---iconOnly .bds271Button-iconStart,
1335
- .bds271Button-button.bds271Button---iconOnly .bds271Button-iconEnd {
1334
+ .bds280Button-button.bds280Button---iconOnly .bds280Button-iconStart,
1335
+ .bds280Button-button.bds280Button---iconOnly .bds280Button-iconEnd {
1336
1336
  margin-inline: 0;
1337
1337
  }
1338
1338
  @media (hover: hover) and (pointer: fine) {
1339
- .bds271Button-button:hover .bds271Button-iconStart svg {
1339
+ .bds280Button-button:hover .bds280Button-iconStart svg {
1340
1340
  animation: fadeZoom 2s ease-out infinite;
1341
1341
  }
1342
- .bds271Button-button:hover .bds271Button-iconEnd svg {
1342
+ .bds280Button-button:hover .bds280Button-iconEnd svg {
1343
1343
  animation: fadeZoom 2s ease-out infinite;
1344
1344
  }
1345
1345
  }
1346
- .bds271Button-button:focus-visible {
1346
+ .bds280Button-button:focus-visible {
1347
1347
  outline: var(--bds-outline_default);
1348
1348
  outline-offset: var(--bds-outline_offset);
1349
1349
  }
1350
1350
  @media (hover: hover) and (pointer: fine) {
1351
- .bds271Button-button.bds271Button---default:hover {
1351
+ .bds280Button-button.bds280Button---default:hover {
1352
1352
  --button_bg--variant: var(--button_bg--hover, var(--bds-color_bg));
1353
1353
  --button_text--variant: var(--button_text--hover, var(--bds-color_interactive_on-bg));
1354
1354
  --button_border--variant: var(--button_border--hover, currentcolor);
@@ -1356,8 +1356,8 @@
1356
1356
  }
1357
1357
  }
1358
1358
  @media (hover: hover) and (pointer: fine) {
1359
- .bds271Button-button.bds271Button---outline:hover,
1360
- .bds271Button-button.bds271Button---ghost:hover {
1359
+ .bds280Button-button.bds280Button---outline:hover,
1360
+ .bds280Button-button.bds280Button---ghost:hover {
1361
1361
  --button_bg--variant: var(--button_bg--outline-hover, var(--button_color));
1362
1362
  --button_text--variant: var(--button_text--outline-hover, var(--button_on-color));
1363
1363
  --button_border--variant: var(--button_border--outline-hover, transparent);
@@ -1366,8 +1366,8 @@
1366
1366
  }
1367
1367
 
1368
1368
  /* src/components/interaction/Command/Command.module.css */
1369
- @layer boostdev.bds271Command-component {
1370
- .bds271Command-dialog {
1369
+ @layer boostdev.bds280Command-component {
1370
+ .bds280Command-dialog {
1371
1371
  padding: 0;
1372
1372
  border: none;
1373
1373
  border-radius: var(--bds-border_radius--m);
@@ -1377,11 +1377,11 @@
1377
1377
  overflow: visible;
1378
1378
  margin-block-start: 10vh;
1379
1379
  }
1380
- .bds271Command-dialog::backdrop {
1380
+ .bds280Command-dialog::backdrop {
1381
1381
  background-color: var(--color_backdrop, rgb(0 0 0 / 50%));
1382
1382
  backdrop-filter: blur(3px);
1383
1383
  }
1384
- .bds271Command-palette {
1384
+ .bds280Command-palette {
1385
1385
  display: flex;
1386
1386
  flex-direction: column;
1387
1387
  background-color: var(--command_color, var(--bds-color_bg));
@@ -1394,7 +1394,7 @@
1394
1394
  --bdc-outline_radius: var(--bds-border_radius--m);
1395
1395
  box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--command_shadow, var(--bds-shadow_xl));
1396
1396
  }
1397
- .bds271Command-searchRow {
1397
+ .bds280Command-searchRow {
1398
1398
  display: flex;
1399
1399
  align-items: center;
1400
1400
  gap: var(--bds-space_xs);
@@ -1402,13 +1402,13 @@
1402
1402
  border-block-end: 1px solid currentcolor;
1403
1403
  flex-shrink: 0;
1404
1404
  }
1405
- .bds271Command-searchIcon {
1405
+ .bds280Command-searchIcon {
1406
1406
  inline-size: 1.25rem;
1407
1407
  block-size: 1.25rem;
1408
1408
  color: var(--bds-color_on-bg);
1409
1409
  flex-shrink: 0;
1410
1410
  }
1411
- .bds271Command-search {
1411
+ .bds280Command-search {
1412
1412
  flex: 1;
1413
1413
  border: none;
1414
1414
  outline: none;
@@ -1418,10 +1418,10 @@
1418
1418
  background: transparent;
1419
1419
  min-inline-size: 0;
1420
1420
  }
1421
- .bds271Command-search::placeholder {
1421
+ .bds280Command-search::placeholder {
1422
1422
  color: var(--bds-color_on-bg);
1423
1423
  }
1424
- .bds271Command-escHint {
1424
+ .bds280Command-escHint {
1425
1425
  font-size: var(--bds-font_size--body--s);
1426
1426
  color: var(--bds-color_on-bg);
1427
1427
  border-radius: var(--bds-border_radius--xs);
@@ -1431,18 +1431,18 @@
1431
1431
  border: none;
1432
1432
  box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
1433
1433
  }
1434
- .bds271Command-list {
1434
+ .bds280Command-list {
1435
1435
  overflow-block: auto;
1436
1436
  list-style: none;
1437
1437
  margin: 0;
1438
1438
  padding: var(--bds-space_xs) 0;
1439
1439
  }
1440
- .bds271Command-groupList {
1440
+ .bds280Command-groupList {
1441
1441
  list-style: none;
1442
1442
  margin: 0;
1443
1443
  padding: 0;
1444
1444
  }
1445
- .bds271Command-group {
1445
+ .bds280Command-group {
1446
1446
  padding: var(--bds-space_xs) var(--bds-space_m);
1447
1447
  font-size: var(--bds-font_size--body--s);
1448
1448
  font-weight: var(--bds-font_weight--semibold);
@@ -1450,7 +1450,7 @@
1450
1450
  text-transform: uppercase;
1451
1451
  letter-spacing: 0.05em;
1452
1452
  }
1453
- .bds271Command-item {
1453
+ .bds280Command-item {
1454
1454
  display: flex;
1455
1455
  align-items: center;
1456
1456
  gap: var(--bds-space_s);
@@ -1458,19 +1458,19 @@
1458
1458
  cursor: pointer;
1459
1459
  transition: background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
1460
1460
  }
1461
- .bds271Command-itemActive {
1461
+ .bds280Command-itemActive {
1462
1462
  background-color: var(--command_item-bg--active, var(--bds-color_bg--subtle));
1463
1463
  }
1464
- .bds271Command-itemLabel {
1464
+ .bds280Command-itemLabel {
1465
1465
  flex: 1;
1466
1466
  font-size: var(--bds-font_size--body);
1467
1467
  color: var(--bds-color_on-bg);
1468
1468
  }
1469
- .bds271Command-itemDesc {
1469
+ .bds280Command-itemDesc {
1470
1470
  font-size: var(--bds-font_size--body--s);
1471
1471
  color: var(--bds-color_on-bg);
1472
1472
  }
1473
- .bds271Command-shortcut {
1473
+ .bds280Command-shortcut {
1474
1474
  font-size: var(--bds-font_size--body--s);
1475
1475
  color: var(--bds-color_on-bg);
1476
1476
  border-radius: var(--bds-border_radius--xs);
@@ -1479,7 +1479,7 @@
1479
1479
  border: none;
1480
1480
  box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
1481
1481
  }
1482
- .bds271Command-empty {
1482
+ .bds280Command-empty {
1483
1483
  padding: var(--bds-space_l) var(--bds-space_m);
1484
1484
  text-align: center;
1485
1485
  color: var(--bds-color_on-bg);
@@ -1488,8 +1488,8 @@
1488
1488
  }
1489
1489
 
1490
1490
  /* src/components/interaction/Dialog/Dialog.module.css */
1491
- @layer boostdev.bds271Dialog-component {
1492
- .bds271Dialog-dialog {
1491
+ @layer boostdev.bds280Dialog-component {
1492
+ .bds280Dialog-dialog {
1493
1493
  font-size: var(--bds-font_size--body--s);
1494
1494
  border: var(--dialog_border, none);
1495
1495
  --bdc_color: currentcolor;
@@ -1503,14 +1503,14 @@
1503
1503
  max-block-size: 90svh;
1504
1504
  overflow: visible;
1505
1505
  }
1506
- .bds271Dialog-dialogContent {
1506
+ .bds280Dialog-dialogContent {
1507
1507
  display: grid;
1508
1508
  gap: var(--bds-grid_gap);
1509
1509
  overflow-block: auto;
1510
1510
  min-block-size: 0;
1511
1511
  flex: 1;
1512
1512
  }
1513
- .bds271Dialog-closeButton {
1513
+ .bds280Dialog-closeButton {
1514
1514
  all: unset;
1515
1515
  position: absolute;
1516
1516
  inset-block-start: -1em;
@@ -1528,23 +1528,23 @@
1528
1528
  box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
1529
1529
  cursor: pointer;
1530
1530
  }
1531
- .bds271Dialog-closeButton:focus-visible {
1531
+ .bds280Dialog-closeButton:focus-visible {
1532
1532
  outline: var(--bds-outline_default);
1533
1533
  outline-offset: var(--bds-outline_offset);
1534
1534
  }
1535
- .bds271Dialog-closeButton svg {
1535
+ .bds280Dialog-closeButton svg {
1536
1536
  inline-size: 1.25em;
1537
1537
  block-size: 1.25em;
1538
1538
  }
1539
- .bds271Dialog-dialog::backdrop {
1539
+ .bds280Dialog-dialog::backdrop {
1540
1540
  background-color: var(--color_backdrop, rgb(0 0 0 / 50%));
1541
1541
  backdrop-filter: blur(3px);
1542
1542
  }
1543
1543
  }
1544
1544
 
1545
1545
  /* src/components/interaction/Drawer/Drawer.module.css */
1546
- @layer boostdev.bds271Drawer-component {
1547
- .bds271Drawer-drawer {
1546
+ @layer boostdev.bds280Drawer-component {
1547
+ .bds280Drawer-drawer {
1548
1548
  position: fixed;
1549
1549
  inset-block: 0;
1550
1550
  inset-inline: auto 0;
@@ -1567,22 +1567,22 @@
1567
1567
  display var(--bds-animation_transition-duration) var(--bds-animation_easing) allow-discrete,
1568
1568
  overlay var(--bds-animation_transition-duration) var(--bds-animation_easing) allow-discrete;
1569
1569
  }
1570
- .bds271Drawer---side_left.bds271Drawer-drawer {
1570
+ .bds280Drawer---side_left.bds280Drawer-drawer {
1571
1571
  inset-inline: 0 auto;
1572
1572
  translate: -100% 0;
1573
1573
  }
1574
- .bds271Drawer-drawer[open] {
1574
+ .bds280Drawer-drawer[open] {
1575
1575
  translate: 0 0;
1576
1576
  }
1577
1577
  @starting-style {
1578
- .bds271Drawer-drawer[open] {
1578
+ .bds280Drawer-drawer[open] {
1579
1579
  translate: 100% 0;
1580
1580
  }
1581
- .bds271Drawer---side_left.bds271Drawer-drawer[open] {
1581
+ .bds280Drawer---side_left.bds280Drawer-drawer[open] {
1582
1582
  translate: -100% 0;
1583
1583
  }
1584
1584
  }
1585
- .bds271Drawer-drawer::backdrop {
1585
+ .bds280Drawer-drawer::backdrop {
1586
1586
  background-color: var(--color_backdrop, rgb(0 0 0 / 50%));
1587
1587
  backdrop-filter: blur(3px);
1588
1588
  opacity: 0;
@@ -1591,15 +1591,15 @@
1591
1591
  display var(--bds-animation_transition-duration) var(--bds-animation_easing) allow-discrete,
1592
1592
  overlay var(--bds-animation_transition-duration) var(--bds-animation_easing) allow-discrete;
1593
1593
  }
1594
- .bds271Drawer-drawer[open]::backdrop {
1594
+ .bds280Drawer-drawer[open]::backdrop {
1595
1595
  opacity: 1;
1596
1596
  }
1597
1597
  @starting-style {
1598
- .bds271Drawer-drawer[open]::backdrop {
1598
+ .bds280Drawer-drawer[open]::backdrop {
1599
1599
  opacity: 0;
1600
1600
  }
1601
1601
  }
1602
- .bds271Drawer-header {
1602
+ .bds280Drawer-header {
1603
1603
  display: flex;
1604
1604
  align-items: center;
1605
1605
  justify-content: space-between;
@@ -1607,7 +1607,7 @@
1607
1607
  border-block-end: 1px solid currentcolor;
1608
1608
  flex-shrink: 0;
1609
1609
  }
1610
- .bds271Drawer-closeButton {
1610
+ .bds280Drawer-closeButton {
1611
1611
  all: unset;
1612
1612
  display: flex;
1613
1613
  align-items: center;
@@ -1618,20 +1618,20 @@
1618
1618
  cursor: pointer;
1619
1619
  transition: var(--bds-animation_transition);
1620
1620
  }
1621
- .bds271Drawer-closeButton svg {
1621
+ .bds280Drawer-closeButton svg {
1622
1622
  inline-size: 1.25rem;
1623
1623
  block-size: 1.25rem;
1624
1624
  }
1625
- .bds271Drawer-closeButton:focus-visible {
1625
+ .bds280Drawer-closeButton:focus-visible {
1626
1626
  outline: var(--bds-outline_default);
1627
1627
  outline-offset: var(--bds-outline_offset);
1628
1628
  }
1629
1629
  @media (hover: hover) and (pointer: fine) {
1630
- .bds271Drawer-closeButton:hover {
1630
+ .bds280Drawer-closeButton:hover {
1631
1631
  background-color: var(--drawer_close-bg--hover, var(--bds-color_bg--subtle));
1632
1632
  }
1633
1633
  }
1634
- .bds271Drawer-body {
1634
+ .bds280Drawer-body {
1635
1635
  flex: 1;
1636
1636
  overflow-block: auto;
1637
1637
  padding: var(--bds-space_l);
@@ -1639,20 +1639,20 @@
1639
1639
  flex-direction: column;
1640
1640
  }
1641
1641
  @media (prefers-reduced-motion: reduce) {
1642
- .bds271Drawer-drawer,
1643
- .bds271Drawer-drawer::backdrop {
1642
+ .bds280Drawer-drawer,
1643
+ .bds280Drawer-drawer::backdrop {
1644
1644
  transition: none;
1645
1645
  }
1646
1646
  }
1647
1647
  }
1648
1648
 
1649
1649
  /* src/components/interaction/DropdownMenu/DropdownMenu.module.css */
1650
- @layer boostdev.bds271DropdownMenu-component {
1651
- .bds271DropdownMenu-wrapper {
1650
+ @layer boostdev.bds280DropdownMenu-component {
1651
+ .bds280DropdownMenu-wrapper {
1652
1652
  position: relative;
1653
1653
  display: inline-flex;
1654
1654
  }
1655
- .bds271DropdownMenu-menu {
1655
+ .bds280DropdownMenu-menu {
1656
1656
  position: absolute;
1657
1657
  inset-block-start: calc(100% + var(--bds-space_xxs));
1658
1658
  z-index: var(--bds-z-index_dropdown);
@@ -1668,22 +1668,22 @@
1668
1668
  list-style: none;
1669
1669
  margin: 0;
1670
1670
  }
1671
- .bds271DropdownMenu-menu li {
1671
+ .bds280DropdownMenu-menu li {
1672
1672
  list-style: none;
1673
1673
  }
1674
- .bds271DropdownMenu---placement_bottom-start {
1674
+ .bds280DropdownMenu---placement_bottom-start {
1675
1675
  inset-inline-start: 0;
1676
1676
  }
1677
- .bds271DropdownMenu---placement_bottom-end {
1677
+ .bds280DropdownMenu---placement_bottom-end {
1678
1678
  inset-inline-end: 0;
1679
1679
  }
1680
- .bds271DropdownMenu-separator {
1680
+ .bds280DropdownMenu-separator {
1681
1681
  border: none;
1682
1682
  border-block-start: 1px solid currentcolor;
1683
1683
  margin: var(--bds-space_xxs) 0;
1684
1684
  opacity: 0.15;
1685
1685
  }
1686
- .bds271DropdownMenu-item {
1686
+ .bds280DropdownMenu-item {
1687
1687
  all: unset;
1688
1688
  display: flex;
1689
1689
  align-items: center;
@@ -1697,22 +1697,22 @@
1697
1697
  box-sizing: border-box;
1698
1698
  transition: var(--bds-animation_transition);
1699
1699
  }
1700
- .bds271DropdownMenu-item:disabled {
1700
+ .bds280DropdownMenu-item:disabled {
1701
1701
  opacity: 0.4;
1702
1702
  cursor: not-allowed;
1703
1703
  }
1704
- .bds271DropdownMenu-item:focus-visible {
1704
+ .bds280DropdownMenu-item:focus-visible {
1705
1705
  outline: var(--bds-outline_default);
1706
1706
  outline-offset: calc(var(--bds-outline_offset) * -1);
1707
1707
  border-radius: var(--bds-border_radius--xs);
1708
1708
  }
1709
1709
  @media (hover: hover) and (pointer: fine) {
1710
- .bds271DropdownMenu-item:not(:disabled):hover {
1710
+ .bds280DropdownMenu-item:not(:disabled):hover {
1711
1711
  background-color: var(--dropdown_item-bg--hover, var(--bds-color_bg--subtle));
1712
1712
  color: var(--dropdown_item-color--hover, var(--bds-color_interactive_on-bg));
1713
1713
  }
1714
1714
  }
1715
- .bds271DropdownMenu-icon {
1715
+ .bds280DropdownMenu-icon {
1716
1716
  display: flex;
1717
1717
  align-items: center;
1718
1718
  flex-shrink: 0;
@@ -1720,11 +1720,11 @@
1720
1720
  }
1721
1721
 
1722
1722
  /* src/components/interaction/Popover/Popover.module.css */
1723
- @layer boostdev.bds271Popover-component {
1724
- .bds271Popover-wrapper {
1723
+ @layer boostdev.bds280Popover-component {
1724
+ .bds280Popover-wrapper {
1725
1725
  display: inline-flex;
1726
1726
  }
1727
- .bds271Popover-panel {
1727
+ .bds280Popover-panel {
1728
1728
  position: fixed;
1729
1729
  inset: unset;
1730
1730
  margin: 0;
@@ -1743,7 +1743,7 @@
1743
1743
  color: var(--popover_on-color, var(--bds-color_on-bg));
1744
1744
  font-size: var(--bds-font_size--body);
1745
1745
  }
1746
- .bds271Popover-panel[data-placement=bottom] {
1746
+ .bds280Popover-panel[data-placement=bottom] {
1747
1747
  top: anchor(bottom);
1748
1748
  left: anchor(left);
1749
1749
  margin-block-start: var(--bds-space_xs, 8px);
@@ -1752,7 +1752,7 @@
1752
1752
  --popover-right,
1753
1753
  --popover-left;
1754
1754
  }
1755
- .bds271Popover-panel[data-placement=top] {
1755
+ .bds280Popover-panel[data-placement=top] {
1756
1756
  bottom: anchor(top);
1757
1757
  left: anchor(left);
1758
1758
  margin-block-end: var(--bds-space_xs, 8px);
@@ -1761,7 +1761,7 @@
1761
1761
  --popover-right,
1762
1762
  --popover-left;
1763
1763
  }
1764
- .bds271Popover-panel[data-placement=right] {
1764
+ .bds280Popover-panel[data-placement=right] {
1765
1765
  top: anchor(top);
1766
1766
  left: anchor(right);
1767
1767
  margin-inline-start: var(--bds-space_xs, 8px);
@@ -1770,7 +1770,7 @@
1770
1770
  --popover-bottom,
1771
1771
  --popover-top;
1772
1772
  }
1773
- .bds271Popover-panel[data-placement=left] {
1773
+ .bds280Popover-panel[data-placement=left] {
1774
1774
  top: anchor(top);
1775
1775
  right: anchor(left);
1776
1776
  margin-inline-end: var(--bds-space_xs, 8px);
@@ -1828,10 +1828,10 @@
1828
1828
  margin-block-end: var(--bds-space_xs, 8px);
1829
1829
  }
1830
1830
  @media (width <= 420px) {
1831
- .bds271Popover-panel[data-placement=bottom],
1832
- .bds271Popover-panel[data-placement=top],
1833
- .bds271Popover-panel[data-placement=left],
1834
- .bds271Popover-panel[data-placement=right] {
1831
+ .bds280Popover-panel[data-placement=bottom],
1832
+ .bds280Popover-panel[data-placement=top],
1833
+ .bds280Popover-panel[data-placement=left],
1834
+ .bds280Popover-panel[data-placement=right] {
1835
1835
  left: var(--bds-space_xs, 8px);
1836
1836
  right: var(--bds-space_xs, 8px);
1837
1837
  inline-size: 100%;
@@ -1840,13 +1840,13 @@
1840
1840
  }
1841
1841
  }
1842
1842
  @media (aspect-ratio >= 2/1) {
1843
- .bds271Popover-panel[data-placement=bottom] {
1843
+ .bds280Popover-panel[data-placement=bottom] {
1844
1844
  position-try-fallbacks:
1845
1845
  --popover-top,
1846
1846
  --popover-right,
1847
1847
  --popover-left;
1848
1848
  }
1849
- .bds271Popover-panel[data-placement=top] {
1849
+ .bds280Popover-panel[data-placement=top] {
1850
1850
  position-try-fallbacks:
1851
1851
  --popover-bottom,
1852
1852
  --popover-right,
@@ -1856,24 +1856,24 @@
1856
1856
  }
1857
1857
 
1858
1858
  /* src/components/interaction/Rating/Rating.module.css */
1859
- @layer boostdev.bds271Rating-component {
1860
- .bds271Rating-rating {
1859
+ @layer boostdev.bds280Rating-component {
1860
+ .bds280Rating-rating {
1861
1861
  display: inline-flex;
1862
1862
  gap: var(--bds-space_xxxs);
1863
1863
  color: var(--rating_color, var(--bds-color_bg));
1864
1864
  }
1865
- .bds271Rating-star {
1865
+ .bds280Rating-star {
1866
1866
  width: 1.5em;
1867
1867
  height: 1.5em;
1868
1868
  }
1869
- .bds271Rating---filled {
1869
+ .bds280Rating---filled {
1870
1870
  color: var(--rating_color--filled, var(--bds-color_warning));
1871
1871
  }
1872
1872
  }
1873
1873
 
1874
1874
  /* src/components/interaction/Toast/Toast.module.css */
1875
- @layer boostdev.bds271Toast-component {
1876
- .bds271Toast-toastContainer {
1875
+ @layer boostdev.bds280Toast-component {
1876
+ .bds280Toast-toastContainer {
1877
1877
  position: fixed;
1878
1878
  inset: unset;
1879
1879
  inset-block-end: var(--bds-space_xl);
@@ -1885,7 +1885,7 @@
1885
1885
  padding: 0;
1886
1886
  background: transparent;
1887
1887
  }
1888
- .bds271Toast-toast {
1888
+ .bds280Toast-toast {
1889
1889
  padding: var(--bds-space_m) var(--bds-space_l);
1890
1890
  background-color: var(--toast_color, var(--toast_color--variant, var(--bds-color_bg)));
1891
1891
  color: var(--toast_on-color, var(--toast_on-color--variant, var(--bds-color_on-bg)));
@@ -1897,26 +1897,26 @@
1897
1897
  min-inline-size: 300px;
1898
1898
  animation: slideIn var(--bds-animation_duration--fast) var(--bds-animation_easing);
1899
1899
  }
1900
- .bds271Toast-toast.bds271Toast---variant_success {
1900
+ .bds280Toast-toast.bds280Toast---variant_success {
1901
1901
  --toast_color--variant: var(--toast_color--success, var(--bds-color_success));
1902
1902
  --toast_on-color--variant: var(--toast_on-color--success, var(--bds-color_on-success));
1903
1903
  }
1904
- .bds271Toast-toast.bds271Toast---variant_warning {
1904
+ .bds280Toast-toast.bds280Toast---variant_warning {
1905
1905
  --toast_color--variant: var(--toast_color--warning, var(--bds-color_warning));
1906
1906
  --toast_on-color--variant: var(--toast_on-color--warning, var(--bds-color_on-warning));
1907
1907
  }
1908
- .bds271Toast-toast.bds271Toast---variant_info {
1908
+ .bds280Toast-toast.bds280Toast---variant_info {
1909
1909
  --toast_color--variant: var(--toast_color--info, var(--bds-color_bg--subtle));
1910
1910
  --toast_on-color--variant: var(--toast_on-color--info, var(--bds-color_on-bg--subtle));
1911
1911
  }
1912
- .bds271Toast-toast.bds271Toast---variant_error {
1912
+ .bds280Toast-toast.bds280Toast---variant_error {
1913
1913
  --toast_color--variant: var(--toast_color--error, var(--bds-color_error));
1914
1914
  --toast_on-color--variant: var(--toast_on-color--error, var(--bds-color_on-error));
1915
1915
  }
1916
- .bds271Toast-message {
1916
+ .bds280Toast-message {
1917
1917
  flex: 1;
1918
1918
  }
1919
- .bds271Toast-closeButton {
1919
+ .bds280Toast-closeButton {
1920
1920
  display: flex;
1921
1921
  align-items: center;
1922
1922
  justify-content: center;
@@ -1929,7 +1929,7 @@
1929
1929
  cursor: pointer;
1930
1930
  color: var(--toast_on-color);
1931
1931
  }
1932
- .bds271Toast-closeButton svg {
1932
+ .bds280Toast-closeButton svg {
1933
1933
  inline-size: 1rem;
1934
1934
  block-size: 1rem;
1935
1935
  }
@@ -1946,18 +1946,18 @@
1946
1946
  }
1947
1947
 
1948
1948
  /* src/components/interaction/form/Checkbox/Checkbox.module.css */
1949
- @layer boostdev.bds271Checkbox-component {
1950
- .bds271Checkbox-checkboxGroup {
1949
+ @layer boostdev.bds280Checkbox-component {
1950
+ .bds280Checkbox-checkboxGroup {
1951
1951
  --inputSize: calc(var(--bds-space_s) * 2);
1952
1952
  display: flex;
1953
1953
  flex-direction: column;
1954
1954
  }
1955
- .bds271Checkbox-inputWrapper {
1955
+ .bds280Checkbox-inputWrapper {
1956
1956
  display: flex;
1957
1957
  align-items: stretch;
1958
1958
  gap: var(--bds-space_xs);
1959
1959
  }
1960
- .bds271Checkbox-checkbox {
1960
+ .bds280Checkbox-checkbox {
1961
1961
  margin-block-start: 0.25em;
1962
1962
  inline-size: var(--inputSize);
1963
1963
  block-size: var(--inputSize);
@@ -1973,11 +1973,11 @@
1973
1973
  position: relative;
1974
1974
  transition: --bdc_color 0.3s ease, background-color 0.3s ease;
1975
1975
  }
1976
- .bds271Checkbox-checkbox:checked {
1976
+ .bds280Checkbox-checkbox:checked {
1977
1977
  background-color: var(--checkbox_color-active, var(--bdc-color_active));
1978
1978
  --bdc_color: var(--checkbox_color-active, var(--bdc-color_active));
1979
1979
  }
1980
- .bds271Checkbox-checkbox:checked::after {
1980
+ .bds280Checkbox-checkbox:checked::after {
1981
1981
  content: "";
1982
1982
  position: absolute;
1983
1983
  inset-inline-start: 0.6em;
@@ -1988,36 +1988,36 @@
1988
1988
  border-width: 0 2px 2px 0;
1989
1989
  transform: rotate(45deg);
1990
1990
  }
1991
- .bds271Checkbox-checkbox:focus {
1991
+ .bds280Checkbox-checkbox:focus {
1992
1992
  --bdc_color: var(--bdc_color--focus);
1993
1993
  }
1994
- .bds271Checkbox-checkbox:focus-visible {
1994
+ .bds280Checkbox-checkbox:focus-visible {
1995
1995
  outline: var(--bds-outline_default);
1996
1996
  outline-offset: var(--bds-outline_offset);
1997
1997
  }
1998
- .bds271Checkbox-checkboxError {
1998
+ .bds280Checkbox-checkboxError {
1999
1999
  --bdc_color: var(--bdc_color--error);
2000
2000
  }
2001
2001
  }
2002
2002
 
2003
2003
  /* src/components/interaction/form/atoms/Message.module.css */
2004
- @layer boostdev.bds271Message-component {
2005
- .bds271Message-error,
2006
- .bds271Message-hint {
2004
+ @layer boostdev.bds280Message-component {
2005
+ .bds280Message-error,
2006
+ .bds280Message-hint {
2007
2007
  font-size: var(--bds-font_size--body--s);
2008
2008
  margin-inline-start: var(--labelPosition);
2009
2009
  }
2010
- .bds271Message-error {
2010
+ .bds280Message-error {
2011
2011
  color: var(--bds-color_error_on-bg);
2012
2012
  }
2013
- .bds271Message-hint {
2013
+ .bds280Message-hint {
2014
2014
  font-style: italic;
2015
2015
  }
2016
2016
  }
2017
2017
 
2018
2018
  /* src/components/interaction/form/atoms/Label.module.css */
2019
- @layer boostdev.bds271Label-component {
2020
- .bds271Label-label {
2019
+ @layer boostdev.bds280Label-component {
2020
+ .bds280Label-label {
2021
2021
  display: flex;
2022
2022
  align-items: center;
2023
2023
  font-family: var(--bds-font_family--body);
@@ -2027,8 +2027,8 @@
2027
2027
  }
2028
2028
 
2029
2029
  /* src/components/interaction/form/atoms/InputContainer.module.css */
2030
- @layer boostdev.bds271InputContainer-component {
2031
- .bds271InputContainer-container {
2030
+ @layer boostdev.bds280InputContainer-component {
2031
+ .bds280InputContainer-container {
2032
2032
  --labelPosition: calc(var(--inputSize) + var(--bds-space_m));
2033
2033
  display: flex;
2034
2034
  flex-direction: column;
@@ -2037,8 +2037,8 @@
2037
2037
  }
2038
2038
 
2039
2039
  /* src/components/interaction/form/CheckboxGroup/CheckboxGroup.module.css */
2040
- @layer boostdev.bds271CheckboxGroup-component {
2041
- .bds271CheckboxGroup-group {
2040
+ @layer boostdev.bds280CheckboxGroup-component {
2041
+ .bds280CheckboxGroup-group {
2042
2042
  border: none;
2043
2043
  padding: 0;
2044
2044
  margin: 0;
@@ -2046,7 +2046,7 @@
2046
2046
  flex-direction: column;
2047
2047
  gap: var(--bds-space_xs);
2048
2048
  }
2049
- .bds271CheckboxGroup-legend {
2049
+ .bds280CheckboxGroup-legend {
2050
2050
  font-family: var(--bds-font_family--body);
2051
2051
  font-size: var(--bds-font_size--body--s);
2052
2052
  font-weight: var(--bds-font_weight--medium);
@@ -2054,10 +2054,10 @@
2054
2054
  padding: 0;
2055
2055
  margin-block-end: var(--bds-space_xs);
2056
2056
  }
2057
- .bds271CheckboxGroup-required {
2057
+ .bds280CheckboxGroup-required {
2058
2058
  color: var(--bds-color_error);
2059
2059
  }
2060
- .bds271CheckboxGroup-items {
2060
+ .bds280CheckboxGroup-items {
2061
2061
  display: flex;
2062
2062
  flex-direction: column;
2063
2063
  gap: var(--bds-space_xs);
@@ -2065,17 +2065,17 @@
2065
2065
  }
2066
2066
 
2067
2067
  /* src/components/interaction/form/Combobox/Combobox.module.css */
2068
- @layer boostdev.bds271Combobox-component {
2069
- .bds271Combobox-formGroup {
2068
+ @layer boostdev.bds280Combobox-component {
2069
+ .bds280Combobox-formGroup {
2070
2070
  display: flex;
2071
2071
  flex-direction: column;
2072
2072
  }
2073
- .bds271Combobox-inputWrapper {
2073
+ .bds280Combobox-inputWrapper {
2074
2074
  position: relative;
2075
2075
  display: flex;
2076
2076
  align-items: center;
2077
2077
  }
2078
- .bds271Combobox-input {
2078
+ .bds280Combobox-input {
2079
2079
  appearance: none;
2080
2080
  inline-size: 100%;
2081
2081
  font-family: var(--bds-font_family--body);
@@ -2091,21 +2091,21 @@
2091
2091
  color: var(--combobox_color, var(--bds-color_on-bg));
2092
2092
  transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing), background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
2093
2093
  }
2094
- .bds271Combobox-input:focus {
2094
+ .bds280Combobox-input:focus {
2095
2095
  --bdc_color: var(--bdc_color--focus);
2096
2096
  }
2097
- .bds271Combobox-input:focus-visible {
2097
+ .bds280Combobox-input:focus-visible {
2098
2098
  outline: var(--bds-outline_default);
2099
2099
  outline-offset: var(--bds-outline_offset);
2100
2100
  }
2101
- .bds271Combobox-input:disabled {
2101
+ .bds280Combobox-input:disabled {
2102
2102
  opacity: 0.5;
2103
2103
  cursor: not-allowed;
2104
2104
  }
2105
- .bds271Combobox-inputError {
2105
+ .bds280Combobox-inputError {
2106
2106
  --bdc_color: var(--bdc_color--error);
2107
2107
  }
2108
- .bds271Combobox-chevron {
2108
+ .bds280Combobox-chevron {
2109
2109
  position: absolute;
2110
2110
  inset-inline-end: var(--bds-space_s);
2111
2111
  display: flex;
@@ -2113,11 +2113,11 @@
2113
2113
  pointer-events: none;
2114
2114
  color: var(--combobox_color, var(--bds-color_on-bg));
2115
2115
  }
2116
- .bds271Combobox-chevron svg {
2116
+ .bds280Combobox-chevron svg {
2117
2117
  inline-size: 1rem;
2118
2118
  block-size: 1rem;
2119
2119
  }
2120
- .bds271Combobox-listbox {
2120
+ .bds280Combobox-listbox {
2121
2121
  position: absolute;
2122
2122
  inset-block-start: calc(100% + var(--bds-space_xxs));
2123
2123
  inset-inline: 0;
@@ -2135,7 +2135,7 @@
2135
2135
  color: var(--combobox_on-color, var(--bds-color_on-bg));
2136
2136
  box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--combobox_listbox-shadow, var(--bds-shadow_m));
2137
2137
  }
2138
- .bds271Combobox-option {
2138
+ .bds280Combobox-option {
2139
2139
  display: flex;
2140
2140
  align-items: center;
2141
2141
  padding: var(--bds-space_xs) var(--bds-space_m);
@@ -2144,22 +2144,22 @@
2144
2144
  cursor: pointer;
2145
2145
  transition: var(--bds-animation_transition);
2146
2146
  }
2147
- .bds271Combobox-option.bds271Combobox---highlighted {
2147
+ .bds280Combobox-option.bds280Combobox---highlighted {
2148
2148
  background-color: var(--combobox_option-bg--highlighted, var(--bds-color_bg--subtle));
2149
2149
  color: var(--combobox_option-color--highlighted, var(--bds-color_interactive_on-bg));
2150
2150
  }
2151
- .bds271Combobox-option.bds271Combobox---selected {
2151
+ .bds280Combobox-option.bds280Combobox---selected {
2152
2152
  font-weight: var(--bds-font_weight--semibold);
2153
2153
  }
2154
- .bds271Combobox-option.bds271Combobox---disabled {
2154
+ .bds280Combobox-option.bds280Combobox---disabled {
2155
2155
  opacity: 0.4;
2156
2156
  cursor: not-allowed;
2157
2157
  }
2158
2158
  }
2159
2159
 
2160
2160
  /* src/components/interaction/form/FieldGroup/FieldGroup.module.css */
2161
- @layer boostdev.bds271FieldGroup-component {
2162
- .bds271FieldGroup-fieldGroup {
2161
+ @layer boostdev.bds280FieldGroup-component {
2162
+ .bds280FieldGroup-fieldGroup {
2163
2163
  border: 0;
2164
2164
  margin: 0;
2165
2165
  padding: 0;
@@ -2168,7 +2168,7 @@
2168
2168
  container-name: field-group;
2169
2169
  --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)) );
2170
2170
  }
2171
- .bds271FieldGroup-legend {
2171
+ .bds280FieldGroup-legend {
2172
2172
  inline-size: 100%;
2173
2173
  padding-inline: 0;
2174
2174
  padding-block: var(--fieldGroup_legend-padding-block, var(--bds-space_xs));
@@ -2180,42 +2180,42 @@
2180
2180
  font-weight: var(--fieldGroup_legend-font-weight, var(--bds-font_weight--semibold));
2181
2181
  line-height: var(--fieldGroup_legend-line-height, var(--bds-font_line-height--heading));
2182
2182
  }
2183
- .bds271FieldGroup-fields {
2183
+ .bds280FieldGroup-fields {
2184
2184
  display: flex;
2185
2185
  flex-direction: column;
2186
2186
  gap: var(--fieldGroup_gap, var(--bds-space_m));
2187
2187
  }
2188
- .bds271FieldGroup-fieldGroup.bds271FieldGroup---variant_horizontal .bds271FieldGroup-fields {
2188
+ .bds280FieldGroup-fieldGroup.bds280FieldGroup---variant_horizontal .bds280FieldGroup-fields {
2189
2189
  flex-flow: row wrap;
2190
2190
  }
2191
- .bds271FieldGroup-fieldGroup.bds271FieldGroup---variant_horizontal .bds271FieldGroup-fields > * {
2191
+ .bds280FieldGroup-fieldGroup.bds280FieldGroup---variant_horizontal .bds280FieldGroup-fields > * {
2192
2192
  flex: 1 1 var(--fieldGroup_min-field-width, 12rem);
2193
2193
  min-inline-size: 0;
2194
2194
  }
2195
2195
  @container field-group (max-inline-size: var(--fieldGroup_collapse-threshold)) {
2196
- .bds271FieldGroup-fieldGroup.bds271FieldGroup---variant_horizontal .bds271FieldGroup-fields {
2196
+ .bds280FieldGroup-fieldGroup.bds280FieldGroup---variant_horizontal .bds280FieldGroup-fields {
2197
2197
  flex-direction: column;
2198
2198
  }
2199
- .bds271FieldGroup-fieldGroup.bds271FieldGroup---variant_horizontal .bds271FieldGroup-fields > * {
2199
+ .bds280FieldGroup-fieldGroup.bds280FieldGroup---variant_horizontal .bds280FieldGroup-fields > * {
2200
2200
  flex: 1 1 auto;
2201
2201
  }
2202
2202
  }
2203
2203
  }
2204
2204
 
2205
2205
  /* src/components/interaction/form/FileInput/FileInput.module.css */
2206
- @layer boostdev.bds271FileInput-component {
2207
- .bds271FileInput-formGroup {
2206
+ @layer boostdev.bds280FileInput-component {
2207
+ .bds280FileInput-formGroup {
2208
2208
  display: flex;
2209
2209
  flex-direction: column;
2210
2210
  }
2211
- .bds271FileInput-fieldLabel {
2211
+ .bds280FileInput-fieldLabel {
2212
2212
  display: flex;
2213
2213
  align-items: center;
2214
2214
  font-family: var(--bds-font_family--body);
2215
2215
  color: var(--bds-color_on-bg);
2216
2216
  margin-block-end: var(--bds-space_xs);
2217
2217
  }
2218
- .bds271FileInput-dropZone {
2218
+ .bds280FileInput-dropZone {
2219
2219
  display: flex;
2220
2220
  flex-direction: column;
2221
2221
  align-items: center;
@@ -2229,40 +2229,40 @@
2229
2229
  text-align: center;
2230
2230
  transition: var(--bds-animation_transition);
2231
2231
  }
2232
- .bds271FileInput-dropZone:focus-within {
2232
+ .bds280FileInput-dropZone:focus-within {
2233
2233
  outline: var(--bds-outline_default);
2234
2234
  outline-offset: var(--bds-outline_offset);
2235
2235
  border-color: var(--fileInput_border-color, currentcolor);
2236
2236
  }
2237
- .bds271FileInput-isDragging {
2237
+ .bds280FileInput-isDragging {
2238
2238
  border-color: currentcolor;
2239
2239
  background-color: rgb(from currentcolor r g b / 8%);
2240
2240
  }
2241
- .bds271FileInput-hasError {
2241
+ .bds280FileInput-hasError {
2242
2242
  border-color: var(--bds-color_error);
2243
2243
  }
2244
- .bds271FileInput-isDisabled {
2244
+ .bds280FileInput-isDisabled {
2245
2245
  opacity: 0.5;
2246
2246
  cursor: not-allowed;
2247
2247
  }
2248
- .bds271FileInput-icon {
2248
+ .bds280FileInput-icon {
2249
2249
  inline-size: 2rem;
2250
2250
  block-size: 2rem;
2251
2251
  flex-shrink: 0;
2252
2252
  }
2253
- .bds271FileInput-prompt {
2253
+ .bds280FileInput-prompt {
2254
2254
  font-size: var(--bds-font_size--body);
2255
2255
  color: var(--bds-color_on-bg);
2256
2256
  }
2257
- .bds271FileInput-prompt strong {
2257
+ .bds280FileInput-prompt strong {
2258
2258
  color: var(--bds-color_interactive_on-bg);
2259
2259
  font-weight: var(--bds-font_weight--semibold);
2260
2260
  }
2261
- .bds271FileInput-acceptHint {
2261
+ .bds280FileInput-acceptHint {
2262
2262
  font-size: var(--bds-font_size--body--s);
2263
2263
  color: var(--bds-color_on-bg);
2264
2264
  }
2265
- .bds271FileInput-hiddenInput {
2265
+ .bds280FileInput-hiddenInput {
2266
2266
  position: absolute;
2267
2267
  inline-size: 1px;
2268
2268
  block-size: 1px;
@@ -2272,7 +2272,7 @@
2272
2272
  border: 0;
2273
2273
  }
2274
2274
  @media (hover: hover) and (pointer: fine) {
2275
- .bds271FileInput-dropZone:not(.bds271FileInput-isDisabled):hover {
2275
+ .bds280FileInput-dropZone:not(.bds280FileInput-isDisabled):hover {
2276
2276
  border-color: var(--fileInput_border-color--hover, var(--bds-color_interactive));
2277
2277
  background-color: var(--fileInput_bg--hover, rgb(from var(--bds-color_interactive) r g b / 4%));
2278
2278
  }
@@ -2280,13 +2280,13 @@
2280
2280
  }
2281
2281
 
2282
2282
  /* src/components/interaction/form/FormInput/FormInput.module.css */
2283
- @layer boostdev.bds271FormInput-component {
2284
- .bds271FormInput-formGroup {
2283
+ @layer boostdev.bds280FormInput-component {
2284
+ .bds280FormInput-formGroup {
2285
2285
  --labelPosition: 0;
2286
2286
  display: flex;
2287
2287
  flex-direction: column;
2288
2288
  }
2289
- .bds271FormInput-input {
2289
+ .bds280FormInput-input {
2290
2290
  font-family: var(--bds-font_family--body);
2291
2291
  font-size: var(--bds-font_size--body);
2292
2292
  padding: var(--bds-space_s);
@@ -2299,25 +2299,25 @@
2299
2299
  background-color: var(--input_color_bg, var(--bds-color_bg));
2300
2300
  transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing), background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
2301
2301
  }
2302
- .bds271FormInput-input:focus {
2302
+ .bds280FormInput-input:focus {
2303
2303
  --bdc_color: var(--bdc_color--focus);
2304
2304
  }
2305
- .bds271FormInput-input:focus-visible {
2305
+ .bds280FormInput-input:focus-visible {
2306
2306
  outline: var(--bds-outline_default);
2307
2307
  outline-offset: var(--bds-outline_offset);
2308
2308
  }
2309
- .bds271FormInput-inputError {
2309
+ .bds280FormInput-inputError {
2310
2310
  --bdc_color: var(--bdc_color--error);
2311
2311
  }
2312
2312
  }
2313
2313
 
2314
2314
  /* src/components/interaction/form/NumberInput/NumberInput.module.css */
2315
- @layer boostdev.bds271NumberInput-component {
2316
- .bds271NumberInput-formGroup {
2315
+ @layer boostdev.bds280NumberInput-component {
2316
+ .bds280NumberInput-formGroup {
2317
2317
  display: flex;
2318
2318
  flex-direction: column;
2319
2319
  }
2320
- .bds271NumberInput-inputRow {
2320
+ .bds280NumberInput-inputRow {
2321
2321
  display: flex;
2322
2322
  align-items: stretch;
2323
2323
  border: var(--numberInput_border, none);
@@ -2329,14 +2329,14 @@
2329
2329
  overflow: hidden;
2330
2330
  transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing);
2331
2331
  }
2332
- .bds271NumberInput-inputRow:focus-within {
2332
+ .bds280NumberInput-inputRow:focus-within {
2333
2333
  --bdc_color: var(--bdc_color--focus);
2334
2334
  }
2335
- .bds271NumberInput-inputRow:focus-within:has(:focus-visible) {
2335
+ .bds280NumberInput-inputRow:focus-within:has(:focus-visible) {
2336
2336
  outline: var(--bds-outline_default);
2337
2337
  outline-offset: var(--bds-outline_offset);
2338
2338
  }
2339
- .bds271NumberInput-input {
2339
+ .bds280NumberInput-input {
2340
2340
  flex: 1;
2341
2341
  border: none;
2342
2342
  outline: none;
@@ -2349,14 +2349,14 @@
2349
2349
  min-inline-size: 0;
2350
2350
  appearance: textfield;
2351
2351
  }
2352
- .bds271NumberInput-input::-webkit-inner-spin-button,
2353
- .bds271NumberInput-input::-webkit-outer-spin-button {
2352
+ .bds280NumberInput-input::-webkit-inner-spin-button,
2353
+ .bds280NumberInput-input::-webkit-outer-spin-button {
2354
2354
  appearance: none;
2355
2355
  }
2356
- .bds271NumberInput-inputError {
2356
+ .bds280NumberInput-inputError {
2357
2357
  --bdc_color: var(--bdc_color--error);
2358
2358
  }
2359
- .bds271NumberInput-stepper {
2359
+ .bds280NumberInput-stepper {
2360
2360
  all: unset;
2361
2361
  display: flex;
2362
2362
  align-items: center;
@@ -2369,25 +2369,25 @@
2369
2369
  transition: var(--bds-animation_transition);
2370
2370
  flex-shrink: 0;
2371
2371
  }
2372
- .bds271NumberInput-stepper svg {
2372
+ .bds280NumberInput-stepper svg {
2373
2373
  width: 1rem;
2374
2374
  height: 1rem;
2375
2375
  color: var(--numberInput_stepper-color, var(--bds-color_interactive));
2376
2376
  }
2377
- .bds271NumberInput-stepper:first-child {
2377
+ .bds280NumberInput-stepper:first-child {
2378
2378
  border-start-start-radius: var(--_radius);
2379
2379
  border-end-start-radius: var(--_radius);
2380
2380
  }
2381
- .bds271NumberInput-stepper:last-child {
2381
+ .bds280NumberInput-stepper:last-child {
2382
2382
  border-start-end-radius: var(--_radius);
2383
2383
  border-end-end-radius: var(--_radius);
2384
2384
  }
2385
- .bds271NumberInput-stepper:disabled {
2385
+ .bds280NumberInput-stepper:disabled {
2386
2386
  opacity: 0.4;
2387
2387
  cursor: not-allowed;
2388
2388
  }
2389
2389
  @media (hover: hover) and (pointer: fine) {
2390
- .bds271NumberInput-stepper:not(:disabled):hover {
2390
+ .bds280NumberInput-stepper:not(:disabled):hover {
2391
2391
  background-color: var(--numberInput_stepper-bg--hover, var(--bds-color_bg--subtle));
2392
2392
  opacity: var(--numberInput_stepper-opacity--hover, 0.7);
2393
2393
  }
@@ -2395,30 +2395,30 @@
2395
2395
  }
2396
2396
 
2397
2397
  /* src/components/interaction/form/Radio/Radio.module.css */
2398
- @layer boostdev.bds271Radio-component {
2399
- .bds271Radio-radioGroup {
2398
+ @layer boostdev.bds280Radio-component {
2399
+ .bds280Radio-radioGroup {
2400
2400
  --inputSize: calc(var(--bds-space_s) * 2);
2401
2401
  --labelPosition: calc(var(--inputSize) + var(--bds-space_m));
2402
2402
  display: flex;
2403
2403
  flex-direction: column;
2404
2404
  }
2405
- .bds271Radio-inputWrapper {
2405
+ .bds280Radio-inputWrapper {
2406
2406
  display: flex;
2407
2407
  align-items: flex-start;
2408
2408
  gap: var(--bds-space_xs);
2409
2409
  }
2410
- .bds271Radio-textWrapper {
2410
+ .bds280Radio-textWrapper {
2411
2411
  display: flex;
2412
2412
  flex-direction: column;
2413
2413
  gap: var(--bds-space_xxxs);
2414
2414
  padding-block-start: var(--bds-space_xxxs);
2415
2415
  }
2416
- .bds271Radio-description {
2416
+ .bds280Radio-description {
2417
2417
  font-size: var(--bds-font_size--body--s);
2418
2418
  color: var(--radio_description-color, var(--bds-color_on-bg--subtle));
2419
2419
  line-height: var(--bds-font_line-height--body);
2420
2420
  }
2421
- .bds271Radio-radio {
2421
+ .bds280Radio-radio {
2422
2422
  flex-shrink: 0;
2423
2423
  margin-block-start: 0.2em;
2424
2424
  inline-size: var(--inputSize);
@@ -2435,7 +2435,7 @@
2435
2435
  position: relative;
2436
2436
  transition: --bdc_color 0.2s ease, background-color 0.2s ease;
2437
2437
  }
2438
- .bds271Radio-radio:checked {
2438
+ .bds280Radio-radio:checked {
2439
2439
  background:
2440
2440
  radial-gradient(
2441
2441
  circle,
@@ -2443,21 +2443,21 @@
2443
2443
  var(--radio_color_bg, var(--bds-color_bg)) 42%);
2444
2444
  --bdc_color: var(--radio_color-active, var(--bdc-color_active));
2445
2445
  }
2446
- .bds271Radio-radio:focus {
2446
+ .bds280Radio-radio:focus {
2447
2447
  --bdc_color: var(--bdc_color--focus);
2448
2448
  }
2449
- .bds271Radio-radio:focus-visible {
2449
+ .bds280Radio-radio:focus-visible {
2450
2450
  outline: var(--bds-outline_default);
2451
2451
  outline-offset: var(--bds-outline_offset);
2452
2452
  }
2453
- .bds271Radio-radioError {
2453
+ .bds280Radio-radioError {
2454
2454
  --bdc_color: var(--bdc_color--error);
2455
2455
  }
2456
2456
  }
2457
2457
 
2458
2458
  /* src/components/interaction/form/RadioGroup/RadioGroup.module.css */
2459
- @layer boostdev.bds271RadioGroup-component {
2460
- .bds271RadioGroup-group {
2459
+ @layer boostdev.bds280RadioGroup-component {
2460
+ .bds280RadioGroup-group {
2461
2461
  border: none;
2462
2462
  padding: 0;
2463
2463
  margin: 0;
@@ -2465,7 +2465,7 @@
2465
2465
  flex-direction: column;
2466
2466
  gap: var(--bds-space_xs);
2467
2467
  }
2468
- .bds271RadioGroup-legend {
2468
+ .bds280RadioGroup-legend {
2469
2469
  font-family: var(--bds-font_family--body);
2470
2470
  font-size: var(--bds-font_size--body--s);
2471
2471
  font-weight: var(--bds-font_weight--medium);
@@ -2473,10 +2473,10 @@
2473
2473
  padding: 0;
2474
2474
  margin-block-end: var(--bds-space_xs);
2475
2475
  }
2476
- .bds271RadioGroup-required {
2476
+ .bds280RadioGroup-required {
2477
2477
  color: var(--bds-color_error);
2478
2478
  }
2479
- .bds271RadioGroup-items {
2479
+ .bds280RadioGroup-items {
2480
2480
  display: flex;
2481
2481
  flex-direction: column;
2482
2482
  gap: var(--bds-space_xs);
@@ -2484,8 +2484,8 @@
2484
2484
  }
2485
2485
 
2486
2486
  /* src/components/interaction/form/SegmentedControl/SegmentedControl.module.css */
2487
- @layer boostdev.bds271SegmentedControl-component {
2488
- .bds271SegmentedControl-control {
2487
+ @layer boostdev.bds280SegmentedControl-component {
2488
+ .bds280SegmentedControl-control {
2489
2489
  position: relative;
2490
2490
  display: inline-grid;
2491
2491
  grid-auto-flow: column;
@@ -2495,7 +2495,7 @@
2495
2495
  border-radius: var(--control_radius, var(--bds-border_radius--full));
2496
2496
  gap: 0;
2497
2497
  }
2498
- .bds271SegmentedControl-thumb {
2498
+ .bds280SegmentedControl-thumb {
2499
2499
  position: absolute;
2500
2500
  inset-block: var(--bds-space_xxxs);
2501
2501
  inset-inline-start: var(--bds-space_xxxs);
@@ -2507,7 +2507,7 @@
2507
2507
  transform: translateX(calc(var(--control_selected-index, 0) * 100%));
2508
2508
  transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
2509
2509
  }
2510
- .bds271SegmentedControl-indicator {
2510
+ .bds280SegmentedControl-indicator {
2511
2511
  position: absolute;
2512
2512
  inset-block: var(--bds-space_xxxs);
2513
2513
  inset-inline-start: var(--bds-space_xxxs);
@@ -2519,7 +2519,7 @@
2519
2519
  transform: translateX(calc(var(--control_selected-index, 0) * 100%));
2520
2520
  transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
2521
2521
  }
2522
- .bds271SegmentedControl-item {
2522
+ .bds280SegmentedControl-item {
2523
2523
  position: relative;
2524
2524
  z-index: 1;
2525
2525
  display: flex;
@@ -2540,69 +2540,69 @@
2540
2540
  border: none;
2541
2541
  outline: none;
2542
2542
  }
2543
- .bds271SegmentedControl-item:focus-visible {
2543
+ .bds280SegmentedControl-item:focus-visible {
2544
2544
  outline: var(--bds-outline_default);
2545
2545
  outline-offset: calc(var(--bds-outline_offset) * -1);
2546
2546
  border-radius: var(--control_thumb-radius, var(--bds-border_radius--full));
2547
2547
  }
2548
- .bds271SegmentedControl-item.bds271SegmentedControl---active {
2548
+ .bds280SegmentedControl-item.bds280SegmentedControl---active {
2549
2549
  color: var(--control_label-color--active, var(--bds-color_on-interactive));
2550
2550
  }
2551
- .bds271SegmentedControl-item.bds271SegmentedControl---disabled {
2551
+ .bds280SegmentedControl-item.bds280SegmentedControl---disabled {
2552
2552
  opacity: 0.5;
2553
2553
  cursor: not-allowed;
2554
2554
  pointer-events: none;
2555
2555
  }
2556
- .bds271SegmentedControl-control.bds271SegmentedControl---size_small .bds271SegmentedControl-item {
2556
+ .bds280SegmentedControl-control.bds280SegmentedControl---size_small .bds280SegmentedControl-item {
2557
2557
  padding: var(--bds-space_xxs) var(--bds-space_s);
2558
2558
  font-size: var(--bds-font_size--body--s);
2559
2559
  }
2560
- .bds271SegmentedControl-control.bds271SegmentedControl---size_large .bds271SegmentedControl-item {
2560
+ .bds280SegmentedControl-control.bds280SegmentedControl---size_large .bds280SegmentedControl-item {
2561
2561
  padding: var(--bds-space_s) var(--bds-space_m);
2562
2562
  white-space: normal;
2563
2563
  text-align: center;
2564
2564
  }
2565
- .bds271SegmentedControl-control.bds271SegmentedControl---variant_outline {
2565
+ .bds280SegmentedControl-control.bds280SegmentedControl---variant_outline {
2566
2566
  --control_label-color--active: var(--bds-color_interactive);
2567
2567
  }
2568
- .bds271SegmentedControl-control.bds271SegmentedControl---variant_outline .bds271SegmentedControl-thumb {
2568
+ .bds280SegmentedControl-control.bds280SegmentedControl---variant_outline .bds280SegmentedControl-thumb {
2569
2569
  display: none;
2570
2570
  }
2571
- .bds271SegmentedControl-control.bds271SegmentedControl---variant_outline .bds271SegmentedControl-item {
2571
+ .bds280SegmentedControl-control.bds280SegmentedControl---variant_outline .bds280SegmentedControl-item {
2572
2572
  background-color: var(--control_item-bg, transparent);
2573
2573
  }
2574
- .bds271SegmentedControl-control.bds271SegmentedControl---variant_outline .bds271SegmentedControl-item.bds271SegmentedControl---active {
2574
+ .bds280SegmentedControl-control.bds280SegmentedControl---variant_outline .bds280SegmentedControl-item.bds280SegmentedControl---active {
2575
2575
  background-color: var(--control_item-bg--active, var(--bds-color_bg));
2576
2576
  }
2577
- .bds271SegmentedControl-control.bds271SegmentedControl---variant_outline .bds271SegmentedControl-indicator {
2577
+ .bds280SegmentedControl-control.bds280SegmentedControl---variant_outline .bds280SegmentedControl-indicator {
2578
2578
  display: block;
2579
2579
  box-shadow: inset 0 0 0 2px var(--control_indicator-color, var(--bds-color_interactive));
2580
2580
  }
2581
2581
  @media (hover: hover) and (pointer: fine) {
2582
- .bds271SegmentedControl-item:not(.bds271SegmentedControl---active, .bds271SegmentedControl---disabled):hover {
2582
+ .bds280SegmentedControl-item:not(.bds280SegmentedControl---active, .bds280SegmentedControl---disabled):hover {
2583
2583
  color: var(--control_label-color--hover, var(--bds-color_on-bg));
2584
2584
  }
2585
2585
  }
2586
2586
  @media (prefers-reduced-motion: reduce) {
2587
- .bds271SegmentedControl-thumb,
2588
- .bds271SegmentedControl-indicator {
2587
+ .bds280SegmentedControl-thumb,
2588
+ .bds280SegmentedControl-indicator {
2589
2589
  transition: none;
2590
2590
  }
2591
2591
  }
2592
2592
  }
2593
2593
 
2594
2594
  /* src/components/interaction/form/Select/Select.module.css */
2595
- @layer boostdev.bds271Select-component {
2596
- .bds271Select-formGroup {
2595
+ @layer boostdev.bds280Select-component {
2596
+ .bds280Select-formGroup {
2597
2597
  display: flex;
2598
2598
  flex-direction: column;
2599
2599
  }
2600
- .bds271Select-selectWrapper {
2600
+ .bds280Select-selectWrapper {
2601
2601
  position: relative;
2602
2602
  display: flex;
2603
2603
  align-items: center;
2604
2604
  }
2605
- .bds271Select-select {
2605
+ .bds280Select-select {
2606
2606
  appearance: none;
2607
2607
  inline-size: 100%;
2608
2608
  font-family: var(--bds-font_family--body);
@@ -2619,21 +2619,21 @@
2619
2619
  cursor: pointer;
2620
2620
  transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing), background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
2621
2621
  }
2622
- .bds271Select-select:focus {
2622
+ .bds280Select-select:focus {
2623
2623
  --bdc_color: var(--bdc_color--focus);
2624
2624
  }
2625
- .bds271Select-select:focus-visible {
2625
+ .bds280Select-select:focus-visible {
2626
2626
  outline: var(--bds-outline_default);
2627
2627
  outline-offset: var(--bds-outline_offset);
2628
2628
  }
2629
- .bds271Select-select:disabled {
2629
+ .bds280Select-select:disabled {
2630
2630
  opacity: 0.5;
2631
2631
  cursor: not-allowed;
2632
2632
  }
2633
- .bds271Select-selectError {
2633
+ .bds280Select-selectError {
2634
2634
  --bdc_color: var(--bdc_color--error);
2635
2635
  }
2636
- .bds271Select-chevron {
2636
+ .bds280Select-chevron {
2637
2637
  position: absolute;
2638
2638
  inset-inline-end: var(--bds-space_s);
2639
2639
  display: flex;
@@ -2641,30 +2641,30 @@
2641
2641
  pointer-events: none;
2642
2642
  color: var(--select_chevron-color, var(--bds-color_interactive));
2643
2643
  }
2644
- .bds271Select-chevron svg {
2644
+ .bds280Select-chevron svg {
2645
2645
  inline-size: 1rem;
2646
2646
  block-size: 1rem;
2647
2647
  }
2648
2648
  }
2649
2649
 
2650
2650
  /* src/components/interaction/form/Slider/Slider.module.css */
2651
- @layer boostdev.bds271Slider-component {
2652
- .bds271Slider-formGroup {
2651
+ @layer boostdev.bds280Slider-component {
2652
+ .bds280Slider-formGroup {
2653
2653
  display: flex;
2654
2654
  flex-direction: column;
2655
2655
  gap: var(--bds-space_xxs);
2656
2656
  }
2657
- .bds271Slider-labelRow {
2657
+ .bds280Slider-labelRow {
2658
2658
  display: flex;
2659
2659
  justify-content: space-between;
2660
2660
  align-items: baseline;
2661
2661
  }
2662
- .bds271Slider-value {
2662
+ .bds280Slider-value {
2663
2663
  font-size: var(--bds-font_size--body--s);
2664
2664
  font-variant-numeric: tabular-nums;
2665
2665
  color: var(--bds-color_on-bg--subtle);
2666
2666
  }
2667
- .bds271Slider-slider {
2667
+ .bds280Slider-slider {
2668
2668
  --slider_fill: 0%;
2669
2669
  --slider_track-height: var(--bds-space_xxs);
2670
2670
  --slider_thumb-size: calc(var(--bds-space_s) * 2);
@@ -2683,16 +2683,16 @@
2683
2683
  cursor: pointer;
2684
2684
  transition: var(--bds-animation_transition);
2685
2685
  }
2686
- .bds271Slider-slider:focus-visible {
2686
+ .bds280Slider-slider:focus-visible {
2687
2687
  outline: var(--bds-outline_default);
2688
2688
  outline-offset: var(--bds-outline_offset);
2689
2689
  border-radius: var(--slider_track-radius, var(--bds-border_radius--full));
2690
2690
  }
2691
- .bds271Slider-slider:disabled {
2691
+ .bds280Slider-slider:disabled {
2692
2692
  opacity: 0.4;
2693
2693
  cursor: not-allowed;
2694
2694
  }
2695
- .bds271Slider-slider::-webkit-slider-thumb {
2695
+ .bds280Slider-slider::-webkit-slider-thumb {
2696
2696
  appearance: none;
2697
2697
  inline-size: var(--slider_thumb-size);
2698
2698
  block-size: var(--slider_thumb-size);
@@ -2702,7 +2702,7 @@
2702
2702
  transition: var(--bds-animation_transition);
2703
2703
  cursor: pointer;
2704
2704
  }
2705
- .bds271Slider-slider::-moz-range-thumb {
2705
+ .bds280Slider-slider::-moz-range-thumb {
2706
2706
  inline-size: var(--slider_thumb-size);
2707
2707
  block-size: var(--slider_thumb-size);
2708
2708
  border: none;
@@ -2711,7 +2711,7 @@
2711
2711
  box-shadow: var(--bds-shadow_s);
2712
2712
  cursor: pointer;
2713
2713
  }
2714
- .bds271Slider-sliderError {
2714
+ .bds280Slider-sliderError {
2715
2715
  background:
2716
2716
  linear-gradient(
2717
2717
  to right,
@@ -2720,24 +2720,24 @@
2720
2720
  var(--slider_track-bg, var(--bds-color_bg--subtle)) var(--slider_fill),
2721
2721
  var(--slider_track-bg, var(--bds-color_bg--subtle)) 100%);
2722
2722
  }
2723
- .bds271Slider-sliderError::-webkit-slider-thumb {
2723
+ .bds280Slider-sliderError::-webkit-slider-thumb {
2724
2724
  background-color: var(--slider_color--error, var(--bds-color_error));
2725
2725
  }
2726
- .bds271Slider-sliderError::-moz-range-thumb {
2726
+ .bds280Slider-sliderError::-moz-range-thumb {
2727
2727
  background-color: var(--slider_color--error, var(--bds-color_error));
2728
2728
  }
2729
2729
  @media (prefers-reduced-motion: reduce) {
2730
- .bds271Slider-slider,
2731
- .bds271Slider-slider::-webkit-slider-thumb,
2732
- .bds271Slider-slider::-moz-range-thumb {
2730
+ .bds280Slider-slider,
2731
+ .bds280Slider-slider::-webkit-slider-thumb,
2732
+ .bds280Slider-slider::-moz-range-thumb {
2733
2733
  transition: none;
2734
2734
  }
2735
2735
  }
2736
2736
  }
2737
2737
 
2738
2738
  /* src/components/interaction/form/Switch/Switch.module.css */
2739
- @layer boostdev.bds271Switch-component {
2740
- .bds271Switch-switchGroup {
2739
+ @layer boostdev.bds280Switch-component {
2740
+ .bds280Switch-switchGroup {
2741
2741
  --switch_thumb-size: 1.25em;
2742
2742
  --switch_track-pad: var(--bds-space_xxxs);
2743
2743
  --switch_track-height: calc(var(--switch_thumb-size) + var(--switch_track-pad) * 2);
@@ -2746,21 +2746,21 @@
2746
2746
  display: flex;
2747
2747
  flex-direction: column;
2748
2748
  }
2749
- .bds271Switch-switchGroup.bds271Switch---size_small {
2749
+ .bds280Switch-switchGroup.bds280Switch---size_small {
2750
2750
  --switch_thumb-size: 1em;
2751
2751
  }
2752
- .bds271Switch-switchGroup.bds271Switch---size_medium {
2752
+ .bds280Switch-switchGroup.bds280Switch---size_medium {
2753
2753
  --switch_thumb-size: 1.25em;
2754
2754
  }
2755
- .bds271Switch-switchGroup.bds271Switch---size_large {
2755
+ .bds280Switch-switchGroup.bds280Switch---size_large {
2756
2756
  --switch_thumb-size: 1.5em;
2757
2757
  }
2758
- .bds271Switch-inputWrapper {
2758
+ .bds280Switch-inputWrapper {
2759
2759
  display: flex;
2760
2760
  align-items: center;
2761
2761
  gap: var(--bds-space_xs);
2762
2762
  }
2763
- .bds271Switch-trackWrapper {
2763
+ .bds280Switch-trackWrapper {
2764
2764
  position: relative;
2765
2765
  display: inline-flex;
2766
2766
  align-items: center;
@@ -2768,7 +2768,7 @@
2768
2768
  inline-size: var(--switch_track-width);
2769
2769
  block-size: var(--switch_track-height);
2770
2770
  }
2771
- .bds271Switch-switch {
2771
+ .bds280Switch-switch {
2772
2772
  position: absolute;
2773
2773
  inset: 0;
2774
2774
  appearance: none;
@@ -2779,10 +2779,10 @@
2779
2779
  cursor: pointer;
2780
2780
  z-index: 1;
2781
2781
  }
2782
- .bds271Switch-switch:disabled {
2782
+ .bds280Switch-switch:disabled {
2783
2783
  cursor: not-allowed;
2784
2784
  }
2785
- .bds271Switch-track {
2785
+ .bds280Switch-track {
2786
2786
  display: inline-flex;
2787
2787
  align-items: center;
2788
2788
  inline-size: var(--switch_track-width);
@@ -2798,7 +2798,7 @@
2798
2798
  transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
2799
2799
  --bdc_color: var(--switch_thumb-bg, var(--bds-color_interactive));
2800
2800
  }
2801
- .bds271Switch-thumb {
2801
+ .bds280Switch-thumb {
2802
2802
  display: block;
2803
2803
  inline-size: var(--switch_thumb-size);
2804
2804
  block-size: var(--switch_thumb-size);
@@ -2808,40 +2808,40 @@
2808
2808
  transition: var(--bds-animation_transition);
2809
2809
  transform: translateX(0);
2810
2810
  }
2811
- .bds271Switch-switch.bds271Switch-switchError + .bds271Switch-track {
2811
+ .bds280Switch-switch.bds280Switch-switchError + .bds280Switch-track {
2812
2812
  --bdc_color: var(--switch_border-color--error, var(--bds-color_error));
2813
2813
  }
2814
- .bds271Switch-switch:checked + .bds271Switch-track {
2814
+ .bds280Switch-switch:checked + .bds280Switch-track {
2815
2815
  background-color: var(--switch_track-bg--active, var(--bdc-color_active--subtle));
2816
2816
  --bdc_color: var(--switch_thumb-bg--active, var(--bds-color_interactive));
2817
2817
  }
2818
- .bds271Switch-switch:checked + .bds271Switch-track .bds271Switch-thumb {
2818
+ .bds280Switch-switch:checked + .bds280Switch-track .bds280Switch-thumb {
2819
2819
  background-color: var(--switch_thumb-bg--active, var(--bds-color_interactive));
2820
2820
  transform: translateX(var(--switch_thumb-size));
2821
2821
  }
2822
- .bds271Switch-switch:focus-visible + .bds271Switch-track {
2822
+ .bds280Switch-switch:focus-visible + .bds280Switch-track {
2823
2823
  outline: var(--bds-outline_default);
2824
2824
  outline-offset: var(--bds-outline_offset);
2825
2825
  border-radius: var(--switch_track-radius, var(--bds-border_radius--full));
2826
2826
  }
2827
- .bds271Switch-switch:disabled + .bds271Switch-track {
2827
+ .bds280Switch-switch:disabled + .bds280Switch-track {
2828
2828
  opacity: 0.4;
2829
2829
  }
2830
2830
  @media (prefers-reduced-motion: reduce) {
2831
- .bds271Switch-track,
2832
- .bds271Switch-thumb {
2831
+ .bds280Switch-track,
2832
+ .bds280Switch-thumb {
2833
2833
  transition: none;
2834
2834
  }
2835
2835
  }
2836
2836
  }
2837
2837
 
2838
2838
  /* src/components/interaction/form/Textarea/Textarea.module.css */
2839
- @layer boostdev.bds271Textarea-component {
2840
- .bds271Textarea-formGroup {
2839
+ @layer boostdev.bds280Textarea-component {
2840
+ .bds280Textarea-formGroup {
2841
2841
  display: flex;
2842
2842
  flex-direction: column;
2843
2843
  }
2844
- .bds271Textarea-textarea {
2844
+ .bds280Textarea-textarea {
2845
2845
  font-family: var(--bds-font_family--body);
2846
2846
  font-size: var(--bds-font_size--body);
2847
2847
  line-height: var(--bds-font_line-height--body);
@@ -2857,69 +2857,69 @@
2857
2857
  min-block-size: calc(var(--bds-space_m) * 5);
2858
2858
  transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing), background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
2859
2859
  }
2860
- .bds271Textarea-textarea:focus {
2860
+ .bds280Textarea-textarea:focus {
2861
2861
  --bdc_color: var(--bdc_color--focus);
2862
2862
  }
2863
- .bds271Textarea-textarea:focus-visible {
2863
+ .bds280Textarea-textarea:focus-visible {
2864
2864
  outline: var(--bds-outline_default);
2865
2865
  outline-offset: var(--bds-outline_offset);
2866
2866
  }
2867
- .bds271Textarea-textarea:disabled {
2867
+ .bds280Textarea-textarea:disabled {
2868
2868
  opacity: 0.5;
2869
2869
  cursor: not-allowed;
2870
2870
  resize: none;
2871
2871
  }
2872
- .bds271Textarea-textareaError {
2872
+ .bds280Textarea-textareaError {
2873
2873
  --bdc_color: var(--bdc_color--error);
2874
2874
  }
2875
2875
  }
2876
2876
 
2877
2877
  /* src/components/layout/ButtonGroup/ButtonGroup.module.css */
2878
- @layer boostdev.bds271ButtonGroup-component {
2879
- .bds271ButtonGroup-buttonGroup {
2878
+ @layer boostdev.bds280ButtonGroup-component {
2879
+ .bds280ButtonGroup-buttonGroup {
2880
2880
  container-type: inline-size;
2881
2881
  container-name: button-group;
2882
2882
  grid-column: var(--bds-grid_span-100);
2883
2883
  inline-size: 100%;
2884
2884
  }
2885
- .bds271ButtonGroup-buttonGroup .bds271ButtonGroup-container {
2885
+ .bds280ButtonGroup-buttonGroup .bds280ButtonGroup-container {
2886
2886
  position: relative;
2887
2887
  display: flex;
2888
2888
  flex-direction: column-reverse;
2889
2889
  gap: var(--bds-space_l);
2890
2890
  align-items: center;
2891
2891
  }
2892
- .bds271ButtonGroup-buttonGroup.bds271ButtonGroup---variant_card .bds271ButtonGroup-container {
2892
+ .bds280ButtonGroup-buttonGroup.bds280ButtonGroup---variant_card .bds280ButtonGroup-container {
2893
2893
  align-items: stretch;
2894
2894
  }
2895
- .bds271ButtonGroup-buttonGroup.bds271ButtonGroup---variant_flow .bds271ButtonGroup-container,
2896
- .bds271ButtonGroup-buttonGroup.bds271ButtonGroup---variant_modal .bds271ButtonGroup-container {
2895
+ .bds280ButtonGroup-buttonGroup.bds280ButtonGroup---variant_flow .bds280ButtonGroup-container,
2896
+ .bds280ButtonGroup-buttonGroup.bds280ButtonGroup---variant_modal .bds280ButtonGroup-container {
2897
2897
  align-items: center;
2898
2898
  }
2899
- .bds271ButtonGroup-buttonGroup.bds271ButtonGroup---variant_content .bds271ButtonGroup-container {
2899
+ .bds280ButtonGroup-buttonGroup.bds280ButtonGroup---variant_content .bds280ButtonGroup-container {
2900
2900
  align-items: flex-start;
2901
2901
  }
2902
2902
  @supports (contain: inline-size) {
2903
2903
  @container button-group (min-width: 30rem) {
2904
- .bds271ButtonGroup-buttonGroup .bds271ButtonGroup-container {
2904
+ .bds280ButtonGroup-buttonGroup .bds280ButtonGroup-container {
2905
2905
  flex-direction: row;
2906
2906
  justify-content: space-between;
2907
2907
  }
2908
- .bds271ButtonGroup-buttonGroup.bds271ButtonGroup---variant_modal .bds271ButtonGroup-container > :first-child:last-child,
2909
- .bds271ButtonGroup-buttonGroup.bds271ButtonGroup---variant_flow .bds271ButtonGroup-container > :first-child:last-child {
2908
+ .bds280ButtonGroup-buttonGroup.bds280ButtonGroup---variant_modal .bds280ButtonGroup-container > :first-child:last-child,
2909
+ .bds280ButtonGroup-buttonGroup.bds280ButtonGroup---variant_flow .bds280ButtonGroup-container > :first-child:last-child {
2910
2910
  margin-inline-start: auto;
2911
2911
  }
2912
- .bds271ButtonGroup-buttonGroup.bds271ButtonGroup---variant_card .bds271ButtonGroup-container {
2912
+ .bds280ButtonGroup-buttonGroup.bds280ButtonGroup---variant_card .bds280ButtonGroup-container {
2913
2913
  justify-content: center;
2914
2914
  }
2915
- .bds271ButtonGroup-buttonGroup.bds271ButtonGroup---variant_modal .bds271ButtonGroup-container {
2915
+ .bds280ButtonGroup-buttonGroup.bds280ButtonGroup---variant_modal .bds280ButtonGroup-container {
2916
2916
  justify-content: flex-end;
2917
2917
  }
2918
- .bds271ButtonGroup-buttonGroup.bds271ButtonGroup---variant_content .bds271ButtonGroup-container {
2918
+ .bds280ButtonGroup-buttonGroup.bds280ButtonGroup---variant_content .bds280ButtonGroup-container {
2919
2919
  justify-content: flex-start;
2920
2920
  align-items: center;
2921
2921
  }
2922
- .bds271ButtonGroup-buttonGroup.bds271ButtonGroup---variant_grid .bds271ButtonGroup-container {
2922
+ .bds280ButtonGroup-buttonGroup.bds280ButtonGroup---variant_grid .bds280ButtonGroup-container {
2923
2923
  justify-content: center;
2924
2924
  }
2925
2925
  }
@@ -2927,183 +2927,183 @@
2927
2927
  }
2928
2928
 
2929
2929
  /* src/components/layout/Card/Card.module.css */
2930
- @layer boostdev.bds271Card-component {
2931
- .bds271Card-card {
2930
+ @layer boostdev.bds280Card-component {
2931
+ .bds280Card-card {
2932
2932
  background-color: var(--card_color, var(--bds-color_bg));
2933
2933
  color: var(--card_on-color, var(--bds-color_on-bg));
2934
2934
  border-radius: var(--bds-border_radius--m);
2935
2935
  transition: all 0.3s ease;
2936
2936
  position: relative;
2937
2937
  }
2938
- .bds271Card-card.bds271Card---default {
2938
+ .bds280Card-card.bds280Card---default {
2939
2939
  box-shadow: var(--card_shadow--default, var(--bds-shadow_s));
2940
2940
  }
2941
- .bds271Card-card.bds271Card---elevated {
2941
+ .bds280Card-card.bds280Card---elevated {
2942
2942
  box-shadow: var(--card_shadow--elevated, var(--bds-shadow_m));
2943
2943
  }
2944
- .bds271Card-card.bds271Card---outlined {
2944
+ .bds280Card-card.bds280Card---outlined {
2945
2945
  border: var(--card_border, none);
2946
2946
  --bdc_color: currentcolor;
2947
2947
  box-shadow: var(--card_shadow--outlined, inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--bds-shadow_s));
2948
2948
  }
2949
- .bds271Card-card.bds271Card---clickable {
2949
+ .bds280Card-card.bds280Card---clickable {
2950
2950
  cursor: pointer;
2951
2951
  }
2952
- .bds271Card-card.bds271Card---padding-none {
2952
+ .bds280Card-card.bds280Card---padding-none {
2953
2953
  padding: var(--card_padding, 0);
2954
2954
  }
2955
- .bds271Card-card.bds271Card---padding-small {
2955
+ .bds280Card-card.bds280Card---padding-small {
2956
2956
  padding: var(--card_padding, var(--bds-space_s));
2957
2957
  }
2958
- .bds271Card-card.bds271Card---padding-medium {
2958
+ .bds280Card-card.bds280Card---padding-medium {
2959
2959
  padding: var(--card_padding, var(--bds-space_m));
2960
2960
  }
2961
- .bds271Card-card.bds271Card---padding-large {
2961
+ .bds280Card-card.bds280Card---padding-large {
2962
2962
  padding: var(--card_padding, var(--bds-space_l));
2963
2963
  }
2964
- .bds271Card-card.bds271Card---padding-extra-large {
2964
+ .bds280Card-card.bds280Card---padding-extra-large {
2965
2965
  padding: var(--card_padding, var(--bds-space_xl));
2966
2966
  }
2967
- .bds271Card-card.bds271Card---text-start {
2967
+ .bds280Card-card.bds280Card---text-start {
2968
2968
  text-align: start;
2969
2969
  }
2970
- .bds271Card-card.bds271Card---text-center {
2970
+ .bds280Card-card.bds280Card---text-center {
2971
2971
  text-align: center;
2972
2972
  }
2973
- .bds271Card-card.bds271Card---text-end {
2973
+ .bds280Card-card.bds280Card---text-end {
2974
2974
  text-align: end;
2975
2975
  }
2976
- .bds271Card-card.bds271Card---clickable:focus-visible {
2976
+ .bds280Card-card.bds280Card---clickable:focus-visible {
2977
2977
  outline: 2px solid var(--color_focus, currentcolor);
2978
2978
  outline-offset: 2px;
2979
2979
  }
2980
- .bds271Card-card.bds271Card---clickable:active {
2980
+ .bds280Card-card.bds280Card---clickable:active {
2981
2981
  transform: translateY(0);
2982
2982
  box-shadow: var(--bds-shadow_s);
2983
2983
  }
2984
2984
  @media (hover: hover) and (pointer: fine) {
2985
- .bds271Card-card.bds271Card---clickable:hover {
2985
+ .bds280Card-card.bds280Card---clickable:hover {
2986
2986
  transform: translateY(-2px);
2987
2987
  box-shadow: var(--card_shadow--clickable-hover, var(--bds-shadow_xl));
2988
2988
  }
2989
- .bds271Card-card.bds271Card---default:hover {
2989
+ .bds280Card-card.bds280Card---default:hover {
2990
2990
  box-shadow: var(--card_shadow--default-hover, var(--bds-shadow_m));
2991
2991
  }
2992
- .bds271Card-card.bds271Card---elevated:hover {
2992
+ .bds280Card-card.bds280Card---elevated:hover {
2993
2993
  box-shadow: var(--card_shadow--elevated-hover, var(--bds-shadow_2xl));
2994
2994
  }
2995
- .bds271Card-card.bds271Card---outlined:hover {
2995
+ .bds280Card-card.bds280Card---outlined:hover {
2996
2996
  box-shadow: var(--card_shadow--outlined-hover, var(--bds-shadow_s));
2997
2997
  }
2998
2998
  }
2999
2999
  }
3000
3000
 
3001
3001
  /* src/components/layout/Grid/Grid.module.css */
3002
- @layer boostdev.bds271Grid-component {
3003
- .bds271Grid-grid {
3002
+ @layer boostdev.bds280Grid-component {
3003
+ .bds280Grid-grid {
3004
3004
  display: grid;
3005
3005
  gap: var(--grid_gap, var(--bds-grid_gap));
3006
3006
  }
3007
- .bds271Grid-grid.bds271Grid---main {
3007
+ .bds280Grid-grid.bds280Grid---main {
3008
3008
  grid-template-columns: var(--bds-grid_template-columns);
3009
3009
  }
3010
- .bds271Grid-grid.bds271Grid---page {
3010
+ .bds280Grid-grid.bds280Grid---page {
3011
3011
  grid-template-columns: 1fr;
3012
3012
  grid-column: 1 / -1;
3013
3013
  }
3014
- .bds271Grid-grid.bds271Grid---funnel {
3014
+ .bds280Grid-grid.bds280Grid---funnel {
3015
3015
  grid-template-columns: var(--bds-grid_template-columns);
3016
3016
  max-inline-size: var(--bds-container_max-width--narrow);
3017
3017
  margin-inline: auto;
3018
3018
  }
3019
- .bds271Grid-grid.bds271Grid---custom {
3019
+ .bds280Grid-grid.bds280Grid---custom {
3020
3020
  grid-template-columns: repeat(var(--grid_columns, 4), minmax(0, 1fr));
3021
3021
  }
3022
- .bds271Grid-grid.bds271Grid---centered {
3022
+ .bds280Grid-grid.bds280Grid---centered {
3023
3023
  margin-inline: auto;
3024
3024
  max-inline-size: var(--bds-container_max-width);
3025
3025
  padding-inline: var(--bds-container_spacing-inline);
3026
3026
  }
3027
- .bds271Grid-item {
3027
+ .bds280Grid-item {
3028
3028
  min-inline-size: 0;
3029
3029
  }
3030
3030
  @supports (grid-template-rows: masonry) {
3031
- .bds271Grid-grid.bds271Grid---masonry {
3031
+ .bds280Grid-grid.bds280Grid---masonry {
3032
3032
  grid-template-rows: masonry;
3033
3033
  }
3034
3034
  }
3035
3035
  @supports (display: grid-lanes) {
3036
- .bds271Grid-grid.bds271Grid---masonry {
3036
+ .bds280Grid-grid.bds280Grid---masonry {
3037
3037
  display: grid-lanes;
3038
3038
  }
3039
3039
  }
3040
3040
  }
3041
3041
 
3042
3042
  /* src/components/layout/SectionHeader/SectionHeader.module.css */
3043
- @layer boostdev.bds271SectionHeader-component {
3044
- .bds271SectionHeader-sectionHeader {
3043
+ @layer boostdev.bds280SectionHeader-component {
3044
+ .bds280SectionHeader-sectionHeader {
3045
3045
  display: flex;
3046
3046
  flex-direction: column;
3047
3047
  gap: var(--bds-space_m);
3048
3048
  grid-column: var(--bds-grid_span-100);
3049
3049
  }
3050
- .bds271SectionHeader-title {
3050
+ .bds280SectionHeader-title {
3051
3051
  color: var(--sectionHeader-title-color, var(--bds-color_on-bg));
3052
3052
  margin: 0;
3053
3053
  font-family: var(--bds-font_family--body);
3054
3054
  }
3055
- .bds271SectionHeader-subtitle {
3055
+ .bds280SectionHeader-subtitle {
3056
3056
  color: var(--sectionHeader_subtitle-color, var(--bds-color_grey--strong));
3057
3057
  margin: 0;
3058
3058
  font-family: var(--bds-font_family--body);
3059
3059
  font-weight: var(--bds-font_weight--medium);
3060
3060
  }
3061
- .bds271SectionHeader-sectionHeader.bds271SectionHeader---start {
3061
+ .bds280SectionHeader-sectionHeader.bds280SectionHeader---start {
3062
3062
  align-items: flex-start;
3063
3063
  text-align: start;
3064
3064
  }
3065
- .bds271SectionHeader-sectionHeader.bds271SectionHeader---center {
3065
+ .bds280SectionHeader-sectionHeader.bds280SectionHeader---center {
3066
3066
  align-items: center;
3067
3067
  text-align: center;
3068
3068
  }
3069
- .bds271SectionHeader-sectionHeader.bds271SectionHeader---end {
3069
+ .bds280SectionHeader-sectionHeader.bds280SectionHeader---end {
3070
3070
  align-items: flex-end;
3071
3071
  text-align: end;
3072
3072
  }
3073
- .bds271SectionHeader-sectionHeader.bds271SectionHeader---medium .bds271SectionHeader-title {
3073
+ .bds280SectionHeader-sectionHeader.bds280SectionHeader---medium .bds280SectionHeader-title {
3074
3074
  font-size: var(--sectionHeader_title-size, var(--bds-font_size--display));
3075
3075
  line-height: var(--sectionHeader_title-line-height, var(--bds-font_line-height--display));
3076
3076
  font-weight: var(--sectionHeader_title-weight, var(--bds-font_weight--bold));
3077
3077
  }
3078
- .bds271SectionHeader-sectionHeader.bds271SectionHeader---medium .bds271SectionHeader-subtitle {
3078
+ .bds280SectionHeader-sectionHeader.bds280SectionHeader---medium .bds280SectionHeader-subtitle {
3079
3079
  font-size: var(--sectionHeader_subtitle-size, var(--bds-font_size--heading-3));
3080
3080
  line-height: 1.3;
3081
3081
  }
3082
- .bds271SectionHeader-sectionHeader.bds271SectionHeader---xs .bds271SectionHeader-title {
3082
+ .bds280SectionHeader-sectionHeader.bds280SectionHeader---xs .bds280SectionHeader-title {
3083
3083
  font-size: var(--sectionHeader_title-size, 1.5em);
3084
3084
  line-height: var(--sectionHeader_title-line-height, var(--bds-font_line-height--heading));
3085
3085
  font-weight: var(--sectionHeader_title-weight, var(--bds-font_weight--bold));
3086
3086
  }
3087
- .bds271SectionHeader-sectionHeader.bds271SectionHeader---xs .bds271SectionHeader-subtitle {
3087
+ .bds280SectionHeader-sectionHeader.bds280SectionHeader---xs .bds280SectionHeader-subtitle {
3088
3088
  font-size: var(--sectionHeader_subtitle-size, var(--bds-font_size--body));
3089
3089
  line-height: 1.4;
3090
3090
  }
3091
- .bds271SectionHeader-sectionHeader.bds271SectionHeader---small .bds271SectionHeader-title {
3091
+ .bds280SectionHeader-sectionHeader.bds280SectionHeader---small .bds280SectionHeader-title {
3092
3092
  font-size: var(--sectionHeader_title-size, var(--bds-font_size--heading-1));
3093
3093
  line-height: var(--sectionHeader_title-line-height, var(--bds-font_line-height--heading));
3094
3094
  font-weight: var(--sectionHeader_title-weight, var(--bds-font_weight--bold));
3095
3095
  }
3096
- .bds271SectionHeader-sectionHeader.bds271SectionHeader---small .bds271SectionHeader-subtitle {
3096
+ .bds280SectionHeader-sectionHeader.bds280SectionHeader---small .bds280SectionHeader-subtitle {
3097
3097
  font-size: var(--sectionHeader_subtitle-size, var(--bds-font_size--body));
3098
3098
  line-height: 1.4;
3099
3099
  }
3100
- .bds271SectionHeader-sectionHeader.bds271SectionHeader---large .bds271SectionHeader-title {
3100
+ .bds280SectionHeader-sectionHeader.bds280SectionHeader---large .bds280SectionHeader-title {
3101
3101
  font-size: var(--sectionHeader_title-size, var(--bds-font_size--display));
3102
3102
  line-height: var(--sectionHeader_title-line-height, var(--bds-font_line-height--display));
3103
3103
  font-weight: var(--sectionHeader_title-weight, var(--bds-font_weight--bold));
3104
3104
  letter-spacing: var(--bds-font_tracking--tight);
3105
3105
  }
3106
- .bds271SectionHeader-sectionHeader.bds271SectionHeader---large .bds271SectionHeader-subtitle {
3106
+ .bds280SectionHeader-sectionHeader.bds280SectionHeader---large .bds280SectionHeader-subtitle {
3107
3107
  font-size: var(--sectionHeader_subtitle-size, var(--bds-font_size--heading-2));
3108
3108
  line-height: 1.3;
3109
3109
  font-weight: var(--bds-font_weight--medium);
@@ -3111,8 +3111,8 @@
3111
3111
  }
3112
3112
 
3113
3113
  /* src/components/layout/IconWrapper/IconWrapper.module.css */
3114
- @layer boostdev.bds271IconWrapper-component {
3115
- .bds271IconWrapper-wrapper {
3114
+ @layer boostdev.bds280IconWrapper-component {
3115
+ .bds280IconWrapper-wrapper {
3116
3116
  inline-size: 2em;
3117
3117
  block-size: 2em;
3118
3118
  font-size: 3em;
@@ -3127,7 +3127,7 @@
3127
3127
  position: relative;
3128
3128
  transition: var(--bds-animation_transition);
3129
3129
  }
3130
- .bds271IconWrapper-wrapper svg {
3130
+ .bds280IconWrapper-wrapper svg {
3131
3131
  fill: currentcolor;
3132
3132
  }
3133
3133
  }