@boostdev/design-system-components 1.1.2 → 1.2.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 (169) hide show
  1. package/AGENTS.md +13 -10
  2. package/dist/client.cjs +77 -99
  3. package/dist/client.css +611 -580
  4. package/dist/client.d.cts +13 -16
  5. package/dist/client.d.ts +13 -16
  6. package/dist/client.js +87 -109
  7. package/dist/index.cjs +77 -99
  8. package/dist/index.css +611 -580
  9. package/dist/index.d.cts +13 -16
  10. package/dist/index.d.ts +13 -16
  11. package/dist/index.js +87 -109
  12. package/dist/native/index.cjs +9 -8
  13. package/dist/native/index.d.cts +1 -1
  14. package/dist/native/index.d.ts +1 -1
  15. package/dist/native/index.js +9 -8
  16. package/dist/web-components/{chunk-O4UFI2RX.js → chunk-3REOIRDW.js} +13 -11
  17. package/dist/web-components/{chunk-K5CE6HSB.js → chunk-6MH5UWUD.js} +74 -17
  18. package/dist/web-components/{chunk-VM3YHGQ2.js → chunk-AJSXNDAP.js} +1 -2
  19. package/dist/web-components/{chunk-LSC4N56Q.js → chunk-BX3IPVOB.js} +1 -2
  20. package/dist/web-components/{chunk-CJ5ZOO42.js → chunk-DI46Q2EA.js} +50 -1
  21. package/dist/web-components/{chunk-CAPI25CU.js → chunk-DZRSJGPB.js} +3 -3
  22. package/dist/web-components/{chunk-VSS5ITNE.js → chunk-EBJM3VD4.js} +1 -3
  23. package/dist/web-components/{chunk-O7I63SQX.js → chunk-HHHRF2PS.js} +6 -12
  24. package/dist/web-components/{chunk-OTX4COSV.js → chunk-JUKB3BUP.js} +3 -4
  25. package/dist/web-components/{chunk-IQGLIQSO.js → chunk-N6IMUOY4.js} +2 -5
  26. package/dist/web-components/{chunk-QDRH46TF.js → chunk-QLZ2362S.js} +1 -3
  27. package/dist/web-components/{chunk-IK3PTFZ4.js → chunk-T6AETZRP.js} +1 -3
  28. package/dist/web-components/{chunk-4BX6AWXX.js → chunk-X3FKVHLK.js} +2 -4
  29. package/dist/web-components/{chunk-A67LCT7C.js → chunk-XNA6WTXG.js} +3 -4
  30. package/dist/web-components/{chunk-XIENXR7H.js → chunk-YRXCVKHV.js} +1 -3
  31. package/dist/web-components/{chunk-6T3RKUKG.js → chunk-ZTC6GRP7.js} +1 -2
  32. package/dist/web-components/globals.js +1 -1
  33. package/dist/web-components/index.js +16 -16
  34. package/dist/web-components/interaction/bds-accordion.js +1 -1
  35. package/dist/web-components/interaction/bds-button.d.ts +2 -2
  36. package/dist/web-components/interaction/bds-button.js +1 -1
  37. package/dist/web-components/interaction/bds-dialog.js +1 -1
  38. package/dist/web-components/interaction/bds-drawer.js +1 -1
  39. package/dist/web-components/interaction/form/bds-checkbox.js +1 -1
  40. package/dist/web-components/interaction/form/bds-combobox.js +1 -1
  41. package/dist/web-components/interaction/form/bds-number-input.js +1 -1
  42. package/dist/web-components/interaction/form/bds-radio.js +1 -1
  43. package/dist/web-components/interaction/form/bds-segmented-control.d.ts +20 -3
  44. package/dist/web-components/interaction/form/bds-segmented-control.js +1 -1
  45. package/dist/web-components/interaction/form/bds-select.js +1 -1
  46. package/dist/web-components/interaction/form/bds-switch.js +1 -1
  47. package/dist/web-components/interaction/form/bds-textarea.js +1 -1
  48. package/dist/web-components/ui/bds-alert.js +1 -1
  49. package/dist/web-components/ui/bds-card.js +1 -1
  50. package/dist/web-components/ui/bds-notification-banner.js +1 -1
  51. package/package.json +2 -2
  52. package/src/components/interaction/Button/Button.module.css +12 -11
  53. package/src/components/interaction/Button/Button.native.tsx +10 -9
  54. package/src/components/interaction/Button/Button.tsx +1 -1
  55. package/src/components/interaction/Command/Command.module.css +3 -7
  56. package/src/components/interaction/Dialog/Dialog.module.css +7 -5
  57. package/src/components/interaction/Drawer/Drawer.module.css +49 -1
  58. package/src/components/interaction/DropdownMenu/DropdownMenu.module.css +1 -3
  59. package/src/components/interaction/Popover/Popover.module.css +1 -3
  60. package/src/components/interaction/form/Checkbox/Checkbox.module.css +1 -3
  61. package/src/components/interaction/form/Combobox/Combobox.module.css +2 -6
  62. package/src/components/interaction/form/FormInput/FormInput.module.css +1 -3
  63. package/src/components/interaction/form/NumberInput/NumberInput.module.css +16 -4
  64. package/src/components/interaction/form/Radio/Radio.module.css +6 -16
  65. package/src/components/interaction/form/SegmentedControl/SegmentedControl.mdx +70 -25
  66. package/src/components/interaction/form/SegmentedControl/SegmentedControl.module.css +55 -33
  67. package/src/components/interaction/form/SegmentedControl/SegmentedControl.spec.tsx +127 -56
  68. package/src/components/interaction/form/SegmentedControl/SegmentedControl.stories.tsx +89 -72
  69. package/src/components/interaction/form/SegmentedControl/SegmentedControl.tsx +40 -62
  70. package/src/components/interaction/form/SegmentedControl/index.ts +1 -1
  71. package/src/components/interaction/form/Select/Select.module.css +2 -4
  72. package/src/components/interaction/form/Switch/Switch.module.css +5 -7
  73. package/src/components/interaction/form/Switch/Switch.native.spec.tsx +9 -9
  74. package/src/components/interaction/form/Switch/Switch.native.tsx +2 -2
  75. package/src/components/interaction/form/Textarea/Textarea.module.css +1 -3
  76. package/src/components/interaction/form/atoms/InputContainer.stories.tsx +64 -0
  77. package/src/components/interaction/form/atoms/Label.stories.tsx +33 -0
  78. package/src/components/interaction/form/atoms/Message.stories.tsx +33 -0
  79. package/src/components/layout/Card/Card.module.css +1 -3
  80. package/src/components/ui/Accordion/Accordion.module.css +1 -2
  81. package/src/components/ui/Alert/Alert.module.css +1 -2
  82. package/src/components/ui/Calendar/Calendar.module.css +2 -5
  83. package/src/components/ui/Carousel/Carousel.module.css +1 -3
  84. package/src/components/ui/NotificationBanner/NotificationBanner.module.css +1 -2
  85. package/src/components/ui/Pagination/Pagination.module.css +1 -2
  86. package/src/components/ui/SkipLink/SkipLink.module.css +1 -2
  87. package/src/components/ui/Table/Table.module.css +1 -2
  88. package/src/css/bdc.css +16 -11
  89. package/src/index.ts +1 -1
  90. package/src/web-components/globals.ts +3 -3
  91. package/src/web-components/interaction/BdsAccordion.mdx +51 -0
  92. package/src/web-components/interaction/BdsAccordion.stories.tsx +85 -0
  93. package/src/web-components/interaction/BdsCollapsible.mdx +46 -0
  94. package/src/web-components/interaction/BdsCollapsible.stories.tsx +87 -0
  95. package/src/web-components/interaction/BdsDialog.mdx +49 -0
  96. package/src/web-components/interaction/BdsDialog.stories.tsx +75 -0
  97. package/src/web-components/interaction/BdsDrawer.mdx +50 -0
  98. package/src/web-components/interaction/BdsDrawer.stories.tsx +66 -0
  99. package/src/web-components/interaction/BdsSkipLink.mdx +34 -0
  100. package/src/web-components/interaction/BdsSkipLink.stories.tsx +55 -0
  101. package/src/web-components/interaction/BdsTabs.mdx +47 -0
  102. package/src/web-components/interaction/BdsTabs.stories.tsx +80 -0
  103. package/src/web-components/interaction/BdsTooltip.mdx +38 -0
  104. package/src/web-components/interaction/BdsTooltip.stories.tsx +68 -0
  105. package/src/web-components/interaction/bds-accordion.ts +1 -2
  106. package/src/web-components/interaction/bds-button.ts +15 -13
  107. package/src/web-components/interaction/bds-dialog.ts +2 -5
  108. package/src/web-components/interaction/bds-drawer.ts +50 -1
  109. package/src/web-components/interaction/form/BdsCheckbox.mdx +39 -0
  110. package/src/web-components/interaction/form/BdsCheckbox.stories.tsx +73 -0
  111. package/src/web-components/interaction/form/BdsCombobox.mdx +52 -0
  112. package/src/web-components/interaction/form/BdsCombobox.stories.tsx +91 -0
  113. package/src/web-components/interaction/form/BdsFileInput.mdx +44 -0
  114. package/src/web-components/interaction/form/BdsFileInput.stories.tsx +84 -0
  115. package/src/web-components/interaction/form/BdsNumberInput.mdx +41 -0
  116. package/src/web-components/interaction/form/BdsNumberInput.stories.tsx +90 -0
  117. package/src/web-components/interaction/form/BdsRadio.mdx +41 -0
  118. package/src/web-components/interaction/form/BdsRadio.stories.tsx +90 -0
  119. package/src/web-components/interaction/form/BdsSegmentedControl.mdx +42 -0
  120. package/src/web-components/interaction/form/BdsSegmentedControl.stories.tsx +92 -0
  121. package/src/web-components/interaction/form/BdsSelect.mdx +38 -0
  122. package/src/web-components/interaction/form/BdsSelect.stories.tsx +93 -0
  123. package/src/web-components/interaction/form/BdsSlider.mdx +49 -0
  124. package/src/web-components/interaction/form/BdsSlider.stories.tsx +89 -0
  125. package/src/web-components/interaction/form/BdsSwitch.mdx +39 -0
  126. package/src/web-components/interaction/form/BdsSwitch.stories.tsx +73 -0
  127. package/src/web-components/interaction/form/BdsTextarea.mdx +41 -0
  128. package/src/web-components/interaction/form/BdsTextarea.stories.tsx +79 -0
  129. package/src/web-components/interaction/form/bds-checkbox.ts +1 -3
  130. package/src/web-components/interaction/form/bds-combobox.ts +1 -3
  131. package/src/web-components/interaction/form/bds-number-input.ts +3 -4
  132. package/src/web-components/interaction/form/bds-radio.ts +6 -12
  133. package/src/web-components/interaction/form/bds-segmented-control.ts +91 -20
  134. package/src/web-components/interaction/form/bds-select.ts +2 -4
  135. package/src/web-components/interaction/form/bds-switch.ts +3 -4
  136. package/src/web-components/interaction/form/bds-textarea.ts +1 -3
  137. package/src/web-components/ui/BdsAvatar.mdx +67 -0
  138. package/src/web-components/ui/BdsAvatar.stories.tsx +62 -0
  139. package/src/web-components/ui/BdsBreadcrumb.mdx +63 -0
  140. package/src/web-components/ui/BdsBreadcrumb.stories.tsx +59 -0
  141. package/src/web-components/ui/BdsCard.mdx +83 -0
  142. package/src/web-components/ui/BdsCard.stories.tsx +90 -0
  143. package/src/web-components/ui/BdsDescriptionList.mdx +67 -0
  144. package/src/web-components/ui/BdsDescriptionList.stories.tsx +79 -0
  145. package/src/web-components/ui/BdsIconWrapper.mdx +70 -0
  146. package/src/web-components/ui/BdsIconWrapper.stories.tsx +76 -0
  147. package/src/web-components/ui/BdsLink.mdx +75 -0
  148. package/src/web-components/ui/BdsLink.stories.tsx +64 -0
  149. package/src/web-components/ui/BdsLoading.mdx +62 -0
  150. package/src/web-components/ui/BdsLoading.stories.tsx +37 -0
  151. package/src/web-components/ui/BdsNotificationBanner.mdx +90 -0
  152. package/src/web-components/ui/BdsNotificationBanner.stories.tsx +93 -0
  153. package/src/web-components/ui/BdsProgress.mdx +63 -0
  154. package/src/web-components/ui/BdsProgress.stories.tsx +70 -0
  155. package/src/web-components/ui/BdsProgressCircle.mdx +64 -0
  156. package/src/web-components/ui/BdsProgressCircle.stories.tsx +69 -0
  157. package/src/web-components/ui/BdsRating.mdx +61 -0
  158. package/src/web-components/ui/BdsRating.stories.tsx +39 -0
  159. package/src/web-components/ui/BdsSectionHeader.mdx +69 -0
  160. package/src/web-components/ui/BdsSectionHeader.stories.tsx +56 -0
  161. package/src/web-components/ui/BdsSeparator.mdx +63 -0
  162. package/src/web-components/ui/BdsSeparator.stories.tsx +47 -0
  163. package/src/web-components/ui/BdsSkeleton.mdx +67 -0
  164. package/src/web-components/ui/BdsSkeleton.stories.tsx +50 -0
  165. package/src/web-components/ui/BdsTypography.mdx +83 -0
  166. package/src/web-components/ui/BdsTypography.stories.tsx +51 -0
  167. package/src/web-components/ui/bds-alert.ts +1 -2
  168. package/src/web-components/ui/bds-card.ts +1 -3
  169. package/src/web-components/ui/bds-notification-banner.ts +1 -2
package/dist/index.css CHANGED
@@ -3,49 +3,50 @@
3
3
  @property --bdc-outline_width { syntax: "<length>"; inherits: false; initial-value: 1px; }
4
4
  @property --bdc-outline_offset { syntax: "<length>"; inherits: false; initial-value: -1px; }
5
5
  @property --bdc-outline_radius { syntax: "<length-percentage>"; inherits: false; initial-value: 0; }
6
- @property --bdc-outline_shadow { syntax: "*"; inherits: false; initial-value: none; }
6
+ @property --bdc-outline_shadow { syntax: "*"; inherits: false; initial-value: 0 0 0 0 transparent; }
7
7
  @layer component {
8
8
  :root {
9
9
  --bdc-outline_border: none;
10
10
  --bdc_color: currentcolor;
11
11
  --bdc_color--focus: var(--bds-color_interactive);
12
12
  --bdc_color--error: var(--bds-color_error);
13
- --bdc-color_active: var(--bds-color_green);
14
- --bdc-color_on-active: var(--bds-color_on-green);
15
- --bdc-color_active--subtle: var(--bds-color_green--subtle);
16
- --bdc-color_on-active--subtle: var(--bds-color_on-green--subtle);
17
- --bdc-color_active--strong: var(--bds-color_green--strong);
18
- --bdc-color_on-active--strong: var(--bds-color_on-green--strong);
13
+ --bdc-color_active: var(--bds-color_interactive);
14
+ --bdc-color_on-active: var(--bds-color_on-interactive);
15
+ --bdc-color_active--subtle: var(--bds-color_blue--subtle);
16
+ --bdc-color_on-active--subtle: var(--bds-color_on-blue--subtle);
17
+ --bdc-color_active--strong: var(--bds-color_interactive_on-bg);
18
+ --bdc-color_on-active--strong: var(--bds-color_on-blue--strong);
19
19
  --bdc-outline_width: 1px;
20
20
  --bdc-outline_offset: -1px;
21
21
  --bdc-outline_radius: var(--bds-border_radius--xs);
22
- --bdc-outline_shadow: none;
22
+ --bdc-outline_shadow: 0 0 0 0 transparent;
23
+ --bds-outline_default: 2px solid var(--bds-color_interactive);
24
+ --bds-outline_offset: 2px;
23
25
  }
24
26
  }
25
27
 
26
28
  /* src/components/ui/Accordion/Accordion.module.css */
