@boostdev/design-system-components 2.15.0 → 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 (284) hide show
  1. package/AGENTS.md +19 -14
  2. package/dist/client.cjs +271 -205
  3. package/dist/client.css +801 -642
  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 +801 -642
  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-JV5QT2OU.js → chunk-YLDQOESI.js} +27 -13
  36. package/dist/web-components/globals.js +1 -1
  37. package/dist/web-components/index.d.ts +1 -0
  38. package/dist/web-components/index.js +33 -28
  39. package/dist/web-components/interaction/bds-dropdown-menu-group.d.ts +41 -0
  40. package/dist/web-components/interaction/bds-dropdown-menu-group.js +7 -0
  41. package/dist/web-components/interaction/bds-dropdown-menu-item.d.ts +14 -1
  42. package/dist/web-components/interaction/bds-dropdown-menu-item.js +1 -1
  43. package/dist/web-components/interaction/bds-dropdown-menu.d.ts +2 -1
  44. package/dist/web-components/interaction/bds-dropdown-menu.js +1 -1
  45. package/dist/web-components/interaction/bds-tab.d.ts +5 -0
  46. package/dist/web-components/interaction/bds-tab.js +1 -1
  47. package/dist/web-components/interaction/bds-tooltip.js +1 -1
  48. package/dist/web-components/interaction/form/bds-checkbox-group.d.ts +6 -0
  49. package/dist/web-components/interaction/form/bds-checkbox-group.js +2 -1
  50. package/dist/web-components/interaction/form/bds-checkbox.js +1 -1
  51. package/dist/web-components/interaction/form/bds-combobox.js +2 -1
  52. package/dist/web-components/interaction/form/bds-form-input.js +2 -1
  53. package/dist/web-components/interaction/form/bds-number-input.js +2 -1
  54. package/dist/web-components/interaction/form/bds-radio-group.d.ts +5 -0
  55. package/dist/web-components/interaction/form/bds-radio-group.js +2 -1
  56. package/dist/web-components/interaction/form/bds-radio.js +1 -1
  57. package/dist/web-components/interaction/form/bds-select.js +2 -1
  58. package/dist/web-components/interaction/form/bds-slider.js +2 -1
  59. package/dist/web-components/interaction/form/bds-switch.js +1 -1
  60. package/dist/web-components/interaction/form/bds-textarea.js +2 -1
  61. package/dist/web-components/ui/bds-alert.d.ts +8 -1
  62. package/dist/web-components/ui/bds-alert.js +1 -1
  63. package/dist/web-components/ui/bds-avatar.d.ts +11 -0
  64. package/dist/web-components/ui/bds-avatar.js +1 -1
  65. package/dist/web-components/ui/bds-notification-banner.d.ts +14 -1
  66. package/dist/web-components/ui/bds-notification-banner.js +1 -1
  67. package/dist/web-components/ui/bds-section-header.d.ts +6 -0
  68. package/dist/web-components/ui/bds-section-header.js +1 -1
  69. package/dist/web-components/ui/bds-separator.js +1 -1
  70. package/dist/web-components/ui/bds-table.js +1 -1
  71. package/package.json +6 -2
  72. package/src/components/interaction/DropdownMenu/DropdownMenu.mdx +35 -4
  73. package/src/components/interaction/DropdownMenu/DropdownMenu.module.css +58 -10
  74. package/src/components/interaction/DropdownMenu/DropdownMenu.spec.tsx +114 -1
  75. package/src/components/interaction/DropdownMenu/DropdownMenu.stories.tsx +25 -0
  76. package/src/components/interaction/DropdownMenu/DropdownMenu.tsx +69 -17
  77. package/src/components/interaction/form/Checkbox/Checkbox.module.css +1 -0
  78. package/src/components/interaction/form/Checkbox/Checkbox.spec.tsx +7 -0
  79. package/src/components/interaction/form/CheckboxGroup/CheckboxGroup.mdx +1 -0
  80. package/src/components/interaction/form/CheckboxGroup/CheckboxGroup.module.css +7 -0
  81. package/src/components/interaction/form/CheckboxGroup/CheckboxGroup.spec.tsx +22 -0
  82. package/src/components/interaction/form/CheckboxGroup/CheckboxGroup.tsx +1 -1
  83. package/src/components/interaction/form/Combobox/Combobox.module.css +1 -0
  84. package/src/components/interaction/form/Combobox/Combobox.spec.tsx +7 -0
  85. package/src/components/interaction/form/FormInput/FormInput.mdx +9 -0
  86. package/src/components/interaction/form/FormInput/FormInput.module.css +1 -0
  87. package/src/components/interaction/form/FormInput/FormInput.spec.tsx +7 -0
  88. package/src/components/interaction/form/NumberInput/NumberInput.module.css +1 -0
  89. package/src/components/interaction/form/NumberInput/NumberInput.spec.tsx +7 -0
  90. package/src/components/interaction/form/Radio/Radio.module.css +1 -0
  91. package/src/components/interaction/form/Radio/Radio.spec.tsx +7 -0
  92. package/src/components/interaction/form/RadioGroup/RadioGroup.mdx +1 -0
  93. package/src/components/interaction/form/RadioGroup/RadioGroup.module.css +7 -0
  94. package/src/components/interaction/form/RadioGroup/RadioGroup.spec.tsx +22 -0
  95. package/src/components/interaction/form/RadioGroup/RadioGroup.tsx +1 -1
  96. package/src/components/interaction/form/Select/Select.module.css +1 -0
  97. package/src/components/interaction/form/Select/Select.spec.tsx +7 -0
  98. package/src/components/interaction/form/Switch/Switch.module.css +1 -0
  99. package/src/components/interaction/form/Switch/Switch.spec.tsx +7 -0
  100. package/src/components/interaction/form/Textarea/Textarea.module.css +1 -0
  101. package/src/components/interaction/form/Textarea/Textarea.spec.tsx +7 -0
  102. package/src/components/interaction/form/atoms/Message.module.css +14 -3
  103. package/src/components/interaction/form/atoms/Message.spec.tsx +22 -0
  104. package/src/components/interaction/form/atoms/Message.tsx +5 -0
  105. package/src/components/layout/SectionHeader/SectionHeader.mdx +18 -5
  106. package/src/components/layout/SectionHeader/SectionHeader.module.css +35 -14
  107. package/src/components/layout/SectionHeader/SectionHeader.spec.tsx +44 -0
  108. package/src/components/layout/SectionHeader/SectionHeader.stories.tsx +5 -0
  109. package/src/components/layout/SectionHeader/SectionHeader.tsx +3 -1
  110. package/src/components/ui/Alert/Alert.mdx +11 -0
  111. package/src/components/ui/Alert/Alert.module.css +30 -1
  112. package/src/components/ui/Alert/Alert.spec.tsx +21 -0
  113. package/src/components/ui/Alert/Alert.stories.tsx +20 -0
  114. package/src/components/ui/Alert/Alert.tsx +8 -1
  115. package/src/components/ui/Avatar/Avatar.mdx +22 -2
  116. package/src/components/ui/Avatar/Avatar.module.css +29 -2
  117. package/src/components/ui/Avatar/Avatar.spec.tsx +26 -0
  118. package/src/components/ui/Avatar/Avatar.stories.tsx +23 -0
  119. package/src/components/ui/Avatar/Avatar.tsx +4 -2
  120. package/src/components/ui/Avatar/avatarTone.spec.ts +41 -0
  121. package/src/components/ui/Avatar/avatarTone.ts +22 -0
  122. package/src/components/ui/Collapsible/Collapsible.module.css +1 -2
  123. package/src/components/ui/NotificationBanner/NotificationBanner.mdx +14 -0
  124. package/src/components/ui/NotificationBanner/NotificationBanner.module.css +31 -1
  125. package/src/components/ui/NotificationBanner/NotificationBanner.spec.tsx +29 -0
  126. package/src/components/ui/NotificationBanner/NotificationBanner.stories.tsx +25 -0
  127. package/src/components/ui/NotificationBanner/NotificationBanner.tsx +15 -1
  128. package/src/components/ui/Separator/Separator.mdx +1 -0
  129. package/src/components/ui/Separator/Separator.module.css +6 -0
  130. package/src/components/ui/Separator/Separator.spec.tsx +19 -0
  131. package/src/components/ui/Separator/Separator.stories.tsx +15 -0
  132. package/src/components/ui/Table/Table.mdx +4 -1
  133. package/src/components/ui/Table/Table.module.css +7 -7
  134. package/src/components/ui/Table/Table.spec.tsx +11 -0
  135. package/src/components/ui/Tabs/Tabs.mdx +11 -5
  136. package/src/components/ui/Tabs/Tabs.module.css +23 -5
  137. package/src/components/ui/Tabs/Tabs.spec.tsx +39 -0
  138. package/src/components/ui/Tabs/Tabs.tsx +2 -1
  139. package/src/components/ui/Tabs/getNodeText.spec.tsx +23 -0
  140. package/src/components/ui/Tabs/getNodeText.ts +13 -0
  141. package/src/components/ui/Tooltip/Tooltip.mdx +6 -3
  142. package/src/components/ui/Tooltip/Tooltip.module.css +6 -2
  143. package/src/components/ui/Tooltip/Tooltip.spec.tsx +10 -0
  144. package/src/components/ui/Tooltip/Tooltip.stories.tsx +13 -0
  145. package/src/css/bdc.css +5 -2
  146. package/src/css/bdc.spec.ts +65 -0
  147. package/src/stories/DesignSystem/Borders.mdx +17 -9
  148. package/src/web-components/globals.ts +10 -4
  149. package/src/web-components/index.ts +1 -0
  150. package/src/web-components/interaction/BdsAccordion.mdx +1 -1
  151. package/src/web-components/interaction/BdsAccordion.stories.tsx +1 -1
  152. package/src/web-components/interaction/BdsButton.mdx +1 -1
  153. package/src/web-components/interaction/BdsButton.stories.tsx +1 -1
  154. package/src/web-components/interaction/BdsCollapsible.mdx +1 -1
  155. package/src/web-components/interaction/BdsCollapsible.stories.tsx +1 -1
  156. package/src/web-components/interaction/BdsDialog.mdx +1 -1
  157. package/src/web-components/interaction/BdsDialog.stories.tsx +1 -1
  158. package/src/web-components/interaction/BdsDrawer.mdx +1 -1
  159. package/src/web-components/interaction/BdsDrawer.stories.tsx +1 -1
  160. package/src/web-components/interaction/BdsDropdownMenu.mdx +62 -6
  161. package/src/web-components/interaction/BdsDropdownMenu.stories.tsx +32 -7
  162. package/src/web-components/interaction/BdsPopover.mdx +1 -1
  163. package/src/web-components/interaction/BdsPopover.stories.tsx +1 -1
  164. package/src/web-components/interaction/BdsSkipLink.mdx +1 -1
  165. package/src/web-components/interaction/BdsSkipLink.stories.tsx +1 -1
  166. package/src/web-components/interaction/BdsTabs.mdx +10 -1
  167. package/src/web-components/interaction/BdsTabs.stories.tsx +1 -1
  168. package/src/web-components/interaction/BdsToastProvider.mdx +1 -1
  169. package/src/web-components/interaction/BdsToastProvider.stories.tsx +1 -1
  170. package/src/web-components/interaction/BdsTooltip.mdx +13 -5
  171. package/src/web-components/interaction/BdsTooltip.stories.tsx +12 -12
  172. package/src/web-components/interaction/bds-dropdown-menu-group.ts +72 -0
  173. package/src/web-components/interaction/bds-dropdown-menu-item.ts +65 -17
  174. package/src/web-components/interaction/bds-dropdown-menu.spec.ts +135 -0
  175. package/src/web-components/interaction/bds-dropdown-menu.ts +5 -4
  176. package/src/web-components/interaction/bds-tab.spec.ts +34 -2
  177. package/src/web-components/interaction/bds-tab.ts +31 -6
  178. package/src/web-components/interaction/bds-tooltip.spec.ts +16 -0
  179. package/src/web-components/interaction/bds-tooltip.ts +10 -8
  180. package/src/web-components/interaction/form/BdsCheckbox.mdx +5 -1
  181. package/src/web-components/interaction/form/BdsCheckbox.stories.tsx +1 -1
  182. package/src/web-components/interaction/form/BdsCheckboxGroup.mdx +5 -1
  183. package/src/web-components/interaction/form/BdsCheckboxGroup.stories.tsx +1 -1
  184. package/src/web-components/interaction/form/BdsCombobox.mdx +5 -1
  185. package/src/web-components/interaction/form/BdsCombobox.stories.tsx +1 -1
  186. package/src/web-components/interaction/form/BdsFieldGroup.stories.tsx +1 -1
  187. package/src/web-components/interaction/form/BdsFileInput.mdx +1 -1
  188. package/src/web-components/interaction/form/BdsFileInput.stories.tsx +1 -1
  189. package/src/web-components/interaction/form/BdsFormInput.mdx +8 -1
  190. package/src/web-components/interaction/form/BdsFormInput.stories.tsx +1 -1
  191. package/src/web-components/interaction/form/BdsNumberInput.mdx +5 -1
  192. package/src/web-components/interaction/form/BdsNumberInput.stories.tsx +1 -1
  193. package/src/web-components/interaction/form/BdsRadio.mdx +5 -1
  194. package/src/web-components/interaction/form/BdsRadio.stories.tsx +1 -1
  195. package/src/web-components/interaction/form/BdsRadioGroup.mdx +5 -1
  196. package/src/web-components/interaction/form/BdsRadioGroup.stories.tsx +1 -1
  197. package/src/web-components/interaction/form/BdsSegmentedControl.mdx +1 -1
  198. package/src/web-components/interaction/form/BdsSegmentedControl.stories.tsx +1 -1
  199. package/src/web-components/interaction/form/BdsSelect.mdx +5 -1
  200. package/src/web-components/interaction/form/BdsSelect.stories.tsx +1 -1
  201. package/src/web-components/interaction/form/BdsSlider.mdx +5 -1
  202. package/src/web-components/interaction/form/BdsSlider.stories.tsx +1 -1
  203. package/src/web-components/interaction/form/BdsSwitch.mdx +5 -1
  204. package/src/web-components/interaction/form/BdsSwitch.stories.tsx +1 -1
  205. package/src/web-components/interaction/form/BdsTextarea.mdx +5 -1
  206. package/src/web-components/interaction/form/BdsTextarea.stories.tsx +1 -1
  207. package/src/web-components/interaction/form/bds-checkbox-group.spec.ts +32 -3
  208. package/src/web-components/interaction/form/bds-checkbox-group.ts +33 -17
  209. package/src/web-components/interaction/form/bds-checkbox.ts +1 -0
  210. package/src/web-components/interaction/form/bds-combobox.ts +6 -16
  211. package/src/web-components/interaction/form/bds-form-input.ts +6 -16
  212. package/src/web-components/interaction/form/bds-number-input.ts +6 -16
  213. package/src/web-components/interaction/form/bds-radio-group.spec.ts +32 -3
  214. package/src/web-components/interaction/form/bds-radio-group.ts +26 -14
  215. package/src/web-components/interaction/form/bds-radio.ts +1 -0
  216. package/src/web-components/interaction/form/bds-select.ts +6 -16
  217. package/src/web-components/interaction/form/bds-slider.ts +5 -16
  218. package/src/web-components/interaction/form/bds-switch.ts +1 -0
  219. package/src/web-components/interaction/form/bds-textarea.ts +6 -16
  220. package/src/web-components/interaction/form/field-message.spec.ts +62 -0
  221. package/src/web-components/interaction/form/field-message.ts +55 -0
  222. package/src/web-components/layout/BdsGrid.mdx +1 -1
  223. package/src/web-components/layout/BdsGrid.stories.tsx +1 -1
  224. package/src/web-components/layout/BdsGridItem.mdx +1 -1
  225. package/src/web-components/layout/BdsGridItem.stories.tsx +1 -1
  226. package/src/web-components/ui/BdsAlert.mdx +19 -1
  227. package/src/web-components/ui/BdsAlert.stories.tsx +29 -3
  228. package/src/web-components/ui/BdsAvatar.mdx +20 -3
  229. package/src/web-components/ui/BdsAvatar.stories.tsx +25 -2
  230. package/src/web-components/ui/BdsBadge.mdx +1 -1
  231. package/src/web-components/ui/BdsBadge.stories.tsx +1 -1
  232. package/src/web-components/ui/BdsBreadcrumb.mdx +1 -1
  233. package/src/web-components/ui/BdsBreadcrumb.stories.tsx +1 -1
  234. package/src/web-components/ui/BdsButtonContainer.mdx +1 -1
  235. package/src/web-components/ui/BdsButtonContainer.stories.tsx +1 -1
  236. package/src/web-components/ui/BdsCalendar.mdx +1 -1
  237. package/src/web-components/ui/BdsCalendar.stories.tsx +1 -1
  238. package/src/web-components/ui/BdsCalendarRange.mdx +1 -1
  239. package/src/web-components/ui/BdsCalendarRange.stories.tsx +1 -1
  240. package/src/web-components/ui/BdsCard.mdx +1 -1
  241. package/src/web-components/ui/BdsCard.stories.tsx +1 -1
  242. package/src/web-components/ui/BdsCarousel.mdx +1 -1
  243. package/src/web-components/ui/BdsCarousel.stories.tsx +1 -1
  244. package/src/web-components/ui/BdsDescriptionList.mdx +1 -1
  245. package/src/web-components/ui/BdsDescriptionList.stories.tsx +1 -1
  246. package/src/web-components/ui/BdsIconWrapper.mdx +1 -1
  247. package/src/web-components/ui/BdsIconWrapper.stories.tsx +1 -1
  248. package/src/web-components/ui/BdsLink.mdx +1 -1
  249. package/src/web-components/ui/BdsLink.stories.tsx +1 -1
  250. package/src/web-components/ui/BdsLoading.mdx +1 -1
  251. package/src/web-components/ui/BdsLoading.stories.tsx +1 -1
  252. package/src/web-components/ui/BdsNotificationBanner.mdx +10 -1
  253. package/src/web-components/ui/BdsNotificationBanner.stories.tsx +29 -2
  254. package/src/web-components/ui/BdsPagination.mdx +1 -1
  255. package/src/web-components/ui/BdsPagination.stories.tsx +1 -1
  256. package/src/web-components/ui/BdsProgress.mdx +1 -1
  257. package/src/web-components/ui/BdsProgress.stories.tsx +1 -1
  258. package/src/web-components/ui/BdsProgressCircle.mdx +1 -1
  259. package/src/web-components/ui/BdsProgressCircle.stories.tsx +1 -1
  260. package/src/web-components/ui/BdsRating.mdx +1 -1
  261. package/src/web-components/ui/BdsRating.stories.tsx +1 -1
  262. package/src/web-components/ui/BdsSectionHeader.mdx +18 -6
  263. package/src/web-components/ui/BdsSectionHeader.stories.tsx +10 -2
  264. package/src/web-components/ui/BdsSeparator.mdx +2 -1
  265. package/src/web-components/ui/BdsSeparator.stories.tsx +13 -1
  266. package/src/web-components/ui/BdsSkeleton.mdx +1 -1
  267. package/src/web-components/ui/BdsSkeleton.stories.tsx +1 -1
  268. package/src/web-components/ui/BdsTable.mdx +5 -1
  269. package/src/web-components/ui/BdsTable.stories.tsx +1 -1
  270. package/src/web-components/ui/BdsTypography.mdx +1 -1
  271. package/src/web-components/ui/BdsTypography.stories.tsx +1 -1
  272. package/src/web-components/ui/bds-alert.spec.ts +27 -0
  273. package/src/web-components/ui/bds-alert.ts +34 -1
  274. package/src/web-components/ui/bds-avatar.spec.ts +47 -0
  275. package/src/web-components/ui/bds-avatar.ts +36 -3
  276. package/src/web-components/ui/bds-notification-banner.spec.ts +45 -0
  277. package/src/web-components/ui/bds-notification-banner.ts +53 -1
  278. package/src/web-components/ui/bds-section-header.spec.ts +36 -3
  279. package/src/web-components/ui/bds-section-header.ts +32 -10
  280. package/src/web-components/ui/bds-separator.spec.ts +8 -0
  281. package/src/web-components/ui/bds-separator.ts +7 -0
  282. package/src/web-components/ui/bds-table.spec.ts +11 -0
  283. package/src/web-components/ui/bds-table.ts +5 -5
  284. 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.bds2150Accordion-component {
31
- .bds2150Accordion-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
- .bds2150Accordion-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
- .bds2150Accordion-item:last-child {
45
+ .bds2160Accordion-item:last-child {
45
46
  border-block-end: none;
46
47
  }
47
- .bds2150Accordion-heading {
48
+ .bds2160Accordion-heading {
48
49
  margin: 0;
49
50
  }
50
- .bds2150Accordion-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
- .bds2150Accordion-trigger:disabled {
66
+ .bds2160Accordion-trigger:disabled {
66
67
  opacity: 0.4;
67
68
  cursor: not-allowed;
68
69
  }
69
- .bds2150Accordion-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
- .bds2150Accordion-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
- .bds2150Accordion-triggerLabel {
80
+ .bds2160Accordion-triggerLabel {
80
81
  flex: 1;
81
82
  text-align: start;
82
83
  }
83
- .bds2150Accordion-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
- .bds2150Accordion-item.bds2150Accordion---open .bds2150Accordion-chevron {
90
+ .bds2160Accordion-item.bds2160Accordion---open .bds2160Accordion-chevron {
90
91
  transform: rotate(180deg);
91
92
  }
92
- .bds2150Accordion-panel {
93
+ .bds2160Accordion-panel {
93
94
  overflow: hidden;
94
95
  }
95
- .bds2150Accordion-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
- .bds2150Accordion-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.bds2150Alert-component {
110
- .bds2150Alert-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
- .bds2150Alert---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
- .bds2150Alert---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
- .bds2150Alert---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
- .bds2150Alert---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
- .bds2150Alert-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
- .bds2150Alert-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
- .bds2150Alert-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
- .bds2150Alert-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
- .bds2150Alert-dismiss svg {
193
+ .bds2160Alert-dismiss svg {
175
194
  inline-size: 1rem;
176
195
  block-size: 1rem;
177
196
  }
178
- .bds2150Alert-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
- .bds2150Alert-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.bds2150Avatar-component {
191
- .bds2150Avatar-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
- .bds2150Avatar-avatar.bds2150Avatar---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
- .bds2150Avatar-avatar.bds2150Avatar---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
- .bds2150Avatar-avatar.bds2150Avatar---size_medium {
248
+ .bds2160Avatar-avatar.bds2160Avatar---size_medium {
210
249
  --avatar_size--variant: 3em;
211
250
  }
212
- .bds2150Avatar-avatar.bds2150Avatar---size_large {
251
+ .bds2160Avatar-avatar.bds2160Avatar---size_large {
213
252
  --avatar_size--variant: 4.5em;
214
253
  }
215
- .bds2150Avatar-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
- .bds2150Avatar-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
- .bds2150Avatar-avatar.bds2150Avatar---size_small .bds2150Avatar-initials {
265
+ .bds2160Avatar-avatar.bds2160Avatar---size_small .bds2160Avatar-initials {
227
266
  font-size: var(--bds-font_size--body--s);
228
267
  }
229
- .bds2150Avatar-avatar.bds2150Avatar---size_large .bds2150Avatar-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.bds2150Badge-component {
236
- .bds2150Badge-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
- .bds2150Badge---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
- .bds2150Badge---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
- .bds2150Badge---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
- .bds2150Badge---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
- .bds2150Badge---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.bds2150Breadcrumb-component {
273
- .bds2150Breadcrumb-breadcrumb {
311
+ @layer boostdev.bds2160Breadcrumb-component {
312
+ .bds2160Breadcrumb-breadcrumb {
274
313
  font-size: var(--bds-font_size--body--s);
275
314
  }
276
- .bds2150Breadcrumb-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
- .bds2150Breadcrumb-item {
324
+ .bds2160Breadcrumb-item {
286
325
  display: flex;
287
326
  align-items: center;
288
327
  gap: var(--bds-space_xxs);
289
328
  }
290
- .bds2150Breadcrumb-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
- .bds2150Breadcrumb-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
- .bds2150Breadcrumb-link:hover {
340
+ .bds2160Breadcrumb-link:hover {
302
341
  text-decoration: underline;
303
342
  text-underline-offset: 0.2em;
304
343
  }
305
344
  }
306
- .bds2150Breadcrumb-separator {
345
+ .bds2160Breadcrumb-separator {
307
346
  color: var(--bds-color_on-bg--subtle);
308
347
  user-select: none;
309
348
  }
310
- .bds2150Breadcrumb-text {
349
+ .bds2160Breadcrumb-text {
311
350
  color: var(--bds-color_on-bg--subtle);
312
351
  }
313
- .bds2150Breadcrumb-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.bds2150Collapsible-component {
321
- .bds2150Collapsible-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
- .bds2150Collapsible-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
- .bds2150Collapsible-summary::-webkit-details-marker {
383
+ .bds2160Collapsible-summary::-webkit-details-marker {
346
384
  display: none;
347
385
  }
348
- .bds2150Collapsible-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
- .bds2150Collapsible-summary:hover {
391
+ .bds2160Collapsible-summary:hover {
354
392
  background-color: var(--collapsible_bg--hover, var(--bds-color_bg--subtle));
355
393
  }
356
394
  }
357
- .bds2150Collapsible-collapsible[open] > .bds2150Collapsible-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
- .bds2150Collapsible-summaryContent {
398
+ .bds2160Collapsible-summaryContent {
361
399
  flex: 1;
362
400
  }
363
- .bds2150Collapsible-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
- .bds2150Collapsible-collapsible[open] > .bds2150Collapsible-summary .bds2150Collapsible-icon {
410
+ .bds2160Collapsible-collapsible[open] > .bds2160Collapsible-summary .bds2160Collapsible-icon {
373
411
  transform: rotate(-135deg);
374
412
  }
375
- .bds2150Collapsible-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
- .bds2150Collapsible-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.bds2150Calendar-component {
390
- .bds2150Calendar-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
- .bds2150Calendar-months {
440
+ .bds2160Calendar-months {
403
441
  display: flex;
404
442
  flex-wrap: wrap;
405
443
  gap: var(--bds-space_l);
406
444
  }
407
- .bds2150Calendar-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
- .bds2150Calendar-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
- .bds2150Calendar-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
- .bds2150Calendar-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
- .bds2150Calendar-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
- .bds2150Calendar-navBtn svg {
481
+ .bds2160Calendar-navBtn svg {
444
482
  inline-size: 1rem;
445
483
  block-size: 1rem;
446
484
  }
447
- .bds2150Calendar-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
- .bds2150Calendar-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
- .bds2150Calendar-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
- .bds2150Calendar-row {
499
+ .bds2160Calendar-row {
462
500
  display: contents;
463
501
  }
464
- .bds2150Calendar-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
- .bds2150Calendar-cell {
512
+ .bds2160Calendar-cell {
475
513
  display: flex;
476
514
  aspect-ratio: 1;
477
515
  }
478
- .bds2150Calendar-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
- .bds2150Calendar-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
- .bds2150Calendar-day:not(.bds2150Calendar-disabled, .bds2150Calendar-selected, .bds2150Calendar-rangeStart, .bds2150Calendar-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
- .bds2150Calendar-outside {
539
+ .bds2160Calendar-outside {
502
540
  color: var(--bds-color_on-bg--subtle);
503
541
  opacity: 0.4;
504
542
  }
505
- .bds2150Calendar-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
- .bds2150Calendar-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
- .bds2150Calendar-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
- .bds2150Calendar-rangeStart,
521
- .bds2150Calendar-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
- .bds2150Calendar-disabled {
564
+ .bds2160Calendar-disabled {
527
565
  opacity: 0.35;
528
566
  cursor: not-allowed;
529
567
  }
530
568
  @media (prefers-reduced-motion: reduce) {
531
- .bds2150Calendar-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.bds2150Carousel-component {
539
- .bds2150Carousel-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
- .bds2150Carousel-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
- .bds2150Carousel-track::-webkit-scrollbar {
592
+ .bds2160Carousel-track::-webkit-scrollbar {
555
593
  display: none;
556
594
  }
557
- .bds2150Carousel-slide {
595
+ .bds2160Carousel-slide {
558
596
  scroll-snap-align: start;
559
597
  flex-shrink: 0;
560
598
  }
561
- .bds2150Carousel-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
- .bds2150Carousel-navBtn svg {
616
+ .bds2160Carousel-navBtn svg {
579
617
  inline-size: 1.25rem;
580
618
  block-size: 1.25rem;
581
619
  }
582
- .bds2150Carousel-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
- .bds2150Carousel-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
- .bds2150Carousel-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.bds2150DescriptionList-component {
600
- .bds2150DescriptionList-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
- .bds2150DescriptionList-group {
647
+ .bds2160DescriptionList-group {
610
648
  display: flex;
611
649
  flex-direction: column;
612
650
  gap: var(--bds-space_xxs);
613
651
  }
614
- .bds2150DescriptionList-term {
652
+ .bds2160DescriptionList-term {
615
653
  font-weight: var(--bds-font_weight--semibold);
616
654
  color: var(--bds-color_on-bg);
617
655
  }
618
- .bds2150DescriptionList-details {
656
+ .bds2160DescriptionList-details {
619
657
  margin: 0;
620
658
  color: var(--bds-color_on-bg);
621
659
  }
622
- .bds2150DescriptionList---layout_inline .bds2150DescriptionList-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
- .bds2150DescriptionList---layout_inline .bds2150DescriptionList-term {
666
+ .bds2160DescriptionList---layout_inline .bds2160DescriptionList-term {
629
667
  grid-column: 1;
630
668
  }
631
- .bds2150DescriptionList---layout_inline .bds2150DescriptionList-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.bds2150Link-component {
638
- .bds2150Link-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
- .bds2150Link-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
- .bds2150Link-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
- .bds2150Link---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
- .bds2150Link---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
- .bds2150Link---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
- .bds2150Link---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
- .bds2150Link-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.bds2150Loading-component {
693
- .bds2150Loading-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
- .bds2150Loading-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
- .bds2150Loading---size_small .bds2150Loading-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
- .bds2150Loading---size_large .bds2150Loading-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
- .bds2150Loading-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.bds2150NotificationBanner-component {
733
- .bds2150NotificationBanner-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
- .bds2150NotificationBanner---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
- .bds2150NotificationBanner---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
- .bds2150NotificationBanner---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
- .bds2150NotificationBanner---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
- .bds2150NotificationBanner-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
- .bds2150NotificationBanner-action {
827
+ .bds2160NotificationBanner-action {
769
828
  flex-shrink: 0;
770
829
  }
771
- .bds2150NotificationBanner-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
- .bds2150NotificationBanner-dismiss svg {
846
+ .bds2160NotificationBanner-dismiss svg {
788
847
  inline-size: 1rem;
789
848
  block-size: 1rem;
790
849
  }
791
- .bds2150NotificationBanner-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
- .bds2150NotificationBanner-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.bds2150Pagination-component {
804
- .bds2150Pagination-pagination {
862
+ @layer boostdev.bds2160Pagination-component {
863
+ .bds2160Pagination-pagination {
805
864
  display: flex;
806
865
  justify-content: center;
807
866
  }
808
- .bds2150Pagination-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
- .bds2150Pagination-list li {
875
+ .bds2160Pagination-list li {
817
876
  list-style: none;
818
877
  }
819
- .bds2150Pagination-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
- .bds2150Pagination-button:disabled {
899
+ .bds2160Pagination-button:disabled {
841
900
  opacity: 0.4;
842
901
  cursor: not-allowed;
843
902
  }
844
- .bds2150Pagination-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
- .bds2150Pagination-button:not(:disabled, .bds2150Pagination---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
- .bds2150Pagination-button.bds2150Pagination---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
- .bds2150Pagination-button.bds2150Pagination---nav svg {
918
+ .bds2160Pagination-button.bds2160Pagination---nav svg {
860
919
  inline-size: 1rem;
861
920
  block-size: 1rem;
862
921
  }
863
- .bds2150Pagination-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.bds2150Progress-component {
877
- .bds2150Progress-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
- .bds2150Progress-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
- .bds2150Progress-value {
949
+ .bds2160Progress-value {
891
950
  font-variant-numeric: tabular-nums;
892
951
  }
893
- .bds2150Progress-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
- .bds2150Progress-track.bds2150Progress---size_small {
959
+ .bds2160Progress-track.bds2160Progress---size_small {
901
960
  --progress_height: var(--bds-space_xxs);
902
961
  }
903
- .bds2150Progress-track.bds2150Progress---size_medium {
962
+ .bds2160Progress-track.bds2160Progress---size_medium {
904
963
  --progress_height: var(--bds-space_xs);
905
964
  }
906
- .bds2150Progress-track.bds2150Progress---size_large {
965
+ .bds2160Progress-track.bds2160Progress---size_large {
907
966
  --progress_height: var(--bds-space_s);
908
967
  }
909
- .bds2150Progress-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
- .bds2150Progress-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.bds2150ProgressCircle-component {
924
- .bds2150ProgressCircle-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
- .bds2150ProgressCircle-svg {
989
+ .bds2160ProgressCircle-svg {
931
990
  display: block;
932
991
  }
933
- .bds2150ProgressCircle-track {
992
+ .bds2160ProgressCircle-track {
934
993
  stroke: var(--progressCircle_color-track, var(--bds-color_bg--subtle));
935
994
  }
936
- .bds2150ProgressCircle-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
- .bds2150ProgressCircle-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
- .bds2150ProgressCircle---size_small .bds2150ProgressCircle-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
- .bds2150ProgressCircle---size_medium .bds2150ProgressCircle-value {
1010
+ .bds2160ProgressCircle---size_medium .bds2160ProgressCircle-value {
952
1011
  font-size: var(--bds-font_size--body--s);
953
1012
  }
954
- .bds2150ProgressCircle---size_large .bds2150ProgressCircle-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
- .bds2150ProgressCircle-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.bds2150Separator-component {
966
- .bds2150Separator-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
- .bds2150Separator-separator.bds2150Separator---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
- .bds2150Separator-separator.bds2150Separator---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.bds2150Skeleton-component {
985
- .bds2150Skeleton-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
- .bds2150Skeleton-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.bds2150SkipLink-component {
1015
- .bds2150SkipLink-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
- .bds2150SkipLink-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
- .bds2150SkipLink-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.bds2150Table-component {
1047
- .bds2150Table-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
- .bds2150Table-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
- .bds2150Table-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
- .bds2150Table-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
- .bds2150Table-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
- .bds2150Table-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
- .bds2150Table-th.bds2150Table---sortable {
1150
+ .bds2160Table-th.bds2160Table---sortable {
1086
1151
  padding: 0;
1087
1152
  }
1088
- .bds2150Table-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
- .bds2150Table-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
- .bds2150Table-sortButton:hover {
1172
+ .bds2160Table-sortButton:hover {
1108
1173
  color: var(--table_sortBtn-color--hover, var(--bds-color_on-bg));
1109
1174
  }
1110
1175
  }
1111
- .bds2150Table-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
- .bds2150Table-sortIcon.bds2150Table---sort-active {
1182
+ .bds2160Table-sortIcon.bds2160Table---sort-active {
1118
1183
  opacity: 1;
1119
1184
  color: var(--bds-color_interactive);
1120
1185
  }
1121
- .bds2150Table-sortIcon.bds2150Table---sort-desc {
1186
+ .bds2160Table-sortIcon.bds2160Table---sort-desc {
1122
1187
  transform: rotate(180deg);
1123
1188
  }
1124
- .bds2150Table-tbody .bds2150Table-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
- .bds2150Table-tbody .bds2150Table-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
- .bds2150Table-tbody .bds2150Table-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
- .bds2150Table-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
- .bds2150Table-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.bds2150Tabs-component {
1150
- .bds2150Tabs-tabs {
1214
+ @layer boostdev.bds2160Tabs-component {
1215
+ .bds2160Tabs-tabs {
1151
1216
  display: flex;
1152
1217
  flex-direction: column;
1153
1218
  }
1154
- .bds2150Tabs-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
- .bds2150Tabs-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
- .bds2150Tabs-tab.bds2150Tabs---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
- .bds2150Tabs-tab:disabled {
1255
+ .bds2160Tabs-tab:disabled {
1178
1256
  opacity: 0.4;
1179
1257
  cursor: not-allowed;
1180
1258
  }
1181
- .bds2150Tabs-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
- .bds2150Tabs-tab:not(:disabled, .bds2150Tabs---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
- .bds2150Tabs-panel {
1269
+ .bds2160Tabs-panel {
1192
1270
  padding-block-start: var(--tabs_panel-padding, var(--bds-space_m));
1193
1271
  }
1194
- .bds2150Tabs-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.bds2150Tooltip-component {
1202
- .bds2150Tooltip-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
- .bds2150Tooltip-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] .bds2150Tooltip-tooltip,
1226
- .bds2150Tooltip-tooltip[dir=rtl] {
1304
+ [dir=rtl] .bds2160Tooltip-tooltip,
1305
+ .bds2160Tooltip-tooltip[dir=rtl] {
1227
1306
  --tooltip_dir: -1;
1228
1307
  }
1229
- .bds2150Tooltip---visible {
1308
+ .bds2160Tooltip---visible {
1230
1309
  visibility: visible;
1231
1310
  opacity: 1;
1232
1311
  pointer-events: auto;
1233
1312
  }
1234
- .bds2150Tooltip---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
- .bds2150Tooltip---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
- .bds2150Tooltip---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
- .bds2150Tooltip---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
- .bds2150Tooltip-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.bds2150Typography-component {
1263
- .bds2150Typography-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
- .bds2150Typography---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
- .bds2150Typography---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
- .bds2150Typography---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
- .bds2150Typography---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
- .bds2150Typography---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,9 +1397,9 @@
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.bds2150Button-component {
1322
- .bds2150Button-button,
1323
- .bds2150Button-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;
@@ -1343,78 +1422,78 @@
1343
1422
  box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
1344
1423
  transition: var(--bds-animation_transition), --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing);
1345
1424
  }
1346
- .bds2150Button-button.bds2150Button---default {
1425
+ .bds2160Button-button.bds2160Button---default {
1347
1426
  }
1348
- .bds2150Button-button.bds2150Button---outline,
1349
- .bds2150Button-button.bds2150Button---ghost {
1427
+ .bds2160Button-button.bds2160Button---outline,
1428
+ .bds2160Button-button.bds2160Button---ghost {
1350
1429
  --button_bg--variant: var(--button_bg--outline, transparent);
1351
1430
  --button_text--variant: var(--button_text--outline, var(--button_color--on-bg, var(--bds-color_interactive_on-bg)));
1352
1431
  --button_border--variant: var(--button_border--outline, var(--button_color--on-bg, var(--bds-color_interactive_on-bg)));
1353
1432
  }
1354
- .bds2150Button-button.bds2150Button---size_small {
1433
+ .bds2160Button-button.bds2160Button---size_small {
1355
1434
  --button_height: 2.25em;
1356
1435
  --button_font-size: var(--bds-font_size--body--s);
1357
1436
  --button_padding-inline--size: var(--bds-space_m);
1358
1437
  }
1359
- .bds2150Button-button.bds2150Button---size_medium {
1438
+ .bds2160Button-button.bds2160Button---size_medium {
1360
1439
  --button_height: 3em;
1361
1440
  --button_padding-inline--size: var(--bds-space_l);
1362
1441
  }
1363
- .bds2150Button-button.bds2150Button---size_large {
1442
+ .bds2160Button-button.bds2160Button---size_large {
1364
1443
  --button_font-size: var(--bds-font_size--heading-3);
1365
1444
  --button_padding-inline--size: var(--bds-space_xl);
1366
1445
  }
1367
- .bds2150Button-button.bds2150Button---hasPulse {
1446
+ .bds2160Button-button.bds2160Button---hasPulse {
1368
1447
  animation: pulse 3s infinite;
1369
1448
  }
1370
- .bds2150Button-button.bds2150Button---iconOnly {
1449
+ .bds2160Button-button.bds2160Button---iconOnly {
1371
1450
  aspect-ratio: 1;
1372
1451
  box-sizing: border-box;
1373
1452
  padding: var(--bds-space_xxs);
1374
1453
  }
1375
- .bds2150Button-button.bds2150Button---iconOnly > * {
1454
+ .bds2160Button-button.bds2160Button---iconOnly > * {
1376
1455
  inline-size: 100%;
1377
1456
  block-size: 100%;
1378
1457
  }
1379
- .bds2150Button-button[href] {
1458
+ .bds2160Button-button[href] {
1380
1459
  text-decoration: none;
1381
1460
  }
1382
- .bds2150Button-button svg {
1461
+ .bds2160Button-button svg {
1383
1462
  --icon__stroke: currentcolor;
1384
1463
  fill: currentcolor;
1385
1464
  color: currentcolor;
1386
1465
  flex-shrink: 0;
1387
1466
  }
1388
- .bds2150Button-iconStart {
1467
+ .bds2160Button-iconStart {
1389
1468
  display: flex;
1390
1469
  align-items: center;
1391
1470
  margin-inline-start: calc(var(--button_icon-offset, calc(var(--button_padding-inline--size) / 2)) * -1);
1392
1471
  transition: var(--bds-animation_transition);
1393
1472
  }
1394
- .bds2150Button-iconEnd {
1473
+ .bds2160Button-iconEnd {
1395
1474
  display: flex;
1396
1475
  align-items: center;
1397
1476
  margin-inline-end: calc(var(--button_icon-offset, calc(var(--button_padding-inline--size) / 2)) * -1);
1398
1477
  transition: var(--bds-animation_transition);
1399
1478
  }
1400
- .bds2150Button-button.bds2150Button---iconOnly .bds2150Button-iconStart,
1401
- .bds2150Button-button.bds2150Button---iconOnly .bds2150Button-iconEnd {
1479
+ .bds2160Button-button.bds2160Button---iconOnly .bds2160Button-iconStart,
1480
+ .bds2160Button-button.bds2160Button---iconOnly .bds2160Button-iconEnd {
1402
1481
  margin-inline: 0;
1403
1482
  }
1404
1483
  @media (hover: hover) and (pointer: fine) {
1405
- .bds2150Button-button:hover .bds2150Button-iconStart svg {
1484
+ .bds2160Button-button:hover .bds2160Button-iconStart svg {
1406
1485
  animation: fadeZoom 2s ease-out infinite;
1407
1486
  }
1408
- .bds2150Button-button:hover .bds2150Button-iconEnd svg {
1487
+ .bds2160Button-button:hover .bds2160Button-iconEnd svg {
1409
1488
  animation: fadeZoom 2s ease-out infinite;
1410
1489
  }
1411
1490
  }
1412
- .bds2150Button-button:focus-visible {
1491
+ .bds2160Button-button:focus-visible {
1413
1492
  outline: var(--bds-outline_default);
1414
1493
  outline-offset: var(--bds-outline_offset);
1415
1494
  }
1416
1495
  @media (hover: hover) and (pointer: fine) {
1417
- .bds2150Button-button.bds2150Button---default:hover {
1496
+ .bds2160Button-button.bds2160Button---default:hover {
1418
1497
  --button_bg--variant: var(--button_bg--hover, var(--bds-color_bg));
1419
1498
  --button_text--variant: var(--button_text--hover, var(--bds-color_interactive_on-bg));
1420
1499
  --button_border--variant: var(--button_border--hover, currentcolor);
@@ -1422,25 +1501,25 @@
1422
1501
  }
1423
1502
  }
1424
1503
  @media (hover: hover) and (pointer: fine) {
1425
- .bds2150Button-button.bds2150Button---outline:hover,
1426
- .bds2150Button-button.bds2150Button---ghost:hover {
1504
+ .bds2160Button-button.bds2160Button---outline:hover,
1505
+ .bds2160Button-button.bds2160Button---ghost:hover {
1427
1506
  --button_bg--variant: var(--button_bg--outline-hover, var(--button_color, var(--bds-color_interactive)));
1428
1507
  --button_text--variant: var(--button_text--outline-hover, var(--button_on-color, var(--bds-color_on-interactive)));
1429
1508
  --button_border--variant: var(--button_border--outline-hover, transparent);
1430
1509
  }
1431
1510
  }
1432
1511
  @media (prefers-reduced-motion: reduce) {
1433
- .bds2150Button-button.bds2150Button---hasPulse,
1434
- .bds2150Button-button:hover .bds2150Button-iconStart svg,
1435
- .bds2150Button-button:hover .bds2150Button-iconEnd svg {
1512
+ .bds2160Button-button.bds2160Button---hasPulse,
1513
+ .bds2160Button-button:hover .bds2160Button-iconStart svg,
1514
+ .bds2160Button-button:hover .bds2160Button-iconEnd svg {
1436
1515
  animation: none;
1437
1516
  }
1438
1517
  }
1439
1518
  }
1440
1519
 
1441
1520
  /* src/components/interaction/Command/Command.module.css */
1442
- @layer boostdev.bds2150Command-component {
1443
- .bds2150Command-dialog {
1521
+ @layer boostdev.bds2160Command-component {
1522
+ .bds2160Command-dialog {
1444
1523
  padding: 0;
1445
1524
  border: none;
1446
1525
  border-radius: var(--command_radius, var(--bds-border_radius--m));
@@ -1450,11 +1529,11 @@
1450
1529
  overflow: visible;
1451
1530
  margin-block-start: 10vh;
1452
1531
  }
1453
- .bds2150Command-dialog::backdrop {
1532
+ .bds2160Command-dialog::backdrop {
1454
1533
  background-color: var(--color_backdrop, rgb(0 0 0 / 50%));
1455
1534
  backdrop-filter: blur(3px);
1456
1535
  }
1457
- .bds2150Command-palette {
1536
+ .bds2160Command-palette {
1458
1537
  display: flex;
1459
1538
  flex-direction: column;
1460
1539
  background-color: var(--command_color, var(--bds-color_bg--strong, var(--bds-color_bg)));
@@ -1467,7 +1546,7 @@
1467
1546
  border-radius: var(--command_radius, var(--bdc-outline_radius));
1468
1547
  box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--command_shadow, var(--bds-shadow_xl));
1469
1548
  }
1470
- .bds2150Command-searchRow {
1549
+ .bds2160Command-searchRow {
1471
1550
  display: flex;
1472
1551
  align-items: center;
1473
1552
  gap: var(--bds-space_xs);
@@ -1475,13 +1554,13 @@
1475
1554
  border-block-end: 1px solid currentcolor;
1476
1555
  flex-shrink: 0;
1477
1556
  }
1478
- .bds2150Command-searchIcon {
1557
+ .bds2160Command-searchIcon {
1479
1558
  inline-size: 1.25rem;
1480
1559
  block-size: 1.25rem;
1481
1560
  color: var(--bds-color_on-bg);
1482
1561
  flex-shrink: 0;
1483
1562
  }
1484
- .bds2150Command-search {
1563
+ .bds2160Command-search {
1485
1564
  flex: 1;
1486
1565
  border: none;
1487
1566
  font-family: var(--bds-font_family--body);
@@ -1490,14 +1569,14 @@
1490
1569
  background: transparent;
1491
1570
  min-inline-size: 0;
1492
1571
  }
1493
- .bds2150Command-search:focus-visible {
1572
+ .bds2160Command-search:focus-visible {
1494
1573
  outline: var(--bds-outline_default);
1495
1574
  outline-offset: var(--bds-outline_offset);
1496
1575
  }
1497
- .bds2150Command-search::placeholder {
1576
+ .bds2160Command-search::placeholder {
1498
1577
  color: var(--bds-color_on-bg);
1499
1578
  }
1500
- .bds2150Command-escHint {
1579
+ .bds2160Command-escHint {
1501
1580
  font-size: var(--bds-font_size--body--s);
1502
1581
  color: var(--bds-color_on-bg);
1503
1582
  border-radius: var(--command_kbd-radius, var(--bds-border_radius--xs));
@@ -1507,18 +1586,18 @@
1507
1586
  border: none;
1508
1587
  box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
1509
1588
  }
1510
- .bds2150Command-list {
1589
+ .bds2160Command-list {
1511
1590
  overflow-block: auto;
1512
1591
  list-style: none;
1513
1592
  margin: 0;
1514
1593
  padding: var(--bds-space_xs) 0;
1515
1594
  }
1516
- .bds2150Command-groupList {
1595
+ .bds2160Command-groupList {
1517
1596
  list-style: none;
1518
1597
  margin: 0;
1519
1598
  padding: 0;
1520
1599
  }
1521
- .bds2150Command-group {
1600
+ .bds2160Command-group {
1522
1601
  padding: var(--bds-space_xs) var(--bds-space_m);
1523
1602
  font-size: var(--bds-font_size--body--s);
1524
1603
  font-weight: var(--bds-font_weight--semibold);
@@ -1526,7 +1605,7 @@
1526
1605
  text-transform: uppercase;
1527
1606
  letter-spacing: 0.05em;
1528
1607
  }
1529
- .bds2150Command-item {
1608
+ .bds2160Command-item {
1530
1609
  display: flex;
1531
1610
  align-items: center;
1532
1611
  gap: var(--bds-space_s);
@@ -1534,19 +1613,19 @@
1534
1613
  cursor: pointer;
1535
1614
  transition: background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
1536
1615
  }
1537
- .bds2150Command-itemActive {
1616
+ .bds2160Command-itemActive {
1538
1617
  background-color: var(--command_item-bg--active, var(--bds-color_bg--subtle));
1539
1618
  }
1540
- .bds2150Command-itemLabel {
1619
+ .bds2160Command-itemLabel {
1541
1620
  flex: 1;
1542
1621
  font-size: var(--bds-font_size--body);
1543
1622
  color: var(--bds-color_on-bg);
1544
1623
  }
1545
- .bds2150Command-itemDesc {
1624
+ .bds2160Command-itemDesc {
1546
1625
  font-size: var(--bds-font_size--body--s);
1547
1626
  color: var(--bds-color_on-bg);
1548
1627
  }
1549
- .bds2150Command-shortcut {
1628
+ .bds2160Command-shortcut {
1550
1629
  font-size: var(--bds-font_size--body--s);
1551
1630
  color: var(--bds-color_on-bg);
1552
1631
  border-radius: var(--command_kbd-radius, var(--bds-border_radius--xs));
@@ -1555,13 +1634,13 @@
1555
1634
  border: none;
1556
1635
  box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
1557
1636
  }
1558
- .bds2150Command-empty {
1637
+ .bds2160Command-empty {
1559
1638
  padding: var(--bds-space_l) var(--bds-space_m);
1560
1639
  text-align: center;
1561
1640
  color: var(--bds-color_on-bg);
1562
1641
  font-size: var(--bds-font_size--body);
1563
1642
  }
1564
- .bds2150Command-srOnly {
1643
+ .bds2160Command-srOnly {
1565
1644
  position: absolute;
1566
1645
  inline-size: 1px;
1567
1646
  block-size: 1px;
@@ -1573,8 +1652,8 @@
1573
1652
  }
1574
1653
 
1575
1654
  /* src/components/interaction/Dialog/Dialog.module.css */
1576
- @layer boostdev.bds2150Dialog-component {
1577
- .bds2150Dialog-dialog {
1655
+ @layer boostdev.bds2160Dialog-component {
1656
+ .bds2160Dialog-dialog {
1578
1657
  font-size: var(--bds-font_size--body--s);
1579
1658
  border: var(--dialog_border, none);
1580
1659
  --bdc_color: currentcolor;
@@ -1590,17 +1669,17 @@
1590
1669
  max-block-size: 90svh;
1591
1670
  overflow: visible;
1592
1671
  }
1593
- .bds2150Dialog-dialog:not([open]) {
1672
+ .bds2160Dialog-dialog:not([open]) {
1594
1673
  display: none;
1595
1674
  }
1596
- .bds2150Dialog-dialogContent {
1675
+ .bds2160Dialog-dialogContent {
1597
1676
  display: grid;
1598
1677
  gap: var(--bds-grid_gap);
1599
1678
  overflow-block: auto;
1600
1679
  min-block-size: 0;
1601
1680
  flex: 1;
1602
1681
  }
1603
- .bds2150Dialog-closeButton {
1682
+ .bds2160Dialog-closeButton {
1604
1683
  all: unset;
1605
1684
  position: absolute;
1606
1685
  inset-block-start: -1em;
@@ -1618,29 +1697,29 @@
1618
1697
  box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
1619
1698
  cursor: pointer;
1620
1699
  }
1621
- .bds2150Dialog-closeButton::after {
1700
+ .bds2160Dialog-closeButton::after {
1622
1701
  content: "";
1623
1702
  position: absolute;
1624
1703
  inset-block: -0.5rem;
1625
1704
  inset-inline: -0.5rem;
1626
1705
  }
1627
- .bds2150Dialog-closeButton:focus-visible {
1706
+ .bds2160Dialog-closeButton:focus-visible {
1628
1707
  outline: var(--bds-outline_default);
1629
1708
  outline-offset: var(--bds-outline_offset);
1630
1709
  }
1631
- .bds2150Dialog-closeButton svg {
1710
+ .bds2160Dialog-closeButton svg {
1632
1711
  inline-size: 1.25em;
1633
1712
  block-size: 1.25em;
1634
1713
  }
1635
- .bds2150Dialog-dialog::backdrop {
1714
+ .bds2160Dialog-dialog::backdrop {
1636
1715
  background-color: var(--color_backdrop, rgb(0 0 0 / 50%));
1637
1716
  backdrop-filter: blur(3px);
1638
1717
  }
1639
1718
  }
1640
1719
 
1641
1720
  /* src/components/interaction/Drawer/Drawer.module.css */
1642
- @layer boostdev.bds2150Drawer-component {
1643
- .bds2150Drawer-drawer {
1721
+ @layer boostdev.bds2160Drawer-component {
1722
+ .bds2160Drawer-drawer {
1644
1723
  position: fixed;
1645
1724
  inset-block: 0;
1646
1725
  inset-inline: auto 0;
@@ -1663,37 +1742,37 @@
1663
1742
  display var(--bds-animation_transition-duration) var(--bds-animation_easing) allow-discrete,
1664
1743
  overlay var(--bds-animation_transition-duration) var(--bds-animation_easing) allow-discrete;
1665
1744
  }
1666
- .bds2150Drawer-drawer:not([open]) {
1745
+ .bds2160Drawer-drawer:not([open]) {
1667
1746
  display: none;
1668
1747
  }
1669
- .bds2150Drawer-drawer:dir(rtl) {
1748
+ .bds2160Drawer-drawer:dir(rtl) {
1670
1749
  translate: -100% 0;
1671
1750
  }
1672
- .bds2150Drawer---side_left.bds2150Drawer-drawer {
1751
+ .bds2160Drawer---side_left.bds2160Drawer-drawer {
1673
1752
  inset-inline: 0 auto;
1674
1753
  translate: -100% 0;
1675
1754
  }
1676
- .bds2150Drawer---side_left.bds2150Drawer-drawer:dir(rtl) {
1755
+ .bds2160Drawer---side_left.bds2160Drawer-drawer:dir(rtl) {
1677
1756
  translate: 100% 0;
1678
1757
  }
1679
- .bds2150Drawer-drawer[open] {
1758
+ .bds2160Drawer-drawer[open] {
1680
1759
  translate: 0 0;
1681
1760
  }
1682
1761
  @starting-style {
1683
- .bds2150Drawer-drawer[open] {
1762
+ .bds2160Drawer-drawer[open] {
1684
1763
  translate: 100% 0;
1685
1764
  }
1686
- .bds2150Drawer-drawer[open]:dir(rtl) {
1765
+ .bds2160Drawer-drawer[open]:dir(rtl) {
1687
1766
  translate: -100% 0;
1688
1767
  }
1689
- .bds2150Drawer---side_left.bds2150Drawer-drawer[open] {
1768
+ .bds2160Drawer---side_left.bds2160Drawer-drawer[open] {
1690
1769
  translate: -100% 0;
1691
1770
  }
1692
- .bds2150Drawer---side_left.bds2150Drawer-drawer[open]:dir(rtl) {
1771
+ .bds2160Drawer---side_left.bds2160Drawer-drawer[open]:dir(rtl) {
1693
1772
  translate: 100% 0;
1694
1773
  }
1695
1774
  }
1696
- .bds2150Drawer-drawer::backdrop {
1775
+ .bds2160Drawer-drawer::backdrop {
1697
1776
  background-color: var(--color_backdrop, rgb(0 0 0 / 50%));
1698
1777
  backdrop-filter: blur(3px);
1699
1778
  opacity: 0;
@@ -1702,15 +1781,15 @@
1702
1781
  display var(--bds-animation_transition-duration) var(--bds-animation_easing) allow-discrete,
1703
1782
  overlay var(--bds-animation_transition-duration) var(--bds-animation_easing) allow-discrete;
1704
1783
  }
1705
- .bds2150Drawer-drawer[open]::backdrop {
1784
+ .bds2160Drawer-drawer[open]::backdrop {
1706
1785
  opacity: 1;
1707
1786
  }
1708
1787
  @starting-style {
1709
- .bds2150Drawer-drawer[open]::backdrop {
1788
+ .bds2160Drawer-drawer[open]::backdrop {
1710
1789
  opacity: 0;
1711
1790
  }
1712
1791
  }
1713
- .bds2150Drawer-header {
1792
+ .bds2160Drawer-header {
1714
1793
  display: flex;
1715
1794
  align-items: center;
1716
1795
  justify-content: space-between;
@@ -1718,7 +1797,7 @@
1718
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))));
1719
1798
  flex-shrink: 0;
1720
1799
  }
1721
- .bds2150Drawer-closeButton {
1800
+ .bds2160Drawer-closeButton {
1722
1801
  all: unset;
1723
1802
  display: flex;
1724
1803
  align-items: center;
@@ -1729,20 +1808,20 @@
1729
1808
  cursor: pointer;
1730
1809
  transition: var(--bds-animation_transition);
1731
1810
  }
1732
- .bds2150Drawer-closeButton svg {
1811
+ .bds2160Drawer-closeButton svg {
1733
1812
  inline-size: 1.25rem;
1734
1813
  block-size: 1.25rem;
1735
1814
  }
1736
- .bds2150Drawer-closeButton:focus-visible {
1815
+ .bds2160Drawer-closeButton:focus-visible {
1737
1816
  outline: var(--bds-outline_default);
1738
1817
  outline-offset: var(--bds-outline_offset);
1739
1818
  }
1740
1819
  @media (hover: hover) and (pointer: fine) {
1741
- .bds2150Drawer-closeButton:hover {
1820
+ .bds2160Drawer-closeButton:hover {
1742
1821
  background-color: var(--drawer_close-bg--hover, var(--bds-color_bg--subtle));
1743
1822
  }
1744
1823
  }
1745
- .bds2150Drawer-body {
1824
+ .bds2160Drawer-body {
1746
1825
  flex: 1;
1747
1826
  overflow-block: auto;
1748
1827
  padding: var(--bds-space_l);
@@ -1750,79 +1829,118 @@
1750
1829
  flex-direction: column;
1751
1830
  }
1752
1831
  @media (prefers-reduced-motion: reduce) {
1753
- .bds2150Drawer-drawer,
1754
- .bds2150Drawer-drawer::backdrop {
1832
+ .bds2160Drawer-drawer,
1833
+ .bds2160Drawer-drawer::backdrop {
1755
1834
  transition: none;
1756
1835
  }
1757
1836
  }
1758
1837
  }
1759
1838
 
1760
1839
  /* src/components/interaction/DropdownMenu/DropdownMenu.module.css */
1761
- @layer boostdev.bds2150DropdownMenu-component {
1762
- .bds2150DropdownMenu-wrapper {
1840
+ @layer boostdev.bds2160DropdownMenu-component {
1841
+ .bds2160DropdownMenu-wrapper {
1763
1842
  position: relative;
1764
1843
  display: inline-flex;
1765
1844
  }
1766
- .bds2150DropdownMenu-menu {
1845
+ .bds2160DropdownMenu-menu {
1767
1846
  position: absolute;
1768
1847
  inset-block-start: calc(100% + var(--bds-space_xxs));
1769
1848
  z-index: var(--bds-z-index_dropdown);
1770
1849
  min-inline-size: 10rem;
1771
- padding: var(--bds-space_xxs) 0;
1850
+ padding: var(--dropdown_padding, var(--bds-space_xxs));
1772
1851
  border: var(--dropdown_border, none);
1773
- --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))));
1774
1853
  --bdc-outline_radius: var(--bds-border_radius--s);
1775
1854
  border-radius: var(--dropdown_radius, var(--bdc-outline_radius));
1776
1855
  background-color: var(--dropdown_color, var(--bds-color_bg--strong, var(--bds-color_bg)));
1777
1856
  color: var(--dropdown_on-color, var(--bds-color_on-bg));
1778
- 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));
1779
1858
  list-style: none;
1780
1859
  margin: 0;
1781
1860
  }
1782
- .bds2150DropdownMenu-menu li {
1861
+ .bds2160DropdownMenu-menu li {
1783
1862
  list-style: none;
1784
1863
  }
1785
- .bds2150DropdownMenu---placement_bottom-start {
1864
+ .bds2160DropdownMenu---placement_bottom-start {
1786
1865
  inset-inline-start: 0;
1787
1866
  }
1788
- .bds2150DropdownMenu---placement_bottom-end {
1867
+ .bds2160DropdownMenu---placement_bottom-end {
1789
1868
  inset-inline-end: 0;
1790
1869
  }
1791
- .bds2150DropdownMenu-separator {
1870
+ .bds2160DropdownMenu-separatorRow {
1871
+ padding-block: var(--bds-space_xxs);
1872
+ }
1873
+ .bds2160DropdownMenu-separator {
1792
1874
  border: none;
1793
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))));
1794
- margin: var(--bds-space_xxs) 0;
1876
+ margin: 0;
1877
+ }
1878
+ .bds2160DropdownMenu-group {
1879
+ margin: 0;
1880
+ padding: 0;
1881
+ list-style: none;
1795
1882
  }
1796
- .bds2150DropdownMenu-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 {
1797
1892
  all: unset;
1798
1893
  display: flex;
1799
1894
  align-items: center;
1800
1895
  gap: var(--bds-space_xs);
1801
1896
  inline-size: 100%;
1802
- 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));
1803
1899
  font-family: var(--bds-font_family--body);
1804
- font-size: var(--bds-font_size--body);
1900
+ font-size: var(--dropdown_item-font-size, var(--bds-font_size--body));
1805
1901
  color: currentcolor;
1806
1902
  cursor: pointer;
1807
1903
  box-sizing: border-box;
1808
1904
  transition: var(--bds-animation_transition);
1809
1905
  }
1810
- .bds2150DropdownMenu-item:disabled {
1811
- opacity: 0.4;
1906
+ .bds2160DropdownMenu-item:disabled {
1907
+ opacity: var(--dropdown_item-opacity--disabled, 0.4);
1812
1908
  cursor: not-allowed;
1813
1909
  }
1814
- .bds2150DropdownMenu-item:focus-visible {
1910
+ .bds2160DropdownMenu-item:focus-visible {
1815
1911
  outline: var(--bds-outline_default);
1816
1912
  outline-offset: calc(var(--bds-outline_offset) * -1);
1817
- 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));
1818
1924
  }
1819
1925
  @media (hover: hover) and (pointer: fine) {
1820
- .bds2150DropdownMenu-item:not(:disabled):hover {
1821
- background-color: var(--dropdown_item-bg--hover, var(--bds-color_bg--subtle));
1822
- 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)));
1823
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));
1824
1942
  }
1825
- .bds2150DropdownMenu-icon {
1943
+ .bds2160DropdownMenu-icon {
1826
1944
  display: flex;
1827
1945
  align-items: center;
1828
1946
  flex-shrink: 0;
@@ -1830,11 +1948,11 @@
1830
1948
  }
1831
1949
 
1832
1950
  /* src/components/interaction/Popover/Popover.module.css */
1833
- @layer boostdev.bds2150Popover-component {
1834
- .bds2150Popover-wrapper {
1951
+ @layer boostdev.bds2160Popover-component {
1952
+ .bds2160Popover-wrapper {
1835
1953
  display: inline-flex;
1836
1954
  }
1837
- .bds2150Popover-panel {
1955
+ .bds2160Popover-panel {
1838
1956
  position: fixed;
1839
1957
  inset: unset;
1840
1958
  margin: 0;
@@ -1853,7 +1971,7 @@
1853
1971
  color: var(--popover_on-color, var(--bds-color_on-bg));
1854
1972
  font-size: var(--bds-font_size--body);
1855
1973
  }
1856
- .bds2150Popover-panel[data-placement=bottom] {
1974
+ .bds2160Popover-panel[data-placement=bottom] {
1857
1975
  top: anchor(bottom);
1858
1976
  left: anchor(left);
1859
1977
  margin-block-start: var(--bds-space_xs);
@@ -1862,7 +1980,7 @@
1862
1980
  --popover-right,
1863
1981
  --popover-left;
1864
1982
  }
1865
- .bds2150Popover-panel[data-placement=top] {
1983
+ .bds2160Popover-panel[data-placement=top] {
1866
1984
  bottom: anchor(top);
1867
1985
  left: anchor(left);
1868
1986
  margin-block-end: var(--bds-space_xs);
@@ -1871,7 +1989,7 @@
1871
1989
  --popover-right,
1872
1990
  --popover-left;
1873
1991
  }
1874
- .bds2150Popover-panel[data-placement=right] {
1992
+ .bds2160Popover-panel[data-placement=right] {
1875
1993
  top: anchor(top);
1876
1994
  left: anchor(right);
1877
1995
  margin-inline-start: var(--bds-space_xs);
@@ -1880,7 +1998,7 @@
1880
1998
  --popover-bottom,
1881
1999
  --popover-top;
1882
2000
  }
1883
- .bds2150Popover-panel[data-placement=left] {
2001
+ .bds2160Popover-panel[data-placement=left] {
1884
2002
  top: anchor(top);
1885
2003
  right: anchor(left);
1886
2004
  margin-inline-end: var(--bds-space_xs);
@@ -1938,10 +2056,10 @@
1938
2056
  margin-block-end: var(--bds-space_xs);
1939
2057
  }
1940
2058
  @media (width <= 420px) {
1941
- .bds2150Popover-panel[data-placement=bottom],
1942
- .bds2150Popover-panel[data-placement=top],
1943
- .bds2150Popover-panel[data-placement=left],
1944
- .bds2150Popover-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] {
1945
2063
  inset-inline: var(--bds-space_xs);
1946
2064
  inline-size: 100%;
1947
2065
  max-inline-size: calc(100svw - 2 * var(--bds-space_xs));
@@ -1949,13 +2067,13 @@
1949
2067
  }
1950
2068
  }
1951
2069
  @media (aspect-ratio >= 2/1) {
1952
- .bds2150Popover-panel[data-placement=bottom] {
2070
+ .bds2160Popover-panel[data-placement=bottom] {
1953
2071
  position-try-fallbacks:
1954
2072
  --popover-top,
1955
2073
  --popover-right,
1956
2074
  --popover-left;
1957
2075
  }
1958
- .bds2150Popover-panel[data-placement=top] {
2076
+ .bds2160Popover-panel[data-placement=top] {
1959
2077
  position-try-fallbacks:
1960
2078
  --popover-bottom,
1961
2079
  --popover-right,
@@ -1965,24 +2083,24 @@
1965
2083
  }
1966
2084
 
1967
2085
  /* src/components/interaction/Rating/Rating.module.css */
1968
- @layer boostdev.bds2150Rating-component {
1969
- .bds2150Rating-rating {
2086
+ @layer boostdev.bds2160Rating-component {
2087
+ .bds2160Rating-rating {
1970
2088
  display: inline-flex;
1971
2089
  gap: var(--bds-space_xxxs);
1972
2090
  color: var(--rating_color, var(--bds-color_bg));
1973
2091
  }
1974
- .bds2150Rating-star {
2092
+ .bds2160Rating-star {
1975
2093
  inline-size: 1.5em;
1976
2094
  block-size: 1.5em;
1977
2095
  }
1978
- .bds2150Rating---filled {
2096
+ .bds2160Rating---filled {
1979
2097
  color: var(--rating_color--filled, var(--bds-color_warning));
1980
2098
  }
1981
2099
  }
1982
2100
 
1983
2101
  /* src/components/interaction/Toast/Toast.module.css */
1984
- @layer boostdev.bds2150Toast-component {
1985
- .bds2150Toast-toastContainer {
2102
+ @layer boostdev.bds2160Toast-component {
2103
+ .bds2160Toast-toastContainer {
1986
2104
  position: fixed;
1987
2105
  inset: unset;
1988
2106
  inset-block-end: var(--bds-space_xl);
@@ -1994,7 +2112,7 @@
1994
2112
  padding: 0;
1995
2113
  background: transparent;
1996
2114
  }
1997
- .bds2150Toast-toast {
2115
+ .bds2160Toast-toast {
1998
2116
  padding: var(--bds-space_m) var(--bds-space_l);
1999
2117
  background-color: var(--toast_color, var(--toast_color--variant, var(--bds-color_bg--strong, var(--bds-color_bg))));
2000
2118
  color: var(--toast_on-color, var(--toast_on-color--variant, var(--bds-color_on-bg)));
@@ -2006,29 +2124,29 @@
2006
2124
  min-inline-size: min(300px, calc(100svw - 2 * var(--bds-space_xl)));
2007
2125
  animation: slideIn var(--bds-animation_duration--fast) var(--bds-animation_easing);
2008
2126
  }
2009
- .bds2150Toast-toast:dir(rtl) {
2127
+ .bds2160Toast-toast:dir(rtl) {
2010
2128
  --toast_slide-offset: -100%;
2011
2129
  }
2012
- .bds2150Toast-toast.bds2150Toast---variant_success {
2130
+ .bds2160Toast-toast.bds2160Toast---variant_success {
2013
2131
  --toast_color--variant: var(--toast_color--success, var(--bds-color_success));
2014
2132
  --toast_on-color--variant: var(--toast_on-color--success, var(--bds-color_on-success));
2015
2133
  }
2016
- .bds2150Toast-toast.bds2150Toast---variant_warning {
2134
+ .bds2160Toast-toast.bds2160Toast---variant_warning {
2017
2135
  --toast_color--variant: var(--toast_color--warning, var(--bds-color_warning));
2018
2136
  --toast_on-color--variant: var(--toast_on-color--warning, var(--bds-color_on-warning));
2019
2137
  }
2020
- .bds2150Toast-toast.bds2150Toast---variant_info {
2138
+ .bds2160Toast-toast.bds2160Toast---variant_info {
2021
2139
  --toast_color--variant: var(--toast_color--info, var(--bds-color_bg--subtle));
2022
2140
  --toast_on-color--variant: var(--toast_on-color--info, var(--bds-color_on-bg--subtle));
2023
2141
  }
2024
- .bds2150Toast-toast.bds2150Toast---variant_error {
2142
+ .bds2160Toast-toast.bds2160Toast---variant_error {
2025
2143
  --toast_color--variant: var(--toast_color--error, var(--bds-color_error));
2026
2144
  --toast_on-color--variant: var(--toast_on-color--error, var(--bds-color_on-error));
2027
2145
  }
2028
- .bds2150Toast-message {
2146
+ .bds2160Toast-message {
2029
2147
  flex: 1;
2030
2148
  }
2031
- .bds2150Toast-closeButton {
2149
+ .bds2160Toast-closeButton {
2032
2150
  position: relative;
2033
2151
  display: flex;
2034
2152
  align-items: center;
@@ -2042,16 +2160,16 @@
2042
2160
  cursor: pointer;
2043
2161
  color: currentcolor;
2044
2162
  }
2045
- .bds2150Toast-closeButton::after {
2163
+ .bds2160Toast-closeButton::after {
2046
2164
  content: "";
2047
2165
  position: absolute;
2048
2166
  inset: -0.75rem;
2049
2167
  }
2050
- .bds2150Toast-closeButton:focus-visible {
2168
+ .bds2160Toast-closeButton:focus-visible {
2051
2169
  outline: var(--bds-outline_default);
2052
2170
  outline-offset: var(--bds-outline_offset);
2053
2171
  }
2054
- .bds2150Toast-closeButton svg {
2172
+ .bds2160Toast-closeButton svg {
2055
2173
  inline-size: 1rem;
2056
2174
  block-size: 1rem;
2057
2175
  }
@@ -2067,25 +2185,25 @@
2067
2185
  }
2068
2186
  }
2069
2187
  @media (prefers-reduced-motion: reduce) {
2070
- .bds2150Toast-toast {
2188
+ .bds2160Toast-toast {
2071
2189
  animation: none;
2072
2190
  }
2073
2191
  }
2074
2192
 
2075
2193
  /* src/components/interaction/form/Checkbox/Checkbox.module.css */
2076
- @layer boostdev.bds2150Checkbox-component {
2077
- .bds2150Checkbox-checkboxGroup {
2194
+ @layer boostdev.bds2160Checkbox-component {
2195
+ .bds2160Checkbox-checkboxGroup {
2078
2196
  --checkbox_size: calc(var(--bds-space_s) * 2);
2079
2197
  --inputSize: var(--checkbox_size);
2080
2198
  display: flex;
2081
2199
  flex-direction: column;
2082
2200
  }
2083
- .bds2150Checkbox-inputWrapper {
2201
+ .bds2160Checkbox-inputWrapper {
2084
2202
  display: flex;
2085
2203
  align-items: stretch;
2086
2204
  gap: var(--checkbox_gap, var(--bds-space_m));
2087
2205
  }
2088
- .bds2150Checkbox-checkbox {
2206
+ .bds2160Checkbox-checkbox {
2089
2207
  margin-block-start: var(--checkbox_offset, 0.25em);
2090
2208
  inline-size: var(--checkbox_size);
2091
2209
  block-size: var(--checkbox_size);
@@ -2101,11 +2219,11 @@
2101
2219
  position: relative;
2102
2220
  transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing), background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
2103
2221
  }
2104
- .bds2150Checkbox-checkbox:checked {
2222
+ .bds2160Checkbox-checkbox:checked {
2105
2223
  background-color: var(--checkbox_color-active, var(--bdc-color_active));
2106
2224
  --bdc_color: var(--checkbox_color-active, var(--bdc-color_active));
2107
2225
  }
2108
- .bds2150Checkbox-checkbox:checked::after {
2226
+ .bds2160Checkbox-checkbox:checked::after {
2109
2227
  content: "";
2110
2228
  position: absolute;
2111
2229
  inset-inline-start: 0.6em;
@@ -2116,40 +2234,51 @@
2116
2234
  border-width: 0 2px 2px 0;
2117
2235
  transform: rotate(45deg);
2118
2236
  }
2119
- .bds2150Checkbox-checkbox:focus {
2237
+ .bds2160Checkbox-checkbox:focus {
2120
2238
  --bdc_color: var(--bdc_color--focus);
2121
2239
  }
2122
- .bds2150Checkbox-checkbox:focus-visible {
2240
+ .bds2160Checkbox-checkbox:focus-visible {
2123
2241
  outline: var(--bds-outline_default);
2124
2242
  outline-offset: var(--bds-outline_offset);
2125
2243
  }
2126
- .bds2150Checkbox-checkbox:disabled {
2244
+ .bds2160Checkbox-checkbox:disabled {
2127
2245
  opacity: 0.5;
2128
2246
  cursor: not-allowed;
2129
2247
  }
2130
- .bds2150Checkbox-checkboxError {
2248
+ .bds2160Checkbox-checkboxError {
2131
2249
  --bdc_color: var(--bdc_color--error);
2250
+ --bdc-outline_width: var(--bdc-outline_width--error, 2px);
2132
2251
  }
2133
2252
  }
2134
2253
 
2135
2254
  /* src/components/interaction/form/atoms/Message.module.css */
2136
- @layer boostdev.bds2150Message-component {
2137
- .bds2150Message-error,
2138
- .bds2150Message-hint {
2139
- 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));
2140
2259
  margin-inline-start: var(--labelPosition, 0);
2141
2260
  }
2142
- .bds2150Message-error {
2143
- 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));
2144
2267
  }
2145
- .bds2150Message-hint {
2146
- 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;
2147
2276
  }
2148
2277
  }
2149
2278
 
2150
2279
  /* src/components/interaction/form/atoms/Label.module.css */
2151
- @layer boostdev.bds2150Label-component {
2152
- .bds2150Label-label {
2280
+ @layer boostdev.bds2160Label-component {
2281
+ .bds2160Label-label {
2153
2282
  display: flex;
2154
2283
  align-items: center;
2155
2284
  font-family: var(--bds-font_family--body);
@@ -2159,8 +2288,8 @@
2159
2288
  }
2160
2289
 
2161
2290
  /* src/components/interaction/form/atoms/InputContainer.module.css */
2162
- @layer boostdev.bds2150InputContainer-component {
2163
- .bds2150InputContainer-container {
2291
+ @layer boostdev.bds2160InputContainer-component {
2292
+ .bds2160InputContainer-container {
2164
2293
  --labelPosition: calc(var(--inputSize) + var(--bds-space_m));
2165
2294
  display: flex;
2166
2295
  flex-direction: column;
@@ -2169,8 +2298,8 @@
2169
2298
  }
2170
2299
 
2171
2300
  /* src/components/interaction/form/CheckboxGroup/CheckboxGroup.module.css */
2172
- @layer boostdev.bds2150CheckboxGroup-component {
2173
- .bds2150CheckboxGroup-group {
2301
+ @layer boostdev.bds2160CheckboxGroup-component {
2302
+ .bds2160CheckboxGroup-group {
2174
2303
  border: none;
2175
2304
  padding: 0;
2176
2305
  margin: 0;
@@ -2178,7 +2307,7 @@
2178
2307
  flex-direction: column;
2179
2308
  gap: var(--checkboxGroup_gap, var(--bds-space_xs));
2180
2309
  }
2181
- .bds2150CheckboxGroup-legend {
2310
+ .bds2160CheckboxGroup-legend {
2182
2311
  font-family: var(--checkboxGroup_legend-font-family, var(--bds-font_family--body));
2183
2312
  font-size: var(--checkboxGroup_legend-font-size, var(--bds-font_size--body--s));
2184
2313
  font-weight: var(--checkboxGroup_legend-font-weight, var(--bds-font_weight--medium));
@@ -2186,10 +2315,10 @@
2186
2315
  padding: 0;
2187
2316
  margin-block-end: var(--checkboxGroup_legend-gap, var(--bds-space_xs));
2188
2317
  }
2189
- .bds2150CheckboxGroup-required {
2318
+ .bds2160CheckboxGroup-required {
2190
2319
  color: var(--checkboxGroup_required-color, var(--bds-color_error));
2191
2320
  }
2192
- .bds2150CheckboxGroup-requiredLabel {
2321
+ .bds2160CheckboxGroup-requiredLabel {
2193
2322
  position: absolute;
2194
2323
  inline-size: 1px;
2195
2324
  block-size: 1px;
@@ -2200,25 +2329,29 @@
2200
2329
  white-space: nowrap;
2201
2330
  border-width: 0;
2202
2331
  }
2203
- .bds2150CheckboxGroup-items {
2332
+ .bds2160CheckboxGroup-items {
2204
2333
  display: flex;
2205
2334
  flex-direction: column;
2206
2335
  gap: var(--checkboxGroup_items-gap, var(--bds-space_xs));
2207
2336
  }
2337
+ .bds2160CheckboxGroup-groupError input {
2338
+ --bdc_color: var(--bdc_color--error);
2339
+ --bdc-outline_width: var(--bdc-outline_width--error, 2px);
2340
+ }
2208
2341
  }
2209
2342
 
2210
2343
  /* src/components/interaction/form/Combobox/Combobox.module.css */
2211
- @layer boostdev.bds2150Combobox-component {
2212
- .bds2150Combobox-formGroup {
2344
+ @layer boostdev.bds2160Combobox-component {
2345
+ .bds2160Combobox-formGroup {
2213
2346
  display: flex;
2214
2347
  flex-direction: column;
2215
2348
  }
2216
- .bds2150Combobox-inputWrapper {
2349
+ .bds2160Combobox-inputWrapper {
2217
2350
  position: relative;
2218
2351
  display: flex;
2219
2352
  align-items: center;
2220
2353
  }
2221
- .bds2150Combobox-input {
2354
+ .bds2160Combobox-input {
2222
2355
  appearance: none;
2223
2356
  inline-size: 100%;
2224
2357
  font-family: var(--bds-font_family--body);
@@ -2234,21 +2367,22 @@
2234
2367
  color: var(--combobox_color, var(--bds-color_on-bg));
2235
2368
  transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing), background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
2236
2369
  }
2237
- .bds2150Combobox-input:focus {
2370
+ .bds2160Combobox-input:focus {
2238
2371
  --bdc_color: var(--bdc_color--focus);
2239
2372
  }
2240
- .bds2150Combobox-input:focus-visible {
2373
+ .bds2160Combobox-input:focus-visible {
2241
2374
  outline: var(--bds-outline_default);
2242
2375
  outline-offset: var(--bds-outline_offset);
2243
2376
  }
2244
- .bds2150Combobox-input:disabled {
2377
+ .bds2160Combobox-input:disabled {
2245
2378
  opacity: 0.5;
2246
2379
  cursor: not-allowed;
2247
2380
  }
2248
- .bds2150Combobox-inputError {
2381
+ .bds2160Combobox-inputError {
2249
2382
  --bdc_color: var(--bdc_color--error);
2383
+ --bdc-outline_width: var(--bdc-outline_width--error, 2px);
2250
2384
  }
2251
- .bds2150Combobox-chevron {
2385
+ .bds2160Combobox-chevron {
2252
2386
  position: absolute;
2253
2387
  inset-inline-end: var(--bds-space_s);
2254
2388
  display: flex;
@@ -2256,11 +2390,11 @@
2256
2390
  pointer-events: none;
2257
2391
  color: var(--combobox_color, var(--bds-color_on-bg));
2258
2392
  }
2259
- .bds2150Combobox-chevron svg {
2393
+ .bds2160Combobox-chevron svg {
2260
2394
  inline-size: 1rem;
2261
2395
  block-size: 1rem;
2262
2396
  }
2263
- .bds2150Combobox-listbox {
2397
+ .bds2160Combobox-listbox {
2264
2398
  position: absolute;
2265
2399
  inset-block-start: calc(100% + var(--bds-space_xxs));
2266
2400
  inset-inline: 0;
@@ -2278,7 +2412,7 @@
2278
2412
  color: var(--combobox_on-color, var(--bds-color_on-bg));
2279
2413
  box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--combobox_listbox-shadow, var(--bds-shadow_m));
2280
2414
  }
2281
- .bds2150Combobox-option {
2415
+ .bds2160Combobox-option {
2282
2416
  display: flex;
2283
2417
  align-items: center;
2284
2418
  padding: var(--combobox_option-padding-block, var(--bds-space_xs)) var(--combobox_option-padding-inline, var(--bds-space_m));
@@ -2287,29 +2421,29 @@
2287
2421
  cursor: pointer;
2288
2422
  transition: var(--bds-animation_transition);
2289
2423
  }
2290
- .bds2150Combobox-option.bds2150Combobox---highlighted {
2424
+ .bds2160Combobox-option.bds2160Combobox---highlighted {
2291
2425
  background-color: var(--combobox_option-bg--highlighted, var(--bds-color_bg--subtle));
2292
2426
  color: var(--combobox_option-color--highlighted, var(--bds-color_interactive_on-bg));
2293
2427
  }
2294
- .bds2150Combobox-option.bds2150Combobox---selected {
2428
+ .bds2160Combobox-option.bds2160Combobox---selected {
2295
2429
  font-weight: var(--bds-font_weight--semibold);
2296
2430
  }
2297
- .bds2150Combobox-option.bds2150Combobox---disabled {
2431
+ .bds2160Combobox-option.bds2160Combobox---disabled {
2298
2432
  opacity: 0.4;
2299
2433
  cursor: not-allowed;
2300
2434
  }
2301
2435
  }
2302
2436
 
2303
2437
  /* src/components/interaction/form/FieldGroup/FieldGroup.module.css */
2304
- @layer boostdev.bds2150FieldGroup-component {
2305
- .bds2150FieldGroup-fieldGroup {
2438
+ @layer boostdev.bds2160FieldGroup-component {
2439
+ .bds2160FieldGroup-fieldGroup {
2306
2440
  border: 0;
2307
2441
  margin: 0;
2308
2442
  padding: 0;
2309
2443
  min-inline-size: 0;
2310
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)) );
2311
2445
  }
2312
- .bds2150FieldGroup-legend {
2446
+ .bds2160FieldGroup-legend {
2313
2447
  inline-size: 100%;
2314
2448
  padding-inline: 0;
2315
2449
  padding-block: var(--fieldGroup_legend-padding-block, var(--bds-space_xs));
@@ -2321,28 +2455,28 @@
2321
2455
  font-weight: var(--fieldGroup_legend-font-weight, var(--bds-font_weight--semibold));
2322
2456
  line-height: var(--fieldGroup_legend-line-height, var(--bds-font_line-height--heading));
2323
2457
  }
2324
- .bds2150FieldGroup-fieldGroup:disabled .bds2150FieldGroup-legend {
2458
+ .bds2160FieldGroup-fieldGroup:disabled .bds2160FieldGroup-legend {
2325
2459
  opacity: 0.5;
2326
2460
  }
2327
- .bds2150FieldGroup-fields {
2461
+ .bds2160FieldGroup-fields {
2328
2462
  display: flex;
2329
2463
  flex-direction: column;
2330
2464
  gap: var(--fieldGroup_gap, var(--bds-space_m));
2331
2465
  }
2332
- .bds2150FieldGroup-fieldGroup.bds2150FieldGroup---variant_horizontal .bds2150FieldGroup-fields {
2466
+ .bds2160FieldGroup-fieldGroup.bds2160FieldGroup---variant_horizontal .bds2160FieldGroup-fields {
2333
2467
  flex-flow: row wrap;
2334
2468
  }
2335
- .bds2150FieldGroup-fieldGroup.bds2150FieldGroup---variant_horizontal .bds2150FieldGroup-fields > * {
2469
+ .bds2160FieldGroup-fieldGroup.bds2160FieldGroup---variant_horizontal .bds2160FieldGroup-fields > * {
2336
2470
  flex: 1 1 var(--fieldGroup_min-field-width, 12rem);
2337
2471
  min-inline-size: 0;
2338
2472
  }
2339
- .bds2150FieldGroup-probeContainer {
2473
+ .bds2160FieldGroup-probeContainer {
2340
2474
  position: relative;
2341
2475
  inline-size: 0;
2342
2476
  block-size: 0;
2343
2477
  overflow: hidden;
2344
2478
  }
2345
- .bds2150FieldGroup-probe {
2479
+ .bds2160FieldGroup-probe {
2346
2480
  position: absolute;
2347
2481
  inset-block-start: 0;
2348
2482
  inset-inline-start: 0;
@@ -2350,28 +2484,28 @@
2350
2484
  inline-size: var(--fieldGroup_collapse-threshold);
2351
2485
  visibility: hidden;
2352
2486
  }
2353
- .bds2150FieldGroup-fieldGroup.bds2150FieldGroup---variant_horizontal[data-collapsed=true] .bds2150FieldGroup-fields {
2487
+ .bds2160FieldGroup-fieldGroup.bds2160FieldGroup---variant_horizontal[data-collapsed=true] .bds2160FieldGroup-fields {
2354
2488
  flex-direction: column;
2355
2489
  }
2356
- .bds2150FieldGroup-fieldGroup.bds2150FieldGroup---variant_horizontal[data-collapsed=true] .bds2150FieldGroup-fields > * {
2490
+ .bds2160FieldGroup-fieldGroup.bds2160FieldGroup---variant_horizontal[data-collapsed=true] .bds2160FieldGroup-fields > * {
2357
2491
  flex: 1 1 auto;
2358
2492
  }
2359
2493
  }
2360
2494
 
2361
2495
  /* src/components/interaction/form/FileInput/FileInput.module.css */
2362
- @layer boostdev.bds2150FileInput-component {
2363
- .bds2150FileInput-formGroup {
2496
+ @layer boostdev.bds2160FileInput-component {
2497
+ .bds2160FileInput-formGroup {
2364
2498
  display: flex;
2365
2499
  flex-direction: column;
2366
2500
  }
2367
- .bds2150FileInput-fieldLabel {
2501
+ .bds2160FileInput-fieldLabel {
2368
2502
  display: flex;
2369
2503
  align-items: center;
2370
2504
  font-family: var(--bds-font_family--body);
2371
2505
  color: var(--bds-color_on-bg);
2372
2506
  margin-block-end: var(--fileInput_label-margin, var(--bds-space_xs));
2373
2507
  }
2374
- .bds2150FileInput-dropZone {
2508
+ .bds2160FileInput-dropZone {
2375
2509
  display: flex;
2376
2510
  flex-direction: column;
2377
2511
  align-items: center;
@@ -2385,40 +2519,40 @@
2385
2519
  text-align: center;
2386
2520
  transition: var(--bds-animation_transition);
2387
2521
  }
2388
- .bds2150FileInput-dropZone:focus-within {
2522
+ .bds2160FileInput-dropZone:focus-within {
2389
2523
  outline: var(--bds-outline_default);
2390
2524
  outline-offset: var(--bds-outline_offset);
2391
2525
  border-color: var(--fileInput_border-color, currentcolor);
2392
2526
  }
2393
- .bds2150FileInput-isDragging {
2527
+ .bds2160FileInput-isDragging {
2394
2528
  border-color: currentcolor;
2395
2529
  background-color: var(--fileInput_bg--dragging, rgb(from currentcolor r g b / 8%));
2396
2530
  }
2397
- .bds2150FileInput-hasError {
2531
+ .bds2160FileInput-hasError {
2398
2532
  border-color: var(--bds-color_error);
2399
2533
  }
2400
- .bds2150FileInput-isDisabled {
2534
+ .bds2160FileInput-isDisabled {
2401
2535
  opacity: 0.5;
2402
2536
  cursor: not-allowed;
2403
2537
  }
2404
- .bds2150FileInput-icon {
2538
+ .bds2160FileInput-icon {
2405
2539
  inline-size: 2rem;
2406
2540
  block-size: 2rem;
2407
2541
  flex-shrink: 0;
2408
2542
  }
2409
- .bds2150FileInput-prompt {
2543
+ .bds2160FileInput-prompt {
2410
2544
  font-size: var(--fileInput_font-size, var(--bds-font_size--body));
2411
2545
  color: var(--bds-color_on-bg);
2412
2546
  }
2413
- .bds2150FileInput-prompt strong {
2547
+ .bds2160FileInput-prompt strong {
2414
2548
  color: var(--bds-color_interactive_on-bg);
2415
2549
  font-weight: var(--bds-font_weight--semibold);
2416
2550
  }
2417
- .bds2150FileInput-acceptHint {
2551
+ .bds2160FileInput-acceptHint {
2418
2552
  font-size: var(--fileInput_font-size--hint, var(--bds-font_size--body--s));
2419
2553
  color: var(--bds-color_on-bg);
2420
2554
  }
2421
- .bds2150FileInput-hiddenInput {
2555
+ .bds2160FileInput-hiddenInput {
2422
2556
  position: absolute;
2423
2557
  inline-size: 1px;
2424
2558
  block-size: 1px;
@@ -2428,7 +2562,7 @@
2428
2562
  border: 0;
2429
2563
  }
2430
2564
  @media (hover: hover) and (pointer: fine) {
2431
- .bds2150FileInput-dropZone:not(.bds2150FileInput-isDisabled):hover {
2565
+ .bds2160FileInput-dropZone:not(.bds2160FileInput-isDisabled):hover {
2432
2566
  border-color: var(--fileInput_border-color--hover, var(--bds-color_interactive));
2433
2567
  background-color: var(--fileInput_bg--hover, rgb(from var(--bds-color_interactive) r g b / 4%));
2434
2568
  }
@@ -2436,13 +2570,13 @@
2436
2570
  }
2437
2571
 
2438
2572
  /* src/components/interaction/form/FormInput/FormInput.module.css */
2439
- @layer boostdev.bds2150FormInput-component {
2440
- .bds2150FormInput-formGroup {
2573
+ @layer boostdev.bds2160FormInput-component {
2574
+ .bds2160FormInput-formGroup {
2441
2575
  --labelPosition: 0;
2442
2576
  display: flex;
2443
2577
  flex-direction: column;
2444
2578
  }
2445
- .bds2150FormInput-input {
2579
+ .bds2160FormInput-input {
2446
2580
  font-family: var(--formInput_font-family, var(--bds-font_family--body));
2447
2581
  font-size: var(--formInput_font-size, var(--bds-font_size--body));
2448
2582
  padding: var(--formInput_padding, var(--bds-space_s));
@@ -2455,29 +2589,30 @@
2455
2589
  background-color: var(--formInput_color_bg, var(--input_color_bg, var(--bds-color_bg)));
2456
2590
  transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing), background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
2457
2591
  }
2458
- .bds2150FormInput-input:focus {
2592
+ .bds2160FormInput-input:focus {
2459
2593
  --bdc_color: var(--bdc_color--focus);
2460
2594
  }
2461
- .bds2150FormInput-input:focus-visible {
2595
+ .bds2160FormInput-input:focus-visible {
2462
2596
  outline: var(--bds-outline_default);
2463
2597
  outline-offset: var(--bds-outline_offset);
2464
2598
  }
2465
- .bds2150FormInput-input:disabled {
2599
+ .bds2160FormInput-input:disabled {
2466
2600
  cursor: not-allowed;
2467
2601
  opacity: 0.5;
2468
2602
  }
2469
- .bds2150FormInput-inputError {
2603
+ .bds2160FormInput-inputError {
2470
2604
  --bdc_color: var(--bdc_color--error);
2605
+ --bdc-outline_width: var(--bdc-outline_width--error, 2px);
2471
2606
  }
2472
2607
  }
2473
2608
 
2474
2609
  /* src/components/interaction/form/NumberInput/NumberInput.module.css */
2475
- @layer boostdev.bds2150NumberInput-component {
2476
- .bds2150NumberInput-formGroup {
2610
+ @layer boostdev.bds2160NumberInput-component {
2611
+ .bds2160NumberInput-formGroup {
2477
2612
  display: flex;
2478
2613
  flex-direction: column;
2479
2614
  }
2480
- .bds2150NumberInput-inputRow {
2615
+ .bds2160NumberInput-inputRow {
2481
2616
  display: flex;
2482
2617
  align-items: stretch;
2483
2618
  border: var(--numberInput_border, none);
@@ -2489,14 +2624,14 @@
2489
2624
  overflow: hidden;
2490
2625
  transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing);
2491
2626
  }
2492
- .bds2150NumberInput-inputRow:focus-within {
2627
+ .bds2160NumberInput-inputRow:focus-within {
2493
2628
  --bdc_color: var(--bdc_color--focus);
2494
2629
  }
2495
- .bds2150NumberInput-inputRow:focus-within:has(:focus-visible) {
2630
+ .bds2160NumberInput-inputRow:focus-within:has(:focus-visible) {
2496
2631
  outline: var(--bds-outline_default);
2497
2632
  outline-offset: var(--bds-outline_offset);
2498
2633
  }
2499
- .bds2150NumberInput-input {
2634
+ .bds2160NumberInput-input {
2500
2635
  flex: 1;
2501
2636
  border: none;
2502
2637
  outline: none;
@@ -2509,14 +2644,15 @@
2509
2644
  min-inline-size: 0;
2510
2645
  appearance: textfield;
2511
2646
  }
2512
- .bds2150NumberInput-input::-webkit-inner-spin-button,
2513
- .bds2150NumberInput-input::-webkit-outer-spin-button {
2647
+ .bds2160NumberInput-input::-webkit-inner-spin-button,
2648
+ .bds2160NumberInput-input::-webkit-outer-spin-button {
2514
2649
  appearance: none;
2515
2650
  }
2516
- .bds2150NumberInput-inputError {
2651
+ .bds2160NumberInput-inputError {
2517
2652
  --bdc_color: var(--bdc_color--error);
2653
+ --bdc-outline_width: var(--bdc-outline_width--error, 2px);
2518
2654
  }
2519
- .bds2150NumberInput-stepper {
2655
+ .bds2160NumberInput-stepper {
2520
2656
  all: unset;
2521
2657
  display: flex;
2522
2658
  align-items: center;
@@ -2529,25 +2665,25 @@
2529
2665
  transition: var(--bds-animation_transition);
2530
2666
  flex-shrink: 0;
2531
2667
  }
2532
- .bds2150NumberInput-stepper svg {
2668
+ .bds2160NumberInput-stepper svg {
2533
2669
  inline-size: 1rem;
2534
2670
  block-size: 1rem;
2535
2671
  color: var(--numberInput_stepper-color, var(--bds-color_interactive));
2536
2672
  }
2537
- .bds2150NumberInput-stepper:first-child {
2673
+ .bds2160NumberInput-stepper:first-child {
2538
2674
  border-start-start-radius: var(--_radius);
2539
2675
  border-end-start-radius: var(--_radius);
2540
2676
  }
2541
- .bds2150NumberInput-stepper:last-child {
2677
+ .bds2160NumberInput-stepper:last-child {
2542
2678
  border-start-end-radius: var(--_radius);
2543
2679
  border-end-end-radius: var(--_radius);
2544
2680
  }
2545
- .bds2150NumberInput-stepper:disabled {
2681
+ .bds2160NumberInput-stepper:disabled {
2546
2682
  opacity: 0.4;
2547
2683
  cursor: not-allowed;
2548
2684
  }
2549
2685
  @media (hover: hover) and (pointer: fine) {
2550
- .bds2150NumberInput-stepper:not(:disabled):hover {
2686
+ .bds2160NumberInput-stepper:not(:disabled):hover {
2551
2687
  background-color: var(--numberInput_stepper-bg--hover, var(--bds-color_bg--subtle));
2552
2688
  opacity: var(--numberInput_stepper-opacity--hover, 0.7);
2553
2689
  }
@@ -2555,30 +2691,30 @@
2555
2691
  }
2556
2692
 
2557
2693
  /* src/components/interaction/form/Radio/Radio.module.css */
2558
- @layer boostdev.bds2150Radio-component {
2559
- .bds2150Radio-radioGroup {
2694
+ @layer boostdev.bds2160Radio-component {
2695
+ .bds2160Radio-radioGroup {
2560
2696
  --radio_size: calc(var(--bds-space_s) * 2);
2561
2697
  --inputSize: var(--radio_size);
2562
2698
  display: flex;
2563
2699
  flex-direction: column;
2564
2700
  }
2565
- .bds2150Radio-inputWrapper {
2701
+ .bds2160Radio-inputWrapper {
2566
2702
  display: flex;
2567
2703
  align-items: flex-start;
2568
2704
  gap: var(--bds-space_xs);
2569
2705
  }
2570
- .bds2150Radio-textWrapper {
2706
+ .bds2160Radio-textWrapper {
2571
2707
  display: flex;
2572
2708
  flex-direction: column;
2573
2709
  gap: var(--bds-space_xxxs);
2574
2710
  padding-block-start: var(--bds-space_xxxs);
2575
2711
  }
2576
- .bds2150Radio-description {
2712
+ .bds2160Radio-description {
2577
2713
  font-size: var(--bds-font_size--body--s);
2578
2714
  color: var(--radio_description-color, var(--bds-color_on-bg--subtle));
2579
2715
  line-height: var(--bds-font_line-height--body);
2580
2716
  }
2581
- .bds2150Radio-radio {
2717
+ .bds2160Radio-radio {
2582
2718
  flex-shrink: 0;
2583
2719
  margin-block-start: var(--radio_offset, 0.2em);
2584
2720
  inline-size: var(--radio_size);
@@ -2595,7 +2731,7 @@
2595
2731
  position: relative;
2596
2732
  transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing), background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
2597
2733
  }
2598
- .bds2150Radio-radio:checked {
2734
+ .bds2160Radio-radio:checked {
2599
2735
  background:
2600
2736
  radial-gradient(
2601
2737
  circle,
@@ -2603,29 +2739,30 @@
2603
2739
  var(--radio_color_bg, var(--bds-color_bg)) 42%);
2604
2740
  --bdc_color: var(--radio_color-active, var(--bdc-color_active));
2605
2741
  }
2606
- .bds2150Radio-radio:focus {
2742
+ .bds2160Radio-radio:focus {
2607
2743
  --bdc_color: var(--bdc_color--focus);
2608
2744
  }
2609
- .bds2150Radio-radio:focus-visible {
2745
+ .bds2160Radio-radio:focus-visible {
2610
2746
  outline: var(--bds-outline_default);
2611
2747
  outline-offset: var(--bds-outline_offset);
2612
2748
  }
2613
- .bds2150Radio-radio:disabled {
2749
+ .bds2160Radio-radio:disabled {
2614
2750
  cursor: not-allowed;
2615
2751
  opacity: 0.5;
2616
2752
  }
2617
- .bds2150Radio-radio:disabled ~ .bds2150Radio-textWrapper {
2753
+ .bds2160Radio-radio:disabled ~ .bds2160Radio-textWrapper {
2618
2754
  opacity: 0.5;
2619
2755
  cursor: not-allowed;
2620
2756
  }
2621
- .bds2150Radio-radioError {
2757
+ .bds2160Radio-radioError {
2622
2758
  --bdc_color: var(--bdc_color--error);
2759
+ --bdc-outline_width: var(--bdc-outline_width--error, 2px);
2623
2760
  }
2624
2761
  }
2625
2762
 
2626
2763
  /* src/components/interaction/form/RadioGroup/RadioGroup.module.css */
2627
- @layer boostdev.bds2150RadioGroup-component {
2628
- .bds2150RadioGroup-group {
2764
+ @layer boostdev.bds2160RadioGroup-component {
2765
+ .bds2160RadioGroup-group {
2629
2766
  border: none;
2630
2767
  padding: 0;
2631
2768
  margin: 0;
@@ -2633,7 +2770,7 @@
2633
2770
  flex-direction: column;
2634
2771
  gap: var(--radioGroup_gap, var(--bds-space_xs));
2635
2772
  }
2636
- .bds2150RadioGroup-legend {
2773
+ .bds2160RadioGroup-legend {
2637
2774
  font-family: var(--radioGroup_legend-font-family, var(--bds-font_family--body));
2638
2775
  font-size: var(--radioGroup_legend-font-size, var(--bds-font_size--body--s));
2639
2776
  font-weight: var(--radioGroup_legend-font-weight, var(--bds-font_weight--medium));
@@ -2641,10 +2778,10 @@
2641
2778
  padding: 0;
2642
2779
  margin-block-end: var(--radioGroup_legend-gap, var(--bds-space_xs));
2643
2780
  }
2644
- .bds2150RadioGroup-required {
2781
+ .bds2160RadioGroup-required {
2645
2782
  color: var(--radioGroup_required-color, var(--bds-color_error));
2646
2783
  }
2647
- .bds2150RadioGroup-requiredLabel {
2784
+ .bds2160RadioGroup-requiredLabel {
2648
2785
  position: absolute;
2649
2786
  inline-size: 1px;
2650
2787
  block-size: 1px;
@@ -2655,16 +2792,20 @@
2655
2792
  white-space: nowrap;
2656
2793
  border-width: 0;
2657
2794
  }
2658
- .bds2150RadioGroup-items {
2795
+ .bds2160RadioGroup-items {
2659
2796
  display: flex;
2660
2797
  flex-direction: column;
2661
2798
  gap: var(--radioGroup_items-gap, var(--bds-space_xs));
2662
2799
  }
2800
+ .bds2160RadioGroup-groupError input {
2801
+ --bdc_color: var(--bdc_color--error);
2802
+ --bdc-outline_width: var(--bdc-outline_width--error, 2px);
2803
+ }
2663
2804
  }
2664
2805
 
2665
2806
  /* src/components/interaction/form/SegmentedControl/SegmentedControl.module.css */
2666
- @layer boostdev.bds2150SegmentedControl-component {
2667
- .bds2150SegmentedControl-control {
2807
+ @layer boostdev.bds2160SegmentedControl-component {
2808
+ .bds2160SegmentedControl-control {
2668
2809
  position: relative;
2669
2810
  display: inline-grid;
2670
2811
  grid-auto-flow: column;
@@ -2675,11 +2816,11 @@
2675
2816
  gap: 0;
2676
2817
  --control_dir: 1;
2677
2818
  }
2678
- [dir=rtl] .bds2150SegmentedControl-control,
2679
- .bds2150SegmentedControl-control[dir=rtl] {
2819
+ [dir=rtl] .bds2160SegmentedControl-control,
2820
+ .bds2160SegmentedControl-control[dir=rtl] {
2680
2821
  --control_dir: -1;
2681
2822
  }
2682
- .bds2150SegmentedControl-thumb {
2823
+ .bds2160SegmentedControl-thumb {
2683
2824
  position: absolute;
2684
2825
  inset-block: var(--control_track-pad, var(--bds-space_xxs));
2685
2826
  inset-inline-start: var(--control_track-pad, var(--bds-space_xxs));
@@ -2691,7 +2832,7 @@
2691
2832
  transform: translateX(calc(var(--control_selected-index, 0) * var(--control_dir, 1) * 100%));
2692
2833
  transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
2693
2834
  }
2694
- .bds2150SegmentedControl-indicator {
2835
+ .bds2160SegmentedControl-indicator {
2695
2836
  position: absolute;
2696
2837
  inset-block: var(--control_track-pad, var(--bds-space_xxs));
2697
2838
  inset-inline-start: var(--control_track-pad, var(--bds-space_xxs));
@@ -2703,7 +2844,7 @@
2703
2844
  transform: translateX(calc(var(--control_selected-index, 0) * var(--control_dir, 1) * 100%));
2704
2845
  transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
2705
2846
  }
2706
- .bds2150SegmentedControl-item {
2847
+ .bds2160SegmentedControl-item {
2707
2848
  position: relative;
2708
2849
  z-index: 1;
2709
2850
  display: flex;
@@ -2724,73 +2865,73 @@
2724
2865
  border: none;
2725
2866
  outline: none;
2726
2867
  }
2727
- .bds2150SegmentedControl-item:focus-visible {
2868
+ .bds2160SegmentedControl-item:focus-visible {
2728
2869
  outline: var(--bds-outline_default);
2729
2870
  outline-offset: calc(var(--bds-outline_offset) * -1);
2730
2871
  border-radius: var(--control_thumb-radius, var(--bds-border_radius--full));
2731
2872
  }
2732
- .bds2150SegmentedControl-item.bds2150SegmentedControl---active {
2873
+ .bds2160SegmentedControl-item.bds2160SegmentedControl---active {
2733
2874
  color: var(--control_label-color--active, var(--bds-color_on-interactive));
2734
2875
  }
2735
- .bds2150SegmentedControl-item.bds2150SegmentedControl---disabled {
2876
+ .bds2160SegmentedControl-item.bds2160SegmentedControl---disabled {
2736
2877
  opacity: 0.5;
2737
2878
  cursor: not-allowed;
2738
2879
  pointer-events: none;
2739
2880
  }
2740
- .bds2150SegmentedControl-control.bds2150SegmentedControl---size_small .bds2150SegmentedControl-item {
2881
+ .bds2160SegmentedControl-control.bds2160SegmentedControl---size_small .bds2160SegmentedControl-item {
2741
2882
  padding: var(--bds-space_xxs) var(--bds-space_s);
2742
2883
  font-size: var(--bds-font_size--body--s);
2743
2884
  }
2744
- .bds2150SegmentedControl-control.bds2150SegmentedControl---size_large .bds2150SegmentedControl-item {
2885
+ .bds2160SegmentedControl-control.bds2160SegmentedControl---size_large .bds2160SegmentedControl-item {
2745
2886
  padding: var(--bds-space_s) var(--bds-space_m);
2746
2887
  white-space: normal;
2747
2888
  text-align: center;
2748
2889
  }
2749
- .bds2150SegmentedControl-control.bds2150SegmentedControl---variant_outline {
2890
+ .bds2160SegmentedControl-control.bds2160SegmentedControl---variant_outline {
2750
2891
  --control_label-color--active: var(--bds-color_interactive);
2751
2892
  }
2752
- .bds2150SegmentedControl-control.bds2150SegmentedControl---variant_outline .bds2150SegmentedControl-thumb {
2893
+ .bds2160SegmentedControl-control.bds2160SegmentedControl---variant_outline .bds2160SegmentedControl-thumb {
2753
2894
  display: none;
2754
2895
  }
2755
- .bds2150SegmentedControl-control.bds2150SegmentedControl---variant_outline .bds2150SegmentedControl-item {
2896
+ .bds2160SegmentedControl-control.bds2160SegmentedControl---variant_outline .bds2160SegmentedControl-item {
2756
2897
  background-color: var(--control_item-bg, transparent);
2757
2898
  }
2758
- .bds2150SegmentedControl-control.bds2150SegmentedControl---variant_outline .bds2150SegmentedControl-item.bds2150SegmentedControl---active {
2899
+ .bds2160SegmentedControl-control.bds2160SegmentedControl---variant_outline .bds2160SegmentedControl-item.bds2160SegmentedControl---active {
2759
2900
  background-color: var(--control_item-bg--active, var(--bds-color_bg));
2760
2901
  }
2761
- .bds2150SegmentedControl-control.bds2150SegmentedControl---variant_outline .bds2150SegmentedControl-indicator {
2902
+ .bds2160SegmentedControl-control.bds2160SegmentedControl---variant_outline .bds2160SegmentedControl-indicator {
2762
2903
  display: block;
2763
2904
  box-shadow: inset 0 0 0 var(--control_indicator-width, 2px) var(--control_indicator-color, var(--bds-color_interactive));
2764
2905
  }
2765
- .bds2150SegmentedControl-control.bds2150SegmentedControl---no-selection .bds2150SegmentedControl-thumb,
2766
- .bds2150SegmentedControl-control.bds2150SegmentedControl---no-selection .bds2150SegmentedControl-indicator {
2906
+ .bds2160SegmentedControl-control.bds2160SegmentedControl---no-selection .bds2160SegmentedControl-thumb,
2907
+ .bds2160SegmentedControl-control.bds2160SegmentedControl---no-selection .bds2160SegmentedControl-indicator {
2767
2908
  display: none;
2768
2909
  }
2769
2910
  @media (hover: hover) and (pointer: fine) {
2770
- .bds2150SegmentedControl-item:not(.bds2150SegmentedControl---active, .bds2150SegmentedControl---disabled):hover {
2911
+ .bds2160SegmentedControl-item:not(.bds2160SegmentedControl---active, .bds2160SegmentedControl---disabled):hover {
2771
2912
  color: var(--control_label-color--hover, var(--bds-color_on-bg));
2772
2913
  }
2773
2914
  }
2774
2915
  @media (prefers-reduced-motion: reduce) {
2775
- .bds2150SegmentedControl-thumb,
2776
- .bds2150SegmentedControl-indicator {
2916
+ .bds2160SegmentedControl-thumb,
2917
+ .bds2160SegmentedControl-indicator {
2777
2918
  transition: none;
2778
2919
  }
2779
2920
  }
2780
2921
  }
2781
2922
 
2782
2923
  /* src/components/interaction/form/Select/Select.module.css */
2783
- @layer boostdev.bds2150Select-component {
2784
- .bds2150Select-formGroup {
2924
+ @layer boostdev.bds2160Select-component {
2925
+ .bds2160Select-formGroup {
2785
2926
  display: flex;
2786
2927
  flex-direction: column;
2787
2928
  }
2788
- .bds2150Select-selectWrapper {
2929
+ .bds2160Select-selectWrapper {
2789
2930
  position: relative;
2790
2931
  display: flex;
2791
2932
  align-items: center;
2792
2933
  }
2793
- .bds2150Select-select {
2934
+ .bds2160Select-select {
2794
2935
  appearance: none;
2795
2936
  inline-size: 100%;
2796
2937
  font-family: var(--bds-font_family--body);
@@ -2807,21 +2948,22 @@
2807
2948
  cursor: pointer;
2808
2949
  transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing), background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
2809
2950
  }
2810
- .bds2150Select-select:focus {
2951
+ .bds2160Select-select:focus {
2811
2952
  --bdc_color: var(--bdc_color--focus);
2812
2953
  }
2813
- .bds2150Select-select:focus-visible {
2954
+ .bds2160Select-select:focus-visible {
2814
2955
  outline: var(--bds-outline_default);
2815
2956
  outline-offset: var(--bds-outline_offset);
2816
2957
  }
2817
- .bds2150Select-select:disabled {
2958
+ .bds2160Select-select:disabled {
2818
2959
  opacity: 0.5;
2819
2960
  cursor: not-allowed;
2820
2961
  }
2821
- .bds2150Select-selectError {
2962
+ .bds2160Select-selectError {
2822
2963
  --bdc_color: var(--bdc_color--error);
2964
+ --bdc-outline_width: var(--bdc-outline_width--error, 2px);
2823
2965
  }
2824
- .bds2150Select-chevron {
2966
+ .bds2160Select-chevron {
2825
2967
  position: absolute;
2826
2968
  inset-inline-end: var(--bds-space_s);
2827
2969
  display: flex;
@@ -2829,30 +2971,30 @@
2829
2971
  pointer-events: none;
2830
2972
  color: var(--select_chevron-color, var(--bds-color_interactive));
2831
2973
  }
2832
- .bds2150Select-chevron svg {
2974
+ .bds2160Select-chevron svg {
2833
2975
  inline-size: var(--select_chevron-size, 1rem);
2834
2976
  block-size: var(--select_chevron-size, 1rem);
2835
2977
  }
2836
2978
  }
2837
2979
 
2838
2980
  /* src/components/interaction/form/Slider/Slider.module.css */
2839
- @layer boostdev.bds2150Slider-component {
2840
- .bds2150Slider-formGroup {
2981
+ @layer boostdev.bds2160Slider-component {
2982
+ .bds2160Slider-formGroup {
2841
2983
  display: flex;
2842
2984
  flex-direction: column;
2843
2985
  gap: var(--bds-space_xxs);
2844
2986
  }
2845
- .bds2150Slider-labelRow {
2987
+ .bds2160Slider-labelRow {
2846
2988
  display: flex;
2847
2989
  justify-content: space-between;
2848
2990
  align-items: baseline;
2849
2991
  }
2850
- .bds2150Slider-value {
2992
+ .bds2160Slider-value {
2851
2993
  font-size: var(--bds-font_size--body--s);
2852
2994
  font-variant-numeric: tabular-nums;
2853
2995
  color: var(--bds-color_on-bg--subtle);
2854
2996
  }
2855
- .bds2150Slider-slider {
2997
+ .bds2160Slider-slider {
2856
2998
  --slider_fill: 0%;
2857
2999
  color: var(--slider_color, var(--bds-color_on-bg));
2858
3000
  appearance: none;
@@ -2869,7 +3011,7 @@
2869
3011
  cursor: pointer;
2870
3012
  transition: var(--bds-animation_transition);
2871
3013
  }
2872
- .bds2150Slider-slider:dir(rtl) {
3014
+ .bds2160Slider-slider:dir(rtl) {
2873
3015
  background:
2874
3016
  linear-gradient(
2875
3017
  to left,
@@ -2878,16 +3020,16 @@
2878
3020
  var(--slider_track-bg, var(--bds-color_bg--subtle)) var(--slider_fill),
2879
3021
  var(--slider_track-bg, var(--bds-color_bg--subtle)) 100%);
2880
3022
  }
2881
- .bds2150Slider-slider:focus-visible {
3023
+ .bds2160Slider-slider:focus-visible {
2882
3024
  outline: var(--bds-outline_default);
2883
3025
  outline-offset: var(--bds-outline_offset);
2884
3026
  border-radius: var(--slider_track-radius, var(--bds-border_radius--full));
2885
3027
  }
2886
- .bds2150Slider-slider:disabled {
3028
+ .bds2160Slider-slider:disabled {
2887
3029
  opacity: 0.4;
2888
3030
  cursor: not-allowed;
2889
3031
  }
2890
- .bds2150Slider-slider::-webkit-slider-thumb {
3032
+ .bds2160Slider-slider::-webkit-slider-thumb {
2891
3033
  appearance: none;
2892
3034
  inline-size: var(--slider_thumb-size, calc(var(--bds-space_s) * 2));
2893
3035
  block-size: var(--slider_thumb-size, calc(var(--bds-space_s) * 2));
@@ -2897,7 +3039,7 @@
2897
3039
  transition: var(--bds-animation_transition);
2898
3040
  cursor: pointer;
2899
3041
  }
2900
- .bds2150Slider-slider::-moz-range-thumb {
3042
+ .bds2160Slider-slider::-moz-range-thumb {
2901
3043
  inline-size: var(--slider_thumb-size, calc(var(--bds-space_s) * 2));
2902
3044
  block-size: var(--slider_thumb-size, calc(var(--bds-space_s) * 2));
2903
3045
  border: none;
@@ -2906,7 +3048,7 @@
2906
3048
  box-shadow: var(--bds-shadow_s);
2907
3049
  cursor: pointer;
2908
3050
  }
2909
- .bds2150Slider-sliderError {
3051
+ .bds2160Slider-sliderError {
2910
3052
  background:
2911
3053
  linear-gradient(
2912
3054
  to right,
@@ -2915,7 +3057,7 @@
2915
3057
  var(--slider_track-bg, var(--bds-color_bg--subtle)) var(--slider_fill),
2916
3058
  var(--slider_track-bg, var(--bds-color_bg--subtle)) 100%);
2917
3059
  }
2918
- .bds2150Slider-sliderError:dir(rtl) {
3060
+ .bds2160Slider-sliderError:dir(rtl) {
2919
3061
  background:
2920
3062
  linear-gradient(
2921
3063
  to left,
@@ -2924,43 +3066,43 @@
2924
3066
  var(--slider_track-bg, var(--bds-color_bg--subtle)) var(--slider_fill),
2925
3067
  var(--slider_track-bg, var(--bds-color_bg--subtle)) 100%);
2926
3068
  }
2927
- .bds2150Slider-sliderError::-webkit-slider-thumb {
3069
+ .bds2160Slider-sliderError::-webkit-slider-thumb {
2928
3070
  background-color: var(--slider_color--error, var(--bds-color_error));
2929
3071
  }
2930
- .bds2150Slider-sliderError::-moz-range-thumb {
3072
+ .bds2160Slider-sliderError::-moz-range-thumb {
2931
3073
  background-color: var(--slider_color--error, var(--bds-color_error));
2932
3074
  }
2933
3075
  @media (prefers-reduced-motion: reduce) {
2934
- .bds2150Slider-slider,
2935
- .bds2150Slider-slider::-webkit-slider-thumb,
2936
- .bds2150Slider-slider::-moz-range-thumb {
3076
+ .bds2160Slider-slider,
3077
+ .bds2160Slider-slider::-webkit-slider-thumb,
3078
+ .bds2160Slider-slider::-moz-range-thumb {
2937
3079
  transition: none;
2938
3080
  }
2939
3081
  }
2940
3082
  }
2941
3083
 
2942
3084
  /* src/components/interaction/form/Switch/Switch.module.css */
2943
- @layer boostdev.bds2150Switch-component {
2944
- .bds2150Switch-switchGroup {
3085
+ @layer boostdev.bds2160Switch-component {
3086
+ .bds2160Switch-switchGroup {
2945
3087
  color: var(--switch_color, var(--bds-color_on-bg));
2946
3088
  display: flex;
2947
3089
  flex-direction: column;
2948
3090
  }
2949
- .bds2150Switch-switchGroup.bds2150Switch---size_small {
3091
+ .bds2160Switch-switchGroup.bds2160Switch---size_small {
2950
3092
  --switch_thumb-size: 1em;
2951
3093
  }
2952
- .bds2150Switch-switchGroup.bds2150Switch---size_medium {
3094
+ .bds2160Switch-switchGroup.bds2160Switch---size_medium {
2953
3095
  --switch_thumb-size: 1.25em;
2954
3096
  }
2955
- .bds2150Switch-switchGroup.bds2150Switch---size_large {
3097
+ .bds2160Switch-switchGroup.bds2160Switch---size_large {
2956
3098
  --switch_thumb-size: 1.5em;
2957
3099
  }
2958
- .bds2150Switch-inputWrapper {
3100
+ .bds2160Switch-inputWrapper {
2959
3101
  display: flex;
2960
3102
  align-items: center;
2961
3103
  gap: var(--bds-space_xs);
2962
3104
  }
2963
- .bds2150Switch-trackWrapper {
3105
+ .bds2160Switch-trackWrapper {
2964
3106
  position: relative;
2965
3107
  display: inline-flex;
2966
3108
  align-items: center;
@@ -2968,7 +3110,7 @@
2968
3110
  inline-size: calc(var(--switch_thumb-size, 1.25em) * 2 + var(--switch_track-pad, var(--bds-space_xxxs)) * 2);
2969
3111
  block-size: calc(var(--switch_thumb-size, 1.25em) + var(--switch_track-pad, var(--bds-space_xxxs)) * 2);
2970
3112
  }
2971
- .bds2150Switch-switch {
3113
+ .bds2160Switch-switch {
2972
3114
  position: absolute;
2973
3115
  inset: 0;
2974
3116
  appearance: none;
@@ -2979,10 +3121,10 @@
2979
3121
  cursor: pointer;
2980
3122
  z-index: 1;
2981
3123
  }
2982
- .bds2150Switch-switch:disabled {
3124
+ .bds2160Switch-switch:disabled {
2983
3125
  cursor: not-allowed;
2984
3126
  }
2985
- .bds2150Switch-track {
3127
+ .bds2160Switch-track {
2986
3128
  display: inline-flex;
2987
3129
  align-items: center;
2988
3130
  inline-size: calc(var(--switch_thumb-size, 1.25em) * 2 + var(--switch_track-pad, var(--bds-space_xxxs)) * 2);
@@ -2998,7 +3140,7 @@
2998
3140
  transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
2999
3141
  --bdc_color: var(--switch_thumb-bg, var(--bds-color_interactive));
3000
3142
  }
3001
- .bds2150Switch-thumb {
3143
+ .bds2160Switch-thumb {
3002
3144
  display: block;
3003
3145
  inline-size: var(--switch_thumb-size, 1.25em);
3004
3146
  block-size: var(--switch_thumb-size, 1.25em);
@@ -3008,43 +3150,44 @@
3008
3150
  transition: var(--bds-animation_transition);
3009
3151
  transform: translateX(0);
3010
3152
  }
3011
- .bds2150Switch-switch.bds2150Switch-switchError + .bds2150Switch-track {
3153
+ .bds2160Switch-switch.bds2160Switch-switchError + .bds2160Switch-track {
3012
3154
  --bdc_color: var(--switch_border-color--error, var(--bds-color_error));
3155
+ --bdc-outline_width: var(--bdc-outline_width--error, 2px);
3013
3156
  }
3014
- .bds2150Switch-switch:checked + .bds2150Switch-track {
3157
+ .bds2160Switch-switch:checked + .bds2160Switch-track {
3015
3158
  background-color: var(--switch_track-bg--active, var(--bdc-color_active--subtle));
3016
3159
  --bdc_color: var(--switch_thumb-bg--active, var(--bds-color_interactive));
3017
3160
  }
3018
- .bds2150Switch-switch:checked + .bds2150Switch-track .bds2150Switch-thumb {
3161
+ .bds2160Switch-switch:checked + .bds2160Switch-track .bds2160Switch-thumb {
3019
3162
  background-color: var(--switch_thumb-bg--active, var(--bds-color_interactive));
3020
3163
  transform: translateX(var(--switch_thumb-size, 1.25em));
3021
3164
  }
3022
- [dir=rtl] .bds2150Switch-switch:checked + .bds2150Switch-track .bds2150Switch-thumb {
3165
+ [dir=rtl] .bds2160Switch-switch:checked + .bds2160Switch-track .bds2160Switch-thumb {
3023
3166
  transform: translateX(calc(var(--switch_thumb-size, 1.25em) * -1));
3024
3167
  }
3025
- .bds2150Switch-switch:focus-visible + .bds2150Switch-track {
3168
+ .bds2160Switch-switch:focus-visible + .bds2160Switch-track {
3026
3169
  outline: var(--bds-outline_default);
3027
3170
  outline-offset: var(--bds-outline_offset);
3028
3171
  border-radius: var(--switch_track-radius, var(--bds-border_radius--full));
3029
3172
  }
3030
- .bds2150Switch-switch:disabled + .bds2150Switch-track {
3173
+ .bds2160Switch-switch:disabled + .bds2160Switch-track {
3031
3174
  opacity: 0.4;
3032
3175
  }
3033
3176
  @media (prefers-reduced-motion: reduce) {
3034
- .bds2150Switch-track,
3035
- .bds2150Switch-thumb {
3177
+ .bds2160Switch-track,
3178
+ .bds2160Switch-thumb {
3036
3179
  transition: none;
3037
3180
  }
3038
3181
  }
3039
3182
  }
3040
3183
 
3041
3184
  /* src/components/interaction/form/Textarea/Textarea.module.css */
3042
- @layer boostdev.bds2150Textarea-component {
3043
- .bds2150Textarea-formGroup {
3185
+ @layer boostdev.bds2160Textarea-component {
3186
+ .bds2160Textarea-formGroup {
3044
3187
  display: flex;
3045
3188
  flex-direction: column;
3046
3189
  }
3047
- .bds2150Textarea-textarea {
3190
+ .bds2160Textarea-textarea {
3048
3191
  font-family: var(--textarea_font-family, var(--bds-font_family--body));
3049
3192
  font-size: var(--textarea_font-size, var(--bds-font_size--body));
3050
3193
  line-height: var(--textarea_line-height, var(--bds-font_line-height--body));
@@ -3060,65 +3203,66 @@
3060
3203
  min-block-size: var(--textarea_min-block-size, calc(var(--bds-space_m) * 5));
3061
3204
  transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing), background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
3062
3205
  }
3063
- .bds2150Textarea-textarea:focus {
3206
+ .bds2160Textarea-textarea:focus {
3064
3207
  --bdc_color: var(--bdc_color--focus);
3065
3208
  }
3066
- .bds2150Textarea-textarea:focus-visible {
3209
+ .bds2160Textarea-textarea:focus-visible {
3067
3210
  outline: var(--bds-outline_default);
3068
3211
  outline-offset: var(--bds-outline_offset);
3069
3212
  }
3070
- .bds2150Textarea-textarea:disabled {
3213
+ .bds2160Textarea-textarea:disabled {
3071
3214
  opacity: 0.5;
3072
3215
  cursor: not-allowed;
3073
3216
  resize: none;
3074
3217
  }
3075
- .bds2150Textarea-textareaError {
3218
+ .bds2160Textarea-textareaError {
3076
3219
  --bdc_color: var(--bdc_color--error);
3220
+ --bdc-outline_width: var(--bdc-outline_width--error, 2px);
3077
3221
  }
3078
3222
  }
3079
3223
 
3080
3224
  /* src/components/layout/ButtonGroup/ButtonGroup.module.css */
3081
- @layer boostdev.bds2150ButtonGroup-component {
3082
- .bds2150ButtonGroup-buttonGroup {
3225
+ @layer boostdev.bds2160ButtonGroup-component {
3226
+ .bds2160ButtonGroup-buttonGroup {
3083
3227
  container-type: inline-size;
3084
3228
  container-name: button-group;
3085
3229
  grid-column: var(--bds-grid_span-100);
3086
3230
  inline-size: 100%;
3087
3231
  }
3088
- .bds2150ButtonGroup-buttonGroup .bds2150ButtonGroup-container {
3232
+ .bds2160ButtonGroup-buttonGroup .bds2160ButtonGroup-container {
3089
3233
  position: relative;
3090
3234
  display: flex;
3091
3235
  flex-direction: column-reverse;
3092
3236
  gap: var(--buttonGroup_gap, var(--bds-space_l));
3093
3237
  align-items: center;
3094
3238
  }
3095
- .bds2150ButtonGroup-buttonGroup.bds2150ButtonGroup---variant_card .bds2150ButtonGroup-container {
3239
+ .bds2160ButtonGroup-buttonGroup.bds2160ButtonGroup---variant_card .bds2160ButtonGroup-container {
3096
3240
  align-items: stretch;
3097
3241
  }
3098
- .bds2150ButtonGroup-buttonGroup.bds2150ButtonGroup---variant_flow .bds2150ButtonGroup-container,
3099
- .bds2150ButtonGroup-buttonGroup.bds2150ButtonGroup---variant_modal .bds2150ButtonGroup-container {
3242
+ .bds2160ButtonGroup-buttonGroup.bds2160ButtonGroup---variant_flow .bds2160ButtonGroup-container,
3243
+ .bds2160ButtonGroup-buttonGroup.bds2160ButtonGroup---variant_modal .bds2160ButtonGroup-container {
3100
3244
  align-items: center;
3101
3245
  }
3102
- .bds2150ButtonGroup-buttonGroup.bds2150ButtonGroup---variant_content .bds2150ButtonGroup-container {
3246
+ .bds2160ButtonGroup-buttonGroup.bds2160ButtonGroup---variant_content .bds2160ButtonGroup-container {
3103
3247
  align-items: flex-start;
3104
3248
  }
3105
3249
  @supports (contain: inline-size) {
3106
3250
  @container button-group (min-width: 30rem) {
3107
- .bds2150ButtonGroup-buttonGroup .bds2150ButtonGroup-container {
3251
+ .bds2160ButtonGroup-buttonGroup .bds2160ButtonGroup-container {
3108
3252
  flex-direction: row;
3109
3253
  justify-content: space-between;
3110
3254
  }
3111
- .bds2150ButtonGroup-buttonGroup.bds2150ButtonGroup---variant_modal .bds2150ButtonGroup-container > :first-child:last-child,
3112
- .bds2150ButtonGroup-buttonGroup.bds2150ButtonGroup---variant_flow .bds2150ButtonGroup-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 {
3113
3257
  margin-inline-start: auto;
3114
3258
  }
3115
- .bds2150ButtonGroup-buttonGroup.bds2150ButtonGroup---variant_card .bds2150ButtonGroup-container {
3259
+ .bds2160ButtonGroup-buttonGroup.bds2160ButtonGroup---variant_card .bds2160ButtonGroup-container {
3116
3260
  justify-content: center;
3117
3261
  }
3118
- .bds2150ButtonGroup-buttonGroup.bds2150ButtonGroup---variant_modal .bds2150ButtonGroup-container {
3262
+ .bds2160ButtonGroup-buttonGroup.bds2160ButtonGroup---variant_modal .bds2160ButtonGroup-container {
3119
3263
  justify-content: flex-end;
3120
3264
  }
3121
- .bds2150ButtonGroup-buttonGroup.bds2150ButtonGroup---variant_content .bds2150ButtonGroup-container {
3265
+ .bds2160ButtonGroup-buttonGroup.bds2160ButtonGroup---variant_content .bds2160ButtonGroup-container {
3122
3266
  justify-content: flex-start;
3123
3267
  align-items: center;
3124
3268
  }
@@ -3127,208 +3271,223 @@
3127
3271
  }
3128
3272
 
3129
3273
  /* src/components/layout/Card/Card.module.css */
3130
- @layer boostdev.bds2150Card-component {
3131
- .bds2150Card-card {
3274
+ @layer boostdev.bds2160Card-component {
3275
+ .bds2160Card-card {
3132
3276
  background-color: var(--card_color, var(--bds-color_bg--strong, var(--bds-color_bg)));
3133
3277
  color: var(--card_on-color, var(--bds-color_on-bg));
3134
3278
  border-radius: var(--card_radius, var(--bds-border_radius--m));
3135
3279
  transition: var(--card_transition, var(--bds-animation_transition));
3136
3280
  position: relative;
3137
3281
  }
3138
- .bds2150Card-card:is(button) {
3282
+ .bds2160Card-card:is(button) {
3139
3283
  border: none;
3140
3284
  font: inherit;
3141
3285
  text-align: inherit;
3142
3286
  display: block;
3143
3287
  inline-size: 100%;
3144
3288
  }
3145
- .bds2150Card-card.bds2150Card---default {
3289
+ .bds2160Card-card.bds2160Card---default {
3146
3290
  box-shadow: var(--card_shadow--default, var(--bds-shadow_s));
3147
3291
  }
3148
- .bds2150Card-card.bds2150Card---elevated {
3292
+ .bds2160Card-card.bds2160Card---elevated {
3149
3293
  box-shadow: var(--card_shadow--elevated, var(--bds-shadow_m));
3150
3294
  }
3151
- .bds2150Card-card.bds2150Card---outlined {
3295
+ .bds2160Card-card.bds2160Card---outlined {
3152
3296
  border: var(--card_border, none);
3153
3297
  --bdc_color: currentcolor;
3154
3298
  box-shadow: var(--card_shadow--outlined, inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--bds-shadow_s));
3155
3299
  }
3156
- .bds2150Card-card.bds2150Card---clickable {
3300
+ .bds2160Card-card.bds2160Card---clickable {
3157
3301
  cursor: pointer;
3158
3302
  }
3159
- .bds2150Card-card.bds2150Card---padding-none {
3303
+ .bds2160Card-card.bds2160Card---padding-none {
3160
3304
  padding: var(--card_padding, 0);
3161
3305
  }
3162
- .bds2150Card-card.bds2150Card---padding-small {
3306
+ .bds2160Card-card.bds2160Card---padding-small {
3163
3307
  padding: var(--card_padding, var(--bds-space_s));
3164
3308
  }
3165
- .bds2150Card-card.bds2150Card---padding-medium {
3309
+ .bds2160Card-card.bds2160Card---padding-medium {
3166
3310
  padding: var(--card_padding, var(--bds-space_m));
3167
3311
  }
3168
- .bds2150Card-card.bds2150Card---padding-large {
3312
+ .bds2160Card-card.bds2160Card---padding-large {
3169
3313
  padding: var(--card_padding, var(--bds-space_l));
3170
3314
  }
3171
- .bds2150Card-card.bds2150Card---padding-extra-large {
3315
+ .bds2160Card-card.bds2160Card---padding-extra-large {
3172
3316
  padding: var(--card_padding, var(--bds-space_xl));
3173
3317
  }
3174
- .bds2150Card-card.bds2150Card---text-start {
3318
+ .bds2160Card-card.bds2160Card---text-start {
3175
3319
  text-align: start;
3176
3320
  }
3177
- .bds2150Card-card.bds2150Card---text-center {
3321
+ .bds2160Card-card.bds2160Card---text-center {
3178
3322
  text-align: center;
3179
3323
  }
3180
- .bds2150Card-card.bds2150Card---text-end {
3324
+ .bds2160Card-card.bds2160Card---text-end {
3181
3325
  text-align: end;
3182
3326
  }
3183
- .bds2150Card-card.bds2150Card---clickable:focus-visible {
3327
+ .bds2160Card-card.bds2160Card---clickable:focus-visible {
3184
3328
  outline: var(--bds-outline_default);
3185
3329
  outline-offset: var(--bds-outline_offset);
3186
3330
  }
3187
- .bds2150Card-card.bds2150Card---clickable:active {
3331
+ .bds2160Card-card.bds2160Card---clickable:active {
3188
3332
  transform: translateY(0);
3189
3333
  box-shadow: var(--card_shadow--active, var(--bds-shadow_s));
3190
3334
  }
3191
3335
  @media (hover: hover) and (pointer: fine) {
3192
- .bds2150Card-card.bds2150Card---clickable:hover {
3336
+ .bds2160Card-card.bds2160Card---clickable:hover {
3193
3337
  transform: translateY(-2px);
3194
3338
  box-shadow: var(--card_shadow--clickable-hover, var(--bds-shadow_xl));
3195
3339
  }
3196
- .bds2150Card-card.bds2150Card---default:hover {
3340
+ .bds2160Card-card.bds2160Card---default:hover {
3197
3341
  box-shadow: var(--card_shadow--default-hover, var(--bds-shadow_m));
3198
3342
  }
3199
- .bds2150Card-card.bds2150Card---elevated:hover {
3343
+ .bds2160Card-card.bds2160Card---elevated:hover {
3200
3344
  box-shadow: var(--card_shadow--elevated-hover, var(--bds-shadow_2xl));
3201
3345
  }
3202
- .bds2150Card-card.bds2150Card---outlined:hover {
3346
+ .bds2160Card-card.bds2160Card---outlined:hover {
3203
3347
  box-shadow: var(--card_shadow--outlined-hover, var(--bds-shadow_s));
3204
3348
  }
3205
3349
  }
3206
3350
  @media (prefers-reduced-motion: reduce) {
3207
- .bds2150Card-card {
3351
+ .bds2160Card-card {
3208
3352
  transition: none;
3209
3353
  }
3210
- .bds2150Card-card.bds2150Card---clickable:hover,
3211
- .bds2150Card-card.bds2150Card---clickable:active {
3354
+ .bds2160Card-card.bds2160Card---clickable:hover,
3355
+ .bds2160Card-card.bds2160Card---clickable:active {
3212
3356
  transform: none;
3213
3357
  }
3214
3358
  }
3215
3359
  }
3216
3360
 
3217
3361
  /* src/components/layout/Grid/Grid.module.css */
3218
- @layer boostdev.bds2150Grid-component {
3219
- .bds2150Grid-grid {
3362
+ @layer boostdev.bds2160Grid-component {
3363
+ .bds2160Grid-grid {
3220
3364
  display: grid;
3221
3365
  gap: var(--grid_gap, var(--bds-grid_gap));
3222
3366
  }
3223
- .bds2150Grid-grid.bds2150Grid---main {
3367
+ .bds2160Grid-grid.bds2160Grid---main {
3224
3368
  grid-template-columns: var(--bds-grid_template-columns);
3225
3369
  }
3226
- .bds2150Grid-grid.bds2150Grid---page {
3370
+ .bds2160Grid-grid.bds2160Grid---page {
3227
3371
  grid-template-columns: 1fr;
3228
3372
  grid-column: 1 / -1;
3229
3373
  }
3230
- .bds2150Grid-grid.bds2150Grid---funnel {
3374
+ .bds2160Grid-grid.bds2160Grid---funnel {
3231
3375
  grid-template-columns: var(--bds-grid_template-columns);
3232
3376
  max-inline-size: var(--bds-container_max-width--narrow);
3233
3377
  margin-inline: auto;
3234
3378
  }
3235
- .bds2150Grid-grid.bds2150Grid---custom {
3379
+ .bds2160Grid-grid.bds2160Grid---custom {
3236
3380
  grid-template-columns: repeat(var(--grid_columns, 4), minmax(0, 1fr));
3237
3381
  }
3238
- .bds2150Grid-grid.bds2150Grid---centered {
3382
+ .bds2160Grid-grid.bds2160Grid---centered {
3239
3383
  margin-inline: auto;
3240
3384
  max-inline-size: var(--bds-container_max-width);
3241
3385
  padding-inline: var(--bds-container_spacing-inline);
3242
3386
  }
3243
- .bds2150Grid-item {
3387
+ .bds2160Grid-item {
3244
3388
  min-inline-size: 0;
3245
3389
  }
3246
3390
  @supports (grid-template-rows: masonry) {
3247
- .bds2150Grid-grid.bds2150Grid---masonry {
3391
+ .bds2160Grid-grid.bds2160Grid---masonry {
3248
3392
  grid-template-rows: masonry;
3249
3393
  }
3250
3394
  }
3251
3395
  @supports (display: grid-lanes) {
3252
- .bds2150Grid-grid.bds2150Grid---masonry {
3396
+ .bds2160Grid-grid.bds2160Grid---masonry {
3253
3397
  display: grid-lanes;
3254
3398
  }
3255
3399
  }
3256
3400
  }
3257
3401
 
3258
3402
  /* src/components/layout/SectionHeader/SectionHeader.module.css */
3259
- @layer boostdev.bds2150SectionHeader-component {
3260
- .bds2150SectionHeader-sectionHeader {
3403
+ @layer boostdev.bds2160SectionHeader-component {
3404
+ .bds2160SectionHeader-sectionHeader {
3261
3405
  display: flex;
3262
3406
  flex-direction: column;
3263
3407
  gap: var(--sectionHeader_gap, var(--bds-space_m));
3264
3408
  grid-column: var(--bds-grid_span-100);
3265
3409
  }
3266
- .bds2150SectionHeader-title {
3410
+ .bds2160SectionHeader-title {
3267
3411
  color: var(--sectionHeader_title-color, var(--sectionHeader-title-color, var(--bds-color_on-bg)));
3268
3412
  margin: 0;
3269
- font-family: var(--bds-font_family--body);
3413
+ font-family: var(--sectionHeader_title-font-family, var(--bds-font_family--heading));
3270
3414
  }
3271
- .bds2150SectionHeader-subtitle {
3272
- 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)));
3273
3417
  margin: 0;
3274
3418
  font-family: var(--bds-font_family--body);
3275
3419
  font-weight: var(--bds-font_weight--medium);
3276
3420
  }
3277
- .bds2150SectionHeader-sectionHeader.bds2150SectionHeader---start {
3421
+ .bds2160SectionHeader-sectionHeader.bds2160SectionHeader---start {
3278
3422
  align-items: flex-start;
3279
3423
  text-align: start;
3280
3424
  }
3281
- .bds2150SectionHeader-sectionHeader.bds2150SectionHeader---center {
3425
+ .bds2160SectionHeader-sectionHeader.bds2160SectionHeader---center {
3282
3426
  align-items: center;
3283
3427
  text-align: center;
3284
3428
  }
3285
- .bds2150SectionHeader-sectionHeader.bds2150SectionHeader---end {
3429
+ .bds2160SectionHeader-sectionHeader.bds2160SectionHeader---end {
3286
3430
  align-items: flex-end;
3287
3431
  text-align: end;
3288
3432
  }
3289
- .bds2150SectionHeader-sectionHeader.bds2150SectionHeader---medium .bds2150SectionHeader-title {
3290
- 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));
3291
3435
  line-height: var(--sectionHeader_title-line-height, var(--bds-font_line-height--heading));
3292
- 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)));
3293
3437
  }
3294
- .bds2150SectionHeader-sectionHeader.bds2150SectionHeader---medium .bds2150SectionHeader-subtitle {
3295
- 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));
3296
3440
  line-height: var(--sectionHeader_subtitle-line-height, 1.3);
3297
3441
  }
3298
- .bds2150SectionHeader-sectionHeader.bds2150SectionHeader---xs .bds2150SectionHeader-title {
3299
- 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));
3300
3444
  line-height: var(--sectionHeader_title-line-height, var(--bds-font_line-height--heading));
3301
- 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)));
3302
3446
  }
3303
- .bds2150SectionHeader-sectionHeader.bds2150SectionHeader---xs .bds2150SectionHeader-subtitle {
3304
- 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));
3305
3449
  line-height: var(--sectionHeader_subtitle-line-height, 1.4);
3306
3450
  }
3307
- .bds2150SectionHeader-sectionHeader.bds2150SectionHeader---small .bds2150SectionHeader-title {
3308
- 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));
3309
3453
  line-height: var(--sectionHeader_title-line-height, var(--bds-font_line-height--heading));
3310
- 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)));
3311
3455
  }
3312
- .bds2150SectionHeader-sectionHeader.bds2150SectionHeader---small .bds2150SectionHeader-subtitle {
3456
+ .bds2160SectionHeader-sectionHeader.bds2160SectionHeader---small .bds2160SectionHeader-subtitle {
3313
3457
  font-size: var(--sectionHeader_subtitle-size, var(--bds-font_size--body));
3314
3458
  line-height: var(--sectionHeader_subtitle-line-height, 1.4);
3315
3459
  }
3316
- .bds2150SectionHeader-sectionHeader.bds2150SectionHeader---large .bds2150SectionHeader-title {
3317
- font-size: var(--sectionHeader_title-size, var(--bds-font_size--display));
3318
- line-height: var(--sectionHeader_title-line-height, var(--bds-font_line-height--display));
3319
- 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)));
3320
3464
  letter-spacing: var(--bds-font_tracking--tight);
3321
3465
  }
3322
- .bds2150SectionHeader-sectionHeader.bds2150SectionHeader---large .bds2150SectionHeader-subtitle {
3323
- 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));
3324
3468
  line-height: var(--sectionHeader_subtitle-line-height, 1.3);
3325
3469
  font-weight: var(--bds-font_weight--medium);
3326
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
+ }
3327
3486
  }
3328
3487
 
3329
3488
  /* src/components/layout/IconWrapper/IconWrapper.module.css */
3330
- @layer boostdev.bds2150IconWrapper-component {
3331
- .bds2150IconWrapper-wrapper {
3489
+ @layer boostdev.bds2160IconWrapper-component {
3490
+ .bds2160IconWrapper-wrapper {
3332
3491
  inline-size: 2em;
3333
3492
  block-size: 2em;
3334
3493
  font-size: var(--icon-wrapper_size, 3em);
@@ -3344,7 +3503,7 @@
3344
3503
  position: relative;
3345
3504
  transition: var(--bds-animation_transition);
3346
3505
  }
3347
- .bds2150IconWrapper-wrapper svg {
3506
+ .bds2160IconWrapper-wrapper svg {
3348
3507
  fill: currentcolor;
3349
3508
  }
3350
3509
  }