@sbb-esta/lyne-elements 3.7.0 → 3.9.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 (414) hide show
  1. package/alert/alert/alert.component.d.ts +2 -0
  2. package/alert/alert/alert.component.d.ts.map +1 -1
  3. package/alert/alert/alert.component.js +44 -39
  4. package/autocomplete/autocomplete-base-element.js +20 -20
  5. package/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.component.js +14 -14
  6. package/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.component.js +1 -1
  7. package/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.component.js +9 -9
  8. package/badge.css +2 -2
  9. package/breadcrumb/breadcrumb/breadcrumb.component.js +12 -12
  10. package/breadcrumb/breadcrumb-group/breadcrumb-group.component.js +15 -15
  11. package/button/common.js +1 -1
  12. package/button/mini-button/mini-button.component.js +7 -7
  13. package/button/mini-button-group/mini-button-group.component.js +21 -21
  14. package/button.js +1 -1
  15. package/calendar/calendar.component.js +36 -36
  16. package/card/card/card.component.js +10 -10
  17. package/card/card-badge/card-badge.component.js +15 -15
  18. package/carousel/carousel/carousel.component.d.ts +1 -0
  19. package/carousel/carousel/carousel.component.d.ts.map +1 -1
  20. package/carousel/carousel/carousel.component.js +37 -33
  21. package/carousel/carousel-list/carousel-list.component.d.ts +2 -2
  22. package/carousel/carousel-list/carousel-list.component.d.ts.map +1 -1
  23. package/carousel/carousel-list/carousel-list.component.js +32 -29
  24. package/checkbox/common.js +1 -1
  25. package/checkbox-common-gjHkSAmN.js +5 -0
  26. package/checkbox.js +1 -1
  27. package/chip/chip/chip.component.js +23 -23
  28. package/chip-label/chip-label.component.js +22 -22
  29. package/clock/clock.component.js +29 -29
  30. package/container/container/container.component.js +21 -21
  31. package/container/sticky-bar/sticky-bar.component.js +13 -13
  32. package/core/base-elements/open-close-base-element.d.ts +2 -0
  33. package/core/base-elements/open-close-base-element.d.ts.map +1 -1
  34. package/core/base-elements/open-close-base-element.js +4 -0
  35. package/core/config/config.d.ts +6 -0
  36. package/core/config/config.d.ts.map +1 -1
  37. package/core/controllers/escapable-overlay-controller.js +3 -3
  38. package/core/controllers/inert-controller.d.ts +8 -1
  39. package/core/controllers/inert-controller.d.ts.map +1 -1
  40. package/core/controllers/inert-controller.js +25 -13
  41. package/core/controllers/media-matchers-controller.d.ts +29 -0
  42. package/core/controllers/media-matchers-controller.d.ts.map +1 -1
  43. package/core/controllers/media-matchers-controller.js +73 -23
  44. package/core/controllers.js +16 -14
  45. package/core/dom/contains-pierce-shadow-dom.d.ts +3 -0
  46. package/core/dom/contains-pierce-shadow-dom.d.ts.map +1 -0
  47. package/core/dom/contains-pierce-shadow-dom.js +12 -0
  48. package/core/dom/queue-dom-content-loaded.d.ts +5 -0
  49. package/core/dom/queue-dom-content-loaded.d.ts.map +1 -0
  50. package/core/dom/queue-dom-content-loaded.js +7 -0
  51. package/core/dom/set-or-remove-attribute.d.ts +14 -0
  52. package/core/dom/set-or-remove-attribute.d.ts.map +1 -1
  53. package/core/dom/set-or-remove-attribute.js +11 -3
  54. package/core/dom.d.ts +2 -0
  55. package/core/dom.d.ts.map +1 -1
  56. package/core/dom.js +28 -22
  57. package/core/images.d.ts +4 -0
  58. package/core/images.d.ts.map +1 -1
  59. package/core/images.js +12 -12
  60. package/core/mixins.js +10 -10
  61. package/core/overlay/overlay-outside-pointer-event-listener.d.ts +26 -0
  62. package/core/overlay/overlay-outside-pointer-event-listener.d.ts.map +1 -0
  63. package/core/overlay/overlay-outside-pointer-event-listener.js +37 -0
  64. package/core/overlay/position.d.ts +20 -0
  65. package/core/overlay/position.d.ts.map +1 -1
  66. package/core/overlay/position.js +34 -23
  67. package/core/overlay.d.ts +1 -0
  68. package/core/overlay.d.ts.map +1 -1
  69. package/core/overlay.js +15 -11
  70. package/core/styles/core.scss +46 -12
  71. package/core/styles/mixins/badge.scss +2 -2
  72. package/core/styles/mixins/buttons.scss +14 -14
  73. package/core/styles/mixins/card.scss +9 -6
  74. package/core/styles/mixins/chip.scss +8 -8
  75. package/core/styles/mixins/image.scss +3 -0
  76. package/core/styles/mixins/link.scss +12 -7
  77. package/core/styles/mixins/lists.scss +6 -4
  78. package/core/styles/mixins/overlay.scss +6 -3
  79. package/core/styles/mixins/panel.scss +3 -3
  80. package/core/styles/mixins/pearl-chain-bullet.scss +9 -5
  81. package/core/styles/mixins/scrollbar.scss +12 -6
  82. package/core/styles/mixins/shadows.scss +32 -64
  83. package/core/styles/mixins/table.scss +13 -10
  84. package/core/styles/mixins/timetable-form.scss +3 -3
  85. package/core/styles/mixins/typo.scss +4 -4
  86. package/core/styles/node_modules_@sbb-esta_lyne-design-tokens_dist_scss_sbb-variables.scss +49 -1
  87. package/core/styles/node_modules_@sbb-esta_lyne-design-tokens_dist_scss_sbb-variables_css--mixin.scss +203 -5
  88. package/core/styles/off-brand-theme.scss +3 -0
  89. package/core/styles/safety-theme.scss +3 -0
  90. package/core/styles/standard-theme.scss +3 -14
  91. package/core/styles/theme.scss +18 -0
  92. package/core.css +259 -21
  93. package/custom-elements.json +2117 -366
  94. package/date-input/date-input.component.js +1 -1
  95. package/datepicker/datepicker-next-day/datepicker-next-day.component.js +4 -4
  96. package/datepicker/datepicker-previous-day/datepicker-previous-day.component.js +6 -6
  97. package/datepicker/datepicker-toggle/datepicker-toggle.component.js +7 -7
  98. package/development/alert/alert/alert.component.d.ts +2 -0
  99. package/development/alert/alert/alert.component.d.ts.map +1 -1
  100. package/development/alert/alert/alert.component.js +22 -8
  101. package/development/autocomplete/autocomplete-base-element.js +23 -11
  102. package/development/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.component.js +15 -14
  103. package/development/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.component.js +5 -4
  104. package/development/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.component.js +19 -11
  105. package/development/breadcrumb/breadcrumb/breadcrumb.component.js +4 -1
  106. package/development/breadcrumb/breadcrumb-group/breadcrumb-group.component.js +16 -8
  107. package/development/button/common.js +1 -1
  108. package/development/button/mini-button/mini-button.component.js +15 -14
  109. package/development/button/mini-button-group/mini-button-group.component.js +4 -4
  110. package/development/button.js +1 -1
  111. package/development/calendar/calendar.component.js +21 -11
  112. package/development/card/card/card.component.js +11 -6
  113. package/development/card/card-badge/card-badge.component.js +10 -9
  114. package/development/carousel/carousel/carousel.component.d.ts +1 -0
  115. package/development/carousel/carousel/carousel.component.d.ts.map +1 -1
  116. package/development/carousel/carousel/carousel.component.js +14 -4
  117. package/development/carousel/carousel-list/carousel-list.component.d.ts +2 -2
  118. package/development/carousel/carousel-list/carousel-list.component.d.ts.map +1 -1
  119. package/development/carousel/carousel-list/carousel-list.component.js +29 -21
  120. package/development/checkbox/common.js +1 -1
  121. package/development/{checkbox-common-aMPOsPVA.js → checkbox-common-Dy_ofVhp.js} +4 -3
  122. package/development/checkbox.js +1 -1
  123. package/development/chip/chip/chip.component.js +15 -14
  124. package/development/chip-label/chip-label.component.js +12 -15
  125. package/development/clock/clock.component.js +11 -3
  126. package/development/container/container/container.component.js +6 -6
  127. package/development/container/sticky-bar/sticky-bar.component.js +6 -6
  128. package/development/core/base-elements/open-close-base-element.d.ts +2 -0
  129. package/development/core/base-elements/open-close-base-element.d.ts.map +1 -1
  130. package/development/core/base-elements/open-close-base-element.js +5 -1
  131. package/development/core/config/config.d.ts +6 -0
  132. package/development/core/config/config.d.ts.map +1 -1
  133. package/development/core/config/config.js +1 -1
  134. package/development/core/controllers/escapable-overlay-controller.js +2 -2
  135. package/development/core/controllers/inert-controller.d.ts +8 -1
  136. package/development/core/controllers/inert-controller.d.ts.map +1 -1
  137. package/development/core/controllers/inert-controller.js +49 -30
  138. package/development/core/controllers/media-matchers-controller.d.ts +29 -0
  139. package/development/core/controllers/media-matchers-controller.d.ts.map +1 -1
  140. package/development/core/controllers/media-matchers-controller.js +74 -1
  141. package/development/core/controllers.js +3 -1
  142. package/development/core/dom/contains-pierce-shadow-dom.d.ts +3 -0
  143. package/development/core/dom/contains-pierce-shadow-dom.d.ts.map +1 -0
  144. package/development/core/dom/contains-pierce-shadow-dom.js +14 -0
  145. package/development/core/dom/queue-dom-content-loaded.d.ts +5 -0
  146. package/development/core/dom/queue-dom-content-loaded.d.ts.map +1 -0
  147. package/development/core/dom/queue-dom-content-loaded.js +12 -0
  148. package/development/core/dom/set-or-remove-attribute.d.ts +14 -0
  149. package/development/core/dom/set-or-remove-attribute.d.ts.map +1 -1
  150. package/development/core/dom/set-or-remove-attribute.js +9 -1
  151. package/development/core/dom.d.ts +2 -0
  152. package/development/core/dom.d.ts.map +1 -1
  153. package/development/core/dom.js +8 -2
  154. package/development/core/images.d.ts +4 -0
  155. package/development/core/images.d.ts.map +1 -1
  156. package/development/core/images.js +11 -11
  157. package/development/core/mixins.js +7 -6
  158. package/development/core/overlay/overlay-outside-pointer-event-listener.d.ts +26 -0
  159. package/development/core/overlay/overlay-outside-pointer-event-listener.d.ts.map +1 -0
  160. package/development/core/overlay/overlay-outside-pointer-event-listener.js +61 -0
  161. package/development/core/overlay/position.d.ts +20 -0
  162. package/development/core/overlay/position.d.ts.map +1 -1
  163. package/development/core/overlay/position.js +41 -1
  164. package/development/core/overlay.d.ts +1 -0
  165. package/development/core/overlay.d.ts.map +1 -1
  166. package/development/core/overlay.js +6 -2
  167. package/development/date-input/date-input.component.js +2 -2
  168. package/development/datepicker/datepicker-next-day/datepicker-next-day.component.js +15 -14
  169. package/development/datepicker/datepicker-previous-day/datepicker-previous-day.component.js +15 -14
  170. package/development/datepicker/datepicker-toggle/datepicker-toggle.component.js +15 -14
  171. package/development/dialog/dialog/dialog.component.d.ts +1 -0
  172. package/development/dialog/dialog/dialog.component.d.ts.map +1 -1
  173. package/development/dialog/dialog/dialog.component.js +28 -14
  174. package/development/dialog/dialog-actions/dialog-actions.component.js +1 -1
  175. package/development/dialog/dialog-title/dialog-title.component.js +1 -1
  176. package/development/divider/divider.component.js +2 -2
  177. package/development/expansion-panel/expansion-panel/expansion-panel.component.js +6 -6
  178. package/development/expansion-panel/expansion-panel-header/expansion-panel-header.component.js +6 -2
  179. package/development/file-selector/common.js +1 -1
  180. package/development/{file-selector-common-CRnQigIZ.js → file-selector-common-CRNAWFM_.js} +8 -5
  181. package/development/file-selector.js +1 -1
  182. package/development/flip-card/flip-card/flip-card.component.js +8 -3
  183. package/development/footer/footer.component.js +5 -4
  184. package/development/form-error/form-error.component.js +2 -2
  185. package/development/form-field/form-field/form-field.component.js +36 -22
  186. package/development/form-field/form-field-clear/form-field-clear.component.js +15 -14
  187. package/development/header/common/header-action-common.js +4 -4
  188. package/development/header/header/header.component.js +2 -2
  189. package/development/header/header-environment/header-environment.component.js +1 -1
  190. package/development/{icon-sidebar-button-common-CA_8TnFu.js → icon-sidebar-button-common-BGrKtvyM.js} +3 -2
  191. package/development/journey-header/journey-header.component.js +1 -1
  192. package/development/lead-container/lead-container.component.js +4 -2
  193. package/development/link/common/block-link-common.js +17 -5
  194. package/development/link/common/inline-link-common.js +9 -3
  195. package/development/link-list/link-list-anchor/link-list-anchor.component.js +11 -9
  196. package/development/loading-indicator/loading-indicator.component.js +1 -1
  197. package/development/loading-indicator-circle/loading-indicator-circle.component.js +2 -2
  198. package/development/logo/logo.component.js +3 -2
  199. package/development/map-container/map-container.component.js +14 -6
  200. package/development/menu/common/menu-action-common.d.ts.map +1 -1
  201. package/development/menu/common/menu-action-common.js +23 -5
  202. package/development/menu/menu/menu.component.d.ts +23 -10
  203. package/development/menu/menu/menu.component.d.ts.map +1 -1
  204. package/development/menu/menu/menu.component.js +237 -72
  205. package/development/message/message.component.js +3 -1
  206. package/development/navigation/common/navigation-action-common.js +4 -4
  207. package/development/navigation/navigation/navigation.component.js +21 -19
  208. package/development/navigation/navigation-list/navigation-list.component.js +1 -1
  209. package/development/navigation/navigation-marker/navigation-marker.component.js +1 -1
  210. package/development/navigation/navigation-section/navigation-section.component.js +3 -3
  211. package/development/notification/notification.component.js +38 -18
  212. package/development/option/optgroup/optgroup-base-element.js +3 -2
  213. package/development/option/option/option.component.js +16 -12
  214. package/development/option/option-hint/option-hint.component.js +3 -2
  215. package/development/overlay/overlay.component.d.ts.map +1 -1
  216. package/development/overlay/overlay.component.js +28 -22
  217. package/development/paginator/compact-paginator/compact-paginator.component.js +3 -2
  218. package/development/paginator/paginator/paginator.component.js +18 -17
  219. package/development/popover/popover/popover.component.js +8 -6
  220. package/development/popover/popover-trigger/popover-trigger.component.js +20 -17
  221. package/development/radio-button/common.js +1 -1
  222. package/development/radio-button/radio-button/radio-button.component.js +3 -3
  223. package/development/radio-button/radio-button-panel/radio-button-panel.component.js +3 -3
  224. package/development/{radio-button-common-454JtP9b.js → radio-button-common-CgM3kQSW.js} +9 -8
  225. package/development/radio-button.js +1 -1
  226. package/development/sbb-tokens-CVLcOi-S.js +1 -1
  227. package/development/select/select.component.js +31 -13
  228. package/development/selection-action-panel/selection-action-panel.component.js +9 -5
  229. package/development/selection-expansion-panel/selection-expansion-panel.component.js +10 -6
  230. package/development/sidebar/common.js +1 -1
  231. package/development/sidebar/icon-sidebar/icon-sidebar.component.js +2 -2
  232. package/development/sidebar/sidebar/sidebar.component.js +14 -6
  233. package/development/sidebar.js +1 -1
  234. package/development/signet/signet.component.js +2 -2
  235. package/development/skiplink-list/skiplink-list.component.d.ts +3 -1
  236. package/development/skiplink-list/skiplink-list.component.d.ts.map +1 -1
  237. package/development/skiplink-list/skiplink-list.component.js +26 -9
  238. package/development/slider/slider.component.js +15 -9
  239. package/development/status/status.component.js +7 -7
  240. package/development/stepper/step/step.component.js +1 -3
  241. package/development/stepper/step-label/step-label.component.js +7 -6
  242. package/development/stepper/stepper/stepper.component.js +5 -5
  243. package/development/tabs/tab/tab.component.d.ts +10 -4
  244. package/development/tabs/tab/tab.component.d.ts.map +1 -1
  245. package/development/tabs/tab/tab.component.js +15 -16
  246. package/development/tabs/tab-group/tab-group.component.d.ts +15 -14
  247. package/development/tabs/tab-group/tab-group.component.d.ts.map +1 -1
  248. package/development/tabs/tab-group/tab-group.component.js +46 -175
  249. package/development/tabs/tab-label/tab-label.component.d.ts +21 -2
  250. package/development/tabs/tab-label/tab-label.component.d.ts.map +1 -1
  251. package/development/tabs/tab-label/tab-label.component.js +97 -19
  252. package/development/tag/tag/tag.component.js +15 -9
  253. package/development/teaser/teaser.component.js +3 -2
  254. package/development/teaser-hero/teaser-hero.component.js +3 -3
  255. package/development/teaser-product/common.js +1 -1
  256. package/development/{teaser-product-common-D6fa6x3w.js → teaser-product-common-DvlBRkE_.js} +14 -6
  257. package/development/teaser-product.js +1 -1
  258. package/development/time-input/time-input.component.js +2 -2
  259. package/development/timetable-form/timetable-form/timetable-form.component.js +1 -1
  260. package/development/timetable-form/timetable-form-details/timetable-form-details.component.js +1 -1
  261. package/development/timetable-form/timetable-form-field/timetable-form-field.component.js +3 -3
  262. package/development/timetable-occupancy/timetable-occupancy.component.js +2 -2
  263. package/development/timetable-occupancy-icon/timetable-occupancy-icon.component.d.ts +1 -0
  264. package/development/timetable-occupancy-icon/timetable-occupancy-icon.component.d.ts.map +1 -1
  265. package/development/timetable-occupancy-icon/timetable-occupancy-icon.component.js +4 -3
  266. package/development/title/title-base.js +2 -5
  267. package/development/title/title.component.js +1 -1
  268. package/development/toast/toast.component.d.ts +3 -1
  269. package/development/toast/toast.component.d.ts.map +1 -1
  270. package/development/toast/toast.component.js +31 -15
  271. package/development/toggle/toggle/toggle.component.js +8 -4
  272. package/development/toggle/toggle-option/toggle-option.component.js +5 -3
  273. package/development/toggle-check/toggle-check.component.js +13 -14
  274. package/development/tooltip/tooltip.component.d.ts +89 -0
  275. package/development/tooltip/tooltip.component.d.ts.map +1 -0
  276. package/development/tooltip/tooltip.component.js +473 -0
  277. package/development/tooltip.d.ts +5 -0
  278. package/development/tooltip.d.ts.map +1 -0
  279. package/development/tooltip.js +5 -0
  280. package/development/train/train-blocked-passage/train-blocked-passage.component.js +1 -1
  281. package/development/train/train-formation/train-formation.component.js +16 -4
  282. package/development/train/train-wagon/train-wagon.component.js +3 -12
  283. package/development/{transparent-button-COe-YB_U.js → transparent-button-DdSaBp_-.js} +141 -86
  284. package/development/visual-checkbox/visual-checkbox.component.js +12 -12
  285. package/dialog/dialog/dialog.component.d.ts +1 -0
  286. package/dialog/dialog/dialog.component.d.ts.map +1 -1
  287. package/dialog/dialog/dialog.component.js +37 -36
  288. package/dialog/dialog-actions/dialog-actions.component.js +6 -6
  289. package/dialog/dialog-title/dialog-title.component.js +4 -4
  290. package/divider/divider.component.js +16 -16
  291. package/expansion-panel/expansion-panel/expansion-panel.component.js +1 -1
  292. package/expansion-panel/expansion-panel-header/expansion-panel-header.component.js +3 -3
  293. package/file-selector/common.js +1 -1
  294. package/file-selector-common-D88J9PEh.js +5 -0
  295. package/file-selector.js +1 -1
  296. package/flip-card/flip-card/flip-card.component.js +14 -14
  297. package/footer/footer.component.js +18 -18
  298. package/form-error/form-error.component.js +4 -4
  299. package/form-field/form-field/form-field.component.js +1 -1
  300. package/form-field/form-field-clear/form-field-clear.component.js +9 -9
  301. package/header/common/header-action-common.js +1 -1
  302. package/header/header/header.component.js +19 -19
  303. package/header/header-environment/header-environment.component.js +1 -1
  304. package/icon-sidebar-button-common-BeRXvifI.js +7 -0
  305. package/index.d.ts +2 -0
  306. package/index.js +2 -0
  307. package/journey-header/journey-header.component.js +1 -1
  308. package/lead-container/lead-container.component.js +5 -5
  309. package/link/common/block-link-common.js +23 -23
  310. package/link/common/inline-link-common.js +7 -7
  311. package/link-list/link-list-anchor/link-list-anchor.component.js +11 -11
  312. package/lists.css +5 -3
  313. package/loading-indicator/loading-indicator.component.js +1 -1
  314. package/loading-indicator-circle/loading-indicator-circle.component.js +13 -13
  315. package/logo/logo.component.js +9 -9
  316. package/map-container/map-container.component.js +15 -15
  317. package/menu/common/menu-action-common.d.ts.map +1 -1
  318. package/menu/common/menu-action-common.js +15 -12
  319. package/menu/menu/menu.component.d.ts +23 -10
  320. package/menu/menu/menu.component.d.ts.map +1 -1
  321. package/menu/menu/menu.component.js +156 -85
  322. package/message/message.component.js +9 -9
  323. package/navigation/common/navigation-action-common.js +6 -6
  324. package/navigation/navigation/navigation.component.js +19 -19
  325. package/navigation/navigation-list/navigation-list.component.js +1 -1
  326. package/navigation/navigation-marker/navigation-marker.component.js +1 -1
  327. package/navigation/navigation-section/navigation-section.component.js +1 -1
  328. package/notification/notification.component.js +8 -8
  329. package/off-brand-theme.css +3023 -0
  330. package/option/optgroup/optgroup-base-element.js +1 -1
  331. package/option/option/option.component.js +3 -3
  332. package/option/option-hint/option-hint.component.js +8 -8
  333. package/overlay/overlay.component.d.ts.map +1 -1
  334. package/overlay/overlay.component.js +47 -48
  335. package/package.json +14 -1
  336. package/paginator/compact-paginator/compact-paginator.component.js +4 -4
  337. package/paginator/paginator/paginator.component.js +10 -10
  338. package/popover/popover/popover.component.js +9 -9
  339. package/popover/popover-trigger/popover-trigger.component.js +5 -5
  340. package/radio-button/common.js +1 -1
  341. package/radio-button/radio-button/radio-button.component.js +13 -13
  342. package/radio-button/radio-button-panel/radio-button-panel.component.js +2 -2
  343. package/radio-button-common-Nm9ULjVb.js +5 -0
  344. package/radio-button.js +1 -1
  345. package/safety-theme.css +3023 -0
  346. package/scrollbar.css +52 -20
  347. package/select/select.component.js +45 -45
  348. package/selection-action-panel/selection-action-panel.component.js +6 -6
  349. package/selection-expansion-panel/selection-expansion-panel.component.js +11 -11
  350. package/sidebar/common.js +1 -1
  351. package/sidebar/icon-sidebar/icon-sidebar.component.js +12 -12
  352. package/sidebar/sidebar/sidebar.component.js +29 -29
  353. package/sidebar.js +1 -1
  354. package/signet/signet.component.js +1 -1
  355. package/skiplink-list/skiplink-list.component.d.ts +3 -1
  356. package/skiplink-list/skiplink-list.component.d.ts.map +1 -1
  357. package/skiplink-list/skiplink-list.component.js +37 -30
  358. package/slider/slider.component.js +16 -16
  359. package/standard-theme.css +340 -58
  360. package/status/status.component.js +13 -13
  361. package/stepper/step/step.component.js +5 -5
  362. package/stepper/step-label/step-label.component.js +1 -1
  363. package/stepper/stepper/stepper.component.js +7 -7
  364. package/table.css +15 -9
  365. package/tabs/tab/tab.component.d.ts +10 -4
  366. package/tabs/tab/tab.component.d.ts.map +1 -1
  367. package/tabs/tab/tab.component.js +22 -24
  368. package/tabs/tab-group/tab-group.component.d.ts +15 -14
  369. package/tabs/tab-group/tab-group.component.d.ts.map +1 -1
  370. package/tabs/tab-group/tab-group.component.js +68 -122
  371. package/tabs/tab-label/tab-label.component.d.ts +21 -2
  372. package/tabs/tab-label/tab-label.component.d.ts.map +1 -1
  373. package/tabs/tab-label/tab-label.component.js +88 -46
  374. package/tag/tag/tag.component.js +14 -14
  375. package/teaser/teaser.component.js +1 -1
  376. package/teaser-hero/teaser-hero.component.js +12 -12
  377. package/teaser-product/common.js +1 -1
  378. package/teaser-product-common-DIra6aVg.js +5 -0
  379. package/teaser-product.js +1 -1
  380. package/time-input/time-input.component.js +1 -1
  381. package/timetable-form/timetable-form/timetable-form.component.js +6 -6
  382. package/timetable-form/timetable-form-details/timetable-form-details.component.js +4 -4
  383. package/timetable-form/timetable-form-field/timetable-form-field.component.js +5 -5
  384. package/timetable-form.css +3 -3
  385. package/timetable-occupancy/timetable-occupancy.component.js +7 -7
  386. package/timetable-occupancy-icon/timetable-occupancy-icon.component.d.ts +1 -0
  387. package/timetable-occupancy-icon/timetable-occupancy-icon.component.d.ts.map +1 -1
  388. package/timetable-occupancy-icon/timetable-occupancy-icon.component.js +23 -23
  389. package/title/title-base.js +1 -1
  390. package/title/title.component.js +1 -1
  391. package/toast/toast.component.d.ts +3 -1
  392. package/toast/toast.component.d.ts.map +1 -1
  393. package/toast/toast.component.js +67 -59
  394. package/toggle/toggle/toggle.component.js +1 -1
  395. package/toggle/toggle-option/toggle-option.component.js +5 -5
  396. package/toggle-check/toggle-check.component.js +16 -16
  397. package/tooltip/tooltip.component.d.ts +89 -0
  398. package/tooltip/tooltip.component.d.ts.map +1 -0
  399. package/tooltip/tooltip.component.js +220 -0
  400. package/tooltip.d.ts +5 -0
  401. package/tooltip.d.ts.map +1 -0
  402. package/tooltip.js +4 -0
  403. package/train/train-blocked-passage/train-blocked-passage.component.js +1 -1
  404. package/train/train-formation/train-formation.component.js +16 -16
  405. package/train/train-wagon/train-wagon.component.js +1 -1
  406. package/transparent-button-Bg9fU_iZ.js +9 -0
  407. package/typography.css +1 -0
  408. package/visual-checkbox/visual-checkbox.component.js +14 -14
  409. package/checkbox-common-CDzcyq8p.js +0 -5
  410. package/file-selector-common-OHK9hu3a.js +0 -5
  411. package/icon-sidebar-button-common-CM-ueEhH.js +0 -7
  412. package/radio-button-common-CUppr5FI.js +0 -5
  413. package/teaser-product-common-C8oSkIxy.js +0 -5
  414. package/transparent-button-xudJxob_.js +0 -9
