@sbb-esta/lyne-elements 4.7.0 → 4.8.0

package/core/styles/core.scss

@@ -30,6 +30,12 @@ $theme: 'standard' !default;
 @use '../../button/mini-button-group/mini-button-group.global' as mini-button-group with (
   $theme: $theme
 );
+@use '../../calendar/calendar/calendar.global' as calendar with (
+  $theme: $theme
+);
+@use '../../calendar/common/calendar-cell-base-element.global' as calendar-cell with (
+  $theme: $theme
+);
 @use '../../card/card/card.global' as card with (
   $theme: $theme
 );
@@ -51,10 +57,7 @@ $theme: 'standard' !default;
 @use '../../core/mixins/panel-common.global' as panel-common with (
   $theme: $theme
 );
-@use '../../checkbox/checkbox/checkbox.global' as checkbox with (
-  $theme: $theme
-);
-@use '../../checkbox/checkbox-group/checkbox-group.global' as checkbox-group with (
+@use '../../checkbox/checkbox.global' as checkbox with (
   $theme: $theme
 );
 @use '../../checkbox/common/checkbox-common.global' as checkbox-common with (
@@ -95,9 +98,74 @@ $theme: 'standard' !default;
   expansion-panel-header with (
   $theme: $theme
 );
+@use '../../flip-card/flip-card/flip-card.global' as flip-card with (
+  $theme: $theme
+);
+@use '../../flip-card/flip-card-details/flip-card-details.global' as flip-card-details with (
+  $theme: $theme
+);
+@use '../../flip-card/flip-card-summary/flip-card-summary.global' as flip-card-summary with (
+  $theme: $theme
+);
+@use '../../header/common/header-action.global' as header-common with (
+  $theme: $theme
+);
+@use '../../header/header-environment/header-environment.global' as header-environment with (
+  $theme: $theme
+);
+@use '../../header/header/header.global' as header with (
+  $theme: $theme
+);
 @use '../../footer/footer.global' as footer with (
   $theme: $theme
 );
+@use '../../form-field/error/error.global' as error with (
+  $theme: $theme
+);
+@use '../../form-field/form-field/form-field.global' as form-field with (
+  $theme: $theme
+);
+@use '../../icon-sidebar/icon-sidebar/icon-sidebar.global' as icon-sidebar with (
+  $theme: $theme
+);
+@use '../../lead-container/lead-container.global' as lead-container with (
+  $theme: $theme
+);
+@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
+);
+@use '../../map-container/map-container.global' as map-container with (
+  $theme: $theme
+);
+@use '../../menu/menu/menu.global' as menu with (
+  $theme: $theme
+);
+@use '../../menu/common/menu-action.global' as menu-action with (
+  $theme: $theme
+);
+@use '../../message/message.global' as message with (
+  $theme: $theme
+);
+@use '../../mini-calendar/mini-calendar-day/mini-calendar-day.global' as mini-calendar-day with (
+  $theme: $theme
+);
+@use '../../mini-calendar/mini-calendar-month/mini-calendar-month.global' as mini-calendar-month
+  with (
+  $theme: $theme
+);
+@use '../../notification/notification.global' as notification with (
+  $theme: $theme
+);
 @use '../../option/option/option.global' as option with (
   $theme: $theme
 );
@@ -110,7 +178,7 @@ $theme: 'standard' !default;
 @use '../../radio-button/common/radio-button-common.global' as radio-button-common with (
   $theme: $theme
 );
-@use '../../radio-button/radio-button-group/radio-button-group.global' as radio-button-group with (
+@use '../base-elements/selection-group-base-element.global' as selection-group with (
   $theme: $theme
 );
 @use '../../selection-action-panel/selection-action-panel.global' as selection-action-panel with (
@@ -148,6 +216,8 @@ $theme: 'standard' !default;
   @include button.base;
   @include mini-button.base;
   @include mini-button-group.base;
+  @include calendar.base;
+  @include calendar-cell.base;
   @include card.base;
   @include card-badge.base;
   @include carousel.base;
@@ -156,7 +226,6 @@ $theme: 'standard' !default;
   @include chip-group.base;
   @include panel-common.base;
   @include checkbox.base;
-  @include checkbox-group.base;
   @include checkbox-common.base;
   @include container.base;
   @include sticky-bar.base;
@@ -164,16 +233,36 @@ $theme: 'standard' !default;
   @include dialog.base;
   @include dialog-close-button.base;
   @include divider.base;
+  @include error.base;
   @include expansion-panel.base;
   @include expansion-panel-content.base;
   @include expansion-panel-header.base;
+  @include flip-card.base;
+  @include flip-card-details.base;
   @include footer.base;
+  @include form-field.base;
+  @include header.base;
+  @include header-common.base;
+  @include header-environment.base;
+  @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 map-container.base;
+  @include menu.base;
+  @include menu-action.base;
+  @include message.base;
+  @include mini-calendar-day.base;
+  @include mini-calendar-month.base;
+  @include notification.base;
   @include option.base;
   @include option-hint.base;
   @include optgroup.base;
   @include overlay.options-panel-overlay-variables--global($theme);
   @include radio-button-common.base;
-  @include radio-button-group.base;
+  @include selection-group.base;
   @include selection-action-panel.base;
   @include selection-expansion-panel.base;
   @include status.base;
@@ -187,7 +276,11 @@ $theme: 'standard' !default;
     @include breadcrumb.base-forced-colors;
     @include card.base-forced-colors;
     @include card-badge.base-forced-colors;
+    @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;
   }
@@ -197,9 +290,6 @@ $theme: 'standard' !default;
   --sbb-train-formation-wagon-height: #{functions.px-to-rem-build(40)};
   --sbb-train-formation-wagon-gap: var(--sbb-spacing-fixed-1x);
 
-  // Header
-  --sbb-header-height: var(--sbb-spacing-fixed-14x);
-
   // Time Input
   --sbb-time-input-max-width: #{functions.px-to-rem-build(58)};
 
@@ -239,10 +329,6 @@ $theme: 'standard' !default;
     }
   }
 
