@boostdev/design-system-components 1.1.2 → 1.2.1

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 (213) hide show
  1. package/AGENTS.md +38 -14
  2. package/dist/client.cjs +85 -103
  3. package/dist/client.css +610 -601
  4. package/dist/client.d.cts +13 -16
  5. package/dist/client.d.ts +13 -16
  6. package/dist/client.js +95 -113
  7. package/dist/index.cjs +85 -103
  8. package/dist/index.css +610 -601
  9. package/dist/index.d.cts +13 -16
  10. package/dist/index.d.ts +13 -16
  11. package/dist/index.js +95 -113
  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-K5CE6HSB.js → chunk-2FGATTGT.js} +79 -17
  17. package/dist/web-components/{chunk-O4UFI2RX.js → chunk-3REOIRDW.js} +13 -11
  18. package/dist/web-components/{chunk-5IPHEONG.js → chunk-6I2DBFQ7.js} +1 -0
  19. package/dist/web-components/{chunk-VM3YHGQ2.js → chunk-AJSXNDAP.js} +1 -2
  20. package/dist/web-components/{chunk-LSC4N56Q.js → chunk-BX3IPVOB.js} +1 -2
  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-CJ5ZOO42.js → chunk-OCODKRVZ.js} +68 -44
  27. package/dist/web-components/{chunk-QDRH46TF.js → chunk-QLZ2362S.js} +1 -3
  28. package/dist/web-components/{chunk-IK3PTFZ4.js → chunk-T6AETZRP.js} +1 -3
  29. package/dist/web-components/{chunk-4BX6AWXX.js → chunk-X3FKVHLK.js} +2 -4
  30. package/dist/web-components/{chunk-A67LCT7C.js → chunk-XNA6WTXG.js} +3 -4
  31. package/dist/web-components/{chunk-XIENXR7H.js → chunk-YRXCVKHV.js} +1 -3
  32. package/dist/web-components/{chunk-6T3RKUKG.js → chunk-ZTC6GRP7.js} +1 -2
  33. package/dist/web-components/globals.js +1 -1
  34. package/dist/web-components/index.d.ts +571 -1
  35. package/dist/web-components/index.js +1515 -18
  36. package/dist/web-components/interaction/bds-accordion.js +1 -1
  37. package/dist/web-components/interaction/bds-button.d.ts +2 -2
  38. package/dist/web-components/interaction/bds-button.js +1 -1
  39. package/dist/web-components/interaction/bds-collapsible.js +1 -1
  40. package/dist/web-components/interaction/bds-dialog.js +1 -1
  41. package/dist/web-components/interaction/bds-drawer.js +1 -1
  42. package/dist/web-components/interaction/form/bds-checkbox.js +1 -1
  43. package/dist/web-components/interaction/form/bds-combobox.js +1 -1
  44. package/dist/web-components/interaction/form/bds-number-input.js +1 -1
  45. package/dist/web-components/interaction/form/bds-radio.js +1 -1
  46. package/dist/web-components/interaction/form/bds-segmented-control.d.ts +20 -3
  47. package/dist/web-components/interaction/form/bds-segmented-control.js +1 -1
  48. package/dist/web-components/interaction/form/bds-select.js +1 -1
  49. package/dist/web-components/interaction/form/bds-switch.js +1 -1
  50. package/dist/web-components/interaction/form/bds-textarea.js +1 -1
  51. package/dist/web-components/ui/bds-alert.js +1 -1
  52. package/dist/web-components/ui/bds-card.js +1 -1
  53. package/dist/web-components/ui/bds-notification-banner.js +1 -1
  54. package/package.json +2 -2
  55. package/src/components/interaction/Button/Button.module.css +12 -11
  56. package/src/components/interaction/Button/Button.native.tsx +10 -9
  57. package/src/components/interaction/Button/Button.tsx +1 -1
  58. package/src/components/interaction/Command/Command.module.css +3 -7
  59. package/src/components/interaction/Dialog/Dialog.module.css +7 -5
  60. package/src/components/interaction/Drawer/Drawer.module.css +48 -25
  61. package/src/components/interaction/Drawer/Drawer.tsx +21 -17
  62. package/src/components/interaction/DropdownMenu/DropdownMenu.module.css +1 -3
  63. package/src/components/interaction/Popover/Popover.module.css +1 -3
  64. package/src/components/interaction/form/Checkbox/Checkbox.module.css +1 -3
  65. package/src/components/interaction/form/Combobox/Combobox.module.css +2 -6
  66. package/src/components/interaction/form/FormInput/FormInput.module.css +1 -3
  67. package/src/components/interaction/form/NumberInput/NumberInput.module.css +16 -4
  68. package/src/components/interaction/form/Radio/Radio.module.css +6 -16
  69. package/src/components/interaction/form/SegmentedControl/SegmentedControl.mdx +74 -25
  70. package/src/components/interaction/form/SegmentedControl/SegmentedControl.module.css +65 -36
  71. package/src/components/interaction/form/SegmentedControl/SegmentedControl.spec.tsx +127 -56
  72. package/src/components/interaction/form/SegmentedControl/SegmentedControl.stories.tsx +89 -72
  73. package/src/components/interaction/form/SegmentedControl/SegmentedControl.tsx +40 -62
  74. package/src/components/interaction/form/SegmentedControl/index.ts +1 -1
  75. package/src/components/interaction/form/Select/Select.module.css +2 -4
  76. package/src/components/interaction/form/Switch/Switch.module.css +5 -7
  77. package/src/components/interaction/form/Switch/Switch.native.spec.tsx +9 -9
  78. package/src/components/interaction/form/Switch/Switch.native.tsx +2 -2
  79. package/src/components/interaction/form/Textarea/Textarea.module.css +1 -3
  80. package/src/components/interaction/form/atoms/InputContainer.stories.tsx +64 -0
  81. package/src/components/interaction/form/atoms/Label.stories.tsx +33 -0
  82. package/src/components/interaction/form/atoms/Message.stories.tsx +33 -0
  83. package/src/components/layout/Card/Card.module.css +1 -3
  84. package/src/components/ui/Accordion/Accordion.module.css +1 -2
  85. package/src/components/ui/Alert/Alert.module.css +1 -2
  86. package/src/components/ui/Calendar/Calendar.module.css +2 -5
  87. package/src/components/ui/Carousel/Carousel.module.css +1 -3
  88. package/src/components/ui/NotificationBanner/NotificationBanner.module.css +1 -2
  89. package/src/components/ui/Pagination/Pagination.module.css +1 -2
  90. package/src/components/ui/SkipLink/SkipLink.module.css +1 -2
  91. package/src/components/ui/Table/Table.module.css +1 -2
  92. package/src/css/bdc.css +16 -11
  93. package/src/index.ts +1 -1
  94. package/src/stories/Introduction.mdx +2 -1
  95. package/src/web-components/globals.ts +3 -3
  96. package/src/web-components/index.ts +12 -0
  97. package/src/web-components/interaction/BdsAccordion.mdx +103 -0
  98. package/src/web-components/interaction/BdsAccordion.stories.tsx +94 -0
  99. package/src/web-components/interaction/BdsCollapsible.mdx +116 -0
  100. package/src/web-components/interaction/BdsCollapsible.stories.tsx +68 -0
  101. package/src/web-components/interaction/BdsDialog.mdx +110 -0
  102. package/src/web-components/interaction/BdsDialog.stories.tsx +157 -0
  103. package/src/web-components/interaction/BdsDrawer.mdx +108 -0
  104. package/src/web-components/interaction/BdsDrawer.stories.tsx +196 -0
  105. package/src/web-components/interaction/BdsDropdownMenu.mdx +108 -0
  106. package/src/web-components/interaction/BdsDropdownMenu.stories.tsx +91 -0
  107. package/src/web-components/interaction/BdsSkipLink.mdx +90 -0
  108. package/src/web-components/interaction/BdsSkipLink.stories.tsx +68 -0
  109. package/src/web-components/interaction/BdsTabs.mdx +117 -0
  110. package/src/web-components/interaction/BdsTabs.stories.tsx +94 -0
  111. package/src/web-components/interaction/BdsTooltip.mdx +104 -0
  112. package/src/web-components/interaction/BdsTooltip.stories.tsx +87 -0
  113. package/src/web-components/interaction/bds-accordion.ts +1 -2
  114. package/src/web-components/interaction/bds-button.ts +15 -13
  115. package/src/web-components/interaction/bds-collapsible.ts +1 -0
  116. package/src/web-components/interaction/bds-dialog.ts +2 -5
  117. package/src/web-components/interaction/bds-drawer.ts +70 -44
  118. package/src/web-components/interaction/bds-dropdown-menu-item.ts +124 -0
  119. package/src/web-components/interaction/bds-dropdown-menu.spec.ts +102 -0
  120. package/src/web-components/interaction/bds-dropdown-menu.ts +200 -0
  121. package/src/web-components/interaction/form/BdsCheckbox.mdx +76 -0
  122. package/src/web-components/interaction/form/BdsCheckbox.stories.tsx +72 -0
  123. package/src/web-components/interaction/form/BdsCheckboxGroup.mdx +70 -0
  124. package/src/web-components/interaction/form/BdsCheckboxGroup.stories.tsx +81 -0
  125. package/src/web-components/interaction/form/BdsCombobox.mdx +71 -0
  126. package/src/web-components/interaction/form/BdsCombobox.stories.tsx +93 -0
  127. package/src/web-components/interaction/form/BdsFileInput.mdx +79 -0
  128. package/src/web-components/interaction/form/BdsFileInput.stories.tsx +69 -0
  129. package/src/web-components/interaction/form/BdsFormInput.mdx +98 -0
  130. package/src/web-components/interaction/form/BdsFormInput.stories.tsx +139 -0
  131. package/src/web-components/interaction/form/BdsNumberInput.mdx +70 -0
  132. package/src/web-components/interaction/form/BdsNumberInput.stories.tsx +68 -0
  133. package/src/web-components/interaction/form/BdsRadio.mdx +72 -0
  134. package/src/web-components/interaction/form/BdsRadio.stories.tsx +58 -0
  135. package/src/web-components/interaction/form/BdsRadioGroup.mdx +73 -0
  136. package/src/web-components/interaction/form/BdsRadioGroup.stories.tsx +88 -0
  137. package/src/web-components/interaction/form/BdsSegmentedControl.mdx +95 -0
  138. package/src/web-components/interaction/form/BdsSegmentedControl.stories.tsx +102 -0
  139. package/src/web-components/interaction/form/BdsSelect.mdx +76 -0
  140. package/src/web-components/interaction/form/BdsSelect.stories.tsx +84 -0
  141. package/src/web-components/interaction/form/BdsSlider.mdx +77 -0
  142. package/src/web-components/interaction/form/BdsSlider.stories.tsx +68 -0
  143. package/src/web-components/interaction/form/BdsSwitch.mdx +72 -0
  144. package/src/web-components/interaction/form/BdsSwitch.stories.tsx +58 -0
  145. package/src/web-components/interaction/form/BdsTextarea.mdx +73 -0
  146. package/src/web-components/interaction/form/BdsTextarea.stories.tsx +70 -0
  147. package/src/web-components/interaction/form/bds-checkbox-group.spec.ts +55 -0
  148. package/src/web-components/interaction/form/bds-checkbox-group.ts +117 -0
  149. package/src/web-components/interaction/form/bds-checkbox.ts +1 -3
  150. package/src/web-components/interaction/form/bds-combobox.ts +1 -3
  151. package/src/web-components/interaction/form/bds-form-input.spec.ts +83 -0
  152. package/src/web-components/interaction/form/bds-form-input.ts +268 -0
  153. package/src/web-components/interaction/form/bds-number-input.ts +3 -4
  154. package/src/web-components/interaction/form/bds-radio-group.spec.ts +62 -0
  155. package/src/web-components/interaction/form/bds-radio-group.ts +142 -0
  156. package/src/web-components/interaction/form/bds-radio.ts +6 -12
  157. package/src/web-components/interaction/form/bds-segmented-control.ts +96 -20
  158. package/src/web-components/interaction/form/bds-select.ts +2 -4
  159. package/src/web-components/interaction/form/bds-switch.ts +3 -4
  160. package/src/web-components/interaction/form/bds-textarea.ts +1 -3
  161. package/src/web-components/ui/BdsAvatar.mdx +76 -0
  162. package/src/web-components/ui/BdsAvatar.stories.tsx +48 -0
  163. package/src/web-components/ui/BdsBreadcrumb.mdx +66 -0
  164. package/src/web-components/ui/BdsBreadcrumb.stories.tsx +49 -0
  165. package/src/web-components/ui/BdsButtonGroup.mdx +69 -0
  166. package/src/web-components/ui/BdsButtonGroup.stories.tsx +66 -0
  167. package/src/web-components/ui/BdsCalendar.mdx +93 -0
  168. package/src/web-components/ui/BdsCalendar.stories.tsx +63 -0
  169. package/src/web-components/ui/BdsCard.mdx +88 -0
  170. package/src/web-components/ui/BdsCard.stories.tsx +67 -0
  171. package/src/web-components/ui/BdsCarousel.mdx +83 -0
  172. package/src/web-components/ui/BdsCarousel.stories.tsx +96 -0
  173. package/src/web-components/ui/BdsDescriptionList.mdx +64 -0
  174. package/src/web-components/ui/BdsDescriptionList.stories.tsx +64 -0
  175. package/src/web-components/ui/BdsIconWrapper.mdx +70 -0
  176. package/src/web-components/ui/BdsIconWrapper.stories.tsx +81 -0
  177. package/src/web-components/ui/BdsLink.mdx +79 -0
  178. package/src/web-components/ui/BdsLink.stories.tsx +63 -0
  179. package/src/web-components/ui/BdsLoading.mdx +58 -0
  180. package/src/web-components/ui/BdsLoading.stories.tsx +35 -0
  181. package/src/web-components/ui/BdsNotificationBanner.mdx +85 -0
  182. package/src/web-components/ui/BdsNotificationBanner.stories.tsx +84 -0
  183. package/src/web-components/ui/BdsPagination.mdx +74 -0
  184. package/src/web-components/ui/BdsPagination.stories.tsx +36 -0
  185. package/src/web-components/ui/BdsProgress.mdx +70 -0
  186. package/src/web-components/ui/BdsProgress.stories.tsx +96 -0
  187. package/src/web-components/ui/BdsProgressCircle.mdx +70 -0
  188. package/src/web-components/ui/BdsProgressCircle.stories.tsx +57 -0
  189. package/src/web-components/ui/BdsRating.mdx +61 -0
  190. package/src/web-components/ui/BdsRating.stories.tsx +45 -0
  191. package/src/web-components/ui/BdsSectionHeader.mdx +72 -0
  192. package/src/web-components/ui/BdsSectionHeader.stories.tsx +54 -0
  193. package/src/web-components/ui/BdsSeparator.mdx +77 -0
  194. package/src/web-components/ui/BdsSeparator.stories.tsx +55 -0
  195. package/src/web-components/ui/BdsSkeleton.mdx +61 -0
  196. package/src/web-components/ui/BdsSkeleton.stories.tsx +50 -0
  197. package/src/web-components/ui/BdsTable.mdx +81 -0
  198. package/src/web-components/ui/BdsTable.stories.tsx +83 -0
  199. package/src/web-components/ui/BdsTypography.mdx +74 -0
  200. package/src/web-components/ui/BdsTypography.stories.tsx +52 -0
  201. package/src/web-components/ui/bds-alert.ts +1 -2
  202. package/src/web-components/ui/bds-button-group.spec.ts +40 -0
  203. package/src/web-components/ui/bds-button-group.ts +78 -0
  204. package/src/web-components/ui/bds-calendar.spec.ts +91 -0
  205. package/src/web-components/ui/bds-calendar.ts +427 -0
  206. package/src/web-components/ui/bds-card.ts +1 -3
  207. package/src/web-components/ui/bds-carousel.spec.ts +64 -0
  208. package/src/web-components/ui/bds-carousel.ts +296 -0
  209. package/src/web-components/ui/bds-notification-banner.ts +1 -2
  210. package/src/web-components/ui/bds-pagination.spec.ts +67 -0
  211. package/src/web-components/ui/bds-pagination.ts +197 -0
  212. package/src/web-components/ui/bds-table.spec.ts +45 -0
  213. package/src/web-components/ui/bds-table.ts +96 -0
