@sbb-esta/lyne-elements-dev 5.0.0-next-dev.1776724490 → 5.0.0-next-dev.1776756036

package/{menu.component-XvtyRok7.js → menu.component-i-X_ag2Y.js}

@@ -1,7 +1,7 @@
 import { __esDecorate as e, __runInitializers as t } from "tslib";
 import { html as n, isServer as r, unsafeCSS as i } from "lit";
 import { property as a } from "lit/decorators.js";
-import { SbbDarkModeController as o, SbbEscapableOverlayController as s, SbbFocusTrapController as c, SbbInertController as l, SbbLanguageController as u, SbbMediaMatcherController as d, SbbMediaQueryBreakpointSmallAndBelow as f, SbbOpenCloseBaseElement as p, SbbScrollHandler as m, boxSizingStyles as h, forwardEvent as g, getElementPosition as _, getElementPositionHorizontal as v, getNextElementIndex as y, i18nGoBack as b, idReference as x, interactivityChecker as S, isArrowKeyOrPageKeysPressed as C, isEventOnElement as w, isZeroAnimationDuration as T, removeAriaOverlayTriggerAttributes as E, setAriaOverlayTriggerAttributes as D, ɵstateController as O } from "./core.js";
+import { SbbDarkModeController as o, SbbEscapableOverlayController as s, SbbFocusTrapController as c, SbbInertController as l, SbbLanguageController as u, SbbMediaMatcherController as d, SbbMediaQueryBreakpointSmallAndBelow as f, SbbOpenCloseBaseElement as p, SbbScrollHandler as m, boxSizingStyles as h, forwardEvent as g, getElementPosition as _, getElementPositionHorizontal as v, getNextElementIndex as y, i18nGoBack as b, idReference as x, interactivityChecker as S, isArrowKeyOrPageKeysPressed as C, isEventOnElement as w, isZeroAnimationDuration as T, removeAriaOverlayTriggerProperties as E, setAriaOverlayTriggerProperties as D, ɵstateController as O } from "./core.js";
 import { SbbDividerElement as k } from "./divider.pure.js";
 import { ref as A } from "lit/directives/ref.js";
 import { SbbMenuButtonElement as j } from "./menu/menu-button/menu-button.component.js";
@@ -17,12 +17,12 @@ var M = ":host{display:contents;--sbb-menu-animation-duration: var( --sbb-disabl
 	"SBB-BLOCK-LINK-BUTTON",
 	"SBB-MENU-BUTTON",
 	"SBB-MENU-LINK"
