@sbb-esta/lyne-elements-dev 5.0.0-next.3-dev.1779781429 → 5.0.0-next.3-dev.1779813787

package/stepper/{step-label/step-label.global.scss → _stepper.global.scss}

@@ -1,4 +1,4 @@
-@use '../../core/styles' as sbb;
+@use '../core/styles' as sbb;
 
 $theme: 'standard' !default;
 
@@ -35,9 +35,13 @@ $theme: 'standard' !default;
       ),
       $theme
     )};
+  --sbb-stepper-orientation: row;
+  --sbb-stepper-border-width: var(--sbb-border-width-1x);
+  --sbb-stepper-marker-width: var(--sbb-border-width-3x);
+  --sbb-stepper-marker-color: var(--sbb-color-3);
 }
 
-@mixin base-forced-colors {
+@mixin forced-colors {
   --sbb-step-label-color: ButtonText;
   --sbb-step-label-prefix-border-color: ButtonText;
 }

package/tab-label.component-C5HCrNFB.js

@@ -0,0 +1,158 @@
+import { __esDecorate as e, __runInitializers as t } from "tslib";
+import { unsafeCSS as n } from "lit";
+import { property as r } from "lit/decorators.js";
+import { SbbDisabledMixin as i, SbbElement as a, SbbPropertyWatcherController as o, forceType as s, omitEmptyConverter as c } from "./core.js";
+import { html as l, unsafeStatic as u } from "lit/static-html.js";
+import { SbbIconNameMixin as d } from "./icon.pure.js";
+import { tabLabelCommonStyles as f } from "./tabs/common/styles.js";
+import { SbbTabChangeEvent as p } from "./tabs/tab-group/tab-group.component.js";
+//#region src/elements/tabs/tab-label/tab-label.scss?inline
+var m = ":host{display:inline-block;max-width:100%;outline:none!important}.sbb-tab-label{cursor:var(--sbb-tab-label-cursor);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.sbb-tab-label__icon{display:flex;flex-shrink:0}:host(:not(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name]))) .sbb-tab-label__icon{display:none}.sbb-tab-label__text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(:not(:is(:state(slotted),[state--slotted]))) .sbb-tab-label__text{display:none}.sbb-tab-label__amount{margin:0;color:var(--sbb-tab-label-amount-color);font-weight:400;text-decoration:var(--sbb-tab-label-text-decoration)}:host(:not(:is(:state(slotted-amount),[state--slotted-amount]),[amount])) .sbb-tab-label__amount{display:none}", h = (() => {
+	let h = i(d(a)), g, _ = [], v = [], y, b = [], x = [], S, C = [], w = [];
+	return class extends h {
+		static {
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(h[Symbol.metadata] ?? null) : void 0;
+			g = [r()], y = [s(), r({
+				reflect: !0,
+				type: Boolean
+			})], S = [s(), r({
+				reflect: !0,
+				converter: c
+			})], e(this, null, g, {
+				kind: "accessor",
+				name: "level",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "level" in e,
+					get: (e) => e.level,
+					set: (e, t) => {
+						e.level = t;
+					}
+				},
+				metadata: t
+			}, _, v), e(this, null, y, {
+				kind: "accessor",
+				name: "active",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "active" in e,
+					get: (e) => e.active,
+					set: (e, t) => {
+						e.active = t;
+					}
+				},
+				metadata: t
+			}, b, x), e(this, null, S, {
+				kind: "accessor",
+				name: "amount",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "amount" in e,
+					get: (e) => e.amount,
+					set: (e, t) => {
+						e.amount = t;
+					}
+				},
+				metadata: t
+			}, C, w), t && Object.defineProperty(this, Symbol.metadata, {
+				enumerable: !0,
+				configurable: !0,
+				writable: !0,
+				value: t
+			});
+		}
+		static {
+			this.elementName = "sbb-tab-label";
+		}
+		static {
+			this.role = "tab";
+		}
+		static {
+			this.styles = [f, n(m)];
+		}
+		#e;
+		get level() {
+			return this.#e;
+		}
+		set level(e) {
+			this.#e = e;
+		}
+		#t;
+		get active() {
+			return this.#t;
+		}
+		set active(e) {
+			this.#t = e;
+		}
+		#n;
+		get amount() {
+			return this.#n;
+		}
+		set amount(e) {
+			this.#n = e;
+		}
+		get tab() {
+			return this.nextElementSibling?.localName === "sbb-tab" ? this.nextElementSibling : null;
+		}
+		get group() {
+			return this.closest("sbb-tab-group");
+		}
+		constructor() {
+			super(), this._selected = !1, this._previousSize = null, this.#e = t(this, _, "1"), this.#t = (t(this, v), t(this, b, !1)), this.#n = (t(this, x), t(this, C, "")), t(this, w), this.addEventListener("click", () => this.activate()), this.addController(new o(this, () => this.group, { size: (e) => {
+				this._previousSize && this.internals.states.delete(`size-${this._previousSize}`), this._previousSize = e.size ?? null, this._previousSize && this.internals.states.add(`size-${this._previousSize}`);
+			} }));
+		}
+		connectedCallback() {
+			super.connectedCallback(), this.slot = "tab-bar", this.tabIndex = this.active ? 0 : -1;
+		}
+		willUpdate(e) {
+			super.willUpdate(e), e.has("active") && (this.internals.ariaSelected = `${this.active}`, this.active && !this.disabled ? this.activate() : this.deactivate()), e.has("disabled") && this.disabled && (this.tabIndex = -1, this.active && (this.deactivate(), this.group?.activateTab(0)));
+		}
+		deactivate() {
+			this.active = !1, this.tab?.deactivate(), this._selected = !1, this.tabIndex = -1;
+		}
+		activate() {
+			if (this.disabled) return;
+			let e = this.group?.labels || [], t = e.find((e) => e._selected);
+			if (t !== this) {
+				t?.deactivate(), this.active = !0, this.tab?.activate(), this._selected = !0, this.tabIndex = 0, this.tab?.dispatchEvent(new Event("active", {
+					bubbles: !0,
+					composed: !0
+				}));
+				let n = {
+					activeIndex: e.findIndex((e) => e === this),
+					activeTabLabel: this,
+					activeTab: this.tab,
+					previousIndex: e.findIndex((e) => e === t),
+					previousTabLabel: t,
+					previousTab: t?.tab
+				};
+				this.group?.dispatchEvent(new p(n));
+			}
+		}
+		linkToTab() {
+			this.tab && (this.internals.ariaControlsElements = [this.tab]);
+		}
+		render() {
+			let e = `h${Number(this.level) < 7 ? this.level : "1"}`;
+			return l`
+        <${u(e)} class="sbb-tab-label">
+          <span class="sbb-tab-label__icon">
+            ${this.renderIconSlot()}
+          </span>
+          <span class="sbb-tab-label__text">
+            <slot></slot>
+          </span>
+          <p class="sbb-tab-label__amount">
+            <slot name="amount">${this.amount}</slot>
+          </p>
+        </${u(e)}>
+    `;
+		}
+	};
+})();
+//#endregion
+export { h as t };