-  &:has(sbb-header[size='s']) {
-    --sbb-header-height: #{functions.px-to-rem-build(52)};
-  }
-
   // When the input modality is either mouse or touch,
   // the focus outline should be hidden.
   // We achieve this by setting the outline style to none.
@@ -256,6 +342,7 @@ $theme: 'standard' !default;
 
     @include dialog.base-breakpoint-small;
     @include footer.base-breakpoint-small;
+    @include notification.base-breakpoint-small;
   }
 
   @include mediaqueries.mq($from: large) {
@@ -265,6 +352,10 @@ $theme: 'standard' !default;
 
     @include chip-group.base-breakpoint-large;
     @include dialog.base-breakpoint-large;
+    @include flip-card.base-breakpoint-large;
+    @include form-field.base-breakpoint-large;
+    @include header.base-breakpoint-large;
+    @include menu.base-breakpoint-large;
 
     // TODO: Remove complete block when new lean theme is complete
     // Only render the block in standard theme as fallback for CSS class usage
@@ -274,19 +365,15 @@ $theme: 'standard' !default;
       }
     }
 
-    // Header
-    --sbb-header-height: var(--sbb-spacing-fixed-24x);
-
     // Time Input
     --sbb-time-input-max-width: #{functions.px-to-rem-build(65)};
-
-    &:has(sbb-header[size='s']) {
-      --sbb-header-height: var(--sbb-spacing-fixed-14x);
-    }
   }
 
   @include mediaqueries.mq($from: ultra) {
     @include sbb-css-tokens.breakpoint-ultra;
+
+    @include lead-container.base-breakpoint-ultra;
+    @include map-container.base-breakpoint-ultra;
   }
 }
 
@@ -298,6 +385,12 @@ $theme: 'standard' !default;
 @include dialog-close-button.rules;
 @include dialog-content.rules;
 @include dialog-title.rules;
+@include flip-card-summary.rules;
+@include form-field.rules;
+@include header.rules;
+@include icon-sidebar.rules;
+@include lead-container.rules;
+@include message.rules;
 @include option.rules;
 @include tab-nav-bar.rules;
 
@@ -327,122 +420,6 @@ html {
   @include typo.placeholder;
 }
 