package/dist/client.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
+ .bds121Accordion-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
+ .bds121Accordion-item {
40
41
  border-block-end: 1px solid var(--bds-color_bg--subtle);
41
42
  }
42
- .bds112Accordion-item:last-child {
43
+ .bds121Accordion-item:last-child {
43
44
  border-block-end: none;
44
45
  }
45
- .bds112Accordion-heading {
46
+ .bds121Accordion-heading {
46
47
  margin: 0;
47
48
  }
48
- .bds112Accordion-trigger {
49
+ .bds121Accordion-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
+ .bds121Accordion-trigger:disabled {
64
65
  opacity: 0.4;
65
66
  cursor: not-allowed;
66
67
  }
67
- .bds112Accordion-trigger:focus-visible {
68
+ .bds121Accordion-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
+ .bds121Accordion-trigger:not(:disabled):hover {
74
75
  background-color: var(--bds-color_bg--subtle);
75
76
  }
76
77
  }
77
- .bds112Accordion-triggerLabel {
78
+ .bds121Accordion-triggerLabel {
78
79
  flex: 1;
79
80
  text-align: start;
80
81
  }
81
- .bds112Accordion-chevron {
82
+ .bds121Accordion-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
+ .bds121Accordion-item.bds121Accordion---open .bds121Accordion-chevron {
88
89
  transform: rotate(180deg);
89
90
  }
90
- .bds112Accordion-panel {
91
+ .bds121Accordion-panel {
91
92
  overflow: hidden;
92
93
  }
93
- .bds112Accordion-panelContent {
94
+ .bds121Accordion-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
+ .bds121Accordion-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
+ .bds121Alert-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
+ .bds121Alert---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
+ .bds121Alert---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
+ .bds121Alert---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
+ .bds121Alert---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
+ .bds121Alert-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
+ .bds121Alert-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
+ .bds121Alert-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
+ .bds121Alert-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
+ .bds121Alert-dismiss svg {
172
172
  width: 1rem;
173
173
  height: 1rem;
174
174
  }
175
- .bds112Alert-dismiss:focus-visible {
175
+ .bds121Alert-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
+ .bds121Alert-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
+ .bds121Avatar-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
+ .bds121Avatar-avatar.bds121Avatar---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
+ .bds121Avatar-avatar.bds121Avatar---size_small {
204
204
  --avatar_size: 2em;
205
205
  }
206
- .bds112Avatar-avatar.bds112Avatar---size_medium {
206
+ .bds121Avatar-avatar.bds121Avatar---size_medium {
207
207
  --avatar_size: 3em;
208
208
  }
209
- .bds112Avatar-avatar.bds112Avatar---size_large {
209
+ .bds121Avatar-avatar.bds121Avatar---size_large {
210
210
  --avatar_size: 4.5em;
211
211
  }
212
- .bds112Avatar-image {
212
+ .bds121Avatar-image {
213
213
  width: 100%;
214
214
  height: 100%;
215
215
  object-fit: cover;
216
216
  display: block;
217
217
  }
218
- .bds112Avatar-initials {
218
+ .bds121Avatar-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
+ .bds121Avatar-avatar.bds121Avatar---size_small .bds121Avatar-initials {
224
224
  font-size: var(--bds-font_size--body--s);
225
225
  }
226
- .bds112Avatar-avatar.bds112Avatar---size_large .bds112Avatar-initials {
226
+ .bds121Avatar-avatar.bds121Avatar---size_large .bds121Avatar-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
+ .bds121Badge-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
+ .bds121Badge---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
+ .bds121Badge---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
+ .bds121Badge---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
+ .bds121Badge---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
+ .bds121Badge---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
+ .bds121Breadcrumb-breadcrumb {
271
271
  font-size: var(--bds-font_size--body--s);
272
272
  }
273
- .bds112Breadcrumb-list {
273
+ .bds121Breadcrumb-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
+ .bds121Breadcrumb-item {
283
283
  display: flex;
284
284
  align-items: center;
285
285
  gap: var(--bds-space_xxs);
286
286
  }
287
- .bds112Breadcrumb-link {
287
+ .bds121Breadcrumb-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
+ .bds121Breadcrumb-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
+ .bds121Breadcrumb-link:hover {
299
299
  text-decoration: underline;
300
300
  text-underline-offset: 0.2em;
301
301
  }
302
302
  }
303
- .bds112Breadcrumb-separator {
303
+ .bds121Breadcrumb-separator {
304
304
  color: var(--bds-color_on-bg--subtle);
305
305
  user-select: none;
306
306
  }
307
- .bds112Breadcrumb-current {
307
+ .bds121Breadcrumb-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
+ .bds121Collapsible-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
+ .bds121Collapsible-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
+ .bds121Collapsible-summary::-webkit-details-marker {
336
336
  display: none;
337
337
  }
338
- .bds112Collapsible-summary:focus-visible {
338
+ .bds121Collapsible-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
+ .bds121Collapsible-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
+ .bds121Collapsible-collapsible[open] > .bds121Collapsible-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
+ .bds121Collapsible-summaryContent {
351
351
  flex: 1;
352
352
  }
353
- .bds112Collapsible-icon {
353
+ .bds121Collapsible-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
+ .bds121Collapsible-collapsible[open] > .bds121Collapsible-summary .bds121Collapsible-icon {
363
363
  transform: rotate(-135deg);
364
364
  }
365
- .bds112Collapsible-content {
365
+ .bds121Collapsible-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
+ .bds121Collapsible-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
+ .bds121Calendar-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
+ .bds121Calendar-header {
396
394
  display: flex;
397
395
  align-items: center;
398
396
  justify-content: space-between;
399
397
  }
400
- .bds112Calendar-monthYear {
398
+ .bds121Calendar-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
+ .bds121Calendar-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
+ .bds121Calendar-navBtn svg {
418
416
  inline-size: 1rem;
419
417
  block-size: 1rem;
420
418
  }
421
- .bds112Calendar-navBtn:focus-visible {
419
+ .bds121Calendar-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
+ .bds121Calendar-navBtn:hover {
427
425
  background-color: var(--bds-color_bg--subtle);
428
426
  }
429
427
  }
430
- .bds112Calendar-grid {
428
+ .bds121Calendar-grid {
431
429
  border-collapse: collapse;
432
430
  inline-size: 100%;
433
431
  table-layout: fixed;
434
432
  }
435
- .bds112Calendar-weekday {
433
+ .bds121Calendar-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
+ .bds121Calendar-empty {
443
441
  padding: 0;
444
442
  }
445
- .bds112Calendar-day {
443
+ .bds121Calendar-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
+ .bds121Calendar-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
+ .bds121Calendar-day:not(.bds121Calendar-disabled, .bds121Calendar-selected):hover {
465
463
  background-color: var(--bds-color_bg--subtle);
466
464
  }
467
465
  }
468
- .bds112Calendar-today {
466
+ .bds121Calendar-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
+ .bds121Calendar-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
+ .bds121Calendar-disabled {
481
478
  opacity: 0.35;
482
479
  cursor: not-allowed;
483
480
  }
484
481
  @media (prefers-reduced-motion: reduce) {
485
- .bds112Calendar-day {
482
+ .bds121Calendar-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
+ .bds121Carousel-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
+ .bds121Carousel-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
+ .bds121Carousel-track::-webkit-scrollbar {
509
506
  display: none;
510
507
  }
511
- .bds112Carousel-slide {
508
+ .bds121Carousel-slide {
512
509
  scroll-snap-align: start;
513
510
  flex-shrink: 0;
514
511
  }
515
- .bds112Carousel-navBtn {
512
+ .bds121Carousel-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
+ .bds121Carousel-navBtn svg {
535
530
  inline-size: 1.25rem;
536
531
  block-size: 1.25rem;
537
532
  }
538
- .bds112Carousel-navBtn:focus-visible {
533
+ .bds121Carousel-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
+ .bds121Carousel-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
+ .bds121Carousel-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
+ .bds121DescriptionList-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
+ .bds121DescriptionList-group {
566
561
  display: flex;
567
562
  flex-direction: column;
568
563
  gap: var(--bds-space_xxs);
569
564
  }
570
- .bds112DescriptionList-term {
565
+ .bds121DescriptionList-term {
571
566
  font-weight: var(--bds-font_weight--semibold);
572
567
  color: var(--bds-color_on-bg);
573
568
  }
574
- .bds112DescriptionList-details {
569
+ .bds121DescriptionList-details {
575
570
  margin: 0;
576
571
  color: var(--bds-color_on-bg);
577
572
  }
578
- .bds112DescriptionList---layout_inline .bds112DescriptionList-group {
573
+ .bds121DescriptionList---layout_inline .bds121DescriptionList-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
+ .bds121DescriptionList---layout_inline .bds121DescriptionList-term {
585
580
  grid-column: 1;
586
581
  }
587
- .bds112DescriptionList---layout_inline .bds112DescriptionList-details {
582
+ .bds121DescriptionList---layout_inline .bds121DescriptionList-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
+ .bds121Link-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
+ .bds121Link-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
+ .bds121Link-link:hover {
608
603
  --link_color: var(--link_color-hover, var(--bds-color_blue--strong));
609
604
  }
610
605
  }
611
- .bds112Link---variant_default {
606
+ .bds121Link---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
+ .bds121Link---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
+ .bds121Link---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
+ .bds121Link---variant_standalone:hover {
630
625
  text-decoration: underline;
631
626
  text-underline-offset: 0.2em;
632
627
  }
633
628
  }
634
- .bds112Link-externalLabel {
629
+ .bds121Link-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
+ .bds121Loading-loading {
650
645
  display: flex;
651
646
  justify-content: center;
652
647
  align-items: center;
653
648
  }
654
- .bds112Loading-spinner {
649
+ .bds121Loading-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
+ .bds121Loading---size_small .bds121Loading-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
+ .bds121Loading---size_large .bds121Loading-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
+ .bds121Loading-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
+ .bds121NotificationBanner-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
+ .bds121NotificationBanner---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
+ .bds121NotificationBanner---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
+ .bds121NotificationBanner---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
+ .bds121NotificationBanner---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
+ .bds121NotificationBanner-content {
722
717
  flex: 1;
723
718
  }
724
- .bds112NotificationBanner-action {
719
+ .bds121NotificationBanner-action {
725
720
  flex-shrink: 0;
726
721
  }
727
- .bds112NotificationBanner-dismiss {
722
+ .bds121NotificationBanner-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
+ .bds121NotificationBanner-dismiss svg {
743
737
  inline-size: 1rem;
744
738
  block-size: 1rem;
745
739
  }
746
- .bds112NotificationBanner-dismiss:focus-visible {
740
+ .bds121NotificationBanner-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
+ .bds121NotificationBanner-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
+ .bds121Pagination-pagination {
760
754
  display: flex;
761
755
  justify-content: center;
762
756
  }
763
- .bds112Pagination-list {
757
+ .bds121Pagination-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
+ .bds121Pagination-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
+ .bds121Pagination-button:disabled {
794
787
  opacity: 0.4;
795
788
  cursor: not-allowed;
796
789
  }
797
- .bds112Pagination-button:focus-visible {
790
+ .bds121Pagination-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
+ .bds121Pagination-button:not(:disabled, .bds121Pagination---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
+ .bds121Pagination-button.bds121Pagination---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
+ .bds121Pagination-button.bds121Pagination---nav svg {
813
806
  inline-size: 1rem;
814
807
  block-size: 1rem;
815
808
  }
816
- .bds112Pagination-ellipsis {
809
+ .bds121Pagination-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
+ .bds121Progress-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
+ .bds121Progress-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
+ .bds121Progress-value {
844
837
  font-variant-numeric: tabular-nums;
845
838
  }
846
- .bds112Progress-track {
839
+ .bds121Progress-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
+ .bds121Progress-track.bds121Progress---size_small {
854
847
  --progress_height: var(--bds-space_xxs);
855
848
  }
856
- .bds112Progress-track.bds112Progress---size_medium {
849
+ .bds121Progress-track.bds121Progress---size_medium {
857
850
  --progress_height: var(--bds-space_xs);
858
851
  }
859
- .bds112Progress-track.bds112Progress---size_large {
852
+ .bds121Progress-track.bds121Progress---size_large {
860
853
  --progress_height: var(--bds-space_s);
861
854
  }
862
- .bds112Progress-fill {
855
+ .bds121Progress-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
+ .bds121Progress-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
+ .bds121ProgressCircle-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
+ .bds121ProgressCircle-svg {
884
877
  display: block;
885
878
  }
886
- .bds112ProgressCircle-track {
879
+ .bds121ProgressCircle-track {
887
880
  stroke: var(--bds-color_bg--subtle);
888
881
  }
889
- .bds112ProgressCircle-fill {
882
+ .bds121ProgressCircle-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
+ .bds121ProgressCircle-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
+ .bds121ProgressCircle---size_small .bds121ProgressCircle-value {
902
895
  font-size: 0.5rem;
903
896
  }
904
- .bds112ProgressCircle---size_medium .bds112ProgressCircle-value {
897
+ .bds121ProgressCircle---size_medium .bds121ProgressCircle-value {
905
898
  font-size: var(--bds-font_size--body--s);
906
899
  }
907
- .bds112ProgressCircle---size_large .bds112ProgressCircle-value {
900
+ .bds121ProgressCircle---size_large .bds121ProgressCircle-value {
908
901
  font-size: var(--bds-font_size--body);
909
902
  }
910
903
  @media (prefers-reduced-motion: reduce) {
911
- .bds112ProgressCircle-fill {
904
+ .bds121ProgressCircle-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
+ .bds121Separator-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
+ .bds121Separator-separator.bds121Separator---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
+ .bds121Separator-separator.bds121Separator---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
+ .bds121Skeleton-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
+ .bds121SkipLink-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
+ .bds121SkipLink-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
+ .bds121SkipLink-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
+ .bds121Table-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
+ .bds121Table-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
+ .bds121Table-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
+ .bds121Table-thead {
1018
1009
  background-color: var(--bds-color_bg--subtle);
1019
1010
  }
1020
- .bds112Table-th {
1011
+ .bds121Table-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
+ .bds121Table-th.bds121Table---sortable {
1030
1021
  padding: 0;
1031
1022
  }
1032
- .bds112Table-sortButton {
1023
+ .bds121Table-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
+ .bds121Table-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
+ .bds121Table-sortButton:hover {
1052
1043
  color: var(--bds-color_on-bg);
1053
1044
  }
1054
1045
  }
1055
- .bds112Table-sortIcon {
1046
+ .bds121Table-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
+ .bds121Table-sortIcon.bds121Table---sort-active {
1062
1053
  opacity: 1;
1063
1054
  color: var(--bds-color_interactive);
1064
1055
  }
1065
- .bds112Table-sortIcon.bds112Table---sort-desc {
1056
+ .bds121Table-sortIcon.bds121Table---sort-desc {
1066
1057
  transform: rotate(180deg);
1067
1058
  }
1068
- .bds112Table-tbody .bds112Table-tr {
1059
+ .bds121Table-tbody .bds121Table-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
+ .bds121Table-tbody .bds121Table-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
+ .bds121Table-tbody .bds121Table-tr:hover {
1077
1068
  background-color: var(--bds-color_bg--subtle);
1078
1069
  }
1079
1070
  }
1080
- .bds112Table-td {
1071
+ .bds121Table-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
+ .bds121Table-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
+ .bds121Tabs-tabs {
1095
1086
  display: flex;
1096
1087
  flex-direction: column;
1097
1088
  }
1098
- .bds112Tabs-tabList {
1089
+ .bds121Tabs-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
+ .bds121Tabs-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
+ .bds121Tabs-tab.bds121Tabs---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
+ .bds121Tabs-tab:disabled {
1122
1113
  opacity: 0.4;
1123
1114
  cursor: not-allowed;
1124
1115
  }
1125
- .bds112Tabs-tab:focus-visible {
1116
+ .bds121Tabs-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
+ .bds121Tabs-tab:not(:disabled, .bds121Tabs---active):hover {
1132
1123
  --tab_color: var(--bds-color_interactive_on-bg);
1133
1124
  }
1134
1125
  }
1135
- .bds112Tabs-panel {
1126
+ .bds121Tabs-panel {
1136
1127
  padding-block-start: var(--bds-space_m);
1137
1128
  }
1138
- .bds112Tabs-panel:focus-visible {
1129
+ .bds121Tabs-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
+ .bds121Tooltip-wrapper {
1147
1138
  position: relative;
1148
1139
  display: inline-flex;
1149
1140
  align-items: center;
1150
1141
  }
1151
- .bds112Tooltip-tooltip {
1142
+ .bds121Tooltip-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
+ .bds121Tooltip-wrapper:hover .bds121Tooltip-tooltip,
1158
+ .bds121Tooltip-wrapper:focus-within .bds121Tooltip-tooltip {
1168
1159
  visibility: visible;
1169
1160
  opacity: 1;
1170
1161
  }
1171
- .bds112Tooltip---placement_top {
1162
+ .bds121Tooltip---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
+ .bds121Tooltip---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
+ .bds121Tooltip---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
+ .bds121Tooltip---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
+ .bds121Tooltip-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
+ .bds121Typography-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
+ .bds121Typography---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
+ .bds121Typography---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
+ .bds121Typography---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
+ .bds121Typography---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
+ .bds121Typography---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
+ .bds121Button-button,
1251
+ .bds121Button-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
+ .bds121Button-button.bds121Button---default {
1288
1278
  }
1289
- .bds112Button-button.bds112Button---ghost {
1279
+ .bds121Button-button.bds121Button---outline,
1280
+ .bds121Button-button.bds121Button---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
+ .bds121Button-button.bds121Button---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
+ .bds121Button-button.bds121Button---size_medium {
1301
1292
  --button_height: 3em;
1302
1293
  padding-inline: var(--bds-space_l);
1303
1294
  }
1304
- .bds112Button-button.bds112Button---size_large {
1295
+ .bds121Button-button.bds121Button---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
+ .bds121Button-button.bds121Button---hasPulse {
1310
1301
  animation: pulse 3s infinite;
1311
1302
  }
1312
- .bds112Button-button[href] {
1303
+ .bds121Button-button[href] {
1313
1304
  text-decoration: none;
1314
1305
  }
1315
- .bds112Button-button svg {
1306
+ .bds121Button-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
+ .bds121Button-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
+ .bds121Button-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
+ .bds121Button-button:hover .bds121Button-iconStart svg {
1335
1326
  animation: fadeZoom 2s ease-out infinite;
1336
1327
  }
1337
- .bds112Button-button:hover .bds112Button-iconEnd svg {
1328
+ .bds121Button-button:hover .bds121Button-iconEnd svg {
1338
1329
  animation: fadeZoom 2s ease-out infinite;
1339
1330
  }
1340
1331
  }
1341
- .bds112Button-button:focus-visible {
1332
+ .bds121Button-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
+ .bds121Button-button.bds121Button---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
+ .bds121Button-button.bds121Button---outline:hover,
1347
+ .bds121Button-button.bds121Button---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
+ .bds121Command-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
+ .bds121Command-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
+ .bds121Command-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
+ .bds121Command-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
+ .bds121Command-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
+ .bds121Command-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
+ .bds121Command-search::placeholder {
1419
1409
  color: var(--bds-color_on-bg);
1420
1410
  }
1421
- .bds112Command-escHint {
1411
+ .bds121Command-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
+ .bds121Command-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
+ .bds121Command-groupList {
1439
1428
  list-style: none;
1440
1429
  margin: 0;
1441
1430
  padding: 0;
1442
1431
  }
1443
- .bds112Command-group {
1432
+ .bds121Command-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
+ .bds121Command-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
+ .bds121Command-itemActive {
1460
1449
  background-color: var(--bds-color_bg--subtle);
1461
1450
  }
1462
- .bds112Command-itemLabel {
1451
+ .bds121Command-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
+ .bds121Command-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
+ .bds121Command-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
+ .bds121Command-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
+ .bds121Dialog-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
+ .bds121Dialog-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
+ .bds121Dialog-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
+ .bds121Dialog-closeButton:focus-visible {
1519
+ outline: var(--bds-outline_default);
1520
+ outline-offset: var(--bds-outline_offset);
1521
+ }
1522
+ .bds121Dialog-closeButton svg {
1534
1523
  inline-size: 1.25em;
1535
1524
  block-size: 1.25em;
1536
1525
  }
1537
- .bds112Dialog-dialog::backdrop {
1526
+ .bds121Dialog-dialog::backdrop {
1538
1527
  background-color: var(--color_backdrop, rgb(0 0 0 / 50%));
1539
1528
  backdrop-filter: blur(3px);
1540
1529
  }
@@ -1542,43 +1531,62 @@
1542
1531
 
1543
1532
  /* src/components/interaction/Drawer/Drawer.module.css */
1544
1533
  @layer component {
1545
- .bds112Drawer-drawer {
1534
+ .bds121Drawer-drawer {
1546
1535
  position: fixed;
1547
- inset: 0;
1536
+ inset-block: 0;
1537
+ inset-inline: auto 0;
1538
+ inline-size: min(28rem, 90vw);
1539
+ max-inline-size: 100vw;
1540
+ block-size: 100dvh;
1541
+ max-block-size: 100dvh;
1548
1542
  margin: 0;
1549
1543
  padding: 0;
1550
- inline-size: 100%;
1551
- max-inline-size: 100%;
1552
- block-size: 100%;
1553
- max-block-size: 100%;
1554
- border: none;
1555
- background: transparent;
1556
- overflow: hidden;
1557
- }
1558
- .bds112Drawer-drawer::backdrop {
1559
- background-color: var(--color_backdrop, rgb(0 0 0 / 50%));
1560
- backdrop-filter: blur(3px);
1561
- }
1562
- .bds112Drawer-panel {
1563
- position: absolute;
1564
- inset-block: 0;
1565
1544
  display: flex;
1566
1545
  flex-direction: column;
1567
- inline-size: min(28rem, 90vw);
1568
- block-size: 100%;
1569
1546
  background-color: var(--drawer_color, var(--bds-color_bg));
1570
1547
  color: var(--drawer_on-color, var(--bds-color_on-bg));
1548
+ border: none;
1571
1549
  box-shadow: var(--bds-shadow_xl);
1572
1550
  overflow: hidden;
1573
- transition: var(--bds-animation_transition);
1551
+ translate: 100% 0;
1552
+ transition:
1553
+ translate var(--bds-animation_transition-duration) var(--bds-animation_easing),
1554
+ display var(--bds-animation_transition-duration) var(--bds-animation_easing) allow-discrete,
1555
+ overlay var(--bds-animation_transition-duration) var(--bds-animation_easing) allow-discrete;
1574
1556
  }
1575
- .bds112Drawer---side_right .bds112Drawer-panel {
1576
- inset-inline-end: 0;
1557
+ .bds121Drawer---side_left.bds121Drawer-drawer {
1558
+ inset-inline: 0 auto;
1559
+ translate: -100% 0;
1577
1560
  }
1578
- .bds112Drawer---side_left .bds112Drawer-panel {
1579
- inset-inline-start: 0;
1561
+ .bds121Drawer-drawer[open] {
1562
+ translate: 0 0;
1580
1563
  }
1581
- .bds112Drawer-header {
1564
+ @starting-style {
1565
+ .bds121Drawer-drawer[open] {
1566
+ translate: 100% 0;
1567
+ }
1568
+ .bds121Drawer---side_left.bds121Drawer-drawer[open] {
1569
+ translate: -100% 0;
1570
+ }
1571
+ }
1572
+ .bds121Drawer-drawer::backdrop {
1573
+ background-color: var(--color_backdrop, rgb(0 0 0 / 50%));
1574
+ backdrop-filter: blur(3px);
1575
+ opacity: 0;
1576
+ transition:
1577
+ opacity var(--bds-animation_transition-duration) var(--bds-animation_easing),
1578
+ display var(--bds-animation_transition-duration) var(--bds-animation_easing) allow-discrete,
1579
+ overlay var(--bds-animation_transition-duration) var(--bds-animation_easing) allow-discrete;
1580
+ }
1581
+ .bds121Drawer-drawer[open]::backdrop {
1582
+ opacity: 1;
1583
+ }
1584
+ @starting-style {
1585
+ .bds121Drawer-drawer[open]::backdrop {
1586
+ opacity: 0;
1587
+ }
1588
+ }
1589
+ .bds121Drawer-header {
1582
1590
  display: flex;
1583
1591
  align-items: center;
1584
1592
  justify-content: space-between;
@@ -1586,7 +1594,7 @@
1586
1594
  border-block-end: 1px solid currentcolor;
1587
1595
  flex-shrink: 0;
1588
1596
  }
1589
- .bds112Drawer-closeButton {
1597
+ .bds121Drawer-closeButton {
1590
1598
  all: unset;
1591
1599
  display: flex;
1592
1600
  align-items: center;
@@ -1597,20 +1605,20 @@
1597
1605
  cursor: pointer;
1598
1606
  transition: var(--bds-animation_transition);
1599
1607
  }
1600
- .bds112Drawer-closeButton svg {
1608
+ .bds121Drawer-closeButton svg {
1601
1609
  inline-size: 1.25rem;
1602
1610
  block-size: 1.25rem;
1603
1611
  }
1604
- .bds112Drawer-closeButton:focus-visible {
1612
+ .bds121Drawer-closeButton:focus-visible {
1605
1613
  outline: var(--bds-outline_default);
1606
1614
  outline-offset: var(--bds-outline_offset);
1607
1615
  }
1608
1616
  @media (hover: hover) and (pointer: fine) {
1609
- .bds112Drawer-closeButton:hover {
1617
+ .bds121Drawer-closeButton:hover {
1610
1618
  background-color: var(--bds-color_bg--subtle);
1611
1619
  }
1612
1620
  }
1613
- .bds112Drawer-body {
1621
+ .bds121Drawer-body {
1614
1622
  flex: 1;
1615
1623
  overflow-block: auto;
1616
1624
  padding: var(--bds-space_l);
@@ -1618,7 +1626,8 @@
1618
1626
  flex-direction: column;
1619
1627
  }
1620
1628
  @media (prefers-reduced-motion: reduce) {
1621
- .bds112Drawer-panel {
1629
+ .bds121Drawer-drawer,
1630
+ .bds121Drawer-drawer::backdrop {
1622
1631
  transition: none;
1623
1632
  }
1624
1633
  }
@@ -1626,11 +1635,11 @@
1626
1635
 
1627
1636
  /* src/components/interaction/DropdownMenu/DropdownMenu.module.css */
1628
1637
  @layer component {
1629
- .bds112DropdownMenu-wrapper {
1638
+ .bds121DropdownMenu-wrapper {
1630
1639
  position: relative;
1631
1640
  display: inline-flex;
1632
1641
  }
1633
- .bds112DropdownMenu-menu {
1642
+ .bds121DropdownMenu-menu {
1634
1643
  position: absolute;
1635
1644
  inset-block-start: calc(100% + var(--bds-space_xxs));
1636
1645
  z-index: var(--bds-z-index_dropdown);
@@ -1639,28 +1648,26 @@
1639
1648
  border: var(--dropdown_border, none);
1640
1649
  --bdc_color: currentcolor;
1641
1650
  --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
1651
  border-radius: var(--dropdown_radius, var(--bdc-outline_radius));
1645
1652
  background-color: var(--dropdown_color, var(--bds-color_bg));
1646
1653
  color: var(--dropdown_on-color, var(--bds-color_on-bg));
1647
- box-shadow: var(--dropdown_shadow, var(--bds-shadow_m));
1654
+ box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--dropdown_shadow, var(--bds-shadow_m));
1648
1655
  list-style: none;
1649
1656
  margin: 0;
1650
1657
  }
1651
- .bds112DropdownMenu---placement_bottom-start {
1658
+ .bds121DropdownMenu---placement_bottom-start {
1652
1659
  inset-inline-start: 0;
1653
1660
  }
1654
- .bds112DropdownMenu---placement_bottom-end {
1661
+ .bds121DropdownMenu---placement_bottom-end {
1655
1662
  inset-inline-end: 0;
1656
1663
  }
1657
- .bds112DropdownMenu-separator {
1664
+ .bds121DropdownMenu-separator {
1658
1665
  border: none;
1659
1666
  border-block-start: 1px solid currentcolor;
1660
1667
  margin: var(--bds-space_xxs) 0;
1661
1668
  opacity: 0.15;
1662
1669
  }
1663
- .bds112DropdownMenu-item {
1670
+ .bds121DropdownMenu-item {
1664
1671
  all: unset;
1665
1672
  display: flex;
1666
1673
  align-items: center;
@@ -1674,22 +1681,22 @@
1674
1681
  box-sizing: border-box;
1675
1682
  transition: var(--bds-animation_transition);
1676
1683
  }
1677
- .bds112DropdownMenu-item:disabled {
1684
+ .bds121DropdownMenu-item:disabled {
1678
1685
  opacity: 0.4;
1679
1686
  cursor: not-allowed;
1680
1687
  }
1681
- .bds112DropdownMenu-item:focus-visible {
1688
+ .bds121DropdownMenu-item:focus-visible {
1682
1689
  outline: var(--bds-outline_default);
1683
1690
  outline-offset: calc(var(--bds-outline_offset) * -1);
1684
1691
  border-radius: var(--bds-border_radius--xs);
1685
1692
  }
1686
1693
  @media (hover: hover) and (pointer: fine) {
1687
- .bds112DropdownMenu-item:not(:disabled):hover {
1694
+ .bds121DropdownMenu-item:not(:disabled):hover {
1688
1695
  background-color: var(--bds-color_bg--subtle);
1689
1696
  color: var(--bds-color_interactive_on-bg);
1690
1697
  }
1691
1698
  }
1692
- .bds112DropdownMenu-icon {
1699
+ .bds121DropdownMenu-icon {
1693
1700
  display: flex;
1694
1701
  align-items: center;
1695
1702
  flex-shrink: 0;
@@ -1698,10 +1705,10 @@
1698
1705
 
1699
1706
  /* src/components/interaction/Popover/Popover.module.css */
1700
1707
  @layer component {
1701
- .bds112Popover-wrapper {
1708
+ .bds121Popover-wrapper {
1702
1709
  display: inline-flex;
1703
1710
  }
1704
- .bds112Popover-panel {
1711
+ .bds121Popover-panel {
1705
1712
  position: fixed;
1706
1713
  inset: unset;
1707
1714
  margin: 0;
@@ -1714,15 +1721,13 @@
1714
1721
  border: var(--popover_border, none);
1715
1722
  --bdc_color: currentcolor;
1716
1723
  --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
1724
  border-radius: var(--popover_radius, var(--bdc-outline_radius));
1720
1725
  background-color: var(--popover_color, var(--bds-color_bg));
1721
- box-shadow: var(--popover_shadow, var(--bds-shadow_m));
1726
+ box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--popover_shadow, var(--bds-shadow_m));
1722
1727
  color: var(--popover_on-color, var(--bds-color_on-bg));
1723
1728
  font-size: var(--bds-font_size--body);
1724
1729
  }
1725
- .bds112Popover-panel[data-placement=bottom] {
1730
+ .bds121Popover-panel[data-placement=bottom] {
1726
1731
  top: anchor(bottom);
1727
1732
  left: anchor(left);
1728
1733
  margin-block-start: var(--bds-space_xs, 8px);
@@ -1731,7 +1736,7 @@
1731
1736
  --popover-right,
1732
1737
  --popover-left;
1733
1738
  }
1734
- .bds112Popover-panel[data-placement=top] {
1739
+ .bds121Popover-panel[data-placement=top] {
1735
1740
  bottom: anchor(top);
1736
1741
  left: anchor(left);
1737
1742
  margin-block-end: var(--bds-space_xs, 8px);
@@ -1740,7 +1745,7 @@
1740
1745
  --popover-right,
1741
1746
  --popover-left;
1742
1747
  }
1743
- .bds112Popover-panel[data-placement=right] {
1748
+ .bds121Popover-panel[data-placement=right] {
1744
1749
  top: anchor(top);
1745
1750
  left: anchor(right);
1746
1751
  margin-inline-start: var(--bds-space_xs, 8px);
@@ -1749,7 +1754,7 @@
1749
1754
  --popover-bottom,
1750
1755
  --popover-top;
1751
1756
  }
1752
- .bds112Popover-panel[data-placement=left] {
1757
+ .bds121Popover-panel[data-placement=left] {
1753
1758
  top: anchor(top);
1754
1759
  right: anchor(left);
1755
1760
  margin-inline-end: var(--bds-space_xs, 8px);
@@ -1807,10 +1812,10 @@
1807
1812
  margin-block-end: var(--bds-space_xs, 8px);
1808
1813
  }
1809
1814
  @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] {
1815
+ .bds121Popover-panel[data-placement=bottom],
1816
+ .bds121Popover-panel[data-placement=top],
1817
+ .bds121Popover-panel[data-placement=left],
1818
+ .bds121Popover-panel[data-placement=right] {
1814
1819
  left: var(--bds-space_xs, 8px);
1815
1820
  right: var(--bds-space_xs, 8px);
1816
1821
  inline-size: 100%;
@@ -1819,13 +1824,13 @@
1819
1824
  }
1820
1825
  }
1821
1826
  @media (aspect-ratio >= 2/1) {
1822
- .bds112Popover-panel[data-placement=bottom] {
1827
+ .bds121Popover-panel[data-placement=bottom] {
1823
1828
  position-try-fallbacks:
1824
1829
  --popover-top,
1825
1830
  --popover-right,
1826
1831
  --popover-left;
1827
1832
  }
1828
- .bds112Popover-panel[data-placement=top] {
1833
+ .bds121Popover-panel[data-placement=top] {
1829
1834
  position-try-fallbacks:
1830
1835
  --popover-bottom,
1831
1836
  --popover-right,
@@ -1836,23 +1841,23 @@
1836
1841
 
1837
1842
  /* src/components/interaction/Rating/Rating.module.css */
1838
1843
  @layer component {
1839
- .bds112Rating-rating {
1844
+ .bds121Rating-rating {
1840
1845
  display: inline-flex;
1841
1846
  gap: var(--bds-space_xxxs);
1842
1847
  color: var(--bds-color_bg);
1843
1848
  }
1844
- .bds112Rating-star {
1849
+ .bds121Rating-star {
1845
1850
  width: 1.5em;
1846
1851
  height: 1.5em;
1847
1852
  }
1848
- .bds112Rating---filled {
1853
+ .bds121Rating---filled {
1849
1854
  color: var(--bds-color_warning);
1850
1855
  }
1851
1856
  }
1852
1857
 
1853
1858
  /* src/components/interaction/Toast/Toast.module.css */
1854
1859
  @layer component {
1855
- .bds112Toast-toastContainer {
1860
+ .bds121Toast-toastContainer {
1856
1861
  position: fixed;
1857
1862
  inset: unset;
1858
1863
  inset-block-end: var(--bds-space_xl);
@@ -1864,7 +1869,7 @@
1864
1869
  padding: 0;
1865
1870
  background: transparent;
1866
1871
  }
1867
- .bds112Toast-toast {
1872
+ .bds121Toast-toast {
1868
1873
  padding: var(--bds-space_m) var(--bds-space_l);
1869
1874
  background-color: var(--toast_color, var(--bds-color_bg));
1870
1875
  color: var(--toast_on-color, var(--bds-color_on-bg));
@@ -1876,26 +1881,26 @@
1876
1881
  min-inline-size: 300px;
1877
1882
  animation: slideIn var(--bds-animation_duration--fast) var(--bds-animation_easing);
1878
1883
  }
1879
- .bds112Toast-toast.bds112Toast---variant_success {
1884
+ .bds121Toast-toast.bds121Toast---variant_success {
1880
1885
  --toast_color: var(--bds-color_success);
1881
1886
  --toast_on-color: var(--bds-color_on-success);
1882
1887
  }
1883
- .bds112Toast-toast.bds112Toast---variant_warning {
1888
+ .bds121Toast-toast.bds121Toast---variant_warning {
1884
1889
  --toast_color: var(--bds-color_warning);
1885
1890
  --toast_on-color: var(--bds-color_on-warning);
1886
1891
  }
1887
- .bds112Toast-toast.bds112Toast---variant_info {
1892
+ .bds121Toast-toast.bds121Toast---variant_info {
1888
1893
  --toast_color: var(--bds-color_bg--subtle);
1889
1894
  --toast_on-color: var(--bds-color_on-bg--subtle);
1890
1895
  }
1891
- .bds112Toast-toast.bds112Toast---variant_error {
1896
+ .bds121Toast-toast.bds121Toast---variant_error {
1892
1897
  --toast_color: var(--bds-color_error);
1893
1898
  --toast_on-color: var(--bds-color_on-error);
1894
1899
  }
1895
- .bds112Toast-message {
1900
+ .bds121Toast-message {
1896
1901
  flex: 1;
1897
1902
  }
1898
- .bds112Toast-closeButton {
1903
+ .bds121Toast-closeButton {
1899
1904
  display: flex;
1900
1905
  align-items: center;
1901
1906
  justify-content: center;
@@ -1908,7 +1913,7 @@
1908
1913
  cursor: pointer;
1909
1914
  color: var(--toast_on-color);
1910
1915
  }
1911
- .bds112Toast-closeButton svg {
1916
+ .bds121Toast-closeButton svg {
1912
1917
  inline-size: 1rem;
1913
1918
  block-size: 1rem;
1914
1919
  }
@@ -1926,17 +1931,17 @@
1926
1931
 
1927
1932
  /* src/components/interaction/form/Checkbox/Checkbox.module.css */
1928
1933
  @layer component {
1929
- .bds112Checkbox-checkboxGroup {
1934
+ .bds121Checkbox-checkboxGroup {
1930
1935
  --inputSize: calc(var(--bds-space_s) * 2);
1931
1936
  display: flex;
1932
1937
  flex-direction: column;
1933
1938
  }
1934
- .bds112Checkbox-inputWrapper {
1939
+ .bds121Checkbox-inputWrapper {
1935
1940
  display: flex;
1936
1941
  align-items: stretch;
1937
1942
  gap: var(--bds-space_xs);
1938
1943
  }
1939
- .bds112Checkbox-checkbox {
1944
+ .bds121Checkbox-checkbox {
1940
1945
  margin-block-start: 0.25em;
1941
1946
  inline-size: var(--inputSize);
1942
1947
  block-size: var(--inputSize);
@@ -1944,21 +1949,19 @@
1944
1949
  border: var(--checkbox_border, none);
1945
1950
  --bdc_color: currentcolor;
1946
1951
  --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
1952
  border-radius: var(--checkbox_radius, var(--bdc-outline_radius));
1950
- box-shadow: var(--checkbox_shadow, var(--bdc-outline_shadow));
1953
+ box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--checkbox_shadow, var(--bdc-outline_shadow));
1951
1954
  appearance: none;
1952
1955
  background-color: var(--checkbox_color_bg, var(--bds-color_bg));
1953
1956
  cursor: pointer;
1954
1957
  position: relative;
1955
1958
  transition: --bdc_color 0.3s ease, background-color 0.3s ease;
1956
1959
  }
1957
- .bds112Checkbox-checkbox:checked {
1960
+ .bds121Checkbox-checkbox:checked {
1958
1961
  background-color: var(--checkbox_color-active, var(--bdc-color_active));
1959
1962
  --bdc_color: var(--checkbox_color-active, var(--bdc-color_active));
1960
1963
  }
1961
- .bds112Checkbox-checkbox:checked::after {
1964
+ .bds121Checkbox-checkbox:checked::after {
1962
1965
  content: "";
1963
1966
  position: absolute;
1964
1967
  inset-inline-start: 0.6em;
@@ -1969,33 +1972,33 @@
1969
1972
  border-width: 0 2px 2px 0;
1970
1973
  transform: rotate(45deg);
1971
1974
  }
1972
- .bds112Checkbox-checkbox:focus {
1975
+ .bds121Checkbox-checkbox:focus {
1973
1976
  --bdc_color: var(--bdc_color--focus);
1974
1977
  }
1975
- .bds112Checkbox-checkbox:focus-visible {
1978
+ .bds121Checkbox-checkbox:focus-visible {
1976
1979
  outline: var(--bds-outline_default);
1977
1980
  outline-offset: var(--bds-outline_offset);
1978
1981
  }
1979
- .bds112Checkbox-checkboxError {
1982
+ .bds121Checkbox-checkboxError {
1980
1983
  --bdc_color: var(--bdc_color--error);
1981
1984
  }
1982
1985
  }
1983
1986
 
1984
1987
  /* src/components/interaction/form/atoms/Message.module.css */
1985
1988
  @layer component {
1986
- .bds112Message-error,
1987
- .bds112Message-hint {
1989
+ .bds121Message-error,
1990
+ .bds121Message-hint {
1988
1991
  font-size: var(--bds-font_size--body--s);
1989
1992
  margin-inline-start: var(--labelPosition);
1990
1993
  }
1991
- .bds112Message-error {
1994
+ .bds121Message-error {
1992
1995
  color: var(--bds-color_error_on-bg);
1993
1996
  }
1994
1997
  }
1995
1998
 
1996
1999
  /* src/components/interaction/form/atoms/Label.module.css */
1997
2000
  @layer component {
1998
- .bds112Label-label {
2001
+ .bds121Label-label {
1999
2002
  display: flex;
2000
2003
  align-items: center;
2001
2004
  font-family: var(--bds-font_family--body);
@@ -2006,7 +2009,7 @@
2006
2009
 
2007
2010
  /* src/components/interaction/form/atoms/InputContainer.module.css */
2008
2011
  @layer component {
2009
- .bds112InputContainer-container {
2012
+ .bds121InputContainer-container {
2010
2013
  --labelPosition: calc(var(--inputSize) + var(--bds-space_m));
2011
2014
  display: flex;
2012
2015
  flex-direction: column;
@@ -2016,7 +2019,7 @@
2016
2019
 
2017
2020
  /* src/components/interaction/form/CheckboxGroup/CheckboxGroup.module.css */
2018
2021
  @layer component {
2019
- .bds112CheckboxGroup-group {
2022
+ .bds121CheckboxGroup-group {
2020
2023
  border: none;
2021
2024
  padding: 0;
2022
2025
  margin: 0;
@@ -2024,7 +2027,7 @@
2024
2027
  flex-direction: column;
2025
2028
  gap: var(--bds-space_xs);
2026
2029
  }
2027
- .bds112CheckboxGroup-legend {
2030
+ .bds121CheckboxGroup-legend {
2028
2031
  font-family: var(--bds-font_family--body);
2029
2032
  font-size: var(--bds-font_size--body--s);
2030
2033
  font-weight: var(--bds-font_weight--medium);
@@ -2032,10 +2035,10 @@
2032
2035
  padding: 0;
2033
2036
  margin-block-end: var(--bds-space_xs);
2034
2037
  }
2035
- .bds112CheckboxGroup-required {
2038
+ .bds121CheckboxGroup-required {
2036
2039
  color: var(--bds-color_error);
2037
2040
  }
2038
- .bds112CheckboxGroup-items {
2041
+ .bds121CheckboxGroup-items {
2039
2042
  display: flex;
2040
2043
  flex-direction: column;
2041
2044
  gap: var(--bds-space_xs);
@@ -2044,16 +2047,16 @@
2044
2047
 
2045
2048
  /* src/components/interaction/form/Combobox/Combobox.module.css */
2046
2049
  @layer component {
2047
- .bds112Combobox-formGroup {
2050
+ .bds121Combobox-formGroup {
2048
2051
  display: flex;
2049
2052
  flex-direction: column;
2050
2053
  }
2051
- .bds112Combobox-inputWrapper {
2054
+ .bds121Combobox-inputWrapper {
2052
2055
  position: relative;
2053
2056
  display: flex;
2054
2057
  align-items: center;
2055
2058
  }
2056
- .bds112Combobox-input {
2059
+ .bds121Combobox-input {
2057
2060
  appearance: none;
2058
2061
  inline-size: 100%;
2059
2062
  font-family: var(--bds-font_family--body);
@@ -2063,29 +2066,27 @@
2063
2066
  border: var(--combobox_border, none);
2064
2067
  --bdc_color: currentcolor;
2065
2068
  --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
2069
  border-radius: var(--combobox_radius, var(--bdc-outline_radius));
2069
- box-shadow: var(--combobox_shadow, var(--bdc-outline_shadow));
2070
+ box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--combobox_shadow, var(--bdc-outline_shadow));
2070
2071
  background-color: var(--combobox_color_bg, var(--bds-color_bg));
2071
2072
  color: var(--combobox_color, var(--bds-color_on-bg));
2072
2073
  transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing), background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
2073
2074
  }
2074
- .bds112Combobox-input:focus {
2075
+ .bds121Combobox-input:focus {
2075
2076
  --bdc_color: var(--bdc_color--focus);
2076
2077
  }
2077
- .bds112Combobox-input:focus-visible {
2078
+ .bds121Combobox-input:focus-visible {
2078
2079
  outline: var(--bds-outline_default);
2079
2080
  outline-offset: var(--bds-outline_offset);
2080
2081
  }
2081
- .bds112Combobox-input:disabled {
2082
+ .bds121Combobox-input:disabled {
2082
2083
  opacity: 0.5;
2083
2084
  cursor: not-allowed;
2084
2085
  }
2085
- .bds112Combobox-inputError {
2086
+ .bds121Combobox-inputError {
2086
2087
  --bdc_color: var(--bdc_color--error);
2087
2088
  }
2088
- .bds112Combobox-chevron {
2089
+ .bds121Combobox-chevron {
2089
2090
  position: absolute;
2090
2091
  inset-inline-end: var(--bds-space_s);
2091
2092
  display: flex;
@@ -2093,11 +2094,11 @@
2093
2094
  pointer-events: none;
2094
2095
  color: var(--combobox_color, var(--bds-color_on-bg));
2095
2096
  }
2096
- .bds112Combobox-chevron svg {
2097
+ .bds121Combobox-chevron svg {
2097
2098
  inline-size: 1rem;
2098
2099
  block-size: 1rem;
2099
2100
  }
2100
- .bds112Combobox-listbox {
2101
+ .bds121Combobox-listbox {
2101
2102
  position: absolute;
2102
2103
  inset-block-start: calc(100% + var(--bds-space_xxs));
2103
2104
  inset-inline: 0;
@@ -2110,14 +2111,12 @@
2110
2111
  border: var(--combobox_listbox-border, none);
2111
2112
  --bdc_color: currentcolor;
2112
2113
  --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
2114
  border-radius: var(--combobox_listbox-radius, var(--bdc-outline_radius));
2116
2115
  background-color: var(--combobox_color, var(--bds-color_bg));
2117
2116
  color: var(--combobox_on-color, var(--bds-color_on-bg));
2118
- box-shadow: var(--combobox_listbox-shadow, var(--bds-shadow_m));
2117
+ box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--combobox_listbox-shadow, var(--bds-shadow_m));
2119
2118
  }
2120
- .bds112Combobox-option {
2119
+ .bds121Combobox-option {
2121
2120
  display: flex;
2122
2121
  align-items: center;
2123
2122
  padding: var(--bds-space_xs) var(--bds-space_m);
@@ -2126,14 +2125,14 @@
2126
2125
  cursor: pointer;
2127
2126
  transition: var(--bds-animation_transition);
2128
2127
  }
2129
- .bds112Combobox-option.bds112Combobox---highlighted {
2128
+ .bds121Combobox-option.bds121Combobox---highlighted {
2130
2129
  background-color: var(--bds-color_bg--subtle);
2131
2130
  color: var(--bds-color_interactive_on-bg);
2132
2131
  }
2133
- .bds112Combobox-option.bds112Combobox---selected {
2132
+ .bds121Combobox-option.bds121Combobox---selected {
2134
2133
  font-weight: var(--bds-font_weight--semibold);
2135
2134
  }
2136
- .bds112Combobox-option.bds112Combobox---disabled {
2135
+ .bds121Combobox-option.bds121Combobox---disabled {
2137
2136
  opacity: 0.4;
2138
2137
  cursor: not-allowed;
2139
2138
  }
@@ -2141,18 +2140,18 @@
2141
2140
 
2142
2141
  /* src/components/interaction/form/FileInput/FileInput.module.css */
2143
2142
  @layer component {
2144
- .bds112FileInput-formGroup {
2143
+ .bds121FileInput-formGroup {
2145
2144
  display: flex;
2146
2145
  flex-direction: column;
2147
2146
  }
2148
- .bds112FileInput-fieldLabel {
2147
+ .bds121FileInput-fieldLabel {
2149
2148
  display: flex;
2150
2149
  align-items: center;
2151
2150
  font-family: var(--bds-font_family--body);
2152
2151
  color: var(--bds-color_on-bg);
2153
2152
  margin-block-end: var(--bds-space_xs);
2154
2153
  }
2155
- .bds112FileInput-dropZone {
2154
+ .bds121FileInput-dropZone {
2156
2155
  display: flex;
2157
2156
  flex-direction: column;
2158
2157
  align-items: center;
@@ -2166,40 +2165,40 @@
2166
2165
  text-align: center;
2167
2166
  transition: var(--bds-animation_transition);
2168
2167
  }
2169
- .bds112FileInput-dropZone:focus-within {
2168
+ .bds121FileInput-dropZone:focus-within {
2170
2169
  outline: var(--bds-outline_default);
2171
2170
  outline-offset: var(--bds-outline_offset);
2172
2171
  border-color: var(--fileInput_border-color, currentcolor);
2173
2172
  }
2174
- .bds112FileInput-isDragging {
2173
+ .bds121FileInput-isDragging {
2175
2174
  border-color: currentcolor;
2176
2175
  background-color: rgb(from currentcolor r g b / 8%);
2177
2176
  }
2178
- .bds112FileInput-hasError {
2177
+ .bds121FileInput-hasError {
2179
2178
  border-color: var(--bds-color_error);
2180
2179
  }
2181
- .bds112FileInput-isDisabled {
2180
+ .bds121FileInput-isDisabled {
2182
2181
  opacity: 0.5;
2183
2182
  cursor: not-allowed;
2184
2183
  }
2185
- .bds112FileInput-icon {
2184
+ .bds121FileInput-icon {
2186
2185
  inline-size: 2rem;
2187
2186
  block-size: 2rem;
2188
2187
  flex-shrink: 0;
2189
2188
  }
2190
- .bds112FileInput-prompt {
2189
+ .bds121FileInput-prompt {
2191
2190
  font-size: var(--bds-font_size--body);
2192
2191
  color: var(--bds-color_on-bg);
2193
2192
  }
2194
- .bds112FileInput-prompt strong {
2193
+ .bds121FileInput-prompt strong {
2195
2194
  color: var(--bds-color_interactive_on-bg);
2196
2195
  font-weight: var(--bds-font_weight--semibold);
2197
2196
  }
2198
- .bds112FileInput-acceptHint {
2197
+ .bds121FileInput-acceptHint {
2199
2198
  font-size: var(--bds-font_size--body--s);
2200
2199
  color: var(--bds-color_on-bg);
2201
2200
  }
2202
- .bds112FileInput-hiddenInput {
2201
+ .bds121FileInput-hiddenInput {
2203
2202
  position: absolute;
2204
2203
  inline-size: 1px;
2205
2204
  block-size: 1px;
@@ -2209,7 +2208,7 @@
2209
2208
  border: 0;
2210
2209
  }
2211
2210
  @media (hover: hover) and (pointer: fine) {
2212
- .bds112FileInput-dropZone:not(.bds112FileInput-isDisabled):hover {
2211
+ .bds121FileInput-dropZone:not(.bds121FileInput-isDisabled):hover {
2213
2212
  border-color: var(--bds-color_interactive);
2214
2213
  background-color: rgb(from var(--bds-color_interactive) r g b / 4%);
2215
2214
  }
@@ -2218,65 +2217,62 @@
2218
2217
 
2219
2218
  /* src/components/interaction/form/FormInput/FormInput.module.css */
2220
2219
  @layer component {
2221
- .bds112FormInput-formGroup {
2220
+ .bds121FormInput-formGroup {
2222
2221
  --labelPosition: 0;
2223
2222
  display: flex;
2224
2223
  flex-direction: column;
2225
2224
  }
2226
- .bds112FormInput-input {
2225
+ .bds121FormInput-input {
2227
2226
  font-family: var(--bds-font_family--body);
2228
2227
  font-size: var(--bds-font_size--body);
2229
2228
  padding: var(--bds-space_s);
2230
2229
  border: var(--input_border, none);
2231
2230
  --bdc_color: currentcolor;
2232
2231
  --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
2232
  border-radius: var(--input_radius, var(--bdc-outline_radius));
2236
- box-shadow: var(--input_shadow, var(--bdc-outline_shadow));
2233
+ box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--input_shadow, var(--bdc-outline_shadow));
2237
2234
  color: var(--input_color, var(--bds-color_on-bg));
2238
2235
  background-color: var(--input_color_bg, var(--bds-color_bg));
2239
2236
  transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing), background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
2240
2237
  }
2241
- .bds112FormInput-input:focus {
2238
+ .bds121FormInput-input:focus {
2242
2239
  --bdc_color: var(--bdc_color--focus);
2243
2240
  }
2244
- .bds112FormInput-input:focus-visible {
2241
+ .bds121FormInput-input:focus-visible {
2245
2242
  outline: var(--bds-outline_default);
2246
2243
  outline-offset: var(--bds-outline_offset);
2247
2244
  }
2248
- .bds112FormInput-inputError {
2245
+ .bds121FormInput-inputError {
2249
2246
  --bdc_color: var(--bdc_color--error);
2250
2247
  }
2251
2248
  }
2252
2249
 
2253
2250
  /* src/components/interaction/form/NumberInput/NumberInput.module.css */
2254
2251
  @layer component {
2255
- .bds112NumberInput-formGroup {
2252
+ .bds121NumberInput-formGroup {
2256
2253
  display: flex;
2257
2254
  flex-direction: column;
2258
2255
  }
2259
- .bds112NumberInput-inputRow {
2256
+ .bds121NumberInput-inputRow {
2260
2257
  display: flex;
2261
2258
  align-items: stretch;
2262
2259
  border: var(--numberInput_border, none);
2263
2260
  --bdc_color: currentcolor;
2264
2261
  --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));
2262
+ --_radius: var(--numberInput_radius, var(--bdc-outline_radius));
2263
+ border-radius: var(--_radius);
2264
+ box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--numberInput_shadow, var(--bdc-outline_shadow));
2269
2265
  overflow: hidden;
2270
2266
  transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing);
2271
2267
  }
2272
- .bds112NumberInput-inputRow:focus-within {
2268
+ .bds121NumberInput-inputRow:focus-within {
2273
2269
  --bdc_color: var(--bdc_color--focus);
2274
2270
  }
2275
- .bds112NumberInput-inputRow:focus-within:has(:focus-visible) {
2271
+ .bds121NumberInput-inputRow:focus-within:has(:focus-visible) {
2276
2272
  outline: var(--bds-outline_default);
2277
2273
  outline-offset: var(--bds-outline_offset);
2278
2274
  }
2279
- .bds112NumberInput-input {
2275
+ .bds121NumberInput-input {
2280
2276
  flex: 1;
2281
2277
  border: none;
2282
2278
  outline: none;
@@ -2289,35 +2285,45 @@
2289
2285
  min-inline-size: 0;
2290
2286
  appearance: textfield;
2291
2287
  }
2292
- .bds112NumberInput-input::-webkit-inner-spin-button,
2293
- .bds112NumberInput-input::-webkit-outer-spin-button {
2288
+ .bds121NumberInput-input::-webkit-inner-spin-button,
2289
+ .bds121NumberInput-input::-webkit-outer-spin-button {
2294
2290
  appearance: none;
2295
2291
  }
2296
- .bds112NumberInput-inputError {
2292
+ .bds121NumberInput-inputError {
2297
2293
  --bdc_color: var(--bdc_color--error);
2298
2294
  }
2299
- .bds112NumberInput-stepper {
2295
+ .bds121NumberInput-stepper {
2300
2296
  all: unset;
2301
2297
  display: flex;
2302
2298
  align-items: center;
2303
2299
  justify-content: center;
2304
2300
  padding: var(--bds-space_xs);
2301
+ margin: 1px;
2305
2302
  background-color: var(--bds-color_bg--subtle);
2306
2303
  color: var(--numberInput_color, var(--bds-color_on-bg));
2307
2304
  cursor: pointer;
2308
2305
  transition: var(--bds-animation_transition);
2309
2306
  flex-shrink: 0;
2310
2307
  }
2311
- .bds112NumberInput-stepper svg {
2308
+ .bds121NumberInput-stepper svg {
2312
2309
  width: 1rem;
2313
2310
  height: 1rem;
2311
+ color: var(--numberInput_stepper-color, var(--bds-color_interactive));
2314
2312
  }
2315
- .bds112NumberInput-stepper:disabled {
2313
+ .bds121NumberInput-stepper:first-child {
2314
+ border-start-start-radius: var(--_radius);
2315
+ border-end-start-radius: var(--_radius);
2316
+ }
2317
+ .bds121NumberInput-stepper:last-child {
2318
+ border-start-end-radius: var(--_radius);
2319
+ border-end-end-radius: var(--_radius);
2320
+ }
2321
+ .bds121NumberInput-stepper:disabled {
2316
2322
  opacity: 0.4;
2317
2323
  cursor: not-allowed;
2318
2324
  }
2319
2325
  @media (hover: hover) and (pointer: fine) {
2320
- .bds112NumberInput-stepper:not(:disabled):hover {
2326
+ .bds121NumberInput-stepper:not(:disabled):hover {
2321
2327
  background-color: var(--bds-color_bg--subtle);
2322
2328
  opacity: 0.7;
2323
2329
  }
@@ -2326,29 +2332,29 @@
2326
2332
 
2327
2333
  /* src/components/interaction/form/Radio/Radio.module.css */
2328
2334
  @layer component {
2329
- .bds112Radio-radioGroup {
2335
+ .bds121Radio-radioGroup {
2330
2336
  --inputSize: calc(var(--bds-space_s) * 2);
2331
2337
  --labelPosition: calc(var(--inputSize) + var(--bds-space_m));
2332
2338
  display: flex;
2333
2339
  flex-direction: column;
2334
2340
  }
2335
- .bds112Radio-inputWrapper {
2341
+ .bds121Radio-inputWrapper {
2336
2342
  display: flex;
2337
2343
  align-items: flex-start;
2338
2344
  gap: var(--bds-space_xs);
2339
2345
  }
2340
- .bds112Radio-textWrapper {
2346
+ .bds121Radio-textWrapper {
2341
2347
  display: flex;
2342
2348
  flex-direction: column;
2343
2349
  gap: var(--bds-space_xxxs);
2344
2350
  padding-block-start: var(--bds-space_xxxs);
2345
2351
  }
2346
- .bds112Radio-description {
2352
+ .bds121Radio-description {
2347
2353
  font-size: var(--bds-font_size--body--s);
2348
2354
  color: var(--radio_description-color, var(--bds-color_on-bg--subtle));
2349
2355
  line-height: var(--bds-font_line-height--body);
2350
2356
  }
2351
- .bds112Radio-radio {
2357
+ .bds121Radio-radio {
2352
2358
  flex-shrink: 0;
2353
2359
  margin-block-start: 0.2em;
2354
2360
  inline-size: var(--inputSize);
@@ -2357,46 +2363,37 @@
2357
2363
  border: var(--radio_border, none);
2358
2364
  --bdc_color: currentcolor;
2359
2365
  --bdc-outline_radius: 50%;
2360
- outline: var(--bdc-outline_width) solid var(--bdc_color);
2361
- outline-offset: var(--bdc-outline_offset);
2362
2366
  border-radius: var(--radio_radius, var(--bdc-outline_radius));
2363
- box-shadow: var(--radio_shadow, var(--bdc-outline_shadow));
2367
+ box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--radio_shadow, var(--bdc-outline_shadow));
2364
2368
  appearance: none;
2365
2369
  background-color: var(--radio_color_bg, var(--bds-color_bg));
2366
2370
  cursor: pointer;
2367
2371
  position: relative;
2368
2372
  transition: --bdc_color 0.2s ease, background-color 0.2s ease;
2369
2373
  }
2370
- .bds112Radio-radio:checked {
2371
- background-color: var(--radio_color-active, var(--bdc-color_active));
2374
+ .bds121Radio-radio:checked {
2375
+ background:
2376
+ radial-gradient(
2377
+ circle,
2378
+ var(--radio_color-active, var(--bdc-color_active)) 35%,
2379
+ var(--radio_color_bg, var(--bds-color_bg)) 42%);
2372
2380
  --bdc_color: var(--radio_color-active, var(--bdc-color_active));
2373
2381
  }
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 {
2382
+ .bds121Radio-radio:focus {
2386
2383
  --bdc_color: var(--bdc_color--focus);
2387
2384
  }
2388
- .bds112Radio-radio:focus-visible {
2385
+ .bds121Radio-radio:focus-visible {
2389
2386
  outline: var(--bds-outline_default);
2390
2387
  outline-offset: var(--bds-outline_offset);
2391
2388
  }
2392
- .bds112Radio-radioError {
2389
+ .bds121Radio-radioError {
2393
2390
  --bdc_color: var(--bdc_color--error);
2394
2391
  }
2395
2392
  }
2396
2393
 
2397
2394
  /* src/components/interaction/form/RadioGroup/RadioGroup.module.css */
2398
2395
  @layer component {
2399
- .bds112RadioGroup-group {
2396
+ .bds121RadioGroup-group {
2400
2397
  border: none;
2401
2398
  padding: 0;
2402
2399
  margin: 0;
@@ -2404,7 +2401,7 @@
2404
2401
  flex-direction: column;
2405
2402
  gap: var(--bds-space_xs);
2406
2403
  }
2407
- .bds112RadioGroup-legend {
2404
+ .bds121RadioGroup-legend {
2408
2405
  font-family: var(--bds-font_family--body);
2409
2406
  font-size: var(--bds-font_size--body--s);
2410
2407
  font-weight: var(--bds-font_weight--medium);
@@ -2412,10 +2409,10 @@
2412
2409
  padding: 0;
2413
2410
  margin-block-end: var(--bds-space_xs);
2414
2411
  }
2415
- .bds112RadioGroup-required {
2412
+ .bds121RadioGroup-required {
2416
2413
  color: var(--bds-color_error);
2417
2414
  }
2418
- .bds112RadioGroup-items {
2415
+ .bds121RadioGroup-items {
2419
2416
  display: flex;
2420
2417
  flex-direction: column;
2421
2418
  gap: var(--bds-space_xs);
@@ -2424,87 +2421,107 @@
2424
2421
 
2425
2422
  /* src/components/interaction/form/SegmentedControl/SegmentedControl.module.css */
2426
2423
  @layer component {
2427
- .bds112SegmentedControl-control {
2424
+ .bds121SegmentedControl-control {
2428
2425
  position: relative;
2429
2426
  display: inline-grid;
2430
2427
  grid-auto-flow: column;
2431
2428
  grid-auto-columns: 1fr;
2432
2429
  padding: var(--bds-space_xxxs);
2433
2430
  background-color: var(--control_track-bg, var(--bds-color_bg--subtle));
2434
- border-radius: var(--bds-border_radius--m);
2431
+ border-radius: var(--control_radius, var(--bds-border_radius--m));
2435
2432
  gap: 0;
2436
2433
  }
2437
- .bds112SegmentedControl-thumb {
2434
+ .bds121SegmentedControl-thumb {
2438
2435
  position: absolute;
2439
2436
  inset-block: var(--bds-space_xxxs);
2440
2437
  inset-inline-start: var(--bds-space_xxxs);
2441
2438
  inline-size: calc((100% - 2 * var(--bds-space_xxxs)) / var(--control_count, 1));
2442
- border-radius: var(--bds-border_radius--s);
2443
- background-color: var(--control_thumb-bg, var(--bds-color_bg));
2439
+ border-radius: var(--control_thumb-radius, var(--bds-border_radius--s));
2440
+ background-color: var(--control_thumb-bg, var(--bds-color_interactive));
2444
2441
  box-shadow: var(--bds-shadow_s);
2445
2442
  pointer-events: none;
2446
2443
  transform: translateX(calc(var(--control_selected-index, 0) * 100%));
2447
2444
  transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
2448
2445
  }
2449
- .bds112SegmentedControl-item {
2446
+ .bds121SegmentedControl-indicator {
2447
+ position: absolute;
2448
+ inset-block: var(--bds-space_xxxs);
2449
+ inset-inline-start: var(--bds-space_xxxs);
2450
+ inline-size: calc((100% - 2 * var(--bds-space_xxxs)) / var(--control_count, 1));
2451
+ border-radius: var(--control_thumb-radius, var(--bds-border_radius--s));
2452
+ pointer-events: none;
2453
+ z-index: 2;
2454
+ display: none;
2455
+ transform: translateX(calc(var(--control_selected-index, 0) * 100%));
2456
+ transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
2457
+ }
2458
+ .bds121SegmentedControl-item {
2450
2459
  position: relative;
2451
2460
  z-index: 1;
2452
2461
  display: flex;
2453
2462
  align-items: center;
2454
2463
  justify-content: center;
2455
2464
  cursor: pointer;
2456
- 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;
2465
+ border-radius: var(--control_thumb-radius, var(--bds-border_radius--s));
2472
2466
  padding: var(--bds-space_xs) var(--bds-space_m);
2473
- white-space: nowrap;
2474
2467
  font-size: var(--bds-font_size--body);
2468
+ font-family: var(--bds-font_family--body);
2475
2469
  line-height: var(--bds-font_line-height--body);
2476
2470
  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;
2471
+ white-space: nowrap;
2479
2472
  user-select: none;
2473
+ text-decoration: none;
2474
+ transition: var(--bds-animation_transition);
2475
+ background: none;
2476
+ border: none;
2477
+ outline: none;
2478
+ }
2479
+ .bds121SegmentedControl-item:focus-visible {
2480
+ outline: var(--bds-outline_default);
2481
+ outline-offset: calc(var(--bds-outline_offset) * -1);
2482
+ border-radius: var(--control_thumb-radius, var(--bds-border_radius--s));
2480
2483
  }
2481
- .bds112SegmentedControl-control.bds112SegmentedControl---size_small .bds112SegmentedControl-label {
2484
+ .bds121SegmentedControl-item.bds121SegmentedControl---active {
2485
+ color: var(--control_label-color--active, var(--bds-color_on-interactive));
2486
+ }
2487
+ .bds121SegmentedControl-item.bds121SegmentedControl---disabled {
2488
+ opacity: 0.5;
2489
+ cursor: not-allowed;
2490
+ pointer-events: none;
2491
+ }
2492
+ .bds121SegmentedControl-control.bds121SegmentedControl---size_small .bds121SegmentedControl-item {
2482
2493
  padding: var(--bds-space_xxs) var(--bds-space_s);
2483
2494
  font-size: var(--bds-font_size--body--s);
2484
2495
  }
2485
- .bds112SegmentedControl-control.bds112SegmentedControl---size_large .bds112SegmentedControl-label {
2496
+ .bds121SegmentedControl-control.bds121SegmentedControl---size_large .bds121SegmentedControl-item {
2486
2497
  padding: var(--bds-space_s) var(--bds-space_m);
2487
2498
  white-space: normal;
2488
2499
  text-align: center;
2489
2500
  }
2490
- .bds112SegmentedControl-item.bds112SegmentedControl---active .bds112SegmentedControl-label {
2491
- color: var(--control_label-color--active, var(--bds-color_on-bg));
2501
+ .bds121SegmentedControl-control.bds121SegmentedControl---variant_outline {
2502
+ --control_label-color--active: var(--bds-color_interactive);
2492
2503
  }
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);
2504
+ .bds121SegmentedControl-control.bds121SegmentedControl---variant_outline .bds121SegmentedControl-thumb {
2505
+ display: none;
2506
+ }
2507
+ .bds121SegmentedControl-control.bds121SegmentedControl---variant_outline .bds121SegmentedControl-item {
2508
+ background-color: var(--control_item-bg, transparent);
2509
+ }
2510
+ .bds121SegmentedControl-control.bds121SegmentedControl---variant_outline .bds121SegmentedControl-item.bds121SegmentedControl---active {
2511
+ background-color: var(--control_item-bg--active, var(--bds-color_bg));
2512
+ }
2513
+ .bds121SegmentedControl-control.bds121SegmentedControl---variant_outline .bds121SegmentedControl-indicator {
2514
+ display: block;
2515
+ box-shadow: inset 0 0 0 2px var(--bds-color_interactive);
2497
2516
  }
2498
2517
  @media (hover: hover) and (pointer: fine) {
2499
- .bds112SegmentedControl-item:not(.bds112SegmentedControl---active, .bds112SegmentedControl---disabled):hover .bds112SegmentedControl-label {
2518
+ .bds121SegmentedControl-item:not(.bds121SegmentedControl---active, .bds121SegmentedControl---disabled):hover {
2500
2519
  color: var(--control_label-color--hover, var(--bds-color_on-bg));
2501
2520
  }
2502
2521
  }
2503
2522
  @media (prefers-reduced-motion: reduce) {
2504
- .bds112SegmentedControl-thumb {
2505
- transition: none;
2506
- }
2507
- .bds112SegmentedControl-label {
2523
+ .bds121SegmentedControl-thumb,
2524
+ .bds121SegmentedControl-indicator {
2508
2525
  transition: none;
2509
2526
  }
2510
2527
  }
@@ -2512,16 +2529,16 @@
2512
2529
 
2513
2530
  /* src/components/interaction/form/Select/Select.module.css */
2514
2531
  @layer component {
2515
- .bds112Select-formGroup {
2532
+ .bds121Select-formGroup {
2516
2533
  display: flex;
2517
2534
  flex-direction: column;
2518
2535
  }
2519
- .bds112Select-selectWrapper {
2536
+ .bds121Select-selectWrapper {
2520
2537
  position: relative;
2521
2538
  display: flex;
2522
2539
  align-items: center;
2523
2540
  }
2524
- .bds112Select-select {
2541
+ .bds121Select-select {
2525
2542
  appearance: none;
2526
2543
  inline-size: 100%;
2527
2544
  font-family: var(--bds-font_family--body);
@@ -2531,38 +2548,36 @@
2531
2548
  border: var(--select_border, none);
2532
2549
  --bdc_color: currentcolor;
2533
2550
  --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
2551
  border-radius: var(--select_radius, var(--bdc-outline_radius));
2537
- box-shadow: var(--select_shadow, var(--bdc-outline_shadow));
2552
+ box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--select_shadow, var(--bdc-outline_shadow));
2538
2553
  background-color: var(--select_color_bg, var(--bds-color_bg));
2539
2554
  color: var(--select_color, var(--bds-color_on-bg));
2540
2555
  cursor: pointer;
2541
2556
  transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing), background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
2542
2557
  }
2543
- .bds112Select-select:focus {
2558
+ .bds121Select-select:focus {
2544
2559
  --bdc_color: var(--bdc_color--focus);
2545
2560
  }
2546
- .bds112Select-select:focus-visible {
2561
+ .bds121Select-select:focus-visible {
2547
2562
  outline: var(--bds-outline_default);
2548
2563
  outline-offset: var(--bds-outline_offset);
2549
2564
  }
2550
- .bds112Select-select:disabled {
2565
+ .bds121Select-select:disabled {
2551
2566
  opacity: 0.5;
2552
2567
  cursor: not-allowed;
2553
2568
  }
2554
- .bds112Select-selectError {
2569
+ .bds121Select-selectError {
2555
2570
  --bdc_color: var(--bdc_color--error);
2556
2571
  }
2557
- .bds112Select-chevron {
2572
+ .bds121Select-chevron {
2558
2573
  position: absolute;
2559
2574
  inset-inline-end: var(--bds-space_s);
2560
2575
  display: flex;
2561
2576
  align-items: center;
2562
2577
  pointer-events: none;
2563
- color: var(--select_color, var(--bds-color_on-bg));
2578
+ color: var(--select_chevron-color, var(--bds-color_interactive));
2564
2579
  }
2565
- .bds112Select-chevron svg {
2580
+ .bds121Select-chevron svg {
2566
2581
  inline-size: 1rem;
2567
2582
  block-size: 1rem;
2568
2583
  }
@@ -2570,22 +2585,22 @@
2570
2585
 
2571
2586
  /* src/components/interaction/form/Slider/Slider.module.css */
2572
2587
  @layer component {
2573
- .bds112Slider-formGroup {
2588
+ .bds121Slider-formGroup {
2574
2589
  display: flex;
2575
2590
  flex-direction: column;
2576
2591
  gap: var(--bds-space_xxs);
2577
2592
  }
2578
- .bds112Slider-labelRow {
2593
+ .bds121Slider-labelRow {
2579
2594
  display: flex;
2580
2595
  justify-content: space-between;
2581
2596
  align-items: baseline;
2582
2597
  }
2583
- .bds112Slider-value {
2598
+ .bds121Slider-value {
2584
2599
  font-size: var(--bds-font_size--body--s);
2585
2600
  font-variant-numeric: tabular-nums;
2586
2601
  color: var(--bds-color_on-bg--subtle);
2587
2602
  }
2588
- .bds112Slider-slider {
2603
+ .bds121Slider-slider {
2589
2604
  --slider_fill: 0%;
2590
2605
  --slider_track-height: var(--bds-space_xxs);
2591
2606
  --slider_thumb-size: calc(var(--bds-space_s) * 2);
@@ -2604,16 +2619,16 @@
2604
2619
  cursor: pointer;
2605
2620
  transition: var(--bds-animation_transition);
2606
2621
  }
2607
- .bds112Slider-slider:focus-visible {
2622
+ .bds121Slider-slider:focus-visible {
2608
2623
  outline: var(--bds-outline_default);
2609
2624
  outline-offset: var(--bds-outline_offset);
2610
2625
  border-radius: 999px;
2611
2626
  }
2612
- .bds112Slider-slider:disabled {
2627
+ .bds121Slider-slider:disabled {
2613
2628
  opacity: 0.4;
2614
2629
  cursor: not-allowed;
2615
2630
  }
2616
- .bds112Slider-slider::-webkit-slider-thumb {
2631
+ .bds121Slider-slider::-webkit-slider-thumb {
2617
2632
  appearance: none;
2618
2633
  inline-size: var(--slider_thumb-size);
2619
2634
  block-size: var(--slider_thumb-size);
@@ -2623,7 +2638,7 @@
2623
2638
  transition: var(--bds-animation_transition);
2624
2639
  cursor: pointer;
2625
2640
  }
2626
- .bds112Slider-slider::-moz-range-thumb {
2641
+ .bds121Slider-slider::-moz-range-thumb {
2627
2642
  inline-size: var(--slider_thumb-size);
2628
2643
  block-size: var(--slider_thumb-size);
2629
2644
  border: none;
@@ -2632,7 +2647,7 @@
2632
2647
  box-shadow: var(--bds-shadow_s);
2633
2648
  cursor: pointer;
2634
2649
  }
2635
- .bds112Slider-sliderError {
2650
+ .bds121Slider-sliderError {
2636
2651
  background:
2637
2652
  linear-gradient(
2638
2653
  to right,
@@ -2641,16 +2656,16 @@
2641
2656
  var(--bds-color_bg--subtle) var(--slider_fill),
2642
2657
  var(--bds-color_bg--subtle) 100%);
2643
2658
  }
2644
- .bds112Slider-sliderError::-webkit-slider-thumb {
2659
+ .bds121Slider-sliderError::-webkit-slider-thumb {
2645
2660
  background-color: var(--bds-color_error);
2646
2661
  }
2647
- .bds112Slider-sliderError::-moz-range-thumb {
2662
+ .bds121Slider-sliderError::-moz-range-thumb {
2648
2663
  background-color: var(--bds-color_error);
2649
2664
  }
2650
2665
  @media (prefers-reduced-motion: reduce) {
2651
- .bds112Slider-slider,
2652
- .bds112Slider-slider::-webkit-slider-thumb,
2653
- .bds112Slider-slider::-moz-range-thumb {
2666
+ .bds121Slider-slider,
2667
+ .bds121Slider-slider::-webkit-slider-thumb,
2668
+ .bds121Slider-slider::-moz-range-thumb {
2654
2669
  transition: none;
2655
2670
  }
2656
2671
  }
@@ -2658,7 +2673,7 @@
2658
2673
 
2659
2674
  /* src/components/interaction/form/Switch/Switch.module.css */
2660
2675
  @layer component {
2661
- .bds112Switch-switchGroup {
2676
+ .bds121Switch-switchGroup {
2662
2677
  --switch_thumb-size: 1.25em;
2663
2678
  --switch_track-pad: var(--bds-space_xxxs);
2664
2679
  --switch_track-height: calc(var(--switch_thumb-size) + var(--switch_track-pad) * 2);
@@ -2667,21 +2682,21 @@
2667
2682
  display: flex;
2668
2683
  flex-direction: column;
2669
2684
  }
2670
- .bds112Switch-switchGroup.bds112Switch---size_small {
2685
+ .bds121Switch-switchGroup.bds121Switch---size_small {
2671
2686
  --switch_thumb-size: 1em;
2672
2687
  }
2673
- .bds112Switch-switchGroup.bds112Switch---size_medium {
2688
+ .bds121Switch-switchGroup.bds121Switch---size_medium {
2674
2689
  --switch_thumb-size: 1.25em;
2675
2690
  }
2676
- .bds112Switch-switchGroup.bds112Switch---size_large {
2691
+ .bds121Switch-switchGroup.bds121Switch---size_large {
2677
2692
  --switch_thumb-size: 1.5em;
2678
2693
  }
2679
- .bds112Switch-inputWrapper {
2694
+ .bds121Switch-inputWrapper {
2680
2695
  display: flex;
2681
2696
  align-items: center;
2682
2697
  gap: var(--bds-space_xs);
2683
2698
  }
2684
- .bds112Switch-trackWrapper {
2699
+ .bds121Switch-trackWrapper {
2685
2700
  position: relative;
2686
2701
  display: inline-flex;
2687
2702
  align-items: center;
@@ -2689,7 +2704,7 @@
2689
2704
  inline-size: var(--switch_track-width);
2690
2705
  block-size: var(--switch_track-height);
2691
2706
  }
2692
- .bds112Switch-switch {
2707
+ .bds121Switch-switch {
2693
2708
  position: absolute;
2694
2709
  inset: 0;
2695
2710
  appearance: none;
@@ -2700,10 +2715,10 @@
2700
2715
  cursor: pointer;
2701
2716
  z-index: 1;
2702
2717
  }
2703
- .bds112Switch-switch:disabled {
2718
+ .bds121Switch-switch:disabled {
2704
2719
  cursor: not-allowed;
2705
2720
  }
2706
- .bds112Switch-track {
2721
+ .bds121Switch-track {
2707
2722
  display: inline-flex;
2708
2723
  align-items: center;
2709
2724
  inline-size: var(--switch_track-width);
@@ -2712,47 +2727,45 @@
2712
2727
  background-color: var(--switch_track-bg, var(--bds-color_grey--subtle));
2713
2728
  padding-inline: var(--switch_track-pad);
2714
2729
  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));
2730
+ box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--switch_shadow, var(--bdc-outline_shadow));
2718
2731
  transition:
2719
2732
  --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing),
2720
2733
  background-color var(--bds-animation_transition-duration) var(--bds-animation_easing),
2721
2734
  transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
2722
- --bdc_color: var(--switch_thumb-bg, var(--bds-color_grey));
2735
+ --bdc_color: var(--switch_thumb-bg, var(--bds-color_interactive));
2723
2736
  }
2724
- .bds112Switch-thumb {
2737
+ .bds121Switch-thumb {
2725
2738
  display: block;
2726
2739
  inline-size: var(--switch_thumb-size);
2727
2740
  block-size: var(--switch_thumb-size);
2728
2741
  border-radius: 50%;
2729
- background-color: var(--switch_thumb-bg, var(--bds-color_grey));
2742
+ background-color: var(--switch_thumb-bg, var(--bds-color_interactive));
2730
2743
  box-shadow: var(--bds-shadow_s);
2731
2744
  transition: var(--bds-animation_transition);
2732
2745
  transform: translateX(0);
2733
2746
  }
2734
- .bds112Switch-switch.bds112Switch-switchError + .bds112Switch-track {
2747
+ .bds121Switch-switch.bds121Switch-switchError + .bds121Switch-track {
2735
2748
  --bdc_color: var(--bds-color_error);
2736
2749
  }
2737
- .bds112Switch-switch:checked + .bds112Switch-track {
2750
+ .bds121Switch-switch:checked + .bds121Switch-track {
2738
2751
  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));
2752
+ --bdc_color: var(--switch_thumb-bg--active, var(--bds-color_interactive));
2740
2753
  }
2741
- .bds112Switch-switch:checked + .bds112Switch-track .bds112Switch-thumb {
2742
- background-color: var(--switch_thumb-bg--active, var(--bdc-color_active--strong));
2754
+ .bds121Switch-switch:checked + .bds121Switch-track .bds121Switch-thumb {
2755
+ background-color: var(--switch_thumb-bg--active, var(--bds-color_interactive));
2743
2756
  transform: translateX(var(--switch_thumb-size));
2744
2757
  }
2745
- .bds112Switch-switch:focus-visible + .bds112Switch-track {
2758
+ .bds121Switch-switch:focus-visible + .bds121Switch-track {
2746
2759
  outline: var(--bds-outline_default);
2747
2760
  outline-offset: var(--bds-outline_offset);
2748
2761
  border-radius: 999px;
2749
2762
  }
2750
- .bds112Switch-switch:disabled + .bds112Switch-track {
2763
+ .bds121Switch-switch:disabled + .bds121Switch-track {
2751
2764
  opacity: 0.4;
2752
2765
  }
2753
2766
  @media (prefers-reduced-motion: reduce) {
2754
- .bds112Switch-track,
2755
- .bds112Switch-thumb {
2767
+ .bds121Switch-track,
2768
+ .bds121Switch-thumb {
2756
2769
  transition: none;
2757
2770
  }
2758
2771
  }
@@ -2760,11 +2773,11 @@
2760
2773
 
2761
2774
  /* src/components/interaction/form/Textarea/Textarea.module.css */
2762
2775
  @layer component {
2763
- .bds112Textarea-formGroup {
2776
+ .bds121Textarea-formGroup {
2764
2777
  display: flex;
2765
2778
  flex-direction: column;
2766
2779
  }
2767
- .bds112Textarea-textarea {
2780
+ .bds121Textarea-textarea {
2768
2781
  font-family: var(--bds-font_family--body);
2769
2782
  font-size: var(--bds-font_size--body);
2770
2783
  line-height: var(--bds-font_line-height--body);
@@ -2772,78 +2785,76 @@
2772
2785
  border: var(--textarea_border, none);
2773
2786
  --bdc_color: currentcolor;
2774
2787
  --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
2788
  border-radius: var(--textarea_radius, var(--bdc-outline_radius));
2778
- box-shadow: var(--textarea_shadow, var(--bdc-outline_shadow));
2789
+ box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--textarea_shadow, var(--bdc-outline_shadow));
2779
2790
  background-color: var(--textarea_color_bg, var(--bds-color_bg));
2780
2791
  color: var(--textarea_color, var(--bds-color_on-bg));
2781
2792
  resize: vertical;
2782
2793
  min-block-size: calc(var(--bds-space_m) * 5);
2783
2794
  transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing), background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
2784
2795
  }
2785
- .bds112Textarea-textarea:focus {
2796
+ .bds121Textarea-textarea:focus {
2786
2797
  --bdc_color: var(--bdc_color--focus);
2787
2798
  }
2788
- .bds112Textarea-textarea:focus-visible {
2799
+ .bds121Textarea-textarea:focus-visible {
2789
2800
  outline: var(--bds-outline_default);
2790
2801
  outline-offset: var(--bds-outline_offset);
2791
2802
  }
2792
- .bds112Textarea-textarea:disabled {
2803
+ .bds121Textarea-textarea:disabled {
2793
2804
  opacity: 0.5;
2794
2805
  cursor: not-allowed;
2795
2806
  resize: none;
2796
2807
  }
2797
- .bds112Textarea-textareaError {
2808
+ .bds121Textarea-textareaError {
2798
2809
  --bdc_color: var(--bdc_color--error);
2799
2810
  }
2800
2811
  }
2801
2812
 
2802
2813
  /* src/components/layout/ButtonGroup/ButtonGroup.module.css */
2803
2814
  @layer component {
2804
- .bds112ButtonGroup-buttonGroup {
2815
+ .bds121ButtonGroup-buttonGroup {
2805
2816
  container-type: inline-size;
2806
2817
  container-name: button-group;
2807
2818
  grid-column: var(--bds-grid_span-100);
2808
2819
  }
2809
- .bds112ButtonGroup-buttonGroup .bds112ButtonGroup-container {
2820
+ .bds121ButtonGroup-buttonGroup .bds121ButtonGroup-container {
2810
2821
  position: relative;
2811
2822
  display: flex;
2812
2823
  flex-direction: column-reverse;
2813
2824
  gap: var(--bds-space_l);
2814
2825
  align-items: center;
2815
2826
  }
2816
- .bds112ButtonGroup-buttonGroup.bds112ButtonGroup---variant_card .bds112ButtonGroup-container {
2827
+ .bds121ButtonGroup-buttonGroup.bds121ButtonGroup---variant_card .bds121ButtonGroup-container {
2817
2828
  align-items: stretch;
2818
2829
  }
2819
- .bds112ButtonGroup-buttonGroup.bds112ButtonGroup---variant_flow .bds112ButtonGroup-container,
2820
- .bds112ButtonGroup-buttonGroup.bds112ButtonGroup---variant_modal .bds112ButtonGroup-container {
2830
+ .bds121ButtonGroup-buttonGroup.bds121ButtonGroup---variant_flow .bds121ButtonGroup-container,
2831
+ .bds121ButtonGroup-buttonGroup.bds121ButtonGroup---variant_modal .bds121ButtonGroup-container {
2821
2832
  align-items: center;
2822
2833
  }
2823
- .bds112ButtonGroup-buttonGroup.bds112ButtonGroup---variant_content .bds112ButtonGroup-container {
2834
+ .bds121ButtonGroup-buttonGroup.bds121ButtonGroup---variant_content .bds121ButtonGroup-container {
2824
2835
  align-items: flex-start;
2825
2836
  }
2826
2837
  @supports (contain: inline-size) {
2827
2838
  @container button-group (min-width: 30rem) {
2828
- .bds112ButtonGroup-buttonGroup .bds112ButtonGroup-container {
2839
+ .bds121ButtonGroup-buttonGroup .bds121ButtonGroup-container {
2829
2840
  flex-direction: row;
2830
2841
  justify-content: space-between;
2831
2842
  }
2832
- .bds112ButtonGroup-buttonGroup.bds112ButtonGroup---variant_modal .bds112ButtonGroup-container > :first-child:last-child,
2833
- .bds112ButtonGroup-buttonGroup.bds112ButtonGroup---variant_flow .bds112ButtonGroup-container > :first-child:last-child {
2843
+ .bds121ButtonGroup-buttonGroup.bds121ButtonGroup---variant_modal .bds121ButtonGroup-container > :first-child:last-child,
2844
+ .bds121ButtonGroup-buttonGroup.bds121ButtonGroup---variant_flow .bds121ButtonGroup-container > :first-child:last-child {
2834
2845
  margin-inline-start: auto;
2835
2846
  }
2836
- .bds112ButtonGroup-buttonGroup.bds112ButtonGroup---variant_card .bds112ButtonGroup-container {
2847
+ .bds121ButtonGroup-buttonGroup.bds121ButtonGroup---variant_card .bds121ButtonGroup-container {
2837
2848
  justify-content: center;
2838
2849
  }
2839
- .bds112ButtonGroup-buttonGroup.bds112ButtonGroup---variant_modal .bds112ButtonGroup-container {
2850
+ .bds121ButtonGroup-buttonGroup.bds121ButtonGroup---variant_modal .bds121ButtonGroup-container {
2840
2851
  justify-content: flex-end;
2841
2852
  }
2842
- .bds112ButtonGroup-buttonGroup.bds112ButtonGroup---variant_content .bds112ButtonGroup-container {
2853
+ .bds121ButtonGroup-buttonGroup.bds121ButtonGroup---variant_content .bds121ButtonGroup-container {
2843
2854
  justify-content: flex-start;
2844
2855
  align-items: center;
2845
2856
  }
2846
- .bds112ButtonGroup-buttonGroup.bds112ButtonGroup---variant_grid .bds112ButtonGroup-container {
2857
+ .bds121ButtonGroup-buttonGroup.bds121ButtonGroup---variant_grid .bds121ButtonGroup-container {
2847
2858
  justify-content: center;
2848
2859
  }
2849
2860
  }
@@ -2852,70 +2863,68 @@
2852
2863
 
2853
2864
  /* src/components/layout/Card/Card.module.css */
2854
2865
  @layer component {
2855
- .bds112Card-card {
2866
+ .bds121Card-card {
2856
2867
  background-color: var(--card_color, var(--bds-color_bg));
2857
2868
  color: var(--card_on-color, var(--bds-color_on-bg));
2858
2869
  border-radius: var(--bds-border_radius--m);
2859
2870
  transition: all 0.3s ease;
2860
2871
  position: relative;
2861
2872
  }
2862
- .bds112Card-card.bds112Card---default {
2873
+ .bds121Card-card.bds121Card---default {
2863
2874
  box-shadow: var(--bds-shadow_s);
2864
2875
  }
2865
- .bds112Card-card.bds112Card---elevated {
2876
+ .bds121Card-card.bds121Card---elevated {
2866
2877
  box-shadow: var(--bds-shadow_m);
2867
2878
  }
2868
- .bds112Card-card.bds112Card---outlined {
2879
+ .bds121Card-card.bds121Card---outlined {
2869
2880
  border: var(--card_border, none);
2870
2881
  --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);
2882
+ box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--bds-shadow_s);
2874
2883
  }
2875
- .bds112Card-card.bds112Card---clickable {
2884
+ .bds121Card-card.bds121Card---clickable {
2876
2885
  cursor: pointer;
2877
2886
  }
2878
- .bds112Card-card.bds112Card---padding-none {
2887
+ .bds121Card-card.bds121Card---padding-none {
2879
2888
  padding: 0;
2880
2889
  }
2881
- .bds112Card-card.bds112Card---padding-small {
2890
+ .bds121Card-card.bds121Card---padding-small {
2882
2891
  padding: var(--bds-space_s);
2883
2892
  }
2884
- .bds112Card-card.bds112Card---padding-medium {
2893
+ .bds121Card-card.bds121Card---padding-medium {
2885
2894
  padding: var(--bds-space_m);
2886
2895
  }
2887
- .bds112Card-card.bds112Card---padding-large {
2896
+ .bds121Card-card.bds121Card---padding-large {
2888
2897
  padding: var(--bds-space_l);
2889
2898
  }
2890
- .bds112Card-card.bds112Card---text-start {
2899
+ .bds121Card-card.bds121Card---text-start {
2891
2900
  text-align: start;
2892
2901
  }
2893
- .bds112Card-card.bds112Card---text-center {
2902
+ .bds121Card-card.bds121Card---text-center {
2894
2903
  text-align: center;
2895
2904
  }
2896
- .bds112Card-card.bds112Card---text-end {
2905
+ .bds121Card-card.bds121Card---text-end {
2897
2906
  text-align: end;
2898
2907
  }
2899
- .bds112Card-card.bds112Card---clickable:focus-visible {
2908
+ .bds121Card-card.bds121Card---clickable:focus-visible {
2900
2909
  outline: 2px solid var(--color_focus, currentcolor);
2901
2910
  outline-offset: 2px;
2902
2911
  }
2903
- .bds112Card-card.bds112Card---clickable:active {
2912
+ .bds121Card-card.bds121Card---clickable:active {
2904
2913
  transform: translateY(0);
2905
2914
  box-shadow: var(--bds-shadow_s);
2906
2915
  }
2907
2916
  @media (hover: hover) and (pointer: fine) {
2908
- .bds112Card-card.bds112Card---clickable:hover {
2917
+ .bds121Card-card.bds121Card---clickable:hover {
2909
2918
  transform: translateY(-2px);
2910
2919
  box-shadow: var(--bds-shadow_xl);
2911
2920
  }
2912
- .bds112Card-card.bds112Card---default:hover {
2921
+ .bds121Card-card.bds121Card---default:hover {
2913
2922
  box-shadow: var(--bds-shadow_m);
2914
2923
  }
2915
- .bds112Card-card.bds112Card---elevated:hover {
2924
+ .bds121Card-card.bds121Card---elevated:hover {
2916
2925
  box-shadow: var(--bds-shadow_2xl);
2917
2926
  }
2918
- .bds112Card-card.bds112Card---outlined:hover {
2927
+ .bds121Card-card.bds121Card---outlined:hover {
2919
2928
  box-shadow: var(--bds-shadow_s);
2920
2929
  }
2921
2930
  }
@@ -2923,60 +2932,60 @@
2923
2932
 
2924
2933
  /* src/components/layout/SectionHeader/SectionHeader.module.css */
2925
2934
  @layer component {
2926
- .bds112SectionHeader-sectionHeader {
2935
+ .bds121SectionHeader-sectionHeader {
2927
2936
  display: flex;
2928
2937
  flex-direction: column;
2929
2938
  gap: var(--bds-space_m);
2930
2939
  grid-column: var(--bds-grid_span-100);
2931
2940
  }
2932
- .bds112SectionHeader-title {
2941
+ .bds121SectionHeader-title {
2933
2942
  color: var(--sectionHeader-title-color, var(--bds-color_on-bg));
2934
2943
  margin: 0;
2935
2944
  font-family: var(--bds-font_family--body);
2936
2945
  }
2937
- .bds112SectionHeader-subtitle {
2946
+ .bds121SectionHeader-subtitle {
2938
2947
  color: var(--sectionHeader_subtitle-color, var(--bds-color_grey--strong));
2939
2948
  margin: 0;
2940
2949
  font-family: var(--bds-font_family--body);
2941
2950
  font-weight: var(--bds-font_weight--medium);
2942
2951
  }
2943
- .bds112SectionHeader-sectionHeader.bds112SectionHeader---start {
2952
+ .bds121SectionHeader-sectionHeader.bds121SectionHeader---start {
2944
2953
  align-items: flex-start;
2945
2954
  text-align: start;
2946
2955
  }
2947
- .bds112SectionHeader-sectionHeader.bds112SectionHeader---center {
2956
+ .bds121SectionHeader-sectionHeader.bds121SectionHeader---center {
2948
2957
  align-items: center;
2949
2958
  text-align: center;
2950
2959
  }
2951
- .bds112SectionHeader-sectionHeader.bds112SectionHeader---end {
2960
+ .bds121SectionHeader-sectionHeader.bds121SectionHeader---end {
2952
2961
  align-items: flex-end;
2953
2962
  text-align: end;
2954
2963
  }
2955
- .bds112SectionHeader-sectionHeader.bds112SectionHeader---small .bds112SectionHeader-title {
2964
+ .bds121SectionHeader-sectionHeader.bds121SectionHeader---small .bds121SectionHeader-title {
2956
2965
  font-size: var(--bds-font_size--heading-1);
2957
2966
  line-height: var(--bds-font_line-height--heading);
2958
2967
  font-weight: var(--bds-font_weight--bold);
2959
2968
  }
2960
- .bds112SectionHeader-sectionHeader.bds112SectionHeader---small .bds112SectionHeader-subtitle {
2969
+ .bds121SectionHeader-sectionHeader.bds121SectionHeader---small .bds121SectionHeader-subtitle {
2961
2970
  font-size: var(--bds-font_size--body);
2962
2971
  line-height: 1.4;
2963
2972
  }
2964
- .bds112SectionHeader-sectionHeader.bds112SectionHeader---medium .bds112SectionHeader-title {
2973
+ .bds121SectionHeader-sectionHeader.bds121SectionHeader---medium .bds121SectionHeader-title {
2965
2974
  font-size: var(--bds-font_size--display);
2966
2975
  line-height: var(--bds-font_line-height--display);
2967
2976
  font-weight: var(--bds-font_weight--bold);
2968
2977
  }
2969
- .bds112SectionHeader-sectionHeader.bds112SectionHeader---medium .bds112SectionHeader-subtitle {
2978
+ .bds121SectionHeader-sectionHeader.bds121SectionHeader---medium .bds121SectionHeader-subtitle {
2970
2979
  font-size: var(--bds-font_size--heading-3);
2971
2980
  line-height: 1.3;
2972
2981
  }
2973
- .bds112SectionHeader-sectionHeader.bds112SectionHeader---large .bds112SectionHeader-title {
2982
+ .bds121SectionHeader-sectionHeader.bds121SectionHeader---large .bds121SectionHeader-title {
2974
2983
  font-size: var(--bds-font_size--display);
2975
2984
  line-height: var(--bds-font_line-height--display);
2976
2985
  font-weight: var(--bds-font_weight--bold);
2977
2986
  letter-spacing: var(--bds-font_tracking--tight);
2978
2987
  }
2979
- .bds112SectionHeader-sectionHeader.bds112SectionHeader---large .bds112SectionHeader-subtitle {
2988
+ .bds121SectionHeader-sectionHeader.bds121SectionHeader---large .bds121SectionHeader-subtitle {
2980
2989
  font-size: var(--bds-font_size--heading-2);
2981
2990
  line-height: 1.3;
2982
2991
  font-weight: var(--bds-font_weight--medium);
@@ -2985,7 +2994,7 @@
2985
2994
 
2986
2995
  /* src/components/layout/IconWrapper/IconWrapper.module.css */
2987
2996
  @layer component {
2988
- .bds112IconWrapper-wrapper {
2997
+ .bds121IconWrapper-wrapper {
2989
2998
  inline-size: 2em;
2990
2999
  block-size: 2em;
2991
3000
  font-size: 3em;
@@ -3000,7 +3009,7 @@
3000
3009
  position: relative;
3001
3010
  transition: var(--bds-animation_transition);
3002
3011
  }
3003
- .bds112IconWrapper-wrapper svg {
3012
+ .bds121IconWrapper-wrapper svg {
3004
3013
  fill: currentcolor;
3005
3014
  }
3006
3015
  }