@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/core.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 05 Aug 2025 06:28:50 GMT
3
+ * Generated on Thu, 18 Sep 2025 10:59:58 GMT
4
4
  */
5
5
  *,
6
6
  ::before,
@@ -156,14 +156,24 @@
156
156
  --sbb-color-red-alpha-60: rgba(235, 0, 0, 0.6);
157
157
  --sbb-color-red-alpha-90: rgba(235, 0, 0, 0.9);
158
158
  --sbb-color-red-mode-dark: #ff3838;
159
+ --sbb-color-red85: #ff3838;
159
160
  --sbb-color-red125: #c60018;
160
161
  --sbb-color-red125-alpha-0: rgba(198, 0, 24, 0);
161
162
  --sbb-color-red125-alpha-20: rgba(198, 0, 24, 0.2);
162
- --sbb-color-red125-alpha-60: rgba(198, 0, 0, 0.6);
163
+ --sbb-color-red125-alpha-60: rgba(198, 0, 24, 0.6);
163
164
  --sbb-color-red150: #a20013;
164
165
  --sbb-color-royal: #06348b;
166
+ --sbb-color-royal85: #4077df;
165
167
  --sbb-color-royal125: #032668;
166
168
  --sbb-color-royal150: #021c4e;
169
+ --sbb-color-royal-light: #06348b;
170
+ --sbb-color-royal-dark: #0053ef;
171
+ --sbb-color-royal85-light: #4077df;
172
+ --sbb-color-royal85-dark: #4077df;
173
+ --sbb-color-royal125-light: #032668;
174
+ --sbb-color-royal125-dark: #245ecb;
175
+ --sbb-color-royal150-light: #021c4e;
176
+ --sbb-color-royal150-dark: #000000;
167
177
  --sbb-color-white: #ffffff;
168
178
  --sbb-color-white-alpha-0: rgba(255, 255, 255, 0);
169
179
  --sbb-color-white-alpha-20: rgba(255, 255, 255, 0.2);
@@ -173,16 +183,38 @@
173
183
  --sbb-color-white-alpha-70: rgba(255, 255, 255, 0.7);
174
184
  --sbb-color-white-alpha-80: rgba(255, 255, 255, 0.8);
175
185
  --sbb-color-sky: #0074bf;
186
+ --sbb-color-sky-light: #0074bf;
187
+ --sbb-color-sky-dark: #128ede;
176
188
  --sbb-color-night: #143a85;
189
+ --sbb-color-night-light: #143a85;
190
+ --sbb-color-night-dark: #6587ca;
177
191
  --sbb-color-violet: #6f2282;
192
+ --sbb-color-violet-light: #6f2282;
193
+ --sbb-color-violet-dark: #b36cc5;
178
194
  --sbb-color-pink: #c7387a;
195
+ --sbb-color-pink-light: #c7387a;
196
+ --sbb-color-pink-dark: #e45295;
179
197
  --sbb-color-autumn: #cf3b00;
198
+ --sbb-color-autumn-light: #cf3b00;
199
+ --sbb-color-autumn-dark: #f05313;
180
200
  --sbb-color-orange: #f27e00;
201
+ --sbb-color-orange-light: #f27e00;
202
+ --sbb-color-orange-dark: #fb8e19;
181
203
  --sbb-color-peach: #fcbb00;
204
+ --sbb-color-peach-light: #fcbb00;
205
+ --sbb-color-peach-dark: #ffc727;
182
206
  --sbb-color-lemon: #ffde15;
207
+ --sbb-color-lemon-light: #ffde15;
208
+ --sbb-color-lemon-dark: #ffe547;
183
209
  --sbb-color-brown: #a05400;
210
+ --sbb-color-brown-light: #a05400;
211
+ --sbb-color-brown-dark: #000000;
184
212
  --sbb-color-green: #008233;
213
+ --sbb-color-green-light: #008233;
214
+ --sbb-color-green-dark: #109d47;
185
215
  --sbb-color-turquoise: #007e84;
216
+ --sbb-color-turquoise-light: #007e84;
217
+ --sbb-color-turquoise-dark: #00a59b;
186
218
  /**
187
219
  * Original Value: 3px
188
220
  */
@@ -255,6 +287,22 @@
255
287
  * Original Value: 1200px
256
288
  */