package/standard-theme.css CHANGED
@@ -106,7 +106,7 @@ summary {
106
106
 
107
107
  /**
108
108
  * Do not edit directly
109
- * Generated on Tue, 05 Aug 2025 06:28:50 GMT
109
+ * Generated on Thu, 18 Sep 2025 10:59:58 GMT
110
110
  */
111
111
  *,
112
112
  ::before,
@@ -262,14 +262,24 @@ summary {
262
262
  --sbb-color-red-alpha-60: rgba(235, 0, 0, 0.6);
263
263
  --sbb-color-red-alpha-90: rgba(235, 0, 0, 0.9);
264
264
  --sbb-color-red-mode-dark: #ff3838;
265
+ --sbb-color-red85: #ff3838;
265
266
  --sbb-color-red125: #c60018;
266
267
  --sbb-color-red125-alpha-0: rgba(198, 0, 24, 0);
267
268
  --sbb-color-red125-alpha-20: rgba(198, 0, 24, 0.2);
268
- --sbb-color-red125-alpha-60: rgba(198, 0, 0, 0.6);
269
+ --sbb-color-red125-alpha-60: rgba(198, 0, 24, 0.6);
269
270
  --sbb-color-red150: #a20013;
270
271
  --sbb-color-royal: #06348b;
272
+ --sbb-color-royal85: #4077df;
271
273
  --sbb-color-royal125: #032668;
272
274
  --sbb-color-royal150: #021c4e;
275
+ --sbb-color-royal-light: #06348b;
276
+ --sbb-color-royal-dark: #0053ef;
277
+ --sbb-color-royal85-light: #4077df;
278
+ --sbb-color-royal85-dark: #4077df;
279
+ --sbb-color-royal125-light: #032668;
280
+ --sbb-color-royal125-dark: #245ecb;
281
+ --sbb-color-royal150-light: #021c4e;
282
+ --sbb-color-royal150-dark: #000000;
273
283
  --sbb-color-white: #ffffff;
274
284
  --sbb-color-white-alpha-0: rgba(255, 255, 255, 0);
275
285
  --sbb-color-white-alpha-20: rgba(255, 255, 255, 0.2);
@@ -279,16 +289,38 @@ summary {
279
289
  --sbb-color-white-alpha-70: rgba(255, 255, 255, 0.7);
280
290
  --sbb-color-white-alpha-80: rgba(255, 255, 255, 0.8);
281
291
  --sbb-color-sky: #0074bf;
292
+ --sbb-color-sky-light: #0074bf;
293
+ --sbb-color-sky-dark: #128ede;
282
294
  --sbb-color-night: #143a85;
295
+ --sbb-color-night-light: #143a85;
296
+ --sbb-color-night-dark: #6587ca;
283
297
  --sbb-color-violet: #6f2282;
298
+ --sbb-color-violet-light: #6f2282;
299
+ --sbb-color-violet-dark: #b36cc5;
284
300
  --sbb-color-pink: #c7387a;
301
+ --sbb-color-pink-light: #c7387a;
302
+ --sbb-color-pink-dark: #e45295;
285
303
  --sbb-color-autumn: #cf3b00;
304
+ --sbb-color-autumn-light: #cf3b00;
305
+ --sbb-color-autumn-dark: #f05313;
286
306
  --sbb-color-orange: #f27e00;
307
+ --sbb-color-orange-light: #f27e00;
308
+ --sbb-color-orange-dark: #fb8e19;
287
309
  --sbb-color-peach: #fcbb00;
310
+ --sbb-color-peach-light: #fcbb00;
311
+ --sbb-color-peach-dark: #ffc727;
288
312
  --sbb-color-lemon: #ffde15;
313
+ --sbb-color-lemon-light: #ffde15;
314
+ --sbb-color-lemon-dark: #ffe547;
289
315
  --sbb-color-brown: #a05400;
316
+ --sbb-color-brown-light: #a05400;
317
+ --sbb-color-brown-dark: #000000;
290
318
  --sbb-color-green: #008233;
319
+ --sbb-color-green-light: #008233;
320
+ --sbb-color-green-dark: #109d47;
291
321
  --sbb-color-turquoise: #007e84;
322
+ --sbb-color-turquoise-light: #007e84;
323
+ --sbb-color-turquoise-dark: #00a59b;
292
324
  /**
293
325
  * Original Value: 3px
294
326
  */
@@ -361,6 +393,22 @@ summary {
361
393
  * Original Value: 1200px
362
394
  */
363
395
  --sbb-layout-base-page-max-width: 75rem;
396
+ --sbb-shadow-color-soft-1-light: rgba(141, 141, 141, 0.05);
397
+ --sbb-shadow-color-soft-1-dark: rgba(0, 0, 0, 0.15);
398
+ --sbb-shadow-color-soft-1-negative-light: rgba(0, 0, 0, 0.15);
399
+ --sbb-shadow-color-soft-1-negative-dark: rgba(0, 0, 0, 0.15);
400
+ --sbb-shadow-color-soft-2-light: rgba(141, 141, 141, 0.1);
401
+ --sbb-shadow-color-soft-2-dark: rgba(0, 0, 0, 0.2);
402
+ --sbb-shadow-color-soft-2-negative-light: rgba(0, 0, 0, 0.2);
403
+ --sbb-shadow-color-soft-2-negative-dark: rgba(0, 0, 0, 0.2);
404
+ --sbb-shadow-color-hard-1-light: rgba(141, 141, 141, 0.1);
405
+ --sbb-shadow-color-hard-1-dark: rgba(0, 0, 0, 0.3);
406
+ --sbb-shadow-color-hard-1-negative-light: rgba(0, 0, 0, 0.3);
407
+ --sbb-shadow-color-hard-1-negative-dark: rgba(0, 0, 0, 0.3);
408
+ --sbb-shadow-color-hard-2-light: rgba(141, 141, 141, 0.2);
409
+ --sbb-shadow-color-hard-2-dark: rgba(0, 0, 0, 0.4);
410
+ --sbb-shadow-color-hard-2-negative-light: rgba(0, 0, 0, 0.4);
411
+ --sbb-shadow-color-hard-2-negative-dark: rgba(0, 0, 0, 0.4);
364
412
  /**
365
413
  * Original Value: 0px
366
414
  */
@@ -1056,12 +1104,162 @@ summary {
1056
1104
  * dependant or simply referencing other variables.
1057
1105
  * Due to technical limitations these variables are only provided as CSS variables.
1058
1106
  */
1059
- /* Font Color */
1060
- --sbb-font-default-color: var(--sbb-color-charcoal);
1107
+ /* Colors */
1108
+ --sbb-color-sky: var(--sbb-color-sky-light);
1109
+ --sbb-color-sky: light-dark(var(--sbb-color-sky-light), var(--sbb-color-sky-dark));
1110
+ --sbb-color-night: var(--sbb-color-night-light);
1111
+ --sbb-color-night: light-dark(var(--sbb-color-night-light), var(--sbb-color-night-dark));
1112
+ --sbb-color-violet: var(--sbb-color-violet-light);
1113
+ --sbb-color-violet: light-dark(var(--sbb-color-violet-light), var(--sbb-color-violet-dark));
1114
+ --sbb-color-pink: var(--sbb-color-pink-light);
1115
+ --sbb-color-pink: light-dark(var(--sbb-color-pink-light), var(--sbb-color-pink-dark));
1116
+ --sbb-color-autumn: var(--sbb-color-autumn-light);
1117
+ --sbb-color-autumn: light-dark(var(--sbb-color-autumn-light), var(--sbb-color-autumn-dark));
1118
+ --sbb-color-orange: var(--sbb-color-orange-light);
1119
+ --sbb-color-orange: light-dark(var(--sbb-color-orange-light), var(--sbb-color-orange-dark));
1120
+ --sbb-color-peach: var(--sbb-color-peach-light);
1121
+ --sbb-color-peach: light-dark(var(--sbb-color-peach-light), var(--sbb-color-peach-dark));
1122
+ --sbb-color-lemon: var(--sbb-color-lemon-light);
1123
+ --sbb-color-lemon: light-dark(var(--sbb-color-lemon-light), var(--sbb-color-lemon-dark));
1124
+ --sbb-color-brown: var(--sbb-color-brown-light);
1125
+ --sbb-color-brown: light-dark(var(--sbb-color-brown-light), var(--sbb-color-brown-dark));
1126
+ --sbb-color-green: var(--sbb-color-green-light);
1127
+ --sbb-color-green: light-dark(var(--sbb-color-green-light), var(--sbb-color-green-dark));
1128
+ --sbb-color-turquoise: var(--sbb-color-turquoise-light);
1129
+ --sbb-color-turquoise: light-dark(
1130
+ var(--sbb-color-turquoise-light),
1131
+ var(--sbb-color-turquoise-dark)
1132
+ );
1133
+ --sbb-color-royal: var(--sbb-color-royal-light);
1134
+ --sbb-color-royal: light-dark(var(--sbb-color-royal-light), var(--sbb-color-royal-dark));
1135
+ --sbb-color-royal85: var(--sbb-color-royal85-light);
1136
+ --sbb-color-royal85: light-dark(var(--sbb-color-royal85-light), var(--sbb-color-royal85-dark));
1137
+ --sbb-color-royal125: var(--sbb-color-royal125-light);
1138
+ --sbb-color-royal125: light-dark(var(--sbb-color-royal125-light), var(--sbb-color-royal125-dark));
1139
+ --sbb-color-royal150: var(--sbb-color-royal150-light);
1140
+ --sbb-color-royal150: light-dark(var(--sbb-color-royal150-light), var(--sbb-color-royal150-dark));
1141
+ --sbb-color-primary: var(--sbb-color-red);
1142
+ --sbb-color-primary85: var(--sbb-color-red85);
1143
+ /* @deprecated */
1144
+ --sbb-color-primary-85: var(--sbb-color-primary85);
1145
+ --sbb-color-primary125: var(--sbb-color-red125);
1146
+ /* @deprecated */
1147
+ --sbb-color-primary-125: var(--sbb-color-primary125);
1148
+ --sbb-color-primary150: var(--sbb-color-red150);
1149
+ /* @deprecated */
1150
+ --sbb-color-primary-150: var(--sbb-color-primary150);
1151
+ --sbb-color-error: var(--sbb-color-red125);
1152
+ --sbb-color-error: light-dark(var(--sbb-color-red125), var(--sbb-color-red85));
1153
+ --sbb-color-success: var(--sbb-color-green);
1154
+ --sbb-color-warning: var(--sbb-color-peach);
1155
+ --sbb-color-brand: var(--sbb-color-red);
1156
+ --sbb-background-color-1: var(--sbb-color-white);
1157
+ --sbb-background-color-1: light-dark(var(--sbb-color-white), var(--sbb-color-midnight));
1158
+ --sbb-background-color-1-inverted: var(--sbb-color-midnight);
1159
+ --sbb-background-color-1-inverted: light-dark(var(--sbb-color-midnight), var(--sbb-color-white));
1160
+ --sbb-background-color-1-negative: var(--sbb-color-midnight);
1161
+ --sbb-background-color-1-negative-inverted: var(--sbb-color-white);
1162
+ --sbb-background-color-2: var(--sbb-color-white);
1163
+ --sbb-background-color-2: light-dark(var(--sbb-color-white), var(--sbb-color-charcoal));
1164
+ --sbb-background-color-2-inverted: var(--sbb-color-charcoal);
1165
+ --sbb-background-color-2-inverted: light-dark(var(--sbb-color-charcoal), var(--sbb-color-white));
1166
+ --sbb-background-color-2-negative: var(--sbb-color-charcoal);
1167
+ --sbb-background-color-2-negative-inverted: var(--sbb-color-white);
1168
+ --sbb-background-color-3: var(--sbb-color-milk);
1169
+ --sbb-background-color-3: light-dark(var(--sbb-color-milk), var(--sbb-color-charcoal));
1170
+ --sbb-background-color-3-inverted: var(--sbb-color-charcoal);
1171
+ --sbb-background-color-3-inverted: light-dark(var(--sbb-color-charcoal), var(--sbb-color-milk));
1172
+ --sbb-background-color-3-negative: var(--sbb-color-charcoal);
1173
+ --sbb-background-color-3-negative-inverted: var(--sbb-color-milk);
1174
+ --sbb-background-color-4: var(--sbb-color-cloud);
1175
+ --sbb-background-color-4: light-dark(var(--sbb-color-cloud), var(--sbb-color-iron));
1176
+ --sbb-background-color-4-inverted: var(--sbb-color-iron);
1177
+ --sbb-background-color-4-inverted: light-dark(var(--sbb-color-iron), var(--sbb-color-cloud));
1178
+ --sbb-background-color-4-negative: var(--sbb-color-iron);
1179
+ --sbb-background-color-4-negative-inverted: var(--sbb-color-cloud);
1180
+ --sbb-color-1: var(--sbb-color-midnight);
1181
+ --sbb-color-1: light-dark(var(--sbb-color-midnight), var(--sbb-color-white));
1182
+ --sbb-color-1-inverted: var(--sbb-color-white);
1183
+ --sbb-color-1-inverted: light-dark(var(--sbb-color-white), var(--sbb-color-midnight));
1184
+ --sbb-color-1-negative: var(--sbb-color-white);
1185
+ --sbb-color-1-negative-inverted: var(--sbb-color-midnight);
1186
+ --sbb-color-2: var(--sbb-color-charcoal);
1187
+ --sbb-color-2: light-dark(var(--sbb-color-charcoal), var(--sbb-color-white));
1188
+ --sbb-color-2-inverted: var(--sbb-color-white);
1189
+ --sbb-color-2-inverted: light-dark(var(--sbb-color-white), var(--sbb-color-charcoal));
1190
+ --sbb-color-2-negative: var(--sbb-color-white);
1191
+ --sbb-color-2-negative-inverted: var(--sbb-color-charcoal);
1192
+ --sbb-color-3: var(--sbb-color-charcoal);
1193
+ --sbb-color-3: light-dark(var(--sbb-color-charcoal), var(--sbb-color-milk));
1194
+ --sbb-color-3-inverted: var(--sbb-color-milk);
1195
+ --sbb-color-3-inverted: light-dark(var(--sbb-color-milk), var(--sbb-color-charcoal));
1196
+ --sbb-color-3-negative: var(--sbb-color-milk);
1197
+ --sbb-color-3-negative-inverted: var(--sbb-color-charcoal);
1198
+ --sbb-color-4: var(--sbb-color-iron);
1199
+ --sbb-color-4: light-dark(var(--sbb-color-iron), var(--sbb-color-cloud));
1200
+ --sbb-color-4-inverted: var(--sbb-color-cloud);
1201
+ --sbb-color-4-inverted: light-dark(var(--sbb-color-cloud), var(--sbb-color-iron));
1202
+ --sbb-color-4-negative: var(--sbb-color-cloud);
1203
+ --sbb-color-4-negative-inverted: var(--sbb-color-iron);
1204
+ --sbb-color-5: var(--sbb-color-smoke);
1205
+ --sbb-border-color-1: var(--sbb-color-midnight);
1206
+ --sbb-border-color-1: light-dark(var(--sbb-color-midnight), var(--sbb-color-white));
1207
+ --sbb-border-color-1-inverted: var(--sbb-color-white);
1208
+ --sbb-border-color-1-inverted: light-dark(var(--sbb-color-white), var(--sbb-color-midnight));
1209
+ --sbb-border-color-1-negative: var(--sbb-color-white);
1210
+ --sbb-border-color-1-negative-inverted: var(--sbb-color-midnight);
1211
+ --sbb-border-color-2: var(--sbb-color-charcoal);
1212
+ --sbb-border-color-2: light-dark(var(--sbb-color-charcoal), var(--sbb-color-white));
1213
+ --sbb-border-color-2-inverted: var(--sbb-color-white);
1214
+ --sbb-border-color-2-inverted: light-dark(var(--sbb-color-white), var(--sbb-color-charcoal));
1215
+ --sbb-border-color-2-negative: var(--sbb-color-white);
1216
+ --sbb-border-color-2-negative-inverted: var(--sbb-color-charcoal);
1217
+ --sbb-border-color-3: var(--sbb-color-charcoal);
1218
+ --sbb-border-color-3: light-dark(var(--sbb-color-charcoal), var(--sbb-color-milk));
1219
+ --sbb-border-color-3-inverted: var(--sbb-color-milk);
1220
+ --sbb-border-color-3-inverted: light-dark(var(--sbb-color-milk), var(--sbb-color-charcoal));
1221
+ --sbb-border-color-3-negative: var(--sbb-color-milk);
1222
+ --sbb-border-color-3-negative-inverted: var(--sbb-color-charcoal);
1223
+ --sbb-border-color-4: var(--sbb-color-iron);
1224
+ --sbb-border-color-4: light-dark(var(--sbb-color-iron), var(--sbb-color-cloud));
1225
+ --sbb-border-color-4-inverted: var(--sbb-color-cloud);
1226
+ --sbb-border-color-4-inverted: light-dark(var(--sbb-color-cloud), var(--sbb-color-iron));
1227
+ --sbb-border-color-4-negative: var(--sbb-color-cloud);
1228
+ --sbb-border-color-4-negative-inverted: var(--sbb-color-iron);
1229
+ --sbb-border-color-5: var(--sbb-color-smoke);
1230
+ --sbb-shadow-color-soft-1: color-mix(in srgb, var(--sbb-color-smoke) 5%, transparent);
1231
+ --sbb-shadow-color-soft-1: light-dark(
1232
+ color-mix(in srgb, var(--sbb-color-smoke) 5%, transparent),
1233
+ color-mix(in srgb, var(--sbb-color-black) 15%, transparent)
1234
+ );
1235
+ --sbb-shadow-color-soft-2: color-mix(in srgb, var(--sbb-color-smoke) 10%, transparent);
1236
+ --sbb-shadow-color-soft-2: light-dark(
1237
+ color-mix(in srgb, var(--sbb-color-smoke) 10%, transparent),
1238
+ color-mix(in srgb, var(--sbb-color-black) 20%, transparent)
1239
+ );
1240
+ --sbb-shadow-color-soft-1-negative: color-mix(in srgb, var(--sbb-color-black) 15%, transparent);
1241
+ --sbb-shadow-color-soft-2-negative: color-mix(in srgb, var(--sbb-color-black) 20%, transparent);
1242
+ --sbb-shadow-color-hard-1: color-mix(in srgb, var(--sbb-color-smoke) 10%, transparent);
1243
+ --sbb-shadow-color-hard-1: light-dark(
1244
+ color-mix(in srgb, var(--sbb-color-smoke) 10%, transparent),
1245
+ color-mix(in srgb, var(--sbb-color-black) 30%, transparent)
1246
+ );
1247
+ --sbb-shadow-color-hard-2: color-mix(in srgb, var(--sbb-color-smoke) 20%, transparent);
1248
+ --sbb-shadow-color-hard-2: light-dark(
1249
+ color-mix(in srgb, var(--sbb-color-smoke) 20%, transparent),
1250
+ color-mix(in srgb, var(--sbb-color-black) 40%, transparent)
1251
+ );
1252
+ --sbb-shadow-color-hard-1-negative: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);
1253
+ --sbb-shadow-color-hard-2-negative: color-mix(in srgb, var(--sbb-color-black) 40%, transparent);
1254
+ --sbb-font-default-color: var(--sbb-color-2);
1061
1255
  /* Focus outline */
1062
1256
  --sbb-focus-outline-color-default: var(--sbb-color-black);
1063
1257
  --sbb-focus-outline-color-dark: var(--sbb-color-white);
1064
1258
  --sbb-focus-outline-color: var(--sbb-focus-outline-color-default);
1259
+ --sbb-focus-outline-color: light-dark(
1260
+ var(--sbb-focus-outline-color-default),
1261
+ var(--sbb-focus-outline-color-dark)
1262
+ );
1065
1263
  --sbb-focus-outline-width: var(--sbb-border-width-1x);
1066
1264
  /* Title */
1067
1265
  --sbb-font-size-title-1: var(--sbb-typo-scale-2-5x);
@@ -1308,6 +1506,18 @@ summary {
1308
1506
  font-display: swap;
1309
1507
  font-weight: 300;
1310
1508
  }
1509
+ .sbb-dark {
1510
+ color-scheme: dark;
1511
+ }
1512
+
1513
+ .sbb-light {
1514
+ color-scheme: light;
1515
+ }
1516
+
1517
+ .sbb-light-dark {
1518
+ color-scheme: light dark;
1519
+ }
1520
+
1311
1521
  html {
1312
1522
  font-family: var(--sbb-typo-font-family);
1313
1523
  font-weight: normal;
@@ -1315,11 +1525,12 @@ html {
1315
1525
  letter-spacing: var(--sbb-typo-letter-spacing-body-text);
1316
1526
  font-size: var(--sbb-text-font-size);
1317
1527
  color: var(--sbb-font-default-color);
1528
+ background-color: var(--sbb-background-color-1);
1318
1529
  }
1319
1530
 
1320
1531
  ::placeholder {
1321
- color: var(--sbb-color-metal);
1322
- -webkit-text-fill-color: var(--sbb-color-metal);
1532
+ color: var(--sbb-color-5);
1533
+ -webkit-text-fill-color: var(--sbb-color-5);
1323
1534
  opacity: 1;
1324
1535
  }
1325
1536
 
@@ -1351,8 +1562,8 @@ html {
1351
1562
  line-height: var(--sbb-typo-line-height-body-text) !important;
1352
1563
  }
1353
1564
  :is(sbb-form-field, sbb-timetable-form-field) :where(input, select, textarea, sbb-select, sbb-date-input, sbb-time-input)::placeholder {
1354
- color: var(--sbb-color-metal);
1355
- -webkit-text-fill-color: var(--sbb-color-metal);
1565
+ color: var(--sbb-color-5);
1566
+ -webkit-text-fill-color: var(--sbb-color-5);
1356
1567
  opacity: 1;
1357
1568
  }
1358
1569
  :is(sbb-form-field, sbb-timetable-form-field)[floating-label] :where(input, select, textarea, sbb-select)::placeholder, :is(sbb-form-field, sbb-timetable-form-field)[floating-label] :where(sbb-date-input, sbb-time-input)::after {
@@ -1367,7 +1578,9 @@ html {
1367
1578
  }
1368
1579
  :is(sbb-form-field, sbb-timetable-form-field):not([floating-label]) :where(input, select, textarea, sbb-select):disabled::placeholder {
1369
1580
  color: var(--sbb-color-granite);
1581
+ color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
1370
1582
  -webkit-text-fill-color: var(--sbb-color-granite);
1583
+ -webkit-text-fill-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
1371
1584
  }
1372
1585
  :is(sbb-form-field, sbb-timetable-form-field) :where(select) {
1373
1586
  vertical-align: middle;
@@ -1384,8 +1597,16 @@ html {
1384
1597
  --sbb-scrollbar-thumb-width: 0.125rem;
1385
1598
  --sbb-scrollbar-thumb-width-hover: 0.25rem;
1386
1599
  --sbb-scrollbar-width-firefox: thin;
1387
- --sbb-scrollbar-color: var(--sbb-color-black-alpha-30);
1388
- --sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);
1600
+ --sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);
1601
+ --sbb-scrollbar-color: light-dark(
1602
+ color-mix(in srgb, var(--sbb-color-black) 30%, transparent),
1603
+ color-mix(in srgb, var(--sbb-color-white) 30%, transparent)
1604
+ );
1605
+ --sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-black) 60%, transparent);
1606
+ --sbb-scrollbar-color-hover: light-dark(
1607
+ color-mix(in srgb, var(--sbb-color-black) 60%, transparent),
1608
+ color-mix(in srgb, var(--sbb-color-white) 60%, transparent)
1609
+ );
1389
1610
  --sbb-scrollbar-track-color: transparent;
1390
1611
  --sbb-scrollbar-width: var(--sbb-spacing-fixed-3x);
1391
1612
  }
@@ -1430,8 +1651,8 @@ html {
1430
1651
  --sbb-scrollbar-thumb-width: 0.125rem;
1431
1652
  --sbb-scrollbar-thumb-width-hover: 0.25rem;
1432
1653
  --sbb-scrollbar-width-firefox: thin;
1433
- --sbb-scrollbar-color: var(--sbb-color-white-alpha-30);
1434
- --sbb-scrollbar-color-hover: var(--sbb-color-white-alpha-60);
1654
+ --sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-white) 30%, transparent);
1655
+ --sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-white) 60%, transparent);
1435
1656
  --sbb-scrollbar-track-color: transparent;
