@breadstone/mosaik-elements-svelte 0.1.51 → 0.1.53

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+## 0.1.53 (2026-07-13)
+
+This was a version bump only for mosaik-elements-svelte to align it with other projects, there were no code changes.
+
+## 0.1.52 (2026-07-13)
+
+### 🚀 Features
+
+- **overlay:** add requestAttention and closeAttempt CloseAttempted ([27f164ec7f](https://github.com/RueDeRennes/mosaik/commit/27f164ec7f))
+
 ## 0.1.51 (2026-07-13)
 
 ### 🚀 Features

package/index.mjs

@@ -178237,10 +178237,10 @@ function oye() {
   --drawer-content-font-text-transform: unset;
   --drawer-content-font-weight: unset;
   --drawer-content-gap: unset;
-  --drawer-content-inset-bottom: unset;
-  --drawer-content-inset-left: unset;
-  --drawer-content-inset-right: unset;
-  --drawer-content-inset-top: unset;
+  --drawer-content-inset-bottom: 0px;
+  --drawer-content-inset-left: 0px;
+  --drawer-content-inset-right: 0px;
+  --drawer-content-inset-top: 0px;
   --drawer-content-padding-bottom: unset;
   --drawer-content-padding-left: unset;
   --drawer-content-padding-right: unset;
@@ -178314,7 +178314,7 @@ function sye() {
   --drawer-content-font-weight: unset;
   --drawer-content-gap: var(--joy-layout-space);
   --drawer-content-inset-bottom: var(--joy-layout-space);
-  --drawer-content-inset-left: unset;
+  --drawer-content-inset-left: 0px;
   --drawer-content-inset-right: var(--joy-layout-space);
   --drawer-content-inset-top: var(--joy-layout-space);
   --drawer-content-padding-bottom: unset;
@@ -178389,10 +178389,10 @@ function cye() {
   --drawer-content-font-text-transform: unset;
   --drawer-content-font-weight: unset;
   --drawer-content-gap: var(--memphis-layout-space);
-  --drawer-content-inset-bottom: unset;
-  --drawer-content-inset-left: unset;
-  --drawer-content-inset-right: unset;
-  --drawer-content-inset-top: unset;
+  --drawer-content-inset-bottom: 0px;
+  --drawer-content-inset-left: 0px;
+  --drawer-content-inset-right: 0px;
+  --drawer-content-inset-top: 0px;
   --drawer-content-padding-bottom: unset;
   --drawer-content-padding-left: unset;
   --drawer-content-padding-right: unset;
@@ -180824,13 +180824,8 @@ var _2 = function(e, t, n, r) {
 			case X0.Bottom: return this.createHorizontalDrawerRootStyles("bottom");
 		}
 	}
-	async open() {
-		return super.open().then(() => {
-			this.play(this.enter ?? { steps: [] });
-		});
-	}
 	async close() {
-		return this.play(this.exit ?? { steps: [] }).then(() => super.close());
+		return await this.play(this.exit ?? { steps: [] }) ? super.close() : !1;
 	}
 	async toggle() {
 		return this.isOpen ? this.close().then(() => {}) : this.open();
@@ -180845,7 +180840,12 @@ var _2 = function(e, t, n, r) {
 		super.onApplyTemplate(), O.current.findAncestor(this, C2) && (this.isComposed = !0);
 	}
 	onIsOpenChanged(e, t) {
-		super.onIsOpenChanged(e, t), O.current.findAncestor(this, C2, { strict: !1 })?.updateDrawerState();
+		super.onIsOpenChanged(e, t), t && this.playEnterAnimationWhenReady(), O.current.findAncestor(this, C2, { strict: !1 })?.updateDrawerState();
+	}
+	playEnterAnimationWhenReady() {
+		this.updateComplete.then(() => {
+			this.isOpen && this.play(this.enter ?? { steps: [] });
+		});
 	}
 	createVerticalDrawerRootStyles(e) {
 		let t = this.getDrawerViewportInset(), n = this.createInsetSize(y2.FULL_SIZE, t);
@@ -231426,7 +231426,8 @@ function RDe(e) {
                                .mode="${e.isMobile ? Y0.Push : Y0.Side}"
                                .hasBackdrop="${e.isMobile}"
                                .hasShadow="${e.isMobile}"
-                               .clickOutsideToClose="${e.isMobile}">
+                               .clickOutsideToClose="${e.isMobile}"
+                               @changed="${(t) => e.onNavigationDrawerChanged(t)}">
                     <nav part="nav-body">
                         <slot name="nav"></slot>
                     </nav>
@@ -232057,7 +232058,7 @@ function WDe() {
 	return B`
 :host {
   --app-background-color: var(--cosmopolitan-scheme-background);
-  --app-body-offset-top: unset;
+  --app-body-offset-top: 0px;
   --app-border-color: unset;
   --app-border-radius: unset;
   --app-border-style: solid;
@@ -232167,22 +232168,29 @@ function WDe() {
   border-radius: var(--app-view-border-radius);
   border-style: var(--app-view-border-style);
   border-width: var(--app-view-border-width);
+  flex-direction: column;
+  min-height: 0;
+  display: flex;
 }
 
 :host [part="body"] {
   height: calc(100% - var(--app-body-offset-top));
   flex-direction: row;
+  flex: 0 auto;
   width: 100%;
+  min-height: 0;
   display: flex;
 }
 
 :host [part="body"] [part="main"] {
   flex: 1;
   width: 100%;
+  min-height: 0;
   overflow: auto;
 }
 
 :host [part="body"] [part="rail"] {
+  min-height: 0;
   overflow: auto;
 }
 
@@ -232194,7 +232202,7 @@ function GDe() {
 	return B`
 :host {
   --app-background-color: var(--joy-scheme-background);
-  --app-body-offset-top: none;
+  --app-body-offset-top: 0px;
   --app-border-color: unset;
   --app-border-radius: unset;
   --app-border-style: solid;
@@ -232304,22 +232312,29 @@ function GDe() {
   border-radius: var(--app-view-border-radius);
   border-style: var(--app-view-border-style);
   border-width: var(--app-view-border-width);
+  flex-direction: column;
+  min-height: 0;
+  display: flex;
 }
 
 :host [part="body"] {
   height: calc(100% - var(--app-body-offset-top));
   flex-direction: row;
+  flex: 0 auto;
   width: 100%;
+  min-height: 0;
   display: flex;
 }
 
 :host [part="body"] [part="main"] {
   flex: 1;
   width: 100%;
+  min-height: 0;
   overflow: auto;
 }
 
 :host [part="body"] [part="rail"] {
+  min-height: 0;
   overflow: auto;
 }
 
@@ -232335,7 +232350,7 @@ function KDe() {
 	return B`
 :host {
   --app-background-color: var(--memphis-scheme-background);
-  --app-body-offset-top: unset;
+  --app-body-offset-top: 0px;
   --app-border-color: unset;
   --app-border-radius: unset;
   --app-border-style: solid;
@@ -232445,22 +232460,29 @@ function KDe() {
   border-radius: var(--app-view-border-radius);
   border-style: var(--app-view-border-style);
   border-width: var(--app-view-border-width);
+  flex-direction: column;
+  min-height: 0;
+  display: flex;
 }
 
 :host [part="body"] {
   height: calc(100% - var(--app-body-offset-top));
   flex-direction: row;
+  flex: 0 auto;
   width: 100%;
+  min-height: 0;
   display: flex;
 }
 
 :host [part="body"] [part="main"] {
   flex: 1;
   width: 100%;
+  min-height: 0;
   overflow: auto;
 }
 
 :host [part="body"] [part="rail"] {
+  min-height: 0;
   overflow: auto;
 }
 
@@ -232477,7 +232499,6 @@ var G7 = function(e, t, n, r) {
 	if (typeof Reflect == "object" && typeof Reflect.metadata == "function") return Reflect.metadata(e, t);
 }, q7 = class extends F(Y(j)) {
 	_breakpointController;
-	_drawerElement;
 	_headerElement;
 	_contentElement;
 	_theme;
@@ -232541,6 +232562,9 @@ var G7 = function(e, t, n, r) {
 	closeNavigation() {
 		this.isNavOpen = !1;
 	}
+	onNavigationDrawerChanged(e) {
+		e.target === e.currentTarget && e.detail.propertyName === "is-open" && (e.detail.newValue === null ? this.closeNavigation() : this.openNavigation());
+	}
 	onSlotChanges(e) {
 		if (e === "header") {
 			let e = this.getSlotAssignments("header").filter((e) => e instanceof W7);
@@ -232548,7 +232572,7 @@ var G7 = function(e, t, n, r) {
 		}
 	}
 	onApplyTemplate() {
-		super.onApplyTemplate(), this._contentElement = this.getTemplatePart("main"), this._headerElement = this.getTemplatePart("header"), this._drawerElement = this.getTemplatePart("nav");
+		super.onApplyTemplate(), this._contentElement = this.getTemplatePart("main"), this._headerElement = this.getTemplatePart("header");
 	}
 	onIsNavOpenPropertyChanged(e, t) {
 		this._headerElement.isToggled = t ?? !1;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@breadstone/mosaik-elements-svelte",
-    "version": "0.1.51",
+    "version": "0.1.53",
     "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.51",
-        "@breadstone/mosaik-elements-foundation": "0.1.51",
+        "@breadstone/mosaik-elements": "0.1.53",
+        "@breadstone/mosaik-elements-foundation": "0.1.53",
         "tslib": "2.8.1"
     },
     "peerDependencies": {