@breadstone/mosaik-elements-svelte 0.0.129 → 0.0.130

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## 0.0.130 (2025-08-22)
+
+### 🚀 Features
+
+- add appearance property to ChatMarker components and update styles for new appearances ([23a86826b3](https://github.com/RueDeRennes/mosaik/commit/23a86826b3))
+- update event names for recorder events to camelCase format ([bfd76cfe4b](https://github.com/RueDeRennes/mosaik/commit/bfd76cfe4b))
+
 ## 0.0.129 (2025-08-22)
 
 ### 🚀 Features

package/index.mjs

@@ -116111,6 +116111,203 @@ function _Q() {
   flex-shrink: 0;
 }
 
+:host([appearance="outline"]) {
+  --chat-marker-background-color: var(--joy-scheme-background);
+  --chat-marker-foreground-color: var(--joy-scheme-foreground);
+  --chat-marker-border-color: var(--joy-scheme-highlight);
+  --chat-marker-border-width: var(--joy-layout-thickness);
+  --chat-marker-border-style: solid;
+}
+
+:host([appearance="outline"][variant="primary"]:not([disabled]:not([disabled="false"]))) {
+  --chat-marker-foreground-color: var(--joy-color-primary-500);
+  --chat-marker-border-color: var(--joy-color-primary-500);
+}
+
+:host([appearance="outline"][variant="secondary"]:not([disabled]:not([disabled="false"]))) {
+  --chat-marker-foreground-color: var(--joy-color-secondary-500);
+  --chat-marker-border-color: var(--joy-color-secondary-500);
+}
+
+:host([appearance="outline"][variant="tertiary"]:not([disabled]:not([disabled="false"]))) {
+  --chat-marker-foreground-color: var(--joy-color-tertiary-500);
+  --chat-marker-border-color: var(--joy-color-tertiary-500);
+}
+
+:host([appearance="outline"][variant="danger"]:not([disabled]:not([disabled="false"]))) {
+  --chat-marker-foreground-color: var(--joy-color-danger-500);
+  --chat-marker-border-color: var(--joy-color-danger-500);
+}
+
+:host([appearance="outline"][variant="warning"]:not([disabled]:not([disabled="false"]))) {
+  --chat-marker-foreground-color: var(--joy-color-warning-500);
+  --chat-marker-border-color: var(--joy-color-warning-500);
+}
+
+:host([appearance="outline"][variant="success"]:not([disabled]:not([disabled="false"]))) {
+  --chat-marker-foreground-color: var(--joy-color-success-500);
+  --chat-marker-border-color: var(--joy-color-success-500);
+}
+
+:host([appearance="outline"][variant="info"]:not([disabled]:not([disabled="false"]))) {
+  --chat-marker-foreground-color: var(--joy-color-info-500);
+  --chat-marker-border-color: var(--joy-color-info-500);
+}
+
+:host([appearance="outline"][variant="highlight"]:not([disabled]:not([disabled="false"]))) {
+  --chat-marker-foreground-color: var(--joy-color-highlight-500);
+  --chat-marker-border-color: var(--joy-color-highlight-500);
+}
+
+:host([appearance="outline"][variant="neutral"]:not([disabled]:not([disabled="false"]))) {
+  --chat-marker-foreground-color: var(--joy-color-neutral-500);
+  --chat-marker-border-color: var(--joy-color-neutral-500);
+}
+
+:host([appearance="soft"]) {
+  --chat-marker-background-color: var(--joy-scheme-highlight);
+  --chat-marker-foreground-color: var(--joy-scheme-foreground);
+  --chat-marker-border-width: 0;
+}
+
+:host([appearance="soft"][variant="primary"]:not([disabled]:not([disabled="false"]))) {
+  --chat-marker-background-color: var(--joy-color-primary-100);
+  --chat-marker-foreground-color: var(--joy-color-primary-500);
+}
+
+:host([appearance="soft"][variant="secondary"]:not([disabled]:not([disabled="false"]))) {
+  --chat-marker-background-color: var(--joy-color-secondary-100);
+  --chat-marker-foreground-color: var(--joy-color-secondary-500);
+}
+
+:host([appearance="soft"][variant="tertiary"]:not([disabled]:not([disabled="false"]))) {
+  --chat-marker-background-color: var(--joy-color-tertiary-100);
+  --chat-marker-foreground-color: var(--joy-color-tertiary-500);
+}
+
+:host([appearance="soft"][variant="danger"]:not([disabled]:not([disabled="false"]))) {
+  --chat-marker-background-color: var(--joy-color-danger-100);
+  --chat-marker-foreground-color: var(--joy-color-danger-500);
+}
+
+:host([appearance="soft"][variant="warning"]:not([disabled]:not([disabled="false"]))) {
+  --chat-marker-background-color: var(--joy-color-warning-100);
+  --chat-marker-foreground-color: var(--joy-color-warning-500);
+}
+
+:host([appearance="soft"][variant="success"]:not([disabled]:not([disabled="false"]))) {
+  --chat-marker-background-color: var(--joy-color-success-100);
+  --chat-marker-foreground-color: var(--joy-color-success-500);
+}
+
+:host([appearance="soft"][variant="info"]:not([disabled]:not([disabled="false"]))) {
+  --chat-marker-background-color: var(--joy-color-info-100);
+  --chat-marker-foreground-color: var(--joy-color-info-500);
+}
+
+:host([appearance="soft"][variant="highlight"]:not([disabled]:not([disabled="false"]))) {
+  --chat-marker-background-color: var(--joy-color-highlight-100);
+  --chat-marker-foreground-color: var(--joy-color-highlight-500);
+}
+
+:host([appearance="soft"][variant="neutral"]:not([disabled]:not([disabled="false"]))) {
+  --chat-marker-background-color: var(--joy-color-neutral-100);
+  --chat-marker-foreground-color: var(--joy-color-neutral-500);
+}
+
+:host([appearance="plain"]) {
+  --chat-marker-background-color: var(--joy-scheme-background);
+  --chat-marker-foreground-color: var(--joy-scheme-foreground);
+  --chat-marker-border-width: 0;
+}
+
+:host([appearance="plain"][variant="primary"]:not([disabled]:not([disabled="false"]))) {
+  --chat-marker-foreground-color: var(--joy-color-primary-500);
+}
+
+:host([appearance="plain"][variant="secondary"]:not([disabled]:not([disabled="false"]))) {
+  --chat-marker-foreground-color: var(--joy-color-secondary-500);
+}
+
+:host([appearance="plain"][variant="tertiary"]:not([disabled]:not([disabled="false"]))) {
+  --chat-marker-foreground-color: var(--joy-color-tertiary-500);
+}
+
+:host([appearance="plain"][variant="danger"]:not([disabled]:not([disabled="false"]))) {
+  --chat-marker-foreground-color: var(--joy-color-danger-500);
+}
+
+:host([appearance="plain"][variant="warning"]:not([disabled]:not([disabled="false"]))) {
+  --chat-marker-foreground-color: var(--joy-color-warning-500);
+}
+
+:host([appearance="plain"][variant="success"]:not([disabled]:not([disabled="false"]))) {
+  --chat-marker-foreground-color: var(--joy-color-success-500);
+}
+
+:host([appearance="plain"][variant="info"]:not([disabled]:not([disabled="false"]))) {
+  --chat-marker-foreground-color: var(--joy-color-info-500);
+}
+
+:host([appearance="plain"][variant="highlight"]:not([disabled]:not([disabled="false"]))) {
+  --chat-marker-foreground-color: var(--joy-color-highlight-500);
+}
+
+:host([appearance="plain"][variant="neutral"]:not([disabled]:not([disabled="false"]))) {
+  --chat-marker-foreground-color: var(--joy-color-neutral-500);
+}
+
+:host([appearance="solid"]) {
+  --chat-marker-background-color: var(--joy-scheme-highlight);
+  --chat-marker-foreground-color: var(--joy-scheme-foreground);
+  --chat-marker-border-width: 0;
+}
+
+:host([appearance="solid"][variant="primary"]:not([disabled]:not([disabled="false"]))) {
+  --chat-marker-background-color: var(--joy-color-primary-500);
+  --chat-marker-foreground-color: var(--joy-color-primary-0);
+}
+
+:host([appearance="solid"][variant="secondary"]:not([disabled]:not([disabled="false"]))) {
+  --chat-marker-background-color: var(--joy-color-secondary-500);
+  --chat-marker-foreground-color: var(--joy-color-secondary-0);
+}
+
+:host([appearance="solid"][variant="tertiary"]:not([disabled]:not([disabled="false"]))) {
+  --chat-marker-background-color: var(--joy-color-tertiary-500);
+  --chat-marker-foreground-color: var(--joy-color-tertiary-0);
+}
+
+:host([appearance="solid"][variant="danger"]:not([disabled]:not([disabled="false"]))) {
+  --chat-marker-background-color: var(--joy-color-danger-500);
+  --chat-marker-foreground-color: var(--joy-color-danger-0);
+}
+
+:host([appearance="solid"][variant="warning"]:not([disabled]:not([disabled="false"]))) {
+  --chat-marker-background-color: var(--joy-color-warning-500);
+  --chat-marker-foreground-color: var(--joy-color-warning-0);
+}
+
+:host([appearance="solid"][variant="success"]:not([disabled]:not([disabled="false"]))) {
+  --chat-marker-background-color: var(--joy-color-success-500);
+  --chat-marker-foreground-color: var(--joy-color-success-0);
+}
+
+:host([appearance="solid"][variant="info"]:not([disabled]:not([disabled="false"]))) {
+  --chat-marker-background-color: var(--joy-color-info-500);
+  --chat-marker-foreground-color: var(--joy-color-info-0);
+}
+
+:host([appearance="solid"][variant="highlight"]:not([disabled]:not([disabled="false"]))) {
+  --chat-marker-background-color: var(--joy-color-highlight-500);
+  --chat-marker-foreground-color: var(--joy-color-highlight-0);
+}
+
+:host([appearance="solid"][variant="neutral"]:not([disabled]:not([disabled="false"]))) {
+  --chat-marker-background-color: var(--joy-color-neutral-500);
+  --chat-marker-foreground-color: var(--joy-color-neutral-0);
+}
+
 :host([variant="primary"]:not([disabled]:not([disabled="false"]))) {
   --chat-marker-foreground-color: var(--joy-color-primary-500);
   --chat-marker-border-color: var(--joy-color-primary-500);
@@ -116350,7 +116547,7 @@ var Ok = function(o, t, e, r) {
 }, _g = function(o, t) {
   if (typeof Reflect == "object" && typeof Reflect.metadata == "function") return Reflect.metadata(o, t);
 };
-let _m = class extends P(J(qt(os(kk(le(H)))))) {
+let _m = class extends P(J(qt(os(kk(le(pt(H))))))) {
   // #region Fields
   _text;
   _icon;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@breadstone/mosaik-elements-svelte",
-    "version": "0.0.129",
+    "version": "0.0.130",
     "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.129",
-        "@breadstone/mosaik-elements-foundation": "^0.0.129",
+        "@breadstone/mosaik-elements": "^0.0.130",
+        "@breadstone/mosaik-elements-foundation": "^0.0.130",
         "tslib": "^2.8.1"
     },
     "exports": {