@sbb-esta/lyne-elements 0.52.1 → 0.52.2

package/navigation/navigation.js

@@ -1,75 +1,75 @@
-import { css as m, html as c } from "lit";
-import { property as p, state as u, customElement as f } from "lit/decorators.js";
-import { ref as d } from "lit/directives/ref.js";
-import { SbbFocusHandler as w, setModalityOnNextFocus as v } from "../core/a11y.js";
-import { SbbOpenCloseBaseElement as k } from "../core/base-elements.js";
-import { SbbConnectedAbortController as y, SbbLanguageController as x } from "../core/controllers.js";
-import { hostAttributes as _ } from "../core/decorators.js";
-import { SbbScrollHandler as A, findReferencedElement as E } from "../core/dom.js";
-import { i18nCloseNavigation as S } from "../core/i18n.js";
-import { SbbUpdateSchedulerMixin as C } from "../core/mixins.js";
-import { AgnosticMutationObserver as O, AgnosticResizeObserver as z } from "../core/observers.js";
-import { isEventOnElement as l, removeAriaOverlayTriggerAttributes as N, setAriaOverlayTriggerAttributes as T, applyInertMechanism as h, removeInertMechanism as g } from "../core/overlay.js";
+import { css as p, html as v } from "lit";
+import { property as m, state as u, customElement as _ } from "lit/decorators.js";
+import { ref as c } from "lit/directives/ref.js";
+import { SbbFocusHandler as f, setModalityOnNextFocus as g } from "../core/a11y.js";
+import { SbbOpenCloseBaseElement as w } from "../core/base-elements.js";
+import { SbbConnectedAbortController as k, SbbLanguageController as y } from "../core/controllers.js";
+import { hostAttributes as E } from "../core/decorators.js";
+import { SbbScrollHandler as x, findReferencedElement as C } from "../core/dom.js";
+import { i18nCloseNavigation as O } from "../core/i18n.js";
+import { SbbUpdateSchedulerMixin as S } from "../core/mixins.js";
+import { AgnosticMutationObserver as A, AgnosticResizeObserver as N } from "../core/observers.js";
+import { isEventOnElement as l, removeAriaOverlayTriggerAttributes as z, setAriaOverlayTriggerAttributes as T, applyInertMechanism as d, removeInertMechanism as h } from "../core/overlay.js";
 import "../button/transparent-button.js";
