@breadstone/mosaik-elements-foundation 0.1.8 → 0.1.10

package/Controls/Components/States/Success/SuccessStateElement.js

@@ -8,6 +8,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
+import { Slottable } from '../../../Behaviors/Slottable';
 import { Themeable } from '../../../Behaviors/Themeable';
 import { Component } from '../../../Decorators/ComponentDecorator';
 import { Property } from '../../../Decorators/PropertyDecorator';
@@ -34,8 +35,10 @@ import { successStateElementMemphisStyle } from './Themes/SuccessStateElement.Me
  * @element mosaik-success-state
  * @category States
  *
- * @slot - Default content area for additional success information or custom content
+ * @slot  - The default slot.
  * @slot actions - Action buttons for next steps or related operations after success
+ * @slot - Default content area for additional success information or custom content
+ * @slot header - The header slot.
  *
  * @csspart actions - The container for action slot elements
  * @csspart content - The content text container for detailed success information
@@ -50,7 +53,6 @@ import { successStateElementMemphisStyle } from './Themes/SuccessStateElement.Me
  * @cssprop {String} --success-state-font-text-decoration - The state font text decoration CSS custom property.
  * @cssprop {String} --success-state-font-text-transform - The state font text transform CSS custom property.
  * @cssprop {String} --success-state-font-weight - The state font weight CSS custom property.
- * @cssprop {String} --success-state-foreground-color - The text color for success state content
  * @cssprop {String} --success-state-gap - The spacing between icon, text, and action elements
  * @cssprop {String} --success-state-header-font-family - The font family for header text
  * @cssprop {String} --success-state-header-font-letter-spacing - The letter spacing for header text
@@ -102,7 +104,7 @@ import { successStateElementMemphisStyle } from './Themes/SuccessStateElement.Me
  *
  * @public
  */
