@sbb-esta/lyne-elements-dev 5.8.0-dev.1789370784 → 5.8.0-dev.1789399474

package/development/core/dom/scroll.d.ts

@@ -2,12 +2,25 @@ export declare function pageScrollDisabled(): boolean;
 /**
  * Handle the page scroll, allowing to disable/enable the window scroll avoiding a potential
  * content shift caused by the disappearance/appearance of the scrollbar.
+ *
+ * The body is fixed in place (instead of just using `overflow: hidden`), which reliably prevents
+ * scrolling of the underlying page. The current scroll position is stored before
+ * fixing the body and restored again once the scroll is re-enabled, so the page doesn't jump
+ * and content that was previously scrolled out of view isn't hidden behind the fixed body.
+ *
+ * As an additional safety net for edge cases, `touchmove` events are intercepted and prevented,
+ * unless they originate from within a scrollable element that is not at its scroll boundary
+ * (e.g. an internal scrollable content of a dialog, navigation, sidebar, etc.).
  */
 export declare class SbbScrollHandler {
-    private _height;
+    private _scrollPosition;
     private _position;
+    private _top;
+    private _insetInline;
     private _overflow;
-    private _marginInlineEnd;
+    private _touchStartY;
+    private _touchStart;
+    private _touchMove;
     disableScroll(): void;
     enableScroll(): void;
 }

package/development/core.js

@@ -4588,32 +4588,86 @@ function pageScrollDisabled() {
 	return document.body.hasAttribute("data-sbb-scroll-disabled");
 }
 /**
+* Checks whether the given element can be scrolled vertically
+* (i.e. it has an overflow of `auto`/`scroll` and its content overflows its box).
+*/
+function isVerticallyScrollable(element) {
+	const overflowY = getComputedStyle(element).overflowY;
+	return (overflowY === "auto" || overflowY === "scroll") && element.scrollHeight > element.clientHeight;
+}
+/**
+* Walks the event's composed path (to properly support shadow DOM) and returns the
+* closest scrollable ancestor, if any, stopping at `document.body`/`document.documentElement`.
+*/
+function findScrollableAncestor(path) {
+	for (const target of path) {
+		if (target === document.body || target === document.documentElement) break;
+		if (target instanceof Element && isVerticallyScrollable(target)) return target;
+	}
+	return null;
+}
+/**
 * Handle the page scroll, allowing to disable/enable the window scroll avoiding a potential
 * content shift caused by the disappearance/appearance of the scrollbar.
+*
+* The body is fixed in place (instead of just using `overflow: hidden`), which reliably prevents
+* scrolling of the underlying page. The current scroll position is stored before
+* fixing the body and restored again once the scroll is re-enabled, so the page doesn't jump
+* and content that was previously scrolled out of view isn't hidden behind the fixed body.
+*
+* As an additional safety net for edge cases, `touchmove` events are intercepted and prevented,
+* unless they originate from within a scrollable element that is not at its scroll boundary
+* (e.g. an internal scrollable content of a dialog, navigation, sidebar, etc.).
 */
 var SbbScrollHandler = class {
+	constructor() {
+		this._scrollPosition = 0;
+		this._touchStartY = 0;
+		this._touchStart = (event) => {
+			this._touchStartY = event.touches[0]?.clientY ?? 0;
+		};
+		this._touchMove = (event) => {
+			const touch = event.touches[0];
+			if (!touch) return;
+			const scrollable = findScrollableAncestor(event.composedPath());
+			if (!scrollable) {
+				event.preventDefault();
+				return;
+			}
+			const deltaY = touch.clientY - this._touchStartY;
+			const atTop = scrollable.scrollTop <= 0;
+			const atBottom = scrollable.scrollTop + scrollable.clientHeight >= scrollable.scrollHeight;
+			if (atTop && deltaY > 0 || atBottom && deltaY < 0) event.preventDefault();
+		};
+	}
 	disableScroll() {
 		if (pageScrollDisabled()) return;
-		this._height = document.body.style.height;
+		this._scrollPosition = window.scrollY || document.documentElement.scrollTop;
 		this._position = document.body.style.position;
+		this._top = document.body.style.top;
+		this._insetInline = document.body.style.insetInline;
 		this._overflow = document.body.style.overflow;
-		this._marginInlineEnd = document.body.style.marginInlineEnd;
 		const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+		document.body.style.position = "fixed";
+		document.body.style.top = `-${this._scrollPosition}px`;
+		document.body.style.insetInline = `0 ${scrollbarWidth}px`;
 		document.body.style.overflow = "hidden";
-		document.body.style.height = "100dvh";
-		document.body.style.position = "relative";
-		document.body.style.marginInlineEnd = `${scrollbarWidth}px`;
-		document.body.style.setProperty("--sbb-scrollbar-width", `${scrollbarWidth}px`);
+		document.body.style.setProperty("--sbb-scrollbar-reserved-space", `${scrollbarWidth}px`);
+		document.addEventListener("touchstart", this._touchStart, { passive: true });
+		document.addEventListener("touchmove", this._touchMove, { passive: false });
 		document.body.toggleAttribute("data-sbb-scroll-disabled", true);
 	}
 	enableScroll() {
 		if (!pageScrollDisabled()) return;
-		document.body.style.height = this._height || "";
 		document.body.style.position = this._position || "";
+		document.body.style.top = this._top || "";
+		document.body.style.insetInline = this._insetInline || "";
 		document.body.style.overflow = this._overflow || "";
-		document.body.style.marginInlineEnd = this._marginInlineEnd || "";
-		document.body.style.setProperty("--sbb-scrollbar-width", "0");
+		document.body.style.removeProperty("--sbb-scrollbar-reserved-space");
+		document.removeEventListener("touchstart", this._touchStart);
+		document.removeEventListener("touchmove", this._touchMove);
 		document.body.removeAttribute("data-sbb-scroll-disabled");
+		window.scrollTo(0, this._scrollPosition);
 	}
 };
 

