@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
@@ -2,16 +2,16 @@ var h = (t) => {
2
2
  throw TypeError(t);
3
3
  };
4
4
  var y = (t, s, e) => s.has(t) || h("Cannot " + e);
5
- var f = (t, s, e) => (y(t, s, "read from private field"), e ? e.call(t) : s.get(t)), _ = (t, s, e) => s.has(t) ? h("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(t) : s.set(t, e), b = (t, s, e, l) => (y(t, s, "write to private field"), l ? l.call(t, e) : s.set(t, e), e);
5
+ var f = (t, s, e) => (y(t, s, "read from private field"), e ? e.call(t) : s.get(t)), _ = (t, s, e) => s.has(t) ? h("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(t) : s.set(t, e), c = (t, s, e, r) => (y(t, s, "write to private field"), r ? r.call(t, e) : s.set(t, e), e);
6
6
  import { __esDecorate as g, __runInitializers as n } from "tslib";
7
7
  import { css as x, LitElement as z, html as v } from "lit";
8
8
  import { customElement as S, property as k } from "lit/decorators.js";
9
9
  import { SbbIconNameMixin as E } from "../icon.js";
10
- const I = x`*,:before,:after{box-sizing:border-box}:host{--sbb-status-color: var(--sbb-color-iron);--sbb-status-gap: var(--sbb-spacing-fixed-1x);--sbb-status-text-color: var(--sbb-status-color);--_sbb-status-icon-color: var(--sbb-status-color);display:block}:host([type=error]){--sbb-status-color: var(--sbb-color-red125)}:host([type=success]){--sbb-status-color: var(--sbb-color-green)}:host([type=warning]){--sbb-status-color: var(--sbb-color-charcoal)}:host([type=pending]){--sbb-status-color: var(--sbb-color-sky)}:host([type=incomplete]){--sbb-status-color: var(--sbb-color-red125)}:host([type=not-started]){--sbb-status-color: var(--sbb-color-smoke);--sbb-status-text-color: var(--sbb-color-charcoal)}:host([type=in-progress]){--sbb-status-color: var(--sbb-color-pink)}.sbb-status{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);display:flex;gap:var(--sbb-status-gap);color:var(--_sbb-status-text-color-override, var(--sbb-status-text-color))}.sbb-status__icon{display:flex;flex-shrink:0;color:var(--_sbb-status-icon-color);margin-block-start:calc((var(--_sbb-status-title-font-size, var(--sbb-font-size-text-s)) * var(--_sbb-status-title-line-height, var(--sbb-typo-line-height-body-text)) - var(--sbb-size-icon-ui-small)) / 2)}.sbb-status__content-slot{display:inline;margin:0;padding:0}::slotted(sbb-title){margin-block:0}`;
10
+ const I = x`*,:before,:after{box-sizing:border-box}:host{--sbb-status-color: var(--sbb-color-4);--sbb-status-gap: var(--sbb-spacing-fixed-1x);--sbb-status-text-color: var(--sbb-status-color);--_sbb-status-icon-color: var(--sbb-status-color);display:block}:host([type=error]){--sbb-status-color: var(--sbb-color-error)}:host([type=success]){--sbb-status-color: var(--sbb-color-success)}:host([type=warning]){--sbb-status-color: var(--sbb-color-2)}:host([type=pending]){--sbb-status-color: var(--sbb-color-sky)}:host([type=incomplete]){--sbb-status-color: var(--sbb-color-error)}:host([type=not-started]){--sbb-status-color: var(--sbb-color-5);--sbb-status-text-color: var(--sbb-color-2)}:host([type=in-progress]){--sbb-status-color: var(--sbb-color-pink)}.sbb-status{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);display:flex;gap:var(--sbb-status-gap);color:var(--_sbb-status-text-color-override, var(--sbb-status-text-color))}.sbb-status__icon{display:flex;flex-shrink:0;color:var(--_sbb-status-icon-color);margin-block-start:calc((var(--_sbb-status-title-font-size, var(--sbb-font-size-text-s)) * var(--_sbb-status-title-line-height, var(--sbb-typo-line-height-body-text)) - var(--sbb-size-icon-ui-small)) / 2)}.sbb-status__content-slot{display:inline;margin:0;padding:0}::slotted(sbb-title){margin-block:0}`;
11
11
  let L = (() => {
12
- var i, r;
13
- let t = [S("sbb-status")], s, e = [], l, p = E(z), u, m = [], d = [];
14
- return r = class extends p {
12
+ var i, l;
13
+ let t = [S("sbb-status")], s, e = [], r, p = E(z), u, m = [], d = [];
14
+ return l = class extends p {
15
15
  constructor() {
16
16
  super(...arguments);
17
17
  _(this, i);
@@ -24,21 +24,21 @@ let L = (() => {
24
24
  ["incomplete", "circle-dotted-part-x-small"],
25
25
  ["not-started", "circle-dotted-small"],
26
26
  ["in-progress", "circle-dotted-part-small"]
27
- ]), b(this, i, n(this, m, "info")), n(this, d);
27
+ ]), c(this, i, n(this, m, "info")), n(this, d);
28
28
  }
29
29
  /** The type of the status. */
30
30
  get type() {
31
31
  return f(this, i);
32
32
  }
33
33
  set type(a) {
34
- b(this, i, a);
34
+ c(this, i, a);
35
35
  }
36
36
  _handleSlotchange() {
37
37
  const a = Array.from(this.children).find((o) => o.localName === "sbb-title");
38
38
  a && (a.slot = "title");
39
39
  }
40
40
  _configureTitle(a) {
41
- const o = a.target.assignedElements().find((c) => c.localName === "sbb-title");
41
+ const o = a.target.assignedElements().find((b) => b.localName === "sbb-title");
42
42
  o && (customElements.upgrade(o), o.visualLevel = "5");
43
43
  }
44
44
  renderIconSlot() {
@@ -61,12 +61,12 @@ let L = (() => {
61
61
  </div>
62
62
  `;
63
63
  }
64
- }, i = new WeakMap(), l = r, (() => {
64
+ }, i = new WeakMap(), r = l, (() => {
65
65
  const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(p[Symbol.metadata] ?? null) : void 0;
66
- u = [k({ reflect: !0 })], g(r, null, u, { kind: "accessor", name: "type", static: !1, private: !1, access: { has: (o) => "type" in o, get: (o) => o.type, set: (o, c) => {
67
- o.type = c;
68
- } }, metadata: a }, m, d), g(null, s = { value: l }, t, { kind: "class", name: l.name, metadata: a }, null, e), l = s.value, a && Object.defineProperty(l, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a });
69
- })(), r.styles = I, n(l, e), l;
66
+ u = [k({ reflect: !0 })], g(l, null, u, { kind: "accessor", name: "type", static: !1, private: !1, access: { has: (o) => "type" in o, get: (o) => o.type, set: (o, b) => {
67
+ o.type = b;
68
+ } }, metadata: a }, m, d), g(null, s = { value: r }, t, { kind: "class", name: r.name, metadata: a }, null, e), r = s.value, a && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a });
69
+ })(), l.styles = I, n(r, e), r;
70
70
  })();
71
71
  export {
72
72
  L as SbbStatusElement
@@ -1,12 +1,12 @@
1
- import { __esDecorate as l, __runInitializers as p } from "tslib";
1
+ import { __esDecorate as o, __runInitializers as p } from "tslib";
2
2
  import { ResizeController as d } from "@lit-labs/observers/resize-controller.js";
3
- import { css as c, LitElement as h, html as m } from "lit";
3
+ import { css as h, LitElement as c, html as m } from "lit";
4
4
  import { customElement as u } from "lit/decorators.js";
5
5
  import { SbbElementInternalsMixin as v, removeAriaElements as y, appendAriaElements as g } from "../../core/mixins.js";
6
- const f = c`*,:before,:after{box-sizing:border-box}:host{--sbb-step-position: initial;--sbb-step-inset-block-start: unset;--sbb-step-opacity: 0;--sbb-step-display: none;--sbb-step-height: 0;--sbb-step-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-step-animation-delay: 0;--sbb-step-color: var(--sbb-color-iron);display:contents}:host([data-selected]){--sbb-step-opacity: 1;--sbb-step-display: block;--sbb-step-height: fit-content;--sbb-step-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--sbb-step-animation-delay: var(--sbb-step-animation-duration)}:host([data-orientation=horizontal]){--sbb-step-position: absolute;--sbb-step-inset-block-start: 0}:host([data-orientation=vertical]) .sbb-step--wrapper{margin-inline-start:var(--sbb-spacing-fixed-4x);opacity:0;height:0;transition:display var(--sbb-step-animation-duration) var(--sbb-animation-easing),height var(--sbb-stepper-animation-duration) var(--sbb-animation-easing),opacity var(--sbb-step-animation-duration) var(--sbb-animation-easing);transition-behavior:allow-discrete}:host([data-selected][data-orientation=vertical]) .sbb-step--wrapper{opacity:1;height:var(--sbb-stepper-content-height);transition:display var(--sbb-step-animation-duration) var(--sbb-animation-easing),height var(--sbb-stepper-animation-duration) var(--sbb-animation-easing),opacity var(--sbb-step-animation-duration) var(--sbb-stepper-animation-duration) var(--sbb-animation-easing);transition-behavior:allow-discrete}.sbb-step{--sbb-text-font-size: var(--sbb-font-size-text-m);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);position:var(--sbb-step-position);width:100%;inset-block-start:var(--sbb-step-inset-block-start);opacity:var(--sbb-step-opacity);display:var(--sbb-step-display);height:var(--sbb-step-height);color:var(--sbb-step-color);transition-property:display,opacity;transition-duration:var(--sbb-step-animation-duration);transition-delay:var(--sbb-step-animation-delay);transition-timing-function:var(--sbb-animation-easing);transition-behavior:allow-discrete}@starting-style{.sbb-step{--sbb-step-opacity: 0}}`;
6
+ const f = h`*,:before,:after{box-sizing:border-box}:host{--sbb-step-position: initial;--sbb-step-inset-block-start: unset;--sbb-step-opacity: 0;--sbb-step-display: none;--sbb-step-height: 0;--sbb-step-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-step-animation-delay: 0;display:contents}:host([data-selected]){--sbb-step-opacity: 1;--sbb-step-display: block;--sbb-step-height: fit-content;--sbb-step-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--sbb-step-animation-delay: var(--sbb-step-animation-duration)}:host([data-orientation=horizontal]){--sbb-step-position: absolute;--sbb-step-inset-block-start: 0}:host([data-orientation=vertical]) .sbb-step--wrapper{margin-inline-start:var(--sbb-spacing-fixed-4x);opacity:0;height:0;transition:display var(--sbb-step-animation-duration) var(--sbb-animation-easing),height var(--sbb-stepper-animation-duration) var(--sbb-animation-easing),opacity var(--sbb-step-animation-duration) var(--sbb-animation-easing);transition-behavior:allow-discrete}:host([data-selected][data-orientation=vertical]) .sbb-step--wrapper{opacity:1;height:var(--sbb-stepper-content-height);transition:display var(--sbb-step-animation-duration) var(--sbb-animation-easing),height var(--sbb-stepper-animation-duration) var(--sbb-animation-easing),opacity var(--sbb-step-animation-duration) var(--sbb-stepper-animation-duration) var(--sbb-animation-easing);transition-behavior:allow-discrete}.sbb-step{--sbb-text-font-size: var(--sbb-font-size-text-m);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);position:var(--sbb-step-position);width:100%;inset-block-start:var(--sbb-step-inset-block-start);opacity:var(--sbb-step-opacity);display:var(--sbb-step-display);height:var(--sbb-step-height);transition-property:display,opacity;transition-duration:var(--sbb-step-animation-duration);transition-delay:var(--sbb-step-animation-delay);transition-timing-function:var(--sbb-animation-easing);transition-behavior:allow-discrete}@starting-style{.sbb-step{--sbb-step-opacity: 0}}`;
7
7
  let _ = 0, k = (() => {
8
8
  var e;
9
- let o = [u("sbb-step")], n, r = [], s, b = v(h);
9
+ let l = [u("sbb-step")], n, r = [], s, b = v(c);
10
10
  return e = class extends b {
11
11
  /** The label of the step. */
12
12
  get label() {
@@ -92,7 +92,7 @@ let _ = 0, k = (() => {
92
92
  }
93
93
  }, s = e, (() => {
94
94
  const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(b[Symbol.metadata] ?? null) : void 0;
95
- l(null, n = { value: s }, o, { kind: "class", name: s.name, metadata: t }, null, r), s = n.value, t && Object.defineProperty(s, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
95
+ o(null, n = { value: s }, l, { kind: "class", name: s.name, metadata: t }, null, r), s = n.value, t && Object.defineProperty(s, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
96
96
  })(), e.role = "tabpanel", e.styles = f, e.events = {
97
97
  validate: "validate",
98
98
  resizechange: "resizechange"
@@ -4,7 +4,7 @@ import { customElement as f } from "lit/decorators.js";
4
4
  import { SbbButtonBaseElement as h } from "../../core/base-elements.js";
5
5
  import { SbbDisabledMixin as v, removeAriaElements as x, appendAriaElements as m } from "../../core/mixins.js";
6
6
  import { SbbIconNameMixin as u } from "../../icon.js";
7
- const g = c`*,:before,:after{box-sizing:border-box}:host{--sbb-step-label-color: var(--sbb-color-iron);--sbb-step-label-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-step-label-prefix-size: var(--sbb-size-element-xxs);--sbb-step-label-prefix-border-style: solid;--sbb-step-label-prefix-border-color: var(--sbb-color-cloud);--sbb-step-label-prefix-background-color: var(--sbb-color-white);--sbb-step-label-gap: var(--sbb-spacing-fixed-4x);position:relative;min-width:0;max-width:fit-content}:host:before{--sbb-text-font-size: var(--sbb-font-size-text-xxs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);cursor:var(--sbb-step-label-cursor);color:var(--sbb-step-label-color);inset-block-start:calc(var(--sbb-font-size-text-l) * var(--sbb-typo-line-height-body-text) / 2 + var(--sbb-border-width-1x) / 2);inset-inline-start:calc(var(--sbb-step-label-prefix-size) / 2);line-height:1;z-index:1;transform:translate(-50%,calc(-50% + var(--sbb-step-label-translate-y-content-hover, 0rem)));transition:transform var(--sbb-step-label-animation-duration) var(--sbb-animation-easing)}@media (forced-colors: active){:host{--sbb-step-label-color: ButtonText;--sbb-step-label-prefix-border-color: ButtonText}}:host([data-selected]){--sbb-text-font-size: var(--sbb-font-size-text-xxs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);font-weight:700;--sbb-step-label-color: var(--sbb-color-charcoal)}@media (forced-colors: active){:host([data-selected]){--sbb-step-label-color: Highlight !important}}:host([data-size=s]){--sbb-step-label-gap: var(--sbb-spacing-fixed-3x);--sbb-step-label-prefix-size: var(--sbb-size-element-xxxs)}:host([data-size=s]):before{inset-block-start:calc(var(--sbb-font-size-text-m) * var(--sbb-typo-line-height-body-text) / 2 + var(--sbb-border-width-1x) / 2)}:host(:disabled){--sbb-step-label-color: var(--sbb-color-granite);--sbb-step-label-prefix-border-style: dashed}@media (forced-colors: active){:host(:disabled){--sbb-step-label-color: GrayText !important}}@media (any-hover: hover){:host(:hover:not(:disabled)){--sbb-step-label-cursor: pointer;--sbb-step-label-prefix-background-color: var(--sbb-color-milk);--sbb-step-label-translate-y-content-hover: -.0625rem;--sbb-step-label-prefix-size-grow-hover: calc(var(--sbb-border-width-2x) * -1)}}:host(:focus-visible){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);border-radius:var(--sbb-border-radius-1x)}:host([data-orientation=vertical]){transition:margin var(--sbb-stepper-animation-duration) var(--sbb-animation-easing)}:host([data-orientation=vertical]:not(:first-of-type)){margin-block-start:var(--sbb-spacing-fixed-6x)}:host([data-selected][data-orientation=vertical]){margin-block-end:var(--sbb-spacing-fixed-8x)}.sbb-step-label{--sbb-text-font-size: var(--sbb-font-size-text-l);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);font-weight:700;cursor:var(--sbb-step-label-cursor);position:relative;display:flex;gap:var(--sbb-step-label-gap);color:var(--sbb-step-label-color)}:host([data-size=s]) .sbb-step-label{--sbb-text-font-size: var(--sbb-font-size-text-m);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);font-weight:700}.sbb-step-label__prefix{position:relative;display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--sbb-step-label-prefix-size);height:var(--sbb-step-label-prefix-size);inset-block-start:calc(1em * var(--sbb-typo-line-height-body-text) / 2 + var(--sbb-border-width-1x) / 2 - var(--sbb-step-label-prefix-size) / 2)}.sbb-step-label__prefix:before{content:"";position:absolute;inset:calc(var(--sbb-step-label-prefix-size-grow-hover, 0rem));border-radius:var(--sbb-border-radius-infinity);border:var(--sbb-border-width-1x) var(--sbb-step-label-prefix-border-style) var(--sbb-step-label-prefix-border-color);background-color:var(--sbb-step-label-prefix-background-color);transition-duration:var(--sbb-step-label-animation-duration);transition-timing-function:var(--sbb-animation-easing);transition-property:background-color,inset}:host([data-orientation=horizontal]) .sbb-step-label__text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}::slotted(sbb-icon),sbb-icon{z-index:1;background-color:var(--sbb-step-label-prefix-background-color);border-radius:var(--sbb-border-radius-infinity);transform:translateY(var(--sbb-step-label-translate-y-content-hover, 0rem));transition-duration:var(--sbb-step-label-animation-duration);transition-timing-function:var(--sbb-animation-easing);transition-property:background-color,transform}`;
7
+ const g = c`*,:before,:after{box-sizing:border-box}:host{--sbb-step-label-color: var(--sbb-color-4);--sbb-step-label-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-step-label-prefix-size: var(--sbb-size-element-xxs);--sbb-step-label-prefix-border-style: solid;--sbb-step-label-prefix-border-color: var(--sbb-border-color-4-inverted);--sbb-step-label-prefix-background-color: var(--sbb-background-color-1);--sbb-step-label-gap: var(--sbb-spacing-fixed-4x);position:relative;min-width:0;max-width:fit-content}:host:before{--sbb-text-font-size: var(--sbb-font-size-text-xxs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);cursor:var(--sbb-step-label-cursor);color:var(--sbb-step-label-color);inset-block-start:calc(var(--sbb-font-size-text-l) * var(--sbb-typo-line-height-body-text) / 2 + var(--sbb-border-width-1x) / 2);inset-inline-start:calc(var(--sbb-step-label-prefix-size) / 2);line-height:1;z-index:1;transform:translate(-50%,calc(-50% + var(--sbb-step-label-translate-y-content-hover, 0rem)));transition:transform var(--sbb-step-label-animation-duration) var(--sbb-animation-easing)}@media (forced-colors: active){:host{--sbb-step-label-color: ButtonText;--sbb-step-label-prefix-border-color: ButtonText}}:host([data-selected]){--sbb-text-font-size: var(--sbb-font-size-text-xxs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);font-weight:700;--sbb-step-label-color: var(--sbb-color-3)}@media (forced-colors: active){:host([data-selected]){--sbb-step-label-color: Highlight !important}}:host([data-size=s]){--sbb-step-label-gap: var(--sbb-spacing-fixed-3x);--sbb-step-label-prefix-size: var(--sbb-size-element-xxxs)}:host([data-size=s]):before{inset-block-start:calc(var(--sbb-font-size-text-m) * var(--sbb-typo-line-height-body-text) / 2 + var(--sbb-border-width-1x) / 2)}:host(:disabled){--sbb-step-label-color: var(--sbb-color-granite);--sbb-step-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-graphite));--sbb-step-label-prefix-border-style: dashed}@media (forced-colors: active){:host(:disabled){--sbb-step-label-color: GrayText !important}}@media (any-hover: hover){:host(:hover:not(:disabled)){--sbb-step-label-cursor: pointer;--sbb-step-label-prefix-background-color: var(--sbb-background-color-3);--sbb-step-label-translate-y-content-hover: -.0625rem;--sbb-step-label-prefix-size-grow-hover: calc(var(--sbb-border-width-2x) * -1)}}:host(:focus-visible){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);border-radius:var(--sbb-border-radius-1x)}:host([data-orientation=vertical]){transition:margin var(--sbb-stepper-animation-duration) var(--sbb-animation-easing)}:host([data-orientation=vertical]:not(:first-of-type)){margin-block-start:var(--sbb-spacing-fixed-6x)}:host([data-selected][data-orientation=vertical]){margin-block-end:var(--sbb-spacing-fixed-8x)}.sbb-step-label{--sbb-text-font-size: var(--sbb-font-size-text-l);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);font-weight:700;cursor:var(--sbb-step-label-cursor);position:relative;display:flex;gap:var(--sbb-step-label-gap);color:var(--sbb-step-label-color)}:host([data-size=s]) .sbb-step-label{--sbb-text-font-size: var(--sbb-font-size-text-m);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);font-weight:700}.sbb-step-label__prefix{position:relative;display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--sbb-step-label-prefix-size);height:var(--sbb-step-label-prefix-size);inset-block-start:calc(1em * var(--sbb-typo-line-height-body-text) / 2 + var(--sbb-border-width-1x) / 2 - var(--sbb-step-label-prefix-size) / 2)}.sbb-step-label__prefix:before{content:"";position:absolute;inset:calc(var(--sbb-step-label-prefix-size-grow-hover, 0rem));border-radius:var(--sbb-border-radius-infinity);border:var(--sbb-border-width-1x) var(--sbb-step-label-prefix-border-style) var(--sbb-step-label-prefix-border-color);background-color:var(--sbb-step-label-prefix-background-color);transition-duration:var(--sbb-step-label-animation-duration);transition-timing-function:var(--sbb-animation-easing);transition-property:background-color,inset}:host([data-orientation=horizontal]) .sbb-step-label__text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}::slotted(sbb-icon),sbb-icon{z-index:1;background-color:var(--sbb-step-label-prefix-background-color);border-radius:var(--sbb-border-radius-infinity);transform:translateY(var(--sbb-step-label-translate-y-content-hover, 0rem));transition-duration:var(--sbb-step-label-animation-duration);transition-timing-function:var(--sbb-animation-easing);transition-property:background-color,transform}`;
8
8
  let y = 0, I = (() => {
9
9
  var e;
10
10
  let o = [f("sbb-step-label")], i, r = [], s, b = u(v(h));
@@ -11,11 +11,11 @@ import { isArrowKeyPressed as B, getNextElementIndex as N } from "../../core/a11
11
11
  import { forceType as $ } from "../../core/decorators.js";
12
12
  import { breakpoints as j, isLean as K, isBreakpoint as P } from "../../core/dom.js";
13
13
  import { SbbHydrationMixin as V } from "../../core/mixins.js";
14
- const W = R`*,:before,:after{box-sizing:border-box}:host{--sbb-stepper-orientation: row;--sbb-stepper-border-width: var(--sbb-border-width-1x);--sbb-stepper-marker-size: 0;--sbb-stepper-marker-width: var(--sbb-border-width-3x);--sbb-stepper-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-6x) );--sbb-stepper-marker-color: var(--sbb-color-charcoal);display:block;position:relative;counter-reset:step-label}@media (forced-colors: active){:host{--sbb-stepper-marker-color: ButtonText}}:host([data-disable-animation]){--sbb-disable-animation-duration: 0s}:host([orientation=vertical]){--sbb-stepper-orientation: column}.sbb-stepper{width:100%}.sbb-stepper__labels{display:flex;flex-direction:var(--sbb-stepper-orientation);position:relative;justify-content:space-between;margin-block-end:var(--sbb-spacing-responsive-m)}.sbb-stepper__labels:before{content:"";position:absolute;inset-inline-start:calc(var(--sbb-stepper-border-width) * -1);background-color:var(--sbb-stepper-marker-color)}:host([orientation=horizontal]) .sbb-stepper__labels{gap:var(--sbb-spacing-fixed-4x);padding-block-end:var(--sbb-spacing-fixed-4x);border-block-end:var(--sbb-stepper-border-width) solid var(--sbb-color-cloud)}:host([orientation=horizontal]) .sbb-stepper__labels:before{inset-block-end:calc(var(--sbb-stepper-border-width) * -1);height:var(--sbb-stepper-marker-width);width:var(--sbb-stepper-marker-size);transition:width var(--sbb-stepper-animation-duration) var(--sbb-animation-easing)}:host([orientation=vertical]) .sbb-stepper__labels{padding-inline-start:var(--sbb-spacing-fixed-4x);border-inline-start:var(--sbb-stepper-border-width) solid var(--sbb-color-cloud)}:host([orientation=vertical]) .sbb-stepper__labels:before{inset-block-start:0;width:var(--sbb-stepper-marker-width);height:var(--sbb-stepper-marker-size);transition:height var(--sbb-stepper-animation-duration) var(--sbb-animation-easing)}.sbb-stepper__steps{position:relative}:host([orientation=horizontal]) .sbb-stepper__steps{height:var(--sbb-stepper-content-height);transition:height var(--sbb-stepper-animation-duration) var(--sbb-animation-easing)}::slotted(sbb-step-label):before{content:counter(step-label);counter-increment:step-label}`, H = 150;
14
+ const W = R`*,:before,:after{box-sizing:border-box}:host{--sbb-stepper-orientation: row;--sbb-stepper-border-width: var(--sbb-border-width-1x);--sbb-stepper-marker-size: 0;--sbb-stepper-marker-width: var(--sbb-border-width-3x);--sbb-stepper-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-6x) );--sbb-stepper-marker-color: var(--sbb-color-3);display:block;position:relative;counter-reset:step-label}@media (forced-colors: active){:host{--sbb-stepper-marker-color: ButtonText}}:host([data-disable-animation]){--sbb-disable-animation-duration: 0s}:host([orientation=vertical]){--sbb-stepper-orientation: column}.sbb-stepper{width:100%}.sbb-stepper__labels{display:flex;flex-direction:var(--sbb-stepper-orientation);position:relative;justify-content:start;margin-block-end:var(--sbb-spacing-responsive-m)}.sbb-stepper__labels:before{content:"";position:absolute;inset-inline-start:calc(var(--sbb-stepper-border-width) * -1);background-color:var(--sbb-stepper-marker-color)}:host([orientation=horizontal]) .sbb-stepper__labels{gap:var(--sbb-spacing-responsive-m);padding-block-end:var(--sbb-spacing-fixed-4x);border-block-end:var(--sbb-stepper-border-width) solid var(--sbb-border-color-4-inverted)}:host([orientation=horizontal]) .sbb-stepper__labels:before{inset-block-end:calc(var(--sbb-stepper-border-width) * -1);height:var(--sbb-stepper-marker-width);width:var(--sbb-stepper-marker-size);transition:width var(--sbb-stepper-animation-duration) var(--sbb-animation-easing)}:host([orientation=vertical]) .sbb-stepper__labels{padding-inline-start:var(--sbb-spacing-fixed-4x);border-inline-start:var(--sbb-stepper-border-width) solid var(--sbb-border-color-4-inverted)}:host([orientation=vertical]) .sbb-stepper__labels:before{inset-block-start:0;width:var(--sbb-stepper-marker-width);height:var(--sbb-stepper-marker-size);transition:height var(--sbb-stepper-animation-duration) var(--sbb-animation-easing)}.sbb-stepper__steps{position:relative}:host([orientation=horizontal]) .sbb-stepper__steps{height:var(--sbb-stepper-content-height);transition:height var(--sbb-stepper-animation-duration) var(--sbb-animation-easing)}::slotted(sbb-step-label):before{content:counter(step-label);counter-increment:step-label}`, H = 150;
15
15
  let re = (() => {
16
16
  var c, b, p, l;
17
- let s = [q("sbb-stepper")], r, a = [], n, z = V(D), _ = [], x, v = [], k = [], S, I, y = [], w = [], E, A = [], F = [], L, O;
18
- return l = class extends z {
17
+ let s = [q("sbb-stepper")], r, a = [], n, v = V(D), _ = [], z, x = [], k = [], S, I, y = [], w = [], E, A = [], F = [], L, O;
18
+ return l = class extends v {
19
19
  constructor() {
20
20
  super();
21
21
  m(this, c);
@@ -28,7 +28,7 @@ let re = (() => {
28
28
  t.intersectionRatio > 0 && (this._setStepperHeight(this.selected), this._setMarkerSize());
29
29
  });
30
30
  }
31
- })), d(this, c, o(this, v, !1)), this._horizontalFrom = (o(this, k), null), d(this, b, o(this, y, "horizontal")), d(this, p, (o(this, w), o(this, A, K() ? "s" : "m"))), this._loaded = (o(this, F), !1), this._resizeObserverTimeout = null, this._onStepperResize = () => {
31
+ })), d(this, c, o(this, x, !1)), this._horizontalFrom = (o(this, k), null), d(this, b, o(this, y, "horizontal")), d(this, p, (o(this, w), o(this, A, K() ? "s" : "m"))), this._loaded = (o(this, F), !1), this._resizeObserverTimeout = null, this._onStepperResize = () => {
32
32
  this._checkOrientation(), this._setStepperHeight(this.selected), clearTimeout(this._resizeObserverTimeout), this.toggleAttribute("data-disable-animation", !0), this._resizeObserverTimeout = setTimeout(() => this.toggleAttribute("data-disable-animation", !1), H);
33
33
  }, this.addEventListener?.("keydown", (e) => this._handleKeyDown(e)), this.addEventListener?.("resizechange", (e) => this._onSelectedStepResize(e));
34
34
  }
@@ -211,10 +211,10 @@ let re = (() => {
211
211
  `;
