@sbb-esta/lyne-elements 1.15.1 → 2.0.0

package/core/styles/_index.scss

@@ -9,6 +9,7 @@
 @forward './mixins/chip';
 @forward './mixins/font-face';
 @forward './mixins/helpers';
+@forward './mixins/image';
 @forward './mixins/inputs';
 @forward './mixins/layout';
 @forward './mixins/link';

package/core/styles/core.scss

@@ -153,3 +153,151 @@ input[data-sbb-time-input] {
     max-width: var(--sbb-time-input-s-max-width);
   }
 }
+
+img {
+  aspect-ratio: var(--sbb-image-aspect-ratio);
+  object-fit: var(--sbb-image-object-fit);
+  object-position: var(--sbb-image-object-position);
+}
+
+// TODO: Move back to the sbb-container components when the global css refactoring happens
+sbb-container {
+  [slot='image']:is(sbb-image, img),
+  [slot='image'] :is(sbb-image, img) {
+    --sbb-image-object-fit: cover;
+
+    border-radius: var(--sbb-container-background-border-radius);
+    height: 100%;
+    position: absolute;
+  }
+}
+
+// TODO: Move back to the sbb-flip-card-summary components when the global css refactoring happens
+sbb-flip-card-summary {
+  [slot='image']:is(sbb-image, img),
+  [slot='image'] :is(sbb-image, img) {
+    --sbb-image-aspect-ratio: auto;
+    --sbb-image-object-fit: cover;
+
+    border-radius: 0;
+    display: block;
+    height: 100%;
+  }
+}
+
+// TODO: Move back to the sbb-lead-container components when the global css refactoring happens
+sbb-lead-container {
+  [slot='image']:is(sbb-image, img, picture),
+  [slot='image'] :is(sbb-image, img, picture) {
+    --sbb-image-aspect-ratio: var(--sbb-lead-container-image-ratio);
+    --sbb-image-object-fit: cover;
+
+    border-radius: var(--sbb-lead-container-image-border-radius);
+  }
+}
+
+// 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(
+    --sbb-disable-animation-duration,
+    var(--sbb-animation-duration-4x)
+  );
+  --sbb-teaser-image-animation-easing: var(--sbb-animation-easing);
+
+  &:hover {
+    @include mediaqueries.hover-mq($hover: true) {
+      --sbb-teaser-image-brightness: var(--sbb-teaser-image-brightness-hover);
+    }
+  }
+
+  [slot='image']:is(sbb-image, img),
+  [slot='image'] :is(sbb-image, img) {
+    will-change: filter;
+    filter: brightness(var(--sbb-teaser-image-brightness, 1));
+    transition: filter var(--sbb-teaser-image-animation-duration)
+      var(--sbb-teaser-image-animation-easing);
+  }
+}
+
+// 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) {
+    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 {
+    place-self: stretch;
+  }
+}
+
+// TODO: Move back to the teaser components when the global css refactoring happens
+:is(sbb-teaser) {
+  [slot='image']:is(sbb-image, img),
+  [slot='image'] :is(sbb-image, img) {
+    transition-property: filter, scale;
+    will-change: filter, scale;
+    scale: var(--sbb-teaser-scale, 1);
+  }
+
+  :is(sbb-image, img) {
+    --sbb-image-object-fit: cover;
+    --sbb-image-aspect-ratio: 4 / 3;
+  }
+}
+
+// TODO: Move back to the teaser-hero components when the global css refactoring happens
+:is(sbb-teaser-hero) {
+  :is(sbb-image, img) {
+    --sbb-image-aspect-ratio: 1 / 1;
+
+    border-radius: 0;
+
+    @include mediaqueries.mq($from: small) {
+      --sbb-image-aspect-ratio: 16 / 9;
+    }
+  }
+
+  img {
+    width: 100%;
+    display: block;
+  }
+}
+
+// TODO: move to train formation after css refactoring
+sbb-train-formation:has(sbb-train[direction-label]) {
+  --sbb-train-formation-reserve-spacing-display: block;
+}
+
+// TODO: move to train formation after css refactoring
+sbb-train-formation:has(sbb-train-wagon[sector]) {
+  --sbb-train-formation-show-sectors-gap: 1;
+}
+
+// TODO: move to train formation after css refactoring
+sbb-train-formation:not(:has(sbb-train-wagon[label])) {
+  --sbb-train-formation-wagon-label-display: none;
+}
+
+// TODO: Move to sbb-train-wagon after CSS refactoring
+sbb-train-formation[view='side'] sbb-train-wagon {
+  --sbb-train-wagon-wagon-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='M12.5,0.5 h55 a12,12 0 0 1 12,12 v15 a12,12 0 0 1 -12,12 h-55 a12,12 0 0 1 -12,-12 v-15 a12,12 0 0 1 12,-12 z' stroke='%23000000' stroke-width='1'/%3E%3C/svg%3E");
+  --sbb-train-wagon-wagon-closed-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%3Crect x='0.5' y='0.5' width='79' height='39' rx='11.5' stroke='%23000000'/%3E%3Cpath d='M76 4L4 36' stroke='%23000000'/%3E%3Cpath d='M76 36L4 4' stroke='%23000000'/%3E%3C/svg%3E");
+  --sbb-train-wagon-wagon-end-left-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='M10.745 7.90416C13.5624 3.30431 18.5686 0.5 23.9627 0.5H68C74.3513 0.5 79.5 5.64873 79.5 12V28C79.5 34.3513 74.3513 39.5 68 39.5H11.922C2.93614 39.5 -2.57807 29.6562 2.11537 21.9934L10.745 7.90416Z' stroke='%23000000'/%3E%3C/svg%3E");
+  --sbb-train-wagon-locomotive-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='M10.745 7.90416C13.5624 3.30431 18.5686 0.5 23.9627 0.5H56.0373C61.4314 0.5 66.4376 3.30432 69.255 7.90416L77.8846 21.9934C82.5781 29.6562 77.0639 39.5 68.078 39.5H11.922C2.93615 39.5 -2.57807 29.6562 2.11537 21.9934L10.745 7.90416Z' stroke='%23000000'/%3E%3C/svg%3E");
+  --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='M0.5 12C0.5 5.64873 5.64873 0.5 12 0.5H56.0373C61.4314 0.5 66.4376 3.30432 69.255 7.90416L77.8846 21.9934C82.5781 29.6562 77.0638 39.5 68.0779 39.5H12C5.64873 39.5 0.5 34.3513 0.5 28V12Z' stroke='%23000000'/%3E%3C/svg%3E");
+}
+
+// TODO: Move to sbb-train-wagon after CSS refactoring
+sbb-train-formation[view='top'] sbb-train-wagon {
+  --sbb-train-wagon-wagon-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 h63 a8,8 0 0 1 8,8 v23 a8,8 0 0 1 -8,8 h-63 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%0A");
+  --sbb-train-wagon-wagon-closed-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%3Crect x='0.5' y='0.5' width='79' height='39' rx='7.5' stroke='%23000000'/%3E%3Cpath d='M77.5 2.5L2.5 37.5' stroke='%23000000'/%3E%3Cpath d='M77.5 37.5L2.5 2.5' stroke='%23000000'/%3E%3C/svg%3E");
+  --sbb-train-wagon-wagon-end-left-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 transform='translate(80,40) rotate(180)' 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-train-wagon-locomotive-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='M20,0.5 h40 a19.5,19.5 0 0 1 19.5,19.5 v0 a19.5,19.5 0 0 1 -19.5,19.5 h-40 a19.5,19.5 0 0 1 -19.5,-19.5 v0 a19.5,19.5 0 0 1 19.5,-19.5 z' stroke='%23000000' stroke-width='1'/%3E%3C/svg%3E%0A");
+  --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");
+}