package/development/dialog.pure.js

@@ -11,7 +11,7 @@ import { html as html$1 } from "lit/static-html.js";
 import { SbbOverlayBaseElement, SbbOverlayCloseEvent, SbbOverlayCloseEvent as SbbDialogCloseEvent, assignOverlayResult as assignDialogResult, overlayRefs } from "./overlay.pure.js";
 
 //#region src/elements/dialog/dialog-actions/dialog-actions.scss?inline
-var dialog_actions_default = ":host {\n  grid-area: actions;\n  padding-inline: var(--sbb-dialog-padding-inline);\n  padding-block: var(--sbb-dialog-padding-block);\n  margin-block-start: auto;\n  background-color: var(--sbb-dialog-background-color);\n  transition: box-shadow var(--sbb-animation-easing) var(--sbb-dialog-shadow-animation-duration);\n  box-shadow: var(--sbb-dialog-block-end-box-shadow, none);\n  position: relative;\n}\n:host::before {\n  content: \"\";\n  display: block;\n  position: absolute;\n  align-self: start;\n  border-block-start: var(--sbb-border-width-1x) solid var(--sbb-dialog-actions-border-color);\n  transition: border-color var(--sbb-animation-easing) var(--sbb-dialog-shadow-animation-duration);\n  inset: 0 auto auto 0;\n  width: 100%;\n}\n@media (forced-colors: active) {\n  :host::before {\n    border-color: CanvasText;\n  }\n}\n";
+var dialog_actions_default = ":host {\n  grid-area: actions;\n  padding-inline: var(--sbb-dialog-padding-inline);\n  padding-block: var(--sbb-dialog-padding-block);\n  margin-block-start: auto;\n  background-color: var(--sbb-dialog-background-color);\n  transition: box-shadow var(--sbb-animation-easing) var(--sbb-dialog-shadow-animation-duration);\n  box-shadow: var(--sbb-dialog-block-end-box-shadow, none);\n  position: relative;\n  clip-path: inset(-200% -200% 0 -200%);\n}\n:host::before {\n  content: \"\";\n  display: block;\n  position: absolute;\n  align-self: start;\n  border-block-start: var(--sbb-border-width-1x) solid var(--sbb-dialog-actions-border-color);\n  transition: border-color var(--sbb-animation-easing) var(--sbb-dialog-shadow-animation-duration);\n  inset: 0 auto auto 0;\n  width: 100%;\n}\n@media (forced-colors: active) {\n  :host::before {\n    border-color: CanvasText;\n  }\n}\n";
 
 //#endregion
 //#region src/elements/dialog/dialog-actions/dialog-actions.component.ts