-let SuccessStateElement = class SuccessStateElement extends Themeable(StateBaseElement) {
+let SuccessStateElement = class SuccessStateElement extends Themeable(Slottable(StateBaseElement)) {
     // #region Fields
     _icon;
     _header;

package/Controls/Components/States/Success/SuccessStateElement.js.map

@@ -1 +1 @@
-{"version":3,"file":"SuccessStateElement.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/States/Success/SuccessStateElement.ts"],"names":[],"mappings":"AAAA,kBAAkB;;;;;;;;;;AAElB,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,wCAAwC,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,uCAAuC,CAAC;AACjE,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAEjE,OAAO,EAAE,2BAA2B,EAAE,MAAM,+BAA+B,CAAC;AAC5E,OAAO,EAAE,oCAAoC,EAAE,MAAM,2CAA2C,CAAC;AACjG,OAAO,EAAE,2BAA2B,EAAE,MAAM,kCAAkC,CAAC;AAC/E,OAAO,EAAE,+BAA+B,EAAE,MAAM,sCAAsC,CAAC;AAEvF,aAAa;AAEb;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkFG;AAcI,IAAM,mBAAmB,GAAzB,MAAM,mBACT,SAAQ,SAAS,CAAC,gBAAgB,CAAC;IAGnC,iBAAiB;IAET,KAAK,CAAS;IACd,OAAO,CAAS;IAExB,aAAa;IAEb,eAAe;IAEf;;;;OAIG;IACH;QACI,KAAK,EAAE,CAAC;QAER,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;QAChB,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;IACtB,CAAC;IAED,aAAa;IAEb,qBAAqB;IAErB;;;;;;MAME;IACK,MAAM,KAAK,EAAE;QAChB,OAAO,sBAAsB,CAAC;IAClC,CAAC;IAED;;;;;;OAMG;IACH,IACW,IAAI;QACX,OAAO,IAAI,CAAC,KAAK,CAAC;IACtB,CAAC;IAED,IAAW,IAAI,CAAC,KAAa;QACzB,IAAI,IAAI,CAAC,KAAK,KAAK,KAAK,EAAE,CAAC;YACvB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACvB,CAAC;IACL,CAAC;IAED;;;;;;OAMG;IACH,IACW,MAAM;QACb,OAAO,IAAI,CAAC,OAAO,CAAC;IACxB,CAAC;IAED,IAAW,MAAM,CAAC,KAAa;QAC3B,IAAI,IAAI,CAAC,OAAO,KAAK,KAAK,EAAE,CAAC;YACzB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACzB,CAAC;IACL,CAAC;CAIJ,CAAA;AA/BG;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;;+CAG1B;AAeD;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;;iDAG1B;AApEQ,mBAAmB;IAb/B,SAAS,CAAC;QACP,QAAQ,EAAE,sBAAsB;QAChC,QAAQ,EAAE,2BAA2B;QACrC,MAAM,EAAE;YACJ,GAAG,EAAE,2BAA2B;YAChC,OAAO,EAAE,+BAA+B;YACxC,YAAY,EAAE,oCAAoC;SACrD;QACD,OAAO,EAAE;YACL,WAAW;YACX,WAAW;SACd;KACJ,CAAC;;GACW,mBAAmB,CA8E/B"}
+{"version":3,"file":"SuccessStateElement.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/States/Success/SuccessStateElement.ts"],"names":[],"mappings":"AAAA,kBAAkB;;;;;;;;;;AAElB,OAAO,EAAc,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACrE,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,wCAAwC,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,uCAAuC,CAAC;AACjE,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAEjE,OAAO,EAAE,2BAA2B,EAAE,MAAM,+BAA+B,CAAC;AAC5E,OAAO,EAAE,oCAAoC,EAAE,MAAM,2CAA2C,CAAC;AACjG,OAAO,EAAE,2BAA2B,EAAE,MAAM,kCAAkC,CAAC;AAC/E,OAAO,EAAE,+BAA+B,EAAE,MAAM,sCAAsC,CAAC;AAEvF,aAAa;AAEb;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmFG;AAcI,IAAM,mBAAmB,GAAzB,MAAM,mBACT,SAAQ,SAAS,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;IAG9C,iBAAiB;IAET,KAAK,CAAS;IACd,OAAO,CAAS;IAExB,aAAa;IAEb,eAAe;IAEf;;;;OAIG;IACH;QACI,KAAK,EAAE,CAAC;QAER,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;QAChB,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;IACtB,CAAC;IAED,aAAa;IAEb,qBAAqB;IAErB;;;;;;MAME;IACK,MAAM,KAAK,EAAE;QAChB,OAAO,sBAAsB,CAAC;IAClC,CAAC;IAED;;;;;;OAMG;IACH,IACW,IAAI;QACX,OAAO,IAAI,CAAC,KAAK,CAAC;IACtB,CAAC;IAED,IAAW,IAAI,CAAC,KAAa;QACzB,IAAI,IAAI,CAAC,KAAK,KAAK,KAAK,EAAE,CAAC;YACvB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACvB,CAAC;IACL,CAAC;IAED;;;;;;OAMG;IACH,IACW,MAAM;QACb,OAAO,IAAI,CAAC,OAAO,CAAC;IACxB,CAAC;IAED,IAAW,MAAM,CAAC,KAAa;QAC3B,IAAI,IAAI,CAAC,OAAO,KAAK,KAAK,EAAE,CAAC;YACzB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACzB,CAAC;IACL,CAAC;CAIJ,CAAA;AA/BG;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;;+CAG1B;AAeD;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;;iDAG1B;AApEQ,mBAAmB;IAb/B,SAAS,CAAC;QACP,QAAQ,EAAE,sBAAsB;QAChC,QAAQ,EAAE,2BAA2B;QACrC,MAAM,EAAE;YACJ,GAAG,EAAE,2BAA2B;YAChC,OAAO,EAAE,+BAA+B;YACxC,YAAY,EAAE,oCAAoC;SACrD;QACD,OAAO,EAAE;YACL,WAAW;YACX,WAAW;SACd;KACJ,CAAC;;GACW,mBAAmB,CA8E/B"}

package/Controls/Components/States/Success/SuccessStateElementTemplate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SuccessStateElementTemplate.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/States/Success/SuccessStateElementTemplate.ts"],"names":[],"mappings":"AAEA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAMjE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAIjE;;;;GAIG;AACH,wBAAgB,2BAA2B,CAAC,CAAC,SAAS,mBAAmB,EAAE,CAAC,EAAE,CAAC,GAAG,cAAc,CA6B/F"}
+{"version":3,"file":"SuccessStateElementTemplate.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/States/Success/SuccessStateElementTemplate.ts"],"names":[],"mappings":"AAEA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAMjE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAIjE;;;;GAIG;AACH,wBAAgB,2BAA2B,CAAC,CAAC,SAAS,mBAAmB,EAAE,CAAC,EAAE,CAAC,GAAG,cAAc,CAiC/F"}

