@wavemaker/foundation-css 12.0.0-next.45033 → 12.0.0-next.45034

foundation-css/foundation/foundation.css

@@ -589,9 +589,9 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   --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-caption-color: var(--wm-color-on-surface);
+  --wm-caption-margin: var(--wm-space-0);
+  --wm-caption-padding: var(--wm-space-0);
   --wm-form-control-color: var(--wm-color-on-surface);
   --wm-form-control-background: transparent;
   --wm-form-control-border-width: var(--wm-border-width);
@@ -638,24 +638,24 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   --wm-datepicker-active-color: var(--wm-color-on-primary);
   --wm-datepicker-previous-icon: "\f30f";
   --wm-datepicker-next-icon: "\f310";
-  --wm-datepicker-font-family: var(--wm-body-large-font-weight);
-  --wm-datepicker-font-size: var(--wm-body-large-font-size);
-  --wm-datepicker-font-weight: var(--wm-font-weight-regular);
-  --wm-datepicker-line-height: var(--wm-body-large-line-height);
-  --wm-datepicker-letter-spacing: var(--wm-body-large-letter-spacing);
-  --wm-datepicker-date-width: var(--wm-space-10);
-  --wm-datepicker-date-height: var(--wm-space-10);
+  --wm-datepicker-font-family: var(--wm-body-medium-font-family);
+  --wm-datepicker-font-size: var(--wm-body-medium-font-size);
+  --wm-datepicker-font-weight: var(--wm-body-medium-font-weight);
+  --wm-datepicker-line-height: var(--wm-body-medium-line-height);
+  --wm-datepicker-letter-spacing: var(--wm-body-medium-letter-spacing);
+  --wm-datepicker-date-width: var(--wm-space-8);
+  --wm-datepicker-date-height: var(--wm-space-8);
   --wm-datepicker-date-color: var(--wm-color-on-surface);
   --wm-datepicker-date-background: var(--wm-color-surface-container-high);
   --wm-datepicker-date-border-width: var(--wm-border-width);
   --wm-datepicker-date-border-style: var(--wm-border-style);
   --wm-datepicker-date-border-color: var(--wm-color-surface-container-high);
   --wm-datepicker-date-border-radius: var(--wm-radius-pill);
-  --wm-datepicker-date-font-family: var(--wm-body-large-font-weight);
-  --wm-datepicker-date-font-size: var(--wm-body-large-font-size);
-  --wm-datepicker-date-font-weight: var(--wm-font-weight-regular);
-  --wm-datepicker-date-line-height: var(--wm-body-large-line-height);
-  --wm-datepicker-date-letter-spacing: var(--wm-body-large-letter-spacing);
+  --wm-datepicker-date-font-family: var(--wm-body-medium-font-family);
+  --wm-datepicker-date-font-size: var(--wm-body-medium-font-size);
+  --wm-datepicker-date-font-weight: var(--wm-body-medium-font-weight);
+  --wm-datepicker-date-line-height: var(--wm-body-medium-line-height);
+  --wm-datepicker-date-letter-spacing: var(--wm-body-medium-letter-spacing);
   --wm-datepicker-date-other-month-color: var(--wm-color-on-surface-variant);
   --wm-datepicker-date-state-layer-color: var(--wm-color-on-surface-variant);
   --wm-datepicker-date-hover-state-layer-opacity: var(--wm-opacity-hover);