-:is(sbb-form-field, sbb-timetable-form-field) {
-  :where(input, select, textarea, sbb-select, sbb-date-input, sbb-time-input) {
-    @include typo.text-m--regular;
-    @include helpers.ellipsis;
-    @include inputs.input-reset;
-
-    // Use !important here to not interfere with Firefox focus ring definition
-    // which appears in normalize CSS of several frameworks.
-    outline: none !important;
-    overflow: var(--sbb-form-field-overflow);
-    width: 100%;
-    box-sizing: border-box;
-    color: var(--sbb-form-field-text-color);
-
-    // Fill color needed for Safari
-    -webkit-text-fill-color: var(--sbb-form-field-text-color);
-    opacity: 1;
-    background-color: transparent;
-
-    // To be more specific than the styles in normalize.scss we need to use !important
-    // TODO: Find a better solution
-    font-size: var(--sbb-form-field-input-text-size) !important;
-    font-family: var(--sbb-typo-font-family) !important;
-    line-height: var(--sbb-typo-line-height-text) !important;
-
-    &::placeholder {
-      @include typo.placeholder;
-    }
-  }
-
-  &[floating-label] :where(input, select, textarea, sbb-select)::placeholder,
-  // This covers the placeholder of the sbb-date-input and sbb-time-input
-  &[floating-label] :where(sbb-date-input, sbb-time-input)::after {
-    color: transparent !important;
-    -webkit-text-fill-color: transparent !important;
-
-    @include a11y.if-forced-colors {
-      color: Canvas !important;
-      -webkit-text-fill-color: Canvas !important;
-    }
-  }
-
-  // TODO: Remove if webkit bug is resolved: https://bugs.webkit.org/show_bug.cgi?id=223814
-  &:not([floating-label]) :where(input, select, textarea, sbb-select):disabled::placeholder {
-    color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
-    -webkit-text-fill-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
-  }
-
-  // Fix positioning issue for select which occurs in Safari
-  :where(select) {
-    vertical-align: middle;
-  }
-
-  :where(select, sbb-select) {
-    padding-inline-end: var(--sbb-form-field-select-inline-padding-end);
-  }
-
-  &[size='s'] :where(input, sbb-date-input, sbb-time-input) {
-    // We shrink the input's height to support all types of inputs (especially type=number).
-    // Factor 1.25 ensures, letters are not cut.
-    height: calc(var(--sbb-form-field-input-text-size) * 1.25);
-
-    // Avoids Safari bug, where text gets misaligned with type=number
-    line-height: 1 !important;
-
-    // We add the missing block spacing to fit the line-height
-    margin-block: calc(
-      0.5 * (var(--sbb-form-field-input-text-size) * (var(--sbb-typo-line-height-text) - 1.25))
-    );
-  }
-
-  :where(textarea) {
-    @include scrollbar.scrollbar;
-
-    position: relative;
-    resize: none;
-
-    // White-space break needed for Firefox
-    white-space: break-spaces;
-    overflow-y: auto;
-    min-height: calc((var(--sbb-typo-line-height-text) * 1em));
-    height: 100%;
-  }
-
-  &[size='l'] :where(textarea) {
-    padding-block-end: #{functions.px-to-rem-build(5.5)};
-  }
-
-  &[negative] :where(textarea) {
-    @include scrollbar.scrollbar($negative: true);
-  }
-
-  &:has(
-    :is(
-      :is(input, textarea, select):user-invalid,
-      :state(interacted):invalid,
-      .ng-touched.ng-invalid,
-      .sbb-invalid
-    )
-  ),
-  :is(.ng-submitted, .sbb-show-errors) &:has(:is(:invalid, .ng-invalid)) {
-    --sbb-form-field-border-color: var(--sbb-color-error);
-    --sbb-form-field-text-color: var(--sbb-color-error);
-
-    &[negative] {
-      --sbb-form-field-border-color: var(--sbb-color-red85);
-      --sbb-form-field-text-color: var(--sbb-color-red85);
-    }
-
-    @include a11y.if-forced-colors {
-      --sbb-form-field-border-color: LinkText !important;
-      --sbb-form-field-text-color: LinkText !important;
-    }
-  }
-}
-
 // Hiding components until they are instantiated
 :is(
   sbb-autocomplete,
@@ -512,38 +489,6 @@ img {
   object-position: var(--sbb-image-object-position);
 }
 
-// TODO: Move back to the sbb-flip-card-summary components when the global CSS refactoring happens
-sbb-flip-card-summary {
-  > [slot='image']:is(sbb-image, img),
-  > [slot='image'] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
-    --sbb-image-aspect-ratio: auto;
-    --sbb-image-object-fit: cover;
-
-    border-radius: 0;
-    display: block;
-    height: 100%;
-  }
-}
-
-// TODO: Move back to the sbb-lead-container components when the global CSS refactoring happens
-sbb-lead-container {
-  > [slot='image']:is(sbb-image, img, picture),
-  > [slot='image'] :is(sbb-image, img, picture):not(.sbb-figure-overlap-image) {
-    --sbb-image-aspect-ratio: var(--sbb-lead-container-image-ratio);
-    --sbb-image-object-fit: cover;
-
-    border-radius: var(--sbb-lead-container-image-border-radius);
-  }
-}
-
-// TODO: Move back to the sbb-message components when the global CSS refactoring happens
-sbb-message {
-  > [slot='image']:is(sbb-image, img),
-  > [slot='image'] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
-    border-radius: var(--sbb-message-image-border-radius);
-  }
-}
-
 // Target the slotted `sbb-image` which are generally wrapped by a <figure> (therefore are not reachable with the :slotted)
 // Apply the brightness effect on mouse hover
 // TODO: Move back to the teaser components when the global CSS refactoring happens
