@sbb-esta/lyne-elements 5.0.2 → 5.2.0

package/development/navigation.pure.js

@@ -1,8 +1,928 @@
-import { t as SbbNavigationActionCommonElementMixin } from "./navigation-action-common-BdJOaItd.js";
-import { SbbNavigationButtonElement } from "./navigation/navigation-button/navigation-button.component.js";
-import { SbbNavigationLinkElement } from "./navigation/navigation-link/navigation-link.component.js";
-import { t as SbbNavigationListElement } from "./navigation-list.component-CWOSnwgm.js";
-import { t as SbbNavigationMarkerElement } from "./navigation-marker.component-D3Vbe1dH.js";
-import { t as SbbNavigationSectionElement } from "./navigation-section.component-34GEIPaN.js";
-import { t as SbbNavigationElement } from "./navigation.component-CqQuaq7V.js";
-export { SbbNavigationActionCommonElementMixin, SbbNavigationButtonElement, SbbNavigationElement, SbbNavigationLinkElement, SbbNavigationListElement, SbbNavigationMarkerElement, SbbNavigationSectionElement };
+import { html, isServer, nothing, unsafeCSS } from "lit";
+import { html as html$1 } from "lit/static-html.js";
+import { IS_FOCUSABLE_QUERY, SbbButtonBaseElement, SbbDisabledMixin, SbbElement, SbbEscapableOverlayController, SbbFocusTrapController, SbbInertController, SbbLanguageController, SbbLinkBaseElement, SbbMediaMatcherController, SbbMediaQueryBreakpointSmallAndBelow, SbbNamedSlotListMixin, SbbOpenCloseBaseElement, SbbPropertyWatcherController, SbbScrollHandler, SbbUpdateSchedulerMixin, forceType, i18nCloseNavigation, i18nGoBack, idReference, isEventOnElement, isZeroAnimationDuration, omitEmptyConverter, popoverResetStyles, removeAriaOverlayTriggerProperties, sbbInputModalityDetector, scrollbarStyles, setAriaOverlayTriggerProperties, ɵstateController } from "./core.js";
+import { SbbIconElement } from "./icon.pure.js";
+import { __esDecorate, __runInitializers } from "tslib";
+import { property, state } from "lit/decorators.js";
+import { ResizeController } from "@lit-labs/observers/resize-controller.js";
+import { SbbTransparentButtonElement } from "./button.pure.js";
+import { ref } from "lit/directives/ref.js";
+
+//#region src/elements/navigation/common/navigation-action.scss?inline
+var navigation_action_default = ":host {\n  --_sbb-navigation-action-inset-inline-start: calc(\n    (var(--sbb-size-icon-ui-small) + var(--sbb-spacing-fixed-1x)) * -1\n  );\n  --_sbb-navigation-action-inset-block-start: calc(1em * (var(--sbb-typo-line-height-text) / 2));\n  --sbb-navigation-action-transition-duration: var(\n    --sbb-disable-animation-duration,\n    var(--sbb-animation-duration-3x)\n  );\n  --sbb-navigation-cursor: var(--sbb-cursor-pointer);\n  --sbb-navigation-text-decoration: none;\n  display: block;\n  outline: none !important;\n}\n\n:host(:is(:state(section-action),[state--section-action]):is(:state(action-active),[state--action-active]).sbb-active) {\n  --sbb-navigation-action-icon-display: block;\n}\n\n:host(:is(:state(action-active),[state--action-active])) {\n  --sbb-navigation-action-color: var(--sbb-color-5);\n}\n@media (forced-colors: active) {\n  :host(:is(:state(action-active),[state--action-active])) {\n    --sbb-navigation-action-color: Highlight;\n  }\n}\n\nsbb-icon {\n  display: var(--sbb-navigation-action-icon-display);\n  position: absolute;\n  inset-inline-start: var(--_sbb-navigation-action-inset-inline-start);\n  inset-block-start: var(--_sbb-navigation-action-inset-block-start);\n  translate: 0 -50%;\n}\n\n@media (any-hover: hover) {\n  :host(:hover) {\n    --sbb-navigation-action-color: var(--sbb-color-5);\n  }\n}\n@media (forced-colors: active) {\n  :host(:is(:state(button),[state--button])) {\n    --sbb-navigation-action-color: ButtonText;\n  }\n}\n\n:host(:is(:is(:state(size-s),[state--size-s]), :is(:state(size-m),[state--size-m]))) {\n  --sbb-navigation-action-line-height: var(--sbb-typo-line-height-text);\n  --sbb-navigation-action-letter-spacing: var(--sbb-typo-letter-spacing-text);\n}\n\n:host(:is(:state(size-s),[state--size-s])) {\n  --sbb-navigation-action-font-size: var(--sbb-text-font-size-xxs);\n}\n\n:host(:is(:state(size-m),[state--size-m])) {\n  --sbb-navigation-action-font-size: var(--sbb-text-font-size-s);\n}\n\n:is(.sbb-navigation-button, .sbb-navigation-link) {\n  display: flex;\n  position: relative;\n  color: var(--sbb-navigation-action-color);\n  cursor: var(--sbb-navigation-cursor);\n  transition: color var(--sbb-navigation-action-transition-duration) ease;\n  outline: none;\n  text-align: left;\n  font-size: var(--sbb-navigation-action-font-size);\n  line-height: var(--sbb-navigation-action-line-height);\n  letter-spacing: var(--sbb-navigation-action-letter-spacing);\n  font-weight: bold;\n  hyphens: auto;\n  text-decoration: var(--sbb-navigation-text-decoration);\n  user-select: none;\n  -webkit-tap-highlight-color: transparent;\n}\n@media (forced-colors: active) {\n  :is(.sbb-navigation-button, .sbb-navigation-link) {\n    transition: none;\n  }\n}\n:host(:focus-visible) :is(.sbb-navigation-button, .sbb-navigation-link), :is(.sbb-navigation-button, .sbb-navigation-link):focus-visible {\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  border-radius: calc(var(--sbb-border-radius-4x) - var(--sbb-focus-outline-offset));\n}\n\n:host(:is(:disabled, [disabled])) {\n  --sbb-navigation-action-color: var(--sbb-color-5);\n  --sbb-navigation-cursor: unset;\n  --sbb-navigation-text-decoration: line-through;\n}\n";
+
+//#endregion
+//#region src/elements/navigation/common/navigation-action-common.ts
+const SbbNavigationActionCommonElementMixin = (superClass) => {
+	class SbbNavigationActionCommonElement extends SbbDisabledMixin(superClass) {
+		static {
+			this.elementDependencies = [SbbIconElement];
+		}
+		static {
+			this.styles = [unsafeCSS(navigation_action_default)];
+		}
+		/** The navigation marker in which the action is nested. */
+		get marker() {
+			return this._navigationMarker;
+		}
+		/** The section in which the action is nested. */
+		get section() {
+			return this._navigationSection;
+		}
+		constructor(...args) {
+			super(...args);
+			this._navigationMarker = null;
+			this._navigationSection = null;
+			this._size = "l";
+			this.addEventListener?.("click", () => {
+				if (!this.matches(":is(:state(action-active),[state--action-active])") && this._navigationMarker && !this.connectedSection) this.marker?.select(this);
+			});
+			this.addController(new SbbPropertyWatcherController(this, () => this.closest("sbb-navigation-marker"), { size: (marker) => this._applySize(marker.size) }));
+		}
+		connectedCallback() {
+			super.connectedCallback();
+			this._navigationMarker = this.closest("sbb-navigation-marker");
+			this._navigationSection = this.closest("sbb-navigation-section");
+			this.toggleState("section-action", !!this._navigationSection);
+			if (this.closest("sbb-navigation-list")) this._applySize("m");
+		}
+		_applySize(size) {
+			if (this._size) this.internals.states.delete(`size-${this._size}`);
+			this._size = size;
+			if (this._size) this.internals.states.add(`size-${this._size}`);
+		}
+		renderTemplate() {
+			return html$1`<sbb-icon name="dash-small"></sbb-icon> <slot></slot>`;
+		}
+	}
+	return SbbNavigationActionCommonElement;
+};
+
+//#endregion
+//#region src/elements/navigation/navigation-button/navigation-button.component.ts
+/**
+* It displays a button element that can be used in the `sbb-navigation` component.
+*
+* @slot - Use the unnamed slot to add content to the `sbb-navigation-button`.
+*/
+var SbbNavigationButtonElement = class extends SbbNavigationActionCommonElementMixin(SbbButtonBaseElement) {
+	static {
+		this.elementName = "sbb-navigation-button";
+	}
+};
+
+//#endregion
+//#region src/elements/navigation/navigation-link/navigation-link.component.ts
+/**
+* It displays a link element that can be used in the `sbb-navigation` component.
+*
+* @slot - Use the unnamed slot to add content to the `sbb-navigation-link`.
+*/
+var SbbNavigationLinkElement = class extends SbbNavigationActionCommonElementMixin(SbbLinkBaseElement) {
+	static {
+		this.elementName = "sbb-navigation-link";
+	}
+};
+
+//#endregion
+//#region src/elements/navigation/navigation-list/navigation-list.scss?inline
+var navigation_list_default = ":host {\n  display: block;\n}\n\n.sbb-navigation-list__content {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--sbb-navigation-list-gap);\n  margin-block: var(--sbb-navigation-list-margin-block);\n}\n\n.sbb-navigation-list__label {\n  display: block;\n  color: var(--sbb-color-5);\n  padding-block-end: var(--sbb-navigation-list-padding-block-end);\n  font-weight: bold;\n  font-size: var(--sbb-navigation-list-font-size);\n  letter-spacing: var(--sbb-typo-letter-spacing-text);\n}\n:host(:not(:is(:state(slotted-label),[state--slotted-label]), [label])) .sbb-navigation-list__label {\n  display: none;\n}\n";
+
+//#endregion
+//#region src/elements/navigation/navigation-list/navigation-list.component.ts
+/**
+* It can be used as a container for one or more `sbb-navigation-button`/`sbb-navigation-link` within a `sbb-navigation-section`.
+*
+* @slot - Use the unnamed slot to add content to the `sbb-navigation-list`.
+* @slot label - Use this to provide a label element.
+*/
+let SbbNavigationListElement = (() => {
+	let _classSuper = SbbNamedSlotListMixin(SbbElement);
+	let _label_decorators;
+	let _label_initializers = [];
+	let _label_extraInitializers = [];
+	return class SbbNavigationListElement extends _classSuper {
+		static {
+			const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+			_label_decorators = [forceType(), property({
+				reflect: true,
+				converter: omitEmptyConverter
+			})];
+			__esDecorate(this, null, _label_decorators, {
+				kind: "accessor",
+				name: "label",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "label" in obj,
+					get: (obj) => obj.label,
+					set: (obj, value) => {
+						obj.label = value;
+					}
+				},
+				metadata: _metadata
+			}, _label_initializers, _label_extraInitializers);
+			if (_metadata) Object.defineProperty(this, Symbol.metadata, {
+				enumerable: true,
+				configurable: true,
+				writable: true,
+				value: _metadata
+			});
+		}
+		static {
+			this.elementName = "sbb-navigation-list";
+		}
+		static {
+			this.styles = [unsafeCSS(navigation_list_default)];
+		}
+		#label_accessor_storage;
+		/**
+		* The label to be shown before the action list.
+		*/
+		get label() {
+			return this.#label_accessor_storage;
+		}
+		set label(value) {
+			this.#label_accessor_storage = value;
+		}
+		render() {
+			return html`
+      <span class="sbb-navigation-list__label" id="sbb-navigation-link-label-id">
+        <slot name="label">${this.label}</slot>
+      </span>
+      ${this.renderList({
+				class: "sbb-navigation-list__content",
+				ariaLabelledby: "sbb-navigation-link-label-id"
+			})}
+    `;
+		}
+		constructor() {
+			super(...arguments);
+			this.listChildLocalNames = ["sbb-navigation-button", "sbb-navigation-link"];
+			this.#label_accessor_storage = __runInitializers(this, _label_initializers, "");
+			__runInitializers(this, _label_extraInitializers);
+		}
+	};
+})();
+
+//#endregion
+//#region src/elements/navigation/navigation-marker/navigation-marker.scss?inline
+var navigation_marker_default = ":host {\n  --sbb-navigation-marker-margin-block: calc(\n    1em * var(--sbb-navigation-marker-typo-line-height) / 2 - var(--sbb-navigation-marker-border) /\n      2\n  );\n  display: block;\n}\n\n:host([size=s]) {\n  --sbb-navigation-action-gap: var(--sbb-spacing-fixed-2x);\n  --sbb-navigation-marker-width: 0.5rem;\n  --sbb-navigation-marker-typo-line-height: var(--sbb-typo-line-height-text);\n  --sbb-navigation-margin-inline-start: var(--sbb-spacing-fixed-2x);\n  --sbb-navigation-marker-position-x: calc(\n    var(--sbb-navigation-marker-padding-inline-start) - var(--sbb-spacing-fixed-2x)\n  );\n  --sbb-navigation-marker-padding-inline-start: calc(\n    var(--sbb-spacing-fixed-6x) + var(--sbb-spacing-fixed-1x)\n  );\n  --sbb-navigation-marker-font-size: var(--sbb-text-font-size-xxs);\n  --sbb-navigation-marker-letter-spacing: var(--sbb-typo-letter-spacing-text);\n  --sbb-navigation-marker-line-height: var(--sbb-typo-line-height-text);\n}\n\n:host([size=l]) {\n  --sbb-navigation-marker-font-size: var(--sbb-heading-font-size-4);\n  --sbb-navigation-marker-letter-spacing: var(--sbb-typo-letter-spacing-heading);\n  --sbb-navigation-marker-line-height: var(--sbb-typo-line-height-heading);\n}\n\n.sbb-navigation-marker {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--sbb-navigation-action-gap);\n  padding-inline-start: var(--sbb-navigation-marker-padding-inline-start);\n  font-size: var(--sbb-navigation-marker-font-size);\n  line-height: var(--sbb-navigation-marker-line-height);\n  letter-spacing: var(--sbb-navigation-marker-letter-spacing);\n  font-weight: bold;\n}\n.sbb-navigation-marker::before {\n  content: \"\";\n  position: absolute;\n  opacity: 0;\n  inset-inline-start: var(--sbb-navigation-marker-position-x);\n  inset-block-start: var(--sbb-navigation-marker-position-y);\n  width: var(--sbb-navigation-marker-width);\n  border-block-start: var(--sbb-navigation-marker-border) solid var(--sbb-color-5);\n  margin-block: var(--sbb-navigation-marker-margin-block);\n  transition-duration: var(--sbb-disable-animation-duration, var(--sbb-animation-duration-6x));\n  transition-timing-function: ease;\n  transition-property: opacity, inset-block-start;\n}\n:host(:is(:state(has-active-action),[state--has-active-action])) .sbb-navigation-marker::before {\n  opacity: 1;\n}\n@media (forced-colors: active) {\n  .sbb-navigation-marker::before {\n    border-color: CanvasText;\n  }\n}\n\n::slotted(:is(sbb-navigation-button, sbb-navigation-link)) {\n  margin-inline-start: var(--sbb-navigation-margin-inline-start);\n}\n";
+
+//#endregion
+//#region src/elements/navigation/navigation-marker/navigation-marker.component.ts
+/**
+* It can be used as a container for one or more `sbb-navigation-button`/`sbb-navigation-link` within a `sbb-navigation`.
+*
+* @slot - Use the unnamed slot to add `sbb-navigation-button`/`sbb-navigation-link` elements into the `sbb-navigation-marker`.
+*/
+let SbbNavigationMarkerElement = (() => {
+	let _classSuper = SbbNamedSlotListMixin(SbbElement);
+	let _size_decorators;
+	let _size_initializers = [];
+	let _size_extraInitializers = [];
+	return class SbbNavigationMarkerElement extends _classSuper {
+		static {
+			const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+			_size_decorators = [property({ reflect: true })];
+			__esDecorate(this, null, _size_decorators, {
+				kind: "accessor",
+				name: "size",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "size" in obj,
+					get: (obj) => obj.size,
+					set: (obj, value) => {
+						obj.size = value;
+					}
+				},
+				metadata: _metadata
+			}, _size_initializers, _size_extraInitializers);
+			if (_metadata) Object.defineProperty(this, Symbol.metadata, {
+				enumerable: true,
+				configurable: true,
+				writable: true,
+				value: _metadata
+			});
+		}
+		static {
+			this.elementName = "sbb-navigation-marker";
+		}
+		static {
+			this.styles = [unsafeCSS(navigation_marker_default)];
+		}
+		#size_accessor_storage;
+		/**
+		* Marker size variant, either s or l.
+		*/
+		get size() {
+			return this.#size_accessor_storage;
+		}
+		set size(value) {
+			this.#size_accessor_storage = value;
+		}
+		constructor() {
+			super();
+			this.listChildLocalNames = ["sbb-navigation-button", "sbb-navigation-link"];
+			this.#size_accessor_storage = __runInitializers(this, _size_initializers, "l");
+			this._currentActiveAction = __runInitializers(this, _size_extraInitializers);
+			this.addController(new ResizeController(this, {
+				skipInitial: true,
+				callback: () => this._setMarkerPosition()
+			}));
+		}
+		willUpdate(changedProperties) {
+			super.willUpdate(changedProperties);
+			if (changedProperties.has("listChildren")) this._updateMarkerActions();
+			this.toggleState("has-active-action", !!this._currentActiveAction);
+		}
+		_updateMarkerActions() {
+			this._currentActiveAction = this.listChildren.find((action) => action.matches(":is(:state(action-active),[state--action-active])"));
+			this._setMarkerPosition();
+		}
+		connectedCallback() {
+			super.connectedCallback();
+			this._checkActiveAction();
+		}
+		_checkActiveAction() {
+			const activeAction = this.querySelector(":is(sbb-navigation-button, sbb-navigation-link).sbb-active");
+			if (activeAction) this.select(activeAction);
+		}
+		select(action) {
+			if (!action) return;
+			this.reset();
+			ɵstateController(action).add("action-active");
+			this._currentActiveAction = action;
+			setTimeout(() => this._setMarkerPosition());
+		}
+		firstUpdated(changedProperties) {
+			super.firstUpdated(changedProperties);
+			setTimeout(() => this._setMarkerPosition());
+		}
+		reset() {
+			if (this._currentActiveAction) {
+				ɵstateController(this._currentActiveAction).delete("action-active");
+				this._currentActiveAction.connectedSection?.close();
+				this._currentActiveAction = void 0;
+			}
+		}
+		_setMarkerPosition() {
+			if (!this._currentActiveAction) return;
+			const index = this.listChildren.indexOf(this._currentActiveAction);
+			const value = this.shadowRoot.querySelector(`li:nth-child(${index + 1})`)?.offsetTop;
+			if (value != null) this.style?.setProperty("--sbb-navigation-marker-position-y", `${value}px`);
+		}
+		render() {
+			return this.renderList();
+		}
+	};
+})();
+
+//#endregion
+//#region src/elements/navigation/navigation-section/navigation-section.scss?inline
+var navigation_section_default = ":host {\n  --sbb-navigation-section-animation-duration: var(\n    --sbb-disable-animation-duration,\n    var(--sbb-animation-duration-3x)\n  );\n  --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);\n  display: var(--sbb-navigation-section-display, none);\n  position: var(--sbb-navigation-section-position);\n  grid-column: var(--sbb-navigation-section-column);\n  inset-inline-start: 0;\n  inset-block-start: 0;\n  width: var(--sbb-navigation-section-width);\n  height: var(--sbb-navigation-section-height);\n  z-index: var(--sbb-navigation-z-index, var(--sbb-overlay-default-z-index));\n}\n@media (min-width: calc(64rem)) {\n  :host {\n    --sbb-navigation-section-animation-duration: var(\n      --sbb-disable-animation-duration,\n      var(--sbb-animation-duration-4x)\n    );\n    --sbb-navigation-section-width: calc(\n      100% + var(--sbb-layout-base-offset-responsive) + var(--sbb-grid-base-gutter-responsive)\n    );\n    translate: calc(var(--sbb-grid-base-gutter-responsive) * -1) 0;\n  }\n}\n\n:host(:is(:state(state-opened),[state--state-opened])) {\n  --sbb-navigation-section-pointer-events: all;\n}\n\n:host(:is(:state(state-opening),[state--state-opening])) {\n  --sbb-navigation-section-position: absolute;\n}\n\n:host(:is(:is(:state(state-opening),[state--state-opening]), :is(:state(state-closing),[state--state-closing]))) {\n  --sbb-navigation-section-pointer-events: none;\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  --sbb-navigation-section-display: block;\n}\n\n::slotted(*) {\n  padding-inline-start: var(--sbb-navigation-section-content-padding-inline-start);\n}\n\n::slotted(:is(:state(sbb-button),[state--sbb-button])) {\n  grid-column-start: 1;\n}\n\n.sbb-navigation-section__container {\n  pointer-events: var(--sbb-navigation-section-pointer-events);\n  height: var(--sbb-navigation-section-height);\n}\n\n.sbb-navigation-section {\n  display: none;\n  border: none;\n  margin: 0;\n  width: 100%;\n  height: 100%;\n  color: var(--sbb-navigation-color, var(--sbb-color-1-negative));\n  background-color: transparent;\n  padding: 0;\n  overflow: hidden;\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-navigation-section {\n  display: block;\n  animation-name: open;\n  animation-duration: var(--sbb-navigation-section-animation-duration);\n  animation-timing-function: var(--sbb-navigation-section-animation-easing);\n}\n:host(:is(:state(state-closing),[state--state-closing])) .sbb-navigation-section {\n  animation-name: close;\n}\n@media (forced-colors: active) {\n  .sbb-navigation-section {\n    outline: var(--sbb-border-width-1x) solid CanvasText;\n  }\n}\n\n.sbb-navigation-section__wrapper {\n  height: 100%;\n  padding-block: var(--sbb-navigation-section-padding-block);\n  outline: none;\n  overflow-y: auto;\n}\n:host(:is(:is(:state(state-opening),[state--state-opening]), :is(:state(state-closing),[state--state-closing]))) .sbb-navigation-section__wrapper {\n  --sbb-scrollbar-color: transparent;\n  scrollbar-color: transparent transparent;\n}\n\n.sbb-navigation-section__header {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: var(--sbb-spacing-fixed-1x);\n  margin-block-start: var(--sbb-spacing-responsive-xxl);\n  padding-inline-start: var(--sbb-navigation-section-content-padding-inline-start);\n}\n@media (min-width: calc(64rem)) {\n  .sbb-navigation-section__header {\n    margin-block-start: 0;\n    padding-inline-start: 0;\n  }\n}\n@media (min-width: calc(90rem)) {\n  .sbb-navigation-section__header {\n    grid-column: 1/4;\n  }\n}\n\n.sbb-navigation-section__back {\n  position: absolute;\n  translate: calc((100% + var(--sbb-spacing-fixed-1x)) * -1) 0;\n}\n@media (min-width: calc(64rem)) {\n  .sbb-navigation-section__back {\n    display: none;\n  }\n}\n\n.sbb-navigation-section__title {\n  font-weight: bold;\n  font-size: var(--sbb-navigation-section-font-size);\n  letter-spacing: var(--sbb-typo-letter-spacing-heading);\n  line-height: var(--sbb-typo-line-height-heading);\n}\n\n.sbb-navigation-section__content {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: var(--sbb-spacing-responsive-l) var(--sbb-grid-base-gutter-responsive);\n  padding-inline: var(--sbb-navigation-section-padding-inline);\n}\n@media (min-width: calc(64rem)) {\n  .sbb-navigation-section__content {\n    opacity: 0;\n    translate: 0 var(--sbb-spacing-fixed-3x);\n    transition-duration: var(--sbb-navigation-section-animation-duration);\n    transition-delay: var(--sbb-navigation-section-animation-duration);\n    transition-timing-function: var(--sbb-navigation-section-animation-easing);\n    transition-property: opacity, translate;\n  }\n  :host(:is(:state(state-opened),[state--state-opened])) .sbb-navigation-section__content {\n    opacity: 1;\n    translate: 0 0;\n  }\n}\n@media (min-width: calc(90rem)) {\n  .sbb-navigation-section__content {\n    grid-template-columns: repeat(3, 1fr);\n  }\n}\n:host(:is(:state(state-closing),[state--state-closing])) .sbb-navigation-section__content {\n  transition-delay: 0s;\n}\n\n@keyframes open {\n  from {\n    translate: var(--sbb-navigation-section-translate) 0;\n  }\n  to {\n    translate: 0 0;\n  }\n}\n@keyframes close {\n  from {\n    translate: 0 0;\n  }\n  to {\n    translate: var(--sbb-navigation-section-translate) 0;\n  }\n}\n";
+
+//#endregion
+//#region src/elements/navigation/navigation-section/navigation-section.component.ts
+/**
+* It can be used as a container for `sbb-navigation-list` within a `sbb-navigation`.
+*
+* @slot - Use the unnamed slot to add content into the `sbb-navigation-section`.
+*/
+let SbbNavigationSectionElement = (() => {
+	let _classSuper = SbbUpdateSchedulerMixin(SbbOpenCloseBaseElement);
+	let _titleContent_decorators;
+	let _titleContent_initializers = [];
+	let _titleContent_extraInitializers = [];
+	let _trigger_decorators;
+	let _trigger_initializers = [];
+	let _trigger_extraInitializers = [];
+	let _accessibilityLabel_decorators;
+	let _accessibilityLabel_initializers = [];
+	let _accessibilityLabel_extraInitializers = [];
+	let _accessibilityBackLabel_decorators;
+	let _accessibilityBackLabel_initializers = [];
+	let _accessibilityBackLabel_extraInitializers = [];
+	return class SbbNavigationSectionElement extends _classSuper {
+		static {
+			const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+			_titleContent_decorators = [forceType(), property({
+				attribute: "title-content",
+				reflect: true,
+				converter: omitEmptyConverter
+			})];
+			_trigger_decorators = [idReference(), property()];
+			_accessibilityLabel_decorators = [forceType(), property({ attribute: "accessibility-label" })];
+			_accessibilityBackLabel_decorators = [forceType(), property({ attribute: "accessibility-back-label" })];
+			__esDecorate(this, null, _titleContent_decorators, {
+				kind: "accessor",
+				name: "titleContent",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "titleContent" in obj,
+					get: (obj) => obj.titleContent,
+					set: (obj, value) => {
+						obj.titleContent = value;
+					}
+				},
+				metadata: _metadata
+			}, _titleContent_initializers, _titleContent_extraInitializers);
+			__esDecorate(this, null, _trigger_decorators, {
+				kind: "accessor",
+				name: "trigger",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "trigger" in obj,
+					get: (obj) => obj.trigger,
+					set: (obj, value) => {
+						obj.trigger = value;
+					}
+				},
+				metadata: _metadata
+			}, _trigger_initializers, _trigger_extraInitializers);
+			__esDecorate(this, null, _accessibilityLabel_decorators, {
+				kind: "accessor",
+				name: "accessibilityLabel",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "accessibilityLabel" in obj,
+					get: (obj) => obj.accessibilityLabel,
+					set: (obj, value) => {
+						obj.accessibilityLabel = value;
+					}
+				},
+				metadata: _metadata
+			}, _accessibilityLabel_initializers, _accessibilityLabel_extraInitializers);
+			__esDecorate(this, null, _accessibilityBackLabel_decorators, {
+				kind: "accessor",
+				name: "accessibilityBackLabel",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "accessibilityBackLabel" in obj,
+					get: (obj) => obj.accessibilityBackLabel,
+					set: (obj, value) => {
+						obj.accessibilityBackLabel = value;
+					}
+				},
+				metadata: _metadata
+			}, _accessibilityBackLabel_initializers, _accessibilityBackLabel_extraInitializers);
+			if (_metadata) Object.defineProperty(this, Symbol.metadata, {
+				enumerable: true,
+				configurable: true,
+				writable: true,
+				value: _metadata
+			});
+		}
+		static {
+			this.elementName = "sbb-navigation-section";
+		}
+		static {
+			this.elementDependencies = [SbbTransparentButtonElement];
+		}
+		static {
+			this.styles = [scrollbarStyles, unsafeCSS(navigation_section_default)];
+		}
+		#titleContent_accessor_storage;
+		/**
+		* The label to be shown before the action list.
+		*/
+		get titleContent() {
+			return this.#titleContent_accessor_storage;
+		}
+		set titleContent(value) {
+			this.#titleContent_accessor_storage = value;
+		}
+		#trigger_accessor_storage;
+		/**
+		* The element that will trigger the navigation section.
+		*
+		* For attribute usage, provide an id reference.
+		*/
+		get trigger() {
+			return this.#trigger_accessor_storage;
+		}
+		set trigger(value) {
+			this.#trigger_accessor_storage = value;
+		}
+		#accessibilityLabel_accessor_storage;
+		/**
+		* This will be forwarded as aria-label to the nav element and is read as a title of the navigation-section.
+		*/
+		get accessibilityLabel() {
+			return this.#accessibilityLabel_accessor_storage;
+		}
+		set accessibilityLabel(value) {
+			this.#accessibilityLabel_accessor_storage = value;
+		}
+		#accessibilityBackLabel_accessor_storage;
+		/**
+		* This will be forwarded as aria-label to the back button element.
+		*/
+		get accessibilityBackLabel() {
+			return this.#accessibilityBackLabel_accessor_storage;
+		}
+		set accessibilityBackLabel(value) {
+			this.#accessibilityBackLabel_accessor_storage = value;
+		}
+		/** The state of the component. */
+		set state(state) {
+			super.state = state;
+			this.internals.ariaHidden = this.state !== "opened" ? "true" : null;
+		}
+		get state() {
+			return super.state;
+		}
+		constructor() {
+			super();
+			this.#titleContent_accessor_storage = __runInitializers(this, _titleContent_initializers, "");
+			this.#trigger_accessor_storage = (__runInitializers(this, _titleContent_extraInitializers), __runInitializers(this, _trigger_initializers, null));
+			this.#accessibilityLabel_accessor_storage = (__runInitializers(this, _trigger_extraInitializers), __runInitializers(this, _accessibilityLabel_initializers, ""));
+			this.#accessibilityBackLabel_accessor_storage = (__runInitializers(this, _accessibilityLabel_extraInitializers), __runInitializers(this, _accessibilityBackLabel_initializers, ""));
+			this._firstLevelNavigation = (__runInitializers(this, _accessibilityBackLabel_extraInitializers), null);
+			this._triggerElement = null;
+			this._language = new SbbLanguageController(this);
+			this._focusTrapController = new SbbFocusTrapController(this);
+			this._lastKeydownEvent = null;
+			this._mediaMatcherController = new SbbMediaMatcherController(this, { [SbbMediaQueryBreakpointSmallAndBelow]: (matches) => {
+				if (this.state !== "closed") this._setNavigationInert(matches);
+			} });
+			this._handleNavigationSectionClose = (event) => {
+				if (event.composedPath().some((el, i, a) => el instanceof HTMLElement && i < a.indexOf(this) && (el.nodeName === "A" || !el.hasAttribute("disabled") && (el.hasAttribute("sbb-navigation-close") || el.hasAttribute("sbb-navigation-section-close"))))) this.close();
+			};
+			this.addEventListener?.("keydown", (e) => {
+				this._lastKeydownEvent = e;
+			});
+			this.addEventListener?.("focusout", (e) => {
+				if (e.relatedTarget instanceof HTMLElement && !this.contains(e.relatedTarget) && sbbInputModalityDetector.mostRecentModality === "keyboard" && this._lastKeydownEvent?.key === "Tab" && this._triggerElement) {
+					const navigationElement = this.closest("sbb-navigation");
+					const focusableElements = Array.from(navigationElement?.querySelectorAll(IS_FOCUSABLE_QUERY) ?? []).filter((e) => !this.contains(e));
+					if (this._lastKeydownEvent.shiftKey || !focusableElements.length) this._triggerElement?.focus();
+					else (focusableElements[focusableElements.indexOf(this._triggerElement) + 1] ?? navigationElement.closeButton)?.focus();
+				}
+			});
+		}
+		/**
+		* Opens the navigation section on trigger click.
+		*/
+		open() {
+			if (this.state !== "closed" || !this.hasUpdated || !this.dispatchBeforeOpenEvent()) return;
+			if (this._isNavigationButton(this._triggerElement)) this._triggerElement?.marker?.select(this._triggerElement);
+			this._closePreviousNavigationSection();
+			this.state = "opening";
+			/** @internal */
+			this.dispatchEvent(new Event("ɵnavigationsectionopening"));
+			this.startUpdate();
+			this.inert = true;
+			if (this._triggerElement) this._triggerElement.ariaExpanded = "true";
+			if (this._isZeroAnimationDuration()) this._handleOpening();
+		}
+		_isZeroAnimationDuration() {
+			return isZeroAnimationDuration(this, "--sbb-navigation-section-animation-duration");
+		}
+		_handleOpening() {
+			this.state = "opened";
+			this.inert = false;
+			this._attachWindowEvents();
+			this._setNavigationInert();
+			this._focusTrapController.focusInitialElement();
+			this._checkActiveAction();
+			this.completeUpdate();
+			this.dispatchOpenEvent();
+		}
+		_handleClosing() {
+			this.state = "closed";
+			this.shadowRoot?.querySelector(".sbb-navigation-section__container")?.scrollTo(0, 0);
+			this._windowEventsController?.abort();
+			this._resetLists();
+			this._setNavigationInert();
+			if (this._isBelowLarge() && this._triggerElement) this._triggerElement.focus();
+			this.completeUpdate();
+			this.dispatchCloseEvent();
+		}
+		_closePreviousNavigationSection() {
+			this._firstLevelNavigation?.activeNavigationSection?.close();
+		}
+		/**
+		* Closes the navigation section.
+		*/
+		close() {
+			if (this.state !== "opened" || !this.dispatchBeforeCloseEvent()) return;
+			/** @internal */
+			this.dispatchEvent(new Event("ɵnavigationsectionclosing"));
+			this.state = "closing";
+			this.startUpdate();
+			this.inert = true;
+			if (this._triggerElement) this._triggerElement.ariaExpanded = "false";
+			if (this._isZeroAnimationDuration()) this._handleClosing();
+		}
+		_configureTrigger() {
+			if (this.trigger === this._triggerElement) return;
+			this._triggerAbortController?.abort();
+			removeAriaOverlayTriggerProperties(this._triggerElement);
+			this._triggerElement = this.trigger;
+			if (!this._triggerElement) return;
+			setAriaOverlayTriggerProperties(this, this._triggerElement, "menu", this.state);
+			this._triggerAbortController = new AbortController();
+			if (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(trigger) {
+			return trigger?.localName === "sbb-navigation-button";
+		}
+		_setNavigationInert(isBelowLarge = this._isBelowLarge()) {
+			const navigationContent = this._firstLevelNavigation?.navigationContent;
+			if (navigationContent) navigationContent.inert = isBelowLarge && this.state !== "closed";
+		}
+		_onAnimationEnd(event) {
+			if (event.animationName === "open" && this.state === "opening") this._handleOpening();
+			else if (event.animationName === "close" && this.state === "closing") this._handleClosing();
+		}
+		_resetLists() {
+			Array.from(this.querySelectorAll(":is(:state(section-action),[state--section-action]):is(:state(action-active),[state--action-active])") ?? []).forEach((action) => ɵstateController(action).delete("action-active"));
+		}
+		_attachWindowEvents() {
+			this._windowEventsController = new AbortController();
+			window.addEventListener("keydown", (event) => this._onKeydownEvent(event), { signal: this._windowEventsController.signal });
+			window.addEventListener("click", this._handleNavigationSectionClose, { signal: this._windowEventsController.signal });
+		}
+		_isBelowLarge() {
+			return this._mediaMatcherController.matches(SbbMediaQueryBreakpointSmallAndBelow) ?? false;
+		}
+		_onKeydownEvent(event) {
+			if (this.state === "opened" && event.key === "Escape") this.close();
+		}
+		_checkActiveAction() {
+			ɵstateController(this.querySelector(":is(sbb-navigation-button, sbb-navigation-link).sbb-active"))?.toggle("action-active", true);
+		}
+		connectedCallback() {
+			super.connectedCallback();
+			this.slot ||= "navigation-section";
+			if (this.hasUpdated) this._configureTrigger();
+		}
+		disconnectedCallback() {
+			super.disconnectedCallback();
+			this._triggerElement = null;
+			this._triggerAbortController?.abort();
+			this._windowEventsController?.abort();
+		}
+		requestUpdate(name, oldValue, options) {
+			super.requestUpdate(name, oldValue, options);
+			if (!isServer && (!name || name === "trigger") && this.hasUpdated) this._configureTrigger();
+		}
+		firstUpdated(changedProperties) {
+			super.firstUpdated(changedProperties);
+			this._configureTrigger();
+		}
+		render() {
+			return html`
+      <div class="sbb-navigation-section__container">
+        <nav
+          @animationend=${this._onAnimationEnd}
+          class="sbb-navigation-section"
+          aria-labelledby=${!this.accessibilityLabel ? "title" : nothing}
+          aria-label=${this.accessibilityLabel ? this.accessibilityLabel : nothing}
+        >
+          <div class="sbb-navigation-section__wrapper sbb-scrollbar-negative">
+            <div class="sbb-navigation-section__content">
+              <div class="sbb-navigation-section__header">
+                <!-- Back button -->
+                <sbb-transparent-button
+                  id="sbb-navigation-section-back-button"
+                  class="sbb-navigation-section__back"
+                  aria-label=${this.accessibilityBackLabel || i18nGoBack[this._language.current]}
+                  negative
+                  size="m"
+                  icon-name="chevron-small-left-small"
+                  sbb-navigation-section-close
+                ></sbb-transparent-button>
+
+                <span class="sbb-navigation-section__title" id="title">
+                  <slot name="title">${this.titleContent}</slot>
+                </span>
+              </div>
+              <slot></slot>
+            </div>
+          </div>
+        </nav>
+      </div>
+    `;
+		}
+	};
+})();
+
+//#endregion
+//#region src/elements/navigation/navigation/navigation.scss?inline
+var navigation_default = ":host {\n  --sbb-navigation-animation-duration: var(\n    --sbb-disable-animation-duration,\n    var(--sbb-animation-duration-3x)\n  );\n  --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);\n  display: none;\n  position: fixed;\n  inset: var(--sbb-navigation-inset);\n  z-index: var(--sbb-navigation-z-index, var(--sbb-overlay-default-z-index));\n  overflow: hidden;\n}\n@media (min-width: calc(64rem)) {\n  :host {\n    --sbb-navigation-animation-duration: var(\n      --sbb-disable-animation-duration,\n      var(--sbb-animation-duration-6x)\n    );\n    --sbb-navigation-width: calc(100% + var(--sbb-layout-base-offset-responsive));\n  }\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(:state(state-opened),[state--state-opened])) {\n  --sbb-navigation-animation-easing: ease-out;\n}\n\n:host(:is(:is(:state(state-opened),[state--state-opened]), :is(:state(state-opening),[state--state-opening]))) {\n  --sbb-navigation-backdrop-visibility: visible;\n  --sbb-navigation-backdrop-pointer-events: all;\n}\n\n:host(:not(:is(:state(state-closed),[state--state-closed]))) {\n  --sbb-navigation-inset: 0;\n  --sbb-navigation-translate: none;\n}\n\n:host(:is(:state(state-closing),[state--state-closing])) {\n  --sbb-navigation-backdrop-animation-name: backdrop-close;\n}\n\n:host(:is(:state(has-open-navigation-section),[state--has-open-navigation-section])) {\n  --sbb-navigation-content-translate: -100% 0;\n}\n@media (min-width: calc(64rem)) {\n  :host(:is(:state(has-open-navigation-section),[state--has-open-navigation-section])) {\n    --sbb-navigation-expanded-width: 100dvw;\n    --sbb-navigation-content-translate: 0;\n  }\n}\n\n:host(:is(:state(resize-disable-animation),[state--resize-disable-animation])) {\n  --sbb-disable-animation-duration: 0s;\n}\n\n.sbb-navigation__container {\n  display: grid;\n  gap: var(--sbb-grid-base-gutter-responsive);\n  grid-template-columns: repeat(var(--sbb-grid-base-columns), 1fr);\n  padding-inline: 0;\n  pointer-events: none;\n  translate: var(--sbb-navigation-translate);\n}\n@media (min-width: calc(64rem)) {\n  .sbb-navigation__container {\n    padding-inline: var(--sbb-layout-base-offset-responsive);\n  }\n  .sbb-navigation__container::before {\n    transition-duration: var(--sbb-navigation-animation-duration);\n    transition-timing-function: var(--sbb-navigation-animation-easing);\n    transition-property: visibility;\n    animation-name: var(--sbb-navigation-backdrop-animation-name);\n    animation-duration: var(--sbb-navigation-animation-duration);\n    animation-timing-function: var(--sbb-navigation-animation-easing);\n    content: \"\";\n    visibility: var(--sbb-navigation-backdrop-visibility, hidden);\n    pointer-events: var(--sbb-navigation-backdrop-pointer-events, none);\n    position: fixed;\n    inset: var(--sbb-navigation-inset);\n    background-color: var(--sbb-navigation-backdrop-color);\n  }\n}\n\n.sbb-navigation {\n  transition-duration: var(--sbb-navigation-animation-duration);\n  transition-timing-function: var(--sbb-navigation-animation-easing);\n  transition-property: width;\n  display: none;\n  width: var(--sbb-navigation-width);\n  grid-column: var(--sbb-navigation-grid-column);\n  padding: 0;\n  margin: 0;\n  position: relative;\n  inset-inline-start: var(--sbb-navigation-inline-start, 0);\n  inset-block-start: 0;\n  border: none;\n  pointer-events: none;\n  height: var(--sbb-navigation-height);\n  color: var(--sbb-navigation-color);\n  background-color: var(--sbb-navigation-background-color);\n}\n.sbb-navigation::before {\n  transition-duration: var(--sbb-navigation-animation-duration);\n  transition-timing-function: var(--sbb-navigation-animation-easing);\n  transition-property: width;\n  content: \"\";\n  position: absolute;\n  width: var(--sbb-navigation-expanded-width);\n  height: var(--sbb-navigation-height);\n  background-color: var(--sbb-navigation-background-color);\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-navigation {\n  display: block;\n  pointer-events: all;\n  animation-name: open;\n  animation-duration: var(--sbb-navigation-animation-duration);\n  animation-timing-function: var(--sbb-navigation-animation-easing);\n}\n:host(:is(:state(state-closing),[state--state-closing])) .sbb-navigation {\n  pointer-events: none;\n  animation-name: close;\n}\n@media (forced-colors: active) {\n  .sbb-navigation {\n    outline: var(--sbb-border-width-1x) solid CanvasText;\n  }\n}\n\n.sbb-navigation__wrapper {\n  outline: none;\n}\n\n.sbb-navigation__header {\n  transition-duration: var(--sbb-navigation-animation-duration);\n  transition-timing-function: var(--sbb-navigation-animation-easing);\n  transition-property: width;\n  display: flex;\n  justify-content: flex-end;\n  position: absolute;\n  width: var(--sbb-navigation-expanded-width);\n  pointer-events: none;\n  padding: var(--sbb-spacing-responsive-xs);\n  z-index: calc(var(--sbb-navigation-z-index, var(--sbb-overlay-default-z-index)) + 1);\n}\n\n.sbb-navigation__close {\n  pointer-events: all;\n}\n\n.sbb-navigation__content {\n  transition-duration: var(--sbb-navigation-animation-duration);\n  transition-timing-function: var(--sbb-navigation-animation-easing);\n  transition-property: translate;\n  display: flex;\n  flex-direction: column;\n  gap: var(--sbb-navigation-content-gap);\n  position: relative;\n  height: var(--sbb-navigation-height);\n  padding-inline: var(--sbb-navigation-padding-inline);\n  padding-block: var(--sbb-navigation-padding-block-start) var(--sbb-navigation-padding-block-end);\n  overflow-y: auto;\n  translate: var(--sbb-navigation-content-translate);\n}\n\n::slotted(:first-child) {\n  margin-block-start: var(--sbb-navigation-list-margin-block-start);\n}\n\n@keyframes open {\n  from {\n    translate: -100% 0;\n  }\n  to {\n    translate: 0;\n  }\n}\n@keyframes close {\n  from {\n    translate: 0;\n  }\n  to {\n    translate: -100% 0;\n  }\n}\n@keyframes backdrop-open {\n  from {\n    background-color: transparent;\n  }\n}\n@keyframes backdrop-close {\n  to {\n    background-color: transparent;\n  }\n}\n";
+
+//#endregion
+//#region src/elements/navigation/navigation/navigation.component.ts
+const DEBOUNCE_TIME = 150;
+/**
+* It displays a navigation menu, wrapping one or more `sbb-navigation-*` components.
+*
+* @slot - Use the unnamed slot to add `sbb-navigation-button`/`sbb-navigation-link` elements into the sbb-navigation menu.
+* @cssprop [--sbb-navigation-z-index=var(--sbb-overlay-default-z-index)] - To specify a custom stack order,
+* the `z-index` can be overridden by defining this CSS variable. The default `z-index` of the
+* component is set to `var(--sbb-overlay-default-z-index)` with a value of `1000`.
+*/
+let SbbNavigationElement = (() => {
+	let _classSuper = SbbUpdateSchedulerMixin(SbbOpenCloseBaseElement);
+	let _trigger_decorators;
+	let _trigger_initializers = [];
+	let _trigger_extraInitializers = [];
+	let _accessibilityCloseLabel_decorators;
+	let _accessibilityCloseLabel_initializers = [];
+	let _accessibilityCloseLabel_extraInitializers = [];
+	let __activeNavigationSection_decorators;
+	let __activeNavigationSection_initializers = [];
+	let __activeNavigationSection_extraInitializers = [];
+	return class SbbNavigationElement extends _classSuper {
+		static {
+			const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+			_trigger_decorators = [idReference(), property()];
+			_accessibilityCloseLabel_decorators = [forceType(), property({ attribute: "accessibility-close-label" })];
+			__activeNavigationSection_decorators = [state()];
+			__esDecorate(this, null, _trigger_decorators, {
+				kind: "accessor",
+				name: "trigger",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "trigger" in obj,
+					get: (obj) => obj.trigger,
+					set: (obj, value) => {
+						obj.trigger = value;
+					}
+				},
+				metadata: _metadata
+			}, _trigger_initializers, _trigger_extraInitializers);
+			__esDecorate(this, null, _accessibilityCloseLabel_decorators, {
+				kind: "accessor",
+				name: "accessibilityCloseLabel",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "accessibilityCloseLabel" in obj,
+					get: (obj) => obj.accessibilityCloseLabel,
+					set: (obj, value) => {
+						obj.accessibilityCloseLabel = value;
+					}
+				},
+				metadata: _metadata
+			}, _accessibilityCloseLabel_initializers, _accessibilityCloseLabel_extraInitializers);
+			__esDecorate(this, null, __activeNavigationSection_decorators, {
+				kind: "accessor",
+				name: "_activeNavigationSection",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "_activeNavigationSection" in obj,
+					get: (obj) => obj._activeNavigationSection,
+					set: (obj, value) => {
+						obj._activeNavigationSection = value;
+					}
+				},
+				metadata: _metadata
+			}, __activeNavigationSection_initializers, __activeNavigationSection_extraInitializers);
+			if (_metadata) Object.defineProperty(this, Symbol.metadata, {
+				enumerable: true,
+				configurable: true,
+				writable: true,
+				value: _metadata
+			});
+		}
+		static {
+			this.elementName = "sbb-navigation";
+		}
+		static {
+			this.elementDependencies = [SbbTransparentButtonElement];
+		}
+		static {
+			this.role = "navigation";
+		}
+		static {
+			this.styles = [
+				popoverResetStyles,
+				scrollbarStyles,
+				unsafeCSS(navigation_default)
+			];
+		}
+		#trigger_accessor_storage;
+		/**
+		* The element that will trigger the navigation.
+		*
+		* For attribute usage, provide an id reference.
+		*/
+		get trigger() {
+			return this.#trigger_accessor_storage;
+		}
+		set trigger(value) {
+			this.#trigger_accessor_storage = value;
+		}
+		#accessibilityCloseLabel_accessor_storage;
+		/** This will be forwarded as aria-label to the close button element. */
+		get accessibilityCloseLabel() {
+			return this.#accessibilityCloseLabel_accessor_storage;
+		}
+		set accessibilityCloseLabel(value) {
+			this.#accessibilityCloseLabel_accessor_storage = value;
+		}
+		#_activeNavigationSection_accessor_storage;
+		/** Whether a navigation section is displayed. */
+		get _activeNavigationSection() {
+			return this.#_activeNavigationSection_accessor_storage;
+		}
+		set _activeNavigationSection(value) {
+			this.#_activeNavigationSection_accessor_storage = value;
+		}
+		/** Returns the active navigation section element. */
+		get activeNavigationSection() {
+			return this._activeNavigationSection;
+		}
+		/** Returns the close button element. */
+		get closeButton() {
+			return this.shadowRoot?.querySelector("#sbb-navigation-close-button") ?? null;
+		}
+		/** Returns the navigation content element. */
+		get navigationContent() {
+			return this.shadowRoot?.querySelector(".sbb-navigation__content") ?? null;
+		}
+		constructor() {
+			super();
+			this.#trigger_accessor_storage = __runInitializers(this, _trigger_initializers, null);
+			this.#accessibilityCloseLabel_accessor_storage = (__runInitializers(this, _trigger_extraInitializers), __runInitializers(this, _accessibilityCloseLabel_initializers, ""));
+			this.#_activeNavigationSection_accessor_storage = (__runInitializers(this, _accessibilityCloseLabel_extraInitializers), __runInitializers(this, __activeNavigationSection_initializers, null));
+			this._navigation = __runInitializers(this, __activeNavigationSection_extraInitializers);
+			this._triggerElement = null;
+			this._language = new SbbLanguageController(this);
+			this._inertController = new SbbInertController(this);
+			this._escapableOverlayController = new SbbEscapableOverlayController(this);
+			this._focusTrapController = new SbbFocusTrapController(this);
+			this._scrollHandler = new SbbScrollHandler();
+			this._isPointerDownEventOnNavigation = false;
+			this._resizeObserverTimeout = null;
+			this._navigationResizeObserver = new ResizeController(this, {
+				skipInitial: true,
+				callback: () => this._onNavigationResize()
+			});
+			this._pointerDownListener = (event) => {
+				this._isPointerDownEventOnNavigation = isEventOnElement(this._navigation, event) || isEventOnElement(this.querySelector("sbb-navigation-section:is(:state(state-opened),[state--state-opened])")?.shadowRoot?.querySelector("nav.sbb-navigation-section"), event);
+			};
+			this._closeOnBackdropClick = (event) => {
+				if (!this._isPointerDownEventOnNavigation && !isEventOnElement(this._navigation, event)) this.close();
+			};
+			this.addEventListener?.("click", (event) => this._handleNavigationClose(event));
+			this.addEventListener?.("pointerup", (event) => this._closeOnBackdropClick(event));
+			this.addEventListener?.("pointerdown", (event) => this._pointerDownListener(event));
+			this.addEventListener?.("ɵnavigationsectionopening", (event) => {
+				this._activeNavigationSection = event.target;
+				this.toggleState("has-open-navigation-section", !!this._activeNavigationSection);
+			}, { capture: true });
+			this.addEventListener?.("ɵnavigationsectionclosing", (event) => {
+				if (this._activeNavigationSection === event.target) {
+					this._activeNavigationSection = null;
+					this.internals.states.delete("has-open-navigation-section");
+				}
+			}, { capture: true });
+		}
+		/** Opens the navigation. */
+		open() {
+			if (this.state !== "closed" || !this.hasUpdated || !this.dispatchBeforeOpenEvent()) return;
+			this.showPopover?.();
+			this.state = "opening";
+			this._checkActiveActions();
+			this._checkActiveSection();
+			this.startUpdate();
+			this._scrollHandler.disableScroll();
+			if (this._triggerElement) this._triggerElement.ariaExpanded = "true";
+			if (this._isZeroAnimationDuration()) this._handleOpening();
+		}
+		_checkActiveSection() {
+			this.querySelector("sbb-navigation-button.sbb-active")?.connectedSection?.open();
+		}
+		_checkActiveActions() {
+			Array.from(this.querySelectorAll(":is(sbb-navigation-button, sbb-navigation-link).sbb-active"))?.forEach((action) => action.marker?.select(action));
+		}
+		/** Closes the navigation. */
+		close() {
+			if (this.state !== "opened" || !this.dispatchBeforeCloseEvent()) return;
+			this.state = "closing";
+			this.startUpdate();
+			if (this._triggerElement) this._triggerElement.ariaExpanded = "false";
+			if (this._isZeroAnimationDuration()) this._handleClosing();
+		}
+		_isZeroAnimationDuration() {
+			return isZeroAnimationDuration(this, "--sbb-navigation-animation-duration");
+		}
+		_handleClosing() {
+			this.state = "closed";
+			this.hidePopover?.();
+			this.navigationContent?.scrollTo(0, 0);
+			this._inertController.deactivate();
+			this._triggerElement?.focus();
+			this._escapableOverlayController.disconnect();
+			this.dispatchCloseEvent();
+			this._navigationResizeObserver.unobserve(this);
+			this._resetMarkers();
+			this._focusTrapController.enabled = false;
+			this._scrollHandler.enableScroll();
+			this.completeUpdate();
+		}
+		_handleOpening() {
+			this.state = "opened";
+			this._navigationResizeObserver.observe(this);
+			this._inertController.activate();
+			this._escapableOverlayController.connect();
+			this._focusTrapController.focusInitialElement();
+			this._focusTrapController.enabled = true;
+			this.completeUpdate();
+			this.dispatchOpenEvent();
+		}
+		_configureTrigger() {
+			if (this.trigger === this._triggerElement) return;
+			this._triggerAbortController?.abort();
+			removeAriaOverlayTriggerProperties(this._triggerElement);
+			this._triggerElement = this.trigger;
+			if (!this._triggerElement) return;
+			setAriaOverlayTriggerProperties(this, this._triggerElement, "menu", this.state);
+			this._triggerAbortController = new AbortController();
+			this._triggerElement.addEventListener("click", () => this.open(), { signal: this._triggerAbortController.signal });
+		}
+		_onAnimationEnd(event) {
+			if (event.animationName === "open" && this.state === "opening") this._handleOpening();
+			else if (event.animationName === "close" && this.state === "closing") this._handleClosing();
+		}
+		_resetMarkers() {
+			Array.from(this.querySelectorAll(":is(sbb-navigation-button, sbb-navigation-link):is(:state(action-active),[state--action-active]):not(.sbb-active)"))?.forEach((action) => action.marker?.reset());
+		}
+		_handleNavigationClose(event) {
+			if (event.composedPath().some((el, i, a) => el instanceof HTMLElement && i < a.indexOf(this) && (el.nodeName === "A" || el.hasAttribute("sbb-navigation-close") && !el.hasAttribute("disabled")))) this.close();
+		}
+		_onNavigationResize() {
+			if (this.state !== "opened") return;
+			if (this._resizeObserverTimeout) clearTimeout(this._resizeObserverTimeout);
+			this.internals.states.add("resize-disable-animation");
+			this._resizeObserverTimeout = setTimeout(() => this.internals.states.delete("resize-disable-animation"), DEBOUNCE_TIME);
+		}
+		connectedCallback() {
+			super.connectedCallback();
+			this.popover = "manual";
+			if (this.hasUpdated) this._configureTrigger();
+		}
+		disconnectedCallback() {
+			super.disconnectedCallback();
+			this._triggerElement = null;
+			this._triggerAbortController?.abort();
+			this._scrollHandler.enableScroll();
+		}
+		requestUpdate(name, oldValue, options) {
+			super.requestUpdate(name, oldValue, options);
+			if (!isServer && (!name || name === "trigger") && this.hasUpdated) this._configureTrigger();
+		}
+		firstUpdated(changedProperties) {
+			super.firstUpdated(changedProperties);
+			this._configureTrigger();
+		}
+		render() {
+			const closeButton = html`
+      <sbb-transparent-button
+        id="sbb-navigation-close-button"
+        class="sbb-navigation__close"
+        aria-label=${this.accessibilityCloseLabel || i18nCloseNavigation[this._language.current]}
+        aria-controls="sbb-navigation-overlay"
+        negative
+        size="m"
+        icon-name="cross-small"
+        sbb-navigation-close
+      ></sbb-transparent-button>
+    `;
+			return html`
+      <div class="sbb-navigation__container">
+        <div
+          id="sbb-navigation-overlay"
+          @animationend=${this._onAnimationEnd}
+          class="sbb-navigation"
+          ${ref((navigationRef) => this._navigation = navigationRef)}
+        >
+          <div class="sbb-navigation__header">${closeButton}</div>
+          <div class="sbb-navigation__wrapper">
+            <div class="sbb-navigation__content sbb-scrollbar-negative">
+              <slot></slot>
+            </div>
+          </div>
+        </div>
+        <slot name="navigation-section"></slot>
+      </div>
+    `;
+		}
+	};
+})();
+
+//#endregion
+export { SbbNavigationActionCommonElementMixin, SbbNavigationButtonElement, SbbNavigationElement, SbbNavigationLinkElement, SbbNavigationListElement, SbbNavigationMarkerElement, SbbNavigationSectionElement };