27
29
  @layer component {
28
- .bds112Accordion-accordion {
30
+ .bds120Accordion-accordion {
29
31
  display: flex;
30
32
  flex-direction: column;
31
33
  border: var(--accordion_border, none);
32
34
  --bdc_color: var(--bds-color_bg--subtle);
33
35
  --bdc-outline_radius: var(--bds-border_radius--s);
34
- outline: var(--bdc-outline_width) solid var(--bdc_color);
35
- outline-offset: var(--bdc-outline_offset);
36
36
  border-radius: var(--accordion_radius, var(--bdc-outline_radius));
37
+ box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
37
38
  overflow: hidden;
38
39
  }
39
- .bds112Accordion-item {
40
+ .bds120Accordion-item {
40
41
  border-block-end: 1px solid var(--bds-color_bg--subtle);
41
42
  }
42
- .bds112Accordion-item:last-child {
43
+ .bds120Accordion-item:last-child {
43
44
  border-block-end: none;
44
45
  }
45
- .bds112Accordion-heading {
46
+ .bds120Accordion-heading {
46
47
  margin: 0;
47
48
  }
48
- .bds112Accordion-trigger {
49
+ .bds120Accordion-trigger {
49
50
  all: unset;
50
51
  display: flex;
51
52
  align-items: center;
@@ -60,44 +61,44 @@
60
61
  transition: var(--bds-animation_transition);
61
62
  box-sizing: border-box;
62
63
  }
63
- .bds112Accordion-trigger:disabled {
64
+ .bds120Accordion-trigger:disabled {
64
65
  opacity: 0.4;
65
66
  cursor: not-allowed;
66
67
  }
67
- .bds112Accordion-trigger:focus-visible {
68
+ .bds120Accordion-trigger:focus-visible {
68
69
  outline: var(--bds-outline_default);
69
70
  outline-offset: calc(var(--bds-outline_offset) * -1);
70
71
  border-radius: var(--bds-border_radius--xs);
71
72
  }
72
73
  @media (hover: hover) and (pointer: fine) {
73
- .bds112Accordion-trigger:not(:disabled):hover {
74
+ .bds120Accordion-trigger:not(:disabled):hover {
74
75
  background-color: var(--bds-color_bg--subtle);
75
76
  }
76
77
  }
77
- .bds112Accordion-triggerLabel {
78
+ .bds120Accordion-triggerLabel {
78
79
  flex: 1;
79
80
  text-align: start;
80
81
  }
81
- .bds112Accordion-chevron {
82
+ .bds120Accordion-chevron {
82
83
  inline-size: 1.25rem;
83
84
  block-size: 1.25rem;
84
85
  flex-shrink: 0;
85
86
  transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
86
87
  }
87
- .bds112Accordion-item.bds112Accordion---open .bds112Accordion-chevron {
88
+ .bds120Accordion-item.bds120Accordion---open .bds120Accordion-chevron {
88
89
  transform: rotate(180deg);
89
90
  }
90
- .bds112Accordion-panel {
91
+ .bds120Accordion-panel {
91
92
  overflow: hidden;
92
93
  }
93
- .bds112Accordion-panelContent {
94
+ .bds120Accordion-panelContent {
94
95
  padding: 0 var(--bds-space_m) var(--bds-space_m);
95
96
  color: var(--bds-color_on-bg);
96
97
  font-size: var(--bds-font_size--body);
97
98
  line-height: var(--bds-font_line-height--body);
98
99
  }
99
100
  @media (prefers-reduced-motion: reduce) {
100
- .bds112Accordion-chevron {
101
+ .bds120Accordion-chevron {
101
102
  transition: none;
102
103
  }
103
104
  }
@@ -105,7 +106,7 @@
105
106
 
106
107
  /* src/components/ui/Alert/Alert.module.css */
107
108
  @layer component {
108
- .bds112Alert-alert {
109
+ .bds120Alert-alert {
109
110
  display: flex;
110
111
  align-items: flex-start;
111
112
  gap: var(--bds-space_s);
@@ -117,43 +118,43 @@
117
118
  font-size: var(--bds-font_size--body);
118
119
  line-height: var(--bds-font_line-height--body);
119
120
  }
120
- .bds112Alert---variant_info {
121
+ .bds120Alert---variant_info {
121
122
  --alert_bg: var(--bds-color_blue--subtle);
122
123
  --alert_text: var(--bds-color_on-blue--subtle);
123
124
  --alert_border: var(--bds-color_blue);
124
125
  }
125
- .bds112Alert---variant_success {
126
+ .bds120Alert---variant_success {
126
127
  --alert_bg: var(--bds-color_success--subtle);
127
128
  --alert_text: var(--bds-color_on-success--subtle);
128
129
  --alert_border: var(--bds-color_success);
129
130
  }
130
- .bds112Alert---variant_warning {
131
+ .bds120Alert---variant_warning {
131
132
  --alert_bg: var(--bds-color_orange--subtle);
132
133
  --alert_text: var(--bds-color_on-orange--subtle);
133
134
  --alert_border: var(--bds-color_warning);
134
135
  }
135
- .bds112Alert---variant_error {
136
+ .bds120Alert---variant_error {
136
137
  --alert_bg: rgb(from var(--bds-color_error) r g b / 12%);
137
138
  --alert_text: var(--bds-color_on-bg);
138
139
  --alert_border: var(--bds-color_error);
139
140
  }
140
- .bds112Alert-icon {
141
+ .bds120Alert-icon {
141
142
  display: flex;
142
143
  align-items: center;
143
144
  flex-shrink: 0;
144
145
  margin-block-start: 0.1em;
145
146
  }
146
- .bds112Alert-content {
147
+ .bds120Alert-content {
147
148
  flex: 1;
148
149
  display: flex;
149
150
  flex-direction: column;
150
151
  gap: var(--bds-space_xxs);
151
152
  }
152
- .bds112Alert-title {
153
+ .bds120Alert-title {
153
154
  font-weight: var(--bds-font_weight--semibold);
154
155
  font-size: var(--bds-font_size--body);
155
156
  }
156
- .bds112Alert-dismiss {
157
+ .bds120Alert-dismiss {
157
158
  all: unset;
158
159
  display: flex;
159
160
  align-items: center;
@@ -165,19 +166,18 @@
165
166
  border: var(--alert_dismiss-border, none);
166
167
  border-radius: 50%;
167
168
  --bdc_color: currentcolor;
168
- outline: var(--bdc-outline_width) solid var(--bdc_color);
169
- outline-offset: var(--bdc-outline_offset);
169
+ box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
170
170
  }
171
- .bds112Alert-dismiss svg {
171
+ .bds120Alert-dismiss svg {
172
172
  width: 1rem;
173
173
  height: 1rem;
174
174
  }
175
- .bds112Alert-dismiss:focus-visible {
175
+ .bds120Alert-dismiss:focus-visible {
176
176
  outline: var(--bds-outline_default);
177
177
  outline-offset: var(--bds-outline_offset);
178
178
  }
179
179
  @media (hover: hover) and (pointer: fine) {
180
- .bds112Alert-dismiss:hover {
180
+ .bds120Alert-dismiss:hover {
181
181
  opacity: 0.7;
182
182
  }
183
183
  }
@@ -185,7 +185,7 @@
185
185
 
186
186
  /* src/components/ui/Avatar/Avatar.module.css */
187
187
  @layer component {
188
- .bds112Avatar-avatar {
188
+ .bds120Avatar-avatar {
189
189
  display: inline-flex;
190
190
  align-items: center;
191
191
  justify-content: center;
@@ -195,42 +195,42 @@
195
195
  overflow: hidden;
196
196
  flex-shrink: 0;
197
197
  }
198
- .bds112Avatar-avatar.bds112Avatar---fallback {
198
+ .bds120Avatar-avatar.bds120Avatar---fallback {
199
199
  background-color: var(--avatar_bg, var(--bds-color_blue));
200
200
  color: var(--avatar_text, var(--bds-color_on-blue));
201
201
  font-weight: var(--bds-font_weight--semibold);
202
202
  }
203
- .bds112Avatar-avatar.bds112Avatar---size_small {
203
+ .bds120Avatar-avatar.bds120Avatar---size_small {
204
204
  --avatar_size: 2em;
205
205
  }
206
- .bds112Avatar-avatar.bds112Avatar---size_medium {
206
+ .bds120Avatar-avatar.bds120Avatar---size_medium {
207
207
  --avatar_size: 3em;
208
208
  }
209
- .bds112Avatar-avatar.bds112Avatar---size_large {
209
+ .bds120Avatar-avatar.bds120Avatar---size_large {
210
210
  --avatar_size: 4.5em;
211
211
  }
212
- .bds112Avatar-image {
212
+ .bds120Avatar-image {
213
213
  width: 100%;
214
214
  height: 100%;
215
215
  object-fit: cover;
216
216
  display: block;
217
217
  }
218
- .bds112Avatar-initials {
218
+ .bds120Avatar-initials {
219
219
  line-height: 1;
220
220
  user-select: none;
221
221
  font-size: var(--bds-font_size--body);
222
222
  }
223
- .bds112Avatar-avatar.bds112Avatar---size_small .bds112Avatar-initials {
223
+ .bds120Avatar-avatar.bds120Avatar---size_small .bds120Avatar-initials {
224
224
  font-size: var(--bds-font_size--body--s);
225
225
  }
226
- .bds112Avatar-avatar.bds112Avatar---size_large .bds112Avatar-initials {
226
+ .bds120Avatar-avatar.bds120Avatar---size_large .bds120Avatar-initials {
227
227
  font-size: var(--bds-font_size--heading-3);
228
228
  }
229
229
  }
230
230
 
231
231
  /* src/components/ui/Badge/Badge.module.css */
232
232
  @layer component {
233
- .bds112Badge-badge {
233
+ .bds120Badge-badge {
234
234
  display: inline-flex;
235
235
  align-items: center;
236
236
  justify-content: center;
@@ -243,23 +243,23 @@
243
243
  background-color: var(--badge_bg, var(--bds-color_blue));
244
244
  color: var(--badge_text, var(--bds-color_on-blue));
245
245
  }
246
- .bds112Badge---variant_primary {
246
+ .bds120Badge---variant_primary {
247
247
  --badge_bg: var(--bds-color_interactive);
248
248
  --badge_text: var(--bds-color_on-interactive);
249
249
  }
250
- .bds112Badge---variant_secondary {
250
+ .bds120Badge---variant_secondary {
251
251
  --badge_bg: var(--bds-color_bg);
252
252
  --badge_text: var(--bds-color_on-bg);
253
253
  }
254
- .bds112Badge---variant_success {
254
+ .bds120Badge---variant_success {
255
255
  --badge_bg: var(--bds-color_success);
256
256
  --badge_text: var(--bds-color_on-success);
257
257
  }
258
- .bds112Badge---variant_error {
258
+ .bds120Badge---variant_error {
259
259
  --badge_bg: var(--bds-color_error);
260
260
  --badge_text: var(--bds-color_on-error);
261
261
  }
262
- .bds112Badge---variant_warning {
262
+ .bds120Badge---variant_warning {
263
263
  --badge_bg: var(--bds-color_warning);
264
264
  --badge_text: var(--bds-color_on-warning);
265
265
  }
@@ -267,10 +267,10 @@
267
267
 
268
268
  /* src/components/ui/Breadcrumb/Breadcrumb.module.css */
269
269
  @layer component {
270
- .bds112Breadcrumb-breadcrumb {
270
+ .bds120Breadcrumb-breadcrumb {
271
271
  font-size: var(--bds-font_size--body--s);
272
272
  }
273
- .bds112Breadcrumb-list {
273
+ .bds120Breadcrumb-list {
274
274
  display: flex;
275
275
  flex-wrap: wrap;
276
276
  align-items: center;
@@ -279,32 +279,32 @@
279
279
  margin: 0;
280
280
  padding: 0;
281
281
  }
282
- .bds112Breadcrumb-item {
282
+ .bds120Breadcrumb-item {
283
283
  display: flex;
284
284
  align-items: center;
285
285
  gap: var(--bds-space_xxs);
286
286
  }
287
- .bds112Breadcrumb-link {
287
+ .bds120Breadcrumb-link {
288
288
  color: var(--bds-color_interactive_on-bg);
289
289
  text-decoration: none;
290
290
  transition: var(--bds-animation_transition);
291
291
  }
292
- .bds112Breadcrumb-link:focus-visible {
292
+ .bds120Breadcrumb-link:focus-visible {
293
293
  outline: var(--bds-outline_default);
294
294
  outline-offset: var(--bds-outline_offset);
295
295
  border-radius: var(--bds-border_radius--xs);
296
296
  }
297
297
  @media (hover: hover) and (pointer: fine) {
298
- .bds112Breadcrumb-link:hover {
298
+ .bds120Breadcrumb-link:hover {
299
299
  text-decoration: underline;
300
300
  text-underline-offset: 0.2em;
301
301
  }
302
302
  }
303
- .bds112Breadcrumb-separator {
303
+ .bds120Breadcrumb-separator {
304
304
  color: var(--bds-color_on-bg--subtle);
305
305
  user-select: none;
306
306
  }
307
- .bds112Breadcrumb-current {
307
+ .bds120Breadcrumb-current {
308
308
  color: var(--bds-color_on-bg--subtle);
309
309
  font-weight: var(--bds-font_weight--semibold);
310
310
  }
@@ -312,12 +312,12 @@
312
312
 
313
313
  /* src/components/ui/Collapsible/Collapsible.module.css */
314
314
  @layer component {
315
- .bds112Collapsible-collapsible {
315
+ .bds120Collapsible-collapsible {
316
316
  border: var(--collapsible_border-width, 1px) solid var(--collapsible_border-color, var(--bds-color_bg--subtle));
317
317
  border-radius: var(--collapsible_border-radius, var(--bds-border_radius--m));
318
318
  overflow: hidden;
319
319
  }
320
- .bds112Collapsible-summary {
320
+ .bds120Collapsible-summary {
321
321
  list-style: none;
322
322
  display: flex;
323
323
  align-items: center;
@@ -332,25 +332,25 @@
332
332
  user-select: none;
333
333
  transition: var(--bds-animation_transition);
334
334
  }
335
- .bds112Collapsible-summary::-webkit-details-marker {
335
+ .bds120Collapsible-summary::-webkit-details-marker {
336
336
  display: none;
337
337
  }
338
- .bds112Collapsible-summary:focus-visible {
338
+ .bds120Collapsible-summary:focus-visible {
339
339
  outline: var(--bds-outline_default);
340
340
  outline-offset: calc(var(--bds-outline_offset) * -1);
341
341
  }
342
342
  @media (hover: hover) and (pointer: fine) {
343
- .bds112Collapsible-summary:hover {
343
+ .bds120Collapsible-summary:hover {
344
344
  background-color: var(--collapsible_bg--hover, var(--bds-color_bg--subtle));
345
345
  }
346
346
  }
347
- .bds112Collapsible-collapsible[open] > .bds112Collapsible-summary {
347
+ .bds120Collapsible-collapsible[open] > .bds120Collapsible-summary {
348
348
  border-block-end: var(--collapsible_border-width, 1px) solid var(--collapsible_border-color, var(--bds-color_bg--subtle));
349
349
  }
350
- .bds112Collapsible-summaryContent {
350
+ .bds120Collapsible-summaryContent {
351
351
  flex: 1;
352
352
  }
353
- .bds112Collapsible-icon {
353
+ .bds120Collapsible-icon {
354
354
  inline-size: 0.5rem;
355
355
  block-size: 0.5rem;
356
356
  border-inline-end: 2px solid currentcolor;
@@ -359,17 +359,17 @@
359
359
  flex-shrink: 0;
360
360
  transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
361
361
  }
362
- .bds112Collapsible-collapsible[open] > .bds112Collapsible-summary .bds112Collapsible-icon {
362
+ .bds120Collapsible-collapsible[open] > .bds120Collapsible-summary .bds120Collapsible-icon {
363
363
  transform: rotate(-135deg);
364
364
  }
365
- .bds112Collapsible-content {
365
+ .bds120Collapsible-content {
366
366
  padding: var(--bds-space_m);
367
367
  color: var(--collapsible_on-color, var(--bds-color_on-bg));
368
368
  font-size: var(--bds-font_size--body);
369
369
  line-height: var(--bds-font_line-height--body);
370
370
  }
371
371
  @media (prefers-reduced-motion: reduce) {
372
- .bds112Collapsible-icon {
372
+ .bds120Collapsible-icon {
373
373
  transition: none;
374
374
  }
375
375
  }
@@ -377,7 +377,7 @@
377
377
 
378
378
  /* src/components/ui/Calendar/Calendar.module.css */
379
379
  @layer component {
380
- .bds112Calendar-calendar {
380
+ .bds120Calendar-calendar {
381
381
  display: inline-flex;
382
382
  flex-direction: column;
383
383
  gap: var(--bds-space_s);
@@ -385,24 +385,22 @@
385
385
  border: var(--calendar_border, none);
386
386
  --bdc_color: var(--bds-color_bg--subtle);
387
387
  --bdc-outline_radius: var(--bds-border_radius--m);
388
- outline: var(--bdc-outline_width) solid var(--bdc_color);
389
- outline-offset: var(--bdc-outline_offset);
390
388
  border-radius: var(--calendar_radius, var(--bdc-outline_radius));
391
389
  padding: var(--bds-space_m);
392
- box-shadow: var(--calendar_shadow, var(--bds-shadow_s));
390
+ box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--calendar_shadow, var(--bds-shadow_s));
393
391
  inline-size: 20rem;
394
392
  }
395
- .bds112Calendar-header {
393
+ .bds120Calendar-header {
396
394
  display: flex;
397
395
  align-items: center;
398
396
  justify-content: space-between;
399
397
  }
400
- .bds112Calendar-monthYear {
398
+ .bds120Calendar-monthYear {
401
399
  font-size: var(--bds-font_size--body);
402
400
  font-weight: var(--bds-font_weight--semibold);
403
401
  color: var(--bds-color_on-bg);
404
402
  }
405
- .bds112Calendar-navBtn {
403
+ .bds120Calendar-navBtn {
406
404
  all: unset;
407
405
  display: flex;
408
406
  align-items: center;
@@ -414,35 +412,35 @@
414
412
  color: var(--bds-color_on-bg);
415
413
  transition: var(--bds-animation_transition);
416
414
  }
417
- .bds112Calendar-navBtn svg {
415
+ .bds120Calendar-navBtn svg {
418
416
  inline-size: 1rem;
419
417
  block-size: 1rem;
420
418
  }
421
- .bds112Calendar-navBtn:focus-visible {
419
+ .bds120Calendar-navBtn:focus-visible {
422
420
  outline: var(--bds-outline_default);
423
421
  outline-offset: var(--bds-outline_offset);
424
422
  }
425
423
  @media (hover: hover) and (pointer: fine) {
426
- .bds112Calendar-navBtn:hover {
424
+ .bds120Calendar-navBtn:hover {
427
425
  background-color: var(--bds-color_bg--subtle);
428
426
  }
429
427
  }
430
- .bds112Calendar-grid {
428
+ .bds120Calendar-grid {
431
429
  border-collapse: collapse;
432
430
  inline-size: 100%;
433
431
  table-layout: fixed;
434
432
  }
435
- .bds112Calendar-weekday {
433
+ .bds120Calendar-weekday {
436
434
  font-size: var(--bds-font_size--body--s);
437
435
  font-weight: var(--bds-font_weight--semibold);
438
436
  color: var(--bds-color_on-bg);
439
437
  text-align: center;
440
438
  padding-block-end: var(--bds-space_xs);
441
439
  }
442
- .bds112Calendar-empty {
440
+ .bds120Calendar-empty {
443
441
  padding: 0;
444
442
  }
445
- .bds112Calendar-day {
443
+ .bds120Calendar-day {
446
444
  all: unset;
447
445
  display: flex;
448
446
  align-items: center;
@@ -456,33 +454,32 @@
456
454
  transition: var(--bds-animation_transition);
457
455
  box-sizing: border-box;
458
456
  }
459
- .bds112Calendar-day:focus-visible {
457
+ .bds120Calendar-day:focus-visible {
460
458
  outline: var(--bds-outline_default);
461
459
  outline-offset: var(--bds-outline_offset);
462
460
  }
463
461
  @media (hover: hover) and (pointer: fine) {
464
- .bds112Calendar-day:not(.bds112Calendar-disabled, .bds112Calendar-selected):hover {
462
+ .bds120Calendar-day:not(.bds120Calendar-disabled, .bds120Calendar-selected):hover {
465
463
  background-color: var(--bds-color_bg--subtle);
466
464
  }
467
465
  }
468
- .bds112Calendar-today {
466
+ .bds120Calendar-today {
469
467
  font-weight: var(--bds-font_weight--semibold);
470
468
  --bdc_color: var(--bds-color_interactive);
471
469
  border: var(--calendar_today-border, none);
472
- outline: var(--bdc-outline_width) solid var(--bdc_color);
473
- outline-offset: var(--bdc-outline_offset);
470
+ box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
474
471
  }
475
- .bds112Calendar-selected {
472
+ .bds120Calendar-selected {
476
473
  background-color: var(--bds-color_interactive);
477
474
  color: var(--bds-color_on-interactive);
478
475
  font-weight: var(--bds-font_weight--semibold);
479
476
  }
480
- .bds112Calendar-disabled {
477
+ .bds120Calendar-disabled {
481
478
  opacity: 0.35;
482
479
  cursor: not-allowed;
483
480
  }
484
481
  @media (prefers-reduced-motion: reduce) {
485
- .bds112Calendar-day {
482
+ .bds120Calendar-day {
486
483
  transition: none;
487
484
  }
488
485
  }
@@ -490,13 +487,13 @@
490
487
 
491
488
  /* src/components/ui/Carousel/Carousel.module.css */
492
489
  @layer component {
493
- .bds112Carousel-carousel {
490
+ .bds120Carousel-carousel {
494
491
  position: relative;
495
492
  display: flex;
496
493
  align-items: center;
497
494
  gap: var(--bds-space_xs);
498
495
  }
499
- .bds112Carousel-track {
496
+ .bds120Carousel-track {
500
497
  display: flex;
501
498
  gap: var(--bds-space_m);
502
499
  overflow-inline: auto;
@@ -505,14 +502,14 @@
505
502
  flex: 1;
506
503
  scroll-behavior: smooth;
507
504
  }
508
- .bds112Carousel-track::-webkit-scrollbar {
505
+ .bds120Carousel-track::-webkit-scrollbar {
509
506
  display: none;
510
507
  }
511
- .bds112Carousel-slide {
508
+ .bds120Carousel-slide {
512
509
  scroll-snap-align: start;
513
510
  flex-shrink: 0;
514
511
  }
515
- .bds112Carousel-navBtn {
512
+ .bds120Carousel-navBtn {
516
513
  all: unset;
517
514
  display: flex;
518
515
  align-items: center;
@@ -524,28 +521,26 @@
524
521
  color: var(--bds-color_on-bg);
525
522
  --bdc_color: var(--bds-color_on-bg);
526
523
  border: none;
527
- outline: var(--bdc-outline_width) solid var(--bdc_color);
528
- outline-offset: var(--bdc-outline_offset);
524
+ box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--bds-shadow_s);
529
525
  cursor: pointer;
530
526
  flex-shrink: 0;
531
527
  transition: var(--bds-animation_transition);
532
- box-shadow: var(--bds-shadow_s);
533
528
  }
534
- .bds112Carousel-navBtn svg {
529
+ .bds120Carousel-navBtn svg {
535
530
  inline-size: 1.25rem;
536
531
  block-size: 1.25rem;
537
532
  }
538
- .bds112Carousel-navBtn:focus-visible {
533
+ .bds120Carousel-navBtn:focus-visible {
539
534
  outline: var(--bds-outline_default);
540
535
  outline-offset: var(--bds-outline_offset);
541
536
  }
542
537
  @media (hover: hover) and (pointer: fine) {
543
- .bds112Carousel-navBtn:hover {
538
+ .bds120Carousel-navBtn:hover {
544
539
  background-color: var(--bds-color_bg--subtle);
545
540
  }
546
541
  }
547
542
  @media (prefers-reduced-motion: reduce) {
548
- .bds112Carousel-track {
543
+ .bds120Carousel-track {
549
544
  scroll-behavior: auto;
550
545
  }
551
546
  }
@@ -553,7 +548,7 @@
553
548
 
554
549
  /* src/components/ui/DescriptionList/DescriptionList.module.css */
555
550
  @layer component {
556
- .bds112DescriptionList-list {
551
+ .bds120DescriptionList-list {
557
552
  display: flex;
558
553
  flex-direction: column;
559
554
  gap: var(--bds-space_s);
@@ -562,61 +557,61 @@
562
557
  font-size: var(--bds-font_size--body);
563
558
  color: var(--bds-color_on-bg);
564
559
  }
565
- .bds112DescriptionList-group {
560
+ .bds120DescriptionList-group {
566
561
  display: flex;
567
562
  flex-direction: column;
568
563
  gap: var(--bds-space_xxs);
569
564
  }
570
- .bds112DescriptionList-term {
565
+ .bds120DescriptionList-term {
571
566
  font-weight: var(--bds-font_weight--semibold);
572
567
  color: var(--bds-color_on-bg);
573
568
  }
574
- .bds112DescriptionList-details {
569
+ .bds120DescriptionList-details {
575
570
  margin: 0;
576
571
  color: var(--bds-color_on-bg);
577
572
  }
578
- .bds112DescriptionList---layout_inline .bds112DescriptionList-group {
573
+ .bds120DescriptionList---layout_inline .bds120DescriptionList-group {
579
574
  display: grid;
580
575
  grid-template-columns: minmax(8rem, 1fr) 2fr;
581
576
  gap: var(--bds-space_xs);
582
577
  align-items: baseline;
583
578
  }
584
- .bds112DescriptionList---layout_inline .bds112DescriptionList-term {
579
+ .bds120DescriptionList---layout_inline .bds120DescriptionList-term {
585
580
  grid-column: 1;
586
581
  }
587
- .bds112DescriptionList---layout_inline .bds112DescriptionList-details {
582
+ .bds120DescriptionList---layout_inline .bds120DescriptionList-details {
588
583
  grid-column: 2;
589
584
  }
590
585
  }
591
586
 
592
587
  /* src/components/ui/Link/Link.module.css */
593
588
  @layer component {
594
- .bds112Link-link {
589
+ .bds120Link-link {
595
590
  color: var(--link_color, var(--bds-color_interactive_on-bg));
596
591
  text-decoration: underline;
597
592
  text-underline-offset: 0.2em;
598
593
  transition: var(--bds-animation_transition);
599
594
  cursor: pointer;
600
595
  }
601
- .bds112Link-link:focus-visible {
596
+ .bds120Link-link:focus-visible {
602
597
  outline: var(--bds-outline_default);
603
598
  outline-offset: var(--bds-outline_offset);
604
599
  border-radius: var(--bds-border_radius--xs);
605
600
  }
606
601
  @media (hover: hover) and (pointer: fine) {
607
- .bds112Link-link:hover {
602
+ .bds120Link-link:hover {
608
603
  --link_color: var(--link_color-hover, var(--bds-color_blue--strong));
609
604
  }
610
605
  }
611
- .bds112Link---variant_default {
606
+ .bds120Link---variant_default {
612
607
  --link_color: var(--bds-color_interactive_on-bg);
613
608
  --link_color-hover: var(--bds-color_blue--strong);
614
609
  }
615
- .bds112Link---variant_subtle {
610
+ .bds120Link---variant_subtle {
616
611
  --link_color: var(--bds-color_on-bg);
617
612
  --link_color-hover: var(--bds-color_interactive_on-bg);
618
613
  }
619
- .bds112Link---variant_standalone {
614
+ .bds120Link---variant_standalone {
620
615
  --link_color: var(--bds-color_interactive_on-bg);
621
616
  --link_color-hover: var(--bds-color_blue--strong);
622
617
  display: inline-flex;
@@ -626,12 +621,12 @@
626
621
  text-decoration: none;
627
622
  }
628
623
  @media (hover: hover) and (pointer: fine) {
629
- .bds112Link---variant_standalone:hover {
624
+ .bds120Link---variant_standalone:hover {
630
625
  text-decoration: underline;
631
626
  text-underline-offset: 0.2em;
632
627
  }
633
628
  }
634
- .bds112Link-externalLabel {
629
+ .bds120Link-externalLabel {
635
630
  position: absolute;
636
631
  inline-size: 1px;
637
632
  block-size: 1px;
@@ -646,12 +641,12 @@
646
641
 
647
642
  /* src/components/ui/Loading/Loading.module.css */
648
643
  @layer component {
649
- .bds112Loading-loading {
644
+ .bds120Loading-loading {
650
645
  display: flex;
651
646
  justify-content: center;
652
647
  align-items: center;
653
648
  }
654
- .bds112Loading-spinner {
649
+ .bds120Loading-spinner {
655
650
  inline-size: 2.5em;
656
651
  block-size: 2.5em;
657
652
  border: 4px solid var(--bds-color_bg);
@@ -659,12 +654,12 @@
659
654
  border-radius: 50%;
660
655
  animation: spin 1s linear infinite;
661
656
  }
662
- .bds112Loading---size_small .bds112Loading-spinner {
657
+ .bds120Loading---size_small .bds120Loading-spinner {
663
658
  inline-size: 1.5em;
664
659
  block-size: 1.5em;
665
660
  border-width: 2px;
666
661
  }
667
- .bds112Loading---size_large .bds112Loading-spinner {
662
+ .bds120Loading---size_large .bds120Loading-spinner {
668
663
  inline-size: 4em;
669
664
  block-size: 4em;
670
665
  border-width: 6px;
@@ -679,14 +674,14 @@
679
674
  }
680
675
  }
681
676
  @media (prefers-reduced-motion: reduce) {
682
- .bds112Loading-spinner {
677
+ .bds120Loading-spinner {
683
678
  animation: none;
684
679
  }
685
680
  }
686
681
 
687
682
  /* src/components/ui/NotificationBanner/NotificationBanner.module.css */
688
683
  @layer component {
689
- .bds112NotificationBanner-banner {
684
+ .bds120NotificationBanner-banner {
690
685
  display: flex;
691
686
  align-items: center;
692
687
  gap: var(--bds-space_m);
@@ -698,33 +693,33 @@
698
693
  line-height: var(--bds-font_line-height--body);
699
694
  inline-size: 100%;
700
695
  }
701
- .bds112NotificationBanner---variant_info {
696
+ .bds120NotificationBanner---variant_info {
702
697
  --banner_bg: var(--bds-color_blue--subtle);
703
698
  --banner_text: var(--bds-color_on-blue--subtle);
704
699
  --banner_border: var(--bds-color_blue);
705
700
  }
706
- .bds112NotificationBanner---variant_success {
701
+ .bds120NotificationBanner---variant_success {
707
702
  --banner_bg: var(--bds-color_success--subtle);
708
703
  --banner_text: var(--bds-color_on-success--subtle);
709
704
  --banner_border: var(--bds-color_success);
710
705
  }
711
- .bds112NotificationBanner---variant_warning {
706
+ .bds120NotificationBanner---variant_warning {
712
707
  --banner_bg: var(--bds-color_orange--subtle);
713
708
  --banner_text: var(--bds-color_on-orange--subtle);
714
709
  --banner_border: var(--bds-color_warning);
715
710
  }
716
- .bds112NotificationBanner---variant_error {
711
+ .bds120NotificationBanner---variant_error {
717
712
  --banner_bg: rgb(from var(--bds-color_error) r g b / 12%);
718
713
  --banner_text: var(--bds-color_on-bg);
719
714
  --banner_border: var(--bds-color_error);
720
715
  }
721
- .bds112NotificationBanner-content {
716
+ .bds120NotificationBanner-content {
722
717
  flex: 1;
723
718
  }
724
- .bds112NotificationBanner-action {
719
+ .bds120NotificationBanner-action {
725
720
  flex-shrink: 0;
726
721
  }
727
- .bds112NotificationBanner-dismiss {
722
+ .bds120NotificationBanner-dismiss {
728
723
  all: unset;
729
724
  display: flex;
730
725
  align-items: center;
@@ -736,19 +731,18 @@
736
731
  border: var(--banner_dismiss-border, none);
737
732
  transition: var(--bds-animation_transition);
738
733
  --bdc_color: currentcolor;
739
- outline: var(--bdc-outline_width) solid var(--bdc_color);
740
- outline-offset: var(--bdc-outline_offset);
734
+ box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
741
735
  }
742
- .bds112NotificationBanner-dismiss svg {
736
+ .bds120NotificationBanner-dismiss svg {
743
737
  inline-size: 1rem;
744
738
  block-size: 1rem;
745
739
  }
746
- .bds112NotificationBanner-dismiss:focus-visible {
740
+ .bds120NotificationBanner-dismiss:focus-visible {
747
741
  outline: var(--bds-outline_default);
748
742
  outline-offset: var(--bds-outline_offset);
749
743
  }
750
744
  @media (hover: hover) and (pointer: fine) {
751
- .bds112NotificationBanner-dismiss:hover {
745
+ .bds120NotificationBanner-dismiss:hover {
752
746
  opacity: 0.7;
753
747
  }
754
748
  }
@@ -756,11 +750,11 @@
756
750
 
757
751
  /* src/components/ui/Pagination/Pagination.module.css */
758
752
  @layer component {
759
- .bds112Pagination-pagination {
753
+ .bds120Pagination-pagination {
760
754
  display: flex;
761
755
  justify-content: center;
762
756
  }
763
- .bds112Pagination-list {
757
+ .bds120Pagination-list {
764
758
  display: flex;
765
759
  align-items: center;
766
760
  gap: var(--bds-space_xxs);
@@ -768,7 +762,7 @@
768
762
  margin: 0;
769
763
  padding: 0;
770
764
  }
771
- .bds112Pagination-button {
765
+ .bds120Pagination-button {
772
766
  all: unset;
773
767
  display: inline-flex;
774
768
  align-items: center;
@@ -780,8 +774,7 @@
780
774
  background-color: var(--btn_bg, transparent);
781
775
  --bdc_color: var(--btn_border, var(--bds-color_bg--subtle));
782
776
  border: none;
783
- outline: var(--bdc-outline_width) solid var(--bdc_color);
784
- outline-offset: var(--bdc-outline_offset);
777
+ box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
785
778
  color: var(--btn_color, var(--bds-color_on-bg));
786
779
  font-family: var(--bds-font_family--body);
787
780
  font-size: var(--bds-font_size--body);
@@ -790,30 +783,30 @@
790
783
  transition: var(--bds-animation_transition);
791
784
  box-sizing: border-box;
792
785
  }
793
- .bds112Pagination-button:disabled {
786
+ .bds120Pagination-button:disabled {
794
787
  opacity: 0.4;
795
788
  cursor: not-allowed;
796
789
  }
797
- .bds112Pagination-button:focus-visible {
790
+ .bds120Pagination-button:focus-visible {
798
791
  outline: var(--bds-outline_default);
799
792
  outline-offset: var(--bds-outline_offset);
800
793
  }
801
794
  @media (hover: hover) and (pointer: fine) {
802
- .bds112Pagination-button:not(:disabled, .bds112Pagination---active):hover {
795
+ .bds120Pagination-button:not(:disabled, .bds120Pagination---active):hover {
803
796
  --btn_bg: var(--bds-color_bg--subtle);
804
797
  --btn_color: var(--bds-color_interactive_on-bg);
805
798
  }
806
799
  }
807
- .bds112Pagination-button.bds112Pagination---active {
800
+ .bds120Pagination-button.bds120Pagination---active {
808
801
  --btn_bg: var(--bds-color_interactive);
809
802
  --btn_color: var(--bds-color_on-interactive);
810
803
  --btn_border: var(--bds-color_interactive);
811
804
  }
812
- .bds112Pagination-button.bds112Pagination---nav svg {
805
+ .bds120Pagination-button.bds120Pagination---nav svg {
813
806
  inline-size: 1rem;
814
807
  block-size: 1rem;
815
808
  }
816
- .bds112Pagination-ellipsis {
809
+ .bds120Pagination-ellipsis {
817
810
  display: inline-flex;
818
811
  align-items: center;
819
812
  justify-content: center;
@@ -827,46 +820,46 @@
827
820
 
828
821
  /* src/components/ui/Progress/Progress.module.css */
829
822
  @layer component {
830
- .bds112Progress-container {
823
+ .bds120Progress-container {
831
824
  display: flex;
832
825
  flex-direction: column;
833
826
  gap: var(--bds-space_xxs);
834
827
  inline-size: 100%;
835
828
  }
836
- .bds112Progress-labelRow {
829
+ .bds120Progress-labelRow {
837
830
  display: flex;
838
831
  justify-content: space-between;
839
832
  align-items: baseline;
840
833
  font-size: var(--bds-font_size--body--s);
841
834
  color: var(--bds-color_on-bg);
842
835
  }
843
- .bds112Progress-value {
836
+ .bds120Progress-value {
844
837
  font-variant-numeric: tabular-nums;
845
838
  }
846
- .bds112Progress-track {
839
+ .bds120Progress-track {
847
840
  inline-size: 100%;
848
841
  block-size: var(--progress_height, var(--bds-space_xs));
849
842
  background-color: var(--bds-color_bg--subtle);
850
843
  border-radius: 999px;
851
844
  overflow: hidden;
852
845
  }
853
- .bds112Progress-track.bds112Progress---size_small {
846
+ .bds120Progress-track.bds120Progress---size_small {
854
847
  --progress_height: var(--bds-space_xxs);
855
848
  }
856
- .bds112Progress-track.bds112Progress---size_medium {
849
+ .bds120Progress-track.bds120Progress---size_medium {
857
850
  --progress_height: var(--bds-space_xs);
858
851
  }
859
- .bds112Progress-track.bds112Progress---size_large {
852
+ .bds120Progress-track.bds120Progress---size_large {
860
853
  --progress_height: var(--bds-space_s);
861
854
  }
862
- .bds112Progress-fill {
855
+ .bds120Progress-fill {
863
856
  block-size: 100%;
864
857
  background-color: var(--progress_color-active, var(--bdc-color_active));
865
858
  border-radius: 999px;
866
859
  transition: inline-size var(--bds-animation_transition-duration) var(--bds-animation_easing);
867
860
  }
868
861
  @media (prefers-reduced-motion: reduce) {
869
- .bds112Progress-fill {
862
+ .bds120Progress-fill {
870
863
  transition: none;
871
864
  }
872
865
  }
@@ -874,23 +867,23 @@
874
867
 
875
868
  /* src/components/ui/ProgressCircle/ProgressCircle.module.css */
876
869
  @layer component {
877
- .bds112ProgressCircle-wrapper {
870
+ .bds120ProgressCircle-wrapper {
878
871
  position: relative;
879
872
  display: inline-flex;
880
873
  align-items: center;
881
874
  justify-content: center;
882
875
  }
883
- .bds112ProgressCircle-svg {
876
+ .bds120ProgressCircle-svg {
884
877
  display: block;
885
878
  }
886
- .bds112ProgressCircle-track {
879
+ .bds120ProgressCircle-track {
887
880
  stroke: var(--bds-color_bg--subtle);
888
881
  }
889
- .bds112ProgressCircle-fill {
882
+ .bds120ProgressCircle-fill {
890
883
  stroke: var(--progressCircle_color-active, var(--bdc-color_active));
891
884
  transition: stroke-dashoffset var(--bds-animation_transition-duration) var(--bds-animation_easing);
892
885
  }
893
- .bds112ProgressCircle-value {
886
+ .bds120ProgressCircle-value {
894
887
  position: absolute;
895
888
  font-size: var(--bds-font_size--body--s);
896
889
  font-weight: var(--bds-font_weight--semibold);
@@ -898,17 +891,17 @@
898
891
  color: var(--bds-color_on-bg);
899
892
  line-height: 1;
900
893
  }
901
- .bds112ProgressCircle---size_small .bds112ProgressCircle-value {
894
+ .bds120ProgressCircle---size_small .bds120ProgressCircle-value {
902
895
  font-size: 0.5rem;
903
896
  }
904
- .bds112ProgressCircle---size_medium .bds112ProgressCircle-value {
897
+ .bds120ProgressCircle---size_medium .bds120ProgressCircle-value {
905
898
  font-size: var(--bds-font_size--body--s);
906
899
  }
907
- .bds112ProgressCircle---size_large .bds112ProgressCircle-value {
900
+ .bds120ProgressCircle---size_large .bds120ProgressCircle-value {
908
901
  font-size: var(--bds-font_size--body);
909
902
  }
910
903
  @media (prefers-reduced-motion: reduce) {
911
- .bds112ProgressCircle-fill {
904
+ .bds120ProgressCircle-fill {
912
905
  transition: none;
913
906
  }
914
907
  }
@@ -916,16 +909,16 @@
916
909
 
917
910
  /* src/components/ui/Separator/Separator.module.css */
918
911
  @layer component {
919
- .bds112Separator-separator {
912
+ .bds120Separator-separator {
920
913
  border: none;
921
914
  background-color: var(--separator_color, var(--bds-color_on-bg));
922
915
  }
923
- .bds112Separator-separator.bds112Separator---horizontal {
916
+ .bds120Separator-separator.bds120Separator---horizontal {
924
917
  display: block;
925
918
  inline-size: 100%;
926
919
  block-size: var(--separator_thickness, 1px);
927
920
  }
928
- .bds112Separator-separator.bds112Separator---vertical {
921
+ .bds120Separator-separator.bds120Separator---vertical {
929
922
  display: inline-block;
930
923
  inline-size: var(--separator_thickness, 1px);
931
924
  align-self: stretch;
@@ -934,7 +927,7 @@
934
927
 
935
928
  /* src/components/ui/Skeleton/Skeleton.module.css */
936
929
  @layer component {
937
- .bds112Skeleton-skeleton {
930
+ .bds120Skeleton-skeleton {
938
931
  background:
939
932
  linear-gradient(
940
933
  90deg,
@@ -958,7 +951,7 @@
958
951
 
959
952
  /* src/components/ui/SkipLink/SkipLink.module.css */
960
953
  @layer component {
961
- .bds112SkipLink-skipLink {
954
+ .bds120SkipLink-skipLink {
962
955
  position: absolute;
963
956
  inset-block-start: var(--bds-space_s);
964
957
  inset-inline-start: var(--bds-space_s);
@@ -972,18 +965,17 @@
972
965
  text-decoration: none;
973
966
  --bdc_color: var(--color_focus, var(--bds-color_interactive));
974
967
  border: var(--skip-link_border, none);
975
- outline: var(--bdc-outline_width) solid var(--bdc_color);
976
- outline-offset: var(--bdc-outline_offset);
968
+ box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
977
969
  transform: translateY(-200%);
978
970
  transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
979
971
  }
980
- .bds112SkipLink-skipLink:focus-visible {
972
+ .bds120SkipLink-skipLink:focus-visible {
981
973
  transform: translateY(0);
982
974
  outline: var(--bds-outline_default);
983
975
  outline-offset: var(--bds-outline_offset);
984
976
  }
985
977
  @media (prefers-reduced-motion: reduce) {
986
- .bds112SkipLink-skipLink {
978
+ .bds120SkipLink-skipLink {
987
979
  transition: none;
988
980
  }
989
981
  }
@@ -991,33 +983,32 @@
991
983
 
992
984
  /* src/components/ui/Table/Table.module.css */
993
985
  @layer component {
994
- .bds112Table-wrapper {
986
+ .bds120Table-wrapper {
995
987
  inline-size: 100%;
996
988
  overflow-inline: auto;
997
989
  border: var(--table_border, none);
998
990
  --bdc_color: var(--bds-color_bg--subtle);
999
991
  --bdc-outline_radius: var(--bds-border_radius--s);
1000
- outline: var(--bdc-outline_width) solid var(--bdc_color);
1001
- outline-offset: var(--bdc-outline_offset);
1002
992
  border-radius: var(--table_radius, var(--bdc-outline_radius));
993
+ box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
1003
994
  }
1004
- .bds112Table-table {
995
+ .bds120Table-table {
1005
996
  inline-size: 100%;
1006
997
  border-collapse: collapse;
1007
998
  font-size: var(--bds-font_size--body);
1008
999
  font-family: var(--bds-font_family--body);
1009
1000
  }
1010
- .bds112Table-caption {
1001
+ .bds120Table-caption {
1011
1002
  caption-side: top;
1012
1003
  text-align: start;
1013
1004
  padding: var(--bds-space_s) var(--bds-space_m);
1014
1005
  font-weight: var(--bds-font_weight--semibold);
1015
1006
  color: var(--bds-color_on-bg);
1016
1007
  }
1017
- .bds112Table-thead {
1008
+ .bds120Table-thead {
1018
1009
  background-color: var(--bds-color_bg--subtle);
1019
1010
  }
1020
- .bds112Table-th {
1011
+ .bds120Table-th {
1021
1012
  padding: var(--bds-space_s) var(--bds-space_m);
1022
1013
  text-align: start;
1023
1014
  font-weight: var(--bds-font_weight--semibold);
@@ -1026,10 +1017,10 @@
1026
1017
  white-space: nowrap;
1027
1018
  border-block-end: 1px solid var(--bds-color_bg--subtle);
1028
1019
  }
1029
- .bds112Table-th.bds112Table---sortable {
1020
+ .bds120Table-th.bds120Table---sortable {
1030
1021
  padding: 0;
1031
1022
  }
1032
- .bds112Table-sortButton {
1023
+ .bds120Table-sortButton {
1033
1024
  all: unset;
1034
1025
  display: flex;
1035
1026
  align-items: center;
@@ -1043,47 +1034,47 @@
1043
1034
  transition: var(--bds-animation_transition);
1044
1035
  box-sizing: border-box;
1045
1036
  }
1046
- .bds112Table-sortButton:focus-visible {
1037
+ .bds120Table-sortButton:focus-visible {
1047
1038
  outline: var(--bds-outline_default);
1048
1039
  outline-offset: calc(var(--bds-outline_offset) * -1);
1049
1040
  }
1050
1041
  @media (hover: hover) and (pointer: fine) {
1051
- .bds112Table-sortButton:hover {
1042
+ .bds120Table-sortButton:hover {
1052
1043
  color: var(--bds-color_on-bg);
1053
1044
  }
1054
1045
  }
1055
- .bds112Table-sortIcon {
1046
+ .bds120Table-sortIcon {
1056
1047
  inline-size: 1rem;
1057
1048
  block-size: 1rem;
1058
1049
  opacity: 0.4;
1059
1050
  transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing), opacity var(--bds-animation_transition-duration) var(--bds-animation_easing);
1060
1051
  }
1061
- .bds112Table-sortIcon.bds112Table---sort-active {
1052
+ .bds120Table-sortIcon.bds120Table---sort-active {
1062
1053
  opacity: 1;
1063
1054
  color: var(--bds-color_interactive);
1064
1055
  }
1065
- .bds112Table-sortIcon.bds112Table---sort-desc {
1056
+ .bds120Table-sortIcon.bds120Table---sort-desc {
1066
1057
  transform: rotate(180deg);
1067
1058
  }
1068
- .bds112Table-tbody .bds112Table-tr {
1059
+ .bds120Table-tbody .bds120Table-tr {
1069
1060
  border-block-end: 1px solid var(--bds-color_bg--subtle);
1070
1061
  transition: var(--bds-animation_transition);
1071
1062
  }
1072
- .bds112Table-tbody .bds112Table-tr:last-child {
1063
+ .bds120Table-tbody .bds120Table-tr:last-child {
1073
1064
  border-block-end: none;
1074
1065
  }
1075
1066
  @media (hover: hover) and (pointer: fine) {
1076
- .bds112Table-tbody .bds112Table-tr:hover {
1067
+ .bds120Table-tbody .bds120Table-tr:hover {
1077
1068
  background-color: var(--bds-color_bg--subtle);
1078
1069
  }
1079
1070
  }
1080
- .bds112Table-td {
1071
+ .bds120Table-td {
1081
1072
  padding: var(--bds-space_s) var(--bds-space_m);
1082
1073
  color: var(--bds-color_on-bg);
1083
1074
  vertical-align: middle;
1084
1075
  }
1085
1076
  @media (prefers-reduced-motion: reduce) {
1086
- .bds112Table-sortIcon {
1077
+ .bds120Table-sortIcon {
1087
1078
  transition: none;
1088
1079
  }
1089
1080
  }
@@ -1091,16 +1082,16 @@
1091
1082
 
1092
1083
  /* src/components/ui/Tabs/Tabs.module.css */
1093
1084
  @layer component {
1094
- .bds112Tabs-tabs {
1085
+ .bds120Tabs-tabs {
1095
1086
  display: flex;
1096
1087
  flex-direction: column;
1097
1088
  }
1098
- .bds112Tabs-tabList {
1089
+ .bds120Tabs-tabList {
1099
1090
  display: flex;
1100
1091
  border-block-end: 1px solid var(--bds-color_bg--subtle);
1101
1092
  gap: var(--bds-space_xxs);
1102
1093
  }
1103
- .bds112Tabs-tab {
1094
+ .bds120Tabs-tab {
1104
1095
  all: unset;
1105
1096
  display: inline-flex;
1106
1097
  align-items: center;
@@ -1114,28 +1105,28 @@
1114
1105
  cursor: pointer;
1115
1106
  transition: var(--bds-animation_transition);
1116
1107
  }
1117
- .bds112Tabs-tab.bds112Tabs---active {
1108
+ .bds120Tabs-tab.bds120Tabs---active {
1118
1109
  --tab_color: var(--bds-color_interactive_on-bg);
1119
1110
  --tab_border-color: var(--bds-color_interactive);
1120
1111
  }
1121
- .bds112Tabs-tab:disabled {
1112
+ .bds120Tabs-tab:disabled {
1122
1113
  opacity: 0.4;
1123
1114
  cursor: not-allowed;
1124
1115
  }
1125
- .bds112Tabs-tab:focus-visible {
1116
+ .bds120Tabs-tab:focus-visible {
1126
1117
  outline: var(--bds-outline_default);
1127
1118
  outline-offset: var(--bds-outline_offset);
1128
1119
  border-radius: var(--bds-border_radius--xs);
1129
1120
  }
1130
1121
  @media (hover: hover) and (pointer: fine) {
1131
- .bds112Tabs-tab:not(:disabled, .bds112Tabs---active):hover {
1122
+ .bds120Tabs-tab:not(:disabled, .bds120Tabs---active):hover {
1132
1123
  --tab_color: var(--bds-color_interactive_on-bg);
1133
1124
  }
1134
1125
  }
1135
- .bds112Tabs-panel {
1126
+ .bds120Tabs-panel {
1136
1127
  padding-block-start: var(--bds-space_m);
1137
1128
  }
1138
- .bds112Tabs-panel:focus-visible {
1129
+ .bds120Tabs-panel:focus-visible {
1139
1130
  outline: var(--bds-outline_default);
1140
1131
  outline-offset: var(--bds-outline_offset);
1141
1132
  }
@@ -1143,12 +1134,12 @@
1143
1134
 
1144
1135
  /* src/components/ui/Tooltip/Tooltip.module.css */
1145
1136
  @layer component {
1146
- .bds112Tooltip-wrapper {
1137
+ .bds120Tooltip-wrapper {
1147
1138
  position: relative;
1148
1139
  display: inline-flex;
1149
1140
  align-items: center;
1150
1141
  }
1151
- .bds112Tooltip-tooltip {
1142
+ .bds120Tooltip-tooltip {
1152
1143
  position: absolute;
1153
1144
  z-index: var(--bds-z-index_popover);
1154
1145
  padding: var(--bds-space_xxs) var(--bds-space_xs);
@@ -1163,33 +1154,33 @@
1163
1154
  opacity: 0;
1164
1155
  transition: opacity var(--bds-animation_transition-duration) var(--bds-animation_easing);
1165
1156
  }
1166
- .bds112Tooltip-wrapper:hover .bds112Tooltip-tooltip,
1167
- .bds112Tooltip-wrapper:focus-within .bds112Tooltip-tooltip {
1157
+ .bds120Tooltip-wrapper:hover .bds120Tooltip-tooltip,
1158
+ .bds120Tooltip-wrapper:focus-within .bds120Tooltip-tooltip {
1168
1159
  visibility: visible;
1169
1160
  opacity: 1;
1170
1161
  }
1171
- .bds112Tooltip---placement_top {
1162
+ .bds120Tooltip---placement_top {
1172
1163
  inset-block-end: calc(100% + var(--bds-space_xs));
1173
1164
  inset-inline-start: 50%;
1174
1165
  transform: translateX(-50%);
1175
1166
  }
1176
- .bds112Tooltip---placement_bottom {
1167
+ .bds120Tooltip---placement_bottom {
1177
1168
  inset-block-start: calc(100% + var(--bds-space_xs));
1178
1169
  inset-inline-start: 50%;
1179
1170
  transform: translateX(-50%);
1180
1171
  }
1181
- .bds112Tooltip---placement_left {
1172
+ .bds120Tooltip---placement_left {
1182
1173
  inset-inline-end: calc(100% + var(--bds-space_xs));
1183
1174
  inset-block-start: 50%;
1184
1175
  transform: translateY(-50%);
1185
1176
  }
1186
- .bds112Tooltip---placement_right {
1177
+ .bds120Tooltip---placement_right {
1187
1178
  inset-inline-start: calc(100% + var(--bds-space_xs));
1188
1179
  inset-block-start: 50%;
1189
1180
  transform: translateY(-50%);
1190
1181
  }
1191
1182
  @media (prefers-reduced-motion: reduce) {
1192
- .bds112Tooltip-tooltip {
1183
+ .bds120Tooltip-tooltip {
1193
1184
  transition: none;
1194
1185
  }
1195
1186
  }
@@ -1197,34 +1188,34 @@
1197
1188
 
1198
1189
  /* src/components/ui/Typography/Typography.module.css */
1199
1190
  @layer component {
1200
- .bds112Typography-typography {
1191
+ .bds120Typography-typography {
1201
1192
  margin: 0;
1202
1193
  font-family: var(--bds-font_family--body);
1203
1194
  color: var(--typography_color, var(--bds-color_on-bg));
1204
1195
  }
1205
- .bds112Typography---h1 {
1196
+ .bds120Typography---h1 {
1206
1197
  font-family: var(--bds-font_family--heading);
1207
1198
  font-size: var(--bds-font_size--heading-1);
1208
1199
  font-weight: var(--bds-font_weight--bold);
1209
1200
  line-height: var(--bds-font_line-height--heading);
1210
1201
  }
1211
- .bds112Typography---h2 {
1202
+ .bds120Typography---h2 {
1212
1203
  font-family: var(--bds-font_family--heading);
1213
1204
  font-size: var(--bds-font_size--heading-2);
1214
1205
  font-weight: var(--bds-font_weight--semibold);
1215
1206
  line-height: var(--bds-font_line-height--heading);
1216
1207
  }
1217
- .bds112Typography---h3 {
1208
+ .bds120Typography---h3 {
1218
1209
  font-family: var(--bds-font_family--heading);
1219
1210
  font-size: var(--bds-font_size--heading-3);
1220
1211
  font-weight: var(--bds-font_weight--semibold);
1221
1212
  line-height: var(--bds-font_line-height--heading);
1222
1213
  }
1223
- .bds112Typography---body {
1214
+ .bds120Typography---body {
1224
1215
  font-size: var(--bds-font_size--body);
1225
1216
  line-height: var(--bds-font_line-height--body);
1226
1217
  }
1227
- .bds112Typography---body_s {
1218
+ .bds120Typography---body_s {
1228
1219
  font-size: var(--bds-font_size--body--s);
1229
1220
  line-height: var(--bds-font_line-height--body);
1230
1221
  }
@@ -1244,20 +1235,20 @@
1244
1235
  @keyframes pulse {
1245
1236
  0% {
1246
1237
  transform: scale(1);
1247
- box-shadow: 0 0 0 0 rgb(from var(--button_pulse-color, var(--button_color, var(--bds-color_green))) r g b / 50%);
1238
+ box-shadow: 0 0 0 0 rgb(from var(--button_pulse-color, var(--button_color, var(--bds-color_interactive))) r g b / 50%);
1248
1239
  }
1249
1240
  70% {
1250
1241
  transform: scale(1.01);
1251
- box-shadow: 0 0 0 var(--bds-space_m) rgb(from var(--button_pulse-color, var(--button_color, var(--bds-color_green))) r g b / 0%);
1242
+ box-shadow: 0 0 0 var(--bds-space_m) rgb(from var(--button_pulse-color, var(--button_color, var(--bds-color_interactive))) r g b / 0%);
1252
1243
  }
1253
1244
  100% {
1254
1245
  transform: scale(1);
1255
- box-shadow: 0 0 0 0 rgb(from var(--button_pulse-color, var(--button_color, var(--bds-color_green))) r g b / 0%);
1246
+ box-shadow: 0 0 0 0 rgb(from var(--button_pulse-color, var(--button_color, var(--bds-color_interactive))) r g b / 0%);
1256
1247
  }
1257
1248
  }
1258
1249
  @layer component {
1259
- .bds112Button-button,
1260
- .bds112Button-button[href] {
1250
+ .bds120Button-button,
1251
+ .bds120Button-button[href] {
1261
1252
  all: unset;
1262
1253
  position: relative;
1263
1254
  font: inherit;
@@ -1273,78 +1264,78 @@
1273
1264
  font-size: var(--button_font-size, inherit);
1274
1265
  white-space: nowrap;
1275
1266
  line-height: 1;
1276
- --button_color: var(--bds-color_green);
1277
- --button_on-color: var(--bds-color_on-green);
1278
- --button_color--on-bg: var(--bds-color_green--strong);
1267
+ --button_color: var(--bds-color_interactive);
1268
+ --button_on-color: var(--bds-color_on-interactive);
1269
+ --button_color--on-bg: var(--bds-color_interactive_on-bg);
1279
1270
  background-color: var(--button_bg, var(--button_color));
1280
1271
  color: var(--button_text, var(--button_on-color));
1281
1272
  border: var(--button_border, none);
1282
1273
  --bdc_color: transparent;
1283
- outline: var(--bdc-outline_width) solid var(--bdc_color);
1284
- outline-offset: var(--bdc-outline_offset);
1274
+ box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
1285
1275
  transition: var(--bds-animation_transition), --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing);
1286
1276
  }
1287
- .bds112Button-button.bds112Button---default {
1277
+ .bds120Button-button.bds120Button---default {
1288
1278
  }
1289
- .bds112Button-button.bds112Button---ghost {
1279
+ .bds120Button-button.bds120Button---outline,
1280
+ .bds120Button-button.bds120Button---ghost {
1290
1281
  --button_bg: transparent;
1291
1282
  --button_text: var(--button_color--on-bg);
1292
1283
  --bdc_color: var(--button_color--on-bg);
1293
1284
  }
1294
- .bds112Button-button.bds112Button---size_small {
1285
+ .bds120Button-button.bds120Button---size_small {
1295
1286
  --button_height: 2.25em;
1296
1287
  --button_font-size: var(--bds-font_size--body--s);
1297
1288
  --button_border_radius--s: var(--bds-border_radius--xs);
1298
1289
  padding-inline: var(--bds-space_m);
1299
1290
  }
1300
- .bds112Button-button.bds112Button---size_medium {
1291
+ .bds120Button-button.bds120Button---size_medium {
1301
1292
  --button_height: 3em;
1302
1293
  padding-inline: var(--bds-space_l);
1303
1294
  }
1304
- .bds112Button-button.bds112Button---size_large {
1295
+ .bds120Button-button.bds120Button---size_large {
1305
1296
  --button_font-size: var(--bds-font_size--heading-3);
1306
1297
  --button_border_radius--s: var(--bds-border_radius--m);
1307
1298
  padding-inline: var(--bds-space_xl);
1308
1299
  }
1309
- .bds112Button-button.bds112Button---hasPulse {
1300
+ .bds120Button-button.bds120Button---hasPulse {
1310
1301
  animation: pulse 3s infinite;
1311
1302
  }
1312
- .bds112Button-button[href] {
1303
+ .bds120Button-button[href] {
1313
1304
  text-decoration: none;
1314
1305
  }
1315
- .bds112Button-button svg {
1306
+ .bds120Button-button svg {
1316
1307
  --icon__stroke: currentcolor;
1317
1308
  fill: currentcolor;
1318
1309
  color: currentcolor;
1319
1310
  flex-shrink: 0;
1320
1311
  }
1321
- .bds112Button-iconStart {
1312
+ .bds120Button-iconStart {
1322
1313
  display: flex;
1323
1314
  align-items: center;
1324
1315
  margin-inline-start: calc(var(--bds-space_s) * -1);
1325
1316
  transition: var(--bds-animation_transition);
1326
1317
  }
1327
- .bds112Button-iconEnd {
1318
+ .bds120Button-iconEnd {
1328
1319
  display: flex;
1329
1320
  align-items: center;
1330
1321
  margin-inline-end: calc(var(--bds-space_s) * -1);
1331
1322
  transition: var(--bds-animation_transition);
1332
1323
  }
1333
1324
  @media (hover: hover) and (pointer: fine) {
1334
- .bds112Button-button:hover .bds112Button-iconStart svg {
1325
+ .bds120Button-button:hover .bds120Button-iconStart svg {
1335
1326
  animation: fadeZoom 2s ease-out infinite;
1336
1327
  }
1337
- .bds112Button-button:hover .bds112Button-iconEnd svg {
1328
+ .bds120Button-button:hover .bds120Button-iconEnd svg {
1338
1329
  animation: fadeZoom 2s ease-out infinite;
1339
1330
  }
1340
1331
  }
1341
- .bds112Button-button:focus-visible {
1332
+ .bds120Button-button:focus-visible {
1342
1333
  outline: var(--bds-outline_default);
1343
1334
  outline-offset: var(--bds-outline_offset);
1344
1335
  border-radius: var(--bds-border_radius--s);
1345
1336
  }
1346
1337
  @media (hover: hover) and (pointer: fine) {
1347
- .bds112Button-button.bds112Button---default:hover {
1338
+ .bds120Button-button.bds120Button---default:hover {
1348
1339
  --button_bg: var(--bds-color_bg);
1349
1340
  --button_text: var(--bds-color_interactive_on-bg);
1350
1341
  --button_pulse-color: var(--bds-color_interactive_on-bg);
@@ -1352,7 +1343,8 @@
1352
1343
  }
1353
1344
  }
1354
1345
  @media (hover: hover) and (pointer: fine) {
1355
- .bds112Button-button.bds112Button---ghost:hover {
1346
+ .bds120Button-button.bds120Button---outline:hover,
1347
+ .bds120Button-button.bds120Button---ghost:hover {
1356
1348
  --button_bg: var(--button_color);
1357
1349
  --button_text: var(--button_on-color);
1358
1350
  --bdc_color: transparent;
@@ -1362,7 +1354,7 @@
1362
1354
 
1363
1355
  /* src/components/interaction/Command/Command.module.css */
1364
1356
  @layer component {
1365
- .bds112Command-dialog {
1357
+ .bds120Command-dialog {
1366
1358
  padding: 0;
1367
1359
  border: none;
1368
1360
  border-radius: var(--bds-border_radius--m);
@@ -1372,26 +1364,24 @@
1372
1364
  overflow: visible;
1373
1365
  margin-block-start: 10vh;
1374
1366
  }
1375
- .bds112Command-dialog::backdrop {
1367
+ .bds120Command-dialog::backdrop {
1376
1368
  background-color: var(--color_backdrop, rgb(0 0 0 / 50%));
1377
1369
  backdrop-filter: blur(3px);
1378
1370
  }
1379
- .bds112Command-palette {
1371
+ .bds120Command-palette {
1380
1372
  display: flex;
1381
1373
  flex-direction: column;
1382
1374
  background-color: var(--command_color, var(--bds-color_bg));
1383
1375
  color: var(--command_on-color, var(--bds-color_on-bg));
1384
1376
  border-radius: var(--bds-border_radius--m);
1385
- box-shadow: var(--command_shadow, var(--bds-shadow_xl));
1386
1377
  overflow: hidden;
1387
1378
  max-block-size: 70vh;
1388
1379
  border: var(--command_border, none);
1389
1380
  --bdc_color: currentcolor;
1390
1381
  --bdc-outline_radius: var(--bds-border_radius--m);
1391
- outline: var(--bdc-outline_width) solid var(--bdc_color);
1392
- outline-offset: var(--bdc-outline_offset);
1382
+ box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--command_shadow, var(--bds-shadow_xl));
1393
1383
  }
1394
- .bds112Command-searchRow {
1384
+ .bds120Command-searchRow {
1395
1385
  display: flex;
1396
1386
  align-items: center;
1397
1387
  gap: var(--bds-space_xs);
@@ -1399,13 +1389,13 @@
1399
1389
  border-block-end: 1px solid currentcolor;
1400
1390
  flex-shrink: 0;
1401
1391
  }
1402
- .bds112Command-searchIcon {
1392
+ .bds120Command-searchIcon {
1403
1393
  inline-size: 1.25rem;
1404
1394
  block-size: 1.25rem;
1405
1395
  color: var(--bds-color_on-bg);
1406
1396
  flex-shrink: 0;
1407
1397
  }
1408
- .bds112Command-search {
1398
+ .bds120Command-search {
1409
1399
  flex: 1;
1410
1400
  border: none;
1411
1401
  outline: none;
@@ -1415,10 +1405,10 @@
1415
1405
  background: transparent;
1416
1406
  min-inline-size: 0;
1417
1407
  }
1418
- .bds112Command-search::placeholder {
1408
+ .bds120Command-search::placeholder {
1419
1409
  color: var(--bds-color_on-bg);
1420
1410
  }
1421
- .bds112Command-escHint {
1411
+ .bds120Command-escHint {
1422
1412
  font-size: var(--bds-font_size--body--s);
1423
1413
  color: var(--bds-color_on-bg);
1424
1414
  border-radius: var(--bds-border_radius--xs);
@@ -1426,21 +1416,20 @@
1426
1416
  flex-shrink: 0;
1427
1417
  --bdc_color: currentcolor;
1428
1418
  border: none;
1429
- outline: var(--bdc-outline_width) solid var(--bdc_color);
1430
- outline-offset: var(--bdc-outline_offset);
1419
+ box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
1431
1420
  }
1432
- .bds112Command-list {
1421
+ .bds120Command-list {
1433
1422
  overflow-block: auto;
1434
1423
  list-style: none;
1435
1424
  margin: 0;
1436
1425
  padding: var(--bds-space_xs) 0;
1437
1426
  }
1438
- .bds112Command-groupList {
1427
+ .bds120Command-groupList {
1439
1428
  list-style: none;
1440
1429
  margin: 0;
1441
1430
  padding: 0;
1442
1431
  }
1443
- .bds112Command-group {
1432
+ .bds120Command-group {
1444
1433
  padding: var(--bds-space_xs) var(--bds-space_m);
1445
1434
  font-size: var(--bds-font_size--body--s);
1446
1435
  font-weight: var(--bds-font_weight--semibold);
@@ -1448,7 +1437,7 @@
1448
1437
  text-transform: uppercase;
1449
1438
  letter-spacing: 0.05em;
1450
1439
  }
1451
- .bds112Command-item {
1440
+ .bds120Command-item {
1452
1441
  display: flex;
1453
1442
  align-items: center;
1454
1443
  gap: var(--bds-space_s);
@@ -1456,29 +1445,28 @@
1456
1445
  cursor: pointer;
1457
1446
  transition: background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
1458
1447
  }
1459
- .bds112Command-itemActive {
1448
+ .bds120Command-itemActive {
1460
1449
  background-color: var(--bds-color_bg--subtle);
1461
1450
  }
1462
- .bds112Command-itemLabel {
1451
+ .bds120Command-itemLabel {
1463
1452
  flex: 1;
1464
1453
  font-size: var(--bds-font_size--body);
1465
1454
  color: var(--bds-color_on-bg);
1466
1455
  }
1467
- .bds112Command-itemDesc {
1456
+ .bds120Command-itemDesc {
1468
1457
  font-size: var(--bds-font_size--body--s);
1469
1458
  color: var(--bds-color_on-bg);
1470
1459
  }
1471
- .bds112Command-shortcut {
1460
+ .bds120Command-shortcut {
1472
1461
  font-size: var(--bds-font_size--body--s);
1473
1462
  color: var(--bds-color_on-bg);
1474
1463
  border-radius: var(--bds-border_radius--xs);
1475
1464
  padding: 0.1em 0.4em;
1476
1465
  --bdc_color: currentcolor;
1477
1466
  border: none;
1478
- outline: var(--bdc-outline_width) solid var(--bdc_color);
1479
- outline-offset: var(--bdc-outline_offset);
1467
+ box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
1480
1468
  }
1481
- .bds112Command-empty {
1469
+ .bds120Command-empty {
1482
1470
  padding: var(--bds-space_l) var(--bds-space_m);
1483
1471
  text-align: center;
1484
1472
  color: var(--bds-color_on-bg);
@@ -1488,15 +1476,13 @@
1488
1476
 
1489
1477
  /* src/components/interaction/Dialog/Dialog.module.css */
1490
1478
  @layer component {
1491
- .bds112Dialog-dialog {
1479
+ .bds120Dialog-dialog {
1492
1480
  font-size: var(--bds-font_size--body--s);
1493
1481
  border: var(--dialog_border, none);
1494
1482
  --bdc_color: currentcolor;
1495
1483
  --bdc-outline_radius: var(--bds-border_radius--m);
1496
- outline: var(--bdc-outline_width) solid var(--bdc_color);
1497
- outline-offset: var(--bdc-outline_offset);
1498
1484
  border-radius: var(--dialog_radius, var(--bdc-outline_radius));
1499
- box-shadow: var(--dialog_shadow, var(--bdc-outline_shadow));
1485
+ box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--dialog_shadow, var(--bdc-outline_shadow));
1500
1486
  background-color: var(--dialog_color ,var(--bds-color_grey--subtle));
1501
1487
  color: var(--dialog_on-color, var(--bds-color_on-grey--subtle));
1502
1488
  padding: var(--bds-space_l);
@@ -1504,14 +1490,14 @@
1504
1490
  max-block-size: 90svh;
1505
1491
  overflow: visible;
1506
1492
  }
1507
- .bds112Dialog-dialogContent {
1493
+ .bds120Dialog-dialogContent {
1508
1494
  display: grid;
1509
1495
  gap: var(--bds-grid_gap);
1510
1496
  overflow-block: auto;
1511
1497
  min-block-size: 0;
1512
1498
  flex: 1;
1513
1499
  }
1514
- .bds112Dialog-closeButton {
1500
+ .bds120Dialog-closeButton {
1515
1501
  all: unset;
1516
1502
  position: absolute;
1517
1503
  inset-block-start: -1em;
@@ -1526,15 +1512,18 @@
1526
1512
  color: currentcolor;
1527
1513
  border: var(--dialog_close-border, none);
1528
1514
  --bdc_color: currentcolor;
1529
- outline: var(--bdc-outline_width) solid var(--bdc_color);
1530
- outline-offset: var(--bdc-outline_offset);
1515
+ box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
1531
1516
  cursor: pointer;
1532
1517
  }
1533
- .bds112Dialog-closeButton svg {
1518
+ .bds120Dialog-closeButton:focus-visible {
1519
+ outline: var(--bds-outline_default);
1520
+ outline-offset: var(--bds-outline_offset);
1521
+ }
1522
+ .bds120Dialog-closeButton svg {
1534
1523
  inline-size: 1.25em;
1535
1524
  block-size: 1.25em;
1536
1525
  }
1537
- .bds112Dialog-dialog::backdrop {
1526
+ .bds120Dialog-dialog::backdrop {
1538
1527
  background-color: var(--color_backdrop, rgb(0 0 0 / 50%));
1539
1528
  backdrop-filter: blur(3px);
1540
1529
  }
@@ -1542,7 +1531,7 @@
1542
1531
 
1543
1532
  /* src/components/interaction/Drawer/Drawer.module.css */
1544
1533
  @layer component {
1545
- .bds112Drawer-drawer {
1534
+ .bds120Drawer-drawer {
1546
1535
  position: fixed;
1547
1536
  inset: 0;
1548
1537
  margin: 0;
@@ -1554,14 +1543,27 @@
1554
1543
  border: none;
1555
1544
  background: transparent;
1556
1545
  overflow: hidden;
1546
+ transition: display var(--bds-animation_transition-duration) allow-discrete, overlay var(--bds-animation_transition-duration) allow-discrete;
1557
1547
  }
1558
- .bds112Drawer-drawer::backdrop {
1548
+ .bds120Drawer-drawer::backdrop {
1559
1549
  background-color: var(--color_backdrop, rgb(0 0 0 / 50%));
1560
1550
  backdrop-filter: blur(3px);
1551
+ transition:
1552
+ display var(--bds-animation_transition-duration) allow-discrete,
1553
+ overlay var(--bds-animation_transition-duration) allow-discrete,
1554
+ background-color var(--bds-animation_transition-duration) var(--bds-animation_easing),
1555
+ backdrop-filter var(--bds-animation_transition-duration) var(--bds-animation_easing);
1556
+ }
1557
+ @starting-style {
1558
+ .bds120Drawer-drawer[open]::backdrop {
1559
+ background-color: transparent;
1560
+ backdrop-filter: blur(0);
1561
+ }
1561
1562
  }
1562
- .bds112Drawer-panel {
1563
+ .bds120Drawer-panel {
1563
1564
  position: absolute;
1564
1565
  inset-block: 0;
1566
+ inset-inline: auto;
1565
1567
  display: flex;
1566
1568
  flex-direction: column;
1567
1569
  inline-size: min(28rem, 90vw);
@@ -1570,15 +1572,43 @@
1570
1572
  color: var(--drawer_on-color, var(--bds-color_on-bg));
1571
1573
  box-shadow: var(--bds-shadow_xl);
1572
1574
  overflow: hidden;
1573
- transition: var(--bds-animation_transition);
1575
+ translate: 100% 0;
1576
+ transition: translate var(--bds-animation_transition-duration) var(--bds-animation_easing);
1574
1577
  }
1575
- .bds112Drawer---side_right .bds112Drawer-panel {
1578
+ .bds120Drawer---side_right .bds120Drawer-panel {
1576
1579
  inset-inline-end: 0;
1580
+ translate: 100% 0;
1577
1581
  }
1578
- .bds112Drawer---side_left .bds112Drawer-panel {
1582
+ .bds120Drawer---side_left .bds120Drawer-panel {
1579
1583
  inset-inline-start: 0;
1584
+ translate: -100% 0;
1585
+ }
1586
+ .bds120Drawer-drawer[open] .bds120Drawer-panel {
1587
+ translate: 0 0;
1580
1588
  }
1581
- .bds112Drawer-header {
1589
+ .bds120Drawer-drawer[open].bds120Drawer---side_right .bds120Drawer-panel {
1590
+ animation: bdc-drawer-slide-right var(--bds-animation_transition-duration) var(--bds-animation_easing) both;
1591
+ }
1592
+ .bds120Drawer-drawer[open].bds120Drawer---side_left .bds120Drawer-panel {
1593
+ animation: bdc-drawer-slide-left var(--bds-animation_transition-duration) var(--bds-animation_easing) both;
1594
+ }
1595
+ @keyframes bdc-drawer-slide-right {
1596
+ from {
1597
+ translate: 100% 0;
1598
+ }
1599
+ to {
1600
+ translate: 0 0;
1601
+ }
1602
+ }
1603
+ @keyframes bdc-drawer-slide-left {
1604
+ from {
1605
+ translate: -100% 0;
1606
+ }
1607
+ to {
1608
+ translate: 0 0;
1609
+ }
1610
+ }
1611
+ .bds120Drawer-header {
1582
1612
  display: flex;
1583
1613
  align-items: center;
1584
1614
  justify-content: space-between;
@@ -1586,7 +1616,7 @@
1586
1616
  border-block-end: 1px solid currentcolor;
1587
1617
  flex-shrink: 0;
1588
1618
  }
1589
- .bds112Drawer-closeButton {
1619
+ .bds120Drawer-closeButton {
1590
1620
  all: unset;
1591
1621
  display: flex;
1592
1622
  align-items: center;
@@ -1597,20 +1627,20 @@
1597
1627
  cursor: pointer;
1598
1628
  transition: var(--bds-animation_transition);
1599
1629
  }
1600
- .bds112Drawer-closeButton svg {
1630
+ .bds120Drawer-closeButton svg {
1601
1631
  inline-size: 1.25rem;
1602
1632
  block-size: 1.25rem;
1603
1633
  }
1604
- .bds112Drawer-closeButton:focus-visible {
1634
+ .bds120Drawer-closeButton:focus-visible {
1605
1635
  outline: var(--bds-outline_default);
1606
1636
  outline-offset: var(--bds-outline_offset);
1607
1637
  }
1608
1638
  @media (hover: hover) and (pointer: fine) {
1609
- .bds112Drawer-closeButton:hover {
1639
+ .bds120Drawer-closeButton:hover {
1610
1640
  background-color: var(--bds-color_bg--subtle);
1611
1641
  }
1612
1642
  }
1613
- .bds112Drawer-body {
1643
+ .bds120Drawer-body {
1614
1644
  flex: 1;
1615
1645
  overflow-block: auto;
1616
1646
  padding: var(--bds-space_l);
@@ -1618,19 +1648,25 @@
1618
1648
  flex-direction: column;
1619
1649
  }
1620
1650
  @media (prefers-reduced-motion: reduce) {
1621
- .bds112Drawer-panel {
1651
+ .bds120Drawer-drawer,
1652
+ .bds120Drawer-drawer::backdrop,
1653
+ .bds120Drawer-panel {
1622
1654
  transition: none;
1623
1655
  }
1656
+ .bds120Drawer-drawer[open].bds120Drawer---side_right .bds120Drawer-panel,
1657
+ .bds120Drawer-drawer[open].bds120Drawer---side_left .bds120Drawer-panel {
1658
+ animation: none;
1659
+ }
1624
1660
  }
1625
1661
  }
1626
1662
 
1627
1663
  /* src/components/interaction/DropdownMenu/DropdownMenu.module.css */
1628
1664
  @layer component {
1629
- .bds112DropdownMenu-wrapper {
1665
+ .bds120DropdownMenu-wrapper {
1630
1666
  position: relative;
1631
1667
  display: inline-flex;
1632
1668
  }
1633
- .bds112DropdownMenu-menu {
1669
+ .bds120DropdownMenu-menu {
1634
1670
  position: absolute;
1635
1671
  inset-block-start: calc(100% + var(--bds-space_xxs));
1636
1672
  z-index: var(--bds-z-index_dropdown);
@@ -1639,28 +1675,26 @@
1639
1675
  border: var(--dropdown_border, none);
1640
1676
  --bdc_color: currentcolor;
1641
1677
  --bdc-outline_radius: var(--bds-border_radius--s);
1642
- outline: var(--bdc-outline_width) solid var(--bdc_color);
1643
- outline-offset: var(--bdc-outline_offset);
1644
1678
  border-radius: var(--dropdown_radius, var(--bdc-outline_radius));
1645
1679
  background-color: var(--dropdown_color, var(--bds-color_bg));
1646
1680
  color: var(--dropdown_on-color, var(--bds-color_on-bg));
1647
- box-shadow: var(--dropdown_shadow, var(--bds-shadow_m));
1681
+ box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--dropdown_shadow, var(--bds-shadow_m));
1648
1682
  list-style: none;
1649
1683
  margin: 0;
1650
1684
  }
1651
- .bds112DropdownMenu---placement_bottom-start {
1685
+ .bds120DropdownMenu---placement_bottom-start {
1652
1686
  inset-inline-start: 0;
1653
1687
  }
1654
- .bds112DropdownMenu---placement_bottom-end {
1688
+ .bds120DropdownMenu---placement_bottom-end {
1655
1689
  inset-inline-end: 0;
1656
1690
  }
1657
- .bds112DropdownMenu-separator {
1691
+ .bds120DropdownMenu-separator {
1658
1692
  border: none;
1659
1693
  border-block-start: 1px solid currentcolor;
1660
1694
  margin: var(--bds-space_xxs) 0;
1661
1695
  opacity: 0.15;
1662
1696
  }
1663
- .bds112DropdownMenu-item {
1697
+ .bds120DropdownMenu-item {
1664
1698
  all: unset;
1665
1699
  display: flex;
1666
1700
  align-items: center;
@@ -1674,22 +1708,22 @@
1674
1708
  box-sizing: border-box;
1675
1709
  transition: var(--bds-animation_transition);
1676
1710
  }
1677
- .bds112DropdownMenu-item:disabled {
1711
+ .bds120DropdownMenu-item:disabled {
1678
1712
  opacity: 0.4;
1679
1713
  cursor: not-allowed;
1680
1714
  }
1681
- .bds112DropdownMenu-item:focus-visible {
1715
+ .bds120DropdownMenu-item:focus-visible {
1682
1716
  outline: var(--bds-outline_default);
1683
1717
  outline-offset: calc(var(--bds-outline_offset) * -1);
1684
1718
  border-radius: var(--bds-border_radius--xs);
1685
1719
  }
1686
1720
  @media (hover: hover) and (pointer: fine) {
1687
- .bds112DropdownMenu-item:not(:disabled):hover {
1721
+ .bds120DropdownMenu-item:not(:disabled):hover {
1688
1722
  background-color: var(--bds-color_bg--subtle);
1689
1723
  color: var(--bds-color_interactive_on-bg);
1690
1724
  }
1691
1725
  }
1692
- .bds112DropdownMenu-icon {
1726
+ .bds120DropdownMenu-icon {
1693
1727
  display: flex;
1694
1728
  align-items: center;
1695
1729
  flex-shrink: 0;
@@ -1698,10 +1732,10 @@
1698
1732
 
1699
1733
  /* src/components/interaction/Popover/Popover.module.css */
1700
1734
  @layer component {
1701
- .bds112Popover-wrapper {
1735
+ .bds120Popover-wrapper {
1702
1736
  display: inline-flex;
1703
1737
  }
1704
- .bds112Popover-panel {
1738
+ .bds120Popover-panel {
1705
1739
  position: fixed;
1706
1740
  inset: unset;
1707
1741
  margin: 0;
@@ -1714,15 +1748,13 @@
1714
1748
  border: var(--popover_border, none);
1715
1749
  --bdc_color: currentcolor;
1716
1750
  --bdc-outline_radius: var(--bds-border_radius--s);
1717
- outline: var(--bdc-outline_width) solid var(--bdc_color);
1718
- outline-offset: var(--bdc-outline_offset);
1719
1751
  border-radius: var(--popover_radius, var(--bdc-outline_radius));
1720
1752
  background-color: var(--popover_color, var(--bds-color_bg));
1721
- box-shadow: var(--popover_shadow, var(--bds-shadow_m));
1753
+ box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--popover_shadow, var(--bds-shadow_m));
1722
1754
  color: var(--popover_on-color, var(--bds-color_on-bg));
1723
1755
  font-size: var(--bds-font_size--body);
1724
1756
  }
1725
- .bds112Popover-panel[data-placement=bottom] {
1757
+ .bds120Popover-panel[data-placement=bottom] {
1726
1758
  top: anchor(bottom);
1727
1759
  left: anchor(left);
1728
1760
  margin-block-start: var(--bds-space_xs, 8px);
@@ -1731,7 +1763,7 @@
1731
1763
  --popover-right,
1732
1764
  --popover-left;
1733
1765
  }
1734
- .bds112Popover-panel[data-placement=top] {
1766
+ .bds120Popover-panel[data-placement=top] {
1735
1767
  bottom: anchor(top);
1736
1768
  left: anchor(left);
1737
1769
  margin-block-end: var(--bds-space_xs, 8px);
@@ -1740,7 +1772,7 @@
1740
1772
  --popover-right,
1741
1773
  --popover-left;
1742
1774
  }
1743
- .bds112Popover-panel[data-placement=right] {
1775
+ .bds120Popover-panel[data-placement=right] {
1744
1776
  top: anchor(top);
1745
1777
  left: anchor(right);
1746
1778
  margin-inline-start: var(--bds-space_xs, 8px);
@@ -1749,7 +1781,7 @@
1749
1781
  --popover-bottom,
1750
1782
  --popover-top;
1751
1783
  }
1752
- .bds112Popover-panel[data-placement=left] {
1784
+ .bds120Popover-panel[data-placement=left] {
1753
1785
  top: anchor(top);
1754
1786
  right: anchor(left);
1755
1787
  margin-inline-end: var(--bds-space_xs, 8px);
@@ -1807,10 +1839,10 @@
1807
1839
  margin-block-end: var(--bds-space_xs, 8px);
1808
1840
  }
1809
1841
  @media (width <= 420px) {
1810
- .bds112Popover-panel[data-placement=bottom],
1811
- .bds112Popover-panel[data-placement=top],
1812
- .bds112Popover-panel[data-placement=left],
1813
- .bds112Popover-panel[data-placement=right] {
1842
+ .bds120Popover-panel[data-placement=bottom],
1843
+ .bds120Popover-panel[data-placement=top],
1844
+ .bds120Popover-panel[data-placement=left],
1845
+ .bds120Popover-panel[data-placement=right] {
1814
1846
  left: var(--bds-space_xs, 8px);
1815
1847
  right: var(--bds-space_xs, 8px);
1816
1848
  inline-size: 100%;
@@ -1819,13 +1851,13 @@
1819
1851
  }
1820
1852
  }
1821
1853
  @media (aspect-ratio >= 2/1) {
1822
- .bds112Popover-panel[data-placement=bottom] {
1854
+ .bds120Popover-panel[data-placement=bottom] {
1823
1855
  position-try-fallbacks:
1824
1856
  --popover-top,
1825
1857
  --popover-right,
1826
1858
  --popover-left;
1827
1859
  }
1828
- .bds112Popover-panel[data-placement=top] {
1860
+ .bds120Popover-panel[data-placement=top] {
1829
1861
  position-try-fallbacks:
1830
1862
  --popover-bottom,
1831
1863
  --popover-right,
@@ -1836,23 +1868,23 @@
1836
1868
 
1837
1869
  /* src/components/interaction/Rating/Rating.module.css */
1838
1870
  @layer component {
1839
- .bds112Rating-rating {
1871
+ .bds120Rating-rating {
1840
1872
  display: inline-flex;
1841
1873
  gap: var(--bds-space_xxxs);
1842
1874
  color: var(--bds-color_bg);
1843
1875
  }
1844
- .bds112Rating-star {
1876
+ .bds120Rating-star {
1845
1877
  width: 1.5em;
1846
1878
  height: 1.5em;
1847
1879
  }
1848
- .bds112Rating---filled {
1880
+ .bds120Rating---filled {
1849
1881
  color: var(--bds-color_warning);
1850
1882
  }
1851
1883
  }
1852
1884
 
1853
1885
  /* src/components/interaction/Toast/Toast.module.css */
1854
1886
  @layer component {
1855
- .bds112Toast-toastContainer {
1887
+ .bds120Toast-toastContainer {
1856
1888
  position: fixed;
1857
1889
  inset: unset;
1858
1890
  inset-block-end: var(--bds-space_xl);
@@ -1864,7 +1896,7 @@
1864
1896
  padding: 0;
1865
1897
  background: transparent;
1866
1898
  }
1867
- .bds112Toast-toast {
1899
+ .bds120Toast-toast {
1868
1900
  padding: var(--bds-space_m) var(--bds-space_l);
1869
1901
  background-color: var(--toast_color, var(--bds-color_bg));
1870
1902
  color: var(--toast_on-color, var(--bds-color_on-bg));
@@ -1876,26 +1908,26 @@
1876
1908
  min-inline-size: 300px;
1877
1909
  animation: slideIn var(--bds-animation_duration--fast) var(--bds-animation_easing);
1878
1910
  }
1879
- .bds112Toast-toast.bds112Toast---variant_success {
1911
+ .bds120Toast-toast.bds120Toast---variant_success {
1880
1912
  --toast_color: var(--bds-color_success);
1881
1913
  --toast_on-color: var(--bds-color_on-success);
1882
1914
  }
1883
- .bds112Toast-toast.bds112Toast---variant_warning {
1915
+ .bds120Toast-toast.bds120Toast---variant_warning {
1884
1916
  --toast_color: var(--bds-color_warning);
1885
1917
  --toast_on-color: var(--bds-color_on-warning);
1886
1918
  }
1887
- .bds112Toast-toast.bds112Toast---variant_info {
1919
+ .bds120Toast-toast.bds120Toast---variant_info {
1888
1920
  --toast_color: var(--bds-color_bg--subtle);
1889
1921
  --toast_on-color: var(--bds-color_on-bg--subtle);
1890
1922
  }
1891
- .bds112Toast-toast.bds112Toast---variant_error {
1923
+ .bds120Toast-toast.bds120Toast---variant_error {
1892
1924
  --toast_color: var(--bds-color_error);
1893
1925
  --toast_on-color: var(--bds-color_on-error);
1894
1926
  }
1895
- .bds112Toast-message {
1927
+ .bds120Toast-message {
1896
1928
  flex: 1;
1897
1929
  }
1898
- .bds112Toast-closeButton {
1930
+ .bds120Toast-closeButton {
1899
1931
  display: flex;
1900
1932
  align-items: center;
1901
1933
  justify-content: center;
@@ -1908,7 +1940,7 @@
1908
1940
  cursor: pointer;
1909
1941
  color: var(--toast_on-color);
1910
1942
  }
1911
- .bds112Toast-closeButton svg {
1943
+ .bds120Toast-closeButton svg {
1912
1944
  inline-size: 1rem;
1913
1945
  block-size: 1rem;
1914
1946
  }
@@ -1926,17 +1958,17 @@
1926
1958
 
1927
1959
  /* src/components/interaction/form/Checkbox/Checkbox.module.css */
1928
1960
  @layer component {
1929
- .bds112Checkbox-checkboxGroup {
1961
+ .bds120Checkbox-checkboxGroup {
1930
1962
  --inputSize: calc(var(--bds-space_s) * 2);
1931
1963
  display: flex;
1932
1964
  flex-direction: column;
1933
1965
  }
1934
- .bds112Checkbox-inputWrapper {
1966
+ .bds120Checkbox-inputWrapper {
1935
1967
  display: flex;
1936
1968
  align-items: stretch;
1937
1969
  gap: var(--bds-space_xs);
1938
1970
  }
1939
- .bds112Checkbox-checkbox {
1971
+ .bds120Checkbox-checkbox {
1940
1972
  margin-block-start: 0.25em;
1941
1973
  inline-size: var(--inputSize);
1942
1974
  block-size: var(--inputSize);
@@ -1944,21 +1976,19 @@
1944
1976
  border: var(--checkbox_border, none);
1945
1977
  --bdc_color: currentcolor;
1946
1978
  --bdc-outline_radius: var(--bds-border_radius--xs);
1947
- outline: var(--bdc-outline_width) solid var(--bdc_color);
1948
- outline-offset: var(--bdc-outline_offset);
1949
1979
  border-radius: var(--checkbox_radius, var(--bdc-outline_radius));
1950
- box-shadow: var(--checkbox_shadow, var(--bdc-outline_shadow));
1980
+ box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--checkbox_shadow, var(--bdc-outline_shadow));
1951
1981
  appearance: none;
1952
1982
  background-color: var(--checkbox_color_bg, var(--bds-color_bg));
1953
1983
  cursor: pointer;
1954
1984
  position: relative;
1955
1985
  transition: --bdc_color 0.3s ease, background-color 0.3s ease;
1956
1986
  }
1957
- .bds112Checkbox-checkbox:checked {
1987
+ .bds120Checkbox-checkbox:checked {
1958
1988
  background-color: var(--checkbox_color-active, var(--bdc-color_active));
1959
1989
  --bdc_color: var(--checkbox_color-active, var(--bdc-color_active));
1960
1990
  }
1961
- .bds112Checkbox-checkbox:checked::after {
1991
+ .bds120Checkbox-checkbox:checked::after {
1962
1992
  content: "";
1963
1993
  position: absolute;
1964
1994
  inset-inline-start: 0.6em;
@@ -1969,33 +1999,33 @@
1969
1999
  border-width: 0 2px 2px 0;
1970
2000
  transform: rotate(45deg);
1971
2001
  }
1972
- .bds112Checkbox-checkbox:focus {
2002
+ .bds120Checkbox-checkbox:focus {
1973
2003
  --bdc_color: var(--bdc_color--focus);
1974
2004
  }
1975
- .bds112Checkbox-checkbox:focus-visible {
2005
+ .bds120Checkbox-checkbox:focus-visible {
1976
2006
  outline: var(--bds-outline_default);
1977
2007
  outline-offset: var(--bds-outline_offset);
1978
2008
  }
1979
- .bds112Checkbox-checkboxError {
2009
+ .bds120Checkbox-checkboxError {
1980
2010
  --bdc_color: var(--bdc_color--error);
1981
2011
  }
1982
2012
  }
1983
2013
 
1984
2014
  /* src/components/interaction/form/atoms/Message.module.css */
1985
2015
  @layer component {
1986
- .bds112Message-error,
1987
- .bds112Message-hint {
2016
+ .bds120Message-error,
2017
+ .bds120Message-hint {
1988
2018
  font-size: var(--bds-font_size--body--s);
1989
2019
  margin-inline-start: var(--labelPosition);
1990
2020
  }
1991
- .bds112Message-error {
2021
+ .bds120Message-error {
1992
2022
  color: var(--bds-color_error_on-bg);
1993
2023
  }
1994
2024
  }
1995
2025
 
1996
2026
  /* src/components/interaction/form/atoms/Label.module.css */
1997
2027
  @layer component {
1998
- .bds112Label-label {
2028
+ .bds120Label-label {
1999
2029
  display: flex;
2000
2030
  align-items: center;
2001
2031
  font-family: var(--bds-font_family--body);
@@ -2006,7 +2036,7 @@
2006
2036
 
2007
2037
  /* src/components/interaction/form/atoms/InputContainer.module.css */
2008
2038
  @layer component {
2009
- .bds112InputContainer-container {
2039
+ .bds120InputContainer-container {
2010
2040
  --labelPosition: calc(var(--inputSize) + var(--bds-space_m));
2011
2041
  display: flex;
2012
2042
  flex-direction: column;
@@ -2016,7 +2046,7 @@
2016
2046
 
2017
2047
  /* src/components/interaction/form/CheckboxGroup/CheckboxGroup.module.css */
2018
2048
  @layer component {
2019
- .bds112CheckboxGroup-group {
2049
+ .bds120CheckboxGroup-group {
2020
2050
  border: none;
2021
2051
  padding: 0;
2022
2052
  margin: 0;
@@ -2024,7 +2054,7 @@
2024
2054
  flex-direction: column;
2025
2055
  gap: var(--bds-space_xs);
2026
2056
  }
2027
- .bds112CheckboxGroup-legend {
2057
+ .bds120CheckboxGroup-legend {
2028
2058
  font-family: var(--bds-font_family--body);
2029
2059
  font-size: var(--bds-font_size--body--s);
2030
2060
  font-weight: var(--bds-font_weight--medium);
@@ -2032,10 +2062,10 @@
2032
2062
  padding: 0;
2033
2063
  margin-block-end: var(--bds-space_xs);
2034
2064
  }
2035
- .bds112CheckboxGroup-required {
2065
+ .bds120CheckboxGroup-required {
2036
2066
  color: var(--bds-color_error);
2037
2067
  }
2038
- .bds112CheckboxGroup-items {
2068
+ .bds120CheckboxGroup-items {
2039
2069
  display: flex;
2040
2070
  flex-direction: column;
2041
2071
  gap: var(--bds-space_xs);
@@ -2044,16 +2074,16 @@
2044
2074
 
2045
2075
  /* src/components/interaction/form/Combobox/Combobox.module.css */
2046
2076
  @layer component {
2047
- .bds112Combobox-formGroup {
2077
+ .bds120Combobox-formGroup {
2048
2078
  display: flex;
2049
2079
  flex-direction: column;
2050
2080
  }
2051
- .bds112Combobox-inputWrapper {
2081
+ .bds120Combobox-inputWrapper {
2052
2082
  position: relative;
2053
2083
  display: flex;
2054
2084
  align-items: center;
2055
2085
  }
2056
- .bds112Combobox-input {
2086
+ .bds120Combobox-input {
2057
2087
  appearance: none;
2058
2088
  inline-size: 100%;
2059
2089
  font-family: var(--bds-font_family--body);
@@ -2063,29 +2093,27 @@
2063
2093
  border: var(--combobox_border, none);
2064
2094
  --bdc_color: currentcolor;
2065
2095
  --bdc-outline_radius: var(--bds-border_radius--xs);
2066
- outline: var(--bdc-outline_width) solid var(--bdc_color);
2067
- outline-offset: var(--bdc-outline_offset);
2068
2096
  border-radius: var(--combobox_radius, var(--bdc-outline_radius));
2069
- box-shadow: var(--combobox_shadow, var(--bdc-outline_shadow));
2097
+ box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--combobox_shadow, var(--bdc-outline_shadow));
2070
2098
  background-color: var(--combobox_color_bg, var(--bds-color_bg));
2071
2099
  color: var(--combobox_color, var(--bds-color_on-bg));
2072
2100
  transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing), background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
2073
2101
  }
2074
- .bds112Combobox-input:focus {
2102
+ .bds120Combobox-input:focus {
2075
2103
  --bdc_color: var(--bdc_color--focus);
2076
2104
  }
2077
- .bds112Combobox-input:focus-visible {
2105
+ .bds120Combobox-input:focus-visible {
2078
2106
  outline: var(--bds-outline_default);
2079
2107
  outline-offset: var(--bds-outline_offset);
2080
2108
  }
2081
- .bds112Combobox-input:disabled {
2109
+ .bds120Combobox-input:disabled {
2082
2110
  opacity: 0.5;
2083
2111
  cursor: not-allowed;
2084
2112
  }
2085
- .bds112Combobox-inputError {
2113
+ .bds120Combobox-inputError {
2086
2114
  --bdc_color: var(--bdc_color--error);
2087
2115
  }
2088
- .bds112Combobox-chevron {
2116
+ .bds120Combobox-chevron {
2089
2117
  position: absolute;
2090
2118
  inset-inline-end: var(--bds-space_s);
2091
2119
  display: flex;
@@ -2093,11 +2121,11 @@
2093
2121
  pointer-events: none;
2094
2122
  color: var(--combobox_color, var(--bds-color_on-bg));
2095
2123
  }
2096
- .bds112Combobox-chevron svg {
2124
+ .bds120Combobox-chevron svg {
2097
2125
  inline-size: 1rem;
2098
2126
  block-size: 1rem;
2099
2127
  }
2100
- .bds112Combobox-listbox {
2128
+ .bds120Combobox-listbox {
2101
2129
  position: absolute;
2102
2130
  inset-block-start: calc(100% + var(--bds-space_xxs));
2103
2131
  inset-inline: 0;
@@ -2110,14 +2138,12 @@
2110
2138
  border: var(--combobox_listbox-border, none);
2111
2139
  --bdc_color: currentcolor;
2112
2140
  --bdc-outline_radius: var(--bds-border_radius--xs);
2113
- outline: var(--bdc-outline_width) solid var(--bdc_color);
2114
- outline-offset: var(--bdc-outline_offset);
2115
2141
  border-radius: var(--combobox_listbox-radius, var(--bdc-outline_radius));
2116
2142
  background-color: var(--combobox_color, var(--bds-color_bg));
2117
2143
  color: var(--combobox_on-color, var(--bds-color_on-bg));
2118
- box-shadow: var(--combobox_listbox-shadow, var(--bds-shadow_m));
2144
+ box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--combobox_listbox-shadow, var(--bds-shadow_m));
2119
2145
  }
2120
- .bds112Combobox-option {
2146
+ .bds120Combobox-option {
2121
2147
  display: flex;
2122
2148
  align-items: center;
2123
2149
  padding: var(--bds-space_xs) var(--bds-space_m);
@@ -2126,14 +2152,14 @@
2126
2152
  cursor: pointer;
2127
2153
  transition: var(--bds-animation_transition);
2128
2154
  }
2129
- .bds112Combobox-option.bds112Combobox---highlighted {
2155
+ .bds120Combobox-option.bds120Combobox---highlighted {
2130
2156
  background-color: var(--bds-color_bg--subtle);
2131
2157
  color: var(--bds-color_interactive_on-bg);
2132
2158
  }
2133
- .bds112Combobox-option.bds112Combobox---selected {
2159
+ .bds120Combobox-option.bds120Combobox---selected {
2134
2160
  font-weight: var(--bds-font_weight--semibold);
2135
2161
  }
2136
- .bds112Combobox-option.bds112Combobox---disabled {
2162
+ .bds120Combobox-option.bds120Combobox---disabled {
2137
2163
  opacity: 0.4;
2138
2164
  cursor: not-allowed;
2139
2165
  }
@@ -2141,18 +2167,18 @@
2141
2167
 
2142
2168
  /* src/components/interaction/form/FileInput/FileInput.module.css */
2143
2169
  @layer component {
2144
- .bds112FileInput-formGroup {
2170
+ .bds120FileInput-formGroup {
2145
2171
  display: flex;
2146
2172
  flex-direction: column;
2147
2173
  }
2148
- .bds112FileInput-fieldLabel {
2174
+ .bds120FileInput-fieldLabel {
2149
2175
  display: flex;
2150
2176
  align-items: center;
2151
2177
  font-family: var(--bds-font_family--body);
2152
2178
  color: var(--bds-color_on-bg);
2153
2179
  margin-block-end: var(--bds-space_xs);
2154
2180
  }
2155
- .bds112FileInput-dropZone {
2181
+ .bds120FileInput-dropZone {
2156
2182
  display: flex;
2157
2183
  flex-direction: column;
2158
2184
  align-items: center;
@@ -2166,40 +2192,40 @@
2166
2192
  text-align: center;
2167
2193
  transition: var(--bds-animation_transition);
2168
2194
  }
2169
- .bds112FileInput-dropZone:focus-within {
2195
+ .bds120FileInput-dropZone:focus-within {
2170
2196
  outline: var(--bds-outline_default);
2171
2197
  outline-offset: var(--bds-outline_offset);
2172
2198
  border-color: var(--fileInput_border-color, currentcolor);
2173
2199
  }
2174
- .bds112FileInput-isDragging {
2200
+ .bds120FileInput-isDragging {
2175
2201
  border-color: currentcolor;
2176
2202
  background-color: rgb(from currentcolor r g b / 8%);
2177
2203
  }
2178
- .bds112FileInput-hasError {
2204
+ .bds120FileInput-hasError {
2179
2205
  border-color: var(--bds-color_error);
2180
2206
  }
2181
- .bds112FileInput-isDisabled {
2207
+ .bds120FileInput-isDisabled {
2182
2208
  opacity: 0.5;
2183
2209
  cursor: not-allowed;
2184
2210
  }
2185
- .bds112FileInput-icon {
2211
+ .bds120FileInput-icon {
2186
2212
  inline-size: 2rem;
2187
2213
  block-size: 2rem;
2188
2214
  flex-shrink: 0;
2189
2215
  }
2190
- .bds112FileInput-prompt {
2216
+ .bds120FileInput-prompt {
2191
2217
  font-size: var(--bds-font_size--body);
2192
2218
  color: var(--bds-color_on-bg);
2193
2219
  }
2194
- .bds112FileInput-prompt strong {
2220
+ .bds120FileInput-prompt strong {
2195
2221
  color: var(--bds-color_interactive_on-bg);
2196
2222
  font-weight: var(--bds-font_weight--semibold);
2197
2223
  }
2198
- .bds112FileInput-acceptHint {
2224
+ .bds120FileInput-acceptHint {
2199
2225
  font-size: var(--bds-font_size--body--s);
2200
2226
  color: var(--bds-color_on-bg);
2201
2227
  }
2202
- .bds112FileInput-hiddenInput {
2228
+ .bds120FileInput-hiddenInput {
2203
2229
  position: absolute;
2204
2230
  inline-size: 1px;
2205
2231
  block-size: 1px;
@@ -2209,7 +2235,7 @@
2209
2235
  border: 0;
2210
2236
  }
2211
2237
  @media (hover: hover) and (pointer: fine) {
2212
- .bds112FileInput-dropZone:not(.bds112FileInput-isDisabled):hover {
2238
+ .bds120FileInput-dropZone:not(.bds120FileInput-isDisabled):hover {
2213
2239
  border-color: var(--bds-color_interactive);
2214
2240
  background-color: rgb(from var(--bds-color_interactive) r g b / 4%);
2215
2241
  }
@@ -2218,65 +2244,62 @@
2218
2244
 
2219
2245
  /* src/components/interaction/form/FormInput/FormInput.module.css */
2220
2246
  @layer component {
2221
- .bds112FormInput-formGroup {
2247
+ .bds120FormInput-formGroup {
2222
2248
  --labelPosition: 0;
2223
2249
  display: flex;
2224
2250
  flex-direction: column;
2225
2251
  }
2226
- .bds112FormInput-input {
2252
+ .bds120FormInput-input {
2227
2253
  font-family: var(--bds-font_family--body);
2228
2254
  font-size: var(--bds-font_size--body);
2229
2255
  padding: var(--bds-space_s);
2230
2256
  border: var(--input_border, none);
2231
2257
  --bdc_color: currentcolor;
2232
2258
  --bdc-outline_radius: var(--bds-border_radius--xs);
2233
- outline: var(--bdc-outline_width) solid var(--bdc_color);
2234
- outline-offset: var(--bdc-outline_offset);
2235
2259
  border-radius: var(--input_radius, var(--bdc-outline_radius));
2236
- box-shadow: var(--input_shadow, var(--bdc-outline_shadow));
2260
+ box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--input_shadow, var(--bdc-outline_shadow));
2237
2261
  color: var(--input_color, var(--bds-color_on-bg));
2238
2262
  background-color: var(--input_color_bg, var(--bds-color_bg));
2239
2263
  transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing), background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
2240
2264
  }
2241
- .bds112FormInput-input:focus {
2265
+ .bds120FormInput-input:focus {
2242
2266
  --bdc_color: var(--bdc_color--focus);
2243
2267
  }
2244
- .bds112FormInput-input:focus-visible {
2268
+ .bds120FormInput-input:focus-visible {
2245
2269
  outline: var(--bds-outline_default);
2246
2270
  outline-offset: var(--bds-outline_offset);
2247
2271
  }
2248
- .bds112FormInput-inputError {
2272
+ .bds120FormInput-inputError {
2249
2273
  --bdc_color: var(--bdc_color--error);
2250
2274
  }
2251
2275
  }
2252
2276
 
2253
2277
  /* src/components/interaction/form/NumberInput/NumberInput.module.css */
2254
2278
  @layer component {
2255
- .bds112NumberInput-formGroup {
2279
+ .bds120NumberInput-formGroup {
2256
2280
  display: flex;
2257
2281
  flex-direction: column;
2258
2282
  }
2259
- .bds112NumberInput-inputRow {
2283
+ .bds120NumberInput-inputRow {
2260
2284
  display: flex;
2261
2285
  align-items: stretch;
2262
2286
  border: var(--numberInput_border, none);
2263
2287
  --bdc_color: currentcolor;
2264
2288
  --bdc-outline_radius: var(--bds-border_radius--xs);
2265
- outline: var(--bdc-outline_width) solid var(--bdc_color);
2266
- outline-offset: var(--bdc-outline_offset);
2267
- border-radius: var(--numberInput_radius, var(--bdc-outline_radius));
2268
- box-shadow: var(--numberInput_shadow, var(--bdc-outline_shadow));
2289
+ --_radius: var(--numberInput_radius, var(--bdc-outline_radius));
2290
+ border-radius: var(--_radius);
2291
+ box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--numberInput_shadow, var(--bdc-outline_shadow));
2269
2292
  overflow: hidden;
2270
2293
  transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing);
2271
2294
  }
2272
- .bds112NumberInput-inputRow:focus-within {
2295
+ .bds120NumberInput-inputRow:focus-within {
2273
2296
  --bdc_color: var(--bdc_color--focus);
2274
2297
  }
2275
- .bds112NumberInput-inputRow:focus-within:has(:focus-visible) {
2298
+ .bds120NumberInput-inputRow:focus-within:has(:focus-visible) {
2276
2299
  outline: var(--bds-outline_default);
2277
2300
  outline-offset: var(--bds-outline_offset);
2278
2301
  }
2279
- .bds112NumberInput-input {
2302
+ .bds120NumberInput-input {
2280
2303
  flex: 1;
2281
2304
  border: none;
2282
2305
  outline: none;
@@ -2289,35 +2312,45 @@
2289
2312
  min-inline-size: 0;
2290
2313
  appearance: textfield;
2291
2314
  }
2292
- .bds112NumberInput-input::-webkit-inner-spin-button,
2293
- .bds112NumberInput-input::-webkit-outer-spin-button {
2315
+ .bds120NumberInput-input::-webkit-inner-spin-button,
2316
+ .bds120NumberInput-input::-webkit-outer-spin-button {
2294
2317
  appearance: none;
2295
2318
  }
2296
- .bds112NumberInput-inputError {
2319
+ .bds120NumberInput-inputError {
2297
2320
  --bdc_color: var(--bdc_color--error);
2298
2321
  }
2299
- .bds112NumberInput-stepper {
2322
+ .bds120NumberInput-stepper {
2300
2323
  all: unset;
2301
2324
  display: flex;
2302
2325
  align-items: center;
2303
2326
  justify-content: center;
2304
2327
  padding: var(--bds-space_xs);
2328
+ margin: 1px;
2305
2329
  background-color: var(--bds-color_bg--subtle);
2306
2330
  color: var(--numberInput_color, var(--bds-color_on-bg));
2307
2331
  cursor: pointer;
2308
2332
  transition: var(--bds-animation_transition);
2309
2333
  flex-shrink: 0;
2310
2334
  }
2311
- .bds112NumberInput-stepper svg {
2335
+ .bds120NumberInput-stepper svg {
2312
2336
  width: 1rem;
2313
2337
  height: 1rem;
2338
+ color: var(--numberInput_stepper-color, var(--bds-color_interactive));
2339
+ }
2340
+ .bds120NumberInput-stepper:first-child {
2341
+ border-start-start-radius: var(--_radius);
2342
+ border-end-start-radius: var(--_radius);
2314
2343
  }
2315
- .bds112NumberInput-stepper:disabled {
2344
+ .bds120NumberInput-stepper:last-child {
2345
+ border-start-end-radius: var(--_radius);
2346
+ border-end-end-radius: var(--_radius);
2347
+ }
2348
+ .bds120NumberInput-stepper:disabled {
2316
2349
  opacity: 0.4;
2317
2350
  cursor: not-allowed;
2318
2351
  }
2319
2352
  @media (hover: hover) and (pointer: fine) {
2320
- .bds112NumberInput-stepper:not(:disabled):hover {
2353
+ .bds120NumberInput-stepper:not(:disabled):hover {
2321
2354
  background-color: var(--bds-color_bg--subtle);
2322
2355
  opacity: 0.7;
2323
2356
  }
@@ -2326,29 +2359,29 @@
2326
2359
 
2327
2360
  /* src/components/interaction/form/Radio/Radio.module.css */
2328
2361
  @layer component {
2329
- .bds112Radio-radioGroup {
2362
+ .bds120Radio-radioGroup {
2330
2363
  --inputSize: calc(var(--bds-space_s) * 2);
2331
2364
  --labelPosition: calc(var(--inputSize) + var(--bds-space_m));
2332
2365
  display: flex;
2333
2366
  flex-direction: column;
2334
2367
  }
2335
- .bds112Radio-inputWrapper {
2368
+ .bds120Radio-inputWrapper {
2336
2369
  display: flex;
2337
2370
  align-items: flex-start;
2338
2371
  gap: var(--bds-space_xs);
2339
2372
  }
2340
- .bds112Radio-textWrapper {
2373
+ .bds120Radio-textWrapper {
2341
2374
  display: flex;
2342
2375
  flex-direction: column;
2343
2376
  gap: var(--bds-space_xxxs);
2344
2377
  padding-block-start: var(--bds-space_xxxs);
2345
2378
  }
2346
- .bds112Radio-description {
2379
+ .bds120Radio-description {
2347
2380
  font-size: var(--bds-font_size--body--s);
2348
2381
  color: var(--radio_description-color, var(--bds-color_on-bg--subtle));
2349
2382
  line-height: var(--bds-font_line-height--body);
2350
2383
  }
2351
- .bds112Radio-radio {
2384
+ .bds120Radio-radio {
2352
2385
  flex-shrink: 0;
2353
2386
  margin-block-start: 0.2em;
2354
2387
  inline-size: var(--inputSize);
@@ -2357,46 +2390,37 @@
2357
2390
  border: var(--radio_border, none);
2358
2391
  --bdc_color: currentcolor;
2359
2392
  --bdc-outline_radius: 50%;
2360
- outline: var(--bdc-outline_width) solid var(--bdc_color);
2361
- outline-offset: var(--bdc-outline_offset);
2362
2393
  border-radius: var(--radio_radius, var(--bdc-outline_radius));
2363
- box-shadow: var(--radio_shadow, var(--bdc-outline_shadow));
2394
+ box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--radio_shadow, var(--bdc-outline_shadow));
2364
2395
  appearance: none;
2365
2396
  background-color: var(--radio_color_bg, var(--bds-color_bg));
2366
2397
  cursor: pointer;
2367
2398
  position: relative;
2368
2399
  transition: --bdc_color 0.2s ease, background-color 0.2s ease;
2369
2400
  }
2370
- .bds112Radio-radio:checked {
2371
- background-color: var(--radio_color-active, var(--bdc-color_active));
2401
+ .bds120Radio-radio:checked {
2402
+ background:
2403
+ radial-gradient(
2404
+ circle,
2405
+ var(--radio_color-active, var(--bdc-color_active)) 35%,
2406
+ var(--radio_color_bg, var(--bds-color_bg)) 42%);
2372
2407
  --bdc_color: var(--radio_color-active, var(--bdc-color_active));
2373
2408
  }
2374
- .bds112Radio-radio:checked::after {
2375
- content: "";
2376
- position: absolute;
2377
- inset-inline-start: 50%;
2378
- inset-block-start: 50%;
2379
- transform: translate(-50%, -50%);
2380
- inline-size: 0.4em;
2381
- block-size: 0.4em;
2382
- border-radius: 50%;
2383
- background-color: var(--radio_color-on-active, var(--bdc-color_on-active));
2384
- }
2385
- .bds112Radio-radio:focus {
2409
+ .bds120Radio-radio:focus {
2386
2410
  --bdc_color: var(--bdc_color--focus);
2387
2411
  }
2388
- .bds112Radio-radio:focus-visible {
2412
+ .bds120Radio-radio:focus-visible {
2389
2413
  outline: var(--bds-outline_default);
2390
2414
  outline-offset: var(--bds-outline_offset);
2391
2415
  }
2392
- .bds112Radio-radioError {
2416
+ .bds120Radio-radioError {
2393
2417
  --bdc_color: var(--bdc_color--error);
2394
2418
  }
2395
2419
  }
2396
2420
 
2397
2421
  /* src/components/interaction/form/RadioGroup/RadioGroup.module.css */
2398
2422
  @layer component {
2399
- .bds112RadioGroup-group {
2423
+ .bds120RadioGroup-group {
2400
2424
  border: none;
2401
2425
  padding: 0;
2402
2426
  margin: 0;
@@ -2404,7 +2428,7 @@
2404
2428
  flex-direction: column;
2405
2429
  gap: var(--bds-space_xs);
2406
2430
  }
2407
- .bds112RadioGroup-legend {
2431
+ .bds120RadioGroup-legend {
2408
2432
  font-family: var(--bds-font_family--body);
2409
2433
  font-size: var(--bds-font_size--body--s);
2410
2434
  font-weight: var(--bds-font_weight--medium);
@@ -2412,10 +2436,10 @@
2412
2436
  padding: 0;
2413
2437
  margin-block-end: var(--bds-space_xs);
2414
2438
  }
2415
- .bds112RadioGroup-required {
2439
+ .bds120RadioGroup-required {
2416
2440
  color: var(--bds-color_error);
2417
2441
  }
2418
- .bds112RadioGroup-items {
2442
+ .bds120RadioGroup-items {
2419
2443
  display: flex;
2420
2444
  flex-direction: column;
2421
2445
  gap: var(--bds-space_xs);
@@ -2424,7 +2448,7 @@
2424
2448
 
2425
2449
  /* src/components/interaction/form/SegmentedControl/SegmentedControl.module.css */
2426
2450
  @layer component {
2427
- .bds112SegmentedControl-control {
2451
+ .bds120SegmentedControl-control {
2428
2452
  position: relative;
2429
2453
  display: inline-grid;
2430
2454
  grid-auto-flow: column;
@@ -2434,19 +2458,31 @@
2434
2458
  border-radius: var(--bds-border_radius--m);
2435
2459
  gap: 0;
2436
2460
  }
2437
- .bds112SegmentedControl-thumb {
2461
+ .bds120SegmentedControl-thumb {
2438
2462
  position: absolute;
2439
2463
  inset-block: var(--bds-space_xxxs);
2440
2464
  inset-inline-start: var(--bds-space_xxxs);
2441
2465
  inline-size: calc((100% - 2 * var(--bds-space_xxxs)) / var(--control_count, 1));
2442
2466
  border-radius: var(--bds-border_radius--s);
2443
- background-color: var(--control_thumb-bg, var(--bds-color_bg));
2467
+ background-color: var(--control_thumb-bg, var(--bds-color_interactive));
2444
2468
  box-shadow: var(--bds-shadow_s);
2445
2469
  pointer-events: none;
2446
2470
  transform: translateX(calc(var(--control_selected-index, 0) * 100%));
2447
2471
  transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
2448
2472
  }
2449
- .bds112SegmentedControl-item {
2473
+ .bds120SegmentedControl-indicator {
2474
+ position: absolute;
2475
+ inset-block: var(--bds-space_xxxs);
2476
+ inset-inline-start: var(--bds-space_xxxs);
2477
+ inline-size: calc((100% - 2 * var(--bds-space_xxxs)) / var(--control_count, 1));
2478
+ border-radius: var(--bds-border_radius--s);
2479
+ pointer-events: none;
2480
+ z-index: 2;
2481
+ display: none;
2482
+ transform: translateX(calc(var(--control_selected-index, 0) * 100%));
2483
+ transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
2484
+ }
2485
+ .bds120SegmentedControl-item {
2450
2486
  position: relative;
2451
2487
  z-index: 1;
2452
2488
  display: flex;
@@ -2454,57 +2490,60 @@
2454
2490
  justify-content: center;
2455
2491
  cursor: pointer;
2456
2492
  border-radius: var(--bds-border_radius--s);
2457
- transition: var(--bds-animation_transition);
2458
- }
2459
- .bds112SegmentedControl-item.bds112SegmentedControl---disabled {
2460
- opacity: 0.5;
2461
- cursor: not-allowed;
2462
- }
2463
- .bds112SegmentedControl-radio {
2464
- position: absolute;
2465
- opacity: 0;
2466
- inline-size: 0;
2467
- block-size: 0;
2468
- margin: 0;
2469
- }
2470
- .bds112SegmentedControl-label {
2471
- display: block;
2472
2493
  padding: var(--bds-space_xs) var(--bds-space_m);
2473
- white-space: nowrap;
2474
2494
  font-size: var(--bds-font_size--body);
2495
+ font-family: var(--bds-font_family--body);
2475
2496
  line-height: var(--bds-font_line-height--body);
2476
2497
  color: var(--control_label-color, var(--bds-color_on-bg--subtle));
2477
- transition: color var(--bds-animation_transition-duration) var(--bds-animation_easing);
2478
- pointer-events: none;
2498
+ white-space: nowrap;
2479
2499
  user-select: none;
2500
+ text-decoration: none;
2501
+ transition: var(--bds-animation_transition);
2502
+ background: none;
2503
+ border: none;
2504
+ outline: none;
2505
+ }
2506
+ .bds120SegmentedControl-item:focus-visible {
2507
+ outline: var(--bds-outline_default);
2508
+ outline-offset: calc(var(--bds-outline_offset) * -1);
2509
+ border-radius: var(--bds-border_radius--s);
2510
+ }
2511
+ .bds120SegmentedControl-item.bds120SegmentedControl---active {
2512
+ color: var(--control_label-color--active, var(--bds-color_on-interactive));
2513
+ }
2514
+ .bds120SegmentedControl-item.bds120SegmentedControl---disabled {
2515
+ opacity: 0.5;
2516
+ cursor: not-allowed;
2517
+ pointer-events: none;
2480
2518
  }
2481
- .bds112SegmentedControl-control.bds112SegmentedControl---size_small .bds112SegmentedControl-label {
2519
+ .bds120SegmentedControl-control.bds120SegmentedControl---size_small .bds120SegmentedControl-item {
2482
2520
  padding: var(--bds-space_xxs) var(--bds-space_s);
2483
2521
  font-size: var(--bds-font_size--body--s);
2484
2522
  }
2485
- .bds112SegmentedControl-control.bds112SegmentedControl---size_large .bds112SegmentedControl-label {
2523
+ .bds120SegmentedControl-control.bds120SegmentedControl---size_large .bds120SegmentedControl-item {
2486
2524
  padding: var(--bds-space_s) var(--bds-space_m);
2487
2525
  white-space: normal;
2488
2526
  text-align: center;
2489
2527
  }
2490
- .bds112SegmentedControl-item.bds112SegmentedControl---active .bds112SegmentedControl-label {
2491
- color: var(--control_label-color--active, var(--bds-color_on-bg));
2528
+ .bds120SegmentedControl-control.bds120SegmentedControl---variant_outline {
2529
+ background-color: var(--control_track-bg, transparent);
2530
+ --control_label-color--active: var(--bds-color_interactive);
2492
2531
  }
2493
- .bds112SegmentedControl-radio:focus-visible ~ .bds112SegmentedControl-label {
2494
- outline: var(--bds-outline_default);
2495
- outline-offset: calc(var(--bds-outline_offset) * -1);
2496
- border-radius: var(--bds-border_radius--s);
2532
+ .bds120SegmentedControl-control.bds120SegmentedControl---variant_outline .bds120SegmentedControl-thumb {
2533
+ display: none;
2534
+ }
2535
+ .bds120SegmentedControl-control.bds120SegmentedControl---variant_outline .bds120SegmentedControl-indicator {
2536
+ display: block;
2537
+ box-shadow: inset 0 0 0 2px var(--bds-color_interactive);
2497
2538
  }
2498
2539
  @media (hover: hover) and (pointer: fine) {
2499
- .bds112SegmentedControl-item:not(.bds112SegmentedControl---active, .bds112SegmentedControl---disabled):hover .bds112SegmentedControl-label {
2540
+ .bds120SegmentedControl-item:not(.bds120SegmentedControl---active, .bds120SegmentedControl---disabled):hover {
2500
2541
  color: var(--control_label-color--hover, var(--bds-color_on-bg));
2501
2542
  }
2502
2543
  }
2503
2544
  @media (prefers-reduced-motion: reduce) {
2504
- .bds112SegmentedControl-thumb {
2505
- transition: none;
2506
- }
2507
- .bds112SegmentedControl-label {
2545
+ .bds120SegmentedControl-thumb,
2546
+ .bds120SegmentedControl-indicator {
2508
2547
  transition: none;
2509
2548
  }
2510
2549
  }
@@ -2512,16 +2551,16 @@
2512
2551
 
2513
2552
  /* src/components/interaction/form/Select/Select.module.css */
2514
2553
  @layer component {
2515
- .bds112Select-formGroup {
2554
+ .bds120Select-formGroup {
2516
2555
  display: flex;
2517
2556
  flex-direction: column;
2518
2557
  }
2519
- .bds112Select-selectWrapper {
2558
+ .bds120Select-selectWrapper {
2520
2559
  position: relative;
2521
2560
  display: flex;
2522
2561
  align-items: center;
2523
2562
  }
2524
- .bds112Select-select {
2563
+ .bds120Select-select {
2525
2564
  appearance: none;
2526
2565
  inline-size: 100%;
2527
2566
  font-family: var(--bds-font_family--body);
@@ -2531,38 +2570,36 @@
2531
2570
  border: var(--select_border, none);
2532
2571
  --bdc_color: currentcolor;
2533
2572
  --bdc-outline_radius: var(--bds-border_radius--xs);
2534
- outline: var(--bdc-outline_width) solid var(--bdc_color);
2535
- outline-offset: var(--bdc-outline_offset);
2536
2573
  border-radius: var(--select_radius, var(--bdc-outline_radius));
2537
- box-shadow: var(--select_shadow, var(--bdc-outline_shadow));
2574
+ box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--select_shadow, var(--bdc-outline_shadow));
2538
2575
  background-color: var(--select_color_bg, var(--bds-color_bg));
2539
2576
  color: var(--select_color, var(--bds-color_on-bg));
2540
2577
  cursor: pointer;
2541
2578
  transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing), background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
2542
2579
  }
2543
- .bds112Select-select:focus {
2580
+ .bds120Select-select:focus {
2544
2581
  --bdc_color: var(--bdc_color--focus);
2545
2582
  }
2546
- .bds112Select-select:focus-visible {
2583
+ .bds120Select-select:focus-visible {
2547
2584
  outline: var(--bds-outline_default);
2548
2585
  outline-offset: var(--bds-outline_offset);
2549
2586
  }
2550
- .bds112Select-select:disabled {
2587
+ .bds120Select-select:disabled {
2551
2588
  opacity: 0.5;
2552
2589
  cursor: not-allowed;
2553
2590
  }
2554
- .bds112Select-selectError {
2591
+ .bds120Select-selectError {
2555
2592
  --bdc_color: var(--bdc_color--error);
2556
2593
  }
2557
- .bds112Select-chevron {
2594
+ .bds120Select-chevron {
2558
2595
  position: absolute;
2559
2596
  inset-inline-end: var(--bds-space_s);
2560
2597
  display: flex;
2561
2598
  align-items: center;
2562
2599
  pointer-events: none;
2563
- color: var(--select_color, var(--bds-color_on-bg));
2600
+ color: var(--select_chevron-color, var(--bds-color_interactive));
2564
2601
  }
2565
- .bds112Select-chevron svg {
2602
+ .bds120Select-chevron svg {
2566
2603
  inline-size: 1rem;
2567
2604
  block-size: 1rem;
2568
2605
  }
@@ -2570,22 +2607,22 @@
2570
2607
 
2571
2608
  /* src/components/interaction/form/Slider/Slider.module.css */
2572
2609
  @layer component {
2573
- .bds112Slider-formGroup {
2610
+ .bds120Slider-formGroup {
2574
2611
  display: flex;
2575
2612
  flex-direction: column;
2576
2613
  gap: var(--bds-space_xxs);
2577
2614
  }
2578
- .bds112Slider-labelRow {
2615
+ .bds120Slider-labelRow {
2579
2616
  display: flex;
2580
2617
  justify-content: space-between;
2581
2618
  align-items: baseline;
2582
2619
  }
2583
- .bds112Slider-value {
2620
+ .bds120Slider-value {
2584
2621
  font-size: var(--bds-font_size--body--s);
2585
2622
  font-variant-numeric: tabular-nums;
2586
2623
  color: var(--bds-color_on-bg--subtle);
2587
2624
  }
2588
- .bds112Slider-slider {
2625
+ .bds120Slider-slider {
2589
2626
  --slider_fill: 0%;
2590
2627
  --slider_track-height: var(--bds-space_xxs);
2591
2628
  --slider_thumb-size: calc(var(--bds-space_s) * 2);
@@ -2604,16 +2641,16 @@
2604
2641
  cursor: pointer;
2605
2642
  transition: var(--bds-animation_transition);
2606
2643
  }
2607
- .bds112Slider-slider:focus-visible {
2644
+ .bds120Slider-slider:focus-visible {
2608
2645
  outline: var(--bds-outline_default);
2609
2646
  outline-offset: var(--bds-outline_offset);
2610
2647
  border-radius: 999px;
2611
2648
  }
2612
- .bds112Slider-slider:disabled {
2649
+ .bds120Slider-slider:disabled {
2613
2650
  opacity: 0.4;
2614
2651
  cursor: not-allowed;
2615
2652
  }
2616
- .bds112Slider-slider::-webkit-slider-thumb {
2653
+ .bds120Slider-slider::-webkit-slider-thumb {
2617
2654
  appearance: none;
2618
2655
  inline-size: var(--slider_thumb-size);
2619
2656
  block-size: var(--slider_thumb-size);
@@ -2623,7 +2660,7 @@
2623
2660
  transition: var(--bds-animation_transition);
2624
2661
  cursor: pointer;
2625
2662
  }
2626
- .bds112Slider-slider::-moz-range-thumb {
2663
+ .bds120Slider-slider::-moz-range-thumb {
2627
2664
  inline-size: var(--slider_thumb-size);
2628
2665
  block-size: var(--slider_thumb-size);
2629
2666
  border: none;
@@ -2632,7 +2669,7 @@
2632
2669
  box-shadow: var(--bds-shadow_s);
2633
2670
  cursor: pointer;
2634
2671
  }
2635
- .bds112Slider-sliderError {
2672
+ .bds120Slider-sliderError {
2636
2673
  background:
2637
2674
  linear-gradient(
2638
2675
  to right,
@@ -2641,16 +2678,16 @@
2641
2678
  var(--bds-color_bg--subtle) var(--slider_fill),
2642
2679
  var(--bds-color_bg--subtle) 100%);
2643
2680
  }
2644
- .bds112Slider-sliderError::-webkit-slider-thumb {
2681
+ .bds120Slider-sliderError::-webkit-slider-thumb {
2645
2682
  background-color: var(--bds-color_error);
2646
2683
  }
2647
- .bds112Slider-sliderError::-moz-range-thumb {
2684
+ .bds120Slider-sliderError::-moz-range-thumb {
2648
2685
  background-color: var(--bds-color_error);
2649
2686
  }
2650
2687
  @media (prefers-reduced-motion: reduce) {
2651
- .bds112Slider-slider,
2652
- .bds112Slider-slider::-webkit-slider-thumb,
2653
- .bds112Slider-slider::-moz-range-thumb {
2688
+ .bds120Slider-slider,
2689
+ .bds120Slider-slider::-webkit-slider-thumb,
2690
+ .bds120Slider-slider::-moz-range-thumb {
2654
2691
  transition: none;
2655
2692
  }
2656
2693
  }
@@ -2658,7 +2695,7 @@
2658
2695
 
2659
2696
  /* src/components/interaction/form/Switch/Switch.module.css */
2660
2697
  @layer component {
2661
- .bds112Switch-switchGroup {
2698
+ .bds120Switch-switchGroup {
2662
2699
  --switch_thumb-size: 1.25em;
2663
2700
  --switch_track-pad: var(--bds-space_xxxs);
2664
2701
  --switch_track-height: calc(var(--switch_thumb-size) + var(--switch_track-pad) * 2);
@@ -2667,21 +2704,21 @@
2667
2704
  display: flex;
2668
2705
  flex-direction: column;
2669
2706
  }
2670
- .bds112Switch-switchGroup.bds112Switch---size_small {
2707
+ .bds120Switch-switchGroup.bds120Switch---size_small {
2671
2708
  --switch_thumb-size: 1em;
2672
2709
  }
2673
- .bds112Switch-switchGroup.bds112Switch---size_medium {
2710
+ .bds120Switch-switchGroup.bds120Switch---size_medium {
2674
2711
  --switch_thumb-size: 1.25em;
2675
2712
  }
2676
- .bds112Switch-switchGroup.bds112Switch---size_large {
2713
+ .bds120Switch-switchGroup.bds120Switch---size_large {
2677
2714
  --switch_thumb-size: 1.5em;
2678
2715
  }
2679
- .bds112Switch-inputWrapper {
2716
+ .bds120Switch-inputWrapper {
2680
2717
  display: flex;
2681
2718
  align-items: center;
2682
2719
  gap: var(--bds-space_xs);
2683
2720
  }
2684
- .bds112Switch-trackWrapper {
2721
+ .bds120Switch-trackWrapper {
2685
2722
  position: relative;
2686
2723
  display: inline-flex;
2687
2724
  align-items: center;
@@ -2689,7 +2726,7 @@
2689
2726
  inline-size: var(--switch_track-width);
2690
2727
  block-size: var(--switch_track-height);
2691
2728
  }
2692
- .bds112Switch-switch {
2729
+ .bds120Switch-switch {
2693
2730
  position: absolute;
2694
2731
  inset: 0;
2695
2732
  appearance: none;
@@ -2700,10 +2737,10 @@
2700
2737
  cursor: pointer;
2701
2738
  z-index: 1;
2702
2739
  }
2703
- .bds112Switch-switch:disabled {
2740
+ .bds120Switch-switch:disabled {
2704
2741
  cursor: not-allowed;
2705
2742
  }
2706
- .bds112Switch-track {
2743
+ .bds120Switch-track {
2707
2744
  display: inline-flex;
2708
2745
  align-items: center;
2709
2746
  inline-size: var(--switch_track-width);
@@ -2712,47 +2749,45 @@
2712
2749
  background-color: var(--switch_track-bg, var(--bds-color_grey--subtle));
2713
2750
  padding-inline: var(--switch_track-pad);
2714
2751
  pointer-events: none;
2715
- outline: var(--bdc-outline_width) solid var(--bdc_color);
2716
- outline-offset: var(--bds-outline_offset);
2717
- box-shadow: var(--switch_shadow, var(--bdc-outline_shadow));
2752
+ box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--switch_shadow, var(--bdc-outline_shadow));
2718
2753
  transition:
2719
2754
  --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing),
2720
2755
  background-color var(--bds-animation_transition-duration) var(--bds-animation_easing),
2721
2756
  transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
2722
- --bdc_color: var(--switch_thumb-bg, var(--bds-color_grey));
2757
+ --bdc_color: var(--switch_thumb-bg, var(--bds-color_interactive));
2723
2758
  }
2724
- .bds112Switch-thumb {
2759
+ .bds120Switch-thumb {
2725
2760
  display: block;
2726
2761
  inline-size: var(--switch_thumb-size);
2727
2762
  block-size: var(--switch_thumb-size);
2728
2763
  border-radius: 50%;
2729
- background-color: var(--switch_thumb-bg, var(--bds-color_grey));
2764
+ background-color: var(--switch_thumb-bg, var(--bds-color_interactive));
2730
2765
  box-shadow: var(--bds-shadow_s);
2731
2766
  transition: var(--bds-animation_transition);
2732
2767
  transform: translateX(0);
2733
2768
  }
2734
- .bds112Switch-switch.bds112Switch-switchError + .bds112Switch-track {
2769
+ .bds120Switch-switch.bds120Switch-switchError + .bds120Switch-track {
2735
2770
  --bdc_color: var(--bds-color_error);
2736
2771
  }
2737
- .bds112Switch-switch:checked + .bds112Switch-track {
2772
+ .bds120Switch-switch:checked + .bds120Switch-track {
2738
2773
  background-color: var(--switch_track-bg--active, var(--bdc-color_active--subtle));
2739
- --bdc_color: var(--switch_thumb-bg--active, var(--bdc-color_active--strong));
2774
+ --bdc_color: var(--switch_thumb-bg--active, var(--bds-color_interactive));
2740
2775
  }
2741
- .bds112Switch-switch:checked + .bds112Switch-track .bds112Switch-thumb {
2742
- background-color: var(--switch_thumb-bg--active, var(--bdc-color_active--strong));
2776
+ .bds120Switch-switch:checked + .bds120Switch-track .bds120Switch-thumb {
2777
+ background-color: var(--switch_thumb-bg--active, var(--bds-color_interactive));
2743
2778
  transform: translateX(var(--switch_thumb-size));
2744
2779
  }
2745
- .bds112Switch-switch:focus-visible + .bds112Switch-track {
2780
+ .bds120Switch-switch:focus-visible + .bds120Switch-track {
2746
2781
  outline: var(--bds-outline_default);
2747
2782
  outline-offset: var(--bds-outline_offset);
2748
2783
  border-radius: 999px;
2749
2784
  }
2750
- .bds112Switch-switch:disabled + .bds112Switch-track {
2785
+ .bds120Switch-switch:disabled + .bds120Switch-track {
2751
2786
  opacity: 0.4;
2752
2787
  }
2753
2788
  @media (prefers-reduced-motion: reduce) {
2754
- .bds112Switch-track,
2755
- .bds112Switch-thumb {
2789
+ .bds120Switch-track,
2790
+ .bds120Switch-thumb {
2756
2791
  transition: none;
2757
2792
  }
2758
2793
  }
@@ -2760,11 +2795,11 @@
2760
2795
 
2761
2796
  /* src/components/interaction/form/Textarea/Textarea.module.css */
2762
2797
  @layer component {
2763
- .bds112Textarea-formGroup {
2798
+ .bds120Textarea-formGroup {
2764
2799
  display: flex;
2765
2800
  flex-direction: column;
2766
2801
  }
2767
- .bds112Textarea-textarea {
2802
+ .bds120Textarea-textarea {
2768
2803
  font-family: var(--bds-font_family--body);
2769
2804
  font-size: var(--bds-font_size--body);
2770
2805
  line-height: var(--bds-font_line-height--body);
@@ -2772,78 +2807,76 @@
2772
2807
  border: var(--textarea_border, none);
2773
2808
  --bdc_color: currentcolor;
2774
2809
  --bdc-outline_radius: var(--bds-border_radius--xs);
2775
- outline: var(--bdc-outline_width) solid var(--bdc_color);
2776
- outline-offset: var(--bdc-outline_offset);
2777
2810
  border-radius: var(--textarea_radius, var(--bdc-outline_radius));
2778
- box-shadow: var(--textarea_shadow, var(--bdc-outline_shadow));
2811
+ box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--textarea_shadow, var(--bdc-outline_shadow));
2779
2812
  background-color: var(--textarea_color_bg, var(--bds-color_bg));
2780
2813
  color: var(--textarea_color, var(--bds-color_on-bg));
2781
2814
  resize: vertical;
2782
2815
  min-block-size: calc(var(--bds-space_m) * 5);
2783
2816
  transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing), background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
2784
2817
  }
2785
- .bds112Textarea-textarea:focus {
2818
+ .bds120Textarea-textarea:focus {
2786
2819
  --bdc_color: var(--bdc_color--focus);
2787
2820
  }
2788
- .bds112Textarea-textarea:focus-visible {
2821
+ .bds120Textarea-textarea:focus-visible {
2789
2822
  outline: var(--bds-outline_default);
2790
2823
  outline-offset: var(--bds-outline_offset);
2791
2824
  }
2792
- .bds112Textarea-textarea:disabled {
2825
+ .bds120Textarea-textarea:disabled {
2793
2826
  opacity: 0.5;
2794
2827
  cursor: not-allowed;
2795
2828
  resize: none;
2796
2829
  }
2797
- .bds112Textarea-textareaError {
2830
+ .bds120Textarea-textareaError {
2798
2831
  --bdc_color: var(--bdc_color--error);
2799
2832
  }
2800
2833
  }
2801
2834
 
2802
2835
  /* src/components/layout/ButtonGroup/ButtonGroup.module.css */
2803
2836
  @layer component {
2804
- .bds112ButtonGroup-buttonGroup {
2837
+ .bds120ButtonGroup-buttonGroup {
2805
2838
  container-type: inline-size;
2806
2839
  container-name: button-group;
2807
2840
  grid-column: var(--bds-grid_span-100);
2808
2841
  }
2809
- .bds112ButtonGroup-buttonGroup .bds112ButtonGroup-container {
2842
+ .bds120ButtonGroup-buttonGroup .bds120ButtonGroup-container {
2810
2843
  position: relative;
2811
2844
  display: flex;
2812
2845
  flex-direction: column-reverse;
2813
2846
  gap: var(--bds-space_l);
2814
2847
  align-items: center;
2815
2848
  }
2816
- .bds112ButtonGroup-buttonGroup.bds112ButtonGroup---variant_card .bds112ButtonGroup-container {
2849
+ .bds120ButtonGroup-buttonGroup.bds120ButtonGroup---variant_card .bds120ButtonGroup-container {
2817
2850
  align-items: stretch;
2818
2851
  }
2819
- .bds112ButtonGroup-buttonGroup.bds112ButtonGroup---variant_flow .bds112ButtonGroup-container,
2820
- .bds112ButtonGroup-buttonGroup.bds112ButtonGroup---variant_modal .bds112ButtonGroup-container {
2852
+ .bds120ButtonGroup-buttonGroup.bds120ButtonGroup---variant_flow .bds120ButtonGroup-container,
2853
+ .bds120ButtonGroup-buttonGroup.bds120ButtonGroup---variant_modal .bds120ButtonGroup-container {
2821
2854
  align-items: center;
2822
2855
  }
2823
- .bds112ButtonGroup-buttonGroup.bds112ButtonGroup---variant_content .bds112ButtonGroup-container {
2856
+ .bds120ButtonGroup-buttonGroup.bds120ButtonGroup---variant_content .bds120ButtonGroup-container {
2824
2857
  align-items: flex-start;
2825
2858
  }
2826
2859
  @supports (contain: inline-size) {
2827
2860
  @container button-group (min-width: 30rem) {
2828
- .bds112ButtonGroup-buttonGroup .bds112ButtonGroup-container {
2861
+ .bds120ButtonGroup-buttonGroup .bds120ButtonGroup-container {
2829
2862
  flex-direction: row;
2830
2863
  justify-content: space-between;
2831
2864
  }
2832
- .bds112ButtonGroup-buttonGroup.bds112ButtonGroup---variant_modal .bds112ButtonGroup-container > :first-child:last-child,
2833
- .bds112ButtonGroup-buttonGroup.bds112ButtonGroup---variant_flow .bds112ButtonGroup-container > :first-child:last-child {
2865
+ .bds120ButtonGroup-buttonGroup.bds120ButtonGroup---variant_modal .bds120ButtonGroup-container > :first-child:last-child,
2866
+ .bds120ButtonGroup-buttonGroup.bds120ButtonGroup---variant_flow .bds120ButtonGroup-container > :first-child:last-child {
2834
2867
  margin-inline-start: auto;
2835
2868
  }
2836
- .bds112ButtonGroup-buttonGroup.bds112ButtonGroup---variant_card .bds112ButtonGroup-container {
2869
+ .bds120ButtonGroup-buttonGroup.bds120ButtonGroup---variant_card .bds120ButtonGroup-container {
2837
2870
  justify-content: center;
2838
2871
  }
2839
- .bds112ButtonGroup-buttonGroup.bds112ButtonGroup---variant_modal .bds112ButtonGroup-container {
2872
+ .bds120ButtonGroup-buttonGroup.bds120ButtonGroup---variant_modal .bds120ButtonGroup-container {
2840
2873
  justify-content: flex-end;
2841
2874
  }
2842
- .bds112ButtonGroup-buttonGroup.bds112ButtonGroup---variant_content .bds112ButtonGroup-container {
2875
+ .bds120ButtonGroup-buttonGroup.bds120ButtonGroup---variant_content .bds120ButtonGroup-container {
2843
2876
  justify-content: flex-start;
2844
2877
  align-items: center;
2845
2878
  }
2846
- .bds112ButtonGroup-buttonGroup.bds112ButtonGroup---variant_grid .bds112ButtonGroup-container {
2879
+ .bds120ButtonGroup-buttonGroup.bds120ButtonGroup---variant_grid .bds120ButtonGroup-container {
2847
2880
  justify-content: center;
2848
2881
  }
2849
2882
  }
@@ -2852,70 +2885,68 @@
2852
2885
 
2853
2886
  /* src/components/layout/Card/Card.module.css */
2854
2887
  @layer component {
2855
- .bds112Card-card {
2888
+ .bds120Card-card {
2856
2889
  background-color: var(--card_color, var(--bds-color_bg));
2857
2890
  color: var(--card_on-color, var(--bds-color_on-bg));
2858
2891
  border-radius: var(--bds-border_radius--m);
2859
2892
  transition: all 0.3s ease;
2860
2893
  position: relative;
2861
2894
  }
2862
- .bds112Card-card.bds112Card---default {
2895
+ .bds120Card-card.bds120Card---default {
2863
2896
  box-shadow: var(--bds-shadow_s);
2864
2897
  }
2865
- .bds112Card-card.bds112Card---elevated {
2898
+ .bds120Card-card.bds120Card---elevated {
2866
2899
  box-shadow: var(--bds-shadow_m);
2867
2900
  }
2868
- .bds112Card-card.bds112Card---outlined {
2901
+ .bds120Card-card.bds120Card---outlined {
2869
2902
  border: var(--card_border, none);
2870
2903
  --bdc_color: currentcolor;
2871
- outline: var(--bdc-outline_width) solid var(--bdc_color);
2872
- outline-offset: var(--bdc-outline_offset);
2873
- box-shadow: var(--bds-shadow_s);
2904
+ box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--bds-shadow_s);
2874
2905
  }
2875
- .bds112Card-card.bds112Card---clickable {
2906
+ .bds120Card-card.bds120Card---clickable {
2876
2907
  cursor: pointer;
2877
2908
  }
2878
- .bds112Card-card.bds112Card---padding-none {
2909
+ .bds120Card-card.bds120Card---padding-none {
2879
2910
  padding: 0;
2880
2911
  }
2881
- .bds112Card-card.bds112Card---padding-small {
2912
+ .bds120Card-card.bds120Card---padding-small {
2882
2913
  padding: var(--bds-space_s);
2883
2914
  }
2884
- .bds112Card-card.bds112Card---padding-medium {
2915
+ .bds120Card-card.bds120Card---padding-medium {
2885
2916
  padding: var(--bds-space_m);
2886
2917
  }
2887
- .bds112Card-card.bds112Card---padding-large {
2918
+ .bds120Card-card.bds120Card---padding-large {
2888
2919
  padding: var(--bds-space_l);
2889
2920
  }
2890
- .bds112Card-card.bds112Card---text-start {
2921
+ .bds120Card-card.bds120Card---text-start {
2891
2922
  text-align: start;
2892
2923
  }
2893
- .bds112Card-card.bds112Card---text-center {
2924
+ .bds120Card-card.bds120Card---text-center {
2894
2925
  text-align: center;
2895
2926
  }
2896
- .bds112Card-card.bds112Card---text-end {
2927
+ .bds120Card-card.bds120Card---text-end {
2897
2928
  text-align: end;
2898
2929
  }
2899
- .bds112Card-card.bds112Card---clickable:focus-visible {
2930
+ .bds120Card-card.bds120Card---clickable:focus-visible {
2900
2931
  outline: 2px solid var(--color_focus, currentcolor);
2901
2932
  outline-offset: 2px;
2902
2933
  }
2903
- .bds112Card-card.bds112Card---clickable:active {
2934
+ .bds120Card-card.bds120Card---clickable:active {
2904
2935
  transform: translateY(0);
2905
2936
  box-shadow: var(--bds-shadow_s);
2906
2937
  }
2907
2938
  @media (hover: hover) and (pointer: fine) {
2908
- .bds112Card-card.bds112Card---clickable:hover {
2939
+ .bds120Card-card.bds120Card---clickable:hover {
2909
2940
  transform: translateY(-2px);
2910
2941
  box-shadow: var(--bds-shadow_xl);
2911
2942
  }
2912
- .bds112Card-card.bds112Card---default:hover {
2943
+ .bds120Card-card.bds120Card---default:hover {
2913
2944
  box-shadow: var(--bds-shadow_m);
2914
2945
  }
2915
- .bds112Card-card.bds112Card---elevated:hover {
2946
+ .bds120Card-card.bds120Card---elevated:hover {
2916
2947
  box-shadow: var(--bds-shadow_2xl);
2917
2948
  }
2918
- .bds112Card-card.bds112Card---outlined:hover {
2949
+ .bds120Card-card.bds120Card---outlined:hover {
2919
2950
  box-shadow: var(--bds-shadow_s);
2920
2951
  }
2921
2952
  }
@@ -2923,60 +2954,60 @@
2923
2954
 
2924
2955
  /* src/components/layout/SectionHeader/SectionHeader.module.css */
2925
2956
  @layer component {
2926
- .bds112SectionHeader-sectionHeader {
2957
+ .bds120SectionHeader-sectionHeader {
2927
2958
  display: flex;
2928
2959
  flex-direction: column;
2929
2960
  gap: var(--bds-space_m);
2930
2961
  grid-column: var(--bds-grid_span-100);
2931
2962
  }
2932
- .bds112SectionHeader-title {
2963
+ .bds120SectionHeader-title {
2933
2964
  color: var(--sectionHeader-title-color, var(--bds-color_on-bg));
2934
2965
  margin: 0;
2935
2966
  font-family: var(--bds-font_family--body);
2936
2967
  }
2937
- .bds112SectionHeader-subtitle {
2968
+ .bds120SectionHeader-subtitle {
2938
2969
  color: var(--sectionHeader_subtitle-color, var(--bds-color_grey--strong));
2939
2970
  margin: 0;
2940
2971
  font-family: var(--bds-font_family--body);
2941
2972
  font-weight: var(--bds-font_weight--medium);
2942
2973
  }
2943
- .bds112SectionHeader-sectionHeader.bds112SectionHeader---start {
2974
+ .bds120SectionHeader-sectionHeader.bds120SectionHeader---start {
2944
2975
  align-items: flex-start;
2945
2976
  text-align: start;
2946
2977
  }
2947
- .bds112SectionHeader-sectionHeader.bds112SectionHeader---center {
2978
+ .bds120SectionHeader-sectionHeader.bds120SectionHeader---center {
2948
2979
  align-items: center;
2949
2980
  text-align: center;
2950
2981
  }
2951
- .bds112SectionHeader-sectionHeader.bds112SectionHeader---end {
2982
+ .bds120SectionHeader-sectionHeader.bds120SectionHeader---end {
2952
2983
  align-items: flex-end;
2953
2984
  text-align: end;
2954
2985
  }
2955
- .bds112SectionHeader-sectionHeader.bds112SectionHeader---small .bds112SectionHeader-title {
2986
+ .bds120SectionHeader-sectionHeader.bds120SectionHeader---small .bds120SectionHeader-title {
2956
2987
  font-size: var(--bds-font_size--heading-1);
2957
2988
  line-height: var(--bds-font_line-height--heading);
2958
2989
  font-weight: var(--bds-font_weight--bold);
2959
2990
  }
2960
- .bds112SectionHeader-sectionHeader.bds112SectionHeader---small .bds112SectionHeader-subtitle {
2991
+ .bds120SectionHeader-sectionHeader.bds120SectionHeader---small .bds120SectionHeader-subtitle {
2961
2992
  font-size: var(--bds-font_size--body);
2962
2993
  line-height: 1.4;
2963
2994
  }
2964
- .bds112SectionHeader-sectionHeader.bds112SectionHeader---medium .bds112SectionHeader-title {
2995
+ .bds120SectionHeader-sectionHeader.bds120SectionHeader---medium .bds120SectionHeader-title {
2965
2996
  font-size: var(--bds-font_size--display);
2966
2997
  line-height: var(--bds-font_line-height--display);
2967
2998
  font-weight: var(--bds-font_weight--bold);
2968
2999
  }
2969
- .bds112SectionHeader-sectionHeader.bds112SectionHeader---medium .bds112SectionHeader-subtitle {
3000
+ .bds120SectionHeader-sectionHeader.bds120SectionHeader---medium .bds120SectionHeader-subtitle {
2970
3001
  font-size: var(--bds-font_size--heading-3);
2971
3002
  line-height: 1.3;
2972
3003
  }
2973
- .bds112SectionHeader-sectionHeader.bds112SectionHeader---large .bds112SectionHeader-title {
3004
+ .bds120SectionHeader-sectionHeader.bds120SectionHeader---large .bds120SectionHeader-title {
2974
3005
  font-size: var(--bds-font_size--display);
2975
3006
  line-height: var(--bds-font_line-height--display);
2976
3007
  font-weight: var(--bds-font_weight--bold);
2977
3008
  letter-spacing: var(--bds-font_tracking--tight);
2978
3009
  }
2979
- .bds112SectionHeader-sectionHeader.bds112SectionHeader---large .bds112SectionHeader-subtitle {
3010
+ .bds120SectionHeader-sectionHeader.bds120SectionHeader---large .bds120SectionHeader-subtitle {
2980
3011
  font-size: var(--bds-font_size--heading-2);
2981
3012
  line-height: 1.3;
2982
3013
  font-weight: var(--bds-font_weight--medium);
@@ -2985,7 +3016,7 @@
2985
3016
 
2986
3017
  /* src/components/layout/IconWrapper/IconWrapper.module.css */
2987
3018
  @layer component {
2988
- .bds112IconWrapper-wrapper {
3019
+ .bds120IconWrapper-wrapper {
2989
3020
  inline-size: 2em;
2990
3021
  block-size: 2em;
2991
3022
  font-size: 3em;
@@ -3000,7 +3031,7 @@
3000
3031
  position: relative;
3001
3032
  transition: var(--bds-animation_transition);
3002
3033
  }
3003
- .bds112IconWrapper-wrapper svg {
3034
+ .bds120IconWrapper-wrapper svg {
3004
3035
  fill: currentcolor;
3005
3036
  }
3006
3037
  }