npm - @sbb-esta/lyne-elements - Versions diffs - 2.11.1 → 2.11.2 - Mend

@sbb-esta/lyne-elements 2.11.1 → 2.11.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (374) hide show

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

@@ -1,51 +1,49 @@
-var K = (a) => {
-  throw TypeError(a);
+var I = (e) => {
+  throw TypeError(e);
 };
-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 U = (e, a, n) => a.has(e) || I("Cannot " + n);
+var v = (e, a, n) => (U(e, a, "read from private field"), n ? n.call(e) : a.get(e)), _ = (e, a, n) => a.has(e) ? I("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(e) : a.set(e, n), l = (e, a, n, r) => (U(e, a, "write to private field"), r ? r.call(e, n) : a.set(e, n), n);
+import { __esDecorate as p, __runInitializers as b } from "tslib";
+import { css as O, LitElement as D, isServer as K, nothing as M, html as R } from "lit";
+import { customElement as q, property as m } from "lit/decorators.js";
+import { SbbFocusTrapController as $, sbbInputModalityDetector as P, IS_FOCUSABLE_QUERY as Z } from "../../core/a11y.js";
+import { SbbIdReferenceController as H, SbbLanguageController as j, SbbMediaMatcherController as F, SbbMediaQueryBreakpointMediumAndBelow as Q } from "../../core/controllers.js";
+import { hostAttributes as W, forceType as f, omitEmptyConverter as G } from "../../core/decorators.js";
+import { setOrRemoveAttribute as Y, isZeroAnimationDuration as J, isBreakpoint as V } from "../../core/dom.js";
+import { i18nGoBack as X } from "../../core/i18n.js";
+import { SbbUpdateSchedulerMixin as tt } from "../../core/mixins.js";
+import { removeAriaOverlayTriggerAttributes as it, setAriaOverlayTriggerAttributes as et } 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({
+const at = O`*,: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 nt = 0, ft = (() => {
+  var c, g, d, h, o;
+  let e = [q("sbb-navigation-section"), W({
     slot: "navigation-section"
-  })], n, s = [], r, E = st(P), C, x = [], L = [], A, S = [], z = [], B, N = [], T = [], I, U = [], M = [];
-  return o = class extends E {
+  })], a, n = [], r, y = tt(D), w, k = [], E = [], C, x = [], L = [], A, S = [], z = [], B, N = [], T = [];
+  return o = class extends y {
     constructor() {
-      var t, i;
       super();
-      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) => {
-          this._state !== "closed" && this._setNavigationInert(e);
+      _(this, c);
+      _(this, g);
+      _(this, d);
+      _(this, h);
+      l(this, c, b(this, k, "")), l(this, g, (b(this, E), b(this, x, null))), l(this, d, (b(this, L), b(this, S, ""))), l(this, h, (b(this, z), b(this, N, ""))), this._firstLevelNavigation = (b(this, T), null), this._triggerElement = null, this._triggerIdReferenceController = new H(this, "trigger"), this._language = new j(this), this._focusTrapController = new $(this), this._lastKeydownEvent = null, this._handleNavigationSectionClose = (t) => {
+        t.composedPath().filter((i) => i instanceof HTMLElement).some((i) => this._isCloseElement(i)) && this.close();
+      }, this.addController(new F(this, {
+        [Q]: (t) => {
+          this._state !== "closed" && this._setNavigationInert(t);
         }
-      })), (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) {
-          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();
+      })), this.addEventListener?.("keydown", (t) => {
+        this._lastKeydownEvent = t;
+      }), this.addEventListener?.("focusout", (t) => {
+        if (t.relatedTarget instanceof HTMLElement && !this.contains(t.relatedTarget) && P.mostRecentModality === "keyboard" && this._lastKeydownEvent?.key === "Tab" && this._triggerElement) {
+          const i = this.closest("sbb-navigation"), s = Array.from(i?.querySelectorAll(Z) ?? []).filter((u) => !this.contains(u));
+          if (this._lastKeydownEvent.shiftKey || !s.length)
+            this._triggerElement?.focus();
           else {
-            const w = y.indexOf(this._triggerElement);
-            (D = y[w + 1] ?? u.closeButton) == null || D.focus();
+            const u = s.indexOf(this._triggerElement);
+            (s[u + 1] ?? i.closeButton)?.focus();
           }
         }
       });
@@ -54,44 +52,44 @@ let bt = 0, Ct = (() => {
      * The label to be shown before the action list.
      */
     get titleContent() {
-      return _(this, g);
+      return v(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.
      */
     get trigger() {
-      return _(this, d);
+      return v(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 v(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 v(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), Y(this, "aria-hidden", this._state !== "opened" ? "true" : null);
     }
     get _state() {
       return this.getAttribute("data-state");
@@ -100,44 +98,38 @@ let bt = 0, Ct = (() => {
      * Opens the navigation section on trigger click.
      */
     open() {
-      var t, i, e;
-      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());
+      this._state !== "closed" || !this.hasUpdated || (this._isNavigationButton(this._triggerElement) && this._triggerElement?.marker?.select(this._triggerElement), this._closePreviousNavigationSection(), this._state = "opening", this.startUpdate(), this.inert = !0, this._triggerElement?.setAttribute("aria-expanded", "true"), this._isZeroAnimationDuration() && this._handleOpening());
     }
     _isZeroAnimationDuration() {
-      return et(this, "--sbb-navigation-section-animation-duration");
+      return J(this, "--sbb-navigation-section-animation-duration");
     }
     _handleOpening() {
       this._state = "opened", this.inert = !1, this._attachWindowEvents(), this._setNavigationInert(), this._focusTrapController.focusInitialElement(), this._checkActiveAction(), this.completeUpdate();
     }
     _handleClosing() {
-      var t, i, e;
-      this._state = "closed", (i = (t = this.shadowRoot) == null ? void 0 : t.querySelector(".sbb-navigation-section__container")) == null || i.scrollTo(0, 0), (e = this._windowEventsController) == null || e.abort(), this._resetLists(), this._setNavigationInert(), this._isBelowLarge() && this._triggerElement && this._triggerElement.focus(), this.completeUpdate();
+      this._state = "closed", this.shadowRoot?.querySelector(".sbb-navigation-section__container")?.scrollTo(0, 0), this._windowEventsController?.abort(), this._resetLists(), this._setNavigationInert(), this._isBelowLarge() && this._triggerElement && this._triggerElement.focus(), this.completeUpdate();
     }
     _closePreviousNavigationSection() {
-      var t, i;
-      (i = (t = this._firstLevelNavigation) == null ? void 0 : t.activeNavigationSection) == null || i.close();
+      this._firstLevelNavigation?.activeNavigationSection?.close();
     }
     /**
      * Closes the navigation section.
      */
     close() {
-      var t;
-      this._state === "opened" && (this._state = "closing", this.startUpdate(), this.inert = !0, (t = this._triggerElement) == null || t.setAttribute("aria-expanded", "false"), this._isZeroAnimationDuration() && this._handleClosing());
+      this._state === "opened" && (this._state = "closing", this.startUpdate(), this.inert = !0, this._triggerElement?.setAttribute("aria-expanded", "false"), this._isZeroAnimationDuration() && this._handleClosing());
     }
     // Check if the trigger is valid and attach click event listeners.
     _configureTrigger() {
-      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(), {
+      t !== this._triggerElement && (this._triggerAbortController?.abort(), it(this._triggerElement), this._triggerElement = t, this._triggerElement && (et(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 = this._triggerElement?.closest?.("sbb-navigation")));
     }
     _isNavigationButton(t) {
-      return (t == null ? void 0 : t.localName) === "sbb-navigation-button";
+      return t?.localName === "sbb-navigation-button";
     }
     _setNavigationInert(t = this._isBelowLarge()) {
-      var e;
-      const i = (e = this._firstLevelNavigation) == null ? void 0 : e.navigationContent;
+      const i = this._firstLevelNavigation?.navigationContent;
       i && (i.inert = t && this._state !== "closed");
     }
     // In rare cases it can be that the animationEnd event is triggered twice.
@@ -159,37 +151,35 @@ 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 V("zero", "large") ?? !1;
     }
     // Closes the navigation on "Esc" key pressed.
     _onKeydownEvent(t) {
       this._state === "opened" && t.key === "Escape" && this.close();
     }
     _checkActiveAction() {
-      var t;
-      (t = this.querySelector(":is(sbb-navigation-button, sbb-navigation-link).sbb-active")) == null || t.toggleAttribute("data-action-active", !0);
+      this.querySelector(":is(sbb-navigation-button, sbb-navigation-link).sbb-active")?.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.id ||= `sbb-navigation-section-${nt++}`, this._state ||= "closed", this.hasUpdated && this._configureTrigger();
     }
     disconnectedCallback() {
-      var t, i;
-      super.disconnectedCallback(), this._triggerElement = null, (t = this._triggerAbortController) == null || t.abort(), (i = this._windowEventsController) == null || i.abort();
+      super.disconnectedCallback(), this._triggerElement = null, this._triggerAbortController?.abort(), this._windowEventsController?.abort();
     }
-    requestUpdate(t, i, e) {
-      super.requestUpdate(t, i, e), !Z && (!t || t === "trigger") && this.hasUpdated && this._configureTrigger();
+    requestUpdate(t, i, s) {
+      super.requestUpdate(t, i, s), !K && (!t || t === "trigger") && this.hasUpdated && this._configureTrigger();
     }
     firstUpdated(t) {
       super.firstUpdated(t), this._configureTrigger();
     }
     render() {
-      return H`
+      return R`
       <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 ? M : "title"}
+          aria-label=${this.accessibilityLabel ? this.accessibilityLabel : M}
         >
           <div class="sbb-navigation-section__wrapper">
             <div class="sbb-navigation-section__content">
@@ -198,7 +188,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 || X[this._language.current]}
                   negative
                   size="m"
                   type="button"
@@ -217,19 +207,19 @@ let bt = 0, Ct = (() => {
       </div>
     `;
     }
-  }, g = new WeakMap(), d = new WeakMap(), h = new WeakMap(), v = 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) => {
-      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) => {
-      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;
+  }, c = new WeakMap(), g = new WeakMap(), d = new WeakMap(), h = new WeakMap(), r = o, (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(y[Symbol.metadata] ?? null) : void 0;
+    w = [f(), m({ attribute: "title-content", reflect: !0, converter: G })], C = [m()], A = [f(), m({ attribute: "accessibility-label" })], B = [f(), m({ attribute: "accessibility-back-label" })], p(o, null, w, { kind: "accessor", name: "titleContent", static: !1, private: !1, access: { has: (i) => "titleContent" in i, get: (i) => i.titleContent, set: (i, s) => {
+      i.titleContent = s;
+    } }, metadata: t }, k, E), p(o, null, C, { kind: "accessor", name: "trigger", static: !1, private: !1, access: { has: (i) => "trigger" in i, get: (i) => i.trigger, set: (i, s) => {
+      i.trigger = s;
+    } }, metadata: t }, x, L), p(o, null, A, { kind: "accessor", name: "accessibilityLabel", static: !1, private: !1, access: { has: (i) => "accessibilityLabel" in i, get: (i) => i.accessibilityLabel, set: (i, s) => {
+      i.accessibilityLabel = s;
+    } }, metadata: t }, S, z), p(o, null, B, { kind: "accessor", name: "accessibilityBackLabel", static: !1, private: !1, access: { has: (i) => "accessibilityBackLabel" in i, get: (i) => i.accessibilityBackLabel, set: (i, s) => {
+      i.accessibilityBackLabel = s;
+    } }, metadata: t }, N, T), p(null, a = { value: r }, e, { kind: "class", name: r.name, metadata: t }, null, n), r = a.value, t && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), o.styles = at, b(r, n), r;
 })();
 export {
-  Ct as SbbNavigationSectionElement
+  ft as SbbNavigationSectionElement
 };

