@breadstone/mosaik-elements-svelte 0.1.3 → 0.1.4

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+## 0.1.4 (2026-05-29)
+
+This was a version bump only for mosaik-elements-svelte to align it with other projects, there were no code changes.
+
 ## 0.1.3 (2026-05-29)
 
 This was a version bump only for mosaik-elements-svelte to align it with other projects, there were no code changes.

package/index.mjs

@@ -154388,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>
         </div>
-        <div part="reactions">
-            <slot name="reaction"></slot>
-        </div>
+
     `;
 }
 //#endregion
@@ -154507,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"] {
@@ -154538,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]) {
@@ -154562,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;
@@ -154684,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"] {
@@ -154715,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]) {
@@ -154739,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;
@@ -154936,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"] {
@@ -154967,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]) {
@@ -154991,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;
@@ -155226,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;
@@ -155364,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;
@@ -155511,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;
@@ -156327,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>
     `;
 }
@@ -156417,6 +156512,10 @@ function mhe() {
   display: inline-flex;
 }
 
+:host [part="button"] {
+  --button-min-width: auto;
+}
+
 :host [part="emoji"], :host [part="count"] {
   flex-shrink: 0;
 }
@@ -156437,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;
@@ -156503,6 +156602,10 @@ function hhe() {
   display: inline-flex;
 }
 
+:host [part="button"] {
+  --button-min-width: auto;
+}
+
 :host [part="emoji"], :host [part="count"] {
   flex-shrink: 0;
 }
@@ -156589,6 +156692,10 @@ function ghe() {
   display: inline-flex;
 }
 
+:host [part="button"] {
+  --button-min-width: auto;
+}
+
 :host [part="emoji"], :host [part="count"] {
   flex-shrink: 0;
 }
@@ -156946,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;

package/package.json

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