@sbb-esta/lyne-elements-dev 5.0.0-next.3-dev.1779781429 → 5.0.0-next.3-dev.1779813787

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 (162) hide show
  1. package/_index.scss +65 -3
  2. package/alert/{alert/alert.global.scss → _alert.global.scss} +9 -7
  3. package/badge/{badge.global.scss → _badge.global.scss} +4 -2
  4. package/breadcrumb/{breadcrumb-group/breadcrumb-group.global.scss → _breadcrumb.global.scss} +11 -1
  5. package/button/{common/button-common.global.scss → _button.global.scss} +43 -2
  6. package/calendar/{calendar/calendar.global.scss → _calendar.global.scss} +20 -4
  7. package/card/{card.library.global.scss → _card.global.scss} +29 -5
  8. package/carousel/{carousel/carousel.global.scss → _carousel.global.scss} +2 -1
  9. package/carousel/carousel-list/carousel-list.component.js +1 -1
  10. package/{carousel-list.component-7mbfkw4K.js → carousel-list.component-DAPO_Oce.js} +1 -1
  11. package/carousel.js +1 -1
  12. package/carousel.pure.js +1 -1
  13. package/checkbox/{common/checkbox-common.global.scss → _checkbox.global.scss} +5 -1
  14. package/chip/{chip-group/chip-group.global.scss → _chip.global.scss} +12 -2
  15. package/container/{sticky-bar/sticky-bar.global.scss → _container.global.scss} +16 -1
  16. package/core/base-elements/{selection-group-base-element.global.scss → _selection-group-base-element.global.scss} +6 -2
  17. package/core/styles/_index.scss +3 -3
  18. package/core/styles/_theme.scss +359 -10
  19. package/core/styles/features/font-face.scss +3 -0
  20. package/core/styles/features/layout.private.scss +1 -1
  21. package/core/styles/features/typography.private.scss +3 -3
  22. package/core/styles/features/typography.scss +10 -2
  23. package/core/styles/mixins/_core.scss +69 -0
  24. package/core/styles/mixins/_layout.scss +1 -1
  25. package/core/styles/mixins/_lists.scss +2 -2
  26. package/core/styles/mixins/_pearl-chain-bullet.scss +1 -1
  27. package/core/styles/mixins/_scrollbar.scss +1 -1
  28. package/core/styles/mixins/_typo.scss +0 -19
  29. package/development/block-link-common-C0XzZIvS.js +1 -1
  30. package/development/breadcrumb.component-B3XsV_Aq.js +1 -1
  31. package/development/card.component-CVAgqDNK.js +1 -1
  32. package/development/carousel/carousel-list/carousel-list.component.js +1 -1
  33. package/development/carousel-list.component-pJBqbfi9.js +126 -0
  34. package/development/carousel.js +1 -1
  35. package/development/carousel.pure.js +1 -1
  36. package/development/inline-link-common-CXYyREBi.js +1 -1
  37. package/development/link-common-DWTP-lFX.js +1 -1
  38. package/development/selection-group-base-element-govDKjsE.js +1 -1
  39. package/development/styles-BTV2MyrZ.js +1 -1
  40. package/development/tab-label.component-BbQu5sA-.js +233 -0
  41. package/development/tabs/tab-label/tab-label.component.js +1 -1
  42. package/development/tabs.js +1 -1
  43. package/development/tabs.pure.js +1 -1
  44. package/dialog/_dialog.global.scss +77 -0
  45. package/expansion-panel/{expansion-panel-header/expansion-panel-header.global.scss → _expansion-panel.global.scss} +27 -2
  46. package/file-selector/{common/file-selector.global.scss → _file-selector.global.scss} +1 -1
  47. package/flip-card/{flip-card/flip-card.global.scss → _flip-card.global.scss} +15 -2
  48. package/footer/{footer.global.scss → _footer.global.scss} +1 -1
  49. package/form-field/{form-field/form-field.global.scss → _form-field.global.scss} +6 -3
  50. package/header/{header/header.global.scss → _header.global.scss} +41 -2
  51. package/icon-sidebar/{icon-sidebar/icon-sidebar.global.scss → _icon-sidebar.global.scss} +1 -1
  52. package/lead-container/{lead-container.global.scss → _lead-container.global.scss} +1 -1
  53. package/lean-off-brand-theme.css +351 -526
  54. package/lean-safety-theme.css +351 -526
  55. package/lean-theme.css +351 -526
  56. package/link/{link.library.global.scss → _link.global.scss} +18 -4
  57. package/loading-indicator-circle/{loading-indicator-circle.global.scss → _loading-indicator-circle.global.scss} +1 -1
  58. package/logo/{logo.global.scss → _logo.global.scss} +1 -1
  59. package/map-container/{map-container.global.scss → _map-container.global.scss} +1 -1
  60. package/menu/{menu/menu.global.scss → _menu.global.scss} +14 -6
  61. package/mini-calendar/{mini-calendar-month/mini-calendar-month.global.scss → _mini-calendar.global.scss} +4 -1
  62. package/navigation/_navigation.global.scss +78 -0
  63. package/notification/{notification.global.scss → _notification.global.scss} +1 -1
  64. package/off-brand-theme.css +349 -524
  65. package/option/{option/option.global.scss → _option.global.scss} +30 -1
  66. package/package.json +2 -2
  67. package/paginator/_paginator.global.scss +21 -0
  68. package/radio-button/{common/radio-button-common.global.scss → _radio-button.global.scss} +2 -2
  69. package/safety-theme.css +349 -524
  70. package/sidebar/{sidebar-container/sidebar-container.global.scss → _sidebar.global.scss} +20 -1
  71. package/signet/{signet.global.scss → _signet.global.scss} +1 -1
  72. package/slider/{slider.global.scss → _slider.global.scss} +1 -1
  73. package/standard-theme.css +349 -524
  74. package/stepper/{step-label/step-label.global.scss → _stepper.global.scss} +6 -2
  75. package/tab-label.component-C5HCrNFB.js +158 -0
  76. package/tabs/{common/tab-label-common.global.scss → _tabs.global.scss} +24 -1
  77. package/tabs/tab-label/tab-label.component.js +1 -1
  78. package/tabs.js +1 -1
  79. package/tabs.pure.js +1 -1
  80. package/tag/{tag/tag.global.scss → _tag.global.scss} +2 -2
  81. package/teaser/_teaser.global.scss +51 -0
  82. package/teaser-hero/{teaser-hero.global.scss → _teaser-hero.global.scss} +2 -0
  83. package/teaser-panel/{teaser-panel.global.scss → _teaser-panel.global.scss} +2 -2
  84. package/teaser-product/{common/teaser-product-common.global.scss → _teaser-product.global.scss} +4 -2
  85. package/time-input/{time-input.global.scss → _time-input.global.scss} +1 -1
  86. package/timetable-form/{timetable-form/timetable-form.global.scss → _timetable-form.global.scss} +11 -1
  87. package/title/{title.global.scss → _title.global.scss} +4 -0
  88. package/toggle/{toggle/toggle.global.scss → _toggle.global.scss} +6 -2
  89. package/toggle-check/{toggle-check.global.scss → _toggle-check.global.scss} +1 -1
  90. package/train/{train-wagon-common.global.scss → _train.global.scss} +24 -0
  91. package/visual-checkbox/{visual-checkbox.global.scss → _visual-checkbox.global.scss} +1 -1
  92. package/alert/alert-group/alert-group.global.scss +0 -8
  93. package/breadcrumb/breadcrumb/breadcrumb.global.scss +0 -16
  94. package/button/common/mini-button-common.global.scss +0 -18
  95. package/button/mini-button-group/mini-button-group.global.scss +0 -35
  96. package/calendar/common/calendar-cell-base-element.global.scss +0 -23
  97. package/card/card/card.global.scss +0 -22
  98. package/card/card-badge/card-badge.global.scss +0 -19
  99. package/checkbox/checkbox.global.scss +0 -10
  100. package/chip/chip/chip.global.scss +0 -16
  101. package/container/container/container.global.scss +0 -21
  102. package/core/styles/features/core.scss +0 -618
  103. package/development/carousel-list.component-BLY3JfDq.js +0 -126
  104. package/development/tab-label.component-QHzOZ28y.js +0 -233
  105. package/dialog/dialog/dialog.global.scss +0 -32
  106. package/dialog/dialog-close-button/dialog-close-button.global.scss +0 -35
  107. package/dialog/dialog-content/dialog-content.global.scss +0 -13
  108. package/dialog/dialog-title/dialog-title.global.scss +0 -13
  109. package/expansion-panel/expansion-panel/expansion-panel.global.scss +0 -21
  110. package/expansion-panel/expansion-panel-content/expansion-panel-content.global.scss +0 -16
  111. package/flip-card/flip-card-details/flip-card-details.global.scss +0 -7
  112. package/flip-card/flip-card-summary/flip-card-summary.global.scss +0 -17
  113. package/form-field/error/error.global.scss +0 -9
  114. package/header/common/header-action.global.scss +0 -41
  115. package/header/header-environment/header-environment.global.scss +0 -10
  116. package/link/common/block-link.global.scss +0 -15
  117. package/menu/common/menu-action.global.scss +0 -14
  118. package/mini-calendar/mini-calendar-day/mini-calendar-day.global.scss +0 -9
  119. package/navigation/common/navigation-action.global.scss +0 -11
  120. package/navigation/navigation/navigation.global.scss +0 -36
  121. package/navigation/navigation-list/navigation-list.global.scss +0 -10
  122. package/navigation/navigation-marker/navigation-marker.global.scss +0 -17
  123. package/navigation/navigation-section/navigation-section.global.scss +0 -34
  124. package/option/optgroup/optgroup.global.scss +0 -17
  125. package/option/option-hint/option-hint.global.scss +0 -17
  126. package/option/option-panel-common.global.scss +0 -11
  127. package/paginator/common/paginator-common.global.scss +0 -14
  128. package/paginator/compact-paginator/compact-paginator.global.scss +0 -9
  129. package/paginator/paginator/paginator.global.scss +0 -10
  130. package/sidebar/sidebar/sidebar.global.scss +0 -19
  131. package/sidebar/sidebar-close-button/sidebar-close-button.global.scss +0 -10
  132. package/stepper/stepper/stepper.global.scss +0 -10
  133. package/tab-label.component-BYssa8XI.js +0 -158
  134. package/tabs/common/tab-group-common.global.scss +0 -17
  135. package/tabs/tab-nav-bar/tab-nav-bar.global.scss +0 -10
  136. package/teaser/teaser.global.scss +0 -24
  137. package/timetable-form/timetable-form-details/timetable-form-details.global.scss +0 -12
  138. package/timetable-form/timetable-form-field/timetable-form-field.global.scss +0 -10
  139. package/title/title-common.global.scss +0 -7
  140. package/toggle/toggle-option/toggle-option.global.scss +0 -10
  141. package/train/train-blocked-passage/train-blocked-passage.global.scss +0 -16
  142. package/train/train-formation/train-formation.global.scss +0 -26
  143. /package/chip-label/{chip-label.global.scss → _chip-label.global.scss} +0 -0
  144. /package/clock/{clock.global.scss → _clock.global.scss} +0 -0
  145. /package/core/mixins/{panel-common.global.scss → _panel-common.global.scss} +0 -0
  146. /package/core/styles/{core/functions.scss → mixins/_functions.scss} +0 -0
  147. /package/core/styles/{core/mediaqueries.scss → mixins/_mediaqueries.scss} +0 -0
  148. /package/core/styles/{core → mixins}/node_modules_@sbb-esta_lyne-design-tokens_dist_scss_sbb-variables.scss +0 -0
  149. /package/core/styles/{features/node_modules_@sbb-esta_lyne-design-tokens_dist_scss_sbb-variables-as-css.scss → node_modules_@sbb-esta_lyne-design-tokens_dist_scss_sbb-variables-as-css.scss} +0 -0
  150. /package/divider/{divider.global.scss → _divider.global.scss} +0 -0
  151. /package/loading-indicator/{loading-indicator.global.scss → _loading-indicator.global.scss} +0 -0
  152. /package/message/{message.global.scss → _message.global.scss} +0 -0
  153. /package/overlay/{overlay.global.scss → _overlay.global.scss} +0 -0
  154. /package/popover/{popover.global.scss → _popover.global.scss} +0 -0
  155. /package/select/{select.global.scss → _select.global.scss} +0 -0
  156. /package/selection-action-panel/{selection-action-panel.global.scss → _selection-action-panel.global.scss} +0 -0
  157. /package/selection-expansion-panel/{selection-expansion-panel.global.scss → _selection-expansion-panel.global.scss} +0 -0
  158. /package/status/{status.global.scss → _status.global.scss} +0 -0
  159. /package/table/{table.global.scss → _table.global.scss} +0 -0
  160. /package/timetable-occupancy/{timetable-occupancy.global.scss → _timetable-occupancy.global.scss} +0 -0
  161. /package/toast/{toast.global.scss → _toast.global.scss} +0 -0
  162. /package/tooltip/{tooltip.global.scss → _tooltip.global.scss} +0 -0
