@sbb-esta/lyne-elements 1.6.0 → 1.7.0

package/core/mixins.js

@@ -1,16 +1,16 @@
 import { property as o, state as y } from "lit/decorators.js";
-import { defaultConverter as u, html as b, nothing as p, css as x } from "lit";
+import { defaultConverter as p, html as c, nothing as b, css as x } from "lit";
 import { hostAttributes as k } from "./decorators.js";
 import { preventScrollOnSpacebarPress as v, EventEmitter as w } from "./eventing.js";
 import { getLocalName as f } from "./dom.js";
 import "../screen-reader-only.js";
-var S = Object.defineProperty, E = Object.getOwnPropertyDescriptor, P = (n, s, r, t) => {
-  for (var e = E(s, r), i = n.length - 1, a; i >= 0; i--)
-    (a = n[i]) && (e = a(s, r, e) || e);
+var S = Object.defineProperty, E = Object.getOwnPropertyDescriptor, P = (i, s, r, t) => {
+  for (var e = E(s, r), n = i.length - 1, a; n >= 0; n--)
+    (a = i[n]) && (e = a(s, r, e) || e);
   return e && S(s, r, e), e;
 };
-const C = (n) => {
-  class s extends n {
+const C = (i) => {
+  class s extends i {
     constructor() {
       super(...arguments), this._disabled = !1;
     }
@@ -31,21 +31,21 @@ const C = (n) => {
   return P([
     o({ reflect: !0, type: Boolean })
   ], s.prototype, "disabled"), s;
-}, J = (n) => {
-  class s extends C(n) {
+}, J = (i) => {
+  class s extends C(i) {
     willUpdate(t) {
       super.willUpdate(t), t.has("disabled") && (this.disabled ? (this.setAttribute("aria-disabled", "true"), this.removeAttribute("tabindex")) : (this.removeAttribute("aria-disabled"), this.setAttribute("tabindex", "0")));
     }
   }
   return s;
 };
-var $ = Object.defineProperty, R = Object.getOwnPropertyDescriptor, c = (n, s, r, t) => {
-  for (var e = t > 1 ? void 0 : t ? R(s, r) : s, i = n.length - 1, a; i >= 0; i--)
-    (a = n[i]) && (e = (t ? a(s, r, e) : a(e)) || e);
+var $ = Object.defineProperty, O = Object.getOwnPropertyDescriptor, h = (i, s, r, t) => {
+  for (var e = t > 1 ? void 0 : t ? O(s, r) : s, n = i.length - 1, a; n >= 0; n--)
+    (a = i[n]) && (e = (t ? a(s, r, e) : a(e)) || e);
   return t && e && $(s, r, e), e;
 };
-const A = (n) => {
-  const r = class r extends n {
+const R = (i) => {
+  const r = class r extends i {
     constructor() {
       super(...arguments), this._value = null, this.internals = this.attachInternals(), this.formDisabled = !1;
     }
@@ -97,8 +97,8 @@ const A = (n) => {
     get willValidate() {
       return this.internals.willValidate;
     }
-    attributeChangedCallback(e, i, a) {
-      (e !== "name" || i !== a) && super.attributeChangedCallback(e, i, a);
+    attributeChangedCallback(e, n, a) {
+      (e !== "name" || n !== a) && super.attributeChangedCallback(e, n, a);
     }
     /**
      * Returns true if internals target element has no validity problems; false otherwise.
@@ -137,21 +137,21 @@ const A = (n) => {
   };
   r.formAssociated = !0;
   let s = r;
-  return c([
+  return h([
     o()
-  ], s.prototype, "name", 1), c([
+  ], s.prototype, "name", 1), h([
     o()
-  ], s.prototype, "value", 1), c([
+  ], s.prototype, "value", 1), h([
     y()
   ], s.prototype, "formDisabled", 2), s;
 };
-var O = Object.defineProperty, q = Object.getOwnPropertyDescriptor, L = (n, s, r, t) => {
-  for (var e = q(s, r), i = n.length - 1, a; i >= 0; i--)
-    (a = n[i]) && (e = a(s, r, e) || e);
-  return e && O(s, r, e), e;
+var q = Object.defineProperty, L = Object.getOwnPropertyDescriptor, A = (i, s, r, t) => {
+  for (var e = L(s, r), n = i.length - 1, a; n >= 0; n--)
+    (a = i[n]) && (e = a(s, r, e) || e);
+  return e && q(s, r, e), e;
 };
-const D = (n) => {
-  class s extends n {
+const D = (i) => {
+  class s extends i {
     constructor() {
       super(...arguments), this._required = !1;
     }
@@ -172,17 +172,17 @@ const D = (n) => {
       return !1;
     }
   }
-  return L([
+  return A([
     o({ reflect: !0, type: Boolean })
   ], s.prototype, "required"), s;
 };
-var M = Object.defineProperty, U = Object.getOwnPropertyDescriptor, m = (n, s, r, t) => {
-  for (var e = t > 1 ? void 0 : t ? U(s, r) : s, i = n.length - 1, a; i >= 0; i--)
-    (a = n[i]) && (e = (t ? a(s, r, e) : a(e)) || e);
+var M = Object.defineProperty, U = Object.getOwnPropertyDescriptor, m = (i, s, r, t) => {
+  for (var e = t > 1 ? void 0 : t ? U(s, r) : s, n = i.length - 1, a; n >= 0; n--)
+    (a = i[n]) && (e = (t ? a(s, r, e) : a(e)) || e);
   return t && e && M(s, r, e), e;
 };
-const Q = (n) => {
-  let s = class extends C(D(A(n))) {
+const Q = (i) => {
+  let s = class extends C(D(R(i))) {
     constructor() {
       super(), this._attributeMutationBlocked = !1, this._checked = !1, this._handleKeyboardInteraction = (r) => {
         r.key === " " && this._handleUserInteraction();
@@ -235,11 +235,11 @@ const Q = (n) => {
     o({
       type: Boolean,
       converter: {
-        ...u,
+        ...p,
         // We need to pass information to the setter so that we know it was called by attribute change.
         fromAttribute: (r, t) => {
-          var i, a;
-          return { value: (a = (i = u).fromAttribute) == null ? void 0 : a.call(i, r, t), attribute: !0 };
+          var n, a;
+          return { value: (a = (n = p).fromAttribute) == null ? void 0 : a.call(n, r, t), attribute: !0 };
         }
       }
     })
@@ -248,23 +248,23 @@ const Q = (n) => {
       tabindex: "0"
     })
   ], s), s;
-}, I = (n) => {
-  class s extends n {
+}, N = (i) => {
+  class s extends i {
     constructor(...t) {
       var e;
       if (super(...t), this._hydrationComplete = new Promise(
-        (i) => this._resolveHydration = i
+        (n) => this._resolveHydration = n
       ), this._hydrationRequired = !!this.shadowRoot, !this._hydrationRequired)
         this._resolveHydration(!1);
       else {
-        const i = (l) => {
-          this._hydrationRequired && l.stopImmediatePropagation();
-        }, a = { capture: !0 }, d = (e = this.shadowRoot) == null ? void 0 : e.querySelectorAll("slot");
-        d != null && d.length && (d.forEach(
-          (l) => l.addEventListener("slotchange", i, a)
+        const n = (d) => {
+          this._hydrationRequired && d.stopImmediatePropagation();
+        }, a = { capture: !0 }, l = (e = this.shadowRoot) == null ? void 0 : e.querySelectorAll("slot");
+        l != null && l.length && (l.forEach(
+          (d) => d.addEventListener("slotchange", n, a)
         ), this.hydrationComplete.then(
-          () => d.forEach((l) => {
-            l.removeEventListener("slotchange", i, a), l.assignedNodes().length && l.dispatchEvent(new Event("slotchange", { bubbles: !0 }));
+          () => l.forEach((d) => {
+            d.removeEventListener("slotchange", n, a), d.assignedNodes().length && d.dispatchEvent(new Event("slotchange", { bubbles: !0 }));
           })
         ));
       }
@@ -290,20 +290,20 @@ const Q = (n) => {
   }
   return s;
 };
-var N = Object.defineProperty, B = (n, s, r, t) => {
-  for (var e = void 0, i = n.length - 1, a; i >= 0; i--)
-    (a = n[i]) && (e = a(s, r, e) || e);
-  return e && N(s, r, e), e;
+var B = Object.defineProperty, V = (i, s, r, t) => {
+  for (var e = void 0, n = i.length - 1, a; n >= 0; n--)
+    (a = i[n]) && (e = a(s, r, e) || e);
+  return e && B(s, r, e), e;
 };
-const _ = "data-ssr-child-count", g = "li", W = (n) => {
-  class s extends I(n) {
+const _ = "data-ssr-child-count", g = "li", W = (i) => {
+  class s extends N(i) {
     constructor() {
       super(...arguments), this.listChildren = [], this._handleSlotchange = () => {
         const t = Array.from(this.children ?? []).filter(
           (e) => this.listChildLocalNames.includes(e.localName)
         );
-        t.length === this.listChildren.length && this.listChildren.every((e, i) => t[i] === e) || (this.listChildren.filter((e) => !t.includes(e)).forEach((e) => e.removeAttribute("slot")), this.listChildren = t, this.listChildren.forEach(
-          (e, i) => e.setAttribute("slot", `${g}-${i}`)
+        t.length === this.listChildren.length && this.listChildren.every((e, n) => t[n] === e) || (this.listChildren.filter((e) => !t.includes(e)).forEach((e) => e.removeAttribute("slot")), this.listChildren = t, this.listChildren.forEach(
+          (e, n) => e.setAttribute("slot", `${g}-${n}`)
         ), this.removeAttribute(_));
       };
     }
@@ -316,42 +316,54 @@ const _ = "data-ssr-child-count", g = "li", W = (n) => {
       super.disconnectedCallback(), (t = this.shadowRoot) == null || t.removeEventListener("slotchange", this._handleSlotchange);
     }
     /**
-     * Renders list and list slots for slotted children or an amount of list slots
+     * Renders list and list slots for slotted children or a number of list slots
      * corresponding to the `data-ssr-child-count` attribute value.
      *
      * This is a possible optimization for SSR, as in an SSR Lit environment
      * other elements are not available, but might be available in the meta
-     * framework wrapper (like e.g. React). This allows to provide the amount of
+     * framework wrapper (like e.g. React). This allows to provide the number of
      * children to be passed via the `data-ssr-child-count` attribute value.
      */
-    renderList(t = {}) {
-      const e = this.listSlotNames();
-      return e.length >= 2 ? b`
+    renderList(t = {}, e = {}) {
+      const n = this.listSlotEntries(e);
+      return n.length >= 2 ? c`
           <ul
             class=${t.class || (this.localName ?? f(this))}
-            aria-label=${t.ariaLabel || p}
-            aria-labelledby=${t.ariaLabelledby || p}
+            aria-label=${t.ariaLabel || b}
+            aria-labelledby=${t.ariaLabelledby || b}
           >
-            ${e.map((i) => b`<li><slot name=${i}></slot></li>`)}
+            ${n.map(
+        (a) => c`
+                <li aria-hidden=${a.ariaHidden || b}>
+                  <slot name=${a.name}></slot>
+                </li>
+              `
+      )}
           </ul>
           ${this.renderHiddenSlot()}
-        ` : e.length === 1 ? b`<sbb-screen-reader-only>${t.ariaLabel}</sbb-screen-reader-only>
+        ` : n.length === 1 ? c`<sbb-screen-reader-only>${t.ariaLabel}</sbb-screen-reader-only>
           <span class=${t.class || (this.localName ?? f(this))}>
-            <span><slot name=${e[0]}></slot></span>
+            <span><slot name=${n[0].name}></slot></span>
           </span>
           ${this.renderHiddenSlot()} ` : this.renderHiddenSlot();
     }
     /**
-     * Returns an array of list slot names with the length corresponding to the amount of matched
-     * children or the `data-ssr-child-count` attribute value.
+     * Returns an array of SbbNamedSlotProperties, which holds the list slot names and the hidden property;
+     * its length corresponds to the number of matched children or the `data-ssr-child-count` attribute value.
      *
      * This is a possible optimization for SSR, as in an SSR Lit environment
      * other elements are not available, but might be available in the meta
-     * framework wrapper (like e.g. React). This allows to provide the amount of
+     * framework wrapper (like e.g. React). This allows to provide the number of
      * children to be passed via the `data-ssr-child-count` attribute value.
      */
-    listSlotNames() {
-      return (this.listChildren.length ? this.listChildren : Array.from({ length: +(this.getAttribute(_) ?? 0) })).map((e, i) => `${g}-${i}`);
+    listSlotEntries(t) {
+      return (this.listChildren.length ? this.listChildren : Array.from({ length: +(this.getAttribute(_) ?? 0) })).map((n, a) => {
+        var l;
+        return {
+          name: `${g}-${a}`,
+          ariaHidden: ((l = t == null ? void 0 : t.localNameVisualOnly) == null ? void 0 : l.includes(n.localName)) ?? !1
+        };
+      });
     }
     /**
      * Returns a hidden slot, which is intended as the children change detection.
@@ -359,36 +371,36 @@ const _ = "data-ssr-child-count", g = "li", W = (n) => {
      * the slotchange event, which can be used to assign it to the appropriate named slot.
      */
     renderHiddenSlot() {
-      return b`<span hidden><slot></slot></span>`;
+      return c`<span hidden><slot></slot></span>`;
     }
   }
-  return B([
+  return V([
     y()
   ], s.prototype, "listChildren"), s;
 };
-var V = Object.defineProperty, j = (n, s, r, t) => {
-  for (var e = void 0, i = n.length - 1, a; i >= 0; i--)
-    (a = n[i]) && (e = a(s, r, e) || e);
-  return e && V(s, r, e), e;
+var j = Object.defineProperty, H = (i, s, r, t) => {
+  for (var e = void 0, n = i.length - 1, a; n >= 0; n--)
+    (a = i[n]) && (e = a(s, r, e) || e);
+  return e && j(s, r, e), e;
 };
-const Y = (n) => {
-  class s extends n {
+const Y = (i) => {
+  class s extends i {
     constructor() {
       super(...arguments), this.negative = !1;
     }
   }
-  return j([
+  return H([
     o({ reflect: !0, type: Boolean })
   ], s.prototype, "negative"), s;
 };
-var H = Object.defineProperty, h = (n, s, r, t) => {
-  for (var e = void 0, i = n.length - 1, a; i >= 0; i--)
-    (a = n[i]) && (e = a(s, r, e) || e);
-  return e && H(s, r, e), e;
+var I = Object.defineProperty, u = (i, s, r, t) => {
+  for (var e = void 0, n = i.length - 1, a; n >= 0; n--)
+    (a = i[n]) && (e = a(s, r, e) || e);
+  return e && I(s, r, e), e;
 };
-const Z = (n) => {
+const Z = (i) => {
   var t;
-  const s = (t = class extends n {
+  const s = (t = class extends i {
     constructor() {
       super(...arguments), this.color = "white", this.borderless = !1, this._panelConnected = new w(
         this,
@@ -402,15 +414,15 @@ const Z = (n) => {
   }, t.events = {
     panelConnected: "panelConnected"
   }, t);
-  return h([
+  return u([
     o()
-  ], s.prototype, "color"), h([
+  ], s.prototype, "color"), u([
     o({ reflect: !0, type: Boolean })
-  ], s.prototype, "borderless"), h([
+  ], s.prototype, "borderless"), u([
     o()
   ], s.prototype, "expansionState"), s;
-}, ee = (n) => {
-  class s extends n {
+}, ee = (i) => {
+  class s extends i {
     constructor() {
       super(...arguments), this._updatePromise = Promise.resolve(), this._updateResolve = () => {
       };
@@ -432,8 +444,8 @@ export {
   C as SbbDisabledMixin,
   J as SbbDisabledTabIndexActionMixin,
   Q as SbbFormAssociatedCheckboxMixin,
-  A as SbbFormAssociatedMixin,
-  I as SbbHydrationMixin,
+  R as SbbFormAssociatedMixin,
+  N as SbbHydrationMixin,
   W as SbbNamedSlotListMixin,
   Y as SbbNegativeMixin,
   Z as SbbPanelMixin,

package/core/overlay/overlay.d.ts

@@ -1,5 +1,4 @@
 import { TemplateResult } from 'lit';
-
 /**
  * Used to create the "wrapping" effect around the anchor for overlays (es. autocomplete)
  * Works in conjunction with the 'overlayGapFixCorners()' function in 'overlay.ts'

package/core/styles/core.scss

@@ -15,31 +15,33 @@
   // Grab css vars defined by `@sbb-esta/lyne-design-tokens` package
   @include sbb-css-tokens.lyne-design-tokens-css-variables;
 
-  // Train formation
-  --sbb-train-formation-wagon-width: #{functions.px-to-rem-build(80)};
-  --sbb-train-formation-wagon-height: #{functions.px-to-rem-build(40)};
-  --sbb-train-formation-wagon-border-radius: #{functions.px-to-rem-build(12)};
-  --sbb-train-formation-wagon-gap: var(--sbb-spacing-fixed-1x);
+  & {
+    // Train formation
+    --sbb-train-formation-wagon-width: #{functions.px-to-rem-build(80)};
+    --sbb-train-formation-wagon-height: #{functions.px-to-rem-build(40)};
+    --sbb-train-formation-wagon-border-radius: #{functions.px-to-rem-build(12)};
+    --sbb-train-formation-wagon-gap: var(--sbb-spacing-fixed-1x);
 
-  // Header
-  --sbb-header-height: var(--sbb-spacing-fixed-14x);
+    // Header
+    --sbb-header-height: var(--sbb-spacing-fixed-14x);
 
-  // Time Input
-  --sbb-time-input-max-width: #{functions.px-to-rem-build(58)};
+    // Time Input
+    --sbb-time-input-max-width: #{functions.px-to-rem-build(58)};
 
-  // Overlay
-  --sbb-overlay-default-z-index: 1000;
+    // Overlay
+    --sbb-overlay-default-z-index: 1000;
 
-  // Infinity border radius, can be used to achieve rounded border on start and end
-  // TODO: Check if infinity is supported by all browsers (e.g. Firefox) -> calc(1em * infinity);
-  --sbb-border-radius-infinity: 10000000em;
+    // Infinity border radius, can be used to achieve rounded border on start and end
+    // TODO: Check if infinity is supported by all browsers (e.g. Firefox) -> calc(1em * infinity);
+    --sbb-border-radius-infinity: 10000000em;
 
-  @include mediaqueries.mq($from: medium) {
-    // Header
-    --sbb-header-height: var(--sbb-spacing-fixed-24x);
+    @include mediaqueries.mq($from: medium) {
+      // Header
+      --sbb-header-height: var(--sbb-spacing-fixed-24x);
 
-    // Time Input
-    --sbb-time-input-max-width: #{functions.px-to-rem-build(65)};
+      // Time Input
+      --sbb-time-input-max-width: #{functions.px-to-rem-build(65)};
+    }
   }
 }
 

package/core/styles/mixins/link.scss

@@ -57,7 +57,7 @@
 @mixin link-hover-rules {
   @include mediaqueries.hover-mq($hover: true) {
     color: var(--sbb-link-color-hover);
-    text-decoration: underline;
+    text-decoration: var(--sbb-link-hover-text-decoration, underline);
   }
 }
 
@@ -78,13 +78,16 @@
 }
 
 @mixin link-consolidation {
-  @include link-base;
   @include typo.text-inherit;
-  @include link-focus-visible;
-  @include link-hover;
+  @include link-base;
 
-  // Active definitions have to be after :hover definitions
-  @include link-active;
+  & {
+    @include link-focus-visible;
+    @include link-hover;
+
+    // Active definitions have to be after :hover definitions
+    @include link-active;
+  }
 }
 
 @mixin link {

package/core/styles/mixins/lists.scss

@@ -93,6 +93,11 @@
   );
   --sbb-step-list-vertical-gap: var(--sbb-spacing-fixed-1x);
 
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  counter-reset: steps;
+
   &:where(.sbb-text-s) {
     --sbb-step-list-padding-block: var(--sbb-spacing-fixed-4x);
   }
@@ -107,11 +112,6 @@
     }
   }
 
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  counter-reset: steps;
-
   /* stylelint-disable-next-line no-descending-specificity */
   > li {
     position: relative;

package/core/styles/mixins/pearl-chain-bullet.scss

@@ -88,23 +88,26 @@
 }
 
 @mixin pearl-chain-bullet-skipped-stop {
-  @include pearl-chain-bullet-skipped;
-  @include pearl-chain-bullet-stop;
-
   --sbb-pearl-chain-bullet-crossed-width: #{functions.px-to-rem-build(11.31)};
   --sbb-pearl-chain-bullet-crossed-height: #{functions.px-to-rem-build(3)};
-}
 
-@mixin pearl-chain-bullet-irrelevant-stop {
   @include pearl-chain-bullet-stop;
+  @include pearl-chain-bullet-skipped;
+}
 
+@mixin pearl-chain-bullet-irrelevant-stop {
   --sbb-pearl-chain-bullet-border-width: var(--sbb-border-width-1x);
+
+  @include pearl-chain-bullet-stop;
 }
 
 @mixin pearl-chain-bullet-position {
-  @include pearl-chain-bullet;
   @include pearl-chain-bullet-start-end;
-  @include pearl-chain-bullet-disruption;
+  @include pearl-chain-bullet;
+
+  & {
+    @include pearl-chain-bullet-disruption;
+  }
 
   @keyframes pearl-chain-bullet-position-pulse {
     0% {
@@ -124,6 +127,8 @@
     }
   }
 
-  animation: pearl-chain-bullet-position-pulse var(--sbb-pearl-chain-bullet-animation-duration)
-    var(--sbb-pearl-chain-bullet-animation-easing) infinite;
+  & {
+    animation: pearl-chain-bullet-position-pulse var(--sbb-pearl-chain-bullet-animation-duration)
+      var(--sbb-pearl-chain-bullet-animation-easing) infinite;
+  }
 }

package/core/styles/mixins/table.scss

@@ -7,25 +7,27 @@
  * Therefore, we have to build the grid avoiding double borders.
  */
 @mixin table {
-  @include table--striped;
   @include table--m;
+  @include table--striped;
 
-  --sbb-table-border: var(--sbb-border-width-1x) solid var(--sbb-table-border-color);
-  --sbb-table-border-color: var(--sbb-color-cloud);
-  --sbb-table-border-radius: var(--sbb-border-radius-4x);
-  --sbb-table-background-color: var(--sbb-color-white);
-  --sbb-table-row-striped-color: var(--sbb-color-milk);
-  --sbb-table-color: inherit;
-  --sbb-table-caption-color: var(--sbb-color-granite);
-  --sbb-table-caption-margin-block-start: var(--sbb-spacing-fixed-4x);
-
-  background-color: var(--sbb-table-background-color);
-  border: var(--sbb-table-border);
-  border-radius: var(--sbb-table-border-radius);
-  border-spacing: 0;
-  caption-side: bottom;
-  color: var(--sbb-table-color);
-  table-layout: auto;
+  & {
+    --sbb-table-border: var(--sbb-border-width-1x) solid var(--sbb-table-border-color);
+    --sbb-table-border-color: var(--sbb-color-cloud);
+    --sbb-table-border-radius: var(--sbb-border-radius-4x);
+    --sbb-table-background-color: var(--sbb-color-white);
+    --sbb-table-row-striped-color: var(--sbb-color-milk);
+    --sbb-table-color: inherit;
+    --sbb-table-caption-color: var(--sbb-color-granite);
+    --sbb-table-caption-margin-block-start: var(--sbb-spacing-fixed-4x);
+
+    background-color: var(--sbb-table-background-color);
+    border: var(--sbb-table-border);
+    border-radius: var(--sbb-table-border-radius);
+    border-spacing: 0;
+    caption-side: bottom;
+    color: var(--sbb-table-color);
+    table-layout: auto;
+  }
 
   thead {
     & > tr > th {

package/core/testing/mocha-extensions.d.ts

@@ -1,5 +1,4 @@
 import { Func, Suite, Test } from 'mocha';
-
 /**
  * Skip the `describe` if the condition is not met
  */

package/core/testing/wait-for-image-ready.d.ts

@@ -1,4 +1,3 @@
 import { SbbImageElement } from '../../image.js';
-
 export declare function waitForImageReady(element: HTMLImageElement | SbbImageElement, timeoutInMilliseconds?: number): Promise<void>;
 //# sourceMappingURL=wait-for-image-ready.d.ts.map

package/core/testing/wait-for-render.d.ts

@@ -1,6 +1,5 @@
 import { ReactiveElement } from 'lit';
 import { SbbHydrationMixinType } from '../mixins.js';
-
 /**
  * Tests if an element is a Lit `ReactiveElement`.
  *

package/core.css

@@ -1006,14 +1006,6 @@
   /**
    * Ultra (value corresponds to --sbb-breakpoint-ultra-min)
    */
-  --sbb-train-formation-wagon-width: 5rem;
-  --sbb-train-formation-wagon-height: 2.5rem;
-  --sbb-train-formation-wagon-border-radius: 0.75rem;
-  --sbb-train-formation-wagon-gap: var(--sbb-spacing-fixed-1x);
-  --sbb-header-height: var(--sbb-spacing-fixed-14x);
-  --sbb-time-input-max-width: 3.625rem;
-  --sbb-overlay-default-z-index: 1000;
-  --sbb-border-radius-infinity: 10000000em;
 }
 @media (forced-colors: active) {
   :root {
@@ -1118,6 +1110,16 @@
     --sbb-grid-base-gutter-responsive: var(--sbb-layout-base-grid-gutter-responsive-ultra);
   }
 }
+:root {
+  --sbb-train-formation-wagon-width: 5rem;
+  --sbb-train-formation-wagon-height: 2.5rem;
+  --sbb-train-formation-wagon-border-radius: 0.75rem;
+  --sbb-train-formation-wagon-gap: var(--sbb-spacing-fixed-1x);
+  --sbb-header-height: var(--sbb-spacing-fixed-14x);
+  --sbb-time-input-max-width: 3.625rem;
+  --sbb-overlay-default-z-index: 1000;
+  --sbb-border-radius-infinity: 10000000em;
+}
 @media (min-width: calc(52.5rem)) {
   :root {
     --sbb-header-height: var(--sbb-spacing-fixed-24x);