-], I = 0, L = (() => {
-	let L = p, R, z = [], B = [];
-	return class extends L {
+], I = (() => {
+	let I = p, L, R = [], z = [];
+	return class extends I {
 		static {
-			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(L[Symbol.metadata] ?? null) : void 0;
-			R = [x(), a()], e(this, null, R, {
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(I[Symbol.metadata] ?? null) : void 0;
+			L = [x(), a()], e(this, null, L, {
 				kind: "accessor",
 				name: "trigger",
 				static: !1,
@@ -35,7 +35,7 @@ var M = ":host{display:contents;--sbb-menu-animation-duration: var( --sbb-disabl
 					}
 				},
 				metadata: t
-			}, z, B), t && Object.defineProperty(this, Symbol.metadata, {
+			}, R, z), t && Object.defineProperty(this, Symbol.metadata, {
 				enumerable: !0,
 				configurable: !0,
 				writable: !0,
@@ -62,7 +62,7 @@ var M = ":host{display:contents;--sbb-menu-animation-duration: var( --sbb-disabl
 			this.#e = e;
 		}
 		constructor() {
-			super(), this.#e = t(this, z, null), this._menu = t(this, B), this._triggerElement = null, this._isPointerDownEventOnMenu = !1, this._escapableOverlayController = new s(this), this._focusTrapController = new c(this), this._scrollHandler = new m(), this._inertController = new l(this), this._mobileBreakpoint = f, this._mediaMatcher = new d(this, { [this._mobileBreakpoint]: (e) => {
+			super(), this.#e = t(this, R, null), this._menu = t(this, z), this._triggerElement = null, this._isPointerDownEventOnMenu = !1, this._escapableOverlayController = new s(this), this._focusTrapController = new c(this), this._scrollHandler = new m(), this._inertController = new l(this), this._mobileBreakpoint = f, this._mediaMatcher = new d(this, { [this._mobileBreakpoint]: (e) => {
 				e && (this.state === "opening" || this.state === "opened") ? this._scrollHandler.disableScroll() : this._scrollHandler.enableScroll();
 			} }), this._darkModeController = new o(this, () => this._syncNegative()), this._language = new u(this), this._nestedMenu = null, this._pointerDownListener = (e) => {
 				let t = e.target.closest("sbb-menu");
@@ -84,7 +84,7 @@ var M = ":host{display:contents;--sbb-menu-animation-duration: var( --sbb-disabl
 					let e = this._parentMenu();
 					e.internals.states.add("nested-child"), e._nestedMenu !== this && e._nestedMenu?.close(), e._nestedMenu = this;
 				}
-				this.showPopover?.(), this.state = "opening", this._setMenuPosition(), this._triggerElement?.setAttribute("aria-expanded", "true"), this._isMobile() && this._scrollHandler.disableScroll(), this._isZeroAnimationDuration() && this._handleOpening();
+				this.showPopover?.(), this.state = "opening", this._setMenuPosition(), this._triggerElement && (this._triggerElement.ariaExpanded = "true"), this._isMobile() && this._scrollHandler.disableScroll(), this._isZeroAnimationDuration() && this._handleOpening();
 			}
 		}
 		close() {
@@ -99,7 +99,7 @@ var M = ":host{display:contents;--sbb-menu-animation-duration: var( --sbb-disabl
 					let t = this._parentMenu();
 					e ? (this.internals.states.add("close-all"), t.internals.states.add("skip-animation")) : (this.internals.states.delete("close-all"), t.internals.states.delete("skip-animation")), t.internals.states.delete("nested-child"), t._nestedMenu = null;
 				}
-				this.state = "closing", this._triggerElement?.setAttribute("aria-expanded", "false"), this._isZeroAnimationDuration() && this._handleClosing();
+				this.state = "closing", this._triggerElement && (this._triggerElement.ariaExpanded = "false"), this._isZeroAnimationDuration() && this._handleClosing();
 			}
 		}
 		_isZeroAnimationDuration() {
@@ -142,7 +142,7 @@ var M = ":host{display:contents;--sbb-menu-animation-duration: var( --sbb-disabl
 			return this.shadowRoot?.addEventListener("slotchange", () => this._syncNegative(), { capture: !0 }), e;
 		}
 		connectedCallback() {
-			this.popover = "manual", super.connectedCallback(), this.id ||= `sbb-menu-${I++}`, this.hasUpdated && this._configureTrigger();
+			this.popover = "manual", super.connectedCallback(), this.hasUpdated && this._configureTrigger();
 		}
 		disconnectedCallback() {
 			super.disconnectedCallback(), this._triggerElement = null, this._triggerAbortController?.abort(), this._windowEventsController?.abort(), this._scrollHandler.enableScroll();
@@ -151,7 +151,7 @@ var M = ":host{display:contents;--sbb-menu-animation-duration: var( --sbb-disabl
 			super.requestUpdate(e, t, n), !r && (!e || e === "trigger") && this.hasUpdated && this._configureTrigger();
 		}
 		_configureTrigger() {
-			this.trigger !== this._triggerElement && (this._triggerAbortController?.abort(), E(this._triggerElement), this._triggerElement = this.trigger, this._triggerElement && (D(this._triggerElement, "menu", this.id, this.state), this._triggerAbortController = new AbortController(), this._triggerElement.addEventListener("click", () => this.open(), { signal: this._triggerAbortController.signal }), this.toggleState("nested", ["sbb-menu-button", "sbb-menu-link"].includes(this._triggerElement.localName)), O(this._triggerElement).add("sbb-menu-trigger")));
+			this.trigger !== this._triggerElement && (this._triggerAbortController?.abort(), E(this._triggerElement), this._triggerElement = this.trigger, this._triggerElement && (D(this, this._triggerElement, "menu", this.state), this._triggerAbortController = new AbortController(), this._triggerElement.addEventListener("click", () => this.open(), { signal: this._triggerAbortController.signal }), this.toggleState("nested", ["sbb-menu-button", "sbb-menu-link"].includes(this._triggerElement.localName)), O(this._triggerElement).add("sbb-menu-trigger")));
 		}
 		_attachWindowEvents() {
 			this._windowEventsController = new AbortController(), document.addEventListener("scroll", () => this._setMenuPosition(), {
@@ -186,7 +186,7 @@ var M = ":host{display:contents;--sbb-menu-animation-duration: var( --sbb-disabl
 		}
 		_handleMouseOver(e) {
 			let t = e.target, n = this._isMobile();
-			!n && this._nestedMenu && !t.classList.contains("sbb-menu__content") && t.getAttribute("aria-expanded") !== "true" && this._nestedMenu.close(), t.matches(":is(:state(sbb-menu-trigger),[state--sbb-menu-trigger])") && !n && t.click();
+			!n && this._nestedMenu && !t.classList.contains("sbb-menu__content") && t.ariaExpanded !== "true" && this._nestedMenu.close(), t.matches(":is(:state(sbb-menu-trigger),[state--sbb-menu-trigger])") && !n && t.click();
 		}
 		_onMenuAnimationEnd(e) {
 			(e.animationName === "open" || e.animationName === "open-sideways") && this.state === "opening" ? this._handleOpening() : (e.animationName === "close" || e.animationName === "close-sideways") && this.state === "closing" && this._handleClosing();
@@ -239,4 +239,4 @@ var M = ":host{display:contents;--sbb-menu-animation-duration: var( --sbb-disabl
 	};
 })();
 //#endregion
-export { L as t };
+export { I as t };

package/menu.js

@@ -1,7 +1,7 @@
-import { t as e } from "./menu-action-common-DY4RrfCy.js";
+import { t as e } from "./menu-action-common-krzD_Ca2.js";
 import { SbbMenuButtonElement as t } from "./menu/menu-button/menu-button.component.js";
 import { SbbMenuLinkElement as n } from "./menu/menu-link/menu-link.component.js";
-import { t as r } from "./menu.component-XvtyRok7.js";
+import { t as r } from "./menu.component-i-X_ag2Y.js";
 import "./menu.pure.js";
 r.define(), t.define(), n.define();
 //#endregion

package/menu.pure.js

@@ -1,5 +1,5 @@
-import { t as e } from "./menu-action-common-DY4RrfCy.js";
+import { t as e } from "./menu-action-common-krzD_Ca2.js";
 import { SbbMenuButtonElement as t } from "./menu/menu-button/menu-button.component.js";
 import { SbbMenuLinkElement as n } from "./menu/menu-link/menu-link.component.js";
-import { t as r } from "./menu.component-XvtyRok7.js";
+import { t as r } from "./menu.component-i-X_ag2Y.js";
 export { e as SbbMenuActionCommonElementMixin, t as SbbMenuButtonElement, r as SbbMenuElement, n as SbbMenuLinkElement };

package/navigation/navigation/navigation.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../navigation.component-Cnyb5_4R.js";
+import { t as e } from "../../navigation.component-Bym1kjzt.js";
 export { e as SbbNavigationElement };

package/navigation/navigation-section/navigation-section.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../navigation-section.component-CLcdmPV3.js";
+import { t as e } from "../../navigation-section.component-Db2MWBDn.js";
 export { e as SbbNavigationSectionElement };

package/{navigation-section.component-CLcdmPV3.js → navigation-section.component-Db2MWBDn.js}

@@ -1,19 +1,19 @@
 import { __esDecorate as e, __runInitializers as t } from "tslib";
 import { html as n, isServer as r, nothing as i, unsafeCSS as a } from "lit";
 import { property as o } from "lit/decorators.js";
-import { IS_FOCUSABLE_QUERY as s, SbbFocusTrapController as c, SbbLanguageController as l, SbbMediaMatcherController as u, SbbMediaQueryBreakpointSmallAndBelow as d, SbbOpenCloseBaseElement as f, SbbUpdateSchedulerMixin as p, boxSizingStyles as m, forceType as h, i18nGoBack as g, idReference as _, isZeroAnimationDuration as v, omitEmptyConverter as y, removeAriaOverlayTriggerAttributes as b, sbbInputModalityDetector as x, setAriaOverlayTriggerAttributes as S, ɵstateController as C } from "./core.js";
+import { IS_FOCUSABLE_QUERY as s, SbbFocusTrapController as c, SbbLanguageController as l, SbbMediaMatcherController as u, SbbMediaQueryBreakpointSmallAndBelow as d, SbbOpenCloseBaseElement as f, SbbUpdateSchedulerMixin as p, boxSizingStyles as m, forceType as h, i18nGoBack as g, idReference as _, isZeroAnimationDuration as v, omitEmptyConverter as y, removeAriaOverlayTriggerProperties as b, sbbInputModalityDetector as x, setAriaOverlayTriggerProperties as S, ɵstateController as C } from "./core.js";
 import { SbbTransparentButtonElement as w } from "./button.pure.js";
 //#region src/elements/navigation/navigation-section/navigation-section.scss?inline
-var T = ":host{--sbb-navigation-section-display: none;--sbb-navigation-section-column: 1 / -1;--sbb-navigation-section-position: fixed;--sbb-navigation-section-pointer-events: none;--sbb-navigation-section-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-3x) );--sbb-navigation-section-animation-easing: ease-out;--sbb-navigation-section-padding-inline: var(--sbb-layout-base-offset-responsive);--sbb-navigation-section-padding-block: var(--sbb-spacing-responsive-l);--sbb-navigation-section-translate: 100%;--sbb-navigation-section-content-padding-inline-start: var(--sbb-spacing-fixed-12x);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-navigation-section-width: 100dvw;--sbb-navigation-section-height: 100dvh;display:var(--sbb-navigation-section-display);position:var(--sbb-navigation-section-position);grid-column:var(--sbb-navigation-section-column);inset-inline-start:0;inset-block-start:0;width:var(--sbb-navigation-section-width);height:var(--sbb-navigation-section-height);z-index:var(--sbb-navigation-z-index, var(--sbb-overlay-default-z-index))}@media(min-width:64rem){:host{--sbb-navigation-section-column: 5 / 13;--sbb-navigation-section-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--sbb-navigation-section-padding-block: var(--sbb-spacing-responsive-xl);--sbb-navigation-section-padding-inline: var(--sbb-spacing-fixed-8x) var(--sbb-layout-base-offset-responsive);--sbb-navigation-section-position: relative;--sbb-navigation-section-translate: 0;--sbb-navigation-section-content-padding-inline-start: 0;--sbb-navigation-section-width: calc( 100% + var(--sbb-layout-base-offset-responsive) + var(--sbb-grid-base-gutter-responsive) );translate:calc(var(--sbb-grid-base-gutter-responsive) * -1) 0}}@media(min-width:90rem){:host{--sbb-navigation-section-column: 6 / 17;--sbb-navigation-section-padding-block: var(--sbb-spacing-responsive-xxl) var(--sbb-spacing-responsive-l)}}:host(:is(:state(state-opened),[state--state-opened])){--sbb-navigation-section-pointer-events: all}:host(:is(:state(state-opening),[state--state-opening])){--sbb-navigation-section-position: absolute}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-closing),[state--state-closing]))){--sbb-navigation-section-pointer-events: none}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))){--sbb-navigation-section-display: block}::slotted(*){padding-inline-start:var(--sbb-navigation-section-content-padding-inline-start)}::slotted(:is(:state(sbb-button),[state--sbb-button])){grid-column-start:1}.sbb-navigation-section__container{pointer-events:var(--sbb-navigation-section-pointer-events);height:var(--sbb-navigation-section-height)}.sbb-navigation-section{display:none;border:none;margin:0;width:100%;height:100%;color:var(--sbb-navigation-color, var(--sbb-color-1-negative));background-color:transparent;padding:0;overflow:hidden}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))) .sbb-navigation-section{display:block;animation-name:open;animation-duration:var(--sbb-navigation-section-animation-duration);animation-timing-function:var(--sbb-navigation-section-animation-easing)}:host(:is(:state(state-closing),[state--state-closing])) .sbb-navigation-section{animation-name:close}@media(forced-colors:active){.sbb-navigation-section{outline:var(--sbb-border-width-1x) solid CanvasText}}.sbb-navigation-section__wrapper{--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-white) 30%, transparent);--sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-white) 60%, transparent);--sbb-scrollbar-track-color: transparent;--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-navigation-section__wrapper::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-navigation-section__wrapper::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-navigation-section__wrapper::-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-navigation-section__wrapper::-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-navigation-section__wrapper::-webkit-scrollbar-button,.sbb-navigation-section__wrapper::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-navigation-section__wrapper{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-navigation-section__wrapper{height:100%;padding-block:var(--sbb-navigation-section-padding-block);outline:none;overflow-y:auto}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-closing),[state--state-closing]))) .sbb-navigation-section__wrapper{--sbb-scrollbar-color: transparent;scrollbar-color:transparent transparent}.sbb-navigation-section__header{position:relative;display:flex;align-items:center;gap:var(--sbb-spacing-fixed-1x);margin-block-start:var(--sbb-spacing-responsive-xxl);padding-inline-start:var(--sbb-navigation-section-content-padding-inline-start)}@media(min-width:64rem){.sbb-navigation-section__header{margin-block-start:0;padding-inline-start:0}}@media(min-width:90rem){.sbb-navigation-section__header{grid-column:1/4}}.sbb-navigation-section__back{position:absolute;translate:calc((100% + var(--sbb-spacing-fixed-1x)) * -1) 0}@media(min-width:64rem){.sbb-navigation-section__back{display:none}}.sbb-navigation-section__title{margin-block:var(--sbb-title-margin-block, 0);margin-inline:0;font-family:var(--sbb-typo-font-family);font-weight:700;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);--sbb-title-font-size: var(--sbb-title-font-size-level-4-lean, var(--sbb-heading-font-size-4))}@media(min-width:64rem){.sbb-navigation-section__title{--sbb-title-font-size: var(--sbb-title-font-size-level-2-lean, var(--sbb-heading-font-size-2))}}.sbb-navigation-section__content{display:grid;grid-template-columns:1fr;gap:var(--sbb-spacing-responsive-l) var(--sbb-grid-base-gutter-responsive);padding-inline:var(--sbb-navigation-section-padding-inline)}@media(min-width:64rem){.sbb-navigation-section__content{opacity:0;translate:0 var(--sbb-spacing-fixed-3x);transition-duration:var(--sbb-navigation-section-animation-duration);transition-delay:var(--sbb-navigation-section-animation-duration);transition-timing-function:var(--sbb-navigation-section-animation-easing);transition-property:opacity,translate}:host(:is(:state(state-opened),[state--state-opened])) .sbb-navigation-section__content{opacity:1;translate:0 0}}@media(min-width:90rem){.sbb-navigation-section__content{grid-template-columns:repeat(3,1fr)}}:host(:is(:state(state-closing),[state--state-closing])) .sbb-navigation-section__content{transition-delay:0s}@keyframes open{0%{translate:var(--sbb-navigation-section-translate) 0}to{translate:0 0}}@keyframes close{0%{translate:0 0}to{translate:var(--sbb-navigation-section-translate) 0}}", E = 0, D = (() => {
-	let D = p(f), O, k = [], A = [], j, M = [], N = [], P, F = [], I = [], L, R = [], z = [];
-	return class extends D {
+var T = ":host{--sbb-navigation-section-display: none;--sbb-navigation-section-column: 1 / -1;--sbb-navigation-section-position: fixed;--sbb-navigation-section-pointer-events: none;--sbb-navigation-section-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-3x) );--sbb-navigation-section-animation-easing: ease-out;--sbb-navigation-section-padding-inline: var(--sbb-layout-base-offset-responsive);--sbb-navigation-section-padding-block: var(--sbb-spacing-responsive-l);--sbb-navigation-section-translate: 100%;--sbb-navigation-section-content-padding-inline-start: var(--sbb-spacing-fixed-12x);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-navigation-section-width: 100dvw;--sbb-navigation-section-height: 100dvh;display:var(--sbb-navigation-section-display);position:var(--sbb-navigation-section-position);grid-column:var(--sbb-navigation-section-column);inset-inline-start:0;inset-block-start:0;width:var(--sbb-navigation-section-width);height:var(--sbb-navigation-section-height);z-index:var(--sbb-navigation-z-index, var(--sbb-overlay-default-z-index))}@media(min-width:64rem){:host{--sbb-navigation-section-column: 5 / 13;--sbb-navigation-section-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--sbb-navigation-section-padding-block: var(--sbb-spacing-responsive-xl);--sbb-navigation-section-padding-inline: var(--sbb-spacing-fixed-8x) var(--sbb-layout-base-offset-responsive);--sbb-navigation-section-position: relative;--sbb-navigation-section-translate: 0;--sbb-navigation-section-content-padding-inline-start: 0;--sbb-navigation-section-width: calc( 100% + var(--sbb-layout-base-offset-responsive) + var(--sbb-grid-base-gutter-responsive) );translate:calc(var(--sbb-grid-base-gutter-responsive) * -1) 0}}@media(min-width:90rem){:host{--sbb-navigation-section-column: 6 / 17;--sbb-navigation-section-padding-block: var(--sbb-spacing-responsive-xxl) var(--sbb-spacing-responsive-l)}}:host(:is(:state(state-opened),[state--state-opened])){--sbb-navigation-section-pointer-events: all}:host(:is(:state(state-opening),[state--state-opening])){--sbb-navigation-section-position: absolute}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-closing),[state--state-closing]))){--sbb-navigation-section-pointer-events: none}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))){--sbb-navigation-section-display: block}::slotted(*){padding-inline-start:var(--sbb-navigation-section-content-padding-inline-start)}::slotted(:is(:state(sbb-button),[state--sbb-button])){grid-column-start:1}.sbb-navigation-section__container{pointer-events:var(--sbb-navigation-section-pointer-events);height:var(--sbb-navigation-section-height)}.sbb-navigation-section{display:none;border:none;margin:0;width:100%;height:100%;color:var(--sbb-navigation-color, var(--sbb-color-1-negative));background-color:transparent;padding:0;overflow:hidden}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))) .sbb-navigation-section{display:block;animation-name:open;animation-duration:var(--sbb-navigation-section-animation-duration);animation-timing-function:var(--sbb-navigation-section-animation-easing)}:host(:is(:state(state-closing),[state--state-closing])) .sbb-navigation-section{animation-name:close}@media(forced-colors:active){.sbb-navigation-section{outline:var(--sbb-border-width-1x) solid CanvasText}}.sbb-navigation-section__wrapper{--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-white) 30%, transparent);--sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-white) 60%, transparent);--sbb-scrollbar-track-color: transparent;--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-navigation-section__wrapper::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-navigation-section__wrapper::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-navigation-section__wrapper::-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-navigation-section__wrapper::-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-navigation-section__wrapper::-webkit-scrollbar-button,.sbb-navigation-section__wrapper::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-navigation-section__wrapper{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-navigation-section__wrapper{height:100%;padding-block:var(--sbb-navigation-section-padding-block);outline:none;overflow-y:auto}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-closing),[state--state-closing]))) .sbb-navigation-section__wrapper{--sbb-scrollbar-color: transparent;scrollbar-color:transparent transparent}.sbb-navigation-section__header{position:relative;display:flex;align-items:center;gap:var(--sbb-spacing-fixed-1x);margin-block-start:var(--sbb-spacing-responsive-xxl);padding-inline-start:var(--sbb-navigation-section-content-padding-inline-start)}@media(min-width:64rem){.sbb-navigation-section__header{margin-block-start:0;padding-inline-start:0}}@media(min-width:90rem){.sbb-navigation-section__header{grid-column:1/4}}.sbb-navigation-section__back{position:absolute;translate:calc((100% + var(--sbb-spacing-fixed-1x)) * -1) 0}@media(min-width:64rem){.sbb-navigation-section__back{display:none}}.sbb-navigation-section__title{margin-block:var(--sbb-title-margin-block, 0);margin-inline:0;font-family:var(--sbb-typo-font-family);font-weight:700;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);--sbb-title-font-size: var(--sbb-title-font-size-level-4-lean, var(--sbb-heading-font-size-4))}@media(min-width:64rem){.sbb-navigation-section__title{--sbb-title-font-size: var(--sbb-title-font-size-level-2-lean, var(--sbb-heading-font-size-2))}}.sbb-navigation-section__content{display:grid;grid-template-columns:1fr;gap:var(--sbb-spacing-responsive-l) var(--sbb-grid-base-gutter-responsive);padding-inline:var(--sbb-navigation-section-padding-inline)}@media(min-width:64rem){.sbb-navigation-section__content{opacity:0;translate:0 var(--sbb-spacing-fixed-3x);transition-duration:var(--sbb-navigation-section-animation-duration);transition-delay:var(--sbb-navigation-section-animation-duration);transition-timing-function:var(--sbb-navigation-section-animation-easing);transition-property:opacity,translate}:host(:is(:state(state-opened),[state--state-opened])) .sbb-navigation-section__content{opacity:1;translate:0 0}}@media(min-width:90rem){.sbb-navigation-section__content{grid-template-columns:repeat(3,1fr)}}:host(:is(:state(state-closing),[state--state-closing])) .sbb-navigation-section__content{transition-delay:0s}@keyframes open{0%{translate:var(--sbb-navigation-section-translate) 0}to{translate:0 0}}@keyframes close{0%{translate:0 0}to{translate:var(--sbb-navigation-section-translate) 0}}", E = (() => {
+	let E = p(f), D, O = [], k = [], A, j = [], M = [], N, P = [], F = [], I, L = [], R = [];
+	return class extends E {
 		static {
-			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(D[Symbol.metadata] ?? null) : void 0;
-			O = [h(), o({
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(E[Symbol.metadata] ?? null) : void 0;
+			D = [h(), o({
 				attribute: "title-content",
 				reflect: !0,
 				converter: y
-			})], j = [_(), o()], P = [h(), o({ attribute: "accessibility-label" })], L = [h(), o({ attribute: "accessibility-back-label" })], e(this, null, O, {
+			})], A = [_(), o()], N = [h(), o({ attribute: "accessibility-label" })], I = [h(), o({ attribute: "accessibility-back-label" })], e(this, null, D, {
 				kind: "accessor",
 				name: "titleContent",
 				static: !1,
@@ -26,7 +26,7 @@ var T = ":host{--sbb-navigation-section-display: none;--sbb-navigation-section-c
 					}
 				},
 				metadata: t
-			}, k, A), e(this, null, j, {
+			}, O, k), e(this, null, A, {
 				kind: "accessor",
 				name: "trigger",
 				static: !1,
@@ -39,7 +39,7 @@ var T = ":host{--sbb-navigation-section-display: none;--sbb-navigation-section-c
 					}
 				},
 				metadata: t
-			}, M, N), e(this, null, P, {
+			}, j, M), e(this, null, N, {
 				kind: "accessor",
 				name: "accessibilityLabel",
 				static: !1,
@@ -52,7 +52,7 @@ var T = ":host{--sbb-navigation-section-display: none;--sbb-navigation-section-c
 					}
 				},
 				metadata: t
-			}, F, I), e(this, null, L, {
+			}, P, F), e(this, null, I, {
 				kind: "accessor",
 				name: "accessibilityBackLabel",
 				static: !1,
@@ -65,7 +65,7 @@ var T = ":host{--sbb-navigation-section-display: none;--sbb-navigation-section-c
 					}
 				},
 				metadata: t
-			}, R, z), t && Object.defineProperty(this, Symbol.metadata, {
+			}, L, R), t && Object.defineProperty(this, Symbol.metadata, {
 				enumerable: !0,
 				configurable: !0,
 				writable: !0,
@@ -116,7 +116,7 @@ var T = ":host{--sbb-navigation-section-display: none;--sbb-navigation-section-c
 			return super.state;
 		}
 		constructor() {
-			super(), this.#e = t(this, k, ""), this.#t = (t(this, A), t(this, M, null)), this.#n = (t(this, N), t(this, F, "")), this.#r = (t(this, I), t(this, R, "")), this._firstLevelNavigation = (t(this, z), null), this._triggerElement = null, this._language = new l(this), this._focusTrapController = new c(this), this._lastKeydownEvent = null, this._mediaMatcherController = new u(this, { [d]: (e) => {
+			super(), this.#e = t(this, O, ""), this.#t = (t(this, k), t(this, j, null)), this.#n = (t(this, M), t(this, P, "")), this.#r = (t(this, F), t(this, L, "")), this._firstLevelNavigation = (t(this, R), null), this._triggerElement = null, this._language = new l(this), this._focusTrapController = new c(this), this._lastKeydownEvent = null, this._mediaMatcherController = new u(this, { [d]: (e) => {
 				this.state !== "closed" && this._setNavigationInert(e);
 			} }), this._handleNavigationSectionClose = (e) => {
 				e.composedPath().filter((e) => e instanceof HTMLElement).some((e) => this._isCloseElement(e)) && this.close();
@@ -130,7 +130,7 @@ var T = ":host{--sbb-navigation-section-display: none;--sbb-navigation-section-c
 			});
 		}
 		open() {
-			this.state !== "closed" || !this.hasUpdated || !this.dispatchBeforeOpenEvent() || (this._isNavigationButton(this._triggerElement) && this._triggerElement?.marker?.select(this._triggerElement), this._closePreviousNavigationSection(), this.state = "opening", this.dispatchEvent(new Event("ɵnavigationsectionopening")), this.startUpdate(), this.inert = !0, this._triggerElement?.setAttribute("aria-expanded", "true"), this._isZeroAnimationDuration() && this._handleOpening());
+			this.state !== "closed" || !this.hasUpdated || !this.dispatchBeforeOpenEvent() || (this._isNavigationButton(this._triggerElement) && this._triggerElement?.marker?.select(this._triggerElement), this._closePreviousNavigationSection(), this.state = "opening", this.dispatchEvent(new Event("ɵnavigationsectionopening")), this.startUpdate(), this.inert = !0, this._triggerElement && (this._triggerElement.ariaExpanded = "true"), this._isZeroAnimationDuration() && this._handleOpening());
 		}
 		_isZeroAnimationDuration() {
 			return v(this, "--sbb-navigation-section-animation-duration");
@@ -145,10 +145,10 @@ var T = ":host{--sbb-navigation-section-display: none;--sbb-navigation-section-c
 			this._firstLevelNavigation?.activeNavigationSection?.close();
 		}
 		close() {
-			this.state !== "opened" || !this.dispatchBeforeCloseEvent() || (this.dispatchEvent(new Event("ɵnavigationsectionclosing")), this.state = "closing", this.startUpdate(), this.inert = !0, this._triggerElement?.setAttribute("aria-expanded", "false"), this._isZeroAnimationDuration() && this._handleClosing());
+			this.state !== "opened" || !this.dispatchBeforeCloseEvent() || (this.dispatchEvent(new Event("ɵnavigationsectionclosing")), this.state = "closing", this.startUpdate(), this.inert = !0, this._triggerElement && (this._triggerElement.ariaExpanded = "false"), this._isZeroAnimationDuration() && this._handleClosing());
 		}
 		_configureTrigger() {
-			this.trigger !== this._triggerElement && (this._triggerAbortController?.abort(), b(this._triggerElement), this._triggerElement = this.trigger, this._triggerElement && (S(this._triggerElement, "menu", this.id, this.state), this._triggerAbortController = new AbortController(), this._isNavigationButton(this._triggerElement) && (this._triggerElement.connectedSection = this), this._triggerElement.addEventListener("click", () => this.open(), { signal: this._triggerAbortController.signal }), this._firstLevelNavigation = this._triggerElement?.closest?.("sbb-navigation")));
+			this.trigger !== this._triggerElement && (this._triggerAbortController?.abort(), b(this._triggerElement), this._triggerElement = this.trigger, this._triggerElement && (S(this, this._triggerElement, "menu", this.state), this._triggerAbortController = new AbortController(), this._isNavigationButton(this._triggerElement) && (this._triggerElement.connectedSection = this), this._triggerElement.addEventListener("click", () => this.open(), { signal: this._triggerAbortController.signal }), this._firstLevelNavigation = this._triggerElement?.closest?.("sbb-navigation")));
 		}
 		_isNavigationButton(e) {
 			return e?.localName === "sbb-navigation-button";
@@ -179,7 +179,7 @@ var T = ":host{--sbb-navigation-section-display: none;--sbb-navigation-section-c
 			C(this.querySelector(":is(sbb-navigation-button, sbb-navigation-link).sbb-active"))?.toggle("action-active", !0);
 		}
 		connectedCallback() {
-			super.connectedCallback(), this.slot ||= "navigation-section", this.id ||= `sbb-navigation-section-${E++}`, this.hasUpdated && this._configureTrigger();
+			super.connectedCallback(), this.slot ||= "navigation-section", this.hasUpdated && this._configureTrigger();
 		}
 		disconnectedCallback() {
 			super.disconnectedCallback(), this._triggerElement = null, this._triggerAbortController?.abort(), this._windowEventsController?.abort();
@@ -228,4 +228,4 @@ var T = ":host{--sbb-navigation-section-display: none;--sbb-navigation-section-c
 	};
 })();
 //#endregion