@@ -702,7 +702,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   --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-padding: var(--wm-space-3) 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);
@@ -732,6 +732,65 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   --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);
+  /* panel variables */
+  --wm-panel-background: var(--wm-color-surface-container-lowest);
+  --wm-panel-radius: var(--wm-radius-md);
+  --wm-panel-shadow: var(--wm-elevation-shadow-1);
+  --wm-panel-heading-gap: var(--wm-space-2);
+  --wm-panel-heading-padding: var(--wm-space-4);
+  --wm-panel-heading-font-family: var(--wm-h4-font-family);
+  --wm-panel-heading-font-size: var(--wm-h4-font-size);
+  --wm-panel-heading-font-weight: var(--wm-h4-font-weight);
+  --wm-panel-heading-line-height: var(--wm-h4-line-height);
+  --wm-panel-heading-letter-spacing: var(--wm-h4-letter-spacing);
+  --wm-panel-heading-color: var(--wm-color-on-surface);
+  --wm-panel-heading-background: var(--wm-color-surface-container-lowest);
+  --wm-panel-description-font-family: var(--wm-body-medium-font-family);
+  --wm-panel-description-font-size: var(--wm-body-medium-font-size);
+  --wm-panel-description-font-weight: var(--wm-body-medium-font-weight);
+  --wm-panel-description-line-height: var(--wm-body-medium-line-height);
+  --wm-panel-description-letter-spacing: var(--wm-body-medium-letter-spacing);
+  --wm-panel-description-color: var(--wm-color-on-surface);
+  --wm-panel-actions-gap: var(--wm-space-2);
+  --wm-panel-content-padding: var(--wm-space-4);
+  --wm-panel-help-message-header-background: var(--wm-color-surface-container-lowest);
+  --wm-panel-help-message-border: var(--wm-color-outline-variant);
+  --wm-panel-help-message-border-width: var(--wm-border-width);
+  --wm-panel-help-message-border-style: var(--wm-border-style);
+  --wm-panel-help-message-padding: var(--wm-space-2);
+  --wm-panel-help-message-background: #fffed0;
+  --wm-panel-footer-padding: var(--wm-space-4);
+  --wm-panel-footer-border: var(--wm-color-outline-variant);
+  --wm-panel-footer-border-width: var(--wm-border-width);
+  --wm-panel-footer-border-style: var(--wm-border-style);
+  /* primary */
+  --wm-panel-background-primary: var(--wm-color-primary-container);
+  --wm-panel-heading-color-primary: var(--wm-color-primary);
+  --wm-panel-description-color-primary: var(--wm-color-primary);
+  /* secondary */
+  --wm-panel-background-secondary: var(--wm-color-secondary-container);
+  --wm-panel-heading-color-secondary: var(--wm-color-secondary);
+  --wm-panel-description-color-secondary: var(--wm-color-secondary);
+  /* tertiary */
+  --wm-panel-background-tertiary: var(--wm-color-tertiary-container);
+  --wm-panel-heading-color-tertiary: var(--wm-color-tertiary);
+  --wm-panel-description-color-tertiary: var(--wm-color-tertiary);
+  /* success */
+  --wm-panel-background-success: var(--wm-color-success-container);
+  --wm-panel-heading-color-success: var(--wm-color-success);
+  --wm-panel-description-color-success: var(--wm-color-success);
+  /* info */
+  --wm-panel-background-info: var(--wm-color-info-container);
+  --wm-panel-heading-color-info: var(--wm-color-info);
+  --wm-panel-description-color-info: var(--wm-color-info);
+  /* warning */
+  --wm-panel-background-warning: var(--wm-color-warning-container);
+  --wm-panel-heading-color-warning: var(--wm-color-warning);
+  --wm-panel-description-color-warning: var(--wm-color-warning);
+  /* danger */
+  --wm-panel-background-danger: var(--wm-color-error-container);
+  --wm-panel-heading-color-danger: var(--wm-color-error);
+  --wm-panel-description-color-danger: var(--wm-color-error);
   /*--Picture--*/
   --wm-picture-radius-rounded: var(--wm-radius-xs);
   --wm-picture-radius-circle: var(--wm-radius-circle);
@@ -799,14 +858,16 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   --wm-rating-icon-opacity-active: 1;
   --wm-rating-icon-opacity-readonly: 0.38;
   /* Timepicker styles */
-  --wm-timepicker-font-family: var(--wm-display-small-font-family);
-  --wm-timepicker-font-size: var(--wm-display-small-font-size);
-  --wm-timepicker-font-weight: var(--wm-display-small-font-weight);
-  --wm-timepicker-line-height: var(--wm-display-small-line-height);
-  --wm-timepicker-letter-spacing: var(--wm-display-small-letter-spacing);
+  --wm-timepicker-input-font-family: var(--wm-h3-font-family);
+  --wm-timepicker-input-font-size: var(--wm-h3-font-size);
+  --wm-timepicker-input-font-weight: var(--wm-h3-font-weight);
+  --wm-timepicker-input-line-height: var(--wm-h3-line-height);
+  --wm-timepicker-input-letter-spacing: var(--wm-h3-letter-spacing);
+  --wm-timepicker-input-width: 60px;
+  --wm-timepicker-input-padding: var(--wm-space-0);
   --wm-timepicker-background: var(--wm-color-surface-container-high);
   --wm-timepicker-border-radius: var(--wm-radius-lg);
-  --wm-timepicker-padding: var(--wm-space-6) var(--wm-space-6);
+  --wm-timepicker-padding: var(--wm-space-4);
   --wm-timepicker-period-selector-border: var(--wm-border-width) var(--wm-border-style) var(--wm-color-outline);
   --wm-timepicker-period-selector-border-radius: var(--wm-radius-sm);
   --wm-timepicker-period-selector-background: var(--wm-color-tertiary-container);
@@ -815,7 +876,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   --wm-timepicker-period-selector-font-size: var(--wm-h5-font-size);
   --wm-timepicker-period-selector-font-weight: var(--wm-h5-font-weight);
   --wm-timepicker-period-selector-line-height: var(--wm-h5-line-height);
-  --wm-timepicker-period-selector-letter-spacing: var(--wm-h5-font-letter-spacing);
+  --wm-timepicker-period-selector-letter-spacing: var(--wm-h5-letter-spacing);
   /*--Toast--*/
   --wm-toast-container-width: 344px;
   --wm-toast-container-shadow: var(--wm-elevation-shadow-3);
@@ -996,6 +1057,15 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   margin: 0;
   list-style-type: none;
 }
+.wm-app .app-badge {
+  padding: var(--wm-space-0) var(--wm-space-1);
+  border-radius: var(--wm-radius-md);
+  font-family: var(--wm-label-small-font-family);
+  font-size: var(--wm-label-small-font-size);
+  font-weight: var(--wm-label-small-font-weight);
+  line-height: var(--wm-label-small-line-height);
+  letter-spacing: var(--wm-label-small-letter-spacing);
+}
 .wm-app::-webkit-scrollbar,
 .wm-app ::-webkit-scrollbar {
   width: var(--wm-scroll-bar-width);
@@ -11378,154 +11448,6 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   height: 100%;
   min-height: 500px;
 }
