@sbb-esta/lyne-elements 1.8.0 → 1.10.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 (312) hide show
  1. package/accordion/accordion.d.ts +5 -5
  2. package/accordion/accordion.d.ts.map +1 -1
  3. package/accordion.js +17 -17
  4. package/action-group/action-group.d.ts +1 -1
  5. package/action-group/action-group.d.ts.map +1 -1
  6. package/action-group.js +3 -3
  7. package/alert/alert/alert.d.ts +1 -1
  8. package/alert/alert/alert.d.ts.map +1 -1
  9. package/alert/alert.js +3 -3
  10. package/autocomplete/autocomplete-base-element.d.ts +1 -1
  11. package/autocomplete/autocomplete-base-element.d.ts.map +1 -1
  12. package/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.d.ts +1 -1
  13. package/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.d.ts.map +1 -1
  14. package/autocomplete-grid/autocomplete-grid-option.js +1 -1
  15. package/autocomplete-grid/autocomplete-grid.js +18 -18
  16. package/autocomplete.js +9 -9
  17. package/button/button.js +9 -9
  18. package/button/common.js +5 -5
  19. package/button/mini-button/mini-button.d.ts.map +1 -1
  20. package/button/mini-button.js +17 -15
  21. package/button/secondary-button.js +6 -6
  22. package/button/tertiary-button.js +13 -13
  23. package/button/transparent-button.js +8 -8
  24. package/calendar/calendar.d.ts +2 -2
  25. package/calendar/calendar.d.ts.map +1 -1
  26. package/calendar.js +5 -4
  27. package/clock/clock.d.ts +2 -2
  28. package/clock/clock.d.ts.map +1 -1
  29. package/clock.js +5 -5
  30. package/container/container.js +14 -14
  31. package/core/a11y/focus-visible-within-controller.d.ts +1 -1
  32. package/core/a11y/focus-visible-within-controller.d.ts.map +1 -1
  33. package/core/a11y/input-modality-detector.d.ts +2 -2
  34. package/core/a11y/input-modality-detector.d.ts.map +1 -1
  35. package/core/a11y.js +3 -3
  36. package/core/base-elements/action-base-element.d.ts +1 -0
  37. package/core/base-elements/action-base-element.d.ts.map +1 -1
  38. package/core/base-elements/button-base-element.d.ts +1 -1
  39. package/core/base-elements/button-base-element.d.ts.map +1 -1
  40. package/core/base-elements/link-base-element.d.ts.map +1 -1
  41. package/core/base-elements.js +47 -45
  42. package/core/controllers/slot-state-controller.d.ts +1 -1
  43. package/core/controllers/slot-state-controller.d.ts.map +1 -1
  44. package/core/dom/platform.d.ts +2 -3
  45. package/core/dom/platform.d.ts.map +1 -1
  46. package/core/dom.js +38 -40
  47. package/core/mixins/disabled-mixin.d.ts +8 -0
  48. package/core/mixins/disabled-mixin.d.ts.map +1 -1
  49. package/core/mixins.js +97 -89
  50. package/core/styles/core.scss +6 -0
  51. package/core/styles/mixins/lists.scss +11 -1
  52. package/core/styles/mixins/panel.scss +0 -2
  53. package/core/styles/mixins/table.scss +11 -0
  54. package/core/styles/mixins/typo.scss +0 -30
  55. package/core/styles/node_modules_@sbb-esta_lyne-design-tokens_dist_scss_sbb-variables.scss +1 -0
  56. package/core/styles/node_modules_@sbb-esta_lyne-design-tokens_dist_scss_sbb-variables_css--mixin.scss +2 -1
  57. package/core/styles/table.scss +6 -1
  58. package/core/testing/wait-for-image-ready.d.ts.map +1 -1
  59. package/core/testing.js +61 -54
  60. package/core.css +7 -14
  61. package/custom-elements.json +493 -299
  62. package/datepicker/datepicker/datepicker.d.ts.map +1 -1
  63. package/datepicker/datepicker-toggle/datepicker-toggle.d.ts +2 -0
  64. package/datepicker/datepicker-toggle/datepicker-toggle.d.ts.map +1 -1
  65. package/datepicker/datepicker-toggle.js +57 -47
  66. package/datepicker/datepicker.js +1 -0
  67. package/development/accordion/accordion.d.ts +5 -5
  68. package/development/accordion/accordion.d.ts.map +1 -1
  69. package/development/accordion.js +25 -38
  70. package/development/action-group/action-group.d.ts +1 -1
  71. package/development/action-group/action-group.d.ts.map +1 -1
  72. package/development/action-group.js +8 -21
  73. package/development/alert/alert/alert.d.ts +1 -1
  74. package/development/alert/alert/alert.d.ts.map +1 -1
  75. package/development/alert/alert-group.js +2 -15
  76. package/development/alert/alert.js +6 -19
  77. package/development/autocomplete/autocomplete-base-element.d.ts +1 -1
  78. package/development/autocomplete/autocomplete-base-element.d.ts.map +1 -1
  79. package/development/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.d.ts +1 -1
  80. package/development/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.d.ts.map +1 -1
  81. package/development/autocomplete-grid/autocomplete-grid-button.js +2 -15
  82. package/development/autocomplete-grid/autocomplete-grid-cell.js +2 -15
  83. package/development/autocomplete-grid/autocomplete-grid-option.js +4 -17
  84. package/development/autocomplete-grid/autocomplete-grid-row.js +2 -15
  85. package/development/autocomplete-grid/autocomplete-grid.js +6 -6
  86. package/development/autocomplete.js +7 -20
  87. package/development/breadcrumb/breadcrumb-group.js +2 -15
  88. package/development/breadcrumb/breadcrumb.js +2 -15
  89. package/development/button/button.js +3 -3
  90. package/development/button/common.js +2 -17
  91. package/development/button/mini-button/mini-button.d.ts.map +1 -1
  92. package/development/button/mini-button-group.js +2 -15
  93. package/development/button/mini-button.js +6 -17
  94. package/development/button/secondary-button.js +3 -3
  95. package/development/button/tertiary-button.js +3 -3
  96. package/development/button/transparent-button.js +3 -3
  97. package/development/calendar/calendar.d.ts +2 -2
  98. package/development/calendar/calendar.d.ts.map +1 -1
  99. package/development/calendar.js +7 -19
  100. package/development/card/card-badge.js +2 -15
  101. package/development/card/card.js +2 -15
  102. package/development/card/common.js +2 -15
  103. package/development/checkbox/checkbox-group.js +2 -15
  104. package/development/checkbox/checkbox.js +2 -15
  105. package/development/checkbox/common.js +1 -14
  106. package/development/chip.js +2 -15
  107. package/development/clock/clock.d.ts +2 -2
  108. package/development/clock/clock.d.ts.map +1 -1
  109. package/development/clock.js +3 -16
  110. package/development/container/container.js +2 -15
  111. package/development/container/sticky-bar.js +2 -15
  112. package/development/core/a11y/focus-visible-within-controller.d.ts +1 -1
  113. package/development/core/a11y/focus-visible-within-controller.d.ts.map +1 -1
  114. package/development/core/a11y/input-modality-detector.d.ts +2 -2
  115. package/development/core/a11y/input-modality-detector.d.ts.map +1 -1
  116. package/development/core/a11y.js +6 -6
  117. package/development/core/base-elements/action-base-element.d.ts +1 -0
  118. package/development/core/base-elements/action-base-element.d.ts.map +1 -1
  119. package/development/core/base-elements/button-base-element.d.ts +1 -1
  120. package/development/core/base-elements/button-base-element.d.ts.map +1 -1
  121. package/development/core/base-elements/link-base-element.d.ts.map +1 -1
  122. package/development/core/base-elements.js +11 -2
  123. package/development/core/controllers/slot-state-controller.d.ts +1 -1
  124. package/development/core/controllers/slot-state-controller.d.ts.map +1 -1
  125. package/development/core/controllers.js +1 -1
  126. package/development/core/dom/platform.d.ts +2 -3
  127. package/development/core/dom/platform.d.ts.map +1 -1
  128. package/development/core/dom.js +4 -5
  129. package/development/core/mixins/disabled-mixin.d.ts +8 -0
  130. package/development/core/mixins/disabled-mixin.d.ts.map +1 -1
  131. package/development/core/mixins.js +24 -15
  132. package/development/core/testing/wait-for-image-ready.d.ts.map +1 -1
  133. package/development/core/testing.js +16 -2
  134. package/development/datepicker/datepicker/datepicker.d.ts.map +1 -1
  135. package/development/datepicker/datepicker-next-day.js +2 -15
  136. package/development/datepicker/datepicker-previous-day.js +2 -15
  137. package/development/datepicker/datepicker-toggle/datepicker-toggle.d.ts +2 -0
  138. package/development/datepicker/datepicker-toggle/datepicker-toggle.d.ts.map +1 -1
  139. package/development/datepicker/datepicker-toggle.js +22 -24
  140. package/development/datepicker/datepicker.js +3 -15
  141. package/development/dialog/dialog-actions.js +2 -15
  142. package/development/dialog/dialog-content.js +2 -15
  143. package/development/dialog/dialog-title.js +2 -15
  144. package/development/dialog/dialog.js +3 -16
  145. package/development/divider.js +2 -15
  146. package/development/expansion-panel/expansion-panel-content.js +2 -15
  147. package/development/expansion-panel/expansion-panel-header.js +5 -17
  148. package/development/expansion-panel/expansion-panel.js +2 -15
  149. package/development/file-selector/file-selector.d.ts +4 -4
  150. package/development/file-selector/file-selector.d.ts.map +1 -1
  151. package/development/file-selector.js +2 -17
  152. package/development/flip-card/flip-card-details.js +2 -15
  153. package/development/flip-card/flip-card-summary.js +2 -15
  154. package/development/flip-card/flip-card.js +2 -15
  155. package/development/footer.js +2 -15
  156. package/development/form-error.js +2 -15
  157. package/development/form-field/form-field-clear.js +2 -15
  158. package/development/form-field/form-field.js +1 -14
  159. package/development/header/common.js +2 -15
  160. package/development/header/header.js +2 -15
  161. package/development/icon/icon.d.ts +6 -0
  162. package/development/icon/icon.d.ts.map +1 -1
  163. package/development/icon.js +10 -15
  164. package/development/image.js +4 -17
  165. package/development/journey-header.js +2 -15
  166. package/development/lead-container.js +2 -15
  167. package/development/link/block-link-button.js +3 -3
  168. package/development/link/common.js +4 -43
  169. package/development/link/link-button.js +3 -3
  170. package/development/link-list/common.js +2 -15
  171. package/development/link-list/link-list-anchor.js +2 -15
  172. package/development/link-list/link-list.js +2 -15
  173. package/development/loading-indicator.js +2 -15
  174. package/development/logo.js +2 -15
  175. package/development/map-container.js +2 -15
  176. package/development/menu/common.js +2 -15
  177. package/development/menu/menu/menu.d.ts.map +1 -1
  178. package/development/menu/menu-button.js +3 -3
  179. package/development/menu/menu.js +3 -18
  180. package/development/message.js +2 -15
  181. package/development/navigation/common.js +2 -17
  182. package/development/navigation/navigation-list.js +2 -15
  183. package/development/navigation/navigation-marker.js +2 -17
  184. package/development/navigation/navigation-section.js +2 -19
  185. package/development/navigation/navigation.js +2 -15
  186. package/development/notification.js +2 -15
  187. package/development/option/optgroup/optgroup-base-element.d.ts +2 -2
  188. package/development/option/optgroup/optgroup-base-element.d.ts.map +1 -1
  189. package/development/option/optgroup.js +2 -15
  190. package/development/option/option/option-base-element.d.ts +14 -4
  191. package/development/option/option/option-base-element.d.ts.map +1 -1
  192. package/development/option/option.js +15 -21
  193. package/development/overlay/overlay-base-element.d.ts +1 -1
  194. package/development/overlay/overlay-base-element.d.ts.map +1 -1
  195. package/development/overlay.js +3 -23
  196. package/development/popover/popover-trigger.js +4 -17
  197. package/development/popover/popover.js +2 -15
  198. package/development/radio-button/common.js +2 -15
  199. package/development/radio-button/radio-button-group/radio-button-group.d.ts +1 -1
  200. package/development/radio-button/radio-button-group/radio-button-group.d.ts.map +1 -1
  201. package/development/radio-button/radio-button-group.js +9 -22
  202. package/development/radio-button/radio-button.js +2 -15
  203. package/development/screen-reader-only.js +2 -15
  204. package/development/select/select.d.ts +3 -1
  205. package/development/select/select.d.ts.map +1 -1
  206. package/development/select.js +49 -48
  207. package/development/selection-expansion-panel/selection-expansion-panel.d.ts +12 -3
  208. package/development/selection-expansion-panel/selection-expansion-panel.d.ts.map +1 -1
  209. package/development/selection-expansion-panel.js +38 -18
  210. package/development/signet.js +2 -15
  211. package/development/skiplink-list.js +2 -15
  212. package/development/slider/slider.d.ts.map +1 -1
  213. package/development/slider.js +10 -16
  214. package/development/status.js +2 -15
  215. package/development/stepper/step-label/step-label.d.ts +6 -6
  216. package/development/stepper/step-label/step-label.d.ts.map +1 -1
  217. package/development/stepper/step-label.js +50 -45
  218. package/development/stepper/step.js +2 -15
  219. package/development/stepper/stepper/stepper.d.ts +6 -3
  220. package/development/stepper/stepper/stepper.d.ts.map +1 -1
  221. package/development/stepper/stepper.js +17 -15
  222. package/development/table/table-wrapper.js +2 -15
  223. package/development/tabs/tab-group/tab-group.d.ts +4 -4
  224. package/development/tabs/tab-group/tab-group.d.ts.map +1 -1
  225. package/development/tabs/tab-group.js +22 -35
  226. package/development/tabs/tab-label.js +2 -19
  227. package/development/tabs/tab.js +1 -14
  228. package/development/tag/tag-group.js +2 -15
  229. package/development/tag/tag.js +4 -17
  230. package/development/teaser-hero.js +3 -23
  231. package/development/teaser-product/common.js +2 -15
  232. package/development/teaser-product/teaser-product.js +3 -16
  233. package/development/teaser.js +2 -15
  234. package/development/time-input.js +2 -15
  235. package/development/timetable-occupancy-icon.js +2 -15
  236. package/development/timetable-occupancy.js +2 -15
  237. package/development/title.js +3 -41
  238. package/development/toast.js +2 -17
  239. package/development/toggle/toggle/toggle.d.ts +2 -2
  240. package/development/toggle/toggle/toggle.d.ts.map +1 -1
  241. package/development/toggle/toggle-option/toggle-option.d.ts.map +1 -1
  242. package/development/toggle/toggle-option.js +3 -15
  243. package/development/toggle/toggle.js +23 -36
  244. package/development/toggle-check.js +1 -14
  245. package/development/train/train-blocked-passage.js +2 -15
  246. package/development/train/train-formation.js +2 -15
  247. package/development/train/train-wagon.js +2 -17
  248. package/development/train/train.js +2 -15
  249. package/development/visual-checkbox.js +2 -15
  250. package/dialog/dialog.js +1 -1
  251. package/expansion-panel/expansion-panel-header.js +5 -5
  252. package/file-selector/file-selector.d.ts +4 -4
  253. package/file-selector/file-selector.d.ts.map +1 -1
  254. package/file-selector.js +1 -1
  255. package/icon/icon.d.ts +6 -0
  256. package/icon/icon.d.ts.map +1 -1
  257. package/icon.js +27 -19
  258. package/image.js +2 -2
  259. package/link/block-link-button.js +10 -10
  260. package/link/link-button.js +4 -4
  261. package/lists.css +9 -14
  262. package/menu/menu/menu.d.ts.map +1 -1
  263. package/menu/menu-button.js +13 -13
  264. package/menu/menu.js +7 -9
  265. package/navigation/common.js +1 -1
  266. package/navigation/navigation-marker.js +1 -1
  267. package/navigation/navigation-section.js +1 -1
  268. package/option/optgroup/optgroup-base-element.d.ts +2 -2
  269. package/option/optgroup/optgroup-base-element.d.ts.map +1 -1
  270. package/option/option/option-base-element.d.ts +14 -4
  271. package/option/option/option-base-element.d.ts.map +1 -1
  272. package/option/option.js +32 -25
  273. package/overlay/overlay-base-element.d.ts +1 -1
  274. package/overlay/overlay-base-element.d.ts.map +1 -1
  275. package/overlay.js +1 -1
  276. package/package.json +1 -1
  277. package/popover/popover-trigger.js +1 -1
  278. package/radio-button/radio-button-group/radio-button-group.d.ts +1 -1
  279. package/radio-button/radio-button-group/radio-button-group.d.ts.map +1 -1
  280. package/radio-button/radio-button-group.js +5 -5
  281. package/select/select.d.ts +3 -1
  282. package/select/select.d.ts.map +1 -1
  283. package/select.js +83 -72
  284. package/selection-expansion-panel/selection-expansion-panel.d.ts +12 -3
  285. package/selection-expansion-panel/selection-expansion-panel.d.ts.map +1 -1
  286. package/selection-expansion-panel.js +70 -49
  287. package/slider/slider.d.ts.map +1 -1
  288. package/slider.js +2 -2
  289. package/standard-theme.css +49 -24
  290. package/stepper/step-label/step-label.d.ts +6 -6
  291. package/stepper/step-label/step-label.d.ts.map +1 -1
  292. package/stepper/step-label.js +30 -30
  293. package/stepper/stepper/stepper.d.ts +6 -3
  294. package/stepper/stepper/stepper.d.ts.map +1 -1
  295. package/stepper/stepper.js +34 -25
  296. package/tabs/tab-group/tab-group.d.ts +4 -4
  297. package/tabs/tab-group/tab-group.d.ts.map +1 -1
  298. package/tabs/tab-group.js +15 -15
  299. package/tabs/tab-label.js +12 -12
  300. package/tag/tag.js +19 -19
  301. package/teaser-hero.js +13 -13
  302. package/teaser-product/teaser-product.js +5 -5
  303. package/teaser.js +15 -15
  304. package/title.js +23 -23
  305. package/toast.js +4 -4
  306. package/toggle/toggle/toggle.d.ts +2 -2
  307. package/toggle/toggle/toggle.d.ts.map +1 -1
  308. package/toggle/toggle-option/toggle-option.d.ts.map +1 -1
  309. package/toggle/toggle-option.js +1 -0
  310. package/toggle/toggle.js +10 -10
  311. package/train/train-wagon.js +7 -7
  312. package/typography.css +0 -13