-export { D as t };
+export { E as t };

package/{navigation.component-Cnyb5_4R.js → navigation.component-Bym1kjzt.js}

@@ -1,17 +1,17 @@
 import { __esDecorate as e, __runInitializers as t } from "tslib";
 import { html as n, isServer as r, unsafeCSS as i } from "lit";
 import { property as a, state as o } from "lit/decorators.js";
-import { SbbEscapableOverlayController as s, SbbFocusTrapController as c, SbbInertController as l, SbbLanguageController as u, SbbOpenCloseBaseElement as d, SbbScrollHandler as f, SbbUpdateSchedulerMixin as p, boxSizingStyles as m, forceType as h, i18nCloseNavigation as g, idReference as _, isEventOnElement as v, isZeroAnimationDuration as y, removeAriaOverlayTriggerAttributes as b, setAriaOverlayTriggerAttributes as x } from "./core.js";
+import { SbbEscapableOverlayController as s, SbbFocusTrapController as c, SbbInertController as l, SbbLanguageController as u, SbbOpenCloseBaseElement as d, SbbScrollHandler as f, SbbUpdateSchedulerMixin as p, boxSizingStyles as m, forceType as h, i18nCloseNavigation as g, idReference as _, isEventOnElement as v, isZeroAnimationDuration as y, removeAriaOverlayTriggerProperties as b, setAriaOverlayTriggerProperties as x } from "./core.js";
 import { SbbTransparentButtonElement as S } from "./button.pure.js";
 import { ResizeController as C } from "@lit-labs/observers/resize-controller.js";
 import { ref as w } from "lit/directives/ref.js";
 //#region src/elements/navigation/navigation/navigation.scss?inline