package/Controls/Components/States/Success/SuccessStateElementTemplate.js

@@ -18,22 +18,26 @@ export function successStateElementTemplate(e) {
                      .data="${e.icon.trim().length > 0 ? e.icon : Icons.successCircle}"
                      .variant="${Variant.Success}"></mosaik-icon>
         <div part="root">
-            ${when(e.header, () => html `
-            <mosaik-text part="header"
-                         .readonly="${true}"
-                         .wrap="${true}"
-                         .alignment="${TextAlignment.Center}"
-                         .text="${e.header}"
-                         .formatter="${e.formatter}"></mosaik-text>
-            `)}
-            ${when(e.content, () => html `
-            <mosaik-text part="content"
-                         .readonly="${true}"
-                         .wrap="${true}"
-                         .alignment="${TextAlignment.Center}"
-                         .text="${e.content}"
-                         .formatter="${e.formatter}"></mosaik-text>
-            `)}
+            <slot name="header">
+                ${when(e.header.trim(), () => html `
+                <mosaik-text part="header"
+                             .readonly="${true}"
+                             .wrap="${true}"
+                             .alignment="${TextAlignment.Center}"
+                             .text="${e.header}"
+                             .formatter="${e.formatter}"></mosaik-text>
+                `)}
+            </slot>
+            <slot name="content">
+                ${when(e.content.trim(), () => html `
+                <mosaik-text part="content"
+                             .readonly="${true}"
+                             .wrap="${true}"
+                             .alignment="${TextAlignment.Center}"
+                             .text="${e.content}"
+                             .formatter="${e.formatter}"></mosaik-text>
+                `)}
+            </slot>
             <slot></slot>
         </div>
         <div part="actions" ?hidden="${!e.hasSlotContent('actions')}">

package/Controls/Components/States/Success/SuccessStateElementTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"SuccessStateElementTemplate.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/States/Success/SuccessStateElementTemplate.ts"],"names":[],"mappings":"AAAA,kBAAkB;AAElB,OAAO,EAAE,IAAI,EAAuB,MAAM,sBAAsB,CAAC;AACjE,OAAO,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AACpD,OAAO,EAAE,IAAI,EAAE,MAAM,gCAAgC,CAAC;AACtD,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAC3C,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAC7D,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAGjD,aAAa;AAEb;;;;GAIG;AACH,MAAM,UAAU,2BAA2B,CAAgC,CAAI;IAC3E,OAAO,IAAI,CAAA;;8BAEe,IAAI,CAAC,KAAK;8BACV,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,aAAa;iCACpD,OAAO,CAAC,OAAO;;cAElC,IAAI,CAAC,CAAC,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;sCAED,IAAI;kCACR,IAAI;uCACC,aAAa,CAAC,MAAM;kCACzB,CAAC,CAAC,MAAM;uCACH,CAAC,CAAC,SAAS;aACrC,CAAC;cACA,IAAI,CAAC,CAAC,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;sCAEF,IAAI;kCACR,IAAI;uCACC,aAAa,CAAC,MAAM;kCACzB,CAAC,CAAC,OAAO;uCACJ,CAAC,CAAC,SAAS;aACrC,CAAC;;;uCAGyB,CAAC,CAAC,CAAC,cAAc,CAAC,SAAS,CAAC;;;KAG9D,CAAC;AACN,CAAC"}
+{"version":3,"file":"SuccessStateElementTemplate.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/States/Success/SuccessStateElementTemplate.ts"],"names":[],"mappings":"AAAA,kBAAkB;AAElB,OAAO,EAAE,IAAI,EAAuB,MAAM,sBAAsB,CAAC;AACjE,OAAO,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AACpD,OAAO,EAAE,IAAI,EAAE,MAAM,gCAAgC,CAAC;AACtD,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAC3C,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAC7D,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAGjD,aAAa;AAEb;;;;GAIG;AACH,MAAM,UAAU,2BAA2B,CAAgC,CAAI;IAC3E,OAAO,IAAI,CAAA;;8BAEe,IAAI,CAAC,KAAK;8BACV,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,aAAa;iCACpD,OAAO,CAAC,OAAO;;;kBAG9B,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;0CAER,IAAI;sCACR,IAAI;2CACC,aAAa,CAAC,MAAM;sCACzB,CAAC,CAAC,MAAM;2CACH,CAAC,CAAC,SAAS;iBACrC,CAAC;;;kBAGA,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;0CAET,IAAI;sCACR,IAAI;2CACC,aAAa,CAAC,MAAM;sCACzB,CAAC,CAAC,OAAO;2CACJ,CAAC,CAAC,SAAS;iBACrC,CAAC;;;;uCAIqB,CAAC,CAAC,CAAC,cAAc,CAAC,SAAS,CAAC;;;KAG9D,CAAC;AACN,CAAC"}

