@breadstone/mosaik-elements-svelte 0.1.61 → 0.1.62

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## 0.1.62 (2026-07-27)
+
+### 🚀 Features
+
+- **theming:** replace direct event handling with proxy output subscription ([e313c5977b](https://github.com/RueDeRennes/mosaik/commit/e313c5977b))
+
 ## 0.1.61 (2026-07-27)
 
 ### 🩹 Fixes

package/index.mjs

@@ -1461,7 +1461,7 @@ function jn(e, t, n) {
 function Mn(e, t) {
 	return new Promise((n) => {
 		let r = (i) => {
-			i.target === e && (e.removeEventListener(t, r), n(i));
+			i.composedPath()[0] === e && (e.removeEventListener(t, r), n(i));
 		};
 		e.addEventListener(t, r);
 	});
@@ -21048,8 +21048,9 @@ var iT = function(e, t, n, r) {
 	_autoSizePadding;
 	_isVisible;
 	_inlineStyleController;
+	_connectionRevision;
 	constructor() {
-		super(), this.elevation = qw.Regular, this._anchorElement = null, this._anchor = null, this._active = !1, this._distance = 0, this._skidding = 0, this._placement = K.Top, this._arrow = !1, this._arrowPadding = 12, this._flip = !1, this._isFullScreen = !1, this._flipFallbackPlacements = [], this._flipFallbackStrategy = $w.BestFit, this._arrowPlacement = Zw.Anchor, this._flipBoundary = null, this._flipPadding = 0, this._shift = !1, this._shiftBoundary = null, this._shiftPadding = 0, this._autoSize = Qw.None, this._sync = eT.None, this._autoSizeBoundary = null, this._maxWidth = void 0, this._maxHeight = void 0, this._width = void 0, this._height = void 0, this._repositioned = new b(this, "repositioned"), this._activeChanged = new b(this, "activeChanged"), this._bodyClickSubscription = null, this._strategy = lC.Absolute, this._autoSizePadding = 0, this._isVisible = !1, this._inlineStyleController = new aS(this);
+		super(), this.elevation = qw.Regular, this._anchorElement = null, this._anchor = null, this._active = !1, this._distance = 0, this._skidding = 0, this._placement = K.Top, this._arrow = !1, this._arrowPadding = 12, this._flip = !1, this._isFullScreen = !1, this._flipFallbackPlacements = [], this._flipFallbackStrategy = $w.BestFit, this._arrowPlacement = Zw.Anchor, this._flipBoundary = null, this._flipPadding = 0, this._shift = !1, this._shiftBoundary = null, this._shiftPadding = 0, this._autoSize = Qw.None, this._sync = eT.None, this._autoSizeBoundary = null, this._maxWidth = void 0, this._maxHeight = void 0, this._width = void 0, this._height = void 0, this._repositioned = new b(this, "repositioned"), this._activeChanged = new b(this, "activeChanged"), this._bodyClickSubscription = null, this._strategy = lC.Absolute, this._autoSizePadding = 0, this._isVisible = !1, this._inlineStyleController = new aS(this), this._connectionRevision = 0;
 	}
 	static get is() {
 		return "mosaik-floating";
@@ -21229,65 +21230,66 @@ var iT = function(e, t, n, r) {
 		this.active = !1;
 	}
 	reposition() {
-		if (!this.active || !this._anchorElement) return;
-		let e = [Pw({
+		if (!this.isConnected || !this.active || !this._anchorElement?.isConnected || !this._bodyElement?.isConnected) return;
+		let e = this._anchorElement, t = this._bodyElement, n = this._connectionRevision, r = [Pw({
 			mainAxis: this.distance,
 			crossAxis: this.skidding
-		})], t = (e) => !(e === void 0 || e === "auto"), n = (e) => typeof e == "number" ? `${e}px` : e.toString();
-		(this.sync !== eT.None || t(this.width) || t(this.height) || t(this.maxWidth) || t(this.maxHeight)) && e.push(Lw({ apply: ({ rects: e }) => {
-			this.sync !== eT.None && ((this.sync === eT.Width || this.sync === eT.Both) && (this._bodyElement.style.width = `${e.reference.width}px`), (this.sync === eT.Height || this.sync === eT.Both) && (this._bodyElement.style.height = `${e.reference.height}px`)), t(this.width) ? this._bodyElement.style.width = n(this.width) : this.sync !== eT.Width && this.sync !== eT.Both && (this._bodyElement.style.width = ""), t(this.height) ? this._bodyElement.style.height = n(this.height) : this.sync !== eT.Height && this.sync !== eT.Both && (this._bodyElement.style.height = ""), t(this.maxWidth) ? this._bodyElement.style.maxWidth = n(this.maxWidth) : this._bodyElement.style.maxWidth = "", t(this.maxHeight) ? this._bodyElement.style.maxHeight = n(this.maxHeight) : this._bodyElement.style.maxHeight = "";
-		} })), this.flip && e.push(Iw({
+		})], i = (e) => !(e === void 0 || e === "auto"), a = (e) => typeof e == "number" ? `${e}px` : e.toString();
+		(this.sync !== eT.None || i(this.width) || i(this.height) || i(this.maxWidth) || i(this.maxHeight)) && r.push(Lw({ apply: ({ rects: e }) => {
+			this.sync !== eT.None && ((this.sync === eT.Width || this.sync === eT.Both) && (this._bodyElement.style.width = `${e.reference.width}px`), (this.sync === eT.Height || this.sync === eT.Both) && (this._bodyElement.style.height = `${e.reference.height}px`)), i(this.width) ? this._bodyElement.style.width = a(this.width) : this.sync !== eT.Width && this.sync !== eT.Both && (this._bodyElement.style.width = ""), i(this.height) ? this._bodyElement.style.height = a(this.height) : this.sync !== eT.Height && this.sync !== eT.Both && (this._bodyElement.style.height = ""), i(this.maxWidth) ? this._bodyElement.style.maxWidth = a(this.maxWidth) : this._bodyElement.style.maxWidth = "", i(this.maxHeight) ? this._bodyElement.style.maxHeight = a(this.maxHeight) : this._bodyElement.style.maxHeight = "";
+		} })), this.flip && r.push(Iw({
 			boundary: this.flipBoundary ?? void 0,
 			fallbackPlacements: this.flipFallbackPlacements,
 			fallbackStrategy: this.flipFallbackStrategy === $w.BestFit ? "bestFit" : "initialPlacement",
 			padding: this.flipPadding
-		})), this.shift && e.push(Fw({
+		})), this.shift && r.push(Fw({
 			boundary: this.shiftBoundary ?? void 0,
 			padding: this.shiftPadding
-		})), this.autoSize === Qw.None ? (this._inlineStyleController.remove("floating-auto-size-available-width"), this._inlineStyleController.remove("floating-auto-size-available-height")) : e.push(Lw({
+		})), this.autoSize === Qw.None ? (this._inlineStyleController.remove("floating-auto-size-available-width"), this._inlineStyleController.remove("floating-auto-size-available-height")) : r.push(Lw({
 			boundary: this.autoSizeBoundary ?? void 0,
 			padding: this.autoSizePadding,
 			apply: ({ availableWidth: e, availableHeight: t }) => {
 				this.autoSize === Qw.Vertical || this.autoSize === Qw.Both ? this._inlineStyleController.set("floating-auto-size-available-height", `${t}px`) : this._inlineStyleController.remove("floating-auto-size-available-height"), this.autoSize === Qw.Horizontal || this.autoSize === Qw.Both ? this._inlineStyleController.set("floating-auto-size-available-width", `${e}px`) : this._inlineStyleController.remove("floating-auto-size-available-width");
 			}
-		})), this.arrow && e.push(Que({
+		})), this.arrow && r.push(Que({
 			element: this._arrowElement,
 			padding: this.arrowPadding
 		}));
-		let r = this.strategy === "absolute" ? (e) => jw.getOffsetParent(e) : jw.getOffsetParent;
-		Rw(this._anchorElement, this._bodyElement, {
+		let o = this.strategy === "absolute" ? (e) => jw.getOffsetParent(e) : jw.getOffsetParent;
+		Rw(e, t, {
 			placement: this.placement,
-			middleware: e,
+			middleware: r,
 			strategy: this.strategy,
 			platform: {
 				...jw,
-				getOffsetParent: r
+				getOffsetParent: o
 			}
-		}).then(({ x: e, y: t, middlewareData: n, placement: r }) => {
-			let i = window.getComputedStyle(this).direction === "rtl", a = {
+		}).then(({ x: r, y: i, middlewareData: a, placement: o }) => {
+			if (!this.isCurrentConnection(n) || !this.active || this._anchorElement !== e || this._bodyElement !== t || !e.isConnected || !t.isConnected) return;
+			let s = window.getComputedStyle(this).direction === "rtl", c = {
 				top: "bottom",
 				right: "left",
 				bottom: "top",
 				left: "right"
-			}[r.split("-")[0]] ?? "";
-			if (this.setAttribute("data-current-placement", r), Object.assign(this._bodyElement.style, {
-				left: `${e}px`,
-				top: `${t}px`
+			}[o.split("-")[0]] ?? "";
+			if (this.setAttribute("data-current-placement", o), Object.assign(this._bodyElement.style, {
+				left: `${r}px`,
+				top: `${i}px`
 			}), this.arrow) {
-				let e = n.arrow?.x, t = n.arrow?.y, r = "", o = "", s = "", c = "";
+				let e = a.arrow?.x, t = a.arrow?.y, n = "", r = "", i = "", o = "";
 				if (this.arrowPlacement === Zw.Start) {
-					let n = typeof e == "number" ? `calc(${this.arrowPadding}px - var(--floating-arrow-padding-offset))` : "";
-					r = typeof t == "number" ? `calc(${this.arrowPadding}px - var(--floating-arrow-padding-offset))` : "", o = i ? n : "", c = i ? "" : n;
+					let i = typeof e == "number" ? `calc(${this.arrowPadding}px - var(--floating-arrow-padding-offset))` : "";
+					n = typeof t == "number" ? `calc(${this.arrowPadding}px - var(--floating-arrow-padding-offset))` : "", r = s ? i : "", o = s ? "" : i;
 				} else if (this.arrowPlacement === Zw.End) {
 					let n = typeof e == "number" ? `calc(${this.arrowPadding}px - var(--floating-arrow-padding-offset))` : "";
-					o = i ? "" : n, c = i ? n : "", s = typeof t == "number" ? `calc(${this.arrowPadding}px - var(--floating-arrow-padding-offset))` : "";
-				} else this.arrowPlacement === Zw.Center ? (c = typeof e == "number" ? "calc(50% - var(--floating-arrow-size-diagonal))" : "", r = typeof t == "number" ? "calc(50% - var(--floating-arrow-size-diagonal))" : "") : (c = typeof e == "number" ? `${e}px` : "", r = typeof t == "number" ? `${t}px` : "");
+					r = s ? "" : n, o = s ? n : "", i = typeof t == "number" ? `calc(${this.arrowPadding}px - var(--floating-arrow-padding-offset))` : "";
+				} else this.arrowPlacement === Zw.Center ? (o = typeof e == "number" ? "calc(50% - var(--floating-arrow-size-diagonal))" : "", n = typeof t == "number" ? "calc(50% - var(--floating-arrow-size-diagonal))" : "") : (o = typeof e == "number" ? `${e}px` : "", n = typeof t == "number" ? `${t}px` : "");
 				Object.assign(this._arrowElement.style, {
-					top: r,
-					right: o,
-					bottom: s,
-					left: c,
-					[a]: "calc(var(--floating-arrow-size-diagonal) * -1)"
+					top: n,
+					right: r,
+					bottom: i,
+					left: o,
+					[c]: "calc(var(--floating-arrow-size-diagonal) * -1)"
 				});
 			}
 		}), this._repositioned.emit();
@@ -21296,10 +21298,14 @@ var iT = function(e, t, n, r) {
 		return this._bodyElement;
 	}
 	connectedCallback() {
-		super.connectedCallback(), this.updateComplete.then(() => this.start());
+		this._connectionRevision++, super.connectedCallback();
+		let e = this._connectionRevision;
+		this.updateComplete.then(() => {
+			this.isCurrentConnection(e) && this.handleAnchorChange();
+		});
 	}
 	disconnectedCallback() {
-		this.stop();
+		this._connectionRevision++, this.stop(), super.disconnectedCallback();
 	}
 	onApplyTemplate() {
 		super.onApplyTemplate();
@@ -21310,11 +21316,21 @@ var iT = function(e, t, n, r) {
 		}
 	}
 	updated(e) {
-		super.updated(e), e.has("active") && (this.active ? (this._isVisible = !0, this.requestUpdate("isVisible"), this.updateComplete.then(() => {
-			this.play(this.enter ?? zw).then(() => this.start());
-		})) : this.play(this.exit ?? Bw).then(() => {
-			this.stop(), this._isVisible = !1, this.requestUpdate("isVisible");
-		})), e.has("anchor") && this.handleAnchorChange(), this.active && this.updateComplete.then(() => this.reposition());
+		if (super.updated(e), e.has("active")) if (this.active) {
+			this._isVisible = !0, this.requestUpdate("isVisible");
+			let e = this._connectionRevision;
+			this.updateComplete.then(() => {
+				!this.isCurrentConnection(e) || !this.active || this.play(this.enter ?? zw).then(() => {
+					this.isCurrentConnection(e) && this.active && this.start();
+				});
+			});
+		} else {
+			let e = this._connectionRevision;
+			this.play(this.exit ?? Bw).then(() => {
+				!this.isCurrentConnection(e) || this.active || (this.stop(), this._isVisible = !1, this.requestUpdate("isVisible"));
+			});
+		}
+		e.has("anchor") && this.handleAnchorChange(), this.active && this.updateComplete.then(() => this.reposition());
 	}
 	onRepositioned(e) {
 		this._repositioned.emit(e);
@@ -21329,15 +21345,18 @@ var iT = function(e, t, n, r) {
 		this.reposition();
 	}
 	async handleAnchorChange() {
-		if (await this.stop(), this.anchor && typeof this.anchor == "string") {
-			let e = this.getRootNode();
-			this._anchorElement = e.getElementById(this.anchor);
-		} else this.anchor instanceof Element ? this._anchorElement = this.anchor : this._anchorElement = this.querySelector("[slot=\"anchor\"]");
-		if (this._anchorElement instanceof HTMLSlotElement && (this._anchorElement = this._anchorElement.assignedElements({ flatten: !0 })[0]), !this._anchorElement) throw Error("Invalid anchor element: no anchor could be found using the anchor slot or the anchor attribute.");
-		this.start();
+		let e = this._connectionRevision;
+		if (await this.stop(), this.isCurrentConnection(e)) {
+			if (this.anchor && typeof this.anchor == "string") {
+				let e = this.getRootNode();
+				this._anchorElement = e.getElementById(this.anchor);
+			} else this.anchor instanceof Element ? this._anchorElement = this.anchor : this._anchorElement = this.querySelector("[slot=\"anchor\"]");
+			if (this._anchorElement instanceof HTMLSlotElement && (this._anchorElement = this._anchorElement.assignedElements({ flatten: !0 })[0]), !this._anchorElement && this.anchor !== null) throw Error("Invalid anchor element: no anchor could be found using the anchor slot or the anchor attribute.");
+			this.start();
+		}
 	}
 	start() {
-		this._anchorElement && (this._cleanup = Nw(this._anchorElement, this._bodyElement, () => {
+		!this.isConnected || !this.active || !this._anchorElement?.isConnected || !this._bodyElement?.isConnected || (this._cleanup?.(), this._cleanup = void 0, this._cleanup = Nw(this._anchorElement, this._bodyElement, () => {
 			this.reposition();
 		}), this._bodyClickSubscription ??= x(this._bodyElement, "click", (e) => {
 			e.composedPath().find((e) => e instanceof HTMLElement && e.hasAttribute("force-close") && e.getAttribute("force-close") === "true") && (this.active = !1);
@@ -21348,6 +21367,9 @@ var iT = function(e, t, n, r) {
 			this._cleanup ? (this._cleanup(), this._cleanup = void 0, this.removeAttribute("data-current-placement"), this._inlineStyleController.remove("floating-auto-size-available-width"), this._inlineStyleController.remove("floating-auto-size-available-height"), requestAnimationFrame(e)) : e();
 		});
 	}
+	isCurrentConnection(e) {
+		return this.isConnected && this._connectionRevision === e;
+	}
 };
 iT([
 	k({ type: Object }),
@@ -40519,8 +40541,10 @@ var DO = function(e, t, n, r) {
 	_mouseoutSubscription;
 	_slottedControl;
 	_anchorReady;
+	_connectionRevision;
+	_controlBindingFrame;
 	constructor() {
-		super(), this._floatingElement = null, this._content = "", this._placement = K.Bottom, this._horizontalOffset = 8, this._verticalOffset = 0, this._isOpen = !1, this._showDelay = 150, this._hideDelay = 0, this._trigger = SO.Hover, this._staysOpen = !1, this._hoverTimeout = null, this._blurSubscription = null, this._focusSubscription = null, this._clickSubscription = null, this._keydownSubscription = null, this._mouseoverSubscription = null, this._mouseoutSubscription = null, this._slottedControl = null, this._anchorReady = !1, this._projectionController = new uT(this, {
+		super(), this._floatingElement = null, this._content = "", this._placement = K.Bottom, this._horizontalOffset = 8, this._verticalOffset = 0, this._isOpen = !1, this._showDelay = 150, this._hideDelay = 0, this._trigger = SO.Hover, this._staysOpen = !1, this._hoverTimeout = null, this._blurSubscription = null, this._focusSubscription = null, this._clickSubscription = null, this._keydownSubscription = null, this._mouseoverSubscription = null, this._mouseoutSubscription = null, this._slottedControl = null, this._anchorReady = !1, this._connectionRevision = 0, this._controlBindingFrame = null, this._projectionController = new uT(this, {
 			slotName: "content",
 			targetSelector: "[part=\"projection\"]"
 		}), Object.assign(this, { enter: zw }), Object.assign(this, { exit: Bw });
@@ -40595,27 +40619,23 @@ var DO = function(e, t, n, r) {
 		return this.isOpen && this._anchorReady && this.anchorElement !== null;
 	}
 	async open() {
-		await super.open().then(() => {
-			this.isOpen = !0;
-		});
+		let e = this._connectionRevision;
+		await super.open(), this.isCurrentConnection(e) && (this.isOpen = !0);
 	}
 	async close() {
-		return this._staysOpen ? Promise.resolve(!1) : this._isOpen ? super.close().then((e) => this.isOpen = e) : Promise.resolve(!0);
+		if (this._staysOpen) return Promise.resolve(!1);
+		if (!this._isOpen) return Promise.resolve(!0);
+		let e = this._connectionRevision, t = await super.close();
+		return this.isCurrentConnection(e) && (this.isOpen = t), t;
 	}
 	attach(e) {
-		super.attach(e), this.updateComplete.then(() => {
-			this.unbindControlEvents(), this.bindControlEvents(), this.updateFloatingAnchor();
-		});
+		super.attach(e), this.scheduleControlRebinding(!1);
 	}
 	connectedCallback() {
-		super.connectedCallback(), this.updateComplete.then(() => {
-			requestAnimationFrame(() => {
-				this.bindControlEvents(), this.updateFloatingAnchor();
-			});
-		});
+		this._connectionRevision++, super.connectedCallback(), this.scheduleControlRebinding(!0);
 	}
 	disconnectedCallback() {
-		super.disconnectedCallback(), this.unbindControlEvents();
+		this._connectionRevision++, this.cancelControlBindingFrame(), this.clearHoverTimeout(), this.unbindControlEvents(), this._anchorReady = !1, this._isOpen && (this.isOpen = !1), super.disconnectedCallback();
 	}
 	onApplyTemplate() {
 		super.onApplyTemplate();
@@ -40623,6 +40643,7 @@ var DO = function(e, t, n, r) {
 		e && (e.addEventListener("slotchange", () => this.onDefaultSlotChange(e)), this.onDefaultSlotChange(e));
 		let t = this.getTemplatePart("portal");
 		t.addEventListener("portalAttached", () => {
+			if (!this.isConnected) return;
 			let e = t.projection;
 			e && (this._floatingElement = S.current.findDescendant(e, "[part=\"popup\"]", { strict: !0 }), this.updateFloatingAnchor());
 		}, { once: !0 });
@@ -40643,14 +40664,19 @@ var DO = function(e, t, n, r) {
 		this.isOpen && e.key === "Escape" && (e.stopPropagation(), this.close());
 	}
 	onMouseOver(e) {
-		this.hasTrigger(SO.Hover) && (this._hoverTimeout && clearTimeout(this._hoverTimeout), this._hoverTimeout = window.setTimeout(() => void this.open(), this._showDelay));
+		this.hasTrigger(SO.Hover) && (this.clearHoverTimeout(), this._hoverTimeout = window.setTimeout(() => {
+			this._hoverTimeout = null, this.isConnected && this.open();
+		}, this._showDelay));
 	}
 	onMouseOut(e) {
-		this.hasTrigger(SO.Hover) && (this._hoverTimeout && clearTimeout(this._hoverTimeout), this._hoverTimeout = window.setTimeout(() => void this.close(), this._hideDelay));
+		this.hasTrigger(SO.Hover) && (this.clearHoverTimeout(), this._hoverTimeout = window.setTimeout(() => {
+			this._hoverTimeout = null, this.isConnected && this.close();
+		}, this._hideDelay));
 	}
 	onIsOpenPropertyChange() {
+		let e = this._connectionRevision;
 		this.updateComplete.then(() => {
-			if (this.isOpen) {
+			if (this.isCurrentConnection(e)) if (this.isOpen) {
 				if (this.disabled) return;
 				this.opened.emit();
 			} else this.closed.emit({ cancel: !1 });
@@ -40678,11 +40704,7 @@ var DO = function(e, t, n, r) {
 		this.disabled && this.isOpen && this.close();
 	}
 	onForPropertyChange() {
-		this.updateComplete.then(() => {
-			requestAnimationFrame(() => {
-				this.unbindControlEvents(), this.bindControlEvents(), this.updateFloatingAnchor();
-			});
-		});
+		this.scheduleControlRebinding(!0);
 	}
 	onDefaultSlotChange(e) {
 		let t = e.assignedElements({ flatten: !0 }), n = this._slottedControl;
@@ -40691,8 +40713,35 @@ var DO = function(e, t, n, r) {
 		this._slottedControl !== null && (this._anchorReady = !0), n !== this._slottedControl && (this.unbindControlEvents(), this.bindControlEvents(), this.updateFloatingAnchor()), r !== this._anchorReady && this.requestUpdate("anchorElement");
 	}
 	updateFloatingAnchor() {
+		if (!this.isConnected) {
+			this._anchorReady = !1;
+			return;
+		}
 		this._anchorReady = this.anchorElement !== null, this.requestUpdate("anchorElement");
 	}
+	scheduleControlRebinding(e) {
+		let t = this._connectionRevision;
+		this.updateComplete.then(() => {
+			if (!this.isCurrentConnection(t)) return;
+			let n = () => {
+				this._controlBindingFrame = null, this.isCurrentConnection(t) && (this.unbindControlEvents(), this.bindControlEvents(), this.updateFloatingAnchor());
+			};
+			if (!e) {
+				n();
+				return;
+			}
+			this.cancelControlBindingFrame(), this._controlBindingFrame = requestAnimationFrame(n);
+		});
+	}
+	cancelControlBindingFrame() {
+		this._controlBindingFrame !== null && (cancelAnimationFrame(this._controlBindingFrame), this._controlBindingFrame = null);
+	}
+	clearHoverTimeout() {
+		this._hoverTimeout !== null && (clearTimeout(this._hoverTimeout), this._hoverTimeout = null);
+	}
+	isCurrentConnection(e) {
+		return this.isConnected && this._connectionRevision === e;
+	}
 	bindControlEvents() {
 		let e = this.anchorElement;
 		e && (this._blurSubscription = x(e, "blur", (e) => this.onBlur(e), !0), this._focusSubscription = x(e, "focus", (e) => this.onFocus(e), !0), this._clickSubscription = x(e, "click", (e) => this.onClick(e)), this._keydownSubscription = x(e, "keydown", (e) => this.onKeyDown(e)), this._mouseoverSubscription = x(e, "mouseover", (e) => this.onMouseOver(e)), this._mouseoutSubscription = x(e, "mouseout", (e) => this.onMouseOut(e)));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@breadstone/mosaik-elements-svelte",
-    "version": "0.1.61",
+    "version": "0.1.62",
     "description": "Mosaik elements for Svelte.",
     "license": "MIT",
     "author": "andre.wehlert <awehlert@breadstone.de> (https://www.breadstone.de)",
@@ -11,8 +11,8 @@
         "url": "git+ssh://git@github.com/RueDeRennes/mosaik.git"
     },
     "dependencies": {
-        "@breadstone/mosaik-elements": "0.1.61",
-        "@breadstone/mosaik-elements-foundation": "0.1.61",
+        "@breadstone/mosaik-elements": "0.1.62",
+        "@breadstone/mosaik-elements-foundation": "0.1.62",
         "tslib": "2.8.1"
     },
     "peerDependencies": {