-const B = m`*,:before,:after{box-sizing:border-box}:host{--sbb-navigation-grid-column: 1 / 5;--sbb-navigation-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-3x) );--sbb-navigation-animation-easing: ease-in;--sbb-navigation-padding-inline: var(--sbb-layout-base-offset-responsive);--sbb-navigation-padding-block-start: var(--sbb-spacing-responsive-l);--sbb-navigation-padding-block-end: var(--sbb-spacing-responsive-xl);--sbb-navigation-backdrop-visibility: hidden;--sbb-navigation-backdrop-pointer-events: none;--sbb-navigation-backdrop-color: transparent;--sbb-navigation-list-margin-block-start: var(--sbb-spacing-responsive-xxl);--sbb-navigation-inline-start: 0;--sbb-navigation-expanded-width: 100%;--sbb-navigation-inset: 0 auto auto 0;--sbb-navigation-transform: translateX(-100%);--sbb-navigation-content-transform: translateX(0);--sbb-navigation-width: 100%;--sbb-navigation-height: 100vh;display:block;position:fixed;inset:var(--sbb-navigation-inset);z-index:var(--sbb-navigation-z-index, var(--sbb-overlay-default-z-index));overflow:hidden;--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}@supports (height: 100dvh){:host{--sbb-navigation-height: 100dvh}}@media (min-width: 52.5rem){:host{--sbb-navigation-grid-column: 1 / 9}}@media (min-width: 64rem){:host{--sbb-navigation-grid-column: 1 / 5;--sbb-navigation-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-6x) );--sbb-navigation-padding-block-start: var(--sbb-spacing-responsive-xl);--sbb-navigation-padding-inline: var(--sbb-layout-base-offset-responsive) 0;--sbb-navigation-list-margin-block-start: var(--sbb-spacing-fixed-1x);--sbb-navigation-inline-start: calc(var(--sbb-layout-base-offset-responsive) * -1);--sbb-navigation-width: calc(100% + var(--sbb-layout-base-offset-responsive))}}@media (min-width: 90rem){:host{--sbb-navigation-grid-column: 1 / 6;--sbb-navigation-padding-block-start: var(--sbb-spacing-responsive-xxl)}}:host([data-state=opened]){--sbb-navigation-animation-easing: ease-out}:host(:is([data-state=opened],[data-state=opening])){--sbb-navigation-backdrop-visibility: visible;--sbb-navigation-backdrop-pointer-events: all;--sbb-navigation-backdrop-color: var(--sbb-color-black-alpha-70)}:host(:not([data-state=closed])){--sbb-navigation-inset: 0;--sbb-navigation-transform: translateX(0)}:host([data-has-navigation-section]){--sbb-navigation-content-transform: translateX(-100%)}@media (min-width: 64rem){:host([data-has-navigation-section]){--sbb-navigation-expanded-width: 100vw;--sbb-navigation-content-transform: translateX(0%)}@supports (height: 100dvw){:host([data-has-navigation-section]){--sbb-navigation-expanded-width: 100dvw}}}:host([data-resize-disable-animation]){--sbb-disable-animation-time: .1ms;--sbb-disable-animation-zero-time: 0s}.sbb-navigation__container{display:grid;gap:var(--sbb-grid-base-gutter-responsive);grid-template-columns:repeat(var(--sbb-grid-base-columns),1fr);padding-inline:0;pointer-events:none;transform:var(--sbb-navigation-transform)}@media (min-width: 64rem){.sbb-navigation__container{padding-inline:var(--sbb-layout-base-offset-responsive)}.sbb-navigation__container:before{transition-duration:var(--sbb-navigation-animation-duration);transition-timing-function:var(--sbb-navigation-animation-easing);transition-property:background-color,visibility;content:"";visibility:var(--sbb-navigation-backdrop-visibility);pointer-events:var(--sbb-navigation-backdrop-pointer-events);position:fixed;inset:var(--sbb-navigation-inset);background-color:var(--sbb-navigation-backdrop-color)}}.sbb-navigation{transition-duration:var(--sbb-navigation-animation-duration);transition-timing-function:var(--sbb-navigation-animation-easing);transition-property:width;display:none;width:var(--sbb-navigation-width);grid-column:var(--sbb-navigation-grid-column);padding:0;margin:0;position:relative;inset-inline-start:var(--sbb-navigation-inline-start);inset-block-start:0;border:none;pointer-events:none;height:var(--sbb-navigation-height);color:var(--sbb-color-white);background-color:var(--sbb-color-midnight)}.sbb-navigation:before{transition-duration:var(--sbb-navigation-animation-duration);transition-timing-function:var(--sbb-navigation-animation-easing);transition-property:width;content:"";position:absolute;width:var(--sbb-navigation-expanded-width);height:var(--sbb-navigation-height);background:var(--sbb-color-midnight)}:host([data-state]:not([data-state=closed])) .sbb-navigation{display:block;pointer-events:all;animation-name:open;animation-duration:var(--sbb-navigation-animation-duration);animation-timing-function:var(--sbb-navigation-animation-easing)}:host([data-state][data-state=closing]) .sbb-navigation{pointer-events:none;animation-name:close}@media (forced-colors: active){.sbb-navigation{outline:var(--sbb-border-width-1x) solid CanvasText}}.sbb-navigation__wrapper{outline:none}.sbb-navigation__header{transition-duration:var(--sbb-navigation-animation-duration);transition-timing-function:var(--sbb-navigation-animation-easing);transition-property:width;display:flex;justify-content:flex-end;position:absolute;width:var(--sbb-navigation-expanded-width);pointer-events:none;padding:var(--sbb-spacing-responsive-xs);z-index:calc(var(--sbb-navigation-z-index, var(--sbb-overlay-default-z-index)) + 1)}.sbb-navigation__close{pointer-events:all}.sbb-navigation__content{transition-duration:var(--sbb-navigation-animation-duration);transition-timing-function:var(--sbb-navigation-animation-easing);transition-property:transform;--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: var(--sbb-color-white-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-white-alpha-60);--sbb-scrollbar-track-color: transparent;--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x);display:flex;flex-direction:column;gap:var(--sbb-spacing-responsive-xxl);position:relative;height:var(--sbb-navigation-height);padding-inline:var(--sbb-navigation-padding-inline);padding-block:var(--sbb-navigation-padding-block-start) var(--sbb-navigation-padding-block-end);overflow-y:auto;transform:var(--sbb-navigation-content-transform)}.sbb-navigation__content::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-navigation__content::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-navigation__content::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}.sbb-navigation__content::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}.sbb-navigation__content::-webkit-scrollbar-button,.sbb-navigation__content::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-navigation__content{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}::slotted(:first-child){margin-block-start:var(--sbb-navigation-list-margin-block-start)}@keyframes open{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes close{0%{transform:translate(0)}to{transform:translate(-100%)}}`;
-var I = Object.defineProperty, q = Object.getOwnPropertyDescriptor, e = (t, i, a, n) => {
-  for (var s = n > 1 ? void 0 : n ? q(i, a) : i, r = t.length - 1, b; r >= 0; r--)
-    (b = t[r]) && (s = (n ? b(i, a, s) : b(s)) || s);
-  return n && s && I(i, a, s), s;
+const L = p`*,:before,:after{box-sizing:border-box}:host{--sbb-navigation-grid-column: 1 / 5;--sbb-navigation-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-3x) );--sbb-navigation-animation-easing: ease-in;--sbb-navigation-padding-inline: var(--sbb-layout-base-offset-responsive);--sbb-navigation-padding-block-start: var(--sbb-spacing-responsive-l);--sbb-navigation-padding-block-end: var(--sbb-spacing-responsive-xl);--sbb-navigation-backdrop-visibility: hidden;--sbb-navigation-backdrop-pointer-events: none;--sbb-navigation-backdrop-color: transparent;--sbb-navigation-list-margin-block-start: var(--sbb-spacing-responsive-xxl);--sbb-navigation-inline-start: 0;--sbb-navigation-expanded-width: 100%;--sbb-navigation-inset: 0 auto auto 0;--sbb-navigation-transform: translateX(-100%);--sbb-navigation-content-transform: translateX(0);--sbb-navigation-width: 100%;--sbb-navigation-height: 100vh;display:block;position:fixed;inset:var(--sbb-navigation-inset);z-index:var(--sbb-navigation-z-index, var(--sbb-overlay-default-z-index));overflow:hidden;--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}@supports (height: 100dvh){:host{--sbb-navigation-height: 100dvh}}@media (min-width: 52.5rem){:host{--sbb-navigation-grid-column: 1 / 9}}@media (min-width: 64rem){:host{--sbb-navigation-grid-column: 1 / 5;--sbb-navigation-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-6x) );--sbb-navigation-padding-block-start: var(--sbb-spacing-responsive-xl);--sbb-navigation-padding-inline: var(--sbb-layout-base-offset-responsive) 0;--sbb-navigation-list-margin-block-start: var(--sbb-spacing-fixed-1x);--sbb-navigation-inline-start: calc(var(--sbb-layout-base-offset-responsive) * -1);--sbb-navigation-width: calc(100% + var(--sbb-layout-base-offset-responsive))}}@media (min-width: 90rem){:host{--sbb-navigation-grid-column: 1 / 6;--sbb-navigation-padding-block-start: var(--sbb-spacing-responsive-xxl)}}:host([data-state=opened]){--sbb-navigation-animation-easing: ease-out}:host(:is([data-state=opened],[data-state=opening])){--sbb-navigation-backdrop-visibility: visible;--sbb-navigation-backdrop-pointer-events: all;--sbb-navigation-backdrop-color: var(--sbb-color-black-alpha-70)}:host(:not([data-state=closed])){--sbb-navigation-inset: 0;--sbb-navigation-transform: translateX(0)}:host([data-has-navigation-section]){--sbb-navigation-content-transform: translateX(-100%)}@media (min-width: 64rem){:host([data-has-navigation-section]){--sbb-navigation-expanded-width: 100vw;--sbb-navigation-content-transform: translateX(0%)}@supports (height: 100dvw){:host([data-has-navigation-section]){--sbb-navigation-expanded-width: 100dvw}}}:host([data-resize-disable-animation]){--sbb-disable-animation-time: .1ms;--sbb-disable-animation-zero-time: 0s}.sbb-navigation__container{display:grid;gap:var(--sbb-grid-base-gutter-responsive);grid-template-columns:repeat(var(--sbb-grid-base-columns),1fr);padding-inline:0;pointer-events:none;transform:var(--sbb-navigation-transform)}@media (min-width: 64rem){.sbb-navigation__container{padding-inline:var(--sbb-layout-base-offset-responsive)}.sbb-navigation__container:before{transition-duration:var(--sbb-navigation-animation-duration);transition-timing-function:var(--sbb-navigation-animation-easing);transition-property:background-color,visibility;content:"";visibility:var(--sbb-navigation-backdrop-visibility);pointer-events:var(--sbb-navigation-backdrop-pointer-events);position:fixed;inset:var(--sbb-navigation-inset);background-color:var(--sbb-navigation-backdrop-color)}}.sbb-navigation{transition-duration:var(--sbb-navigation-animation-duration);transition-timing-function:var(--sbb-navigation-animation-easing);transition-property:width;display:none;width:var(--sbb-navigation-width);grid-column:var(--sbb-navigation-grid-column);padding:0;margin:0;position:relative;inset-inline-start:var(--sbb-navigation-inline-start);inset-block-start:0;border:none;pointer-events:none;height:var(--sbb-navigation-height);color:var(--sbb-color-white);background-color:var(--sbb-color-midnight)}.sbb-navigation:before{transition-duration:var(--sbb-navigation-animation-duration);transition-timing-function:var(--sbb-navigation-animation-easing);transition-property:width;content:"";position:absolute;width:var(--sbb-navigation-expanded-width);height:var(--sbb-navigation-height);background:var(--sbb-color-midnight)}:host([data-state]:not([data-state=closed])) .sbb-navigation{display:block;pointer-events:all;animation-name:open;animation-duration:var(--sbb-navigation-animation-duration);animation-timing-function:var(--sbb-navigation-animation-easing)}:host([data-state][data-state=closing]) .sbb-navigation{pointer-events:none;animation-name:close}@media (forced-colors: active){.sbb-navigation{outline:var(--sbb-border-width-1x) solid CanvasText}}.sbb-navigation__wrapper{outline:none}.sbb-navigation__header{transition-duration:var(--sbb-navigation-animation-duration);transition-timing-function:var(--sbb-navigation-animation-easing);transition-property:width;display:flex;justify-content:flex-end;position:absolute;width:var(--sbb-navigation-expanded-width);pointer-events:none;padding:var(--sbb-spacing-responsive-xs);z-index:calc(var(--sbb-navigation-z-index, var(--sbb-overlay-default-z-index)) + 1)}.sbb-navigation__close{pointer-events:all}.sbb-navigation__content{transition-duration:var(--sbb-navigation-animation-duration);transition-timing-function:var(--sbb-navigation-animation-easing);transition-property:transform;--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: var(--sbb-color-white-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-white-alpha-60);--sbb-scrollbar-track-color: transparent;--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x);display:flex;flex-direction:column;gap:var(--sbb-spacing-responsive-xxl);position:relative;height:var(--sbb-navigation-height);padding-inline:var(--sbb-navigation-padding-inline);padding-block:var(--sbb-navigation-padding-block-start) var(--sbb-navigation-padding-block-end);overflow-y:auto;transform:var(--sbb-navigation-content-transform)}.sbb-navigation__content::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-navigation__content::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-navigation__content::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}.sbb-navigation__content::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}.sbb-navigation__content::-webkit-scrollbar-button,.sbb-navigation__content::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-navigation__content{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}::slotted(:first-child){margin-block-start:var(--sbb-navigation-list-margin-block-start)}@keyframes open{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes close{0%{transform:translate(0)}to{transform:translate(-100%)}}`;
+var B = Object.defineProperty, H = Object.getOwnPropertyDescriptor, s = (t, i, n, a) => {
+  for (var e = a > 1 ? void 0 : a ? H(i, n) : i, r = t.length - 1, b; r >= 0; r--)
+    (b = t[r]) && (e = (a ? b(i, n, e) : b(e)) || e);
+  return a && e && B(i, n, e), e;
 };
-const L = {
+const I = {
   subtree: !0,
   attributeFilter: ["data-state"]
 };
-let M = 0;
-const P = 150;
-let o = class extends C(k) {
+let P = 0;
+const R = 150;
+let o = class extends S(w) {
   constructor() {
-    super(...arguments), this.d = null, this.f = null, this.a = null, this.p = new y(this), this.q = new x(this), this.g = new w(), this.k = new A(), this.l = !1, this.h = null, this.m = new O(
-      (t) => this.r(t)
-    ), this.i = new z(() => this.s()), this.v = (t) => t.nodeName !== "SBB-NAVIGATION-SECTION" || t.getAttribute("data-state") === "opened", this.D = (t) => {
-      var i, a;
-      this.l = l(this.e, t) || l(
-        (a = (i = this.querySelector(
+    super(...arguments), this._trigger = null, this._activeNavigationSection = null, this._triggerElement = null, this._abort = new k(this), this._language = new y(this), this._focusHandler = new f(), this._scrollHandler = new x(), this._isPointerDownEventOnNavigation = !1, this._resizeObserverTimeout = null, this._navigationObserver = new A(
+      (t) => this._onNavigationSectionChange(t)
+    ), this._navigationResizeObserver = new N(() => this._onNavigationResize()), this._trapFocusFilter = (t) => t.nodeName !== "SBB-NAVIGATION-SECTION" || t.getAttribute("data-state") === "opened", this._pointerDownListener = (t) => {
+      var i, n;
+      this._isPointerDownEventOnNavigation = l(this._navigation, t) || l(
+        (n = (i = this.querySelector(
           'sbb-navigation-section[data-state="opened"]'
-        )) == null ? void 0 : i.shadowRoot) == null ? void 0 : a.querySelector("nav.sbb-navigation-section"),
+        )) == null ? void 0 : i.shadowRoot) == null ? void 0 : n.querySelector("nav.sbb-navigation-section"),
         t
       );
-    }, this.E = (t) => {
-      !this.l && !l(this.e, t) && this.close();
+    }, this._closeOnBackdropClick = (t) => {
+      !this._isPointerDownEventOnNavigation && !l(this._navigation, t) && this.close();
     };
   }
   set trigger(t) {
-    const i = this.d;
-    this.d = t, this.o(this.d, i);
+    const i = this._trigger;
+    this._trigger = t, this._removeTriggerClickListener(this._trigger, i);
   }
   get trigger() {
-    return this.d;
+    return this._trigger;
   }
   get activeNavigationSection() {
-    return this.f;
+    return this._activeNavigationSection;
   }
   /**
    * Opens the navigation.
    */
   open() {
     var t;
-    this.state !== "closed" || !this.e || this.willOpen.emit() && (this.state = "opening", this.t(), this.u(), this.startUpdate(), this.k.disableScroll(), (t = this.a) == null || t.setAttribute("aria-expanded", "true"));
+    this.state !== "closed" || !this._navigation || this.willOpen.emit() && (this.state = "opening", this._checkActiveActions(), this._checkActiveSection(), this.startUpdate(), this._scrollHandler.disableScroll(), (t = this._triggerElement) == null || t.setAttribute("aria-expanded", "true"));
   }
-  u() {
+  _checkActiveSection() {
     var i;
     const t = this.querySelector(
       "sbb-navigation-button.sbb-active"
     );
     (i = t == null ? void 0 : t.connectedSection) == null || i.open();
   }
-  t() {
+  _checkActiveActions() {
     const t = Array.from(
       this.querySelectorAll(":is(sbb-navigation-button, sbb-navigation-link).sbb-active")
     );
     t == null || t.forEach((i) => {
-      var a;
-      return (a = i.marker) == null ? void 0 : a.select(i);
+      var n;
+      return (n = i.marker) == null ? void 0 : n.select(i);
     });
   }
   /**
@@ -77,87 +77,87 @@ let o = class extends C(k) {
    */
   close() {
     var t;
-    this.state === "opened" && this.willClose.emit() && (this.state = "closing", this.startUpdate(), (t = this.a) == null || t.setAttribute("aria-expanded", "false"));
+    this.state === "opened" && this.willClose.emit() && (this.state = "closing", this.startUpdate(), (t = this._triggerElement) == null || t.setAttribute("aria-expanded", "false"));
   }
   // Removes trigger click listener on trigger change.
-  o(t, i) {
-    var a, n;
-    t !== i && ((a = this.b) == null || a.abort(), (n = this.c) == null || n.abort(), this.n(this.trigger));
+  _removeTriggerClickListener(t, i) {
+    var n, a;
+    t !== i && ((n = this._navigationController) == null || n.abort(), (a = this._windowEventsController) == null || a.abort(), this._configure(this.trigger));
   }
   // Check if the trigger is valid and attach click event listeners.
-  n(t) {
+  _configure(t) {
     var i;
-    N(this.a), t && (this.a = E(t), this.a && (T(this.a, "menu", this.id, this.state), (i = this.b) == null || i.abort(), this.b = new AbortController(), this.a.addEventListener("click", () => this.open(), {
-      signal: this.b.signal
+    z(this._triggerElement), t && (this._triggerElement = C(t), this._triggerElement && (T(this._triggerElement, "menu", this.id, this.state), (i = this._navigationController) == null || i.abort(), this._navigationController = new AbortController(), this._triggerElement.addEventListener("click", () => this.open(), {
+      signal: this._navigationController.signal
     })));
   }
   // 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.
-  w(t) {
-    var i, a;
-    t.animationName === "open" && this.state === "opening" ? (this.state = "opened", this.didOpen.emit(), this.i.observe(this), h(this), this.g.trap(this, { filter: this.v }), this.x(), this.y()) : t.animationName === "close" && this.state === "closing" && (this.state = "closed", this.j.scrollTo(0, 0), v(this.a), g(), (i = this.a) == null || i.focus(), this.didClose.emit(), this.i.unobserve(this), this.z(), (a = this.c) == null || a.abort(), this.g.disconnect(), this.k.enableScroll()), this.completeUpdate();
+  _onAnimationEnd(t) {
+    var i, n;
+    t.animationName === "open" && this.state === "opening" ? (this.state = "opened", this.didOpen.emit(), this._navigationResizeObserver.observe(this), d(this), this._focusHandler.trap(this, { filter: this._trapFocusFilter }), this._attachWindowEvents(), this._setNavigationFocus()) : t.animationName === "close" && this.state === "closing" && (this.state = "closed", this._navigationContentElement.scrollTo(0, 0), g(this._triggerElement), h(), (i = this._triggerElement) == null || i.focus(), this.didClose.emit(), this._navigationResizeObserver.unobserve(this), this._resetMarkers(), (n = this._windowEventsController) == null || n.abort(), this._focusHandler.disconnect(), this._scrollHandler.enableScroll()), this.completeUpdate();
   }
-  z() {
+  _resetMarkers() {
     const t = Array.from(
       this.querySelectorAll(
         ":is(sbb-navigation-button, sbb-navigation-link)[data-action-active]:not(.sbb-active)"
       )
     );
     t == null || t.forEach((i) => {
-      var a;
-      return (a = i.marker) == null ? void 0 : a.reset();
+      var n;
+      return (n = i.marker) == null ? void 0 : n.reset();
     });
   }
-  x() {
-    this.c = new AbortController(), window.addEventListener("keydown", (t) => this.A(t), {
-      signal: this.c.signal
+  _attachWindowEvents() {
+    this._windowEventsController = new AbortController(), window.addEventListener("keydown", (t) => this._onKeydownEvent(t), {
+      signal: this._windowEventsController.signal
     });
   }
-  B(t) {
-    t.composedPath().filter((a) => a instanceof window.HTMLElement).some((a) => this.C(a)) && this.close();
+  _handleNavigationClose(t) {
+    t.composedPath().filter((n) => n instanceof window.HTMLElement).some((n) => this._isCloseElement(n)) && this.close();
   }
-  C(t) {
+  _isCloseElement(t) {
     return t.nodeName === "A" || t.hasAttribute("sbb-navigation-close") && !t.hasAttribute("disabled");
   }
   // Closes the navigation on "Esc" key pressed.
-  A(t) {
+  _onKeydownEvent(t) {
     this.state === "opened" && t.key === "Escape" && this.close();
   }
   // Set focus on the first focusable element.
-  y() {
+  _setNavigationFocus() {
     const t = this.shadowRoot.querySelector(
       "#sbb-navigation-close-button"
     );
-    v(t), t.focus();
+    g(t), t.focus();
   }
   // Observe changes on navigation section data-state.
-  r(t) {
+  _onNavigationSectionChange(t) {
     for (const i of t)
-      i.target.nodeName === "SBB-NAVIGATION-SECTION" && (this.f = this.querySelector(
+      i.target.nodeName === "SBB-NAVIGATION-SECTION" && (this._activeNavigationSection = this.querySelector(
         'sbb-navigation-section[data-state="opening"], sbb-navigation-section[data-state="opened"]'
-      ), this.toggleAttribute("data-has-navigation-section", !!this.f));
+      ), this.toggleAttribute("data-has-navigation-section", !!this._activeNavigationSection));
   }
-  s() {
-    this.state === "opened" && (this.h && clearTimeout(this.h), this.toggleAttribute("data-resize-disable-animation", !0), this.h = setTimeout(
+  _onNavigationResize() {
+    this.state === "opened" && (this._resizeObserverTimeout && clearTimeout(this._resizeObserverTimeout), this.toggleAttribute("data-resize-disable-animation", !0), this._resizeObserverTimeout = setTimeout(
       () => this.removeAttribute("data-resize-disable-animation"),
-      P
+      R
     ));
   }
   connectedCallback() {
-    super.connectedCallback(), this.id || (this.id = `sbb-navigation-${M++}`);
-    const t = this.p.signal;
-    this.addEventListener("click", (i) => this.B(i), { signal: t }), this.n(this.trigger), this.m.observe(this, L), this.addEventListener("pointerup", (i) => this.E(i), { signal: t }), this.addEventListener("pointerdown", (i) => this.D(i), { signal: t }), this.state === "opened" && h(this);
+    super.connectedCallback(), this.id || (this.id = `sbb-navigation-${P++}`);
+    const t = this._abort.signal;
+    this.addEventListener("click", (i) => this._handleNavigationClose(i), { signal: t }), this._configure(this.trigger), this._navigationObserver.observe(this, I), this.addEventListener("pointerup", (i) => this._closeOnBackdropClick(i), { signal: t }), this.addEventListener("pointerdown", (i) => this._pointerDownListener(i), { signal: t }), this.state === "opened" && d(this);
   }
   disconnectedCallback() {
     var t, i;
-    super.disconnectedCallback(), (t = this.b) == null || t.abort(), (i = this.c) == null || i.abort(), this.g.disconnect(), this.m.disconnect(), this.i.disconnect(), g();
+    super.disconnectedCallback(), (t = this._navigationController) == null || t.abort(), (i = this._windowEventsController) == null || i.abort(), this._focusHandler.disconnect(), this._navigationObserver.disconnect(), this._navigationResizeObserver.disconnect(), h();
   }
   render() {
-    const t = c`
+    const t = v`
       <sbb-transparent-button
         id="sbb-navigation-close-button"
         class="sbb-navigation__close"
-        aria-label=${this.accessibilityCloseLabel || S[this.q.current]}
+        aria-label=${this.accessibilityCloseLabel || O[this._language.current]}
         aria-controls="sbb-navigation-overlay"
         negative
         size="m"
@@ -166,19 +166,19 @@ let o = class extends C(k) {
         sbb-navigation-close
       ></sbb-transparent-button>
     `;
-    return c`
+    return v`
       <div class="sbb-navigation__container">
         <div
           id="sbb-navigation-overlay"
-          @animationend=${(i) => this.w(i)}
+          @animationend=${(i) => this._onAnimationEnd(i)}
           class="sbb-navigation"
-          ${d((i) => this.e = i)}
+          ${c((i) => this._navigation = i)}
         >
           <div class="sbb-navigation__header">${t}</div>
           <div class="sbb-navigation__wrapper">
             <div
               class="sbb-navigation__content"
-              ${d((i) => this.j = i)}
+              ${c((i) => this._navigationContentElement = i)}
             >
               <slot></slot>
             </div>
@@ -189,19 +189,19 @@ let o = class extends C(k) {
     `;
   }
 };
-o.styles = B;
-e([
-  p()
+o.styles = L;
+s([
+  m()
 ], o.prototype, "trigger", 1);
-e([
-  p({ attribute: "accessibility-close-label" })
+s([
+  m({ attribute: "accessibility-close-label" })
 ], o.prototype, "accessibilityCloseLabel", 2);
-e([
+s([
   u()
-], o.prototype, "f", 2);
-o = e([
-  f("sbb-navigation"),
-  _({
+], o.prototype, "_activeNavigationSection", 2);
+o = s([
+  _("sbb-navigation"),
+  E({
     role: "navigation"
   })
 ], o);

package/notification.js

@@ -1,39 +1,39 @@
 import { css as f, LitElement as p, html as d, nothing as m } from "lit";
-import { property as s, customElement as h } from "lit/decorators.js";
+import { property as a, customElement as h } from "lit/decorators.js";
 import { SbbLanguageController as v, SbbSlotStateController as g } from "./core/controllers.js";
 import { EventEmitter as r } from "./core/eventing.js";
-import { i18nCloseNotification as u } from "./core/i18n.js";
-import { AgnosticResizeObserver as y } from "./core/observers.js";
+import { i18nCloseNotification as _ } from "./core/i18n.js";
+import { AgnosticResizeObserver as u } from "./core/observers.js";
 import "./button/secondary-button.js";
 import "./divider.js";
 import "./icon.js";
 import "./title.js";
-const x = f`*,:before,:after{box-sizing:border-box}:host{--sbb-notification-margin: 0;--sbb-notification-padding-block: var(--sbb-spacing-responsive-xxs);--sbb-notification-padding-inline: var(--sbb-spacing-responsive-xs);--sbb-notification-color: var(--sbb-color-charcoal);--sbb-notification-icon-color: var(--sbb-notification-type-color);--sbb-notification-icon-margin-block-start: 0;--sbb-notification-border-width: var(--sbb-border-width-1x);--sbb-notification-border: var(--sbb-notification-border-width) solid var(--sbb-notification-type-color);--sbb-notification-base-radius: var(--sbb-border-radius-4x);--sbb-notification-border-radius: calc(var(--sbb-notification-base-radius) / 2) var(--sbb-notification-base-radius) var(--sbb-notification-base-radius) calc(var(--sbb-notification-base-radius) / 2);--sbb-notification-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x) );--sbb-notification-timing-function: ease-in;--sbb-notification-content-padding-inline: var(--sbb-spacing-responsive-xxxs) var(--sbb-spacing-responsive-xs);--sbb-focus-outline-color: var(--sbb-focus-outline-color-default);display:block}:host([data-state=opening]:not([animation=open],[animation=all])){--sbb-disable-animation-time: .1ms;--sbb-disable-animation-zero-time: 0s}:host([data-state=closing]:not([animation=close],[animation=all])){--sbb-disable-animation-time: .1ms;--sbb-disable-animation-zero-time: 0s}:host([data-resize-disable-animation]){--sbb-disable-animation-time: .1ms;--sbb-disable-animation-zero-time: 0s}:host([type=info]){--sbb-notification-type-color: var(--sbb-color-smoke);--sbb-notification-type-color-sass: #f9f9f9;--sbb-notification-icon-color: var(--sbb-notification-color)}:host([type=success]){--sbb-notification-type-color: var(--sbb-color-green);--sbb-notification-type-color-sass: #f2f9f5}:host([type=warn]){--sbb-notification-type-color: var(--sbb-color-peach);--sbb-notification-type-color-sass: #fffcf2;--sbb-notification-icon-color: var(--sbb-notification-color)}:host([type=error]){--sbb-notification-type-color: var(--sbb-color-red);--sbb-notification-type-color-sass: #fef2f2}:host([size=s]){--sbb-notification-padding-block: var(--sbb-spacing-responsive-xxxs);--sbb-notification-padding-inline: var(--sbb-spacing-responsive-xxs) var(--sbb-spacing-responsive-xxxs);--sbb-notification-content-padding-inline: var(--sbb-spacing-responsive-xxxs) var(--sbb-spacing-responsive-xxs)}@media (min-width: 37.5rem){:host{--sbb-notification-icon-margin-block-start: calc( ((1em * var(--sbb-typo-line-height-body-text)) - var(--sbb-size-icon-ui-small)) / 2 )}:host(:where([data-slot-names~=title],[title-content])){--sbb-notification-icon-margin-block-start: calc( ( (var(--sbb-font-size-title-5) * var(--sbb-typo-line-height-body-text)) - var( --sbb-size-icon-ui-small ) ) / 2 )}:host([size=s]){--sbb-notification-padding-inline: var(--sbb-spacing-responsive-xxs);--sbb-notification-icon-margin-block-start: 0}}.sbb-notification__wrapper{position:relative;inset-inline-start:calc(var(--sbb-notification-base-radius) - var(--sbb-notification-border-width));width:calc(100% - (var(--sbb-notification-base-radius) - var(--sbb-notification-border-width)));border:var(--sbb-notification-border);border-radius:var(--sbb-notification-border-radius);opacity:0;max-height:0;margin:0}.sbb-notification__wrapper:before{content:"";position:absolute;inset:calc(var(--sbb-notification-border-width) * -1) var(--sbb-notification-base-radius) calc(var(--sbb-notification-border-width) * -1) calc(var(--sbb-notification-base-radius) * -1);background-color:var(--sbb-notification-type-color);border:var(--sbb-notification-border);border-radius:var(--sbb-notification-base-radius)}:host(:is([data-state=opened],[data-state=closing])) .sbb-notification__wrapper{opacity:1;max-height:calc(var(--sbb-notification-height) + var(--sbb-notification-border-width) * 2);margin:var(--sbb-notification-margin, 0)}:host([data-state=opening]) .sbb-notification__wrapper{animation-name:open;animation-fill-mode:forwards;animation-duration:var(--sbb-notification-animation-duration);animation-timing-function:var(--sbb-notification-timing-function)}:host([data-state=closing]) .sbb-notification__wrapper{animation-name:close,close-height;animation-fill-mode:forwards;animation-duration:var(--sbb-notification-animation-duration);animation-timing-function:var(--sbb-notification-timing-function);animation-delay:0s,var(--sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x))}.sbb-notification{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;padding-block:var(--sbb-notification-padding-block);padding-inline:var(--sbb-notification-padding-inline);color:var(--sbb-notification-color);border-radius:var(--sbb-notification-border-radius);overflow:hidden;background-color:var(--sbb-notification-type-color-sass)}@supports (background-color: color-mix(in srgb,transparent 5%,white)){.sbb-notification{background-color:color-mix(in srgb,var(--sbb-notification-type-color) 5%,white)}}@media (min-width: 37.5rem){.sbb-notification{grid-template-columns:auto 1fr auto;align-items:flex-start}}:host([size=s]) .sbb-notification{--sbb-text-font-size: var(--sbb-font-size-text-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size)}.sbb-notification__icon{color:var(--sbb-notification-icon-color);margin-block-start:var(--sbb-notification-icon-margin-block-start)}.sbb-notification__title{margin:0}:host(:not([data-slot-names~=title],[title-content])) .sbb-notification__title{display:none}.sbb-notification__content{order:3;grid-area:2/1/3/3;margin-block-start:var(--sbb-spacing-fixed-2x)}@media (min-width: 37.5rem){.sbb-notification__content{order:initial;grid-area:initial;margin-block-start:0;padding-inline:var(--sbb-notification-content-padding-inline)}}.sbb-notification__close-wrapper{display:flex;align-items:center;gap:var(--sbb-spacing-responsive-xxs);height:100%}.sbb-notification__divider{--sbb-divider-color: var(--sbb-notification-type-color);display:none;position:relative;inset-inline-start:var(--sbb-border-width-1x);opacity:.2}@media (min-width: 37.5rem){.sbb-notification__divider{display:block;height:calc(100% - var(--sbb-spacing-fixed-1x) * 2)}}@keyframes open{0%{opacity:0;max-height:0;margin:0}to{opacity:1;max-height:calc(var(--sbb-notification-height) + var(--sbb-notification-border-width) * 2);margin:var(--sbb-notification-margin, 0)}}@keyframes close{0%{opacity:1;margin:var(--sbb-notification-margin, 0)}to{opacity:0;margin:0}}@keyframes close-height{0%{max-height:calc(var(--sbb-notification-height) + var(--sbb-notification-border-width) * 2)}to{max-height:0}}`;
-var w = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, a = (t, o, b, e) => {
-  for (var n = e > 1 ? void 0 : e ? _(o, b) : o, c = t.length - 1, l; c >= 0; c--)
-    (l = t[c]) && (n = (e ? l(o, b, n) : l(n)) || n);
-  return e && n && w(o, b, n), n;
+const y = f`*,:before,:after{box-sizing:border-box}:host{--sbb-notification-margin: 0;--sbb-notification-padding-block: var(--sbb-spacing-responsive-xxs);--sbb-notification-padding-inline: var(--sbb-spacing-responsive-xs);--sbb-notification-color: var(--sbb-color-charcoal);--sbb-notification-icon-color: var(--sbb-notification-type-color);--sbb-notification-icon-margin-block-start: 0;--sbb-notification-border-width: var(--sbb-border-width-1x);--sbb-notification-border: var(--sbb-notification-border-width) solid var(--sbb-notification-type-color);--sbb-notification-base-radius: var(--sbb-border-radius-4x);--sbb-notification-border-radius: calc(var(--sbb-notification-base-radius) / 2) var(--sbb-notification-base-radius) var(--sbb-notification-base-radius) calc(var(--sbb-notification-base-radius) / 2);--sbb-notification-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x) );--sbb-notification-timing-function: ease-in;--sbb-notification-content-padding-inline: var(--sbb-spacing-responsive-xxxs) var(--sbb-spacing-responsive-xs);--sbb-focus-outline-color: var(--sbb-focus-outline-color-default);display:block}:host([data-state=opening]:not([animation=open],[animation=all])){--sbb-disable-animation-time: .1ms;--sbb-disable-animation-zero-time: 0s}:host([data-state=closing]:not([animation=close],[animation=all])){--sbb-disable-animation-time: .1ms;--sbb-disable-animation-zero-time: 0s}:host([data-resize-disable-animation]){--sbb-disable-animation-time: .1ms;--sbb-disable-animation-zero-time: 0s}:host([type=info]){--sbb-notification-type-color: var(--sbb-color-smoke);--sbb-notification-type-color-sass: #f9f9f9;--sbb-notification-icon-color: var(--sbb-notification-color)}:host([type=success]){--sbb-notification-type-color: var(--sbb-color-green);--sbb-notification-type-color-sass: #f2f9f5}:host([type=warn]){--sbb-notification-type-color: var(--sbb-color-peach);--sbb-notification-type-color-sass: #fffcf2;--sbb-notification-icon-color: var(--sbb-notification-color)}:host([type=error]){--sbb-notification-type-color: var(--sbb-color-red);--sbb-notification-type-color-sass: #fef2f2}:host([size=s]){--sbb-notification-padding-block: var(--sbb-spacing-responsive-xxxs);--sbb-notification-padding-inline: var(--sbb-spacing-responsive-xxs) var(--sbb-spacing-responsive-xxxs);--sbb-notification-content-padding-inline: var(--sbb-spacing-responsive-xxxs) var(--sbb-spacing-responsive-xxs)}@media (min-width: 37.5rem){:host{--sbb-notification-icon-margin-block-start: calc( ((1em * var(--sbb-typo-line-height-body-text)) - var(--sbb-size-icon-ui-small)) / 2 )}:host(:where([data-slot-names~=title],[title-content])){--sbb-notification-icon-margin-block-start: calc( ( (var(--sbb-font-size-title-5) * var(--sbb-typo-line-height-body-text)) - var( --sbb-size-icon-ui-small ) ) / 2 )}:host([size=s]){--sbb-notification-padding-inline: var(--sbb-spacing-responsive-xxs);--sbb-notification-icon-margin-block-start: 0}}.sbb-notification__wrapper{position:relative;inset-inline-start:calc(var(--sbb-notification-base-radius) - var(--sbb-notification-border-width));width:calc(100% - (var(--sbb-notification-base-radius) - var(--sbb-notification-border-width)));border:var(--sbb-notification-border);border-radius:var(--sbb-notification-border-radius);opacity:0;max-height:0;margin:0}.sbb-notification__wrapper:before{content:"";position:absolute;inset:calc(var(--sbb-notification-border-width) * -1) var(--sbb-notification-base-radius) calc(var(--sbb-notification-border-width) * -1) calc(var(--sbb-notification-base-radius) * -1);background-color:var(--sbb-notification-type-color);border:var(--sbb-notification-border);border-radius:var(--sbb-notification-base-radius)}:host(:is([data-state=opened],[data-state=closing])) .sbb-notification__wrapper{opacity:1;max-height:calc(var(--sbb-notification-height) + var(--sbb-notification-border-width) * 2);margin:var(--sbb-notification-margin, 0)}:host([data-state=opening]) .sbb-notification__wrapper{animation-name:open;animation-fill-mode:forwards;animation-duration:var(--sbb-notification-animation-duration);animation-timing-function:var(--sbb-notification-timing-function)}:host([data-state=closing]) .sbb-notification__wrapper{animation-name:close,close-height;animation-fill-mode:forwards;animation-duration:var(--sbb-notification-animation-duration);animation-timing-function:var(--sbb-notification-timing-function);animation-delay:0s,var(--sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x))}.sbb-notification{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;padding-block:var(--sbb-notification-padding-block);padding-inline:var(--sbb-notification-padding-inline);color:var(--sbb-notification-color);border-radius:var(--sbb-notification-border-radius);overflow:hidden;background-color:var(--sbb-notification-type-color-sass)}@supports (background-color: color-mix(in srgb,transparent 5%,white)){.sbb-notification{background-color:color-mix(in srgb,var(--sbb-notification-type-color) 5%,white)}}@media (min-width: 37.5rem){.sbb-notification{grid-template-columns:auto 1fr auto;align-items:flex-start}}:host([size=s]) .sbb-notification{--sbb-text-font-size: var(--sbb-font-size-text-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size)}.sbb-notification__icon{color:var(--sbb-notification-icon-color);margin-block-start:var(--sbb-notification-icon-margin-block-start)}.sbb-notification__title{margin:0}:host(:not([data-slot-names~=title],[title-content])) .sbb-notification__title{display:none}.sbb-notification__content{order:3;grid-area:2/1/3/3;margin-block-start:var(--sbb-spacing-fixed-2x)}@media (min-width: 37.5rem){.sbb-notification__content{order:initial;grid-area:initial;margin-block-start:0;padding-inline:var(--sbb-notification-content-padding-inline)}}.sbb-notification__close-wrapper{display:flex;align-items:center;gap:var(--sbb-spacing-responsive-xxs);height:100%}.sbb-notification__divider{--sbb-divider-color: var(--sbb-notification-type-color);display:none;position:relative;inset-inline-start:var(--sbb-border-width-1x);opacity:.2}@media (min-width: 37.5rem){.sbb-notification__divider{display:block;height:calc(100% - var(--sbb-spacing-fixed-1x) * 2)}}@keyframes open{0%{opacity:0;max-height:0;margin:0}to{opacity:1;max-height:calc(var(--sbb-notification-height) + var(--sbb-notification-border-width) * 2);margin:var(--sbb-notification-margin, 0)}}@keyframes close{0%{opacity:1;margin:var(--sbb-notification-margin, 0)}to{opacity:0;margin:0}}@keyframes close-height{0%{max-height:calc(var(--sbb-notification-height) + var(--sbb-notification-border-width) * 2)}to{max-height:0}}`;
+var x = Object.defineProperty, w = Object.getOwnPropertyDescriptor, e = (t, o, b, s) => {
+  for (var n = s > 1 ? void 0 : s ? w(o, b) : o, c = t.length - 1, l; c >= 0; c--)
+    (l = t[c]) && (n = (s ? l(o, b, n) : l(n)) || n);
+  return s && n && x(o, b, n), n;
 };
 const z = /* @__PURE__ */ new Map([
   ["info", "circle-information-small"],
   ["success", "circle-tick-small"],
   ["warn", "circle-exclamation-point-small"],
   ["error", "circle-cross-small"]
-]), k = 150;
+]), O = 150;
 let i = class extends p {
   constructor() {
-    super(), this.type = "info", this.titleLevel = "3", this.readonly = !1, this.size = "m", this.animation = "all", this.c = null, this.f = new v(this), this.d = new y(
-      () => this.g()
-    ), this.h = new r(
+    super(), this.type = "info", this.titleLevel = "3", this.readonly = !1, this.size = "m", this.animation = "all", this._resizeObserverTimeout = null, this._language = new v(this), this._notificationResizeObserver = new u(
+      () => this._onNotificationResize()
+    ), this._willOpen = new r(
       this,
       i.events.willOpen
-    ), this.i = new r(
+    ), this._didOpen = new r(
       this,
       i.events.didOpen
-    ), this.j = new r(
+    ), this._willClose = new r(
       this,
       i.events.willClose
-    ), this.k = new r(
+    ), this._didClose = new r(
       this,
       i.events.didClose
     ), new g(this);
@@ -41,57 +41,57 @@ let i = class extends p {
   /**
    * The state of the notification.
    */
-  set a(t) {
+  set _state(t) {
     this.setAttribute("data-state", t);
   }
-  get a() {
+  get _state() {
     return this.getAttribute("data-state");
   }
-  l() {
-    this.a === "closed" && (this.a = "opening", this.h.emit());
+  _open() {
+    this._state === "closed" && (this._state = "opening", this._willOpen.emit());
   }
   close() {
-    this.a === "opened" && (this.a = "closing", this.j.emit());
+    this._state === "opened" && (this._state = "closing", this._willClose.emit());
   }
   connectedCallback() {
-    this.a || (this.a = "closed"), super.connectedCallback();
+    this._state || (this._state = "closed"), super.connectedCallback();
   }
   async firstUpdated(t) {
     var o;
-    super.firstUpdated(t), this.b = (o = this.shadowRoot) == null ? void 0 : o.querySelector(
+    super.firstUpdated(t), this._notificationElement = (o = this.shadowRoot) == null ? void 0 : o.querySelector(
       ".sbb-notification__wrapper"
-    ), await this.updateComplete, this.e(), this.l();
+    ), await this.updateComplete, this._setNotificationHeight(), this._open();
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this.d.disconnect();
+    super.disconnectedCallback(), this._notificationResizeObserver.disconnect();
   }
-  e() {
+  _setNotificationHeight() {
     var o;
-    if (!((o = this.b) != null && o.scrollHeight))
+    if (!((o = this._notificationElement) != null && o.scrollHeight))
       return;
-    const t = `${this.b.scrollHeight}px`;
+    const t = `${this._notificationElement.scrollHeight}px`;
     this.style.setProperty("--sbb-notification-height", t);
   }
-  g() {
-    this.a === "opened" && (this.c && clearTimeout(this.c), this.toggleAttribute("data-resize-disable-animation", !0), this.e(), this.c = setTimeout(
+  _onNotificationResize() {
+    this._state === "opened" && (this._resizeObserverTimeout && clearTimeout(this._resizeObserverTimeout), this.toggleAttribute("data-resize-disable-animation", !0), this._setNotificationHeight(), this._resizeObserverTimeout = setTimeout(
       () => this.removeAttribute("data-resize-disable-animation"),
-      k
+      O
     ));
   }
-  m(t) {
-    this.a === "opening" && t.animationName === "open" && this.n(), this.a === "closing" && t.animationName === "close-height" && this.o();
+  _onNotificationAnimationEnd(t) {
+    this._state === "opening" && t.animationName === "open" && this._handleOpening(), this._state === "closing" && t.animationName === "close-height" && this._handleClosing();
   }
-  n() {
-    this.a = "opened", this.i.emit(), this.d.observe(this.b);
+  _handleOpening() {
+    this._state = "opened", this._didOpen.emit(), this._notificationResizeObserver.observe(this._notificationElement);
   }
-  o() {
-    this.a = "closed", this.k.emit(), this.d.unobserve(this.b), setTimeout(() => this.remove());
+  _handleClosing() {
+    this._state = "closed", this._didClose.emit(), this._notificationResizeObserver.unobserve(this._notificationElement), setTimeout(() => this.remove());
   }
   render() {
     return d`
       <div
         class="sbb-notification__wrapper"
-        @animationend=${(t) => this.m(t)}
+        @animationend=${(t) => this._onNotificationAnimationEnd(t)}
       >
         <div class="sbb-notification">
           <sbb-icon
@@ -116,7 +116,7 @@ let i = class extends p {
                   size=${this.size}
                   icon-name="cross-small"
                   @click=${() => this.close()}
-                  aria-label=${u[this.f.current]}
+                  aria-label=${_[this._language.current]}
                   class="sbb-notification__close"
                 ></sbb-secondary-button>
               </span>`}
@@ -125,32 +125,32 @@ let i = class extends p {
     `;
   }
 };
-i.styles = x;
+i.styles = y;
 i.events = {
   willOpen: "willOpen",
   didOpen: "didOpen",
   willClose: "willClose",
   didClose: "didClose"
 };
-a([
-  s({ reflect: !0 })
+e([
+  a({ reflect: !0 })
 ], i.prototype, "type", 2);
-a([
-  s({ attribute: "title-content", reflect: !0 })
+e([
+  a({ attribute: "title-content", reflect: !0 })
 ], i.prototype, "titleContent", 2);
-a([
-  s({ attribute: "title-level" })
+e([
+  a({ attribute: "title-level" })
 ], i.prototype, "titleLevel", 2);
-a([
-  s({ reflect: !0, type: Boolean })
+e([
+  a({ reflect: !0, type: Boolean })
 ], i.prototype, "readonly", 2);
-a([
-  s({ reflect: !0 })
+e([
+  a({ reflect: !0 })
 ], i.prototype, "size", 2);
-a([
-  s({ reflect: !0 })
+e([
+  a({ reflect: !0 })
 ], i.prototype, "animation", 2);
-i = a([
+i = e([
   h("sbb-notification")
 ], i);
 export {