package/tabs/tab-label.js CHANGED
@@ -1,22 +1,22 @@
1
- import { css as v, LitElement as f } from "lit";
2
- import { property as r, customElement as d } from "lit/decorators.js";
3
- import { html as m, unsafeStatic as c } from "lit/static-html.js";
4
- import { slotState as p } from "../core/decorators.js";
1
+ import { css as v, LitElement as d } from "lit";
2
+ import { property as r, customElement as f } from "lit/decorators.js";
3
+ import { html as p, unsafeStatic as c } from "lit/static-html.js";
4
+ import { slotState as m } from "../core/decorators.js";
5
5
  import { SbbDisabledMixin as h } from "../core/mixins.js";
6
6
  import { SbbIconNameMixin as u } from "../icon.js";
7
- const g = v`*,:before,:after{box-sizing:border-box}:host{--sbb-tab-label-height: var(--sbb-size-element-m);--sbb-tab-label-color: var(--sbb-color-granite);--sbb-tab-label-icon-color: var(--sbb-color-black);--sbb-tab-label-background-color: var(--sbb-color-white);--sbb-tab-label-cursor: pointer;--sbb-tab-label-pointer-events: unset;--sbb-tab-label-inset: 0;--sbb-tab-label-inline-padding: var(--sbb-spacing-responsive-xs);--sbb-tab-label-marker-transform: scale(0);--sbb-tab-label-text-decoration: none;--sbb-tab-label-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x) );--sbb-tab-label-animation-easing: var(--sbb-animation-easing);--sbb-tab-label-amount-color: var(--sbb-color-metal);display:inline-block;max-width:100%;pointer-events:var(--sbb-tab-label-pointer-events);-webkit-tap-highlight-color:transparent;outline:none!important}@media (forced-colors: active){:host{--sbb-tab-label-color: ButtonText;--sbb-tab-label-icon-color: ButtonText;--sbb-tab-label-amount-color: ButtonText}}:host([data-size=s]){--sbb-tab-label-height: var(--sbb-size-element-xs);--sbb-tab-label-inline-padding: var(--sbb-spacing-responsive-xxxs)}:host([disabled]){--sbb-tab-label-icon-color: var(--sbb-color-granite);--sbb-tab-label-background-color: var(--sbb-color-milk);--sbb-tab-label-cursor: unset;--sbb-tab-label-pointer-events: none;--sbb-tab-label-text-decoration: line-through}@media (forced-colors: active){:host([disabled]){--sbb-tab-label-color: GrayText;--sbb-tab-label-icon-color: GrayText;--sbb-tab-label-amount-color: GrayText}}:host([active]:not([disabled])){--sbb-tab-label-color: var(--sbb-color-charcoal);--sbb-tab-label-icon-color: var(--sbb-tab-label-color);--sbb-tab-label-background-color: var(--sbb-color-black);--sbb-tab-label-cursor: unset;--sbb-tab-label-pointer-events: none;--sbb-tab-label-marker-transform: scale(1)}@media (forced-colors: active){:host([active]:not([disabled])){--sbb-tab-label-color: ButtonText;--sbb-tab-label-icon-color: ButtonText;--sbb-tab-label-amount-color: ButtonText}}@media (any-hover: hover){:host(:hover:not([disabled])){--sbb-tab-label-marker-transform: scale(1)}}:host(:is([data-active],:active)){--sbb-tab-label-color: var(--sbb-color-charcoal)}.sbb-tab-label__wrapper{position:relative}:host(:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-tab-label__wrapper:before{content:"";position:absolute;display:block;inset:calc((var(--sbb-focus-outline-width) + var(--sbb-focus-outline-offset)) * -1);border:var(--sbb-focus-outline-width) solid var(--sbb-focus-outline-color);border-radius:var(--sbb-border-radius-2x);z-index:1}.sbb-tab-label{position:relative;margin:0;min-height:var(--sbb-tab-label-height);display:flex;align-items:center;padding-inline:var(--sbb-tab-label-inline-padding);gap:var(--sbb-spacing-fixed-2x);-webkit-user-select:none;user-select:none;cursor:var(--sbb-tab-label-cursor);transition:color var(--sbb-tab-label-animation-duration) var(--sbb-tab-label-animation-easing);color:var(--sbb-tab-label-icon-color)}:host([data-has-divider]) .sbb-tab-label:after{content:"";position:absolute;inset-inline-start:0;inset-block-end:0;width:var(--sbb-tab-group-width);height:var(--sbb-border-width-1x);background-color:var(--sbb-color-cloud)}.sbb-tab-label:before{position:absolute;content:"";inset-inline:0;inset-block-end:0;height:.1875rem;background-color:var(--sbb-tab-label-color);transform:var(--sbb-tab-label-marker-transform);transition-duration:var(--sbb-tab-label-animation-duration);transition-timing-function:var(--sbb-tab-label-animation-easing);transition-property:transform,background-color;z-index:1}.sbb-tab-label__icon,.sbb-tab-label__text,.sbb-tab-label__amount{text-decoration:var(--sbb-tab-label-text-decoration)}.sbb-tab-label__icon{display:flex;flex-shrink:0;color:var(--sbb-tab-label-color);transition:color var(--sbb-tab-label-animation-duration) var(--sbb-tab-label-animation-easing)}:host(:not([data-slot-names~=icon],[icon-name])) .sbb-tab-label__icon{display:none}.sbb-tab-label__text{color:var(--sbb-tab-label-color);transition:color var(--sbb-tab-label-animation-duration) var(--sbb-tab-label-animation-easing);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;--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}:host([data-size=s]) .sbb-tab-label__text{--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);font-weight:700}:host([data-size=xl]) .sbb-tab-label__text{--sbb-text-font-size: var(--sbb-font-size-text-xl);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-tab-label__amount{display:flex;color:var(--sbb-tab-label-amount-color);transition:color var(--sbb-tab-label-animation-duration) var(--sbb-tab-label-animation-easing);--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);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:host(:not([data-slot-names~=amount],[amount])) .sbb-tab-label__amount{display:none}:host([data-size=s]) .sbb-tab-label__amount{--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)}:host([data-size=xl]) .sbb-tab-label__amount{--sbb-text-font-size: var(--sbb-font-size-text-xl);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)}`;
8
- var x = Object.defineProperty, y = Object.getOwnPropertyDescriptor, s = (a, e, l, o) => {
7
+ const x = v`*,:before,:after{box-sizing:border-box}:host{--sbb-tab-label-height: var(--sbb-size-element-m);--sbb-tab-label-color: var(--sbb-color-granite);--sbb-tab-label-icon-color: var(--sbb-color-black);--sbb-tab-label-background-color: var(--sbb-color-white);--sbb-tab-label-cursor: pointer;--sbb-tab-label-pointer-events: unset;--sbb-tab-label-inset: 0;--sbb-tab-label-inline-padding: var(--sbb-spacing-responsive-xs);--sbb-tab-label-marker-transform: scale(0);--sbb-tab-label-text-decoration: none;--sbb-tab-label-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x) );--sbb-tab-label-animation-easing: var(--sbb-animation-easing);--sbb-tab-label-amount-color: var(--sbb-color-metal);display:inline-block;max-width:100%;pointer-events:var(--sbb-tab-label-pointer-events);-webkit-tap-highlight-color:transparent;outline:none!important}@media (forced-colors: active){:host{--sbb-tab-label-color: ButtonText;--sbb-tab-label-icon-color: ButtonText;--sbb-tab-label-amount-color: ButtonText}}:host([data-size=s]){--sbb-tab-label-height: var(--sbb-size-element-xs);--sbb-tab-label-inline-padding: var(--sbb-spacing-responsive-xxxs)}:host([disabled]){--sbb-tab-label-icon-color: var(--sbb-color-granite);--sbb-tab-label-background-color: var(--sbb-color-milk);--sbb-tab-label-cursor: unset;--sbb-tab-label-pointer-events: none;--sbb-tab-label-text-decoration: line-through}@media (forced-colors: active){:host([disabled]){--sbb-tab-label-color: GrayText;--sbb-tab-label-icon-color: GrayText;--sbb-tab-label-amount-color: GrayText}}:host([active]:not([disabled])){--sbb-tab-label-color: var(--sbb-color-charcoal);--sbb-tab-label-icon-color: var(--sbb-tab-label-color);--sbb-tab-label-background-color: var(--sbb-color-black);--sbb-tab-label-cursor: unset;--sbb-tab-label-pointer-events: none;--sbb-tab-label-marker-transform: scale(1)}@media (forced-colors: active){:host([active]:not([disabled])){--sbb-tab-label-color: ButtonText;--sbb-tab-label-icon-color: ButtonText;--sbb-tab-label-amount-color: ButtonText}}@media (any-hover: hover){:host(:hover:not([disabled])){--sbb-tab-label-marker-transform: scale(1)}}:host(:is([data-active],:active)){--sbb-tab-label-color: var(--sbb-color-charcoal)}.sbb-tab-label__wrapper{position:relative}:host(:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-tab-label__wrapper:before{content:"";position:absolute;display:block;inset:calc((var(--sbb-focus-outline-width) + var(--sbb-focus-outline-offset)) * -1);border:var(--sbb-focus-outline-width) solid var(--sbb-focus-outline-color);border-radius:var(--sbb-border-radius-2x);z-index:1}.sbb-tab-label{position:relative;margin:0;min-height:var(--sbb-tab-label-height);display:flex;align-items:center;padding-inline:var(--sbb-tab-label-inline-padding);gap:var(--sbb-spacing-fixed-2x);-webkit-user-select:none;user-select:none;cursor:var(--sbb-tab-label-cursor);transition:color var(--sbb-tab-label-animation-duration) var(--sbb-tab-label-animation-easing);color:var(--sbb-tab-label-icon-color)}:host([data-has-divider]) .sbb-tab-label:after{content:"";position:absolute;inset-inline-start:0;inset-block-end:0;width:var(--sbb-tab-group-width);height:var(--sbb-border-width-1x);background-color:var(--sbb-color-cloud)}.sbb-tab-label:before{position:absolute;content:"";inset-inline:0;inset-block-end:0;height:.1875rem;background-color:var(--sbb-tab-label-color);transform:var(--sbb-tab-label-marker-transform);transition-duration:var(--sbb-tab-label-animation-duration);transition-timing-function:var(--sbb-tab-label-animation-easing);transition-property:transform,background-color;z-index:1}.sbb-tab-label__icon,.sbb-tab-label__text,.sbb-tab-label__amount{text-decoration:var(--sbb-tab-label-text-decoration)}.sbb-tab-label__icon{display:flex;flex-shrink:0;color:var(--sbb-tab-label-color);transition:color var(--sbb-tab-label-animation-duration) var(--sbb-tab-label-animation-easing)}:host(:not([data-slot-names~=icon],[icon-name])) .sbb-tab-label__icon{display:none}.sbb-tab-label__text{color:var(--sbb-tab-label-color);transition:color var(--sbb-tab-label-animation-duration) var(--sbb-tab-label-animation-easing);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;--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}:host([data-size=s]) .sbb-tab-label__text{--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);font-weight:700}:host([data-size=xl]) .sbb-tab-label__text{--sbb-text-font-size: var(--sbb-font-size-text-xl);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-tab-label__amount{display:flex;color:var(--sbb-tab-label-amount-color);transition:color var(--sbb-tab-label-animation-duration) var(--sbb-tab-label-animation-easing);--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)}:host(:not([data-slot-names~=amount],[amount])) .sbb-tab-label__amount{display:none}:host([data-size=s]) .sbb-tab-label__amount{--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)}:host([data-size=xl]) .sbb-tab-label__amount{--sbb-text-font-size: var(--sbb-font-size-text-xl);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)}`;
8
+ var g = Object.defineProperty, y = Object.getOwnPropertyDescriptor, s = (a, e, l, o) => {
9
9
  for (var t = o > 1 ? void 0 : o ? y(e, l) : e, n = a.length - 1, i; n >= 0; n--)
10
10
  (i = a[n]) && (t = (o ? i(e, l, t) : i(t)) || t);
11
- return o && t && x(e, l, t), t;
11
+ return o && t && g(e, l, t), t;
12
12
  };
13
- let b = class extends h(u(f)) {
13
+ let b = class extends h(u(d)) {
14
14
  constructor() {
15
15
  super(...arguments), this.level = "1";
16
16
  }
17
17
  render() {
18
18
  const a = `h${Number(this.level) < 7 ? this.level : "1"}`;
19
- return m`
19
+ return p`
20
20
  <div class="sbb-tab-label__wrapper">
21
21
  <${c(a)} class="sbb-tab-label">
22
22
  <span class="sbb-tab-label__icon">
@@ -33,7 +33,7 @@ let b = class extends h(u(f)) {
33
33
  `;
34
34
  }
35
35
  };
36
- b.styles = g;
36
+ b.styles = x;
37
37
  s([
38
38
  r()
39
39
  ], b.prototype, "level", 2);
@@ -44,8 +44,8 @@ s([
44
44
  r({ reflect: !0 })
45
45
  ], b.prototype, "amount", 2);
46
46
  b = s([
47
- d("sbb-tab-label"),
48
- p()
47
+ f("sbb-tab-label"),
48
+ m()
49
49
  ], b);
50
50
  export {
51
51
  b as SbbTabLabelElement
package/tag/tag.js CHANGED
@@ -4,24 +4,24 @@ import { SbbButtonBaseElement as v } from "../core/base-elements.js";
4
4
  import { SbbConnectedAbortController as u } from "../core/controllers.js";
5
5
  import { slotState as m } from "../core/decorators.js";
6
6
  import { EventEmitter as l } from "../core/eventing.js";
7
- import { SbbDisabledTabIndexActionMixin as p } from "../core/mixins.js";
7
+ import { SbbFocusableDisabledActionMixin as p } from "../core/mixins.js";
8
8
  import { SbbIconNameMixin as f } from "../icon.js";
9
9
  const x = d`*,:before,:after{box-sizing:border-box}:host{display:inline-block;outline:none!important;max-width:100%;--sbb-tag-border-radius: var(--sbb-border-radius-infinity);--sbb-tag-background-color: var(--sbb-color-white);--sbb-tag-border-color: var(--sbb-color-cloud);--sbb-tag-border-style: solid;--sbb-tag-border-width: var(--sbb-border-width-1x);--sbb-tag-text-color: var(--sbb-color-charcoal);--sbb-tag-amount-color: var(--sbb-color-metal);--sbb-tag-height: var(--sbb-size-element-xs);--sbb-tag-inset: 0;--sbb-tag-content-shift: translateY(0);--sbb-tag-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x) );--sbb-tag-animation-easing: var(--sbb-animation-easing);--sbb-tag-padding-inline: var(--sbb-spacing-fixed-5x);--sbb-tag-gap: var(--sbb-spacing-fixed-2x)}@media (forced-colors: active){:host{--sbb-tag-background-color: Canvas !important;--sbb-tag-text-color: ButtonText;--sbb-tag-amount-color: ButtonText;--sbb-tag-border-color: CanvasText;--sbb-tag-border-width: var(--sbb-border-width-2x)}}:host([checked]){--sbb-tag-border-color: var(--sbb-color-charcoal);--sbb-tag-border-width: var(--sbb-border-width-2x)}@media (forced-colors: active){:host([checked]){--sbb-tag-border-color: Highlight !important}}:host([disabled]){--sbb-tag-text-color: var(--sbb-color-granite);--sbb-tag-amount-color: var(--sbb-tag-text-color);--sbb-tag-background-color: var(--sbb-color-milk);--sbb-tag-border-color: var(--sbb-color-cement);--sbb-tag-border-style: dashed}@media (forced-colors: active){:host([disabled]){--sbb-tag-text-color: GrayText;--sbb-tag-amount-color: GrayText;--sbb-tag-border-color: GrayText}}:host([checked][disabled]){--sbb-tag-border-color: var(--sbb-color-metal)}@media (any-hover: hover){:host(:hover:not([disabled],:active,[data-active])){--sbb-tag-background-color: var(--sbb-color-milk);--sbb-tag-inset: calc(var(--sbb-border-width-2x) * -1);--sbb-tag-content-shift: translateY(calc(var(--sbb-border-width-1x) * -1))}}@media (any-hover: hover) and (forced-colors: active){:host(:hover:not([disabled],:active,[data-active])){--sbb-tag-border-color: Highlight}}:host(:is(:active,[data-active]):not([disabled])){--sbb-tag-background-color: var(--sbb-color-milk);--sbb-tag-border-color: var(--sbb-color-iron);--sbb-tag-border-width: var(--sbb-border-width-2x);--sbb-tag-text-color: var(--sbb-color-iron)}@media (forced-colors: active){:host(:is(:active,[data-active]):not([disabled])){--sbb-tag-border-color: Highlight;--sbb-tag-text-color: ButtonText}}:host([size=s]){--sbb-tag-height: var(--sbb-size-element-xxxs);--sbb-tag-padding-inline: var(--sbb-spacing-fixed-3x)}.sbb-tag{--sbb-text-font-size: var(--sbb-font-size-text-xs);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;position:relative;display:flex;align-items:center;height:var(--sbb-tag-height);max-width:100%;gap:var(--sbb-tag-gap);padding-inline:var(--sbb-tag-padding-inline);cursor:pointer;border-radius:var(--sbb-tag-border-radius);color:var(--sbb-tag-text-color);transition:color var(--sbb-tag-animation-duration) var(--sbb-tag-animation-easing);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.sbb-tag:before{content:"";position:absolute;inset:var(--sbb-tag-inset);background-color:var(--sbb-tag-background-color);border:var(--sbb-tag-border-width) var(--sbb-tag-border-style) var(--sbb-tag-border-color);border-radius:var(--sbb-tag-border-radius);transition-duration:var(--sbb-tag-animation-duration);transition-timing-function:var(--sbb-tag-animation-easing);transition-property:inset,background-color,border-color,box-shadow}:host(:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-tag:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}:host([disabled]) .sbb-tag{cursor:unset;pointer-events:none}.sbb-tag__icon{display:flex;align-items:center;height:calc(var(--sbb-typo-line-height-body-text) * 1em);flex-shrink:0}:host(:not([data-slot-names~=icon],[icon-name])) .sbb-tag__icon{display:none}.sbb-tag__text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sbb-tag__amount{--sbb-text-font-size: var(--sbb-font-size-text-xs);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);color:var(--sbb-tag-amount-color)}:host(:not([data-slot-names~=amount],[amount])) .sbb-tag__amount{display:none}.sbb-tag--shift{transition:transform var(--sbb-tag-animation-duration) var(--sbb-tag-animation-easing);transform:var(--sbb-tag-content-shift);will-change:transform}`;
10
- var y = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, r = (t, e, b, a) => {
11
- for (var s = a > 1 ? void 0 : a ? _(e, b) : e, i = t.length - 1, n; i >= 0; i--)
12
- (n = t[i]) && (s = (a ? n(e, b, s) : n(s)) || s);
13
- return a && s && y(e, b, s), s;
10
+ var y = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, r = (t, o, b, a) => {
11
+ for (var s = a > 1 ? void 0 : a ? _(o, b) : o, i = t.length - 1, n; i >= 0; i--)
12
+ (n = t[i]) && (s = (a ? n(o, b, s) : n(s)) || s);
13
+ return a && s && y(o, b, s), s;
14
14
  };
15
- let o = class extends f(
15
+ let e = class extends f(
16
16
  p(v)
17
17
  ) {
18
18
  constructor() {
19
- super(...arguments), this.checked = !1, this._size = "m", this._group = null, this._input = new l(this, o.events.input, {
19
+ super(...arguments), this.checked = !1, this._size = "m", this._group = null, this._input = new l(this, e.events.input, {
20
20
  bubbles: !0,
21
21
  composed: !0
22
- }), this._didChange = new l(this, o.events.didChange, {
22
+ }), this._didChange = new l(this, e.events.didChange, {
23
23
  bubbles: !0
24
- }), this._change = new l(this, o.events.change, {
24
+ }), this._change = new l(this, e.events.change, {
25
25
  bubbles: !0
26
26
  }), this._abort = new u(this);
27
27
  }
@@ -45,8 +45,8 @@ let o = class extends f(
45
45
  willUpdate(t) {
46
46
  var b;
47
47
  super.willUpdate(t), t.has("checked") && this.setAttribute("aria-pressed", `${this.checked}`);
48
- const e = (b = this.closest) == null ? void 0 : b.call(this, "sbb-tag-group");
49
- e && !e.multiple && t.has("checked") && this.checked && (e == null || e.tags.filter((a) => a !== this).forEach((a) => a.checked = !1));
48
+ const o = (b = this.closest) == null ? void 0 : b.call(this, "sbb-tag-group");
49
+ o && !o.multiple && t.has("checked") && this.checked && (o == null || o.tags.filter((a) => a !== this).forEach((a) => a.checked = !1));
50
50
  }
51
51
  renderTemplate() {
52
52
  return g`
@@ -60,25 +60,25 @@ let o = class extends f(
60
60
  `;
61
61
  }
62
62
  };
63
- o.styles = x;
64
- o.events = {
63
+ e.styles = x;
64
+ e.events = {
65
65
  input: "input",
66
66
  didChange: "didChange",
67
67
  change: "change"
68
68
  };
69
69
  r([
70
70
  c({ reflect: !0 })
71
- ], o.prototype, "amount", 2);
71
+ ], e.prototype, "amount", 2);
72
72
  r([
73
73
  c({ reflect: !0, type: Boolean })
74
- ], o.prototype, "checked", 2);
74
+ ], e.prototype, "checked", 2);
75
75
  r([
76
76
  c({ reflect: !0 })
77
- ], o.prototype, "size", 1);
78
- o = r([
77
+ ], e.prototype, "size", 1);
78
+ e = r([
79
79
  h("sbb-tag"),
80
80
  m()
81
- ], o);
81
+ ], e);
82
82
  export {
83
- o as SbbTagElement
83
+ e as SbbTagElement
84
84
  };
package/teaser-hero.js CHANGED
@@ -1,15 +1,15 @@
1
1
  import { css as c, nothing as l } from "lit";
2
- import { property as p, customElement as g } from "lit/decorators.js";
3
- import { html as h } from "lit/static-html.js";
2
+ import { property as h, customElement as g } from "lit/decorators.js";
3
+ import { html as p } from "lit/static-html.js";
4
4
  import { SbbLinkBaseElement as m } from "./core/base-elements.js";
5
5
  import { slotState as v } from "./core/decorators.js";
6
6
  import "./image.js";
7
7
  import "./link/block-link-static.js";
8
- const d = c`*,:before,:after{box-sizing:border-box}:host{display:block;outline:none!important;--sbb-teaser-hero-brightness-hover: 1.075;--sbb-teaser-hero-chip-inset: var(--sbb-spacing-responsive-xxxs) auto auto var(--sbb-spacing-responsive-xxxs);--sbb-panel-width: 13.9375rem;--sbb-panel-inner-height: 10.4375rem;--sbb-panel-triangle-height: 2.0625rem;--sbb-panel-height: calc(var(--sbb-panel-inner-height) + 2 * var(--sbb-panel-triangle-height));--sbb-panel-line-height: var(--sbb-typo-line-height-titles);--sbb-panel-font-size: var(--sbb-typo-scale-1-5x);--sbb-panel-color: var(--sbb-color-white);--sbb-panel-background-color: var(--sbb-color-red-alpha-90);--sbb-panel-background-color-hover: var(--sbb-color-red);--sbb-panel-padding-inline: var(--sbb-spacing-responsive-m);--sbb-panel-gap: var(--sbb-spacing-responsive-xs);--sbb-panel-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x) );--sbb-panel-animation-easing: var(--sbb-animation-easing)}@media (min-width: 52.5rem){:host{--sbb-panel-width: 20.0625rem;--sbb-panel-inner-height: 15.006875rem;--sbb-panel-triangle-height: 2.965625rem;--sbb-panel-font-size: var(--sbb-typo-scale-2x)}}@media (min-width: 64rem){:host{--sbb-panel-width: 26.75rem;--sbb-panel-inner-height: 20.02375rem;--sbb-panel-triangle-height: 3.956875rem;--sbb-panel-font-size: var(--sbb-typo-scale-2-5x);--sbb-panel-line-height: 1.2}}@media (any-hover: hover){:host(:hover){--sbb-panel-background-color: var(--sbb-panel-background-color-hover);--sbb-teaser-hero-brightness: var(--sbb-teaser-hero-brightness-hover)}}.sbb-teaser-hero{position:relative;display:block;min-height:var(--sbb-panel-height)}:host(:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-teaser-hero:focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}.sbb-teaser-hero__panel{z-index:1;position:relative;display:flex;flex-direction:column;justify-content:center;gap:var(--sbb-panel-gap);width:var(--sbb-panel-width);height:var(--sbb-panel-height);padding-block:var(--sbb-panel-triangle-height);padding-inline:var(--sbb-panel-padding-inline);clip-path:polygon(0 0,100% var(--sbb-panel-triangle-height),100% calc(100% - var(--sbb-panel-triangle-height)),0% 100%);background-color:var(--sbb-panel-background-color);transition:background var(--sbb-panel-animation-duration) var(--sbb-panel-animation-easing)}@media (any-hover: hover){.sbb-teaser-hero__panel:hover{--sbb-panel-background-color: var(--sbb-panel-background-color-hover)}}.sbb-teaser-hero__panel{position:absolute;top:50%;transform:translateY(-50%)}:host(:not([data-slot-names~=unnamed],[data-slot-names~=link-content],[link-content])) .sbb-teaser-hero__panel{display:none}.sbb-teaser-hero__panel-text{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:var(--sbb-typo-font-family);font-size:var(--sbb-panel-font-size);font-weight:300;line-height:var(--sbb-panel-line-height);letter-spacing:var(--sbb-typo-letter-spacing-titles);color:var(--sbb-panel-color);-webkit-hyphens:auto;hyphens:auto;display:inline;margin:0;padding:0}.sbb-teaser-hero__panel-link{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}::slotted([slot=image]),sbb-image{will-change:filter;filter:brightness(var(--sbb-teaser-hero-brightness, 1));transition:filter var(--sbb-panel-animation-duration) var(--sbb-panel-animation-easing)}::slotted([slot=chip]){position:absolute;inset:var(--sbb-teaser-hero-chip-inset);z-index:2}`;
9
- var u = Object.defineProperty, f = Object.getOwnPropertyDescriptor, i = (t, n, o, s) => {
10
- for (var e = s > 1 ? void 0 : s ? f(n, o) : n, r = t.length - 1, b; r >= 0; r--)
11
- (b = t[r]) && (e = (s ? b(n, o, e) : b(e)) || e);
12
- return s && e && u(n, o, e), e;
8
+ const d = c`*,:before,:after{box-sizing:border-box}:host{display:block;outline:none!important;--sbb-teaser-hero-brightness-hover: var(--sbb-hover-image-brightness);--sbb-teaser-hero-chip-inset: var(--sbb-spacing-responsive-xxxs) auto auto var(--sbb-spacing-responsive-xxxs);--sbb-panel-width: 13.9375rem;--sbb-panel-inner-height: 10.4375rem;--sbb-panel-triangle-height: 2.0625rem;--sbb-panel-height: calc(var(--sbb-panel-inner-height) + 2 * var(--sbb-panel-triangle-height));--sbb-panel-line-height: var(--sbb-typo-line-height-titles);--sbb-panel-font-size: var(--sbb-typo-scale-1-5x);--sbb-panel-color: var(--sbb-color-white);--sbb-panel-background-color: var(--sbb-color-red-alpha-90);--sbb-panel-background-color-hover: var(--sbb-color-red);--sbb-panel-padding-inline: var(--sbb-spacing-responsive-m);--sbb-panel-gap: var(--sbb-spacing-responsive-xs);--sbb-panel-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x) );--sbb-panel-animation-easing: var(--sbb-animation-easing)}@media (min-width: 52.5rem){:host{--sbb-panel-width: 20.0625rem;--sbb-panel-inner-height: 15.006875rem;--sbb-panel-triangle-height: 2.965625rem;--sbb-panel-font-size: var(--sbb-typo-scale-2x)}}@media (min-width: 64rem){:host{--sbb-panel-width: 26.75rem;--sbb-panel-inner-height: 20.02375rem;--sbb-panel-triangle-height: 3.956875rem;--sbb-panel-font-size: var(--sbb-typo-scale-2-5x);--sbb-panel-line-height: 1.2}}@media (any-hover: hover){:host(:hover){--sbb-panel-background-color: var(--sbb-panel-background-color-hover);--sbb-teaser-hero-brightness: var(--sbb-teaser-hero-brightness-hover)}}.sbb-teaser-hero{position:relative;display:block;min-height:var(--sbb-panel-height)}:host(:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-teaser-hero:focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}.sbb-teaser-hero__panel{z-index:1;position:relative;display:flex;flex-direction:column;justify-content:center;gap:var(--sbb-panel-gap);width:var(--sbb-panel-width);height:var(--sbb-panel-height);padding-block:var(--sbb-panel-triangle-height);padding-inline:var(--sbb-panel-padding-inline);clip-path:polygon(0 0,100% var(--sbb-panel-triangle-height),100% calc(100% - var(--sbb-panel-triangle-height)),0% 100%);background-color:var(--sbb-panel-background-color);transition:background var(--sbb-panel-animation-duration) var(--sbb-panel-animation-easing)}@media (any-hover: hover){.sbb-teaser-hero__panel:hover{--sbb-panel-background-color: var(--sbb-panel-background-color-hover)}}.sbb-teaser-hero__panel{position:absolute;top:50%;transform:translateY(-50%)}:host(:not([data-slot-names~=unnamed],[data-slot-names~=link-content],[link-content])) .sbb-teaser-hero__panel{display:none}.sbb-teaser-hero__panel-text{font-family:var(--sbb-typo-font-family);font-size:var(--sbb-panel-font-size);font-weight:300;line-height:var(--sbb-panel-line-height);letter-spacing:var(--sbb-typo-letter-spacing-titles);color:var(--sbb-panel-color);-webkit-hyphens:auto;hyphens:auto;display:inline;margin:0;padding:0}::slotted([slot=image]),sbb-image{will-change:filter;filter:brightness(var(--sbb-teaser-hero-brightness, 1));transition:filter var(--sbb-panel-animation-duration) var(--sbb-panel-animation-easing)}::slotted([slot=chip]){position:absolute;inset:var(--sbb-teaser-hero-chip-inset);z-index:2}`;
9
+ var u = Object.defineProperty, f = Object.getOwnPropertyDescriptor, i = (t, s, r, n) => {
10
+ for (var e = n > 1 ? void 0 : n ? f(s, r) : s, o = t.length - 1, b; o >= 0; o--)
11
+ (b = t[o]) && (e = (n ? b(s, r, e) : b(e)) || e);
12
+ return n && e && u(s, r, e), e;
13
13
  };
14
14
  let a = class extends m {
15
15
  _chipSlotChanged() {
@@ -17,13 +17,13 @@ let a = class extends m {
17
17
  (t = this.querySelector("sbb-chip")) == null || t.setAttribute("color", "charcoal");
18
18
  }
19
19
  renderTemplate() {
20
- return h`
20
+ return p`
21
21
  <slot name="chip" @slotchange=${() => this._chipSlotChanged()}></slot>
22
22
  <span class="sbb-teaser-hero__panel">
23
23
  <p class="sbb-teaser-hero__panel-text">
24
24
  <slot></slot>
25
25
  </p>
26
- ${this.href ? h`<sbb-block-link-static
26
+ ${this.href ? p`<sbb-block-link-static
27
27
  class="sbb-teaser-hero__panel-link"
28
28
  icon-name="chevron-small-right-small"
29
29
  icon-placement="end"
@@ -34,20 +34,20 @@ let a = class extends m {
34
34
  </sbb-block-link-static>` : l}
