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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (229) hide show
  1. package/alert/alert/alert.component.js +5 -5
  2. package/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.component.js +6 -6
  3. package/badge.css +3 -3
  4. package/breadcrumb/breadcrumb/breadcrumb.component.js +4 -4
  5. package/breadcrumb/breadcrumb-group/breadcrumb-group.component.js +4 -4
  6. package/button/common.js +1 -1
  7. package/button/mini-button/mini-button.component.js +1 -1
  8. package/button.js +1 -1
  9. package/calendar/calendar.component.js +1 -1
  10. package/card/card-badge/card-badge.component.js +7 -7
  11. package/card/card-button/card-button.component.d.ts +1 -1
  12. package/card/card-link/card-link.component.d.ts +1 -1
  13. package/carousel/carousel/carousel.component.d.ts +2 -1
  14. package/carousel/carousel/carousel.component.d.ts.map +1 -1
  15. package/carousel/carousel/carousel.component.js +33 -28
  16. package/carousel/carousel-list/carousel-list.component.d.ts +1 -1
  17. package/carousel/carousel-list/carousel-list.component.d.ts.map +1 -1
  18. package/carousel/carousel-list/carousel-list.component.js +17 -22
  19. package/checkbox/checkbox/checkbox.component.d.ts +1 -1
  20. package/checkbox/common.js +1 -1
  21. package/checkbox-common-CrwfdL9V.js +5 -0
  22. package/checkbox.js +1 -1
  23. package/chip/chip/chip.component.js +3 -3
  24. package/chip-label/chip-label.component.js +8 -8
  25. package/core/controllers/media-matchers-controller.d.ts.map +1 -1
  26. package/core/controllers/media-matchers-controller.js +27 -27
  27. package/core/dom/breakpoint.d.ts +1 -0
  28. package/core/dom/breakpoint.d.ts.map +1 -1
  29. package/core/styles/core.scss +46 -47
  30. package/core/styles/mixins/chip.scss +4 -4
  31. package/core/styles/mixins/lists.scss +3 -3
  32. package/core/styles/mixins/panel.scss +2 -2
  33. package/core/styles/mixins/typo.scss +42 -40
  34. package/core/styles/node_modules_@sbb-esta_lyne-design-tokens_dist_scss_sbb-variables-as-css.scss +166 -38
  35. package/core/styles/node_modules_@sbb-esta_lyne-design-tokens_dist_scss_sbb-variables.scss +4 -4
  36. package/core/styles/typography.scss +6 -6
  37. package/core.css +83 -84
  38. package/custom-elements.json +1494 -1515
  39. package/development/alert/alert/alert.component.js +7 -5
  40. package/development/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.component.js +3 -3
  41. package/development/breadcrumb/breadcrumb/breadcrumb.component.js +3 -3
  42. package/development/breadcrumb/breadcrumb-group/breadcrumb-group.component.js +3 -3
  43. package/development/button/common.js +1 -1
  44. package/development/button/mini-button/mini-button.component.js +2 -2
  45. package/development/button.js +1 -1
  46. package/development/calendar/calendar.component.js +15 -15
  47. package/development/card/card-badge/card-badge.component.js +3 -3
  48. package/development/card/card-button/card-button.component.d.ts +1 -1
  49. package/development/card/card-link/card-link.component.d.ts +1 -1
  50. package/development/carousel/carousel/carousel.component.d.ts +2 -1
  51. package/development/carousel/carousel/carousel.component.d.ts.map +1 -1
  52. package/development/carousel/carousel/carousel.component.js +19 -8
  53. package/development/carousel/carousel-list/carousel-list.component.d.ts +1 -1
  54. package/development/carousel/carousel-list/carousel-list.component.d.ts.map +1 -1
  55. package/development/carousel/carousel-list/carousel-list.component.js +7 -14
  56. package/development/checkbox/checkbox/checkbox.component.d.ts +1 -1
  57. package/development/checkbox/common.js +1 -1
  58. package/development/{checkbox-common-BZFJgZd7.js → checkbox-common-BKjxH3Rp.js} +12 -12
  59. package/development/checkbox.js +1 -1
  60. package/development/chip/chip/chip.component.js +3 -3
  61. package/development/chip-label/chip-label.component.js +6 -6
  62. package/development/core/controllers/media-matchers-controller.d.ts.map +1 -1
  63. package/development/core/controllers/media-matchers-controller.js +5 -6
  64. package/development/core/dom/breakpoint.d.ts +1 -0
  65. package/development/core/dom/breakpoint.d.ts.map +1 -1
  66. package/development/core/dom/breakpoint.js +1 -1
  67. package/development/dialog/dialog-close-button/dialog-close-button.component.js +1 -1
  68. package/development/expansion-panel/expansion-panel-header/expansion-panel-header.component.js +3 -3
  69. package/development/file-selector/common.js +1 -1
  70. package/development/file-selector/file-selector/file-selector.component.d.ts +1 -1
  71. package/development/file-selector/file-selector-dropzone/file-selector-dropzone.component.d.ts +1 -1
  72. package/development/file-selector/file-selector-dropzone/file-selector-dropzone.component.js +8 -8
  73. package/development/{file-selector-common-CsFa5XJ-.js → file-selector-common-B-9Eiig3.js} +4 -4
  74. package/development/file-selector.js +1 -1
  75. package/development/footer/footer.component.js +3 -3
  76. package/development/form-error/form-error.component.js +5 -5
  77. package/development/form-field/form-field/form-field.component.js +14 -14
  78. package/development/header/common/header-action-common.js +3 -3
  79. package/development/header/header-button/header-button.component.d.ts +1 -1
  80. package/development/header/header-environment/header-environment.component.js +3 -3
  81. package/development/header/header-link/header-link.component.d.ts +1 -1
  82. package/development/image/image.component.d.ts +0 -1
  83. package/development/image/image.component.d.ts.map +1 -1
  84. package/development/image/image.component.js +11 -16
  85. package/development/link/common/block-link-common.js +10 -10
  86. package/development/menu/common/menu-action-common.js +3 -3
  87. package/development/message/message.component.js +6 -6
  88. package/development/{mini-button-common-Di32bSJj.js → mini-button-common-D1dU4MgN.js} +4 -4
  89. package/development/mini-calendar/mini-calendar-month/mini-calendar-month.component.js +3 -3
  90. package/development/navigation/common/navigation-action-common.js +11 -11
  91. package/development/navigation/navigation-button/navigation-button.component.d.ts +1 -1
  92. package/development/navigation/navigation-link/navigation-link.component.d.ts +1 -1
  93. package/development/navigation/navigation-list/navigation-list.component.js +3 -3
  94. package/development/navigation/navigation-marker/navigation-marker.component.js +9 -9
  95. package/development/navigation/navigation-section/navigation-section.component.js +5 -5
  96. package/development/notification/notification.component.js +7 -7
  97. package/development/option/optgroup/optgroup-base-element.js +3 -3
  98. package/development/option/option/option-base-element.d.ts.map +1 -1
  99. package/development/option/option/option-base-element.js +14 -4
  100. package/development/option/option/option.component.d.ts.map +1 -1
  101. package/development/option/option/option.component.js +8 -5
  102. package/development/option/option-hint/option-hint.component.js +3 -3
  103. package/development/paginator/compact-paginator/compact-paginator.component.d.ts +1 -1
  104. package/development/paginator/compact-paginator/compact-paginator.component.js +3 -3
  105. package/development/paginator/paginator/paginator.component.d.ts +1 -1
  106. package/development/paginator/paginator/paginator.component.js +12 -12
  107. package/development/radio-button/common.js +1 -1
  108. package/development/radio-button/radio-button/radio-button.component.d.ts +1 -1
  109. package/development/{radio-button-common-5uawgCpB.js → radio-button-common-BPrInmpg.js} +11 -11
  110. package/development/radio-button.js +1 -1
  111. package/development/sbb-tokens-DZrHvErO.js +19 -0
  112. package/development/select/select.component.js +1 -1
  113. package/development/sidebar/icon-sidebar-button/icon-sidebar-button.component.d.ts +1 -1
  114. package/development/sidebar/icon-sidebar-link/icon-sidebar-link.component.d.ts +1 -1
  115. package/development/sidebar/sidebar-title/sidebar-title.component.js +1 -1
  116. package/development/status/status.component.js +4 -4
  117. package/development/stepper/step/step.component.js +3 -3
  118. package/development/stepper/step-label/step-label.component.js +15 -15
  119. package/development/tabs/tab-label/tab-label.component.js +18 -18
  120. package/development/tag/tag/tag.component.js +7 -7
  121. package/development/teaser/teaser.component.js +3 -3
  122. package/development/teaser-hero/teaser-hero.component.js +2 -2
  123. package/development/teaser-product/common.js +1 -1
  124. package/development/teaser-product/teaser-product/teaser-product.component.d.ts +1 -1
  125. package/development/teaser-product/teaser-product-static/teaser-product-static.component.d.ts +1 -1
  126. package/development/{teaser-product-common-B1KK4iNu.js → teaser-product-common-v3BvyFdH.js} +5 -5
  127. package/development/teaser-product.js +1 -1
  128. package/development/timetable-occupancy/timetable-occupancy.component.js +3 -3
  129. package/development/title/title-base.js +10 -10
  130. package/development/title/title.component.d.ts +1 -2
  131. package/development/title/title.component.d.ts.map +1 -1
  132. package/development/title/title.component.js +25 -13
  133. package/development/toast/toast.component.js +5 -5
  134. package/development/toggle/toggle/toggle.component.js +3 -3
  135. package/development/toggle/toggle-option/toggle-option.component.js +3 -3
  136. package/development/toggle-check/toggle-check.component.js +11 -11
  137. package/development/tooltip/tooltip.component.js +3 -3
  138. package/development/train/train/train.component.js +4 -4
  139. package/development/train/train-blocked-passage/train-blocked-passage.component.js +1 -1
  140. package/development/train/train-formation/train-formation.component.js +3 -3
  141. package/development/train/train-wagon/train-wagon.component.js +9 -9
  142. package/dialog/dialog-close-button/dialog-close-button.component.js +4 -4
  143. package/expansion-panel/expansion-panel-header/expansion-panel-header.component.js +1 -1
  144. package/file-selector/common.js +1 -1
  145. package/file-selector/file-selector/file-selector.component.d.ts +1 -1
  146. package/file-selector/file-selector-dropzone/file-selector-dropzone.component.d.ts +1 -1
  147. package/file-selector/file-selector-dropzone/file-selector-dropzone.component.js +9 -9
  148. package/{file-selector-common-CUp299VH.js → file-selector-common-DbYkpr-x.js} +1 -1
  149. package/file-selector.js +1 -1
  150. package/footer/footer.component.js +1 -1
  151. package/form-error/form-error.component.js +1 -1
  152. package/form-field/form-field/form-field.component.js +1 -1
  153. package/header/common/header-action-common.js +1 -1
  154. package/header/header-button/header-button.component.d.ts +1 -1
  155. package/header/header-environment/header-environment.component.js +4 -4
  156. package/header/header-link/header-link.component.d.ts +1 -1
  157. package/image/image.component.d.ts +0 -1
  158. package/image/image.component.d.ts.map +1 -1
  159. package/image/image.component.js +93 -97
  160. package/link/common/block-link-common.js +14 -14
  161. package/lists.css +9 -9
  162. package/menu/common/menu-action-common.js +1 -1
  163. package/message/message.component.js +6 -6
  164. package/mini-button-common-DSGLaplg.js +10 -0
  165. package/mini-calendar/mini-calendar-month/mini-calendar-month.component.js +1 -1
  166. package/navigation/common/navigation-action-common.js +17 -17
  167. package/navigation/navigation-button/navigation-button.component.d.ts +1 -1
  168. package/navigation/navigation-link/navigation-link.component.d.ts +1 -1
  169. package/navigation/navigation-list/navigation-list.component.js +3 -3
  170. package/navigation/navigation-marker/navigation-marker.component.js +12 -12
  171. package/navigation/navigation-section/navigation-section.component.js +5 -5
  172. package/notification/notification.component.js +1 -1
  173. package/off-brand-theme.css +136 -137
  174. package/option/optgroup/optgroup-base-element.js +1 -1
  175. package/option/option/option-base-element.d.ts.map +1 -1
  176. package/option/option/option-base-element.js +30 -20
  177. package/option/option/option.component.d.ts.map +1 -1
  178. package/option/option/option.component.js +8 -8
  179. package/option/option-hint/option-hint.component.js +10 -10
  180. package/package.json +1 -1
  181. package/paginator/compact-paginator/compact-paginator.component.d.ts +1 -1
  182. package/paginator/compact-paginator/compact-paginator.component.js +1 -1
  183. package/paginator/paginator/paginator.component.d.ts +1 -1
  184. package/paginator/paginator/paginator.component.js +1 -1
  185. package/radio-button/common.js +1 -1
  186. package/radio-button/radio-button/radio-button.component.d.ts +1 -1
  187. package/radio-button-common-chJrmIBn.js +5 -0
  188. package/radio-button.js +1 -1
  189. package/safety-theme.css +140 -141
  190. package/sbb-tokens-BNWpZrLn.js +11 -0
  191. package/select/select.component.js +1 -1
  192. package/sidebar/icon-sidebar-button/icon-sidebar-button.component.d.ts +1 -1
  193. package/sidebar/icon-sidebar-link/icon-sidebar-link.component.d.ts +1 -1
  194. package/sidebar/sidebar-title/sidebar-title.component.js +5 -5
  195. package/standard-theme.css +136 -137
  196. package/status/status.component.js +4 -4
  197. package/stepper/step/step.component.js +3 -3
  198. package/stepper/step-label/step-label.component.js +1 -1
  199. package/table.css +27 -27
  200. package/tabs/tab-label/tab-label.component.js +10 -10
  201. package/tag/tag/tag.component.js +1 -1
  202. package/teaser/teaser.component.js +1 -1
  203. package/teaser-hero/teaser-hero.component.js +1 -1
  204. package/teaser-product/common.js +1 -1
  205. package/teaser-product/teaser-product/teaser-product.component.d.ts +1 -1
  206. package/teaser-product/teaser-product-static/teaser-product-static.component.d.ts +1 -1
  207. package/teaser-product-common-a4NenpSA.js +5 -0
  208. package/teaser-product.js +1 -1
  209. package/timetable-occupancy/timetable-occupancy.component.js +1 -1
  210. package/title/title-base.js +19 -19
  211. package/title/title.component.d.ts +1 -2
  212. package/title/title.component.d.ts.map +1 -1
  213. package/title/title.component.js +17 -17
  214. package/toast/toast.component.js +1 -1
  215. package/toggle/toggle/toggle.component.js +1 -1
  216. package/toggle/toggle-option/toggle-option.component.js +7 -7
  217. package/toggle-check/toggle-check.component.js +15 -15
  218. package/tooltip/tooltip.component.js +5 -5
  219. package/train/train/train.component.js +1 -1
  220. package/train/train-blocked-passage/train-blocked-passage.component.js +1 -1
  221. package/train/train-formation/train-formation.component.js +1 -1
  222. package/train/train-wagon/train-wagon.component.js +1 -1
  223. package/typography.css +11 -11
  224. package/checkbox-common-BGA_q9nc.js +0 -5
  225. package/development/sbb-tokens-DXgmy_b-.js +0 -21
  226. package/mini-button-common-DBnJfrBZ.js +0 -10
  227. package/radio-button-common-BT3VkZLM.js +0 -5
  228. package/sbb-tokens-CB1Hgctn.js +0 -12
  229. package/teaser-product-common-BwqWqRrK.js +0 -5