@@ -1,15 +0,0 @@
1
- @use '../../core/styles' as sbb;
2
-
3
- $theme: 'standard' !default;
4
-
5
- @mixin base {
6
- --sbb-block-link-gap: var(--sbb-spacing-fixed-1x);
7
- --sbb-block-link-icon-size: var(--sbb-size-icon-ui-small);
8
- --sbb-block-link-font-size: #{sbb.theme-pattern-select(
9
- (
10
- 'standard': var(--sbb-text-font-size-s),
11
- 'lean': var(--sbb-text-font-size-xs),
12
- ),
13
- $theme
14
- )};
15
- }
@@ -1,14 +0,0 @@
1
- @use '../../core/styles' as sbb;
2
-
3
- $theme: 'standard' !default;
4
-
5
- @mixin base {
6
- --sbb-menu-action-border-radius: var(--sbb-border-radius-infinity);
7
- --sbb-menu-action-outer-horizontal-padding: var(--sbb-spacing-fixed-3x);
8
- --sbb-menu-action-outer-vertical-padding: var(--sbb-spacing-fixed-1x);
9
- --sbb-menu-action-gap: var(--sbb-spacing-fixed-2x);
10
- --sbb-menu-action-color: var(--sbb-color-2-inverted);
11
- --sbb-menu-action-content-padding-inline: var(--sbb-spacing-fixed-2x);
12
- --sbb-menu-action-content-padding-block: var(--sbb-spacing-fixed-1x);
13
- --sbb-menu-action-forced-color-border-color: CanvasText;
14
- }
@@ -1,9 +0,0 @@
1
- @use '../../core/styles' as sbb;
2
-
3
- $theme: 'standard' !default;
4
-
5
- @mixin base {
6
- --sbb-mini-calendar-day-animation-easing: var(--sbb-animation-easing);
7
- --sbb-mini-calendar-day-dimensions: #{sbb.px-to-rem-build(6)};
8
- --sbb-mini-calendar-day-scale: 1.333;
9
- }
@@ -1,11 +0,0 @@
1
- @use '../../core/styles' as sbb;
2
-
3
- $theme: 'standard' !default;
4
-
5
- @mixin base {
6
- --sbb-navigation-action-color: var(--sbb-color-4-negative);
7
- --sbb-navigation-action-icon-display: none;
8
- --sbb-navigation-action-font-size: var(--sbb-text-font-size-xl);
9
- --sbb-navigation-action-letter-spacing: var(--sbb-typo-letter-spacing-heading);
10
- --sbb-navigation-action-line-height: var(--sbb-typo-line-height-heading);
11
- }
@@ -1,36 +0,0 @@
1
- @use '../../core/styles' as sbb;
2
-
3
- $theme: 'standard' !default;
4
-
5
- @mixin base {
6
- --sbb-navigation-grid-column: 1 / -1;
7
- --sbb-navigation-animation-easing: ease-in;
8
- --sbb-navigation-padding-inline: var(--sbb-layout-base-offset-responsive);
9
- --sbb-navigation-padding-block-start: var(--sbb-spacing-responsive-l);
10
- --sbb-navigation-padding-block-end: var(--sbb-spacing-responsive-xl);
11
- --sbb-navigation-backdrop-color: color-mix(in srgb, var(--sbb-color-black) 70%, transparent);
12
- --sbb-navigation-backdrop-animation-name: backdrop-open;
13
- --sbb-navigation-background-color: var(--sbb-background-color-1-negative);
14
- --sbb-navigation-color: var(--sbb-color-1-negative);
15
- --sbb-navigation-list-margin-block-start: var(--sbb-spacing-responsive-xxl);
16
- --sbb-navigation-expanded-width: 100%;
17
- --sbb-navigation-inset: 0 auto auto 0;
18
- --sbb-navigation-translate: -100% 0;
19
- --sbb-navigation-content-gap: var(--sbb-spacing-responsive-xxl);
20
- --sbb-navigation-content-translate: 0;
21
- --sbb-navigation-width: 100%;
22
- --sbb-navigation-height: 100dvh;
23
- }
24
-
25
- @mixin base-breakpoint-large {
26
- --sbb-navigation-grid-column: 1 / 5;
27
- --sbb-navigation-padding-block-start: var(--sbb-spacing-responsive-xl);
28
- --sbb-navigation-padding-inline: var(--sbb-layout-base-offset-responsive) 0;
29
- --sbb-navigation-list-margin-block-start: var(--sbb-spacing-fixed-1x);
30
- --sbb-navigation-inline-start: calc(var(--sbb-layout-base-offset-responsive) * -1);
31
- }
32
-
33
- @mixin base-breakpoint-ultra {
34
- --sbb-navigation-grid-column: 1 / 6;
35
- --sbb-navigation-padding-block-start: var(--sbb-spacing-responsive-xxl);
36
- }
@@ -1,10 +0,0 @@
1
- @use '../../core/styles' as sbb;
2
-
3
- $theme: 'standard' !default;
4
-
5
- @mixin base {
6
- --sbb-navigation-list-font-size: var(--sbb-text-font-size-xxs);
7
- --sbb-navigation-list-gap: var(--sbb-spacing-fixed-2x);
8
- --sbb-navigation-list-margin-block: var(--sbb-spacing-fixed-1x);
9
- --sbb-navigation-list-padding-block-end: var(--sbb-spacing-fixed-2x);
10
- }
@@ -1,17 +0,0 @@
1
- @use '../../core/styles' as sbb;
2
-
3
- $theme: 'standard' !default;
4
-
5
- @mixin base {
6
- --sbb-navigation-action-gap: var(--sbb-spacing-responsive-xs);
7
- --sbb-navigation-marker-position-x: var(--sbb-spacing-fixed-1x);
8
- --sbb-navigation-marker-position-y: unset;
9
- --sbb-navigation-marker-width: #{sbb.px-to-rem-build(17)};
10
- --sbb-navigation-marker-border: var(--sbb-border-width-1x);
11
- --sbb-navigation-marker-padding-inline-start: var(--sbb-spacing-fixed-6x);
12
- --sbb-navigation-marker-typo-line-height: var(--sbb-typo-line-height-heading);
13
- --sbb-navigation-margin-inline-start: var(--sbb-spacing-fixed-3x);
14
- --sbb-navigation-marker-font-size: var(--sbb-text-font-size-xl);
15
- --sbb-navigation-marker-letter-spacing: var(--sbb-typo-letter-spacing-heading);
16
- --sbb-navigation-marker-line-height: var(--sbb-typo-line-height-heading);
17
- }
@@ -1,34 +0,0 @@
1
- @use '../../core/styles' as sbb;
2
-
3
- $theme: 'standard' !default;
4
-
5
- @mixin base {
6
- --sbb-navigation-section-column: 1 / -1;
7
- --sbb-navigation-section-position: fixed;
8
- --sbb-navigation-section-pointer-events: none;
9
- --sbb-navigation-section-animation-easing: ease-out;
10
- --sbb-navigation-section-padding-inline: var(--sbb-layout-base-offset-responsive);
11
- --sbb-navigation-section-padding-block: var(--sbb-spacing-responsive-l);
12
- --sbb-navigation-section-translate: 100%;
13
- --sbb-navigation-section-content-padding-inline-start: var(--sbb-spacing-fixed-12x);
14
- --sbb-navigation-section-width: 100dvw;
15
- --sbb-navigation-section-height: 100dvh;
16
- --sbb-navigation-section-font-size: var(--sbb-heading-font-size-4);
17
- }
18
-
19
- @mixin base-breakpoint-large {
20
- --sbb-navigation-section-column: 5 / 13;
21
- --sbb-navigation-section-padding-block: var(--sbb-spacing-responsive-xl);
22
- --sbb-navigation-section-padding-inline: var(--sbb-spacing-fixed-8x)
23
- var(--sbb-layout-base-offset-responsive);
24
- --sbb-navigation-section-position: relative;
25
- --sbb-navigation-section-translate: 0;
26
- --sbb-navigation-section-content-padding-inline-start: 0;
27
- --sbb-navigation-section-font-size: var(--sbb-heading-font-size-2);
28
- }
29
-
30
- @mixin base-breakpoint-ultra {
31
- --sbb-navigation-section-column: 6 / 17;
32
- --sbb-navigation-section-padding-block: var(--sbb-spacing-responsive-xxl)
33
- var(--sbb-spacing-responsive-l);
34
- }
@@ -1,17 +0,0 @@
1
- @use '../../core/styles' as sbb;
2
-
3
- $theme: 'standard' !default;
4
-
5
- @mixin base {
6
- --sbb-optgroup-label-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
7
- --sbb-optgroup-label-font-size: var(--sbb-text-font-size-xxs);
8
- --sbb-optgroup-label-padding-end: #{sbb.theme-pattern-select(
9
- (
10
- 'standard': var(--sbb-spacing-fixed-2x),
11
- 'lean': var(--sbb-spacing-fixed-1x),
12
- ),
13
- $theme
14
- )};
15
- --sbb-optgroup-label-padding-inline: var(--sbb-spacing-responsive-xxxs);
16
- --sbb-optgroup-divider-color: var(--sbb-divider-color);
17
- }
@@ -1,17 +0,0 @@
1
- @use '../../core/styles' as sbb;
2
-
3
- $theme: 'standard' !default;
4
-
5
- @mixin base {
6
- --sbb-option-hint-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
7
- --sbb-option-hint-column-gap: var(--sbb-spacing-responsive-xxxs);
8
- --sbb-option-hint-padding-block-end: #{sbb.theme-pattern-select(
9
- (
10
- 'standard': var(--sbb-spacing-fixed-2x),
11
- 'lean': 0 var(--sbb-spacing-fixed-1x),
12
- ),
13
- $theme
14
- )};
15
- --sbb-option-hint-padding-inline: var(--sbb-spacing-responsive-xxxs);
16
- --sbb-option-hint-font-size: var(--sbb-text-font-size-xxs);
17
- }
@@ -1,11 +0,0 @@
1
- $theme: 'standard' !default;
2
-
3
- @mixin base {
4
- --sbb-options-panel-border-radius: var(--sbb-border-radius-4x);
5
- --sbb-options-panel-animation-timing-function: ease;
6
- --sbb-options-panel-background-color: var(--sbb-background-color-2);
7
- --sbb-options-panel-divider-margin-block: var(--sbb-spacing-fixed-3x);
8
- --sbb-options-panel-box-shadow: var(--sbb-box-shadow-level-9-hard);
9
- --sbb-options-panel-margin-block-start: var(--sbb-spacing-fixed-2x);
10
- --sbb-options-panel-padding-block: var(--sbb-spacing-fixed-1x);
11
- }
@@ -1,14 +0,0 @@
1
- @use '../../core/styles' as sbb;
2
-
3
- $theme: 'standard' !default;
4
-
5
- @mixin base {
6
- --sbb-paginator-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
7
- --sbb-paginator-height: #{sbb.theme-pattern-select(
8
- (
9
- 'standard': var(--sbb-size-element-m),
10
- 'lean': var(--sbb-size-element-xs),
11
- ),
12
- $theme
13
- )};
14
- }
@@ -1,9 +0,0 @@
1
- @use '../../core/styles' as sbb;
2
-
3
- $theme: 'standard' !default;
4
-
5
- @mixin base {
6
- --sbb-compact-paginator-font-size: var(--sbb-text-font-size-m);
7
- --sbb-compact-paginator-gap: var(--sbb-spacing-fixed-5x);
8
- --sbb-compact-paginator-pages-gap: var(--sbb-spacing-fixed-2x);
9
- }
@@ -1,10 +0,0 @@
1
- @use '../../core/styles' as sbb;
2
-
3
- $theme: 'standard' !default;
4
-
5
- @mixin base {
6
- --sbb-paginator-page-border-width: 0;
7
- --sbb-paginator-page-cursor: var(--sbb-cursor-pointer);
8
- --sbb-paginator-animation-easing: var(--sbb-animation-easing);
9
- --sbb-paginator-font-size: var(--sbb-text-font-size-s);
10
- }
@@ -1,19 +0,0 @@
1
- @use '../../core/styles' as sbb;
2
-
3
- $theme: 'standard' !default;
4
-
5
- @mixin base {
6
- --sbb-sidebar-background-color: var(--sbb-background-color-1);
7
- --sbb-sidebar-title-padding-block: var(--sbb-spacing-fixed-3x);
8
- --sbb-sidebar-padding: var(--sbb-spacing-responsive-xs);
9
- --sbb-sidebar-border-radius: var(--sbb-border-radius-8x);
10
- --sbb-sidebar-margin: var(--sbb-spacing-fixed-3x);
11
- --sbb-sidebar-title-gap: var(--sbb-spacing-fixed-2x);
12
- }
13
-
14
- @mixin rules {
15
- // If there is a title, remove top spacing for the content
16
- sbb-sidebar:has(sbb-sidebar-title) {
17
- --_sbb-sidebar-padding-block-start: 0;
18
- }
19
- }
@@ -1,10 +0,0 @@
1
- @use '../../core/styles' as sbb;
2
-
3
- $theme: 'standard' !default;
4
-
5
- @mixin rules {
6
- // If there is no close button, avoid reserving any space for the button in the sidebar title
7
- sbb-sidebar:not(:has(sbb-sidebar-title)) sbb-sidebar-close-button {
8
- position: absolute;
9
- }
10
- }
@@ -1,10 +0,0 @@
1
- @use '../../core/styles' as sbb;
2
-
3
- $theme: 'standard' !default;
4
-
5
- @mixin base {
6
- --sbb-stepper-orientation: row;
7
- --sbb-stepper-border-width: var(--sbb-border-width-1x);
8
- --sbb-stepper-marker-width: var(--sbb-border-width-3x);
9
- --sbb-stepper-marker-color: var(--sbb-color-3);
10
- }
@@ -1,158 +0,0 @@
1
- import { __esDecorate as e, __runInitializers as t } from "tslib";
2
- import { unsafeCSS as n } from "lit";
3
- import { property as r } from "lit/decorators.js";
4
- import { SbbDisabledMixin as i, SbbElement as a, SbbPropertyWatcherController as o, forceType as s, omitEmptyConverter as c } from "./core.js";
5
- import { html as l, unsafeStatic as u } from "lit/static-html.js";
6
- import { SbbIconNameMixin as d } from "./icon.pure.js";
7
- import { tabLabelCommonStyles as f } from "./tabs/common/styles.js";
8
- import { SbbTabChangeEvent as p } from "./tabs/tab-group/tab-group.component.js";
9
- //#region src/elements/tabs/tab-label/tab-label.scss?inline
10
- var m = ":host{--sbb-tab-label-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-tab-label-outline-border-radius-internal: calc( var(--sbb-tab-label-outline-border-radius) - var(--sbb-focus-outline-offset) )}:host(:is(:is(:state(size-s),[state--size-s]),[size=s])){--sbb-tab-label-height: var(--sbb-size-element-xs);--sbb-tab-label-inline-padding: var(--sbb-spacing-responsive-xxxs);--sbb-tab-label-font-size: var(--sbb-text-font-size-s)}:host(:is(:is(:state(size-l),[state--size-l]),[size=l])){--sbb-tab-label-height: var(--sbb-size-element-m);--sbb-tab-label-inline-padding: var(--sbb-spacing-responsive-xs);--sbb-tab-label-font-size: var(--sbb-text-font-size-m)}:host(:is(:is(:state(size-xl),[state--size-xl]),[size=xl])){--sbb-tab-label-height: var(--sbb-size-element-m);--sbb-tab-label-inline-padding: var(--sbb-spacing-responsive-xs);--sbb-tab-label-font-size: var(--sbb-text-font-size-xl)}:host(sbb-tab-label),:host(sbb-tab-nav-bar) ::slotted(a){pointer-events:var(--sbb-tab-label-pointer-events, unset)}@media(forced-colors:active){:host(sbb-tab-label),:host(sbb-tab-nav-bar) ::slotted(a){--sbb-tab-label-color: ButtonText;--sbb-tab-label-amount-color: ButtonText}}:host(sbb-tab-nav-bar) ::slotted(a),:host(sbb-tab-label) .sbb-tab-label{position:relative;display:flex;align-items:center;gap:var(--sbb-tab-label-gap);color:var(--sbb-tab-label-color);margin:0;padding-inline:var(--sbb-tab-label-inline-padding);min-height:var(--sbb-tab-label-height);transition:color var(--sbb-tab-label-animation-duration) var(--sbb-tab-label-animation-easing);font-size:var(--sbb-tab-label-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);line-height:var(--sbb-typo-line-height-text);font-weight:var(--sbb-tab-label-font-weight);text-decoration:var(--sbb-tab-label-text-decoration)}:host(sbb-tab-nav-bar) ::slotted(a):after,:host(sbb-tab-label) .sbb-tab-label:after{position:absolute;content:\"\";inset-inline:0;inset-block-end:0;height:var(--sbb-tab-label-marker-thickness);background-color:var(--sbb-tab-label-color);scale:var(--sbb-tab-label-marker-scale, 0);transition-duration:var(--sbb-tab-label-animation-duration);transition-timing-function:var(--sbb-tab-label-animation-easing);transition-property:scale,background-color}:host(sbb-tab-nav-bar) .sbb-tab-nav-bar>[data-has-divider],:host(sbb-tab-label:is(:state(has-divider),[state--has-divider])){position:relative}:host(sbb-tab-nav-bar) .sbb-tab-nav-bar>[data-has-divider]:before,:host(sbb-tab-label:is(:state(has-divider),[state--has-divider])):before{content:\"\";position:absolute;inset-inline-start:0;inset-block-end:0;width:var(--sbb-tab-group-width);height:var(--sbb-border-width-1x);background-color:var(--sbb-tab-label-line-color)}:host(sbb-tab-nav-bar) ::slotted(a.sbb-disabled),:host(sbb-tab-label[disabled]){--sbb-tab-label-cursor: unset;--sbb-tab-label-pointer-events: none;--sbb-tab-label-text-decoration: line-through}@media(forced-colors:active){:host(sbb-tab-nav-bar) ::slotted(a.sbb-disabled),:host(sbb-tab-label[disabled]){--sbb-tab-label-color: GrayText;--sbb-tab-label-amount-color: GrayText}}:host(sbb-tab-nav-bar) ::slotted(a.sbb-active:not(.sbb-disabled)),:host(sbb-tab-label[active]:not([disabled])){--sbb-tab-label-color: var(--sbb-color-3);--sbb-tab-label-cursor: unset;--sbb-tab-label-pointer-events: none;--sbb-tab-label-marker-scale: 1}@media(forced-colors:active){:host(sbb-tab-nav-bar) ::slotted(a.sbb-active:not(.sbb-disabled)),:host(sbb-tab-label[active]:not([disabled])){--sbb-tab-label-color: ButtonText;--sbb-tab-label-amount-color: ButtonText}}@media(any-hover:hover){:host(sbb-tab-nav-bar) ::slotted(a:hover:not(.sbb-disabled)),:host(sbb-tab-label:hover:not([disabled])){--sbb-tab-label-marker-scale: 1}}:host(sbb-tab-nav-bar) ::slotted(a:active:not(.sbb-disabled)),:host(sbb-tab-label:active){--sbb-tab-label-color: var(--sbb-color-3)}@media(forced-colors:active){:host(sbb-tab-nav-bar) ::slotted(a:active:not(.sbb-disabled)),:host(sbb-tab-label:active){--sbb-tab-label-color: ButtonText;--sbb-tab-label-amount-color: ButtonText}}:host(sbb-tab-nav-bar) ::slotted(a:focus-visible),:host(sbb-tab-label:focus-visible) .sbb-tab-label{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-tab-label-outline-border-radius-internal)}:host{display:inline-block;max-width:100%;outline:none!important}.sbb-tab-label{cursor:var(--sbb-tab-label-cursor);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.sbb-tab-label__icon{display:flex;flex-shrink:0}:host(:not(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name]))) .sbb-tab-label__icon{display:none}.sbb-tab-label__text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(:not(:is(:state(slotted),[state--slotted]))) .sbb-tab-label__text{display:none}.sbb-tab-label__amount{margin:0;color:var(--sbb-tab-label-amount-color);font-weight:400;text-decoration:var(--sbb-tab-label-text-decoration)}:host(:not(:is(:state(slotted-amount),[state--slotted-amount]),[amount])) .sbb-tab-label__amount{display:none}", h = (() => {
11
- let h = i(d(a)), g, _ = [], v = [], y, b = [], x = [], S, C = [], w = [];
12
- return class extends h {
13
- static {
14
- let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(h[Symbol.metadata] ?? null) : void 0;
15
- g = [r()], y = [s(), r({
16
- reflect: !0,
17
- type: Boolean
18
- })], S = [s(), r({
19
- reflect: !0,
20
- converter: c
21
- })], e(this, null, g, {
22
- kind: "accessor",
23
- name: "level",
24
- static: !1,
25
- private: !1,
26
- access: {
27
- has: (e) => "level" in e,
28
- get: (e) => e.level,
29
- set: (e, t) => {
30
- e.level = t;
31
- }
32
- },
33
- metadata: t
34
- }, _, v), e(this, null, y, {
35
- kind: "accessor",
36
- name: "active",
37
- static: !1,
38
- private: !1,
39
- access: {
40
- has: (e) => "active" in e,
41
- get: (e) => e.active,
42
- set: (e, t) => {
43
- e.active = t;
44
- }
45
- },
46
- metadata: t
47
- }, b, x), e(this, null, S, {
48
- kind: "accessor",
49
- name: "amount",
50
- static: !1,
51
- private: !1,
52
- access: {
53
- has: (e) => "amount" in e,
54
- get: (e) => e.amount,
55
- set: (e, t) => {
56
- e.amount = t;
57
- }
58
- },
59
- metadata: t
60
- }, C, w), t && Object.defineProperty(this, Symbol.metadata, {
61
- enumerable: !0,
62
- configurable: !0,
63
- writable: !0,
64
- value: t
65
- });
66
- }
67
- static {
68
- this.elementName = "sbb-tab-label";
69
- }
70
- static {
71
- this.role = "tab";
72
- }
73
- static {
74
- this.styles = [f, n(m)];
75
- }
76
- #e;
77
- get level() {
78
- return this.#e;
79
- }
80
- set level(e) {
81
- this.#e = e;
82
- }
83
- #t;
84
- get active() {
85
- return this.#t;
86
- }
87
- set active(e) {
88
- this.#t = e;
89
- }
90
- #n;
91
- get amount() {
92
- return this.#n;
93
- }
94
- set amount(e) {
95
- this.#n = e;
96
- }
97
- get tab() {
98
- return this.nextElementSibling?.localName === "sbb-tab" ? this.nextElementSibling : null;
99
- }
100
- get group() {
101
- return this.closest("sbb-tab-group");
102
- }
103
- constructor() {
104
- super(), this._selected = !1, this._previousSize = null, this.#e = t(this, _, "1"), this.#t = (t(this, v), t(this, b, !1)), this.#n = (t(this, x), t(this, C, "")), t(this, w), this.addEventListener("click", () => this.activate()), this.addController(new o(this, () => this.group, { size: (e) => {
105
- this._previousSize && this.internals.states.delete(`size-${this._previousSize}`), this._previousSize = e.size ?? null, this._previousSize && this.internals.states.add(`size-${this._previousSize}`);
106
- } }));
107
- }
108
- connectedCallback() {
109
- super.connectedCallback(), this.slot = "tab-bar", this.tabIndex = this.active ? 0 : -1;
110
- }
111
- willUpdate(e) {
112
- super.willUpdate(e), e.has("active") && (this.internals.ariaSelected = `${this.active}`, this.active && !this.disabled ? this.activate() : this.deactivate()), e.has("disabled") && this.disabled && (this.tabIndex = -1, this.active && (this.deactivate(), this.group?.activateTab(0)));
113
- }
114
- deactivate() {
115
- this.active = !1, this.tab?.deactivate(), this._selected = !1, this.tabIndex = -1;
116
- }
117
- activate() {
118
- if (this.disabled) return;
119
- let e = this.group?.labels || [], t = e.find((e) => e._selected);
120
- if (t !== this) {
121
- t?.deactivate(), this.active = !0, this.tab?.activate(), this._selected = !0, this.tabIndex = 0, this.tab?.dispatchEvent(new Event("active", {
122
- bubbles: !0,
123
- composed: !0
124
- }));
125
- let n = {
126
- activeIndex: e.findIndex((e) => e === this),
127
- activeTabLabel: this,
128
- activeTab: this.tab,
129
- previousIndex: e.findIndex((e) => e === t),
130
- previousTabLabel: t,
131
- previousTab: t?.tab
132
- };
133
- this.group?.dispatchEvent(new p(n));
134
- }
135
- }
136
- linkToTab() {
137
- this.tab && (this.internals.ariaControlsElements = [this.tab]);
138
- }
139
- render() {
140
- let e = `h${Number(this.level) < 7 ? this.level : "1"}`;
141
- return l`
142
- <${u(e)} class="sbb-tab-label">
143
- <span class="sbb-tab-label__icon">
144
- ${this.renderIconSlot()}
145
- </span>
146
- <span class="sbb-tab-label__text">
147
- <slot></slot>
148
- </span>
149
- <p class="sbb-tab-label__amount">
150
- <slot name="amount">${this.amount}</slot>
151
- </p>
152
- </${u(e)}>
153
- `;
154
- }
155
- };
156
- })();
157
- //#endregion
158
- export { h as t };
@@ -1,17 +0,0 @@
1
- @use '../../core/styles' as sbb;
2
-
3
- $theme: 'standard' !default;
4
-
5
- // These variables are shared within the `sbb-tab-label` and the `sbb-tab-nav-bar`.
6
- @mixin base {
7
- --sbb-tab-group-content-gap-size-s: var(--sbb-spacing-responsive-xs);
8
- --sbb-tab-group-content-gap-size-l: var(--sbb-spacing-responsive-s);
9
- --sbb-tab-group-content-gap-size-xl: var(--sbb-spacing-responsive-m);
10
- --sbb-tab-group-content-gap-default: #{sbb.theme-pattern-select(
11
- (
12
- 'standard': var(--sbb-tab-group-content-gap-size-l),
13
- 'lean': var(--sbb-tab-group-content-gap-size-s),
14
- ),
15
- $theme
16
- )};
17
- }
@@ -1,10 +0,0 @@
1
- @use '../../core/styles' as sbb;
2
- @use '../common/tab-label-common' as tab-label-common;
3
-
4
- $theme: 'standard' !default;
5
-
6
- @mixin rules {
7
- sbb-tab-nav-bar .sbb-tab-amount {
8
- @include tab-label-common.tab-label-amount;
9
- }
10
- }
@@ -1,24 +0,0 @@
1
- @use '../core/styles' as sbb;
2
-
3
- $theme: 'standard' !default;
4
-
5
- @mixin base {
6
- --sbb-teaser-scale-hover: 1.02;
7
- --sbb-teaser-description-color: light-dark(var(--sbb-color-granite), var(--sbb-color-silver));
8
- --sbb-teaser-flex-direction: row;
9
- --sbb-teaser-align-items: center;
10
- --sbb-teaser-font-size: var(--sbb-text-font-size-s);
11
- --sbb-teaser-gap: var(--sbb-spacing-fixed-4x);
12
- --sbb-teaser-border-radius: var(--sbb-border-radius-4x);
13
- --sbb-teaser-image-width: #{sbb.px-to-rem-build(300)};
14
- }
15
-
16
- @mixin rules {
17
- sbb-teaser :is(sbb-image, img):not(.sbb-figure-overlap-image) {
18
- --sbb-image-object-fit: cover;
19
- --sbb-image-aspect-ratio: 4 / 3;
20
-
21
- // The transition of the scale is done by the global rules in core.scss
22
- scale: var(--sbb-teaser-scale, 1);
23
- }
24
- }
@@ -1,12 +0,0 @@
1
- @use '../../core/styles' as sbb;
2
-
3
- $theme: 'standard' !default;
4
-
5
- @mixin base {
6
- --sbb-timetable-form-details-border-block-start: var(--sbb-border-width-1x) solid
7
- var(--sbb-border-color-4-inverted);
8
- --sbb-timetable-form-details-gap: var(--sbb-spacing-fixed-1x);
9
- --sbb-timetable-form-details-padding-block: var(--sbb-spacing-fixed-1x);
10
- --sbb-timetable-form-details-padding-inline: var(--sbb-spacing-responsive-xxs);
11
- --sbb-timetable-form-details-horizontal-divider-height: 1.5rem;
12
- }
@@ -1,10 +0,0 @@
1
- @use '../../core/styles' as sbb;
2
-
3
- $theme: 'standard' !default;
4
-
5
- @mixin base {
6
- --sbb-timetable-form-field-route-icon-color: var(--sbb-color-2);
7
- --sbb-timetable-form-field-route-icon-background-color: var(--sbb-background-color-1);
8
- --sbb-timetable-form-field-route-via-icon-width: var(--sbb-size-icon-ui-small);
9
- --sbb-timetable-form-field-route-via-after-dimension: #{sbb.px-to-rem-build(7)};
10
- }
@@ -1,7 +0,0 @@
1
- @use '../core/styles' as sbb;
2
-
3
- $theme: 'standard' !default;
4
-
5
- @mixin base {
6
- --sbb-title-color: var(--sbb-color-3);
7
- }
@@ -1,10 +0,0 @@
1
- @use '../../core/styles' as sbb;
2
-
3
- $theme: 'standard' !default;
4
-
5
- @mixin base {
6
- --sbb-toggle-option-color: light-dark(var(--sbb-color-anthracite), var(--sbb-color-cloud));
7
- --sbb-toggle-option-gap: var(--sbb-spacing-fixed-1x);
8
- --sbb-toggle-option-font-size: var(--sbb-text-font-size-xs);
9
- --sbb-toggle-option-icon-min-size: var(--sbb-size-icon-ui-small);
10
- }
@@ -1,16 +0,0 @@
1
- @use '../../core/styles' as sbb;
2
-
3
- $theme: 'standard' !default;
4
-
5
- @mixin base {
6
- --sbb-train-blocked-passage-background-color: var(--sbb-color-error);
7
- --sbb-train-blocked-passage-bar-color: var(--sbb-color-white);
8
- --sbb-train-blocked-passage-icon-bar-width: #{sbb.px-to-rem-build(10)};
9
- --sbb-train-blocked-passage-icon-bar-height: #{sbb.px-to-rem-build(4)};
10
- --sbb-train-blocked-passage-icon-bar-border-radius: var(--sbb-border-radius-1x);
11
- }
12
-
13
- @mixin forced-colors {
14
- --sbb-train-blocked-passage-background-color: CanvasText;
15
- --sbb-train-blocked-passage-bar-color: Canvas;
16
- }
@@ -1,26 +0,0 @@
1
- @use '../../core/styles' as sbb;
2
-
3
- $theme: 'standard' !default;
4
-
5
- @mixin base {
6
- --sbb-train-formation-wagon-dimension-short: #{sbb.px-to-rem-build(36)};
7
- --sbb-train-formation-wagon-dimension-long: #{sbb.px-to-rem-build(84)};
8
- --sbb-train-formation-wagon-gap: var(--sbb-spacing-fixed-1x);
9
- --sbb-train-formation-sector-line-color: light-dark(
10
- var(--sbb-color-cement),
11
- var(--sbb-color-smoke)
12
- );
13
- --sbb-train-formation-sector-line-width: var(--sbb-border-width-1x);
14
- --sbb-train-formation-blocked-passage-dimension: #{sbb.px-to-rem-build(16)};
15
- --sbb-train-formation-text-color: var(--sbb-color-3);
16
- --sbb-train-formation-gap: var(--sbb-spacing-fixed-2x);
17
- --sbb-train-formation-sector-padding: var(--sbb-spacing-fixed-1x);
18
- --sbb-train-formation-sector-margin: var(--sbb-spacing-fixed-2x);
19
- --sbb-train-formation-padding: var(--sbb-spacing-fixed-1x);
20
- --_sbb-train-formation-flex-direction: row;
21
- --_sbb-train-formation-flex-direction-inverted: column;
22
- }
23
-
24
- @mixin forced-colors {
25
- --sbb-train-formation-sector-line-color: CanvasText;
26
- }
File without changes
File without changes
File without changes