35
35
  </span>
36
36
  <slot name="image">
37
- ${this.imageSrc ? h`<sbb-image image-src=${this.imageSrc} alt=${this.imageAlt ?? l}></sbb-image>` : l}
37
+ ${this.imageSrc ? p`<sbb-image image-src=${this.imageSrc} alt=${this.imageAlt ?? l}></sbb-image>` : l}
38
38
  </slot>
39
39
  `;
40
40
  }
41
41
  };
42
42
  a.styles = d;
43
43
  i([
44
- p({ attribute: "link-content", reflect: !0 })
44
+ h({ attribute: "link-content", reflect: !0 })
45
45
  ], a.prototype, "linkContent", 2);
46
46
  i([
47
- p({ attribute: "image-src" })
47
+ h({ attribute: "image-src" })
48
48
  ], a.prototype, "imageSrc", 2);
49
49
  i([
50
- p({ attribute: "image-alt" })
50
+ h({ attribute: "image-alt" })
51
51
  ], a.prototype, "imageAlt", 2);
52
52
  a = i([
53
53
  g("sbb-teaser-hero"),
@@ -2,11 +2,11 @@ import { customElement as n } from "lit/decorators.js";
2
2
  import { SbbLinkBaseElement as u } from "../core/base-elements.js";
3
3
  import { SbbTeaserProductCommonElementMixin as d, teaserProductCommonStyle as c } from "./common.js";
4
4
  import { css as m } from "lit";
5
- const l = m`:host{--sbb-teaser-product-brightness-hover: 1.075;--sbb-teaser-product-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x) );--sbb-teaser-product-animation-easing: var(--sbb-animation-easing);--sbb-teaser-product-border-radius: var(--sbb-border-radius-4x)}@media (any-hover: hover){:host(:hover){--sbb-teaser-product-brightness: var(--sbb-teaser-product-brightness-hover)}}:host(:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-teaser-product:focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);border-radius:var(--sbb-teaser-product-border-radius)}@media (forced-colors: active){:host(:hover) .sbb-teaser-product:after{border-color:Highlight}}::slotted(:is(img,sbb-image)){will-change:filter;transition-property:filter;transition-duration:var(--sbb-teaser-product-animation-duration);transition-timing-function:var(--sbb-animation-easing);filter:brightness(var(--sbb-teaser-product-brightness, 1))}`;
6
- var v = Object.defineProperty, f = Object.getOwnPropertyDescriptor, p = (b, e, o, t) => {
7
- for (var r = t > 1 ? void 0 : t ? f(e, o) : e, s = b.length - 1, i; s >= 0; s--)
8
- (i = b[s]) && (r = (t ? i(e, o, r) : i(r)) || r);
9
- return t && r && v(e, o, r), r;
5
+ const l = m`:host{--sbb-teaser-product-brightness-hover: var(--sbb-hover-image-brightness);--sbb-teaser-product-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x) );--sbb-teaser-product-animation-easing: var(--sbb-animation-easing);--sbb-teaser-product-border-radius: var(--sbb-border-radius-4x)}@media (any-hover: hover){:host(:hover){--sbb-teaser-product-brightness: var(--sbb-teaser-product-brightness-hover)}}:host(:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-teaser-product:focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);border-radius:var(--sbb-teaser-product-border-radius)}@media (forced-colors: active){:host(:hover) .sbb-teaser-product:after{border-color:Highlight}}::slotted(:is(img,sbb-image)){will-change:filter;transition-property:filter;transition-duration:var(--sbb-teaser-product-animation-duration);transition-timing-function:var(--sbb-animation-easing);filter:brightness(var(--sbb-teaser-product-brightness, 1))}`;
6
+ var v = Object.defineProperty, f = Object.getOwnPropertyDescriptor, p = (b, e, s, t) => {
7
+ for (var r = t > 1 ? void 0 : t ? f(e, s) : e, o = b.length - 1, i; o >= 0; o--)
8
+ (i = b[o]) && (r = (t ? i(e, s, r) : i(r)) || r);
9
+ return t && r && v(e, s, r), r;
10
10
  };
11
11
  let a = class extends d(
12
12
  u
package/teaser.js CHANGED
@@ -5,13 +5,13 @@ import { slotState as h } from "./core/decorators.js";
5
5
  import { css as p } from "lit";
6
6
  import "./chip.js";
7
7
  import "./title.js";
8
- const f = p`@charset "UTF-8";*,:before,:after{box-sizing:border-box}:host{display:inline-block;outline:none!important;--sbb-teaser-scale-hover: 1.02;--sbb-teaser-description-color: var(--sbb-color-granite);--sbb-teaser-flex-direction: row;--sbb-teaser-align-items: center;--sbb-teaser-gap: var(--sbb-spacing-fixed-4x);--sbb-teaser-width: fit-content;--sbb-teaser-border-radius: var(--sbb-border-radius-4x);--sbb-teaser-brightness-hover: 1.075;--sbb-teaser-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x) )}:host([alignment=after]){--sbb-teaser-align-items: start}:host([alignment=below]){--sbb-teaser-flex-direction: column;--sbb-teaser-align-items: baseline;--sbb-teaser-gap: var(--sbb-spacing-fixed-3x);--sbb-teaser-width: 100%}.sbb-teaser{display:flex;text-decoration:none}.sbb-teaser:before{content:"​";-webkit-user-select:none;user-select:none;width:0;height:0}:host(:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-teaser:focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);border-radius:var(--sbb-teaser-border-radius)}@media (forced-colors: active){.sbb-teaser{outline-offset:var(--sbb-focus-outline-offset);outline:CanvasText solid var(--sbb-focus-outline-width);border-radius:var(--sbb-teaser-border-radius)}.sbb-teaser:hover{outline-color:Highlight}}.sbb-teaser__container{display:flex;flex-flow:var(--sbb-teaser-flex-direction) nowrap;align-items:var(--sbb-teaser-align-items);gap:var(--sbb-teaser-gap);max-width:100%}.sbb-teaser__text{overflow:hidden;max-width:100%}::slotted([slot=image]){will-change:transform;display:block;object-fit:cover;width:18.75rem;filter:brightness(var(--sbb-teaser-brightness, 1));transition:var(--sbb-teaser-animation-duration) var(--sbb-animation-easing);aspect-ratio:4/3}@media (any-hover: hover){.sbb-teaser:hover ::slotted([slot=image]){transform:scale(var(--sbb-teaser-scale-hover));--sbb-teaser-brightness: var(--sbb-teaser-brightness-hover)}}.sbb-teaser__image-wrapper{flex-shrink:0;overflow:hidden;border-radius:var(--sbb-teaser-border-radius);transition:var(--sbb-teaser-animation-duration) var(--sbb-animation-easing)}@media (any-hover: hover){.sbb-teaser:hover .sbb-teaser__image-wrapper{box-shadow:var(--sbb-shadow-elevation-level-9-shadow-2-offset-x) var(--sbb-shadow-elevation-level-9-shadow-2-offset-y) var(--sbb-shadow-elevation-level-9-shadow-2-blur) var(--sbb-shadow-elevation-level-9-shadow-2-spread) var(--sbb-shadow-elevation-level-9-hard-2-color),var(--sbb-shadow-elevation-level-9-shadow-1-offset-x) var(--sbb-shadow-elevation-level-9-shadow-1-offset-y) var(--sbb-shadow-elevation-level-9-shadow-1-blur) var(--sbb-shadow-elevation-level-9-shadow-1-spread) var(--sbb-shadow-elevation-level-9-hard-1-color)}}.sbb-teaser__chip{display:block;max-width:fit-content;margin-block-end:var(--sbb-spacing-fixed-1x)}:host(:not([data-slot-names~=chip],[chip-content])) .sbb-teaser__chip{display:none}.sbb-teaser__lead{margin:0}.sbb-teaser__description{--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:inline-block;color:var(--sbb-teaser-description-color)}`;
9
- var m = Object.defineProperty, u = Object.getOwnPropertyDescriptor, s = (l, a, b, r) => {
8
+ const f = p`@charset "UTF-8";*,:before,:after{box-sizing:border-box}:host{display:inline-block;outline:none!important;--sbb-teaser-scale-hover: 1.02;--sbb-teaser-description-color: var(--sbb-color-granite);--sbb-teaser-flex-direction: row;--sbb-teaser-align-items: center;--sbb-teaser-gap: var(--sbb-spacing-fixed-4x);--sbb-teaser-width: fit-content;--sbb-teaser-border-radius: var(--sbb-border-radius-4x);--sbb-teaser-brightness-hover: var(--sbb-hover-image-brightness);--sbb-teaser-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x) )}:host([alignment=after]){--sbb-teaser-align-items: start}:host([alignment=below]){--sbb-teaser-flex-direction: column;--sbb-teaser-align-items: baseline;--sbb-teaser-gap: var(--sbb-spacing-fixed-3x);--sbb-teaser-width: 100%}.sbb-teaser{display:flex;text-decoration:none}.sbb-teaser:before{content:"​";-webkit-user-select:none;user-select:none;width:0;height:0}:host(:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-teaser:focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);border-radius:var(--sbb-teaser-border-radius)}@media (forced-colors: active){.sbb-teaser{outline-offset:var(--sbb-focus-outline-offset);outline:CanvasText solid var(--sbb-focus-outline-width);border-radius:var(--sbb-teaser-border-radius)}.sbb-teaser:hover{outline-color:Highlight}}.sbb-teaser__container{display:flex;flex-flow:var(--sbb-teaser-flex-direction) nowrap;align-items:var(--sbb-teaser-align-items);gap:var(--sbb-teaser-gap);max-width:100%}.sbb-teaser__text{overflow:hidden;max-width:100%}::slotted([slot=image]){will-change:transform;display:block;object-fit:cover;width:18.75rem;filter:brightness(var(--sbb-teaser-brightness, 1));transition:var(--sbb-teaser-animation-duration) var(--sbb-animation-easing);aspect-ratio:4/3}@media (any-hover: hover){.sbb-teaser:hover ::slotted([slot=image]){transform:scale(var(--sbb-teaser-scale-hover));--sbb-teaser-brightness: var(--sbb-teaser-brightness-hover)}}.sbb-teaser__image-wrapper{flex-shrink:0;overflow:hidden;border-radius:var(--sbb-teaser-border-radius);transition:var(--sbb-teaser-animation-duration) var(--sbb-animation-easing)}@media (any-hover: hover){.sbb-teaser:hover .sbb-teaser__image-wrapper{box-shadow:var(--sbb-shadow-elevation-level-9-shadow-2-offset-x) var(--sbb-shadow-elevation-level-9-shadow-2-offset-y) var(--sbb-shadow-elevation-level-9-shadow-2-blur) var(--sbb-shadow-elevation-level-9-shadow-2-spread) var(--sbb-shadow-elevation-level-9-hard-2-color),var(--sbb-shadow-elevation-level-9-shadow-1-offset-x) var(--sbb-shadow-elevation-level-9-shadow-1-offset-y) var(--sbb-shadow-elevation-level-9-shadow-1-blur) var(--sbb-shadow-elevation-level-9-shadow-1-spread) var(--sbb-shadow-elevation-level-9-hard-1-color)}}.sbb-teaser__chip{display:block;max-width:fit-content;margin-block-end:var(--sbb-spacing-fixed-1x)}:host(:not([data-slot-names~=chip],[chip-content])) .sbb-teaser__chip{display:none}.sbb-teaser__lead{margin:0}.sbb-teaser__description{--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:inline-block;color:var(--sbb-teaser-description-color)}`;
9
+ var m = Object.defineProperty, u = Object.getOwnPropertyDescriptor, t = (l, a, b, r) => {
10
10
  for (var e = r > 1 ? void 0 : r ? u(a, b) : a, i = l.length - 1, n; i >= 0; i--)
11
11
  (n = l[i]) && (e = (r ? n(a, b, e) : n(e)) || e);
12
12
  return r && e && m(a, b, e), e;
13
13
  };
14
- let t = class extends c {
14
+ let s = class extends c {
15
15
  constructor() {
16
16
  super(...arguments), this.alignment = "after-centered", this.titleLevel = "5";
17
17
  }
@@ -36,23 +36,23 @@ let t = class extends c {
36
36
  `;