1436
1657
  --sbb-scrollbar-width: var(--sbb-spacing-fixed-3x);
1437
1658
  }
@@ -1466,15 +1687,15 @@ html {
1466
1687
  :is(:state(interacted),[state--interacted]):invalid,
1467
1688
  .ng-touched.ng-invalid,
1468
1689
  .sbb-invalid)), :is(.ng-submitted, .sbb-show-errors) :is(sbb-form-field, sbb-timetable-form-field):has(:is(:invalid, .ng-invalid)) {
1469
- --sbb-form-field-border-color: var(--sbb-color-red125);
1470
- --sbb-form-field-text-color: var(--sbb-color-red125);
1690
+ --sbb-form-field-border-color: var(--sbb-color-error);
1691
+ --sbb-form-field-text-color: var(--sbb-color-error);
1471
1692
  }
1472
1693
  :is(sbb-form-field, sbb-timetable-form-field):has(:is(:is(input, textarea, select):user-invalid,
1473
1694
  :is(:state(interacted),[state--interacted]):invalid,
1474
1695
  .ng-touched.ng-invalid,
1475
1696
  .sbb-invalid))[negative], :is(.ng-submitted, .sbb-show-errors) :is(sbb-form-field, sbb-timetable-form-field):has(:is(:invalid, .ng-invalid))[negative] {
1476
- --sbb-form-field-border-color: var(--sbb-color-red-mode-dark);
1477
- --sbb-form-field-text-color: var(--sbb-color-red-mode-dark);
1697
+ --sbb-form-field-border-color: var(--sbb-color-red85);
1698
+ --sbb-form-field-text-color: var(--sbb-color-red85);
1478
1699
  }
