@wavemaker/app-runtime-wm-build 12.0.0-next.45031 → 12.0.0-next.45032

app-runtime-wm-build/wmapp/styles/foundation/foundation.css

@@ -437,65 +437,28 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
 =========*/
 :root {
   /*--shadows(elevations)--*/
-  --wm-elevation-shadow-1: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
-  --wm-elevation-shadow-2: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
-  --wm-elevation-shadow-3: 0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px 0px rgba(0, 0, 0, 0.30);
-  --wm-elevation-shadow-4: 0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px 0px rgba(0, 0, 0, 0.30);
-  --wm-elevation-shadow-5: 0px 8px 12px 6px rgba(0, 0, 0, 0.15), 0px 4px 4px 0px rgba(0, 0, 0, 0.30);
-  /*headings*/
-  --wm-headings-color: var(--wm-color-on-surface);
-  /*page content*/
-  --wm-page-content-padding: 0;
-  --wm-page-content-background: var(--wm-color-surface-container-lowest);
+  --wm-elevation-shadow-1: 0px 1px 2px 0px color-mix(in srgb, var(--wm-color-shadow), transparent calc(100% - 30%)), 0px 1px 3px 1px ~"color-mix(in srgb, var(--wm-color-shadow), transparent calc(100% - 15%))";
+  --wm-elevation-shadow-2: 0px 1px 2px 0px color-mix(in srgb, var(--wm-color-shadow), transparent calc(100% - 30%)), 0px 2px 6px 2px ~"color-mix(in srgb, var(--wm-color-shadow), transparent calc(100% - 15%))";
+  --wm-elevation-shadow-3: 0px 4px 8px 3px color-mix(in srgb, var(--wm-color-shadow), transparent calc(100% - 15%)), 0px 1px 3px 0px ~"color-mix(in srgb, var(--wm-color-shadow), transparent calc(100% - 30%))";
+  --wm-elevation-shadow-4: 0px 6px 10px 4px color-mix(in srgb, var(--wm-color-shadow), transparent calc(100% - 15%)), 0px 2px 3px 0px ~"color-mix(in srgb, var(--wm-color-shadow), transparent calc(100% - 30%))";
+  --wm-elevation-shadow-5: 0px 8px 12px 6px color-mix(in srgb, var(--wm-color-shadow), transparent calc(100% - 15%)), 0px 4px 4px 0px ~"color-mix(in srgb, var(--wm-color-shadow), transparent calc(100% - 30%))";
   /**--Components--**/
-  /*--form field--*/
-  --wm-caption-font-size: var(--wm-body-large-font-size);
-  --wm-caption-font-weight: var(--wm-body-large-font-weight);
-  --wm-caption-line-height: var(--wm-body-large-line-height);
-  --wm-caption-letter-spacing: var(--wm-body-large-letter-spacing);
-  --wm-caption-color: var(--wm-color-on-surface-variant);
-  --wm-caption-margin: 0;
-  --wm-caption-padding: 0;
-  --wm-form-control-color: var(--wm-color-on-surface);
-  --wm-form-control-background: transparent;
-  --wm-form-control-border-width: var(--wm-border-width);
-  --wm-form-control-border-color: var(--wm-color-outline);
-  --wm-form-control-border-color-hover: var(--wm-color-on-surface);
-  --wm-form-control-border-color-focus: var(--wm-color-primary);
-  --wm-form-control-border-color-error: var(--wm-color-error);
-  --wm-form-control-radius: var(--wm-radius-xs);
-  --wm-form-control-height: 56px;
-  --wm-form-control-padding: 16px;
-  --wm-form-control-font-size: var(--wm-body-large-font-size);
-  --wm-form-control-font-weight: var(--wm-body-large-font-weight);
-  --wm-form-control-line-height: var(--wm-body-large-line-height);
-  --wm-form-control-color-place-holder: var(--wm-color-on-surface-variant);
-  --wm-help-block-color: var(--wm-color-on-surface);
-  --wm-help-block-font-size: var(--wm-body-small-font-size);
-  --wm-help-block-font-weight: var(--wm-body-small-font-weight);
-  --wm-help-block-line-height: var(--wm-body-small-line-height);
-  --wm-checkbox-background: transparent;
-  --wm-checkbox-border-width: 2px;
-  --wm-checkbox-border-color: var(--wm-color-on-surface-variant);
-  --wm-checkbox-border-radius: var(--wm-radius-xxs);
-  --wm-checkbox-background-selected: var(--wm-color-primary);
-  --wm-checkbox-icon-color-selected: var(--wm-color-on-primary);
-  --wm-checkbox-border-color-selected: var(--wm-color-primary);
-  --wm-checkbox-state-hover: var(--wm-color-on-surface-hover);
-  --wm-checkbox-state-focus: var(--wm-color-on-surface-focus);
-  --wm-checkbox-selected-state-hover: var(--wm-color-primary-hover);
-  --wm-checkbox-selected-state-focus: var(--wm-color-primary-focus);
-  --wm-radiobutton-background: transparent;
-  --wm-radiobutton-border-width: 2px;
-  --wm-radiobutton-border-color: var(--wm-color-on-surface-variant);
-  --wm-radiobutton-border-radius: var(--wm-radius-circle);
-  --wm-radiobutton-background-selected: var(--wm-color-primary);
-  --wm-radiobutton-icon-color-selected: var(--wm-color-on-primary);
-  --wm-radiobutton-border-color-selected: var(--wm-color-primary);
-  --wm-radiobutton-state-hover: var(--wm-color-on-surface-hover);
-  --wm-radiobutton-state-focus: var(--wm-color-on-surface-focus);
-  --wm-radiobutton-selected-state-hover: var(--wm-color-primary-hover);
-  --wm-radiobutton-selected-state-focus: var(--wm-color-primary-focus);
+  /*--Anchor--*/
+  --wm-anchor-font-size: var(--wm-body-medium-font-size);
+  --wm-anchor-font-family: var(--wm-body-medium-font-family);
+  --wm-anchor-font-weight: var(--wm-body-medium-font-weight);
+  --wm-anchor-line-height: var(--wm-body-medium-line-height);
+  --wm-anchor-letter-spacing: var(--wm-body-medium-letter-spacing);
+  --wm-anchor-text-transform: none;
+  --wm-anchor-text-decoration: none;
+  --wm-anchor-color: var(--wm-color-primary);
+  --wm-anchor-color-hover: color-mix(in srgb, var(--wm-color-primary), var(--wm-color-black) var(--wm-opacity-hover));
+  --wm-anchor-color-focus: color-mix(in srgb, var(--wm-color-primary), var(--wm-color-black) var(--wm-opacity-focus));
+  --wm-anchor-color-active: color-mix(in srgb, var(--wm-color-primary), var(--wm-color-black) var(--wm-opacity-active));
+  --wm-anchor-gap: var(--wm-space-2);
+  /*--Button Group--*/
+  --wm-button-group-horizontal-radius: var(--wm-radius-pill);
+  --wm-button-group-vertical-radius: var(--wm-radius-xs);
   /*--button--*/
   --wm-btn-font-size: var(--wm-label-large-font-size);
   --wm-btn-font-family: var(--wm-label-large-font-family);
@@ -607,26 +570,121 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   --wm-btn-lg-min-width: auto;
   --wm-btn-lg-height: 44px;
   --wm-btn-lg-gap: var(--wm-space-2);
-  /*--Button Group--*/
-  --wm-button-group-horizontal-radius: var(--wm-radius-pill);
-  --wm-button-group-vertical-radius: var(--wm-radius-xs);
-  /*--Anchor--*/
-  --wm-anchor-font-size: var(--wm-body-medium-font-size);
-  --wm-anchor-font-family: var(--wm-body-medium-font-family);
-  --wm-anchor-font-weight: var(--wm-body-medium-font-weight);
-  --wm-anchor-line-height: var(--wm-body-medium-line-height);
-  --wm-anchor-letter-spacing: var(--wm-body-medium-letter-spacing);
-  --wm-anchor-text-transform: none;
-  --wm-anchor-text-decoration: none;
-  --wm-anchor-color: var(--wm-color-primary);
-  --wm-anchor-color-hover: color-mix(in srgb, var(--wm-color-primary), var(--wm-color-black) var(--wm-opacity-hover));
-  --wm-anchor-color-focus: color-mix(in srgb, var(--wm-color-primary), var(--wm-color-black) var(--wm-opacity-focus));
-  --wm-anchor-color-active: color-mix(in srgb, var(--wm-color-primary), var(--wm-color-black) var(--wm-opacity-active));
-  --wm-anchor-gap: var(--wm-space-2);
-  /*--Icon--*/
-  --wm-icon-gap: var(--wm-space-1);
-  /*--Grid Layout--*/
-  --wm-grid-layout-column-padding: var(--wm-space-2);
+  /*--checkbox--*/
+  --wm-checkbox-background: transparent;
+  --wm-checkbox-border-width: 2px;
+  --wm-checkbox-border-color: var(--wm-color-on-surface-variant);
+  --wm-checkbox-border-radius: var(--wm-radius-xxs);
+  --wm-checkbox-background-selected: var(--wm-color-primary);
+  --wm-checkbox-icon-color-selected: var(--wm-color-on-primary);
+  --wm-checkbox-border-color-selected: var(--wm-color-primary);
+  --wm-checkbox-state-hover: var(--wm-color-on-surface-hover);
+  --wm-checkbox-state-focus: var(--wm-color-on-surface-focus);
+  --wm-checkbox-selected-state-hover: var(--wm-color-primary-hover);
+  --wm-checkbox-selected-state-focus: var(--wm-color-primary-focus);
+  /*--form field/composite--*/
+  --wm-caption-font-size: var(--wm-body-large-font-size);
+  --wm-caption-font-weight: var(--wm-body-large-font-weight);
+  --wm-caption-line-height: var(--wm-body-large-line-height);
+  --wm-caption-letter-spacing: var(--wm-body-large-letter-spacing);
+  --wm-caption-color: var(--wm-color-on-surface-variant);
+  --wm-caption-margin: 0;
+  --wm-caption-padding: 0;
+  --wm-form-control-color: var(--wm-color-on-surface);
+  --wm-form-control-background: transparent;
+  --wm-form-control-border-width: var(--wm-border-width);
+  --wm-form-control-border-color: var(--wm-color-outline);
+  --wm-form-control-border-color-hover: var(--wm-color-on-surface);
+  --wm-form-control-border-color-focus: var(--wm-color-primary);
+  --wm-form-control-border-color-error: var(--wm-color-error);
+  --wm-form-control-radius: var(--wm-radius-xs);
+  --wm-form-control-height: 56px;
+  --wm-form-control-padding: 16px;
+  --wm-form-control-font-size: var(--wm-body-large-font-size);
+  --wm-form-control-font-weight: var(--wm-body-large-font-weight);
+  --wm-form-control-line-height: var(--wm-body-large-line-height);
+  --wm-form-control-color-place-holder: var(--wm-color-on-surface-variant);
+  --wm-help-block-color: var(--wm-color-on-surface);
+  --wm-help-block-font-size: var(--wm-body-small-font-size);
+  --wm-help-block-font-weight: var(--wm-body-small-font-weight);
+  --wm-help-block-line-height: var(--wm-body-small-line-height);
+  /*--Container--*/
+  --wm-container-outlined-border-color: var(--wm-color-outline-variant);
+  --wm-container-outlined-border-width: var(--wm-border-width);
+  --wm-container-outlined-border-style: var(--wm-border-style);
+  --wm-container-elevation-border-radius: var(--wm-radius-sm);
+  --wm-container-elevation-shadow: var(--wm-elevation-shadow-1);
+  /*--file upload--*/
+  --wm-file-upload-status-padding: var(--wm-space-2);
+  --wm-file-upload-status-border-color: var(--wm-border-color);
+  --wm-file-upload-status-border-width: var(--wm-border-width);
+  --wm-file-upload-status-border-style: var(--wm-border-style);
+  --wm-file-upload-status-background: var(--wm-color-surface-container-low);
+  --wm-file-upload-status-radius: var(--wm-radius-xs);
+  --wm-file-upload-status-bottom-space: var(--wm-space-1);
+  --wm-file-upload-bottom-space: var(--wm-space-1);
+  --wm-file-upload-title-color: var(--wm-color-black);
+  --wm-file-upload-title-font-size: var(--wm-body-medium-font-size);
+  --wm-file-upload-title-font-family: var(--wm-font-family-brand);
+  --wm-file-upload-title-font-weight: var(--wm-font-weight-regular);
+  --wm-file-upload-title-line-height: var(--wm-body-medium-line-height);
+  --wm-file-upload-size-color: var(--wm-color-black);
+  --wm-file-upload-size-font-size: var(--wm-body-small-font-size);
+  --wm-file-upload-size-font-family: var(--wm-font-family-brand);
+  --wm-file-upload-size-font-weight: var(--wm-font-weight-regular);
+  --wm-file-upload-size-line-height: var(--wm-body-small-line-height);
+  --wm-file-upload-gap: var(--wm-space-3);
+  --wm-file-upload-drop-box-gap: var(--wm-space-3);
+  --wm-file-upload-drop-box-bottom-space: var(--wm-space-2);
+  --wm-file-upload-multi-file-radius: var(--wm-radius-sm);
+  --wm-file-upload-drop-box-background: var(--wm-btn-background);
+  --wm-file-upload-message-caption-color: var(--wm-color-black);
+  --wm-file-upload-message-caption-font-size: var(--wm-body-large-font-size);
+  --wm-file-upload-message-caption-font-family: var(--wm-font-family-brand);
+  --wm-file-upload-message-caption-font-weight: var(--wm-font-weight-regular);
+  --wm-file-upload-message-caption-line-height: var(--wm-body-large-line-height);
+  --wm-file-upload-message-anchor-color: var(--wm-color-black);
+  --wm-file-upload-message-anchor-font-size: var(--wm-body-medium-font-size);
+  --wm-file-upload-message-anchor-font-family: var(--wm-font-family-brand);
+  --wm-file-upload-message-anchor-font-weight: var(--wm-font-weight-regular);
+  --wm-file-upload-message-anchor-line-height: var(--wm-body-medium-line-height);
+  --wm-file-upload-media-icon-size: var(--wm-icon-size);
+  --wm-file-upload-media-icon-padding: var(--wm-space-1);
+  /*--Message--*/
+  --wm-message-container-shadow: var(--wm-elevation-shadow-3);
+  --wm-message-container-border-radius: var(--wm-radius-xs);
+  --wm-message-container-border-width: var(--wm-border-width);
+  --wm-message-container-border-style: var(--wm-border-style);
+  --wm-message-container-padding: 14px var(--wm-space-4);
+  --wm-message-container-gap: var(--wm-space-3);
+  --wm-message-font-family: var(--wm-label-large-font-family);
+  --wm-message-font-weight: var(--wm-label-large-font-weight);
+  --wm-message-font-size: var(--wm-label-large-font-size);
+  --wm-message-line-height: var(--wm-label-large-line-height);
+  --wm-message-letter-spacing: var(--wm-label-large-letter-spacing);
+  --wm-message-container-background: var(--wm-color-primary);
+  --wm-message-container-color: var(--wm-color-on-primary);
+  --wm-message-container-border-color: var(--wm-color-primary);
+  /* Success message */
+  --wm-message-container-success-background: var(--wm-color-success);
+  --wm-message-container-success-color: var(--wm-color-on-success);
+  --wm-message-container-success-border-color: var(--wm-color-success);
+  /* info message */
+  --wm-message-container-info-background: var(--wm-color-info);
+  --wm-message-container-info-color: var(--wm-color-on-info);
+  --wm-message-container-info-border-color: var(--wm-color-info);
+  /* Warning message */
+  --wm-message-container-warning-background: var(--wm-color-warning);
+  --wm-message-container-warning-color: var(--wm-color-on-warning);
+  --wm-message-container-warning-border-color: var(--wm-color-warning);
+  /* Error message */
+  --wm-message-container-danger-background: var(--wm-color-error);
+  --wm-message-container-danger-color: var(--wm-color-on-error);
+  --wm-message-container-danger-border-color: var(--wm-color-error);
+  /* loading message */
+  --wm-message-container-loading-background: var(--wm-color-primary);
+  --wm-message-container-loading-color: var(--wm-color-on-primary);
+  --wm-message-container-loading-border-color: var(--wm-color-primary);
   /*--Picture--*/
   --wm-picture-radius-rounded: var(--wm-radius-xs);
   --wm-picture-radius-circle: var(--wm-radius-circle);
@@ -672,47 +730,77 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   --wm-progress-circle-warning-stroke-active: var(--wm-color-warning);
   --wm-progress-circle-danger-stroke-inactive: var(--wm-color-error-focus);
   --wm-progress-circle-danger-stroke-active: var(--wm-color-error);
-  /*--Container--*/
-  --wm-container-outlined-border-color: var(--wm-color-outline-variant);
-  --wm-container-outlined-border-width: var(--wm-border-width);
-  --wm-container-outlined-border-style: var(--wm-border-style);
-  --wm-container-elevation-border-radius: var(--wm-radius-sm);
-  --wm-container-elevation-shadow: var(--wm-elevation-shadow-1);
-  /*--Message--*/
-  --wm-message-container-shadow: var(--wm-elevation-shadow-3);
-  --wm-message-container-border-radius: var(--wm-radius-xs);
-  --wm-message-container-border-width: var(--wm-border-width);
-  --wm-message-container-border-style: var(--wm-border-style);
-  --wm-message-container-padding: 14px var(--wm-space-4);
-  --wm-message-container-gap: var(--wm-space-3);
-  --wm-message-font-family: var(--wm-label-large-font-family);
-  --wm-message-font-weight: var(--wm-label-large-font-weight);
-  --wm-message-font-size: var(--wm-label-large-font-size);
-  --wm-message-line-height: var(--wm-label-large-line-height);
-  --wm-message-letter-spacing: var(--wm-label-large-letter-spacing);
-  --wm-message-container-background: var(--wm-color-primary);
-  --wm-message-container-color: var(--wm-color-on-primary);
-  --wm-message-container-border-color: var(--wm-color-primary);
-  /* Success message */
-  --wm-message-container-success-background: var(--wm-color-success);
-  --wm-message-container-success-color: var(--wm-color-on-success);
-  --wm-message-container-success-border-color: var(--wm-color-success);
-  /* info message */
-  --wm-message-container-info-background: var(--wm-color-info);
-  --wm-message-container-info-color: var(--wm-color-on-info);
-  --wm-message-container-info-border-color: var(--wm-color-info);
-  /* Warning message */
-  --wm-message-container-warning-background: var(--wm-color-warning);
-  --wm-message-container-warning-color: var(--wm-color-on-warning);
-  --wm-message-container-warning-border-color: var(--wm-color-warning);
-  /* Error message */
-  --wm-message-container-danger-background: var(--wm-color-error);
-  --wm-message-container-danger-color: var(--wm-color-on-error);
-  --wm-message-container-danger-border-color: var(--wm-color-error);
-  /* loading message */
-  --wm-message-container-loading-background: var(--wm-color-primary);
-  --wm-message-container-loading-color: var(--wm-color-on-primary);
-  --wm-message-container-loading-border-color: var(--wm-color-primary);
+  /*--radiobutton--*/
+  --wm-radiobutton-background: transparent;
+  --wm-radiobutton-border-width: 2px;
+  --wm-radiobutton-border-color: var(--wm-color-on-surface-variant);
+  --wm-radiobutton-border-radius: var(--wm-radius-circle);
+  --wm-radiobutton-background-selected: var(--wm-color-primary);
+  --wm-radiobutton-icon-color-selected: var(--wm-color-on-primary);
+  --wm-radiobutton-border-color-selected: var(--wm-color-primary);
+  --wm-radiobutton-state-hover: var(--wm-color-on-surface-hover);
+  --wm-radiobutton-state-focus: var(--wm-color-on-surface-focus);
+  --wm-radiobutton-selected-state-hover: var(--wm-color-primary-hover);
+  --wm-radiobutton-selected-state-focus: var(--wm-color-primary-focus);
+  /*--Rating--*/
+  --wm-rating-gap: var(--wm-space-2);
+  --wm-rating-icon-gap: var(--wm-space-0);
+  --wm-rating-icon-color: var(--wm-color-on-surface);
+  --wm-rating-icon-color-active: var(--wm-color-warning);
+  --wm-rating-icon-size: var(--wm-icon-size);
+  --wm-rating-icon-opacity-inactive: 0.38;
+  --wm-rating-icon-opacity-active: 1;
+  --wm-rating-icon-opacity-readonly: 0.38;
+  /*--Toast--*/
+  --wm-toast-container-width: 344px;
+  --wm-toast-container-shadow: var(--wm-elevation-shadow-3);
+  --wm-toast-container-border-radius: var(--wm-radius-xs);
+  --wm-toast-container-border-width: var(--wm-border-width);
+  --wm-toast-container-border-style: var(--wm-border-style);
+  --wm-toast-container-padding: 14px var(--wm-space-4) 14px var(--wm-space-12);
+  --wm-toast-container-gap: var(--wm-space-1);
+  --wm-toast-font-family: var(--wm-label-large-font-family);
+  --wm-toast-font-weight: var(--wm-label-large-font-weight);
+  --wm-toast-font-size: var(--wm-label-large-font-size);
+  --wm-toast-line-height: var(--wm-label-large-line-height);
+  --wm-toast-letter-spacing: var(--wm-label-large-letter-spacing);
+  --wm-toast-container-background: var(--wm-color-info);
+  --wm-toast-container-color: var(--wm-color-on-info);
+  --wm-toast-container-border-color: var(--wm-color-info);
+  --wm-toast-icon: "\f2ff";
+  --wm-toast-position-top: var(--wm-space-3);
+  --wm-toast-position-left: var(--wm-space-3);
+  --wm-toast-position-right: var(--wm-space-3);
+  --wm-toast-position-bottom: var(--wm-space-3);
+  /* Success toast */
+  --wm-toast-container-success-background: var(--wm-color-success);
+  --wm-toast-container-success-color: var(--wm-color-on-success);
+  --wm-toast-container-success-border-color: var(--wm-color-success);
+  --wm-toast-success-icon: "\f1cf";
+  /* info toast */
+  --wm-toast-container-info-background: var(--wm-color-info);
+  --wm-toast-container-info-color: var(--wm-color-on-info);
+  --wm-toast-container-info-border-color: var(--wm-color-info);
+  --wm-toast-info-icon: "\f2ff";
+  /* Warning toast */
+  --wm-toast-container-warning-background: var(--wm-color-warning);
+  --wm-toast-container-warning-color: var(--wm-color-on-warning);
+  --wm-toast-container-warning-border-color: var(--wm-color-warning);
+  --wm-toast-warning-icon: "\f24c";
+  /* Error toast */
+  --wm-toast-container-error-background: var(--wm-color-error);
+  --wm-toast-container-error-color: var(--wm-color-on-error);
+  --wm-toast-container-error-border-color: var(--wm-color-error);
+  --wm-toast-error-icon: "\f24d";
+  /*headings*/
+  --wm-headings-color: var(--wm-color-on-surface);
+  /*page content*/
+  --wm-page-content-padding: 0;
+  --wm-page-content-background: var(--wm-color-surface-container-lowest);
+  /*--Icon--*/
+  --wm-icon-gap: var(--wm-space-1);
+  /*--Grid Layout--*/
+  --wm-grid-layout-column-padding: var(--wm-space-2);
   /**--Page Layout--**/
   /*--app header--*/
   --wm-header-bg-color: var(--wm-color-secondary);
@@ -819,8 +907,10 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   /* Track */
   /* Handle */
   /* Handle on hover */
+  /* .app-fileupload .file-upload */
   /**--Layout--**/
   /** Layout styles */
+  /* toast styles */
   /*--bootstrap 5 utilities start--*/
   /* rtl:begin:remove */
   /*--bootstrap 5 utilities end--*/
@@ -4488,7 +4578,6 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
 .wm-app .fa-star:before {
   content: "\f005";
 }
-.wm-app .app-ratings .rating-style > label:before,
 .wm-app .fa-star-o:before {
   content: "\f006";
 }
@@ -11825,31 +11914,6 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
 .wm-app .app-required-input {
   color: red;
 }
-.wm-app .app-colorpicker.input-group {
-  width: 10em;
-  position: relative;
-}
-.wm-app .app-colorpicker.input-group .input-group-addon {
-  width: 30px;
-  position: absolute;
-  right: 0;
-  height: 100%;
-  z-index: 3;
-  pointer-events: none;
-  padding: 0;
-}
-.wm-app .app-colorpicker.input-group .input-group-addon .colored-box {
-  width: 100%;
-  height: 100%;
-  display: inline-block;
-  background-color: #fff;
-}
-.wm-app .app-colorpicker.input-group .dropdown {
-  position: absolute;
-}
-.wm-app .app-colorpicker.input-group .dropdown .dropdown-menu {
-  min-width: 129px;
-}
 .wm-app .app-grid .table,
 .wm-app .app-view,
 .wm-app .uib-day button,
@@ -11967,114 +12031,13 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   bottom: 0;
   position: fixed !important;
 }
