@breadstone/mosaik-elements-foundation 0.0.147 → 0.0.149

package/Controls/Components/States/Busy/BusyStateElement.js

@@ -22,42 +22,67 @@ import { Themeable } from '../../../Behaviors/Themeable';
 import { ProgressRingElement } from '../../Ranges/ProgressRing/ProgressRingElement';
 // #endregion
 /**
- * Busy State - A UI component used to display a message or indication when there is no content or data.
+ * BusyState - A loading state component that indicates ongoing processes or data retrieval operations.
  *
- * @description
- * The Busy State component is designed to provide users with information or guidance when there is no content
- * or data available. This component often includes a message, icon, and sometimes suggestions or actions
- * to help users understand what to do next. It helps in creating a more user-friendly experience by guiding users
- * in scenarios where content is absent.
+ * Displays animated loading indicators and optional status messages to inform users when content
+ * is being loaded, processed, or retrieved. Provides visual feedback for asynchronous operations
+ * to maintain user engagement and communicate system activity.
  *
- * @name Busy State
+ * @name BusyStateElement
  * @element mosaik-busy-state
  * @category States
  *
- * @slot - The default slot for placing additional content or elements related to the busy state.
- * @slot actions - The actions slot for placing actionable elements such as buttons or links for user interaction.
+ * @slot - Default content area for additional loading state information
+ * @slot actions - Action buttons or controls available during loading (e.g., cancel operation)
  *
- * @csspart icon - The icon part of the busy state component.
- * @csspart header - The header part of the busy state component.
- * @csspart content - The content part of the busy state component.
+ * @csspart icon - Loading indicator container for progress ring or spinner
+ * @csspart header - Header text container for loading status messaging
+ * @csspart content - Content text container for detailed loading information
  *
- * @cssprop {String} --busy-state-foreground-color - The foreground color for the busy state content.
- * @cssprop {String} --icon-foreground-color - The foreground color for the icon.
- * @cssprop {String} --busy-state-header-font-family - The font family for the header text.
- * @cssprop {String} --busy-state-header-font-size - The font size for the header text.
- * @cssprop {String} --busy-state-header-font-line-height - The line height for the header text.
- * @cssprop {String} --busy-state-header-font-weight - The font weight for the header text.
- * @cssprop {String} --busy-state-header-font-letter-spacing - The letter spacing for the header text.
- * @cssprop {String} --busy-state-header-font-text-decoration - The text decoration for the header text.
- * @cssprop {String} --busy-state-header-font-text-transform - The text transform for the header text.
+ * @cssprop --busy-state-foreground-color - Text color for busy state content
+ * @cssprop --icon-foreground-color - Color for the loading indicator
+ * @cssprop --busy-state-header-font-family - Font family for header text
+ * @cssprop --busy-state-header-font-size - Font size for header text
+ * @cssprop --busy-state-header-font-line-height - Line height for header text
+ * @cssprop --busy-state-header-font-weight - Font weight for header text
+ * @cssprop --busy-state-header-font-letter-spacing - Letter spacing for header text
+ * @cssprop --busy-state-header-font-text-decoration - Text decoration for header text
+ * @cssprop --busy-state-header-font-text-transform - Text transform for header text
  *
- * @dependency {ProgressRingElement} mosaik-progress-ring - The Progress Ring component, used for displaying the loading indicator.
- * @dependency {TextElement} mosaik-text - The Text component, used for displaying the header and content text.
- * @dependency {StackElement} mosaik-stack - The Stack component, used for layout management of the icon, header, and content.
+ * @dependency ProgressRingElement - For animated loading indicators and progress visualization
+ * @dependency TextElement - For rendering header and content text
+ * @dependency StackElement - For layout management and content arrangement
  *
  * @example
  * ```html
+ * <!-- Simple loading state -->
  * <mosaik-busy-state>
+ *   <mosaik-progress-ring slot="icon"></mosaik-progress-ring>
+ *   <mosaik-text slot="header">Loading...</mosaik-text>
+ * </mosaik-busy-state>
+ *
+ * <!-- Data loading with details -->
+ * <mosaik-busy-state>
+ *   <mosaik-progress-ring slot="icon"></mosaik-progress-ring>
+ *   <mosaik-text slot="header">Loading your dashboard</mosaik-text>
+ *   <mosaik-text slot="content">This may take a few moments</mosaik-text>
+ * </mosaik-busy-state>
+ *
+ * <!-- Upload progress -->
+ * <mosaik-busy-state>
+ *   <mosaik-progress-ring slot="icon" value="65"></mosaik-progress-ring>
+ *   <mosaik-text slot="header">Uploading files...</mosaik-text>
+ *   <mosaik-text slot="content">65% complete</mosaik-text>
+ *   <div slot="actions">
+ *     <mosaik-button appearance="soft" onclick="cancelUpload()">Cancel</mosaik-button>
+ *   </div>
+ * </mosaik-busy-state>
+ *
+ * <!-- Search in progress -->
+ * <mosaik-busy-state>
+ *   <mosaik-progress-ring slot="icon"></mosaik-progress-ring>
+ *   <mosaik-text slot="header">Searching...</mosaik-text>
+ *   <mosaik-text slot="content">Finding the best results for you</mosaik-text>
  * </mosaik-busy-state>
  * ```
  *

package/Controls/Components/States/Busy/BusyStateElement.js.map

@@ -1 +1 @@
-{"version":3,"file":"BusyStateElement.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/States/Busy/BusyStateElement.ts"],"names":[],"mappings":"AAAA,kBAAkB;;;;;;;;;;AAElB,OAAO,EAAE,SAAS,EAAE,MAAM,wCAAwC,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,wCAAwC,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,uCAAuC,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAChE,OAAO,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AACtE,OAAO,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AACzE,OAAO,EAAE,0BAA0B,EAAE,MAAM,iCAAiC,CAAC;AAC7E,OAAO,EAAE,iCAAiC,EAAE,MAAM,wCAAwC,CAAC;AAC3F,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAEzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,+CAA+C,CAAC;AAEpF,aAAa;AAEb;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AAeI,IAAM,gBAAgB,GAAtB,MAAM,gBACT,SAAQ,SAAS,CAAC,gBAAgB,CAAC;IAGnC,iBAAiB;IAET,OAAO,CAAS;IAChB,KAAK,CAAS;IAEtB,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,mBAAmB,CAAC;IAC/B,CAAC;IAED;;;;OAIG;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;;;;;OAKG;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;AA9BG;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;;4CAG1B;AAcD;IAAC,SAAS,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;;8CAG3B;AAjEQ,gBAAgB;IAd5B,SAAS,CAAC;QACP,QAAQ,EAAE,mBAAmB;QAC7B,QAAQ,EAAE,wBAAwB;QAClC,MAAM,EAAE;YACJ,GAAG,EAAE,wBAAwB;YAC7B,KAAK,EAAE,0BAA0B;YACjC,YAAY,EAAE,iCAAiC;SAClD;QACD,OAAO,EAAE;YACL,mBAAmB;YACnB,WAAW;YACX,YAAY;SACf;KACJ,CAAC;;GACW,gBAAgB,CA2E5B"}
+{"version":3,"file":"BusyStateElement.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/States/Busy/BusyStateElement.ts"],"names":[],"mappings":"AAAA,kBAAkB;;;;;;;;;;AAElB,OAAO,EAAE,SAAS,EAAE,MAAM,wCAAwC,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,wCAAwC,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,uCAAuC,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAChE,OAAO,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AACtE,OAAO,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AACzE,OAAO,EAAE,0BAA0B,EAAE,MAAM,iCAAiC,CAAC;AAC7E,OAAO,EAAE,iCAAiC,EAAE,MAAM,wCAAwC,CAAC;AAC3F,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAEzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,+CAA+C,CAAC;AAEpF,aAAa;AAEb;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkEG;AAeI,IAAM,gBAAgB,GAAtB,MAAM,gBACT,SAAQ,SAAS,CAAC,gBAAgB,CAAC;IAGnC,iBAAiB;IAET,OAAO,CAAS;IAChB,KAAK,CAAS;IAEtB,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,mBAAmB,CAAC;IAC/B,CAAC;IAED;;;;OAIG;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;;;;;OAKG;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;AA9BG;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;;4CAG1B;AAcD;IAAC,SAAS,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;;8CAG3B;AAjEQ,gBAAgB;IAd5B,SAAS,CAAC;QACP,QAAQ,EAAE,mBAAmB;QAC7B,QAAQ,EAAE,wBAAwB;QAClC,MAAM,EAAE;YACJ,GAAG,EAAE,wBAAwB;YAC7B,KAAK,EAAE,0BAA0B;YACjC,YAAY,EAAE,iCAAiC;SAClD;QACD,OAAO,EAAE;YACL,mBAAmB;YACnB,WAAW;YACX,YAAY;SACf;KACJ,CAAC;;GACW,gBAAgB,CA2E5B"}

package/Controls/Components/States/Empty/EmptyStateElement.d.ts

@@ -2,45 +2,77 @@ import { StateBaseElement } from '../Abstracts/StateBaseElement';
 import { IEmptyStateElementProps } from './IEmptyStateElementProps';
 declare const EmptyStateElement_base: (abstract new (...args: Array<any>) => import("../../../Behaviors/Themeable").IThemeableProps) & typeof StateBaseElement & import("../../../Behaviors/Themeable").IThemeableCtor;
 /**
- * Empty State - A UI component used to display a message or indication when there is no content or data.
+ * EmptyState - A user-friendly placeholder component for displaying when no content or data is available.
  *
- * @description
- * The Empty State component is designed to provide users with information or guidance when there is no content
- * or data available. This component often includes a message, icon, and sometimes suggestions or actions
- * to help users understand what to do next. It helps in creating a more user-friendly experience by guiding users
- * in scenarios where content is absent.
+ * Provides informative messaging and optional call-to-action elements when lists, searches, or data sets
+ * return no results. Helps guide users with clear messaging and actionable next steps to improve
+ * user experience during empty content scenarios.
  *
- * @name Empty State
+ * @name EmptyStateElement
  * @element mosaik-empty-state
  * @category States
  *
- * @slot - The default slot for placing additional content or elements related to the empty state.
- * @slot actions - The actions slot for placing actionable elements such as buttons or links for user interaction.
+ * @slot - Default content area for additional empty state information
+ * @slot actions - Action buttons or links for user guidance and next steps
  *
- * @csspart icon - The icon part of the empty state component.
- * @csspart header - The header part of the empty state component.
- * @csspart content - The content part of the empty state component.
+ * @csspart icon - Icon container for visual empty state representation
+ * @csspart header - Header text container for primary messaging
+ * @csspart content - Content text container for detailed explanation
  *
- * @cssprop {String} --empty-state-foreground-color - The foreground color for the empty state content.
- * @cssprop {String} --icon-foreground-color - The foreground color for the icon.
- * @cssprop {String} --empty-state-header-font-family - The font family for the header text.
- * @cssprop {String} --empty-state-header-font-size - The font size for the header text.
- * @cssprop {String} --empty-state-header-font-line-height - The line height for the header text.
- * @cssprop {String} --empty-state-header-font-weight - The font weight for the header text.
- * @cssprop {String} --empty-state-header-font-letter-spacing - The letter spacing for the header text.
- * @cssprop {String} --empty-state-header-font-text-decoration - The text decoration for the header text.
- * @cssprop {String} --empty-state-header-font-text-transform - The text transform for the header text.
+ * @cssprop --empty-state-foreground-color - Text color for empty state content
+ * @cssprop --icon-foreground-color - Color for the empty state icon
+ * @cssprop --empty-state-header-font-family - Font family for header text
+ * @cssprop --empty-state-header-font-size - Font size for header text
+ * @cssprop --empty-state-header-font-line-height - Line height for header text
+ * @cssprop --empty-state-header-font-weight - Font weight for header text
+ * @cssprop --empty-state-header-font-letter-spacing - Letter spacing for header text
+ * @cssprop --empty-state-header-font-text-decoration - Text decoration for header text
+ * @cssprop --empty-state-header-font-text-transform - Text transform for header text
  *
- * @dependency {IconElement} mosaik-icon - The Icon component, used for displaying the icon.
- * @dependency {TextElement} mosaik-text - The Text component, used for displaying the header and content text.
- * @dependency {StackElement} mosaik-stack - The Stack component, used for layout management of the icon, header, and content.
+ * @dependency IconElement - For displaying empty state icons and visual indicators
+ * @dependency TextElement - For rendering header and content text
+ * @dependency StackElement - For layout management and content arrangement
  *
  * @example
  * ```html
+ * <!-- No search results -->
  * <mosaik-empty-state>
- *   <mosaik-icon slot="icon" name="empty"></mosaik-icon>
- *   <mosaik-text slot="header">No Data Available</mosaik-text>
- *   <mosaik-text slot="content">Please check back later or try a different search.</mosaik-text>
+ *   <mosaik-icon slot="icon" data="search-off-outline"></mosaik-icon>
+ *   <mosaik-text slot="header">No results found</mosaik-text>
+ *   <mosaik-text slot="content">Try adjusting your search terms or filters</mosaik-text>
+ *   <div slot="actions">
+ *     <mosaik-button onclick="clearSearch()">Clear Search</mosaik-button>
+ *   </div>
+ * </mosaik-empty-state>
+ *
+ * <!-- Empty inbox -->
+ * <mosaik-empty-state>
+ *   <mosaik-icon slot="icon" data="email-outline"></mosaik-icon>
+ *   <mosaik-text slot="header">Inbox Zero!</mosaik-text>
+ *   <mosaik-text slot="content">You're all caught up. Great work!</mosaik-text>
+ * </mosaik-empty-state>
+ *
+ * <!-- Empty shopping cart -->
+ * <mosaik-empty-state>
+ *   <mosaik-icon slot="icon" data="cart-outline"></mosaik-icon>
+ *   <mosaik-text slot="header">Your cart is empty</mosaik-text>
+ *   <mosaik-text slot="content">Discover great products and add them to your cart</mosaik-text>
+ *   <div slot="actions">
+ *     <mosaik-button appearance="primary" onclick="browseProducts()">
+ *       Browse Products
+ *     </mosaik-button>
+ *   </div>
+ * </mosaik-empty-state>
+ *
+ * <!-- First-time user experience -->
+ * <mosaik-empty-state>
+ *   <mosaik-icon slot="icon" data="star-outline"></mosaik-icon>
+ *   <mosaik-text slot="header">Welcome to the app!</mosaik-text>
+ *   <mosaik-text slot="content">Get started by creating your first project</mosaik-text>
+ *   <div slot="actions">
+ *     <mosaik-button appearance="primary">Create Project</mosaik-button>
+ *     <mosaik-button appearance="soft">Take Tour</mosaik-button>
+ *   </div>
  * </mosaik-empty-state>
  * ```
  *

package/Controls/Components/States/Empty/EmptyStateElement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyStateElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/States/Empty/EmptyStateElement.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAMjE,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;;AAIpE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,qBAca,iBACT,SAAQ,sBACR,YAAW,uBAAuB;IAIlC,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,KAAK,CAAS;IAMtB;;;;OAIG;;IAYH;;;;;;MAME;IACF,WAAkB,EAAE,IAAI,MAAM,CAE7B;IAED;;;;OAIG;IACH,IACW,IAAI,IAAI,MAAM,CAExB;IAED,IAAW,IAAI,CAAC,KAAK,EAAE,MAAM,EAI5B;IAED;;;;;OAKG;IACH,IACW,MAAM,IAAI,MAAM,CAE1B;IAED,IAAW,MAAM,CAAC,KAAK,EAAE,MAAM,EAI9B;CAIJ;AAED;;GAEG;AACH,yBAAiB,iBAAiB,CAAC;IAC/B,KAAY,KAAK,GAAG,uBAAuB,CAAC;CAC/C;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEX,UAAU,qBAAqB;QAE3B,oBAAoB,EAAE,iBAAiB,CAAC;KAC3C;CACJ"}
+{"version":3,"file":"EmptyStateElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/States/Empty/EmptyStateElement.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAMjE,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;;AAIpE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4EG;AACH,qBAca,iBACT,SAAQ,sBACR,YAAW,uBAAuB;IAIlC,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,KAAK,CAAS;IAMtB;;;;OAIG;;IAYH;;;;;;MAME;IACF,WAAkB,EAAE,IAAI,MAAM,CAE7B;IAED;;;;OAIG;IACH,IACW,IAAI,IAAI,MAAM,CAExB;IAED,IAAW,IAAI,CAAC,KAAK,EAAE,MAAM,EAI5B;IAED;;;;;OAKG;IACH,IACW,MAAM,IAAI,MAAM,CAE1B;IAED,IAAW,MAAM,CAAC,KAAK,EAAE,MAAM,EAI9B;CAIJ;AAED;;GAEG;AACH,yBAAiB,iBAAiB,CAAC;IAC/B,KAAY,KAAK,GAAG,uBAAuB,CAAC;CAC/C;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEX,UAAU,qBAAqB;QAE3B,oBAAoB,EAAE,iBAAiB,CAAC;KAC3C;CACJ"}

package/Controls/Components/States/Empty/EmptyStateElement.js

@@ -22,45 +22,77 @@ import { emptyStateElementCosmopolitanStyle } from './Themes/EmptyStateElement.C
 import { Themeable } from '../../../Behaviors/Themeable';
 // #endregion
 /**
- * Empty State - A UI component used to display a message or indication when there is no content or data.
+ * EmptyState - A user-friendly placeholder component for displaying when no content or data is available.
  *
- * @description
- * The Empty State component is designed to provide users with information or guidance when there is no content
- * or data available. This component often includes a message, icon, and sometimes suggestions or actions
- * to help users understand what to do next. It helps in creating a more user-friendly experience by guiding users
- * in scenarios where content is absent.
+ * Provides informative messaging and optional call-to-action elements when lists, searches, or data sets
+ * return no results. Helps guide users with clear messaging and actionable next steps to improve
+ * user experience during empty content scenarios.
  *
- * @name Empty State
+ * @name EmptyStateElement
  * @element mosaik-empty-state
  * @category States
  *
- * @slot - The default slot for placing additional content or elements related to the empty state.
- * @slot actions - The actions slot for placing actionable elements such as buttons or links for user interaction.
+ * @slot - Default content area for additional empty state information
+ * @slot actions - Action buttons or links for user guidance and next steps
  *
- * @csspart icon - The icon part of the empty state component.
- * @csspart header - The header part of the empty state component.
- * @csspart content - The content part of the empty state component.
+ * @csspart icon - Icon container for visual empty state representation
+ * @csspart header - Header text container for primary messaging
+ * @csspart content - Content text container for detailed explanation
  *
- * @cssprop {String} --empty-state-foreground-color - The foreground color for the empty state content.
- * @cssprop {String} --icon-foreground-color - The foreground color for the icon.
- * @cssprop {String} --empty-state-header-font-family - The font family for the header text.
- * @cssprop {String} --empty-state-header-font-size - The font size for the header text.
- * @cssprop {String} --empty-state-header-font-line-height - The line height for the header text.
- * @cssprop {String} --empty-state-header-font-weight - The font weight for the header text.
- * @cssprop {String} --empty-state-header-font-letter-spacing - The letter spacing for the header text.
- * @cssprop {String} --empty-state-header-font-text-decoration - The text decoration for the header text.
- * @cssprop {String} --empty-state-header-font-text-transform - The text transform for the header text.
+ * @cssprop --empty-state-foreground-color - Text color for empty state content
+ * @cssprop --icon-foreground-color - Color for the empty state icon
+ * @cssprop --empty-state-header-font-family - Font family for header text
+ * @cssprop --empty-state-header-font-size - Font size for header text
+ * @cssprop --empty-state-header-font-line-height - Line height for header text
+ * @cssprop --empty-state-header-font-weight - Font weight for header text
+ * @cssprop --empty-state-header-font-letter-spacing - Letter spacing for header text
+ * @cssprop --empty-state-header-font-text-decoration - Text decoration for header text
+ * @cssprop --empty-state-header-font-text-transform - Text transform for header text
  *
- * @dependency {IconElement} mosaik-icon - The Icon component, used for displaying the icon.
- * @dependency {TextElement} mosaik-text - The Text component, used for displaying the header and content text.
- * @dependency {StackElement} mosaik-stack - The Stack component, used for layout management of the icon, header, and content.
+ * @dependency IconElement - For displaying empty state icons and visual indicators
+ * @dependency TextElement - For rendering header and content text
+ * @dependency StackElement - For layout management and content arrangement
  *
  * @example
  * ```html
+ * <!-- No search results -->
  * <mosaik-empty-state>
- *   <mosaik-icon slot="icon" name="empty"></mosaik-icon>
- *   <mosaik-text slot="header">No Data Available</mosaik-text>
- *   <mosaik-text slot="content">Please check back later or try a different search.</mosaik-text>
+ *   <mosaik-icon slot="icon" data="search-off-outline"></mosaik-icon>
+ *   <mosaik-text slot="header">No results found</mosaik-text>
+ *   <mosaik-text slot="content">Try adjusting your search terms or filters</mosaik-text>
+ *   <div slot="actions">
+ *     <mosaik-button onclick="clearSearch()">Clear Search</mosaik-button>
+ *   </div>
+ * </mosaik-empty-state>
+ *
+ * <!-- Empty inbox -->
+ * <mosaik-empty-state>
+ *   <mosaik-icon slot="icon" data="email-outline"></mosaik-icon>
+ *   <mosaik-text slot="header">Inbox Zero!</mosaik-text>
+ *   <mosaik-text slot="content">You're all caught up. Great work!</mosaik-text>
+ * </mosaik-empty-state>
+ *
+ * <!-- Empty shopping cart -->
+ * <mosaik-empty-state>
+ *   <mosaik-icon slot="icon" data="cart-outline"></mosaik-icon>
+ *   <mosaik-text slot="header">Your cart is empty</mosaik-text>
+ *   <mosaik-text slot="content">Discover great products and add them to your cart</mosaik-text>
+ *   <div slot="actions">
+ *     <mosaik-button appearance="primary" onclick="browseProducts()">
+ *       Browse Products
+ *     </mosaik-button>
+ *   </div>
+ * </mosaik-empty-state>
+ *
+ * <!-- First-time user experience -->
+ * <mosaik-empty-state>
+ *   <mosaik-icon slot="icon" data="star-outline"></mosaik-icon>
+ *   <mosaik-text slot="header">Welcome to the app!</mosaik-text>
+ *   <mosaik-text slot="content">Get started by creating your first project</mosaik-text>
+ *   <div slot="actions">
+ *     <mosaik-button appearance="primary">Create Project</mosaik-button>
+ *     <mosaik-button appearance="soft">Take Tour</mosaik-button>
+ *   </div>
  * </mosaik-empty-state>
  * ```
  *

package/Controls/Components/States/Empty/EmptyStateElement.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyStateElement.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/States/Empty/EmptyStateElement.ts"],"names":[],"mappings":"AAAA,kBAAkB;;;;;;;;;;AAElB,OAAO,EAAE,SAAS,EAAE,MAAM,wCAAwC,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,wCAAwC,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,uCAAuC,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAChE,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AACxE,OAAO,EAAE,yBAAyB,EAAE,MAAM,gCAAgC,CAAC;AAC3E,OAAO,EAAE,2BAA2B,EAAE,MAAM,kCAAkC,CAAC;AAC/E,OAAO,EAAE,kCAAkC,EAAE,MAAM,yCAAyC,CAAC;AAC7F,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAGzD,aAAa;AAEb;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AAeI,IAAM,iBAAiB,GAAvB,MAAM,iBACT,SAAQ,SAAS,CAAC,gBAAgB,CAAC;IAGnC,iBAAiB;IAET,OAAO,CAAS;IAChB,KAAK,CAAS;IAEtB,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,oBAAoB,CAAC;IAChC,CAAC;IAED;;;;OAIG;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;;;;;OAKG;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;AA9BG;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;;6CAG1B;AAcD;IAAC,SAAS,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;;+CAG3B;AAjEQ,iBAAiB;IAd7B,SAAS,CAAC;QACP,QAAQ,EAAE,oBAAoB;QAC9B,QAAQ,EAAE,yBAAyB;QACnC,MAAM,EAAE;YACJ,GAAG,EAAE,yBAAyB;YAC9B,KAAK,EAAE,2BAA2B;YAClC,YAAY,EAAE,kCAAkC;SACnD;QACD,OAAO,EAAE;YACL,WAAW;YACX,WAAW;YACX,YAAY;SACf;KACJ,CAAC;;GACW,iBAAiB,CA2E7B"}
+{"version":3,"file":"EmptyStateElement.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/States/Empty/EmptyStateElement.ts"],"names":[],"mappings":"AAAA,kBAAkB;;;;;;;;;;AAElB,OAAO,EAAE,SAAS,EAAE,MAAM,wCAAwC,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,wCAAwC,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,uCAAuC,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAChE,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AACxE,OAAO,EAAE,yBAAyB,EAAE,MAAM,gCAAgC,CAAC;AAC3E,OAAO,EAAE,2BAA2B,EAAE,MAAM,kCAAkC,CAAC;AAC/E,OAAO,EAAE,kCAAkC,EAAE,MAAM,yCAAyC,CAAC;AAC7F,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAGzD,aAAa;AAEb;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4EG;AAeI,IAAM,iBAAiB,GAAvB,MAAM,iBACT,SAAQ,SAAS,CAAC,gBAAgB,CAAC;IAGnC,iBAAiB;IAET,OAAO,CAAS;IAChB,KAAK,CAAS;IAEtB,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,oBAAoB,CAAC;IAChC,CAAC;IAED;;;;OAIG;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;;;;;OAKG;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;AA9BG;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;;6CAG1B;AAcD;IAAC,SAAS,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;;+CAG3B;AAjEQ,iBAAiB;IAd7B,SAAS,CAAC;QACP,QAAQ,EAAE,oBAAoB;QAC9B,QAAQ,EAAE,yBAAyB;QACnC,MAAM,EAAE;YACJ,GAAG,EAAE,yBAAyB;YAC9B,KAAK,EAAE,2BAA2B;YAClC,YAAY,EAAE,kCAAkC;SACnD;QACD,OAAO,EAAE;YACL,WAAW;YACX,WAAW;YACX,YAAY;SACf;KACJ,CAAC;;GACW,iBAAiB,CA2E7B"}

package/Controls/Components/States/Error/ErrorStateElement.d.ts

@@ -2,42 +2,78 @@ import { StateBaseElement } from '../Abstracts/StateBaseElement';
 import { IErrorStateElementProps } from './IErrorStateElementProps';
 declare const ErrorStateElement_base: (abstract new (...args: Array<any>) => import("../../../Behaviors/Themeable").IThemeableProps) & typeof StateBaseElement & import("../../../Behaviors/Themeable").IThemeableCtor;
 /**
- * Error State - A UI component used to display an error message or indicator to the user.
+ * ErrorState - An error handling component that displays failure states and recovery options for users.
  *
- * @description
- * The Error State component is designed to visually convey an error or problem in the user interface.
- * It typically includes an icon, header, content, and optionally some code or detailed information. This component
- * is often used to indicate issues in forms, notifications, or status messages, helping users understand and resolve problems.
+ * Presents clear error messaging with contextual information and actionable recovery steps when
+ * operations fail or exceptions occur. Helps users understand what went wrong and provides
+ * pathways to resolve issues or retry failed actions.
  *
- * @name ErrorState
+ * @name ErrorStateElement
  * @element mosaik-error-state
  * @category States
  *
- * @slot - The default slot for placing additional content or elements related to the error.
- * @slot actions - The actions slot for placing actionable elements such as buttons or links for error resolution.
+ * @slot - Default content area for additional error information or custom content
+ * @slot actions - Action buttons for error recovery (retry, refresh, contact support, etc.)
  *
- * @csspart header - The header part of the error state component.
- * @csspart content - The content part of the error state component.
- * @csspart code - The code part for displaying error codes or detailed information.
- * @csspart icon - The icon part of the error state component.
+ * @csspart header - Header text container for primary error messaging
+ * @csspart content - Content text container for detailed error explanation
+ * @csspart code - Code container for technical error details or error codes
+ * @csspart icon - Icon container for error state visual indicators
  *
- * @cssprop {String} --error-state-header-font-family - The font family for the header text.
- * @cssprop {String} --error-state-header-font-size - The font size for the header text.
- * @cssprop {String} --error-state-header-font-line-height - The line height for the header text.
- * @cssprop {String} --error-state-header-font-weight - The font weight for the header text.
- * @cssprop {String} --error-state-header-font-letter-spacing - The letter spacing for the header text.
- * @cssprop {String} --error-state-header-font-text-decoration - The text decoration for the header text.
- * @cssprop {String} --error-state-header-font-text-transform - The text transform for the header text.
+ * @cssprop --error-state-header-font-family - Font family for header text
+ * @cssprop --error-state-header-font-size - Font size for header text
+ * @cssprop --error-state-header-font-line-height - Line height for header text
+ * @cssprop --error-state-header-font-weight - Font weight for header text
+ * @cssprop --error-state-header-font-letter-spacing - Letter spacing for header text
+ * @cssprop --error-state-header-font-text-decoration - Text decoration for header text
+ * @cssprop --error-state-header-font-text-transform - Text transform for header text
  *
- * @dependency {IconElement} mosaik-icon - The Icon component, used for displaying the error icon.
- * @dependency {TextElement} mosaik-text - The Text component, used for displaying the header, content, and code text.
- * @dependency {StackElement} mosaik-stack - The Stack component, used for layout management of the icon, header, and content.
+ * @dependency IconElement - For displaying error icons and warning indicators
+ * @dependency TextElement - For rendering header, content, and code text
+ * @dependency StackElement - For layout management and content arrangement
  *
  * @example
  * ```html
+ * <!-- Network error with retry -->
  * <mosaik-error-state>
+ *   <mosaik-icon slot="icon" data="wifi-off"></mosaik-icon>
+ *   <mosaik-text slot="header">Connection Failed</mosaik-text>
+ *   <mosaik-text slot="content">Unable to connect to the server. Please check your connection and try again.</mosaik-text>
  *   <div slot="actions">
- *     <mosaik-button>Retry</mosaik-button>
+ *     <mosaik-button appearance="primary" onclick="retryConnection()">Retry</mosaik-button>
+ *   </div>
+ * </mosaik-error-state>
+ *
+ * <!-- API error with code -->
+ * <mosaik-error-state>
+ *   <mosaik-icon slot="icon" data="alert-circle"></mosaik-icon>
+ *   <mosaik-text slot="header">Request Failed</mosaik-text>
+ *   <mosaik-text slot="content">The server encountered an error processing your request.</mosaik-text>
+ *   <mosaik-text slot="code">Error Code: 500</mosaik-text>
+ *   <div slot="actions">
+ *     <mosaik-button onclick="contactSupport()">Contact Support</mosaik-button>
+ *     <mosaik-button appearance="soft" onclick="goBack()">Go Back</mosaik-button>
+ *   </div>
+ * </mosaik-error-state>
+ *
+ * <!-- Form validation error -->
+ * <mosaik-error-state>
+ *   <mosaik-icon slot="icon" data="exclamation-triangle"></mosaik-icon>
+ *   <mosaik-text slot="header">Validation Error</mosaik-text>
+ *   <mosaik-text slot="content">Please correct the highlighted fields and try again.</mosaik-text>
+ *   <div slot="actions">
+ *     <mosaik-button appearance="primary" onclick="validateForm()">Check Again</mosaik-button>
+ *   </div>
+ * </mosaik-error-state>
+ *
+ * <!-- File upload error -->
+ * <mosaik-error-state>
+ *   <mosaik-icon slot="icon" data="file-x"></mosaik-icon>
+ *   <mosaik-text slot="header">Upload Failed</mosaik-text>
+ *   <mosaik-text slot="content">The file could not be uploaded. Please check the file size and format.</mosaik-text>
+ *   <mosaik-text slot="code">Max size: 10MB, Allowed formats: PNG, JPG, PDF</mosaik-text>
+ *   <div slot="actions">
+ *     <mosaik-button appearance="primary" onclick="selectNewFile()">Choose Another File</mosaik-button>
  *   </div>
  * </mosaik-error-state>
  * ```

package/Controls/Components/States/Error/ErrorStateElement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorStateElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/States/Error/ErrorStateElement.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAMjE,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;;AAIpE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,qBAca,iBACT,SAAQ,sBACR,YAAW,uBAAuB;IAIlC,OAAO,CAAC,KAAK,CAAS;IACtB,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,KAAK,CAAS;IAMtB;;;;OAIG;;IAaH;;;;;;MAME;IACF,WAAkB,EAAE,IAAI,MAAM,CAE7B;IAED;;;;OAIG;IACH,IACW,IAAI,IAAI,MAAM,CAExB;IAED,IAAW,IAAI,CAAC,KAAK,EAAE,MAAM,EAI5B;IAED;;;;OAIG;IACH,IACW,MAAM,IAAI,MAAM,CAE1B;IAED,IAAW,MAAM,CAAC,KAAK,EAAE,MAAM,EAI9B;IAED;;;;;OAKG;IACH,IACW,IAAI,IAAI,MAAM,CAExB;IACD,IAAW,IAAI,CAAC,KAAK,EAAE,MAAM,EAI5B;CAIJ;AAED;;GAEG;AACH,yBAAiB,iBAAiB,CAAC;IAC/B,KAAY,KAAK,GAAG,uBAAuB,CAAC;CAC/C;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,oBAAoB,EAAE,iBAAiB,CAAC;KAC3C;CACJ"}
+{"version":3,"file":"ErrorStateElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/States/Error/ErrorStateElement.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAMjE,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;;AAIpE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8EG;AACH,qBAca,iBACT,SAAQ,sBACR,YAAW,uBAAuB;IAIlC,OAAO,CAAC,KAAK,CAAS;IACtB,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,KAAK,CAAS;IAMtB;;;;OAIG;;IAaH;;;;;;MAME;IACF,WAAkB,EAAE,IAAI,MAAM,CAE7B;IAED;;;;OAIG;IACH,IACW,IAAI,IAAI,MAAM,CAExB;IAED,IAAW,IAAI,CAAC,KAAK,EAAE,MAAM,EAI5B;IAED;;;;OAIG;IACH,IACW,MAAM,IAAI,MAAM,CAE1B;IAED,IAAW,MAAM,CAAC,KAAK,EAAE,MAAM,EAI9B;IAED;;;;;OAKG;IACH,IACW,IAAI,IAAI,MAAM,CAExB;IACD,IAAW,IAAI,CAAC,KAAK,EAAE,MAAM,EAI5B;CAIJ;AAED;;GAEG;AACH,yBAAiB,iBAAiB,CAAC;IAC/B,KAAY,KAAK,GAAG,uBAAuB,CAAC;CAC/C;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,oBAAoB,EAAE,iBAAiB,CAAC;KAC3C;CACJ"}

package/Controls/Components/States/Error/ErrorStateElement.js

@@ -22,42 +22,78 @@ import { errorStateElementCosmopolitanStyle } from './Themes/ErrorStateElement.C
 import { Themeable } from '../../../Behaviors/Themeable';
 // #endregion
 /**
- * Error State - A UI component used to display an error message or indicator to the user.
+ * ErrorState - An error handling component that displays failure states and recovery options for users.
  *
- * @description
- * The Error State component is designed to visually convey an error or problem in the user interface.
- * It typically includes an icon, header, content, and optionally some code or detailed information. This component
- * is often used to indicate issues in forms, notifications, or status messages, helping users understand and resolve problems.
+ * Presents clear error messaging with contextual information and actionable recovery steps when
+ * operations fail or exceptions occur. Helps users understand what went wrong and provides
+ * pathways to resolve issues or retry failed actions.
  *
- * @name ErrorState
+ * @name ErrorStateElement
  * @element mosaik-error-state
  * @category States
  *
- * @slot - The default slot for placing additional content or elements related to the error.
- * @slot actions - The actions slot for placing actionable elements such as buttons or links for error resolution.
+ * @slot - Default content area for additional error information or custom content
+ * @slot actions - Action buttons for error recovery (retry, refresh, contact support, etc.)
  *
- * @csspart header - The header part of the error state component.
- * @csspart content - The content part of the error state component.
- * @csspart code - The code part for displaying error codes or detailed information.
- * @csspart icon - The icon part of the error state component.
+ * @csspart header - Header text container for primary error messaging
+ * @csspart content - Content text container for detailed error explanation
+ * @csspart code - Code container for technical error details or error codes
+ * @csspart icon - Icon container for error state visual indicators
  *
- * @cssprop {String} --error-state-header-font-family - The font family for the header text.
- * @cssprop {String} --error-state-header-font-size - The font size for the header text.
- * @cssprop {String} --error-state-header-font-line-height - The line height for the header text.
- * @cssprop {String} --error-state-header-font-weight - The font weight for the header text.
- * @cssprop {String} --error-state-header-font-letter-spacing - The letter spacing for the header text.
- * @cssprop {String} --error-state-header-font-text-decoration - The text decoration for the header text.
- * @cssprop {String} --error-state-header-font-text-transform - The text transform for the header text.
+ * @cssprop --error-state-header-font-family - Font family for header text
+ * @cssprop --error-state-header-font-size - Font size for header text
+ * @cssprop --error-state-header-font-line-height - Line height for header text
+ * @cssprop --error-state-header-font-weight - Font weight for header text
+ * @cssprop --error-state-header-font-letter-spacing - Letter spacing for header text
+ * @cssprop --error-state-header-font-text-decoration - Text decoration for header text
+ * @cssprop --error-state-header-font-text-transform - Text transform for header text
  *
- * @dependency {IconElement} mosaik-icon - The Icon component, used for displaying the error icon.
- * @dependency {TextElement} mosaik-text - The Text component, used for displaying the header, content, and code text.
- * @dependency {StackElement} mosaik-stack - The Stack component, used for layout management of the icon, header, and content.
+ * @dependency IconElement - For displaying error icons and warning indicators
+ * @dependency TextElement - For rendering header, content, and code text
+ * @dependency StackElement - For layout management and content arrangement
  *
  * @example
  * ```html
+ * <!-- Network error with retry -->
  * <mosaik-error-state>
+ *   <mosaik-icon slot="icon" data="wifi-off"></mosaik-icon>
+ *   <mosaik-text slot="header">Connection Failed</mosaik-text>
+ *   <mosaik-text slot="content">Unable to connect to the server. Please check your connection and try again.</mosaik-text>
  *   <div slot="actions">
- *     <mosaik-button>Retry</mosaik-button>
+ *     <mosaik-button appearance="primary" onclick="retryConnection()">Retry</mosaik-button>
+ *   </div>
+ * </mosaik-error-state>
+ *
+ * <!-- API error with code -->
+ * <mosaik-error-state>
+ *   <mosaik-icon slot="icon" data="alert-circle"></mosaik-icon>
+ *   <mosaik-text slot="header">Request Failed</mosaik-text>
+ *   <mosaik-text slot="content">The server encountered an error processing your request.</mosaik-text>
+ *   <mosaik-text slot="code">Error Code: 500</mosaik-text>
+ *   <div slot="actions">
+ *     <mosaik-button onclick="contactSupport()">Contact Support</mosaik-button>
+ *     <mosaik-button appearance="soft" onclick="goBack()">Go Back</mosaik-button>
+ *   </div>
+ * </mosaik-error-state>
+ *
+ * <!-- Form validation error -->
+ * <mosaik-error-state>
+ *   <mosaik-icon slot="icon" data="exclamation-triangle"></mosaik-icon>
+ *   <mosaik-text slot="header">Validation Error</mosaik-text>
+ *   <mosaik-text slot="content">Please correct the highlighted fields and try again.</mosaik-text>
+ *   <div slot="actions">
+ *     <mosaik-button appearance="primary" onclick="validateForm()">Check Again</mosaik-button>
+ *   </div>
+ * </mosaik-error-state>
+ *
+ * <!-- File upload error -->
+ * <mosaik-error-state>
+ *   <mosaik-icon slot="icon" data="file-x"></mosaik-icon>
+ *   <mosaik-text slot="header">Upload Failed</mosaik-text>
+ *   <mosaik-text slot="content">The file could not be uploaded. Please check the file size and format.</mosaik-text>
+ *   <mosaik-text slot="code">Max size: 10MB, Allowed formats: PNG, JPG, PDF</mosaik-text>
+ *   <div slot="actions">
+ *     <mosaik-button appearance="primary" onclick="selectNewFile()">Choose Another File</mosaik-button>
  *   </div>
  * </mosaik-error-state>
  * ```

package/Controls/Components/States/Error/ErrorStateElement.js.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorStateElement.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/States/Error/ErrorStateElement.ts"],"names":[],"mappings":"AAAA,kBAAkB;;;;;;;;;;AAElB,OAAO,EAAE,SAAS,EAAE,MAAM,wCAAwC,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,wCAAwC,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,uCAAuC,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAChE,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AACxE,OAAO,EAAE,yBAAyB,EAAE,MAAM,gCAAgC,CAAC;AAC3E,OAAO,EAAE,2BAA2B,EAAE,MAAM,kCAAkC,CAAC;AAC/E,OAAO,EAAE,kCAAkC,EAAE,MAAM,yCAAyC,CAAC;AAC7F,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAGzD,aAAa;AAEb;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AAeI,IAAM,iBAAiB,GAAvB,MAAM,iBACT,SAAQ,SAAS,CAAC,gBAAgB,CAAC;IAGnC,iBAAiB;IAET,KAAK,CAAS;IACd,OAAO,CAAS;IAChB,KAAK,CAAS;IAEtB,aAAa;IAEb,eAAe;IAEf;;;;OAIG;IACH;QACI,KAAK,EAAE,CAAC;QAER,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;QAChB,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;QAClB,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;IACpB,CAAC;IAED,aAAa;IAEb,qBAAqB;IAErB;;;;;;MAME;IACK,MAAM,KAAK,EAAE;QAChB,OAAO,oBAAoB,CAAC;IAChC,CAAC;IAED;;;;OAIG;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;;;;OAIG;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;IAED;;;;;OAKG;IACH,IACW,IAAI;QACX,OAAO,IAAI,CAAC,KAAK,CAAC;IACtB,CAAC;IACD,IAAW,IAAI,CAAC,KAAa;QACzB,IAAI,IAAI,CAAC,KAAK,KAAK,KAAK,EAAE,CAAC;YACvB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACvB,CAAC;IACL,CAAC;CAIJ,CAAA;AA7CG;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;;6CAG1B;AAaD;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;;+CAG1B;AAcD;IAAC,SAAS,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;;6CAG3B;AAnFQ,iBAAiB;IAd7B,SAAS,CAAC;QACP,QAAQ,EAAE,oBAAoB;QAC9B,QAAQ,EAAE,yBAAyB;QACnC,MAAM,EAAE;YACJ,GAAG,EAAE,yBAAyB;YAC9B,KAAK,EAAE,2BAA2B;YAClC,YAAY,EAAE,kCAAkC;SACnD;QACD,OAAO,EAAE;YACL,WAAW;YACX,WAAW;YACX,YAAY;SACf;KACJ,CAAC;;GACW,iBAAiB,CA4F7B"}
+{"version":3,"file":"ErrorStateElement.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/States/Error/ErrorStateElement.ts"],"names":[],"mappings":"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"}