@@ -700,17 +645,6 @@ sbb-sidebar-container:has(
   --sbb-sidebar-container-backdrop-opacity: 0.4;
 }
 
-// Move the current-page-border to the right side if the sidebar is right positioned
-sbb-icon-sidebar-content + sbb-icon-sidebar :is(sbb-icon-sidebar-link, sbb-icon-sidebar-button) {
-  --sbb-icon-sidebar-button__current-border-inset-inline-start: auto;
-}
-
-// Set the border radius at the left top side if the sidebar is right positioned
-sbb-icon-sidebar-content + sbb-icon-sidebar {
-  border-start-end-radius: 0;
-  border-start-start-radius: var(--sbb-icon-sidebar-border-radius);
-}
-
 // If there is no close button, avoid reserving any space for the button in the sidebar title
 sbb-sidebar:not(:has(sbb-sidebar-title)) sbb-sidebar-close-button {
   position: absolute;
@@ -721,11 +655,6 @@ sbb-sidebar:has(sbb-sidebar-title) {
   --sbb-sidebar__padding-block-start: 0;
 }
 
-// Move container below header
-sbb-header + :where(sbb-sidebar-container, sbb-icon-sidebar-container) {
-  margin-block-start: var(--sbb-header-height);
-}
-
 // We set some dimension to the selects trigger element in order that the screen reader's outline box looks more accurate.
 .sbb-select-trigger {
   width: 100%;
@@ -742,16 +671,6 @@ sbb-toggle:has(:focus-visible) {
   @include a11y.focus-outline;
 }
 
-sbb-notification:has(sbb-title) {
-  --_sbb-notification-icon-authoritative-font-size: var(--sbb-heading-font-size-5);
-  --_sbb-notification-icon-authoritative-line-height: var(--sbb-typo-line-height-heading);
-
-  &[size='s'] {
-    --_sbb-notification-icon-authoritative-font-size: var(--sbb-heading-font-size-6);
-    --_sbb-notification-icon-authoritative-line-height: var(--sbb-typo-line-height-text);
-  }
-}
-
 .sbb-overlay-outlet {
   position: fixed;
   inset: 0;
@@ -764,29 +683,3 @@ sbb-notification:has(sbb-title) {
   --sbb-option-overflow: hidden;
   --sbb-option-white-space: nowrap;
 }
-
-sbb-mini-calendar[orientation='horizontal'] {
-  sbb-mini-calendar-month {
-    --sbb-mini-calendar-grid-auto-flow: row;
-    --sbb-mini-calendar-month-height: #{functions.px-to-rem-build(48)};
-    --sbb-mini-calendar-month-grid-template-rows: none;
-    --sbb-mini-calendar-month-grid-template-columns: repeat(7, 1fr);
-
-    sbb-mini-calendar-day:first-child {
-      grid-column-start: var(--sbb-mini-calendar-month-offset);
-    }
-  }
-}
-
-sbb-mini-calendar[orientation='vertical'] {
-  sbb-mini-calendar-month {
-    --sbb-mini-calendar-grid-auto-flow: column;
-    --sbb-mini-calendar-month-height: auto;
-    --sbb-mini-calendar-month-grid-template-rows: repeat(7, 1fr);
-    --sbb-mini-calendar-month-grid-template-columns: none;
-
-    sbb-mini-calendar-day:first-child {
-      grid-row-start: var(--sbb-mini-calendar-month-offset);
-    }
-  }
-}

package/core/styles.js

@@ -1,5 +1,5 @@
-import { css as o } from "lit";
-const r = o`*,:before,:after{box-sizing:border-box}`;
-export {
-  r as boxSizingStyles
-};
+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 };

package/core/testing/event-spy.js

@@ -1,51 +1,47 @@
-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
+//#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);
+	}
 };
+//#endregion
+export { e as EventSpy };

package/core/testing/mocha-extensions.js

@@ -1,11 +1,8 @@
-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
+//#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);
 };
+//#endregion
+export { e as describeIf, t as testIf };

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

@@ -1,13 +1,11 @@
-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);
+//#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);
 }
-export {
-  m as waitForCondition
-};
+//#endregion
+export { e as waitForCondition };

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

@@ -1,17 +1,16 @@
-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");
-    });
-  });
+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");
+		});
+	});
 }
-export {
-  d as waitForImageReady
-};
+//#endregion
+export { t as waitForImageReady };