@breadstone/mosaik-elements-svelte 0.1.28 → 0.1.31

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+## 0.1.31 (2026-06-24)
+
+### 🚀 Features
+
+- **toast:** enhance toast component with icon and appearance variants ([e5fe7d2071](https://github.com/RueDeRennes/mosaik/commit/e5fe7d2071))
+
+## 0.1.30 (2026-06-24)
+
+This was a version bump only for mosaik-elements-svelte to align it with other projects, there were no code changes.
+
+## 0.1.29 (2026-06-24)
+
+### 🚀 Features
+
+- **toast:** add new positions and action ([581725264f](https://github.com/RueDeRennes/mosaik/commit/581725264f))
+
 ## 0.1.28 (2026-06-24)
 
 ### 🚀 Features

package/index.mjs

@@ -60763,11 +60763,7 @@ function zM(e) {
                           @connected="${(t) => t.target.attach(e)}"></mosaik-elevation>
         `)}
         <div part="root">
-            <mosaik-stack part="heading"
-                          .orientation="${e.orientation}"
-                          .verticalAlignment="${e.verticalContentAlignment}"
-                          .horizontalAlignment="${e.horizontalContentAlignment}"
-                          .gap="${"16px"}">
+            <div part="heading">
                 ${U(e.icon, () => V`
                 <slot name="icon">
                     <mosaik-icon part="icon" .variant="${e.variant}"
@@ -60810,12 +60806,11 @@ function zM(e) {
                     </slot>
                 </div>
                 `)}
-            </mosaik-stack>
-            <mosaik-stack part="actions"
-                          ?hidden="${!RM(e, "has-actions", e.hasSlotContent("actions"))}"
-                          .gap="${"small"}">
+            </div>
+            <div part="actions"
+                 ?hidden="${!RM(e, "has-actions", e.hasSlotContent("actions"))}">
                 <slot name="actions"></slot>
-            </mosaik-stack>
+            </div>
         </div>
     `;
 }
@@ -62351,7 +62346,6 @@ rN([
 		W,
 		KM,
 		$M,
-		Jb,
 		FM
 	]
 }), iN("design:paramtypes", [])], aN);
@@ -183955,8 +183949,14 @@ var C4 = class e {
 	}
 }, w4 = {
 	Bottom: "bottom",
-	Middle: "middle",
-	Top: "top"
+	BottomLeft: "bottom-left",
+	BottomRight: "bottom-right",
+	Center: "center",
+	Left: "left",
+	Right: "right",
+	Top: "top",
+	TopLeft: "top-left",
+	TopRight: "top-right"
 };
 //#endregion
 //#region ../mosaik-elements-foundation/dist/Controls/Components/Overlays/Toast/Themes/ToastElement.Cosmopolitan.js
@@ -183978,6 +183978,7 @@ function Kye() {
   --toast-font-weight: unset;
   --toast-foreground-color: unset;
   --toast-gap: unset;
+  --toast-offset-x: unset;
   --toast-offset-y: unset;
   --toast-padding-bottom: unset;
   --toast-padding-left: unset;
@@ -184063,7 +184064,6 @@ function Kye() {
   padding-right: var(--toast-padding-right);
   padding-bottom: var(--toast-padding-bottom);
   padding-left: var(--toast-padding-left);
-  gap: var(--toast-gap);
   margin: auto;
   position: fixed;
   left: 50%;
@@ -184071,6 +184071,18 @@ function Kye() {
   translate: -50%;
 }
 
+:host [part="root"] [part="body"] {
+  align-items: center;
+  gap: var(--toast-gap);
+  flex-direction: row;
+  display: flex;
+}
+
+:host [part="root"] [part="text"] {
+  flex-direction: column;
+  display: flex;
+}
+
 :host [part="root"] [part="header"], :host [part="root"] [part="content"] {
   font-family: inherit;
   font-size: inherit;
@@ -184082,6 +184094,11 @@ function Kye() {
   color: inherit;
 }
 
+:host [part="root"] [part="icon"] {
+  color: inherit;
+  flex-shrink: 0;
+}
+
 :host [part="root"] [part="progressFill"] {
   background-color: var(--toast-progress-fill-color);
   border-radius: inherit;
@@ -184107,24 +184124,314 @@ function Kye() {
   pointer-events: none;
 }
 
-:host([position="bottom"]) [part="root"] {
-  top: unset;
-  bottom: var(--toast-offset-y);
+:host([position="top"]) [part="root"] {
+  bottom: unset;
+  top: var(--toast-offset-y);
+  left: 50%;
   translate: -50%;
 }
 
-:host([position="middle"]) [part="root"] {
+:host([position="top-left"]) [part="root"] {
+  bottom: unset;
+  top: var(--toast-offset-y);
+  left: var(--toast-offset-x);
+  translate: 0;
+}
+
+:host([position="top-right"]) [part="root"] {
+  bottom: unset;
+  top: var(--toast-offset-y);
+  left: unset;
+  right: var(--toast-offset-x);
+  translate: 0;
+}
+
+:host([position="left"]) [part="root"] {
   top: 50%;
   bottom: unset;
+  left: var(--toast-offset-x);
+  translate: 0 -50%;
+}
+
+:host([position="center"]) [part="root"] {
+  top: 50%;
+  bottom: unset;
+  left: 50%;
   translate: -50% -50%;
 }
 
-:host([position="top"]) [part="root"] {
+:host([position="right"]) [part="root"] {
+  top: 50%;
   bottom: unset;
-  top: var(--toast-offset-y);
+  left: unset;
+  right: var(--toast-offset-x);
+  translate: 0 -50%;
+}
+
+:host([position="bottom"]) [part="root"] {
+  top: unset;
+  bottom: var(--toast-offset-y);
+  left: 50%;
   translate: -50%;
 }
 
+:host([position="bottom-left"]) [part="root"] {
+  top: unset;
+  bottom: var(--toast-offset-y);
+  left: var(--toast-offset-x);
+  translate: 0;
+}
+
+:host([position="bottom-right"]) [part="root"] {
+  top: unset;
+  bottom: var(--toast-offset-y);
+  left: unset;
+  right: var(--toast-offset-x);
+  translate: 0;
+}
+
+:host([variant="primary"]) {
+  --toast-background-color: var(--cosmopolitan-color-primary-500);
+  --toast-foreground-color: var(--cosmopolitan-color-primary-0);
+}
+
+:host([variant="secondary"]) {
+  --toast-background-color: var(--cosmopolitan-color-secondary-500);
+  --toast-foreground-color: var(--cosmopolitan-color-secondary-0);
+}
+
+:host([variant="tertiary"]) {
+  --toast-background-color: var(--cosmopolitan-color-tertiary-500);
+  --toast-foreground-color: var(--cosmopolitan-color-tertiary-0);
+}
+
+:host([variant="danger"]) {
+  --toast-background-color: var(--cosmopolitan-color-danger-500);
+  --toast-foreground-color: var(--cosmopolitan-color-danger-0);
+}
+
+:host([variant="warning"]) {
+  --toast-background-color: var(--cosmopolitan-color-warning-500);
+  --toast-foreground-color: var(--cosmopolitan-color-warning-0);
+}
+
+:host([variant="success"]) {
+  --toast-background-color: var(--cosmopolitan-color-success-500);
+  --toast-foreground-color: var(--cosmopolitan-color-success-0);
+}
+
+:host([variant="info"]) {
+  --toast-background-color: var(--cosmopolitan-color-info-500);
+  --toast-foreground-color: var(--cosmopolitan-color-info-0);
+}
+
+:host([variant="highlight"]) {
+  --toast-background-color: var(--cosmopolitan-color-highlight-500);
+  --toast-foreground-color: var(--cosmopolitan-color-highlight-0);
+}
+
+:host([variant="neutral"]) {
+  --toast-background-color: var(--cosmopolitan-color-neutral-500);
+  --toast-foreground-color: var(--cosmopolitan-color-neutral-0);
+}
+
+:host([appearance="outline"]) {
+  --toast-background-color: transparent;
+  --toast-foreground-color: var(--cosmopolitan-scheme-foreground);
+  --toast-border-color: var(--cosmopolitan-scheme-foreground);
+  --toast-border-width: 1px;
+  --toast-border-style: solid;
+}
+
+:host([appearance="outline"][variant="primary"]) {
+  --toast-foreground-color: var(--cosmopolitan-color-primary-500);
+  --toast-border-color: var(--cosmopolitan-color-primary-500);
+}
+
+:host([appearance="outline"][variant="secondary"]) {
+  --toast-foreground-color: var(--cosmopolitan-color-secondary-500);
+  --toast-border-color: var(--cosmopolitan-color-secondary-500);
+}
+
+:host([appearance="outline"][variant="tertiary"]) {
+  --toast-foreground-color: var(--cosmopolitan-color-tertiary-500);
+  --toast-border-color: var(--cosmopolitan-color-tertiary-500);
+}
+
+:host([appearance="outline"][variant="danger"]) {
+  --toast-foreground-color: var(--cosmopolitan-color-danger-500);
+  --toast-border-color: var(--cosmopolitan-color-danger-500);
+}
+
+:host([appearance="outline"][variant="warning"]) {
+  --toast-foreground-color: var(--cosmopolitan-color-warning-500);
+  --toast-border-color: var(--cosmopolitan-color-warning-500);
+}
+
+:host([appearance="outline"][variant="success"]) {
+  --toast-foreground-color: var(--cosmopolitan-color-success-500);
+  --toast-border-color: var(--cosmopolitan-color-success-500);
+}
+
+:host([appearance="outline"][variant="info"]) {
+  --toast-foreground-color: var(--cosmopolitan-color-info-500);
+  --toast-border-color: var(--cosmopolitan-color-info-500);
+}
+
+:host([appearance="outline"][variant="highlight"]) {
+  --toast-foreground-color: var(--cosmopolitan-color-highlight-500);
+  --toast-border-color: var(--cosmopolitan-color-highlight-500);
+}
+
+:host([appearance="outline"][variant="neutral"]) {
+  --toast-foreground-color: var(--cosmopolitan-color-neutral-500);
+  --toast-border-color: var(--cosmopolitan-color-neutral-500);
+}
+
+:host([appearance="soft"]) {
+  --toast-background-color: var(--cosmopolitan-scheme-highlight);
+  --toast-foreground-color: var(--cosmopolitan-scheme-foreground);
+  --toast-border-width: 0;
+}
+
+:host([appearance="soft"][variant="primary"]) {
+  --toast-background-color: var(--cosmopolitan-color-primary-100);
+  --toast-foreground-color: var(--cosmopolitan-color-primary-500);
+}
+
+:host([appearance="soft"][variant="secondary"]) {
+  --toast-background-color: var(--cosmopolitan-color-secondary-100);
+  --toast-foreground-color: var(--cosmopolitan-color-secondary-500);
+}
+
+:host([appearance="soft"][variant="tertiary"]) {
+  --toast-background-color: var(--cosmopolitan-color-tertiary-100);
+  --toast-foreground-color: var(--cosmopolitan-color-tertiary-500);
+}
+
+:host([appearance="soft"][variant="danger"]) {
+  --toast-background-color: var(--cosmopolitan-color-danger-100);
+  --toast-foreground-color: var(--cosmopolitan-color-danger-500);
+}
+
+:host([appearance="soft"][variant="warning"]) {
+  --toast-background-color: var(--cosmopolitan-color-warning-100);
+  --toast-foreground-color: var(--cosmopolitan-color-warning-500);
+}
+
+:host([appearance="soft"][variant="success"]) {
+  --toast-background-color: var(--cosmopolitan-color-success-100);
+  --toast-foreground-color: var(--cosmopolitan-color-success-500);
+}
+
+:host([appearance="soft"][variant="info"]) {
+  --toast-background-color: var(--cosmopolitan-color-info-100);
+  --toast-foreground-color: var(--cosmopolitan-color-info-500);
+}
+
+:host([appearance="soft"][variant="highlight"]) {
+  --toast-background-color: var(--cosmopolitan-color-highlight-100);
+  --toast-foreground-color: var(--cosmopolitan-color-highlight-500);
+}
+
+:host([appearance="soft"][variant="neutral"]) {
+  --toast-background-color: var(--cosmopolitan-color-neutral-100);
+  --toast-foreground-color: var(--cosmopolitan-color-neutral-500);
+}
+
+:host([appearance="plain"]) {
+  --toast-background-color: transparent;
+  --toast-foreground-color: var(--cosmopolitan-scheme-foreground);
+  --toast-border-width: 0;
+}
+
+:host([appearance="plain"][variant="primary"]) {
+  --toast-foreground-color: var(--cosmopolitan-color-primary-500);
+}
+
+:host([appearance="plain"][variant="secondary"]) {
+  --toast-foreground-color: var(--cosmopolitan-color-secondary-500);
+}
+
+:host([appearance="plain"][variant="tertiary"]) {
+  --toast-foreground-color: var(--cosmopolitan-color-tertiary-500);
+}
+
+:host([appearance="plain"][variant="danger"]) {
+  --toast-foreground-color: var(--cosmopolitan-color-danger-500);
+}
+
+:host([appearance="plain"][variant="warning"]) {
+  --toast-foreground-color: var(--cosmopolitan-color-warning-500);
+}
+
+:host([appearance="plain"][variant="success"]) {
+  --toast-foreground-color: var(--cosmopolitan-color-success-500);
+}
+
+:host([appearance="plain"][variant="info"]) {
+  --toast-foreground-color: var(--cosmopolitan-color-info-500);
+}
+
+:host([appearance="plain"][variant="highlight"]) {
+  --toast-foreground-color: var(--cosmopolitan-color-highlight-500);
+}
+
+:host([appearance="plain"][variant="neutral"]) {
+  --toast-foreground-color: var(--cosmopolitan-color-neutral-500);
+}
+
+:host([appearance="solid"]) {
+  --toast-background-color: var(--cosmopolitan-scheme-foreground);
+  --toast-foreground-color: var(--cosmopolitan-scheme-background);
+  --toast-border-width: 0;
+}
+
+:host([appearance="solid"][variant="primary"]) {
+  --toast-background-color: var(--cosmopolitan-color-primary-500);
+  --toast-foreground-color: var(--cosmopolitan-color-primary-0);
+}
+
+:host([appearance="solid"][variant="secondary"]) {
+  --toast-background-color: var(--cosmopolitan-color-secondary-500);
+  --toast-foreground-color: var(--cosmopolitan-color-secondary-0);
+}
+
+:host([appearance="solid"][variant="tertiary"]) {
+  --toast-background-color: var(--cosmopolitan-color-tertiary-500);
+  --toast-foreground-color: var(--cosmopolitan-color-tertiary-0);
+}
+
+:host([appearance="solid"][variant="danger"]) {
+  --toast-background-color: var(--cosmopolitan-color-danger-500);
+  --toast-foreground-color: var(--cosmopolitan-color-danger-0);
+}
+
+:host([appearance="solid"][variant="warning"]) {
+  --toast-background-color: var(--cosmopolitan-color-warning-500);
+  --toast-foreground-color: var(--cosmopolitan-color-warning-0);
+}
+
+:host([appearance="solid"][variant="success"]) {
+  --toast-background-color: var(--cosmopolitan-color-success-500);
+  --toast-foreground-color: var(--cosmopolitan-color-success-0);
+}
+
+:host([appearance="solid"][variant="info"]) {
+  --toast-background-color: var(--cosmopolitan-color-info-500);
+  --toast-foreground-color: var(--cosmopolitan-color-info-0);
+}
+
+:host([appearance="solid"][variant="highlight"]) {
+  --toast-background-color: var(--cosmopolitan-color-highlight-500);
+  --toast-foreground-color: var(--cosmopolitan-color-highlight-0);
+}
+
+:host([appearance="solid"][variant="neutral"]) {
+  --toast-background-color: var(--cosmopolitan-color-neutral-500);
+  --toast-foreground-color: var(--cosmopolitan-color-neutral-0);
+}
+
     `;
 }
 //#endregion
@@ -184147,6 +184454,7 @@ function qye() {
   --toast-font-weight: var(--joy-typography-body1-font-weight);
   --toast-foreground-color: var(--joy-scheme-foreground);
   --toast-gap: var(--joy-layout-space);
+  --toast-offset-x: var(--joy-layout-space);
   --toast-offset-y: var(--joy-layout-space);
   --toast-padding-bottom: var(--joy-layout-space);
   --toast-padding-left: calc(var(--joy-layout-space) * 2);
@@ -184232,7 +184540,6 @@ function qye() {
   padding-right: var(--toast-padding-right);
   padding-bottom: var(--toast-padding-bottom);
   padding-left: var(--toast-padding-left);
-  gap: var(--toast-gap);
   margin: auto;
   position: fixed;
   left: 50%;
@@ -184240,6 +184547,18 @@ function qye() {
   translate: -50%;
 }
 
+:host [part="root"] [part="body"] {
+  align-items: center;
+  gap: var(--toast-gap);
+  flex-direction: row;
+  display: flex;
+}
+
+:host [part="root"] [part="text"] {
+  flex-direction: column;
+  display: flex;
+}
+
 :host [part="root"] [part="header"], :host [part="root"] [part="content"] {
   font-family: inherit;
   font-size: inherit;
@@ -184251,6 +184570,11 @@ function qye() {
   color: inherit;
 }
 
+:host [part="root"] [part="icon"] {
+  color: inherit;
+  flex-shrink: 0;
+}
+
 :host [part="root"] [part="progressFill"] {
   background-color: var(--toast-progress-fill-color);
   border-radius: inherit;
@@ -184276,24 +184600,72 @@ function qye() {
   pointer-events: none;
 }
 
-:host([position="bottom"]) [part="root"] {
-  top: unset;
-  bottom: var(--toast-offset-y);
+:host([position="top"]) [part="root"] {
+  bottom: unset;
+  top: var(--toast-offset-y);
+  left: 50%;
   translate: -50%;
 }
 
-:host([position="middle"]) [part="root"] {
+:host([position="top-left"]) [part="root"] {
+  bottom: unset;
+  top: var(--toast-offset-y);
+  left: var(--toast-offset-x);
+  translate: 0;
+}
+
+:host([position="top-right"]) [part="root"] {
+  bottom: unset;
+  top: var(--toast-offset-y);
+  left: unset;
+  right: var(--toast-offset-x);
+  translate: 0;
+}
+
+:host([position="left"]) [part="root"] {
+  top: 50%;
+  bottom: unset;
+  left: var(--toast-offset-x);
+  translate: 0 -50%;
+}
+
+:host([position="center"]) [part="root"] {
   top: 50%;
   bottom: unset;
+  left: 50%;
   translate: -50% -50%;
 }
 
-:host([position="top"]) [part="root"] {
+:host([position="right"]) [part="root"] {
+  top: 50%;
   bottom: unset;
-  top: var(--toast-offset-y);
+  left: unset;
+  right: var(--toast-offset-x);
+  translate: 0 -50%;
+}
+
+:host([position="bottom"]) [part="root"] {
+  top: unset;
+  bottom: var(--toast-offset-y);
+  left: 50%;
   translate: -50%;
 }
 
+:host([position="bottom-left"]) [part="root"] {
+  top: unset;
+  bottom: var(--toast-offset-y);
+  left: var(--toast-offset-x);
+  translate: 0;
+}
+
+:host([position="bottom-right"]) [part="root"] {
+  top: unset;
+  bottom: var(--toast-offset-y);
+  left: unset;
+  right: var(--toast-offset-x);
+  translate: 0;
+}
+
 :host [part="root"] {
   padding: calc(var(--joy-layout-space) * 2) calc(var(--joy-layout-space) * 3);
 }
@@ -184343,6 +184715,203 @@ function qye() {
   --toast-foreground-color: var(--joy-color-neutral-0);
 }
 
+:host([appearance="outline"]) {
+  --toast-background-color: var(--joy-scheme-background);
+  --toast-foreground-color: var(--joy-scheme-foreground);
+  --toast-border-color: var(--joy-scheme-highlight);
+  --toast-border-width: var(--joy-layout-thickness);
+  --toast-border-style: solid;
+}
+
+:host([appearance="outline"][variant="primary"]) {
+  --toast-foreground-color: var(--joy-color-primary-500);
+  --toast-border-color: var(--joy-color-primary-500);
+}
+
+:host([appearance="outline"][variant="secondary"]) {
+  --toast-foreground-color: var(--joy-color-secondary-500);
+  --toast-border-color: var(--joy-color-secondary-500);
+}
+
+:host([appearance="outline"][variant="tertiary"]) {
+  --toast-foreground-color: var(--joy-color-tertiary-500);
+  --toast-border-color: var(--joy-color-tertiary-500);
+}
+
+:host([appearance="outline"][variant="danger"]) {
+  --toast-foreground-color: var(--joy-color-danger-500);
+  --toast-border-color: var(--joy-color-danger-500);
+}
+
+:host([appearance="outline"][variant="warning"]) {
+  --toast-foreground-color: var(--joy-color-warning-500);
+  --toast-border-color: var(--joy-color-warning-500);
+}
+
+:host([appearance="outline"][variant="success"]) {
+  --toast-foreground-color: var(--joy-color-success-500);
+  --toast-border-color: var(--joy-color-success-500);
+}
+
+:host([appearance="outline"][variant="info"]) {
+  --toast-foreground-color: var(--joy-color-info-500);
+  --toast-border-color: var(--joy-color-info-500);
+}
+
+:host([appearance="outline"][variant="highlight"]) {
+  --toast-foreground-color: var(--joy-color-highlight-500);
+  --toast-border-color: var(--joy-color-highlight-500);
+}
+
+:host([appearance="outline"][variant="neutral"]) {
+  --toast-foreground-color: var(--joy-color-neutral-500);
+  --toast-border-color: var(--joy-color-neutral-500);
+}
+
+:host([appearance="soft"]) {
+  --toast-background-color: var(--joy-scheme-highlight);
+  --toast-foreground-color: var(--joy-scheme-foreground);
+  --toast-border-width: 0;
+}
+
+:host([appearance="soft"][variant="primary"]) {
+  --toast-background-color: var(--joy-color-primary-100);
+  --toast-foreground-color: var(--joy-color-primary-500);
+}
+
+:host([appearance="soft"][variant="secondary"]) {
+  --toast-background-color: var(--joy-color-secondary-100);
+  --toast-foreground-color: var(--joy-color-secondary-500);
+}
+
+:host([appearance="soft"][variant="tertiary"]) {
+  --toast-background-color: var(--joy-color-tertiary-100);
+  --toast-foreground-color: var(--joy-color-tertiary-500);
+}
+
+:host([appearance="soft"][variant="danger"]) {
+  --toast-background-color: var(--joy-color-danger-100);
+  --toast-foreground-color: var(--joy-color-danger-500);
+}
+
+:host([appearance="soft"][variant="warning"]) {
+  --toast-background-color: var(--joy-color-warning-100);
+  --toast-foreground-color: var(--joy-color-warning-500);
+}
+
+:host([appearance="soft"][variant="success"]) {
+  --toast-background-color: var(--joy-color-success-100);
+  --toast-foreground-color: var(--joy-color-success-500);
+}
+
+:host([appearance="soft"][variant="info"]) {
+  --toast-background-color: var(--joy-color-info-100);
+  --toast-foreground-color: var(--joy-color-info-500);
+}
+
+:host([appearance="soft"][variant="highlight"]) {
+  --toast-background-color: var(--joy-color-highlight-100);
+  --toast-foreground-color: var(--joy-color-highlight-500);
+}
+
+:host([appearance="soft"][variant="neutral"]) {
+  --toast-background-color: var(--joy-color-neutral-100);
+  --toast-foreground-color: var(--joy-color-neutral-500);
+}
+
+:host([appearance="plain"]) {
+  --toast-background-color: var(--joy-scheme-background);
+  --toast-foreground-color: var(--joy-scheme-foreground);
+  --toast-border-width: 0;
+}
+
+:host([appearance="plain"][variant="primary"]) {
+  --toast-foreground-color: var(--joy-color-primary-500);
+}
+
+:host([appearance="plain"][variant="secondary"]) {
+  --toast-foreground-color: var(--joy-color-secondary-500);
+}
+
+:host([appearance="plain"][variant="tertiary"]) {
+  --toast-foreground-color: var(--joy-color-tertiary-500);
+}
+
+:host([appearance="plain"][variant="danger"]) {
+  --toast-foreground-color: var(--joy-color-danger-500);
+}
+
+:host([appearance="plain"][variant="warning"]) {
+  --toast-foreground-color: var(--joy-color-warning-500);
+}
+
+:host([appearance="plain"][variant="success"]) {
+  --toast-foreground-color: var(--joy-color-success-500);
+}
+
+:host([appearance="plain"][variant="info"]) {
+  --toast-foreground-color: var(--joy-color-info-500);
+}
+
+:host([appearance="plain"][variant="highlight"]) {
+  --toast-foreground-color: var(--joy-color-highlight-500);
+}
+
+:host([appearance="plain"][variant="neutral"]) {
+  --toast-foreground-color: var(--joy-color-neutral-500);
+}
+
+:host([appearance="solid"]) {
+  --toast-background-color: var(--joy-scheme-highlight);
+  --toast-foreground-color: var(--joy-scheme-foreground);
+  --toast-border-width: 0;
+}
+
+:host([appearance="solid"][variant="primary"]) {
+  --toast-background-color: var(--joy-color-primary-500);
+  --toast-foreground-color: var(--joy-color-primary-0);
+}
+
+:host([appearance="solid"][variant="secondary"]) {
+  --toast-background-color: var(--joy-color-secondary-500);
+  --toast-foreground-color: var(--joy-color-secondary-0);
+}
+
+:host([appearance="solid"][variant="tertiary"]) {
+  --toast-background-color: var(--joy-color-tertiary-500);
+  --toast-foreground-color: var(--joy-color-tertiary-0);
+}
+
+:host([appearance="solid"][variant="danger"]) {
+  --toast-background-color: var(--joy-color-danger-500);
+  --toast-foreground-color: var(--joy-color-danger-0);
+}
+
+:host([appearance="solid"][variant="warning"]) {
+  --toast-background-color: var(--joy-color-warning-500);
+  --toast-foreground-color: var(--joy-color-warning-0);
+}
+
+:host([appearance="solid"][variant="success"]) {
+  --toast-background-color: var(--joy-color-success-500);
+  --toast-foreground-color: var(--joy-color-success-0);
+}
+
+:host([appearance="solid"][variant="info"]) {
+  --toast-background-color: var(--joy-color-info-500);
+  --toast-foreground-color: var(--joy-color-info-0);
+}
+
+:host([appearance="solid"][variant="highlight"]) {
+  --toast-background-color: var(--joy-color-highlight-500);
+  --toast-foreground-color: var(--joy-color-highlight-0);
+}
+
+:host([appearance="solid"][variant="neutral"]) {
+  --toast-background-color: var(--joy-color-neutral-500);
+  --toast-foreground-color: var(--joy-color-neutral-0);
+}
+
     `;
 }
 //#endregion
@@ -184365,6 +184934,7 @@ function Jye() {
   --toast-font-weight: var(--memphis-typography-body2-font-weight);
   --toast-foreground-color: var(--memphis-scheme-foreground);
   --toast-gap: var(--memphis-layout-space);
+  --toast-offset-x: var(--memphis-layout-space);
   --toast-offset-y: var(--memphis-layout-space);
   --toast-padding-bottom: calc(var(--memphis-layout-space) * 1.2);
   --toast-padding-left: calc(var(--memphis-layout-space) * 2.4);
@@ -184450,7 +185020,6 @@ function Jye() {
   padding-right: var(--toast-padding-right);
   padding-bottom: var(--toast-padding-bottom);
   padding-left: var(--toast-padding-left);
-  gap: var(--toast-gap);
   margin: auto;
   position: fixed;
   left: 50%;
@@ -184458,6 +185027,18 @@ function Jye() {
   translate: -50%;
 }
 
+:host [part="root"] [part="body"] {
+  align-items: center;
+  gap: var(--toast-gap);
+  flex-direction: row;
+  display: flex;
+}
+
+:host [part="root"] [part="text"] {
+  flex-direction: column;
+  display: flex;
+}
+
 :host [part="root"] [part="header"], :host [part="root"] [part="content"] {
   font-family: inherit;
   font-size: inherit;
@@ -184469,6 +185050,11 @@ function Jye() {
   color: inherit;
 }
 
+:host [part="root"] [part="icon"] {
+  color: inherit;
+  flex-shrink: 0;
+}
+
 :host [part="root"] [part="progressFill"] {
   background-color: var(--toast-progress-fill-color);
   border-radius: inherit;
@@ -184494,24 +185080,314 @@ function Jye() {
   pointer-events: none;
 }
 
-:host([position="bottom"]) [part="root"] {
-  top: unset;
-  bottom: var(--toast-offset-y);
+:host([position="top"]) [part="root"] {
+  bottom: unset;
+  top: var(--toast-offset-y);
+  left: 50%;
   translate: -50%;
 }
 
-:host([position="middle"]) [part="root"] {
+:host([position="top-left"]) [part="root"] {
+  bottom: unset;
+  top: var(--toast-offset-y);
+  left: var(--toast-offset-x);
+  translate: 0;
+}
+
+:host([position="top-right"]) [part="root"] {
+  bottom: unset;
+  top: var(--toast-offset-y);
+  left: unset;
+  right: var(--toast-offset-x);
+  translate: 0;
+}
+
+:host([position="left"]) [part="root"] {
+  top: 50%;
+  bottom: unset;
+  left: var(--toast-offset-x);
+  translate: 0 -50%;
+}
+
+:host([position="center"]) [part="root"] {
   top: 50%;
   bottom: unset;
+  left: 50%;
   translate: -50% -50%;
 }
 
-:host([position="top"]) [part="root"] {
+:host([position="right"]) [part="root"] {
+  top: 50%;
   bottom: unset;
-  top: var(--toast-offset-y);
+  left: unset;
+  right: var(--toast-offset-x);
+  translate: 0 -50%;
+}
+
+:host([position="bottom"]) [part="root"] {
+  top: unset;
+  bottom: var(--toast-offset-y);
+  left: 50%;
   translate: -50%;
 }
 
+:host([position="bottom-left"]) [part="root"] {
+  top: unset;
+  bottom: var(--toast-offset-y);
+  left: var(--toast-offset-x);
+  translate: 0;
+}
+
+:host([position="bottom-right"]) [part="root"] {
+  top: unset;
+  bottom: var(--toast-offset-y);
+  left: unset;
+  right: var(--toast-offset-x);
+  translate: 0;
+}
+
+:host([variant="primary"]) {
+  --toast-background-color: var(--memphis-color-primary-500);
+  --toast-foreground-color: var(--memphis-color-primary-0);
+}
+
+:host([variant="secondary"]) {
+  --toast-background-color: var(--memphis-color-secondary-500);
+  --toast-foreground-color: var(--memphis-color-secondary-0);
+}
+
+:host([variant="tertiary"]) {
+  --toast-background-color: var(--memphis-color-tertiary-500);
+  --toast-foreground-color: var(--memphis-color-tertiary-0);
+}
+
+:host([variant="danger"]) {
+  --toast-background-color: var(--memphis-color-danger-500);
+  --toast-foreground-color: var(--memphis-color-danger-0);
+}
+
+:host([variant="warning"]) {
+  --toast-background-color: var(--memphis-color-warning-500);
+  --toast-foreground-color: var(--memphis-color-warning-0);
+}
+
+:host([variant="success"]) {
+  --toast-background-color: var(--memphis-color-success-500);
+  --toast-foreground-color: var(--memphis-color-success-0);
+}
+
+:host([variant="info"]) {
+  --toast-background-color: var(--memphis-color-info-500);
+  --toast-foreground-color: var(--memphis-color-info-0);
+}
+
+:host([variant="highlight"]) {
+  --toast-background-color: var(--memphis-color-highlight-500);
+  --toast-foreground-color: var(--memphis-color-highlight-0);
+}
+
+:host([variant="neutral"]) {
+  --toast-background-color: var(--memphis-color-neutral-500);
+  --toast-foreground-color: var(--memphis-color-neutral-0);
+}
+
+:host([appearance="outline"]) {
+  --toast-background-color: var(--memphis-scheme-background);
+  --toast-foreground-color: var(--memphis-scheme-foreground);
+  --toast-border-color: var(--memphis-scheme-contrast);
+  --toast-border-width: var(--memphis-layout-thickness);
+  --toast-border-style: solid;
+}
+
+:host([appearance="outline"][variant="primary"]) {
+  --toast-foreground-color: var(--memphis-color-primary-500);
+  --toast-border-color: var(--memphis-color-primary-500);
+}
+
+:host([appearance="outline"][variant="secondary"]) {
+  --toast-foreground-color: var(--memphis-color-secondary-500);
+  --toast-border-color: var(--memphis-color-secondary-500);
+}
+
+:host([appearance="outline"][variant="tertiary"]) {
+  --toast-foreground-color: var(--memphis-color-tertiary-500);
+  --toast-border-color: var(--memphis-color-tertiary-500);
+}
+
+:host([appearance="outline"][variant="danger"]) {
+  --toast-foreground-color: var(--memphis-color-danger-500);
+  --toast-border-color: var(--memphis-color-danger-500);
+}
+
+:host([appearance="outline"][variant="warning"]) {
+  --toast-foreground-color: var(--memphis-color-warning-500);
+  --toast-border-color: var(--memphis-color-warning-500);
+}
+
+:host([appearance="outline"][variant="success"]) {
+  --toast-foreground-color: var(--memphis-color-success-500);
+  --toast-border-color: var(--memphis-color-success-500);
+}
+
+:host([appearance="outline"][variant="info"]) {
+  --toast-foreground-color: var(--memphis-color-info-500);
+  --toast-border-color: var(--memphis-color-info-500);
+}
+
+:host([appearance="outline"][variant="highlight"]) {
+  --toast-foreground-color: var(--memphis-color-highlight-500);
+  --toast-border-color: var(--memphis-color-highlight-500);
+}
+
+:host([appearance="outline"][variant="neutral"]) {
+  --toast-foreground-color: var(--memphis-color-neutral-500);
+  --toast-border-color: var(--memphis-color-neutral-500);
+}
+
+:host([appearance="soft"]) {
+  --toast-background-color: var(--memphis-scheme-highlight);
+  --toast-foreground-color: var(--memphis-scheme-foreground);
+  --toast-border-width: 0;
+}
+
+:host([appearance="soft"][variant="primary"]) {
+  --toast-background-color: var(--memphis-color-primary-100);
+  --toast-foreground-color: var(--memphis-color-primary-500);
+}
+
+:host([appearance="soft"][variant="secondary"]) {
+  --toast-background-color: var(--memphis-color-secondary-100);
+  --toast-foreground-color: var(--memphis-color-secondary-500);
+}
+
+:host([appearance="soft"][variant="tertiary"]) {
+  --toast-background-color: var(--memphis-color-tertiary-100);
+  --toast-foreground-color: var(--memphis-color-tertiary-500);
+}
+
+:host([appearance="soft"][variant="danger"]) {
+  --toast-background-color: var(--memphis-color-danger-100);
+  --toast-foreground-color: var(--memphis-color-danger-500);
+}
+
+:host([appearance="soft"][variant="warning"]) {
+  --toast-background-color: var(--memphis-color-warning-100);
+  --toast-foreground-color: var(--memphis-color-warning-500);
+}
+
+:host([appearance="soft"][variant="success"]) {
+  --toast-background-color: var(--memphis-color-success-100);
+  --toast-foreground-color: var(--memphis-color-success-500);
+}
+
+:host([appearance="soft"][variant="info"]) {
+  --toast-background-color: var(--memphis-color-info-100);
+  --toast-foreground-color: var(--memphis-color-info-500);
+}
+
+:host([appearance="soft"][variant="highlight"]) {
+  --toast-background-color: var(--memphis-color-highlight-100);
+  --toast-foreground-color: var(--memphis-color-highlight-500);
+}
+
+:host([appearance="soft"][variant="neutral"]) {
+  --toast-background-color: var(--memphis-color-neutral-100);
+  --toast-foreground-color: var(--memphis-color-neutral-500);
+}
+
+:host([appearance="plain"]) {
+  --toast-background-color: var(--memphis-scheme-background);
+  --toast-foreground-color: var(--memphis-scheme-foreground);
+  --toast-border-width: 0;
+}
+
+:host([appearance="plain"][variant="primary"]) {
+  --toast-foreground-color: var(--memphis-color-primary-500);
+}
+
+:host([appearance="plain"][variant="secondary"]) {
+  --toast-foreground-color: var(--memphis-color-secondary-500);
+}
+
+:host([appearance="plain"][variant="tertiary"]) {
+  --toast-foreground-color: var(--memphis-color-tertiary-500);
+}
+
+:host([appearance="plain"][variant="danger"]) {
+  --toast-foreground-color: var(--memphis-color-danger-500);
+}
+
+:host([appearance="plain"][variant="warning"]) {
+  --toast-foreground-color: var(--memphis-color-warning-500);
+}
+
+:host([appearance="plain"][variant="success"]) {
+  --toast-foreground-color: var(--memphis-color-success-500);
+}
+
+:host([appearance="plain"][variant="info"]) {
+  --toast-foreground-color: var(--memphis-color-info-500);
+}
+
+:host([appearance="plain"][variant="highlight"]) {
+  --toast-foreground-color: var(--memphis-color-highlight-500);
+}
+
+:host([appearance="plain"][variant="neutral"]) {
+  --toast-foreground-color: var(--memphis-color-neutral-500);
+}
+
+:host([appearance="solid"]) {
+  --toast-background-color: var(--memphis-scheme-highlight);
+  --toast-foreground-color: var(--memphis-scheme-foreground);
+  --toast-border-width: 0;
+}
+
+:host([appearance="solid"][variant="primary"]) {
+  --toast-background-color: var(--memphis-color-primary-500);
+  --toast-foreground-color: var(--memphis-color-primary-0);
+}
+
+:host([appearance="solid"][variant="secondary"]) {
+  --toast-background-color: var(--memphis-color-secondary-500);
+  --toast-foreground-color: var(--memphis-color-secondary-0);
+}
+
+:host([appearance="solid"][variant="tertiary"]) {
+  --toast-background-color: var(--memphis-color-tertiary-500);
+  --toast-foreground-color: var(--memphis-color-tertiary-0);
+}
+
+:host([appearance="solid"][variant="danger"]) {
+  --toast-background-color: var(--memphis-color-danger-500);
+  --toast-foreground-color: var(--memphis-color-danger-0);
+}
+
+:host([appearance="solid"][variant="warning"]) {
+  --toast-background-color: var(--memphis-color-warning-500);
+  --toast-foreground-color: var(--memphis-color-warning-0);
+}
+
+:host([appearance="solid"][variant="success"]) {
+  --toast-background-color: var(--memphis-color-success-500);
+  --toast-foreground-color: var(--memphis-color-success-0);
+}
+
+:host([appearance="solid"][variant="info"]) {
+  --toast-background-color: var(--memphis-color-info-500);
+  --toast-foreground-color: var(--memphis-color-info-0);
+}
+
+:host([appearance="solid"][variant="highlight"]) {
+  --toast-background-color: var(--memphis-color-highlight-500);
+  --toast-foreground-color: var(--memphis-color-highlight-0);
+}
+
+:host([appearance="solid"][variant="neutral"]) {
+  --toast-background-color: var(--memphis-color-neutral-500);
+  --toast-foreground-color: var(--memphis-color-neutral-0);
+}
+
     `;
 }
 //#endregion
@@ -184528,9 +185404,7 @@ function Yye(e) {
             ${U(e.showProgress && e.timeout > 0, () => V`
             <div part="progressFill"></div>
             `)}
-            <mosaik-stack .orientation="${K.Horizontal}"
-                          .verticalAlignment="${Hy.Center}"
-                          .gap="${"16px"}">
+            <div part="body">
                 ${U(e.isBusy, () => V`
                 <mosaik-progress-ring part="progressRing"
                                       .thickness="${"2px"}"
@@ -184538,7 +185412,13 @@ function Yye(e) {
                                       .variant="${e.variant}"
                                       .isIndeterminate="${!0}"></mosaik-progress-ring>
                 `)}
-                <mosaik-stack orientation="${K.Vertical}">
+                ${U(e.icon, () => V`
+                <mosaik-icon part="icon"
+                             .variant="${e.variant}"
+                             .data="${e.icon}"
+                             .size="${LM(e.iconSize)}"></mosaik-icon>
+                `)}
+                <div part="text">
                     <mosaik-text part="header"
                                  .text="${e.header}"
                                  ?truncate="${!0}"></mosaik-text>
@@ -184546,15 +185426,16 @@ function Yye(e) {
                                  .text="${e.content}"
                                  .maxLines="${3}"
                                  ?wrap="${!0}"></mosaik-text>
-                </mosaik-stack>
+                </div>
                 <slot name="actions"></slot>
                 ${U(e.closeable, () => V`
-                <mosaik-button .label="${"Close"}"
-                               .appearance="${q.Plain}"
-                               .variant="${e.variant}"
-                               @click="${() => e.close()}"></mosaik-button>
+                <mosaik-dismiss part="close"
+                                .variant="${e.variant}"
+                                .appearance="${"plain"}"
+                                .size="${"small"}"
+                                @click="${() => e.close()}"></mosaik-dismiss>
                 `)}
-            </mosaik-stack>
+            </div>
         </div>
     `;
 }
@@ -184567,10 +185448,12 @@ var T4 = function(e, t, n, r) {
 	return i > 3 && a && Object.defineProperty(t, n, a), a;
 }, E4 = function(e, t) {
 	if (typeof Reflect == "object" && typeof Reflect.metadata == "function") return Reflect.metadata(e, t);
-}, D4 = class extends F(_w(z(dy(zy(Ww))))) {
+}, D4 = class extends F(_w(z(J(dy(zy(Ww)))))) {
 	_timer;
 	_header;
 	_content;
+	_icon;
+	_iconSize;
 	_timeout;
 	_position;
 	_showProgress;
@@ -184579,7 +185462,7 @@ var T4 = function(e, t, n, r) {
 	_mouseOverSubscription;
 	_mouseOutSubscription;
 	constructor() {
-		super(), this._header = "", this._content = "", this._timeout = 0, this._position = w4.Middle, this._showProgress = !1, this._fillElement = null, this._fillAnimation = null, this._timer = C4.empty(() => this.close()), this._mouseOverSubscription = null, this._mouseOutSubscription = null, this.enter = fw, this.exit = dw;
+		super(), this._header = "", this._content = "", this._icon = "", this._iconSize = null, this._timeout = 0, this._position = w4.Center, this._showProgress = !1, this._fillElement = null, this._fillAnimation = null, this._timer = C4.empty(() => this.close()), this._mouseOverSubscription = null, this._mouseOutSubscription = null, this.enter = fw, this.exit = dw;
 	}
 	static get is() {
 		return "mosaik-toast";
@@ -184596,6 +185479,18 @@ var T4 = function(e, t, n, r) {
 	set content(e) {
 		this._content !== e && (this._content = e, this.requestUpdate("content"));
 	}
+	get icon() {
+		return this._icon;
+	}
+	set icon(e) {
+		this._icon !== e && (this._icon = e, this.requestUpdate("icon"));
+	}
+	get iconSize() {
+		return this._iconSize;
+	}
+	set iconSize(e) {
+		this._iconSize !== e && (this._iconSize = e, this.requestUpdate("iconSize"));
+	}
 	get timeout() {
 		return this._timeout;
 	}
@@ -184670,6 +185565,14 @@ T4([
 	E4("design:type", String),
 	E4("design:paramtypes", [String])
 ], D4.prototype, "content", null), T4([
+	P({ type: String }),
+	E4("design:type", String),
+	E4("design:paramtypes", [String])
+], D4.prototype, "icon", null), T4([
+	A({ type: G }),
+	E4("design:type", Object),
+	E4("design:paramtypes", [Object])
+], D4.prototype, "iconSize", null), T4([
 	A({ type: Number }),
 	E4("design:type", Number),
 	E4("design:paramtypes", [Number])
@@ -184705,10 +185608,10 @@ T4([
 	imports: [
 		W,
 		wx,
-		Jb,
 		iH,
-		Wx,
-		S4
+		FM,
+		S4,
+		ix
 	]
 }), E4("design:paramtypes", [])], D4);
 //#endregion
@@ -184733,7 +185636,10 @@ var Xye = {
 	closeable: !1,
 	isBusy: !1,
 	enter: fw,
-	exit: pw
+	exit: pw,
+	icon: "",
+	iconSize: null,
+	appearance: q.Default
 }, k4 = class e {
 	static _instance = null;
 	static _config = x4;

package/package.json

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