-.wm-app .app-datanavigator {
-  position: relative;
-  overflow-y: auto;
-}
-.wm-app .app-datanavigator .pagination,
-.wm-app .app-datanavigator ul.pager,
-.wm-app .app-datanavigator ul.pagination {
-  margin: 0;
-}
-.wm-app .app-datanavigator .pagination > li.pagecount > a,
-.wm-app .app-datanavigator ul.pager > li.pagecount > a,
-.wm-app .app-datanavigator ul.pagination > li.pagecount > a {
-  width: 4em;
-  padding-left: 0;
-  padding-right: 0;
-  height: 100%;
-}
-.wm-app .app-datanavigator .pagination > li.pagecount > a.ng-invalid,
-.wm-app .app-datanavigator ul.pager > li.pagecount > a.ng-invalid,
-.wm-app .app-datanavigator ul.pagination > li.pagecount > a.ng-invalid {
-  margin-right: 1px;
-  border-color: red;
-}
-.wm-app .app-datanavigator .pagination > li.pagecount > a .form-control,
-.wm-app .app-datanavigator ul.pager > li.pagecount > a .form-control,
-.wm-app .app-datanavigator ul.pagination > li.pagecount > a .form-control {
-  height: auto;
-  border: none;
-  box-shadow: none;
-  padding: 0 2px;
-  font-size: inherit !important;
-  background-color: transparent;
-  line-height: inherit;
-}
-.wm-app .app-datanavigator .pagination > li.totalcount.basiccount > a,
-.wm-app .app-datanavigator ul.pager > li.totalcount.basiccount > a,
-.wm-app .app-datanavigator ul.pagination > li.totalcount.basiccount > a {
-  border-left: 0;
-}
-.wm-app .app-datanavigator ul.pager {
-  display: inline-block;
-}
-.wm-app .app-datanavigator ul.pager.pager-sm {
-  zoom: 80%;
-}
-.wm-app .app-datanavigator .pagination.basic.pagination-sm .pagination-first a:before,
-.wm-app .app-datanavigator .pagination.basic.pagination-sm .pagination-last a:before,
-.wm-app .app-datanavigator .pagination.basic.pagination-sm .pagination-next a:before,
-.wm-app .app-datanavigator .pagination.basic.pagination-sm .pagination-prev a:before,
-.wm-app .app-datanavigator ul.pagination.basic.pagination-sm .pagination-first a:before,
-.wm-app .app-datanavigator ul.pagination.basic.pagination-sm .pagination-last a:before,
-.wm-app .app-datanavigator ul.pagination.basic.pagination-sm .pagination-next a:before,
-.wm-app .app-datanavigator ul.pagination.basic.pagination-sm .pagination-prev a:before {
-  font-size: 11pt;
-}
-.wm-app .app-datanavigator .pagination.basic > li > a,
-.wm-app .app-datanavigator ul.pagination.basic > li > a {
-  color: inherit;
-  background-color: transparent;
-  border-width: 0;
-  text-align: center;
-}
-.wm-app .app-datanavigator .pagination.basic > li.active > a,
-.wm-app .app-datanavigator .pagination.basic > li:focus > a,
-.wm-app .app-datanavigator .pagination.basic > li:hover > a,
-.wm-app .app-datanavigator ul.pagination.basic > li.active > a,
-.wm-app .app-datanavigator ul.pagination.basic > li:focus > a,
-.wm-app .app-datanavigator ul.pagination.basic > li:hover > a {
-  color: inherit;
-  background-color: transparent;
-  border-bottom-width: 3px;
-}
-.wm-app .app-datanavigator .pagination.basic > li.active > a:hover,
-.wm-app .app-datanavigator .pagination.basic > li:focus > a:hover,
-.wm-app .app-datanavigator .pagination.basic > li:hover > a:hover,
-.wm-app .app-datanavigator ul.pagination.basic > li.active > a:hover,
-.wm-app .app-datanavigator ul.pagination.basic > li:focus > a:hover,
-.wm-app .app-datanavigator ul.pagination.basic > li:hover > a:hover {
-  background-color: transparent;
-  border-bottom-width: 3px;
-  color: inherit;
-  font-weight: 700;
-}
-.wm-app .app-datanavigator .pagination.basic > li.disabled a[disabled],
-.wm-app .app-datanavigator ul.pagination.basic > li.disabled a[disabled] {
-  pointer-events: none;
-  display: inline-block;
-  padding-left: 0;
-  padding-right: 0;
-  text-align: center;
-}
-.wm-app .app-datanavigator .pagination.basic > li.disabled a[disabled]:before,
-.wm-app .app-datanavigator ul.pagination.basic > li.disabled a[disabled]:before {
-  display: inline-block;
-}
-.wm-app .app-datanavigator .pagination.basic .pagination-first a,
-.wm-app .app-datanavigator .pagination.basic .pagination-last a,
-.wm-app .app-datanavigator .pagination.basic .pagination-next a,
-.wm-app .app-datanavigator .pagination.basic .pagination-prev a,
-.wm-app .app-datanavigator ul.pagination.basic .pagination-first a,
-.wm-app .app-datanavigator ul.pagination.basic .pagination-last a,
-.wm-app .app-datanavigator ul.pagination.basic .pagination-next a,
-.wm-app .app-datanavigator ul.pagination.basic .pagination-prev a {
-  padding: 0;
-  font-size: 0;
-  display: inline-table;
-}
-.wm-app .app-datanavigator .pagination.basic .pagination-first a:before,
-.wm-app .app-datanavigator .pagination.basic .pagination-last a:before,
-.wm-app .app-datanavigator .pagination.basic .pagination-next a:before,
-.wm-app .app-datanavigator .pagination.basic .pagination-prev a:before,
-.wm-app .app-datanavigator ul.pagination.basic .pagination-first a:before,
-.wm-app .app-datanavigator ul.pagination.basic .pagination-last a:before,
-.wm-app .app-datanavigator ul.pagination.basic .pagination-next a:before,
-.wm-app .app-datanavigator ul.pagination.basic .pagination-prev a:before {
-  font-family: wavicon;
-  font-size: 16pt;
-  vertical-align: initial;
-  width: 16pt;
-  height: 16pt;
-  position: relative;
-}
-.wm-app .app-datanavigator .pagination.basic .pagination-next a:before,
-.wm-app .app-datanavigator ul.pagination.basic .pagination-next a:before {
-  content: "\f1d2";
-}
-.wm-app .app-datanavigator .pagination.basic .pagination-first a:before,
-.wm-app .app-datanavigator ul.pagination.basic .pagination-first a:before {
-  content: "\f288";
-}
-.wm-app .app-datanavigator .pagination.basic .pagination-last a:before,
-.wm-app .app-datanavigator ul.pagination.basic .pagination-last a:before {
-  content: "\f322";
-}
-.wm-app .app-datanavigator .pagination.active,
-.wm-app .app-datanavigator ul.pagination.active {
-  background-color: transparent;
-  border-bottom-width: 2px;
-}
-.wm-app .app-datanavigator li.totalcount.basiccount a:hover,
-.wm-app .app-datanavigator li.totalcount.basiccount > a {
-  color: inherit;
-  background-color: transparent;
-  border-width: 0;
-}
-.wm-app .app-datanavigator[navigation="Pager"] {
-  overflow: hidden;
-}
 .wm-app .app-grid {
   position: relative;
   height: auto;
@@ -11901,9 +11823,6 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
 .wm-app .wm-mobile-app .app-media-fullscreen .app-mobile-navbar .left-nav-btn {
   display: none;
 }
-.wm-app .app-datagrid-paginator .pagination-sm li a {
-  padding-top: 6px;
-}
 .wm-app .dropdown-menu.matchmode-dropdown {
   z-index: 2000;
   max-height: 300px;
@@ -12266,110 +12185,6 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
 .wm-app .app-calendar .fc .fc-divider {
   margin: 0;
 }
-.wm-app .app-livefilter {
-  position: relative;
-}
-.wm-app .app-livefilter .panel-heading .panel-title {
-  display: table;
-  width: 100%;
-}
-.wm-app .app-livefilter .panel-heading .panel-actions {
-  display: table-cell;
-  text-align: right;
-}
-.wm-app .app-livefilter .panel-heading .panel-actions .panel-action {
-  background: 0 0;
-  border: none;
-  padding: 0;
-  outline: 0;
-}
-.wm-app .app-livefilter .form-control {
-  display: inline-block;
-}
-.wm-app .app-livefilter .app-button,
-.wm-app .app-livefilter .form-control {
-  margin-bottom: 4px;
-  margin-right: 8px;
-}
-.wm-app .app-livefilter .app-button {
-  float: right;
-}
-.wm-app .app-livefilter .form-group .list-group {
-  margin-bottom: 0;
-}
-.wm-app .app-livefilter .form-group .checkbox,
-.wm-app .app-livefilter .form-group .radio {
-  margin-top: 0;
-}
-.wm-app .app-livefilter .form-group div.col-md-4 {
-  padding-right: 4px;
-}
-.wm-app .app-livefilter .form-group .inline .checkbox,
-.wm-app .app-livefilter .form-group .inline .radio {
-  margin-top: 10px;
-}
-.wm-app .app-livefilter .form-control,
-.wm-app .app-liveform .form-control {
-  border-radius: 0;
-}
-.wm-app .app-livefilter .app-date .input-group-btn .btn.btn-default,
-.wm-app .app-livefilter .app-date .input-group-btn .btn.btn-default:hover,
-.wm-app .app-livefilter .app-datetime .input-group-btn .btn.btn-default,
-.wm-app .app-livefilter .app-datetime .input-group-btn .btn.btn-default:hover,
-.wm-app .app-livefilter .app-timeinput .input-group-btn .btn.btn-default,
-.wm-app .app-livefilter .app-timeinput .input-group-btn .btn.btn-default:hover,
-.wm-app .app-liveform .app-date .input-group-btn .btn.btn-default,
-.wm-app .app-liveform .app-date .input-group-btn .btn.btn-default:hover,
-.wm-app .app-liveform .app-datetime .input-group-btn .btn.btn-default,
-.wm-app .app-liveform .app-datetime .input-group-btn .btn.btn-default:hover,
-.wm-app .app-liveform .app-timeinput .input-group-btn .btn.btn-default,
-.wm-app .app-liveform .app-timeinput .input-group-btn .btn.btn-default:hover {
-  border-radius: 0;
-  border: 1px solid rgba(0, 0, 0, 0.1);
-}
-.wm-app .app-livefilter .app-switch .btn-group > .btn.btn-default,
-.wm-app .app-livefilter .app-switch .btn-group > .btn.btn-default.active,
-.wm-app .app-livefilter .app-switch .btn-group > .btn.btn-default:focus,
-.wm-app .app-livefilter .app-switch .btn-group > .btn.btn-default:hover,
-.wm-app .app-liveform .app-switch .btn-group > .btn.btn-default,
-.wm-app .app-liveform .app-switch .btn-group > .btn.btn-default.active,
-.wm-app .app-liveform .app-switch .btn-group > .btn.btn-default:focus,
-.wm-app .app-liveform .app-switch .btn-group > .btn.btn-default:hover {
-  border: 1px solid rgba(0, 0, 0, 0.1);
-}
-.wm-app .app-livefilter.align-right.position-top .app-checkbox.checkbox .app-checkboxset-label input[type="checkbox"],
-.wm-app .app-livefilter.align-right.position-top .app-checkbox.checkbox .app-checkboxset-label input[type="radio"],
-.wm-app .app-livefilter.align-right.position-top .app-checkbox.checkbox .app-radioset-label input[type="checkbox"],
-.wm-app .app-livefilter.align-right.position-top .app-checkbox.checkbox .app-radioset-label input[type="radio"],
-.wm-app .app-livefilter.align-right.position-top .radio.app-radio .app-checkboxset-label input[type="checkbox"],
-.wm-app .app-livefilter.align-right.position-top .radio.app-radio .app-checkboxset-label input[type="radio"],
-.wm-app .app-livefilter.align-right.position-top .radio.app-radio .app-radioset-label input[type="checkbox"],
-.wm-app .app-livefilter.align-right.position-top .radio.app-radio .app-radioset-label input[type="radio"],
-.wm-app .app-liveform.align-right.position-top .app-checkbox.checkbox .app-checkboxset-label input[type="checkbox"],
-.wm-app .app-liveform.align-right.position-top .app-checkbox.checkbox .app-checkboxset-label input[type="radio"],
-.wm-app .app-liveform.align-right.position-top .app-checkbox.checkbox .app-radioset-label input[type="checkbox"],
-.wm-app .app-liveform.align-right.position-top .app-checkbox.checkbox .app-radioset-label input[type="radio"],
-.wm-app .app-liveform.align-right.position-top .radio.app-radio .app-checkboxset-label input[type="checkbox"],
-.wm-app .app-liveform.align-right.position-top .radio.app-radio .app-checkboxset-label input[type="radio"],
-.wm-app .app-liveform.align-right.position-top .radio.app-radio .app-radioset-label input[type="checkbox"],
-.wm-app .app-liveform.align-right.position-top .radio.app-radio .app-radioset-label input[type="radio"] {
-  margin-right: -20px;
-}
-.wm-app .app-livefilter.align-right.position-top .app-switch .btn-group .btn.btn-default:first-child,
-.wm-app .app-liveform.align-right.position-top .app-switch .btn-group .btn.btn-default:first-child {
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  border-radius: 0 19px 19px 0;
-}
-.wm-app .app-livefilter.align-right.position-top .app-switch .btn-group .btn.btn-default:last-child,
-.wm-app .app-liveform.align-right.position-top .app-switch .btn-group .btn.btn-default:last-child {
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  border-radius: 19px 0 0 19px;
-}
-.wm-app .app-form .app-chips.readonly .app-chip-search,
-.wm-app .app-livefilter .app-chips.readonly .app-chip-search,
-.wm-app .app-liveform .app-chips.readonly .app-chip-search {
-  display: none;
-}
 .wm-app .app-login {
   position: relative;
   overflow: auto;
@@ -12469,11 +12284,6 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   font-weight: 700;
   font-size: 24pt;
 }
-.wm-app .app-form .overlay {
-  background: rgba(255, 255, 255, 0.5);
-  text-align: center;
-  padding: 1em;
-}
 .wm-app .app-carousel .carousel.slide {
   height: inherit;
   width: inherit;
@@ -16455,6 +16265,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   padding: 0;
   opacity: 1;
   background: none;
+  pointer-events: none;
   --wm-caption-color: var(--wm-form-control-color-place-holder);
   width: 100%;
 }
@@ -16563,10 +16374,10 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   display: flex;
   flex-direction: column;
 }
-.wm-app .input-group {
+.wm-app .input-group:not(.app-currency) {
   position: relative;
 }
-.wm-app .input-group .input-group-btn {
+.wm-app .input-group:not(.app-currency) .input-group-btn {
   position: absolute;
   top: var(--wm-space-2);
   right: var(--wm-space-1);
@@ -16575,7 +16386,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   justify-content: center;
   gap: var(--wm-space-1);
 }
-.wm-app .input-group .input-group-btn .btn {
+.wm-app .input-group:not(.app-currency) .input-group-btn .btn {
   width: var(--wm-input-group-btn-width);
   height: var(--wm-input-group-btn-height);
   border-radius: var(--wm-input-group-btn-border-radius);
@@ -16583,7 +16394,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   border: none;
   background: none;
 }
-.wm-app .input-group .input-group-btn .btn .app-icon {
+.wm-app .input-group:not(.app-currency) .input-group-btn .btn .app-icon {
   font-size: var(--wm-input-group-btn-font-size);
   width: var(--wm-input-group-btn-font-size);
   height: var(--wm-input-group-btn-font-size);
@@ -16591,13 +16402,13 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   justify-content: center;
   align-items: center;
 }
-.wm-app .input-group .input-group-btn .btn + .btn {
+.wm-app .input-group:not(.app-currency) .input-group-btn .btn + .btn {
   margin: 0;
 }
-.wm-app .input-group .form-control {
+.wm-app .input-group:not(.app-currency) .form-control {
   padding-right: calc(var(--wm-input-group-btn-width) + var(--wm-space-4));
 }
-.wm-app .input-group.app-datetime .form-control {
+.wm-app .input-group:not(.app-currency).app-datetime .form-control {
   padding-right: calc(var(--wm-input-group-btn-width) * 2.4);
 }
 .wm-app .help-block {
@@ -16672,6 +16483,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
 .wm-app bs-datepicker-container .bs-datepicker .bs-datepicker-head bs-datepicker-navigation-view button {
   margin: var(--wm-space-1);
   background: var(--wm-btn-background) !important;
+  padding: var(--wm-space-2);
 }
 .wm-app bs-datepicker-container .bs-datepicker .bs-datepicker-head bs-datepicker-navigation-view button.previous,
 .wm-app bs-datepicker-container .bs-datepicker .bs-datepicker-head bs-datepicker-navigation-view button.next {
@@ -16792,13 +16604,13 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   display: none;
 }
 .wm-app bs-datepicker-container .bs-datepicker .bs-datepicker-body table:not(.weeks) td span {
-  height: calc(var(--wm-datepicker-date-height) - 0.25rem);
-  padding: var(--wm-space-2) var(--wm-space-4);
-  width: 100%;
+  height: auto;
+  padding: var(--wm-space-2) var(--wm-space-3);
+  width: auto;
 }
 .wm-app bs-datepicker-container .bs-datepicker .bs-datepicker-body table.months td,
 .wm-app bs-datepicker-container .bs-datepicker .bs-datepicker-body table.years td {
-  padding: var(--wm-space-2);
+  padding: var(--wm-space-1);
 }
 .wm-app bs-datepicker-container .bs-datepicker .bs-datepicker-buttons .btn-today-wrapper .btn,
 .wm-app bs-datepicker-container .bs-datepicker .bs-datepicker-buttons .btn-clear-wrapper .btn {
@@ -16912,6 +16724,50 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   min-height: unset;
   padding: var(--wm-file-upload-media-icon-padding);
 }
+.wm-app .app-form,
+.wm-app .app-liveform,
+.wm-app .app-livefilter {
+  position: relative;
+}
+.wm-app .app-form > .panel-heading > .panel-title > .form-action,
+.wm-app .app-liveform > .panel-heading > .panel-title > .form-action,
+.wm-app .app-livefilter > .panel-heading > .panel-title > .form-action {
+  flex-grow: 1;
+  justify-content: flex-end;
+}
+.wm-app .app-form > .panel-heading + .form-body,
+.wm-app .app-liveform > .panel-heading + .form-body,
+.wm-app .app-livefilter > .panel-heading + .form-body {
+  padding-top: var(--wm-space-0);
+}
+.wm-app .app-form > .form-body,
+.wm-app .app-liveform > .form-body,
+.wm-app .app-livefilter > .form-body {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  padding: var(--wm-panel-content-padding);
+}
+.wm-app .app-form > .form-body > .form-elements,
+.wm-app .app-liveform > .form-body > .form-elements,
+.wm-app .app-livefilter > .form-body > .form-elements {
+  margin: var(--wm-space-0) calc(var(--wm-grid-layout-column-padding) * -0.75);
+}
+.wm-app .app-form > .form-body > .form-action,
+.wm-app .app-liveform > .form-body > .form-action,
+.wm-app .app-livefilter > .form-body > .form-action {
+  display: flex;
+  justify-content: flex-end;
+  padding: var(--wm-panel-footer-padding);
+  border-bottom-left-radius: var(--wm-panel-radius);
+  border-bottom-right-radius: var(--wm-panel-radius);
+  margin: calc(var(--wm-panel-content-padding) * 0.75) calc(var(--wm-panel-content-padding)* -1) calc(var(--wm-panel-content-padding)* -1);
+}
+.wm-app .app-form:has(> .form-body.hidden) > .panel-heading,
+.wm-app .app-liveform:has(> .form-body.hidden) > .panel-heading,
+.wm-app .app-livefilter:has(> .form-body.hidden) > .panel-heading {
+  border-radius: var(--wm-panel-radius);
+}
 .wm-app .app-grid-layout {
   display: flex;
   flex-direction: column;
@@ -17122,11 +16978,14 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
 .wm-app .app-message .btn-transparent.close {
   color: inherit;
   opacity: 1;
+  width: 40px;
+  height: 40px;
+  --wm-btn-state-layer-color: var(--wm-message-container-color);
 }
 .wm-app .app-message .btn-transparent.close span {
   display: none;
 }
-.wm-app .app-message .btn-transparent.close:before {
+.wm-app .app-message .btn-transparent.close:after {
   content: "\f1e2";
   font-family: wavicon;
   font-size: var(--wm-icon-size-sm);
@@ -18689,6 +18548,177 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
 .wm-app .app-footer .app-nav.nav-pills li + li {
   margin-left: var(--wm-space-8);
 }
+.wm-app .app-panel,
+.wm-app .panel {
+  position: relative;
+  background: var(--wm-panel-background);
+  border-radius: var(--wm-panel-radius);
+  box-shadow: var(--wm-panel-shadow);
+}
+.wm-app .app-panel > .panel-heading,
+.wm-app .panel > .panel-heading {
+  padding: var(--wm-panel-heading-padding);
+  background: var(--wm-panel-heading-background);
+  border-top-left-radius: var(--wm-panel-radius);
+  border-top-right-radius: var(--wm-panel-radius);
+}
+.wm-app .app-panel > .panel-heading .panel-title,
+.wm-app .panel > .panel-heading .panel-title {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  gap: var(--wm-panel-heading-gap);
+}
+.wm-app .app-panel > .panel-heading .panel-title .panel-toggle,
+.wm-app .panel > .panel-heading .panel-title .panel-toggle {
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+  flex-grow: 1;
+  gap: var(--wm-panel-heading-gap);
+  color: var(--wm-panel-heading-color);
+}
+.wm-app .app-panel > .panel-heading .panel-title .panel-actions:not(:empty),
+.wm-app .panel > .panel-heading .panel-title .panel-actions:not(:empty) {
+  display: flex;
+  align-items: center;
+  gap: var(--wm-panel-actions-gap);
+}
+.wm-app .app-panel > .panel-heading .panel-title .panel-actions .panel-action,
+.wm-app .panel > .panel-heading .panel-title .panel-actions .panel-action {
+  --wm-btn-state-layer-color: var(--wm-panel-heading-color);
+}
+.wm-app .app-panel > .panel-heading .panel-title .heading,
+.wm-app .panel > .panel-heading .panel-title .heading {
+  font-family: var(--wm-panel-heading-font-family);
+  font-size: var(--wm-panel-heading-font-size);
+  font-weight: var(--wm-panel-heading-font-weight);
+  line-height: var(--wm-panel-heading-line-height);
+  letter-spacing: var(--wm-panel-heading-letter-spacing);
+  color: var(--wm-panel-heading-color);
+}
+.wm-app .app-panel > .panel-heading .panel-title .description,
+.wm-app .panel > .panel-heading .panel-title .description {
+  font-family: var(--wm-panel-description-font-family);
+  font-size: var(--wm-panel-description-font-size);
+  font-weight: var(--wm-panel-description-font-weight);
+  line-height: var(--wm-panel-description-line-height);
+  letter-spacing: var(--wm-panel-description-letter-spacing);
+  color: var(--wm-panel-description-color);
+}
+.wm-app .app-panel > .panel-heading .panel-title .pull-left:empty,
+.wm-app .panel > .panel-heading .panel-title .pull-left:empty {
+  display: none;
+}
+.wm-app .app-panel > .panel-content,
+.wm-app .panel > .panel-content {
+  height: 100%;
+  position: relative;
+}
+.wm-app .app-panel > .panel-content > .panel-body,
+.wm-app .panel > .panel-content > .panel-body {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  padding: var(--wm-panel-content-padding);
+}
+.wm-app .app-panel > .panel-content > .panel-help-message,
+.wm-app .panel > .panel-content > .panel-help-message {
+  overflow: auto;
+  display: none;
+  background: var(--wm-panel-help-message-background);
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 20%;
+  height: 100%;
+  z-index: 1000;
+  min-width: 100px;
+}
+.wm-app .app-panel > .panel-content > .panel-help-message .panel-help-header,
+.wm-app .panel > .panel-content > .panel-help-message .panel-help-header {
+  background: var(--wm-panel-help-message-header-background);
+  border: var(--wm-panel-help-message-border-width) var(--wm-panel-help-message-border-style) var(--wm-panel-help-message-border);
+  padding: var(--wm-panel-help-message-padding);
+}
+.wm-app .app-panel > .panel-content > .panel-help-message .panel-help-content,
+.wm-app .panel > .panel-content > .panel-help-message .panel-help-content {
+  padding: var(--wm-panel-help-message-padding);
+  border: var(--wm-panel-help-message-border-width) var(--wm-panel-help-message-border-style) var(--wm-panel-help-message-border);
+  border-top: 0;
+}
+.wm-app .app-panel > .panel-footer,
+.wm-app .panel > .panel-footer,
+.wm-app .app-panel > .app-panel-footer,
+.wm-app .panel > .app-panel-footer {
+  padding: var(--wm-panel-footer-padding);
+  border-top: var(--wm-panel-footer-border-width) var(--wm-panel-footer-border-style) var(--wm-panel-footer-border);
+}
+.wm-app .app-panel.show-help > .panel-content > .panel-body.show-help,
+.wm-app .panel.show-help > .panel-content > .panel-body.show-help {
+  width: 79%;
+}
+.wm-app .app-panel.show-help > .panel-content > .panel-help-message.show-help,
+.wm-app .panel.show-help > .panel-content > .panel-help-message.show-help {
+  display: block;
+}
+.wm-app .app-panel.fullscreen,
+.wm-app .panel.fullscreen {
+  position: fixed;
+  z-index: 1049;
+  inset: 0;
+  margin: unset !important;
+}
+.wm-app .app-panel.fullscreen .panel-content,
+.wm-app .panel.fullscreen .panel-content {
+  overflow: auto;
+}
+.wm-app .app-panel:has(> .panel-content[hidden] + .panel-footer[hidden]) > .panel-heading,
+.wm-app .panel:has(> .panel-content[hidden] + .panel-footer[hidden]) > .panel-heading {
+  border-radius: var(--wm-panel-radius);
+}
+.wm-app .app-panel.panel-primary,
+.wm-app .panel.panel-primary {
+  --wm-panel-heading-background: var(--wm-panel-background-primary);
+  --wm-panel-heading-color: var(--wm-panel-heading-color-primary);
+  --wm-panel-description-color: var(--wm-panel-description-color-primary);
+}
+.wm-app .app-panel.panel-secondary,
+.wm-app .panel.panel-secondary {
+  --wm-panel-heading-background: var(--wm-panel-background-secondary);
+  --wm-panel-heading-color: var(--wm-panel-heading-color-secondary);
+  --wm-panel-description-color: var(--wm-panel-description-color-secondary);
+}
+.wm-app .app-panel.panel-tertiary,
+.wm-app .panel.panel-tertiary {
+  --wm-panel-heading-background: var(--wm-panel-background-tertiary);
+  --wm-panel-heading-color: var(--wm-panel-heading-color-tertiary);
+  --wm-panel-description-color: var(--wm-panel-description-color-tertiary);
+}
+.wm-app .app-panel.panel-success,
+.wm-app .panel.panel-success {
+  --wm-panel-heading-background: var(--wm-panel-background-success);
+  --wm-panel-heading-color: var(--wm-panel-heading-color-success);
+  --wm-panel-description-color: var(--wm-panel-description-color-success);
+}
+.wm-app .app-panel.panel-info,
+.wm-app .panel.panel-info {
+  --wm-panel-heading-background: var(--wm-panel-background-info);
+  --wm-panel-heading-color: var(--wm-panel-heading-color-info);
+  --wm-panel-description-color: var(--wm-panel-description-color-info);
+}
+.wm-app .app-panel.panel-warning,
+.wm-app .panel.panel-warning {
+  --wm-panel-heading-background: var(--wm-panel-background-warning);
+  --wm-panel-heading-color: var(--wm-panel-heading-color-warning);
+  --wm-panel-description-color: var(--wm-panel-description-color-warning);
+}
+.wm-app .app-panel.panel-danger,
+.wm-app .panel.panel-danger {
+  --wm-panel-heading-background: var(--wm-panel-background-danger);
+  --wm-panel-heading-color: var(--wm-panel-heading-color-danger);
+  --wm-panel-description-color: var(--wm-panel-description-color-danger);
+}
 .wm-app .app-picture {
   position: relative;
   display: inline-flex;
@@ -18936,6 +18966,7 @@ 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);
   letter-spacing: var(--wm-help-block-letter-spacing);
+  text-align: right;
 }
 .wm-app .textarea-count:not(:empty) {
   margin-top: var(--wm-space-1);
@@ -18972,13 +19003,14 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   --wm-btn-letter-spacing: var(--wm-timepicker-period-selector-letter-spacing);
 }
 .wm-app .app-datetime .form-control.bs-timepicker-field {
-  width: 96px;
+  width: var(--wm-timepicker-input-width);
   color: var(--wm-color-on-primary-container);
-  font-family: var(--wm-timepicker-font-family);
-  font-size: var(--wm-timepicker-font-size);
-  font-weight: var(--wm-timepicker-font-weight);
-  line-height: var(--wm-timepicker-line-height);
-  letter-spacing: var(--wm-timepicker-letter-spacing);
+  font-family: var(--wm-timepicker-input-font-family);
+  font-size: var(--wm-timepicker-input-font-size);
+  font-weight: var(--wm-timepicker-input-font-weight);
+  line-height: var(--wm-timepicker-input-line-height);
+  letter-spacing: var(--wm-timepicker-input-letter-spacing);
+  padding: var(--wm-timepicker-input-padding);
 }
 .wm-app .toast-container {
   position: fixed;