257
289
  --sbb-layout-base-page-max-width: 75rem;
290
+ --sbb-shadow-color-soft-1-light: rgba(141, 141, 141, 0.05);
291
+ --sbb-shadow-color-soft-1-dark: rgba(0, 0, 0, 0.15);
292
+ --sbb-shadow-color-soft-1-negative-light: rgba(0, 0, 0, 0.15);
293
+ --sbb-shadow-color-soft-1-negative-dark: rgba(0, 0, 0, 0.15);
294
+ --sbb-shadow-color-soft-2-light: rgba(141, 141, 141, 0.1);
295
+ --sbb-shadow-color-soft-2-dark: rgba(0, 0, 0, 0.2);
296
+ --sbb-shadow-color-soft-2-negative-light: rgba(0, 0, 0, 0.2);
297
+ --sbb-shadow-color-soft-2-negative-dark: rgba(0, 0, 0, 0.2);
298
+ --sbb-shadow-color-hard-1-light: rgba(141, 141, 141, 0.1);
299
+ --sbb-shadow-color-hard-1-dark: rgba(0, 0, 0, 0.3);
300
+ --sbb-shadow-color-hard-1-negative-light: rgba(0, 0, 0, 0.3);
301
+ --sbb-shadow-color-hard-1-negative-dark: rgba(0, 0, 0, 0.3);
302
+ --sbb-shadow-color-hard-2-light: rgba(141, 141, 141, 0.2);
303
+ --sbb-shadow-color-hard-2-dark: rgba(0, 0, 0, 0.4);
304
+ --sbb-shadow-color-hard-2-negative-light: rgba(0, 0, 0, 0.4);
305
+ --sbb-shadow-color-hard-2-negative-dark: rgba(0, 0, 0, 0.4);
258
306
  /**
259
307
  * Original Value: 0px
260
308
  */
@@ -950,12 +998,162 @@
950
998
  * dependant or simply referencing other variables.
951
999
  * Due to technical limitations these variables are only provided as CSS variables.
952
1000
  */