-var T = ":host{--sbb-navigation-grid-column: 1 / -1;--sbb-navigation-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-3x) );--sbb-navigation-animation-easing: ease-in;--sbb-navigation-padding-inline: var(--sbb-layout-base-offset-responsive);--sbb-navigation-padding-block-start: var(--sbb-spacing-responsive-l);--sbb-navigation-padding-block-end: var(--sbb-spacing-responsive-xl);--sbb-navigation-backdrop-visibility: hidden;--sbb-navigation-backdrop-pointer-events: none;--sbb-navigation-backdrop-color: color-mix(in srgb, var(--sbb-color-black) 70%, transparent);--sbb-navigation-backdrop-animation-name: backdrop-open;--sbb-navigation-background-color: var(--sbb-background-color-1-negative);--sbb-navigation-color: var(--sbb-color-1-negative);--sbb-navigation-list-margin-block-start: var(--sbb-spacing-responsive-xxl);--sbb-navigation-inline-start: 0;--sbb-navigation-expanded-width: 100%;--sbb-navigation-inset: 0 auto auto 0;--sbb-navigation-translate: -100% 0;--sbb-navigation-content-translate: 0;--sbb-navigation-width: 100%;--sbb-navigation-height: 100dvh;--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);display:none;position:fixed;inset:var(--sbb-navigation-inset);z-index:var(--sbb-navigation-z-index, var(--sbb-overlay-default-z-index));overflow:hidden}@media(min-width:64rem){:host{--sbb-navigation-grid-column: 1 / 5;--sbb-navigation-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-6x) );--sbb-navigation-padding-block-start: var(--sbb-spacing-responsive-xl);--sbb-navigation-padding-inline: var(--sbb-layout-base-offset-responsive) 0;--sbb-navigation-list-margin-block-start: var(--sbb-spacing-fixed-1x);--sbb-navigation-inline-start: calc(var(--sbb-layout-base-offset-responsive) * -1);--sbb-navigation-width: calc(100% + var(--sbb-layout-base-offset-responsive))}}@media(min-width:90rem){:host{--sbb-navigation-grid-column: 1 / 6;--sbb-navigation-padding-block-start: var(--sbb-spacing-responsive-xxl)}}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))){display:block}:host(:is(:state(state-opened),[state--state-opened])){--sbb-navigation-animation-easing: ease-out}:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-opening),[state--state-opening]))){--sbb-navigation-backdrop-visibility: visible;--sbb-navigation-backdrop-pointer-events: all}:host(:not(:is(:state(state-closed),[state--state-closed]))){--sbb-navigation-inset: 0;--sbb-navigation-translate: }:host(:is(:state(state-closing),[state--state-closing])){--sbb-navigation-backdrop-animation-name: backdrop-close}:host(:is(:state(has-open-navigation-section),[state--has-open-navigation-section])){--sbb-navigation-content-translate: -100% 0}@media(min-width:64rem){:host(:is(:state(has-open-navigation-section),[state--has-open-navigation-section])){--sbb-navigation-expanded-width: 100dvw;--sbb-navigation-content-translate: 0}}:host(:is(:state(resize-disable-animation),[state--resize-disable-animation])){--sbb-disable-animation-duration: 0s}.sbb-navigation__container{display:grid;gap:var(--sbb-grid-base-gutter-responsive);grid-template-columns:repeat(var(--sbb-grid-base-columns),1fr);padding-inline:0;pointer-events:none;translate:var(--sbb-navigation-translate)}@media(min-width:64rem){.sbb-navigation__container{padding-inline:var(--sbb-layout-base-offset-responsive)}.sbb-navigation__container:before{transition-duration:var(--sbb-navigation-animation-duration);transition-timing-function:var(--sbb-navigation-animation-easing);transition-property:visibility;animation-name:var(--sbb-navigation-backdrop-animation-name);animation-duration:var(--sbb-navigation-animation-duration);animation-timing-function:var(--sbb-navigation-animation-easing);content:\"\";visibility:var(--sbb-navigation-backdrop-visibility);pointer-events:var(--sbb-navigation-backdrop-pointer-events);position:fixed;inset:var(--sbb-navigation-inset);background-color:var(--sbb-navigation-backdrop-color)}}.sbb-navigation{transition-duration:var(--sbb-navigation-animation-duration);transition-timing-function:var(--sbb-navigation-animation-easing);transition-property:width;display:none;width:var(--sbb-navigation-width);grid-column:var(--sbb-navigation-grid-column);padding:0;margin:0;position:relative;inset-inline-start:var(--sbb-navigation-inline-start);inset-block-start:0;border:none;pointer-events:none;height:var(--sbb-navigation-height);color:var(--sbb-navigation-color);background-color:var(--sbb-navigation-background-color)}.sbb-navigation:before{transition-duration:var(--sbb-navigation-animation-duration);transition-timing-function:var(--sbb-navigation-animation-easing);transition-property:width;content:\"\";position:absolute;width:var(--sbb-navigation-expanded-width);height:var(--sbb-navigation-height);background:var(--sbb-navigation-background-color)}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))) .sbb-navigation{display:block;pointer-events:all;animation-name:open;animation-duration:var(--sbb-navigation-animation-duration);animation-timing-function:var(--sbb-navigation-animation-easing)}:host(:is(:state(state-closing),[state--state-closing])) .sbb-navigation{pointer-events:none;animation-name:close}@media(forced-colors:active){.sbb-navigation{outline:var(--sbb-border-width-1x) solid CanvasText}}.sbb-navigation__wrapper{outline:none}.sbb-navigation__header{transition-duration:var(--sbb-navigation-animation-duration);transition-timing-function:var(--sbb-navigation-animation-easing);transition-property:width;display:flex;justify-content:flex-end;position:absolute;width:var(--sbb-navigation-expanded-width);pointer-events:none;padding:var(--sbb-spacing-responsive-xs);z-index:calc(var(--sbb-navigation-z-index, var(--sbb-overlay-default-z-index)) + 1)}.sbb-navigation__close{pointer-events:all}.sbb-navigation__content{transition-duration:var(--sbb-navigation-animation-duration);transition-timing-function:var(--sbb-navigation-animation-easing);transition-property:translate;--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-white) 30%, transparent);--sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-white) 60%, transparent);--sbb-scrollbar-track-color: transparent;--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-navigation__content::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-navigation__content::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-navigation__content::-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-navigation__content::-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-navigation__content::-webkit-scrollbar-button,.sbb-navigation__content::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-navigation__content{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-navigation__content{display:flex;flex-direction:column;gap:var(--sbb-spacing-responsive-xxl);position:relative;height:var(--sbb-navigation-height);padding-inline:var(--sbb-navigation-padding-inline);padding-block:var(--sbb-navigation-padding-block-start) var(--sbb-navigation-padding-block-end);overflow-y:auto;translate:var(--sbb-navigation-content-translate)}::slotted(:first-child){margin-block-start:var(--sbb-navigation-list-margin-block-start)}@keyframes open{0%{translate:-100% 0}to{translate:0}}@keyframes close{0%{translate:0}to{translate:-100% 0}}@keyframes backdrop-open{0%{background-color:transparent}}@keyframes backdrop-close{to{background-color:transparent}}", E = 0, D = 150, O = (() => {
-	let O = p(d), k, A = [], j = [], M, N = [], P = [], F, I = [], L = [];
-	return class extends O {
+var T = ":host{--sbb-navigation-grid-column: 1 / -1;--sbb-navigation-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-3x) );--sbb-navigation-animation-easing: ease-in;--sbb-navigation-padding-inline: var(--sbb-layout-base-offset-responsive);--sbb-navigation-padding-block-start: var(--sbb-spacing-responsive-l);--sbb-navigation-padding-block-end: var(--sbb-spacing-responsive-xl);--sbb-navigation-backdrop-visibility: hidden;--sbb-navigation-backdrop-pointer-events: none;--sbb-navigation-backdrop-color: color-mix(in srgb, var(--sbb-color-black) 70%, transparent);--sbb-navigation-backdrop-animation-name: backdrop-open;--sbb-navigation-background-color: var(--sbb-background-color-1-negative);--sbb-navigation-color: var(--sbb-color-1-negative);--sbb-navigation-list-margin-block-start: var(--sbb-spacing-responsive-xxl);--sbb-navigation-inline-start: 0;--sbb-navigation-expanded-width: 100%;--sbb-navigation-inset: 0 auto auto 0;--sbb-navigation-translate: -100% 0;--sbb-navigation-content-translate: 0;--sbb-navigation-width: 100%;--sbb-navigation-height: 100dvh;--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);display:none;position:fixed;inset:var(--sbb-navigation-inset);z-index:var(--sbb-navigation-z-index, var(--sbb-overlay-default-z-index));overflow:hidden}@media(min-width:64rem){:host{--sbb-navigation-grid-column: 1 / 5;--sbb-navigation-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-6x) );--sbb-navigation-padding-block-start: var(--sbb-spacing-responsive-xl);--sbb-navigation-padding-inline: var(--sbb-layout-base-offset-responsive) 0;--sbb-navigation-list-margin-block-start: var(--sbb-spacing-fixed-1x);--sbb-navigation-inline-start: calc(var(--sbb-layout-base-offset-responsive) * -1);--sbb-navigation-width: calc(100% + var(--sbb-layout-base-offset-responsive))}}@media(min-width:90rem){:host{--sbb-navigation-grid-column: 1 / 6;--sbb-navigation-padding-block-start: var(--sbb-spacing-responsive-xxl)}}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))){display:block}:host(:is(:state(state-opened),[state--state-opened])){--sbb-navigation-animation-easing: ease-out}:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-opening),[state--state-opening]))){--sbb-navigation-backdrop-visibility: visible;--sbb-navigation-backdrop-pointer-events: all}:host(:not(:is(:state(state-closed),[state--state-closed]))){--sbb-navigation-inset: 0;--sbb-navigation-translate: }:host(:is(:state(state-closing),[state--state-closing])){--sbb-navigation-backdrop-animation-name: backdrop-close}:host(:is(:state(has-open-navigation-section),[state--has-open-navigation-section])){--sbb-navigation-content-translate: -100% 0}@media(min-width:64rem){:host(:is(:state(has-open-navigation-section),[state--has-open-navigation-section])){--sbb-navigation-expanded-width: 100dvw;--sbb-navigation-content-translate: 0}}:host(:is(:state(resize-disable-animation),[state--resize-disable-animation])){--sbb-disable-animation-duration: 0s}.sbb-navigation__container{display:grid;gap:var(--sbb-grid-base-gutter-responsive);grid-template-columns:repeat(var(--sbb-grid-base-columns),1fr);padding-inline:0;pointer-events:none;translate:var(--sbb-navigation-translate)}@media(min-width:64rem){.sbb-navigation__container{padding-inline:var(--sbb-layout-base-offset-responsive)}.sbb-navigation__container:before{transition-duration:var(--sbb-navigation-animation-duration);transition-timing-function:var(--sbb-navigation-animation-easing);transition-property:visibility;animation-name:var(--sbb-navigation-backdrop-animation-name);animation-duration:var(--sbb-navigation-animation-duration);animation-timing-function:var(--sbb-navigation-animation-easing);content:\"\";visibility:var(--sbb-navigation-backdrop-visibility);pointer-events:var(--sbb-navigation-backdrop-pointer-events);position:fixed;inset:var(--sbb-navigation-inset);background-color:var(--sbb-navigation-backdrop-color)}}.sbb-navigation{transition-duration:var(--sbb-navigation-animation-duration);transition-timing-function:var(--sbb-navigation-animation-easing);transition-property:width;display:none;width:var(--sbb-navigation-width);grid-column:var(--sbb-navigation-grid-column);padding:0;margin:0;position:relative;inset-inline-start:var(--sbb-navigation-inline-start);inset-block-start:0;border:none;pointer-events:none;height:var(--sbb-navigation-height);color:var(--sbb-navigation-color);background-color:var(--sbb-navigation-background-color)}.sbb-navigation:before{transition-duration:var(--sbb-navigation-animation-duration);transition-timing-function:var(--sbb-navigation-animation-easing);transition-property:width;content:\"\";position:absolute;width:var(--sbb-navigation-expanded-width);height:var(--sbb-navigation-height);background:var(--sbb-navigation-background-color)}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))) .sbb-navigation{display:block;pointer-events:all;animation-name:open;animation-duration:var(--sbb-navigation-animation-duration);animation-timing-function:var(--sbb-navigation-animation-easing)}:host(:is(:state(state-closing),[state--state-closing])) .sbb-navigation{pointer-events:none;animation-name:close}@media(forced-colors:active){.sbb-navigation{outline:var(--sbb-border-width-1x) solid CanvasText}}.sbb-navigation__wrapper{outline:none}.sbb-navigation__header{transition-duration:var(--sbb-navigation-animation-duration);transition-timing-function:var(--sbb-navigation-animation-easing);transition-property:width;display:flex;justify-content:flex-end;position:absolute;width:var(--sbb-navigation-expanded-width);pointer-events:none;padding:var(--sbb-spacing-responsive-xs);z-index:calc(var(--sbb-navigation-z-index, var(--sbb-overlay-default-z-index)) + 1)}.sbb-navigation__close{pointer-events:all}.sbb-navigation__content{transition-duration:var(--sbb-navigation-animation-duration);transition-timing-function:var(--sbb-navigation-animation-easing);transition-property:translate;--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-white) 30%, transparent);--sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-white) 60%, transparent);--sbb-scrollbar-track-color: transparent;--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-navigation__content::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-navigation__content::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-navigation__content::-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-navigation__content::-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-navigation__content::-webkit-scrollbar-button,.sbb-navigation__content::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-navigation__content{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-navigation__content{display:flex;flex-direction:column;gap:var(--sbb-spacing-responsive-xxl);position:relative;height:var(--sbb-navigation-height);padding-inline:var(--sbb-navigation-padding-inline);padding-block:var(--sbb-navigation-padding-block-start) var(--sbb-navigation-padding-block-end);overflow-y:auto;translate:var(--sbb-navigation-content-translate)}::slotted(:first-child){margin-block-start:var(--sbb-navigation-list-margin-block-start)}@keyframes open{0%{translate:-100% 0}to{translate:0}}@keyframes close{0%{translate:0}to{translate:-100% 0}}@keyframes backdrop-open{0%{background-color:transparent}}@keyframes backdrop-close{to{background-color:transparent}}", E = 150, D = (() => {
+	let D = p(d), O, k = [], A = [], j, M = [], N = [], P, F = [], I = [];
+	return class extends D {
 		static {
-			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(O[Symbol.metadata] ?? null) : void 0;
-			k = [_(), a()], M = [h(), a({ attribute: "accessibility-close-label" })], F = [o()], e(this, null, k, {
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(D[Symbol.metadata] ?? null) : void 0;
+			O = [_(), a()], j = [h(), a({ attribute: "accessibility-close-label" })], P = [o()], e(this, null, O, {
 				kind: "accessor",
 				name: "trigger",
 				static: !1,
@@ -24,7 +24,7 @@ var T = ":host{--sbb-navigation-grid-column: 1 / -1;--sbb-navigation-animation-d
 					}
 				},
 				metadata: t
-			}, A, j), e(this, null, M, {
+			}, k, A), e(this, null, j, {
 				kind: "accessor",
 				name: "accessibilityCloseLabel",
 				static: !1,
@@ -37,7 +37,7 @@ var T = ":host{--sbb-navigation-grid-column: 1 / -1;--sbb-navigation-animation-d
 					}
 				},
 				metadata: t
-			}, N, P), e(this, null, F, {
+			}, M, N), e(this, null, P, {
 				kind: "accessor",
 				name: "_activeNavigationSection",
 				static: !1,
@@ -50,7 +50,7 @@ var T = ":host{--sbb-navigation-grid-column: 1 / -1;--sbb-navigation-animation-d
 					}
 				},
 				metadata: t
-			}, I, L), t && Object.defineProperty(this, Symbol.metadata, {
+			}, F, I), t && Object.defineProperty(this, Symbol.metadata, {
 				enumerable: !0,
 				configurable: !0,
 				writable: !0,
@@ -100,7 +100,7 @@ var T = ":host{--sbb-navigation-grid-column: 1 / -1;--sbb-navigation-animation-d
 			return this.shadowRoot?.querySelector(".sbb-navigation__content") ?? null;
 		}
 		constructor() {
-			super(), this.#e = t(this, A, null), this.#t = (t(this, j), t(this, N, "")), this.#n = (t(this, P), t(this, I, null)), this._navigation = t(this, L), this._triggerElement = null, this._language = new u(this), this._inertController = new l(this), this._escapableOverlayController = new s(this), this._focusTrapController = new c(this), this._scrollHandler = new f(), this._isPointerDownEventOnNavigation = !1, this._resizeObserverTimeout = null, this._navigationResizeObserver = new C(this, {
+			super(), this.#e = t(this, k, null), this.#t = (t(this, A), t(this, M, "")), this.#n = (t(this, N), t(this, F, null)), this._navigation = t(this, I), this._triggerElement = null, this._language = new u(this), this._inertController = new l(this), this._escapableOverlayController = new s(this), this._focusTrapController = new c(this), this._scrollHandler = new f(), this._isPointerDownEventOnNavigation = !1, this._resizeObserverTimeout = null, this._navigationResizeObserver = new C(this, {
 				skipInitial: !0,
 				callback: () => this._onNavigationResize()
 			}), this._pointerDownListener = (e) => {
@@ -114,7 +114,7 @@ var T = ":host{--sbb-navigation-grid-column: 1 / -1;--sbb-navigation-animation-d
 			}, { capture: !0 });
 		}
 		open() {
-			this.state !== "closed" || !this.hasUpdated || !this.dispatchBeforeOpenEvent() || (this.showPopover?.(), this.state = "opening", this._checkActiveActions(), this._checkActiveSection(), this.startUpdate(), this._scrollHandler.disableScroll(), this._triggerElement?.setAttribute("aria-expanded", "true"), this._isZeroAnimationDuration() && this._handleOpening());
+			this.state !== "closed" || !this.hasUpdated || !this.dispatchBeforeOpenEvent() || (this.showPopover?.(), this.state = "opening", this._checkActiveActions(), this._checkActiveSection(), this.startUpdate(), this._scrollHandler.disableScroll(), this._triggerElement && (this._triggerElement.ariaExpanded = "true"), this._isZeroAnimationDuration() && this._handleOpening());
 		}
 		_checkActiveSection() {
 			this.querySelector("sbb-navigation-button.sbb-active")?.connectedSection?.open();
@@ -123,7 +123,7 @@ var T = ":host{--sbb-navigation-grid-column: 1 / -1;--sbb-navigation-animation-d
 			Array.from(this.querySelectorAll(":is(sbb-navigation-button, sbb-navigation-link).sbb-active"))?.forEach((e) => e.marker?.select(e));
 		}
 		close() {
-			this.state !== "opened" || !this.dispatchBeforeCloseEvent() || (this.state = "closing", this.startUpdate(), this._triggerElement?.setAttribute("aria-expanded", "false"), this._isZeroAnimationDuration() && this._handleClosing());
+			this.state !== "opened" || !this.dispatchBeforeCloseEvent() || (this.state = "closing", this.startUpdate(), this._triggerElement && (this._triggerElement.ariaExpanded = "false"), this._isZeroAnimationDuration() && this._handleClosing());
 		}
 		_isZeroAnimationDuration() {
 			return y(this, "--sbb-navigation-animation-duration");
@@ -135,7 +135,7 @@ var T = ":host{--sbb-navigation-grid-column: 1 / -1;--sbb-navigation-animation-d
 			this.state = "opened", this._navigationResizeObserver.observe(this), this._inertController.activate(), this._escapableOverlayController.connect(), this._focusTrapController.focusInitialElement(), this._focusTrapController.enabled = !0, this.completeUpdate(), this.dispatchOpenEvent();
 		}
 		_configureTrigger() {
-			this.trigger !== this._triggerElement && (this._triggerAbortController?.abort(), b(this._triggerElement), this._triggerElement = this.trigger, this._triggerElement && (x(this._triggerElement, "menu", this.id, this.state), this._triggerAbortController = new AbortController(), this._triggerElement.addEventListener("click", () => this.open(), { signal: this._triggerAbortController.signal })));
+			this.trigger !== this._triggerElement && (this._triggerAbortController?.abort(), b(this._triggerElement), this._triggerElement = this.trigger, this._triggerElement && (x(this, this._triggerElement, "menu", this.state), this._triggerAbortController = new AbortController(), this._triggerElement.addEventListener("click", () => this.open(), { signal: this._triggerAbortController.signal })));
 		}
 		_onAnimationEnd(e) {
 			e.animationName === "open" && this.state === "opening" ? this._handleOpening() : e.animationName === "close" && this.state === "closing" && this._handleClosing();
@@ -150,10 +150,10 @@ var T = ":host{--sbb-navigation-grid-column: 1 / -1;--sbb-navigation-animation-d
 			return e.nodeName === "A" || e.hasAttribute("sbb-navigation-close") && !e.hasAttribute("disabled");
 		}
 		_onNavigationResize() {
-			this.state === "opened" && (this._resizeObserverTimeout && clearTimeout(this._resizeObserverTimeout), this.internals.states.add("resize-disable-animation"), this._resizeObserverTimeout = setTimeout(() => this.internals.states.delete("resize-disable-animation"), D));
+			this.state === "opened" && (this._resizeObserverTimeout && clearTimeout(this._resizeObserverTimeout), this.internals.states.add("resize-disable-animation"), this._resizeObserverTimeout = setTimeout(() => this.internals.states.delete("resize-disable-animation"), E));
 		}
 		connectedCallback() {
-			super.connectedCallback(), this.popover = "manual", this.id ||= `sbb-navigation-${E++}`, this.hasUpdated && this._configureTrigger();
+			super.connectedCallback(), this.popover = "manual", this.hasUpdated && this._configureTrigger();
 		}
 		disconnectedCallback() {
 			super.disconnectedCallback(), this._triggerElement = null, this._triggerAbortController?.abort(), this._scrollHandler.enableScroll();
@@ -200,4 +200,4 @@ var T = ":host{--sbb-navigation-grid-column: 1 / -1;--sbb-navigation-animation-d
 	};
 })();
 //#endregion
