@breadstone/mosaik-elements-svelte 0.1.67 → 0.1.69

package/CHANGELOG.md

@@ -1,3 +1,14 @@
+## 0.1.69 (2026-08-03)
+
+This was a version bump only for mosaik-elements-svelte to align it with other projects, there were no code changes.
+
+## 0.1.68 (2026-08-02)
+
+### 🩹 Fixes
+
+- **prompt-box:** source focus ring offsets from theme tokens ([36fe537153](https://github.com/RueDeRennes/mosaik/commit/36fe537153))
+- **chat:** stabilize rail layout and nested interactions ([637075d3ec](https://github.com/RueDeRennes/mosaik/commit/637075d3ec))
+
 ## 0.1.67 (2026-07-31)
 
 ### 🚀 Features

package/index.mjs

@@ -101247,6 +101247,10 @@ function RU() {
   --prompt-box-border-width: unset;
   --prompt-box-floating-label-font-size: 12px;
   --prompt-box-floating-label-line-height: 12px;
+  --prompt-box-focus-ring-active-width: 8px;
+  --prompt-box-focus-ring-color: unset;
+  --prompt-box-focus-ring-inward-offset: 2px;
+  --prompt-box-focus-ring-outward-offset: 2px;
   --prompt-box-font-family: unset;
   --prompt-box-font-letter-spacing: unset;
   --prompt-box-font-line-height: unset;
@@ -101413,6 +101417,13 @@ function RU() {
   display: flex;
 }
 
+:host [part="focusRing"] {
+  --focus-ring-color: var(--prompt-box-focus-ring-color);
+  --focus-ring-active-width: var(--prompt-box-focus-ring-active-width);
+  --focus-ring-inward-offset: var(--prompt-box-focus-ring-inward-offset);
+  --focus-ring-outward-offset: var(--prompt-box-focus-ring-outward-offset);
+}
+
 :host([has-label]) [part="inner"] {
   padding-bottom: unset;
 }
@@ -101444,6 +101455,10 @@ function zU() {
   --prompt-box-border-width: var(--joy-layout-thickness);
   --prompt-box-floating-label-font-size: 12px;
   --prompt-box-floating-label-line-height: 12px;
+  --prompt-box-focus-ring-active-width: 8px;
+  --prompt-box-focus-ring-color: unset;
+  --prompt-box-focus-ring-inward-offset: 2px;
+  --prompt-box-focus-ring-outward-offset: 0px;
   --prompt-box-font-family: unset;
   --prompt-box-font-letter-spacing: unset;
   --prompt-box-font-line-height: unset;
@@ -101610,6 +101625,13 @@ function zU() {
   display: flex;
 }
 
+:host [part="focusRing"] {
+  --focus-ring-color: var(--prompt-box-focus-ring-color);
+  --focus-ring-active-width: var(--prompt-box-focus-ring-active-width);
+  --focus-ring-inward-offset: var(--prompt-box-focus-ring-inward-offset);
+  --focus-ring-outward-offset: var(--prompt-box-focus-ring-outward-offset);
+}
+
 :host([has-label]) [part="inner"] {
   padding-bottom: unset;
 }
@@ -101642,10 +101664,6 @@ function zU() {
   --prompt-box-background-color: var(--joy-scheme-transparent);
 }
 
-:host([appearance="plain"]) [part="focusRing"] {
-  --focus-ring-outward-offset: 0;
-}
-
 :host([appearance="soft"]), :host([appearance="solid"]) {
   --prompt-box-background-color: var(--joy-scheme-highlight);
 }
@@ -101700,6 +101718,10 @@ function BU() {
   --prompt-box-border-width: var(--memphis-layout-thickness);
   --prompt-box-floating-label-font-size: 12px;
   --prompt-box-floating-label-line-height: 12px;
+  --prompt-box-focus-ring-active-width: 8px;
+  --prompt-box-focus-ring-color: unset;
+  --prompt-box-focus-ring-inward-offset: 2px;
+  --prompt-box-focus-ring-outward-offset: 2px;
   --prompt-box-font-family: unset;
   --prompt-box-font-letter-spacing: unset;
   --prompt-box-font-line-height: unset;
@@ -101866,6 +101888,13 @@ function BU() {
   display: flex;
 }
 
+:host [part="focusRing"] {
+  --focus-ring-color: var(--prompt-box-focus-ring-color);
+  --focus-ring-active-width: var(--prompt-box-focus-ring-active-width);
+  --focus-ring-inward-offset: var(--prompt-box-focus-ring-inward-offset);
+  --focus-ring-outward-offset: var(--prompt-box-focus-ring-outward-offset);
+}
+
 :host([has-label]) [part="inner"] {
   padding-bottom: unset;
 }
@@ -144639,6 +144668,203 @@ function Kfe() {
   }
 }
 
+:host([appearance="outline"]) {
+  --chat-message-background-color: var(--cosmopolitan-scheme-background);
+  --chat-message-foreground-color: var(--cosmopolitan-scheme-foreground);
+  --chat-message-border-color: var(--cosmopolitan-scheme-highlight);
+  --chat-message-border-width: var(--cosmopolitan-layout-thickness);
+  --chat-message-border-style: solid;
+}
+
+:host([appearance="outline"][variant="primary"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-foreground-color: var(--cosmopolitan-color-primary-500);
+  --chat-message-border-color: var(--cosmopolitan-color-primary-500);
+}
+
+:host([appearance="outline"][variant="secondary"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-foreground-color: var(--cosmopolitan-color-secondary-500);
+  --chat-message-border-color: var(--cosmopolitan-color-secondary-500);
+}
+
+:host([appearance="outline"][variant="tertiary"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-foreground-color: var(--cosmopolitan-color-tertiary-500);
+  --chat-message-border-color: var(--cosmopolitan-color-tertiary-500);
+}
+
+:host([appearance="outline"][variant="danger"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-foreground-color: var(--cosmopolitan-color-danger-500);
+  --chat-message-border-color: var(--cosmopolitan-color-danger-500);
+}
+
+:host([appearance="outline"][variant="warning"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-foreground-color: var(--cosmopolitan-color-warning-500);
+  --chat-message-border-color: var(--cosmopolitan-color-warning-500);
+}
+
+:host([appearance="outline"][variant="success"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-foreground-color: var(--cosmopolitan-color-success-500);
+  --chat-message-border-color: var(--cosmopolitan-color-success-500);
+}
+
+:host([appearance="outline"][variant="info"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-foreground-color: var(--cosmopolitan-color-info-500);
+  --chat-message-border-color: var(--cosmopolitan-color-info-500);
+}
+
+:host([appearance="outline"][variant="highlight"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-foreground-color: var(--cosmopolitan-color-highlight-500);
+  --chat-message-border-color: var(--cosmopolitan-color-highlight-500);
+}
+
+:host([appearance="outline"][variant="neutral"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-foreground-color: var(--cosmopolitan-color-neutral-500);
+  --chat-message-border-color: var(--cosmopolitan-color-neutral-500);
+}
+
+:host([appearance="soft"]) {
+  --chat-message-background-color: var(--cosmopolitan-scheme-highlight);
+  --chat-message-foreground-color: var(--cosmopolitan-scheme-foreground);
+  --chat-message-border-width: 0;
+}
+
+:host([appearance="soft"][variant="primary"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-background-color: var(--cosmopolitan-color-primary-100);
+  --chat-message-foreground-color: var(--cosmopolitan-color-primary-500);
+}
+
+:host([appearance="soft"][variant="secondary"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-background-color: var(--cosmopolitan-color-secondary-100);
+  --chat-message-foreground-color: var(--cosmopolitan-color-secondary-500);
+}
+
+:host([appearance="soft"][variant="tertiary"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-background-color: var(--cosmopolitan-color-tertiary-100);
+  --chat-message-foreground-color: var(--cosmopolitan-color-tertiary-500);
+}
+
+:host([appearance="soft"][variant="danger"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-background-color: var(--cosmopolitan-color-danger-100);
+  --chat-message-foreground-color: var(--cosmopolitan-color-danger-500);
+}
+
+:host([appearance="soft"][variant="warning"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-background-color: var(--cosmopolitan-color-warning-100);
+  --chat-message-foreground-color: var(--cosmopolitan-color-warning-500);
+}
+
+:host([appearance="soft"][variant="success"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-background-color: var(--cosmopolitan-color-success-100);
+  --chat-message-foreground-color: var(--cosmopolitan-color-success-500);
+}
+
+:host([appearance="soft"][variant="info"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-background-color: var(--cosmopolitan-color-info-100);
+  --chat-message-foreground-color: var(--cosmopolitan-color-info-500);
+}
+
+:host([appearance="soft"][variant="highlight"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-background-color: var(--cosmopolitan-color-highlight-100);
+  --chat-message-foreground-color: var(--cosmopolitan-color-highlight-500);
+}
+
+:host([appearance="soft"][variant="neutral"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-background-color: var(--cosmopolitan-color-neutral-100);
+  --chat-message-foreground-color: var(--cosmopolitan-color-neutral-500);
+}
+
+:host([appearance="plain"]) {
+  --chat-message-background-color: var(--cosmopolitan-scheme-background);
+  --chat-message-foreground-color: var(--cosmopolitan-scheme-foreground);
+  --chat-message-border-width: 0;
+}
+
+:host([appearance="plain"][variant="primary"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-foreground-color: var(--cosmopolitan-color-primary-500);
+}
+
+:host([appearance="plain"][variant="secondary"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-foreground-color: var(--cosmopolitan-color-secondary-500);
+}
+
+:host([appearance="plain"][variant="tertiary"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-foreground-color: var(--cosmopolitan-color-tertiary-500);
+}
+
+:host([appearance="plain"][variant="danger"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-foreground-color: var(--cosmopolitan-color-danger-500);
+}
+
+:host([appearance="plain"][variant="warning"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-foreground-color: var(--cosmopolitan-color-warning-500);
+}
+
+:host([appearance="plain"][variant="success"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-foreground-color: var(--cosmopolitan-color-success-500);
+}
+
+:host([appearance="plain"][variant="info"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-foreground-color: var(--cosmopolitan-color-info-500);
+}
+
+:host([appearance="plain"][variant="highlight"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-foreground-color: var(--cosmopolitan-color-highlight-500);
+}
+
+:host([appearance="plain"][variant="neutral"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-foreground-color: var(--cosmopolitan-color-neutral-500);
+}
+
+:host([appearance="solid"]) {
+  --chat-message-background-color: var(--cosmopolitan-scheme-highlight);
+  --chat-message-foreground-color: var(--cosmopolitan-scheme-foreground);
+  --chat-message-border-width: 0;
+}
+
+:host([appearance="solid"][variant="primary"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-background-color: var(--cosmopolitan-color-primary-500);
+  --chat-message-foreground-color: var(--cosmopolitan-color-primary-0);
+}
+
+:host([appearance="solid"][variant="secondary"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-background-color: var(--cosmopolitan-color-secondary-500);
+  --chat-message-foreground-color: var(--cosmopolitan-color-secondary-0);
+}
+
+:host([appearance="solid"][variant="tertiary"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-background-color: var(--cosmopolitan-color-tertiary-500);
+  --chat-message-foreground-color: var(--cosmopolitan-color-tertiary-0);
+}
+
+:host([appearance="solid"][variant="danger"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-background-color: var(--cosmopolitan-color-danger-500);
+  --chat-message-foreground-color: var(--cosmopolitan-color-danger-0);
+}
+
+:host([appearance="solid"][variant="warning"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-background-color: var(--cosmopolitan-color-warning-500);
+  --chat-message-foreground-color: var(--cosmopolitan-color-warning-0);
+}
+
+:host([appearance="solid"][variant="success"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-background-color: var(--cosmopolitan-color-success-500);
+  --chat-message-foreground-color: var(--cosmopolitan-color-success-0);
+}
+
+:host([appearance="solid"][variant="info"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-background-color: var(--cosmopolitan-color-info-500);
+  --chat-message-foreground-color: var(--cosmopolitan-color-info-0);
+}
+
+:host([appearance="solid"][variant="highlight"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-background-color: var(--cosmopolitan-color-highlight-500);
+  --chat-message-foreground-color: var(--cosmopolitan-color-highlight-0);
+}
+
+:host([appearance="solid"][variant="neutral"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-background-color: var(--cosmopolitan-color-neutral-500);
+  --chat-message-foreground-color: var(--cosmopolitan-color-neutral-0);
+}
+
     `;
 }
 //#endregion
@@ -144940,6 +145166,231 @@ function qfe() {
   letter-spacing: var(--joy-typography-caption-letter-spacing);
 }
 
+:host([appearance="outline"]) {
+  --chat-message-background-color: var(--joy-scheme-background);
+  --chat-message-foreground-color: var(--joy-scheme-foreground);
+  --chat-message-border-color: var(--joy-scheme-highlight);
+  --chat-message-border-width: var(--joy-layout-thickness);
+  --chat-message-border-style: none;
+}
+
+:host([appearance="outline"][variant="primary"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-foreground-color: var(--joy-color-primary-500);
+  --chat-message-border-color: var(--joy-color-primary-500);
+}
+
+:host([appearance="outline"][variant="secondary"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-foreground-color: var(--joy-color-secondary-500);
+  --chat-message-border-color: var(--joy-color-secondary-500);
+}
+
+:host([appearance="outline"][variant="tertiary"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-foreground-color: var(--joy-color-tertiary-500);
+  --chat-message-border-color: var(--joy-color-tertiary-500);
+}
+
+:host([appearance="outline"][variant="danger"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-foreground-color: var(--joy-color-danger-500);
+  --chat-message-border-color: var(--joy-color-danger-500);
+}
+
+:host([appearance="outline"][variant="warning"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-foreground-color: var(--joy-color-warning-500);
+  --chat-message-border-color: var(--joy-color-warning-500);
+}
+
+:host([appearance="outline"][variant="success"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-foreground-color: var(--joy-color-success-500);
+  --chat-message-border-color: var(--joy-color-success-500);
+}
+
+:host([appearance="outline"][variant="info"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-foreground-color: var(--joy-color-info-500);
+  --chat-message-border-color: var(--joy-color-info-500);
+}
+
+:host([appearance="outline"][variant="highlight"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-foreground-color: var(--joy-color-highlight-500);
+  --chat-message-border-color: var(--joy-color-highlight-500);
+}
+
+:host([appearance="outline"][variant="neutral"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-foreground-color: var(--joy-color-neutral-500);
+  --chat-message-border-color: var(--joy-color-neutral-500);
+}
+
+:host([appearance="soft"]) {
+  --chat-message-background-color: var(--joy-scheme-highlight);
+  --chat-message-foreground-color: var(--joy-scheme-foreground);
+  --chat-message-border-color: var(--joy-scheme-highlight);
+  --chat-message-border-width: 0;
+}
+
+:host([appearance="soft"][variant="primary"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-background-color: var(--joy-color-primary-100);
+  --chat-message-foreground-color: var(--joy-color-primary-500);
+  --chat-message-border-color: var(--joy-color-primary-500);
+}
+
+:host([appearance="soft"][variant="secondary"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-background-color: var(--joy-color-secondary-100);
+  --chat-message-foreground-color: var(--joy-color-secondary-500);
+  --chat-message-border-color: var(--joy-color-secondary-500);
+}
+
+:host([appearance="soft"][variant="tertiary"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-background-color: var(--joy-color-tertiary-100);
+  --chat-message-foreground-color: var(--joy-color-tertiary-500);
+  --chat-message-border-color: var(--joy-color-tertiary-500);
+}
+
+:host([appearance="soft"][variant="danger"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-background-color: var(--joy-color-danger-100);
+  --chat-message-foreground-color: var(--joy-color-danger-500);
+  --chat-message-border-color: var(--joy-color-danger-500);
+}
+
+:host([appearance="soft"][variant="warning"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-background-color: var(--joy-color-warning-100);
+  --chat-message-foreground-color: var(--joy-color-warning-500);
+  --chat-message-border-color: var(--joy-color-warning-500);
+}
+
+:host([appearance="soft"][variant="success"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-background-color: var(--joy-color-success-100);
+  --chat-message-foreground-color: var(--joy-color-success-500);
+  --chat-message-border-color: var(--joy-color-success-500);
+}
+
+:host([appearance="soft"][variant="info"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-background-color: var(--joy-color-info-100);
+  --chat-message-foreground-color: var(--joy-color-info-500);
+  --chat-message-border-color: var(--joy-color-info-500);
+}
+
+:host([appearance="soft"][variant="highlight"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-background-color: var(--joy-color-highlight-100);
+  --chat-message-foreground-color: var(--joy-color-highlight-500);
+  --chat-message-border-color: var(--joy-color-highlight-500);
+}
+
+:host([appearance="soft"][variant="neutral"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-background-color: var(--joy-color-neutral-100);
+  --chat-message-foreground-color: var(--joy-color-neutral-500);
+  --chat-message-border-color: var(--joy-color-neutral-500);
+}
+
+:host([appearance="plain"]) {
+  --chat-message-background-color: var(--joy-scheme-transparent);
+  --chat-message-foreground-color: var(--joy-scheme-foreground);
+  --chat-message-border-width: 0;
+}
+
+:host([appearance="plain"][variant="primary"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-foreground-color: var(--joy-color-primary-500);
+  --chat-message-border-color: var(--joy-color-primary-500);
+}
+
+:host([appearance="plain"][variant="secondary"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-foreground-color: var(--joy-color-secondary-500);
+  --chat-message-border-color: var(--joy-color-secondary-500);
+}
+
+:host([appearance="plain"][variant="tertiary"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-foreground-color: var(--joy-color-tertiary-500);
+  --chat-message-border-color: var(--joy-color-tertiary-500);
+}
+
+:host([appearance="plain"][variant="danger"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-foreground-color: var(--joy-color-danger-500);
+  --chat-message-border-color: var(--joy-color-danger-500);
+}
+
+:host([appearance="plain"][variant="warning"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-foreground-color: var(--joy-color-warning-500);
+  --chat-message-border-color: var(--joy-color-warning-500);
+}
+
+:host([appearance="plain"][variant="success"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-foreground-color: var(--joy-color-success-500);
+  --chat-message-border-color: var(--joy-color-success-500);
+}
+
+:host([appearance="plain"][variant="info"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-foreground-color: var(--joy-color-info-500);
+  --chat-message-border-color: var(--joy-color-info-500);
+}
+
+:host([appearance="plain"][variant="highlight"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-foreground-color: var(--joy-color-highlight-500);
+  --chat-message-border-color: var(--joy-color-highlight-500);
+}
+
+:host([appearance="plain"][variant="neutral"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-foreground-color: var(--joy-color-neutral-500);
+  --chat-message-border-color: var(--joy-color-neutral-500);
+}
+
+:host([appearance="solid"]) {
+  --chat-message-background-color: var(--joy-scheme-transparent);
+  --chat-message-foreground-color: var(--joy-scheme-foreground);
+  --chat-message-border-width: 0;
+}
+
+:host([appearance="solid"][variant="primary"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-background-color: var(--joy-color-primary-500);
+  --chat-message-foreground-color: var(--joy-color-primary-0);
+  --chat-message-border-color: var(--joy-color-primary-700);
+}
+
+:host([appearance="solid"][variant="secondary"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-background-color: var(--joy-color-secondary-500);
+  --chat-message-foreground-color: var(--joy-color-secondary-0);
+  --chat-message-border-color: var(--joy-color-secondary-700);
+}
+
+:host([appearance="solid"][variant="tertiary"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-background-color: var(--joy-color-tertiary-500);
+  --chat-message-foreground-color: var(--joy-color-tertiary-0);
+  --chat-message-border-color: var(--joy-color-tertiary-700);
+}
+
+:host([appearance="solid"][variant="danger"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-background-color: var(--joy-color-danger-500);
+  --chat-message-foreground-color: var(--joy-color-danger-0);
+  --chat-message-border-color: var(--joy-color-danger-700);
+}
+
+:host([appearance="solid"][variant="warning"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-background-color: var(--joy-color-warning-500);
+  --chat-message-foreground-color: var(--joy-color-warning-0);
+  --chat-message-border-color: var(--joy-color-warning-700);
+}
+
+:host([appearance="solid"][variant="success"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-background-color: var(--joy-color-success-500);
+  --chat-message-foreground-color: var(--joy-color-success-0);
+  --chat-message-border-color: var(--joy-color-success-700);
+}
+
+:host([appearance="solid"][variant="info"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-background-color: var(--joy-color-info-500);
+  --chat-message-foreground-color: var(--joy-color-info-0);
+  --chat-message-border-color: var(--joy-color-info-700);
+}
+
+:host([appearance="solid"][variant="highlight"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-background-color: var(--joy-color-highlight-500);
+  --chat-message-foreground-color: var(--joy-color-highlight-0);
+  --chat-message-border-color: var(--joy-color-highlight-700);
+}
+
+:host([appearance="solid"][variant="neutral"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-background-color: var(--joy-color-neutral-500);
+  --chat-message-foreground-color: var(--joy-color-neutral-0);
+  --chat-message-border-color: var(--joy-color-neutral-700);
+}
+
 @keyframes elastic-breathe {
   0%, 65%, 100% {
     transform: translateY(0) scaleX(1) scaleY(1);
@@ -145270,6 +145721,203 @@ function Jfe() {
   }
 }
 
+:host([appearance="outline"]) {
+  --chat-message-background-color: var(--memphis-scheme-background);
+  --chat-message-foreground-color: var(--memphis-scheme-foreground);
+  --chat-message-border-color: var(--memphis-scheme-highlight);
+  --chat-message-border-width: var(--memphis-layout-thickness);
+  --chat-message-border-style: solid;
+}
+
+:host([appearance="outline"][variant="primary"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-foreground-color: var(--memphis-color-primary-500);
+  --chat-message-border-color: var(--memphis-color-primary-500);
+}
+
+:host([appearance="outline"][variant="secondary"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-foreground-color: var(--memphis-color-secondary-500);
+  --chat-message-border-color: var(--memphis-color-secondary-500);
+}
+
+:host([appearance="outline"][variant="tertiary"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-foreground-color: var(--memphis-color-tertiary-500);
+  --chat-message-border-color: var(--memphis-color-tertiary-500);
+}
+
+:host([appearance="outline"][variant="danger"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-foreground-color: var(--memphis-color-danger-500);
+  --chat-message-border-color: var(--memphis-color-danger-500);
+}
+
+:host([appearance="outline"][variant="warning"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-foreground-color: var(--memphis-color-warning-500);
+  --chat-message-border-color: var(--memphis-color-warning-500);
+}
+
+:host([appearance="outline"][variant="success"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-foreground-color: var(--memphis-color-success-500);
+  --chat-message-border-color: var(--memphis-color-success-500);
+}
+
+:host([appearance="outline"][variant="info"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-foreground-color: var(--memphis-color-info-500);
+  --chat-message-border-color: var(--memphis-color-info-500);
+}
+
+:host([appearance="outline"][variant="highlight"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-foreground-color: var(--memphis-color-highlight-500);
+  --chat-message-border-color: var(--memphis-color-highlight-500);
+}
+
+:host([appearance="outline"][variant="neutral"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-foreground-color: var(--memphis-color-neutral-500);
+  --chat-message-border-color: var(--memphis-color-neutral-500);
+}
+
+:host([appearance="soft"]) {
+  --chat-message-background-color: var(--memphis-scheme-highlight);
+  --chat-message-foreground-color: var(--memphis-scheme-foreground);
+  --chat-message-border-width: 0;
+}
+
+:host([appearance="soft"][variant="primary"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-background-color: var(--memphis-color-primary-100);
+  --chat-message-foreground-color: var(--memphis-color-primary-500);
+}
+
+:host([appearance="soft"][variant="secondary"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-background-color: var(--memphis-color-secondary-100);
+  --chat-message-foreground-color: var(--memphis-color-secondary-500);
+}
+
+:host([appearance="soft"][variant="tertiary"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-background-color: var(--memphis-color-tertiary-100);
+  --chat-message-foreground-color: var(--memphis-color-tertiary-500);
+}
+
+:host([appearance="soft"][variant="danger"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-background-color: var(--memphis-color-danger-100);
+  --chat-message-foreground-color: var(--memphis-color-danger-500);
+}
+
+:host([appearance="soft"][variant="warning"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-background-color: var(--memphis-color-warning-100);
+  --chat-message-foreground-color: var(--memphis-color-warning-500);
+}
+
+:host([appearance="soft"][variant="success"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-background-color: var(--memphis-color-success-100);
+  --chat-message-foreground-color: var(--memphis-color-success-500);
+}
+
+:host([appearance="soft"][variant="info"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-background-color: var(--memphis-color-info-100);
+  --chat-message-foreground-color: var(--memphis-color-info-500);
+}
+
+:host([appearance="soft"][variant="highlight"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-background-color: var(--memphis-color-highlight-100);
+  --chat-message-foreground-color: var(--memphis-color-highlight-500);
+}
+
+:host([appearance="soft"][variant="neutral"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-background-color: var(--memphis-color-neutral-100);
+  --chat-message-foreground-color: var(--memphis-color-neutral-500);
+}
+
+:host([appearance="plain"]) {
+  --chat-message-background-color: var(--memphis-scheme-background);
+  --chat-message-foreground-color: var(--memphis-scheme-foreground);
+  --chat-message-border-width: 0;
+}
+
+:host([appearance="plain"][variant="primary"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-foreground-color: var(--memphis-color-primary-500);
+}
+
+:host([appearance="plain"][variant="secondary"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-foreground-color: var(--memphis-color-secondary-500);
+}
+
+:host([appearance="plain"][variant="tertiary"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-foreground-color: var(--memphis-color-tertiary-500);
+}
+
+:host([appearance="plain"][variant="danger"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-foreground-color: var(--memphis-color-danger-500);
+}
+
+:host([appearance="plain"][variant="warning"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-foreground-color: var(--memphis-color-warning-500);
+}
+
+:host([appearance="plain"][variant="success"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-foreground-color: var(--memphis-color-success-500);
+}
+
+:host([appearance="plain"][variant="info"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-foreground-color: var(--memphis-color-info-500);
+}
+
+:host([appearance="plain"][variant="highlight"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-foreground-color: var(--memphis-color-highlight-500);
+}
+
+:host([appearance="plain"][variant="neutral"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-foreground-color: var(--memphis-color-neutral-500);
+}
+
+:host([appearance="solid"]) {
+  --chat-message-background-color: var(--memphis-scheme-highlight);
+  --chat-message-foreground-color: var(--memphis-scheme-foreground);
+  --chat-message-border-width: 0;
+}
+
+:host([appearance="solid"][variant="primary"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-background-color: var(--memphis-color-primary-500);
+  --chat-message-foreground-color: var(--memphis-color-primary-0);
+}
+
+:host([appearance="solid"][variant="secondary"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-background-color: var(--memphis-color-secondary-500);
+  --chat-message-foreground-color: var(--memphis-color-secondary-0);
+}
+
+:host([appearance="solid"][variant="tertiary"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-background-color: var(--memphis-color-tertiary-500);
+  --chat-message-foreground-color: var(--memphis-color-tertiary-0);
+}
+
+:host([appearance="solid"][variant="danger"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-background-color: var(--memphis-color-danger-500);
+  --chat-message-foreground-color: var(--memphis-color-danger-0);
+}
+
+:host([appearance="solid"][variant="warning"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-background-color: var(--memphis-color-warning-500);
+  --chat-message-foreground-color: var(--memphis-color-warning-0);
+}
+
+:host([appearance="solid"][variant="success"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-background-color: var(--memphis-color-success-500);
+  --chat-message-foreground-color: var(--memphis-color-success-0);
+}
+
+:host([appearance="solid"][variant="info"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-background-color: var(--memphis-color-info-500);
+  --chat-message-foreground-color: var(--memphis-color-info-0);
+}
+
+:host([appearance="solid"][variant="highlight"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-background-color: var(--memphis-color-highlight-500);
+  --chat-message-foreground-color: var(--memphis-color-highlight-0);
+}
+
+:host([appearance="solid"][variant="neutral"]:not([disabled]:not([disabled="false"]))) {
+  --chat-message-background-color: var(--memphis-color-neutral-500);
+  --chat-message-foreground-color: var(--memphis-color-neutral-0);
+}
+
     `;
 }
 //#endregion
@@ -166434,10 +167082,10 @@ var k2 = function(e, t, n, r) {
 		this.clickOutsideToClose && this.requestClose("outside") && this.close();
 	}
 	onApplyTemplate() {
-		super.onApplyTemplate(), S.current.findAncestor(this, F2) && (this.isComposed = !0);
+		super.onApplyTemplate(), this.isComposed = this.parentElement instanceof F2;
 	}
 	onIsOpenChanged(e, t) {
-		super.onIsOpenChanged(e, t), t && this.playEnterAnimationWhenReady(), S.current.findAncestor(this, F2, { strict: !1 })?.updateDrawerState();
+		super.onIsOpenChanged(e, t), t && this.playEnterAnimationWhenReady(), this.parentElement instanceof F2 && this.parentElement.updateDrawerState();
 	}
 	playEnterAnimationWhenReady() {
 		this.updateComplete.then(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@breadstone/mosaik-elements-svelte",
-    "version": "0.1.67",
+    "version": "0.1.69",
     "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.67",
-        "@breadstone/mosaik-elements-foundation": "0.1.67",
+        "@breadstone/mosaik-elements": "0.1.69",
+        "@breadstone/mosaik-elements-foundation": "0.1.69",
         "tslib": "2.8.1"
     },
     "peerDependencies": {