@sbb-esta/lyne-elements-dev 5.0.0-next-dev.1776866482 → 5.0.0-next-dev.1776872994

package/core/styles/core.scss

@@ -212,6 +212,9 @@ $theme: 'standard' !default;
 @use '../../signet/signet.global' as signet with (
   $theme: $theme
 );
+@use '../../select/select.global' as select with (
+  $theme: $theme
+);
 @use '../../slider/slider.global' as slider with (
   $theme: $theme
 );
@@ -239,6 +242,9 @@ $theme: 'standard' !default;
 @use '../../teaser/teaser.global' as teaser with (
   $theme: $theme
 );
+@use '../../teaser-hero/teaser-hero.global' as teaser-hero with (
+  $theme: $theme
+);
 @use '../../teaser-panel/teaser-panel.global' as teaser-panel with (
   $theme: $theme
 );
@@ -259,6 +265,9 @@ $theme: 'standard' !default;
 @use '../../timetable-occupancy/timetable-occupancy.global' as timetable-occupancy with (
   $theme: $theme
 );
+@use '../../time-input/time-input.global' as time-input with (
+  $theme: $theme
+);
 @use '../../toggle-check/toggle-check.global' as toggle-check with (
   $theme: $theme
 );
@@ -342,6 +351,7 @@ $theme: 'standard' !default;
   @include selection-expansion-panel.base;
   @include sidebar.base;
   @include signet.base;
+  @include select.base;
   @include slider.base;
   @include status.base;
   @include step-label.base;
@@ -350,12 +360,14 @@ $theme: 'standard' !default;
   @include tab-label-common.base;
   @include tag.base;
   @include teaser.base;
+  @include teaser-hero.base;
   @include teaser-panel.base;
   @include teaser-product-common.base;
   @include timetable-form.base;
   @include timetable-form-details.base;
   @include timetable-form-field.base;
   @include timetable-occupancy.base;
+  @include time-input.base;
   @include toggle-check.base;
   @include toggle.base;
   @include toggle-option.base;
@@ -388,9 +400,6 @@ $theme: 'standard' !default;
   --sbb-train-formation-wagon-height: #{functions.px-to-rem-build(40)};
   --sbb-train-formation-wagon-gap: var(--sbb-spacing-fixed-1x);
 
-  // Time Input
-  --sbb-time-input-max-width: #{functions.px-to-rem-build(58)};
-
   // Overlay
   --sbb-overlay-default-z-index: 1000;
 
@@ -399,8 +408,7 @@ $theme: 'standard' !default;
   --sbb-cursor-pointer: pointer;
 
   // Infinity border radius, can be used to achieve rounded border on start and end
-  // TODO: Check if infinity is supported by all browsers (e.g. Firefox) -> calc(1em * infinity);
-  --sbb-border-radius-infinity: 100000em;
+  --sbb-border-radius-infinity: calc(infinity * 1px);
 
   // TODO: Remove complete block when new lean theme is complete
   // TODO: Also remove all occurrences of the variables in lyne-components (e.g. --sbb-title-font-size-level-1-lean)
@@ -447,7 +455,6 @@ $theme: 'standard' !default;
     @include sbb-css-tokens.breakpoint-large;
 
     @include button.base-breakpoint-large;
-
     @include chip-group.base-breakpoint-large;
     @include dialog.base-breakpoint-large;
     @include flip-card.base-breakpoint-large;
@@ -456,6 +463,7 @@ $theme: 'standard' !default;
     @include menu.base-breakpoint-large;
     @include teaser-panel.base-breakpoint-large;
     @include teaser-product-common.base-breakpoint-large;
+    @include time-input.base-breakpoint-large;
 
     // TODO: Remove complete block when new lean theme is complete
     // Only render the block in standard theme as fallback for CSS class usage
@@ -464,9 +472,6 @@ $theme: 'standard' !default;
         --sbb-title-font-size-level-6-lean: var(--sbb-typo-scale-0-875x);
       }
     }
