@boostdev/design-system-components 2.14.1 → 2.16.0

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