@sbb-esta/lyne-elements 4.11.0 → 4.12.0

package/{chip-group.component-DJzUToem.js → chip-group.component-BqBYzfXA.js}

@@ -11,7 +11,7 @@ import { getNextElementIndex as _, isArrowKeyPressed as v } from "./core/a11y.js
 import { isLean as y } from "./core/dom/lean-context.js";
 import { SbbChipElement as b } from "./chip/chip/chip.component.js";
 //#region src/elements/chip/chip-group/chip-group.scss?inline
-var x = ":host{width:100%;display:flex;flex-wrap:wrap;gap:var(--sbb-chip-group-gap);align-items:center;margin-block:var(--sbb-chip-group-margin-block)}:host(:is(:is(:state(size-s),[state--size-s]),:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: 0}:host(:is(:state(size-s),[state--size-s]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: .375rem .3125rem}@media(min-width:64rem){:host(:is(:state(size-s),[state--size-s]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: .3125rem .1875rem}}:host(:is(:state(without-label),[state--without-label]):is(:state(size-s),[state--size-s]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: 0 .4375rem}@media(min-width:64rem){:host(:is(:state(without-label),[state--without-label]):is(:state(size-s),[state--size-s]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: 0 .3125rem}}:host(:is(:is(:state(size-l),[state--size-l]),:is(:state(size-m),[state--size-m]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default) 0}@media(min-width:64rem){:host(:is(:is(:state(size-l),[state--size-l]),:is(:state(size-m),[state--size-m]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default-large) 0}}:host(:is(:state(without-label),[state--without-label]):is(:state(size-m),[state--size-m]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: .1875rem .6875rem}@media(min-width:64rem){:host(:is(:state(without-label),[state--without-label]):is(:state(size-m),[state--size-m]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: .1875rem .875rem}}:host(:is(:state(without-label),[state--without-label]):not(:is(:state(empty),[state--empty]),:is(:state(size-s),[state--size-s]),:is(:state(size-m),[state--size-m]),:is(:state(size-l),[state--size-l]))){--sbb-chip-group-margin-block: var(--sbb-chip-group-margin-block-no-label-not-empty)}:host(:not(:is(:state(without-label),[state--without-label])):is(:state(size-m),[state--size-m]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default) var(--_sbb-chip-group-margin-block-start-default-large)}@media(min-width:64rem){:host(:not(:is(:state(without-label),[state--without-label])):is(:state(size-m),[state--size-m]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default-large) var(--_sbb-chip-group-margin-block-start-default-large)}}:host(:not(:is(:state(without-label),[state--without-label]),:is(:state(empty),[state--empty]),:is(:state(size-s),[state--size-s]),:is(:state(size-m),[state--size-m]),:is(:state(size-l),[state--size-l]))){--sbb-chip-group-margin-block: var(--sbb-chip-group-margin-block-with-label-not-empty)}:host(:is(:state(without-label),[state--without-label]):is(:state(size-l),[state--size-l]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default) 1rem}@media(min-width:64rem){:host(:is(:state(without-label),[state--without-label]):is(:state(size-l),[state--size-l]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default-large) 1.25rem}}:host(:not(:is(:state(without-label),[state--without-label])):is(:state(size-l),[state--size-l]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default) .46875rem}@media(min-width:64rem){:host(:not(:is(:state(without-label),[state--without-label])):is(:state(size-l),[state--size-l]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default-large) .46875rem}}::slotted(input){flex:1 1 var(--sbb-chip-group-input-min-width);max-height:1.5rem}::slotted(sbb-chip){max-width:100%}", S = class extends CustomEvent {
+var x = ":host{width:100%;display:flex;flex-wrap:wrap;gap:var(--sbb-chip-group-gap);align-items:center;margin-block:var(--sbb-chip-group-margin-block);line-height:var(--sbb-typo-line-height-text)}:host(:is(:is(:state(size-s),[state--size-s]),:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: 0}:host(:is(:state(size-s),[state--size-s]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: .375rem .3125rem}@media(min-width:64rem){:host(:is(:state(size-s),[state--size-s]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: .3125rem .1875rem}}:host(:is(:state(without-label),[state--without-label]):is(:state(size-s),[state--size-s]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: 0 .4375rem}@media(min-width:64rem){:host(:is(:state(without-label),[state--without-label]):is(:state(size-s),[state--size-s]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: 0 .3125rem}}:host(:is(:is(:state(size-l),[state--size-l]),:is(:state(size-m),[state--size-m]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default) 0}@media(min-width:64rem){:host(:is(:is(:state(size-l),[state--size-l]),:is(:state(size-m),[state--size-m]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default-large) 0}}:host(:is(:state(without-label),[state--without-label]):is(:state(size-m),[state--size-m]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: .1875rem .6875rem}@media(min-width:64rem){:host(:is(:state(without-label),[state--without-label]):is(:state(size-m),[state--size-m]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: .1875rem .875rem}}:host(:is(:state(without-label),[state--without-label]):not(:is(:state(empty),[state--empty]),:is(:state(size-s),[state--size-s]),:is(:state(size-m),[state--size-m]),:is(:state(size-l),[state--size-l]))){--sbb-chip-group-margin-block: var(--sbb-chip-group-margin-block-no-label-not-empty)}:host(:not(:is(:state(without-label),[state--without-label])):is(:state(size-m),[state--size-m]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default) var(--_sbb-chip-group-margin-block-start-default-large)}@media(min-width:64rem){:host(:not(:is(:state(without-label),[state--without-label])):is(:state(size-m),[state--size-m]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default-large) var(--_sbb-chip-group-margin-block-start-default-large)}}:host(:not(:is(:state(without-label),[state--without-label]),:is(:state(empty),[state--empty]),:is(:state(size-s),[state--size-s]),:is(:state(size-m),[state--size-m]),:is(:state(size-l),[state--size-l]))){--sbb-chip-group-margin-block: var(--sbb-chip-group-margin-block-with-label-not-empty)}:host(:is(:state(without-label),[state--without-label]):is(:state(size-l),[state--size-l]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default) 1rem}@media(min-width:64rem){:host(:is(:state(without-label),[state--without-label]):is(:state(size-l),[state--size-l]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default-large) 1.25rem}}:host(:not(:is(:state(without-label),[state--without-label])):is(:state(size-l),[state--size-l]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default) .46875rem}@media(min-width:64rem){:host(:not(:is(:state(without-label),[state--without-label])):is(:state(size-l),[state--size-l]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default-large) .46875rem}}::slotted(input){flex:1 1 var(--sbb-chip-group-input-min-width);max-height:1.5rem}::slotted(sbb-chip){max-width:100%}", S = class extends CustomEvent {
 	get detail() {
 		return this;
 	}

package/chip.js

@@ -1,4 +1,4 @@
-import { n as e, t } from "./chip-group.component-DJzUToem.js";
+import { n as e, t } from "./chip-group.component-BqBYzfXA.js";
 import { t as n } from "./chip.component-Cu5guQs8.js";
 import "./chip.pure.js";
 n.define(), t.define();

package/chip.pure.js

@@ -1,3 +1,3 @@
-import { n as e, t } from "./chip-group.component-DJzUToem.js";
+import { n as e, t } from "./chip-group.component-BqBYzfXA.js";
 import { t as n } from "./chip.component-Cu5guQs8.js";
 export { n as SbbChipElement, t as SbbChipGroupElement, e as SbbChipInputTokenEndEvent };

package/{compact-paginator.component-Cyi-t_YD.js → compact-paginator.component-BIAPutro.js}

@@ -7,7 +7,7 @@ import "./screen-reader-only.js";
 import { styleMap as o } from "lit/directives/style-map.js";
 import { SbbPaginatorCommonElementMixin as s } from "./paginator/common/paginator-common.js";
 //#region src/elements/paginator/compact-paginator/compact-paginator.scss?inline
-var c = ":host{display:flex;gap:var(--sbb-compact-paginator-gap);justify-content:var(--sbb-paginator-compact-justify-content, start);min-height:var(--sbb-compact-paginator-height)}:host([size=s]){--sbb-compact-paginator-height: var(--sbb-size-element-xs)}:host([size=m]){--sbb-compact-paginator-height: var(--sbb-size-element-m)}:host([negative]){--sbb-compact-paginator-color: var(--sbb-color-5)}:host([pager-position=end]){--sbb-paginator-compact-justify-content: end}.sbb-paginator__pages{font-size:var(--sbb-compact-paginator-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);display:flex;align-items:center;justify-content:center;gap:var(--sbb-compact-paginator-pages-gap);color:var(--sbb-compact-paginator-color)}.sbb-compact-paginator__divider{height:1rem}", l = class extends s(n) {
+var c = ":host{display:flex;gap:var(--sbb-compact-paginator-gap);justify-content:var(--sbb-paginator-compact-justify-content, start);min-height:var(--sbb-compact-paginator-height)}:host([size=s]){--sbb-compact-paginator-height: var(--sbb-size-element-xs)}:host([size=m]){--sbb-compact-paginator-height: var(--sbb-size-element-m)}:host([negative]){--sbb-compact-paginator-color: var(--sbb-color-5)}:host([pager-position=end]){--sbb-paginator-compact-justify-content: end}.sbb-paginator__pages{font-size:var(--sbb-compact-paginator-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);line-height:var(--sbb-typo-line-height-text);display:flex;align-items:center;justify-content:center;gap:var(--sbb-compact-paginator-pages-gap);color:var(--sbb-compact-paginator-color)}.sbb-compact-paginator__divider{height:1rem}", l = class extends s(n) {
 	static {
 		this.elementName = "sbb-compact-paginator";
 	}

package/core/controllers/overlay-position-controller.js

@@ -210,7 +210,10 @@ var a = 0, o = class {
 		this._lastPosition = e, this._overlay.style.left = `${t}px`, this._overlay.style.top = `${n}px`;
 	}
 	_readPositionsFromCss() {
-		this._usePolyfill && (this._overlayStyles ??= getComputedStyle(this._overlay), this._positions = [this._overlayStyles.getPropertyValue("--sbb-overlay-position-area") || "block-end", ...this._overlayStyles.getPropertyValue("--sbb-overlay-position-try-fallbacks").split(",").map((e) => e.trim()).filter((e) => !!e)], this._lastPosition && !this._positions.includes(this._lastPosition) && (this._lastPosition = void 0));
+		if (!this._usePolyfill) return;
+		this._overlayStyles ??= getComputedStyle(this._overlay);
+		let e = [this._overlayStyles.getPropertyValue("--sbb-overlay-position-area") || "block-end", ...this._overlayStyles.getPropertyValue("--sbb-overlay-position-try-fallbacks").split(",").map((e) => e.trim()).filter((e) => !!e)];
+		this._positions = e, this._lastPosition && !this._positions.includes(this._lastPosition) && (this._lastPosition = void 0);
 	}
 };
 //#endregion

package/core/mixins/named-slot-list-mixin.js

@@ -12,7 +12,7 @@ var o = "data-ssr-child-count", s = "li", c = (c) => {
 			constructor() {
 				super(...arguments), this.#e = n(this, u, []), this._handleSlotchange = (n(this, d), () => {
 					let e = Array.from(this.children ?? []).filter((e) => this.listChildLocalNames.includes(e.localName));
-					e.length === this.listChildren.length && this.listChildren.every((t, n) => e[n] === t) || (this.listChildren.filter((t) => !e.includes(t)).forEach((e) => e.removeAttribute("slot")), this.listChildren = e, this.listChildren.forEach((e, t) => e.setAttribute("slot", `${s}-${t}`)), this.removeAttribute(o));
+					e.length === this.listChildren.length && this.listChildren.every((t, n) => e[n] === t) || (this.listChildren.filter((t) => !e.includes(t)).forEach((e) => e.removeAttribute("slot")), this.listChildren = e, this.removeAttribute(o));
 				});
 			}
 			static {
@@ -50,6 +50,9 @@ var o = "data-ssr-child-count", s = "li", c = (c) => {
 			disconnectedCallback() {
 				super.disconnectedCallback(), this.shadowRoot?.removeEventListener("slotchange", this._handleSlotchange);
 			}
+			updated(e) {
+				super.updated(e), e.has("listChildren") && this.listChildren.forEach((e, t) => e.setAttribute("slot", `${s}-${t}`));
+			}
 			renderList(e = {}, t = {}) {
 				let n = this.listSlotEntries(t);
 				return n.length >= 2 ? r`

package/core/styles/core.scss

@@ -98,6 +98,9 @@ $theme: 'standard' !default;
   expansion-panel-header with (
   $theme: $theme
 );
+@use '../../file-selector/common/file-selector.global' as file-selector with (
+  $theme: $theme
+);
 @use '../../flip-card/flip-card/flip-card.global' as flip-card with (
   $theme: $theme
 );
@@ -212,6 +215,9 @@ $theme: 'standard' !default;
 @use '../../signet/signet.global' as signet with (
   $theme: $theme
 );
+@use '../../select/select.global' as select with (
+  $theme: $theme
+);
 @use '../../slider/slider.global' as slider with (
   $theme: $theme
 );
@@ -239,9 +245,44 @@ $theme: 'standard' !default;
 @use '../../teaser/teaser.global' as teaser with (
   $theme: $theme
 );
+@use '../../teaser-hero/teaser-hero.global' as teaser-hero with (
+  $theme: $theme
+);
 @use '../../teaser-product/common/teaser-product-common.global' as teaser-product-common with (
   $theme: $theme
 );
+@use '../../timetable-form/timetable-form/timetable-form.global' as timetable-form with (
+  $theme: $theme
+);
+@use '../../timetable-form/timetable-form-field/timetable-form-field.global' as timetable-form-field
+  with (
+  $theme: $theme
+);
+@use '../../timetable-form/timetable-form-details/timetable-form-details.global' as
+  timetable-form-details with (
+  $theme: $theme
+);
+@use '../../timetable-occupancy/timetable-occupancy.global' as timetable-occupancy with (
+  $theme: $theme
+);
+@use '../../time-input/time-input.global' as time-input with (
+  $theme: $theme
+);
+@use '../../toggle-check/toggle-check.global' as toggle-check with (
+  $theme: $theme
+);
+@use '../../toggle/toggle/toggle.global' as toggle with (
+  $theme: $theme
+);
+@use '../../toggle/toggle-option/toggle-option.global' as toggle-option with (
+  $theme: $theme
+);
+@use '../../tooltip/tooltip.global' as tooltip with (
+  $theme: $theme
+);
+@use '../../toast/toast.global' as toast with (
+  $theme: $theme
+);
 @use '../../visual-checkbox/visual-checkbox.global' as visual-checkbox with (
   $theme: $theme
 );
@@ -279,6 +320,7 @@ $theme: 'standard' !default;
   @include expansion-panel.base;
   @include expansion-panel-content.base;
   @include expansion-panel-header.base;
+  @include file-selector.base;
   @include flip-card.base;
   @include flip-card-details.base;
   @include footer.base;
@@ -313,6 +355,7 @@ $theme: 'standard' !default;
   @include selection-expansion-panel.base;
   @include sidebar.base;
   @include signet.base;
+  @include select.base;
   @include slider.base;
   @include status.base;
   @include step-label.base;
@@ -321,7 +364,18 @@ $theme: 'standard' !default;
   @include tab-label-common.base;
   @include tag.base;
   @include teaser.base;
+  @include teaser-hero.base;
   @include teaser-product-common.base;
+  @include timetable-form.base;
+  @include timetable-form-details.base;
+  @include timetable-form-field.base;
+  @include timetable-occupancy.base;
+  @include time-input.base;
+  @include toggle-check.base;
+  @include toggle.base;
+  @include toggle-option.base;
+  @include tooltip.base;
+  @include toast.base;
   @include visual-checkbox.base;
 
   @include a11y.if-forced-colors {
@@ -341,6 +395,8 @@ $theme: 'standard' !default;
     @include slider.base-forced-colors;
     @include step-label.base-forced-colors;
     @include tag.base-forced-colors;
+    @include toggle-check.base-forced-colors;
+    @include toggle.base-forced-colors;
   }
 
   // Train formation
@@ -348,9 +404,6 @@ $theme: 'standard' !default;
   --sbb-train-formation-wagon-height: #{functions.px-to-rem-build(40)};
   --sbb-train-formation-wagon-gap: var(--sbb-spacing-fixed-1x);
 
-  // Time Input
-  --sbb-time-input-max-width: #{functions.px-to-rem-build(58)};
-
   // Overlay
   --sbb-overlay-default-z-index: 1000;
 
@@ -359,8 +412,7 @@ $theme: 'standard' !default;
   --sbb-cursor-pointer: pointer;
 
   // 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: 100000em;
+  --sbb-border-radius-infinity: calc(infinity * 1px);
 
   // TODO: Remove complete block when new lean theme is complete
   // TODO: Also remove all occurrences of the variables in lyne-components (e.g. --sbb-title-font-size-level-1-lean)
@@ -407,7 +459,6 @@ $theme: 'standard' !default;
     @include sbb-css-tokens.breakpoint-large;
 
     @include button.base-breakpoint-large;
-
     @include chip-group.base-breakpoint-large;
     @include dialog.base-breakpoint-large;
     @include flip-card.base-breakpoint-large;
@@ -415,6 +466,7 @@ $theme: 'standard' !default;
     @include header.base-breakpoint-large;
     @include menu.base-breakpoint-large;
     @include teaser-product-common.base-breakpoint-large;
+    @include time-input.base-breakpoint-large;
 
     // TODO: Remove complete block when new lean theme is complete
     // Only render the block in standard theme as fallback for CSS class usage
@@ -423,9 +475,6 @@ $theme: 'standard' !default;
         --sbb-title-font-size-level-6-lean: var(--sbb-typo-scale-0-875x);
       }
     }
-
-    // Time Input
-    --sbb-time-input-max-width: #{functions.px-to-rem-build(65)};
   }
 
   @include mediaqueries.mq($from: ultra) {
@@ -451,11 +500,15 @@ $theme: 'standard' !default;
 @include lead-container.rules;
 @include message.rules;
 @include option.rules;
+@include select.rules;
 @include sidebar.rules;
 @include sidebar-close-button.rules;
 @include sidebar-container.rules;
 @include tab-nav-bar.rules;
+@include teaser.rules;
+@include teaser-hero.rules;
 @include teaser-product-common.rules;
+@include toggle.rules;
 
 // TODO: discuss where to add these classes
 .sbb-dark {
@@ -523,22 +576,6 @@ html {
   pointer-events: all;
 }
 
-// Helper class for the application name and version in sbb-header.
-.sbb-header-info {
-  @include typo.text-xs--regular;
-
-  display: flex;
-  padding-inline: var(--sbb-spacing-fixed-4x);
-  gap: var(--sbb-spacing-fixed-1x);
-  align-items: baseline;
-  color: var(--sbb-color-1);
-
-  strong + * {
-    font-size: var(--sbb-text-font-size-xxs);
-    color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
-  }
-}
-
 // 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.
 // To prevent the mistakenly large gap, we reset the paragraph space.
@@ -554,7 +591,6 @@ img {
 
 // Target the slotted `sbb-image` which are generally wrapped by a <figure> (therefore are not reachable with the :slotted)
 // Apply the brightness effect on mouse hover
-// TODO: Move back to the teaser components when the global CSS refactoring happens
 :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(
@@ -577,34 +613,6 @@ img {
   }
 }
 
-sbb-teaser :is(sbb-image, img):not(.sbb-figure-overlap-image) {
-  --sbb-image-object-fit: cover;
-  --sbb-image-aspect-ratio: 4 / 3;
-
-  transition-property: filter, scale;
-  will-change: filter, scale;
-  scale: var(--sbb-teaser-scale, 1);
-}
-
-// TODO: Move back to the teaser-hero components when the global CSS refactoring happens
-sbb-teaser-hero {
-  :is(sbb-image, img):not(.sbb-figure-overlap-image) {
-    --sbb-image-aspect-ratio: 1 / 1;
-
-    border-radius: 0;
-
-    @include mediaqueries.mq($from: small) {
-      --sbb-image-aspect-ratio: 16 / 9;
-    }
-  }
-
-  img:not(.sbb-figure-overlap-image) {
-    display: block;
-    align-self: stretch;
-    width: 100%;
-  }
-}
-
 // TODO: move to train formation after CSS refactoring
 sbb-train-formation:has(sbb-train[direction-label]) {
   --sbb-train-formation-reserve-spacing-display: block;
@@ -638,31 +646,8 @@ 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");
 }
 
-// We set some dimension to the selects trigger element in order that the screen reader's outline box looks more accurate.
-.sbb-select-trigger {
-  width: 100%;
-
-  // We set the smallest possible height (zero breakpoint, size s)
-  height: var(--sbb-size-element-xs);
-
-  sbb-form-field & {
-    top: 0;
-  }
-}
-
-sbb-toggle:has(:focus-visible) {
-  @include a11y.focus-outline;
-}
-
 .sbb-overlay-outlet {
   position: fixed;
   inset: 0;
   pointer-events: none;
 }
-
-// Sets ellipsis on all sbb-option child elements
-.sbb-options-nowrap {
-  --sbb-option-text-overflow: ellipsis;
-  --sbb-option-overflow: hidden;
-  --sbb-option-white-space: nowrap;
-}

package/core/styles/mixins/helpers.scss

@@ -8,19 +8,19 @@
   position: absolute;
   top: 50%;
   left: 50%;
-  transform: translate(-50%, -50%);
+  translate: -50% -50%;
 }
 
 @mixin absolute-center-x {
   position: absolute;
   left: 50%;
-  transform: translateX(-50%);
+  translate: -50% 0;
 }
 
 @mixin absolute-center-y {
   position: absolute;
   top: 50%;
-  transform: translateY(-50%);
+  translate: 0 -50%;
 }
 
 // This mixin can be used to avoid spacing problems by inserting an invisible space as pseudo element.

package/core/styles/mixins/overlay.scss

@@ -4,7 +4,7 @@
 @mixin options-panel-overlay-variables--global($theme: 'standard') {
   --sbb-options-panel-border-radius: var(--sbb-border-radius-4x);
   --sbb-options-panel-animation-timing-function: ease;
-  --sbb-options-panel-background-color: var(--sbb-background-color-1);
+  --sbb-options-panel-background-color: var(--sbb-background-color-2);
   --sbb-options-panel-divider-margin-block: var(--sbb-spacing-fixed-3x);
   --sbb-options-panel-padding-block: #{functions.theme-pattern-select(
       (
@@ -48,7 +48,7 @@
 @mixin options-panel-overlay-negative-variables {
   @include scrollbar.scrollbar-variables--color-negative;
 
-  --sbb-options-panel-background-color: var(--sbb-background-color-1-negative);
+  --sbb-options-panel-background-color: var(--sbb-background-color-2-negative);
 
   // As the overlays have always a white background, we have to fix the focus outline color
   // to default color for cases where the overlays are used in a negative context.

package/core/styles/mixins/typo.scss

@@ -7,9 +7,9 @@
   margin-inline: 0;
   font-family: var(--sbb-typo-font-family);
   font-weight: bold;
-  line-height: var(--sbb-title-line-height, var(--sbb-typo-line-height-heading));
-  letter-spacing: var(--sbb-typo-letter-spacing-heading);
   font-size: var(--sbb-title-font-size);
+  letter-spacing: var(--sbb-typo-letter-spacing-heading);
+  line-height: var(--sbb-title-line-height, var(--sbb-typo-line-height-heading));
 }
 
 @mixin title--level-1 {

package/core/styles/node_modules_@sbb-esta_lyne-design-tokens_dist_scss_sbb-variables-as-css.scss

@@ -802,6 +802,10 @@ $theme: 'standard' !default;
   --sbb-color-4-negative: var(--sbb-color-cloud);
   --sbb-color-4-negative-inverted: var(--sbb-color-iron);
   --sbb-color-5: var(--sbb-color-smoke);
+  --sbb-color-6: light-dark(var(--sbb-color-anthracite), var(--sbb-color-platinum));
+  --sbb-color-6-inverted: light-dark(var(--sbb-color-platinum), var(--sbb-color-anthracite));
+  --sbb-color-6-negative: var(--sbb-color-platinum);
+  --sbb-color-6-negative-inverted: var(--sbb-color-anthracite);
 
   --sbb-border-color-1: light-dark(var(--sbb-color-midnight), var(--sbb-color-white));
   --sbb-border-color-1-inverted: light-dark(var(--sbb-color-white), var(--sbb-color-midnight));
@@ -820,6 +824,10 @@ $theme: 'standard' !default;
   --sbb-border-color-4-negative: var(--sbb-color-cloud);
   --sbb-border-color-4-negative-inverted: var(--sbb-color-iron);
   --sbb-border-color-5: var(--sbb-color-smoke);
+  --sbb-border-color-6: light-dark(var(--sbb-color-anthracite), var(--sbb-color-platinum));
+  --sbb-border-color-6-inverted: light-dark(var(--sbb-color-platinum), var(--sbb-color-anthracite));
+  --sbb-border-color-6-negative: var(--sbb-color-platinum);
+  --sbb-border-color-6-negative-inverted: var(--sbb-color-anthracite);
 
   --sbb-shadow-color-soft-1: light-dark(
     color-mix(in srgb, var(--sbb-color-smoke) 5%, transparent),