@sbb-esta/lyne-elements 3.7.0 → 3.8.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 (376) 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/config/config.d.ts +6 -0
  33. package/core/config/config.d.ts.map +1 -1
  34. package/core/controllers/media-matchers-controller.d.ts +29 -0
  35. package/core/controllers/media-matchers-controller.d.ts.map +1 -1
  36. package/core/controllers/media-matchers-controller.js +73 -23
  37. package/core/controllers.js +16 -14
  38. package/core/dom/contains-pierce-shadow-dom.d.ts +3 -0
  39. package/core/dom/contains-pierce-shadow-dom.d.ts.map +1 -0
  40. package/core/dom/contains-pierce-shadow-dom.js +12 -0
  41. package/core/dom/queue-dom-content-loaded.d.ts +5 -0
  42. package/core/dom/queue-dom-content-loaded.d.ts.map +1 -0
  43. package/core/dom/queue-dom-content-loaded.js +7 -0
  44. package/core/dom/set-or-remove-attribute.d.ts +14 -0
  45. package/core/dom/set-or-remove-attribute.d.ts.map +1 -1
  46. package/core/dom/set-or-remove-attribute.js +11 -3
  47. package/core/dom.d.ts +2 -0
  48. package/core/dom.d.ts.map +1 -1
  49. package/core/dom.js +28 -22
  50. package/core/images.d.ts +4 -0
  51. package/core/images.d.ts.map +1 -1
  52. package/core/images.js +12 -12
  53. package/core/mixins.js +10 -10
  54. package/core/overlay/overlay-outside-pointer-event-listener.d.ts +26 -0
  55. package/core/overlay/overlay-outside-pointer-event-listener.d.ts.map +1 -0
  56. package/core/overlay/overlay-outside-pointer-event-listener.js +37 -0
  57. package/core/overlay.d.ts +1 -0
  58. package/core/overlay.d.ts.map +1 -1
  59. package/core/overlay.js +14 -11
  60. package/core/styles/core.scss +39 -12
  61. package/core/styles/mixins/badge.scss +2 -2
  62. package/core/styles/mixins/buttons.scss +14 -14
  63. package/core/styles/mixins/card.scss +9 -6
  64. package/core/styles/mixins/chip.scss +8 -8
  65. package/core/styles/mixins/image.scss +3 -0
  66. package/core/styles/mixins/link.scss +12 -7
  67. package/core/styles/mixins/lists.scss +6 -4
  68. package/core/styles/mixins/overlay.scss +6 -3
  69. package/core/styles/mixins/panel.scss +3 -3
  70. package/core/styles/mixins/pearl-chain-bullet.scss +9 -5
  71. package/core/styles/mixins/scrollbar.scss +12 -6
  72. package/core/styles/mixins/shadows.scss +32 -64
  73. package/core/styles/mixins/table.scss +13 -10
  74. package/core/styles/mixins/timetable-form.scss +3 -3
  75. package/core/styles/mixins/typo.scss +4 -4
  76. package/core/styles/node_modules_@sbb-esta_lyne-design-tokens_dist_scss_sbb-variables.scss +49 -1
  77. package/core/styles/node_modules_@sbb-esta_lyne-design-tokens_dist_scss_sbb-variables_css--mixin.scss +203 -5
  78. package/core/styles/off-brand-theme.scss +3 -0
  79. package/core/styles/safety-theme.scss +3 -0
  80. package/core/styles/standard-theme.scss +3 -14
  81. package/core/styles/theme.scss +18 -0
  82. package/core.css +253 -21
  83. package/custom-elements.json +1392 -115
  84. package/date-input/date-input.component.js +1 -1
  85. package/datepicker/datepicker-next-day/datepicker-next-day.component.js +4 -4
  86. package/datepicker/datepicker-previous-day/datepicker-previous-day.component.js +6 -6
  87. package/datepicker/datepicker-toggle/datepicker-toggle.component.js +7 -7
  88. package/development/alert/alert/alert.component.d.ts +2 -0
  89. package/development/alert/alert/alert.component.d.ts.map +1 -1
  90. package/development/alert/alert/alert.component.js +22 -8
  91. package/development/autocomplete/autocomplete-base-element.js +23 -11
  92. package/development/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.component.js +15 -14
  93. package/development/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.component.js +5 -4
  94. package/development/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.component.js +19 -11
  95. package/development/breadcrumb/breadcrumb/breadcrumb.component.js +4 -1
  96. package/development/breadcrumb/breadcrumb-group/breadcrumb-group.component.js +16 -8
  97. package/development/button/common.js +1 -1
  98. package/development/button/mini-button/mini-button.component.js +15 -14
  99. package/development/button/mini-button-group/mini-button-group.component.js +4 -4
  100. package/development/button.js +1 -1
  101. package/development/calendar/calendar.component.js +21 -11
  102. package/development/card/card/card.component.js +11 -6
  103. package/development/card/card-badge/card-badge.component.js +10 -9
  104. package/development/carousel/carousel/carousel.component.d.ts +1 -0
  105. package/development/carousel/carousel/carousel.component.d.ts.map +1 -1
  106. package/development/carousel/carousel/carousel.component.js +14 -4
  107. package/development/carousel/carousel-list/carousel-list.component.d.ts +2 -2
  108. package/development/carousel/carousel-list/carousel-list.component.d.ts.map +1 -1
  109. package/development/carousel/carousel-list/carousel-list.component.js +29 -21
  110. package/development/checkbox/common.js +1 -1
  111. package/development/{checkbox-common-aMPOsPVA.js → checkbox-common-Dy_ofVhp.js} +4 -3
  112. package/development/checkbox.js +1 -1
  113. package/development/chip/chip/chip.component.js +15 -14
  114. package/development/chip-label/chip-label.component.js +12 -15
  115. package/development/clock/clock.component.js +11 -3
  116. package/development/container/container/container.component.js +6 -6
  117. package/development/container/sticky-bar/sticky-bar.component.js +6 -6
  118. package/development/core/config/config.d.ts +6 -0
  119. package/development/core/config/config.d.ts.map +1 -1
  120. package/development/core/config/config.js +1 -1
  121. package/development/core/controllers/media-matchers-controller.d.ts +29 -0
  122. package/development/core/controllers/media-matchers-controller.d.ts.map +1 -1
  123. package/development/core/controllers/media-matchers-controller.js +74 -1
  124. package/development/core/controllers.js +3 -1
  125. package/development/core/dom/contains-pierce-shadow-dom.d.ts +3 -0
  126. package/development/core/dom/contains-pierce-shadow-dom.d.ts.map +1 -0
  127. package/development/core/dom/contains-pierce-shadow-dom.js +14 -0
  128. package/development/core/dom/queue-dom-content-loaded.d.ts +5 -0
  129. package/development/core/dom/queue-dom-content-loaded.d.ts.map +1 -0
  130. package/development/core/dom/queue-dom-content-loaded.js +12 -0
  131. package/development/core/dom/set-or-remove-attribute.d.ts +14 -0
  132. package/development/core/dom/set-or-remove-attribute.d.ts.map +1 -1
  133. package/development/core/dom/set-or-remove-attribute.js +9 -1
  134. package/development/core/dom.d.ts +2 -0
  135. package/development/core/dom.d.ts.map +1 -1
  136. package/development/core/dom.js +8 -2
  137. package/development/core/images.d.ts +4 -0
  138. package/development/core/images.d.ts.map +1 -1
  139. package/development/core/images.js +11 -11
  140. package/development/core/mixins.js +7 -6
  141. package/development/core/overlay/overlay-outside-pointer-event-listener.d.ts +26 -0
  142. package/development/core/overlay/overlay-outside-pointer-event-listener.d.ts.map +1 -0
  143. package/development/core/overlay/overlay-outside-pointer-event-listener.js +61 -0
  144. package/development/core/overlay.d.ts +1 -0
  145. package/development/core/overlay.d.ts.map +1 -1
  146. package/development/core/overlay.js +4 -1
  147. package/development/date-input/date-input.component.js +2 -2
  148. package/development/datepicker/datepicker-next-day/datepicker-next-day.component.js +15 -14
  149. package/development/datepicker/datepicker-previous-day/datepicker-previous-day.component.js +15 -14
  150. package/development/datepicker/datepicker-toggle/datepicker-toggle.component.js +15 -14
  151. package/development/dialog/dialog/dialog.component.d.ts +1 -0
  152. package/development/dialog/dialog/dialog.component.d.ts.map +1 -1
  153. package/development/dialog/dialog/dialog.component.js +28 -14
  154. package/development/dialog/dialog-actions/dialog-actions.component.js +1 -1
  155. package/development/dialog/dialog-title/dialog-title.component.js +1 -1
  156. package/development/divider/divider.component.js +2 -2
  157. package/development/expansion-panel/expansion-panel/expansion-panel.component.js +6 -6
  158. package/development/expansion-panel/expansion-panel-header/expansion-panel-header.component.js +6 -2
  159. package/development/file-selector/common.js +1 -1
  160. package/development/{file-selector-common-CRnQigIZ.js → file-selector-common-CRNAWFM_.js} +8 -5
  161. package/development/file-selector.js +1 -1
  162. package/development/flip-card/flip-card/flip-card.component.js +8 -3
  163. package/development/footer/footer.component.js +5 -4
  164. package/development/form-error/form-error.component.js +2 -2
  165. package/development/form-field/form-field/form-field.component.js +36 -22
  166. package/development/form-field/form-field-clear/form-field-clear.component.js +15 -14
  167. package/development/header/common/header-action-common.js +4 -4
  168. package/development/header/header/header.component.js +2 -2
  169. package/development/header/header-environment/header-environment.component.js +1 -1
  170. package/development/{icon-sidebar-button-common-CA_8TnFu.js → icon-sidebar-button-common-BGrKtvyM.js} +3 -2
  171. package/development/journey-header/journey-header.component.js +1 -1
  172. package/development/lead-container/lead-container.component.js +4 -2
  173. package/development/link/common/block-link-common.js +17 -5
  174. package/development/link/common/inline-link-common.js +9 -3
  175. package/development/link-list/link-list-anchor/link-list-anchor.component.js +11 -9
  176. package/development/loading-indicator/loading-indicator.component.js +1 -1
  177. package/development/loading-indicator-circle/loading-indicator-circle.component.js +2 -2
  178. package/development/logo/logo.component.js +3 -2
  179. package/development/map-container/map-container.component.js +14 -6
  180. package/development/menu/common/menu-action-common.js +4 -3
  181. package/development/menu/menu/menu.component.d.ts +2 -0
  182. package/development/menu/menu/menu.component.d.ts.map +1 -1
  183. package/development/menu/menu/menu.component.js +36 -13
  184. package/development/message/message.component.js +3 -1
  185. package/development/navigation/common/navigation-action-common.js +4 -4
  186. package/development/navigation/navigation/navigation.component.js +21 -19
  187. package/development/navigation/navigation-list/navigation-list.component.js +1 -1
  188. package/development/navigation/navigation-marker/navigation-marker.component.js +1 -1
  189. package/development/navigation/navigation-section/navigation-section.component.js +3 -3
  190. package/development/notification/notification.component.js +38 -18
  191. package/development/option/optgroup/optgroup-base-element.js +3 -2
  192. package/development/option/option/option.component.js +13 -11
  193. package/development/option/option-hint/option-hint.component.js +3 -2
  194. package/development/overlay/overlay.component.d.ts.map +1 -1
  195. package/development/overlay/overlay.component.js +28 -22
  196. package/development/paginator/compact-paginator/compact-paginator.component.js +3 -2
  197. package/development/paginator/paginator/paginator.component.js +18 -17
  198. package/development/popover/popover/popover.component.js +8 -6
  199. package/development/popover/popover-trigger/popover-trigger.component.js +20 -17
  200. package/development/radio-button/common.js +1 -1
  201. package/development/radio-button/radio-button/radio-button.component.js +3 -3
  202. package/development/radio-button/radio-button-panel/radio-button-panel.component.js +3 -3
  203. package/development/{radio-button-common-454JtP9b.js → radio-button-common-CgM3kQSW.js} +9 -8
  204. package/development/radio-button.js +1 -1
  205. package/development/sbb-tokens-CVLcOi-S.js +1 -1
  206. package/development/select/select.component.js +31 -13
  207. package/development/selection-action-panel/selection-action-panel.component.js +9 -5
  208. package/development/selection-expansion-panel/selection-expansion-panel.component.js +10 -6
  209. package/development/sidebar/common.js +1 -1
  210. package/development/sidebar/icon-sidebar/icon-sidebar.component.js +2 -2
  211. package/development/sidebar/sidebar/sidebar.component.js +14 -6
  212. package/development/sidebar.js +1 -1
  213. package/development/signet/signet.component.js +2 -2
  214. package/development/skiplink-list/skiplink-list.component.d.ts +3 -1
  215. package/development/skiplink-list/skiplink-list.component.d.ts.map +1 -1
  216. package/development/skiplink-list/skiplink-list.component.js +26 -9
  217. package/development/slider/slider.component.js +15 -9
  218. package/development/status/status.component.js +7 -7
  219. package/development/stepper/step/step.component.js +1 -3
  220. package/development/stepper/step-label/step-label.component.js +7 -6
  221. package/development/stepper/stepper/stepper.component.js +5 -5
  222. package/development/tabs/tab-label/tab-label.component.js +7 -14
  223. package/development/tag/tag/tag.component.js +15 -9
  224. package/development/teaser/teaser.component.js +3 -2
  225. package/development/teaser-hero/teaser-hero.component.js +3 -3
  226. package/development/teaser-product/common.js +1 -1
  227. package/development/{teaser-product-common-D6fa6x3w.js → teaser-product-common-DvlBRkE_.js} +14 -6
  228. package/development/teaser-product.js +1 -1
  229. package/development/time-input/time-input.component.js +2 -2
  230. package/development/timetable-form/timetable-form/timetable-form.component.js +1 -1
  231. package/development/timetable-form/timetable-form-details/timetable-form-details.component.js +1 -1
  232. package/development/timetable-form/timetable-form-field/timetable-form-field.component.js +3 -3
  233. package/development/timetable-occupancy/timetable-occupancy.component.js +2 -2
  234. package/development/timetable-occupancy-icon/timetable-occupancy-icon.component.d.ts +1 -0
  235. package/development/timetable-occupancy-icon/timetable-occupancy-icon.component.d.ts.map +1 -1
  236. package/development/timetable-occupancy-icon/timetable-occupancy-icon.component.js +4 -3
  237. package/development/title/title-base.js +2 -5
  238. package/development/title/title.component.js +1 -1
  239. package/development/toast/toast.component.d.ts +3 -1
  240. package/development/toast/toast.component.d.ts.map +1 -1
  241. package/development/toast/toast.component.js +31 -15
  242. package/development/toggle/toggle/toggle.component.js +8 -4
  243. package/development/toggle/toggle-option/toggle-option.component.js +5 -3
  244. package/development/toggle-check/toggle-check.component.js +13 -14
  245. package/development/tooltip/tooltip.component.d.ts +89 -0
  246. package/development/tooltip/tooltip.component.d.ts.map +1 -0
  247. package/development/tooltip/tooltip.component.js +466 -0
  248. package/development/tooltip.d.ts +5 -0
  249. package/development/tooltip.d.ts.map +1 -0
  250. package/development/tooltip.js +5 -0
  251. package/development/train/train-blocked-passage/train-blocked-passage.component.js +1 -1
  252. package/development/train/train-formation/train-formation.component.js +16 -4
  253. package/development/train/train-wagon/train-wagon.component.js +3 -12
  254. package/development/{transparent-button-COe-YB_U.js → transparent-button-DdSaBp_-.js} +141 -86
  255. package/development/visual-checkbox/visual-checkbox.component.js +12 -12
  256. package/dialog/dialog/dialog.component.d.ts +1 -0
  257. package/dialog/dialog/dialog.component.d.ts.map +1 -1
  258. package/dialog/dialog/dialog.component.js +37 -36
  259. package/dialog/dialog-actions/dialog-actions.component.js +6 -6
  260. package/dialog/dialog-title/dialog-title.component.js +4 -4
  261. package/divider/divider.component.js +16 -16
  262. package/expansion-panel/expansion-panel/expansion-panel.component.js +1 -1
  263. package/expansion-panel/expansion-panel-header/expansion-panel-header.component.js +3 -3
  264. package/file-selector/common.js +1 -1
  265. package/file-selector-common-D88J9PEh.js +5 -0
  266. package/file-selector.js +1 -1
  267. package/flip-card/flip-card/flip-card.component.js +14 -14
  268. package/footer/footer.component.js +18 -18
  269. package/form-error/form-error.component.js +4 -4
  270. package/form-field/form-field/form-field.component.js +1 -1
  271. package/form-field/form-field-clear/form-field-clear.component.js +9 -9
  272. package/header/common/header-action-common.js +1 -1
  273. package/header/header/header.component.js +19 -19
  274. package/header/header-environment/header-environment.component.js +1 -1
  275. package/icon-sidebar-button-common-BeRXvifI.js +7 -0
  276. package/index.d.ts +2 -0
  277. package/index.js +2 -0
  278. package/journey-header/journey-header.component.js +1 -1
  279. package/lead-container/lead-container.component.js +5 -5
  280. package/link/common/block-link-common.js +23 -23
  281. package/link/common/inline-link-common.js +7 -7
  282. package/link-list/link-list-anchor/link-list-anchor.component.js +11 -11
  283. package/lists.css +5 -3
  284. package/loading-indicator/loading-indicator.component.js +1 -1
  285. package/loading-indicator-circle/loading-indicator-circle.component.js +13 -13
  286. package/logo/logo.component.js +9 -9
  287. package/map-container/map-container.component.js +15 -15
  288. package/menu/common/menu-action-common.js +5 -5
  289. package/menu/menu/menu.component.d.ts +2 -0
  290. package/menu/menu/menu.component.d.ts.map +1 -1
  291. package/menu/menu/menu.component.js +45 -38
  292. package/message/message.component.js +9 -9
  293. package/navigation/common/navigation-action-common.js +6 -6
  294. package/navigation/navigation/navigation.component.js +19 -19
  295. package/navigation/navigation-list/navigation-list.component.js +1 -1
  296. package/navigation/navigation-marker/navigation-marker.component.js +1 -1
  297. package/navigation/navigation-section/navigation-section.component.js +1 -1
  298. package/notification/notification.component.js +8 -8
  299. package/off-brand-theme.css +3017 -0
  300. package/option/optgroup/optgroup-base-element.js +1 -1
  301. package/option/option/option.component.js +3 -3
  302. package/option/option-hint/option-hint.component.js +8 -8
  303. package/overlay/overlay.component.d.ts.map +1 -1
  304. package/overlay/overlay.component.js +47 -48
  305. package/package.json +14 -1
  306. package/paginator/compact-paginator/compact-paginator.component.js +4 -4
  307. package/paginator/paginator/paginator.component.js +10 -10
  308. package/popover/popover/popover.component.js +9 -9
  309. package/popover/popover-trigger/popover-trigger.component.js +5 -5
  310. package/radio-button/common.js +1 -1
  311. package/radio-button/radio-button/radio-button.component.js +13 -13
  312. package/radio-button/radio-button-panel/radio-button-panel.component.js +2 -2
  313. package/radio-button-common-Nm9ULjVb.js +5 -0
  314. package/radio-button.js +1 -1
  315. package/safety-theme.css +3017 -0
  316. package/scrollbar.css +52 -20
  317. package/select/select.component.js +45 -45
  318. package/selection-action-panel/selection-action-panel.component.js +6 -6
  319. package/selection-expansion-panel/selection-expansion-panel.component.js +11 -11
  320. package/sidebar/common.js +1 -1
  321. package/sidebar/icon-sidebar/icon-sidebar.component.js +12 -12
  322. package/sidebar/sidebar/sidebar.component.js +29 -29
  323. package/sidebar.js +1 -1
  324. package/signet/signet.component.js +1 -1
  325. package/skiplink-list/skiplink-list.component.d.ts +3 -1
  326. package/skiplink-list/skiplink-list.component.d.ts.map +1 -1
  327. package/skiplink-list/skiplink-list.component.js +37 -30
  328. package/slider/slider.component.js +16 -16
  329. package/standard-theme.css +334 -58
  330. package/status/status.component.js +13 -13
  331. package/stepper/step/step.component.js +5 -5
  332. package/stepper/step-label/step-label.component.js +1 -1
  333. package/stepper/stepper/stepper.component.js +7 -7
  334. package/table.css +15 -9
  335. package/tabs/tab-label/tab-label.component.js +19 -19
  336. package/tag/tag/tag.component.js +14 -14
  337. package/teaser/teaser.component.js +1 -1
  338. package/teaser-hero/teaser-hero.component.js +12 -12
  339. package/teaser-product/common.js +1 -1
  340. package/teaser-product-common-DIra6aVg.js +5 -0
  341. package/teaser-product.js +1 -1
  342. package/time-input/time-input.component.js +1 -1
  343. package/timetable-form/timetable-form/timetable-form.component.js +6 -6
  344. package/timetable-form/timetable-form-details/timetable-form-details.component.js +4 -4
  345. package/timetable-form/timetable-form-field/timetable-form-field.component.js +5 -5
  346. package/timetable-form.css +3 -3
  347. package/timetable-occupancy/timetable-occupancy.component.js +7 -7
  348. package/timetable-occupancy-icon/timetable-occupancy-icon.component.d.ts +1 -0
  349. package/timetable-occupancy-icon/timetable-occupancy-icon.component.d.ts.map +1 -1
  350. package/timetable-occupancy-icon/timetable-occupancy-icon.component.js +23 -23
  351. package/title/title-base.js +1 -1
  352. package/title/title.component.js +1 -1
  353. package/toast/toast.component.d.ts +3 -1
  354. package/toast/toast.component.d.ts.map +1 -1
  355. package/toast/toast.component.js +67 -59
  356. package/toggle/toggle/toggle.component.js +1 -1
  357. package/toggle/toggle-option/toggle-option.component.js +5 -5
  358. package/toggle-check/toggle-check.component.js +16 -16
  359. package/tooltip/tooltip.component.d.ts +89 -0
  360. package/tooltip/tooltip.component.d.ts.map +1 -0
  361. package/tooltip/tooltip.component.js +215 -0
  362. package/tooltip.d.ts +5 -0
  363. package/tooltip.d.ts.map +1 -0
  364. package/tooltip.js +4 -0
  365. package/train/train-blocked-passage/train-blocked-passage.component.js +1 -1
  366. package/train/train-formation/train-formation.component.js +16 -16
  367. package/train/train-wagon/train-wagon.component.js +1 -1
  368. package/transparent-button-Bg9fU_iZ.js +9 -0
  369. package/typography.css +1 -0
  370. package/visual-checkbox/visual-checkbox.component.js +14 -14
  371. package/checkbox-common-CDzcyq8p.js +0 -5
  372. package/file-selector-common-OHK9hu3a.js +0 -5
  373. package/icon-sidebar-button-common-CM-ueEhH.js +0 -7
  374. package/radio-button-common-CUppr5FI.js +0 -5
  375. package/teaser-product-common-C8oSkIxy.js +0 -5
  376. 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,17 @@ 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