package/Controls/Components/States/Success/Themes/SuccessStateElement.Cosmopolitan.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SuccessStateElement.Cosmopolitan.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/States/Success/Themes/SuccessStateElement.Cosmopolitan.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,oCAAoC,IAAI,SAAS,CAkHhE"}
+{"version":3,"file":"SuccessStateElement.Cosmopolitan.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/States/Success/Themes/SuccessStateElement.Cosmopolitan.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,oCAAoC,IAAI,SAAS,CAsIhE"}

package/Controls/Components/States/Success/Themes/SuccessStateElement.Cosmopolitan.js

@@ -88,7 +88,7 @@ export function successStateElementCosmopolitanStyle() {
   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);
@@ -99,7 +99,17 @@ export function successStateElementCosmopolitanStyle() {
   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);
@@ -110,6 +120,16 @@ export function successStateElementCosmopolitanStyle() {
   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;

package/Controls/Components/States/Success/Themes/SuccessStateElement.Cosmopolitan.js.map

@@ -1 +1 @@
-{"version":3,"file":"SuccessStateElement.Cosmopolitan.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/States/Success/Themes/SuccessStateElement.Cosmopolitan.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,oCAAoC;IAChD,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAgHT,CAAC;AACN,CAAC"}
+{"version":3,"file":"SuccessStateElement.Cosmopolitan.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/States/Success/Themes/SuccessStateElement.Cosmopolitan.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,oCAAoC;IAChD,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAoIT,CAAC;AACN,CAAC"}

package/Controls/Components/States/Success/Themes/SuccessStateElement.Joy.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SuccessStateElement.Joy.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/States/Success/Themes/SuccessStateElement.Joy.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,2BAA2B,IAAI,SAAS,CAqIvD"}
+{"version":3,"file":"SuccessStateElement.Joy.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/States/Success/Themes/SuccessStateElement.Joy.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,2BAA2B,IAAI,SAAS,CAyJvD"}

package/Controls/Components/States/Success/Themes/SuccessStateElement.Joy.js

@@ -87,7 +87,7 @@ export function successStateElementJoyStyle() {
   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);
@@ -98,7 +98,17 @@ export function successStateElementJoyStyle() {
   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);
@@ -109,6 +119,16 @@ export function successStateElementJoyStyle() {
   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;
@@ -122,7 +142,7 @@ export function successStateElementJoyStyle() {
   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);
@@ -132,7 +152,7 @@ export function successStateElementJoyStyle() {
   --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);

package/Controls/Components/States/Success/Themes/SuccessStateElement.Joy.js.map

@@ -1 +1 @@
-{"version":3,"file":"SuccessStateElement.Joy.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/States/Success/Themes/SuccessStateElement.Joy.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,2BAA2B;IACvC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAmIT,CAAC;AACN,CAAC"}
+{"version":3,"file":"SuccessStateElement.Joy.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/States/Success/Themes/SuccessStateElement.Joy.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,2BAA2B;IACvC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuJT,CAAC;AACN,CAAC"}

package/Controls/Components/States/Success/Themes/SuccessStateElement.Memphis.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SuccessStateElement.Memphis.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/States/Success/Themes/SuccessStateElement.Memphis.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,+BAA+B,IAAI,SAAS,CAsI3D"}
+{"version":3,"file":"SuccessStateElement.Memphis.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/States/Success/Themes/SuccessStateElement.Memphis.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,+BAA+B,IAAI,SAAS,CA0J3D"}

package/Controls/Components/States/Success/Themes/SuccessStateElement.Memphis.js

@@ -88,7 +88,7 @@ export function successStateElementMemphisStyle() {
   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);
@@ -99,7 +99,17 @@ export function successStateElementMemphisStyle() {
   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);
@@ -110,6 +120,16 @@ export function successStateElementMemphisStyle() {
   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;
@@ -123,7 +143,7 @@ export function successStateElementMemphisStyle() {
   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);
@@ -133,7 +153,7 @@ export function successStateElementMemphisStyle() {
   --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);

package/Controls/Components/States/Success/Themes/SuccessStateElement.Memphis.js.map

@@ -1 +1 @@
-{"version":3,"file":"SuccessStateElement.Memphis.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/States/Success/Themes/SuccessStateElement.Memphis.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,+BAA+B;IAC3C,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAoIT,CAAC;AACN,CAAC"}
+{"version":3,"file":"SuccessStateElement.Memphis.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/States/Success/Themes/SuccessStateElement.Memphis.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,+BAA+B;IAC3C,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAwJT,CAAC;AACN,CAAC"}

package/custom-elements.json

@@ -219710,15 +219710,14 @@
             },
             {
               "kind": "method",
-              "name": "onStepInvoked",
+              "name": "onSlotChanges",
               "privacy": "public",
-              "type": "(step: StepperItemElement): void",
-              "description": "Handles a step invocation from the header.",
+              "type": "(slotName?: string | undefined): void",
+              "description": "Handles slotted item changes from the Slottable behavior.",
               "parameters": [
                 {
-                  "name": "step",
-                  "type": "StepperItemElement",
-                  "description": "The step that has been invoked."
+                  "name": "slotName",
+                  "type": "string"
                 }
               ],
               "return": {
@@ -219813,19 +219812,6 @@
                 "module": "./../src/Controls/Behaviors/Slottable.ts"
               }
             },
-            {
-              "kind": "method",
-              "name": "onSlotChanges",
-              "privacy": "public",
-              "type": "(slotName?: string | undefined): void",
-              "description": "Called when the slot changes.\nThis method is a hook that can be overridden.",
-              "parameters": [],
-              "return": {},
-              "inheritedFrom": {
-                "name": "ISlottable",
-                "module": "./../src/Controls/Behaviors/Slottable.ts"
-              }
-            },
             {
               "kind": "method",
               "name": "select",
@@ -220110,6 +220096,10 @@
             }
           ],
           "slots": [
+            {
+              "description": "The ${`step-${index}`} slot.",
+              "name": "${`step-${index}`}"
+            },
             {
               "description": "Custom footer content below the stepper content",
               "name": "footer"
@@ -220396,7 +220386,7 @@
             },
             {
               "name": "content",
-              "description": "The main content area for active step"
+              "description": "The content part."
             },
             {
               "name": "footer",
@@ -220407,8 +220397,8 @@
               "description": "The header container with step indicators"
             },
             {
-              "name": "step",
-              "description": "The clickable step button"
+              "name": "step-body",
+              "description": "The vertical step body containing connector and step content"
             },
             {
               "name": "step-container",
@@ -237298,6 +237288,10 @@
             {
               "name": "Themeable",
               "module": "./../src/Controls/Behaviors/Themeable.ts"
+            },
+            {
+              "name": "Slottable",
+              "module": "./../src/Controls/Behaviors/Slottable.ts"
             }
           ],
           "description": "BusyState - A loading state component that indicates ongoing processes or data retrieval operations.",
@@ -237662,13 +237656,17 @@
           ],
           "slots": [
             {
-              "description": "Default content area for additional loading state information or custom elements",
+              "description": "The default slot.",
               "name": ""
             },
             {
               "description": "Action buttons or controls available during loading (e.g., cancel operation, dismiss)",
               "name": "actions"
             },
+            {
+              "description": "The header slot.",
+              "name": "header"
+            },
             {
               "description": "Custom styles injection slot for shadow DOM styling escape hatch",
               "name": "style",
@@ -237908,11 +237906,22 @@
             {
               "name": "Themeable",
               "module": "./../src/Controls/Behaviors/Themeable.ts"
+            },
+            {
+              "name": "Slottable",
+              "module": "./../src/Controls/Behaviors/Slottable.ts"
             }
           ],
           "description": "EmptyState - A user-friendly placeholder component for displaying when no content or data is available.",
           "name": "EmptyStateElement",
           "members": [
+            {
+              "kind": "field",
+              "name": "iconSize",
+              "privacy": "public",
+              "description": "Gets or sets the `iconSize` property.\nThe default value is `null`, which means the icon size is not specified.",
+              "type": "Size | null"
+            },
             {
               "kind": "field",
               "name": "icon",
@@ -238276,13 +238285,17 @@
           ],
           "slots": [
             {
-              "description": "Default content area for additional empty state information or custom elements",
+              "description": "The default slot.",
               "name": ""
             },
             {
               "description": "Action buttons or links for user guidance and next steps",
               "name": "actions"
             },
+            {
+              "description": "The header slot.",
+              "name": "header"
+            },
             {
               "description": "Custom styles injection slot for shadow DOM styling escape hatch",
               "name": "style",
@@ -238293,6 +238306,12 @@
             }
           ],
           "attributes": [
+            {
+              "name": "icon-size",
+              "fieldName": "iconSize",
+              "description": "Gets or sets the `iconSize` property.\nThe default value is `null`, which means the icon size is not specified.",
+              "type": "Size | null"
+            },
             {
               "name": "header",
               "fieldName": "header",
@@ -238522,6 +238541,10 @@
             {
               "name": "Themeable",
               "module": "./../src/Controls/Behaviors/Themeable.ts"
+            },
+            {
+              "name": "Slottable",
+              "module": "./../src/Controls/Behaviors/Slottable.ts"
             }
           ],
           "description": "ErrorState - An error handling component that displays failure states and recovery options for users.",
@@ -238901,13 +238924,17 @@
           ],
           "slots": [
             {
-              "description": "Default content area for additional error information or custom content",
+              "description": "The default slot.",
               "name": ""
             },
             {
               "description": "Action buttons for error recovery (retry, refresh, contact support, go back, etc.)",
               "name": "actions"
             },
+            {
+              "description": "The header slot.",
+              "name": "header"
+            },
             {
               "description": "Custom styles injection slot for shadow DOM styling escape hatch",
               "name": "style",
@@ -238985,11 +239012,6 @@
               "description": "The state font weight CSS custom property.",
               "type": "String"
             },
-            {
-              "name": "--error-state-foreground-color",
-              "description": "The text color for error state content",
-              "type": "String"
-            },
             {
               "name": "--error-state-gap",
               "description": "The spacing between icon, text, and action elements",
@@ -239151,6 +239173,10 @@
             {
               "name": "Themeable",
               "module": "./../src/Controls/Behaviors/Themeable.ts"
+            },
+            {
+              "name": "Slottable",
+              "module": "./../src/Controls/Behaviors/Slottable.ts"
             }
           ],
           "description": "SuccessState - A celebration component that displays successful operations and positive outcomes to users.",
@@ -239519,13 +239545,17 @@
           ],
           "slots": [
             {
-              "description": "Default content area for additional success information or custom content",
+              "description": "The default slot.",
               "name": ""
             },
             {
               "description": "Action buttons for next steps or related operations after success",
               "name": "actions"
             },
+            {
+              "description": "The header slot.",
+              "name": "header"
+            },
             {
               "description": "Custom styles injection slot for shadow DOM styling escape hatch",
               "name": "style",
@@ -239593,11 +239623,6 @@
               "description": "The state font weight CSS custom property.",
               "type": "String"
             },
-            {
-              "name": "--success-state-foreground-color",
-              "description": "The text color for success state content",
-              "type": "String"
-            },
             {
               "name": "--success-state-gap",
               "description": "The spacing between icon, text, and action elements",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@breadstone/mosaik-elements-foundation",
-    "version": "0.1.8",
+    "version": "0.1.10",
     "description": "Mosaik elements components package.",
     "license": "MIT",
     "author": "andre.wehlert <awehlert@breadstone.de> (https://www.breadstone.de)",
@@ -14,8 +14,8 @@
         "url": "git+ssh://git@github.com/RueDeRennes/mosaik.git"
     },
     "dependencies": {
-        "@breadstone/mosaik-elements": "0.1.8",
-        "@breadstone/mosaik-themes": "0.1.8",
+        "@breadstone/mosaik-elements": "0.1.10",
+        "@breadstone/mosaik-themes": "0.1.10",
         "tslib": "2.8.1"
     },
     "peerDependencies": {