@sbb-esta/lyne-elements-dev 4.9.0-dev.1774601733 → 4.9.0-dev.1774848187

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@sbb-esta/lyne-elements-dev",
-  "version": "4.9.0-dev.1774601733",
+  "version": "4.9.0-dev.1774848187",
   "description": "Lyne Design System",
   "keywords": [
     "design system",
     "web components",
     "lit",
-    "https://github.com/sbb-design-systems/lyne-components/commit/239ed6c2825125a6409ee9b32d000915f7f22492"
+    "https://github.com/sbb-design-systems/lyne-components/commit/a3622d5b1427b706f42aa6bf91396ae188c26817"
   ],
   "type": "module",
   "exports": {

package/safety-theme.css

@@ -1752,6 +1752,12 @@ slot[name=error]::slotted(*) {
     --sbb-selection-panel-input-padding-block-m
   );
   --sbb-selection-expansion-panel-content-padding-inline: var(--sbb-selection-panel-input-padding-inline-m);
+  --sbb-sidebar-background-color: var(--sbb-background-color-1);
+  --sbb-sidebar-title-padding-block: var(--sbb-spacing-fixed-3x);
+  --sbb-sidebar-padding: var(--sbb-spacing-responsive-xs);
+  --sbb-sidebar-border-radius: var(--sbb-border-radius-8x);
+  --sbb-sidebar-margin: var(--sbb-spacing-fixed-3x);
+  --sbb-sidebar-title-gap: var(--sbb-spacing-fixed-2x);
   --sbb-signet-background-color: var(--sbb-color-brand);
   --sbb-signet-panel-color: var(--sbb-color-brand);
   --sbb-signet-icon-color: var(--sbb-color-white);
@@ -2272,6 +2278,37 @@ sbb-message > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
   --sbb-option-hint-padding-block-end: var(--sbb-spacing-fixed-1x);
 }
 
