@sbb-esta/lyne-elements 2.0.0 → 2.0.2

package/core/mixins.js

@@ -5,9 +5,9 @@ var M = (o, b, d) => b.has(o) || D("Cannot " + d);
 var x = (o, b, d) => (M(o, b, "read from private field"), d ? d.call(o) : b.get(o)), S = (o, b, d) => b.has(o) ? D("Cannot add the same private member more than once") : b instanceof WeakSet ? b.add(o) : b.set(o, d), _ = (o, b, d, n) => (M(o, b, "write to private field"), n ? n.call(o, d) : b.set(o, d), d);
 import { __esDecorate as g, __runInitializers as m } from "tslib";
 import { property as k, state as q } from "lit/decorators.js";
-import { forceType as C, getOverride as j, hostAttributes as V } from "./decorators.js";
-import { defaultConverter as O, html as R, nothing as E, css as $ } from "lit";
-import { preventScrollOnSpacebarPress as A, EventEmitter as G } from "./eventing.js";
+import { forceType as C, getOverride as N, hostAttributes as j } from "./decorators.js";
+import { defaultConverter as O, html as R, nothing as E, css as V } from "lit";
+import { preventScrollOnSpacebarPress as $, EventEmitter as G } from "./eventing.js";
 import { interactivityChecker as P, isArrowKeyPressed as T, getNextElementIndex as H } from "./a11y.js";
 import { SbbConnectedAbortController as K } from "./controllers.js";
 import "../screen-reader-only.js";