package/tabs/{common/tab-label-common.global.scss → _tabs.global.scss}

@@ -1,9 +1,26 @@
-@use '../../core/styles' as sbb;
+@use '../core/styles' as sbb;
 
 $theme: 'standard' !default;
 
+@mixin tab-label-amount {
+  margin: 0;
+  color: var(--sbb-tab-label-amount-color);
+  font-weight: normal;
+  text-decoration: var(--sbb-tab-label-text-decoration);
+}
+
 // These variables are shared within the `sbb-tab-label` and the `sbb-tab-nav-bar`.
 @mixin base {
+  --sbb-tab-group-content-gap-size-s: var(--sbb-spacing-responsive-xs);
+  --sbb-tab-group-content-gap-size-l: var(--sbb-spacing-responsive-s);
+  --sbb-tab-group-content-gap-size-xl: var(--sbb-spacing-responsive-m);
+  --sbb-tab-group-content-gap-default: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-tab-group-content-gap-size-l),
+        'lean': var(--sbb-tab-group-content-gap-size-s),
+      ),
+      $theme
+    )};
   --sbb-tab-label-height: #{sbb.theme-pattern-select(
       (
         'standard': var(--sbb-size-element-m),
@@ -36,3 +53,9 @@ $theme: 'standard' !default;
   --sbb-tab-label-line-color: var(--sbb-border-color-4-inverted);
   --sbb-tab-label-cursor: var(--sbb-cursor-pointer);
 }