-export { O as t };
+export { D as t };

package/navigation.js

@@ -3,8 +3,8 @@ import { SbbNavigationButtonElement as t } from "./navigation/navigation-button/
 import { SbbNavigationLinkElement as n } from "./navigation/navigation-link/navigation-link.component.js";
 import { t as r } from "./navigation-list.component-DQeyXtOA.js";
 import { t as i } from "./navigation-marker.component-1VHe19c9.js";
-import { t as a } from "./navigation-section.component-CLcdmPV3.js";
-import { t as o } from "./navigation.component-Cnyb5_4R.js";
+import { t as a } from "./navigation-section.component-Db2MWBDn.js";
+import { t as o } from "./navigation.component-Bym1kjzt.js";
 import "./navigation.pure.js";
 o.define(), t.define(), n.define(), r.define(), i.define(), a.define();
 //#endregion

package/navigation.pure.js

@@ -3,6 +3,6 @@ import { SbbNavigationButtonElement as t } from "./navigation/navigation-button/
 import { SbbNavigationLinkElement as n } from "./navigation/navigation-link/navigation-link.component.js";
 import { t as r } from "./navigation-list.component-DQeyXtOA.js";
 import { t as i } from "./navigation-marker.component-1VHe19c9.js";
-import { t as a } from "./navigation-section.component-CLcdmPV3.js";
-import { t as o } from "./navigation.component-Cnyb5_4R.js";
+import { t as a } from "./navigation-section.component-Db2MWBDn.js";
+import { t as o } from "./navigation.component-Bym1kjzt.js";
 export { e as SbbNavigationActionCommonElementMixin, t as SbbNavigationButtonElement, o as SbbNavigationElement, n as SbbNavigationLinkElement, r as SbbNavigationListElement, i as SbbNavigationMarkerElement, a as SbbNavigationSectionElement };

