@boostdev/design-system-components 2.16.0 → 2.18.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 (97) hide show
  1. package/AGENTS.md +5 -2
  2. package/dist/client.cjs +57 -57
  3. package/dist/client.css +641 -631
  4. package/dist/client.js +57 -57
  5. package/dist/index.cjs +57 -57
  6. package/dist/index.css +641 -631
  7. package/dist/index.js +57 -57
  8. package/dist/web-components/{chunk-XI2U6U26.js → chunk-2FNCV46J.js} +4 -5
  9. package/dist/web-components/{chunk-SYNLFKD3.js → chunk-3LQKFSMR.js} +6 -0
  10. package/dist/web-components/{chunk-RZH5IVB5.js → chunk-5ATTKUCP.js} +2 -2
  11. package/dist/web-components/{chunk-XJU7KITO.js → chunk-5QA7JOC3.js} +4 -5
  12. package/dist/web-components/{chunk-EYCW7TKB.js → chunk-7GEAT2TY.js} +4 -5
  13. package/dist/web-components/chunk-FYTISJN3.js +18 -0
  14. package/dist/web-components/{chunk-LHFUXZ52.js → chunk-ISV56UWR.js} +4 -8
  15. package/dist/web-components/{chunk-YLDQOESI.js → chunk-K3VK6VEL.js} +6 -5
  16. package/dist/web-components/{chunk-GQNQBEYR.js → chunk-QZMFNJSN.js} +4 -5
  17. package/dist/web-components/{chunk-BPYKZVDK.js → chunk-SJLMW2VR.js} +2 -2
  18. package/dist/web-components/{chunk-GPJWLAKU.js → chunk-VGPJ5L6N.js} +6 -5
  19. package/dist/web-components/{chunk-AGI6YQRC.js → chunk-WOFGYU6E.js} +4 -5
  20. package/dist/web-components/{chunk-2MJTO2IW.js → chunk-WWWJCSXN.js} +2 -2
  21. package/dist/web-components/index.js +13 -12
  22. package/dist/web-components/interaction/form/bds-checkbox-group.js +1 -1
  23. package/dist/web-components/interaction/form/bds-combobox.js +2 -1
  24. package/dist/web-components/interaction/form/bds-form-input.js +2 -1
  25. package/dist/web-components/interaction/form/bds-number-input.js +2 -1
  26. package/dist/web-components/interaction/form/bds-radio-group.js +1 -1
  27. package/dist/web-components/interaction/form/bds-select.js +2 -1
  28. package/dist/web-components/interaction/form/bds-slider.js +2 -1
  29. package/dist/web-components/interaction/form/bds-textarea.js +2 -1
  30. package/dist/web-components/ui/bds-alert.js +1 -1
  31. package/dist/web-components/ui/bds-badge.js +1 -1
  32. package/dist/web-components/ui/bds-notification-banner.js +1 -1
  33. package/dist/web-components/ui/bds-rating.js +1 -1
  34. package/package.json +1 -1
  35. package/src/components/interaction/Rating/Rating.mdx +4 -1
  36. package/src/components/interaction/Rating/Rating.module.css +9 -0
  37. package/src/components/interaction/Rating/Rating.spec.tsx +9 -0
  38. package/src/components/interaction/form/Checkbox/Checkbox.tsx +1 -1
  39. package/src/components/interaction/form/CheckboxGroup/CheckboxGroup.mdx +1 -1
  40. package/src/components/interaction/form/CheckboxGroup/CheckboxGroup.spec.tsx +5 -0
  41. package/src/components/interaction/form/Combobox/Combobox.mdx +2 -0
  42. package/src/components/interaction/form/FormInput/FormInput.mdx +4 -0
  43. package/src/components/interaction/form/NumberInput/NumberInput.mdx +2 -0
  44. package/src/components/interaction/form/Radio/Radio.tsx +1 -1
  45. package/src/components/interaction/form/RadioGroup/RadioGroup.mdx +1 -1
  46. package/src/components/interaction/form/RadioGroup/RadioGroup.spec.tsx +5 -0
  47. package/src/components/interaction/form/Select/Select.mdx +2 -0
  48. package/src/components/interaction/form/Slider/Slider.mdx +2 -0
  49. package/src/components/interaction/form/Switch/Switch.tsx +1 -1
  50. package/src/components/interaction/form/Textarea/Textarea.mdx +2 -0
  51. package/src/components/interaction/form/atoms/Label.module.css +10 -0
  52. package/src/components/interaction/form/atoms/Label.spec.tsx +48 -0
  53. package/src/components/interaction/form/atoms/Label.stories.tsx +3 -0
  54. package/src/components/interaction/form/atoms/Label.tsx +4 -2
  55. package/src/components/ui/Alert/Alert.mdx +1 -1
  56. package/src/components/ui/Alert/Alert.module.css +2 -2
  57. package/src/components/ui/Alert/Alert.spec.tsx +6 -0
  58. package/src/components/ui/Badge/Badge.mdx +1 -1
  59. package/src/components/ui/Badge/Badge.module.css +2 -2
  60. package/src/components/ui/Badge/Badge.spec.tsx +8 -0
  61. package/src/components/ui/NotificationBanner/NotificationBanner.mdx +13 -1
  62. package/src/components/ui/NotificationBanner/NotificationBanner.module.css +2 -2
  63. package/src/components/ui/NotificationBanner/NotificationBanner.spec.tsx +6 -0
  64. package/src/test/token-contract.spec.ts +1 -0
  65. package/src/web-components/interaction/form/BdsCheckboxGroup.mdx +14 -0
  66. package/src/web-components/interaction/form/BdsCombobox.mdx +4 -0
  67. package/src/web-components/interaction/form/BdsFormInput.mdx +4 -0
  68. package/src/web-components/interaction/form/BdsNumberInput.mdx +4 -0
  69. package/src/web-components/interaction/form/BdsRadioGroup.mdx +11 -1
  70. package/src/web-components/interaction/form/BdsSelect.mdx +4 -0
  71. package/src/web-components/interaction/form/BdsSlider.mdx +4 -0
  72. package/src/web-components/interaction/form/BdsTextarea.mdx +4 -0
  73. package/src/web-components/interaction/form/bds-checkbox-group.spec.ts +11 -1
  74. package/src/web-components/interaction/form/bds-checkbox-group.ts +6 -5
  75. package/src/web-components/interaction/form/bds-combobox.ts +2 -5
  76. package/src/web-components/interaction/form/bds-form-input.ts +2 -5
  77. package/src/web-components/interaction/form/bds-number-input.ts +2 -5
  78. package/src/web-components/interaction/form/bds-radio-group.spec.ts +11 -1
  79. package/src/web-components/interaction/form/bds-radio-group.ts +6 -5
  80. package/src/web-components/interaction/form/bds-select.ts +2 -5
  81. package/src/web-components/interaction/form/bds-slider.ts +2 -8
  82. package/src/web-components/interaction/form/bds-textarea.ts +2 -5
  83. package/src/web-components/interaction/form/field-label.spec.ts +42 -0
  84. package/src/web-components/interaction/form/field-label.ts +20 -0
  85. package/src/web-components/test/helpers.ts +20 -0
  86. package/src/web-components/ui/BdsAlert.mdx +1 -0
  87. package/src/web-components/ui/BdsBadge.mdx +1 -0
  88. package/src/web-components/ui/BdsNotificationBanner.mdx +1 -1
  89. package/src/web-components/ui/BdsRating.mdx +4 -1
  90. package/src/web-components/ui/bds-alert.spec.ts +7 -0
  91. package/src/web-components/ui/bds-alert.ts +2 -2
  92. package/src/web-components/ui/bds-badge.spec.ts +6 -0
  93. package/src/web-components/ui/bds-badge.ts +2 -2
  94. package/src/web-components/ui/bds-notification-banner.spec.ts +7 -0
  95. package/src/web-components/ui/bds-notification-banner.ts +2 -2
  96. package/src/web-components/ui/bds-rating.spec.ts +7 -0
  97. package/src/web-components/ui/bds-rating.ts +6 -0