953
- /* Font Color */
954
- --sbb-font-default-color: var(--sbb-color-charcoal);
1001
+ /* Colors */
1002
+ --sbb-color-sky: var(--sbb-color-sky-light);
1003
+ --sbb-color-sky: light-dark(var(--sbb-color-sky-light), var(--sbb-color-sky-dark));
1004
+ --sbb-color-night: var(--sbb-color-night-light);
1005
+ --sbb-color-night: light-dark(var(--sbb-color-night-light), var(--sbb-color-night-dark));
1006
+ --sbb-color-violet: var(--sbb-color-violet-light);
1007
+ --sbb-color-violet: light-dark(var(--sbb-color-violet-light), var(--sbb-color-violet-dark));
1008
+ --sbb-color-pink: var(--sbb-color-pink-light);
1009
+ --sbb-color-pink: light-dark(var(--sbb-color-pink-light), var(--sbb-color-pink-dark));
1010
+ --sbb-color-autumn: var(--sbb-color-autumn-light);
1011
+ --sbb-color-autumn: light-dark(var(--sbb-color-autumn-light), var(--sbb-color-autumn-dark));
1012
+ --sbb-color-orange: var(--sbb-color-orange-light);
1013
+ --sbb-color-orange: light-dark(var(--sbb-color-orange-light), var(--sbb-color-orange-dark));
1014
+ --sbb-color-peach: var(--sbb-color-peach-light);
1015
+ --sbb-color-peach: light-dark(var(--sbb-color-peach-light), var(--sbb-color-peach-dark));
1016
+ --sbb-color-lemon: var(--sbb-color-lemon-light);
1017
+ --sbb-color-lemon: light-dark(var(--sbb-color-lemon-light), var(--sbb-color-lemon-dark));
1018
+ --sbb-color-brown: var(--sbb-color-brown-light);
1019
+ --sbb-color-brown: light-dark(var(--sbb-color-brown-light), var(--sbb-color-brown-dark));
1020
+ --sbb-color-green: var(--sbb-color-green-light);
1021
+ --sbb-color-green: light-dark(var(--sbb-color-green-light), var(--sbb-color-green-dark));
1022
+ --sbb-color-turquoise: var(--sbb-color-turquoise-light);
1023
+ --sbb-color-turquoise: light-dark(
1024
+ var(--sbb-color-turquoise-light),
1025
+ var(--sbb-color-turquoise-dark)
1026
+ );
1027
+ --sbb-color-royal: var(--sbb-color-royal-light);
1028
+ --sbb-color-royal: light-dark(var(--sbb-color-royal-light), var(--sbb-color-royal-dark));
1029
+ --sbb-color-royal85: var(--sbb-color-royal85-light);
1030
+ --sbb-color-royal85: light-dark(var(--sbb-color-royal85-light), var(--sbb-color-royal85-dark));
1031
+ --sbb-color-royal125: var(--sbb-color-royal125-light);
1032
+ --sbb-color-royal125: light-dark(var(--sbb-color-royal125-light), var(--sbb-color-royal125-dark));
1033
+ --sbb-color-royal150: var(--sbb-color-royal150-light);
1034
+ --sbb-color-royal150: light-dark(var(--sbb-color-royal150-light), var(--sbb-color-royal150-dark));
1035
+ --sbb-color-primary: var(--sbb-color-red);
1036
+ --sbb-color-primary85: var(--sbb-color-red85);
1037
+ /* @deprecated */
1038
+ --sbb-color-primary-85: var(--sbb-color-primary85);
1039
+ --sbb-color-primary125: var(--sbb-color-red125);
1040
+ /* @deprecated */
1041
+ --sbb-color-primary-125: var(--sbb-color-primary125);
1042
+ --sbb-color-primary150: var(--sbb-color-red150);
1043
+ /* @deprecated */
1044
+ --sbb-color-primary-150: var(--sbb-color-primary150);
1045
+ --sbb-color-error: var(--sbb-color-red125);
1046
+ --sbb-color-error: light-dark(var(--sbb-color-red125), var(--sbb-color-red85));
1047
+ --sbb-color-success: var(--sbb-color-green);
1048
+ --sbb-color-warning: var(--sbb-color-peach);
1049
+ --sbb-color-brand: var(--sbb-color-red);
1050
+ --sbb-background-color-1: var(--sbb-color-white);
1051
+ --sbb-background-color-1: light-dark(var(--sbb-color-white), var(--sbb-color-midnight));
1052
+ --sbb-background-color-1-inverted: var(--sbb-color-midnight);
1053
+ --sbb-background-color-1-inverted: light-dark(var(--sbb-color-midnight), var(--sbb-color-white));
1054
+ --sbb-background-color-1-negative: var(--sbb-color-midnight);
1055
+ --sbb-background-color-1-negative-inverted: var(--sbb-color-white);
1056
+ --sbb-background-color-2: var(--sbb-color-white);
1057
+ --sbb-background-color-2: light-dark(var(--sbb-color-white), var(--sbb-color-charcoal));
1058
+ --sbb-background-color-2-inverted: var(--sbb-color-charcoal);
1059
+ --sbb-background-color-2-inverted: light-dark(var(--sbb-color-charcoal), var(--sbb-color-white));
1060
+ --sbb-background-color-2-negative: var(--sbb-color-charcoal);
1061
+ --sbb-background-color-2-negative-inverted: var(--sbb-color-white);
1062
+ --sbb-background-color-3: var(--sbb-color-milk);
1063
+ --sbb-background-color-3: light-dark(var(--sbb-color-milk), var(--sbb-color-charcoal));
1064
+ --sbb-background-color-3-inverted: var(--sbb-color-charcoal);
1065
+ --sbb-background-color-3-inverted: light-dark(var(--sbb-color-charcoal), var(--sbb-color-milk));
1066
+ --sbb-background-color-3-negative: var(--sbb-color-charcoal);
1067
+ --sbb-background-color-3-negative-inverted: var(--sbb-color-milk);
1068
+ --sbb-background-color-4: var(--sbb-color-cloud);
1069
+ --sbb-background-color-4: light-dark(var(--sbb-color-cloud), var(--sbb-color-iron));
1070
+ --sbb-background-color-4-inverted: var(--sbb-color-iron);
1071
+ --sbb-background-color-4-inverted: light-dark(var(--sbb-color-iron), var(--sbb-color-cloud));
1072
+ --sbb-background-color-4-negative: var(--sbb-color-iron);
1073
+ --sbb-background-color-4-negative-inverted: var(--sbb-color-cloud);
1074
+ --sbb-color-1: var(--sbb-color-midnight);
1075
+ --sbb-color-1: light-dark(var(--sbb-color-midnight), var(--sbb-color-white));
1076
+ --sbb-color-1-inverted: var(--sbb-color-white);
1077
+ --sbb-color-1-inverted: light-dark(var(--sbb-color-white), var(--sbb-color-midnight));
1078
+ --sbb-color-1-negative: var(--sbb-color-white);
1079
+ --sbb-color-1-negative-inverted: var(--sbb-color-midnight);
1080
+ --sbb-color-2: var(--sbb-color-charcoal);
1081
+ --sbb-color-2: light-dark(var(--sbb-color-charcoal), var(--sbb-color-white));
1082
+ --sbb-color-2-inverted: var(--sbb-color-white);
1083
+ --sbb-color-2-inverted: light-dark(var(--sbb-color-white), var(--sbb-color-charcoal));
1084
+ --sbb-color-2-negative: var(--sbb-color-white);
1085
+ --sbb-color-2-negative-inverted: var(--sbb-color-charcoal);
1086
+ --sbb-color-3: var(--sbb-color-charcoal);
1087
+ --sbb-color-3: light-dark(var(--sbb-color-charcoal), var(--sbb-color-milk));
1088
+ --sbb-color-3-inverted: var(--sbb-color-milk);
1089
+ --sbb-color-3-inverted: light-dark(var(--sbb-color-milk), var(--sbb-color-charcoal));
1090
+ --sbb-color-3-negative: var(--sbb-color-milk);
1091
+ --sbb-color-3-negative-inverted: var(--sbb-color-charcoal);
1092
+ --sbb-color-4: var(--sbb-color-iron);
1093
+ --sbb-color-4: light-dark(var(--sbb-color-iron), var(--sbb-color-cloud));
1094
+ --sbb-color-4-inverted: var(--sbb-color-cloud);
1095
+ --sbb-color-4-inverted: light-dark(var(--sbb-color-cloud), var(--sbb-color-iron));
1096
+ --sbb-color-4-negative: var(--sbb-color-cloud);
1097
+ --sbb-color-4-negative-inverted: var(--sbb-color-iron);
1098
+ --sbb-color-5: var(--sbb-color-smoke);
1099
+ --sbb-border-color-1: var(--sbb-color-midnight);
1100
+ --sbb-border-color-1: light-dark(var(--sbb-color-midnight), var(--sbb-color-white));
1101
+ --sbb-border-color-1-inverted: var(--sbb-color-white);
1102
+ --sbb-border-color-1-inverted: light-dark(var(--sbb-color-white), var(--sbb-color-midnight));
1103
+ --sbb-border-color-1-negative: var(--sbb-color-white);
1104
+ --sbb-border-color-1-negative-inverted: var(--sbb-color-midnight);
1105
+ --sbb-border-color-2: var(--sbb-color-charcoal);
1106
+ --sbb-border-color-2: light-dark(var(--sbb-color-charcoal), var(--sbb-color-white));
1107
+ --sbb-border-color-2-inverted: var(--sbb-color-white);
1108
+ --sbb-border-color-2-inverted: light-dark(var(--sbb-color-white), var(--sbb-color-charcoal));
1109
+ --sbb-border-color-2-negative: var(--sbb-color-white);
1110
+ --sbb-border-color-2-negative-inverted: var(--sbb-color-charcoal);
1111
+ --sbb-border-color-3: var(--sbb-color-charcoal);
1112
+ --sbb-border-color-3: light-dark(var(--sbb-color-charcoal), var(--sbb-color-milk));
1113
+ --sbb-border-color-3-inverted: var(--sbb-color-milk);
1114
+ --sbb-border-color-3-inverted: light-dark(var(--sbb-color-milk), var(--sbb-color-charcoal));
1115
+ --sbb-border-color-3-negative: var(--sbb-color-milk);
1116
+ --sbb-border-color-3-negative-inverted: var(--sbb-color-charcoal);
1117
+ --sbb-border-color-4: var(--sbb-color-iron);
1118
+ --sbb-border-color-4: light-dark(var(--sbb-color-iron), var(--sbb-color-cloud));
1119
+ --sbb-border-color-4-inverted: var(--sbb-color-cloud);
1120
+ --sbb-border-color-4-inverted: light-dark(var(--sbb-color-cloud), var(--sbb-color-iron));
1121
+ --sbb-border-color-4-negative: var(--sbb-color-cloud);
1122
+ --sbb-border-color-4-negative-inverted: var(--sbb-color-iron);
1123
+ --sbb-border-color-5: var(--sbb-color-smoke);
1124
+ --sbb-shadow-color-soft-1: color-mix(in srgb, var(--sbb-color-smoke) 5%, transparent);
1125
+ --sbb-shadow-color-soft-1: light-dark(
1126
+ color-mix(in srgb, var(--sbb-color-smoke) 5%, transparent),
1127
+ color-mix(in srgb, var(--sbb-color-black) 15%, transparent)
1128
+ );
1129
+ --sbb-shadow-color-soft-2: color-mix(in srgb, var(--sbb-color-smoke) 10%, transparent);
1130
+ --sbb-shadow-color-soft-2: light-dark(
1131
+ color-mix(in srgb, var(--sbb-color-smoke) 10%, transparent),
1132
+ color-mix(in srgb, var(--sbb-color-black) 20%, transparent)
1133
+ );
1134
+ --sbb-shadow-color-soft-1-negative: color-mix(in srgb, var(--sbb-color-black) 15%, transparent);
1135
+ --sbb-shadow-color-soft-2-negative: color-mix(in srgb, var(--sbb-color-black) 20%, transparent);
1136
+ --sbb-shadow-color-hard-1: color-mix(in srgb, var(--sbb-color-smoke) 10%, transparent);
1137
+ --sbb-shadow-color-hard-1: light-dark(
1138
+ color-mix(in srgb, var(--sbb-color-smoke) 10%, transparent),
1139
+ color-mix(in srgb, var(--sbb-color-black) 30%, transparent)
1140
+ );
1141
+ --sbb-shadow-color-hard-2: color-mix(in srgb, var(--sbb-color-smoke) 20%, transparent);
1142
+ --sbb-shadow-color-hard-2: light-dark(
1143
+ color-mix(in srgb, var(--sbb-color-smoke) 20%, transparent),
1144
+ color-mix(in srgb, var(--sbb-color-black) 40%, transparent)
1145
+ );
1146
+ --sbb-shadow-color-hard-1-negative: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);
1147
+ --sbb-shadow-color-hard-2-negative: color-mix(in srgb, var(--sbb-color-black) 40%, transparent);
1148
+ --sbb-font-default-color: var(--sbb-color-2);
955
1149
  /* Focus outline */