+
+@mixin rules {
+  sbb-tab-nav-bar .sbb-tab-amount {
+    @include tab-label-amount;
+  }
+}

package/tabs/tab-label/tab-label.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../tab-label.component-BYssa8XI.js";
+import { t as e } from "../../tab-label.component-C5HCrNFB.js";
 export { e as SbbTabLabelElement };

package/tabs.js

@@ -1,5 +1,5 @@
 import { n as e, t } from "./tab-group.component-Dx0xldWI.js";
-import { t as n } from "./tab-label.component-BYssa8XI.js";
+import { t as n } from "./tab-label.component-C5HCrNFB.js";
 import { t as r } from "./tab-nav-bar.component-7j-RCq7p.js";
 import { t as i } from "./tab.component-C5xxMwwX.js";
 import { n as a, t as o } from "./styles-DGAxTLMz.js";

package/tabs.pure.js

@@ -1,5 +1,5 @@
 import { n as e, t } from "./tab-group.component-Dx0xldWI.js";
-import { t as n } from "./tab-label.component-BYssa8XI.js";
+import { t as n } from "./tab-label.component-C5HCrNFB.js";
 import { t as r } from "./tab-nav-bar.component-7j-RCq7p.js";
 import { t as i } from "./tab.component-C5xxMwwX.js";
 import { n as a, t as o } from "./styles-DGAxTLMz.js";

package/tag/{tag/tag.global.scss → _tag.global.scss}

@@ -1,4 +1,4 @@
-@use '../../core/styles' as sbb;
+@use '../core/styles' as sbb;
 
 $theme: 'standard' !default;
 
@@ -32,7 +32,7 @@ $theme: 'standard' !default;
     )};
 }
 
-@mixin base-forced-colors {
+@mixin forced-colors {
   --sbb-tag-amount-color: ButtonText;
   --sbb-tag-background-color: Canvas !important;
   --sbb-tag-text-color: ButtonText;

package/teaser/_teaser.global.scss

@@ -0,0 +1,51 @@
+@use '../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-teaser-scale-hover: 1.02;
+  --sbb-teaser-description-color: light-dark(var(--sbb-color-granite), var(--sbb-color-silver));
+  --sbb-teaser-flex-direction: row;
+  --sbb-teaser-align-items: center;
+  --sbb-teaser-font-size: var(--sbb-text-font-size-s);
+  --sbb-teaser-gap: var(--sbb-spacing-fixed-4x);
+  --sbb-teaser-border-radius: var(--sbb-border-radius-4x);
+  --sbb-teaser-image-width: #{sbb.px-to-rem-build(300)};
+}
+
+@mixin rules {
+  // 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
+  :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(
+      --sbb-disable-animation-duration,
+      var(--sbb-animation-duration-4x)
+    );
+    --sbb-teaser-image-animation-easing: var(--sbb-animation-easing);
+
+    &:hover {
+      @include sbb.hover-mq($hover: true) {
+        --sbb-teaser-image-brightness: var(--sbb-teaser-image-brightness-hover);
+      }
+    }
+
+    :is(sbb-image, img):not(.sbb-figure-overlap-image) {
+      // Although only the teaser has a scale property, we do it here, because this rule is
+      // more specific and overrides would not be respected.
+      will-change: filter, scale;
+      filter: brightness(var(--sbb-teaser-image-brightness, 1));
+      transition:
+        filter,
+        scale var(--sbb-teaser-image-animation-duration) var(--sbb-teaser-image-animation-easing);
+    }
+  }
+
+  sbb-teaser :is(sbb-image, img):not(.sbb-figure-overlap-image) {
+    --sbb-image-object-fit: cover;
+    --sbb-image-aspect-ratio: 4 / 3;
+
+    // The transition of the scale is done by the global rules in core.scss
+    scale: var(--sbb-teaser-scale, 1);
+  }
+}

package/teaser-hero/{teaser-hero.global.scss → _teaser-hero.global.scss}

@@ -24,4 +24,6 @@ $theme: 'standard' !default;
       width: 100%;
     }
   }
