@wavemaker/app-runtime-wm-build 11.14.0-rc.6276 → 11.14.1-next.28340

package/wmapp/styles/foundation/foundation.css

@@ -560,6 +560,7 @@
   min-width: var(--wm-anchor-icon-size);
   width: var(--wm-anchor-icon-size);
   height: var(--wm-anchor-icon-size);
+  color: var(--wm-anchor-color);
 }
 .wm-app a .anchor-image-icon,
 .wm-app .app-anchor .anchor-image-icon {
@@ -720,7 +721,8 @@
 .wm-app .app-breadcrumb > li > i[class=""] {
   display: none;
 }
-.wm-app .app-breadcrumb > li > a {
+.wm-app .app-breadcrumb > li > a,
+.wm-app .app-breadcrumb > li > label {
   flex-wrap: nowrap;
   font-size: var(--wm-breadcrumb-item-font-size);
   font-family: var(--wm-breadcrumb-item-font-family);
@@ -954,6 +956,7 @@ button:active.focus::before {
   min-width: var(--wm-btn-icon-size);
   width: var(--wm-btn-icon-size);
   height: var(--wm-btn-icon-size);
+  color: var(--wm-btn-color);
 }
 .wm-app .btn .btn-caption,
 .wm-app button .btn-caption,
@@ -1026,6 +1029,7 @@ button:active.focus::before {
 .wm-app .btn-standard .app-icon,
 .wm-app button-standard .app-icon {
   margin: var(--wm-space-0);
+  color: var(--wm-btn-color);
 }
 .wm-app-icon .app-icon {
   margin: var(--wm-space-0);
@@ -2177,8 +2181,10 @@ button:active.focus::before {
   --wm-form-control-border-color: var(--wm-color-error);
   --wm-form-caption-color: var(--wm-color-error);
   --wm-form-caption-font-weight: var(--wm-body-large-font-weight);
+  --wm-form-help-block-color: var(--wm-color-error);
 }
-.wm-app .app-composite-widget:active {
+.wm-app .app-composite-widget:has(.form-control:not(.ng-touched.ng-invalid):active),
+.wm-app .form-control:active {
   --wm-form-control-border-width: 2px;
   --wm-form-control-border-color: var(--wm-color-secondary);
   --wm-form-caption-color: var(--wm-color-on-surface-variant);
@@ -2459,8 +2465,11 @@ button:active.focus::before {
   --wm-dropdown-menu-padding: var(--wm-space-0) var(--wm-space-2);
   --wm-dropdown-menu-inline-submenu-padding: var(--wm-space-0);
   --wm-dropdown-menu-background: var(--wm-color-surface);
-  --wm-dropdown-menu-border-radius: var(--wm-radius-xs);
   --wm-dropdown-menu-box-shadow: var(--wm-elevation-shadow-2);
+  --wm-dropdown-menu-border-radius: var(--wm-radius-xs);
+  --wm-dropdown-menu-border-color: var(--wm-color-on-surface);
+  --wm-dropdown-menu-border-style: var(--wm-border-style-base);
+  --wm-dropdown-menu-border-width: var(--wm-border-width-0);
   --wm-dropdown-menu-width: 220px;
   --wm-dropdown-menu-caret-size: var(--wm-icon-size-sm);
   --wm-dropdown-menu-item-font-family: var(--wm-body-large-font-family);
@@ -2533,6 +2542,9 @@ button:active.focus::before {
   border-radius: var(--wm-dropdown-menu-border-radius);
   background: var(--wm-dropdown-menu-background);
   box-shadow: var(--wm-dropdown-menu-box-shadow);
+  border-color: var(--wm-dropdown-menu-border-color);
+  border-width: var(--wm-dropdown-menu-border-width);
+  border-style: var(--wm-dropdown-menu-border-style);
   position: absolute;
   top: 100%;
   left: 0;
@@ -3237,6 +3249,7 @@ button:active.focus::before {
   --wm-timepicker-btn-border-style: var(--wm-border-style-base);
   --wm-timepicker-btn-border-width: var(--wm-border-width-0);
   --wm-timepicker-btn-background: var(--wm-color-transparent);
+  --wm-timepicker-btn-color: var(--wm-color-on-surface);
 }
 .wm-app {
   /* Timepicker styles */
@@ -3262,9 +3275,11 @@ button:active.focus::before {
   border-radius: var(--wm-timepicker-btn-border-radius);
   background: var(--wm-timepicker-period-selector-background);
   border: var(--wm-timepicker-btn-border-width) var(--wm-timepicker-btn-border-style) var(--wm-timepicker-btn-border-color);
+  color: var(--wm-timepicker-period-selector-color);
 }
 .wm-app .app-datetime tbody .btn:has(.bs-chevron) {
   background: var(--wm-timepicker-btn-background);
+  color: var(--wm-timepicker-btn-color);
 }
 .wm-app .app-datetime .form-control.bs-timepicker-field {
   width: var(--wm-timepicker-input-width);
@@ -4509,49 +4524,49 @@ button:active.focus::before {
   --wm-icon-size-4x: calc(var(--wm-icon-size) * 2);
   --wm-icon-size-5x: calc(var(--wm-icon-size) * 2.25);
 }
-.wm-app .app-icon-wrapper.fa-xs {
+.wm-app .fa-xs {
   --wm-icon-font-size: var(--wm-icon-size-xs);
   --wm-icon-min-width: var(--wm-icon-size-xs);
   --wm-icon-width: var(--wm-icon-size-xs);
   --wm-icon-height: var(--wm-icon-size-xs);
 }
-.wm-app .app-icon-wrapper.fa-sm {
+.wm-app .fa-sm {
   --wm-icon-font-size: var(--wm-icon-size-sm);
   --wm-icon-min-width: var(--wm-icon-size-sm);
   --wm-icon-width: var(--wm-icon-size-sm);
   --wm-icon-height: var(--wm-icon-size-sm);
 }
-.wm-app .app-icon-wrapper {
+.wm-app {
   --wm-icon-font-size: var(--wm-icon-size-md);
   --wm-icon-min-width: var(--wm-icon-size-md);
   --wm-icon-width: var(--wm-icon-size-md);
   --wm-icon-height: var(--wm-icon-size-md);
 }
-.wm-app .app-icon-wrapper.fa-lg {
+.wm-app .fa-lg {
   --wm-icon-font-size: var(--wm-icon-size-lg);
   --wm-icon-min-width: var(--wm-icon-size-lg);
   --wm-icon-width: var(--wm-icon-size-lg);
   --wm-icon-height: var(--wm-icon-size-lg);
 }
-.wm-app .app-icon-wrapper.fa-2x {
+.wm-app .fa-2x {
   --wm-icon-font-size: var(--wm-icon-size-2x);
   --wm-icon-min-width: var(--wm-icon-size-2x);
   --wm-icon-width: var(--wm-icon-size-2x);
   --wm-icon-height: var(--wm-icon-size-2x);
 }
-.wm-app .app-icon-wrapper.fa-3x {
+.wm-app .fa-3x {
   --wm-icon-font-size: var(--wm-icon-size-3x);
   --wm-icon-min-width: var(--wm-icon-size-3x);
   --wm-icon-width: var(--wm-icon-size-3x);
   --wm-icon-height: var(--wm-icon-size-3x);
 }
-.wm-app .app-icon-wrapper.fa-4x {
+.wm-app .fa-4x {
   --wm-icon-font-size: var(--wm-icon-size-4x);
   --wm-icon-min-width: var(--wm-icon-size-4x);
   --wm-icon-width: var(--wm-icon-size-4x);
   --wm-icon-height: var(--wm-icon-size-4x);
 }
-.wm-app .app-icon-wrapper.fa-5x {
+.wm-app .fa-5x {
   --wm-icon-font-size: var(--wm-icon-size-5x);
   --wm-icon-min-width: var(--wm-icon-size-5x);
   --wm-icon-width: var(--wm-icon-size-5x);
@@ -4614,7 +4629,7 @@ button:active.focus::before {
 }
 /* Label component styles and tokens */
 :root {
-  --wm-label-color: var(--wm-color-on-surface);
+  --wm-label-color: inherit;
   --wm-label-margin: var(--wm-space-0);
   --wm-label-padding: var(--wm-space-0);
   --wm-label-font-size: var(--wm-body-medium-font-size);
@@ -4624,7 +4639,7 @@ button:active.focus::before {
   --wm-label-font-family: var(--wm-body-medium-font-family);
   --wm-label-background-color: none;
 }
-.wm-app .app-label.label-p {
+.wm-app .app-label.p {
   --wm-label-font-size: var(--wm-p-font-size);
   --wm-label-font-weight: var(--wm-p-font-weight);
   --wm-label-line-height: var(--wm-p-line-height);
@@ -4679,6 +4694,9 @@ button:active.focus::before {
 .wm-app .app-label.text-secondary {
   --wm-label-color: var(--wm-color-secondary);
 }
+.wm-app .app-label.text-tertiary {
+  --wm-label-color: var(--wm-color-tertiary);
+}
 .wm-app .app-label.text-success {
   --wm-label-color: var(--wm-color-success);
 }
@@ -4702,6 +4720,10 @@ button:active.focus::before {
   --wm-label-background-color: var(--wm-color-secondary);
   --wm-label-color: var(--wm-color-on-secondary);
 }
+.wm-app .app-label.label-tertiary {
+  --wm-label-background-color: var(--wm-color-tertiary);
+  --wm-label-color: var(--wm-color-on-tertiary);
+}
 .wm-app .app-label.label-success {
   --wm-label-background-color: var(--wm-color-success);
   --wm-label-color: var(--wm-color-on-success);
@@ -5254,7 +5276,7 @@ button:active.focus::before {
   --wm-nav-border-style: var(--wm-border-style-base);
   --wm-nav-border-color: var(--wm-color-inherit);
   --wm-nav-shadow: var(--wm-elevation-shadow-none);
-  --wm-nav-item-background: var(--wm-color-surface);
+  --wm-nav-item-background: var(--wm-color-transparent);
   --wm-nav-item-margin: var(--wm-space-0);
   --wm-nav-item-padding: var(--wm-space-2);
   --wm-nav-item-border-radius: var(--wm-radius-none);
@@ -5278,6 +5300,7 @@ button:active.focus::before {
   --wm-nav-item-border-color: var(--wm-color-outline-variant);
 }
 .wm-app .nav.app-nav {
+  display: block;
   background: var(--wm-nav-background);
   margin: var(--wm-nav-margin);
   padding: var(--wm-nav-padding);
@@ -6283,7 +6306,8 @@ button:active.focus::before {
 .wm-app .app-tabs > .nav-tabs > .tab-header .tab-heading:focus:before {
   --wm-tabs-item-heading-state-layer-opacity: var(--wm-opacity-focus);
 }
-.wm-app .app-tabs > .nav-tabs > .tab-header.active {
+.wm-app .app-tabs > .nav-tabs > .tab-header.active,
+.wm-app .app-tabs > .nav-tabs > .tab-header .tab-heading:active:before {
   --wm-tabs-item-heading-indicator-background: var(--wm-color-primary);
 }
 .wm-app .app-tabs {
@@ -6325,6 +6349,9 @@ button:active.focus::before {
   font-weight: var(--wm-tabs-item-heading-font-weight);
   letter-spacing: var(--wm-tabs-item-heading-letter-spacing);
   color: var(--wm-tabs-item-heading-color);
+  border-color: var(--wm-tabs-item-heading-border-color);
+  border-width: var(--wm-tabs-item-heading-border-width);
+  border-style: var(--wm-tabs-item-heading-border-style);
 }
 .wm-app .app-tabs > .nav-tabs > .tab-header .tab-heading:before {
   content: "";
@@ -7210,11 +7237,11 @@ button:active.focus::before {
   width: 100%;
   position: fixed;
   inset: 0;
-  z-index: 3;
+  z-index: 100;
   background: var(--wm-search-full-screen-background);
 }
 .wm-app .app-search.input-group[type="autocomplete"].full-screen .form-control {
-  padding-left: calc(var(--wm-form-input-group-btn-width) + var(--wm-form-control-padding));
+  padding-left: calc(var(--wm-form-input-group-btn-width) + var(--wm-form-control-padding) + 40px);
 }
 .wm-app .app-search.input-group[type="autocomplete"].full-screen .form-control-feedback.back-btn {
   display: inline-flex;