956
1150
  --sbb-focus-outline-color-default: var(--sbb-color-black);
957
1151
  --sbb-focus-outline-color-dark: var(--sbb-color-white);
958
1152
  --sbb-focus-outline-color: var(--sbb-focus-outline-color-default);
1153
+ --sbb-focus-outline-color: light-dark(
1154
+ var(--sbb-focus-outline-color-default),
1155
+ var(--sbb-focus-outline-color-dark)
1156
+ );
959
1157
  --sbb-focus-outline-width: var(--sbb-border-width-1x);
960
1158
  /* Title */
961
1159
  --sbb-font-size-title-1: var(--sbb-typo-scale-2-5x);
@@ -1202,6 +1400,18 @@
1202
1400
  font-display: swap;
1203
1401
  font-weight: 300;
1204
1402
  }
1403
+ .sbb-dark {
1404
+ color-scheme: dark;
1405
+ }
1406
+
1407
+ .sbb-light {
1408
+ color-scheme: light;
1409
+ }
1410
+
1411
+ .sbb-light-dark {
1412
+ color-scheme: light dark;
1413
+ }
1414
+
1205
1415
  html {
1206
1416
  font-family: var(--sbb-typo-font-family);
1207
1417
  font-weight: normal;
@@ -1209,11 +1419,12 @@ html {
1209
1419
  letter-spacing: var(--sbb-typo-letter-spacing-body-text);
1210
1420
  font-size: var(--sbb-text-font-size);
1211
1421
  color: var(--sbb-font-default-color);
1422
+ background-color: var(--sbb-background-color-1);
1212
1423
  }
1213
1424
 
1214
1425
  ::placeholder {
1215
- color: var(--sbb-color-metal);
1216
- -webkit-text-fill-color: var(--sbb-color-metal);
1426
+ color: var(--sbb-color-5);
1427
+ -webkit-text-fill-color: var(--sbb-color-5);
1217
1428
  opacity: 1;
1218
1429
  }
1219
1430
 
@@ -1245,8 +1456,8 @@ html {
1245
1456
  line-height: var(--sbb-typo-line-height-body-text) !important;
1246
1457
  }
1247
1458
  :is(sbb-form-field, sbb-timetable-form-field) :where(input, select, textarea, sbb-select, sbb-date-input, sbb-time-input)::placeholder {
1248
- color: var(--sbb-color-metal);
1249
- -webkit-text-fill-color: var(--sbb-color-metal);
1459
+ color: var(--sbb-color-5);
1460
+ -webkit-text-fill-color: var(--sbb-color-5);
1250
1461
  opacity: 1;
1251
1462
  }
1252
1463
  :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 {
@@ -1261,7 +1472,9 @@ html {
1261
1472
  }
1262
1473
  :is(sbb-form-field, sbb-timetable-form-field):not([floating-label]) :where(input, select, textarea, sbb-select):disabled::placeholder {
1263
1474
  color: var(--sbb-color-granite);
1475
+ color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
1264
1476
  -webkit-text-fill-color: var(--sbb-color-granite);
1477
+ -webkit-text-fill-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
1265
1478
  }
1266
1479
  :is(sbb-form-field, sbb-timetable-form-field) :where(select) {
1267
1480
  vertical-align: middle;
@@ -1278,8 +1491,16 @@ html {
1278
1491
  --sbb-scrollbar-thumb-width: 0.125rem;
1279
1492
  --sbb-scrollbar-thumb-width-hover: 0.25rem;
1280
1493
  --sbb-scrollbar-width-firefox: thin;
1281
- --sbb-scrollbar-color: var(--sbb-color-black-alpha-30);
1282
- --sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);
1494
+ --sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);
1495
+ --sbb-scrollbar-color: light-dark(
1496
+ color-mix(in srgb, var(--sbb-color-black) 30%, transparent),
1497
+ color-mix(in srgb, var(--sbb-color-white) 30%, transparent)
1498
+ );
1499
+ --sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-black) 60%, transparent);
1500
+ --sbb-scrollbar-color-hover: light-dark(
1501
+ color-mix(in srgb, var(--sbb-color-black) 60%, transparent),
1502
+ color-mix(in srgb, var(--sbb-color-white) 60%, transparent)
1503
+ );
1283
1504
  --sbb-scrollbar-track-color: transparent;