@@ -15,11 +15,11 @@ import { boxSizingStyles as N } from "../../core/styles.js";
15
15
  import { SbbIconNameMixin as U } from "../../icon.js";
16
16
  import "../../button/transparent-button.js";
17
17
  import "../../divider.js";
18
- const Z = E`:host{display:block;--sbb-alert-background-color: var(--sbb-background-color-1-inverted);--sbb-alert-border-radius: var(--sbb-border-radius-4x);--sbb-alert-color: var(--sbb-color-aluminium);--sbb-alert-color: light-dark(var(--sbb-color-aluminium), var(--sbb-color-anthracite));--sbb-alert-padding: var(--sbb-spacing-responsive-xxs) var(--sbb-spacing-responsive-xs);--sbb-alert-icon-size: 1.25rem;--sbb-alert-close-icon-size: var(--sbb-size-icon-ui-small);--sbb-alert-close-icon-margin: var(--sbb-spacing-responsive-xxs);--sbb-alert-gap: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-responsive-xs);--sbb-alert-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-6x) );--sbb-alert-timing-function: ease-in}@media(min-width:64rem){:host{--sbb-alert-icon-size: 1.75rem}}@media(forced-colors:active){:host{outline:var(--sbb-border-width-1x) solid CanvasText;border-radius:var(--sbb-alert-border-radius)}}:host([data-state=opening]:not([animation=open],[animation=all])){--sbb-disable-animation-duration: 0s}:host([data-state=closing]:not([animation=close],[animation=all])){--sbb-disable-animation-duration: 0s}:host([size=s]){--sbb-alert-gap: var(--sbb-spacing-fixed-1x) var(--sbb-spacing-responsive-xxs);--sbb-alert-close-icon-margin: var(--sbb-spacing-responsive-xxxs)}:host([size=l]){--sbb-alert-icon-size: var(--sbb-size-icon-ui-small)}@media(min-width:64rem){:host([size=l]){--sbb-alert-icon-size: 2.125rem}}:host(:not(:is(:state(dark),[state--dark]))){--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}.sbb-alert__transition-wrapper{display:grid;grid-template-rows:0fr;opacity:0}:host(:is([data-state=opened],[data-state=closing])) .sbb-alert__transition-wrapper{grid-template-rows:1fr;opacity:1}:host([data-state=opening]) .sbb-alert__transition-wrapper{animation-name:open,open-opacity;animation-fill-mode:forwards;animation-duration:var(--sbb-alert-animation-duration);animation-timing-function:var(--sbb-alert-timing-function);animation-delay:0s,var(--sbb-alert-animation-duration)}:host([data-state=closing]) .sbb-alert__transition-wrapper{animation-name:close-opacity,close;animation-fill-mode:forwards;animation-duration:var(--sbb-alert-animation-duration);animation-timing-function:var(--sbb-alert-timing-function);animation-delay:0s,var(--sbb-disable-animation-duration, var(--sbb-animation-duration-2x))}.sbb-alert__transition-sub-wrapper{overflow:hidden}.sbb-alert{--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:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--sbb-alert-gap);min-width:fit-content;padding:var(--sbb-alert-padding);overflow:hidden;color:var(--sbb-alert-color);background-color:var(--sbb-alert-background-color);border-radius:var(--sbb-alert-border-radius)}@media(min-width:37.5rem){.sbb-alert{grid-template-columns:auto 1fr auto;align-items:flex-start}}.sbb-alert__icon{display:flex;align-items:start;padding-block:var(--sbb-spacing-fixed-1x);min-width:var(--sbb-alert-icon-size);--sbb-icon-svg-width: var(--sbb-alert-icon-size);--sbb-icon-svg-height: var(--sbb-alert-icon-size)}.sbb-alert__content{color-scheme:only light;order:3;grid-column:1/3}@media(min-width:37.5rem){.sbb-alert__content{order:initial;grid-column-start:initial;grid-column-end:initial}}.sbb-alert__content-slot{display:inline;margin:0;padding:0}.sbb-alert__close-button-wrapper{color-scheme:only light;display:flex;justify-content:flex-end;align-items:center;height:100%}@media(min-width:37.5rem){.sbb-alert__close-button{margin-inline-start:var(--sbb-alert-close-icon-margin)}}.sbb-alert__close-button-divider{display:none}@media(min-width:37.5rem){.sbb-alert__close-button-divider{display:block;height:calc(100% - var(--sbb-spacing-fixed-1x) * 2)}}@keyframes open{0%{grid-template-rows:0fr}to{grid-template-rows:1fr}}@keyframes open-opacity{0%{opacity:0}to{opacity:1}}@keyframes close{0%{grid-template-rows:1fr}to{grid-template-rows:0fr}}@keyframes close-opacity{0%{opacity:1}to{opacity:0}}::slotted(sbb-title){margin:0}`;
18
+ const Z = E`:host{display:block;--sbb-alert-background-color: var(--sbb-background-color-1-inverted);--sbb-alert-border-radius: var(--sbb-border-radius-4x);--sbb-alert-color: var(--sbb-color-aluminium);--sbb-alert-color: light-dark(var(--sbb-color-aluminium), var(--sbb-color-anthracite));--sbb-alert-padding: var(--sbb-spacing-responsive-xxs) var(--sbb-spacing-responsive-xs);--sbb-alert-icon-size: 1.25rem;--sbb-alert-close-icon-size: var(--sbb-size-icon-ui-small);--sbb-alert-close-icon-margin: var(--sbb-spacing-responsive-xxs);--sbb-alert-gap: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-responsive-xs);--sbb-alert-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-6x) );--sbb-alert-timing-function: ease-in;--sbb-alert-title-margin-block: 0}@media(min-width:64rem){:host{--sbb-alert-icon-size: 1.75rem}}@media(forced-colors:active){:host{outline:var(--sbb-border-width-1x) solid CanvasText;border-radius:var(--sbb-alert-border-radius)}}:host([data-state=opening]:not([animation=open],[animation=all])){--sbb-disable-animation-duration: 0s}:host([data-state=closing]:not([animation=close],[animation=all])){--sbb-disable-animation-duration: 0s}:host([size=s]){--sbb-alert-gap: var(--sbb-spacing-fixed-1x) var(--sbb-spacing-responsive-xxs);--sbb-alert-close-icon-margin: var(--sbb-spacing-responsive-xxxs)}:host([size=l]){--sbb-alert-icon-size: var(--sbb-size-icon-ui-small);--sbb-alert-title-margin-block: 0 var(--sbb-spacing-fixed-1x)}@media(min-width:64rem){:host([size=l]){--sbb-alert-icon-size: 2.125rem}}:host(:not(:is(:state(dark),[state--dark]))){--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}.sbb-alert__transition-wrapper{display:grid;grid-template-rows:0fr;opacity:0}:host(:is([data-state=opened],[data-state=closing])) .sbb-alert__transition-wrapper{grid-template-rows:1fr;opacity:1}:host([data-state=opening]) .sbb-alert__transition-wrapper{animation-name:open,open-opacity;animation-fill-mode:forwards;animation-duration:var(--sbb-alert-animation-duration);animation-timing-function:var(--sbb-alert-timing-function);animation-delay:0s,var(--sbb-alert-animation-duration)}:host([data-state=closing]) .sbb-alert__transition-wrapper{animation-name:close-opacity,close;animation-fill-mode:forwards;animation-duration:var(--sbb-alert-animation-duration);animation-timing-function:var(--sbb-alert-timing-function);animation-delay:0s,var(--sbb-disable-animation-duration, var(--sbb-animation-duration-2x))}.sbb-alert__transition-sub-wrapper{overflow:hidden}.sbb-alert{--sbb-text-font-size: var(--sbb-text-font-size-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--sbb-alert-gap);min-width:fit-content;padding:var(--sbb-alert-padding);overflow:hidden;color:var(--sbb-alert-color);background-color:var(--sbb-alert-background-color);border-radius:var(--sbb-alert-border-radius)}@media(min-width:37.5rem){.sbb-alert{grid-template-columns:auto 1fr auto;align-items:flex-start}}.sbb-alert__icon{display:flex;align-items:start;padding-block:var(--sbb-spacing-fixed-1x);min-width:var(--sbb-alert-icon-size);--sbb-icon-svg-width: var(--sbb-alert-icon-size);--sbb-icon-svg-height: var(--sbb-alert-icon-size)}.sbb-alert__content{color-scheme:only light;order:3;grid-column:1/3}@media(min-width:37.5rem){.sbb-alert__content{order:initial;grid-column-start:initial;grid-column-end:initial}}.sbb-alert__content-slot{display:inline;margin:0;padding:0}.sbb-alert__close-button-wrapper{color-scheme:only light;display:flex;justify-content:flex-end;align-items:center;height:100%}@media(min-width:37.5rem){.sbb-alert__close-button{margin-inline-start:var(--sbb-alert-close-icon-margin)}}.sbb-alert__close-button-divider{display:none}@media(min-width:37.5rem){.sbb-alert__close-button-divider{display:block;height:calc(100% - var(--sbb-spacing-fixed-1x) * 2)}}@keyframes open{0%{grid-template-rows:0fr}to{grid-template-rows:1fr}}@keyframes open-opacity{0%{opacity:0}to{opacity:1}}@keyframes close{0%{grid-template-rows:1fr}to{grid-template-rows:0fr}}@keyframes close-opacity{0%{opacity:1}to{opacity:0}}::slotted(sbb-title){margin-block:var(--sbb-alert-title-margin-block)}`;
19
19
  let Y = (() => {
20
20
  var o, l, r;
21
- let i = [A("sbb-alert")], e, a = [], n, u = U(T(L)), g, _ = [], f = [], v, y = [], x = [];
22
- return r = class extends u {
21
+ let i = [A("sbb-alert")], e, a = [], n, g = U(T(L)), u, _ = [], f = [], v, y = [], x = [];
22
+ return r = class extends g {
23
23
  constructor() {
24
24
  super(...arguments);
25
25
  p(this, o);
@@ -125,8 +125,8 @@ let Y = (() => {
125
125
  `;
126
126
  }
127
127
  }, o = new WeakMap(), l = new WeakMap(), n = r, (() => {
128
- const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(u[Symbol.metadata] ?? null) : void 0;
129
- g = [S({ reflect: !0 })], v = [S({ reflect: !0 })], h(r, null, g, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (s) => "size" in s, get: (s) => s.size, set: (s, d) => {
128
+ const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(g[Symbol.metadata] ?? null) : void 0;
129
+ u = [S({ reflect: !0 })], v = [S({ reflect: !0 })], h(r, null, u, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (s) => "size" in s, get: (s) => s.size, set: (s, d) => {
130
130
  s.size = d;
131
131
  } }, metadata: t }, _, f), h(r, null, v, { kind: "accessor", name: "animation", static: !1, private: !1, access: { has: (s) => "animation" in s, get: (s) => s.animation, set: (s, d) => {
132
132
  s.animation = d;
@@ -1,12 +1,12 @@
1
1
  import { __esDecorate as l, __runInitializers as r } from "tslib";
2
2
  import { customElement as n } from "lit/decorators.js";
3
3
  import { boxSizingStyles as c } from "../../core/styles.js";
4
- import { SbbOptionBaseElement as d } from "../../option.js";
5
- import { css as p } from "lit";
6
- const u = p`:host{--sbb-option-color: var(--sbb-color-3);--sbb-option-column-gap: var(--sbb-spacing-responsive-xxxs);--sbb-option-icon-color: var(--sbb-color-metal);--sbb-option-icon-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));--sbb-option-border-radius: var(--sbb-border-radius-4x);--sbb-option-padding-inline: var(--sbb-spacing-responsive-xxxs);--sbb-option-min-height: var(--sbb-size-element-s);--sbb-option-focus-outline-color: transparent;--sbb-option-focus-outline-inset: var(--sbb-spacing-fixed-1x);display:block}:host([data-negative]){--sbb-option-color: var(--sbb-color-3-negative);--sbb-option-icon-color: var(--sbb-color-5)}:host(:not([data-disable-highlight])) .sbb-option__label slot{display:none}:host([data-active]){--sbb-option-focus-outline-color: var(--sbb-focus-outline-color)}.sbb-option{--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);position:relative;display:flex;align-items:center;column-gap:var(--sbb-option-column-gap);justify-content:start;min-height:var(--sbb-option-min-height);padding-inline:var(--sbb-option-padding-inline);color:var(--sbb-option-color)}.sbb-option:after{content:"";display:block;position:absolute;inset:var(--sbb-option-focus-outline-inset);pointer-events:none;border:var(--sbb-focus-outline-width) solid var(--sbb-option-focus-outline-color);border-radius:var(--sbb-option-border-radius)}:host(:not(:is([disabled],[data-group-disabled]))) .sbb-option__label--highlight{font-weight:700}@media(forced-colors:active){:host(:not(:is([disabled],[data-group-disabled]))) .sbb-option__label--highlight{color:Highlight}}.sbb-option__icon{display:flex;min-width:var(--sbb-size-icon-ui-small);min-height:var(--sbb-size-icon-ui-small);color:var(--sbb-option-icon-color)}:host(:not(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name]))) .sbb-option__icon{display:var(--sbb-option-icon-container-display, none)}.sbb-option__label{text-overflow:var(--sbb-option-text-overflow);overflow:var(--sbb-option-overflow);white-space:var(--sbb-option-white-space, initial)}`, h = "sbb-autocomplete-grid-option";
7
- let x = (() => {
4
+ import { SbbOptionBaseElement as p } from "../../option.js";
5
+ import { css as d } from "lit";
6
+ const u = d`:host{--sbb-option-color: var(--sbb-color-3);--sbb-option-column-gap: var(--sbb-spacing-responsive-xxxs);--sbb-option-icon-color: var(--sbb-color-metal);--sbb-option-icon-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));--sbb-option-border-radius: var(--sbb-border-radius-4x);--sbb-option-padding-inline: var(--sbb-spacing-responsive-xxxs);--sbb-option-min-height: var(--sbb-size-element-s);--sbb-option-focus-outline-color: transparent;--sbb-option-focus-outline-inset: var(--sbb-spacing-fixed-1x);display:block}:host([data-negative]){--sbb-option-color: var(--sbb-color-3-negative);--sbb-option-icon-color: var(--sbb-color-5)}:host(:not([data-disable-highlight])) .sbb-option__label slot{display:none}:host([data-active]){--sbb-option-focus-outline-color: var(--sbb-focus-outline-color)}.sbb-option{--sbb-text-font-size: var(--sbb-text-font-size-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);position:relative;display:flex;align-items:center;column-gap:var(--sbb-option-column-gap);justify-content:start;min-height:var(--sbb-option-min-height);padding-inline:var(--sbb-option-padding-inline);color:var(--sbb-option-color)}.sbb-option:after{content:"";display:block;position:absolute;inset:var(--sbb-option-focus-outline-inset);pointer-events:none;border:var(--sbb-focus-outline-width) solid var(--sbb-option-focus-outline-color);border-radius:var(--sbb-option-border-radius)}:host(:not(:is([disabled],[data-group-disabled]))) .sbb-option__label--highlight{font-weight:700}@media(forced-colors:active){:host(:not(:is([disabled],[data-group-disabled]))) .sbb-option__label--highlight{color:Highlight}}.sbb-option__icon{display:flex;min-width:var(--sbb-size-icon-ui-small);min-height:var(--sbb-size-icon-ui-small);color:var(--sbb-option-icon-color)}:host(:not(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name]))) .sbb-option__icon{display:var(--sbb-option-icon-container-display, none)}.sbb-option__label{text-overflow:var(--sbb-option-text-overflow);overflow:var(--sbb-option-overflow);white-space:var(--sbb-option-white-space, initial)}`, h = "sbb-autocomplete-grid-option";
7
+ let y = (() => {
8
8
  var o;
9
- let b = [n("sbb-autocomplete-grid-option")], e, s = [], i, a = d;
9
+ let b = [n("sbb-autocomplete-grid-option")], e, s = [], i, a = p;
10
10
  return o = class extends a {
11
11
  constructor() {
12
12
  super(...arguments), this.optionId = h;
@@ -34,6 +34,6 @@ let x = (() => {
34
34
  })(), o.role = "gridcell", o.styles = [c, u], r(i, s), i;
35
35
  })();
36
36
  export {
37
- x as SbbAutocompleteGridOptionElement,
37
+ y as SbbAutocompleteGridOptionElement,
38
38
  h as autocompleteGridOptionId
39
39
  };
package/badge.css CHANGED
@@ -3,11 +3,11 @@
3
3
  position: relative;
4
4
  }
5
5
  [sbb-badge]::after {
6
- --sbb-text-font-size: var(--sbb-font-size-text-xxs);
6
+ --sbb-text-font-size: var(--sbb-text-font-size-xxs);
7
7
  font-family: var(--sbb-typo-font-family);
8
8
  font-weight: normal;
9
- line-height: var(--sbb-typo-line-height-body-text);
10
- letter-spacing: var(--sbb-typo-letter-spacing-body-text);
9
+ line-height: var(--sbb-typo-line-height-text);
10
+ letter-spacing: var(--sbb-typo-letter-spacing-text);
11
11
  font-size: var(--sbb-text-font-size);
12
12
  font-weight: bold;
13
13
  display: flex;
@@ -1,15 +1,15 @@
1
1
  import { __esDecorate as l, __runInitializers as i } from "tslib";
2
2
  import { customElement as c } from "lit/decorators.js";
3
3
  import { html as n } from "lit/static-html.js";
4
- import { SbbLinkBaseElement as d } from "../../core/base-elements.js";
5
- import { SbbHydrationMixin as m } from "../../core/mixins.js";
4
+ import { SbbLinkBaseElement as m } from "../../core/base-elements.js";
5
+ import { SbbHydrationMixin as d } from "../../core/mixins.js";
6
6
  import { boxSizingStyles as u } from "../../core/styles.js";
7
7
  import { SbbIconNameMixin as f } from "../../icon.js";
8
8
  import { css as v } from "lit";
9
- const h = v`:host{display:flex;--sbb-breadcrumb-color: var(--sbb-color-granite);--sbb-breadcrumb-color: light-dark(var(--sbb-color-granite), var(--sbb-color-aluminium))}@media(any-hover:hover){:host(:hover){--sbb-breadcrumb-color: var(--sbb-color-charcoal);--sbb-breadcrumb-color: light-dark(var(--sbb-color-charcoal), var(--sbb-color-smoke))}}:host(:is(:active,[data-active])){--sbb-breadcrumb-color: var(--sbb-color-anthracite);--sbb-breadcrumb-color: light-dark(var(--sbb-color-anthracite), var(--sbb-color-cloud))}.sbb-breadcrumb{--sbb-link-text-decoration-line: none;--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-link-color-normal);text-decoration-line:var(--sbb-link-text-decoration-line, underline);text-decoration-thickness:.0625rem;text-underline-offset:.3125em;-webkit-user-select:none;user-select:none}@media(forced-colors:active){.sbb-breadcrumb{text-decoration:underline}}.sbb-breadcrumb{display:flex;cursor:var(--sbb-cursor-pointer);gap:var(--sbb-spacing-fixed-2x);color:var(--sbb-breadcrumb-color);align-items:center;overflow:hidden;outline:none}@media(forced-colors:active){.sbb-breadcrumb{--sbb-breadcrumb-color: ButtonText}}.sbb-breadcrumb:focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);border-radius:var(--sbb-border-radius-2x)}.sbb-breadcrumb__label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(:not(:is(:state(slotted),[state--slotted]))) .sbb-breadcrumb__label{display:none}slot[name=icon] .sbb-breadcrumb__icon,slot[name=icon] ::slotted(*){flex-shrink:0}`;
9
+ const h = v`:host{display:flex;--sbb-breadcrumb-color: var(--sbb-color-granite);--sbb-breadcrumb-color: light-dark(var(--sbb-color-granite), var(--sbb-color-aluminium))}@media(any-hover:hover){:host(:hover){--sbb-breadcrumb-color: var(--sbb-color-charcoal);--sbb-breadcrumb-color: light-dark(var(--sbb-color-charcoal), var(--sbb-color-smoke))}}:host(:is(:active,[data-active])){--sbb-breadcrumb-color: var(--sbb-color-anthracite);--sbb-breadcrumb-color: light-dark(var(--sbb-color-anthracite), var(--sbb-color-cloud))}.sbb-breadcrumb{--sbb-link-text-decoration-line: none;--sbb-text-font-size: var(--sbb-text-font-size-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);color:var(--sbb-link-color-normal);text-decoration-line:var(--sbb-link-text-decoration-line, underline);text-decoration-thickness:.0625rem;text-underline-offset:.3125em;-webkit-user-select:none;user-select:none}@media(forced-colors:active){.sbb-breadcrumb{text-decoration:underline}}.sbb-breadcrumb{display:flex;cursor:var(--sbb-cursor-pointer);gap:var(--sbb-spacing-fixed-2x);color:var(--sbb-breadcrumb-color);align-items:center;overflow:hidden;outline:none}@media(forced-colors:active){.sbb-breadcrumb{--sbb-breadcrumb-color: ButtonText}}.sbb-breadcrumb:focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);border-radius:var(--sbb-border-radius-2x)}.sbb-breadcrumb__label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(:not(:is(:state(slotted),[state--slotted]))) .sbb-breadcrumb__label{display:none}slot[name=icon] .sbb-breadcrumb__icon,slot[name=icon] ::slotted(*){flex-shrink:0}`;
10
10
  let z = (() => {
11
11
  var r;
12
- let s = [c("sbb-breadcrumb")], o, b = [], e, a = f(m(d));
12
+ let s = [c("sbb-breadcrumb")], o, b = [], e, a = f(d(m));
13
13
  return r = class extends a {
14
14
  renderTemplate() {
15
15
  return n`
