@sbb-esta/lyne-elements 1.16.0 → 2.0.1

package/navigation/navigation.js

@@ -6,27 +6,27 @@ var d = (n, e, o) => (N(n, e, "read from private field"), o ? o.call(n) : e.get(
 import { __esDecorate as g, __runInitializers as c } from "tslib";
 import { MutationController as T } from "@lit-labs/observers/mutation-controller.js";
 import { ResizeController as I } from "@lit-labs/observers/resize-controller.js";
-import { css as H, html as z } from "lit";
-import { customElement as B, property as A, state as D } from "lit/decorators.js";
-import { ref as O } from "lit/directives/ref.js";
+import { css as D, html as A } from "lit";
+import { customElement as H, property as O, state as B } from "lit/decorators.js";
+import { ref as z } from "lit/directives/ref.js";
 import { SbbFocusHandler as F, setModalityOnNextFocus as L } from "../core/a11y.js";
 import { SbbOpenCloseBaseElement as R } from "../core/base-elements.js";
 import { SbbConnectedAbortController as q, SbbLanguageController as M, SbbInertController as P } from "../core/controllers.js";
-import { hostAttributes as $, forceType as U } from "../core/decorators.js";
-import { SbbScrollHandler as X, findReferencedElement as j } from "../core/dom.js";
+import { hostAttributes as U, forceType as $ } from "../core/decorators.js";
+import { SbbScrollHandler as X, isZeroAnimationDuration as Z, findReferencedElement as j } from "../core/dom.js";
 import { i18nCloseNavigation as V } from "../core/i18n.js";
 import { SbbUpdateSchedulerMixin as G } from "../core/mixins.js";
 import { isEventOnElement as m, removeAriaOverlayTriggerAttributes as K, setAriaOverlayTriggerAttributes as W } from "../core/overlay.js";
 import "../button/transparent-button.js";
-const J = H`*,:before,:after{box-sizing:border-box}:host{--sbb-navigation-grid-column: 1 / 5;--sbb-navigation-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-3x) );--sbb-navigation-animation-easing: ease-in;--sbb-navigation-padding-inline: var(--sbb-layout-base-offset-responsive);--sbb-navigation-padding-block-start: var(--sbb-spacing-responsive-l);--sbb-navigation-padding-block-end: var(--sbb-spacing-responsive-xl);--sbb-navigation-backdrop-visibility: hidden;--sbb-navigation-backdrop-pointer-events: none;--sbb-navigation-backdrop-color: transparent;--sbb-navigation-list-margin-block-start: var(--sbb-spacing-responsive-xxl);--sbb-navigation-inline-start: 0;--sbb-navigation-expanded-width: 100%;--sbb-navigation-inset: 0 auto auto 0;--sbb-navigation-transform: translateX(-100%);--sbb-navigation-content-transform: translateX(0);--sbb-navigation-width: 100%;--sbb-navigation-height: 100dvh;--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);display:block;position:fixed;inset:var(--sbb-navigation-inset);z-index:var(--sbb-navigation-z-index, var(--sbb-overlay-default-z-index));overflow:hidden}@media (min-width: 52.5rem){:host{--sbb-navigation-grid-column: 1 / 9}}@media (min-width: 64rem){:host{--sbb-navigation-grid-column: 1 / 5;--sbb-navigation-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-6x) );--sbb-navigation-padding-block-start: var(--sbb-spacing-responsive-xl);--sbb-navigation-padding-inline: var(--sbb-layout-base-offset-responsive) 0;--sbb-navigation-list-margin-block-start: var(--sbb-spacing-fixed-1x);--sbb-navigation-inline-start: calc(var(--sbb-layout-base-offset-responsive) * -1);--sbb-navigation-width: calc(100% + var(--sbb-layout-base-offset-responsive))}}@media (min-width: 90rem){:host{--sbb-navigation-grid-column: 1 / 6;--sbb-navigation-padding-block-start: var(--sbb-spacing-responsive-xxl)}}:host([data-state=opened]){--sbb-navigation-animation-easing: ease-out}:host(:is([data-state=opened],[data-state=opening])){--sbb-navigation-backdrop-visibility: visible;--sbb-navigation-backdrop-pointer-events: all;--sbb-navigation-backdrop-color: var(--sbb-color-black-alpha-70)}:host(:not([data-state=closed])){--sbb-navigation-inset: 0;--sbb-navigation-transform: translateX(0)}:host([data-has-navigation-section]){--sbb-navigation-content-transform: translateX(-100%)}@media (min-width: 64rem){:host([data-has-navigation-section]){--sbb-navigation-expanded-width: 100dvw;--sbb-navigation-content-transform: translateX(0%)}}:host([data-resize-disable-animation]){--sbb-disable-animation-time: .1ms;--sbb-disable-animation-zero-time: 0s}.sbb-navigation__container{display:grid;gap:var(--sbb-grid-base-gutter-responsive);grid-template-columns:repeat(var(--sbb-grid-base-columns),1fr);padding-inline:0;pointer-events:none;transform:var(--sbb-navigation-transform)}@media (min-width: 64rem){.sbb-navigation__container{padding-inline:var(--sbb-layout-base-offset-responsive)}.sbb-navigation__container:before{transition-duration:var(--sbb-navigation-animation-duration);transition-timing-function:var(--sbb-navigation-animation-easing);transition-property:background-color,visibility;content:"";visibility:var(--sbb-navigation-backdrop-visibility);pointer-events:var(--sbb-navigation-backdrop-pointer-events);position:fixed;inset:var(--sbb-navigation-inset);background-color:var(--sbb-navigation-backdrop-color)}}.sbb-navigation{transition-duration:var(--sbb-navigation-animation-duration);transition-timing-function:var(--sbb-navigation-animation-easing);transition-property:width;display:none;width:var(--sbb-navigation-width);grid-column:var(--sbb-navigation-grid-column);padding:0;margin:0;position:relative;inset-inline-start:var(--sbb-navigation-inline-start);inset-block-start:0;border:none;pointer-events:none;height:var(--sbb-navigation-height);color:var(--sbb-color-white);background-color:var(--sbb-color-midnight)}.sbb-navigation:before{transition-duration:var(--sbb-navigation-animation-duration);transition-timing-function:var(--sbb-navigation-animation-easing);transition-property:width;content:"";position:absolute;width:var(--sbb-navigation-expanded-width);height:var(--sbb-navigation-height);background:var(--sbb-color-midnight)}:host([data-state]:not([data-state=closed])) .sbb-navigation{display:block;pointer-events:all;animation-name:open;animation-duration:var(--sbb-navigation-animation-duration);animation-timing-function:var(--sbb-navigation-animation-easing)}:host([data-state][data-state=closing]) .sbb-navigation{pointer-events:none;animation-name:close}@media (forced-colors: active){.sbb-navigation{outline:var(--sbb-border-width-1x) solid CanvasText}}.sbb-navigation__wrapper{outline:none}.sbb-navigation__header{transition-duration:var(--sbb-navigation-animation-duration);transition-timing-function:var(--sbb-navigation-animation-easing);transition-property:width;display:flex;justify-content:flex-end;position:absolute;width:var(--sbb-navigation-expanded-width);pointer-events:none;padding:var(--sbb-spacing-responsive-xs);z-index:calc(var(--sbb-navigation-z-index, var(--sbb-overlay-default-z-index)) + 1)}.sbb-navigation__close{pointer-events:all}.sbb-navigation__content{transition-duration:var(--sbb-navigation-animation-duration);transition-timing-function:var(--sbb-navigation-animation-easing);transition-property:transform;--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: var(--sbb-color-white-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-white-alpha-60);--sbb-scrollbar-track-color: transparent;--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-navigation__content::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-navigation__content::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-navigation__content::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}.sbb-navigation__content::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}.sbb-navigation__content::-webkit-scrollbar-button,.sbb-navigation__content::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-navigation__content{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-navigation__content{display:flex;flex-direction:column;gap:var(--sbb-spacing-responsive-xxl);position:relative;height:var(--sbb-navigation-height);padding-inline:var(--sbb-navigation-padding-inline);padding-block:var(--sbb-navigation-padding-block-start) var(--sbb-navigation-padding-block-end);overflow-y:auto;transform:var(--sbb-navigation-content-transform)}::slotted(:first-child){margin-block-start:var(--sbb-navigation-list-margin-block-start)}@keyframes open{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes close{0%{transform:translate(0)}to{transform:translate(-100%)}}`, Q = {
+const J = D`*,:before,:after{box-sizing:border-box}:host{--sbb-navigation-grid-column: 1 / 5;--sbb-navigation-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-3x) );--sbb-navigation-animation-easing: ease-in;--sbb-navigation-padding-inline: var(--sbb-layout-base-offset-responsive);--sbb-navigation-padding-block-start: var(--sbb-spacing-responsive-l);--sbb-navigation-padding-block-end: var(--sbb-spacing-responsive-xl);--sbb-navigation-backdrop-visibility: hidden;--sbb-navigation-backdrop-pointer-events: none;--sbb-navigation-backdrop-color: transparent;--sbb-navigation-list-margin-block-start: var(--sbb-spacing-responsive-xxl);--sbb-navigation-inline-start: 0;--sbb-navigation-expanded-width: 100%;--sbb-navigation-inset: 0 auto auto 0;--sbb-navigation-transform: translateX(-100%);--sbb-navigation-content-transform: translateX(0);--sbb-navigation-width: 100%;--sbb-navigation-height: 100dvh;--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);display:block;position:fixed;inset:var(--sbb-navigation-inset);z-index:var(--sbb-navigation-z-index, var(--sbb-overlay-default-z-index));overflow:hidden}@media (min-width: 52.5rem){:host{--sbb-navigation-grid-column: 1 / 9}}@media (min-width: 64rem){:host{--sbb-navigation-grid-column: 1 / 5;--sbb-navigation-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-6x) );--sbb-navigation-padding-block-start: var(--sbb-spacing-responsive-xl);--sbb-navigation-padding-inline: var(--sbb-layout-base-offset-responsive) 0;--sbb-navigation-list-margin-block-start: var(--sbb-spacing-fixed-1x);--sbb-navigation-inline-start: calc(var(--sbb-layout-base-offset-responsive) * -1);--sbb-navigation-width: calc(100% + var(--sbb-layout-base-offset-responsive))}}@media (min-width: 90rem){:host{--sbb-navigation-grid-column: 1 / 6;--sbb-navigation-padding-block-start: var(--sbb-spacing-responsive-xxl)}}:host([data-state=opened]){--sbb-navigation-animation-easing: ease-out}:host(:is([data-state=opened],[data-state=opening])){--sbb-navigation-backdrop-visibility: visible;--sbb-navigation-backdrop-pointer-events: all;--sbb-navigation-backdrop-color: var(--sbb-color-black-alpha-70)}:host(:not([data-state=closed])){--sbb-navigation-inset: 0;--sbb-navigation-transform: translateX(0)}:host([data-has-navigation-section]){--sbb-navigation-content-transform: translateX(-100%)}@media (min-width: 64rem){:host([data-has-navigation-section]){--sbb-navigation-expanded-width: 100dvw;--sbb-navigation-content-transform: translateX(0%)}}:host([data-resize-disable-animation]){--sbb-disable-animation-duration: 0s}.sbb-navigation__container{display:grid;gap:var(--sbb-grid-base-gutter-responsive);grid-template-columns:repeat(var(--sbb-grid-base-columns),1fr);padding-inline:0;pointer-events:none;transform:var(--sbb-navigation-transform)}@media (min-width: 64rem){.sbb-navigation__container{padding-inline:var(--sbb-layout-base-offset-responsive)}.sbb-navigation__container:before{transition-duration:var(--sbb-navigation-animation-duration);transition-timing-function:var(--sbb-navigation-animation-easing);transition-property:background-color,visibility;content:"";visibility:var(--sbb-navigation-backdrop-visibility);pointer-events:var(--sbb-navigation-backdrop-pointer-events);position:fixed;inset:var(--sbb-navigation-inset);background-color:var(--sbb-navigation-backdrop-color)}}.sbb-navigation{transition-duration:var(--sbb-navigation-animation-duration);transition-timing-function:var(--sbb-navigation-animation-easing);transition-property:width;display:none;width:var(--sbb-navigation-width);grid-column:var(--sbb-navigation-grid-column);padding:0;margin:0;position:relative;inset-inline-start:var(--sbb-navigation-inline-start);inset-block-start:0;border:none;pointer-events:none;height:var(--sbb-navigation-height);color:var(--sbb-color-white);background-color:var(--sbb-color-midnight)}.sbb-navigation:before{transition-duration:var(--sbb-navigation-animation-duration);transition-timing-function:var(--sbb-navigation-animation-easing);transition-property:width;content:"";position:absolute;width:var(--sbb-navigation-expanded-width);height:var(--sbb-navigation-height);background:var(--sbb-color-midnight)}:host([data-state]:not([data-state=closed])) .sbb-navigation{display:block;pointer-events:all;animation-name:open;animation-duration:var(--sbb-navigation-animation-duration);animation-timing-function:var(--sbb-navigation-animation-easing)}:host([data-state][data-state=closing]) .sbb-navigation{pointer-events:none;animation-name:close}@media (forced-colors: active){.sbb-navigation{outline:var(--sbb-border-width-1x) solid CanvasText}}.sbb-navigation__wrapper{outline:none}.sbb-navigation__header{transition-duration:var(--sbb-navigation-animation-duration);transition-timing-function:var(--sbb-navigation-animation-easing);transition-property:width;display:flex;justify-content:flex-end;position:absolute;width:var(--sbb-navigation-expanded-width);pointer-events:none;padding:var(--sbb-spacing-responsive-xs);z-index:calc(var(--sbb-navigation-z-index, var(--sbb-overlay-default-z-index)) + 1)}.sbb-navigation__close{pointer-events:all}.sbb-navigation__content{transition-duration:var(--sbb-navigation-animation-duration);transition-timing-function:var(--sbb-navigation-animation-easing);transition-property:transform;--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: var(--sbb-color-white-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-white-alpha-60);--sbb-scrollbar-track-color: transparent;--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-navigation__content::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-navigation__content::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-navigation__content::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}.sbb-navigation__content::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}.sbb-navigation__content::-webkit-scrollbar-button,.sbb-navigation__content::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-navigation__content{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-navigation__content{display:flex;flex-direction:column;gap:var(--sbb-spacing-responsive-xxl);position:relative;height:var(--sbb-navigation-height);padding-inline:var(--sbb-navigation-padding-inline);padding-block:var(--sbb-navigation-padding-block-start) var(--sbb-navigation-padding-block-end);overflow-y:auto;transform:var(--sbb-navigation-content-transform)}::slotted(:first-child){margin-block-start:var(--sbb-navigation-list-margin-block-start)}@keyframes open{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes close{0%{transform:translate(0)}to{transform:translate(-100%)}}`, Q = {
   subtree: !0,
   attributeFilter: ["data-state"]
 };
 let Y = 0;
-const Z = 150;
-let pt = (() => {
+const tt = 150;
+let _t = (() => {
   var b, l, r;
-  let n = [B("sbb-navigation"), $({
+  let n = [H("sbb-navigation"), U({
     role: "navigation"
   })], e, o = [], s, u = G(R), p = [], _, f, w = [], k = [], y, C = [], E = [];
   return r = class extends u {
@@ -85,7 +85,7 @@ let pt = (() => {
      */
     open() {
       var t;
-      this.state !== "closed" || !this._navigation || this.willOpen.emit() && (this.state = "opening", this._checkActiveActions(), this._checkActiveSection(), this.startUpdate(), this._scrollHandler.disableScroll(), (t = this._triggerElement) == null || t.setAttribute("aria-expanded", "true"));
+      this.state !== "closed" || !this._navigation || this.willOpen.emit() && (this.state = "opening", this._checkActiveActions(), this._checkActiveSection(), this.startUpdate(), this._scrollHandler.disableScroll(), (t = this._triggerElement) == null || t.setAttribute("aria-expanded", "true"), this._isZeroAnimationDuration() && this._handleOpening());
     }
     _checkActiveSection() {
       var i;
@@ -104,7 +104,17 @@ let pt = (() => {
      */
     close() {
       var t;
-      this.state === "opened" && this.willClose.emit() && (this.state = "closing", this.startUpdate(), (t = this._triggerElement) == null || t.setAttribute("aria-expanded", "false"));
+      this.state === "opened" && this.willClose.emit() && (this.state = "closing", this.startUpdate(), (t = this._triggerElement) == null || t.setAttribute("aria-expanded", "false"), this._isZeroAnimationDuration() && this._handleClosing());
+    }
+    _isZeroAnimationDuration() {
+      return Z(this, "--sbb-navigation-animation-duration");
+    }
+    _handleClosing() {
+      var t, i;
+      this.state = "closed", this._navigationContentElement.scrollTo(0, 0), L(this._triggerElement), this._inertController.deactivate(), (t = this._triggerElement) == null || t.focus(), this.didClose.emit(), this._navigationResizeObserver.unobserve(this), this._resetMarkers(), (i = this._windowEventsController) == null || i.abort(), this._focusHandler.disconnect(), this._scrollHandler.enableScroll(), this.completeUpdate();
+    }
+    _handleOpening() {
+      this.state = "opened", this.didOpen.emit(), this._navigationResizeObserver.observe(this), this._inertController.activate(), this._focusHandler.trap(this, { filter: this._trapFocusFilter }), this._attachWindowEvents(), this._setNavigationFocus(), this.completeUpdate();
     }
     // Removes trigger click listener on trigger change.
     _removeTriggerClickListener(t, i) {
@@ -121,8 +131,7 @@ let pt = (() => {
     // In rare cases it can be that the animationEnd event is triggered twice.
     // To avoid entering a corrupt state, exit when state is not expected.
     _onAnimationEnd(t) {
-      var i, a;
-      t.animationName === "open" && this.state === "opening" ? (this.state = "opened", this.didOpen.emit(), this._navigationResizeObserver.observe(this), this._inertController.activate(), this._focusHandler.trap(this, { filter: this._trapFocusFilter }), this._attachWindowEvents(), this._setNavigationFocus()) : t.animationName === "close" && this.state === "closing" && (this.state = "closed", this._navigationContentElement.scrollTo(0, 0), L(this._triggerElement), this._inertController.deactivate(), (i = this._triggerElement) == null || i.focus(), this.didClose.emit(), this._navigationResizeObserver.unobserve(this), this._resetMarkers(), (a = this._windowEventsController) == null || a.abort(), this._focusHandler.disconnect(), this._scrollHandler.enableScroll()), this.completeUpdate();
+      t.animationName === "open" && this.state === "opening" ? this._handleOpening() : t.animationName === "close" && this.state === "closing" && this._handleClosing();
     }
     _resetMarkers() {
       const t = Array.from(this.querySelectorAll(":is(sbb-navigation-button, sbb-navigation-link)[data-action-active]:not(.sbb-active)"));
@@ -157,7 +166,7 @@ let pt = (() => {
         i.target.nodeName === "SBB-NAVIGATION-SECTION" && (this._activeNavigationSection = this.querySelector('sbb-navigation-section[data-state="opening"], sbb-navigation-section[data-state="opened"]'), this.toggleAttribute("data-has-navigation-section", !!this._activeNavigationSection));
     }
     _onNavigationResize() {
-      this.state === "opened" && (this._resizeObserverTimeout && clearTimeout(this._resizeObserverTimeout), this.toggleAttribute("data-resize-disable-animation", !0), this._resizeObserverTimeout = setTimeout(() => this.removeAttribute("data-resize-disable-animation"), Z));
+      this.state === "opened" && (this._resizeObserverTimeout && clearTimeout(this._resizeObserverTimeout), this.toggleAttribute("data-resize-disable-animation", !0), this._resizeObserverTimeout = setTimeout(() => this.removeAttribute("data-resize-disable-animation"), tt));
     }
     connectedCallback() {
       super.connectedCallback(), this.id || (this.id = `sbb-navigation-${Y++}`);
@@ -169,7 +178,7 @@ let pt = (() => {
       super.disconnectedCallback(), (t = this._navigationController) == null || t.abort(), (i = this._windowEventsController) == null || i.abort(), this._focusHandler.disconnect(), this._scrollHandler.enableScroll();
     }
     render() {
-      const t = z`
+      const t = A`
       <sbb-transparent-button
         id="sbb-navigation-close-button"
         class="sbb-navigation__close"
@@ -182,19 +191,19 @@ let pt = (() => {
         sbb-navigation-close
       ></sbb-transparent-button>
     `;
-      return z`
+      return A`
       <div class="sbb-navigation__container">
         <div
           id="sbb-navigation-overlay"
-          @animationend=${(i) => this._onAnimationEnd(i)}
+          @animationend=${this._onAnimationEnd}
           class="sbb-navigation"
-          ${O((i) => this._navigation = i)}
+          ${z((i) => this._navigation = i)}
         >
           <div class="sbb-navigation__header">${t}</div>
           <div class="sbb-navigation__wrapper">
             <div
               class="sbb-navigation__content"
-              ${O((i) => this._navigationContentElement = i)}
+              ${z((i) => this._navigationContentElement = i)}
             >
               <slot></slot>
             </div>
@@ -206,7 +215,7 @@ let pt = (() => {
     }
   }, b = new WeakMap(), l = new WeakMap(), s = r, (() => {
     const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(u[Symbol.metadata] ?? null) : void 0;
-    _ = [A()], f = [U(), A({ attribute: "accessibility-close-label" })], y = [D()], g(r, null, _, { kind: "setter", name: "trigger", static: !1, private: !1, access: { has: (i) => "trigger" in i, set: (i, a) => {
+    _ = [O()], f = [$(), O({ attribute: "accessibility-close-label" })], y = [B()], g(r, null, _, { kind: "setter", name: "trigger", static: !1, private: !1, access: { has: (i) => "trigger" in i, set: (i, a) => {
       i.trigger = a;
     } }, metadata: t }, null, p), g(r, null, f, { kind: "accessor", name: "accessibilityCloseLabel", static: !1, private: !1, access: { has: (i) => "accessibilityCloseLabel" in i, get: (i) => i.accessibilityCloseLabel, set: (i, a) => {
       i.accessibilityCloseLabel = a;
@@ -216,5 +225,5 @@ let pt = (() => {
   })(), r.styles = J, c(s, o), s;
 })();
 export {
-  pt as SbbNavigationElement
+  _t as SbbNavigationElement
 };

package/notification/notification.d.ts

@@ -1,4 +1,4 @@
-import { CSSResultGroup, PropertyValues, TemplateResult, LitElement } from 'lit';
+import { CSSResultGroup, LitElement, PropertyValues, TemplateResult } from 'lit';
 import { SbbTitleLevel } from '../title.js';
 /**
  * It displays messages which require a user's attention without interrupting its tasks.
@@ -31,7 +31,10 @@ export declare class SbbNotificationElement extends LitElement {
      * In readonly mode, there is no dismiss button offered to the user.
      */
     accessor readonly: boolean;
-    /** Size variant, either s or m. */
+    /**
+     * Size variant, either s or m.
+     * @default 'm' / 's' (lean)
+     */
     accessor size: 'm' | 's';
     /** The enabled animations. */
     accessor animation: 'open' | 'close' | 'all' | 'none';
@@ -54,6 +57,7 @@ export declare class SbbNotificationElement extends LitElement {
     close(): void;
     connectedCallback(): void;
     protected firstUpdated(changedProperties: PropertyValues<this>): Promise<void>;
+    private _isZeroAnimationDuration;
     private _setNotificationHeight;
     private _onNotificationResize;
     private _onNotificationAnimationEnd;

package/notification/notification.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"notification.d.ts","sourceRoot":"","sources":["../../../src/elements/notification/notification.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAQ,UAAU,EAAW,MAAM,KAAK,CAAC;AAQhD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAIjD,OAAO,+BAA+B,CAAC;AACvC,OAAO,eAAe,CAAC;AACvB,OAAO,YAAY,CAAC;AACpB,OAAO,aAAa,CAAC;AAWrB;;;;;;;;;;;GAWG;AACH,qBAGM,sBAAuB,SAAQ,UAAU;IAE7C,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;;;;MAKlB;IAEX,oCAAoC;IACpC,SAA6C,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,CAAU;IAElG,wBAAwB;IACxB,SAEgB,YAAY,EAAE,MAAM,CAAM;IAE1C,yFAAyF;IACzF,SAAwD,UAAU,EAAE,aAAa,CAAO;IAExF;;;OAGG;IACH,SAEgB,QAAQ,EAAE,OAAO,CAAS;IAE1C,mCAAmC;IACnC,SAA6C,IAAI,EAAE,GAAG,GAAG,GAAG,CAAO;IAEnE,8BAA8B;IAC9B,SAA6C,SAAS,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,MAAM,CAAS;IAElG,qCAAqC;IACrC,OAAO,KAAK,MAAM,QAEjB;IACD,OAAO,KAAK,MAAM,GAEjB;IAED,OAAO,CAAC,oBAAoB,CAAe;IAC3C,OAAO,CAAC,sBAAsB,CAA8C;IAC5E,OAAO,CAAC,SAAS,CAAmC;IACpD,OAAO,CAAC,2BAA2B,CAIhC;IAEH,2EAA2E;IAC3E,OAAO,CAAC,SAAS,CAGf;IAEF,uDAAuD;IACvD,OAAO,CAAC,QAAQ,CAGd;IAEF,2EAA2E;IAC3E,OAAO,CAAC,UAAU,CAGhB;IAEF,uDAAuD;IACvD,OAAO,CAAC,SAAS,CAGf;IAEF,OAAO,CAAC,KAAK;IAON,KAAK,IAAI,IAAI;IAOJ,iBAAiB,IAAI,IAAI;cAMhB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC;IAa7F,OAAO,CAAC,sBAAsB;IAQ9B,OAAO,CAAC,qBAAqB;IAoB7B,OAAO,CAAC,2BAA2B;IAUnC,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,cAAc;cAOH,MAAM,IAAI,cAAc;CAuC5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,kBAAkB,EAAE,sBAAsB,CAAC;KAC5C;CACF"}
+{"version":3,"file":"notification.d.ts","sourceRoot":"","sources":["../../../src/elements/notification/notification.ts"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EAEV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AASb,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAIjD,OAAO,+BAA+B,CAAC;AACvC,OAAO,eAAe,CAAC;AACvB,OAAO,YAAY,CAAC;AACpB,OAAO,aAAa,CAAC;AAWrB;;;;;;;;;;;GAWG;AACH,qBAGM,sBAAuB,SAAQ,UAAU;IAE7C,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;;;;MAKlB;IAEX,oCAAoC;IACpC,SAA6C,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,CAAU;IAElG,wBAAwB;IACxB,SAEgB,YAAY,EAAE,MAAM,CAAM;IAE1C,yFAAyF;IACzF,SAAwD,UAAU,EAAE,aAAa,CAAO;IAExF;;;OAGG;IACH,SAEgB,QAAQ,EAAE,OAAO,CAAS;IAE1C;;;OAGG;IACH,SAA6C,IAAI,EAAE,GAAG,GAAG,GAAG,CAAwB;IAEpF,8BAA8B;IAC9B,SAA6C,SAAS,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,MAAM,CAAS;IAElG,qCAAqC;IACrC,OAAO,KAAK,MAAM,QAEjB;IACD,OAAO,KAAK,MAAM,GAEjB;IAED,OAAO,CAAC,oBAAoB,CAAe;IAC3C,OAAO,CAAC,sBAAsB,CAA8C;IAC5E,OAAO,CAAC,SAAS,CAAmC;IACpD,OAAO,CAAC,2BAA2B,CAIhC;IAEH,2EAA2E;IAC3E,OAAO,CAAC,SAAS,CAIf;IAEF,uDAAuD;IACvD,OAAO,CAAC,QAAQ,CAId;IAEF,2EAA2E;IAC3E,OAAO,CAAC,UAAU,CAIhB;IAEF,uDAAuD;IACvD,OAAO,CAAC,SAAS,CAIf;IAEF,OAAO,CAAC,KAAK;IAaN,KAAK,IAAI,IAAI;IAYJ,iBAAiB,IAAI,IAAI;cAMhB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC;IAa7F,OAAO,CAAC,wBAAwB;IAIhC,OAAO,CAAC,sBAAsB;IAQ9B,OAAO,CAAC,qBAAqB;IAoB7B,OAAO,CAAC,2BAA2B;IAUnC,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,cAAc;cAOH,MAAM,IAAI,cAAc;CAoC5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,kBAAkB,EAAE,sBAAsB,CAAC;KAC5C;CACF"}

package/notification.js

@@ -1,88 +1,92 @@
-var M = (e) => {
+var B = (e) => {
   throw TypeError(e);
 };
-var P = (e, a, s) => a.has(e) || M("Cannot " + s);
-var c = (e, a, s) => (P(e, a, "read from private field"), s ? s.call(e) : a.get(e)), d = (e, a, s) => a.has(e) ? M("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(e) : a.set(e, s), n = (e, a, s, l) => (P(e, a, "write to private field"), l ? l.call(e, s) : a.set(e, s), s);
+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 { ResizeController as G } from "@lit-labs/observers/resize-controller.js";
-import { css as J, html as q, nothing as K, LitElement as Q } from "lit";
-import { customElement as V, property as y } from "lit/decorators.js";
-import { SbbLanguageController as W } from "./core/controllers.js";
-import { slotState as X, forceType as F, omitEmptyConverter as Y } from "./core/decorators.js";
+import { ResizeController as F } from "@lit-labs/observers/resize-controller.js";
+import { css as G, html as P, nothing as J, LitElement as K } from "lit";
+import { customElement as Q, property as y } from "lit/decorators.js";
+import { SbbLanguageController as V } from "./core/controllers.js";
+import { slotState as W, forceType as q, omitEmptyConverter as X } from "./core/decorators.js";
+import { isLean as Y, isZeroAnimationDuration as ii } from "./core/dom.js";
 import { EventEmitter as x } from "./core/eventing.js";
-import { i18nCloseNotification as Z } from "./core/i18n.js";
+import { i18nCloseNotification as ti } from "./core/i18n.js";
 import "./button/secondary-button.js";
 import "./divider.js";
 import "./icon.js";
 import "./title.js";
-const ii = J`*,:before,:after{box-sizing:border-box}:host{--sbb-notification-margin: 0;--sbb-notification-padding-block: var(--sbb-spacing-responsive-xxs);--sbb-notification-padding-inline: var(--sbb-spacing-responsive-xs);--sbb-notification-color: var(--sbb-color-charcoal);--sbb-notification-icon-color: var(--sbb-notification-type-color);--sbb-notification-icon-margin-block-start: 0;--sbb-notification-border-width: var(--sbb-border-width-1x);--sbb-notification-border: var(--sbb-notification-border-width) solid var(--sbb-notification-type-color);--sbb-notification-base-radius: var(--sbb-border-radius-4x);--sbb-notification-border-radius: calc(var(--sbb-notification-base-radius) / 2) var(--sbb-notification-base-radius) var(--sbb-notification-base-radius) calc(var(--sbb-notification-base-radius) / 2);--sbb-notification-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x) );--sbb-notification-timing-function: ease-in;--sbb-notification-content-padding-inline: var(--sbb-spacing-responsive-xxxs) var(--sbb-spacing-responsive-xs);--sbb-focus-outline-color: var(--sbb-focus-outline-color-default);display:block}:host([data-state=opening]:not([animation=open],[animation=all])){--sbb-disable-animation-time: .1ms;--sbb-disable-animation-zero-time: 0s}:host([data-state=closing]:not([animation=close],[animation=all])){--sbb-disable-animation-time: .1ms;--sbb-disable-animation-zero-time: 0s}:host([data-resize-disable-animation]){--sbb-disable-animation-time: .1ms;--sbb-disable-animation-zero-time: 0s}:host([type=info]){--sbb-notification-type-color: var(--sbb-color-smoke);--sbb-notification-type-color-sass: 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-zero-time, var(--sbb-animation-duration-2x))}.sbb-notification{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;padding-block:var(--sbb-notification-padding-block);padding-inline:var(--sbb-notification-padding-inline);color:var(--sbb-notification-color);border-radius:var(--sbb-notification-border-radius);overflow:hidden;background-color:var(--sbb-notification-type-color-sass)}@supports (background-color: color-mix(in srgb,transparent 5%,white)){.sbb-notification{background-color:color-mix(in srgb,var(--sbb-notification-type-color) 5%,white)}}@media (min-width: 37.5rem){.sbb-notification{grid-template-columns:auto 1fr auto;align-items:flex-start}}:host([size=s]) .sbb-notification{--sbb-text-font-size: var(--sbb-font-size-text-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size)}.sbb-notification__icon{color:var(--sbb-notification-icon-color);margin-block-start:var(--sbb-notification-icon-margin-block-start);--sbb-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}}`, ti = /* @__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-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([
   ["info", "circle-information-small"],
   ["success", "circle-tick-small"],
   ["warn", "circle-exclamation-point-small"],
   ["error", "circle-cross-small"]
-]), ei = 150;
-let gi = (() => {
-  var h, p, v, g, _, u, o;
-  let e = [V("sbb-notification"), X()], a, s = [], l, z = Q, w, k = [], C = [], O, E = [], L = [], N, T = [], I = [], S, $ = [], R = [], A, H = [], D = [], U, j = [], B = [];
-  var m = (o = class extends z {
+]), oi = 150;
+let yi = (() => {
+  var m, p, v, _, g, u, o;
+  let e = [Q("sbb-notification"), W()], a, n = [], l, w = K, z, k = [], C = [], O, E = [], L = [], N, T = [], A = [], I, S = [], $ = [], D, R = [], H = [], Z, U = [], j = [];
+  var h = (o = class extends w {
     constructor() {
       super(...arguments);
-      d(this, h);
+      d(this, m);
       d(this, p);
       d(this, v);
-      d(this, g);
       d(this, _);
+      d(this, g);
       d(this, u);
-      n(this, h, r(this, k, "info")), n(this, p, (r(this, C), r(this, E, ""))), n(this, v, (r(this, L), r(this, T, "3"))), n(this, g, (r(this, I), r(this, $, !1))), n(this, _, (r(this, R), r(this, H, "m"))), n(this, u, (r(this, D), r(this, j, "all"))), this._notificationElement = r(this, B), this._resizeObserverTimeout = null, this._language = new W(this), this._notificationResizeObserver = new G(this, {
+      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, {
         target: null,
         skipInitial: !0,
         callback: () => this._onNotificationResize()
-      }), this._willOpen = new x(this, m.events.willOpen), this._didOpen = new x(this, m.events.didOpen), this._willClose = new x(this, m.events.willClose), this._didClose = new x(this, m.events.didClose);
+      }), 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 });
     }
     /** The type of the notification. */
     get type() {
-      return c(this, h);
+      return c(this, m);
     }
     set type(t) {
-      n(this, h, t);
+      s(this, m, t);
     }
     /** Content of title. */
     get titleContent() {
       return c(this, p);
     }
     set titleContent(t) {
-      n(this, p, t);
+      s(this, p, t);
     }
     /** Level of title, it will be rendered as heading tag (e.g. h3). Defaults to level 3. */
     get titleLevel() {
       return c(this, v);
     }
     set titleLevel(t) {
-      n(this, v, t);
+      s(this, v, t);
     }
     /**
      * Whether the notification is readonly.
      * In readonly mode, there is no dismiss button offered to the user.
      */
     get readonly() {
-      return c(this, g);
+      return c(this, _);
     }
     set readonly(t) {
-      n(this, g, t);
+      s(this, _, t);
     }
-    /** Size variant, either s or m. */
+    /**
+     * Size variant, either s or m.
+     * @default 'm' / 's' (lean)
+     */
     get size() {
-      return c(this, _);
+      return c(this, g);
     }
     set size(t) {
-      n(this, _, t);
+      s(this, g, t);
     }
     /** The enabled animations. */
     get animation() {
       return c(this, u);
     }
     set animation(t) {
-      n(this, u, t);
+      s(this, u, t);
     }
     /** The state of the notification. */
     set _state(t) {
@@ -92,10 +96,10 @@ let gi = (() => {
       return this.getAttribute("data-state");
     }
     _open() {
-      this._state === "closed" && (this._state = "opening", this._willOpen.emit());
+      this._state === "closed" && (this._state = "opening", this._willOpen.emit(), this._isZeroAnimationDuration() && this._handleOpening());
     }
     close() {
-      this._state === "opened" && (this._state = "closing", this._willClose.emit());
+      this._state === "opened" && this._willClose.emit() && (this._state = "closing", this._isZeroAnimationDuration() && this._handleClosing());
     }
     connectedCallback() {
       this._state || (this._state = "closed"), super.connectedCallback();
@@ -104,6 +108,9 @@ let gi = (() => {
       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();
     }
+    _isZeroAnimationDuration() {
+      return ii(this, "--sbb-notification-animation-duration");
+    }
     _setNotificationHeight() {
       var i;
       if (!((i = this._notificationElement) != null && i.scrollHeight))
@@ -112,7 +119,7 @@ let gi = (() => {
       this.style.setProperty("--sbb-notification-height", t);
     }
     _onNotificationResize() {
-      this._state === "opened" && (this._resizeObserverTimeout && clearTimeout(this._resizeObserverTimeout), this.toggleAttribute("data-resize-disable-animation", !0), this._resizeObserverTimeout = setTimeout(() => this.removeAttribute("data-resize-disable-animation"), ei), setTimeout(() => this._setNotificationHeight()));
+      this._state === "opened" && (this._resizeObserverTimeout && clearTimeout(this._resizeObserverTimeout), this.toggleAttribute("data-resize-disable-animation", !0), this._resizeObserverTimeout = setTimeout(() => this.removeAttribute("data-resize-disable-animation"), oi), setTimeout(() => this._setNotificationHeight()));
     }
     _onNotificationAnimationEnd(t) {
       this._state === "opening" && t.animationName === "open" && this._handleOpening(), this._state === "closing" && t.animationName === "close-height" && this._handleClosing();
@@ -124,15 +131,12 @@ let gi = (() => {
       this._state = "closed", this._didClose.emit(), this._notificationResizeObserver.unobserve(this._notificationElement), setTimeout(() => this.remove());
     }
     render() {
-      return q`
-      <div
-        class="sbb-notification__wrapper"
-        @animationend=${(t) => this._onNotificationAnimationEnd(t)}
-      >
+      return P`
+      <div class="sbb-notification__wrapper" @animationend=${this._onNotificationAnimationEnd}>
         <div class="sbb-notification">
           <sbb-icon
             class="sbb-notification__icon"
-            name=${ti.get(this.type)}
+            name=${ai.get(this.type)}
           ></sbb-icon>
 
           <span class="sbb-notification__content">
@@ -146,13 +150,13 @@ let gi = (() => {
             <slot></slot>
           </span>
 
-          ${this.readonly ? K : q`<span class="sbb-notification__close-wrapper">
+          ${this.readonly ? J : P`<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=${Z[this._language.current]}
+                  aria-label=${ti[this._language.current]}
                   class="sbb-notification__close"
                 ></sbb-secondary-button>
               </span>`}
@@ -160,29 +164,29 @@ let gi = (() => {
       </div>
     `;
     }
-  }, h = new WeakMap(), p = new WeakMap(), v = new WeakMap(), g = new WeakMap(), _ = new WeakMap(), u = new WeakMap(), l = o, (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(z[Symbol.metadata] ?? null) : void 0;
-    w = [y({ reflect: !0 })], O = [F(), y({ attribute: "title-content", reflect: !0, converter: Y })], N = [y({ attribute: "title-level" })], S = [F(), y({ reflect: !0, type: Boolean })], A = [y({ reflect: !0 })], U = [y({ reflect: !0 })], f(o, null, w, { kind: "accessor", name: "type", static: !1, private: !1, access: { has: (i) => "type" in i, get: (i) => i.type, set: (i, b) => {
+  }, 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) => {
       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) => {
       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) => {
       i.titleLevel = b;
-    } }, metadata: t }, T, I), f(o, null, S, { 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), 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) => {
       i.readonly = b;
-    } }, metadata: t }, $, R), f(o, null, A, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (i) => "size" in i, get: (i) => i.size, set: (i, 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) => {
       i.size = b;
-    } }, metadata: t }, H, D), f(o, null, U, { 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), 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) => {
       i.animation = b;
-    } }, metadata: t }, j, B), f(null, a = { value: l }, e, { kind: "class", name: l.name, metadata: t }, null, s), m = l = a.value, t && Object.defineProperty(l, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), o.styles = ii, o.events = {
+    } }, 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 });
+  })(), o.styles = ei, o.events = {
     willOpen: "willOpen",
     didOpen: "didOpen",
     willClose: "willClose",
     didClose: "didClose"
-  }, r(l, s), o);
-  return m = l;
+  }, r(l, n), o);
+  return h = l;
 })();
 export {
-  gi as SbbNotificationElement
+  yi as SbbNotificationElement
 };

package/option/option/option-base-element.d.ts

@@ -11,13 +11,6 @@ export declare abstract class SbbOptionBaseElement extends SbbOptionBaseElement_
      */
     set value(value: string);
     get value(): string;
-    /**
-     * Whether the option is currently active.
-     * TODO: remove with next major version.
-     * @deprecated
-     * @internal
-     */
-    accessor active: boolean;
     /** Whether the option is selected. */
     set selected(value: boolean);
     get selected(): boolean;

package/option/option/option-base-element.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"option-base-element.d.ts","sourceRoot":"","sources":["../../../../src/elements/option/option/option-base-element.ts"],"names":[],"mappings":"AACA,OAAO,EAAQ,UAAU,EAAE,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAM1F,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAI3D,OAAO,6BAA6B,CAAC;;AAgBrC,8BAEe,oBAAqB,SAAQ,yBAE3C;IACC,SAAS,CAAC,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAEpC;;;;;OAKG;IACH,IACW,KAAK,CAAC,KAAK,EAAE,MAAM,EAE7B;IACD,IAAW,KAAK,IAAI,MAAM,CAEzB;IAED;;;;;OAKG;IACH,SAEgB,MAAM,EAAE,OAAO,CAAS;IAExC,sCAAsC;IACtC,IACW,QAAQ,CAAC,KAAK,EAAE,OAAO,EAGjC;IACD,IAAW,QAAQ,IAAI,OAAO,CAE7B;IAED,sDAAsD;IACtD,SAAS,CAAC,QAAQ,CAAC,eAAe,EAAE,YAAY,CAAC;IAEjD,iDAAiD;IACjD,SAAS,CAAC,QAAQ,CAAC,cAAc,EAAE,YAAY,CAAC;IAEhD,4CAA4C;IACnC,SAAS,CAAC,QAAQ,CAAC,QAAQ,UAAS;IAE7C,yFAAyF;IAChF,SAAS,CAAC,QAAQ,CAAC,iBAAiB,UAAS;IAE7C,SAAS,CAAC,QAAQ,CAAC,KAAK,EAAG,MAAM,CAAC;IAE3C,0CAA0C;IACjC,SAAS,CAAC,QAAQ,CAAC,qBAAqB,EAAE,OAAO,CAAS;IAEnE,4CAA4C;IACnC,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAuB;IAExD,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAS;IAEnD,OAAO,CAAC,MAAM,CAAyC;;IAmBvC,wBAAwB,CACtC,IAAI,EAAE,MAAM,EACZ,GAAG,EAAE,MAAM,GAAG,IAAI,EAClB,KAAK,EAAE,MAAM,GAAG,IAAI,GACnB,IAAI;IAMP;;;;OAIG;IACI,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAIrC;;OAEG;IACI,6BAA6B,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IAQ7C,iBAAiB,IAAI,IAAI;cAUtB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cASzD,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAO9E,SAAS,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IACzD,SAAS,CAAC,QAAQ,CAAC,sBAAsB,IAAI,IAAI;IAEjD,SAAS,CAAC,sBAAsB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IAKzD;;;OAGG;IACI,SAAS,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAItC,SAAS,CAAC,IAAI,IAAI,IAAI;IAStB,SAAS,CAAC,kBAAkB,IAAI,IAAI;IAQpC,OAAO,CAAC,mBAAmB;IAI3B,yEAAyE;IACzE,SAAS,CAAC,wBAAwB,CAAC,aAAa,EAAE,cAAc,EAAE,GAAG,IAAI;IAWzE,SAAS,CAAC,oBAAoB,IAAI,IAAI;IAuBtC,SAAS,CAAC,mBAAmB,IAAI,cAAc;IAwB/C,SAAS,CAAC,UAAU,IAAI,cAAc;IAItC,SAAS,CAAC,WAAW,IAAI,cAAc,GAAG,OAAO,OAAO;IAIxD,SAAS,CAAC,UAAU,IAAI,cAAc,GAAG,OAAO,OAAO;cAIpC,MAAM,IAAI,cAAc;CAmB5C"}
+{"version":3,"file":"option-base-element.d.ts","sourceRoot":"","sources":["../../../../src/elements/option/option/option-base-element.ts"],"names":[],"mappings":"AACA,OAAO,EAAQ,UAAU,EAAE,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAM1F,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAI3D,OAAO,6BAA6B,CAAC;;AAgBrC,8BAEe,oBAAqB,SAAQ,yBAE3C;IACC,SAAS,CAAC,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAEpC;;;;;OAKG;IACH,IACW,KAAK,CAAC,KAAK,EAAE,MAAM,EAE7B;IACD,IAAW,KAAK,IAAI,MAAM,CAEzB;IAED,sCAAsC;IACtC,IACW,QAAQ,CAAC,KAAK,EAAE,OAAO,EAGjC;IACD,IAAW,QAAQ,IAAI,OAAO,CAE7B;IAED,sDAAsD;IACtD,SAAS,CAAC,QAAQ,CAAC,eAAe,EAAE,YAAY,CAAC;IAEjD,iDAAiD;IACjD,SAAS,CAAC,QAAQ,CAAC,cAAc,EAAE,YAAY,CAAC;IAEhD,4CAA4C;IACnC,SAAS,CAAC,QAAQ,CAAC,QAAQ,UAAS;IAE7C,yFAAyF;IAChF,SAAS,CAAC,QAAQ,CAAC,iBAAiB,UAAS;IAE7C,SAAS,CAAC,QAAQ,CAAC,KAAK,EAAG,MAAM,CAAC;IAE3C,0CAA0C;IACjC,SAAS,CAAC,QAAQ,CAAC,qBAAqB,EAAE,OAAO,CAAS;IAEnE,4CAA4C;IACnC,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAuB;IAExD,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAS;IAEnD,OAAO,CAAC,MAAM,CAAyC;;IAmBvC,wBAAwB,CACtC,IAAI,EAAE,MAAM,EACZ,GAAG,EAAE,MAAM,GAAG,IAAI,EAClB,KAAK,EAAE,MAAM,GAAG,IAAI,GACnB,IAAI;IAMP;;;;OAIG;IACI,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAIrC;;OAEG;IACI,6BAA6B,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IAQ7C,iBAAiB,IAAI,IAAI;cAUtB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cASzD,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAO9E,SAAS,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IACzD,SAAS,CAAC,QAAQ,CAAC,sBAAsB,IAAI,IAAI;IAEjD,SAAS,CAAC,sBAAsB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IAKzD;;;OAGG;IACI,SAAS,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAItC,SAAS,CAAC,IAAI,IAAI,IAAI;IAStB,SAAS,CAAC,kBAAkB,IAAI,IAAI;IAQpC,OAAO,CAAC,mBAAmB;IAI3B,yEAAyE;IACzE,SAAS,CAAC,wBAAwB,CAAC,aAAa,EAAE,cAAc,EAAE,GAAG,IAAI;IAWzE,SAAS,CAAC,oBAAoB,IAAI,IAAI;IAuBtC,SAAS,CAAC,mBAAmB,IAAI,cAAc;IAwB/C,SAAS,CAAC,UAAU,IAAI,cAAc;IAItC,SAAS,CAAC,WAAW,IAAI,cAAc,GAAG,OAAO,OAAO;IAIxD,SAAS,CAAC,UAAU,IAAI,cAAc,GAAG,OAAO,OAAO;cAIpC,MAAM,IAAI,cAAc;CAmB5C"}