@sbb-esta/lyne-elements-dev 4.7.0-dev.1773388991 → 4.7.0-dev.1773396165

package/core/overlay/overlay-option-panel.js

@@ -1,16 +1,17 @@
-import { getElementPosition as e } from "./position.js";
-import { ɵstateController as t } from "../mixins.js";
-//#region src/elements/core/overlay/overlay-option-panel.ts
-function n(n, r, i, a, o, s = "auto") {
-	if (!n || !r) return;
-	o.style.setProperty("--sbb-options-panel-width", `${r.offsetWidth}px`), o.style.setProperty("--sbb-options-panel-origin-height", `${r.offsetHeight}px`);
-	let c = e(i, r, a, {
-		forceBelow: s === "below",
-		forceAbove: s === "above"
-	});
-	o.style.setProperty("--sbb-options-panel-position-x", `${c.left}px`), o.style.setProperty("--sbb-options-panel-position-y", `${c.top}px`), o.style.setProperty("--sbb-options-panel-max-height-calculated", c.maxHeight);
-	let l = t(o);
-	c.alignment.vertical === "above" ? (l.add("options-panel-position-above"), l.delete("options-panel-position-below")) : (l.add("options-panel-position-below"), l.delete("options-panel-position-above")), r.setAttribute("data-options-panel-position", c.alignment.vertical);
+import { ɵstateController as l } from "../mixins.js";
+import { getElementPosition as r } from "./position.js";
+function y(i, t, a, n, o, p = "auto") {
+  if (!i || !t)
+    return;
+  o.style.setProperty("--sbb-options-panel-width", `${t.offsetWidth}px`), o.style.setProperty("--sbb-options-panel-origin-height", `${t.offsetHeight}px`);
+  const e = r(a, t, n, {
+    forceBelow: p === "below",
+    forceAbove: p === "above"
+  });
+  o.style.setProperty("--sbb-options-panel-position-x", `${e.left}px`), o.style.setProperty("--sbb-options-panel-position-y", `${e.top}px`), o.style.setProperty("--sbb-options-panel-max-height-calculated", e.maxHeight);
+  const s = l(o);
+  e.alignment.vertical === "above" ? (s.add("options-panel-position-above"), s.delete("options-panel-position-below")) : (s.add("options-panel-position-below"), s.delete("options-panel-position-above")), t.setAttribute("data-options-panel-position", e.alignment.vertical);
 }
-//#endregion
-export { n as setOverlayPosition };
+export {
+  y as setOverlayPosition
+};

package/core/overlay/overlay-outside-pointer-event-listener.js

@@ -1,34 +1,37 @@
-import { containsPierceShadowDom as e, isAndroid as t, isIOS as n } from "../dom.js";
-//#region src/elements/core/overlay/overlay-outside-pointer-event-listener.ts
-var r = class {
-	constructor() {
-		this._overlays = /* @__PURE__ */ new Set(), this._pointerDownListener = (e) => {
-			this._pointerDownEventTarget = e.composedPath()[0];
-		}, this._clickListener = (t) => {
-			let n = t.composedPath()[0], r = t.type === "click" && this._pointerDownEventTarget ? this._pointerDownEventTarget : n;
-			this._pointerDownEventTarget = void 0;
-			for (let t of Array.from(this._overlays).reverse()) {
-				if (e(t, n) || e(t, r)) break;
-				t.dispatchEvent(new CustomEvent("overlayOutsidePointer"));
-			}
-		};
-	}
-	connect(e) {
-		this._overlays.size || (this._addGlobalEventListeners(), n && (this._cursorOriginalValue = document.body.style.cursor, document.body.style.cursor = "pointer")), this._overlays.add(e);
-	}
-	disconnect(e) {
-		this._overlays.delete(e), this._overlays.size || (this._abortController?.abort(), this._abortController = void 0, n && (document.body.style.cursor = this._cursorOriginalValue));
-	}
-	_addGlobalEventListeners() {
-		let e = document.body;
-		this._abortController = new AbortController();
-		let r = {
-			capture: !0,
-			passive: !0,
-			signal: this._abortController.signal
-		};
-		e.addEventListener("click", this._clickListener, r), !t && !n && (e.addEventListener("pointerdown", this._pointerDownListener, r), e.addEventListener("auxclick", this._clickListener, r), e.addEventListener("contextmenu", this._clickListener, r));
-	}
-}, i = new r();
-//#endregion
-export { r as SbbOverlayOutsidePointerEventListener, i as sbbOverlayOutsidePointerEventListener };
+import { containsPierceShadowDom as r, isIOS as i, isAndroid as n } from "../dom.js";
+class a {
+  constructor() {
+    this._overlays = /* @__PURE__ */ new Set(), this._pointerDownListener = (t) => {
+      this._pointerDownEventTarget = t.composedPath()[0];
+    }, this._clickListener = (t) => {
+      const e = t.composedPath()[0], s = t.type === "click" && this._pointerDownEventTarget ? this._pointerDownEventTarget : e;
+      this._pointerDownEventTarget = void 0;
+      for (const o of Array.from(this._overlays).reverse()) {
+        if (r(o, e) || r(o, s))
+          break;
+        o.dispatchEvent(new CustomEvent("overlayOutsidePointer"));
+      }
+    };
+  }
+  connect(t) {
+    this._overlays.size || (this._addGlobalEventListeners(), i && (this._cursorOriginalValue = document.body.style.cursor, document.body.style.cursor = "pointer")), this._overlays.add(t);
+  }
+  disconnect(t) {
+    this._overlays.delete(t), this._overlays.size || (this._abortController?.abort(), this._abortController = void 0, i && (document.body.style.cursor = this._cursorOriginalValue));
+  }
+  _addGlobalEventListeners() {
+    const t = document.body;
+    this._abortController = new AbortController();
+    const e = {
+      capture: !0,
+      passive: !0,
+      signal: this._abortController.signal
+    };
+    t.addEventListener("click", this._clickListener, e), !n && !i && (t.addEventListener("pointerdown", this._pointerDownListener, e), t.addEventListener("auxclick", this._clickListener, e), t.addEventListener("contextmenu", this._clickListener, e));
+  }
+}
+const d = new a();
+export {
+  a as SbbOverlayOutsidePointerEventListener,
+  d as sbbOverlayOutsidePointerEventListener
+};

package/core/overlay/overlay-trigger-attributes.js

@@ -1,15 +1,18 @@
-//#region src/elements/core/overlay/overlay-trigger-attributes.ts
-function e(e, t, n, r) {
-	e && (e.setAttribute("aria-haspopup", t), e.setAttribute("aria-controls", n), e.setAttribute("aria-expanded", `${r === "opening" || r === "opened"}`));
+function u(t, e, a, o) {
+  t && (t.setAttribute("aria-haspopup", e), t.setAttribute("aria-controls", a), t.setAttribute("aria-expanded", `${o === "opening" || o === "opened"}`));
 }
-function t(e) {
-	e && (e.removeAttribute("aria-haspopup"), e.removeAttribute("aria-controls"), e.removeAttribute("aria-expanded"));
+function i(t) {
+  t && (t.removeAttribute("aria-haspopup"), t.removeAttribute("aria-controls"), t.removeAttribute("aria-expanded"));
 }
-function n(e, t, n, r = "listbox") {
-	e && (e.setAttribute("autocomplete", "off"), e.setAttribute("role", "combobox"), e.setAttribute("aria-autocomplete", "list"), e.setAttribute("aria-haspopup", r), e.setAttribute("aria-controls", t), e.setAttribute("aria-owns", t), e.setAttribute("aria-expanded", `${n}`));
+function r(t, e, a, o = "listbox") {
+  t && (t.setAttribute("autocomplete", "off"), t.setAttribute("role", "combobox"), t.setAttribute("aria-autocomplete", "list"), t.setAttribute("aria-haspopup", o), t.setAttribute("aria-controls", e), t.setAttribute("aria-owns", e), t.setAttribute("aria-expanded", `${a}`));
 }
-function r(e) {
-	e && (e.removeAttribute("autocomplete"), e.removeAttribute("role"), e.removeAttribute("aria-autocomplete"), e.removeAttribute("aria-haspopup"), e.removeAttribute("aria-controls"), e.removeAttribute("aria-owns"), e.removeAttribute("aria-expanded"));
+function b(t) {
+  t && (t.removeAttribute("autocomplete"), t.removeAttribute("role"), t.removeAttribute("aria-autocomplete"), t.removeAttribute("aria-haspopup"), t.removeAttribute("aria-controls"), t.removeAttribute("aria-owns"), t.removeAttribute("aria-expanded"));
 }
-//#endregion
-export { r as removeAriaComboBoxAttributes, t as removeAriaOverlayTriggerAttributes, n as setAriaComboBoxAttributes, e as setAriaOverlayTriggerAttributes };
+export {
+  b as removeAriaComboBoxAttributes,
+  i as removeAriaOverlayTriggerAttributes,
+  r as setAriaComboBoxAttributes,
+  u as setAriaOverlayTriggerAttributes
+};

package/core/overlay/overlay.js

@@ -1,7 +1,6 @@
-import { html as e } from "lit";
-//#region src/elements/core/overlay/overlay.ts
-function t() {
-	return e`
+import { html as i } from "lit";
+function s() {
+  return i`
     <div class="sbb-gap-fix-wrapper">
       <div class="sbb-gap-fix-corner" id="left"></div>
     </div>
@@ -10,5 +9,6 @@ function t() {
     </div>
   `;
 }
-//#endregion
-export { t as overlayGapFixCorners };
+export {
+  s as overlayGapFixCorners
+};

package/core/overlay/position.js

@@ -1,57 +1,53 @@
-//#region src/elements/core/overlay/position.ts
-function e(e) {
-	let t = window.getComputedStyle(e), n = t.display, r = parseInt(t.maxHeight, 10).toString();
-	if (n !== "none" && r !== "0") return {
-		scrollHeight: e.scrollHeight,
-		clientHeight: e.clientHeight,
-		offsetHeight: e.offsetHeight,
-		scrollWidth: e.scrollWidth,
-		clientWidth: e.clientWidth,
-		offsetWidth: e.offsetWidth
-	};
-	e.style.position = "absolute", e.style.visibility = "hidden", e.style.display = "block";
-	let i = e.scrollHeight, a = e.clientHeight, o = e.offsetHeight, s = e.scrollWidth, c = e.clientWidth, l = e.offsetWidth;
-	return e.style.display = "", e.style.position = "", e.style.visibility = "", {
-		scrollHeight: i,
-		clientHeight: a,
-		offsetHeight: o,
-		scrollWidth: s,
-		clientWidth: c,
-		offsetWidth: l
-	};
+function R(t) {
+  const o = window.getComputedStyle(t), c = o.display, s = parseInt(o.maxHeight, 10).toString();
+  if (c !== "none" && s !== "0")
+    return {
+      scrollHeight: t.scrollHeight,
+      clientHeight: t.clientHeight,
+      offsetHeight: t.offsetHeight,
+      scrollWidth: t.scrollWidth,
+      clientWidth: t.clientWidth,
+      offsetWidth: t.offsetWidth
+    };
+  t.style.position = "absolute", t.style.visibility = "hidden", t.style.display = "block";
+  const p = t.scrollHeight, n = t.clientHeight, g = t.offsetHeight, r = t.scrollWidth, e = t.clientWidth, i = t.offsetWidth;
+  return t.style.display = "", t.style.position = "", t.style.visibility = "", { scrollHeight: p, clientHeight: n, offsetHeight: g, scrollWidth: r, clientWidth: e, offsetWidth: i };
 }
-function t(e, t) {
-	if (!e || !t) return !1;
-	let n = e.getBoundingClientRect();
-	return n.top <= t.clientY && t.clientY <= n.top + n.height && n.left <= t.clientX && t.clientX <= n.left + n.width;
+function x(t, o) {
+  if (!t || !o)
+    return !1;
+  const c = t.getBoundingClientRect();
+  return c.top <= o.clientY && o.clientY <= c.top + c.height && c.left <= o.clientX && o.clientX <= c.left + c.width;
 }
-function n(t, n, r, i) {
-	let a = i?.verticalOffset || 0, o = i?.horizontalOffset || 0, s = i?.responsiveHeight || !1, c = n.getBoundingClientRect(), l = e(t), u = c.left, d = c.top, f = document.documentElement.clientWidth - (u + c.width), p = d - a, m = document.documentElement.clientHeight - (d + c.height + a), h = u, g = d + c.height + a, _ = l.offsetWidth - c.width, v = {
-		horizontal: "start",
-		vertical: "below"
-	}, y = `${m - a}px`;
-	i?.centered && u - 16 + c.width / 2 > l.offsetWidth / 2 && f - 16 > _ / 2 && (h -= _ /= 2, v.horizontal = "center"), f < _ && u > _ && (h -= _, v.horizontal = "end"), o && v.horizontal !== "center" && c.width / 2 < o && (h += o * (v.horizontal === "start" ? -1 : 1)), (u < _ && f < _ || document.documentElement.clientWidth < l.offsetWidth) && (h = document.documentElement.clientWidth / 2 - l.offsetWidth / 2);
-	let b = m - a < l.scrollHeight && p - a > (s ? l.clientHeight : l.scrollHeight) || p > m && m - a < l.clientHeight && !s;
-	!i?.forceBelow && (i?.forceAbove || b) && (g = p < l.scrollHeight ? g - c.height - p - a : d - l.clientHeight - a, y = `${p - a}px`, v.vertical = "above");
-	let x = r.getBoundingClientRect();
-	return x.left < 0 && (h -= x.left), x.top < 0 && (g -= x.top), {
-		top: g,
-		left: h,
-		maxHeight: y,
-		alignment: v
-	};
+function w(t, o, c, s) {
+  const n = s?.verticalOffset || 0, g = s?.horizontalOffset || 0, r = s?.responsiveHeight || !1, e = o.getBoundingClientRect(), i = R(t), f = e.left, H = e.top, W = document.documentElement.clientWidth - (f + e.width), d = H - n, u = document.documentElement.clientHeight - (H + e.height + n);
+  let h = f, m = H + e.height + n, l = i.offsetWidth - e.width;
+  const a = { horizontal: "start", vertical: "below" };
+  let O = `${u - n}px`;
+  s?.centered && f - 16 + e.width / 2 > i.offsetWidth / 2 && W - 16 > l / 2 && (h -= l /= 2, a.horizontal = "center"), W < l && f > l && (h = h - l, a.horizontal = "end"), g && a.horizontal !== "center" && e.width / 2 < g && (h += g * (a.horizontal === "start" ? -1 : 1)), (f < l && W < l || document.documentElement.clientWidth < i.offsetWidth) && (h = document.documentElement.clientWidth / 2 - i.offsetWidth / 2);
+  const b = u - n < i.scrollHeight && d - n > (r ? i.clientHeight : i.scrollHeight) || d > u && u - n < i.clientHeight && !r;
+  !s?.forceBelow && (s?.forceAbove || b) && (m = d < i.scrollHeight ? m - e.height - d - n : H - i.clientHeight - n, O = `${d - n}px`, a.vertical = "above");
+  const v = c.getBoundingClientRect();
+  return v.left < 0 && (h -= v.left), v.top < 0 && (m -= v.top), {
+    top: m,
+    left: h,
+    maxHeight: O,
+    alignment: a
+  };
 }
-function r(t, n, r, i) {
-	let a = i?.verticalOffset || 0, o = i?.horizontalOffset || 0, s = n.getBoundingClientRect(), c = e(t), l = n.parentElement.shadowRoot.querySelector(i?.contentSelector ?? `.${t.className}`).getBoundingClientRect(), u = r.getBoundingClientRect(), d = document.documentElement.clientWidth - l.right, f = document.documentElement.clientHeight - (s.top - a), p = document.documentElement.clientHeight, m = `${p - 32}px`, h = {
-		horizontal: "end",
-		vertical: "above"
-	}, g = c.offsetWidth + o, _ = l.right, v = s.top + a;
-	return d < g && s.left > g && (_ = _ - l.width - c.offsetWidth, h.horizontal = "start"), o && h.horizontal !== "center" && (_ += o * (h.horizontal === "start" ? -1 : 1)), f < c.scrollHeight && (v = p - c.clientHeight - 16), u.left < 0 && (_ -= u.left), u.top < 0 && (v -= u.top), {
-		top: v,
-		left: _,
-		maxHeight: m,
-		alignment: h
-	};
+function y(t, o, c, s) {
+  const n = s?.verticalOffset || 0, g = s?.horizontalOffset || 0, r = o.getBoundingClientRect(), e = R(t), i = o.parentElement.shadowRoot.querySelector(s?.contentSelector ?? `.${t.className}`).getBoundingClientRect(), f = c.getBoundingClientRect(), H = document.documentElement.clientWidth - i.right, W = document.documentElement.clientHeight - (r.top - n), d = document.documentElement.clientHeight, u = `${d - 32}px`, h = { horizontal: "end", vertical: "above" }, m = e.offsetWidth + g;
+  let l = i.right, a = r.top + n;
+  return H < m && r.left > m && (l = l - i.width - e.offsetWidth, h.horizontal = "start"), g && h.horizontal !== "center" && (l += g * (h.horizontal === "start" ? -1 : 1)), W < e.scrollHeight && (a = d - e.clientHeight - 16), f.left < 0 && (l -= f.left), f.top < 0 && (a -= f.top), {
+    top: a,
+    left: l,
+    maxHeight: u,
+    alignment: h
+  };
 }
-//#endregion
-export { n as getElementPosition, r as getElementPositionHorizontal, e as getElementRectangle, t as isEventOnElement };
+export {
+  w as getElementPosition,
+  y as getElementPositionHorizontal,
+  R as getElementRectangle,
+  x as isEventOnElement
+};

package/core/overlay.js

@@ -1,6 +1,19 @@
-import { overlayGapFixCorners as e } from "./overlay/overlay.js";
-import { getElementPosition as t, getElementPositionHorizontal as n, getElementRectangle as r, isEventOnElement as i } from "./overlay/position.js";
-import { setOverlayPosition as a } from "./overlay/overlay-option-panel.js";
-import { SbbOverlayOutsidePointerEventListener as o, sbbOverlayOutsidePointerEventListener as s } from "./overlay/overlay-outside-pointer-event-listener.js";
-import { removeAriaComboBoxAttributes as c, removeAriaOverlayTriggerAttributes as l, setAriaComboBoxAttributes as u, setAriaOverlayTriggerAttributes as d } from "./overlay/overlay-trigger-attributes.js";
-export { o as SbbOverlayOutsidePointerEventListener, t as getElementPosition, n as getElementPositionHorizontal, r as getElementRectangle, i as isEventOnElement, e as overlayGapFixCorners, c as removeAriaComboBoxAttributes, l as removeAriaOverlayTriggerAttributes, s as sbbOverlayOutsidePointerEventListener, u as setAriaComboBoxAttributes, d as setAriaOverlayTriggerAttributes, a as setOverlayPosition };
+import { overlayGapFixCorners as r } from "./overlay/overlay.js";
+import { setOverlayPosition as i } from "./overlay/overlay-option-panel.js";
+import { SbbOverlayOutsidePointerEventListener as s, sbbOverlayOutsidePointerEventListener as a } from "./overlay/overlay-outside-pointer-event-listener.js";
+import { removeAriaComboBoxAttributes as l, removeAriaOverlayTriggerAttributes as v, setAriaComboBoxAttributes as b, setAriaOverlayTriggerAttributes as g } from "./overlay/overlay-trigger-attributes.js";
+import { getElementPosition as A, getElementPositionHorizontal as O, getElementRectangle as E, isEventOnElement as p } from "./overlay/position.js";
+export {
+  s as SbbOverlayOutsidePointerEventListener,
+  A as getElementPosition,
+  O as getElementPositionHorizontal,
+  E as getElementRectangle,
+  p as isEventOnElement,
+  r as overlayGapFixCorners,
+  l as removeAriaComboBoxAttributes,
+  v as removeAriaOverlayTriggerAttributes,
+  a as sbbOverlayOutsidePointerEventListener,
+  b as setAriaComboBoxAttributes,
+  g as setAriaOverlayTriggerAttributes,
+  i as setOverlayPosition
+};

package/core/styles/core.scss

@@ -131,6 +131,13 @@ $theme: 'standard' !default;
 @use '../../link/common/block-link.global' as block-link with (
   $theme: $theme
 );
+@use '../../loading-indicator/loading-indicator.global' as loading-indicator with (
+  $theme: $theme
+);
+@use '../../loading-indicator-circle/loading-indicator-circle.global' as loading-indicator-circle
+  with (
+  $theme: $theme
+);
 @use '../../logo/logo.global' as logo with (
   $theme: $theme
 );
@@ -224,6 +231,8 @@ $theme: 'standard' !default;
   @include icon-sidebar.base;
   @include lead-container.base;
   @include block-link.base;
+  @include loading-indicator.base;
+  @include loading-indicator-circle.base;
   @include logo.base;
   @include message.base;
   @include mini-calendar-day.base;
@@ -250,6 +259,7 @@ $theme: 'standard' !default;
     @include header-common.base-forced-colors;
     @include expansion-panel-header.base-forced-colors;
     @include form-field.base-forced-colors;
+    @include loading-indicator-circle.base-forced-colors;
     @include logo.base-forced-colors;
     @include visual-checkbox.base-forced-colors;
     @include radio-button-common.base-forced-colors;

package/core/styles.js

@@ -1,5 +1,5 @@
-import { css as e } from "lit";
-//#region src/elements/core/styles/box-sizing.scss?lit&inline
-var t = e`*,:before,:after{box-sizing:border-box}`;
-//#endregion
-export { t as boxSizingStyles };
+import { css as o } from "lit";
+const r = o`*,:before,:after{box-sizing:border-box}`;
+export {
+  r as boxSizingStyles
+};

package/core/testing/event-spy.js

@@ -1,47 +1,51 @@
-//#region src/elements/core/testing/event-spy.ts
-var e = class {
-	get count() {
-		return this._count;
-	}
-	get events() {
-		return this._events;
-	}
-	get firstEvent() {
-		return this.events.length ? this.events[0] : null;
-	}
-	get lastEvent() {
-		return this.events.length ? this.events[this.events.length - 1] : null;
-	}
-	constructor(e, t = null, n = null) {
-		this._event = e, this._target = t, this._options = n, this._count = 0, this._events = [], this._promiseEventMap = /* @__PURE__ */ new Map(), this._target ||= document, this._listenForEvent();
-	}
-	calledOnce(e) {
-		return this.calledTimes(1, e);
-	}
-	calledTimes(e, t = 2e3) {
-		if (this.count > e) return Promise.reject(`Event '${this._event}' has been emitted more than expected (expected ${e}, actual ${this.count}`);
-		if (this.count === e) return Promise.resolve(this.events[e - 1]);
-		if (this._promiseEventMap.has(e)) return this._promiseEventMap.get(e).promise;
-		{
-			let n, r, i = {
-				promise: new Promise((e, t) => {
-					n = e, r = t;
-				}),
-				resolve: n,
-				reject: r
-			};
-			return this._promiseEventMap.set(e, i), this._wrapPromiseWithTimeout(i, e, t);
-		}
-	}
-	_wrapPromiseWithTimeout(e, t, n) {
-		let r = setTimeout(() => e.reject(`awaiting calledTimes(${t}) for event '${this._event}' results in timeout`), n);
-		return e.promise.then(() => clearTimeout(r)), e.promise;
-	}
-	_listenForEvent() {
-		this._target?.addEventListener(this._event, (e) => {
-			this._events.push(e), this._count++, this._promiseEventMap.get(this.count)?.resolve(e);
-		}, this._options ?? void 0);
-	}
+class v {
+  get count() {
+    return this._count;
+  }
+  get events() {
+    return this._events;
+  }
+  get firstEvent() {
+    return this.events.length ? this.events[0] : null;
+  }
+  get lastEvent() {
+    return this.events.length ? this.events[this.events.length - 1] : null;
+  }
+  constructor(e, s = null, t = null) {
+    this._event = e, this._target = s, this._options = t, this._count = 0, this._events = [], this._promiseEventMap = /* @__PURE__ */ new Map(), this._target || (this._target = document), this._listenForEvent();
+  }
+  calledOnce(e) {
+    return this.calledTimes(1, e);
+  }
+  calledTimes(e, s = 2e3) {
+    if (this.count > e)
+      return Promise.reject(`Event '${this._event}' has been emitted more than expected (expected ${e}, actual ${this.count}`);
+    if (this.count === e)
+      return Promise.resolve(this.events[e - 1]);
+    if (this._promiseEventMap.has(e))
+      return this._promiseEventMap.get(e).promise;
+    {
+      let t, i;
+      const n = {
+        promise: new Promise((r, h) => {
+          t = r, i = h;
+        }),
+        resolve: t,
+        reject: i
+      };
+      return this._promiseEventMap.set(e, n), this._wrapPromiseWithTimeout(n, e, s);
+    }
+  }
+  _wrapPromiseWithTimeout(e, s, t) {
+    const i = setTimeout(() => e.reject(`awaiting calledTimes(${s}) for event '${this._event}' results in timeout`), t);
+    return e.promise.then(() => clearTimeout(i)), e.promise;
+  }
+  _listenForEvent() {
+    this._target?.addEventListener(this._event, (e) => {
+      this._events.push(e), this._count++, this._promiseEventMap.get(this.count)?.resolve(e);
+    }, this._options ?? void 0);
+  }
+}
+export {
+  v as EventSpy
 };
-//#endregion
-export { e as EventSpy };

package/core/testing/mocha-extensions.js

@@ -1,8 +1,11 @@
-//#region src/elements/core/testing/mocha-extensions.ts
-var e = (e, t, n) => {
-	if (e) return Mocha.describe(t, n);
-}, t = (e, t, n) => {
-	if (e) return Mocha.test(t, n);
+const c = (e, t, r) => {
+  if (e)
+    return Mocha.describe(t, r);
+}, s = (e, t, r) => {
+  if (e)
+    return Mocha.test(t, r);
+};
+export {
+  c as describeIf,
+  s as testIf
 };
-//#endregion
-export { e as describeIf, t as testIf };

package/core/testing/wait-for-condition.js

@@ -1,11 +1,13 @@
-//#region src/elements/core/testing/wait-for-condition.ts
-async function e(e, t = 30, n = 2 * 1e3) {
-	let r = /* @__PURE__ */ new Date(), i = 0;
-	function a() {
-		return i++, e();
-	}
-	for (; !await a() && r.getTime() + n >= (/* @__PURE__ */ new Date()).getTime();) await new Promise((e) => setTimeout(e, t));
-	return r.getTime() + n < (/* @__PURE__ */ new Date()).getTime() ? Promise.reject(`waitForCondition timeout: ${e.toString()}, attempts: ${i}, start: ${r.getTime()}, end: ${(/* @__PURE__ */ new Date()).getTime()}`) : Promise.resolve(!0);
+async function m(t, r = 30, i = 2 * 1e3) {
+  const e = /* @__PURE__ */ new Date();
+  let n = 0;
+  function o() {
+    return n++, t();
+  }
+  for (; !await o() && e.getTime() + i >= (/* @__PURE__ */ new Date()).getTime(); )
+    await new Promise((a) => setTimeout(a, r));
+  return e.getTime() + i < (/* @__PURE__ */ new Date()).getTime() ? Promise.reject(`waitForCondition timeout: ${t.toString()}, attempts: ${n}, start: ${e.getTime()}, end: ${(/* @__PURE__ */ new Date()).getTime()}`) : Promise.resolve(!0);
 }
-//#endregion
-export { e as waitForCondition };
+export {
+  m as waitForCondition
+};

package/core/testing/wait-for-image-ready.js

@@ -1,16 +1,17 @@
-import { isSafari as e } from "../dom.js";
-//#region src/elements/core/testing/wait-for-image-ready.ts
-async function t(t, n = 2 * 1e3) {
-	let r = t.localName === "sbb-image" ? t.shadowRoot?.querySelector(".sbb-image__img") ?? null : t;
-	if (!r) throw Error("img tag not found");
-	r.complete ? e && await r.decode() : await new Promise((t, i) => {
-		let a = setTimeout(() => i("image loading timeout"), n);
-		r.addEventListener("load", () => {
-			clearTimeout(a), !r.complete || e ? r.decode().then(() => t()) : t();
-		}), r.addEventListener("error", () => {
-			clearTimeout(a), i("image error");
-		});
-	});
+import { isSafari as r } from "../dom.js";
+async function d(o, m = 2 * 1e3) {
+  const e = o.localName === "sbb-image" ? o.shadowRoot?.querySelector(".sbb-image__img") ?? null : o;
+  if (!e)
+    throw new Error("img tag not found");
+  e.complete ? r && await e.decode() : await new Promise((i, t) => {
+    const a = setTimeout(() => t("image loading timeout"), m);
+    e.addEventListener("load", () => {
+      clearTimeout(a), !e.complete || r ? e.decode().then(() => i()) : i();
+    }), e.addEventListener("error", () => {
+      clearTimeout(a), t("image error");
+    });
+  });
 }
-//#endregion
-export { t as waitForImageReady };
+export {
+  d as waitForImageReady
+};

package/core/testing/wait-for-render.js

@@ -1,13 +1,14 @@
-//#region src/elements/core/testing/wait-for-render.ts
-var e = (e) => !!e.updateComplete, t = Promise.resolve(), n = async (r) => {
-	let i = await r;
-	(i.parentElement ?? i).querySelectorAll?.("[defer-hydration]").forEach((e) => e.removeAttribute("defer-hydration"));
-	let a = [i, ...i.querySelectorAll("*")].filter(e).map((e) => [
-		e.updateComplete,
-		e.hydrationComplete ?? t,
-		n(e.renderRoot)
-	]).flat(Infinity);
-	return await Promise.all(a), i;
+const l = (o) => !!o.updateComplete, a = Promise.resolve(), n = async (o) => {
+  const e = await o;
+  (e.parentElement ?? e).querySelectorAll?.("[defer-hydration]").forEach((t) => t.removeAttribute("defer-hydration"));
+  const r = [e, ...e.querySelectorAll("*")].filter(l).map((t) => [
+    t.updateComplete,
+    t.hydrationComplete ?? a,
+    n(t.renderRoot)
+  ]).flat(1 / 0);
+  return await Promise.all(r), e;
+};
+export {
+  l as isReactiveElement,
+  n as waitForLitRender
 };
-//#endregion
-export { e as isReactiveElement, n as waitForLitRender };

package/core/testing.js

@@ -1,6 +1,14 @@
-import { EventSpy as e } from "./testing/event-spy.js";
-import { describeIf as t, testIf as n } from "./testing/mocha-extensions.js";
-import { waitForCondition as r } from "./testing/wait-for-condition.js";
-import { waitForImageReady as i } from "./testing/wait-for-image-ready.js";
-import { isReactiveElement as a, waitForLitRender as o } from "./testing/wait-for-render.js";
-export { e as EventSpy, t as describeIf, a as isReactiveElement, n as testIf, r as waitForCondition, i as waitForImageReady, o as waitForLitRender };
+import { EventSpy as r } from "./testing/event-spy.js";
+import { describeIf as i, testIf as f } from "./testing/mocha-extensions.js";
+import { waitForCondition as a } from "./testing/wait-for-condition.js";
+import { waitForImageReady as n } from "./testing/wait-for-image-ready.js";
+import { isReactiveElement as d, waitForLitRender as s } from "./testing/wait-for-render.js";
+export {
+  r as EventSpy,
+  i as describeIf,
+  d as isReactiveElement,
+  f as testIf,
+  a as waitForCondition,
+  n as waitForImageReady,
+  s as waitForLitRender
+};

package/core.css

@@ -1533,6 +1533,16 @@
   --sbb-block-link-gap: var(--sbb-spacing-fixed-1x);
   --sbb-block-link-icon-size: var(--sbb-size-icon-ui-small);
   --sbb-block-link-font-size: var(--sbb-text-font-size-s);
+  --sbb-loading-indicator-color: var(--sbb-color-primary);
+  --sbb-loading-indicator-window-element-rotation: 55.24deg;
+  --sbb-loading-indicator-window-height: 1.125rem;
+  --sbb-loading-indicator-window-element-width: 3.4375rem;
+  --sbb-loading-indicator-circle-color: var(--sbb-color-primary);
+  --sbb-loading-indicator-circle-padding: 0.125rem;
+  --sbb-loading-indicator-circle-background-color: var(--sbb-color-white);
+  --sbb-loading-indicator-circle-animated-width: 0.1875em;
+  --sbb-loading-indicator-circle-animated-height: 0.1875em;
+  --sbb-loading-indicator-circle-animated-border-radius: 50%;
   --sbb-logo-panel-color: var(--sbb-color-brand);
   --sbb-logo-signet-color: var(--sbb-color-white);
   --sbb-logo-word-mark-color: var(--sbb-color-black);
@@ -1679,6 +1689,10 @@
     --sbb-header-action-active-border-width: 0;
     --sbb-expansion-panel-header-text-color: ButtonText;
     --sbb-form-field-border-color: ButtonBorder;
+    --sbb-loading-indicator-circle-animated-width: 50%;
+    --sbb-loading-indicator-circle-animated-height: 100%;
+    --sbb-loading-indicator-circle-animated-border-radius: 0;
+    --sbb-loading-indicator-circle-background: transparent;
     --sbb-logo-panel-color: ButtonText !important;
     --sbb-logo-signet-color: Canvas !important;
     --sbb-visual-checkbox-selection-color: Canvas;