package/core/styles/image.scss

@@ -0,0 +1,66 @@
+@use './mixins/typo';
+@use './mixins/image';
+
+.sbb-figure {
+  @include image.figure;
+
+  :is(img, sbb-image, .sbb-image) {
+    @include image.figure-image;
+  }
+
+  :is(figcaption, .sbb-caption) {
+    @include image.figure-caption;
+  }
+
+  // Utility classes for placing elements over an image (eg. 'sbb-figure-overlap-start-start')
+  :is(
+    .sbb-figure-overlap-start-start,
+    .sbb-figure-overlap-start-end,
+    .sbb-figure-overlap-end-start,
+    .sbb-figure-overlap-end-end
+  ) {
+    @include image.figure-overlap-base;
+  }
+
+  $alignments: start, end;
+  @each $row-alignment in $alignments {
+    @each $column-alignment in $alignments {
+      .sbb-figure-overlap-#{$row-alignment}-#{$column-alignment} {
+        @include image.figure-overlap($row-alignment, $column-alignment);
+      }
+    }
+  }
+}
+
+// Utility classes for the aspect ratio (eg. 'sbb-image-16-9')
+$aspects-ratio: (
+  'free': 'auto',
+  '1-1': '1 / 1',
+  '1-2': '1 / 2',
+  '2-1': '2 / 1',
+  '2-3': '2 / 3',
+  '3-2': '3 / 2',
+  '3-4': '3 / 4',
+  '4-3': '4 / 3',
+  '4-5': '4 / 5',
+  '5-4': '5 / 4',
+  '9-16': '9 / 16',
+  '16-9': '16 / 9',
+);
+@each $name, $ratio in $aspects-ratio {
+  :is(sbb-image, img).sbb-image-#{$name} {
+    --sbb-image-aspect-ratio: #{$ratio};
+  }
+}
+
+// Utility classes for the border radius (eg. 'sbb-image-border-radius-none')
+$border-radius: (
+  'default': 'var(--sbb-border-radius-4x)',
+  'none': '0',
+  'round': 'var(--sbb-border-radius-infinity)',
+);
+@each $name, $radius in $border-radius {
+  :is(img, sbb-image).sbb-image-border-radius-#{$name} {
+    border-radius: #{$radius};
+  }
+}

