@breadstone/mosaik-elements-svelte 0.0.130 → 0.0.131

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## 0.0.131 (2025-08-23)
+
+### 🚀 Features
+
+- reorder appearance input in ChatMarker components and ensure consistent usage across implementations ([eb5b88f6aa](https://github.com/RueDeRennes/mosaik/commit/eb5b88f6aa))
+
 ## 0.0.130 (2025-08-22)
 
 ### 🚀 Features

package/index.mjs

@@ -111903,7 +111903,7 @@ function MJ(o) {
   };
   return x`
         ${$(o.state === "idle", () => x`
-        <mosaik-button .icon="${"M18.25 11a.75.75 0 0 1 .743.648l.007.102v.5a6.75 6.75 0 0 1-6.249 6.732l-.001 2.268a.75.75 0 0 1-1.493.102l-.007-.102v-2.268a6.75 6.75 0 0 1-6.246-6.496L5 12.25v-.5a.75.75 0 0 1 1.493-.102l.007.102v.5a5.25 5.25 0 0 0 5.034 5.246l.216.004h.5a5.25 5.25 0 0 0 5.246-5.034l.004-.216v-.5a.75.75 0 0 1 .75-.75ZM12 2a4 4 0 0 1 4 4v6a4 4 0 0 1-8 0V6a4 4 0 0 1 4-4Z"}"
+        <mosaik-button part="start" .icon="${"M18.25 11a.75.75 0 0 1 .743.648l.007.102v.5a6.75 6.75 0 0 1-6.249 6.732l-.001 2.268a.75.75 0 0 1-1.493.102l-.007-.102v-2.268a6.75 6.75 0 0 1-6.246-6.496L5 12.25v-.5a.75.75 0 0 1 1.493-.102l.007.102v.5a5.25 5.25 0 0 0 5.034 5.246l.216.004h.5a5.25 5.25 0 0 0 5.246-5.034l.004-.216v-.5a.75.75 0 0 1 .75-.75ZM12 2a4 4 0 0 1 4 4v6a4 4 0 0 1-8 0V6a4 4 0 0 1 4-4Z"}"
                        .type="${"button"}"
                        .dir="${o.dir}"
                        .appearance="${"plain"}"
@@ -111911,22 +111911,26 @@ function MJ(o) {
                        @click=${() => o.recStart.emit()}></mosaik-button>
         `)}
         ${$(o.state !== "idle", () => x`
-        <div class="row">
-            <span class="timer" aria-live="polite">${t()}</span>
-            <div class="spacer"></div>
-            <mosaik-button .icon="${"M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2Zm3.53 6.47-.084-.073a.75.75 0 0 0-.882-.007l-.094.08L12 10.939l-2.47-2.47-.084-.072a.75.75 0 0 0-.882-.007l-.094.08-.073.084a.75.75 0 0 0-.007.882l.08.094L10.939 12l-2.47 2.47-.072.084a.75.75 0 0 0-.007.882l.08.094.084.073a.75.75 0 0 0 .882.007l.094-.08L12 13.061l2.47 2.47.084.072a.75.75 0 0 0 .882.007l.094-.08.073-.084a.75.75 0 0 0 .007-.882l-.08-.094L13.061 12l2.47-2.47.072-.084a.75.75 0 0 0 .007-.882l-.08-.094-.084-.073.084.073Z"}"
+        <div part="row">
+
+            <mosaik-button part="cancel"
+                           .icon="${"M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2Zm3.53 6.47-.084-.073a.75.75 0 0 0-.882-.007l-.094.08L12 10.939l-2.47-2.47-.084-.072a.75.75 0 0 0-.882-.007l-.094.08-.073.084a.75.75 0 0 0-.007.882l.08.094L10.939 12l-2.47 2.47-.072.084a.75.75 0 0 0-.007.882l.08.094.084.073a.75.75 0 0 0 .882.007l.094-.08L12 13.061l2.47 2.47.084.072a.75.75 0 0 0 .882.007l.094-.08.073-.084a.75.75 0 0 0 .007-.882l-.08-.094L13.061 12l2.47-2.47.072-.084a.75.75 0 0 0 .007-.882l-.08-.094-.084-.073.084.073Z"}"
                            .type="${"button"}"
                            .dir="${o.dir}"
                            .appearance="${"plain"}"
                            ?disabled=${o.disabled}
                            @click=${() => o.recCancel.emit()}></mosaik-button>
-            <mosaik-button .icon="${"M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2Zm3.22 6.97-4.47 4.47-1.97-1.97a.75.75 0 0 0-1.06 1.06l2.5 2.5a.75.75 0 0 0 1.06 0l5-5a.75.75 0 1 0-1.06-1.06Z"}"
+            <mosaik-button part="stop"
+                           .icon="${"M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2Zm3.22 6.97-4.47 4.47-1.97-1.97a.75.75 0 0 0-1.06 1.06l2.5 2.5a.75.75 0 0 0 1.06 0l5-5a.75.75 0 1 0-1.06-1.06Z"}"
                            .type="${"button"}"
                            .dir="${o.dir}"
                            .appearance="${"plain"}"
                            ?disabled=${o.disabled}
-                           @click=${() => o.recStop.emit()}>
-            </mosaik-button>
+                           @click=${() => o.recStop.emit()}></mosaik-button>
+            <mosaik-text part="timer"
+                         aria-live="polite"
+                         .dir="${o.dir}"
+                         .text="${t()}"></mosaik-text>
         </div>
         `)}
     `;
@@ -111952,14 +111956,14 @@ const qC = {
 function Rv() {
   return m`
 :host {
-  --chat-voice-recorder-tool-font-family: unset;
-  --chat-voice-recorder-tool-font-letter-spacing: unset;
-  --chat-voice-recorder-tool-font-line-height: unset;
-  --chat-voice-recorder-tool-font-size: unset;
-  --chat-voice-recorder-tool-font-text-decoration: unset;
-  --chat-voice-recorder-tool-font-text-transform: unset;
-  --chat-voice-recorder-tool-font-weight: unset;
-  --chat-voice-recorder-tool-gap: unset;
+  --chat-voice-recorder-tool-font-family: var(--joy-font-family);
+  --chat-voice-recorder-tool-font-letter-spacing: var(--joy-typography-body1-letter-spacing);
+  --chat-voice-recorder-tool-font-line-height: var(--joy-typography-body1-line-height);
+  --chat-voice-recorder-tool-font-size: var(--joy-typography-body1-font-size);
+  --chat-voice-recorder-tool-font-text-decoration: var(--joy-typography-body1-text-decoration);
+  --chat-voice-recorder-tool-font-text-transform: var(--joy-typography-body1-text-transform);
+  --chat-voice-recorder-tool-font-weight: var(--joy-typography-body1-font-weight);
+  --chat-voice-recorder-tool-gap: var(--joy-layout-space);
   --chat-voice-recorder-tool-padding-bottom: unset;
   --chat-voice-recorder-tool-padding-left: unset;
   --chat-voice-recorder-tool-padding-right: unset;
@@ -111997,193 +112001,31 @@ function Rv() {
 }
 
 :host {
-  --vr-accent: #5b8cff;
-  --vr-danger: #ff4d6d;
-  color: #eaeef7;
-  display: block;
-}
-
-:host .vr {
-  background: linear-gradient(#ffffff08, #ffffff03);
-  border: 1px solid #ffffff14;
-  border-radius: 16px;
-  gap: 1rem;
-  padding: 1rem;
-  display: grid;
-  box-shadow: 0 10px 30px #00000040;
-}
-
-:host .vr__mic {
-  background: radial-gradient(60% 60%, #5b8cff40, #5b8cff0d);
-  border: 1px solid #5b8cff40;
-  border-radius: 50%;
-  place-items: center;
-  margin-inline: auto;
-  transition: transform .12s, opacity .12s;
-  display: grid;
-  position: relative;
-}
-
-:host .vr__mic.is-recording {
-  transform: scale(1.02);
-}
-
-:host .vr__mic.is-paused {
-  opacity: .9;
-}
-
-:host .vr__ring {
-  pointer-events: none;
-  background: var(--ring, conic-gradient(var(--vr-accent) 0deg, #ffffff1a 0));
-  border-radius: 50%;
-  position: absolute;
-  inset: -10px;
-  -webkit-mask: radial-gradient(circle, #0000 57%, #000 58%);
-  mask: radial-gradient(circle, #0000 57%, #000 58%);
-}
-
-:host .vr__btn {
-  all: unset;
-  cursor: pointer;
-  background: #151a2e;
-  border: 1px solid #ffffff14;
-  border-radius: 50%;
-  place-items: center;
-  width: 64px;
-  height: 64px;
-  transition: transform .12s, background .12s, box-shadow .12s;
-  display: grid;
-  box-shadow: 0 4px 12px #00000040;
-}
-
-:host .vr__btn:hover {
-  background: #1a2040;
-  transform: translateY(-1px);
-}
-
-:host .vr__btn:active {
-  transform: translateY(0);
-}
-
-:host .vr__controls {
-  gap: .75rem;
-  display: flex;
-}
-
-:host .vr__btn--stop {
-  background: #ff4d6d1f;
-  border-color: #ff4d6d59;
-}
-
-:host .vr__btn--pause {
-  background: #ffffff0f;
-}
-
-:host .vr__btn--resume {
-  background: #5b8cff2e;
-  border-color: #5b8cff80;
-}
-
-:host .vr__dot {
-  background: var(--vr-accent);
-  border-radius: 50%;
-  width: 14px;
-  height: 14px;
-  box-shadow: 0 0 18px #5b8cffe6;
-}
-
-:host .vr__stop {
-  background: var(--vr-danger);
-  border-radius: 4px;
-  width: 14px;
-  height: 14px;
-  box-shadow: 0 0 18px #ff4d6db3;
-}
-
-:host .vr__pause {
-  width: 16px;
-  height: 16px;
-  position: relative;
+  font-family: var(--chat-voice-recorder-tool-font-family);
+  font-size: var(--chat-voice-recorder-tool-font-size);
+  line-height: var(--chat-voice-recorder-tool-font-line-height);
+  font-weight: var(--chat-voice-recorder-tool-font-weight);
+  letter-spacing: var(--chat-voice-recorder-tool-font-letter-spacing);
+  -webkit-text-decoration: var(--chat-voice-recorder-tool-font-text-decoration);
+  text-decoration: var(--chat-voice-recorder-tool-font-text-decoration);
+  text-transform: var(--chat-voice-recorder-tool-font-text-transform);
+  gap: var(--chat-voice-recorder-tool-gap);
 }
 
-:host .vr__pause:before, :host .vr__pause:after {
-  content: "";
-  background: #eaeef7;
-  border-radius: 2px;
-  width: 4px;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-}
-
-:host .vr__pause:before {
-  left: 2px;
-}
-
-:host .vr__pause:after {
-  right: 2px;
-}
-
-:host .vr__resume {
-  border-top: 8px solid #0000;
-  border-bottom: 8px solid #0000;
-  border-left: 14px solid #eaeef7;
-  width: 0;
-  height: 0;
-}
-
-:host .vr__timer {
-  font-variant-numeric: tabular-nums;
-  color: #cfd8ff;
-  text-shadow: 0 1px #0000004d;
-  font-weight: 600;
-  position: absolute;
-  bottom: -28px;
-}
-
-:host .vr__actions {
-  align-items: center;
-  gap: .75rem;
+:host [part="row"] {
+  gap: inherit;
+  flex-direction: row;
   display: flex;
 }
 
-:host .vr__player {
-  width: min(480px, 100%);
-}
-
-:host .vr__spacer {
-  flex: auto;
-}
-
-:host .vr__action {
-  all: unset;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-  border-radius: 8px;
-  padding: .5rem .9rem;
-  font-weight: 600;
-  transition: background .12s, transform .12s;
-}
-
-:host .vr__action--ghost {
-  background: #ffffff0f;
-  border: 1px solid #ffffff1f;
-}
-
-:host .vr__action--ghost:hover {
-  background: #ffffff1f;
-}
-
-:host .vr__action--primary {
-  color: #0c1022;
-  background: linear-gradient(#6ea3ff, #5b8cff);
-  box-shadow: 0 8px 18px #5b8cff59;
-}
-
-:host .vr__action--primary:hover {
-  transform: translateY(-1px);
+:host [part="row"] [part="timer"] {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  font-weight: inherit;
+  letter-spacing: inherit;
+  text-decoration: inherit;
+  text-transform: inherit;
 }
 
     `;
@@ -113604,12 +113446,12 @@ function rQ() {
 }
 
 :host [part="attachments"] {
+  gap: var(--chat-input-gap);
   margin-top: var(--chat-input-padding-top);
   margin-bottom: var(--chat-input-padding-bottom);
   margin-left: var(--chat-input-padding-left);
   margin-right: var(--chat-input-padding-right);
   flex-wrap: nowrap;
-  gap: .5rem;
   display: flex;
   overflow-x: auto;
 }
@@ -113619,6 +113461,7 @@ function rQ() {
   margin-bottom: var(--chat-input-padding-bottom);
   margin-left: var(--chat-input-padding-left);
   margin-right: var(--chat-input-padding-right);
+  gap: var(--chat-input-gap);
   flex-direction: row;
   display: flex;
 }
@@ -113875,12 +113718,12 @@ function nQ() {
 }
 
 :host [part="attachments"] {
+  gap: var(--chat-input-gap);
   margin-top: var(--chat-input-padding-top);
   margin-bottom: var(--chat-input-padding-bottom);
   margin-left: var(--chat-input-padding-left);
   margin-right: var(--chat-input-padding-right);
   flex-wrap: nowrap;
-  gap: .5rem;
   display: flex;
   overflow-x: auto;
 }
@@ -113890,6 +113733,7 @@ function nQ() {
   margin-bottom: var(--chat-input-padding-bottom);
   margin-left: var(--chat-input-padding-left);
   margin-right: var(--chat-input-padding-right);
+  gap: var(--chat-input-gap);
   flex-direction: row;
   display: flex;
 }
@@ -113985,12 +113829,12 @@ function aQ() {
 }
 
 :host [part="attachments"] {
+  gap: var(--chat-input-gap);
   margin-top: var(--chat-input-padding-top);
   margin-bottom: var(--chat-input-padding-bottom);
   margin-left: var(--chat-input-padding-left);
   margin-right: var(--chat-input-padding-right);
   flex-wrap: nowrap;
-  gap: .5rem;
   display: flex;
   overflow-x: auto;
 }
@@ -114000,6 +113844,7 @@ function aQ() {
   margin-bottom: var(--chat-input-padding-bottom);
   margin-left: var(--chat-input-padding-left);
   margin-right: var(--chat-input-padding-right);
+  gap: var(--chat-input-gap);
   flex-direction: row;
   display: flex;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@breadstone/mosaik-elements-svelte",
-    "version": "0.0.130",
+    "version": "0.0.131",
     "description": "Mosaik elements for Svelte.",
     "license": "MIT",
     "author": "andre.wehlert <awehlert@breadstone.de> (https://www.breadstone.de)",
@@ -15,8 +15,8 @@
         "vite": "*"
     },
     "dependencies": {
-        "@breadstone/mosaik-elements": "^0.0.130",
-        "@breadstone/mosaik-elements-foundation": "^0.0.130",
+        "@breadstone/mosaik-elements": "^0.0.131",
+        "@breadstone/mosaik-elements-foundation": "^0.0.131",
         "tslib": "^2.8.1"
     },
     "exports": {