@syncfusion/ej2-angular-dropdowns 20.2.40 → 20.2.43-3197

package/styles/bootstrap5-dark.css

@@ -103,7 +103,8 @@
   position: relative;
 }
 
-.e-popup.e-ddl .e-dropdownbase.e-nodata {
+.e-popup.e-ddl .e-dropdownbase.e-nodata,
+.e-popup.e-mention .e-dropdownbase.e-nodata {
   color: #fff;
   cursor: default;
   font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
@@ -112,6 +113,45 @@
   text-align: center;
 }
 
+.e-mention.e-popup {
+  background: #212529;
+  border: 0;
+  box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.21);
+  margin-top: 2px;
+  position: absolute;
+}
+
+.e-mention .e-dropdownbase .e-list-item .e-highlight {
+  display: inline;
+  font-weight: bold;
+  vertical-align: baseline;
+}
+
+.e-mention .e-mention-chip,
+.e-mention .e-mention-chip:hover {
+  background: #343a40;
+  border-radius: 2px;
+  border: none;
+  color: #0d6efd;
+  cursor: default;
+}
+
+.e-mention .e-mention-chip::selection {
+  color: #fff;
+  background: #0d6efd;
+}
+
+.e-mention.e-editable-element {
+  border: 2px solid #444c54;
+  height: auto;
+  min-height: 120px;
+  width: 100%;
+}
+
+.e-form-mirror-div {
+  white-space: pre-wrap;
+}
+
 .e-rtl .e-dropdownbase.e-dd-group .e-list-item {
   padding-right: 12px;
 }
@@ -573,6 +613,9 @@
 .e-popup-full-page .e-popup-full-page.e-ddl.e-popup.e-ddl-device-filter {
   margin: 0;
 }