package/core/styles/mixins/animation.scss

@@ -3,11 +3,9 @@
 // ----------------------------------------------------------------------------------------------------
 
 @mixin disable-animation {
-  --sbb-disable-animation-time: 0.1ms;
-  --sbb-disable-animation-zero-time: 0s;
+  --sbb-disable-animation-duration: 0s;
 }
 
 @mixin enable-animation {
-  --sbb-disable-animation-time: initial;
-  --sbb-disable-animation-zero-time: initial;
+  --sbb-disable-animation-duration: initial;
 }

package/core/styles/mixins/buttons.scss

@@ -3,6 +3,9 @@
 @use '../core/functions';
 @use './typo';
 
+$disabled: '[disabled], :disabled, [disabled-interactive], [data-disabled], [data-group-disabled]';
+$active: ':active, [data-active]';
+
 // ----------------------------------------------------------------------------------------------------
 // Buttons Mixins
 // ----------------------------------------------------------------------------------------------------
@@ -29,7 +32,7 @@
     @include icon-button-variables-negative;
   }
 
-  :host(:is([disabled], [data-disabled], [data-group-disabled])) {
+  :host(:is(#{$disabled})) {
     @include icon-button-disabled(#{$button-selector});
   }
 
@@ -42,11 +45,11 @@
     @include icon-button-focus-visible(#{$button-selector});
   }
 
-  :host(:not([disabled], [data-disabled], [data-group-disabled], :active, [data-active]):hover) {
+  :host(:not(#{$disabled}, #{$active}):hover) {
     @include icon-button-hover(#{$button-selector});
   }
 
-  :host(:not([disabled], [data-disabled], [data-group-disabled]):is(:active, [data-active])) {
+  :host(:not(#{$disabled}):is(#{$active})) {
     @include icon-button-active(#{$button-selector});
   }
 }
@@ -64,7 +67,7 @@
   --sbb-button-border-disabled-style: dashed;
   --sbb-button-border-radius: var(--sbb-border-radius-infinity);
   --sbb-button-transition-duration: var(
-    --sbb-disable-animation-zero-time,
+    --sbb-disable-animation-duration,
     var(--sbb-animation-duration-2x)
   );
   --sbb-button-transition-easing-function: var(--sbb-animation-easing);

package/core/styles/mixins/card.scss

@@ -13,7 +13,7 @@
   --sbb-card-background-color: var(--sbb-color-white);
   --sbb-card-border-radius: var(--sbb-border-radius-4x);
   --sbb-card-animation-duration: var(
-    --sbb-disable-animation-zero-time,
+    --sbb-disable-animation-duration,
     var(--sbb-animation-duration-1x)
   );
   --sbb-card-animation-easing: var(--sbb-animation-easing);

package/core/styles/mixins/chip.scss

@@ -2,45 +2,45 @@
 @use './helpers';
 @use './typo';
 
-@mixin chip-variables--color-milk {
-  --sbb-chip-color: var(--sbb-color-granite);
-  --sbb-chip-background-color: var(--sbb-color-milk);
+@mixin chip-label-variables--color-milk {
+  --sbb-chip-label-color: var(--sbb-color-granite);
+  --sbb-chip-label-background-color: var(--sbb-color-milk);
 }
 
-@mixin chip-variables--color-charcoal {
-  --sbb-chip-color: var(--sbb-color-white);
-  --sbb-chip-background-color: var(--sbb-color-charcoal);
+@mixin chip-label-variables--color-charcoal {
+  --sbb-chip-label-color: var(--sbb-color-white);
+  --sbb-chip-label-background-color: var(--sbb-color-charcoal);
 }
 
-@mixin chip-variables--color-white {
-  --sbb-chip-color: var(--sbb-color-granite);
-  --sbb-chip-background-color: var(--sbb-color-white);
+@mixin chip-label-variables--color-white {
+  --sbb-chip-label-color: var(--sbb-color-granite);
+  --sbb-chip-label-background-color: var(--sbb-color-white);
 }
 
-@mixin chip-variables--color-granite {
-  --sbb-chip-color: var(--sbb-color-white);
-  --sbb-chip-background-color: var(--sbb-color-granite);
+@mixin chip-label-variables--color-granite {
+  --sbb-chip-label-color: var(--sbb-color-white);
+  --sbb-chip-label-background-color: var(--sbb-color-granite);
 }
 
-@mixin chip-variables--size-xxs {
-  --sbb-chip-padding-block: 0em;
-  --sbb-chip-padding-inline: var(--sbb-spacing-fixed-2x);
+@mixin chip-label-variables--size-xxs {
+  --sbb-chip-label-padding-block: 0em;
+  --sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-2x);
   --sbb-text-font-size: var(--sbb-font-size-text-xxs);
 }
 
-@mixin chip-variables--size-xs {
-  --sbb-chip-padding-block: var(--sbb-spacing-fixed-1x);
-  --sbb-chip-padding-inline: var(--sbb-spacing-fixed-3x);
+@mixin chip-label-variables--size-xs {
+  --sbb-chip-label-padding-block: var(--sbb-spacing-fixed-1x);
+  --sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-3x);
   --sbb-text-font-size: var(--sbb-font-size-text-xs);
 }
 
-@mixin chip-variables--size-s {
-  --sbb-chip-padding-block: var(--sbb-spacing-fixed-1x);
-  --sbb-chip-padding-inline: var(--sbb-spacing-fixed-4x);
+@mixin chip-label-variables--size-s {
+  --sbb-chip-label-padding-block: var(--sbb-spacing-fixed-1x);
+  --sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-4x);
   --sbb-text-font-size: var(--sbb-font-size-text-s);
 }
 
-@mixin chip-rules {
+@mixin chip-label-rules {
   @include typo.text;
 
   // We need an even value to make it work smoothly in Safari
@@ -50,12 +50,12 @@
   justify-content: center;
   height: calc(
     var(--sbb-typo-line-height-body-text) * var(--sbb-text-font-size) +
-      var(--sbb-chip-padding-block) * 2
+      var(--sbb-chip-label-padding-block) * 2
   );
-  background-color: var(--sbb-chip-background-color);
-  padding-inline: var(--sbb-chip-padding-inline);
+  background-color: var(--sbb-chip-label-background-color);
+  padding-inline: var(--sbb-chip-label-padding-inline);
   border-radius: var(--sbb-border-radius-infinity);
-  color: var(--sbb-chip-color);
+  color: var(--sbb-chip-label-color);
 
   // Overflow hidden needed because line-height can be taller than height which can cause weird layout shifting
   overflow: hidden;
@@ -66,7 +66,7 @@
   }
 }
 
-@mixin chip-rules-ellipsis {
+@mixin chip-label-rules-ellipsis {
   @include helpers.ellipsis;
 
   display: inline-block;
@@ -74,22 +74,22 @@
 
 @mixin chip($color: milk, $size: xxs) {
   @if $color == milk {
-    @include chip-variables--color-milk;
+    @include chip-label-variables--color-milk;
   } @else if $color == charcoal {
-    @include chip-variables--color-charcoal;
+    @include chip-label-variables--color-charcoal;
   } @else if $color == white {
-    @include chip-variables--color-white;
+    @include chip-label-variables--color-white;
   } @else if $color == granite {
-    @include chip-variables--color-granite;
+    @include chip-label-variables--color-granite;
   }
 
   @if $size == xxs {
-    @include chip-variables--size-xxs;
+    @include chip-label-variables--size-xxs;
   } @else if $size == xs {
-    @include chip-variables--size-xs;
+    @include chip-label-variables--size-xs;
   } @else if $size == s {
-    @include chip-variables--size-s;
+    @include chip-label-variables--size-s;
   }
 
-  @include chip-rules;
+  @include chip-label-rules;
 }

package/core/styles/mixins/image.scss

@@ -0,0 +1,34 @@
+@use './typo';
+
+@mixin figure {
+  display: grid;
+  grid-template-rows: auto;
+  grid-template-columns: 100%;
+  grid-auto-rows: auto;
+  margin: 0;
+}
+
+@mixin figure-image {
+  grid-row: 1;
+  grid-column: 1;
+  width: 100%;
+}
+
+@mixin figure-caption {
+  grid-row: 2;
+  grid-column: 1;
+  padding-block-start: var(--sbb-spacing-fixed-4x);
+  @include typo.text-xs--regular;
+}
+
+@mixin figure-overlap-base {
+  position: relative;
+  order: 1; // Alternative to z-index
+  grid-row: 1;
+  grid-column: 1;
+  margin: var(--sbb-spacing-responsive-xxxs);
+}
+
+@mixin figure-overlap($row-alignment, $column-alignment) {
+  place-self: #{$row-alignment} #{$column-alignment};
+}

package/core/styles/mixins/overlay.scss

@@ -16,7 +16,7 @@
   --sbb-options-panel-options-border-radius: 0 0 var(--sbb-options-panel-border-radius)
     var(--sbb-options-panel-border-radius);
   --sbb-options-panel-animation-duration: var(
-    --sbb-disable-animation-time,
+    --sbb-disable-animation-duration,
     var(--sbb-animation-duration-4x)
   );
   --sbb-options-panel-animation-timing-function: ease;

package/core/styles/mixins/panel.scss

@@ -19,7 +19,7 @@
   --sbb-panel-padding-inline: var(--sbb-spacing-responsive-m);
   --sbb-panel-gap: var(--sbb-spacing-responsive-xs);
   --sbb-panel-animation-duration: var(
-    --sbb-disable-animation-zero-time,
+    --sbb-disable-animation-duration,
     var(--sbb-animation-duration-4x)
   );
   --sbb-panel-animation-easing: var(--sbb-animation-easing);

package/core/styles/scrollbar.scss

@@ -0,0 +1,44 @@
+@use './mixins/scrollbar';
+
+.sbb-scrollbar,
+.sbb-scrollbar-negative,
+.sbb-scrollbar-thick,
+.sbb-scrollbar-thick-negative,
+.sbb-scrollbar-track-visible,
+.sbb-scrollbar-negative-track-visible,
+.sbb-scrollbar-thick-track-visible,
+.sbb-scrollbar-thick-negative-track-visible {
+  @include scrollbar.scrollbar-rules;
+}
+
+.sbb-scrollbar {
+  @include scrollbar.scrollbar-variables($size: thin, $negative: false, $track-visible: false);
+}
+
+.sbb-scrollbar-negative {
+  @include scrollbar.scrollbar-variables($size: thin, $negative: true, $track-visible: false);
+}
+
+.sbb-scrollbar-thick {
+  @include scrollbar.scrollbar-variables($size: thick, $negative: false, $track-visible: false);
+}
+
+.sbb-scrollbar-thick-negative {
+  @include scrollbar.scrollbar-variables($size: thick, $negative: true, $track-visible: false);
+}
+
+.sbb-scrollbar-track-visible {
+  @include scrollbar.scrollbar-variables($size: thin, $negative: false, $track-visible: true);
+}
+
+.sbb-scrollbar-negative-track-visible {
+  @include scrollbar.scrollbar-variables($size: thin, $negative: true, $track-visible: true);
+}
+
+.sbb-scrollbar-thick-track-visible {
+  @include scrollbar.scrollbar-variables($size: thick, $negative: false, $track-visible: true);
+}
+
+.sbb-scrollbar-thick-negative-track-visible {
+  @include scrollbar.scrollbar-variables($size: thick, $negative: true, $track-visible: true);
+}

package/core/styles/standard-theme.scss

@@ -5,6 +5,8 @@
 @use './typography';
 @use './a11y';
 @use './animation';
+@use './image';
 @use './layout';
 @use './lists';
+@use './scrollbar';
 @use './table';

package/core/styles/table.scss

@@ -59,3 +59,7 @@ sbb-table-wrapper[negative] .sbb-table,
 .sbb-table-caption {
   @include table.table-caption;
 }
+
+html.sbb-lean .sbb-table:not(.sbb-table-xs, .sbb-table-m) {
+  @include table.table--s;
+}

package/core/testing/event-spy.d.ts

@@ -5,6 +5,7 @@
 export declare class EventSpy<T extends Event> {
     private _event;
     private readonly _target;
+    private readonly _options;
     get count(): number;
     private _count;
     get events(): T[];
@@ -12,7 +13,7 @@ export declare class EventSpy<T extends Event> {
     get firstEvent(): T | null;
     get lastEvent(): T | null;
     private _promiseEventMap;
-    constructor(_event: string, _target?: Node | null);
+    constructor(_event: string, _target?: Node | null, _options?: AddEventListenerOptions | null);
     calledOnce(timeout?: number): Promise<T>;
     calledTimes(count: number, timeout?: number): Promise<T>;
     private _wrapPromiseWithTimeout;

package/core/testing/event-spy.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"event-spy.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/testing/event-spy.ts"],"names":[],"mappings":"AAMA;;;GAGG;AACH,qBAAa,QAAQ,CAAC,CAAC,SAAS,KAAK;IAsBjC,OAAO,CAAC,MAAM;IACd,OAAO,CAAC,QAAQ,CAAC,OAAO;IAtB1B,IAAW,KAAK,IAAI,MAAM,CAEzB;IACD,OAAO,CAAC,MAAM,CAAa;IAE3B,IAAW,MAAM,IAAI,CAAC,EAAE,CAEvB;IACD,OAAO,CAAC,OAAO,CAAW;IAE1B,IAAW,UAAU,IAAI,CAAC,GAAG,IAAI,CAEhC;IAED,IAAW,SAAS,IAAI,CAAC,GAAG,IAAI,CAE/B;IAED,OAAO,CAAC,gBAAgB,CAA6C;gBAG3D,MAAM,EAAE,MAAM,EACL,OAAO,GAAE,IAAI,GAAG,IAAW;IASvC,UAAU,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,CAAC,CAAC;IAIxC,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,SAAO,GAAG,OAAO,CAAC,CAAC,CAAC;IA6B7D,OAAO,CAAC,uBAAuB;IAa/B,OAAO,CAAC,eAAe;CAOxB"}
+{"version":3,"file":"event-spy.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/testing/event-spy.ts"],"names":[],"mappings":"AAMA;;;GAGG;AACH,qBAAa,QAAQ,CAAC,CAAC,SAAS,KAAK;IAsBjC,OAAO,CAAC,MAAM;IACd,OAAO,CAAC,QAAQ,CAAC,OAAO;IACxB,OAAO,CAAC,QAAQ,CAAC,QAAQ;IAvB3B,IAAW,KAAK,IAAI,MAAM,CAEzB;IACD,OAAO,CAAC,MAAM,CAAa;IAE3B,IAAW,MAAM,IAAI,CAAC,EAAE,CAEvB;IACD,OAAO,CAAC,OAAO,CAAW;IAE1B,IAAW,UAAU,IAAI,CAAC,GAAG,IAAI,CAEhC;IAED,IAAW,SAAS,IAAI,CAAC,GAAG,IAAI,CAE/B;IAED,OAAO,CAAC,gBAAgB,CAA6C;gBAG3D,MAAM,EAAE,MAAM,EACL,OAAO,GAAE,IAAI,GAAG,IAAW,EAC3B,QAAQ,GAAE,uBAAuB,GAAG,IAAW;IAS3D,UAAU,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,CAAC,CAAC;IAIxC,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,SAAO,GAAG,OAAO,CAAC,CAAC,CAAC;IA6B7D,OAAO,CAAC,uBAAuB;IAa/B,OAAO,CAAC,eAAe;CAWxB"}

package/core/testing.d.ts

@@ -2,7 +2,6 @@ export * from './testing/event-spy.js';
 export * from './testing/mocha-extensions.js';
 export * from './testing/scroll.js';
 export * from './testing/wait-for-condition.js';
-export * from './testing/wait-for-event.js';
 export * from './testing/wait-for-image-ready.js';
 export * from './testing/wait-for-render.js';
 //# sourceMappingURL=testing.d.ts.map

package/core/testing.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"testing.d.ts","sourceRoot":"","sources":["../../../src/elements/core/testing.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,qBAAqB,CAAC;AACpC,cAAc,iCAAiC,CAAC;AAChD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,mCAAmC,CAAC;AAClD,cAAc,8BAA8B,CAAC"}
+{"version":3,"file":"testing.d.ts","sourceRoot":"","sources":["../../../src/elements/core/testing.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,qBAAqB,CAAC;AACpC,cAAc,iCAAiC,CAAC;AAChD,cAAc,mCAAmC,CAAC;AAClD,cAAc,8BAA8B,CAAC"}