@sbb-esta/lyne-elements 4.0.0-next.3 → 4.0.0

package/core/mixins/selection-panel-mixin.js

@@ -1,87 +1,39 @@
-var k = (s) => {
-  throw TypeError(s);
-};
-var S = (s, r, i) => r.has(s) || k("Cannot " + i);
-var h = (s, r, i) => (S(s, r, "read from private field"), i ? i.call(s) : r.get(s)), u = (s, r, i) => r.has(s) ? k("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(s) : r.set(s, i), d = (s, r, i, n) => (S(s, r, "write to private field"), n ? n.call(s, i) : r.set(s, i), i);
-import { __esDecorate as y, __runInitializers as b } from "tslib";
-import { isServer as A } from "lit";
-import { property as v } from "lit/decorators.js";
-import { forceType as x } from "../decorators.js";
-import { SbbElementInternalsMixin as C } from "./element-internals-mixin.js";
-const P = (s) => (() => {
-  var o, l, a;
-  let i = C(s), n, p = [], m = [], g, f = [], _ = [];
-  return a = class extends i {
-    constructor(...e) {
-      super(e);
-      u(this, o);
-      u(this, l);
-      d(this, o, b(this, p, "white")), d(this, l, (b(this, m), b(this, f, !1))), this.group = (b(this, _), null), this.sizeAttributeObserver = A ? null : new MutationObserver((t) => this._onSizeAttributesChange(t)), this.addEventListener?.("panelconnected", (t) => this.initFromInput(t));
-    }
-    /** The background color of the panel. */
-    get color() {
-      return h(this, o);
-    }
-    set color(e) {
-      d(this, o, e);
-    }
-    /** Whether the unselected panel has a border. */
-    get borderless() {
-      return h(this, l);
-    }
-    set borderless(e) {
-      d(this, l, e);
-    }
-    /** Whether the selection panel is checked. */
-    set checked(e) {
-      this.toggleState("checked", e);
-    }
-    get checked() {
-      return this.internals.states.has("checked");
-    }
-    /** Whether the selection panel is disabled. */
-    set disabled(e) {
-      this.toggleState("disabled", e);
-    }
-    get disabled() {
-      return this.internals.states.has("disabled");
-    }
-    connectedCallback() {
-      super.connectedCallback(), this.group = this.closest("sbb-radio-button-group, sbb-checkbox-group");
-    }
-    disconnectedCallback() {
-      super.disconnectedCallback(), this.sizeAttributeObserver?.disconnect();
-    }
-    initFromInput(e) {
-      const t = e.target;
-      this.checked = t.checked, this.disabled = t.disabled, this.sizeAttributeObserver?.disconnect(), this.sizeAttributeObserver?.observe(t, { attributeFilter: ["size"] });
-    }
-    onInputStateChange(e) {
-      e.detail.type === "disabled" ? this.disabled = e.detail.disabled : e.detail.type === "checked" && (this.checked = e.detail.checked);
-    }
-    /**
-     * Set the data-size in two cases:
-     * - if there's no group, so the size change comes directly from a change on the inner panel;
-     * - if there's a wrapper group and its size changes, syncing it with the panel size.
-     *
-     * On the other hand, if there's a wrapper group and the size changes on the inner panel, the data-size doesn't change.
-     */
-    _onSizeAttributesChange(e) {
-      for (const t of e)
-        if (t.attributeName === "size") {
-          const c = this.group, z = t.target.getAttribute("size");
-          (!c || c.size === z) && this.setAttribute("data-size", z);
+import { SbbPropertyWatcherController as o } from "../controllers.js";
+import { SbbElementInternalsMixin as r } from "./element-internals-mixin.js";
+const h = (t) => {
+  class s extends r(t) {
+    /** Group element if present */
+    get group() {
+      return this.closest?.("sbb-radio-button-group, sbb-checkbox-group") ?? null;
+    }
+    /** Input panel element */
+    get panel() {
+      return this.querySelector?.("sbb-radio-button-panel, sbb-checkbox-panel") ?? null;
+    }
+    constructor(...i) {
+      super(i), this._propertyWatcher = new o(this, () => this.panel, {
+        checked: (e) => {
+          this.toggleState("checked", e.checked), this.onInputStateChange?.();
+        },
+        disabled: (e) => {
+          this.toggleState("disabled", e.disabled), this.onInputStateChange?.();
+        },
+        size: (e) => {
+          this._previousSize && this.internals.states.delete(`size-${this._previousSize}`), this._previousSize = e.size, this._previousSize && this.internals.states.add(`size-${this._previousSize}`);
+        },
+        borderless: (e) => {
+          this.toggleState("borderless", e.borderless);
+        },
+        color: (e) => {
+          this._previousColor && this.internals.states.delete(`color-${this._previousColor}`), this._previousColor = e.color, this._previousColor && this.internals.states.add(`color-${this._previousColor}`);
         }
+      }), this.addEventListener?.("panelconnected", () => this._propertyWatcher.connect());
     }
-  }, o = new WeakMap(), l = new WeakMap(), (() => {
-    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(i[Symbol.metadata] ?? null) : void 0;
-    n = [v({ reflect: !0 })], g = [x(), v({ reflect: !0, type: Boolean })], y(a, null, n, { kind: "accessor", name: "color", static: !1, private: !1, access: { has: (t) => "color" in t, get: (t) => t.color, set: (t, c) => {
-      t.color = c;
-    } }, metadata: e }, p, m), y(a, null, g, { kind: "accessor", name: "borderless", static: !1, private: !1, access: { has: (t) => "borderless" in t, get: (t) => t.borderless, set: (t, c) => {
-      t.borderless = c;
-    } }, metadata: e }, f, _), e && Object.defineProperty(a, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
-  })(), a;
-})();
+    onInputStateChange() {
+    }
+  }
+  return s;
+};
 export {
-  P as SbbSelectionPanelMixin
+  h as SbbSelectionPanelMixin
 };

package/core/mixins.js

@@ -1,40 +1,41 @@
 import { SbbAnimationCompleteMixin as b } from "./mixins/animation-complete-mixin.js";
-import { SbbDisabledInteractiveMixin as r, SbbDisabledMixin as a, SbbDisabledTabIndexActionMixin as l } from "./mixins/disabled-mixin.js";
-import { SbbElementInternalsMixin as c, appendAriaElements as p, removeAriaElements as u } from "./mixins/element-internals-mixin.js";
-import { SbbFormAssociatedCheckboxMixin as x } from "./mixins/form-associated-checkbox-mixin.js";
-import { SbbFormAssociatedInputMixin as f } from "./mixins/form-associated-input-mixin.js";
+import { SbbDisabledInteractiveMixin as a, SbbDisabledMixin as r, SbbDisabledTabIndexActionMixin as l } from "./mixins/disabled-mixin.js";
+import { SbbElementInternalsMixin as c, appendAriaElements as p, removeAriaElements as u, ɵstateController as x } from "./mixins/element-internals-mixin.js";
+import { SbbFormAssociatedCheckboxMixin as v } from "./mixins/form-associated-checkbox-mixin.js";
+import { SbbFormAssociatedInputMixin as h } from "./mixins/form-associated-input-mixin.js";
 import { SbbFormAssociatedMixin as g } from "./mixins/form-associated-mixin.js";
-import { SbbFormAssociatedRadioButtonMixin as S, radioButtonRegistry as M } from "./mixins/form-associated-radio-button-mixin.js";
-import { SbbHydrationMixin as y } from "./mixins/hydration-mixin.js";
-import { SbbNamedSlotListMixin as C } from "./mixins/named-slot-list-mixin.js";
-import { SbbNegativeMixin as I } from "./mixins/negative-mixin.js";
+import { SbbFormAssociatedRadioButtonMixin as M, radioButtonRegistry as w } from "./mixins/form-associated-radio-button-mixin.js";
+import { SbbHydrationMixin as A } from "./mixins/hydration-mixin.js";
+import { SbbNamedSlotListMixin as F } from "./mixins/named-slot-list-mixin.js";
+import { SbbNegativeMixin as R } from "./mixins/negative-mixin.js";
 import { SbbPanelMixin as D } from "./mixins/panel-mixin.js";
-import { SbbRequiredMixin as z } from "./mixins/required-mixin.js";
-import { SbbReadonlyMixin as N } from "./mixins/readonly-mixin.js";
-import { SbbSelectionPanelMixin as _ } from "./mixins/selection-panel-mixin.js";
-import { SbbUpdateSchedulerMixin as H } from "./mixins/update-scheduler-mixin.js";
+import { SbbRequiredMixin as B } from "./mixins/required-mixin.js";
+import { SbbReadonlyMixin as P } from "./mixins/readonly-mixin.js";
+import { SbbSelectionPanelMixin as q } from "./mixins/selection-panel-mixin.js";
+import { SbbUpdateSchedulerMixin as L } from "./mixins/update-scheduler-mixin.js";
 import { css as e } from "lit";
-const n = e`:host{--sbb-selection-panel-background: var( --sbb-selection-panel-inner-background, var(--sbb-selection-panel-background-default) );--sbb-selection-panel-border-width: var( --sbb-selection-panel-inner-border-width, var(--sbb-selection-panel-border-width-default) );--sbb-selection-panel-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );display:block;outline:none!important}:host([size=m]){--sbb-selection-panel-input-padding: var(--sbb-selection-panel-input-padding-block-m) var(--sbb-selection-panel-input-padding-inline-m)}:host([size=s]){--sbb-selection-panel-input-padding: var(--sbb-selection-panel-input-padding-block-s) var(--sbb-selection-panel-input-padding-inline-s)}:host([color=milk]){--sbb-selection-panel-background: var( --sbb-selection-panel-inner-background, var(--sbb-selection-panel-background-milk) )}:host([borderless]:not([data-checked])){--sbb-selection-panel-border-color: var(--sbb-selection-panel-border-color-borderless)}:host(:is([data-checked]):not(:disabled,[disabled])){--sbb-selection-panel-border-color: var(--sbb-selection-panel-border-color-checked);--sbb-selection-panel-border-width: var( --sbb-selection-panel-inner-border-width, var(--sbb-selection-panel-border-width-checked) )}:host(:is(:disabled,[disabled])){--sbb-selection-panel-cursor: var(--sbb-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;inset: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) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width)}.sbb-selection-panel__badge{-webkit-user-select:none;user-select:none;pointer-events:none;position:absolute;inset: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(:is(:state(slotted-subtext),[state--slotted-subtext]))) slot[name=subtext]{display:none}`;
+const n = e`:host{--sbb-selection-panel-background: var( --sbb-selection-panel-inner-background, var(--sbb-selection-panel-background-default) );--sbb-selection-panel-border-width: var( --sbb-selection-panel-inner-border-width, var(--sbb-selection-panel-border-width-default) );--sbb-selection-panel-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );display:block;outline:none!important}:host([size=xs]){--sbb-selection-panel-checkbox-dimension: var(--sbb-checkbox-dimension-xs);--sbb-selection-panel-input-padding: var(--sbb-selection-panel-input-padding-block-xs) var(--sbb-selection-panel-input-padding-inline-xs)}:host([size=s]){--sbb-selection-panel-checkbox-dimension: var(--sbb-checkbox-dimension-s);--sbb-selection-panel-input-padding: var(--sbb-selection-panel-input-padding-block-s) var(--sbb-selection-panel-input-padding-inline-s)}:host([size=m]){--sbb-selection-panel-checkbox-dimension: var(--sbb-checkbox-dimension-m);--sbb-selection-panel-input-padding: var(--sbb-selection-panel-input-padding-block-m) var(--sbb-selection-panel-input-padding-inline-m)}:host([color=milk]){--sbb-selection-panel-background: var( --sbb-selection-panel-inner-background, var(--sbb-selection-panel-background-milk) )}:host([borderless]:not(:is(:state(checked),[state--checked]))){--sbb-selection-panel-border-color: var(--sbb-selection-panel-border-color-borderless)}:host(:is(:is(:state(checked),[state--checked])):not(:disabled,[disabled])){--sbb-selection-panel-border-color: var(--sbb-selection-panel-border-color-checked);--sbb-selection-panel-border-width: var( --sbb-selection-panel-inner-border-width, var(--sbb-selection-panel-border-width-checked) )}:host(:is(:disabled,[disabled])){--sbb-selection-panel-cursor: var(--sbb-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;inset: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) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width)}.sbb-selection-panel__badge{-webkit-user-select:none;user-select:none;pointer-events:none;position:absolute;inset: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:calc(var(--sbb-selection-panel-checkbox-dimension) + var(--sbb-spacing-fixed-2x))}:host(:not(:is(:state(slotted-subtext),[state--slotted-subtext]))) slot[name=subtext]{display:none}`;
 export {
   b as SbbAnimationCompleteMixin,
-  r as SbbDisabledInteractiveMixin,
-  a as SbbDisabledMixin,
+  a as SbbDisabledInteractiveMixin,
+  r as SbbDisabledMixin,
   l as SbbDisabledTabIndexActionMixin,
   c as SbbElementInternalsMixin,
-  x as SbbFormAssociatedCheckboxMixin,
-  f as SbbFormAssociatedInputMixin,
+  v as SbbFormAssociatedCheckboxMixin,
+  h as SbbFormAssociatedInputMixin,
   g as SbbFormAssociatedMixin,
-  S as SbbFormAssociatedRadioButtonMixin,
-  y as SbbHydrationMixin,
-  C as SbbNamedSlotListMixin,
-  I as SbbNegativeMixin,
+  M as SbbFormAssociatedRadioButtonMixin,
+  A as SbbHydrationMixin,
+  F as SbbNamedSlotListMixin,
+  R as SbbNegativeMixin,
   D as SbbPanelMixin,
-  N as SbbReadonlyMixin,
-  z as SbbRequiredMixin,
-  _ as SbbSelectionPanelMixin,
-  H as SbbUpdateSchedulerMixin,
+  P as SbbReadonlyMixin,
+  B as SbbRequiredMixin,
+  q as SbbSelectionPanelMixin,
+  L as SbbUpdateSchedulerMixin,
   p as appendAriaElements,
   n as panelCommonStyle,
-  M as radioButtonRegistry,
-  u as removeAriaElements
+  w as radioButtonRegistry,
+  u as removeAriaElements,
+  x as ɵstateController
 };

package/core/overlay/overlay-option-panel.d.ts

@@ -1,3 +1,4 @@
+import { SbbElementInternalsMixinType } from '../mixins.ts';
 /**
  * Places the overlay in the correct position.
  * @param dialog The reference to the dialog element.
@@ -7,5 +8,5 @@
  * @param element The reference to the component.
  * @param position The allowed position of the overlay relative to the origin.
  */
-export declare function setOverlayPosition(dialog: HTMLElement, originElement: HTMLElement, optionContainer: HTMLElement, container: HTMLElement, element: HTMLElement, position?: 'auto' | 'above' | 'below'): void;
+export declare function setOverlayPosition(dialog: HTMLElement, originElement: HTMLElement, optionContainer: HTMLElement, container: HTMLElement, element: HTMLElement & SbbElementInternalsMixinType, position?: 'auto' | 'above' | 'below'): void;
 //# sourceMappingURL=overlay-option-panel.d.ts.map

package/core/overlay/overlay-option-panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"overlay-option-panel.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/overlay/overlay-option-panel.ts"],"names":[],"mappings":"AAEA;;;;;;;;GAQG;AACH,wBAAgB,kBAAkB,CAChC,MAAM,EAAE,WAAW,EACnB,aAAa,EAAE,WAAW,EAC1B,eAAe,EAAE,WAAW,EAC5B,SAAS,EAAE,WAAW,EACtB,OAAO,EAAE,WAAW,EACpB,QAAQ,GAAE,MAAM,GAAG,OAAO,GAAG,OAAgB,GAC5C,IAAI,CAsBN"}
+{"version":3,"file":"overlay-option-panel.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/overlay/overlay-option-panel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,4BAA4B,EAAoB,MAAM,cAAc,CAAC;AAInF;;;;;;;;GAQG;AACH,wBAAgB,kBAAkB,CAChC,MAAM,EAAE,WAAW,EACnB,aAAa,EAAE,WAAW,EAC1B,eAAe,EAAE,WAAW,EAC5B,SAAS,EAAE,WAAW,EACtB,OAAO,EAAE,WAAW,GAAG,4BAA4B,EACnD,QAAQ,GAAE,MAAM,GAAG,OAAO,GAAG,OAAgB,GAC5C,IAAI,CA6BN"}

package/core/overlay/overlay-option-panel.js

@@ -1,14 +1,17 @@
+import { ɵstateController as l } from "../mixins.js";
 import { getElementPosition as r } from "./position.js";
-function b(e, o, i, a, t, p = "auto") {
-  if (!e || !o)
+function y(i, t, n, a, o, p = "auto") {
+  if (!i || !t)
     return;
-  t.style.setProperty("--sbb-options-panel-width", `${o.offsetWidth}px`), t.style.setProperty("--sbb-options-panel-origin-height", `${o.offsetHeight}px`);
-  const s = r(i, o, a, {
+  o.style.setProperty("--sbb-options-panel-width", `${t.offsetWidth}px`), o.style.setProperty("--sbb-options-panel-origin-height", `${t.offsetHeight}px`);
+  const e = r(n, t, a, {
     forceBelow: p === "below",
     forceAbove: p === "above"
   });
-  t.style.setProperty("--sbb-options-panel-position-x", `${s.left}px`), t.style.setProperty("--sbb-options-panel-position-y", `${s.top}px`), t.style.setProperty("--sbb-options-panel-max-height", s.maxHeight), t.setAttribute("data-options-panel-position", s.alignment.vertical), o.setAttribute("data-options-panel-position", s.alignment.vertical);
+  o.style.setProperty("--sbb-options-panel-position-x", `${e.left}px`), o.style.setProperty("--sbb-options-panel-position-y", `${e.top}px`), o.style.setProperty("--sbb-options-panel-max-height", e.maxHeight);
+  const s = l(o);
+  e.alignment.vertical === "above" ? (s.add("options-panel-position-above"), s.delete("options-panel-position-below")) : (s.add("options-panel-position-below"), s.delete("options-panel-position-above")), t.setAttribute("data-options-panel-position", e.alignment.vertical);
 }
 export {
-  b as setOverlayPosition
+  y as setOverlayPosition
 };

package/core/styles/core.scss

@@ -14,6 +14,12 @@ $theme: 'standard' !default;
 @use './mixins/scrollbar';
 @use './mixins/typo';
 
+@use '../../card/card/card.global' as card with (
+  $theme: $theme
+);
+@use '../../card/card-badge/card-badge.global' as card-badge with (
+  $theme: $theme
+);
 @use '../../core/mixins/panel-common.global' as panel-common with (
   $theme: $theme
 );
@@ -26,6 +32,12 @@ $theme: 'standard' !default;
 @use '../../checkbox/common/checkbox-common.global' as checkbox-common with (
   $theme: $theme
 );
+@use '../../radio-button/common/radio-button-common.global' as radio-button-common with (
+  $theme: $theme
+);
+@use '../../radio-button/radio-button-group/radio-button-group.global' as radio-button-group with (
+  $theme: $theme
+);
 @use '../../selection-action-panel/selection-action-panel.global' as selection-action-panel with (
   $theme: $theme
 );
@@ -44,17 +56,25 @@ $theme: 'standard' !default;
   // Grab CSS vars defined by `@sbb-esta/lyne-design-tokens` package
   @include sbb-css-tokens.base;
 
+  @include card.base;
+  @include card-badge.base;
   @include panel-common.base;
   @include checkbox.base;
   @include checkbox-group.base;
   @include checkbox-common.base;
+  @include radio-button-common.base;
+  @include radio-button-group.base;
   @include selection-action-panel.base;
   @include selection-expansion-panel.base;
   @include visual-checkbox.base;
 
   @include a11y.if-forced-colors {
     @include sbb-css-tokens.forced-colors;
+
+    @include card.base-forced-colors;
+    @include card-badge.base-forced-colors;
     @include visual-checkbox.base-forced-colors;
+    @include radio-button-common.base-forced-colors;
   }
 
   // Train formation
@@ -165,6 +185,7 @@ $theme: 'standard' !default;
 html {
   @include typo.text;
 
+  color-scheme: light dark;
   color: var(--sbb-font-color-default);
   background-color: var(--sbb-background-color-1);
 }
@@ -334,7 +355,7 @@ sbb-breadcrumb-group:not(:defined) {
 
 // Every element in the Light DOM of a sbb-card which is focusable should receive this attribute.
 // This style enables accessing focusable elements inside an sbb-card.
-[data-card-focusable] {
+:is(sbb-card, sbb-flip-card) .sbb-action {
   pointer-events: all;
 }
 
@@ -514,7 +535,7 @@ sbb-train-formation[view='top'] sbb-train-wagon {
 
 // Skip animation for the container, content and sidebars when a sidebar requests it
 // (during initialization or if animation is disabled, but only during transition)
-sbb-sidebar-container:has(> sbb-sidebar[data-skip-animation]) {
+sbb-sidebar-container:has(> sbb-sidebar:state(skip-animation)) {
   --sbb-sidebar-container-animation-duration: 0s;
 }
 
@@ -525,10 +546,10 @@ sbb-sidebar-container:has(> sbb-sidebar[data-skip-animation]) {
 sbb-sidebar-container:is(
     :has(
       > sbb-sidebar:not([position='end']):is(
-          [data-state='closing'],
-          [data-state='closed'],
+          :state(state-closing),
+          :state(state-closed),
           [mode='over'],
-          [data-mode-over-forced]
+          :state(mode-over-forced)
         )
     ),
     :not(:has(> sbb-sidebar:not([position='end'])))
@@ -544,10 +565,10 @@ sbb-sidebar-container:is(
 sbb-sidebar-container:is(
     :has(
       > sbb-sidebar[position='end']:is(
-          [data-state='closing'],
-          [data-state='closed'],
+          :state(state-closing),
+          :state(state-closed),
           [mode='over'],
-          [data-mode-over-forced]
+          :state(mode-over-forced)
         )
     ),
     :not(:has(> sbb-sidebar[position='end']))
@@ -558,9 +579,9 @@ sbb-sidebar-container:is(
 
 // Toggles visibility of backdrop if there is an affected sidebar inside the container.
 sbb-sidebar-container:has(
-  > sbb-sidebar:is([mode='over'], [data-mode-over-forced]):is(
-      [data-state='opening'],
-      [data-state='opened']
+  > sbb-sidebar:is([mode='over'], :state(mode-over-forced)):is(
+      :state(state-opening),
+      :state(state-opened)
     )
 ) {
   --sbb-sidebar-container__backdrop-visibility: visible;

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/testing/wait-for-render.d.ts

@@ -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