1479
1700
  @media (forced-colors: active) {
1480
1701
  :is(sbb-form-field, sbb-timetable-form-field):has(:is(:is(input, textarea, select):user-invalid,
@@ -1497,7 +1718,8 @@ sbb-overlay,
1497
1718
  sbb-popover,
1498
1719
  sbb-select,
1499
1720
  sbb-skiplink-list,
1500
- sbb-toast):not(:defined) {
1721
+ sbb-toast,
1722
+ sbb-tooltip):not(:defined) {
1501
1723
  display: none;
1502
1724
  }
1503
1725
 
@@ -1509,7 +1731,8 @@ sbb-menu,
1509
1731
  sbb-navigation,
1510
1732
  sbb-overlay,
1511
1733
  sbb-popover,
1512
- sbb-toast) {
1734
+ sbb-toast,
1735
+ sbb-tooltip) {
1513
1736
  margin: 0;
1514
1737
  padding: 0;
1515
1738
  border: none;
@@ -1541,10 +1764,12 @@ sbb-breadcrumb-group:not(:defined) {
1541
1764
  padding-inline: var(--sbb-spacing-fixed-4x);
1542
1765
  gap: var(--sbb-spacing-fixed-1x);
1543
1766
  align-items: baseline;
1767
+ color: var(--sbb-color-1);
1544
1768
  }
1545
1769
  .sbb-header-info strong + * {
1546
1770
  font-size: var(--sbb-font-size-text-xxs);
1547
1771
  color: var(--sbb-color-granite);
1772
+ color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
1548
1773
  }
1549
1774
 
1550
1775
  sbb-title + p {
@@ -1738,14 +1963,14 @@ sbb-toggle:has(:focus-visible) {
1738
1963
  }
1739
1964
 
1740
1965
  sbb-dialog[negative] sbb-dialog-actions {
1741
- --sbb-dialog-actions-border-color: var(--sbb-color-iron);
1966
+ --sbb-dialog-actions-border-color: var(--sbb-background-color-4-negative);
1742
1967
  }
1743
1968
  sbb-dialog:is(:state(overflows),[state--overflows]) sbb-dialog-actions {
1744
1969
  --sbb-dialog-actions-border-color: transparent;
1745
- box-shadow: var(--sbb-shadow-elevation-level-9-shadow-2-offset-x) var(--sbb-shadow-elevation-level-9-shadow-2-offset-y) var(--sbb-shadow-elevation-level-9-shadow-2-blur) var(--sbb-shadow-elevation-level-9-shadow-2-spread) var(--sbb-shadow-elevation-level-9-soft-2-color), var(--sbb-shadow-elevation-level-9-shadow-1-offset-x) var(--sbb-shadow-elevation-level-9-shadow-1-offset-y) var(--sbb-shadow-elevation-level-9-shadow-1-blur) var(--sbb-shadow-elevation-level-9-shadow-1-spread) var(--sbb-shadow-elevation-level-9-soft-1-color);
1970
+ box-shadow: var(--sbb-shadow-elevation-level-9-shadow-2-offset-x) var(--sbb-shadow-elevation-level-9-shadow-2-offset-y) var(--sbb-shadow-elevation-level-9-shadow-2-blur) var(--sbb-shadow-elevation-level-9-shadow-2-spread) var(--sbb-shadow-color-soft-2), var(--sbb-shadow-elevation-level-9-shadow-1-offset-x) var(--sbb-shadow-elevation-level-9-shadow-1-offset-y) var(--sbb-shadow-elevation-level-9-shadow-1-blur) var(--sbb-shadow-elevation-level-9-shadow-1-spread) var(--sbb-shadow-color-soft-1);
1746
1971
  }
1747
1972
  sbb-dialog[negative]:is(:state(overflows),[state--overflows]) sbb-dialog-actions {
1748
- box-shadow: var(--sbb-shadow-elevation-level-9-shadow-2-offset-x) var(--sbb-shadow-elevation-level-9-shadow-2-offset-y) var(--sbb-shadow-elevation-level-9-shadow-2-blur) var(--sbb-shadow-elevation-level-9-shadow-2-spread) var(--sbb-shadow-elevation-level-9-soft-negative-2-color), var(--sbb-shadow-elevation-level-9-shadow-1-offset-x) var(--sbb-shadow-elevation-level-9-shadow-1-offset-y) var(--sbb-shadow-elevation-level-9-shadow-1-blur) var(--sbb-shadow-elevation-level-9-shadow-1-spread) var(--sbb-shadow-elevation-level-9-soft-negative-1-color);
1973
+ box-shadow: var(--sbb-shadow-elevation-level-9-shadow-2-offset-x) var(--sbb-shadow-elevation-level-9-shadow-2-offset-y) var(--sbb-shadow-elevation-level-9-shadow-2-blur) var(--sbb-shadow-elevation-level-9-shadow-2-spread) var(--sbb-shadow-color-soft-2-negative), var(--sbb-shadow-elevation-level-9-shadow-1-offset-x) var(--sbb-shadow-elevation-level-9-shadow-1-offset-y) var(--sbb-shadow-elevation-level-9-shadow-1-blur) var(--sbb-shadow-elevation-level-9-shadow-1-spread) var(--sbb-shadow-color-soft-1-negative);
1749
1974
  }
1750
1975
 
1751
1976
  sbb-dialog:has(> sbb-dialog-title) > sbb-dialog-content {
@@ -1779,10 +2004,23 @@ sbb-notification:has(sbb-title)[size=s] {
1779
2004
  sbb-status:has(sbb-title) {
1780
2005
  --sbb-status-gap: var(--sbb-spacing-responsive-xxxs);
1781
2006
  --_sbb-status-text-color-override: var(--sbb-color-granite);
2007
+ --_sbb-status-text-color-override: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
1782
2008
  --_sbb-status-title-font-size: var(--sbb-font-size-title-5);
1783
2009
  --_sbb-status-title-line-height: var(--sbb-typo-line-height-titles);
1784
2010
  }
1785
2011
 
2012
+ .sbb-overlay-outlet {
2013
+ position: fixed;
2014
+ inset: 0;
2015
+ pointer-events: none;
2016
+ }
2017
+
2018
+ .sbb-options-nowrap {
2019
+ --sbb-option-text-overflow: ellipsis;
2020
+ --sbb-option-overflow: hidden;
2021
+ --sbb-option-white-space: nowrap;
2022
+ }
2023
+
1786
2024
  sub {
1787
2025
  bottom: -0.36em;
1788
2026
  }
@@ -1841,6 +2079,7 @@ sup {
1841
2079
  font-size: var(--sbb-text-font-size);
1842
2080
  padding: 0;
1843
2081
  color: var(--sbb-color-granite);
2082
+ color: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
1844
2083
  }
1845
2084
 
1846
2085
  .sbb-screen-reader-only {
@@ -1883,8 +2122,8 @@ sup {
1883
2122
  justify-content: center;
1884
2123
  padding-inline: var(--sbb-spacing-fixed-1x);
1885
2124
  border-radius: var(--sbb-border-radius-infinity);
1886
- background-color: var(--sbb-color-red);
1887
- color: var(--sbb-color-white);
2125
+ background-color: var(--sbb-color-primary);
2126
+ color: var(--sbb-color-1-negative);
1888
2127
  min-width: var(--sbb-spacing-fixed-4x);
1889
2128
  max-height: var(--sbb-spacing-fixed-4x);
1890
2129
  content: attr(sbb-badge);
@@ -1929,6 +2168,8 @@ sup {
1929
2168
  grid-row: 2;
1930
2169
  grid-column: 1;
1931
2170
  padding-block-start: var(--sbb-spacing-fixed-4x);
2171
+ color: var(--sbb-color-granite);
2172
+ color: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
1932
2173
  --sbb-text-font-size: var(--sbb-font-size-text-xs);
1933
2174
  font-family: var(--sbb-typo-font-family);
1934
2175
  font-weight: normal;
@@ -1940,6 +2181,7 @@ sup {
1940
2181
  .sbb-figure-overlap-start-end,
1941
2182
  .sbb-figure-overlap-end-start,
1942
2183
  .sbb-figure-overlap-end-end) {
2184
+ color-scheme: only light;
1943
2185
  position: relative;
1944
2186
  order: 1;
1945
2187
  grid-row: 1;
@@ -2115,6 +2357,7 @@ sup {
2115
2357
  --sbb-step-list-padding-block: var(--sbb-spacing-fixed-3x);
2116
2358
  --sbb-step-list-vertical-gap: var(--sbb-spacing-fixed-1x);
2117
2359
  --sbb-step-list-border-radius: var(--sbb-border-radius-4x);
2360
+ --sbb-step-list-color: var(--sbb-color-2);
2118
2361
  --sbb-step-list-text-to-marker-block-offset: calc(
2119
2362
  0.5 *
2120
2363
  (
@@ -2126,7 +2369,7 @@ sup {
2126
2369
  margin: 0;
2127
2370
  padding: 0;
2128
2371
  counter-reset: steps;
2129
- color: var(--sbb-color-iron);
2372
+ color: var(--sbb-step-list-color);
2130
2373
  }
2131
2374
  .sbb-step-list:where(.sbb-text-s) {
2132
2375
  --sbb-step-list-padding-block: var(--sbb-spacing-fixed-4x);
@@ -2142,7 +2385,7 @@ sup {
2142
2385
  .sbb-step-list > li {
2143
2386
  position: relative;
2144
2387
  counter-increment: steps;
2145
- background-color: var(--sbb-color-milk);
2388
+ background-color: var(--sbb-background-color-3);
2146
2389
  padding-block: calc(var(--sbb-step-list-padding-block) + var(--sbb-step-list-text-to-marker-block-offset)) var(--sbb-step-list-padding-block);
2147
2390
  padding-inline: calc(var(--sbb-step-list-padding-inline) + var(--sbb-step-list-dimensions) + var(--sbb-step-list-to-text-gap)) var(--sbb-step-list-padding-inline);
2148
2391
  min-height: calc(var(--sbb-step-list-dimensions) + 2 * var(--sbb-step-list-padding-block));
@@ -2164,8 +2407,9 @@ sup {
2164
2407
  width: var(--sbb-step-list-dimensions);
2165
2408
  margin-block-start: calc(-1 * var(--sbb-step-list-text-to-marker-block-offset));
2166
2409
  inset-inline-start: var(--sbb-step-list-padding-inline);
2167
- color: var(--sbb-color-charcoal);
2410
+ color: var(--sbb-step-list-color);
2168
2411
  border: var(--sbb-border-width-1x) solid var(--sbb-color-cement);
2412
+ border: var(--sbb-border-width-1x) solid light-dark(var(--sbb-color-cement), var(--sbb-color-smoke));
2169
2413
  border-radius: 50%;
2170
2414
  }
2171
2415
  .sbb-step-list > li + li {
@@ -2322,8 +2566,16 @@ sup {
2322
2566
  --sbb-scrollbar-thumb-width: 0.125rem;
2323
2567
  --sbb-scrollbar-thumb-width-hover: 0.25rem;
2324
2568
  --sbb-scrollbar-width-firefox: thin;
2325
- --sbb-scrollbar-color: var(--sbb-color-black-alpha-30);
2326
- --sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);
2569
+ --sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);
2570
+ --sbb-scrollbar-color: light-dark(
2571
+ color-mix(in srgb, var(--sbb-color-black) 30%, transparent),
2572
+ color-mix(in srgb, var(--sbb-color-white) 30%, transparent)
2573
+ );
2574
+ --sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-black) 60%, transparent);
2575
+ --sbb-scrollbar-color-hover: light-dark(
2576
+ color-mix(in srgb, var(--sbb-color-black) 60%, transparent),
2577
+ color-mix(in srgb, var(--sbb-color-white) 60%, transparent)
2578
+ );
2327
2579
  --sbb-scrollbar-track-color: transparent;
2328
2580
  }
2329
2581
 
@@ -2331,8 +2583,8 @@ sup {
2331
2583
  --sbb-scrollbar-thumb-width: 0.125rem;
2332
2584
  --sbb-scrollbar-thumb-width-hover: 0.25rem;
2333
2585
  --sbb-scrollbar-width-firefox: thin;
2334
- --sbb-scrollbar-color: var(--sbb-color-white-alpha-30);
2335
- --sbb-scrollbar-color-hover: var(--sbb-color-white-alpha-60);
2586
+ --sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-white) 30%, transparent);
2587
+ --sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-white) 60%, transparent);
2336
2588
  --sbb-scrollbar-track-color: transparent;
2337
2589
  }
2338
2590
 
@@ -2340,8 +2592,16 @@ sup {
2340
2592
  --sbb-scrollbar-thumb-width: 0.5rem;
2341
2593
  --sbb-scrollbar-thumb-width-hover: var(--sbb-scrollbar-thumb-width);
2342
2594
  --sbb-scrollbar-width-firefox: auto;
2343
- --sbb-scrollbar-color: var(--sbb-color-black-alpha-30);
2344
- --sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);
2595
+ --sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);
2596
+ --sbb-scrollbar-color: light-dark(
2597
+ color-mix(in srgb, var(--sbb-color-black) 30%, transparent),
2598
+ color-mix(in srgb, var(--sbb-color-white) 30%, transparent)
2599
+ );
2600
+ --sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-black) 60%, transparent);
2601
+ --sbb-scrollbar-color-hover: light-dark(
2602
+ color-mix(in srgb, var(--sbb-color-black) 60%, transparent),
2603
+ color-mix(in srgb, var(--sbb-color-white) 60%, transparent)
2604
+ );
2345
2605
  --sbb-scrollbar-track-color: transparent;
2346
2606
  }
2347
2607
 
@@ -2349,8 +2609,8 @@ sup {
2349
2609
  --sbb-scrollbar-thumb-width: 0.5rem;
2350
2610
  --sbb-scrollbar-thumb-width-hover: var(--sbb-scrollbar-thumb-width);
2351
2611
  --sbb-scrollbar-width-firefox: auto;
2352
- --sbb-scrollbar-color: var(--sbb-color-white-alpha-30);
2353
- --sbb-scrollbar-color-hover: var(--sbb-color-white-alpha-60);
2612
+ --sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-white) 30%, transparent);
2613
+ --sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-white) 60%, transparent);
2354
2614
  --sbb-scrollbar-track-color: transparent;
2355
2615
  }
