@sbb-esta/lyne-elements 4.0.0-next → 4.0.0-next.2

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 (309) hide show
  1. package/alert/alert/alert.component.js +5 -5
  2. package/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.component.js +6 -6
  3. package/badge.css +3 -3
  4. package/breadcrumb/breadcrumb/breadcrumb.component.js +4 -4
  5. package/breadcrumb/breadcrumb-group/breadcrumb-group.component.d.ts +1 -0
  6. package/breadcrumb/breadcrumb-group/breadcrumb-group.component.d.ts.map +1 -1
  7. package/breadcrumb/breadcrumb-group/breadcrumb-group.component.js +5 -5
  8. package/button/common.js +1 -1
  9. package/button/mini-button/mini-button.component.js +1 -1
  10. package/button.js +1 -1
  11. package/calendar/calendar.component.d.ts +1 -0
  12. package/calendar/calendar.component.d.ts.map +1 -1
  13. package/calendar/calendar.component.js +2 -2
  14. package/card/card-badge/card-badge.component.js +7 -7
  15. package/card/card-button/card-button.component.d.ts +1 -1
  16. package/card/card-link/card-link.component.d.ts +1 -1
  17. package/card/common/card-action-common.d.ts.map +1 -1
  18. package/card/common/card-action-common.js +5 -10
  19. package/carousel/carousel/carousel.component.d.ts +2 -1
  20. package/carousel/carousel/carousel.component.d.ts.map +1 -1
  21. package/carousel/carousel/carousel.component.js +33 -28
  22. package/carousel/carousel-list/carousel-list.component.d.ts +1 -1
  23. package/carousel/carousel-list/carousel-list.component.d.ts.map +1 -1
  24. package/carousel/carousel-list/carousel-list.component.js +17 -22
  25. package/checkbox/checkbox/checkbox.component.d.ts +1 -1
  26. package/checkbox/common.js +1 -1
  27. package/checkbox-common-CrwfdL9V.js +5 -0
  28. package/checkbox.js +1 -1
  29. package/chip/chip/chip.component.js +3 -3
  30. package/chip-label/chip-label.component.js +8 -8
  31. package/core/a11y/interactivity-checker.js +0 -7
  32. package/core/a11y/live-announcer.js +0 -7
  33. package/core/config/config.d.ts +5 -0
  34. package/core/config/config.d.ts.map +1 -1
  35. package/core/controllers/media-matchers-controller.d.ts.map +1 -1
  36. package/core/controllers/media-matchers-controller.js +27 -27
  37. package/core/datetime/native-date-adapter.d.ts +1 -0
  38. package/core/datetime/native-date-adapter.d.ts.map +1 -1
  39. package/core/datetime/native-date-adapter.js +1 -1
  40. package/core/dom/breakpoint.d.ts +1 -0
  41. package/core/dom/breakpoint.d.ts.map +1 -1
  42. package/core/mixins/form-associated-input-mixin.d.ts.map +1 -1
  43. package/core/styles/core.scss +67 -69
  44. package/core/styles/mixins/chip.scss +4 -4
  45. package/core/styles/mixins/lists.scss +3 -3
  46. package/core/styles/mixins/panel.scss +2 -2
  47. package/core/styles/mixins/typo.scss +42 -40
  48. package/core/styles/node_modules_@sbb-esta_lyne-design-tokens_dist_scss_sbb-variables-as-css.scss +166 -38
  49. package/core/styles/node_modules_@sbb-esta_lyne-design-tokens_dist_scss_sbb-variables.scss +4 -4
  50. package/core/styles/typography.scss +6 -6
  51. package/core.css +92 -100
  52. package/custom-elements.json +1565 -1739
  53. package/date-input/date-input.component.d.ts +1 -0
  54. package/date-input/date-input.component.d.ts.map +1 -1
  55. package/date-input/date-input.component.js +1 -0
  56. package/development/alert/alert/alert.component.js +7 -5
  57. package/development/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.component.js +3 -3
  58. package/development/breadcrumb/breadcrumb/breadcrumb.component.js +3 -3
  59. package/development/breadcrumb/breadcrumb-group/breadcrumb-group.component.d.ts +1 -0
  60. package/development/breadcrumb/breadcrumb-group/breadcrumb-group.component.d.ts.map +1 -1
  61. package/development/breadcrumb/breadcrumb-group/breadcrumb-group.component.js +5 -5
  62. package/development/button/common.js +1 -1
  63. package/development/button/mini-button/mini-button.component.js +2 -2
  64. package/development/button.js +1 -1
  65. package/development/calendar/calendar.component.d.ts +1 -0
  66. package/development/calendar/calendar.component.d.ts.map +1 -1
  67. package/development/calendar/calendar.component.js +17 -17
  68. package/development/card/card-badge/card-badge.component.js +3 -3
  69. package/development/card/card-button/card-button.component.d.ts +1 -1
  70. package/development/card/card-link/card-link.component.d.ts +1 -1
  71. package/development/card/common/card-action-common.d.ts.map +1 -1
  72. package/development/card/common/card-action-common.js +14 -7
  73. package/development/carousel/carousel/carousel.component.d.ts +2 -1
  74. package/development/carousel/carousel/carousel.component.d.ts.map +1 -1
  75. package/development/carousel/carousel/carousel.component.js +19 -8
  76. package/development/carousel/carousel-list/carousel-list.component.d.ts +1 -1
  77. package/development/carousel/carousel-list/carousel-list.component.d.ts.map +1 -1
  78. package/development/carousel/carousel-list/carousel-list.component.js +7 -14
  79. package/development/checkbox/checkbox/checkbox.component.d.ts +1 -1
  80. package/development/checkbox/common.js +1 -1
  81. package/development/{checkbox-common-BZFJgZd7.js → checkbox-common-BKjxH3Rp.js} +12 -12
  82. package/development/checkbox.js +1 -1
  83. package/development/chip/chip/chip.component.js +3 -3
  84. package/development/chip-label/chip-label.component.js +6 -6
  85. package/development/core/a11y/interactivity-checker.js +1 -8
  86. package/development/core/a11y/live-announcer.js +1 -8
  87. package/development/core/config/config.d.ts +5 -0
  88. package/development/core/config/config.d.ts.map +1 -1
  89. package/development/core/config/config.js +1 -1
  90. package/development/core/controllers/media-matchers-controller.d.ts.map +1 -1
  91. package/development/core/controllers/media-matchers-controller.js +5 -6
  92. package/development/core/datetime/native-date-adapter.d.ts +1 -0
  93. package/development/core/datetime/native-date-adapter.d.ts.map +1 -1
  94. package/development/core/datetime/native-date-adapter.js +2 -2
  95. package/development/core/dom/breakpoint.d.ts +1 -0
  96. package/development/core/dom/breakpoint.d.ts.map +1 -1
  97. package/development/core/dom/breakpoint.js +1 -1
  98. package/development/core/mixins/form-associated-input-mixin.d.ts.map +1 -1
  99. package/development/core/mixins/form-associated-input-mixin.js +1 -1
  100. package/development/date-input/date-input.component.d.ts +1 -0
  101. package/development/date-input/date-input.component.d.ts.map +1 -1
  102. package/development/date-input/date-input.component.js +2 -1
  103. package/development/dialog/dialog/dialog.component.d.ts +3 -4
  104. package/development/dialog/dialog/dialog.component.d.ts.map +1 -1
  105. package/development/dialog/dialog/dialog.component.js +47 -112
  106. package/development/dialog/dialog-actions/dialog-actions.component.d.ts +0 -1
  107. package/development/dialog/dialog-actions/dialog-actions.component.d.ts.map +1 -1
  108. package/development/dialog/dialog-actions/dialog-actions.component.js +3 -7
  109. package/development/dialog/dialog-close-button/dialog-close-button.component.d.ts +0 -1
  110. package/development/dialog/dialog-close-button/dialog-close-button.component.d.ts.map +1 -1
  111. package/development/dialog/dialog-close-button/dialog-close-button.component.js +5 -5
  112. package/development/dialog/dialog-content/dialog-content.component.d.ts +1 -0
  113. package/development/dialog/dialog-content/dialog-content.component.d.ts.map +1 -1
  114. package/development/dialog/dialog-content/dialog-content.component.js +14 -2
  115. package/development/dialog/dialog-title/dialog-title.component.d.ts +0 -1
  116. package/development/dialog/dialog-title/dialog-title.component.d.ts.map +1 -1
  117. package/development/dialog/dialog-title/dialog-title.component.js +14 -7
  118. package/development/expansion-panel/expansion-panel-header/expansion-panel-header.component.js +3 -3
  119. package/development/file-selector/common.js +1 -1
  120. package/development/file-selector/file-selector/file-selector.component.d.ts +1 -1
  121. package/development/file-selector/file-selector-dropzone/file-selector-dropzone.component.d.ts +1 -1
  122. package/development/file-selector/file-selector-dropzone/file-selector-dropzone.component.js +8 -8
  123. package/development/{file-selector-common-CsFa5XJ-.js → file-selector-common-B-9Eiig3.js} +4 -4
  124. package/development/file-selector.js +1 -1
  125. package/development/footer/footer.component.js +3 -3
  126. package/development/form-error/form-error.component.js +5 -5
  127. package/development/form-field/form-field/form-field.component.js +14 -14
  128. package/development/header/common/header-action-common.js +3 -3
  129. package/development/header/header-button/header-button.component.d.ts +1 -1
  130. package/development/header/header-environment/header-environment.component.js +3 -3
  131. package/development/header/header-link/header-link.component.d.ts +1 -1
  132. package/development/image/image.component.d.ts +0 -1
  133. package/development/image/image.component.d.ts.map +1 -1
  134. package/development/image/image.component.js +11 -16
  135. package/development/link/common/block-link-common.js +10 -10
  136. package/development/menu/common/menu-action-common.js +3 -3
  137. package/development/message/message.component.js +6 -6
  138. package/development/{mini-button-common-Di32bSJj.js → mini-button-common-D1dU4MgN.js} +4 -4
  139. package/development/mini-calendar/mini-calendar-month/mini-calendar-month.component.js +3 -3
  140. package/development/navigation/common/navigation-action-common.js +11 -11
  141. package/development/navigation/navigation-button/navigation-button.component.d.ts +1 -1
  142. package/development/navigation/navigation-link/navigation-link.component.d.ts +1 -1
  143. package/development/navigation/navigation-list/navigation-list.component.js +3 -3
  144. package/development/navigation/navigation-marker/navigation-marker.component.js +9 -9
  145. package/development/navigation/navigation-section/navigation-section.component.js +5 -5
  146. package/development/notification/notification.component.js +7 -7
  147. package/development/option/optgroup/optgroup-base-element.js +3 -3
  148. package/development/option/option/option-base-element.d.ts.map +1 -1
  149. package/development/option/option/option-base-element.js +14 -4
  150. package/development/option/option/option.component.d.ts.map +1 -1
  151. package/development/option/option/option.component.js +8 -5
  152. package/development/option/option-hint/option-hint.component.js +3 -3
  153. package/development/paginator/common/paginator-common.d.ts.map +1 -1
  154. package/development/paginator/common/paginator-common.js +7 -24
  155. package/development/paginator/compact-paginator/compact-paginator.component.d.ts +1 -1
  156. package/development/paginator/compact-paginator/compact-paginator.component.d.ts.map +1 -1
  157. package/development/paginator/compact-paginator/compact-paginator.component.js +5 -6
  158. package/development/paginator/paginator/paginator.component.d.ts +1 -7
  159. package/development/paginator/paginator/paginator.component.d.ts.map +1 -1
  160. package/development/paginator/paginator/paginator.component.js +16 -31
  161. package/development/popover/popover/popover.component.d.ts.map +1 -1
  162. package/development/popover/popover/popover.component.js +63 -13
  163. package/development/radio-button/common.js +1 -1
  164. package/development/radio-button/radio-button/radio-button.component.d.ts +1 -1
  165. package/development/{radio-button-common-5uawgCpB.js → radio-button-common-BPrInmpg.js} +11 -11
  166. package/development/radio-button.js +1 -1
  167. package/development/sbb-tokens-DZrHvErO.js +19 -0
  168. package/development/select/select.component.d.ts +1 -1
  169. package/development/select/select.component.d.ts.map +1 -1
  170. package/development/select/select.component.js +8 -5
  171. package/development/sidebar/icon-sidebar-button/icon-sidebar-button.component.d.ts +1 -1
  172. package/development/sidebar/icon-sidebar-link/icon-sidebar-link.component.d.ts +1 -1
  173. package/development/sidebar/sidebar-title/sidebar-title.component.js +1 -1
  174. package/development/status/status.component.js +4 -4
  175. package/development/stepper/step/step.component.js +3 -3
  176. package/development/stepper/step-label/step-label.component.js +15 -15
  177. package/development/tabs/tab-label/tab-label.component.js +18 -18
  178. package/development/tag/tag/tag.component.js +7 -7
  179. package/development/teaser/teaser.component.js +3 -3
  180. package/development/teaser-hero/teaser-hero.component.js +2 -2
  181. package/development/teaser-product/common.js +1 -1
  182. package/development/teaser-product/teaser-product/teaser-product.component.d.ts +1 -1
  183. package/development/teaser-product/teaser-product-static/teaser-product-static.component.d.ts +1 -1
  184. package/development/{teaser-product-common-B1KK4iNu.js → teaser-product-common-v3BvyFdH.js} +5 -5
  185. package/development/teaser-product.js +1 -1
  186. package/development/timetable-occupancy/timetable-occupancy.component.js +3 -3
  187. package/development/title/title-base.js +10 -10
  188. package/development/title/title.component.d.ts +1 -2
  189. package/development/title/title.component.d.ts.map +1 -1
  190. package/development/title/title.component.js +25 -13
  191. package/development/toast/toast.component.js +5 -5
  192. package/development/toggle/toggle/toggle.component.js +3 -3
  193. package/development/toggle/toggle-option/toggle-option.component.js +3 -3
  194. package/development/toggle-check/toggle-check.component.js +11 -11
  195. package/development/tooltip/tooltip.component.js +3 -3
  196. package/development/train/train/train.component.js +4 -4
  197. package/development/train/train-blocked-passage/train-blocked-passage.component.js +1 -1
  198. package/development/train/train-formation/train-formation.component.js +3 -3
  199. package/development/train/train-wagon/train-wagon.component.js +9 -9
  200. package/dialog/dialog/dialog.component.d.ts +3 -4
  201. package/dialog/dialog/dialog.component.d.ts.map +1 -1
  202. package/dialog/dialog/dialog.component.js +61 -58
  203. package/dialog/dialog-actions/dialog-actions.component.d.ts +0 -1
  204. package/dialog/dialog-actions/dialog-actions.component.d.ts.map +1 -1
  205. package/dialog/dialog-actions/dialog-actions.component.js +4 -7
  206. package/dialog/dialog-close-button/dialog-close-button.component.d.ts +0 -1
  207. package/dialog/dialog-close-button/dialog-close-button.component.d.ts.map +1 -1
  208. package/dialog/dialog-close-button/dialog-close-button.component.js +16 -19
  209. package/dialog/dialog-content/dialog-content.component.d.ts +1 -0
  210. package/dialog/dialog-content/dialog-content.component.d.ts.map +1 -1
  211. package/dialog/dialog-content/dialog-content.component.js +14 -11
  212. package/dialog/dialog-title/dialog-title.component.d.ts +0 -1
  213. package/dialog/dialog-title/dialog-title.component.d.ts.map +1 -1
  214. package/dialog/dialog-title/dialog-title.component.js +11 -14
  215. package/expansion-panel/expansion-panel-header/expansion-panel-header.component.js +1 -1
  216. package/file-selector/common.js +1 -1
  217. package/file-selector/file-selector/file-selector.component.d.ts +1 -1
  218. package/file-selector/file-selector-dropzone/file-selector-dropzone.component.d.ts +1 -1
  219. package/file-selector/file-selector-dropzone/file-selector-dropzone.component.js +9 -9
  220. package/{file-selector-common-CUp299VH.js → file-selector-common-DbYkpr-x.js} +1 -1
  221. package/file-selector.js +1 -1
  222. package/footer/footer.component.js +1 -1
  223. package/form-error/form-error.component.js +1 -1
  224. package/form-field/form-field/form-field.component.js +1 -1
  225. package/header/common/header-action-common.js +1 -1
  226. package/header/header-button/header-button.component.d.ts +1 -1
  227. package/header/header-environment/header-environment.component.js +4 -4
  228. package/header/header-link/header-link.component.d.ts +1 -1
  229. package/image/image.component.d.ts +0 -1
  230. package/image/image.component.d.ts.map +1 -1
  231. package/image/image.component.js +93 -97
  232. package/link/common/block-link-common.js +14 -14
  233. package/lists.css +9 -9
  234. package/menu/common/menu-action-common.js +1 -1
  235. package/message/message.component.js +6 -6
  236. package/mini-button-common-DSGLaplg.js +10 -0
  237. package/mini-calendar/mini-calendar-month/mini-calendar-month.component.js +1 -1
  238. package/navigation/common/navigation-action-common.js +17 -17
  239. package/navigation/navigation-button/navigation-button.component.d.ts +1 -1
  240. package/navigation/navigation-link/navigation-link.component.d.ts +1 -1
  241. package/navigation/navigation-list/navigation-list.component.js +3 -3
  242. package/navigation/navigation-marker/navigation-marker.component.js +12 -12
  243. package/navigation/navigation-section/navigation-section.component.js +5 -5
  244. package/notification/notification.component.js +1 -1
  245. package/off-brand-theme.css +145 -153
  246. package/option/optgroup/optgroup-base-element.js +1 -1
  247. package/option/option/option-base-element.d.ts.map +1 -1
  248. package/option/option/option-base-element.js +30 -20
  249. package/option/option/option.component.d.ts.map +1 -1
  250. package/option/option/option.component.js +8 -8
  251. package/option/option-hint/option-hint.component.js +10 -10
  252. package/package.json +1 -1
  253. package/paginator/common/paginator-common.d.ts.map +1 -1
  254. package/paginator/common/paginator-common.js +30 -46
  255. package/paginator/compact-paginator/compact-paginator.component.d.ts +1 -1
  256. package/paginator/compact-paginator/compact-paginator.component.d.ts.map +1 -1
  257. package/paginator/compact-paginator/compact-paginator.component.js +2 -3
  258. package/paginator/paginator/paginator.component.d.ts +1 -7
  259. package/paginator/paginator/paginator.component.d.ts.map +1 -1
  260. package/paginator/paginator/paginator.component.js +42 -54
  261. package/popover/popover/popover.component.d.ts.map +1 -1
  262. package/popover/popover/popover.component.js +70 -72
  263. package/radio-button/common.js +1 -1
  264. package/radio-button/radio-button/radio-button.component.d.ts +1 -1
  265. package/radio-button-common-chJrmIBn.js +5 -0
  266. package/radio-button.js +1 -1
  267. package/safety-theme.css +149 -157
  268. package/sbb-tokens-BNWpZrLn.js +11 -0
  269. package/select/select.component.d.ts +1 -1
  270. package/select/select.component.d.ts.map +1 -1
  271. package/select/select.component.js +22 -20
  272. package/sidebar/icon-sidebar-button/icon-sidebar-button.component.d.ts +1 -1
  273. package/sidebar/icon-sidebar-link/icon-sidebar-link.component.d.ts +1 -1
  274. package/sidebar/sidebar-title/sidebar-title.component.js +5 -5
  275. package/standard-theme.css +145 -153
  276. package/status/status.component.js +4 -4
  277. package/stepper/step/step.component.js +3 -3
  278. package/stepper/step-label/step-label.component.js +1 -1
  279. package/table.css +27 -27
  280. package/tabs/tab-label/tab-label.component.js +10 -10
  281. package/tag/tag/tag.component.js +1 -1
  282. package/teaser/teaser.component.js +1 -1
  283. package/teaser-hero/teaser-hero.component.js +1 -1
  284. package/teaser-product/common.js +1 -1
  285. package/teaser-product/teaser-product/teaser-product.component.d.ts +1 -1
  286. package/teaser-product/teaser-product-static/teaser-product-static.component.d.ts +1 -1
  287. package/teaser-product-common-a4NenpSA.js +5 -0
  288. package/teaser-product.js +1 -1
  289. package/timetable-occupancy/timetable-occupancy.component.js +1 -1
  290. package/title/title-base.js +19 -19
  291. package/title/title.component.d.ts +1 -2
  292. package/title/title.component.d.ts.map +1 -1
  293. package/title/title.component.js +17 -17
  294. package/toast/toast.component.js +1 -1
  295. package/toggle/toggle/toggle.component.js +1 -1
  296. package/toggle/toggle-option/toggle-option.component.js +7 -7
  297. package/toggle-check/toggle-check.component.js +15 -15
  298. package/tooltip/tooltip.component.js +5 -5
  299. package/train/train/train.component.js +1 -1
  300. package/train/train-blocked-passage/train-blocked-passage.component.js +1 -1
  301. package/train/train-formation/train-formation.component.js +1 -1
  302. package/train/train-wagon/train-wagon.component.js +1 -1
  303. package/typography.css +11 -11
  304. package/checkbox-common-BGA_q9nc.js +0 -5
  305. package/development/sbb-tokens-DXgmy_b-.js +0 -21
  306. package/mini-button-common-DBnJfrBZ.js +0 -10
  307. package/radio-button-common-BT3VkZLM.js +0 -5
  308. package/sbb-tokens-CB1Hgctn.js +0 -12
  309. package/teaser-product-common-BwqWqRrK.js +0 -5
