@sbb-esta/lyne-elements 4.9.0 → 4.10.0

package/core/styles/core.scss

@@ -10,7 +10,7 @@ $theme: 'standard' !default;
 @use './mixins/font-face';
 @use './mixins/helpers';
 @use './mixins/inputs';
-@use './mixins/overlay' as overlay;
+@use './mixins/overlay' as overlay-mixin;
 @use './mixins/popover';
 @use './mixins/scrollbar';
 @use './mixins/typo';
@@ -172,9 +172,18 @@ $theme: 'standard' !default;
 @use '../../option/option-hint/option-hint.global' as option-hint with (
   $theme: $theme
 );
+@use '../../overlay/overlay.global' as overlay with (
+  $theme: $theme
+);
 @use '../../option/optgroup/optgroup.global' as optgroup with (
   $theme: $theme
 );
+@use '../../paginator/paginator/paginator.global' as paginator with (
+  $theme: $theme
+);
+@use '../../paginator/compact-paginator/compact-paginator.global' as compact-paginator with (
+  $theme: $theme
+);
 @use '../../popover/popover.global' as popover-component with (
   $theme: $theme
 );
@@ -191,12 +200,30 @@ $theme: 'standard' !default;
   with (
   $theme: $theme
 );
+@use '../../sidebar/sidebar/sidebar.global' as sidebar with (
+  $theme: $theme
+);
+@use '../../sidebar/sidebar-close-button/sidebar-close-button.global' as sidebar-close-button with (
+  $theme: $theme
+);
+@use '../../sidebar/sidebar-container/sidebar-container.global' as sidebar-container with (
+  $theme: $theme
+);
 @use '../../signet/signet.global' as signet with (
   $theme: $theme
 );
+@use '../../slider/slider.global' as slider with (
+  $theme: $theme
+);
 @use '../../status/status.global' as status with (
   $theme: $theme
 );
+@use '../../stepper/step-label/step-label.global' as step-label with (
+  $theme: $theme
+);
+@use '../../stepper/stepper/stepper.global' as stepper with (
+  $theme: $theme
+);
 @use '../../tabs/common/tab-group-common.global' as tab-group-common with (
   $theme: $theme
 );
@@ -206,6 +233,15 @@ $theme: 'standard' !default;
 @use '../../tabs/tab-nav-bar/tab-nav-bar.global' as tab-nav-bar with (
   $theme: $theme
 );
+@use '../../tag/tag/tag.global' as tag with (
+  $theme: $theme
+);
+@use '../../teaser/teaser.global' as teaser with (
+  $theme: $theme
+);
+@use '../../teaser-product/common/teaser-product-common.global' as teaser-product-common with (
+  $theme: $theme
+);
 @use '../../visual-checkbox/visual-checkbox.global' as visual-checkbox with (
   $theme: $theme
 );
@@ -266,16 +302,26 @@ $theme: 'standard' !default;
   @include option.base;
   @include option-hint.base;
   @include optgroup.base;
-  @include overlay.options-panel-overlay-variables--global($theme);
+  @include overlay.base;
+  @include overlay-mixin.options-panel-overlay-variables--global($theme);
+  @include paginator.base;
+  @include compact-paginator.base;
   @include popover-component.base;
   @include radio-button-common.base;
   @include selection-group.base;
   @include selection-action-panel.base;
   @include selection-expansion-panel.base;
+  @include sidebar.base;
   @include signet.base;
+  @include slider.base;
   @include status.base;
+  @include step-label.base;
+  @include stepper.base;
   @include tab-group-common.base;
   @include tab-label-common.base;
+  @include tag.base;
+  @include teaser.base;
+  @include teaser-product-common.base;
   @include visual-checkbox.base;
 
   @include a11y.if-forced-colors {
@@ -292,6 +338,9 @@ $theme: 'standard' !default;
     @include visual-checkbox.base-forced-colors;
     @include radio-button-common.base-forced-colors;
     @include signet.base-forced-colors;
+    @include slider.base-forced-colors;
+    @include step-label.base-forced-colors;
+    @include tag.base-forced-colors;
   }
 
   // Train formation
@@ -365,6 +414,7 @@ $theme: 'standard' !default;
     @include form-field.base-breakpoint-large;
     @include header.base-breakpoint-large;
     @include menu.base-breakpoint-large;
+    @include teaser-product-common.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
@@ -401,7 +451,11 @@ $theme: 'standard' !default;
 @include lead-container.rules;
 @include message.rules;
 @include option.rules;
+@include sidebar.rules;
+@include sidebar-close-button.rules;
+@include sidebar-container.rules;
 @include tab-nav-bar.rules;
+@include teaser-product-common.rules;
 
 // TODO: discuss where to add these classes
 .sbb-dark {
@@ -523,21 +577,6 @@ img {
   }
 }
 