-
-    // Time Input
-    --sbb-time-input-max-width: #{functions.px-to-rem-build(65)};
   }
 
   @include mediaqueries.mq($from: ultra) {
@@ -493,10 +498,13 @@ $theme: 'standard' !default;
 @include lead-container.rules;
 @include message.rules;
 @include option.rules;
+@include select.rules;
 @include sidebar.rules;
 @include sidebar-close-button.rules;
 @include sidebar-container.rules;
 @include tab-nav-bar.rules;
+@include teaser.rules;
+@include teaser-hero.rules;
 @include teaser-product-common.rules;
 @include toggle.rules;
 
@@ -566,22 +574,6 @@ html {
   pointer-events: all;
 }
 
-// Helper class for the application name and version in sbb-header.
-.sbb-header-info {
-  @include typo.text-xs--regular;
-
-  display: flex;
-  padding-inline: var(--sbb-spacing-fixed-4x);
-  gap: var(--sbb-spacing-fixed-1x);
-  align-items: baseline;
-  color: var(--sbb-color-1);
-
-  strong + * {
-    font-size: var(--sbb-text-font-size-xxs);
-    color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
-  }
-}
-
 // In smaller title font-sizes, the space after the title is smaller than the default paragraph space before.
 // Due to margin collapsing, the wrong paragraph space wins.
 // To prevent the mistakenly large gap, we reset the paragraph space.
@@ -597,7 +589,6 @@ img {
 
 // Target the slotted `sbb-image` which are generally wrapped by a <figure> (therefore are not reachable with the :slotted)
 // Apply the brightness effect on mouse hover
-// TODO: Move back to the teaser components when the global CSS refactoring happens
 :is(sbb-teaser, sbb-teaser-hero, sbb-teaser-product) {
   --sbb-teaser-image-brightness-hover: var(--sbb-hover-image-brightness);
   --sbb-teaser-image-animation-duration: var(
@@ -620,34 +611,6 @@ img {
   }
 }
 
-sbb-teaser :is(sbb-image, img):not(.sbb-figure-overlap-image) {
-  --sbb-image-object-fit: cover;
-  --sbb-image-aspect-ratio: 4 / 3;
-
-  transition-property: filter, scale;
-  will-change: filter, scale;
-  scale: var(--sbb-teaser-scale, 1);
-}
-
-// TODO: Move back to the teaser-hero components when the global CSS refactoring happens
-sbb-teaser-hero {
-  :is(sbb-image, img):not(.sbb-figure-overlap-image) {
-    --sbb-image-aspect-ratio: 1 / 1;
-
-    border-radius: 0;
-
-    @include mediaqueries.mq($from: small) {
-      --sbb-image-aspect-ratio: 16 / 9;
-    }
-  }
-
-  img:not(.sbb-figure-overlap-image) {
-    display: block;
-    align-self: stretch;
-    width: 100%;
-  }
-}
-
 // TODO: move to train formation after CSS refactoring
 sbb-train-formation:has(sbb-train[direction-label]) {
   --sbb-train-formation-reserve-spacing-display: block;
@@ -681,27 +644,8 @@ sbb-train-formation[view='top'] sbb-train-wagon {
   --sbb-train-wagon-wagon-end-right-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath d='M8.5,0.5 h51.5 a19.5,19.5 0 0 1 19.5,19.5 v0 a19.5,19.5 0 0 1 -19.5,19.5 h-51.5 a8,8 0 0 1 -8,-8 v-23 a8,8 0 0 1 8,-8 z' stroke='%23000000' stroke-width='1'/%3E%3C/svg%3E");
 }
 
-// We set some dimension to the selects trigger element in order that the screen reader's outline box looks more accurate.
-.sbb-select-trigger {
-  width: 100%;
-
-  // We set the smallest possible height (zero breakpoint, size s)
-  height: var(--sbb-size-element-xs);
-
-  sbb-form-field & {
-    top: 0;
-  }
-}
-
 .sbb-overlay-outlet {
   position: fixed;
   inset: 0;
   pointer-events: none;
 }
-
-// Sets ellipsis on all sbb-option child elements
-.sbb-options-nowrap {
-  --sbb-option-text-overflow: ellipsis;
-  --sbb-option-overflow: hidden;
-  --sbb-option-white-space: nowrap;
-}

package/core/styles/mixins/typo.scss

@@ -7,9 +7,9 @@
   margin-inline: 0;
   font-family: var(--sbb-typo-font-family);
   font-weight: bold;
-  line-height: var(--sbb-title-line-height, var(--sbb-typo-line-height-heading));
-  letter-spacing: var(--sbb-typo-letter-spacing-heading);
   font-size: var(--sbb-title-font-size);
+  letter-spacing: var(--sbb-typo-letter-spacing-heading);
+  line-height: var(--sbb-title-line-height, var(--sbb-typo-line-height-heading));
 }
 
 @mixin title--level-1 {

package/core.css

@@ -122,6 +122,7 @@ slot[name=error]::slotted(*) {
   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);
 }
@@ -1658,6 +1659,11 @@ slot[name=error]::slotted(*) {
   --sbb-signet-panel-color: var(--sbb-color-brand);
   --sbb-signet-icon-color: var(--sbb-color-white);
   --sbb-signet-aspect-ratio: 2 / 1;
+  --sbb-select-placeholder-fallback-color: var(--sbb-color-metal);
+  --sbb-select-placeholder-fallback-color: light-dark(
+    var(--sbb-color-metal),
+    var(--sbb-color-smoke)
+  );
   --sbb-slider-line-height: 0.25rem;
   --sbb-slider-knob-size: 1.75rem;
   --sbb-slider-knob-size-active: 1.9375rem;
@@ -1743,6 +1749,7 @@ slot[name=error]::slotted(*) {
   --sbb-teaser-gap: var(--sbb-spacing-fixed-4x);
   --sbb-teaser-border-radius: var(--sbb-border-radius-4x);
   --sbb-teaser-image-width: 18.75rem;
+  --sbb-teaser-hero-link-font-weight: 400;
   --sbb-panel-width: 13.9375rem;
   --sbb-panel-inner-height: 10.4375rem;
   --sbb-panel-triangle-height: 2.0625rem;
@@ -1793,6 +1800,7 @@ slot[name=error]::slotted(*) {
   --sbb-timetable-occupancy-font-size: var(--sbb-text-font-size-s);
   --sbb-timetable-occupancy-list-gap: var(--sbb-spacing-fixed-2x);
   --sbb-timetable-occupancy-item-gap: var(--sbb-spacing-fixed-1x);
+  --sbb-time-input-max-width: 3.625rem;
   --sbb-toggle-check-font-size: var(--sbb-text-font-size-s);
   --sbb-toggle-check-color: var(--sbb-color-2);
   --sbb-toggle-check-checked-color: var(--sbb-color-primary);
@@ -1910,11 +1918,10 @@ slot[name=error]::slotted(*) {
   --sbb-train-formation-wagon-width: 5rem;
   --sbb-train-formation-wagon-height: 2.5rem;
   --sbb-train-formation-wagon-gap: var(--sbb-spacing-fixed-1x);
-  --sbb-time-input-max-width: 3.625rem;
   --sbb-overlay-default-z-index: 1000;
   --sbb-cursor-default: default;
   --sbb-cursor-pointer: pointer;
-  --sbb-border-radius-infinity: 100000em;
+  --sbb-border-radius-infinity: calc(infinity * 1px);
 }
 :root.sbb-lean {
   --sbb-title-font-size-level-1-lean: var(--sbb-heading-font-size-2);
@@ -2017,13 +2024,11 @@ slot[name=error]::slotted(*) {
     --sbb-teaser-product-footer-padding-block-start: var(--sbb-spacing-responsive-xs);
     --sbb-teaser-product-footer-padding-block-end: var(--sbb-spacing-responsive-xs);
     --sbb-teaser-product-footer-min-height: var(--sbb-teaser-product-container-spacing);
+    --sbb-time-input-max-width: 4.0625rem;
   }
   :root.sbb-lean {
     --sbb-title-font-size-level-6-lean: var(--sbb-typo-scale-0-875x);
   }
-  :root {
-    --sbb-time-input-max-width: 4.0625rem;
-  }
 }
 @media (min-width: calc(90rem)) {
   :root {
@@ -2308,10 +2313,6 @@ sbb-flip-card-summary > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap
   }
 }
 
-sbb-header + :where(sbb-sidebar-container, sbb-icon-sidebar-container) {
-  margin-block-start: var(--sbb-header-height);
-}
-
 :root:has(sbb-header[size=m]) {
   --sbb-header-height: var(--sbb-spacing-fixed-14x);
 }
@@ -2328,6 +2329,26 @@ sbb-header + :where(sbb-sidebar-container, sbb-icon-sidebar-container) {
     --sbb-header-height: var(--sbb-spacing-fixed-14x);
   }
 }
+sbb-header + :where(sbb-sidebar-container, sbb-icon-sidebar-container) {
+  margin-block-start: var(--sbb-header-height);
+}
+
+.sbb-header-info {
+  display: flex;
+  padding-inline: var(--sbb-spacing-fixed-4x);
+  gap: var(--sbb-spacing-fixed-1x);
+  align-items: baseline;
+  color: var(--sbb-color-1);
+  font-size: var(--sbb-text-font-size-xs);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
+}
+.sbb-header-info strong + * {
+  font-size: var(--sbb-text-font-size-xxs);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
+  color: var(--sbb-color-granite);
+  color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
+}
+
 sbb-icon-sidebar-content + sbb-icon-sidebar :is(sbb-icon-sidebar-link, sbb-icon-sidebar-button) {
   --sbb-icon-sidebar-button__current-border-inset-inline-start: auto;
 }
@@ -2361,6 +2382,20 @@ sbb-message > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
   --sbb-option-hint-padding-block-end: var(--sbb-spacing-fixed-1x);
 }
 
+.sbb-options-nowrap {
+  --sbb-option-text-overflow: ellipsis;
+  --sbb-option-overflow: hidden;
+  --sbb-option-white-space: nowrap;
+}
+
+.sbb-select-trigger {
+  width: 100%;
+  height: var(--sbb-size-element-xs);
+}
+sbb-form-field .sbb-select-trigger {
+  top: 0;
+}
+
 sbb-sidebar:has(sbb-sidebar-title) {
   --_sbb-sidebar-padding-block-start: 0;
 }
@@ -2399,6 +2434,29 @@ sbb-tab-nav-bar .sbb-tab-amount {
   text-decoration: var(--sbb-tab-label-text-decoration);
 }
 
+sbb-teaser :is(sbb-image, img):not(.sbb-figure-overlap-image) {
+  --sbb-image-object-fit: cover;
+  --sbb-image-aspect-ratio: 4 / 3;
+  transition-property: filter, scale;
+  will-change: filter, scale;
+  scale: var(--sbb-teaser-scale, 1);
+}
+
+sbb-teaser-hero :is(sbb-image, img):not(.sbb-figure-overlap-image) {
+  --sbb-image-aspect-ratio: 1 / 1;
+  border-radius: 0;
+}
+@media (min-width: calc(37.5rem)) {
+  sbb-teaser-hero :is(sbb-image, img):not(.sbb-figure-overlap-image) {
+    --sbb-image-aspect-ratio: 16 / 9;
+  }
+}
+sbb-teaser-hero img:not(.sbb-figure-overlap-image) {
+  display: block;
+  align-self: stretch;
+  width: 100%;
+}
+
 :is(sbb-teaser-product, sbb-teaser-product-static) :is(sbb-image, img):not(.sbb-figure-overlap-image) {
   border-radius: 0;
   --sbb-image-object-fit: cover;
@@ -2481,25 +2539,6 @@ sbb-toast) {
   pointer-events: all;
 }
 
-.sbb-header-info {
-  --sbb-text-font-size: var(--sbb-text-font-size-xs);
-  font-family: var(--sbb-typo-font-family);
-  font-weight: normal;
-  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;
-  padding-inline: var(--sbb-spacing-fixed-4x);
-  gap: var(--sbb-spacing-fixed-1x);
-  align-items: baseline;
-  color: var(--sbb-color-1);
-}
-.sbb-header-info strong + * {
-  font-size: var(--sbb-text-font-size-xxs);
-  color: var(--sbb-color-granite);
-  color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
-}
-
 sbb-title + p {
   margin-block-start: 0;
 }
@@ -2529,29 +2568,6 @@ img {
   transition: filter var(--sbb-teaser-image-animation-duration) var(--sbb-teaser-image-animation-easing);
 }
 
-sbb-teaser :is(sbb-image, img):not(.sbb-figure-overlap-image) {
-  --sbb-image-object-fit: cover;
-  --sbb-image-aspect-ratio: 4 / 3;
-  transition-property: filter, scale;
-  will-change: filter, scale;
-  scale: var(--sbb-teaser-scale, 1);
-}
-
-sbb-teaser-hero :is(sbb-image, img):not(.sbb-figure-overlap-image) {
-  --sbb-image-aspect-ratio: 1 / 1;
-  border-radius: 0;
-}
-@media (min-width: calc(37.5rem)) {
-  sbb-teaser-hero :is(sbb-image, img):not(.sbb-figure-overlap-image) {
-    --sbb-image-aspect-ratio: 16 / 9;
-  }
-}
-sbb-teaser-hero img:not(.sbb-figure-overlap-image) {
-  display: block;
-  align-self: stretch;
-  width: 100%;
-}
-
 sbb-train-formation:has(sbb-train[direction-label]) {
   --sbb-train-formation-reserve-spacing-display: block;
 }
@@ -2580,22 +2596,8 @@ sbb-train-formation[view=top] sbb-train-wagon {
   --sbb-train-wagon-wagon-end-right-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath d='M8.5,0.5 h51.5 a19.5,19.5 0 0 1 19.5,19.5 v0 a19.5,19.5 0 0 1 -19.5,19.5 h-51.5 a8,8 0 0 1 -8,-8 v-23 a8,8 0 0 1 8,-8 z' stroke='%23000000' stroke-width='1'/%3E%3C/svg%3E");
 }
 
-.sbb-select-trigger {
-  width: 100%;
-  height: var(--sbb-size-element-xs);
-}
-sbb-form-field .sbb-select-trigger {
-  top: 0;
-}
-
 .sbb-overlay-outlet {
   position: fixed;
   inset: 0;
   pointer-events: none;
-}
-
-.sbb-options-nowrap {
-  --sbb-option-text-overflow: ellipsis;
-  --sbb-option-overflow: hidden;
-  --sbb-option-white-space: nowrap;
 }