+
+  // Some rules are shared with sbb-teaser and published there.
 }

package/teaser-panel/{teaser-panel.global.scss → _teaser-panel.global.scss}

@@ -17,14 +17,14 @@ $theme: 'standard' !default;
   --sbb-panel-animation-easing: var(--sbb-animation-easing);
 }
 
-@mixin base-breakpoint-large {
+@mixin breakpoint-large {
   --sbb-panel-width: #{sbb.px-to-rem-build(321)};
   --sbb-panel-inner-height: #{sbb.px-to-rem-build(240.11)};
   --sbb-panel-triangle-height: #{sbb.px-to-rem-build(47.45)};
   --sbb-panel-font-size: var(--sbb-typo-scale-2x);
 }
 
-@mixin base-breakpoint-ultra {
+@mixin breakpoint-ultra {
   --sbb-panel-width: #{sbb.px-to-rem-build(428)};
   --sbb-panel-inner-height: #{sbb.px-to-rem-build(320.38)};
   --sbb-panel-triangle-height: #{sbb.px-to-rem-build(63.31)};

package/teaser-product/{common/teaser-product-common.global.scss → _teaser-product.global.scss}

@@ -1,4 +1,4 @@
-@use '../../core/styles' as sbb;
+@use '../core/styles' as sbb;
 
 $theme: 'standard' !default;
 
@@ -25,7 +25,7 @@ $theme: 'standard' !default;
   --sbb-teaser-product-footer-padding-block-end: 0;
 }
 
-@mixin base-breakpoint-large {
+@mixin breakpoint-large {
   --sbb-teaser-product-container-padding-block: var(--sbb-spacing-responsive-l) 0;
   --sbb-teaser-product-container-padding-inline: var(--sbb-spacing-responsive-xl);
   --sbb-teaser-product-content-align-content: center;
@@ -47,4 +47,6 @@ $theme: 'standard' !default;
       place-self: stretch;
     }
   }
+
+  // Some rules are shared with sbb-teaser and published there.
 }

package/time-input/{time-input.global.scss → _time-input.global.scss}

@@ -6,6 +6,6 @@ $theme: 'standard' !default;
   --sbb-time-input-max-width: #{sbb.px-to-rem-build(58)};
 }
 