212
212
  }
213
213
  }, c = new WeakMap(), b = new WeakMap(), p = new WeakMap(), n = l, (() => {
214
- const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(z[Symbol.metadata] ?? null) : void 0;
215
- x = [$(), u({ type: Boolean })], S = [u({ attribute: "horizontal-from", reflect: !0 })], I = [u({ reflect: !0 })], E = [u({ reflect: !0 })], L = [u({ attribute: !1 })], O = [u({ attribute: "selected-index", type: Number })], h(l, null, x, { kind: "accessor", name: "linear", static: !1, private: !1, access: { has: (t) => "linear" in t, get: (t) => t.linear, set: (t, i) => {
214
+ const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(v[Symbol.metadata] ?? null) : void 0;
215
+ z = [$(), u({ type: Boolean })], S = [u({ attribute: "horizontal-from", reflect: !0 })], I = [u({ reflect: !0 })], E = [u({ reflect: !0 })], L = [u({ attribute: !1 })], O = [u({ attribute: "selected-index", type: Number })], h(l, null, z, { kind: "accessor", name: "linear", static: !1, private: !1, access: { has: (t) => "linear" in t, get: (t) => t.linear, set: (t, i) => {
216
216
  t.linear = i;
217
- } }, metadata: e }, v, k), h(l, null, S, { kind: "setter", name: "horizontalFrom", static: !1, private: !1, access: { has: (t) => "horizontalFrom" in t, set: (t, i) => {
217
+ } }, metadata: e }, x, k), h(l, null, S, { kind: "setter", name: "horizontalFrom", static: !1, private: !1, access: { has: (t) => "horizontalFrom" in t, set: (t, i) => {
218
218
  t.horizontalFrom = i;
219
219
  } }, metadata: e }, null, _), h(l, null, I, { kind: "accessor", name: "orientation", static: !1, private: !1, access: { has: (t) => "orientation" in t, get: (t) => t.orientation, set: (t, i) => {
220
220
  t.orientation = i;
package/table.css CHANGED
@@ -19,10 +19,12 @@
19
19
  .sbb-table-xs {
20
20
  --sbb-table-border: var(--sbb-border-width-1x) solid var(--sbb-table-border-color);
21
21
  --sbb-table-border-color: var(--sbb-color-cloud);
22
- --sbb-table-background-color: var(--sbb-color-white);
23
- --sbb-table-row-striped-color: var(--sbb-color-milk);
24
- --sbb-table-color: inherit;
22
+ --sbb-table-border-color: light-dark(var(--sbb-color-cloud), var(--sbb-color-anthracite));
23
+ --sbb-table-background-color: var(--sbb-background-color-1);
24
+ --sbb-table-row-striped-color: var(--sbb-background-color-3);
25
+ --sbb-table-color: var(--sbb-color-1);
25
26
  --sbb-table-caption-color: var(--sbb-color-granite);
27
+ --sbb-table-caption-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
26
28
  --sbb-table-caption-margin-block-start: var(--sbb-spacing-fixed-4x);
27
29
  --sbb-table-sticky-shadow-width: 3rem;
28
30
  --sbb-table-sticky-shadow-transition-easing: var(--sbb-animation-easing);
@@ -99,7 +101,9 @@
99
101
  line-height: var(--sbb-typo-line-height-body-text);
100
102
  letter-spacing: var(--sbb-typo-letter-spacing-body-text);
101
103
  font-size: var(--sbb-text-font-size);
102
- color: var(--sbb-table-caption-color, var(--sbb-color-granite));
104
+ --sbb-table-caption-color-fallback: var(--sbb-color-granite);
105
+ --sbb-table-caption-color-fallback: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
106
+ color: var(--sbb-table-caption-color, var(--sbb-table-caption-color-fallback));
103
107
  margin-block-start: var(--sbb-table-caption-margin-block-start, var(--sbb-spacing-fixed-4x));
104
108
  text-align: left;
105
109
  }
@@ -144,9 +148,9 @@
144
148
  sbb-table-wrapper[negative] .sbb-table,
145
149
  .sbb-table--negative {
146
150
  --sbb-table-border-color: var(--sbb-color-anthracite);
147
- --sbb-table-background-color: var(--sbb-color-midnight);
148
- --sbb-table-color: var(--sbb-color-white);
149
- --sbb-table-row-striped-color: var(--sbb-color-charcoal);
151
+ --sbb-table-background-color: var(--sbb-background-color-1-negative);
152
+ --sbb-table-color: var(--sbb-color-1-negative);
153
+ --sbb-table-row-striped-color: var(--sbb-background-color-3-negative);
150
154
  --sbb-table-caption-color: var(--sbb-color-cement);
151
155
  }
152
156
 
@@ -159,7 +163,7 @@ sbb-table-wrapper[negative] .sbb-table,
159
163
  }
160
164
 
161
165
  .sbb-table--theme-iron {
162
- --sbb-table-cell-color: var(--sbb-color-iron);
166
+ --sbb-table-cell-color: var(--sbb-color-4);
163
167
  }
164
168
  .sbb-table--theme-iron tbody > tr > td {
165
169
  color: var(--sbb-table-cell-color);
@@ -212,7 +216,9 @@ sbb-table-wrapper[negative] .sbb-table,
212
216
  line-height: var(--sbb-typo-line-height-body-text);
213
217
  letter-spacing: var(--sbb-typo-letter-spacing-body-text);
214
218
  font-size: var(--sbb-text-font-size);
215
- color: var(--sbb-table-caption-color, var(--sbb-color-granite));
219
+ --sbb-table-caption-color-fallback: var(--sbb-color-granite);
220
+ --sbb-table-caption-color-fallback: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
221
+ color: var(--sbb-table-caption-color, var(--sbb-table-caption-color-fallback));
216
222
  margin-block-start: var(--sbb-table-caption-margin-block-start, var(--sbb-spacing-fixed-4x));
217
223
  text-align: left;
218
224
  }
@@ -2,19 +2,25 @@ import { CSSResultGroup, TemplateResult, LitElement } from 'lit';
2
2
  import { SbbTabLabelElement } from '../tab-label.js';
3
3
  declare const SbbTabElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbElementInternalsMixinType> & typeof LitElement & import('../../core/mixins.js').SbbElementInternalsConstructor;
4
4
  /**
5
- * Combined with a `sbb-tab-group`, it displays a tab's content.
5
+ * Combined with a `sbb-tab-group` and `sbb-tab-label`, it displays a tab's content.
6
6
  *
7
7
  * @slot - Use the unnamed slot to provide content.
8
+ * @event {Event} active - The `active` event fires when the sbb-tab has been activated via user selection on the sbb-tab-label.
8
9
  */
9
10
  export declare class SbbTabElement extends SbbTabElement_base {
10
11
  static role: string;
11
12
  static styles: CSSResultGroup;
13
+ static readonly events: {
14
+ readonly active: "active";
15
+ };
12
16
  /** The `sbb-tab-label` associated with the tab. */
13
17
  get label(): SbbTabLabelElement | null;
14
- private _label;
15
- private _getTabLabel;
16
- /** @internal */
18
+ /**
19
+ * @internal
20
+ * @deprecated
21
+ */
17
22
  configure(): void;
23
+ connectedCallback(): void;
18
24
  protected render(): TemplateResult;
19
25
  }
20
26
  declare global {
@@ -1 +1 @@
1
- {"version":3,"file":"tab.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/tabs/tab/tab.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAIvC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;;AAI1D;;;;GAIG;AACH,qBAEM,aAAc,SAAQ,kBAAoC;IAC9D,OAAuB,IAAI,SAAc;IACzC,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,mDAAmD;IACnD,IAAW,KAAK,IAAI,kBAAkB,GAAG,IAAI,CAE5C;IACD,OAAO,CAAC,MAAM,CAAmC;IAEjD,OAAO,CAAC,YAAY;IAQpB,gBAAgB;IACT,SAAS,IAAI,IAAI;cAIL,MAAM,IAAI,cAAc;CAO5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,SAAS,EAAE,aAAa,CAAC;KAC1B;CACF"}
1
+ {"version":3,"file":"tab.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/tabs/tab/tab.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAIvC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;;AAM1D;;;;;GAKG;AACH,qBAEM,aAAc,SAAQ,kBAAoC;IAC9D,OAAuB,IAAI,SAAc;IACzC,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;MAElB;IAEX,mDAAmD;IACnD,IAAW,KAAK,IAAI,kBAAkB,GAAG,IAAI,CAI5C;IAED;;;OAGG;IACI,SAAS,IAAI,IAAI;IAER,iBAAiB,IAAI,IAAI;cAOtB,MAAM,IAAI,cAAc;CAO5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,SAAS,EAAE,aAAa,CAAC;KAC1B;CACF"}
@@ -1,28 +1,24 @@
1
- import { __esDecorate as o, __runInitializers as b } from "tslib";
2
- import { css as n, LitElement as c, html as m } from "lit";
3
- import { customElement as u } from "lit/decorators.js";
4
- import { SbbElementInternalsMixin as d } from "../../core/mixins.js";
5
- const h = n`@charset "UTF-8";*,:before,:after{box-sizing:border-box}:host{display:block}:host:after,:host:before{content:" ";display:block;visibility:hidden;height:0;overflow:hidden}`;
6
- let v = (() => {
1
+ import { __esDecorate as n, __runInitializers as o } from "tslib";
2
+ import { css as b, LitElement as c, html as m } from "lit";
3
+ import { customElement as d } from "lit/decorators.js";
4
+ import { SbbElementInternalsMixin as u } from "../../core/mixins.js";
5
+ const h = b`@charset "UTF-8";*,:before,:after{box-sizing:border-box}:host{display:block}:host:after,:host:before{content:" ";display:block;visibility:hidden;height:0;overflow:hidden}`;
6
+ let f = 0, S = (() => {
7
7
  var t;
8
- let r = [u("sbb-tab")], a, s = [], l, i = d(c);
8
+ let r = [d("sbb-tab")], l, s = [], e, i = u(c);
9
9
  return t = class extends i {
10
- constructor() {
11
- super(...arguments), this._label = null;
12
- }
13
10
  /** The `sbb-tab-label` associated with the tab. */
14
11
  get label() {
15
- return this._label;
16
- }
17
- _getTabLabel() {
18
- let e = this.previousElementSibling;
19
- for (; e && e.localName !== "sbb-tab-label"; )
20
- e = e.previousElementSibling;
21
- return e;
12
+ return this.previousElementSibling?.localName === "sbb-tab-label" ? this.previousElementSibling : null;
22
13
  }
23
- /** @internal */
14
+ /**
15
+ * @internal
16
+ * @deprecated
17
+ */
24
18
  configure() {
25
- this._label = this._getTabLabel();
19
+ }
20
+ connectedCallback() {
21
+ super.connectedCallback(), this.id ||= `sbb-tab-${f++}`, this.tabIndex = 0;
26
22
  }
27
23
  render() {
28
24
  return m`
@@ -31,11 +27,13 @@ let v = (() => {
31
27
  </div>
32
28
  `;
33
29
  }
34
- }, l = t, (() => {
35
- const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(i[Symbol.metadata] ?? null) : void 0;
36
- o(null, a = { value: l }, r, { kind: "class", name: l.name, metadata: e }, null, s), l = a.value, e && Object.defineProperty(l, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
37
- })(), t.role = "tabpanel", t.styles = h, b(l, s), l;
30
+ }, e = t, (() => {
31
+ const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(i[Symbol.metadata] ?? null) : void 0;
32
+ n(null, l = { value: e }, r, { kind: "class", name: e.name, metadata: a }, null, s), e = l.value, a && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a });
33
+ })(), t.role = "tabpanel", t.styles = h, t.events = {
34
+ active: "active"
35
+ }, o(e, s), e;
38
36
  })();
39
37
  export {
40
- v as SbbTabElement
38
+ S as SbbTabElement
41
39
  };
@@ -9,6 +9,9 @@ export type SbbTabChangedEventDetails = {
9
9
  previousTabLabel: SbbTabLabelElement | undefined;
10
10
  previousTab: SbbTabElement | undefined;
11
11
  };
12
+ /**
13
+ * @deprecated
14
+ */
12
15
  export interface InterfaceSbbTabGroupActions {
13
16
  activate(): void;
14
17
  deactivate(): void;
@@ -16,45 +19,47 @@ export interface InterfaceSbbTabGroupActions {
16
19
  disable(): void;
17
20
  select(): void;
18
21
  }
22
+ /**
23
+ * @deprecated
24
+ */
19
25
  export interface InterfaceSbbTabGroupTab extends SbbTabLabelElement {
20
26
  active: boolean;
21
27
  disabled: boolean;
22
- tab?: SbbTabElement;
28
+ tab: SbbTabElement | null;
23
29
  index?: number;
24
30
  tabGroupActions?: InterfaceSbbTabGroupActions;
25
31
  size: 's' | 'l' | 'xl';
26
32
  }
27
33
  declare const SbbTabGroupElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbHydrationMixinType> & typeof LitElement;
28
34
  /**
29
- * It displays one or more tabs, each one with a label and a content.
35
+ * It displays one or more tabs, each one with a label and some content.
30
36
  *
31
- * @slot - Use the unnamed slot to add content to the `sbb-tab-group` via
32
- * `sbb-tab-label` and `sbb-tab` instances.
37
+ * @slot - Use the unnamed slot to add content to the `sbb-tab-group` via `sbb-tab-label` and `sbb-tab` instances.
38
+ * @event {CustomEvent<SbbTabChangedEventDetails>} tabchange - The tabchange event is dispatched when a tab is selected.
33
39
  */
34
40
  export declare class SbbTabGroupElement extends SbbTabGroupElement_base {
35
41
  static styles: CSSResultGroup;
36
42
  static readonly events: {
37
43
  readonly tabchange: "tabchange";
38
44
  };
39
- private _tabs;
40
- private _selectedTab?;
41
45
  private _tabGroupElement;
42
46
  private _tabContentElement;
43
- private _tabAttributeObserver;
44
47
  private _tabGroupResizeObserver;
45
48
  private _tabContentResizeObserver;
46
49
  /**
47
50
  * Size variant, either s, l or xl.
48
51
  * @default 'l' / 's' (lean)
49
52
  */
50
- set size(value: InterfaceSbbTabGroupTab['size']);
51
- get size(): InterfaceSbbTabGroupTab['size'];
53
+ set size(value: 's' | 'l' | 'xl');
54
+ get size(): 's' | 'l' | 'xl';
52
55
  private _size;
53
56
  /**
54
57
  * Sets the initial tab. If it matches a disabled tab or exceeds the length of
55
58
  * the tab group, the first enabled tab will be selected.
56
59
  */
57
60
  accessor initialSelectedIndex: number;
61
+ /** Gets the slotted `sbb-tab-label`s. */
62
+ get labels(): SbbTabLabelElement[];
58
63
  constructor();
59
64
  protected firstUpdated(changedProperties: PropertyValues<this>): void;
60
65
  /**
@@ -72,17 +77,13 @@ export declare class SbbTabGroupElement extends SbbTabGroupElement_base {
72
77
  * @param tabIndex The index of the tab you want to activate.
73
78
  */
74
79
  activateTab(tabIndex: number): void;
75
- private _getTabs;
76
80
  private _enabledTabs;
77
81
  private _updateSize;
78
82
  private _onContentSlotChange;
79
- private _onTabsSlotChange;
80
- private _assignId;
83
+ private _onLabelSlotChange;
81
84
  private _initSelection;
82
- private _onTabAttributesChange;
83
85
  private _onTabGroupElementResize;
84
86
  private _onTabContentElementResize;
85
- private _configure;
86
87
  private _handleKeyDown;
87
88
  protected render(): TemplateResult;
88
89
  }
@@ -1 +1 @@
1
- {"version":3,"file":"tab-group.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/tabs/tab-group/tab-group.component.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AASvC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAI1C,MAAM,MAAM,yBAAyB,GAAG;IACtC,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,kBAAkB,CAAC;IACnC,SAAS,EAAE,aAAa,CAAC;IACzB,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB,EAAE,kBAAkB,GAAG,SAAS,CAAC;IACjD,WAAW,EAAE,aAAa,GAAG,SAAS,CAAC;CACxC,CAAC;AAEF,MAAM,WAAW,2BAA2B;IAC1C,QAAQ,IAAI,IAAI,CAAC;IACjB,UAAU,IAAI,IAAI,CAAC;IACnB,MAAM,IAAI,IAAI,CAAC;IACf,OAAO,IAAI,IAAI,CAAC;IAChB,MAAM,IAAI,IAAI,CAAC;CAChB;AAED,MAAM,WAAW,uBAAwB,SAAQ,kBAAkB;IACjE,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,GAAG,CAAC,EAAE,aAAa,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,2BAA2B,CAAC;IAC9C,IAAI,EAAE,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;CACxB;;AAQD;;;;;GAKG;AACH,qBAEM,kBAAmB,SAAQ,uBAA6B;IAC5D,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;MAElB;IAEX,OAAO,CAAC,KAAK,CAAiC;IAC9C,OAAO,CAAC,YAAY,CAAC,CAA0B;IAC/C,OAAO,CAAC,gBAAgB,CAAe;IACvC,OAAO,CAAC,kBAAkB,CAAe;IACzC,OAAO,CAAC,qBAAqB,CAI1B;IACH,OAAO,CAAC,uBAAuB,CAI5B;IACH,OAAO,CAAC,yBAAyB,CAI9B;IAEH;;;OAGG;IACH,IACW,IAAI,CAAC,KAAK,EAAE,uBAAuB,CAAC,MAAM,CAAC,EAGrD;IACD,IAAW,IAAI,IAAI,uBAAuB,CAAC,MAAM,CAAC,CAEjD;IACD,OAAO,CAAC,KAAK,CAAyD;IAEtE;;;OAGG;IACH,SAEgB,oBAAoB,EAAE,MAAM,CAAK;;cAO9B,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAS9E;;;OAGG;IACI,UAAU,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;IAIzC;;;OAGG;IACI,SAAS,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;IAIxC;;;OAGG;IACI,WAAW,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;IAI1C,OAAO,CAAC,QAAQ;IAMhB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,oBAAoB,CAY1B;IAEF,OAAO,CAAC,iBAAiB,CAavB;IAEF,OAAO,CAAC,SAAS;IAIjB,OAAO,CAAC,cAAc;IAYtB,OAAO,CAAC,sBAAsB;IAwB9B,OAAO,CAAC,wBAAwB;IAgBhC,OAAO,CAAC,0BAA0B;IAWlC,OAAO,CAAC,UAAU;IA4GlB,OAAO,CAAC,cAAc;cAoBH,MAAM,IAAI,cAAc;CAe5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,eAAe,EAAE,kBAAkB,CAAC;KACrC;CACF"}
1
+ {"version":3,"file":"tab-group.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/tabs/tab-group/tab-group.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AASvC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAI/C,MAAM,MAAM,yBAAyB,GAAG;IACtC,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,kBAAkB,CAAC;IACnC,SAAS,EAAE,aAAa,CAAC;IACzB,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB,EAAE,kBAAkB,GAAG,SAAS,CAAC;IACjD,WAAW,EAAE,aAAa,GAAG,SAAS,CAAC;CACxC,CAAC;AAEF;;GAEG;AACH,MAAM,WAAW,2BAA2B;IAC1C,QAAQ,IAAI,IAAI,CAAC;IACjB,UAAU,IAAI,IAAI,CAAC;IACnB,MAAM,IAAI,IAAI,CAAC;IACf,OAAO,IAAI,IAAI,CAAC;IAChB,MAAM,IAAI,IAAI,CAAC;CAChB;AAED;;GAEG;AACH,MAAM,WAAW,uBAAwB,SAAQ,kBAAkB;IACjE,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,GAAG,EAAE,aAAa,GAAG,IAAI,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,2BAA2B,CAAC;IAC9C,IAAI,EAAE,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;CACxB;;AAED;;;;;GAKG;AACH,qBAEM,kBAAmB,SAAQ,uBAA6B;IAC5D,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;MAElB;IAEX,OAAO,CAAC,gBAAgB,CAAe;IACvC,OAAO,CAAC,kBAAkB,CAAe;IACzC,OAAO,CAAC,uBAAuB,CAI5B;IACH,OAAO,CAAC,yBAAyB,CAI9B;IAEH;;;OAGG;IACH,IACW,IAAI,CAAC,KAAK,EAAE,GAAG,GAAG,GAAG,GAAG,IAAI,EAGtC;IACD,IAAW,IAAI,IAAI,GAAG,GAAG,GAAG,GAAG,IAAI,CAElC;IACD,OAAO,CAAC,KAAK,CAA0C;IAEvD;;;OAGG;IACH,SAEgB,oBAAoB,EAAE,MAAM,CAAK;IAEjD,yCAAyC;IACzC,IAAW,MAAM,IAAI,kBAAkB,EAAE,CAQxC;;cAOkB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAS9E;;;OAGG;IACI,UAAU,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;IAMzC;;;OAGG;IACI,SAAS,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;IAMxC;;;OAGG;IACI,WAAW,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;IAI1C,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,oBAAoB,CAG1B;IAEF,OAAO,CAAC,kBAAkB,CAGxB;IAEF,OAAO,CAAC,cAAc;IAgBtB,OAAO,CAAC,wBAAwB;IAgBhC,OAAO,CAAC,0BAA0B;IAWlC,OAAO,CAAC,cAAc;cAoBH,MAAM,IAAI,cAAc;CAiB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,eAAe,EAAE,kBAAkB,CAAC;KACrC;CACF"}