package/overlay/overlay-base-element.js

@@ -1,7 +1,7 @@
 import { __esDecorate as e, __runInitializers as t } from "tslib";
 import { isServer as n } from "lit";
 import { property as r } from "lit/decorators.js";
-import { SbbEscapableOverlayController as i, SbbFocusTrapController as a, SbbInertController as o, SbbLanguageController as s, SbbNegativeMixin as c, SbbOpenCloseBaseElement as l, SbbScrollHandler as u, forceType as d, i18nDialog as f, idReference as p, removeAriaOverlayTriggerAttributes as m, setAriaOverlayTriggerAttributes as h } from "../core.js";
+import { SbbEscapableOverlayController as i, SbbFocusTrapController as a, SbbInertController as o, SbbLanguageController as s, SbbNegativeMixin as c, SbbOpenCloseBaseElement as l, SbbScrollHandler as u, forceType as d, i18nDialog as f, idReference as p, removeAriaOverlayTriggerProperties as m, setAriaOverlayTriggerProperties as h } from "../core.js";
 //#region src/elements/overlay/overlay-base-element.ts
 var g = /* @__PURE__ */ new WeakMap(), _ = class extends CustomEvent {
 	constructor(e, { cancelable: t, closeAttribute: n, closeTarget: r, result: i }) {
@@ -93,13 +93,13 @@ var y = [], b = (() => {
 			this.#n = e;
 		}
 		open() {
-			this.state === "opening" || this.state === "opened" || this._hasClosedParent() || !this.dispatchBeforeOpenEvent() || (this.lastFocusedElement = document.activeElement, this.showPopover?.(), this.state = "opening", this._triggerElement?.setAttribute("aria-expanded", "true"), y.push(this), this.scrollHandler.disableScroll(), this.escapableOverlayController.connect(), this.attachOpenOverlayEvents(), this.isZeroAnimationDuration() && this.handleOpening());
+			this.state === "opening" || this.state === "opened" || this._hasClosedParent() || !this.dispatchBeforeOpenEvent() || (this.lastFocusedElement = document.activeElement, this.showPopover?.(), this.state = "opening", this._triggerElement && (this._triggerElement.ariaExpanded = "true"), y.push(this), this.scrollHandler.disableScroll(), this.escapableOverlayController.connect(), this.attachOpenOverlayEvents(), this.isZeroAnimationDuration() && this.handleOpening());
 		}
 		close(e, t) {
 			this._close(e, t);
 		}
 		_close(e, t) {
-			this.state === "closing" || this.state === "closed" || (this.returnValue = e ?? null, this.overlayCloseElement = t, this.dispatchBeforeCloseEvent() && (this.state = "closing", this._triggerElement?.setAttribute("aria-expanded", "false"), this.removeAriaLiveRefContent(), this.isZeroAnimationDuration() && this.handleClosing()));
+			this.state === "closing" || this.state === "closed" || (this.returnValue = e ?? null, this.overlayCloseElement = t, this.dispatchBeforeCloseEvent() && (this.state = "closing", this._triggerElement && (this._triggerElement.ariaExpanded = "false"), this.removeAriaLiveRefContent(), this.isZeroAnimationDuration() && this.handleClosing()));
 		}
 		_hasClosedParent() {
 			let e = this.parentElement?.closest("sbb-dialog, sbb-overlay");
@@ -109,7 +109,7 @@ var y = [], b = (() => {
 			this.popover = "manual", super.connectedCallback(), this.hasUpdated && this._configureTrigger();
 		}
 		_configureTrigger() {
-			this.trigger !== this._triggerElement && (this._triggerAbortController?.abort(), m(this._triggerElement), this._triggerElement = this.trigger, this._triggerElement && (h(this._triggerElement, "dialog", this.id, this.state), this._triggerAbortController = new AbortController(), this._triggerElement.addEventListener("click", () => this.open(), { signal: this._triggerAbortController.signal })));
+			this.trigger !== this._triggerElement && (this._triggerAbortController?.abort(), m(this._triggerElement), this._triggerElement = this.trigger, this._triggerElement && (h(this, this._triggerElement, "dialog", this.state), this._triggerAbortController = new AbortController(), this._triggerElement.addEventListener("click", () => this.open(), { signal: this._triggerAbortController.signal })));
 		}
 		firstUpdated(e) {
 			super.firstUpdated(e), this._ariaLiveRef = this.shadowRoot.querySelector("sbb-screen-reader-only"), this._configureTrigger(), this.isOpen && setTimeout(() => {

package/overlay/overlay.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../overlay.component-OzDUV8t1.js";
+import { t as e } from "../overlay.component-BydJOM2r.js";
 export { e as SbbOverlayElement };

package/{overlay.component-OzDUV8t1.js → overlay.component-BydJOM2r.js}

@@ -8,18 +8,18 @@ import { SbbSecondaryButtonElement as m } from "./button.pure.js";
 import { ref as h } from "lit/directives/ref.js";
 import { SbbContainerElement as g } from "./container.pure.js";
 //#region src/elements/overlay/overlay.scss?inline
-var _ = ":host{--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-overlay-padding-block: calc( var(--sbb-spacing-fixed-14x) + var(--sbb-spacing-responsive-l) );--sbb-overlay-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-6x) );display:var(--sbb-overlay-display);position:fixed;inset:var(--sbb-overlay-inset);z-index:var(--sbb-overlay-z-index, var(--sbb-overlay-default-z-index))}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))){--sbb-overlay-display: block;--sbb-overlay-container-display: flex}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]))){--sbb-overlay-pointer-events: all}:host([negative]){--sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-white) 30%, transparent);--sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-white) 60%, transparent);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-overlay-color: var(--sbb-color-1-negative);--sbb-overlay-background-color: var(--sbb-background-color-3-negative)}:host(:not(:is(:state(state-closed),[state--state-closed]))){--sbb-overlay-inset: 0}.sbb-overlay__container{background-color:var(--sbb-overlay-background-color);pointer-events:var(--sbb-overlay-pointer-events);display:var(--sbb-overlay-container-display);align-items:center;position:fixed;inset:var(--sbb-overlay-inset)}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))) .sbb-overlay__container{animation-name:open;animation-duration:var(--sbb-overlay-animation-duration);animation-timing-function:var(--sbb-overlay-animation-easing)}:host(:is(:state(state-closing),[state--state-closing])) .sbb-overlay__container{pointer-events:none;animation-name:close}.sbb-overlay{position:absolute;inset-inline:0;margin:auto;padding:0;border:none;height:var(--sbb-overlay-height);overflow:auto;color:var(--sbb-overlay-color)}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))) .sbb-overlay{animation-name:open-move-in;animation-duration:var(--sbb-overlay-animation-duration);animation-timing-function:var(--sbb-overlay-animation-easing)}:host(:is(:state(state-closing),[state--state-closing])) .sbb-overlay{animation-name:close-move-out}.sbb-overlay__wrapper{display:flex;flex-direction:column;width:100%;height:var(--sbb-overlay-height);outline:none;position:fixed}@media(min-width:64rem){.sbb-overlay__wrapper{position:sticky;inset-block-start:0;height:auto}}.sbb-overlay__header{position:absolute;inset-inline-start:0;display:flex;pointer-events:none;align-items:start;justify-content:space-between;width:100%;padding:var(--sbb-spacing-responsive-xs);padding-block-end:0;z-index:1}.sbb-overlay__header *{pointer-events:all}.sbb-overlay__close{margin-inline-start:auto}.sbb-overlay__content{--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-overlay__content::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-overlay__content::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-overlay__content::-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-overlay__content::-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-overlay__content::-webkit-scrollbar-button,.sbb-overlay__content::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-overlay__content{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-overlay__content{height:100vh;overflow:auto;-webkit-overflow-scrolling:touch}.sbb-overlay__content-container{padding-block:var(--_sbb-overlay-padding-block)}@keyframes open{0%{opacity:0}to{opacity:1}}@keyframes open-move-in{0%{transform:translateY(var(--sbb-spacing-fixed-4x))}to{transform:translateY(0)}}@keyframes close{0%{opacity:1}to{opacity:0}}@keyframes close-move-out{0%{transform:translateY(0)}to{transform:translateY(var(--sbb-spacing-fixed-4x))}}", v = 0, y = (() => {
-	let y = e, b, x = [], S = [], C, w = [], T = [];
-	return class extends y {
+var _ = ":host{--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-overlay-padding-block: calc( var(--sbb-spacing-fixed-14x) + var(--sbb-spacing-responsive-l) );--sbb-overlay-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-6x) );display:var(--sbb-overlay-display);position:fixed;inset:var(--sbb-overlay-inset);z-index:var(--sbb-overlay-z-index, var(--sbb-overlay-default-z-index))}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))){--sbb-overlay-display: block;--sbb-overlay-container-display: flex}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]))){--sbb-overlay-pointer-events: all}:host([negative]){--sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-white) 30%, transparent);--sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-white) 60%, transparent);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-overlay-color: var(--sbb-color-1-negative);--sbb-overlay-background-color: var(--sbb-background-color-3-negative)}:host(:not(:is(:state(state-closed),[state--state-closed]))){--sbb-overlay-inset: 0}.sbb-overlay__container{background-color:var(--sbb-overlay-background-color);pointer-events:var(--sbb-overlay-pointer-events);display:var(--sbb-overlay-container-display);align-items:center;position:fixed;inset:var(--sbb-overlay-inset)}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))) .sbb-overlay__container{animation-name:open;animation-duration:var(--sbb-overlay-animation-duration);animation-timing-function:var(--sbb-overlay-animation-easing)}:host(:is(:state(state-closing),[state--state-closing])) .sbb-overlay__container{pointer-events:none;animation-name:close}.sbb-overlay{position:absolute;inset-inline:0;margin:auto;padding:0;border:none;height:var(--sbb-overlay-height);overflow:auto;color:var(--sbb-overlay-color)}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))) .sbb-overlay{animation-name:open-move-in;animation-duration:var(--sbb-overlay-animation-duration);animation-timing-function:var(--sbb-overlay-animation-easing)}:host(:is(:state(state-closing),[state--state-closing])) .sbb-overlay{animation-name:close-move-out}.sbb-overlay__wrapper{display:flex;flex-direction:column;width:100%;height:var(--sbb-overlay-height);outline:none;position:fixed}@media(min-width:64rem){.sbb-overlay__wrapper{position:sticky;inset-block-start:0;height:auto}}.sbb-overlay__header{position:absolute;inset-inline-start:0;display:flex;pointer-events:none;align-items:start;justify-content:space-between;width:100%;padding:var(--sbb-spacing-responsive-xs);padding-block-end:0;z-index:1}.sbb-overlay__header *{pointer-events:all}.sbb-overlay__close{margin-inline-start:auto}.sbb-overlay__content{--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-overlay__content::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-overlay__content::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-overlay__content::-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-overlay__content::-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-overlay__content::-webkit-scrollbar-button,.sbb-overlay__content::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-overlay__content{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-overlay__content{height:100vh;overflow:auto;-webkit-overflow-scrolling:touch}.sbb-overlay__content-container{padding-block:var(--_sbb-overlay-padding-block)}@keyframes open{0%{opacity:0}to{opacity:1}}@keyframes open-move-in{0%{transform:translateY(var(--sbb-spacing-fixed-4x))}to{transform:translateY(0)}}@keyframes close{0%{opacity:1}to{opacity:0}}@keyframes close-move-out{0%{transform:translateY(0)}to{transform:translateY(var(--sbb-spacing-fixed-4x))}}", v = (() => {
+	let v = e, y, b = [], x = [], S, C = [], w = [];
+	return class extends v {
 		constructor() {
-			super(...arguments), this.#e = i(this, x, !1), this.#t = (i(this, S), i(this, w, "")), this.closeAttribute = (i(this, T), "sbb-overlay-close"), this._overlayContentElement = null;
+			super(...arguments), this.#e = i(this, b, !1), this.#t = (i(this, x), i(this, C, "")), this.closeAttribute = (i(this, w), "sbb-overlay-close"), this._overlayContentElement = null;
 		}
 		static {
-			let e = typeof Symbol == "function" && Symbol.metadata ? Object.create(y[Symbol.metadata] ?? null) : void 0;
-			b = [l(), o({
+			let e = typeof Symbol == "function" && Symbol.metadata ? Object.create(v[Symbol.metadata] ?? null) : void 0;
+			y = [l(), o({
 				reflect: !0,
 				type: Boolean
-			})], C = [l(), o({ attribute: "accessibility-close-label" })], r(this, null, b, {
+			})], S = [l(), o({ attribute: "accessibility-close-label" })], r(this, null, y, {
 				kind: "accessor",
 				name: "expanded",
 				static: !1,
@@ -32,7 +32,7 @@ var _ = ":host{--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-
 					}
 				},
 				metadata: e
-			}, x, S), r(this, null, C, {
+			}, b, x), r(this, null, S, {
 				kind: "accessor",
 				name: "accessibilityCloseLabel",
 				static: !1,
@@ -45,7 +45,7 @@ var _ = ":host{--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-
 					}
 				},
 				metadata: e
-			}, w, T), e && Object.defineProperty(this, Symbol.metadata, {
+			}, C, w), e && Object.defineProperty(this, Symbol.metadata, {
 				enumerable: !0,
 				configurable: !0,
 				writable: !0,
@@ -87,9 +87,6 @@ var _ = ":host{--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-
 		set accessibilityCloseLabel(e) {
 			this.#t = e;
 		}
-		connectedCallback() {
-			this.id ||= `sbb-overlay-${v++}`, super.connectedCallback();
-		}
 		firstUpdated(e) {
 			super.firstUpdated(e), this.isOpen && this.setAriaLiveRefContent();
 		}
@@ -161,4 +158,4 @@ var _ = ":host{--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-
 	};
 })();
 //#endregion
-export { y as t };
+export { v as t };

package/overlay.js

@@ -1,5 +1,5 @@
 import { SbbOverlayBaseElement as e, SbbOverlayCloseEvent as t, assignOverlayResult as n, overlayRefs as r } from "./overlay/overlay-base-element.js";
-import { t as i } from "./overlay.component-OzDUV8t1.js";
+import { t as i } from "./overlay.component-BydJOM2r.js";
 import "./overlay.pure.js";
 //#region src/elements/overlay.ts
 i.define();

package/overlay.pure.js

@@ -1,3 +1,3 @@
 import { SbbOverlayBaseElement as e, SbbOverlayCloseEvent as t, assignOverlayResult as n, overlayRefs as r } from "./overlay/overlay-base-element.js";
-import { t as i } from "./overlay.component-OzDUV8t1.js";
+import { t as i } from "./overlay.component-BydJOM2r.js";
 export { e as SbbOverlayBaseElement, t as SbbOverlayCloseEvent, i as SbbOverlayElement, n as assignOverlayResult, r as overlayRefs };

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@sbb-esta/lyne-elements-dev",
-  "version": "5.0.0-next-dev.1776724490",
+  "version": "5.0.0-next-dev.1776756036",
   "description": "Lyne Design System",
   "keywords": [
     "design system",
     "web components",
     "lit",
-    "https://github.com/sbb-design-systems/lyne-components/commit/6fdb5cfbf86160512bd10736a43f0846334ff494"
+    "https://github.com/sbb-design-systems/lyne-components/commit/057f98b2eb9f3fb6ca64ca3208e2ad3c3b446678"
   ],
   "type": "module",
   "exports": {

package/popover/popover.component.js

@@ -1,2 +1,2 @@
-import { n as e, t } from "../popover.component-BfSXNxKK.js";
+import { n as e, t } from "../popover.component-Dd4rKGml.js";
 export { t as SbbPopoverBaseElement, e as SbbPopoverElement };