@sbb-esta/lyne-elements 1.5.0 → 1.6.0

package/alert/alert/alert.d.ts

@@ -1,16 +1,18 @@
-import { CSSResultGroup, LitElement, PropertyValues, TemplateResult } from 'lit';
-import { LinkTargetType } from '../../core/base-elements.js';
+import { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
+import { LinkTargetType, SbbOpenCloseBaseElement } from '../../core/base-elements.js';
 import { SbbTitleLevel } from '../../title.js';
 
-declare const SbbAlertElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../icon.js').SbbIconNameMixinType> & typeof LitElement;
+declare const SbbAlertElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../icon.js').SbbIconNameMixinType> & typeof SbbOpenCloseBaseElement;
 /**
  * It displays messages which require user's attention.
  *
  * @slot - Use the unnamed slot to add content to the `sbb-alert`.
  * @slot icon - Should be a `sbb-icon` which is displayed next to the title. Styling is optimized for icons of type HIM-CUS.
  * @slot title - Title content.
- * @event {CustomEvent<void>} willOpen - Emits when the fade in animation starts.
- * @event {CustomEvent<void>} didOpen - Emits when the fade in animation ends and the button is displayed.
+ * @event {CustomEvent<void>} willOpen - Emits when the opening animation starts.
+ * @event {CustomEvent<void>} didOpen - Emits when the opening animation ends.
+ * @event {CustomEvent<void>} willClose - Emits when the closing animation starts. Can be canceled.
+ * @event {CustomEvent<void>} didClose - Emits when the closing animation ends.
  * @event {CustomEvent<void>} dismissalRequested - Emits when dismissal of an alert was requested.
  */
 export declare class SbbAlertElement extends SbbAlertElement_base {
@@ -18,6 +20,8 @@ export declare class SbbAlertElement extends SbbAlertElement_base {
     static readonly events: {
         readonly willOpen: "willOpen";
         readonly didOpen: "didOpen";
+        readonly willClose: "willClose";
+        readonly didClose: "didClose";
         readonly dismissalRequested: "dismissalRequested";
     };
     /**
@@ -48,23 +52,25 @@ export declare class SbbAlertElement extends SbbAlertElement_base {
     /** This will be forwarded as aria-label to the relevant nested element. */
     accessibilityLabel: string | undefined;
     /** The enabled animations. */
-    animation: 'open' | 'none';
-    /** The state of the alert. */
-    private get _state();
-    private set _state(value);
-    /** Emits when the fade in animation starts. */
-    private _willOpen;
-    /** Emits when the fade in animation ends and the button is displayed. */
-    private _didOpen;
-    /** Emits when dismissal of an alert was requested. */
+    animation: 'open' | 'close' | 'all' | 'none';
+    /**
+     * Emits when dismissal of an alert was requested.
+     * @deprecated
+     */
     private _dismissalRequested;
     private _language;
     protected firstUpdated(changedProperties: PropertyValues<this>): Promise<void>;
-    /** Requests dismissal of the alert. */
+    /** Requests dismissal of the alert.
+     * @deprecated in favour of 'willClose' and 'didClose' events
+     */
     requestDismissal(): void;
     /** Open the alert. */
-    private _open;
+    open(): void;
+    /** Close the alert. */
+    close(): void;
     private _onAnimationEnd;
+    private _handleOpening;
+    private _handleClosing;
     protected render(): TemplateResult;
 }
 declare global {

package/alert/alert/alert.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../../src/elements/alert/alert/alert.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EAEV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAGb,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAMlE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAIpD,OAAO,oCAAoC,CAAC;AAC5C,OAAO,kBAAkB,CAAC;AAC1B,OAAO,eAAe,CAAC;AACvB,OAAO,gBAAgB,CAAC;;AAIxB;;;;;;;;;GASG;AACH,qBACa,eAAgB,SAAQ,oBAA4B;IAC/D,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;;;MAIlB;IAEX;;;OAGG;IACgD,QAAQ,UAAS;IAEpE,mDAAmD;IACf,IAAI,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAO;IAEhE;;;;OAIG;IACmD,QAAQ,EAAE,MAAM,CAAU;IAEhF,wBAAwB;IACyB,YAAY,CAAC,EAAE,MAAM,CAAC;IAEvE,sFAAsF;IACvC,UAAU,EAAE,aAAa,CAAO;IAE/E,2BAA2B;IACqB,WAAW,CAAC,EAAE,MAAM,CAAC;IAErE,0CAA0C;IACvB,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IAE5C,uCAAuC;IACpB,MAAM,EAAE,cAAc,GAAG,MAAM,GAAG,SAAS,CAAC;IAE/D,wEAAwE;IACrD,GAAG,EAAE,MAAM,GAAG,SAAS,CAAC;IAE3C,2EAA2E;IACpB,kBAAkB,EAAE,MAAM,GAAG,SAAS,CAAC;IAE9F,8BAA8B;IACM,SAAS,EAAE,MAAM,GAAG,MAAM,CAAU;IAExE,8BAA8B;IAC9B,OAAO,KAAK,MAAM,GAEjB;IACD,OAAO,KAAK,MAAM,QAEjB;IAED,+CAA+C;IAC/C,OAAO,CAAC,SAAS,CAA+E;IAEhG,yEAAyE;IACzE,OAAO,CAAC,QAAQ,CAA8E;IAE9F,sDAAsD;IACtD,OAAO,CAAC,mBAAmB,CAGzB;IAEF,OAAO,CAAC,SAAS,CAAmC;cAE3B,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC;IAM7F,uCAAuC;IAChC,gBAAgB,IAAI,IAAI;IAI/B,sBAAsB;IACtB,OAAO,CAAC,KAAK;IAKb,OAAO,CAAC,eAAe;cAOJ,MAAM,IAAI,cAAc;CAqD5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,WAAW,EAAE,eAAe,CAAC;KAC9B;CACF"}
+{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../../src/elements/alert/alert/alert.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAiB,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGnG,OAAO,EAAE,KAAK,cAAc,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AAK3F,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAIpD,OAAO,oCAAoC,CAAC;AAC5C,OAAO,kBAAkB,CAAC;AAC1B,OAAO,eAAe,CAAC;AACvB,OAAO,gBAAgB,CAAC;;AAExB;;;;;;;;;;;GAWG;AACH,qBACa,eAAgB,SAAQ,oBAAyC;IAC5E,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAgC,MAAM;;;;;;MAM3B;IAEX;;;OAGG;IACgD,QAAQ,UAAS;IAEpE,mDAAmD;IACf,IAAI,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAO;IAEhE;;;;OAIG;IACmD,QAAQ,EAAE,MAAM,CAAU;IAEhF,wBAAwB;IACyB,YAAY,CAAC,EAAE,MAAM,CAAC;IAEvE,sFAAsF;IACvC,UAAU,EAAE,aAAa,CAAO;IAE/E,2BAA2B;IACqB,WAAW,CAAC,EAAE,MAAM,CAAC;IAErE,0CAA0C;IACvB,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IAE5C,uCAAuC;IACpB,MAAM,EAAE,cAAc,GAAG,MAAM,GAAG,SAAS,CAAC;IAE/D,wEAAwE;IACrD,GAAG,EAAE,MAAM,GAAG,SAAS,CAAC;IAE3C,2EAA2E;IACpB,kBAAkB,EAAE,MAAM,GAAG,SAAS,CAAC;IAE9F,8BAA8B;IACM,SAAS,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,MAAM,CAAS;IAEzF;;;OAGG;IACH,OAAO,CAAC,mBAAmB,CAGzB;IAEF,OAAO,CAAC,SAAS,CAAmC;cAE3B,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC;IAM7F;;OAEG;IACI,gBAAgB,IAAI,IAAI;IAI/B,sBAAsB;IACf,IAAI,IAAI,IAAI;IAKnB,uBAAuB;IAChB,KAAK,IAAI,IAAI;IAMpB,OAAO,CAAC,eAAe;IAQvB,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,cAAc;cAMH,MAAM,IAAI,cAAc;CAqD5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,WAAW,EAAE,eAAe,CAAC;KAC9B;CACF"}

package/alert/alert-group/alert-group.d.ts

@@ -34,8 +34,8 @@ export declare class SbbAlertGroupElement extends SbbAlertGroupElement_base {
     /** Emits when `sbb-alert-group` becomes empty. */
     private _empty;
     private _abort;
-    private _removeAlert;
     connectedCallback(): void;
+    private _alertClosed;
     private _slotChanged;
     protected render(): TemplateResult;
 }

package/alert/alert-group/alert-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"alert-group.d.ts","sourceRoot":"","sources":["../../../../src/elements/alert/alert-group/alert-group.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAW,MAAM,KAAK,CAAC;AAO1C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;;AAKpD;;;;;;;GAOG;AACH,qBACa,oBAAqB,SAAQ,yBAA6B;IACrE,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;;MAGlB;IAEX;;;;;OAKG;IAEa,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAY;IAE7D,gFAAgF;IACzB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAEnF,wGAAwG;IAEjG,uBAAuB,EAAE,aAAa,CAAO;IAEpD,kDAAkD;IACzC,OAAO,CAAC,UAAU,CAAC,CAAU;IAEtC,gDAAgD;IAChD,OAAO,CAAC,gBAAgB,CAGtB;IAEF,kDAAkD;IAClD,OAAO,CAAC,MAAM,CAAiF;IAE/F,OAAO,CAAC,MAAM,CAAyC;IAEvD,OAAO,CAAC,YAAY;IAoBJ,iBAAiB,IAAI,IAAI;IAQzC,OAAO,CAAC,YAAY;cAaD,MAAM,IAAI,cAAc;CAe5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,iBAAiB,EAAE,oBAAoB,CAAC;KACzC;CACF"}
+{"version":3,"file":"alert-group.d.ts","sourceRoot":"","sources":["../../../../src/elements/alert/alert-group/alert-group.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAW,MAAM,KAAK,CAAC;AAO1C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;;AAKpD;;;;;;;GAOG;AACH,qBACa,oBAAqB,SAAQ,yBAA6B;IACrE,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;;MAGlB;IAEX;;;;;OAKG;IAEa,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAY;IAE7D,gFAAgF;IACzB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAEnF,wGAAwG;IAEjG,uBAAuB,EAAE,aAAa,CAAO;IAEpD,kDAAkD;IACzC,OAAO,CAAC,UAAU,CAAC,CAAU;IAEtC,gDAAgD;IAChD,OAAO,CAAC,gBAAgB,CAGtB;IAEF,kDAAkD;IAClD,OAAO,CAAC,MAAM,CAAiF;IAE/F,OAAO,CAAC,MAAM,CAAyC;IAEvC,iBAAiB,IAAI,IAAI;IAezC,OAAO,CAAC,YAAY;IAkBpB,OAAO,CAAC,YAAY;cAaD,MAAM,IAAI,cAAc;CAe5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,iBAAiB,EAAE,oBAAoB,CAAC;KACzC;CACF"}

package/alert/alert-group.js

@@ -1,37 +1,42 @@
-import { css as h, LitElement as m, nothing as u } from "lit";
-import { property as b, state as f, customElement as v } from "lit/decorators.js";
-import { html as c, unsafeStatic as p } from "lit/static-html.js";
-import { SbbConnectedAbortController as g } from "../core/controllers.js";
-import { EventEmitter as d } from "../core/eventing.js";
-import { SbbHydrationMixin as _ } from "../core/mixins.js";
-import { SbbAlertElement as y } from "./alert.js";
-const A = h`*,:before,:after{box-sizing:border-box}:host{--sbb-alert-group-gap: var(--sbb-spacing-fixed-3x);--sbb-alert-group-border-radius: var(--sbb-border-radius-4x);display:block}.sbb-alert-group{display:flex;flex-direction:column;gap:var(--sbb-alert-group-gap)}:host(:focus-visible:not([data-empty])){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);border-radius:var(--sbb-alert-group-border-radius)}.sbb-alert-group__title{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`;
-var x = Object.defineProperty, E = Object.getOwnPropertyDescriptor, l = (e, t, i, r) => {
-  for (var o = r > 1 ? void 0 : r ? E(t, i) : t, a = e.length - 1, n; a >= 0; a--)
-    (n = e[a]) && (o = (r ? n(t, i, o) : n(o)) || o);
-  return r && o && x(t, i, o), o;
+import { css as u, LitElement as m, nothing as f } from "lit";
+import { property as b, state as g, customElement as v } from "lit/decorators.js";
+import { html as c, unsafeStatic as d } from "lit/static-html.js";
+import { SbbConnectedAbortController as _ } from "../core/controllers.js";
+import { EventEmitter as p } from "../core/eventing.js";
+import { SbbHydrationMixin as y } from "../core/mixins.js";
+import { SbbAlertElement as h } from "./alert.js";
+const A = u`*,:before,:after{box-sizing:border-box}:host{--sbb-alert-group-gap: var(--sbb-spacing-fixed-3x);--sbb-alert-group-border-radius: var(--sbb-border-radius-4x);display:block}.sbb-alert-group{display:flex;flex-direction:column;gap:var(--sbb-alert-group-gap)}:host(:focus-visible:not([data-empty])){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);border-radius:var(--sbb-alert-group-border-radius)}.sbb-alert-group__title{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`;
+var x = Object.defineProperty, E = Object.getOwnPropertyDescriptor, l = (e, t, i, o) => {
+  for (var r = o > 1 ? void 0 : o ? E(t, i) : t, a = e.length - 1, n; a >= 0; a--)
+    (n = e[a]) && (r = (o ? n(t, i, r) : n(r)) || r);
+  return o && r && x(t, i, r), r;
 };
-let s = class extends _(m) {
+let s = class extends y(m) {
   constructor() {
-    super(...arguments), this.role = "status", this.accessibilityTitleLevel = "2", this._didDismissAlert = new d(
+    super(...arguments), this.role = "status", this.accessibilityTitleLevel = "2", this._didDismissAlert = new p(
       this,
       s.events.didDismissAlert
-    ), this._empty = new d(this, s.events.empty), this._abort = new g(this);
-  }
-  _removeAlert(e) {
-    var r;
-    const t = e.target, i = document.activeElement === t;
-    (r = t.parentNode) == null || r.removeChild(t), this._didDismissAlert.emit(t), i && (this.tabIndex = 0, this.focus(), this.addEventListener("blur", () => this.removeAttribute("tabindex"), {
-      once: !0
-    }));
+    ), this._empty = new p(this, s.events.empty), this._abort = new _(this);
   }
   connectedCallback() {
     super.connectedCallback();
     const e = this._abort.signal;
-    this.addEventListener(y.events.dismissalRequested, (t) => this._removeAlert(t), {
+    this.addEventListener(
+      h.events.dismissalRequested,
+      (t) => t.target.close(),
+      {
+        signal: e
+      }
+    ), this.addEventListener(h.events.didClose, (t) => this._alertClosed(t), {
       signal: e
     });
   }
+  _alertClosed(e) {
+    const t = e.target, i = document.activeElement === t;
+    this._didDismissAlert.emit(t), i && (this.tabIndex = 0, this.focus(), this.addEventListener("blur", () => this.removeAttribute("tabindex"), {
+      once: !0
+    }));
+  }
   _slotChanged(e) {
     const t = this._hasAlerts;
     this._hasAlerts = e.target.assignedElements().filter((i) => i instanceof Element && i.localName === "sbb-alert").length > 0, !this._hasAlerts && t && this._empty.emit(), this.toggleAttribute("data-empty", !this._hasAlerts);
@@ -40,9 +45,9 @@ let s = class extends _(m) {
     const e = `h${this.accessibilityTitleLevel}`;
     return c`
       <div class="sbb-alert-group">
-        ${this._hasAlerts ? c`<${p(e)} class="sbb-alert-group__title">
+        ${this._hasAlerts ? c`<${d(e)} class="sbb-alert-group__title">
               <slot name="accessibility-title">${this.accessibilityTitle}</slot>
-            </${p(e)}>` : u}
+            </${d(e)}>` : f}
         <slot @slotchange=${(t) => this._slotChanged(t)}></slot>
       </div>
     `;
@@ -63,7 +68,7 @@ l([
   b({ attribute: "accessibility-title-level" })
 ], s.prototype, "accessibilityTitleLevel", 2);
 l([
-  f()
+  g()
 ], s.prototype, "_hasAlerts", 2);
 s = l([
   v("sbb-alert-group")

package/alert/alert.js

@@ -1,49 +1,55 @@
-import { css as m, LitElement as v, html as d, nothing as r } from "lit";
-import { property as i, customElement as h } from "lit/decorators.js";
-import { SbbLanguageController as u } from "../core/controllers.js";
-import { EventEmitter as c } from "../core/eventing.js";
-import { i18nFindOutMore as g, i18nCloseAlert as _ } from "../core/i18n.js";
-import { SbbIconNameMixin as f } from "../icon.js";
+import { css as m, html as p, nothing as n } from "lit";
+import { property as i, customElement as c } from "lit/decorators.js";
+import { SbbOpenCloseBaseElement as g } from "../core/base-elements.js";
+import { SbbLanguageController as h } from "../core/controllers.js";
+import { EventEmitter as u } from "../core/eventing.js";
+import { i18nFindOutMore as v, i18nCloseAlert as f } from "../core/i18n.js";
+import { SbbIconNameMixin as _ } from "../icon.js";
 import "../button/transparent-button.js";
 import "../divider.js";
 import "../link.js";
 import "../title.js";
-const y = m`*,:before,:after{box-sizing:border-box}:host{--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) );display:block}@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([animation=none]){--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([data-state=opened]) .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:ease-in;animation-delay:0s,var(--sbb-alert-animation-duration)}.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}}`;
-var w = Object.defineProperty, x = Object.getOwnPropertyDescriptor, e = (s, n, l, o) => {
-  for (var a = o > 1 ? void 0 : o ? x(n, l) : n, b = s.length - 1, p; b >= 0; b--)
-    (p = s[b]) && (a = (o ? p(n, l, a) : p(a)) || a);
-  return o && a && w(n, l, a), a;
+const y = m`*,:before,:after{box-sizing:border-box}:host{--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;display:block}@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}}`;
+var w = Object.defineProperty, x = Object.getOwnPropertyDescriptor, e = (s, r, l, o) => {
+  for (var a = o > 1 ? void 0 : o ? x(r, l) : r, b = s.length - 1, d; b >= 0; b--)
+    (d = s[b]) && (a = (o ? d(r, l, a) : d(a)) || a);
+  return o && a && w(r, l, a), a;
 };
-let t = class extends f(v) {
+let t = class extends _(g) {
   constructor() {
-    super(...arguments), this.readonly = !1, this.size = "m", this.iconName = "info", this.titleLevel = "3", this.animation = "open", this._willOpen = new c(this, t.events.willOpen), this._didOpen = new c(this, t.events.didOpen), this._dismissalRequested = new c(
+    super(...arguments), this.readonly = !1, this.size = "m", this.iconName = "info", this.titleLevel = "3", this.animation = "all", this._dismissalRequested = new u(
       this,
       t.events.dismissalRequested
-    ), this._language = new u(this);
-  }
-  /** The state of the alert. */
-  get _state() {
-    return this.getAttribute("data-state") ?? "closed";
-  }
-  set _state(s) {
-    this.setAttribute("data-state", s);
+    ), this._language = new h(this);
   }
   async firstUpdated(s) {
-    super.firstUpdated(s), this._open();
+    super.firstUpdated(s), this.open();
   }
-  /** Requests dismissal of the alert. */
+  /** Requests dismissal of the alert.
+   * @deprecated in favour of 'willClose' and 'didClose' events
+   */
   requestDismissal() {
     this._dismissalRequested.emit();
   }
   /** Open the alert. */
-  _open() {
-    this._state = "opening", this._willOpen.emit();
+  open() {
+    this.willOpen.emit(), this.state = "opening";
+  }
+  /** Close the alert. */
+  close() {
+    this.willClose.emit() && (this.state = "closing");
   }
   _onAnimationEnd(s) {
-    this._state === "opening" && s.animationName === "open-opacity" && (this._state = "opened", this._didOpen.emit());
+    this.state === "opening" && s.animationName === "open-opacity" ? this._handleOpening() : this.state === "closing" && s.animationName === "close" && this._handleClosing();
+  }
+  _handleOpening() {
+    this.state = "opened", this.didOpen.emit();
+  }
+  _handleClosing() {
+    this.state = "closed", this.didClose.emit(), setTimeout(() => this.remove());
   }
   render() {
-    return d`
+    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">
@@ -61,17 +67,17 @@ let t = class extends f(v) {
               <p class="sbb-alert__content-slot">
                 <slot></slot>
               </p>
-              ${this.href ? d` <sbb-link
-                    accessibility-label=${this.accessibilityLabel ?? r}
-                    href=${this.href ?? r}
-                    target=${this.target ?? r}
-                    rel=${this.rel ?? r}
+              ${this.href ? p` <sbb-link
+                    accessibility-label=${this.accessibilityLabel ?? n}
+                    href=${this.href ?? n}
+                    target=${this.target ?? n}
+                    rel=${this.rel ?? n}
                     negative
                   >
-                    ${this.linkContent ? this.linkContent : g[this._language.current]}
-                  </sbb-link>` : r}
+                    ${this.linkContent ? this.linkContent : v[this._language.current]}
+                  </sbb-link>` : n}
             </span>
-            ${this.readonly ? r : d`<span class="sbb-alert__close-button-wrapper">
+            ${this.readonly ? n : p`<span class="sbb-alert__close-button-wrapper">
                   <sbb-divider
                     orientation="vertical"
                     negative
@@ -82,7 +88,7 @@ let t = class extends f(v) {
                     size=${this.size === "l" ? "m" : this.size}
                     icon-name="cross-small"
                     @click=${() => this.requestDismissal()}
-                    aria-label=${_[this._language.current]}
+                    aria-label=${f[this._language.current]}
                     class="sbb-alert__close-button"
                   ></sbb-transparent-button>
                 </span>`}
@@ -96,6 +102,8 @@ t.styles = y;
 t.events = {
   willOpen: "willOpen",
   didOpen: "didOpen",
+  willClose: "willClose",
+  didClose: "didClose",
   dismissalRequested: "dismissalRequested"
 };
 e([
@@ -132,7 +140,7 @@ e([
   i({ reflect: !0 })
 ], t.prototype, "animation", 2);
 t = e([
-  h("sbb-alert")
+  c("sbb-alert")
 ], t);
 export {
   t as SbbAlertElement

package/clock/clock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"clock.d.ts","sourceRoot":"","sources":["../../../src/elements/clock/clock.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAkB,UAAU,EAAE,MAAM,KAAK,CAAC;AAIjD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AA2CrD;;GAEG;AACH,qBACa,eAAgB,SAAQ,UAAU;IAC7C,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD;;;OAGG;IACgB,GAAG,EAAE,OAAO,GAAG,IAAI,CAAQ;IAE9C,kCAAkC;IAClC,OAAO,CAAC,eAAe,CAAe;IAEtC,oCAAoC;IACpC,OAAO,CAAC,iBAAiB,CAAe;IAExC,oCAAoC;IACpC,OAAO,CAAC,iBAAiB,CAAe;IAExC,wCAAwC;IACxC,OAAO,CAAC,MAAM,CAAU;IAExB,0CAA0C;IAC1C,OAAO,CAAC,QAAQ,CAAU;IAE1B,0CAA0C;IAC1C,OAAO,CAAC,QAAQ,CAAU;IAE1B,wCAAwC;IACxC,OAAO,CAAC,gBAAgB,CAAqC;IAE7D,0CAA0C;IAC1C,OAAO,CAAC,kBAAkB,CAAuC;IAEjE,0CAA0C;IAC1C,OAAO,CAAC,aAAa,CAAC,CAAiC;cAE9B,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC;cAQlE,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC;IAS7E,oBAAoB,IAAI,IAAI;IAK5C,OAAO,CAAC,2BAA2B,CAMjC;YAEY,sBAAsB;IAUpC,6FAA6F;YAC/E,WAAW;IAqBzB,sDAAsD;YACxC,UAAU;IAcxB,uEAAuE;IACvE,OAAO,CAAC,yBAAyB;IA4CjC,yGAAyG;IACzG,OAAO,CAAC,kBAAkB;IAW1B,sDAAsD;IACtD,OAAO,CAAC,eAAe;IAOvB,6CAA6C;IAC7C,OAAO,CAAC,cAAc;IAYtB,+CAA+C;IAC/C,OAAO,CAAC,gBAAgB;IAaxB,OAAO,CAAC,sBAAsB;IAK9B;;;;OAIG;IACH,OAAO,CAAC,0BAA0B;IAUlC,OAAO,CAAC,qBAAqB;IAO7B,OAAO,CAAC,2BAA2B;IAMnC,OAAO,CAAC,6BAA6B;cAOlB,MAAM,IAAI,cAAc;CA4B5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,WAAW,EAAE,eAAe,CAAC;KAC9B;CACF"}
+{"version":3,"file":"clock.d.ts","sourceRoot":"","sources":["../../../src/elements/clock/clock.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAkB,UAAU,EAAE,MAAM,KAAK,CAAC;AAIjD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AA2CrD;;GAEG;AACH,qBACa,eAAgB,SAAQ,UAAU;IAC7C,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD;;;OAGG;IACgB,GAAG,EAAE,OAAO,GAAG,IAAI,CAAQ;IAE9C,kCAAkC;IAClC,OAAO,CAAC,eAAe,CAAe;IAEtC,oCAAoC;IACpC,OAAO,CAAC,iBAAiB,CAAe;IAExC,oCAAoC;IACpC,OAAO,CAAC,iBAAiB,CAAe;IAExC,wCAAwC;IACxC,OAAO,CAAC,MAAM,CAAU;IAExB,0CAA0C;IAC1C,OAAO,CAAC,QAAQ,CAAU;IAE1B,0CAA0C;IAC1C,OAAO,CAAC,QAAQ,CAAU;IAE1B,wCAAwC;IACxC,OAAO,CAAC,gBAAgB,CAAqC;IAE7D,0CAA0C;IAC1C,OAAO,CAAC,kBAAkB,CAAuC;IAEjE,0CAA0C;IAC1C,OAAO,CAAC,aAAa,CAAC,CAAiC;cAE9B,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC;cAQlE,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC;IAS7E,oBAAoB,IAAI,IAAI;IAK5C,OAAO,CAAC,2BAA2B,CAMjC;YAEY,sBAAsB;IAUpC,6FAA6F;YAC/E,WAAW;IAsBzB,sDAAsD;YACxC,UAAU;IAcxB,uEAAuE;IACvE,OAAO,CAAC,yBAAyB;IA4CjC,yGAAyG;IACzG,OAAO,CAAC,kBAAkB;IAW1B,sDAAsD;IACtD,OAAO,CAAC,eAAe;IAOvB,6CAA6C;IAC7C,OAAO,CAAC,cAAc;IAYtB,+CAA+C;IAC/C,OAAO,CAAC,gBAAgB;IAaxB,OAAO,CAAC,sBAAsB;IAK9B;;;;OAIG;IACH,OAAO,CAAC,0BAA0B;IAUlC,OAAO,CAAC,qBAAqB;IAO7B,OAAO,CAAC,2BAA2B;IAMnC,OAAO,CAAC,6BAA6B;cAOlB,MAAM,IAAI,cAAc;CA4B5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,WAAW,EAAE,eAAe,CAAC;KAC9B;CACF"}

package/clock.js

@@ -6,10 +6,10 @@ const z = `<svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0
 `, w = `<svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 105"><path d="M55.1,64.5h-5.2l0.8-58h3.6L55.1,64.5z"/></svg>
 `, L = `<svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 105"><path d="M57.8,21.3c0-2.9-2.4-5.2-5.2-5.2s-5.3,2.3-5.3,5.2c0,2.7,2,4.8,4.5,5.2V69h1.5V26.5C55.8,26.2,57.8,24,57.8,21.3z"/></svg>
 `, C = p`*,:before,:after{box-sizing:border-box}:host{--sbb-clock-hours-animation-start-angle: 0deg;--sbb-clock-seconds-animation-start-angle: 0deg;--sbb-clock-hours-animation-duration: 0s;--sbb-clock-seconds-animation-duration: 0s;--sbb-clock-animation-play-state: paused;--sbb-clock-seconds-hand-color: var(--sbb-color-red);display:block}.sbb-clock{position:relative;width:100%;height:100%;aspect-ratio:1/1;overflow:hidden;contain:content}.sbb-clock__face,.sbb-clock__hand-hours,.sbb-clock__hand-minutes,.sbb-clock__hand-seconds{position:absolute;top:0;right:0;bottom:0;left:0;transform-origin:center center;transform:rotate(0);transform-style:preserve-3d;backface-visibility:hidden}.sbb-clock__hand-minutes{transition:transform .2s cubic-bezier(.4,2.08,.55,.44)}@supports not (aspect-ratio: 1/1){.sbb-clock__hand-minutes{transform-origin:50% 49.625%}}.sbb-clock__hand-hours{animation-name:rotate;animation-duration:43200s;animation-iteration-count:infinite;animation-timing-function:linear;animation-play-state:var(--sbb-clock-animation-play-state)}.sbb-clock__hand-hours--initial-hour{animation-name:hand-hours-animation-initial-hour;animation-duration:var(--sbb-clock-hours-animation-duration);animation-play-state:var(--sbb-clock-animation-play-state);animation-iteration-count:1}.sbb-clock__hand-minutes--no-transition{transition:none}.sbb-clock__hand-seconds{animation-name:hand-seconds-animation;animation-duration:60s;animation-timing-function:linear;animation-play-state:var(--sbb-clock-animation-play-state);animation-iteration-count:infinite;fill:var(--sbb-clock-seconds-hand-color)}.sbb-clock__hand-seconds--initial-minute{animation-name:hand-seconds-animation-initial-minute;animation-duration:var(--sbb-clock-seconds-animation-duration);animation-play-state:var(--sbb-clock-animation-play-state);animation-iteration-count:1}:host(:not([data-initialized])) :is(.sbb-clock__hand-hours,.sbb-clock__hand-minutes,.sbb-clock__hand-seconds){display:none}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes hand-hours-animation-initial-hour{0%{transform:rotate(var(--sbb-clock-hours-animation-start-angle))}to{transform:rotate(360deg)}}@keyframes hand-seconds-animation{0%{transform:rotate(0)}97.5%,to{transform:rotate(360deg)}}@keyframes hand-seconds-animation-initial-minute{0%{transform:rotate(var(--sbb-clock-seconds-animation-start-angle))}97.5%,to{transform:rotate(360deg)}}`;
-var E = Object.defineProperty, A = Object.getOwnPropertyDescriptor, k = (t, n, s, i) => {
-  for (var o = i > 1 ? void 0 : i ? A(n, s) : n, e = t.length - 1, a; e >= 0; e--)
-    (a = t[e]) && (o = (i ? a(n, s, o) : a(o)) || o);
-  return i && o && E(n, s, o), o;
+var E = Object.defineProperty, A = Object.getOwnPropertyDescriptor, k = (t, n, o, s) => {
+  for (var i = s > 1 ? void 0 : s ? A(n, o) : n, e = t.length - 1, a; e >= 0; e--)
+    (a = t[e]) && (i = (s ? a(n, o, i) : a(i)) || i);
+  return s && i && E(n, o, i), i;
 };
 const O = 12, P = 60, u = 60, T = 50, b = 360, v = 30, N = 6, F = 360 / 58.5, I = 60, x = 3600, M = {
   once: !0,
@@ -45,35 +45,35 @@ let c = class extends H {
       this._moveMinutesHandFn,
       M
     ), await new Promise(
-      () => setTimeout(() => {
+      (o) => setTimeout(() => {
         var s;
-        this._setHandsStartingPosition(), (s = this.style) == null || s.setProperty("--sbb-clock-animation-play-state", "running");
+        this._setHandsStartingPosition(), (s = this.style) == null || s.setProperty("--sbb-clock-animation-play-state", "running"), o();
       }, T)
     );
   }
   /** Stops the clock by removing all the animations. */
   async _stopClock() {
-    var t, n, s, i;
-    clearInterval(this._handMovement), this._removeSecondsAnimationStyles(), this._removeHoursAnimationStyles(), (t = this._clockHandHours) == null || t.removeEventListener("animationend", this._moveHoursHandFn), (n = this._clockHandSeconds) == null || n.removeEventListener("animationend", this._moveMinutesHandFn), (s = this._clockHandMinutes) == null || s.classList.add("sbb-clock__hand-minutes--no-transition"), (i = this.style) == null || i.setProperty("--sbb-clock-animation-play-state", "paused");
+    var t, n, o, s;
+    clearInterval(this._handMovement), this._removeSecondsAnimationStyles(), this._removeHoursAnimationStyles(), (t = this._clockHandHours) == null || t.removeEventListener("animationend", this._moveHoursHandFn), (n = this._clockHandSeconds) == null || n.removeEventListener("animationend", this._moveMinutesHandFn), (o = this._clockHandMinutes) == null || o.classList.add("sbb-clock__hand-minutes--no-transition"), (s = this.style) == null || s.setProperty("--sbb-clock-animation-play-state", "paused");
   }
   /** Set the starting position for the three hands on the clock face. */
   _setHandsStartingPosition() {
     var e, a, l, d, h, m;
     this._assignCurrentTime();
-    const t = u - this._seconds, n = P - this._minutes, s = O - this._hours;
-    let i = 0, o = 0;
-    t > 0 && (i += t, o = 1), n > 0 && (i += (n - o) * I, o = 1), s > 0 && (i += (s - o) * x), (e = this.style) == null || e.setProperty(
+    const t = u - this._seconds, n = P - this._minutes, o = O - this._hours;
+    let s = 0, i = 0;
+    t > 0 && (s += t, i = 1), n > 0 && (s += (n - i) * I, i = 1), o > 0 && (s += (o - i) * x), (e = this.style) == null || e.setProperty(
       "--sbb-clock-hours-animation-start-angle",
       `${Math.ceil(this._hours * v + this._minutes / 2)}deg`
-    ), (a = this.style) == null || a.setProperty("--sbb-clock-hours-animation-duration", `${i}s`), (l = this.style) == null || l.setProperty(
+    ), (a = this.style) == null || a.setProperty("--sbb-clock-hours-animation-duration", `${s}s`), (l = this.style) == null || l.setProperty(
       "--sbb-clock-seconds-animation-start-angle",
       `${Math.ceil(this._seconds * F)}deg`
     ), (d = this.style) == null || d.setProperty("--sbb-clock-seconds-animation-duration", `${t}s`), this._setMinutesHand(), (h = this._clockHandSeconds) == null || h.classList.add("sbb-clock__hand-seconds--initial-minute"), (m = this._clockHandHours) == null || m.classList.add("sbb-clock__hand-hours--initial-hour"), this.toggleAttribute("data-initialized", !0);
   }
   /** Given the current date, calculates the hh/mm/ss values and the hh/mm/ss left to the next midnight. */
   _assignCurrentTime() {
-    const t = this.now ? null : /* @__PURE__ */ new Date(), [n, s, i] = t ? [t.getHours(), t.getMinutes(), t.getSeconds()] : this.now.split(":").map((o) => +o);
-    this._hours = n % 12, this._minutes = s, this._seconds = i;
+    const t = this.now ? null : /* @__PURE__ */ new Date(), [n, o, s] = t ? [t.getHours(), t.getMinutes(), t.getSeconds()] : this.now.split(":").map((i) => +i);
+    this._hours = n % 12, this._minutes = o, this._seconds = s;
   }
   /** Set the starting position for the minutes hand. */
   _setMinutesHand() {

package/core/testing/wait-for-event.d.ts

@@ -0,0 +1,2 @@
+export declare function waitForEvent(element: HTMLElement, eventName: string, timeout?: number): Promise<void>;
+//# sourceMappingURL=wait-for-event.d.ts.map

package/core/testing/wait-for-event.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"wait-for-event.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/testing/wait-for-event.ts"],"names":[],"mappings":"AAAA,wBAAgB,YAAY,CAC1B,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,MAAM,EACjB,OAAO,SAAO,GACb,OAAO,CAAC,IAAI,CAAC,CAcf"}

package/core/testing.d.ts

@@ -2,6 +2,7 @@ export * from './testing/event-spy.js';
 export * from './testing/mocha-extensions.js';
 export * from './testing/scroll.js';
 export * from './testing/wait-for-condition.js';
+export * from './testing/wait-for-event.js';
 export * from './testing/wait-for-image-ready.js';
 export * from './testing/wait-for-render.js';
 //# sourceMappingURL=testing.d.ts.map

package/core/testing.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"testing.d.ts","sourceRoot":"","sources":["../../../src/elements/core/testing.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,qBAAqB,CAAC;AACpC,cAAc,iCAAiC,CAAC;AAChD,cAAc,mCAAmC,CAAC;AAClD,cAAc,8BAA8B,CAAC"}
+{"version":3,"file":"testing.d.ts","sourceRoot":"","sources":["../../../src/elements/core/testing.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,qBAAqB,CAAC;AACpC,cAAc,iCAAiC,CAAC;AAChD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,mCAAmC,CAAC;AAClD,cAAc,8BAA8B,CAAC"}

package/core/testing.js

@@ -1,6 +1,6 @@
 class u {
-  constructor(t, n = null) {
-    this._event = t, this._target = n, this._count = 0, this._events = [], this._target || (this._target = document), this._listenForEvent();
+  constructor(e, n = null) {
+    this._event = e, this._target = n, this._count = 0, this._events = [], this._target || (this._target = document), this._listenForEvent();
   }
   get count() {
     return this._count;
@@ -15,54 +15,66 @@ class u {
     return this.events.length ? this.events[this.events.length - 1] : null;
   }
   _listenForEvent() {
-    var t;
-    (t = this._target) == null || t.addEventListener(this._event, (n) => {
+    var e;
+    (e = this._target) == null || e.addEventListener(this._event, (n) => {
       this._events.push(n), this._count++;
     });
   }
 }
-const m = (e, t, n) => {
-  if (e)
-    return Mocha.describe(t, n);
-}, h = (e, t, n) => {
-  if (e)
-    return Mocha.test(t, n);
+const m = (t, e, n) => {
+  if (t)
+    return Mocha.describe(e, n);
+}, h = (t, e, n) => {
+  if (t)
+    return Mocha.test(e, n);
 };
-function d(e) {
-  window.scrollTo(e), document.dispatchEvent(new Event("scroll"));
+function d(t) {
+  window.scrollTo(t), document.dispatchEvent(new Event("scroll"));
 }
-async function v(e, t = 30, n = 2 * 1e3) {
+async function v(t, e = 30, n = 2 * 1e3) {
   const r = /* @__PURE__ */ new Date();
-  let i = 0;
-  function o() {
-    return i++, e();
+  let o = 0;
+  function i() {
+    return o++, t();
   }
-  for (; !await o() && r.getTime() + n >= (/* @__PURE__ */ new Date()).getTime(); )
-    await new Promise((s) => setTimeout(s, t));
+  for (; !await i() && r.getTime() + n >= (/* @__PURE__ */ new Date()).getTime(); )
+    await new Promise((s) => setTimeout(s, e));
   return r.getTime() + n < (/* @__PURE__ */ new Date()).getTime() ? Promise.reject(
-    `waitForCondition timeout: ${e.toString()}, attempts: ${i}, start: ${r.getTime()}, end: ${(/* @__PURE__ */ new Date()).getTime()}`
+    `waitForCondition timeout: ${t.toString()}, attempts: ${o}, start: ${r.getTime()}, end: ${(/* @__PURE__ */ new Date()).getTime()}`
   ) : Promise.resolve(!0);
 }
-async function g(e, t = 2 * 1e3) {
-  e.complete || await new Promise((n, r) => {
-    const i = setTimeout(() => r("image loading timeout"), t);
-    e.addEventListener("load", () => {
-      clearTimeout(i), n();
-    }), e.addEventListener("error", () => {
-      clearTimeout(i), r("image error");
+function g(t, e, n = 1e3) {
+  return new Promise((r, o) => {
+    const i = AbortSignal.timeout(n), s = () => o(`Timeout of ${n} reached`);
+    i.addEventListener("abort", s), t.addEventListener(
+      e,
+      () => {
+        i.removeEventListener("abort", s), r();
+      },
+      { passive: !0, signal: i }
+    );
+  });
+}
+async function w(t, e = 2 * 1e3) {
+  t.complete || await new Promise((n, r) => {
+    const o = setTimeout(() => r("image loading timeout"), e);
+    t.addEventListener("load", () => {
+      clearTimeout(o), n();
+    }), t.addEventListener("error", () => {
+      clearTimeout(o), r("image error");
     });
   });
 }
-const a = (e) => !!e.updateComplete, c = Promise.resolve(), l = async (e) => {
-  var r, i;
-  const t = await e;
-  (i = (r = t.parentElement ?? t).querySelectorAll) == null || i.call(r, "[defer-hydration]").forEach((o) => o.removeAttribute("defer-hydration"));
-  const n = [t, ...t.querySelectorAll("*")].filter(a).map((o) => [
-    o.updateComplete,
-    o.hydrationComplete ?? c,
-    l(o.renderRoot)
+const a = (t) => !!t.updateComplete, c = Promise.resolve(), l = async (t) => {
+  var r, o;
+  const e = await t;
+  (o = (r = e.parentElement ?? e).querySelectorAll) == null || o.call(r, "[defer-hydration]").forEach((i) => i.removeAttribute("defer-hydration"));
+  const n = [e, ...e.querySelectorAll("*")].filter(a).map((i) => [
+    i.updateComplete,
+    i.hydrationComplete ?? c,
+    l(i.renderRoot)
   ]).flat(1 / 0);
-  return await Promise.all(n), t;
+  return await Promise.all(n), e;
 };
 export {
   u as EventSpy,
@@ -71,6 +83,7 @@ export {
   d as mockScrollTo,
   h as testIf,
   v as waitForCondition,
-  g as waitForImageReady,
+  g as waitForEvent,
+  w as waitForImageReady,
   l as waitForLitRender
 };