2356
2616
 
@@ -2358,36 +2618,52 @@ sup {
2358
2618
  --sbb-scrollbar-thumb-width: 0.125rem;
2359
2619
  --sbb-scrollbar-thumb-width-hover: 0.25rem;
2360
2620
  --sbb-scrollbar-width-firefox: thin;
2361
- --sbb-scrollbar-color: var(--sbb-color-black-alpha-30);
2362
- --sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);
2363
- --sbb-scrollbar-track-color: var(--sbb-color-cloud);
2621
+ --sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);
2622
+ --sbb-scrollbar-color: light-dark(
2623
+ color-mix(in srgb, var(--sbb-color-black) 30%, transparent),
2624
+ color-mix(in srgb, var(--sbb-color-white) 30%, transparent)
2625
+ );
2626
+ --sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-black) 60%, transparent);
2627
+ --sbb-scrollbar-color-hover: light-dark(
2628
+ color-mix(in srgb, var(--sbb-color-black) 60%, transparent),
2629
+ color-mix(in srgb, var(--sbb-color-white) 60%, transparent)
2630
+ );
2631
+ --sbb-scrollbar-track-color: var(--sbb-background-color-4);
2364
2632
  }
2365
2633
 
2366
2634
  .sbb-scrollbar-negative-track-visible {
2367
2635
  --sbb-scrollbar-thumb-width: 0.125rem;
2368
2636
  --sbb-scrollbar-thumb-width-hover: 0.25rem;
2369
2637
  --sbb-scrollbar-width-firefox: thin;
2370
- --sbb-scrollbar-color: var(--sbb-color-white-alpha-30);
2371
- --sbb-scrollbar-color-hover: var(--sbb-color-white-alpha-60);
2372
- --sbb-scrollbar-track-color: var(--sbb-color-iron);
2638
+ --sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-white) 30%, transparent);
2639
+ --sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-white) 60%, transparent);
2640
+ --sbb-scrollbar-track-color: var(--sbb-background-color-4-negative);
2373
2641
  }
