@sbb-esta/lyne-elements 4.0.0-next.2 → 4.0.0-next.4

package/core/styles/mixins/card.scss

@@ -7,29 +7,46 @@
 // -----------------------------------------------------------------------------
 // Card: Mixins & CSS custom properties
 // -----------------------------------------------------------------------------
-
-@mixin card-variables {
+@mixin card-variables--global($theme: 'standard') {
   --sbb-card-background-color: var(--sbb-background-color-1);
   --sbb-card-border-radius: var(--sbb-border-radius-4x);
-  --sbb-card-animation-duration: var(
-    --sbb-disable-animation-duration,
-    var(--sbb-animation-duration-1x)
-  );
   --sbb-card-animation-easing: var(--sbb-animation-easing);
   --sbb-card-border-color: transparent;
   --sbb-card-border-style: solid;
   --sbb-card-hover-shift: 0;
+  --sbb-card-padding-inline: #{functions.theme-pattern-select(
+      (
+        'standard': var(--sbb-spacing-responsive-s),
+        'lean': var(--sbb-spacing-responsive-xxs),
+      ),
+      $theme
+    )};
+  --sbb-card-padding-block: #{functions.theme-pattern-select(
+      (
+        'standard': var(--sbb-spacing-responsive-xxxs),
+        'lean': var(--sbb-spacing-fixed-3x),
+      ),
+      $theme
+    )};
+  --sbb-card-with-badge-padding-block: #{functions.theme-pattern-select(
+      (
+        'standard': var(--sbb-spacing-fixed-6x) var(--sbb-spacing-responsive-xxxs),
+        'lean': var(--sbb-spacing-fixed-6x) var(--sbb-spacing-fixed-3x),
+      ),
+      $theme
+    )};
+}
+
+@mixin card-variables--global-forced-colors {
+  --sbb-card-border-color: CanvasText;
+  --sbb-card-border-width: var(--sbb-border-width-2x);
+}
 
-  // As the card has always a white/milk background, we have to fix the focus outline color
-  // to default color for cases where the card is used in a negative context.
-  --sbb-focus-outline-color: light-dark(
-    var(--sbb-focus-outline-color-default),
-    var(--sbb-focus-outline-color-dark)
-  );
+@mixin card-variables($theme: 'standard') {
+  @include card-variables--global($theme);
 
   @include a11y.if-forced-colors {
-    --sbb-card-border-color: CanvasText;
-    --sbb-card-border-width: var(--sbb-border-width-2x);
+    @include card-variables--global-forced-colors;
   }
 }
 
@@ -64,61 +81,48 @@
 }
 
 // Card sizing