-@mixin base-breakpoint-large {
+@mixin breakpoint-large {
   --sbb-time-input-max-width: #{sbb.px-to-rem-build(65)};
 }

package/timetable-form/{timetable-form/timetable-form.global.scss → _timetable-form.global.scss}

@@ -1,10 +1,20 @@
-@use '../../core/styles' as sbb;
+@use '../core/styles' as sbb;
 
 $theme: 'standard' !default;
 
 @mixin base {
   --sbb-timetable-form-background-color: var(--sbb-background-color-1);
   --sbb-timetable-form-border-radius: var(--sbb-border-radius-4x);
+  --sbb-timetable-form-details-border-block-start: var(--sbb-border-width-1x) solid
+    var(--sbb-border-color-4-inverted);
+  --sbb-timetable-form-details-gap: var(--sbb-spacing-fixed-1x);
+  --sbb-timetable-form-details-padding-block: var(--sbb-spacing-fixed-1x);
+  --sbb-timetable-form-details-padding-inline: var(--sbb-spacing-responsive-xxs);
+  --sbb-timetable-form-details-horizontal-divider-height: 1.5rem;
+  --sbb-timetable-form-field-route-icon-color: var(--sbb-color-2);
+  --sbb-timetable-form-field-route-icon-background-color: var(--sbb-background-color-1);
+  --sbb-timetable-form-field-route-via-icon-width: var(--sbb-size-icon-ui-small);
+  --sbb-timetable-form-field-route-via-after-dimension: #{sbb.px-to-rem-build(7)};
 }
 
 @mixin rules {

package/title/{title.global.scss → _title.global.scss}

@@ -2,6 +2,10 @@
 
 $theme: 'standard' !default;
 
+@mixin base {
+  --sbb-title-color: var(--sbb-color-3);
+}
+
 @mixin rules {
   // In smaller title font-sizes, the space after the title is smaller than the default paragraph space before.
   // Due to margin collapsing, the wrong paragraph space wins.

package/toggle/{toggle/toggle.global.scss → _toggle.global.scss}

@@ -1,4 +1,4 @@
-@use '../../core/styles' as sbb;
+@use '../core/styles' as sbb;
 
 $theme: 'standard' !default;
 
@@ -30,9 +30,13 @@ $theme: 'standard' !default;
   --sbb-toggle-selected-option-border-style: solid;
   --sbb-toggle-selected-option-border-color: var(--sbb-border-color-5);
   --sbb-toggle-selected-option-background-color: var(--sbb-background-color-1);
+  --sbb-toggle-option-color: light-dark(var(--sbb-color-anthracite), var(--sbb-color-cloud));
+  --sbb-toggle-option-gap: var(--sbb-spacing-fixed-1x);
+  --sbb-toggle-option-font-size: var(--sbb-text-font-size-xs);
+  --sbb-toggle-option-icon-min-size: var(--sbb-size-icon-ui-small);
 }
 
-@mixin base-forced-colors {
+@mixin forced-colors {
   --sbb-toggle-selected-option-border-width: var(--sbb-border-width-2x);
   --sbb-toggle-selected-option-border-color: Highlight;
 }

package/toggle-check/{toggle-check.global.scss → _toggle-check.global.scss}

@@ -26,7 +26,7 @@ $theme: 'standard' !default;
   --sbb-toggle-check-shadow: var(--sbb-box-shadow-level-5-hard);
 }
 
-@mixin base-forced-colors {
+@mixin forced-colors {
   --sbb-toggle-check-background-color: CanvasText;
   --sbb-toggle-check-circle-background-color: Canvas;
 }

package/train/{train-wagon-common.global.scss → _train.global.scss}

@@ -3,6 +3,27 @@
 $theme: 'standard' !default;
 
 @mixin base {
+  --sbb-train-blocked-passage-background-color: var(--sbb-color-error);
+  --sbb-train-blocked-passage-bar-color: var(--sbb-color-white);
+  --sbb-train-blocked-passage-icon-bar-width: #{sbb.px-to-rem-build(10)};
+  --sbb-train-blocked-passage-icon-bar-height: #{sbb.px-to-rem-build(4)};
+  --sbb-train-blocked-passage-icon-bar-border-radius: var(--sbb-border-radius-1x);
+  --sbb-train-formation-wagon-dimension-short: #{sbb.px-to-rem-build(36)};
+  --sbb-train-formation-wagon-dimension-long: #{sbb.px-to-rem-build(84)};
+  --sbb-train-formation-wagon-gap: var(--sbb-spacing-fixed-1x);
+  --sbb-train-formation-sector-line-color: light-dark(
+    var(--sbb-color-cement),
+    var(--sbb-color-smoke)
+  );
+  --sbb-train-formation-sector-line-width: var(--sbb-border-width-1x);
+  --sbb-train-formation-blocked-passage-dimension: #{sbb.px-to-rem-build(16)};
+  --sbb-train-formation-text-color: var(--sbb-color-3);
+  --sbb-train-formation-gap: var(--sbb-spacing-fixed-2x);
+  --sbb-train-formation-sector-padding: var(--sbb-spacing-fixed-1x);
+  --sbb-train-formation-sector-margin: var(--sbb-spacing-fixed-2x);
+  --sbb-train-formation-padding: var(--sbb-spacing-fixed-1x);
+  --_sbb-train-formation-flex-direction: row;
+  --_sbb-train-formation-flex-direction-inverted: column;
   --sbb-train-wagon-font-size: var(--sbb-text-font-size-xxs);
   --sbb-train-wagon-shape-color: var(--sbb-color-3);
   --sbb-train-wagon-vertical-gap: #{sbb.px-to-rem-build(2)};
@@ -38,5 +59,8 @@ $theme: 'standard' !default;
 }
 
 @mixin forced-colors {
+  --sbb-train-blocked-passage-background-color: CanvasText;
+  --sbb-train-blocked-passage-bar-color: Canvas;
+  --sbb-train-formation-sector-line-color: CanvasText;
   --sbb-train-wagon-shape-color: CanvasText;
 }

package/visual-checkbox/{visual-checkbox.global.scss → _visual-checkbox.global.scss}

@@ -26,7 +26,7 @@ $theme: 'standard' !default;
   --sbb-visual-checkbox-cursor: var(--sbb-cursor-pointer);
 }
 
-@mixin base-forced-colors {
+@mixin forced-colors {
   --sbb-visual-checkbox-selection-color: Canvas;
   --sbb-visual-checkbox-selection-color-negative: Canvas;
   --sbb-visual-checkbox-selection-color-disabled: Canvas;

package/alert/alert-group/alert-group.global.scss

@@ -1,8 +0,0 @@
-@use '../../core/styles/index' as sbb;
-
-$theme: 'standard' !default;
-
-@mixin base {
-  --sbb-alert-group-gap: var(--sbb-spacing-fixed-3x);
-  --sbb-alert-group-border-radius: var(--sbb-border-radius-4x);
-}

package/breadcrumb/breadcrumb/breadcrumb.global.scss

@@ -1,16 +0,0 @@
-@use '../../core/styles' as sbb;
-
-$theme: 'standard' !default;
-
-@mixin base {
-  --sbb-breadcrumb-color: light-dark(var(--sbb-color-granite), var(--sbb-color-aluminium));
-  --sbb-breadcrumb-color-hover: light-dark(var(--sbb-color-charcoal), var(--sbb-color-smoke));
-  --sbb-breadcrumb-color-active: light-dark(var(--sbb-color-anthracite), var(--sbb-color-cloud));
-  --sbb-breadcrumb-font-size: var(--sbb-text-font-size-xs);
-  --sbb-breadcrumb-gap: var(--sbb-spacing-fixed-2x);
-}
-
-@mixin base-forced-colors {
-  --sbb-breadcrumb-color: ButtonText;
-  --sbb-breadcrumb-color-active: Highlight;
-}

package/button/common/mini-button-common.global.scss

@@ -1,18 +0,0 @@
-@use '../../core/styles' as sbb;
-
-$theme: 'standard' !default;
-
-@mixin base {
-  --sbb-mini-button-color-text: var(--sbb-color-3);
-  --sbb-mini-button-color-default-background: transparent;
-  --sbb-mini-button-color-hover-background: var(--sbb-background-color-3);
-  --sbb-mini-button-color-active-background: var(--sbb-background-color-4);
-  --sbb-mini-button-color-disabled-background: var(--sbb-background-color-3);
-  --sbb-mini-button-color-disabled-border: var(--sbb-border-color-5);
-  --sbb-mini-button-color-disabled-text: light-dark(
-    var(--sbb-color-granite),
-    var(--sbb-color-smoke)
-  );
-  --sbb-mini-button-border-radius: var(--sbb-border-radius-infinity);
-  --sbb-mini-button-transition-easing-function: var(--sbb-animation-easing);
-}

package/button/mini-button-group/mini-button-group.global.scss

@@ -1,35 +0,0 @@
-@use '../../core/styles' as sbb;
-
-$theme: 'standard' !default;
-
-@mixin base {
-  --sbb-mini-button-group-background: var(--sbb-background-color-1);
-  --sbb-mini-button-group-border-color: var(--sbb-border-color-4-inverted);
-  --sbb-mini-button-group-border-width: var(--sbb-border-width-2x);
-  --sbb-mini-button-group-border-radius: var(--sbb-border-radius-infinity);
-  --sbb-mini-button-group-gap: var(--sbb-spacing-fixed-2x);
-  --sbb-mini-button-group-divider-height: var(--sbb-size-icon-ui-small);
-  --sbb-mini-button-group-divider-padding: var(--sbb-spacing-fixed-1x);
-  --sbb-mini-button-group-min-height-s: var(--sbb-size-element-xs);
-  --sbb-mini-button-group-min-height-m: var(--sbb-size-element-s);
-  --sbb-mini-button-group-min-height-l: var(--sbb-size-element-m);
-  --sbb-mini-button-group-min-height-xl: var(--sbb-size-element-l);
-  --sbb-mini-button-group-min-height: #{sbb.theme-pattern-select(
-      (
-        'standard': var(--sbb-mini-button-group-min-height-m),
-        'lean': var(--sbb-mini-button-group-min-height-s),
-      ),
-      $theme
-    )};
-  --sbb-mini-button-group-padding-inline-s: var(--sbb-spacing-fixed-2x);
-  --sbb-mini-button-group-padding-inline-m: var(--sbb-spacing-fixed-3x);
-  --sbb-mini-button-group-padding-inline-l: var(--sbb-spacing-fixed-3x);
-  --sbb-mini-button-group-padding-inline-xl: var(--sbb-spacing-fixed-4x);
-  --sbb-mini-button-group-padding-inline: #{sbb.theme-pattern-select(
-      (
-        'standard': var(--sbb-mini-button-group-padding-inline-m),
-        'lean': var(--sbb-mini-button-group-padding-inline-s),
-      ),
-      $theme
-    )};
-}

