@wavemaker/app-runtime-wm-build 12.0.0-next.45074 → 12.0.0-next.45078

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

@@ -490,11 +490,11 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
 =========*/
 :root {
   /*--shadows(elevations)--*/
-  --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%))";
+  --wm-elevation-shadow-1: 0px 1px 2px 0px color-mix(in srgb, var(--wm-color-shadow), transparent 70%), 0px 1px 3px 1px ~"color-mix(in srgb, var(--wm-color-shadow), transparent 85%)";
+  --wm-elevation-shadow-2: 0px 1px 2px 0px color-mix(in srgb, var(--wm-color-shadow), transparent 70%), 0px 2px 6px 2px ~"color-mix(in srgb, var(--wm-color-shadow), transparent 85%)";
+  --wm-elevation-shadow-3: 0px 4px 8px 3px color-mix(in srgb, var(--wm-color-shadow), transparent 85%), 0px 1px 3px 0px ~"color-mix(in srgb, var(--wm-color-shadow), transparent 70%)";
+  --wm-elevation-shadow-4: 0px 6px 10px 4px color-mix(in srgb, var(--wm-color-shadow), transparent 85%), 0px 2px 3px 0px ~"color-mix(in srgb, var(--wm-color-shadow), transparent 70%)";
+  --wm-elevation-shadow-5: 0px 8px 12px 6px color-mix(in srgb, var(--wm-color-shadow), transparent 85%), 0px 4px 4px 0px ~"color-mix(in srgb, var(--wm-color-shadow), transparent 70%)";
   /**--Components--**/
   --wm-accordion-group-gap: var(--wm-space-2);
   /*--Anchor--*/
@@ -581,10 +581,10 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   --wm-btn-icon-lg-size: var(--wm-icon-size-lg);
   --wm-btn-icon-lg-width: 56px;
   --wm-btn-icon-lg-height: 56px;
-  --wm-btn-elevated: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0,0,0,0.15);
-  --wm-btn-elevated-hover: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, .15);
-  --wm-btn-elevated-focus: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0,0,0,0.15);
-  --wm-btn-elevated-active: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0,0,0,0.15);
+  --wm-btn-elevated: var(--wm-elevation-shadow-1);
+  --wm-btn-elevated-hover: var(--wm-elevation-shadow-2);
+  --wm-btn-elevated-focus: var(--wm-elevation-shadow-1);
+  --wm-btn-elevated-active: var(--wm-elevation-shadow-1);
   --wm-btn-default-background: var(--wm-color-surface);
   --wm-btn-default-color: var(--wm-color-on-surface);
   --wm-btn-default-border-color: var(--wm-color-surface-container-highest);
@@ -965,16 +965,22 @@ 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);
+  --wm-modal-margin: var(--wm-space-6);
   --wm-modal-backdrop-opacity: 50%;
   --wm-modal-backdrop-background: color-mix(in srgb, var(--wm-color-scrim), transparent calc(100% - var(--wm-modal-backdrop-opacity)));
   --wm-modal-backdrop-z-index: 999;
   --wm-modal-z-index: 1000;
   --wm-modal-width: 600px;
+  --wm-modal-height: auto;
   --wm-modal-xs-width: 440px;
   --wm-modal-sm-width: 600px;
   --wm-modal-md-width: 900px;
   --wm-modal-lg-width: 1200px;
   --wm-modal-xl-width: 1536px;
+  --wm-modal-full-screen-width: 100%;
+  --wm-modal-full-screen-height: 100%;
+  --wm-modal-full-screen-margin: var(--wm-space-0);
+  --wm-modal-full-screen-radius: var(--wm-radius-none);
   --wm-modal-background: var(--wm-color-surface-container-high);
   --wm-modal-radius: var(--wm-radius-lg);
   --wm-modal-header-padding: var(--wm-space-6) var(--wm-space-6) var(--wm-space-4);
@@ -987,6 +993,9 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   --wm-modal-body-padding: var(--wm-space-6) var(--wm-space-6);
   --wm-modal-footer-padding: var(--wm-space-6) var(--wm-space-6);
   --wm-modal-footer-gap: var(--wm-space-3);
