@sbb-esta/lyne-elements 3.6.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 (491) hide show
  1. package/a11y.css +1 -1
  2. package/alert/alert/alert.component.d.ts +2 -0
  3. package/alert/alert/alert.component.d.ts.map +1 -1
  4. package/alert/alert/alert.component.js +44 -39
  5. package/alert/alert-group/alert-group.component.js +12 -12
  6. package/autocomplete/autocomplete-base-element.d.ts +14 -0
  7. package/autocomplete/autocomplete-base-element.d.ts.map +1 -1
  8. package/autocomplete/autocomplete-base-element.js +110 -77
  9. package/autocomplete/autocomplete.component.d.ts.map +1 -1
  10. package/autocomplete/autocomplete.component.js +9 -9
  11. package/autocomplete-grid/autocomplete-grid/autocomplete-grid.component.d.ts.map +1 -1
  12. package/autocomplete-grid/autocomplete-grid/autocomplete-grid.component.js +5 -5
  13. package/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.component.js +14 -14
  14. package/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.component.js +1 -1
  15. package/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.component.js +9 -9
  16. package/badge.css +2 -2
  17. package/breadcrumb/breadcrumb/breadcrumb.component.js +12 -12
  18. package/breadcrumb/breadcrumb-group/breadcrumb-group.component.js +15 -15
  19. package/button/common.js +1 -1
  20. package/button/mini-button/mini-button.component.js +7 -7
  21. package/button/mini-button-group/mini-button-group.component.js +21 -21
  22. package/button.js +1 -1
  23. package/calendar/calendar.component.js +36 -36
  24. package/card/card/card.component.js +10 -10
  25. package/card/card-badge/card-badge.component.js +15 -15
  26. package/carousel/carousel/carousel.component.d.ts +33 -0
  27. package/carousel/carousel/carousel.component.d.ts.map +1 -0
  28. package/carousel/carousel/carousel.component.js +82 -0
  29. package/carousel/carousel-item/carousel-item.component.d.ts +29 -0
  30. package/carousel/carousel-item/carousel-item.component.d.ts.map +1 -0
  31. package/carousel/carousel-item/carousel-item.component.js +26 -0
  32. package/carousel/carousel-item.d.ts +5 -0
  33. package/carousel/carousel-item.d.ts.map +1 -0
  34. package/carousel/carousel-item.js +4 -0
  35. package/carousel/carousel-list/carousel-list.component.d.ts +30 -0
  36. package/carousel/carousel-list/carousel-list.component.d.ts.map +1 -0
  37. package/carousel/carousel-list/carousel-list.component.js +81 -0
  38. package/carousel/carousel-list.d.ts +5 -0
  39. package/carousel/carousel-list.d.ts.map +1 -0
  40. package/carousel/carousel-list.js +4 -0
  41. package/carousel/carousel.d.ts +5 -0
  42. package/carousel/carousel.d.ts.map +1 -0
  43. package/carousel/carousel.js +4 -0
  44. package/carousel.d.ts +7 -0
  45. package/carousel.d.ts.map +1 -0
  46. package/carousel.js +8 -0
  47. package/checkbox/common.js +1 -1
  48. package/checkbox-common-gjHkSAmN.js +5 -0
  49. package/checkbox.js +1 -1
  50. package/chip/chip/chip.component.js +23 -23
  51. package/chip-label/chip-label.component.js +22 -22
  52. package/clock/clock.component.js +29 -29
  53. package/container/container/container.component.js +21 -21
  54. package/container/sticky-bar/sticky-bar.component.js +13 -13
  55. package/core/config/config.d.ts +6 -0
  56. package/core/config/config.d.ts.map +1 -1
  57. package/core/controllers/media-matchers-controller.d.ts +29 -0
  58. package/core/controllers/media-matchers-controller.d.ts.map +1 -1
  59. package/core/controllers/media-matchers-controller.js +73 -23
  60. package/core/controllers.js +16 -14
  61. package/core/dom/contains-pierce-shadow-dom.d.ts +3 -0
  62. package/core/dom/contains-pierce-shadow-dom.d.ts.map +1 -0
  63. package/core/dom/contains-pierce-shadow-dom.js +12 -0
  64. package/core/dom/queue-dom-content-loaded.d.ts +5 -0
  65. package/core/dom/queue-dom-content-loaded.d.ts.map +1 -0
  66. package/core/dom/queue-dom-content-loaded.js +7 -0
  67. package/core/dom/set-or-remove-attribute.d.ts +14 -0
  68. package/core/dom/set-or-remove-attribute.d.ts.map +1 -1
  69. package/core/dom/set-or-remove-attribute.js +11 -3
  70. package/core/dom.d.ts +2 -0
  71. package/core/dom.d.ts.map +1 -1
  72. package/core/dom.js +28 -22
  73. package/core/i18n/i18n.d.ts +6 -0
  74. package/core/i18n/i18n.d.ts.map +1 -1
  75. package/core/i18n/i18n.js +196 -160
  76. package/core/i18n.js +94 -88
  77. package/core/images.d.ts +4 -0
  78. package/core/images.d.ts.map +1 -1
  79. package/core/images.js +12 -12
  80. package/core/mixins.js +10 -10
  81. package/core/overlay/overlay-outside-pointer-event-listener.d.ts +26 -0
  82. package/core/overlay/overlay-outside-pointer-event-listener.d.ts.map +1 -0
  83. package/core/overlay/overlay-outside-pointer-event-listener.js +37 -0
  84. package/core/overlay.d.ts +1 -0
  85. package/core/overlay.d.ts.map +1 -1
  86. package/core/overlay.js +14 -11
  87. package/core/styles/core.scss +40 -13
  88. package/core/styles/mixins/a11y.scss +1 -1
  89. package/core/styles/mixins/badge.scss +2 -2
  90. package/core/styles/mixins/buttons.scss +14 -14
  91. package/core/styles/mixins/card.scss +9 -6
  92. package/core/styles/mixins/chip.scss +8 -8
  93. package/core/styles/mixins/image.scss +3 -0
  94. package/core/styles/mixins/link.scss +12 -7
  95. package/core/styles/mixins/lists.scss +6 -4
  96. package/core/styles/mixins/overlay.scss +6 -3
  97. package/core/styles/mixins/panel.scss +3 -3
  98. package/core/styles/mixins/pearl-chain-bullet.scss +9 -5
  99. package/core/styles/mixins/scrollbar.scss +17 -9
  100. package/core/styles/mixins/shadows.scss +32 -64
  101. package/core/styles/mixins/table.scss +13 -10
  102. package/core/styles/mixins/timetable-form.scss +63 -0
  103. package/core/styles/mixins/typo.scss +4 -4
  104. package/core/styles/node_modules_@sbb-esta_lyne-design-tokens_dist_scss_sbb-variables.scss +49 -1
  105. package/core/styles/node_modules_@sbb-esta_lyne-design-tokens_dist_scss_sbb-variables_css--mixin.scss +203 -5
  106. package/core/styles/off-brand-theme.scss +3 -0
  107. package/core/styles/safety-theme.scss +3 -0
  108. package/core/styles/standard-theme.scss +3 -13
  109. package/core/styles/theme.scss +18 -0
  110. package/core/styles/timetable-form.scss +27 -0
  111. package/core.css +283 -51
  112. package/custom-elements.json +19396 -15212
  113. package/date-input/date-input.component.js +1 -1
  114. package/datepicker/datepicker/datepicker.component.js +1 -1
  115. package/datepicker/datepicker-next-day/datepicker-next-day.component.js +4 -4
  116. package/datepicker/datepicker-previous-day/datepicker-previous-day.component.js +6 -6
  117. package/datepicker/datepicker-toggle/datepicker-toggle.component.js +7 -7
  118. package/development/alert/alert/alert.component.d.ts +2 -0
  119. package/development/alert/alert/alert.component.d.ts.map +1 -1
  120. package/development/alert/alert/alert.component.js +22 -8
  121. package/development/alert/alert-group/alert-group.component.js +1 -1
  122. package/development/autocomplete/autocomplete-base-element.d.ts +14 -0
  123. package/development/autocomplete/autocomplete-base-element.d.ts.map +1 -1
  124. package/development/autocomplete/autocomplete-base-element.js +86 -19
  125. package/development/autocomplete/autocomplete.component.d.ts.map +1 -1
  126. package/development/autocomplete/autocomplete.component.js +4 -1
  127. package/development/autocomplete-grid/autocomplete-grid/autocomplete-grid.component.d.ts.map +1 -1
  128. package/development/autocomplete-grid/autocomplete-grid/autocomplete-grid.component.js +4 -1
  129. package/development/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.component.js +15 -14
  130. package/development/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.component.js +5 -4
  131. package/development/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.component.js +19 -11
  132. package/development/breadcrumb/breadcrumb/breadcrumb.component.js +4 -1
  133. package/development/breadcrumb/breadcrumb-group/breadcrumb-group.component.js +16 -8
  134. package/development/button/common.js +1 -1
  135. package/development/button/mini-button/mini-button.component.js +15 -14
  136. package/development/button/mini-button-group/mini-button-group.component.js +4 -4
  137. package/development/button.js +1 -1
  138. package/development/calendar/calendar.component.js +21 -11
  139. package/development/card/card/card.component.js +11 -6
  140. package/development/card/card-badge/card-badge.component.js +10 -9
  141. package/development/carousel/carousel/carousel.component.d.ts +33 -0
  142. package/development/carousel/carousel/carousel.component.d.ts.map +1 -0
  143. package/development/carousel/carousel/carousel.component.js +163 -0
  144. package/development/carousel/carousel-item/carousel-item.component.d.ts +29 -0
  145. package/development/carousel/carousel-item/carousel-item.component.d.ts.map +1 -0
  146. package/development/carousel/carousel-item/carousel-item.component.js +46 -0
  147. package/development/carousel/carousel-item.d.ts +5 -0
  148. package/development/carousel/carousel-item.d.ts.map +1 -0
  149. package/development/carousel/carousel-item.js +5 -0
  150. package/development/carousel/carousel-list/carousel-list.component.d.ts +30 -0
  151. package/development/carousel/carousel-list/carousel-list.component.d.ts.map +1 -0
  152. package/development/carousel/carousel-list/carousel-list.component.js +151 -0
  153. package/development/carousel/carousel-list.d.ts +5 -0
  154. package/development/carousel/carousel-list.d.ts.map +1 -0
  155. package/development/carousel/carousel-list.js +5 -0
  156. package/development/carousel/carousel.d.ts +5 -0
  157. package/development/carousel/carousel.d.ts.map +1 -0
  158. package/development/carousel/carousel.js +5 -0
  159. package/development/carousel.d.ts +7 -0
  160. package/development/carousel.d.ts.map +1 -0
  161. package/development/carousel.js +9 -0
  162. package/development/checkbox/common.js +1 -1
  163. package/development/{checkbox-common-aMPOsPVA.js → checkbox-common-Dy_ofVhp.js} +4 -3
  164. package/development/checkbox.js +1 -1
  165. package/development/chip/chip/chip.component.js +15 -14
  166. package/development/chip-label/chip-label.component.js +12 -15
  167. package/development/clock/clock.component.js +11 -3
  168. package/development/container/container/container.component.js +6 -6
  169. package/development/container/sticky-bar/sticky-bar.component.js +6 -6
  170. package/development/core/config/config.d.ts +6 -0
  171. package/development/core/config/config.d.ts.map +1 -1
  172. package/development/core/config/config.js +1 -1
  173. package/development/core/controllers/media-matchers-controller.d.ts +29 -0
  174. package/development/core/controllers/media-matchers-controller.d.ts.map +1 -1
  175. package/development/core/controllers/media-matchers-controller.js +74 -1
  176. package/development/core/controllers.js +3 -1
  177. package/development/core/dom/contains-pierce-shadow-dom.d.ts +3 -0
  178. package/development/core/dom/contains-pierce-shadow-dom.d.ts.map +1 -0
  179. package/development/core/dom/contains-pierce-shadow-dom.js +14 -0
  180. package/development/core/dom/queue-dom-content-loaded.d.ts +5 -0
  181. package/development/core/dom/queue-dom-content-loaded.d.ts.map +1 -0
  182. package/development/core/dom/queue-dom-content-loaded.js +12 -0
  183. package/development/core/dom/set-or-remove-attribute.d.ts +14 -0
  184. package/development/core/dom/set-or-remove-attribute.d.ts.map +1 -1
  185. package/development/core/dom/set-or-remove-attribute.js +9 -1
  186. package/development/core/dom.d.ts +2 -0
  187. package/development/core/dom.d.ts.map +1 -1
  188. package/development/core/dom.js +8 -2
  189. package/development/core/i18n/i18n.d.ts +6 -0
  190. package/development/core/i18n/i18n.d.ts.map +1 -1
  191. package/development/core/i18n/i18n.js +43 -1
  192. package/development/core/i18n.js +7 -1
  193. package/development/core/images.d.ts +4 -0
  194. package/development/core/images.d.ts.map +1 -1
  195. package/development/core/images.js +11 -11
  196. package/development/core/mixins.js +7 -6
  197. package/development/core/overlay/overlay-outside-pointer-event-listener.d.ts +26 -0
  198. package/development/core/overlay/overlay-outside-pointer-event-listener.d.ts.map +1 -0
  199. package/development/core/overlay/overlay-outside-pointer-event-listener.js +61 -0
  200. package/development/core/overlay.d.ts +1 -0
  201. package/development/core/overlay.d.ts.map +1 -1
  202. package/development/core/overlay.js +4 -1
  203. package/development/date-input/date-input.component.js +2 -2
  204. package/development/datepicker/datepicker/datepicker.component.js +1 -1
  205. package/development/datepicker/datepicker-next-day/datepicker-next-day.component.js +15 -14
  206. package/development/datepicker/datepicker-previous-day/datepicker-previous-day.component.js +15 -14
  207. package/development/datepicker/datepicker-toggle/datepicker-toggle.component.js +15 -14
  208. package/development/dialog/dialog/dialog.component.d.ts +1 -0
  209. package/development/dialog/dialog/dialog.component.d.ts.map +1 -1
  210. package/development/dialog/dialog/dialog.component.js +28 -14
  211. package/development/dialog/dialog-actions/dialog-actions.component.js +1 -1
  212. package/development/dialog/dialog-title/dialog-title.component.js +1 -1
  213. package/development/divider/divider.component.js +2 -2
  214. package/development/expansion-panel/expansion-panel/expansion-panel.component.js +6 -6
  215. package/development/expansion-panel/expansion-panel-header/expansion-panel-header.component.js +6 -2
  216. package/development/file-selector/common.js +1 -1
  217. package/development/{file-selector-common-B4I8rwJE.js → file-selector-common-CRNAWFM_.js} +9 -6
  218. package/development/file-selector.js +1 -1
  219. package/development/flip-card/flip-card/flip-card.component.js +8 -3
  220. package/development/footer/footer.component.js +6 -5
  221. package/development/form-error/form-error.component.js +2 -2
  222. package/development/form-field/form-field/form-field.component.d.ts +3 -0
  223. package/development/form-field/form-field/form-field.component.d.ts.map +1 -1
  224. package/development/form-field/form-field/form-field.component.js +39 -23
  225. package/development/form-field/form-field-clear/form-field-clear.component.js +15 -14
  226. package/development/header/common/header-action-common.js +12 -12
  227. package/development/header/header/header.component.js +2 -2
  228. package/development/header/header-environment/header-environment.component.js +1 -1
  229. package/development/{icon-sidebar-button-common-CA_8TnFu.js → icon-sidebar-button-common-BGrKtvyM.js} +3 -2
  230. package/development/journey-header/journey-header.component.js +1 -1
  231. package/development/lead-container/lead-container.component.js +4 -2
  232. package/development/link/common/block-link-common.js +17 -5
  233. package/development/link/common/inline-link-common.js +9 -3
  234. package/development/link-list/link-list/link-list.component.js +8 -8
  235. package/development/link-list/link-list-anchor/link-list-anchor.component.js +11 -9
  236. package/development/loading-indicator/loading-indicator.component.js +1 -1
  237. package/development/loading-indicator-circle/loading-indicator-circle.component.js +2 -2
  238. package/development/logo/logo.component.js +3 -2
  239. package/development/map-container/map-container.component.js +14 -6
  240. package/development/menu/common/menu-action-common.js +4 -3
  241. package/development/menu/menu/menu.component.d.ts +2 -0
  242. package/development/menu/menu/menu.component.d.ts.map +1 -1
  243. package/development/menu/menu/menu.component.js +36 -13
  244. package/development/message/message.component.js +3 -1
  245. package/development/navigation/common/navigation-action-common.js +4 -4
  246. package/development/navigation/navigation/navigation.component.js +21 -19
  247. package/development/navigation/navigation-list/navigation-list.component.js +1 -1
  248. package/development/navigation/navigation-marker/navigation-marker.component.js +1 -1
  249. package/development/navigation/navigation-section/navigation-section.component.js +4 -4
  250. package/development/notification/notification.component.js +38 -18
  251. package/development/option/optgroup/optgroup-base-element.js +3 -2
  252. package/development/option/option/option.component.js +13 -11
  253. package/development/option/option-hint/option-hint.component.js +3 -2
  254. package/development/overlay/overlay.component.d.ts.map +1 -1
  255. package/development/overlay/overlay.component.js +28 -22
  256. package/development/paginator/compact-paginator/compact-paginator.component.js +3 -2
  257. package/development/paginator/paginator/paginator.component.js +19 -18
  258. package/development/popover/popover/popover.component.js +8 -6
  259. package/development/popover/popover-trigger/popover-trigger.component.js +20 -17
  260. package/development/radio-button/common.js +1 -1
  261. package/development/radio-button/radio-button/radio-button.component.js +3 -3
  262. package/development/radio-button/radio-button-panel/radio-button-panel.component.js +3 -3
  263. package/development/{radio-button-common-BRyEhlYf.js → radio-button-common-CgM3kQSW.js} +10 -9
  264. package/development/radio-button.js +1 -1
  265. package/development/sbb-tokens-CVLcOi-S.js +1 -1
  266. package/development/screen-reader-only/screen-reader-only.component.js +1 -1
  267. package/development/select/select.component.js +31 -13
  268. package/development/selection-action-panel/selection-action-panel.component.js +9 -5
  269. package/development/selection-expansion-panel/selection-expansion-panel.component.js +10 -6
  270. package/development/sidebar/common.js +1 -1
  271. package/development/sidebar/icon-sidebar/icon-sidebar.component.js +2 -2
  272. package/development/sidebar/sidebar/sidebar.component.js +14 -6
  273. package/development/sidebar.js +1 -1
  274. package/development/signet/signet.component.js +2 -2
  275. package/development/skiplink-list/skiplink-list.component.d.ts +3 -1
  276. package/development/skiplink-list/skiplink-list.component.d.ts.map +1 -1
  277. package/development/skiplink-list/skiplink-list.component.js +27 -10
  278. package/development/slider/slider.component.js +15 -9
  279. package/development/status/status.component.js +7 -7
  280. package/development/stepper/step/step.component.js +1 -3
  281. package/development/stepper/step-label/step-label.component.js +7 -6
  282. package/development/stepper/stepper/stepper.component.js +5 -5
  283. package/development/tabs/tab-label/tab-label.component.js +7 -14
  284. package/development/tag/tag/tag.component.js +15 -9
  285. package/development/teaser/teaser.component.js +3 -2
  286. package/development/teaser-hero/teaser-hero.component.js +3 -3
  287. package/development/teaser-product/common.js +1 -1
  288. package/development/{teaser-product-common-D6fa6x3w.js → teaser-product-common-DvlBRkE_.js} +14 -6
  289. package/development/teaser-product.js +1 -1
  290. package/development/time-input/time-input.component.js +2 -2
  291. package/development/timetable-form/timetable-form/timetable-form.component.d.ts +17 -0
  292. package/development/timetable-form/timetable-form/timetable-form.component.d.ts.map +1 -0
  293. package/development/timetable-form/timetable-form/timetable-form.component.js +40 -0
  294. package/development/timetable-form/timetable-form-details/timetable-form-details.component.d.ts +16 -0
  295. package/development/timetable-form/timetable-form-details/timetable-form-details.component.d.ts.map +1 -0
  296. package/development/timetable-form/timetable-form-details/timetable-form-details.component.js +57 -0
  297. package/development/timetable-form/timetable-form-details.d.ts +5 -0
  298. package/development/timetable-form/timetable-form-details.d.ts.map +1 -0
  299. package/development/timetable-form/timetable-form-details.js +5 -0
  300. package/development/timetable-form/timetable-form-field/timetable-form-field.component.d.ts +18 -0
  301. package/development/timetable-form/timetable-form-field/timetable-form-field.component.d.ts.map +1 -0
  302. package/development/timetable-form/timetable-form-field/timetable-form-field.component.js +130 -0
  303. package/development/timetable-form/timetable-form-field.d.ts +5 -0
  304. package/development/timetable-form/timetable-form-field.d.ts.map +1 -0
  305. package/development/timetable-form/timetable-form-field.js +5 -0
  306. package/development/timetable-form/timetable-form-swap-button/timetable-form-swap-button.component.d.ts +23 -0
  307. package/development/timetable-form/timetable-form-swap-button/timetable-form-swap-button.component.d.ts.map +1 -0
  308. package/development/timetable-form/timetable-form-swap-button/timetable-form-swap-button.component.js +80 -0
  309. package/development/timetable-form/timetable-form-swap-button.d.ts +5 -0
  310. package/development/timetable-form/timetable-form-swap-button.d.ts.map +1 -0
  311. package/development/timetable-form/timetable-form-swap-button.js +5 -0
  312. package/development/timetable-form/timetable-form.d.ts +5 -0
  313. package/development/timetable-form/timetable-form.d.ts.map +1 -0
  314. package/development/timetable-form/timetable-form.js +5 -0
  315. package/development/timetable-form.d.ts +8 -0
  316. package/development/timetable-form.d.ts.map +1 -0
  317. package/development/timetable-form.js +11 -0
  318. package/development/timetable-occupancy/timetable-occupancy.component.js +2 -2
  319. package/development/timetable-occupancy-icon/timetable-occupancy-icon.component.d.ts +1 -0
  320. package/development/timetable-occupancy-icon/timetable-occupancy-icon.component.d.ts.map +1 -1
  321. package/development/timetable-occupancy-icon/timetable-occupancy-icon.component.js +4 -3
  322. package/development/title/title-base.js +2 -5
  323. package/development/title/title.component.js +1 -1
  324. package/development/toast/toast.component.d.ts +3 -1
  325. package/development/toast/toast.component.d.ts.map +1 -1
  326. package/development/toast/toast.component.js +31 -15
  327. package/development/toggle/toggle/toggle.component.js +8 -4
  328. package/development/toggle/toggle-option/toggle-option.component.js +5 -3
  329. package/development/toggle-check/toggle-check.component.js +13 -14
  330. package/development/tooltip/tooltip.component.d.ts +89 -0
  331. package/development/tooltip/tooltip.component.d.ts.map +1 -0
  332. package/development/tooltip/tooltip.component.js +466 -0
  333. package/development/tooltip.d.ts +5 -0
  334. package/development/tooltip.d.ts.map +1 -0
  335. package/development/tooltip.js +5 -0
  336. package/development/train/train/train.component.js +1 -1
  337. package/development/train/train-blocked-passage/train-blocked-passage.component.js +1 -1
  338. package/development/train/train-formation/train-formation.component.js +16 -4
  339. package/development/train/train-wagon/train-wagon.component.js +4 -13
  340. package/development/{transparent-button-COe-YB_U.js → transparent-button-DdSaBp_-.js} +141 -86
  341. package/development/visual-checkbox/visual-checkbox.component.js +12 -12
  342. package/dialog/dialog/dialog.component.d.ts +1 -0
  343. package/dialog/dialog/dialog.component.d.ts.map +1 -1
  344. package/dialog/dialog/dialog.component.js +37 -36
  345. package/dialog/dialog-actions/dialog-actions.component.js +6 -6
  346. package/dialog/dialog-title/dialog-title.component.js +4 -4
  347. package/divider/divider.component.js +16 -16
  348. package/expansion-panel/expansion-panel/expansion-panel.component.js +1 -1
  349. package/expansion-panel/expansion-panel-header/expansion-panel-header.component.js +3 -3
  350. package/file-selector/common.js +1 -1
  351. package/file-selector-common-D88J9PEh.js +5 -0
  352. package/file-selector.js +1 -1
  353. package/flip-card/flip-card/flip-card.component.js +14 -14
  354. package/footer/footer.component.js +18 -18
  355. package/form-error/form-error.component.js +4 -4
  356. package/form-field/form-field/form-field.component.d.ts +3 -0
  357. package/form-field/form-field/form-field.component.d.ts.map +1 -1
  358. package/form-field/form-field/form-field.component.js +1 -1
  359. package/form-field/form-field-clear/form-field-clear.component.js +9 -9
  360. package/header/common/header-action-common.js +5 -5
  361. package/header/header/header.component.js +19 -19
  362. package/header/header-environment/header-environment.component.js +1 -1
  363. package/icon-sidebar-button-common-BeRXvifI.js +7 -0
  364. package/index.d.ts +16 -0
  365. package/index.js +16 -0
  366. package/journey-header/journey-header.component.js +1 -1
  367. package/lead-container/lead-container.component.js +5 -5
  368. package/link/common/block-link-common.js +23 -23
  369. package/link/common/inline-link-common.js +7 -7
  370. package/link-list/link-list/link-list.component.js +8 -8
  371. package/link-list/link-list-anchor/link-list-anchor.component.js +11 -11
  372. package/lists.css +5 -3
  373. package/loading-indicator/loading-indicator.component.js +1 -1
  374. package/loading-indicator-circle/loading-indicator-circle.component.js +13 -13
  375. package/logo/logo.component.js +9 -9
  376. package/map-container/map-container.component.js +15 -15
  377. package/menu/common/menu-action-common.js +5 -5
  378. package/menu/menu/menu.component.d.ts +2 -0
  379. package/menu/menu/menu.component.d.ts.map +1 -1
  380. package/menu/menu/menu.component.js +45 -38
  381. package/message/message.component.js +9 -9
  382. package/navigation/common/navigation-action-common.js +6 -6
  383. package/navigation/navigation/navigation.component.js +19 -19
  384. package/navigation/navigation-list/navigation-list.component.js +1 -1
  385. package/navigation/navigation-marker/navigation-marker.component.js +1 -1
  386. package/navigation/navigation-section/navigation-section.component.js +1 -1
  387. package/notification/notification.component.js +8 -8
  388. package/off-brand-theme.css +3017 -0
  389. package/option/optgroup/optgroup-base-element.js +1 -1
  390. package/option/option/option.component.js +3 -3
  391. package/option/option-hint/option-hint.component.js +8 -8
  392. package/overlay/overlay.component.d.ts.map +1 -1
  393. package/overlay/overlay.component.js +47 -48
  394. package/package.json +63 -1
  395. package/paginator/compact-paginator/compact-paginator.component.js +4 -4
  396. package/paginator/paginator/paginator.component.js +10 -10
  397. package/popover/popover/popover.component.js +9 -9
  398. package/popover/popover-trigger/popover-trigger.component.js +5 -5
  399. package/radio-button/common.js +1 -1
  400. package/radio-button/radio-button/radio-button.component.js +13 -13
  401. package/radio-button/radio-button-panel/radio-button-panel.component.js +2 -2
  402. package/radio-button-common-Nm9ULjVb.js +5 -0
  403. package/radio-button.js +1 -1
  404. package/safety-theme.css +3017 -0
  405. package/screen-reader-only/screen-reader-only.component.js +1 -1
  406. package/scrollbar.css +52 -20
  407. package/select/select.component.js +45 -45
  408. package/selection-action-panel/selection-action-panel.component.js +6 -6
  409. package/selection-expansion-panel/selection-expansion-panel.component.js +11 -11
  410. package/sidebar/common.js +1 -1
  411. package/sidebar/icon-sidebar/icon-sidebar.component.js +12 -12
  412. package/sidebar/sidebar/sidebar.component.js +29 -29
  413. package/sidebar.js +1 -1
  414. package/signet/signet.component.js +1 -1
  415. package/skiplink-list/skiplink-list.component.d.ts +3 -1
  416. package/skiplink-list/skiplink-list.component.d.ts.map +1 -1
  417. package/skiplink-list/skiplink-list.component.js +37 -30
  418. package/slider/slider.component.js +16 -16
  419. package/standard-theme.css +436 -86
  420. package/status/status.component.js +13 -13
  421. package/stepper/step/step.component.js +5 -5
  422. package/stepper/step-label/step-label.component.js +1 -1
  423. package/stepper/stepper/stepper.component.js +7 -7
  424. package/table.css +15 -9
  425. package/tabs/tab-label/tab-label.component.js +19 -19
  426. package/tag/tag/tag.component.js +14 -14
  427. package/teaser/teaser.component.js +1 -1
  428. package/teaser-hero/teaser-hero.component.js +12 -12
  429. package/teaser-product/common.js +1 -1
  430. package/teaser-product-common-DIra6aVg.js +5 -0
  431. package/teaser-product.js +1 -1
  432. package/time-input/time-input.component.js +1 -1
  433. package/timetable-form/timetable-form/timetable-form.component.d.ts +17 -0
  434. package/timetable-form/timetable-form/timetable-form.component.d.ts.map +1 -0
  435. package/timetable-form/timetable-form/timetable-form.component.js +19 -0
  436. package/timetable-form/timetable-form-details/timetable-form-details.component.d.ts +16 -0
  437. package/timetable-form/timetable-form-details/timetable-form-details.component.d.ts.map +1 -0
  438. package/timetable-form/timetable-form-details/timetable-form-details.component.js +19 -0
  439. package/timetable-form/timetable-form-details.d.ts +5 -0
  440. package/timetable-form/timetable-form-details.d.ts.map +1 -0
  441. package/timetable-form/timetable-form-details.js +4 -0
  442. package/timetable-form/timetable-form-field/timetable-form-field.component.d.ts +18 -0
  443. package/timetable-form/timetable-form-field/timetable-form-field.component.d.ts.map +1 -0
  444. package/timetable-form/timetable-form-field/timetable-form-field.component.js +32 -0
  445. package/timetable-form/timetable-form-field.d.ts +5 -0
  446. package/timetable-form/timetable-form-field.d.ts.map +1 -0
  447. package/timetable-form/timetable-form-field.js +4 -0
  448. package/timetable-form/timetable-form-swap-button/timetable-form-swap-button.component.d.ts +23 -0
  449. package/timetable-form/timetable-form-swap-button/timetable-form-swap-button.component.d.ts.map +1 -0
  450. package/timetable-form/timetable-form-swap-button/timetable-form-swap-button.component.js +38 -0
  451. package/timetable-form/timetable-form-swap-button.d.ts +5 -0
  452. package/timetable-form/timetable-form-swap-button.d.ts.map +1 -0
  453. package/timetable-form/timetable-form-swap-button.js +4 -0
  454. package/timetable-form/timetable-form.d.ts +5 -0
  455. package/timetable-form/timetable-form.d.ts.map +1 -0
  456. package/timetable-form/timetable-form.js +4 -0
  457. package/timetable-form.css +73 -0
  458. package/timetable-form.d.ts +8 -0
  459. package/timetable-form.d.ts.map +1 -0
  460. package/timetable-form.js +10 -0
  461. package/timetable-occupancy/timetable-occupancy.component.js +7 -7
  462. package/timetable-occupancy-icon/timetable-occupancy-icon.component.d.ts +1 -0
  463. package/timetable-occupancy-icon/timetable-occupancy-icon.component.d.ts.map +1 -1
  464. package/timetable-occupancy-icon/timetable-occupancy-icon.component.js +23 -23
  465. package/title/title-base.js +1 -1
  466. package/title/title.component.js +1 -1
  467. package/toast/toast.component.d.ts +3 -1
  468. package/toast/toast.component.d.ts.map +1 -1
  469. package/toast/toast.component.js +67 -59
  470. package/toggle/toggle/toggle.component.js +1 -1
  471. package/toggle/toggle-option/toggle-option.component.js +5 -5
  472. package/toggle-check/toggle-check.component.js +16 -16
  473. package/tooltip/tooltip.component.d.ts +89 -0
  474. package/tooltip/tooltip.component.d.ts.map +1 -0
  475. package/tooltip/tooltip.component.js +215 -0
  476. package/tooltip.d.ts +5 -0
  477. package/tooltip.d.ts.map +1 -0
  478. package/tooltip.js +4 -0
  479. package/train/train/train.component.js +1 -1
  480. package/train/train-blocked-passage/train-blocked-passage.component.js +1 -1
  481. package/train/train-formation/train-formation.component.js +16 -16
  482. package/train/train-wagon/train-wagon.component.js +1 -1
  483. package/transparent-button-Bg9fU_iZ.js +9 -0
  484. package/typography.css +1 -0
  485. package/visual-checkbox/visual-checkbox.component.js +14 -14
  486. package/checkbox-common-CDzcyq8p.js +0 -5
  487. package/file-selector-common-Cn6U8goV.js +0 -5
  488. package/icon-sidebar-button-common-CM-ueEhH.js +0 -7
  489. package/radio-button-common-DzALx3X7.js +0 -5
  490. package/teaser-product-common-C8oSkIxy.js +0 -5
  491. 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,15 +1419,16 @@ 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
 
