@breadstone/mosaik-elements-foundation 0.0.146 → 0.0.148

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":"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"}
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8EG;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"}

package/Controls/Components/States/Success/SuccessStateElement.d.ts

@@ -2,41 +2,76 @@ import { StateBaseElement } from '../Abstracts/StateBaseElement';
 import { ISuccessStateElementProps } from './ISuccessStateElementProps';
 declare const SuccessStateElement_base: (abstract new (...args: Array<any>) => import("../../../Behaviors/Themeable").IThemeableProps) & typeof StateBaseElement & import("../../../Behaviors/Themeable").IThemeableCtor;
 /**
- * Success State - A UI component that represents a success state, typically used to display a success message or indicator.
+ * SuccessState - A celebration component that displays successful operations and positive outcomes to users.
  *
- * @description
- * The Success State component is designed to visually represent a successful operation or state in the user interface.
- * It usually includes an icon, header, and content section to convey a positive outcome or confirmation. This component
- * is often used in forms, notifications, or status indicators to inform users of successful actions.
+ * Provides positive reinforcement and confirmation messaging when tasks complete successfully,
+ * operations finish, or goals are achieved. Helps build user confidence and satisfaction
+ * through clear success indicators and optional next-step actions.
  *
- * @name SuccessState
+ * @name SuccessStateElement
  * @element mosaik-success-state
  * @category States
  *
- * @slot - The default slot, used for displaying the success state content.
- * @slot actions - The actions slot, used for displaying action buttons or links related to the success state.
+ * @slot - Default content area for additional success information or custom content
+ * @slot actions - Action buttons for next steps or related operations after success
  *
- * @csspart icon - The icon part of the success state component.
- * @csspart header - The header part of the success state component.
- * @csspart content - The content part of the success state component.
+ * @csspart icon - Icon container for success state visual indicators (checkmarks, thumbs up)
+ * @csspart header - Header text container for primary success messaging
+ * @csspart content - Content text container for detailed success information
  *
- * @cssprop {String} --success-state-header-font-family - The font family for the header text.
- * @cssprop {String} --success-state-header-font-size - The font size for the header text.
- * @cssprop {String} --success-state-header-font-line-height - The line height for the header text.
- * @cssprop {String} --success-state-header-font-weight - The font weight for the header text.
- * @cssprop {String} --success-state-header-font-letter-spacing - The letter spacing for the header text.
- * @cssprop {String} --success-state-header-font-text-decoration - The text decoration for the header text.
- * @cssprop {String} --success-state-header-font-text-transform - The text transform for the header text.
+ * @cssprop --success-state-header-font-family - Font family for header text
+ * @cssprop --success-state-header-font-size - Font size for header text
+ * @cssprop --success-state-header-font-line-height - Line height for header text
+ * @cssprop --success-state-header-font-weight - Font weight for header text
+ * @cssprop --success-state-header-font-letter-spacing - Letter spacing for header text
+ * @cssprop --success-state-header-font-text-decoration - Text decoration for header text
+ * @cssprop --success-state-header-font-text-transform - Text transform for header text
  *
- * @dependency {IconElement} mosaik-icon - The Icon component, used for displaying the success 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 success icons and positive indicators
+ * @dependency TextElement - For rendering header and content text
+ * @dependency StackElement - For layout management and content arrangement
  *
  * @example
  * ```html
+ * <!-- Form submission success -->
  * <mosaik-success-state>
+ *   <mosaik-icon slot="icon" data="check-circle"></mosaik-icon>
+ *   <mosaik-text slot="header">Form Submitted Successfully!</mosaik-text>
+ *   <mosaik-text slot="content">Your information has been saved and processed.</mosaik-text>
  *   <div slot="actions">
- *     <mosaik-button>Done</mosaik-button>
+ *     <mosaik-button appearance="primary" onclick="goToDashboard()">Go to Dashboard</mosaik-button>
+ *   </div>
+ * </mosaik-success-state>
+ *
+ * <!-- Payment confirmation -->
+ * <mosaik-success-state>
+ *   <mosaik-icon slot="icon" data="credit-card-check"></mosaik-icon>
+ *   <mosaik-text slot="header">Payment Successful</mosaik-text>
+ *   <mosaik-text slot="content">Your order has been confirmed and is being processed.</mosaik-text>
+ *   <div slot="actions">
+ *     <mosaik-button appearance="primary">View Order Details</mosaik-button>
+ *     <mosaik-button appearance="soft">Continue Shopping</mosaik-button>
+ *   </div>
+ * </mosaik-success-state>
+ *
+ * <!-- File upload complete -->
+ * <mosaik-success-state>
+ *   <mosaik-icon slot="icon" data="file-check"></mosaik-icon>
+ *   <mosaik-text slot="header">Upload Complete</mosaik-text>
+ *   <mosaik-text slot="content">All files have been successfully uploaded and are ready to use.</mosaik-text>
+ *   <div slot="actions">
+ *     <mosaik-button appearance="primary">View Files</mosaik-button>
+ *   </div>
+ * </mosaik-success-state>
+ *
+ * <!-- Account created -->
+ * <mosaik-success-state>
+ *   <mosaik-icon slot="icon" data="user-check"></mosaik-icon>
+ *   <mosaik-text slot="header">Welcome aboard!</mosaik-text>
+ *   <mosaik-text slot="content">Your account has been created successfully. Let's get started!</mosaik-text>
+ *   <div slot="actions">
+ *     <mosaik-button appearance="primary">Complete Profile</mosaik-button>
+ *     <mosaik-button appearance="soft">Explore Features</mosaik-button>
  *   </div>
  * </mosaik-success-state>
  * ```

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

@@ -1 +1 @@
-{"version":3,"file":"SuccessStateElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/States/Success/SuccessStateElement.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAMjE,OAAO,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;;AAIxE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,qBAca,mBACT,SAAQ,wBACR,YAAW,yBAAyB;IAIpC,OAAO,CAAC,KAAK,CAAS;IACtB,OAAO,CAAC,OAAO,CAAS;IAMxB;;;;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;;;;OAIG;IACH,IACW,MAAM,IAAI,MAAM,CAE1B;IAED,IAAW,MAAM,CAAC,KAAK,EAAE,MAAM,EAI9B;CAIJ;AAED;;GAEG;AACH,yBAAiB,mBAAmB,CAAC;IACjC,KAAY,KAAK,GAAG,yBAAyB,CAAC;CACjD;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,sBAAsB,EAAE,mBAAmB,CAAC;KAC/C;CACJ"}
+{"version":3,"file":"SuccessStateElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/States/Success/SuccessStateElement.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAMjE,OAAO,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;;AAIxE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4EG;AACH,qBAca,mBACT,SAAQ,wBACR,YAAW,yBAAyB;IAIpC,OAAO,CAAC,KAAK,CAAS;IACtB,OAAO,CAAC,OAAO,CAAS;IAMxB;;;;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;;;;OAIG;IACH,IACW,MAAM,IAAI,MAAM,CAE1B;IAED,IAAW,MAAM,CAAC,KAAK,EAAE,MAAM,EAI9B;CAIJ;AAED;;GAEG;AACH,yBAAiB,mBAAmB,CAAC;IACjC,KAAY,KAAK,GAAG,yBAAyB,CAAC;CACjD;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,sBAAsB,EAAE,mBAAmB,CAAC;KAC/C;CACJ"}

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

@@ -21,41 +21,76 @@ import { successStateElementCosmopolitanStyle } from './Themes/SuccessStateEleme
 import { Themeable } from '../../../Behaviors/Themeable';
 // #endregion
 /**
- * Success State - A UI component that represents a success state, typically used to display a success message or indicator.
+ * SuccessState - A celebration component that displays successful operations and positive outcomes to users.
  *
- * @description
- * The Success State component is designed to visually represent a successful operation or state in the user interface.
- * It usually includes an icon, header, and content section to convey a positive outcome or confirmation. This component
- * is often used in forms, notifications, or status indicators to inform users of successful actions.
+ * Provides positive reinforcement and confirmation messaging when tasks complete successfully,
+ * operations finish, or goals are achieved. Helps build user confidence and satisfaction
+ * through clear success indicators and optional next-step actions.
  *
- * @name SuccessState
+ * @name SuccessStateElement
  * @element mosaik-success-state
  * @category States
  *
- * @slot - The default slot, used for displaying the success state content.
- * @slot actions - The actions slot, used for displaying action buttons or links related to the success state.
+ * @slot - Default content area for additional success information or custom content
+ * @slot actions - Action buttons for next steps or related operations after success
  *
- * @csspart icon - The icon part of the success state component.
- * @csspart header - The header part of the success state component.
- * @csspart content - The content part of the success state component.
+ * @csspart icon - Icon container for success state visual indicators (checkmarks, thumbs up)
+ * @csspart header - Header text container for primary success messaging
+ * @csspart content - Content text container for detailed success information
  *
- * @cssprop {String} --success-state-header-font-family - The font family for the header text.
- * @cssprop {String} --success-state-header-font-size - The font size for the header text.
- * @cssprop {String} --success-state-header-font-line-height - The line height for the header text.
- * @cssprop {String} --success-state-header-font-weight - The font weight for the header text.
- * @cssprop {String} --success-state-header-font-letter-spacing - The letter spacing for the header text.
- * @cssprop {String} --success-state-header-font-text-decoration - The text decoration for the header text.
- * @cssprop {String} --success-state-header-font-text-transform - The text transform for the header text.
+ * @cssprop --success-state-header-font-family - Font family for header text
+ * @cssprop --success-state-header-font-size - Font size for header text
+ * @cssprop --success-state-header-font-line-height - Line height for header text
+ * @cssprop --success-state-header-font-weight - Font weight for header text
+ * @cssprop --success-state-header-font-letter-spacing - Letter spacing for header text
+ * @cssprop --success-state-header-font-text-decoration - Text decoration for header text
+ * @cssprop --success-state-header-font-text-transform - Text transform for header text
  *
- * @dependency {IconElement} mosaik-icon - The Icon component, used for displaying the success 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 success icons and positive indicators
+ * @dependency TextElement - For rendering header and content text
+ * @dependency StackElement - For layout management and content arrangement
  *
  * @example
  * ```html
+ * <!-- Form submission success -->
  * <mosaik-success-state>
+ *   <mosaik-icon slot="icon" data="check-circle"></mosaik-icon>
+ *   <mosaik-text slot="header">Form Submitted Successfully!</mosaik-text>
+ *   <mosaik-text slot="content">Your information has been saved and processed.</mosaik-text>
  *   <div slot="actions">
- *     <mosaik-button>Done</mosaik-button>
+ *     <mosaik-button appearance="primary" onclick="goToDashboard()">Go to Dashboard</mosaik-button>
+ *   </div>
+ * </mosaik-success-state>
+ *
+ * <!-- Payment confirmation -->
+ * <mosaik-success-state>
+ *   <mosaik-icon slot="icon" data="credit-card-check"></mosaik-icon>
+ *   <mosaik-text slot="header">Payment Successful</mosaik-text>
+ *   <mosaik-text slot="content">Your order has been confirmed and is being processed.</mosaik-text>
+ *   <div slot="actions">
+ *     <mosaik-button appearance="primary">View Order Details</mosaik-button>
+ *     <mosaik-button appearance="soft">Continue Shopping</mosaik-button>
+ *   </div>
+ * </mosaik-success-state>
+ *
+ * <!-- File upload complete -->
+ * <mosaik-success-state>
+ *   <mosaik-icon slot="icon" data="file-check"></mosaik-icon>
+ *   <mosaik-text slot="header">Upload Complete</mosaik-text>
+ *   <mosaik-text slot="content">All files have been successfully uploaded and are ready to use.</mosaik-text>
+ *   <div slot="actions">
+ *     <mosaik-button appearance="primary">View Files</mosaik-button>
+ *   </div>
+ * </mosaik-success-state>
+ *
+ * <!-- Account created -->
+ * <mosaik-success-state>
+ *   <mosaik-icon slot="icon" data="user-check"></mosaik-icon>
+ *   <mosaik-text slot="header">Welcome aboard!</mosaik-text>
+ *   <mosaik-text slot="content">Your account has been created successfully. Let's get started!</mosaik-text>
+ *   <div slot="actions">
+ *     <mosaik-button appearance="primary">Complete Profile</mosaik-button>
+ *     <mosaik-button appearance="soft">Explore Features</mosaik-button>
  *   </div>
  * </mosaik-success-state>
  * ```

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,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,2BAA2B,EAAE,MAAM,+BAA+B,CAAC;AAC5E,OAAO,EAAE,2BAA2B,EAAE,MAAM,kCAAkC,CAAC;AAC/E,OAAO,EAAE,6BAA6B,EAAE,MAAM,oCAAoC,CAAC;AACnF,OAAO,EAAE,oCAAoC,EAAE,MAAM,2CAA2C,CAAC;AACjG,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAGzD,aAAa;AAEb;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AAeI,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;;;;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;CAIJ,CAAA;AA7BG;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;;+CAG1B;AAaD;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;;iDAG1B;AAhEQ,mBAAmB;IAd/B,SAAS,CAAC;QACP,QAAQ,EAAE,sBAAsB;QAChC,QAAQ,EAAE,2BAA2B;QACrC,MAAM,EAAE;YACJ,GAAG,EAAE,2BAA2B;YAChC,KAAK,EAAE,6BAA6B;YACpC,YAAY,EAAE,oCAAoC;SACrD;QACD,OAAO,EAAE;YACL,WAAW;YACX,WAAW;YACX,YAAY;SACf;KACJ,CAAC;;GACW,mBAAmB,CA0E/B"}
+{"version":3,"file":"SuccessStateElement.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/States/Success/SuccessStateElement.ts"],"names":[],"mappings":"AAAA,kBAAkB;;;;;;;;;;AAElB,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,2BAA2B,EAAE,MAAM,+BAA+B,CAAC;AAC5E,OAAO,EAAE,2BAA2B,EAAE,MAAM,kCAAkC,CAAC;AAC/E,OAAO,EAAE,6BAA6B,EAAE,MAAM,oCAAoC,CAAC;AACnF,OAAO,EAAE,oCAAoC,EAAE,MAAM,2CAA2C,CAAC;AACjG,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAGzD,aAAa;AAEb;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4EG;AAeI,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;;;;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;CAIJ,CAAA;AA7BG;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;;+CAG1B;AAaD;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;;iDAG1B;AAhEQ,mBAAmB;IAd/B,SAAS,CAAC;QACP,QAAQ,EAAE,sBAAsB;QAChC,QAAQ,EAAE,2BAA2B;QACrC,MAAM,EAAE;YACJ,GAAG,EAAE,2BAA2B;YAChC,KAAK,EAAE,6BAA6B;YACpC,YAAY,EAAE,oCAAoC;SACrD;QACD,OAAO,EAAE;YACL,WAAW;YACX,WAAW;YACX,YAAY;SACf;KACJ,CAAC;;GACW,mBAAmB,CA0E/B"}

package/Routing/PathToRegexp.d.ts

@@ -91,7 +91,7 @@ export interface Options {
      */
     encode?: (value: string) => string;
 }
-export declare function modifierToString(modifier: Modifier): "" | "*" | "+" | "?";
+export declare function modifierToString(modifier: Modifier): "" | "*" | "?" | "+";
 /**
  * Expose a function for taking tokens and returning a RegExp.
  */