@boostdev/design-system-components 2.5.1 → 2.6.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 (39) hide show
  1. package/dist/client.cjs +51 -51
  2. package/dist/client.css +625 -626
  3. package/dist/client.js +51 -51
  4. package/dist/index.cjs +51 -51
  5. package/dist/index.css +625 -626
  6. package/dist/index.js +51 -51
  7. package/dist/web-components/{chunk-N3TN6WCH.js → chunk-GER5UJOF.js} +22 -15
  8. package/dist/web-components/chunk-QWPACK5L.js +72 -0
  9. package/dist/web-components/{chunk-YRXCVKHV.js → chunk-RTOS7LLG.js} +9 -7
  10. package/dist/web-components/{chunk-BX3IPVOB.js → chunk-ZNKEZIYE.js} +20 -16
  11. package/dist/web-components/index.js +4 -4
  12. package/dist/web-components/interaction/bds-button.js +1 -1
  13. package/dist/web-components/ui/bds-alert.js +1 -1
  14. package/dist/web-components/ui/bds-badge.js +1 -1
  15. package/dist/web-components/ui/bds-card.js +1 -1
  16. package/package.json +1 -1
  17. package/src/components/interaction/Button/Button.mdx +87 -13
  18. package/src/components/interaction/Button/Button.module.css +22 -17
  19. package/src/components/interaction/Toast/Toast.mdx +22 -3
  20. package/src/components/interaction/Toast/Toast.module.css +13 -10
  21. package/src/components/layout/Card/Card.mdx +20 -8
  22. package/src/components/layout/Card/Card.module.css +5 -3
  23. package/src/components/ui/Alert/Alert.mdx +39 -5
  24. package/src/components/ui/Alert/Alert.module.css +21 -15
  25. package/src/components/ui/Badge/Badge.mdx +23 -3
  26. package/src/components/ui/Badge/Badge.module.css +15 -12
  27. package/src/components/ui/Link/Link.mdx +20 -2
  28. package/src/components/ui/Link/Link.module.css +12 -8
  29. package/src/components/ui/NotificationBanner/NotificationBanner.mdx +25 -6
  30. package/src/components/ui/NotificationBanner/NotificationBanner.module.css +18 -15
  31. package/src/components/ui/Pagination/Pagination.mdx +22 -9
  32. package/src/components/ui/Pagination/Pagination.module.css +10 -8
  33. package/src/components/ui/Tabs/Tabs.mdx +20 -5
  34. package/src/components/ui/Tabs/Tabs.module.css +8 -5
  35. package/src/web-components/interaction/bds-button.ts +22 -15
  36. package/src/web-components/ui/bds-alert.ts +20 -16
  37. package/src/web-components/ui/bds-badge.ts +16 -13
  38. package/src/web-components/ui/bds-card.ts +9 -7
  39. package/dist/web-components/chunk-OHUTLSIQ.js +0 -69
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.bds251Accordion-component {
31
- .bds251Accordion-accordion {
30
+ @layer boostdev.bds260Accordion-component {
31
+ .bds260Accordion-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
- .bds251Accordion-item {
41
+ .bds260Accordion-item {
42
42
  border-block-end: 1px solid var(--bds-color_bg--subtle);
43
43
  }
44
- .bds251Accordion-item:last-child {
44
+ .bds260Accordion-item:last-child {
45
45
  border-block-end: none;
46
46
  }
47
- .bds251Accordion-heading {
47
+ .bds260Accordion-heading {
48
48
  margin: 0;
49
49
  }
50
- .bds251Accordion-trigger {
50
+ .bds260Accordion-trigger {
51
51
  all: unset;
52
52
  display: flex;
53
53
  align-items: center;
@@ -62,100 +62,100 @@
62
62
  transition: var(--bds-animation_transition);
63
63
  box-sizing: border-box;
64
64
  }
65
- .bds251Accordion-trigger:disabled {
65
+ .bds260Accordion-trigger:disabled {
66
66
  opacity: 0.4;
67
67
  cursor: not-allowed;
68
68
  }
69
- .bds251Accordion-trigger:focus-visible {
69
+ .bds260Accordion-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
- .bds251Accordion-trigger:not(:disabled):hover {
75
+ .bds260Accordion-trigger:not(:disabled):hover {
76
76
  background-color: var(--accordion_trigger-bg--hover, var(--bds-color_bg--subtle));
77
77
  }
78
78
  }
79
- .bds251Accordion-triggerLabel {
79
+ .bds260Accordion-triggerLabel {
80
80
  flex: 1;
81
81
  text-align: start;
82
82
  }
83
- .bds251Accordion-chevron {
83
+ .bds260Accordion-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
- .bds251Accordion-item.bds251Accordion---open .bds251Accordion-chevron {
89
+ .bds260Accordion-item.bds260Accordion---open .bds260Accordion-chevron {
90
90
  transform: rotate(180deg);
91
91
  }
92
- .bds251Accordion-panel {
92
+ .bds260Accordion-panel {
93
93
  overflow: hidden;
94
94
  }
95
- .bds251Accordion-panelContent {
95
+ .bds260Accordion-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
- .bds251Accordion-chevron {
102
+ .bds260Accordion-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.bds251Alert-component {
110
- .bds251Alert-alert {
109
+ @layer boostdev.bds260Alert-component {
110
+ .bds260Alert-alert {
111
111
  display: flex;
112
112
  align-items: flex-start;
113
113
  gap: var(--bds-space_s);
114
114
  padding: var(--bds-space_m);
115
115
  border-radius: var(--bds-border_radius--s);
116
- border-inline-start: var(--bds-space_s) solid var(--alert_border, var(--bds-color_blue));
117
- background-color: var(--alert_bg, var(--bds-color_blue--subtle));
118
- color: var(--alert_text, var(--bds-color_on-blue--subtle));
116
+ background-color: var(--alert_bg, var(--alert_bg--variant, var(--bds-color_blue--subtle)));
117
+ color: var(--alert_text, var(--alert_text--variant, var(--bds-color_on-blue--subtle)));
118
+ border-inline-start: var(--bds-space_s) solid var(--alert_border, var(--alert_border--variant, var(--bds-color_blue)));
119
119
  font-size: var(--bds-font_size--body);
120
120
  line-height: var(--bds-font_line-height--body);
121
121
  }
122
- .bds251Alert---variant_info {
123
- --alert_bg: var(--bds-color_blue--subtle);
124
- --alert_text: var(--bds-color_on-blue--subtle);
125
- --alert_border: var(--bds-color_blue);
122
+ .bds260Alert---variant_info {
123
+ --alert_bg--variant: var(--alert_bg--info, var(--bds-color_blue--subtle));
124
+ --alert_text--variant: var(--alert_text--info, var(--bds-color_on-blue--subtle));
125
+ --alert_border--variant: var(--alert_border--info, var(--bds-color_blue));
126
126
  }
127
- .bds251Alert---variant_success {
128
- --alert_bg: var(--bds-color_success--subtle);
129
- --alert_text: var(--bds-color_on-success--subtle);
130
- --alert_border: var(--bds-color_success);
127
+ .bds260Alert---variant_success {
128
+ --alert_bg--variant: var(--alert_bg--success, var(--bds-color_success--subtle));
129
+ --alert_text--variant: var(--alert_text--success, var(--bds-color_on-success--subtle));
130
+ --alert_border--variant: var(--alert_border--success, var(--bds-color_success));
131
131
  }
132
- .bds251Alert---variant_warning {
133
- --alert_bg: var(--bds-color_orange--subtle);
134
- --alert_text: var(--bds-color_on-orange--subtle);
135
- --alert_border: var(--bds-color_warning);
132
+ .bds260Alert---variant_warning {
133
+ --alert_bg--variant: var(--alert_bg--warning, var(--bds-color_orange--subtle));
134
+ --alert_text--variant: var(--alert_text--warning, var(--bds-color_on-orange--subtle));
135
+ --alert_border--variant: var(--alert_border--warning, var(--bds-color_warning));
136
136
  }
137
- .bds251Alert---variant_error {
138
- --alert_bg: rgb(from var(--bds-color_error) r g b / 12%);
139
- --alert_text: var(--bds-color_on-bg);
140
- --alert_border: var(--bds-color_error);
137
+ .bds260Alert---variant_error {
138
+ --alert_bg--variant: var(--alert_bg--error, rgb(from var(--bds-color_error) r g b / 12%));
139
+ --alert_text--variant: var(--alert_text--error, var(--bds-color_on-bg));
140
+ --alert_border--variant: var(--alert_border--error, var(--bds-color_error));
141
141
  }
142
- .bds251Alert-icon {
142
+ .bds260Alert-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
- .bds251Alert-content {
148
+ .bds260Alert-content {
149
149
  flex: 1;
150
150
  display: flex;
151
151
  flex-direction: column;
152
152
  gap: var(--bds-space_xxs);
153
153
  }
154
- .bds251Alert-title {
154
+ .bds260Alert-title {
155
155
  font-weight: var(--bds-font_weight--semibold);
156
156
  font-size: var(--bds-font_size--body);
157
157
  }
158
- .bds251Alert-dismiss {
158
+ .bds260Alert-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
- .bds251Alert-dismiss svg {
172
+ .bds260Alert-dismiss svg {
173
173
  width: 1rem;
174
174
  height: 1rem;
175
175
  }
176
- .bds251Alert-dismiss:focus-visible {
176
+ .bds260Alert-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
- .bds251Alert-dismiss:hover {
181
+ .bds260Alert-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.bds251Avatar-component {
189
- .bds251Avatar-avatar {
188
+ @layer boostdev.bds260Avatar-component {
189
+ .bds260Avatar-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
- .bds251Avatar-avatar.bds251Avatar---fallback {
199
+ .bds260Avatar-avatar.bds260Avatar---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
- .bds251Avatar-avatar.bds251Avatar---size_small {
204
+ .bds260Avatar-avatar.bds260Avatar---size_small {
205
205
  --avatar_size: 2em;
206
206
  }
207
- .bds251Avatar-avatar.bds251Avatar---size_medium {
207
+ .bds260Avatar-avatar.bds260Avatar---size_medium {
208
208
  --avatar_size: 3em;
209
209
  }
210
- .bds251Avatar-avatar.bds251Avatar---size_large {
210
+ .bds260Avatar-avatar.bds260Avatar---size_large {
211
211
  --avatar_size: 4.5em;
212
212
  }
213
- .bds251Avatar-image {
213
+ .bds260Avatar-image {
214
214
  width: 100%;
215
215
  height: 100%;
216
216
  object-fit: cover;
217
217
  display: block;
218
218
  }
219
- .bds251Avatar-initials {
219
+ .bds260Avatar-initials {
220
220
  line-height: 1;
221
221
  user-select: none;
222
222
  font-size: var(--bds-font_size--body);
223
223
  }
224
- .bds251Avatar-avatar.bds251Avatar---size_small .bds251Avatar-initials {
224
+ .bds260Avatar-avatar.bds260Avatar---size_small .bds260Avatar-initials {
225
225
  font-size: var(--bds-font_size--body--s);
226
226
  }
227
- .bds251Avatar-avatar.bds251Avatar---size_large .bds251Avatar-initials {
227
+ .bds260Avatar-avatar.bds260Avatar---size_large .bds260Avatar-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.bds251Badge-component {
234
- .bds251Badge-badge {
233
+ @layer boostdev.bds260Badge-component {
234
+ .bds260Badge-badge {
235
235
  display: inline-flex;
236
236
  align-items: center;
237
237
  justify-content: center;
@@ -241,37 +241,37 @@
241
241
  font-weight: var(--bds-font_weight--semibold);
242
242
  line-height: 1;
243
243
  white-space: nowrap;
244
- background-color: var(--badge_bg, var(--bds-color_blue));
245
- color: var(--badge_text, var(--bds-color_on-blue));
244
+ background-color: var(--badge_bg, var(--badge_bg--variant, var(--bds-color_blue)));
245
+ color: var(--badge_text, var(--badge_text--variant, var(--bds-color_on-blue)));
246
246
  }
247
- .bds251Badge---variant_primary {
248
- --badge_bg: var(--bds-color_interactive);
249
- --badge_text: var(--bds-color_on-interactive);
247
+ .bds260Badge---variant_primary {
248
+ --badge_bg--variant: var(--badge_bg--primary, var(--bds-color_interactive));
249
+ --badge_text--variant: var(--badge_text--primary, var(--bds-color_on-interactive));
250
250
  }
251
- .bds251Badge---variant_secondary {
252
- --badge_bg: var(--bds-color_bg);
253
- --badge_text: var(--bds-color_on-bg);
251
+ .bds260Badge---variant_secondary {
252
+ --badge_bg--variant: var(--badge_bg--secondary, var(--bds-color_bg));
253
+ --badge_text--variant: var(--badge_text--secondary, var(--bds-color_on-bg));
254
254
  }
255
- .bds251Badge---variant_success {
256
- --badge_bg: var(--bds-color_success);
257
- --badge_text: var(--bds-color_on-success);
255
+ .bds260Badge---variant_success {
256
+ --badge_bg--variant: var(--badge_bg--success, var(--bds-color_success));
257
+ --badge_text--variant: var(--badge_text--success, var(--bds-color_on-success));
258
258
  }
259
- .bds251Badge---variant_error {
260
- --badge_bg: var(--bds-color_error);
261
- --badge_text: var(--bds-color_on-error);
259
+ .bds260Badge---variant_error {
260
+ --badge_bg--variant: var(--badge_bg--error, var(--bds-color_error));
261
+ --badge_text--variant: var(--badge_text--error, var(--bds-color_on-error));
262
262
  }
263
- .bds251Badge---variant_warning {
264
- --badge_bg: var(--bds-color_warning);
265
- --badge_text: var(--bds-color_on-warning);
263
+ .bds260Badge---variant_warning {
264
+ --badge_bg--variant: var(--badge_bg--warning, var(--bds-color_warning));
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.bds251Breadcrumb-component {
271
- .bds251Breadcrumb-breadcrumb {
270
+ @layer boostdev.bds260Breadcrumb-component {
271
+ .bds260Breadcrumb-breadcrumb {
272
272
  font-size: var(--bds-font_size--body--s);
273
273
  }
274
- .bds251Breadcrumb-list {
274
+ .bds260Breadcrumb-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
- .bds251Breadcrumb-item {
283
+ .bds260Breadcrumb-item {
284
284
  display: flex;
285
285
  align-items: center;
286
286
  gap: var(--bds-space_xxs);
287
287
  }
288
- .bds251Breadcrumb-link {
288
+ .bds260Breadcrumb-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
- .bds251Breadcrumb-link:focus-visible {
293
+ .bds260Breadcrumb-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
- .bds251Breadcrumb-link:hover {
299
+ .bds260Breadcrumb-link:hover {
300
300
  text-decoration: underline;
301
301
  text-underline-offset: 0.2em;
302
302
  }
303
303
  }
304
- .bds251Breadcrumb-separator {
304
+ .bds260Breadcrumb-separator {
305
305
  color: var(--bds-color_on-bg--subtle);
306
306
  user-select: none;
307
307
  }
308
- .bds251Breadcrumb-current {
308
+ .bds260Breadcrumb-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.bds251Collapsible-component {
316
- .bds251Collapsible-collapsible {
315
+ @layer boostdev.bds260Collapsible-component {
316
+ .bds260Collapsible-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
- .bds251Collapsible-summary {
321
+ .bds260Collapsible-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
- .bds251Collapsible-summary::-webkit-details-marker {
336
+ .bds260Collapsible-summary::-webkit-details-marker {
337
337
  display: none;
338
338
  }
339
- .bds251Collapsible-summary:focus-visible {
339
+ .bds260Collapsible-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
- .bds251Collapsible-summary:hover {
344
+ .bds260Collapsible-summary:hover {
345
345
  background-color: var(--collapsible_bg--hover, var(--bds-color_bg--subtle));
346
346
  }
347
347
  }
348
- .bds251Collapsible-collapsible[open] > .bds251Collapsible-summary {
348
+ .bds260Collapsible-collapsible[open] > .bds260Collapsible-summary {
349
349
  border-block-end: var(--collapsible_border-width, 1px) solid var(--collapsible_border-color, var(--bds-color_bg--subtle));
350
350
  }
351
- .bds251Collapsible-summaryContent {
351
+ .bds260Collapsible-summaryContent {
352
352
  flex: 1;
353
353
  }
354
- .bds251Collapsible-icon {
354
+ .bds260Collapsible-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
- .bds251Collapsible-collapsible[open] > .bds251Collapsible-summary .bds251Collapsible-icon {
363
+ .bds260Collapsible-collapsible[open] > .bds260Collapsible-summary .bds260Collapsible-icon {
364
364
  transform: rotate(-135deg);
365
365
  }
366
- .bds251Collapsible-content {
366
+ .bds260Collapsible-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
- .bds251Collapsible-icon {
373
+ .bds260Collapsible-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.bds251Calendar-component {
381
- .bds251Calendar-calendar {
380
+ @layer boostdev.bds260Calendar-component {
381
+ .bds260Calendar-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
- .bds251Calendar-header {
394
+ .bds260Calendar-header {
395
395
  display: flex;
396
396
  align-items: center;
397
397
  justify-content: space-between;
398
398
  }
399
- .bds251Calendar-monthYear {
399
+ .bds260Calendar-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
- .bds251Calendar-navBtn {
404
+ .bds260Calendar-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
- .bds251Calendar-navBtn svg {
416
+ .bds260Calendar-navBtn svg {
417
417
  inline-size: 1rem;
418
418
  block-size: 1rem;
419
419
  }
420
- .bds251Calendar-navBtn:focus-visible {
420
+ .bds260Calendar-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
- .bds251Calendar-navBtn:hover {
425
+ .bds260Calendar-navBtn:hover {
426
426
  background-color: var(--calendar_navBtn-bg--hover, var(--bds-color_bg--subtle));
427
427
  }
428
428
  }
429
- .bds251Calendar-grid {
429
+ .bds260Calendar-grid {
430
430
  border-collapse: collapse;
431
431
  inline-size: 100%;
432
432
  table-layout: fixed;
433
433
  }
434
- .bds251Calendar-weekday {
434
+ .bds260Calendar-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
- .bds251Calendar-empty {
441
+ .bds260Calendar-empty {
442
442
  padding: 0;
443
443
  }
444
- .bds251Calendar-day {
444
+ .bds260Calendar-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
- .bds251Calendar-day:focus-visible {
458
+ .bds260Calendar-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
- .bds251Calendar-day:not(.bds251Calendar-disabled, .bds251Calendar-selected):hover {
463
+ .bds260Calendar-day:not(.bds260Calendar-disabled, .bds260Calendar-selected):hover {
464
464
  background-color: var(--calendar_day-bg--hover, var(--bds-color_bg--subtle));
465
465
  }
466
466
  }
467
- .bds251Calendar-today {
467
+ .bds260Calendar-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
- .bds251Calendar-selected {
473
+ .bds260Calendar-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
- .bds251Calendar-disabled {
478
+ .bds260Calendar-disabled {
479
479
  opacity: 0.35;
480
480
  cursor: not-allowed;
481
481
  }
482
482
  @media (prefers-reduced-motion: reduce) {
483
- .bds251Calendar-day {
483
+ .bds260Calendar-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.bds251Carousel-component {
491
- .bds251Carousel-carousel {
490
+ @layer boostdev.bds260Carousel-component {
491
+ .bds260Carousel-carousel {
492
492
  position: relative;
493
493
  display: flex;
494
494
  align-items: center;
495
495
  gap: var(--bds-space_xs);
496
496
  }
497
- .bds251Carousel-track {
497
+ .bds260Carousel-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
- .bds251Carousel-track::-webkit-scrollbar {
506
+ .bds260Carousel-track::-webkit-scrollbar {
507
507
  display: none;
508
508
  }
509
- .bds251Carousel-slide {
509
+ .bds260Carousel-slide {
510
510
  scroll-snap-align: start;
511
511
  flex-shrink: 0;
512
512
  }
513
- .bds251Carousel-navBtn {
513
+ .bds260Carousel-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
- .bds251Carousel-navBtn svg {
530
+ .bds260Carousel-navBtn svg {
531
531
  inline-size: 1.25rem;
532
532
  block-size: 1.25rem;
533
533
  }
534
- .bds251Carousel-navBtn:focus-visible {
534
+ .bds260Carousel-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
- .bds251Carousel-navBtn:hover {
539
+ .bds260Carousel-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
- .bds251Carousel-track {
544
+ .bds260Carousel-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.bds251DescriptionList-component {
552
- .bds251DescriptionList-list {
551
+ @layer boostdev.bds260DescriptionList-component {
552
+ .bds260DescriptionList-list {
553
553
  display: flex;
554
554
  flex-direction: column;
555
555
  gap: var(--bds-space_s);
@@ -558,63 +558,63 @@
558
558
  font-size: var(--bds-font_size--body);
559
559
  color: var(--bds-color_on-bg);
560
560
  }
561
- .bds251DescriptionList-group {
561
+ .bds260DescriptionList-group {
562
562
  display: flex;
563
563
  flex-direction: column;
564
564
  gap: var(--bds-space_xxs);
565
565
  }
566
- .bds251DescriptionList-term {
566
+ .bds260DescriptionList-term {
567
567
  font-weight: var(--bds-font_weight--semibold);
568
568
  color: var(--bds-color_on-bg);
569
569
  }
570
- .bds251DescriptionList-details {
570
+ .bds260DescriptionList-details {
571
571
  margin: 0;
572
572
  color: var(--bds-color_on-bg);
573
573
  }
574
- .bds251DescriptionList---layout_inline .bds251DescriptionList-group {
574
+ .bds260DescriptionList---layout_inline .bds260DescriptionList-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
- .bds251DescriptionList---layout_inline .bds251DescriptionList-term {
580
+ .bds260DescriptionList---layout_inline .bds260DescriptionList-term {
581
581
  grid-column: 1;
582
582
  }
583
- .bds251DescriptionList---layout_inline .bds251DescriptionList-details {
583
+ .bds260DescriptionList---layout_inline .bds260DescriptionList-details {
584
584
  grid-column: 2;
585
585
  }
586
586
  }
587
587
 
588
588
  /* src/components/ui/Link/Link.module.css */
589
- @layer boostdev.bds251Link-component {
590
- .bds251Link-link {
591
- color: var(--link_color, var(--bds-color_interactive_on-bg));
589
+ @layer boostdev.bds260Link-component {
590
+ .bds260Link-link {
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
- .bds251Link-link:focus-visible {
597
+ .bds260Link-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
- .bds251Link-link:hover {
604
- --link_color: var(--link_color-hover, var(--bds-color_blue--strong));
603
+ .bds260Link-link:hover {
604
+ color: var(--link_color-hover, var(--link_color-hover--variant, var(--bds-color_blue--strong)));
605
605
  }
606
606
  }
607
- .bds251Link---variant_default {
608
- --link_color: var(--bds-color_interactive_on-bg);
609
- --link_color-hover: var(--bds-color_blue--strong);
607
+ .bds260Link---variant_default {
608
+ --link_color--variant: var(--link_color--default, var(--bds-color_interactive_on-bg));
609
+ --link_color-hover--variant: var(--link_color-hover--default, var(--bds-color_blue--strong));
610
610
  }
611
- .bds251Link---variant_subtle {
612
- --link_color: var(--bds-color_on-bg);
613
- --link_color-hover: var(--bds-color_interactive_on-bg);
611
+ .bds260Link---variant_subtle {
612
+ --link_color--variant: var(--link_color--subtle, var(--bds-color_on-bg));
613
+ --link_color-hover--variant: var(--link_color-hover--subtle, var(--bds-color_interactive_on-bg));
614
614
  }
615
- .bds251Link---variant_standalone {
616
- --link_color: var(--bds-color_interactive_on-bg);
617
- --link_color-hover: var(--bds-color_blue--strong);
615
+ .bds260Link---variant_standalone {
616
+ --link_color--variant: var(--link_color--standalone, var(--bds-color_interactive_on-bg));
617
+ --link_color-hover--variant: var(--link_color-hover--standalone, var(--bds-color_blue--strong));
618
618
  display: inline-flex;
619
619
  align-items: center;
620
620
  gap: var(--bds-space_xxs);
@@ -622,12 +622,12 @@
622
622
  text-decoration: none;
623
623
  }
624
624
  @media (hover: hover) and (pointer: fine) {
625
- .bds251Link---variant_standalone:hover {
625
+ .bds260Link---variant_standalone:hover {
626
626
  text-decoration: underline;
627
627
  text-underline-offset: 0.2em;
628
628
  }
629
629
  }
630
- .bds251Link-externalLabel {
630
+ .bds260Link-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.bds251Loading-component {
645
- .bds251Loading-loading {
644
+ @layer boostdev.bds260Loading-component {
645
+ .bds260Loading-loading {
646
646
  display: flex;
647
647
  justify-content: center;
648
648
  align-items: center;
649
649
  }
650
- .bds251Loading-spinner {
650
+ .bds260Loading-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
- .bds251Loading---size_small .bds251Loading-spinner {
658
+ .bds260Loading---size_small .bds260Loading-spinner {
659
659
  inline-size: 1.5em;
660
660
  block-size: 1.5em;
661
661
  border-width: 2px;
662
662
  }
663
- .bds251Loading---size_large .bds251Loading-spinner {
663
+ .bds260Loading---size_large .bds260Loading-spinner {
664
664
  inline-size: 4em;
665
665
  block-size: 4em;
666
666
  border-width: 6px;
@@ -675,52 +675,52 @@
675
675
  }
676
676
  }
677
677
  @media (prefers-reduced-motion: reduce) {
678
- .bds251Loading-spinner {
678
+ .bds260Loading-spinner {
679
679
  animation: none;
680
680
  }
681
681
  }
682
682
 
683
683
  /* src/components/ui/NotificationBanner/NotificationBanner.module.css */
684
- @layer boostdev.bds251NotificationBanner-component {
685
- .bds251NotificationBanner-banner {
684
+ @layer boostdev.bds260NotificationBanner-component {
685
+ .bds260NotificationBanner-banner {
686
686
  display: flex;
687
687
  align-items: center;
688
688
  gap: var(--bds-space_m);
689
689
  padding: var(--bds-space_s) var(--bds-space_m);
690
- background-color: var(--banner_bg, var(--bds-color_blue--subtle));
691
- color: var(--banner_text, var(--bds-color_on-blue--subtle));
692
- border-block-end: 3px solid var(--banner_border, var(--bds-color_blue));
690
+ background-color: var(--banner_bg, var(--banner_bg--variant, var(--bds-color_blue--subtle)));
691
+ color: var(--banner_text, var(--banner_text--variant, var(--bds-color_on-blue--subtle)));
692
+ border-block-end: 3px solid var(--banner_border, var(--banner_border--variant, var(--bds-color_blue)));
693
693
  font-size: var(--bds-font_size--body);
694
694
  line-height: var(--bds-font_line-height--body);
695
695
  inline-size: 100%;
696
696
  }
697
- .bds251NotificationBanner---variant_info {
698
- --banner_bg: var(--bds-color_blue--subtle);
699
- --banner_text: var(--bds-color_on-blue--subtle);
700
- --banner_border: var(--bds-color_blue);
697
+ .bds260NotificationBanner---variant_info {
698
+ --banner_bg--variant: var(--banner_bg--info, var(--bds-color_blue--subtle));
699
+ --banner_text--variant: var(--banner_text--info, var(--bds-color_on-blue--subtle));
700
+ --banner_border--variant: var(--banner_border--info, var(--bds-color_blue));
701
701
  }
702
- .bds251NotificationBanner---variant_success {
703
- --banner_bg: var(--bds-color_success--subtle);
704
- --banner_text: var(--bds-color_on-success--subtle);
705
- --banner_border: var(--bds-color_success);
702
+ .bds260NotificationBanner---variant_success {
703
+ --banner_bg--variant: var(--banner_bg--success, var(--bds-color_success--subtle));
704
+ --banner_text--variant: var(--banner_text--success, var(--bds-color_on-success--subtle));
705
+ --banner_border--variant: var(--banner_border--success, var(--bds-color_success));
706
706
  }
707
- .bds251NotificationBanner---variant_warning {
708
- --banner_bg: var(--bds-color_orange--subtle);
709
- --banner_text: var(--bds-color_on-orange--subtle);
710
- --banner_border: var(--bds-color_warning);
707
+ .bds260NotificationBanner---variant_warning {
708
+ --banner_bg--variant: var(--banner_bg--warning, var(--bds-color_orange--subtle));
709
+ --banner_text--variant: var(--banner_text--warning, var(--bds-color_on-orange--subtle));
710
+ --banner_border--variant: var(--banner_border--warning, var(--bds-color_warning));
711
711
  }
712
- .bds251NotificationBanner---variant_error {
713
- --banner_bg: rgb(from var(--bds-color_error) r g b / 12%);
714
- --banner_text: var(--bds-color_on-bg);
715
- --banner_border: var(--bds-color_error);
712
+ .bds260NotificationBanner---variant_error {
713
+ --banner_bg--variant: var(--banner_bg--error, rgb(from var(--bds-color_error) r g b / 12%));
714
+ --banner_text--variant: var(--banner_text--error, var(--bds-color_on-bg));
715
+ --banner_border--variant: var(--banner_border--error, var(--bds-color_error));
716
716
  }
717
- .bds251NotificationBanner-content {
717
+ .bds260NotificationBanner-content {
718
718
  flex: 1;
719
719
  }
720
- .bds251NotificationBanner-action {
720
+ .bds260NotificationBanner-action {
721
721
  flex-shrink: 0;
722
722
  }
723
- .bds251NotificationBanner-dismiss {
723
+ .bds260NotificationBanner-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
- .bds251NotificationBanner-dismiss svg {
737
+ .bds260NotificationBanner-dismiss svg {
738
738
  inline-size: 1rem;
739
739
  block-size: 1rem;
740
740
  }
741
- .bds251NotificationBanner-dismiss:focus-visible {
741
+ .bds260NotificationBanner-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
- .bds251NotificationBanner-dismiss:hover {
746
+ .bds260NotificationBanner-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.bds251Pagination-component {
754
- .bds251Pagination-pagination {
753
+ @layer boostdev.bds260Pagination-component {
754
+ .bds260Pagination-pagination {
755
755
  display: flex;
756
756
  justify-content: center;
757
757
  }
758
- .bds251Pagination-list {
758
+ .bds260Pagination-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
- .bds251Pagination-list li {
766
+ .bds260Pagination-list li {
767
767
  list-style: none;
768
768
  }
769
- .bds251Pagination-button {
769
+ .bds260Pagination-button {
770
770
  all: unset;
771
771
  display: inline-flex;
772
772
  align-items: center;
@@ -775,11 +775,11 @@
775
775
  block-size: 2.25rem;
776
776
  padding-inline: var(--bds-space_xs);
777
777
  border-radius: var(--pagination_radius, var(--bds-border_radius--full));
778
- background-color: var(--btn_bg, transparent);
779
- --bdc_color: var(--btn_border, var(--bds-color_bg--subtle));
778
+ background-color: var(--btn_bg, var(--btn_bg--state, transparent));
779
+ color: var(--btn_color, var(--btn_color--state, var(--bds-color_on-bg)));
780
+ --bdc_color: var(--btn_border, var(--btn_border--state, var(--bds-color_bg--subtle)));
780
781
  border: none;
781
782
  box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
782
- color: var(--btn_color, var(--bds-color_on-bg));
783
783
  font-family: var(--bds-font_family--body);
784
784
  font-size: var(--bds-font_size--body);
785
785
  font-variant-numeric: tabular-nums;
@@ -787,30 +787,30 @@
787
787
  transition: var(--bds-animation_transition);
788
788
  box-sizing: border-box;
789
789
  }
790
- .bds251Pagination-button:disabled {
790
+ .bds260Pagination-button:disabled {
791
791
  opacity: 0.4;
792
792
  cursor: not-allowed;
793
793
  }
794
- .bds251Pagination-button:focus-visible {
794
+ .bds260Pagination-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
- .bds251Pagination-button:not(:disabled, .bds251Pagination---active):hover {
800
- --btn_bg: var(--btn_bg--hover, var(--bds-color_bg--subtle));
801
- --btn_color: var(--btn_color--hover, var(--bds-color_interactive_on-bg));
799
+ .bds260Pagination-button:not(:disabled, .bds260Pagination---active):hover {
800
+ --btn_bg--state: var(--btn_bg--hover, var(--bds-color_bg--subtle));
801
+ --btn_color--state: var(--btn_color--hover, var(--bds-color_interactive_on-bg));
802
802
  }
803
803
  }
804
- .bds251Pagination-button.bds251Pagination---active {
805
- --btn_bg: var(--btn_bg--active, var(--bds-color_interactive));
806
- --btn_color: var(--btn_color--active, var(--bds-color_on-interactive));
807
- --btn_border: var(--btn_border--active, var(--bds-color_interactive));
804
+ .bds260Pagination-button.bds260Pagination---active {
805
+ --btn_bg--state: var(--btn_bg--active, var(--bds-color_interactive));
806
+ --btn_color--state: var(--btn_color--active, var(--bds-color_on-interactive));
807
+ --btn_border--state: var(--btn_border--active, var(--bds-color_interactive));
808
808
  }
809
- .bds251Pagination-button.bds251Pagination---nav svg {
809
+ .bds260Pagination-button.bds260Pagination---nav svg {
810
810
  inline-size: 1rem;
811
811
  block-size: 1rem;
812
812
  }
813
- .bds251Pagination-ellipsis {
813
+ .bds260Pagination-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.bds251Progress-component {
827
- .bds251Progress-container {
826
+ @layer boostdev.bds260Progress-component {
827
+ .bds260Progress-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
- .bds251Progress-labelRow {
833
+ .bds260Progress-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
- .bds251Progress-value {
840
+ .bds260Progress-value {
841
841
  font-variant-numeric: tabular-nums;
842
842
  }
843
- .bds251Progress-track {
843
+ .bds260Progress-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
- .bds251Progress-track.bds251Progress---size_small {
850
+ .bds260Progress-track.bds260Progress---size_small {
851
851
  --progress_height: var(--bds-space_xxs);
852
852
  }
853
- .bds251Progress-track.bds251Progress---size_medium {
853
+ .bds260Progress-track.bds260Progress---size_medium {
854
854
  --progress_height: var(--bds-space_xs);
855
855
  }
856
- .bds251Progress-track.bds251Progress---size_large {
856
+ .bds260Progress-track.bds260Progress---size_large {
857
857
  --progress_height: var(--bds-space_s);
858
858
  }
859
- .bds251Progress-fill {
859
+ .bds260Progress-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
- .bds251Progress-fill {
866
+ .bds260Progress-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.bds251ProgressCircle-component {
874
- .bds251ProgressCircle-wrapper {
873
+ @layer boostdev.bds260ProgressCircle-component {
874
+ .bds260ProgressCircle-wrapper {
875
875
  position: relative;
876
876
  display: inline-flex;
877
877
  align-items: center;
878
878
  justify-content: center;
879
879
  }
880
- .bds251ProgressCircle-svg {
880
+ .bds260ProgressCircle-svg {
881
881
  display: block;
882
882
  }
883
- .bds251ProgressCircle-track {
883
+ .bds260ProgressCircle-track {
884
884
  stroke: var(--bds-color_bg--subtle);
885
885
  }
886
- .bds251ProgressCircle-fill {
886
+ .bds260ProgressCircle-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
- .bds251ProgressCircle-value {
890
+ .bds260ProgressCircle-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
- .bds251ProgressCircle---size_small .bds251ProgressCircle-value {
898
+ .bds260ProgressCircle---size_small .bds260ProgressCircle-value {
899
899
  font-size: 0.5rem;
900
900
  }
901
- .bds251ProgressCircle---size_medium .bds251ProgressCircle-value {
901
+ .bds260ProgressCircle---size_medium .bds260ProgressCircle-value {
902
902
  font-size: var(--bds-font_size--body--s);
903
903
  }
904
- .bds251ProgressCircle---size_large .bds251ProgressCircle-value {
904
+ .bds260ProgressCircle---size_large .bds260ProgressCircle-value {
905
905
  font-size: var(--bds-font_size--body);
906
906
  }
907
907
  @media (prefers-reduced-motion: reduce) {
908
- .bds251ProgressCircle-fill {
908
+ .bds260ProgressCircle-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.bds251Separator-component {
916
- .bds251Separator-separator {
915
+ @layer boostdev.bds260Separator-component {
916
+ .bds260Separator-separator {
917
917
  border: none;
918
918
  background-color: var(--separator_color, var(--bds-color_on-bg));
919
919
  }
920
- .bds251Separator-separator.bds251Separator---horizontal {
920
+ .bds260Separator-separator.bds260Separator---horizontal {
921
921
  display: block;
922
922
  inline-size: 100%;
923
923
  block-size: var(--separator_thickness, 1px);
924
924
  }
925
- .bds251Separator-separator.bds251Separator---vertical {
925
+ .bds260Separator-separator.bds260Separator---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.bds251Skeleton-component {
934
- .bds251Skeleton-skeleton {
933
+ @layer boostdev.bds260Skeleton-component {
934
+ .bds260Skeleton-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.bds251SkipLink-component {
958
- .bds251SkipLink-skipLink {
957
+ @layer boostdev.bds260SkipLink-component {
958
+ .bds260SkipLink-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
- .bds251SkipLink-skipLink:focus-visible {
976
+ .bds260SkipLink-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
- .bds251SkipLink-skipLink {
982
+ .bds260SkipLink-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.bds251Table-component {
990
- .bds251Table-wrapper {
989
+ @layer boostdev.bds260Table-component {
990
+ .bds260Table-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
- .bds251Table-table {
999
+ .bds260Table-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
- .bds251Table-caption {
1005
+ .bds260Table-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
- .bds251Table-thead {
1012
+ .bds260Table-thead {
1013
1013
  background-color: var(--bds-color_bg--subtle);
1014
1014
  }
1015
- .bds251Table-th {
1015
+ .bds260Table-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
- .bds251Table-th.bds251Table---sortable {
1024
+ .bds260Table-th.bds260Table---sortable {
1025
1025
  padding: 0;
1026
1026
  }
1027
- .bds251Table-sortButton {
1027
+ .bds260Table-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
- .bds251Table-sortButton:focus-visible {
1041
+ .bds260Table-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
- .bds251Table-sortButton:hover {
1046
+ .bds260Table-sortButton:hover {
1047
1047
  color: var(--table_sortBtn-color--hover, var(--bds-color_on-bg));
1048
1048
  }
1049
1049
  }
1050
- .bds251Table-sortIcon {
1050
+ .bds260Table-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
- .bds251Table-sortIcon.bds251Table---sort-active {
1056
+ .bds260Table-sortIcon.bds260Table---sort-active {
1057
1057
  opacity: 1;
1058
1058
  color: var(--bds-color_interactive);
1059
1059
  }
1060
- .bds251Table-sortIcon.bds251Table---sort-desc {
1060
+ .bds260Table-sortIcon.bds260Table---sort-desc {
1061
1061
  transform: rotate(180deg);
1062
1062
  }
1063
- .bds251Table-tbody .bds251Table-tr {
1063
+ .bds260Table-tbody .bds260Table-tr {
1064
1064
  border-block-end: 1px solid var(--bds-color_bg--subtle);
1065
1065
  transition: var(--bds-animation_transition);
1066
1066
  }
1067
- .bds251Table-tbody .bds251Table-tr:last-child {
1067
+ .bds260Table-tbody .bds260Table-tr:last-child {
1068
1068
  border-block-end: none;
1069
1069
  }
1070
1070
  @media (hover: hover) and (pointer: fine) {
1071
- .bds251Table-tbody .bds251Table-tr:hover {
1071
+ .bds260Table-tbody .bds260Table-tr:hover {
1072
1072
  background-color: var(--table_row-bg--hover, var(--bds-color_bg--subtle));
1073
1073
  }
1074
1074
  }
1075
- .bds251Table-td {
1075
+ .bds260Table-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
- .bds251Table-sortIcon {
1081
+ .bds260Table-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.bds251Tabs-component {
1089
- .bds251Tabs-tabs {
1088
+ @layer boostdev.bds260Tabs-component {
1089
+ .bds260Tabs-tabs {
1090
1090
  display: flex;
1091
1091
  flex-direction: column;
1092
1092
  }
1093
- .bds251Tabs-tabList {
1093
+ .bds260Tabs-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
- .bds251Tabs-tab {
1098
+ .bds260Tabs-tab {
1099
1099
  all: unset;
1100
1100
  display: inline-flex;
1101
1101
  align-items: center;
@@ -1103,47 +1103,47 @@
1103
1103
  font-family: var(--bds-font_family--body);
1104
1104
  font-size: var(--bds-font_size--body);
1105
1105
  font-weight: var(--bds-font_weight--semibold);
1106
- color: var(--tab_color, var(--bds-color_on-bg));
1107
- border-block-end: 2px solid var(--tab_border-color, transparent);
1106
+ color: var(--tab_color, var(--tab_color--state, var(--bds-color_on-bg)));
1107
+ border-block-end: 2px solid var(--tab_border-color, var(--tab_border-color--state, transparent));
1108
1108
  margin-block-end: -1px;
1109
1109
  cursor: pointer;
1110
1110
  transition: var(--bds-animation_transition);
1111
1111
  }
1112
- .bds251Tabs-tab.bds251Tabs---active {
1113
- --tab_color: var(--tab_color--active, var(--bds-color_interactive_on-bg));
1114
- --tab_border-color: var(--tab_border-color--active, var(--bds-color_interactive));
1112
+ .bds260Tabs-tab.bds260Tabs---active {
1113
+ --tab_color--state: var(--tab_color--active, var(--bds-color_interactive_on-bg));
1114
+ --tab_border-color--state: var(--tab_border-color--active, var(--bds-color_interactive));
1115
1115
  }
1116
- .bds251Tabs-tab:disabled {
1116
+ .bds260Tabs-tab:disabled {
1117
1117
  opacity: 0.4;
1118
1118
  cursor: not-allowed;
1119
1119
  }
1120
- .bds251Tabs-tab:focus-visible {
1120
+ .bds260Tabs-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
- .bds251Tabs-tab:not(:disabled, .bds251Tabs---active):hover {
1127
- --tab_color: var(--tab_color--hover, var(--bds-color_interactive_on-bg));
1126
+ .bds260Tabs-tab:not(:disabled, .bds260Tabs---active):hover {
1127
+ --tab_color--state: var(--tab_color--hover, var(--bds-color_interactive_on-bg));
1128
1128
  }
1129
1129
  }
1130
- .bds251Tabs-panel {
1130
+ .bds260Tabs-panel {
1131
1131
  padding-block-start: var(--bds-space_m);
1132
1132
  }
1133
- .bds251Tabs-panel:focus-visible {
1133
+ .bds260Tabs-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.bds251Tooltip-component {
1141
- .bds251Tooltip-wrapper {
1140
+ @layer boostdev.bds260Tooltip-component {
1141
+ .bds260Tooltip-wrapper {
1142
1142
  position: relative;
1143
1143
  display: inline-flex;
1144
1144
  align-items: center;
1145
1145
  }
1146
- .bds251Tooltip-tooltip {
1146
+ .bds260Tooltip-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
- .bds251Tooltip-wrapper:hover .bds251Tooltip-tooltip,
1162
- .bds251Tooltip-wrapper:focus-within .bds251Tooltip-tooltip {
1161
+ .bds260Tooltip-wrapper:hover .bds260Tooltip-tooltip,
1162
+ .bds260Tooltip-wrapper:focus-within .bds260Tooltip-tooltip {
1163
1163
  visibility: visible;
1164
1164
  opacity: 1;
1165
1165
  }
1166
- .bds251Tooltip---placement_top {
1166
+ .bds260Tooltip---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
- .bds251Tooltip---placement_bottom {
1171
+ .bds260Tooltip---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
- .bds251Tooltip---placement_left {
1176
+ .bds260Tooltip---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
- .bds251Tooltip---placement_right {
1181
+ .bds260Tooltip---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
- .bds251Tooltip-tooltip {
1187
+ .bds260Tooltip-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.bds251Typography-component {
1195
- .bds251Typography-typography {
1194
+ @layer boostdev.bds260Typography-component {
1195
+ .bds260Typography-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
- .bds251Typography---h1 {
1200
+ .bds260Typography---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
- .bds251Typography---h2 {
1206
+ .bds260Typography---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
- .bds251Typography---h3 {
1212
+ .bds260Typography---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
- .bds251Typography---body {
1218
+ .bds260Typography---body {
1219
1219
  font-size: var(--bds-font_size--body);
1220
1220
  line-height: var(--bds-font_line-height--body);
1221
1221
  }
1222
- .bds251Typography---body_s {
1222
+ .bds260Typography---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.bds251Button-component {
1254
- .bds251Button-button,
1255
- .bds251Button-button[href] {
1253
+ @layer boostdev.bds260Button-component {
1254
+ .bds260Button-button,
1255
+ .bds260Button-button[href] {
1256
1256
  all: unset;
1257
1257
  position: relative;
1258
1258
  font: inherit;
@@ -1271,104 +1271,103 @@
1271
1271
  --button_color: var(--bds-color_interactive);
1272
1272
  --button_on-color: var(--bds-color_on-interactive);
1273
1273
  --button_color--on-bg: var(--bds-color_interactive_on-bg);
1274
- background-color: var(--button_bg, var(--button_color));
1275
- color: var(--button_text, var(--button_on-color));
1276
- border: var(--button_border, none);
1277
- --bdc_color: transparent;
1274
+ background-color: var(--button_bg, var(--button_bg--variant, var(--button_color)));
1275
+ color: var(--button_text, var(--button_text--variant, var(--button_on-color)));
1276
+ --bdc_color: var(--button_border, var(--button_border--variant, transparent));
1278
1277
  box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
1279
1278
  transition: var(--bds-animation_transition), --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing);
1280
1279
  }
1281
- .bds251Button-button.bds251Button---default {
1280
+ .bds260Button-button.bds260Button---default {
1282
1281
  }
1283
- .bds251Button-button.bds251Button---outline,
1284
- .bds251Button-button.bds251Button---ghost {
1285
- --button_bg: transparent;
1286
- --button_text: var(--button_color--on-bg);
1287
- --bdc_color: var(--button_color--on-bg);
1282
+ .bds260Button-button.bds260Button---outline,
1283
+ .bds260Button-button.bds260Button---ghost {
1284
+ --button_bg--variant: var(--button_bg--outline, transparent);
1285
+ --button_text--variant: var(--button_text--outline, var(--button_color--on-bg));
1286
+ --button_border--variant: var(--button_border--outline, var(--button_color--on-bg));
1288
1287
  }
1289
- .bds251Button-button.bds251Button---size_small {
1288
+ .bds260Button-button.bds260Button---size_small {
1290
1289
  --button_height: 2.25em;
1291
1290
  --button_font-size: var(--bds-font_size--body--s);
1292
1291
  padding-inline: var(--bds-space_m);
1293
1292
  }
1294
- .bds251Button-button.bds251Button---size_medium {
1293
+ .bds260Button-button.bds260Button---size_medium {
1295
1294
  --button_height: 3em;
1296
1295
  padding-inline: var(--bds-space_l);
1297
1296
  }
1298
- .bds251Button-button.bds251Button---size_large {
1297
+ .bds260Button-button.bds260Button---size_large {
1299
1298
  --button_font-size: var(--bds-font_size--heading-3);
1300
1299
  padding-inline: var(--bds-space_xl);
1301
1300
  }
1302
- .bds251Button-button.bds251Button---hasPulse {
1301
+ .bds260Button-button.bds260Button---hasPulse {
1303
1302
  animation: pulse 3s infinite;
1304
1303
  }
1305
- .bds251Button-button.bds251Button---iconOnly {
1304
+ .bds260Button-button.bds260Button---iconOnly {
1306
1305
  aspect-ratio: 1;
1307
1306
  box-sizing: border-box;
1308
1307
  padding: var(--bds-space_xxs);
1309
1308
  }
1310
- .bds251Button-button.bds251Button---iconOnly > * {
1309
+ .bds260Button-button.bds260Button---iconOnly > * {
1311
1310
  inline-size: 100%;
1312
1311
  block-size: 100%;
1313
1312
  }
1314
- .bds251Button-button[href] {
1313
+ .bds260Button-button[href] {
1315
1314
  text-decoration: none;
1316
1315
  }
1317
- .bds251Button-button svg {
1316
+ .bds260Button-button svg {
1318
1317
  --icon__stroke: currentcolor;
1319
1318
  fill: currentcolor;
1320
1319
  color: currentcolor;
1321
1320
  flex-shrink: 0;
1322
1321
  }
1323
- .bds251Button-iconStart {
1322
+ .bds260Button-iconStart {
1324
1323
  display: flex;
1325
1324
  align-items: center;
1326
1325
  margin-inline-start: calc(var(--bds-space_s) * -1);
1327
1326
  transition: var(--bds-animation_transition);
1328
1327
  }
1329
- .bds251Button-iconEnd {
1328
+ .bds260Button-iconEnd {
1330
1329
  display: flex;
1331
1330
  align-items: center;
1332
1331
  margin-inline-end: calc(var(--bds-space_s) * -1);
1333
1332
  transition: var(--bds-animation_transition);
1334
1333
  }
1335
- .bds251Button-button.bds251Button---iconOnly .bds251Button-iconStart,
1336
- .bds251Button-button.bds251Button---iconOnly .bds251Button-iconEnd {
1334
+ .bds260Button-button.bds260Button---iconOnly .bds260Button-iconStart,
1335
+ .bds260Button-button.bds260Button---iconOnly .bds260Button-iconEnd {
1337
1336
  margin-inline: 0;
1338
1337
  }
1339
1338
  @media (hover: hover) and (pointer: fine) {
1340
- .bds251Button-button:hover .bds251Button-iconStart svg {
1339
+ .bds260Button-button:hover .bds260Button-iconStart svg {
1341
1340
  animation: fadeZoom 2s ease-out infinite;
1342
1341
  }
1343
- .bds251Button-button:hover .bds251Button-iconEnd svg {
1342
+ .bds260Button-button:hover .bds260Button-iconEnd svg {
1344
1343
  animation: fadeZoom 2s ease-out infinite;
1345
1344
  }
1346
1345
  }
1347
- .bds251Button-button:focus-visible {
1346
+ .bds260Button-button:focus-visible {
1348
1347
  outline: var(--bds-outline_default);
1349
1348
  outline-offset: var(--bds-outline_offset);
1350
1349
  }
1351
1350
  @media (hover: hover) and (pointer: fine) {
1352
- .bds251Button-button.bds251Button---default:hover {
1353
- --button_bg: var(--button_bg--hover, var(--bds-color_bg));
1354
- --button_text: var(--button_text--hover, var(--bds-color_interactive_on-bg));
1351
+ .bds260Button-button.bds260Button---default:hover {
1352
+ --button_bg--variant: var(--button_bg--hover, var(--bds-color_bg));
1353
+ --button_text--variant: var(--button_text--hover, var(--bds-color_interactive_on-bg));
1354
+ --button_border--variant: var(--button_border--hover, currentcolor);
1355
1355
  --button_pulse-color: var(--button_pulse-color--hover, var(--bds-color_interactive_on-bg));
1356
- --bdc_color: currentcolor;
1357
1356
  }
1358
1357
  }
1359
1358
  @media (hover: hover) and (pointer: fine) {
1360
- .bds251Button-button.bds251Button---outline:hover,
1361
- .bds251Button-button.bds251Button---ghost:hover {
1362
- --button_bg: var(--button_bg--outline-hover, var(--button_color));
1363
- --button_text: var(--button_text--outline-hover, var(--button_on-color));
1364
- --bdc_color: transparent;
1359
+ .bds260Button-button.bds260Button---outline:hover,
1360
+ .bds260Button-button.bds260Button---ghost:hover {
1361
+ --button_bg--variant: var(--button_bg--outline-hover, var(--button_color));
1362
+ --button_text--variant: var(--button_text--outline-hover, var(--button_on-color));
1363
+ --button_border--variant: var(--button_border--outline-hover, transparent);
1365
1364
  }
1366
1365
  }
1367
1366
  }
1368
1367
 
1369
1368
  /* src/components/interaction/Command/Command.module.css */
1370
- @layer boostdev.bds251Command-component {
1371
- .bds251Command-dialog {
1369
+ @layer boostdev.bds260Command-component {
1370
+ .bds260Command-dialog {
1372
1371
  padding: 0;
1373
1372
  border: none;
1374
1373
  border-radius: var(--bds-border_radius--m);
@@ -1378,11 +1377,11 @@
1378
1377
  overflow: visible;
1379
1378
  margin-block-start: 10vh;
1380
1379
  }
1381
- .bds251Command-dialog::backdrop {
1380
+ .bds260Command-dialog::backdrop {
1382
1381
  background-color: var(--color_backdrop, rgb(0 0 0 / 50%));
1383
1382
  backdrop-filter: blur(3px);
1384
1383
  }
1385
- .bds251Command-palette {
1384
+ .bds260Command-palette {
1386
1385
  display: flex;
1387
1386
  flex-direction: column;
1388
1387
  background-color: var(--command_color, var(--bds-color_bg));
@@ -1395,7 +1394,7 @@
1395
1394
  --bdc-outline_radius: var(--bds-border_radius--m);
1396
1395
  box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--command_shadow, var(--bds-shadow_xl));
1397
1396
  }
1398
- .bds251Command-searchRow {
1397
+ .bds260Command-searchRow {
1399
1398
  display: flex;
1400
1399
  align-items: center;
1401
1400
  gap: var(--bds-space_xs);
@@ -1403,13 +1402,13 @@
1403
1402
  border-block-end: 1px solid currentcolor;
1404
1403
  flex-shrink: 0;
1405
1404
  }
1406
- .bds251Command-searchIcon {
1405
+ .bds260Command-searchIcon {
1407
1406
  inline-size: 1.25rem;
1408
1407
  block-size: 1.25rem;
1409
1408
  color: var(--bds-color_on-bg);
1410
1409
  flex-shrink: 0;
1411
1410
  }
1412
- .bds251Command-search {
1411
+ .bds260Command-search {
1413
1412
  flex: 1;
1414
1413
  border: none;
1415
1414
  outline: none;
@@ -1419,10 +1418,10 @@
1419
1418
  background: transparent;
1420
1419
  min-inline-size: 0;
1421
1420
  }
1422
- .bds251Command-search::placeholder {
1421
+ .bds260Command-search::placeholder {
1423
1422
  color: var(--bds-color_on-bg);
1424
1423
  }
1425
- .bds251Command-escHint {
1424
+ .bds260Command-escHint {
1426
1425
  font-size: var(--bds-font_size--body--s);
1427
1426
  color: var(--bds-color_on-bg);
1428
1427
  border-radius: var(--bds-border_radius--xs);
@@ -1432,18 +1431,18 @@
1432
1431
  border: none;
1433
1432
  box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
1434
1433
  }
1435
- .bds251Command-list {
1434
+ .bds260Command-list {
1436
1435
  overflow-block: auto;
1437
1436
  list-style: none;
1438
1437
  margin: 0;
1439
1438
  padding: var(--bds-space_xs) 0;
1440
1439
  }
1441
- .bds251Command-groupList {
1440
+ .bds260Command-groupList {
1442
1441
  list-style: none;
1443
1442
  margin: 0;
1444
1443
  padding: 0;
1445
1444
  }
1446
- .bds251Command-group {
1445
+ .bds260Command-group {
1447
1446
  padding: var(--bds-space_xs) var(--bds-space_m);
1448
1447
  font-size: var(--bds-font_size--body--s);
1449
1448
  font-weight: var(--bds-font_weight--semibold);
@@ -1451,7 +1450,7 @@
1451
1450
  text-transform: uppercase;
1452
1451
  letter-spacing: 0.05em;
1453
1452
  }
1454
- .bds251Command-item {
1453
+ .bds260Command-item {
1455
1454
  display: flex;
1456
1455
  align-items: center;
1457
1456
  gap: var(--bds-space_s);
@@ -1459,19 +1458,19 @@
1459
1458
  cursor: pointer;
1460
1459
  transition: background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
1461
1460
  }
1462
- .bds251Command-itemActive {
1461
+ .bds260Command-itemActive {
1463
1462
  background-color: var(--command_item-bg--active, var(--bds-color_bg--subtle));
1464
1463
  }
1465
- .bds251Command-itemLabel {
1464
+ .bds260Command-itemLabel {
1466
1465
  flex: 1;
1467
1466
  font-size: var(--bds-font_size--body);
1468
1467
  color: var(--bds-color_on-bg);
1469
1468
  }
1470
- .bds251Command-itemDesc {
1469
+ .bds260Command-itemDesc {
1471
1470
  font-size: var(--bds-font_size--body--s);
1472
1471
  color: var(--bds-color_on-bg);
1473
1472
  }
1474
- .bds251Command-shortcut {
1473
+ .bds260Command-shortcut {
1475
1474
  font-size: var(--bds-font_size--body--s);
1476
1475
  color: var(--bds-color_on-bg);
1477
1476
  border-radius: var(--bds-border_radius--xs);
@@ -1480,7 +1479,7 @@
1480
1479
  border: none;
1481
1480
  box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
1482
1481
  }
1483
- .bds251Command-empty {
1482
+ .bds260Command-empty {
1484
1483
  padding: var(--bds-space_l) var(--bds-space_m);
1485
1484
  text-align: center;
1486
1485
  color: var(--bds-color_on-bg);
@@ -1489,8 +1488,8 @@
1489
1488
  }
1490
1489
 
1491
1490
  /* src/components/interaction/Dialog/Dialog.module.css */
1492
- @layer boostdev.bds251Dialog-component {
1493
- .bds251Dialog-dialog {
1491
+ @layer boostdev.bds260Dialog-component {
1492
+ .bds260Dialog-dialog {
1494
1493
  font-size: var(--bds-font_size--body--s);
1495
1494
  border: var(--dialog_border, none);
1496
1495
  --bdc_color: currentcolor;
@@ -1504,14 +1503,14 @@
1504
1503
  max-block-size: 90svh;
1505
1504
  overflow: visible;
1506
1505
  }
1507
- .bds251Dialog-dialogContent {
1506
+ .bds260Dialog-dialogContent {
1508
1507
  display: grid;
1509
1508
  gap: var(--bds-grid_gap);
1510
1509
  overflow-block: auto;
1511
1510
  min-block-size: 0;
1512
1511
  flex: 1;
1513
1512
  }
1514
- .bds251Dialog-closeButton {
1513
+ .bds260Dialog-closeButton {
1515
1514
  all: unset;
1516
1515
  position: absolute;
1517
1516
  inset-block-start: -1em;
@@ -1529,23 +1528,23 @@
1529
1528
  box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
1530
1529
  cursor: pointer;
1531
1530
  }
1532
- .bds251Dialog-closeButton:focus-visible {
1531
+ .bds260Dialog-closeButton:focus-visible {
1533
1532
  outline: var(--bds-outline_default);
1534
1533
  outline-offset: var(--bds-outline_offset);
1535
1534
  }
1536
- .bds251Dialog-closeButton svg {
1535
+ .bds260Dialog-closeButton svg {
1537
1536
  inline-size: 1.25em;
1538
1537
  block-size: 1.25em;
1539
1538
  }
1540
- .bds251Dialog-dialog::backdrop {
1539
+ .bds260Dialog-dialog::backdrop {
1541
1540
  background-color: var(--color_backdrop, rgb(0 0 0 / 50%));
1542
1541
  backdrop-filter: blur(3px);
1543
1542
  }
1544
1543
  }
1545
1544
 
1546
1545
  /* src/components/interaction/Drawer/Drawer.module.css */
1547
- @layer boostdev.bds251Drawer-component {
1548
- .bds251Drawer-drawer {
1546
+ @layer boostdev.bds260Drawer-component {
1547
+ .bds260Drawer-drawer {
1549
1548
  position: fixed;
1550
1549
  inset-block: 0;
1551
1550
  inset-inline: auto 0;
@@ -1568,22 +1567,22 @@
1568
1567
  display var(--bds-animation_transition-duration) var(--bds-animation_easing) allow-discrete,
1569
1568
  overlay var(--bds-animation_transition-duration) var(--bds-animation_easing) allow-discrete;
1570
1569
  }
1571
- .bds251Drawer---side_left.bds251Drawer-drawer {
1570
+ .bds260Drawer---side_left.bds260Drawer-drawer {
1572
1571
  inset-inline: 0 auto;
1573
1572
  translate: -100% 0;
1574
1573
  }
1575
- .bds251Drawer-drawer[open] {
1574
+ .bds260Drawer-drawer[open] {
1576
1575
  translate: 0 0;
1577
1576
  }
1578
1577
  @starting-style {
1579
- .bds251Drawer-drawer[open] {
1578
+ .bds260Drawer-drawer[open] {
1580
1579
  translate: 100% 0;
1581
1580
  }
1582
- .bds251Drawer---side_left.bds251Drawer-drawer[open] {
1581
+ .bds260Drawer---side_left.bds260Drawer-drawer[open] {
1583
1582
  translate: -100% 0;
1584
1583
  }
1585
1584
  }
1586
- .bds251Drawer-drawer::backdrop {
1585
+ .bds260Drawer-drawer::backdrop {
1587
1586
  background-color: var(--color_backdrop, rgb(0 0 0 / 50%));
1588
1587
  backdrop-filter: blur(3px);
1589
1588
  opacity: 0;
@@ -1592,15 +1591,15 @@
1592
1591
  display var(--bds-animation_transition-duration) var(--bds-animation_easing) allow-discrete,
1593
1592
  overlay var(--bds-animation_transition-duration) var(--bds-animation_easing) allow-discrete;
1594
1593
  }
1595
- .bds251Drawer-drawer[open]::backdrop {
1594
+ .bds260Drawer-drawer[open]::backdrop {
1596
1595
  opacity: 1;
1597
1596
  }
1598
1597
  @starting-style {
1599
- .bds251Drawer-drawer[open]::backdrop {
1598
+ .bds260Drawer-drawer[open]::backdrop {
1600
1599
  opacity: 0;
1601
1600
  }
1602
1601
  }
1603
- .bds251Drawer-header {
1602
+ .bds260Drawer-header {
1604
1603
  display: flex;
1605
1604
  align-items: center;
1606
1605
  justify-content: space-between;
@@ -1608,7 +1607,7 @@
1608
1607
  border-block-end: 1px solid currentcolor;
1609
1608
  flex-shrink: 0;
1610
1609
  }
1611
- .bds251Drawer-closeButton {
1610
+ .bds260Drawer-closeButton {
1612
1611
  all: unset;
1613
1612
  display: flex;
1614
1613
  align-items: center;
@@ -1619,20 +1618,20 @@
1619
1618
  cursor: pointer;
1620
1619
  transition: var(--bds-animation_transition);
1621
1620
  }
1622
- .bds251Drawer-closeButton svg {
1621
+ .bds260Drawer-closeButton svg {
1623
1622
  inline-size: 1.25rem;
1624
1623
  block-size: 1.25rem;
1625
1624
  }
1626
- .bds251Drawer-closeButton:focus-visible {
1625
+ .bds260Drawer-closeButton:focus-visible {
1627
1626
  outline: var(--bds-outline_default);
1628
1627
  outline-offset: var(--bds-outline_offset);
1629
1628
  }
1630
1629
  @media (hover: hover) and (pointer: fine) {
1631
- .bds251Drawer-closeButton:hover {
1630
+ .bds260Drawer-closeButton:hover {
1632
1631
  background-color: var(--drawer_close-bg--hover, var(--bds-color_bg--subtle));
1633
1632
  }
1634
1633
  }
1635
- .bds251Drawer-body {
1634
+ .bds260Drawer-body {
1636
1635
  flex: 1;
1637
1636
  overflow-block: auto;
1638
1637
  padding: var(--bds-space_l);
@@ -1640,20 +1639,20 @@
1640
1639
  flex-direction: column;
1641
1640
  }
1642
1641
  @media (prefers-reduced-motion: reduce) {
1643
- .bds251Drawer-drawer,
1644
- .bds251Drawer-drawer::backdrop {
1642
+ .bds260Drawer-drawer,
1643
+ .bds260Drawer-drawer::backdrop {
1645
1644
  transition: none;
1646
1645
  }
1647
1646
  }
1648
1647
  }
1649
1648
 
1650
1649
  /* src/components/interaction/DropdownMenu/DropdownMenu.module.css */
1651
- @layer boostdev.bds251DropdownMenu-component {
1652
- .bds251DropdownMenu-wrapper {
1650
+ @layer boostdev.bds260DropdownMenu-component {
1651
+ .bds260DropdownMenu-wrapper {
1653
1652
  position: relative;
1654
1653
  display: inline-flex;
1655
1654
  }
1656
- .bds251DropdownMenu-menu {
1655
+ .bds260DropdownMenu-menu {
1657
1656
  position: absolute;
1658
1657
  inset-block-start: calc(100% + var(--bds-space_xxs));
1659
1658
  z-index: var(--bds-z-index_dropdown);
@@ -1669,22 +1668,22 @@
1669
1668
  list-style: none;
1670
1669
  margin: 0;
1671
1670
  }
1672
- .bds251DropdownMenu-menu li {
1671
+ .bds260DropdownMenu-menu li {
1673
1672
  list-style: none;
1674
1673
  }
1675
- .bds251DropdownMenu---placement_bottom-start {
1674
+ .bds260DropdownMenu---placement_bottom-start {
1676
1675
  inset-inline-start: 0;
1677
1676
  }
1678
- .bds251DropdownMenu---placement_bottom-end {
1677
+ .bds260DropdownMenu---placement_bottom-end {
1679
1678
  inset-inline-end: 0;
1680
1679
  }
1681
- .bds251DropdownMenu-separator {
1680
+ .bds260DropdownMenu-separator {
1682
1681
  border: none;
1683
1682
  border-block-start: 1px solid currentcolor;
1684
1683
  margin: var(--bds-space_xxs) 0;
1685
1684
  opacity: 0.15;
1686
1685
  }
1687
- .bds251DropdownMenu-item {
1686
+ .bds260DropdownMenu-item {
1688
1687
  all: unset;
1689
1688
  display: flex;
1690
1689
  align-items: center;
@@ -1698,22 +1697,22 @@
1698
1697
  box-sizing: border-box;
1699
1698
  transition: var(--bds-animation_transition);
1700
1699
  }
1701
- .bds251DropdownMenu-item:disabled {
1700
+ .bds260DropdownMenu-item:disabled {
1702
1701
  opacity: 0.4;
1703
1702
  cursor: not-allowed;
1704
1703
  }
1705
- .bds251DropdownMenu-item:focus-visible {
1704
+ .bds260DropdownMenu-item:focus-visible {
1706
1705
  outline: var(--bds-outline_default);
1707
1706
  outline-offset: calc(var(--bds-outline_offset) * -1);
1708
1707
  border-radius: var(--bds-border_radius--xs);
1709
1708
  }
1710
1709
  @media (hover: hover) and (pointer: fine) {
1711
- .bds251DropdownMenu-item:not(:disabled):hover {
1710
+ .bds260DropdownMenu-item:not(:disabled):hover {
1712
1711
  background-color: var(--dropdown_item-bg--hover, var(--bds-color_bg--subtle));
1713
1712
  color: var(--dropdown_item-color--hover, var(--bds-color_interactive_on-bg));
1714
1713
  }
1715
1714
  }
1716
- .bds251DropdownMenu-icon {
1715
+ .bds260DropdownMenu-icon {
1717
1716
  display: flex;
1718
1717
  align-items: center;
1719
1718
  flex-shrink: 0;
@@ -1721,11 +1720,11 @@
1721
1720
  }
1722
1721
 
1723
1722
  /* src/components/interaction/Popover/Popover.module.css */
1724
- @layer boostdev.bds251Popover-component {
1725
- .bds251Popover-wrapper {
1723
+ @layer boostdev.bds260Popover-component {
1724
+ .bds260Popover-wrapper {
1726
1725
  display: inline-flex;
1727
1726
  }
1728
- .bds251Popover-panel {
1727
+ .bds260Popover-panel {
1729
1728
  position: fixed;
1730
1729
  inset: unset;
1731
1730
  margin: 0;
@@ -1744,7 +1743,7 @@
1744
1743
  color: var(--popover_on-color, var(--bds-color_on-bg));
1745
1744
  font-size: var(--bds-font_size--body);
1746
1745
  }
1747
- .bds251Popover-panel[data-placement=bottom] {
1746
+ .bds260Popover-panel[data-placement=bottom] {
1748
1747
  top: anchor(bottom);
1749
1748
  left: anchor(left);
1750
1749
  margin-block-start: var(--bds-space_xs, 8px);
@@ -1753,7 +1752,7 @@
1753
1752
  --popover-right,
1754
1753
  --popover-left;
1755
1754
  }
1756
- .bds251Popover-panel[data-placement=top] {
1755
+ .bds260Popover-panel[data-placement=top] {
1757
1756
  bottom: anchor(top);
1758
1757
  left: anchor(left);
1759
1758
  margin-block-end: var(--bds-space_xs, 8px);
@@ -1762,7 +1761,7 @@
1762
1761
  --popover-right,
1763
1762
  --popover-left;
1764
1763
  }
1765
- .bds251Popover-panel[data-placement=right] {
1764
+ .bds260Popover-panel[data-placement=right] {
1766
1765
  top: anchor(top);
1767
1766
  left: anchor(right);
1768
1767
  margin-inline-start: var(--bds-space_xs, 8px);
@@ -1771,7 +1770,7 @@
1771
1770
  --popover-bottom,
1772
1771
  --popover-top;
1773
1772
  }
1774
- .bds251Popover-panel[data-placement=left] {
1773
+ .bds260Popover-panel[data-placement=left] {
1775
1774
  top: anchor(top);
1776
1775
  right: anchor(left);
1777
1776
  margin-inline-end: var(--bds-space_xs, 8px);
@@ -1829,10 +1828,10 @@
1829
1828
  margin-block-end: var(--bds-space_xs, 8px);
1830
1829
  }
1831
1830
  @media (width <= 420px) {
1832
- .bds251Popover-panel[data-placement=bottom],
1833
- .bds251Popover-panel[data-placement=top],
1834
- .bds251Popover-panel[data-placement=left],
1835
- .bds251Popover-panel[data-placement=right] {
1831
+ .bds260Popover-panel[data-placement=bottom],
1832
+ .bds260Popover-panel[data-placement=top],
1833
+ .bds260Popover-panel[data-placement=left],
1834
+ .bds260Popover-panel[data-placement=right] {
1836
1835
  left: var(--bds-space_xs, 8px);
1837
1836
  right: var(--bds-space_xs, 8px);
1838
1837
  inline-size: 100%;
@@ -1841,13 +1840,13 @@
1841
1840
  }
1842
1841
  }
1843
1842
  @media (aspect-ratio >= 2/1) {
1844
- .bds251Popover-panel[data-placement=bottom] {
1843
+ .bds260Popover-panel[data-placement=bottom] {
1845
1844
  position-try-fallbacks:
1846
1845
  --popover-top,
1847
1846
  --popover-right,
1848
1847
  --popover-left;
1849
1848
  }
1850
- .bds251Popover-panel[data-placement=top] {
1849
+ .bds260Popover-panel[data-placement=top] {
1851
1850
  position-try-fallbacks:
1852
1851
  --popover-bottom,
1853
1852
  --popover-right,
@@ -1857,24 +1856,24 @@
1857
1856
  }
1858
1857
 
1859
1858
  /* src/components/interaction/Rating/Rating.module.css */
1860
- @layer boostdev.bds251Rating-component {
1861
- .bds251Rating-rating {
1859
+ @layer boostdev.bds260Rating-component {
1860
+ .bds260Rating-rating {
1862
1861
  display: inline-flex;
1863
1862
  gap: var(--bds-space_xxxs);
1864
1863
  color: var(--rating_color, var(--bds-color_bg));
1865
1864
  }
1866
- .bds251Rating-star {
1865
+ .bds260Rating-star {
1867
1866
  width: 1.5em;
1868
1867
  height: 1.5em;
1869
1868
  }
1870
- .bds251Rating---filled {
1869
+ .bds260Rating---filled {
1871
1870
  color: var(--rating_color--filled, var(--bds-color_warning));
1872
1871
  }
1873
1872
  }
1874
1873
 
1875
1874
  /* src/components/interaction/Toast/Toast.module.css */
1876
- @layer boostdev.bds251Toast-component {
1877
- .bds251Toast-toastContainer {
1875
+ @layer boostdev.bds260Toast-component {
1876
+ .bds260Toast-toastContainer {
1878
1877
  position: fixed;
1879
1878
  inset: unset;
1880
1879
  inset-block-end: var(--bds-space_xl);
@@ -1886,10 +1885,10 @@
1886
1885
  padding: 0;
1887
1886
  background: transparent;
1888
1887
  }
1889
- .bds251Toast-toast {
1888
+ .bds260Toast-toast {
1890
1889
  padding: var(--bds-space_m) var(--bds-space_l);
1891
- background-color: var(--toast_color, var(--bds-color_bg));
1892
- color: var(--toast_on-color, var(--bds-color_on-bg));
1890
+ background-color: var(--toast_color, var(--toast_color--variant, var(--bds-color_bg)));
1891
+ color: var(--toast_on-color, var(--toast_on-color--variant, var(--bds-color_on-bg)));
1893
1892
  border-radius: var(--bds-border_radius--s);
1894
1893
  box-shadow: var(--bds-shadow_s);
1895
1894
  display: flex;
@@ -1898,26 +1897,26 @@
1898
1897
  min-inline-size: 300px;
1899
1898
  animation: slideIn var(--bds-animation_duration--fast) var(--bds-animation_easing);
1900
1899
  }
1901
- .bds251Toast-toast.bds251Toast---variant_success {
1902
- --toast_color: var(--bds-color_success);
1903
- --toast_on-color: var(--bds-color_on-success);
1900
+ .bds260Toast-toast.bds260Toast---variant_success {
1901
+ --toast_color--variant: var(--toast_color--success, var(--bds-color_success));
1902
+ --toast_on-color--variant: var(--toast_on-color--success, var(--bds-color_on-success));
1904
1903
  }
1905
- .bds251Toast-toast.bds251Toast---variant_warning {
1906
- --toast_color: var(--bds-color_warning);
1907
- --toast_on-color: var(--bds-color_on-warning);
1904
+ .bds260Toast-toast.bds260Toast---variant_warning {
1905
+ --toast_color--variant: var(--toast_color--warning, var(--bds-color_warning));
1906
+ --toast_on-color--variant: var(--toast_on-color--warning, var(--bds-color_on-warning));
1908
1907
  }
1909
- .bds251Toast-toast.bds251Toast---variant_info {
1910
- --toast_color: var(--bds-color_bg--subtle);
1911
- --toast_on-color: var(--bds-color_on-bg--subtle);
1908
+ .bds260Toast-toast.bds260Toast---variant_info {
1909
+ --toast_color--variant: var(--toast_color--info, var(--bds-color_bg--subtle));
1910
+ --toast_on-color--variant: var(--toast_on-color--info, var(--bds-color_on-bg--subtle));
1912
1911
  }
1913
- .bds251Toast-toast.bds251Toast---variant_error {
1914
- --toast_color: var(--bds-color_error);
1915
- --toast_on-color: var(--bds-color_on-error);
1912
+ .bds260Toast-toast.bds260Toast---variant_error {
1913
+ --toast_color--variant: var(--toast_color--error, var(--bds-color_error));
1914
+ --toast_on-color--variant: var(--toast_on-color--error, var(--bds-color_on-error));
1916
1915
  }
1917
- .bds251Toast-message {
1916
+ .bds260Toast-message {
1918
1917
  flex: 1;
1919
1918
  }
1920
- .bds251Toast-closeButton {
1919
+ .bds260Toast-closeButton {
1921
1920
  display: flex;
1922
1921
  align-items: center;
1923
1922
  justify-content: center;
@@ -1930,7 +1929,7 @@
1930
1929
  cursor: pointer;
1931
1930
  color: var(--toast_on-color);
1932
1931
  }
1933
- .bds251Toast-closeButton svg {
1932
+ .bds260Toast-closeButton svg {
1934
1933
  inline-size: 1rem;
1935
1934
  block-size: 1rem;
1936
1935
  }
@@ -1947,18 +1946,18 @@
1947
1946
  }
1948
1947
 
1949
1948
  /* src/components/interaction/form/Checkbox/Checkbox.module.css */
1950
- @layer boostdev.bds251Checkbox-component {
1951
- .bds251Checkbox-checkboxGroup {
1949
+ @layer boostdev.bds260Checkbox-component {
1950
+ .bds260Checkbox-checkboxGroup {
1952
1951
  --inputSize: calc(var(--bds-space_s) * 2);
1953
1952
  display: flex;
1954
1953
  flex-direction: column;
1955
1954
  }
1956
- .bds251Checkbox-inputWrapper {
1955
+ .bds260Checkbox-inputWrapper {
1957
1956
  display: flex;
1958
1957
  align-items: stretch;
1959
1958
  gap: var(--bds-space_xs);
1960
1959
  }
1961
- .bds251Checkbox-checkbox {
1960
+ .bds260Checkbox-checkbox {
1962
1961
  margin-block-start: 0.25em;
1963
1962
  inline-size: var(--inputSize);
1964
1963
  block-size: var(--inputSize);
@@ -1974,11 +1973,11 @@
1974
1973
  position: relative;
1975
1974
  transition: --bdc_color 0.3s ease, background-color 0.3s ease;
1976
1975
  }
1977
- .bds251Checkbox-checkbox:checked {
1976
+ .bds260Checkbox-checkbox:checked {
1978
1977
  background-color: var(--checkbox_color-active, var(--bdc-color_active));
1979
1978
  --bdc_color: var(--checkbox_color-active, var(--bdc-color_active));
1980
1979
  }
1981
- .bds251Checkbox-checkbox:checked::after {
1980
+ .bds260Checkbox-checkbox:checked::after {
1982
1981
  content: "";
1983
1982
  position: absolute;
1984
1983
  inset-inline-start: 0.6em;
@@ -1989,33 +1988,33 @@
1989
1988
  border-width: 0 2px 2px 0;
1990
1989
  transform: rotate(45deg);
1991
1990
  }
1992
- .bds251Checkbox-checkbox:focus {
1991
+ .bds260Checkbox-checkbox:focus {
1993
1992
  --bdc_color: var(--bdc_color--focus);
1994
1993
  }
1995
- .bds251Checkbox-checkbox:focus-visible {
1994
+ .bds260Checkbox-checkbox:focus-visible {
1996
1995
  outline: var(--bds-outline_default);
1997
1996
  outline-offset: var(--bds-outline_offset);
1998
1997
  }
1999
- .bds251Checkbox-checkboxError {
1998
+ .bds260Checkbox-checkboxError {
2000
1999
  --bdc_color: var(--bdc_color--error);
2001
2000
  }
2002
2001
  }
2003
2002
 
2004
2003
  /* src/components/interaction/form/atoms/Message.module.css */
2005
- @layer boostdev.bds251Message-component {
2006
- .bds251Message-error,
2007
- .bds251Message-hint {
2004
+ @layer boostdev.bds260Message-component {
2005
+ .bds260Message-error,
2006
+ .bds260Message-hint {
2008
2007
  font-size: var(--bds-font_size--body--s);
2009
2008
  margin-inline-start: var(--labelPosition);
2010
2009
  }
2011
- .bds251Message-error {
2010
+ .bds260Message-error {
2012
2011
  color: var(--bds-color_error_on-bg);
2013
2012
  }
2014
2013
  }
2015
2014
 
2016
2015
  /* src/components/interaction/form/atoms/Label.module.css */
2017
- @layer boostdev.bds251Label-component {
2018
- .bds251Label-label {
2016
+ @layer boostdev.bds260Label-component {
2017
+ .bds260Label-label {
2019
2018
  display: flex;
2020
2019
  align-items: center;
2021
2020
  font-family: var(--bds-font_family--body);
@@ -2025,8 +2024,8 @@
2025
2024
  }
2026
2025
 
2027
2026
  /* src/components/interaction/form/atoms/InputContainer.module.css */
2028
- @layer boostdev.bds251InputContainer-component {
2029
- .bds251InputContainer-container {
2027
+ @layer boostdev.bds260InputContainer-component {
2028
+ .bds260InputContainer-container {
2030
2029
  --labelPosition: calc(var(--inputSize) + var(--bds-space_m));
2031
2030
  display: flex;
2032
2031
  flex-direction: column;
@@ -2035,8 +2034,8 @@
2035
2034
  }
2036
2035
 
2037
2036
  /* src/components/interaction/form/CheckboxGroup/CheckboxGroup.module.css */
2038
- @layer boostdev.bds251CheckboxGroup-component {
2039
- .bds251CheckboxGroup-group {
2037
+ @layer boostdev.bds260CheckboxGroup-component {
2038
+ .bds260CheckboxGroup-group {
2040
2039
  border: none;
2041
2040
  padding: 0;
2042
2041
  margin: 0;
@@ -2044,7 +2043,7 @@
2044
2043
  flex-direction: column;
2045
2044
  gap: var(--bds-space_xs);
2046
2045
  }
2047
- .bds251CheckboxGroup-legend {
2046
+ .bds260CheckboxGroup-legend {
2048
2047
  font-family: var(--bds-font_family--body);
2049
2048
  font-size: var(--bds-font_size--body--s);
2050
2049
  font-weight: var(--bds-font_weight--medium);
@@ -2052,10 +2051,10 @@
2052
2051
  padding: 0;
2053
2052
  margin-block-end: var(--bds-space_xs);
2054
2053
  }
2055
- .bds251CheckboxGroup-required {
2054
+ .bds260CheckboxGroup-required {
2056
2055
  color: var(--bds-color_error);
2057
2056
  }
2058
- .bds251CheckboxGroup-items {
2057
+ .bds260CheckboxGroup-items {
2059
2058
  display: flex;
2060
2059
  flex-direction: column;
2061
2060
  gap: var(--bds-space_xs);
@@ -2063,17 +2062,17 @@
2063
2062
  }
2064
2063
 
2065
2064
  /* src/components/interaction/form/Combobox/Combobox.module.css */
2066
- @layer boostdev.bds251Combobox-component {
2067
- .bds251Combobox-formGroup {
2065
+ @layer boostdev.bds260Combobox-component {
2066
+ .bds260Combobox-formGroup {
2068
2067
  display: flex;
2069
2068
  flex-direction: column;
2070
2069
  }
2071
- .bds251Combobox-inputWrapper {
2070
+ .bds260Combobox-inputWrapper {
2072
2071
  position: relative;
2073
2072
  display: flex;
2074
2073
  align-items: center;
2075
2074
  }
2076
- .bds251Combobox-input {
2075
+ .bds260Combobox-input {
2077
2076
  appearance: none;
2078
2077
  inline-size: 100%;
2079
2078
  font-family: var(--bds-font_family--body);
@@ -2089,21 +2088,21 @@
2089
2088
  color: var(--combobox_color, var(--bds-color_on-bg));
2090
2089
  transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing), background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
2091
2090
  }
2092
- .bds251Combobox-input:focus {
2091
+ .bds260Combobox-input:focus {
2093
2092
  --bdc_color: var(--bdc_color--focus);
2094
2093
  }
2095
- .bds251Combobox-input:focus-visible {
2094
+ .bds260Combobox-input:focus-visible {
2096
2095
  outline: var(--bds-outline_default);
2097
2096
  outline-offset: var(--bds-outline_offset);
2098
2097
  }
2099
- .bds251Combobox-input:disabled {
2098
+ .bds260Combobox-input:disabled {
2100
2099
  opacity: 0.5;
2101
2100
  cursor: not-allowed;
2102
2101
  }
2103
- .bds251Combobox-inputError {
2102
+ .bds260Combobox-inputError {
2104
2103
  --bdc_color: var(--bdc_color--error);
2105
2104
  }
2106
- .bds251Combobox-chevron {
2105
+ .bds260Combobox-chevron {
2107
2106
  position: absolute;
2108
2107
  inset-inline-end: var(--bds-space_s);
2109
2108
  display: flex;
@@ -2111,11 +2110,11 @@
2111
2110
  pointer-events: none;
2112
2111
  color: var(--combobox_color, var(--bds-color_on-bg));
2113
2112
  }
2114
- .bds251Combobox-chevron svg {
2113
+ .bds260Combobox-chevron svg {
2115
2114
  inline-size: 1rem;
2116
2115
  block-size: 1rem;
2117
2116
  }
2118
- .bds251Combobox-listbox {
2117
+ .bds260Combobox-listbox {
2119
2118
  position: absolute;
2120
2119
  inset-block-start: calc(100% + var(--bds-space_xxs));
2121
2120
  inset-inline: 0;
@@ -2133,7 +2132,7 @@
2133
2132
  color: var(--combobox_on-color, var(--bds-color_on-bg));
2134
2133
  box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--combobox_listbox-shadow, var(--bds-shadow_m));
2135
2134
  }
2136
- .bds251Combobox-option {
2135
+ .bds260Combobox-option {
2137
2136
  display: flex;
2138
2137
  align-items: center;
2139
2138
  padding: var(--bds-space_xs) var(--bds-space_m);
@@ -2142,33 +2141,33 @@
2142
2141
  cursor: pointer;
2143
2142
  transition: var(--bds-animation_transition);
2144
2143
  }
2145
- .bds251Combobox-option.bds251Combobox---highlighted {
2144
+ .bds260Combobox-option.bds260Combobox---highlighted {
2146
2145
  background-color: var(--combobox_option-bg--highlighted, var(--bds-color_bg--subtle));
2147
2146
  color: var(--combobox_option-color--highlighted, var(--bds-color_interactive_on-bg));
2148
2147
  }
2149
- .bds251Combobox-option.bds251Combobox---selected {
2148
+ .bds260Combobox-option.bds260Combobox---selected {
2150
2149
  font-weight: var(--bds-font_weight--semibold);
2151
2150
  }
2152
- .bds251Combobox-option.bds251Combobox---disabled {
2151
+ .bds260Combobox-option.bds260Combobox---disabled {
2153
2152
  opacity: 0.4;
2154
2153
  cursor: not-allowed;
2155
2154
  }
2156
2155
  }
2157
2156
 
2158
2157
  /* src/components/interaction/form/FileInput/FileInput.module.css */
2159
- @layer boostdev.bds251FileInput-component {
2160
- .bds251FileInput-formGroup {
2158
+ @layer boostdev.bds260FileInput-component {
2159
+ .bds260FileInput-formGroup {
2161
2160
  display: flex;
2162
2161
  flex-direction: column;
2163
2162
  }
2164
- .bds251FileInput-fieldLabel {
2163
+ .bds260FileInput-fieldLabel {
2165
2164
  display: flex;
2166
2165
  align-items: center;
2167
2166
  font-family: var(--bds-font_family--body);
2168
2167
  color: var(--bds-color_on-bg);
2169
2168
  margin-block-end: var(--bds-space_xs);
2170
2169
  }
2171
- .bds251FileInput-dropZone {
2170
+ .bds260FileInput-dropZone {
2172
2171
  display: flex;
2173
2172
  flex-direction: column;
2174
2173
  align-items: center;
@@ -2182,40 +2181,40 @@
2182
2181
  text-align: center;
2183
2182
  transition: var(--bds-animation_transition);
2184
2183
  }
2185
- .bds251FileInput-dropZone:focus-within {
2184
+ .bds260FileInput-dropZone:focus-within {
2186
2185
  outline: var(--bds-outline_default);
2187
2186
  outline-offset: var(--bds-outline_offset);
2188
2187
  border-color: var(--fileInput_border-color, currentcolor);
2189
2188
  }
2190
- .bds251FileInput-isDragging {
2189
+ .bds260FileInput-isDragging {
2191
2190
  border-color: currentcolor;
2192
2191
  background-color: rgb(from currentcolor r g b / 8%);
2193
2192
  }
2194
- .bds251FileInput-hasError {
2193
+ .bds260FileInput-hasError {
2195
2194
  border-color: var(--bds-color_error);
2196
2195
  }
2197
- .bds251FileInput-isDisabled {
2196
+ .bds260FileInput-isDisabled {
2198
2197
  opacity: 0.5;
2199
2198
  cursor: not-allowed;
2200
2199
  }
2201
- .bds251FileInput-icon {
2200
+ .bds260FileInput-icon {
2202
2201
  inline-size: 2rem;
2203
2202
  block-size: 2rem;
2204
2203
  flex-shrink: 0;
2205
2204
  }
2206
- .bds251FileInput-prompt {
2205
+ .bds260FileInput-prompt {
2207
2206
  font-size: var(--bds-font_size--body);
2208
2207
  color: var(--bds-color_on-bg);
2209
2208
  }
2210
- .bds251FileInput-prompt strong {
2209
+ .bds260FileInput-prompt strong {
2211
2210
  color: var(--bds-color_interactive_on-bg);
2212
2211
  font-weight: var(--bds-font_weight--semibold);
2213
2212
  }
2214
- .bds251FileInput-acceptHint {
2213
+ .bds260FileInput-acceptHint {
2215
2214
  font-size: var(--bds-font_size--body--s);
2216
2215
  color: var(--bds-color_on-bg);
2217
2216
  }
2218
- .bds251FileInput-hiddenInput {
2217
+ .bds260FileInput-hiddenInput {
2219
2218
  position: absolute;
2220
2219
  inline-size: 1px;
2221
2220
  block-size: 1px;
@@ -2225,7 +2224,7 @@
2225
2224
  border: 0;
2226
2225
  }
2227
2226
  @media (hover: hover) and (pointer: fine) {
2228
- .bds251FileInput-dropZone:not(.bds251FileInput-isDisabled):hover {
2227
+ .bds260FileInput-dropZone:not(.bds260FileInput-isDisabled):hover {
2229
2228
  border-color: var(--fileInput_border-color--hover, var(--bds-color_interactive));
2230
2229
  background-color: var(--fileInput_bg--hover, rgb(from var(--bds-color_interactive) r g b / 4%));
2231
2230
  }
@@ -2233,13 +2232,13 @@
2233
2232
  }
2234
2233
 
2235
2234
  /* src/components/interaction/form/FormInput/FormInput.module.css */
2236
- @layer boostdev.bds251FormInput-component {
2237
- .bds251FormInput-formGroup {
2235
+ @layer boostdev.bds260FormInput-component {
2236
+ .bds260FormInput-formGroup {
2238
2237
  --labelPosition: 0;
2239
2238
  display: flex;
2240
2239
  flex-direction: column;
2241
2240
  }
2242
- .bds251FormInput-input {
2241
+ .bds260FormInput-input {
2243
2242
  font-family: var(--bds-font_family--body);
2244
2243
  font-size: var(--bds-font_size--body);
2245
2244
  padding: var(--bds-space_s);
@@ -2252,25 +2251,25 @@
2252
2251
  background-color: var(--input_color_bg, var(--bds-color_bg));
2253
2252
  transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing), background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
2254
2253
  }
2255
- .bds251FormInput-input:focus {
2254
+ .bds260FormInput-input:focus {
2256
2255
  --bdc_color: var(--bdc_color--focus);
2257
2256
  }
2258
- .bds251FormInput-input:focus-visible {
2257
+ .bds260FormInput-input:focus-visible {
2259
2258
  outline: var(--bds-outline_default);
2260
2259
  outline-offset: var(--bds-outline_offset);
2261
2260
  }
2262
- .bds251FormInput-inputError {
2261
+ .bds260FormInput-inputError {
2263
2262
  --bdc_color: var(--bdc_color--error);
2264
2263
  }
2265
2264
  }
2266
2265
 
2267
2266
  /* src/components/interaction/form/NumberInput/NumberInput.module.css */
2268
- @layer boostdev.bds251NumberInput-component {
2269
- .bds251NumberInput-formGroup {
2267
+ @layer boostdev.bds260NumberInput-component {
2268
+ .bds260NumberInput-formGroup {
2270
2269
  display: flex;
2271
2270
  flex-direction: column;
2272
2271
  }
2273
- .bds251NumberInput-inputRow {
2272
+ .bds260NumberInput-inputRow {
2274
2273
  display: flex;
2275
2274
  align-items: stretch;
2276
2275
  border: var(--numberInput_border, none);
@@ -2282,14 +2281,14 @@
2282
2281
  overflow: hidden;
2283
2282
  transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing);
2284
2283
  }
2285
- .bds251NumberInput-inputRow:focus-within {
2284
+ .bds260NumberInput-inputRow:focus-within {
2286
2285
  --bdc_color: var(--bdc_color--focus);
2287
2286
  }
2288
- .bds251NumberInput-inputRow:focus-within:has(:focus-visible) {
2287
+ .bds260NumberInput-inputRow:focus-within:has(:focus-visible) {
2289
2288
  outline: var(--bds-outline_default);
2290
2289
  outline-offset: var(--bds-outline_offset);
2291
2290
  }
2292
- .bds251NumberInput-input {
2291
+ .bds260NumberInput-input {
2293
2292
  flex: 1;
2294
2293
  border: none;
2295
2294
  outline: none;
@@ -2302,14 +2301,14 @@
2302
2301
  min-inline-size: 0;
2303
2302
  appearance: textfield;
2304
2303
  }
2305
- .bds251NumberInput-input::-webkit-inner-spin-button,
2306
- .bds251NumberInput-input::-webkit-outer-spin-button {
2304
+ .bds260NumberInput-input::-webkit-inner-spin-button,
2305
+ .bds260NumberInput-input::-webkit-outer-spin-button {
2307
2306
  appearance: none;
2308
2307
  }
2309
- .bds251NumberInput-inputError {
2308
+ .bds260NumberInput-inputError {
2310
2309
  --bdc_color: var(--bdc_color--error);
2311
2310
  }
2312
- .bds251NumberInput-stepper {
2311
+ .bds260NumberInput-stepper {
2313
2312
  all: unset;
2314
2313
  display: flex;
2315
2314
  align-items: center;
@@ -2322,25 +2321,25 @@
2322
2321
  transition: var(--bds-animation_transition);
2323
2322
  flex-shrink: 0;
2324
2323
  }
2325
- .bds251NumberInput-stepper svg {
2324
+ .bds260NumberInput-stepper svg {
2326
2325
  width: 1rem;
2327
2326
  height: 1rem;
2328
2327
  color: var(--numberInput_stepper-color, var(--bds-color_interactive));
2329
2328
  }
2330
- .bds251NumberInput-stepper:first-child {
2329
+ .bds260NumberInput-stepper:first-child {
2331
2330
  border-start-start-radius: var(--_radius);
2332
2331
  border-end-start-radius: var(--_radius);
2333
2332
  }
2334
- .bds251NumberInput-stepper:last-child {
2333
+ .bds260NumberInput-stepper:last-child {
2335
2334
  border-start-end-radius: var(--_radius);
2336
2335
  border-end-end-radius: var(--_radius);
2337
2336
  }
2338
- .bds251NumberInput-stepper:disabled {
2337
+ .bds260NumberInput-stepper:disabled {
2339
2338
  opacity: 0.4;
2340
2339
  cursor: not-allowed;
2341
2340
  }
2342
2341
  @media (hover: hover) and (pointer: fine) {
2343
- .bds251NumberInput-stepper:not(:disabled):hover {
2342
+ .bds260NumberInput-stepper:not(:disabled):hover {
2344
2343
  background-color: var(--numberInput_stepper-bg--hover, var(--bds-color_bg--subtle));
2345
2344
  opacity: var(--numberInput_stepper-opacity--hover, 0.7);
2346
2345
  }
@@ -2348,30 +2347,30 @@
2348
2347
  }
2349
2348
 
2350
2349
  /* src/components/interaction/form/Radio/Radio.module.css */
2351
- @layer boostdev.bds251Radio-component {
2352
- .bds251Radio-radioGroup {
2350
+ @layer boostdev.bds260Radio-component {
2351
+ .bds260Radio-radioGroup {
2353
2352
  --inputSize: calc(var(--bds-space_s) * 2);
2354
2353
  --labelPosition: calc(var(--inputSize) + var(--bds-space_m));
2355
2354
  display: flex;
2356
2355
  flex-direction: column;
2357
2356
  }
2358
- .bds251Radio-inputWrapper {
2357
+ .bds260Radio-inputWrapper {
2359
2358
  display: flex;
2360
2359
  align-items: flex-start;
2361
2360
  gap: var(--bds-space_xs);
2362
2361
  }
2363
- .bds251Radio-textWrapper {
2362
+ .bds260Radio-textWrapper {
2364
2363
  display: flex;
2365
2364
  flex-direction: column;
2366
2365
  gap: var(--bds-space_xxxs);
2367
2366
  padding-block-start: var(--bds-space_xxxs);
2368
2367
  }
2369
- .bds251Radio-description {
2368
+ .bds260Radio-description {
2370
2369
  font-size: var(--bds-font_size--body--s);
2371
2370
  color: var(--radio_description-color, var(--bds-color_on-bg--subtle));
2372
2371
  line-height: var(--bds-font_line-height--body);
2373
2372
  }
2374
- .bds251Radio-radio {
2373
+ .bds260Radio-radio {
2375
2374
  flex-shrink: 0;
2376
2375
  margin-block-start: 0.2em;
2377
2376
  inline-size: var(--inputSize);
@@ -2388,7 +2387,7 @@
2388
2387
  position: relative;
2389
2388
  transition: --bdc_color 0.2s ease, background-color 0.2s ease;
2390
2389
  }
2391
- .bds251Radio-radio:checked {
2390
+ .bds260Radio-radio:checked {
2392
2391
  background:
2393
2392
  radial-gradient(
2394
2393
  circle,
@@ -2396,21 +2395,21 @@
2396
2395
  var(--radio_color_bg, var(--bds-color_bg)) 42%);
2397
2396
  --bdc_color: var(--radio_color-active, var(--bdc-color_active));
2398
2397
  }
2399
- .bds251Radio-radio:focus {
2398
+ .bds260Radio-radio:focus {
2400
2399
  --bdc_color: var(--bdc_color--focus);
2401
2400
  }
2402
- .bds251Radio-radio:focus-visible {
2401
+ .bds260Radio-radio:focus-visible {
2403
2402
  outline: var(--bds-outline_default);
2404
2403
  outline-offset: var(--bds-outline_offset);
2405
2404
  }
2406
- .bds251Radio-radioError {
2405
+ .bds260Radio-radioError {
2407
2406
  --bdc_color: var(--bdc_color--error);
2408
2407
  }
2409
2408
  }
2410
2409
 
2411
2410
  /* src/components/interaction/form/RadioGroup/RadioGroup.module.css */
2412
- @layer boostdev.bds251RadioGroup-component {
2413
- .bds251RadioGroup-group {
2411
+ @layer boostdev.bds260RadioGroup-component {
2412
+ .bds260RadioGroup-group {
2414
2413
  border: none;
2415
2414
  padding: 0;
2416
2415
  margin: 0;
@@ -2418,7 +2417,7 @@
2418
2417
  flex-direction: column;
2419
2418
  gap: var(--bds-space_xs);
2420
2419
  }
2421
- .bds251RadioGroup-legend {
2420
+ .bds260RadioGroup-legend {
2422
2421
  font-family: var(--bds-font_family--body);
2423
2422
  font-size: var(--bds-font_size--body--s);
2424
2423
  font-weight: var(--bds-font_weight--medium);
@@ -2426,10 +2425,10 @@
2426
2425
  padding: 0;
2427
2426
  margin-block-end: var(--bds-space_xs);
2428
2427
  }
2429
- .bds251RadioGroup-required {
2428
+ .bds260RadioGroup-required {
2430
2429
  color: var(--bds-color_error);
2431
2430
  }
2432
- .bds251RadioGroup-items {
2431
+ .bds260RadioGroup-items {
2433
2432
  display: flex;
2434
2433
  flex-direction: column;
2435
2434
  gap: var(--bds-space_xs);
@@ -2437,8 +2436,8 @@
2437
2436
  }
2438
2437
 
2439
2438
  /* src/components/interaction/form/SegmentedControl/SegmentedControl.module.css */
2440
- @layer boostdev.bds251SegmentedControl-component {
2441
- .bds251SegmentedControl-control {
2439
+ @layer boostdev.bds260SegmentedControl-component {
2440
+ .bds260SegmentedControl-control {
2442
2441
  position: relative;
2443
2442
  display: inline-grid;
2444
2443
  grid-auto-flow: column;
@@ -2448,7 +2447,7 @@
2448
2447
  border-radius: var(--control_radius, var(--bds-border_radius--full));
2449
2448
  gap: 0;
2450
2449
  }
2451
- .bds251SegmentedControl-thumb {
2450
+ .bds260SegmentedControl-thumb {
2452
2451
  position: absolute;
2453
2452
  inset-block: var(--bds-space_xxxs);
2454
2453
  inset-inline-start: var(--bds-space_xxxs);
@@ -2460,7 +2459,7 @@
2460
2459
  transform: translateX(calc(var(--control_selected-index, 0) * 100%));
2461
2460
  transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
2462
2461
  }
2463
- .bds251SegmentedControl-indicator {
2462
+ .bds260SegmentedControl-indicator {
2464
2463
  position: absolute;
2465
2464
  inset-block: var(--bds-space_xxxs);
2466
2465
  inset-inline-start: var(--bds-space_xxxs);
@@ -2472,7 +2471,7 @@
2472
2471
  transform: translateX(calc(var(--control_selected-index, 0) * 100%));
2473
2472
  transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
2474
2473
  }
2475
- .bds251SegmentedControl-item {
2474
+ .bds260SegmentedControl-item {
2476
2475
  position: relative;
2477
2476
  z-index: 1;
2478
2477
  display: flex;
@@ -2493,69 +2492,69 @@
2493
2492
  border: none;
2494
2493
  outline: none;
2495
2494
  }
2496
- .bds251SegmentedControl-item:focus-visible {
2495
+ .bds260SegmentedControl-item:focus-visible {
2497
2496
  outline: var(--bds-outline_default);
2498
2497
  outline-offset: calc(var(--bds-outline_offset) * -1);
2499
2498
  border-radius: var(--control_thumb-radius, var(--bds-border_radius--full));
2500
2499
  }
2501
- .bds251SegmentedControl-item.bds251SegmentedControl---active {
2500
+ .bds260SegmentedControl-item.bds260SegmentedControl---active {
2502
2501
  color: var(--control_label-color--active, var(--bds-color_on-interactive));
2503
2502
  }
2504
- .bds251SegmentedControl-item.bds251SegmentedControl---disabled {
2503
+ .bds260SegmentedControl-item.bds260SegmentedControl---disabled {
2505
2504
  opacity: 0.5;
2506
2505
  cursor: not-allowed;
2507
2506
  pointer-events: none;
2508
2507
  }
2509
- .bds251SegmentedControl-control.bds251SegmentedControl---size_small .bds251SegmentedControl-item {
2508
+ .bds260SegmentedControl-control.bds260SegmentedControl---size_small .bds260SegmentedControl-item {
2510
2509
  padding: var(--bds-space_xxs) var(--bds-space_s);
2511
2510
  font-size: var(--bds-font_size--body--s);
2512
2511
  }
2513
- .bds251SegmentedControl-control.bds251SegmentedControl---size_large .bds251SegmentedControl-item {
2512
+ .bds260SegmentedControl-control.bds260SegmentedControl---size_large .bds260SegmentedControl-item {
2514
2513
  padding: var(--bds-space_s) var(--bds-space_m);
2515
2514
  white-space: normal;
2516
2515
  text-align: center;
2517
2516
  }
2518
- .bds251SegmentedControl-control.bds251SegmentedControl---variant_outline {
2517
+ .bds260SegmentedControl-control.bds260SegmentedControl---variant_outline {
2519
2518
  --control_label-color--active: var(--bds-color_interactive);
2520
2519
  }
2521
- .bds251SegmentedControl-control.bds251SegmentedControl---variant_outline .bds251SegmentedControl-thumb {
2520
+ .bds260SegmentedControl-control.bds260SegmentedControl---variant_outline .bds260SegmentedControl-thumb {
2522
2521
  display: none;
2523
2522
  }
2524
- .bds251SegmentedControl-control.bds251SegmentedControl---variant_outline .bds251SegmentedControl-item {
2523
+ .bds260SegmentedControl-control.bds260SegmentedControl---variant_outline .bds260SegmentedControl-item {
2525
2524
  background-color: var(--control_item-bg, transparent);
2526
2525
  }
2527
- .bds251SegmentedControl-control.bds251SegmentedControl---variant_outline .bds251SegmentedControl-item.bds251SegmentedControl---active {
2526
+ .bds260SegmentedControl-control.bds260SegmentedControl---variant_outline .bds260SegmentedControl-item.bds260SegmentedControl---active {
2528
2527
  background-color: var(--control_item-bg--active, var(--bds-color_bg));
2529
2528
  }
2530
- .bds251SegmentedControl-control.bds251SegmentedControl---variant_outline .bds251SegmentedControl-indicator {
2529
+ .bds260SegmentedControl-control.bds260SegmentedControl---variant_outline .bds260SegmentedControl-indicator {
2531
2530
  display: block;
2532
2531
  box-shadow: inset 0 0 0 2px var(--control_indicator-color, var(--bds-color_interactive));
2533
2532
  }
2534
2533
  @media (hover: hover) and (pointer: fine) {
2535
- .bds251SegmentedControl-item:not(.bds251SegmentedControl---active, .bds251SegmentedControl---disabled):hover {
2534
+ .bds260SegmentedControl-item:not(.bds260SegmentedControl---active, .bds260SegmentedControl---disabled):hover {
2536
2535
  color: var(--control_label-color--hover, var(--bds-color_on-bg));
2537
2536
  }
2538
2537
  }
2539
2538
  @media (prefers-reduced-motion: reduce) {
2540
- .bds251SegmentedControl-thumb,
2541
- .bds251SegmentedControl-indicator {
2539
+ .bds260SegmentedControl-thumb,
2540
+ .bds260SegmentedControl-indicator {
2542
2541
  transition: none;
2543
2542
  }
2544
2543
  }
2545
2544
  }
2546
2545
 
2547
2546
  /* src/components/interaction/form/Select/Select.module.css */
2548
- @layer boostdev.bds251Select-component {
2549
- .bds251Select-formGroup {
2547
+ @layer boostdev.bds260Select-component {
2548
+ .bds260Select-formGroup {
2550
2549
  display: flex;
2551
2550
  flex-direction: column;
2552
2551
  }
2553
- .bds251Select-selectWrapper {
2552
+ .bds260Select-selectWrapper {
2554
2553
  position: relative;
2555
2554
  display: flex;
2556
2555
  align-items: center;
2557
2556
  }
2558
- .bds251Select-select {
2557
+ .bds260Select-select {
2559
2558
  appearance: none;
2560
2559
  inline-size: 100%;
2561
2560
  font-family: var(--bds-font_family--body);
@@ -2572,21 +2571,21 @@
2572
2571
  cursor: pointer;
2573
2572
  transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing), background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
2574
2573
  }
2575
- .bds251Select-select:focus {
2574
+ .bds260Select-select:focus {
2576
2575
  --bdc_color: var(--bdc_color--focus);
2577
2576
  }
2578
- .bds251Select-select:focus-visible {
2577
+ .bds260Select-select:focus-visible {
2579
2578
  outline: var(--bds-outline_default);
2580
2579
  outline-offset: var(--bds-outline_offset);
2581
2580
  }
2582
- .bds251Select-select:disabled {
2581
+ .bds260Select-select:disabled {
2583
2582
  opacity: 0.5;
2584
2583
  cursor: not-allowed;
2585
2584
  }
2586
- .bds251Select-selectError {
2585
+ .bds260Select-selectError {
2587
2586
  --bdc_color: var(--bdc_color--error);
2588
2587
  }
2589
- .bds251Select-chevron {
2588
+ .bds260Select-chevron {
2590
2589
  position: absolute;
2591
2590
  inset-inline-end: var(--bds-space_s);
2592
2591
  display: flex;
@@ -2594,30 +2593,30 @@
2594
2593
  pointer-events: none;
2595
2594
  color: var(--select_chevron-color, var(--bds-color_interactive));
2596
2595
  }
2597
- .bds251Select-chevron svg {
2596
+ .bds260Select-chevron svg {
2598
2597
  inline-size: 1rem;
2599
2598
  block-size: 1rem;
2600
2599
  }
2601
2600
  }
2602
2601
 
2603
2602
  /* src/components/interaction/form/Slider/Slider.module.css */
2604
- @layer boostdev.bds251Slider-component {
2605
- .bds251Slider-formGroup {
2603
+ @layer boostdev.bds260Slider-component {
2604
+ .bds260Slider-formGroup {
2606
2605
  display: flex;
2607
2606
  flex-direction: column;
2608
2607
  gap: var(--bds-space_xxs);
2609
2608
  }
2610
- .bds251Slider-labelRow {
2609
+ .bds260Slider-labelRow {
2611
2610
  display: flex;
2612
2611
  justify-content: space-between;
2613
2612
  align-items: baseline;
2614
2613
  }
2615
- .bds251Slider-value {
2614
+ .bds260Slider-value {
2616
2615
  font-size: var(--bds-font_size--body--s);
2617
2616
  font-variant-numeric: tabular-nums;
2618
2617
  color: var(--bds-color_on-bg--subtle);
2619
2618
  }
2620
- .bds251Slider-slider {
2619
+ .bds260Slider-slider {
2621
2620
  --slider_fill: 0%;
2622
2621
  --slider_track-height: var(--bds-space_xxs);
2623
2622
  --slider_thumb-size: calc(var(--bds-space_s) * 2);
@@ -2636,16 +2635,16 @@
2636
2635
  cursor: pointer;
2637
2636
  transition: var(--bds-animation_transition);
2638
2637
  }
2639
- .bds251Slider-slider:focus-visible {
2638
+ .bds260Slider-slider:focus-visible {
2640
2639
  outline: var(--bds-outline_default);
2641
2640
  outline-offset: var(--bds-outline_offset);
2642
2641
  border-radius: var(--slider_track-radius, var(--bds-border_radius--full));
2643
2642
  }
2644
- .bds251Slider-slider:disabled {
2643
+ .bds260Slider-slider:disabled {
2645
2644
  opacity: 0.4;
2646
2645
  cursor: not-allowed;
2647
2646
  }
2648
- .bds251Slider-slider::-webkit-slider-thumb {
2647
+ .bds260Slider-slider::-webkit-slider-thumb {
2649
2648
  appearance: none;
2650
2649
  inline-size: var(--slider_thumb-size);
2651
2650
  block-size: var(--slider_thumb-size);
@@ -2655,7 +2654,7 @@
2655
2654
  transition: var(--bds-animation_transition);
2656
2655
  cursor: pointer;
2657
2656
  }
2658
- .bds251Slider-slider::-moz-range-thumb {
2657
+ .bds260Slider-slider::-moz-range-thumb {
2659
2658
  inline-size: var(--slider_thumb-size);
2660
2659
  block-size: var(--slider_thumb-size);
2661
2660
  border: none;
@@ -2664,7 +2663,7 @@
2664
2663
  box-shadow: var(--bds-shadow_s);
2665
2664
  cursor: pointer;
2666
2665
  }
2667
- .bds251Slider-sliderError {
2666
+ .bds260Slider-sliderError {
2668
2667
  background:
2669
2668
  linear-gradient(
2670
2669
  to right,
@@ -2673,24 +2672,24 @@
2673
2672
  var(--slider_track-bg, var(--bds-color_bg--subtle)) var(--slider_fill),
2674
2673
  var(--slider_track-bg, var(--bds-color_bg--subtle)) 100%);
2675
2674
  }
2676
- .bds251Slider-sliderError::-webkit-slider-thumb {
2675
+ .bds260Slider-sliderError::-webkit-slider-thumb {
2677
2676
  background-color: var(--slider_color--error, var(--bds-color_error));
2678
2677
  }
2679
- .bds251Slider-sliderError::-moz-range-thumb {
2678
+ .bds260Slider-sliderError::-moz-range-thumb {
2680
2679
  background-color: var(--slider_color--error, var(--bds-color_error));
2681
2680
  }
2682
2681
  @media (prefers-reduced-motion: reduce) {
2683
- .bds251Slider-slider,
2684
- .bds251Slider-slider::-webkit-slider-thumb,
2685
- .bds251Slider-slider::-moz-range-thumb {
2682
+ .bds260Slider-slider,
2683
+ .bds260Slider-slider::-webkit-slider-thumb,
2684
+ .bds260Slider-slider::-moz-range-thumb {
2686
2685
  transition: none;
2687
2686
  }
2688
2687
  }
2689
2688
  }
2690
2689
 
2691
2690
  /* src/components/interaction/form/Switch/Switch.module.css */
2692
- @layer boostdev.bds251Switch-component {
2693
- .bds251Switch-switchGroup {
2691
+ @layer boostdev.bds260Switch-component {
2692
+ .bds260Switch-switchGroup {
2694
2693
  --switch_thumb-size: 1.25em;
2695
2694
  --switch_track-pad: var(--bds-space_xxxs);
2696
2695
  --switch_track-height: calc(var(--switch_thumb-size) + var(--switch_track-pad) * 2);
@@ -2699,21 +2698,21 @@
2699
2698
  display: flex;
2700
2699
  flex-direction: column;
2701
2700
  }
2702
- .bds251Switch-switchGroup.bds251Switch---size_small {
2701
+ .bds260Switch-switchGroup.bds260Switch---size_small {
2703
2702
  --switch_thumb-size: 1em;
2704
2703
  }
2705
- .bds251Switch-switchGroup.bds251Switch---size_medium {
2704
+ .bds260Switch-switchGroup.bds260Switch---size_medium {
2706
2705
  --switch_thumb-size: 1.25em;
2707
2706
  }
2708
- .bds251Switch-switchGroup.bds251Switch---size_large {
2707
+ .bds260Switch-switchGroup.bds260Switch---size_large {
2709
2708
  --switch_thumb-size: 1.5em;
2710
2709
  }
2711
- .bds251Switch-inputWrapper {
2710
+ .bds260Switch-inputWrapper {
2712
2711
  display: flex;
2713
2712
  align-items: center;
2714
2713
  gap: var(--bds-space_xs);
2715
2714
  }
2716
- .bds251Switch-trackWrapper {
2715
+ .bds260Switch-trackWrapper {
2717
2716
  position: relative;
2718
2717
  display: inline-flex;
2719
2718
  align-items: center;
@@ -2721,7 +2720,7 @@
2721
2720
  inline-size: var(--switch_track-width);
2722
2721
  block-size: var(--switch_track-height);
2723
2722
  }
2724
- .bds251Switch-switch {
2723
+ .bds260Switch-switch {
2725
2724
  position: absolute;
2726
2725
  inset: 0;
2727
2726
  appearance: none;
@@ -2732,10 +2731,10 @@
2732
2731
  cursor: pointer;
2733
2732
  z-index: 1;
2734
2733
  }
2735
- .bds251Switch-switch:disabled {
2734
+ .bds260Switch-switch:disabled {
2736
2735
  cursor: not-allowed;
2737
2736
  }
2738
- .bds251Switch-track {
2737
+ .bds260Switch-track {
2739
2738
  display: inline-flex;
2740
2739
  align-items: center;
2741
2740
  inline-size: var(--switch_track-width);
@@ -2751,7 +2750,7 @@
2751
2750
  transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
2752
2751
  --bdc_color: var(--switch_thumb-bg, var(--bds-color_interactive));
2753
2752
  }
2754
- .bds251Switch-thumb {
2753
+ .bds260Switch-thumb {
2755
2754
  display: block;
2756
2755
  inline-size: var(--switch_thumb-size);
2757
2756
  block-size: var(--switch_thumb-size);
@@ -2761,40 +2760,40 @@
2761
2760
  transition: var(--bds-animation_transition);
2762
2761
  transform: translateX(0);
2763
2762
  }
2764
- .bds251Switch-switch.bds251Switch-switchError + .bds251Switch-track {
2763
+ .bds260Switch-switch.bds260Switch-switchError + .bds260Switch-track {
2765
2764
  --bdc_color: var(--switch_border-color--error, var(--bds-color_error));
2766
2765
  }
2767
- .bds251Switch-switch:checked + .bds251Switch-track {
2766
+ .bds260Switch-switch:checked + .bds260Switch-track {
2768
2767
  background-color: var(--switch_track-bg--active, var(--bdc-color_active--subtle));
2769
2768
  --bdc_color: var(--switch_thumb-bg--active, var(--bds-color_interactive));
2770
2769
  }
2771
- .bds251Switch-switch:checked + .bds251Switch-track .bds251Switch-thumb {
2770
+ .bds260Switch-switch:checked + .bds260Switch-track .bds260Switch-thumb {
2772
2771
  background-color: var(--switch_thumb-bg--active, var(--bds-color_interactive));
2773
2772
  transform: translateX(var(--switch_thumb-size));
2774
2773
  }
2775
- .bds251Switch-switch:focus-visible + .bds251Switch-track {
2774
+ .bds260Switch-switch:focus-visible + .bds260Switch-track {
2776
2775
  outline: var(--bds-outline_default);
2777
2776
  outline-offset: var(--bds-outline_offset);
2778
2777
  border-radius: var(--switch_track-radius, var(--bds-border_radius--full));
2779
2778
  }
2780
- .bds251Switch-switch:disabled + .bds251Switch-track {
2779
+ .bds260Switch-switch:disabled + .bds260Switch-track {
2781
2780
  opacity: 0.4;
2782
2781
  }
2783
2782
  @media (prefers-reduced-motion: reduce) {
2784
- .bds251Switch-track,
2785
- .bds251Switch-thumb {
2783
+ .bds260Switch-track,
2784
+ .bds260Switch-thumb {
2786
2785
  transition: none;
2787
2786
  }
2788
2787
  }
2789
2788
  }
2790
2789
 
2791
2790
  /* src/components/interaction/form/Textarea/Textarea.module.css */
2792
- @layer boostdev.bds251Textarea-component {
2793
- .bds251Textarea-formGroup {
2791
+ @layer boostdev.bds260Textarea-component {
2792
+ .bds260Textarea-formGroup {
2794
2793
  display: flex;
2795
2794
  flex-direction: column;
2796
2795
  }
2797
- .bds251Textarea-textarea {
2796
+ .bds260Textarea-textarea {
2798
2797
  font-family: var(--bds-font_family--body);
2799
2798
  font-size: var(--bds-font_size--body);
2800
2799
  line-height: var(--bds-font_line-height--body);
@@ -2810,69 +2809,69 @@
2810
2809
  min-block-size: calc(var(--bds-space_m) * 5);
2811
2810
  transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing), background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
2812
2811
  }
2813
- .bds251Textarea-textarea:focus {
2812
+ .bds260Textarea-textarea:focus {
2814
2813
  --bdc_color: var(--bdc_color--focus);
2815
2814
  }
2816
- .bds251Textarea-textarea:focus-visible {
2815
+ .bds260Textarea-textarea:focus-visible {
2817
2816
  outline: var(--bds-outline_default);
2818
2817
  outline-offset: var(--bds-outline_offset);
2819
2818
  }
2820
- .bds251Textarea-textarea:disabled {
2819
+ .bds260Textarea-textarea:disabled {
2821
2820
  opacity: 0.5;
2822
2821
  cursor: not-allowed;
2823
2822
  resize: none;
2824
2823
  }
2825
- .bds251Textarea-textareaError {
2824
+ .bds260Textarea-textareaError {
2826
2825
  --bdc_color: var(--bdc_color--error);
2827
2826
  }
2828
2827
  }
2829
2828
 
2830
2829
  /* src/components/layout/ButtonGroup/ButtonGroup.module.css */
2831
- @layer boostdev.bds251ButtonGroup-component {
2832
- .bds251ButtonGroup-buttonGroup {
2830
+ @layer boostdev.bds260ButtonGroup-component {
2831
+ .bds260ButtonGroup-buttonGroup {
2833
2832
  container-type: inline-size;
2834
2833
  container-name: button-group;
2835
2834
  grid-column: var(--bds-grid_span-100);
2836
2835
  inline-size: 100%;
2837
2836
  }
2838
- .bds251ButtonGroup-buttonGroup .bds251ButtonGroup-container {
2837
+ .bds260ButtonGroup-buttonGroup .bds260ButtonGroup-container {
2839
2838
  position: relative;
2840
2839
  display: flex;
2841
2840
  flex-direction: column-reverse;
2842
2841
  gap: var(--bds-space_l);
2843
2842
  align-items: center;
2844
2843
  }
2845
- .bds251ButtonGroup-buttonGroup.bds251ButtonGroup---variant_card .bds251ButtonGroup-container {
2844
+ .bds260ButtonGroup-buttonGroup.bds260ButtonGroup---variant_card .bds260ButtonGroup-container {
2846
2845
  align-items: stretch;
2847
2846
  }
2848
- .bds251ButtonGroup-buttonGroup.bds251ButtonGroup---variant_flow .bds251ButtonGroup-container,
2849
- .bds251ButtonGroup-buttonGroup.bds251ButtonGroup---variant_modal .bds251ButtonGroup-container {
2847
+ .bds260ButtonGroup-buttonGroup.bds260ButtonGroup---variant_flow .bds260ButtonGroup-container,
2848
+ .bds260ButtonGroup-buttonGroup.bds260ButtonGroup---variant_modal .bds260ButtonGroup-container {
2850
2849
  align-items: center;
2851
2850
  }
2852
- .bds251ButtonGroup-buttonGroup.bds251ButtonGroup---variant_content .bds251ButtonGroup-container {
2851
+ .bds260ButtonGroup-buttonGroup.bds260ButtonGroup---variant_content .bds260ButtonGroup-container {
2853
2852
  align-items: flex-start;
2854
2853
  }
2855
2854
  @supports (contain: inline-size) {
2856
2855
  @container button-group (min-width: 30rem) {
2857
- .bds251ButtonGroup-buttonGroup .bds251ButtonGroup-container {
2856
+ .bds260ButtonGroup-buttonGroup .bds260ButtonGroup-container {
2858
2857
  flex-direction: row;
2859
2858
  justify-content: space-between;
2860
2859
  }
2861
- .bds251ButtonGroup-buttonGroup.bds251ButtonGroup---variant_modal .bds251ButtonGroup-container > :first-child:last-child,
2862
- .bds251ButtonGroup-buttonGroup.bds251ButtonGroup---variant_flow .bds251ButtonGroup-container > :first-child:last-child {
2860
+ .bds260ButtonGroup-buttonGroup.bds260ButtonGroup---variant_modal .bds260ButtonGroup-container > :first-child:last-child,
2861
+ .bds260ButtonGroup-buttonGroup.bds260ButtonGroup---variant_flow .bds260ButtonGroup-container > :first-child:last-child {
2863
2862
  margin-inline-start: auto;
2864
2863
  }
2865
- .bds251ButtonGroup-buttonGroup.bds251ButtonGroup---variant_card .bds251ButtonGroup-container {
2864
+ .bds260ButtonGroup-buttonGroup.bds260ButtonGroup---variant_card .bds260ButtonGroup-container {
2866
2865
  justify-content: center;
2867
2866
  }
2868
- .bds251ButtonGroup-buttonGroup.bds251ButtonGroup---variant_modal .bds251ButtonGroup-container {
2867
+ .bds260ButtonGroup-buttonGroup.bds260ButtonGroup---variant_modal .bds260ButtonGroup-container {
2869
2868
  justify-content: flex-end;
2870
2869
  }
2871
- .bds251ButtonGroup-buttonGroup.bds251ButtonGroup---variant_content .bds251ButtonGroup-container {
2870
+ .bds260ButtonGroup-buttonGroup.bds260ButtonGroup---variant_content .bds260ButtonGroup-container {
2872
2871
  justify-content: flex-start;
2873
2872
  align-items: center;
2874
2873
  }
2875
- .bds251ButtonGroup-buttonGroup.bds251ButtonGroup---variant_grid .bds251ButtonGroup-container {
2874
+ .bds260ButtonGroup-buttonGroup.bds260ButtonGroup---variant_grid .bds260ButtonGroup-container {
2876
2875
  justify-content: center;
2877
2876
  }
2878
2877
  }
@@ -2880,183 +2879,183 @@
2880
2879
  }
2881
2880
 
2882
2881
  /* src/components/layout/Card/Card.module.css */
2883
- @layer boostdev.bds251Card-component {
2884
- .bds251Card-card {
2882
+ @layer boostdev.bds260Card-component {
2883
+ .bds260Card-card {
2885
2884
  background-color: var(--card_color, var(--bds-color_bg));
2886
2885
  color: var(--card_on-color, var(--bds-color_on-bg));
2887
2886
  border-radius: var(--bds-border_radius--m);
2888
2887
  transition: all 0.3s ease;
2889
2888
  position: relative;
2890
2889
  }
2891
- .bds251Card-card.bds251Card---default {
2892
- box-shadow: var(--bds-shadow_s);
2890
+ .bds260Card-card.bds260Card---default {
2891
+ box-shadow: var(--card_shadow--default, var(--bds-shadow_s));
2893
2892
  }
2894
- .bds251Card-card.bds251Card---elevated {
2895
- box-shadow: var(--bds-shadow_m);
2893
+ .bds260Card-card.bds260Card---elevated {
2894
+ box-shadow: var(--card_shadow--elevated, var(--bds-shadow_m));
2896
2895
  }
2897
- .bds251Card-card.bds251Card---outlined {
2896
+ .bds260Card-card.bds260Card---outlined {
2898
2897
  border: var(--card_border, none);
2899
2898
  --bdc_color: currentcolor;
2900
- box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--bds-shadow_s);
2899
+ box-shadow: var(--card_shadow--outlined, inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--bds-shadow_s));
2901
2900
  }
2902
- .bds251Card-card.bds251Card---clickable {
2901
+ .bds260Card-card.bds260Card---clickable {
2903
2902
  cursor: pointer;
2904
2903
  }
2905
- .bds251Card-card.bds251Card---padding-none {
2904
+ .bds260Card-card.bds260Card---padding-none {
2906
2905
  padding: var(--card_padding, 0);
2907
2906
  }
2908
- .bds251Card-card.bds251Card---padding-small {
2907
+ .bds260Card-card.bds260Card---padding-small {
2909
2908
  padding: var(--card_padding, var(--bds-space_s));
2910
2909
  }
2911
- .bds251Card-card.bds251Card---padding-medium {
2910
+ .bds260Card-card.bds260Card---padding-medium {
2912
2911
  padding: var(--card_padding, var(--bds-space_m));
2913
2912
  }
2914
- .bds251Card-card.bds251Card---padding-large {
2913
+ .bds260Card-card.bds260Card---padding-large {
2915
2914
  padding: var(--card_padding, var(--bds-space_l));
2916
2915
  }
2917
- .bds251Card-card.bds251Card---padding-extra-large {
2916
+ .bds260Card-card.bds260Card---padding-extra-large {
2918
2917
  padding: var(--card_padding, var(--bds-space_xl));
2919
2918
  }
2920
- .bds251Card-card.bds251Card---text-start {
2919
+ .bds260Card-card.bds260Card---text-start {
2921
2920
  text-align: start;
2922
2921
  }
2923
- .bds251Card-card.bds251Card---text-center {
2922
+ .bds260Card-card.bds260Card---text-center {
2924
2923
  text-align: center;
2925
2924
  }
2926
- .bds251Card-card.bds251Card---text-end {
2925
+ .bds260Card-card.bds260Card---text-end {
2927
2926
  text-align: end;
2928
2927
  }
2929
- .bds251Card-card.bds251Card---clickable:focus-visible {
2928
+ .bds260Card-card.bds260Card---clickable:focus-visible {
2930
2929
  outline: 2px solid var(--color_focus, currentcolor);
2931
2930
  outline-offset: 2px;
2932
2931
  }
2933
- .bds251Card-card.bds251Card---clickable:active {
2932
+ .bds260Card-card.bds260Card---clickable:active {
2934
2933
  transform: translateY(0);
2935
2934
  box-shadow: var(--bds-shadow_s);
2936
2935
  }
2937
2936
  @media (hover: hover) and (pointer: fine) {
2938
- .bds251Card-card.bds251Card---clickable:hover {
2937
+ .bds260Card-card.bds260Card---clickable:hover {
2939
2938
  transform: translateY(-2px);
2940
2939
  box-shadow: var(--card_shadow--clickable-hover, var(--bds-shadow_xl));
2941
2940
  }
2942
- .bds251Card-card.bds251Card---default:hover {
2941
+ .bds260Card-card.bds260Card---default:hover {
2943
2942
  box-shadow: var(--card_shadow--default-hover, var(--bds-shadow_m));
2944
2943
  }
2945
- .bds251Card-card.bds251Card---elevated:hover {
2944
+ .bds260Card-card.bds260Card---elevated:hover {
2946
2945
  box-shadow: var(--card_shadow--elevated-hover, var(--bds-shadow_2xl));
2947
2946
  }
2948
- .bds251Card-card.bds251Card---outlined:hover {
2947
+ .bds260Card-card.bds260Card---outlined:hover {
2949
2948
  box-shadow: var(--card_shadow--outlined-hover, var(--bds-shadow_s));
2950
2949
  }
2951
2950
  }
2952
2951
  }
2953
2952
 
2954
2953
  /* src/components/layout/Grid/Grid.module.css */
2955
- @layer boostdev.bds251Grid-component {
2956
- .bds251Grid-grid {
2954
+ @layer boostdev.bds260Grid-component {
2955
+ .bds260Grid-grid {
2957
2956
  display: grid;
2958
2957
  gap: var(--grid_gap, var(--bds-grid_gap));
2959
2958
  }
2960
- .bds251Grid-grid.bds251Grid---main {
2959
+ .bds260Grid-grid.bds260Grid---main {
2961
2960
  grid-template-columns: var(--bds-grid_template-columns);
2962
2961
  }
2963
- .bds251Grid-grid.bds251Grid---page {
2962
+ .bds260Grid-grid.bds260Grid---page {
2964
2963
  grid-template-columns: 1fr;
2965
2964
  grid-column: 1 / -1;
2966
2965
  }
2967
- .bds251Grid-grid.bds251Grid---funnel {
2966
+ .bds260Grid-grid.bds260Grid---funnel {
2968
2967
  grid-template-columns: var(--bds-grid_template-columns);
2969
2968
  max-inline-size: var(--bds-container_max-width--narrow);
2970
2969
  margin-inline: auto;
2971
2970
  }
2972
- .bds251Grid-grid.bds251Grid---custom {
2971
+ .bds260Grid-grid.bds260Grid---custom {
2973
2972
  grid-template-columns: repeat(var(--grid_columns, 4), minmax(0, 1fr));
2974
2973
  }
2975
- .bds251Grid-grid.bds251Grid---centered {
2974
+ .bds260Grid-grid.bds260Grid---centered {
2976
2975
  margin-inline: auto;
2977
2976
  max-inline-size: var(--bds-container_max-width);
2978
2977
  padding-inline: var(--bds-container_spacing-inline);
2979
2978
  }
2980
- .bds251Grid-item {
2979
+ .bds260Grid-item {
2981
2980
  min-inline-size: 0;
2982
2981
  }
2983
2982
  @supports (grid-template-rows: masonry) {
2984
- .bds251Grid-grid.bds251Grid---masonry {
2983
+ .bds260Grid-grid.bds260Grid---masonry {
2985
2984
  grid-template-rows: masonry;
2986
2985
  }
2987
2986
  }
2988
2987
  @supports (display: grid-lanes) {
2989
- .bds251Grid-grid.bds251Grid---masonry {
2988
+ .bds260Grid-grid.bds260Grid---masonry {
2990
2989
  display: grid-lanes;
2991
2990
  }
2992
2991
  }
2993
2992
  }
2994
2993
 
2995
2994
  /* src/components/layout/SectionHeader/SectionHeader.module.css */
2996
- @layer boostdev.bds251SectionHeader-component {
2997
- .bds251SectionHeader-sectionHeader {
2995
+ @layer boostdev.bds260SectionHeader-component {
2996
+ .bds260SectionHeader-sectionHeader {
2998
2997
  display: flex;
2999
2998
  flex-direction: column;
3000
2999
  gap: var(--bds-space_m);
3001
3000
  grid-column: var(--bds-grid_span-100);
3002
3001
  }
3003
- .bds251SectionHeader-title {
3002
+ .bds260SectionHeader-title {
3004
3003
  color: var(--sectionHeader-title-color, var(--bds-color_on-bg));
3005
3004
  margin: 0;
3006
3005
  font-family: var(--bds-font_family--body);
3007
3006
  }
3008
- .bds251SectionHeader-subtitle {
3007
+ .bds260SectionHeader-subtitle {
3009
3008
  color: var(--sectionHeader_subtitle-color, var(--bds-color_grey--strong));
3010
3009
  margin: 0;
3011
3010
  font-family: var(--bds-font_family--body);
3012
3011
  font-weight: var(--bds-font_weight--medium);
3013
3012
  }
3014
- .bds251SectionHeader-sectionHeader.bds251SectionHeader---start {
3013
+ .bds260SectionHeader-sectionHeader.bds260SectionHeader---start {
3015
3014
  align-items: flex-start;
3016
3015
  text-align: start;
3017
3016
  }
3018
- .bds251SectionHeader-sectionHeader.bds251SectionHeader---center {
3017
+ .bds260SectionHeader-sectionHeader.bds260SectionHeader---center {
3019
3018
  align-items: center;
3020
3019
  text-align: center;
3021
3020
  }
3022
- .bds251SectionHeader-sectionHeader.bds251SectionHeader---end {
3021
+ .bds260SectionHeader-sectionHeader.bds260SectionHeader---end {
3023
3022
  align-items: flex-end;
3024
3023
  text-align: end;
3025
3024
  }
3026
- .bds251SectionHeader-sectionHeader.bds251SectionHeader---medium .bds251SectionHeader-title {
3025
+ .bds260SectionHeader-sectionHeader.bds260SectionHeader---medium .bds260SectionHeader-title {
3027
3026
  font-size: var(--sectionHeader_title-size, var(--bds-font_size--display));
3028
3027
  line-height: var(--sectionHeader_title-line-height, var(--bds-font_line-height--display));
3029
3028
  font-weight: var(--sectionHeader_title-weight, var(--bds-font_weight--bold));
3030
3029
  }
3031
- .bds251SectionHeader-sectionHeader.bds251SectionHeader---medium .bds251SectionHeader-subtitle {
3030
+ .bds260SectionHeader-sectionHeader.bds260SectionHeader---medium .bds260SectionHeader-subtitle {
3032
3031
  font-size: var(--sectionHeader_subtitle-size, var(--bds-font_size--heading-3));
3033
3032
  line-height: 1.3;
3034
3033
  }
3035
- .bds251SectionHeader-sectionHeader.bds251SectionHeader---xs .bds251SectionHeader-title {
3034
+ .bds260SectionHeader-sectionHeader.bds260SectionHeader---xs .bds260SectionHeader-title {
3036
3035
  font-size: var(--sectionHeader_title-size, 1.5em);
3037
3036
  line-height: var(--sectionHeader_title-line-height, var(--bds-font_line-height--heading));
3038
3037
  font-weight: var(--sectionHeader_title-weight, var(--bds-font_weight--bold));
3039
3038
  }
3040
- .bds251SectionHeader-sectionHeader.bds251SectionHeader---xs .bds251SectionHeader-subtitle {
3039
+ .bds260SectionHeader-sectionHeader.bds260SectionHeader---xs .bds260SectionHeader-subtitle {
3041
3040
  font-size: var(--sectionHeader_subtitle-size, var(--bds-font_size--body));
3042
3041
  line-height: 1.4;
3043
3042
  }
3044
- .bds251SectionHeader-sectionHeader.bds251SectionHeader---small .bds251SectionHeader-title {
3043
+ .bds260SectionHeader-sectionHeader.bds260SectionHeader---small .bds260SectionHeader-title {
3045
3044
  font-size: var(--sectionHeader_title-size, var(--bds-font_size--heading-1));
3046
3045
  line-height: var(--sectionHeader_title-line-height, var(--bds-font_line-height--heading));
3047
3046
  font-weight: var(--sectionHeader_title-weight, var(--bds-font_weight--bold));
3048
3047
  }
3049
- .bds251SectionHeader-sectionHeader.bds251SectionHeader---small .bds251SectionHeader-subtitle {
3048
+ .bds260SectionHeader-sectionHeader.bds260SectionHeader---small .bds260SectionHeader-subtitle {
3050
3049
  font-size: var(--sectionHeader_subtitle-size, var(--bds-font_size--body));
3051
3050
  line-height: 1.4;
3052
3051
  }
3053
- .bds251SectionHeader-sectionHeader.bds251SectionHeader---large .bds251SectionHeader-title {
3052
+ .bds260SectionHeader-sectionHeader.bds260SectionHeader---large .bds260SectionHeader-title {
3054
3053
  font-size: var(--sectionHeader_title-size, var(--bds-font_size--display));
3055
3054
  line-height: var(--sectionHeader_title-line-height, var(--bds-font_line-height--display));
3056
3055
  font-weight: var(--sectionHeader_title-weight, var(--bds-font_weight--bold));
3057
3056
  letter-spacing: var(--bds-font_tracking--tight);
3058
3057
  }
3059
- .bds251SectionHeader-sectionHeader.bds251SectionHeader---large .bds251SectionHeader-subtitle {
3058
+ .bds260SectionHeader-sectionHeader.bds260SectionHeader---large .bds260SectionHeader-subtitle {
3060
3059
  font-size: var(--sectionHeader_subtitle-size, var(--bds-font_size--heading-2));
3061
3060
  line-height: 1.3;
3062
3061
  font-weight: var(--bds-font_weight--medium);
@@ -3064,8 +3063,8 @@
3064
3063
  }
3065
3064
 
3066
3065
  /* src/components/layout/IconWrapper/IconWrapper.module.css */
3067
- @layer boostdev.bds251IconWrapper-component {
3068
- .bds251IconWrapper-wrapper {
3066
+ @layer boostdev.bds260IconWrapper-component {
3067
+ .bds260IconWrapper-wrapper {
3069
3068
  inline-size: 2em;
3070
3069
  block-size: 2em;
3071
3070
  font-size: 3em;
@@ -3080,7 +3079,7 @@
3080
3079
  position: relative;
3081
3080
  transition: var(--bds-animation_transition);
3082
3081
  }
3083
- .bds251IconWrapper-wrapper svg {
3082
+ .bds260IconWrapper-wrapper svg {
3084
3083
  fill: currentcolor;
3085
3084
  }
3086
3085
  }