1284
1505
  --sbb-scrollbar-width: var(--sbb-spacing-fixed-3x);
1285
1506
  }
@@ -1324,8 +1545,8 @@ html {
1324
1545
  --sbb-scrollbar-thumb-width: 0.125rem;
1325
1546
  --sbb-scrollbar-thumb-width-hover: 0.25rem;
1326
1547
  --sbb-scrollbar-width-firefox: thin;
1327
- --sbb-scrollbar-color: var(--sbb-color-white-alpha-30);
1328
- --sbb-scrollbar-color-hover: var(--sbb-color-white-alpha-60);
1548
+ --sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-white) 30%, transparent);
1549
+ --sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-white) 60%, transparent);
1329
1550
  --sbb-scrollbar-track-color: transparent;
1330
1551
  --sbb-scrollbar-width: var(--sbb-spacing-fixed-3x);
1331
1552
  }
@@ -1360,15 +1581,15 @@ html {
1360
1581
  :is(:state(interacted),[state--interacted]):invalid,
1361
1582
  .ng-touched.ng-invalid,
1362
1583
  .sbb-invalid)), :is(.ng-submitted, .sbb-show-errors) :is(sbb-form-field, sbb-timetable-form-field):has(:is(:invalid, .ng-invalid)) {
1363
- --sbb-form-field-border-color: var(--sbb-color-red125);
1364
- --sbb-form-field-text-color: var(--sbb-color-red125);
1584
+ --sbb-form-field-border-color: var(--sbb-color-error);
1585
+ --sbb-form-field-text-color: var(--sbb-color-error);
1365
1586
  }