37
37
  }
38
38
  };
39
- t.styles = f;
40
- s([
39
+ s.styles = f;
40
+ t([
41
41
  o({ reflect: !0 })
42
- ], t.prototype, "alignment", 2);
43
- s([
42
+ ], s.prototype, "alignment", 2);
43
+ t([
44
44
  o({ attribute: "title-level" })
45
- ], t.prototype, "titleLevel", 2);
46
- s([
45
+ ], s.prototype, "titleLevel", 2);
46
+ t([
47
47
  o({ attribute: "title-content" })
48
- ], t.prototype, "titleContent", 2);
49
- s([
48
+ ], s.prototype, "titleContent", 2);
49
+ t([
50
50
  o({ attribute: "chip-content", reflect: !0 })
51
- ], t.prototype, "chipContent", 2);
52
- t = s([
51
+ ], s.prototype, "chipContent", 2);
52
+ s = t([
53
53
  d("sbb-teaser"),
54
54
  h()
55
- ], t);
55
+ ], s);
56
56
  export {
57
- t as SbbTeaserElement
57
+ s as SbbTeaserElement
58
58
  };
package/title.js CHANGED
@@ -1,15 +1,15 @@
1
- import { property as v, customElement as m } from "lit/decorators.js";
2
- import { css as g, LitElement as c } from "lit";
3
- import { html as f, unsafeStatic as h } from "lit/static-html.js";
4
- import { hostAttributes as p } from "./core/decorators.js";
1
+ import { property as v, customElement as c } from "lit/decorators.js";
2
+ import { css as g, LitElement as m } from "lit";
3
+ import { html as p, unsafeStatic as h } from "lit/static-html.js";
4
+ import { hostAttributes as f } from "./core/decorators.js";
5
5
  import { SbbNegativeMixin as d } from "./core/mixins.js";