+  --wm-modal-sheet-width: 400px;
+  --wm-modal-sheet-radius: var(--wm-radius-none);
+  --wm-modal-sheet-margin: var(--wm-space-0);
   /*--Nav--*/
   --wm-nav-min-height: var(--wm-nav-item-min-height);
   --wm-nav-background: var(--wm-color-surface-container-low);
@@ -1301,6 +1310,48 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   --wm-rating-icon-opacity-inactive: 0.38;
   --wm-rating-icon-opacity-active: 1;
   --wm-rating-icon-opacity-readonly: 0.38;
+  /* search variables  */
+  --wm-search-full-screen-background: var(--wm-color-surface-container);
+  --wm-search-back-btn-margin-vertical: var(--wm-space-0);
+  --wm-search-back-btn-margin-horizontal: var(--wm-space-1);
+  --wm-search-dropdown-menu-background: var(--wm-color-surface);
+  --wm-search-dropdown-menu-border-radius: var(--wm-radius-xs);
+  --wm-search-dropdown-menu-box-shadow: var(--wm-elevation-shadow-2);
+  --wm-search-dropdown-menu-height: calc(var(--wm-search-dropdown-menu-item-height) * 6.5);
+  --wm-search-dropdown-menu-margin: var(--wm-space-1);
+  --wm-search-dropdown-menu-z-index: 1060;
+  --wm-search-dropdown-menu-item-height: 40px;
+  --wm-search-dropdown-menu-item-font-family: var(--wm-body-large-font-family);
+  --wm-search-dropdown-menu-item-font-size: var(--wm-body-large-font-size);
+  --wm-search-dropdown-menu-item-line-height: var(--wm-body-large-line-height);
+  --wm-search-dropdown-menu-item-font-weight: var(--wm-body-large-font-weight);
+  --wm-search-dropdown-menu-item-letter-spacing: var(--wm-body-large-letter-spacing);
+  --wm-search-dropdown-menu-item-color: var(--wm-color-on-surface);
+  --wm-search-dropdown-menu-item-gap: var(--wm-space-2);
+  --wm-search-dropdown-menu-item-padding: var(--wm-space-2) var(--wm-space-4);
+  --wm-search-dropdown-menu-item-state-layer-color: var(--wm-color-on-surface);
+  --wm-search-dropdown-menu-item-hover-state-layer-opacity: var(--wm-opacity-hover);
+  --wm-search-dropdown-menu-item-focus-state-layer-opacity: var(--wm-opacity-focus);
+  --wm-search-dropdown-menu-item-active-state-layer-opacity: var(--wm-opacity-active);
+  --wm-search-dropdown-menu-item-img-radius: var(--wm-radius-circle);
+  --wm-search-dropdown-menu-group-item-color: var(--wm-color-on-surface);
+  --wm-search-dropdown-menu-group-item-background: var(--wm-color-surface-container-low);
+  --wm-search-dropdown-menu-group-item-gap: var(--wm-space-2);
+  --wm-search-dropdown-menu-group-item-padding: var(--wm-space-2) var(--wm-space-4);
+  --wm-search-dropdown-menu-group-item-header-font-family: var(--wm-h4-font-family);
+  --wm-search-dropdown-menu-group-item-header-font-size: var(--wm-h4-font-size);
+  --wm-search-dropdown-menu-group-item-header-line-height: var(--wm-h4-line-height);
+  --wm-search-dropdown-menu-group-item-header-font-weight: var(--wm-h4-font-weight);
+  --wm-search-dropdown-menu-group-item-header-letter-spacing: var(--wm-h4-letter-spacing);
+  --wm-search-status-background: var(--wm-color-surface-dim);
+  --wm-search-status-padding: var(--wm-space-2);
+  --wm-spinner-min-height: 6rem;
+  --wm-spinner-background: var(--wm-color-scrim);
+  --wm-spinner-background-opacity: 0.3;
+  /*--loading data msg--*/
+  --wm-spinner-loading-data-msg-background: var(--wm-color-scrim-hover);
+  --wm-spinner-loading-data-msg-color: inherit;
+  --wm-spinner-loading-data-msg-radius: inherit;
   /*--segmented button--*/
   --wm-switch-btn-height: 40px;
   --wm-switch-btn-height-sm: 36px;