-@mixin card-variables--xs {
+@mixin card-variables--spacing-3x-xxs {
+  --sbb-card-padding-block: var(--sbb-spacing-fixed-3x);
+  --sbb-card-with-badge-padding-block: var(--sbb-spacing-fixed-6x) var(--sbb-spacing-fixed-3x);
   --sbb-card-padding-inline: var(--sbb-spacing-responsive-xxs);
-  --sbb-card-padding-block-start: var(--sbb-spacing-fixed-3x);
-  --sbb-card-padding-block-end: var(--sbb-card-padding-block-start);
 }
 
-@mixin card-variables--s {
+@mixin card-variables--spacing-xxxs-xxs {
+  --sbb-card-padding-block: var(--sbb-spacing-responsive-xxxs);
+  --sbb-card-with-badge-padding-block: var(--sbb-spacing-fixed-6x)
+    var(--sbb-spacing-responsive-xxxs);
   --sbb-card-padding-inline: var(--sbb-spacing-responsive-xxs);
-  --sbb-card-padding-block-start: var(--sbb-spacing-responsive-xxxs);
-  --sbb-card-padding-block-end: var(--sbb-card-padding-block-start);
 }
 
-@mixin card-variables--m {
+@mixin card-variables--spacing-xxxs-s {
+  --sbb-card-padding-block: var(--sbb-spacing-responsive-xxxs);
+  --sbb-card-with-badge-padding-block: var(--sbb-spacing-fixed-6x)
+    var(--sbb-spacing-responsive-xxxs);
   --sbb-card-padding-inline: var(--sbb-spacing-responsive-s);
-  --sbb-card-padding-block-start: var(--sbb-spacing-responsive-xxxs);
-  --sbb-card-padding-block-end: var(--sbb-card-padding-block-start);
-}
-
-@mixin card-variables--m-has-badge {
-  --sbb-card-padding-block-start: var(--sbb-spacing-fixed-6x);
-  --sbb-card-padding-block-end: var(--sbb-spacing-responsive-xxxs);
 }
 
-@mixin card-variables--l {
+@mixin card-variables--spacing-4x-xxs {
+  --sbb-card-padding-block: var(--sbb-spacing-fixed-4x);
+  --sbb-card-with-badge-padding-block: var(--sbb-spacing-fixed-6x) var(--sbb-spacing-fixed-4x);
   --sbb-card-padding-inline: var(--sbb-spacing-responsive-xxs);
-  --sbb-card-padding-block-start: var(--sbb-spacing-fixed-4x);
-  --sbb-card-padding-block-end: var(--sbb-card-padding-block-start);
-}
-
-@mixin card-variables--l-has-badge {
-  --sbb-card-padding-block-start: var(--sbb-spacing-fixed-6x);
-  --sbb-card-padding-block-end: var(--sbb-spacing-fixed-4x);
 }
 
-@mixin card-variables--xl {
+@mixin card-variables--spacing-xxs {
+  --sbb-card-padding-block: var(--sbb-spacing-responsive-xxs);
+  --sbb-card-with-badge-padding-block: var(--sbb-spacing-fixed-6x) var(--sbb-spacing-responsive-xxs);
   --sbb-card-padding-inline: var(--sbb-spacing-responsive-xxs);
-  --sbb-card-padding-block-start: var(--sbb-spacing-responsive-xxs);
-  --sbb-card-padding-block-end: var(--sbb-card-padding-block-start);
-}
-
-@mixin card-variables--xl-has-badge {
-  --sbb-card-padding-block-start: var(--sbb-spacing-fixed-6x);
-  --sbb-card-padding-block-end: var(--sbb-spacing-responsive-xxs);
 }
 
-@mixin card-variables--xxl {
+@mixin card-variables--spacing-s {
+  --sbb-card-padding-block: var(--sbb-spacing-responsive-s);
+  --sbb-card-with-badge-padding-block: var(--sbb-spacing-responsive-s);
   --sbb-card-padding-inline: var(--sbb-spacing-responsive-s);
-  --sbb-card-padding-block-start: var(--sbb-spacing-responsive-s);
-  --sbb-card-padding-block-end: var(--sbb-card-padding-block-start);
 }
 
-@mixin card-variables--xxxl {
+@mixin card-variables--spacing-l {
+  --sbb-card-padding-block: var(--sbb-spacing-responsive-l);
+  --sbb-card-with-badge-padding-block: var(--sbb-spacing-responsive-l);
   --sbb-card-padding-inline: var(--sbb-spacing-responsive-l);
-  --sbb-card-padding-block-start: var(--sbb-spacing-responsive-l);
-  --sbb-card-padding-block-end: var(--sbb-card-padding-block-start);
 }
 
 @mixin card-variables--button {
@@ -134,10 +138,24 @@
 }
 
 @mixin card {
+  // As the card has always a white/milk background, we have to fix the focus outline color
+  // to default color for cases where the card is used in a negative context.
+  --sbb-focus-outline-color: light-dark(
+    var(--sbb-focus-outline-color-default),
+    var(--sbb-focus-outline-color-dark)
+  );
+
+  // Propagate card text color to title text color to ensure correct color in forced colors mode
+  --sbb-title-text-color-normal-override: var(--sbb-card-color);
+  --sbb-card-animation-duration: var(
+    --sbb-disable-animation-duration,
+    var(--sbb-animation-duration-1x)
+  );
+
   display: block;
   position: relative;
   padding-inline: var(--sbb-card-padding-inline);
-  padding-block: var(--sbb-card-padding-block-start) var(--sbb-card-padding-block-end);
+  padding-block: var(--sbb-card-padding-block);
   border-radius: var(--sbb-card-border-radius);
   background-color: var(--sbb-card-background-color);
   box-shadow: none;
@@ -156,13 +174,11 @@
   }
 }
 
-@mixin card--hover($cardSelector) {
+@mixin card--hover {
   @include mediaqueries.hover-mq($hover: true) {
     --sbb-card-hover-shift: #{functions.px-to-rem-build(-2)};
 
-    #{$cardSelector} {
-      box-shadow: var(--sbb-box-shadow-level-9-hard);
-    }
+    box-shadow: var(--sbb-box-shadow-level-9-hard);
 
     @include a11y.if-forced-colors {
       --sbb-card-border-color: Highlight;

package/core/styles/mixins/lists.scss

@@ -1,6 +1,7 @@
 @use 'sass:selector';
 @use '../core/functions';
 @use '../core/mediaqueries';
+@use './a11y';
 @use './typo';
 
 @mixin list-reset {
@@ -148,6 +149,13 @@
       mask-repeat: no-repeat;
       mask-position: center;
       mask-size: 100%;
+
+      // If consumers override the `--sbb-icon-list-marker-icon-color` variable to set a custom color via inline style,
+      // it would have higher specificity over any rule, included the forced-colors one.
+      // This can be avoided forcing `background-color: CanvasText` in high-contrast mode.
+      @include a11y.if-forced-colors {
+        background-color: CanvasText;
+      }
     }
   }
 }

package/core/styles/mixins/overlay.scss

@@ -5,7 +5,6 @@
 
   --sbb-options-panel-position-x: 0;
   --sbb-options-panel-position-y: 0;
-  --sbb-options-panel-active-option-y: 0;
 
   // 85vh is not an exact value but looks optimized for mobile view.
   --sbb-options-panel-max-height: calc(85vh - var(--sbb-spacing-fixed-8x));

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

@@ -1,3 +1,3 @@
-import { SbbImageElement } from '../../image.js';
+import { SbbImageElement } from '../../image.ts';
 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,5 +1,5 @@
 import { ReactiveElement } from 'lit';
-import { SbbHydrationMixinType } from '../mixins.js';
+import { SbbHydrationMixinType } from '../mixins.ts';
 /**
  * Tests if an element is a Lit `ReactiveElement`.
  *
@@ -11,7 +11,7 @@ export declare const isReactiveElement: (element: Element) => element is Reactiv
  * Waits for all Lit `ReactiveElement` children of the given parent node to
  * finish rendering.
  *
- * @param root a parent node to wait for rendering on.
+ * @param node a parent node to wait for rendering on.
  */
 export declare const waitForLitRender: <T extends HTMLElement | DocumentFragment = HTMLElement | DocumentFragment>(node: T | Promise<T>) => Promise<T>;
 //# sourceMappingURL=wait-for-render.d.ts.map

package/core/testing.d.ts

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

package/core.css

@@ -1,6 +1,153 @@
 /**
  * Do not edit directly, this file was auto-generated.
  */
+:host {
+  display: block;
+}
+
+:host([orientation=vertical]) {
+  --sbb-checkbox-group-orientation: column;
+  --sbb-checkbox-group-width: 100%;
+  --sbb-checkbox-group-checkbox-width: 100%;
+}
+
+:host(:is(:state(has-panel),[state--has-panel])) {
+  --sbb-checkbox-group-width: 100%;
+  --sbb-checkbox-group-gap: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-4x);
+  --sbb-checkbox-group-checkbox-flex: auto;
+}
+
+@media (min-width: calc(0rem)) {
+  :host([orientation=vertical][horizontal-from=zero]) {
+    --sbb-checkbox-group-orientation: row;
+    --sbb-checkbox-group-checkbox-width: auto;
+    --sbb-checkbox-group-checkbox-width: initial;
+  }
+  :host([orientation=vertical][horizontal-from=zero]:not(:is(:state(has-panel),[state--has-panel]))) {
+    --sbb-checkbox-group-width: max-content;
+  }
+}
+@media (min-width: calc(37.5rem)) {
+  :host([orientation=vertical][horizontal-from=small]) {
+    --sbb-checkbox-group-orientation: row;
+    --sbb-checkbox-group-checkbox-width: auto;
+    --sbb-checkbox-group-checkbox-width: initial;
+  }
+  :host([orientation=vertical][horizontal-from=small]:not(:is(:state(has-panel),[state--has-panel]))) {
+    --sbb-checkbox-group-width: max-content;
+  }
+}
+@media (min-width: calc(64rem)) {
+  :host([orientation=vertical][horizontal-from=large]) {
+    --sbb-checkbox-group-orientation: row;
+    --sbb-checkbox-group-checkbox-width: auto;
+    --sbb-checkbox-group-checkbox-width: initial;
+  }
+  :host([orientation=vertical][horizontal-from=large]:not(:is(:state(has-panel),[state--has-panel]))) {
+    --sbb-checkbox-group-width: max-content;
+  }
+}
+@media (min-width: calc(90rem)) {
+  :host([orientation=vertical][horizontal-from=ultra]) {
+    --sbb-checkbox-group-orientation: row;
+    --sbb-checkbox-group-checkbox-width: auto;
+    --sbb-checkbox-group-checkbox-width: initial;
+  }
+  :host([orientation=vertical][horizontal-from=ultra]:not(:is(:state(has-panel),[state--has-panel]))) {
+    --sbb-checkbox-group-width: max-content;
+  }
+}
+.sbb-checkbox-group {
+  display: flex;
+  flex-direction: var(--sbb-checkbox-group-orientation);
+  gap: var(--sbb-checkbox-group-gap);
+  align-items: flex-start;
+  width: var(--sbb-checkbox-group-width);
+}
+:host(:is(:state(slotted-error),[state--slotted-error])) .sbb-checkbox-group {
+  margin-block-end: var(--sbb-spacing-fixed-1x);
+}
+
+::slotted(:is(sbb-checkbox, sbb-checkbox-panel)) {
+  width: var(--sbb-checkbox-group-checkbox-width);
+}
+
+::slotted(sbb-checkbox-panel) {
+  flex: var(--sbb-checkbox-group-checkbox-flex);
+}
+
+:host {
+  display: block;
+}
+
+:host([orientation=vertical]) {
+  --sbb-radio-button-group-orientation: column;
+  --sbb-radio-button-group-width: 100%;
+  --sbb-radio-button-group-radio-button-width: 100%;
+}
+
+:host(:is(:state(has-panel),[state--has-panel])) {
+  --sbb-radio-button-group-width: 100%;
+  --sbb-radio-button-group-gap: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-4x);
+  --sbb-radio-button-group-radio-button-flex: auto;
+}
+
+@media (min-width: calc(0rem)) {
+  :host([orientation=vertical][horizontal-from=zero]) {
+    --sbb-radio-button-group-orientation: row;
+    --sbb-radio-button-group-radio-button-width: auto;
+    --sbb-radio-button-group-radio-button-width: initial;
+  }
+  :host([orientation=vertical][horizontal-from=zero]:not(:is(:state(has-panel),[state--has-panel]))) {
+    --sbb-radio-button-group-width: max-content;
+  }
+}
+@media (min-width: calc(37.5rem)) {
+  :host([orientation=vertical][horizontal-from=small]) {
+    --sbb-radio-button-group-orientation: row;
+    --sbb-radio-button-group-radio-button-width: auto;
+    --sbb-radio-button-group-radio-button-width: initial;
+  }
+  :host([orientation=vertical][horizontal-from=small]:not(:is(:state(has-panel),[state--has-panel]))) {
+    --sbb-radio-button-group-width: max-content;
+  }
+}
+@media (min-width: calc(64rem)) {
+  :host([orientation=vertical][horizontal-from=large]) {
+    --sbb-radio-button-group-orientation: row;
+    --sbb-radio-button-group-radio-button-width: auto;
+    --sbb-radio-button-group-radio-button-width: initial;
+  }
+  :host([orientation=vertical][horizontal-from=large]:not(:is(:state(has-panel),[state--has-panel]))) {
+    --sbb-radio-button-group-width: max-content;
+  }
+}
+@media (min-width: calc(90rem)) {
+  :host([orientation=vertical][horizontal-from=ultra]) {
+    --sbb-radio-button-group-orientation: row;
+    --sbb-radio-button-group-radio-button-width: auto;
+    --sbb-radio-button-group-radio-button-width: initial;
+  }
+  :host([orientation=vertical][horizontal-from=ultra]:not(:is(:state(has-panel),[state--has-panel]))) {
+    --sbb-radio-button-group-width: max-content;
+  }
+}
+.sbb-radio-group {
+  display: flex;
+  flex-direction: var(--sbb-radio-button-group-orientation);
+  gap: var(--sbb-radio-button-group-gap);
+  align-items: flex-start;
+  width: var(--sbb-radio-button-group-width);
+}
+:host(:is(:state(slotted-error),[state--slotted-error])) .sbb-radio-group {
+  margin-block-end: var(--sbb-spacing-fixed-1x);
+}
+
+::slotted(sbb-radio-button-panel) {
+  width: var(--sbb-radio-button-group-radio-button-width);
+  flex: var(--sbb-radio-button-group-radio-button-flex);
+}
+
 *,
 ::before,
 ::after {
@@ -954,9 +1101,142 @@
   --sbb-size-element-s: var(--sbb-size-element-s-zero);
   --sbb-size-element-m: var(--sbb-size-element-m-zero);
   --sbb-size-element-l: var(--sbb-size-element-l-zero);
+  --sbb-card-background-color: var(--sbb-background-color-1);
+  --sbb-card-border-radius: var(--sbb-border-radius-4x);
+  --sbb-card-animation-easing: var(--sbb-animation-easing);
+  --sbb-card-border-color: transparent;
+  --sbb-card-border-style: solid;
+  --sbb-card-hover-shift: 0;
+  --sbb-card-padding-inline: var(--sbb-spacing-responsive-s);
+  --sbb-card-padding-block: var(--sbb-spacing-responsive-xxxs);
+  --sbb-card-with-badge-padding-block: var(--sbb-spacing-fixed-6x) var(--sbb-spacing-responsive-xxxs);
+}
+:root.sbb-lean {
+  --sbb-card-padding-inline: var(--sbb-spacing-responsive-xxs);
+  --sbb-card-padding-block: var(--sbb-spacing-fixed-3x);
+  --sbb-card-with-badge-padding-block: var(--sbb-spacing-fixed-6x) var(--sbb-spacing-fixed-3x);
+}
+:root {
+  --sbb-card-badge-gap: var(--sbb-spacing-fixed-2x);
+  --sbb-card-badge-color: var(--sbb-color-2-inverted);
+  --sbb-card-badge-background-color: var(--sbb-background-color-3-inverted);
+  --sbb-card-badge-border-color: transparent;
+  --sbb-card-badge-padding-inline: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-3x);
+  --sbb-card-badge-border-width: var(--sbb-border-width-1x);
+  --sbb-card-badge-border-radius: var(--sbb-border-radius-4x);
+  --sbb-card-badge-skew: skew(16deg, 0deg);
+  --sbb-selection-panel-background-default: var(--sbb-background-color-1);
+  --sbb-selection-panel-background-milk: var(--sbb-background-color-3);
+  --sbb-selection-panel-border-radius: var(--sbb-border-radius-4x);
+  --sbb-selection-panel-border-color-default: var(--sbb-border-color-4-inverted);
+  --sbb-selection-panel-border-color-checked: var(--sbb-border-color-3);
+  --sbb-selection-panel-border-color-borderless: transparent;
+  --sbb-selection-panel-border-color: var(--sbb-selection-panel-border-color-default);
+  --sbb-selection-panel-border-width-default: var(--sbb-border-width-1x);
+  --sbb-selection-panel-border-width-checked: var(--sbb-border-width-2x);
+  --sbb-selection-panel-input-padding-block-xs: var(--sbb-spacing-responsive-xxs);
+  --sbb-selection-panel-input-padding-inline-xs: var(--sbb-spacing-responsive-xxxs);
+  --sbb-selection-panel-input-padding-block-s: var(--sbb-spacing-responsive-xxs);
+  --sbb-selection-panel-input-padding-inline-s: var(--sbb-spacing-responsive-xxxs);
+  --sbb-selection-panel-input-padding-block-m: var(--sbb-spacing-responsive-xs);
+  --sbb-selection-panel-input-padding-inline-m: var(--sbb-spacing-responsive-xxs);
+  --sbb-selection-panel-input-padding: var(--sbb-selection-panel-input-padding-block-m) var(--sbb-selection-panel-input-padding-inline-m);
+  --sbb-selection-panel-checkbox-dimension: var(--sbb-checkbox-dimension-m);
+  --sbb-selection-panel-cursor: var(--sbb-cursor-pointer);
+  --sbb-selection-panel-suffix-color: var(--sbb-color-3);
+  --sbb-selection-panel-subtext-color: var(--sbb-color-granite);
+  --sbb-selection-panel-subtext-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
+  --sbb-checkbox-label-icon-flex-direction: row;
+  --sbb-checkbox-label-icon-justify-content: space-between;
+  --sbb-checkbox-label-icon-flex-grow: 1;
+  --sbb-checkbox-label-gap: var(--sbb-spacing-fixed-2x);
+  --sbb-checkbox-group-orientation: row;
+  --sbb-checkbox-group-checkbox-width: auto;
+  --sbb-checkbox-group-width: max-content;
+  --sbb-checkbox-group-gap: var(--sbb-spacing-fixed-3x) var(--sbb-spacing-fixed-6x);
+  --sbb-checkbox-group-checkbox-flex: none;
+  --sbb-checkbox-dimension-xs: 1.25rem;
+  --sbb-checkbox-dimension-s: var(--sbb-size-icon-ui-small);
+  --sbb-checkbox-dimension-m: var(--sbb-size-icon-ui-small);
+  --sbb-checkbox-dimension: var(--sbb-checkbox-dimension-m);
+  --sbb-checkbox-font-size: var(--sbb-text-font-size-m);
+  --sbb-checkbox-label-color: var(--sbb-color-color-3);
+  --sbb-checkbox-cursor: var(--sbb-cursor-pointer);
+  --sbb-radio-button-label-color: var(--sbb-color-3);
+  --sbb-radio-button-background-color: var(--sbb-background-color-1);
+  --sbb-radio-button-border-width: var(--sbb-border-width-1x);
+  --sbb-radio-button-border-style: solid;
+  --sbb-radio-button-border-color: var(--sbb-border-color-5);
+  --sbb-radio-button-cursor: var(--sbb-cursor-pointer);
+  --sbb-radio-button-dimension-xs: 1.25rem;
+  --sbb-radio-button-dimension-s: var(--sbb-size-icon-ui-small);
+  --sbb-radio-button-dimension-m: var(--sbb-size-icon-ui-small);
+  --sbb-radio-button-dimension: var(--sbb-radio-button-dimension-m);
+  --sbb-radio-button-inner-circle-dimension: 0.625rem;
+  --sbb-radio-button-font-size: var(--sbb-text-font-size-m);
+  --sbb-radio-button-group-orientation: row;
+  --sbb-radio-button-group-radio-button-width: auto;
+  --sbb-radio-button-group-width: max-content;
+  --sbb-radio-button-group-gap: var(--sbb-spacing-fixed-3x) var(--sbb-spacing-fixed-6x);
+  --sbb-radio-button-group-radio-button-flex: none;
+  --sbb-selection-action-panel-action-margin-inline-xs: var(--sbb-spacing-responsive-xxxs);
+  --sbb-selection-action-panel-action-margin-inline-s: var(--sbb-spacing-responsive-xxxs);
+  --sbb-selection-action-panel-action-margin-inline-m: var(--sbb-spacing-responsive-xxs);
+  --sbb-selection-action-panel-action-margin-inline: var(--sbb-selection-action-panel-action-margin-inline-m);
+  --sbb-selection-action-panel-background: var(--sbb-selection-panel-background-default);
+  --sbb-selection-action-panel-border-color: var(--sbb-selection-panel-border-color-default);
+  --sbb-selection-action-panel-border-width: var(--sbb-selection-panel-border-width-default);
+  --sbb-selection-expansion-panel-background: var(--sbb-selection-panel-background-default);
+  --sbb-selection-expansion-panel-border-color: var(--sbb-selection-panel-border-color-default);
+  --sbb-selection-expansion-panel-border-width: var(--sbb-selection-panel-border-width-default);
+  --sbb-selection-expansion-panel-content-visibility: visible;
+  --sbb-selection-expansion-panel-content-padding-block-start: var(--sbb-spacing-responsive-xxs);
+  --sbb-selection-expansion-panel-content-padding-block-end: var(
+    --sbb-selection-panel-input-padding-block-m
+  );
+  --sbb-selection-expansion-panel-content-padding-inline: var(--sbb-selection-panel-input-padding-inline-m);
+  --sbb-visual-checkbox-dimension: var(--sbb-checkbox-dimension-m);
+  --sbb-visual-checkbox-selection-color: var(--sbb-color-primary);
+  --sbb-visual-checkbox-selection-color-negative: var(--sbb-color-primary85);
+  --sbb-visual-checkbox-selection-color-disabled: var(--sbb-color-2);
+  --sbb-visual-checkbox-selection-color-disabled-negative: var(--sbb-color-2-negative);
+  --sbb-visual-checkbox-background-color: var(--sbb-background-color-1);
+  --sbb-visual-checkbox-background-color-negative: var(--sbb-background-color-1-negative);
+  --sbb-visual-checkbox-background-color-disabled: var(--sbb-background-color-3);
+  --sbb-visual-checkbox-background-color-negative-disabled: var(--sbb-background-color-3-negative);
+  --sbb-visual-checkbox-border-color: var(--sbb-border-color-5);
+  --sbb-visual-checkbox-border-color-disabled: var(--sbb-border-color-5);
+  --sbb-visual-checkbox-border-style: solid;
+  --sbb-visual-checkbox-border-style-disabled: dashed;
+  --sbb-visual-checkbox-border-width: var(--sbb-border-width-1x);
+  --sbb-visual-checkbox-cursor: var(--sbb-cursor-pointer);
+}
+@media (forced-colors: active) {
+  :root {
+    /* Focus outline */
+    --sbb-focus-outline-color-default: Highlight;
+    --sbb-focus-outline-color-dark: Highlight;
+    --sbb-focus-outline-width: var(--sbb-border-width-2x);
+    --sbb-card-border-color: CanvasText;
+    --sbb-card-border-width: var(--sbb-border-width-2x);
+    --sbb-card-badge-border-display: block;
+    --sbb-card-badge-inline-border-display: none;
+    --sbb-visual-checkbox-selection-color: Canvas;
+    --sbb-visual-checkbox-selection-color-negative: Canvas;
+    --sbb-visual-checkbox-selection-color-disabled: Canvas;
+    --sbb-visual-checkbox-selection-color-disabled-negative: Canvas;
+    --sbb-visual-checkbox-border-color: ButtonBorder;
+    --sbb-visual-checkbox-border-color-disabled: GrayText;
+    --sbb-visual-checkbox-border-width: var(--sbb-border-width-2x);
+    --sbb-visual-checkbox-border-style-disabled: solid;
+    --sbb-radio-button-background-color: Canvas;
+    --sbb-radio-button-border-width: var(--sbb-border-width-2x);
+    --sbb-radio-button-border-color: ButtonBorder;
+  }
+}
+: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;
@@ -1105,6 +1385,7 @@ html {
   line-height: var(--sbb-typo-line-height-text);
   letter-spacing: var(--sbb-typo-letter-spacing-text);
   font-size: var(--sbb-text-font-size);
+  color-scheme: light dark;
   color: var(--sbb-font-color-default);
   background-color: var(--sbb-background-color-1);
 }
@@ -1329,7 +1610,7 @@ sbb-breadcrumb-group:not(:defined) {
   overflow: hidden;
 }
 
-[data-card-focusable] {
+:is(sbb-card, sbb-flip-card) .sbb-action {
   pointer-events: all;
 }
 
@@ -1470,28 +1751,28 @@ sbb-train-formation[view=top] sbb-train-wagon {
   --sbb-train-wagon-wagon-end-right-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath d='M8.5,0.5 h51.5 a19.5,19.5 0 0 1 19.5,19.5 v0 a19.5,19.5 0 0 1 -19.5,19.5 h-51.5 a8,8 0 0 1 -8,-8 v-23 a8,8 0 0 1 8,-8 z' stroke='%23000000' stroke-width='1'/%3E%3C/svg%3E");
 }
 
-sbb-sidebar-container:has(> sbb-sidebar[data-skip-animation]) {
+sbb-sidebar-container:has(> sbb-sidebar:is(:state(skip-animation),[state--skip-animation])) {
   --sbb-sidebar-container-animation-duration: 0s;
 }
 
-sbb-sidebar-container:is(:has(> sbb-sidebar:not([position=end]):is([data-state=closing],
-[data-state=closed],
+sbb-sidebar-container:is(:has(> sbb-sidebar:not([position=end]):is(:is(:state(state-closing),[state--state-closing]),
+:is(:state(state-closed),[state--state-closed]),
 [mode=over],
-[data-mode-over-forced])),
+:is(:state(mode-over-forced),[state--mode-over-forced]))),
 :not(:has(> sbb-sidebar:not([position=end])))) > sbb-sidebar-content {
   --sbb-sidebar-content__margin-inline-start: 0;
 }
 
-sbb-sidebar-container:is(:has(> sbb-sidebar[position=end]:is([data-state=closing],
-[data-state=closed],
+sbb-sidebar-container:is(:has(> sbb-sidebar[position=end]:is(:is(:state(state-closing),[state--state-closing]),
+:is(:state(state-closed),[state--state-closed]),
 [mode=over],
-[data-mode-over-forced])),
+:is(:state(mode-over-forced),[state--mode-over-forced]))),
 :not(:has(> sbb-sidebar[position=end]))) > sbb-sidebar-content {
   --sbb-sidebar-content__margin-inline-end: 0;
 }
 
-sbb-sidebar-container:has(> sbb-sidebar:is([mode=over], [data-mode-over-forced]):is([data-state=opening],
-[data-state=opened])) {
+sbb-sidebar-container:has(> sbb-sidebar:is([mode=over], :is(:state(mode-over-forced),[state--mode-over-forced])):is(:is(:state(state-opening),[state--state-opening]),
+:is(:state(state-opened),[state--state-opened]))) {
   --sbb-sidebar-container__backdrop-visibility: visible;
   --sbb-sidebar-container-backdrop-opacity: 0.4;
 }