+
1786
2018
  sub {
1787
2019
  bottom: -0.36em;
1788
2020
  }
@@ -1841,6 +2073,7 @@ sup {
1841
2073
  font-size: var(--sbb-text-font-size);
1842
2074
  padding: 0;
1843
2075
  color: var(--sbb-color-granite);
2076
+ color: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
1844
2077
  }
1845
2078
 
1846
2079
  .sbb-screen-reader-only {
@@ -1883,8 +2116,8 @@ sup {
1883
2116
  justify-content: center;
1884
2117
  padding-inline: var(--sbb-spacing-fixed-1x);
1885
2118
  border-radius: var(--sbb-border-radius-infinity);
1886
- background-color: var(--sbb-color-red);
1887
- color: var(--sbb-color-white);
2119
+ background-color: var(--sbb-color-primary);
2120
+ color: var(--sbb-color-1-negative);
1888
2121
  min-width: var(--sbb-spacing-fixed-4x);
1889
2122
  max-height: var(--sbb-spacing-fixed-4x);
1890
2123
  content: attr(sbb-badge);
@@ -1929,6 +2162,8 @@ sup {
1929
2162
  grid-row: 2;
1930
2163
  grid-column: 1;
1931
2164
  padding-block-start: var(--sbb-spacing-fixed-4x);
2165
+ color: var(--sbb-color-granite);
2166
+ color: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
1932
2167
  --sbb-text-font-size: var(--sbb-font-size-text-xs);
1933
2168
  font-family: var(--sbb-typo-font-family);
1934
2169
  font-weight: normal;
@@ -1940,6 +2175,7 @@ sup {
1940
2175
  .sbb-figure-overlap-start-end,
1941
2176
  .sbb-figure-overlap-end-start,
1942
2177
  .sbb-figure-overlap-end-end) {
2178
+ color-scheme: only light;
1943
2179
  position: relative;
1944
2180
  order: 1;
1945
2181
  grid-row: 1;
@@ -2115,6 +2351,7 @@ sup {
2115
2351
  --sbb-step-list-padding-block: var(--sbb-spacing-fixed-3x);
2116
2352
  --sbb-step-list-vertical-gap: var(--sbb-spacing-fixed-1x);
2117
2353
  --sbb-step-list-border-radius: var(--sbb-border-radius-4x);
2354
+ --sbb-step-list-color: var(--sbb-color-2);
2118
2355
  --sbb-step-list-text-to-marker-block-offset: calc(
2119
2356
  0.5 *
2120
2357
  (
@@ -2126,7 +2363,7 @@ sup {
2126
2363
  margin: 0;
2127
2364
  padding: 0;
2128
2365
  counter-reset: steps;
2129
- color: var(--sbb-color-iron);
2366
+ color: var(--sbb-step-list-color);
2130
2367
  }
2131
2368
  .sbb-step-list:where(.sbb-text-s) {
2132
2369
  --sbb-step-list-padding-block: var(--sbb-spacing-fixed-4x);
@@ -2142,7 +2379,7 @@ sup {
2142
2379
  .sbb-step-list > li {
2143
2380
  position: relative;
2144
2381
  counter-increment: steps;
2145
- background-color: var(--sbb-color-milk);
2382
+ background-color: var(--sbb-background-color-3);
2146
2383
  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
2384
  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
2385
  min-height: calc(var(--sbb-step-list-dimensions) + 2 * var(--sbb-step-list-padding-block));
@@ -2164,8 +2401,9 @@ sup {
2164
2401
  width: var(--sbb-step-list-dimensions);
2165
2402
  margin-block-start: calc(-1 * var(--sbb-step-list-text-to-marker-block-offset));
2166
2403
  inset-inline-start: var(--sbb-step-list-padding-inline);
2167
- color: var(--sbb-color-charcoal);
2404
+ color: var(--sbb-step-list-color);
2168
2405
  border: var(--sbb-border-width-1x) solid var(--sbb-color-cement);
2406
+ border: var(--sbb-border-width-1x) solid light-dark(var(--sbb-color-cement), var(--sbb-color-smoke));
2169
2407
  border-radius: 50%;
2170
2408
  }
2171
2409
  .sbb-step-list > li + li {
@@ -2322,8 +2560,16 @@ sup {
2322
2560
  --sbb-scrollbar-thumb-width: 0.125rem;
2323
2561
  --sbb-scrollbar-thumb-width-hover: 0.25rem;
2324
2562
  --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);
2563
+ --sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);
2564
+ --sbb-scrollbar-color: light-dark(
2565
+ color-mix(in srgb, var(--sbb-color-black) 30%, transparent),
2566
+ color-mix(in srgb, var(--sbb-color-white) 30%, transparent)
2567
+ );
2568
+ --sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-black) 60%, transparent);
2569
+ --sbb-scrollbar-color-hover: light-dark(
2570
+ color-mix(in srgb, var(--sbb-color-black) 60%, transparent),
2571
+ color-mix(in srgb, var(--sbb-color-white) 60%, transparent)
2572
+ );
2327
2573
  --sbb-scrollbar-track-color: transparent;
2328
2574
  }
2329
2575
 
@@ -2331,8 +2577,8 @@ sup {
2331
2577
  --sbb-scrollbar-thumb-width: 0.125rem;
2332
2578
  --sbb-scrollbar-thumb-width-hover: 0.25rem;
2333
2579
  --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);
2580
+ --sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-white) 30%, transparent);
2581
+ --sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-white) 60%, transparent);
2336
2582
  --sbb-scrollbar-track-color: transparent;
2337
2583
  }
2338
2584
 
@@ -2340,8 +2586,16 @@ sup {
2340
2586
  --sbb-scrollbar-thumb-width: 0.5rem;
2341
2587
  --sbb-scrollbar-thumb-width-hover: var(--sbb-scrollbar-thumb-width);
2342
2588
  --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);
2589
+ --sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);
2590
+ --sbb-scrollbar-color: light-dark(
2591
+ color-mix(in srgb, var(--sbb-color-black) 30%, transparent),
2592
+ color-mix(in srgb, var(--sbb-color-white) 30%, transparent)
2593
+ );
2594
+ --sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-black) 60%, transparent);
2595
+ --sbb-scrollbar-color-hover: light-dark(
2596
+ color-mix(in srgb, var(--sbb-color-black) 60%, transparent),
2597
+ color-mix(in srgb, var(--sbb-color-white) 60%, transparent)
2598
+ );
2345
2599
  --sbb-scrollbar-track-color: transparent;