package/dist/index.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.bds2180Accordion-component {
32
+ .bds2180Accordion-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
+ .bds2180Accordion-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
+ .bds2180Accordion-item:last-child {
46
46
  border-block-end: none;
47
47
  }
48
- .bds2160Accordion-heading {
48
+ .bds2180Accordion-heading {
49
49
  margin: 0;
50
50
  }
51
- .bds2160Accordion-trigger {
51
+ .bds2180Accordion-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
+ .bds2180Accordion-trigger:disabled {
67
67
  opacity: 0.4;
68
68
  cursor: not-allowed;
69
69
  }
70
- .bds2160Accordion-trigger:focus-visible {
70
+ .bds2180Accordion-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
+ .bds2180Accordion-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
+ .bds2180Accordion-triggerLabel {
81
81
  flex: 1;
82
82
  text-align: start;
83
83
  }
84
- .bds2160Accordion-chevron {
84
+ .bds2180Accordion-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
+ .bds2180Accordion-item.bds2180Accordion---open .bds2180Accordion-chevron {
91
91
  transform: rotate(180deg);
92
92
  }
93
- .bds2160Accordion-panel {
93
+ .bds2180Accordion-panel {
94
94
  overflow: hidden;
95
95
  }
96
- .bds2160Accordion-panelContent {
96
+ .bds2180Accordion-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
+ .bds2180Accordion-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.bds2180Alert-component {
111
+ .bds2180Alert-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
+ .bds2180Alert---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
+ .bds2180Alert---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
+ .bds2180Alert---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
+ .bds2180Alert---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
+ .bds2180Alert---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
+ .bds2180Alert---appearance_gradient.bds2180Alert---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
+ .bds2180Alert---appearance_gradient.bds2180Alert---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
+ .bds2180Alert---appearance_gradient.bds2180Alert---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
+ .bds2180Alert---appearance_gradient.bds2180Alert---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
+ .bds2180Alert-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
+ .bds2180Alert-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
+ .bds2180Alert-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
+ .bds2180Alert-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
+ .bds2180Alert-dismiss svg {
194
194
  inline-size: 1rem;
195
195
  block-size: 1rem;
196
196
  }
197
- .bds2160Alert-dismiss:focus-visible {
197
+ .bds2180Alert-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
+ .bds2180Alert-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.bds2180Avatar-component {
210
+ .bds2180Avatar-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
+ .bds2180Avatar-avatar.bds2180Avatar---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
+ .bds2180Avatar-avatar.bds2180Avatar---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
+ .bds2180Avatar-avatar.bds2180Avatar---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
+ .bds2180Avatar-avatar.bds2180Avatar---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
+ .bds2180Avatar-avatar.bds2180Avatar---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
+ .bds2180Avatar-avatar.bds2180Avatar---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
+ .bds2180Avatar-avatar.bds2180Avatar---size_small {
246
246
  --avatar_size--variant: 2em;
247
247
  }
248
- .bds2160Avatar-avatar.bds2160Avatar---size_medium {
248
+ .bds2180Avatar-avatar.bds2180Avatar---size_medium {
249
249
  --avatar_size--variant: 3em;
250
250
  }
251
- .bds2160Avatar-avatar.bds2160Avatar---size_large {
251
+ .bds2180Avatar-avatar.bds2180Avatar---size_large {
252
252
  --avatar_size--variant: 4.5em;
253
253
  }
254
- .bds2160Avatar-image {
254
+ .bds2180Avatar-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
+ .bds2180Avatar-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
+ .bds2180Avatar-avatar.bds2180Avatar---size_small .bds2180Avatar-initials {
266
266
  font-size: var(--bds-font_size--body--s);
267
267
  }
268
- .bds2160Avatar-avatar.bds2160Avatar---size_large .bds2160Avatar-initials {
268
+ .bds2180Avatar-avatar.bds2180Avatar---size_large .bds2180Avatar-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.bds2180Badge-component {
275
+ .bds2180Badge-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
+ .bds2180Badge---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
+ .bds2180Badge---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
+ .bds2180Badge---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
+ .bds2180Badge---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
+ .bds2180Badge---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.bds2180Breadcrumb-component {
312
+ .bds2180Breadcrumb-breadcrumb {
313
313
  font-size: var(--bds-font_size--body--s);
314
314
  }
315
- .bds2160Breadcrumb-list {
315
+ .bds2180Breadcrumb-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
+ .bds2180Breadcrumb-item {
325
325
  display: flex;
326
326
  align-items: center;
327
327
  gap: var(--bds-space_xxs);
328
328
  }
329
- .bds2160Breadcrumb-link {
329
+ .bds2180Breadcrumb-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
+ .bds2180Breadcrumb-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
+ .bds2180Breadcrumb-link:hover {
341
341
  text-decoration: underline;
342
342
  text-underline-offset: 0.2em;
343
343
  }
344
344
  }
345
- .bds2160Breadcrumb-separator {
345
+ .bds2180Breadcrumb-separator {
346
346
  color: var(--bds-color_on-bg--subtle);
347
347
  user-select: none;
348
348
  }
349
- .bds2160Breadcrumb-text {
349
+ .bds2180Breadcrumb-text {
350
350
  color: var(--bds-color_on-bg--subtle);
351
351
  }
352
- .bds2160Breadcrumb-current {
352
+ .bds2180Breadcrumb-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.bds2180Collapsible-component {
360
+ .bds2180Collapsible-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
+ .bds2180Collapsible-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
+ .bds2180Collapsible-summary::-webkit-details-marker {
384
384
  display: none;
385
385
  }
386
- .bds2160Collapsible-summary:focus-visible {
386
+ .bds2180Collapsible-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
+ .bds2180Collapsible-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
+ .bds2180Collapsible-collapsible[open] > .bds2180Collapsible-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
+ .bds2180Collapsible-summaryContent {
399
399
  flex: 1;
400
400
  }
401
- .bds2160Collapsible-icon {
401
+ .bds2180Collapsible-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
+ .bds2180Collapsible-collapsible[open] > .bds2180Collapsible-summary .bds2180Collapsible-icon {
411
411
  transform: rotate(-135deg);
412
412
  }
413
- .bds2160Collapsible-content {
413
+ .bds2180Collapsible-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
+ .bds2180Collapsible-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.bds2180Calendar-component {
428
+ .bds2180Calendar-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
+ .bds2180Calendar-months {
441
441
  display: flex;
442
442
  flex-wrap: wrap;
443
443
  gap: var(--bds-space_l);
444
444
  }
445
- .bds2160Calendar-month {
445
+ .bds2180Calendar-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
+ .bds2180Calendar-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
+ .bds2180Calendar-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
+ .bds2180Calendar-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
+ .bds2180Calendar-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
+ .bds2180Calendar-navBtn svg {
482
482
  inline-size: 1rem;
483
483
  block-size: 1rem;
484
484
  }
485
- .bds2160Calendar-navBtn:focus-visible {
485
+ .bds2180Calendar-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
+ .bds2180Calendar-navBtn:hover {
491
491
  background-color: var(--calendar_navBtn-bg--hover, var(--bds-color_bg--subtle));
492
492
  }
493
493
  }
494
- .bds2160Calendar-grid {
494
+ .bds2180Calendar-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
+ .bds2180Calendar-row {
500
500
  display: contents;
501
501
  }
502
- .bds2160Calendar-weekday {
502
+ .bds2180Calendar-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
+ .bds2180Calendar-cell {
513
513
  display: flex;
514
514
  aspect-ratio: 1;
515
515
  }
516
- .bds2160Calendar-day {
516
+ .bds2180Calendar-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
+ .bds2180Calendar-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
+ .bds2180Calendar-day:not(.bds2180Calendar-disabled, .bds2180Calendar-selected, .bds2180Calendar-rangeStart, .bds2180Calendar-rangeEnd):hover {
536
536
  background-color: var(--calendar_day-bg--hover, var(--bds-color_bg--subtle));
537
537
  }
538
538
  }
539
- .bds2160Calendar-outside {
539
+ .bds2180Calendar-outside {
540
540
  color: var(--bds-color_on-bg--subtle);
541
541
  opacity: 0.4;
542
542
  }
543
- .bds2160Calendar-today {
543
+ .bds2180Calendar-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
+ .bds2180Calendar-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
+ .bds2180Calendar-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
+ .bds2180Calendar-rangeStart,
559
+ .bds2180Calendar-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
+ .bds2180Calendar-disabled {
565
565
  opacity: 0.35;
566
566
  cursor: not-allowed;
567
567
  }
568
568
  @media (prefers-reduced-motion: reduce) {
569
- .bds2160Calendar-day {
569
+ .bds2180Calendar-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.bds2180Carousel-component {
577
+ .bds2180Carousel-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
+ .bds2180Carousel-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
+ .bds2180Carousel-track::-webkit-scrollbar {
593
593
  display: none;
594
594
  }
595
- .bds2160Carousel-slide {
595
+ .bds2180Carousel-slide {
596
596
  scroll-snap-align: start;
597
597
  flex-shrink: 0;
598
598
  }
599
- .bds2160Carousel-navBtn {
599
+ .bds2180Carousel-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
+ .bds2180Carousel-navBtn svg {
617
617
  inline-size: 1.25rem;
618
618
  block-size: 1.25rem;
619
619
  }
620
- .bds2160Carousel-navBtn:focus-visible {
620
+ .bds2180Carousel-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
+ .bds2180Carousel-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
+ .bds2180Carousel-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.bds2180DescriptionList-component {
638
+ .bds2180DescriptionList-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
+ .bds2180DescriptionList-group {
648
648
  display: flex;
649
649
  flex-direction: column;
650
650
  gap: var(--bds-space_xxs);
651
651
  }
652
- .bds2160DescriptionList-term {
652
+ .bds2180DescriptionList-term {
653
653
  font-weight: var(--bds-font_weight--semibold);
654
654
  color: var(--bds-color_on-bg);
655
655
  }
656
- .bds2160DescriptionList-details {
656
+ .bds2180DescriptionList-details {
657
657
  margin: 0;
658
658
  color: var(--bds-color_on-bg);
659
659
  }
660
- .bds2160DescriptionList---layout_inline .bds2160DescriptionList-group {
660
+ .bds2180DescriptionList---layout_inline .bds2180DescriptionList-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
+ .bds2180DescriptionList---layout_inline .bds2180DescriptionList-term {
667
667
  grid-column: 1;
668
668
  }
669
- .bds2160DescriptionList---layout_inline .bds2160DescriptionList-details {
669
+ .bds2180DescriptionList---layout_inline .bds2180DescriptionList-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.bds2180Link-component {
676
+ .bds2180Link-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
+ .bds2180Link-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
+ .bds2180Link-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
+ .bds2180Link---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
+ .bds2180Link---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
+ .bds2180Link---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
+ .bds2180Link---variant_standalone:hover {
712
712
  text-decoration: underline;
713
713
  text-underline-offset: 0.2em;
714
714
  }
715
715
  }
716
- .bds2160Link-externalLabel {
716
+ .bds2180Link-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.bds2180Loading-component {
731
+ .bds2180Loading-loading {
732
732
  display: flex;
733
733
  justify-content: center;
734
734
  align-items: center;
735
735
  }
736
- .bds2160Loading-spinner {
736
+ .bds2180Loading-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
+ .bds2180Loading---size_small .bds2180Loading-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
+ .bds2180Loading---size_large .bds2180Loading-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
+ .bds2180Loading-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.bds2180NotificationBanner-component {
771
+ .bds2180NotificationBanner-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
+ .bds2180NotificationBanner---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
+ .bds2180NotificationBanner---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
+ .bds2180NotificationBanner---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
+ .bds2180NotificationBanner---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
+ .bds2180NotificationBanner---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
+ .bds2180NotificationBanner---appearance_gradient.bds2180NotificationBanner---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
+ .bds2180NotificationBanner---appearance_gradient.bds2180NotificationBanner---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
+ .bds2180NotificationBanner---appearance_gradient.bds2180NotificationBanner---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
+ .bds2180NotificationBanner---appearance_gradient.bds2180NotificationBanner---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
+ .bds2180NotificationBanner-icon {
820
820
  display: flex;
821
821
  align-items: center;
822
822
  flex-shrink: 0;
823
823
  }
824
- .bds2160NotificationBanner-content {
824
+ .bds2180NotificationBanner-content {
825
825
  flex: 1;
826
826
  }
827
- .bds2160NotificationBanner-action {
827
+ .bds2180NotificationBanner-action {
828
828
  flex-shrink: 0;
829
829
  }
830
- .bds2160NotificationBanner-dismiss {
830
+ .bds2180NotificationBanner-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
+ .bds2180NotificationBanner-dismiss svg {
847
847
  inline-size: 1rem;
848
848
  block-size: 1rem;
849
849
  }
850
- .bds2160NotificationBanner-dismiss:focus-visible {
850
+ .bds2180NotificationBanner-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
+ .bds2180NotificationBanner-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.bds2180Pagination-component {
863
+ .bds2180Pagination-pagination {
864
864
  display: flex;
865
865
  justify-content: center;
866
866
  }
867
- .bds2160Pagination-list {
867
+ .bds2180Pagination-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
+ .bds2180Pagination-list li {
876
876
  list-style: none;
877
877
  }
878
- .bds2160Pagination-button {
878
+ .bds2180Pagination-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
+ .bds2180Pagination-button:disabled {
900
900
  opacity: 0.4;
901
901
  cursor: not-allowed;
902
902
  }
903
- .bds2160Pagination-button:focus-visible {
903
+ .bds2180Pagination-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
+ .bds2180Pagination-button:not(:disabled, .bds2180Pagination---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
+ .bds2180Pagination-button.bds2180Pagination---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
+ .bds2180Pagination-button.bds2180Pagination---nav svg {
919
919
  inline-size: 1rem;
920
920
  block-size: 1rem;
921
921
  }
922
- .bds2160Pagination-ellipsis {
922
+ .bds2180Pagination-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.bds2180Progress-component {
936
+ .bds2180Progress-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
+ .bds2180Progress-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
+ .bds2180Progress-value {
950
950
  font-variant-numeric: tabular-nums;
951
951
  }
952
- .bds2160Progress-track {
952
+ .bds2180Progress-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
+ .bds2180Progress-track.bds2180Progress---size_small {
960
960
  --progress_height: var(--bds-space_xxs);
961
961
  }
962
- .bds2160Progress-track.bds2160Progress---size_medium {
962
+ .bds2180Progress-track.bds2180Progress---size_medium {
963
963
  --progress_height: var(--bds-space_xs);
964
964
  }
965
- .bds2160Progress-track.bds2160Progress---size_large {
965
+ .bds2180Progress-track.bds2180Progress---size_large {
966
966
  --progress_height: var(--bds-space_s);
967
967
  }
968
- .bds2160Progress-fill {
968
+ .bds2180Progress-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
+ .bds2180Progress-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.bds2180ProgressCircle-component {
983
+ .bds2180ProgressCircle-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
+ .bds2180ProgressCircle-svg {
990
990
  display: block;
991
991
  }
992
- .bds2160ProgressCircle-track {
992
+ .bds2180ProgressCircle-track {
993
993
  stroke: var(--progressCircle_color-track, var(--bds-color_bg--subtle));
994
994
  }
995
- .bds2160ProgressCircle-fill {
995
+ .bds2180ProgressCircle-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
+ .bds2180ProgressCircle-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
+ .bds2180ProgressCircle---size_small .bds2180ProgressCircle-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
+ .bds2180ProgressCircle---size_medium .bds2180ProgressCircle-value {
1011
1011
  font-size: var(--bds-font_size--body--s);
1012
1012
  }
1013
- .bds2160ProgressCircle---size_large .bds2160ProgressCircle-value {
1013
+ .bds2180ProgressCircle---size_large .bds2180ProgressCircle-value {
1014
1014
  font-size: var(--bds-font_size--body);
1015
1015
  }
1016
1016
  @media (prefers-reduced-motion: reduce) {
1017
- .bds2160ProgressCircle-fill {
1017
+ .bds2180ProgressCircle-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.bds2180Separator-component {
1025
+ .bds2180Separator-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
+ .bds2180Separator-separator.bds2180Separator---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
+ .bds2180Separator-separator.bds2180Separator---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.bds2180Skeleton-component {
1050
+ .bds2180Skeleton-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
+ .bds2180Skeleton-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.bds2180SkipLink-component {
1080
+ .bds2180SkipLink-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
+ .bds2180SkipLink-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
+ .bds2180SkipLink-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.bds2180Table-component {
1112
+ .bds2180Table-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
+ .bds2180Table-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
+ .bds2180Table-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
+ .bds2180Table-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
+ .bds2180Table-thead {
1139
1139
  background-color: var(--table_header-bg, var(--bds-color_bg--subtle));
1140
1140
  }
1141
- .bds2160Table-th {
1141
+ .bds2180Table-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
+ .bds2180Table-th.bds2180Table---sortable {
1151
1151
  padding: 0;
1152
1152
  }
1153
- .bds2160Table-sortButton {
1153
+ .bds2180Table-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
+ .bds2180Table-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
+ .bds2180Table-sortButton:hover {
1173
1173
  color: var(--table_sortBtn-color--hover, var(--bds-color_on-bg));
1174
1174
  }
1175
1175
  }
1176
- .bds2160Table-sortIcon {
1176
+ .bds2180Table-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
+ .bds2180Table-sortIcon.bds2180Table---sort-active {
1183
1183
  opacity: 1;
1184
1184
  color: var(--bds-color_interactive);
1185
1185
  }
1186
- .bds2160Table-sortIcon.bds2160Table---sort-desc {
1186
+ .bds2180Table-sortIcon.bds2180Table---sort-desc {
1187
1187
  transform: rotate(180deg);
1188
1188
  }
1189
- .bds2160Table-tbody .bds2160Table-tr {
1189
+ .bds2180Table-tbody .bds2180Table-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
+ .bds2180Table-tbody .bds2180Table-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
+ .bds2180Table-tbody .bds2180Table-tr:hover {
1198
1198
  background-color: var(--table_row-bg--hover, var(--bds-color_bg--subtle));
1199
1199
  }
1200
1200
  }
1201
- .bds2160Table-td {
1201
+ .bds2180Table-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
+ .bds2180Table-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.bds2180Tabs-component {
1215
+ .bds2180Tabs-tabs {
1216
1216
  display: flex;
1217
1217
  flex-direction: column;
1218
1218
  }
1219
- .bds2160Tabs-tabList {
1219
+ .bds2180Tabs-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
+ .bds2180Tabs-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
+ .bds2180Tabs-label {
1239
1239
  display: inline-grid;
1240
1240
  }
1241
- .bds2160Tabs-label::after {
1241
+ .bds2180Tabs-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
+ .bds2180Tabs-tab.bds2180Tabs---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
+ .bds2180Tabs-tab:disabled {
1256
1256
  opacity: 0.4;
1257
1257
  cursor: not-allowed;
1258
1258
  }
1259
- .bds2160Tabs-tab:focus-visible {
1259
+ .bds2180Tabs-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
+ .bds2180Tabs-tab:not(:disabled, .bds2180Tabs---active):hover {
1266
1266
  --tab_color--state: var(--tab_color--hover, var(--bds-color_on-bg));
1267
1267
  }
1268
1268
  }
1269
- .bds2160Tabs-panel {
1269
+ .bds2180Tabs-panel {
1270
1270
  padding-block-start: var(--tabs_panel-padding, var(--bds-space_m));
1271
1271
  }
1272
- .bds2160Tabs-panel:focus-visible {
1272
+ .bds2180Tabs-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.bds2180Tooltip-component {
1280
+ .bds2180Tooltip-wrapper {
1281
1281
  position: relative;
1282
1282
  display: inline-flex;
1283
1283
  align-items: center;
1284
1284
  }
1285
- .bds2160Tooltip-tooltip {
1285
+ .bds2180Tooltip-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] .bds2180Tooltip-tooltip,
1305
+ .bds2180Tooltip-tooltip[dir=rtl] {
1306
1306
  --tooltip_dir: -1;
1307
1307
  }
1308
- .bds2160Tooltip---visible {
1308
+ .bds2180Tooltip---visible {
1309
1309
  visibility: visible;
1310
1310
  opacity: 1;
1311
1311
  pointer-events: auto;
1312
1312
  }
1313
- .bds2160Tooltip---placement_top {
1313
+ .bds2180Tooltip---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
+ .bds2180Tooltip---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
+ .bds2180Tooltip---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
+ .bds2180Tooltip---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
+ .bds2180Tooltip-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.bds2180Typography-component {
1342
+ .bds2180Typography-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
+ .bds2180Typography---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
+ .bds2180Typography---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
+ .bds2180Typography---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
+ .bds2180Typography---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
+ .bds2180Typography---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.bds2180Button-component {
1401
+ .bds2180Button-button,
1402
+ .bds2180Button-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
+ .bds2180Button-button.bds2180Button---default {
1426
1426
  }
1427
- .bds2160Button-button.bds2160Button---outline,
1428
- .bds2160Button-button.bds2160Button---ghost {
1427
+ .bds2180Button-button.bds2180Button---outline,
1428
+ .bds2180Button-button.bds2180Button---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
+ .bds2180Button-button.bds2180Button---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
+ .bds2180Button-button.bds2180Button---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
+ .bds2180Button-button.bds2180Button---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
+ .bds2180Button-button.bds2180Button---hasPulse {
1447
1447
  animation: pulse 3s infinite;
1448
1448
  }
1449
- .bds2160Button-button.bds2160Button---iconOnly {
1449
+ .bds2180Button-button.bds2180Button---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
+ .bds2180Button-button.bds2180Button---iconOnly > * {
1455
1455
  inline-size: 100%;
1456
1456
  block-size: 100%;
1457
1457
  }
1458
- .bds2160Button-button[href] {
1458
+ .bds2180Button-button[href] {
1459
1459
  text-decoration: none;
1460
1460
  }
1461
- .bds2160Button-button svg {
1461
+ .bds2180Button-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
+ .bds2180Button-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
+ .bds2180Button-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
+ .bds2180Button-button.bds2180Button---iconOnly .bds2180Button-iconStart,
1480
+ .bds2180Button-button.bds2180Button---iconOnly .bds2180Button-iconEnd {
1481
1481
  margin-inline: 0;
1482
1482
  }
1483
1483
  @media (hover: hover) and (pointer: fine) {
1484
- .bds2160Button-button:hover .bds2160Button-iconStart svg {
1484
+ .bds2180Button-button:hover .bds2180Button-iconStart svg {
1485
1485
  animation: fadeZoom 2s ease-out infinite;
1486
1486
  }
1487
- .bds2160Button-button:hover .bds2160Button-iconEnd svg {
1487
+ .bds2180Button-button:hover .bds2180Button-iconEnd svg {
1488
1488
  animation: fadeZoom 2s ease-out infinite;
1489
1489
  }
1490
1490
  }
1491
- .bds2160Button-button:focus-visible {
1491
+ .bds2180Button-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
+ .bds2180Button-button.bds2180Button---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
+ .bds2180Button-button.bds2180Button---outline:hover,
1505
+ .bds2180Button-button.bds2180Button---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
+ .bds2180Button-button.bds2180Button---hasPulse,
1513
+ .bds2180Button-button:hover .bds2180Button-iconStart svg,
1514
+ .bds2180Button-button:hover .bds2180Button-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.bds2180Command-component {
1522
+ .bds2180Command-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
+ .bds2180Command-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
+ .bds2180Command-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
+ .bds2180Command-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
+ .bds2180Command-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
+ .bds2180Command-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
+ .bds2180Command-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
+ .bds2180Command-search::placeholder {
1577
1577
  color: var(--bds-color_on-bg);
1578
1578
  }
1579
- .bds2160Command-escHint {
1579
+ .bds2180Command-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
+ .bds2180Command-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
+ .bds2180Command-groupList {
1596
1596
  list-style: none;
1597
1597
  margin: 0;
1598
1598
  padding: 0;
1599
1599
  }
1600
- .bds2160Command-group {
1600
+ .bds2180Command-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
+ .bds2180Command-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
+ .bds2180Command-itemActive {
1617
1617
  background-color: var(--command_item-bg--active, var(--bds-color_bg--subtle));
1618
1618
  }
1619
- .bds2160Command-itemLabel {
1619
+ .bds2180Command-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
+ .bds2180Command-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
+ .bds2180Command-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
+ .bds2180Command-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
+ .bds2180Command-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.bds2180Dialog-component {
1656
+ .bds2180Dialog-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
+ .bds2180Dialog-dialog:not([open]) {
1673
1673
  display: none;
1674
1674
  }
1675
- .bds2160Dialog-dialogContent {
1675
+ .bds2180Dialog-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
+ .bds2180Dialog-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
+ .bds2180Dialog-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
+ .bds2180Dialog-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
+ .bds2180Dialog-closeButton svg {
1711
1711
  inline-size: 1.25em;
1712
1712
  block-size: 1.25em;
1713
1713
  }
1714
- .bds2160Dialog-dialog::backdrop {
1714
+ .bds2180Dialog-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.bds2180Drawer-component {
1722
+ .bds2180Drawer-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
+ .bds2180Drawer-drawer:not([open]) {
1746
1746
  display: none;
1747
1747
  }
1748
- .bds2160Drawer-drawer:dir(rtl) {
1748
+ .bds2180Drawer-drawer:dir(rtl) {
1749
1749
  translate: -100% 0;
1750
1750
  }
1751
- .bds2160Drawer---side_left.bds2160Drawer-drawer {
1751
+ .bds2180Drawer---side_left.bds2180Drawer-drawer {
1752
1752
  inset-inline: 0 auto;
1753
1753
  translate: -100% 0;
1754
1754
  }
1755
- .bds2160Drawer---side_left.bds2160Drawer-drawer:dir(rtl) {
1755
+ .bds2180Drawer---side_left.bds2180Drawer-drawer:dir(rtl) {
1756
1756
  translate: 100% 0;
1757
1757
  }
1758
- .bds2160Drawer-drawer[open] {
1758
+ .bds2180Drawer-drawer[open] {
1759
1759
  translate: 0 0;
1760
1760
  }
1761
1761
  @starting-style {
1762
- .bds2160Drawer-drawer[open] {
1762
+ .bds2180Drawer-drawer[open] {
1763
1763
  translate: 100% 0;
1764
1764
  }
1765
- .bds2160Drawer-drawer[open]:dir(rtl) {
1765
+ .bds2180Drawer-drawer[open]:dir(rtl) {
1766
1766
  translate: -100% 0;
1767
1767
  }
1768
- .bds2160Drawer---side_left.bds2160Drawer-drawer[open] {
1768
+ .bds2180Drawer---side_left.bds2180Drawer-drawer[open] {
1769
1769
  translate: -100% 0;
1770
1770
  }
1771
- .bds2160Drawer---side_left.bds2160Drawer-drawer[open]:dir(rtl) {
1771
+ .bds2180Drawer---side_left.bds2180Drawer-drawer[open]:dir(rtl) {
1772
1772
  translate: 100% 0;
1773
1773
  }
1774
1774
  }
1775
- .bds2160Drawer-drawer::backdrop {
1775
+ .bds2180Drawer-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
+ .bds2180Drawer-drawer[open]::backdrop {
1785
1785
  opacity: 1;
1786
1786
  }
1787
1787
  @starting-style {
1788
- .bds2160Drawer-drawer[open]::backdrop {
1788
+ .bds2180Drawer-drawer[open]::backdrop {
1789
1789
  opacity: 0;
1790
1790
  }
1791
1791
  }
1792
- .bds2160Drawer-header {
1792
+ .bds2180Drawer-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
+ .bds2180Drawer-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
+ .bds2180Drawer-closeButton svg {
1812
1812
  inline-size: 1.25rem;
1813
1813
  block-size: 1.25rem;
1814
1814
  }
1815
- .bds2160Drawer-closeButton:focus-visible {
1815
+ .bds2180Drawer-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
+ .bds2180Drawer-closeButton:hover {
1821
1821
  background-color: var(--drawer_close-bg--hover, var(--bds-color_bg--subtle));
1822
1822
  }
1823
1823
  }
1824
- .bds2160Drawer-body {
1824
+ .bds2180Drawer-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
+ .bds2180Drawer-drawer,
1833
+ .bds2180Drawer-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.bds2180DropdownMenu-component {
1841
+ .bds2180DropdownMenu-wrapper {
1842
1842
  position: relative;
1843
1843
  display: inline-flex;
1844
1844
  }
1845
- .bds2160DropdownMenu-menu {
1845
+ .bds2180DropdownMenu-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
+ .bds2180DropdownMenu-menu li {
1862
1862
  list-style: none;
1863
1863
  }
1864
- .bds2160DropdownMenu---placement_bottom-start {
1864
+ .bds2180DropdownMenu---placement_bottom-start {
1865
1865
  inset-inline-start: 0;
1866
1866
  }
1867
- .bds2160DropdownMenu---placement_bottom-end {
1867
+ .bds2180DropdownMenu---placement_bottom-end {
1868
1868
  inset-inline-end: 0;
1869
1869
  }
1870
- .bds2160DropdownMenu-separatorRow {
1870
+ .bds2180DropdownMenu-separatorRow {
1871
1871
  padding-block: var(--bds-space_xxs);
1872
1872
  }
1873
- .bds2160DropdownMenu-separator {
1873
+ .bds2180DropdownMenu-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
+ .bds2180DropdownMenu-group {
1879
1879
  margin: 0;
1880
1880
  padding: 0;
1881
1881
  list-style: none;
1882
1882
  }
1883
- .bds2160DropdownMenu-groupLabel {
1883
+ .bds2180DropdownMenu-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
+ .bds2180DropdownMenu-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
+ .bds2180DropdownMenu-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
+ .bds2180DropdownMenu-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
+ .bds2180DropdownMenu-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
+ .bds2180DropdownMenu---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
+ .bds2180DropdownMenu---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
+ .bds2180DropdownMenu-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
+ .bds2180DropdownMenu---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
+ .bds2180DropdownMenu-label {
1936
1936
  flex: 1;
1937
1937
  }
1938
- .bds2160DropdownMenu-shortcut {
1938
+ .bds2180DropdownMenu-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
+ .bds2180DropdownMenu-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.bds2180Popover-component {
1952
+ .bds2180Popover-wrapper {
1953
1953
  display: inline-flex;
1954
1954
  }
1955
- .bds2160Popover-panel {
1955
+ .bds2180Popover-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
+ .bds2180Popover-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
+ .bds2180Popover-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
+ .bds2180Popover-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
+ .bds2180Popover-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
+ .bds2180Popover-panel[data-placement=bottom],
2060
+ .bds2180Popover-panel[data-placement=top],
2061
+ .bds2180Popover-panel[data-placement=left],
2062
+ .bds2180Popover-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
+ .bds2180Popover-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
+ .bds2180Popover-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.bds2180Rating-component {
2087
+ .bds2180Rating-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
+ .bds2180Rating-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
+ .bds2180Rating---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.bds2180Toast-component {
2107
+ .bds2180Toast-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
+ .bds2180Toast-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
+ .bds2180Toast-toast:dir(rtl) {
2128
2132
  --toast_slide-offset: -100%;
2129
2133
  }
2130
- .bds2160Toast-toast.bds2160Toast---variant_success {
2134
+ .bds2180Toast-toast.bds2180Toast---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
+ .bds2180Toast-toast.bds2180Toast---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
+ .bds2180Toast-toast.bds2180Toast---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
+ .bds2180Toast-toast.bds2180Toast---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
+ .bds2180Toast-message {
2147
2151
  flex: 1;
2148
2152
  }
2149
- .bds2160Toast-closeButton {
2153
+ .bds2180Toast-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
+ .bds2180Toast-closeButton::after {
2164
2168
  content: "";
2165
2169
  position: absolute;
2166
2170
  inset: -0.75rem;
2167
2171
  }
2168
- .bds2160Toast-closeButton:focus-visible {
2172
+ .bds2180Toast-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
+ .bds2180Toast-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
+ .bds2180Toast-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.bds2180Checkbox-component {
2199
+ .bds2180Checkbox-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
+ .bds2180Checkbox-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
+ .bds2180Checkbox-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
+ .bds2180Checkbox-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
+ .bds2180Checkbox-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
+ .bds2180Checkbox-checkbox:focus {
2238
2242
  --bdc_color: var(--bdc_color--focus);
2239
2243
  }
2240
- .bds2160Checkbox-checkbox:focus-visible {
2244
+ .bds2180Checkbox-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
+ .bds2180Checkbox-checkbox:disabled {
2245
2249
  opacity: 0.5;
2246
2250
  cursor: not-allowed;
2247
2251
  }
2248
- .bds2160Checkbox-checkboxError {
2252
+ .bds2180Checkbox-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.bds2180Message-component {
2260
+ .bds2180Message-error,
2261
+ .bds2180Message-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
+ .bds2180Message-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
+ .bds2180Message-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
+ .bds2180Message-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,19 +2281,25 @@
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.bds2180Label-component {
2285
+ .bds2180Label-label {
2282
2286
  display: flex;
2283
2287
  align-items: center;
2284
2288
  font-family: var(--bds-font_family--body);
2285
2289
  color: var(--bds-color_on-bg);
2286
2290
  cursor: pointer;
2287
2291
  }
2292
+ .bds2180Label---field {
2293
+ font-family: var(--formLabel_font-family, var(--bds-font_family--body));
2294
+ font-size: var(--formLabel_font-size, var(--bds-font_size--body--s));
2295
+ font-weight: var(--formLabel_font-weight, var(--bds-font_weight--semibold));
2296
+ color: var(--formLabel_color, var(--bds-color_on-bg));
2297
+ }
2288
2298
  }
2289
2299
 
2290
2300
  /* src/components/interaction/form/atoms/InputContainer.module.css */
2291
- @layer boostdev.bds2160InputContainer-component {
2292
- .bds2160InputContainer-container {
2301
+ @layer boostdev.bds2180InputContainer-component {
2302
+ .bds2180InputContainer-container {
2293
2303
  --labelPosition: calc(var(--inputSize) + var(--bds-space_m));
2294
2304
  display: flex;
2295
2305
  flex-direction: column;
@@ -2298,8 +2308,8 @@
2298
2308
  }
2299
2309
 
2300
2310
  /* src/components/interaction/form/CheckboxGroup/CheckboxGroup.module.css */
2301
- @layer boostdev.bds2160CheckboxGroup-component {
2302
- .bds2160CheckboxGroup-group {
2311
+ @layer boostdev.bds2180CheckboxGroup-component {
2312
+ .bds2180CheckboxGroup-group {
2303
2313
  border: none;
2304
2314
  padding: 0;
2305
2315
  margin: 0;
@@ -2307,7 +2317,7 @@
2307
2317
  flex-direction: column;
2308
2318
  gap: var(--checkboxGroup_gap, var(--bds-space_xs));
2309
2319
  }
2310
- .bds2160CheckboxGroup-legend {
2320
+ .bds2180CheckboxGroup-legend {
2311
2321
  font-family: var(--checkboxGroup_legend-font-family, var(--bds-font_family--body));
2312
2322
  font-size: var(--checkboxGroup_legend-font-size, var(--bds-font_size--body--s));
2313
2323
  font-weight: var(--checkboxGroup_legend-font-weight, var(--bds-font_weight--medium));
@@ -2315,10 +2325,10 @@
2315
2325
  padding: 0;
2316
2326
  margin-block-end: var(--checkboxGroup_legend-gap, var(--bds-space_xs));
2317
2327
  }
2318
- .bds2160CheckboxGroup-required {
2328
+ .bds2180CheckboxGroup-required {
2319
2329
  color: var(--checkboxGroup_required-color, var(--bds-color_error));
2320
2330
  }
2321
- .bds2160CheckboxGroup-requiredLabel {
2331
+ .bds2180CheckboxGroup-requiredLabel {
2322
2332
  position: absolute;
2323
2333
  inline-size: 1px;
2324
2334
  block-size: 1px;
@@ -2329,29 +2339,29 @@
2329
2339
  white-space: nowrap;
2330
2340
  border-width: 0;
2331
2341
  }
2332
- .bds2160CheckboxGroup-items {
2342
+ .bds2180CheckboxGroup-items {
2333
2343
  display: flex;
2334
2344
  flex-direction: column;
2335
2345
  gap: var(--checkboxGroup_items-gap, var(--bds-space_xs));
2336
2346
  }
2337
- .bds2160CheckboxGroup-groupError input {
2347
+ .bds2180CheckboxGroup-groupError input {
2338
2348
  --bdc_color: var(--bdc_color--error);
2339
2349
  --bdc-outline_width: var(--bdc-outline_width--error, 2px);
2340
2350
  }
2341
2351
  }
2342
2352
 
2343
2353
  /* src/components/interaction/form/Combobox/Combobox.module.css */
2344
- @layer boostdev.bds2160Combobox-component {
2345
- .bds2160Combobox-formGroup {
2354
+ @layer boostdev.bds2180Combobox-component {
2355
+ .bds2180Combobox-formGroup {
2346
2356
  display: flex;
2347
2357
  flex-direction: column;
2348
2358
  }
2349
- .bds2160Combobox-inputWrapper {
2359
+ .bds2180Combobox-inputWrapper {
2350
2360
  position: relative;
2351
2361
  display: flex;
2352
2362
  align-items: center;
2353
2363
  }
2354
- .bds2160Combobox-input {
2364
+ .bds2180Combobox-input {
2355
2365
  appearance: none;
2356
2366
  inline-size: 100%;
2357
2367
  font-family: var(--bds-font_family--body);
@@ -2367,22 +2377,22 @@
2367
2377
  color: var(--combobox_color, var(--bds-color_on-bg));
2368
2378
  transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing), background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
2369
2379
  }
2370
- .bds2160Combobox-input:focus {
2380
+ .bds2180Combobox-input:focus {
2371
2381
  --bdc_color: var(--bdc_color--focus);
2372
2382
  }
2373
- .bds2160Combobox-input:focus-visible {
2383
+ .bds2180Combobox-input:focus-visible {
2374
2384
  outline: var(--bds-outline_default);
2375
2385
  outline-offset: var(--bds-outline_offset);
2376
2386
  }
2377
- .bds2160Combobox-input:disabled {
2387
+ .bds2180Combobox-input:disabled {
2378
2388
  opacity: 0.5;
2379
2389
  cursor: not-allowed;
2380
2390
  }
2381
- .bds2160Combobox-inputError {
2391
+ .bds2180Combobox-inputError {
2382
2392
  --bdc_color: var(--bdc_color--error);
2383
2393
  --bdc-outline_width: var(--bdc-outline_width--error, 2px);
2384
2394
  }
2385
- .bds2160Combobox-chevron {
2395
+ .bds2180Combobox-chevron {
2386
2396
  position: absolute;
2387
2397
  inset-inline-end: var(--bds-space_s);
2388
2398
  display: flex;
@@ -2390,11 +2400,11 @@
2390
2400
  pointer-events: none;
2391
2401
  color: var(--combobox_color, var(--bds-color_on-bg));
2392
2402
  }
2393
- .bds2160Combobox-chevron svg {
2403
+ .bds2180Combobox-chevron svg {
2394
2404
  inline-size: 1rem;
2395
2405
  block-size: 1rem;
2396
2406
  }
2397
- .bds2160Combobox-listbox {
2407
+ .bds2180Combobox-listbox {
2398
2408
  position: absolute;
2399
2409
  inset-block-start: calc(100% + var(--bds-space_xxs));
2400
2410
  inset-inline: 0;
@@ -2412,7 +2422,7 @@
2412
2422
  color: var(--combobox_on-color, var(--bds-color_on-bg));
2413
2423
  box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--combobox_listbox-shadow, var(--bds-shadow_m));
2414
2424
  }
2415
- .bds2160Combobox-option {
2425
+ .bds2180Combobox-option {
2416
2426
  display: flex;
2417
2427
  align-items: center;
2418
2428
  padding: var(--combobox_option-padding-block, var(--bds-space_xs)) var(--combobox_option-padding-inline, var(--bds-space_m));
@@ -2421,29 +2431,29 @@
2421
2431
  cursor: pointer;
2422
2432
  transition: var(--bds-animation_transition);
2423
2433
  }
2424
- .bds2160Combobox-option.bds2160Combobox---highlighted {
2434
+ .bds2180Combobox-option.bds2180Combobox---highlighted {
2425
2435
  background-color: var(--combobox_option-bg--highlighted, var(--bds-color_bg--subtle));
2426
2436
  color: var(--combobox_option-color--highlighted, var(--bds-color_interactive_on-bg));
2427
2437
  }
2428
- .bds2160Combobox-option.bds2160Combobox---selected {
2438
+ .bds2180Combobox-option.bds2180Combobox---selected {
2429
2439
  font-weight: var(--bds-font_weight--semibold);
2430
2440
  }
2431
- .bds2160Combobox-option.bds2160Combobox---disabled {
2441
+ .bds2180Combobox-option.bds2180Combobox---disabled {
2432
2442
  opacity: 0.4;
2433
2443
  cursor: not-allowed;
2434
2444
  }
2435
2445
  }
2436
2446
 
2437
2447
  /* src/components/interaction/form/FieldGroup/FieldGroup.module.css */
2438
- @layer boostdev.bds2160FieldGroup-component {
2439
- .bds2160FieldGroup-fieldGroup {
2448
+ @layer boostdev.bds2180FieldGroup-component {
2449
+ .bds2180FieldGroup-fieldGroup {
2440
2450
  border: 0;
2441
2451
  margin: 0;
2442
2452
  padding: 0;
2443
2453
  min-inline-size: 0;
2444
2454
  --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
2455
  }
2446
- .bds2160FieldGroup-legend {
2456
+ .bds2180FieldGroup-legend {
2447
2457
  inline-size: 100%;
2448
2458
  padding-inline: 0;
2449
2459
  padding-block: var(--fieldGroup_legend-padding-block, var(--bds-space_xs));
@@ -2455,28 +2465,28 @@
2455
2465
  font-weight: var(--fieldGroup_legend-font-weight, var(--bds-font_weight--semibold));
2456
2466
  line-height: var(--fieldGroup_legend-line-height, var(--bds-font_line-height--heading));
2457
2467
  }
2458
- .bds2160FieldGroup-fieldGroup:disabled .bds2160FieldGroup-legend {
2468
+ .bds2180FieldGroup-fieldGroup:disabled .bds2180FieldGroup-legend {
2459
2469
  opacity: 0.5;
2460
2470
  }
2461
- .bds2160FieldGroup-fields {
2471
+ .bds2180FieldGroup-fields {
2462
2472
  display: flex;
2463
2473
  flex-direction: column;
2464
2474
  gap: var(--fieldGroup_gap, var(--bds-space_m));
2465
2475
  }
2466
- .bds2160FieldGroup-fieldGroup.bds2160FieldGroup---variant_horizontal .bds2160FieldGroup-fields {
2476
+ .bds2180FieldGroup-fieldGroup.bds2180FieldGroup---variant_horizontal .bds2180FieldGroup-fields {
2467
2477
  flex-flow: row wrap;
2468
2478
  }
2469
- .bds2160FieldGroup-fieldGroup.bds2160FieldGroup---variant_horizontal .bds2160FieldGroup-fields > * {
2479
+ .bds2180FieldGroup-fieldGroup.bds2180FieldGroup---variant_horizontal .bds2180FieldGroup-fields > * {
2470
2480
  flex: 1 1 var(--fieldGroup_min-field-width, 12rem);
2471
2481
  min-inline-size: 0;
2472
2482
  }
2473
- .bds2160FieldGroup-probeContainer {
2483
+ .bds2180FieldGroup-probeContainer {
2474
2484
  position: relative;
2475
2485
  inline-size: 0;
2476
2486
  block-size: 0;
2477
2487
  overflow: hidden;
2478
2488
  }
2479
- .bds2160FieldGroup-probe {
2489
+ .bds2180FieldGroup-probe {
2480
2490
  position: absolute;
2481
2491
  inset-block-start: 0;
2482
2492
  inset-inline-start: 0;
@@ -2484,28 +2494,28 @@
2484
2494
  inline-size: var(--fieldGroup_collapse-threshold);
2485
2495
  visibility: hidden;
2486
2496
  }
2487
- .bds2160FieldGroup-fieldGroup.bds2160FieldGroup---variant_horizontal[data-collapsed=true] .bds2160FieldGroup-fields {
2497
+ .bds2180FieldGroup-fieldGroup.bds2180FieldGroup---variant_horizontal[data-collapsed=true] .bds2180FieldGroup-fields {
2488
2498
  flex-direction: column;
2489
2499
  }
2490
- .bds2160FieldGroup-fieldGroup.bds2160FieldGroup---variant_horizontal[data-collapsed=true] .bds2160FieldGroup-fields > * {
2500
+ .bds2180FieldGroup-fieldGroup.bds2180FieldGroup---variant_horizontal[data-collapsed=true] .bds2180FieldGroup-fields > * {
2491
2501
  flex: 1 1 auto;
2492
2502
  }
2493
2503
  }
2494
2504
 
2495
2505
  /* src/components/interaction/form/FileInput/FileInput.module.css */
2496
- @layer boostdev.bds2160FileInput-component {
2497
- .bds2160FileInput-formGroup {
2506
+ @layer boostdev.bds2180FileInput-component {
2507
+ .bds2180FileInput-formGroup {
2498
2508
  display: flex;
2499
2509
  flex-direction: column;
2500
2510
  }
2501
- .bds2160FileInput-fieldLabel {
2511
+ .bds2180FileInput-fieldLabel {
2502
2512
  display: flex;
2503
2513
  align-items: center;
2504
2514
  font-family: var(--bds-font_family--body);
2505
2515
  color: var(--bds-color_on-bg);
2506
2516
  margin-block-end: var(--fileInput_label-margin, var(--bds-space_xs));
2507
2517
  }
2508
- .bds2160FileInput-dropZone {
2518
+ .bds2180FileInput-dropZone {
2509
2519
  display: flex;
2510
2520
  flex-direction: column;
2511
2521
  align-items: center;
@@ -2519,40 +2529,40 @@
2519
2529
  text-align: center;
2520
2530
  transition: var(--bds-animation_transition);
2521
2531
  }
2522
- .bds2160FileInput-dropZone:focus-within {
2532
+ .bds2180FileInput-dropZone:focus-within {
2523
2533
  outline: var(--bds-outline_default);
2524
2534
  outline-offset: var(--bds-outline_offset);
2525
2535
  border-color: var(--fileInput_border-color, currentcolor);
2526
2536
  }
2527
- .bds2160FileInput-isDragging {
2537
+ .bds2180FileInput-isDragging {
2528
2538
  border-color: currentcolor;
2529
2539
  background-color: var(--fileInput_bg--dragging, rgb(from currentcolor r g b / 8%));
2530
2540
  }
2531
- .bds2160FileInput-hasError {
2541
+ .bds2180FileInput-hasError {
2532
2542
  border-color: var(--bds-color_error);
2533
2543
  }
2534
- .bds2160FileInput-isDisabled {
2544
+ .bds2180FileInput-isDisabled {
2535
2545
  opacity: 0.5;
2536
2546
  cursor: not-allowed;
2537
2547
  }
2538
- .bds2160FileInput-icon {
2548
+ .bds2180FileInput-icon {
2539
2549
  inline-size: 2rem;
2540
2550
  block-size: 2rem;
2541
2551
  flex-shrink: 0;
2542
2552
  }
2543
- .bds2160FileInput-prompt {
2553
+ .bds2180FileInput-prompt {
2544
2554
  font-size: var(--fileInput_font-size, var(--bds-font_size--body));
2545
2555
  color: var(--bds-color_on-bg);
2546
2556
  }
2547
- .bds2160FileInput-prompt strong {
2557
+ .bds2180FileInput-prompt strong {
2548
2558
  color: var(--bds-color_interactive_on-bg);
2549
2559
  font-weight: var(--bds-font_weight--semibold);
2550
2560
  }
2551
- .bds2160FileInput-acceptHint {
2561
+ .bds2180FileInput-acceptHint {
2552
2562
  font-size: var(--fileInput_font-size--hint, var(--bds-font_size--body--s));
2553
2563
  color: var(--bds-color_on-bg);
2554
2564
  }
2555
- .bds2160FileInput-hiddenInput {
2565
+ .bds2180FileInput-hiddenInput {
2556
2566
  position: absolute;
2557
2567
  inline-size: 1px;
2558
2568
  block-size: 1px;
@@ -2562,7 +2572,7 @@
2562
2572
  border: 0;
2563
2573
  }
2564
2574
  @media (hover: hover) and (pointer: fine) {
2565
- .bds2160FileInput-dropZone:not(.bds2160FileInput-isDisabled):hover {
2575
+ .bds2180FileInput-dropZone:not(.bds2180FileInput-isDisabled):hover {
2566
2576
  border-color: var(--fileInput_border-color--hover, var(--bds-color_interactive));
2567
2577
  background-color: var(--fileInput_bg--hover, rgb(from var(--bds-color_interactive) r g b / 4%));
2568
2578
  }
@@ -2570,13 +2580,13 @@
2570
2580
  }
2571
2581
 
2572
2582
  /* src/components/interaction/form/FormInput/FormInput.module.css */
2573
- @layer boostdev.bds2160FormInput-component {
2574
- .bds2160FormInput-formGroup {
2583
+ @layer boostdev.bds2180FormInput-component {
2584
+ .bds2180FormInput-formGroup {
2575
2585
  --labelPosition: 0;
2576
2586
  display: flex;
2577
2587
  flex-direction: column;
2578
2588
  }
2579
- .bds2160FormInput-input {
2589
+ .bds2180FormInput-input {
2580
2590
  font-family: var(--formInput_font-family, var(--bds-font_family--body));
2581
2591
  font-size: var(--formInput_font-size, var(--bds-font_size--body));
2582
2592
  padding: var(--formInput_padding, var(--bds-space_s));
@@ -2589,30 +2599,30 @@
2589
2599
  background-color: var(--formInput_color_bg, var(--input_color_bg, var(--bds-color_bg)));
2590
2600
  transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing), background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
2591
2601
  }
2592
- .bds2160FormInput-input:focus {
2602
+ .bds2180FormInput-input:focus {
2593
2603
  --bdc_color: var(--bdc_color--focus);
2594
2604
  }
2595
- .bds2160FormInput-input:focus-visible {
2605
+ .bds2180FormInput-input:focus-visible {
2596
2606
  outline: var(--bds-outline_default);
2597
2607
  outline-offset: var(--bds-outline_offset);
2598
2608
  }
2599
- .bds2160FormInput-input:disabled {
2609
+ .bds2180FormInput-input:disabled {
2600
2610
  cursor: not-allowed;
2601
2611
  opacity: 0.5;
2602
2612
  }
2603
- .bds2160FormInput-inputError {
2613
+ .bds2180FormInput-inputError {
2604
2614
  --bdc_color: var(--bdc_color--error);
2605
2615
  --bdc-outline_width: var(--bdc-outline_width--error, 2px);
2606
2616
  }
2607
2617
  }
2608
2618
 
2609
2619
  /* src/components/interaction/form/NumberInput/NumberInput.module.css */
2610
- @layer boostdev.bds2160NumberInput-component {
2611
- .bds2160NumberInput-formGroup {
2620
+ @layer boostdev.bds2180NumberInput-component {
2621
+ .bds2180NumberInput-formGroup {
2612
2622
  display: flex;
2613
2623
  flex-direction: column;
2614
2624
  }
2615
- .bds2160NumberInput-inputRow {
2625
+ .bds2180NumberInput-inputRow {
2616
2626
  display: flex;
2617
2627
  align-items: stretch;
2618
2628
  border: var(--numberInput_border, none);
@@ -2624,14 +2634,14 @@
2624
2634
  overflow: hidden;
2625
2635
  transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing);
2626
2636
  }
2627
- .bds2160NumberInput-inputRow:focus-within {
2637
+ .bds2180NumberInput-inputRow:focus-within {
2628
2638
  --bdc_color: var(--bdc_color--focus);
2629
2639
  }
2630
- .bds2160NumberInput-inputRow:focus-within:has(:focus-visible) {
2640
+ .bds2180NumberInput-inputRow:focus-within:has(:focus-visible) {
2631
2641
  outline: var(--bds-outline_default);
2632
2642
  outline-offset: var(--bds-outline_offset);
2633
2643
  }
2634
- .bds2160NumberInput-input {
2644
+ .bds2180NumberInput-input {
2635
2645
  flex: 1;
2636
2646
  border: none;
2637
2647
  outline: none;
@@ -2644,15 +2654,15 @@
2644
2654
  min-inline-size: 0;
2645
2655
  appearance: textfield;
2646
2656
  }
2647
- .bds2160NumberInput-input::-webkit-inner-spin-button,
2648
- .bds2160NumberInput-input::-webkit-outer-spin-button {
2657
+ .bds2180NumberInput-input::-webkit-inner-spin-button,
2658
+ .bds2180NumberInput-input::-webkit-outer-spin-button {
2649
2659
  appearance: none;
2650
2660
  }
2651
- .bds2160NumberInput-inputError {
2661
+ .bds2180NumberInput-inputError {
2652
2662
  --bdc_color: var(--bdc_color--error);
2653
2663
  --bdc-outline_width: var(--bdc-outline_width--error, 2px);
2654
2664
  }
2655
- .bds2160NumberInput-stepper {
2665
+ .bds2180NumberInput-stepper {
2656
2666
  all: unset;
2657
2667
  display: flex;
2658
2668
  align-items: center;
@@ -2665,25 +2675,25 @@
2665
2675
  transition: var(--bds-animation_transition);
2666
2676
  flex-shrink: 0;
2667
2677
  }
2668
- .bds2160NumberInput-stepper svg {
2678
+ .bds2180NumberInput-stepper svg {
2669
2679
  inline-size: 1rem;
2670
2680
  block-size: 1rem;
2671
2681
  color: var(--numberInput_stepper-color, var(--bds-color_interactive));
2672
2682
  }
2673
- .bds2160NumberInput-stepper:first-child {
2683
+ .bds2180NumberInput-stepper:first-child {
2674
2684
  border-start-start-radius: var(--_radius);
2675
2685
  border-end-start-radius: var(--_radius);
2676
2686
  }
2677
- .bds2160NumberInput-stepper:last-child {
2687
+ .bds2180NumberInput-stepper:last-child {
2678
2688
  border-start-end-radius: var(--_radius);
2679
2689
  border-end-end-radius: var(--_radius);
2680
2690
  }
2681
- .bds2160NumberInput-stepper:disabled {
2691
+ .bds2180NumberInput-stepper:disabled {
2682
2692
  opacity: 0.4;
2683
2693
  cursor: not-allowed;
2684
2694
  }
2685
2695
  @media (hover: hover) and (pointer: fine) {
2686
- .bds2160NumberInput-stepper:not(:disabled):hover {
2696
+ .bds2180NumberInput-stepper:not(:disabled):hover {
2687
2697
  background-color: var(--numberInput_stepper-bg--hover, var(--bds-color_bg--subtle));
2688
2698
  opacity: var(--numberInput_stepper-opacity--hover, 0.7);
2689
2699
  }
@@ -2691,30 +2701,30 @@
2691
2701
  }
2692
2702
 
2693
2703
  /* src/components/interaction/form/Radio/Radio.module.css */
2694
- @layer boostdev.bds2160Radio-component {
2695
- .bds2160Radio-radioGroup {
2704
+ @layer boostdev.bds2180Radio-component {
2705
+ .bds2180Radio-radioGroup {
2696
2706
  --radio_size: calc(var(--bds-space_s) * 2);
2697
2707
  --inputSize: var(--radio_size);
2698
2708
  display: flex;
2699
2709
  flex-direction: column;
2700
2710
  }
2701
- .bds2160Radio-inputWrapper {
2711
+ .bds2180Radio-inputWrapper {
2702
2712
  display: flex;
2703
2713
  align-items: flex-start;
2704
2714
  gap: var(--bds-space_xs);
2705
2715
  }
2706
- .bds2160Radio-textWrapper {
2716
+ .bds2180Radio-textWrapper {
2707
2717
  display: flex;
2708
2718
  flex-direction: column;
2709
2719
  gap: var(--bds-space_xxxs);
2710
2720
  padding-block-start: var(--bds-space_xxxs);
2711
2721
  }
2712
- .bds2160Radio-description {
2722
+ .bds2180Radio-description {
2713
2723
  font-size: var(--bds-font_size--body--s);
2714
2724
  color: var(--radio_description-color, var(--bds-color_on-bg--subtle));
2715
2725
  line-height: var(--bds-font_line-height--body);
2716
2726
  }
2717
- .bds2160Radio-radio {
2727
+ .bds2180Radio-radio {
2718
2728
  flex-shrink: 0;
2719
2729
  margin-block-start: var(--radio_offset, 0.2em);
2720
2730
  inline-size: var(--radio_size);
@@ -2731,7 +2741,7 @@
2731
2741
  position: relative;
2732
2742
  transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing), background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
2733
2743
  }
2734
- .bds2160Radio-radio:checked {
2744
+ .bds2180Radio-radio:checked {
2735
2745
  background:
2736
2746
  radial-gradient(
2737
2747
  circle,
@@ -2739,30 +2749,30 @@
2739
2749
  var(--radio_color_bg, var(--bds-color_bg)) 42%);
2740
2750
  --bdc_color: var(--radio_color-active, var(--bdc-color_active));
2741
2751
  }
2742
- .bds2160Radio-radio:focus {
2752
+ .bds2180Radio-radio:focus {
2743
2753
  --bdc_color: var(--bdc_color--focus);
2744
2754
  }
2745
- .bds2160Radio-radio:focus-visible {
2755
+ .bds2180Radio-radio:focus-visible {
2746
2756
  outline: var(--bds-outline_default);
2747
2757
  outline-offset: var(--bds-outline_offset);
2748
2758
  }
2749
- .bds2160Radio-radio:disabled {
2759
+ .bds2180Radio-radio:disabled {
2750
2760
  cursor: not-allowed;
2751
2761
  opacity: 0.5;
2752
2762
  }
2753
- .bds2160Radio-radio:disabled ~ .bds2160Radio-textWrapper {
2763
+ .bds2180Radio-radio:disabled ~ .bds2180Radio-textWrapper {
2754
2764
  opacity: 0.5;
2755
2765
  cursor: not-allowed;
2756
2766
  }
2757
- .bds2160Radio-radioError {
2767
+ .bds2180Radio-radioError {
2758
2768
  --bdc_color: var(--bdc_color--error);
2759
2769
  --bdc-outline_width: var(--bdc-outline_width--error, 2px);
2760
2770
  }
2761
2771
  }
2762
2772
 
2763
2773
  /* src/components/interaction/form/RadioGroup/RadioGroup.module.css */
2764
- @layer boostdev.bds2160RadioGroup-component {
2765
- .bds2160RadioGroup-group {
2774
+ @layer boostdev.bds2180RadioGroup-component {
2775
+ .bds2180RadioGroup-group {
2766
2776
  border: none;
2767
2777
  padding: 0;
2768
2778
  margin: 0;
@@ -2770,7 +2780,7 @@
2770
2780
  flex-direction: column;
2771
2781
  gap: var(--radioGroup_gap, var(--bds-space_xs));
2772
2782
  }
2773
- .bds2160RadioGroup-legend {
2783
+ .bds2180RadioGroup-legend {
2774
2784
  font-family: var(--radioGroup_legend-font-family, var(--bds-font_family--body));
2775
2785
  font-size: var(--radioGroup_legend-font-size, var(--bds-font_size--body--s));
2776
2786
  font-weight: var(--radioGroup_legend-font-weight, var(--bds-font_weight--medium));
@@ -2778,10 +2788,10 @@
2778
2788
  padding: 0;
2779
2789
  margin-block-end: var(--radioGroup_legend-gap, var(--bds-space_xs));
2780
2790
  }
2781
- .bds2160RadioGroup-required {
2791
+ .bds2180RadioGroup-required {
2782
2792
  color: var(--radioGroup_required-color, var(--bds-color_error));
2783
2793
  }
2784
- .bds2160RadioGroup-requiredLabel {
2794
+ .bds2180RadioGroup-requiredLabel {
2785
2795
  position: absolute;
2786
2796
  inline-size: 1px;
2787
2797
  block-size: 1px;
@@ -2792,20 +2802,20 @@
2792
2802
  white-space: nowrap;
2793
2803
  border-width: 0;
2794
2804
  }
2795
- .bds2160RadioGroup-items {
2805
+ .bds2180RadioGroup-items {
2796
2806
  display: flex;
2797
2807
  flex-direction: column;
2798
2808
  gap: var(--radioGroup_items-gap, var(--bds-space_xs));
2799
2809
  }
2800
- .bds2160RadioGroup-groupError input {
2810
+ .bds2180RadioGroup-groupError input {
2801
2811
  --bdc_color: var(--bdc_color--error);
2802
2812
  --bdc-outline_width: var(--bdc-outline_width--error, 2px);
2803
2813
  }
2804
2814
  }
2805
2815
 
2806
2816
  /* src/components/interaction/form/SegmentedControl/SegmentedControl.module.css */
2807
- @layer boostdev.bds2160SegmentedControl-component {
2808
- .bds2160SegmentedControl-control {
2817
+ @layer boostdev.bds2180SegmentedControl-component {
2818
+ .bds2180SegmentedControl-control {
2809
2819
  position: relative;
2810
2820
  display: inline-grid;
2811
2821
  grid-auto-flow: column;
@@ -2816,11 +2826,11 @@
2816
2826
  gap: 0;
2817
2827
  --control_dir: 1;
2818
2828
  }
2819
- [dir=rtl] .bds2160SegmentedControl-control,
2820
- .bds2160SegmentedControl-control[dir=rtl] {
2829
+ [dir=rtl] .bds2180SegmentedControl-control,
2830
+ .bds2180SegmentedControl-control[dir=rtl] {
2821
2831
  --control_dir: -1;
2822
2832
  }
2823
- .bds2160SegmentedControl-thumb {
2833
+ .bds2180SegmentedControl-thumb {
2824
2834
  position: absolute;
2825
2835
  inset-block: var(--control_track-pad, var(--bds-space_xxs));
2826
2836
  inset-inline-start: var(--control_track-pad, var(--bds-space_xxs));
@@ -2832,7 +2842,7 @@
2832
2842
  transform: translateX(calc(var(--control_selected-index, 0) * var(--control_dir, 1) * 100%));
2833
2843
  transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
2834
2844
  }
2835
- .bds2160SegmentedControl-indicator {
2845
+ .bds2180SegmentedControl-indicator {
2836
2846
  position: absolute;
2837
2847
  inset-block: var(--control_track-pad, var(--bds-space_xxs));
2838
2848
  inset-inline-start: var(--control_track-pad, var(--bds-space_xxs));
@@ -2844,7 +2854,7 @@
2844
2854
  transform: translateX(calc(var(--control_selected-index, 0) * var(--control_dir, 1) * 100%));
2845
2855
  transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
2846
2856
  }
2847
- .bds2160SegmentedControl-item {
2857
+ .bds2180SegmentedControl-item {
2848
2858
  position: relative;
2849
2859
  z-index: 1;
2850
2860
  display: flex;
@@ -2865,73 +2875,73 @@
2865
2875
  border: none;
2866
2876
  outline: none;
2867
2877
  }
2868
- .bds2160SegmentedControl-item:focus-visible {
2878
+ .bds2180SegmentedControl-item:focus-visible {
2869
2879
  outline: var(--bds-outline_default);
2870
2880
  outline-offset: calc(var(--bds-outline_offset) * -1);
2871
2881
  border-radius: var(--control_thumb-radius, var(--bds-border_radius--full));
2872
2882
  }
2873
- .bds2160SegmentedControl-item.bds2160SegmentedControl---active {
2883
+ .bds2180SegmentedControl-item.bds2180SegmentedControl---active {
2874
2884
  color: var(--control_label-color--active, var(--bds-color_on-interactive));
2875
2885
  }
2876
- .bds2160SegmentedControl-item.bds2160SegmentedControl---disabled {
2886
+ .bds2180SegmentedControl-item.bds2180SegmentedControl---disabled {
2877
2887
  opacity: 0.5;
2878
2888
  cursor: not-allowed;
2879
2889
  pointer-events: none;
2880
2890
  }
2881
- .bds2160SegmentedControl-control.bds2160SegmentedControl---size_small .bds2160SegmentedControl-item {
2891
+ .bds2180SegmentedControl-control.bds2180SegmentedControl---size_small .bds2180SegmentedControl-item {
2882
2892
  padding: var(--bds-space_xxs) var(--bds-space_s);
2883
2893
  font-size: var(--bds-font_size--body--s);
2884
2894
  }
2885
- .bds2160SegmentedControl-control.bds2160SegmentedControl---size_large .bds2160SegmentedControl-item {
2895
+ .bds2180SegmentedControl-control.bds2180SegmentedControl---size_large .bds2180SegmentedControl-item {
2886
2896
  padding: var(--bds-space_s) var(--bds-space_m);
2887
2897
  white-space: normal;
2888
2898
  text-align: center;
2889
2899
  }
2890
- .bds2160SegmentedControl-control.bds2160SegmentedControl---variant_outline {
2900
+ .bds2180SegmentedControl-control.bds2180SegmentedControl---variant_outline {
2891
2901
  --control_label-color--active: var(--bds-color_interactive);
2892
2902
  }
2893
- .bds2160SegmentedControl-control.bds2160SegmentedControl---variant_outline .bds2160SegmentedControl-thumb {
2903
+ .bds2180SegmentedControl-control.bds2180SegmentedControl---variant_outline .bds2180SegmentedControl-thumb {
2894
2904
  display: none;
2895
2905
  }
2896
- .bds2160SegmentedControl-control.bds2160SegmentedControl---variant_outline .bds2160SegmentedControl-item {
2906
+ .bds2180SegmentedControl-control.bds2180SegmentedControl---variant_outline .bds2180SegmentedControl-item {
2897
2907
  background-color: var(--control_item-bg, transparent);
2898
2908
  }
2899
- .bds2160SegmentedControl-control.bds2160SegmentedControl---variant_outline .bds2160SegmentedControl-item.bds2160SegmentedControl---active {
2909
+ .bds2180SegmentedControl-control.bds2180SegmentedControl---variant_outline .bds2180SegmentedControl-item.bds2180SegmentedControl---active {
2900
2910
  background-color: var(--control_item-bg--active, var(--bds-color_bg));
2901
2911
  }
2902
- .bds2160SegmentedControl-control.bds2160SegmentedControl---variant_outline .bds2160SegmentedControl-indicator {
2912
+ .bds2180SegmentedControl-control.bds2180SegmentedControl---variant_outline .bds2180SegmentedControl-indicator {
2903
2913
  display: block;
2904
2914
  box-shadow: inset 0 0 0 var(--control_indicator-width, 2px) var(--control_indicator-color, var(--bds-color_interactive));
2905
2915
  }
2906
- .bds2160SegmentedControl-control.bds2160SegmentedControl---no-selection .bds2160SegmentedControl-thumb,
2907
- .bds2160SegmentedControl-control.bds2160SegmentedControl---no-selection .bds2160SegmentedControl-indicator {
2916
+ .bds2180SegmentedControl-control.bds2180SegmentedControl---no-selection .bds2180SegmentedControl-thumb,
2917
+ .bds2180SegmentedControl-control.bds2180SegmentedControl---no-selection .bds2180SegmentedControl-indicator {
2908
2918
  display: none;
2909
2919
  }
2910
2920
  @media (hover: hover) and (pointer: fine) {
2911
- .bds2160SegmentedControl-item:not(.bds2160SegmentedControl---active, .bds2160SegmentedControl---disabled):hover {
2921
+ .bds2180SegmentedControl-item:not(.bds2180SegmentedControl---active, .bds2180SegmentedControl---disabled):hover {
2912
2922
  color: var(--control_label-color--hover, var(--bds-color_on-bg));
2913
2923
  }
2914
2924
  }
2915
2925
  @media (prefers-reduced-motion: reduce) {
2916
- .bds2160SegmentedControl-thumb,
2917
- .bds2160SegmentedControl-indicator {
2926
+ .bds2180SegmentedControl-thumb,
2927
+ .bds2180SegmentedControl-indicator {
2918
2928
  transition: none;
2919
2929
  }
2920
2930
  }
2921
2931
  }
2922
2932
 
2923
2933
  /* src/components/interaction/form/Select/Select.module.css */
2924
- @layer boostdev.bds2160Select-component {
2925
- .bds2160Select-formGroup {
2934
+ @layer boostdev.bds2180Select-component {
2935
+ .bds2180Select-formGroup {
2926
2936
  display: flex;
2927
2937
  flex-direction: column;
2928
2938
  }
2929
- .bds2160Select-selectWrapper {
2939
+ .bds2180Select-selectWrapper {
2930
2940
  position: relative;
2931
2941
  display: flex;
2932
2942
  align-items: center;
2933
2943
  }
2934
- .bds2160Select-select {
2944
+ .bds2180Select-select {
2935
2945
  appearance: none;
2936
2946
  inline-size: 100%;
2937
2947
  font-family: var(--bds-font_family--body);
@@ -2948,22 +2958,22 @@
2948
2958
  cursor: pointer;
2949
2959
  transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing), background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
2950
2960
  }
2951
- .bds2160Select-select:focus {
2961
+ .bds2180Select-select:focus {
2952
2962
  --bdc_color: var(--bdc_color--focus);
2953
2963
  }
2954
- .bds2160Select-select:focus-visible {
2964
+ .bds2180Select-select:focus-visible {
2955
2965
  outline: var(--bds-outline_default);
2956
2966
  outline-offset: var(--bds-outline_offset);
2957
2967
  }
2958
- .bds2160Select-select:disabled {
2968
+ .bds2180Select-select:disabled {
2959
2969
  opacity: 0.5;
2960
2970
  cursor: not-allowed;
2961
2971
  }
2962
- .bds2160Select-selectError {
2972
+ .bds2180Select-selectError {
2963
2973
  --bdc_color: var(--bdc_color--error);
2964
2974
  --bdc-outline_width: var(--bdc-outline_width--error, 2px);
2965
2975
  }
2966
- .bds2160Select-chevron {
2976
+ .bds2180Select-chevron {
2967
2977
  position: absolute;
2968
2978
  inset-inline-end: var(--bds-space_s);
2969
2979
  display: flex;
@@ -2971,30 +2981,30 @@
2971
2981
  pointer-events: none;
2972
2982
  color: var(--select_chevron-color, var(--bds-color_interactive));
2973
2983
  }
2974
- .bds2160Select-chevron svg {
2984
+ .bds2180Select-chevron svg {
2975
2985
  inline-size: var(--select_chevron-size, 1rem);
2976
2986
  block-size: var(--select_chevron-size, 1rem);
2977
2987
  }
2978
2988
  }
2979
2989
 
2980
2990
  /* src/components/interaction/form/Slider/Slider.module.css */
2981
- @layer boostdev.bds2160Slider-component {
2982
- .bds2160Slider-formGroup {
2991
+ @layer boostdev.bds2180Slider-component {
2992
+ .bds2180Slider-formGroup {
2983
2993
  display: flex;
2984
2994
  flex-direction: column;
2985
2995
  gap: var(--bds-space_xxs);
2986
2996
  }
2987
- .bds2160Slider-labelRow {
2997
+ .bds2180Slider-labelRow {
2988
2998
  display: flex;
2989
2999
  justify-content: space-between;
2990
3000
  align-items: baseline;
2991
3001
  }
2992
- .bds2160Slider-value {
3002
+ .bds2180Slider-value {
2993
3003
  font-size: var(--bds-font_size--body--s);
2994
3004
  font-variant-numeric: tabular-nums;
2995
3005
  color: var(--bds-color_on-bg--subtle);
2996
3006
  }
2997
- .bds2160Slider-slider {
3007
+ .bds2180Slider-slider {
2998
3008
  --slider_fill: 0%;
2999
3009
  color: var(--slider_color, var(--bds-color_on-bg));
3000
3010
  appearance: none;
@@ -3011,7 +3021,7 @@
3011
3021
  cursor: pointer;
3012
3022
  transition: var(--bds-animation_transition);
3013
3023
  }
3014
- .bds2160Slider-slider:dir(rtl) {
3024
+ .bds2180Slider-slider:dir(rtl) {
3015
3025
  background:
3016
3026
  linear-gradient(
3017
3027
  to left,
@@ -3020,16 +3030,16 @@
3020
3030
  var(--slider_track-bg, var(--bds-color_bg--subtle)) var(--slider_fill),
3021
3031
  var(--slider_track-bg, var(--bds-color_bg--subtle)) 100%);
3022
3032
  }
3023
- .bds2160Slider-slider:focus-visible {
3033
+ .bds2180Slider-slider:focus-visible {
3024
3034
  outline: var(--bds-outline_default);
3025
3035
  outline-offset: var(--bds-outline_offset);
3026
3036
  border-radius: var(--slider_track-radius, var(--bds-border_radius--full));
3027
3037
  }
3028
- .bds2160Slider-slider:disabled {
3038
+ .bds2180Slider-slider:disabled {
3029
3039
  opacity: 0.4;
3030
3040
  cursor: not-allowed;
3031
3041
  }
3032
- .bds2160Slider-slider::-webkit-slider-thumb {
3042
+ .bds2180Slider-slider::-webkit-slider-thumb {
3033
3043
  appearance: none;
3034
3044
  inline-size: var(--slider_thumb-size, calc(var(--bds-space_s) * 2));
3035
3045
  block-size: var(--slider_thumb-size, calc(var(--bds-space_s) * 2));
@@ -3039,7 +3049,7 @@
3039
3049
  transition: var(--bds-animation_transition);
3040
3050
  cursor: pointer;
3041
3051
  }
3042
- .bds2160Slider-slider::-moz-range-thumb {
3052
+ .bds2180Slider-slider::-moz-range-thumb {
3043
3053
  inline-size: var(--slider_thumb-size, calc(var(--bds-space_s) * 2));
3044
3054
  block-size: var(--slider_thumb-size, calc(var(--bds-space_s) * 2));
3045
3055
  border: none;
@@ -3048,7 +3058,7 @@
3048
3058
  box-shadow: var(--bds-shadow_s);
3049
3059
  cursor: pointer;
3050
3060
  }
3051
- .bds2160Slider-sliderError {
3061
+ .bds2180Slider-sliderError {
3052
3062
  background:
3053
3063
  linear-gradient(
3054
3064
  to right,
@@ -3057,7 +3067,7 @@
3057
3067
  var(--slider_track-bg, var(--bds-color_bg--subtle)) var(--slider_fill),
3058
3068
  var(--slider_track-bg, var(--bds-color_bg--subtle)) 100%);
3059
3069
  }
3060
- .bds2160Slider-sliderError:dir(rtl) {
3070
+ .bds2180Slider-sliderError:dir(rtl) {
3061
3071
  background:
3062
3072
  linear-gradient(
3063
3073
  to left,
@@ -3066,43 +3076,43 @@
3066
3076
  var(--slider_track-bg, var(--bds-color_bg--subtle)) var(--slider_fill),
3067
3077
  var(--slider_track-bg, var(--bds-color_bg--subtle)) 100%);
3068
3078
  }
3069
- .bds2160Slider-sliderError::-webkit-slider-thumb {
3079
+ .bds2180Slider-sliderError::-webkit-slider-thumb {
3070
3080
  background-color: var(--slider_color--error, var(--bds-color_error));
3071
3081
  }
3072
- .bds2160Slider-sliderError::-moz-range-thumb {
3082
+ .bds2180Slider-sliderError::-moz-range-thumb {
3073
3083
  background-color: var(--slider_color--error, var(--bds-color_error));
3074
3084
  }
3075
3085
  @media (prefers-reduced-motion: reduce) {
3076
- .bds2160Slider-slider,
3077
- .bds2160Slider-slider::-webkit-slider-thumb,
3078
- .bds2160Slider-slider::-moz-range-thumb {
3086
+ .bds2180Slider-slider,
3087
+ .bds2180Slider-slider::-webkit-slider-thumb,
3088
+ .bds2180Slider-slider::-moz-range-thumb {
3079
3089
  transition: none;
3080
3090
  }
3081
3091
  }
3082
3092
  }
3083
3093
 
3084
3094
  /* src/components/interaction/form/Switch/Switch.module.css */
3085
- @layer boostdev.bds2160Switch-component {
3086
- .bds2160Switch-switchGroup {
3095
+ @layer boostdev.bds2180Switch-component {
3096
+ .bds2180Switch-switchGroup {
3087
3097
  color: var(--switch_color, var(--bds-color_on-bg));
3088
3098
  display: flex;
3089
3099
  flex-direction: column;
3090
3100
  }
3091
- .bds2160Switch-switchGroup.bds2160Switch---size_small {
3101
+ .bds2180Switch-switchGroup.bds2180Switch---size_small {
3092
3102
  --switch_thumb-size: 1em;
3093
3103
  }
3094
- .bds2160Switch-switchGroup.bds2160Switch---size_medium {
3104
+ .bds2180Switch-switchGroup.bds2180Switch---size_medium {
3095
3105
  --switch_thumb-size: 1.25em;
3096
3106
  }
3097
- .bds2160Switch-switchGroup.bds2160Switch---size_large {
3107
+ .bds2180Switch-switchGroup.bds2180Switch---size_large {
3098
3108
  --switch_thumb-size: 1.5em;
3099
3109
  }
3100
- .bds2160Switch-inputWrapper {
3110
+ .bds2180Switch-inputWrapper {
3101
3111
  display: flex;
3102
3112
  align-items: center;
3103
3113
  gap: var(--bds-space_xs);
3104
3114
  }
3105
- .bds2160Switch-trackWrapper {
3115
+ .bds2180Switch-trackWrapper {
3106
3116
  position: relative;
3107
3117
  display: inline-flex;
3108
3118
  align-items: center;
@@ -3110,7 +3120,7 @@
3110
3120
  inline-size: calc(var(--switch_thumb-size, 1.25em) * 2 + var(--switch_track-pad, var(--bds-space_xxxs)) * 2);
3111
3121
  block-size: calc(var(--switch_thumb-size, 1.25em) + var(--switch_track-pad, var(--bds-space_xxxs)) * 2);
3112
3122
  }
3113
- .bds2160Switch-switch {
3123
+ .bds2180Switch-switch {
3114
3124
  position: absolute;
3115
3125
  inset: 0;
3116
3126
  appearance: none;
@@ -3121,10 +3131,10 @@
3121
3131
  cursor: pointer;
3122
3132
  z-index: 1;
3123
3133
  }
3124
- .bds2160Switch-switch:disabled {
3134
+ .bds2180Switch-switch:disabled {
3125
3135
  cursor: not-allowed;
3126
3136
  }
3127
- .bds2160Switch-track {
3137
+ .bds2180Switch-track {
3128
3138
  display: inline-flex;
3129
3139
  align-items: center;
3130
3140
  inline-size: calc(var(--switch_thumb-size, 1.25em) * 2 + var(--switch_track-pad, var(--bds-space_xxxs)) * 2);
@@ -3140,7 +3150,7 @@
3140
3150
  transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
3141
3151
  --bdc_color: var(--switch_thumb-bg, var(--bds-color_interactive));
3142
3152
  }
3143
- .bds2160Switch-thumb {
3153
+ .bds2180Switch-thumb {
3144
3154
  display: block;
3145
3155
  inline-size: var(--switch_thumb-size, 1.25em);
3146
3156
  block-size: var(--switch_thumb-size, 1.25em);
@@ -3150,44 +3160,44 @@
3150
3160
  transition: var(--bds-animation_transition);
3151
3161
  transform: translateX(0);
3152
3162
  }
3153
- .bds2160Switch-switch.bds2160Switch-switchError + .bds2160Switch-track {
3163
+ .bds2180Switch-switch.bds2180Switch-switchError + .bds2180Switch-track {
3154
3164
  --bdc_color: var(--switch_border-color--error, var(--bds-color_error));
3155
3165
  --bdc-outline_width: var(--bdc-outline_width--error, 2px);
3156
3166
  }
3157
- .bds2160Switch-switch:checked + .bds2160Switch-track {
3167
+ .bds2180Switch-switch:checked + .bds2180Switch-track {
3158
3168
  background-color: var(--switch_track-bg--active, var(--bdc-color_active--subtle));
3159
3169
  --bdc_color: var(--switch_thumb-bg--active, var(--bds-color_interactive));
3160
3170
  }
3161
- .bds2160Switch-switch:checked + .bds2160Switch-track .bds2160Switch-thumb {
3171
+ .bds2180Switch-switch:checked + .bds2180Switch-track .bds2180Switch-thumb {
3162
3172
  background-color: var(--switch_thumb-bg--active, var(--bds-color_interactive));
3163
3173
  transform: translateX(var(--switch_thumb-size, 1.25em));
3164
3174
  }
3165
- [dir=rtl] .bds2160Switch-switch:checked + .bds2160Switch-track .bds2160Switch-thumb {
3175
+ [dir=rtl] .bds2180Switch-switch:checked + .bds2180Switch-track .bds2180Switch-thumb {
3166
3176
  transform: translateX(calc(var(--switch_thumb-size, 1.25em) * -1));
3167
3177
  }
3168
- .bds2160Switch-switch:focus-visible + .bds2160Switch-track {
3178
+ .bds2180Switch-switch:focus-visible + .bds2180Switch-track {
3169
3179
  outline: var(--bds-outline_default);
3170
3180
  outline-offset: var(--bds-outline_offset);
3171
3181
  border-radius: var(--switch_track-radius, var(--bds-border_radius--full));
3172
3182
  }
3173
- .bds2160Switch-switch:disabled + .bds2160Switch-track {
3183
+ .bds2180Switch-switch:disabled + .bds2180Switch-track {
3174
3184
  opacity: 0.4;
3175
3185
  }
3176
3186
  @media (prefers-reduced-motion: reduce) {
3177
- .bds2160Switch-track,
3178
- .bds2160Switch-thumb {
3187
+ .bds2180Switch-track,
3188
+ .bds2180Switch-thumb {
3179
3189
  transition: none;
3180
3190
  }
3181
3191
  }
3182
3192
  }
3183
3193
 
3184
3194
  /* src/components/interaction/form/Textarea/Textarea.module.css */
3185
- @layer boostdev.bds2160Textarea-component {
3186
- .bds2160Textarea-formGroup {
3195
+ @layer boostdev.bds2180Textarea-component {
3196
+ .bds2180Textarea-formGroup {
3187
3197
  display: flex;
3188
3198
  flex-direction: column;
3189
3199
  }
3190
- .bds2160Textarea-textarea {
3200
+ .bds2180Textarea-textarea {
3191
3201
  font-family: var(--textarea_font-family, var(--bds-font_family--body));
3192
3202
  font-size: var(--textarea_font-size, var(--bds-font_size--body));
3193
3203
  line-height: var(--textarea_line-height, var(--bds-font_line-height--body));
@@ -3203,66 +3213,66 @@
3203
3213
  min-block-size: var(--textarea_min-block-size, calc(var(--bds-space_m) * 5));
3204
3214
  transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing), background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
3205
3215
  }
3206
- .bds2160Textarea-textarea:focus {
3216
+ .bds2180Textarea-textarea:focus {
3207
3217
  --bdc_color: var(--bdc_color--focus);
3208
3218
  }
3209
- .bds2160Textarea-textarea:focus-visible {
3219
+ .bds2180Textarea-textarea:focus-visible {
3210
3220
  outline: var(--bds-outline_default);
3211
3221
  outline-offset: var(--bds-outline_offset);
3212
3222
  }
3213
- .bds2160Textarea-textarea:disabled {
3223
+ .bds2180Textarea-textarea:disabled {
3214
3224
  opacity: 0.5;
3215
3225
  cursor: not-allowed;
3216
3226
  resize: none;
3217
3227
  }
3218
- .bds2160Textarea-textareaError {
3228
+ .bds2180Textarea-textareaError {
3219
3229
  --bdc_color: var(--bdc_color--error);
3220
3230
  --bdc-outline_width: var(--bdc-outline_width--error, 2px);
3221
3231
  }
3222
3232
  }
3223
3233
 
3224
3234
  /* src/components/layout/ButtonGroup/ButtonGroup.module.css */
3225
- @layer boostdev.bds2160ButtonGroup-component {
3226
- .bds2160ButtonGroup-buttonGroup {
3235
+ @layer boostdev.bds2180ButtonGroup-component {
3236
+ .bds2180ButtonGroup-buttonGroup {
3227
3237
  container-type: inline-size;
3228
3238
  container-name: button-group;
3229
3239
  grid-column: var(--bds-grid_span-100);
3230
3240
  inline-size: 100%;
3231
3241
  }
3232
- .bds2160ButtonGroup-buttonGroup .bds2160ButtonGroup-container {
3242
+ .bds2180ButtonGroup-buttonGroup .bds2180ButtonGroup-container {
3233
3243
  position: relative;
3234
3244
  display: flex;
3235
3245
  flex-direction: column-reverse;
3236
3246
  gap: var(--buttonGroup_gap, var(--bds-space_l));
3237
3247
  align-items: center;
3238
3248
  }
3239
- .bds2160ButtonGroup-buttonGroup.bds2160ButtonGroup---variant_card .bds2160ButtonGroup-container {
3249
+ .bds2180ButtonGroup-buttonGroup.bds2180ButtonGroup---variant_card .bds2180ButtonGroup-container {
3240
3250
  align-items: stretch;
3241
3251
  }
3242
- .bds2160ButtonGroup-buttonGroup.bds2160ButtonGroup---variant_flow .bds2160ButtonGroup-container,
3243
- .bds2160ButtonGroup-buttonGroup.bds2160ButtonGroup---variant_modal .bds2160ButtonGroup-container {
3252
+ .bds2180ButtonGroup-buttonGroup.bds2180ButtonGroup---variant_flow .bds2180ButtonGroup-container,
3253
+ .bds2180ButtonGroup-buttonGroup.bds2180ButtonGroup---variant_modal .bds2180ButtonGroup-container {
3244
3254
  align-items: center;
3245
3255
  }
3246
- .bds2160ButtonGroup-buttonGroup.bds2160ButtonGroup---variant_content .bds2160ButtonGroup-container {
3256
+ .bds2180ButtonGroup-buttonGroup.bds2180ButtonGroup---variant_content .bds2180ButtonGroup-container {
3247
3257
  align-items: flex-start;
3248
3258
  }
3249
3259
  @supports (contain: inline-size) {
3250
3260
  @container button-group (min-width: 30rem) {
3251
- .bds2160ButtonGroup-buttonGroup .bds2160ButtonGroup-container {
3261
+ .bds2180ButtonGroup-buttonGroup .bds2180ButtonGroup-container {
3252
3262
  flex-direction: row;
3253
3263
  justify-content: space-between;
3254
3264
  }
3255
- .bds2160ButtonGroup-buttonGroup.bds2160ButtonGroup---variant_modal .bds2160ButtonGroup-container > :first-child:last-child,
3256
- .bds2160ButtonGroup-buttonGroup.bds2160ButtonGroup---variant_flow .bds2160ButtonGroup-container > :first-child:last-child {
3265
+ .bds2180ButtonGroup-buttonGroup.bds2180ButtonGroup---variant_modal .bds2180ButtonGroup-container > :first-child:last-child,
3266
+ .bds2180ButtonGroup-buttonGroup.bds2180ButtonGroup---variant_flow .bds2180ButtonGroup-container > :first-child:last-child {
3257
3267
  margin-inline-start: auto;
3258
3268
  }
3259
- .bds2160ButtonGroup-buttonGroup.bds2160ButtonGroup---variant_card .bds2160ButtonGroup-container {
3269
+ .bds2180ButtonGroup-buttonGroup.bds2180ButtonGroup---variant_card .bds2180ButtonGroup-container {
3260
3270
  justify-content: center;
3261
3271
  }
3262
- .bds2160ButtonGroup-buttonGroup.bds2160ButtonGroup---variant_modal .bds2160ButtonGroup-container {
3272
+ .bds2180ButtonGroup-buttonGroup.bds2180ButtonGroup---variant_modal .bds2180ButtonGroup-container {
3263
3273
  justify-content: flex-end;
3264
3274
  }
3265
- .bds2160ButtonGroup-buttonGroup.bds2160ButtonGroup---variant_content .bds2160ButtonGroup-container {
3275
+ .bds2180ButtonGroup-buttonGroup.bds2180ButtonGroup---variant_content .bds2180ButtonGroup-container {
3266
3276
  justify-content: flex-start;
3267
3277
  align-items: center;
3268
3278
  }
@@ -3271,205 +3281,205 @@
3271
3281
  }
3272
3282
 
3273
3283
  /* src/components/layout/Card/Card.module.css */
3274
- @layer boostdev.bds2160Card-component {
3275
- .bds2160Card-card {
3284
+ @layer boostdev.bds2180Card-component {
3285
+ .bds2180Card-card {
3276
3286
  background-color: var(--card_color, var(--bds-color_bg--strong, var(--bds-color_bg)));
3277
3287
  color: var(--card_on-color, var(--bds-color_on-bg));
3278
3288
  border-radius: var(--card_radius, var(--bds-border_radius--m));
3279
3289
  transition: var(--card_transition, var(--bds-animation_transition));
3280
3290
  position: relative;
3281
3291
  }
3282
- .bds2160Card-card:is(button) {
3292
+ .bds2180Card-card:is(button) {
3283
3293
  border: none;
3284
3294
  font: inherit;
3285
3295
  text-align: inherit;
3286
3296
  display: block;
3287
3297
  inline-size: 100%;
3288
3298
  }
3289
- .bds2160Card-card.bds2160Card---default {
3299
+ .bds2180Card-card.bds2180Card---default {
3290
3300
  box-shadow: var(--card_shadow--default, var(--bds-shadow_s));
3291
3301
  }
3292
- .bds2160Card-card.bds2160Card---elevated {
3302
+ .bds2180Card-card.bds2180Card---elevated {
3293
3303
  box-shadow: var(--card_shadow--elevated, var(--bds-shadow_m));
3294
3304
  }
3295
- .bds2160Card-card.bds2160Card---outlined {
3305
+ .bds2180Card-card.bds2180Card---outlined {
3296
3306
  border: var(--card_border, none);
3297
3307
  --bdc_color: currentcolor;
3298
3308
  box-shadow: var(--card_shadow--outlined, inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--bds-shadow_s));
3299
3309
  }
3300
- .bds2160Card-card.bds2160Card---clickable {
3310
+ .bds2180Card-card.bds2180Card---clickable {
3301
3311
  cursor: pointer;
3302
3312
  }
3303
- .bds2160Card-card.bds2160Card---padding-none {
3313
+ .bds2180Card-card.bds2180Card---padding-none {
3304
3314
  padding: var(--card_padding, 0);
3305
3315
  }
3306
- .bds2160Card-card.bds2160Card---padding-small {
3316
+ .bds2180Card-card.bds2180Card---padding-small {
3307
3317
  padding: var(--card_padding, var(--bds-space_s));
3308
3318
  }
3309
- .bds2160Card-card.bds2160Card---padding-medium {
3319
+ .bds2180Card-card.bds2180Card---padding-medium {
3310
3320
  padding: var(--card_padding, var(--bds-space_m));
3311
3321
  }
3312
- .bds2160Card-card.bds2160Card---padding-large {
3322
+ .bds2180Card-card.bds2180Card---padding-large {
3313
3323
  padding: var(--card_padding, var(--bds-space_l));
3314
3324
  }
3315
- .bds2160Card-card.bds2160Card---padding-extra-large {
3325
+ .bds2180Card-card.bds2180Card---padding-extra-large {
3316
3326
  padding: var(--card_padding, var(--bds-space_xl));
3317
3327
  }
3318
- .bds2160Card-card.bds2160Card---text-start {
3328
+ .bds2180Card-card.bds2180Card---text-start {
3319
3329
  text-align: start;
3320
3330
  }
3321
- .bds2160Card-card.bds2160Card---text-center {
3331
+ .bds2180Card-card.bds2180Card---text-center {
3322
3332
  text-align: center;
3323
3333
  }
3324
- .bds2160Card-card.bds2160Card---text-end {
3334
+ .bds2180Card-card.bds2180Card---text-end {
3325
3335
  text-align: end;
3326
3336
  }
3327
- .bds2160Card-card.bds2160Card---clickable:focus-visible {
3337
+ .bds2180Card-card.bds2180Card---clickable:focus-visible {
3328
3338
  outline: var(--bds-outline_default);
3329
3339
  outline-offset: var(--bds-outline_offset);
3330
3340
  }
3331
- .bds2160Card-card.bds2160Card---clickable:active {
3341
+ .bds2180Card-card.bds2180Card---clickable:active {
3332
3342
  transform: translateY(0);
3333
3343
  box-shadow: var(--card_shadow--active, var(--bds-shadow_s));
3334
3344
  }
3335
3345
  @media (hover: hover) and (pointer: fine) {
3336
- .bds2160Card-card.bds2160Card---clickable:hover {
3346
+ .bds2180Card-card.bds2180Card---clickable:hover {
3337
3347
  transform: translateY(-2px);
3338
3348
  box-shadow: var(--card_shadow--clickable-hover, var(--bds-shadow_xl));
3339
3349
  }
3340
- .bds2160Card-card.bds2160Card---default:hover {
3350
+ .bds2180Card-card.bds2180Card---default:hover {
3341
3351
  box-shadow: var(--card_shadow--default-hover, var(--bds-shadow_m));
3342
3352
  }
3343
- .bds2160Card-card.bds2160Card---elevated:hover {
3353
+ .bds2180Card-card.bds2180Card---elevated:hover {
3344
3354
  box-shadow: var(--card_shadow--elevated-hover, var(--bds-shadow_2xl));
3345
3355
  }
3346
- .bds2160Card-card.bds2160Card---outlined:hover {
3356
+ .bds2180Card-card.bds2180Card---outlined:hover {
3347
3357
  box-shadow: var(--card_shadow--outlined-hover, var(--bds-shadow_s));
3348
3358
  }
3349
3359
  }
3350
3360
  @media (prefers-reduced-motion: reduce) {
3351
- .bds2160Card-card {
3361
+ .bds2180Card-card {
3352
3362
  transition: none;
3353
3363
  }
3354
- .bds2160Card-card.bds2160Card---clickable:hover,
3355
- .bds2160Card-card.bds2160Card---clickable:active {
3364
+ .bds2180Card-card.bds2180Card---clickable:hover,
3365
+ .bds2180Card-card.bds2180Card---clickable:active {
3356
3366
  transform: none;
3357
3367
  }
3358
3368
  }
3359
3369
  }
3360
3370
 
3361
3371
  /* src/components/layout/Grid/Grid.module.css */
3362
- @layer boostdev.bds2160Grid-component {
3363
- .bds2160Grid-grid {
3372
+ @layer boostdev.bds2180Grid-component {
3373
+ .bds2180Grid-grid {
3364
3374
  display: grid;
3365
3375
  gap: var(--grid_gap, var(--bds-grid_gap));
3366
3376
  }
3367
- .bds2160Grid-grid.bds2160Grid---main {
3377
+ .bds2180Grid-grid.bds2180Grid---main {
3368
3378
  grid-template-columns: var(--bds-grid_template-columns);
3369
3379
  }
3370
- .bds2160Grid-grid.bds2160Grid---page {
3380
+ .bds2180Grid-grid.bds2180Grid---page {
3371
3381
  grid-template-columns: 1fr;
3372
3382
  grid-column: 1 / -1;
3373
3383
  }
3374
- .bds2160Grid-grid.bds2160Grid---funnel {
3384
+ .bds2180Grid-grid.bds2180Grid---funnel {
3375
3385
  grid-template-columns: var(--bds-grid_template-columns);
3376
3386
  max-inline-size: var(--bds-container_max-width--narrow);
3377
3387
  margin-inline: auto;
3378
3388
  }
3379
- .bds2160Grid-grid.bds2160Grid---custom {
3389
+ .bds2180Grid-grid.bds2180Grid---custom {
3380
3390
  grid-template-columns: repeat(var(--grid_columns, 4), minmax(0, 1fr));
3381
3391
  }
3382
- .bds2160Grid-grid.bds2160Grid---centered {
3392
+ .bds2180Grid-grid.bds2180Grid---centered {
3383
3393
  margin-inline: auto;
3384
3394
  max-inline-size: var(--bds-container_max-width);
3385
3395
  padding-inline: var(--bds-container_spacing-inline);
3386
3396
  }
3387
- .bds2160Grid-item {
3397
+ .bds2180Grid-item {
3388
3398
  min-inline-size: 0;
3389
3399
  }
3390
3400
  @supports (grid-template-rows: masonry) {
3391
- .bds2160Grid-grid.bds2160Grid---masonry {
3401
+ .bds2180Grid-grid.bds2180Grid---masonry {
3392
3402
  grid-template-rows: masonry;
3393
3403
  }
3394
3404
  }
3395
3405
  @supports (display: grid-lanes) {
3396
- .bds2160Grid-grid.bds2160Grid---masonry {
3406
+ .bds2180Grid-grid.bds2180Grid---masonry {
3397
3407
  display: grid-lanes;
3398
3408
  }
3399
3409
  }
3400
3410
  }
3401
3411
 
3402
3412
  /* src/components/layout/SectionHeader/SectionHeader.module.css */
3403
- @layer boostdev.bds2160SectionHeader-component {
3404
- .bds2160SectionHeader-sectionHeader {
3413
+ @layer boostdev.bds2180SectionHeader-component {
3414
+ .bds2180SectionHeader-sectionHeader {
3405
3415
  display: flex;
3406
3416
  flex-direction: column;
3407
3417
  gap: var(--sectionHeader_gap, var(--bds-space_m));
3408
3418
  grid-column: var(--bds-grid_span-100);
3409
3419
  }
3410
- .bds2160SectionHeader-title {
3420
+ .bds2180SectionHeader-title {
3411
3421
  color: var(--sectionHeader_title-color, var(--sectionHeader-title-color, var(--bds-color_on-bg)));
3412
3422
  margin: 0;
3413
3423
  font-family: var(--sectionHeader_title-font-family, var(--bds-font_family--heading));
3414
3424
  }
3415
- .bds2160SectionHeader-subtitle {
3425
+ .bds2180SectionHeader-subtitle {
3416
3426
  color: var(--sectionHeader_subtitle-color, var(--bds-color_on-bg--muted, var(--bds-color_grey--strong)));
3417
3427
  margin: 0;
3418
3428
  font-family: var(--bds-font_family--body);
3419
3429
  font-weight: var(--bds-font_weight--medium);
3420
3430
  }
3421
- .bds2160SectionHeader-sectionHeader.bds2160SectionHeader---start {
3431
+ .bds2180SectionHeader-sectionHeader.bds2180SectionHeader---start {
3422
3432
  align-items: flex-start;
3423
3433
  text-align: start;
3424
3434
  }
3425
- .bds2160SectionHeader-sectionHeader.bds2160SectionHeader---center {
3435
+ .bds2180SectionHeader-sectionHeader.bds2180SectionHeader---center {
3426
3436
  align-items: center;
3427
3437
  text-align: center;
3428
3438
  }
3429
- .bds2160SectionHeader-sectionHeader.bds2160SectionHeader---end {
3439
+ .bds2180SectionHeader-sectionHeader.bds2180SectionHeader---end {
3430
3440
  align-items: flex-end;
3431
3441
  text-align: end;
3432
3442
  }
3433
- .bds2160SectionHeader-sectionHeader.bds2160SectionHeader---medium .bds2160SectionHeader-title {
3443
+ .bds2180SectionHeader-sectionHeader.bds2180SectionHeader---medium .bds2180SectionHeader-title {
3434
3444
  font-size: var(--sectionHeader_title-size, var(--bds-font_size--heading-2));
3435
3445
  line-height: var(--sectionHeader_title-line-height, var(--bds-font_line-height--heading));
3436
3446
  font-weight: var(--sectionHeader_title-weight, var(--bds-font_weight--heading, var(--bds-font_weight--bold)));
3437
3447
  }
3438
- .bds2160SectionHeader-sectionHeader.bds2160SectionHeader---medium .bds2160SectionHeader-subtitle {
3448
+ .bds2180SectionHeader-sectionHeader.bds2180SectionHeader---medium .bds2180SectionHeader-subtitle {
3439
3449
  font-size: var(--sectionHeader_subtitle-size, var(--bds-font_size--body));
3440
3450
  line-height: var(--sectionHeader_subtitle-line-height, 1.3);
3441
3451
  }
3442
- .bds2160SectionHeader-sectionHeader.bds2160SectionHeader---xs .bds2160SectionHeader-title {
3452
+ .bds2180SectionHeader-sectionHeader.bds2180SectionHeader---xs .bds2180SectionHeader-title {
3443
3453
  font-size: var(--sectionHeader_title-size, var(--bds-font_size--body));
3444
3454
  line-height: var(--sectionHeader_title-line-height, var(--bds-font_line-height--heading));
3445
3455
  font-weight: var(--sectionHeader_title-weight, var(--bds-font_weight--heading, var(--bds-font_weight--bold)));
3446
3456
  }
3447
- .bds2160SectionHeader-sectionHeader.bds2160SectionHeader---xs .bds2160SectionHeader-subtitle {
3457
+ .bds2180SectionHeader-sectionHeader.bds2180SectionHeader---xs .bds2180SectionHeader-subtitle {
3448
3458
  font-size: var(--sectionHeader_subtitle-size, var(--bds-font_size--body--s));
3449
3459
  line-height: var(--sectionHeader_subtitle-line-height, 1.4);
3450
3460
  }
3451
- .bds2160SectionHeader-sectionHeader.bds2160SectionHeader---small .bds2160SectionHeader-title {
3461
+ .bds2180SectionHeader-sectionHeader.bds2180SectionHeader---small .bds2180SectionHeader-title {
3452
3462
  font-size: var(--sectionHeader_title-size, var(--bds-font_size--heading-3));
3453
3463
  line-height: var(--sectionHeader_title-line-height, var(--bds-font_line-height--heading));
3454
3464
  font-weight: var(--sectionHeader_title-weight, var(--bds-font_weight--heading, var(--bds-font_weight--bold)));
3455
3465
  }
3456
- .bds2160SectionHeader-sectionHeader.bds2160SectionHeader---small .bds2160SectionHeader-subtitle {
3466
+ .bds2180SectionHeader-sectionHeader.bds2180SectionHeader---small .bds2180SectionHeader-subtitle {
3457
3467
  font-size: var(--sectionHeader_subtitle-size, var(--bds-font_size--body));
3458
3468
  line-height: var(--sectionHeader_subtitle-line-height, 1.4);
3459
3469
  }
3460
- .bds2160SectionHeader-sectionHeader.bds2160SectionHeader---large .bds2160SectionHeader-title {
3470
+ .bds2180SectionHeader-sectionHeader.bds2180SectionHeader---large .bds2180SectionHeader-title {
3461
3471
  font-size: var(--sectionHeader_title-size, var(--bds-font_size--heading-1));
3462
3472
  line-height: var(--sectionHeader_title-line-height, var(--bds-font_line-height--heading));
3463
3473
  font-weight: var(--sectionHeader_title-weight, var(--bds-font_weight--heading, var(--bds-font_weight--bold)));
3464
3474
  letter-spacing: var(--bds-font_tracking--tight);
3465
3475
  }
3466
- .bds2160SectionHeader-sectionHeader.bds2160SectionHeader---large .bds2160SectionHeader-subtitle {
3476
+ .bds2180SectionHeader-sectionHeader.bds2180SectionHeader---large .bds2180SectionHeader-subtitle {
3467
3477
  font-size: var(--sectionHeader_subtitle-size, var(--bds-font_size--heading-3));
3468
3478
  line-height: var(--sectionHeader_subtitle-line-height, 1.3);
3469
3479
  font-weight: var(--bds-font_weight--medium);
3470
3480
  }
3471
3481
  @supports (background-clip: text) {
3472
- .bds2160SectionHeader-sectionHeader.bds2160SectionHeader---gradient .bds2160SectionHeader-title {
3482
+ .bds2180SectionHeader-sectionHeader.bds2180SectionHeader---gradient .bds2180SectionHeader-title {
3473
3483
  inline-size: fit-content;
3474
3484
  max-inline-size: 100%;
3475
3485
  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 +3488,7 @@
3478
3488
  }
3479
3489
  }
3480
3490
  @media (forced-colors: active) {
3481
- .bds2160SectionHeader-sectionHeader.bds2160SectionHeader---gradient .bds2160SectionHeader-title {
3491
+ .bds2180SectionHeader-sectionHeader.bds2180SectionHeader---gradient .bds2180SectionHeader-title {
3482
3492
  background-image: none;
3483
3493
  color: CanvasText;
3484
3494
  }
@@ -3486,8 +3496,8 @@
3486
3496
  }
3487
3497
 
3488
3498
  /* src/components/layout/IconWrapper/IconWrapper.module.css */
3489
- @layer boostdev.bds2160IconWrapper-component {
3490
- .bds2160IconWrapper-wrapper {
3499
+ @layer boostdev.bds2180IconWrapper-component {
3500
+ .bds2180IconWrapper-wrapper {
3491
3501
  inline-size: 2em;
3492
3502
  block-size: 2em;
3493
3503
  font-size: var(--icon-wrapper_size, 3em);
@@ -3503,7 +3513,7 @@
3503
3513
  position: relative;
3504
3514
  transition: var(--bds-animation_transition);
3505
3515
  }
3506
- .bds2160IconWrapper-wrapper svg {
3516
+ .bds2180IconWrapper-wrapper svg {
3507
3517
  fill: currentcolor;
3508
3518
  }
3509
3519
  }