@sbb-esta/lyne-elements 4.0.0-next.2 → 4.0.0-next.4

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

@@ -1,19 +1,19 @@
-var d = (i) => {
+var m = (i) => {
   throw TypeError(i);
 };
-var m = (i, e, a) => e.has(i) || d("Cannot " + a);
-var p = (i, e, a) => (m(i, e, "read from private field"), a ? a.call(i) : e.get(i)), f = (i, e, a) => e.has(i) ? d("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(i) : e.set(i, a), b = (i, e, a, n) => (m(i, e, "write to private field"), n ? n.call(i, a) : e.set(i, a), a);
+var d = (i, e, a) => e.has(i) || m("Cannot " + a);
+var p = (i, e, a) => (d(i, e, "read from private field"), a ? a.call(i) : e.get(i)), f = (i, e, a) => e.has(i) ? m("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(i) : e.set(i, a), b = (i, e, a, n) => (d(i, e, "write to private field"), n ? n.call(i, a) : e.set(i, a), a);
 import { __esDecorate as u, __runInitializers as l } from "tslib";
-import { ResizeController as x } from "@lit-labs/observers/resize-controller.js";
-import { css as y, LitElement as _ } from "lit";
-import { customElement as z, property as A } from "lit/decorators.js";
+import { ResizeController as y } from "@lit-labs/observers/resize-controller.js";
+import { css as _, LitElement as z } from "lit";
+import { customElement as A, property as S } from "lit/decorators.js";
 import { isLean as w } from "../../core/dom.js";
-import { SbbNamedSlotListMixin as S } from "../../core/mixins.js";
-import { boxSizingStyles as C } from "../../core/styles.js";
-const M = y`: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([data-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 = (() => {
+import { SbbElementInternalsMixin as C, SbbNamedSlotListMixin as M, ɵstateController as k } from "../../core/mixins.js";
+import { boxSizingStyles as E } from "../../core/styles.js";
+const I = _`: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 R = (() => {
   var o, s;
-  let i = [z("sbb-navigation-marker")], e, a = [], n, c = S(_), v, g = [], h = [];
+  let i = [A("sbb-navigation-marker")], e, a = [], n, c = C(M(z)), v, g = [], h = [];
   return s = class extends c {
     constructor() {
       super();
@@ -21,7 +21,7 @@ let j = (() => {
       this.listChildLocalNames = [
         "sbb-navigation-button",
         "sbb-navigation-link"
-      ], b(this, o, l(this, g, w() ? "s" : "l")), this._currentActiveAction = l(this, h), this.addController(new x(this, {
+      ], b(this, o, l(this, g, w() ? "s" : "l")), this._currentActiveAction = l(this, h), this.addController(new y(this, {
         skipInitial: !0,
         callback: () => this._setMarkerPosition()
       }));
@@ -37,12 +37,12 @@ let j = (() => {
       b(this, o, t);
     }
     willUpdate(t) {
-      super.willUpdate(t), (t.has("size") || t.has("listChildren")) && this._updateMarkerActions(), this.toggleAttribute("data-has-active-action", !!this._currentActiveAction);
+      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.hasAttribute("data-action-active")), this._setMarkerPosition();
+      this._currentActiveAction = this.listChildren.find((t) => t.matches(":is(:state(action-active),[state--action-active])")), this._setMarkerPosition();
     }
     connectedCallback() {
       super.connectedCallback(), this._checkActiveAction();
@@ -52,13 +52,13 @@ let j = (() => {
       t && this.select(t);
     }
     select(t) {
-      t && (this.reset(), t.toggleAttribute("data-action-active", !0), this._currentActiveAction = t, setTimeout(() => this._setMarkerPosition()));
+      t && (this.reset(), k(t).add("action-active"), this._currentActiveAction = t, setTimeout(() => this._setMarkerPosition()));
     }
     firstUpdated(t) {
       super.firstUpdated(t), setTimeout(() => this._setMarkerPosition());
     }
     reset() {
-      this._currentActiveAction && (this._currentActiveAction.removeAttribute("data-action-active"), this._currentActiveAction.connectedSection?.close(), this._currentActiveAction = void 0);
+      this._currentActiveAction && (k(this._currentActiveAction).delete("action-active"), this._currentActiveAction.connectedSection?.close(), this._currentActiveAction = void 0);
     }
     _setMarkerPosition() {
       if (!this._currentActiveAction)
@@ -71,11 +71,11 @@ let j = (() => {
     }
   }, o = new WeakMap(), n = s, (() => {
     const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(c[Symbol.metadata] ?? null) : void 0;
-    v = [A({ reflect: !0 })], u(s, null, v, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (r) => "size" in r, get: (r) => r.size, set: (r, k) => {
-      r.size = k;
+    v = [S({ reflect: !0 })], u(s, null, v, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (r) => "size" in r, get: (r) => r.size, set: (r, x) => {
+      r.size = x;
     } }, metadata: t }, g, h), u(null, e = { value: n }, i, { kind: "class", name: n.name, metadata: t }, null, a), n = e.value, t && Object.defineProperty(n, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), s.styles = [C, M], l(n, a), n;
+  })(), s.styles = [E, I], l(n, a), n;
 })();
 export {
-  j as SbbNavigationMarkerElement
+  R as SbbNavigationMarkerElement
 };

package/navigation/navigation-marker.d.ts

@@ -1,5 +1,5 @@
 /**
  * @entrypoint
  */
-export * from './navigation-marker/navigation-marker.component.js';
+export * from './navigation-marker/navigation-marker.component.ts';
 //# sourceMappingURL=navigation-marker.d.ts.map

package/navigation/navigation-section/navigation-section.component.d.ts

@@ -1,5 +1,7 @@
-import { CSSResultGroup, LitElement, PropertyDeclaration, PropertyValues, TemplateResult } from 'lit';
-declare const SbbNavigationSectionElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbUpdateSchedulerMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbElementInternalsMixinType> & typeof LitElement & import('../../core/mixins.js').SbbElementInternalsConstructor;
+import { CSSResultGroup, PropertyDeclaration, PropertyValues, TemplateResult } from 'lit';
+import { SbbOpenCloseBaseElement } from '../../core/base-elements/open-close-base-element.ts';
+import { SbbOpenedClosedState } from '../../core/interfaces.ts';
+declare const SbbNavigationSectionElement_base: import('../../core/mixins.ts').AbstractConstructor<import('../../core/mixins.ts').SbbUpdateSchedulerMixinType> & typeof SbbOpenCloseBaseElement;
 /**
  * It can be used as a container for `sbb-navigation-list` within a `sbb-navigation`.
  *
@@ -25,11 +27,9 @@ export declare class SbbNavigationSectionElement extends SbbNavigationSectionEle
      * This will be forwarded as aria-label to the back button element.
      */
     accessor accessibilityBackLabel: string;
-    /**
-     * The state of the navigation section.
-     */
-    private set _state(value);
-    private get _state();
+    /** The state of the component. */
+    protected set state(state: SbbOpenedClosedState);
+    protected get state(): SbbOpenedClosedState;
     private _firstLevelNavigation?;
     private _triggerElement;
     private _triggerAbortController;
@@ -37,6 +37,7 @@ export declare class SbbNavigationSectionElement extends SbbNavigationSectionEle
     private _language;
     private _focusTrapController;
     private _lastKeydownEvent;
+    private _mediaMatcherController;
     constructor();
     /**
      * Opens the navigation section on trigger click.

package/navigation/navigation-section/navigation-section.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"navigation-section.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/navigation/navigation-section/navigation-section.component.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAGnB,UAAU,EAEV,KAAK,mBAAmB,EACxB,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AA6Bb,OAAO,oCAAoC,CAAC;AAC5C,OAAO,kBAAkB,CAAC;;AAI1B;;;;GAIG;AACH,qBAEM,2BAA4B,SAAQ,gCAEzC;IACC,OAAuB,MAAM,EAAE,cAAc,CAA4B;IAEzE;;OAEG;IACH,SAEgB,YAAY,EAAE,MAAM,CAAM;IAE1C;;;;OAIG;IACH,SAEgB,OAAO,EAAE,WAAW,GAAG,IAAI,CAAQ;IAEnD;;OAEG;IACH,SAEgB,kBAAkB,EAAE,MAAM,CAAM;IAEhD;;OAEG;IACH,SAEgB,sBAAsB,EAAE,MAAM,CAAM;IAEpD;;OAEG;IACH,OAAO,KAAK,MAAM,QAGjB;IACD,OAAO,KAAK,MAAM,GAEjB;IAED,OAAO,CAAC,qBAAqB,CAAC,CAAqC;IACnE,OAAO,CAAC,eAAe,CAA4B;IACnD,OAAO,CAAC,uBAAuB,CAAmB;IAClD,OAAO,CAAC,uBAAuB,CAAmB;IAClD,OAAO,CAAC,SAAS,CAAmC;IACpD,OAAO,CAAC,oBAAoB,CAAoC;IAChE,OAAO,CAAC,iBAAiB,CAA8B;;IA0CvD;;OAEG;IACI,IAAI,IAAI,IAAI;IAsBnB,OAAO,CAAC,wBAAwB;IAIhC,OAAO,CAAC,cAAc;IAUtB,OAAO,CAAC,cAAc;IAYtB,OAAO,CAAC,+BAA+B;IAIvC;;OAEG;IACI,KAAK,IAAI,IAAI;IAkBpB,OAAO,CAAC,iBAAiB;IAwBzB,OAAO,CAAC,mBAAmB;IAI3B,OAAO,CAAC,mBAAmB;IAS3B,OAAO,CAAC,eAAe;IAQvB,OAAO,CAAC,WAAW;IAQnB,OAAO,CAAC,mBAAmB;IAa3B,OAAO,CAAC,6BAA6B,CASnC;IAEF,OAAO,CAAC,eAAe;IASvB,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,kBAAkB;IAMV,iBAAiB,IAAI,IAAI;IAUzB,oBAAoB,IAAI,IAAI;IAO5B,aAAa,CAC3B,IAAI,CAAC,EAAE,WAAW,EAClB,QAAQ,CAAC,EAAE,OAAO,EAClB,OAAO,CAAC,EAAE,mBAAmB,GAC5B,IAAI;cAQY,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAK3D,MAAM,IAAI,cAAc;CAmC5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,wBAAwB,EAAE,2BAA2B,CAAC;KACvD;CACF"}
+{"version":3,"file":"navigation-section.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/navigation/navigation-section/navigation-section.component.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAInB,KAAK,mBAAmB,EACxB,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAQb,OAAO,EAAE,uBAAuB,EAAE,MAAM,qDAAqD,CAAC;AAS9F,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAarE,OAAO,oCAAoC,CAAC;AAC5C,OAAO,kBAAkB,CAAC;;AAI1B;;;;GAIG;AACH,qBAEM,2BAA4B,SAAQ,gCAAgD;IACxF,OAAuB,MAAM,EAAE,cAAc,CAA4B;IAEzE;;OAEG;IACH,SAEgB,YAAY,EAAE,MAAM,CAAM;IAE1C;;;;OAIG;IACH,SAEgB,OAAO,EAAE,WAAW,GAAG,IAAI,CAAQ;IAEnD;;OAEG;IACH,SAEgB,kBAAkB,EAAE,MAAM,CAAM;IAEhD;;OAEG;IACH,SAEgB,sBAAsB,EAAE,MAAM,CAAM;IAEpD,kCAAkC;IAClC,cAAuB,KAAK,CAAC,KAAK,EAAE,oBAAoB,EAGvD;IACD,cAAuB,KAAK,IAAI,oBAAoB,CAEnD;IAED,OAAO,CAAC,qBAAqB,CAAC,CAAqC;IACnE,OAAO,CAAC,eAAe,CAA4B;IACnD,OAAO,CAAC,uBAAuB,CAAmB;IAClD,OAAO,CAAC,uBAAuB,CAAmB;IAClD,OAAO,CAAC,SAAS,CAAmC;IACpD,OAAO,CAAC,oBAAoB,CAAoC;IAChE,OAAO,CAAC,iBAAiB,CAA8B;IACvD,OAAO,CAAC,uBAAuB,CAM5B;;IAgCH;;OAEG;IACI,IAAI,IAAI,IAAI;IAwBnB,OAAO,CAAC,wBAAwB;IAIhC,OAAO,CAAC,cAAc;IAWtB,OAAO,CAAC,cAAc;IAatB,OAAO,CAAC,+BAA+B;IAIvC;;OAEG;IACI,KAAK,IAAI,IAAI;IAoBpB,OAAO,CAAC,iBAAiB;IAwBzB,OAAO,CAAC,mBAAmB;IAI3B,OAAO,CAAC,mBAAmB;IAS3B,OAAO,CAAC,eAAe;IAQvB,OAAO,CAAC,WAAW;IAQnB,OAAO,CAAC,mBAAmB;IAa3B,OAAO,CAAC,6BAA6B,CASnC;IAEF,OAAO,CAAC,eAAe;IASvB,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,kBAAkB;IAOV,iBAAiB,IAAI,IAAI;IASzB,oBAAoB,IAAI,IAAI;IAO5B,aAAa,CAC3B,IAAI,CAAC,EAAE,WAAW,EAClB,QAAQ,CAAC,EAAE,OAAO,EAClB,OAAO,CAAC,EAAE,mBAAmB,GAC5B,IAAI;cAQY,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAK3D,MAAM,IAAI,cAAc;CAmC5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,wBAAwB,EAAE,2BAA2B,CAAC;KACvD;CACF"}

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

@@ -1,48 +1,49 @@
 var I = (e) => {
   throw TypeError(e);
 };
-var U = (e, a, n) => a.has(e) || I("Cannot " + n);
-var h = (e, a, n) => (U(e, a, "read from private field"), n ? n.call(e) : a.get(e)), _ = (e, a, n) => a.has(e) ? I("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(e) : a.set(e, n), l = (e, a, n, r) => (U(e, a, "write to private field"), r ? r.call(e, n) : a.set(e, n), n);
-import { __esDecorate as p, __runInitializers as b } from "tslib";
-import { css as O, LitElement as D, isServer as K, nothing as M, html as q } from "lit";
-import { customElement as $, property as m } from "lit/decorators.js";
-import { SbbFocusTrapController as P, sbbInputModalityDetector as R, IS_FOCUSABLE_QUERY as Z } from "../../core/a11y.js";
-import { SbbLanguageController as H, SbbMediaMatcherController as j, SbbMediaQueryBreakpointLargeAndBelow as F } from "../../core/controllers.js";
-import { forceType as f, omitEmptyConverter as Q, idReference as W } from "../../core/decorators.js";
-import { isZeroAnimationDuration as G, isBreakpoint as Y } from "../../core/dom.js";
+var U = (e, s, a) => s.has(e) || I("Cannot " + a);
+var h = (e, s, a) => (U(e, s, "read from private field"), a ? a.call(e) : s.get(e)), p = (e, s, a) => s.has(e) ? I("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(e) : s.set(e, a), l = (e, s, a, r) => (U(e, s, "write to private field"), r ? r.call(e, a) : s.set(e, a), a);
+import { __esDecorate as _, __runInitializers as b } from "tslib";
+import { css as K, isServer as q, nothing as O, html as $ } from "lit";
+import { customElement as P, property as m } from "lit/decorators.js";
+import { SbbFocusTrapController as R, sbbInputModalityDetector as Z, IS_FOCUSABLE_QUERY as H } from "../../core/a11y.js";
+import { SbbOpenCloseBaseElement as j } from "../../core/base-elements/open-close-base-element.js";
+import { SbbLanguageController as F, SbbMediaMatcherController as Q, SbbMediaQueryBreakpointLargeAndBelow as M } from "../../core/controllers.js";
+import { forceType as f, omitEmptyConverter as W, idReference as G } from "../../core/decorators.js";
+import { isZeroAnimationDuration as Y } from "../../core/dom.js";
 import { i18nGoBack as J } from "../../core/i18n.js";
-import { SbbUpdateSchedulerMixin as V, SbbElementInternalsMixin as X } from "../../core/mixins.js";
-import { removeAriaOverlayTriggerAttributes as tt, setAriaOverlayTriggerAttributes as it } from "../../core/overlay.js";
-import { boxSizingStyles as et } from "../../core/styles.js";
+import { SbbUpdateSchedulerMixin as V, ɵstateController as D } from "../../core/mixins.js";
+import { removeAriaOverlayTriggerAttributes as X, setAriaOverlayTriggerAttributes as tt } from "../../core/overlay.js";
+import { boxSizingStyles as it } from "../../core/styles.js";
 import "../../button/transparent-button.js";
 import "../../divider.js";
-const at = O`: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([data-state=opened]){--sbb-navigation-section-pointer-events: all}:host([data-state=opening]){--sbb-navigation-section-position: absolute}:host(:is([data-state=opening],[data-state=closing])){--sbb-navigation-section-pointer-events: none}:host([data-state]:not([data-state=closed])){--sbb-navigation-section-display: block}::slotted(*){padding-inline-start:var(--sbb-navigation-section-content-padding-inline-start)}::slotted([data-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([data-state]:not([data-state=closed])) .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([data-state][data-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([data-state=opening],[data-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([data-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([data-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 nt = 0, yt = (() => {
+const et = K`: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 st = 0, yt = (() => {
   var c, g, d, v, o;
-  let e = [$("sbb-navigation-section")], a, n = [], r, y = V(X(D)), w, k = [], E = [], x, C = [], L = [], A, S = [], z = [], B, N = [], T = [];
+  let e = [P("sbb-navigation-section")], s, a = [], r, y = V(j), w, k = [], E = [], C, x = [], L = [], A, S = [], B = [], z, N = [], T = [];
   return o = class extends y {
     constructor() {
       super();
-      _(this, c);
-      _(this, g);
-      _(this, d);
-      _(this, v);
-      l(this, c, b(this, k, "")), l(this, g, (b(this, E), b(this, C, null))), l(this, d, (b(this, L), b(this, S, ""))), l(this, v, (b(this, z), b(this, N, ""))), this._firstLevelNavigation = (b(this, T), null), this._triggerElement = null, this._language = new H(this), this._focusTrapController = new P(this), this._lastKeydownEvent = null, this._handleNavigationSectionClose = (t) => {
-        t.composedPath().filter((i) => i instanceof HTMLElement).some((i) => this._isCloseElement(i)) && this.close();
-      }, this.addController(new j(this, {
-        [F]: (t) => {
-          this._state !== "closed" && this._setNavigationInert(t);
+      p(this, c);
+      p(this, g);
+      p(this, d);
+      p(this, v);
+      l(this, c, b(this, k, "")), l(this, g, (b(this, E), b(this, x, null))), l(this, d, (b(this, L), b(this, S, ""))), l(this, v, (b(this, B), b(this, N, ""))), this._firstLevelNavigation = (b(this, T), null), this._triggerElement = null, this._language = new F(this), this._focusTrapController = new R(this), this._lastKeydownEvent = null, this._mediaMatcherController = new Q(this, {
+        [M]: (t) => {
+          this.state !== "closed" && this._setNavigationInert(t);
         }
-      })), this.addEventListener?.("keydown", (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) && R.mostRecentModality === "keyboard" && this._lastKeydownEvent?.key === "Tab" && this._triggerElement) {
-          const i = this.closest("sbb-navigation"), s = Array.from(i?.querySelectorAll(Z) ?? []).filter((u) => !this.contains(u));
-          if (this._lastKeydownEvent.shiftKey || !s.length)
+        if (t.relatedTarget instanceof HTMLElement && !this.contains(t.relatedTarget) && Z.mostRecentModality === "keyboard" && this._lastKeydownEvent?.key === "Tab" && this._triggerElement) {
+          const i = this.closest("sbb-navigation"), n = Array.from(i?.querySelectorAll(H) ?? []).filter((u) => !this.contains(u));
+          if (this._lastKeydownEvent.shiftKey || !n.length)
             this._triggerElement?.focus();
           else {
-            const u = s.indexOf(this._triggerElement);
-            (s[u + 1] ?? i.closeButton)?.focus();
+            const u = n.indexOf(this._triggerElement);
+            (n[u + 1] ?? i.closeButton)?.focus();
           }
         }
       });
@@ -85,29 +86,27 @@ let nt = 0, yt = (() => {
     set accessibilityBackLabel(t) {
       l(this, v, t);
     }
-    /**
-     * The state of the navigation section.
-     */
-    set _state(t) {
-      this.setAttribute("data-state", t), this.ariaHidden = this._state !== "opened" ? "true" : null;
+    /** The state of the component. */
+    set state(t) {
+      super.state = t, this.internals.ariaHidden = this.state !== "opened" ? "true" : null;
     }
-    get _state() {
-      return this.getAttribute("data-state");
+    get state() {
+      return super.state;
     }
     /**
      * Opens the navigation section on trigger click.
      */
     open() {
-      this._state !== "closed" || !this.hasUpdated || (this._isNavigationButton(this._triggerElement) && this._triggerElement?.marker?.select(this._triggerElement), this._closePreviousNavigationSection(), this._state = "opening", this.startUpdate(), this.inert = !0, this._triggerElement?.setAttribute("aria-expanded", "true"), this._isZeroAnimationDuration() && this._handleOpening());
+      this.state !== "closed" || !this.hasUpdated || !this.dispatchBeforeOpenEvent() || (this._isNavigationButton(this._triggerElement) && this._triggerElement?.marker?.select(this._triggerElement), this._closePreviousNavigationSection(), this.state = "opening", this.dispatchEvent(new Event("ɵnavigationsectionopening")), this.startUpdate(), this.inert = !0, this._triggerElement?.setAttribute("aria-expanded", "true"), this._isZeroAnimationDuration() && this._handleOpening());
     }
     _isZeroAnimationDuration() {
-      return G(this, "--sbb-navigation-section-animation-duration");
+      return Y(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.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.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();
@@ -116,11 +115,11 @@ let nt = 0, yt = (() => {
      * Closes the navigation section.
      */
     close() {
-      this._state === "opened" && (this._state = "closing", this.startUpdate(), this.inert = !0, this._triggerElement?.setAttribute("aria-expanded", "false"), this._isZeroAnimationDuration() && this._handleClosing());
+      this.state !== "opened" || !this.dispatchBeforeCloseEvent() || (this.dispatchEvent(new Event("ɵnavigationsectionclosing")), this.state = "closing", this.startUpdate(), this.inert = !0, this._triggerElement?.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(), tt(this._triggerElement), this._triggerElement = this.trigger, this._triggerElement && (it(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(), {
+      this.trigger !== this._triggerElement && (this._triggerAbortController?.abort(), X(this._triggerElement), this._triggerElement = this.trigger, this._triggerElement && (tt(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")));
     }
@@ -129,15 +128,15 @@ let nt = 0, yt = (() => {
     }
     _setNavigationInert(t = this._isBelowLarge()) {
       const i = this._firstLevelNavigation?.navigationContent;
-      i && (i.inert = t && this._state !== "closed");
+      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();
+      t.animationName === "open" && this.state === "opening" ? this._handleOpening() : t.animationName === "close" && this.state === "closing" && this._handleClosing();
     }
     _resetLists() {
-      Array.from(this.querySelectorAll("[data-section-action][data-action-active]") ?? []).forEach((t) => t.removeAttribute("data-action-active"));
+      Array.from(this.querySelectorAll(":is(:state(section-action),[state--section-action]):is(:state(action-active),[state--action-active])") ?? []).forEach((t) => D(t).delete("action-active"));
     }
     _attachWindowEvents() {
       this._windowEventsController = new AbortController(), window.addEventListener("keydown", (t) => this._onKeydownEvent(t), {
@@ -150,35 +149,36 @@ let nt = 0, yt = (() => {
       return t.nodeName === "A" || !t.hasAttribute("disabled") && (t.hasAttribute("sbb-navigation-close") || t.hasAttribute("sbb-navigation-section-close"));
     }
     _isBelowLarge() {
-      return Y("zero", "large") ?? !1;
+      return this._mediaMatcherController.matches(M) ?? !1;
     }
     // Closes the navigation on "Esc" key pressed.
     _onKeydownEvent(t) {
-      this._state === "opened" && t.key === "Escape" && this.close();
+      this.state === "opened" && t.key === "Escape" && this.close();
     }
     _checkActiveAction() {
-      this.querySelector(":is(sbb-navigation-button, sbb-navigation-link).sbb-active")?.toggleAttribute("data-action-active", !0);
+      const t = this.querySelector(":is(sbb-navigation-button, sbb-navigation-link).sbb-active");
+      D(t)?.toggle("action-active", !0);
     }
     connectedCallback() {
-      super.connectedCallback(), this.slot ||= "navigation-section", this.id ||= `sbb-navigation-section-${nt++}`, this._state ||= "closed", this.hasUpdated && this._configureTrigger();
+      super.connectedCallback(), this.slot ||= "navigation-section", this.id ||= `sbb-navigation-section-${st++}`, this.hasUpdated && this._configureTrigger();
     }
     disconnectedCallback() {
       super.disconnectedCallback(), this._triggerElement = null, this._triggerAbortController?.abort(), this._windowEventsController?.abort();
     }
-    requestUpdate(t, i, s) {
-      super.requestUpdate(t, i, s), !K && (!t || t === "trigger") && this.hasUpdated && this._configureTrigger();
+    requestUpdate(t, i, n) {
+      super.requestUpdate(t, i, n), !q && (!t || t === "trigger") && this.hasUpdated && this._configureTrigger();
     }
     firstUpdated(t) {
       super.firstUpdated(t), this._configureTrigger();
     }
     render() {
-      return q`
+      return $`
       <div class="sbb-navigation-section__container">
         <nav
           @animationend=${this._onAnimationEnd}
           class="sbb-navigation-section"
-          aria-labelledby=${this.accessibilityLabel ? M : "title"}
-          aria-label=${this.accessibilityLabel ? this.accessibilityLabel : M}
+          aria-labelledby=${this.accessibilityLabel ? O : "title"}
+          aria-label=${this.accessibilityLabel ? this.accessibilityLabel : O}
         >
           <div class="sbb-navigation-section__wrapper">
             <div class="sbb-navigation-section__content">
@@ -208,16 +208,16 @@ let nt = 0, yt = (() => {
     }
   }, c = new WeakMap(), g = new WeakMap(), d = new WeakMap(), v = new WeakMap(), r = o, (() => {
     const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(y[Symbol.metadata] ?? null) : void 0;
-    w = [f(), m({ attribute: "title-content", reflect: !0, converter: Q })], x = [W(), m()], A = [f(), m({ attribute: "accessibility-label" })], B = [f(), m({ attribute: "accessibility-back-label" })], p(o, null, w, { kind: "accessor", name: "titleContent", static: !1, private: !1, access: { has: (i) => "titleContent" in i, get: (i) => i.titleContent, set: (i, s) => {
-      i.titleContent = s;
-    } }, metadata: t }, k, E), p(o, null, x, { kind: "accessor", name: "trigger", static: !1, private: !1, access: { has: (i) => "trigger" in i, get: (i) => i.trigger, set: (i, s) => {
-      i.trigger = s;
-    } }, metadata: t }, C, L), p(o, null, A, { kind: "accessor", name: "accessibilityLabel", static: !1, private: !1, access: { has: (i) => "accessibilityLabel" in i, get: (i) => i.accessibilityLabel, set: (i, s) => {
-      i.accessibilityLabel = s;
-    } }, metadata: t }, S, z), p(o, null, B, { kind: "accessor", name: "accessibilityBackLabel", static: !1, private: !1, access: { has: (i) => "accessibilityBackLabel" in i, get: (i) => i.accessibilityBackLabel, set: (i, s) => {
-      i.accessibilityBackLabel = s;
-    } }, metadata: t }, N, T), p(null, a = { value: r }, e, { kind: "class", name: r.name, metadata: t }, null, n), r = a.value, t && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), o.styles = [et, at], b(r, n), r;
+    w = [f(), m({ attribute: "title-content", reflect: !0, converter: W })], C = [G(), m()], A = [f(), m({ attribute: "accessibility-label" })], z = [f(), m({ attribute: "accessibility-back-label" })], _(o, null, w, { 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 }, k, E), _(o, null, C, { 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 }, x, L), _(o, null, A, { 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 }, S, B), _(o, null, z, { 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 }, N, T), _(null, s = { value: r }, e, { kind: "class", name: r.name, metadata: t }, null, a), r = s.value, t && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), o.styles = [it, et], b(r, a), r;
 })();
 export {
   yt as SbbNavigationSectionElement

package/navigation/navigation-section.d.ts

@@ -1,5 +1,5 @@
 /**
  * @entrypoint
  */
-export * from './navigation-section/navigation-section.component.js';
+export * from './navigation-section/navigation-section.component.ts';
 //# sourceMappingURL=navigation-section.d.ts.map

package/navigation/navigation.d.ts

@@ -1,5 +1,5 @@
 /**
  * @entrypoint
  */
-export * from './navigation/navigation.component.js';
+export * from './navigation/navigation.component.ts';
 //# sourceMappingURL=navigation.d.ts.map

package/navigation.d.ts

@@ -1,11 +1,11 @@
 /**
  * @entrypoint
  */
-export * from './navigation/navigation.js';
-export * from './navigation/navigation-list.js';
-export * from './navigation/navigation-marker.js';
-export * from './navigation/navigation-section.js';
-export * from './navigation/navigation-button.js';
-export * from './navigation/navigation-link.js';
-export * from './navigation/common.js';
+export * from './navigation/navigation.ts';
+export * from './navigation/navigation-list.ts';
+export * from './navigation/navigation-marker.ts';
+export * from './navigation/navigation-section.ts';
+export * from './navigation/navigation-button.ts';
+export * from './navigation/navigation-link.ts';
+export * from './navigation/common.ts';
 //# sourceMappingURL=navigation.d.ts.map

package/notification/notification.component.d.ts

@@ -1,5 +1,5 @@
 import { CSSResultGroup, LitElement, PropertyValues, TemplateResult } from 'lit';
-declare const SbbNotificationElement_base: import('../core/mixins.js').AbstractConstructor<import('../icon.js').SbbIconNameMixinType> & import('../core/mixins.js').AbstractConstructor<import('../core/mixins.js').SbbReadonlyMixinType> & import('../core/mixins.js').AbstractConstructor<import('../core/mixins.js').SbbElementInternalsMixinType> & typeof LitElement & import('../core/mixins.js').SbbElementInternalsConstructor;
+declare const SbbNotificationElement_base: import('../core/mixins.ts').AbstractConstructor<import('../icon.ts').SbbIconNameMixinType> & import('../core/mixins.ts').AbstractConstructor<import('../core/mixins.ts').SbbReadonlyMixinType> & import('../core/mixins.ts').AbstractConstructor<import('../core/mixins.ts').SbbElementInternalsMixinType> & typeof LitElement & import('../core/mixins.ts').SbbElementInternalsConstructor;
 /**
  * It displays messages which require a user's attention without interrupting its tasks.
  *
@@ -26,18 +26,19 @@ export declare class SbbNotificationElement extends SbbNotificationElement_base
     accessor size: 's' | 'm';
     /** The enabled animations. */
     accessor animation: 'open' | 'close' | 'all' | 'none';
-    /** The state of the notification. */
+    /** The state of the component. */
     private set _state(value);
     private get _state();
+    private _stateInternal;
     private _notificationElement;
     private _resizeObserverTimeout;
     private _language;
     private _notificationResizeObserver;
+    constructor();
     protected willUpdate(changedProperties: PropertyValues<this>): void;
     private _open;
     close(): void;
     private _dispatchBeforeCloseEvent;
-    connectedCallback(): void;
     protected firstUpdated(changedProperties: PropertyValues<this>): void;
     private _isZeroAnimationDuration;
     private _setNotificationHeight;

package/notification/notification.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"notification.component.d.ts","sourceRoot":"","sources":["../../../src/elements/notification/notification.component.ts"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EAEV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAcb,OAAO,+BAA+B,CAAC;AACvC,OAAO,eAAe,CAAC;;AAYvB;;;;;;;;GAQG;AACH,qBAEM,sBAAuB,SAAQ,2BAEpC;IAEC,OAAuB,MAAM,EAAE,cAAc,CAA4B;IACzE,gBAAuB,MAAM;;;;;MAKlB;IAEX,oCAAoC;IACpC,SAA6C,IAAI,EAC7C,MAAM,GACN,MAAM,GACN,SAAS,GACT,MAAM,GACN,OAAO,CAAU;IAErB;;;OAGG;IACH,SAA6C,IAAI,EAAE,GAAG,GAAG,GAAG,CAAwB;IAEpF,8BAA8B;IAC9B,SAA6C,SAAS,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,MAAM,CAAS;IAElG,qCAAqC;IACrC,OAAO,KAAK,MAAM,QAEjB;IACD,OAAO,KAAK,MAAM,GAEjB;IAED,OAAO,CAAC,oBAAoB,CAAe;IAC3C,OAAO,CAAC,sBAAsB,CAA8C;IAC5E,OAAO,CAAC,SAAS,CAAmC;IACpD,OAAO,CAAC,2BAA2B,CAIhC;cAEgB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAQ5E,OAAO,CAAC,KAAK;IAcN,KAAK,IAAI,IAAI;IAYpB,OAAO,CAAC,yBAAyB;IAKjB,iBAAiB,IAAI,IAAI;cAMtB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAc9E,OAAO,CAAC,wBAAwB;IAIhC,OAAO,CAAC,sBAAsB;IAQ9B,OAAO,CAAC,qBAAqB;IAoB7B,OAAO,CAAC,2BAA2B;IAUnC,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,iBAAiB;IAOzB,OAAO,CAAC,eAAe;cAQJ,cAAc,IAAI,MAAM;cAIxB,MAAM,IAAI,cAAc;CA4B5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,kBAAkB,EAAE,sBAAsB,CAAC;KAC5C;CACF"}
+{"version":3,"file":"notification.component.d.ts","sourceRoot":"","sources":["../../../src/elements/notification/notification.component.ts"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EAEV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAcb,OAAO,+BAA+B,CAAC;AACvC,OAAO,eAAe,CAAC;;AAYvB;;;;;;;;GAQG;AACH,qBAEM,sBAAuB,SAAQ,2BAEpC;IACC,OAAuB,MAAM,EAAE,cAAc,CAA4B;IACzE,gBAAuB,MAAM;;;;;MAKlB;IAEX,oCAAoC;IACpC,SAA6C,IAAI,EAC7C,MAAM,GACN,MAAM,GACN,SAAS,GACT,MAAM,GACN,OAAO,CAAU;IAErB;;;OAGG;IACH,SAA6C,IAAI,EAAE,GAAG,GAAG,GAAG,CAAwB;IAEpF,8BAA8B;IAC9B,SAA6C,SAAS,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,MAAM,CAAS;IAElG,kCAAkC;IAClC,OAAO,KAAK,MAAM,QAQjB;IACD,OAAO,KAAK,MAAM,GAEjB;IACD,OAAO,CAAC,cAAc,CAAwB;IAE9C,OAAO,CAAC,oBAAoB,CAAe;IAC3C,OAAO,CAAC,sBAAsB,CAA8C;IAC5E,OAAO,CAAC,SAAS,CAAmC;IACpD,OAAO,CAAC,2BAA2B,CAIhC;;cAOgB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAQ5E,OAAO,CAAC,KAAK;IAcN,KAAK,IAAI,IAAI;IAYpB,OAAO,CAAC,yBAAyB;cAKd,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAc9E,OAAO,CAAC,wBAAwB;IAIhC,OAAO,CAAC,sBAAsB;IAQ9B,OAAO,CAAC,qBAAqB;IAoB7B,OAAO,CAAC,2BAA2B;IAUnC,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,iBAAiB;IAOzB,OAAO,CAAC,eAAe;cAQJ,cAAc,IAAI,MAAM;cAIxB,MAAM,IAAI,cAAc;CA4B5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,kBAAkB,EAAE,sBAAsB,CAAC;KAC5C;CACF"}