@@ -105,7 +105,7 @@ var SbbDialogContentElement = class extends SbbElement {
 
 //#endregion
 //#region src/elements/dialog/dialog-title/dialog-title.scss?inline
-var dialog_title_default = ":host {\n  padding-block: var(--sbb-dialog-padding-block);\n  padding-inline: var(--sbb-dialog-padding-inline);\n  hyphens: auto;\n  grid-area: title;\n  position: relative;\n}\n\n:host([negative]) {\n  --sbb-title-color: var(--sbb-color-3-negative);\n}\n\n:host::after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  pointer-events: none;\n  inset: 0 -10rem 0 0;\n  transition: box-shadow var(--sbb-animation-easing) var(--sbb-dialog-shadow-animation-duration);\n  box-shadow: var(--sbb-dialog-block-start-box-shadow, none);\n}\n";
+var dialog_title_default = ":host {\n  padding-block: var(--sbb-dialog-padding-block);\n  padding-inline: var(--sbb-dialog-padding-inline);\n  hyphens: auto;\n  grid-area: title;\n  position: relative;\n}\n\n:host([negative]) {\n  --sbb-title-color: var(--sbb-color-3-negative);\n}\n\n:host::after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  pointer-events: none;\n  inset: 0 -10rem 0 0;\n  transition: box-shadow var(--sbb-animation-easing) var(--sbb-dialog-shadow-animation-duration);\n  box-shadow: var(--sbb-dialog-block-start-box-shadow, none);\n  clip-path: polygon(0% 50%, 0% 200%, 100% 200%, 100% 50%);\n}\n";
 
 //#endregion
 //#region src/elements/dialog/dialog-title/dialog-title.component.ts
@@ -130,7 +130,7 @@ var SbbDialogTitleElement = class extends SbbNegativeMixin(SbbTitleBase) {
 
 //#endregion
 //#region src/elements/dialog/dialog/dialog.scss?inline
-var dialog_default = ":host {\n  --sbb-dialog-animation-duration: var(\n    --sbb-disable-animation-duration,\n    var(--sbb-animation-duration-6x)\n  );\n  --sbb-dialog-padding-block: var(--sbb-spacing-responsive-xs);\n  --sbb-dialog-shadow-animation-duration: var(\n    --sbb-disable-animation-duration,\n    var(--sbb-animation-duration-4x)\n  );\n  display: none;\n  position: fixed;\n  inset-block: var(--sbb-dialog-inset-block);\n  inset-inline: var(--sbb-dialog-inset-inline);\n  z-index: var(--sbb-dialog-z-index, var(--sbb-overlay-default-z-index));\n}\n\n:host(:is(:state(top-shadow),[state--top-shadow])) {\n  --sbb-dialog-block-start-box-shadow: var(--_sbb-dialog-block-shadow);\n}\n\n:host(:is(:is(:state(state-opening),[state--state-opening]), :is(:state(state-opened),[state--state-opened]), :is(:state(state-closing),[state--state-closing]))) {\n  display: block;\n}\n\n:host(:is(:is(:state(state-opening),[state--state-opening]), :is(:state(state-opened),[state--state-opened]))) {\n  --sbb-dialog-pointer-events: all;\n  --sbb-dialog-backdrop-color: var(--sbb-background-color-3);\n  --sbb-dialog-backdrop-visibility: visible;\n  --sbb-dialog-backdrop-pointer-events: all;\n}\n\n:host([backdrop=translucent]:is(:is(:state(state-opening),[state--state-opening]), :is(:state(state-opened),[state--state-opened]))) {\n  --sbb-dialog-backdrop-color: color-mix(in srgb, var(--sbb-color-black) 50%, transparent);\n}\n\n:host([backdrop=opaque]:not([negative]):is(:is(:state(state-opening),[state--state-opening]), :is(:state(state-opened),[state--state-opened]))) {\n  --sbb-dialog-backdrop-color: var(--sbb-background-color-3);\n}\n\n:host(:not([negative])) {\n  --_sbb-dialog-color: var(--sbb-dialog-color);\n  --_sbb-dialog-block-shadow: var(--sbb-dialog-block-shadow);\n  --sbb-dialog-actions-border-color: var(--sbb-background-color-4);\n  --sbb-dialog-background-color: var(--sbb-background-color-1);\n}\n\n:host([negative]) {\n  --_sbb-dialog-color: var(--sbb-dialog-color-negative);\n  --_sbb-dialog-block-shadow: var(--sbb-dialog-block-shadow-negative);\n  --sbb-dialog-background-color: var(--sbb-background-color-1-negative);\n  --sbb-dialog-actions-border-color: var(--sbb-background-color-4-negative);\n  --sbb-dialog-backdrop-color: var(--sbb-background-color-3-negative);\n  --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);\n}\n\n:host(:is(:state(bottom-shadow),[state--bottom-shadow])) {\n  --sbb-dialog-block-end-box-shadow: var(--_sbb-dialog-block-shadow);\n  --sbb-dialog-actions-border-color: transparent;\n}\n\n:host(:not(:is(:state(state-closed),[state--state-closed]))) {\n  --sbb-dialog-inset-block: 0;\n  --sbb-dialog-inset-inline: 0;\n}\n\n.sbb-dialog__container {\n  pointer-events: var(--sbb-dialog-pointer-events);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: fixed;\n  inset-block: var(--sbb-dialog-inset-block);\n  inset-inline: var(--sbb-dialog-inset-inline);\n}\n.sbb-dialog__container::before {\n  content: \"\";\n  visibility: var(--sbb-dialog-backdrop-visibility);\n  pointer-events: var(--sbb-dialog-backdrop-pointer-events);\n  position: fixed;\n  inset-block: var(--sbb-dialog-inset-block);\n  inset-inline: var(--sbb-dialog-inset-inline);\n  background-color: var(--sbb-dialog-backdrop-color);\n  transition-duration: var(--sbb-dialog-animation-duration);\n  transition-timing-function: var(--sbb-dialog-animation-easing);\n  transition-property: background-color, visibility;\n}\n\n.sbb-dialog {\n  display: none;\n  position: absolute;\n  inset-inline: 0;\n  inset-block: auto 0;\n  border: none;\n  border-radius: var(--sbb-dialog-border-radius) var(--sbb-dialog-border-radius) 0 0;\n  max-width: var(--_sbb-dialog-max-width);\n  max-height: var(--_sbb-dialog-max-height);\n  color: var(--_sbb-dialog-color);\n  background-color: var(--sbb-dialog-background-color);\n  flex-direction: column;\n}\n:host(:is(:is(:state(state-opening),[state--state-opening]), :is(:state(state-opened),[state--state-opened]), :is(:state(state-closing),[state--state-closing]))) .sbb-dialog {\n  display: flex;\n  animation-name: open;\n  animation-duration: var(--sbb-dialog-animation-duration);\n  animation-timing-function: ease;\n}\n:host(:is(:state(state-closing),[state--state-closing])) .sbb-dialog {\n  pointer-events: none;\n  animation-name: close;\n}\n@media (forced-colors: active) {\n  .sbb-dialog {\n    outline: var(--sbb-border-width-1x) solid CanvasText;\n  }\n}\n@media (min-width: calc(37.5rem)) {\n  .sbb-dialog {\n    width: var(--sbb-dialog-width);\n    height: var(--sbb-dialog-height);\n    max-width: var(--sbb-dialog-max-width, var(--_sbb-dialog-max-width));\n    max-height: var(--sbb-dialog-max-height, var(--_sbb-dialog-max-height));\n    inset: unset;\n    border-radius: var(--sbb-dialog-border-radius);\n    overflow: hidden;\n  }\n}\n\n:host(:is(:state(has-intermediate-element),[state--has-intermediate-element])) ::slotted(:first-child),\n.sbb-dialog__wrapper {\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  max-height: 100%;\n}\n\n:host(:is(:state(has-intermediate-element),[state--has-intermediate-element])) ::slotted(:first-child),\n:host(:not(:is(:state(has-intermediate-element),[state--has-intermediate-element]))) .sbb-dialog__wrapper {\n  display: grid;\n  grid-template: \"title close-button\" auto \"content content\" 1fr \"actions actions\" auto/1fr auto;\n  gap: 0;\n}\n\n@keyframes open {\n  from {\n    opacity: 0;\n    translate: 0 var(--sbb-dialog-translate-y, 100%);\n  }\n  to {\n    opacity: 1;\n    translate: 0 0;\n  }\n}\n@keyframes close {\n  from {\n    opacity: 1;\n    translate: 0 0;\n  }\n  to {\n    opacity: 0;\n    translate: 0 var(--sbb-dialog-translate-y, 100%);\n  }\n}\n";
+var dialog_default = ":host {\n  --sbb-dialog-animation-duration: var(\n    --sbb-disable-animation-duration,\n    var(--sbb-animation-duration-6x)\n  );\n  --sbb-dialog-padding-block: var(--sbb-spacing-responsive-xs);\n  --sbb-dialog-shadow-animation-duration: var(\n    --sbb-disable-animation-duration,\n    var(--sbb-animation-duration-4x)\n  );\n  display: none;\n  position: fixed;\n  inset: 0;\n  z-index: var(--sbb-dialog-z-index, var(--sbb-overlay-default-z-index));\n}\n\n:host(:is(:state(top-shadow),[state--top-shadow])) {\n  --sbb-dialog-block-start-box-shadow: var(--_sbb-dialog-block-shadow);\n}\n\n:host(:is(:is(:state(state-opening),[state--state-opening]), :is(:state(state-opened),[state--state-opened]), :is(:state(state-closing),[state--state-closing]))) {\n  display: block;\n}\n\n:host(:is(:is(:state(state-opening),[state--state-opening]), :is(:state(state-opened),[state--state-opened]))) {\n  --sbb-dialog-pointer-events: all;\n  --sbb-dialog-backdrop-pointer-events: all;\n}\n\n:host(:not([negative])) {\n  --_sbb-dialog-color: var(--sbb-dialog-color);\n  --_sbb-dialog-block-shadow: var(--sbb-dialog-block-shadow);\n  --sbb-dialog-actions-border-color: var(--sbb-background-color-4);\n  --sbb-dialog-background-color: var(--sbb-background-color-1);\n}\n\n:host([negative]) {\n  --_sbb-dialog-color: var(--sbb-dialog-color-negative);\n  --_sbb-dialog-block-shadow: var(--sbb-dialog-block-shadow-negative);\n  --sbb-dialog-background-color: var(--sbb-background-color-1-negative);\n  --sbb-dialog-actions-border-color: var(--sbb-background-color-4-negative);\n  --sbb-dialog-backdrop-color: var(--sbb-background-color-3-negative);\n  --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);\n}\n\n:host([backdrop=translucent]) {\n  --sbb-dialog-backdrop-color: color-mix(in srgb, var(--sbb-color-black) 50%, transparent);\n}\n\n:host(:is(:state(bottom-shadow),[state--bottom-shadow])) {\n  --sbb-dialog-block-end-box-shadow: var(--_sbb-dialog-block-shadow);\n  --sbb-dialog-actions-border-color: transparent;\n}\n\n:host(:is(:state(state-closing),[state--state-closing])) {\n  --sbb-dialog-backdrop-animation-name: backdrop-close;\n}\n\n.sbb-dialog__container {\n  pointer-events: var(--sbb-dialog-pointer-events);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: fixed;\n  inset: 0;\n}\n.sbb-dialog__container::before {\n  content: \"\";\n  pointer-events: var(--sbb-dialog-backdrop-pointer-events);\n  position: absolute;\n  inset: 0;\n  background-color: var(--sbb-dialog-backdrop-color, transparent);\n  animation-name: var(--sbb-dialog-backdrop-animation-name, backdrop-open);\n  animation-duration: var(--sbb-dialog-animation-duration);\n  animation-timing-function: var(--sbb-dialog-animation-easing);\n  animation-fill-mode: forwards;\n}\n\n.sbb-dialog {\n  display: none;\n  position: absolute;\n  inset-inline: 0;\n  inset-block: auto 0;\n  border: none;\n  border-radius: var(--sbb-dialog-border-radius) var(--sbb-dialog-border-radius) 0 0;\n  max-width: var(--_sbb-dialog-max-width);\n  max-height: var(--_sbb-dialog-max-height);\n  color: var(--_sbb-dialog-color);\n  background-color: var(--sbb-dialog-background-color);\n  flex-direction: column;\n  padding-block-end: env(safe-area-inset-bottom, 0);\n}\n:host(:is(:is(:state(state-opening),[state--state-opening]), :is(:state(state-opened),[state--state-opened]), :is(:state(state-closing),[state--state-closing]))) .sbb-dialog {\n  display: flex;\n  animation-name: open;\n  animation-duration: var(--sbb-dialog-animation-duration);\n  animation-timing-function: ease;\n}\n:host(:is(:state(state-closing),[state--state-closing])) .sbb-dialog {\n  pointer-events: none;\n  animation-name: close;\n}\n@media (forced-colors: active) {\n  .sbb-dialog {\n    outline: var(--sbb-border-width-1x) solid CanvasText;\n  }\n}\n@media (min-width: calc(37.5rem)) {\n  .sbb-dialog {\n    width: var(--sbb-dialog-width);\n    height: var(--sbb-dialog-height);\n    max-width: var(--sbb-dialog-max-width, var(--_sbb-dialog-max-width));\n    max-height: var(--sbb-dialog-max-height, var(--_sbb-dialog-max-height));\n    inset: unset;\n    border-radius: var(--sbb-dialog-border-radius);\n    overflow: hidden;\n  }\n}\n\n:host(:is(:state(has-intermediate-element),[state--has-intermediate-element])) ::slotted(:first-child),\n.sbb-dialog__wrapper {\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  max-height: 100%;\n}\n\n:host(:is(:state(has-intermediate-element),[state--has-intermediate-element])) ::slotted(:first-child),\n:host(:not(:is(:state(has-intermediate-element),[state--has-intermediate-element]))) .sbb-dialog__wrapper {\n  display: grid;\n  grid-template: \"title close-button\" auto \"content content\" 1fr \"actions actions\" auto/1fr auto;\n  gap: 0;\n}\n\n@keyframes open {\n  from {\n    opacity: 0;\n    translate: 0 var(--sbb-dialog-translate-y, 100%);\n  }\n  to {\n    opacity: 1;\n    translate: 0 0;\n  }\n}\n@keyframes close {\n  from {\n    opacity: 1;\n    translate: 0 0;\n  }\n  to {\n    opacity: 0;\n    translate: 0 var(--sbb-dialog-translate-y, 100%);\n  }\n}\n@keyframes backdrop-open {\n  from {\n    background-color: transparent;\n    visibility: visible;\n  }\n}\n@keyframes backdrop-close {\n  to {\n    background-color: transparent;\n    visibility: hidden;\n  }\n}\n";
 
 //#endregion
 //#region src/elements/dialog/dialog/dialog.component.ts

package/development/header.pure.js

@@ -162,7 +162,7 @@ var SbbHeaderLinkElement = class extends SbbHeaderActionCommonElementMixin(SbbLi
 
 //#endregion
 //#region src/elements/header/header/header.scss?inline
-var header_default = ":host {\n  --sbb-logo-height: 1rem;\n  --sbb-signet-height: 1rem;\n  --sbb-header-transition-duration: var(\n    --sbb-disable-animation-duration,\n    var(--sbb-animation-duration-6x)\n  );\n}\n@media (min-width: calc(64rem)) {\n  :host {\n    --sbb-logo-height: 1.25rem;\n    --sbb-signet-height: 1.25rem;\n  }\n}\n:host {\n  display: block;\n  height: var(--sbb-header-height);\n  line-height: var(--sbb-typo-line-height-text);\n  padding-block-start: calc(var(--sbb-header-height) + var(--sbb-header-padding-block-start));\n}\n\n:host([size=s]) {\n  --sbb-header-height: var(--sbb-header-height-s);\n}\n\n:host([size=m]) {\n  --sbb-header-height: var(--sbb-header-height-m);\n}\n\n:host([hide-on-scroll]) {\n  --sbb-header-position: absolute;\n}\n\n:host([hide-on-scroll]:is(:state(fixed),[state--fixed])) {\n  --sbb-header-position: fixed;\n  --sbb-header-animation-name: hide;\n  --sbb-header-transform: translate3d(0, -100%, 0);\n  --sbb-header-inset-inline-end: var(--sbb-scrollbar-width, 0);\n}\n\n:host([hide-on-scroll]:is(:state(fixed),[state--fixed]):is(:state(animated),[state--animated])) {\n  --sbb-header-transition-timing: cubic-bezier(0.4, 0, 1, 1);\n}\n\n:host([hide-on-scroll]:is(:state(fixed),[state--fixed]):is(:state(visible),[state--visible])) {\n  --sbb-header-animation-name: show;\n  --sbb-header-transform: translate3d(0, 0, 0);\n  --sbb-header-transition-timing: cubic-bezier(0, 0, 0.2, 1);\n}\n\n:host([hide-on-scroll]:is(:state(fixed),[state--fixed]):is(:state(has-visible-focus-within),[state--has-visible-focus-within])) {\n  --sbb-header-transition-duration: 0;\n  --sbb-header-transform: translate3d(0, 0, 0);\n}\n\n.sbb-header {\n  position: var(--sbb-header-position);\n  inset: 0 var(--sbb-header-inset-inline-end) auto 0;\n  padding-block-start: var(--sbb-header-padding-block-start);\n  background: var(--sbb-header-background);\n  z-index: var(--sbb-header-z-index, 10);\n  transform: var(--sbb-header-transform);\n  transition-property: box-shadow;\n  transition-duration: var(--sbb-header-transition-duration);\n  transition-timing-function: var(--sbb-header-transition-timing);\n  animation-name: var(--sbb-header-animation-name);\n  animation-duration: var(--sbb-header-transition-duration);\n  animation-timing-function: var(--sbb-header-transition-timing);\n}\n:host(:is(:is(:state(shadow),[state--shadow]), :is(:state(has-visible-focus-within),[state--has-visible-focus-within]):is(:state(fixed),[state--fixed]))) .sbb-header {\n  box-shadow: var(--sbb-header-box-shadow);\n}\n@media (forced-colors: active) {\n  .sbb-header {\n    border-block-end: var(--sbb-border-width-1x) solid CanvasText;\n  }\n}\n\n.sbb-header__wrapper {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  height: var(--sbb-header-height);\n}\n:host(:not([expanded])) .sbb-header__wrapper {\n  padding-inline: var(--sbb-page-spacing-padding, var(--sbb-layout-base-offset-responsive));\n  margin-inline: auto;\n  width: 100%;\n}\n@media (min-width: calc(90rem)) {\n  :host(:not([expanded])) .sbb-header__wrapper {\n    max-width: var(--sbb-spacing-max-width, calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive)));\n  }\n}\n:host([expanded]) .sbb-header__wrapper {\n  padding-inline: var(--sbb-page-spacing-padding, var(--sbb-spacing-responsive-xxs));\n}\n\n::slotted(:is(sbb-header-button, sbb-header-link):first-child) {\n  margin-inline-start: var(--sbb-header-first-item-margin-inline-start);\n}\n\n::slotted(*) {\n  flex: 0 0 auto;\n}\n\n::slotted(.sbb-header-shrinkable) {\n  flex-shrink: 1;\n  min-width: 0;\n}\n\n::slotted(.sbb-header-spacer) {\n  flex-grow: 1;\n}\n\n::slotted(.sbb-header-logo) {\n  margin-inline-start: var(--sbb-spacing-responsive-s);\n}\n\n::slotted(a.sbb-header-logo) {\n  display: block;\n  padding-block: var(--sbb-spacing-fixed-3x);\n  position: relative;\n  flex-basis: 0;\n  outline: none !important;\n}\n\n::slotted(a.sbb-header-logo)::before {\n  content: \"\";\n  display: block;\n  position: absolute;\n  inset: var(--sbb-spacing-fixed-3x) 0;\n}\n\n::slotted(a.sbb-header-logo:focus-visible)::before {\n  outline-offset: var(--sbb-focus-outline-offset);\n  outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);\n  outline-offset: var(--sbb-spacing-fixed-3x);\n  border-radius: 1px;\n}\n\n@keyframes show {\n  from {\n    transform: translate3d(0, -100%, 0);\n  }\n  to {\n    transform: translate3d(0, 0, 0);\n  }\n}\n@keyframes hide {\n  from {\n    transform: translate3d(0, 0, 0);\n  }\n  to {\n    transform: translate3d(0, -100%, 0);\n  }\n}\n";
+var header_default = ":host {\n  --sbb-logo-height: 1rem;\n  --sbb-signet-height: 1rem;\n  --sbb-header-transition-duration: var(\n    --sbb-disable-animation-duration,\n    var(--sbb-animation-duration-6x)\n  );\n}\n@media (min-width: calc(64rem)) {\n  :host {\n    --sbb-logo-height: 1.25rem;\n    --sbb-signet-height: 1.25rem;\n  }\n}\n:host {\n  display: block;\n  height: var(--sbb-header-height);\n  line-height: var(--sbb-typo-line-height-text);\n  padding-block-start: calc(var(--sbb-header-height) + var(--sbb-header-padding-block-start));\n}\n\n:host([size=s]) {\n  --sbb-header-height: var(--sbb-header-height-s);\n}\n\n:host([size=m]) {\n  --sbb-header-height: var(--sbb-header-height-m);\n}\n\n:host([hide-on-scroll]) {\n  --sbb-header-position: absolute;\n}\n\n:host([hide-on-scroll]:is(:state(fixed),[state--fixed])) {\n  --sbb-header-position: fixed;\n  --sbb-header-animation-name: hide;\n  --sbb-header-transform: translate3d(0, -100%, 0);\n  --sbb-header-inset-inline-end: var(--sbb-scrollbar-reserved-space, 0);\n}\n\n:host([hide-on-scroll]:is(:state(fixed),[state--fixed]):is(:state(animated),[state--animated])) {\n  --sbb-header-transition-timing: cubic-bezier(0.4, 0, 1, 1);\n}\n\n:host([hide-on-scroll]:is(:state(fixed),[state--fixed]):is(:state(visible),[state--visible])) {\n  --sbb-header-animation-name: show;\n  --sbb-header-transform: translate3d(0, 0, 0);\n  --sbb-header-transition-timing: cubic-bezier(0, 0, 0.2, 1);\n}\n\n:host([hide-on-scroll]:is(:state(fixed),[state--fixed]):is(:state(has-visible-focus-within),[state--has-visible-focus-within])) {\n  --sbb-header-transition-duration: 0;\n  --sbb-header-transform: translate3d(0, 0, 0);\n}\n\n.sbb-header {\n  position: var(--sbb-header-position);\n  inset: 0 var(--sbb-header-inset-inline-end) auto 0;\n  padding-block-start: var(--sbb-header-padding-block-start);\n  background: var(--sbb-header-background);\n  z-index: var(--sbb-header-z-index, 10);\n  transform: var(--sbb-header-transform);\n  transition-property: box-shadow;\n  transition-duration: var(--sbb-header-transition-duration);\n  transition-timing-function: var(--sbb-header-transition-timing);\n  animation-name: var(--sbb-header-animation-name);\n  animation-duration: var(--sbb-header-transition-duration);\n  animation-timing-function: var(--sbb-header-transition-timing);\n}\n:host(:is(:is(:state(shadow),[state--shadow]), :is(:state(has-visible-focus-within),[state--has-visible-focus-within]):is(:state(fixed),[state--fixed]))) .sbb-header {\n  box-shadow: var(--sbb-header-box-shadow);\n}\n@media (forced-colors: active) {\n  .sbb-header {\n    border-block-end: var(--sbb-border-width-1x) solid CanvasText;\n  }\n}\n\n.sbb-header__wrapper {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  height: var(--sbb-header-height);\n}\n:host(:not([expanded])) .sbb-header__wrapper {\n  padding-inline: var(--sbb-page-spacing-padding, var(--sbb-layout-base-offset-responsive));\n  margin-inline: auto;\n  width: 100%;\n}\n@media (min-width: calc(90rem)) {\n  :host(:not([expanded])) .sbb-header__wrapper {\n    max-width: var(--sbb-spacing-max-width, calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive)));\n  }\n}\n:host([expanded]) .sbb-header__wrapper {\n  padding-inline: var(--sbb-page-spacing-padding, var(--sbb-spacing-responsive-xxs));\n}\n\n::slotted(:is(sbb-header-button, sbb-header-link):first-child) {\n  margin-inline-start: var(--sbb-header-first-item-margin-inline-start);\n}\n\n::slotted(*) {\n  flex: 0 0 auto;\n}\n\n::slotted(.sbb-header-shrinkable) {\n  flex-shrink: 1;\n  min-width: 0;\n}\n\n::slotted(.sbb-header-spacer) {\n  flex-grow: 1;\n}\n\n::slotted(.sbb-header-logo) {\n  margin-inline-start: var(--sbb-spacing-responsive-s);\n}\n\n::slotted(a.sbb-header-logo) {\n  display: block;\n  padding-block: var(--sbb-spacing-fixed-3x);\n  position: relative;\n  flex-basis: 0;\n  outline: none !important;\n}\n\n::slotted(a.sbb-header-logo)::before {\n  content: \"\";\n  display: block;\n  position: absolute;\n  inset: var(--sbb-spacing-fixed-3x) 0;\n}\n\n::slotted(a.sbb-header-logo:focus-visible)::before {\n  outline-offset: var(--sbb-focus-outline-offset);\n  outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);\n  outline-offset: var(--sbb-spacing-fixed-3x);\n  border-radius: 1px;\n}\n\n@keyframes show {\n  from {\n    transform: translate3d(0, -100%, 0);\n  }\n  to {\n    transform: translate3d(0, 0, 0);\n  }\n}\n@keyframes hide {\n  from {\n    transform: translate3d(0, 0, 0);\n  }\n  to {\n    transform: translate3d(0, -100%, 0);\n  }\n}\n";
 
 //#endregion
 //#region src/elements/header/header/header.component.ts

package/development/logo/common/logo-common.d.ts

@@ -0,0 +1,7 @@
+import { SbbElement, type SbbElementConstructor } from '../../core/base-elements/element.ts';
+import type { AbstractConstructor } from '../../core/mixins/constructor.ts';
+export declare abstract class SbbLogoCommonElementMixinType extends SbbElement {
+    accessor protectiveRoom: 'none' | 'minimal' | 'ideal';
+    accessor accessibilityLabel: string;
+}
+export declare const SbbLogoCommonElementMixin: <T extends AbstractConstructor<SbbElement> & SbbElementConstructor>(superclass: T) => AbstractConstructor<SbbLogoCommonElementMixinType> & T;

package/development/logo/{logo.component.d.ts → logo/logo.component.d.ts}

@@ -1,6 +1,6 @@
 import { type CSSResultGroup, type TemplateResult } from 'lit';
-import { SbbElement } from '../core.ts';
-declare const SbbLogoElement_base: import("../core.ts").AbstractConstructor<import("../core.ts").SbbNegativeMixinType> & typeof SbbElement;
+import { SbbElement } from '../../core.ts';
+declare const SbbLogoElement_base: import("../../core.ts").AbstractConstructor<import("../common/logo-common.ts").SbbLogoCommonElementMixinType> & typeof SbbElement;
 /**
  * It displays the SBB logo.
  *
@@ -9,10 +9,7 @@ declare const SbbLogoElement_base: import("../core.ts").AbstractConstructor<impo
 export declare class SbbLogoElement extends SbbLogoElement_base {
     static readonly elementName: string;
     static styles: CSSResultGroup;
-    /** Visual protective room around logo. */
-    accessor protectiveRoom: 'none' | 'minimal' | 'ideal';
-    /** Accessibility label which will be forwarded to the SVG logo. */
-    accessor accessibilityLabel: string;
+    constructor();
     protected render(): TemplateResult;
 }
 declare global {

package/development/logo/logo-cargo/logo-cargo.component.d.ts

@@ -0,0 +1,20 @@
+import { type CSSResultGroup, type TemplateResult } from 'lit';
+import { SbbElement } from '../../core.ts';
+declare const SbbLogoCargoElement_base: import("../../core.ts").AbstractConstructor<import("../common/logo-common.ts").SbbLogoCommonElementMixinType> & typeof SbbElement;
+/**
+ * It displays the SBB Cargo logo.
+ *
+ * @cssprop [--sbb-logo-height=auto] - Can be used to set the height of the logo.
+ */
+export declare class SbbLogoCargoElement extends SbbLogoCargoElement_base {
+    static readonly elementName: string;
+    static styles: CSSResultGroup;
+    constructor();
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-logo-cargo': SbbLogoCargoElement;
+    }
+}
+export {};

package/development/logo/logo-cargo-international/logo-cargo-international.component.d.ts

@@ -0,0 +1,20 @@
+import { type CSSResultGroup, type TemplateResult } from 'lit';
+import { SbbElement } from '../../core.ts';
+declare const SbbLogoCargoInternationalElement_base: import("../../core.ts").AbstractConstructor<import("../common/logo-common.ts").SbbLogoCommonElementMixinType> & typeof SbbElement;
+/**
+ * It displays the SBB Cargo International logo.
+ *
+ * @cssprop [--sbb-logo-height=auto] - Can be used to set the height of the logo.
+ */
+export declare class SbbLogoCargoInternationalElement extends SbbLogoCargoInternationalElement_base {
+    static readonly elementName: string;
+    static styles: CSSResultGroup;
+    constructor();
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-logo-cargo-international': SbbLogoCargoInternationalElement;
+    }
+}
+export {};

package/development/logo/logo-elvetino/logo-elvetino.component.d.ts

@@ -0,0 +1,20 @@
+import { type CSSResultGroup, type TemplateResult } from 'lit';
+import { SbbElement } from '../../core.ts';
+declare const SbbLogoElvetinoElement_base: import("../../core.ts").AbstractConstructor<import("../common/logo-common.ts").SbbLogoCommonElementMixinType> & typeof SbbElement;
+/**
+ * It displays the SBB Elvetino logo.
+ *
+ * @cssprop [--sbb-logo-height=auto] - Can be used to set the height of the logo.
+ */
+export declare class SbbLogoElvetinoElement extends SbbLogoElvetinoElement_base {
+    static readonly elementName: string;
+    static styles: CSSResultGroup;
+    constructor();
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-logo-elvetino': SbbLogoElvetinoElement;
+    }
+}
+export {};

package/development/logo.js

@@ -1,9 +1,12 @@
-import { SbbLogoElement } from "./logo.pure.js";
+import { SbbLogoCargoElement, SbbLogoCargoInternationalElement, SbbLogoElement, SbbLogoElvetinoElement } from "./logo.pure.js";
 
 export * from "./logo.pure.js"
 
 //#region src/elements/logo.ts
 /** @entrypoint */
 SbbLogoElement.define();
+SbbLogoCargoElement.define();
+SbbLogoCargoInternationalElement.define();
+SbbLogoElvetinoElement.define();
 
 //#endregion

package/development/logo.pure.d.ts

@@ -1,2 +1,5 @@
 /** @entrypoint */
-export * from './logo/logo.component.ts';
+export * from './logo/logo/logo.component.ts';
+export * from './logo/logo-cargo-international/logo-cargo-international.component.ts';
+export * from './logo/logo-cargo/logo-cargo.component.ts';
+export * from './logo/logo-elvetino/logo-elvetino.component.ts';