@wavemaker/app-runtime-wm-build 12.0.0-next.45070 → 12.0.0-next.45073

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

@@ -427,6 +427,59 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   --wm-box-shadow-lg: 0 1rem 3rem rgba(29, 58, 83, 0.15);
   --wm-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
 }
+@media (prefers-color-scheme: dark) {
+  :root {
+    --wm-color-background: #141218;
+    --wm-color-error: #f2b8b5;
+    --wm-color-error-container: #8c1d18;
+    --wm-color-inverse-on-surface: #322f35;
+    --wm-color-inverse-primary: #6750a4;
+    --wm-color-inverse-surface: #e6e0e9;
+    --wm-color-on-background: #e6e0e9;
+    --wm-color-on-error: #601410;
+    --wm-color-on-error-container: #f9dedc;
+    --wm-color-on-primary: #381e72;
+    --wm-color-on-primary-container: #eaddff;
+    --wm-color-on-primary-fixed: #21005d;
+    --wm-color-on-primary-fixed-variant: #4f378b;
+    --wm-color-on-secondary: #332d41;
+    --wm-color-on-secondary-container: #e8def8;
+    --wm-color-on-secondary-fixed: #1d192b;
+    --wm-color-on-secondary-fixed-variant: #4a4458;
+    --wm-color-on-surface: #e6e0e9;
+    --wm-color-on-surface-variant: #cac4d0;
+    --wm-color-on-tertiary: #492532;
+    --wm-color-on-tertiary-container: #ffd8e4;
+    --wm-color-on-tertiary-fixed: #31111d;
+    --wm-color-on-tertiary-fixed-variant: #633b48;
+    --wm-color-outline: #938f99;
+    --wm-color-outline-variant: #49454f;
+    --wm-color-primary: #d0bcfe;
+    --wm-color-primary-container: #4f378b;
+    --wm-color-primary-fixed: #eaddff;
+    --wm-color-primary-fixed-dim: #d0bcff;
+    --wm-color-scrim: #000000;
+    --wm-color-secondary: #ccc2dc;
+    --wm-color-secondary-container: #4a4458;
+    --wm-color-secondary-fixed: #e8def8;
+    --wm-color-secondary-fixed-dim: #ccc2dc;
+    --wm-color-shadow: #000000;
+    --wm-color-surface: #141218;
+    --wm-color-surface-bright: #3b383e;
+    --wm-color-surface-container: #211f26;
+    --wm-color-surface-container-high: #2b2930;
+    --wm-color-surface-container-highest: #36343b;
+    --wm-color-surface-container-low: #1d1b20;
+    --wm-color-surface-container-lowest: #0f0d13;
+    --wm-color-surface-dim: #141218;
+    --wm-color-surface-tint: #d0bcff;
+    --wm-color-surface-variant: #49454f;
+    --wm-color-tertiary: #efb8c8;
+    --wm-color-tertiary-container: #633b48;
+    --wm-color-tertiary-fixed: #ffd8e4;
+    --wm-color-tertiary-fixed-dim: #efb8c8;
+  }
+}
 /*=========
 css variables doesn't support by less functions to generate lighten, darken, fade, etc.
 We are using color-mix function of css variables.
@@ -460,6 +513,9 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   --wm-anchor-color-focus: color-mix(in srgb, var(--wm-anchor-color), var(--wm-color-black) var(--wm-opacity-focus));
   --wm-anchor-color-active: color-mix(in srgb, var(--wm-anchor-color), var(--wm-color-black) var(--wm-opacity-active));
   --wm-anchor-gap: var(--wm-space-1);
+  --wm-anchor-icon-size: var(--wm-icon-size);
+  --wm-anchor-image-size: var(--wm-icon-size);
+  --wm-anchor-image-radius: var(--wm-radius-circle);
   --wm-breadcrumb-gap: var(--wm-space-1);
   --wm-breadcrumb-item-font-size: var(--wm-body-large-font-size);
   --wm-breadcrumb-item-font-family: var(--wm-body-large-font-family);
@@ -501,6 +557,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   --wm-btn-height: 40px;
   --wm-btn-gap: var(--wm-space-2);
   --wm-btn-shadow: none;
+  --wm-btn-icon-size: var(--wm-icon-size-md);
   --wm-btn-state-layer-color: var(--wm-color-on-surface-variant);
   --wm-btn-state-layer-opacity-hover: var(--wm-opacity-hover);
   --wm-btn-state-layer-opacity-focus: var(--wm-opacity-focus);
@@ -509,12 +566,12 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   --wm-btn-disabled-background: var(--wm-color-on-surface-active);
   --wm-btn-disabled-border-color: var(--wm-color-on-surface-active);
   --wm-btn-disabled-opacity: 0.38;
-  --wm-btn-icon-size: var(--wm-icon-size-md);
-  --wm-btn-icon-width: 40px;
-  --wm-btn-icon-height: 40px;
-  --wm-btn-icon-margin: var(--wm-space-1);
-  --wm-btn-icon-padding: var(--wm-space-0);
-  --wm-btn-icon-radius: var(--wm-radius-pill);
+  --wm-btn-icon-md-size: var(--wm-icon-size-md);
+  --wm-btn-icon-md-width: 40px;
+  --wm-btn-icon-md-height: 40px;
+  --wm-btn-icon-md-margin: var(--wm-space-1);
+  --wm-btn-icon-md-padding: var(--wm-space-0);
+  --wm-btn-icon-md-radius: var(--wm-radius-pill);
   --wm-btn-icon-xs-size: var(--wm-icon-size-xs);
   --wm-btn-icon-xs-width: 24px;
   --wm-btn-icon-xs-height: 24px;
@@ -683,6 +740,45 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   --wm-checkbox-selected-state-active: var(--wm-color-primary-active);
   --wm-checkbox-icon-size: 10px;
   --wm-checkboxset-item-gap: var(--wm-space-6);
+  /* --chips-- */
+  --wm-chips-list-gap: var(--wm-space-3);
+  --wm-chips-list-icon-size: var(--wm-icon-size-sm);
+  --wm-chips-list-padding: var(--wm-form-control-padding);
+  --wm-chips-list-background: none;
+  --wm-chips-list-border-width: var(--wm-form-control-border-width);
+  --wm-chips-list-border-style: var(--wm-form-control-border-style);
+  --wm-chips-list-border-color: var(--wm-form-control-border-color);
+  --wm-chips-list-border-color-hover: var(--wm-form-control-border-color-hover);
+  --wm-chips-list-border-color-focus: var(--wm-form-control-border-color-focus);
+  --wm-chips-list-border-color-error: var(--wm-form-control-border-color-error);
+  --wm-chips-list-border-radius: var(--wm-form-control-radius);
+  --wm-chips-list-place-holder-color: var(--wm-form-control-color-place-holder);
+  --wm-chips-input-padding: var(--wm-space-0);
+  --wm-chips-list-height: var(--wm-form-control-height);
+  --wm-chip-item-height: 32px;
+  --wm-chip-item-padding: var(--wm-space-1) var(--wm-space-3);
+  --wm-chip-item-gap: var(--wm-space-2);
+  --wm-chip-item-color: var(--wm-color-on-surface-variant);
+  --wm-chip-item-background: none;
+  --wm-chip-item-background-selected: var(--wm-color-secondary-container);
+  --wm-chip-item-border-width: var(--wm-border-width);
+  --wm-chip-item-border-style: var(--wm-border-style);
+  --wm-chip-item-border-color: var(--wm-color-outline);
+  --wm-chip-item-border-color-selected: var(--wm-color-secondary-container);
+  --wm-chip-item-border-radius: var(--wm-radius-sm);
+  --wm-chip-item-border-radius-with-icon: var(--wm-radius-sm);
+  --wm-chip-item-border-radius-with-avatar: var(--wm-radius-pill);
+  --wm-chip-item-font-family: var(--wm-label-large-font-family);
+  --wm-chip-item-font-weight: var(--wm-label-large-font-weight);
+  --wm-chip-item-font-size: var(--wm-label-large-font-size);
+  --wm-chip-item-line-height: var(--wm-label-large-line-height);
+  --wm-chip-item-letter-spacing: var(--wm-label-large-letter-spacing);
+  --wm-chip-item-layer-color: var(--wm-color-on-surface-variant);
+  --wm-chip-item-layer-opacity-hover: var(--wm-opacity-hover);
+  --wm-chip-item-layer-opacity-focus: var(--wm-opacity-focus);
+  --wm-chip-item-layer-opacity-active: var(--wm-opacity-active);
+  --wm-chip-item-avatar-size: var(--wm-icon-size);
+  --wm-chip-item-avatar-radius: var(--wm-radius-pill);
   /*--form field/composite--*/
   --wm-caption-font-family: var(--wm-body-large-font-family);
   --wm-caption-font-size: var(--wm-body-large-font-size);