@@ -9,10 +9,10 @@ import { i18nBreadcrumbEllipsisButtonLabel as I } from "../../core/i18n.js";
9
9
  import { SbbNamedSlotListMixin as A, SbbElementInternalsMixin as B } from "../../core/mixins.js";
10
10
  import { boxSizingStyles as D } from "../../core/styles.js";
11
11
  import "../../icon.js";
12
- const N = v`:host{--sbb-breadcrumb-group-wrap: nowrap;--sbb-breadcrumb-group-visibility: hidden;--sbb-breadcrumb-group-ellipsis-color: var(--sbb-color-granite);--sbb-breadcrumb-group-ellipsis-color: light-dark( var(--sbb-color-granite), var(--sbb-color-cloud) );--sbb-breadcrumb-group-ellipsis-background-color: transparent;--sbb-breadcrumb-group-ellipsis-border-width: var(--sbb-border-width-1x);--sbb-breadcrumb-group-ellipsis-border-color: var(--sbb-color-silver);--sbb-breadcrumb-group-ellipsis-border-color: light-dark( var(--sbb-color-silver), var(--sbb-color-anthracite) );display:block}:host([data-loaded]){--sbb-breadcrumb-group-visibility: visible}:host([data-state]){--sbb-breadcrumb-group-wrap: wrap}.sbb-breadcrumb-group{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;flex-wrap:var(--sbb-breadcrumb-group-wrap);column-gap:var(--sbb-spacing-fixed-1x);visibility:var(--sbb-breadcrumb-group-visibility)}.sbb-breadcrumb-group__item{flex:0 0 auto;display:flex;column-gap:var(--sbb-spacing-fixed-1x)}.sbb-breadcrumb-group__divider-icon{color:var(--sbb-breadcrumb-group-ellipsis-color)}#sbb-breadcrumb-ellipsis{-webkit-appearance:none;-moz-appearance:none;box-sizing:border-box;margin:0;outline:none;border:none;padding:0;background:none;-webkit-tap-highlight-color:transparent;color:inherit;--sbb-text-font-size: var(--sbb-font-size-text-xxs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);line-height:0;letter-spacing:.01em;width:var(--sbb-size-icon-ui-small);height:var(--sbb-size-icon-ui-small);border:var(--sbb-breadcrumb-group-ellipsis-border-width) solid var(--sbb-breadcrumb-group-ellipsis-border-color);border-radius:50%;padding-block-end:.5em;cursor:var(--sbb-cursor-pointer);color:var(--sbb-breadcrumb-group-ellipsis-color);background-color:var(--sbb-breadcrumb-group-ellipsis-background-color);overflow:hidden}@media(forced-colors:active){#sbb-breadcrumb-ellipsis{--sbb-breadcrumb-group-ellipsis-border-width: var(--sbb-border-width-2x);--sbb-breadcrumb-group-ellipsis-border-color: CanvasText}}@media(any-hover:hover){#sbb-breadcrumb-ellipsis:hover{--sbb-breadcrumb-group-ellipsis-color: var(--sbb-color-2);--sbb-breadcrumb-group-ellipsis-background-color: var(--sbb-background-color-3)}}@media(any-hover:hover)and (forced-colors:active){#sbb-breadcrumb-ellipsis:hover{--sbb-breadcrumb-group-ellipsis-border-color: Highlight}}#sbb-breadcrumb-ellipsis:focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width)}`, p = 3;
12
+ const N = v`:host{--sbb-breadcrumb-group-wrap: nowrap;--sbb-breadcrumb-group-visibility: hidden;--sbb-breadcrumb-group-ellipsis-color: var(--sbb-color-granite);--sbb-breadcrumb-group-ellipsis-color: light-dark( var(--sbb-color-granite), var(--sbb-color-cloud) );--sbb-breadcrumb-group-ellipsis-background-color: transparent;--sbb-breadcrumb-group-ellipsis-border-width: var(--sbb-border-width-1x);--sbb-breadcrumb-group-ellipsis-border-color: var(--sbb-color-silver);--sbb-breadcrumb-group-ellipsis-border-color: light-dark( var(--sbb-color-silver), var(--sbb-color-anthracite) );display:block}:host([data-loaded]){--sbb-breadcrumb-group-visibility: visible}:host([data-state]){--sbb-breadcrumb-group-wrap: wrap}.sbb-breadcrumb-group{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;flex-wrap:var(--sbb-breadcrumb-group-wrap);column-gap:var(--sbb-spacing-fixed-1x);visibility:var(--sbb-breadcrumb-group-visibility)}.sbb-breadcrumb-group__item{flex:0 0 auto;display:flex;column-gap:var(--sbb-spacing-fixed-1x)}.sbb-breadcrumb-group__divider-icon{color:var(--sbb-breadcrumb-group-ellipsis-color)}#sbb-breadcrumb-ellipsis{-webkit-appearance:none;-moz-appearance:none;box-sizing:border-box;margin:0;outline:none;border:none;padding:0;background:none;-webkit-tap-highlight-color:transparent;color:inherit;--sbb-text-font-size: var(--sbb-text-font-size-xxs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);line-height:0;letter-spacing:.01em;width:var(--sbb-size-icon-ui-small);height:var(--sbb-size-icon-ui-small);border:var(--sbb-breadcrumb-group-ellipsis-border-width) solid var(--sbb-breadcrumb-group-ellipsis-border-color);border-radius:50%;padding-block-end:.5em;cursor:var(--sbb-cursor-pointer);color:var(--sbb-breadcrumb-group-ellipsis-color);background-color:var(--sbb-breadcrumb-group-ellipsis-background-color);overflow:hidden}@media(forced-colors:active){#sbb-breadcrumb-ellipsis{--sbb-breadcrumb-group-ellipsis-border-width: var(--sbb-border-width-2x);--sbb-breadcrumb-group-ellipsis-border-color: CanvasText}}@media(any-hover:hover){#sbb-breadcrumb-ellipsis:hover{--sbb-breadcrumb-group-ellipsis-color: var(--sbb-color-2);--sbb-breadcrumb-group-ellipsis-background-color: var(--sbb-background-color-3)}}@media(any-hover:hover)and (forced-colors:active){#sbb-breadcrumb-ellipsis:hover{--sbb-breadcrumb-group-ellipsis-border-color: Highlight}}#sbb-breadcrumb-ellipsis:focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width)}`, p = 3;
13
13
  let P = (() => {
14
14
  var s;
15
- let m = [y("sbb-breadcrumb-group")], a, o = [], t, b = A(B(f)), n = [], d;
15
+ let m = [y("sbb-breadcrumb-group")], a, o = [], t, b = A(B(f)), n = [], c;
16
16
  return s = class extends b {
17
17
  /** The state of the breadcrumb group. */
18
18
  set _state(e) {
@@ -61,7 +61,7 @@ let P = (() => {
61
61
  this._focusNext(e, r);
62
62
  }
63
63
  _focusNext(e, r = this.listChildren) {
64
- const i = r.findIndex((c) => c === document.activeElement || c === this.shadowRoot.activeElement), g = S(e, i, r.length);
64
+ const i = r.findIndex((d) => d === document.activeElement || d === this.shadowRoot.activeElement), g = S(e, i, r.length);
65
65
  r[g]?.focus(), e.preventDefault();
66
66
  }
67
67
  /**
@@ -125,7 +125,7 @@ let P = (() => {
125
125
  }
126
126
  }, t = s, (() => {
127
127
  const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(b[Symbol.metadata] ?? null) : void 0;
128
- d = [C()], u(s, null, d, { kind: "setter", name: "_state", static: !1, private: !1, access: { has: (r) => "_state" in r, set: (r, i) => {
128
+ c = [C()], u(s, null, c, { kind: "setter", name: "_state", static: !1, private: !1, access: { has: (r) => "_state" in r, set: (r, i) => {
129
129
  r._state = i;
130
130
  } }, metadata: e }, null, n), u(null, a = { value: t }, m, { kind: "class", name: t.name, metadata: e }, null, o), t = a.value, e && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
131
131
  })(), s.role = "navigation", s.styles = [D, N], h(t, o), t;
package/button/common.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { SbbButtonCommonElementMixin as o } from "./common/button-common.js";
2
- import { a, b as m, p as r, s as b, t as s, m as y } from "../mini-button-common-DBnJfrBZ.js";
2
+ import { a, b as m, p as r, s as b, t as s, m as y } from "../mini-button-common-DSGLaplg.js";
3
3
  export {
4
4
  o as SbbButtonCommonElementMixin,
5
5
  a as buttonAccentStyle,
@@ -7,7 +7,7 @@ import { boxSizingStyles as d } from "../../core/styles.js";
7
7
  import { SbbIconNameMixin as f } from "../../icon.js";
8
8
  import { miniButtonStyle as h } from "../common.js";
9
9
  import { css as g } from "lit";
10
- const v = g`:host{--sbb-mini-button-gap: .125rem;--sbb-mini-button-padding-inline: var(--sbb-spacing-fixed-2x);--sbb-mini-button-label-display: block;--sbb-mini-button-label-height: var(--sbb-size-icon-ui-small)}:host(:where(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name])):not(:is(:state(slotted),[state--slotted]))){--sbb-mini-button-padding-inline: 0;--sbb-mini-button-label-display: none;--sbb-mini-button-label-height: unset}.sbb-mini-button{height:var(--sbb-mini-button-label-height);gap:var(--sbb-mini-button-gap);align-items:center;justify-content:center;padding-inline:var(--sbb-mini-button-padding-inline)}.sbb-mini-button__label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--sbb-font-size-text-xxs);letter-spacing:var(--sbb-typo-letter-spacing-body-text);display:var(--sbb-mini-button-label-display);transition:translate var(--sbb-mini-button-transition-duration) var(--sbb-mini-button-transition-easing-function);translate:0 var(--sbb-mini-button-translate-y-content-hover, 0)}`;
10
+ const v = g`:host{--sbb-mini-button-gap: .125rem;--sbb-mini-button-padding-inline: var(--sbb-spacing-fixed-2x);--sbb-mini-button-label-display: block;--sbb-mini-button-label-height: var(--sbb-size-icon-ui-small)}:host(:where(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name])):not(:is(:state(slotted),[state--slotted]))){--sbb-mini-button-padding-inline: 0;--sbb-mini-button-label-display: none;--sbb-mini-button-label-height: unset}.sbb-mini-button{height:var(--sbb-mini-button-label-height);gap:var(--sbb-mini-button-gap);align-items:center;justify-content:center;padding-inline:var(--sbb-mini-button-padding-inline)}.sbb-mini-button__label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--sbb-text-font-size-xxs);letter-spacing:var(--sbb-typo-letter-spacing-text);display:var(--sbb-mini-button-label-display);transition:translate var(--sbb-mini-button-transition-duration) var(--sbb-mini-button-transition-easing-function);translate:0 var(--sbb-mini-button-translate-y-content-hover, 0)}`;
11
11
  let E = (() => {
12
12
  var i;
13
13
  let b = [r("sbb-mini-button")], n, s = [], t, a = c(p(f(u)));
package/button.js CHANGED
@@ -13,7 +13,7 @@ import { SbbSecondaryButtonStaticElement as T } from "./button/secondary-button-
13
13
  import { SbbAccentButtonStaticElement as C } from "./button/accent-button-static/accent-button-static.component.js";
14
14
  import { SbbTransparentButtonStaticElement as P } from "./button/transparent-button-static/transparent-button-static.component.js";
15
15
  import { SbbButtonCommonElementMixin as h } from "./button/common/button-common.js";
16
- import { a as q, b as v, p as w, s as z, t as D, m as F } from "./mini-button-common-DBnJfrBZ.js";
16
+ import { a as q, b as v, p as w, s as z, t as D, m as F } from "./mini-button-common-DSGLaplg.js";
17
17
  export {
18
18
  b as SbbAccentButtonElement,
19
19
  s as SbbAccentButtonLinkElement,
@@ -89,7 +89,7 @@ function ee(o, n) {
89
89
  const d = U(o, n?.in), b = +z(d, n) - +mt(d, n);
90
90
  return Math.round(b / ot) + 1;
91
91
  }
92
- const wt = Le`:host{display:block;width:max-content;--sbb-calendar-cell-size: 2.5rem;--sbb-calendar-hover-shift: .0625rem;--sbb-calendar-wide-cell-size: 4.375rem;--sbb-calendar-header-color: var(--sbb-color-granite);--sbb-calendar-header-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));--sbb-calendar-cell-background-color: transparent;--sbb-calendar-cell-padding: .125rem;--sbb-calendar-cell-color: var(--sbb-color-2);--sbb-calendar-cell-selected-color: var(--sbb-color-1-inverted);--sbb-calendar-cell-selected-background-color: var(--sbb-background-color-2-inverted);--sbb-calendar-cell-disabled-height: .09375rem;--sbb-calendar-cell-disabled-width: 1.59375rem;--sbb-calendar-cell-disabled-color: var(--sbb-color-granite);--sbb-calendar-cell-disabled-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));--sbb-calendar-cell-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-calendar-cell-transition-easing-function: var(--sbb-animation-easing);--sbb-calendar-tables-gap: var(--sbb-spacing-fixed-10x);--sbb-calendar-table-animation-shift: .00625rem;--sbb-calendar-table-animation-duration: .1ms;--sbb-calendar-table-column-spaces: 12;--sbb-calendar-control-view-change-height: 2.75rem;--sbb-calendar-control-view-change-color: var(--sbb-color-3);--sbb-calendar-control-view-change-background: var(--sbb-background-color-1)}@media(min-width:37.5rem){:host{--sbb-calendar-cell-size: 2.75rem;--sbb-calendar-wide-cell-size: 4.8125rem;--sbb-calendar-control-view-change-height: 3rem}}.sbb-calendar__wrapper{width:100%;display:block;transition-duration:var(--sbb-calendar-cell-transition-duration)}.sbb-calendar__controls{width:100%;display:inline-flex;align-items:center;gap:var(--sbb-spacing-fixed-2x);margin-block-end:var(--sbb-spacing-fixed-4x)}.sbb-calendar__controls-month{width:100%;display:flex;gap:var(--sbb-calendar-tables-gap)}#sbb-calendar__controls-previous,#sbb-calendar__controls-next{-webkit-tap-highlight-color:transparent}.sbb-calendar__controls-change-date{-webkit-appearance:none;-moz-appearance:none;box-sizing:border-box;outline:none;border:none;border-radius:0;padding:0;background:none;-webkit-tap-highlight-color:transparent;color:inherit;--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);display:flex;align-items:center;margin:auto;height:var(--sbb-calendar-control-view-change-height);text-transform:capitalize;cursor:var(--sbb-cursor-pointer);padding-inline:var(--sbb-spacing-fixed-5x) var(--sbb-spacing-fixed-2x);border-radius:var(--sbb-border-radius-infinity);background-color:var(--sbb-calendar-control-view-change-background);color:var(--sbb-calendar-control-view-change-color);transition-duration:var(--sbb-calendar-cell-transition-duration);transition-timing-function:var(--sbb-calendar-cell-transition-easing-function);transition-property:background-color,padding-block-end}.sbb-calendar__controls-change-date:disabled{--sbb-calendar-control-view-change-background: var(--sbb-color-milk);--sbb-calendar-control-view-change-background: light-dark( var(--sbb-color-milk), var(--sbb-color-anthracite) );--sbb-calendar-control-view-change-color: var(--sbb-color-granite);--sbb-calendar-control-view-change-color: light-dark( var(--sbb-color-granite), var(--sbb-color-aluminium) );cursor:unset}.sbb-calendar__controls-change-date:focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);outline-offset:var(--sbb-spacing-fixed-1x)}@media(any-hover:hover){.sbb-calendar__controls-change-date:not(:active,:disabled):hover{padding-block-end:var(--sbb-calendar-hover-shift)}}.sbb-calendar__controls-change-date:not(:disabled):active{--sbb-calendar-control-view-change-background: var(--sbb-background-color-3)}.sbb-calendar__table-month-view,.sbb-calendar__table-year-view{--sbb-calendar-table-column-spaces: 6}.sbb-calendar__table-container{display:flex;gap:var(--sbb-calendar-tables-gap);margin-inline:var(--sbb-calendar-margin);--sbb-calendar-min-width: calc(7 * var(--sbb-calendar-cell-size));--sbb-calendar-overflow: calc(100% - var(--sbb-calendar-min-width));--sbb-calendar-start-offset: min( 0px, -1 * (var(--sbb-calendar-overflow) / var(--sbb-calendar-table-column-spaces)) );--sbb-calendar-margin: var(--sbb-calendar-start-offset)}:host([data-wide]) .sbb-calendar__table-container{--sbb-calendar-min-width: calc( 2 * 7 * var(--sbb-calendar-cell-size) + var(--sbb-calendar-tables-gap) );--sbb-calendar-margin: calc(.5 * var(--sbb-calendar-start-offset))}:host([orientation=horizontal][week-numbers]) .sbb-calendar__table-container{--sbb-calendar-min-width: calc(8 * var(--sbb-calendar-cell-size))}:host([orientation=horizontal][week-numbers][data-wide]) .sbb-calendar__table-container{--sbb-calendar-min-width: calc( 2 * 8 * var(--sbb-calendar-cell-size) + var(--sbb-calendar-tables-gap) )}:host([orientation=vertical]) .sbb-calendar__table-container{min-width:var(--sbb-calendar-min-width);--sbb-calendar-start-offset: 0}:host([orientation=vertical][data-wide]) .sbb-calendar__table-container{--sbb-calendar-min-width: calc( 13 * var(--sbb-calendar-cell-size) + var(--sbb-calendar-tables-gap) )}.sbb-calendar__table{width:100%;border-collapse:collapse;height:max-content;animation-name:show;animation-duration:var(--sbb-calendar-table-animation-duration)}.sbb-calendar__table.sbb-calendar__table-hide{--sbb-calendar-cell-transition-duration: 0ms;animation-name:hide;animation-duration:var(--sbb-calendar-table-animation-duration)}:host(:not([data-wide])) .sbb-calendar__table{min-width:100%}.sbb-calendar__table-header,.sbb-calendar__table-body{text-align:center}.sbb-calendar__table-header-cell{--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);width:var(--sbb-calendar-cell-size);color:var(--sbb-calendar-header-color);padding:0}:host(:not([multiple])) .sbb-calendar__table-header-cell{height:var(--sbb-calendar-cell-size)}.sbb-calendar__table-data{position:relative;padding:0;text-align:center}.sbb-calendar__header-cell,.sbb-calendar__cell{-webkit-appearance:none;-moz-appearance:none;box-sizing:border-box;margin:0;outline:none;border:none;border-radius:0;padding:0;background:none;-webkit-tap-highlight-color:transparent;color:inherit;--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);height:var(--sbb-calendar-cell-size);color:var(--sbb-calendar-cell-color);cursor:var(--sbb-cursor-pointer);position:relative;z-index:0}.sbb-calendar__header-cell:before,.sbb-calendar__cell:before{content:"";position:absolute;inset:var(--sbb-calendar-cell-padding);background-color:var(--sbb-calendar-cell-background-color);border-radius:50%;z-index:-1;transition-duration:var(--sbb-calendar-cell-transition-duration);transition-timing-function:var(--sbb-calendar-cell-transition-easing-function);transition-property:background-color}@media(any-hover:hover){.sbb-calendar__header-cell:not(.sbb-calendar__selected,:active,:disabled):hover,.sbb-calendar__cell:not(.sbb-calendar__selected,:active,:disabled):hover{--sbb-calendar-cell-background-color: var(--sbb-background-color-3);padding-block-end:var(--sbb-calendar-hover-shift)}}@media(any-hover:hover)and (forced-colors:active){.sbb-calendar__header-cell:not(.sbb-calendar__selected,:active,:disabled):hover:before,.sbb-calendar__cell:not(.sbb-calendar__selected,:active,:disabled):hover:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);--sbb-focus-outline-style: initial}}.sbb-calendar__header-cell:disabled,.sbb-calendar__cell:disabled{--sbb-calendar-cell-color: var(--sbb-calendar-cell-disabled-color);cursor:unset}.sbb-calendar__header-cell:focus-visible:before,.sbb-calendar__cell:focus-visible:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width)}.sbb-calendar__header-cell:not(.sbb-calendar__selected,:disabled):active,.sbb-calendar__cell:not(.sbb-calendar__selected,:disabled):active{--sbb-calendar-cell-background-color: var(--sbb-background-color-4)}@media(forced-colors:active){.sbb-calendar__header-cell:not(.sbb-calendar__selected,:disabled):active:before,.sbb-calendar__cell:not(.sbb-calendar__selected,:disabled):active:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);--sbb-focus-outline-style: initial}}.sbb-calendar__header-cell{--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-calendar-header-color)}.sbb-calendar__weekday,.sbb-calendar__day{border-radius:50%;width:var(--sbb-calendar-cell-size)}.sbb-calendar__weekday:before,.sbb-calendar__day:before{border-radius:50%}.sbb-calendar__pill{width:var(--sbb-calendar-wide-cell-size);border-radius:var(--sbb-border-radius-infinity)}.sbb-calendar__pill:before{border-radius:var(--sbb-border-radius-infinity)}.sbb-calendar__crossed-out:after{content:"";height:var(--sbb-calendar-cell-disabled-height);width:var(--sbb-calendar-cell-disabled-width);position:absolute;background-color:var(--sbb-calendar-cell-disabled-color);top:50%;left:50%;transform:translate(-50%,-50%) rotate(-45deg)}.sbb-calendar__cell-current{--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}.sbb-calendar__selected{--sbb-calendar-cell-color: var(--sbb-calendar-cell-selected-color);--sbb-calendar-cell-background-color: var(--sbb-calendar-cell-selected-background-color)}@media(forced-colors:active){.sbb-calendar__selected{--sbb-calendar-cell-background-color: ButtonText !important}}@keyframes show{0%{opacity:0;transform:translateY(var(--sbb-calendar-table-animation-shift))}to{opacity:1;transform:translateY(0)}}@keyframes hide{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(var(--sbb-calendar-table-animation-shift))}}`;
92
+ const wt = Le`:host{display:block;width:max-content;--sbb-calendar-cell-size: 2.5rem;--sbb-calendar-hover-shift: .0625rem;--sbb-calendar-wide-cell-size: 4.375rem;--sbb-calendar-header-color: var(--sbb-color-granite);--sbb-calendar-header-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));--sbb-calendar-cell-background-color: transparent;--sbb-calendar-cell-padding: .125rem;--sbb-calendar-cell-color: var(--sbb-color-2);--sbb-calendar-cell-selected-color: var(--sbb-color-1-inverted);--sbb-calendar-cell-selected-background-color: var(--sbb-background-color-2-inverted);--sbb-calendar-cell-disabled-height: .09375rem;--sbb-calendar-cell-disabled-width: 1.59375rem;--sbb-calendar-cell-disabled-color: var(--sbb-color-granite);--sbb-calendar-cell-disabled-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));--sbb-calendar-cell-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-calendar-cell-transition-easing-function: var(--sbb-animation-easing);--sbb-calendar-tables-gap: var(--sbb-spacing-fixed-10x);--sbb-calendar-table-animation-shift: .00625rem;--sbb-calendar-table-animation-duration: .1ms;--sbb-calendar-table-column-spaces: 12;--sbb-calendar-control-view-change-height: 2.75rem;--sbb-calendar-control-view-change-color: var(--sbb-color-3);--sbb-calendar-control-view-change-background: var(--sbb-background-color-1)}@media(min-width:37.5rem){:host{--sbb-calendar-cell-size: 2.75rem;--sbb-calendar-wide-cell-size: 4.8125rem;--sbb-calendar-control-view-change-height: 3rem}}.sbb-calendar__wrapper{width:100%;display:block;transition-duration:var(--sbb-calendar-cell-transition-duration)}.sbb-calendar__controls{width:100%;display:inline-flex;align-items:center;gap:var(--sbb-spacing-fixed-2x);margin-block-end:var(--sbb-spacing-fixed-4x)}.sbb-calendar__controls-month{width:100%;display:flex;gap:var(--sbb-calendar-tables-gap)}#sbb-calendar__controls-previous,#sbb-calendar__controls-next{-webkit-tap-highlight-color:transparent}.sbb-calendar__controls-change-date{-webkit-appearance:none;-moz-appearance:none;box-sizing:border-box;outline:none;border:none;border-radius:0;padding:0;background:none;-webkit-tap-highlight-color:transparent;color:inherit;--sbb-text-font-size: var(--sbb-text-font-size-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);display:flex;align-items:center;margin:auto;height:var(--sbb-calendar-control-view-change-height);text-transform:capitalize;cursor:var(--sbb-cursor-pointer);padding-inline:var(--sbb-spacing-fixed-5x) var(--sbb-spacing-fixed-2x);border-radius:var(--sbb-border-radius-infinity);background-color:var(--sbb-calendar-control-view-change-background);color:var(--sbb-calendar-control-view-change-color);transition-duration:var(--sbb-calendar-cell-transition-duration);transition-timing-function:var(--sbb-calendar-cell-transition-easing-function);transition-property:background-color,padding-block-end}.sbb-calendar__controls-change-date:disabled{--sbb-calendar-control-view-change-background: var(--sbb-color-milk);--sbb-calendar-control-view-change-background: light-dark( var(--sbb-color-milk), var(--sbb-color-anthracite) );--sbb-calendar-control-view-change-color: var(--sbb-color-granite);--sbb-calendar-control-view-change-color: light-dark( var(--sbb-color-granite), var(--sbb-color-aluminium) );cursor:unset}.sbb-calendar__controls-change-date:focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);outline-offset:var(--sbb-spacing-fixed-1x)}@media(any-hover:hover){.sbb-calendar__controls-change-date:not(:active,:disabled):hover{padding-block-end:var(--sbb-calendar-hover-shift)}}.sbb-calendar__controls-change-date:not(:disabled):active{--sbb-calendar-control-view-change-background: var(--sbb-background-color-3)}.sbb-calendar__table-month-view,.sbb-calendar__table-year-view{--sbb-calendar-table-column-spaces: 6}.sbb-calendar__table-container{display:flex;gap:var(--sbb-calendar-tables-gap);margin-inline:var(--sbb-calendar-margin);--sbb-calendar-min-width: calc(7 * var(--sbb-calendar-cell-size));--sbb-calendar-overflow: calc(100% - var(--sbb-calendar-min-width));--sbb-calendar-start-offset: min( 0px, -1 * (var(--sbb-calendar-overflow) / var(--sbb-calendar-table-column-spaces)) );--sbb-calendar-margin: var(--sbb-calendar-start-offset)}:host([data-wide]) .sbb-calendar__table-container{--sbb-calendar-min-width: calc( 2 * 7 * var(--sbb-calendar-cell-size) + var(--sbb-calendar-tables-gap) );--sbb-calendar-margin: calc(.5 * var(--sbb-calendar-start-offset))}:host([orientation=horizontal][week-numbers]) .sbb-calendar__table-container{--sbb-calendar-min-width: calc(8 * var(--sbb-calendar-cell-size))}:host([orientation=horizontal][week-numbers][data-wide]) .sbb-calendar__table-container{--sbb-calendar-min-width: calc( 2 * 8 * var(--sbb-calendar-cell-size) + var(--sbb-calendar-tables-gap) )}:host([orientation=vertical]) .sbb-calendar__table-container{min-width:var(--sbb-calendar-min-width);--sbb-calendar-start-offset: 0}:host([orientation=vertical][data-wide]) .sbb-calendar__table-container{--sbb-calendar-min-width: calc( 13 * var(--sbb-calendar-cell-size) + var(--sbb-calendar-tables-gap) )}.sbb-calendar__table{width:100%;border-collapse:collapse;height:max-content;animation-name:show;animation-duration:var(--sbb-calendar-table-animation-duration)}.sbb-calendar__table.sbb-calendar__table-hide{--sbb-calendar-cell-transition-duration: 0ms;animation-name:hide;animation-duration:var(--sbb-calendar-table-animation-duration)}:host(:not([data-wide])) .sbb-calendar__table{min-width:100%}.sbb-calendar__table-header,.sbb-calendar__table-body{text-align:center}.sbb-calendar__table-header-cell{--sbb-text-font-size: var(--sbb-text-font-size-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);width:var(--sbb-calendar-cell-size);color:var(--sbb-calendar-header-color);padding:0}:host(:not([multiple])) .sbb-calendar__table-header-cell{height:var(--sbb-calendar-cell-size)}.sbb-calendar__table-data{position:relative;padding:0;text-align:center}.sbb-calendar__header-cell,.sbb-calendar__cell{-webkit-appearance:none;-moz-appearance:none;box-sizing:border-box;margin:0;outline:none;border:none;border-radius:0;padding:0;background:none;-webkit-tap-highlight-color:transparent;color:inherit;--sbb-text-font-size: var(--sbb-text-font-size-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);height:var(--sbb-calendar-cell-size);color:var(--sbb-calendar-cell-color);cursor:var(--sbb-cursor-pointer);position:relative;z-index:0}.sbb-calendar__header-cell:before,.sbb-calendar__cell:before{content:"";position:absolute;inset:var(--sbb-calendar-cell-padding);background-color:var(--sbb-calendar-cell-background-color);border-radius:50%;z-index:-1;transition-duration:var(--sbb-calendar-cell-transition-duration);transition-timing-function:var(--sbb-calendar-cell-transition-easing-function);transition-property:background-color}@media(any-hover:hover){.sbb-calendar__header-cell:not(.sbb-calendar__selected,:active,:disabled):hover,.sbb-calendar__cell:not(.sbb-calendar__selected,:active,:disabled):hover{--sbb-calendar-cell-background-color: var(--sbb-background-color-3);padding-block-end:var(--sbb-calendar-hover-shift)}}@media(any-hover:hover)and (forced-colors:active){.sbb-calendar__header-cell:not(.sbb-calendar__selected,:active,:disabled):hover:before,.sbb-calendar__cell:not(.sbb-calendar__selected,:active,:disabled):hover:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);--sbb-focus-outline-style: initial}}.sbb-calendar__header-cell:disabled,.sbb-calendar__cell:disabled{--sbb-calendar-cell-color: var(--sbb-calendar-cell-disabled-color);cursor:unset}.sbb-calendar__header-cell:focus-visible:before,.sbb-calendar__cell:focus-visible:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width)}.sbb-calendar__header-cell:not(.sbb-calendar__selected,:disabled):active,.sbb-calendar__cell:not(.sbb-calendar__selected,:disabled):active{--sbb-calendar-cell-background-color: var(--sbb-background-color-4)}@media(forced-colors:active){.sbb-calendar__header-cell:not(.sbb-calendar__selected,:disabled):active:before,.sbb-calendar__cell:not(.sbb-calendar__selected,:disabled):active:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);--sbb-focus-outline-style: initial}}.sbb-calendar__header-cell{--sbb-text-font-size: var(--sbb-text-font-size-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);color:var(--sbb-calendar-header-color)}.sbb-calendar__weekday,.sbb-calendar__day{border-radius:50%;width:var(--sbb-calendar-cell-size)}.sbb-calendar__weekday:before,.sbb-calendar__day:before{border-radius:50%}.sbb-calendar__pill{width:var(--sbb-calendar-wide-cell-size);border-radius:var(--sbb-border-radius-infinity)}.sbb-calendar__pill:before{border-radius:var(--sbb-border-radius-infinity)}.sbb-calendar__crossed-out:after{content:"";height:var(--sbb-calendar-cell-disabled-height);width:var(--sbb-calendar-cell-disabled-width);position:absolute;background-color:var(--sbb-calendar-cell-disabled-color);top:50%;left:50%;transform:translate(-50%,-50%) rotate(-45deg)}.sbb-calendar__cell-current{--sbb-text-font-size: var(--sbb-text-font-size-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);font-weight:700}.sbb-calendar__selected{--sbb-calendar-cell-color: var(--sbb-calendar-cell-selected-color);--sbb-calendar-cell-background-color: var(--sbb-calendar-cell-selected-background-color)}@media(forced-colors:active){.sbb-calendar__selected{--sbb-calendar-cell-background-color: ButtonText !important}}@keyframes show{0%{opacity:0;transform:translateY(var(--sbb-calendar-table-animation-shift))}to{opacity:1;transform:translateY(0)}}@keyframes hide{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(var(--sbb-calendar-table-animation-shift))}}`;
93
93
  let Rt = (() => {
94
94
  var N, C, I, R, S, T, E, P, L, B, H, q, p;
95
95
  let o = [He("sbb-calendar")], n, d = [], b, g = nt(Be), v = [], $, O = [], A = [], M, W = [], ae = [], se, re = [], ie = [], ne, le = [], oe = [], de, ce = [], he = [], be, _e, ue = [], fe = [], pe, ge = [], me = [], we, ve = [], ye = [], De, Ae = [], ke = [], xe, $e = [], Ve = [], Me, Ye, ze = [], Fe = [], Oe, We = [], Ne = [];
@@ -4,15 +4,15 @@ var m = (e) => {
4
4
  var u = (e, a, r) => a.has(e) || m("Cannot " + r);
5
5
  var h = (e, a, r) => (u(e, a, "read from private field"), r ? r.call(e) : a.get(e)), f = (e, a, r) => a.has(e) ? m("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(e) : a.set(e, r), c = (e, a, r, t) => (u(e, a, "write to private field"), t ? t.call(e, r) : a.set(e, r), r);
6
6
  import { __runInitializers as n, __esDecorate as v } from "tslib";
7
- import { css as k, LitElement as y, html as _ } from "lit";
7
+ import { css as k, LitElement as _, html as y } from "lit";
8
8
  import { customElement as E, property as w } from "lit/decorators.js";
9
9
  import { SbbElementInternalsMixin as z } from "../../core/mixins.js";
10
10
  import { boxSizingStyles as S } from "../../core/styles.js";
11
- const C = k`:host{--sbb-card-badge-gap: var(--sbb-spacing-fixed-2x);--sbb-card-badge-color: var(--sbb-color-2-inverted);--sbb-card-badge-background-color: var(--sbb-background-color-3-inverted);--sbb-card-badge-border-color: transparent;display:block}:host([color=white]){--sbb-card-badge-color: var(--sbb-color-3);--sbb-card-badge-background-color: var(--sbb-background-color-1);--sbb-card-badge-border-color: var(--sbb-color-aluminium);--sbb-card-badge-border-color: light-dark( var(--sbb-color-aluminium), var(--sbb-color-anthracite) )}.sbb-card-badge-wrapper{display:flex;position:relative;height:fit-content;justify-content:end}@media(forced-colors:active){.sbb-card-badge-wrapper:after{content:"";display:block;position:absolute;inset:0;border-block-end:var(--sbb-border-width-1x) solid CanvasText}}.sbb-card-badge{position:relative;display:flex;inset-block-start:0;inset-inline-end:0;padding-inline:var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-3x)}.sbb-card-badge-content{--sbb-text-font-size: var(--sbb-font-size-text-xxs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);font-weight:700;position:relative;display:flex;align-items:center;gap:var(--sbb-card-badge-gap);color:var(--sbb-card-badge-color)}.sbb-card-badge-background{content:"";display:block;position:absolute;inset:0;background-color:var(--sbb-card-badge-background-color);border-end-start-radius:var(--sbb-border-radius-4x);margin-inline-end:calc(var(--sbb-spacing-fixed-3x) * -1);transform:skew(16deg)}:host(:dir(rtl)) .sbb-card-badge-background{transform:skew(-16deg)}.sbb-card-badge-background:before{content:"";display:block;position:absolute;inset:0;border-block-end:var(--sbb-border-width-1x) solid var(--sbb-card-badge-border-color);border-inline-start:var(--sbb-border-width-1x) solid var(--sbb-card-badge-border-color);border-end-start-radius:var(--sbb-border-radius-4x)}@media(forced-colors:active){.sbb-card-badge-background:before{border:none}}`;
11
+ const C = k`:host{--sbb-card-badge-gap: var(--sbb-spacing-fixed-2x);--sbb-card-badge-color: var(--sbb-color-2-inverted);--sbb-card-badge-background-color: var(--sbb-background-color-3-inverted);--sbb-card-badge-border-color: transparent;display:block}:host([color=white]){--sbb-card-badge-color: var(--sbb-color-3);--sbb-card-badge-background-color: var(--sbb-background-color-1);--sbb-card-badge-border-color: var(--sbb-color-aluminium);--sbb-card-badge-border-color: light-dark( var(--sbb-color-aluminium), var(--sbb-color-anthracite) )}.sbb-card-badge-wrapper{display:flex;position:relative;height:fit-content;justify-content:end}@media(forced-colors:active){.sbb-card-badge-wrapper:after{content:"";display:block;position:absolute;inset:0;border-block-end:var(--sbb-border-width-1x) solid CanvasText}}.sbb-card-badge{position:relative;display:flex;inset-block-start:0;inset-inline-end:0;padding-inline:var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-3x)}.sbb-card-badge-content{--sbb-text-font-size: var(--sbb-text-font-size-xxs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);font-weight:700;position:relative;display:flex;align-items:center;gap:var(--sbb-card-badge-gap);color:var(--sbb-card-badge-color)}.sbb-card-badge-background{content:"";display:block;position:absolute;inset:0;background-color:var(--sbb-card-badge-background-color);border-end-start-radius:var(--sbb-border-radius-4x);margin-inline-end:calc(var(--sbb-spacing-fixed-3x) * -1);transform:skew(16deg)}:host(:dir(rtl)) .sbb-card-badge-background{transform:skew(-16deg)}.sbb-card-badge-background:before{content:"";display:block;position:absolute;inset:0;border-block-end:var(--sbb-border-width-1x) solid var(--sbb-card-badge-border-color);border-inline-start:var(--sbb-border-width-1x) solid var(--sbb-card-badge-border-color);border-end-start-radius:var(--sbb-border-radius-4x)}@media(forced-colors:active){.sbb-card-badge-background:before{border:none}}`;
12
12
  let L = (() => {
13
13
  var o, s;
14
- let e = [E("sbb-card-badge")], a, r = [], t, d = z(y), l, g = [], p = [];
15
- return s = class extends d {
14
+ let e = [E("sbb-card-badge")], a, r = [], t, l = z(_), d, g = [], p = [];
15
+ return s = class extends l {
16
16
  constructor() {
17
17
  super(...arguments);
18
18
  f(this, o);
@@ -32,7 +32,7 @@ let L = (() => {
32
32
  super.disconnectedCallback(), this._parentElement && this._parentElement.removeAttribute("data-has-card-badge"), this._parentElement = void 0;
33
33
  }
34
34
  render() {
35
- return _`
35
+ return y`
36
36
  <span class="sbb-card-badge-wrapper">
37
37
  <span class="sbb-card-badge">
38
38
  <span class="sbb-card-badge-background" aria-hidden="true"></span>
@@ -44,8 +44,8 @@ let L = (() => {
44
44
  `;
45
45
  }
46
46
  }, o = new WeakMap(), t = s, (() => {
47
- const b = typeof Symbol == "function" && Symbol.metadata ? Object.create(d[Symbol.metadata] ?? null) : void 0;
48
- l = [w({ reflect: !0 })], v(s, null, l, { kind: "accessor", name: "color", static: !1, private: !1, access: { has: (i) => "color" in i, get: (i) => i.color, set: (i, x) => {
47
+ const b = typeof Symbol == "function" && Symbol.metadata ? Object.create(l[Symbol.metadata] ?? null) : void 0;
48
+ d = [w({ reflect: !0 })], v(s, null, d, { kind: "accessor", name: "color", static: !1, private: !1, access: { has: (i) => "color" in i, get: (i) => i.color, set: (i, x) => {
49
49
  i.color = x;
50
50
  } }, metadata: b }, g, p), v(null, a = { value: t }, e, { kind: "class", name: t.name, metadata: b }, null, r), t = a.value, b && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: b });
51
51
  })(), s.role = "text", s.styles = [S, C], n(t, r), t;
@@ -1,5 +1,5 @@
1
1
  import { SbbButtonBaseElement } from '../../core/base-elements.js';
2
- declare const SbbCardButtonElement_base: import('../../core/mixins.js').AbstractConstructor<import('../common.js').SbbCardActionCommonElementMixinType> & typeof SbbButtonBaseElement;
2
+ declare const SbbCardButtonElement_base: import('../../core/mixins.ts').AbstractConstructor<import('../common.js').SbbCardActionCommonElementMixinType> & typeof SbbButtonBaseElement;
3
3
  /**
4
4
  * It turns the `sbb-card` into a button element.
5
5
  *
@@ -1,5 +1,5 @@
1
1
  import { SbbLinkBaseElement } from '../../core/base-elements.js';
2
- declare const SbbCardLinkElement_base: import('../../core/mixins.js').AbstractConstructor<import('../common.js').SbbCardActionCommonElementMixinType> & typeof SbbLinkBaseElement;
2
+ declare const SbbCardLinkElement_base: import('../../core/mixins.ts').AbstractConstructor<import('../common.js').SbbCardActionCommonElementMixinType> & typeof SbbLinkBaseElement;
3
3
  /**
4
4
  * It turns the `sbb-card` into a link element.
5
5
  *
@@ -21,7 +21,8 @@ export declare class SbbCarouselElement extends SbbCarouselElement_base {
21
21
  firstUpdated(_changedProperties: PropertyValues): void;
22
22
  disconnectedCallback(): void;
23
23
  private _handleSlotchange;
24
- private _scrollAtPageChange;
24
+ private _setupPaginator;
25
+ private _scrollAtPaginatorChange;
25
26
  protected render(): TemplateResult;
26
27
  }
27
28
  declare global {
@@ -1 +1 @@
1
- {"version":3,"file":"carousel.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/carousel/carousel/carousel.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAoBvC,OAAO,6BAA6B,CAAC;;AAIrC;;;;GAIG;AACH,qBAEM,kBAAmB,SAAQ,uBAAoC;IACnE,OAAuB,MAAM,EAAE,cAAc,CAA4B;IAEzE;;OAEG;IACH,SAEgB,MAAM,EAAE,OAAO,CAAS;IAExC,OAAO,CAAC,UAAU,CAA2C;IAC7D,OAAO,CAAC,gBAAgB,CAAgC;IACxD,OAAO,CAAC,SAAS,CAAmC;IACpD,OAAO,CAAC,8BAA8B,CAAM;;IAwB5B,iBAAiB,IAAI,IAAI;IAOzB,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAQtD,oBAAoB,IAAI,IAAI;IAK5C,OAAO,CAAC,iBAAiB;IA4BzB,OAAO,CAAC,mBAAmB;cAoBR,MAAM,IAAI,cAAc;CAU5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,cAAc,EAAE,kBAAkB,CAAC;KACpC;CACF"}
1
+ {"version":3,"file":"carousel.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/carousel/carousel/carousel.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAoBvC,OAAO,6BAA6B,CAAC;;AAIrC;;;;GAIG;AACH,qBAEM,kBAAmB,SAAQ,uBAAoC;IACnE,OAAuB,MAAM,EAAE,cAAc,CAA4B;IAEzE;;OAEG;IACH,SAEgB,MAAM,EAAE,OAAO,CAAS;IAExC,OAAO,CAAC,UAAU,CAA2C;IAC7D,OAAO,CAAC,gBAAgB,CAAgC;IACxD,OAAO,CAAC,SAAS,CAAmC;IACpD,OAAO,CAAC,8BAA8B,CAAM;;IAwB5B,iBAAiB,IAAI,IAAI;IASzB,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAQtD,oBAAoB,IAAI,IAAI;IAK5C,OAAO,CAAC,iBAAiB;IAyBzB,OAAO,CAAC,eAAe;IAgBvB,OAAO,CAAC,wBAAwB;cAwBb,MAAM,IAAI,cAAc;CAU5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,cAAc,EAAE,kBAAkB,CAAC;KACpC;CACF"}
@@ -1,26 +1,26 @@
1
- var f = (t) => {
1
+ var m = (t) => {
2
2
  throw TypeError(t);
3
3
  };
4
- var p = (t, a, r) => a.has(t) || f("Cannot " + r);
5
- var _ = (t, a, r) => (p(t, a, "read from private field"), r ? r.call(t) : a.get(t)), y = (t, a, r) => a.has(t) ? f("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(t) : a.set(t, r), d = (t, a, r, i) => (p(t, a, "write to private field"), i ? i.call(t, r) : a.set(t, r), r);
4
+ var _ = (t, a, r) => a.has(t) || m("Cannot " + r);
5
+ var f = (t, a, r) => (_(t, a, "read from private field"), r ? r.call(t) : a.get(t)), y = (t, a, r) => a.has(t) ? m("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(t) : a.set(t, r), d = (t, a, r, s) => (_(t, a, "write to private field"), s ? s.call(t, r) : a.set(t, r), r);
6
6
  import { __esDecorate as v, __runInitializers as b } from "tslib";
7
- import { css as x, LitElement as w, html as S } from "lit";
8
- import { customElement as P, property as C } from "lit/decorators.js";
7
+ import { css as x, LitElement as w, html as P } from "lit";
8
+ import { customElement as S, property as C } from "lit/decorators.js";
9
9
  import { SbbLanguageController as I } from "../../core/controllers/language-controller.js";
10
- import { forceType as L } from "../../core/decorators.js";
11
- import { i18nNextSlide as k, i18nPreviousSlide as q, i18nSlide as A, i18nCarouselArrowsNavigationHint as E } from "../../core/i18n/i18n.js";
10
+ import { forceType as k } from "../../core/decorators.js";
11
+ import { i18nNextSlide as L, i18nPreviousSlide as q, i18nSlide as A, i18nCarouselArrowsNavigationHint as E } from "../../core/i18n/i18n.js";
12
12
  import { SbbElementInternalsMixin as B } from "../../core/mixins.js";
13
13
  import { boxSizingStyles as z } from "../../core/styles.js";
14
14
  import "../../screen-reader-only.js";
15
15
  const N = x`:host{--sbb-carousel-border-radius: var(--sbb-border-radius-4x);--sbb-carousel-background-color: var(--sbb-background-color-1);display:inline-block;overflow:hidden;border-radius:var(--sbb-carousel-border-radius) var(--sbb-carousel-border-radius) 0 0}:host([shadow]){box-shadow:var(--sbb-box-shadow-level-9-hard);border-radius:var(--sbb-carousel-border-radius)}:host(:not([shadow])) ::slotted(sbb-carousel-list){--sbb-carousel-inherit-border-radius: var(--sbb-carousel-border-radius)}.sbb-carousel{display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:var(--sbb-carousel-background-color)}::slotted(sbb-compact-paginator){padding:var(--sbb-spacing-responsive-xs)}`;
16
16
  let G = (() => {
17
17
  var n, o;
18
- let t = [P("sbb-carousel")], a, r = [], i, u = B(w), h, g = [], m = [];
18
+ let t = [S("sbb-carousel")], a, r = [], s, u = B(w), h, g = [], p = [];
19
19
  return o = class extends u {
20
20
  constructor() {
21
21
  super();
22
22
  y(this, n);
23
- d(this, n, b(this, g, !1)), this._paginator = (b(this, m), null), this._abortController = null, this._language = new I(this), this._requestedPageIndexByPaginator = -1, this.addEventListener?.("show", (e) => {
23
+ d(this, n, b(this, g, !1)), this._paginator = (b(this, p), null), this._abortController = null, this._language = new I(this), this._requestedPageIndexByPaginator = -1, this.addEventListener?.("show", (e) => {
24
24
  this._requestedPageIndexByPaginator !== -1 && this._requestedPageIndexByPaginator !== e.detail.index || (this._paginator && e.detail.index !== this._paginator.pageIndex && (this._paginator.pageIndex = e.detail.index), this._requestedPageIndexByPaginator = -1);
25
25
  });
26
26
  }
@@ -28,13 +28,13 @@ let G = (() => {
28
28
  * Used to display a box-shadow around the component.
29
29
  */
30
30
  get shadow() {
31
- return _(this, n);
31
+ return f(this, n);
32
32
  }
33
33
  set shadow(e) {
34
34
  d(this, n, e);
35
35
  }
36
36
  connectedCallback() {
37
- super.connectedCallback(), this.internals.role = "region", this.internals.ariaLabel = "carousel";
37
+ super.connectedCallback(), this.internals.role = "region", this.internals.ariaLabel = "carousel", this._setupPaginator();
38
38
  }
39
39
  firstUpdated(e) {
40
40
  super.firstUpdated(e), this.internals.ariaDescribedByElements = [
@@ -45,24 +45,29 @@ let G = (() => {
45
45
  super.disconnectedCallback(), this._abortController?.abort();
46
46
  }
47
47
  _handleSlotchange() {
48
- const e = Array.from(this.children).find((l) => l.localName === "sbb-compact-paginator"), s = Array.from(this.children).find((l) => l.localName === "sbb-carousel-list");
49
- if (!e || !s)
48
+ const e = Array.from(this.children).find((c) => c.localName === "sbb-compact-paginator"), i = Array.from(this.children).find((c) => c.localName === "sbb-carousel-list");
49
+ if (!e || !i)
50
50
  return;
51
- const c = s.querySelectorAll("sbb-carousel-item");
52
- c && c.length > 0 && (e.length = c.length, e.pageSize = 1), e.accessibilityNextPageLabel ||= k[this._language.current], e.accessibilityPreviousPageLabel ||= q[this._language.current], e.accessibilityPageLabel ||= A[this._language.current], e !== this._paginator && (this._abortController = new AbortController(), e.addEventListener("page", (l) => this._scrollAtPageChange(l), {
51
+ const l = i.querySelectorAll("sbb-carousel-item");
52
+ l && l.length > 0 && (e.length = l.length, e.pageSize = 1), e.accessibilityNextPageLabel ||= L[this._language.current], e.accessibilityPreviousPageLabel ||= q[this._language.current], e.accessibilityPageLabel ||= A[this._language.current], e !== this._paginator && (this._paginator = e, this._setupPaginator());
53
+ }
54
+ _setupPaginator() {
55
+ this._abortController?.abort(), this._paginator && (this._abortController = new AbortController(), this._paginator.addEventListener("click", () => this._scrollAtPaginatorChange(), {
53
56
  signal: this._abortController.signal
54
- }), this._paginator = e);
57
+ }));
55
58
  }
56
- _scrollAtPageChange(e) {
57
- this._requestedPageIndexByPaginator = e.detail.pageIndex;
58
- const s = this.querySelector("sbb-carousel-list");
59
- if (s) {
60
- const l = s.querySelectorAll("sbb-carousel-item")[e.detail.pageIndex].offsetLeft - this.offsetLeft;
61
- (s.clientWidth <= 100 || Math.abs(s.scrollLeft - l) > 50) && s.scrollTo({ left: l });
59
+ _scrollAtPaginatorChange() {
60
+ if (!this._paginator)
61
+ return;
62
+ this._requestedPageIndexByPaginator = this._paginator.pageIndex;
63
+ const e = this.querySelector("sbb-carousel-list");
64
+ if (e) {
65
+ const l = e.querySelectorAll("sbb-carousel-item")[this._paginator.pageIndex].offsetLeft - this.offsetLeft;
66
+ (e.clientWidth <= 100 || Math.abs(e.scrollLeft - l) > 50) && e.scrollTo({ left: l });
62
67
  }
63
68
  }
64
69
  render() {
65
- return S`
70
+ return P`
66
71
  <div class="sbb-carousel">
67
72
  <sbb-screen-reader-only id="sbb-carousel-arrows-navigation-hint"
68
73
  >${E[this._language.current]}</sbb-screen-reader-only
@@ -71,12 +76,12 @@ let G = (() => {
71
76
  </div>
72
77
  `;
73
78
  }
74
- }, n = new WeakMap(), i = o, (() => {
79
+ }, n = new WeakMap(), s = o, (() => {
75
80
  const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(u[Symbol.metadata] ?? null) : void 0;
76
- h = [L(), C({ reflect: !0, type: Boolean })], v(o, null, h, { kind: "accessor", name: "shadow", static: !1, private: !1, access: { has: (s) => "shadow" in s, get: (s) => s.shadow, set: (s, c) => {
77
- s.shadow = c;
78
- } }, metadata: e }, g, m), v(null, a = { value: i }, t, { kind: "class", name: i.name, metadata: e }, null, r), i = a.value, e && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
79
- })(), o.styles = [z, N], b(i, r), i;
81
+ h = [k(), C({ reflect: !0, type: Boolean })], v(o, null, h, { kind: "accessor", name: "shadow", static: !1, private: !1, access: { has: (i) => "shadow" in i, get: (i) => i.shadow, set: (i, l) => {
82
+ i.shadow = l;
83
+ } }, metadata: e }, g, p), v(null, a = { value: s }, t, { kind: "class", name: s.name, metadata: e }, null, r), s = a.value, e && Object.defineProperty(s, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
84
+ })(), o.styles = [z, N], b(s, r), s;
80
85
  })();
81
86
  export {
82
87
  G as SbbCarouselElement
@@ -12,7 +12,7 @@ export declare class SbbCarouselListElement extends SbbCarouselListElement_base
12
12
  private _observedCarouselItems;
13
13
  private _beforeShowObserver;
14
14
  private _showObserver;
15
- private _firstVisibleIntersectionController;
15
+ private _resizeObserverController;
16
16
  constructor();
17
17
  /** Gets the slotted items. */
18
18
  private _carouselItems;
@@ -1 +1 @@
1
- {"version":3,"file":"carousel-list.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/carousel/carousel-list/carousel-list.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,cAAc,EAAkB,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;;AAc3F;;;;GAIG;AACH,qBAEM,sBAAuB,SAAQ,2BAAoC;IACvE,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,OAAO,CAAC,aAAa,CAAK;IAC1B,OAAO,CAAC,SAAS,CAAmC;IACpD,OAAO,CAAC,sBAAsB,CAAgC;IAE9D,OAAO,CAAC,mBAAmB,CAgBxB;IAEH,OAAO,CAAC,aAAa,CAwBlB;IAGH,OAAO,CAAC,mCAAmC,CAYxC;;IAQH,8BAA8B;IAC9B,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,iBAAiB;IAoBzB;;;OAGG;IACH,OAAO,CAAC,eAAe;IAwBvB,OAAO,CAAC,UAAU;IAwBF,iBAAiB,IAAI,IAAI;cAOtB,MAAM,IAAI,cAAc;CAG5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,mBAAmB,EAAE,sBAAsB,CAAC;KAC7C;CACF"}
1
+ {"version":3,"file":"carousel-list.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/carousel/carousel-list/carousel-list.component.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,cAAc,EAAQ,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;;AAcjF;;;;GAIG;AACH,qBAEM,sBAAuB,SAAQ,2BAAoC;IACvE,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,OAAO,CAAC,aAAa,CAAK;IAC1B,OAAO,CAAC,SAAS,CAAmC;IACpD,OAAO,CAAC,sBAAsB,CAAgC;IAE9D,OAAO,CAAC,mBAAmB,CAgBxB;IAEH,OAAO,CAAC,aAAa,CAwBlB;IAEH,OAAO,CAAC,yBAAyB,CAG9B;;IAQH,8BAA8B;IAC9B,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,iBAAiB;IAoBzB;;;OAGG;IACH,OAAO,CAAC,eAAe;IAyBvB,OAAO,CAAC,UAAU;IAwBF,iBAAiB,IAAI,IAAI;cAOtB,MAAM,IAAI,cAAc;CAG5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,mBAAmB,EAAE,sBAAsB,CAAC;KAC7C;CACF"}
@@ -1,18 +1,19 @@
1
1
  import { __esDecorate as b, __runInitializers as d } from "tslib";
2
- import { IntersectionController as n } from "@lit-labs/observers/intersection-controller.js";
3
- import { css as f, LitElement as m, isServer as _, html as v } from "lit";
2
+ import { IntersectionController as c } from "@lit-labs/observers/intersection-controller.js";
3
+ import { ResizeController as m } from "@lit-labs/observers/resize-controller.js";
4
+ import { css as f, LitElement as _, html as v } from "lit";
4
5
  import { customElement as g } from "lit/decorators.js";
5
6
  import { isArrowKeyPressed as I } from "../../core/a11y.js";
6
- import { SbbLanguageController as w } from "../../core/controllers.js";
7
- import { i18nCarouselItemAriaLabel as p } from "../../core/i18n.js";
7
+ import { SbbLanguageController as p } from "../../core/controllers.js";
8
+ import { i18nCarouselItemAriaLabel as w } from "../../core/i18n.js";
8
9
  import { SbbElementInternalsMixin as y } from "../../core/mixins.js";
9
10
  const x = f`:host{--sbb-carousel-list-border-radius: var(--sbb-border-radius-4x);display:flex;height:var(--sbb-carousel-list-height);width:var(--sbb-carousel-list-width, 0);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;outline:none;border-radius:var(--sbb-carousel-inherit-border-radius)}:host(:focus-visible):before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);content:"";position:absolute;height:inherit;width:inherit;border-start-start-radius:var(--sbb-carousel-list-border-radius);border-start-end-radius:var(--sbb-carousel-list-border-radius);border-end-start-radius:var(--sbb-carousel-inherit-border-radius);border-end-end-radius:var(--sbb-carousel-inherit-border-radius)}`;
10
11
  let H = (() => {
11
12
  var i;
12
- let u = [g("sbb-carousel-list")], a, l = [], s, c = y(m);
13
- return i = class extends c {
13
+ let u = [g("sbb-carousel-list")], n, a = [], s, l = y(_);
14
+ return i = class extends l {
14
15
  constructor() {
15
- super(), this._currentIndex = 0, this._language = new w(this), this._observedCarouselItems = [], this._beforeShowObserver = new n(this, {
16
+ super(), this._currentIndex = 0, this._language = new p(this), this._observedCarouselItems = [], this._beforeShowObserver = new c(this, {
16
17
  target: null,
17
18
  callback: (e) => {
18
19
  e.filter((r) => r.isIntersecting && r.target !== this).forEach((r) => {
@@ -25,7 +26,7 @@ let H = (() => {
25
26
  });
26
27
  },
27
28
  config: { threshold: 0.01, root: this, rootMargin: "100% 0% 100% 0%" }
28
- }), this._showObserver = new n(this, {
29
+ }), this._showObserver = new c(this, {
29
30
  target: null,
30
31
  callback: (e) => {
31
32
  for (const t of e) {
@@ -40,15 +41,9 @@ let H = (() => {
40
41
  }
41
42
  },
42
43
  config: { threshold: 0.99, root: this, rootMargin: "100% 0% 100% 0%" }
43
- }), this._firstVisibleIntersectionController = new n(this, {
44
- callback: (e) => {
45
- e.forEach((t) => {
46
- t.intersectionRatio > 0 && (this._readDimensions(), this._firstVisibleIntersectionController.unobserve(this));
47
- });
48
- },
49
- config: {
50
- root: _ ? null : document?.documentElement
51
- }
44
+ }), this._resizeObserverController = new m(this, {
45
+ skipInitial: !0,
46
+ callback: () => this._readDimensions()
52
47
  }), this.addEventListener?.("keydown", (e) => this._onKeyDown(e));
53
48
  }
54
49
  /** Gets the slotted items. */
@@ -61,7 +56,7 @@ let H = (() => {
61
56
  });
62
57
  const e = this._carouselItems();
63
58
  e.forEach((t, r) => {
64
- t.ariaLabel ||= p(r + 1, e.length)[this._language.current], t.ariaHidden = r === this._currentIndex ? null : "true";
59
+ t.ariaLabel ||= w(r + 1, e.length)[this._language.current], t.ariaHidden = r === this._currentIndex ? null : "true";
65
60
  }), this._readDimensions();
66
61
  }
67
62
  /**
@@ -75,7 +70,7 @@ let H = (() => {
75
70
  const t = e[0];
76
71
  t.clientHeight > 0 && this.style.setProperty("--sbb-carousel-list-height", `${t.clientHeight}px`), t.clientWidth > 0 && (this.style.setProperty("--sbb-carousel-list-width", `${t.clientWidth}px`), e.forEach((r) => {
77
72
  this._beforeShowObserver.observe(r), this._showObserver.observe(r);
78
- }), this._observedCarouselItems = e);
73
+ }), this._observedCarouselItems = e, this._resizeObserverController.unobserve(this));
79
74
  }
80
75
  _onKeyDown(e) {
81
76
  if (!I(e))
@@ -94,9 +89,9 @@ let H = (() => {
94
89
  return v`<slot @slotchange=${this._handleSlotchange}></slot>`;
95
90
  }
96
91
  }, s = i, (() => {
97
- const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(c[Symbol.metadata] ?? null) : void 0;
98
- b(null, a = { value: s }, u, { kind: "class", name: s.name, metadata: e }, null, l), s = a.value, e && Object.defineProperty(s, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
99
- })(), i.styles = x, d(s, l), s;
92
+ const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(l[Symbol.metadata] ?? null) : void 0;
93
+ b(null, n = { value: s }, u, { kind: "class", name: s.name, metadata: e }, null, a), s = n.value, e && Object.defineProperty(s, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
94
+ })(), i.styles = x, d(s, a), s;
100
95
  })();
101
96
  export {
102
97
  H as SbbCarouselListElement
@@ -1,7 +1,7 @@
1
1
  import { LitElement, CSSResultGroup, TemplateResult } from 'lit';
2
2
  import { SbbIconPlacement } from '../../core/interfaces.js';
3
3
  import { SbbCheckboxSize } from '../common.js';
4
- declare const SbbCheckboxElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../icon.js').SbbIconNameMixinType> & import('../../core/mixins.js').Constructor<import('../common.js').SbbCheckboxCommonElementMixinType> & typeof LitElement;
4
+ declare const SbbCheckboxElement_base: import('../../core/mixins.ts').AbstractConstructor<import('../../icon.js').SbbIconNameMixinType> & import('../../core/mixins.ts').Constructor<import('../common.js').SbbCheckboxCommonElementMixinType> & typeof LitElement;
5
5
  /**
6
6
  * It displays a checkbox enhanced with the SBB Design.
7
7
  *
@@ -1,5 +1,5 @@
1
1
  import { SbbCheckboxCommonElementMixin as m } from "./common/checkbox-common.js";
2
- import { c as b } from "../checkbox-common-BGA_q9nc.js";
2
+ import { c as b } from "../checkbox-common-CrwfdL9V.js";
3
3
  export {
4
4
  m as SbbCheckboxCommonElementMixin,
5
5
  b as checkboxCommonStyle
@@ -0,0 +1,5 @@
1
+ import { css as e } from "lit";
2
+ const t = e`@charset "UTF-8";:host{--sbb-checkbox-dimension: var(--sbb-size-icon-ui-small);--sbb-checkbox-label-color: var(--sbb-color-color-3);--sbb-checkbox-label-icon-color: var(--sbb-checkbox-label-color);--sbb-checkbox-cursor: var(--sbb-cursor-pointer)}:host(:disabled){--sbb-checkbox-cursor: var(--sbb-cursor-default);--sbb-checkbox-label-color: var(--sbb-color-granite);--sbb-checkbox-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-aluminium))}.sbb-checkbox-wrapper{display:flex}.sbb-checkbox-wrapper:before{content:"​";-webkit-user-select:none;user-select:none;width:0;height:0}.sbb-checkbox{--sbb-text-font-size: var(--sbb-text-font-size-m);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);position:relative;display:block;width:100%;cursor:var(--sbb-checkbox-cursor);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}:host([size=s]) .sbb-checkbox{--sbb-text-font-size: var(--sbb-text-font-size-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size)}:host([size=xs]) .sbb-checkbox{--sbb-text-font-size: var(--sbb-text-font-size-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size)}.sbb-checkbox__inner{display:flex;align-items:start;gap:var(--sbb-spacing-fixed-2x)}.sbb-checkbox__label{display:flex;flex-grow:1;color:var(--sbb-checkbox-label-color);line-height:max(1em * var(--sbb-typo-line-height-text),var(--sbb-checkbox-dimension))}.sbb-checkbox__aligner{display:flex;align-items:center;height:calc(1em * var(--sbb-typo-line-height-text))}`;
3
+ export {
4
+ t as c
5
+ };
package/checkbox.js CHANGED
@@ -2,7 +2,7 @@ import { SbbCheckboxElement as b } from "./checkbox/checkbox/checkbox.component.
2
2
  import { SbbCheckboxGroupElement as r } from "./checkbox/checkbox-group/checkbox-group.component.js";
3
3
  import { SbbCheckboxPanelElement as t } from "./checkbox/checkbox-panel/checkbox-panel.component.js";
4
4
  import { SbbCheckboxCommonElementMixin as c } from "./checkbox/common/checkbox-common.js";
5
- import { c as p } from "./checkbox-common-BGA_q9nc.js";
5
+ import { c as p } from "./checkbox-common-CrwfdL9V.js";
6
6
  export {
7
7
  c as SbbCheckboxCommonElementMixin,
8
8
  b as SbbCheckboxElement,