@breadstone/mosaik-elements-foundation 0.1.3 → 0.1.5

package/Controls/Components/Media/Chat/Themes/ChatMessageElement.Cosmopolitan.js

@@ -76,22 +76,47 @@ export function chatMessageElementCosmopolitanStyle() {
 }
 
 :host [part="root"] {
-  justify-content: stretch;
-  align-items: stretch;
+  justify-content: flex-end;
+  align-items: flex-start;
   gap: var(--chat-message-gap);
   flex-direction: row-reverse;
   display: flex;
 }
 
-:host [part="root"] [part="content"] {
+:host [part="root"] [part="message-area"] {
   justify-content: center;
   align-items: flex-end;
   gap: calc(var(--chat-message-gap) / 2);
   flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  max-width: 100%;
   display: flex;
 }
 
-:host [part="root"] [part="content"] [part="message"] {
+:host [part="root"] [part="message-area"] [part="message-stack"] {
+  flex-direction: column;
+  align-items: flex-end;
+  width: max-content;
+  min-width: 0;
+  max-width: 100%;
+  display: flex;
+}
+
+:host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] {
+  justify-content: flex-end;
+  align-items: flex-start;
+  gap: calc(var(--chat-message-gap) / 2);
+  box-sizing: border-box;
+  flex-direction: row;
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  display: flex;
+  position: relative;
+}
+
+:host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message"] {
   border-width: var(--chat-message-border-width);
   border-radius: var(--chat-message-border-radius);
   border-style: var(--chat-message-border-style);
@@ -115,44 +140,103 @@ export function chatMessageElementCosmopolitanStyle() {
   text-decoration: var(--chat-message-font-text-decoration);
   text-transform: var(--chat-message-font-text-transform);
   box-shadow: var(--chat-message-shadow-offset-x) var(--chat-message-shadow-offset-y) var(--chat-message-shadow-blur) var(--chat-message-shadow-spread) var(--chat-message-shadow-color);
+  box-sizing: border-box;
   border-top-right-radius: 0;
   flex-direction: column;
+  flex: auto;
+  min-width: 0;
+  max-width: 100%;
   display: flex;
 }
 
-:host [part="root"] [part="content"] [part="message"] [part="header"] {
+:host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message"] [part="header"] {
   gap: var(--chat-message-gap);
   justify-content: space-between;
   align-items: center;
   display: flex;
 }
 
-:host [part="root"] [part="content"] [part="message"] [part="content"] [part="text"] {
+:host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message"] [part="message-body"] [part="text"] {
   word-break: break-word;
 }
 
-:host [part="root"] [part="content"] [part="message"] [part="content"] [part="busy"] {
+:host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message"] [part="message-body"] [part="busy"] {
   gap: calc(var(--chat-message-gap) / 2);
   align-items: center;
   display: flex;
 }
 
-:host [part="root"] [part="content"] [part="message"] [part="content"] [part="busy"] [part="dot"] {
+:host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message"] [part="message-body"] [part="busy"] [part="dot"] {
   animation: 1.2s ease-out infinite wave;
 }
 
-:host [part="root"] [part="content"] [part="message"] [part="content"] [part="busy"] [part="dot"]:nth-child(2) {
+:host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message"] [part="message-body"] [part="busy"] [part="dot"]:nth-child(2) {
   animation-delay: -1s;
 }
 
-:host [part="root"] [part="content"] [part="message"] [part="content"] [part="busy"] [part="dot"]:nth-child(3) {
+:host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message"] [part="message-body"] [part="busy"] [part="dot"]:nth-child(3) {
   animation-delay: -.8s;
 }
 
-:host [part="reactions"] {
-  height: 0;
+:host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message-after"] {
+  flex-shrink: 0;
+  align-items: flex-start;
+  display: flex;
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: calc(100% + var(--chat-message-gap) / 2);
+}
+
+:host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message-after"][hidden] {
+  display: none;
+}
+
+:host [part="root"] [part="message-area"] [part="message-stack"] [part="footer"] {
+  contain: inline-size;
+  box-sizing: border-box;
+  justify-content: flex-start;
+  align-items: flex-end;
+  gap: var(--chat-message-gap);
+  flex-direction: column;
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  display: flex;
+  overflow: visible;
+}
+
+:host [part="root"] [part="message-area"] [part="message-stack"] [part="footer"] [part="actions"] {
+  gap: calc(var(--chat-message-gap) / 2);
+  box-sizing: border-box;
+  flex-flow: wrap;
+  order: 2;
+  justify-content: flex-end;
+  align-items: center;
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
   display: flex;
-  position: relative;
+}
+
+:host [part="root"] [part="message-area"] [part="message-stack"] [part="footer"] [part="actions"] ::slotted(*) {
+  min-width: 0;
+  max-width: 100%;
+}
+
+:host [part="root"] [part="message-area"] [part="message-stack"] [part="footer"] [part="reactions"] {
+  gap: calc(var(--chat-message-gap) / 2);
+  min-width: 0;
+  max-width: 100%;
+  margin-top: calc(var(--chat-message-gap) * -1.5);
+  flex-flow: wrap;
+  order: 1;
+  justify-content: flex-end;
+  align-items: center;
+  display: flex;
+}
+
+:host [part="root"] [part="message-area"] [part="message-stack"] [part="footer"] [part="actions"][hidden], :host [part="root"] [part="message-area"] [part="message-stack"] [part="footer"] [part="reactions"][hidden], :host [part="root"] [part="message-area"] [part="message-stack"] [part="footer"][hidden] {
+  display: none;
 }
 
 :host([reply]) {
@@ -162,17 +246,34 @@ export function chatMessageElementCosmopolitanStyle() {
 
 :host([reply]) [part="root"] {
   flex-direction: row;
+  justify-content: flex-start;
 }
 
-:host([reply]) [part="root"] [part="content"] {
+:host([reply]) [part="root"] [part="message-area"], :host([reply]) [part="root"] [part="message-area"] [part="message-stack"] {
   align-items: flex-start;
 }
 
-:host([reply]) [part="root"] [part="content"] [part="message"] {
+:host([reply]) [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] {
+  justify-content: flex-start;
+}
+
+:host([reply]) [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message"] {
   border-top-right-radius: var(--chat-message-border-radius);
   border-top-left-radius: 0;
 }
 
+:host([reply]) [part="root"] [part="message-area"] [part="message-stack"] [part="footer"] {
+  align-items: flex-start;
+}
+
+:host([reply]) [part="root"] [part="message-area"] [part="message-stack"] [part="footer"] [part="actions"], :host([reply]) [part="root"] [part="message-area"] [part="message-stack"] [part="footer"] [part="reactions"] {
+  justify-content: flex-start;
+}
+
+:host([has-footer]) {
+  margin-bottom: calc(var(--chat-message-white-space) / 4);
+}
+
 @keyframes wave {
   0%, 60%, 100% {
     transform: initial;

package/Controls/Components/Media/Chat/Themes/ChatMessageElement.Cosmopolitan.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChatMessageElement.Cosmopolitan.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Media/Chat/Themes/ChatMessageElement.Cosmopolitan.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,mCAAmC;IAC/C,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4KT,CAAC;AACN,CAAC"}
+{"version":3,"file":"ChatMessageElement.Cosmopolitan.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Media/Chat/Themes/ChatMessageElement.Cosmopolitan.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,mCAAmC;IAC/C,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAiRT,CAAC;AACN,CAAC"}

package/Controls/Components/Media/Chat/Themes/ChatMessageElement.Joy.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatMessageElement.Joy.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Media/Chat/Themes/ChatMessageElement.Joy.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,0BAA0B,IAAI,SAAS,CAyPtD"}
+{"version":3,"file":"ChatMessageElement.Joy.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Media/Chat/Themes/ChatMessageElement.Joy.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,0BAA0B,IAAI,SAAS,CA8VtD"}

package/Controls/Components/Media/Chat/Themes/ChatMessageElement.Joy.js

@@ -76,22 +76,47 @@ export function chatMessageElementJoyStyle() {
 }
 
 :host [part="root"] {
-  justify-content: stretch;
-  align-items: stretch;
+  justify-content: flex-end;
+  align-items: flex-start;
   gap: var(--chat-message-gap);
   flex-direction: row-reverse;
   display: flex;
 }
 
-:host [part="root"] [part="content"] {
+:host [part="root"] [part="message-area"] {
   justify-content: center;
   align-items: flex-end;
   gap: calc(var(--chat-message-gap) / 2);
   flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  max-width: 100%;
   display: flex;
 }
 
-:host [part="root"] [part="content"] [part="message"] {
+:host [part="root"] [part="message-area"] [part="message-stack"] {
+  flex-direction: column;
+  align-items: flex-end;
+  width: max-content;
+  min-width: 0;
+  max-width: 100%;
+  display: flex;
+}
+
+:host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] {
+  justify-content: flex-end;
+  align-items: flex-start;
+  gap: calc(var(--chat-message-gap) / 2);
+  box-sizing: border-box;
+  flex-direction: row;
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  display: flex;
+  position: relative;
+}
+
+:host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message"] {
   border-width: var(--chat-message-border-width);
   border-radius: var(--chat-message-border-radius);
   border-style: var(--chat-message-border-style);
@@ -115,44 +140,103 @@ export function chatMessageElementJoyStyle() {
   text-decoration: var(--chat-message-font-text-decoration);
   text-transform: var(--chat-message-font-text-transform);
   box-shadow: var(--chat-message-shadow-offset-x) var(--chat-message-shadow-offset-y) var(--chat-message-shadow-blur) var(--chat-message-shadow-spread) var(--chat-message-shadow-color);
+  box-sizing: border-box;
   border-top-right-radius: 0;
   flex-direction: column;
+  flex: auto;
+  min-width: 0;
+  max-width: 100%;
   display: flex;
 }
 
-:host [part="root"] [part="content"] [part="message"] [part="header"] {
+:host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message"] [part="header"] {
   gap: var(--chat-message-gap);
   justify-content: space-between;
   align-items: center;
   display: flex;
 }
 
-:host [part="root"] [part="content"] [part="message"] [part="content"] [part="text"] {
+:host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message"] [part="message-body"] [part="text"] {
   word-break: break-word;
 }
 
-:host [part="root"] [part="content"] [part="message"] [part="content"] [part="busy"] {
+:host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message"] [part="message-body"] [part="busy"] {
   gap: calc(var(--chat-message-gap) / 2);
   align-items: center;
   display: flex;
 }
 
-:host [part="root"] [part="content"] [part="message"] [part="content"] [part="busy"] [part="dot"] {
+:host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message"] [part="message-body"] [part="busy"] [part="dot"] {
   animation: 1.2s ease-out infinite wave;
 }
 
-:host [part="root"] [part="content"] [part="message"] [part="content"] [part="busy"] [part="dot"]:nth-child(2) {
+:host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message"] [part="message-body"] [part="busy"] [part="dot"]:nth-child(2) {
   animation-delay: -1s;
 }
 
-:host [part="root"] [part="content"] [part="message"] [part="content"] [part="busy"] [part="dot"]:nth-child(3) {
+:host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message"] [part="message-body"] [part="busy"] [part="dot"]:nth-child(3) {
   animation-delay: -.8s;
 }
 
-:host [part="reactions"] {
-  height: 0;
+:host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message-after"] {
+  flex-shrink: 0;
+  align-items: flex-start;
+  display: flex;
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: calc(100% + var(--chat-message-gap) / 2);
+}
+
+:host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message-after"][hidden] {
+  display: none;
+}
+
+:host [part="root"] [part="message-area"] [part="message-stack"] [part="footer"] {
+  contain: inline-size;
+  box-sizing: border-box;
+  justify-content: flex-start;
+  align-items: flex-end;
+  gap: var(--chat-message-gap);
+  flex-direction: column;
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  display: flex;
+  overflow: visible;
+}
+
+:host [part="root"] [part="message-area"] [part="message-stack"] [part="footer"] [part="actions"] {
+  gap: calc(var(--chat-message-gap) / 2);
+  box-sizing: border-box;
+  flex-flow: wrap;
+  order: 2;
+  justify-content: flex-end;
+  align-items: center;
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
   display: flex;
-  position: relative;
+}
+
+:host [part="root"] [part="message-area"] [part="message-stack"] [part="footer"] [part="actions"] ::slotted(*) {
+  min-width: 0;
+  max-width: 100%;
+}
+
+:host [part="root"] [part="message-area"] [part="message-stack"] [part="footer"] [part="reactions"] {
+  gap: calc(var(--chat-message-gap) / 2);
+  min-width: 0;
+  max-width: 100%;
+  margin-top: calc(var(--chat-message-gap) * -1.5);
+  flex-flow: wrap;
+  order: 1;
+  justify-content: flex-end;
+  align-items: center;
+  display: flex;
+}
+
+:host [part="root"] [part="message-area"] [part="message-stack"] [part="footer"] [part="actions"][hidden], :host [part="root"] [part="message-area"] [part="message-stack"] [part="footer"] [part="reactions"][hidden], :host [part="root"] [part="message-area"] [part="message-stack"] [part="footer"][hidden] {
+  display: none;
 }
 
 :host([reply]) {
@@ -162,17 +246,34 @@ export function chatMessageElementJoyStyle() {
 
 :host([reply]) [part="root"] {
   flex-direction: row;
+  justify-content: flex-start;
 }
 
-:host([reply]) [part="root"] [part="content"] {
+:host([reply]) [part="root"] [part="message-area"], :host([reply]) [part="root"] [part="message-area"] [part="message-stack"] {
   align-items: flex-start;
 }
 
-:host([reply]) [part="root"] [part="content"] [part="message"] {
+:host([reply]) [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] {
+  justify-content: flex-start;
+}
+
+:host([reply]) [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message"] {
   border-top-right-radius: var(--chat-message-border-radius);
   border-top-left-radius: 0;
 }
 
+:host([reply]) [part="root"] [part="message-area"] [part="message-stack"] [part="footer"] {
+  align-items: flex-start;
+}
+
+:host([reply]) [part="root"] [part="message-area"] [part="message-stack"] [part="footer"] [part="actions"], :host([reply]) [part="root"] [part="message-area"] [part="message-stack"] [part="footer"] [part="reactions"] {
+  justify-content: flex-start;
+}
+
+:host([has-footer]) {
+  margin-bottom: calc(var(--chat-message-white-space) / 4);
+}
+
 @keyframes wave {
   0%, 60%, 100% {
     transform: initial;

package/Controls/Components/Media/Chat/Themes/ChatMessageElement.Joy.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChatMessageElement.Joy.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Media/Chat/Themes/ChatMessageElement.Joy.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,0BAA0B;IACtC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuPT,CAAC;AACN,CAAC"}
+{"version":3,"file":"ChatMessageElement.Joy.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Media/Chat/Themes/ChatMessageElement.Joy.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,0BAA0B;IACtC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4VT,CAAC;AACN,CAAC"}

package/Controls/Components/Media/Chat/Themes/ChatMessageElement.Memphis.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatMessageElement.Memphis.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Media/Chat/Themes/ChatMessageElement.Memphis.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,8BAA8B,IAAI,SAAS,CA8K1D"}
+{"version":3,"file":"ChatMessageElement.Memphis.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Media/Chat/Themes/ChatMessageElement.Memphis.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,8BAA8B,IAAI,SAAS,CAmR1D"}

package/Controls/Components/Media/Chat/Themes/ChatMessageElement.Memphis.js

@@ -76,22 +76,47 @@ export function chatMessageElementMemphisStyle() {
 }
 
 :host [part="root"] {
-  justify-content: stretch;
-  align-items: stretch;
+  justify-content: flex-end;
+  align-items: flex-start;
   gap: var(--chat-message-gap);
   flex-direction: row-reverse;
   display: flex;
 }
 
-:host [part="root"] [part="content"] {
+:host [part="root"] [part="message-area"] {
   justify-content: center;
   align-items: flex-end;
   gap: calc(var(--chat-message-gap) / 2);
   flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  max-width: 100%;
   display: flex;
 }
 
-:host [part="root"] [part="content"] [part="message"] {
+:host [part="root"] [part="message-area"] [part="message-stack"] {
+  flex-direction: column;
+  align-items: flex-end;
+  width: max-content;
+  min-width: 0;
+  max-width: 100%;
+  display: flex;
+}
+
+:host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] {
+  justify-content: flex-end;
+  align-items: flex-start;
+  gap: calc(var(--chat-message-gap) / 2);
+  box-sizing: border-box;
+  flex-direction: row;
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  display: flex;
+  position: relative;
+}
+
+:host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message"] {
   border-width: var(--chat-message-border-width);
   border-radius: var(--chat-message-border-radius);
   border-style: var(--chat-message-border-style);
@@ -115,44 +140,103 @@ export function chatMessageElementMemphisStyle() {
   text-decoration: var(--chat-message-font-text-decoration);
   text-transform: var(--chat-message-font-text-transform);
   box-shadow: var(--chat-message-shadow-offset-x) var(--chat-message-shadow-offset-y) var(--chat-message-shadow-blur) var(--chat-message-shadow-spread) var(--chat-message-shadow-color);
+  box-sizing: border-box;
   border-top-right-radius: 0;
   flex-direction: column;
+  flex: auto;
+  min-width: 0;
+  max-width: 100%;
   display: flex;
 }
 
-:host [part="root"] [part="content"] [part="message"] [part="header"] {
+:host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message"] [part="header"] {
   gap: var(--chat-message-gap);
   justify-content: space-between;
   align-items: center;
   display: flex;
 }
 
-:host [part="root"] [part="content"] [part="message"] [part="content"] [part="text"] {
+:host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message"] [part="message-body"] [part="text"] {
   word-break: break-word;
 }
 
-:host [part="root"] [part="content"] [part="message"] [part="content"] [part="busy"] {
+:host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message"] [part="message-body"] [part="busy"] {
   gap: calc(var(--chat-message-gap) / 2);
   align-items: center;
   display: flex;
 }
 
-:host [part="root"] [part="content"] [part="message"] [part="content"] [part="busy"] [part="dot"] {
+:host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message"] [part="message-body"] [part="busy"] [part="dot"] {
   animation: 1.2s ease-out infinite wave;
 }
 
-:host [part="root"] [part="content"] [part="message"] [part="content"] [part="busy"] [part="dot"]:nth-child(2) {
+:host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message"] [part="message-body"] [part="busy"] [part="dot"]:nth-child(2) {
   animation-delay: -1s;
 }
 
-:host [part="root"] [part="content"] [part="message"] [part="content"] [part="busy"] [part="dot"]:nth-child(3) {
+:host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message"] [part="message-body"] [part="busy"] [part="dot"]:nth-child(3) {
   animation-delay: -.8s;
 }
 
-:host [part="reactions"] {
-  height: 0;
+:host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message-after"] {
+  flex-shrink: 0;
+  align-items: flex-start;
+  display: flex;
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: calc(100% + var(--chat-message-gap) / 2);
+}
+
+:host [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message-after"][hidden] {
+  display: none;
+}
+
+:host [part="root"] [part="message-area"] [part="message-stack"] [part="footer"] {
+  contain: inline-size;
+  box-sizing: border-box;
+  justify-content: flex-start;
+  align-items: flex-end;
+  gap: var(--chat-message-gap);
+  flex-direction: column;
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  display: flex;
+  overflow: visible;
+}
+
+:host [part="root"] [part="message-area"] [part="message-stack"] [part="footer"] [part="actions"] {
+  gap: calc(var(--chat-message-gap) / 2);
+  box-sizing: border-box;
+  flex-flow: wrap;
+  order: 2;
+  justify-content: flex-end;
+  align-items: center;
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
   display: flex;
-  position: relative;
+}
+
+:host [part="root"] [part="message-area"] [part="message-stack"] [part="footer"] [part="actions"] ::slotted(*) {
+  min-width: 0;
+  max-width: 100%;
+}
+
+:host [part="root"] [part="message-area"] [part="message-stack"] [part="footer"] [part="reactions"] {
+  gap: calc(var(--chat-message-gap) / 2);
+  min-width: 0;
+  max-width: 100%;
+  margin-top: calc(var(--chat-message-gap) * -1.5);
+  flex-flow: wrap;
+  order: 1;
+  justify-content: flex-end;
+  align-items: center;
+  display: flex;
+}
+
+:host [part="root"] [part="message-area"] [part="message-stack"] [part="footer"] [part="actions"][hidden], :host [part="root"] [part="message-area"] [part="message-stack"] [part="footer"] [part="reactions"][hidden], :host [part="root"] [part="message-area"] [part="message-stack"] [part="footer"][hidden] {
+  display: none;
 }
 
 :host([reply]) {
@@ -162,17 +246,34 @@ export function chatMessageElementMemphisStyle() {
 
 :host([reply]) [part="root"] {
   flex-direction: row;
+  justify-content: flex-start;
 }
 
-:host([reply]) [part="root"] [part="content"] {
+:host([reply]) [part="root"] [part="message-area"], :host([reply]) [part="root"] [part="message-area"] [part="message-stack"] {
   align-items: flex-start;
 }
 
-:host([reply]) [part="root"] [part="content"] [part="message"] {
+:host([reply]) [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] {
+  justify-content: flex-start;
+}
+
+:host([reply]) [part="root"] [part="message-area"] [part="message-stack"] [part="message-line"] [part="message"] {
   border-top-right-radius: var(--chat-message-border-radius);
   border-top-left-radius: 0;
 }
 
+:host([reply]) [part="root"] [part="message-area"] [part="message-stack"] [part="footer"] {
+  align-items: flex-start;
+}
+
+:host([reply]) [part="root"] [part="message-area"] [part="message-stack"] [part="footer"] [part="actions"], :host([reply]) [part="root"] [part="message-area"] [part="message-stack"] [part="footer"] [part="reactions"] {
+  justify-content: flex-start;
+}
+
+:host([has-footer]) {
+  margin-bottom: calc(var(--chat-message-white-space) / 4);
+}
+
 @keyframes wave {
   0%, 60%, 100% {
     transform: initial;

package/Controls/Components/Media/Chat/Themes/ChatMessageElement.Memphis.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChatMessageElement.Memphis.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Media/Chat/Themes/ChatMessageElement.Memphis.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,8BAA8B;IAC1C,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4KT,CAAC;AACN,CAAC"}
+{"version":3,"file":"ChatMessageElement.Memphis.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Media/Chat/Themes/ChatMessageElement.Memphis.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,8BAA8B;IAC1C,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAiRT,CAAC;AACN,CAAC"}

package/Controls/Components/Media/Chat/Themes/ChatMessageReactionElement.Cosmopolitan.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatMessageReactionElement.Cosmopolitan.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Media/Chat/Themes/ChatMessageReactionElement.Cosmopolitan.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,2CAA2C,IAAI,SAAS,CAmFvE"}
+{"version":3,"file":"ChatMessageReactionElement.Cosmopolitan.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Media/Chat/Themes/ChatMessageReactionElement.Cosmopolitan.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,2CAA2C,IAAI,SAAS,CA2FvE"}

package/Controls/Components/Media/Chat/Themes/ChatMessageReactionElement.Cosmopolitan.js

@@ -88,8 +88,16 @@ export function chatMessageReactionElementCosmopolitanStyle() {
   display: inline-flex;
 }
 
+:host [part="button"] {
+  --button-min-width: auto;
+}
+
 :host [part="emoji"], :host [part="count"] {
+  text-align: center;
   flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  display: inline-flex;
 }
 
     `;

package/Controls/Components/Media/Chat/Themes/ChatMessageReactionElement.Cosmopolitan.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChatMessageReactionElement.Cosmopolitan.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Media/Chat/Themes/ChatMessageReactionElement.Cosmopolitan.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,2CAA2C;IACvD,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAiFT,CAAC;AACN,CAAC"}
+{"version":3,"file":"ChatMessageReactionElement.Cosmopolitan.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Media/Chat/Themes/ChatMessageReactionElement.Cosmopolitan.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,2CAA2C;IACvD,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAyFT,CAAC;AACN,CAAC"}