2374
2642
 
2375
2643
  .sbb-scrollbar-thick-track-visible {
2376
2644
  --sbb-scrollbar-thumb-width: 0.5rem;
2377
2645
  --sbb-scrollbar-thumb-width-hover: var(--sbb-scrollbar-thumb-width);
2378
2646
  --sbb-scrollbar-width-firefox: auto;
2379
- --sbb-scrollbar-color: var(--sbb-color-black-alpha-30);
2380
- --sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);
2381
- --sbb-scrollbar-track-color: var(--sbb-color-cloud);
2647
+ --sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);
2648
+ --sbb-scrollbar-color: light-dark(
2649
+ color-mix(in srgb, var(--sbb-color-black) 30%, transparent),
2650
+ color-mix(in srgb, var(--sbb-color-white) 30%, transparent)
2651
+ );
2652
+ --sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-black) 60%, transparent);
2653
+ --sbb-scrollbar-color-hover: light-dark(
2654
+ color-mix(in srgb, var(--sbb-color-black) 60%, transparent),
2655
+ color-mix(in srgb, var(--sbb-color-white) 60%, transparent)
2656
+ );
2657
+ --sbb-scrollbar-track-color: var(--sbb-background-color-4);
2382
2658
  }
2383
2659
 
2384
2660
  .sbb-scrollbar-thick-negative-track-visible {
2385
2661
  --sbb-scrollbar-thumb-width: 0.5rem;
2386
2662
  --sbb-scrollbar-thumb-width-hover: var(--sbb-scrollbar-thumb-width);
2387
2663
  --sbb-scrollbar-width-firefox: auto;
2388
- --sbb-scrollbar-color: var(--sbb-color-white-alpha-30);
2389
- --sbb-scrollbar-color-hover: var(--sbb-color-white-alpha-60);
2390
- --sbb-scrollbar-track-color: var(--sbb-color-iron);
2664
+ --sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-white) 30%, transparent);
2665
+ --sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-white) 60%, transparent);
2666
+ --sbb-scrollbar-track-color: var(--sbb-background-color-4-negative);
2391
2667
  }
