@sbb-esta/lyne-elements-dev 5.1.0-dev.1782305772 → 5.1.0-dev.1782310350

package/development/teaser.pure.js

@@ -5,7 +5,7 @@ import { html } from "lit/static-html.js";
 import { SbbLinkBaseElement, screenReaderOnlyStyles } from "./core.js";
 
 //#region src/elements/teaser/teaser.scss?inline
-var teaser_default = "@charset \"UTF-8\";\n:host {\n  --_sbb-teaser-forced-colors-inset: calc(-1 * var(--sbb-focus-outline-offset));\n  --_sbb-teaser-forced-colors-outline-offset: calc(2 * var(--sbb-focus-outline-offset));\n  --_sbb-teaser-forced-colors-border-radius: calc(\n    var(--sbb-teaser-border-radius) + var(--sbb-focus-outline-offset)\n  );\n  display: inline-block;\n  outline: none !important;\n}\n@media (forced-colors: active) {\n  :host {\n    --sbb-teaser-description-color: LinkText;\n    --sbb-title-color: LinkText !important;\n  }\n}\n\n:host([alignment=after]) {\n  --sbb-teaser-align-items: start;\n}\n\n:host([alignment=below]) {\n  --sbb-teaser-flex-direction: column;\n  --sbb-teaser-align-items: baseline;\n  --sbb-teaser-gap: var(--sbb-spacing-fixed-3x);\n}\n\n@media (any-hover: hover) {\n  :host(:hover) {\n    --sbb-teaser-scale: var(--sbb-teaser-scale-hover);\n  }\n}\n.sbb-teaser__wrapper {\n  display: flex;\n  position: relative;\n  cursor: var(--sbb-cursor-pointer);\n}\n.sbb-teaser__wrapper::before {\n  content: \"​\";\n  user-select: none;\n  width: 0;\n  height: 0;\n}\n\n.sbb-teaser {\n  text-decoration: none;\n  position: absolute;\n  inset: 0;\n}\n.sbb-teaser:focus-visible {\n  outline-offset: var(--sbb-focus-outline-offset);\n  outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);\n  border-radius: var(--sbb-teaser-border-radius);\n}\n@media (forced-colors: active) {\n  .sbb-teaser:focus-visible {\n    outline-offset: var(--_sbb-teaser-forced-colors-outline-offset);\n  }\n}\n@media (forced-colors: active) {\n  .sbb-teaser::before {\n    content: \"\";\n    position: absolute;\n    inset: var(--_sbb-teaser-forced-colors-inset);\n    pointer-events: none;\n    border-radius: var(--_sbb-teaser-forced-colors-border-radius);\n    border: var(--sbb-border-width-1x) solid CanvasText;\n  }\n}\n\n.sbb-teaser__container {\n  display: flex;\n  flex-flow: var(--sbb-teaser-flex-direction) nowrap;\n  align-items: var(--sbb-teaser-align-items);\n  gap: var(--sbb-teaser-gap);\n  max-width: 100%;\n  width: 100%;\n  pointer-events: none;\n}\n\n.sbb-teaser__text {\n  color: var(--sbb-teaser-description-color);\n  font-size: var(--sbb-teaser-font-size);\n  letter-spacing: var(--sbb-typo-letter-spacing-text);\n  overflow: hidden;\n  max-width: 100%;\n}\n\n::slotted([slot=image]) {\n  display: block;\n  width: var(--sbb-teaser-image-width);\n}\n\n.sbb-teaser__image-wrapper {\n  flex-shrink: 0;\n  overflow: hidden;\n  border-radius: var(--sbb-teaser-border-radius);\n  transition: box-shadow var(--sbb-teaser-image-animation-duration) var(--sbb-animation-easing);\n}\n:host(:not(:is(:state(slotted-image),[state--slotted-image]))) .sbb-teaser__image-wrapper {\n  display: none;\n}\n@media (any-hover: hover) {\n  :host(:hover) .sbb-teaser__image-wrapper {\n    box-shadow: var(--sbb-box-shadow-level-9-hard);\n  }\n}\n\n.sbb-teaser__description {\n  display: inline-block;\n  margin: 0;\n  padding: 0;\n}\n\n::slotted(sbb-chip-label) {\n  display: flex;\n  width: fit-content;\n  max-width: 100%;\n  margin-block-end: var(--sbb-spacing-fixed-1x);\n}\n\n::slotted(sbb-title) {\n  margin-block: 0;\n}\n";
+var teaser_default = "@charset \"UTF-8\";\n:host {\n  --_sbb-teaser-forced-colors-inset: calc(-1 * var(--sbb-focus-outline-offset));\n  --_sbb-teaser-forced-colors-outline-offset: calc(2 * var(--sbb-focus-outline-offset));\n  --_sbb-teaser-forced-colors-border-radius: calc(\n    var(--sbb-teaser-border-radius) + var(--sbb-focus-outline-offset)\n  );\n  display: inline-block;\n  outline: none !important;\n}\n@media (forced-colors: active) {\n  :host {\n    --sbb-teaser-description-color: LinkText;\n    --sbb-title-color: LinkText !important;\n  }\n}\n\n:host([alignment=after]) {\n  --sbb-teaser-align-items: start;\n}\n\n:host([alignment=below]) {\n  --sbb-teaser-flex-direction: column;\n  --sbb-teaser-align-items: baseline;\n  --sbb-teaser-gap: var(--sbb-spacing-fixed-3x);\n}\n\n@media (any-hover: hover) {\n  :host(:hover) {\n    --sbb-teaser-scale: var(--sbb-teaser-scale-hover);\n  }\n}\n.sbb-teaser__wrapper {\n  display: flex;\n  position: relative;\n  cursor: var(--sbb-cursor-pointer);\n}\n.sbb-teaser__wrapper::before {\n  content: \"​\";\n  user-select: none;\n  width: 0;\n  height: 0;\n}\n\n.sbb-teaser {\n  text-decoration: none;\n  position: absolute;\n  inset: 0;\n}\n.sbb-teaser:focus-visible {\n  outline-offset: var(--sbb-focus-outline-offset);\n  outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);\n  border-radius: var(--sbb-teaser-border-radius);\n}\n@media (forced-colors: active) {\n  .sbb-teaser:focus-visible {\n    outline-offset: var(--_sbb-teaser-forced-colors-outline-offset);\n  }\n}\n@media (forced-colors: active) {\n  .sbb-teaser::before {\n    content: \"\";\n    position: absolute;\n    inset: var(--_sbb-teaser-forced-colors-inset);\n    pointer-events: none;\n    border-radius: var(--_sbb-teaser-forced-colors-border-radius);\n    border: var(--sbb-border-width-1x) solid CanvasText;\n  }\n}\n\n.sbb-teaser__container {\n  display: flex;\n  flex-flow: var(--sbb-teaser-flex-direction) nowrap;\n  align-items: var(--sbb-teaser-align-items);\n  gap: var(--sbb-teaser-gap);\n  max-width: 100%;\n  width: 100%;\n  pointer-events: none;\n}\n\n.sbb-teaser__text {\n  color: var(--sbb-teaser-description-color);\n  font-size: var(--sbb-teaser-font-size);\n  letter-spacing: var(--sbb-typo-letter-spacing-text);\n  overflow: hidden;\n  max-width: 100%;\n}\n\n::slotted([slot=image]) {\n  display: block;\n  width: var(--sbb-teaser-image-width);\n}\n\n.sbb-teaser__image-wrapper {\n  flex-shrink: 0;\n  overflow: hidden;\n  border-radius: var(--sbb-teaser-border-radius);\n  transition: box-shadow var(--sbb-teaser-image-animation-duration) var(--sbb-animation-easing);\n  max-width: 100%;\n}\n:host(:not(:is(:state(slotted-image),[state--slotted-image]))) .sbb-teaser__image-wrapper {\n  display: none;\n}\n@media (any-hover: hover) {\n  :host(:hover) .sbb-teaser__image-wrapper {\n    box-shadow: var(--sbb-box-shadow-level-9-hard);\n  }\n}\n\n.sbb-teaser__description {\n  display: inline-block;\n  margin: 0;\n  padding: 0;\n}\n\n::slotted(sbb-chip-label) {\n  display: flex;\n  width: fit-content;\n  max-width: 100%;\n  margin-block-end: var(--sbb-spacing-fixed-1x);\n}\n\n::slotted(sbb-title) {\n  margin-block: 0;\n}\n";
 
 //#endregion
 //#region src/elements/teaser/teaser.component.ts