1366
1587
  :is(sbb-form-field, sbb-timetable-form-field):has(:is(:is(input, textarea, select):user-invalid,
1367
1588
  :is(:state(interacted),[state--interacted]):invalid,
1368
1589
  .ng-touched.ng-invalid,
1369
1590
  .sbb-invalid))[negative], :is(.ng-submitted, .sbb-show-errors) :is(sbb-form-field, sbb-timetable-form-field):has(:is(:invalid, .ng-invalid))[negative] {
1370
- --sbb-form-field-border-color: var(--sbb-color-red-mode-dark);
1371
- --sbb-form-field-text-color: var(--sbb-color-red-mode-dark);
1591
+ --sbb-form-field-border-color: var(--sbb-color-red85);
1592
+ --sbb-form-field-text-color: var(--sbb-color-red85);
1372
1593
  }
1373
1594
  @media (forced-colors: active) {
1374
1595
  :is(sbb-form-field, sbb-timetable-form-field):has(:is(:is(input, textarea, select):user-invalid,
@@ -1391,7 +1612,8 @@ sbb-overlay,
1391
1612
  sbb-popover,
1392
1613
  sbb-select,
1393
1614
  sbb-skiplink-list,
1394
- sbb-toast):not(:defined) {
1615
+ sbb-toast,
1616
+ sbb-tooltip):not(:defined) {
1395
1617
  display: none;
1396
1618
  }
1397
1619
 
@@ -1403,7 +1625,8 @@ sbb-menu,
1403
1625
  sbb-navigation,
1404
1626
  sbb-overlay,
1405
1627
  sbb-popover,
1406
- sbb-toast) {
1628
+ sbb-toast,
1629
+ sbb-tooltip) {
1407
1630
  margin: 0;
1408
1631
  padding: 0;
1409
1632
  border: none;
@@ -1435,10 +1658,12 @@ sbb-breadcrumb-group:not(:defined) {
1435
1658
  padding-inline: var(--sbb-spacing-fixed-4x);
1436
1659
  gap: var(--sbb-spacing-fixed-1x);
1437
1660
  align-items: baseline;
1661
+ color: var(--sbb-color-1);
1438
1662
  }
1439
1663
  .sbb-header-info strong + * {
1440
1664
  font-size: var(--sbb-font-size-text-xxs);
1441
1665
  color: var(--sbb-color-granite);
1666
+ color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
1442
1667
  }
1443
1668
 
1444
1669
  sbb-title + p {
@@ -1632,14 +1857,14 @@ sbb-toggle:has(:focus-visible) {
1632
1857
  }
1633
1858
 
1634
1859
  sbb-dialog[negative] sbb-dialog-actions {
1635
- --sbb-dialog-actions-border-color: var(--sbb-color-iron);
1860
+ --sbb-dialog-actions-border-color: var(--sbb-background-color-4-negative);
1636
1861
  }
1637
1862
  sbb-dialog:is(:state(overflows),[state--overflows]) sbb-dialog-actions {
1638
1863
  --sbb-dialog-actions-border-color: transparent;
1639
- 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);
1864
+ 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);
1640
1865
  }
1641
1866
  sbb-dialog[negative]:is(:state(overflows),[state--overflows]) sbb-dialog-actions {
1642
- 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);
1867
+ 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);
1643
1868
  }
1644
1869
 
1645
1870
  sbb-dialog:has(> sbb-dialog-title) > sbb-dialog-content {
@@ -1673,6 +1898,19 @@ sbb-notification:has(sbb-title)[size=s] {
1673
1898
  sbb-status:has(sbb-title) {
1674
1899
  --sbb-status-gap: var(--sbb-spacing-responsive-xxxs);
1675
1900
  --_sbb-status-text-color-override: var(--sbb-color-granite);
1901
+ --_sbb-status-text-color-override: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
1676
1902
  --_sbb-status-title-font-size: var(--sbb-font-size-title-5);
1677
1903
  --_sbb-status-title-line-height: var(--sbb-typo-line-height-titles);
1904
+ }
1905
+
1906
+ .sbb-overlay-outlet {
1907
+ position: fixed;
1908
+ inset: 0;
1909
+ pointer-events: none;
1910
+ }
1911
+
1912
+ .sbb-options-nowrap {
1913
+ --sbb-option-text-overflow: ellipsis;
1914
+ --sbb-option-overflow: hidden;
1915
+ --sbb-option-white-space: nowrap;
1678
1916
  }