@@ -893,8 +989,8 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   /*--Nav--*/
   --wm-nav-min-height: var(--wm-nav-item-min-height);
   --wm-nav-background: var(--wm-color-surface-container-low);
-  --wm-nav-padding: var(--wm-space-3);
-  --wm-nav-gap: var(--wm-space-3);
+  --wm-nav-padding: var(--wm-space-2);
+  --wm-nav-gap: var(--wm-space-2);
   --wm-nav-item-min-height: 44px;
   --wm-nav-item-padding: var(--wm-space-2) var(--wm-space-6);
   --wm-nav-item-font-size: var(--wm-label-large-font-size);
@@ -914,9 +1010,9 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   --wm-nav-item-state-layer-opacity-active: var(--wm-opacity-active);
   --wm-nav-stacked-min-height: var(--wm-nav-stacked-item-min-height);
   --wm-nav-stacked-background: var(--wm-color-surface-container-low);
-  --wm-nav-stacked-padding: var(--wm-space-3);
-  --wm-nav-stacked-gap: var(--wm-space-0);
-  --wm-nav-stacked-item-min-height: 56px;
+  --wm-nav-stacked-padding: var(--wm-space-2);
+  --wm-nav-stacked-gap: var(--wm-space-2);
+  --wm-nav-stacked-item-min-height: 44px;
   --wm-nav-tabs-min-height: var(--wm-nav-tabs-item-min-height);
   --wm-nav-tabs-background: var(--wm-color-surface-container-low);
   --wm-nav-tabs-padding: var(--wm-space-0);
