@breadstone/mosaik-elements-svelte 0.1.2 → 0.1.4

package/index.mjs

@@ -71458,10 +71458,10 @@ function YF(e) {
         <div part="root">
             <slot name="start"></slot>
             <div part="main"
-                 ?hidden="${!DM(e, "has-main", e.hasSlotContent("") || e.hasSlotContent("title") || e.hasSlotContent("subTitle"))}">
+                 ?hidden="${!DM(e, "has-main", e.hasSlotContent("") || e.hasSlotContent("title") || e.hasSlotContent("subTitle") || e.title.trim().length > 0 || e.subTitle.trim().length > 0)}">
                 <slot></slot>
                 <div part="title"
-                     ?hidden="${!DM(e, "has-title", e.hasSlotContent("title"))}">
+                     ?hidden="${!DM(e, "has-title", e.hasSlotContent("title") || e.title.trim().length > 0)}">
                     <slot name="title">
                         ${U(e.title.trim(), () => V`
                         <mosaik-text .text="${e.title}"
@@ -71471,7 +71471,7 @@ function YF(e) {
                     </slot>
                 </div>
                 <div part="subTitle"
-                     ?hidden="${!DM(e, "has-sub-title", e.hasSlotContent("subTitle"))}">
+                     ?hidden="${!DM(e, "has-sub-title", e.hasSlotContent("subTitle") || e.subTitle.trim().length > 0)}">
                     <slot name="subTitle">
                         ${U(e.subTitle.trim(), () => V`
                         <mosaik-text .text="${e.subTitle}"
@@ -71517,11 +71517,11 @@ var XF = function(e, t, n, r) {
 	}
 };
 XF([
-	A({ type: String }),
+	P({ type: String }),
 	ZF("design:type", String),
 	ZF("design:paramtypes", [String])
 ], QF.prototype, "title", null), XF([
-	A({ type: String }),
+	P({ type: String }),
 	ZF("design:type", String),
 	ZF("design:paramtypes", [String])
 ], QF.prototype, "subTitle", null), QF = XF([H({
@@ -72339,7 +72339,7 @@ function RI(e) {
                      .size="${G.Giant}"
                      .data="${e.icon.trim() ? e.icon : X.glasses}"
                      .variant="${"neutral"}"></mosaik-icon>
-        <mosaik-stack .orientation="${K.Vertical}">
+        <div part="root">
             ${U(e.header, () => V`
             <mosaik-text part="header"
                          .readonly="${!0}"
@@ -72357,12 +72357,10 @@ function RI(e) {
                          .formatter="${e.formatter}"></mosaik-text>
             `)}
             <slot></slot>
-        </mosaik-stack>
-        <mosaik-stack part="innerStack"
-                      .orientation="${K.Horizontal}"
-                      ?hidden="${!e.hasSlotContent("actions")}">
+        </div>
+        <div part="actions" ?hidden="${!e.hasSlotContent("actions")}">
             <slot name="actions"></slot>
-        </mosaik-stack>
+        </div>
     `;
 }
 //#endregion
@@ -72472,8 +72470,17 @@ function zI() {
   text-transform: var(--empty-state-content-font-text-transform);
 }
 
-:host [part="innerStack"] {
-  --stack-gap: var(--empty-state-gap);
+:host [part="root"] {
+  flex-direction: column;
+  align-items: center;
+  display: flex;
+}
+
+:host [part="actions"] {
+  align-items: center;
+  gap: var(--empty-state-gap);
+  flex-direction: row;
+  display: flex;
 }
 
     `;
@@ -72585,8 +72592,17 @@ function BI() {
   text-transform: var(--empty-state-content-font-text-transform);
 }
 
-:host [part="innerStack"] {
-  --stack-gap: var(--empty-state-gap);
+:host [part="root"] {
+  flex-direction: column;
+  align-items: center;
+  display: flex;
+}
+
+:host [part="actions"] {
+  align-items: center;
+  gap: var(--empty-state-gap);
+  flex-direction: row;
+  display: flex;
 }
 
 :host [part="header"] {
@@ -72718,8 +72734,17 @@ function VI() {
   text-transform: var(--empty-state-content-font-text-transform);
 }
 
-:host [part="innerStack"] {
-  --stack-gap: var(--empty-state-gap);
+:host [part="root"] {
+  flex-direction: column;
+  align-items: center;
+  display: flex;
+}
+
+:host [part="actions"] {
+  align-items: center;
+  gap: var(--empty-state-gap);
+  flex-direction: row;
+  display: flex;
 }
 
 :host [part="header"] {
@@ -72791,11 +72816,7 @@ HI([
 		memphis: VI,
 		cosmopolitan: zI
 	},
-	imports: [
-		_S,
-		W,
-		sS
-	]
+	imports: [_S, W]
 }), UI("design:paramtypes", [])], WI);
 //#endregion
 //#region ../mosaik-elements-foundation/dist/Controls/Components/Selectors/Abstracts/Selector/SelectorItemElement.js
@@ -112573,7 +112594,7 @@ function CG(e) {
 function wG(e) {
 	return V`
         <div part="root">
-            <svg xmlns="http://www.w3.org/2000/svg">
+            <svg  xmlns="http://www.w3.org/2000/svg">
                 <line x1="${e.orientation === K.Vertical ? "50%" : "0"}"
                       y1="${e.orientation === K.Vertical ? "0" : "50%"}"
                       x2="${e.orientation === K.Vertical ? "50%" : "100%"}"
@@ -112660,6 +112681,7 @@ function TG() {
   width: 100%;
   height: 100%;
   position: absolute;
+  translate: -50%;
 }
 
 :host [part="root"] svg line {
@@ -112755,6 +112777,7 @@ function EG() {
   width: 100%;
   height: 100%;
   position: absolute;
+  translate: -50%;
 }
 
 :host [part="root"] svg line {
@@ -112854,6 +112877,7 @@ function DG() {
   width: 100%;
   height: 100%;
   position: absolute;
+  translate: -50%;
 }
 
 :host [part="root"] svg line {
@@ -151839,7 +151863,10 @@ function wme(e) {
             <div part="messages">
                 <slot name="message"></slot>
                 ${U(e.scrollToEnd, () => V`
-                <mosaik-back-top .to="${"bottom"}"></mosaik-back-top>
+                <mosaik-back-top part="backTop"
+                                 .dir="${e.dir}"
+                                 .lang="${e.lang}"
+                                 .to="${"bottom"}"></mosaik-back-top>
                 `)}
             </div>
         </div>
@@ -152155,7 +152182,8 @@ V$ = kme([H({
 //#region ../mosaik-elements-foundation/dist/Controls/Components/Media/Chat/ChatHeaderElementTemplate.js
 function jme(e) {
 	return V`
-        <mosaik-title-layout .dir="${e.dir}"
+        <mosaik-title-layout part="root"
+                             .dir="${e.dir}"
                              .lang="${e.lang}">
             <slot name="before"
                   slot="start"></slot>
@@ -152165,7 +152193,8 @@ function jme(e) {
                             .title="${e.title}"
                             .subTitle="${e.subTitle}"
                             .formatter="${e.formatter}"
-                            .appearance="${"plain"}"></mosaik-toolbar>
+                            .appearance="${"plain"}"
+                            .fit="${"both"}"></mosaik-toolbar>
             <slot name="after"
                   slot="end"></slot>
         </mosaik-title-layout>
@@ -152516,34 +152545,30 @@ function zme(e) {
 function Bme(e) {
 	return V`
         ${Yb(e.files, (e) => e.name, (t) => V`
-        <!-- <mosaik-chip part="attachment"
-                     .closeable="${!0}"
-                     @closed="${() => e.removeAttachment(t)}"
-                     @click="${() => window.open(URL.createObjectURL(t))}">
-            <mosaik-thumbnail slot="icon"
-                              .preview="${{
-		url: URL.createObjectURL(t),
-		type: t.type
-	}}"></mosaik-thumbnail>
-            <mosaik-text slot="label"
-                         .text="${t.name}"
-                         .maxLength="${20}"
-                         .truncate="${!0}"></mosaik-text>
-        </mosaik-chip> -->
-
         <mosaik-box part="attachment"
                     .cornered="${!0}"
+                    .lang="${e.lang}"
+                    .dir="${e.dir}"
                     @click="${() => window.open(URL.createObjectURL(t))}">
-            <mosaik-dismiss slot="dismiss"
+            <mosaik-dismiss part="dismiss"
+                            slot="dismiss"
                             .size="${"tiny"}"
+                            .lang="${e.lang}"
+                            .dir="${e.dir}"
                             @click="${(n) => e.onDismiss(n, t)}"></mosaik-dismiss>
             <mosaik-thumbnail part="thumbnail"
+                              .lang="${e.lang}"
+                              .dir="${e.dir}"
                               .preview="${Fme(t)}"></mosaik-thumbnail>
             <div part="content">
                 <mosaik-text part="label"
+                             .lang="${e.lang}"
+                             .dir="${e.dir}"
                              .text="${t.name}"
                              .truncate="${!0}"></mosaik-text>
                 <mosaik-text part="type"
+                             .lang="${e.lang}"
+                             .dir="${e.dir}"
                              .text="${t.type}"
                              .truncate="${!0}"></mosaik-text>
             </div>
@@ -153470,6 +153495,7 @@ var Y$ = function(e, t, n, r) {
 }, X$ = function(e, t) {
 	if (typeof Reflect == "object" && typeof Reflect.metadata == "function") return Reflect.metadata(e, t);
 }, Z$ = class extends F(z(J(R(Y(j))))) {
+	_inheritance = zx(this, { context: G$ });
 	_attachmentsElement;
 	_submitted;
 	_transformer;
@@ -153508,6 +153534,18 @@ var Y$ = function(e, t, n, r) {
 	get attachmentsElement() {
 		return this._attachmentsElement;
 	}
+	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;
+	}
 	send(e, t) {
 		let n = this._transformer({
 			text: e,
@@ -153593,11 +153631,8 @@ Y$([
 function Jme(e) {
 	return V`
         ${U(e.isSticky, () => V`
-        <mosaik-sticky>
-            <mosaik-stack .dir="${e.dir}"
-                        .orientation="${K.Horizontal}"
-                        .verticalAlignment="${fx.Center}"
-                        .gap="${"16px"}">
+        <mosaik-sticky part="sticky">
+            <div part="root">
                 <mosaik-divider part="divider"
                                 .dir="${e.dir}"
                                 .orientation="${K.Horizontal}"
@@ -153613,13 +153648,10 @@ function Jme(e) {
                                 .dir="${e.dir}"
                                 .orientation="${K.Horizontal}"
                                 .thickness="${e.thickness}"></mosaik-divider>
-            </mosaik-stack>
+            </div>
         </mosaik-sticky>
         `, () => V`
-            <mosaik-stack .dir="${e.dir}"
-                          .orientation="${K.Horizontal}"
-                          .verticalAlignment="${fx.Center}"
-                          .gap="${"16px"}">
+            <div part="root">
                 <mosaik-divider part="divider"
                                 .dir="${e.dir}"
                                 .orientation="${K.Horizontal}"
@@ -153635,7 +153667,7 @@ function Jme(e) {
                                 .dir="${e.dir}"
                                 .orientation="${K.Horizontal}"
                                 .thickness="${e.thickness}"></mosaik-divider>
-            </mosaik-stack>
+            </div>
         `)}
     `;
 }
@@ -153720,6 +153752,19 @@ function Yme() {
   display: flex;
 }
 
+:host [part="sticky"] {
+  width: 100%;
+}
+
+:host [part="root"] {
+  justify-content: center;
+  align-items: center;
+  gap: var(--chat-message-divider-gap);
+  flex-direction: row;
+  width: 100%;
+  display: inline-flex;
+}
+
 :host [part="text"] {
   flex-shrink: 0;
 }
@@ -153807,6 +153852,19 @@ function Xme() {
   display: flex;
 }
 
+:host [part="sticky"] {
+  width: 100%;
+}
+
+:host [part="root"] {
+  justify-content: center;
+  align-items: center;
+  gap: var(--chat-message-divider-gap);
+  flex-direction: row;
+  width: 100%;
+  display: inline-flex;
+}
+
 :host [part="text"] {
   flex-shrink: 0;
 }
@@ -153894,6 +153952,19 @@ function Zme() {
   display: flex;
 }
 
+:host [part="sticky"] {
+  width: 100%;
+}
+
+:host [part="root"] {
+  justify-content: center;
+  align-items: center;
+  gap: var(--chat-message-divider-gap);
+  flex-direction: row;
+  width: 100%;
+  display: inline-flex;
+}
+
 :host [part="text"] {
   flex-shrink: 0;
 }
@@ -154205,6 +154276,7 @@ var t1 = function(e, t, n, r) {
 }, n1 = function(e, t) {
 	if (typeof Reflect == "object" && typeof Reflect.metadata == "function") return Reflect.metadata(e, t);
 }, r1 = class extends F(J(z(R(j)))) {
+	_inheritance = zx(this, { context: G$ });
 	_text;
 	_icon;
 	_src;
@@ -154232,6 +154304,18 @@ var t1 = function(e, t, n, r) {
 	set src(e) {
 		this._src !== e && (this._src = e, this.requestUpdate("src"));
 	}
+	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;
+	}
 };
 t1([
 	P({ type: String }),
@@ -154260,10 +154344,7 @@ t1([
 //#region ../mosaik-elements-foundation/dist/Controls/Components/Media/Chat/ChatMessageElementTemplate.js
 function nhe(e) {
 	return V`
-        <mosaik-stack part="root"
-                      .dir="${e.dir}"
-                      .orientation="${K.Horizontal}"
-                      .reverse="${!e.reply}">
+        <div part="root">
             <slot name="avatar"
                   @slotchange="${(t) => e.onSlotChange(t)}"></slot>
             <div part="content">
@@ -154307,13 +154388,19 @@ function nhe(e) {
                             `)}
                         </slot>
                     </div>
+                    <div part="reactions"
+                         ?hidden="${!DM(e, "has-reactions", e.hasSlotContent("reaction"))}">
+                        <slot name="reaction"></slot>
+                    </div>
+                </div>
+                <div part="actions"
+                        ?hidden="${!DM(e, "has-actions", e.hasSlotContent("actions"))}">
+                    <slot name="actions"></slot>
                 </div>
                 <slot name="attachment"></slot>
             </div>
-        </mosaik-stack>
-        <div part="reactions">
-            <slot name="reaction"></slot>
         </div>
+
     `;
 }
 //#endregion
@@ -154384,7 +154471,11 @@ function rhe() {
 }
 
 :host [part="root"] {
+  justify-content: stretch;
+  align-items: stretch;
   gap: var(--chat-message-gap);
+  flex-direction: row-reverse;
+  display: flex;
 }
 
 :host [part="root"] [part="content"] {
@@ -154422,6 +154513,7 @@ function rhe() {
   border-top-right-radius: 0;
   flex-direction: column;
   display: flex;
+  position: relative;
 }
 
 :host [part="root"] [part="content"] [part="message"] [part="header"] {
@@ -154453,10 +154545,22 @@ function rhe() {
   animation-delay: -.8s;
 }
 
-:host [part="reactions"] {
+:host [part="root"] [part="content"] [part="message"] [part="reactions"] {
   height: 0;
+  bottom: 0;
+  left: unset;
   display: flex;
-  position: relative;
+  position: absolute;
+  right: 0;
+}
+
+:host [part="root"] [part="content"] [part="actions"] {
+  height: 0;
+  bottom: 0;
+  left: 0;
+  right: unset;
+  display: flex;
+  position: absolute;
 }
 
 :host([reply]) {
@@ -154464,6 +154568,10 @@ function rhe() {
   margin-right: var(--chat-message-white-space);
 }
 
+:host([reply]) [part="root"] {
+  flex-direction: row;
+}
+
 :host([reply]) [part="root"] [part="content"] {
   align-items: flex-start;
 }
@@ -154473,6 +154581,20 @@ function rhe() {
   border-top-left-radius: 0;
 }
 
+:host([reply]) [part="root"] [part="reactions"] {
+  right: unset;
+  left: 0;
+}
+
+:host([reply]) [part="root"] [part="actions"] {
+  right: 0;
+  left: unset;
+}
+
+:host([has-reactions]), :host([has-actions]) {
+  margin-bottom: calc(var(--chat-message-white-space) / 2);
+}
+
 @keyframes wave {
   0%, 60%, 100% {
     transform: initial;
@@ -154553,7 +154675,11 @@ function ihe() {
 }
 
 :host [part="root"] {
+  justify-content: stretch;
+  align-items: stretch;
   gap: var(--chat-message-gap);
+  flex-direction: row-reverse;
+  display: flex;
 }
 
 :host [part="root"] [part="content"] {
@@ -154591,6 +154717,7 @@ function ihe() {
   border-top-right-radius: 0;
   flex-direction: column;
   display: flex;
+  position: relative;
 }
 
 :host [part="root"] [part="content"] [part="message"] [part="header"] {
@@ -154622,10 +154749,22 @@ function ihe() {
   animation-delay: -.8s;
 }
 
-:host [part="reactions"] {
+:host [part="root"] [part="content"] [part="message"] [part="reactions"] {
   height: 0;
+  bottom: 0;
+  left: unset;
   display: flex;
-  position: relative;
+  position: absolute;
+  right: 0;
+}
+
+:host [part="root"] [part="content"] [part="actions"] {
+  height: 0;
+  bottom: 0;
+  left: 0;
+  right: unset;
+  display: flex;
+  position: absolute;
 }
 
 :host([reply]) {
@@ -154633,6 +154772,10 @@ function ihe() {
   margin-right: var(--chat-message-white-space);
 }
 
+:host([reply]) [part="root"] {
+  flex-direction: row;
+}
+
 :host([reply]) [part="root"] [part="content"] {
   align-items: flex-start;
 }
@@ -154642,6 +154785,20 @@ function ihe() {
   border-top-left-radius: 0;
 }
 
+:host([reply]) [part="root"] [part="reactions"] {
+  right: unset;
+  left: 0;
+}
+
+:host([reply]) [part="root"] [part="actions"] {
+  right: 0;
+  left: unset;
+}
+
+:host([has-reactions]), :host([has-actions]) {
+  margin-bottom: calc(var(--chat-message-white-space) / 2);
+}
+
 @keyframes wave {
   0%, 60%, 100% {
     transform: initial;
@@ -154797,7 +154954,11 @@ function ahe() {
 }
 
 :host [part="root"] {
+  justify-content: stretch;
+  align-items: stretch;
   gap: var(--chat-message-gap);
+  flex-direction: row-reverse;
+  display: flex;
 }
 
 :host [part="root"] [part="content"] {
@@ -154835,6 +154996,7 @@ function ahe() {
   border-top-right-radius: 0;
   flex-direction: column;
   display: flex;
+  position: relative;
 }
 
 :host [part="root"] [part="content"] [part="message"] [part="header"] {
@@ -154866,10 +155028,22 @@ function ahe() {
   animation-delay: -.8s;
 }
 
-:host [part="reactions"] {
+:host [part="root"] [part="content"] [part="message"] [part="reactions"] {
   height: 0;
+  bottom: 0;
+  left: unset;
   display: flex;
-  position: relative;
+  position: absolute;
+  right: 0;
+}
+
+:host [part="root"] [part="content"] [part="actions"] {
+  height: 0;
+  bottom: 0;
+  left: 0;
+  right: unset;
+  display: flex;
+  position: absolute;
 }
 
 :host([reply]) {
@@ -154877,6 +155051,10 @@ function ahe() {
   margin-right: var(--chat-message-white-space);
 }
 
+:host([reply]) [part="root"] {
+  flex-direction: row;
+}
+
 :host([reply]) [part="root"] [part="content"] {
   align-items: flex-start;
 }
@@ -154886,6 +155064,20 @@ function ahe() {
   border-top-left-radius: 0;
 }
 
+:host([reply]) [part="root"] [part="reactions"] {
+  right: unset;
+  left: 0;
+}
+
+:host([reply]) [part="root"] [part="actions"] {
+  right: 0;
+  left: unset;
+}
+
+:host([has-reactions]), :host([has-actions]) {
+  margin-bottom: calc(var(--chat-message-white-space) / 2);
+}
+
 @keyframes wave {
   0%, 60%, 100% {
     transform: initial;
@@ -154950,30 +155142,19 @@ var i1 = function(e, t, n, r) {
 	set at(e) {
 		this._at !== e && (this._at = e, this.requestUpdate("at"));
 	}
-	onSlotChange(e) {
-		let t = this.getSlotAssignmentsOf("avatar", r1);
-		this.hasUpdated && t.forEach((e) => {
-			e.variant = this.variant, e.appearance = this.appearance, e.disabled = this.disabled;
-		});
+	get variant() {
+		return this._inheritance.get("variant", super.variant);
 	}
-	onVariantPropertyChanged(e, t) {
-		let n = this.getSlotAssignmentsOf("avatar", r1);
-		t && n.forEach((e) => {
-			e.variant = t;
-		});
+	set variant(e) {
+		this._inheritance.markExplicit("variant"), super.variant = e;
 	}
-	onAppearancePropertyChanged(e, t) {
-		let n = this.getSlotAssignmentsOf("avatar", r1);
-		t && n.forEach((e) => {
-			e.appearance = t;
-		});
+	get appearance() {
+		return this._inheritance.get("appearance", super.appearance);
 	}
-	onDisabledPropertyChanged(e, t) {
-		let n = this.getSlotAssignmentsOf("avatar", r1);
-		t !== void 0 && n.forEach((e) => {
-			e.disabled = t;
-		});
+	set appearance(e) {
+		this._inheritance.markExplicit("appearance"), super.appearance = e;
 	}
+	onSlotChange(e) {}
 };
 i1([
 	P({ type: String }),
@@ -154998,22 +155179,7 @@ i1([
 	P({ type: String }),
 	a1("design:type", String),
 	a1("design:paramtypes", [String])
-], o1.prototype, "at", null), i1([
-	L("variant"),
-	a1("design:type", Function),
-	a1("design:paramtypes", [String, String]),
-	a1("design:returntype", void 0)
-], o1.prototype, "onVariantPropertyChanged", null), i1([
-	L("appearance"),
-	a1("design:type", Function),
-	a1("design:paramtypes", [String, String]),
-	a1("design:returntype", void 0)
-], o1.prototype, "onAppearancePropertyChanged", null), i1([
-	L("disabled"),
-	a1("design:type", Function),
-	a1("design:paramtypes", [Boolean, Boolean]),
-	a1("design:returntype", void 0)
-], o1.prototype, "onDisabledPropertyChanged", null), o1 = i1([H({
+], o1.prototype, "at", null), o1 = i1([H({
 	selector: "mosaik-chat-message",
 	template: nhe,
 	themes: {
@@ -155147,6 +155313,7 @@ function ohe() {
   padding-bottom: var(--chat-padding-bottom);
   padding-left: var(--chat-padding-left);
   gap: var(--chat-gap);
+  height: 100%;
   overflow: overlay;
   flex-direction: column;
   align-items: stretch;
@@ -155285,6 +155452,7 @@ function she() {
   padding-bottom: var(--chat-padding-bottom);
   padding-left: var(--chat-padding-left);
   gap: var(--chat-gap);
+  height: 100%;
   overflow: overlay;
   flex-direction: column;
   align-items: stretch;
@@ -155432,6 +155600,7 @@ function che() {
   padding-bottom: var(--chat-padding-bottom);
   padding-left: var(--chat-padding-left);
   gap: var(--chat-gap);
+  height: 100%;
   overflow: overlay;
   flex-direction: column;
   align-items: stretch;
@@ -155481,18 +155650,18 @@ var c1 = function(e, t, n, r) {
 	if (typeof Reflect == "object" && typeof Reflect.metadata == "function") return Reflect.metadata(e, t);
 }, u1 = class extends F(Ek(J(z(Y(j))))) {
 	_intl;
-	_provider = XS(this, {
-		context: G$,
-		values: () => ({
-			variant: this.variant,
-			appearance: this.appearance
-		})
-	});
 	_scrollToEnd;
 	_begin;
 	_inputElement;
 	constructor() {
-		super(), this._intl = new TI(this, { factory: () => new s1() }), this._scrollToEnd = !1, this._begin = L$.Start;
+		super(), this._intl = new TI(this, { factory: () => new s1() }), XS(this, {
+			context: G$,
+			values: () => ({
+				variant: this.variant,
+				appearance: this.appearance,
+				intl: this.intl
+			})
+		}), this._scrollToEnd = !1, this._begin = L$.Start;
 	}
 	static get is() {
 		return "mosaik-chat";
@@ -155576,11 +155745,7 @@ function lhe(e) {
 	return V`
         ${U(e.isSticky, () => V`
         <mosaik-sticky>
-            <mosaik-stack .dir="${e.dir}"
-                          .verticalAlignment="${fx.Center}"
-                          .horizontalAlignment="${dx.Center}"
-                          .orientation="${e.orientation}"
-                          .gap="${"8px"}">
+            <div part="root">
                 ${U(e.icon, () => V`
                 <mosaik-icon part="icon"
                              .dir="${e.dir}"
@@ -155595,16 +155760,13 @@ function lhe(e) {
                                  .alignment="${Bb.Center}"
                                  .wrap="${!0}"></mosaik-text>
                 </slot>
-            </mosaik-stack>
+            </div>
         </mosaik-sticky>
         `, () => V`
-        <mosaik-stack .dir="${e.dir}"
-                      .verticalAlignment="${fx.Center}"
-                      .horizontalAlignment="${dx.Center}"
-                      .orientation="${e.orientation}"
-                      .gap="${"8px"}">
+        <div part="root">
             ${U(e.icon, () => V`
-            <mosaik-icon .dir="${e.dir}"
+            <mosaik-icon part="icon"
+                         .dir="${e.dir}"
                          .size="${G.Tiny}"
                          .data="${e.icon}"></mosaik-icon>
             `)}
@@ -155616,14 +155778,120 @@ function lhe(e) {
                              .alignment="${Bb.Center}"
                              .wrap="${!0}"></mosaik-text>
             </slot>
-        </mosaik-stack>
+        </div>
         `)}
     `;
 }
 //#endregion
-//#region ../mosaik-elements-foundation/dist/Controls/Components/Media/Chat/Themes/ChatMarkerElement.Joy.js
+//#region ../mosaik-elements-foundation/dist/Controls/Components/Media/Chat/Themes/ChatMarkerElement.Cosmopolitan.js
 function uhe() {
 	return B`
+:host {
+  --chat-marker-background-color: unset;
+  --chat-marker-border-color: unset;
+  --chat-marker-border-radius: unset;
+  --chat-marker-border-style: unset;
+  --chat-marker-border-width: unset;
+  --chat-marker-font-family: unset;
+  --chat-marker-font-letter-spacing: unset;
+  --chat-marker-font-line-height: unset;
+  --chat-marker-font-size: unset;
+  --chat-marker-font-text-decoration: unset;
+  --chat-marker-font-text-transform: unset;
+  --chat-marker-font-weight: unset;
+  --chat-marker-foreground-color: unset;
+  --chat-marker-gap: unset;
+  --chat-marker-padding-bottom: unset;
+  --chat-marker-padding-left: unset;
+  --chat-marker-padding-right: unset;
+  --chat-marker-padding-top: unset;
+  --chat-marker-shadow: unset unset unset unset unset;
+  --chat-marker-shadow-blur: unset;
+  --chat-marker-shadow-color: unset;
+  --chat-marker-shadow-offset-x: unset;
+  --chat-marker-shadow-offset-y: unset;
+  --chat-marker-shadow-spread: unset;
+  --chat-marker-transition-duration: unset;
+  --chat-marker-transition-mode: unset;
+  --chat-marker-transition-property: unset;
+  --chat-marker-translate: none;
+}
+
+@media screen and (prefers-reduced-motion: reduce) {
+  :host {
+    transition-duration: .01ms;
+  }
+}
+
+:host {
+  box-sizing: border-box;
+  display: block;
+  position: relative;
+}
+
+:host *, :host :before, :host :after {
+  box-sizing: border-box;
+  background-repeat: no-repeat;
+}
+
+:host :before, :host :after {
+  text-decoration: inherit;
+  vertical-align: inherit;
+}
+
+:host([hidden]) {
+  display: none !important;
+}
+
+:host {
+  font-family: var(--chat-marker-font-family);
+  font-size: var(--chat-marker-font-size);
+  line-height: var(--chat-marker-font-line-height);
+  font-weight: var(--chat-marker-font-weight);
+  letter-spacing: var(--chat-marker-font-letter-spacing);
+  -webkit-text-decoration: var(--chat-marker-font-text-decoration);
+  text-decoration: var(--chat-marker-font-text-decoration);
+  text-transform: var(--chat-marker-font-text-transform);
+  border-width: var(--chat-marker-border-width);
+  border-radius: var(--chat-marker-border-radius);
+  border-style: var(--chat-marker-border-style);
+  background-color: var(--chat-marker-background-color);
+  border-color: var(--chat-marker-border-color);
+  color: var(--chat-marker-foreground-color);
+  padding-top: var(--chat-marker-padding-top);
+  padding-right: var(--chat-marker-padding-right);
+  padding-bottom: var(--chat-marker-padding-bottom);
+  padding-left: var(--chat-marker-padding-left);
+}
+
+:host [part="root"] {
+  justify-content: center;
+  align-items: center;
+  gap: var(--chat-marker-gap);
+  flex-direction: column;
+  display: inline-flex;
+}
+
+:host [part="text"] {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  font-weight: inherit;
+  letter-spacing: inherit;
+  text-decoration: inherit;
+  text-transform: inherit;
+}
+
+:host [part="icon"] {
+  flex-shrink: 0;
+}
+
+    `;
+}
+//#endregion
+//#region ../mosaik-elements-foundation/dist/Controls/Components/Media/Chat/Themes/ChatMarkerElement.Joy.js
+function dhe() {
+	return B`
 :host {
   --chat-marker-background-color: var(--joy-scheme-background);
   --chat-marker-border-color: var(--joy-scheme-highlight);
@@ -155700,7 +155968,14 @@ function uhe() {
   padding-right: var(--chat-marker-padding-right);
   padding-bottom: var(--chat-marker-padding-bottom);
   padding-left: var(--chat-marker-padding-left);
+}
+
+:host [part="root"] {
+  justify-content: center;
+  align-items: center;
   gap: var(--chat-marker-gap);
+  flex-direction: column;
+  display: inline-flex;
 }
 
 :host [part="text"] {
@@ -155963,7 +156238,7 @@ function uhe() {
 }
 //#endregion
 //#region ../mosaik-elements-foundation/dist/Controls/Components/Media/Chat/Themes/ChatMarkerElement.Memphis.js
-function dhe() {
+function fhe() {
 	return B`
 :host {
   --chat-marker-background-color: var(--memphis-scheme-background);
@@ -156041,106 +156316,14 @@ function dhe() {
   padding-right: var(--chat-marker-padding-right);
   padding-bottom: var(--chat-marker-padding-bottom);
   padding-left: var(--chat-marker-padding-left);
-  gap: var(--chat-marker-gap);
-}
-
-:host [part="text"] {
-  font-family: inherit;
-  font-size: inherit;
-  line-height: inherit;
-  font-weight: inherit;
-  letter-spacing: inherit;
-  text-decoration: inherit;
-  text-transform: inherit;
-}
-
-:host [part="icon"] {
-  flex-shrink: 0;
-}
-
-    `;
-}
-//#endregion
-//#region ../mosaik-elements-foundation/dist/Controls/Components/Media/Chat/Themes/ChatMarkerElement.Cosmopolitan.js
-function fhe() {
-	return B`
-:host {
-  --chat-marker-background-color: unset;
-  --chat-marker-border-color: unset;
-  --chat-marker-border-radius: unset;
-  --chat-marker-border-style: unset;
-  --chat-marker-border-width: unset;
-  --chat-marker-font-family: unset;
-  --chat-marker-font-letter-spacing: unset;
-  --chat-marker-font-line-height: unset;
-  --chat-marker-font-size: unset;
-  --chat-marker-font-text-decoration: unset;
-  --chat-marker-font-text-transform: unset;
-  --chat-marker-font-weight: unset;
-  --chat-marker-foreground-color: unset;
-  --chat-marker-gap: unset;
-  --chat-marker-padding-bottom: unset;
-  --chat-marker-padding-left: unset;
-  --chat-marker-padding-right: unset;
-  --chat-marker-padding-top: unset;
-  --chat-marker-shadow: unset unset unset unset unset;
-  --chat-marker-shadow-blur: unset;
-  --chat-marker-shadow-color: unset;
-  --chat-marker-shadow-offset-x: unset;
-  --chat-marker-shadow-offset-y: unset;
-  --chat-marker-shadow-spread: unset;
-  --chat-marker-transition-duration: unset;
-  --chat-marker-transition-mode: unset;
-  --chat-marker-transition-property: unset;
-  --chat-marker-translate: none;
 }
 
-@media screen and (prefers-reduced-motion: reduce) {
-  :host {
-    transition-duration: .01ms;
-  }
-}
-
-:host {
-  box-sizing: border-box;
-  display: block;
-  position: relative;
-}
-
-:host *, :host :before, :host :after {
-  box-sizing: border-box;
-  background-repeat: no-repeat;
-}
-
-:host :before, :host :after {
-  text-decoration: inherit;
-  vertical-align: inherit;
-}
-
-:host([hidden]) {
-  display: none !important;
-}
-
-:host {
-  font-family: var(--chat-marker-font-family);
-  font-size: var(--chat-marker-font-size);
-  line-height: var(--chat-marker-font-line-height);
-  font-weight: var(--chat-marker-font-weight);
-  letter-spacing: var(--chat-marker-font-letter-spacing);
-  -webkit-text-decoration: var(--chat-marker-font-text-decoration);
-  text-decoration: var(--chat-marker-font-text-decoration);
-  text-transform: var(--chat-marker-font-text-transform);
-  border-width: var(--chat-marker-border-width);
-  border-radius: var(--chat-marker-border-radius);
-  border-style: var(--chat-marker-border-style);
-  background-color: var(--chat-marker-background-color);
-  border-color: var(--chat-marker-border-color);
-  color: var(--chat-marker-foreground-color);
-  padding-top: var(--chat-marker-padding-top);
-  padding-right: var(--chat-marker-padding-right);
-  padding-bottom: var(--chat-marker-padding-bottom);
-  padding-left: var(--chat-marker-padding-left);
+:host [part="root"] {
+  justify-content: center;
+  align-items: center;
   gap: var(--chat-marker-gap);
+  flex-direction: column;
+  display: inline-flex;
 }
 
 :host [part="text"] {
@@ -156169,6 +156352,7 @@ var d1 = function(e, t, n, r) {
 }, f1 = function(e, t) {
 	if (typeof Reflect == "object" && typeof Reflect.metadata == "function") return Reflect.metadata(e, t);
 }, p1 = class extends F(z(Ax(hx(IU(Rb(J(j))))))) {
+	_inheritance = zx(this, { context: G$ });
 	_text;
 	_icon;
 	constructor() {
@@ -156189,6 +156373,18 @@ var d1 = function(e, t, n, r) {
 	set icon(e) {
 		this._icon !== e && (this._icon = e, this.requestUpdate("icon"));
 	}
+	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;
+	}
 };
 d1([
 	P({ type: String }),
@@ -156202,9 +156398,9 @@ d1([
 	selector: "mosaik-chat-marker",
 	template: lhe,
 	themes: {
-		joy: uhe,
-		memphis: dhe,
-		cosmopolitan: fhe
+		joy: dhe,
+		memphis: fhe,
+		cosmopolitan: uhe
 	},
 	host: {
 		role: "listitem",
@@ -156221,13 +156417,18 @@ d1([
 //#region ../mosaik-elements-foundation/dist/Controls/Components/Media/Chat/ChatMessageReactionElementTemplate.js
 function phe(e) {
 	return V`
-        <mosaik-button .dir="${e.dir}"
+        <mosaik-button part="button"
+                       .dir="${e.dir}"
                        .lang="${e.lang}"
                        .disabled="${e.disabled}">
-            <mosaik-emoji part="emoji"
-                          .emoji="${e.emoji}"></mosaik-emoji>
-            <mosaik-text part="count"
-                         ?hidden="${e.count <= 0}">${e.count}</mosaik-text>
+            <mosaik-emoji slot="icon"
+                          part="emoji"
+                          .emoji="${e.emoji}"
+                          .size="${"tiny"}"></mosaik-emoji>
+            <mosaik-text slot="label"
+                         part="count"
+                         .text="${String(e.count)}"
+                         ?hidden="${e.count <= 1}"></mosaik-text>
         </mosaik-button>
     `;
 }
@@ -156311,6 +156512,10 @@ function mhe() {
   display: inline-flex;
 }
 
+:host [part="button"] {
+  --button-min-width: auto;
+}
+
 :host [part="emoji"], :host [part="count"] {
   flex-shrink: 0;
 }
@@ -156331,10 +156536,10 @@ function hhe() {
   --chat-message-reaction-font-weight: var(--joy-typography-caption-font-weight);
   --chat-message-reaction-foreground-color: var(--joy-scheme-foreground);
   --chat-message-reaction-gap: calc(var(--joy-layout-space) / 2);
-  --chat-message-reaction-padding-bottom: calc(var(--joy-layout-space) / 2);
+  --chat-message-reaction-padding-bottom: var(--joy-layout-space);
   --chat-message-reaction-padding-left: var(--joy-layout-space);
   --chat-message-reaction-padding-right: var(--joy-layout-space);
-  --chat-message-reaction-padding-top: calc(var(--joy-layout-space) / 2);
+  --chat-message-reaction-padding-top: var(--joy-layout-space);
   --chat-message-reaction-shadow: unset unset unset unset unset;
   --chat-message-reaction-shadow-blur: unset;
   --chat-message-reaction-shadow-color: unset;
@@ -156397,6 +156602,10 @@ function hhe() {
   display: inline-flex;
 }
 
+:host [part="button"] {
+  --button-min-width: auto;
+}
+
 :host [part="emoji"], :host [part="count"] {
   flex-shrink: 0;
 }
@@ -156483,6 +156692,10 @@ function ghe() {
   display: inline-flex;
 }
 
+:host [part="button"] {
+  --button-min-width: auto;
+}
+
 :host [part="emoji"], :host [part="count"] {
   flex-shrink: 0;
 }
@@ -156840,7 +157053,7 @@ function xhe() {
 function She() {
 	return B`
 :host {
-  --emoji-background-color: var(--joy-scheme-highlight);
+  --emoji-background-color: unset;
   --emoji-font-family: unset;
   --emoji-font-letter-spacing: unset;
   --emoji-font-line-height: unset;
@@ -224541,7 +224754,7 @@ function yEe(e) {
         <mosaik-progress-ring part="symbol"
                               .radius="${"26px"}"
                               .isIndeterminate="${!0}"></mosaik-progress-ring>
-        <mosaik-stack .orientation="${K.Vertical}">
+        <div part="root">
             ${U(e.header, () => V`
             <mosaik-text part="header"
                          .readonly="${!0}"
@@ -224559,11 +224772,10 @@ function yEe(e) {
                          .formatter="${e.formatter}"></mosaik-text>
             `)}
             <slot></slot>
-        </mosaik-stack>
-        <mosaik-stack part="innerStack" .orientation="${K.Horizontal}"
-                      ?hidden="${!e.hasSlotContent("actions")}">
+        </div>
+        <div part="actions" ?hidden="${!e.hasSlotContent("actions")}">
             <slot name="actions"></slot>
-        </mosaik-stack>
+        </div>
     `;
 }
 //#endregion
@@ -224673,8 +224885,17 @@ function bEe() {
   text-transform: var(--busy-state-content-font-text-transform);
 }
 
-:host [part="innerStack"] {
-  --stack-gap: var(--busy-state-gap);
+:host [part="root"] {
+  flex-direction: column;
+  align-items: center;
+  display: flex;
+}
+
+:host [part="actions"] {
+  align-items: center;
+  gap: var(--busy-state-gap);
+  flex-direction: row;
+  display: flex;
 }
 
     `;
@@ -224786,8 +225007,17 @@ function xEe() {
   text-transform: var(--busy-state-content-font-text-transform);
 }
 
-:host [part="innerStack"] {
-  --stack-gap: var(--busy-state-gap);
+:host [part="root"] {
+  flex-direction: column;
+  align-items: center;
+  display: flex;
+}
+
+:host [part="actions"] {
+  align-items: center;
+  gap: var(--busy-state-gap);
+  flex-direction: row;
+  display: flex;
 }
 
 :host [part="header"] {
@@ -224919,8 +225149,17 @@ function SEe() {
   text-transform: var(--busy-state-content-font-text-transform);
 }
 
-:host [part="innerStack"] {
-  --stack-gap: var(--busy-state-gap);
+:host [part="root"] {
+  flex-direction: column;
+  align-items: center;
+  display: flex;
+}
+
+:host [part="actions"] {
+  align-items: center;
+  gap: var(--busy-state-gap);
+  flex-direction: row;
+  display: flex;
 }
 
 :host [part="header"] {
@@ -224992,11 +225231,7 @@ q7([
 		memphis: SEe,
 		cosmopolitan: bEe
 	},
-	imports: [
-		NS,
-		W,
-		sS
-	]
+	imports: [NS, W]
 }), J7("design:paramtypes", [])], Y7);
 //#endregion
 //#region ../mosaik-elements-foundation/dist/Controls/Components/States/Error/ErrorStateElementTemplate.js
@@ -225006,7 +225241,7 @@ function CEe(e) {
                      .size="${G.Giant}"
                      .data="${e.icon.trim().length > 0 ? e.icon : X.errorCircle}"
                      .variant="${ib.Danger}"></mosaik-icon>
-        <mosaik-stack .orientation="${K.Vertical}">
+        <div part="root">
             ${U(e.header, () => V`
             <mosaik-text part="header"
                          .readonly="${!0}"
@@ -225032,11 +225267,10 @@ function CEe(e) {
                          .formatter="${e.formatter}"></mosaik-text>
             `)}
             <slot></slot>
-        </mosaik-stack>
-        <mosaik-stack part="innerStack" .orientation="${K.Horizontal}"
-                      ?hidden="${!e.hasSlotContent("actions")}">
+        </div>
+        <div part="actions" ?hidden="${!e.hasSlotContent("actions")}">
             <slot name="actions"></slot>
-        </mosaik-stack>
+        </div>
     `;
 }
 //#endregion
@@ -225141,8 +225375,17 @@ function wEe() {
   text-transform: var(--error-state-content-font-text-transform);
 }
 
-:host [part="innerStack"] {
-  --stack-gap: var(--error-state-gap);
+:host [part="root"] {
+  flex-direction: column;
+  align-items: center;
+  display: flex;
+}
+
+:host [part="actions"] {
+  align-items: center;
+  gap: var(--error-state-gap);
+  flex-direction: row;
+  display: flex;
 }
 
     `;
@@ -225248,8 +225491,17 @@ function TEe() {
   text-transform: var(--error-state-content-font-text-transform);
 }
 
-:host [part="innerStack"] {
-  --stack-gap: var(--error-state-gap);
+:host [part="root"] {
+  flex-direction: column;
+  align-items: center;
+  display: flex;
+}
+
+:host [part="actions"] {
+  align-items: center;
+  gap: var(--error-state-gap);
+  flex-direction: row;
+  display: flex;
 }
 
 :host [part="header"] {
@@ -225376,8 +225628,17 @@ function EEe() {
   text-transform: var(--error-state-content-font-text-transform);
 }
 
-:host [part="innerStack"] {
-  --stack-gap: var(--error-state-gap);
+:host [part="root"] {
+  flex-direction: column;
+  align-items: center;
+  display: flex;
+}
+
+:host [part="actions"] {
+  align-items: center;
+  gap: var(--error-state-gap);
+  flex-direction: row;
+  display: flex;
 }
 
 :host [part="header"] {
@@ -225460,11 +225721,7 @@ X7([
 		memphis: EEe,
 		cosmopolitan: wEe
 	},
-	imports: [
-		_S,
-		W,
-		sS
-	]
+	imports: [_S, W]
 }), Z7("design:paramtypes", [])], Q7);
 //#endregion
 //#region ../mosaik-elements-foundation/dist/Controls/Components/States/Success/SuccessStateElementTemplate.js
@@ -225474,7 +225731,7 @@ function DEe(e) {
                      .size="${G.Giant}"
                      .data="${e.icon.trim().length > 0 ? e.icon : X.successCircle}"
                      .variant="${ib.Success}"></mosaik-icon>
-        <mosaik-stack .orientation="${K.Vertical}">
+        <div part="root">
             ${U(e.header, () => V`
             <mosaik-text part="header"
                          .readonly="${!0}"
@@ -225492,11 +225749,10 @@ function DEe(e) {
                          .formatter="${e.formatter}"></mosaik-text>
             `)}
             <slot></slot>
-        </mosaik-stack>
-        <mosaik-stack part="innerStack" .orientation="${K.Horizontal}"
-                      ?hidden="${!e.hasSlotContent("actions")}">
+        </div>
+        <div part="actions" ?hidden="${!e.hasSlotContent("actions")}">
             <slot name="actions"></slot>
-        </mosaik-stack>
+        </div>
     `;
 }
 //#endregion
@@ -225601,8 +225857,17 @@ function OEe() {
   text-transform: var(--success-state-content-font-text-transform);
 }
 
-:host [part="innerStack"] {
-  --stack-gap: var(--success-state-gap);
+:host [part="root"] {
+  flex-direction: column;
+  align-items: center;
+  display: flex;
+}
+
+:host [part="actions"] {
+  align-items: center;
+  gap: var(--success-state-gap);
+  flex-direction: row;
+  display: flex;
 }
 
     `;
@@ -225708,8 +225973,17 @@ function kEe() {
   text-transform: var(--success-state-content-font-text-transform);
 }
 
-:host [part="innerStack"] {
-  --stack-gap: var(--success-state-gap);
+:host [part="root"] {
+  flex-direction: column;
+  align-items: center;
+  display: flex;
+}
+
+:host [part="actions"] {
+  align-items: center;
+  gap: var(--success-state-gap);
+  flex-direction: row;
+  display: flex;
 }
 
 :host [part="header"] {
@@ -225836,8 +226110,17 @@ function AEe() {
   text-transform: var(--success-state-content-font-text-transform);
 }
 
-:host [part="innerStack"] {
-  --stack-gap: var(--success-state-gap);
+:host [part="root"] {
+  flex-direction: column;
+  align-items: center;
+  display: flex;
+}
+
+:host [part="actions"] {
+  align-items: center;
+  gap: var(--success-state-gap);
+  flex-direction: row;
+  display: flex;
 }
 
 :host [part="header"] {
@@ -225909,11 +226192,7 @@ $7([
 		memphis: AEe,
 		cosmopolitan: OEe
 	},
-	imports: [
-		_S,
-		W,
-		sS
-	]
+	imports: [_S, W]
 }), e9("design:paramtypes", [])], t9);
 //#endregion
 //#region ../mosaik-elements-foundation/dist/Accessability/Platform.js