+sbb-sidebar:has(sbb-sidebar-title) {
+  --_sbb-sidebar-padding-block-start: 0;
+}
+
+sbb-sidebar:not(:has(sbb-sidebar-title)) sbb-sidebar-close-button {
+  position: absolute;
+}
+
+sbb-sidebar-container:has(> sbb-sidebar:is(:state(skip-animation),[state--skip-animation])) {
+  --sbb-sidebar-container-animation-duration: 0s;
+}
+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;
+}
+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],
+: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:is(:has(> sbb-sidebar:not([position=end]):is(:is(:state(state-closing),[state--state-closing]),
+:is(:state(state-closed),[state--state-closed]),
+[mode=over],
+: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-tab-nav-bar .sbb-tab-amount {
   margin: 0;
   color: var(--sbb-tab-label-amount-color);
@@ -2455,40 +2492,6 @@ 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:is(:state(skip-animation),[state--skip-animation])) {
-  --sbb-sidebar-container-animation-duration: 0s;
-}
-
-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],
-: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(:is(:state(state-closing),[state--state-closing]),
-:is(:state(state-closed),[state--state-closed]),
-[mode=over],
-: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], :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;
-}
-
-sbb-sidebar:not(:has(sbb-sidebar-title)) sbb-sidebar-close-button {
-  position: absolute;
-}
-
-sbb-sidebar:has(sbb-sidebar-title) {
-  --sbb-sidebar__padding-block-start: 0;
-}
-
 .sbb-select-trigger {
   width: 100%;
   height: var(--sbb-size-element-xs);

package/sidebar/sidebar/sidebar.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../sidebar.component-Cde1EWDT.js";
+import { t as e } from "../../sidebar.component-BkTSnoNM.js";
 export { e as SbbSidebarElement };

package/sidebar/sidebar-content/sidebar-content.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../sidebar-content.component-da7RYWO6.js";
+import { t as e } from "../../sidebar-content.component-BYmmHoc5.js";
 export { e as SbbSidebarContentElement };

package/sidebar/sidebar-content.js

@@ -1,4 +1,4 @@
-import { t as e } from "../sidebar-content.component-da7RYWO6.js";
+import { t as e } from "../sidebar-content.component-BYmmHoc5.js";
 e.define(), console.warn("The entrypoint '@sbb-esta/elements/sidebar/sidebar-content.js' has been deprecated.\nUse either '@sbb-esta/elements/sidebar.js' or '@sbb-esta/elements/sidebar.pure.js' instead.");
 //#endregion
 export { e as SbbSidebarContentElement };

package/sidebar/sidebar-title/sidebar-title.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../sidebar-title.component-CjWUiisH.js";
+import { t as e } from "../../sidebar-title.component-lEdsEEMO.js";
 export { e as SbbSidebarTitleElement };

package/sidebar/sidebar-title.js

@@ -1,4 +1,4 @@
-import { t as e } from "../sidebar-title.component-CjWUiisH.js";
+import { t as e } from "../sidebar-title.component-lEdsEEMO.js";
 e.define(), console.warn("The entrypoint '@sbb-esta/elements/sidebar/sidebar-title.js' has been deprecated.\nUse either '@sbb-esta/elements/sidebar.js' or '@sbb-esta/elements/sidebar.pure.js' instead.");
 //#endregion
 export { e as SbbSidebarTitleElement };

package/sidebar/sidebar.js

@@ -1,4 +1,4 @@
-import { t as e } from "../sidebar.component-Cde1EWDT.js";
+import { t as e } from "../sidebar.component-BkTSnoNM.js";
 e.define(), console.warn("The entrypoint '@sbb-esta/elements/sidebar/sidebar.js' has been deprecated.\nUse either '@sbb-esta/elements/sidebar.js' or '@sbb-esta/elements/sidebar.pure.js' instead.");
 //#endregion
 export { e as SbbSidebarElement };

package/{sidebar-content.component-da7RYWO6.js → sidebar-content.component-BYmmHoc5.js}

@@ -2,7 +2,7 @@ import { css as e, html as t } from "lit";
 import { SbbElement as n } from "./core/base-elements.js";
 import { sidebarContentCommonStyle as r } from "./sidebar/common/styles.js";
 //#region src/elements/sidebar/sidebar-content/sidebar-content.scss?lit&inline
-var i = e`:host{--sbb-sidebar-content__margin-inline-start: initial;--sbb-sidebar-content__margin-inline-end: initial;margin-inline:var(--sbb-sidebar-content__margin-inline-start, var(--sbb-sidebar-container__start-width, 0)) var(--sbb-sidebar-content__margin-inline-end, var(--sbb-sidebar-container__end-width, 0));transition:margin var(--sbb-sidebar-container-animation-duration) var(--sbb-sidebar-container-animation-easing)}`, a = class extends n {
+var i = e`:host{--_sbb-sidebar-content-margin-inline-start: initial;--_sbb-sidebar-content-margin-inline-end: initial;margin-inline:var(--_sbb-sidebar-content-margin-inline-start, var(--_sbb-sidebar-container-start-width, 0)) var(--_sbb-sidebar-content-margin-inline-end, var(--_sbb-sidebar-container-end-width, 0));transition:margin var(--sbb-sidebar-container-animation-duration) var(--sbb-sidebar-container-animation-easing)}`, a = class extends n {
 	static {
 		this.elementName = "sbb-sidebar-content";
 	}

package/{sidebar-title.component-CjWUiisH.js → sidebar-title.component-lEdsEEMO.js}

@@ -3,7 +3,7 @@ import { css as n } from "lit";
 import { property as r } from "lit/decorators.js";
 import { SbbTitleBase as i } from "./title.js";
 //#region src/elements/sidebar/sidebar-title/sidebar-title.scss?lit&inline
-var a = n`:host{-webkit-hyphens:auto;hyphens:auto;padding-block-start:calc(.5 * (var(--sbb-sidebar__close-button-size) - 1em * var(--sbb-typo-line-height-heading)));min-height:var(--sbb-sidebar__close-button-size)}`, o = (() => {
+var a = n`:host{-webkit-hyphens:auto;hyphens:auto;padding-block-start:calc(.5 * (var(--_sbb-sidebar-close-button-size) - 1em * var(--sbb-typo-line-height-heading)));min-height:var(--_sbb-sidebar-close-button-size)}`, o = (() => {
 	let n = i, o, s = [], c = [];
 	return class extends n {
 		static {

package/{sidebar.component-Cde1EWDT.js → sidebar.component-BkTSnoNM.js}

@@ -10,7 +10,7 @@ import { SbbEscapableOverlayController as p } from "./core/controllers.js";
 import { ResizeController as m } from "@lit-labs/observers/resize-controller.js";
 import { SbbFocusTrapController as h } from "./core/a11y.js";
 //#region src/elements/sidebar/sidebar/sidebar.scss?lit&inline
-var g = n`:host{display:block;width:20rem;--sbb-link-text-decoration-line: none;--sbb-sidebar-background-color: var(--sbb-background-color-1);--sbb-sidebar-title-padding-block: var(--sbb-spacing-fixed-3x);--sbb-sidebar-padding: var(--sbb-spacing-responsive-xs);--sbb-sidebar-scrollbar-placeholder-width: var(--sbb-spacing-fixed-3x);--sbb-sidebar-border-radius: var(--sbb-border-radius-8x);--sbb-sidebar-margin: var(--sbb-spacing-fixed-3x);--sbb-sidebar-title-gap: var(--sbb-spacing-fixed-2x);--sbb-sidebar__margin: 0;--sbb-sidebar__margin-block-start: var(--sbb-sidebar-margin);--sbb-sidebar__translate-x: -100%;--sbb-sidebar__z-index: 2;--sbb-sidebar__padding-inline-end: var(--sbb-sidebar-padding);--sbb-sidebar__padding-block-start: var(--sbb-sidebar-padding);--sbb-sidebar__border-radius-start: var(--sbb-sidebar-border-radius);--sbb-sidebar__border-radius-end: 0;--sbb-sidebar__close-button-size: var(--sbb-size-element-xs)}@supports (scrollbar-gutter: stable) and (not (-webkit-touch-callout: none)){:host{--sbb-sidebar__padding-inline-end: calc( var(--sbb-sidebar-padding) - var(--sbb-sidebar-scrollbar-placeholder-width) )}}:host([color=milk]){--sbb-sidebar-background-color: var(--sbb-background-color-3)}:host(:is([mode=over],:is(:state(mode-over-forced),[state--mode-over-forced]):not(:is(:state(mode-over-forced-closing),[state--mode-over-forced-closing])))){--sbb-sidebar__margin: var(--sbb-sidebar-margin);--sbb-sidebar__border-radius-end: var(--sbb-sidebar-border-radius);--sbb-sidebar__z-index: 3}:host(:is(:dir(rtl),[position=end])){--sbb-sidebar__translate-x: 100%}:host(:dir(rtl)[position=end]){--sbb-sidebar__translate-x: -100%}.sbb-sidebar{width:inherit;max-width:calc(100% - 2 * var(--sbb-sidebar__margin));background-color:var(--sbb-sidebar-background-color);display:flex;flex-direction:column;position:absolute;overflow:hidden;inset-block:0;z-index:var(--sbb-sidebar__z-index);border-start-start-radius:var(--sbb-sidebar__border-radius-start);border-start-end-radius:var(--sbb-sidebar__border-radius-start);border-end-start-radius:var(--sbb-sidebar__border-radius-end);border-end-end-radius:var(--sbb-sidebar__border-radius-end);margin:var(--sbb-sidebar__margin);margin-block-start:var(--sbb-sidebar__margin-block-start);transition-duration:var(--sbb-sidebar-container-animation-duration);transition-timing-function:var(--sbb-sidebar-container-animation-easing);transition-property:width,translate;translate:none}:host([position=end]) .sbb-sidebar{inset-inline-end:0}:host(:is(:state(state-closed),[state--state-closed])) .sbb-sidebar{visibility:hidden}:host(:is(:is(:state(state-closing),[state--state-closing]),:is(:state(state-closed),[state--state-closed]))) .sbb-sidebar{translate:var(--sbb-sidebar__translate-x) 0}.sbb-sidebar-title-section{display:flex;width:100%;gap:var(--sbb-sidebar-title-gap);background-color:var(--sbb-sidebar-background-color);padding-inline:var(--sbb-sidebar-padding);transition:box-shadow var(--sbb-animation-easing) var(--sbb-sidebar-container-animation-duration);box-shadow:none}:host(:is(:state(scrolled),[state--scrolled])) .sbb-sidebar-title-section{box-shadow:var(--sbb-box-shadow-level-5-soft)}.sbb-sidebar-content-section{--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);--sbb-scrollbar-color: light-dark( color-mix(in srgb, var(--sbb-color-black) 30%, transparent), color-mix(in srgb, var(--sbb-color-white) 30%, transparent) );--sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-black) 60%, transparent);--sbb-scrollbar-color-hover: light-dark( color-mix(in srgb, var(--sbb-color-black) 60%, transparent), color-mix(in srgb, var(--sbb-color-white) 60%, transparent) );--sbb-scrollbar-track-color: transparent;--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-sidebar-content-section::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-sidebar-content-section::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-sidebar-content-section::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}.sbb-sidebar-content-section::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}.sbb-sidebar-content-section::-webkit-scrollbar-button,.sbb-sidebar-content-section::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-sidebar-content-section{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-sidebar-content-section{padding-block-start:var(--sbb-sidebar__padding-block-start);padding-inline:var(--sbb-sidebar-padding) var(--sbb-sidebar__padding-inline-end);overflow-y:auto;flex-grow:1;outline-color:var(--sbb-focus-outline-color)}@supports (scrollbar-gutter: stable){.sbb-sidebar-content-section{scrollbar-gutter:stable}}::slotted(sbb-sidebar-title){flex-grow:1;margin-block:var(--sbb-sidebar-title-padding-block)}::slotted(sbb-sidebar-close-button){order:1;margin-inline-end:calc(-1 * (var(--sbb-sidebar-padding) - var(--sbb-sidebar-title-padding-block)));margin-block:var(--sbb-sidebar-title-padding-block);inset-inline-end:var(--sbb-sidebar-padding)}`, _ = (() => {
+var g = n`:host{--sbb-link-text-decoration-line: none;--sbb-sidebar-background-color: var(--sbb-background-color-1);--sbb-sidebar-scrollbar-placeholder-width: var(--sbb-spacing-fixed-3x);--_sbb-sidebar-margin: 0;--_sbb-sidebar-margin-block-start: var(--sbb-sidebar-margin);--_sbb-sidebar-translate-x: -100%;--_sbb-sidebar-z-index: 2;--_sbb-sidebar-padding-inline-end: var(--sbb-sidebar-padding);--_sbb-sidebar-padding-block-start: var(--sbb-sidebar-padding);--_sbb-sidebar-border-radius-start: var(--sbb-sidebar-border-radius);--_sbb-sidebar-border-radius-end: 0;--_sbb-sidebar-close-button-size: var(--sbb-size-element-xs);--_sbb-sidebar-max-width: calc(100% - 2 * var(--_sbb-sidebar-margin));display:block;width:20rem}@supports (scrollbar-gutter: stable) and (not (-webkit-touch-callout: none)){:host{--_sbb-sidebar-padding-inline-end: calc( var(--sbb-sidebar-padding) - var(--sbb-sidebar-scrollbar-placeholder-width) )}}:host([color=white]){--sbb-sidebar-background-color: var(--sbb-background-color-1)}:host([color=milk]){--sbb-sidebar-background-color: var(--sbb-background-color-3)}:host(:is([mode=over],:is(:state(mode-over-forced),[state--mode-over-forced]):not(:is(:state(mode-over-forced-closing),[state--mode-over-forced-closing])))){--_sbb-sidebar-margin: var(--sbb-sidebar-margin);--_sbb-sidebar-border-radius-end: var(--sbb-sidebar-border-radius);--_sbb-sidebar-z-index: 3}:host(:is(:dir(rtl),[position=end])){--_sbb-sidebar-translate-x: 100%}:host(:dir(rtl)[position=end]){--_sbb-sidebar-translate-x: -100%}.sbb-sidebar{width:inherit;max-width:var(--_sbb-sidebar-max-width);background-color:var(--sbb-sidebar-background-color);display:flex;flex-direction:column;position:absolute;overflow:hidden;inset-block:0;z-index:var(--_sbb-sidebar-z-index);border-start-start-radius:var(--_sbb-sidebar-border-radius-start);border-start-end-radius:var(--_sbb-sidebar-border-radius-start);border-end-start-radius:var(--_sbb-sidebar-border-radius-end);border-end-end-radius:var(--_sbb-sidebar-border-radius-end);margin:var(--_sbb-sidebar-margin);margin-block-start:var(--_sbb-sidebar-margin-block-start);transition-duration:var(--sbb-sidebar-container-animation-duration);transition-timing-function:var(--sbb-sidebar-container-animation-easing);transition-property:width,translate;translate:none}:host([position=end]) .sbb-sidebar{inset-inline-end:0}:host(:is(:state(state-closed),[state--state-closed])) .sbb-sidebar{visibility:hidden}:host(:is(:is(:state(state-closing),[state--state-closing]),:is(:state(state-closed),[state--state-closed]))) .sbb-sidebar{translate:var(--_sbb-sidebar-translate-x) 0}.sbb-sidebar-title-section{display:flex;width:100%;gap:var(--sbb-sidebar-title-gap);background-color:var(--sbb-sidebar-background-color);padding-inline:var(--sbb-sidebar-padding);transition:box-shadow var(--sbb-animation-easing) var(--sbb-sidebar-container-animation-duration);box-shadow:none}:host(:is(:state(scrolled),[state--scrolled])) .sbb-sidebar-title-section{box-shadow:var(--sbb-box-shadow-level-5-soft)}.sbb-sidebar-content-section{--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);--sbb-scrollbar-color: light-dark( color-mix(in srgb, var(--sbb-color-black) 30%, transparent), color-mix(in srgb, var(--sbb-color-white) 30%, transparent) );--sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-black) 60%, transparent);--sbb-scrollbar-color-hover: light-dark( color-mix(in srgb, var(--sbb-color-black) 60%, transparent), color-mix(in srgb, var(--sbb-color-white) 60%, transparent) );--sbb-scrollbar-track-color: transparent;--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-sidebar-content-section::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-sidebar-content-section::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-sidebar-content-section::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}.sbb-sidebar-content-section::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}.sbb-sidebar-content-section::-webkit-scrollbar-button,.sbb-sidebar-content-section::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-sidebar-content-section{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-sidebar-content-section{padding-block-start:var(--_sbb-sidebar-padding-block-start);padding-inline:var(--sbb-sidebar-padding) var(--_sbb-sidebar-padding-inline-end);overflow-y:auto;flex-grow:1;outline-color:var(--sbb-focus-outline-color)}@supports (scrollbar-gutter: stable){.sbb-sidebar-content-section{scrollbar-gutter:stable}}::slotted(sbb-sidebar-title){flex-grow:1;margin-block:var(--sbb-sidebar-title-padding-block)}::slotted(sbb-sidebar-close-button){order:1;margin-inline-end:calc(-1 * (var(--sbb-sidebar-padding) - var(--sbb-sidebar-title-padding-block)));margin-block:var(--sbb-sidebar-title-padding-block);inset-inline-end:var(--sbb-sidebar-padding)}`, _ = (() => {
 	let n = d(s), _ = [], v, y = [], b = [], x, S = [], C = [], w, T = [], E = [], D, O = [], k = [], A, j = [], M = [], N;
 	return class extends n {
 		static {
@@ -213,7 +213,7 @@ var g = n`:host{display:block;width:20rem;--sbb-link-text-decoration-line: none;
 			t.style.getPropertyValue(this._buildCssWidthVar()) !== r && t.style.setProperty(this._buildCssWidthVar(), r);
 		}
 		_buildCssWidthVar(e = this.position) {
-			return `--sbb-sidebar-container__${e}-width`;
+			return `--_sbb-sidebar-container-${e}-width`;
 		}
 		_isModeOver() {
 			return this.mode === "over" || this.matches(":is(:state(mode-over-forced),[state--mode-over-forced])");

package/sidebar.js

@@ -1,8 +1,8 @@
 import { t as e } from "./sidebar-close-button.component-BZFxWg_j.js";
 import { t } from "./sidebar-container.component-C8cxaqZU.js";
-import { t as n } from "./sidebar-content.component-da7RYWO6.js";
-import { t as r } from "./sidebar-title.component-CjWUiisH.js";
-import { t as i } from "./sidebar.component-Cde1EWDT.js";
+import { t as n } from "./sidebar-content.component-BYmmHoc5.js";
+import { t as r } from "./sidebar-title.component-lEdsEEMO.js";
+import { t as i } from "./sidebar.component-BkTSnoNM.js";
 import "./sidebar.pure.js";
 i.define(), e.define(), t.define(), n.define(), r.define();
 //#endregion

package/sidebar.pure.js

@@ -1,6 +1,6 @@
 import { t as e } from "./sidebar-close-button.component-BZFxWg_j.js";
 import { t } from "./sidebar-container.component-C8cxaqZU.js";
-import { t as n } from "./sidebar-content.component-da7RYWO6.js";
-import { t as r } from "./sidebar-title.component-CjWUiisH.js";
-import { t as i } from "./sidebar.component-Cde1EWDT.js";
+import { t as n } from "./sidebar-content.component-BYmmHoc5.js";
+import { t as r } from "./sidebar-title.component-lEdsEEMO.js";
+import { t as i } from "./sidebar.component-BkTSnoNM.js";
 export { e as SbbSidebarCloseButtonElement, t as SbbSidebarContainerElement, n as SbbSidebarContentElement, i as SbbSidebarElement, r as SbbSidebarTitleElement };

package/standard-theme.css

@@ -1752,6 +1752,12 @@ slot[name=error]::slotted(*) {
     --sbb-selection-panel-input-padding-block-m
   );
   --sbb-selection-expansion-panel-content-padding-inline: var(--sbb-selection-panel-input-padding-inline-m);
+  --sbb-sidebar-background-color: var(--sbb-background-color-1);
+  --sbb-sidebar-title-padding-block: var(--sbb-spacing-fixed-3x);
+  --sbb-sidebar-padding: var(--sbb-spacing-responsive-xs);
+  --sbb-sidebar-border-radius: var(--sbb-border-radius-8x);
+  --sbb-sidebar-margin: var(--sbb-spacing-fixed-3x);
+  --sbb-sidebar-title-gap: var(--sbb-spacing-fixed-2x);
   --sbb-signet-background-color: var(--sbb-color-brand);
   --sbb-signet-panel-color: var(--sbb-color-brand);
   --sbb-signet-icon-color: var(--sbb-color-white);
@@ -2272,6 +2278,37 @@ sbb-message > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
   --sbb-option-hint-padding-block-end: var(--sbb-spacing-fixed-1x);
 }
 
+sbb-sidebar:has(sbb-sidebar-title) {
+  --_sbb-sidebar-padding-block-start: 0;
+}
+
+sbb-sidebar:not(:has(sbb-sidebar-title)) sbb-sidebar-close-button {
+  position: absolute;
+}
+
+sbb-sidebar-container:has(> sbb-sidebar:is(:state(skip-animation),[state--skip-animation])) {
+  --sbb-sidebar-container-animation-duration: 0s;
+}
+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;
+}
+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],
+: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:is(:has(> sbb-sidebar:not([position=end]):is(:is(:state(state-closing),[state--state-closing]),
+:is(:state(state-closed),[state--state-closed]),
+[mode=over],
+: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-tab-nav-bar .sbb-tab-amount {
   margin: 0;
   color: var(--sbb-tab-label-amount-color);
@@ -2455,40 +2492,6 @@ 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:is(:state(skip-animation),[state--skip-animation])) {
-  --sbb-sidebar-container-animation-duration: 0s;
-}
-
-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],
-: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(:is(:state(state-closing),[state--state-closing]),
-:is(:state(state-closed),[state--state-closed]),
-[mode=over],
-: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], :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;
-}
-
-sbb-sidebar:not(:has(sbb-sidebar-title)) sbb-sidebar-close-button {
-  position: absolute;
-}
-
-sbb-sidebar:has(sbb-sidebar-title) {
-  --sbb-sidebar__padding-block-start: 0;
-}
-
 .sbb-select-trigger {
   width: 100%;
   height: var(--sbb-size-element-xs);