@@ -1322,13 +1373,6 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   --wm-switch-btn-state-layer-opacity-hover: var(--wm-opacity-hover);
   --wm-switch-btn-state-layer-opacity-focus: var(--wm-opacity-focus);
   --wm-switch-btn-state-layer-opacity-active: var(--wm-opacity-active);
-  --wm-spinner-min-height: 6rem;
-  --wm-spinner-background: var(--wm-color-scrim);
-  --wm-spinner-background-opacity: 0.3;
-  /*--loading data msg--*/
-  --wm-spinner-loading-data-msg-background: var(--wm-color-scrim-hover);
-  --wm-spinner-loading-data-msg-color: inherit;
-  --wm-spinner-loading-data-msg-radius: inherit;
   --wm-tabs-background: var(--wm-color-surface);
   --wm-tabs-nav-border-width: var(--wm-border-width);
   --wm-tabs-nav-border-style: var(--wm-border-style);
@@ -11687,8 +11731,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
 .wm-app .app-global-progress-bar .app-dialog .modal-content .stop-btn {
   margin-top: 5px;
 }
-.wm-app bs-dropdown-container,
-.wm-app typeahead-container {
+.wm-app bs-dropdown-container {
   z-index: 1060 !important;
   display: initial !important;
 }
@@ -12776,9 +12819,6 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   font-size: 48px;
   opacity: 0.2;
 }
