@breadstone/mosaik-elements-svelte 0.1.9 → 0.1.10

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## 0.1.10 (2026-06-13)
+
+### 🚀 Features
+
+- **stepper:** enhance stepper component with slot handling and styling improvements ([b11dd29f63](https://github.com/RueDeRennes/mosaik/commit/b11dd29f63))
+- **empty-state:** update slots for header and content in EmptyStateElement ([491a61d272](https://github.com/RueDeRennes/mosaik/commit/491a61d272))
+
 ## 0.1.9 (2026-06-10)
 
 This was a version bump only for mosaik-elements-svelte to align it with other projects, there were no code changes.

package/index.mjs

@@ -72336,26 +72336,30 @@ FI([
 function RI(e) {
 	return V`
         <mosaik-icon part="icon"
-                     .size="${G.Giant}"
+                     .size="${e.iconSize ?? G.Giant}"
                      .data="${e.icon.trim() ? e.icon : X.glasses}"
                      .variant="${"neutral"}"></mosaik-icon>
         <div part="root">
-            ${U(e.header, () => V`
-            <mosaik-text part="header"
-                         .readonly="${!0}"
-                         .wrap="${!0}"
-                         .alignment="${Bb.Center}"
-                         .text="${e.header}"
-                         .formatter="${e.formatter}"></mosaik-text>
-            `)}
-            ${U(e.content, () => V`
-            <mosaik-text part="content"
-                         .readonly="${!0}"
-                         .wrap="${!0}"
-                         .alignment="${Bb.Center}"
-                         .text="${e.content}"
-                         .formatter="${e.formatter}"></mosaik-text>
-            `)}
+            <slot name="header">
+                ${U(e.header.trim(), () => V`
+                <mosaik-text part="header"
+                            .readonly="${!0}"
+                            .wrap="${!0}"
+                            .alignment="${Bb.Center}"
+                            .text="${e.header}"
+                            .formatter="${e.formatter}"></mosaik-text>
+                `)}
+            </slot>
+            <slot name="content">
+                ${U(e.content.trim(), () => V`
+                <mosaik-text part="content"
+                            .readonly="${!0}"
+                            .wrap="${!0}"
+                            .alignment="${Bb.Center}"
+                            .text="${e.content}"
+                            .formatter="${e.formatter}"></mosaik-text>
+                `)}
+            </slot>
             <slot></slot>
         </div>
         <div part="actions" ?hidden="${!e.hasSlotContent("actions")}">
@@ -72448,7 +72452,7 @@ function zI() {
   --icon-foreground-color: var(--empty-state-foreground-color);
 }
 
-:host [part="header"] {
+:host slot[name="header"] {
   font-family: var(--empty-state-header-font-family);
   font-size: var(--empty-state-header-font-size);
   line-height: var(--empty-state-header-font-line-height);
@@ -72459,7 +72463,17 @@ function zI() {
   text-transform: var(--empty-state-header-font-text-transform);
 }
 
-:host [part="content"] {
+:host slot[name="header"] mosaik-text {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  font-weight: inherit;
+  letter-spacing: inherit;
+  text-decoration: inherit;
+  text-transform: inherit;
+}
+
+:host slot[name="content"] {
   font-family: var(--empty-state-content-font-family);
   font-size: var(--empty-state-content-font-size);
   line-height: var(--empty-state-content-font-line-height);
@@ -72470,6 +72484,16 @@ function zI() {
   text-transform: var(--empty-state-content-font-text-transform);
 }
 
+:host slot[name="content"] mosaik-text {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  font-weight: inherit;
+  letter-spacing: inherit;
+  text-decoration: inherit;
+  text-transform: inherit;
+}
+
 :host [part="root"] {
   flex-direction: column;
   align-items: center;
@@ -72570,7 +72594,7 @@ function BI() {
   --icon-foreground-color: var(--empty-state-foreground-color);
 }
 
-:host [part="header"] {
+:host slot[name="header"] {
   font-family: var(--empty-state-header-font-family);
   font-size: var(--empty-state-header-font-size);
   line-height: var(--empty-state-header-font-line-height);
@@ -72581,7 +72605,17 @@ function BI() {
   text-transform: var(--empty-state-header-font-text-transform);
 }
 
-:host [part="content"] {
+:host slot[name="header"] mosaik-text {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  font-weight: inherit;
+  letter-spacing: inherit;
+  text-decoration: inherit;
+  text-transform: inherit;
+}
+
+:host slot[name="content"] {
   font-family: var(--empty-state-content-font-family);
   font-size: var(--empty-state-content-font-size);
   line-height: var(--empty-state-content-font-line-height);
@@ -72592,6 +72626,16 @@ function BI() {
   text-transform: var(--empty-state-content-font-text-transform);
 }
 
+:host slot[name="content"] mosaik-text {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  font-weight: inherit;
+  letter-spacing: inherit;
+  text-decoration: inherit;
+  text-transform: inherit;
+}
+
 :host [part="root"] {
   flex-direction: column;
   align-items: center;
@@ -72605,7 +72649,7 @@ function BI() {
   display: flex;
 }
 
-:host [part="header"] {
+:host slot[name="header"] {
   --empty-state-header-font-family: var(--joy-typography-body1-font-family);
   --empty-state-header-font-size: var(--joy-typography-body1-font-size);
   --empty-state-header-font-line-height: var(--joy-typography-body1-line-height);
@@ -72615,7 +72659,7 @@ function BI() {
   --empty-state-header-font-text-transform: var(--joy-typography-body1-text-transform);
 }
 
-:host [part="content"] {
+:host slot[name="content"] {
   --empty-state-content-font-family: var(--joy-typography-body2-font-family);
   --empty-state-content-font-size: var(--joy-typography-body2-font-size);
   --empty-state-content-font-line-height: var(--joy-typography-body2-line-height);
@@ -72712,7 +72756,7 @@ function VI() {
   --icon-foreground-color: var(--empty-state-foreground-color);
 }
 
-:host [part="header"] {
+:host slot[name="header"] {
   font-family: var(--empty-state-header-font-family);
   font-size: var(--empty-state-header-font-size);
   line-height: var(--empty-state-header-font-line-height);
@@ -72723,7 +72767,17 @@ function VI() {
   text-transform: var(--empty-state-header-font-text-transform);
 }
 
-:host [part="content"] {
+:host slot[name="header"] mosaik-text {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  font-weight: inherit;
+  letter-spacing: inherit;
+  text-decoration: inherit;
+  text-transform: inherit;
+}
+
+:host slot[name="content"] {
   font-family: var(--empty-state-content-font-family);
   font-size: var(--empty-state-content-font-size);
   line-height: var(--empty-state-content-font-line-height);
@@ -72734,6 +72788,16 @@ function VI() {
   text-transform: var(--empty-state-content-font-text-transform);
 }
 
+:host slot[name="content"] mosaik-text {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  font-weight: inherit;
+  letter-spacing: inherit;
+  text-decoration: inherit;
+  text-transform: inherit;
+}
+
 :host [part="root"] {
   flex-direction: column;
   align-items: center;
@@ -72747,7 +72811,7 @@ function VI() {
   display: flex;
 }
 
-:host [part="header"] {
+:host slot[name="header"] {
   --empty-state-header-font-family: var(--memphis-typography-body1-font-family);
   --empty-state-header-font-size: var(--memphis-typography-body1-font-size);
   --empty-state-header-font-line-height: var(--memphis-typography-body1-line-height);
@@ -72757,7 +72821,7 @@ function VI() {
   --empty-state-header-font-text-transform: var(--memphis-typography-body1-text-transform);
 }
 
-:host [part="content"] {
+:host slot[name="content"] {
   --empty-state-content-font-family: var(--memphis-typography-body2-font-family);
   --empty-state-content-font-size: var(--memphis-typography-body2-font-size);
   --empty-state-content-font-line-height: var(--memphis-typography-body2-line-height);
@@ -72778,11 +72842,12 @@ var HI = function(e, t, n, r) {
 	return i > 3 && a && Object.defineProperty(t, n, a), a;
 }, UI = function(e, t) {
 	if (typeof Reflect == "object" && typeof Reflect.metadata == "function") return Reflect.metadata(e, t);
-}, WI = class extends F(LI) {
+}, WI = class extends F(Y(LI)) {
 	_header;
 	_icon;
+	_iconSize;
 	constructor() {
-		super(), this._icon = "", this._header = "";
+		super(), this._icon = "", this._header = "", this._iconSize = null;
 	}
 	static get is() {
 		return "mosaik-empty-state";
@@ -72793,6 +72858,12 @@ var HI = function(e, t, n, r) {
 	set icon(e) {
 		this._icon !== e && (this._icon = e);
 	}
+	get iconSize() {
+		return this._iconSize;
+	}
+	set iconSize(e) {
+		this._iconSize !== e && (this._iconSize = e, this.requestUpdate("iconSize"));
+	}
 	get header() {
 		return this._header;
 	}
@@ -72805,6 +72876,10 @@ HI([
 	UI("design:type", String),
 	UI("design:paramtypes", [String])
 ], WI.prototype, "icon", null), HI([
+	A({ type: G }),
+	UI("design:type", Object),
+	UI("design:paramtypes", [Object])
+], WI.prototype, "iconSize", null), HI([
 	A({ type: String }),
 	UI("design:type", String),
 	UI("design:paramtypes", [String])
@@ -216589,61 +216664,86 @@ function eTe(e) {
 			case "error": return "danger";
 			default: return "neutral";
 		}
-	};
-	return V`
-        <div part="header"
-             class="${Hb({ [`is-${e.orientation}`]: !0 })}">
-            ${Yb(e.items, (e) => e, (r, i) => V`
-            <div part="step-container"
-                 class="${Hb({
+	}, r = (r, i) => V`
+        <div part="step-container"
+             class="${Hb({
 		"is-active": r.isSelected,
 		"is-completed": r.state === "completed",
 		"is-error": r.state === "error"
 	})}">
-                <button part="step"
-                        class="${Hb({
+            <button part="step"
+                    class="${Hb({
 		"is-active": r.isSelected,
 		"is-completed": r.state === "completed",
 		"is-error": r.state === "error"
 	})}"
-                        type="button"
-                        role="tab"
-                        aria-selected="${r.isSelected}"
-                        aria-posinset="${i + 1}"
-                        aria-setsize="${e.items.length}"
-                        ?disabled="${r.disabled || e.disabled}"
-                        @click="${() => e.onStepInvoked(r)}">
-                    <span part="step-icon"
-                          aria-hidden="true">
-                        <mosaik-pip part="step-state"
-                                    .icon="${r.icon ? r.icon : t(r.state)}"
-                                    .text="${String(i + 1)}"
-                                    .variant="${n(r.state)}"
-                                    .appearance="${"plain"}"></mosaik-pip>
-                    </span>
-                    <span part="step-text">
-                        <mosaik-text part="step-header"
-                                     .text="${r.header || r.displayText || ""}"></mosaik-text>
-                        ${U(r.description.trim(), () => V`
-                        <mosaik-text part="step-description"
-                                     .text="${r.description}"></mosaik-text>
-                        `)}
-                        ${U(r.hint.trim(), () => V`
-                        <mosaik-text part="step-optional"
-                                     .text="${r.hint}"></mosaik-text>
-                        `)}
-                    </span>
-                </button>
+                    type="button"
+                    role="tab"
+                    aria-selected="${r.isSelected}"
+                    aria-posinset="${i + 1}"
+                    aria-setsize="${e.items.length}"
+                    ?disabled="${r.disabled || e.disabled}"
+                    @click="${() => e.onStepInvoked(r)}">
+                <span part="step-icon"
+                      aria-hidden="true">
+                    <mosaik-pip part="step-state"
+                                .icon="${r.icon ? r.icon : t(r.state)}"
+                                .text="${String(i + 1)}"
+                                .variant="${n(r.state)}"
+                                .appearance="${"plain"}"></mosaik-pip>
+                </span>
+                <span part="step-text">
+                    <mosaik-text part="step-header"
+                                 .text="${r.header || r.displayText || ""}"></mosaik-text>
+                    ${U(r.description.trim(), () => V`
+                    <mosaik-text part="step-description"
+                                 .text="${r.description}"></mosaik-text>
+                    `)}
+                    ${U(r.hint.trim(), () => V`
+                    <mosaik-text part="step-optional"
+                                 .text="${r.hint}"></mosaik-text>
+                    `)}
+                </span>
+            </button>
+            ${U(e.orientation === K.Horizontal && i < e.items.length - 1, () => V`
+            <div part="connector" class="${Hb({ "is-completed": r.state === "completed" })}"></div>
+            `)}
+            ${U(e.orientation === K.Vertical, () => V`
+            <div part="step-body"
+                 class="${Hb({
+		"is-active": r.isSelected,
+		"is-completed": r.state === "completed",
+		"is-last": i === e.items.length - 1
+	})}">
                 ${U(i < e.items.length - 1, () => V`
                 <div part="connector" class="${Hb({ "is-completed": r.state === "completed" })}"></div>
                 `)}
+                <div part="content">
+                    <slot .name="${`step-${i}`}"
+                          @slotchange="${() => e.onSlotChange()}"></slot>
+                </div>
             </div>
             `)}
         </div>
+    `;
+	return V`
+        ${U(e.orientation === K.Vertical, () => V`
+        <slot name="steps"
+              style="display:none"
+              @slotchange="${() => e.onSlotChange()}"></slot>
+        `)}
+        <div part="header"
+             class="${Hb({ [`is-${e.orientation}`]: !0 })}">
+            ${Yb(e.items, (e) => e, (e, t) => V`
+            ${r(e, t)}
+            `)}
+        </div>
+        ${U(e.orientation === K.Horizontal, () => V`
         <div part="content">
             <slot name="steps"
                   @slotchange="${() => e.onSlotChange()}"></slot>
         </div>
+        `)}
         <div part="footer"
              ?hidden="${!e.hasSlotContent("footer")}">
             <slot name="footer"
@@ -217195,19 +217295,46 @@ function aTe() {
 
 :host [part="header"].is-vertical {
   flex-direction: column;
+  gap: 0;
 }
 
 :host [part="header"].is-vertical [part="step-container"] {
   flex-direction: column;
-  align-items: flex-start;
+  flex: none;
+  align-items: stretch;
+  gap: 0;
+  width: 100%;
+}
+
+:host [part="header"].is-vertical [part="step-body"] {
+  grid-template-columns: var(--stepper-icon-size) minmax(0, 1fr);
+  -moz-column-gap: var(--stepper-gap);
+  column-gap: var(--stepper-gap);
+  min-height: var(--stepper-vertical-connector-length);
+  width: 100%;
+  display: grid;
 }
 
-:host [part="header"].is-vertical [part="connector"] {
+:host [part="header"].is-vertical [part="step-body"] [part="content"] {
+  padding-bottom: var(--stepper-content-gap);
+  grid-column: 2;
+  min-width: 0;
+  margin-top: 0;
+  display: none;
+}
+
+:host [part="header"].is-vertical [part="step-body"].is-active [part="content"] {
+  display: block;
+}
+
+:host [part="header"].is-vertical [part="step-body"] [part="connector"] {
   min-width: unset;
   width: var(--stepper-connector-size);
-  height: var(--stepper-vertical-connector-length);
+  height: auto;
   min-height: 48px;
   margin: var(--stepper-vertical-connector-margin) 0;
+  grid-column: 1;
+  place-self: stretch center;
 }
 
 :host [part="step-container"] {
@@ -217268,7 +217395,7 @@ function aTe() {
   flex: 1 1 0;
 }
 
-:host [part="content"], :host [part="footer"] {
+:host > [part="content"], :host > [part="footer"] {
   margin-top: var(--stepper-content-gap);
 }
 
@@ -217379,19 +217506,46 @@ function oTe() {
 
 :host [part="header"].is-vertical {
   flex-direction: column;
+  gap: 0;
 }
 
 :host [part="header"].is-vertical [part="step-container"] {
   flex-direction: column;
-  align-items: flex-start;
+  flex: none;
+  align-items: stretch;
+  gap: 0;
+  width: 100%;
+}
+
+:host [part="header"].is-vertical [part="step-body"] {
+  grid-template-columns: var(--stepper-icon-size) minmax(0, 1fr);
+  -moz-column-gap: var(--stepper-gap);
+  column-gap: var(--stepper-gap);
+  min-height: var(--stepper-vertical-connector-length);
+  width: 100%;
+  display: grid;
 }
 
-:host [part="header"].is-vertical [part="connector"] {
+:host [part="header"].is-vertical [part="step-body"] [part="content"] {
+  padding-bottom: var(--stepper-content-gap);
+  grid-column: 2;
+  min-width: 0;
+  margin-top: 0;
+  display: none;
+}
+
+:host [part="header"].is-vertical [part="step-body"].is-active [part="content"] {
+  display: block;
+}
+
+:host [part="header"].is-vertical [part="step-body"] [part="connector"] {
   min-width: unset;
   width: var(--stepper-connector-size);
-  height: var(--stepper-vertical-connector-length);
+  height: auto;
   min-height: 48px;
   margin: var(--stepper-vertical-connector-margin) 0;
+  grid-column: 1;
+  place-self: stretch center;
 }
 
 :host [part="step-container"] {
@@ -217452,7 +217606,7 @@ function oTe() {
   flex: 1 1 0;
 }
 
-:host [part="content"], :host [part="footer"] {
+:host > [part="content"], :host > [part="footer"] {
   margin-top: var(--stepper-content-gap);
 }
 
@@ -217472,8 +217626,8 @@ function oTe() {
   outline-color: var(--joy-color-primary-500);
 }
 
-:host [part="step-container"] [part="step"]:hover:not([disabled]:not([disabled="false"]:not([aria-selected]))) [part="state-index"], :host [part="step-container"] [part="step"]:hover:not([disabled]:not([disabled="false"]:not([aria-selected]))) ::slotted(mosaik-icon) {
-  color: var(--joy-color-primary-500);
+:host [part="step-container"] [part="step"]:hover:not([disabled]:not([disabled="false"]:not([aria-selected]))) [part="step-icon"] [part="step-state"], :host [part="step-container"] [part="step"]:hover:not([disabled]:not([disabled="false"]:not([aria-selected]))) ::slotted(mosaik-icon) {
+  background: var(--joy-color-primary-500);
 }
 
 :host [part="step-container"] [part="step"]:hover:not([disabled]:not([disabled="false"]:not([aria-selected]))) [part="step-text"], :host [part="step-container"] [part="step"]:hover:not([disabled]:not([disabled="false"]:not([aria-selected]))) ::slotted(mosaik-text) {
@@ -217481,22 +217635,22 @@ function oTe() {
   font-weight: 600;
 }
 
-:host [part="step-container"] [part="step"] [part="step-icon"] {
+:host [part="step-container"] [part="step"] [part="step-icon"] [part="step-state"] {
   color: var(--joy-scheme-foreground);
   background-color: var(--joy-scheme-highlight);
 }
 
-:host [part="step-container"] [part="step"].is-active [part="step-icon"] {
+:host [part="step-container"] [part="step"].is-active [part="step-icon"] [part="step-state"] {
   color: var(--joy-color-primary-0);
   background-color: var(--joy-color-primary-500);
 }
 
-:host [part="step-container"] [part="step"].is-completed [part="step-icon"] {
+:host [part="step-container"] [part="step"].is-completed [part="step-icon"] [part="step-state"] {
   color: var(--joy-color-success-0);
   background-color: var(--joy-color-success-500);
 }
 
-:host [part="step-container"] [part="step"].is-error [part="step-icon"] {
+:host [part="step-container"] [part="step"].is-error [part="step-icon"] [part="step-state"] {
   color: var(--joy-color-danger-0);
   background-color: var(--joy-color-danger-500);
 }
@@ -217646,19 +217800,46 @@ function sTe() {
 
 :host [part="header"].is-vertical {
   flex-direction: column;
+  gap: 0;
 }
 
 :host [part="header"].is-vertical [part="step-container"] {
   flex-direction: column;
-  align-items: flex-start;
+  flex: none;
+  align-items: stretch;
+  gap: 0;
+  width: 100%;
+}
+
+:host [part="header"].is-vertical [part="step-body"] {
+  grid-template-columns: var(--stepper-icon-size) minmax(0, 1fr);
+  -moz-column-gap: var(--stepper-gap);
+  column-gap: var(--stepper-gap);
+  min-height: var(--stepper-vertical-connector-length);
+  width: 100%;
+  display: grid;
+}
+
+:host [part="header"].is-vertical [part="step-body"] [part="content"] {
+  padding-bottom: var(--stepper-content-gap);
+  grid-column: 2;
+  min-width: 0;
+  margin-top: 0;
+  display: none;
+}
+
+:host [part="header"].is-vertical [part="step-body"].is-active [part="content"] {
+  display: block;
 }
 
-:host [part="header"].is-vertical [part="connector"] {
+:host [part="header"].is-vertical [part="step-body"] [part="connector"] {
   min-width: unset;
   width: var(--stepper-connector-size);
-  height: var(--stepper-vertical-connector-length);
+  height: auto;
   min-height: 48px;
   margin: var(--stepper-vertical-connector-margin) 0;
+  grid-column: 1;
+  place-self: stretch center;
 }
 
 :host [part="step-container"] {
@@ -217719,7 +217900,7 @@ function sTe() {
   flex: 1 1 0;
 }
 
-:host [part="content"], :host [part="footer"] {
+:host > [part="content"], :host > [part="footer"] {
   margin-top: var(--stepper-content-gap);
 }
 
@@ -217755,7 +217936,7 @@ var X5 = function(e, t, n, r) {
 		return "mosaik-stepper";
 	}
 	get items() {
-		return nS(this.shadowRoot, "steps");
+		return Array.from(this.children).filter((e) => e.tagName.toLowerCase() === Y5.is);
 	}
 	get activeIndex() {
 		return this.items.findIndex((e) => e.isActive);
@@ -217770,17 +217951,20 @@ var X5 = function(e, t, n, r) {
 		return this._activeStepChanged;
 	}
 	onSlotChange() {
-		this.requestUpdate("items"), this.ensureActiveStep();
+		this.syncStepSlots(), this.requestUpdate("items"), this.ensureActiveStep();
 	}
-	ensureActiveStep() {
-		let { items: e } = this;
-		e.length !== 0 && (e.some((e) => e.isActive) || this.select(0));
+	onSlotChanges(e) {
+		super.onSlotChanges(e), this.onSlotChange();
 	}
 	onStepInvoked(e) {
 		if (this.disabled || e.disabled) return;
 		let t = this.items.indexOf(e);
 		t >= 0 && this.select(t);
 	}
+	ensureActiveStep() {
+		let { items: e } = this;
+		e.length !== 0 && (e.some((e) => e.isActive) || this.select(0));
+	}
 	onSelectionChanged(e, t) {
 		if (e === t) return;
 		let n = this.items, r = {
@@ -217804,6 +217988,15 @@ var X5 = function(e, t, n, r) {
 			r.isActive = e === t;
 		}
 	}
+	onOrientationPropertyChanged() {
+		this.syncStepSlots(), this.requestUpdate("items");
+	}
+	syncStepSlots() {
+		this.items.forEach((e, t) => {
+			let n = this.orientation === "vertical" ? `step-${t}` : "steps";
+			e.slot !== n && (e.slot = n);
+		});
+	}
 };
 X5([
 	k({ eventName: "activeStepChanged" }),
@@ -217814,7 +218007,12 @@ X5([
 	Z5("design:type", Function),
 	Z5("design:paramtypes", [Number, Number]),
 	Z5("design:returntype", void 0)
-], Q5.prototype, "onSelectedIndexPropertyChanged", null), Q5 = X5([H({
+], Q5.prototype, "onSelectedIndexPropertyChanged", null), X5([
+	L("orientation"),
+	Z5("design:type", Function),
+	Z5("design:paramtypes", []),
+	Z5("design:returntype", void 0)
+], Q5.prototype, "onOrientationPropertyChanged", null), Q5 = X5([H({
 	selector: "mosaik-stepper",
 	template: eTe,
 	themes: {
@@ -225175,22 +225373,26 @@ function yEe(e) {
                               .radius="${"26px"}"
                               .isIndeterminate="${!0}"></mosaik-progress-ring>
         <div part="root">
-            ${U(e.header, () => V`
-            <mosaik-text part="header"
-                         .readonly="${!0}"
-                         .wrap="${!0}"
-                         .alignment="${Bb.Center}"
-                         .text="${e.header}"
-                         .formatter="${e.formatter}"></mosaik-text>
-            `)}
-            ${U(e.content, () => V`
-            <mosaik-text part="content"
-                         .readonly="${!0}"
-                         .wrap="${!0}"
-                         .alignment="${Bb.Center}"
-                         .text="${e.content}"
-                         .formatter="${e.formatter}"></mosaik-text>
-            `)}
+            <slot name="header">
+                ${U(e.header.trim(), () => V`
+                <mosaik-text part="header"
+                             .readonly="${!0}"
+                             .wrap="${!0}"
+                             .alignment="${Bb.Center}"
+                             .text="${e.header}"
+                             .formatter="${e.formatter}"></mosaik-text>
+                `)}
+            </slot>
+            <slot name="content">
+                ${U(e.content.trim(), () => V`
+                <mosaik-text part="content"
+                             .readonly="${!0}"
+                             .wrap="${!0}"
+                             .alignment="${Bb.Center}"
+                             .text="${e.content}"
+                             .formatter="${e.formatter}"></mosaik-text>
+                `)}
+            </slot>
             <slot></slot>
         </div>
         <div part="actions" ?hidden="${!e.hasSlotContent("actions")}">
@@ -225283,7 +225485,7 @@ function bEe() {
   --icon-foreground-color: var(--busy-state-foreground-color);
 }
 
-:host [part="header"] {
+:host slot[name="header"] {
   font-family: var(--busy-state-header-font-family);
   font-size: var(--busy-state-header-font-size);
   line-height: var(--busy-state-header-font-line-height);
@@ -225294,7 +225496,17 @@ function bEe() {
   text-transform: var(--busy-state-header-font-text-transform);
 }
 
-:host [part="content"] {
+:host slot[name="header"] mosaik-text {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  font-weight: inherit;
+  letter-spacing: inherit;
+  text-decoration: inherit;
+  text-transform: inherit;
+}
+
+:host slot[name="content"] {
   font-family: var(--busy-state-content-font-family);
   font-size: var(--busy-state-content-font-size);
   line-height: var(--busy-state-content-font-line-height);
@@ -225305,6 +225517,16 @@ function bEe() {
   text-transform: var(--busy-state-content-font-text-transform);
 }
 
+:host slot[name="content"] mosaik-text {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  font-weight: inherit;
+  letter-spacing: inherit;
+  text-decoration: inherit;
+  text-transform: inherit;
+}
+
 :host [part="root"] {
   flex-direction: column;
   align-items: center;
@@ -225405,7 +225627,7 @@ function xEe() {
   --icon-foreground-color: var(--busy-state-foreground-color);
 }
 
-:host [part="header"] {
+:host slot[name="header"] {
   font-family: var(--busy-state-header-font-family);
   font-size: var(--busy-state-header-font-size);
   line-height: var(--busy-state-header-font-line-height);
@@ -225416,7 +225638,17 @@ function xEe() {
   text-transform: var(--busy-state-header-font-text-transform);
 }
 
-:host [part="content"] {
+:host slot[name="header"] mosaik-text {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  font-weight: inherit;
+  letter-spacing: inherit;
+  text-decoration: inherit;
+  text-transform: inherit;
+}
+
+:host slot[name="content"] {
   font-family: var(--busy-state-content-font-family);
   font-size: var(--busy-state-content-font-size);
   line-height: var(--busy-state-content-font-line-height);
@@ -225427,6 +225659,16 @@ function xEe() {
   text-transform: var(--busy-state-content-font-text-transform);
 }
 
+:host slot[name="content"] mosaik-text {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  font-weight: inherit;
+  letter-spacing: inherit;
+  text-decoration: inherit;
+  text-transform: inherit;
+}
+
 :host [part="root"] {
   flex-direction: column;
   align-items: center;
@@ -225440,7 +225682,7 @@ function xEe() {
   display: flex;
 }
 
-:host [part="header"] {
+:host slot[name="header"] {
   --busy-state-header-font-family: var(--joy-typography-body1-font-family);
   --busy-state-header-font-size: var(--joy-typography-body1-font-size);
   --busy-state-header-font-line-height: var(--joy-typography-body1-line-height);
@@ -225450,7 +225692,7 @@ function xEe() {
   --busy-state-header-font-text-transform: var(--joy-typography-body1-text-transform);
 }
 
-:host [part="content"] {
+:host slot[name="content"] {
   --busy-state-content-font-family: var(--joy-typography-body2-font-family);
   --busy-state-content-font-size: var(--joy-typography-body2-font-size);
   --busy-state-content-font-line-height: var(--joy-typography-body2-line-height);
@@ -225547,7 +225789,7 @@ function SEe() {
   --icon-foreground-color: var(--busy-state-foreground-color);
 }
 
-:host [part="header"] {
+:host slot[name="header"] {
   font-family: var(--busy-state-header-font-family);
   font-size: var(--busy-state-header-font-size);
   line-height: var(--busy-state-header-font-line-height);
@@ -225558,7 +225800,17 @@ function SEe() {
   text-transform: var(--busy-state-header-font-text-transform);
 }
 
-:host [part="content"] {
+:host slot[name="header"] mosaik-text {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  font-weight: inherit;
+  letter-spacing: inherit;
+  text-decoration: inherit;
+  text-transform: inherit;
+}
+
+:host slot[name="content"] {
   font-family: var(--busy-state-content-font-family);
   font-size: var(--busy-state-content-font-size);
   line-height: var(--busy-state-content-font-line-height);
@@ -225569,6 +225821,16 @@ function SEe() {
   text-transform: var(--busy-state-content-font-text-transform);
 }
 
+:host slot[name="content"] mosaik-text {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  font-weight: inherit;
+  letter-spacing: inherit;
+  text-decoration: inherit;
+  text-transform: inherit;
+}
+
 :host [part="root"] {
   flex-direction: column;
   align-items: center;
@@ -225582,7 +225844,7 @@ function SEe() {
   display: flex;
 }
 
-:host [part="header"] {
+:host slot[name="header"] {
   --busy-state-header-font-family: var(--memphis-typography-body1-font-family);
   --busy-state-header-font-size: var(--memphis-typography-body1-font-size);
   --busy-state-header-font-line-height: var(--memphis-typography-body1-line-height);
@@ -225592,7 +225854,7 @@ function SEe() {
   --busy-state-header-font-text-transform: var(--memphis-typography-body1-text-transform);
 }
 
-:host [part="content"] {
+:host slot[name="content"] {
   --busy-state-content-font-family: var(--memphis-typography-body2-font-family);
   --busy-state-content-font-size: var(--memphis-typography-body2-font-size);
   --busy-state-content-font-line-height: var(--memphis-typography-body2-line-height);
@@ -225613,7 +225875,7 @@ var q7 = function(e, t, n, r) {
 	return i > 3 && a && Object.defineProperty(t, n, a), a;
 }, J7 = function(e, t) {
 	if (typeof Reflect == "object" && typeof Reflect.metadata == "function") return Reflect.metadata(e, t);
-}, Y7 = class extends F(LI) {
+}, Y7 = class extends F(Y(LI)) {
 	_header;
 	_icon;
 	constructor() {
@@ -225662,22 +225924,26 @@ function CEe(e) {
                      .data="${e.icon.trim().length > 0 ? e.icon : X.errorCircle}"
                      .variant="${ib.Danger}"></mosaik-icon>
         <div part="root">
-            ${U(e.header, () => V`
-            <mosaik-text part="header"
-                         .readonly="${!0}"
-                         .wrap="${!0}"
-                         .alignment="${Bb.Center}"
-                         .text="${e.header}"
-                         .formatter="${e.formatter}"></mosaik-text>
-            `)}
-            ${U(e.content, () => V`
-            <mosaik-text part="content"
-                         .readonly="${!0}"
-                         .wrap="${!0}"
-                         .alignment="${Bb.Center}"
-                         .text="${e.content}"
-                         .formatter="${e.formatter}"></mosaik-text>
-            `)}
+            <slot name="header">
+                ${U(e.header.trim(), () => V`
+                <mosaik-text part="header"
+                             .readonly="${!0}"
+                             .wrap="${!0}"
+                             .alignment="${Bb.Center}"
+                             .text="${e.header}"
+                             .formatter="${e.formatter}"></mosaik-text>
+                `)}
+            </slot>
+            <slot name="content">
+                ${U(e.content.trim(), () => V`
+                <mosaik-text part="content"
+                             .readonly="${!0}"
+                             .wrap="${!0}"
+                             .alignment="${Bb.Center}"
+                             .text="${e.content}"
+                             .formatter="${e.formatter}"></mosaik-text>
+                `)}
+            </slot>
             ${U(e.code, () => V`
             <mosaik-text part="code"
                          .readonly="${!0}"
@@ -225773,7 +226039,7 @@ function wEe() {
   overflow: hidden;
 }
 
-:host [part="header"] {
+:host slot[name="header"] {
   font-family: var(--error-state-header-font-family);
   font-size: var(--error-state-header-font-size);
   line-height: var(--error-state-header-font-line-height);
@@ -225784,7 +226050,17 @@ function wEe() {
   text-transform: var(--error-state-header-font-text-transform);
 }
 
-:host [part="content"] {
+:host slot[name="header"] mosaik-text {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  font-weight: inherit;
+  letter-spacing: inherit;
+  text-decoration: inherit;
+  text-transform: inherit;
+}
+
+:host slot[name="content"] {
   font-family: var(--error-state-content-font-family);
   font-size: var(--error-state-content-font-size);
   line-height: var(--error-state-content-font-line-height);
@@ -225795,6 +226071,16 @@ function wEe() {
   text-transform: var(--error-state-content-font-text-transform);
 }
 
+:host slot[name="content"] mosaik-text {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  font-weight: inherit;
+  letter-spacing: inherit;
+  text-decoration: inherit;
+  text-transform: inherit;
+}
+
 :host [part="root"] {
   flex-direction: column;
   align-items: center;
@@ -225889,7 +226175,7 @@ function TEe() {
   overflow: hidden;
 }
 
-:host [part="header"] {
+:host slot[name="header"] {
   font-family: var(--error-state-header-font-family);
   font-size: var(--error-state-header-font-size);
   line-height: var(--error-state-header-font-line-height);
@@ -225900,7 +226186,17 @@ function TEe() {
   text-transform: var(--error-state-header-font-text-transform);
 }
 
-:host [part="content"] {
+:host slot[name="header"] mosaik-text {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  font-weight: inherit;
+  letter-spacing: inherit;
+  text-decoration: inherit;
+  text-transform: inherit;
+}
+
+:host slot[name="content"] {
   font-family: var(--error-state-content-font-family);
   font-size: var(--error-state-content-font-size);
   line-height: var(--error-state-content-font-line-height);
@@ -225911,6 +226207,16 @@ function TEe() {
   text-transform: var(--error-state-content-font-text-transform);
 }
 
+:host slot[name="content"] mosaik-text {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  font-weight: inherit;
+  letter-spacing: inherit;
+  text-decoration: inherit;
+  text-transform: inherit;
+}
+
 :host [part="root"] {
   flex-direction: column;
   align-items: center;
@@ -225924,7 +226230,7 @@ function TEe() {
   display: flex;
 }
 
-:host [part="header"] {
+:host slot[name="header"] {
   --error-state-header-font-family: var(--joy-typography-body1-font-family);
   --error-state-header-font-size: var(--joy-typography-body1-font-size);
   --error-state-header-font-line-height: var(--joy-typography-body1-line-height);
@@ -225934,7 +226240,7 @@ function TEe() {
   --error-state-header-font-text-transform: var(--joy-typography-body1-text-transform);
 }
 
-:host [part="content"] {
+:host slot[name="content"] {
   --error-state-content-font-family: var(--joy-typography-body2-font-family);
   --error-state-content-font-size: var(--joy-typography-body2-font-size);
   --error-state-content-font-line-height: var(--joy-typography-body2-line-height);
@@ -226026,7 +226332,7 @@ function EEe() {
   overflow: hidden;
 }
 
-:host [part="header"] {
+:host slot[name="header"] {
   font-family: var(--error-state-header-font-family);
   font-size: var(--error-state-header-font-size);
   line-height: var(--error-state-header-font-line-height);
@@ -226037,7 +226343,17 @@ function EEe() {
   text-transform: var(--error-state-header-font-text-transform);
 }
 
-:host [part="content"] {
+:host slot[name="header"] mosaik-text {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  font-weight: inherit;
+  letter-spacing: inherit;
+  text-decoration: inherit;
+  text-transform: inherit;
+}
+
+:host slot[name="content"] {
   font-family: var(--error-state-content-font-family);
   font-size: var(--error-state-content-font-size);
   line-height: var(--error-state-content-font-line-height);
@@ -226048,6 +226364,16 @@ function EEe() {
   text-transform: var(--error-state-content-font-text-transform);
 }
 
+:host slot[name="content"] mosaik-text {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  font-weight: inherit;
+  letter-spacing: inherit;
+  text-decoration: inherit;
+  text-transform: inherit;
+}
+
 :host [part="root"] {
   flex-direction: column;
   align-items: center;
@@ -226061,7 +226387,7 @@ function EEe() {
   display: flex;
 }
 
-:host [part="header"] {
+:host slot[name="header"] {
   --error-state-header-font-family: var(--memphis-typography-body1-font-family);
   --error-state-header-font-size: var(--memphis-typography-body1-font-size);
   --error-state-header-font-line-height: var(--memphis-typography-body1-line-height);
@@ -226071,7 +226397,7 @@ function EEe() {
   --error-state-header-font-text-transform: var(--memphis-typography-body1-text-transform);
 }
 
-:host [part="content"] {
+:host slot[name="content"] {
   --error-state-content-font-family: var(--memphis-typography-body2-font-family);
   --error-state-content-font-size: var(--memphis-typography-body2-font-size);
   --error-state-content-font-line-height: var(--memphis-typography-body2-line-height);
@@ -226092,7 +226418,7 @@ var X7 = function(e, t, n, r) {
 	return i > 3 && a && Object.defineProperty(t, n, a), a;
 }, Z7 = function(e, t) {
 	if (typeof Reflect == "object" && typeof Reflect.metadata == "function") return Reflect.metadata(e, t);
-}, Q7 = class extends F(LI) {
+}, Q7 = class extends F(Y(LI)) {
 	_icon;
 	_header;
 	_code;
@@ -226152,22 +226478,26 @@ function DEe(e) {
                      .data="${e.icon.trim().length > 0 ? e.icon : X.successCircle}"
                      .variant="${ib.Success}"></mosaik-icon>
         <div part="root">
-            ${U(e.header, () => V`
-            <mosaik-text part="header"
-                         .readonly="${!0}"
-                         .wrap="${!0}"
-                         .alignment="${Bb.Center}"
-                         .text="${e.header}"
-                         .formatter="${e.formatter}"></mosaik-text>
-            `)}
-            ${U(e.content, () => V`
-            <mosaik-text part="content"
-                         .readonly="${!0}"
-                         .wrap="${!0}"
-                         .alignment="${Bb.Center}"
-                         .text="${e.content}"
-                         .formatter="${e.formatter}"></mosaik-text>
-            `)}
+            <slot name="header">
+                ${U(e.header.trim(), () => V`
+                <mosaik-text part="header"
+                             .readonly="${!0}"
+                             .wrap="${!0}"
+                             .alignment="${Bb.Center}"
+                             .text="${e.header}"
+                             .formatter="${e.formatter}"></mosaik-text>
+                `)}
+            </slot>
+            <slot name="content">
+                ${U(e.content.trim(), () => V`
+                <mosaik-text part="content"
+                             .readonly="${!0}"
+                             .wrap="${!0}"
+                             .alignment="${Bb.Center}"
+                             .text="${e.content}"
+                             .formatter="${e.formatter}"></mosaik-text>
+                `)}
+            </slot>
             <slot></slot>
         </div>
         <div part="actions" ?hidden="${!e.hasSlotContent("actions")}">
@@ -226255,7 +226585,7 @@ function OEe() {
   overflow: hidden;
 }
 
-:host [part="header"] {
+:host slot[name="header"] {
   font-family: var(--success-state-header-font-family);
   font-size: var(--success-state-header-font-size);
   line-height: var(--success-state-header-font-line-height);
@@ -226266,7 +226596,17 @@ function OEe() {
   text-transform: var(--success-state-header-font-text-transform);
 }
 
-:host [part="content"] {
+:host slot[name="header"] mosaik-text {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  font-weight: inherit;
+  letter-spacing: inherit;
+  text-decoration: inherit;
+  text-transform: inherit;
+}
+
+:host slot[name="content"] {
   font-family: var(--success-state-content-font-family);
   font-size: var(--success-state-content-font-size);
   line-height: var(--success-state-content-font-line-height);
@@ -226277,6 +226617,16 @@ function OEe() {
   text-transform: var(--success-state-content-font-text-transform);
 }
 
+:host slot[name="content"] mosaik-text {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  font-weight: inherit;
+  letter-spacing: inherit;
+  text-decoration: inherit;
+  text-transform: inherit;
+}
+
 :host [part="root"] {
   flex-direction: column;
   align-items: center;
@@ -226371,7 +226721,7 @@ function kEe() {
   overflow: hidden;
 }
 
-:host [part="header"] {
+:host slot[name="header"] {
   font-family: var(--success-state-header-font-family);
   font-size: var(--success-state-header-font-size);
   line-height: var(--success-state-header-font-line-height);
@@ -226382,7 +226732,17 @@ function kEe() {
   text-transform: var(--success-state-header-font-text-transform);
 }
 
-:host [part="content"] {
+:host slot[name="header"] mosaik-text {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  font-weight: inherit;
+  letter-spacing: inherit;
+  text-decoration: inherit;
+  text-transform: inherit;
+}
+
+:host slot[name="content"] {
   font-family: var(--success-state-content-font-family);
   font-size: var(--success-state-content-font-size);
   line-height: var(--success-state-content-font-line-height);
@@ -226393,6 +226753,16 @@ function kEe() {
   text-transform: var(--success-state-content-font-text-transform);
 }
 
+:host slot[name="content"] mosaik-text {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  font-weight: inherit;
+  letter-spacing: inherit;
+  text-decoration: inherit;
+  text-transform: inherit;
+}
+
 :host [part="root"] {
   flex-direction: column;
   align-items: center;
@@ -226406,7 +226776,7 @@ function kEe() {
   display: flex;
 }
 
-:host [part="header"] {
+:host slot[name="header"] {
   --success-state-header-font-family: var(--joy-typography-body1-font-family);
   --success-state-header-font-size: var(--joy-typography-body1-font-size);
   --success-state-header-font-line-height: var(--joy-typography-body1-line-height);
@@ -226416,7 +226786,7 @@ function kEe() {
   --success-state-header-font-text-transform: var(--joy-typography-body1-text-transform);
 }
 
-:host [part="content"] {
+:host slot[name="content"] {
   --success-state-content-font-family: var(--joy-typography-body2-font-family);
   --success-state-content-font-size: var(--joy-typography-body2-font-size);
   --success-state-content-font-line-height: var(--joy-typography-body2-line-height);
@@ -226508,7 +226878,7 @@ function AEe() {
   overflow: hidden;
 }
 
-:host [part="header"] {
+:host slot[name="header"] {
   font-family: var(--success-state-header-font-family);
   font-size: var(--success-state-header-font-size);
   line-height: var(--success-state-header-font-line-height);
@@ -226519,7 +226889,17 @@ function AEe() {
   text-transform: var(--success-state-header-font-text-transform);
 }
 
-:host [part="content"] {
+:host slot[name="header"] mosaik-text {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  font-weight: inherit;
+  letter-spacing: inherit;
+  text-decoration: inherit;
+  text-transform: inherit;
+}
+
+:host slot[name="content"] {
   font-family: var(--success-state-content-font-family);
   font-size: var(--success-state-content-font-size);
   line-height: var(--success-state-content-font-line-height);
@@ -226530,6 +226910,16 @@ function AEe() {
   text-transform: var(--success-state-content-font-text-transform);
 }
 
+:host slot[name="content"] mosaik-text {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  font-weight: inherit;
+  letter-spacing: inherit;
+  text-decoration: inherit;
+  text-transform: inherit;
+}
+
 :host [part="root"] {
   flex-direction: column;
   align-items: center;
@@ -226543,7 +226933,7 @@ function AEe() {
   display: flex;
 }
 
-:host [part="header"] {
+:host slot[name="header"] {
   --success-state-header-font-family: var(--memphis-typography-body1-font-family);
   --success-state-header-font-size: var(--memphis-typography-body1-font-size);
   --success-state-header-font-line-height: var(--memphis-typography-body1-line-height);
@@ -226553,7 +226943,7 @@ function AEe() {
   --success-state-header-font-text-transform: var(--memphis-typography-body1-text-transform);
 }
 
-:host [part="content"] {
+:host slot[name="content"] {
   --success-state-content-font-family: var(--memphis-typography-body2-font-family);
   --success-state-content-font-size: var(--memphis-typography-body2-font-size);
   --success-state-content-font-line-height: var(--memphis-typography-body2-line-height);
@@ -226574,7 +226964,7 @@ var $7 = function(e, t, n, r) {
 	return i > 3 && a && Object.defineProperty(t, n, a), a;
 }, e9 = function(e, t) {
 	if (typeof Reflect == "object" && typeof Reflect.metadata == "function") return Reflect.metadata(e, t);
-}, t9 = class extends F(LI) {
+}, t9 = class extends F(Y(LI)) {
 	_icon;
 	_header;
 	constructor() {

package/package.json

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