@sbb-esta/lyne-elements-dev 4.7.0-dev.1773149675 → 4.7.0-dev.1773159918

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

@@ -1,35 +1,35 @@
-var I = (e) => {
+var z = (e) => {
   throw TypeError(e);
 };
-var U = (e, s, a) => s.has(e) || I("Cannot " + a);
-var h = (e, s, a) => (U(e, s, "read from private field"), a ? a.call(e) : s.get(e)), p = (e, s, a) => s.has(e) ? I("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(e) : s.set(e, a), l = (e, s, a, r) => (U(e, s, "write to private field"), r ? r.call(e, a) : s.set(e, a), a);
-import { __esDecorate as _, __runInitializers as b } from "tslib";
-import { css as K, isServer as q, nothing as O, html as $ } from "lit";
-import { customElement as P, property as m } from "lit/decorators.js";
-import { SbbFocusTrapController as R, sbbInputModalityDetector as Z, IS_FOCUSABLE_QUERY as H } from "../../core/a11y.js";
-import { SbbOpenCloseBaseElement as j } from "../../core/base-elements/open-close-base-element.js";
-import { SbbLanguageController as F, SbbMediaMatcherController as Q, SbbMediaQueryBreakpointSmallAndBelow as M } from "../../core/controllers.js";
-import { forceType as f, omitEmptyConverter as W, idReference as G } from "../../core/decorators.js";
-import { isZeroAnimationDuration as Y } from "../../core/dom.js";
-import { i18nGoBack as J } from "../../core/i18n.js";
-import { SbbUpdateSchedulerMixin as V, ɵstateController as D } from "../../core/mixins.js";
-import { removeAriaOverlayTriggerAttributes as X, setAriaOverlayTriggerAttributes as tt } from "../../core/overlay.js";
-import { boxSizingStyles as it } from "../../core/styles.js";
+var S = (e, s, a) => s.has(e) || z("Cannot " + a);
+var v = (e, s, a) => (S(e, s, "read from private field"), a ? a.call(e) : s.get(e)), p = (e, s, a) => s.has(e) ? z("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(e) : s.set(e, a), r = (e, s, a, h) => (S(e, s, "write to private field"), h ? h.call(e, a) : s.set(e, a), a);
+import { __esDecorate as m, __runInitializers as l } from "tslib";
+import { css as U, isServer as O, nothing as T, html as M } from "lit";
+import { property as _ } from "lit/decorators.js";
+import { SbbFocusTrapController as K, sbbInputModalityDetector as q, IS_FOCUSABLE_QUERY as D } from "../../core/a11y.js";
+import { SbbOpenCloseBaseElement as $ } from "../../core/base-elements/open-close-base-element.js";
+import { SbbLanguageController as P, SbbMediaMatcherController as R, SbbMediaQueryBreakpointSmallAndBelow as N } from "../../core/controllers.js";
+import { forceType as f, omitEmptyConverter as Z, idReference as H } from "../../core/decorators.js";
+import { isZeroAnimationDuration as j } from "../../core/dom.js";
+import { i18nGoBack as F } from "../../core/i18n.js";
+import { SbbUpdateSchedulerMixin as Q, ɵstateController as I } from "../../core/mixins.js";
+import { removeAriaOverlayTriggerAttributes as W, setAriaOverlayTriggerAttributes as G } from "../../core/overlay.js";
+import { boxSizingStyles as Y } from "../../core/styles.js";
 import "../../button/transparent-button.js";
 import "../../divider.js";
-const et = K`:host{--sbb-navigation-section-display: none;--sbb-navigation-section-column: 1 / -1;--sbb-navigation-section-position: fixed;--sbb-navigation-section-pointer-events: none;--sbb-navigation-section-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-3x) );--sbb-navigation-section-animation-easing: ease-out;--sbb-navigation-section-padding-inline: var(--sbb-layout-base-offset-responsive);--sbb-navigation-section-padding-block: var(--sbb-spacing-responsive-l);--sbb-navigation-section-translate: 100%;--sbb-navigation-section-content-padding-inline-start: var(--sbb-spacing-fixed-12x);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-navigation-section-width: 100dvw;--sbb-navigation-section-height: 100dvh;display:var(--sbb-navigation-section-display);position:var(--sbb-navigation-section-position);grid-column:var(--sbb-navigation-section-column);inset-inline-start:0;inset-block-start:0;width:var(--sbb-navigation-section-width);height:var(--sbb-navigation-section-height);z-index:var(--sbb-navigation-z-index, var(--sbb-overlay-default-z-index))}@media(min-width:64rem){:host{--sbb-navigation-section-column: 5 / 13;--sbb-navigation-section-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--sbb-navigation-section-padding-block: var(--sbb-spacing-responsive-xl);--sbb-navigation-section-padding-inline: var(--sbb-spacing-fixed-8x) var(--sbb-layout-base-offset-responsive);--sbb-navigation-section-position: relative;--sbb-navigation-section-translate: 0;--sbb-navigation-section-content-padding-inline-start: 0;--sbb-navigation-section-width: calc( 100% + var(--sbb-layout-base-offset-responsive) + var(--sbb-grid-base-gutter-responsive) );translate:calc(var(--sbb-grid-base-gutter-responsive) * -1) 0}}@media(min-width:90rem){:host{--sbb-navigation-section-column: 6 / 17;--sbb-navigation-section-padding-block: var(--sbb-spacing-responsive-xxl) var(--sbb-spacing-responsive-l)}}:host(:is(:state(state-opened),[state--state-opened])){--sbb-navigation-section-pointer-events: all}:host(:is(:state(state-opening),[state--state-opening])){--sbb-navigation-section-position: absolute}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-closing),[state--state-closing]))){--sbb-navigation-section-pointer-events: none}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))){--sbb-navigation-section-display: block}::slotted(*){padding-inline-start:var(--sbb-navigation-section-content-padding-inline-start)}::slotted(:is(:state(sbb-button),[state--sbb-button])){grid-column-start:1}.sbb-navigation-section__container{pointer-events:var(--sbb-navigation-section-pointer-events);height:var(--sbb-navigation-section-height)}.sbb-navigation-section{display:none;border:none;margin:0;width:100%;height:100%;color:var(--sbb-navigation-color, var(--sbb-color-1-negative));background-color:transparent;padding:0;overflow:hidden}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))) .sbb-navigation-section{display:block;animation-name:open;animation-duration:var(--sbb-navigation-section-animation-duration);animation-timing-function:var(--sbb-navigation-section-animation-easing)}:host(:is(:state(state-closing),[state--state-closing])) .sbb-navigation-section{animation-name:close}@media(forced-colors:active){.sbb-navigation-section{outline:var(--sbb-border-width-1x) solid CanvasText}}.sbb-navigation-section__wrapper{--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-white) 30%, transparent);--sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-white) 60%, transparent);--sbb-scrollbar-track-color: transparent;--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-navigation-section__wrapper::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-navigation-section__wrapper::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-navigation-section__wrapper::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}.sbb-navigation-section__wrapper::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}.sbb-navigation-section__wrapper::-webkit-scrollbar-button,.sbb-navigation-section__wrapper::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-navigation-section__wrapper{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-navigation-section__wrapper{height:100%;padding-block:var(--sbb-navigation-section-padding-block);outline:none;overflow-y:auto}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-closing),[state--state-closing]))) .sbb-navigation-section__wrapper{--sbb-scrollbar-color: transparent;scrollbar-color:transparent transparent}.sbb-navigation-section__header{position:relative;display:flex;align-items:center;gap:var(--sbb-spacing-fixed-1x);margin-block-start:var(--sbb-spacing-responsive-xxl);padding-inline-start:var(--sbb-navigation-section-content-padding-inline-start)}@media(min-width:64rem){.sbb-navigation-section__header{margin-block-start:0;padding-inline-start:0}}@media(min-width:90rem){.sbb-navigation-section__header{grid-column:1/4}}.sbb-navigation-section__back{position:absolute;translate:calc((100% + var(--sbb-spacing-fixed-1x)) * -1) 0}@media(min-width:64rem){.sbb-navigation-section__back{display:none}}.sbb-navigation-section__title{margin-block:var(--sbb-title-margin-block, 0);margin-inline:0;font-family:var(--sbb-typo-font-family);font-weight:700;line-height:var(--sbb-title-line-height, var(--sbb-typo-line-height-heading));letter-spacing:var(--sbb-typo-letter-spacing-heading);font-size:var(--sbb-title-font-size);--sbb-title-font-size: var(--sbb-title-font-size-level-4-lean, var(--sbb-heading-font-size-4))}@media(min-width:64rem){.sbb-navigation-section__title{--sbb-title-font-size: var(--sbb-title-font-size-level-2-lean, var(--sbb-heading-font-size-2))}}.sbb-navigation-section__content{display:grid;grid-template-columns:1fr;gap:var(--sbb-spacing-responsive-l) var(--sbb-grid-base-gutter-responsive);padding-inline:var(--sbb-navigation-section-padding-inline)}@media(min-width:64rem){.sbb-navigation-section__content{opacity:0;translate:0 var(--sbb-spacing-fixed-3x);transition-duration:var(--sbb-navigation-section-animation-duration);transition-delay:var(--sbb-navigation-section-animation-duration);transition-timing-function:var(--sbb-navigation-section-animation-easing);transition-property:opacity,translate}:host(:is(:state(state-opened),[state--state-opened])) .sbb-navigation-section__content{opacity:1;translate:0 0}}@media(min-width:90rem){.sbb-navigation-section__content{grid-template-columns:repeat(3,1fr)}}:host(:is(:state(state-closing),[state--state-closing])) .sbb-navigation-section__content{transition-delay:0s}@keyframes open{0%{translate:var(--sbb-navigation-section-translate) 0}to{translate:0 0}}@keyframes close{0%{translate:0 0}to{translate:var(--sbb-navigation-section-translate) 0}}`;
-let st = 0, yt = (() => {
-  var c, g, d, v, o;
-  let e = [P("sbb-navigation-section")], s, a = [], r, y = V(j), w, k = [], E = [], C, x = [], L = [], A, S = [], B = [], z, N = [], T = [];
-  return o = class extends y {
+const J = U`:host{--sbb-navigation-section-display: none;--sbb-navigation-section-column: 1 / -1;--sbb-navigation-section-position: fixed;--sbb-navigation-section-pointer-events: none;--sbb-navigation-section-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-3x) );--sbb-navigation-section-animation-easing: ease-out;--sbb-navigation-section-padding-inline: var(--sbb-layout-base-offset-responsive);--sbb-navigation-section-padding-block: var(--sbb-spacing-responsive-l);--sbb-navigation-section-translate: 100%;--sbb-navigation-section-content-padding-inline-start: var(--sbb-spacing-fixed-12x);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-navigation-section-width: 100dvw;--sbb-navigation-section-height: 100dvh;display:var(--sbb-navigation-section-display);position:var(--sbb-navigation-section-position);grid-column:var(--sbb-navigation-section-column);inset-inline-start:0;inset-block-start:0;width:var(--sbb-navigation-section-width);height:var(--sbb-navigation-section-height);z-index:var(--sbb-navigation-z-index, var(--sbb-overlay-default-z-index))}@media(min-width:64rem){:host{--sbb-navigation-section-column: 5 / 13;--sbb-navigation-section-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--sbb-navigation-section-padding-block: var(--sbb-spacing-responsive-xl);--sbb-navigation-section-padding-inline: var(--sbb-spacing-fixed-8x) var(--sbb-layout-base-offset-responsive);--sbb-navigation-section-position: relative;--sbb-navigation-section-translate: 0;--sbb-navigation-section-content-padding-inline-start: 0;--sbb-navigation-section-width: calc( 100% + var(--sbb-layout-base-offset-responsive) + var(--sbb-grid-base-gutter-responsive) );translate:calc(var(--sbb-grid-base-gutter-responsive) * -1) 0}}@media(min-width:90rem){:host{--sbb-navigation-section-column: 6 / 17;--sbb-navigation-section-padding-block: var(--sbb-spacing-responsive-xxl) var(--sbb-spacing-responsive-l)}}:host(:is(:state(state-opened),[state--state-opened])){--sbb-navigation-section-pointer-events: all}:host(:is(:state(state-opening),[state--state-opening])){--sbb-navigation-section-position: absolute}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-closing),[state--state-closing]))){--sbb-navigation-section-pointer-events: none}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))){--sbb-navigation-section-display: block}::slotted(*){padding-inline-start:var(--sbb-navigation-section-content-padding-inline-start)}::slotted(:is(:state(sbb-button),[state--sbb-button])){grid-column-start:1}.sbb-navigation-section__container{pointer-events:var(--sbb-navigation-section-pointer-events);height:var(--sbb-navigation-section-height)}.sbb-navigation-section{display:none;border:none;margin:0;width:100%;height:100%;color:var(--sbb-navigation-color, var(--sbb-color-1-negative));background-color:transparent;padding:0;overflow:hidden}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))) .sbb-navigation-section{display:block;animation-name:open;animation-duration:var(--sbb-navigation-section-animation-duration);animation-timing-function:var(--sbb-navigation-section-animation-easing)}:host(:is(:state(state-closing),[state--state-closing])) .sbb-navigation-section{animation-name:close}@media(forced-colors:active){.sbb-navigation-section{outline:var(--sbb-border-width-1x) solid CanvasText}}.sbb-navigation-section__wrapper{--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-white) 30%, transparent);--sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-white) 60%, transparent);--sbb-scrollbar-track-color: transparent;--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-navigation-section__wrapper::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-navigation-section__wrapper::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-navigation-section__wrapper::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}.sbb-navigation-section__wrapper::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}.sbb-navigation-section__wrapper::-webkit-scrollbar-button,.sbb-navigation-section__wrapper::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-navigation-section__wrapper{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-navigation-section__wrapper{height:100%;padding-block:var(--sbb-navigation-section-padding-block);outline:none;overflow-y:auto}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-closing),[state--state-closing]))) .sbb-navigation-section__wrapper{--sbb-scrollbar-color: transparent;scrollbar-color:transparent transparent}.sbb-navigation-section__header{position:relative;display:flex;align-items:center;gap:var(--sbb-spacing-fixed-1x);margin-block-start:var(--sbb-spacing-responsive-xxl);padding-inline-start:var(--sbb-navigation-section-content-padding-inline-start)}@media(min-width:64rem){.sbb-navigation-section__header{margin-block-start:0;padding-inline-start:0}}@media(min-width:90rem){.sbb-navigation-section__header{grid-column:1/4}}.sbb-navigation-section__back{position:absolute;translate:calc((100% + var(--sbb-spacing-fixed-1x)) * -1) 0}@media(min-width:64rem){.sbb-navigation-section__back{display:none}}.sbb-navigation-section__title{margin-block:var(--sbb-title-margin-block, 0);margin-inline:0;font-family:var(--sbb-typo-font-family);font-weight:700;line-height:var(--sbb-title-line-height, var(--sbb-typo-line-height-heading));letter-spacing:var(--sbb-typo-letter-spacing-heading);font-size:var(--sbb-title-font-size);--sbb-title-font-size: var(--sbb-title-font-size-level-4-lean, var(--sbb-heading-font-size-4))}@media(min-width:64rem){.sbb-navigation-section__title{--sbb-title-font-size: var(--sbb-title-font-size-level-2-lean, var(--sbb-heading-font-size-2))}}.sbb-navigation-section__content{display:grid;grid-template-columns:1fr;gap:var(--sbb-spacing-responsive-l) var(--sbb-grid-base-gutter-responsive);padding-inline:var(--sbb-navigation-section-padding-inline)}@media(min-width:64rem){.sbb-navigation-section__content{opacity:0;translate:0 var(--sbb-spacing-fixed-3x);transition-duration:var(--sbb-navigation-section-animation-duration);transition-delay:var(--sbb-navigation-section-animation-duration);transition-timing-function:var(--sbb-navigation-section-animation-easing);transition-property:opacity,translate}:host(:is(:state(state-opened),[state--state-opened])) .sbb-navigation-section__content{opacity:1;translate:0 0}}@media(min-width:90rem){.sbb-navigation-section__content{grid-template-columns:repeat(3,1fr)}}:host(:is(:state(state-closing),[state--state-closing])) .sbb-navigation-section__content{transition-delay:0s}@keyframes open{0%{translate:var(--sbb-navigation-section-translate) 0}to{translate:0 0}}@keyframes close{0%{translate:0 0}to{translate:var(--sbb-navigation-section-translate) 0}}`;
+let V = 0, pt = (() => {
+  var b, c, g, d, o;
+  let e = Q($), s, a = [], h = [], y, w = [], k = [], E, C = [], x = [], L, A = [], B = [];
+  return o = class extends e {
     constructor() {
       super();
+      p(this, b);
       p(this, c);
       p(this, g);
       p(this, d);
-      p(this, v);
-      l(this, c, b(this, k, "")), l(this, g, (b(this, E), b(this, x, null))), l(this, d, (b(this, L), b(this, S, ""))), l(this, v, (b(this, B), b(this, N, ""))), this._firstLevelNavigation = (b(this, T), null), this._triggerElement = null, this._language = new F(this), this._focusTrapController = new R(this), this._lastKeydownEvent = null, this._mediaMatcherController = new Q(this, {
-        [M]: (t) => {
+      r(this, b, l(this, a, "")), r(this, c, (l(this, h), l(this, w, null))), r(this, g, (l(this, k), l(this, C, ""))), r(this, d, (l(this, x), l(this, A, ""))), this._firstLevelNavigation = (l(this, B), null), this._triggerElement = null, this._language = new P(this), this._focusTrapController = new K(this), this._lastKeydownEvent = null, this._mediaMatcherController = new R(this, {
+        [N]: (t) => {
           this.state !== "closed" && this._setNavigationInert(t);
         }
       }), this._handleNavigationSectionClose = (t) => {
@@ -37,8 +37,8 @@ let st = 0, yt = (() => {
       }, this.addEventListener?.("keydown", (t) => {
         this._lastKeydownEvent = t;
       }), this.addEventListener?.("focusout", (t) => {
-        if (t.relatedTarget instanceof HTMLElement && !this.contains(t.relatedTarget) && Z.mostRecentModality === "keyboard" && this._lastKeydownEvent?.key === "Tab" && this._triggerElement) {
-          const i = this.closest("sbb-navigation"), n = Array.from(i?.querySelectorAll(H) ?? []).filter((u) => !this.contains(u));
+        if (t.relatedTarget instanceof HTMLElement && !this.contains(t.relatedTarget) && q.mostRecentModality === "keyboard" && this._lastKeydownEvent?.key === "Tab" && this._triggerElement) {
+          const i = this.closest("sbb-navigation"), n = Array.from(i?.querySelectorAll(D) ?? []).filter((u) => !this.contains(u));
           if (this._lastKeydownEvent.shiftKey || !n.length)
             this._triggerElement?.focus();
           else {
@@ -52,10 +52,10 @@ let st = 0, yt = (() => {
      * The label to be shown before the action list.
      */
     get titleContent() {
-      return h(this, c);
+      return v(this, b);
     }
     set titleContent(t) {
-      l(this, c, t);
+      r(this, b, t);
     }
     /**
      * The element that will trigger the navigation section.
@@ -63,28 +63,28 @@ let st = 0, yt = (() => {
      * For attribute usage, provide an id reference.
      */
     get trigger() {
-      return h(this, g);
+      return v(this, c);
     }
     set trigger(t) {
-      l(this, g, t);
+      r(this, c, 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 h(this, d);
+      return v(this, g);
     }
     set accessibilityLabel(t) {
-      l(this, d, t);
+      r(this, g, t);
     }
     /**
      * This will be forwarded as aria-label to the back button element.
      */
     get accessibilityBackLabel() {
-      return h(this, v);
+      return v(this, d);
     }
     set accessibilityBackLabel(t) {
-      l(this, v, t);
+      r(this, d, t);
     }
     /** The state of the component. */
     set state(t) {
@@ -100,7 +100,7 @@ let st = 0, yt = (() => {
       this.state !== "closed" || !this.hasUpdated || !this.dispatchBeforeOpenEvent() || (this._isNavigationButton(this._triggerElement) && this._triggerElement?.marker?.select(this._triggerElement), this._closePreviousNavigationSection(), this.state = "opening", this.dispatchEvent(new Event("ɵnavigationsectionopening")), this.startUpdate(), this.inert = !0, this._triggerElement?.setAttribute("aria-expanded", "true"), this._isZeroAnimationDuration() && this._handleOpening());
     }
     _isZeroAnimationDuration() {
-      return Y(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(), this.dispatchOpenEvent();
@@ -119,7 +119,7 @@ let st = 0, yt = (() => {
     }
     // Check if the trigger is valid and attach click event listeners.
     _configureTrigger() {
-      this.trigger !== this._triggerElement && (this._triggerAbortController?.abort(), X(this._triggerElement), this._triggerElement = this.trigger, this._triggerElement && (tt(this._triggerElement, "menu", this.id, this.state), this._triggerAbortController = new AbortController(), this._isNavigationButton(this._triggerElement) && (this._triggerElement.connectedSection = this), this._triggerElement.addEventListener("click", () => this.open(), {
+      this.trigger !== this._triggerElement && (this._triggerAbortController?.abort(), W(this._triggerElement), this._triggerElement = this.trigger, this._triggerElement && (G(this._triggerElement, "menu", this.id, this.state), this._triggerAbortController = new AbortController(), this._isNavigationButton(this._triggerElement) && (this._triggerElement.connectedSection = this), this._triggerElement.addEventListener("click", () => this.open(), {
         signal: this._triggerAbortController.signal
       }), this._firstLevelNavigation = this._triggerElement?.closest?.("sbb-navigation")));
     }
@@ -136,7 +136,7 @@ let st = 0, yt = (() => {
       t.animationName === "open" && this.state === "opening" ? this._handleOpening() : t.animationName === "close" && this.state === "closing" && this._handleClosing();
     }
     _resetLists() {
-      Array.from(this.querySelectorAll(":is(:state(section-action),[state--section-action]):is(:state(action-active),[state--action-active])") ?? []).forEach((t) => D(t).delete("action-active"));
+      Array.from(this.querySelectorAll(":is(:state(section-action),[state--section-action]):is(:state(action-active),[state--action-active])") ?? []).forEach((t) => I(t).delete("action-active"));
     }
     _attachWindowEvents() {
       this._windowEventsController = new AbortController(), window.addEventListener("keydown", (t) => this._onKeydownEvent(t), {
@@ -149,7 +149,7 @@ let st = 0, yt = (() => {
       return t.nodeName === "A" || !t.hasAttribute("disabled") && (t.hasAttribute("sbb-navigation-close") || t.hasAttribute("sbb-navigation-section-close"));
     }
     _isBelowLarge() {
-      return this._mediaMatcherController.matches(M) ?? !1;
+      return this._mediaMatcherController.matches(N) ?? !1;
     }
     // Closes the navigation on "Esc" key pressed.
     _onKeydownEvent(t) {
@@ -157,28 +157,28 @@ let st = 0, yt = (() => {
     }
     _checkActiveAction() {
       const t = this.querySelector(":is(sbb-navigation-button, sbb-navigation-link).sbb-active");
-      D(t)?.toggle("action-active", !0);
+      I(t)?.toggle("action-active", !0);
     }
     connectedCallback() {
-      super.connectedCallback(), this.slot ||= "navigation-section", this.id ||= `sbb-navigation-section-${st++}`, this.hasUpdated && this._configureTrigger();
+      super.connectedCallback(), this.slot ||= "navigation-section", this.id ||= `sbb-navigation-section-${V++}`, this.hasUpdated && this._configureTrigger();
     }
     disconnectedCallback() {
       super.disconnectedCallback(), this._triggerElement = null, this._triggerAbortController?.abort(), this._windowEventsController?.abort();
     }
     requestUpdate(t, i, n) {
-      super.requestUpdate(t, i, n), !q && (!t || t === "trigger") && this.hasUpdated && this._configureTrigger();
+      super.requestUpdate(t, i, n), !O && (!t || t === "trigger") && this.hasUpdated && this._configureTrigger();
     }
     firstUpdated(t) {
       super.firstUpdated(t), this._configureTrigger();
     }
     render() {
-      return $`
+      return M`
       <div class="sbb-navigation-section__container">
         <nav
           @animationend=${this._onAnimationEnd}
           class="sbb-navigation-section"
-          aria-labelledby=${this.accessibilityLabel ? O : "title"}
-          aria-label=${this.accessibilityLabel ? this.accessibilityLabel : O}
+          aria-labelledby=${this.accessibilityLabel ? T : "title"}
+          aria-label=${this.accessibilityLabel ? this.accessibilityLabel : T}
         >
           <div class="sbb-navigation-section__wrapper">
             <div class="sbb-navigation-section__content">
@@ -187,7 +187,7 @@ let st = 0, yt = (() => {
                 <sbb-transparent-button
                   id="sbb-navigation-section-back-button"
                   class="sbb-navigation-section__back"
-                  aria-label=${this.accessibilityBackLabel || J[this._language.current]}
+                  aria-label=${this.accessibilityBackLabel || F[this._language.current]}
                   negative
                   size="m"
                   type="button"
@@ -206,19 +206,19 @@ let st = 0, yt = (() => {
       </div>
     `;
     }
-  }, c = new WeakMap(), g = new WeakMap(), d = new WeakMap(), v = new WeakMap(), r = o, (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(y[Symbol.metadata] ?? null) : void 0;
-    w = [f(), m({ attribute: "title-content", reflect: !0, converter: W })], C = [G(), m()], A = [f(), m({ attribute: "accessibility-label" })], z = [f(), m({ attribute: "accessibility-back-label" })], _(o, null, w, { kind: "accessor", name: "titleContent", static: !1, private: !1, access: { has: (i) => "titleContent" in i, get: (i) => i.titleContent, set: (i, n) => {
+  }, b = new WeakMap(), c = new WeakMap(), g = new WeakMap(), d = new WeakMap(), (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(e[Symbol.metadata] ?? null) : void 0;
+    s = [f(), _({ attribute: "title-content", reflect: !0, converter: Z })], y = [H(), _()], E = [f(), _({ attribute: "accessibility-label" })], L = [f(), _({ attribute: "accessibility-back-label" })], m(o, null, s, { kind: "accessor", name: "titleContent", static: !1, private: !1, access: { has: (i) => "titleContent" in i, get: (i) => i.titleContent, set: (i, n) => {
       i.titleContent = n;
-    } }, metadata: t }, k, E), _(o, null, C, { kind: "accessor", name: "trigger", static: !1, private: !1, access: { has: (i) => "trigger" in i, get: (i) => i.trigger, set: (i, n) => {
+    } }, metadata: t }, a, h), m(o, null, y, { kind: "accessor", name: "trigger", static: !1, private: !1, access: { has: (i) => "trigger" in i, get: (i) => i.trigger, set: (i, n) => {
       i.trigger = n;
-    } }, metadata: t }, x, L), _(o, null, A, { kind: "accessor", name: "accessibilityLabel", static: !1, private: !1, access: { has: (i) => "accessibilityLabel" in i, get: (i) => i.accessibilityLabel, set: (i, n) => {
+    } }, metadata: t }, w, k), m(o, null, E, { kind: "accessor", name: "accessibilityLabel", static: !1, private: !1, access: { has: (i) => "accessibilityLabel" in i, get: (i) => i.accessibilityLabel, set: (i, n) => {
       i.accessibilityLabel = n;
-    } }, metadata: t }, S, B), _(o, null, z, { kind: "accessor", name: "accessibilityBackLabel", static: !1, private: !1, access: { has: (i) => "accessibilityBackLabel" in i, get: (i) => i.accessibilityBackLabel, set: (i, n) => {
+    } }, metadata: t }, C, x), m(o, null, L, { kind: "accessor", name: "accessibilityBackLabel", static: !1, private: !1, access: { has: (i) => "accessibilityBackLabel" in i, get: (i) => i.accessibilityBackLabel, set: (i, n) => {
       i.accessibilityBackLabel = n;
-    } }, metadata: t }, N, T), _(null, s = { value: r }, e, { kind: "class", name: r.name, metadata: t }, null, a), r = s.value, t && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), o.styles = [it, et], b(r, a), r;
+    } }, metadata: t }, A, B), t && Object.defineProperty(o, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), o.elementName = "sbb-navigation-section", o.styles = [Y, J], o;
 })();
 export {
-  yt as SbbNavigationSectionElement
+  pt as SbbNavigationSectionElement
 };

package/navigation/navigation-section.js

@@ -1,4 +1,7 @@
-import { SbbNavigationSectionElement as t } from "./navigation-section/navigation-section.component.js";
+import { SbbNavigationSectionElement as e } from "./navigation-section/navigation-section.component.js";
+e.define();
+console.warn(`The entrypoint '@sbb-esta/elements/navigation/navigation-section.js' has been deprecated.
+Use either '@sbb-esta/elements/navigation.js' or '@sbb-esta/elements/navigation.pure.js' instead.`);
 export {
-  t as SbbNavigationSectionElement
+  e as SbbNavigationSectionElement
 };

package/navigation/navigation.js

@@ -1,4 +1,7 @@
-import { SbbNavigationElement as t } from "./navigation/navigation.component.js";
+import { SbbNavigationElement as e } from "./navigation/navigation.component.js";
+e.define();
+console.warn(`The entrypoint '@sbb-esta/elements/navigation/navigation.js' has been deprecated.
+Use either '@sbb-esta/elements/navigation.js' or '@sbb-esta/elements/navigation.pure.js' instead.`);
 export {
-  t as SbbNavigationElement
+  e as SbbNavigationElement
 };

package/navigation.js

@@ -1,16 +1,22 @@
-import { SbbNavigationElement as e } from "./navigation/navigation/navigation.component.js";
-import { SbbNavigationListElement as n } from "./navigation/navigation-list/navigation-list.component.js";
-import { SbbNavigationMarkerElement as r } from "./navigation/navigation-marker/navigation-marker.component.js";
-import { SbbNavigationSectionElement as b } from "./navigation/navigation-section/navigation-section.component.js";
-import { SbbNavigationButtonElement as S } from "./navigation/navigation-button/navigation-button.component.js";
-import { SbbNavigationLinkElement as g } from "./navigation/navigation-link/navigation-link.component.js";
-import { SbbNavigationActionCommonElementMixin as p } from "./navigation/common/navigation-action-common.js";
+import { SbbNavigationActionCommonElementMixin as v } from "./navigation/common/navigation-action-common.js";
+import { SbbNavigationButtonElement as i } from "./navigation/navigation-button/navigation-button.component.js";
+import { SbbNavigationLinkElement as e } from "./navigation/navigation-link/navigation-link.component.js";
+import { SbbNavigationListElement as o } from "./navigation/navigation-list/navigation-list.component.js";
+import { SbbNavigationMarkerElement as t } from "./navigation/navigation-marker/navigation-marker.component.js";
+import { SbbNavigationSectionElement as n } from "./navigation/navigation-section/navigation-section.component.js";
+import { SbbNavigationElement as m } from "./navigation/navigation/navigation.component.js";
+m.define();
+i.define();
+e.define();
+o.define();
+t.define();
+n.define();
 export {
-  p as SbbNavigationActionCommonElementMixin,
-  S as SbbNavigationButtonElement,
-  e as SbbNavigationElement,
-  g as SbbNavigationLinkElement,
-  n as SbbNavigationListElement,
-  r as SbbNavigationMarkerElement,
-  b as SbbNavigationSectionElement
+  v as SbbNavigationActionCommonElementMixin,
+  i as SbbNavigationButtonElement,
+  m as SbbNavigationElement,
+  e as SbbNavigationLinkElement,
+  o as SbbNavigationListElement,
+  t as SbbNavigationMarkerElement,
+  n as SbbNavigationSectionElement
 };

package/navigation.pure.js

@@ -0,0 +1,16 @@
+import { SbbNavigationActionCommonElementMixin as e } from "./navigation/common/navigation-action-common.js";
+import { SbbNavigationButtonElement as n } from "./navigation/navigation-button/navigation-button.component.js";
+import { SbbNavigationLinkElement as r } from "./navigation/navigation-link/navigation-link.component.js";
+import { SbbNavigationListElement as b } from "./navigation/navigation-list/navigation-list.component.js";
+import { SbbNavigationMarkerElement as S } from "./navigation/navigation-marker/navigation-marker.component.js";
+import { SbbNavigationSectionElement as g } from "./navigation/navigation-section/navigation-section.component.js";
+import { SbbNavigationElement as p } from "./navigation/navigation/navigation.component.js";
+export {
+  e as SbbNavigationActionCommonElementMixin,
+  n as SbbNavigationButtonElement,
+  p as SbbNavigationElement,
+  r as SbbNavigationLinkElement,
+  b as SbbNavigationListElement,
+  S as SbbNavigationMarkerElement,
+  g as SbbNavigationSectionElement
+};

package/notification/notification.component.js

@@ -1,37 +1,38 @@
-var S = (o) => {
+var z = (o) => {
   throw TypeError(o);
 };
-var N = (o, n, a) => n.has(o) || S("Cannot " + a);
-var h = (o, n, a) => (N(o, n, "read from private field"), a ? a.call(o) : n.get(o)), p = (o, n, a) => n.has(o) ? S("Cannot add the same private member more than once") : n instanceof WeakSet ? n.add(o) : n.set(o, a), r = (o, n, a, s) => (N(o, n, "write to private field"), s ? s.call(o, a) : n.set(o, a), a);
-import { __esDecorate as m, __runInitializers as b } from "tslib";
-import { ResizeController as T } from "@lit-labs/observers/resize-controller.js";
-import { css as $, LitElement as C, nothing as D, html as O } from "lit";
-import { customElement as R, property as v } from "lit/decorators.js";
-import { SbbLanguageController as A } from "../core/controllers.js";
-import { isLean as H, isZeroAnimationDuration as M } from "../core/dom.js";
-import { i18nCloseNotification as U } from "../core/i18n.js";
-import { SbbReadonlyMixin as L, SbbElementInternalsMixin as Z } from "../core/mixins.js";
-import { boxSizingStyles as B } from "../core/styles.js";
-import { SbbIconNameMixin as j } from "../icon.js";
+var k = (o, n, a) => n.has(o) || z("Cannot " + a);
+var h = (o, n, a) => (k(o, n, "read from private field"), a ? a.call(o) : n.get(o)), p = (o, n, a) => n.has(o) ? z("Cannot add the same private member more than once") : n instanceof WeakSet ? n.add(o) : n.set(o, a), s = (o, n, a, d) => (k(o, n, "write to private field"), d ? d.call(o, a) : n.set(o, a), a);
+import { __esDecorate as m, __runInitializers as l } from "tslib";
+import { ResizeController as I } from "@lit-labs/observers/resize-controller.js";
+import { css as O, nothing as T, html as E } from "lit";
+import { property as v } from "lit/decorators.js";
+import { SbbElement as N } from "../core/base-elements.js";
+import { SbbLanguageController as S } from "../core/controllers.js";
+import { isLean as $, isZeroAnimationDuration as C } from "../core/dom.js";
+import { i18nCloseNotification as R } from "../core/i18n.js";
+import { SbbReadonlyMixin as A } from "../core/mixins.js";
+import { boxSizingStyles as D } from "../core/styles.js";
+import { SbbIconNameMixin as H } from "../icon.js";
 import "../button/secondary-button.js";
 import "../divider.js";
-const q = $`: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-2-negative-inverted);--sbb-notification-background-color: color-mix(in srgb, var(--sbb-notification-type-color) 5%, white);--sbb-notification-background-color: light-dark( color-mix(in srgb, var(--sbb-notification-type-color) 5%, white), color-mix(in srgb, var(--sbb-notification-type-color) 35%, white) );--sbb-notification-icon-color: var(--sbb-notification-type-color);--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-border-radius: var(--sbb-border-radius-4x);--sbb-notification-border-radius-start: calc(var(--sbb-notification-base-border-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-text);--sbb-focus-outline-color: var(--sbb-focus-outline-color-default);display:block}:host(:is(:state(state-opening),[state--state-opening]):not([animation=open],[animation=all])){--sbb-disable-animation-duration: 0s}:host(:is(:state(state-closing),[state--state-closing]):not([animation=close],[animation=all])){--sbb-disable-animation-duration: 0s}:host(:is(:state(resize-disable-animation),[state--resize-disable-animation])){--sbb-disable-animation-duration: 0s}:host(:is(:not([type]),[type=info])){--sbb-notification-type-color: var(--sbb-color-smoke);--sbb-notification-icon-color: var(--sbb-notification-color);--sbb-notification-divider-opacity-light: 20%;--sbb-notification-divider-opacity-dark: 20%}:host([type=note]){--sbb-notification-type-color: var(--sbb-color-sky);--sbb-notification-divider-opacity-light: 20%;--sbb-notification-divider-opacity-dark: 20%}:host([type=success]){--sbb-notification-type-color: var(--sbb-color-success);--sbb-notification-divider-opacity-light: 15%;--sbb-notification-divider-opacity-dark: 30%}:host([type=warn]){--sbb-notification-type-color: var(--sbb-color-warning);--sbb-notification-icon-color: var(--sbb-notification-color);--sbb-notification-divider-opacity-light: 25%;--sbb-notification-divider-opacity-dark: 40%}:host([type=error]){--sbb-notification-type-color: var(--sbb-color-error);--sbb-notification-divider-opacity-light: 10%;--sbb-notification-divider-opacity-dark: 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)}}.sbb-notification__wrapper{position:relative;inset-inline-start:calc(var(--sbb-notification-base-border-radius) - var(--sbb-notification-border-width));width:calc(100% - (var(--sbb-notification-base-border-radius) - var(--sbb-notification-border-width)));border:var(--sbb-notification-border);border-radius:var(--sbb-notification-border-radius-start) var(--sbb-notification-base-border-radius) var(--sbb-notification-base-border-radius) var(--sbb-notification-border-radius-start);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-border-radius) calc(var(--sbb-notification-border-width) * -1) calc(var(--sbb-notification-base-border-radius) * -1);background-color:var(--sbb-notification-type-color);border:var(--sbb-notification-border);border-radius:var(--sbb-notification-base-border-radius)}:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--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(:is(:state(state-opening),[state--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(:is(:state(state-closing),[state--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-text-font-size-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);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-start) calc(var(--sbb-notification-base-border-radius) - var(--sbb-notification-border-width)) calc(var(--sbb-notification-base-border-radius) - var(--sbb-notification-border-width)) var(--sbb-notification-border-radius-start);overflow:hidden;background-color:var(--sbb-notification-background-color)}@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-text-font-size-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size)}.sbb-notification__icon,::slotted(sbb-icon){color:var(--sbb-notification-icon-color);--sbb-icon-svg-width: var(--sbb-notification-icon-size)}@media(min-width:37.5rem){.sbb-notification__icon,::slotted(sbb-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__content{color-scheme:only light;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__text{display:inline;margin:0;padding:0}.sbb-notification__close-wrapper{display:flex;align-items:center;gap:var(--sbb-spacing-responsive-xxs);height:100%}.sbb-notification__divider{--sbb-divider-color: color-mix( in srgb, var(--sbb-notification-type-color) var(--sbb-notification-divider-opacity-light), var(--sbb-notification-background-color) );--sbb-divider-color: light-dark( color-mix( in srgb, var(--sbb-notification-type-color) var(--sbb-notification-divider-opacity-light), var(--sbb-notification-background-color) ), color-mix( in srgb, var(--sbb-notification-type-color) var(--sbb-notification-divider-opacity-dark), var(--sbb-notification-background-color) ) );display:none;position:relative;inset-inline-start:var(--sbb-border-width-1x)}@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}}::slotted(sbb-title){margin:0}`, P = /* @__PURE__ */ new Map([
+const U = O`: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-2-negative-inverted);--sbb-notification-background-color: color-mix(in srgb, var(--sbb-notification-type-color) 5%, white);--sbb-notification-background-color: light-dark( color-mix(in srgb, var(--sbb-notification-type-color) 5%, white), color-mix(in srgb, var(--sbb-notification-type-color) 35%, white) );--sbb-notification-icon-color: var(--sbb-notification-type-color);--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-border-radius: var(--sbb-border-radius-4x);--sbb-notification-border-radius-start: calc(var(--sbb-notification-base-border-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-text);--sbb-focus-outline-color: var(--sbb-focus-outline-color-default);display:block}:host(:is(:state(state-opening),[state--state-opening]):not([animation=open],[animation=all])){--sbb-disable-animation-duration: 0s}:host(:is(:state(state-closing),[state--state-closing]):not([animation=close],[animation=all])){--sbb-disable-animation-duration: 0s}:host(:is(:state(resize-disable-animation),[state--resize-disable-animation])){--sbb-disable-animation-duration: 0s}:host(:is(:not([type]),[type=info])){--sbb-notification-type-color: var(--sbb-color-smoke);--sbb-notification-icon-color: var(--sbb-notification-color);--sbb-notification-divider-opacity-light: 20%;--sbb-notification-divider-opacity-dark: 20%}:host([type=note]){--sbb-notification-type-color: var(--sbb-color-sky);--sbb-notification-divider-opacity-light: 20%;--sbb-notification-divider-opacity-dark: 20%}:host([type=success]){--sbb-notification-type-color: var(--sbb-color-success);--sbb-notification-divider-opacity-light: 15%;--sbb-notification-divider-opacity-dark: 30%}:host([type=warn]){--sbb-notification-type-color: var(--sbb-color-warning);--sbb-notification-icon-color: var(--sbb-notification-color);--sbb-notification-divider-opacity-light: 25%;--sbb-notification-divider-opacity-dark: 40%}:host([type=error]){--sbb-notification-type-color: var(--sbb-color-error);--sbb-notification-divider-opacity-light: 10%;--sbb-notification-divider-opacity-dark: 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)}}.sbb-notification__wrapper{position:relative;inset-inline-start:calc(var(--sbb-notification-base-border-radius) - var(--sbb-notification-border-width));width:calc(100% - (var(--sbb-notification-base-border-radius) - var(--sbb-notification-border-width)));border:var(--sbb-notification-border);border-radius:var(--sbb-notification-border-radius-start) var(--sbb-notification-base-border-radius) var(--sbb-notification-base-border-radius) var(--sbb-notification-border-radius-start);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-border-radius) calc(var(--sbb-notification-border-width) * -1) calc(var(--sbb-notification-base-border-radius) * -1);background-color:var(--sbb-notification-type-color);border:var(--sbb-notification-border);border-radius:var(--sbb-notification-base-border-radius)}:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--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(:is(:state(state-opening),[state--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(:is(:state(state-closing),[state--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-text-font-size-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);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-start) calc(var(--sbb-notification-base-border-radius) - var(--sbb-notification-border-width)) calc(var(--sbb-notification-base-border-radius) - var(--sbb-notification-border-width)) var(--sbb-notification-border-radius-start);overflow:hidden;background-color:var(--sbb-notification-background-color)}@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-text-font-size-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size)}.sbb-notification__icon,::slotted(sbb-icon){color:var(--sbb-notification-icon-color);--sbb-icon-svg-width: var(--sbb-notification-icon-size)}@media(min-width:37.5rem){.sbb-notification__icon,::slotted(sbb-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__content{color-scheme:only light;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__text{display:inline;margin:0;padding:0}.sbb-notification__close-wrapper{display:flex;align-items:center;gap:var(--sbb-spacing-responsive-xxs);height:100%}.sbb-notification__divider{--sbb-divider-color: color-mix( in srgb, var(--sbb-notification-type-color) var(--sbb-notification-divider-opacity-light), var(--sbb-notification-background-color) );--sbb-divider-color: light-dark( color-mix( in srgb, var(--sbb-notification-type-color) var(--sbb-notification-divider-opacity-light), var(--sbb-notification-background-color) ), color-mix( in srgb, var(--sbb-notification-type-color) var(--sbb-notification-divider-opacity-dark), var(--sbb-notification-background-color) ) );display:none;position:relative;inset-inline-start:var(--sbb-border-width-1x)}@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}}::slotted(sbb-title){margin:0}`, M = /* @__PURE__ */ new Map([
   ["info", "circle-information-small"],
   ["note", "circle-information-small"],
   ["success", "circle-tick-small"],
   ["warn", "circle-exclamation-point-small"],
   ["error", "circle-cross-small"]
-]), F = 150;
-let si = (() => {
-  var c, l, d, e;
-  let o = [R("sbb-notification")], n, a = [], s, g = j(L(Z(C))), _, u = [], y = [], x, z = [], w = [], k, E = [], I = [];
-  return e = class extends g {
+]), Z = 150;
+let ti = (() => {
+  var r, b, c, e;
+  let o = H(A(N)), n, a = [], d = [], g, u = [], _ = [], y, x = [], w = [];
+  return e = class extends o {
     constructor() {
       super();
+      p(this, r);
+      p(this, b);
       p(this, c);
-      p(this, l);
-      p(this, d);
-      r(this, c, b(this, u, "info")), r(this, l, (b(this, y), b(this, z, H() ? "s" : "m"))), r(this, d, (b(this, w), b(this, E, "all"))), this._stateInternal = b(this, I), this._resizeObserverTimeout = null, this._language = new A(this), this._notificationResizeObserver = new T(this, {
+      s(this, r, l(this, a, "info")), s(this, b, (l(this, d), l(this, u, $() ? "s" : "m"))), s(this, c, (l(this, _), l(this, x, "all"))), this._stateInternal = l(this, w), this._resizeObserverTimeout = null, this._language = new S(this), this._notificationResizeObserver = new I(this, {
         target: null,
         skipInitial: !0,
         callback: () => this._onNotificationResize()
@@ -39,27 +40,27 @@ let si = (() => {
     }
     /** The type of the notification. */
     get type() {
-      return h(this, c);
+      return h(this, r);
     }
     set type(i) {
-      r(this, c, i);
+      s(this, r, i);
     }
     /**
      * Size variant, either s or m.
      * @default 'm' / 's' (lean)
      */
     get size() {
-      return h(this, l);
+      return h(this, b);
     }
     set size(i) {
-      r(this, l, i);
+      s(this, b, i);
     }
     /** The enabled animations. */
     get animation() {
-      return h(this, d);
+      return h(this, c);
     }
     set animation(i) {
-      r(this, d, i);
+      s(this, c, i);
     }
     /** The state of the component. */
     set _state(i) {
@@ -86,7 +87,7 @@ let si = (() => {
       });
     }
     _isZeroAnimationDuration() {
-      return M(this, "--sbb-notification-animation-duration");
+      return C(this, "--sbb-notification-animation-duration");
     }
     _setNotificationHeight() {
       if (!this._notificationElement?.scrollHeight)
@@ -95,7 +96,7 @@ let si = (() => {
       this.style.setProperty("--sbb-notification-height", i);
     }
     _onNotificationResize() {
-      this._state === "opened" && (this._resizeObserverTimeout && clearTimeout(this._resizeObserverTimeout), this.internals.states.add("resize-disable-animation"), this._resizeObserverTimeout = setTimeout(() => this.internals.states.delete("resize-disable-animation"), F), setTimeout(() => this._setNotificationHeight()));
+      this._state === "opened" && (this._resizeObserverTimeout && clearTimeout(this._resizeObserverTimeout), this.internals.states.add("resize-disable-animation"), this._resizeObserverTimeout = setTimeout(() => this.internals.states.delete("resize-disable-animation"), Z), setTimeout(() => this._setNotificationHeight()));
     }
     _onNotificationAnimationEnd(i) {
       this._state === "opening" && i.animationName === "open" && this._handleOpening(), this._state === "closing" && i.animationName === "close-height" && this._handleClosing();
@@ -115,10 +116,10 @@ let si = (() => {
       i && (customElements.upgrade(i), i.visualLevel = this.size === "m" ? "5" : "6");
     }
     renderIconName() {
-      return super.renderIconName() || P.get(this.type);
+      return super.renderIconName() || M.get(this.type);
     }
     render() {
-      return O`
+      return E`
       <div class="sbb-notification__wrapper" @animationend=${this._onNotificationAnimationEnd}>
         <div class="sbb-notification">
           ${this.renderIconSlot("sbb-notification__icon")}
@@ -129,13 +130,13 @@ let si = (() => {
             </p>
           </span>
 
-          ${this.readOnly ? D : O`<span class="sbb-notification__close-wrapper">
+          ${this.readOnly ? T : E`<span class="sbb-notification__close-wrapper">
                 <sbb-divider class="sbb-notification__divider" orientation="vertical"></sbb-divider>
                 <sbb-secondary-button
                   size=${this.size}
                   icon-name="cross-small"
                   @click=${() => this.close()}
-                  aria-label=${U[this._language.current]}
+                  aria-label=${R[this._language.current]}
                   class="sbb-notification__close"
                 ></sbb-secondary-button>
               </span>`}
@@ -143,22 +144,22 @@ let si = (() => {
       </div>
     `;
     }
-  }, c = new WeakMap(), l = new WeakMap(), d = new WeakMap(), s = e, (() => {
-    const i = typeof Symbol == "function" && Symbol.metadata ? Object.create(g[Symbol.metadata] ?? null) : void 0;
-    _ = [v({ reflect: !0 })], x = [v({ reflect: !0 })], k = [v({ reflect: !0 })], m(e, null, _, { kind: "accessor", name: "type", static: !1, private: !1, access: { has: (t) => "type" in t, get: (t) => t.type, set: (t, f) => {
+  }, r = new WeakMap(), b = new WeakMap(), c = new WeakMap(), (() => {
+    const i = typeof Symbol == "function" && Symbol.metadata ? Object.create(o[Symbol.metadata] ?? null) : void 0;
+    n = [v({ reflect: !0 })], g = [v({ reflect: !0 })], y = [v({ reflect: !0 })], m(e, null, n, { kind: "accessor", name: "type", static: !1, private: !1, access: { has: (t) => "type" in t, get: (t) => t.type, set: (t, f) => {
       t.type = f;
-    } }, metadata: i }, u, y), m(e, null, x, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (t) => "size" in t, get: (t) => t.size, set: (t, f) => {
+    } }, metadata: i }, a, d), m(e, null, g, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (t) => "size" in t, get: (t) => t.size, set: (t, f) => {
       t.size = f;
-    } }, metadata: i }, z, w), m(e, null, k, { kind: "accessor", name: "animation", static: !1, private: !1, access: { has: (t) => "animation" in t, get: (t) => t.animation, set: (t, f) => {
+    } }, metadata: i }, u, _), m(e, null, y, { kind: "accessor", name: "animation", static: !1, private: !1, access: { has: (t) => "animation" in t, get: (t) => t.animation, set: (t, f) => {
       t.animation = f;
-    } }, metadata: i }, E, I), m(null, n = { value: s }, o, { kind: "class", name: s.name, metadata: i }, null, a), s = n.value, i && Object.defineProperty(s, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: i });
-  })(), e.styles = [B, q], e.events = {
+    } }, metadata: i }, x, w), i && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: i });
+  })(), e.elementName = "sbb-notification", e.styles = [D, U], e.events = {
     beforeopen: "beforeopen",
     open: "open",
     beforeclose: "beforeclose",
     close: "close"
-  }, b(s, a), s;
+  }, e;
 })();
 export {
-  si as SbbNotificationElement
+  ti as SbbNotificationElement
 };

package/notification.js

@@ -1,4 +1,5 @@
 import { SbbNotificationElement as e } from "./notification/notification.component.js";
+e.define();
 export {
   e as SbbNotificationElement
 };

package/notification.pure.js

@@ -0,0 +1,4 @@
+import { SbbNotificationElement as e } from "./notification/notification.component.js";
+export {
+  e as SbbNotificationElement
+};