-.wm-app typeahead-container.dropdown .app-search.dropdown-menu {
-  position: relative;
-}
 @keyframes wm-page-fadeInDown {
   0% {
     opacity: 0;
@@ -15054,12 +15094,12 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   margin-left: 2px;
 }
 .wm-app .form-control {
+  width: 100%;
+  height: var(--wm-form-control-height);
   color: var(--wm-form-control-color);
   background: var(--wm-form-control-background);
   border: var(--wm-form-control-border-width) var(--wm-form-control-border-style) var(--wm-form-control-border-color);
   border-radius: var(--wm-form-control-radius);
-  height: var(--wm-form-control-height);
-  width: 100%;
   padding: var(--wm-form-control-padding);
   font-family: var(--wm-form-control-font-family);
   font-size: var(--wm-form-control-font-size);
@@ -15100,17 +15140,26 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   position: relative;
 }
 .wm-app .input-group:not(.app-currency) .input-group-btn,
+.wm-app .input-group:not(.app-currency) .input-group-addon,
 .wm-app .input-group:not(.app-currency) div:has(>.model-holder[bsdatepicker]) {
   position: absolute;
   top: calc(50% - calc(var(--wm-input-group-btn-height)/2));
-  right: var(--wm-space-1);
+  right: var(--wm-btn-icon-md-margin);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: var(--wm-space-1);
+  padding: 0;
+  border: none;
+  width: auto;
+  background: none;
 }
 .wm-app .input-group:not(.app-currency) .input-group-btn .btn,
-.wm-app .input-group:not(.app-currency) div:has(>.model-holder[bsdatepicker]) .btn {
+.wm-app .input-group:not(.app-currency) .input-group-addon .btn,
+.wm-app .input-group:not(.app-currency) div:has(>.model-holder[bsdatepicker]) .btn,
+.wm-app .input-group:not(.app-currency) .input-group-btn button,
+.wm-app .input-group:not(.app-currency) .input-group-addon button,
+.wm-app .input-group:not(.app-currency) div:has(>.model-holder[bsdatepicker]) button {
   margin: 0;
   width: var(--wm-input-group-btn-width);
   height: var(--wm-input-group-btn-height);
@@ -15120,7 +15169,11 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   background: none;
 }
 .wm-app .input-group:not(.app-currency) .input-group-btn .btn .app-icon,
-.wm-app .input-group:not(.app-currency) div:has(>.model-holder[bsdatepicker]) .btn .app-icon {
+.wm-app .input-group:not(.app-currency) .input-group-addon .btn .app-icon,
+.wm-app .input-group:not(.app-currency) div:has(>.model-holder[bsdatepicker]) .btn .app-icon,
+.wm-app .input-group:not(.app-currency) .input-group-btn button .app-icon,
+.wm-app .input-group:not(.app-currency) .input-group-addon button .app-icon,
+.wm-app .input-group:not(.app-currency) div:has(>.model-holder[bsdatepicker]) button .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);
@@ -15129,11 +15182,23 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   align-items: center;
 }
 .wm-app .input-group:not(.app-currency) .input-group-btn .btn + .btn,
-.wm-app .input-group:not(.app-currency) div:has(>.model-holder[bsdatepicker]) .btn + .btn {
+.wm-app .input-group:not(.app-currency) .input-group-addon .btn + .btn,
+.wm-app .input-group:not(.app-currency) div:has(>.model-holder[bsdatepicker]) .btn + .btn,
+.wm-app .input-group:not(.app-currency) .input-group-btn button + .btn,
+.wm-app .input-group:not(.app-currency) .input-group-addon button + .btn,
+.wm-app .input-group:not(.app-currency) div:has(>.model-holder[bsdatepicker]) button + .btn {
   margin: 0;
 }
+.wm-app .input-group:not(.app-currency) .input-group .form-control:first-child,
+.wm-app .input-group:not(.app-currency) .input-group-addon:first-child,
+.wm-app .input-group:not(.app-currency) .input-group-btn:first-child > .btn,
+.wm-app .input-group:not(.app-currency) .input-group-btn:first-child > .btn-group > .btn,
+.wm-app .input-group:not(.app-currency) .input-group-btn:first-child > .dropdown-toggle,
+.wm-app .input-group:not(.app-currency) .input-group-btn:last-child > .btn-group:not(:last-child) > .btn,
+.wm-app .input-group:not(.app-currency) .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
 .wm-app .input-group:not(.app-currency) .form-control {
-  padding-right: calc(var(--wm-input-group-btn-width) + var(--wm-space-4));
+  border-radius: var(--wm-form-control-radius);
+  padding-right: calc(var(--wm-input-group-btn-width) + var(--wm-form-control-padding));
 }
 .wm-app .input-group:not(.app-currency).app-datetime .form-control {
   padding-right: calc(var(--wm-input-group-btn-width) * 2.4);
@@ -15351,7 +15416,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   border: none !important;
   --wm-btn-state-layer-color: var(--wm-color-primary);
 }
-.wm-app .dropdown.app-menu {
+.wm-app .dropdown {
   position: relative;
   display: inline-flex;
 }
@@ -16062,35 +16127,36 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   display: flex !important;
 }
 .wm-app .modal-dialog {
-  display: flex;
-  justify-content: center;
-  align-items: center;
   position: fixed;
   inset: 0;
   width: 100%;
   height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   background: var(--wm-modal-backdrop-background);
-  padding: var(--wm-space-6);
+  padding: var(--wm-modal-margin);
   margin: var(--wm-space-0);
 }
-.wm-app .modal-content {
+.wm-app .modal-dialog .modal-content {
   display: flex;
   flex-direction: column;
   width: var(--wm-modal-width);
+  height: var(--wm-modal-height);
   max-width: 100%;
   max-height: 100%;
   background: var(--wm-modal-background);
   border-radius: var(--wm-modal-radius);
 }
-.wm-app .modal-content .modal-header {
+.wm-app .modal-dialog .modal-content .modal-header {
   padding: var(--wm-modal-header-padding);
 }
-.wm-app .modal-content .modal-header .app-dialog-close {
+.wm-app .modal-dialog .modal-content .modal-header .app-dialog-close {
   position: absolute;
   right: 0;
   top: 0;
 }
-.wm-app .modal-content .modal-header .modal-title {
+.wm-app .modal-dialog .modal-content .modal-header .modal-title {
   width: 100%;
   display: flex;
   align-items: center;
@@ -16098,36 +16164,82 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   gap: var(--wm-modal-title-gap);
   word-break: break-word;
 }
-.wm-app .modal-content .modal-header .modal-title:has(>.app-icon) {
+.wm-app .modal-dialog .modal-content .modal-header .modal-title:has(>.app-icon) {
   flex-direction: column;
   --wm-modal-title-gap: var(--wm-space-4);
 }
-.wm-app .modal-content .modal-header + .modal-body {
+.wm-app .modal-dialog .modal-content .modal-header + .modal-body {
   padding-top: var(--wm-space-0);
 }
-.wm-app .modal-content .modal-body {
+.wm-app .modal-dialog .modal-content .modal-body {
   height: 100%;
   overflow: auto;
   padding: var(--wm-modal-body-padding);
 }
-.wm-app .modal-content .modal-body > .app-grid-layout {
+.wm-app .modal-dialog .modal-content .modal-body > .app-grid-layout {
   padding: 0;
   margin: 0 calc(var(--wm-grid-layout-column-padding) * -1);
   width: calc(100% + calc(var(--wm-grid-layout-column-padding) * 2));
 }
-.wm-app .modal-content .modal-body:has( + .modal-footer:not([hidden])) {
+.wm-app .modal-dialog .modal-content .modal-body:has( + .modal-footer:not([hidden])) {
   padding-bottom: var(--wm-space-0);
 }
-.wm-app .modal-content .modal-footer {
+.wm-app .modal-dialog .modal-content .modal-footer {
   padding: var(--wm-modal-footer-padding);
   display: flex;
   flex-direction: row;
   justify-content: flex-end;
   gap: var(--wm-modal-footer-gap);
 }
-.wm-app .modal-content .modal-footer .btn {
+.wm-app .modal-dialog .modal-content .modal-footer .btn {
   margin: 0;
 }
+.wm-app .modal-dialog:not(.modal-sheet).modal-xs {
+  --wm-modal-width: var(--wm-modal-xs-width);
+}
+.wm-app .modal-dialog:not(.modal-sheet).modal-sm {
+  --wm-modal-width: var(--wm-modal-sm-width);
+}
+.wm-app .modal-dialog:not(.modal-sheet).modal-md {
+  --wm-modal-width: var(--wm-modal-md-width);
+}
+.wm-app .modal-dialog:not(.modal-sheet).modal-lg {
+  --wm-modal-width: var(--wm-modal-lg-width);
+}
+.wm-app .modal-dialog:not(.modal-sheet).modal-xl {
+  --wm-modal-width: var(--wm-modal-xl-width);
+}
+.wm-app .modal-dialog:not(.modal-sheet).modal-full-screen {
+  --wm-modal-width: var(--wm-modal-full-screen-width);
+  --wm-modal-height: var(--wm-modal-full-screen-height);
+  --wm-modal-radius: var(--wm-modal-full-screen-radius);
+  --wm-modal-margin: var(--wm-modal-full-screen-margin);
+}
+.wm-app .modal-dialog.modal-sheet {
+  --wm-modal-width: var(--wm-modal-sheet-width);
+  --wm-modal-radius: var(--wm-modal-sheet-radius);
+  --wm-modal-margin: var(--wm-modal-sheet-margin);
+}
+.wm-app .modal-dialog.modal-sheet.sheet-position-top {
+  align-items: flex-start;
+  --wm-modal-width: var(--wm-modal-full-screen-width);
+}
+.wm-app .modal-dialog.modal-sheet.sheet-position-right {
+  justify-content: flex-end;
+}
+.wm-app .modal-dialog.modal-sheet.sheet-position-right .modal-content {
+  height: var(--wm-modal-full-screen-height);
+}
+.wm-app .modal-dialog.modal-sheet.sheet-position-bottom {
+  align-items: flex-end;
+  --wm-modal-width: var(--wm-modal-full-screen-width);
+}
+.wm-app .modal-dialog.modal-sheet.sheet-position-left {
+  justify-content: flex-start;
+}
+.wm-app .modal-dialog.modal-sheet.sheet-position-left .modal-content {
+  height: var(--wm-modal-full-screen-height);
+}
 .wm-app .app-navbar {
   position: relative;
   border: none;
@@ -16393,6 +16505,11 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
 .wm-app .app-page .app-mobile-header .app-header-container .app-picture[name="AppLogo"] {
   height: var(--wm-header-logo-height);
 }
+.wm-app .app-page .app-header .app-search,
+.wm-app .app-page .app-mobile-header .app-search {
+  --wm-form-control-background: var(--wm-color-white);
+  --wm-form-control-radius: var(--wm-radius-pill);
+}
 .wm-app .app-page .app-content {
   flex-grow: 1;
   display: flex;
@@ -17377,6 +17494,181 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
 .wm-app .app-ratings[readonly="true"] {
   opacity: var(--wm-rating-icon-opacity-readonly);
 }
+.wm-app .app-search.input-group .form-control {
+  padding-left: calc(var(--wm-input-group-btn-width) + var(--wm-form-control-padding));
+}
+.wm-app .app-search.input-group .model-holder {
+  position: absolute;
+  height: 0;
+  width: 0;
+  border: none;
+  padding: 0;
+  display: none;
+}
+.wm-app .app-search.input-group .form-control-feedback {
+  display: none;
+  margin: 0;
+  position: absolute;
+  top: calc(calc(var(--wm-form-control-height)/2) - calc(var(--wm-input-group-btn-height) / 2));
+  right: var(--wm-btn-icon-md-margin);
+  z-index: 3;
+}
+.wm-app .app-search.input-group .form-control-feedback.back-btn {
+  right: auto;
+  left: var(--wm-btn-icon-md-margin);
+}
+.wm-app .app-search.input-group .form-control-feedback.clear-btn.show-btn {
+  display: inline-flex;
+}
+.wm-app .app-search.input-group .input-group-addon {
+  right: auto;
+  left: var(--wm-btn-icon-md-margin);
+}
+.wm-app .app-search.input-group[type="autocomplete"] .form-control {
+  padding-left: var(--wm-form-control-padding);
+}
+.wm-app .app-search.input-group[type="autocomplete"].full-screen {
+  width: 100%;
+  position: fixed;
+  inset: 0;
+  z-index: 3;
+  background: var(--wm-search-full-screen-background);
+}
+.wm-app .app-search.input-group[type="autocomplete"].full-screen .form-control {
+  padding-left: calc(var(--wm-input-group-btn-width) + var(--wm-form-control-padding));
+}
+.wm-app .app-search.input-group[type="autocomplete"].full-screen .form-control-feedback.back-btn {
+  display: inline-flex;
+}
+.wm-app .app-search.input-group[type="autocomplete"].full-screen typeahead-container.dropdown {
+  transform: translate3d(0px, 0, 0px) !important;
+  height: calc(100dvh - var(--wm-form-control-height)) !important;
+  --wm-search-dropdown-menu-height: 100%;
+}
+.wm-app .app-search.input-group:has(.clear-btn:not(.show-btn)) .form-control {
+  padding-right: var(--wm-form-control-padding);
+}
+.wm-app typeahead-container.dropdown {
+  display: flex;
+  flex-direction: column;
+  z-index: var(--wm-search-dropdown-menu-z-index);
+  background: var(--wm-search-dropdown-menu-background);
+}
+.wm-app typeahead-container.dropdown .dropdown-menu.app-search {
+  display: flex;
+  flex-direction: column;
+  border-radius: var(--wm-search-dropdown-menu-border-radius);
+  box-shadow: var(--wm-search-dropdown-menu-box-shadow);
+  max-height: var(--wm-search-dropdown-menu-height);
+  overflow: auto;
+}
+.wm-app typeahead-container.dropdown .dropdown-menu.app-search li > a {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--wm-search-dropdown-menu-item-gap);
+  color: var(--wm-search-dropdown-menu-item-color);
+  min-height: var(--wm-search-dropdown-menu-item-height);
+  padding: var(--wm-search-dropdown-menu-item-padding);
+  font-family: var(--wm-search-dropdown-menu-item-font-family);
+  font-weight: var(--wm-search-dropdown-menu-item-font-weight);
+  font-size: var(--wm-search-dropdown-menu-item-font-size);
+  line-height: var(--wm-search-dropdown-menu-item-line-height);
+  letter-spacing: var(--wm-search-dropdown-menu-item-letter-spacing);
+}
+.wm-app typeahead-container.dropdown .dropdown-menu.app-search li > a img {
+  aspect-ratio: 1/1;
+  border-radius: var(--wm-search-dropdown-menu-item-img-radius);
+}
+.wm-app typeahead-container.dropdown .dropdown-menu.app-search li > a:before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  background: var(--wm-search-dropdown-menu-item-state-layer-color);
+  border-radius: inherit;
+}
+.wm-app typeahead-container.dropdown .dropdown-menu.app-search li > a:hover:before {
+  opacity: var(--wm-search-dropdown-menu-item-hover-state-layer-opacity);
+}
+.wm-app typeahead-container.dropdown .dropdown-menu.app-search li > a:focus:before {
+  opacity: var(--wm-search-dropdown-menu-item-focus-state-layer-opacity);
+}
+.wm-app typeahead-container.dropdown .dropdown-menu.app-search li > a:active:before {
+  opacity: var(--wm-search-dropdown-menu-item-active-state-layer-opacity);
+}
+.wm-app typeahead-container.dropdown .dropdown-menu.app-search li.list-group-header {
+  display: flex;
+  gap: var(--wm-search-dropdown-menu-group-item-gap);
+}
+.wm-app typeahead-container.dropdown .dropdown-menu.app-search li.list-group-header .group-title {
+  width: 100%;
+  color: var(--wm-search-dropdown-menu-group-item-color);
+  background: var(--wm-search-dropdown-menu-group-item-background);
+  padding: var(--wm-search-dropdown-menu-group-item-padding);
+  font-family: var(--wm-search-dropdown-menu-group-item-header-font-family);
+  font-weight: var(--wm-search-dropdown-menu-group-item-header-font-weight);
+  font-size: var(--wm-search-dropdown-menu-group-item-header-font-size);
+  line-height: var(--wm-search-dropdown-menu-group-item-header-line-height);
+  letter-spacing: var(--wm-search-dropdown-menu-group-item-header-letter-spacing);
+}
+.wm-app typeahead-container.dropdown .dropdown-menu.app-search .status {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--wm-space-1);
+  padding: var(--wm-search-status-padding);
+  background: var(--wm-search-status-background);
+}
+.wm-app .app-spinner {
+  min-height: var(--wm-spinner-min-height);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: color-mix(in srgb, var(--wm-spinner-background), transparent calc(100% - calc(var(--wm-spinner-background-opacity) * 100%)));
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+.wm-app .app-spinner .spinner-message {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  gap: var(--wm-space-2);
+}
+.wm-app .global-spinner {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  z-index: 99999;
+}
+.wm-app .loading-data-msg {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  background: var(--wm-spinner-loading-data-msg-background);
+  color: var(--wm-spinner-loading-data-msg-color);
+  border-radius: var(--wm-spinner-loading-data-msg-radius);
+  z-index: 1;
+}
+.wm-app .loading-data-msg > span {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--wm-space-2);
+}
 .wm-app .app-switch > .btn-group {
   display: flex;
   flex-direction: row;
@@ -17438,52 +17730,6 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
 .wm-app .app-switch.density-3 {
   --wm-switch-btn-height: var(--wm-switch-btn-height-xxs);
 }
-.wm-app .app-spinner {
-  min-height: var(--wm-spinner-min-height);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: color-mix(in srgb, var(--wm-spinner-background), transparent calc(100% - calc(var(--wm-spinner-background-opacity) * 100%)));
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-}
-.wm-app .app-spinner .spinner-message {
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  gap: var(--wm-space-2);
-}
-.wm-app .global-spinner {
-  position: fixed;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-  z-index: 99999;
-}
-.wm-app .loading-data-msg {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-  background: var(--wm-spinner-loading-data-msg-background);
-  color: var(--wm-spinner-loading-data-msg-color);
-  border-radius: var(--wm-spinner-loading-data-msg-radius);
-  z-index: 1;
-}
-.wm-app .loading-data-msg > span {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--wm-space-2);
-}
 .wm-app .app-tabs {
   width: 100%;
   display: flex;