@sbb-esta/lyne-elements 0.52.0 → 0.52.1

package/core/mixins.js

@@ -1,24 +1,24 @@
-import { property as l, state as _ } from "lit/decorators.js";
-import { defaultConverter as u, isServer as h, html as o, nothing as c } from "lit";
-import { hostAttributes as g } from "./decorators.js";
-import { preventScrollOnSpacebarPress as p, forwardEventToHost as C } from "./eventing.js";
-import { getLocalName as b } from "./dom.js";
+import { property as l, state as g } from "lit/decorators.js";
+import { defaultConverter as c, isServer as d, html as o, nothing as u } from "lit";
+import { hostAttributes as y } from "./decorators.js";
+import { preventScrollOnSpacebarPress as b, forwardEventToHost as S } from "./eventing.js";
+import { getLocalName as p } from "./dom.js";
 import "../screen-reader-only.js";
-var S = Object.defineProperty, k = Object.getOwnPropertyDescriptor, E = (a, r, s, t) => {
-  for (var e = k(r, s), i = a.length - 1, n; i >= 0; i--)
-    (n = a[i]) && (e = n(r, s, e) || e);
-  return e && S(r, s, e), e;
+var _ = Object.defineProperty, E = Object.getOwnPropertyDescriptor, x = (a, s, r, t) => {
+  for (var e = E(s, r), i = a.length - 1, n; i >= 0; i--)
+    (n = a[i]) && (e = n(s, r, e) || e);
+  return e && _(s, r, e), e;
 };
-const y = (a) => {
-  class r extends a {
+const C = (a) => {
+  class s extends a {
     constructor() {
-      super(...arguments), this._disabled = !1;
+      super(...arguments), this.a = !1;
     }
     set disabled(t) {
-      this._disabled = !!t;
+      this.a = !!t;
     }
     get disabled() {
-      return this._disabled || this.isDisabledExternally();
+      return this.a || this.isDisabledExternally();
     }
     /**
      * Will be used as 'or' check to the current disabled state.
@@ -28,26 +28,26 @@ const y = (a) => {
       return !1;
     }
   }
-  return E([
+  return x([
     l({ reflect: !0, type: Boolean })
-  ], r.prototype, "disabled"), r;
-}, X = (a) => {
-  class r extends y(a) {
+  ], s.prototype, "disabled"), s;
+}, z = (a) => {
+  class s extends C(a) {
     willUpdate(t) {
       super.willUpdate(t), t.has("disabled") && (this.disabled ? (this.setAttribute("aria-disabled", "true"), this.removeAttribute("tabindex")) : (this.removeAttribute("aria-disabled"), this.setAttribute("tabindex", "0")));
     }
   }
-  return r;
+  return s;
 };
-var x = Object.defineProperty, w = Object.getOwnPropertyDescriptor, d = (a, r, s, t) => {
-  for (var e = t > 1 ? void 0 : t ? w(r, s) : r, i = a.length - 1, n; i >= 0; i--)
-    (n = a[i]) && (e = (t ? n(r, s, e) : n(e)) || e);
-  return t && e && x(r, s, e), e;
+var w = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, h = (a, s, r, t) => {
+  for (var e = t > 1 ? void 0 : t ? $(s, r) : s, i = a.length - 1, n; i >= 0; i--)
+    (n = a[i]) && (e = (t ? n(s, r, e) : n(e)) || e);
+  return t && e && w(s, r, e), e;
 };
-const $ = (a) => {
-  const s = class s extends a {
+const A = (a) => {
+  const r = class r extends a {
     constructor() {
-      super(...arguments), this._value = null, this.internals = this.attachInternals(), this.formDisabled = !1;
+      super(...arguments), this.a = null, this.internals = this.attachInternals(), this.formDisabled = !1;
     }
     /**
      * Returns the form owner of internals target element.
@@ -66,10 +66,10 @@ const $ = (a) => {
       return this.localName;
     }
     set value(e) {
-      this._value = e, this.updateFormValue();
+      this.a = e, this.updateFormValue();
     }
     get value() {
-      return this._value;
+      return this.a;
     }
     /**
      * Returns the ValidityState object for internals target element.
@@ -133,31 +133,31 @@ const $ = (a) => {
       this.internals.setFormValue(this.value);
     }
   };
-  s.formAssociated = !0;
-  let r = s;
-  return d([
+  r.formAssociated = !0;
+  let s = r;
+  return h([
     l()
-  ], r.prototype, "name", 1), d([
+  ], s.prototype, "name", 1), h([
     l()
-  ], r.prototype, "value", 1), d([
-    _()
-  ], r.prototype, "formDisabled", 2), r;
+  ], s.prototype, "value", 1), h([
+    g()
+  ], s.prototype, "formDisabled", 2), s;
 };
-var R = Object.defineProperty, A = Object.getOwnPropertyDescriptor, P = (a, r, s, t) => {
-  for (var e = A(r, s), i = a.length - 1, n; i >= 0; i--)
-    (n = a[i]) && (e = n(r, s, e) || e);
-  return e && R(r, s, e), e;
+var k = Object.defineProperty, P = Object.getOwnPropertyDescriptor, O = (a, s, r, t) => {
+  for (var e = P(s, r), i = a.length - 1, n; i >= 0; i--)
+    (n = a[i]) && (e = n(s, r, e) || e);
+  return e && k(s, r, e), e;
 };
-const O = (a) => {
-  class r extends a {
+const L = (a) => {
+  class s extends a {
     constructor() {
-      super(...arguments), this._required = !1;
+      super(...arguments), this.a = !1;
     }
     set required(t) {
-      this._required = !!t;
+      this.a = !!t;
     }
     get required() {
-      return this._required || this.isRequiredExternally();
+      return this.a || this.isRequiredExternally();
     }
     async willUpdate(t) {
       super.willUpdate(t), t.has("required") && (this.internals.ariaRequired = `${this.required}`);
@@ -170,40 +170,40 @@ const O = (a) => {
       return !1;
     }
   }
-  return P([
+  return O([
     l({ reflect: !0, type: Boolean })
-  ], r.prototype, "required"), r;
+  ], s.prototype, "required"), s;
 };
-var q = Object.defineProperty, L = Object.getOwnPropertyDescriptor, f = (a, r, s, t) => {
-  for (var e = t > 1 ? void 0 : t ? L(r, s) : r, i = a.length - 1, n; i >= 0; i--)
-    (n = a[i]) && (e = (t ? n(r, s, e) : n(e)) || e);
-  return t && e && q(r, s, e), e;
+var D = Object.defineProperty, R = Object.getOwnPropertyDescriptor, f = (a, s, r, t) => {
+  for (var e = t > 1 ? void 0 : t ? R(s, r) : s, i = a.length - 1, n; i >= 0; i--)
+    (n = a[i]) && (e = (t ? n(s, r, e) : n(e)) || e);
+  return t && e && D(s, r, e), e;
 };
-const z = (a) => {
-  let r = class extends y(O($(a))) {
+const J = (a) => {
+  let s = class extends C(L(A(a))) {
     constructor() {
-      super(), this._attributeMutationBlocked = !1, this._checked = !1, this._handleKeyboardInteraction = (s) => {
-        s.key === " " && this._handleUserInteraction();
-      }, this._handleUserInteraction = () => {
-        var s;
-        this.disabled || ((s = this.withUserInteraction) == null || s.call(this), this.checked = !this.checked, this._attributeMutationBlocked = !0, this.dispatchEvent(new InputEvent("input", { composed: !0, bubbles: !0 })), this.dispatchEvent(new Event("change", { bubbles: !0 })), this.dispatchEvent(new CustomEvent("didChange", { bubbles: !0 })));
+      super(), this.a = !1, this.c = !1, this.d = (r) => {
+        r.key === " " && this.b();
+      }, this.b = () => {
+        var r;
+        this.disabled || ((r = this.withUserInteraction) == null || r.call(this), this.checked = !this.checked, this.a = !0, this.dispatchEvent(new InputEvent("input", { composed: !0, bubbles: !0 })), this.dispatchEvent(new Event("change", { bubbles: !0 })), this.dispatchEvent(new CustomEvent("didChange", { bubbles: !0 })));
       }, this.internals.role = "checkbox";
     }
-    set checked(s) {
-      const t = typeof s == "object" ? s.attribute : !1;
-      t && (s = s.value), this.hasUpdated && !t && (this._attributeMutationBlocked = !0), this._checked = !!s, this.updateFormValue();
+    set checked(r) {
+      const t = typeof r == "object" ? r.attribute : !1;
+      t && (r = r.value), this.hasUpdated && !t && (this.a = !0), this.c = !!r, this.updateFormValue();
     }
     get checked() {
-      return this._checked;
+      return this.c;
     }
     connectedCallback() {
-      super.connectedCallback(), this.addEventListener("click", this._handleUserInteraction), this.addEventListener("keydown", p), this.addEventListener("keyup", this._handleKeyboardInteraction);
+      super.connectedCallback(), this.addEventListener("click", this.b), this.addEventListener("keydown", b), this.addEventListener("keyup", this.d);
     }
     disconnectedCallback() {
-      super.disconnectedCallback(), this.removeEventListener("click", this._handleUserInteraction), this.removeEventListener("keydown", p), this.removeEventListener("keyup", this._handleKeyboardInteraction);
+      super.disconnectedCallback(), this.removeEventListener("click", this.b), this.removeEventListener("keydown", b), this.removeEventListener("keyup", this.d);
     }
-    attributeChangedCallback(s, t, e) {
-      (s !== "checked" || !this._attributeMutationBlocked) && super.attributeChangedCallback(s, t, e);
+    attributeChangedCallback(r, t, e) {
+      (r !== "checked" || !this.a) && super.attributeChangedCallback(r, t, e);
     }
     /**
      * Is called whenever the form is being reset.
@@ -211,7 +211,7 @@ const z = (a) => {
      * @internal
      */
     formResetCallback() {
-      this.checked = this.hasAttribute("checked"), this._attributeMutationBlocked = !1;
+      this.checked = this.hasAttribute("checked"), this.a = !1;
     }
     /**
      *  Called when the browser is trying to restore element’s state to state in which case
@@ -222,8 +222,8 @@ const z = (a) => {
      *
      * @internal
      */
-    formStateRestoreCallback(s, t) {
-      s && (this.checked = s === "true");
+    formStateRestoreCallback(r, t) {
+      r && (this.checked = r === "true");
     }
     updateFormValue() {
       this.checked ? this.internals.setFormValue(this.value, `${this.checked}`) : this.internals.setFormValue(null);
@@ -233,30 +233,30 @@ const z = (a) => {
     l({
       type: Boolean,
       converter: {
-        ...u,
+        ...c,
         // We need to pass information to the setter so that we know it was called by attribute change.
-        fromAttribute: (s, t) => {
+        fromAttribute: (r, t) => {
           var i, n;
-          return { value: (n = (i = u).fromAttribute) == null ? void 0 : n.call(i, s, t), attribute: !0 };
+          return { value: (n = (i = c).fromAttribute) == null ? void 0 : n.call(i, r, t), attribute: !0 };
         }
       }
     })
-  ], r.prototype, "checked", 1), r = f([
-    g({
+  ], s.prototype, "checked", 1), s = f([
+    y({
       tabindex: "0"
     })
-  ], r), r;
-}, U = "litElementHydrateSupport", D = h || globalThis.testGroup === "ssr-non-hydrated", M = (a) => {
-  class r extends a {
+  ], s), s;
+}, U = "litElementHydrateSupport", N = d || globalThis.testGroup === "ssr-non-hydrated", M = (a) => {
+  class s extends a {
     constructor() {
-      super(...arguments), this._hydrationRequired = !1, this._hydrationComplete = new Promise(
-        (t) => this._resolveHydration = t
-      ), this._handleBeforeHydrationSlotchange = (t) => {
-        if (!this._hydrationRequired)
+      super(...arguments), this.a = !1, this.d = new Promise(
+        (t) => this.b = t
+      ), this.c = (t) => {
+        if (!this.a)
           return;
         t.stopImmediatePropagation();
         const e = t.target;
-        this.hydrationComplete.then(() => C(t, e));
+        this.hydrationComplete.then(() => S(t, e));
       };
     }
     /**
@@ -268,21 +268,21 @@ const z = (a) => {
      * @internal
      */
     get hydrationComplete() {
-      return this._hydrationComplete;
+      return this.d;
     }
     createRenderRoot() {
       var t, e;
-      if (this._hydrationRequired = !!this.shadowRoot && U in globalThis && (h || !D), !this._hydrationRequired)
-        this._resolveHydration(!1);
+      if (this.a = !!this.shadowRoot && U in globalThis && (d || !N), !this.a)
+        this.b(!1);
       else {
         const i = (t = this.shadowRoot) == null ? void 0 : t.querySelectorAll("slot");
         i != null && i.length && (i.forEach(
-          (n) => n.addEventListener("slotchange", this._handleBeforeHydrationSlotchange, {
+          (n) => n.addEventListener("slotchange", this.c, {
             capture: !0
           })
         ), this.hydrationComplete.then(
           () => i.forEach(
-            (n) => n.removeEventListener("slotchange", this._handleBeforeHydrationSlotchange)
+            (n) => n.removeEventListener("slotchange", this.c)
           )
         )), (e = this.recoverSsrState) == null || e.call(this);
       }
@@ -290,10 +290,10 @@ const z = (a) => {
     }
     willUpdate(t) {
       var e;
-      super.willUpdate(t), h && ((e = this.recoverSsrState) == null || e.call(this));
+      super.willUpdate(t), d && ((e = this.recoverSsrState) == null || e.call(this));
     }
     update(t) {
-      super.update(t), this._hydrationRequired && (this._hydrationRequired = !1, this._resolveHydration(!0));
+      super.update(t), this.a && (this.a = !1, this.b(!0));
     }
     /** Reads and removes an attribute with the given name. Either returns the attributte value or null. */
     getAndRemoveAttribute(t) {
@@ -301,17 +301,17 @@ const z = (a) => {
       return this.removeAttribute(t), e;
     }
   }
-  return r;
+  return s;
 };
-var B = Object.defineProperty, H = (a, r, s, t) => {
+var V = Object.defineProperty, j = (a, s, r, t) => {
   for (var e = void 0, i = a.length - 1, n; i >= 0; i--)
-    (n = a[i]) && (e = n(r, s, e) || e);
-  return e && B(r, s, e), e;
+    (n = a[i]) && (e = n(s, r, e) || e);
+  return e && V(s, r, e), e;
 };
-const m = "data-ssr-child-count", v = "li", J = (a) => {
-  class r extends M(a) {
+const m = "data-ssr-child-count", v = "li", K = (a) => {
+  class s extends M(a) {
     constructor() {
-      super(...arguments), this.listChildren = [], this._handleSlotchange = () => {
+      super(...arguments), this.listChildren = [], this.a = () => {
         const t = Array.from(this.children ?? []).filter(
           (e) => this.listChildLocalNames.includes(e.localName)
         );
@@ -322,11 +322,11 @@ const m = "data-ssr-child-count", v = "li", J = (a) => {
     }
     connectedCallback() {
       var t;
-      super.connectedCallback(), (t = this.shadowRoot) == null || t.addEventListener("slotchange", this._handleSlotchange, { passive: !0 });
+      super.connectedCallback(), (t = this.shadowRoot) == null || t.addEventListener("slotchange", this.a, { passive: !0 });
     }
     disconnectedCallback() {
       var t;
-      super.disconnectedCallback(), (t = this.shadowRoot) == null || t.removeEventListener("slotchange", this._handleSlotchange);
+      super.disconnectedCallback(), (t = this.shadowRoot) == null || t.removeEventListener("slotchange", this.a);
     }
     /**
      * Renders list and list slots for slotted children or an amount of list slots
@@ -341,15 +341,15 @@ const m = "data-ssr-child-count", v = "li", J = (a) => {
       const e = this.listSlotNames();
       return e.length >= 2 ? o`
           <ul
-            class=${t.class || (this.localName ?? b(this))}
-            aria-label=${t.ariaLabel || c}
-            aria-labelledby=${t.ariaLabelledby || c}
+            class=${t.class || (this.localName ?? p(this))}
+            aria-label=${t.ariaLabel || u}
+            aria-labelledby=${t.ariaLabelledby || u}
           >
             ${e.map((i) => o`<li><slot name=${i}></slot></li>`)}
           </ul>
           ${this.renderHiddenSlot()}
         ` : e.length === 1 ? o`<sbb-screen-reader-only>${t.ariaLabel}</sbb-screen-reader-only>
-          <span class=${t.class || (this.localName ?? b(this))}>
+          <span class=${t.class || (this.localName ?? p(this))}>
             <span><slot name=${e[0]}></slot></span>
           </span>
           ${this.renderHiddenSlot()} ` : this.renderHiddenSlot();
@@ -375,51 +375,51 @@ const m = "data-ssr-child-count", v = "li", J = (a) => {
       return o`<span hidden><slot></slot></span>`;
     }
   }
-  return H([
-    _()
-  ], r.prototype, "listChildren"), r;
+  return j([
+    g()
+  ], s.prototype, "listChildren"), s;
 };
-var I = Object.defineProperty, N = (a, r, s, t) => {
+var q = Object.defineProperty, H = (a, s, r, t) => {
   for (var e = void 0, i = a.length - 1, n; i >= 0; i--)
-    (n = a[i]) && (e = n(r, s, e) || e);
-  return e && I(r, s, e), e;
+    (n = a[i]) && (e = n(s, r, e) || e);
+  return e && q(s, r, e), e;
 };
 const Q = (a) => {
-  class r extends a {
+  class s extends a {
     constructor() {
       super(...arguments), this.negative = !1;
     }
   }
-  return N([
+  return H([
     l({ reflect: !0, type: Boolean })
-  ], r.prototype, "negative"), r;
+  ], s.prototype, "negative"), s;
 }, W = (a) => {
-  class r extends a {
+  class s extends a {
     constructor() {
-      super(...arguments), this._updatePromise = Promise.resolve(), this._updateResolve = () => {
+      super(...arguments), this.a = Promise.resolve(), this.b = () => {
       };
     }
     startUpdate() {
-      this._updatePromise = new Promise((t) => this._updateResolve = t);
+      this.a = new Promise((t) => this.b = t);
     }
     completeUpdate() {
-      this._updateResolve();
+      this.b();
     }
     async getUpdateComplete() {
       const t = await super.getUpdateComplete();
-      return await this._updatePromise, t;
+      return await this.a, t;
     }
   }
-  return r;
+  return s;
 };
 export {
-  y as SbbDisabledMixin,
-  X as SbbDisabledTabIndexActionMixin,
-  z as SbbFormAssociatedCheckboxMixin,
-  $ as SbbFormAssociatedMixin,
+  C as SbbDisabledMixin,
+  z as SbbDisabledTabIndexActionMixin,
+  J as SbbFormAssociatedCheckboxMixin,
+  A as SbbFormAssociatedMixin,
   M as SbbHydrationMixin,
-  J as SbbNamedSlotListMixin,
+  K as SbbNamedSlotListMixin,
   Q as SbbNegativeMixin,
-  O as SbbRequiredMixin,
+  L as SbbRequiredMixin,
   W as SbbUpdateSchedulerMixin
 };

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"}