+.e-popup-full-page .e-popup-full-page.e-ios {
+  position: fixed;
+}
 
 .e-ddl.e-control-wrapper .e-ddl-disable-icon {
   position: relative;
@@ -948,7 +991,10 @@ ejs-dropdownlist {
   box-shadow: none;
   position: absolute;
 }
-.e-ddt.e-popup .e-checkbox-wrapper .e-frame {
+.e-ddt.e-popup .e-active .e-checkbox-wrapper .e-frame:not(.e-check):not(.e-stop) {
+  background-color: #212529;
+}
+.e-ddt.e-popup .e-checkbox-wrapper .e-frame:not(.e-check):not(.e-stop) {
   background-color: transparent;
 }
 .e-ddt.e-popup .e-selectall-parent {
@@ -1565,6 +1611,10 @@ ejs-dropdownlist {
   width: 14px;
 }
 
+.e-rtl .e-multi-select-wrapper .e-chips-close {
+  margin: 0 0 0;
+}
+
 .e-multi-select-wrapper .e-mob-chip.e-chips .e-chips-close {
   margin: 3px 0 0;
 }
@@ -1583,7 +1633,7 @@ ejs-dropdownlist {
 .e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
 .e-small.e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
 .e-multiselect.e-input-group.e-control-container .e-multi-select-wrapper.e-down-icon .e-clear-icon {
-  right: 40px;
+  right: 30px;
 }
 
 .e-bigger.e-small .e-multiselect .e-down-icon .e-chips-close.e-close-hooker {
@@ -1591,7 +1641,7 @@ ejs-dropdownlist {
 }
 
 .e-multiselect.e-input-group.e-control-container.e-rtl .e-multi-select-wrapper.e-down-icon .e-clear-icon {
-  left: 40px;
+  left: 30px;
   right: auto;
 }
 
@@ -1627,8 +1677,8 @@ ejs-dropdownlist {
   height: 30px;
   min-height: 30px;
   outline: none;
-  padding: 0;
-  text-indent: 8px;
+  padding: 0 0 0 8px;
+  text-indent: 0;
 }
 
 .e-multiselect.e-filled .e-multi-select-wrapper input[type=text] {
@@ -1800,7 +1850,7 @@ ejs-dropdownlist {
   padding: 12px 4px;
 }
 .e-multiselect.e-rtl .e-multi-select-wrapper .e-chips-close.e-close-hooker {
-  left: 40px;
+  left: 30px;
   position: absolute;
   right: auto;
   left: 0;
@@ -2304,6 +2354,20 @@ ejs-multiselect {
   display: none;
 }
 
+.e-multiselect.e-input-group.e-control-wrapper .e-input-group-icon {
+  margin-right: 0;
+}
+
+.e-multiselect.e-control-container.e-input-group.e-disabled .e-input-group-icon.e-ddl-icon.e-icons,
+.e-multiselect.e-control-container.e-input-group.e-disabled .e-clear-icon {
+  cursor: not-allowed;
+}
+
+.e-multiselect.e-control-wrapper.e-control-container.e-input-group.e-checkbox .e-multi-select-wrapper.e-down-icon,
+.e-multiselect.e-control-wrapper.e-control-container.e-input-group.e-checkbox .e-multi-select-wrapper.e-down-icon .e-multi-searcher .e-dropdownbase.e-control.e-multiselect.e-lib {
+  cursor: pointer;
+}
+
 .e-multi-select-wrapper .e-chips.e-chip-selected .e-chips-close::before {
   color: #fff;
 }
@@ -2499,6 +2563,10 @@ ejs-multiselect {
   left: 0;
 }
 
+.e-small.e-bigger .e-multi-select-wrapper .e-close-hooker::before {
+  left: 0;
+}
+
 .e-bigger.e-small .e-multi-select-wrapper .e-chips {
   height: 26px;
 }
@@ -3299,4 +3367,24 @@ ejs-listbox {
 .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-badge:not(.e-list-avatar) {
   padding-left: 10px;
   padding-right: 16px;
-}
+}
+
+/* stylelint-disable-line no-empty-source */
+/* stylelint-disable property-no-vendor-prefix */
+@keyframes material-spinner-rotate {
+  0% {
+    transform: rotate(0);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes fabric-spinner-rotate {
+  0% {
+    transform: rotate(0);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+/* stylelint-disable-line no-empty-source */

package/styles/bootstrap5-dark.scss

@@ -5,3 +5,4 @@
 @import 'auto-complete/bootstrap5-dark.scss';
 @import 'multi-select/bootstrap5-dark.scss';
 @import 'list-box/bootstrap5-dark.scss';
+@import 'mention/bootstrap5-dark.scss';

package/styles/bootstrap5.css

@@ -103,7 +103,8 @@
   position: relative;
 }
 
-.e-popup.e-ddl .e-dropdownbase.e-nodata {
+.e-popup.e-ddl .e-dropdownbase.e-nodata,
+.e-popup.e-mention .e-dropdownbase.e-nodata {
   color: #212529;
   cursor: default;
   font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
@@ -112,6 +113,45 @@
   text-align: center;
 }
 
+.e-mention.e-popup {
+  background: #fff;
+  border: 0;
+  box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.21);
+  margin-top: 2px;
+  position: absolute;
+}
+
+.e-mention .e-dropdownbase .e-list-item .e-highlight {
+  display: inline;
+  font-weight: bold;
+  vertical-align: baseline;
+}
+
+.e-mention .e-mention-chip,
+.e-mention .e-mention-chip:hover {
+  background: #e9ecef;
+  border-radius: 2px;
+  border: none;
+  color: #0d6efd;
+  cursor: default;
+}
+
+.e-mention .e-mention-chip::selection {
+  color: #fff;
+  background: #0d6efd;
+}
+
+.e-mention.e-editable-element {
+  border: 2px solid #dee2e6;
+  height: auto;
+  min-height: 120px;
+  width: 100%;
+}
+
+.e-form-mirror-div {
+  white-space: pre-wrap;
+}
+
 .e-rtl .e-dropdownbase.e-dd-group .e-list-item {
   padding-right: 12px;
 }
@@ -573,6 +613,9 @@
 .e-popup-full-page .e-popup-full-page.e-ddl.e-popup.e-ddl-device-filter {
   margin: 0;
 }
+.e-popup-full-page .e-popup-full-page.e-ios {
+  position: fixed;
+}
 
 .e-ddl.e-control-wrapper .e-ddl-disable-icon {
   position: relative;
@@ -948,7 +991,10 @@ ejs-dropdownlist {
   box-shadow: none;
   position: absolute;
 }
-.e-ddt.e-popup .e-checkbox-wrapper .e-frame {
+.e-ddt.e-popup .e-active .e-checkbox-wrapper .e-frame:not(.e-check):not(.e-stop) {
+  background-color: #fff;
+}
+.e-ddt.e-popup .e-checkbox-wrapper .e-frame:not(.e-check):not(.e-stop) {
   background-color: transparent;
 }
 .e-ddt.e-popup .e-selectall-parent {
@@ -1565,6 +1611,10 @@ ejs-dropdownlist {
   width: 14px;
 }
 
+.e-rtl .e-multi-select-wrapper .e-chips-close {
+  margin: 0 0 0;
+}
+
 .e-multi-select-wrapper .e-mob-chip.e-chips .e-chips-close {
   margin: 3px 0 0;
 }
@@ -1583,7 +1633,7 @@ ejs-dropdownlist {
 .e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
 .e-small.e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
 .e-multiselect.e-input-group.e-control-container .e-multi-select-wrapper.e-down-icon .e-clear-icon {
-  right: 40px;
+  right: 30px;
 }
 
 .e-bigger.e-small .e-multiselect .e-down-icon .e-chips-close.e-close-hooker {
@@ -1591,7 +1641,7 @@ ejs-dropdownlist {
 }
 
 .e-multiselect.e-input-group.e-control-container.e-rtl .e-multi-select-wrapper.e-down-icon .e-clear-icon {
-  left: 40px;
+  left: 30px;
   right: auto;
 }
 
@@ -1627,8 +1677,8 @@ ejs-dropdownlist {
   height: 30px;
   min-height: 30px;
   outline: none;
-  padding: 0;
-  text-indent: 8px;
+  padding: 0 0 0 8px;
+  text-indent: 0;
 }
 
 .e-multiselect.e-filled .e-multi-select-wrapper input[type=text] {
@@ -1800,7 +1850,7 @@ ejs-dropdownlist {
   padding: 12px 4px;
 }
 .e-multiselect.e-rtl .e-multi-select-wrapper .e-chips-close.e-close-hooker {
-  left: 40px;
+  left: 30px;
   position: absolute;
   right: auto;
   left: 0;
@@ -2304,6 +2354,20 @@ ejs-multiselect {
   display: none;
 }
 
+.e-multiselect.e-input-group.e-control-wrapper .e-input-group-icon {
+  margin-right: 0;
+}
+
+.e-multiselect.e-control-container.e-input-group.e-disabled .e-input-group-icon.e-ddl-icon.e-icons,
+.e-multiselect.e-control-container.e-input-group.e-disabled .e-clear-icon {
+  cursor: not-allowed;
+}
+
+.e-multiselect.e-control-wrapper.e-control-container.e-input-group.e-checkbox .e-multi-select-wrapper.e-down-icon,
+.e-multiselect.e-control-wrapper.e-control-container.e-input-group.e-checkbox .e-multi-select-wrapper.e-down-icon .e-multi-searcher .e-dropdownbase.e-control.e-multiselect.e-lib {
+  cursor: pointer;
+}
+
 .e-multi-select-wrapper .e-chips.e-chip-selected .e-chips-close::before {
   color: #212529;
 }
@@ -2499,6 +2563,10 @@ ejs-multiselect {
   left: 0;
 }
 
+.e-small.e-bigger .e-multi-select-wrapper .e-close-hooker::before {
+  left: 0;
+}
+
 .e-bigger.e-small .e-multi-select-wrapper .e-chips {
   height: 26px;
 }
@@ -3299,4 +3367,24 @@ ejs-listbox {
 .e-listbox-container.e-rtl.e-list-template .e-list-wrapper.e-list-badge:not(.e-list-avatar) {
   padding-left: 10px;
   padding-right: 16px;
-}
+}
+
+/* stylelint-disable-line no-empty-source */
+/* stylelint-disable property-no-vendor-prefix */
+@keyframes material-spinner-rotate {
+  0% {
+    transform: rotate(0);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes fabric-spinner-rotate {
+  0% {
+    transform: rotate(0);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+/* stylelint-disable-line no-empty-source */

package/styles/bootstrap5.scss

@@ -5,3 +5,4 @@
 @import 'auto-complete/bootstrap5.scss';
 @import 'multi-select/bootstrap5.scss';
 @import 'list-box/bootstrap5.scss';
+@import 'mention/bootstrap5.scss';

package/styles/drop-down-base/_bootstrap-dark-definition.scss

@@ -9,13 +9,20 @@ $ddl-list-bottom-border: $ddl-list-border-size !default;
 $ddl-list-border-color: $grey-44 !default;
 $ddl-list-font-family: inherit !default;
 $ddl-list-gradient-color: $grey-white !default;
+$mention-gradient-color: $brand-primary-font !default;
+$mention-list-box-shadow-color: 0 6px 12px rgba($base-font, .5) !default;
+$mention-chip-bg-color: $gray-dark !default;
+$mention-chip-border-radius: 2px !default;
+$mention-chip-border: none !default;
 $ddl-list-bg-color: $grey-dark !default;
 $ddl-list-header-bg-color: $grey-white !default;
 $ddl-list-tap-color: transparent !default;
 $ddl-list-header-border-color: 1px $grey-base !default;
 $ddl-list-default-font-color: $grey-dark-font !default;
 $ddl-list-active-border-color: $grey-white !default;
+$mention-popup-bg-color: $grey-white !default;
 $ddl-list-active-font-color: $brand-primary-font !default;
+$mention-active-font-color: $brand-primary !default;
 $ddl-list-active-bg-color: $brand-primary !default;
 $ddl-list-hover-bg-color: $grey-44 !default;
 $ddl-list-hover-border-color: $grey-white !default;

package/styles/drop-down-base/_bootstrap-definition.scss

@@ -8,13 +8,20 @@ $ddl-list-border-color: rgba($grey-light, .25) !default;
 $ddl-line-height: 48px !default;
 $ddl-list-font-family: inherit !default;
 $ddl-list-gradient-color: $grey-white !default;
+$mention-gradient-color: $brand-primary-font !default;
+$mention-list-box-shadow-color: 0 6px 12px rgba(0, 0, 0, .175) !default;
+$mention-chip-bg-color: $grey-lighter !default;
+$mention-chip-border-radius: 2px !default;
+$mention-chip-border: none !default;
 $ddl-list-bg-color: $grey-white !default;
 $ddl-list-header-bg-color: $grey-white !default;
 $ddl-list-tap-color: transparent !default;
 $ddl-list-header-border-color: 1px $grey-base !default;
 $ddl-list-default-font-color: $grey-light-font !default;
 $ddl-list-active-border-color: $grey-white !default;
+$mention-popup-bg-color: $grey-white !default;
 $ddl-list-active-font-color: $brand-primary-font !default;
+$mention-active-font-color: $brand-primary !default;
 $ddl-list-active-bg-color: $brand-primary !default;
 $ddl-list-hover-bg-color: $grey-f5 !default;
 $ddl-list-hover-border-color: $grey-white !default;

package/styles/drop-down-base/_bootstrap4-definition.scss

@@ -6,12 +6,19 @@ $ddl-list-border-color: rgba($black, .15) !default;
 $ddl-line-height: 48px !default;
 $ddl-list-font-family: inherit !default;
 $ddl-list-gradient-color: $white !default;
+$mention-gradient-color: $white !default;
+$mention-list-box-shadow-color: rgba(0, 0, 0, .21) !default;
+$mention-chip-bg-color: $gray-200 !default;
+$mention-chip-border-radius: 2px !default;
+$mention-chip-border: none !default;
 $ddl-list-bg-color: $white !default;
 $ddl-list-header-bg-color: $white !default;
 $ddl-list-tap-color: transparent !default;
 $ddl-list-default-font-color: $gray-900 !default;
 $ddl-list-active-border-color: $white !default;
+$mention-popup-bg-color: $white !default;
 $ddl-list-active-font-color: $primary-font !default;
+$mention-active-font-color: $primary !default;
 $ddl-list-active-bg-color: $primary !default;
 $ddl-list-hover-bg-color: darken($gray-100, 2%) !default;
 $ddl-list-hover-border-color: $white !default;

package/styles/drop-down-base/_bootstrap5-definition.scss

@@ -44,6 +44,11 @@ $ddl-group-list-item-text-intent: 0 !default;
 
 $ddl-list-border-color: $border-light !default;
 $ddl-list-gradient-color: $border-light !default;
+$mention-gradient-color: $white !default;
+$mention-list-box-shadow-color: rgba(0, 0, 0, .21) !default;
+$mention-chip-bg-color: $content-bg-color-alt2 !default;
+$mention-chip-border-radius: 2px !default;
+$mention-chip-border: none !default;
 $ddl-list-bg-color: $flyout-bg-color !default;
 $ddl-list-header-bg-color: $transparent !default;
 $ddl-list-tap-color: transparent !default;
@@ -51,7 +56,9 @@ $ddl-list-header-border-color: $border-light !default;
 $ddl-nodata-font-color: $content-text-color !default;
 $ddl-list-default-font-color: $content-text-color !default;
 $ddl-list-active-border-color: $content-bg-color !default;
+$mention-popup-bg-color: $content-bg-color !default;
 $ddl-list-active-font-color: $content-text-color-selected !default;
+$mention-active-font-color: $primary !default;
 $ddl-list-active-bg-color: $content-bg-color-selected !default;
 $ddl-list-hover-border-color: $content-bg-color !default;
 $ddl-list-hover-bg-color: $flyout-bg-color-hover !default;

package/styles/drop-down-base/_fabric-dark-definition.scss

@@ -11,13 +11,20 @@ $ddl-list-rtl-padding-left: 16px !default;
 $ddl-list-border-color: $neutral-light !default;
 $ddl-list-font-family: inherit !default;
 $ddl-list-gradient-color: transparent !default;
+$mention-gradient-color: $theme-primary-font !default;
+$mention-list-box-shadow-color: 0 0 5px 0 rgba($shadow, .26) !default;
+$mention-chip-bg-color: $neutral-lighter-alt !default;
+$mention-chip-border-radius: 0 !default;
+$mention-chip-border: none !default;
 $ddl-list-bg-color: $neutral-lighter-alt !default;
 $ddl-list-header-bg-color: $neutral-lighter-alt !default;
 $ddl-list-tap-color: transparent !default;
 $ddl-list-header-border-color: 1px $neutral-light !default;
 $ddl-list-default-font-color: $neutral-light-font !default;
 $ddl-list-active-border-color: $neutral-quintenary !default;
+$mention-popup-bg-color: $neutral-quintenary !default;
 $ddl-list-active-font-color: $neutral-light-font !default;
+$mention-active-font-color: $theme-primary !default;
 $ddl-list-active-bg-color: $neutral-quintenary !default;
 $ddl-list-hover-bg-color: $neutral-light !default;
 $ddl-list-hover-border-color: $neutral-light !default;

package/styles/drop-down-base/_fabric-definition.scss

@@ -10,13 +10,20 @@ $ddl-list-rtl-padding-left: 16px !default;
 $ddl-list-border-color: rgba($neutral-light, .25) !default;
 $ddl-list-font-family: inherit !default;
 $ddl-list-gradient-color: transparent !default;
+$mention-gradient-color: $neutral-white !default;
+$mention-list-box-shadow-color: rgba(0, 0, 0, .4) !default;
+$mention-chip-bg-color: $neutral-lighter !default;
+$mention-chip-border-radius: 0 !default;
+$mention-chip-border: none !default;
 $ddl-list-bg-color: $neutral-white !default;
 $ddl-list-header-bg-color: $neutral-white !default;
 $ddl-list-tap-color: transparent !default;
 $ddl-list-header-border-color: 1px $neutral-light !default;
 $ddl-list-default-font-color: rgba($neutral-light-font, .87) !default;
 $ddl-list-active-border-color: $neutral-white !default;
+$mention-popup-bg-color: $neutral-white !default;
 $ddl-list-active-font-color: $neutral-light-font !default;
+$mention-active-font-color: $theme-primary !default;
 $ddl-list-active-bg-color: $theme-lighter !default;
 $ddl-list-hover-bg-color: $neutral-lighter !default;
 $ddl-list-hover-border-color: $neutral-white !default;

package/styles/drop-down-base/_fluent-definition.scss

@@ -46,6 +46,11 @@ $ddl-bigger-small-list-header-font-size: $text-xs !default;
 
 $ddl-list-border-color: $border-light !default;
 $ddl-list-gradient-color: $border-light !default;
+$mention-gradient-color: $white !default;
+$mention-list-box-shadow-color: rgba(0, 0, 0, .21) !default;
+$mention-chip-bg-color: $content-bg-color-alt2 !default;
+$mention-chip-border-radius: 2px !default;
+$mention-chip-border: none !default;
 $ddl-list-bg-color: $flyout-bg-color !default;
 $ddl-list-header-bg-color: transparent !default;
 $ddl-list-tap-color: transparent !default;
@@ -53,7 +58,9 @@ $ddl-list-header-border-color: $border-light !default;
 $ddl-nodata-font-color: $flyout-text-color !default;
 $ddl-list-default-font-color: $flyout-text-color !default;
 $ddl-list-active-border-color: $flyout-bg-color !default;
+$mention-popup-bg-color: $flyout-bg-color !default;
 $ddl-list-active-font-color: $content-text-color !default;
+$mention-active-font-color: $primary !default;
 $ddl-list-active-bg-color: $flyout-bg-color-selected !default;
 $ddl-list-hover-border-color: $flyout-bg-color !default;
 $ddl-list-hover-bg-color: $flyout-bg-color-hover !default;

package/styles/drop-down-base/_fusionnew-definition.scss

@@ -44,6 +44,11 @@ $ddl-group-list-item-text-intent: 0 !default;
 
 $ddl-list-border-color: $border-light !default;
 $ddl-list-gradient-color: $border-light !default;
+$mention-gradient-color: $white !default;
+$mention-list-box-shadow-color: rgba(0, 0, 0, .21) !default;
+$mention-chip-bg-color: $flyout-bg-color !default;
+$mention-chip-border-radius: 2px !default;
+$mention-chip-border: none !default;
 $ddl-list-bg-color: $flyout-bg-color !default;
 $ddl-list-header-bg-color: $transparent !default;
 $ddl-list-tap-color: transparent !default;
@@ -51,7 +56,9 @@ $ddl-list-header-border-color: $border-light !default;
 $ddl-nodata-font-color: $content-text-color !default;
 $ddl-list-default-font-color: $content-text-color !default;
 $ddl-list-active-border-color: $content-bg-color !default;
+$mention-popup-bg-color: $content-bg-color !default;
 $ddl-list-active-font-color: $content-text-color-selected !default;
+$mention-active-font-color: $primary !default;
 $ddl-list-active-bg-color: $content-bg-color-selected !default;
 $ddl-list-hover-border-color: $content-bg-color !default;
 $ddl-list-hover-bg-color: $flyout-bg-color-hover !default;

package/styles/drop-down-base/_highcontrast-definition.scss

@@ -9,13 +9,20 @@ $ddl-list-rtl-padding-left: 16px !default;
 $ddl-list-border-color: $border-default !default;
 $ddl-list-font-family: inherit !default;
 $ddl-list-gradient-color: transparent !default;
+$mention-gradient-color: $selection-font !default;
+$mention-list-box-shadow-color: 0 0 5px 0 rgba(0, 0, 0, .4) !default;
+$mention-chip-bg-color: transparent !default;
+$mention-chip-border-radius: 0 !default;
+$mention-chip-border: 1px solid $border-default !default;
 $ddl-list-bg-color: $bg-base-0 !default;
 $ddl-list-header-bg-color: $bg-base-0 !default;
 $ddl-list-tap-color: transparent !default;
 $ddl-list-header-border-color: 1px $border-default !default;
 $ddl-list-default-font-color: $content-font !default;
 $ddl-list-active-border-color: $selection-border !default;
+$mention-popup-bg-color: $selection-border !default;
 $ddl-list-active-font-color: $selection-font !default;
+$mention-active-font-color: $selection-bg !default;
 $ddl-list-active-bg-color: $selection-bg !default;
 $ddl-list-hover-bg-color: $hover-bg !default;
 $ddl-list-hover-border-color: $hover-border !default;

package/styles/drop-down-base/_highcontrast-light-definition.scss

@@ -10,13 +10,20 @@ $ddl-list-rtl-padding-left: 16px !default;
 $ddl-list-border-color: $border-default !default;
 $ddl-list-font-family: inherit !default;
 $ddl-list-gradient-color: transparent !default;
+$mention-gradient-color: $border-fg !default;
+$mention-list-box-shadow-color: 0 0 5px 0 rgba(0, 0, 0, .4) !default;
+$mention-chip-bg-color: transparent !default;
+$mention-chip-border-radius: 0 !default;
+$mention-chip-border: 1px solid $border-default !default;
 $ddl-list-bg-color: $bg-base-0 !default;
 $ddl-list-header-bg-color: $bg-base-0 !default;
 $ddl-list-tap-color: transparent !default;
 $ddl-list-header-border-color: 1px $border-default !default;
 $ddl-list-default-font-color: $content-font !default;
 $ddl-list-active-border-color: $selection-border !default;
+$mention-popup-bg-color: $selection-border !default;
 $ddl-list-active-font-color: $selection-font !default;
+$mention-active-font-color: $selection-bg !default;
 $ddl-list-active-bg-color: $selection-bg !default;
 $ddl-list-hover-bg-color: $hover-bg !default;
 $ddl-list-hover-border-color: $hover-border !default;

package/styles/drop-down-base/_layout.scss

@@ -69,7 +69,8 @@
     position: relative;
   }
 
-  #{&}.e-popup.e-ddl .e-dropdownbase.e-nodata {
+  #{&}.e-popup.e-ddl .e-dropdownbase.e-nodata,
+  #{&}.e-popup.e-mention .e-dropdownbase.e-nodata {
     color: $ddl-nodata-font-color;
     cursor: default;
     font-family: $ddl-list-font-family;
@@ -78,6 +79,45 @@
     text-align: center;
   }
 
+  .e-mention.e-popup {
+    background: $mention-popup-bg-color;
+    border: 0;
+    box-shadow: 0 2px 3px 1px $mention-list-box-shadow-color;
+    margin-top: 2px;
+    position: absolute;
+  }
+
+  .e-mention .e-dropdownbase .e-list-item .e-highlight {
+    display: inline;
+    font-weight: bold;
+    vertical-align: baseline;
+  }
+
+  .e-mention .e-mention-chip,
+  .e-mention .e-mention-chip:hover {
+    background: $mention-chip-bg-color;
+    border-radius: $mention-chip-border-radius;
+    border: $mention-chip-border;
+    color: $mention-active-font-color;
+    cursor: default;
+  }
+
+  .e-mention .e-mention-chip::selection {
+    color: $mention-gradient-color;
+    background: $mention-active-font-color;
+  }
+
+  .e-mention.e-editable-element {
+    border: 2px solid $ddl-list-border-color;
+    height: auto;
+    min-height: 120px;
+    width: 100%;
+  }
+
+  .e-form-mirror-div {
+    white-space: pre-wrap;
+  }
+
   .e-bigger.e-ddl .e-dropdownbase.e-nodata,
   .e-bigger .e-ddl .e-dropdownbase.e-nodata {
     @if ($skin-name == 'FluentUI' or $skin-name == 'tailwind') {

package/styles/drop-down-base/_material-dark-definition.scss

@@ -8,6 +8,11 @@ $ddl-list-border-size: 0 !default;
 $ddl-list-bottom-border: $ddl-list-border-size !default;
 $ddl-list-border-color: transparent !default;
 $ddl-list-gradient-color: transparent !default;
+$mention-gradient-color: $accent-font !default;
+$mention-list-box-shadow-color: 0 2px 3px 1px rgba(0, 0, 0, .21) !default;
+$mention-chip-bg-color: $grey-800 !default;
+$mention-chip-border-radius: 2px !default;
+$mention-chip-border: none !default;
 $ddl-list-bg-color: $grey-800 !default;
 $ddl-list-header-bg-color: $grey-800 !default;
 $ddl-list-tap-color: transparent !default;
@@ -15,7 +20,9 @@ $ddl-list-header-border-color: $grey-700 !default;
 $ddl-nodata-font-color: rgba($grey-dark-font, .7) !default;
 $ddl-list-default-font-color: $grey-dark-font !default;
 $ddl-list-active-border-color: rgba($grey-white, .18) !default;
+$mention-popup-bg-color: rgba($grey-light-font, .9) !default;
 $ddl-list-active-font-color: $accent !default;
+$mention-active-font-color: $accent !default;
 $ddl-list-active-bg-color: rgba($grey-white, .05) !default;
 $ddl-list-hover-border-color: rgba($grey-white, .05) !default;
 $ddl-list-hover-bg-color: rgba($grey-white, .05) !default;