6
- const y = g`*,:before,:after{box-sizing:border-box}:host{--sbb-title-text-color-normal: var( --sbb-title-text-color-normal-override, var(--sbb-color-charcoal) );display:block}:host([negative]){--sbb-title-text-color-normal: var(--sbb-color-milk)}:host([id]){scroll-margin-block-start:var(--sbb-spacing-fixed-10x)}.sbb-title{color:var(--sbb-title-text-color-normal)}:host([visually-hidden]) .sbb-title{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}:host(:is([level="1"]:not([visual-level]),[visual-level="1"])) .sbb-title{--sbb-title-line-height: var(--sbb-typo-line-height-titles);--sbb-title-margin-block-start: 0;--sbb-title-margin-block-end: 0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;margin-block:var(--sbb-title-margin-block-start) var(--sbb-title-margin-block-end);font-family:var(--sbb-typo-font-family);font-weight:700;line-height:var(--sbb-title-line-height);letter-spacing:var(--sbb-typo-letter-spacing-titles);font-size:var(--sbb-title-font-size);--sbb-title-font-size: var(--sbb-font-size-title-1)}:host(:is([level="2"]:not([visual-level]),[visual-level="2"])) .sbb-title{--sbb-title-line-height: var(--sbb-typo-line-height-titles);--sbb-title-margin-block-start: 0;--sbb-title-margin-block-end: 0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;margin-block:var(--sbb-title-margin-block-start) var(--sbb-title-margin-block-end);font-family:var(--sbb-typo-font-family);font-weight:700;line-height:var(--sbb-title-line-height);letter-spacing:var(--sbb-typo-letter-spacing-titles);font-size:var(--sbb-title-font-size);--sbb-title-font-size: var(--sbb-font-size-title-2)}:host(:is([level="3"]:not([visual-level]),[visual-level="3"])) .sbb-title{--sbb-title-line-height: var(--sbb-typo-line-height-titles);--sbb-title-margin-block-start: 0;--sbb-title-margin-block-end: 0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;margin-block:var(--sbb-title-margin-block-start) var(--sbb-title-margin-block-end);font-family:var(--sbb-typo-font-family);font-weight:700;line-height:var(--sbb-title-line-height);letter-spacing:var(--sbb-typo-letter-spacing-titles);font-size:var(--sbb-title-font-size);--sbb-title-font-size: var(--sbb-font-size-title-3)}:host(:is([level="4"]:not([visual-level]),[visual-level="4"])) .sbb-title{--sbb-title-line-height: var(--sbb-typo-line-height-titles);--sbb-title-margin-block-start: 0;--sbb-title-margin-block-end: 0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;margin-block:var(--sbb-title-margin-block-start) var(--sbb-title-margin-block-end);font-family:var(--sbb-typo-font-family);font-weight:700;line-height:var(--sbb-title-line-height);letter-spacing:var(--sbb-typo-letter-spacing-titles);font-size:var(--sbb-title-font-size);--sbb-title-font-size: var(--sbb-font-size-title-4)}:host(:is([level="5"]:not([visual-level]),[visual-level="5"])) .sbb-title{--sbb-title-line-height: var(--sbb-typo-line-height-titles);--sbb-title-margin-block-start: 0;--sbb-title-margin-block-end: 0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;margin-block:var(--sbb-title-margin-block-start) var(--sbb-title-margin-block-end);font-family:var(--sbb-typo-font-family);font-weight:700;line-height:var(--sbb-title-line-height);letter-spacing:var(--sbb-typo-letter-spacing-titles);font-size:var(--sbb-title-font-size);--sbb-title-font-size: var(--sbb-font-size-title-5);--sbb-title-line-height: var(--sbb-typo-line-height-body-text)}:host(:is([level="6"]:not([visual-level]),[visual-level="6"])) .sbb-title{--sbb-title-line-height: var(--sbb-typo-line-height-titles);--sbb-title-margin-block-start: 0;--sbb-title-margin-block-end: 0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;margin-block:var(--sbb-title-margin-block-start) var(--sbb-title-margin-block-end);font-family:var(--sbb-typo-font-family);font-weight:700;line-height:var(--sbb-title-line-height);letter-spacing:var(--sbb-typo-letter-spacing-titles);font-size:var(--sbb-title-font-size);--sbb-title-font-size: var(--sbb-font-size-title-6);--sbb-title-line-height: var(--sbb-typo-line-height-body-text)}`;
7
- var u = Object.defineProperty, k = Object.getOwnPropertyDescriptor, n = (e, i, b, l) => {
8
- for (var t = l > 1 ? void 0 : l ? k(i, b) : i, o = e.length - 1, a; o >= 0; o--)
9
- (a = e[o]) && (t = (l ? a(i, b, t) : a(t)) || t);
10
- return l && t && u(i, b, t), t;
6
+ const u = g`*,:before,:after{box-sizing:border-box}:host{--sbb-title-text-color-normal: var( --sbb-title-text-color-normal-override, var(--sbb-color-charcoal) );display:block}:host([negative]){--sbb-title-text-color-normal: var(--sbb-color-milk)}:host([id]){scroll-margin-block-start:var(--sbb-spacing-fixed-10x)}.sbb-title{color:var(--sbb-title-text-color-normal)}:host([visually-hidden]) .sbb-title{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}:host(:is([level="1"]:not([visual-level]),[visual-level="1"])) .sbb-title{--sbb-title-line-height: var(--sbb-typo-line-height-titles);--sbb-title-margin-block-start: 0;--sbb-title-margin-block-end: 0;margin:0;margin-block:var(--sbb-title-margin-block-start) var(--sbb-title-margin-block-end);font-family:var(--sbb-typo-font-family);font-weight:700;line-height:var(--sbb-title-line-height);letter-spacing:var(--sbb-typo-letter-spacing-titles);font-size:var(--sbb-title-font-size);--sbb-title-font-size: var(--sbb-font-size-title-1)}:host(:is([level="2"]:not([visual-level]),[visual-level="2"])) .sbb-title{--sbb-title-line-height: var(--sbb-typo-line-height-titles);--sbb-title-margin-block-start: 0;--sbb-title-margin-block-end: 0;margin:0;margin-block:var(--sbb-title-margin-block-start) var(--sbb-title-margin-block-end);font-family:var(--sbb-typo-font-family);font-weight:700;line-height:var(--sbb-title-line-height);letter-spacing:var(--sbb-typo-letter-spacing-titles);font-size:var(--sbb-title-font-size);--sbb-title-font-size: var(--sbb-font-size-title-2)}:host(:is([level="3"]:not([visual-level]),[visual-level="3"])) .sbb-title{--sbb-title-line-height: var(--sbb-typo-line-height-titles);--sbb-title-margin-block-start: 0;--sbb-title-margin-block-end: 0;margin:0;margin-block:var(--sbb-title-margin-block-start) var(--sbb-title-margin-block-end);font-family:var(--sbb-typo-font-family);font-weight:700;line-height:var(--sbb-title-line-height);letter-spacing:var(--sbb-typo-letter-spacing-titles);font-size:var(--sbb-title-font-size);--sbb-title-font-size: var(--sbb-font-size-title-3)}:host(:is([level="4"]:not([visual-level]),[visual-level="4"])) .sbb-title{--sbb-title-line-height: var(--sbb-typo-line-height-titles);--sbb-title-margin-block-start: 0;--sbb-title-margin-block-end: 0;margin:0;margin-block:var(--sbb-title-margin-block-start) var(--sbb-title-margin-block-end);font-family:var(--sbb-typo-font-family);font-weight:700;line-height:var(--sbb-title-line-height);letter-spacing:var(--sbb-typo-letter-spacing-titles);font-size:var(--sbb-title-font-size);--sbb-title-font-size: var(--sbb-font-size-title-4)}:host(:is([level="5"]:not([visual-level]),[visual-level="5"])) .sbb-title{--sbb-title-line-height: var(--sbb-typo-line-height-titles);--sbb-title-margin-block-start: 0;--sbb-title-margin-block-end: 0;margin:0;margin-block:var(--sbb-title-margin-block-start) var(--sbb-title-margin-block-end);font-family:var(--sbb-typo-font-family);font-weight:700;line-height:var(--sbb-title-line-height);letter-spacing:var(--sbb-typo-letter-spacing-titles);font-size:var(--sbb-title-font-size);--sbb-title-font-size: var(--sbb-font-size-title-5);--sbb-title-line-height: var(--sbb-typo-line-height-body-text)}:host(:is([level="6"]:not([visual-level]),[visual-level="6"])) .sbb-title{--sbb-title-line-height: var(--sbb-typo-line-height-titles);--sbb-title-margin-block-start: 0;--sbb-title-margin-block-end: 0;margin:0;margin-block:var(--sbb-title-margin-block-start) var(--sbb-title-margin-block-end);font-family:var(--sbb-typo-font-family);font-weight:700;line-height:var(--sbb-title-line-height);letter-spacing:var(--sbb-typo-letter-spacing-titles);font-size:var(--sbb-title-font-size);--sbb-title-font-size: var(--sbb-font-size-title-6);--sbb-title-line-height: var(--sbb-typo-line-height-body-text)}`;
7
+ var y = Object.defineProperty, k = Object.getOwnPropertyDescriptor, n = (e, l, b, i) => {
8
+ for (var t = i > 1 ? void 0 : i ? k(l, b) : l, r = e.length - 1, a; r >= 0; r--)
9
+ (a = e[r]) && (t = (i ? a(l, b, t) : a(t)) || t);
10
+ return i && t && y(l, b, t), t;
11
11
  };
12
- let s = class extends d(c) {
12
+ let s = class extends d(m) {
13
13
  constructor() {
14
14
  super(...arguments), this.level = "1";
15
15
  }
@@ -18,14 +18,14 @@ let s = class extends d(c) {
18
18
  }
19
19
  render() {
20
20
  const e = `h${this.level}`;
21
- return f`
21
+ return p`
22
22
  <${h(e)} class="sbb-title" role="presentation">
23
23
  <slot></slot>
24
24
  </${h(e)}>
25
25
  `;
26
26
  }
27
27
  };
28
- s.styles = y;
28
+ s.styles = u;
29
29
  n([
30
30
  v({ reflect: !0 })
31
31
  ], s.prototype, "level", 2);
@@ -36,23 +36,23 @@ n([
36
36
  v({ attribute: "visually-hidden", reflect: !0, type: Boolean })
37
37
  ], s.prototype, "visuallyHidden", 2);
38
38
  s = n([
39
- p({
39
+ f({
40
40
  role: "heading"
41
41
  })
42
42
  ], s);
43
43
  const w = g`:host{--sbb-title-margin-block-start: 0;--sbb-title-margin-block-end: 0;margin-block:var(--sbb-title-margin-block-start) var(--sbb-title-margin-block-end)}:host(:where(:not([visually-hidden]))){--sbb-title-margin-block-start: var(--sbb-spacing-responsive-m);--sbb-title-margin-block-end: var(--sbb-spacing-responsive-s)}:host(:where([level="1"]:not([visual-level]),[visual-level="1"]):where(:not([visually-hidden]))){--sbb-title-margin-block-start: var(--sbb-spacing-responsive-l)}:host(:where([level="2"]:not([visual-level]),[visual-level="2"]):where(:not([visually-hidden]))),:host(:where([level="3"]:not([visual-level]),[visual-level="3"]):where(:not([visually-hidden]))){--sbb-title-margin-block-end: var(--sbb-spacing-responsive-xxxs)}:host(:where([level="4"]:not([visual-level]),[visual-level="4"]):where(:not([visually-hidden]))){--sbb-title-margin-block-end: var(--sbb-spacing-fixed-3x)}:host(:where([level="5"]:not([visual-level]),[visual-level="5"]):where(:not([visually-hidden]))){--sbb-title-margin-block-end: var(--sbb-spacing-fixed-2x)}:host(:where([level="6"]:not([visual-level]),[visual-level="6"]):where(:not([visually-hidden]))){--sbb-title-margin-block-end: var(--sbb-spacing-fixed-1x)}`;
44
- var x = Object.defineProperty, z = Object.getOwnPropertyDescriptor, _ = (e, i, b, l) => {
45
- for (var t = l > 1 ? void 0 : l ? z(i, b) : i, o = e.length - 1, a; o >= 0; o--)
46
- (a = e[o]) && (t = (l ? a(i, b, t) : a(t)) || t);
47
- return l && t && x(i, b, t), t;
44
+ var x = Object.defineProperty, z = Object.getOwnPropertyDescriptor, _ = (e, l, b, i) => {
45
+ for (var t = i > 1 ? void 0 : i ? z(l, b) : l, r = e.length - 1, a; r >= 0; r--)
46
+ (a = e[r]) && (t = (i ? a(l, b, t) : a(t)) || t);
47
+ return i && t && x(l, b, t), t;
48
48
  };
49
- let r = class extends s {
49
+ let o = class extends s {
50
50
  };
51
- r.styles = [s.styles, w];
52
- r = _([
53
- m("sbb-title")
54
- ], r);
51
+ o.styles = [s.styles, w];
52
+ o = _([
53
+ c("sbb-title")
54
+ ], o);
55
55
  export {
56
56
  s as SbbTitleBase,
57
- r as SbbTitleElement
57
+ o as SbbTitleElement
58
58
  };
package/toast.js CHANGED
@@ -7,16 +7,16 @@ import { isFirefox as _ } from "./core/dom.js";
7
7
  import { composedPathHasAttribute as x } from "./core/eventing.js";
8
8
  import { i18nCloseAlert as y } from "./core/i18n.js";
9
9
  import { SbbHydrationMixin as T } from "./core/mixins.js";
10
- import { SbbIconNameMixin as k } from "./icon.js";
10
+ import { SbbIconNameMixin as N } from "./icon.js";
11
11
  import "./button/transparent-button.js";
12
- const N = m`*,:before,:after{box-sizing:border-box}:host{--sbb-toast-max-width: 25rem;--sbb-toast-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-6x) );--sbb-toast-animation-timing-function: ease;--sbb-toast-color: var(--sbb-color-white);--sbb-toast-text-color: var(--sbb-color-milk);--sbb-toast-background-color: var(--sbb-color-midnight);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-toast-margin: var(--sbb-spacing-responsive-s);--sbb-toast-padding-block: var(--sbb-spacing-responsive-xxxs);--sbb-toast-padding-inline: var(--sbb-spacing-responsive-xs);--sbb-toast-border-radius: var(--sbb-border-radius-4x);--sbb-toast-container-display: flex;--sbb-toast-container-position: fixed;--sbb-toast-horizontal-position: initial;--sbb-toast-vertical-position: initial;display:block}:host(:not([data-state])),:host([data-state=closed]){--sbb-toast-container-display: none}:host([position=bottom-left]),:host([position=bottom-start]){--sbb-toast-horizontal-position: flex-start;--sbb-toast-vertical-position: flex-end}:host([position=bottom-center]){--sbb-toast-horizontal-position: center;--sbb-toast-vertical-position: flex-end}:host([position=bottom-right]),:host([position=bottom-end]){--sbb-toast-horizontal-position: flex-end;--sbb-toast-vertical-position: flex-end}:host([position=top-left]),:host([position=top-start]){--sbb-toast-horizontal-position: flex-start;--sbb-toast-vertical-position: flex-start}:host([position=top-center]){--sbb-toast-horizontal-position: center;--sbb-toast-vertical-position: flex-start}:host([position=top-right]),:host([position=top-end]){--sbb-toast-horizontal-position: flex-end;--sbb-toast-vertical-position: flex-start}.sbb-toast__overlay-container{position:var(--sbb-toast-container-position);pointer-events:none;top:0;right:0;bottom:0;left:0;display:var(--sbb-toast-container-display);justify-content:var(--sbb-toast-horizontal-position);align-items:var(--sbb-toast-vertical-position)}.sbb-toast{z-index:var(--sbb-toast-z-index, var(--sbb-overlay-default-z-index));pointer-events:auto;margin:var(--sbb-toast-margin);padding-block:var(--sbb-toast-padding-block);padding-inline:var(--sbb-toast-padding-inline);border-radius:var(--sbb-toast-border-radius);max-width:var(--sbb-toast-max-width);display:flex;color:var(--sbb-toast-color);background-color:var(--sbb-toast-background-color)}:host([data-state=opening]) .sbb-toast{animation-name:open;animation-duration:var(--sbb-toast-animation-duration);animation-timing-function:var(--sbb-toast-animation-timing-function)}:host([data-state=closing]) .sbb-toast{animation-name:close;animation-duration:var(--sbb-toast-animation-duration);animation-timing-function:var(--sbb-toast-animation-timing-function)}.sbb-toast__icon{margin-inline-end:var(--sbb-spacing-fixed-2x);line-height:initial}:host(:not([data-slot-names~=icon],[icon-name])) .sbb-toast__icon{display:none}.sbb-toast__content{--sbb-title-line-height: var(--sbb-typo-line-height-titles);--sbb-title-margin-block-start: 0;--sbb-title-margin-block-end: 0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;margin-block:var(--sbb-title-margin-block-start) var(--sbb-title-margin-block-end);font-family:var(--sbb-typo-font-family);font-weight:700;line-height:var(--sbb-title-line-height);letter-spacing:var(--sbb-typo-letter-spacing-titles);font-size:var(--sbb-title-font-size);--sbb-title-font-size: var(--sbb-font-size-title-6);--sbb-title-line-height: var(--sbb-typo-line-height-body-text);color:var(--sbb-toast-text-color);flex:1 1 0}.sbb-toast__action{position:relative;min-width:2.5rem}:host(:not([data-slot-names~=action],[dismissible])) .sbb-toast__action{display:none}::slotted([data-sbb-button]),.sbb-toast__action-button{margin-inline:var(--sbb-spacing-fixed-2x);position:absolute;top:-.625rem}::slotted(:is(sbb-link,sbb-link-button,sbb-link-static)){margin-inline-start:var(--sbb-spacing-fixed-4x)}@keyframes open{0%{visibility:hidden;opacity:0;transform:translateY(var(--sbb-spacing-fixed-2x))}to{visibility:visible;opacity:1;transform:translateY(0)}}@keyframes close{0%{visibility:visible;opacity:1;transform:translateY(0)}to{visibility:hidden;opacity:0;transform:translateY(var(--sbb-spacing-fixed-2x))}}`;
12
+ const k = m`*,:before,:after{box-sizing:border-box}:host{--sbb-toast-max-width: 25rem;--sbb-toast-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-6x) );--sbb-toast-animation-timing-function: ease;--sbb-toast-color: var(--sbb-color-white);--sbb-toast-text-color: var(--sbb-color-milk);--sbb-toast-background-color: var(--sbb-color-midnight);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-toast-margin: var(--sbb-spacing-responsive-s);--sbb-toast-padding-block: var(--sbb-spacing-responsive-xxxs);--sbb-toast-padding-inline: var(--sbb-spacing-responsive-xs);--sbb-toast-border-radius: var(--sbb-border-radius-4x);--sbb-toast-container-display: flex;--sbb-toast-container-position: fixed;--sbb-toast-horizontal-position: initial;--sbb-toast-vertical-position: initial;display:block}:host(:not([data-state])),:host([data-state=closed]){--sbb-toast-container-display: none}:host([position=bottom-left]),:host([position=bottom-start]){--sbb-toast-horizontal-position: flex-start;--sbb-toast-vertical-position: flex-end}:host([position=bottom-center]){--sbb-toast-horizontal-position: center;--sbb-toast-vertical-position: flex-end}:host([position=bottom-right]),:host([position=bottom-end]){--sbb-toast-horizontal-position: flex-end;--sbb-toast-vertical-position: flex-end}:host([position=top-left]),:host([position=top-start]){--sbb-toast-horizontal-position: flex-start;--sbb-toast-vertical-position: flex-start}:host([position=top-center]){--sbb-toast-horizontal-position: center;--sbb-toast-vertical-position: flex-start}:host([position=top-right]),:host([position=top-end]){--sbb-toast-horizontal-position: flex-end;--sbb-toast-vertical-position: flex-start}.sbb-toast__overlay-container{position:var(--sbb-toast-container-position);pointer-events:none;top:0;right:0;bottom:0;left:0;display:var(--sbb-toast-container-display);justify-content:var(--sbb-toast-horizontal-position);align-items:var(--sbb-toast-vertical-position)}.sbb-toast{z-index:var(--sbb-toast-z-index, var(--sbb-overlay-default-z-index));pointer-events:auto;margin:var(--sbb-toast-margin);padding-block:var(--sbb-toast-padding-block);padding-inline:var(--sbb-toast-padding-inline);border-radius:var(--sbb-toast-border-radius);max-width:var(--sbb-toast-max-width);display:flex;color:var(--sbb-toast-color);background-color:var(--sbb-toast-background-color)}:host([data-state=opening]) .sbb-toast{animation-name:open;animation-duration:var(--sbb-toast-animation-duration);animation-timing-function:var(--sbb-toast-animation-timing-function)}:host([data-state=closing]) .sbb-toast{animation-name:close;animation-duration:var(--sbb-toast-animation-duration);animation-timing-function:var(--sbb-toast-animation-timing-function)}.sbb-toast__icon{margin-inline-end:var(--sbb-spacing-fixed-2x);line-height:initial}:host(:not([data-slot-names~=icon],[icon-name])) .sbb-toast__icon{display:none}.sbb-toast__content{--sbb-title-line-height: var(--sbb-typo-line-height-titles);--sbb-title-margin-block-start: 0;--sbb-title-margin-block-end: 0;margin:0;margin-block:var(--sbb-title-margin-block-start) var(--sbb-title-margin-block-end);font-family:var(--sbb-typo-font-family);font-weight:700;line-height:var(--sbb-title-line-height);letter-spacing:var(--sbb-typo-letter-spacing-titles);font-size:var(--sbb-title-font-size);--sbb-title-font-size: var(--sbb-font-size-title-6);--sbb-title-line-height: var(--sbb-typo-line-height-body-text);color:var(--sbb-toast-text-color);flex:1 1 0}.sbb-toast__action{position:relative;min-width:2.5rem}:host(:not([data-slot-names~=action],[dismissible])) .sbb-toast__action{display:none}::slotted([data-sbb-button]),.sbb-toast__action-button{margin-inline:var(--sbb-spacing-fixed-2x);position:absolute;top:-.625rem}::slotted(:is(sbb-link,sbb-link-button,sbb-link-static)){margin-inline-start:var(--sbb-spacing-fixed-4x)}@keyframes open{0%{visibility:hidden;opacity:0;transform:translateY(var(--sbb-spacing-fixed-2x))}to{visibility:visible;opacity:1;transform:translateY(0)}}@keyframes close{0%{visibility:visible;opacity:1;transform:translateY(0)}to{visibility:hidden;opacity:0;transform:translateY(var(--sbb-spacing-fixed-2x))}}`;
13
13
  var C = Object.defineProperty, S = Object.getOwnPropertyDescriptor, n = (o, s, i, a) => {
14
14
  for (var t = a > 1 ? void 0 : a ? S(s, i) : s, r = o.length - 1, l; r >= 0; r--)
15
15
  (l = o[r]) && (t = (a ? l(s, i, t) : l(t)) || t);
16
16
  return a && t && C(s, i, t), t;
17
17
  };
18
18
  const c = /* @__PURE__ */ new Set();
19
- let e = class extends k(T(f)) {
19
+ let e = class extends N(T(f)) {
20
20
  constructor() {
21
21
  super(...arguments), this.timeout = 6e3, this.position = "bottom-center", this.dismissible = !1, this.politeness = "polite", this._abort = new v(this), this._language = new g(this);
22
22
  }
@@ -128,7 +128,7 @@ let e = class extends k(T(f)) {
128
128
  `;