2392
2668
 
2393
2669
  .sbb-table,
@@ -2411,10 +2687,12 @@ sup {
2411
2687
  .sbb-table-xs {
2412
2688
  --sbb-table-border: var(--sbb-border-width-1x) solid var(--sbb-table-border-color);
2413
2689
  --sbb-table-border-color: var(--sbb-color-cloud);
2414
- --sbb-table-background-color: var(--sbb-color-white);
2415
- --sbb-table-row-striped-color: var(--sbb-color-milk);
2416
- --sbb-table-color: inherit;
2690
+ --sbb-table-border-color: light-dark(var(--sbb-color-cloud), var(--sbb-color-anthracite));
2691
+ --sbb-table-background-color: var(--sbb-background-color-1);
2692
+ --sbb-table-row-striped-color: var(--sbb-background-color-3);
2693
+ --sbb-table-color: var(--sbb-color-1);
2417
2694
  --sbb-table-caption-color: var(--sbb-color-granite);
2695
+ --sbb-table-caption-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
2418
2696
  --sbb-table-caption-margin-block-start: var(--sbb-spacing-fixed-4x);
2419
2697
  --sbb-table-sticky-shadow-width: 3rem;
2420
2698
  --sbb-table-sticky-shadow-transition-easing: var(--sbb-animation-easing);
@@ -2491,7 +2769,9 @@ sup {
2491
2769
  line-height: var(--sbb-typo-line-height-body-text);
2492
2770
  letter-spacing: var(--sbb-typo-letter-spacing-body-text);
2493
2771
  font-size: var(--sbb-text-font-size);
2494
- color: var(--sbb-table-caption-color, var(--sbb-color-granite));
2772
+ --sbb-table-caption-color-fallback: var(--sbb-color-granite);
2773
+ --sbb-table-caption-color-fallback: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
2774
+ color: var(--sbb-table-caption-color, var(--sbb-table-caption-color-fallback));
2495
2775
  margin-block-start: var(--sbb-table-caption-margin-block-start, var(--sbb-spacing-fixed-4x));
2496
2776
  text-align: left;
2497
2777
  }
@@ -2536,9 +2816,9 @@ sup {
2536
2816
  sbb-table-wrapper[negative] .sbb-table,
2537
2817
  .sbb-table--negative {
2538
2818
  --sbb-table-border-color: var(--sbb-color-anthracite);
2539
- --sbb-table-background-color: var(--sbb-color-midnight);
2540
- --sbb-table-color: var(--sbb-color-white);
2541
- --sbb-table-row-striped-color: var(--sbb-color-charcoal);
2819
+ --sbb-table-background-color: var(--sbb-background-color-1-negative);
2820
+ --sbb-table-color: var(--sbb-color-1-negative);
2821
+ --sbb-table-row-striped-color: var(--sbb-background-color-3-negative);
2542
2822
  --sbb-table-caption-color: var(--sbb-color-cement);
2543
2823
  }
2544
2824
 
@@ -2551,7 +2831,7 @@ sbb-table-wrapper[negative] .sbb-table,
2551
2831
  }
2552
2832
 
2553
2833
  .sbb-table--theme-iron {
2554
- --sbb-table-cell-color: var(--sbb-color-iron);
2834
+ --sbb-table-cell-color: var(--sbb-color-4);
2555
2835
  }
2556
2836
  .sbb-table--theme-iron tbody > tr > td {
2557
2837
  color: var(--sbb-table-cell-color);
@@ -2604,7 +2884,9 @@ sbb-table-wrapper[negative] .sbb-table,
2604
2884
  line-height: var(--sbb-typo-line-height-body-text);
2605
2885
  letter-spacing: var(--sbb-typo-letter-spacing-body-text);
2606
2886
  font-size: var(--sbb-text-font-size);
2607
- color: var(--sbb-table-caption-color, var(--sbb-color-granite));
2887
+ --sbb-table-caption-color-fallback: var(--sbb-color-granite);
2888
+ --sbb-table-caption-color-fallback: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
2889
+ color: var(--sbb-table-caption-color, var(--sbb-table-caption-color-fallback));
2608
2890
  margin-block-start: var(--sbb-table-caption-margin-block-start, var(--sbb-spacing-fixed-4x));
2609
2891
  text-align: left;
2610
2892
  }
@@ -2675,7 +2957,7 @@ html.sbb-lean .sbb-table:not(.sbb-table-xs, .sbb-table-m) tbody > tr > td {
2675
2957
  border-radius: var(--sbb-border-radius-4x);
2676
2958
  padding-block: var(--sbb-spacing-fixed-10x) var(--sbb-spacing-responsive-l);
2677
2959
  padding-inline: var(--sbb-spacing-fixed-5x);
2678
- background: linear-gradient(to bottom, var(--sbb-color-red) 0 11.125rem, var(--sbb-color-milk) 11.125rem 100%);
2960
+ background: linear-gradient(to bottom, var(--sbb-color-primary) 0 11.125rem, var(--sbb-background-color-3) 11.125rem 100%);
2679
2961
  }
2680
2962
  @media (max-width: calc(63.9375rem)) {
2681
2963
  .sbb-timetable-form:has(sbb-signet) {
@@ -2712,7 +2994,7 @@ sbb-timetable-form .sbb-timetable-form-block {
2712
2994
  sbb-timetable-form .sbb-timetable-form-block::after {
2713
2995
  content: "";
2714
2996
  position: absolute;
2715
- border-block-end: var(--sbb-border-width-1x) solid var(--sbb-color-cloud);
2997
+ border-block-end: var(--sbb-border-width-1x) solid var(--sbb-border-color-4-inverted);
2716
2998
  inset-inline: var(--sbb-form-field-padding-inline);
2717
2999
  inset-block-end: 0;
2718
3000
  }
@@ -2728,7 +3010,7 @@ sbb-timetable-form .sbb-timetable-form-block sbb-datepicker-toggle {
2728
3010
  sbb-timetable-form .sbb-timetable-form-mobile-block::after {
2729
3011
  content: "";
2730
3012
  position: absolute;
2731
- border-block-end: var(--sbb-border-width-1x) solid var(--sbb-color-cloud);
3013
+ border-block-end: var(--sbb-border-width-1x) solid var(--sbb-border-color-4-inverted);
2732
3014
  inset-inline: var(--sbb-form-field-padding-inline);
2733
3015
  inset-block-end: 0;
2734
3016
  }