@sbb-esta/lyne-elements 1.16.0 → 2.0.0

package/alert/alert.js

@@ -1,57 +1,54 @@
-var bt = (r) => {
-  throw TypeError(r);
+var q = (i) => {
+  throw TypeError(i);
 };
-var ct = (r, l, o) => l.has(r) || bt("Cannot " + o);
-var b = (r, l, o) => (ct(r, l, "read from private field"), o ? o.call(r) : l.get(r)), c = (r, l, o) => l.has(r) ? bt("Cannot add the same private member more than once") : l instanceof WeakSet ? l.add(r) : l.set(r, o), i = (r, l, o, h) => (ct(r, l, "write to private field"), h ? h.call(r, o) : l.set(r, o), o);
-import { __runInitializers as s, __esDecorate as d } from "tslib";
-import { css as dt, html as $, nothing as L } from "lit";
-import { customElement as mt, property as m } from "lit/decorators.js";
-import { SbbOpenCloseBaseElement as ht } from "../core/base-elements.js";
-import { SbbLanguageController as _t } from "../core/controllers.js";
-import { forceType as _ } from "../core/decorators.js";
-import { EventEmitter as pt } from "../core/eventing.js";
-import { i18nFindOutMore as gt, i18nCloseAlert as ut } from "../core/i18n.js";
-import { SbbIconNameMixin as ft } from "../icon.js";
+var M = (i, a, n) => a.has(i) || q("Cannot " + n);
+var c = (i, a, n) => (M(i, a, "read from private field"), n ? n.call(i) : a.get(i)), d = (i, a, n) => a.has(i) ? q("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(i) : a.set(i, n), r = (i, a, n, b) => (M(i, a, "write to private field"), b ? b.call(i, n) : a.set(i, n), n);
+import { __runInitializers as o, __esDecorate as m } from "tslib";
+import { css as F, html as P, nothing as G } from "lit";
+import { customElement as H, property as f } from "lit/decorators.js";
+import { SbbOpenCloseBaseElement as J } from "../core/base-elements.js";
+import { SbbLanguageController as K } from "../core/controllers.js";
+import { forceType as y } from "../core/decorators.js";
+import { isLean as Q, isZeroAnimationDuration as R } from "../core/dom.js";
+import { i18nCloseAlert as V } from "../core/i18n.js";
+import { SbbIconNameMixin as W } from "../icon.js";
 import "../button/transparent-button.js";
 import "../divider.js";
-import "../link.js";
 import "../title.js";
-const vt = dt`*,:before,:after{box-sizing:border-box}:host{display:block;--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-alert-background-color: var(--sbb-color-midnight);--sbb-alert-border-radius: var(--sbb-border-radius-4x);--sbb-alert-color: var(--sbb-color-aluminium);--sbb-alert-padding: var(--sbb-spacing-responsive-xxs) var(--sbb-spacing-responsive-xs);--sbb-alert-icon-size: 1.25rem;--sbb-alert-close-icon-size: var(--sbb-size-icon-ui-small);--sbb-alert-close-icon-margin: var(--sbb-spacing-responsive-xxs);--sbb-alert-gap: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-responsive-xs);--sbb-alert-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-6x) );--sbb-alert-timing-function: ease-in}@media (min-width: 52.5rem){:host{--sbb-alert-icon-size: 1.75rem}}@media (forced-colors: active){:host{outline:var(--sbb-border-width-1x) solid CanvasText;border-radius:var(--sbb-alert-border-radius)}}: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([size=s]){--sbb-alert-gap: var(--sbb-spacing-fixed-1x) var(--sbb-spacing-responsive-xxs);--sbb-alert-close-icon-margin: var(--sbb-spacing-responsive-xxxs)}:host([size=l]){--sbb-alert-icon-size: var(--sbb-size-icon-ui-small)}@media (min-width: 52.5rem){:host([size=l]){--sbb-alert-icon-size: 2.125rem}}.sbb-alert__transition-wrapper{display:grid;grid-template-rows:0fr;opacity:0}:host(:is([data-state=opened],[data-state=closing])) .sbb-alert__transition-wrapper{grid-template-rows:1fr;opacity:1}:host([data-state=opening]) .sbb-alert__transition-wrapper{animation-name:open,open-opacity;animation-fill-mode:forwards;animation-duration:var(--sbb-alert-animation-duration);animation-timing-function:var(--sbb-alert-timing-function);animation-delay:0s,var(--sbb-alert-animation-duration)}:host([data-state=closing]) .sbb-alert__transition-wrapper{animation-name:close-opacity,close;animation-fill-mode:forwards;animation-duration:var(--sbb-alert-animation-duration);animation-timing-function:var(--sbb-alert-timing-function);animation-delay:0s,var(--sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x))}.sbb-alert__transition-sub-wrapper{overflow:hidden}.sbb-alert{--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);display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--sbb-alert-gap);min-width:fit-content;padding:var(--sbb-alert-padding);overflow:hidden;color:var(--sbb-alert-color);background-color:var(--sbb-alert-background-color);border-radius:var(--sbb-alert-border-radius)}@media (min-width: 37.5rem){.sbb-alert{grid-template-columns:auto 1fr auto;align-items:flex-start}}.sbb-alert__icon{display:flex;align-items:start;padding-block:var(--sbb-spacing-fixed-1x);min-width:var(--sbb-alert-icon-size);--sbb-icon-svg-width: var(--sbb-alert-icon-size);--sbb-icon-svg-height: var(--sbb-alert-icon-size)}.sbb-alert__content{order:3;grid-column:1/3}@media (min-width: 37.5rem){.sbb-alert__content{order:initial;grid-column-start:initial;grid-column-end:initial}}.sbb-alert__content-slot{display:inline;margin:0;padding:0}.sbb-alert__title{margin:0}.sbb-alert__close-button-wrapper{display:flex;justify-content:flex-end;align-items:center;height:100%}@media (min-width: 37.5rem){.sbb-alert__close-button{margin-inline-start:var(--sbb-alert-close-icon-margin)}}.sbb-alert__close-button-divider{display:none}@media (min-width: 37.5rem){.sbb-alert__close-button-divider{display:block;height:calc(100% - var(--sbb-spacing-fixed-1x) * 2)}}@keyframes open{0%{grid-template-rows:0fr}to{grid-template-rows:1fr}}@keyframes open-opacity{0%{opacity:0}to{opacity:1}}@keyframes close{0%{grid-template-rows:1fr}to{grid-template-rows:0fr}}@keyframes close-opacity{0%{opacity:1}to{opacity:0}}`;
-let Dt = (() => {
-  var p, g, u, f, v, y, z, x, w, k, C, n;
-  let r = [mt("sbb-alert")], l, o = [], h, N = ft(ht), O, S = [], E = [], q, A = [], D = [], R, T = [], j = [], B, M = [], U = [], F, P = [], G = [], H, J = [], K = [], Q, V = [], W = [], X, Y = [], Z = [], tt, et = [], it = [], st, at = [], nt = [], rt, lt = [], ot = [];
-  var I = (n = class extends N {
+const X = F`*,:before,:after{box-sizing:border-box}:host{display:block;--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-alert-background-color: var(--sbb-color-midnight);--sbb-alert-border-radius: var(--sbb-border-radius-4x);--sbb-alert-color: var(--sbb-color-aluminium);--sbb-alert-padding: var(--sbb-spacing-responsive-xxs) var(--sbb-spacing-responsive-xs);--sbb-alert-icon-size: 1.25rem;--sbb-alert-close-icon-size: var(--sbb-size-icon-ui-small);--sbb-alert-close-icon-margin: var(--sbb-spacing-responsive-xxs);--sbb-alert-gap: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-responsive-xs);--sbb-alert-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-6x) );--sbb-alert-timing-function: ease-in}@media (min-width: 52.5rem){:host{--sbb-alert-icon-size: 1.75rem}}@media (forced-colors: active){:host{outline:var(--sbb-border-width-1x) solid CanvasText;border-radius:var(--sbb-alert-border-radius)}}: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([size=s]){--sbb-alert-gap: var(--sbb-spacing-fixed-1x) var(--sbb-spacing-responsive-xxs);--sbb-alert-close-icon-margin: var(--sbb-spacing-responsive-xxxs)}:host([size=l]){--sbb-alert-icon-size: var(--sbb-size-icon-ui-small)}@media (min-width: 52.5rem){:host([size=l]){--sbb-alert-icon-size: 2.125rem}}.sbb-alert__transition-wrapper{display:grid;grid-template-rows:0fr;opacity:0}:host(:is([data-state=opened],[data-state=closing])) .sbb-alert__transition-wrapper{grid-template-rows:1fr;opacity:1}:host([data-state=opening]) .sbb-alert__transition-wrapper{animation-name:open,open-opacity;animation-fill-mode:forwards;animation-duration:var(--sbb-alert-animation-duration);animation-timing-function:var(--sbb-alert-timing-function);animation-delay:0s,var(--sbb-alert-animation-duration)}:host([data-state=closing]) .sbb-alert__transition-wrapper{animation-name:close-opacity,close;animation-fill-mode:forwards;animation-duration:var(--sbb-alert-animation-duration);animation-timing-function:var(--sbb-alert-timing-function);animation-delay:0s,var(--sbb-disable-animation-duration, var(--sbb-animation-duration-2x))}.sbb-alert__transition-sub-wrapper{overflow:hidden}.sbb-alert{--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);display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--sbb-alert-gap);min-width:fit-content;padding:var(--sbb-alert-padding);overflow:hidden;color:var(--sbb-alert-color);background-color:var(--sbb-alert-background-color);border-radius:var(--sbb-alert-border-radius)}@media (min-width: 37.5rem){.sbb-alert{grid-template-columns:auto 1fr auto;align-items:flex-start}}.sbb-alert__icon{display:flex;align-items:start;padding-block:var(--sbb-spacing-fixed-1x);min-width:var(--sbb-alert-icon-size);--sbb-icon-svg-width: var(--sbb-alert-icon-size);--sbb-icon-svg-height: var(--sbb-alert-icon-size)}.sbb-alert__content{order:3;grid-column:1/3}@media (min-width: 37.5rem){.sbb-alert__content{order:initial;grid-column-start:initial;grid-column-end:initial}}.sbb-alert__content-slot{display:inline;margin:0;padding:0}.sbb-alert__title{margin:0}.sbb-alert__close-button-wrapper{display:flex;justify-content:flex-end;align-items:center;height:100%}@media (min-width: 37.5rem){.sbb-alert__close-button{margin-inline-start:var(--sbb-alert-close-icon-margin)}}.sbb-alert__close-button-divider{display:none}@media (min-width: 37.5rem){.sbb-alert__close-button-divider{display:block;height:calc(100% - var(--sbb-spacing-fixed-1x) * 2)}}@keyframes open{0%{grid-template-rows:0fr}to{grid-template-rows:1fr}}@keyframes open-opacity{0%{opacity:0}to{opacity:1}}@keyframes close{0%{grid-template-rows:1fr}to{grid-template-rows:0fr}}@keyframes close-opacity{0%{opacity:1}to{opacity:0}}`;
+let pt = (() => {
+  var p, h, _, g, u, v, s;
+  let i = [H("sbb-alert")], a, n = [], b, z = W(J), x, w = [], C = [], k, L = [], N = [], O, A = [], S = [], I, $ = [], D = [], E, T = [], Z = [], j, B = [], U = [];
+  return s = class extends z {
     constructor() {
       super(...arguments);
-      c(this, p);
-      c(this, g);
-      c(this, u);
-      c(this, f);
-      c(this, v);
-      c(this, y);
-      c(this, z);
-      c(this, x);
-      c(this, w);
-      c(this, k);
-      c(this, C);
-      i(this, p, s(this, S, !1)), i(this, g, (s(this, E), s(this, A, "m"))), i(this, u, (s(this, D), s(this, T, "info"))), i(this, f, (s(this, j), s(this, M, ""))), i(this, v, (s(this, U), s(this, P, "3"))), i(this, y, (s(this, G), s(this, J, ""))), i(this, z, (s(this, K), s(this, V, ""))), i(this, x, (s(this, W), s(this, Y, ""))), i(this, w, (s(this, Z), s(this, et, ""))), i(this, k, (s(this, it), s(this, at, ""))), i(this, C, (s(this, nt), s(this, lt, "all"))), this._dismissalRequested = (s(this, ot), new pt(this, I.events.dismissalRequested)), this._language = new _t(this);
+      d(this, p);
+      d(this, h);
+      d(this, _);
+      d(this, g);
+      d(this, u);
+      d(this, v);
+      r(this, p, o(this, w, !1)), r(this, h, (o(this, C), o(this, L, Q() ? "s" : "m"))), r(this, _, (o(this, N), o(this, A, "info"))), r(this, g, (o(this, S), o(this, $, ""))), r(this, u, (o(this, D), o(this, T, "3"))), r(this, v, (o(this, Z), o(this, B, "all"))), this._language = (o(this, U), new K(this));
     }
     /**
      * Whether the alert is readonly.
      * In readonly mode, there is no dismiss button offered to the user.
      */
     get readonly() {
-      return b(this, p);
+      return c(this, p);
     }
     set readonly(e) {
-      i(this, p, e);
+      r(this, p, e);
     }
-    /** You can choose between `s`, `m` or `l` size. */
+    /**
+     * You can choose between `s`, `m` or `l` size.
+     * @default 'm' / 's' (lean)
+     */
     get size() {
-      return b(this, g);
+      return c(this, h);
     }
     set size(e) {
-      i(this, g, e);
+      r(this, h, e);
     }
     /**
      * Name of the icon which will be forward to the nested `sbb-icon`.
@@ -59,84 +56,46 @@ let Dt = (() => {
      * Styling is optimized for icons of type HIM-CUS.
      */
     get iconName() {
-      return b(this, u);
+      return c(this, _);
     }
     set iconName(e) {
-      i(this, u, e);
+      r(this, _, e);
     }
     /** Content of title. */
     get titleContent() {
-      return b(this, f);
+      return c(this, g);
     }
     set titleContent(e) {
-      i(this, f, e);
+      r(this, g, e);
     }
     /** Level of title, will be rendered as heading tag (e.g. h3). Defaults to level 3. */
     get titleLevel() {
-      return b(this, v);
+      return c(this, u);
     }
     set titleLevel(e) {
-      i(this, v, e);
-    }
-    /** Content of the link. */
-    get linkContent() {
-      return b(this, y);
-    }
-    set linkContent(e) {
-      i(this, y, e);
-    }
-    /** The href value you want to link to. */
-    get href() {
-      return b(this, z);
-    }
-    set href(e) {
-      i(this, z, e);
-    }
-    /** Where to display the linked URL. */
-    get target() {
-      return b(this, x);
-    }
-    set target(e) {
-      i(this, x, e);
-    }
-    /** The relationship of the linked URL as space-separated link types. */
-    get rel() {
-      return b(this, w);
-    }
-    set rel(e) {
-      i(this, w, e);
-    }
-    /** This will be forwarded as aria-label to the relevant nested element. */
-    get accessibilityLabel() {
-      return b(this, k);
-    }
-    set accessibilityLabel(e) {
-      i(this, k, e);
+      r(this, u, e);
     }
     /** The enabled animations. */
     get animation() {
-      return b(this, C);
+      return c(this, v);
     }
     set animation(e) {
-      i(this, C, e);
-    }
-    /** Requests dismissal of the alert.
-     * @deprecated in favour of 'willClose' and 'didClose' events
-     */
-    requestDismissal() {
-      this._dismissalRequested.emit();
+      r(this, v, e);
     }
     /** Open the alert. */
     open() {
-      this.willOpen.emit(), this.state = "opening";
+      this.state = "opening", this.willOpen.emit(), this._isZeroAnimationDuration() && this._handleOpening();
     }
     /** Close the alert. */
     close() {
-      this.willClose.emit() && (this.state = "closing");
+      this.state === "opened" && this.willClose.emit() && (this.state = "closing", this._isZeroAnimationDuration() && this._handleClosing());
     }
     async firstUpdated(e) {
       super.firstUpdated(e), this.open();
     }
+    _isZeroAnimationDuration() {
+      return R(this, "--sbb-alert-animation-duration");
+    }
     _onAnimationEnd(e) {
       this.state === "opening" && e.animationName === "open-opacity" ? this._handleOpening() : this.state === "closing" && e.animationName === "close" && this._handleClosing();
     }
@@ -146,8 +105,12 @@ let Dt = (() => {
     _handleClosing() {
       this.state = "closed", this.didClose.emit(), setTimeout(() => this.remove());
     }
+    _syncLinks() {
+      var e;
+      Array.from(((e = this.querySelectorAll) == null ? void 0 : e.call(this, "sbb-link")) ?? []).forEach((t) => t.toggleAttribute("negative", !0));
+    }
     render() {
-      return $`
+      return P`
       <div class="sbb-alert__transition-wrapper" @animationend=${this._onAnimationEnd}>
         <!-- sub wrapper needed to properly support fade in animation -->
         <div class="sbb-alert__transition-sub-wrapper">
@@ -163,19 +126,10 @@ let Dt = (() => {
                 <slot name="title">${this.titleContent}</slot>
               </sbb-title>
               <p class="sbb-alert__content-slot">
-                <slot></slot>
+                <slot @slotchange=${this._syncLinks}></slot>
               </p>
-              ${this.href ? $` <sbb-link
-                    accessibility-label=${this.accessibilityLabel ?? L}
-                    href=${this.href ?? L}
-                    target=${this.target ?? L}
-                    rel=${this.rel ?? L}
-                    negative
-                  >
-                    ${this.linkContent ? this.linkContent : gt[this._language.current]}
-                  </sbb-link>` : L}
             </span>
-            ${this.readonly ? L : $`<span class="sbb-alert__close-button-wrapper">
+            ${this.readonly ? G : P`<span class="sbb-alert__close-button-wrapper">
                   <sbb-divider
                     orientation="vertical"
                     negative
@@ -185,8 +139,8 @@ let Dt = (() => {
                     negative
                     size=${this.size === "l" ? "m" : this.size}
                     icon-name="cross-small"
-                    @click=${() => this.requestDismissal()}
-                    aria-label=${ut[this._language.current]}
+                    @click=${() => this.close()}
+                    aria-label=${V[this._language.current]}
                     class="sbb-alert__close-button"
                   ></sbb-transparent-button>
                 </span>`}
@@ -195,40 +149,28 @@ let Dt = (() => {
       </div>
     `;
     }
-  }, p = new WeakMap(), g = new WeakMap(), u = new WeakMap(), f = new WeakMap(), v = new WeakMap(), y = new WeakMap(), z = new WeakMap(), x = new WeakMap(), w = new WeakMap(), k = new WeakMap(), C = new WeakMap(), h = n, (() => {
-    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(N[Symbol.metadata] ?? null) : void 0;
-    O = [_(), m({ reflect: !0, type: Boolean })], q = [m({ reflect: !0 })], R = [_(), m({ attribute: "icon-name" })], B = [_(), m({ attribute: "title-content" })], F = [m({ attribute: "title-level" })], H = [_(), m({ attribute: "link-content" })], Q = [_(), m()], X = [_(), m()], tt = [_(), m()], st = [_(), m({ attribute: "accessibility-label" })], rt = [m({ reflect: !0 })], d(n, null, O, { kind: "accessor", name: "readonly", static: !1, private: !1, access: { has: (t) => "readonly" in t, get: (t) => t.readonly, set: (t, a) => {
-      t.readonly = a;
-    } }, metadata: e }, S, E), d(n, null, q, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (t) => "size" in t, get: (t) => t.size, set: (t, a) => {
-      t.size = a;
-    } }, metadata: e }, A, D), d(n, null, R, { kind: "accessor", name: "iconName", static: !1, private: !1, access: { has: (t) => "iconName" in t, get: (t) => t.iconName, set: (t, a) => {
-      t.iconName = a;
-    } }, metadata: e }, T, j), d(n, null, B, { kind: "accessor", name: "titleContent", static: !1, private: !1, access: { has: (t) => "titleContent" in t, get: (t) => t.titleContent, set: (t, a) => {
-      t.titleContent = a;
-    } }, metadata: e }, M, U), d(n, null, F, { kind: "accessor", name: "titleLevel", static: !1, private: !1, access: { has: (t) => "titleLevel" in t, get: (t) => t.titleLevel, set: (t, a) => {
-      t.titleLevel = a;
-    } }, metadata: e }, P, G), d(n, null, H, { kind: "accessor", name: "linkContent", static: !1, private: !1, access: { has: (t) => "linkContent" in t, get: (t) => t.linkContent, set: (t, a) => {
-      t.linkContent = a;
-    } }, metadata: e }, J, K), d(n, null, Q, { kind: "accessor", name: "href", static: !1, private: !1, access: { has: (t) => "href" in t, get: (t) => t.href, set: (t, a) => {
-      t.href = a;
-    } }, metadata: e }, V, W), d(n, null, X, { kind: "accessor", name: "target", static: !1, private: !1, access: { has: (t) => "target" in t, get: (t) => t.target, set: (t, a) => {
-      t.target = a;
-    } }, metadata: e }, Y, Z), d(n, null, tt, { kind: "accessor", name: "rel", static: !1, private: !1, access: { has: (t) => "rel" in t, get: (t) => t.rel, set: (t, a) => {
-      t.rel = a;
-    } }, metadata: e }, et, it), d(n, null, st, { kind: "accessor", name: "accessibilityLabel", static: !1, private: !1, access: { has: (t) => "accessibilityLabel" in t, get: (t) => t.accessibilityLabel, set: (t, a) => {
-      t.accessibilityLabel = a;
-    } }, metadata: e }, at, nt), d(n, null, rt, { kind: "accessor", name: "animation", static: !1, private: !1, access: { has: (t) => "animation" in t, get: (t) => t.animation, set: (t, a) => {
-      t.animation = a;
-    } }, metadata: e }, lt, ot), d(null, l = { value: h }, r, { kind: "class", name: h.name, metadata: e }, null, o), I = h = l.value, e && Object.defineProperty(h, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
-  })(), n.styles = vt, n.events = {
+  }, p = new WeakMap(), h = new WeakMap(), _ = new WeakMap(), g = new WeakMap(), u = new WeakMap(), v = new WeakMap(), b = s, (() => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(z[Symbol.metadata] ?? null) : void 0;
+    x = [y(), f({ reflect: !0, type: Boolean })], k = [f({ reflect: !0 })], O = [y(), f({ attribute: "icon-name" })], I = [y(), f({ attribute: "title-content" })], E = [f({ attribute: "title-level" })], j = [f({ reflect: !0 })], m(s, null, x, { kind: "accessor", name: "readonly", static: !1, private: !1, access: { has: (t) => "readonly" in t, get: (t) => t.readonly, set: (t, l) => {
+      t.readonly = l;
+    } }, metadata: e }, w, C), m(s, null, k, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (t) => "size" in t, get: (t) => t.size, set: (t, l) => {
+      t.size = l;
+    } }, metadata: e }, L, N), m(s, null, O, { kind: "accessor", name: "iconName", static: !1, private: !1, access: { has: (t) => "iconName" in t, get: (t) => t.iconName, set: (t, l) => {
+      t.iconName = l;
+    } }, metadata: e }, A, S), m(s, null, I, { kind: "accessor", name: "titleContent", static: !1, private: !1, access: { has: (t) => "titleContent" in t, get: (t) => t.titleContent, set: (t, l) => {
+      t.titleContent = l;
+    } }, metadata: e }, $, D), m(s, null, E, { kind: "accessor", name: "titleLevel", static: !1, private: !1, access: { has: (t) => "titleLevel" in t, get: (t) => t.titleLevel, set: (t, l) => {
+      t.titleLevel = l;
+    } }, metadata: e }, T, Z), m(s, null, j, { kind: "accessor", name: "animation", static: !1, private: !1, access: { has: (t) => "animation" in t, get: (t) => t.animation, set: (t, l) => {
+      t.animation = l;
+    } }, metadata: e }, B, U), m(null, a = { value: b }, i, { kind: "class", name: b.name, metadata: e }, null, n), b = a.value, e && Object.defineProperty(b, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), s.styles = X, s.events = {
     willOpen: "willOpen",
     didOpen: "didOpen",
     willClose: "willClose",
-    didClose: "didClose",
-    dismissalRequested: "dismissalRequested"
-  }, s(h, o), n);
-  return I = h;
+    didClose: "didClose"
+  }, o(b, n), b;
 })();
 export {
-  Dt as SbbAlertElement
+  pt as SbbAlertElement
 };

package/animation.css

@@ -1,18 +1,14 @@
 .sbb-disable-animation {
-  --sbb-disable-animation-time: 0.1ms;
-  --sbb-disable-animation-zero-time: 0s;
+  --sbb-disable-animation-duration: 0s;
 }
 
 .sbb-disable-animation-locally {
-  --sbb-disable-animation-time: 0.1ms;
-  --sbb-disable-animation-zero-time: 0s;
+  --sbb-disable-animation-duration: 0s;
 }
 .sbb-disable-animation-locally > * {
-  --sbb-disable-animation-time: initial;
-  --sbb-disable-animation-zero-time: initial;
+  --sbb-disable-animation-duration: initial;
 }
 
 .sbb-enable-animation {
-  --sbb-disable-animation-time: initial;
-  --sbb-disable-animation-zero-time: initial;
+  --sbb-disable-animation-duration: initial;
 }

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

@@ -40,11 +40,11 @@ export declare abstract class SbbAutocompleteBaseElement extends SbbAutocomplete
     protected abstract selectByKeyboard(event: KeyboardEvent): void;
     protected abstract setNextActiveOption(event: KeyboardEvent): void;
     protected abstract resetActiveElement(): void;
-    protected abstract onOptionClick(event: MouseEvent): void;
     /** Opens the autocomplete. */
     open(): void;
     /** Closes the autocomplete. */
     close(): void;
+    private _isZeroAnimationDuration;
     connectedCallback(): void;
     protected willUpdate(changedProperties: PropertyValues<this>): void;
     protected firstUpdated(changedProperties: PropertyValues<this>): void;
@@ -68,13 +68,14 @@ export declare abstract class SbbAutocompleteBaseElement extends SbbAutocomplete
     private _bindTo;
     private _setupTriggerEvents;
     private _setOverlayPosition;
-    /** On open/close animation end.
-     *  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.
+    /**
+     * On open/close animation end.
+     * 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.
      */
     private _onAnimationEnd;
-    private _onOpenAnimationEnd;
-    private _onCloseAnimationEnd;
+    private _handleOpening;
+    private _handleClosing;
     private _attachOpenPanelEvents;
     private _pointerDownListener;
     private _closeOnBackdropClick;

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

@@ -1 +1 @@
-{"version":3,"file":"autocomplete-base-element.d.ts","sourceRoot":"","sources":["../../../src/elements/autocomplete/autocomplete-base-element.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"autocomplete-base-element.d.ts","sourceRoot":"","sources":["../../../src/elements/autocomplete/autocomplete-base-element.ts"],"names":[],"mappings":"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"}

package/autocomplete/autocomplete.d.ts

@@ -17,7 +17,6 @@ export declare class SbbAutocompleteElement extends SbbAutocompleteBaseElement {
     protected panelRole: string;
     private _activeItemIndex;
     protected get options(): SbbOptionElement[];
-    protected onOptionClick(event: MouseEvent): void;
     connectedCallback(): void;
     protected syncNegative(): void;
     protected openedPanelKeyboardInteraction(event: KeyboardEvent): void;

package/autocomplete/autocomplete.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../../src/elements/autocomplete/autocomplete.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAsB,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAEzE,OAAO,EAAE,0BAA0B,EAAE,MAAM,gCAAgC,CAAC;AAU5E;;;;;;;;;;;GAWG;AACH,qBAKM,sBAAuB,SAAQ,0BAA0B;IAC7D,SAAS,CAAC,SAAS,SAAkC;IACrD,SAAS,CAAC,SAAS,SAAa;IAChC,OAAO,CAAC,gBAAgB,CAAM;IAE9B,SAAS,KAAK,OAAO,IAAI,gBAAgB,EAAE,CAE1C;IAED,SAAS,CAAC,aAAa,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IAUhC,iBAAiB,IAAI,IAAI;IAUzC,SAAS,CAAC,YAAY,IAAI,IAAI;IAQ9B,SAAS,CAAC,8BAA8B,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAsBpE,SAAS,CAAC,gBAAgB,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAStD,SAAS,CAAC,mBAAmB,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAqBzD,SAAS,CAAC,kBAAkB,IAAI,IAAI;IAUpC,SAAS,CAAC,oBAAoB,CAAC,OAAO,EAAE,gBAAgB,GAAG,IAAI;CAGhE;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,kBAAkB,EAAE,sBAAsB,CAAC;KAC5C;CACF"}
+{"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../../src/elements/autocomplete/autocomplete.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAsB,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAEzE,OAAO,EAAE,0BAA0B,EAAE,MAAM,gCAAgC,CAAC;AAU5E;;;;;;;;;;;GAWG;AACH,qBAKM,sBAAuB,SAAQ,0BAA0B;IAC7D,SAAS,CAAC,SAAS,SAAkC;IACrD,SAAS,CAAC,SAAS,SAAa;IAChC,OAAO,CAAC,gBAAgB,CAAM;IAE9B,SAAS,KAAK,OAAO,IAAI,gBAAgB,EAAE,CAE1C;IAEe,iBAAiB,IAAI,IAAI;IAUzC,SAAS,CAAC,YAAY,IAAI,IAAI;IAQ9B,SAAS,CAAC,8BAA8B,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAsBpE,SAAS,CAAC,gBAAgB,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAStD,SAAS,CAAC,mBAAmB,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAqBzD,SAAS,CAAC,kBAAkB,IAAI,IAAI;IAUpC,SAAS,CAAC,oBAAoB,CAAC,OAAO,EAAE,gBAAgB,GAAG,IAAI;CAGhE;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,kBAAkB,EAAE,sBAAsB,CAAC;KAC5C;CACF"}

package/autocomplete-grid/autocomplete-grid/autocomplete-grid.d.ts

@@ -19,7 +19,6 @@ export declare class SbbAutocompleteGridElement extends SbbAutocompleteBaseEleme
     private _activeColumnIndex;
     protected get options(): SbbAutocompleteGridOptionElement[];
     private get _row();
-    protected onOptionClick(event: MouseEvent): void;
     connectedCallback(): void;
     protected syncNegative(): void;
     protected openedPanelKeyboardInteraction(event: KeyboardEvent): void;

package/autocomplete-grid/autocomplete-grid/autocomplete-grid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"autocomplete-grid.d.ts","sourceRoot":"","sources":["../../../../src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,0BAA0B,EAAE,MAAM,uBAAuB,CAAC;AAQnE,OAAO,EAAE,gCAAgC,EAAE,MAAM,gCAAgC,CAAC;AAWlF;;;;;;;;;;;GAWG;AACH,qBAKM,0BAA2B,SAAQ,0BAA0B;IACjE,SAAS,CAAC,SAAS,SAAuC;IAC1D,SAAS,CAAC,SAAS,SAAU;IAC7B,OAAO,CAAC,gBAAgB,CAAM;IAC9B,OAAO,CAAC,kBAAkB,CAAK;IAE/B,SAAS,KAAK,OAAO,IAAI,gCAAgC,EAAE,CAE1D;IAED,OAAO,KAAK,IAAI,GAMf;IAED,SAAS,CAAC,aAAa,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IAUhC,iBAAiB,IAAI,IAAI;IAUzC,SAAS,CAAC,YAAY,IAAI,IAAI;IAU9B,SAAS,CAAC,8BAA8B,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IA2BpE;;;;;;OAMG;IACH,SAAS,CAAC,gBAAgB,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IActD,SAAS,CAAC,mBAAmB,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IA8BzD,OAAO,CAAC,+BAA+B;IAmCvC,SAAS,CAAC,kBAAkB,IAAI,IAAI;IAkBpC,SAAS,CAAC,oBAAoB,CAAC,OAAO,EAAE,gBAAgB,GAAG,IAAI;CAGhE;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,uBAAuB,EAAE,0BAA0B,CAAC;KACrD;CACF"}
+{"version":3,"file":"autocomplete-grid.d.ts","sourceRoot":"","sources":["../../../../src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,0BAA0B,EAAE,MAAM,uBAAuB,CAAC;AAQnE,OAAO,EAAE,gCAAgC,EAAE,MAAM,gCAAgC,CAAC;AAWlF;;;;;;;;;;;GAWG;AACH,qBAKM,0BAA2B,SAAQ,0BAA0B;IACjE,SAAS,CAAC,SAAS,SAAuC;IAC1D,SAAS,CAAC,SAAS,SAAU;IAC7B,OAAO,CAAC,gBAAgB,CAAM;IAC9B,OAAO,CAAC,kBAAkB,CAAK;IAE/B,SAAS,KAAK,OAAO,IAAI,gCAAgC,EAAE,CAE1D;IAED,OAAO,KAAK,IAAI,GAMf;IAEe,iBAAiB,IAAI,IAAI;IAUzC,SAAS,CAAC,YAAY,IAAI,IAAI;IAU9B,SAAS,CAAC,8BAA8B,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IA2BpE;;;;;;OAMG;IACH,SAAS,CAAC,gBAAgB,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IActD,SAAS,CAAC,mBAAmB,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IA8BzD,OAAO,CAAC,+BAA+B;IAmCvC,SAAS,CAAC,kBAAkB,IAAI,IAAI;IAkBpC,SAAS,CAAC,oBAAoB,CAAC,OAAO,EAAE,gBAAgB,GAAG,IAAI;CAGhE;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,uBAAuB,EAAE,0BAA0B,CAAC;KACrD;CACF"}

package/autocomplete-grid/autocomplete-grid-button.js

@@ -2,24 +2,24 @@ import { __esDecorate as n, __runInitializers as l } from "tslib";
 import { MutationController as d } from "@lit-labs/observers/mutation-controller.js";
 import { css as u, isServer as c } from "lit";
 import { customElement as m } from "lit/decorators.js";
-import { SbbActionBaseElement as p } from "../core/base-elements.js";
-import { hostAttributes as v, slotState as h } from "../core/decorators.js";
+import { SbbActionBaseElement as v } from "../core/base-elements.js";
+import { hostAttributes as p, slotState as h } from "../core/decorators.js";
 import { isEventPrevented as g } from "../core/eventing.js";
 import { SbbDisabledMixin as f, SbbNegativeMixin as k } from "../core/mixins.js";
 import { SbbIconNameMixin as x } from "../icon.js";
-const y = u`*,:before,:after{box-sizing:border-box}:host{outline:none!important;display:block;--sbb-button-display: flex}:host{display:inline-block;-webkit-tap-highlight-color:transparent;height:fit-content;outline:none!important;--sbb-button-color-text: var(--sbb-color-charcoal);--sbb-button-color-default-background: var(--sbb-color-black-alpha-0);--sbb-button-color-hover-background: var(--sbb-color-milk);--sbb-button-color-active-background: var(--sbb-color-cloud);--sbb-button-color-disabled-background: var(--sbb-color-milk);--sbb-button-color-disabled-border: var(--sbb-color-smoke);--sbb-button-color-disabled-text: var(--sbb-color-granite);--sbb-button-border-disabled-width: var(--sbb-border-width-1x);--sbb-button-border-disabled-style: dashed;--sbb-button-border-radius: var(--sbb-border-radius-infinity);--sbb-button-transition-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x) );--sbb-button-transition-easing-function: var(--sbb-animation-easing)}@media (forced-colors: active){:host{--sbb-button-color-text: ButtonText !important;--sbb-button-color-hover-background: Highlight !important;--sbb-button-color-active-background: Highlight !important;--sbb-button-color-disabled-background: Canvas !important;--sbb-button-color-disabled-border: GrayText !important;--sbb-button-color-disabled-text: GrayText !important}}:host .sbb-autocomplete-grid-button{position:relative;transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:color;border-radius:var(--sbb-button-border-radius);color:var(--sbb-button-color-text);cursor:pointer;-webkit-user-select:none;user-select:none;display:flex}:host .sbb-autocomplete-grid-button:before{position:absolute;content:"";top:0;right:0;bottom:0;left:0;border-radius:var(--sbb-button-border-radius);background-color:var(--sbb-button-color-default-background);transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:inset,background-color}::slotted(sbb-icon),sbb-icon{transition:transform var(--sbb-button-transition-duration) var(--sbb-button-transition-easing-function);transform:translateY(var(--sbb-button-translate-y-content-hover, 0rem));display:flex}:host([negative]){--sbb-button-color-text: var(--sbb-color-milk);--sbb-button-color-default-background: var(--sbb-color-black-alpha-0);--sbb-button-color-hover-background: var(--sbb-color-charcoal);--sbb-button-color-active-background: var(--sbb-color-iron);--sbb-button-color-disabled-background: var(--sbb-color-charcoal);--sbb-button-color-disabled-border: var(--sbb-color-smoke);--sbb-button-color-disabled-text: var(--sbb-color-smoke)}:host(:is([disabled],[data-disabled],[data-group-disabled])) .sbb-autocomplete-grid-button{color:var(--sbb-button-color-disabled-text);cursor:default;pointer-events:none}:host(:is([disabled],[data-disabled],[data-group-disabled])) .sbb-autocomplete-grid-button:before{background-color:var(--sbb-button-color-disabled-background);border:var(--sbb-button-border-disabled-width) var(--sbb-button-border-disabled-style) var(--sbb-button-color-disabled-border)}:host(:is([data-focus-visible],:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch]))) .sbb-autocomplete-grid-button:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}@media (any-hover: hover){:host(:not([disabled],[data-disabled],[data-group-disabled],:active,[data-active]):hover){--sbb-button-translate-y-content-hover: -.0625rem}}@media (any-hover: hover){:host(:not([disabled],[data-disabled],[data-group-disabled],:active,[data-active]):hover) .sbb-autocomplete-grid-button:before{background-color:var(--sbb-button-color-hover-background)}}:host(:not([disabled],[data-disabled],[data-group-disabled]):is(:active,[data-active])) .sbb-autocomplete-grid-button:before{background-color:var(--sbb-button-color-active-background)}`;
+const y = u`*,:before,:after{box-sizing:border-box}:host{outline:none!important;display:block;--sbb-button-display: flex}:host{display:inline-block;-webkit-tap-highlight-color:transparent;height:fit-content;outline:none!important;--sbb-button-color-text: var(--sbb-color-charcoal);--sbb-button-color-default-background: var(--sbb-color-black-alpha-0);--sbb-button-color-hover-background: var(--sbb-color-milk);--sbb-button-color-active-background: var(--sbb-color-cloud);--sbb-button-color-disabled-background: var(--sbb-color-milk);--sbb-button-color-disabled-border: var(--sbb-color-smoke);--sbb-button-color-disabled-text: var(--sbb-color-granite);--sbb-button-border-disabled-width: var(--sbb-border-width-1x);--sbb-button-border-disabled-style: dashed;--sbb-button-border-radius: var(--sbb-border-radius-infinity);--sbb-button-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-button-transition-easing-function: var(--sbb-animation-easing)}@media (forced-colors: active){:host{--sbb-button-color-text: ButtonText !important;--sbb-button-color-hover-background: Highlight !important;--sbb-button-color-active-background: Highlight !important;--sbb-button-color-disabled-background: Canvas !important;--sbb-button-color-disabled-border: GrayText !important;--sbb-button-color-disabled-text: GrayText !important}}:host .sbb-autocomplete-grid-button{position:relative;transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:color;border-radius:var(--sbb-button-border-radius);color:var(--sbb-button-color-text);cursor:pointer;-webkit-user-select:none;user-select:none;display:flex}:host .sbb-autocomplete-grid-button:before{position:absolute;content:"";top:0;right:0;bottom:0;left:0;border-radius:var(--sbb-button-border-radius);background-color:var(--sbb-button-color-default-background);transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:inset,background-color}::slotted(sbb-icon),sbb-icon{transition:transform var(--sbb-button-transition-duration) var(--sbb-button-transition-easing-function);transform:translateY(var(--sbb-button-translate-y-content-hover, 0rem));display:flex}:host([negative]){--sbb-button-color-text: var(--sbb-color-milk);--sbb-button-color-default-background: var(--sbb-color-black-alpha-0);--sbb-button-color-hover-background: var(--sbb-color-charcoal);--sbb-button-color-active-background: var(--sbb-color-iron);--sbb-button-color-disabled-background: var(--sbb-color-charcoal);--sbb-button-color-disabled-border: var(--sbb-color-smoke);--sbb-button-color-disabled-text: var(--sbb-color-smoke)}:host(:is([disabled],:disabled,[disabled-interactive],[data-disabled],[data-group-disabled])) .sbb-autocomplete-grid-button{color:var(--sbb-button-color-disabled-text);cursor:default;pointer-events:none}:host(:is([disabled],:disabled,[disabled-interactive],[data-disabled],[data-group-disabled])) .sbb-autocomplete-grid-button:before{background-color:var(--sbb-button-color-disabled-background);border:var(--sbb-button-border-disabled-width) var(--sbb-button-border-disabled-style) var(--sbb-button-color-disabled-border)}:host(:is([data-focus-visible],:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch]))) .sbb-autocomplete-grid-button:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}@media (any-hover: hover){:host(:not([disabled],:disabled,[disabled-interactive],[data-disabled],[data-group-disabled],:active,[data-active]):hover){--sbb-button-translate-y-content-hover: -.0625rem}}@media (any-hover: hover){:host(:not([disabled],:disabled,[disabled-interactive],[data-disabled],[data-group-disabled],:active,[data-active]):hover) .sbb-autocomplete-grid-button:before{background-color:var(--sbb-button-color-hover-background)}}:host(:not([disabled],:disabled,[disabled-interactive],[data-disabled],[data-group-disabled]):is(:active,[data-active])) .sbb-autocomplete-grid-button:before{background-color:var(--sbb-button-color-active-background)}`;
 let _ = 0;
 const S = {
   attributeFilter: ["data-group-disabled"]
 };
 let T = (() => {
-  var r;
-  let i = [m("sbb-autocomplete-grid-button"), v({
+  var a;
+  let i = [m("sbb-autocomplete-grid-button"), p({
     role: "button",
     tabindex: null,
     "data-button": ""
-  }), h()], b, a = [], o, e = f(k(x(p)));
-  return r = class extends e {
+  }), h()], b, e = [], o, r = f(k(x(v)));
+  return a = class extends r {
     /** Gets the SbbAutocompleteGridOptionElement on the same row of the button. */
     get option() {
       var t;
@@ -53,10 +53,10 @@ let T = (() => {
     _updateAriaDisabled() {
       this.disabled || this._disabledFromGroup ? this.setAttribute("aria-disabled", "true") : this.removeAttribute("aria-disabled");
     }
-  }, o = r, (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(e[Symbol.metadata] ?? null) : void 0;
-    n(null, b = { value: o }, i, { kind: "class", name: o.name, metadata: t }, null, a), o = b.value, t && Object.defineProperty(o, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), r.styles = y, l(o, a), o;
+  }, o = a, (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(r[Symbol.metadata] ?? null) : void 0;
+    n(null, b = { value: o }, i, { kind: "class", name: o.name, metadata: t }, null, e), o = b.value, t && Object.defineProperty(o, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), a.styles = y, l(o, e), o;
 })();
 export {
   T as SbbAutocompleteGridButtonElement

package/autocomplete-grid/autocomplete-grid.js

@@ -25,9 +25,6 @@ let D = (() => {
       var t;
       return Array.from((t = this.querySelectorAll) == null ? void 0 : t.call(this, "sbb-autocomplete-grid-row")).filter((e) => !e.hasAttribute("data-disabled")) ?? [];
     }
-    onOptionClick(t) {
-      t.target.localName !== "sbb-autocomplete-grid-option" || t.target.disabled || this.close();
-    }
     connectedCallback() {
       super.connectedCallback();
       const t = this.abort.signal;