@syncfusion/ej2-inputs 28.2.11 → 29.1.34

package/styles/fluent-dark.css

@@ -4581,7 +4581,7 @@ textarea.e-input.e-bigger.e-small,
           transform: scale(1.5);
 }
 .e-control-wrapper.e-slider-container .e-slider .e-handle.e-tab-handle {
-  border-color: #006cbf;
+  border-color: rgb(0, 108, 190.8);
 }
 .e-control-wrapper.e-slider-container .e-slider .e-tab-track {
   background-color: #005a9e;
@@ -5001,10 +5001,10 @@ textarea.e-input.e-bigger.e-small,
   background-color: #0078d4;
 }
 .e-control-wrapper.e-slider-container.e-slider-hover .e-handle {
-  border-color: #006cbf;
+  border-color: rgb(0, 108, 190.8);
 }
 .e-control-wrapper.e-slider-container:not(.e-disabled):not(.e-read-only):active .e-handle {
-  border-color: #006cbf;
+  border-color: rgb(0, 108, 190.8);
 }
 .e-control-wrapper.e-slider-container:not(.e-disabled):not(.e-read-only):active .e-range {
   background-color: #0078d4;
@@ -7254,25 +7254,25 @@ body.e-colorpicker-overflow {
   -webkit-text-stroke: 1px #f3f2f1;
 }
 .e-rating-container .e-rating-item-container.e-selected-value .e-rating-icon {
-  -webkit-text-stroke: 1px #1a86d8;
+  -webkit-text-stroke: 1px rgb(25.5, 133.5, 216.3);
 }
 .e-rating-container .e-rating-item-list:hover .e-rating-item-container.e-rating-selected .e-rating-icon, .e-rating-container .e-rating-item-list:hover .e-rating-item-container.e-rating-intermediate .e-rating-icon {
-  background: -webkit-gradient(linear, left top, right top, from(#1a86d8), to(transparent));
-  background: linear-gradient(to right, #1a86d8 var(--rating-value), transparent var(--rating-value));
+  background: -webkit-gradient(linear, left top, right top, from(rgb(25.5, 133.5, 216.3)), to(transparent));
+  background: linear-gradient(to right, rgb(25.5, 133.5, 216.3) var(--rating-value), transparent var(--rating-value));
   background-clip: text;
   /* stylelint-disable property-no-vendor-prefix */
   -webkit-background-clip: text;
   /* stylelint-enable property-no-vendor-prefix */
-  -webkit-text-stroke: 1px #1a86d8;
+  -webkit-text-stroke: 1px rgb(25.5, 133.5, 216.3);
 }
 .e-rating-container .e-rating-item-list .e-rating-item-container.e-rating-selected:active .e-rating-icon, .e-rating-container .e-rating-item-list .e-rating-item-container.e-rating-intermediate:active .e-rating-icon {
-  background: -webkit-gradient(linear, left top, right top, from(#3393dd), to(transparent));
-  background: linear-gradient(to right, #3393dd var(--rating-value), transparent var(--rating-value));
+  background: -webkit-gradient(linear, left top, right top, from(rgb(51, 147, 220.6)), to(transparent));
+  background: linear-gradient(to right, rgb(51, 147, 220.6) var(--rating-value), transparent var(--rating-value));
   background-clip: text;
   /* stylelint-disable property-no-vendor-prefix */
   -webkit-background-clip: text;
   /* stylelint-enable property-no-vendor-prefix */
-  -webkit-text-stroke: 1px #3393dd;
+  -webkit-text-stroke: 1px rgb(51, 147, 220.6);
 }
 .e-rating-container.e-rtl .e-rating-item-container.e-rating-selected .e-rating-icon, .e-rating-container.e-rtl .e-rating-item-container.e-rating-intermediate .e-rating-icon {
   background: -webkit-gradient(linear, right top, left top, from(#f3f2f1), to(transparent));
@@ -7283,16 +7283,16 @@ body.e-colorpicker-overflow {
   /* stylelint-enable property-no-vendor-prefix */
 }
 .e-rating-container.e-rtl .e-rating-item-list:hover .e-rating-item-container.e-rating-selected .e-rating-icon, .e-rating-container.e-rtl .e-rating-item-list:hover .e-rating-item-container.e-rating-intermediate .e-rating-icon {
-  background: -webkit-gradient(linear, right top, left top, from(#1a86d8), to(transparent));
-  background: linear-gradient(to left, #1a86d8 var(--rating-value), transparent var(--rating-value));
+  background: -webkit-gradient(linear, right top, left top, from(rgb(25.5, 133.5, 216.3)), to(transparent));
+  background: linear-gradient(to left, rgb(25.5, 133.5, 216.3) var(--rating-value), transparent var(--rating-value));
   background-clip: text;
   /* stylelint-disable property-no-vendor-prefix */
   -webkit-background-clip: text;
   /* stylelint-enable property-no-vendor-prefix */
 }
 .e-rating-container.e-rtl .e-rating-item-list .e-rating-item-container.e-rating-selected:active .e-rating-icon, .e-rating-container.e-rtl .e-rating-item-list .e-rating-item-container.e-rating-intermediate:active .e-rating-icon {
-  background: -webkit-gradient(linear, right top, left top, from(#3393dd), to(transparent));
-  background: linear-gradient(to left, #3393dd var(--rating-value), transparent var(--rating-value));
+  background: -webkit-gradient(linear, right top, left top, from(rgb(51, 147, 220.6)), to(transparent));
+  background: linear-gradient(to left, rgb(51, 147, 220.6) var(--rating-value), transparent var(--rating-value));
   background-clip: text;
   /* stylelint-disable property-no-vendor-prefix */
   -webkit-background-clip: text;
@@ -7834,6 +7834,119 @@ body.e-colorpicker-overflow {
   padding: 0;
 }
 
+.e-listen-icon::before {
+  content: "\e91c";
+}
+
+.e-listen-stop::before {
+  content: "\e919";
+}
+
+.e-speech-to-text.e-btn {
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  border-radius: 9999px;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  font-size: 12px;
+  min-width: 40px;
+  min-height: 40px;
+  padding: 0 16px;
+}
+.e-speech-to-text.e-btn.e-round {
+  width: 40px;
+  height: 40px;
+  padding: 0;
+}
+.e-speech-to-text.e-btn .e-btn-icon {
+  font-size: 12px;
+  margin-top: -1px;
+}
+.e-speech-to-text.e-btn:disabled {
+  pointer-events: none;
+}
+.e-speech-to-text.e-btn.e-listening-state {
+  -webkit-animation: listening 1.2s infinite;
+          animation: listening 1.2s infinite;
+}
+
+.e-speech-to-text.e-round .e-btn-icon {
+  font-size: 14px;
+}
+
+@-webkit-keyframes listening {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+@keyframes listening {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+.e-speech-to-text {
+  -webkit-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 -2px 15px -3px rgba(0, 0, 0, 0.1), 0 6px 10px rgba(0, 0, 0, 0.14);
+          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 -2px 15px -3px rgba(0, 0, 0, 0.1), 0 6px 10px rgba(0, 0, 0, 0.14);
+}
+.e-speech-to-text:hover:not(:focus), .e-speech-to-text:active, .e-speech-to-text.e-active, .e-speech-to-text:disabled {
+  -webkit-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 -2px 15px -3px rgba(0, 0, 0, 0.1), 0 6px 10px rgba(0, 0, 0, 0.14);
+          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 -2px 15px -3px rgba(0, 0, 0, 0.1), 0 6px 10px rgba(0, 0, 0, 0.14);
+}
+.e-speech-to-text:focus {
+  -webkit-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 -2px 15px -3px rgba(0, 0, 0, 0.1), 0 6px 10px rgba(0, 0, 0, 0.14);
+          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 -2px 15px -3px rgba(0, 0, 0, 0.1), 0 6px 10px rgba(0, 0, 0, 0.14);
+}
+.e-speech-to-text.e-flat {
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+.e-bigger .e-speech-to-text.e-btn,
+.e-bigger.e-speech-to-text.e-btn {
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  border-radius: 9999px;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  font-size: 16px;
+  min-width: 52px;
+  min-height: 52px;
+  padding: 0 18px;
+}
+.e-bigger .e-speech-to-text.e-btn.e-round,
+.e-bigger.e-speech-to-text.e-btn.e-round {
+  width: 52px;
+  height: 52px;
+  padding: 0;
+}
+.e-bigger .e-speech-to-text.e-btn .e-btn-icon,
+.e-bigger.e-speech-to-text.e-btn .e-btn-icon {
+  font-size: 16px;
+  margin-top: -1px;
+}
+
+.e-bigger .e-speech-to-text.e-round .e-btn-icon,
+.e-bigger.e-speech-to-text.e-round .e-btn-icon {
+  font-size: 22px;
+}
+
 .smart-textarea-suggestion-overlay {
   display: none;
   position: absolute;

package/styles/fluent-dark.scss

@@ -42,5 +42,9 @@
 @import 'otp-input/fluent-dark-definition.scss';
 @import 'otp-input/all.scss';
 @import 'otp-input/bigger.scss';
+@import 'speech-to-text/fluent-dark-definition.scss';
+@import 'speech-to-text/icons/fluent-dark.scss';
+@import 'speech-to-text/all.scss';
+@import 'speech-to-text/bigger.scss';
 @import 'smart-textarea/fluent-dark-definition.scss';
 @import 'smart-textarea/all.scss';

package/styles/fluent-lite.css

@@ -2733,7 +2733,7 @@ textarea.e-input:hover:not(.e-success):not(.e-warning):not(.e-error):not([disabl
           transform: scale(1.5);
 }
 .e-control-wrapper.e-slider-container .e-slider .e-handle.e-tab-handle {
-  border-color: #006cbf;
+  border-color: rgb(0, 108, 190.8);
 }
 .e-control-wrapper.e-slider-container .e-slider .e-tab-track {
   background-color: #c7e0f4;
@@ -3153,10 +3153,10 @@ textarea.e-input:hover:not(.e-success):not(.e-warning):not(.e-error):not([disabl
   background-color: #0078d4;
 }
 .e-control-wrapper.e-slider-container.e-slider-hover .e-handle {
-  border-color: #006cbf;
+  border-color: rgb(0, 108, 190.8);
 }
 .e-control-wrapper.e-slider-container:not(.e-disabled):not(.e-read-only):active .e-handle {
-  border-color: #006cbf;
+  border-color: rgb(0, 108, 190.8);
 }
 .e-control-wrapper.e-slider-container:not(.e-disabled):not(.e-read-only):active .e-range {
   background-color: #0078d4;
@@ -4619,25 +4619,25 @@ body.e-colorpicker-overflow {
   -webkit-text-stroke: 1px #323130;
 }
 .e-rating-container .e-rating-item-container.e-selected-value .e-rating-icon {
-  -webkit-text-stroke: 1px #006cbf;
+  -webkit-text-stroke: 1px rgb(0, 108, 190.8);
 }
 .e-rating-container .e-rating-item-list:hover .e-rating-item-container.e-rating-selected .e-rating-icon, .e-rating-container .e-rating-item-list:hover .e-rating-item-container.e-rating-intermediate .e-rating-icon {
-  background: -webkit-gradient(linear, left top, right top, from(#006cbf), to(transparent));
-  background: linear-gradient(to right, #006cbf var(--rating-value), transparent var(--rating-value));
+  background: -webkit-gradient(linear, left top, right top, from(rgb(0, 108, 190.8)), to(transparent));
+  background: linear-gradient(to right, rgb(0, 108, 190.8) var(--rating-value), transparent var(--rating-value));
   background-clip: text;
   /* stylelint-disable property-no-vendor-prefix */
   -webkit-background-clip: text;
   /* stylelint-enable property-no-vendor-prefix */
-  -webkit-text-stroke: 1px #006cbf;
+  -webkit-text-stroke: 1px rgb(0, 108, 190.8);
 }
 .e-rating-container .e-rating-item-list .e-rating-item-container.e-rating-selected:active .e-rating-icon, .e-rating-container .e-rating-item-list .e-rating-item-container.e-rating-intermediate:active .e-rating-icon {
-  background: -webkit-gradient(linear, left top, right top, from(#0060aa), to(transparent));
-  background: linear-gradient(to right, #0060aa var(--rating-value), transparent var(--rating-value));
+  background: -webkit-gradient(linear, left top, right top, from(rgb(0, 96, 169.6)), to(transparent));
+  background: linear-gradient(to right, rgb(0, 96, 169.6) var(--rating-value), transparent var(--rating-value));
   background-clip: text;
   /* stylelint-disable property-no-vendor-prefix */
   -webkit-background-clip: text;
   /* stylelint-enable property-no-vendor-prefix */
-  -webkit-text-stroke: 1px #0060aa;
+  -webkit-text-stroke: 1px rgb(0, 96, 169.6);
 }
 .e-rating-container.e-rtl .e-rating-item-container.e-rating-selected .e-rating-icon, .e-rating-container.e-rtl .e-rating-item-container.e-rating-intermediate .e-rating-icon {
   background: -webkit-gradient(linear, right top, left top, from(#323130), to(transparent));
@@ -4648,16 +4648,16 @@ body.e-colorpicker-overflow {
   /* stylelint-enable property-no-vendor-prefix */
 }
 .e-rating-container.e-rtl .e-rating-item-list:hover .e-rating-item-container.e-rating-selected .e-rating-icon, .e-rating-container.e-rtl .e-rating-item-list:hover .e-rating-item-container.e-rating-intermediate .e-rating-icon {
-  background: -webkit-gradient(linear, right top, left top, from(#006cbf), to(transparent));
-  background: linear-gradient(to left, #006cbf var(--rating-value), transparent var(--rating-value));
+  background: -webkit-gradient(linear, right top, left top, from(rgb(0, 108, 190.8)), to(transparent));
+  background: linear-gradient(to left, rgb(0, 108, 190.8) var(--rating-value), transparent var(--rating-value));
   background-clip: text;
   /* stylelint-disable property-no-vendor-prefix */
   -webkit-background-clip: text;
   /* stylelint-enable property-no-vendor-prefix */
 }
 .e-rating-container.e-rtl .e-rating-item-list .e-rating-item-container.e-rating-selected:active .e-rating-icon, .e-rating-container.e-rtl .e-rating-item-list .e-rating-item-container.e-rating-intermediate:active .e-rating-icon {
-  background: -webkit-gradient(linear, right top, left top, from(#0060aa), to(transparent));
-  background: linear-gradient(to left, #0060aa var(--rating-value), transparent var(--rating-value));
+  background: -webkit-gradient(linear, right top, left top, from(rgb(0, 96, 169.6)), to(transparent));
+  background: linear-gradient(to left, rgb(0, 96, 169.6) var(--rating-value), transparent var(--rating-value));
   background-clip: text;
   /* stylelint-disable property-no-vendor-prefix */
   -webkit-background-clip: text;
@@ -5069,6 +5069,88 @@ body.e-colorpicker-overflow {
   border-color: #ca5010;
 }
 
+.e-listen-icon::before {
+  content: "\e91c";
+}
+
+.e-listen-stop::before {
+  content: "\e919";
+}
+
+.e-speech-to-text.e-btn {
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  border-radius: 9999px;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  font-size: 12px;
+  min-width: 40px;
+  min-height: 40px;
+  padding: 0 16px;
+}
+.e-speech-to-text.e-btn.e-round {
+  width: 40px;
+  height: 40px;
+  padding: 0;
+}
+.e-speech-to-text.e-btn .e-btn-icon {
+  font-size: 12px;
+  margin-top: -1px;
+}
+.e-speech-to-text.e-btn:disabled {
+  pointer-events: none;
+}
+.e-speech-to-text.e-btn.e-listening-state {
+  -webkit-animation: listening 1.2s infinite;
+          animation: listening 1.2s infinite;
+}
+
+.e-speech-to-text.e-round .e-btn-icon {
+  font-size: 14px;
+}
+
+@-webkit-keyframes listening {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+@keyframes listening {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+.e-speech-to-text {
+  -webkit-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 -2px 15px -3px rgba(0, 0, 0, 0.1), 0 6px 10px rgba(0, 0, 0, 0.14);
+          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 -2px 15px -3px rgba(0, 0, 0, 0.1), 0 6px 10px rgba(0, 0, 0, 0.14);
+}
+.e-speech-to-text:hover:not(:focus), .e-speech-to-text:active, .e-speech-to-text.e-active, .e-speech-to-text:disabled {
+  -webkit-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 -2px 15px -3px rgba(0, 0, 0, 0.1), 0 6px 10px rgba(0, 0, 0, 0.14);
+          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 -2px 15px -3px rgba(0, 0, 0, 0.1), 0 6px 10px rgba(0, 0, 0, 0.14);
+}
+.e-speech-to-text:focus {
+  -webkit-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 -2px 15px -3px rgba(0, 0, 0, 0.1), 0 6px 10px rgba(0, 0, 0, 0.14);
+          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 -2px 15px -3px rgba(0, 0, 0, 0.1), 0 6px 10px rgba(0, 0, 0, 0.14);
+}
+.e-speech-to-text.e-flat {
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
 .smart-textarea-suggestion-overlay {
   display: none;
   position: absolute;

package/styles/fluent-lite.scss

@@ -33,5 +33,8 @@
 @import 'data-form/all.scss';
 @import 'otp-input/fluent-definition.scss';
 @import 'otp-input/all.scss';
+@import 'speech-to-text/fluent-definition.scss';
+@import 'speech-to-text/icons/fluent.scss';
+@import 'speech-to-text/all.scss';
 @import 'smart-textarea/fluent-definition.scss';
 @import 'smart-textarea/all.scss';

package/styles/fluent.css

@@ -4581,7 +4581,7 @@ textarea.e-input.e-bigger.e-small,
           transform: scale(1.5);
 }
 .e-control-wrapper.e-slider-container .e-slider .e-handle.e-tab-handle {
-  border-color: #006cbf;
+  border-color: rgb(0, 108, 190.8);
 }
 .e-control-wrapper.e-slider-container .e-slider .e-tab-track {
   background-color: #c7e0f4;
@@ -5001,10 +5001,10 @@ textarea.e-input.e-bigger.e-small,
   background-color: #0078d4;
 }
 .e-control-wrapper.e-slider-container.e-slider-hover .e-handle {
-  border-color: #006cbf;
+  border-color: rgb(0, 108, 190.8);
 }
 .e-control-wrapper.e-slider-container:not(.e-disabled):not(.e-read-only):active .e-handle {
-  border-color: #006cbf;
+  border-color: rgb(0, 108, 190.8);
 }
 .e-control-wrapper.e-slider-container:not(.e-disabled):not(.e-read-only):active .e-range {
   background-color: #0078d4;
@@ -7254,25 +7254,25 @@ body.e-colorpicker-overflow {
   -webkit-text-stroke: 1px #323130;
 }
 .e-rating-container .e-rating-item-container.e-selected-value .e-rating-icon {
-  -webkit-text-stroke: 1px #006cbf;
+  -webkit-text-stroke: 1px rgb(0, 108, 190.8);
 }
 .e-rating-container .e-rating-item-list:hover .e-rating-item-container.e-rating-selected .e-rating-icon, .e-rating-container .e-rating-item-list:hover .e-rating-item-container.e-rating-intermediate .e-rating-icon {
-  background: -webkit-gradient(linear, left top, right top, from(#006cbf), to(transparent));
-  background: linear-gradient(to right, #006cbf var(--rating-value), transparent var(--rating-value));
+  background: -webkit-gradient(linear, left top, right top, from(rgb(0, 108, 190.8)), to(transparent));
+  background: linear-gradient(to right, rgb(0, 108, 190.8) var(--rating-value), transparent var(--rating-value));
   background-clip: text;
   /* stylelint-disable property-no-vendor-prefix */
   -webkit-background-clip: text;
   /* stylelint-enable property-no-vendor-prefix */
-  -webkit-text-stroke: 1px #006cbf;
+  -webkit-text-stroke: 1px rgb(0, 108, 190.8);
 }
 .e-rating-container .e-rating-item-list .e-rating-item-container.e-rating-selected:active .e-rating-icon, .e-rating-container .e-rating-item-list .e-rating-item-container.e-rating-intermediate:active .e-rating-icon {
-  background: -webkit-gradient(linear, left top, right top, from(#0060aa), to(transparent));
-  background: linear-gradient(to right, #0060aa var(--rating-value), transparent var(--rating-value));
+  background: -webkit-gradient(linear, left top, right top, from(rgb(0, 96, 169.6)), to(transparent));
+  background: linear-gradient(to right, rgb(0, 96, 169.6) var(--rating-value), transparent var(--rating-value));
   background-clip: text;
   /* stylelint-disable property-no-vendor-prefix */
   -webkit-background-clip: text;
   /* stylelint-enable property-no-vendor-prefix */
-  -webkit-text-stroke: 1px #0060aa;
+  -webkit-text-stroke: 1px rgb(0, 96, 169.6);
 }
 .e-rating-container.e-rtl .e-rating-item-container.e-rating-selected .e-rating-icon, .e-rating-container.e-rtl .e-rating-item-container.e-rating-intermediate .e-rating-icon {
   background: -webkit-gradient(linear, right top, left top, from(#323130), to(transparent));
@@ -7283,16 +7283,16 @@ body.e-colorpicker-overflow {
   /* stylelint-enable property-no-vendor-prefix */
 }
 .e-rating-container.e-rtl .e-rating-item-list:hover .e-rating-item-container.e-rating-selected .e-rating-icon, .e-rating-container.e-rtl .e-rating-item-list:hover .e-rating-item-container.e-rating-intermediate .e-rating-icon {
-  background: -webkit-gradient(linear, right top, left top, from(#006cbf), to(transparent));
-  background: linear-gradient(to left, #006cbf var(--rating-value), transparent var(--rating-value));
+  background: -webkit-gradient(linear, right top, left top, from(rgb(0, 108, 190.8)), to(transparent));
+  background: linear-gradient(to left, rgb(0, 108, 190.8) var(--rating-value), transparent var(--rating-value));
   background-clip: text;
   /* stylelint-disable property-no-vendor-prefix */
   -webkit-background-clip: text;
   /* stylelint-enable property-no-vendor-prefix */
 }
 .e-rating-container.e-rtl .e-rating-item-list .e-rating-item-container.e-rating-selected:active .e-rating-icon, .e-rating-container.e-rtl .e-rating-item-list .e-rating-item-container.e-rating-intermediate:active .e-rating-icon {
-  background: -webkit-gradient(linear, right top, left top, from(#0060aa), to(transparent));
-  background: linear-gradient(to left, #0060aa var(--rating-value), transparent var(--rating-value));
+  background: -webkit-gradient(linear, right top, left top, from(rgb(0, 96, 169.6)), to(transparent));
+  background: linear-gradient(to left, rgb(0, 96, 169.6) var(--rating-value), transparent var(--rating-value));
   background-clip: text;
   /* stylelint-disable property-no-vendor-prefix */
   -webkit-background-clip: text;
@@ -7834,6 +7834,119 @@ body.e-colorpicker-overflow {
   padding: 0;
 }
 
+.e-listen-icon::before {
+  content: "\e91c";
+}
+
+.e-listen-stop::before {
+  content: "\e919";
+}
+
+.e-speech-to-text.e-btn {
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  border-radius: 9999px;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  font-size: 12px;
+  min-width: 40px;
+  min-height: 40px;
+  padding: 0 16px;
+}
+.e-speech-to-text.e-btn.e-round {
+  width: 40px;
+  height: 40px;
+  padding: 0;
+}
+.e-speech-to-text.e-btn .e-btn-icon {
+  font-size: 12px;
+  margin-top: -1px;
+}
+.e-speech-to-text.e-btn:disabled {
+  pointer-events: none;
+}
+.e-speech-to-text.e-btn.e-listening-state {
+  -webkit-animation: listening 1.2s infinite;
+          animation: listening 1.2s infinite;
+}
+
+.e-speech-to-text.e-round .e-btn-icon {
+  font-size: 14px;
+}
+
+@-webkit-keyframes listening {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+@keyframes listening {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+.e-speech-to-text {
+  -webkit-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 -2px 15px -3px rgba(0, 0, 0, 0.1), 0 6px 10px rgba(0, 0, 0, 0.14);
+          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 -2px 15px -3px rgba(0, 0, 0, 0.1), 0 6px 10px rgba(0, 0, 0, 0.14);
+}
+.e-speech-to-text:hover:not(:focus), .e-speech-to-text:active, .e-speech-to-text.e-active, .e-speech-to-text:disabled {
+  -webkit-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 -2px 15px -3px rgba(0, 0, 0, 0.1), 0 6px 10px rgba(0, 0, 0, 0.14);
+          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 -2px 15px -3px rgba(0, 0, 0, 0.1), 0 6px 10px rgba(0, 0, 0, 0.14);
+}
+.e-speech-to-text:focus {
+  -webkit-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 -2px 15px -3px rgba(0, 0, 0, 0.1), 0 6px 10px rgba(0, 0, 0, 0.14);
+          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 -2px 15px -3px rgba(0, 0, 0, 0.1), 0 6px 10px rgba(0, 0, 0, 0.14);
+}
+.e-speech-to-text.e-flat {
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+.e-bigger .e-speech-to-text.e-btn,
+.e-bigger.e-speech-to-text.e-btn {
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  border-radius: 9999px;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  font-size: 16px;
+  min-width: 52px;
+  min-height: 52px;
+  padding: 0 18px;
+}
+.e-bigger .e-speech-to-text.e-btn.e-round,
+.e-bigger.e-speech-to-text.e-btn.e-round {
+  width: 52px;
+  height: 52px;
+  padding: 0;
+}
+.e-bigger .e-speech-to-text.e-btn .e-btn-icon,
+.e-bigger.e-speech-to-text.e-btn .e-btn-icon {
+  font-size: 16px;
+  margin-top: -1px;
+}
+
+.e-bigger .e-speech-to-text.e-round .e-btn-icon,
+.e-bigger.e-speech-to-text.e-round .e-btn-icon {
+  font-size: 22px;
+}
+
 .smart-textarea-suggestion-overlay {
   display: none;
   position: absolute;

package/styles/fluent.scss

@@ -42,5 +42,9 @@
 @import 'otp-input/fluent-definition.scss';
 @import 'otp-input/all.scss';
 @import 'otp-input/bigger.scss';
+@import 'speech-to-text/fluent-definition.scss';
+@import 'speech-to-text/icons/fluent.scss';
+@import 'speech-to-text/all.scss';
+@import 'speech-to-text/bigger.scss';
 @import 'smart-textarea/fluent-definition.scss';
 @import 'smart-textarea/all.scss';

package/styles/fluent2-lite.css

@@ -7668,6 +7668,88 @@ body.e-colorpicker-overflow {
   border-color: var(--color-sf-border-warning);
 }
 
+.e-listen-icon::before {
+  content: "\e91c";
+}
+
+.e-listen-stop::before {
+  content: "\e919";
+}
+
+.e-speech-to-text.e-btn {
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  border-radius: 9999px;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  font-size: 14px;
+  min-width: 40px;
+  min-height: 40px;
+  padding: 0 16px;
+}
+.e-speech-to-text.e-btn.e-round {
+  width: 40px;
+  height: 40px;
+  padding: 0;
+}
+.e-speech-to-text.e-btn .e-btn-icon {
+  font-size: 14px;
+  margin-top: 2px;
+}
+.e-speech-to-text.e-btn:disabled {
+  pointer-events: none;
+}
+.e-speech-to-text.e-btn.e-listening-state {
+  -webkit-animation: listening 1.2s infinite;
+          animation: listening 1.2s infinite;
+}
+
+.e-speech-to-text.e-round .e-btn-icon {
+  font-size: 16px;
+}
+
+@-webkit-keyframes listening {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+@keyframes listening {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+.e-speech-to-text {
+  -webkit-box-shadow: 0 14px 28.8px 0 rgba(0, 0, 0, 0.24), 0 0 8px 0 rgba(0, 0, 0, 0.2);
+          box-shadow: 0 14px 28.8px 0 rgba(0, 0, 0, 0.24), 0 0 8px 0 rgba(0, 0, 0, 0.2);
+}
+.e-speech-to-text:hover:not(:focus), .e-speech-to-text:active, .e-speech-to-text.e-active, .e-speech-to-text:disabled {
+  -webkit-box-shadow: 0 14px 28.8px 0 rgba(0, 0, 0, 0.24), 0 0 8px 0 rgba(0, 0, 0, 0.2);
+          box-shadow: 0 14px 28.8px 0 rgba(0, 0, 0, 0.24), 0 0 8px 0 rgba(0, 0, 0, 0.2);
+}
+.e-speech-to-text:focus {
+  -webkit-box-shadow: 0 14px 28.8px 0 rgba(0, 0, 0, 0.24), 0 0 8px 0 rgba(0, 0, 0, 0.2);
+          box-shadow: 0 14px 28.8px 0 rgba(0, 0, 0, 0.24), 0 0 8px 0 rgba(0, 0, 0, 0.2);
+}
+.e-speech-to-text.e-flat {
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
 .smart-textarea-suggestion-overlay {
   display: none;
   position: absolute;

package/styles/fluent2-lite.scss

@@ -33,5 +33,8 @@
 @import 'data-form/all.scss';
 @import 'otp-input/fluent2-definition.scss';
 @import 'otp-input/all.scss';
+@import 'speech-to-text/fluent2-definition.scss';
+@import 'speech-to-text/icons/fluent2.scss';
+@import 'speech-to-text/all.scss';
 @import 'smart-textarea/fluent2-definition.scss';
 @import 'smart-textarea/all.scss';