2346
2600
  }
2347
2601
 
@@ -2349,8 +2603,8 @@ sup {
2349
2603
  --sbb-scrollbar-thumb-width: 0.5rem;
2350
2604
  --sbb-scrollbar-thumb-width-hover: var(--sbb-scrollbar-thumb-width);
2351
2605
  --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);
2606
+ --sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-white) 30%, transparent);
2607
+ --sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-white) 60%, transparent);
2354
2608
  --sbb-scrollbar-track-color: transparent;
2355
2609
  }
2356
2610
 
@@ -2358,36 +2612,52 @@ sup {
2358
2612
  --sbb-scrollbar-thumb-width: 0.125rem;
2359
2613
  --sbb-scrollbar-thumb-width-hover: 0.25rem;
2360
2614
  --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);
2615
+ --sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);
2616
+ --sbb-scrollbar-color: light-dark(
2617
+ color-mix(in srgb, var(--sbb-color-black) 30%, transparent),
2618
+ color-mix(in srgb, var(--sbb-color-white) 30%, transparent)
2619
+ );
2620
+ --sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-black) 60%, transparent);
2621
+ --sbb-scrollbar-color-hover: light-dark(
2622
+ color-mix(in srgb, var(--sbb-color-black) 60%, transparent),
2623
+ color-mix(in srgb, var(--sbb-color-white) 60%, transparent)
2624
+ );
2625
+ --sbb-scrollbar-track-color: var(--sbb-background-color-4);
2364
2626
  }
