@breadstone/mosaik-elements-svelte 0.1.68 → 0.1.70

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+## 0.1.70 (2026-08-06)
+
+### 🚀 Features
+
+- **chat:** enhance message resizing and scrolling behavior ([6d32127ce7](https://github.com/RueDeRennes/mosaik/commit/6d32127ce7))
+
+## 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

package/index.mjs

@@ -71750,7 +71750,7 @@ var pL = {
 	_skipInitial;
 	_unobservedUpdate = !1;
 	constructor(e, t) {
-		super(e), t?.target !== null && this._targets.add(t?.target ?? e), this._config = t?.config, this._skipInitial = t?.skipInitial ?? !1, this.callback = t?.callback, this._observer = new ResizeObserver((e) => {
+		super(e), t?.target !== null && this._targets.add(t?.target ?? e), this._config = t?.config, this._skipInitial = t?.skipInitial ?? !1, this.callback = t?.callback, this._observer = typeof ResizeObserver > "u" ? null : new ResizeObserver((e) => {
 			this.handleChanges(e), this.host.requestUpdate();
 		});
 	}
@@ -71767,16 +71767,16 @@ var pL = {
 		!this._skipInitial && this._unobservedUpdate && this.handleChanges([]), this._unobservedUpdate = !1;
 	}
 	observe(e) {
-		this._targets.add(e), this._observer.observe(e, this._config), this._unobservedUpdate = !0, this.host.requestUpdate();
+		this._targets.add(e), this._observer?.observe(e, this._config), this._unobservedUpdate = !0, this.host.requestUpdate();
 	}
 	unobserve(e) {
-		this._targets.delete(e), this._observer.unobserve(e);
+		this._targets.delete(e), this._observer?.unobserve(e);
 	}
 	disconnect() {
-		this._observer.disconnect();
+		this._observer?.disconnect();
 	}
 	handleChanges(e) {
-		this.value = this.callback?.(e, this._observer);
+		this._observer && (this.value = this.callback?.(e, this._observer));
 	}
 };
 //#endregion
@@ -101456,9 +101456,10 @@ function zU() {
   --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-color: var(--joy-scheme-highlight);
   --prompt-box-focus-ring-inward-offset: 2px;
   --prompt-box-focus-ring-outward-offset: 0px;
+  --prompt-box-focus-ring-width: 0px;
   --prompt-box-font-family: unset;
   --prompt-box-font-letter-spacing: unset;
   --prompt-box-font-line-height: unset;
@@ -101662,46 +101663,59 @@ function zU() {
 :host([appearance="plain"]) {
   --prompt-box-border-width: 0;
   --prompt-box-background-color: var(--joy-scheme-transparent);
+  --prompt-box-focus-ring-inward-offset: 0px;
+  --prompt-box-focus-ring-outward-offset: 0px;
 }
 
 :host([appearance="soft"]), :host([appearance="solid"]) {
   --prompt-box-background-color: var(--joy-scheme-highlight);
+  --prompt-box-focus-ring-inward-offset: 0px;
+  --prompt-box-focus-ring-outward-offset: 0px;
 }
 
 :host([variant="primary"]:not([disabled]:not([disabled="false"])):not([readonly]:not([readonly="false"])):hover), :host([variant="primary"]:not([disabled]:not([disabled="false"])):not([readonly]:not([readonly="false"])):active), :host([variant="primary"]:not([disabled]:not([disabled="false"])):not([readonly]:not([readonly="false"])):focus-within) {
   --prompt-box-border-color: var(--joy-color-primary-500);
+  --prompt-box-focus-ring-color: var(--joy-color-primary-500);
 }
 
 :host([variant="secondary"]:not([disabled]:not([disabled="false"])):not([readonly]:not([readonly="false"])):hover), :host([variant="secondary"]:not([disabled]:not([disabled="false"])):not([readonly]:not([readonly="false"])):active), :host([variant="secondary"]:not([disabled]:not([disabled="false"])):not([readonly]:not([readonly="false"])):focus-within) {
   --prompt-box-border-color: var(--joy-color-secondary-500);
+  --prompt-box-focus-ring-color: var(--joy-color-secondary-500);
 }
 
 :host([variant="tertiary"]:not([disabled]:not([disabled="false"])):not([readonly]:not([readonly="false"])):hover), :host([variant="tertiary"]:not([disabled]:not([disabled="false"])):not([readonly]:not([readonly="false"])):active), :host([variant="tertiary"]:not([disabled]:not([disabled="false"])):not([readonly]:not([readonly="false"])):focus-within) {
   --prompt-box-border-color: var(--joy-color-tertiary-500);
+  --prompt-box-focus-ring-color: var(--joy-color-tertiary-500);
 }
 
 :host([variant="danger"]:not([disabled]:not([disabled="false"])):not([readonly]:not([readonly="false"])):hover), :host([variant="danger"]:not([disabled]:not([disabled="false"])):not([readonly]:not([readonly="false"])):active), :host([variant="danger"]:not([disabled]:not([disabled="false"])):not([readonly]:not([readonly="false"])):focus-within) {
   --prompt-box-border-color: var(--joy-color-danger-500);
+  --prompt-box-focus-ring-color: var(--joy-color-danger-500);
 }
 
 :host([variant="warning"]:not([disabled]:not([disabled="false"])):not([readonly]:not([readonly="false"])):hover), :host([variant="warning"]:not([disabled]:not([disabled="false"])):not([readonly]:not([readonly="false"])):active), :host([variant="warning"]:not([disabled]:not([disabled="false"])):not([readonly]:not([readonly="false"])):focus-within) {
   --prompt-box-border-color: var(--joy-color-warning-500);
+  --prompt-box-focus-ring-color: var(--joy-color-warning-500);
 }
 
 :host([variant="success"]:not([disabled]:not([disabled="false"])):not([readonly]:not([readonly="false"])):hover), :host([variant="success"]:not([disabled]:not([disabled="false"])):not([readonly]:not([readonly="false"])):active), :host([variant="success"]:not([disabled]:not([disabled="false"])):not([readonly]:not([readonly="false"])):focus-within) {
   --prompt-box-border-color: var(--joy-color-success-500);
+  --prompt-box-focus-ring-color: var(--joy-color-success-500);
 }
 
 :host([variant="info"]:not([disabled]:not([disabled="false"])):not([readonly]:not([readonly="false"])):hover), :host([variant="info"]:not([disabled]:not([disabled="false"])):not([readonly]:not([readonly="false"])):active), :host([variant="info"]:not([disabled]:not([disabled="false"])):not([readonly]:not([readonly="false"])):focus-within) {
   --prompt-box-border-color: var(--joy-color-info-500);
+  --prompt-box-focus-ring-color: var(--joy-color-info-500);
 }
 
 :host([variant="highlight"]:not([disabled]:not([disabled="false"])):not([readonly]:not([readonly="false"])):hover), :host([variant="highlight"]:not([disabled]:not([disabled="false"])):not([readonly]:not([readonly="false"])):active), :host([variant="highlight"]:not([disabled]:not([disabled="false"])):not([readonly]:not([readonly="false"])):focus-within) {
   --prompt-box-border-color: var(--joy-color-highlight-500);
+  --prompt-box-focus-ring-color: var(--joy-color-highlight-500);
 }
 
 :host([variant="neutral"]:not([disabled]:not([disabled="false"])):not([readonly]:not([readonly="false"])):hover), :host([variant="neutral"]:not([disabled]:not([disabled="false"])):not([readonly]:not([readonly="false"])):active), :host([variant="neutral"]:not([disabled]:not([disabled="false"])):not([readonly]:not([readonly="false"])):focus-within) {
   --prompt-box-border-color: var(--joy-color-neutral-500);
+  --prompt-box-focus-ring-color: var(--joy-color-neutral-500);
 }
 
     `;
@@ -142982,15 +142996,15 @@ function Efe(e) {
                            @scroll="${(t) => e.handleMessagesScroll(t.detail.distanceToEnd)}">
                 <div part="messages">
                     <slot name="message"></slot>
-                    ${R(e.scrollToEnd, () => I`
-                        <mosaik-back-top part="backTop"
-                                         .dir="${e.dir}"
-                                         .lang="${e.lang}"
-                                         .offset="${e.scrollToEndThreshold}"
-                                         .to="${"bottom"}"></mosaik-back-top>
-                    `)}
                 </div>
             </mosaik-scroll>
+            ${R(e.scrollToEnd, () => I`
+                <mosaik-back-top part="backTop"
+                                 .dir="${e.dir}"
+                                 .lang="${e.lang}"
+                                 .offset="${e.scrollToEndThreshold}"
+                                 .to="${e.begin === W$.End ? "bottom" : "top"}"></mosaik-back-top>
+            `)}
         </div>
         <div part="empty">
             <slot name="empty"></slot>
@@ -144668,6 +144682,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
@@ -144969,6 +145180,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);
@@ -145299,6 +145735,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
@@ -145922,10 +146555,15 @@ var d1 = function(e, t, n, r) {
 	if (typeof Reflect == "object" && typeof Reflect.metadata == "function") return Reflect.metadata(e, t);
 }, p1 = class extends A(YE(U(P(W(T))))) {
 	_intl;
+	_messageResizeController;
+	_observedMessageElements;
+	_pendingInitialMessageResizeElements;
 	_scrollToEnd;
 	_scrollToEndThreshold;
 	_scrollEndDistance;
 	_isScrollEndAnchored;
+	_messageResizeFollowFrame;
+	_isMessageResizeFollowScheduled;
 	_begin;
 	_promptBoxElement;
 	constructor() {
@@ -145936,7 +146574,11 @@ var d1 = function(e, t, n, r) {
 				appearance: this.appearance,
 				intl: this.intl
 			})
-		}), this._scrollToEnd = l1.DEFAULTS.scrollToEnd, this._scrollToEndThreshold = l1.DEFAULTS.scrollToEndThreshold, this._scrollEndDistance = 0, this._isScrollEndAnchored = !0, this._begin = l1.DEFAULTS.begin;
+		}), this._messageResizeController = new hL(this, {
+			target: null,
+			skipInitial: !0,
+			callback: (e) => this.handleMessageResizes(e)
+		}), this._scrollToEnd = l1.DEFAULTS.scrollToEnd, this._scrollToEndThreshold = l1.DEFAULTS.scrollToEndThreshold, this._scrollEndDistance = 0, this._isScrollEndAnchored = !0, this._observedMessageElements = /* @__PURE__ */ new Set(), this._pendingInitialMessageResizeElements = /* @__PURE__ */ new Set(), this._messageResizeFollowFrame = null, this._isMessageResizeFollowScheduled = !1, this._begin = l1.DEFAULTS.begin;
 	}
 	static get is() {
 		return "mosaik-chat";
@@ -145966,14 +146608,22 @@ var d1 = function(e, t, n, r) {
 	set intl(e) {
 		this._intl.provide(e);
 	}
-	onApplyTemplate() {
-		super.onApplyTemplate(), this.scrollToEnd && this.configureBackTop(), this.begin === W$.End && this.scrollMessagesToEnd(!1);
+	connectedCallback() {
+		super.connectedCallback(), this.hasUpdated && this.updateComplete.then(() => this.syncObservedMessageElements());
+	}
+	disconnectedCallback() {
+		this.releaseMessageResizeObservations(), super.disconnectedCallback();
 	}
 	onSlotChanges(e) {
-		super.onSlotChanges(e), e === "input" && (this._promptBoxElement = this.getSlotAssignmentsOf("input", c1).at(0), this._promptBoxElement && (this._promptBoxElement.dir = this.dir, this._promptBoxElement.variant = this.variant, this._promptBoxElement.appearance = this.appearance, this._promptBoxElement.placeholder = this.intl.inputPlaceholder)), (e === void 0 || e === "message") && this.hasUpdated && this.begin === W$.End && this.scrollToEnd && this._isScrollEndAnchored && this.scrollMessagesToEnd(!0);
+		super.onSlotChanges(e), e === "input" && (this._promptBoxElement = this.getSlotAssignmentsOf("input", c1).at(0), this._promptBoxElement && (this._promptBoxElement.dir = this.dir, this._promptBoxElement.variant = this.variant, this._promptBoxElement.appearance = this.appearance, this._promptBoxElement.placeholder = this.intl.inputPlaceholder)), (e === void 0 || e === "message") && (this.syncObservedMessageElements(), this.hasUpdated && this.begin === W$.End && this.scrollToEnd && this._isScrollEndAnchored && this.scrollMessagesToEnd(!0));
 	}
 	handleMessagesScroll(e) {
-		this._scrollEndDistance = e, this._isScrollEndAnchored = e <= this.scrollToEndThreshold;
+		Number.isFinite(e) && (this._scrollEndDistance = Math.max(0, e), this._isScrollEndAnchored = this._scrollEndDistance <= this.scrollToEndThreshold);
+	}
+	onApplyTemplate() {
+		super.onApplyTemplate(), this.begin === W$.End ? this.scrollMessagesToEnd(!1).then(() => {
+			this.scrollToEnd && this.configureBackTop();
+		}) : this.scrollToEnd && this.configureBackTop(), this.syncObservedMessageElements();
 	}
 	onWidthPropertyChanged(e, t) {
 		t === void 0 || Pv.isAuto(t) ? (j.current.removeStyle(this, "min-width"), j.current.removeStyle(this, "width")) : (j.current.setStyle(this, "min-width", t), j.current.setStyle(this, "width", t));
@@ -145990,13 +146640,35 @@ var d1 = function(e, t, n, r) {
 			this.scrollToEnd && this.getTemplatePart("backTop").attach(e.getScrollableElement());
 		});
 	}
+	syncObservedMessageElements() {
+		let e = new Set(this.getSlotAssignments("message"));
+		for (let t of this._observedMessageElements) e.has(t) || (this._messageResizeController.unobserve(t), this._observedMessageElements.delete(t), this._pendingInitialMessageResizeElements.delete(t));
+		for (let t of e) this._observedMessageElements.has(t) || (this._observedMessageElements.add(t), this._pendingInitialMessageResizeElements.add(t), this._messageResizeController.observe(t));
+	}
+	handleMessageResizes(e) {
+		let t = !1;
+		for (let n of e) this._observedMessageElements.has(n.target) && (this._pendingInitialMessageResizeElements.delete(n.target) || (t = !0));
+		t && this.scheduleMessageResizeFollow();
+	}
+	scheduleMessageResizeFollow() {
+		if (this._isMessageResizeFollowScheduled) return;
+		this._isMessageResizeFollowScheduled = !0;
+		let e = requestAnimationFrame(() => {
+			this._isMessageResizeFollowScheduled = !1, this._messageResizeFollowFrame = null, this.scrollMessagesToEnd(!0);
+		});
+		this._messageResizeFollowFrame = this._isMessageResizeFollowScheduled ? e : null;
+	}
+	releaseMessageResizeObservations() {
+		for (let e of this._observedMessageElements) this._messageResizeController.unobserve(e);
+		this._observedMessageElements.clear(), this._pendingInitialMessageResizeElements.clear(), this._messageResizeFollowFrame !== null && cancelAnimationFrame(this._messageResizeFollowFrame), this._messageResizeFollowFrame = null, this._isMessageResizeFollowScheduled = !1;
+	}
 	scrollMessagesToEnd(e) {
 		let t = this.getTemplatePart("scroll");
-		t.updateComplete.then(() => {
+		return t.updateComplete.then(() => new Promise((n) => {
 			requestAnimationFrame(() => {
-				this.begin === W$.End && (!e || this.scrollToEnd && this._isScrollEndAnchored) && t.scrollToPosition(2 ** 53 - 1, !1);
+				this.begin === W$.End && (!e || this.scrollToEnd && this._isScrollEndAnchored) && t.scrollToPosition(2 ** 53 - 1, !1), n();
 			});
-		});
+		}));
 	}
 };
 d1([
@@ -171081,11 +171753,14 @@ function o_e() {
 }
 
 :host {
+  box-sizing: border-box;
+  min-width: 0;
+  max-width: 100%;
   padding: var(--toast-actions-padding-top) var(--toast-actions-padding-right) var(--toast-actions-padding-bottom) var(--toast-actions-padding-left);
   justify-content: space-between;
   align-items: center;
   gap: var(--toast-actions-gap);
-  flex-direction: row;
+  flex-flow: wrap;
   display: flex;
   position: relative;
 }
@@ -171093,7 +171768,9 @@ function o_e() {
 :host [part="prefix"], :host [part="content"], :host [part="suffix"] {
   align-items: center;
   gap: var(--toast-actions-gap);
-  flex-direction: row;
+  flex-flow: wrap;
+  min-width: 0;
+  max-width: 100%;
   display: flex;
 }
 
@@ -171102,6 +171779,11 @@ function o_e() {
   justify-content: flex-end;
 }
 
+:host ::slotted(*) {
+  min-width: 0;
+  max-width: 100%;
+}
+
     `;
 }
 //#endregion
@@ -171160,11 +171842,14 @@ function s_e() {
 }
 
 :host {
+  box-sizing: border-box;
+  min-width: 0;
+  max-width: 100%;
   padding: var(--toast-actions-padding-top) var(--toast-actions-padding-right) var(--toast-actions-padding-bottom) var(--toast-actions-padding-left);
   justify-content: space-between;
   align-items: center;
   gap: var(--toast-actions-gap);
-  flex-direction: row;
+  flex-flow: wrap;
   display: flex;
   position: relative;
 }
@@ -171172,7 +171857,9 @@ function s_e() {
 :host [part="prefix"], :host [part="content"], :host [part="suffix"] {
   align-items: center;
   gap: var(--toast-actions-gap);
-  flex-direction: row;
+  flex-flow: wrap;
+  min-width: 0;
+  max-width: 100%;
   display: flex;
 }
 
@@ -171181,6 +171868,11 @@ function s_e() {
   justify-content: flex-end;
 }
 
+:host ::slotted(*) {
+  min-width: 0;
+  max-width: 100%;
+}
+
     `;
 }
 //#endregion
@@ -171239,11 +171931,14 @@ function c_e() {
 }
 
 :host {
+  box-sizing: border-box;
+  min-width: 0;
+  max-width: 100%;
   padding: var(--toast-actions-padding-top) var(--toast-actions-padding-right) var(--toast-actions-padding-bottom) var(--toast-actions-padding-left);
   justify-content: space-between;
   align-items: center;
   gap: var(--toast-actions-gap);
-  flex-direction: row;
+  flex-flow: wrap;
   display: flex;
   position: relative;
 }
@@ -171251,7 +171946,9 @@ function c_e() {
 :host [part="prefix"], :host [part="content"], :host [part="suffix"] {
   align-items: center;
   gap: var(--toast-actions-gap);
-  flex-direction: row;
+  flex-flow: wrap;
+  min-width: 0;
+  max-width: 100%;
   display: flex;
 }
 
@@ -171260,6 +171957,11 @@ function c_e() {
   justify-content: flex-end;
 }
 
+:host ::slotted(*) {
+  min-width: 0;
+  max-width: 100%;
+}
+
     `;
 }
 //#endregion
@@ -171428,13 +172130,17 @@ function d_e() {
 
 :host [part="root"] {
   pointer-events: all;
+  box-sizing: border-box;
+  width: max-content;
+  min-width: min(52px, 100dvw - var(--toast-offset-x) * 2);
+  max-width: calc(100dvw - var(--toast-offset-x) * 2);
+  max-height: calc(100dvh - var(--toast-offset-y) * 2);
   border: var(--toast-border);
   border-color: var(--toast-border-color);
   border-radius: var(--toast-border-radius);
   border-style: var(--toast-border-style);
   border-width: var(--toast-border-width);
   background-color: var(--toast-background-color);
-  min-width: 52px;
   color: var(--toast-foreground-color);
   box-shadow: var(--toast-shadow);
   transition-duration: var(--toast-transition-duration);
@@ -171454,12 +172160,18 @@ function d_e() {
 :host [part="root"] [part="body"] {
   align-items: center;
   gap: var(--toast-gap);
-  flex-direction: row;
+  flex-flow: wrap;
+  min-width: 0;
+  max-width: 100%;
   display: flex;
 }
 
 :host [part="root"] [part="text"] {
+  overflow-wrap: anywhere;
   flex-direction: column;
+  flex: auto;
+  min-width: 0;
+  max-width: 100%;
   display: flex;
 }
 
@@ -171474,11 +172186,24 @@ function d_e() {
   color: inherit;
 }
 
-:host [part="root"] [part="icon"] {
+:host [part="root"] [part="content"]::part(text) {
+  overflow-wrap: anywhere;
+  -webkit-line-clamp: var(--__max-lines);
+  -webkit-box-orient: vertical;
+  display: -webkit-box;
+  overflow: hidden;
+}
+
+:host [part="root"] [part="icon"], :host [part="root"] [part="progressRing"], :host [part="root"] [part="close"] {
   color: inherit;
   flex-shrink: 0;
 }
 
+:host [part="root"] slot[name="actions"]::slotted(*) {
+  min-width: 0;
+  max-width: 100%;
+}
+
 :host [part="root"] [part="progressFill"] {
   background-color: var(--toast-progress-fill-color);
   border-radius: inherit;
@@ -171904,13 +172629,17 @@ function f_e() {
 
 :host [part="root"] {
   pointer-events: all;
+  box-sizing: border-box;
+  width: max-content;
+  min-width: min(52px, 100dvw - var(--toast-offset-x) * 2);
+  max-width: calc(100dvw - var(--toast-offset-x) * 2);
+  max-height: calc(100dvh - var(--toast-offset-y) * 2);
   border: var(--toast-border);
   border-color: var(--toast-border-color);
   border-radius: var(--toast-border-radius);
   border-style: var(--toast-border-style);
   border-width: var(--toast-border-width);
   background-color: var(--toast-background-color);
-  min-width: 52px;
   color: var(--toast-foreground-color);
   box-shadow: var(--toast-shadow);
   transition-duration: var(--toast-transition-duration);
@@ -171930,12 +172659,18 @@ function f_e() {
 :host [part="root"] [part="body"] {
   align-items: center;
   gap: var(--toast-gap);
-  flex-direction: row;
+  flex-flow: wrap;
+  min-width: 0;
+  max-width: 100%;
   display: flex;
 }
 
 :host [part="root"] [part="text"] {
+  overflow-wrap: anywhere;
   flex-direction: column;
+  flex: auto;
+  min-width: 0;
+  max-width: 100%;
   display: flex;
 }
 
@@ -171950,11 +172685,24 @@ function f_e() {
   color: inherit;
 }
 
-:host [part="root"] [part="icon"] {
+:host [part="root"] [part="content"]::part(text) {
+  overflow-wrap: anywhere;
+  -webkit-line-clamp: var(--__max-lines);
+  -webkit-box-orient: vertical;
+  display: -webkit-box;
+  overflow: hidden;
+}
+
+:host [part="root"] [part="icon"], :host [part="root"] [part="progressRing"], :host [part="root"] [part="close"] {
   color: inherit;
   flex-shrink: 0;
 }
 
+:host [part="root"] slot[name="actions"]::slotted(*) {
+  min-width: 0;
+  max-width: 100%;
+}
+
 :host [part="root"] [part="progressFill"] {
   background-color: var(--toast-progress-fill-color);
   border-radius: inherit;
@@ -172384,13 +173132,17 @@ function p_e() {
 
 :host [part="root"] {
   pointer-events: all;
+  box-sizing: border-box;
+  width: max-content;
+  min-width: min(52px, 100dvw - var(--toast-offset-x) * 2);
+  max-width: calc(100dvw - var(--toast-offset-x) * 2);
+  max-height: calc(100dvh - var(--toast-offset-y) * 2);
   border: var(--toast-border);
   border-color: var(--toast-border-color);
   border-radius: var(--toast-border-radius);
   border-style: var(--toast-border-style);
   border-width: var(--toast-border-width);
   background-color: var(--toast-background-color);
-  min-width: 52px;
   color: var(--toast-foreground-color);
   box-shadow: var(--toast-shadow);
   transition-duration: var(--toast-transition-duration);
@@ -172410,12 +173162,18 @@ function p_e() {
 :host [part="root"] [part="body"] {
   align-items: center;
   gap: var(--toast-gap);
-  flex-direction: row;
+  flex-flow: wrap;
+  min-width: 0;
+  max-width: 100%;
   display: flex;
 }
 
 :host [part="root"] [part="text"] {
+  overflow-wrap: anywhere;
   flex-direction: column;
+  flex: auto;
+  min-width: 0;
+  max-width: 100%;
   display: flex;
 }
 
@@ -172430,11 +173188,24 @@ function p_e() {
   color: inherit;
 }
 
-:host [part="root"] [part="icon"] {
+:host [part="root"] [part="content"]::part(text) {
+  overflow-wrap: anywhere;
+  -webkit-line-clamp: var(--__max-lines);
+  -webkit-box-orient: vertical;
+  display: -webkit-box;
+  overflow: hidden;
+}
+
+:host [part="root"] [part="icon"], :host [part="root"] [part="progressRing"], :host [part="root"] [part="close"] {
   color: inherit;
   flex-shrink: 0;
 }
 
+:host [part="root"] slot[name="actions"]::slotted(*) {
+  min-width: 0;
+  max-width: 100%;
+}
+
 :host [part="root"] [part="progressFill"] {
   background-color: var(--toast-progress-fill-color);
   border-radius: inherit;
@@ -189625,7 +190396,7 @@ m6([C({ eventName: "resizeStart" }), h6("design:type", Object)], g6.prototype, "
 		memphis: ebe,
 		cosmopolitan: Qye
 	},
-	imports: []
+	imports: [oQ]
 }), h6("design:paramtypes", [])], g6);
 //#endregion
 //#region ../mosaik-elements-foundation/dist/Controls/Components/Primitives/Ribbon/RibbonElementTemplate.js

package/package.json

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