@boostdev/design-system-components 2.16.0 → 2.17.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (48) hide show
  1. package/AGENTS.md +3 -1
  2. package/dist/client.cjs +52 -52
  3. package/dist/client.css +637 -633
  4. package/dist/client.js +52 -52
  5. package/dist/index.cjs +52 -52
  6. package/dist/index.css +637 -633
  7. package/dist/index.js +52 -52
  8. package/dist/web-components/{chunk-SYNLFKD3.js → chunk-3LQKFSMR.js} +6 -0
  9. package/dist/web-components/{chunk-RZH5IVB5.js → chunk-5ATTKUCP.js} +2 -2
  10. package/dist/web-components/{chunk-BPYKZVDK.js → chunk-SJLMW2VR.js} +2 -2
  11. package/dist/web-components/{chunk-2MJTO2IW.js → chunk-WWWJCSXN.js} +2 -2
  12. package/dist/web-components/index.js +4 -4
  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-notification-banner.js +1 -1
  16. package/dist/web-components/ui/bds-rating.js +1 -1
  17. package/package.json +1 -1
  18. package/src/components/interaction/Rating/Rating.mdx +4 -1
  19. package/src/components/interaction/Rating/Rating.module.css +9 -0
  20. package/src/components/interaction/Rating/Rating.spec.tsx +9 -0
  21. package/src/components/interaction/form/CheckboxGroup/CheckboxGroup.mdx +1 -1
  22. package/src/components/interaction/form/CheckboxGroup/CheckboxGroup.module.css +1 -1
  23. package/src/components/interaction/form/CheckboxGroup/CheckboxGroup.spec.tsx +5 -0
  24. package/src/components/interaction/form/RadioGroup/RadioGroup.mdx +1 -1
  25. package/src/components/interaction/form/RadioGroup/RadioGroup.module.css +1 -1
  26. package/src/components/interaction/form/RadioGroup/RadioGroup.spec.tsx +5 -0
  27. package/src/components/ui/Alert/Alert.mdx +1 -1
  28. package/src/components/ui/Alert/Alert.module.css +2 -2
  29. package/src/components/ui/Alert/Alert.spec.tsx +6 -0
  30. package/src/components/ui/Badge/Badge.mdx +1 -1
  31. package/src/components/ui/Badge/Badge.module.css +2 -2
  32. package/src/components/ui/Badge/Badge.spec.tsx +8 -0
  33. package/src/components/ui/NotificationBanner/NotificationBanner.mdx +13 -1
  34. package/src/components/ui/NotificationBanner/NotificationBanner.module.css +2 -2
  35. package/src/components/ui/NotificationBanner/NotificationBanner.spec.tsx +6 -0
  36. package/src/test/token-contract.spec.ts +1 -0
  37. package/src/web-components/ui/BdsAlert.mdx +1 -0
  38. package/src/web-components/ui/BdsBadge.mdx +1 -0
  39. package/src/web-components/ui/BdsNotificationBanner.mdx +1 -1
  40. package/src/web-components/ui/BdsRating.mdx +4 -1
  41. package/src/web-components/ui/bds-alert.spec.ts +7 -0
  42. package/src/web-components/ui/bds-alert.ts +2 -2
  43. package/src/web-components/ui/bds-badge.spec.ts +6 -0
  44. package/src/web-components/ui/bds-badge.ts +2 -2
  45. package/src/web-components/ui/bds-notification-banner.spec.ts +7 -0
  46. package/src/web-components/ui/bds-notification-banner.ts +2 -2
  47. package/src/web-components/ui/bds-rating.spec.ts +7 -0
  48. package/src/web-components/ui/bds-rating.ts +6 -0
package/dist/client.css CHANGED
@@ -28,8 +28,8 @@
28
28
  }
29
29
 
30
30
  /* src/components/ui/Accordion/Accordion.module.css */
