@sbb-esta/lyne-elements 1.12.1 → 1.14.0

package/navigation/navigation.js

@@ -1,169 +1,179 @@
-import { MutationController as h } from "@lit-labs/observers/mutation-controller.js";
-import { ResizeController as p } from "@lit-labs/observers/resize-controller.js";
-import { css as m, html as c } from "lit";
-import { property as d, state as u, customElement as _ } from "lit/decorators.js";
-import { ref as v } 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, SbbInertController as E } from "../core/controllers.js";
-import { hostAttributes as C } from "../core/decorators.js";
-import { SbbScrollHandler as x, findReferencedElement as S } from "../core/dom.js";
-import { i18nCloseNavigation as N } from "../core/i18n.js";
-import { SbbUpdateSchedulerMixin as A } from "../core/mixins.js";
-import { isEventOnElement as l, removeAriaOverlayTriggerAttributes as O, setAriaOverlayTriggerAttributes as z } from "../core/overlay.js";
-import "../button/transparent-button.js";
-const T = 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;--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);display:block;position:fixed;inset:var(--sbb-navigation-inset);z-index:var(--sbb-navigation-z-index, var(--sbb-overlay-default-z-index));overflow:hidden}@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)}.sbb-navigation__content::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-navigation__content::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-navigation__content::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}.sbb-navigation__content::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}.sbb-navigation__content::-webkit-scrollbar-button,.sbb-navigation__content::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-navigation__content{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-navigation__content{display:flex;flex-direction:column;gap:var(--sbb-spacing-responsive-xxl);position:relative;height:var(--sbb-navigation-height);padding-inline:var(--sbb-navigation-padding-inline);padding-block:var(--sbb-navigation-padding-block-start) var(--sbb-navigation-padding-block-end);overflow-y:auto;transform:var(--sbb-navigation-content-transform)}::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 L = Object.defineProperty, H = Object.getOwnPropertyDescriptor, s = (t, i, n, a) => {
-  for (var o = a > 1 ? void 0 : a ? H(i, n) : i, r = t.length - 1, b; r >= 0; r--)
-    (b = t[r]) && (o = (a ? b(i, n, o) : b(o)) || o);
-  return a && o && L(i, n, o), o;
+var S = (n) => {
+  throw TypeError(n);
 };
-const I = {
+var N = (n, e, o) => e.has(n) || S("Cannot " + o);
+var d = (n, e, o) => (N(n, e, "read from private field"), o ? o.call(n) : e.get(n)), h = (n, e, o) => e.has(n) ? S("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(n) : e.set(n, o), v = (n, e, o, s) => (N(n, e, "write to private field"), s ? s.call(n, o) : e.set(n, o), o);
+import { __esDecorate as g, __runInitializers as c } from "tslib";
+import { MutationController as T } from "@lit-labs/observers/mutation-controller.js";
+import { ResizeController as I } from "@lit-labs/observers/resize-controller.js";
+import { css as H, html as z } from "lit";
+import { customElement as B, property as A, state as D } from "lit/decorators.js";
+import { ref as O } from "lit/directives/ref.js";
+import { SbbFocusHandler as F, setModalityOnNextFocus as L } from "../core/a11y.js";
+import { SbbOpenCloseBaseElement as R } from "../core/base-elements.js";
+import { SbbConnectedAbortController as q, SbbLanguageController as M, SbbInertController as P } from "../core/controllers.js";
+import { hostAttributes as $, forceType as U } from "../core/decorators.js";
+import { SbbScrollHandler as X, findReferencedElement as j } from "../core/dom.js";
+import { i18nCloseNavigation as V } from "../core/i18n.js";
+import { SbbUpdateSchedulerMixin as G } from "../core/mixins.js";
+import { isEventOnElement as m, removeAriaOverlayTriggerAttributes as K, setAriaOverlayTriggerAttributes as W } from "../core/overlay.js";
+import "../button/transparent-button.js";
+const J = H`*,: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;--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);display:block;position:fixed;inset:var(--sbb-navigation-inset);z-index:var(--sbb-navigation-z-index, var(--sbb-overlay-default-z-index));overflow:hidden}@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)}.sbb-navigation__content::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-navigation__content::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-navigation__content::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}.sbb-navigation__content::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}.sbb-navigation__content::-webkit-scrollbar-button,.sbb-navigation__content::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-navigation__content{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-navigation__content{display:flex;flex-direction:column;gap:var(--sbb-spacing-responsive-xxl);position:relative;height:var(--sbb-navigation-height);padding-inline:var(--sbb-navigation-padding-inline);padding-block:var(--sbb-navigation-padding-block-start) var(--sbb-navigation-padding-block-end);overflow-y:auto;transform:var(--sbb-navigation-content-transform)}::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%)}}`, Q = {
   subtree: !0,
   attributeFilter: ["data-state"]
 };
-let B = 0;
-const P = 150;
-let e = class extends A(w) {
-  constructor() {
-    super(), this._trigger = null, this._activeNavigationSection = null, this._triggerElement = null, this._abort = new k(this), this._language = new y(this), this._inertController = new E(this), this._focusHandler = new f(), this._scrollHandler = new x(), this._isPointerDownEventOnNavigation = !1, this._resizeObserverTimeout = null, this._navigationResizeObserver = new p(this, {
-      skipInitial: !0,
-      callback: () => 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 : n.querySelector("nav.sbb-navigation-section"),
-        t
-      );
-    }, this._closeOnBackdropClick = (t) => {
-      !this._isPointerDownEventOnNavigation && !l(this._navigation, t) && this.close();
-    }, new h(this, {
-      skipInitial: !0,
-      config: I,
-      callback: (t) => this._onNavigationSectionChange(t)
-    });
-  }
-  set trigger(t) {
-    const i = this._trigger;
-    this._trigger = t, this._removeTriggerClickListener(this._trigger, i);
-  }
-  get trigger() {
-    return this._trigger;
-  }
-  get activeNavigationSection() {
-    return this._activeNavigationSection;
-  }
-  /**
-   * Opens the navigation.
-   */
-  open() {
-    var t;
-    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"));
-  }
-  _checkActiveSection() {
-    var i;
-    const t = this.querySelector(
-      "sbb-navigation-button.sbb-active"
-    );
-    (i = t == null ? void 0 : t.connectedSection) == null || i.open();
-  }
-  _checkActiveActions() {
-    const t = Array.from(
-      this.querySelectorAll(":is(sbb-navigation-button, sbb-navigation-link).sbb-active")
-    );
-    t == null || t.forEach((i) => {
-      var n;
-      return (n = i.marker) == null ? void 0 : n.select(i);
-    });
-  }
-  /**
-   * Closes the navigation.
-   */
-  close() {
-    var t;
-    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.
-  _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.
-  _configure(t) {
-    var i;
-    O(this._triggerElement), t && (this._triggerElement = S(t), this._triggerElement && (z(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.
-  _onAnimationEnd(t) {
-    var i, n;
-    t.animationName === "open" && this.state === "opening" ? (this.state = "opened", this.didOpen.emit(), this._navigationResizeObserver.observe(this), this._inertController.activate(), 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), this._inertController.deactivate(), (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();
-  }
-  _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 n;
-      return (n = i.marker) == null ? void 0 : n.reset();
-    });
-  }
-  _attachWindowEvents() {
-    this._windowEventsController = new AbortController(), window.addEventListener("keydown", (t) => this._onKeydownEvent(t), {
-      signal: this._windowEventsController.signal
-    });
-  }
-  _handleNavigationClose(t) {
-    t.composedPath().filter((n) => n instanceof window.HTMLElement).some((n) => this._isCloseElement(n)) && this.close();
-  }
-  _isCloseElement(t) {
-    return t.nodeName === "A" || t.hasAttribute("sbb-navigation-close") && !t.hasAttribute("disabled");
-  }
-  // Closes the navigation on "Esc" key pressed.
-  _onKeydownEvent(t) {
-    this.state === "opened" && t.key === "Escape" && this.close();
-  }
-  // Set focus on the first focusable element.
-  _setNavigationFocus() {
-    const t = this.shadowRoot.querySelector(
-      "#sbb-navigation-close-button"
-    );
-    g(t), t.focus();
-  }
-  // Observe changes on navigation section data-state.
-  _onNavigationSectionChange(t) {
-    for (const i of t)
-      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._activeNavigationSection));
-  }
-  _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
-    ));
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.id || (this.id = `sbb-navigation-${B++}`);
-    const t = this._abort.signal;
-    this.addEventListener("click", (i) => this._handleNavigationClose(i), { signal: t }), this._configure(this.trigger), this.addEventListener("pointerup", (i) => this._closeOnBackdropClick(i), { signal: t }), this.addEventListener("pointerdown", (i) => this._pointerDownListener(i), { signal: t });
-  }
-  disconnectedCallback() {
-    var t, i;
-    super.disconnectedCallback(), (t = this._navigationController) == null || t.abort(), (i = this._windowEventsController) == null || i.abort(), this._focusHandler.disconnect(), this._scrollHandler.enableScroll();
-  }
-  render() {
-    const t = c`
+let Y = 0;
+const Z = 150;
+let ut = (() => {
+  var b, l, r;
+  let n = [B("sbb-navigation"), $({
+    role: "navigation"
+  })], e, o = [], s, p = G(R), u = [], _, f, w = [], k = [], y, C = [], E = [];
+  return r = class extends p {
+    constructor() {
+      super();
+      h(this, b);
+      h(this, l);
+      this._trigger = (c(this, u), null), v(this, b, c(this, w, "")), v(this, l, (c(this, k), c(this, C, null))), this._navigation = c(this, E), this._triggerElement = null, this._abort = new q(this), this._language = new M(this), this._inertController = new P(this), this._focusHandler = new F(), this._scrollHandler = new X(), this._isPointerDownEventOnNavigation = !1, this._resizeObserverTimeout = null, this._navigationResizeObserver = new I(this, {
+        skipInitial: !0,
+        callback: () => this._onNavigationResize()
+      }), this._trapFocusFilter = (t) => t.nodeName !== "SBB-NAVIGATION-SECTION" || t.getAttribute("data-state") === "opened", this._pointerDownListener = (t) => {
+        var i, a;
+        this._isPointerDownEventOnNavigation = m(this._navigation, t) || m((a = (i = this.querySelector('sbb-navigation-section[data-state="opened"]')) == null ? void 0 : i.shadowRoot) == null ? void 0 : a.querySelector("nav.sbb-navigation-section"), t);
+      }, this._closeOnBackdropClick = (t) => {
+        !this._isPointerDownEventOnNavigation && !m(this._navigation, t) && this.close();
+      }, new T(this, {
+        skipInitial: !0,
+        config: Q,
+        callback: (t) => this._onNavigationSectionChange(t)
+      });
+    }
+    /**
+     * The element that will trigger the navigation.
+     * Accepts both a string (id of an element) or an HTML element.
+     */
+    set trigger(t) {
+      const i = this._trigger;
+      this._trigger = t, this._removeTriggerClickListener(this._trigger, i);
+    }
+    get trigger() {
+      return this._trigger;
+    }
+    /**
+     * This will be forwarded as aria-label to the close button element.
+     */
+    get accessibilityCloseLabel() {
+      return d(this, b);
+    }
+    set accessibilityCloseLabel(t) {
+      v(this, b, t);
+    }
+    /**
+     * Whether a navigation section is displayed.
+     */
+    get _activeNavigationSection() {
+      return d(this, l);
+    }
+    set _activeNavigationSection(t) {
+      v(this, l, t);
+    }
+    get activeNavigationSection() {
+      return this._activeNavigationSection;
+    }
+    /**
+     * Opens the navigation.
+     */
+    open() {
+      var t;
+      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"));
+    }
+    _checkActiveSection() {
+      var i;
+      const t = this.querySelector("sbb-navigation-button.sbb-active");
+      (i = t == null ? void 0 : t.connectedSection) == null || i.open();
+    }
+    _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);
+      });
+    }
+    /**
+     * Closes the navigation.
+     */
+    close() {
+      var t;
+      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.
+    _removeTriggerClickListener(t, i) {
+      var a, x;
+      t !== i && ((a = this._navigationController) == null || a.abort(), (x = this._windowEventsController) == null || x.abort(), this._configure(this.trigger));
+    }
+    // Check if the trigger is valid and attach click event listeners.
+    _configure(t) {
+      var i;
+      K(this._triggerElement), t && (this._triggerElement = j(t), this._triggerElement && (W(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.
+    _onAnimationEnd(t) {
+      var i, a;
+      t.animationName === "open" && this.state === "opening" ? (this.state = "opened", this.didOpen.emit(), this._navigationResizeObserver.observe(this), this._inertController.activate(), 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), L(this._triggerElement), this._inertController.deactivate(), (i = this._triggerElement) == null || i.focus(), this.didClose.emit(), this._navigationResizeObserver.unobserve(this), this._resetMarkers(), (a = this._windowEventsController) == null || a.abort(), this._focusHandler.disconnect(), this._scrollHandler.enableScroll()), this.completeUpdate();
+    }
+    _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();
+      });
+    }
+    _attachWindowEvents() {
+      this._windowEventsController = new AbortController(), window.addEventListener("keydown", (t) => this._onKeydownEvent(t), {
+        signal: this._windowEventsController.signal
+      });
+    }
+    _handleNavigationClose(t) {
+      t.composedPath().filter((a) => a instanceof window.HTMLElement).some((a) => this._isCloseElement(a)) && this.close();
+    }
+    _isCloseElement(t) {
+      return t.nodeName === "A" || t.hasAttribute("sbb-navigation-close") && !t.hasAttribute("disabled");
+    }
+    // Closes the navigation on "Esc" key pressed.
+    _onKeydownEvent(t) {
+      this.state === "opened" && t.key === "Escape" && this.close();
+    }
+    // Set focus on the first focusable element.
+    _setNavigationFocus() {
+      const t = this.shadowRoot.querySelector("#sbb-navigation-close-button");
+      L(t), t.focus();
+    }
+    // Observe changes on navigation section data-state.
+    _onNavigationSectionChange(t) {
+      for (const i of t)
+        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._activeNavigationSection));
+    }
+    _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"), Z));
+    }
+    connectedCallback() {
+      super.connectedCallback(), this.id || (this.id = `sbb-navigation-${Y++}`);
+      const t = this._abort.signal;
+      this.addEventListener("click", (i) => this._handleNavigationClose(i), { signal: t }), this._configure(this.trigger), this.addEventListener("pointerup", (i) => this._closeOnBackdropClick(i), { signal: t }), this.addEventListener("pointerdown", (i) => this._pointerDownListener(i), { signal: t });
+    }
+    disconnectedCallback() {
+      var t, i;
+      super.disconnectedCallback(), (t = this._navigationController) == null || t.abort(), (i = this._windowEventsController) == null || i.abort(), this._focusHandler.disconnect(), this._scrollHandler.enableScroll();
+    }
+    render() {
+      const t = z`
       <sbb-transparent-button
         id="sbb-navigation-close-button"
         class="sbb-navigation__close"
-        aria-label=${this.accessibilityCloseLabel || N[this._language.current]}
+        aria-label=${this.accessibilityCloseLabel || V[this._language.current]}
         aria-controls="sbb-navigation-overlay"
         negative
         size="m"
@@ -172,19 +182,19 @@ let e = class extends A(w) {
         sbb-navigation-close
       ></sbb-transparent-button>
     `;
-    return c`
+      return z`
       <div class="sbb-navigation__container">
         <div
           id="sbb-navigation-overlay"
           @animationend=${(i) => this._onAnimationEnd(i)}
           class="sbb-navigation"
-          ${v((i) => this._navigation = i)}
+          ${O((i) => this._navigation = i)}
         >
           <div class="sbb-navigation__header">${t}</div>
           <div class="sbb-navigation__wrapper">
             <div
               class="sbb-navigation__content"
-              ${v((i) => this._navigationContentElement = i)}
+              ${O((i) => this._navigationContentElement = i)}
             >
               <slot></slot>
             </div>
@@ -193,24 +203,18 @@ let e = class extends A(w) {
         <slot name="navigation-section"></slot>
       </div>
     `;
-  }
-};
-e.styles = T;
-s([
-  d()
-], e.prototype, "trigger", 1);
-s([
-  d({ attribute: "accessibility-close-label" })
-], e.prototype, "accessibilityCloseLabel", 2);
-s([
-  u()
-], e.prototype, "_activeNavigationSection", 2);
-e = s([
-  _("sbb-navigation"),
-  C({
-    role: "navigation"
-  })
-], e);
+    }
+  }, b = new WeakMap(), l = new WeakMap(), s = r, (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(p[Symbol.metadata] ?? null) : void 0;
+    _ = [A()], f = [U(), A({ attribute: "accessibility-close-label" })], y = [D()], g(r, null, _, { kind: "setter", name: "trigger", static: !1, private: !1, access: { has: (i) => "trigger" in i, set: (i, a) => {
+      i.trigger = a;
+    } }, metadata: t }, null, u), g(r, null, f, { kind: "accessor", name: "accessibilityCloseLabel", static: !1, private: !1, access: { has: (i) => "accessibilityCloseLabel" in i, get: (i) => i.accessibilityCloseLabel, set: (i, a) => {
+      i.accessibilityCloseLabel = a;
+    } }, metadata: t }, w, k), g(r, null, y, { kind: "accessor", name: "_activeNavigationSection", static: !1, private: !1, access: { has: (i) => "_activeNavigationSection" in i, get: (i) => i._activeNavigationSection, set: (i, a) => {
+      i._activeNavigationSection = a;
+    } }, metadata: t }, C, E), g(null, e = { value: s }, n, { kind: "class", name: s.name, metadata: t }, null, o), s = e.value, t && Object.defineProperty(s, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), r.styles = J, c(s, o), s;
+})();
 export {
-  e as SbbNavigationElement
+  ut as SbbNavigationElement
 };