@@ -1359,6 +1455,30 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   --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";
+  /*-- popovers --*/
+  --wm-popover-z-index: 1060;
+  --wm-popover-gap: calc(var(--wm-space-1) * 2.5);
+  --wm-popover-margin: var(--wm-space-1);
+  --wm-popover-padding: var(--wm-space-0);
+  --wm-popover-background: var(--wm-color-surface-container);
+  --wm-popover-color: var(--wm-color-on-surface);
+  --wm-popover-shadow: var(--wm-elevation-shadow-1);
+  --wm-popover-radius: var(--wm-radius-sm);
+  --wm-popover-header-padding: var(--wm-space-4);
+  --wm-popover-header-color: var(--wm-color-on-surface);
+  --wm-popover-header-font-family: var(--wm-h4-font-family);
+  --wm-popover-header-font-weight: var(--wm-h4-font-weight);
+  --wm-popover-header-font-size: var(--wm-h4-font-size);
+  --wm-popover-header-line-height: var(--wm-h4-line-height);
+  --wm-popover-header-letter-spacing: var(--wm-h4-letter-spacing);
+  --wm-popover-body-padding: var(--wm-space-4);
+  --wm-popover-body-font-family: var(--wm-body-medium-font-family);
+  --wm-popover-body-font-size: var(--wm-body-medium-font-size);
+  --wm-popover-body-font-weight: var(--wm-body-medium-font-weight);
+  --wm-popover-body-line-height: var(--wm-body-medium-line-height);
+  --wm-popover-body-letter-spacing: var(--wm-body-medium-letter-spacing);
+  --wm-popover-arrow-background: var(--wm-popover-background);
+  --wm-popover-arrow-size: var(--wm-space-3);
   /*headings*/
   --wm-headings-color: var(--wm-color-on-surface);
   /*page content*/
@@ -9960,8 +10080,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   text-align: center;
   background-color: #000;
 }