2365
2627
 
2366
2628
  .sbb-scrollbar-negative-track-visible {
2367
2629
  --sbb-scrollbar-thumb-width: 0.125rem;
2368
2630
  --sbb-scrollbar-thumb-width-hover: 0.25rem;
2369
2631
  --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);
2632
+ --sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-white) 30%, transparent);
2633
+ --sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-white) 60%, transparent);
2634
+ --sbb-scrollbar-track-color: var(--sbb-background-color-4-negative);
2373
2635
  }
2374
2636
 
2375
2637
  .sbb-scrollbar-thick-track-visible {
2376
2638
  --sbb-scrollbar-thumb-width: 0.5rem;
2377
2639
  --sbb-scrollbar-thumb-width-hover: var(--sbb-scrollbar-thumb-width);
2378
2640
  --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);
2641
+ --sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);
2642
+ --sbb-scrollbar-color: light-dark(
2643
+ color-mix(in srgb, var(--sbb-color-black) 30%, transparent),
2644
+ color-mix(in srgb, var(--sbb-color-white) 30%, transparent)
2645
+ );
2646
+ --sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-black) 60%, transparent);
2647
+ --sbb-scrollbar-color-hover: light-dark(
2648
+ color-mix(in srgb, var(--sbb-color-black) 60%, transparent),
2649
+ color-mix(in srgb, var(--sbb-color-white) 60%, transparent)
2650
+ );
2651
+ --sbb-scrollbar-track-color: var(--sbb-background-color-4);
2382
2652
  }