-// TODO: Move back to the teaser components when the global CSS refactoring happens
-:is(sbb-teaser-product, sbb-teaser-product-static) {
-  :is(sbb-image, img):not(.sbb-figure-overlap-image) {
-    border-radius: 0; // Reset sbb-image border radius in order to control it from teaser product.
-
-    --sbb-image-object-fit: cover;
-    --sbb-image-aspect-ratio: 16 / 9;
-  }
-
-  img:not(.sbb-figure-overlap-image) {
-    place-self: stretch;
-  }
-}
-
-// TODO: Move back to the teaser components when the global CSS refactoring happens
 sbb-teaser :is(sbb-image, img):not(.sbb-figure-overlap-image) {
   --sbb-image-object-fit: cover;
   --sbb-image-aspect-ratio: 4 / 3;
@@ -599,71 +638,6 @@ 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");
 }
 
-// Skip animation for the container, content and sidebars when a sidebar requests it
-// (during initialization or if animation is disabled, but only during transition)
-sbb-sidebar-container:has(> sbb-sidebar:state(skip-animation)) {
-  --sbb-sidebar-container-animation-duration: 0s;
-}
-
-// Controls the start margin of the sbb-sidebar-content.
-// Whenever the sidebar with position start is in a closed state in over mode (or forced over mode),
-// or if there is no sidebar with position start, then override the margin with 0.
-// Direct child selector is mandatory to enable nested sidebars.
-sbb-sidebar-container:is(
-    :has(
-      > sbb-sidebar:not([position='end']):is(
-          :state(state-closing),
-          :state(state-closed),
-          [mode='over'],
-          :state(mode-over-forced)
-        )
-    ),
-    :not(:has(> sbb-sidebar:not([position='end'])))
-  )
-  > sbb-sidebar-content {
-  --sbb-sidebar-content__margin-inline-start: 0;
-}
-
-// Controls the end margin of the sbb-sidebar-content.
-// Whenever the sidebar with position end is in a closed state in over mode (or forced over mode),
-// or if there is no sidebar with position end, then override the margin with 0.
-// Direct child selector is mandatory to enable nested sidebars.
-sbb-sidebar-container:is(
-    :has(
-      > sbb-sidebar[position='end']:is(
-          :state(state-closing),
-          :state(state-closed),
-          [mode='over'],
-          :state(mode-over-forced)
-        )
-    ),
-    :not(:has(> sbb-sidebar[position='end']))
-  )
-  > sbb-sidebar-content {
-  --sbb-sidebar-content__margin-inline-end: 0;
-}
-
-// Toggles visibility of backdrop if there is an affected sidebar inside the container.
-sbb-sidebar-container:has(
-  > sbb-sidebar:is([mode='over'], :state(mode-over-forced)):is(
-      :state(state-opening),
-      :state(state-opened)
-    )
-) {
-  --sbb-sidebar-container__backdrop-visibility: visible;
-  --sbb-sidebar-container-backdrop-opacity: 0.4;
-}
-
-// If there is no close button, avoid reserving any space for the button in the sidebar title
-sbb-sidebar:not(:has(sbb-sidebar-title)) sbb-sidebar-close-button {
-  position: absolute;
-}
-
-// If there is a title, remove top spacing for the content
-sbb-sidebar:has(sbb-sidebar-title) {
-  --sbb-sidebar__padding-block-start: 0;
-}
-
 // 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%;

package/core/styles/layout.private.scss

@@ -0,0 +1,36 @@
+@use './mixins/dev_and_debug';
+@use './core/mediaqueries';
+@use './node_modules_@sbb-esta_lyne-design-tokens_dist_scss_sbb-variables.scss' as sbb-tokens;
+
+.visualized-page-spacing div,
+.visualized-grid div {
+  @include dev_and_debug.development-style;
+
+  padding: 0;
+  height: 100px;
+}
+
+.visualized-page-spacing span {
+  display: inline-block;
+  padding: 1em;
+}
+
+.visualized-grid div {
+  display: none;
+
+  $columns: (
+    'zero': sbb-tokens.$sbb-layout-base-grid-columns-zero,
+    'small': sbb-tokens.$sbb-layout-base-grid-columns-small,
+    'large': sbb-tokens.$sbb-layout-base-grid-columns-large,
+    'ultra': sbb-tokens.$sbb-layout-base-grid-columns-ultra,
+  );
+
+  // Only show divs (columns) which are available on the grid for each breakpoint
+  @each $breakpoint, $columnCount in $columns {
+    @include mediaqueries.mq($from: #{$breakpoint}) {
+      &:nth-child(-n + #{$columnCount}) {
+        display: block;
+      }
+    }
+  }
+}

package/core/styles/mixins/table.scss

@@ -4,6 +4,7 @@
 // Notes:
 // We cannot use `border-collapse` because in sticky variants it gets visually broken.
 // Therefore, we have to build the grid avoiding double borders.