package/lean-off-brand-theme.css

@@ -1720,7 +1720,15 @@ summary {
   --sbb-stepper-marker-color: var(--sbb-color-3);
   --sbb-table-border-color: var(--sbb-color-cloud);
   --sbb-table-border-color: light-dark(var(--sbb-color-cloud), var(--sbb-color-anthracite));
+  --sbb-table-border-color-hover: var(--sbb-color-aluminium);
+  --sbb-table-border-color-hover: light-dark(
+    var(--sbb-color-aluminium),
+    var(--sbb-table-border-color)
+  );
+  --sbb-table-border-color-selected: var(--sbb-background-color-4-inverted);
+  --sbb-table-border-width: var(--sbb-border-width-1x);
   --sbb-table-background-color: var(--sbb-background-color-1);
+  --sbb-table-background-color-hover: var(--sbb-background-color-4);
   --sbb-table-row-striped-color: var(--sbb-background-color-3);
   --sbb-table-color: var(--sbb-color-1);
   --sbb-table-caption-color: var(--sbb-color-granite);
@@ -2546,7 +2554,7 @@ sbb-sidebar-container:is(:has(> sbb-sidebar:not([position=end]):is(:is(:state(st
 }
 
 :is(.sbb-table, .sbb-table-m, .sbb-table-s, .sbb-table-xs) {
-  --sbb-table-border: var(--sbb-border-width-1x) solid var(--sbb-table-border-color);
+  --sbb-table-border: var(--sbb-table-border-width) solid var(--sbb-table-border-color);
   --sbb-table-sticky-shadow-transition-duration: var(
     --sbb-disable-animation-duration,
     var(--sbb-animation-duration-6x)
@@ -2630,7 +2638,10 @@ sbb-sidebar-container:is(:has(> sbb-sidebar:not([position=end]):is(:is(:state(st
 sbb-table-wrapper[negative] .sbb-table,
 .sbb-table--negative {
   --sbb-table-border-color: var(--sbb-color-anthracite);
+  --sbb-table-border-color-hover: var(--sbb-table-border-color);
+  --sbb-table-border-color-selected: var(--sbb-color-cloud);
   --sbb-table-background-color: var(--sbb-background-color-1-negative);
+  --sbb-table-background-color-hover: var(--sbb-background-color-4-negative);
   --sbb-table-color: var(--sbb-color-1-negative);
   --sbb-table-row-striped-color: var(--sbb-background-color-3-negative);
   --sbb-table-caption-color: var(--sbb-color-cement);
@@ -2644,6 +2655,26 @@ sbb-table-wrapper[negative] .sbb-table,
   background-color: var(--sbb-table-background-color);
 }
 
+.sbb-table--hover tbody tr:hover :is(th, td) {
+  background-color: var(--sbb-table-background-color-hover);
+  border-color: var(--sbb-table-border-color-hover);
+}
+.sbb-table--hover :is(thead:has(+ tbody tr:first-of-type:hover) tr:last-of-type :is(th, td),
+tbody tr:has(+ tr:hover) :is(th, td)) {
+  border-block-end-color: var(--sbb-table-border-color-hover);
+}
+
+tr.sbb-table--selected :is(th, td) {
+  position: relative;
+}
+tr.sbb-table--selected :is(th, td)::after {
+  content: "";
+  position: absolute;
+  inset: 0 0 calc(-1 * var(--sbb-table-border-width));
+  pointer-events: none;
+  border-block-end: var(--sbb-table-border-width) solid var(--sbb-table-border-color-selected);
+}
+
 .sbb-table--theme-iron {
   --sbb-table-cell-color: var(--sbb-color-4);
 }
@@ -2766,6 +2797,9 @@ sbb-tab-nav-bar .sbb-tab-amount {
   filter: brightness(var(--sbb-teaser-image-brightness, 1));
   transition: filter, scale var(--sbb-teaser-image-animation-duration) var(--sbb-teaser-image-animation-easing);
 }
+:is(sbb-teaser, sbb-teaser-hero, sbb-teaser-product) .sbb-figure {
+  max-width: 100%;
+}
 
 sbb-teaser :is(sbb-image, img):not(.sbb-figure-overlap-image) {
   --sbb-image-object-fit: cover;

package/lean-safety-theme.css

@@ -1720,7 +1720,15 @@ summary {
   --sbb-stepper-marker-color: var(--sbb-color-3);
   --sbb-table-border-color: var(--sbb-color-cloud);
   --sbb-table-border-color: light-dark(var(--sbb-color-cloud), var(--sbb-color-anthracite));
+  --sbb-table-border-color-hover: var(--sbb-color-aluminium);
+  --sbb-table-border-color-hover: light-dark(
+    var(--sbb-color-aluminium),
+    var(--sbb-table-border-color)
+  );
+  --sbb-table-border-color-selected: var(--sbb-background-color-4-inverted);
+  --sbb-table-border-width: var(--sbb-border-width-1x);
   --sbb-table-background-color: var(--sbb-background-color-1);
+  --sbb-table-background-color-hover: var(--sbb-background-color-4);
   --sbb-table-row-striped-color: var(--sbb-background-color-3);
   --sbb-table-color: var(--sbb-color-1);
   --sbb-table-caption-color: var(--sbb-color-granite);
@@ -2546,7 +2554,7 @@ sbb-sidebar-container:is(:has(> sbb-sidebar:not([position=end]):is(:is(:state(st
 }
 
 :is(.sbb-table, .sbb-table-m, .sbb-table-s, .sbb-table-xs) {
-  --sbb-table-border: var(--sbb-border-width-1x) solid var(--sbb-table-border-color);
+  --sbb-table-border: var(--sbb-table-border-width) solid var(--sbb-table-border-color);
   --sbb-table-sticky-shadow-transition-duration: var(
     --sbb-disable-animation-duration,
     var(--sbb-animation-duration-6x)
@@ -2630,7 +2638,10 @@ sbb-sidebar-container:is(:has(> sbb-sidebar:not([position=end]):is(:is(:state(st
 sbb-table-wrapper[negative] .sbb-table,
 .sbb-table--negative {
   --sbb-table-border-color: var(--sbb-color-anthracite);
+  --sbb-table-border-color-hover: var(--sbb-table-border-color);
+  --sbb-table-border-color-selected: var(--sbb-color-cloud);
   --sbb-table-background-color: var(--sbb-background-color-1-negative);
+  --sbb-table-background-color-hover: var(--sbb-background-color-4-negative);
   --sbb-table-color: var(--sbb-color-1-negative);
   --sbb-table-row-striped-color: var(--sbb-background-color-3-negative);
   --sbb-table-caption-color: var(--sbb-color-cement);
@@ -2644,6 +2655,26 @@ sbb-table-wrapper[negative] .sbb-table,
   background-color: var(--sbb-table-background-color);
 }
 
+.sbb-table--hover tbody tr:hover :is(th, td) {
+  background-color: var(--sbb-table-background-color-hover);
+  border-color: var(--sbb-table-border-color-hover);
+}
+.sbb-table--hover :is(thead:has(+ tbody tr:first-of-type:hover) tr:last-of-type :is(th, td),
+tbody tr:has(+ tr:hover) :is(th, td)) {
+  border-block-end-color: var(--sbb-table-border-color-hover);
+}
+
+tr.sbb-table--selected :is(th, td) {
+  position: relative;
+}
+tr.sbb-table--selected :is(th, td)::after {
+  content: "";
+  position: absolute;
+  inset: 0 0 calc(-1 * var(--sbb-table-border-width));
+  pointer-events: none;
+  border-block-end: var(--sbb-table-border-width) solid var(--sbb-table-border-color-selected);
+}
+
 .sbb-table--theme-iron {
   --sbb-table-cell-color: var(--sbb-color-4);
 }
@@ -2766,6 +2797,9 @@ sbb-tab-nav-bar .sbb-tab-amount {
   filter: brightness(var(--sbb-teaser-image-brightness, 1));
   transition: filter, scale var(--sbb-teaser-image-animation-duration) var(--sbb-teaser-image-animation-easing);
 }
+:is(sbb-teaser, sbb-teaser-hero, sbb-teaser-product) .sbb-figure {
+  max-width: 100%;
+}
 
 sbb-teaser :is(sbb-image, img):not(.sbb-figure-overlap-image) {
   --sbb-image-object-fit: cover;

package/lean-theme.css

@@ -1720,7 +1720,15 @@ summary {
   --sbb-stepper-marker-color: var(--sbb-color-3);
   --sbb-table-border-color: var(--sbb-color-cloud);
   --sbb-table-border-color: light-dark(var(--sbb-color-cloud), var(--sbb-color-anthracite));
+  --sbb-table-border-color-hover: var(--sbb-color-aluminium);
+  --sbb-table-border-color-hover: light-dark(
+    var(--sbb-color-aluminium),
+    var(--sbb-table-border-color)
+  );
+  --sbb-table-border-color-selected: var(--sbb-background-color-4-inverted);
+  --sbb-table-border-width: var(--sbb-border-width-1x);
   --sbb-table-background-color: var(--sbb-background-color-1);
+  --sbb-table-background-color-hover: var(--sbb-background-color-4);
   --sbb-table-row-striped-color: var(--sbb-background-color-3);
   --sbb-table-color: var(--sbb-color-1);
   --sbb-table-caption-color: var(--sbb-color-granite);
@@ -2546,7 +2554,7 @@ sbb-sidebar-container:is(:has(> sbb-sidebar:not([position=end]):is(:is(:state(st
 }
 
 :is(.sbb-table, .sbb-table-m, .sbb-table-s, .sbb-table-xs) {
-  --sbb-table-border: var(--sbb-border-width-1x) solid var(--sbb-table-border-color);
+  --sbb-table-border: var(--sbb-table-border-width) solid var(--sbb-table-border-color);
   --sbb-table-sticky-shadow-transition-duration: var(
     --sbb-disable-animation-duration,
     var(--sbb-animation-duration-6x)
@@ -2630,7 +2638,10 @@ sbb-sidebar-container:is(:has(> sbb-sidebar:not([position=end]):is(:is(:state(st
 sbb-table-wrapper[negative] .sbb-table,
 .sbb-table--negative {
   --sbb-table-border-color: var(--sbb-color-anthracite);
+  --sbb-table-border-color-hover: var(--sbb-table-border-color);
+  --sbb-table-border-color-selected: var(--sbb-color-cloud);
   --sbb-table-background-color: var(--sbb-background-color-1-negative);
+  --sbb-table-background-color-hover: var(--sbb-background-color-4-negative);
   --sbb-table-color: var(--sbb-color-1-negative);
   --sbb-table-row-striped-color: var(--sbb-background-color-3-negative);
   --sbb-table-caption-color: var(--sbb-color-cement);
@@ -2644,6 +2655,26 @@ sbb-table-wrapper[negative] .sbb-table,
   background-color: var(--sbb-table-background-color);
 }
 
+.sbb-table--hover tbody tr:hover :is(th, td) {
+  background-color: var(--sbb-table-background-color-hover);
+  border-color: var(--sbb-table-border-color-hover);
+}
+.sbb-table--hover :is(thead:has(+ tbody tr:first-of-type:hover) tr:last-of-type :is(th, td),
+tbody tr:has(+ tr:hover) :is(th, td)) {
+  border-block-end-color: var(--sbb-table-border-color-hover);
+}
+
+tr.sbb-table--selected :is(th, td) {
+  position: relative;
+}
+tr.sbb-table--selected :is(th, td)::after {
+  content: "";
+  position: absolute;
+  inset: 0 0 calc(-1 * var(--sbb-table-border-width));
+  pointer-events: none;
+  border-block-end: var(--sbb-table-border-width) solid var(--sbb-table-border-color-selected);
+}
+
 .sbb-table--theme-iron {
   --sbb-table-cell-color: var(--sbb-color-4);
 }
@@ -2766,6 +2797,9 @@ sbb-tab-nav-bar .sbb-tab-amount {
   filter: brightness(var(--sbb-teaser-image-brightness, 1));
   transition: filter, scale var(--sbb-teaser-image-animation-duration) var(--sbb-teaser-image-animation-easing);
 }
+:is(sbb-teaser, sbb-teaser-hero, sbb-teaser-product) .sbb-figure {
+  max-width: 100%;
+}
 
 sbb-teaser :is(sbb-image, img):not(.sbb-figure-overlap-image) {
   --sbb-image-object-fit: cover;

package/off-brand-theme.css

@@ -1720,7 +1720,15 @@ summary {
   --sbb-stepper-marker-color: var(--sbb-color-3);
   --sbb-table-border-color: var(--sbb-color-cloud);
   --sbb-table-border-color: light-dark(var(--sbb-color-cloud), var(--sbb-color-anthracite));
+  --sbb-table-border-color-hover: var(--sbb-color-aluminium);
+  --sbb-table-border-color-hover: light-dark(
+    var(--sbb-color-aluminium),
+    var(--sbb-table-border-color)
+  );
+  --sbb-table-border-color-selected: var(--sbb-background-color-4-inverted);
+  --sbb-table-border-width: var(--sbb-border-width-1x);
   --sbb-table-background-color: var(--sbb-background-color-1);
+  --sbb-table-background-color-hover: var(--sbb-background-color-4);
   --sbb-table-row-striped-color: var(--sbb-background-color-3);
   --sbb-table-color: var(--sbb-color-1);
   --sbb-table-caption-color: var(--sbb-color-granite);
@@ -2546,7 +2554,7 @@ sbb-sidebar-container:is(:has(> sbb-sidebar:not([position=end]):is(:is(:state(st
 }
 
 :is(.sbb-table, .sbb-table-m, .sbb-table-s, .sbb-table-xs) {
-  --sbb-table-border: var(--sbb-border-width-1x) solid var(--sbb-table-border-color);
+  --sbb-table-border: var(--sbb-table-border-width) solid var(--sbb-table-border-color);
   --sbb-table-sticky-shadow-transition-duration: var(
     --sbb-disable-animation-duration,
     var(--sbb-animation-duration-6x)
@@ -2630,7 +2638,10 @@ sbb-sidebar-container:is(:has(> sbb-sidebar:not([position=end]):is(:is(:state(st
 sbb-table-wrapper[negative] .sbb-table,
 .sbb-table--negative {
   --sbb-table-border-color: var(--sbb-color-anthracite);
+  --sbb-table-border-color-hover: var(--sbb-table-border-color);
+  --sbb-table-border-color-selected: var(--sbb-color-cloud);
   --sbb-table-background-color: var(--sbb-background-color-1-negative);
+  --sbb-table-background-color-hover: var(--sbb-background-color-4-negative);
   --sbb-table-color: var(--sbb-color-1-negative);
   --sbb-table-row-striped-color: var(--sbb-background-color-3-negative);
   --sbb-table-caption-color: var(--sbb-color-cement);
@@ -2644,6 +2655,26 @@ sbb-table-wrapper[negative] .sbb-table,
   background-color: var(--sbb-table-background-color);
 }
 
+.sbb-table--hover tbody tr:hover :is(th, td) {
+  background-color: var(--sbb-table-background-color-hover);
+  border-color: var(--sbb-table-border-color-hover);
+}
+.sbb-table--hover :is(thead:has(+ tbody tr:first-of-type:hover) tr:last-of-type :is(th, td),
+tbody tr:has(+ tr:hover) :is(th, td)) {
+  border-block-end-color: var(--sbb-table-border-color-hover);
+}
+
+tr.sbb-table--selected :is(th, td) {
+  position: relative;
+}
+tr.sbb-table--selected :is(th, td)::after {
+  content: "";
+  position: absolute;
+  inset: 0 0 calc(-1 * var(--sbb-table-border-width));
+  pointer-events: none;
+  border-block-end: var(--sbb-table-border-width) solid var(--sbb-table-border-color-selected);
+}
+
 .sbb-table--theme-iron {
   --sbb-table-cell-color: var(--sbb-color-4);
 }
@@ -2766,6 +2797,9 @@ sbb-tab-nav-bar .sbb-tab-amount {
   filter: brightness(var(--sbb-teaser-image-brightness, 1));
   transition: filter, scale var(--sbb-teaser-image-animation-duration) var(--sbb-teaser-image-animation-easing);
 }
+:is(sbb-teaser, sbb-teaser-hero, sbb-teaser-product) .sbb-figure {
+  max-width: 100%;
+}
 
 sbb-teaser :is(sbb-image, img):not(.sbb-figure-overlap-image) {
   --sbb-image-object-fit: cover;

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@sbb-esta/lyne-elements-dev",
-  "version": "5.1.0-dev.1782305772",
+  "version": "5.1.0-dev.1782310350",
   "description": "Lyne Design System",
   "keywords": [
     "design system",
     "web components",
     "lit",
-    "https://github.com/sbb-design-systems/lyne-components/commit/6e8df05f2175c1fcd973b007a4d2d55ee3f4d946"
+    "https://github.com/sbb-design-systems/lyne-components/commit/09415e80b45e3276693cf8f74cb6fc02dc2cdd53"
   ],
   "type": "module",
   "exports": {

package/safety-theme.css

@@ -1720,7 +1720,15 @@ summary {
   --sbb-stepper-marker-color: var(--sbb-color-3);
   --sbb-table-border-color: var(--sbb-color-cloud);
   --sbb-table-border-color: light-dark(var(--sbb-color-cloud), var(--sbb-color-anthracite));
+  --sbb-table-border-color-hover: var(--sbb-color-aluminium);
+  --sbb-table-border-color-hover: light-dark(
+    var(--sbb-color-aluminium),
+    var(--sbb-table-border-color)
+  );
+  --sbb-table-border-color-selected: var(--sbb-background-color-4-inverted);
+  --sbb-table-border-width: var(--sbb-border-width-1x);
   --sbb-table-background-color: var(--sbb-background-color-1);
+  --sbb-table-background-color-hover: var(--sbb-background-color-4);
   --sbb-table-row-striped-color: var(--sbb-background-color-3);
   --sbb-table-color: var(--sbb-color-1);
   --sbb-table-caption-color: var(--sbb-color-granite);
@@ -2546,7 +2554,7 @@ sbb-sidebar-container:is(:has(> sbb-sidebar:not([position=end]):is(:is(:state(st
 }
 
 :is(.sbb-table, .sbb-table-m, .sbb-table-s, .sbb-table-xs) {
-  --sbb-table-border: var(--sbb-border-width-1x) solid var(--sbb-table-border-color);
+  --sbb-table-border: var(--sbb-table-border-width) solid var(--sbb-table-border-color);
   --sbb-table-sticky-shadow-transition-duration: var(
     --sbb-disable-animation-duration,
     var(--sbb-animation-duration-6x)
@@ -2630,7 +2638,10 @@ sbb-sidebar-container:is(:has(> sbb-sidebar:not([position=end]):is(:is(:state(st
 sbb-table-wrapper[negative] .sbb-table,
 .sbb-table--negative {
   --sbb-table-border-color: var(--sbb-color-anthracite);
+  --sbb-table-border-color-hover: var(--sbb-table-border-color);
+  --sbb-table-border-color-selected: var(--sbb-color-cloud);
   --sbb-table-background-color: var(--sbb-background-color-1-negative);
+  --sbb-table-background-color-hover: var(--sbb-background-color-4-negative);
   --sbb-table-color: var(--sbb-color-1-negative);
   --sbb-table-row-striped-color: var(--sbb-background-color-3-negative);
   --sbb-table-caption-color: var(--sbb-color-cement);
@@ -2644,6 +2655,26 @@ sbb-table-wrapper[negative] .sbb-table,
   background-color: var(--sbb-table-background-color);
 }
 
+.sbb-table--hover tbody tr:hover :is(th, td) {
+  background-color: var(--sbb-table-background-color-hover);
+  border-color: var(--sbb-table-border-color-hover);
+}
+.sbb-table--hover :is(thead:has(+ tbody tr:first-of-type:hover) tr:last-of-type :is(th, td),
+tbody tr:has(+ tr:hover) :is(th, td)) {
+  border-block-end-color: var(--sbb-table-border-color-hover);
+}
+
+tr.sbb-table--selected :is(th, td) {
+  position: relative;
+}
+tr.sbb-table--selected :is(th, td)::after {
+  content: "";
+  position: absolute;
+  inset: 0 0 calc(-1 * var(--sbb-table-border-width));
+  pointer-events: none;
+  border-block-end: var(--sbb-table-border-width) solid var(--sbb-table-border-color-selected);
+}
+
 .sbb-table--theme-iron {
   --sbb-table-cell-color: var(--sbb-color-4);
 }
@@ -2766,6 +2797,9 @@ sbb-tab-nav-bar .sbb-tab-amount {
   filter: brightness(var(--sbb-teaser-image-brightness, 1));
   transition: filter, scale var(--sbb-teaser-image-animation-duration) var(--sbb-teaser-image-animation-easing);
 }
+:is(sbb-teaser, sbb-teaser-hero, sbb-teaser-product) .sbb-figure {
+  max-width: 100%;
+}
 
 sbb-teaser :is(sbb-image, img):not(.sbb-figure-overlap-image) {
   --sbb-image-object-fit: cover;

package/standard-theme.css

@@ -1720,7 +1720,15 @@ summary {
   --sbb-stepper-marker-color: var(--sbb-color-3);
   --sbb-table-border-color: var(--sbb-color-cloud);
   --sbb-table-border-color: light-dark(var(--sbb-color-cloud), var(--sbb-color-anthracite));
+  --sbb-table-border-color-hover: var(--sbb-color-aluminium);
+  --sbb-table-border-color-hover: light-dark(
+    var(--sbb-color-aluminium),
+    var(--sbb-table-border-color)
+  );
+  --sbb-table-border-color-selected: var(--sbb-background-color-4-inverted);
+  --sbb-table-border-width: var(--sbb-border-width-1x);
   --sbb-table-background-color: var(--sbb-background-color-1);
+  --sbb-table-background-color-hover: var(--sbb-background-color-4);
   --sbb-table-row-striped-color: var(--sbb-background-color-3);
   --sbb-table-color: var(--sbb-color-1);
   --sbb-table-caption-color: var(--sbb-color-granite);
@@ -2546,7 +2554,7 @@ sbb-sidebar-container:is(:has(> sbb-sidebar:not([position=end]):is(:is(:state(st
 }
 
 :is(.sbb-table, .sbb-table-m, .sbb-table-s, .sbb-table-xs) {
-  --sbb-table-border: var(--sbb-border-width-1x) solid var(--sbb-table-border-color);
+  --sbb-table-border: var(--sbb-table-border-width) solid var(--sbb-table-border-color);
   --sbb-table-sticky-shadow-transition-duration: var(
     --sbb-disable-animation-duration,
     var(--sbb-animation-duration-6x)
@@ -2630,7 +2638,10 @@ sbb-sidebar-container:is(:has(> sbb-sidebar:not([position=end]):is(:is(:state(st
 sbb-table-wrapper[negative] .sbb-table,
 .sbb-table--negative {
   --sbb-table-border-color: var(--sbb-color-anthracite);
+  --sbb-table-border-color-hover: var(--sbb-table-border-color);
+  --sbb-table-border-color-selected: var(--sbb-color-cloud);
   --sbb-table-background-color: var(--sbb-background-color-1-negative);
+  --sbb-table-background-color-hover: var(--sbb-background-color-4-negative);
   --sbb-table-color: var(--sbb-color-1-negative);
   --sbb-table-row-striped-color: var(--sbb-background-color-3-negative);
   --sbb-table-caption-color: var(--sbb-color-cement);
@@ -2644,6 +2655,26 @@ sbb-table-wrapper[negative] .sbb-table,
   background-color: var(--sbb-table-background-color);
 }
 
+.sbb-table--hover tbody tr:hover :is(th, td) {
+  background-color: var(--sbb-table-background-color-hover);
+  border-color: var(--sbb-table-border-color-hover);
+}
+.sbb-table--hover :is(thead:has(+ tbody tr:first-of-type:hover) tr:last-of-type :is(th, td),
+tbody tr:has(+ tr:hover) :is(th, td)) {
+  border-block-end-color: var(--sbb-table-border-color-hover);
+}
+
+tr.sbb-table--selected :is(th, td) {
+  position: relative;
+}
+tr.sbb-table--selected :is(th, td)::after {
+  content: "";
+  position: absolute;
+  inset: 0 0 calc(-1 * var(--sbb-table-border-width));
+  pointer-events: none;
+  border-block-end: var(--sbb-table-border-width) solid var(--sbb-table-border-color-selected);
+}
+
 .sbb-table--theme-iron {
   --sbb-table-cell-color: var(--sbb-color-4);
 }
@@ -2766,6 +2797,9 @@ sbb-tab-nav-bar .sbb-tab-amount {
   filter: brightness(var(--sbb-teaser-image-brightness, 1));
   transition: filter, scale var(--sbb-teaser-image-animation-duration) var(--sbb-teaser-image-animation-easing);
 }
+:is(sbb-teaser, sbb-teaser-hero, sbb-teaser-product) .sbb-figure {
+  max-width: 100%;
+}
 
 sbb-teaser :is(sbb-image, img):not(.sbb-figure-overlap-image) {
   --sbb-image-object-fit: cover;

package/table/_table.global.scss

@@ -4,7 +4,16 @@ $theme: 'standard' !default;
 
 @mixin base {
   --sbb-table-border-color: light-dark(var(--sbb-color-cloud), var(--sbb-color-anthracite));
+
+  // In light mode and non negative we need to adjust the border color
+  --sbb-table-border-color-hover: light-dark(
+    var(--sbb-color-aluminium),
+    var(--sbb-table-border-color)
+  );
+  --sbb-table-border-color-selected: var(--sbb-background-color-4-inverted);
+  --sbb-table-border-width: var(--sbb-border-width-1x);
   --sbb-table-background-color: var(--sbb-background-color-1);
+  --sbb-table-background-color-hover: var(--sbb-background-color-4);
   --sbb-table-row-striped-color: var(--sbb-background-color-3);
   --sbb-table-color: var(--sbb-color-1);
   --sbb-table-caption-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
@@ -54,7 +63,7 @@ $theme: 'standard' !default;
   // We cannot use `border-collapse` because in sticky variants it gets visually broken.
   // Therefore, we have to build the grid avoiding double borders.
   :is(.sbb-table, .sbb-table-m, .sbb-table-s, .sbb-table-xs) {
-    --sbb-table-border: var(--sbb-border-width-1x) solid var(--sbb-table-border-color);
+    --sbb-table-border: var(--sbb-table-border-width) solid var(--sbb-table-border-color);
     --sbb-table-sticky-shadow-transition-duration: var(
       --sbb-disable-animation-duration,
       var(--sbb-animation-duration-6x)
@@ -156,7 +165,10 @@ $theme: 'standard' !default;
   sbb-table-wrapper[negative] .sbb-table,
   .sbb-table--negative {
     --sbb-table-border-color: var(--sbb-color-anthracite);
+    --sbb-table-border-color-hover: var(--sbb-table-border-color);
+    --sbb-table-border-color-selected: var(--sbb-color-cloud);
     --sbb-table-background-color: var(--sbb-background-color-1-negative);
+    --sbb-table-background-color-hover: var(--sbb-background-color-4-negative);
     --sbb-table-color: var(--sbb-color-1-negative);
     --sbb-table-row-striped-color: var(--sbb-background-color-3-negative);
     --sbb-table-caption-color: var(--sbb-color-cement);
@@ -174,6 +186,39 @@ $theme: 'standard' !default;
     }
   }
 
+  .sbb-table--hover {
+    tbody tr:hover :is(th, td) {
+      background-color: var(--sbb-table-background-color-hover);
+      border-color: var(--sbb-table-border-color-hover);
+    }
+
+    :is(
+      // Address last row of thead if hover is on first row of tbody
+      thead:has(+ tbody tr:first-of-type:hover) tr:last-of-type :is(th, td),
+
+      // Address row before hovered row
+      tbody tr:has(+ tr:hover) :is(th, td)
+    ) {
+      border-block-end-color: var(--sbb-table-border-color-hover);
+    }
+  }
+
+  tr.sbb-table--selected {
+    :is(th, td) {
+      position: relative;
+
+      &::after {
+        content: '';
+        position: absolute;
+
+        // Lay the border over the cell border
+        inset: 0 0 calc(-1 * var(--sbb-table-border-width));
+        pointer-events: none;
+        border-block-end: var(--sbb-table-border-width) solid var(--sbb-table-border-color-selected);
+      }
+    }
+  }
+
   .sbb-table--theme-iron {
     --sbb-table-cell-color: var(--sbb-color-4);
 

package/teaser/_teaser.global.scss

@@ -39,6 +39,10 @@ $theme: 'standard' !default;
         filter,
         scale var(--sbb-teaser-image-animation-duration) var(--sbb-teaser-image-animation-easing);
     }
+
+    .sbb-figure {
+      max-width: 100%;
+    }
   }
 
   sbb-teaser :is(sbb-image, img):not(.sbb-figure-overlap-image) {

package/teaser.pure.js

@@ -1,4 +1,4 @@
-import{__esDecorate as e,__runInitializers as t}from"tslib";import{unsafeCSS as n}from"lit";import{property as r}from"lit/decorators.js";import{html as i}from"lit/static-html.js";import{SbbLinkBaseElement as a,screenReaderOnlyStyles as o}from"./core.js";var s=`:host{--_sbb-teaser-forced-colors-inset:calc(-1 * var(--sbb-focus-outline-offset));--_sbb-teaser-forced-colors-outline-offset:calc(2 * var(--sbb-focus-outline-offset));--_sbb-teaser-forced-colors-border-radius:calc(var(--sbb-teaser-border-radius) + var(--sbb-focus-outline-offset));display:inline-block;outline:none!important}@media (forced-colors:active){:host{--sbb-teaser-description-color:LinkText;--sbb-title-color:LinkText!important}}:host([alignment=after]){--sbb-teaser-align-items:start}:host([alignment=below]){--sbb-teaser-flex-direction:column;--sbb-teaser-align-items:baseline;--sbb-teaser-gap:var(--sbb-spacing-fixed-3x)}@media (any-hover:hover){:host(:hover){--sbb-teaser-scale:var(--sbb-teaser-scale-hover)}}.sbb-teaser__wrapper{cursor:var(--sbb-cursor-pointer);display:flex;position:relative}.sbb-teaser__wrapper:before{content:"​";user-select:none;width:0;height:0}.sbb-teaser{text-decoration:none;position:absolute;inset:0}.sbb-teaser: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-teaser-border-radius)}@media (forced-colors:active){.sbb-teaser:focus-visible{outline-offset:var(--_sbb-teaser-forced-colors-outline-offset)}.sbb-teaser:before{content:"";inset:var(--_sbb-teaser-forced-colors-inset);pointer-events:none;border-radius:var(--_sbb-teaser-forced-colors-border-radius);border:var(--sbb-border-width-1x) solid CanvasText;position:absolute}}.sbb-teaser__container{flex-flow:var(--sbb-teaser-flex-direction) nowrap;align-items:var(--sbb-teaser-align-items);gap:var(--sbb-teaser-gap);pointer-events:none;width:100%;max-width:100%;display:flex}.sbb-teaser__text{color:var(--sbb-teaser-description-color);font-size:var(--sbb-teaser-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);max-width:100%;overflow:hidden}::slotted([slot=image]){width:var(--sbb-teaser-image-width);display:block}.sbb-teaser__image-wrapper{border-radius:var(--sbb-teaser-border-radius);transition:box-shadow var(--sbb-teaser-image-animation-duration) var(--sbb-animation-easing);flex-shrink:0;overflow:hidden}:host(:not(:is(:state(slotted-image),[state--slotted-image]))) .sbb-teaser__image-wrapper{display:none}@media (any-hover:hover){:host(:hover) .sbb-teaser__image-wrapper{box-shadow:var(--sbb-box-shadow-level-9-hard)}}.sbb-teaser__description{margin:0;padding:0;display:inline-block}::slotted(sbb-chip-label){width:fit-content;max-width:100%;margin-block-end:var(--sbb-spacing-fixed-1x);display:flex}::slotted(sbb-title){margin-block:0}
+import{__esDecorate as e,__runInitializers as t}from"tslib";import{unsafeCSS as n}from"lit";import{property as r}from"lit/decorators.js";import{html as i}from"lit/static-html.js";import{SbbLinkBaseElement as a,screenReaderOnlyStyles as o}from"./core.js";var s=`:host{--_sbb-teaser-forced-colors-inset:calc(-1 * var(--sbb-focus-outline-offset));--_sbb-teaser-forced-colors-outline-offset:calc(2 * var(--sbb-focus-outline-offset));--_sbb-teaser-forced-colors-border-radius:calc(var(--sbb-teaser-border-radius) + var(--sbb-focus-outline-offset));display:inline-block;outline:none!important}@media (forced-colors:active){:host{--sbb-teaser-description-color:LinkText;--sbb-title-color:LinkText!important}}:host([alignment=after]){--sbb-teaser-align-items:start}:host([alignment=below]){--sbb-teaser-flex-direction:column;--sbb-teaser-align-items:baseline;--sbb-teaser-gap:var(--sbb-spacing-fixed-3x)}@media (any-hover:hover){:host(:hover){--sbb-teaser-scale:var(--sbb-teaser-scale-hover)}}.sbb-teaser__wrapper{cursor:var(--sbb-cursor-pointer);display:flex;position:relative}.sbb-teaser__wrapper:before{content:"​";user-select:none;width:0;height:0}.sbb-teaser{text-decoration:none;position:absolute;inset:0}.sbb-teaser: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-teaser-border-radius)}@media (forced-colors:active){.sbb-teaser:focus-visible{outline-offset:var(--_sbb-teaser-forced-colors-outline-offset)}.sbb-teaser:before{content:"";inset:var(--_sbb-teaser-forced-colors-inset);pointer-events:none;border-radius:var(--_sbb-teaser-forced-colors-border-radius);border:var(--sbb-border-width-1x) solid CanvasText;position:absolute}}.sbb-teaser__container{flex-flow:var(--sbb-teaser-flex-direction) nowrap;align-items:var(--sbb-teaser-align-items);gap:var(--sbb-teaser-gap);pointer-events:none;width:100%;max-width:100%;display:flex}.sbb-teaser__text{color:var(--sbb-teaser-description-color);font-size:var(--sbb-teaser-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);max-width:100%;overflow:hidden}::slotted([slot=image]){width:var(--sbb-teaser-image-width);display:block}.sbb-teaser__image-wrapper{border-radius:var(--sbb-teaser-border-radius);transition:box-shadow var(--sbb-teaser-image-animation-duration) var(--sbb-animation-easing);flex-shrink:0;max-width:100%;overflow:hidden}:host(:not(:is(:state(slotted-image),[state--slotted-image]))) .sbb-teaser__image-wrapper{display:none}@media (any-hover:hover){:host(:hover) .sbb-teaser__image-wrapper{box-shadow:var(--sbb-box-shadow-level-9-hard)}}.sbb-teaser__description{margin:0;padding:0;display:inline-block}::slotted(sbb-chip-label){width:fit-content;max-width:100%;margin-block-end:var(--sbb-spacing-fixed-1x);display:flex}::slotted(sbb-title){margin-block:0}
 `;let c=(()=>{let c=a,l,u=[],d=[];return class extends c{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(c[Symbol.metadata]??null):void 0;l=[r({reflect:!0})],e(this,null,l,{kind:`accessor`,name:`alignment`,static:!1,private:!1,access:{has:e=>`alignment`in e,get:e=>e.alignment,set:(e,t)=>{e.alignment=t}},metadata:t},u,d),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-teaser`}static{this.styles=[o,n(s)]}#e=t(this,u,`after-centered`);get alignment(){return this.#e}set alignment(e){this.#e=e}_handleSlotchange(){let e=Array.from(this.children).find(e=>e.localName===`sbb-chip-label`);e&&(e.slot=`chip`);let t=Array.from(this.children).find(e=>e.localName===`sbb-title`);t&&(t.slot=`title`)}_configureChip(e){let t=e.target.assignedElements().find(e=>e.localName===`sbb-chip-label`);t&&(customElements.upgrade(t),t.color=`charcoal`,t.size=`xxs`)}_configureTitle(e){let t=e.target.assignedElements().find(e=>e.localName===`sbb-title`);t&&(customElements.upgrade(t),t.visualLevel=`5`)}render(){return i`
       <div class="sbb-teaser__wrapper">
         ${this.renderLink(i`<span class="sbb-screen-reader-only">${this.accessibilityLabel}</span>`)}