@sbb-esta/lyne-elements 2.11.0 → 3.0.0-next.0

package/navigation/navigation/navigation.component.js

@@ -2,58 +2,56 @@ var z = (n) => {
   throw TypeError(n);
 };
 var T = (n, e, o) => e.has(n) || z("Cannot " + o);
-var h = (n, e, o) => (T(n, e, "read from private field"), o ? o.call(n) : e.get(n)), m = (n, e, o) => e.has(n) ? z("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(n) : e.set(n, o), l = (n, e, o, r) => (T(n, e, "write to private field"), r ? r.call(n, o) : e.set(n, o), o);
-import { __esDecorate as p, __runInitializers as c } from "tslib";
+var h = (n, e, o) => (T(n, e, "read from private field"), o ? o.call(n) : e.get(n)), p = (n, e, o) => e.has(n) ? z("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(n) : e.set(n, o), l = (n, e, o, b) => (T(n, e, "write to private field"), b ? b.call(n, o) : e.set(n, o), o);
+import { __esDecorate as m, __runInitializers as c } from "tslib";
 import { MutationController as D } from "@lit-labs/observers/mutation-controller.js";
 import { ResizeController as U } from "@lit-labs/observers/resize-controller.js";
-import { css as R, isServer as q, html as L } from "lit";
+import { css as q, isServer as R, html as L } from "lit";
 import { customElement as P, property as I, state as B } from "lit/decorators.js";
 import { ref as H } from "lit/directives/ref.js";
 import { SbbFocusTrapController as M } from "../../core/a11y.js";
 import { SbbOpenCloseBaseElement as X } from "../../core/base-elements.js";
-import { SbbIdReferenceController as $, SbbLanguageController as Z, SbbInertController as j, SbbEscapableOverlayController as F } from "../../core/controllers.js";
-import { hostAttributes as G, forceType as V } from "../../core/decorators.js";
-import { SbbScrollHandler as J, isZeroAnimationDuration as K } from "../../core/dom.js";
-import { i18nCloseNavigation as Q } from "../../core/i18n.js";
-import { SbbUpdateSchedulerMixin as W } from "../../core/mixins.js";
-import { isEventOnElement as u, removeAriaOverlayTriggerAttributes as Y, setAriaOverlayTriggerAttributes as tt } from "../../core/overlay.js";
+import { SbbLanguageController as $, SbbInertController as Z, SbbEscapableOverlayController as j } from "../../core/controllers.js";
+import { idReference as F, forceType as G } from "../../core/decorators.js";
+import { SbbScrollHandler as V, isZeroAnimationDuration as J } from "../../core/dom.js";
+import { i18nCloseNavigation as K } from "../../core/i18n.js";
+import { SbbUpdateSchedulerMixin as Q } from "../../core/mixins.js";
+import { isEventOnElement as u, removeAriaOverlayTriggerAttributes as W, setAriaOverlayTriggerAttributes as Y } from "../../core/overlay.js";
 import "../../button/transparent-button.js";
-const it = R`*,:before,:after{box-sizing:border-box}:host{--sbb-navigation-grid-column: 1 / 5;--sbb-navigation-animation-duration: var( --sbb-disable-animation-duration, 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: 100dvh;--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);display:none;position:fixed;inset:var(--sbb-navigation-inset);z-index:var(--sbb-navigation-z-index, var(--sbb-overlay-default-z-index));overflow:hidden}@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-duration, 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]:not([data-state=closed])){display:block}: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: 100dvw;--sbb-navigation-content-transform: translateX(0%)}}:host([data-resize-disable-animation]){--sbb-disable-animation-duration: 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%)}}`, at = {
+const tt = q`*,:before,:after{box-sizing:border-box}:host{--sbb-navigation-grid-column: 1 / 5;--sbb-navigation-animation-duration: var( --sbb-disable-animation-duration, 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: 100dvh;--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);display:none;position:fixed;inset:var(--sbb-navigation-inset);z-index:var(--sbb-navigation-z-index, var(--sbb-overlay-default-z-index));overflow:hidden}@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-duration, 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]:not([data-state=closed])){display:block}: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: 100dvw;--sbb-navigation-content-transform: translateX(0%)}}:host([data-resize-disable-animation]){--sbb-disable-animation-duration: 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%)}}`, it = {
   subtree: !0,
   attributeFilter: ["data-state"]
 };
-let nt = 0;
-const et = 150;
-let yt = (() => {
-  var g, v, d, b;
-  let n = [P("sbb-navigation"), G({
-    role: "navigation",
-    popover: "manual"
-  })], e, o = [], r, _ = W(X), f, k = [], w = [], y, C = [], x = [], S, E = [], A = [];
-  return b = class extends _ {
+let at = 0;
+const nt = 150;
+let wt = (() => {
+  var g, v, d, r;
+  let n = [P("sbb-navigation")], e, o = [], b, _ = Q(X), f, k = [], w = [], y, C = [], x = [], S, E = [], N = [];
+  return r = class extends _ {
     constructor() {
       var t, i, a;
       super();
-      m(this, g);
-      m(this, v);
-      m(this, d);
-      l(this, g, c(this, k, null)), l(this, v, (c(this, w), c(this, C, ""))), l(this, d, (c(this, x), c(this, E, null))), this._navigation = c(this, A), this._triggerElement = null, this._triggerIdReferenceController = new $(this, "trigger"), this._language = new Z(this), this._inertController = new j(this), this._escapableOverlayController = new F(this), this._focusTrapController = new M(this), this._scrollHandler = new J(), this._isPointerDownEventOnNavigation = !1, this._resizeObserverTimeout = null, this._navigationResizeObserver = new U(this, {
+      p(this, g);
+      p(this, v);
+      p(this, d);
+      l(this, g, c(this, k, null)), l(this, v, (c(this, w), c(this, C, ""))), l(this, d, (c(this, x), c(this, E, null))), this._navigation = c(this, N), this._triggerElement = null, this._language = new $(this), this._inertController = new Z(this), this._escapableOverlayController = new j(this), this._focusTrapController = new M(this), this._scrollHandler = new V(), this._isPointerDownEventOnNavigation = !1, this._resizeObserverTimeout = null, this._navigationResizeObserver = new U(this, {
         skipInitial: !0,
         callback: () => this._onNavigationResize()
       }), this._pointerDownListener = (s) => {
-        var N, O;
-        this._isPointerDownEventOnNavigation = u(this._navigation, s) || u((O = (N = this.querySelector('sbb-navigation-section[data-state="opened"]')) == null ? void 0 : N.shadowRoot) == null ? void 0 : O.querySelector("nav.sbb-navigation-section"), s);
+        var A, O;
+        this._isPointerDownEventOnNavigation = u(this._navigation, s) || u((O = (A = this.querySelector('sbb-navigation-section[data-state="opened"]')) == null ? void 0 : A.shadowRoot) == null ? void 0 : O.querySelector("nav.sbb-navigation-section"), s);
       }, this._closeOnBackdropClick = (s) => {
         !this._isPointerDownEventOnNavigation && !u(this._navigation, s) && this.close();
       }, (t = this.addEventListener) == null || t.call(this, "click", (s) => this._handleNavigationClose(s)), (i = this.addEventListener) == null || i.call(this, "pointerup", (s) => this._closeOnBackdropClick(s)), (a = this.addEventListener) == null || a.call(this, "pointerdown", (s) => this._pointerDownListener(s)), this.addController(new D(this, {
         skipInitial: !0,
-        config: at,
+        config: it,
         callback: (s) => this._onNavigationSectionChange(s)
       }));
     }
     /**
      * The element that will trigger the navigation.
-     * Accepts both a string (id of an element) or an HTML element.
+     *
+     * For attribute usage, provide an id reference.
      */
     get trigger() {
       return h(this, g);
@@ -112,7 +110,7 @@ let yt = (() => {
       this.state === "opened" && this.willClose.emit() && (this.state = "closing", this.startUpdate(), (t = this._triggerElement) == null || t.setAttribute("aria-expanded", "false"), this._isZeroAnimationDuration() && this._handleClosing());
     }
     _isZeroAnimationDuration() {
-      return K(this, "--sbb-navigation-animation-duration");
+      return J(this, "--sbb-navigation-animation-duration");
     }
     _handleClosing() {
       var t, i, a;
@@ -124,9 +122,8 @@ let yt = (() => {
     // Removes trigger click listener on trigger change.
     // Check if the trigger is valid and attach click event listeners.
     _configureTrigger() {
-      var i;
-      const t = this.trigger instanceof HTMLElement ? this.trigger : this._triggerIdReferenceController.find();
-      t !== this._triggerElement && ((i = this._triggerAbortController) == null || i.abort(), Y(this._triggerElement), this._triggerElement = t, this._triggerElement && (tt(this._triggerElement, "menu", this.id, this.state), this._triggerAbortController = new AbortController(), this._triggerElement.addEventListener("click", () => this.open(), {
+      var t;
+      this.trigger !== this._triggerElement && ((t = this._triggerAbortController) == null || t.abort(), W(this._triggerElement), this._triggerElement = this.trigger, this._triggerElement && (Y(this._triggerElement, "menu", this.id, this.state), this._triggerAbortController = new AbortController(), this._triggerElement.addEventListener("click", () => this.open(), {
         signal: this._triggerAbortController.signal
       })));
     }
@@ -154,17 +151,17 @@ let yt = (() => {
         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"), et));
+      this.state === "opened" && (this._resizeObserverTimeout && clearTimeout(this._resizeObserverTimeout), this.toggleAttribute("data-resize-disable-animation", !0), this._resizeObserverTimeout = setTimeout(() => this.removeAttribute("data-resize-disable-animation"), nt));
     }
     connectedCallback() {
-      super.connectedCallback(), this.id || (this.id = `sbb-navigation-${nt++}`), this.hasUpdated && this._configureTrigger();
+      super.connectedCallback(), this.popover = "manual", this.id || (this.id = `sbb-navigation-${at++}`), this.hasUpdated && this._configureTrigger();
     }
     disconnectedCallback() {
       var t;
       super.disconnectedCallback(), this._triggerElement = null, (t = this._triggerAbortController) == null || t.abort(), this._scrollHandler.enableScroll();
     }
     requestUpdate(t, i, a) {
-      super.requestUpdate(t, i, a), !q && (!t || t === "trigger") && this.hasUpdated && this._configureTrigger();
+      super.requestUpdate(t, i, a), !R && (!t || t === "trigger") && this.hasUpdated && this._configureTrigger();
     }
     firstUpdated(t) {
       super.firstUpdated(t), this._configureTrigger();
@@ -174,7 +171,7 @@ let yt = (() => {
       <sbb-transparent-button
         id="sbb-navigation-close-button"
         class="sbb-navigation__close"
-        aria-label=${this.accessibilityCloseLabel || Q[this._language.current]}
+        aria-label=${this.accessibilityCloseLabel || K[this._language.current]}
         aria-controls="sbb-navigation-overlay"
         negative
         size="m"
@@ -202,17 +199,17 @@ let yt = (() => {
       </div>
     `;
     }
-  }, g = new WeakMap(), v = new WeakMap(), d = new WeakMap(), r = b, (() => {
+  }, g = new WeakMap(), v = new WeakMap(), d = new WeakMap(), b = r, (() => {
     const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(_[Symbol.metadata] ?? null) : void 0;
-    f = [I()], y = [V(), I({ attribute: "accessibility-close-label" })], S = [B()], p(b, null, f, { kind: "accessor", name: "trigger", static: !1, private: !1, access: { has: (i) => "trigger" in i, get: (i) => i.trigger, set: (i, a) => {
+    f = [F(), I()], y = [G(), I({ attribute: "accessibility-close-label" })], S = [B()], m(r, null, f, { kind: "accessor", name: "trigger", static: !1, private: !1, access: { has: (i) => "trigger" in i, get: (i) => i.trigger, set: (i, a) => {
       i.trigger = a;
-    } }, metadata: t }, k, w), p(b, null, y, { kind: "accessor", name: "accessibilityCloseLabel", static: !1, private: !1, access: { has: (i) => "accessibilityCloseLabel" in i, get: (i) => i.accessibilityCloseLabel, set: (i, a) => {
+    } }, metadata: t }, k, w), m(r, null, y, { 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 }, C, x), p(b, null, S, { kind: "accessor", name: "_activeNavigationSection", static: !1, private: !1, access: { has: (i) => "_activeNavigationSection" in i, get: (i) => i._activeNavigationSection, set: (i, a) => {
+    } }, metadata: t }, C, x), m(r, null, S, { 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 }, E, A), p(null, e = { value: r }, n, { kind: "class", name: r.name, metadata: t }, null, o), r = e.value, t && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), b.styles = it, c(r, o), r;
+    } }, metadata: t }, E, N), m(null, e = { value: b }, n, { kind: "class", name: b.name, metadata: t }, null, o), b = e.value, t && Object.defineProperty(b, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), r.role = "navigation", r.styles = tt, c(b, o), b;
 })();
 export {
-  yt as SbbNavigationElement
+  wt as SbbNavigationElement
 };

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

@@ -4,6 +4,7 @@ declare const SbbNavigationButtonElement_base: import('../../core/mixins.js').Ab
  * It displays a button element that can be used in the `sbb-navigation` component.
  *
  * @slot - Use the unnamed slot to add content to the `sbb-navigation-button`.
+ * @overrideType value - string
  */
 export declare class SbbNavigationButtonElement extends SbbNavigationButtonElement_base {
 }

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

@@ -1 +1 @@
-{"version":3,"file":"navigation-button.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/navigation/navigation-button/navigation-button.component.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;;AAGnE;;;;GAIG;AACH,qBAEM,0BAA2B,SAAQ,+BAExC;CAAG;AAEJ,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,uBAAuB,EAAE,0BAA0B,CAAC;KACrD;CACF"}
+{"version":3,"file":"navigation-button.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/navigation/navigation-button/navigation-button.component.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;;AAGnE;;;;;GAKG;AACH,qBAEM,0BAA2B,SAAQ,+BAExC;CAAG;AAEJ,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,uBAAuB,EAAE,0BAA0B,CAAC;KACrD;CACF"}

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

@@ -13,9 +13,10 @@ export declare class SbbNavigationSectionElement extends SbbNavigationSectionEle
     accessor titleContent: string;
     /**
      * The element that will trigger the navigation section.
-     * Accepts both a string (id of an element) or an SbbNavigationButtonElement.
+     *
+     * For attribute usage, provide an id reference.
      */
-    accessor trigger: string | HTMLElement | null;
+    accessor trigger: HTMLElement | null;
     /**
      * This will be forwarded as aria-label to the nav element and is read as a title of the navigation-section.
      */
@@ -32,7 +33,6 @@ export declare class SbbNavigationSectionElement extends SbbNavigationSectionEle
     private _firstLevelNavigation?;
     private _triggerElement;
     private _triggerAbortController;
-    private _triggerIdReferenceController;
     private _windowEventsController;
     private _language;
     private _focusTrapController;

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,qBAKM,2BAA4B,SAAQ,gCAAmC;IAC3E,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD;;OAEG;IACH,SAEgB,YAAY,EAAE,MAAM,CAAM;IAE1C;;;OAGG;IACH,SACgB,OAAO,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI,CAAQ;IAE5D;;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,6BAA6B,CAAiD;IACtF,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;IA4BzB,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;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"}
+{"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;AA4Bb,OAAO,oCAAoC,CAAC;AAC5C,OAAO,kBAAkB,CAAC;;AAI1B;;;;GAIG;AACH,qBAEM,2BAA4B,SAAQ,gCAAmC;IAC3E,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD;;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"}

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

@@ -1,48 +1,46 @@
 var K = (a) => {
   throw TypeError(a);
 };
-var R = (a, n, s) => n.has(a) || K("Cannot " + s);
-var _ = (a, n, s) => (R(a, n, "read from private field"), s ? s.call(a) : n.get(a)), p = (a, n, s) => n.has(a) ? K("Cannot add the same private member more than once") : n instanceof WeakSet ? n.add(a) : n.set(a, s), b = (a, n, s, r) => (R(a, n, "write to private field"), r ? r.call(a, s) : n.set(a, s), s);
-import { __esDecorate as m, __runInitializers as c } from "tslib";
-import { css as $, LitElement as P, isServer as Z, nothing as q, html as H } from "lit";
-import { customElement as j, property as f } from "lit/decorators.js";
-import { SbbFocusTrapController as F, sbbInputModalityDetector as Q, IS_FOCUSABLE_QUERY as W } from "../../core/a11y.js";
-import { SbbIdReferenceController as G, SbbLanguageController as Y, SbbMediaMatcherController as J, SbbMediaQueryBreakpointMediumAndBelow as V } from "../../core/controllers.js";
-import { hostAttributes as X, forceType as k, omitEmptyConverter as tt } from "../../core/decorators.js";
-import { setOrRemoveAttribute as it, isZeroAnimationDuration as et, isBreakpoint as at } from "../../core/dom.js";
-import { i18nGoBack as nt } from "../../core/i18n.js";
-import { SbbUpdateSchedulerMixin as st } from "../../core/mixins.js";
-import { removeAriaOverlayTriggerAttributes as ot, setAriaOverlayTriggerAttributes as rt } from "../../core/overlay.js";
+var q = (a, n, s) => n.has(a) || K("Cannot " + s);
+var _ = (a, n, s) => (q(a, n, "read from private field"), s ? s.call(a) : n.get(a)), p = (a, n, s) => n.has(a) ? K("Cannot add the same private member more than once") : n instanceof WeakSet ? n.add(a) : n.set(a, s), l = (a, n, s, r) => (q(a, n, "write to private field"), r ? r.call(a, s) : n.set(a, s), s);
+import { __esDecorate as m, __runInitializers as b } from "tslib";
+import { css as R, LitElement as P, isServer as Z, nothing as $, html as j } from "lit";
+import { customElement as F, property as f } from "lit/decorators.js";
+import { SbbFocusTrapController as H, sbbInputModalityDetector as Q, IS_FOCUSABLE_QUERY as W } from "../../core/a11y.js";
+import { SbbLanguageController as G, SbbMediaMatcherController as Y, SbbMediaQueryBreakpointMediumAndBelow as J } from "../../core/controllers.js";
+import { forceType as k, omitEmptyConverter as V, idReference as X } from "../../core/decorators.js";
+import { setOrRemoveAttribute as tt, isZeroAnimationDuration as it, isBreakpoint as et } from "../../core/dom.js";
+import { i18nGoBack as at } from "../../core/i18n.js";
+import { SbbUpdateSchedulerMixin as nt } from "../../core/mixins.js";
+import { removeAriaOverlayTriggerAttributes as st, setAriaOverlayTriggerAttributes as ot } from "../../core/overlay.js";
 import "../../button/transparent-button.js";
 import "../../divider.js";
-const lt = $`*,:before,:after{box-sizing:border-box}:host{--sbb-navigation-section-display: none;--sbb-navigation-section-column: 1 / 5;--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 / 9;--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: 80rem){:host{--sbb-navigation-section-column: 5 / 13}}@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-color-white);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: 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-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: 80rem){.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{--sbb-title-line-height: var(--sbb-typo-line-height-titles);--sbb-title-margin-block-start: 0;--sbb-title-margin-block-end: 0;margin:0;margin-block:var(--sbb-title-margin-block-start) var(--sbb-title-margin-block-end);font-family:var(--sbb-typo-font-family);font-weight:700;line-height:var(--sbb-title-line-height);letter-spacing:var(--sbb-typo-letter-spacing-titles);font-size:var(--sbb-title-font-size);--sbb-title-font-size: var(--sbb-font-size-title-4)}@media (min-width: 64rem){.sbb-navigation-section__title{--sbb-title-line-height: var(--sbb-typo-line-height-titles);--sbb-title-margin-block-start: 0;--sbb-title-margin-block-end: 0;margin:0;margin-block:var(--sbb-title-margin-block-start) var(--sbb-title-margin-block-end);font-family:var(--sbb-typo-font-family);font-weight:700;line-height:var(--sbb-title-line-height);letter-spacing:var(--sbb-typo-letter-spacing-titles);font-size:var(--sbb-title-font-size);--sbb-title-font-size: var(--sbb-font-size-title-2)}}.sbb-navigation-section__content{display:grid;grid-template-columns:1fr;grid-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: 80rem){.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 bt = 0, Ct = (() => {
-  var g, d, h, v, o;
-  let a = [j("sbb-navigation-section"), X({
-    slot: "navigation-section"
-  })], n, s = [], r, E = st(P), C, x = [], L = [], A, S = [], z = [], B, N = [], T = [], I, U = [], M = [];
+const rt = R`*,:before,:after{box-sizing:border-box}:host{--sbb-navigation-section-display: none;--sbb-navigation-section-column: 1 / 5;--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 / 9;--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: 80rem){:host{--sbb-navigation-section-column: 5 / 13}}@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-color-white);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: 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-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: 80rem){.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{--sbb-title-line-height: var(--sbb-typo-line-height-titles);--sbb-title-margin-block-start: 0;--sbb-title-margin-block-end: 0;margin:0;margin-block:var(--sbb-title-margin-block-start) var(--sbb-title-margin-block-end);font-family:var(--sbb-typo-font-family);font-weight:700;line-height:var(--sbb-title-line-height);letter-spacing:var(--sbb-typo-letter-spacing-titles);font-size:var(--sbb-title-font-size);--sbb-title-font-size: var(--sbb-font-size-title-4)}@media (min-width: 64rem){.sbb-navigation-section__title{--sbb-title-line-height: var(--sbb-typo-line-height-titles);--sbb-title-margin-block-start: 0;--sbb-title-margin-block-end: 0;margin:0;margin-block:var(--sbb-title-margin-block-start) var(--sbb-title-margin-block-end);font-family:var(--sbb-typo-font-family);font-weight:700;line-height:var(--sbb-title-line-height);letter-spacing:var(--sbb-typo-letter-spacing-titles);font-size:var(--sbb-title-font-size);--sbb-title-font-size: var(--sbb-font-size-title-2)}}.sbb-navigation-section__content{display:grid;grid-template-columns:1fr;grid-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: 80rem){.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 lt = 0, Et = (() => {
+  var c, g, d, h, o;
+  let a = [F("sbb-navigation-section")], n, s = [], r, E = nt(P), x, C = [], L = [], A, S = [], z = [], B, N = [], T = [], I, U = [], O = [];
   return o = class extends E {
     constructor() {
       var t, i;
       super();
+      p(this, c);
       p(this, g);
       p(this, d);
       p(this, h);
-      p(this, v);
-      b(this, g, c(this, x, "")), b(this, d, (c(this, L), c(this, S, null))), b(this, h, (c(this, z), c(this, N, ""))), b(this, v, (c(this, T), c(this, U, ""))), this._firstLevelNavigation = (c(this, M), null), this._triggerElement = null, this._triggerIdReferenceController = new G(this, "trigger"), this._language = new Y(this), this._focusTrapController = new F(this), this._lastKeydownEvent = null, this._handleNavigationSectionClose = (e) => {
-        e.composedPath().filter((l) => l instanceof HTMLElement).some((l) => this._isCloseElement(l)) && this.close();
-      }, this.addController(new J(this, {
-        [V]: (e) => {
+      l(this, c, b(this, C, "")), l(this, g, (b(this, L), b(this, S, null))), l(this, d, (b(this, z), b(this, N, ""))), l(this, h, (b(this, T), b(this, U, ""))), this._firstLevelNavigation = (b(this, O), null), this._triggerElement = null, this._language = new G(this), this._focusTrapController = new H(this), this._lastKeydownEvent = null, this._handleNavigationSectionClose = (e) => {
+        e.composedPath().filter((v) => v instanceof HTMLElement).some((v) => this._isCloseElement(v)) && this.close();
+      }, this.addController(new Y(this, {
+        [J]: (e) => {
           this._state !== "closed" && this._setNavigationInert(e);
         }
       })), (t = this.addEventListener) == null || t.call(this, "keydown", (e) => {
         this._lastKeydownEvent = e;
       }), (i = this.addEventListener) == null || i.call(this, "focusout", (e) => {
-        var l, O, D;
-        if (e.relatedTarget instanceof HTMLElement && !this.contains(e.relatedTarget) && Q.mostRecentModality === "keyboard" && ((l = this._lastKeydownEvent) == null ? void 0 : l.key) === "Tab" && this._triggerElement) {
+        var v, M, D;
+        if (e.relatedTarget instanceof HTMLElement && !this.contains(e.relatedTarget) && Q.mostRecentModality === "keyboard" && ((v = this._lastKeydownEvent) == null ? void 0 : v.key) === "Tab" && this._triggerElement) {
           const u = this.closest("sbb-navigation"), y = Array.from((u == null ? void 0 : u.querySelectorAll(W)) ?? []).filter((w) => !this.contains(w));
           if (this._lastKeydownEvent.shiftKey || !y.length)
-            (O = this._triggerElement) == null || O.focus();
+            (M = this._triggerElement) == null || M.focus();
           else {
             const w = y.indexOf(this._triggerElement);
             (D = y[w + 1] ?? u.closeButton) == null || D.focus();
@@ -54,44 +52,45 @@ let bt = 0, Ct = (() => {
      * The label to be shown before the action list.
      */
     get titleContent() {
-      return _(this, g);
+      return _(this, c);
     }
     set titleContent(t) {
-      b(this, g, t);
+      l(this, c, t);
     }
     /**
      * The element that will trigger the navigation section.
-     * Accepts both a string (id of an element) or an SbbNavigationButtonElement.
+     *
+     * For attribute usage, provide an id reference.
      */
     get trigger() {
-      return _(this, d);
+      return _(this, g);
     }
     set trigger(t) {
-      b(this, d, t);
+      l(this, g, t);
     }
     /**
      * This will be forwarded as aria-label to the nav element and is read as a title of the navigation-section.
      */
     get accessibilityLabel() {
-      return _(this, h);
+      return _(this, d);
     }
     set accessibilityLabel(t) {
-      b(this, h, t);
+      l(this, d, t);
     }
     /**
      * This will be forwarded as aria-label to the back button element.
      */
     get accessibilityBackLabel() {
-      return _(this, v);
+      return _(this, h);
     }
     set accessibilityBackLabel(t) {
-      b(this, v, t);
+      l(this, h, t);
     }
     /**
      * The state of the navigation section.
      */
     set _state(t) {
-      this.setAttribute("data-state", t), it(this, "aria-hidden", this._state !== "opened" ? "true" : null);
+      this.setAttribute("data-state", t), tt(this, "aria-hidden", this._state !== "opened" ? "true" : null);
     }
     get _state() {
       return this.getAttribute("data-state");
@@ -104,7 +103,7 @@ let bt = 0, Ct = (() => {
       this._state !== "closed" || !this.hasUpdated || (this._isNavigationButton(this._triggerElement) && ((i = (t = this._triggerElement) == null ? void 0 : t.marker) == null || i.select(this._triggerElement)), this._closePreviousNavigationSection(), this._state = "opening", this.startUpdate(), this.inert = !0, (e = this._triggerElement) == null || e.setAttribute("aria-expanded", "true"), this._isZeroAnimationDuration() && this._handleOpening());
     }
     _isZeroAnimationDuration() {
-      return et(this, "--sbb-navigation-section-animation-duration");
+      return it(this, "--sbb-navigation-section-animation-duration");
     }
     _handleOpening() {
       this._state = "opened", this.inert = !1, this._attachWindowEvents(), this._setNavigationInert(), this._focusTrapController.focusInitialElement(), this._checkActiveAction(), this.completeUpdate();
@@ -126,11 +125,10 @@ let bt = 0, Ct = (() => {
     }
     // Check if the trigger is valid and attach click event listeners.
     _configureTrigger() {
-      var i, e, l;
-      const t = this.trigger instanceof HTMLElement ? this.trigger : this._triggerIdReferenceController.find();
-      t !== this._triggerElement && ((i = this._triggerAbortController) == null || i.abort(), ot(this._triggerElement), this._triggerElement = t, this._triggerElement && (rt(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(), {
+      var t, i, e;
+      this.trigger !== this._triggerElement && ((t = this._triggerAbortController) == null || t.abort(), st(this._triggerElement), this._triggerElement = this.trigger, this._triggerElement && (ot(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 = (l = (e = this._triggerElement) == null ? void 0 : e.closest) == null ? void 0 : l.call(e, "sbb-navigation")));
+      }), this._firstLevelNavigation = (e = (i = this._triggerElement) == null ? void 0 : i.closest) == null ? void 0 : e.call(i, "sbb-navigation")));
     }
     _isNavigationButton(t) {
       return (t == null ? void 0 : t.localName) === "sbb-navigation-button";
@@ -159,7 +157,7 @@ let bt = 0, Ct = (() => {
       return t.nodeName === "A" || !t.hasAttribute("disabled") && (t.hasAttribute("sbb-navigation-close") || t.hasAttribute("sbb-navigation-section-close"));
     }
     _isBelowLarge() {
-      return at("zero", "large") ?? !1;
+      return et("zero", "large") ?? !1;
     }
     // Closes the navigation on "Esc" key pressed.
     _onKeydownEvent(t) {
@@ -170,7 +168,7 @@ let bt = 0, Ct = (() => {
       (t = this.querySelector(":is(sbb-navigation-button, sbb-navigation-link).sbb-active")) == null || t.toggleAttribute("data-action-active", !0);
     }
     connectedCallback() {
-      super.connectedCallback(), this.id || (this.id = `sbb-navigation-section-${bt++}`), this._state || (this._state = "closed"), this.hasUpdated && this._configureTrigger();
+      super.connectedCallback(), this.slot || (this.slot = "navigation-section"), this.id || (this.id = `sbb-navigation-section-${lt++}`), this._state || (this._state = "closed"), this.hasUpdated && this._configureTrigger();
     }
     disconnectedCallback() {
       var t, i;
@@ -183,13 +181,13 @@ let bt = 0, Ct = (() => {
       super.firstUpdated(t), this._configureTrigger();
     }
     render() {
-      return H`
+      return j`
       <div class="sbb-navigation-section__container">
         <nav
           @animationend=${this._onAnimationEnd}
           class="sbb-navigation-section"
-          aria-labelledby=${this.accessibilityLabel ? q : "title"}
-          aria-label=${this.accessibilityLabel ? this.accessibilityLabel : q}
+          aria-labelledby=${this.accessibilityLabel ? $ : "title"}
+          aria-label=${this.accessibilityLabel ? this.accessibilityLabel : $}
         >
           <div class="sbb-navigation-section__wrapper">
             <div class="sbb-navigation-section__content">
@@ -198,7 +196,7 @@ let bt = 0, Ct = (() => {
                 <sbb-transparent-button
                   id="sbb-navigation-section-back-button"
                   class="sbb-navigation-section__back"
-                  aria-label=${this.accessibilityBackLabel || nt[this._language.current]}
+                  aria-label=${this.accessibilityBackLabel || at[this._language.current]}
                   negative
                   size="m"
                   type="button"
@@ -217,19 +215,19 @@ let bt = 0, Ct = (() => {
       </div>
     `;
     }
-  }, g = new WeakMap(), d = new WeakMap(), h = new WeakMap(), v = new WeakMap(), r = o, (() => {
+  }, c = new WeakMap(), g = new WeakMap(), d = new WeakMap(), h = new WeakMap(), r = o, (() => {
     const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(E[Symbol.metadata] ?? null) : void 0;
-    C = [k(), f({ attribute: "title-content", reflect: !0, converter: tt })], A = [f()], B = [k(), f({ attribute: "accessibility-label" })], I = [k(), f({ attribute: "accessibility-back-label" })], m(o, null, C, { kind: "accessor", name: "titleContent", static: !1, private: !1, access: { has: (i) => "titleContent" in i, get: (i) => i.titleContent, set: (i, e) => {
+    x = [k(), f({ attribute: "title-content", reflect: !0, converter: V })], A = [X(), f()], B = [k(), f({ attribute: "accessibility-label" })], I = [k(), f({ attribute: "accessibility-back-label" })], m(o, null, x, { kind: "accessor", name: "titleContent", static: !1, private: !1, access: { has: (i) => "titleContent" in i, get: (i) => i.titleContent, set: (i, e) => {
       i.titleContent = e;
-    } }, metadata: t }, x, L), m(o, null, A, { kind: "accessor", name: "trigger", static: !1, private: !1, access: { has: (i) => "trigger" in i, get: (i) => i.trigger, set: (i, e) => {
+    } }, metadata: t }, C, L), m(o, null, A, { kind: "accessor", name: "trigger", static: !1, private: !1, access: { has: (i) => "trigger" in i, get: (i) => i.trigger, set: (i, e) => {
       i.trigger = e;
     } }, metadata: t }, S, z), m(o, null, B, { kind: "accessor", name: "accessibilityLabel", static: !1, private: !1, access: { has: (i) => "accessibilityLabel" in i, get: (i) => i.accessibilityLabel, set: (i, e) => {
       i.accessibilityLabel = e;
     } }, metadata: t }, N, T), m(o, null, I, { kind: "accessor", name: "accessibilityBackLabel", static: !1, private: !1, access: { has: (i) => "accessibilityBackLabel" in i, get: (i) => i.accessibilityBackLabel, set: (i, e) => {
       i.accessibilityBackLabel = e;
-    } }, metadata: t }, U, M), m(null, n = { value: r }, a, { kind: "class", name: r.name, metadata: t }, null, s), r = n.value, t && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), o.styles = lt, c(r, s), r;
+    } }, metadata: t }, U, O), m(null, n = { value: r }, a, { kind: "class", name: r.name, metadata: t }, null, s), r = n.value, t && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), o.styles = rt, b(r, s), r;
 })();
 export {
-  Ct as SbbNavigationSectionElement
+  Et as SbbNavigationSectionElement
 };

package/notification/notification.component.d.ts

@@ -1,5 +1,6 @@
 import { CSSResultGroup, LitElement, PropertyValues, TemplateResult } from 'lit';
 import { SbbTitleLevel } from '../title.js';
+declare const SbbNotificationElement_base: import('../core/mixins.js').AbstractConstructor<import('../core/mixins.js').SbbReadonlyMixinType> & typeof LitElement;
 /**
  * It displays messages which require a user's attention without interrupting its tasks.
  *
@@ -12,7 +13,7 @@ import { SbbTitleLevel } from '../title.js';
  * @cssprop [--sbb-notification-margin=0] - Can be used to modify the margin in order to get a smoother animation.
  * See style section for more information.
  */
-export declare class SbbNotificationElement extends LitElement {
+export declare class SbbNotificationElement extends SbbNotificationElement_base {
     static styles: CSSResultGroup;
     static readonly events: {
         readonly willOpen: "willOpen";
@@ -26,11 +27,6 @@ export declare class SbbNotificationElement extends LitElement {
     accessor titleContent: string;
     /** Level of title, it will be rendered as heading tag (e.g. h3). Defaults to level 3. */
     accessor titleLevel: SbbTitleLevel;
-    /**
-     * Whether the notification is readonly.
-     * In readonly mode, there is no dismiss button offered to the user.
-     */
-    accessor readonly: boolean;
     /**
      * Size variant, either s or m.
      * @default 'm' / 's' (lean)
@@ -56,7 +52,7 @@ export declare class SbbNotificationElement extends LitElement {
     private _open;
     close(): void;
     connectedCallback(): void;
-    protected firstUpdated(changedProperties: PropertyValues<this>): Promise<void>;
+    protected firstUpdated(changedProperties: PropertyValues<this>): void;
     private _isZeroAnimationDuration;
     private _setNotificationHeight;
     private _onNotificationResize;
@@ -70,4 +66,5 @@ declare global {
         'sbb-notification': SbbNotificationElement;
     }
 }
+export {};
 //# sourceMappingURL=notification.component.d.ts.map

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;AASb,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;;;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;IAEH,2EAA2E;IAC3E,OAAO,CAAC,SAAS,CAIf;IAEF,uDAAuD;IACvD,OAAO,CAAC,QAAQ,CAId;IAEF,2EAA2E;IAC3E,OAAO,CAAC,UAAU,CAIhB;IAEF,uDAAuD;IACvD,OAAO,CAAC,SAAS,CAIf;IAEF,OAAO,CAAC,KAAK;IAaN,KAAK,IAAI,IAAI;IAYJ,iBAAiB,IAAI,IAAI;cAMhB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC;IAa7F,OAAO,CAAC,wBAAwB;IAIhC,OAAO,CAAC,sBAAsB;IAQ9B,OAAO,CAAC,qBAAqB;IAoB7B,OAAO,CAAC,2BAA2B;IAUnC,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,cAAc;cAOH,MAAM,IAAI,cAAc;CAoC5C;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;AAUb,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,2BAA4B;IAE/D,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,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;IAEH,2EAA2E;IAC3E,OAAO,CAAC,SAAS,CAIf;IAEF,uDAAuD;IACvD,OAAO,CAAC,QAAQ,CAId;IAEF,2EAA2E;IAC3E,OAAO,CAAC,UAAU,CAIhB;IAEF,uDAAuD;IACvD,OAAO,CAAC,SAAS,CAIf;IAEF,OAAO,CAAC,KAAK;IAaN,KAAK,IAAI,IAAI;IAYJ,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;IAMtB,OAAO,CAAC,cAAc;cAOH,MAAM,IAAI,cAAc;CAoC5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,kBAAkB,EAAE,sBAAsB,CAAC;KAC5C;CACF"}