2383
2653
 
2384
2654
  .sbb-scrollbar-thick-negative-track-visible {
2385
2655
  --sbb-scrollbar-thumb-width: 0.5rem;
2386
2656
  --sbb-scrollbar-thumb-width-hover: var(--sbb-scrollbar-thumb-width);
2387
2657
  --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);
2658
+ --sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-white) 30%, transparent);
2659
+ --sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-white) 60%, transparent);
2660
+ --sbb-scrollbar-track-color: var(--sbb-background-color-4-negative);
2391
2661
  }
2392
2662
 
2393
2663
  .sbb-table,
@@ -2411,10 +2681,12 @@ sup {
2411
2681
  .sbb-table-xs {
2412
2682
  --sbb-table-border: var(--sbb-border-width-1x) solid var(--sbb-table-border-color);
2413
2683
  --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;
2684
+ --sbb-table-border-color: light-dark(var(--sbb-color-cloud), var(--sbb-color-anthracite));
2685
+ --sbb-table-background-color: var(--sbb-background-color-1);
2686
+ --sbb-table-row-striped-color: var(--sbb-background-color-3);
2687
+ --sbb-table-color: var(--sbb-color-1);
2417
2688
  --sbb-table-caption-color: var(--sbb-color-granite);
2689
+ --sbb-table-caption-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
2418
2690
  --sbb-table-caption-margin-block-start: var(--sbb-spacing-fixed-4x);
2419
2691
  --sbb-table-sticky-shadow-width: 3rem;
2420
2692
  --sbb-table-sticky-shadow-transition-easing: var(--sbb-animation-easing);
@@ -2491,7 +2763,9 @@ sup {
2491
2763
  line-height: var(--sbb-typo-line-height-body-text);
2492
2764
  letter-spacing: var(--sbb-typo-letter-spacing-body-text);
2493
2765
  font-size: var(--sbb-text-font-size);
2494
- color: var(--sbb-table-caption-color, var(--sbb-color-granite));
2766
+ --sbb-table-caption-color-fallback: var(--sbb-color-granite);
2767
+ --sbb-table-caption-color-fallback: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
2768
+ color: var(--sbb-table-caption-color, var(--sbb-table-caption-color-fallback));
2495
2769
  margin-block-start: var(--sbb-table-caption-margin-block-start, var(--sbb-spacing-fixed-4x));
2496
2770
  text-align: left;
2497
2771
  }
@@ -2536,9 +2810,9 @@ sup {
2536
2810
  sbb-table-wrapper[negative] .sbb-table,
2537
2811
  .sbb-table--negative {
2538
2812
  --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);
2813
+ --sbb-table-background-color: var(--sbb-background-color-1-negative);
2814
+ --sbb-table-color: var(--sbb-color-1-negative);
2815
+ --sbb-table-row-striped-color: var(--sbb-background-color-3-negative);
2542
2816
  --sbb-table-caption-color: var(--sbb-color-cement);
2543
2817
  }
2544
2818
 
@@ -2551,7 +2825,7 @@ sbb-table-wrapper[negative] .sbb-table,
2551
2825
  }
2552
2826
 
2553
2827
  .sbb-table--theme-iron {
2554
- --sbb-table-cell-color: var(--sbb-color-iron);
2828
+ --sbb-table-cell-color: var(--sbb-color-4);
2555
2829
  }
2556
2830
  .sbb-table--theme-iron tbody > tr > td {
2557
2831
  color: var(--sbb-table-cell-color);
@@ -2604,7 +2878,9 @@ sbb-table-wrapper[negative] .sbb-table,
2604
2878
  line-height: var(--sbb-typo-line-height-body-text);
2605
2879
  letter-spacing: var(--sbb-typo-letter-spacing-body-text);
2606
2880
  font-size: var(--sbb-text-font-size);
2607
- color: var(--sbb-table-caption-color, var(--sbb-color-granite));
2881
+ --sbb-table-caption-color-fallback: var(--sbb-color-granite);
2882
+ --sbb-table-caption-color-fallback: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
2883
+ color: var(--sbb-table-caption-color, var(--sbb-table-caption-color-fallback));
2608
2884
  margin-block-start: var(--sbb-table-caption-margin-block-start, var(--sbb-spacing-fixed-4x));
2609
2885
  text-align: left;
2610
2886
  }
@@ -2675,7 +2951,7 @@ html.sbb-lean .sbb-table:not(.sbb-table-xs, .sbb-table-m) tbody > tr > td {
2675
2951
  border-radius: var(--sbb-border-radius-4x);
2676
2952
  padding-block: var(--sbb-spacing-fixed-10x) var(--sbb-spacing-responsive-l);
2677
2953
  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%);
2954
+ background: linear-gradient(to bottom, var(--sbb-color-primary) 0 11.125rem, var(--sbb-background-color-3) 11.125rem 100%);
2679
2955
  }