+// TODO: remove with next major release
 @mixin table {
   @include table--m;
   @include table--striped;
@@ -23,49 +24,46 @@
   caption-side: bottom;
   color: var(--sbb-table-color);
   table-layout: auto;
+  text-align: left;
 
-  thead {
-    & > tr {
-      @include table-header-row;
+  th {
+    @include table-header-cell;
+  }
 
-      &:first-of-type > th {
-        border-block-start: var(--sbb-table-border);
-      }
+  td {
+    @include table-data-cell;
+  }
 
-      & > th {
-        @include table-header-cell;
+  :is(th, td) {
+    &.sbb-table-group-with-next {
+      border-inline-end: none;
+    }
 
-        &:first-of-type {
-          border-inline-start: var(--sbb-table-border);
-        }
-      }
+    &:first-child {
+      border-inline-start: var(--sbb-table-border);
     }
   }
 
-  tbody {
-    & > tr {
-      & > td {
-        @include table-data-cell;
-
-        &:first-of-type {
-          border-inline-start: var(--sbb-table-border);
-        }
-      }
+  // In Angular the CDK table always adds a thead even if there are no headers.
+  // Due to this fact we have to also insert `tr` in the `:has()` selector.
+  &:has(thead tr) thead,
+  &:not(:has(thead tr)) tbody {
+    tr:first-of-type > :is(th, td) {
+      border-block-start: var(--sbb-table-border);
     }
   }
 
-  caption {
-    @include table-caption;
+  // Avoid borders between header rows (design specification).
+  thead > tr:has(+ tr) > :is(th, td) {
+    border-block-end: none;
   }
 
-  // If there is no thead, add a top border to the first tbody row
-  // In Angular the CDK table always adds a thead even if there are no headers.
-  // Due to this fact we have to also insert `tr` in the `:has()` selector.
-  &:not(:has(thead tr)) tbody > tr:first-of-type > td {
-    border-block-start: var(--sbb-table-border);
+  caption {
+    @include table-caption;
   }
 }
 
+// TODO: remove with next major release
 @mixin table-header-row {
   // If there is more than one header row, only the last one has the bottom border
   &:last-of-type > th {
@@ -73,17 +71,19 @@
   }
 }
 
+// TODO: remove with next major release
 @mixin table-header-cell {
   font-size: var(--sbb-table-header-cell-font-size);
   letter-spacing: var(--sbb-typo-letter-spacing-text);
   font-weight: bold;
   background-color: var(--sbb-table-background-color);
+  border-block-end: var(--sbb-table-border);
   border-inline-end: var(--sbb-table-border);
   padding-block: var(--sbb-table-header-padding-block);
   padding-inline: var(--sbb-table-header-padding-inline);
-  text-align: left;
 }
 
+// TODO: remove with next major release
 @mixin table-data-cell {
   font-size: var(--sbb-table-data-cell-font-size);
   letter-spacing: var(--sbb-typo-letter-spacing-text);
@@ -94,6 +94,7 @@
   padding-inline: var(--sbb-table-cell-padding-inline);
 }
 
+// TODO: remove with next major release
 @mixin table-caption {
   // Workaround for storybook. It crashes if 'light-dark' is used as a 'var' fallback
   --sbb-table-caption-color-fallback: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
@@ -107,26 +108,31 @@
   text-align: left;
 }
 
+// TODO: remove and inline with next major release
 @mixin table-filter {
   padding-block-start: 0 !important;
 }
 
+// TODO: remove with next major release
 @mixin table--striped {
   tbody tr:nth-child(odd) :is(th, td) {
     @include table-row--striped;
   }
 }
 
+// TODO: remove with next major release
 @mixin table--unstriped {
   tbody tr:nth-child(odd) :is(th, td) {
     background-color: var(--sbb-table-background-color);
   }
 }
 
+// TODO: remove with next major release
 @mixin table-row--striped {
   background-color: var(--sbb-table-row-striped-color);
 }
 
+// TODO: remove with next major release
 @mixin table--negative {
   --sbb-table-border-color: var(--sbb-color-anthracite);
   --sbb-table-background-color: var(--sbb-background-color-1-negative);
@@ -135,6 +141,7 @@
   --sbb-table-caption-color: var(--sbb-color-cement);
 }
 
+// TODO: remove with next major release
 @mixin table--m {
   --sbb-table-header-cell-font-size: var(--sbb-text-font-size-xs);
   --sbb-table-data-cell-font-size: var(--sbb-text-font-size-s);
@@ -144,6 +151,7 @@
   --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-4x);
 }
 
+// TODO: remove with next major release
 @mixin table--s {
   --sbb-table-header-cell-font-size: var(--sbb-text-font-size-xs);
   --sbb-table-data-cell-font-size: var(--sbb-text-font-size-xs);
@@ -153,6 +161,7 @@
   --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-2x);
 }
 
+// TODO: remove with next major release
 @mixin table--xs {
   --sbb-table-header-cell-font-size: var(--sbb-text-font-size-xs);
   --sbb-table-data-cell-font-size: var(--sbb-text-font-size-xs);
@@ -162,6 +171,7 @@
   --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-1x);
 }
 
+// TODO: remove with next major release
 @mixin table--theme-iron {
   --sbb-table-cell-color: var(--sbb-color-4);
 
@@ -170,6 +180,7 @@
   }
 }
 
+// TODO: remove with next major release
 @mixin table--theme-iron-negative {
   --sbb-table-cell-color: var(--sbb-color-cloud);
 }