@sbb-esta/lyne-elements 0.52.0 → 0.52.2

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

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb-group.d.ts","sourceRoot":"","sources":["../../../../src/elements/breadcrumb/breadcrumb-group/breadcrumb-group.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAGnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAYb,OAAO,EAAyB,KAAK,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAEpF,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAI7D,OAAO,eAAe,CAAC;;AAEvB;;;;GAIG;AACH,qBAIa,yBAA0B,SAAQ,8BAGlC;IACX,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,mBAA4B,mBAAmB,WAAsB;IAIrE,OAAO,KAAK,MAAM,QAEjB;IACD,OAAO,KAAK,MAAM,GAEjB;IAED,OAAO,CAAC,eAAe,CAAoE;IAC3F,OAAO,CAAC,MAAM,CAAyC;IACvD,OAAO,CAAC,SAAS,CAAmC;IACpD,OAAO,CAAC,aAAa,CAAS;IAE9B,OAAO,CAAC,cAAc;IAiBN,iBAAiB,IAAI,IAAI;cAMtB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAM9D,oBAAoB,IAAI,IAAI;cAKzB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI;cAQ3E,OAAO,CAAC,iBAAiB,EAAE,cAAc,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI;IAa3F,2EAA2E;IAC3E,OAAO,CAAC,gBAAgB;IAaxB;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAS3B,OAAO,CAAC,UAAU;IAYlB;;;OAGG;IACH,OAAO,CAAC,kBAAkB;IAK1B,kGAAkG;IAClG,OAAO,CAAC,uBAAuB;IAO/B,OAAO,CAAC,gBAAgB;IA8BxB,OAAO,CAAC,eAAe;cAgBJ,MAAM,IAAI,cAAc;CAQ5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,sBAAsB,EAAE,yBAAyB,CAAC;KACnD;CACF"}
+{"version":3,"file":"breadcrumb-group.d.ts","sourceRoot":"","sources":["../../../../src/elements/breadcrumb/breadcrumb-group/breadcrumb-group.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAGnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAYb,OAAO,EAAyB,KAAK,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAEpF,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAI7D,OAAO,eAAe,CAAC;;AAIvB;;;;GAIG;AACH,qBAIa,yBAA0B,SAAQ,8BAGlC;IACX,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,mBAA4B,mBAAmB,WAAsB;IAIrE,OAAO,KAAK,MAAM,QAEjB;IACD,OAAO,KAAK,MAAM,GAEjB;IAED,OAAO,CAAC,eAAe,CAAoE;IAC3F,OAAO,CAAC,MAAM,CAAyC;IACvD,OAAO,CAAC,SAAS,CAAmC;IACpD,OAAO,CAAC,aAAa,CAAS;IAE9B,OAAO,CAAC,cAAc;IAiBN,iBAAiB,IAAI,IAAI;cAMtB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAM9D,oBAAoB,IAAI,IAAI;cAKzB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI;cAQ3E,OAAO,CAAC,iBAAiB,EAAE,cAAc,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI;IAa3F,2EAA2E;IAC3E,OAAO,CAAC,gBAAgB;IAaxB;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAS3B,OAAO,CAAC,UAAU;IAYlB;;;OAGG;IACH,OAAO,CAAC,kBAAkB;IAK1B,kGAAkG;IAClG,OAAO,CAAC,uBAAuB;IAW/B,OAAO,CAAC,gBAAgB;IA8BxB,OAAO,CAAC,eAAe;cAgBJ,MAAM,IAAI,cAAc;CAQ5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,sBAAsB,EAAE,yBAAyB,CAAC;KACnD;CACF"}

package/breadcrumb/breadcrumb-group.js

@@ -1,22 +1,23 @@
-import { css as d, LitElement as c, html as b, nothing as u } from "lit";
-import { state as p, customElement as h } from "lit/decorators.js";
-import { isArrowKeyPressed as m, sbbInputModalityDetector as g, getNextElementIndex as f } from "../core/a11y.js";
-import { SbbConnectedAbortController as v, SbbLanguageController as _ } from "../core/controllers.js";
-import { hostAttributes as x } from "../core/decorators.js";
+import { css as c, LitElement as u, html as b, nothing as p } from "lit";
+import { state as h, customElement as m } from "lit/decorators.js";
+import { isArrowKeyPressed as g, sbbInputModalityDetector as f, getNextElementIndex as v } from "../core/a11y.js";
+import { SbbConnectedAbortController as _, SbbLanguageController as x } from "../core/controllers.js";
+import { hostAttributes as C } from "../core/decorators.js";
 import { setOrRemoveAttribute as y } from "../core/dom.js";
-import { i18nBreadcrumbEllipsisButtonLabel as C } from "../core/i18n.js";
-import { SbbNamedSlotListMixin as w } from "../core/mixins.js";
-import { AgnosticResizeObserver as k } from "../core/observers.js";
+import { i18nBreadcrumbEllipsisButtonLabel as w } from "../core/i18n.js";
+import { SbbNamedSlotListMixin as k } from "../core/mixins.js";
+import { AgnosticResizeObserver as z } from "../core/observers.js";
 import "../icon.js";
-const z = d`*,:before,:after{box-sizing:border-box}:host{--sbb-breadcrumb-group-wrap: nowrap;--sbb-breadcrumb-group-visibility: hidden;display:block}:host([data-loaded]){--sbb-breadcrumb-group-visibility: visible}:host([data-state]){--sbb-breadcrumb-group-wrap: wrap}.sbb-breadcrumb-group{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;flex-wrap:var(--sbb-breadcrumb-group-wrap);column-gap:var(--sbb-spacing-fixed-1x);visibility:var(--sbb-breadcrumb-group-visibility)}.sbb-breadcrumb-group__item{flex:0 0 auto;display:flex;column-gap:var(--sbb-spacing-fixed-1x)}.sbb-breadcrumb-group__divider-icon{color:var(--sbb-color-granite)}#sbb-breadcrumb-ellipsis{--sbb-breadcrumb-group-ellipsis-color: var(--sbb-color-granite);--sbb-breadcrumb-group-ellipsis-background-color: transparent;--sbb-breadcrumb-group-ellipsis-border-width: var(--sbb-border-width-1x);--sbb-breadcrumb-group-ellipsis-border-color: var(--sbb-color-silver);-webkit-appearance:none;-moz-appearance:none;box-sizing:border-box;margin:0;outline:none;border:none;padding:0;background:none;-webkit-tap-highlight-color:transparent;color:inherit;--sbb-text-font-size: var(--sbb-font-size-text-xxs);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);line-height:0;letter-spacing:.01em;width:var(--sbb-size-icon-ui-small);height:var(--sbb-size-icon-ui-small);border:var(--sbb-breadcrumb-group-ellipsis-border-width) solid var(--sbb-breadcrumb-group-ellipsis-border-color);border-radius:50%;padding-block-end:.5em;cursor:pointer;color:var(--sbb-breadcrumb-group-ellipsis-color);background-color:var(--sbb-breadcrumb-group-ellipsis-background-color);overflow:hidden}@media (forced-colors: active){#sbb-breadcrumb-ellipsis{--sbb-breadcrumb-group-ellipsis-border-width: var(--sbb-border-width-2x);--sbb-breadcrumb-group-ellipsis-border-color: CanvasText}}@media (any-hover: hover){#sbb-breadcrumb-ellipsis:hover{--sbb-breadcrumb-group-ellipsis-color: var(--sbb-color-charcoal);--sbb-breadcrumb-group-ellipsis-background-color: var(--sbb-color-milk)}}@media (any-hover: hover) and (forced-colors: active){#sbb-breadcrumb-ellipsis:hover{--sbb-breadcrumb-group-ellipsis-border-color: Highlight}}#sbb-breadcrumb-ellipsis:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch]){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}`;
-var E = Object.defineProperty, S = Object.getOwnPropertyDescriptor, n = (e, r, t, i) => {
-  for (var s = i > 1 ? void 0 : i ? S(r, t) : r, o = e.length - 1, l; o >= 0; o--)
-    (l = e[o]) && (s = (i ? l(r, t, s) : l(s)) || s);
-  return i && s && E(r, t, s), s;
+const E = c`*,:before,:after{box-sizing:border-box}:host{--sbb-breadcrumb-group-wrap: nowrap;--sbb-breadcrumb-group-visibility: hidden;display:block}:host([data-loaded]){--sbb-breadcrumb-group-visibility: visible}:host([data-state]){--sbb-breadcrumb-group-wrap: wrap}.sbb-breadcrumb-group{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;flex-wrap:var(--sbb-breadcrumb-group-wrap);column-gap:var(--sbb-spacing-fixed-1x);visibility:var(--sbb-breadcrumb-group-visibility)}.sbb-breadcrumb-group__item{flex:0 0 auto;display:flex;column-gap:var(--sbb-spacing-fixed-1x)}.sbb-breadcrumb-group__divider-icon{color:var(--sbb-color-granite)}#sbb-breadcrumb-ellipsis{--sbb-breadcrumb-group-ellipsis-color: var(--sbb-color-granite);--sbb-breadcrumb-group-ellipsis-background-color: transparent;--sbb-breadcrumb-group-ellipsis-border-width: var(--sbb-border-width-1x);--sbb-breadcrumb-group-ellipsis-border-color: var(--sbb-color-silver);-webkit-appearance:none;-moz-appearance:none;box-sizing:border-box;margin:0;outline:none;border:none;padding:0;background:none;-webkit-tap-highlight-color:transparent;color:inherit;--sbb-text-font-size: var(--sbb-font-size-text-xxs);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);line-height:0;letter-spacing:.01em;width:var(--sbb-size-icon-ui-small);height:var(--sbb-size-icon-ui-small);border:var(--sbb-breadcrumb-group-ellipsis-border-width) solid var(--sbb-breadcrumb-group-ellipsis-border-color);border-radius:50%;padding-block-end:.5em;cursor:pointer;color:var(--sbb-breadcrumb-group-ellipsis-color);background-color:var(--sbb-breadcrumb-group-ellipsis-background-color);overflow:hidden}@media (forced-colors: active){#sbb-breadcrumb-ellipsis{--sbb-breadcrumb-group-ellipsis-border-width: var(--sbb-border-width-2x);--sbb-breadcrumb-group-ellipsis-border-color: CanvasText}}@media (any-hover: hover){#sbb-breadcrumb-ellipsis:hover{--sbb-breadcrumb-group-ellipsis-color: var(--sbb-color-charcoal);--sbb-breadcrumb-group-ellipsis-background-color: var(--sbb-color-milk)}}@media (any-hover: hover) and (forced-colors: active){#sbb-breadcrumb-ellipsis:hover{--sbb-breadcrumb-group-ellipsis-border-color: Highlight}}#sbb-breadcrumb-ellipsis:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch]){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}`;
+var S = Object.defineProperty, A = Object.getOwnPropertyDescriptor, d = (e, r, t, i) => {
+  for (var s = i > 1 ? void 0 : i ? A(r, t) : r, o = e.length - 1, a; o >= 0; o--)
+    (a = e[o]) && (s = (i ? a(r, t, s) : a(s)) || s);
+  return i && s && S(r, t, s), s;
 };
-let a = class extends w(c) {
+const n = 3;
+let l = class extends k(u) {
   constructor() {
-    super(...arguments), this.listChildLocalNames = ["sbb-breadcrumb"], this._resizeObserver = new k(() => this._evaluateCollapsedState()), this._abort = new v(this), this._language = new _(this), this._markForFocus = !1;
+    super(...arguments), this.listChildLocalNames = ["sbb-breadcrumb"], this._resizeObserver = new z(() => this._evaluateCollapsedState()), this._abort = new _(this), this._language = new x(this), this._markForFocus = !1;
   }
   set _state(e) {
     y(this, "data-state", e);
@@ -26,7 +27,7 @@ let a = class extends w(c) {
   }
   _handleKeyDown(e) {
     if (!(!this.listChildren.length || // don't trap nested handling
-    e.target !== this && e.target.parentElement !== this) && m(e)) {
+    e.target !== this && e.target.parentElement !== this) && g(e)) {
       if (this._state === "collapsed")
         return this._focusNextCollapsed(e);
       this._focusNext(e);
@@ -48,12 +49,12 @@ let a = class extends w(c) {
   }
   updated(e) {
     var r;
-    super.updated(e), e.has("listChildren") && Promise.resolve().then(() => this._evaluateCollapsedState()), this._markForFocus && g.mostRecentModality === "keyboard" && ((r = this.listChildren[1]) == null || r.focus(), this._markForFocus = !1);
+    super.updated(e), e.has("listChildren") && Promise.resolve().then(() => this._evaluateCollapsedState()), this._markForFocus && f.mostRecentModality === "keyboard" && ((r = this.listChildren[1]) == null || r.focus(), this._markForFocus = !1);
   }
   /** Apply the aria-current attribute to the last sbb-breadcrumb element. */
   _syncBreadcrumbs() {
     var e;
-    this.listChildren.slice(0, -1).filter((r) => r.hasAttribute("aria-current")).forEach((r) => r.removeAttribute("aria-current")), (e = this.listChildren[this.listChildren.length - 1]) == null || e.setAttribute("aria-current", "page"), this.listChildren.length < 3 && (this._state = null);
+    this.listChildren.slice(0, -1).filter((r) => r.hasAttribute("aria-current")).forEach((r) => r.removeAttribute("aria-current")), (e = this.listChildren[this.listChildren.length - 1]) == null || e.setAttribute("aria-current", "page"), this.listChildren.length < n && (this._state = null);
   }
   /**
    * Sets the focus on the correct element when the ellipsis breadcrumb is displayed and the user is navigating with keyboard's arrows.
@@ -70,7 +71,7 @@ let a = class extends w(c) {
     var s;
     const t = r.findIndex(
       (o) => o === document.activeElement || o === this.shadowRoot.activeElement
-    ), i = f(e, t, r.length);
+    ), i = v(e, t, r.length);
     (s = r[i]) == null || s.focus(), e.preventDefault();
   }
   /**
@@ -82,7 +83,7 @@ let a = class extends w(c) {
   }
   /** Evaluate if the expanded breadcrumb element fits in page width, otherwise it needs ellipsis */
   _evaluateCollapsedState() {
-    !this._state && this.scrollWidth > this.offsetWidth && (this._state = "collapsed", this._resizeObserver.disconnect());
+    !this._state && this.scrollWidth > this.offsetWidth && this.listChildren.length >= n && (this._state = "collapsed", this._resizeObserver.disconnect());
   }
   _renderCollapsed() {
     return b`
@@ -97,7 +98,7 @@ let a = class extends w(c) {
         <button
           type="button"
           id="sbb-breadcrumb-ellipsis"
-          aria-label=${C[this._language.current]}
+          aria-label=${w[this._language.current]}
           aria-expanded="false"
           @click=${() => this._expandBreadcrumbs()}
         >
@@ -121,7 +122,7 @@ let a = class extends w(c) {
           ${r !== t.length - 1 ? b`<sbb-icon
                 name="chevron-small-right-small"
                 class="sbb-breadcrumb-group__divider-icon"
-              ></sbb-icon>` : u}
+              ></sbb-icon>` : p}
         </li>
       `
     );
@@ -135,16 +136,16 @@ let a = class extends w(c) {
     `;
   }
 };
-a.styles = z;
-n([
-  p()
-], a.prototype, "_state", 1);
-a = n([
-  h("sbb-breadcrumb-group"),
-  x({
+l.styles = E;
+d([
+  h()
+], l.prototype, "_state", 1);
+l = d([
+  m("sbb-breadcrumb-group"),
+  C({
     role: "navigation"
   })
-], a);
+], l);
 export {
-  a as SbbBreadcrumbGroupElement
+  l as SbbBreadcrumbGroupElement
 };

package/core/base-elements.js

@@ -59,8 +59,7 @@ let h = class extends m {
       const t = this.form ? this.ownerDocument.querySelector(`form#${this.form}`) : this.closest("form");
       if (t)
         this.type === "submit" ? t.requestSubmit() : this.type === "reset" && t.reset();
-      else
-        return;
+      else return;
     }, this._preventScrollOnSpaceKeydown = (e) => {
       e.key === " " && (e.preventDefault(), e.target.toggleAttribute("data-active", !0));
     }, this._removeActiveMarker = (e) => {

package/core/datetime.js

@@ -188,10 +188,8 @@ class c extends l {
         if (Number.isNaN(+t)) {
           if (D.test(t))
             return this.getValidDateOrNull(new Date(t));
-        } else
-          return this.getValidDateOrNull(new Date(+t * 1e3));
-      else
-        return null;
+        } else return this.getValidDateOrNull(new Date(+t * 1e3));
+      else return null;
     else if (typeof t == "number")
       return this.getValidDateOrNull(new Date(t * 1e3));
     return super.deserialize(t);

package/core/overlay/overlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/overlay/overlay.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAK1C;;;GAGG;AACH,wBAAgB,oBAAoB,IAAI,cAAc,CASrD;AAqDD;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,CAyB9D;AAED,wBAAgB,oBAAoB,IAAI,IAAI,CAqB3C;AACD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,2BAA2B;QACnC,QAAQ,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC;QAC5B,SAAS,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC;QAC7B,OAAO,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC;QAC3B,QAAQ,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC;KAC7B;CACF"}
+{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/overlay/overlay.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAK1C;;;GAGG;AACH,wBAAgB,oBAAoB,IAAI,cAAc,CASrD;AA4DD;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,CAyB9D;AAED,wBAAgB,oBAAoB,IAAI,IAAI,CAqB3C;AACD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,2BAA2B;QACnC,QAAQ,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC;QAC5B,SAAS,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC;QAC7B,OAAO,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC;QAC3B,QAAQ,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC;KAC7B;CACF"}

package/core/overlay.js

@@ -1,7 +1,7 @@
-import { html as w } from "lit";
+import { html as E } from "lit";
 const x = ":is(sbb-dialog, sbb-navigation, sbb-menu, sbb-overlay)[data-state='opened']";
-function R() {
-  return w`
+function $() {
+  return E`
     <div class="sbb-gap-fix-wrapper">
       <div class="sbb-gap-fix-corner" id="left"></div>
     </div>
@@ -10,41 +10,46 @@ function R() {
     </div>
   `;
 }
-const E = (t, e) => {
+const O = (t, e) => {
   let n = t.parentElement;
-  const o = [];
-  for (; n && (o.push(n), n !== e); )
+  const i = [];
+  for (; n && (i.push(n), n !== e); )
     n = n.parentElement;
-  return o;
+  return i;
+}, w = (t) => {
+  t.setAttribute(
+    "data-sbb-inert",
+    `${+(t.getAttribute("data-sbb-inert") ?? void 0) + 1 || 0}`
+  );
 }, W = (t) => {
-  t.inert || (t.inert = !0, t.matches(x) ? t.setAttribute("data-sbb-inert", `${+t.getAttribute("data-sbb-inert") + 1 || 0}`) : t.toggleAttribute("data-sbb-inert", !0)), t.hasAttribute("aria-hidden") || (t.setAttribute("aria-hidden", "true"), t.toggleAttribute("data-sbb-aria-hidden", !0));
+  t.inert || (t.inert = !0, t.matches(x) ? w(t) : t.toggleAttribute("data-sbb-inert", !0)), t.hasAttribute("aria-hidden") || (t.setAttribute("aria-hidden", "true"), t.toggleAttribute("data-sbb-aria-hidden", !0));
 }, y = (t) => {
   t.hasAttribute("data-sbb-inert") && (t.inert = !1, t.removeAttribute("data-sbb-inert")), t.hasAttribute("data-sbb-aria-hidden") && (t.removeAttribute("aria-hidden"), t.removeAttribute("data-sbb-aria-hidden"));
 };
-function $(t) {
+function C(t) {
   y(t);
   const e = t.closest("body > *");
   Array.from(document.querySelectorAll("body > *")).filter(
-    (i) => i !== e
-  ).forEach((i) => W(i));
-  let o = [];
-  const a = E(t, e);
-  for (const i of a)
-    o = o.concat(
-      Array.from(i.children).filter(
+    (o) => o !== e
+  ).forEach((o) => W(o));
+  let i = [];
+  const a = O(t, e);
+  for (const o of a)
+    i = i.concat(
+      Array.from(o.children).filter(
         (c) => c !== t && !a.includes(c)
       )
-    ), i.matches(x) && i.setAttribute("data-sbb-inert", `${+i.getAttribute("data-sbb-inert") + 1 || 0}`);
-  o.forEach((i) => W(i));
+    ), o.matches(x) && w(o);
+  i.forEach((o) => W(o));
 }
-function C() {
+function z() {
   const t = Array.from(
     document.documentElement.querySelectorAll(x)
   );
   if (t.length) {
     t.forEach((e) => {
       const n = +e.getAttribute("data-sbb-inert") - 1;
-      e.setAttribute("data-sbb-inert", `${n}`), n && n < 0 && (y(e), Array.from(e.children).forEach((o) => y(o)));
+      e.setAttribute("data-sbb-inert", `${n}`), n && n < 0 && (y(e), Array.from(e.children).forEach((i) => y(i)));
     });
     return;
   }
@@ -52,9 +57,9 @@ function C() {
     (e) => y(e)
   );
 }
-function O(t) {
-  const e = window.getComputedStyle(t), n = e.display, o = parseInt(e.maxHeight, 10).toString();
-  if (n !== "none" && o !== "0")
+function S(t) {
+  const e = window.getComputedStyle(t), n = e.display, i = parseInt(e.maxHeight, 10).toString();
+  if (n !== "none" && i !== "0")
     return {
       scrollHeight: t.scrollHeight,
       clientHeight: t.clientHeight,
@@ -64,21 +69,21 @@ function O(t) {
       offsetWidth: t.offsetWidth
     };
   t.style.position = "absolute", t.style.visibility = "hidden", t.style.display = "block";
-  const a = t.scrollHeight, i = t.clientHeight, c = t.offsetHeight, u = t.scrollWidth, r = t.clientWidth, s = t.offsetWidth;
-  return t.style.display = "", t.style.position = "", t.style.visibility = "", { scrollHeight: a, clientHeight: i, offsetHeight: c, scrollWidth: u, clientWidth: r, offsetWidth: s };
+  const a = t.scrollHeight, o = t.clientHeight, c = t.offsetHeight, u = t.scrollWidth, r = t.clientWidth, s = t.offsetWidth;
+  return t.style.display = "", t.style.position = "", t.style.visibility = "", { scrollHeight: a, clientHeight: o, offsetHeight: c, scrollWidth: u, clientWidth: r, offsetWidth: s };
 }
-function z(t, e) {
+function B(t, e) {
   if (!t || !e)
     return !1;
   const n = t.getBoundingClientRect();
   return n.top <= e.clientY && e.clientY <= n.top + n.height && n.left <= e.clientX && e.clientX <= n.left + n.width;
 }
-function S(t, e, n, o) {
-  const i = (o == null ? void 0 : o.verticalOffset) || 0, c = (o == null ? void 0 : o.horizontalOffset) || 0, u = (o == null ? void 0 : o.responsiveHeight) || !1, r = e.getBoundingClientRect(), s = O(t), f = r.left, m = r.top, g = document.documentElement.clientWidth - (f + r.width), h = m - i, A = document.documentElement.clientHeight - (m + r.height + i);
-  let l = f, p = m + r.height + i, b = s.offsetWidth - r.width;
+function P(t, e, n, i) {
+  const o = (i == null ? void 0 : i.verticalOffset) || 0, c = (i == null ? void 0 : i.horizontalOffset) || 0, u = (i == null ? void 0 : i.responsiveHeight) || !1, r = e.getBoundingClientRect(), s = S(t), f = r.left, m = r.top, g = document.documentElement.clientWidth - (f + r.width), h = m - o, A = document.documentElement.clientHeight - (m + r.height + o);
+  let l = f, p = m + r.height + o, b = s.offsetWidth - r.width;
   const d = { horizontal: "start", vertical: "below" };
-  let H = `${A - i}px`;
-  o != null && o.centered && f - 16 + r.width / 2 > s.offsetWidth / 2 && g - 16 > b / 2 && (l -= b /= 2, d.horizontal = "center"), g < b && f > b && (l = l - b, d.horizontal = "end"), c && d.horizontal !== "center" && r.width / 2 < c && (l += c * (d.horizontal === "start" ? -1 : 1)), (f < b && g < b || document.documentElement.clientWidth < s.offsetWidth) && (l = document.documentElement.clientWidth / 2 - s.offsetWidth / 2), (A - i < s.scrollHeight && h - i > (u ? s.clientHeight : s.scrollHeight) || h > A && A - i < s.clientHeight && !u) && (p = h < s.scrollHeight ? p - r.height - h - i : m - s.clientHeight - i, H = `${h - i}px`, d.vertical = "above");
+  let H = `${A - o}px`;
+  i != null && i.centered && f - 16 + r.width / 2 > s.offsetWidth / 2 && g - 16 > b / 2 && (l -= b /= 2, d.horizontal = "center"), g < b && f > b && (l = l - b, d.horizontal = "end"), c && d.horizontal !== "center" && r.width / 2 < c && (l += c * (d.horizontal === "start" ? -1 : 1)), (f < b && g < b || document.documentElement.clientWidth < s.offsetWidth) && (l = document.documentElement.clientWidth / 2 - s.offsetWidth / 2), (A - o < s.scrollHeight && h - o > (u ? s.clientHeight : s.scrollHeight) || h > A && A - o < s.clientHeight && !u) && (p = h < s.scrollHeight ? p - r.height - h - o : m - s.clientHeight - o, H = `${h - o}px`, d.vertical = "above");
   const v = n.getBoundingClientRect();
   return v.left < 0 && (l -= v.left), v.top < 0 && (p -= v.top), {
     top: p,
@@ -87,35 +92,35 @@ function S(t, e, n, o) {
     alignment: d
   };
 }
-function B(t, e, n, o, a) {
+function I(t, e, n, i, a) {
   if (!t || !e)
     return;
   a.style.setProperty("--sbb-options-panel-width", `${e.offsetWidth}px`), a.style.setProperty("--sbb-options-panel-origin-height", `${e.offsetHeight}px`);
-  const i = S(n, e, o);
-  a.style.setProperty("--sbb-options-panel-position-x", `${i.left}px`), a.style.setProperty("--sbb-options-panel-position-y", `${i.top}px`), a.style.setProperty("--sbb-options-panel-max-height", i.maxHeight), a.setAttribute("data-options-panel-position", i.alignment.vertical), e.setAttribute("data-options-panel-position", i.alignment.vertical);
+  const o = P(n, e, i);
+  a.style.setProperty("--sbb-options-panel-position-x", `${o.left}px`), a.style.setProperty("--sbb-options-panel-position-y", `${o.top}px`), a.style.setProperty("--sbb-options-panel-max-height", o.maxHeight), a.setAttribute("data-options-panel-position", o.alignment.vertical), e.setAttribute("data-options-panel-position", o.alignment.vertical);
 }
-function I(t, e, n, o) {
-  t && (t.setAttribute("aria-haspopup", e), t.setAttribute("aria-controls", n), t.setAttribute("aria-expanded", `${o === "opening" || o === "opened"}`));
+function Y(t, e, n, i) {
+  t && (t.setAttribute("aria-haspopup", e), t.setAttribute("aria-controls", n), t.setAttribute("aria-expanded", `${i === "opening" || i === "opened"}`));
 }
-function Y(t) {
+function M(t) {
   t && (t.removeAttribute("aria-haspopup"), t.removeAttribute("aria-controls"), t.removeAttribute("aria-expanded"));
 }
-function M(t, e, n) {
+function X(t, e, n) {
   t && (t.setAttribute("autocomplete", "off"), t.setAttribute("role", "combobox"), t.setAttribute("aria-autocomplete", "list"), t.setAttribute("aria-haspopup", "listbox"), t.setAttribute("aria-controls", e), t.setAttribute("aria-owns", e), t.setAttribute("aria-expanded", `${n}`));
 }
-function X(t) {
+function q(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"));
 }
 export {
-  $ as applyInertMechanism,
-  S as getElementPosition,
-  O as getElementRectangle,
-  z as isEventOnElement,
-  R as overlayGapFixCorners,
-  X as removeAriaComboBoxAttributes,
-  Y as removeAriaOverlayTriggerAttributes,
-  C as removeInertMechanism,
-  M as setAriaComboBoxAttributes,
-  I as setAriaOverlayTriggerAttributes,
-  B as setOverlayPosition
+  C as applyInertMechanism,
+  P as getElementPosition,
+  S as getElementRectangle,
+  B as isEventOnElement,
+  $ as overlayGapFixCorners,
+  q as removeAriaComboBoxAttributes,
+  M as removeAriaOverlayTriggerAttributes,
+  z as removeInertMechanism,
+  X as setAriaComboBoxAttributes,
+  Y as setAriaOverlayTriggerAttributes,
+  I as setOverlayPosition
 };

package/core/testing/event-spy.d.ts

@@ -1,5 +1,5 @@
 /**
- * This class exists to facilitate the E2E test migration from stencil to lit.
+ * This class exists to facilitate the test migration from stencil to lit.
  * It mimics the API that stencil provided to test events.
  *
  * TODO: Document me

package/core/testing/wait-for-image-ready.d.ts

@@ -0,0 +1,4 @@
+import { SbbImageElement } from '../../image.js';
+
+export declare function waitForImageReady(element: HTMLImageElement | SbbImageElement, timeoutInMilliseconds?: number): Promise<void>;
+//# sourceMappingURL=wait-for-image-ready.d.ts.map

package/core/testing/wait-for-image-ready.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"wait-for-image-ready.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/testing/wait-for-image-ready.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAEtD,wBAAsB,iBAAiB,CACrC,OAAO,EAAE,gBAAgB,GAAG,eAAe,EAC3C,qBAAqB,SAAW,GAC/B,OAAO,CAAC,IAAI,CAAC,CAcf"}

package/core/testing.d.ts

@@ -2,5 +2,6 @@ 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-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,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,mCAAmC,CAAC;AAClD,cAAc,8BAA8B,CAAC"}

package/core/testing.js

@@ -21,42 +21,53 @@ class u {
     });
   }
 }
-const h = (t, n, e) => {
+const m = (t, n, e) => {
   if (t)
     return Mocha.describe(n, e);
-}, m = (t, n, e) => {
+}, h = (t, n, e) => {
   if (t)
     return Mocha.test(n, e);
 };
 function v(t) {
   window.scrollTo(t), document.dispatchEvent(new Event("scroll"));
 }
-async function g(t, n = 30, e = 2 * 1e3) {
-  const s = /* @__PURE__ */ new Date();
-  let i = 0;
+async function d(t, n = 30, e = 2 * 1e3) {
+  const i = /* @__PURE__ */ new Date();
+  let o = 0;
   function r() {
-    return i++, t();
+    return o++, t();
   }
-  for (; !await r() && s.getTime() + e >= (/* @__PURE__ */ new Date()).getTime(); )
-    await new Promise((o) => setTimeout(o, n));
-  return s.getTime() + e < (/* @__PURE__ */ new Date()).getTime() ? Promise.reject(
-    `waitForCondition timeout: ${t.toString()}, attempts: ${i}, start: ${s.getTime()}, end: ${(/* @__PURE__ */ new Date()).getTime()}`
+  for (; !await r() && i.getTime() + e >= (/* @__PURE__ */ new Date()).getTime(); )
+    await new Promise((s) => setTimeout(s, n));
+  return i.getTime() + e < (/* @__PURE__ */ new Date()).getTime() ? Promise.reject(
+    `waitForCondition timeout: ${t.toString()}, attempts: ${o}, start: ${i.getTime()}, end: ${(/* @__PURE__ */ new Date()).getTime()}`
   ) : Promise.resolve(!0);
 }
-const a = (t) => !!t.updateComplete, l = Promise.resolve(), c = async (t) => {
+async function g(t, n = 2 * 1e3) {
+  t.complete || await new Promise((e, i) => {
+    const o = setTimeout(() => i("image loading timeout"), n);
+    t.addEventListener("load", () => {
+      clearTimeout(o), e();
+    }), t.addEventListener("error", () => {
+      clearTimeout(o), i("image error");
+    });
+  });
+}
+const a = (t) => !!t.updateComplete, c = Promise.resolve(), l = async (t) => {
   const n = [t, ...t.querySelectorAll("*")].filter(a).map((e) => [
     e.updateComplete,
-    e.hydrationComplete ?? l,
-    c(e.renderRoot)
+    e.hydrationComplete ?? c,
+    l(e.renderRoot)
   ]).flat(1 / 0);
   await Promise.all(n);
 };
 export {
   u as EventSpy,
-  h as describeIf,
+  m as describeIf,
   a as isReactiveElement,
   v as mockScrollTo,
-  m as testIf,
-  g as waitForCondition,
-  c as waitForLitRender
+  h as testIf,
+  d as waitForCondition,
+  g as waitForImageReady,
+  l as waitForLitRender
 };

package/custom-elements.json

@@ -5059,6 +5059,17 @@
             }
           ],
           "members": [
+            {
+              "kind": "field",
+              "name": "events",
+              "privacy": "public",
+              "static": true,
+              "readonly": true,
+              "default": "{ error: 'error', load: 'load', }",
+              "type": {
+                "text": "{\n    error: 'error',\n    load: 'load',\n  }"
+              }
+            },
             {
               "kind": "field",
               "name": "_captionElement",
@@ -5267,6 +5278,16 @@
               "attribute": "aspect-ratio",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "complete",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "description": "Whether the image is finished loading or failed to load.",
+              "readonly": true
+            },
             {
               "kind": "method",
               "name": "_logPerformanceMarks",
@@ -5366,6 +5387,22 @@
               }
             }
           ],
+          "events": [
+            {
+              "name": "load",
+              "type": {
+                "text": "Event"
+              },
+              "description": "Emits when the image has been loaded."
+            },
+            {
+              "name": "error",
+              "type": {
+                "text": "Event"
+              },
+              "description": "Emits when the image loading ended in an error."
+            }
+          ],
           "attributes": [
             {
               "name": "alt",
@@ -29897,7 +29934,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "This class exists to facilitate the E2E test migration from stencil to lit.\nIt mimics the API that stencil provided to test events.\n\nTODO: Document me",
+          "description": "This class exists to facilitate the test migration from stencil to lit.\nIt mimics the API that stencil provided to test events.\n\nTODO: Document me",
           "name": "EventSpy",
           "members": [
             {
@@ -30073,6 +30110,27 @@
             }
           ]
         },
+        {
+          "kind": "function",
+          "name": "waitForImageReady",
+          "return": {
+            "type": {
+              "text": "Promise<void>"
+            }
+          },
+          "parameters": [
+            {
+              "name": "element",
+              "type": {
+                "text": "HTMLImageElement | SbbImageElement"
+              }
+            },
+            {
+              "name": "timeoutInMilliseconds",
+              "default": "2 * 1000"
+            }
+          ]
+        },
         {
           "kind": "function",
           "name": "isReactiveElement",
@@ -30153,6 +30211,14 @@
             "module": "core/testing.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "waitForImageReady",
+          "declaration": {
+            "name": "waitForImageReady",
+            "module": "core/testing.js"
+          }
+        },
         {
           "kind": "js",
           "name": "isReactiveElement",
@@ -47749,11 +47815,11 @@
             {
               "kind": "field",
               "name": "horizontalFrom",
+              "privacy": "public",
+              "description": "Overrides the behaviour of `orientation` property.",
               "type": {
                 "text": "SbbHorizontalFrom | undefined"
               },
-              "privacy": "public",
-              "description": "Overrides the behaviour of `orientation` property.",
               "attribute": "horizontal-from",
               "reflects": true
             },
@@ -48009,10 +48075,10 @@
             },
             {
               "name": "horizontal-from",
+              "description": "Overrides the behaviour of `orientation` property.",
               "type": {
                 "text": "SbbHorizontalFrom | undefined"
               },
-              "description": "Overrides the behaviour of `orientation` property.",
               "fieldName": "horizontalFrom"
             },
             {