package/standard-theme.css CHANGED
@@ -105,8 +105,7 @@ summary {
105
105
  }
106
106
 
107
107
  /**
108
- * Do not edit directly
109
- * Generated on Tue, 28 Oct 2025 06:41:21 GMT
108
+ * Do not edit directly, this file was auto-generated.
110
109
  */
111
110
  *,
112
111
  ::before,
@@ -733,10 +732,10 @@ summary {
733
732
  */
734
733
  --sbb-spacing-responsive-xxl-ultra: 7.5rem;
735
734
  --sbb-typo-font-family: "SBB", "Helvetica Neue", Helvetica, Arial, sans-serif;
736
- --sbb-typo-letter-spacing-titles: 0;
737
- --sbb-typo-letter-spacing-body-text: 0.03em;
738
- --sbb-typo-line-height-titles: 1.3;
739
- --sbb-typo-line-height-body-text: 1.75;
735
+ --sbb-typo-letter-spacing-heading: 0em;
736
+ --sbb-typo-letter-spacing-text: 0.03em;
737
+ --sbb-typo-line-height-heading: 1.4;
738
+ --sbb-typo-line-height-text: 1.75;
740
739
  /**
741
740
  * Original Value: 12px
742
741
  */
@@ -1011,7 +1010,7 @@ summary {
1011
1010
  --sbb-box-shadow-level-11-hard-negative:
1012
1011
  var(--sbb-shadow-level-11-shadow-2) var(--sbb-shadow-color-hard-2-negative),
1013
1012
  var(--sbb-shadow-level-11-shadow-1) var(--sbb-shadow-color-hard-1-negative);
1014
- --sbb-font-default-color: var(--sbb-color-2);
1013
+ --sbb-font-color-default: var(--sbb-color-2);
1015
1014
  /* Focus outline */
1016
1015
  --sbb-focus-outline-color-default: var(--sbb-color-black);
1017
1016
  --sbb-focus-outline-color-dark: var(--sbb-color-white);
@@ -1022,19 +1021,25 @@ summary {
1022
1021
  );
1023
1022
  --sbb-focus-outline-width: var(--sbb-border-width-1x);
1024
1023
  /* Title */
1025
- --sbb-font-size-title-1: var(--sbb-typo-scale-2-5x);
1026
- --sbb-font-size-title-2: var(--sbb-typo-scale-2x);
1027
- --sbb-font-size-title-3: var(--sbb-typo-scale-1-5x);
1028
- --sbb-font-size-title-4: var(--sbb-typo-scale-1-25x);
1029
- --sbb-font-size-title-5: var(--sbb-typo-scale-1-125x);
1030
- --sbb-font-size-title-6: var(--sbb-typo-scale-0-875x);
1031
- --sbb-font-size-title-7: var(--sbb-typo-scale-0-75x);
1032
- --sbb-font-size-text-xl: var(--sbb-typo-scale-1-25x);
1033
- --sbb-font-size-text-l: var(--sbb-typo-scale-1-125x);
1034
- --sbb-font-size-text-m: var(--sbb-typo-scale-default);
1035
- --sbb-font-size-text-s: var(--sbb-typo-scale-0-875x);
1036
- --sbb-font-size-text-xs: var(--sbb-typo-scale-0-75x);
1037
- --sbb-font-size-text-xxs: var(--sbb-typo-scale-0-75x);
1024
+ --sbb-heading-font-size-1: var(--sbb-typo-scale-2-5x);
1025
+ --sbb-heading-font-size-2: var(--sbb-typo-scale-2x);
1026
+ --sbb-heading-font-size-3: var(--sbb-typo-scale-1-5x);
1027
+ --sbb-heading-font-size-4: var(--sbb-typo-scale-1-25x);
1028
+ --sbb-heading-font-size-5: var(--sbb-typo-scale-1-125x);
1029
+ --sbb-heading-font-size-6: var(--sbb-typo-scale-0-875x);
1030
+ --sbb-heading-margin-block-1: var(--sbb-spacing-responsive-l) var(--sbb-spacing-responsive-s);
1031
+ --sbb-heading-margin-block-2: var(--sbb-spacing-responsive-m) var(--sbb-spacing-responsive-xxxs);
1032
+ --sbb-heading-margin-block-3: var(--sbb-spacing-responsive-m) var(--sbb-spacing-responsive-xxxs);
1033
+ --sbb-heading-margin-block-4: var(--sbb-spacing-responsive-m) var(--sbb-spacing-fixed-3x);
1034
+ --sbb-heading-margin-block-5: var(--sbb-spacing-responsive-m) var(--sbb-spacing-fixed-2x);
1035
+ --sbb-heading-margin-block-6: var(--sbb-spacing-responsive-m) var(--sbb-spacing-fixed-1x);
1036
+ /* Text */
1037
+ --sbb-text-font-size-xl: var(--sbb-typo-scale-1-25x);
1038
+ --sbb-text-font-size-l: var(--sbb-typo-scale-1-125x);
1039
+ --sbb-text-font-size-m: var(--sbb-typo-scale-default);
1040
+ --sbb-text-font-size-s: var(--sbb-typo-scale-0-875x);
1041
+ --sbb-text-font-size-xs: var(--sbb-typo-scale-0-75x);
1042
+ --sbb-text-font-size-xxs: var(--sbb-typo-scale-0-75x);
1038
1043
  /* Spacing */
1039
1044
  --sbb-spacing-responsive-xxxs: var(--sbb-spacing-responsive-xxxs-zero);
1040
1045
  --sbb-spacing-responsive-xxs: var(--sbb-spacing-responsive-xxs-zero);
@@ -1064,36 +1069,25 @@ summary {
1064
1069
  --sbb-overlay-default-z-index: 1000;
1065
1070
  --sbb-cursor-default: default;
1066
1071
  --sbb-cursor-pointer: pointer;
1067
- --sbb-title-font-size-level-1: var(--sbb-font-size-title-1);
1068
- --sbb-title-font-size-level-2: var(--sbb-font-size-title-2);
1069
- --sbb-title-font-size-level-3: var(--sbb-font-size-title-3);
1070
- --sbb-title-font-size-level-4: var(--sbb-font-size-title-4);
1071
- --sbb-title-font-size-level-5: var(--sbb-font-size-title-5);
1072
- --sbb-title-font-size-level-6: var(--sbb-font-size-title-6);
1073
- --sbb-title-default-margin-block-start: var(--sbb-spacing-responsive-m);
1074
- --sbb-title-margin-block-start-level-1: var(--sbb-spacing-responsive-l);
1075
- --sbb-title-margin-block-end-level-1: var(--sbb-spacing-responsive-s);
1076
- --sbb-title-margin-block-end-level-2: var(--sbb-spacing-responsive-xxxs);
1077
- --sbb-title-margin-block-end-level-3: var(--sbb-spacing-responsive-xxxs);
1078
- --sbb-title-margin-block-end-level-4: var(--sbb-spacing-fixed-3x);
1079
- --sbb-title-margin-block-end-level-5: var(--sbb-spacing-fixed-2x);
1080
- --sbb-title-margin-block-end-level-6: var(--sbb-spacing-fixed-1x);
1081
1072
  }
1082
1073
  :root.sbb-lean {
1083
- --sbb-title-font-size-level-1: var(--sbb-font-size-title-2);
1084
- --sbb-title-font-size-level-2: var(--sbb-font-size-title-3);
1085
- --sbb-title-font-size-level-3: var(--sbb-font-size-title-4);
1086
- --sbb-title-font-size-level-4: var(--sbb-font-size-title-5);
1087
- --sbb-title-font-size-level-5: var(--sbb-font-size-title-6);
1088
- --sbb-title-font-size-level-6: var(--sbb-font-size-title-7);
1089
- --sbb-title-default-margin-block-start: var(--sbb-spacing-responsive-s);
1090
- --sbb-title-margin-block-start-level-1: var(--sbb-spacing-responsive-s);
1091
- --sbb-title-margin-block-end-level-1: var(--sbb-spacing-fixed-3x);
1092
- --sbb-title-margin-block-end-level-2: var(--sbb-spacing-fixed-3x);
1093
- --sbb-title-margin-block-end-level-3: var(--sbb-spacing-responsive-xxxs);
1094
- --sbb-title-margin-block-end-level-4: var(--sbb-spacing-fixed-2x);
1095
- --sbb-title-margin-block-end-level-5: var(--sbb-spacing-fixed-1x);
1096
- --sbb-title-margin-block-end-level-6: 0;
1074
+ --sbb-title-font-size-level-1-lean: var(--sbb-heading-font-size-2);
1075
+ --sbb-title-font-size-level-2-lean: var(--sbb-heading-font-size-3);
1076
+ --sbb-title-font-size-level-3-lean: var(--sbb-heading-font-size-4);
1077
+ --sbb-title-font-size-level-4-lean: var(--sbb-heading-font-size-5);
1078
+ --sbb-title-font-size-level-5-lean: var(--sbb-heading-font-size-6);
1079
+ --sbb-title-font-size-level-6-lean: var(--sbb-typo-scale-0-75x);
1080
+ --sbb-heading-margin-block-1-lean: var(--sbb-spacing-responsive-s)
1081
+ var(--sbb-spacing-fixed-3x);
1082
+ --sbb-heading-margin-block-2-lean: var(--sbb-spacing-responsive-s)
1083
+ var(--sbb-spacing-fixed-3x);
1084
+ --sbb-heading-margin-block-3-lean: var(--sbb-spacing-responsive-s)
1085
+ var(--sbb-spacing-responsive-xxxs);
1086
+ --sbb-heading-margin-block-4-lean: var(--sbb-spacing-responsive-s)
1087
+ var(--sbb-spacing-fixed-2x);
1088
+ --sbb-heading-margin-block-5-lean: var(--sbb-spacing-responsive-s)
1089
+ var(--sbb-spacing-fixed-1x);
1090
+ --sbb-heading-margin-block-6-lean: var(--sbb-spacing-responsive-s) 0;
1097
1091
  }
1098
1092
  :root {
1099
1093
  --sbb-border-radius-infinity: 100000em;
@@ -1107,7 +1101,7 @@ summary {
1107
1101
  @media (min-width: calc(37.5rem)) {
1108
1102
  :root {
1109
1103
  /* Title */
1110
- --sbb-font-size-title-1: var(--sbb-typo-scale-3x);
1104
+ --sbb-heading-font-size-1: var(--sbb-typo-scale-3x);
1111
1105
  /* Spacing */
1112
1106
  --sbb-spacing-responsive-l: var(--sbb-spacing-responsive-l-small);
1113
1107
  --sbb-spacing-responsive-xl: var(--sbb-spacing-responsive-xl-small);
@@ -1121,18 +1115,18 @@ summary {
1121
1115
  @media (min-width: calc(64rem)) {
1122
1116
  :root {
1123
1117
  /* Title */
1124
- --sbb-font-size-title-1: var(--sbb-typo-scale-3-5x);
1125
- --sbb-font-size-title-2: var(--sbb-typo-scale-2-5x);
1126
- --sbb-font-size-title-3: var(--sbb-typo-scale-2x);
1127
- --sbb-font-size-title-4: var(--sbb-typo-scale-1-5x);
1128
- --sbb-font-size-title-5: var(--sbb-typo-scale-1-25x);
1129
- --sbb-font-size-title-6: var(--sbb-typo-scale-default);
1130
- --sbb-font-size-title-7: var(--sbb-typo-scale-0-875x);
1131
- --sbb-font-size-text-xl: var(--sbb-typo-scale-1-5x);
1132
- --sbb-font-size-text-l: var(--sbb-typo-scale-1-25x);
1133
- --sbb-font-size-text-m: var(--sbb-typo-scale-1-125x);
1134
- --sbb-font-size-text-s: var(--sbb-typo-scale-default);
1135
- --sbb-font-size-text-xs: var(--sbb-typo-scale-0-875x);
1118
+ --sbb-heading-font-size-1: var(--sbb-typo-scale-3-5x);
1119
+ --sbb-heading-font-size-2: var(--sbb-typo-scale-2-5x);
1120
+ --sbb-heading-font-size-3: var(--sbb-typo-scale-2x);
1121
+ --sbb-heading-font-size-4: var(--sbb-typo-scale-1-5x);
1122
+ --sbb-heading-font-size-5: var(--sbb-typo-scale-1-25x);
1123
+ --sbb-heading-font-size-6: var(--sbb-typo-scale-default);
1124
+ /* Text */
1125
+ --sbb-text-font-size-xl: var(--sbb-typo-scale-1-5x);
1126
+ --sbb-text-font-size-l: var(--sbb-typo-scale-1-25x);
1127
+ --sbb-text-font-size-m: var(--sbb-typo-scale-1-125x);
1128
+ --sbb-text-font-size-s: var(--sbb-typo-scale-default);
1129
+ --sbb-text-font-size-xs: var(--sbb-typo-scale-0-875x);
1136
1130
  /* Spacing */
1137
1131
  --sbb-spacing-responsive-xxxs: var(--sbb-spacing-responsive-xxxs-large);
1138
1132
  --sbb-spacing-responsive-xxs: var(--sbb-spacing-responsive-xxs-large);
@@ -1153,6 +1147,11 @@ summary {
1153
1147
  --sbb-size-element-s: var(--sbb-size-element-s-large);
1154
1148
  --sbb-size-element-m: var(--sbb-size-element-m-large);
1155
1149
  --sbb-size-element-l: var(--sbb-size-element-l-large);
1150
+ }
1151
+ :root.sbb-lean {
1152
+ --sbb-title-font-size-level-6-lean: var(--sbb-typo-scale-0-875x);
1153
+ }
1154
+ :root {
1156
1155
  --sbb-header-height: var(--sbb-spacing-fixed-24x);
1157
1156
  --sbb-time-input-max-width: 4.0625rem;
1158
1157
  }
@@ -1163,7 +1162,7 @@ summary {
1163
1162
  @media (min-width: calc(90rem)) {
1164
1163
  :root {
1165
1164
  /* Title */
1166
- --sbb-font-size-title-1: var(--sbb-typo-scale-4x);
1165
+ --sbb-heading-font-size-1: var(--sbb-typo-scale-4x);
1167
1166
  /* Spacing */
1168
1167
  --sbb-spacing-responsive-m: var(--sbb-spacing-responsive-m-ultra);
1169
1168
  --sbb-spacing-responsive-l: var(--sbb-spacing-responsive-l-ultra);
@@ -1209,10 +1208,10 @@ summary {
1209
1208
  html {
1210
1209
  font-family: var(--sbb-typo-font-family);
1211
1210
  font-weight: normal;
1212
- line-height: var(--sbb-typo-line-height-body-text);
1213
- letter-spacing: var(--sbb-typo-letter-spacing-body-text);
1211
+ line-height: var(--sbb-typo-line-height-text);
1212
+ letter-spacing: var(--sbb-typo-letter-spacing-text);
1214
1213
  font-size: var(--sbb-text-font-size);
1215
- color: var(--sbb-font-default-color);
1214
+ color: var(--sbb-font-color-default);
1216
1215
  background-color: var(--sbb-background-color-1);
1217
1216
  }
1218
1217
 
@@ -1223,11 +1222,11 @@ html {
1223
1222
  }
1224
1223
 
1225
1224
  :is(sbb-form-field, sbb-timetable-form-field) :where(input, select, textarea, sbb-select, sbb-date-input, sbb-time-input) {
1226
- --sbb-text-font-size: var(--sbb-font-size-text-m);
1225
+ --sbb-text-font-size: var(--sbb-text-font-size-m);
1227
1226
  font-family: var(--sbb-typo-font-family);
1228
1227
  font-weight: normal;
1229
- line-height: var(--sbb-typo-line-height-body-text);
1230
- letter-spacing: var(--sbb-typo-letter-spacing-body-text);
1228
+ line-height: var(--sbb-typo-line-height-text);
1229
+ letter-spacing: var(--sbb-typo-letter-spacing-text);
1231
1230
  font-size: var(--sbb-text-font-size);
1232
1231
  overflow: hidden;
1233
1232
  white-space: nowrap;
@@ -1247,7 +1246,7 @@ html {
1247
1246
  background-color: transparent;
1248
1247
  font-size: var(--sbb-form-field-input-text-size) !important;
1249
1248
  font-family: var(--sbb-typo-font-family) !important;
1250
- line-height: var(--sbb-typo-line-height-body-text) !important;
1249
+ line-height: var(--sbb-typo-line-height-text) !important;
1251
1250
  }
1252
1251
  :is(sbb-form-field, sbb-timetable-form-field) :where(input, select, textarea, sbb-select, sbb-date-input, sbb-time-input)::placeholder {
1253
1252
  color: var(--sbb-color-5);
@@ -1279,7 +1278,7 @@ html {
1279
1278
  :is(sbb-form-field, sbb-timetable-form-field)[size=s] :where(input, sbb-date-input, sbb-time-input) {
1280
1279
  height: calc(var(--sbb-form-field-input-text-size) * 1.25);
1281
1280
  line-height: 1 !important;
1282
- margin-block: calc(0.5 * var(--sbb-form-field-input-text-size) * (var(--sbb-typo-line-height-body-text) - 1.25));
1281
+ margin-block: calc(0.5 * var(--sbb-form-field-input-text-size) * (var(--sbb-typo-line-height-text) - 1.25));
1283
1282
  }
1284
1283
  :is(sbb-form-field, sbb-timetable-form-field) :where(textarea) {
1285
1284
  --sbb-scrollbar-thumb-width: 0.125rem;
@@ -1330,7 +1329,7 @@ html {
1330
1329
  resize: none;
1331
1330
  white-space: break-spaces;
1332
1331
  overflow-y: auto;
1333
- min-height: calc(var(--sbb-typo-line-height-body-text) * 1em);
1332
+ min-height: calc(var(--sbb-typo-line-height-text) * 1em);
1334
1333
  }
1335
1334
  :is(sbb-form-field, sbb-timetable-form-field)[size=l] :where(textarea) {
1336
1335
  padding-block-end: 0.34375rem;
@@ -1432,7 +1431,7 @@ sbb-toast) {
1432
1431
 
1433
1432
  sbb-breadcrumb-group:not(:defined) {
1434
1433
  display: block;
1435
- height: calc(var(--sbb-typo-line-height-body-text) * var(--sbb-font-size-text-xs));
1434
+ height: calc(var(--sbb-typo-line-height-text) * var(--sbb-text-font-size-xs));
1436
1435
  overflow: hidden;
1437
1436
  }
1438
1437
 
@@ -1441,11 +1440,11 @@ sbb-breadcrumb-group:not(:defined) {
1441
1440
  }
1442
1441
 
1443
1442
  .sbb-header-info {
1444
- --sbb-text-font-size: var(--sbb-font-size-text-xs);
1443
+ --sbb-text-font-size: var(--sbb-text-font-size-xs);
1445
1444
  font-family: var(--sbb-typo-font-family);
1446
1445
  font-weight: normal;
1447
- line-height: var(--sbb-typo-line-height-body-text);
1448
- letter-spacing: var(--sbb-typo-letter-spacing-body-text);
1446
+ line-height: var(--sbb-typo-line-height-text);
1447
+ letter-spacing: var(--sbb-typo-letter-spacing-text);
1449
1448
  font-size: var(--sbb-text-font-size);
1450
1449
  display: flex;
1451
1450
  padding-inline: var(--sbb-spacing-fixed-4x);
@@ -1454,7 +1453,7 @@ sbb-breadcrumb-group:not(:defined) {
1454
1453
  color: var(--sbb-color-1);
1455
1454
  }
1456
1455
  .sbb-header-info strong + * {
1457
- font-size: var(--sbb-font-size-text-xxs);
1456
+ font-size: var(--sbb-text-font-size-xxs);
1458
1457
  color: var(--sbb-color-granite);
1459
1458
  color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
1460
1459
  }
@@ -1649,51 +1648,44 @@ sbb-toggle:has(:focus-visible) {
1649
1648
  --sbb-option-hint-padding-block-end: var(--sbb-spacing-fixed-1x);
1650
1649
  }
1651
1650
 
1652
- sbb-dialog[negative] sbb-dialog-actions {
1653
- --sbb-dialog-actions-border-color: var(--sbb-background-color-4-negative);
1654
- }
1655
- sbb-dialog:is(:state(overflows),[state--overflows]) sbb-dialog-actions {
1656
- --sbb-dialog-actions-border-color: transparent;
1657
- box-shadow: var(--sbb-box-shadow-level-9-soft);
1658
- }
1659
- sbb-dialog[negative]:is(:state(overflows),[state--overflows]) sbb-dialog-actions {
1660
- box-shadow: var(--sbb-box-shadow-level-9-soft-negative);
1651
+ sbb-dialog:has(> sbb-dialog-close-button) > sbb-dialog-title, sbb-dialog:is(:state(has-intermediate-element),[state--has-intermediate-element]):has(> * > sbb-dialog-close-button) > * > sbb-dialog-title {
1652
+ padding-inline-end: 0;
1661
1653
  }
1662
1654
 
1663
- sbb-dialog:has(> sbb-dialog-title) > sbb-dialog-content {
1655
+ sbb-dialog:has(> sbb-dialog-title) > sbb-dialog-content, sbb-dialog:is(:state(has-intermediate-element),[state--has-intermediate-element]):has(> * > sbb-dialog-title) > * > sbb-dialog-content {
1664
1656
  padding-block-start: 0;
1665
1657
  }
1666
-
1667
- sbb-dialog:has(> sbb-dialog-close-button) > sbb-dialog-title {
1668
- margin-inline-end: 0;
1658
+ sbb-dialog[negative] > sbb-dialog-content, sbb-dialog[negative]:is(:state(has-intermediate-element),[state--has-intermediate-element]) > * > sbb-dialog-content {
1659
+ --sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-white) 30%, transparent);
1660
+ --sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-white) 60%, transparent);
1669
1661
  }
1670
1662
 
1671
- sbb-dialog:not(:has(> sbb-dialog-title)) > sbb-dialog-close-button {
1663
+ sbb-dialog:not(:has(> sbb-dialog-title)) > sbb-dialog-close-button, sbb-dialog:is(:state(has-intermediate-element),[state--has-intermediate-element]):not(:has(> * > sbb-dialog-title)) > * > sbb-dialog-close-button {
1672
1664
  position: absolute;
1673
1665
  z-index: 1;
1674
1666
  }
1675
- sbb-dialog:has(> sbb-dialog-title[visual-level="3"]) > sbb-dialog-close-button {
1676
- --_sbb-dialog-title-size: var(--sbb-font-size-title-3);
1667
+ sbb-dialog:has(> sbb-dialog-title[visual-level="3"]) > sbb-dialog-close-button, sbb-dialog:is(:state(has-intermediate-element),[state--has-intermediate-element]):has(> * > sbb-dialog-title[visual-level="3"]) > * > sbb-dialog-close-button {
1668
+ --_sbb-dialog-title-size: var(--sbb-heading-font-size-3);
1677
1669
  }
1678
- sbb-dialog:has(> sbb-dialog-title[visual-level="5"]) > sbb-dialog-close-button {
1679
- --_sbb-dialog-title-size: var(--sbb-font-size-title-5);
1670
+ sbb-dialog:has(> sbb-dialog-title[visual-level="5"]) > sbb-dialog-close-button, sbb-dialog:is(:state(has-intermediate-element),[state--has-intermediate-element]):has(> * > sbb-dialog-title[visual-level="5"]) > * > sbb-dialog-close-button {
1671
+ --_sbb-dialog-title-size: var(--sbb-heading-font-size-5);
1680
1672
  }
1681
1673
 
1682
1674
  sbb-notification:has(sbb-title) {
1683
- --_sbb-notification-icon-authoritative-font-size: var(--sbb-font-size-title-5);
1684
- --_sbb-notification-icon-authoritative-line-height: var(--sbb-typo-line-height-titles);
1675
+ --_sbb-notification-icon-authoritative-font-size: var(--sbb-heading-font-size-5);
1676
+ --_sbb-notification-icon-authoritative-line-height: var(--sbb-typo-line-height-heading);
1685
1677
  }
1686
1678
  sbb-notification:has(sbb-title)[size=s] {
1687
- --_sbb-notification-icon-authoritative-font-size: var(--sbb-font-size-title-6);
1688
- --_sbb-notification-icon-authoritative-line-height: var(--sbb-typo-line-height-body-text);
1679
+ --_sbb-notification-icon-authoritative-font-size: var(--sbb-heading-font-size-6);
1680
+ --_sbb-notification-icon-authoritative-line-height: var(--sbb-typo-line-height-text);
1689
1681
  }
1690
1682
 
1691
1683
  sbb-status:has(sbb-title) {
1692
1684
  --sbb-status-gap: var(--sbb-spacing-responsive-xxxs);
1693
1685
  --_sbb-status-text-color-override: var(--sbb-color-granite);
1694
1686
  --_sbb-status-text-color-override: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
1695
- --_sbb-status-title-font-size: var(--sbb-font-size-title-5);
1696
- --_sbb-status-title-line-height: var(--sbb-typo-line-height-titles);
1687
+ --_sbb-status-title-font-size: var(--sbb-heading-font-size-5);
1688
+ --_sbb-status-title-line-height: var(--sbb-typo-line-height-heading);
1697
1689
  }
1698
1690
 
1699
1691
  .sbb-overlay-outlet {
@@ -1744,33 +1736,33 @@ sup {
1744
1736
  .sbb-text-xl {
1745
1737
  font-family: var(--sbb-typo-font-family);
1746
1738
  font-weight: normal;
1747
- line-height: var(--sbb-typo-line-height-body-text);
1748
- letter-spacing: var(--sbb-typo-letter-spacing-body-text);
1739
+ line-height: var(--sbb-typo-line-height-text);
1740
+ letter-spacing: var(--sbb-typo-letter-spacing-text);
1749
1741
  font-size: var(--sbb-text-font-size);
1750
1742
  }
1751
1743
 
1752
1744
  .sbb-text-xxs {
1753
- --sbb-text-font-size: var(--sbb-font-size-text-xxs);
1745
+ --sbb-text-font-size: var(--sbb-text-font-size-xxs);
1754
1746
  }
1755
1747
 
1756
1748
  .sbb-text-xs {
1757
- --sbb-text-font-size: var(--sbb-font-size-text-xs);
1749
+ --sbb-text-font-size: var(--sbb-text-font-size-xs);
1758
1750
  }
1759
1751
 
1760
1752
  .sbb-text-s {
1761
- --sbb-text-font-size: var(--sbb-font-size-text-s);
1753
+ --sbb-text-font-size: var(--sbb-text-font-size-s);
1762
1754
  }
1763
1755
 
1764
1756
  .sbb-text-m {
1765
- --sbb-text-font-size: var(--sbb-font-size-text-m);
1757
+ --sbb-text-font-size: var(--sbb-text-font-size-m);
1766
1758
  }
1767
1759
 
1768
1760
  .sbb-text-l {
1769
- --sbb-text-font-size: var(--sbb-font-size-text-l);
1761
+ --sbb-text-font-size: var(--sbb-text-font-size-l);
1770
1762
  }
1771
1763
 
1772
1764
  .sbb-text-xl {
1773
- --sbb-text-font-size: var(--sbb-font-size-text-xl);
1765
+ --sbb-text-font-size: var(--sbb-text-font-size-xl);
1774
1766
  }
1775
1767
 
1776
1768
  .sbb-text--bold {
@@ -1778,11 +1770,11 @@ sup {
1778
1770
  }
1779
1771
 
1780
1772
  .sbb-legend {
1781
- --sbb-text-font-size: var(--sbb-font-size-text-xs);
1773
+ --sbb-text-font-size: var(--sbb-text-font-size-xs);
1782
1774
  font-family: var(--sbb-typo-font-family);
1783
1775
  font-weight: normal;
1784
- line-height: var(--sbb-typo-line-height-body-text);
1785
- letter-spacing: var(--sbb-typo-letter-spacing-body-text);
1776
+ line-height: var(--sbb-typo-line-height-text);
1777
+ letter-spacing: var(--sbb-typo-letter-spacing-text);
1786
1778
  font-size: var(--sbb-text-font-size);
1787
1779
  padding: 0;
1788
1780
  color: var(--sbb-color-granite);
@@ -1817,11 +1809,11 @@ sup {
1817
1809
  position: relative;
1818
1810
  }
1819
1811
  [sbb-badge]::after {
1820
- --sbb-text-font-size: var(--sbb-font-size-text-xxs);
1812
+ --sbb-text-font-size: var(--sbb-text-font-size-xxs);
1821
1813
  font-family: var(--sbb-typo-font-family);
1822
1814
  font-weight: normal;
1823
- line-height: var(--sbb-typo-line-height-body-text);
1824
- letter-spacing: var(--sbb-typo-letter-spacing-body-text);
1815
+ line-height: var(--sbb-typo-line-height-text);
1816
+ letter-spacing: var(--sbb-typo-letter-spacing-text);
1825
1817
  font-size: var(--sbb-text-font-size);
1826
1818
  font-weight: bold;
1827
1819
  display: flex;
@@ -1878,11 +1870,11 @@ sup {
1878
1870
  padding-block-start: var(--sbb-spacing-fixed-4x);
1879
1871
  color: var(--sbb-color-granite);
1880
1872
  color: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
1881
- --sbb-text-font-size: var(--sbb-font-size-text-xs);
1873
+ --sbb-text-font-size: var(--sbb-text-font-size-xs);
1882
1874
  font-family: var(--sbb-typo-font-family);
1883
1875
  font-weight: normal;
1884
- line-height: var(--sbb-typo-line-height-body-text);
1885
- letter-spacing: var(--sbb-typo-letter-spacing-body-text);
1876
+ line-height: var(--sbb-typo-line-height-text);
1877
+ letter-spacing: var(--sbb-typo-letter-spacing-text);
1886
1878
  font-size: var(--sbb-text-font-size);
1887
1879
  }
1888
1880
  .sbb-figure :is(.sbb-figure-overlap-start-start,
@@ -2042,16 +2034,16 @@ sup {
2042
2034
  width: 1em;
2043
2035
  align-items: center;
2044
2036
  justify-content: center;
2045
- inset-block-start: calc(0.5 * (var(--sbb-typo-line-height-body-text) * 1em - 1em));
2037
+ inset-block-start: calc(0.5 * (var(--sbb-typo-line-height-text) * 1em - 1em));
2046
2038
  inset-inline-start: calc(-1 * (0.5 * var(--sbb-list-padding-inline-start) + 0.5em));
2047
2039
  transform: scale(1.3);
2048
2040
  }
2049
2041
  .sbb-list:where(dl) {
2050
- --sbb-text-font-size: var(--sbb-font-size-text-s);
2042
+ --sbb-text-font-size: var(--sbb-text-font-size-s);
2051
2043
  font-family: var(--sbb-typo-font-family);
2052
2044
  font-weight: normal;
2053
- line-height: var(--sbb-typo-line-height-body-text);
2054
- letter-spacing: var(--sbb-typo-letter-spacing-body-text);
2045
+ line-height: var(--sbb-typo-line-height-text);
2046
+ letter-spacing: var(--sbb-typo-letter-spacing-text);
2055
2047
  font-size: var(--sbb-text-font-size);
2056
2048
  margin: 0;
2057
2049
  padding: 0;
@@ -2075,7 +2067,7 @@ sup {
2075
2067
  --sbb-step-list-text-to-marker-block-offset: calc(
2076
2068
  0.5 *
2077
2069
  (
2078
- var(--sbb-step-list-dimensions) - var(--sbb-typo-line-height-body-text) *
2070
+ var(--sbb-step-list-dimensions) - var(--sbb-typo-line-height-text) *
2079
2071
  var(--sbb-text-font-size)
2080
2072
  )
2081
2073
  );
@@ -2105,11 +2097,11 @@ sup {
2105
2097
  min-height: calc(var(--sbb-step-list-dimensions) + 2 * var(--sbb-step-list-padding-block));
2106
2098
  }
2107
2099
  .sbb-step-list > li::before {
2108
- --sbb-text-font-size: var(--sbb-font-size-text-xxs);
2100
+ --sbb-text-font-size: var(--sbb-text-font-size-xxs);
2109
2101
  font-family: var(--sbb-typo-font-family);
2110
2102
  font-weight: normal;
2111
- line-height: var(--sbb-typo-line-height-body-text);
2112
- letter-spacing: var(--sbb-typo-letter-spacing-body-text);
2103
+ line-height: var(--sbb-typo-line-height-text);
2104
+ letter-spacing: var(--sbb-typo-letter-spacing-text);
2113
2105
  font-size: var(--sbb-text-font-size);
2114
2106
  font-weight: bold;
2115
2107
  content: counter(steps);
@@ -2153,7 +2145,7 @@ sup {
2153
2145
  --sbb-icon-list-text-to-marker-block-offset: calc(
2154
2146
  0.5 *
2155
2147
  (
2156
- var(--sbb-icon-list-dimensions) - var(--sbb-typo-line-height-body-text) *
2148
+ var(--sbb-icon-list-dimensions) - var(--sbb-typo-line-height-text) *
2157
2149
  var(--sbb-text-font-size)
2158
2150
  )
2159
2151
  );
@@ -2432,11 +2424,11 @@ sup {
2432
2424
  .sbb-table-m thead > tr > th,
2433
2425
  .sbb-table-s thead > tr > th,
2434
2426
  .sbb-table-xs thead > tr > th {
2435
- --sbb-text-font-size: var(--sbb-font-size-text-xs);
2427
+ --sbb-text-font-size: var(--sbb-text-font-size-xs);
2436
2428
  font-family: var(--sbb-typo-font-family);
2437
2429
  font-weight: normal;
2438
- line-height: var(--sbb-typo-line-height-body-text);
2439
- letter-spacing: var(--sbb-typo-letter-spacing-body-text);
2430
+ line-height: var(--sbb-typo-line-height-text);
2431
+ letter-spacing: var(--sbb-typo-letter-spacing-text);
2440
2432
  font-size: var(--sbb-text-font-size);
2441
2433
  font-weight: bold;
2442
2434
  background-color: var(--sbb-table-background-color);
@@ -2455,11 +2447,11 @@ sup {
2455
2447
  .sbb-table-m tbody > tr > td,
2456
2448
  .sbb-table-s tbody > tr > td,
2457
2449
  .sbb-table-xs tbody > tr > td {
2458
- --sbb-text-font-size: var(--sbb-font-size-text-s);
2450
+ --sbb-text-font-size: var(--sbb-text-font-size-s);
2459
2451
  font-family: var(--sbb-typo-font-family);
2460
2452
  font-weight: normal;
2461
- line-height: var(--sbb-typo-line-height-body-text);
2462
- letter-spacing: var(--sbb-typo-letter-spacing-body-text);
2453
+ line-height: var(--sbb-typo-line-height-text);
2454
+ letter-spacing: var(--sbb-typo-letter-spacing-text);
2463
2455
  font-size: var(--sbb-text-font-size);
2464
2456
  background-color: var(--sbb-table-background-color);
2465
2457
  border-block-end: var(--sbb-table-border);
@@ -2477,11 +2469,11 @@ sup {
2477
2469
  .sbb-table-m caption,
2478
2470
  .sbb-table-s caption,
2479
2471
  .sbb-table-xs caption {
2480
- --sbb-text-font-size: var(--sbb-font-size-text-xs);
2472
+ --sbb-text-font-size: var(--sbb-text-font-size-xs);
2481
2473
  font-family: var(--sbb-typo-font-family);
2482
2474
  font-weight: normal;
2483
- line-height: var(--sbb-typo-line-height-body-text);
2484
- letter-spacing: var(--sbb-typo-letter-spacing-body-text);
2475
+ line-height: var(--sbb-typo-line-height-text);
2476
+ letter-spacing: var(--sbb-typo-letter-spacing-text);
2485
2477
  font-size: var(--sbb-text-font-size);
2486
2478
  --sbb-table-caption-color-fallback: var(--sbb-color-granite);
2487
2479
  --sbb-table-caption-color-fallback: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
@@ -2504,11 +2496,11 @@ sup {
2504
2496
  --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-2x);
2505
2497
  }
2506
2498
  .sbb-table-s tbody > tr > td {
2507
- --sbb-text-font-size: var(--sbb-font-size-text-xs);
2499
+ --sbb-text-font-size: var(--sbb-text-font-size-xs);
2508
2500
  font-family: var(--sbb-typo-font-family);
2509
2501
  font-weight: normal;
2510
- line-height: var(--sbb-typo-line-height-body-text);
2511
- letter-spacing: var(--sbb-typo-letter-spacing-body-text);
2502
+ line-height: var(--sbb-typo-line-height-text);
2503
+ letter-spacing: var(--sbb-typo-letter-spacing-text);
2512
2504
  font-size: var(--sbb-text-font-size);
2513
2505
  }
2514
2506
 
@@ -2519,11 +2511,11 @@ sup {
2519
2511
  --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-1x);
2520
2512
  }
2521
2513
  .sbb-table-xs tbody > tr > td {
2522
- --sbb-text-font-size: var(--sbb-font-size-text-xs);
2514
+ --sbb-text-font-size: var(--sbb-text-font-size-xs);
2523
2515
  font-family: var(--sbb-typo-font-family);
2524
2516
  font-weight: normal;
2525
- line-height: var(--sbb-typo-line-height-body-text);
2526
- letter-spacing: var(--sbb-typo-letter-spacing-body-text);
2517
+ line-height: var(--sbb-typo-line-height-text);
2518
+ letter-spacing: var(--sbb-typo-letter-spacing-text);
2527
2519
  font-size: var(--sbb-text-font-size);
2528
2520
  }
2529
2521
 
@@ -2559,11 +2551,11 @@ sbb-table-wrapper[negative] .sbb-table,
2559
2551
  }
2560
2552
 
2561
2553
  .sbb-table-header-cell {
2562
- --sbb-text-font-size: var(--sbb-font-size-text-xs);
2554
+ --sbb-text-font-size: var(--sbb-text-font-size-xs);
2563
2555
  font-family: var(--sbb-typo-font-family);
2564
2556
  font-weight: normal;
2565
- line-height: var(--sbb-typo-line-height-body-text);
2566
- letter-spacing: var(--sbb-typo-letter-spacing-body-text);
2557
+ line-height: var(--sbb-typo-line-height-text);
2558
+ letter-spacing: var(--sbb-typo-letter-spacing-text);
2567
2559
  font-size: var(--sbb-text-font-size);
2568
2560
  font-weight: bold;
2569
2561
  background-color: var(--sbb-table-background-color);
@@ -2578,11 +2570,11 @@ sbb-table-wrapper[negative] .sbb-table,
2578
2570
  }
2579
2571
 
2580
2572
  .sbb-table-data-cell {
2581
- --sbb-text-font-size: var(--sbb-font-size-text-s);
2573
+ --sbb-text-font-size: var(--sbb-text-font-size-s);
2582
2574
  font-family: var(--sbb-typo-font-family);
2583
2575
  font-weight: normal;
2584
- line-height: var(--sbb-typo-line-height-body-text);
2585
- letter-spacing: var(--sbb-typo-letter-spacing-body-text);
2576
+ line-height: var(--sbb-typo-line-height-text);
2577
+ letter-spacing: var(--sbb-typo-letter-spacing-text);
2586
2578
  font-size: var(--sbb-text-font-size);
2587
2579
  background-color: var(--sbb-table-background-color);
2588
2580
  border-block-end: var(--sbb-table-border);
@@ -2592,11 +2584,11 @@ sbb-table-wrapper[negative] .sbb-table,
2592
2584
  }
2593
2585
 
2594
2586
  .sbb-table-caption {
2595
- --sbb-text-font-size: var(--sbb-font-size-text-xs);
2587
+ --sbb-text-font-size: var(--sbb-text-font-size-xs);
2596
2588
  font-family: var(--sbb-typo-font-family);
2597
2589
  font-weight: normal;
2598
- line-height: var(--sbb-typo-line-height-body-text);
2599
- letter-spacing: var(--sbb-typo-letter-spacing-body-text);
2590
+ line-height: var(--sbb-typo-line-height-text);
2591
+ letter-spacing: var(--sbb-typo-letter-spacing-text);
2600
2592
  font-size: var(--sbb-text-font-size);
2601
2593
  --sbb-table-caption-color-fallback: var(--sbb-color-granite);
2602
2594
  --sbb-table-caption-color-fallback: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
@@ -2654,11 +2646,11 @@ html.sbb-lean .sbb-table:not(.sbb-table-xs, .sbb-table-m) {
2654
2646
  --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-2x);
2655
2647
  }
2656
2648
  html.sbb-lean .sbb-table:not(.sbb-table-xs, .sbb-table-m) tbody > tr > td {
2657
- --sbb-text-font-size: var(--sbb-font-size-text-xs);
2649
+ --sbb-text-font-size: var(--sbb-text-font-size-xs);
2658
2650
  font-family: var(--sbb-typo-font-family);
2659
2651
  font-weight: normal;
2660
- line-height: var(--sbb-typo-line-height-body-text);
2661
- letter-spacing: var(--sbb-typo-letter-spacing-body-text);
2652
+ line-height: var(--sbb-typo-line-height-text);
2653
+ letter-spacing: var(--sbb-typo-letter-spacing-text);
2662
2654
  font-size: var(--sbb-text-font-size);
2663
2655
  }
2664
2656
 
package/status/status.component.js CHANGED
@@ -1,15 +1,15 @@
1
- var y = (t) => {
1
+ var h = (t) => {
2
2
  throw TypeError(t);
3
3
  };
4
- var h = (t, s, e) => s.has(t) || y("Cannot " + e);
5
- var f = (t, s, e) => (h(t, s, "read from private field"), e ? e.call(t) : s.get(t)), _ = (t, s, e) => s.has(t) ? y("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(t) : s.set(t, e), n = (t, s, e, r) => (h(t, s, "write to private field"), r ? r.call(t, e) : s.set(t, e), e);
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), n = (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 b } from "tslib";
7
7
  import { css as v, LitElement as x, html as S } from "lit";
8
8
  import { customElement as z, property as k } from "lit/decorators.js";
9
9
  import { SbbElementInternalsMixin as I } from "../core/mixins.js";
10
10
  import { boxSizingStyles as E } from "../core/styles.js";
11
11
  import { SbbIconNameMixin as w } from "../icon.js";
12
- const N = v`: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}`;
12
+ const N = v`: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-text-font-size-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-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-text-font-size-s)) * var(--_sbb-status-title-line-height, var(--sbb-typo-line-height-text)) - var(--sbb-size-icon-ui-small)) / 2)}.sbb-status__content-slot{display:inline;margin:0;padding:0}::slotted(sbb-title){margin-block:0}`;
13
13
  let P = (() => {
14
14
  var i, l;
15
15
  let t = [z("sbb-status")], s, e = [], r, p = w(I(x)), u, m = [], d = [];