package/calendar/common/calendar-cell-base-element.global.scss

@@ -1,23 +0,0 @@
-@use '../../core/styles' as sbb;
-
-$theme: 'standard' !default;
-
-@mixin base {
-  --sbb-calendar-cell-border: var(--sbb-calendar-cell-border-width) solid
-    var(--sbb-border-color-1-inverted);
-  --sbb-calendar-cell-color: var(--sbb-color-2);
-  --sbb-calendar-cell-cursor: var(--sbb-cursor-pointer);
-  --sbb-calendar-cell-justify-content: normal;
-  --sbb-calendar-cell-inset: #{sbb.px-to-rem-build(1)};
-  --sbb-calendar-cell-font-size: var(--sbb-text-font-size-s);
-  --sbb-calendar-cell-font-weight: unset;
-  --sbb-calendar-cell-transition-easing-function: var(--sbb-animation-easing);
-  --sbb-calendar-cell-year-month-width: #{sbb.px-to-rem-build(77)};
-  --sbb-calendar-cell-year-month-height: #{sbb.px-to-rem-build(44)};
-  --sbb-calendar-day-width: #{sbb.px-to-rem-build(44)};
-  --sbb-calendar-day-height: #{sbb.px-to-rem-build(48)};
-  --sbb-calendar-day-extra-display: block;
-  --sbb-calendar-day-extra-height: var(--sbb-spacing-fixed-4x);
-  --sbb-calendar-day-crossed-out-top: 33%;
-  --sbb-calendar-day-crossed-out-translate: translate(-50%, -33%) rotate(-45deg);
-}

