@breadstone/mosaik-elements-svelte 0.1.69 → 0.1.71

package/index.mjs

@@ -38073,6 +38073,18 @@ function sO() {
   resize: none;
 }
 
+:host input[part="input"] {
+  min-inline-size: 0;
+}
+
+:host input[part="input"]:-moz-placeholder-shown {
+  text-overflow: ellipsis;
+}
+
+:host input[part="input"]:placeholder-shown {
+  text-overflow: ellipsis;
+}
+
 :host [part="label"] {
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -38080,6 +38092,7 @@ function sO() {
   pointer-events: none;
   transform-origin: 0 0;
   text-align: left;
+  max-inline-size: calc(100% - var(--textbox-padding-left) - var(--textbox-padding-right));
   text-overflow: ellipsis;
   white-space: nowrap;
   will-change: transform;
@@ -38359,6 +38372,18 @@ function cO() {
   resize: none;
 }
 
+:host input[part="input"] {
+  min-inline-size: 0;
+}
+
+:host input[part="input"]:-moz-placeholder-shown {
+  text-overflow: ellipsis;
+}
+
+:host input[part="input"]:placeholder-shown {
+  text-overflow: ellipsis;
+}
+
 :host [part="label"] {
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -38366,6 +38391,7 @@ function cO() {
   pointer-events: none;
   transform-origin: 0 0;
   text-align: left;
+  max-inline-size: calc(100% - var(--textbox-padding-left) - var(--textbox-padding-right));
   text-overflow: ellipsis;
   white-space: nowrap;
   will-change: transform;
@@ -38868,6 +38894,18 @@ function lO() {
   resize: none;
 }
 
+:host input[part="input"] {
+  min-inline-size: 0;
+}
+
+:host input[part="input"]:-moz-placeholder-shown {
+  text-overflow: ellipsis;
+}
+
+:host input[part="input"]:placeholder-shown {
+  text-overflow: ellipsis;
+}
+
 :host [part="label"] {
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -38875,6 +38913,7 @@ function lO() {
   pointer-events: none;
   transform-origin: 0 0;
   text-align: left;
+  max-inline-size: calc(100% - var(--textbox-padding-left) - var(--textbox-padding-right));
   text-overflow: ellipsis;
   white-space: nowrap;
   will-change: transform;
@@ -69187,6 +69226,18 @@ function LI() {
   transition-property: inherit;
 }
 
+:host input[part="input"] {
+  min-inline-size: 0;
+}
+
+:host input[part="input"]:-moz-placeholder-shown {
+  text-overflow: ellipsis;
+}
+
+:host input[part="input"]:placeholder-shown {
+  text-overflow: ellipsis;
+}
+
 :host [part="label"] {
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -69194,6 +69245,7 @@ function LI() {
   pointer-events: none;
   transform-origin: 0 0;
   text-align: left;
+  max-inline-size: calc(100% - var(--chipbox-padding-left) - var(--chipbox-padding-right));
   text-overflow: ellipsis;
   white-space: nowrap;
   will-change: transform;
@@ -69416,6 +69468,18 @@ function RI() {
   transition-property: inherit;
 }
 
+:host input[part="input"] {
+  min-inline-size: 0;
+}
+
+:host input[part="input"]:-moz-placeholder-shown {
+  text-overflow: ellipsis;
+}
+
+:host input[part="input"]:placeholder-shown {
+  text-overflow: ellipsis;
+}
+
 :host [part="label"] {
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -69423,6 +69487,7 @@ function RI() {
   pointer-events: none;
   transform-origin: 0 0;
   text-align: left;
+  max-inline-size: calc(100% - var(--chipbox-padding-left) - var(--chipbox-padding-right));
   text-overflow: ellipsis;
   white-space: nowrap;
   will-change: transform;
@@ -69863,6 +69928,18 @@ function zI() {
   transition-property: inherit;
 }
 
+:host input[part="input"] {
+  min-inline-size: 0;
+}
+
+:host input[part="input"]:-moz-placeholder-shown {
+  text-overflow: ellipsis;
+}
+
+:host input[part="input"]:placeholder-shown {
+  text-overflow: ellipsis;
+}
+
 :host [part="label"] {
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -69870,6 +69947,7 @@ function zI() {
   pointer-events: none;
   transform-origin: 0 0;
   text-align: left;
+  max-inline-size: calc(100% - var(--chipbox-padding-left) - var(--chipbox-padding-right));
   text-overflow: ellipsis;
   white-space: nowrap;
   will-change: transform;
@@ -71750,7 +71828,7 @@ var pL = {
 	_skipInitial;
 	_unobservedUpdate = !1;
 	constructor(e, t) {
-		super(e), t?.target !== null && this._targets.add(t?.target ?? e), this._config = t?.config, this._skipInitial = t?.skipInitial ?? !1, this.callback = t?.callback, this._observer = new ResizeObserver((e) => {
+		super(e), t?.target !== null && this._targets.add(t?.target ?? e), this._config = t?.config, this._skipInitial = t?.skipInitial ?? !1, this.callback = t?.callback, this._observer = typeof ResizeObserver > "u" ? null : new ResizeObserver((e) => {
 			this.handleChanges(e), this.host.requestUpdate();
 		});
 	}
@@ -71767,16 +71845,16 @@ var pL = {
 		!this._skipInitial && this._unobservedUpdate && this.handleChanges([]), this._unobservedUpdate = !1;
 	}
 	observe(e) {
-		this._targets.add(e), this._observer.observe(e, this._config), this._unobservedUpdate = !0, this.host.requestUpdate();
+		this._targets.add(e), this._observer?.observe(e, this._config), this._unobservedUpdate = !0, this.host.requestUpdate();
 	}
 	unobserve(e) {
-		this._targets.delete(e), this._observer.unobserve(e);
+		this._targets.delete(e), this._observer?.unobserve(e);
 	}
 	disconnect() {
-		this._observer.disconnect();
+		this._observer?.disconnect();
 	}
 	handleChanges(e) {
-		this.value = this.callback?.(e, this._observer);
+		this._observer && (this.value = this.callback?.(e, this._observer));
 	}
 };
 //#endregion
@@ -74263,6 +74341,18 @@ function QL() {
   position: relative;
 }
 
+:host input[part="input"] {
+  min-inline-size: 0;
+}
+
+:host input[part="input"]:-moz-placeholder-shown {
+  text-overflow: ellipsis;
+}
+
+:host input[part="input"]:placeholder-shown {
+  text-overflow: ellipsis;
+}
+
 :host [part="label"] {
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -74270,6 +74360,7 @@ function QL() {
   pointer-events: none;
   transform-origin: 0 0;
   text-align: left;
+  max-inline-size: calc(100% - var(--numberbox-padding-left) - var(--numberbox-padding-right));
   text-overflow: ellipsis;
   white-space: nowrap;
   will-change: transform;
@@ -74507,6 +74598,18 @@ function $L() {
   position: relative;
 }
 
+:host input[part="input"] {
+  min-inline-size: 0;
+}
+
+:host input[part="input"]:-moz-placeholder-shown {
+  text-overflow: ellipsis;
+}
+
+:host input[part="input"]:placeholder-shown {
+  text-overflow: ellipsis;
+}
+
 :host [part="label"] {
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -74514,6 +74617,7 @@ function $L() {
   pointer-events: none;
   transform-origin: 0 0;
   text-align: left;
+  max-inline-size: calc(100% - var(--numberbox-padding-left) - var(--numberbox-padding-right));
   text-overflow: ellipsis;
   white-space: nowrap;
   will-change: transform;
@@ -75005,6 +75109,18 @@ function eR() {
   position: relative;
 }
 
+:host input[part="input"] {
+  min-inline-size: 0;
+}
+
+:host input[part="input"]:-moz-placeholder-shown {
+  text-overflow: ellipsis;
+}
+
+:host input[part="input"]:placeholder-shown {
+  text-overflow: ellipsis;
+}
+
 :host [part="label"] {
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -75012,6 +75128,7 @@ function eR() {
   pointer-events: none;
   transform-origin: 0 0;
   text-align: left;
+  max-inline-size: calc(100% - var(--numberbox-padding-left) - var(--numberbox-padding-right));
   text-overflow: ellipsis;
   white-space: nowrap;
   will-change: transform;
@@ -80125,6 +80242,18 @@ function ez() {
   transition-property: inherit;
 }
 
+:host input[part="input"] {
+  min-inline-size: 0;
+}
+
+:host input[part="input"]:-moz-placeholder-shown {
+  text-overflow: ellipsis;
+}
+
+:host input[part="input"]:placeholder-shown {
+  text-overflow: ellipsis;
+}
+
 :host [part="label"] {
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -80132,6 +80261,7 @@ function ez() {
   pointer-events: none;
   transform-origin: 0 0;
   text-align: left;
+  max-inline-size: calc(100% - var(--colorbox-padding-left) - var(--colorbox-padding-right));
   text-overflow: ellipsis;
   white-space: nowrap;
   will-change: transform;
@@ -80364,6 +80494,18 @@ function tz() {
   transition-property: inherit;
 }
 
+:host input[part="input"] {
+  min-inline-size: 0;
+}
+
+:host input[part="input"]:-moz-placeholder-shown {
+  text-overflow: ellipsis;
+}
+
+:host input[part="input"]:placeholder-shown {
+  text-overflow: ellipsis;
+}
+
 :host [part="label"] {
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -80371,6 +80513,7 @@ function tz() {
   pointer-events: none;
   transform-origin: 0 0;
   text-align: left;
+  max-inline-size: calc(100% - var(--colorbox-padding-left) - var(--colorbox-padding-right));
   text-overflow: ellipsis;
   white-space: nowrap;
   will-change: transform;
@@ -80821,6 +80964,18 @@ function nz() {
   transition-property: inherit;
 }
 
+:host input[part="input"] {
+  min-inline-size: 0;
+}
+
+:host input[part="input"]:-moz-placeholder-shown {
+  text-overflow: ellipsis;
+}
+
+:host input[part="input"]:placeholder-shown {
+  text-overflow: ellipsis;
+}
+
 :host [part="label"] {
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -80828,6 +80983,7 @@ function nz() {
   pointer-events: none;
   transform-origin: 0 0;
   text-align: left;
+  max-inline-size: calc(100% - var(--colorbox-padding-left) - var(--colorbox-padding-right));
   text-overflow: ellipsis;
   white-space: nowrap;
   will-change: transform;
@@ -82815,6 +82971,18 @@ function Ez() {
   position: relative;
 }
 
+:host input[part="input"] {
+  min-inline-size: 0;
+}
+
+:host input[part="input"]:-moz-placeholder-shown {
+  text-overflow: ellipsis;
+}
+
+:host input[part="input"]:placeholder-shown {
+  text-overflow: ellipsis;
+}
+
 :host [part="label"] {
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -82822,6 +82990,7 @@ function Ez() {
   pointer-events: none;
   transform-origin: 0 0;
   text-align: left;
+  max-inline-size: calc(100% - var(--datebox-padding-left) - var(--datebox-padding-right));
   text-overflow: ellipsis;
   white-space: nowrap;
   will-change: transform;
@@ -83059,6 +83228,18 @@ function Dz() {
   position: relative;
 }
 
+:host input[part="input"] {
+  min-inline-size: 0;
+}
+
+:host input[part="input"]:-moz-placeholder-shown {
+  text-overflow: ellipsis;
+}
+
+:host input[part="input"]:placeholder-shown {
+  text-overflow: ellipsis;
+}
+
 :host [part="label"] {
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -83066,6 +83247,7 @@ function Dz() {
   pointer-events: none;
   transform-origin: 0 0;
   text-align: left;
+  max-inline-size: calc(100% - var(--datebox-padding-left) - var(--datebox-padding-right));
   text-overflow: ellipsis;
   white-space: nowrap;
   will-change: transform;
@@ -83417,6 +83599,18 @@ function Oz() {
   position: relative;
 }
 
+:host input[part="input"] {
+  min-inline-size: 0;
+}
+
+:host input[part="input"]:-moz-placeholder-shown {
+  text-overflow: ellipsis;
+}
+
+:host input[part="input"]:placeholder-shown {
+  text-overflow: ellipsis;
+}
+
 :host [part="label"] {
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -83424,6 +83618,7 @@ function Oz() {
   pointer-events: none;
   transform-origin: 0 0;
   text-align: left;
+  max-inline-size: calc(100% - var(--datebox-padding-left) - var(--datebox-padding-right));
   text-overflow: ellipsis;
   white-space: nowrap;
   will-change: transform;
@@ -84973,6 +85168,18 @@ function Hz() {
   position: relative;
 }
 
+:host input[part="input"] {
+  min-inline-size: 0;
+}
+
+:host input[part="input"]:-moz-placeholder-shown {
+  text-overflow: ellipsis;
+}
+
+:host input[part="input"]:placeholder-shown {
+  text-overflow: ellipsis;
+}
+
 :host [part="label"] {
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -84980,6 +85187,7 @@ function Hz() {
   pointer-events: none;
   transform-origin: 0 0;
   text-align: left;
+  max-inline-size: calc(100% - var(--datetimebox-padding-left) - var(--datetimebox-padding-right));
   text-overflow: ellipsis;
   white-space: nowrap;
   will-change: transform;
@@ -85253,6 +85461,18 @@ function Uz() {
   position: relative;
 }
 
+:host input[part="input"] {
+  min-inline-size: 0;
+}
+
+:host input[part="input"]:-moz-placeholder-shown {
+  text-overflow: ellipsis;
+}
+
+:host input[part="input"]:placeholder-shown {
+  text-overflow: ellipsis;
+}
+
 :host [part="label"] {
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -85260,6 +85480,7 @@ function Uz() {
   pointer-events: none;
   transform-origin: 0 0;
   text-align: left;
+  max-inline-size: calc(100% - var(--datetimebox-padding-left) - var(--datetimebox-padding-right));
   text-overflow: ellipsis;
   white-space: nowrap;
   will-change: transform;
@@ -85730,6 +85951,18 @@ function Wz() {
   position: relative;
 }
 
+:host input[part="input"] {
+  min-inline-size: 0;
+}
+
+:host input[part="input"]:-moz-placeholder-shown {
+  text-overflow: ellipsis;
+}
+
+:host input[part="input"]:placeholder-shown {
+  text-overflow: ellipsis;
+}
+
 :host [part="label"] {
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -85737,6 +85970,7 @@ function Wz() {
   pointer-events: none;
   transform-origin: 0 0;
   text-align: left;
+  max-inline-size: calc(100% - var(--datetimebox-padding-left) - var(--datetimebox-padding-right));
   text-overflow: ellipsis;
   white-space: nowrap;
   will-change: transform;
@@ -86690,6 +86924,18 @@ function Xz() {
   position: relative;
 }
 
+:host input[part="input"] {
+  min-inline-size: 0;
+}
+
+:host input[part="input"]:-moz-placeholder-shown {
+  text-overflow: ellipsis;
+}
+
+:host input[part="input"]:placeholder-shown {
+  text-overflow: ellipsis;
+}
+
 :host [part="label"] {
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -86697,6 +86943,7 @@ function Xz() {
   pointer-events: none;
   transform-origin: 0 0;
   text-align: left;
+  max-inline-size: calc(100% - var(--durationbox-padding-left) - var(--durationbox-padding-right));
   text-overflow: ellipsis;
   white-space: nowrap;
   will-change: transform;
@@ -86952,6 +87199,18 @@ function Zz() {
   position: relative;
 }
 
+:host input[part="input"] {
+  min-inline-size: 0;
+}
+
+:host input[part="input"]:-moz-placeholder-shown {
+  text-overflow: ellipsis;
+}
+
+:host input[part="input"]:placeholder-shown {
+  text-overflow: ellipsis;
+}
+
 :host [part="label"] {
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -86959,6 +87218,7 @@ function Zz() {
   pointer-events: none;
   transform-origin: 0 0;
   text-align: left;
+  max-inline-size: calc(100% - var(--durationbox-padding-left) - var(--durationbox-padding-right));
   text-overflow: ellipsis;
   white-space: nowrap;
   will-change: transform;
@@ -87455,6 +87715,18 @@ function Qz() {
   position: relative;
 }
 
+:host input[part="input"] {
+  min-inline-size: 0;
+}
+
+:host input[part="input"]:-moz-placeholder-shown {
+  text-overflow: ellipsis;
+}
+
+:host input[part="input"]:placeholder-shown {
+  text-overflow: ellipsis;
+}
+
 :host [part="label"] {
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -87462,6 +87734,7 @@ function Qz() {
   pointer-events: none;
   transform-origin: 0 0;
   text-align: left;
+  max-inline-size: calc(100% - var(--durationbox-padding-left) - var(--durationbox-padding-right));
   text-overflow: ellipsis;
   white-space: nowrap;
   will-change: transform;
@@ -88038,6 +88311,18 @@ function iB() {
   position: relative;
 }
 
+:host input[part="input"] {
+  min-inline-size: 0;
+}
+
+:host input[part="input"]:-moz-placeholder-shown {
+  text-overflow: ellipsis;
+}
+
+:host input[part="input"]:placeholder-shown {
+  text-overflow: ellipsis;
+}
+
 :host [part="label"] {
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -88045,6 +88330,7 @@ function iB() {
   pointer-events: none;
   transform-origin: 0 0;
   text-align: left;
+  max-inline-size: calc(100% - var(--filebox-padding-left) - var(--filebox-padding-right));
   text-overflow: ellipsis;
   white-space: nowrap;
   will-change: transform;
@@ -88261,6 +88547,18 @@ function aB() {
   position: relative;
 }
 
+:host input[part="input"] {
+  min-inline-size: 0;
+}
+
+:host input[part="input"]:-moz-placeholder-shown {
+  text-overflow: ellipsis;
+}
+
+:host input[part="input"]:placeholder-shown {
+  text-overflow: ellipsis;
+}
+
 :host [part="label"] {
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -88268,6 +88566,7 @@ function aB() {
   pointer-events: none;
   transform-origin: 0 0;
   text-align: left;
+  max-inline-size: calc(100% - var(--filebox-padding-left) - var(--filebox-padding-right));
   text-overflow: ellipsis;
   white-space: nowrap;
   will-change: transform;
@@ -88691,6 +88990,18 @@ function oB() {
   position: relative;
 }
 
+:host input[part="input"] {
+  min-inline-size: 0;
+}
+
+:host input[part="input"]:-moz-placeholder-shown {
+  text-overflow: ellipsis;
+}
+
+:host input[part="input"]:placeholder-shown {
+  text-overflow: ellipsis;
+}
+
 :host [part="label"] {
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -88698,6 +89009,7 @@ function oB() {
   pointer-events: none;
   transform-origin: 0 0;
   text-align: left;
+  max-inline-size: calc(100% - var(--filebox-padding-left) - var(--filebox-padding-right));
   text-overflow: ellipsis;
   white-space: nowrap;
   will-change: transform;
@@ -94964,6 +95276,18 @@ function eH() {
   position: relative;
 }
 
+:host input[part="input"] {
+  min-inline-size: 0;
+}
+
+:host input[part="input"]:-moz-placeholder-shown {
+  text-overflow: ellipsis;
+}
+
+:host input[part="input"]:placeholder-shown {
+  text-overflow: ellipsis;
+}
+
 :host [part="label"] {
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -94971,6 +95295,7 @@ function eH() {
   pointer-events: none;
   transform-origin: 0 0;
   text-align: left;
+  max-inline-size: calc(100% - var(--passwordbox-padding-left) - var(--passwordbox-padding-right));
   text-overflow: ellipsis;
   white-space: nowrap;
   will-change: transform;
@@ -95186,6 +95511,18 @@ function tH() {
   position: relative;
 }
 
+:host input[part="input"] {
+  min-inline-size: 0;
+}
+
+:host input[part="input"]:-moz-placeholder-shown {
+  text-overflow: ellipsis;
+}
+
+:host input[part="input"]:placeholder-shown {
+  text-overflow: ellipsis;
+}
+
 :host [part="label"] {
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -95193,6 +95530,7 @@ function tH() {
   pointer-events: none;
   transform-origin: 0 0;
   text-align: left;
+  max-inline-size: calc(100% - var(--passwordbox-padding-left) - var(--passwordbox-padding-right));
   text-overflow: ellipsis;
   white-space: nowrap;
   will-change: transform;
@@ -95615,6 +95953,18 @@ function nH() {
   position: relative;
 }
 
+:host input[part="input"] {
+  min-inline-size: 0;
+}
+
+:host input[part="input"]:-moz-placeholder-shown {
+  text-overflow: ellipsis;
+}
+
+:host input[part="input"]:placeholder-shown {
+  text-overflow: ellipsis;
+}
+
 :host [part="label"] {
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -95622,6 +95972,7 @@ function nH() {
   pointer-events: none;
   transform-origin: 0 0;
   text-align: left;
+  max-inline-size: calc(100% - var(--passwordbox-padding-left) - var(--passwordbox-padding-right));
   text-overflow: ellipsis;
   white-space: nowrap;
   will-change: transform;
@@ -101369,6 +101720,18 @@ function RU() {
   overflow-y: auto;
 }
 
+:host input[part="input"] {
+  min-inline-size: 0;
+}
+
+:host input[part="input"]:-moz-placeholder-shown {
+  text-overflow: ellipsis;
+}
+
+:host input[part="input"]:placeholder-shown {
+  text-overflow: ellipsis;
+}
+
 :host [part="label"] {
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -101376,6 +101739,7 @@ function RU() {
   pointer-events: none;
   transform-origin: 0 0;
   text-align: left;
+  max-inline-size: calc(100% - var(--prompt-box-padding-left) - var(--prompt-box-padding-right));
   text-overflow: ellipsis;
   white-space: nowrap;
   will-change: transform;
@@ -101456,9 +101820,10 @@ function zU() {
   --prompt-box-floating-label-font-size: 12px;
   --prompt-box-floating-label-line-height: 12px;
   --prompt-box-focus-ring-active-width: 8px;
-  --prompt-box-focus-ring-color: unset;
+  --prompt-box-focus-ring-color: var(--joy-scheme-highlight);
   --prompt-box-focus-ring-inward-offset: 2px;
   --prompt-box-focus-ring-outward-offset: 0px;
+  --prompt-box-focus-ring-width: 0px;
   --prompt-box-font-family: unset;
   --prompt-box-font-letter-spacing: unset;
   --prompt-box-font-line-height: unset;
@@ -101577,6 +101942,18 @@ function zU() {
   overflow-y: auto;
 }
 
+:host input[part="input"] {
+  min-inline-size: 0;
+}
+
+:host input[part="input"]:-moz-placeholder-shown {
+  text-overflow: ellipsis;
+}
+
+:host input[part="input"]:placeholder-shown {
+  text-overflow: ellipsis;
+}
+
 :host [part="label"] {
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -101584,6 +101961,7 @@ function zU() {
   pointer-events: none;
   transform-origin: 0 0;
   text-align: left;
+  max-inline-size: calc(100% - var(--prompt-box-padding-left) - var(--prompt-box-padding-right));
   text-overflow: ellipsis;
   white-space: nowrap;
   will-change: transform;
@@ -101662,46 +102040,59 @@ function zU() {
 :host([appearance="plain"]) {
   --prompt-box-border-width: 0;
   --prompt-box-background-color: var(--joy-scheme-transparent);
+  --prompt-box-focus-ring-inward-offset: 0px;
+  --prompt-box-focus-ring-outward-offset: 0px;
 }
 
 :host([appearance="soft"]), :host([appearance="solid"]) {
   --prompt-box-background-color: var(--joy-scheme-highlight);
+  --prompt-box-focus-ring-inward-offset: 0px;
+  --prompt-box-focus-ring-outward-offset: 0px;
 }
 
 :host([variant="primary"]:not([disabled]:not([disabled="false"])):not([readonly]:not([readonly="false"])):hover), :host([variant="primary"]:not([disabled]:not([disabled="false"])):not([readonly]:not([readonly="false"])):active), :host([variant="primary"]:not([disabled]:not([disabled="false"])):not([readonly]:not([readonly="false"])):focus-within) {
   --prompt-box-border-color: var(--joy-color-primary-500);
+  --prompt-box-focus-ring-color: var(--joy-color-primary-500);
 }
 
 :host([variant="secondary"]:not([disabled]:not([disabled="false"])):not([readonly]:not([readonly="false"])):hover), :host([variant="secondary"]:not([disabled]:not([disabled="false"])):not([readonly]:not([readonly="false"])):active), :host([variant="secondary"]:not([disabled]:not([disabled="false"])):not([readonly]:not([readonly="false"])):focus-within) {
   --prompt-box-border-color: var(--joy-color-secondary-500);
+  --prompt-box-focus-ring-color: var(--joy-color-secondary-500);
 }
 
 :host([variant="tertiary"]:not([disabled]:not([disabled="false"])):not([readonly]:not([readonly="false"])):hover), :host([variant="tertiary"]:not([disabled]:not([disabled="false"])):not([readonly]:not([readonly="false"])):active), :host([variant="tertiary"]:not([disabled]:not([disabled="false"])):not([readonly]:not([readonly="false"])):focus-within) {
   --prompt-box-border-color: var(--joy-color-tertiary-500);
+  --prompt-box-focus-ring-color: var(--joy-color-tertiary-500);
 }
 
 :host([variant="danger"]:not([disabled]:not([disabled="false"])):not([readonly]:not([readonly="false"])):hover), :host([variant="danger"]:not([disabled]:not([disabled="false"])):not([readonly]:not([readonly="false"])):active), :host([variant="danger"]:not([disabled]:not([disabled="false"])):not([readonly]:not([readonly="false"])):focus-within) {
   --prompt-box-border-color: var(--joy-color-danger-500);
+  --prompt-box-focus-ring-color: var(--joy-color-danger-500);
 }
 
 :host([variant="warning"]:not([disabled]:not([disabled="false"])):not([readonly]:not([readonly="false"])):hover), :host([variant="warning"]:not([disabled]:not([disabled="false"])):not([readonly]:not([readonly="false"])):active), :host([variant="warning"]:not([disabled]:not([disabled="false"])):not([readonly]:not([readonly="false"])):focus-within) {
   --prompt-box-border-color: var(--joy-color-warning-500);
+  --prompt-box-focus-ring-color: var(--joy-color-warning-500);
 }
 
 :host([variant="success"]:not([disabled]:not([disabled="false"])):not([readonly]:not([readonly="false"])):hover), :host([variant="success"]:not([disabled]:not([disabled="false"])):not([readonly]:not([readonly="false"])):active), :host([variant="success"]:not([disabled]:not([disabled="false"])):not([readonly]:not([readonly="false"])):focus-within) {
   --prompt-box-border-color: var(--joy-color-success-500);
+  --prompt-box-focus-ring-color: var(--joy-color-success-500);
 }
 
 :host([variant="info"]:not([disabled]:not([disabled="false"])):not([readonly]:not([readonly="false"])):hover), :host([variant="info"]:not([disabled]:not([disabled="false"])):not([readonly]:not([readonly="false"])):active), :host([variant="info"]:not([disabled]:not([disabled="false"])):not([readonly]:not([readonly="false"])):focus-within) {
   --prompt-box-border-color: var(--joy-color-info-500);
+  --prompt-box-focus-ring-color: var(--joy-color-info-500);
 }
 
 :host([variant="highlight"]:not([disabled]:not([disabled="false"])):not([readonly]:not([readonly="false"])):hover), :host([variant="highlight"]:not([disabled]:not([disabled="false"])):not([readonly]:not([readonly="false"])):active), :host([variant="highlight"]:not([disabled]:not([disabled="false"])):not([readonly]:not([readonly="false"])):focus-within) {
   --prompt-box-border-color: var(--joy-color-highlight-500);
+  --prompt-box-focus-ring-color: var(--joy-color-highlight-500);
 }
 
 :host([variant="neutral"]:not([disabled]:not([disabled="false"])):not([readonly]:not([readonly="false"])):hover), :host([variant="neutral"]:not([disabled]:not([disabled="false"])):not([readonly]:not([readonly="false"])):active), :host([variant="neutral"]:not([disabled]:not([disabled="false"])):not([readonly]:not([readonly="false"])):focus-within) {
   --prompt-box-border-color: var(--joy-color-neutral-500);
+  --prompt-box-focus-ring-color: var(--joy-color-neutral-500);
 }
 
     `;
@@ -101840,6 +102231,18 @@ function BU() {
   overflow-y: auto;
 }
 
+:host input[part="input"] {
+  min-inline-size: 0;
+}
+
+:host input[part="input"]:-moz-placeholder-shown {
+  text-overflow: ellipsis;
+}
+
+:host input[part="input"]:placeholder-shown {
+  text-overflow: ellipsis;
+}
+
 :host [part="label"] {
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -101847,6 +102250,7 @@ function BU() {
   pointer-events: none;
   transform-origin: 0 0;
   text-align: left;
+  max-inline-size: calc(100% - var(--prompt-box-padding-left) - var(--prompt-box-padding-right));
   text-overflow: ellipsis;
   white-space: nowrap;
   will-change: transform;
@@ -105312,6 +105716,18 @@ function KW() {
   transition-property: inherit;
 }
 
+:host input[part="input"] {
+  min-inline-size: 0;
+}
+
+:host input[part="input"]:-moz-placeholder-shown {
+  text-overflow: ellipsis;
+}
+
+:host input[part="input"]:placeholder-shown {
+  text-overflow: ellipsis;
+}
+
 :host [part="label"] {
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -105319,6 +105735,7 @@ function KW() {
   pointer-events: none;
   transform-origin: 0 0;
   text-align: left;
+  max-inline-size: calc(100% - var(--richtextbox-padding-left) - var(--richtextbox-padding-right));
   text-overflow: ellipsis;
   white-space: nowrap;
   will-change: transform;
@@ -105561,6 +105978,18 @@ function qW() {
   transition-property: inherit;
 }
 
+:host input[part="input"] {
+  min-inline-size: 0;
+}
+
+:host input[part="input"]:-moz-placeholder-shown {
+  text-overflow: ellipsis;
+}
+
+:host input[part="input"]:placeholder-shown {
+  text-overflow: ellipsis;
+}
+
 :host [part="label"] {
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -105568,6 +105997,7 @@ function qW() {
   pointer-events: none;
   transform-origin: 0 0;
   text-align: left;
+  max-inline-size: calc(100% - var(--richtextbox-padding-left) - var(--richtextbox-padding-right));
   text-overflow: ellipsis;
   white-space: nowrap;
   will-change: transform;
@@ -106042,6 +106472,18 @@ function JW() {
   transition-property: inherit;
 }
 
+:host input[part="input"] {
+  min-inline-size: 0;
+}
+
+:host input[part="input"]:-moz-placeholder-shown {
+  text-overflow: ellipsis;
+}
+
+:host input[part="input"]:placeholder-shown {
+  text-overflow: ellipsis;
+}
+
 :host [part="label"] {
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -106049,6 +106491,7 @@ function JW() {
   pointer-events: none;
   transform-origin: 0 0;
   text-align: left;
+  max-inline-size: calc(100% - var(--richtextbox-padding-left) - var(--richtextbox-padding-right));
   text-overflow: ellipsis;
   white-space: nowrap;
   will-change: transform;
@@ -120159,6 +120602,18 @@ function Lq() {
   position: relative;
 }
 
+:host input[part="input"] {
+  min-inline-size: 0;
+}
+
+:host input[part="input"]:-moz-placeholder-shown {
+  text-overflow: ellipsis;
+}
+
+:host input[part="input"]:placeholder-shown {
+  text-overflow: ellipsis;
+}
+
 :host [part="label"] {
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -120166,6 +120621,7 @@ function Lq() {
   pointer-events: none;
   transform-origin: 0 0;
   text-align: left;
+  max-inline-size: calc(100% - var(--timebox-padding-left) - var(--timebox-padding-right));
   text-overflow: ellipsis;
   white-space: nowrap;
   will-change: transform;
@@ -120418,6 +120874,18 @@ function Rq() {
   position: relative;
 }
 
+:host input[part="input"] {
+  min-inline-size: 0;
+}
+
+:host input[part="input"]:-moz-placeholder-shown {
+  text-overflow: ellipsis;
+}
+
+:host input[part="input"]:placeholder-shown {
+  text-overflow: ellipsis;
+}
+
 :host [part="label"] {
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -120425,6 +120893,7 @@ function Rq() {
   pointer-events: none;
   transform-origin: 0 0;
   text-align: left;
+  max-inline-size: calc(100% - var(--timebox-padding-left) - var(--timebox-padding-right));
   text-overflow: ellipsis;
   white-space: nowrap;
   will-change: transform;
@@ -120877,6 +121346,18 @@ function zq() {
   position: relative;
 }
 
+:host input[part="input"] {
+  min-inline-size: 0;
+}
+
+:host input[part="input"]:-moz-placeholder-shown {
+  text-overflow: ellipsis;
+}
+
+:host input[part="input"]:placeholder-shown {
+  text-overflow: ellipsis;
+}
+
 :host [part="label"] {
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -120884,6 +121365,7 @@ function zq() {
   pointer-events: none;
   transform-origin: 0 0;
   text-align: left;
+  max-inline-size: calc(100% - var(--timebox-padding-left) - var(--timebox-padding-right));
   text-overflow: ellipsis;
   white-space: nowrap;
   will-change: transform;
@@ -142982,15 +143464,15 @@ function Efe(e) {
                            @scroll="${(t) => e.handleMessagesScroll(t.detail.distanceToEnd)}">
                 <div part="messages">
                     <slot name="message"></slot>
-                    ${R(e.scrollToEnd, () => I`
-                        <mosaik-back-top part="backTop"
-                                         .dir="${e.dir}"
-                                         .lang="${e.lang}"
-                                         .offset="${e.scrollToEndThreshold}"
-                                         .to="${"bottom"}"></mosaik-back-top>
-                    `)}
                 </div>
             </mosaik-scroll>
+            ${R(e.scrollToEnd, () => I`
+                <mosaik-back-top part="backTop"
+                                 .dir="${e.dir}"
+                                 .lang="${e.lang}"
+                                 .offset="${e.scrollToEndThreshold}"
+                                 .to="${e.begin === W$.End ? "bottom" : "top"}"></mosaik-back-top>
+            `)}
         </div>
         <div part="empty">
             <slot name="empty"></slot>
@@ -146042,9 +146524,22 @@ var Xfe = function(e, t, n, r) {
 	else for (var s = e.length - 1; s >= 0; s--) (o = e[s]) && (a = (i < 3 ? o(a) : i > 3 ? o(t, n, a) : o(t, n)) || a);
 	return i > 3 && a && Object.defineProperty(t, n, a), a;
 }, c1 = class extends CU {
+	_inheritance = wx(this, { context: Q$ });
 	static get is() {
 		return "mosaik-chat-prompt-box";
 	}
+	get variant() {
+		return this._inheritance.get("variant", super.variant);
+	}
+	set variant(e) {
+		this._inheritance.markExplicit("variant"), super.variant = e;
+	}
+	get appearance() {
+		return this._inheritance.get("appearance", super.appearance);
+	}
+	set appearance(e) {
+		this._inheritance.markExplicit("appearance"), super.appearance = e;
+	}
 };
 c1 = Xfe([L({
 	selector: "mosaik-chat-prompt-box",
@@ -146541,10 +147036,15 @@ var d1 = function(e, t, n, r) {
 	if (typeof Reflect == "object" && typeof Reflect.metadata == "function") return Reflect.metadata(e, t);
 }, p1 = class extends A(YE(U(P(W(T))))) {
 	_intl;
+	_messageResizeController;
+	_observedMessageElements;
+	_pendingInitialMessageResizeElements;
 	_scrollToEnd;
 	_scrollToEndThreshold;
 	_scrollEndDistance;
 	_isScrollEndAnchored;
+	_messageResizeFollowFrame;
+	_isMessageResizeFollowScheduled;
 	_begin;
 	_promptBoxElement;
 	constructor() {
@@ -146555,7 +147055,11 @@ var d1 = function(e, t, n, r) {
 				appearance: this.appearance,
 				intl: this.intl
 			})
-		}), this._scrollToEnd = l1.DEFAULTS.scrollToEnd, this._scrollToEndThreshold = l1.DEFAULTS.scrollToEndThreshold, this._scrollEndDistance = 0, this._isScrollEndAnchored = !0, this._begin = l1.DEFAULTS.begin;
+		}), this._messageResizeController = new hL(this, {
+			target: null,
+			skipInitial: !0,
+			callback: (e) => this.handleMessageResizes(e)
+		}), this._scrollToEnd = l1.DEFAULTS.scrollToEnd, this._scrollToEndThreshold = l1.DEFAULTS.scrollToEndThreshold, this._scrollEndDistance = 0, this._isScrollEndAnchored = !0, this._observedMessageElements = /* @__PURE__ */ new Set(), this._pendingInitialMessageResizeElements = /* @__PURE__ */ new Set(), this._messageResizeFollowFrame = null, this._isMessageResizeFollowScheduled = !1, this._begin = l1.DEFAULTS.begin;
 	}
 	static get is() {
 		return "mosaik-chat";
@@ -146585,14 +147089,22 @@ var d1 = function(e, t, n, r) {
 	set intl(e) {
 		this._intl.provide(e);
 	}
-	onApplyTemplate() {
-		super.onApplyTemplate(), this.scrollToEnd && this.configureBackTop(), this.begin === W$.End && this.scrollMessagesToEnd(!1);
+	connectedCallback() {
+		super.connectedCallback(), this.hasUpdated && this.updateComplete.then(() => this.syncObservedMessageElements());
+	}
+	disconnectedCallback() {
+		this.releaseMessageResizeObservations(), super.disconnectedCallback();
 	}
 	onSlotChanges(e) {
-		super.onSlotChanges(e), e === "input" && (this._promptBoxElement = this.getSlotAssignmentsOf("input", c1).at(0), this._promptBoxElement && (this._promptBoxElement.dir = this.dir, this._promptBoxElement.variant = this.variant, this._promptBoxElement.appearance = this.appearance, this._promptBoxElement.placeholder = this.intl.inputPlaceholder)), (e === void 0 || e === "message") && this.hasUpdated && this.begin === W$.End && this.scrollToEnd && this._isScrollEndAnchored && this.scrollMessagesToEnd(!0);
+		super.onSlotChanges(e), e === "input" && (this._promptBoxElement = this.getSlotAssignmentsOf("input", c1).at(0), this._promptBoxElement && (this._promptBoxElement.dir = this.dir, this._promptBoxElement.placeholder = this.intl.inputPlaceholder)), (e === void 0 || e === "message") && (this.syncObservedMessageElements(), this.hasUpdated && this.begin === W$.End && this.scrollToEnd && this._isScrollEndAnchored && this.scrollMessagesToEnd(!0));
 	}
 	handleMessagesScroll(e) {
-		this._scrollEndDistance = e, this._isScrollEndAnchored = e <= this.scrollToEndThreshold;
+		Number.isFinite(e) && (this._scrollEndDistance = Math.max(0, e), this._isScrollEndAnchored = this._scrollEndDistance <= this.scrollToEndThreshold);
+	}
+	onApplyTemplate() {
+		super.onApplyTemplate(), this.begin === W$.End ? this.scrollMessagesToEnd(!1).then(() => {
+			this.scrollToEnd && this.configureBackTop();
+		}) : this.scrollToEnd && this.configureBackTop(), this.syncObservedMessageElements();
 	}
 	onWidthPropertyChanged(e, t) {
 		t === void 0 || Pv.isAuto(t) ? (j.current.removeStyle(this, "min-width"), j.current.removeStyle(this, "width")) : (j.current.setStyle(this, "min-width", t), j.current.setStyle(this, "width", t));
@@ -146609,13 +147121,35 @@ var d1 = function(e, t, n, r) {
 			this.scrollToEnd && this.getTemplatePart("backTop").attach(e.getScrollableElement());
 		});
 	}
+	syncObservedMessageElements() {
+		let e = new Set(this.getSlotAssignments("message"));
+		for (let t of this._observedMessageElements) e.has(t) || (this._messageResizeController.unobserve(t), this._observedMessageElements.delete(t), this._pendingInitialMessageResizeElements.delete(t));
+		for (let t of e) this._observedMessageElements.has(t) || (this._observedMessageElements.add(t), this._pendingInitialMessageResizeElements.add(t), this._messageResizeController.observe(t));
+	}
+	handleMessageResizes(e) {
+		let t = !1;
+		for (let n of e) this._observedMessageElements.has(n.target) && (this._pendingInitialMessageResizeElements.delete(n.target) || (t = !0));
+		t && this.scheduleMessageResizeFollow();
+	}
+	scheduleMessageResizeFollow() {
+		if (this._isMessageResizeFollowScheduled) return;
+		this._isMessageResizeFollowScheduled = !0;
+		let e = requestAnimationFrame(() => {
+			this._isMessageResizeFollowScheduled = !1, this._messageResizeFollowFrame = null, this.scrollMessagesToEnd(!0);
+		});
+		this._messageResizeFollowFrame = this._isMessageResizeFollowScheduled ? e : null;
+	}
+	releaseMessageResizeObservations() {
+		for (let e of this._observedMessageElements) this._messageResizeController.unobserve(e);
+		this._observedMessageElements.clear(), this._pendingInitialMessageResizeElements.clear(), this._messageResizeFollowFrame !== null && cancelAnimationFrame(this._messageResizeFollowFrame), this._messageResizeFollowFrame = null, this._isMessageResizeFollowScheduled = !1;
+	}
 	scrollMessagesToEnd(e) {
 		let t = this.getTemplatePart("scroll");
-		t.updateComplete.then(() => {
+		return t.updateComplete.then(() => new Promise((n) => {
 			requestAnimationFrame(() => {
-				this.begin === W$.End && (!e || this.scrollToEnd && this._isScrollEndAnchored) && t.scrollToPosition(2 ** 53 - 1, !1);
+				this.begin === W$.End && (!e || this.scrollToEnd && this._isScrollEndAnchored) && t.scrollToPosition(2 ** 53 - 1, !1), n();
 			});
-		});
+		}));
 	}
 };
 d1([
@@ -148122,9 +148656,22 @@ var fpe = function(e, t, n, r) {
 	else for (var s = e.length - 1; s >= 0; s--) (o = e[s]) && (a = (i < 3 ? o(a) : i > 3 ? o(t, n, a) : o(t, n)) || a);
 	return i > 3 && a && Object.defineProperty(t, n, a), a;
 }, C1 = class extends FU {
+	_inheritance = wx(this, { context: Q$ });
 	static get is() {
 		return "mosaik-chat-prompt-box-attachment-list";
 	}
+	get variant() {
+		return this._inheritance.get("variant", super.variant);
+	}
+	set variant(e) {
+		this._inheritance.markExplicit("variant"), super.variant = e;
+	}
+	get appearance() {
+		return this._inheritance.get("appearance", super.appearance);
+	}
+	set appearance(e) {
+		this._inheritance.markExplicit("appearance"), super.appearance = e;
+	}
 };
 C1 = fpe([L({
 	selector: "mosaik-chat-prompt-box-attachment-list",
@@ -171700,11 +172247,14 @@ function o_e() {
 }
 
 :host {
+  box-sizing: border-box;
+  min-width: 0;
+  max-width: 100%;
   padding: var(--toast-actions-padding-top) var(--toast-actions-padding-right) var(--toast-actions-padding-bottom) var(--toast-actions-padding-left);
   justify-content: space-between;
   align-items: center;
   gap: var(--toast-actions-gap);
-  flex-direction: row;
+  flex-flow: wrap;
   display: flex;
   position: relative;
 }
@@ -171712,7 +172262,9 @@ function o_e() {
 :host [part="prefix"], :host [part="content"], :host [part="suffix"] {
   align-items: center;
   gap: var(--toast-actions-gap);
-  flex-direction: row;
+  flex-flow: wrap;
+  min-width: 0;
+  max-width: 100%;
   display: flex;
 }
 
@@ -171721,6 +172273,11 @@ function o_e() {
   justify-content: flex-end;
 }
 
+:host ::slotted(*) {
+  min-width: 0;
+  max-width: 100%;
+}
+
     `;
 }
 //#endregion
@@ -171779,11 +172336,14 @@ function s_e() {
 }
 
 :host {
+  box-sizing: border-box;
+  min-width: 0;
+  max-width: 100%;
   padding: var(--toast-actions-padding-top) var(--toast-actions-padding-right) var(--toast-actions-padding-bottom) var(--toast-actions-padding-left);
   justify-content: space-between;
   align-items: center;
   gap: var(--toast-actions-gap);
-  flex-direction: row;
+  flex-flow: wrap;
   display: flex;
   position: relative;
 }
@@ -171791,7 +172351,9 @@ function s_e() {
 :host [part="prefix"], :host [part="content"], :host [part="suffix"] {
   align-items: center;
   gap: var(--toast-actions-gap);
-  flex-direction: row;
+  flex-flow: wrap;
+  min-width: 0;
+  max-width: 100%;
   display: flex;
 }
 
@@ -171800,6 +172362,11 @@ function s_e() {
   justify-content: flex-end;
 }
 
+:host ::slotted(*) {
+  min-width: 0;
+  max-width: 100%;
+}
+
     `;
 }
 //#endregion
@@ -171858,11 +172425,14 @@ function c_e() {
 }
 
 :host {
+  box-sizing: border-box;
+  min-width: 0;
+  max-width: 100%;
   padding: var(--toast-actions-padding-top) var(--toast-actions-padding-right) var(--toast-actions-padding-bottom) var(--toast-actions-padding-left);
   justify-content: space-between;
   align-items: center;
   gap: var(--toast-actions-gap);
-  flex-direction: row;
+  flex-flow: wrap;
   display: flex;
   position: relative;
 }
@@ -171870,7 +172440,9 @@ function c_e() {
 :host [part="prefix"], :host [part="content"], :host [part="suffix"] {
   align-items: center;
   gap: var(--toast-actions-gap);
-  flex-direction: row;
+  flex-flow: wrap;
+  min-width: 0;
+  max-width: 100%;
   display: flex;
 }
 
@@ -171879,6 +172451,11 @@ function c_e() {
   justify-content: flex-end;
 }
 
+:host ::slotted(*) {
+  min-width: 0;
+  max-width: 100%;
+}
+
     `;
 }
 //#endregion
@@ -172047,13 +172624,17 @@ function d_e() {
 
 :host [part="root"] {
   pointer-events: all;
+  box-sizing: border-box;
+  width: max-content;
+  min-width: min(52px, 100dvw - var(--toast-offset-x) * 2);
+  max-width: calc(100dvw - var(--toast-offset-x) * 2);
+  max-height: calc(100dvh - var(--toast-offset-y) * 2);
   border: var(--toast-border);
   border-color: var(--toast-border-color);
   border-radius: var(--toast-border-radius);
   border-style: var(--toast-border-style);
   border-width: var(--toast-border-width);
   background-color: var(--toast-background-color);
-  min-width: 52px;
   color: var(--toast-foreground-color);
   box-shadow: var(--toast-shadow);
   transition-duration: var(--toast-transition-duration);
@@ -172073,12 +172654,18 @@ function d_e() {
 :host [part="root"] [part="body"] {
   align-items: center;
   gap: var(--toast-gap);
-  flex-direction: row;
+  flex-flow: wrap;
+  min-width: 0;
+  max-width: 100%;
   display: flex;
 }
 
 :host [part="root"] [part="text"] {
+  overflow-wrap: anywhere;
   flex-direction: column;
+  flex: auto;
+  min-width: 0;
+  max-width: 100%;
   display: flex;
 }
 
@@ -172093,11 +172680,24 @@ function d_e() {
   color: inherit;
 }
 
-:host [part="root"] [part="icon"] {
+:host [part="root"] [part="content"]::part(text) {
+  overflow-wrap: anywhere;
+  -webkit-line-clamp: var(--__max-lines);
+  -webkit-box-orient: vertical;
+  display: -webkit-box;
+  overflow: hidden;
+}
+
+:host [part="root"] [part="icon"], :host [part="root"] [part="progressRing"], :host [part="root"] [part="close"] {
   color: inherit;
   flex-shrink: 0;
 }
 
+:host [part="root"] slot[name="actions"]::slotted(*) {
+  min-width: 0;
+  max-width: 100%;
+}
+
 :host [part="root"] [part="progressFill"] {
   background-color: var(--toast-progress-fill-color);
   border-radius: inherit;
@@ -172523,13 +173123,17 @@ function f_e() {
 
 :host [part="root"] {
   pointer-events: all;
+  box-sizing: border-box;
+  width: max-content;
+  min-width: min(52px, 100dvw - var(--toast-offset-x) * 2);
+  max-width: calc(100dvw - var(--toast-offset-x) * 2);
+  max-height: calc(100dvh - var(--toast-offset-y) * 2);
   border: var(--toast-border);
   border-color: var(--toast-border-color);
   border-radius: var(--toast-border-radius);
   border-style: var(--toast-border-style);
   border-width: var(--toast-border-width);
   background-color: var(--toast-background-color);
-  min-width: 52px;
   color: var(--toast-foreground-color);
   box-shadow: var(--toast-shadow);
   transition-duration: var(--toast-transition-duration);
@@ -172549,12 +173153,18 @@ function f_e() {
 :host [part="root"] [part="body"] {
   align-items: center;
   gap: var(--toast-gap);
-  flex-direction: row;
+  flex-flow: wrap;
+  min-width: 0;
+  max-width: 100%;
   display: flex;
 }
 
 :host [part="root"] [part="text"] {
+  overflow-wrap: anywhere;
   flex-direction: column;
+  flex: auto;
+  min-width: 0;
+  max-width: 100%;
   display: flex;
 }
 
@@ -172569,11 +173179,24 @@ function f_e() {
   color: inherit;
 }
 
-:host [part="root"] [part="icon"] {
+:host [part="root"] [part="content"]::part(text) {
+  overflow-wrap: anywhere;
+  -webkit-line-clamp: var(--__max-lines);
+  -webkit-box-orient: vertical;
+  display: -webkit-box;
+  overflow: hidden;
+}
+
+:host [part="root"] [part="icon"], :host [part="root"] [part="progressRing"], :host [part="root"] [part="close"] {
   color: inherit;
   flex-shrink: 0;
 }
 
+:host [part="root"] slot[name="actions"]::slotted(*) {
+  min-width: 0;
+  max-width: 100%;
+}
+
 :host [part="root"] [part="progressFill"] {
   background-color: var(--toast-progress-fill-color);
   border-radius: inherit;
@@ -173003,13 +173626,17 @@ function p_e() {
 
 :host [part="root"] {
   pointer-events: all;
+  box-sizing: border-box;
+  width: max-content;
+  min-width: min(52px, 100dvw - var(--toast-offset-x) * 2);
+  max-width: calc(100dvw - var(--toast-offset-x) * 2);
+  max-height: calc(100dvh - var(--toast-offset-y) * 2);
   border: var(--toast-border);
   border-color: var(--toast-border-color);
   border-radius: var(--toast-border-radius);
   border-style: var(--toast-border-style);
   border-width: var(--toast-border-width);
   background-color: var(--toast-background-color);
-  min-width: 52px;
   color: var(--toast-foreground-color);
   box-shadow: var(--toast-shadow);
   transition-duration: var(--toast-transition-duration);
@@ -173029,12 +173656,18 @@ function p_e() {
 :host [part="root"] [part="body"] {
   align-items: center;
   gap: var(--toast-gap);
-  flex-direction: row;
+  flex-flow: wrap;
+  min-width: 0;
+  max-width: 100%;
   display: flex;
 }
 
 :host [part="root"] [part="text"] {
+  overflow-wrap: anywhere;
   flex-direction: column;
+  flex: auto;
+  min-width: 0;
+  max-width: 100%;
   display: flex;
 }
 
@@ -173049,11 +173682,24 @@ function p_e() {
   color: inherit;
 }
 
-:host [part="root"] [part="icon"] {
+:host [part="root"] [part="content"]::part(text) {
+  overflow-wrap: anywhere;
+  -webkit-line-clamp: var(--__max-lines);
+  -webkit-box-orient: vertical;
+  display: -webkit-box;
+  overflow: hidden;
+}
+
+:host [part="root"] [part="icon"], :host [part="root"] [part="progressRing"], :host [part="root"] [part="close"] {
   color: inherit;
   flex-shrink: 0;
 }
 
+:host [part="root"] slot[name="actions"]::slotted(*) {
+  min-width: 0;
+  max-width: 100%;
+}
+
 :host [part="root"] [part="progressFill"] {
   background-color: var(--toast-progress-fill-color);
   border-radius: inherit;
@@ -190244,7 +190890,7 @@ m6([C({ eventName: "resizeStart" }), h6("design:type", Object)], g6.prototype, "
 		memphis: ebe,
 		cosmopolitan: Qye
 	},
-	imports: []
+	imports: [oQ]
 }), h6("design:paramtypes", [])], g6);
 //#endregion
 //#region ../mosaik-elements-foundation/dist/Controls/Components/Primitives/Ribbon/RibbonElementTemplate.js