129
129
  }
130
130
  };
131
- e.styles = N;
131
+ e.styles = k;
132
132
  n([
133
133
  b({ type: Number })
134
134
  ], e.prototype, "timeout", 2);
@@ -35,8 +35,6 @@ export declare class SbbToggleElement extends LitElement {
35
35
  get options(): SbbToggleOptionElement[];
36
36
  private _loaded;
37
37
  private _toggleResizeObserver;
38
- private _valueChanged;
39
- private _updateDisabled;
40
38
  /**
41
39
  * @deprecated only used for React. Will probably be removed once React 19 is available.
42
40
  * Emits whenever the toggle value changes.
@@ -51,6 +49,8 @@ export declare class SbbToggleElement extends LitElement {
51
49
  protected firstUpdated(changedProperties: PropertyValues<this>): Promise<void>;
52
50
  disconnectedCallback(): void;
53
51
  private _updateToggle;
52
+ private _valueChanged;
53
+ private _updateDisabled;
54
54
  private _handleInput;
55
55
  private _handleKeyDown;
56
56
  protected render(): TemplateResult;
@@ -1 +1 @@
1
- {"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../../../src/elements/toggle/toggle/toggle.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAGnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAQb,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAIlE;;;;;;GAMG;AACH,qBAIa,gBAAiB,SAAQ,UAAU;IAC9C,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;;MAGlB;IAEX,sCAAsC;IACtC,IACW,QAAQ,CAAC,KAAK,EAAE,OAAO,EAGjC;IACD,IAAW,QAAQ,IAAI,OAAO,CAE7B;IACD,OAAO,CAAC,SAAS,CAAkB;IAEnC;;;OAGG;IACgD,IAAI,EAAE,OAAO,CAAS;IAEzE,mCAAmC;IACC,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAO;IAE3D;;;OAGG;IACH,IACW,KAAK,CAAC,KAAK,EAAE,MAAM,EAM7B;IACD,IAAW,KAAK,IAAI,MAAM,CAIzB;IACD,OAAO,CAAC,MAAM,CAAuB;IAErC,4DAA4D;IAC5D,IAAW,OAAO,IAAI,sBAAsB,EAAE,CAE7C;IAED,OAAO,CAAC,OAAO,CAAkB;IACjC,OAAO,CAAC,qBAAqB,CAAmE;IAEhG,OAAO,CAAC,aAAa;IAuBrB,OAAO,CAAC,eAAe;IAMvB;;;OAGG;IACH,OAAO,CAAC,UAAU,CAGf;IAEH,+CAA+C;IAC/C,OAAO,CAAC,OAAO,CAGZ;IAEH,OAAO,CAAC,MAAM,CAAyC;IAEvD,gBAAgB;IACT,kBAAkB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IA6BlC,iBAAiB,IAAI,IAAI;cAShB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC;IAQ7E,oBAAoB,IAAI,IAAI;IAK5C,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,cAAc;cA6BH,MAAM,IAAI,cAAc;CAO5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,YAAY,EAAE,gBAAgB,CAAC;KAChC;CACF"}
1
+ {"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../../../src/elements/toggle/toggle/toggle.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAGnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAQb,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAIlE;;;;;;GAMG;AACH,qBAIa,gBAAiB,SAAQ,UAAU;IAC9C,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;;MAGlB;IAEX,sCAAsC;IACtC,IACW,QAAQ,CAAC,KAAK,EAAE,OAAO,EAGjC;IACD,IAAW,QAAQ,IAAI,OAAO,CAE7B;IACD,OAAO,CAAC,SAAS,CAAkB;IAEnC;;;OAGG;IACgD,IAAI,EAAE,OAAO,CAAS;IAEzE,mCAAmC;IACC,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAO;IAE3D;;;OAGG;IACH,IACW,KAAK,CAAC,KAAK,EAAE,MAAM,EAM7B;IACD,IAAW,KAAK,IAAI,MAAM,CAIzB;IACD,OAAO,CAAC,MAAM,CAAuB;IAErC,4DAA4D;IAC5D,IAAW,OAAO,IAAI,sBAAsB,EAAE,CAE7C;IAED,OAAO,CAAC,OAAO,CAAkB;IACjC,OAAO,CAAC,qBAAqB,CAAmE;IAEhG;;;OAGG;IACH,OAAO,CAAC,UAAU,CAGf;IAEH,+CAA+C;IAC/C,OAAO,CAAC,OAAO,CAGZ;IAEH,OAAO,CAAC,MAAM,CAAyC;IAEvD,gBAAgB;IACT,kBAAkB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IA6BlC,iBAAiB,IAAI,IAAI;cAShB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC;IAQ7E,oBAAoB,IAAI,IAAI;IAK5C,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,aAAa;IAuBrB,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,cAAc;cA6BH,MAAM,IAAI,cAAc;CAO5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,YAAY,EAAE,gBAAgB,CAAC;KAChC;CACF"}
@@ -1 +1 @@
1
- {"version":3,"file":"toggle-option.d.ts","sourceRoot":"","sources":["../../../../src/elements/toggle/toggle-option/toggle-option.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAQ,UAAU,EAAW,MAAM,KAAK,CAAC;;AAWhD;;;;;GAKG;AACH,qBAKa,sBAAuB,SAAQ,2BAA4B;IACtE,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,4CAA4C;IAErC,OAAO,UAAS;IAEvB,6CAA6C;IAEtC,QAAQ,EAAE,OAAO,CAAS;IAEjC,8BAA8B;IAC9B,IACW,KAAK,CAAC,KAAK,EAAE,MAAM,EAE7B;IACD,IAAW,KAAK,IAAI,MAAM,CAEzB;IACD,OAAO,CAAC,MAAM,CAAc;IAE5B,OAAO,CAAC,OAAO,CAAC,CAAmB;IACnC,OAAO,CAAC,MAAM,CAAyC;IAEvC,iBAAiB,IAAI,IAAI;cAetB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAe5E,OAAO,CAAC,oBAAoB;IAK5B,OAAO,CAAC,qBAAqB;IAc7B,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,eAAe;cAIJ,MAAM,IAAI,cAAc;CAoB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,mBAAmB,EAAE,sBAAsB,CAAC;KAC7C;CACF"}
1
+ {"version":3,"file":"toggle-option.d.ts","sourceRoot":"","sources":["../../../../src/elements/toggle/toggle-option/toggle-option.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAQ,UAAU,EAAW,MAAM,KAAK,CAAC;;AAWhD;;;;;GAKG;AACH,qBAKa,sBAAuB,SAAQ,2BAA4B;IACtE,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,4CAA4C;IAErC,OAAO,UAAS;IAEvB,6CAA6C;IAEtC,QAAQ,EAAE,OAAO,CAAS;IAEjC,8BAA8B;IAC9B,IACW,KAAK,CAAC,KAAK,EAAE,MAAM,EAE7B;IACD,IAAW,KAAK,IAAI,MAAM,CAEzB;IACD,OAAO,CAAC,MAAM,CAAc;IAE5B,OAAO,CAAC,OAAO,CAAC,CAAmB;IACnC,OAAO,CAAC,MAAM,CAAyC;IAEvC,iBAAiB,IAAI,IAAI;cAetB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAe5E,OAAO,CAAC,oBAAoB;IAK5B,OAAO,CAAC,qBAAqB;IAc7B,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,eAAe;cAIJ,MAAM,IAAI,cAAc;CAqB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,mBAAmB,EAAE,sBAAsB,CAAC;KAC7C;CACF"}
@@ -54,6 +54,7 @@ let s = class extends _(c) {
54
54
  id="sbb-toggle-option-id"
55
55
  aria-hidden="true"
56
56
  tabindex="-1"
57
+ .inert=${this.checked}
57
58
  ?disabled=${this.disabled}
58
59
  .checked=${this.checked || d}
59
60
  .value=${this.value || d}
package/toggle/toggle.js CHANGED
@@ -39,16 +39,6 @@ let r = class extends v {
39
39
  var e;
40
40
  return Array.from(((e = this.querySelectorAll) == null ? void 0 : e.call(this, "sbb-toggle-option")) ?? []);
41
41
  }
42
- _valueChanged(e) {
43
- const t = this.options, s = t.find(
44
- (i) => e === ("value" in i ? i.value : i.getAttribute("value"))
45
- ) ?? t.find((i) => i.checked) ?? t[0];
46
- s && (s.checked || (s.checked = !0), this.updatePillPosition(!1));
47
- }
48
- _updateDisabled() {
49
- for (const e of this.options)
50
- e.disabled = this.disabled;
51
- }
52
42
  /** @internal */
53
43
  updatePillPosition(e) {
54
44
  var g, h;
@@ -75,6 +65,16 @@ let r = class extends v {
75
65
  _updateToggle() {
76
66
  this._valueChanged(this.value), this._updateDisabled();
77
67
  }
68
+ _valueChanged(e) {
69
+ const t = this.options, s = t.find(
70
+ (i) => e === ("value" in i ? i.value : i.getAttribute("value"))
71
+ ) ?? t.find((i) => i.checked) ?? t[0];
72
+ s && (s.checked || (s.checked = !0), this.updatePillPosition(!1));
73
+ }
74
+ _updateDisabled() {
75
+ for (const e of this.options)
76
+ e.disabled = this.disabled;
77
+ }
78
78
  _handleInput() {
79
79
  this.updatePillPosition(!1), this._change.emit(), this._didChange.emit();
80
80
  }
@@ -3,17 +3,17 @@ import { property as b, customElement as m } from "lit/decorators.js";
3
3
  import { html as s, unsafeStatic as p } from "lit/static-html.js";
4
4
  import { SbbLanguageController as y } from "../core/controllers.js";
5
5
  import { EventEmitter as u } from "../core/eventing.js";
6
- import { i18nSector as _, i18nWagonLabel as f, i18nClass as h, i18nBlockedPassage as v, i18nClosedCompartmentLabel as x, i18nLocomotiveLabel as $, i18nAdditionalWagonInformationHeading as C, i18nWagonLabelNumber as k } from "../core/i18n.js";
7
- import { SbbNamedSlotListMixin as L } from "../core/mixins.js";
6
+ import { i18nSector as _, i18nWagonLabel as v, i18nClass as h, i18nBlockedPassage as f, i18nClosedCompartmentLabel as x, i18nLocomotiveLabel as $, i18nAdditionalWagonInformationHeading as C, i18nWagonLabelNumber as L } from "../core/i18n.js";
7
+ import { SbbNamedSlotListMixin as k } from "../core/mixins.js";
8
8
  import "../icon.js";
9
9
  import "../timetable-occupancy-icon.js";
10
- const z = d`*,:before,:after{box-sizing:border-box}:host{display:block;--sbb-train-wagon-width: var(--sbb-train-formation-wagon-width);--sbb-train-wagon-height: var(--sbb-train-formation-wagon-height);--sbb-train-wagon-inner-padding: var(--sbb-spacing-fixed-3x);--sbb-train-wagon-shape-border-radius: var(--sbb-train-formation-wagon-border-radius);--sbb-train-wagon-shape-color: var(--sbb-color-charcoal);--sbb-train-wagon-shape-color-closed: var(--sbb-color-metal);--sbb-train-wagon-shape-width: var(--sbb-border-width-1x);--sbb-train-wagon-gap: var(--sbb-spacing-fixed-2x);--sbb-train-wagon-icons-gap: var(--sbb-spacing-fixed-1x);--sbb-train-wagon-icons-height: .875rem}@media (forced-colors: active){:host{--sbb-train-wagon-shape-color-closed: CanvasText}}.sbb-train-wagon{display:flex;flex-direction:column;align-items:center;width:var(--sbb-train-wagon-width);gap:var(--sbb-train-wagon-gap)}.sbb-train-wagon__compartment{list-style:none;margin:0;padding:0;font-size:inherit;display:grid;grid-template:"label label" auto "occupancy class" 1fr/1fr 1fr;position:relative;width:100%}:host([type=closed]) .sbb-train-wagon__compartment:before,:host(:not([data-has-visible-wagon-content])) .sbb-train-wagon__compartment:before{content:"";grid-area:occupancy/span 2;height:var(--sbb-train-wagon-height)}.sbb-train-wagon__compartment:after{content:"";display:block;position:absolute;inset-inline:0;inset-block:auto 0;width:var(--sbb-train-wagon-width);height:var(--sbb-train-wagon-height);border-radius:var(--sbb-train-wagon-shape-border-radius)}:host([type=wagon]) .sbb-train-wagon__compartment:after{border:var(--sbb-train-wagon-shape-width) solid var(--sbb-train-wagon-shape-color)}:host([type=closed]) .sbb-train-wagon__compartment:after{border:var(--sbb-train-wagon-shape-width) solid var(--sbb-train-wagon-shape-color-closed)}.sbb-train-wagon__occupancy,.sbb-train-wagon__class{height:var(--sbb-train-wagon-height);display:flex;align-items:center}.sbb-train-wagon__label{--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);grid-area:label;text-align:center;display:var(--sbb-train-formation-wagon-label-display, inline-block);min-height:calc(1em * var(--sbb-typo-line-height-body-text))}.sbb-train-wagon__occupancy{grid-area:occupancy;padding-inline-start:var(--sbb-train-wagon-inner-padding)}.sbb-train-wagon__class{--sbb-title-line-height: var(--sbb-typo-line-height-titles);--sbb-title-margin-block-start: 0;--sbb-title-margin-block-end: 0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;margin-block:var(--sbb-title-margin-block-start) var(--sbb-title-margin-block-end);font-family:var(--sbb-typo-font-family);font-weight:700;line-height:var(--sbb-title-line-height);letter-spacing:var(--sbb-typo-letter-spacing-titles);font-size:var(--sbb-title-font-size);--sbb-title-font-size: var(--sbb-font-size-title-6);--sbb-title-line-height: var(--sbb-typo-line-height-body-text);grid-area:class;padding-inline-end:var(--sbb-train-wagon-inner-padding);margin-inline-start:auto}.sbb-train-wagon__locomotive{grid-area:occupancy/span 2}.sbb-train-wagon__icons{--sbb-icon-svg-height: var(--sbb-train-wagon-icons-height);display:flex}.sbb-train-wagon__icons[hidden]{position:absolute}.sbb-train-wagon__icons-list{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;flex-wrap:wrap;gap:var(--sbb-train-wagon-icons-gap);justify-content:center}.sbb-train-wagon__icons-list>:is(li,span){display:inline-flex}.sbb-screen-reader-only{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`;
10
+ const z = d`*,:before,:after{box-sizing:border-box}:host{display:block;--sbb-train-wagon-width: var(--sbb-train-formation-wagon-width);--sbb-train-wagon-height: var(--sbb-train-formation-wagon-height);--sbb-train-wagon-inner-padding: var(--sbb-spacing-fixed-3x);--sbb-train-wagon-shape-border-radius: var(--sbb-train-formation-wagon-border-radius);--sbb-train-wagon-shape-color: var(--sbb-color-charcoal);--sbb-train-wagon-shape-color-closed: var(--sbb-color-metal);--sbb-train-wagon-shape-width: var(--sbb-border-width-1x);--sbb-train-wagon-gap: var(--sbb-spacing-fixed-2x);--sbb-train-wagon-icons-gap: var(--sbb-spacing-fixed-1x);--sbb-train-wagon-icons-height: .875rem}@media (forced-colors: active){:host{--sbb-train-wagon-shape-color-closed: CanvasText}}.sbb-train-wagon{display:flex;flex-direction:column;align-items:center;width:var(--sbb-train-wagon-width);gap:var(--sbb-train-wagon-gap)}.sbb-train-wagon__compartment{list-style:none;margin:0;padding:0;font-size:inherit;display:grid;grid-template:"label label" auto "occupancy class" 1fr/1fr 1fr;position:relative;width:100%}:host([type=closed]) .sbb-train-wagon__compartment:before,:host(:not([data-has-visible-wagon-content])) .sbb-train-wagon__compartment:before{content:"";grid-area:occupancy/span 2;height:var(--sbb-train-wagon-height)}.sbb-train-wagon__compartment:after{content:"";display:block;position:absolute;inset-inline:0;inset-block:auto 0;width:var(--sbb-train-wagon-width);height:var(--sbb-train-wagon-height);border-radius:var(--sbb-train-wagon-shape-border-radius)}:host([type=wagon]) .sbb-train-wagon__compartment:after{border:var(--sbb-train-wagon-shape-width) solid var(--sbb-train-wagon-shape-color)}:host([type=closed]) .sbb-train-wagon__compartment:after{border:var(--sbb-train-wagon-shape-width) solid var(--sbb-train-wagon-shape-color-closed)}.sbb-train-wagon__occupancy,.sbb-train-wagon__class{height:var(--sbb-train-wagon-height);display:flex;align-items:center}.sbb-train-wagon__label{--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);grid-area:label;text-align:center;display:var(--sbb-train-formation-wagon-label-display, inline-block);min-height:calc(1em * var(--sbb-typo-line-height-body-text))}.sbb-train-wagon__occupancy{grid-area:occupancy;padding-inline-start:var(--sbb-train-wagon-inner-padding)}.sbb-train-wagon__class{--sbb-title-line-height: var(--sbb-typo-line-height-titles);--sbb-title-margin-block-start: 0;--sbb-title-margin-block-end: 0;margin:0;margin-block:var(--sbb-title-margin-block-start) var(--sbb-title-margin-block-end);font-family:var(--sbb-typo-font-family);font-weight:700;line-height:var(--sbb-title-line-height);letter-spacing:var(--sbb-typo-letter-spacing-titles);font-size:var(--sbb-title-font-size);--sbb-title-font-size: var(--sbb-font-size-title-6);--sbb-title-line-height: var(--sbb-typo-line-height-body-text);grid-area:class;padding-inline-end:var(--sbb-train-wagon-inner-padding);margin-inline-start:auto}.sbb-train-wagon__locomotive{grid-area:occupancy/span 2}.sbb-train-wagon__icons{--sbb-icon-svg-height: var(--sbb-train-wagon-icons-height);display:flex}.sbb-train-wagon__icons[hidden]{position:absolute}.sbb-train-wagon__icons-list{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;flex-wrap:wrap;gap:var(--sbb-train-wagon-icons-gap);justify-content:center}.sbb-train-wagon__icons-list>:is(li,span){display:inline-flex}.sbb-screen-reader-only{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`;
11
11
  var S = Object.defineProperty, A = Object.getOwnPropertyDescriptor, i = (a, e, l, o) => {
12
12
  for (var r = o > 1 ? void 0 : o ? A(e, l) : e, c = a.length - 1, g; c >= 0; c--)
13
13
  (g = a[c]) && (r = (o ? g(e, l, r) : g(r)) || r);
14
14
  return o && r && S(e, l, r), r;
15
15
  };
16
- let n = class extends L(
16
+ let n = class extends k(
17
17
  w
18
18
  ) {
19
19
  constructor() {
@@ -47,7 +47,7 @@ let n = class extends L(
47
47
  return s`
48
48
  <${p(o)} class="sbb-train-wagon__label" aria-hidden=${(!this.label).toString()}>
49
49
  ${this.label ? s` <span class="sbb-screen-reader-only">
50
- ${`${k[this._language.current]},`}&nbsp;
50
+ ${`${L[this._language.current]},`}&nbsp;
51
51
  </span>
52
52
  ${this.label}` : t}
53
53
  </${p(o)}>
@@ -56,7 +56,7 @@ let n = class extends L(
56
56
  return s`
57
57
  <div class="sbb-train-wagon">
58
58
  ${this.type === "wagon" ? s`<ul
59
- aria-label=${f[this._language.current]}
59
+ aria-label=${v[this._language.current]}
60
60
  class="sbb-train-wagon__compartment"
61
61
  >
62
62
  ${this.sector ? s`<li class="sbb-screen-reader-only">${e}</li>` : t}
@@ -73,7 +73,7 @@ let n = class extends L(
73
73
  .occupancy=${this.occupancy}
74
74
  ></sbb-timetable-occupancy-icon>` : t}
75
75
  ${this.blockedPassage && this.blockedPassage !== "none" ? s`<li class="sbb-screen-reader-only">
76
- ${v[this.blockedPassage][this._language.current]}
76
+ ${f[this.blockedPassage][this._language.current]}
77
77
  </li>` : t}
78
78
  </ul>` : t}
79
79
  ${this.type === "closed" ? s`<span class="sbb-train-wagon__compartment">