@@ -36,7 +36,7 @@ const I = (o) => (() => {
     }
   }, r = new WeakMap(), (() => {
     const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(d[Symbol.metadata] ?? null) : void 0;
-    n = [C(), k({ reflect: !0, type: Boolean }), j((t, a) => a || t.isDisabledExternally())], g(s, null, n, { kind: "accessor", name: "disabled", static: !1, private: !1, access: { has: (t) => "disabled" in t, get: (t) => t.disabled, set: (t, a) => {
+    n = [C(), k({ reflect: !0, type: Boolean }), N((t, a) => a || t.isDisabledExternally())], g(s, null, n, { kind: "accessor", name: "disabled", static: !1, private: !1, access: { has: (t) => "disabled" in t, get: (t) => t.disabled, set: (t, a) => {
       t.disabled = a;
     } }, metadata: e }, u, l), e && Object.defineProperty(s, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
   })(), s;
@@ -69,7 +69,7 @@ const I = (o) => (() => {
     }
   }
   return b;
-}, U = (o) => (() => {
+}, L = (o) => (() => {
   var h, e;
   let d = o, n = [], u, l, r, s = [], f = [];
   return e = class extends d {
@@ -183,7 +183,7 @@ const I = (o) => (() => {
       c.formDisabled = p;
     } }, metadata: i }, s, f), i && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: i });
   })(), e.formAssociated = !0, e;
-})(), N = (o) => (() => {
+})(), U = (o) => (() => {
   var l;
   let d = o, n = [], u;
   return l = class extends d {
@@ -215,9 +215,9 @@ const I = (o) => (() => {
   })(), l;
 })(), le = (o) => (() => {
   var h;
-  let d = [V({
+  let d = [j({
     tabindex: "0"
-  })], n, u = [], l, r = I(N(U(o))), s = [], f;
+  })], n, u = [], l, r = I(U(L(o))), s = [], f;
   return h = class extends r {
     /** Whether the checkbox is checked. */
     set checked(t) {
@@ -235,18 +235,13 @@ const I = (o) => (() => {
       return "checkbox";
     }
     constructor() {
-      super(), this._attributeMutationBlocked = (m(this, s), !1), this._checked = !1, this._handleKeyboardInteraction = (t) => {
-        t.key === " " && this._handleUserInteraction();
+      var t, a, i;
+      super(), this._attributeMutationBlocked = (m(this, s), !1), this._checked = !1, this._handleKeyboardInteraction = (c) => {
+        c.key === " " && this._handleUserInteraction();
       }, this._handleUserInteraction = () => {
-        var t;
-        this.disabled || ((t = this.withUserInteraction) == null || t.call(this), this.checked = !this.checked, this._attributeMutationBlocked = !0, this.dispatchEvent(new InputEvent("input", { composed: !0, bubbles: !0 })), this.dispatchEvent(new Event("change", { bubbles: !0 })));
-      }, this.internals.role = "checkbox";
-    }
-    connectedCallback() {
-      super.connectedCallback(), this.addEventListener("click", this._handleUserInteraction), this.addEventListener("keydown", A), this.addEventListener("keyup", this._handleKeyboardInteraction);
-    }
-    disconnectedCallback() {
-      super.disconnectedCallback(), this.removeEventListener("click", this._handleUserInteraction), this.removeEventListener("keydown", A), this.removeEventListener("keyup", this._handleKeyboardInteraction);
+        var c;
+        this.disabled || ((c = this.withUserInteraction) == null || c.call(this), this.checked = !this.checked, this._attributeMutationBlocked = !0, this.dispatchEvent(new InputEvent("input", { composed: !0, bubbles: !0 })), this.dispatchEvent(new Event("change", { bubbles: !0 })));
+      }, this.internals.role = "checkbox", (t = this.addEventListener) == null || t.call(this, "click", this._handleUserInteraction), (a = this.addEventListener) == null || a.call(this, "keydown", $), (i = this.addEventListener) == null || i.call(this, "keyup", this._handleKeyboardInteraction);
     }
     attributeChangedCallback(t, a, i) {
       (t !== "checked" || !this._attributeMutationBlocked) && super.attributeChangedCallback(t, a, i);
@@ -290,14 +285,15 @@ const I = (o) => (() => {
       a.checked = i;
     } }, metadata: t }, null, s), g(null, n = { value: l }, d, { kind: "class", name: l.name, metadata: t }, null, u), l = n.value, t && Object.defineProperty(l, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t }), m(l, u);
   })(), l;
-})(), z = /* @__PURE__ */ new WeakMap(), oe = (o) => (() => {
+})(), A = /* @__PURE__ */ new WeakMap(), oe = (o) => (() => {
   var r, s;
-  let d = I(N(U(o))), n, u = [], l = [];
+  let d = I(U(L(o))), n, u = [], l = [];
   return s = class extends d {
     constructor() {
+      var e;
       super();
       S(this, r);
-      _(this, r, m(this, u, !1)), this.abort = (m(this, l), new K(this)), this._didLoad = !1, this.internals.role = "radio";
+      _(this, r, m(this, u, !1)), this.abort = (m(this, l), new K(this)), this._didLoad = !1, this.internals.role = "radio", (e = this.addEventListener) == null || e.call(this, "keydown", (t) => this._handleArrowKeyDown(t));
     }
     /**
      * Whether the radio button is checked.
@@ -316,9 +312,7 @@ const I = (o) => (() => {
       return "radio";
     }
     connectedCallback() {
-      super.connectedCallback(), this._connectToRegistry(), this.addEventListener("keydown", (e) => this._handleArrowKeyDown(e), {
-        signal: this.abort.signal
-      });
+      super.connectedCallback(), this._connectToRegistry();
     }
     disconnectedCallback() {
       super.disconnectedCallback(), this._disconnectFromRegistry();
@@ -383,7 +377,7 @@ const I = (o) => (() => {
       if (!this.name)
         return;
       const e = this.form ?? this.getRootNode();
-      this._radioButtonGroupsMap = z.get(e), this._radioButtonGroupsMap || (this._radioButtonGroupsMap = /* @__PURE__ */ new Map(), z.set(e, this._radioButtonGroupsMap)), this.associatedRadioButtons = this._radioButtonGroupsMap.get(this.name), this.associatedRadioButtons || (this.associatedRadioButtons = /* @__PURE__ */ new Set(), this._radioButtonGroupsMap.set(this.name, this.associatedRadioButtons));
+      this._radioButtonGroupsMap = A.get(e), this._radioButtonGroupsMap || (this._radioButtonGroupsMap = /* @__PURE__ */ new Map(), A.set(e, this._radioButtonGroupsMap)), this.associatedRadioButtons = this._radioButtonGroupsMap.get(this.name), this.associatedRadioButtons || (this.associatedRadioButtons = /* @__PURE__ */ new Set(), this._radioButtonGroupsMap.set(this.name, this.associatedRadioButtons));
       const t = Array.from(this.associatedRadioButtons);
       this.associatedRadioButtons.clear();
       const a = t.findIndex((i) => this.compareDocumentPosition(i) & Node.DOCUMENT_POSITION_FOLLOWING);
@@ -456,7 +450,7 @@ const I = (o) => (() => {
     }
   }
   return b;
-}, F = "data-ssr-child-count", L = "li", de = (o) => (() => {
+}, z = "data-ssr-child-count", F = "li", de = (o) => (() => {
   var r, s;
   let d = X(o), n, u = [], l = [];
   return s = class extends d {
@@ -465,7 +459,7 @@ const I = (o) => (() => {
       S(this, r);
       _(this, r, m(this, u, [])), this._handleSlotchange = (m(this, l), () => {
         const e = Array.from(this.children ?? []).filter((t) => this.listChildLocalNames.includes(t.localName));
-        e.length === this.listChildren.length && this.listChildren.every((t, a) => e[a] === t) || (this.listChildren.filter((t) => !e.includes(t)).forEach((t) => t.removeAttribute("slot")), this.listChildren = e, this.listChildren.forEach((t, a) => t.setAttribute("slot", `${L}-${a}`)), this.removeAttribute(F));
+        e.length === this.listChildren.length && this.listChildren.every((t, a) => e[a] === t) || (this.listChildren.filter((t) => !e.includes(t)).forEach((t) => t.removeAttribute("slot")), this.listChildren = e, this.listChildren.forEach((t, a) => t.setAttribute("slot", `${F}-${a}`)), this.removeAttribute(z));
       });
     }
     /**
@@ -527,10 +521,10 @@ const I = (o) => (() => {
      * children to be passed via the `data-ssr-child-count` attribute value.
      */
     listSlotEntries(e) {
-      return (this.listChildren.length ? this.listChildren : Array.from({ length: +(this.getAttribute(F) ?? 0) })).map((a, i) => {
+      return (this.listChildren.length ? this.listChildren : Array.from({ length: +(this.getAttribute(z) ?? 0) })).map((a, i) => {
         var c;
         return {
-          name: `${L}-${i}`,
+          name: `${F}-${i}`,
           ariaHidden: ((c = e == null ? void 0 : e.localNameVisualOnly) == null ? void 0 : c.includes(a.localName)) ?? !1
         };
       });
@@ -636,20 +630,20 @@ const I = (o) => (() => {
     }
   }
   return b;
-}, he = $`:host{--sbb-selection-panel-background: var( --sbb-selection-expansion-panel-inner-background, var(--sbb-color-white) );--sbb-selection-panel-border-color: var(--sbb-color-cloud);--sbb-selection-panel-border-radius: var( --sbb-selection-expansion-panel-border-radius, var(--sbb-border-radius-4x) );--sbb-selection-panel-border-width: var( --sbb-selection-expansion-panel-inner-border-width, var(--sbb-border-width-1x) );--sbb-selection-panel-input-padding: var(--sbb-spacing-responsive-xs) var(--sbb-spacing-responsive-xxs);--sbb-selection-panel-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--sbb-selection-panel-cursor: pointer;--sbb-selection-panel-suffix-color: var(--sbb-color-charcoal);--sbb-selection-panel-subtext-color: var(--sbb-color-granite);display:block;outline:none!important}:host([size=s]){--sbb-selection-panel-input-padding: var(--sbb-spacing-responsive-xxs) var(--sbb-spacing-responsive-xxxs)}:host([color=milk]){--sbb-selection-panel-background: var( --sbb-selection-expansion-panel-inner-background, var(--sbb-color-milk) )}:host([borderless]:not([data-checked])){--sbb-selection-panel-border-color: transparent}:host(:is([data-checked]):not(:disabled,[disabled])){--sbb-selection-panel-border-color: var(--sbb-color-charcoal);--sbb-selection-panel-border-width: var( --sbb-selection-expansion-panel-inner-border-width, var(--sbb-border-width-2x) )}:host(:is(:disabled,[disabled])){--sbb-selection-panel-cursor: default}.sbb-selection-panel{display:block;cursor:var(--sbb-selection-panel-cursor);position:relative;border-radius:var(--sbb-selection-panel-border-radius);box-shadow:inset 0 0 0 var(--sbb-selection-panel-border-width) var(--sbb-selection-panel-border-color);padding:var(--sbb-selection-panel-input-padding);background-color:var(--sbb-selection-panel-background);transition-duration:var(--sbb-selection-panel-animation-duration);transition-timing-function:var(--sbb-animation-easing);transition-property:box-shadow}@media (forced-colors: active){.sbb-selection-panel:after{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:var(--sbb-selection-panel-border-width) solid var(--sbb-selection-panel-border-color);border-radius:var(--sbb-selection-panel-border-radius)}}:host(:focus-visible) .sbb-selection-panel{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}.sbb-selection-panel__badge{-webkit-user-select:none;user-select:none;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--sbb-selection-panel-border-radius);overflow:hidden}slot[name=suffix]{color:var(--sbb-selection-panel-suffix-color)}slot[name=subtext]{display:block;color:var(--sbb-selection-panel-subtext-color);padding-inline-start:var(--sbb-spacing-fixed-8x)}:host(:not([data-slot-names~=subtext])) slot[name=subtext]{display:none}`;
+}, he = V`:host{--sbb-selection-panel-background: var( --sbb-selection-expansion-panel-inner-background, var(--sbb-color-white) );--sbb-selection-panel-border-color: var(--sbb-color-cloud);--sbb-selection-panel-border-radius: var( --sbb-selection-expansion-panel-border-radius, var(--sbb-border-radius-4x) );--sbb-selection-panel-border-width: var( --sbb-selection-expansion-panel-inner-border-width, var(--sbb-border-width-1x) );--sbb-selection-panel-input-padding: var(--sbb-spacing-responsive-xs) var(--sbb-spacing-responsive-xxs);--sbb-selection-panel-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--sbb-selection-panel-cursor: pointer;--sbb-selection-panel-suffix-color: var(--sbb-color-charcoal);--sbb-selection-panel-subtext-color: var(--sbb-color-granite);display:block;outline:none!important}:host([size=s]){--sbb-selection-panel-input-padding: var(--sbb-spacing-responsive-xxs) var(--sbb-spacing-responsive-xxxs)}:host([color=milk]){--sbb-selection-panel-background: var( --sbb-selection-expansion-panel-inner-background, var(--sbb-color-milk) )}:host([borderless]:not([data-checked])){--sbb-selection-panel-border-color: transparent}:host(:is([data-checked]):not(:disabled,[disabled])){--sbb-selection-panel-border-color: var(--sbb-color-charcoal);--sbb-selection-panel-border-width: var( --sbb-selection-expansion-panel-inner-border-width, var(--sbb-border-width-2x) )}:host(:is(:disabled,[disabled])){--sbb-selection-panel-cursor: default}.sbb-selection-panel{display:block;cursor:var(--sbb-selection-panel-cursor);position:relative;border-radius:var(--sbb-selection-panel-border-radius);box-shadow:inset 0 0 0 var(--sbb-selection-panel-border-width) var(--sbb-selection-panel-border-color);padding:var(--sbb-selection-panel-input-padding);background-color:var(--sbb-selection-panel-background);transition-duration:var(--sbb-selection-panel-animation-duration);transition-timing-function:var(--sbb-animation-easing);transition-property:box-shadow}@media (forced-colors: active){.sbb-selection-panel:after{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:var(--sbb-selection-panel-border-width) solid var(--sbb-selection-panel-border-color);border-radius:var(--sbb-selection-panel-border-radius)}}:host(:focus-visible) .sbb-selection-panel{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}.sbb-selection-panel__badge{-webkit-user-select:none;user-select:none;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--sbb-selection-panel-border-radius);overflow:hidden}slot[name=suffix]{color:var(--sbb-selection-panel-suffix-color)}slot[name=subtext]{display:block;color:var(--sbb-selection-panel-subtext-color);padding-inline-start:var(--sbb-spacing-fixed-8x)}:host(:not([data-slot-names~=subtext])) slot[name=subtext]{display:none}`;
 export {
   W as SbbDisabledInteractiveMixin,
   I as SbbDisabledMixin,
   ne as SbbDisabledTabIndexActionMixin,
   le as SbbFormAssociatedCheckboxMixin,
-  U as SbbFormAssociatedMixin,
+  L as SbbFormAssociatedMixin,
   oe as SbbFormAssociatedRadioButtonMixin,
   X as SbbHydrationMixin,
   de as SbbNamedSlotListMixin,
   ce as SbbNegativeMixin,
   ue as SbbPanelMixin,
-  N as SbbRequiredMixin,
+  U as SbbRequiredMixin,
   be as SbbUpdateSchedulerMixin,
   he as panelCommonStyle,
-  z as radioButtonRegistry
+  A as radioButtonRegistry
 };

package/core/styles/core.scss

@@ -12,7 +12,7 @@
 
 // Core variables, are always needed
 :root {
-  // Grab css vars defined by `@sbb-esta/lyne-design-tokens` package
+  // Grab CSS vars defined by `@sbb-esta/lyne-design-tokens` package
   @include sbb-css-tokens.lyne-design-tokens-css-variables;
 
   & {
@@ -160,10 +160,10 @@ img {
   object-position: var(--sbb-image-object-position);
 }
 
-// TODO: Move back to the sbb-container components when the global css refactoring happens
+// 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) {
+  > [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);
@@ -172,10 +172,10 @@ sbb-container {
   }
 }
 
-// TODO: Move back to the sbb-flip-card-summary components when the global css refactoring happens
+// 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) {
+  > [slot='image']:is(sbb-image, img),
+  > [slot='image'] :is(sbb-image, img) {
     --sbb-image-aspect-ratio: auto;
     --sbb-image-object-fit: cover;
 
@@ -185,10 +185,10 @@ sbb-flip-card-summary {
   }
 }
 
-// TODO: Move back to the sbb-lead-container components when the global css refactoring happens
+// 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) {
+  > [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;
 
@@ -196,9 +196,17 @@ sbb-lead-container {
   }
 }
 
+// TODO: Move back to the sbb-message components when the global CSS refactoring happens
+sbb-message {
+  > [slot='image']:is(sbb-image, img),
+  > [slot='image'] :is(sbb-image, img) {
+    border-radius: var(--sbb-message-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
+// 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(
@@ -213,8 +221,7 @@ sbb-lead-container {
     }
   }
 
-  [slot='image']:is(sbb-image, img),
-  [slot='image'] :is(sbb-image, img) {
+  :is(sbb-image, img) {
     will-change: filter;
     filter: brightness(var(--sbb-teaser-image-brightness, 1));
     transition: filter var(--sbb-teaser-image-animation-duration)
@@ -222,7 +229,7 @@ sbb-lead-container {
   }
 }
 
-// TODO: Move back to the teaser components when the global css refactoring happens
+// 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.
@@ -236,22 +243,17 @@ sbb-lead-container {
   }
 }
 
-// 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);
-  }
+// TODO: Move back to the teaser components when the global CSS refactoring happens
+sbb-teaser :is(sbb-image, img) {
+  --sbb-image-object-fit: cover;
+  --sbb-image-aspect-ratio: 4 / 3;
 
-  :is(sbb-image, img) {
-    --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
+// 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;
@@ -264,22 +266,23 @@ sbb-lead-container {
   }
 
   img {
-    width: 100%;
     display: block;
+    align-self: stretch;
+    width: 100%;
   }
 }
 
-// TODO: move to train formation after css refactoring
+// 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
+// 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
+// TODO: move to train formation after CSS refactoring
 sbb-train-formation:not(:has(sbb-train-wagon[label])) {
   --sbb-train-formation-wagon-label-display: none;
 }

package/core/styles/mixins/buttons.scss

@@ -101,7 +101,7 @@ $active: ':active, [data-active]';
     height: fit-content;
 
     // Use !important here to not interfere with Firefox focus ring definition
-    // which appears in normalize css of several frameworks.
+    // which appears in normalize CSS of several frameworks.
     outline: none !important;
 
     @include icon-button-variables;

package/core/styles/mixins/lists.scss

@@ -96,6 +96,7 @@
   }
 }
 
+// @deprecated Will be removed with next major version
 @mixin base-marker-list(
   $dimensions,
   $padding-inline,
@@ -159,49 +160,84 @@
 }
 
 @mixin icon-list {
-  @include base-marker-list(
-    $dimensions: '--sbb-icon-list-dimensions',
-    $padding-inline: '--sbb-icon-list-padding-inline',
-    $to-text-gap: '--sbb-icon-list-to-text-gap',
-    $vertical-gap: '--sbb-icon-list-vertical-gap',
-    $text-to-marker-block-offset: '--sbb-icon-list-text-to-marker-block-offset'
+  --sbb-icon-list-marker-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M3 12a9 9 0 0 1 9-9 9 9 0 0 1 9 9 9 9 0 0 1-9 9 9 9 0 0 1-9-9m9-10C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2m-1.104 13.305 5-6.5-.792-.61-4.69 6.096-2.102-1.681-.624.78 2.5 2 .398.319z" clip-rule="evenodd"></path></svg>');
+  --sbb-icon-list-marker-icon-color: currentcolor;
+  --sbb-icon-list-vertical-gap: var(--sbb-spacing-fixed-2x);
+  --sbb-icon-list-dimensions: var(--sbb-size-icon-ui-small);
+  --sbb-icon-list-to-text-gap: var(--sbb-spacing-fixed-2x);
+
+  // Additional space from overall li padding to the text because text
+  // has to be centered to marker number.
+  --sbb-icon-list-text-to-marker-block-offset: calc(
+    0.5 *
+      (
+        var(--sbb-icon-list-dimensions) - var(--sbb-typo-line-height-body-text) *
+          var(--sbb-text-font-size)
+      )
   );
 
-  & {
-    --sbb-icon-list-marker-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M3 12a9 9 0 0 1 9-9 9 9 0 0 1 9 9 9 9 0 0 1-9 9 9 9 0 0 1-9-9m9-10C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2m-1.104 13.305 5-6.5-.792-.61-4.69 6.096-2.102-1.681-.624.78 2.5 2 .398.319z" clip-rule="evenodd"></path></svg>');
-    --sbb-icon-list-marker-icon-color: currentcolor;
-    --sbb-icon-list-vertical-gap: var(--sbb-spacing-fixed-2x);
-    --sbb-icon-list-dimensions: var(--sbb-size-icon-ui-small);
-    --sbb-icon-list-to-text-gap: var(--sbb-spacing-fixed-2x);
-  }
+  list-style: none;
+  margin: 0;
+  padding: 0;
 
-  > li::before {
-    content: '';
-    background-color: var(--sbb-icon-list-marker-icon-color);
-    mask-image: var(--sbb-icon-list-marker-icon);
-    mask-repeat: no-repeat;
-    mask-position: center;
-    mask-size: 100%;
+  // stylelint-disable-next-line no-descending-specificity
+  > li {
+    position: relative;
+    padding-inline: calc(var(--sbb-icon-list-dimensions) + var(--sbb-icon-list-to-text-gap)) 0;
+    min-height: var(--sbb-icon-list-dimensions);
+
+    + li {
+      margin-block-start: var(--sbb-icon-list-vertical-gap);
+    }
+
+    p {
+      margin-block: 0;
+    }
+
+    // P has to be redefined to be more specific
+    > * + p {
+      margin-block-start: var(--sbb-spacing-responsive-xxxs);
+    }
+
+    &::before {
+      content: '';
+      position: absolute;
+      width: var(--sbb-icon-list-dimensions);
+      height: var(--sbb-icon-list-dimensions);
+      margin-block-start: calc(-1 * var(--sbb-icon-list-text-to-marker-block-offset));
+      inset-inline-start: 0;
+      background-color: var(--sbb-icon-list-marker-icon-color);
+      mask-image: var(--sbb-icon-list-marker-icon);
+      mask-repeat: no-repeat;
+      mask-position: center;
+      mask-size: 100%;
+    }
   }
 }
 
 @mixin step-list {
-  @include base-marker-list(
-    $dimensions: '--sbb-step-list-dimensions',
-    $padding-inline: '--sbb-step-list-padding-inline',
-    $to-text-gap: '--sbb-step-list-to-text-gap',
-    $vertical-gap: '--sbb-step-list-vertical-gap',
-    $text-to-marker-block-offset: '--sbb-step-list-text-to-marker-block-offset'
+  --sbb-step-list-dimensions: #{functions.px-to-rem-build(34)};
+  --sbb-step-list-padding-inline: var(--sbb-spacing-responsive-xxs);
+  --sbb-step-list-to-text-gap: var(--sbb-spacing-responsive-xxxs);
+  --sbb-step-list-padding-block: var(--sbb-spacing-fixed-3x);
+  --sbb-step-list-vertical-gap: var(--sbb-spacing-fixed-1x);
+  --sbb-step-list-border-radius: var(--sbb-border-radius-4x);
+
+  // Additional space from overall li padding to the text because text
+  // has to be centered to marker number.
+  --sbb-step-list-text-to-marker-block-offset: calc(
+    0.5 *
+      (
+        var(--sbb-step-list-dimensions) - var(--sbb-typo-line-height-body-text) *
+          var(--sbb-text-font-size)
+      )
   );
 
-  & {
-    --sbb-step-list-padding-block: var(--sbb-spacing-fixed-3x);
-    --sbb-step-list-vertical-gap: var(--sbb-spacing-fixed-1x);
-    --sbb-step-list-border-radius: var(--sbb-border-radius-4x);
-
-    counter-reset: steps;
-    color: var(--sbb-color-iron);
-  }
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  counter-reset: steps;
+  color: var(--sbb-color-iron);
 
   &:where(.sbb-text-s) {
     --sbb-step-list-padding-block: var(--sbb-spacing-fixed-4x);
@@ -211,7 +247,15 @@
     --sbb-step-list-padding-block: var(--sbb-spacing-fixed-5x);
   }
 
+  &:where(.sbb-text-xl) {
+    @include mediaqueries.mq($from: medium) {
+      --sbb-step-list-dimensions: #{functions.px-to-rem-build(41)};
+    }
+  }
+
+  // stylelint-disable-next-line no-descending-specificity
   > li {
+    position: relative;
     counter-increment: steps;
     background-color: var(--sbb-color-milk);
     padding-block: calc(
@@ -226,12 +270,33 @@
     min-height: calc(var(--sbb-step-list-dimensions) + 2 * var(--sbb-step-list-padding-block));
 
     &::before {
+      @include typo.text-xxs--bold;
+
       content: counter(steps);
+      position: absolute;
       display: flex;
       align-items: center;
       justify-content: center;
-      border: var(--sbb-border-width-1x) solid var(--sbb-color-cement);
+      height: var(--sbb-step-list-dimensions);
+      width: var(--sbb-step-list-dimensions);
+      margin-block-start: calc(-1 * var(--sbb-step-list-text-to-marker-block-offset));
+      inset-inline-start: var(--sbb-step-list-padding-inline);
       color: var(--sbb-color-charcoal);
+      border: var(--sbb-border-width-1x) solid var(--sbb-color-cement);
+      border-radius: 50%;
+    }
+
+    + li {
+      margin-block-start: var(--sbb-step-list-vertical-gap);
+    }
+
+    p {
+      margin-block: 0;
+    }
+
+    // P has to be redefined to be more specific
+    > * + p {
+      margin-block-start: var(--sbb-spacing-responsive-xxxs);
     }
 
     &:first-of-type {

package/core.css

@@ -1304,16 +1304,16 @@ img {
   object-position: var(--sbb-image-object-position);
 }
 
-sbb-container [slot=image]:is(sbb-image, img),
-sbb-container [slot=image] :is(sbb-image, img) {
+sbb-container > [slot=image]:is(sbb-image, img),
+sbb-container > [slot=image] :is(sbb-image, img) {
   --sbb-image-object-fit: cover;
   border-radius: var(--sbb-container-background-border-radius);
   height: 100%;
   position: absolute;
 }
 
-sbb-flip-card-summary [slot=image]:is(sbb-image, img),
-sbb-flip-card-summary [slot=image] :is(sbb-image, img) {
+sbb-flip-card-summary > [slot=image]:is(sbb-image, img),
+sbb-flip-card-summary > [slot=image] :is(sbb-image, img) {
   --sbb-image-aspect-ratio: auto;
   --sbb-image-object-fit: cover;
   border-radius: 0;
@@ -1321,13 +1321,18 @@ sbb-flip-card-summary [slot=image] :is(sbb-image, img) {
   height: 100%;
 }
 
-sbb-lead-container [slot=image]:is(sbb-image, img, picture),
-sbb-lead-container [slot=image] :is(sbb-image, img, picture) {
+sbb-lead-container > [slot=image]:is(sbb-image, img, picture),
+sbb-lead-container > [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);
 }
 
+sbb-message > [slot=image]:is(sbb-image, img),
+sbb-message > [slot=image] :is(sbb-image, img) {
+  border-radius: var(--sbb-message-image-border-radius);
+}
+
 :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(
@@ -1341,8 +1346,7 @@ sbb-lead-container [slot=image] :is(sbb-image, img, picture) {
     --sbb-teaser-image-brightness: var(--sbb-teaser-image-brightness-hover);
   }
 }
-:is(sbb-teaser, sbb-teaser-hero, sbb-teaser-product) [slot=image]:is(sbb-image, img),
-:is(sbb-teaser, sbb-teaser-hero, sbb-teaser-product) [slot=image] :is(sbb-image, img) {
+:is(sbb-teaser, sbb-teaser-hero, sbb-teaser-product) :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);
@@ -1357,16 +1361,13 @@ sbb-lead-container [slot=image] :is(sbb-image, img, picture) {
   place-self: stretch;
 }
 
-:is(sbb-teaser) [slot=image]:is(sbb-image, img),
-:is(sbb-teaser) [slot=image] :is(sbb-image, img) {
+sbb-teaser :is(sbb-image, img) {
+  --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);
 }
-:is(sbb-teaser) :is(sbb-image, img) {
-  --sbb-image-object-fit: cover;
-  --sbb-image-aspect-ratio: 4 / 3;
-}
 
 :is(sbb-teaser-hero) :is(sbb-image, img) {
   --sbb-image-aspect-ratio: 1 / 1;
@@ -1378,8 +1379,9 @@ sbb-lead-container [slot=image] :is(sbb-image, img, picture) {
   }
 }
 :is(sbb-teaser-hero) img {
-  width: 100%;
   display: block;
+  align-self: stretch;
+  width: 100%;
 }
 
 sbb-train-formation:has(sbb-train[direction-label]) {