2680
2956
  @media (max-width: calc(63.9375rem)) {
2681
2957
  .sbb-timetable-form:has(sbb-signet) {
@@ -2712,7 +2988,7 @@ sbb-timetable-form .sbb-timetable-form-block {
2712
2988
  sbb-timetable-form .sbb-timetable-form-block::after {
2713
2989
  content: "";
2714
2990
  position: absolute;
2715
- border-block-end: var(--sbb-border-width-1x) solid var(--sbb-color-cloud);
2991
+ border-block-end: var(--sbb-border-width-1x) solid var(--sbb-border-color-4-inverted);
2716
2992
  inset-inline: var(--sbb-form-field-padding-inline);
2717
2993
  inset-block-end: 0;
2718
2994
  }
@@ -2728,7 +3004,7 @@ sbb-timetable-form .sbb-timetable-form-block sbb-datepicker-toggle {
2728
3004
  sbb-timetable-form .sbb-timetable-form-mobile-block::after {
2729
3005
  content: "";
2730
3006
  position: absolute;
2731
- border-block-end: var(--sbb-border-width-1x) solid var(--sbb-color-cloud);
3007
+ border-block-end: var(--sbb-border-width-1x) solid var(--sbb-border-color-4-inverted);
2732
3008
  inset-inline: var(--sbb-form-field-padding-inline);
2733
3009
  inset-block-end: 0;
2734
3010
  }