31
- @layer boostdev.bds2160Accordion-component {
32
- .bds2160Accordion-accordion {
31
+ @layer boostdev.bds2170Accordion-component {
32
+ .bds2170Accordion-accordion {
33
33
  display: flex;
34
34
  flex-direction: column;
35
35
  border: var(--accordion_border, none);
@@ -39,16 +39,16 @@
39
39
  box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--accordion_shadow, var(--bdc-outline_shadow));
40
40
  overflow: hidden;
41
41
  }
42
- .bds2160Accordion-item {
42
+ .bds2170Accordion-item {
43
43
  border-block-end: 1px solid var(--accordion_divider-color, var(--bds-color_on-bg--as-surface, var(--bds-color_on-bg--border, var(--bds-color_bg--subtle))));
44
44
  }
45
- .bds2160Accordion-item:last-child {
45
+ .bds2170Accordion-item:last-child {
46
46
  border-block-end: none;
47
47
  }
48
- .bds2160Accordion-heading {
48
+ .bds2170Accordion-heading {
49
49
  margin: 0;
50
50
  }
51
- .bds2160Accordion-trigger {
51
+ .bds2170Accordion-trigger {
52
52
  all: unset;
53
53
  display: flex;
54
54
  align-items: center;
@@ -63,52 +63,52 @@
63
63
  transition: var(--bds-animation_transition);
64
64
  box-sizing: border-box;
65
65
  }
66
- .bds2160Accordion-trigger:disabled {
66
+ .bds2170Accordion-trigger:disabled {
67
67
  opacity: 0.4;
68
68
  cursor: not-allowed;
69
69
  }
70
- .bds2160Accordion-trigger:focus-visible {
70
+ .bds2170Accordion-trigger:focus-visible {
71
71
  outline: var(--bds-outline_default);
72
72
  outline-offset: calc(var(--bds-outline_offset) * -1);
73
73
  border-radius: var(--bds-border_radius--xs);
74
74
  }
75
75
  @media (hover: hover) and (pointer: fine) {
76
- .bds2160Accordion-trigger:not(:disabled):hover {
76
+ .bds2170Accordion-trigger:not(:disabled):hover {
77
77
  background-color: var(--accordion_trigger-bg--hover, var(--bds-color_bg--subtle));
78
78
  }
79
79
  }
80
- .bds2160Accordion-triggerLabel {
80
+ .bds2170Accordion-triggerLabel {
81
81
  flex: 1;
82
82
  text-align: start;
83
83
  }
84
- .bds2160Accordion-chevron {
84
+ .bds2170Accordion-chevron {
85
85
  inline-size: 1.25rem;
86
86
  block-size: 1.25rem;
87
87
  flex-shrink: 0;
88
88
  transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
89
89
  }
90
- .bds2160Accordion-item.bds2160Accordion---open .bds2160Accordion-chevron {
90
+ .bds2170Accordion-item.bds2170Accordion---open .bds2170Accordion-chevron {
91
91
  transform: rotate(180deg);
92
92
  }
93
- .bds2160Accordion-panel {
93
+ .bds2170Accordion-panel {
94
94
  overflow: hidden;
95
95
  }
96
- .bds2160Accordion-panelContent {
96
+ .bds2170Accordion-panelContent {
97
97
  padding: 0 var(--bds-space_m) var(--bds-space_m);
98
98
  color: var(--bds-color_on-bg);
99
99
  font-size: var(--bds-font_size--body);
100
100
  line-height: var(--bds-font_line-height--body);
101
101
  }
102
102
  @media (prefers-reduced-motion: reduce) {
103
- .bds2160Accordion-chevron {
103
+ .bds2170Accordion-chevron {
104
104
  transition: none;
105
105
  }
106
106
  }
107
107
  }
108
108
 
109
109
  /* src/components/ui/Alert/Alert.module.css */
110
- @layer boostdev.bds2160Alert-component {
111
- .bds2160Alert-alert {
110
+ @layer boostdev.bds2170Alert-component {
111
+ .bds2170Alert-alert {
112
112
  display: flex;
113
113
  align-items: flex-start;
114
114
  gap: var(--bds-space_s);
@@ -121,60 +121,60 @@
121
121
  line-height: var(--bds-font_line-height--body);
122
122
  --alert_border-width--variant: initial;
123
123
  }
124
- .bds2160Alert---variant_info {
124
+ .bds2170Alert---variant_info {
125
125
  --alert_bg--variant: var(--alert_bg--info, var(--bds-color_blue--subtle));
126
126
  --alert_text--variant: var(--alert_text--info, var(--bds-color_on-blue--subtle));
127
127
  --alert_border--variant: var(--alert_border--info, var(--bds-color_blue));
128
128
  }
129
- .bds2160Alert---variant_success {
129
+ .bds2170Alert---variant_success {
130
130
  --alert_bg--variant: var(--alert_bg--success, var(--bds-color_success--subtle));
131
131
  --alert_text--variant: var(--alert_text--success, var(--bds-color_on-success--subtle));
132
132
  --alert_border--variant: var(--alert_border--success, var(--bds-color_success));
133
133
  }
134
- .bds2160Alert---variant_warning {
134
+ .bds2170Alert---variant_warning {
135
135
  --alert_bg--variant: var(--alert_bg--warning, var(--bds-color_orange--subtle));
136
136
  --alert_text--variant: var(--alert_text--warning, var(--bds-color_on-orange--subtle));
137
137
  --alert_border--variant: var(--alert_border--warning, var(--bds-color_warning));
138
138
  }
139
- .bds2160Alert---variant_error {
140
- --alert_bg--variant: var(--alert_bg--error, rgb(from var(--bds-color_error) r g b / 12%));
141
- --alert_text--variant: var(--alert_text--error, var(--bds-color_on-bg));
139
+ .bds2170Alert---variant_error {
140
+ --alert_bg--variant: var(--alert_bg--error, var(--bds-color_error--subtle));
141
+ --alert_text--variant: var(--alert_text--error, var(--bds-color_on-error--subtle));
142
142
  --alert_border--variant: var(--alert_border--error, var(--bds-color_error));
143
143
  }
144
- .bds2160Alert---appearance_gradient {
144
+ .bds2170Alert---appearance_gradient {
145
145
  --alert_border-width--variant: 3px;
146
146
  background-image: var(--alert_gradient, linear-gradient(100deg, transparent 35%, var(--bds-color_bg--strong, var(--bds-color_bg)) 100%));
147
147
  box-shadow: var(--alert_shadow, var(--bds-shadow_s));
148
148
  }
149
- .bds2160Alert---appearance_gradient.bds2160Alert---variant_info {
149
+ .bds2170Alert---appearance_gradient.bds2170Alert---variant_info {
150
150
  --alert_border--variant: var(--alert_border--info, var(--alert_accent--info, var(--bds-color_on-blue--subtle)));
151
151
  }
152
- .bds2160Alert---appearance_gradient.bds2160Alert---variant_success {
152
+ .bds2170Alert---appearance_gradient.bds2170Alert---variant_success {
153
153
  --alert_border--variant: var(--alert_border--success, var(--alert_accent--success, var(--bds-color_on-success--subtle)));
154
154
  }
155
- .bds2160Alert---appearance_gradient.bds2160Alert---variant_warning {
155
+ .bds2170Alert---appearance_gradient.bds2170Alert---variant_warning {
156
156
  --alert_border--variant: var(--alert_border--warning, var(--alert_accent--warning, var(--bds-color_warning)));
157
157
  }
158
- .bds2160Alert---appearance_gradient.bds2160Alert---variant_error {
158
+ .bds2170Alert---appearance_gradient.bds2170Alert---variant_error {
159
159
  --alert_border--variant: var(--alert_border--error, var(--alert_accent--error, var(--bds-color_error)));
160
160
  }
161
- .bds2160Alert-icon {
161
+ .bds2170Alert-icon {
162
162
  display: flex;
163
163
  align-items: center;
164
164
  flex-shrink: 0;
165
165
  margin-block-start: 0.1em;
166
166
  }
167
- .bds2160Alert-content {
167
+ .bds2170Alert-content {
168
168
  flex: 1;
169
169
  display: flex;
170
170
  flex-direction: column;
171
171
  gap: var(--bds-space_xxs);
172
172
  }
173
- .bds2160Alert-title {
173
+ .bds2170Alert-title {
174
174
  font-weight: var(--bds-font_weight--semibold);
175
175
  font-size: var(--bds-font_size--body);
176
176
  }
177
- .bds2160Alert-dismiss {
177
+ .bds2170Alert-dismiss {
178
178
  all: unset;
179
179
  display: flex;
180
180
  align-items: center;
@@ -190,24 +190,24 @@
190
190
  min-block-size: var(--alert_dismiss-size, 2.75rem);
191
191
  box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--alert_dismiss-shadow, var(--bdc-outline_shadow));
192
192
  }
193
- .bds2160Alert-dismiss svg {
193
+ .bds2170Alert-dismiss svg {
194
194
  inline-size: 1rem;
195
195
  block-size: 1rem;
196
196
  }
197
- .bds2160Alert-dismiss:focus-visible {
197
+ .bds2170Alert-dismiss:focus-visible {
198
198
  outline: var(--bds-outline_default);
199
199
  outline-offset: var(--bds-outline_offset);
200
200
  }
201
201
  @media (hover: hover) and (pointer: fine) {
202
- .bds2160Alert-dismiss:hover {
202
+ .bds2170Alert-dismiss:hover {
203
203
  opacity: var(--alert_dismiss-opacity--hover, 0.7);
204
204
  }
205
205
  }
206
206
  }
207
207
 
208
208
  /* src/components/ui/Avatar/Avatar.module.css */
209
- @layer boostdev.bds2160Avatar-component {
210
- .bds2160Avatar-avatar {
209
+ @layer boostdev.bds2170Avatar-component {
210
+ .bds2170Avatar-avatar {
211
211
  display: inline-flex;
212
212
  align-items: center;
213
213
  justify-content: center;
@@ -217,62 +217,62 @@
217
217
  border-radius: var(--avatar_radius, var(--bds-border_radius--circle));
218
218
  overflow: hidden;
219
219
  }
220
- .bds2160Avatar-avatar.bds2160Avatar---fallback {
220
+ .bds2170Avatar-avatar.bds2170Avatar---fallback {
221
221
  background-color: var(--avatar_bg, var(--avatar_bg--variant));
222
222
  color: var(--avatar_text, var(--avatar_text--variant));
223
223
  font-weight: var(--bds-font_weight--semibold);
224
224
  }
225
- .bds2160Avatar-avatar.bds2160Avatar---tone_primary {
225
+ .bds2170Avatar-avatar.bds2170Avatar---tone_primary {
226
226
  --avatar_bg--variant: var(--avatar_bg--primary, var(--bds-color_primary--subtle, var(--bds-color_blue--subtle)));
227
227
  --avatar_text--variant: var(--avatar_text--primary, var(--bds-color_on-primary--subtle, var(--bds-color_on-blue--subtle)));
228
228
  }
229
- .bds2160Avatar-avatar.bds2160Avatar---tone_secondary {
229
+ .bds2170Avatar-avatar.bds2170Avatar---tone_secondary {
230
230
  --avatar_bg--variant: var(--avatar_bg--secondary, var(--bds-color_secondary--subtle, var(--bds-color_blue--subtle)));
231
231
  --avatar_text--variant: var(--avatar_text--secondary, var(--bds-color_on-secondary--subtle, var(--bds-color_on-blue--subtle)));
232
232
  }
233
- .bds2160Avatar-avatar.bds2160Avatar---tone_accent-1 {
233
+ .bds2170Avatar-avatar.bds2170Avatar---tone_accent-1 {
234
234
  --avatar_bg--variant: var(--avatar_bg--accent-1, var(--bds-color_accent-1--subtle, var(--bds-color_green--subtle)));
235
235
  --avatar_text--variant: var(--avatar_text--accent-1, var(--bds-color_on-accent-1--subtle, var(--bds-color_on-green--subtle)));
236
236
  }
237
- .bds2160Avatar-avatar.bds2160Avatar---tone_accent-2 {
237
+ .bds2170Avatar-avatar.bds2170Avatar---tone_accent-2 {
238
238
  --avatar_bg--variant: var(--avatar_bg--accent-2, var(--bds-color_accent-2--subtle, var(--bds-color_orange--subtle)));
239
239
  --avatar_text--variant: var(--avatar_text--accent-2, var(--bds-color_on-accent-2--subtle, var(--bds-color_on-orange--subtle)));
240
240
  }
241
- .bds2160Avatar-avatar.bds2160Avatar---tone_accent-3 {
241
+ .bds2170Avatar-avatar.bds2170Avatar---tone_accent-3 {
242
242
  --avatar_bg--variant: var(--avatar_bg--accent-3, var(--bds-color_accent-3--subtle, var(--bds-color_blue--subtle)));
243
243
  --avatar_text--variant: var(--avatar_text--accent-3, var(--bds-color_on-accent-3--subtle, var(--bds-color_on-blue--subtle)));
244
244
  }
245
- .bds2160Avatar-avatar.bds2160Avatar---size_small {
245
+ .bds2170Avatar-avatar.bds2170Avatar---size_small {
246
246
  --avatar_size--variant: 2em;
247
247
  }
248
- .bds2160Avatar-avatar.bds2160Avatar---size_medium {
248
+ .bds2170Avatar-avatar.bds2170Avatar---size_medium {
249
249
  --avatar_size--variant: 3em;
250
250
  }
251
- .bds2160Avatar-avatar.bds2160Avatar---size_large {
251
+ .bds2170Avatar-avatar.bds2170Avatar---size_large {
252
252
  --avatar_size--variant: 4.5em;
253
253
  }
254
- .bds2160Avatar-image {
254
+ .bds2170Avatar-image {
255
255
  inline-size: 100%;
256
256
  block-size: 100%;
257
257
  object-fit: cover;
258
258
  display: block;
259
259
  }
260
- .bds2160Avatar-initials {
260
+ .bds2170Avatar-initials {
261
261
  line-height: 1;
262
262
  user-select: none;
263
263
  font-size: var(--bds-font_size--body);
264
264
  }
265
- .bds2160Avatar-avatar.bds2160Avatar---size_small .bds2160Avatar-initials {
265
+ .bds2170Avatar-avatar.bds2170Avatar---size_small .bds2170Avatar-initials {
266
266
  font-size: var(--bds-font_size--body--s);
267
267
  }
268
- .bds2160Avatar-avatar.bds2160Avatar---size_large .bds2160Avatar-initials {
268
+ .bds2170Avatar-avatar.bds2170Avatar---size_large .bds2170Avatar-initials {
269
269
  font-size: var(--bds-font_size--heading-3);
270
270
  }
271
271
  }
272
272
 
273
273
  /* src/components/ui/Badge/Badge.module.css */
274
- @layer boostdev.bds2160Badge-component {
275
- .bds2160Badge-badge {
274
+ @layer boostdev.bds2170Badge-component {
275
+ .bds2170Badge-badge {
276
276
  display: inline-flex;
277
277
  align-items: center;
278
278
  justify-content: center;
@@ -285,34 +285,34 @@
285
285
  background-color: var(--badge_bg, var(--badge_bg--variant, var(--bds-color_blue)));
286
286
  color: var(--badge_text, var(--badge_text--variant, var(--bds-color_on-blue)));
287
287
  }
288
- .bds2160Badge---variant_primary {
288
+ .bds2170Badge---variant_primary {
289
289
  --badge_bg--variant: var(--badge_bg--primary, var(--bds-color_interactive));
290
290
  --badge_text--variant: var(--badge_text--primary, var(--bds-color_on-interactive));
291
291
  }
292
- .bds2160Badge---variant_secondary {
293
- --badge_bg--variant: var(--badge_bg--secondary, var(--bds-color_bg));
294
- --badge_text--variant: var(--badge_text--secondary, var(--bds-color_on-bg));
292
+ .bds2170Badge---variant_secondary {
293
+ --badge_bg--variant: var(--badge_bg--secondary, var(--bds-color_grey));
294
+ --badge_text--variant: var(--badge_text--secondary, var(--bds-color_on-grey));
295
295
  }
296
- .bds2160Badge---variant_success {
296
+ .bds2170Badge---variant_success {
297
297
  --badge_bg--variant: var(--badge_bg--success, var(--bds-color_success));
298
298
  --badge_text--variant: var(--badge_text--success, var(--bds-color_on-success));
299
299
  }
300
- .bds2160Badge---variant_error {
300
+ .bds2170Badge---variant_error {
301
301
  --badge_bg--variant: var(--badge_bg--error, var(--bds-color_error));
302
302
  --badge_text--variant: var(--badge_text--error, var(--bds-color_on-error));
303
303
  }
304
- .bds2160Badge---variant_warning {
304
+ .bds2170Badge---variant_warning {
305
305
  --badge_bg--variant: var(--badge_bg--warning, var(--bds-color_warning));
306
306
  --badge_text--variant: var(--badge_text--warning, var(--bds-color_on-warning));
307
307
  }
308
308
  }
309
309
 
310
310
  /* src/components/ui/Breadcrumb/Breadcrumb.module.css */
311
- @layer boostdev.bds2160Breadcrumb-component {
312
- .bds2160Breadcrumb-breadcrumb {
311
+ @layer boostdev.bds2170Breadcrumb-component {
312
+ .bds2170Breadcrumb-breadcrumb {
313
313
  font-size: var(--bds-font_size--body--s);
314
314
  }
315
- .bds2160Breadcrumb-list {
315
+ .bds2170Breadcrumb-list {
316
316
  display: flex;
317
317
  flex-wrap: wrap;
318
318
  align-items: center;
@@ -321,43 +321,43 @@
321
321
  margin: 0;
322
322
  padding: 0;
323
323
  }
324
- .bds2160Breadcrumb-item {
324
+ .bds2170Breadcrumb-item {
325
325
  display: flex;
326
326
  align-items: center;
327
327
  gap: var(--bds-space_xxs);
328
328
  }
329
- .bds2160Breadcrumb-link {
329
+ .bds2170Breadcrumb-link {
330
330
  color: var(--bds-color_interactive_on-bg);
331
331
  text-decoration: none;
332
332
  transition: var(--bds-animation_transition);
333
333
  }
334
- .bds2160Breadcrumb-link:focus-visible {
334
+ .bds2170Breadcrumb-link:focus-visible {
335
335
  outline: var(--bds-outline_default);
336
336
  outline-offset: var(--bds-outline_offset);
337
337
  border-radius: var(--bds-border_radius--xs);
338
338
  }
339
339
  @media (hover: hover) and (pointer: fine) {
340
- .bds2160Breadcrumb-link:hover {
340
+ .bds2170Breadcrumb-link:hover {
341
341
  text-decoration: underline;
342
342
  text-underline-offset: 0.2em;
343
343
  }
344
344
  }
345
- .bds2160Breadcrumb-separator {
345
+ .bds2170Breadcrumb-separator {
346
346
  color: var(--bds-color_on-bg--subtle);
347
347
  user-select: none;
348
348
  }
349
- .bds2160Breadcrumb-text {
349
+ .bds2170Breadcrumb-text {
350
350
  color: var(--bds-color_on-bg--subtle);
351
351
  }
352
- .bds2160Breadcrumb-current {
352
+ .bds2170Breadcrumb-current {
353
353
  color: var(--bds-color_on-bg--subtle);
354
354
  font-weight: var(--bds-font_weight--semibold);
355
355
  }
356
356
  }
357
357
 
358
358
  /* src/components/ui/Collapsible/Collapsible.module.css */
359
- @layer boostdev.bds2160Collapsible-component {
360
- .bds2160Collapsible-collapsible {
359
+ @layer boostdev.bds2170Collapsible-component {
360
+ .bds2170Collapsible-collapsible {
361
361
  border: var(--collapsible_border, none);
362
362
  --bdc_color: var(--collapsible_border-color, var(--bds-color_bg--subtle));
363
363
  --bdc-outline_radius: var(--collapsible_border-radius, var(--bds-border_radius--m));
@@ -365,7 +365,7 @@
365
365
  box-shadow: inset 0 0 0 var(--collapsible_border-width, var(--bdc-outline_width)) var(--bdc_color);
366
366
  overflow: hidden;
367
367
  }
368
- .bds2160Collapsible-summary {
368
+ .bds2170Collapsible-summary {
369
369
  list-style: none;
370
370
  display: flex;
371
371
  align-items: center;
@@ -380,25 +380,25 @@
380
380
  user-select: none;
381
381
  transition: var(--bds-animation_transition);
382
382
  }
383
- .bds2160Collapsible-summary::-webkit-details-marker {
383
+ .bds2170Collapsible-summary::-webkit-details-marker {
384
384
  display: none;
385
385
  }
386
- .bds2160Collapsible-summary:focus-visible {
386
+ .bds2170Collapsible-summary:focus-visible {
387
387
  outline: var(--bds-outline_default);
388
388
  outline-offset: calc(var(--bds-outline_offset) * -1);
389
389
  }
390
390
  @media (hover: hover) and (pointer: fine) {
391
- .bds2160Collapsible-summary:hover {
391
+ .bds2170Collapsible-summary:hover {
392
392
  background-color: var(--collapsible_bg--hover, var(--bds-color_bg--subtle));
393
393
  }
394
394
  }
395
- .bds2160Collapsible-collapsible[open] > .bds2160Collapsible-summary {
395
+ .bds2170Collapsible-collapsible[open] > .bds2170Collapsible-summary {
396
396
  border-block-end: var(--collapsible_border-width, 1px) solid var(--collapsible_border-color, var(--bds-color_bg--subtle));
397
397
  }
398
- .bds2160Collapsible-summaryContent {
398
+ .bds2170Collapsible-summaryContent {
399
399
  flex: 1;
400
400
  }
401
- .bds2160Collapsible-icon {
401
+ .bds2170Collapsible-icon {
402
402
  inline-size: 0.5rem;
403
403
  block-size: 0.5rem;
404
404
  border-inline-end: 2px solid currentcolor;
@@ -407,25 +407,25 @@
407
407
  flex-shrink: 0;
408
408
  transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
409
409
  }
410
- .bds2160Collapsible-collapsible[open] > .bds2160Collapsible-summary .bds2160Collapsible-icon {
410
+ .bds2170Collapsible-collapsible[open] > .bds2170Collapsible-summary .bds2170Collapsible-icon {
411
411
  transform: rotate(-135deg);
412
412
  }
413
- .bds2160Collapsible-content {
413
+ .bds2170Collapsible-content {
414
414
  padding: var(--bds-space_m);
415
415
  color: var(--collapsible_on-color, var(--bds-color_on-bg));
416
416
  font-size: var(--bds-font_size--body);
417
417
  line-height: var(--bds-font_line-height--body);
418
418
  }
419
419
  @media (prefers-reduced-motion: reduce) {
420
- .bds2160Collapsible-icon {
420
+ .bds2170Collapsible-icon {
421
421
  transition: none;
422
422
  }
423
423
  }
424
424
  }
425
425
 
426
426
  /* src/components/ui/Calendar/Calendar.module.css */
427
- @layer boostdev.bds2160Calendar-component {
428
- .bds2160Calendar-calendar {
427
+ @layer boostdev.bds2170Calendar-component {
428
+ .bds2170Calendar-calendar {
429
429
  display: inline-block;
430
430
  inline-size: fit-content;
431
431
  max-inline-size: 100%;
@@ -437,36 +437,36 @@
437
437
  padding: var(--bds-space_m);
438
438
  box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--calendar_shadow, var(--bds-shadow_s));
439
439
  }
440
- .bds2160Calendar-months {
440
+ .bds2170Calendar-months {
441
441
  display: flex;
442
442
  flex-wrap: wrap;
443
443
  gap: var(--bds-space_l);
444
444
  }
445
- .bds2160Calendar-month {
445
+ .bds2170Calendar-month {
446
446
  display: flex;
447
447
  flex-direction: column;
448
448
  gap: var(--bds-space_s);
449
449
  inline-size: var(--calendar_size, 17rem);
450
450
  max-inline-size: 100%;
451
451
  }
452
- .bds2160Calendar-monthHeader {
452
+ .bds2170Calendar-monthHeader {
453
453
  display: flex;
454
454
  align-items: center;
455
455
  justify-content: space-between;
456
456
  gap: var(--bds-space_xs);
457
457
  }
458
- .bds2160Calendar-navSlot {
458
+ .bds2170Calendar-navSlot {
459
459
  display: inline-flex;
460
460
  inline-size: 2.75rem;
461
461
  block-size: 2.75rem;
462
462
  flex: none;
463
463
  }
464
- .bds2160Calendar-monthYear {
464
+ .bds2170Calendar-monthYear {
465
465
  font-size: var(--bds-font_size--body);
466
466
  font-weight: var(--bds-font_weight--semibold);
467
467
  color: var(--bds-color_on-bg);
468
468
  }
469
- .bds2160Calendar-navBtn {
469
+ .bds2170Calendar-navBtn {
470
470
  all: unset;
471
471
  display: flex;
472
472
  align-items: center;
@@ -478,28 +478,28 @@
478
478
  color: var(--bds-color_on-bg);
479
479
  transition: var(--bds-animation_transition);
480
480
  }
481
- .bds2160Calendar-navBtn svg {
481
+ .bds2170Calendar-navBtn svg {
482
482
  inline-size: 1rem;
483
483
  block-size: 1rem;
484
484
  }
485
- .bds2160Calendar-navBtn:focus-visible {
485
+ .bds2170Calendar-navBtn:focus-visible {
486
486
  outline: var(--bds-outline_default);
487
487
  outline-offset: var(--bds-outline_offset);
488
488
  }
489
489
  @media (hover: hover) and (pointer: fine) {
490
- .bds2160Calendar-navBtn:hover {
490
+ .bds2170Calendar-navBtn:hover {
491
491
  background-color: var(--calendar_navBtn-bg--hover, var(--bds-color_bg--subtle));
492
492
  }
493
493
  }
494
- .bds2160Calendar-grid {
494
+ .bds2170Calendar-grid {
495
495
  display: grid;
496
496
  grid-template-columns: repeat(7, 1fr);
497
497
  gap: var(--bds-space_xxxs);
498
498
  }
499
- .bds2160Calendar-row {
499
+ .bds2170Calendar-row {
500
500
  display: contents;
501
501
  }
502
- .bds2160Calendar-weekday {
502
+ .bds2170Calendar-weekday {
503
503
  display: flex;
504
504
  align-items: center;
505
505
  justify-content: center;
@@ -509,11 +509,11 @@
509
509
  color: var(--bds-color_on-bg--subtle);
510
510
  user-select: none;
511
511
  }
512
- .bds2160Calendar-cell {
512
+ .bds2170Calendar-cell {
513
513
  display: flex;
514
514
  aspect-ratio: 1;
515
515
  }
516
- .bds2160Calendar-day {
516
+ .bds2170Calendar-day {
517
517
  all: unset;
518
518
  box-sizing: border-box;
519
519
  display: flex;
@@ -527,60 +527,60 @@
527
527
  cursor: pointer;
528
528
  transition: var(--bds-animation_transition);
529
529
  }
530
- .bds2160Calendar-day:focus-visible {
530
+ .bds2170Calendar-day:focus-visible {
531
531
  outline: var(--bds-outline_default);
532
532
  outline-offset: var(--bds-outline_offset);
533
533
  }
534
534
  @media (hover: hover) and (pointer: fine) {
535
- .bds2160Calendar-day:not(.bds2160Calendar-disabled, .bds2160Calendar-selected, .bds2160Calendar-rangeStart, .bds2160Calendar-rangeEnd):hover {
535
+ .bds2170Calendar-day:not(.bds2170Calendar-disabled, .bds2170Calendar-selected, .bds2170Calendar-rangeStart, .bds2170Calendar-rangeEnd):hover {
536
536
  background-color: var(--calendar_day-bg--hover, var(--bds-color_bg--subtle));
537
537
  }
538
538
  }
539
- .bds2160Calendar-outside {
539
+ .bds2170Calendar-outside {
540
540
  color: var(--bds-color_on-bg--subtle);
541
541
  opacity: 0.4;
542
542
  }
543
- .bds2160Calendar-today {
543
+ .bds2170Calendar-today {
544
544
  font-weight: var(--bds-font_weight--semibold);
545
545
  --bdc_color: var(--calendar_today-color, var(--bds-color_interactive));
546
546
  border: var(--calendar_today-border, none);
547
547
  box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--calendar_today-shadow, var(--bdc-outline_shadow));
548
548
  }
549
- .bds2160Calendar-selected {
549
+ .bds2170Calendar-selected {
550
550
  background-color: var(--calendar_day-bg--selected, var(--bds-color_interactive));
551
551
  color: var(--calendar_day-color--selected, var(--bds-color_on-interactive));
552
552
  font-weight: var(--bds-font_weight--semibold);
553
553
  }
554
- .bds2160Calendar-inRange {
554
+ .bds2170Calendar-inRange {
555
555
  background-color: var(--calendar_day-bg--in-range, var(--bds-color_blue--subtle));
556
556
  border-radius: 0;
557
557
  }
558
- .bds2160Calendar-rangeStart,
559
- .bds2160Calendar-rangeEnd {
558
+ .bds2170Calendar-rangeStart,
559
+ .bds2170Calendar-rangeEnd {
560
560
  background-color: var(--calendar_day-bg--selected, var(--bds-color_interactive));
561
561
  color: var(--calendar_day-color--selected, var(--bds-color_on-interactive));
562
562
  font-weight: var(--bds-font_weight--semibold);
563
563
  }
564
- .bds2160Calendar-disabled {
564
+ .bds2170Calendar-disabled {
565
565
  opacity: 0.35;
566
566
  cursor: not-allowed;
567
567
  }
568
568
  @media (prefers-reduced-motion: reduce) {
569
- .bds2160Calendar-day {
569
+ .bds2170Calendar-day {
570
570
  transition: none;
571
571
  }
572
572
  }
573
573
  }
574
574
 
575
575
  /* src/components/ui/Carousel/Carousel.module.css */
576
- @layer boostdev.bds2160Carousel-component {
577
- .bds2160Carousel-carousel {
576
+ @layer boostdev.bds2170Carousel-component {
577
+ .bds2170Carousel-carousel {
578
578
  position: relative;
579
579
  display: flex;
580
580
  align-items: center;
581
581
  gap: var(--bds-space_xs);
582
582
  }
583
- .bds2160Carousel-track {
583
+ .bds2170Carousel-track {
584
584
  display: flex;
585
585
  gap: var(--bds-space_m);
586
586
  overflow-inline: auto;
@@ -589,14 +589,14 @@
589
589
  flex: 1;
590
590
  scroll-behavior: smooth;
591
591
  }
592
- .bds2160Carousel-track::-webkit-scrollbar {
592
+ .bds2170Carousel-track::-webkit-scrollbar {
593
593
  display: none;
594
594
  }
595
- .bds2160Carousel-slide {
595
+ .bds2170Carousel-slide {
596
596
  scroll-snap-align: start;
597
597
  flex-shrink: 0;
598
598
  }
599
- .bds2160Carousel-navBtn {
599
+ .bds2170Carousel-navBtn {
600
600
  all: unset;
601
601
  display: flex;
602
602
  align-items: center;
@@ -613,29 +613,29 @@
613
613
  flex-shrink: 0;
614
614
  transition: var(--bds-animation_transition);
615
615
  }
616
- .bds2160Carousel-navBtn svg {
616
+ .bds2170Carousel-navBtn svg {
617
617
  inline-size: 1.25rem;
618
618
  block-size: 1.25rem;
619
619
  }
620
- .bds2160Carousel-navBtn:focus-visible {
620
+ .bds2170Carousel-navBtn:focus-visible {
621
621
  outline: var(--bds-outline_default);
622
622
  outline-offset: var(--bds-outline_offset);
623
623
  }
624
624
  @media (hover: hover) and (pointer: fine) {
625
- .bds2160Carousel-navBtn:hover {
625
+ .bds2170Carousel-navBtn:hover {
626
626
  background-color: var(--carousel_navBtn-bg--hover, var(--bds-color_bg--subtle));
627
627
  }
628
628
  }
629
629
  @media (prefers-reduced-motion: reduce) {
630
- .bds2160Carousel-track {
630
+ .bds2170Carousel-track {
631
631
  scroll-behavior: auto;
632
632
  }
633
633
  }
634
634
  }
635
635
 
636
636
  /* src/components/ui/DescriptionList/DescriptionList.module.css */
637
- @layer boostdev.bds2160DescriptionList-component {
638
- .bds2160DescriptionList-list {
637
+ @layer boostdev.bds2170DescriptionList-component {
638
+ .bds2170DescriptionList-list {
639
639
  display: flex;
640
640
  flex-direction: column;
641
641
  gap: var(--bds-space_s);
@@ -644,61 +644,61 @@
644
644
  font-size: var(--bds-font_size--body);
645
645
  color: var(--bds-color_on-bg);
646
646
  }
647
- .bds2160DescriptionList-group {
647
+ .bds2170DescriptionList-group {
648
648
  display: flex;
649
649
  flex-direction: column;
650
650
  gap: var(--bds-space_xxs);
651
651
  }
652
- .bds2160DescriptionList-term {
652
+ .bds2170DescriptionList-term {
653
653
  font-weight: var(--bds-font_weight--semibold);
654
654
  color: var(--bds-color_on-bg);
655
655
  }
656
- .bds2160DescriptionList-details {
656
+ .bds2170DescriptionList-details {
657
657
  margin: 0;
658
658
  color: var(--bds-color_on-bg);
659
659
  }
660
- .bds2160DescriptionList---layout_inline .bds2160DescriptionList-group {
660
+ .bds2170DescriptionList---layout_inline .bds2170DescriptionList-group {
661
661
  display: grid;
662
662
  grid-template-columns: minmax(8rem, 1fr) 2fr;
663
663
  gap: var(--bds-space_xs);
664
664
  align-items: baseline;
665
665
  }
666
- .bds2160DescriptionList---layout_inline .bds2160DescriptionList-term {
666
+ .bds2170DescriptionList---layout_inline .bds2170DescriptionList-term {
667
667
  grid-column: 1;
668
668
  }
669
- .bds2160DescriptionList---layout_inline .bds2160DescriptionList-details {
669
+ .bds2170DescriptionList---layout_inline .bds2170DescriptionList-details {
670
670
  grid-column: 2;
671
671
  }
672
672
  }
673
673
 
674
674
  /* src/components/ui/Link/Link.module.css */
675
- @layer boostdev.bds2160Link-component {
676
- .bds2160Link-link {
675
+ @layer boostdev.bds2170Link-component {
676
+ .bds2170Link-link {
677
677
  color: var(--link_color, var(--link_color--variant, var(--bds-color_interactive_on-bg)));
678
678
  text-decoration: underline;
679
679
  text-underline-offset: 0.2em;
680
680
  transition: var(--bds-animation_transition);
681
681
  cursor: pointer;
682
682
  }
683
- .bds2160Link-link:focus-visible {
683
+ .bds2170Link-link:focus-visible {
684
684
  outline: var(--bds-outline_default);
685
685
  outline-offset: var(--bds-outline_offset);
686
686
  border-radius: var(--bds-border_radius--xs);
687
687
  }
688
688
  @media (hover: hover) and (pointer: fine) {
689
- .bds2160Link-link:hover {
689
+ .bds2170Link-link:hover {
690
690
  color: var(--link_color-hover, var(--link_color-hover--variant, var(--bds-color_blue--strong)));
691
691
  }
692
692
  }
693
- .bds2160Link---variant_default {
693
+ .bds2170Link---variant_default {
694
694
  --link_color--variant: var(--link_color--default, var(--bds-color_interactive_on-bg));
695
695
  --link_color-hover--variant: var(--link_color-hover--default, var(--bds-color_blue--strong));
696
696
  }
697
- .bds2160Link---variant_subtle {
697
+ .bds2170Link---variant_subtle {
698
698
  --link_color--variant: var(--link_color--subtle, var(--bds-color_on-bg));
699
699
  --link_color-hover--variant: var(--link_color-hover--subtle, var(--bds-color_interactive_on-bg));
700
700
  }
701
- .bds2160Link---variant_standalone {
701
+ .bds2170Link---variant_standalone {
702
702
  --link_color--variant: var(--link_color--standalone, var(--bds-color_interactive_on-bg));
703
703
  --link_color-hover--variant: var(--link_color-hover--standalone, var(--bds-color_blue--strong));
704
704
  display: inline-flex;
@@ -708,12 +708,12 @@
708
708
  text-decoration: none;
709
709
  }
710
710
  @media (hover: hover) and (pointer: fine) {
711
- .bds2160Link---variant_standalone:hover {
711
+ .bds2170Link---variant_standalone:hover {
712
712
  text-decoration: underline;
713
713
  text-underline-offset: 0.2em;
714
714
  }
715
715
  }
716
- .bds2160Link-externalLabel {
716
+ .bds2170Link-externalLabel {
717
717
  position: absolute;
718
718
  inline-size: 1px;
719
719
  block-size: 1px;
@@ -727,13 +727,13 @@
727
727
  }
728
728
 
729
729
  /* src/components/ui/Loading/Loading.module.css */
730
- @layer boostdev.bds2160Loading-component {
731
- .bds2160Loading-loading {
730
+ @layer boostdev.bds2170Loading-component {
731
+ .bds2170Loading-loading {
732
732
  display: flex;
733
733
  justify-content: center;
734
734
  align-items: center;
735
735
  }
736
- .bds2160Loading-spinner {
736
+ .bds2170Loading-spinner {
737
737
  inline-size: 2.5em;
738
738
  block-size: 2.5em;
739
739
  border: 4px solid var(--bds-color_bg);
@@ -741,18 +741,18 @@
741
741
  border-radius: var(--loading_radius, var(--bds-border_radius--circle));
742
742
  animation: spin 1s linear infinite;
743
743
  }
744
- .bds2160Loading---size_small .bds2160Loading-spinner {
744
+ .bds2170Loading---size_small .bds2170Loading-spinner {
745
745
  inline-size: 1.5em;
746
746
  block-size: 1.5em;
747
747
  border-width: 2px;
748
748
  }
749
- .bds2160Loading---size_large .bds2160Loading-spinner {
749
+ .bds2170Loading---size_large .bds2170Loading-spinner {
750
750
  inline-size: 4em;
751
751
  block-size: 4em;
752
752
  border-width: 6px;
753
753
  }
754
754
  @media (prefers-reduced-motion: reduce) {
755
- .bds2160Loading-spinner {
755
+ .bds2170Loading-spinner {
756
756
  animation: none;
757
757
  }
758
758
  }
@@ -767,8 +767,8 @@
767
767
  }
768
768
 
769
769
  /* src/components/ui/NotificationBanner/NotificationBanner.module.css */
770
- @layer boostdev.bds2160NotificationBanner-component {
771
- .bds2160NotificationBanner-banner {
770
+ @layer boostdev.bds2170NotificationBanner-component {
771
+ .bds2170NotificationBanner-banner {
772
772
  display: flex;
773
773
  align-items: center;
774
774
  gap: var(--bds-space_m);
@@ -780,54 +780,54 @@
780
780
  line-height: var(--bds-font_line-height--body);
781
781
  inline-size: 100%;
782
782
  }
783
- .bds2160NotificationBanner---variant_info {
783
+ .bds2170NotificationBanner---variant_info {
784
784
  --banner_bg--variant: var(--banner_bg--info, var(--bds-color_blue--subtle));
785
785
  --banner_text--variant: var(--banner_text--info, var(--bds-color_on-blue--subtle));
786
786
  --banner_border--variant: var(--banner_border--info, var(--bds-color_blue));
787
787
  }
788
- .bds2160NotificationBanner---variant_success {
788
+ .bds2170NotificationBanner---variant_success {
789
789
  --banner_bg--variant: var(--banner_bg--success, var(--bds-color_success--subtle));
790
790
  --banner_text--variant: var(--banner_text--success, var(--bds-color_on-success--subtle));
791
791
  --banner_border--variant: var(--banner_border--success, var(--bds-color_success));
792
792
  }
793
- .bds2160NotificationBanner---variant_warning {
793
+ .bds2170NotificationBanner---variant_warning {
794
794
  --banner_bg--variant: var(--banner_bg--warning, var(--bds-color_orange--subtle));
795
795
  --banner_text--variant: var(--banner_text--warning, var(--bds-color_on-orange--subtle));
796
796
  --banner_border--variant: var(--banner_border--warning, var(--bds-color_warning));
797
797
  }
798
- .bds2160NotificationBanner---variant_error {
799
- --banner_bg--variant: var(--banner_bg--error, rgb(from var(--bds-color_error) r g b / 12%));
800
- --banner_text--variant: var(--banner_text--error, var(--bds-color_on-bg));
798
+ .bds2170NotificationBanner---variant_error {
799
+ --banner_bg--variant: var(--banner_bg--error, var(--bds-color_error--subtle));
800
+ --banner_text--variant: var(--banner_text--error, var(--bds-color_on-error--subtle));
801
801
  --banner_border--variant: var(--banner_border--error, var(--bds-color_error));
802
802
  }
803
- .bds2160NotificationBanner---appearance_gradient {
803
+ .bds2170NotificationBanner---appearance_gradient {
804
804
  background-image: var(--banner_gradient, linear-gradient(100deg, transparent 35%, var(--bds-color_bg--strong, var(--bds-color_bg)) 100%));
805
805
  box-shadow: var(--banner_shadow, var(--bds-shadow_s));
806
806
  }
807
- .bds2160NotificationBanner---appearance_gradient.bds2160NotificationBanner---variant_info {
807
+ .bds2170NotificationBanner---appearance_gradient.bds2170NotificationBanner---variant_info {
808
808
  --banner_border--variant: var(--banner_border--info, var(--banner_accent--info, var(--bds-color_on-blue--subtle)));
809
809
  }
810
- .bds2160NotificationBanner---appearance_gradient.bds2160NotificationBanner---variant_success {
810
+ .bds2170NotificationBanner---appearance_gradient.bds2170NotificationBanner---variant_success {
811
811
  --banner_border--variant: var(--banner_border--success, var(--banner_accent--success, var(--bds-color_on-success--subtle)));
812
812
  }
813
- .bds2160NotificationBanner---appearance_gradient.bds2160NotificationBanner---variant_warning {
813
+ .bds2170NotificationBanner---appearance_gradient.bds2170NotificationBanner---variant_warning {
814
814
  --banner_border--variant: var(--banner_border--warning, var(--banner_accent--warning, var(--bds-color_warning)));
815
815
  }
816
- .bds2160NotificationBanner---appearance_gradient.bds2160NotificationBanner---variant_error {
816
+ .bds2170NotificationBanner---appearance_gradient.bds2170NotificationBanner---variant_error {
817
817
  --banner_border--variant: var(--banner_border--error, var(--banner_accent--error, var(--bds-color_error)));
818
818
  }
819
- .bds2160NotificationBanner-icon {
819
+ .bds2170NotificationBanner-icon {
820
820
  display: flex;
821
821
  align-items: center;
822
822
  flex-shrink: 0;
823
823
  }
824
- .bds2160NotificationBanner-content {
824
+ .bds2170NotificationBanner-content {
825
825
  flex: 1;
826
826
  }
827
- .bds2160NotificationBanner-action {
827
+ .bds2170NotificationBanner-action {
828
828
  flex-shrink: 0;
829
829
  }
830
- .bds2160NotificationBanner-dismiss {
830
+ .bds2170NotificationBanner-dismiss {
831
831
  all: unset;
832
832
  display: flex;
833
833
  align-items: center;
@@ -843,28 +843,28 @@
843
843
  --bdc_color: currentcolor;
844
844
  box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
845
845
  }
846
- .bds2160NotificationBanner-dismiss svg {
846
+ .bds2170NotificationBanner-dismiss svg {
847
847
  inline-size: 1rem;
848
848
  block-size: 1rem;
849
849
  }
850
- .bds2160NotificationBanner-dismiss:focus-visible {
850
+ .bds2170NotificationBanner-dismiss:focus-visible {
851
851
  outline: var(--bds-outline_default);
852
852
  outline-offset: var(--bds-outline_offset);
853
853
  }
854
854
  @media (hover: hover) and (pointer: fine) {
855
- .bds2160NotificationBanner-dismiss:hover {
855
+ .bds2170NotificationBanner-dismiss:hover {
856
856
  opacity: var(--banner_dismiss-opacity--hover, 0.7);
857
857
  }
858
858
  }
859
859
  }
860
860
 
861
861
  /* src/components/ui/Pagination/Pagination.module.css */
862
- @layer boostdev.bds2160Pagination-component {
863
- .bds2160Pagination-pagination {
862
+ @layer boostdev.bds2170Pagination-component {
863
+ .bds2170Pagination-pagination {
864
864
  display: flex;
865
865
  justify-content: center;
866
866
  }
867
- .bds2160Pagination-list {
867
+ .bds2170Pagination-list {
868
868
  display: flex;
869
869
  align-items: center;
870
870
  gap: var(--bds-space_xxs);
@@ -872,10 +872,10 @@
872
872
  margin: 0;
873
873
  padding: 0;
874
874
  }
875
- .bds2160Pagination-list li {
875
+ .bds2170Pagination-list li {
876
876
  list-style: none;
877
877
  }
878
- .bds2160Pagination-button {
878
+ .bds2170Pagination-button {
879
879
  all: unset;
880
880
  display: inline-flex;
881
881
  align-items: center;
@@ -896,30 +896,30 @@
896
896
  transition: var(--bds-animation_transition);
897
897
  box-sizing: border-box;
898
898
  }
899
- .bds2160Pagination-button:disabled {
899
+ .bds2170Pagination-button:disabled {
900
900
  opacity: 0.4;
901
901
  cursor: not-allowed;
902
902
  }
903
- .bds2160Pagination-button:focus-visible {
903
+ .bds2170Pagination-button:focus-visible {
904
904
  outline: var(--bds-outline_default);
905
905
  outline-offset: var(--bds-outline_offset);
906
906
  }
907
907
  @media (hover: hover) and (pointer: fine) {
908
- .bds2160Pagination-button:not(:disabled, .bds2160Pagination---active):hover {
908
+ .bds2170Pagination-button:not(:disabled, .bds2170Pagination---active):hover {
909
909
  --btn_bg--state: var(--pagination_item-bg--hover, var(--btn_bg--hover, var(--bds-color_bg--subtle)));
910
910
  --btn_color--state: var(--pagination_item-color--hover, var(--btn_color--hover, var(--bds-color_interactive_on-bg)));
911
911
  }
912
912
  }
913
- .bds2160Pagination-button.bds2160Pagination---active {
913
+ .bds2170Pagination-button.bds2170Pagination---active {
914
914
  --btn_bg--state: var(--pagination_item-bg--active, var(--btn_bg--active, var(--bdc-color_active)));
915
915
  --btn_color--state: var(--pagination_item-color--active, var(--btn_color--active, var(--bdc-color_on-active)));
916
916
  --btn_border--state: var(--pagination_item-border--active, var(--btn_border--active, var(--bdc-color_active)));
917
917
  }
918
- .bds2160Pagination-button.bds2160Pagination---nav svg {
918
+ .bds2170Pagination-button.bds2170Pagination---nav svg {
919
919
  inline-size: 1rem;
920
920
  block-size: 1rem;
921
921
  }
922
- .bds2160Pagination-ellipsis {
922
+ .bds2170Pagination-ellipsis {
923
923
  display: inline-flex;
924
924
  align-items: center;
925
925
  justify-content: center;
@@ -932,71 +932,71 @@
932
932
  }
933
933
 
934
934
  /* src/components/ui/Progress/Progress.module.css */
935
- @layer boostdev.bds2160Progress-component {
936
- .bds2160Progress-container {
935
+ @layer boostdev.bds2170Progress-component {
936
+ .bds2170Progress-container {
937
937
  display: flex;
938
938
  flex-direction: column;
939
939
  gap: var(--bds-space_xxs);
940
940
  inline-size: 100%;
941
941
  }
942
- .bds2160Progress-labelRow {
942
+ .bds2170Progress-labelRow {
943
943
  display: flex;
944
944
  justify-content: space-between;
945
945
  align-items: baseline;
946
946
  font-size: var(--bds-font_size--body--s);
947
947
  color: var(--bds-color_on-bg);
948
948
  }
949
- .bds2160Progress-value {
949
+ .bds2170Progress-value {
950
950
  font-variant-numeric: tabular-nums;
951
951
  }
952
- .bds2160Progress-track {
952
+ .bds2170Progress-track {
953
953
  inline-size: 100%;
954
954
  block-size: var(--progress_height, var(--bds-space_xs));
955
955
  background-color: var(--progress_color-track, var(--bds-color_bg--subtle));
956
956
  border-radius: var(--progress_radius, var(--bds-border_radius--full));
957
957
  overflow: hidden;
958
958
  }
959
- .bds2160Progress-track.bds2160Progress---size_small {
959
+ .bds2170Progress-track.bds2170Progress---size_small {
960
960
  --progress_height: var(--bds-space_xxs);
961
961
  }
962
- .bds2160Progress-track.bds2160Progress---size_medium {
962
+ .bds2170Progress-track.bds2170Progress---size_medium {
963
963
  --progress_height: var(--bds-space_xs);
964
964
  }
965
- .bds2160Progress-track.bds2160Progress---size_large {
965
+ .bds2170Progress-track.bds2170Progress---size_large {
966
966
  --progress_height: var(--bds-space_s);
967
967
  }
968
- .bds2160Progress-fill {
968
+ .bds2170Progress-fill {
969
969
  block-size: 100%;
970
970
  background-color: var(--progress_color-active, var(--bdc-color_active));
971
971
  border-radius: var(--progress_radius, var(--bds-border_radius--full));
972
972
  transition: inline-size var(--bds-animation_transition-duration) var(--bds-animation_easing);
973
973
  }
974
974
  @media (prefers-reduced-motion: reduce) {
975
- .bds2160Progress-fill {
975
+ .bds2170Progress-fill {
976
976
  transition: none;
977
977
  }
978
978
  }
979
979
  }
980
980
 
981
981
  /* src/components/ui/ProgressCircle/ProgressCircle.module.css */
982
- @layer boostdev.bds2160ProgressCircle-component {
983
- .bds2160ProgressCircle-wrapper {
982
+ @layer boostdev.bds2170ProgressCircle-component {
983
+ .bds2170ProgressCircle-wrapper {
984
984
  position: relative;
985
985
  display: inline-flex;
986
986
  align-items: center;
987
987
  justify-content: center;
988
988
  }
989
- .bds2160ProgressCircle-svg {
989
+ .bds2170ProgressCircle-svg {
990
990
  display: block;
991
991
  }
992
- .bds2160ProgressCircle-track {
992
+ .bds2170ProgressCircle-track {
993
993
  stroke: var(--progressCircle_color-track, var(--bds-color_bg--subtle));
994
994
  }
995
- .bds2160ProgressCircle-fill {
995
+ .bds2170ProgressCircle-fill {
996
996
  stroke: var(--progressCircle_color-active, var(--bdc-color_active));
997
997
  transition: stroke-dashoffset var(--bds-animation_transition-duration) var(--bds-animation_easing);
998
998
  }
999
- .bds2160ProgressCircle-value {
999
+ .bds2170ProgressCircle-value {
1000
1000
  position: absolute;
1001
1001
  font-size: var(--bds-font_size--body--s);
1002
1002
  font-weight: var(--bds-font_weight--semibold);
@@ -1004,29 +1004,29 @@
1004
1004
  color: var(--bds-color_on-bg);
1005
1005
  line-height: 1;
1006
1006
  }
1007
- .bds2160ProgressCircle---size_small .bds2160ProgressCircle-value {
1007
+ .bds2170ProgressCircle---size_small .bds2170ProgressCircle-value {
1008
1008
  font-size: var(--progressCircle_font-size--small, var(--bds-font_size--body--s));
1009
1009
  }
1010
- .bds2160ProgressCircle---size_medium .bds2160ProgressCircle-value {
1010
+ .bds2170ProgressCircle---size_medium .bds2170ProgressCircle-value {
1011
1011
  font-size: var(--bds-font_size--body--s);
1012
1012
  }
1013
- .bds2160ProgressCircle---size_large .bds2160ProgressCircle-value {
1013
+ .bds2170ProgressCircle---size_large .bds2170ProgressCircle-value {
1014
1014
  font-size: var(--bds-font_size--body);
1015
1015
  }
1016
1016
  @media (prefers-reduced-motion: reduce) {
1017
- .bds2160ProgressCircle-fill {
1017
+ .bds2170ProgressCircle-fill {
1018
1018
  transition: none;
1019
1019
  }
1020
1020
  }
1021
1021
  }
1022
1022
 
1023
1023
  /* src/components/ui/Separator/Separator.module.css */
1024
- @layer boostdev.bds2160Separator-component {
1025
- .bds2160Separator-separator {
1024
+ @layer boostdev.bds2170Separator-component {
1025
+ .bds2170Separator-separator {
1026
1026
  border: none;
1027
1027
  background-color: var(--separator_color, var(--bds-color_on-bg--as-surface, var(--bds-color_on-bg--border, var(--bds-color_on-bg))));
1028
1028
  }
1029
- .bds2160Separator-separator.bds2160Separator---horizontal {
1029
+ .bds2170Separator-separator.bds2170Separator---horizontal {
1030
1030
  display: block;
1031
1031
  inline-size: 100%;
1032
1032
  block-size: var(--separator_thickness, 1px);
@@ -1034,7 +1034,7 @@
1034
1034
  padding-block: var(--separator_spacing, 0);
1035
1035
  background-clip: content-box;
1036
1036
  }
1037
- .bds2160Separator-separator.bds2160Separator---vertical {
1037
+ .bds2170Separator-separator.bds2170Separator---vertical {
1038
1038
  display: inline-block;
1039
1039
  inline-size: var(--separator_thickness, 1px);
1040
1040
  min-block-size: var(--separator_length, 1em);
@@ -1046,8 +1046,8 @@
1046
1046
  }
1047
1047
 
1048
1048
  /* src/components/ui/Skeleton/Skeleton.module.css */
1049
- @layer boostdev.bds2160Skeleton-component {
1050
- .bds2160Skeleton-skeleton {
1049
+ @layer boostdev.bds2170Skeleton-component {
1050
+ .bds2170Skeleton-skeleton {
1051
1051
  background:
1052
1052
  linear-gradient(
1053
1053
  90deg,
@@ -1060,7 +1060,7 @@
1060
1060
  min-block-size: var(--skeleton_min-block-size, var(--bds-space_m));
1061
1061
  }
1062
1062
  @media (prefers-reduced-motion: reduce) {
1063
- .bds2160Skeleton-skeleton {
1063
+ .bds2170Skeleton-skeleton {
1064
1064
  animation: none;
1065
1065
  background: var(--skeleton_color-base, var(--bds-color_grey--subtle));
1066
1066
  }
@@ -1076,8 +1076,8 @@
1076
1076
  }
1077
1077
 
1078
1078
  /* src/components/ui/SkipLink/SkipLink.module.css */
1079
- @layer boostdev.bds2160SkipLink-component {
1080
- .bds2160SkipLink-skipLink {
1079
+ @layer boostdev.bds2170SkipLink-component {
1080
+ .bds2170SkipLink-skipLink {
1081
1081
  position: absolute;
1082
1082
  inset-block-start: var(--skip-link_inset, var(--bds-space_s));
1083
1083
  inset-inline-start: var(--skip-link_inset, var(--bds-space_s));
@@ -1095,21 +1095,21 @@
1095
1095
  transform: translateY(-200%);
1096
1096
  transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
1097
1097
  }
1098
- .bds2160SkipLink-skipLink:focus-visible {
1098
+ .bds2170SkipLink-skipLink:focus-visible {
1099
1099
  transform: translateY(0);
1100
1100
  outline: var(--bds-outline_default);
1101
1101
  outline-offset: var(--bds-outline_offset);
1102
1102
  }
1103
1103
  @media (prefers-reduced-motion: reduce) {
1104
- .bds2160SkipLink-skipLink {
1104
+ .bds2170SkipLink-skipLink {
1105
1105
  transition: none;
1106
1106
  }
1107
1107
  }
1108
1108
  }
1109
1109
 
1110
1110
  /* src/components/ui/Table/Table.module.css */
1111
- @layer boostdev.bds2160Table-component {
1112
- .bds2160Table-wrapper {
1111
+ @layer boostdev.bds2170Table-component {
1112
+ .bds2170Table-wrapper {
1113
1113
  inline-size: 100%;
1114
1114
  overflow-inline: auto;
1115
1115
  border: var(--table_border, none);
@@ -1118,27 +1118,27 @@
1118
1118
  border-radius: var(--table_radius, var(--bdc-outline_radius));
1119
1119
  box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--table_shadow, var(--bdc-outline_shadow));
1120
1120
  }
1121
- .bds2160Table-wrapper:focus-visible {
1121
+ .bds2170Table-wrapper:focus-visible {
1122
1122
  outline: var(--bds-outline_default);
1123
1123
  outline-offset: calc(var(--bds-outline_offset) * -1);
1124
1124
  }
1125
- .bds2160Table-table {
1125
+ .bds2170Table-table {
1126
1126
  inline-size: 100%;
1127
1127
  border-collapse: collapse;
1128
1128
  font-size: var(--table_font-size, var(--bds-font_size--body));
1129
1129
  font-family: var(--bds-font_family--body);
1130
1130
  }
1131
- .bds2160Table-caption {
1131
+ .bds2170Table-caption {
1132
1132
  caption-side: top;
1133
1133
  text-align: start;
1134
1134
  padding: var(--table_cell-padding, var(--bds-space_s) var(--bds-space_m));
1135
1135
  font-weight: var(--bds-font_weight--semibold);
1136
1136
  color: var(--bds-color_on-bg);
1137
1137
  }
1138
- .bds2160Table-thead {
1138
+ .bds2170Table-thead {
1139
1139
  background-color: var(--table_header-bg, var(--bds-color_bg--subtle));
1140
1140
  }
1141
- .bds2160Table-th {
1141
+ .bds2170Table-th {
1142
1142
  padding: var(--table_cell-padding, var(--bds-space_s) var(--bds-space_m));
1143
1143
  text-align: start;
1144
1144
  font-weight: var(--table_header-font-weight, var(--bds-font_weight--bold));
@@ -1147,10 +1147,10 @@
1147
1147
  white-space: nowrap;
1148
1148
  border-block-end: 1px solid var(--table_divider-color, var(--bds-color_on-bg--as-surface, var(--bds-color_on-bg--border, var(--bds-color_bg--subtle))));
1149
1149
  }
1150
- .bds2160Table-th.bds2160Table---sortable {
1150
+ .bds2170Table-th.bds2170Table---sortable {
1151
1151
  padding: 0;
1152
1152
  }
1153
- .bds2160Table-sortButton {
1153
+ .bds2170Table-sortButton {
1154
1154
  all: unset;
1155
1155
  display: flex;
1156
1156
  align-items: center;
@@ -1164,64 +1164,64 @@
1164
1164
  transition: var(--bds-animation_transition);
1165
1165
  box-sizing: border-box;
1166
1166
  }
1167
- .bds2160Table-sortButton:focus-visible {
1167
+ .bds2170Table-sortButton:focus-visible {
1168
1168
  outline: var(--bds-outline_default);
1169
1169
  outline-offset: calc(var(--bds-outline_offset) * -1);
1170
1170
  }
1171
1171
  @media (hover: hover) and (pointer: fine) {
1172
- .bds2160Table-sortButton:hover {
1172
+ .bds2170Table-sortButton:hover {
1173
1173
  color: var(--table_sortBtn-color--hover, var(--bds-color_on-bg));
1174
1174
  }
1175
1175
  }
1176
- .bds2160Table-sortIcon {
1176
+ .bds2170Table-sortIcon {
1177
1177
  inline-size: 1rem;
1178
1178
  block-size: 1rem;
1179
1179
  opacity: 0.4;
1180
1180
  transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing), opacity var(--bds-animation_transition-duration) var(--bds-animation_easing);
1181
1181
  }
1182
- .bds2160Table-sortIcon.bds2160Table---sort-active {
1182
+ .bds2170Table-sortIcon.bds2170Table---sort-active {
1183
1183
  opacity: 1;
1184
1184
  color: var(--bds-color_interactive);
1185
1185
  }
1186
- .bds2160Table-sortIcon.bds2160Table---sort-desc {
1186
+ .bds2170Table-sortIcon.bds2170Table---sort-desc {
1187
1187
  transform: rotate(180deg);
1188
1188
  }
1189
- .bds2160Table-tbody .bds2160Table-tr {
1189
+ .bds2170Table-tbody .bds2170Table-tr {
1190
1190
  border-block-end: 1px solid var(--table_divider-color, var(--bds-color_on-bg--as-surface, var(--bds-color_on-bg--border, var(--bds-color_bg--subtle))));
1191
1191
  transition: var(--bds-animation_transition);
1192
1192
  }
1193
- .bds2160Table-tbody .bds2160Table-tr:last-child {
1193
+ .bds2170Table-tbody .bds2170Table-tr:last-child {
1194
1194
  border-block-end: none;
1195
1195
  }
1196
1196
  @media (hover: hover) and (pointer: fine) {
1197
- .bds2160Table-tbody .bds2160Table-tr:hover {
1197
+ .bds2170Table-tbody .bds2170Table-tr:hover {
1198
1198
  background-color: var(--table_row-bg--hover, var(--bds-color_bg--subtle));
1199
1199
  }
1200
1200
  }
1201
- .bds2160Table-td {
1201
+ .bds2170Table-td {
1202
1202
  padding: var(--table_cell-padding, var(--bds-space_s) var(--bds-space_m));
1203
1203
  color: var(--bds-color_on-bg);
1204
1204
  vertical-align: middle;
1205
1205
  }
1206
1206
  @media (prefers-reduced-motion: reduce) {
1207
- .bds2160Table-sortIcon {
1207
+ .bds2170Table-sortIcon {
1208
1208
  transition: none;
1209
1209
  }
1210
1210
  }
1211
1211
  }
1212
1212
 
1213
1213
  /* src/components/ui/Tabs/Tabs.module.css */
1214
- @layer boostdev.bds2160Tabs-component {
1215
- .bds2160Tabs-tabs {
1214
+ @layer boostdev.bds2170Tabs-component {
1215
+ .bds2170Tabs-tabs {
1216
1216
  display: flex;
1217
1217
  flex-direction: column;
1218
1218
  }
1219
- .bds2160Tabs-tabList {
1219
+ .bds2170Tabs-tabList {
1220
1220
  display: flex;
1221
1221
  border-block-end: 1px solid var(--tabs_divider-color, var(--bds-color_on-bg--as-surface, var(--bds-color_on-bg--border, var(--bds-color_bg--subtle))));
1222
1222
  gap: var(--tabs_gap, var(--bds-space_xxs));
1223
1223
  }
1224
- .bds2160Tabs-tab {
1224
+ .bds2170Tabs-tab {
1225
1225
  all: unset;
1226
1226
  display: inline-flex;
1227
1227
  align-items: center;
@@ -1235,10 +1235,10 @@
1235
1235
  cursor: pointer;
1236
1236
  transition: var(--bds-animation_transition);
1237
1237
  }
1238
- .bds2160Tabs-label {
1238
+ .bds2170Tabs-label {
1239
1239
  display: inline-grid;
1240
1240
  }
1241
- .bds2160Tabs-label::after {
1241
+ .bds2170Tabs-label::after {
1242
1242
  content: attr(data-label);
1243
1243
  grid-area: 1 / 1;
1244
1244
  font-weight: var(--tab_font-weight, var(--tab_font-weight--active, var(--bds-font_weight--bold)));
@@ -1247,42 +1247,42 @@
1247
1247
  block-size: 0;
1248
1248
  overflow: hidden;
1249
1249
  }
1250
- .bds2160Tabs-tab.bds2160Tabs---active {
1250
+ .bds2170Tabs-tab.bds2170Tabs---active {
1251
1251
  --tab_color--state: var(--tab_color--active, var(--bds-color_on-bg));
1252
1252
  --tab_font-weight--state: var(--tab_font-weight--active, var(--bds-font_weight--bold));
1253
1253
  --tab_border-color--state: var(--tab_border-color--active, var(--bds-color_interactive));
1254
1254
  }
1255
- .bds2160Tabs-tab:disabled {
1255
+ .bds2170Tabs-tab:disabled {
1256
1256
  opacity: 0.4;
1257
1257
  cursor: not-allowed;
1258
1258
  }
1259
- .bds2160Tabs-tab:focus-visible {
1259
+ .bds2170Tabs-tab:focus-visible {
1260
1260
  outline: var(--bds-outline_default);
1261
1261
  outline-offset: var(--bds-outline_offset);
1262
1262
  border-radius: var(--bds-border_radius--xs);
1263
1263
  }
1264
1264
  @media (hover: hover) and (pointer: fine) {
1265
- .bds2160Tabs-tab:not(:disabled, .bds2160Tabs---active):hover {
1265
+ .bds2170Tabs-tab:not(:disabled, .bds2170Tabs---active):hover {
1266
1266
  --tab_color--state: var(--tab_color--hover, var(--bds-color_on-bg));
1267
1267
  }
1268
1268
  }
1269
- .bds2160Tabs-panel {
1269
+ .bds2170Tabs-panel {
1270
1270
  padding-block-start: var(--tabs_panel-padding, var(--bds-space_m));
1271
1271
  }
1272
- .bds2160Tabs-panel:focus-visible {
1272
+ .bds2170Tabs-panel:focus-visible {
1273
1273
  outline: var(--bds-outline_default);
1274
1274
  outline-offset: var(--bds-outline_offset);
1275
1275
  }
1276
1276
  }
1277
1277
 
1278
1278
  /* src/components/ui/Tooltip/Tooltip.module.css */
1279
- @layer boostdev.bds2160Tooltip-component {
1280
- .bds2160Tooltip-wrapper {
1279
+ @layer boostdev.bds2170Tooltip-component {
1280
+ .bds2170Tooltip-wrapper {
1281
1281
  position: relative;
1282
1282
  display: inline-flex;
1283
1283
  align-items: center;
1284
1284
  }
1285
- .bds2160Tooltip-tooltip {
1285
+ .bds2170Tooltip-tooltip {
1286
1286
  display: block;
1287
1287
  position: absolute;
1288
1288
  z-index: var(--bds-z-index_popover);
@@ -1301,72 +1301,72 @@
1301
1301
  opacity: 0;
1302
1302
  transition: opacity var(--bds-animation_transition-duration) var(--bds-animation_easing);
1303
1303
  }
1304
- [dir=rtl] .bds2160Tooltip-tooltip,
1305
- .bds2160Tooltip-tooltip[dir=rtl] {
1304
+ [dir=rtl] .bds2170Tooltip-tooltip,
1305
+ .bds2170Tooltip-tooltip[dir=rtl] {
1306
1306
  --tooltip_dir: -1;
1307
1307
  }
1308
- .bds2160Tooltip---visible {
1308
+ .bds2170Tooltip---visible {
1309
1309
  visibility: visible;
1310
1310
  opacity: 1;
1311
1311
  pointer-events: auto;
1312
1312
  }
1313
- .bds2160Tooltip---placement_top {
1313
+ .bds2170Tooltip---placement_top {
1314
1314
  inset-block-end: calc(100% + var(--tooltip_offset, var(--bds-space_xs)));
1315
1315
  inset-inline-start: 50%;
1316
1316
  transform: translateX(calc(-50% * var(--tooltip_dir, 1)));
1317
1317
  }
1318
- .bds2160Tooltip---placement_bottom {
1318
+ .bds2170Tooltip---placement_bottom {
1319
1319
  inset-block-start: calc(100% + var(--tooltip_offset, var(--bds-space_xs)));
1320
1320
  inset-inline-start: 50%;
1321
1321
  transform: translateX(calc(-50% * var(--tooltip_dir, 1)));
1322
1322
  }
1323
- .bds2160Tooltip---placement_left {
1323
+ .bds2170Tooltip---placement_left {
1324
1324
  inset-inline-end: calc(100% + var(--tooltip_offset, var(--bds-space_xs)));
1325
1325
  inset-block-start: 50%;
1326
1326
  transform: translateY(-50%);
1327
1327
  }
1328
- .bds2160Tooltip---placement_right {
1328
+ .bds2170Tooltip---placement_right {
1329
1329
  inset-inline-start: calc(100% + var(--tooltip_offset, var(--bds-space_xs)));
1330
1330
  inset-block-start: 50%;
1331
1331
  transform: translateY(-50%);
1332
1332
  }
1333
1333
  @media (prefers-reduced-motion: reduce) {
1334
- .bds2160Tooltip-tooltip {
1334
+ .bds2170Tooltip-tooltip {
1335
1335
  transition: none;
1336
1336
  }
1337
1337
  }
1338
1338
  }
1339
1339
 
1340
1340
  /* src/components/ui/Typography/Typography.module.css */
1341
- @layer boostdev.bds2160Typography-component {
1342
- .bds2160Typography-typography {
1341
+ @layer boostdev.bds2170Typography-component {
1342
+ .bds2170Typography-typography {
1343
1343
  margin: 0;
1344
1344
  font-family: var(--bds-font_family--body);
1345
1345
  color: var(--typography_color, var(--bds-color_on-bg));
1346
1346
  }
1347
- .bds2160Typography---h1 {
1347
+ .bds2170Typography---h1 {
1348
1348
  font-family: var(--bds-font_family--heading);
1349
1349
  font-size: var(--typography_font-size--h1, var(--bds-font_size--heading-1));
1350
1350
  font-weight: var(--bds-font_weight--bold);
1351
1351
  line-height: var(--bds-font_line-height--heading);
1352
1352
  }
1353
- .bds2160Typography---h2 {
1353
+ .bds2170Typography---h2 {
1354
1354
  font-family: var(--bds-font_family--heading);
1355
1355
  font-size: var(--typography_font-size--h2, var(--bds-font_size--heading-2));
1356
1356
  font-weight: var(--bds-font_weight--semibold);
1357
1357
  line-height: var(--bds-font_line-height--heading);
1358
1358
  }
1359
- .bds2160Typography---h3 {
1359
+ .bds2170Typography---h3 {
1360
1360
  font-family: var(--bds-font_family--heading);
1361
1361
  font-size: var(--typography_font-size--h3, var(--bds-font_size--heading-3));
1362
1362
  font-weight: var(--bds-font_weight--semibold);
1363
1363
  line-height: var(--bds-font_line-height--heading);
1364
1364
  }
1365
- .bds2160Typography---body {
1365
+ .bds2170Typography---body {
1366
1366
  font-size: var(--typography_font-size--body, var(--bds-font_size--body));
1367
1367
  line-height: var(--bds-font_line-height--body);
1368
1368
  }
1369
- .bds2160Typography---body_s {
1369
+ .bds2170Typography---body_s {
1370
1370
  font-size: var(--typography_font-size--body_s, var(--bds-font_size--body--s));
1371
1371
  line-height: var(--bds-font_line-height--body);
1372
1372
  }
@@ -1397,9 +1397,9 @@
1397
1397
  box-shadow: 0 0 0 0 rgb(from var(--button_pulse-color, var(--button_color, var(--bds-color_interactive))) r g b / 0%);
1398
1398
  }
1399
1399
  }
1400
- @layer boostdev.bds2160Button-component {
1401
- .bds2160Button-button,
1402
- .bds2160Button-button[href] {
1400
+ @layer boostdev.bds2170Button-component {
1401
+ .bds2170Button-button,
1402
+ .bds2170Button-button[href] {
1403
1403
  all: unset;
1404
1404
  position: relative;
1405
1405
  font: inherit;
@@ -1422,78 +1422,78 @@
1422
1422
  box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
1423
1423
  transition: var(--bds-animation_transition), --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing);
1424
1424
  }
1425
- .bds2160Button-button.bds2160Button---default {
1425
+ .bds2170Button-button.bds2170Button---default {
1426
1426
  }
1427
- .bds2160Button-button.bds2160Button---outline,
1428
- .bds2160Button-button.bds2160Button---ghost {
1427
+ .bds2170Button-button.bds2170Button---outline,
1428
+ .bds2170Button-button.bds2170Button---ghost {
1429
1429
  --button_bg--variant: var(--button_bg--outline, transparent);
1430
1430
  --button_text--variant: var(--button_text--outline, var(--button_color--on-bg, var(--bds-color_interactive_on-bg)));
1431
1431
  --button_border--variant: var(--button_border--outline, var(--button_color--on-bg, var(--bds-color_interactive_on-bg)));
1432
1432
  }
1433
- .bds2160Button-button.bds2160Button---size_small {
1433
+ .bds2170Button-button.bds2170Button---size_small {
1434
1434
  --button_height: 2.25em;
1435
1435
  --button_font-size: var(--bds-font_size--body--s);
1436
1436
  --button_padding-inline--size: var(--bds-space_m);
1437
1437
  }
1438
- .bds2160Button-button.bds2160Button---size_medium {
1438
+ .bds2170Button-button.bds2170Button---size_medium {
1439
1439
  --button_height: 3em;
1440
1440
  --button_padding-inline--size: var(--bds-space_l);
1441
1441
  }
1442
- .bds2160Button-button.bds2160Button---size_large {
1442
+ .bds2170Button-button.bds2170Button---size_large {
1443
1443
  --button_font-size: var(--bds-font_size--heading-3);
1444
1444
  --button_padding-inline--size: var(--bds-space_xl);
1445
1445
  }
1446
- .bds2160Button-button.bds2160Button---hasPulse {
1446
+ .bds2170Button-button.bds2170Button---hasPulse {
1447
1447
  animation: pulse 3s infinite;
1448
1448
  }
1449
- .bds2160Button-button.bds2160Button---iconOnly {
1449
+ .bds2170Button-button.bds2170Button---iconOnly {
1450
1450
  aspect-ratio: 1;
1451
1451
  box-sizing: border-box;
1452
1452
  padding: var(--bds-space_xxs);
1453
1453
  }
1454
- .bds2160Button-button.bds2160Button---iconOnly > * {
1454
+ .bds2170Button-button.bds2170Button---iconOnly > * {
1455
1455
  inline-size: 100%;
1456
1456
  block-size: 100%;
1457
1457
  }
1458
- .bds2160Button-button[href] {
1458
+ .bds2170Button-button[href] {
1459
1459
  text-decoration: none;
1460
1460
  }
1461
- .bds2160Button-button svg {
1461
+ .bds2170Button-button svg {
1462
1462
  --icon__stroke: currentcolor;
1463
1463
  fill: currentcolor;
1464
1464
  color: currentcolor;
1465
1465
  flex-shrink: 0;
1466
1466
  }
1467
- .bds2160Button-iconStart {
1467
+ .bds2170Button-iconStart {
1468
1468
  display: flex;
1469
1469
  align-items: center;
1470
1470
  margin-inline-start: calc(var(--button_icon-offset, calc(var(--button_padding-inline--size) / 2)) * -1);
1471
1471
  transition: var(--bds-animation_transition);
1472
1472
  }
1473
- .bds2160Button-iconEnd {
1473
+ .bds2170Button-iconEnd {
1474
1474
  display: flex;
1475
1475
  align-items: center;
1476
1476
  margin-inline-end: calc(var(--button_icon-offset, calc(var(--button_padding-inline--size) / 2)) * -1);
1477
1477
  transition: var(--bds-animation_transition);
1478
1478
  }
1479
- .bds2160Button-button.bds2160Button---iconOnly .bds2160Button-iconStart,
1480
- .bds2160Button-button.bds2160Button---iconOnly .bds2160Button-iconEnd {
1479
+ .bds2170Button-button.bds2170Button---iconOnly .bds2170Button-iconStart,
1480
+ .bds2170Button-button.bds2170Button---iconOnly .bds2170Button-iconEnd {
1481
1481
  margin-inline: 0;
1482
1482
  }
1483
1483
  @media (hover: hover) and (pointer: fine) {
1484
- .bds2160Button-button:hover .bds2160Button-iconStart svg {
1484
+ .bds2170Button-button:hover .bds2170Button-iconStart svg {
1485
1485
  animation: fadeZoom 2s ease-out infinite;
1486
1486
  }
1487
- .bds2160Button-button:hover .bds2160Button-iconEnd svg {
1487
+ .bds2170Button-button:hover .bds2170Button-iconEnd svg {
1488
1488
  animation: fadeZoom 2s ease-out infinite;
1489
1489
  }
1490
1490
  }
1491
- .bds2160Button-button:focus-visible {
1491
+ .bds2170Button-button:focus-visible {
1492
1492
  outline: var(--bds-outline_default);
1493
1493
  outline-offset: var(--bds-outline_offset);
1494
1494
  }
1495
1495
  @media (hover: hover) and (pointer: fine) {
1496
- .bds2160Button-button.bds2160Button---default:hover {
1496
+ .bds2170Button-button.bds2170Button---default:hover {
1497
1497
  --button_bg--variant: var(--button_bg--hover, var(--bds-color_bg));
1498
1498
  --button_text--variant: var(--button_text--hover, var(--bds-color_interactive_on-bg));
1499
1499
  --button_border--variant: var(--button_border--hover, currentcolor);
@@ -1501,25 +1501,25 @@
1501
1501
  }
1502
1502
  }
1503
1503
  @media (hover: hover) and (pointer: fine) {
1504
- .bds2160Button-button.bds2160Button---outline:hover,
1505
- .bds2160Button-button.bds2160Button---ghost:hover {
1504
+ .bds2170Button-button.bds2170Button---outline:hover,
1505
+ .bds2170Button-button.bds2170Button---ghost:hover {
1506
1506
  --button_bg--variant: var(--button_bg--outline-hover, var(--button_color, var(--bds-color_interactive)));
1507
1507
  --button_text--variant: var(--button_text--outline-hover, var(--button_on-color, var(--bds-color_on-interactive)));
1508
1508
  --button_border--variant: var(--button_border--outline-hover, transparent);
1509
1509
  }
1510
1510
  }
1511
1511
  @media (prefers-reduced-motion: reduce) {
1512
- .bds2160Button-button.bds2160Button---hasPulse,
1513
- .bds2160Button-button:hover .bds2160Button-iconStart svg,
1514
- .bds2160Button-button:hover .bds2160Button-iconEnd svg {
1512
+ .bds2170Button-button.bds2170Button---hasPulse,
1513
+ .bds2170Button-button:hover .bds2170Button-iconStart svg,
1514
+ .bds2170Button-button:hover .bds2170Button-iconEnd svg {
1515
1515
  animation: none;
1516
1516
  }
1517
1517
  }
1518
1518
  }
1519
1519
 
1520
1520
  /* src/components/interaction/Command/Command.module.css */
1521
- @layer boostdev.bds2160Command-component {
1522
- .bds2160Command-dialog {
1521
+ @layer boostdev.bds2170Command-component {
1522
+ .bds2170Command-dialog {
1523
1523
  padding: 0;
1524
1524
  border: none;
1525
1525
  border-radius: var(--command_radius, var(--bds-border_radius--m));
@@ -1529,11 +1529,11 @@
1529
1529
  overflow: visible;
1530
1530
  margin-block-start: 10vh;
1531
1531
  }
1532
- .bds2160Command-dialog::backdrop {
1532
+ .bds2170Command-dialog::backdrop {
1533
1533
  background-color: var(--color_backdrop, rgb(0 0 0 / 50%));
1534
1534
  backdrop-filter: blur(3px);
1535
1535
  }
1536
- .bds2160Command-palette {
1536
+ .bds2170Command-palette {
1537
1537
  display: flex;
1538
1538
  flex-direction: column;
1539
1539
  background-color: var(--command_color, var(--bds-color_bg--strong, var(--bds-color_bg)));
@@ -1546,7 +1546,7 @@
1546
1546
  border-radius: var(--command_radius, var(--bdc-outline_radius));
1547
1547
  box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--command_shadow, var(--bds-shadow_xl));
1548
1548
  }
1549
- .bds2160Command-searchRow {
1549
+ .bds2170Command-searchRow {
1550
1550
  display: flex;
1551
1551
  align-items: center;
1552
1552
  gap: var(--bds-space_xs);
@@ -1554,13 +1554,13 @@
1554
1554
  border-block-end: 1px solid currentcolor;
1555
1555
  flex-shrink: 0;
1556
1556
  }
1557
- .bds2160Command-searchIcon {
1557
+ .bds2170Command-searchIcon {
1558
1558
  inline-size: 1.25rem;
1559
1559
  block-size: 1.25rem;
1560
1560
  color: var(--bds-color_on-bg);
1561
1561
  flex-shrink: 0;
1562
1562
  }
1563
- .bds2160Command-search {
1563
+ .bds2170Command-search {
1564
1564
  flex: 1;
1565
1565
  border: none;
1566
1566
  font-family: var(--bds-font_family--body);
@@ -1569,14 +1569,14 @@
1569
1569
  background: transparent;
1570
1570
  min-inline-size: 0;
1571
1571
  }
1572
- .bds2160Command-search:focus-visible {
1572
+ .bds2170Command-search:focus-visible {
1573
1573
  outline: var(--bds-outline_default);
1574
1574
  outline-offset: var(--bds-outline_offset);
1575
1575
  }
1576
- .bds2160Command-search::placeholder {
1576
+ .bds2170Command-search::placeholder {
1577
1577
  color: var(--bds-color_on-bg);
1578
1578
  }
1579
- .bds2160Command-escHint {
1579
+ .bds2170Command-escHint {
1580
1580
  font-size: var(--bds-font_size--body--s);
1581
1581
  color: var(--bds-color_on-bg);
1582
1582
  border-radius: var(--command_kbd-radius, var(--bds-border_radius--xs));
@@ -1586,18 +1586,18 @@
1586
1586
  border: none;
1587
1587
  box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
1588
1588
  }
1589
- .bds2160Command-list {
1589
+ .bds2170Command-list {
1590
1590
  overflow-block: auto;
1591
1591
  list-style: none;
1592
1592
  margin: 0;
1593
1593
  padding: var(--bds-space_xs) 0;
1594
1594
  }
1595
- .bds2160Command-groupList {
1595
+ .bds2170Command-groupList {
1596
1596
  list-style: none;
1597
1597
  margin: 0;
1598
1598
  padding: 0;
1599
1599
  }
1600
- .bds2160Command-group {
1600
+ .bds2170Command-group {
1601
1601
  padding: var(--bds-space_xs) var(--bds-space_m);
1602
1602
  font-size: var(--bds-font_size--body--s);
1603
1603
  font-weight: var(--bds-font_weight--semibold);
@@ -1605,7 +1605,7 @@
1605
1605
  text-transform: uppercase;
1606
1606
  letter-spacing: 0.05em;
1607
1607
  }
1608
- .bds2160Command-item {
1608
+ .bds2170Command-item {
1609
1609
  display: flex;
1610
1610
  align-items: center;
1611
1611
  gap: var(--bds-space_s);
@@ -1613,19 +1613,19 @@
1613
1613
  cursor: pointer;
1614
1614
  transition: background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
1615
1615
  }
1616
- .bds2160Command-itemActive {
1616
+ .bds2170Command-itemActive {
1617
1617
  background-color: var(--command_item-bg--active, var(--bds-color_bg--subtle));
1618
1618
  }
1619
- .bds2160Command-itemLabel {
1619
+ .bds2170Command-itemLabel {
1620
1620
  flex: 1;
1621
1621
  font-size: var(--bds-font_size--body);
1622
1622
  color: var(--bds-color_on-bg);
1623
1623
  }
1624
- .bds2160Command-itemDesc {
1624
+ .bds2170Command-itemDesc {
1625
1625
  font-size: var(--bds-font_size--body--s);
1626
1626
  color: var(--bds-color_on-bg);
1627
1627
  }
1628
- .bds2160Command-shortcut {
1628
+ .bds2170Command-shortcut {
1629
1629
  font-size: var(--bds-font_size--body--s);
1630
1630
  color: var(--bds-color_on-bg);
1631
1631
  border-radius: var(--command_kbd-radius, var(--bds-border_radius--xs));
@@ -1634,13 +1634,13 @@
1634
1634
  border: none;
1635
1635
  box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
1636
1636
  }
1637
- .bds2160Command-empty {
1637
+ .bds2170Command-empty {
1638
1638
  padding: var(--bds-space_l) var(--bds-space_m);
1639
1639
  text-align: center;
1640
1640
  color: var(--bds-color_on-bg);
1641
1641
  font-size: var(--bds-font_size--body);
1642
1642
  }
1643
- .bds2160Command-srOnly {
1643
+ .bds2170Command-srOnly {
1644
1644
  position: absolute;
1645
1645
  inline-size: 1px;
1646
1646
  block-size: 1px;
@@ -1652,8 +1652,8 @@
1652
1652
  }
1653
1653
 
1654
1654
  /* src/components/interaction/Dialog/Dialog.module.css */
1655
- @layer boostdev.bds2160Dialog-component {
1656
- .bds2160Dialog-dialog {
1655
+ @layer boostdev.bds2170Dialog-component {
1656
+ .bds2170Dialog-dialog {
1657
1657
  font-size: var(--bds-font_size--body--s);
1658
1658
  border: var(--dialog_border, none);
1659
1659
  --bdc_color: currentcolor;
@@ -1669,17 +1669,17 @@
1669
1669
  max-block-size: 90svh;
1670
1670
  overflow: visible;
1671
1671
  }
1672
- .bds2160Dialog-dialog:not([open]) {
1672
+ .bds2170Dialog-dialog:not([open]) {
1673
1673
  display: none;
1674
1674
  }
1675
- .bds2160Dialog-dialogContent {
1675
+ .bds2170Dialog-dialogContent {
1676
1676
  display: grid;
1677
1677
  gap: var(--bds-grid_gap);
1678
1678
  overflow-block: auto;
1679
1679
  min-block-size: 0;
1680
1680
  flex: 1;
1681
1681
  }
1682
- .bds2160Dialog-closeButton {
1682
+ .bds2170Dialog-closeButton {
1683
1683
  all: unset;
1684
1684
  position: absolute;
1685
1685
  inset-block-start: -1em;
@@ -1697,29 +1697,29 @@
1697
1697
  box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
1698
1698
  cursor: pointer;
1699
1699
  }
1700
- .bds2160Dialog-closeButton::after {
1700
+ .bds2170Dialog-closeButton::after {
1701
1701
  content: "";
1702
1702
  position: absolute;
1703
1703
  inset-block: -0.5rem;
1704
1704
  inset-inline: -0.5rem;
1705
1705
  }
1706
- .bds2160Dialog-closeButton:focus-visible {
1706
+ .bds2170Dialog-closeButton:focus-visible {
1707
1707
  outline: var(--bds-outline_default);
1708
1708
  outline-offset: var(--bds-outline_offset);
1709
1709
  }
1710
- .bds2160Dialog-closeButton svg {
1710
+ .bds2170Dialog-closeButton svg {
1711
1711
  inline-size: 1.25em;
1712
1712
  block-size: 1.25em;
1713
1713
  }
1714
- .bds2160Dialog-dialog::backdrop {
1714
+ .bds2170Dialog-dialog::backdrop {
1715
1715
  background-color: var(--color_backdrop, rgb(0 0 0 / 50%));
1716
1716
  backdrop-filter: blur(3px);
1717
1717
  }
1718
1718
  }
1719
1719
 
1720
1720
  /* src/components/interaction/Drawer/Drawer.module.css */
1721
- @layer boostdev.bds2160Drawer-component {
1722
- .bds2160Drawer-drawer {
1721
+ @layer boostdev.bds2170Drawer-component {
1722
+ .bds2170Drawer-drawer {
1723
1723
  position: fixed;
1724
1724
  inset-block: 0;
1725
1725
  inset-inline: auto 0;
@@ -1742,37 +1742,37 @@
1742
1742
  display var(--bds-animation_transition-duration) var(--bds-animation_easing) allow-discrete,
1743
1743
  overlay var(--bds-animation_transition-duration) var(--bds-animation_easing) allow-discrete;
1744
1744
  }
1745
- .bds2160Drawer-drawer:not([open]) {
1745
+ .bds2170Drawer-drawer:not([open]) {
1746
1746
  display: none;
1747
1747
  }
1748
- .bds2160Drawer-drawer:dir(rtl) {
1748
+ .bds2170Drawer-drawer:dir(rtl) {
1749
1749
  translate: -100% 0;
1750
1750
  }
1751
- .bds2160Drawer---side_left.bds2160Drawer-drawer {
1751
+ .bds2170Drawer---side_left.bds2170Drawer-drawer {
1752
1752
  inset-inline: 0 auto;
1753
1753
  translate: -100% 0;
1754
1754
  }
1755
- .bds2160Drawer---side_left.bds2160Drawer-drawer:dir(rtl) {
1755
+ .bds2170Drawer---side_left.bds2170Drawer-drawer:dir(rtl) {
1756
1756
  translate: 100% 0;
1757
1757
  }
1758
- .bds2160Drawer-drawer[open] {
1758
+ .bds2170Drawer-drawer[open] {
1759
1759
  translate: 0 0;
1760
1760
  }
1761
1761
  @starting-style {
1762
- .bds2160Drawer-drawer[open] {
1762
+ .bds2170Drawer-drawer[open] {
1763
1763
  translate: 100% 0;
1764
1764
  }
1765
- .bds2160Drawer-drawer[open]:dir(rtl) {
1765
+ .bds2170Drawer-drawer[open]:dir(rtl) {
1766
1766
  translate: -100% 0;
1767
1767
  }
1768
- .bds2160Drawer---side_left.bds2160Drawer-drawer[open] {
1768
+ .bds2170Drawer---side_left.bds2170Drawer-drawer[open] {
1769
1769
  translate: -100% 0;
1770
1770
  }
1771
- .bds2160Drawer---side_left.bds2160Drawer-drawer[open]:dir(rtl) {
1771
+ .bds2170Drawer---side_left.bds2170Drawer-drawer[open]:dir(rtl) {
1772
1772
  translate: 100% 0;
1773
1773
  }
1774
1774
  }
1775
- .bds2160Drawer-drawer::backdrop {
1775
+ .bds2170Drawer-drawer::backdrop {
1776
1776
  background-color: var(--color_backdrop, rgb(0 0 0 / 50%));
1777
1777
  backdrop-filter: blur(3px);
1778
1778
  opacity: 0;
@@ -1781,15 +1781,15 @@
1781
1781
  display var(--bds-animation_transition-duration) var(--bds-animation_easing) allow-discrete,
1782
1782
  overlay var(--bds-animation_transition-duration) var(--bds-animation_easing) allow-discrete;
1783
1783
  }
1784
- .bds2160Drawer-drawer[open]::backdrop {
1784
+ .bds2170Drawer-drawer[open]::backdrop {
1785
1785
  opacity: 1;
1786
1786
  }
1787
1787
  @starting-style {
1788
- .bds2160Drawer-drawer[open]::backdrop {
1788
+ .bds2170Drawer-drawer[open]::backdrop {
1789
1789
  opacity: 0;
1790
1790
  }
1791
1791
  }
1792
- .bds2160Drawer-header {
1792
+ .bds2170Drawer-header {
1793
1793
  display: flex;
1794
1794
  align-items: center;
1795
1795
  justify-content: space-between;
@@ -1797,7 +1797,7 @@
1797
1797
  border-block-end: 1px solid var(--drawer_border-color, var(--bds-color_on-bg--as-surface, var(--bds-color_on-bg--border, var(--bds-color_on-bg))));
1798
1798
  flex-shrink: 0;
1799
1799
  }
1800
- .bds2160Drawer-closeButton {
1800
+ .bds2170Drawer-closeButton {
1801
1801
  all: unset;
1802
1802
  display: flex;
1803
1803
  align-items: center;
@@ -1808,20 +1808,20 @@
1808
1808
  cursor: pointer;
1809
1809
  transition: var(--bds-animation_transition);
1810
1810
  }
1811
- .bds2160Drawer-closeButton svg {
1811
+ .bds2170Drawer-closeButton svg {
1812
1812
  inline-size: 1.25rem;
1813
1813
  block-size: 1.25rem;
1814
1814
  }
1815
- .bds2160Drawer-closeButton:focus-visible {
1815
+ .bds2170Drawer-closeButton:focus-visible {
1816
1816
  outline: var(--bds-outline_default);
1817
1817
  outline-offset: var(--bds-outline_offset);
1818
1818
  }
1819
1819
  @media (hover: hover) and (pointer: fine) {
1820
- .bds2160Drawer-closeButton:hover {
1820
+ .bds2170Drawer-closeButton:hover {
1821
1821
  background-color: var(--drawer_close-bg--hover, var(--bds-color_bg--subtle));
1822
1822
  }
1823
1823
  }
1824
- .bds2160Drawer-body {
1824
+ .bds2170Drawer-body {
1825
1825
  flex: 1;
1826
1826
  overflow-block: auto;
1827
1827
  padding: var(--bds-space_l);
@@ -1829,20 +1829,20 @@
1829
1829
  flex-direction: column;
1830
1830
  }
1831
1831
  @media (prefers-reduced-motion: reduce) {
1832
- .bds2160Drawer-drawer,
1833
- .bds2160Drawer-drawer::backdrop {
1832
+ .bds2170Drawer-drawer,
1833
+ .bds2170Drawer-drawer::backdrop {
1834
1834
  transition: none;
1835
1835
  }
1836
1836
  }
1837
1837
  }
1838
1838
 
1839
1839
  /* src/components/interaction/DropdownMenu/DropdownMenu.module.css */
1840
- @layer boostdev.bds2160DropdownMenu-component {
1841
- .bds2160DropdownMenu-wrapper {
1840
+ @layer boostdev.bds2170DropdownMenu-component {
1841
+ .bds2170DropdownMenu-wrapper {
1842
1842
  position: relative;
1843
1843
  display: inline-flex;
1844
1844
  }
1845
- .bds2160DropdownMenu-menu {
1845
+ .bds2170DropdownMenu-menu {
1846
1846
  position: absolute;
1847
1847
  inset-block-start: calc(100% + var(--bds-space_xxs));
1848
1848
  z-index: var(--bds-z-index_dropdown);
@@ -1858,29 +1858,29 @@
1858
1858
  list-style: none;
1859
1859
  margin: 0;
1860
1860
  }
1861
- .bds2160DropdownMenu-menu li {
1861
+ .bds2170DropdownMenu-menu li {
1862
1862
  list-style: none;
1863
1863
  }
1864
- .bds2160DropdownMenu---placement_bottom-start {
1864
+ .bds2170DropdownMenu---placement_bottom-start {
1865
1865
  inset-inline-start: 0;
1866
1866
  }
1867
- .bds2160DropdownMenu---placement_bottom-end {
1867
+ .bds2170DropdownMenu---placement_bottom-end {
1868
1868
  inset-inline-end: 0;
1869
1869
  }
1870
- .bds2160DropdownMenu-separatorRow {
1870
+ .bds2170DropdownMenu-separatorRow {
1871
1871
  padding-block: var(--bds-space_xxs);
1872
1872
  }
1873
- .bds2160DropdownMenu-separator {
1873
+ .bds2170DropdownMenu-separator {
1874
1874
  border: none;
1875
1875
  border-block-start: 1px solid var(--dropdown_separator-color, var(--bds-color_on-bg--as-surface, var(--bds-color_on-bg--border, var(--bds-color_on-bg))));
1876
1876
  margin: 0;
1877
1877
  }
1878
- .bds2160DropdownMenu-group {
1878
+ .bds2170DropdownMenu-group {
1879
1879
  margin: 0;
1880
1880
  padding: 0;
1881
1881
  list-style: none;
1882
1882
  }
1883
- .bds2160DropdownMenu-groupLabel {
1883
+ .bds2170DropdownMenu-groupLabel {
1884
1884
  display: block;
1885
1885
  padding: var(--dropdown_group-label-padding, var(--bds-space_xs) var(--bds-space_s) var(--bds-space_xxs));
1886
1886
  font-family: var(--bds-font_family--body);
@@ -1888,7 +1888,7 @@
1888
1888
  font-weight: var(--dropdown_group-label-font-weight, var(--bds-font_weight--bold));
1889
1889
  color: var(--dropdown_group-label-color, var(--bds-color_on-bg--muted, var(--bds-color_on-bg)));
1890
1890
  }
1891
- .bds2160DropdownMenu-item {
1891
+ .bds2170DropdownMenu-item {
1892
1892
  all: unset;
1893
1893
  display: flex;
1894
1894
  align-items: center;
@@ -1903,44 +1903,44 @@
1903
1903
  box-sizing: border-box;
1904
1904
  transition: var(--bds-animation_transition);
1905
1905
  }
1906
- .bds2160DropdownMenu-item:disabled {
1906
+ .bds2170DropdownMenu-item:disabled {
1907
1907
  opacity: var(--dropdown_item-opacity--disabled, 0.4);
1908
1908
  cursor: not-allowed;
1909
1909
  }
1910
- .bds2160DropdownMenu-item:focus-visible {
1910
+ .bds2170DropdownMenu-item:focus-visible {
1911
1911
  outline: var(--bds-outline_default);
1912
1912
  outline-offset: calc(var(--bds-outline_offset) * -1);
1913
1913
  }
1914
- .bds2160DropdownMenu-item:not(:disabled):focus-visible {
1914
+ .bds2170DropdownMenu-item:not(:disabled):focus-visible {
1915
1915
  background-color: var(--dropdown_item-bg--hover, var(--bds-color_primary--subtle, var(--bds-color_blue--subtle)));
1916
1916
  color: var(--dropdown_item-color--hover, var(--bds-color_on-primary--subtle, var(--bds-color_on-blue--subtle)));
1917
1917
  }
1918
- .bds2160DropdownMenu---destructive {
1918
+ .bds2170DropdownMenu---destructive {
1919
1919
  color: var(--dropdown_item-color--destructive, var(--bds-color_error_on-bg));
1920
1920
  }
1921
- .bds2160DropdownMenu---destructive:not(:disabled):focus-visible {
1921
+ .bds2170DropdownMenu---destructive:not(:disabled):focus-visible {
1922
1922
  background-color: var(--dropdown_item-bg--destructive-hover, var(--bds-color_error--subtle));
1923
1923
  color: var(--dropdown_item-color--destructive-hover, var(--bds-color_on-error--subtle));
1924
1924
  }
1925
1925
  @media (hover: hover) and (pointer: fine) {
1926
- .bds2160DropdownMenu-item:not(:disabled):hover {
1926
+ .bds2170DropdownMenu-item:not(:disabled):hover {
1927
1927
  background-color: var(--dropdown_item-bg--hover, var(--bds-color_primary--subtle, var(--bds-color_blue--subtle)));
1928
1928
  color: var(--dropdown_item-color--hover, var(--bds-color_on-primary--subtle, var(--bds-color_on-blue--subtle)));
1929
1929
  }
1930
- .bds2160DropdownMenu---destructive:not(:disabled):hover {
1930
+ .bds2170DropdownMenu---destructive:not(:disabled):hover {
1931
1931
  background-color: var(--dropdown_item-bg--destructive-hover, var(--bds-color_error--subtle));
1932
1932
  color: var(--dropdown_item-color--destructive-hover, var(--bds-color_on-error--subtle));
1933
1933
  }
1934
1934
  }
1935
- .bds2160DropdownMenu-label {
1935
+ .bds2170DropdownMenu-label {
1936
1936
  flex: 1;
1937
1937
  }
1938
- .bds2160DropdownMenu-shortcut {
1938
+ .bds2170DropdownMenu-shortcut {
1939
1939
  flex-shrink: 0;
1940
1940
  color: var(--dropdown_shortcut-color, var(--bds-color_on-bg--muted, var(--bds-color_on-bg)));
1941
1941
  font-size: var(--dropdown_shortcut-font-size, var(--bds-font_size--body--s));
1942
1942
  }
1943
- .bds2160DropdownMenu-icon {
1943
+ .bds2170DropdownMenu-icon {
1944
1944
  display: flex;
1945
1945
  align-items: center;
1946
1946
  flex-shrink: 0;
@@ -1948,11 +1948,11 @@
1948
1948
  }
1949
1949
 
1950
1950
  /* src/components/interaction/Popover/Popover.module.css */
1951
- @layer boostdev.bds2160Popover-component {
1952
- .bds2160Popover-wrapper {
1951
+ @layer boostdev.bds2170Popover-component {
1952
+ .bds2170Popover-wrapper {
1953
1953
  display: inline-flex;
1954
1954
  }
1955
- .bds2160Popover-panel {
1955
+ .bds2170Popover-panel {
1956
1956
  position: fixed;
1957
1957
  inset: unset;
1958
1958
  margin: 0;
@@ -1971,7 +1971,7 @@
1971
1971
  color: var(--popover_on-color, var(--bds-color_on-bg));
1972
1972
  font-size: var(--bds-font_size--body);
1973
1973
  }
1974
- .bds2160Popover-panel[data-placement=bottom] {
1974
+ .bds2170Popover-panel[data-placement=bottom] {
1975
1975
  top: anchor(bottom);
1976
1976
  left: anchor(left);
1977
1977
  margin-block-start: var(--bds-space_xs);
@@ -1980,7 +1980,7 @@
1980
1980
  --popover-right,
1981
1981
  --popover-left;
1982
1982
  }
1983
- .bds2160Popover-panel[data-placement=top] {
1983
+ .bds2170Popover-panel[data-placement=top] {
1984
1984
  bottom: anchor(top);
1985
1985
  left: anchor(left);
1986
1986
  margin-block-end: var(--bds-space_xs);
@@ -1989,7 +1989,7 @@
1989
1989
  --popover-right,
1990
1990
  --popover-left;
1991
1991
  }
1992
- .bds2160Popover-panel[data-placement=right] {
1992
+ .bds2170Popover-panel[data-placement=right] {
1993
1993
  top: anchor(top);
1994
1994
  left: anchor(right);
1995
1995
  margin-inline-start: var(--bds-space_xs);
@@ -1998,7 +1998,7 @@
1998
1998
  --popover-bottom,
1999
1999
  --popover-top;
2000
2000
  }
2001
- .bds2160Popover-panel[data-placement=left] {
2001
+ .bds2170Popover-panel[data-placement=left] {
2002
2002
  top: anchor(top);
2003
2003
  right: anchor(left);
2004
2004
  margin-inline-end: var(--bds-space_xs);
@@ -2056,10 +2056,10 @@
2056
2056
  margin-block-end: var(--bds-space_xs);
2057
2057
  }
2058
2058
  @media (width <= 420px) {
2059
- .bds2160Popover-panel[data-placement=bottom],
2060
- .bds2160Popover-panel[data-placement=top],
2061
- .bds2160Popover-panel[data-placement=left],
2062
- .bds2160Popover-panel[data-placement=right] {
2059
+ .bds2170Popover-panel[data-placement=bottom],
2060
+ .bds2170Popover-panel[data-placement=top],
2061
+ .bds2170Popover-panel[data-placement=left],
2062
+ .bds2170Popover-panel[data-placement=right] {
2063
2063
  inset-inline: var(--bds-space_xs);
2064
2064
  inline-size: 100%;
2065
2065
  max-inline-size: calc(100svw - 2 * var(--bds-space_xs));
@@ -2067,13 +2067,13 @@
2067
2067
  }
2068
2068
  }
2069
2069
  @media (aspect-ratio >= 2/1) {
2070
- .bds2160Popover-panel[data-placement=bottom] {
2070
+ .bds2170Popover-panel[data-placement=bottom] {
2071
2071
  position-try-fallbacks:
2072
2072
  --popover-top,
2073
2073
  --popover-right,
2074
2074
  --popover-left;
2075
2075
  }
2076
- .bds2160Popover-panel[data-placement=top] {
2076
+ .bds2170Popover-panel[data-placement=top] {
2077
2077
  position-try-fallbacks:
2078
2078
  --popover-bottom,
2079
2079
  --popover-right,
@@ -2083,24 +2083,28 @@
2083
2083
  }
2084
2084
 
2085
2085
  /* src/components/interaction/Rating/Rating.module.css */
2086
- @layer boostdev.bds2160Rating-component {
2087
- .bds2160Rating-rating {
2086
+ @layer boostdev.bds2170Rating-component {
2087
+ .bds2170Rating-rating {
2088
2088
  display: inline-flex;
2089
2089
  gap: var(--bds-space_xxxs);
2090
2090
  color: var(--rating_color, var(--bds-color_bg));
2091
2091
  }
2092
- .bds2160Rating-star {
2092
+ .bds2170Rating-star {
2093
2093
  inline-size: 1.5em;
2094
2094
  block-size: 1.5em;
2095
+ stroke: var(--rating_stroke-color, var(--bds-color_on-bg--as-surface, var(--bds-color_on-bg--border, var(--bds-color_on-bg))));
2096
+ stroke-width: var(--rating_stroke-width, var(--bdc-outline_width));
2097
+ stroke-linejoin: round;
2095
2098
  }
2096
- .bds2160Rating---filled {
2099
+ .bds2170Rating---filled {
2097
2100
  color: var(--rating_color--filled, var(--bds-color_warning));
2101
+ stroke: var(--rating_stroke-color--filled, currentcolor);
2098
2102
  }
2099
2103
  }
2100
2104
 
2101
2105
  /* src/components/interaction/Toast/Toast.module.css */
2102
- @layer boostdev.bds2160Toast-component {
2103
- .bds2160Toast-toastContainer {
2106
+ @layer boostdev.bds2170Toast-component {
2107
+ .bds2170Toast-toastContainer {
2104
2108
  position: fixed;
2105
2109
  inset: unset;
2106
2110
  inset-block-end: var(--bds-space_xl);
@@ -2112,7 +2116,7 @@
2112
2116
  padding: 0;
2113
2117
  background: transparent;
2114
2118
  }
2115
- .bds2160Toast-toast {
2119
+ .bds2170Toast-toast {
2116
2120
  padding: var(--bds-space_m) var(--bds-space_l);
2117
2121
  background-color: var(--toast_color, var(--toast_color--variant, var(--bds-color_bg--strong, var(--bds-color_bg))));
2118
2122
  color: var(--toast_on-color, var(--toast_on-color--variant, var(--bds-color_on-bg)));
@@ -2124,29 +2128,29 @@
2124
2128
  min-inline-size: min(300px, calc(100svw - 2 * var(--bds-space_xl)));
2125
2129
  animation: slideIn var(--bds-animation_duration--fast) var(--bds-animation_easing);
2126
2130
  }
2127
- .bds2160Toast-toast:dir(rtl) {
2131
+ .bds2170Toast-toast:dir(rtl) {
2128
2132
  --toast_slide-offset: -100%;
2129
2133
  }
2130
- .bds2160Toast-toast.bds2160Toast---variant_success {
2134
+ .bds2170Toast-toast.bds2170Toast---variant_success {
2131
2135
  --toast_color--variant: var(--toast_color--success, var(--bds-color_success));
2132
2136
  --toast_on-color--variant: var(--toast_on-color--success, var(--bds-color_on-success));
2133
2137
  }
2134
- .bds2160Toast-toast.bds2160Toast---variant_warning {
2138
+ .bds2170Toast-toast.bds2170Toast---variant_warning {
2135
2139
  --toast_color--variant: var(--toast_color--warning, var(--bds-color_warning));
2136
2140
  --toast_on-color--variant: var(--toast_on-color--warning, var(--bds-color_on-warning));
2137
2141
  }
2138
- .bds2160Toast-toast.bds2160Toast---variant_info {
2142
+ .bds2170Toast-toast.bds2170Toast---variant_info {
2139
2143
  --toast_color--variant: var(--toast_color--info, var(--bds-color_bg--subtle));
2140
2144
  --toast_on-color--variant: var(--toast_on-color--info, var(--bds-color_on-bg--subtle));
2141
2145
  }
2142
- .bds2160Toast-toast.bds2160Toast---variant_error {
2146
+ .bds2170Toast-toast.bds2170Toast---variant_error {
2143
2147
  --toast_color--variant: var(--toast_color--error, var(--bds-color_error));
2144
2148
  --toast_on-color--variant: var(--toast_on-color--error, var(--bds-color_on-error));
2145
2149
  }
2146
- .bds2160Toast-message {
2150
+ .bds2170Toast-message {
2147
2151
  flex: 1;
2148
2152
  }
2149
- .bds2160Toast-closeButton {
2153
+ .bds2170Toast-closeButton {
2150
2154
  position: relative;
2151
2155
  display: flex;
2152
2156
  align-items: center;
@@ -2160,16 +2164,16 @@
2160
2164
  cursor: pointer;
2161
2165
  color: currentcolor;
2162
2166
  }
2163
- .bds2160Toast-closeButton::after {
2167
+ .bds2170Toast-closeButton::after {
2164
2168
  content: "";
2165
2169
  position: absolute;
2166
2170
  inset: -0.75rem;
2167
2171
  }
2168
- .bds2160Toast-closeButton:focus-visible {
2172
+ .bds2170Toast-closeButton:focus-visible {
2169
2173
  outline: var(--bds-outline_default);
2170
2174
  outline-offset: var(--bds-outline_offset);
2171
2175
  }
2172
- .bds2160Toast-closeButton svg {
2176
+ .bds2170Toast-closeButton svg {
2173
2177
  inline-size: 1rem;
2174
2178
  block-size: 1rem;
2175
2179
  }
@@ -2185,25 +2189,25 @@
2185
2189
  }
2186
2190
  }
2187
2191
  @media (prefers-reduced-motion: reduce) {
2188
- .bds2160Toast-toast {
2192
+ .bds2170Toast-toast {
2189
2193
  animation: none;
2190
2194
  }
2191
2195
  }
2192
2196
 
2193
2197
  /* src/components/interaction/form/Checkbox/Checkbox.module.css */
2194
- @layer boostdev.bds2160Checkbox-component {
2195
- .bds2160Checkbox-checkboxGroup {
2198
+ @layer boostdev.bds2170Checkbox-component {
2199
+ .bds2170Checkbox-checkboxGroup {
2196
2200
  --checkbox_size: calc(var(--bds-space_s) * 2);
2197
2201
  --inputSize: var(--checkbox_size);
2198
2202
  display: flex;
2199
2203
  flex-direction: column;
2200
2204
  }
2201
- .bds2160Checkbox-inputWrapper {
2205
+ .bds2170Checkbox-inputWrapper {
2202
2206
  display: flex;
2203
2207
  align-items: stretch;
2204
2208
  gap: var(--checkbox_gap, var(--bds-space_m));
2205
2209
  }
2206
- .bds2160Checkbox-checkbox {
2210
+ .bds2170Checkbox-checkbox {
2207
2211
  margin-block-start: var(--checkbox_offset, 0.25em);
2208
2212
  inline-size: var(--checkbox_size);
2209
2213
  block-size: var(--checkbox_size);
@@ -2219,11 +2223,11 @@
2219
2223
  position: relative;
2220
2224
  transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing), background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
2221
2225
  }
2222
- .bds2160Checkbox-checkbox:checked {
2226
+ .bds2170Checkbox-checkbox:checked {
2223
2227
  background-color: var(--checkbox_color-active, var(--bdc-color_active));
2224
2228
  --bdc_color: var(--checkbox_color-active, var(--bdc-color_active));
2225
2229
  }
2226
- .bds2160Checkbox-checkbox:checked::after {
2230
+ .bds2170Checkbox-checkbox:checked::after {
2227
2231
  content: "";
2228
2232
  position: absolute;
2229
2233
  inset-inline-start: 0.6em;
@@ -2234,42 +2238,42 @@
2234
2238
  border-width: 0 2px 2px 0;
2235
2239
  transform: rotate(45deg);
2236
2240
  }
2237
- .bds2160Checkbox-checkbox:focus {
2241
+ .bds2170Checkbox-checkbox:focus {
2238
2242
  --bdc_color: var(--bdc_color--focus);
2239
2243
  }
2240
- .bds2160Checkbox-checkbox:focus-visible {
2244
+ .bds2170Checkbox-checkbox:focus-visible {
2241
2245
  outline: var(--bds-outline_default);
2242
2246
  outline-offset: var(--bds-outline_offset);
2243
2247
  }
2244
- .bds2160Checkbox-checkbox:disabled {
2248
+ .bds2170Checkbox-checkbox:disabled {
2245
2249
  opacity: 0.5;
2246
2250
  cursor: not-allowed;
2247
2251
  }
2248
- .bds2160Checkbox-checkboxError {
2252
+ .bds2170Checkbox-checkboxError {
2249
2253
  --bdc_color: var(--bdc_color--error);
2250
2254
  --bdc-outline_width: var(--bdc-outline_width--error, 2px);
2251
2255
  }
2252
2256
  }
2253
2257
 
2254
2258
  /* src/components/interaction/form/atoms/Message.module.css */
2255
- @layer boostdev.bds2160Message-component {
2256
- .bds2160Message-error,
2257
- .bds2160Message-hint {
2259
+ @layer boostdev.bds2170Message-component {
2260
+ .bds2170Message-error,
2261
+ .bds2170Message-hint {
2258
2262
  font-size: var(--formMessage_font-size, var(--bds-font_size--body--s));
2259
2263
  margin-inline-start: var(--labelPosition, 0);
2260
2264
  }
2261
- .bds2160Message-error {
2265
+ .bds2170Message-error {
2262
2266
  display: flex;
2263
2267
  align-items: flex-start;
2264
2268
  gap: var(--formMessage_gap, var(--bds-space_xxs));
2265
2269
  color: var(--formMessage_color--error, var(--bds-color_error_on-bg));
2266
2270
  font-weight: var(--formMessage_font-weight--error, var(--bds-font_weight--semibold));
2267
2271
  }
2268
- .bds2160Message-hint {
2272
+ .bds2170Message-hint {
2269
2273
  color: var(--formMessage_color--hint, inherit);
2270
2274
  font-style: var(--formMessage_font-style--hint, italic);
2271
2275
  }
2272
- .bds2160Message-icon {
2276
+ .bds2170Message-icon {
2273
2277
  inline-size: var(--formMessage_icon-size, 1.15em);
2274
2278
  block-size: var(--formMessage_icon-size, 1.15em);
2275
2279
  flex-shrink: 0;
@@ -2277,8 +2281,8 @@
2277
2281
  }
2278
2282
 
2279
2283
  /* src/components/interaction/form/atoms/Label.module.css */
2280
- @layer boostdev.bds2160Label-component {
2281
- .bds2160Label-label {
2284
+ @layer boostdev.bds2170Label-component {
2285
+ .bds2170Label-label {
2282
2286
  display: flex;
2283
2287
  align-items: center;
2284
2288
  font-family: var(--bds-font_family--body);
@@ -2288,8 +2292,8 @@
2288
2292
  }
2289
2293
 
2290
2294
  /* src/components/interaction/form/atoms/InputContainer.module.css */
2291
- @layer boostdev.bds2160InputContainer-component {
2292
- .bds2160InputContainer-container {
2295
+ @layer boostdev.bds2170InputContainer-component {
2296
+ .bds2170InputContainer-container {
2293
2297
  --labelPosition: calc(var(--inputSize) + var(--bds-space_m));
2294
2298
  display: flex;
2295
2299
  flex-direction: column;
@@ -2298,8 +2302,8 @@
2298
2302
  }
2299
2303
 
2300
2304
  /* src/components/interaction/form/CheckboxGroup/CheckboxGroup.module.css */
2301
- @layer boostdev.bds2160CheckboxGroup-component {
2302
- .bds2160CheckboxGroup-group {
2305
+ @layer boostdev.bds2170CheckboxGroup-component {
2306
+ .bds2170CheckboxGroup-group {
2303
2307
  border: none;
2304
2308
  padding: 0;
2305
2309
  margin: 0;
@@ -2307,18 +2311,18 @@
2307
2311
  flex-direction: column;
2308
2312
  gap: var(--checkboxGroup_gap, var(--bds-space_xs));
2309
2313
  }
2310
- .bds2160CheckboxGroup-legend {
2314
+ .bds2170CheckboxGroup-legend {
2311
2315
  font-family: var(--checkboxGroup_legend-font-family, var(--bds-font_family--body));
2312
- font-size: var(--checkboxGroup_legend-font-size, var(--bds-font_size--body--s));
2316
+ font-size: var(--checkboxGroup_legend-font-size, var(--bds-font_size--body));
2313
2317
  font-weight: var(--checkboxGroup_legend-font-weight, var(--bds-font_weight--medium));
2314
2318
  color: var(--checkboxGroup_legend-color, var(--bds-color_on-bg));
2315
2319
  padding: 0;
2316
2320
  margin-block-end: var(--checkboxGroup_legend-gap, var(--bds-space_xs));
2317
2321
  }
2318
- .bds2160CheckboxGroup-required {
2322
+ .bds2170CheckboxGroup-required {
2319
2323
  color: var(--checkboxGroup_required-color, var(--bds-color_error));
2320
2324
  }
2321
- .bds2160CheckboxGroup-requiredLabel {
2325
+ .bds2170CheckboxGroup-requiredLabel {
2322
2326
  position: absolute;
2323
2327
  inline-size: 1px;
2324
2328
  block-size: 1px;
@@ -2329,29 +2333,29 @@
2329
2333
  white-space: nowrap;
2330
2334
  border-width: 0;
2331
2335
  }
2332
- .bds2160CheckboxGroup-items {
2336
+ .bds2170CheckboxGroup-items {
2333
2337
  display: flex;
2334
2338
  flex-direction: column;
2335
2339
  gap: var(--checkboxGroup_items-gap, var(--bds-space_xs));
2336
2340
  }
2337
- .bds2160CheckboxGroup-groupError input {
2341
+ .bds2170CheckboxGroup-groupError input {
2338
2342
  --bdc_color: var(--bdc_color--error);
2339
2343
  --bdc-outline_width: var(--bdc-outline_width--error, 2px);
2340
2344
  }
2341
2345
  }
2342
2346
 
2343
2347
  /* src/components/interaction/form/Combobox/Combobox.module.css */
2344
- @layer boostdev.bds2160Combobox-component {
2345
- .bds2160Combobox-formGroup {
2348
+ @layer boostdev.bds2170Combobox-component {
2349
+ .bds2170Combobox-formGroup {
2346
2350
  display: flex;
2347
2351
  flex-direction: column;
2348
2352
  }
2349
- .bds2160Combobox-inputWrapper {
2353
+ .bds2170Combobox-inputWrapper {
2350
2354
  position: relative;
2351
2355
  display: flex;
2352
2356
  align-items: center;
2353
2357
  }
2354
- .bds2160Combobox-input {
2358
+ .bds2170Combobox-input {
2355
2359
  appearance: none;
2356
2360
  inline-size: 100%;
2357
2361
  font-family: var(--bds-font_family--body);
@@ -2367,22 +2371,22 @@
2367
2371
  color: var(--combobox_color, var(--bds-color_on-bg));
2368
2372
  transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing), background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
2369
2373
  }
2370
- .bds2160Combobox-input:focus {
2374
+ .bds2170Combobox-input:focus {
2371
2375
  --bdc_color: var(--bdc_color--focus);
2372
2376
  }
2373
- .bds2160Combobox-input:focus-visible {
2377
+ .bds2170Combobox-input:focus-visible {
2374
2378
  outline: var(--bds-outline_default);
2375
2379
  outline-offset: var(--bds-outline_offset);
2376
2380
  }
2377
- .bds2160Combobox-input:disabled {
2381
+ .bds2170Combobox-input:disabled {
2378
2382
  opacity: 0.5;
2379
2383
  cursor: not-allowed;
2380
2384
  }
2381
- .bds2160Combobox-inputError {
2385
+ .bds2170Combobox-inputError {
2382
2386
  --bdc_color: var(--bdc_color--error);
2383
2387
  --bdc-outline_width: var(--bdc-outline_width--error, 2px);
2384
2388
  }
2385
- .bds2160Combobox-chevron {
2389
+ .bds2170Combobox-chevron {
2386
2390
  position: absolute;
2387
2391
  inset-inline-end: var(--bds-space_s);
2388
2392
  display: flex;
@@ -2390,11 +2394,11 @@
2390
2394
  pointer-events: none;
2391
2395
  color: var(--combobox_color, var(--bds-color_on-bg));
2392
2396
  }
2393
- .bds2160Combobox-chevron svg {
2397
+ .bds2170Combobox-chevron svg {
2394
2398
  inline-size: 1rem;
2395
2399
  block-size: 1rem;
2396
2400
  }
2397
- .bds2160Combobox-listbox {
2401
+ .bds2170Combobox-listbox {
2398
2402
  position: absolute;
2399
2403
  inset-block-start: calc(100% + var(--bds-space_xxs));
2400
2404
  inset-inline: 0;
@@ -2412,7 +2416,7 @@
2412
2416
  color: var(--combobox_on-color, var(--bds-color_on-bg));
2413
2417
  box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--combobox_listbox-shadow, var(--bds-shadow_m));
2414
2418
  }
2415
- .bds2160Combobox-option {
2419
+ .bds2170Combobox-option {
2416
2420
  display: flex;
2417
2421
  align-items: center;
2418
2422
  padding: var(--combobox_option-padding-block, var(--bds-space_xs)) var(--combobox_option-padding-inline, var(--bds-space_m));
@@ -2421,29 +2425,29 @@
2421
2425
  cursor: pointer;
2422
2426
  transition: var(--bds-animation_transition);
2423
2427
  }
2424
- .bds2160Combobox-option.bds2160Combobox---highlighted {
2428
+ .bds2170Combobox-option.bds2170Combobox---highlighted {
2425
2429
  background-color: var(--combobox_option-bg--highlighted, var(--bds-color_bg--subtle));
2426
2430
  color: var(--combobox_option-color--highlighted, var(--bds-color_interactive_on-bg));
2427
2431
  }
2428
- .bds2160Combobox-option.bds2160Combobox---selected {
2432
+ .bds2170Combobox-option.bds2170Combobox---selected {
2429
2433
  font-weight: var(--bds-font_weight--semibold);
2430
2434
  }
2431
- .bds2160Combobox-option.bds2160Combobox---disabled {
2435
+ .bds2170Combobox-option.bds2170Combobox---disabled {
2432
2436
  opacity: 0.4;
2433
2437
  cursor: not-allowed;
2434
2438
  }
2435
2439
  }
2436
2440
 
2437
2441
  /* src/components/interaction/form/FieldGroup/FieldGroup.module.css */
2438
- @layer boostdev.bds2160FieldGroup-component {
2439
- .bds2160FieldGroup-fieldGroup {
2442
+ @layer boostdev.bds2170FieldGroup-component {
2443
+ .bds2170FieldGroup-fieldGroup {
2440
2444
  border: 0;
2441
2445
  margin: 0;
2442
2446
  padding: 0;
2443
2447
  min-inline-size: 0;
2444
2448
  --fieldGroup_collapse-threshold: calc( var(--fieldGroup_field-count, 1) * var(--fieldGroup_min-field-width, 12rem) + (var(--fieldGroup_field-count, 1) - 1) * var(--fieldGroup_gap, var(--bds-space_m)) );
2445
2449
  }
2446
- .bds2160FieldGroup-legend {
2450
+ .bds2170FieldGroup-legend {
2447
2451
  inline-size: 100%;
2448
2452
  padding-inline: 0;
2449
2453
  padding-block: var(--fieldGroup_legend-padding-block, var(--bds-space_xs));
@@ -2455,28 +2459,28 @@
2455
2459
  font-weight: var(--fieldGroup_legend-font-weight, var(--bds-font_weight--semibold));
2456
2460
  line-height: var(--fieldGroup_legend-line-height, var(--bds-font_line-height--heading));
2457
2461
  }
2458
- .bds2160FieldGroup-fieldGroup:disabled .bds2160FieldGroup-legend {
2462
+ .bds2170FieldGroup-fieldGroup:disabled .bds2170FieldGroup-legend {
2459
2463
  opacity: 0.5;
2460
2464
  }
2461
- .bds2160FieldGroup-fields {
2465
+ .bds2170FieldGroup-fields {
2462
2466
  display: flex;
2463
2467
  flex-direction: column;
2464
2468
  gap: var(--fieldGroup_gap, var(--bds-space_m));
2465
2469
  }
2466
- .bds2160FieldGroup-fieldGroup.bds2160FieldGroup---variant_horizontal .bds2160FieldGroup-fields {
2470
+ .bds2170FieldGroup-fieldGroup.bds2170FieldGroup---variant_horizontal .bds2170FieldGroup-fields {
2467
2471
  flex-flow: row wrap;
2468
2472
  }
2469
- .bds2160FieldGroup-fieldGroup.bds2160FieldGroup---variant_horizontal .bds2160FieldGroup-fields > * {
2473
+ .bds2170FieldGroup-fieldGroup.bds2170FieldGroup---variant_horizontal .bds2170FieldGroup-fields > * {
2470
2474
  flex: 1 1 var(--fieldGroup_min-field-width, 12rem);
2471
2475
  min-inline-size: 0;
2472
2476
  }
2473
- .bds2160FieldGroup-probeContainer {
2477
+ .bds2170FieldGroup-probeContainer {
2474
2478
  position: relative;
2475
2479
  inline-size: 0;
2476
2480
  block-size: 0;
2477
2481
  overflow: hidden;
2478
2482
  }
2479
- .bds2160FieldGroup-probe {
2483
+ .bds2170FieldGroup-probe {
2480
2484
  position: absolute;
2481
2485
  inset-block-start: 0;
2482
2486
  inset-inline-start: 0;
@@ -2484,28 +2488,28 @@
2484
2488
  inline-size: var(--fieldGroup_collapse-threshold);
2485
2489
  visibility: hidden;
2486
2490
  }
2487
- .bds2160FieldGroup-fieldGroup.bds2160FieldGroup---variant_horizontal[data-collapsed=true] .bds2160FieldGroup-fields {
2491
+ .bds2170FieldGroup-fieldGroup.bds2170FieldGroup---variant_horizontal[data-collapsed=true] .bds2170FieldGroup-fields {
2488
2492
  flex-direction: column;
2489
2493
  }
2490
- .bds2160FieldGroup-fieldGroup.bds2160FieldGroup---variant_horizontal[data-collapsed=true] .bds2160FieldGroup-fields > * {
2494
+ .bds2170FieldGroup-fieldGroup.bds2170FieldGroup---variant_horizontal[data-collapsed=true] .bds2170FieldGroup-fields > * {
2491
2495
  flex: 1 1 auto;
2492
2496
  }
2493
2497
  }
2494
2498
 
2495
2499
  /* src/components/interaction/form/FileInput/FileInput.module.css */
2496
- @layer boostdev.bds2160FileInput-component {
2497
- .bds2160FileInput-formGroup {
2500
+ @layer boostdev.bds2170FileInput-component {
2501
+ .bds2170FileInput-formGroup {
2498
2502
  display: flex;
2499
2503
  flex-direction: column;
2500
2504
  }
2501
- .bds2160FileInput-fieldLabel {
2505
+ .bds2170FileInput-fieldLabel {
2502
2506
  display: flex;
2503
2507
  align-items: center;
2504
2508
  font-family: var(--bds-font_family--body);
2505
2509
  color: var(--bds-color_on-bg);
2506
2510
  margin-block-end: var(--fileInput_label-margin, var(--bds-space_xs));
2507
2511
  }
2508
- .bds2160FileInput-dropZone {
2512
+ .bds2170FileInput-dropZone {
2509
2513
  display: flex;
2510
2514
  flex-direction: column;
2511
2515
  align-items: center;
@@ -2519,40 +2523,40 @@
2519
2523
  text-align: center;
2520
2524
  transition: var(--bds-animation_transition);
2521
2525
  }
2522
- .bds2160FileInput-dropZone:focus-within {
2526
+ .bds2170FileInput-dropZone:focus-within {
2523
2527
  outline: var(--bds-outline_default);
2524
2528
  outline-offset: var(--bds-outline_offset);
2525
2529
  border-color: var(--fileInput_border-color, currentcolor);
2526
2530
  }
2527
- .bds2160FileInput-isDragging {
2531
+ .bds2170FileInput-isDragging {
2528
2532
  border-color: currentcolor;
2529
2533
  background-color: var(--fileInput_bg--dragging, rgb(from currentcolor r g b / 8%));
2530
2534
  }
2531
- .bds2160FileInput-hasError {
2535
+ .bds2170FileInput-hasError {
2532
2536
  border-color: var(--bds-color_error);
2533
2537
  }
2534
- .bds2160FileInput-isDisabled {
2538
+ .bds2170FileInput-isDisabled {
2535
2539
  opacity: 0.5;
2536
2540
  cursor: not-allowed;
2537
2541
  }
2538
- .bds2160FileInput-icon {
2542
+ .bds2170FileInput-icon {
2539
2543
  inline-size: 2rem;
2540
2544
  block-size: 2rem;
2541
2545
  flex-shrink: 0;
2542
2546
  }
2543
- .bds2160FileInput-prompt {
2547
+ .bds2170FileInput-prompt {
2544
2548
  font-size: var(--fileInput_font-size, var(--bds-font_size--body));
2545
2549
  color: var(--bds-color_on-bg);
2546
2550
  }
2547
- .bds2160FileInput-prompt strong {
2551
+ .bds2170FileInput-prompt strong {
2548
2552
  color: var(--bds-color_interactive_on-bg);
2549
2553
  font-weight: var(--bds-font_weight--semibold);
2550
2554
  }
2551
- .bds2160FileInput-acceptHint {
2555
+ .bds2170FileInput-acceptHint {
2552
2556
  font-size: var(--fileInput_font-size--hint, var(--bds-font_size--body--s));
2553
2557
  color: var(--bds-color_on-bg);
2554
2558
  }
2555
- .bds2160FileInput-hiddenInput {
2559
+ .bds2170FileInput-hiddenInput {
2556
2560
  position: absolute;
2557
2561
  inline-size: 1px;
2558
2562
  block-size: 1px;
@@ -2562,7 +2566,7 @@
2562
2566
  border: 0;
2563
2567
  }
2564
2568
  @media (hover: hover) and (pointer: fine) {
2565
- .bds2160FileInput-dropZone:not(.bds2160FileInput-isDisabled):hover {
2569
+ .bds2170FileInput-dropZone:not(.bds2170FileInput-isDisabled):hover {
2566
2570
  border-color: var(--fileInput_border-color--hover, var(--bds-color_interactive));
2567
2571
  background-color: var(--fileInput_bg--hover, rgb(from var(--bds-color_interactive) r g b / 4%));
2568
2572
  }
@@ -2570,13 +2574,13 @@
2570
2574
  }
2571
2575
 
2572
2576
  /* src/components/interaction/form/FormInput/FormInput.module.css */
2573
- @layer boostdev.bds2160FormInput-component {
2574
- .bds2160FormInput-formGroup {
2577
+ @layer boostdev.bds2170FormInput-component {
2578
+ .bds2170FormInput-formGroup {
2575
2579
  --labelPosition: 0;
2576
2580
  display: flex;
2577
2581
  flex-direction: column;
2578
2582
  }
2579
- .bds2160FormInput-input {
2583
+ .bds2170FormInput-input {
2580
2584
  font-family: var(--formInput_font-family, var(--bds-font_family--body));
2581
2585
  font-size: var(--formInput_font-size, var(--bds-font_size--body));
2582
2586
  padding: var(--formInput_padding, var(--bds-space_s));
@@ -2589,30 +2593,30 @@
2589
2593
  background-color: var(--formInput_color_bg, var(--input_color_bg, var(--bds-color_bg)));
2590
2594
  transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing), background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
2591
2595
  }
2592
- .bds2160FormInput-input:focus {
2596
+ .bds2170FormInput-input:focus {
2593
2597
  --bdc_color: var(--bdc_color--focus);
2594
2598
  }
2595
- .bds2160FormInput-input:focus-visible {
2599
+ .bds2170FormInput-input:focus-visible {
2596
2600
  outline: var(--bds-outline_default);
2597
2601
  outline-offset: var(--bds-outline_offset);
2598
2602
  }
2599
- .bds2160FormInput-input:disabled {
2603
+ .bds2170FormInput-input:disabled {
2600
2604
  cursor: not-allowed;
2601
2605
  opacity: 0.5;
2602
2606
  }
2603
- .bds2160FormInput-inputError {
2607
+ .bds2170FormInput-inputError {
2604
2608
  --bdc_color: var(--bdc_color--error);
2605
2609
  --bdc-outline_width: var(--bdc-outline_width--error, 2px);
2606
2610
  }
2607
2611
  }
2608
2612
 
2609
2613
  /* src/components/interaction/form/NumberInput/NumberInput.module.css */
2610
- @layer boostdev.bds2160NumberInput-component {
2611
- .bds2160NumberInput-formGroup {
2614
+ @layer boostdev.bds2170NumberInput-component {
2615
+ .bds2170NumberInput-formGroup {
2612
2616
  display: flex;
2613
2617
  flex-direction: column;
2614
2618
  }
2615
- .bds2160NumberInput-inputRow {
2619
+ .bds2170NumberInput-inputRow {
2616
2620
  display: flex;
2617
2621
  align-items: stretch;
2618
2622
  border: var(--numberInput_border, none);
@@ -2624,14 +2628,14 @@
2624
2628
  overflow: hidden;
2625
2629
  transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing);
2626
2630
  }
2627
- .bds2160NumberInput-inputRow:focus-within {
2631
+ .bds2170NumberInput-inputRow:focus-within {
2628
2632
  --bdc_color: var(--bdc_color--focus);
2629
2633
  }
2630
- .bds2160NumberInput-inputRow:focus-within:has(:focus-visible) {
2634
+ .bds2170NumberInput-inputRow:focus-within:has(:focus-visible) {
2631
2635
  outline: var(--bds-outline_default);
2632
2636
  outline-offset: var(--bds-outline_offset);
2633
2637
  }
2634
- .bds2160NumberInput-input {
2638
+ .bds2170NumberInput-input {
2635
2639
  flex: 1;
2636
2640
  border: none;
2637
2641
  outline: none;
@@ -2644,15 +2648,15 @@
2644
2648
  min-inline-size: 0;
2645
2649
  appearance: textfield;
2646
2650
  }
2647
- .bds2160NumberInput-input::-webkit-inner-spin-button,
2648
- .bds2160NumberInput-input::-webkit-outer-spin-button {
2651
+ .bds2170NumberInput-input::-webkit-inner-spin-button,
2652
+ .bds2170NumberInput-input::-webkit-outer-spin-button {
2649
2653
  appearance: none;
2650
2654
  }
2651
- .bds2160NumberInput-inputError {
2655
+ .bds2170NumberInput-inputError {
2652
2656
  --bdc_color: var(--bdc_color--error);
2653
2657
  --bdc-outline_width: var(--bdc-outline_width--error, 2px);
2654
2658
  }
2655
- .bds2160NumberInput-stepper {
2659
+ .bds2170NumberInput-stepper {
2656
2660
  all: unset;
2657
2661
  display: flex;
2658
2662
  align-items: center;
@@ -2665,25 +2669,25 @@
2665
2669
  transition: var(--bds-animation_transition);
2666
2670
  flex-shrink: 0;
2667
2671
  }
2668
- .bds2160NumberInput-stepper svg {
2672
+ .bds2170NumberInput-stepper svg {
2669
2673
  inline-size: 1rem;
2670
2674
  block-size: 1rem;
2671
2675
  color: var(--numberInput_stepper-color, var(--bds-color_interactive));
2672
2676
  }
2673
- .bds2160NumberInput-stepper:first-child {
2677
+ .bds2170NumberInput-stepper:first-child {
2674
2678
  border-start-start-radius: var(--_radius);
2675
2679
  border-end-start-radius: var(--_radius);
2676
2680
  }
2677
- .bds2160NumberInput-stepper:last-child {
2681
+ .bds2170NumberInput-stepper:last-child {
2678
2682
  border-start-end-radius: var(--_radius);
2679
2683
  border-end-end-radius: var(--_radius);
2680
2684
  }
2681
- .bds2160NumberInput-stepper:disabled {
2685
+ .bds2170NumberInput-stepper:disabled {
2682
2686
  opacity: 0.4;
2683
2687
  cursor: not-allowed;
2684
2688
  }
2685
2689
  @media (hover: hover) and (pointer: fine) {
2686
- .bds2160NumberInput-stepper:not(:disabled):hover {
2690
+ .bds2170NumberInput-stepper:not(:disabled):hover {
2687
2691
  background-color: var(--numberInput_stepper-bg--hover, var(--bds-color_bg--subtle));
2688
2692
  opacity: var(--numberInput_stepper-opacity--hover, 0.7);
2689
2693
  }
@@ -2691,30 +2695,30 @@
2691
2695
  }
2692
2696
 
2693
2697
  /* src/components/interaction/form/Radio/Radio.module.css */
2694
- @layer boostdev.bds2160Radio-component {
2695
- .bds2160Radio-radioGroup {
2698
+ @layer boostdev.bds2170Radio-component {
2699
+ .bds2170Radio-radioGroup {
2696
2700
  --radio_size: calc(var(--bds-space_s) * 2);
2697
2701
  --inputSize: var(--radio_size);
2698
2702
  display: flex;
2699
2703
  flex-direction: column;
2700
2704
  }
2701
- .bds2160Radio-inputWrapper {
2705
+ .bds2170Radio-inputWrapper {
2702
2706
  display: flex;
2703
2707
  align-items: flex-start;
2704
2708
  gap: var(--bds-space_xs);
2705
2709
  }
2706
- .bds2160Radio-textWrapper {
2710
+ .bds2170Radio-textWrapper {
2707
2711
  display: flex;
2708
2712
  flex-direction: column;
2709
2713
  gap: var(--bds-space_xxxs);
2710
2714
  padding-block-start: var(--bds-space_xxxs);
2711
2715
  }
2712
- .bds2160Radio-description {
2716
+ .bds2170Radio-description {
2713
2717
  font-size: var(--bds-font_size--body--s);
2714
2718
  color: var(--radio_description-color, var(--bds-color_on-bg--subtle));
2715
2719
  line-height: var(--bds-font_line-height--body);
2716
2720
  }
2717
- .bds2160Radio-radio {
2721
+ .bds2170Radio-radio {
2718
2722
  flex-shrink: 0;
2719
2723
  margin-block-start: var(--radio_offset, 0.2em);
2720
2724
  inline-size: var(--radio_size);
@@ -2731,7 +2735,7 @@
2731
2735
  position: relative;
2732
2736
  transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing), background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
2733
2737
  }
2734
- .bds2160Radio-radio:checked {
2738
+ .bds2170Radio-radio:checked {
2735
2739
  background:
2736
2740
  radial-gradient(
2737
2741
  circle,
@@ -2739,30 +2743,30 @@
2739
2743
  var(--radio_color_bg, var(--bds-color_bg)) 42%);
2740
2744
  --bdc_color: var(--radio_color-active, var(--bdc-color_active));
2741
2745
  }
2742
- .bds2160Radio-radio:focus {
2746
+ .bds2170Radio-radio:focus {
2743
2747
  --bdc_color: var(--bdc_color--focus);
2744
2748
  }
2745
- .bds2160Radio-radio:focus-visible {
2749
+ .bds2170Radio-radio:focus-visible {
2746
2750
  outline: var(--bds-outline_default);
2747
2751
  outline-offset: var(--bds-outline_offset);
2748
2752
  }
2749
- .bds2160Radio-radio:disabled {
2753
+ .bds2170Radio-radio:disabled {
2750
2754
  cursor: not-allowed;
2751
2755
  opacity: 0.5;
2752
2756
  }
2753
- .bds2160Radio-radio:disabled ~ .bds2160Radio-textWrapper {
2757
+ .bds2170Radio-radio:disabled ~ .bds2170Radio-textWrapper {
2754
2758
  opacity: 0.5;
2755
2759
  cursor: not-allowed;
2756
2760
  }
2757
- .bds2160Radio-radioError {
2761
+ .bds2170Radio-radioError {
2758
2762
  --bdc_color: var(--bdc_color--error);
2759
2763
  --bdc-outline_width: var(--bdc-outline_width--error, 2px);
2760
2764
  }
2761
2765
  }
2762
2766
 
2763
2767
  /* src/components/interaction/form/RadioGroup/RadioGroup.module.css */
2764
- @layer boostdev.bds2160RadioGroup-component {
2765
- .bds2160RadioGroup-group {
2768
+ @layer boostdev.bds2170RadioGroup-component {
2769
+ .bds2170RadioGroup-group {
2766
2770
  border: none;
2767
2771
  padding: 0;
2768
2772
  margin: 0;
@@ -2770,18 +2774,18 @@
2770
2774
  flex-direction: column;
2771
2775
  gap: var(--radioGroup_gap, var(--bds-space_xs));
2772
2776
  }
2773
- .bds2160RadioGroup-legend {
2777
+ .bds2170RadioGroup-legend {
2774
2778
  font-family: var(--radioGroup_legend-font-family, var(--bds-font_family--body));
2775
- font-size: var(--radioGroup_legend-font-size, var(--bds-font_size--body--s));
2779
+ font-size: var(--radioGroup_legend-font-size, var(--bds-font_size--body));
2776
2780
  font-weight: var(--radioGroup_legend-font-weight, var(--bds-font_weight--medium));
2777
2781
  color: var(--radioGroup_legend-color, var(--bds-color_on-bg));
2778
2782
  padding: 0;
2779
2783
  margin-block-end: var(--radioGroup_legend-gap, var(--bds-space_xs));
2780
2784
  }
2781
- .bds2160RadioGroup-required {
2785
+ .bds2170RadioGroup-required {
2782
2786
  color: var(--radioGroup_required-color, var(--bds-color_error));
2783
2787
  }
2784
- .bds2160RadioGroup-requiredLabel {
2788
+ .bds2170RadioGroup-requiredLabel {
2785
2789
  position: absolute;
2786
2790
  inline-size: 1px;
2787
2791
  block-size: 1px;
@@ -2792,20 +2796,20 @@
2792
2796
  white-space: nowrap;
2793
2797
  border-width: 0;
2794
2798
  }
2795
- .bds2160RadioGroup-items {
2799
+ .bds2170RadioGroup-items {
2796
2800
  display: flex;
2797
2801
  flex-direction: column;
2798
2802
  gap: var(--radioGroup_items-gap, var(--bds-space_xs));
2799
2803
  }
2800
- .bds2160RadioGroup-groupError input {
2804
+ .bds2170RadioGroup-groupError input {
2801
2805
  --bdc_color: var(--bdc_color--error);
2802
2806
  --bdc-outline_width: var(--bdc-outline_width--error, 2px);
2803
2807
  }
2804
2808
  }
2805
2809
 
2806
2810
  /* src/components/interaction/form/SegmentedControl/SegmentedControl.module.css */
2807
- @layer boostdev.bds2160SegmentedControl-component {
2808
- .bds2160SegmentedControl-control {
2811
+ @layer boostdev.bds2170SegmentedControl-component {
2812
+ .bds2170SegmentedControl-control {
2809
2813
  position: relative;
2810
2814
  display: inline-grid;
2811
2815
  grid-auto-flow: column;
@@ -2816,11 +2820,11 @@
2816
2820
  gap: 0;
2817
2821
  --control_dir: 1;
2818
2822
  }
2819
- [dir=rtl] .bds2160SegmentedControl-control,
2820
- .bds2160SegmentedControl-control[dir=rtl] {
2823
+ [dir=rtl] .bds2170SegmentedControl-control,
2824
+ .bds2170SegmentedControl-control[dir=rtl] {
2821
2825
  --control_dir: -1;
2822
2826
  }
2823
- .bds2160SegmentedControl-thumb {
2827
+ .bds2170SegmentedControl-thumb {
2824
2828
  position: absolute;
2825
2829
  inset-block: var(--control_track-pad, var(--bds-space_xxs));
2826
2830
  inset-inline-start: var(--control_track-pad, var(--bds-space_xxs));
@@ -2832,7 +2836,7 @@
2832
2836
  transform: translateX(calc(var(--control_selected-index, 0) * var(--control_dir, 1) * 100%));
2833
2837
  transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
2834
2838
  }
2835
- .bds2160SegmentedControl-indicator {
2839
+ .bds2170SegmentedControl-indicator {
2836
2840
  position: absolute;
2837
2841
  inset-block: var(--control_track-pad, var(--bds-space_xxs));
2838
2842
  inset-inline-start: var(--control_track-pad, var(--bds-space_xxs));
@@ -2844,7 +2848,7 @@
2844
2848
  transform: translateX(calc(var(--control_selected-index, 0) * var(--control_dir, 1) * 100%));
2845
2849
  transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
2846
2850
  }
2847
- .bds2160SegmentedControl-item {
2851
+ .bds2170SegmentedControl-item {
2848
2852
  position: relative;
2849
2853
  z-index: 1;
2850
2854
  display: flex;
@@ -2865,73 +2869,73 @@
2865
2869
  border: none;
2866
2870
  outline: none;
2867
2871
  }
2868
- .bds2160SegmentedControl-item:focus-visible {
2872
+ .bds2170SegmentedControl-item:focus-visible {
2869
2873
  outline: var(--bds-outline_default);
2870
2874
  outline-offset: calc(var(--bds-outline_offset) * -1);
2871
2875
  border-radius: var(--control_thumb-radius, var(--bds-border_radius--full));
2872
2876
  }
2873
- .bds2160SegmentedControl-item.bds2160SegmentedControl---active {
2877
+ .bds2170SegmentedControl-item.bds2170SegmentedControl---active {
2874
2878
  color: var(--control_label-color--active, var(--bds-color_on-interactive));
2875
2879
  }
2876
- .bds2160SegmentedControl-item.bds2160SegmentedControl---disabled {
2880
+ .bds2170SegmentedControl-item.bds2170SegmentedControl---disabled {
2877
2881
  opacity: 0.5;
2878
2882
  cursor: not-allowed;
2879
2883
  pointer-events: none;
2880
2884
  }
2881
- .bds2160SegmentedControl-control.bds2160SegmentedControl---size_small .bds2160SegmentedControl-item {
2885
+ .bds2170SegmentedControl-control.bds2170SegmentedControl---size_small .bds2170SegmentedControl-item {
2882
2886
  padding: var(--bds-space_xxs) var(--bds-space_s);
2883
2887
  font-size: var(--bds-font_size--body--s);
2884
2888
  }
2885
- .bds2160SegmentedControl-control.bds2160SegmentedControl---size_large .bds2160SegmentedControl-item {
2889
+ .bds2170SegmentedControl-control.bds2170SegmentedControl---size_large .bds2170SegmentedControl-item {
2886
2890
  padding: var(--bds-space_s) var(--bds-space_m);
2887
2891
  white-space: normal;
2888
2892
  text-align: center;
2889
2893
  }
2890
- .bds2160SegmentedControl-control.bds2160SegmentedControl---variant_outline {
2894
+ .bds2170SegmentedControl-control.bds2170SegmentedControl---variant_outline {
2891
2895
  --control_label-color--active: var(--bds-color_interactive);
2892
2896
  }
2893
- .bds2160SegmentedControl-control.bds2160SegmentedControl---variant_outline .bds2160SegmentedControl-thumb {
2897
+ .bds2170SegmentedControl-control.bds2170SegmentedControl---variant_outline .bds2170SegmentedControl-thumb {
2894
2898
  display: none;
2895
2899
  }
2896
- .bds2160SegmentedControl-control.bds2160SegmentedControl---variant_outline .bds2160SegmentedControl-item {
2900
+ .bds2170SegmentedControl-control.bds2170SegmentedControl---variant_outline .bds2170SegmentedControl-item {
2897
2901
  background-color: var(--control_item-bg, transparent);
2898
2902
  }
2899
- .bds2160SegmentedControl-control.bds2160SegmentedControl---variant_outline .bds2160SegmentedControl-item.bds2160SegmentedControl---active {
2903
+ .bds2170SegmentedControl-control.bds2170SegmentedControl---variant_outline .bds2170SegmentedControl-item.bds2170SegmentedControl---active {
2900
2904
  background-color: var(--control_item-bg--active, var(--bds-color_bg));
2901
2905
  }
2902
- .bds2160SegmentedControl-control.bds2160SegmentedControl---variant_outline .bds2160SegmentedControl-indicator {
2906
+ .bds2170SegmentedControl-control.bds2170SegmentedControl---variant_outline .bds2170SegmentedControl-indicator {
2903
2907
  display: block;
2904
2908
  box-shadow: inset 0 0 0 var(--control_indicator-width, 2px) var(--control_indicator-color, var(--bds-color_interactive));
2905
2909
  }
2906
- .bds2160SegmentedControl-control.bds2160SegmentedControl---no-selection .bds2160SegmentedControl-thumb,
2907
- .bds2160SegmentedControl-control.bds2160SegmentedControl---no-selection .bds2160SegmentedControl-indicator {
2910
+ .bds2170SegmentedControl-control.bds2170SegmentedControl---no-selection .bds2170SegmentedControl-thumb,
2911
+ .bds2170SegmentedControl-control.bds2170SegmentedControl---no-selection .bds2170SegmentedControl-indicator {
2908
2912
  display: none;
2909
2913
  }
2910
2914
  @media (hover: hover) and (pointer: fine) {
2911
- .bds2160SegmentedControl-item:not(.bds2160SegmentedControl---active, .bds2160SegmentedControl---disabled):hover {
2915
+ .bds2170SegmentedControl-item:not(.bds2170SegmentedControl---active, .bds2170SegmentedControl---disabled):hover {
2912
2916
  color: var(--control_label-color--hover, var(--bds-color_on-bg));
2913
2917
  }
2914
2918
  }
2915
2919
  @media (prefers-reduced-motion: reduce) {
2916
- .bds2160SegmentedControl-thumb,
2917
- .bds2160SegmentedControl-indicator {
2920
+ .bds2170SegmentedControl-thumb,
2921
+ .bds2170SegmentedControl-indicator {
2918
2922
  transition: none;
2919
2923
  }
2920
2924
  }
2921
2925
  }
2922
2926
 
2923
2927
  /* src/components/interaction/form/Select/Select.module.css */
2924
- @layer boostdev.bds2160Select-component {
2925
- .bds2160Select-formGroup {
2928
+ @layer boostdev.bds2170Select-component {
2929
+ .bds2170Select-formGroup {
2926
2930
  display: flex;
2927
2931
  flex-direction: column;
2928
2932
  }
2929
- .bds2160Select-selectWrapper {
2933
+ .bds2170Select-selectWrapper {
2930
2934
  position: relative;
2931
2935
  display: flex;
2932
2936
  align-items: center;
2933
2937
  }
2934
- .bds2160Select-select {
2938
+ .bds2170Select-select {
2935
2939
  appearance: none;
2936
2940
  inline-size: 100%;
2937
2941
  font-family: var(--bds-font_family--body);
@@ -2948,22 +2952,22 @@
2948
2952
  cursor: pointer;
2949
2953
  transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing), background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
2950
2954
  }
2951
- .bds2160Select-select:focus {
2955
+ .bds2170Select-select:focus {
2952
2956
  --bdc_color: var(--bdc_color--focus);
2953
2957
  }
2954
- .bds2160Select-select:focus-visible {
2958
+ .bds2170Select-select:focus-visible {
2955
2959
  outline: var(--bds-outline_default);
2956
2960
  outline-offset: var(--bds-outline_offset);
2957
2961
  }
2958
- .bds2160Select-select:disabled {
2962
+ .bds2170Select-select:disabled {
2959
2963
  opacity: 0.5;
2960
2964
  cursor: not-allowed;
2961
2965
  }
2962
- .bds2160Select-selectError {
2966
+ .bds2170Select-selectError {
2963
2967
  --bdc_color: var(--bdc_color--error);
2964
2968
  --bdc-outline_width: var(--bdc-outline_width--error, 2px);
2965
2969
  }
2966
- .bds2160Select-chevron {
2970
+ .bds2170Select-chevron {
2967
2971
  position: absolute;
2968
2972
  inset-inline-end: var(--bds-space_s);
2969
2973
  display: flex;
@@ -2971,30 +2975,30 @@
2971
2975
  pointer-events: none;
2972
2976
  color: var(--select_chevron-color, var(--bds-color_interactive));
2973
2977
  }
2974
- .bds2160Select-chevron svg {
2978
+ .bds2170Select-chevron svg {
2975
2979
  inline-size: var(--select_chevron-size, 1rem);
2976
2980
  block-size: var(--select_chevron-size, 1rem);
2977
2981
  }
2978
2982
  }
2979
2983
 
2980
2984
  /* src/components/interaction/form/Slider/Slider.module.css */
2981
- @layer boostdev.bds2160Slider-component {
2982
- .bds2160Slider-formGroup {
2985
+ @layer boostdev.bds2170Slider-component {
2986
+ .bds2170Slider-formGroup {
2983
2987
  display: flex;
2984
2988
  flex-direction: column;
2985
2989
  gap: var(--bds-space_xxs);
2986
2990
  }
2987
- .bds2160Slider-labelRow {
2991
+ .bds2170Slider-labelRow {
2988
2992
  display: flex;
2989
2993
  justify-content: space-between;
2990
2994
  align-items: baseline;
2991
2995
  }
2992
- .bds2160Slider-value {
2996
+ .bds2170Slider-value {
2993
2997
  font-size: var(--bds-font_size--body--s);
2994
2998
  font-variant-numeric: tabular-nums;
2995
2999
  color: var(--bds-color_on-bg--subtle);
2996
3000
  }
2997
- .bds2160Slider-slider {
3001
+ .bds2170Slider-slider {
2998
3002
  --slider_fill: 0%;
2999
3003
  color: var(--slider_color, var(--bds-color_on-bg));
3000
3004
  appearance: none;
@@ -3011,7 +3015,7 @@
3011
3015
  cursor: pointer;
3012
3016
  transition: var(--bds-animation_transition);
3013
3017
  }
3014
- .bds2160Slider-slider:dir(rtl) {
3018
+ .bds2170Slider-slider:dir(rtl) {
3015
3019
  background:
3016
3020
  linear-gradient(
3017
3021
  to left,
@@ -3020,16 +3024,16 @@
3020
3024
  var(--slider_track-bg, var(--bds-color_bg--subtle)) var(--slider_fill),
3021
3025
  var(--slider_track-bg, var(--bds-color_bg--subtle)) 100%);
3022
3026
  }
3023
- .bds2160Slider-slider:focus-visible {
3027
+ .bds2170Slider-slider:focus-visible {
3024
3028
  outline: var(--bds-outline_default);
3025
3029
  outline-offset: var(--bds-outline_offset);
3026
3030
  border-radius: var(--slider_track-radius, var(--bds-border_radius--full));
3027
3031
  }
3028
- .bds2160Slider-slider:disabled {
3032
+ .bds2170Slider-slider:disabled {
3029
3033
  opacity: 0.4;
3030
3034
  cursor: not-allowed;
3031
3035
  }
3032
- .bds2160Slider-slider::-webkit-slider-thumb {
3036
+ .bds2170Slider-slider::-webkit-slider-thumb {
3033
3037
  appearance: none;
3034
3038
  inline-size: var(--slider_thumb-size, calc(var(--bds-space_s) * 2));
3035
3039
  block-size: var(--slider_thumb-size, calc(var(--bds-space_s) * 2));
@@ -3039,7 +3043,7 @@
3039
3043
  transition: var(--bds-animation_transition);
3040
3044
  cursor: pointer;
3041
3045
  }
3042
- .bds2160Slider-slider::-moz-range-thumb {
3046
+ .bds2170Slider-slider::-moz-range-thumb {
3043
3047
  inline-size: var(--slider_thumb-size, calc(var(--bds-space_s) * 2));
3044
3048
  block-size: var(--slider_thumb-size, calc(var(--bds-space_s) * 2));
3045
3049
  border: none;
@@ -3048,7 +3052,7 @@
3048
3052
  box-shadow: var(--bds-shadow_s);
3049
3053
  cursor: pointer;
3050
3054
  }
3051
- .bds2160Slider-sliderError {
3055
+ .bds2170Slider-sliderError {
3052
3056
  background:
3053
3057
  linear-gradient(
3054
3058
  to right,
@@ -3057,7 +3061,7 @@
3057
3061
  var(--slider_track-bg, var(--bds-color_bg--subtle)) var(--slider_fill),
3058
3062
  var(--slider_track-bg, var(--bds-color_bg--subtle)) 100%);
3059
3063
  }
3060
- .bds2160Slider-sliderError:dir(rtl) {
3064
+ .bds2170Slider-sliderError:dir(rtl) {
3061
3065
  background:
3062
3066
  linear-gradient(
3063
3067
  to left,
@@ -3066,43 +3070,43 @@
3066
3070
  var(--slider_track-bg, var(--bds-color_bg--subtle)) var(--slider_fill),
3067
3071
  var(--slider_track-bg, var(--bds-color_bg--subtle)) 100%);
3068
3072
  }
3069
- .bds2160Slider-sliderError::-webkit-slider-thumb {
3073
+ .bds2170Slider-sliderError::-webkit-slider-thumb {
3070
3074
  background-color: var(--slider_color--error, var(--bds-color_error));
3071
3075
  }
3072
- .bds2160Slider-sliderError::-moz-range-thumb {
3076
+ .bds2170Slider-sliderError::-moz-range-thumb {
3073
3077
  background-color: var(--slider_color--error, var(--bds-color_error));
3074
3078
  }
3075
3079
  @media (prefers-reduced-motion: reduce) {
3076
- .bds2160Slider-slider,
3077
- .bds2160Slider-slider::-webkit-slider-thumb,
3078
- .bds2160Slider-slider::-moz-range-thumb {
3080
+ .bds2170Slider-slider,
3081
+ .bds2170Slider-slider::-webkit-slider-thumb,
3082
+ .bds2170Slider-slider::-moz-range-thumb {
3079
3083
  transition: none;
3080
3084
  }
3081
3085
  }
3082
3086
  }
3083
3087
 
3084
3088
  /* src/components/interaction/form/Switch/Switch.module.css */
3085
- @layer boostdev.bds2160Switch-component {
3086
- .bds2160Switch-switchGroup {
3089
+ @layer boostdev.bds2170Switch-component {
3090
+ .bds2170Switch-switchGroup {
3087
3091
  color: var(--switch_color, var(--bds-color_on-bg));
3088
3092
  display: flex;
3089
3093
  flex-direction: column;
3090
3094
  }
3091
- .bds2160Switch-switchGroup.bds2160Switch---size_small {
3095
+ .bds2170Switch-switchGroup.bds2170Switch---size_small {
3092
3096
  --switch_thumb-size: 1em;
3093
3097
  }
3094
- .bds2160Switch-switchGroup.bds2160Switch---size_medium {
3098
+ .bds2170Switch-switchGroup.bds2170Switch---size_medium {
3095
3099
  --switch_thumb-size: 1.25em;
3096
3100
  }
3097
- .bds2160Switch-switchGroup.bds2160Switch---size_large {
3101
+ .bds2170Switch-switchGroup.bds2170Switch---size_large {
3098
3102
  --switch_thumb-size: 1.5em;
3099
3103
  }
3100
- .bds2160Switch-inputWrapper {
3104
+ .bds2170Switch-inputWrapper {
3101
3105
  display: flex;
3102
3106
  align-items: center;
3103
3107
  gap: var(--bds-space_xs);
3104
3108
  }
3105
- .bds2160Switch-trackWrapper {
3109
+ .bds2170Switch-trackWrapper {
3106
3110
  position: relative;
3107
3111
  display: inline-flex;
3108
3112
  align-items: center;
@@ -3110,7 +3114,7 @@
3110
3114
  inline-size: calc(var(--switch_thumb-size, 1.25em) * 2 + var(--switch_track-pad, var(--bds-space_xxxs)) * 2);
3111
3115
  block-size: calc(var(--switch_thumb-size, 1.25em) + var(--switch_track-pad, var(--bds-space_xxxs)) * 2);
3112
3116
  }
3113
- .bds2160Switch-switch {
3117
+ .bds2170Switch-switch {
3114
3118
  position: absolute;
3115
3119
  inset: 0;
3116
3120
  appearance: none;
@@ -3121,10 +3125,10 @@
3121
3125
  cursor: pointer;
3122
3126
  z-index: 1;
3123
3127
  }
3124
- .bds2160Switch-switch:disabled {
3128
+ .bds2170Switch-switch:disabled {
3125
3129
  cursor: not-allowed;
3126
3130
  }
3127
- .bds2160Switch-track {
3131
+ .bds2170Switch-track {
3128
3132
  display: inline-flex;
3129
3133
  align-items: center;
3130
3134
  inline-size: calc(var(--switch_thumb-size, 1.25em) * 2 + var(--switch_track-pad, var(--bds-space_xxxs)) * 2);
@@ -3140,7 +3144,7 @@
3140
3144
  transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
3141
3145
  --bdc_color: var(--switch_thumb-bg, var(--bds-color_interactive));
3142
3146
  }
3143
- .bds2160Switch-thumb {
3147
+ .bds2170Switch-thumb {
3144
3148
  display: block;
3145
3149
  inline-size: var(--switch_thumb-size, 1.25em);
3146
3150
  block-size: var(--switch_thumb-size, 1.25em);
@@ -3150,44 +3154,44 @@
3150
3154
  transition: var(--bds-animation_transition);
3151
3155
  transform: translateX(0);
3152
3156
  }
3153
- .bds2160Switch-switch.bds2160Switch-switchError + .bds2160Switch-track {
3157
+ .bds2170Switch-switch.bds2170Switch-switchError + .bds2170Switch-track {
3154
3158
  --bdc_color: var(--switch_border-color--error, var(--bds-color_error));
3155
3159
  --bdc-outline_width: var(--bdc-outline_width--error, 2px);
3156
3160
  }
3157
- .bds2160Switch-switch:checked + .bds2160Switch-track {
3161
+ .bds2170Switch-switch:checked + .bds2170Switch-track {
3158
3162
  background-color: var(--switch_track-bg--active, var(--bdc-color_active--subtle));
3159
3163
  --bdc_color: var(--switch_thumb-bg--active, var(--bds-color_interactive));
3160
3164
  }
3161
- .bds2160Switch-switch:checked + .bds2160Switch-track .bds2160Switch-thumb {
3165
+ .bds2170Switch-switch:checked + .bds2170Switch-track .bds2170Switch-thumb {
3162
3166
  background-color: var(--switch_thumb-bg--active, var(--bds-color_interactive));
3163
3167
  transform: translateX(var(--switch_thumb-size, 1.25em));
3164
3168
  }
3165
- [dir=rtl] .bds2160Switch-switch:checked + .bds2160Switch-track .bds2160Switch-thumb {
3169
+ [dir=rtl] .bds2170Switch-switch:checked + .bds2170Switch-track .bds2170Switch-thumb {
3166
3170
  transform: translateX(calc(var(--switch_thumb-size, 1.25em) * -1));
3167
3171
  }
3168
- .bds2160Switch-switch:focus-visible + .bds2160Switch-track {
3172
+ .bds2170Switch-switch:focus-visible + .bds2170Switch-track {
3169
3173
  outline: var(--bds-outline_default);
3170
3174
  outline-offset: var(--bds-outline_offset);
3171
3175
  border-radius: var(--switch_track-radius, var(--bds-border_radius--full));
3172
3176
  }
3173
- .bds2160Switch-switch:disabled + .bds2160Switch-track {
3177
+ .bds2170Switch-switch:disabled + .bds2170Switch-track {
3174
3178
  opacity: 0.4;
3175
3179
  }
3176
3180
  @media (prefers-reduced-motion: reduce) {
3177
- .bds2160Switch-track,
3178
- .bds2160Switch-thumb {
3181
+ .bds2170Switch-track,
3182
+ .bds2170Switch-thumb {
3179
3183
  transition: none;
3180
3184
  }
3181
3185
  }
3182
3186
  }
3183
3187
 
3184
3188
  /* src/components/interaction/form/Textarea/Textarea.module.css */
3185
- @layer boostdev.bds2160Textarea-component {
3186
- .bds2160Textarea-formGroup {
3189
+ @layer boostdev.bds2170Textarea-component {
3190
+ .bds2170Textarea-formGroup {
3187
3191
  display: flex;
3188
3192
  flex-direction: column;
3189
3193
  }
3190
- .bds2160Textarea-textarea {
3194
+ .bds2170Textarea-textarea {
3191
3195
  font-family: var(--textarea_font-family, var(--bds-font_family--body));
3192
3196
  font-size: var(--textarea_font-size, var(--bds-font_size--body));
3193
3197
  line-height: var(--textarea_line-height, var(--bds-font_line-height--body));
@@ -3203,66 +3207,66 @@
3203
3207
  min-block-size: var(--textarea_min-block-size, calc(var(--bds-space_m) * 5));
3204
3208
  transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing), background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
3205
3209
  }
3206
- .bds2160Textarea-textarea:focus {
3210
+ .bds2170Textarea-textarea:focus {
3207
3211
  --bdc_color: var(--bdc_color--focus);
3208
3212
  }
3209
- .bds2160Textarea-textarea:focus-visible {
3213
+ .bds2170Textarea-textarea:focus-visible {
3210
3214
  outline: var(--bds-outline_default);
3211
3215
  outline-offset: var(--bds-outline_offset);
3212
3216
  }
3213
- .bds2160Textarea-textarea:disabled {
3217
+ .bds2170Textarea-textarea:disabled {
3214
3218
  opacity: 0.5;
3215
3219
  cursor: not-allowed;
3216
3220
  resize: none;
3217
3221
  }
3218
- .bds2160Textarea-textareaError {
3222
+ .bds2170Textarea-textareaError {
3219
3223
  --bdc_color: var(--bdc_color--error);
3220
3224
  --bdc-outline_width: var(--bdc-outline_width--error, 2px);
3221
3225
  }
3222
3226
  }
3223
3227
 
3224
3228
  /* src/components/layout/ButtonGroup/ButtonGroup.module.css */
3225
- @layer boostdev.bds2160ButtonGroup-component {
3226
- .bds2160ButtonGroup-buttonGroup {
3229
+ @layer boostdev.bds2170ButtonGroup-component {
3230
+ .bds2170ButtonGroup-buttonGroup {
3227
3231
  container-type: inline-size;
3228
3232
  container-name: button-group;
3229
3233
  grid-column: var(--bds-grid_span-100);
3230
3234
  inline-size: 100%;
3231
3235
  }
3232
- .bds2160ButtonGroup-buttonGroup .bds2160ButtonGroup-container {
3236
+ .bds2170ButtonGroup-buttonGroup .bds2170ButtonGroup-container {
3233
3237
  position: relative;
3234
3238
  display: flex;
3235
3239
  flex-direction: column-reverse;
3236
3240
  gap: var(--buttonGroup_gap, var(--bds-space_l));
3237
3241
  align-items: center;
3238
3242
  }
3239
- .bds2160ButtonGroup-buttonGroup.bds2160ButtonGroup---variant_card .bds2160ButtonGroup-container {
3243
+ .bds2170ButtonGroup-buttonGroup.bds2170ButtonGroup---variant_card .bds2170ButtonGroup-container {
3240
3244
  align-items: stretch;
3241
3245
  }
3242
- .bds2160ButtonGroup-buttonGroup.bds2160ButtonGroup---variant_flow .bds2160ButtonGroup-container,
3243
- .bds2160ButtonGroup-buttonGroup.bds2160ButtonGroup---variant_modal .bds2160ButtonGroup-container {
3246
+ .bds2170ButtonGroup-buttonGroup.bds2170ButtonGroup---variant_flow .bds2170ButtonGroup-container,
3247
+ .bds2170ButtonGroup-buttonGroup.bds2170ButtonGroup---variant_modal .bds2170ButtonGroup-container {
3244
3248
  align-items: center;
3245
3249
  }
3246
- .bds2160ButtonGroup-buttonGroup.bds2160ButtonGroup---variant_content .bds2160ButtonGroup-container {
3250
+ .bds2170ButtonGroup-buttonGroup.bds2170ButtonGroup---variant_content .bds2170ButtonGroup-container {
3247
3251
  align-items: flex-start;
3248
3252
  }
3249
3253
  @supports (contain: inline-size) {
3250
3254
  @container button-group (min-width: 30rem) {
3251
- .bds2160ButtonGroup-buttonGroup .bds2160ButtonGroup-container {
3255
+ .bds2170ButtonGroup-buttonGroup .bds2170ButtonGroup-container {
3252
3256
  flex-direction: row;
3253
3257
  justify-content: space-between;
3254
3258
  }
3255
- .bds2160ButtonGroup-buttonGroup.bds2160ButtonGroup---variant_modal .bds2160ButtonGroup-container > :first-child:last-child,
3256
- .bds2160ButtonGroup-buttonGroup.bds2160ButtonGroup---variant_flow .bds2160ButtonGroup-container > :first-child:last-child {
3259
+ .bds2170ButtonGroup-buttonGroup.bds2170ButtonGroup---variant_modal .bds2170ButtonGroup-container > :first-child:last-child,
3260
+ .bds2170ButtonGroup-buttonGroup.bds2170ButtonGroup---variant_flow .bds2170ButtonGroup-container > :first-child:last-child {
3257
3261
  margin-inline-start: auto;
3258
3262
  }
3259
- .bds2160ButtonGroup-buttonGroup.bds2160ButtonGroup---variant_card .bds2160ButtonGroup-container {
3263
+ .bds2170ButtonGroup-buttonGroup.bds2170ButtonGroup---variant_card .bds2170ButtonGroup-container {
3260
3264
  justify-content: center;
3261
3265
  }
3262
- .bds2160ButtonGroup-buttonGroup.bds2160ButtonGroup---variant_modal .bds2160ButtonGroup-container {
3266
+ .bds2170ButtonGroup-buttonGroup.bds2170ButtonGroup---variant_modal .bds2170ButtonGroup-container {
3263
3267
  justify-content: flex-end;
3264
3268
  }
3265
- .bds2160ButtonGroup-buttonGroup.bds2160ButtonGroup---variant_content .bds2160ButtonGroup-container {
3269
+ .bds2170ButtonGroup-buttonGroup.bds2170ButtonGroup---variant_content .bds2170ButtonGroup-container {
3266
3270
  justify-content: flex-start;
3267
3271
  align-items: center;
3268
3272
  }
@@ -3271,205 +3275,205 @@
3271
3275
  }
3272
3276
 
3273
3277
  /* src/components/layout/Card/Card.module.css */
3274
- @layer boostdev.bds2160Card-component {
3275
- .bds2160Card-card {
3278
+ @layer boostdev.bds2170Card-component {
3279
+ .bds2170Card-card {
3276
3280
  background-color: var(--card_color, var(--bds-color_bg--strong, var(--bds-color_bg)));
3277
3281
  color: var(--card_on-color, var(--bds-color_on-bg));
3278
3282
  border-radius: var(--card_radius, var(--bds-border_radius--m));
3279
3283
  transition: var(--card_transition, var(--bds-animation_transition));
3280
3284
  position: relative;
3281
3285
  }
3282
- .bds2160Card-card:is(button) {
3286
+ .bds2170Card-card:is(button) {
3283
3287
  border: none;
3284
3288
  font: inherit;
3285
3289
  text-align: inherit;
3286
3290
  display: block;
3287
3291
  inline-size: 100%;
3288
3292
  }
3289
- .bds2160Card-card.bds2160Card---default {
3293
+ .bds2170Card-card.bds2170Card---default {
3290
3294
  box-shadow: var(--card_shadow--default, var(--bds-shadow_s));
3291
3295
  }
3292
- .bds2160Card-card.bds2160Card---elevated {
3296
+ .bds2170Card-card.bds2170Card---elevated {
3293
3297
  box-shadow: var(--card_shadow--elevated, var(--bds-shadow_m));
3294
3298
  }
3295
- .bds2160Card-card.bds2160Card---outlined {
3299
+ .bds2170Card-card.bds2170Card---outlined {
3296
3300
  border: var(--card_border, none);
3297
3301
  --bdc_color: currentcolor;
3298
3302
  box-shadow: var(--card_shadow--outlined, inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--bds-shadow_s));
3299
3303
  }
3300
- .bds2160Card-card.bds2160Card---clickable {
3304
+ .bds2170Card-card.bds2170Card---clickable {
3301
3305
  cursor: pointer;
3302
3306
  }
3303
- .bds2160Card-card.bds2160Card---padding-none {
3307
+ .bds2170Card-card.bds2170Card---padding-none {
3304
3308
  padding: var(--card_padding, 0);
3305
3309
  }
3306
- .bds2160Card-card.bds2160Card---padding-small {
3310
+ .bds2170Card-card.bds2170Card---padding-small {
3307
3311
  padding: var(--card_padding, var(--bds-space_s));
3308
3312
  }
3309
- .bds2160Card-card.bds2160Card---padding-medium {
3313
+ .bds2170Card-card.bds2170Card---padding-medium {
3310
3314
  padding: var(--card_padding, var(--bds-space_m));
3311
3315
  }
3312
- .bds2160Card-card.bds2160Card---padding-large {
3316
+ .bds2170Card-card.bds2170Card---padding-large {
3313
3317
  padding: var(--card_padding, var(--bds-space_l));
3314
3318
  }
3315
- .bds2160Card-card.bds2160Card---padding-extra-large {
3319
+ .bds2170Card-card.bds2170Card---padding-extra-large {
3316
3320
  padding: var(--card_padding, var(--bds-space_xl));
3317
3321
  }
3318
- .bds2160Card-card.bds2160Card---text-start {
3322
+ .bds2170Card-card.bds2170Card---text-start {
3319
3323
  text-align: start;
3320
3324
  }
3321
- .bds2160Card-card.bds2160Card---text-center {
3325
+ .bds2170Card-card.bds2170Card---text-center {
3322
3326
  text-align: center;
3323
3327
  }
3324
- .bds2160Card-card.bds2160Card---text-end {
3328
+ .bds2170Card-card.bds2170Card---text-end {
3325
3329
  text-align: end;
3326
3330
  }
3327
- .bds2160Card-card.bds2160Card---clickable:focus-visible {
3331
+ .bds2170Card-card.bds2170Card---clickable:focus-visible {
3328
3332
  outline: var(--bds-outline_default);
3329
3333
  outline-offset: var(--bds-outline_offset);
3330
3334
  }
3331
- .bds2160Card-card.bds2160Card---clickable:active {
3335
+ .bds2170Card-card.bds2170Card---clickable:active {
3332
3336
  transform: translateY(0);
3333
3337
  box-shadow: var(--card_shadow--active, var(--bds-shadow_s));
3334
3338
  }
3335
3339
  @media (hover: hover) and (pointer: fine) {
3336
- .bds2160Card-card.bds2160Card---clickable:hover {
3340
+ .bds2170Card-card.bds2170Card---clickable:hover {
3337
3341
  transform: translateY(-2px);
3338
3342
  box-shadow: var(--card_shadow--clickable-hover, var(--bds-shadow_xl));
3339
3343
  }
3340
- .bds2160Card-card.bds2160Card---default:hover {
3344
+ .bds2170Card-card.bds2170Card---default:hover {
3341
3345
  box-shadow: var(--card_shadow--default-hover, var(--bds-shadow_m));
3342
3346
  }
3343
- .bds2160Card-card.bds2160Card---elevated:hover {
3347
+ .bds2170Card-card.bds2170Card---elevated:hover {
3344
3348
  box-shadow: var(--card_shadow--elevated-hover, var(--bds-shadow_2xl));
3345
3349
  }
3346
- .bds2160Card-card.bds2160Card---outlined:hover {
3350
+ .bds2170Card-card.bds2170Card---outlined:hover {
3347
3351
  box-shadow: var(--card_shadow--outlined-hover, var(--bds-shadow_s));
3348
3352
  }
3349
3353
  }
3350
3354
  @media (prefers-reduced-motion: reduce) {
3351
- .bds2160Card-card {
3355
+ .bds2170Card-card {
3352
3356
  transition: none;
3353
3357
  }
3354
- .bds2160Card-card.bds2160Card---clickable:hover,
3355
- .bds2160Card-card.bds2160Card---clickable:active {
3358
+ .bds2170Card-card.bds2170Card---clickable:hover,
3359
+ .bds2170Card-card.bds2170Card---clickable:active {
3356
3360
  transform: none;
3357
3361
  }
3358
3362
  }
3359
3363
  }
3360
3364
 
3361
3365
  /* src/components/layout/Grid/Grid.module.css */
3362
- @layer boostdev.bds2160Grid-component {
3363
- .bds2160Grid-grid {
3366
+ @layer boostdev.bds2170Grid-component {
3367
+ .bds2170Grid-grid {
3364
3368
  display: grid;
3365
3369
  gap: var(--grid_gap, var(--bds-grid_gap));
3366
3370
  }
3367
- .bds2160Grid-grid.bds2160Grid---main {
3371
+ .bds2170Grid-grid.bds2170Grid---main {
3368
3372
  grid-template-columns: var(--bds-grid_template-columns);
3369
3373
  }
3370
- .bds2160Grid-grid.bds2160Grid---page {
3374
+ .bds2170Grid-grid.bds2170Grid---page {
3371
3375
  grid-template-columns: 1fr;
3372
3376
  grid-column: 1 / -1;
3373
3377
  }
3374
- .bds2160Grid-grid.bds2160Grid---funnel {
3378
+ .bds2170Grid-grid.bds2170Grid---funnel {
3375
3379
  grid-template-columns: var(--bds-grid_template-columns);
3376
3380
  max-inline-size: var(--bds-container_max-width--narrow);
3377
3381
  margin-inline: auto;
3378
3382
  }
3379
- .bds2160Grid-grid.bds2160Grid---custom {
3383
+ .bds2170Grid-grid.bds2170Grid---custom {
3380
3384
  grid-template-columns: repeat(var(--grid_columns, 4), minmax(0, 1fr));
3381
3385
  }
3382
- .bds2160Grid-grid.bds2160Grid---centered {
3386
+ .bds2170Grid-grid.bds2170Grid---centered {
3383
3387
  margin-inline: auto;
3384
3388
  max-inline-size: var(--bds-container_max-width);
3385
3389
  padding-inline: var(--bds-container_spacing-inline);
3386
3390
  }
3387
- .bds2160Grid-item {
3391
+ .bds2170Grid-item {
3388
3392
  min-inline-size: 0;
3389
3393
  }
3390
3394
  @supports (grid-template-rows: masonry) {
3391
- .bds2160Grid-grid.bds2160Grid---masonry {
3395
+ .bds2170Grid-grid.bds2170Grid---masonry {
3392
3396
  grid-template-rows: masonry;
3393
3397
  }
3394
3398
  }
3395
3399
  @supports (display: grid-lanes) {
3396
- .bds2160Grid-grid.bds2160Grid---masonry {
3400
+ .bds2170Grid-grid.bds2170Grid---masonry {
3397
3401
  display: grid-lanes;
3398
3402
  }
3399
3403
  }
3400
3404
  }
3401
3405
 
3402
3406
  /* src/components/layout/SectionHeader/SectionHeader.module.css */
3403
- @layer boostdev.bds2160SectionHeader-component {
3404
- .bds2160SectionHeader-sectionHeader {
3407
+ @layer boostdev.bds2170SectionHeader-component {
3408
+ .bds2170SectionHeader-sectionHeader {
3405
3409
  display: flex;
3406
3410
  flex-direction: column;
3407
3411
  gap: var(--sectionHeader_gap, var(--bds-space_m));
3408
3412
  grid-column: var(--bds-grid_span-100);
3409
3413
  }
3410
- .bds2160SectionHeader-title {
3414
+ .bds2170SectionHeader-title {
3411
3415
  color: var(--sectionHeader_title-color, var(--sectionHeader-title-color, var(--bds-color_on-bg)));
3412
3416
  margin: 0;
3413
3417
  font-family: var(--sectionHeader_title-font-family, var(--bds-font_family--heading));
3414
3418
  }
3415
- .bds2160SectionHeader-subtitle {
3419
+ .bds2170SectionHeader-subtitle {
3416
3420
  color: var(--sectionHeader_subtitle-color, var(--bds-color_on-bg--muted, var(--bds-color_grey--strong)));
3417
3421
  margin: 0;
3418
3422
  font-family: var(--bds-font_family--body);
3419
3423
  font-weight: var(--bds-font_weight--medium);
3420
3424
  }
3421
- .bds2160SectionHeader-sectionHeader.bds2160SectionHeader---start {
3425
+ .bds2170SectionHeader-sectionHeader.bds2170SectionHeader---start {
3422
3426
  align-items: flex-start;
3423
3427
  text-align: start;
3424
3428
  }
3425
- .bds2160SectionHeader-sectionHeader.bds2160SectionHeader---center {
3429
+ .bds2170SectionHeader-sectionHeader.bds2170SectionHeader---center {
3426
3430
  align-items: center;
3427
3431
  text-align: center;
3428
3432
  }
3429
- .bds2160SectionHeader-sectionHeader.bds2160SectionHeader---end {
3433
+ .bds2170SectionHeader-sectionHeader.bds2170SectionHeader---end {
3430
3434
  align-items: flex-end;
3431
3435
  text-align: end;
3432
3436
  }
3433
- .bds2160SectionHeader-sectionHeader.bds2160SectionHeader---medium .bds2160SectionHeader-title {
3437
+ .bds2170SectionHeader-sectionHeader.bds2170SectionHeader---medium .bds2170SectionHeader-title {
3434
3438
  font-size: var(--sectionHeader_title-size, var(--bds-font_size--heading-2));
3435
3439
  line-height: var(--sectionHeader_title-line-height, var(--bds-font_line-height--heading));
3436
3440
  font-weight: var(--sectionHeader_title-weight, var(--bds-font_weight--heading, var(--bds-font_weight--bold)));
3437
3441
  }
3438
- .bds2160SectionHeader-sectionHeader.bds2160SectionHeader---medium .bds2160SectionHeader-subtitle {
3442
+ .bds2170SectionHeader-sectionHeader.bds2170SectionHeader---medium .bds2170SectionHeader-subtitle {
3439
3443
  font-size: var(--sectionHeader_subtitle-size, var(--bds-font_size--body));
3440
3444
  line-height: var(--sectionHeader_subtitle-line-height, 1.3);
3441
3445
  }
3442
- .bds2160SectionHeader-sectionHeader.bds2160SectionHeader---xs .bds2160SectionHeader-title {
3446
+ .bds2170SectionHeader-sectionHeader.bds2170SectionHeader---xs .bds2170SectionHeader-title {
3443
3447
  font-size: var(--sectionHeader_title-size, var(--bds-font_size--body));
3444
3448
  line-height: var(--sectionHeader_title-line-height, var(--bds-font_line-height--heading));
3445
3449
  font-weight: var(--sectionHeader_title-weight, var(--bds-font_weight--heading, var(--bds-font_weight--bold)));
3446
3450
  }
3447
- .bds2160SectionHeader-sectionHeader.bds2160SectionHeader---xs .bds2160SectionHeader-subtitle {
3451
+ .bds2170SectionHeader-sectionHeader.bds2170SectionHeader---xs .bds2170SectionHeader-subtitle {
3448
3452
  font-size: var(--sectionHeader_subtitle-size, var(--bds-font_size--body--s));
3449
3453
  line-height: var(--sectionHeader_subtitle-line-height, 1.4);
3450
3454
  }
3451
- .bds2160SectionHeader-sectionHeader.bds2160SectionHeader---small .bds2160SectionHeader-title {
3455
+ .bds2170SectionHeader-sectionHeader.bds2170SectionHeader---small .bds2170SectionHeader-title {
3452
3456
  font-size: var(--sectionHeader_title-size, var(--bds-font_size--heading-3));
3453
3457
  line-height: var(--sectionHeader_title-line-height, var(--bds-font_line-height--heading));
3454
3458
  font-weight: var(--sectionHeader_title-weight, var(--bds-font_weight--heading, var(--bds-font_weight--bold)));
3455
3459
  }
3456
- .bds2160SectionHeader-sectionHeader.bds2160SectionHeader---small .bds2160SectionHeader-subtitle {
3460
+ .bds2170SectionHeader-sectionHeader.bds2170SectionHeader---small .bds2170SectionHeader-subtitle {
3457
3461
  font-size: var(--sectionHeader_subtitle-size, var(--bds-font_size--body));
3458
3462
  line-height: var(--sectionHeader_subtitle-line-height, 1.4);
3459
3463
  }
3460
- .bds2160SectionHeader-sectionHeader.bds2160SectionHeader---large .bds2160SectionHeader-title {
3464
+ .bds2170SectionHeader-sectionHeader.bds2170SectionHeader---large .bds2170SectionHeader-title {
3461
3465
  font-size: var(--sectionHeader_title-size, var(--bds-font_size--heading-1));
3462
3466
  line-height: var(--sectionHeader_title-line-height, var(--bds-font_line-height--heading));
3463
3467
  font-weight: var(--sectionHeader_title-weight, var(--bds-font_weight--heading, var(--bds-font_weight--bold)));
3464
3468
  letter-spacing: var(--bds-font_tracking--tight);
3465
3469
  }
3466
- .bds2160SectionHeader-sectionHeader.bds2160SectionHeader---large .bds2160SectionHeader-subtitle {
3470
+ .bds2170SectionHeader-sectionHeader.bds2170SectionHeader---large .bds2170SectionHeader-subtitle {
3467
3471
  font-size: var(--sectionHeader_subtitle-size, var(--bds-font_size--heading-3));
3468
3472
  line-height: var(--sectionHeader_subtitle-line-height, 1.3);
3469
3473
  font-weight: var(--bds-font_weight--medium);
3470
3474
  }
3471
3475
  @supports (background-clip: text) {
3472
- .bds2160SectionHeader-sectionHeader.bds2160SectionHeader---gradient .bds2160SectionHeader-title {
3476
+ .bds2170SectionHeader-sectionHeader.bds2170SectionHeader---gradient .bds2170SectionHeader-title {
3473
3477
  inline-size: fit-content;
3474
3478
  max-inline-size: 100%;
3475
3479
  background-image: var(--sectionHeader_title-gradient, linear-gradient(90deg, var(--bds-color_primary--strong, var(--bds-color_blue--strong)), var(--bds-color_accent-3--strong, var(--bds-color_blue--strong))));
@@ -3478,7 +3482,7 @@
3478
3482
  }
3479
3483
  }
3480
3484
  @media (forced-colors: active) {
3481
- .bds2160SectionHeader-sectionHeader.bds2160SectionHeader---gradient .bds2160SectionHeader-title {
3485
+ .bds2170SectionHeader-sectionHeader.bds2170SectionHeader---gradient .bds2170SectionHeader-title {
3482
3486
  background-image: none;
3483
3487
  color: CanvasText;
3484
3488
  }
@@ -3486,8 +3490,8 @@
3486
3490
  }
3487
3491
 
3488
3492
  /* src/components/layout/IconWrapper/IconWrapper.module.css */
3489
- @layer boostdev.bds2160IconWrapper-component {
3490
- .bds2160IconWrapper-wrapper {
3493
+ @layer boostdev.bds2170IconWrapper-component {
3494
+ .bds2170IconWrapper-wrapper {
3491
3495
  inline-size: 2em;
3492
3496
  block-size: 2em;
3493
3497
  font-size: var(--icon-wrapper_size, 3em);
@@ -3503,7 +3507,7 @@
3503
3507
  position: relative;
3504
3508
  transition: var(--bds-animation_transition);
3505
3509
  }
3506
- .bds2160IconWrapper-wrapper svg {
3510
+ .bds2170IconWrapper-wrapper svg {
3507
3511
  fill: currentcolor;
3508
3512
  }
3509
3513
  }