package/notification/notification.component.js CHANGED Viewed

@@ -3,7 +3,7 @@ var B = (e) => {
 };
 var M = (e, a, n) => a.has(e) || B("Cannot " + n);
 var c = (e, a, n) => (M(e, a, "read from private field"), n ? n.call(e) : a.get(e)), d = (e, a, n) => a.has(e) ? B("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(e) : a.set(e, n), s = (e, a, n, l) => (M(e, a, "write to private field"), l ? l.call(e, n) : a.set(e, n), n);
-import { __runInitializers as r, __esDecorate as f } from "tslib";
+import { __runInitializers as r, __esDecorate as h } from "tslib";
 import { ResizeController as F } from "@lit-labs/observers/resize-controller.js";
 import { css as G, LitElement as J, nothing as K, html as P } from "lit";
 import { customElement as Q, property as y } from "lit/decorators.js";
@@ -16,7 +16,7 @@ import "../button/secondary-button.js";
 import "../divider.js";
 import "../icon.js";
 import "../title.js";
-const ei = G`*,:before,:after{box-sizing:border-box}:host{--sbb-notification-margin: 0;--sbb-notification-padding-block: var(--sbb-spacing-responsive-xxs);--sbb-notification-padding-inline: var(--sbb-spacing-responsive-xs);--sbb-notification-color: var(--sbb-color-charcoal);--sbb-notification-icon-color: var(--sbb-notification-type-color);--sbb-notification-icon-margin-block-start: 0;--sbb-notification-border-width: var(--sbb-border-width-1x);--sbb-notification-border: var(--sbb-notification-border-width) solid var(--sbb-notification-type-color);--sbb-notification-base-radius: var(--sbb-border-radius-4x);--sbb-notification-border-radius: calc(var(--sbb-notification-base-radius) / 2) var(--sbb-notification-base-radius) var(--sbb-notification-base-radius) calc(var(--sbb-notification-base-radius) / 2);--sbb-notification-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--sbb-notification-timing-function: ease-in;--sbb-notification-content-padding-inline: var(--sbb-spacing-responsive-xxxs) var(--sbb-spacing-responsive-xs);--sbb-focus-outline-color: var(--sbb-focus-outline-color-default);display:block}:host([data-state=opening]:not([animation=open],[animation=all])){--sbb-disable-animation-duration: 0s}:host([data-state=closing]:not([animation=close],[animation=all])){--sbb-disable-animation-duration: 0s}:host([data-resize-disable-animation]){--sbb-disable-animation-duration: 0s}:host([type=info]){--sbb-notification-type-color: var(--sbb-color-smoke);--sbb-notification-type-color-sass: rgb(249.3, 249.3, 249.3);--sbb-notification-icon-color: var(--sbb-notification-color)}:host([type=success]){--sbb-notification-type-color: var(--sbb-color-green);--sbb-notification-type-color-sass: rgb(242.25, 249.15, 244.95)}:host([type=warn]){--sbb-notification-type-color: var(--sbb-color-peach);--sbb-notification-type-color-sass: rgb(254.85, 251.6, 242.25);--sbb-notification-icon-color: var(--sbb-notification-color)}:host([type=error]){--sbb-notification-type-color: var(--sbb-color-red);--sbb-notification-type-color-sass: rgb(254, 242.25, 242.25)}:host([size=s]){--sbb-notification-padding-block: var(--sbb-spacing-responsive-xxxs);--sbb-notification-padding-inline: var(--sbb-spacing-responsive-xxs) var(--sbb-spacing-responsive-xxxs);--sbb-notification-content-padding-inline: var(--sbb-spacing-responsive-xxxs) var(--sbb-spacing-responsive-xxs)}@media (min-width: 37.5rem){:host{--sbb-notification-icon-margin-block-start: calc( ((1em * var(--sbb-typo-line-height-body-text)) - var(--sbb-size-icon-ui-small)) / 2 )}:host(:where([data-slot-names~=title],[title-content])){--sbb-notification-icon-margin-block-start: calc( ( (var(--sbb-font-size-title-5) * var(--sbb-typo-line-height-body-text)) - var( --sbb-size-icon-ui-small ) ) / 2 )}:host([size=s]){--sbb-notification-padding-inline: var(--sbb-spacing-responsive-xxs);--sbb-notification-icon-margin-block-start: 0}}.sbb-notification__wrapper{position:relative;inset-inline-start:calc(var(--sbb-notification-base-radius) - var(--sbb-notification-border-width));width:calc(100% - (var(--sbb-notification-base-radius) - var(--sbb-notification-border-width)));border:var(--sbb-notification-border);border-radius:var(--sbb-notification-border-radius);opacity:0;max-height:0;margin:0}.sbb-notification__wrapper:before{content:"";position:absolute;inset:calc(var(--sbb-notification-border-width) * -1) var(--sbb-notification-base-radius) calc(var(--sbb-notification-border-width) * -1) calc(var(--sbb-notification-base-radius) * -1);background-color:var(--sbb-notification-type-color);border:var(--sbb-notification-border);border-radius:var(--sbb-notification-base-radius)}:host(:is([data-state=opened],[data-state=closing])) .sbb-notification__wrapper{opacity:1;max-height:calc(var(--sbb-notification-height) + var(--sbb-notification-border-width) * 2);margin:var(--sbb-notification-margin, 0)}:host([data-state=opening]) .sbb-notification__wrapper{animation-name:open;animation-fill-mode:forwards;animation-duration:var(--sbb-notification-animation-duration);animation-timing-function:var(--sbb-notification-timing-function)}:host([data-state=closing]) .sbb-notification__wrapper{animation-name:close,close-height;animation-fill-mode:forwards;animation-duration:var(--sbb-notification-animation-duration);animation-timing-function:var(--sbb-notification-timing-function);animation-delay:0s,var(--sbb-disable-animation-duration, var(--sbb-animation-duration-2x))}.sbb-notification{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;padding-block:var(--sbb-notification-padding-block);padding-inline:var(--sbb-notification-padding-inline);color:var(--sbb-notification-color);border-radius:var(--sbb-notification-border-radius);overflow:hidden;background-color:var(--sbb-notification-type-color-sass)}@supports (background-color: color-mix(in srgb,transparent 5%,white)){.sbb-notification{background-color:color-mix(in srgb,var(--sbb-notification-type-color) 5%,white)}}@media (min-width: 37.5rem){.sbb-notification{grid-template-columns:auto 1fr auto;align-items:flex-start}}:host([size=s]) .sbb-notification{--sbb-text-font-size: var(--sbb-font-size-text-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size)}.sbb-notification__icon{color:var(--sbb-notification-icon-color);margin-block-start:var(--sbb-notification-icon-margin-block-start);--sbb-icon-svg-width: var(--sbb-notification-icon-size)}.sbb-notification__title{margin:0}:host(:not([data-slot-names~=title],[title-content])) .sbb-notification__title{display:none}.sbb-notification__content{order:3;grid-area:2/1/3/3;margin-block-start:var(--sbb-spacing-fixed-2x)}@media (min-width: 37.5rem){.sbb-notification__content{order:initial;grid-area:initial;margin-block-start:0;padding-inline:var(--sbb-notification-content-padding-inline)}}.sbb-notification__close-wrapper{display:flex;align-items:center;gap:var(--sbb-spacing-responsive-xxs);height:100%}.sbb-notification__divider{--sbb-divider-color: var(--sbb-notification-type-color);display:none;position:relative;inset-inline-start:var(--sbb-border-width-1x);opacity:.2}@media (min-width: 37.5rem){.sbb-notification__divider{display:block;height:calc(100% - var(--sbb-spacing-fixed-1x) * 2)}}@keyframes open{0%{opacity:0;max-height:0;margin:0}to{opacity:1;max-height:calc(var(--sbb-notification-height) + var(--sbb-notification-border-width) * 2);margin:var(--sbb-notification-margin, 0)}}@keyframes close{0%{opacity:1;margin:var(--sbb-notification-margin, 0)}to{opacity:0;margin:0}}@keyframes close-height{0%{max-height:calc(var(--sbb-notification-height) + var(--sbb-notification-border-width) * 2)}to{max-height:0}}`, ai = /* @__PURE__ */ new Map([
+const ei = G`*,:before,:after{box-sizing:border-box}:host{--sbb-notification-margin: 0;--sbb-notification-padding-block: var(--sbb-spacing-responsive-xxs);--sbb-notification-padding-inline: var(--sbb-spacing-responsive-xs);--sbb-notification-color: var(--sbb-color-charcoal);--sbb-notification-icon-color: var(--sbb-notification-type-color);--sbb-notification-icon-margin-block-start: 0;--sbb-notification-border-width: var(--sbb-border-width-1x);--sbb-notification-border: var(--sbb-notification-border-width) solid var(--sbb-notification-type-color);--sbb-notification-base-radius: var(--sbb-border-radius-4x);--sbb-notification-border-radius: calc(var(--sbb-notification-base-radius) / 2) var(--sbb-notification-base-radius) var(--sbb-notification-base-radius) calc(var(--sbb-notification-base-radius) / 2);--sbb-notification-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--sbb-notification-timing-function: ease-in;--sbb-notification-content-padding-inline: var(--sbb-spacing-responsive-xxxs) var(--sbb-spacing-responsive-xs);--_sbb-notification-icon-authoritative-font-size: 1em;--_sbb-notification-icon-authoritative-line-height: var(--sbb-typo-line-height-body-text);--sbb-focus-outline-color: var(--sbb-focus-outline-color-default);display:block}:host([data-state=opening]:not([animation=open],[animation=all])){--sbb-disable-animation-duration: 0s}:host([data-state=closing]:not([animation=close],[animation=all])){--sbb-disable-animation-duration: 0s}:host([data-resize-disable-animation]){--sbb-disable-animation-duration: 0s}:host([type=info]){--sbb-notification-type-color: var(--sbb-color-smoke);--sbb-notification-type-color-sass: rgb(249.3, 249.3, 249.3);--sbb-notification-icon-color: var(--sbb-notification-color)}:host([type=success]){--sbb-notification-type-color: var(--sbb-color-green);--sbb-notification-type-color-sass: rgb(242.25, 249.15, 244.95)}:host([type=warn]){--sbb-notification-type-color: var(--sbb-color-peach);--sbb-notification-type-color-sass: rgb(254.85, 251.6, 242.25);--sbb-notification-icon-color: var(--sbb-notification-color)}:host([type=error]){--sbb-notification-type-color: var(--sbb-color-red);--sbb-notification-type-color-sass: rgb(254, 242.25, 242.25)}:host([size=s]){--sbb-notification-padding-block: var(--sbb-spacing-responsive-xxxs);--sbb-notification-padding-inline: var(--sbb-spacing-responsive-xxs) var(--sbb-spacing-responsive-xxxs);--sbb-notification-content-padding-inline: var(--sbb-spacing-responsive-xxxs) var(--sbb-spacing-responsive-xxs)}@media (min-width: 37.5rem){:host([size=s]){--sbb-notification-padding-inline: var(--sbb-spacing-responsive-xxs)}}:host(:where([data-slot-names~=title],[title-content])){--_sbb-notification-icon-authoritative-font-size: var(--sbb-font-size-title-5);--_sbb-notification-icon-authoritative-line-height: var(--sbb-typo-line-height-titles)}:host([size=s]:where([data-slot-names~=title],[title-content])){--_sbb-notification-icon-authoritative-font-size: var(--sbb-font-size-title-6);--_sbb-notification-icon-authoritative-line-height: var(--sbb-typo-line-height-body-text)}.sbb-notification__wrapper{position:relative;inset-inline-start:calc(var(--sbb-notification-base-radius) - var(--sbb-notification-border-width));width:calc(100% - (var(--sbb-notification-base-radius) - var(--sbb-notification-border-width)));border:var(--sbb-notification-border);border-radius:var(--sbb-notification-border-radius);opacity:0;max-height:0;margin:0}.sbb-notification__wrapper:before{content:"";position:absolute;inset:calc(var(--sbb-notification-border-width) * -1) var(--sbb-notification-base-radius) calc(var(--sbb-notification-border-width) * -1) calc(var(--sbb-notification-base-radius) * -1);background-color:var(--sbb-notification-type-color);border:var(--sbb-notification-border);border-radius:var(--sbb-notification-base-radius)}:host(:is([data-state=opened],[data-state=closing])) .sbb-notification__wrapper{opacity:1;max-height:calc(var(--sbb-notification-height) + var(--sbb-notification-border-width) * 2);margin:var(--sbb-notification-margin, 0)}:host([data-state=opening]) .sbb-notification__wrapper{animation-name:open;animation-fill-mode:forwards;animation-duration:var(--sbb-notification-animation-duration);animation-timing-function:var(--sbb-notification-timing-function)}:host([data-state=closing]) .sbb-notification__wrapper{animation-name:close,close-height;animation-fill-mode:forwards;animation-duration:var(--sbb-notification-animation-duration);animation-timing-function:var(--sbb-notification-timing-function);animation-delay:0s,var(--sbb-disable-animation-duration, var(--sbb-animation-duration-2x))}.sbb-notification{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;padding-block:var(--sbb-notification-padding-block);padding-inline:var(--sbb-notification-padding-inline);color:var(--sbb-notification-color);border-radius:var(--sbb-notification-border-radius);overflow:hidden;background-color:var(--sbb-notification-type-color-sass)}@supports (background-color: color-mix(in srgb,transparent 5%,white)){.sbb-notification{background-color:color-mix(in srgb,var(--sbb-notification-type-color) 5%,white)}}@media (min-width: 37.5rem){.sbb-notification{grid-template-columns:auto 1fr auto;align-items:flex-start}}:host([size=s]) .sbb-notification{--sbb-text-font-size: var(--sbb-font-size-text-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size)}.sbb-notification__icon{color:var(--sbb-notification-icon-color);--sbb-icon-svg-width: var(--sbb-notification-icon-size)}@media (min-width: 37.5rem){.sbb-notification__icon{margin-block-start:max(0rem,(var(--_sbb-notification-icon-authoritative-font-size) * var(--_sbb-notification-icon-authoritative-line-height) - var(--sbb-size-icon-ui-small)) / 2)}}.sbb-notification__title{margin:0}:host(:not([data-slot-names~=title],[title-content])) .sbb-notification__title{display:none}.sbb-notification__content{order:3;grid-area:2/1/3/3;margin-block-start:var(--sbb-spacing-fixed-2x)}@media (min-width: 37.5rem){.sbb-notification__content{order:initial;grid-area:initial;margin-block-start:0;padding-inline:var(--sbb-notification-content-padding-inline)}}.sbb-notification__close-wrapper{display:flex;align-items:center;gap:var(--sbb-spacing-responsive-xxs);height:100%}.sbb-notification__divider{--sbb-divider-color: var(--sbb-notification-type-color);display:none;position:relative;inset-inline-start:var(--sbb-border-width-1x);opacity:.2}@media (min-width: 37.5rem){.sbb-notification__divider{display:block;height:calc(100% - var(--sbb-spacing-fixed-1x) * 2)}}@keyframes open{0%{opacity:0;max-height:0;margin:0}to{opacity:1;max-height:calc(var(--sbb-notification-height) + var(--sbb-notification-border-width) * 2);margin:var(--sbb-notification-margin, 0)}}@keyframes close{0%{opacity:1;margin:var(--sbb-notification-margin, 0)}to{opacity:0;margin:0}}@keyframes close-height{0%{max-height:calc(var(--sbb-notification-height) + var(--sbb-notification-border-width) * 2)}to{max-height:0}}`, ai = /* @__PURE__ */ new Map([
   ["info", "circle-information-small"],
   ["success", "circle-tick-small"],
   ["warn", "circle-exclamation-point-small"],
@@ -24,8 +24,8 @@ const ei = G`*,:before,:after{box-sizing:border-box}:host{--sbb-notification-mar
 ]), oi = 150;
 let yi = (() => {
   var m, p, v, _, g, u, o;
-  let e = [Q("sbb-notification"), W()], a, n = [], l, w = J, z, k = [], C = [], O, E = [], L = [], N, T = [], A = [], I, S = [], $ = [], D, R = [], H = [], Z, U = [], j = [];
-  var h = (o = class extends w {
+  let e = [Q("sbb-notification"), W()], a, n = [], l, z = J, w, C = [], k = [], O, E = [], L = [], N, T = [], A = [], I, S = [], $ = [], D, R = [], H = [], Z, U = [], j = [];
+  var f = (o = class extends z {
     constructor() {
       super(...arguments);
       d(this, m);
@@ -34,11 +34,11 @@ let yi = (() => {
       d(this, _);
       d(this, g);
       d(this, u);
-      s(this, m, r(this, k, "info")), s(this, p, (r(this, C), r(this, E, ""))), s(this, v, (r(this, L), r(this, T, "3"))), s(this, _, (r(this, A), r(this, S, !1))), s(this, g, (r(this, $), r(this, R, Y() ? "s" : "m"))), s(this, u, (r(this, H), r(this, U, "all"))), this._notificationElement = r(this, j), this._resizeObserverTimeout = null, this._language = new V(this), this._notificationResizeObserver = new F(this, {
+      s(this, m, r(this, C, "info")), s(this, p, (r(this, k), r(this, E, ""))), s(this, v, (r(this, L), r(this, T, "3"))), s(this, _, (r(this, A), r(this, S, !1))), s(this, g, (r(this, $), r(this, R, Y() ? "s" : "m"))), s(this, u, (r(this, H), r(this, U, "all"))), this._notificationElement = r(this, j), this._resizeObserverTimeout = null, this._language = new V(this), this._notificationResizeObserver = new F(this, {
         target: null,
         skipInitial: !0,
         callback: () => this._onNotificationResize()
-      }), this._willOpen = new x(this, h.events.willOpen, { cancelable: !0 }), this._didOpen = new x(this, h.events.didOpen, { cancelable: !0 }), this._willClose = new x(this, h.events.willClose, { cancelable: !0 }), this._didClose = new x(this, h.events.didClose, { cancelable: !0 });
+      }), this._willOpen = new x(this, f.events.willOpen, { cancelable: !0 }), this._didOpen = new x(this, f.events.didOpen, { cancelable: !0 }), this._willClose = new x(this, f.events.willClose, { cancelable: !0 }), this._didClose = new x(this, f.events.didClose, { cancelable: !0 });
     }
     /** The type of the notification. */
     get type() {
@@ -102,18 +102,16 @@ let yi = (() => {
       this._state === "opened" && this._willClose.emit() && (this._state = "closing", this._isZeroAnimationDuration() && this._handleClosing());
     }
     connectedCallback() {
-      this._state || (this._state = "closed"), super.connectedCallback();
+      this._state ||= "closed", super.connectedCallback();
     }
     async firstUpdated(t) {
-      var i;
-      super.firstUpdated(t), this._notificationElement = (i = this.shadowRoot) == null ? void 0 : i.querySelector(".sbb-notification__wrapper"), await this.updateComplete, this._setNotificationHeight(), this._open();
+      super.firstUpdated(t), this._notificationElement = this.shadowRoot?.querySelector(".sbb-notification__wrapper"), await this.updateComplete, this._setNotificationHeight(), this._open();
     }
     _isZeroAnimationDuration() {
       return ii(this, "--sbb-notification-animation-duration");
     }
     _setNotificationHeight() {
-      var i;
-      if (!((i = this._notificationElement) != null && i.scrollHeight))
+      if (!this._notificationElement?.scrollHeight)
         return;
       const t = `${this._notificationElement.scrollHeight}px`;
       this.style.setProperty("--sbb-notification-height", t);
@@ -165,27 +163,27 @@ let yi = (() => {
     `;
     }
   }, m = new WeakMap(), p = new WeakMap(), v = new WeakMap(), _ = new WeakMap(), g = new WeakMap(), u = new WeakMap(), l = o, (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(w[Symbol.metadata] ?? null) : void 0;
-    z = [y({ reflect: !0 })], O = [q(), y({ attribute: "title-content", reflect: !0, converter: X })], N = [y({ attribute: "title-level" })], I = [q(), y({ reflect: !0, type: Boolean })], D = [y({ reflect: !0 })], Z = [y({ reflect: !0 })], f(o, null, z, { kind: "accessor", name: "type", static: !1, private: !1, access: { has: (i) => "type" in i, get: (i) => i.type, set: (i, b) => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(z[Symbol.metadata] ?? null) : void 0;
+    w = [y({ reflect: !0 })], O = [q(), y({ attribute: "title-content", reflect: !0, converter: X })], N = [y({ attribute: "title-level" })], I = [q(), y({ reflect: !0, type: Boolean })], D = [y({ reflect: !0 })], Z = [y({ reflect: !0 })], h(o, null, w, { kind: "accessor", name: "type", static: !1, private: !1, access: { has: (i) => "type" in i, get: (i) => i.type, set: (i, b) => {
       i.type = b;
-    } }, metadata: t }, k, C), f(o, null, O, { kind: "accessor", name: "titleContent", static: !1, private: !1, access: { has: (i) => "titleContent" in i, get: (i) => i.titleContent, set: (i, b) => {
+    } }, metadata: t }, C, k), h(o, null, O, { kind: "accessor", name: "titleContent", static: !1, private: !1, access: { has: (i) => "titleContent" in i, get: (i) => i.titleContent, set: (i, b) => {
       i.titleContent = b;
-    } }, metadata: t }, E, L), f(o, null, N, { kind: "accessor", name: "titleLevel", static: !1, private: !1, access: { has: (i) => "titleLevel" in i, get: (i) => i.titleLevel, set: (i, b) => {
+    } }, metadata: t }, E, L), h(o, null, N, { kind: "accessor", name: "titleLevel", static: !1, private: !1, access: { has: (i) => "titleLevel" in i, get: (i) => i.titleLevel, set: (i, b) => {
       i.titleLevel = b;
-    } }, metadata: t }, T, A), f(o, null, I, { kind: "accessor", name: "readonly", static: !1, private: !1, access: { has: (i) => "readonly" in i, get: (i) => i.readonly, set: (i, b) => {
+    } }, metadata: t }, T, A), h(o, null, I, { kind: "accessor", name: "readonly", static: !1, private: !1, access: { has: (i) => "readonly" in i, get: (i) => i.readonly, set: (i, b) => {
       i.readonly = b;
-    } }, metadata: t }, S, $), f(o, null, D, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (i) => "size" in i, get: (i) => i.size, set: (i, b) => {
+    } }, metadata: t }, S, $), h(o, null, D, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (i) => "size" in i, get: (i) => i.size, set: (i, b) => {
       i.size = b;
-    } }, metadata: t }, R, H), f(o, null, Z, { kind: "accessor", name: "animation", static: !1, private: !1, access: { has: (i) => "animation" in i, get: (i) => i.animation, set: (i, b) => {
+    } }, metadata: t }, R, H), h(o, null, Z, { kind: "accessor", name: "animation", static: !1, private: !1, access: { has: (i) => "animation" in i, get: (i) => i.animation, set: (i, b) => {
       i.animation = b;
-    } }, metadata: t }, U, j), f(null, a = { value: l }, e, { kind: "class", name: l.name, metadata: t }, null, n), h = l = a.value, t && Object.defineProperty(l, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+    } }, metadata: t }, U, j), h(null, a = { value: l }, e, { kind: "class", name: l.name, metadata: t }, null, n), f = l = a.value, t && Object.defineProperty(l, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
   })(), o.styles = ei, o.events = {
     willOpen: "willOpen",
     didOpen: "didOpen",
     willClose: "willClose",
     didClose: "didClose"
   }, r(l, n), o);
-  return h = l;
+  return f = l;
 })();
 export {
   yi as SbbNotificationElement