-.wm-app .app-fileupload {
-  overflow: hidden;
+.wm-app .app-list,
+.wm-app .app-livelist {
   position: relative;
-  margin: 0 0 8px;
-}
-.wm-app .app-fileupload[disabled="disabled"] .app-multi-file-upload .caption,
-.wm-app .app-fileupload[disabled="disabled"] .app-multi-file-upload .drop-box,
-.wm-app .app-fileupload[disabled="disabled"] .app-multi-file-upload .form-horizontal .file-input,
-.wm-app .app-fileupload[disabled="disabled"] .app-single-file-upload .caption,
-.wm-app .app-fileupload[disabled="disabled"] .app-single-file-upload .drop-box,
-.wm-app .app-fileupload[disabled="disabled"] .app-single-file-upload .form-horizontal .file-input {
-  cursor: not-allowed;
-}
-.wm-app .app-fileupload[disabled="disabled"] .app-multi-file-upload .app-button-wrapper .app-button,
-.wm-app .app-fileupload[disabled="disabled"] .app-single-file-upload .app-button-wrapper .app-button {
-  opacity: 0.65;
-}
-.wm-app .app-fileupload .app-multi-file-upload,
-.wm-app .app-fileupload .app-single-file-upload {
-  position: relative;
-  min-height: 3em;
-  height: auto;
-}
-.wm-app .app-fileupload .app-multi-file-upload .app-button-wrapper,
-.wm-app .app-fileupload .app-single-file-upload .app-button-wrapper {
-  position: relative;
-  display: inline-block;
-  margin-right: 4px;
-}
-.wm-app .app-fileupload .file-upload {
-  width: 100%;
-  overflow-y: auto;
-}
-.wm-app .app-fileupload .file-upload .file-upload-status .upload-file-list .file-icon {
-  font-size: 1.5em;
-}
-.wm-app .app-fileupload .file-upload .file-upload-status .upload-file-list .file-upload-stop {
-  margin-top: 30px;
-}
-.wm-app .app-fileupload .file-upload .file-upload-status .upload-file-list .media-right a i,
-.wm-app .app-fileupload .file-upload .file-upload-status .upload-file-list .media-right span {
-  font-size: 1.5em;
-  text-decoration: none;
-}
-.wm-app .app-fileupload .file-upload .file-upload-status .upload-file-list .file-details .file-detail .uploaddetails {
-  margin: 0;
-}
-.wm-app .app-fileupload .file-upload .file-upload-status .upload-file-list .file-details .file-detail .uploaddetails .filesize,
-.wm-app .app-fileupload .file-upload .file-upload-status .upload-file-list .file-details .file-detail .uploaddetails .upload-title {
-  vertical-align: middle;
-  margin: 0 5pt;
-}
-.wm-app .app-fileupload .file-upload .file-upload-status .upload-file-list .file-details .file-detail .uploaddetails .upload-title {
-  height: 1.3em;
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
-.wm-app .app-fileupload .form-horizontal {
-  position: relative;
-}
-.wm-app .app-fileupload .form-horizontal .file-input {
-  position: absolute;
-  opacity: 0;
-  z-index: 2;
-  cursor: pointer;
-  width: 100%;
-  height: 100%;
-}
-.wm-app .app-fileupload .app-multi-file-upload {
-  width: 100%;
-  height: 100%;
-}
-.wm-app .app-fileupload .app-multi-file-upload .status {
-  border-bottom: 1px rgba(0, 0, 0, 0.05) solid;
-}
-.wm-app .app-fileupload .app-multi-file-upload .icon {
-  font-size: 2em;
-}
-.wm-app .app-fileupload .app-multi-file-upload .drop-box {
-  border: 1px dashed rgba(0, 0, 0, 0.05);
-  background-color: rgba(0, 0, 0, 0.05);
-  vertical-align: middle;
-  text-align: center;
-  cursor: pointer;
-}
-.wm-app .app-fileupload .app-multi-file-upload .drop-box.file-dragover {
-  background-color: rgba(0, 0, 0, 0.2);
-  color: #fff;
-}
-.wm-app .app-fileupload .app-multi-file-upload .app-anchor,
-.wm-app .app-list .app-list-item.active.list-group-item .app-anchor,
-.wm-app .app-list .app-list-item.active.list-group-item .app-label,
-.wm-app .app-livelist .app-list-item.active.list-group-item .app-anchor,
-.wm-app .app-livelist .app-list-item.active.list-group-item .app-label {
-  color: inherit;
-}
-.wm-app .app-fileupload .btn-default.highlight-drop-box,
-.wm-app .app-fileupload .drop-box.highlight-drop-box {
-  background-color: #eaf0f8;
-  border: 2px dashed #0c81b8;
-}
-.wm-app .app-list,
-.wm-app .app-livelist {
-  position: relative;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  min-height: 2em;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  min-height: 2em;
 }
 .wm-app .app-list.inline .app-list-item,
 .wm-app .app-livelist.inline .app-list-item {
@@ -13552,79 +13515,6 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   margin-top: 10px;
   display: inline-block;
 }
-.wm-app .app-ratings {
-  display: inline-block;
-  vertical-align: middle;
-  position: relative;
-  font-size: 1em;
-}
-.wm-app .app-ratings .ratings-wrapper > * {
-  vertical-align: middle;
-}
-.wm-app .app-ratings .active {
-  color: #f7dc6f;
-}
-.wm-app .app-ratings .disabled {
-  color: #d3d3d3;
-}
-.wm-app .app-ratings .ratings-wrapper > label.caption {
-  margin: auto 0.25em;
-  font-size: 120%;
-}
-.wm-app .app-ratings .rating-style {
-  display: inline-block;
-}
-.wm-app .app-ratings .rating-style .rating-label-hover:hover,
-.wm-app .app-ratings .rating-style .rating-label-hover:hover ~ label {
-  color: #dbc631;
-}
-.wm-app .app-ratings .rating-style > label {
-  position: relative;
-  float: right;
-  margin: 0;
-}
-.wm-app .app-ratings .rating-style > label:before {
-  margin: 1px;
-  font-family: FontAwesome;
-}
-.wm-app .app-ratings .rating-style > label.active:before {
-  content: "\f005";
-}
-.wm-app .app-ratings .ratings-container .ratings:before,
-.wm-app .app-ratings .ratings-container:before {
-  content: "\f005\f005\f005\f005\f005\f005\f005\f005\f005\f005";
-  font-family: FontAwesome;
-  top: 0;
-  left: 0;
-  white-space: nowrap;
-  overflow: hidden;
-}
-.wm-app .app-ratings .rating-style > label > input {
-  display: none;
-}
-.wm-app .app-ratings .ratings-container {
-  display: inline-block;
-  text-align: left;
-  position: relative;
-}
-.wm-app .app-ratings .ratings-container > * {
-  vertical-align: middle;
-}
-.wm-app .app-ratings .ratings-container:before {
-  position: absolute;
-  width: inherit;
-}
-.wm-app .app-ratings .ratings-container .ratings {
-  font-size: inherit;
-  left: 0;
-  width: 100%;
-  overflow: hidden;
-  display: inline-block;
-}
-.wm-app .app-ratings .ratings-container .ratings:before {
-  position: absolute;
-  width: inherit;
-}
 .wm-app .app-accordion-panel .panel-heading .panel-actions .panel-action i,
 .wm-app .app-card .panel-heading .panel-actions .panel-action i,
 .wm-app .app-panel .panel-heading .panel-actions .panel-action i {
@@ -17955,13 +17845,11 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   --wm-btn-state-layer-color: var(--wm-btn-danger-outlined-state-layer-color);
 }
 .wm-app .btn-text {
+  --wm-btn-color: var(--wm-btn-background);
   background: none !important;
   border: none !important;
   --wm-btn-state-layer-color: var(--wm-btn-background);
 }
-.wm-app .btn-text .btn-caption {
-  color: var(--wm-btn-background);
-}
 .wm-app .btn-elevated {
   box-shadow: var(--wm-btn-elevated);
 }
@@ -18153,18 +18041,37 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
 .wm-app .app-checkboxset.list-group.inline > li + li {
   margin: 0;
 }
-.wm-app .app-container {
+.wm-app .app-colorpicker.input-group {
+  width: 100%;
   position: relative;
 }
-.wm-app .app-outlined-container {
-  border: var(--wm-container-outlined-border-width) var(--wm-container-outlined-border-style) var(--wm-container-outlined-border-color);
+.wm-app .app-colorpicker.input-group .input-group-addon.colorpicker-container {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  position: absolute;
+  top: 50%;
+  right: 1px;
+  transform: translateY(-50%);
+  pointer-events: none;
 }
-.wm-app .app-elevation-container {
-  border-radius: var(--wm-container-elevation-border-radius);
-  box-shadow: var(--wm-container-elevation-shadow);
+.wm-app .app-colorpicker.input-group .input-group-addon.colorpicker-container .colored-box {
+  font-size: var(--wm-icon-size);
+  height: 50%;
+  width: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--wm-form-control-radius);
+  overflow: hidden;
 }
-.wm-app .app-currency {
+.wm-app .app-colorpicker.input-group .input-group-addon.colorpicker-container .colored-box:before {
+  content: "\f1ef";
+  font-family: wavicon;
   position: relative;
+  z-index: -1;
 }
 .wm-app .app-composite-widget {
   position: relative;
@@ -18306,6 +18213,124 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   font-weight: var(--wm-help-block-font-weight);
   line-height: var(--wm-help-block-line-height);
 }
+.wm-app .app-container {
+  position: relative;
+}
+.wm-app .app-outlined-container {
+  border: var(--wm-container-outlined-border-width) var(--wm-container-outlined-border-style) var(--wm-container-outlined-border-color);
+}
+.wm-app .app-elevation-container {
+  border-radius: var(--wm-container-elevation-border-radius);
+  box-shadow: var(--wm-container-elevation-shadow);
+}
+.wm-app .app-currency {
+  position: relative;
+}
+.wm-app .wm-app .app-fileupload {
+  position: relative;
+  overflow: hidden;
+}
+.wm-app .app-fileupload .file-upload {
+  width: 100%;
+  overflow-y: auto;
+}
+.wm-app .app-fileupload .app-single-file-upload {
+  position: relative;
+  display: inline-flex;
+  height: auto;
+  min-height: 3em;
+  margin-bottom: var(--wm-file-upload-bottom-space);
+}
+.wm-app .app-fileupload .app-single-file-upload .app-button-wrapper {
+  position: relative;
+  display: inline-flex;
+}
+.wm-app .app-fileupload .app-single-file-upload .app-button-wrapper .form-horizontal,
+.wm-app .app-fileupload .app-multi-file-upload .drop-box .form-horizontal {
+  position: relative;
+}
+.wm-app .app-fileupload .app-single-file-upload .app-button-wrapper .form-horizontal input,
+.wm-app .app-fileupload .app-multi-file-upload .drop-box .form-horizontal input {
+  position: absolute;
+  z-index: 2;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+  opacity: 0;
+}
+.wm-app .wm-app .app-fileupload > .file-upload .file-upload-status {
+  padding: var(--wm-file-upload-status-padding);
+  background: var(--wm-file-upload-status-background);
+  border: var(--wm-file-upload-status-border-width) var(--wm-file-upload-status-border-style) var(--wm-file-upload-status-border-color);
+  border-radius: var(--wm-file-upload-status-radius);
+  margin-bottom: var(--wm-file-upload-status-bottom-space);
+}
+.wm-app .wm-app .app-fileupload > .file-upload .file-upload-status .upload-file-list {
+  display: flex;
+  align-items: center;
+  gap: var(--wm-file-upload-gap);
+}
+.wm-app .wm-app .app-fileupload > .file-upload .file-upload-status .upload-file-list .file-details {
+  flex-grow: 1;
+}
+.wm-app .wm-app .app-fileupload .app-multi-file-upload {
+  width: 100%;
+  height: 100%;
+  margin-bottom: var(--wm-file-upload-drop-box-bottom-space);
+}
+.wm-app .app-fileupload .app-multi-file-upload .drop-box {
+  border: var(--wm-file-upload-status-border-width) dashed var(--wm-file-upload-status-border-color);
+  background-color: var(--wm-file-upload-drop-box-background);
+  cursor: pointer;
+  height: 100px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: var(--wm-file-upload-drop-box-gap);
+  border-radius: var(--wm-file-upload-multi-file-radius);
+}
+.wm-app .app-fileupload .app-multi-file-upload .drop-box .message {
+  text-align: center;
+  cursor: pointer;
+}
+.wm-app .app-fileupload .app-multi-file-upload .drop-box .message .caption {
+  color: var(--wm-file-upload-message-caption-color);
+  font-size: var(--wm-file-upload-message-caption-font-size);
+  font-weight: var(--wm-file-upload-message-caption-font-weight);
+  line-height: var(--wm-file-upload-message-caption-line-height);
+}
+.wm-app .app-fileupload .app-multi-file-upload .drop-box .message .app-anchor {
+  color: var(--wm-file-upload-message-anchor-color);
+  font-size: var(--wm-file-upload-message-anchor-font-size);
+  font-weight: var(--wm-file-upload-message-anchor-font-weight);
+  line-height: var(--wm-file-upload-message-anchor-line-height);
+}
+.wm-app .wm-app .app-fileupload > .file-upload .file-upload-status .upload-file-list .file-details .uploaddetails {
+  word-wrap: break-word;
+  display: block;
+}
+.wm-app .wm-app .app-fileupload > .file-upload .file-upload-status .upload-file-list .file-details .uploaddetails .upload-title {
+  width: auto;
+  color: var(--wm-file-upload-title-color);
+  font-size: var(--wm-file-upload-title-font-size);
+  font-weight: var(--wm-file-upload-title-font-weight);
+  line-height: var(--wm-file-upload-title-line-height);
+}
+.wm-app .wm-app .app-fileupload > .file-upload .file-upload-status .upload-file-list .file-details .uploaddetails .filesize {
+  color: var(--wm-file-upload-size-color);
+  font-size: var(--wm-file-upload-size-font-size);
+  font-weight: var(--wm-file-upload-size-font-weight);
+  line-height: var(--wm-file-upload-size-line-height);
+}
+.wm-app .wm-app .app-fileupload .file-upload .file-upload-status .upload-file-list .media-right span.status-icon,
+.wm-app .wm-app .app-fileupload .file-upload .file-upload-status .upload-file-list .media-right a.btn > i {
+  font-size: var(--wm-file-upload-media-icon-size);
+}
+.wm-app .wm-app .app-fileupload .file-upload .file-upload-status .upload-file-list .media-right a.btn {
+  min-height: unset;
+  padding: var(--wm-file-upload-media-icon-padding);
+}
 .wm-app .app-grid-layout {
   display: flex;
   flex-direction: column;
@@ -20229,9 +20254,204 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
 .wm-app .app-radioset {
   position: relative;
 }
+.wm-app .app-ratings {
+  display: inline-flex;
+  position: relative;
+}
+.wm-app .app-ratings .ratings-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--wm-rating-gap);
+}
+.wm-app .app-ratings .ratings-wrapper .rating-style {
+  position: relative;
+  display: inline-flex;
+  flex-direction: row-reverse;
+  gap: var(--wm-rating-icon-gap);
+}
+.wm-app .app-ratings .ratings-wrapper .rating-style input {
+  display: none;
+}
+.wm-app .app-ratings .ratings-wrapper .rating-style label {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--wm-rating-icon-color);
+  font-size: var(--wm-rating-icon-size);
+  width: var(--wm-rating-icon-size);
+  height: var(--wm-rating-icon-size);
+  opacity: var(--wm-rating-icon-opacity-inactive);
+  transition: all 0.05s ease-in-out;
+  cursor: pointer;
+}
+.wm-app .app-ratings .ratings-wrapper .rating-style label:before {
+  content: "\f4c1";
+  font-family: wavicon;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: inherit;
+  height: 100%;
+  width: 100%;
+}
+.wm-app .app-ratings .ratings-wrapper .rating-style label:hover,
+.wm-app .app-ratings .ratings-wrapper .rating-style label:hover ~ label,
+.wm-app .app-ratings .ratings-wrapper .rating-style label.active {
+  opacity: var(--wm-rating-icon-opacity-active);
+  color: var(--wm-rating-icon-color-active);
+}
+.wm-app .app-ratings .ratings-wrapper .rating-style label:hover:before,
+.wm-app .app-ratings .ratings-wrapper .rating-style label:hover ~ label:before,
+.wm-app .app-ratings .ratings-wrapper .rating-style label.active:before {
+  content: "\f4c3";
+}
+.wm-app .app-ratings .ratings-wrapper .rating-style label:hover {
+  transform: scale(1.2);
+}
+.wm-app .app-ratings .ratings-container {
+  font-size: var(--wm-rating-icon-size);
+  overflow: hidden;
+}
+.wm-app .app-ratings .ratings-container:before {
+  content: "\f4c1\f4c1\f4c1\f4c1\f4c1\f4c1\f4c1\f4c1\f4c1\f4c1\f4c1\f4c1\f4c1\f4c1";
+  font-family: wavicon;
+  top: 0;
+  left: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  opacity: var(--wm-rating-icon-opacity-inactive);
+}
+.wm-app .app-ratings .ratings-container .ratings.active {
+  color: var(--wm-rating-icon-color-active);
+  position: absolute;
+  top: 0;
+  overflow: hidden;
+}
+.wm-app .app-ratings .ratings-container .ratings.active:before {
+  content: "\f4c3\f4c3\f4c3\f4c3\f4c3\f4c3\f4c3\f4c3\f4c3\f4c3\f4c3\f4c3\f4c3\f4c3";
+  font-family: wavicon;
+  top: 0;
+  left: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  opacity: var(--wm-rating-icon-opacity-active);
+}
+.wm-app .app-ratings[readonly="true"] {
+  opacity: var(--wm-rating-icon-opacity-readonly);
+}
 .wm-app .app-textarea {
   position: relative;
 }
+.wm-app .toast-container {
+  position: fixed;
+  z-index: 999999;
+  pointer-events: auto;
+  max-height: 80%;
+  overflow: unset;
+}
+.wm-app .toast-container .toast {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--wm-toast-container-gap);
+  flex-shrink: 0;
+  width: var(--wm-toast-container-width);
+  margin: auto;
+  padding: var(--wm-toast-container-padding);
+  border: var(--wm-toast-container-border-width) var(--wm-toast-container-border-style) var(--wm-toast-container-border-color);
+  border-radius: var(--wm-toast-container-border-radius);
+  background: var(--wm-toast-container-background);
+  color: var(--wm-toast-container-color);
+  box-shadow: var(--wm-toast-container-shadow);
+  cursor: pointer;
+}
+.wm-app .toast-container .toast:before {
+  position: absolute;
+  content: var(--wm-toast-icon);
+  font-family: wavicon;
+  top: 14px;
+  left: 12px;
+  font-size: var(--wm-icon-size-md);
+  min-width: var(--wm-icon-size-md);
+  height: var(--wm-icon-size-md);
+}
+.wm-app .toast-container .toast .toast-message {
+  font-family: var(--wm-toast-font-famil);
+  font-size: var(--wm-toast-font-size);
+  font-weight: var(--wm-toast-font-weight);
+  line-height: var(--wm-toast-line-height);
+  letter-spacing: var(--wm-toast-letter-spacing);
+  word-wrap: break-word;
+}
+.wm-app .toast-container .toast.toast-success {
+  --wm-toast-container-color: var(--wm-toast-container-success-color);
+  --wm-toast-container-background: var(--wm-toast-container-success-background);
+  --wm-toast-container-border-color: var(--wm-toast-container-success-border-color);
+  --wm-toast-icon: var(--wm-toast-success-icon);
+}
+.wm-app .toast-container .toast.toast-info {
+  --wm-toast-container-color: var(--wm-toast-container-info-color);
+  --wm-toast-container-background: var(--wm-toast-container-info-background);
+  --wm-toast-container-border-color: var(--wm-toast-container-info-border-color);
+  --wm-toast-icon: var(--wm-toast-info-icon);
+}
+.wm-app .toast-container .toast.toast-warning {
+  --wm-toast-container-color: var(--wm-toast-container-warning-color);
+  --wm-toast-container-background: var(--wm-toast-container-warning-background);
+  --wm-toast-container-border-color: var(--wm-toast-container-warning-border-color);
+  --wm-toast-icon: var(--wm-toast-warning-icon);
+}
+.wm-app .toast-container .toast.toast-error {
+  --wm-toast-container-color: var(--wm-toast-container-error-color);
+  --wm-toast-container-background: var(--wm-toast-container-error-background);
+  --wm-toast-container-border-color: var(--wm-toast-container-error-border-color);
+  --wm-toast-icon: var(--wm-toast-error-icon);
+}
+.wm-app .toast-top-left {
+  top: var(--wm-toast-position-top);
+  left: var(--wm-toast-position-left);
+}
+.wm-app .toast-top-center {
+  top: var(--wm-toast-position-top);
+}
+.wm-app .toast-top-right {
+  top: var(--wm-toast-position-top);
+  right: var(--wm-toast-position-right);
+}
+.wm-app .toast-center-left {
+  left: var(--wm-toast-position-left);
+  top: 50%;
+  margin-top: -30px;
+}
+.wm-app .toast-center-center {
+  left: 50%;
+  top: 50%;
+  margin-top: -30px;
+  margin-left: -150px;
+}
+.wm-app .toast-center-right {
+  right: var(--wm-toast-position-right);
+  top: 50%;
+  margin-top: -30px;
+}
+.wm-app .toast-bottom-left {
+  bottom: var(--wm-toast-position-bottom);
+  left: var(--wm-toast-position-left);
+}
+.wm-app .toast-bottom-center {
+  bottom: var(--wm-toast-position-bottom);
+}
+.wm-app .toast-bottom-right {
+  right: var(--wm-toast-position-right);
+  bottom: var(--wm-toast-position-bottom);
+}
+.wm-app .toast-bottom-center,
+.wm-app .toast-center,
+.wm-app .toast-top-center {
+  width: auto;
+  margin: 0 calc(50% - calc(var(--wm-toast-container-width)/2));
+}
 .wm-app .app-video {
   position: relative;
   height: 150px;
@@ -24826,7 +25046,8 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   z-index: 3 !important;
 }
 .wm-app [hidden],
-.wm-app [hidden="true"] {
+.wm-app [hidden="true"],
+.wm-app .hidden {
   display: none !important;
 }
 .wm-app .pointer {