package/notification/notification.d.ts

@@ -21,20 +21,20 @@ export declare class SbbNotificationElement extends LitElement {
         readonly didClose: "didClose";
     };
     /** The type of the notification. */
-    type: 'info' | 'success' | 'warn' | 'error';
+    accessor type: 'info' | 'success' | 'warn' | 'error';
     /** Content of title. */
-    titleContent?: string;
+    accessor titleContent: string;
     /** Level of title, it will be rendered as heading tag (e.g. h3). Defaults to level 3. */
-    titleLevel: SbbTitleLevel;
+    accessor titleLevel: SbbTitleLevel;
     /**
      * Whether the notification is readonly.
      * In readonly mode, there is no dismiss button offered to the user.
      */
-    readonly: boolean;
+    accessor readonly: boolean;
     /** Size variant, either s or m. */
-    size: 'm' | 's';
+    accessor size: 'm' | 's';
     /** The enabled animations. */
-    animation: 'open' | 'close' | 'all' | 'none';
+    accessor animation: 'open' | 'close' | 'all' | 'none';
     /** The state of the notification. */
     private set _state(value);
     private get _state();

package/notification/notification.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"notification.d.ts","sourceRoot":"","sources":["../../../src/elements/notification/notification.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAQ,UAAU,EAAW,MAAM,KAAK,CAAC;AAQhD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAIjD,OAAO,+BAA+B,CAAC;AACvC,OAAO,eAAe,CAAC;AACvB,OAAO,YAAY,CAAC;AACpB,OAAO,aAAa,CAAC;AAWrB;;;;;;;;;;;GAWG;AACH,qBAEa,sBAAuB,SAAQ,UAAU;IAEpD,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;;;;MAKlB;IAEX,oCAAoC;IACA,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,CAAU;IAEzF,wBAAwB;IACwC,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtF,yFAAyF;IAC1C,UAAU,EAAE,aAAa,CAAO;IAE/E;;;OAGG;IACgD,QAAQ,UAAS;IAEpE,mCAAmC;IACC,IAAI,EAAE,GAAG,GAAG,GAAG,CAAO;IAE1D,8BAA8B;IACM,SAAS,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,MAAM,CAAS;IAEzF,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;IAEH,2EAA2E;IAC3E,OAAO,CAAC,SAAS,CAGf;IAEF,uDAAuD;IACvD,OAAO,CAAC,QAAQ,CAGd;IAEF,2EAA2E;IAC3E,OAAO,CAAC,UAAU,CAGhB;IAEF,uDAAuD;IACvD,OAAO,CAAC,SAAS,CAGf;IAEF,OAAO,CAAC,KAAK;IAON,KAAK,IAAI,IAAI;IAOJ,iBAAiB,IAAI,IAAI;cAMhB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC;IAa7F,OAAO,CAAC,sBAAsB;IAQ9B,OAAO,CAAC,qBAAqB;IAoB7B,OAAO,CAAC,2BAA2B;IAUnC,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,cAAc;cAOH,MAAM,IAAI,cAAc;CAuC5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,kBAAkB,EAAE,sBAAsB,CAAC;KAC5C;CACF"}
+{"version":3,"file":"notification.d.ts","sourceRoot":"","sources":["../../../src/elements/notification/notification.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAQ,UAAU,EAAW,MAAM,KAAK,CAAC;AAQhD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAIjD,OAAO,+BAA+B,CAAC;AACvC,OAAO,eAAe,CAAC;AACvB,OAAO,YAAY,CAAC;AACpB,OAAO,aAAa,CAAC;AAWrB;;;;;;;;;;;GAWG;AACH,qBAGM,sBAAuB,SAAQ,UAAU;IAE7C,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;;;;MAKlB;IAEX,oCAAoC;IACpC,SAA6C,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,CAAU;IAElG,wBAAwB;IACxB,SAEgB,YAAY,EAAE,MAAM,CAAM;IAE1C,yFAAyF;IACzF,SAAwD,UAAU,EAAE,aAAa,CAAO;IAExF;;;OAGG;IACH,SAEgB,QAAQ,EAAE,OAAO,CAAS;IAE1C,mCAAmC;IACnC,SAA6C,IAAI,EAAE,GAAG,GAAG,GAAG,CAAO;IAEnE,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;IAEH,2EAA2E;IAC3E,OAAO,CAAC,SAAS,CAGf;IAEF,uDAAuD;IACvD,OAAO,CAAC,QAAQ,CAGd;IAEF,2EAA2E;IAC3E,OAAO,CAAC,UAAU,CAGhB;IAEF,uDAAuD;IACvD,OAAO,CAAC,SAAS,CAGf;IAEF,OAAO,CAAC,KAAK;IAON,KAAK,IAAI,IAAI;IAOJ,iBAAiB,IAAI,IAAI;cAMhB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC;IAa7F,OAAO,CAAC,sBAAsB;IAQ9B,OAAO,CAAC,qBAAqB;IAoB7B,OAAO,CAAC,2BAA2B;IAUnC,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,cAAc;cAOH,MAAM,IAAI,cAAc;CAuC5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,kBAAkB,EAAE,sBAAsB,CAAC;KAC5C;CACF"}