@sbb-esta/lyne-elements-dev 4.7.0-dev.1773388991 → 4.7.0-dev.1773396165

package/navigation/navigation-button/navigation-button.component.js

@@ -1,10 +1,9 @@
-import { SbbButtonBaseElement as e } from "../../core/base-elements.js";
-import { SbbNavigationActionCommonElementMixin as t } from "../common/navigation-action-common.js";
-//#region src/elements/navigation/navigation-button/navigation-button.component.ts
-var n = class extends t(e) {
-	static {
-		this.elementName = "sbb-navigation-button";
-	}
+import { SbbButtonBaseElement as m } from "../../core/base-elements.js";
+import { SbbNavigationActionCommonElementMixin as o } from "../common/navigation-action-common.js";
+const t = class t extends o(m) {
+};
+t.elementName = "sbb-navigation-button";
+let e = t;
+export {
+  e as SbbNavigationButtonElement
 };
-//#endregion
-export { n as SbbNavigationButtonElement };

package/navigation/navigation-button.js

@@ -1,4 +1,7 @@
 import { SbbNavigationButtonElement as e } from "./navigation-button/navigation-button.component.js";
-e.define(), console.warn("The entrypoint '@sbb-esta/elements/navigation/navigation-button.js' has been deprecated.\nUse either '@sbb-esta/elements/navigation.js' or '@sbb-esta/elements/navigation.pure.js' instead.");
-//#endregion
-export { e as SbbNavigationButtonElement };
+e.define();
+console.warn(`The entrypoint '@sbb-esta/elements/navigation/navigation-button.js' has been deprecated.
+Use either '@sbb-esta/elements/navigation.js' or '@sbb-esta/elements/navigation.pure.js' instead.`);
+export {
+  e as SbbNavigationButtonElement
+};

package/navigation/navigation-link/navigation-link.component.js

@@ -1,10 +1,9 @@
-import { SbbLinkBaseElement as e } from "../../core/base-elements.js";
-import { SbbNavigationActionCommonElementMixin as t } from "../common/navigation-action-common.js";
-//#region src/elements/navigation/navigation-link/navigation-link.component.ts
-var n = class extends t(e) {
-	static {
-		this.elementName = "sbb-navigation-link";
-	}
+import { SbbLinkBaseElement as m } from "../../core/base-elements.js";
+import { SbbNavigationActionCommonElementMixin as o } from "../common/navigation-action-common.js";
+const t = class t extends o(m) {
+};
+t.elementName = "sbb-navigation-link";
+let e = t;
+export {
+  e as SbbNavigationLinkElement
 };
-//#endregion
-export { n as SbbNavigationLinkElement };

package/navigation/navigation-link.js

@@ -1,4 +1,7 @@
 import { SbbNavigationLinkElement as e } from "./navigation-link/navigation-link.component.js";
-e.define(), console.warn("The entrypoint '@sbb-esta/elements/navigation/navigation-link.js' has been deprecated.\nUse either '@sbb-esta/elements/navigation.js' or '@sbb-esta/elements/navigation.pure.js' instead.");
-//#endregion
-export { e as SbbNavigationLinkElement };
+e.define();
+console.warn(`The entrypoint '@sbb-esta/elements/navigation/navigation-link.js' has been deprecated.
+Use either '@sbb-esta/elements/navigation.js' or '@sbb-esta/elements/navigation.pure.js' instead.`);
+export {
+  e as SbbNavigationLinkElement
+};

package/navigation/navigation-list/navigation-list.component.js

@@ -1,2 +1,59 @@
-import { t as e } from "../../navigation-list.component-BhV-uAfU.js";
-export { e as SbbNavigationListElement };
+var b = (t) => {
+  throw TypeError(t);
+};
+var c = (t, e, i) => e.has(t) || b("Cannot " + i);
+var m = (t, e, i) => (c(t, e, "read from private field"), i ? i.call(t) : e.get(t)), p = (t, e, i) => e.has(t) ? b("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, i), r = (t, e, i, o) => (c(t, e, "write to private field"), o ? o.call(t, i) : e.set(t, i), i);
+import { __esDecorate as g, __runInitializers as d } from "tslib";
+import { css as h, html as y } from "lit";
+import { property as v } from "lit/decorators.js";
+import { SbbElement as u } from "../../core/base-elements.js";
+import { forceType as x, omitEmptyConverter as _ } from "../../core/decorators.js";
+import { isLean as z } from "../../core/dom.js";
+import { SbbNamedSlotListMixin as k } from "../../core/mixins.js";
+import { boxSizingStyles as S } from "../../core/styles.js";
+const w = h`:host{display:block}.sbb-navigation-list__content{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;flex-direction:column;align-items:flex-start;gap:var(--sbb-spacing-fixed-2x);margin-block:var(--sbb-spacing-fixed-1x)}.sbb-navigation-list__label{--sbb-text-font-size: var(--sbb-text-font-size-xxs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);font-weight:700;display:block;color:var(--sbb-color-5);padding-block-end:var(--sbb-spacing-fixed-2x)}:host(:not(:is(:state(slotted-label),[state--slotted-label]),[label])) .sbb-navigation-list__label{display:none}`;
+let N = (() => {
+  var n, a;
+  let t = k(u), e, i = [], o = [];
+  return a = class extends t {
+    constructor() {
+      super(...arguments);
+      p(this, n);
+      this.listChildLocalNames = [
+        "sbb-navigation-button",
+        "sbb-navigation-link"
+      ], r(this, n, d(this, i, "")), d(this, o);
+    }
+    /**
+     * The label to be shown before the action list.
+     */
+    get label() {
+      return m(this, n);
+    }
+    set label(l) {
+      r(this, n, l);
+    }
+    willUpdate(l) {
+      super.willUpdate(l), l.has("listChildren") && this.listChildren.forEach((s) => s.size = z() ? "s" : "m");
+    }
+    render() {
+      return y`
+      <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"
+      })}
+    `;
+    }
+  }, n = new WeakMap(), (() => {
+    const l = typeof Symbol == "function" && Symbol.metadata ? Object.create(t[Symbol.metadata] ?? null) : void 0;
+    e = [x(), v({ reflect: !0, converter: _ })], g(a, null, e, { kind: "accessor", name: "label", static: !1, private: !1, access: { has: (s) => "label" in s, get: (s) => s.label, set: (s, f) => {
+      s.label = f;
+    } }, metadata: l }, i, o), l && Object.defineProperty(a, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: l });
+  })(), a.elementName = "sbb-navigation-list", a.styles = [S, w], a;
+})();
+export {
+  N as SbbNavigationListElement
+};

package/navigation/navigation-list.js

@@ -1,4 +1,7 @@
-import { t as e } from "../navigation-list.component-BhV-uAfU.js";
-e.define(), console.warn("The entrypoint '@sbb-esta/elements/navigation/navigation-list.js' has been deprecated.\nUse either '@sbb-esta/elements/navigation.js' or '@sbb-esta/elements/navigation.pure.js' instead.");
-//#endregion
-export { e as SbbNavigationListElement };
+import { SbbNavigationListElement as e } from "./navigation-list/navigation-list.component.js";
+e.define();
+console.warn(`The entrypoint '@sbb-esta/elements/navigation/navigation-list.js' has been deprecated.
+Use either '@sbb-esta/elements/navigation.js' or '@sbb-esta/elements/navigation.pure.js' instead.`);
+export {
+  e as SbbNavigationListElement
+};

package/navigation/navigation-marker/navigation-marker.component.js

@@ -1,2 +1,82 @@
-import { t as e } from "../../navigation-marker.component-CIUu5VVZ.js";
-export { e as SbbNavigationMarkerElement };
+var c = (i) => {
+  throw TypeError(i);
+};
+var l = (i, e, a) => e.has(i) || c("Cannot " + a);
+var v = (i, e, a) => (l(i, e, "read from private field"), a ? a.call(i) : e.get(i)), g = (i, e, a) => e.has(i) ? c("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(i) : e.set(i, a), b = (i, e, a, o) => (l(i, e, "write to private field"), o ? o.call(i, a) : e.set(i, a), a);
+import { __esDecorate as p, __runInitializers as h } from "tslib";
+import { ResizeController as f } from "@lit-labs/observers/resize-controller.js";
+import { css as k } from "lit";
+import { property as u } from "lit/decorators.js";
+import { SbbElement as x } from "../../core/base-elements.js";
+import { isLean as y } from "../../core/dom.js";
+import { SbbNamedSlotListMixin as z, ɵstateController as d } from "../../core/mixins.js";
+import { boxSizingStyles as _ } from "../../core/styles.js";
+const A = k`:host{--sbb-navigation-action-gap: var(--sbb-spacing-responsive-xs);--sbb-navigation-marker-position-x: var(--sbb-spacing-fixed-1x);--sbb-navigation-marker-position-y: unset;--sbb-navigation-marker-width: 1.0625rem;--sbb-navigation-marker-border: var(--sbb-border-width-1x);--sbb-navigation-marker-padding-inline-start: var(--sbb-spacing-fixed-6x);--sbb-navigation-marker-typo-line-height: var(--sbb-typo-line-height-heading);--sbb-navigation-margin-inline-start: var(--sbb-spacing-fixed-3x);--sbb-navigation-marker-margin-block: calc( 1em * var(--sbb-navigation-marker-typo-line-height) / 2 - var(--sbb-navigation-marker-border) / 2 );display:block}:host([size=s]){--sbb-navigation-action-gap: var(--sbb-spacing-fixed-2x);--sbb-navigation-marker-width: .5rem;--sbb-navigation-marker-typo-line-height: var(--sbb-typo-line-height-text);--sbb-navigation-margin-inline-start: var(--sbb-spacing-fixed-2x);--sbb-navigation-marker-position-x: calc( var(--sbb-navigation-marker-padding-inline-start) - var(--sbb-spacing-fixed-2x) );--sbb-navigation-marker-padding-inline-start: calc( var(--sbb-spacing-fixed-6x) + var(--sbb-spacing-fixed-1x) )}.sbb-navigation-marker{list-style:none;margin:0;padding:0;font-size:inherit;--sbb-title-font-size: var(--sbb-title-font-size-level-4-lean, var(--sbb-heading-font-size-4));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);position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:var(--sbb-navigation-action-gap);padding-inline-start:var(--sbb-navigation-marker-padding-inline-start)}.sbb-navigation-marker:before{content:"";position:absolute;opacity:0;inset-inline-start:var(--sbb-navigation-marker-position-x);inset-block-start:var(--sbb-navigation-marker-position-y);width:var(--sbb-navigation-marker-width);border-block-start:var(--sbb-navigation-marker-border) solid var(--sbb-color-5);margin-block:var(--sbb-navigation-marker-margin-block);transition-duration:var(--sbb-disable-animation-duration, var(--sbb-animation-duration-6x));transition-timing-function:ease;transition-property:opacity,inset-block-start}:host(:is(:state(has-active-action),[state--has-active-action])) .sbb-navigation-marker:before{opacity:1}@media(forced-colors:active){.sbb-navigation-marker:before{border-color:CanvasText}}:host([size=s]) .sbb-navigation-marker{--sbb-text-font-size: var(--sbb-text-font-size-xxs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);font-weight:700}::slotted(:is(sbb-navigation-button,sbb-navigation-link)){margin-inline-start:var(--sbb-navigation-margin-inline-start)}`;
+let j = (() => {
+  var r, n;
+  let i = z(x), e, a = [], o = [];
+  return n = class extends i {
+    constructor() {
+      super();
+      g(this, r);
+      this.listChildLocalNames = [
+        "sbb-navigation-button",
+        "sbb-navigation-link"
+      ], b(this, r, h(this, a, y() ? "s" : "l")), this._currentActiveAction = h(this, o), this.addController(new f(this, {
+        skipInitial: !0,
+        callback: () => this._setMarkerPosition()
+      }));
+    }
+    /**
+     * Marker size variant, either s or l.
+     * @default 'l' / 's' (lean)
+     */
+    get size() {
+      return v(this, r);
+    }
+    set size(t) {
+      b(this, r, t);
+    }
+    willUpdate(t) {
+      super.willUpdate(t), (t.has("size") || t.has("listChildren")) && this._updateMarkerActions(), this.toggleState("has-active-action", !!this._currentActiveAction);
+    }
+    _updateMarkerActions() {
+      for (const t of this.listChildren)
+        t.size = this.size;
+      this._currentActiveAction = this.listChildren.find((t) => t.matches(":is(:state(action-active),[state--action-active])")), this._setMarkerPosition();
+    }
+    connectedCallback() {
+      super.connectedCallback(), this._checkActiveAction();
+    }
+    _checkActiveAction() {
+      const t = this.querySelector(":is(sbb-navigation-button, sbb-navigation-link).sbb-active");
+      t && this.select(t);
+    }
+    select(t) {
+      t && (this.reset(), d(t).add("action-active"), this._currentActiveAction = t, setTimeout(() => this._setMarkerPosition()));
+    }
+    firstUpdated(t) {
+      super.firstUpdated(t), setTimeout(() => this._setMarkerPosition());
+    }
+    reset() {
+      this._currentActiveAction && (d(this._currentActiveAction).delete("action-active"), this._currentActiveAction.connectedSection?.close(), this._currentActiveAction = void 0);
+    }
+    _setMarkerPosition() {
+      if (!this._currentActiveAction)
+        return;
+      const t = this.listChildren.indexOf(this._currentActiveAction), s = this.shadowRoot.querySelector(`li:nth-child(${t + 1})`)?.offsetTop;
+      s != null && this.style?.setProperty("--sbb-navigation-marker-position-y", `${s}px`);
+    }
+    render() {
+      return this.renderList();
+    }
+  }, r = new WeakMap(), (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(i[Symbol.metadata] ?? null) : void 0;
+    e = [u({ reflect: !0 })], p(n, null, e, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (s) => "size" in s, get: (s) => s.size, set: (s, m) => {
+      s.size = m;
+    } }, metadata: t }, a, o), t && Object.defineProperty(n, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), n.elementName = "sbb-navigation-marker", n.styles = [_, A], n;
+})();
+export {
+  j as SbbNavigationMarkerElement
+};

package/navigation/navigation-marker.js

@@ -1,4 +1,7 @@
-import { t as e } from "../navigation-marker.component-CIUu5VVZ.js";
-e.define(), console.warn("The entrypoint '@sbb-esta/elements/navigation/navigation-marker.js' has been deprecated.\nUse either '@sbb-esta/elements/navigation.js' or '@sbb-esta/elements/navigation.pure.js' instead.");
-//#endregion
-export { e as SbbNavigationMarkerElement };
+import { SbbNavigationMarkerElement as e } from "./navigation-marker/navigation-marker.component.js";
+e.define();
+console.warn(`The entrypoint '@sbb-esta/elements/navigation/navigation-marker.js' has been deprecated.
+Use either '@sbb-esta/elements/navigation.js' or '@sbb-esta/elements/navigation.pure.js' instead.`);
+export {
+  e as SbbNavigationMarkerElement
+};

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

@@ -1,2 +1,224 @@
-import { t as e } from "../../navigation-section.component-DwEXj603.js";
-export { e as SbbNavigationSectionElement };
+var z = (e) => {
+  throw TypeError(e);
+};
+var S = (e, s, a) => s.has(e) || z("Cannot " + a);
+var v = (e, s, a) => (S(e, s, "read from private field"), a ? a.call(e) : s.get(e)), p = (e, s, a) => s.has(e) ? z("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(e) : s.set(e, a), r = (e, s, a, h) => (S(e, s, "write to private field"), h ? h.call(e, a) : s.set(e, a), a);
+import { __esDecorate as m, __runInitializers as l } from "tslib";
+import { css as U, isServer as O, nothing as T, html as M } from "lit";
+import { property as _ } from "lit/decorators.js";
+import { SbbFocusTrapController as K, sbbInputModalityDetector as q, IS_FOCUSABLE_QUERY as D } from "../../core/a11y.js";
+import { SbbOpenCloseBaseElement as $ } from "../../core/base-elements/open-close-base-element.js";
+import { SbbLanguageController as P, SbbMediaMatcherController as R, SbbMediaQueryBreakpointSmallAndBelow as N } from "../../core/controllers.js";
+import { forceType as f, omitEmptyConverter as Z, idReference as H } from "../../core/decorators.js";
+import { isZeroAnimationDuration as j } from "../../core/dom.js";
+import { i18nGoBack as F } from "../../core/i18n.js";
+import { SbbUpdateSchedulerMixin as Q, ɵstateController as I } from "../../core/mixins.js";
+import { removeAriaOverlayTriggerAttributes as W, setAriaOverlayTriggerAttributes as G } from "../../core/overlay.js";
+import { boxSizingStyles as Y } from "../../core/styles.js";
+import "../../button/transparent-button.js";
+import "../../divider.js";
+const J = U`: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}}`;
+let V = 0, pt = (() => {
+  var b, c, g, d, o;
+  let e = Q($), s, a = [], h = [], y, w = [], k = [], E, C = [], x = [], L, A = [], B = [];
+  return o = class extends e {
+    constructor() {
+      super();
+      p(this, b);
+      p(this, c);
+      p(this, g);
+      p(this, d);
+      r(this, b, l(this, a, "")), r(this, c, (l(this, h), l(this, w, null))), r(this, g, (l(this, k), l(this, C, ""))), r(this, d, (l(this, x), l(this, A, ""))), this._firstLevelNavigation = (l(this, B), null), this._triggerElement = null, this._language = new P(this), this._focusTrapController = new K(this), this._lastKeydownEvent = null, this._mediaMatcherController = new R(this, {
+        [N]: (t) => {
+          this.state !== "closed" && this._setNavigationInert(t);
+        }
+      }), this._handleNavigationSectionClose = (t) => {
+        t.composedPath().filter((i) => i instanceof HTMLElement).some((i) => this._isCloseElement(i)) && this.close();
+      }, this.addEventListener?.("keydown", (t) => {
+        this._lastKeydownEvent = t;
+      }), this.addEventListener?.("focusout", (t) => {
+        if (t.relatedTarget instanceof HTMLElement && !this.contains(t.relatedTarget) && q.mostRecentModality === "keyboard" && this._lastKeydownEvent?.key === "Tab" && this._triggerElement) {
+          const i = this.closest("sbb-navigation"), n = Array.from(i?.querySelectorAll(D) ?? []).filter((u) => !this.contains(u));
+          if (this._lastKeydownEvent.shiftKey || !n.length)
+            this._triggerElement?.focus();
+          else {
+            const u = n.indexOf(this._triggerElement);
+            (n[u + 1] ?? i.closeButton)?.focus();
+          }
+        }
+      });
+    }
+    /**
+     * The label to be shown before the action list.
+     */
+    get titleContent() {
+      return v(this, b);
+    }
+    set titleContent(t) {
+      r(this, b, t);
+    }
+    /**
+     * The element that will trigger the navigation section.
+     *
+     * For attribute usage, provide an id reference.
+     */
+    get trigger() {
+      return v(this, c);
+    }
+    set trigger(t) {
+      r(this, c, t);
+    }
+    /**
+     * This will be forwarded as aria-label to the nav element and is read as a title of the navigation-section.
+     */
+    get accessibilityLabel() {
+      return v(this, g);
+    }
+    set accessibilityLabel(t) {
+      r(this, g, t);
+    }
+    /**
+     * This will be forwarded as aria-label to the back button element.
+     */
+    get accessibilityBackLabel() {
+      return v(this, d);
+    }
+    set accessibilityBackLabel(t) {
+      r(this, d, t);
+    }
+    /** The state of the component. */
+    set state(t) {
+      super.state = t, this.internals.ariaHidden = this.state !== "opened" ? "true" : null;
+    }
+    get state() {
+      return super.state;
+    }
+    /**
+     * Opens the navigation section on trigger click.
+     */
+    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());
+    }
+    _isZeroAnimationDuration() {
+      return j(this, "--sbb-navigation-section-animation-duration");
+    }
+    _handleOpening() {
+      this.state = "opened", this.inert = !1, 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(), this._isBelowLarge() && this._triggerElement && this._triggerElement.focus(), this.completeUpdate(), this.dispatchCloseEvent();
+    }
+    _closePreviousNavigationSection() {
+      this._firstLevelNavigation?.activeNavigationSection?.close();
+    }
+    /**
+     * Closes the navigation section.
+     */
+    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());
+    }
+    // Check if the trigger is valid and attach click event listeners.
+    _configureTrigger() {
+      this.trigger !== this._triggerElement && (this._triggerAbortController?.abort(), W(this._triggerElement), this._triggerElement = this.trigger, this._triggerElement && (G(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")));
+    }
+    _isNavigationButton(t) {
+      return t?.localName === "sbb-navigation-button";
+    }
+    _setNavigationInert(t = this._isBelowLarge()) {
+      const i = this._firstLevelNavigation?.navigationContent;
+      i && (i.inert = t && this.state !== "closed");
+    }
+    // In rare cases it can be that the animationEnd event is triggered twice.
+    // To avoid entering a corrupt state, exit when state is not expected.
+    _onAnimationEnd(t) {
+      t.animationName === "open" && this.state === "opening" ? this._handleOpening() : t.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((t) => I(t).delete("action-active"));
+    }
+    _attachWindowEvents() {
+      this._windowEventsController = new AbortController(), window.addEventListener("keydown", (t) => this._onKeydownEvent(t), {
+        signal: this._windowEventsController.signal
+      }), window.addEventListener("click", this._handleNavigationSectionClose, {
+        signal: this._windowEventsController.signal
+      });
+    }
+    _isCloseElement(t) {
+      return t.nodeName === "A" || !t.hasAttribute("disabled") && (t.hasAttribute("sbb-navigation-close") || t.hasAttribute("sbb-navigation-section-close"));
+    }
+    _isBelowLarge() {
+      return this._mediaMatcherController.matches(N) ?? !1;
+    }
+    // Closes the navigation on "Esc" key pressed.
+    _onKeydownEvent(t) {
+      this.state === "opened" && t.key === "Escape" && this.close();
+    }
+    _checkActiveAction() {
+      const t = this.querySelector(":is(sbb-navigation-button, sbb-navigation-link).sbb-active");
+      I(t)?.toggle("action-active", !0);
+    }
+    connectedCallback() {
+      super.connectedCallback(), this.slot ||= "navigation-section", this.id ||= `sbb-navigation-section-${V++}`, this.hasUpdated && this._configureTrigger();
+    }
+    disconnectedCallback() {
+      super.disconnectedCallback(), this._triggerElement = null, this._triggerAbortController?.abort(), this._windowEventsController?.abort();
+    }
+    requestUpdate(t, i, n) {
+      super.requestUpdate(t, i, n), !O && (!t || t === "trigger") && this.hasUpdated && this._configureTrigger();
+    }
+    firstUpdated(t) {
+      super.firstUpdated(t), this._configureTrigger();
+    }
+    render() {
+      return M`
+      <div class="sbb-navigation-section__container">
+        <nav
+          @animationend=${this._onAnimationEnd}
+          class="sbb-navigation-section"
+          aria-labelledby=${this.accessibilityLabel ? T : "title"}
+          aria-label=${this.accessibilityLabel ? this.accessibilityLabel : T}
+        >
+          <div class="sbb-navigation-section__wrapper">
+            <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 || F[this._language.current]}
+                  negative
+                  size="m"
+                  type="button"
+                  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>
+    `;
+    }
+  }, b = new WeakMap(), c = new WeakMap(), g = new WeakMap(), d = new WeakMap(), (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(e[Symbol.metadata] ?? null) : void 0;
+    s = [f(), _({ attribute: "title-content", reflect: !0, converter: Z })], y = [H(), _()], E = [f(), _({ attribute: "accessibility-label" })], L = [f(), _({ attribute: "accessibility-back-label" })], m(o, null, s, { kind: "accessor", name: "titleContent", static: !1, private: !1, access: { has: (i) => "titleContent" in i, get: (i) => i.titleContent, set: (i, n) => {
+      i.titleContent = n;
+    } }, metadata: t }, a, h), m(o, null, y, { kind: "accessor", name: "trigger", static: !1, private: !1, access: { has: (i) => "trigger" in i, get: (i) => i.trigger, set: (i, n) => {
+      i.trigger = n;
+    } }, metadata: t }, w, k), m(o, null, E, { kind: "accessor", name: "accessibilityLabel", static: !1, private: !1, access: { has: (i) => "accessibilityLabel" in i, get: (i) => i.accessibilityLabel, set: (i, n) => {
+      i.accessibilityLabel = n;
+    } }, metadata: t }, C, x), m(o, null, L, { kind: "accessor", name: "accessibilityBackLabel", static: !1, private: !1, access: { has: (i) => "accessibilityBackLabel" in i, get: (i) => i.accessibilityBackLabel, set: (i, n) => {
+      i.accessibilityBackLabel = n;
+    } }, metadata: t }, A, B), t && Object.defineProperty(o, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), o.elementName = "sbb-navigation-section", o.styles = [Y, J], o;
+})();
+export {
+  pt as SbbNavigationSectionElement
+};

package/navigation/navigation-section.js

@@ -1,4 +1,7 @@
-import { t as e } from "../navigation-section.component-DwEXj603.js";
-e.define(), console.warn("The entrypoint '@sbb-esta/elements/navigation/navigation-section.js' has been deprecated.\nUse either '@sbb-esta/elements/navigation.js' or '@sbb-esta/elements/navigation.pure.js' instead.");
-//#endregion
-export { e as SbbNavigationSectionElement };
+import { SbbNavigationSectionElement as e } from "./navigation-section/navigation-section.component.js";
+e.define();
+console.warn(`The entrypoint '@sbb-esta/elements/navigation/navigation-section.js' has been deprecated.
+Use either '@sbb-esta/elements/navigation.js' or '@sbb-esta/elements/navigation.pure.js' instead.`);
+export {
+  e as SbbNavigationSectionElement
+};

package/navigation/navigation.js

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

package/navigation.js

@@ -1,11 +1,22 @@
-import { t as e } from "./navigation-action-common-Dcb95pqU.js";
-import { SbbNavigationButtonElement as t } from "./navigation/navigation-button/navigation-button.component.js";
-import { SbbNavigationLinkElement as n } from "./navigation/navigation-link/navigation-link.component.js";
-import { t as r } from "./navigation-list.component-BhV-uAfU.js";
-import { t as i } from "./navigation-marker.component-CIUu5VVZ.js";
-import { t as a } from "./navigation-section.component-DwEXj603.js";
-import { t as o } from "./navigation.component-BYqJ9Cqt.js";
-import "./navigation.pure.js";
-o.define(), t.define(), n.define(), r.define(), i.define(), a.define();
-//#endregion
-export { e as SbbNavigationActionCommonElementMixin, t as SbbNavigationButtonElement, o as SbbNavigationElement, n as SbbNavigationLinkElement, r as SbbNavigationListElement, i as SbbNavigationMarkerElement, a as SbbNavigationSectionElement };
+import { SbbNavigationActionCommonElementMixin as v } from "./navigation/common/navigation-action-common.js";
+import { SbbNavigationButtonElement as i } from "./navigation/navigation-button/navigation-button.component.js";
+import { SbbNavigationLinkElement as e } from "./navigation/navigation-link/navigation-link.component.js";
+import { SbbNavigationListElement as o } from "./navigation/navigation-list/navigation-list.component.js";
+import { SbbNavigationMarkerElement as t } from "./navigation/navigation-marker/navigation-marker.component.js";
+import { SbbNavigationSectionElement as n } from "./navigation/navigation-section/navigation-section.component.js";
+import { SbbNavigationElement as m } from "./navigation/navigation/navigation.component.js";
+m.define();
+i.define();
+e.define();
+o.define();
+t.define();
+n.define();
+export {
+  v as SbbNavigationActionCommonElementMixin,
+  i as SbbNavigationButtonElement,
+  m as SbbNavigationElement,
+  e as SbbNavigationLinkElement,
+  o as SbbNavigationListElement,
+  t as SbbNavigationMarkerElement,
+  n as SbbNavigationSectionElement
+};

package/navigation.pure.js

@@ -1,8 +1,16 @@
-import { t as e } from "./navigation-action-common-Dcb95pqU.js";
-import { SbbNavigationButtonElement as t } from "./navigation/navigation-button/navigation-button.component.js";
-import { SbbNavigationLinkElement as n } from "./navigation/navigation-link/navigation-link.component.js";
-import { t as r } from "./navigation-list.component-BhV-uAfU.js";
-import { t as i } from "./navigation-marker.component-CIUu5VVZ.js";
-import { t as a } from "./navigation-section.component-DwEXj603.js";
-import { t as o } from "./navigation.component-BYqJ9Cqt.js";
-export { e as SbbNavigationActionCommonElementMixin, t as SbbNavigationButtonElement, o as SbbNavigationElement, n as SbbNavigationLinkElement, r as SbbNavigationListElement, i as SbbNavigationMarkerElement, a as SbbNavigationSectionElement };
+import { SbbNavigationActionCommonElementMixin as e } from "./navigation/common/navigation-action-common.js";
+import { SbbNavigationButtonElement as n } from "./navigation/navigation-button/navigation-button.component.js";
+import { SbbNavigationLinkElement as r } from "./navigation/navigation-link/navigation-link.component.js";
+import { SbbNavigationListElement as b } from "./navigation/navigation-list/navigation-list.component.js";
+import { SbbNavigationMarkerElement as S } from "./navigation/navigation-marker/navigation-marker.component.js";
+import { SbbNavigationSectionElement as g } from "./navigation/navigation-section/navigation-section.component.js";
+import { SbbNavigationElement as p } from "./navigation/navigation/navigation.component.js";
+export {
+  e as SbbNavigationActionCommonElementMixin,
+  n as SbbNavigationButtonElement,
+  p as SbbNavigationElement,
+  r as SbbNavigationLinkElement,
+  b as SbbNavigationListElement,
+  S as SbbNavigationMarkerElement,
+  g as SbbNavigationSectionElement
+};