-.wm-app .note-popover,
-.wm-app .popover.fade.in {
+.wm-app .note-popover {
   max-width: none;
 }
 .wm-app .note-popover {
@@ -10635,45 +10754,6 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
 .wm-app .infinite {
   animation-iteration-count: infinite;
 }
-.wm-app .app-popover {
-  min-width: 50px;
-  min-height: 50px;
-  padding: 0;
-}
-.wm-app .app-popover .popover-end,
-.wm-app .app-popover .popover-start {
-  width: 0;
-  padding: 0;
-  height: 0;
-  border: 0;
-  position: absolute;
-}
-.wm-app .app-popover .popover-content {
-  width: 100%;
-  height: 100%;
-  overflow: auto;
-  padding: 0;
-}
-.wm-app .app-popover .popover-content .app-partial {
-  overflow: auto;
-}
-.wm-app .app-popover .popover-content .app-partial > button {
-  margin-top: 0.9em;
-}
-.wm-app .app-popover .popover-title ~ .popover-content {
-  ignore: a;
-  height: calc(100% - 3em);
-}
-.wm-app .app-popover.bottom.bottom-right > .arrow,
-.wm-app .app-popover.bottom.top-right > .arrow,
-.wm-app .app-popover.top.bottom-right > .arrow,
-.wm-app .app-popover.top.top-right > .arrow {
-  left: auto !important;
-  right: 1em !important;
-}
-.wm-app .app-popover-wrapper .disable-popover {
-  pointer-events: none;
-}
 .wm-app .app-tree {
   padding: 0;
   margin: 0;
@@ -11310,12 +11390,6 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   width: 100%;
   height: 31px;
 }
-.wm-app .model-holder[bsdatepicker] {
-  visibility: hidden;
-  width: 0;
-  height: 0;
-  min-height: 35px;
-}
 .wm-app .app-required-input {
   color: red;
 }
@@ -11663,23 +11737,6 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   background-image: none;
   border-bottom: 2px solid #f44336;
 }
-.wm-app .popover.fade.bottom > .arrow,
-.wm-app .popover.fade.left > .arrow,
-.wm-app .popover.fade.right > .arrow,
-.wm-app .popover.fade.top > .arrow {
-  margin: 0;
-}
-.wm-app .popover.fade.bottom > .popover-inner,
-.wm-app .popover.fade.left > .popover-inner,
-.wm-app .popover.fade.right > .popover-inner,
-.wm-app .popover.fade.top > .popover-inner {
-  height: 100%;
-  overflow: auto;
-}
-.wm-app .app-popover .panel {
-  border: 0;
-  box-shadow: none;
-}
 .wm-app app-prefab-__self__ {
   display: block;
   width: 100%;
@@ -13662,6 +13719,39 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   gap: var(--wm-anchor-gap);
   cursor: pointer;
 }
+.wm-app a .app-icon,
+.wm-app .app-anchor .app-icon {
+  font-size: var(--wm-anchor-icon-size);
+  min-width: var(--wm-anchor-icon-size);
+  width: var(--wm-anchor-icon-size);
+  height: var(--wm-anchor-icon-size);
+}
+.wm-app a .anchor-image-icon,
+.wm-app .app-anchor .anchor-image-icon {
+  object-fit: cover;
+  min-width: var(--wm-anchor-image-size);
+  width: var(--wm-anchor-image-size);
+  height: var(--wm-anchor-image-size);
+  border-radius: var(--wm-anchor-image-radius);
+}
+.wm-app a .anchor-caption:empty,
+.wm-app .app-anchor .anchor-caption:empty {
+  display: none;
+}
+.wm-app a [class="app-icon"],
+.wm-app .app-anchor [class="app-icon"],
+.wm-app a [class~="glyphicon"],
+.wm-app .app-anchor [class~="glyphicon"] {
+  display: none;
+}
+.wm-app a[icon-position="right"],
+.wm-app .app-anchor[icon-position="right"] {
+  flex-direction: row-reverse;
+}
+.wm-app a[icon-position="top"],
+.wm-app .app-anchor[icon-position="top"] {
+  flex-direction: column;
+}
 .wm-app a:hover,
 .wm-app .app-anchor:hover {
   --wm-anchor-color: var(--wm-anchor-color-hover);
@@ -13677,16 +13767,6 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   --wm-anchor-color: var(--wm-anchor-color-active);
   --wm-anchor-text-decoration: var(--wm-anchor-text-decoration-active);
 }
-.wm-app a .anchor-caption:empty,
-.wm-app .app-anchor .anchor-caption:empty {
-  display: none;
-}
-.wm-app a [class="app-icon"],
-.wm-app .app-anchor [class="app-icon"],
-.wm-app a [class~="glyphicon"],
-.wm-app .app-anchor [class~="glyphicon"] {
-  display: none;
-}
 .wm-app .app-audio {
   position: relative;
   display: inline-block;
@@ -13822,11 +13902,24 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   min-height: var(--wm-btn-height);
   box-shadow: var(--wm-btn-shadow);
   display: inline-flex;
+  flex-direction: row;
   align-items: center;
   justify-content: center;
   gap: var(--wm-btn-gap);
   cursor: pointer;
 }
+.wm-app .btn:has(.btn-caption:empty) .app-icon,
+.wm-app button:has(.btn-caption:empty) .app-icon,
+.wm-app .btn:has(.anchor-caption:empty) .app-icon,
+.wm-app button:has(.anchor-caption:empty) .app-icon {
+  margin: 0;
+}
+.wm-app .btn:has(.btn-caption:not(:empty)) .app-icon,
+.wm-app button:has(.btn-caption:not(:empty)) .app-icon,
+.wm-app .btn:has(.anchor-caption:not(:empty)) .app-icon,
+.wm-app button:has(.anchor-caption:not(:empty)) .app-icon {
+  margin-left: calc(calc(var(--wm-btn-icon-size) / 3)* -1);
+}
 .wm-app .btn + .btn,
 .wm-app button + .btn {
   margin-left: var(--wm-space-3);
@@ -13838,27 +13931,39 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   min-width: var(--wm-btn-icon-size);
   width: var(--wm-btn-icon-size);
   height: var(--wm-btn-icon-size);
-  margin-left: calc(calc(var(--wm-btn-icon-size) / 3)* -1);
 }
 .wm-app .btn .btn-caption,
-.wm-app button .btn-caption {
+.wm-app button .btn-caption,
+.wm-app .btn .anchor-caption,
+.wm-app button .anchor-caption {
   margin: 0;
 }
 .wm-app .btn .btn-caption:empty,
-.wm-app button .btn-caption:empty {
+.wm-app button .btn-caption:empty,
+.wm-app .btn .anchor-caption:empty,
+.wm-app button .anchor-caption:empty {
   display: none;
 }
-.wm-app .btn[iconposition="right"] .btn-caption,
-.wm-app button[iconposition="right"] .btn-caption {
-  margin: 0 !important;
+.wm-app .btn[icon-position="right"],
+.wm-app button[icon-position="right"] {
+  flex-direction: row-reverse;
+}
+.wm-app .btn[icon-position="right"]:has(.btn-caption:not(:empty)) .app-icon,
+.wm-app button[icon-position="right"]:has(.btn-caption:not(:empty)) .app-icon,
+.wm-app .btn[icon-position="right"]:has(.anchor-caption:not(:empty)) .app-icon,
+.wm-app button[icon-position="right"]:has(.anchor-caption:not(:empty)) .app-icon {
+  margin-left: var(--wm-space-0);
+  margin-right: calc(calc(var(--wm-btn-icon-size) / 3)* -1);
 }
-.wm-app .btn[iconposition="top"],
-.wm-app button[iconposition="top"] {
+.wm-app .btn[icon-position="top"],
+.wm-app button[icon-position="top"] {
   flex-direction: column;
 }
-.wm-app .btn[iconposition="top"] .button-image-icon + .btn-caption,
-.wm-app button[iconposition="top"] .button-image-icon + .btn-caption {
-  margin-top: var(--wm-space-1);
+.wm-app .btn[icon-position="top"]:has(.btn-caption:not(:empty)) .app-icon,
+.wm-app button[icon-position="top"]:has(.btn-caption:not(:empty)) .app-icon,
+.wm-app .btn[icon-position="top"]:has(.anchor-caption:not(:empty)) .app-icon,
+.wm-app button[icon-position="top"]:has(.anchor-caption:not(:empty)) .app-icon {
+  margin: var(--wm-space-0);
 }
 .wm-app .btn-fab,
 .wm-app button-fab {
@@ -13876,9 +13981,9 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   --wm-btn-min-width: var(--wm-btn-xs-min-width);
   --wm-btn-height: var(--wm-btn-xs-height);
   --wm-btn-gap: var(--wm-btn-xs-gap);
-  --wm-btn-icon-size: var(--wm-btn-icon-xs-size);
-  --wm-btn-icon-width: var(--wm-btn-icon-xs-width);
-  --wm-btn-icon-height: var(--wm-btn-icon-xs-height);
+  --wm-btn-icon-size: var(--wm-btn-xs-icon-size);
+  --wm-btn-icon-width: var(--wm-btn-xs-icon-width);
+  --wm-btn-icon-height: var(--wm-btn-xs-icon-height);
 }
 .wm-app .btn-sm,
 .wm-app button-sm {
@@ -13892,9 +13997,9 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   --wm-btn-min-width: var(--wm-btn-sm-min-width);
   --wm-btn-height: var(--wm-btn-sm-height);
   --wm-btn-gap: var(--wm-btn-sm-gap);
-  --wm-btn-icon-size: var(--wm-btn-icon-sm-size);
-  --wm-btn-icon-width: var(--wm-btn-icon-sm-width);
-  --wm-btn-icon-height: var(--wm-btn-icon-sm-height);
+  --wm-btn-icon-size: var(--wm-btn-sm-icon-size);
+  --wm-btn-icon-width: var(--wm-btn-sm-icon-width);
+  --wm-btn-icon-height: var(--wm-btn-sm-icon-height);
 }
 .wm-app .btn-lg,
 .wm-app button-lg {
@@ -13908,9 +14013,9 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   --wm-btn-min-width: var(--wm-btn-lg-min-width);
   --wm-btn-height: var(--wm-btn-lg-height);
   --wm-btn-gap: var(--wm-btn-lg-gap);
-  --wm-btn-icon-size: var(--wm-btn-icon-lg-size);
-  --wm-btn-icon-width: var(--wm-btn-icon-lg-width);
-  --wm-btn-icon-height: var(--wm-btn-icon-lg-height);
+  --wm-btn-icon-size: var(--wm-btn-lg-icon-size);
+  --wm-btn-icon-width: var(--wm-btn-lg-icon-width);
+  --wm-btn-icon-height: var(--wm-btn-lg-icon-height);
 }
 .wm-app .btn-block,
 .wm-app button-block {
@@ -14112,23 +14217,41 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
 }
 .wm-app .btn-icon,
 .wm-app button-icon {
-  width: var(--wm-btn-icon-width);
-  height: var(--wm-btn-icon-height);
-  min-height: var(--wm-btn-icon-height);
-  margin: var(--wm-btn-icon-margin);
-  --wm-btn-padding: var(--wm-btn-icon-padding);
-  --wm-btn-radius: var(--wm-btn-icon-radius);
+  width: var(--wm-btn-icon-md-width);
+  height: var(--wm-btn-icon-md-height);
+  min-height: var(--wm-btn-icon-md-height);
+  margin: var(--wm-btn-icon-md-margin);
+  --wm-btn-padding: var(--wm-btn-icon-md-padding);
+  --wm-btn-radius: var(--wm-btn-icon-md-radius);
+  --wm-btn-icon-size: var(--wm-btn-icon-md-size);
+}
+.wm-app .btn-icon.btn-xs,
+.wm-app button-icon.btn-xs {
+  --wm-btn-icon-size: var(--wm-btn-icon-xs-size);
+  --wm-btn-icon-md-width: var(--wm-btn-icon-xs-width);
+  --wm-btn-icon-md-height: var(--wm-btn-icon-xs-height);
+}
+.wm-app .btn-icon.btn-sm,
+.wm-app button-icon.btn-sm {
+  --wm-btn-icon-size: var(--wm-btn-icon-sm-size);
+  --wm-btn-icon-md-width: var(--wm-btn-icon-sm-width);
+  --wm-btn-icon-md-height: var(--wm-btn-icon-sm-height);
+}
+.wm-app .btn-icon.btn-lg,
+.wm-app button-icon.btn-lg {
+  --wm-btn-icon-size: var(--wm-btn-icon-lg-size);
+  --wm-btn-icon-md-width: var(--wm-btn-icon-lg-width);
+  --wm-btn-icon-md-height: var(--wm-btn-icon-lg-height);
 }
 .wm-app .btn-icon .app-icon,
 .wm-app button-icon .app-icon {
   margin: 0;
 }
 .wm-app .btn-icon .btn-caption,
-.wm-app button-icon .btn-caption {
-  width: 100%;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.wm-app button-icon .btn-caption,
+.wm-app .btn-icon .anchor-caption,
+.wm-app button-icon .anchor-caption {
+  display: none;
 }
 .wm-app .btn.disabled,
 .wm-app button.disabled,
@@ -14685,6 +14808,96 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   position: relative;
   z-index: -1;
 }
+.wm-app .app-chips {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--wm-chips-list-gap);
+  padding: calc(var(--wm-chips-list-padding) * 0.5) var(--wm-chips-list-padding);
+  background: var(--wm-chips-list-background);
+  border: var(--wm-chips-list-border-width) var(--wm-chips-list-border-style) var(--wm-chips-list-border-color);
+  border-radius: var(--wm-chips-list-border-radius);
+  min-height: var(--wm-chips-list-height);
+}
+.wm-app .app-chips[disabled="true"] {
+  opacity: 0.38;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+.wm-app .app-chips .chip-item.active {
+  --wm-chip-item-background: var(--wm-chip-item-background-selected);
+  --wm-chip-item-border-color: var(--wm-chip-item-border-color-selected);
+}
+.wm-app .app-chips .app-chip-search {
+  flex: 1 1 auto;
+}
+.wm-app .app-chips .app-chip-search.full-width {
+  flex: 1 1 100%;
+}
+.wm-app .app-chips .app-chip-search .app-chip-input > .model-holder,
+.wm-app .app-chips .app-chip-search .app-chip-input > .clear-btn,
+.wm-app .app-chips .app-chip-search .app-chip-input > .back-btn {
+  display: none;
+}
+.wm-app .app-chips .app-chip-search .app-chip-input .form-control {
+  padding: var(--wm-chips-input-padding);
+  border: none;
+  box-shadow: none;
+  margin: calc(var(--wm-chips-list-padding) * -1) var(--wm-space-0);
+}
+.wm-app .app-chips:focus-within {
+  border-color: var(--wm-chips-list-border-color-focus);
+  box-shadow: inset 0 0 0 2px var(--wm-chips-list-border-color-focus);
+}
+.wm-app .app-chip {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  gap: var(--wm-chip-item-gap);
+  min-height: var(--wm-chip-item-height);
+  height: var(--wm-chip-item-height);
+  padding: var(--wm-chip-item-padding);
+  color: var(--wm-chip-item-color);
+  background: var(--wm-chip-item-background);
+  border-radius: var(--wm-chip-item-border-radius);
+  border: var(--wm-chip-item-border-width) var(--wm-chip-item-border-style) var(--wm-chip-item-border-color);
+  font-family: var(--wm-chip-item-font-family);
+  font-weight: var(--wm-chip-item-font-weight);
+  font-size: var(--wm-chip-item-font-size);
+  line-height: var(--wm-chip-item-line-height);
+  letter-spacing: var(--wm-chip-item-letter-spacing);
+}
+.wm-app .app-chip:before {
+  content: "";
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  position: absolute;
+  pointer-events: none;
+  border-radius: inherit;
+  opacity: 0;
+  background: var(--wm-chip-item-layer-color);
+}
+.wm-app .app-chip:hover:before {
+  opacity: var(--wm-chip-item-layer-opacity-hover);
+}
+.wm-app .app-chip:focus:before {
+  opacity: var(--wm-chip-item-layer-opacity-focus);
+}
+.wm-app .app-chip:active,
+.wm-app .app-chip:active:hover,
+.wm-app .app-chip:active:focus {
+  opacity: var(--wm-chip-item-layer-opacity-active);
+}
+.wm-app .app-chip > .btn {
+  width: auto;
+  padding: var(--wm-space-0);
+  min-height: var(--wm-btn-icon-size);
+  height: var(--wm-btn-icon-size);
+  margin: var(--wm-space-0) calc(var(--wm-space-1) * -1) var(--wm-space-0) var(--wm-space-0);
+}
 .wm-app .app-composite-widget {
   position: relative;
   display: flex;
@@ -14869,16 +15082,19 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
 .wm-app .input-group:not(.app-currency) {
   position: relative;
 }
-.wm-app .input-group:not(.app-currency) .input-group-btn {
+.wm-app .input-group:not(.app-currency) .input-group-btn,
+.wm-app .input-group:not(.app-currency) div:has(>.model-holder[bsdatepicker]) {
   position: absolute;
-  top: var(--wm-space-2);
+  top: calc(50% - calc(var(--wm-input-group-btn-height)/2));
   right: var(--wm-space-1);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: var(--wm-space-1);
 }
-.wm-app .input-group:not(.app-currency) .input-group-btn .btn {
+.wm-app .input-group:not(.app-currency) .input-group-btn .btn,
+.wm-app .input-group:not(.app-currency) div:has(>.model-holder[bsdatepicker]) .btn {
+  margin: 0;
   width: var(--wm-input-group-btn-width);
   height: var(--wm-input-group-btn-height);
   border-radius: var(--wm-input-group-btn-border-radius);
@@ -14886,7 +15102,8 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   border: none;
   background: none;
 }
-.wm-app .input-group:not(.app-currency) .input-group-btn .btn .app-icon {
+.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 {
   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);
@@ -14894,7 +15111,8 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   justify-content: center;
   align-items: center;
 }
-.wm-app .input-group:not(.app-currency) .input-group-btn .btn + .btn {
+.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 {
   margin: 0;
 }
 .wm-app .input-group:not(.app-currency) .form-control {
@@ -14903,6 +15121,11 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
 .wm-app .input-group:not(.app-currency).app-datetime .form-control {
   padding-right: calc(var(--wm-input-group-btn-width) * 2.4);
 }
+.wm-app .input-group:not(.app-currency) .model-holder[bsdatepicker] {
+  visibility: hidden;
+  width: 0;
+  height: var(--wm-input-group-btn-height);
+}
 .wm-app .help-block {
   color: var(--wm-help-block-color);
   font-family: var(--wm-help-block-font-family);
@@ -17638,6 +17861,126 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
 .wm-app video {
   display: inline-block;
 }
+.wm-app .app-popover-wrapper {
+  display: inline-flex;
+}
+.wm-app .app-popover-wrapper > .app-anchor.disable-popover {
+  pointer-events: none;
+}
+.wm-app .app-popover {
+  position: fixed;
+  inset: auto;
+  z-index: var(--wm-popover-z-index);
+  min-width: 50px;
+  min-height: 50px;
+  margin: var(--wm-popover-margin);
+  padding: var(--wm-popover-padding);
+  background: var(--wm-popover-background);
+  background-clip: padding-box;
+  box-shadow: var(--wm-popover-shadow);
+  border-radius: var(--wm-popover-radius);
+  display: none;
+}
+.wm-app .app-popover.in {
+  display: inline-flex !important;
+  flex-direction: column;
+}
+.wm-app .app-popover .popover-header {
+  padding: var(--wm-popover-header-padding);
+  font-family: var(--wm-popover-header-font-family);
+  font-size: var(--wm-popover-header-font-size);
+  font-weight: var(--wm-popover-header-font-weight);
+  line-height: var(--wm-popover-header-line-height);
+  letter-spacing: var(--wm-popover-header-letter-spacing);
+}
+.wm-app .app-popover .popover-body {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  padding: var(--wm-popover-body-padding);
+  font-family: var(--wm-popover-body-font-family);
+  font-weight: var(--wm-popover-body-font-weight);
+  font-size: var(--wm-popover-body-font-size);
+  line-height: var(--wm-popover-body-line-height);
+  letter-spacing: var(--wm-popover-body-letter-spacing);
+}
+.wm-app .app-popover .popover-body:empty {
+  display: none;
+}
+.wm-app .app-popover:has(>.popover-header) > .popover-body:not(:empty) {
+  padding-top: unset;
+}
+.wm-app .app-popover > .arrow,
+.wm-app .app-popover > .arrow:after {
+  position: absolute;
+  display: block;
+  width: 0;
+  height: 0;
+  border: var(--wm-popover-arrow-size) solid transparent;
+}
+.wm-app .app-popover > .arrow:after {
+  content: "";
+}
+.wm-app .app-popover.top > .arrow {
+  border-bottom-width: 0;
+  left: 50%;
+  margin-left: calc(var(--wm-popover-arrow-size) * -1);
+  bottom: calc(var(--wm-popover-arrow-size) * -1);
+}
+.wm-app .app-popover.top > .arrow:after {
+  border-bottom-width: 0;
+  bottom: 1px;
+  margin-left: calc(var(--wm-popover-arrow-size) * -0.9125);
+  border-top-color: var(--wm-popover-arrow-background);
+}
+.wm-app .app-popover.right > .arrow {
+  border-left-width: 0;
+  top: 50%;
+  left: calc(var(--wm-popover-arrow-size) * -1);
+  margin-top: calc(var(--wm-popover-arrow-size) * -1);
+}
+.wm-app .app-popover.right > .arrow:after {
+  border-left-width: 0;
+  left: 1px;
+  bottom: calc(var(--wm-popover-arrow-size) * -0.9125);
+  border-right-color: var(--wm-popover-arrow-background);
+}
+.wm-app .app-popover.bottom > .arrow {
+  border-top-width: 0;
+  left: 50%;
+  margin-left: calc(var(--wm-popover-arrow-size) * -1);
+  top: calc(var(--wm-popover-arrow-size) * -1);
+}
+.wm-app .app-popover.bottom > .arrow:after {
+  border-top-width: 0;
+  top: 1px;
+  margin-left: calc(var(--wm-popover-arrow-size) * -0.9125);
+  border-bottom-color: var(--wm-popover-arrow-background);
+}
+.wm-app .app-popover.left > .arrow {
+  border-right-width: 0;
+  top: 50%;
+  right: calc(var(--wm-popover-arrow-size) * -1);
+  margin-top: calc(var(--wm-popover-arrow-size) * -1);
+}
+.wm-app .app-popover.left > .arrow:after {
+  border-right-width: 0;
+  right: 1px;
+  bottom: calc(var(--wm-popover-arrow-size) * -0.9125);
+  border-left-color: var(--wm-popover-arrow-background);
+}
+.wm-app .app-popover.top {
+  margin-top: calc(var(--wm-popover-gap) * -1);
+}
+.wm-app .app-popover.right {
+  margin-left: calc(var(--wm-popover-gap) * 1);
+}
+.wm-app .app-popover.bottom {
+  margin-top: calc(var(--wm-popover-gap) * 1);
+}
+.wm-app .app-popover.left {
+  margin-left: - calc(var(--wm-popover-gap) * -1);
+}
 .wm-app .animated {
   -webkit-animation-duration: 1s;
   animation-duration: 1s;