package/card/card/card.global.scss

@@ -1,22 +0,0 @@
-$theme: 'standard' !default;
-
-@use '../../core/styles' as sbb;
-@use '../card.library.global' as card with (
-  $theme: $theme
-);
-
-@mixin base {
-  @include card.variables--global;
-}
-
-@mixin base-forced-colors {
-  @include card.variables--global-forced-colors;
-}
-
-@mixin rules {
-  // 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.
-  sbb-card .sbb-action {
-    pointer-events: all;
-  }
-}

package/card/card-badge/card-badge.global.scss

@@ -1,19 +0,0 @@
-@use '../../core/styles' as sbb;
-
-$theme: 'standard' !default;
-
-@mixin base {
-  --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);
-}
-
-@mixin base-forced-colors {
-  --sbb-card-badge-border-display: block;
-  --sbb-card-badge-inline-border-display: none;
-}

package/checkbox/checkbox.global.scss

@@ -1,10 +0,0 @@
-@use '../core/styles' as sbb;
-
-$theme: 'standard' !default;
-
-@mixin base {
-  --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);
-}

package/chip/chip/chip.global.scss

@@ -1,16 +0,0 @@
-@use '../../core/styles' as sbb;
-
-$theme: 'standard' !default;
-
-@mixin base {
-  --sbb-chip-background-color: var(--sbb-background-color-3);
-  --sbb-chip-background-color-active: var(--sbb-background-color-1);
-  --sbb-chip-background-color-hover: var(--sbb-background-color-1);
-  --sbb-chip-border-color: var(--sbb-border-color-4-inverted);
-  --sbb-chip-border-radius: var(--sbb-border-radius-2x);
-  --sbb-chip-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cloud));
-  --sbb-chip-color-hover: var(--sbb-color-2);
-  --sbb-chip-font-size: var(--sbb-text-font-size-xxs);
-  --sbb-chip-height: #{sbb.px-to-rem-build(24)};
-  --sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-2x);
-}