1220
- sbb-form-field :where(input, select, textarea, sbb-select, sbb-date-input, sbb-time-input) {
1431
+ :is(sbb-form-field, sbb-timetable-form-field) :where(input, select, textarea, sbb-select, sbb-date-input, sbb-time-input) {
1221
1432
  --sbb-text-font-size: var(--sbb-font-size-text-m);
1222
1433
  font-family: var(--sbb-typo-font-family);
1223
1434
  font-weight: normal;
@@ -1244,137 +1455,147 @@ sbb-form-field :where(input, select, textarea, sbb-select, sbb-date-input, sbb-t
1244
1455
  font-family: var(--sbb-typo-font-family) !important;
1245
1456
  line-height: var(--sbb-typo-line-height-body-text) !important;
1246
1457
  }
1247
- sbb-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);
1458
+ :is(sbb-form-field, sbb-timetable-form-field) :where(input, select, textarea, sbb-select, sbb-date-input, sbb-time-input)::placeholder {
1459
+ color: var(--sbb-color-5);
1460
+ -webkit-text-fill-color: var(--sbb-color-5);
1250
1461
  opacity: 1;
1251
1462
  }
1252
- sbb-form-field[floating-label] :where(input, select, textarea, sbb-select)::placeholder, sbb-form-field[floating-label] :where(sbb-date-input, sbb-time-input)::after {
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 {
1253
1464
  color: transparent !important;
1254
1465
  -webkit-text-fill-color: transparent !important;
1255
1466
  }
1256
1467
  @media (forced-colors: active) {
1257
- sbb-form-field[floating-label] :where(input, select, textarea, sbb-select)::placeholder, sbb-form-field[floating-label] :where(sbb-date-input, sbb-time-input)::after {
1468
+ :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 {
1258
1469
  color: Canvas !important;
1259
1470
  -webkit-text-fill-color: Canvas !important;
1260
1471
  }
1261
1472
  }
1262
- sbb-form-field:not([floating-label]) :where(input, select, textarea, sbb-select):disabled::placeholder {
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
- sbb-form-field :where(select) {
1479
+ :is(sbb-form-field, sbb-timetable-form-field) :where(select) {
1267
1480
  vertical-align: middle;
1268
1481
  }
1269
- sbb-form-field :where(select, sbb-select) {
1482
+ :is(sbb-form-field, sbb-timetable-form-field) :where(select, sbb-select) {
1270
1483
  padding-inline-end: var(--sbb-form-field-select-inline-padding-end);
1271
1484
  }
1272
- sbb-form-field[size=s] :where(input, sbb-date-input, sbb-time-input) {
1485
+ :is(sbb-form-field, sbb-timetable-form-field)[size=s] :where(input, sbb-date-input, sbb-time-input) {
1273
1486
  height: calc(var(--sbb-form-field-input-text-size) * 1.25);
1274
1487
  line-height: 1 !important;
1275
1488
  margin-block: calc(0.5 * var(--sbb-form-field-input-text-size) * (var(--sbb-typo-line-height-body-text) - 1.25));
1276
1489
  }
1277
- sbb-form-field :where(textarea) {
1490
+ :is(sbb-form-field, sbb-timetable-form-field) :where(textarea) {
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
  }
1286
- sbb-form-field :where(textarea)::-webkit-scrollbar {
1507
+ :is(sbb-form-field, sbb-timetable-form-field) :where(textarea)::-webkit-scrollbar {
1287
1508
  width: var(--sbb-scrollbar-width);
1288
1509
  height: var(--sbb-scrollbar-width);
1289
1510
  background-color: var(--sbb-scrollbar-track-color, transparent);
1290
1511
  }
1291
- sbb-form-field :where(textarea)::-webkit-scrollbar-corner {
1512
+ :is(sbb-form-field, sbb-timetable-form-field) :where(textarea)::-webkit-scrollbar-corner {
1292
1513
  background-color: var(--sbb-scrollbar-track-color, transparent);
1293
1514
  }
1294
- sbb-form-field :where(textarea)::-webkit-scrollbar-thumb {
1515
+ :is(sbb-form-field, sbb-timetable-form-field) :where(textarea)::-webkit-scrollbar-thumb {
1295
1516
  background-color: var(--sbb-scrollbar-color, currentcolor);
1296
1517
  border: calc(0.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;
1297
1518
  border-radius: var(--sbb-border-radius-4x);
1298
1519
  background-clip: padding-box;
1299
1520
  }
1300
- sbb-form-field :where(textarea)::-webkit-scrollbar-thumb:hover {
1521
+ :is(sbb-form-field, sbb-timetable-form-field) :where(textarea)::-webkit-scrollbar-thumb:hover {
1301
1522
  background-color: var(--sbb-scrollbar-color-hover, currentcolor);
1302
1523
  border-width: calc(0.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)));
1303
1524
  }
1304
- sbb-form-field :where(textarea)::-webkit-scrollbar-button, sbb-form-field :where(textarea)::-webkit-scrollbar-corner {
1525
+ :is(sbb-form-field, sbb-timetable-form-field) :where(textarea)::-webkit-scrollbar-button, :is(sbb-form-field, sbb-timetable-form-field) :where(textarea)::-webkit-scrollbar-corner {
1305
1526
  display: none;
1306
1527
  }
1307
1528
  @supports not selector(::-webkit-scrollbar) {
1308
- sbb-form-field :where(textarea) {
1529
+ :is(sbb-form-field, sbb-timetable-form-field) :where(textarea) {
1309
1530
  scrollbar-width: var(--sbb-scrollbar-width-firefox);
1310
1531
  scrollbar-color: var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent);
1311
1532
  }
1312
1533
  }
1313
- sbb-form-field :where(textarea) {
1534
+ :is(sbb-form-field, sbb-timetable-form-field) :where(textarea) {
1314
1535
  position: relative;
1315
1536
  resize: none;
1316
1537
  white-space: break-spaces;
1317
1538
  overflow-y: auto;
1318
1539
  min-height: calc(var(--sbb-typo-line-height-body-text) * 1em);
1319
1540
  }
1320
- sbb-form-field[size=l] :where(textarea) {
1541
+ :is(sbb-form-field, sbb-timetable-form-field)[size=l] :where(textarea) {
1321
1542
  padding-block-end: 0.34375rem;
1322
1543
  }
1323
- sbb-form-field[negative] :where(textarea) {
1544
+ :is(sbb-form-field, sbb-timetable-form-field)[negative] :where(textarea) {
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
  }
1332
- sbb-form-field[negative] :where(textarea)::-webkit-scrollbar {
1553
+ :is(sbb-form-field, sbb-timetable-form-field)[negative] :where(textarea)::-webkit-scrollbar {
1333
1554
  width: var(--sbb-scrollbar-width);
1334
1555
  height: var(--sbb-scrollbar-width);
1335
1556
  background-color: var(--sbb-scrollbar-track-color, transparent);
1336
1557
  }
1337
- sbb-form-field[negative] :where(textarea)::-webkit-scrollbar-corner {
1558
+ :is(sbb-form-field, sbb-timetable-form-field)[negative] :where(textarea)::-webkit-scrollbar-corner {
1338
1559
  background-color: var(--sbb-scrollbar-track-color, transparent);
1339
1560
  }
1340
- sbb-form-field[negative] :where(textarea)::-webkit-scrollbar-thumb {
1561
+ :is(sbb-form-field, sbb-timetable-form-field)[negative] :where(textarea)::-webkit-scrollbar-thumb {
1341
1562
  background-color: var(--sbb-scrollbar-color, currentcolor);
1342
1563
  border: calc(0.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;
1343
1564
  border-radius: var(--sbb-border-radius-4x);
1344
1565
  background-clip: padding-box;
1345
1566
  }
1346
- sbb-form-field[negative] :where(textarea)::-webkit-scrollbar-thumb:hover {
1567
+ :is(sbb-form-field, sbb-timetable-form-field)[negative] :where(textarea)::-webkit-scrollbar-thumb:hover {
1347
1568
  background-color: var(--sbb-scrollbar-color-hover, currentcolor);
1348
1569
  border-width: calc(0.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)));
1349
1570
  }
1350
- sbb-form-field[negative] :where(textarea)::-webkit-scrollbar-button, sbb-form-field[negative] :where(textarea)::-webkit-scrollbar-corner {
1571
+ :is(sbb-form-field, sbb-timetable-form-field)[negative] :where(textarea)::-webkit-scrollbar-button, :is(sbb-form-field, sbb-timetable-form-field)[negative] :where(textarea)::-webkit-scrollbar-corner {
1351
1572
  display: none;
1352
1573
  }
1353
1574
  @supports not selector(::-webkit-scrollbar) {
1354
- sbb-form-field[negative] :where(textarea) {
1575
+ :is(sbb-form-field, sbb-timetable-form-field)[negative] :where(textarea) {
1355
1576
  scrollbar-width: var(--sbb-scrollbar-width-firefox);
1356
1577
  scrollbar-color: var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent);
1357
1578
  }
1358
1579
  }
1359
- sbb-form-field:has(:is(:is(input, textarea, select):user-invalid,
1580
+ :is(sbb-form-field, sbb-timetable-form-field):has(:is(:is(input, textarea, select):user-invalid,
1360
1581
  :is(:state(interacted),[state--interacted]):invalid,
1361
1582
  .ng-touched.ng-invalid,
1362
- .sbb-invalid)), :is(.ng-submitted, .sbb-show-errors) sbb-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);
1583
+ .sbb-invalid)), :is(.ng-submitted, .sbb-show-errors) :is(sbb-form-field, sbb-timetable-form-field):has(:is(:invalid, .ng-invalid)) {
1584
+ --sbb-form-field-border-color: var(--sbb-color-error);
1585
+ --sbb-form-field-text-color: var(--sbb-color-error);
1365
1586
  }
1366
- sbb-form-field:has(:is(:is(input, textarea, select):user-invalid,
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
- .sbb-invalid))[negative], :is(.ng-submitted, .sbb-show-errors) sbb-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);
1590
+ .sbb-invalid))[negative], :is(.ng-submitted, .sbb-show-errors) :is(sbb-form-field, sbb-timetable-form-field):has(:is(:invalid, .ng-invalid))[negative] {
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
- sbb-form-field:has(:is(:is(input, textarea, select):user-invalid,
1595
+ :is(sbb-form-field, sbb-timetable-form-field):has(:is(:is(input, textarea, select):user-invalid,
1375
1596
  :is(:state(interacted),[state--interacted]):invalid,
1376
1597
  .ng-touched.ng-invalid,
1377
- .sbb-invalid)), :is(.ng-submitted, .sbb-show-errors) sbb-form-field:has(:is(:invalid, .ng-invalid)) {
1598
+ .sbb-invalid)), :is(.ng-submitted, .sbb-show-errors) :is(sbb-form-field, sbb-timetable-form-field):has(:is(:invalid, .ng-invalid)) {
1378
1599
  --sbb-form-field-border-color: LinkText !important;
1379
1600
  --sbb-form-field-text-color: LinkText !important;
1380
1601
  }
@@ -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,13 @@ 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;
1678
1910
  }