@syncfusion/ej2-inputs 28.2.11 → 29.1.34

package/styles/fabric-lite.css

@@ -2712,7 +2712,7 @@ textarea.e-input:hover:not(.e-success):not(.e-warning):not(.e-error):not([disabl
   border-color: #0078d6;
 }
 .e-control-wrapper.e-slider-container .e-slider .e-tab-track {
-  background-color: #b7e0ff;
+  background-color: rgb(183.4, 223.5495327103, 255);
 }
 .e-control-wrapper.e-slider-container.e-rtl.e-horizontal .e-slider .e-handle {
   margin: 0 -8px 0 0;
@@ -3101,7 +3101,7 @@ textarea.e-input:hover:not(.e-success):not(.e-warning):not(.e-error):not([disabl
   background-color: #666;
 }
 .e-control-wrapper.e-slider-container .e-slider .e-range.e-tab-range {
-  background-color: #006fc7;
+  background-color: rgb(0, 111.4205607477, 198.7);
 }
 .e-control-wrapper.e-slider-container .e-slider .e-handle {
   background-color: #fff;
@@ -3113,10 +3113,10 @@ textarea.e-input:hover:not(.e-success):not(.e-warning):not(.e-error):not([disabl
   border-color: transparent;
 }
 .e-control-wrapper.e-slider-container.e-slider-hover .e-slider-track {
-  background-color: #b7e0ff;
+  background-color: rgb(183.4, 223.5495327103, 255);
 }
 .e-control-wrapper.e-slider-container.e-slider-hover .e-range {
-  background-color: #006fc7;
+  background-color: rgb(0, 111.4205607477, 198.7);
 }
 .e-control-wrapper.e-slider-container.e-slider-hover .e-handle {
   border-color: #0078d6;
@@ -3125,10 +3125,10 @@ textarea.e-input:hover:not(.e-success):not(.e-warning):not(.e-error):not([disabl
   border-color: #0078d6;
 }
 .e-control-wrapper.e-slider-container:not(.e-disabled):not(.e-read-only):active .e-range {
-  background-color: #006fc7;
+  background-color: rgb(0, 111.4205607477, 198.7);
 }
 .e-control-wrapper.e-slider-container:not(.e-disabled):not(.e-read-only):active .e-slider-track {
-  background-color: #b7e0ff;
+  background-color: rgb(183.4, 223.5495327103, 255);
 }
 
 /* stylelint-disable-line no-empty-source */
@@ -4519,7 +4519,7 @@ body.e-colorpicker-overflow {
 
 .e-rating-container .e-rating-item-list:focus-visible:not(:hover) .e-rating-focus:not(:has(svg)),
 .e-rating-container .e-rating-item-list:focus-visible:not(:hover) .e-rating-focus .e-rating-item:has(svg) {
-  outline-color: #005ba3;
+  outline-color: rgb(0, 91.4018691589, 163);
   border-radius: 0;
 }
 .e-rating-container .e-reset {
@@ -4547,25 +4547,25 @@ body.e-colorpicker-overflow {
   -webkit-text-stroke: 1px #333;
 }
 .e-rating-container .e-rating-item-container.e-selected-value .e-rating-icon {
-  -webkit-text-stroke: 1px #0081e5;
+  -webkit-text-stroke: 1px rgb(0, 128.5794392523, 229.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(#0081e5), to(transparent));
-  background: linear-gradient(to right, #0081e5 var(--rating-value), transparent var(--rating-value));
+  background: -webkit-gradient(linear, left top, right top, from(rgb(0, 128.5794392523, 229.3)), to(transparent));
+  background: linear-gradient(to right, rgb(0, 128.5794392523, 229.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 #0081e5;
+  -webkit-text-stroke: 1px rgb(0, 128.5794392523, 229.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(#005ba3), to(transparent));
-  background: linear-gradient(to right, #005ba3 var(--rating-value), transparent var(--rating-value));
+  background: -webkit-gradient(linear, left top, right top, from(rgb(0, 91.4018691589, 163)), to(transparent));
+  background: linear-gradient(to right, rgb(0, 91.4018691589, 163) 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 #005ba3;
+  -webkit-text-stroke: 1px rgb(0, 91.4018691589, 163);
 }
 .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(#333), to(transparent));
@@ -4576,16 +4576,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(#0081e5), to(transparent));
-  background: linear-gradient(to left, #0081e5 var(--rating-value), transparent var(--rating-value));
+  background: -webkit-gradient(linear, right top, left top, from(rgb(0, 128.5794392523, 229.3)), to(transparent));
+  background: linear-gradient(to left, rgb(0, 128.5794392523, 229.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(#005ba3), to(transparent));
-  background: linear-gradient(to left, #005ba3 var(--rating-value), transparent var(--rating-value));
+  background: -webkit-gradient(linear, right top, left top, from(rgb(0, 91.4018691589, 163)), to(transparent));
+  background: linear-gradient(to left, rgb(0, 91.4018691589, 163) var(--rating-value), transparent var(--rating-value));
   background-clip: text;
   /* stylelint-disable property-no-vendor-prefix */
   -webkit-background-clip: text;
@@ -4997,6 +4997,88 @@ body.e-colorpicker-overflow {
   border-color: #d83b01;
 }
 
+.e-listen-icon::before {
+  content: "\e9ef";
+}
+
+.e-listen-stop::before {
+  content: "\e9ec";
+}
+
+.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: 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: 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 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/fabric-lite.scss

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

package/styles/fabric.css

@@ -4541,7 +4541,7 @@ textarea.e-input.e-bigger.e-small,
   border-color: #0078d6;
 }
 .e-control-wrapper.e-slider-container .e-slider .e-tab-track {
-  background-color: #b7e0ff;
+  background-color: rgb(183.4, 223.5495327103, 255);
 }
 .e-control-wrapper.e-slider-container.e-rtl.e-horizontal .e-slider .e-handle {
   margin: 0 -8px 0 0;
@@ -4930,7 +4930,7 @@ textarea.e-input.e-bigger.e-small,
   background-color: #666;
 }
 .e-control-wrapper.e-slider-container .e-slider .e-range.e-tab-range {
-  background-color: #006fc7;
+  background-color: rgb(0, 111.4205607477, 198.7);
 }
 .e-control-wrapper.e-slider-container .e-slider .e-handle {
   background-color: #fff;
@@ -4942,10 +4942,10 @@ textarea.e-input.e-bigger.e-small,
   border-color: transparent;
 }
 .e-control-wrapper.e-slider-container.e-slider-hover .e-slider-track {
-  background-color: #b7e0ff;
+  background-color: rgb(183.4, 223.5495327103, 255);
 }
 .e-control-wrapper.e-slider-container.e-slider-hover .e-range {
-  background-color: #006fc7;
+  background-color: rgb(0, 111.4205607477, 198.7);
 }
 .e-control-wrapper.e-slider-container.e-slider-hover .e-handle {
   border-color: #0078d6;
@@ -4954,10 +4954,10 @@ textarea.e-input.e-bigger.e-small,
   border-color: #0078d6;
 }
 .e-control-wrapper.e-slider-container:not(.e-disabled):not(.e-read-only):active .e-range {
-  background-color: #006fc7;
+  background-color: rgb(0, 111.4205607477, 198.7);
 }
 .e-control-wrapper.e-slider-container:not(.e-disabled):not(.e-read-only):active .e-slider-track {
-  background-color: #b7e0ff;
+  background-color: rgb(183.4, 223.5495327103, 255);
 }
 
 .e-bigger .e-slider-tooltip.e-tooltip-wrap.e-popup .e-tip-content {
@@ -7073,7 +7073,7 @@ body.e-colorpicker-overflow {
 
 .e-rating-container .e-rating-item-list:focus-visible:not(:hover) .e-rating-focus:not(:has(svg)),
 .e-rating-container .e-rating-item-list:focus-visible:not(:hover) .e-rating-focus .e-rating-item:has(svg) {
-  outline-color: #005ba3;
+  outline-color: rgb(0, 91.4018691589, 163);
   border-radius: 0;
 }
 .e-rating-container .e-reset {
@@ -7101,25 +7101,25 @@ body.e-colorpicker-overflow {
   -webkit-text-stroke: 1px #333;
 }
 .e-rating-container .e-rating-item-container.e-selected-value .e-rating-icon {
-  -webkit-text-stroke: 1px #0081e5;
+  -webkit-text-stroke: 1px rgb(0, 128.5794392523, 229.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(#0081e5), to(transparent));
-  background: linear-gradient(to right, #0081e5 var(--rating-value), transparent var(--rating-value));
+  background: -webkit-gradient(linear, left top, right top, from(rgb(0, 128.5794392523, 229.3)), to(transparent));
+  background: linear-gradient(to right, rgb(0, 128.5794392523, 229.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 #0081e5;
+  -webkit-text-stroke: 1px rgb(0, 128.5794392523, 229.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(#005ba3), to(transparent));
-  background: linear-gradient(to right, #005ba3 var(--rating-value), transparent var(--rating-value));
+  background: -webkit-gradient(linear, left top, right top, from(rgb(0, 91.4018691589, 163)), to(transparent));
+  background: linear-gradient(to right, rgb(0, 91.4018691589, 163) 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 #005ba3;
+  -webkit-text-stroke: 1px rgb(0, 91.4018691589, 163);
 }
 .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(#333), to(transparent));
@@ -7130,16 +7130,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(#0081e5), to(transparent));
-  background: linear-gradient(to left, #0081e5 var(--rating-value), transparent var(--rating-value));
+  background: -webkit-gradient(linear, right top, left top, from(rgb(0, 128.5794392523, 229.3)), to(transparent));
+  background: linear-gradient(to left, rgb(0, 128.5794392523, 229.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(#005ba3), to(transparent));
-  background: linear-gradient(to left, #005ba3 var(--rating-value), transparent var(--rating-value));
+  background: -webkit-gradient(linear, right top, left top, from(rgb(0, 91.4018691589, 163)), to(transparent));
+  background: linear-gradient(to left, rgb(0, 91.4018691589, 163) var(--rating-value), transparent var(--rating-value));
   background-clip: text;
   /* stylelint-disable property-no-vendor-prefix */
   -webkit-background-clip: text;
@@ -7681,6 +7681,119 @@ body.e-colorpicker-overflow {
   padding: 0;
 }
 
+.e-listen-icon::before {
+  content: "\e9ef";
+}
+
+.e-listen-stop::before {
+  content: "\e9ec";
+}
+
+.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: 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: 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 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 20px;
+}
+.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: 20px;
+}
+
 .smart-textarea-suggestion-overlay {
   display: none;
   position: absolute;

package/styles/fabric.scss

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

package/styles/fluent-dark-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: #005a9e;
@@ -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 #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));
@@ -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(#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;
@@ -5069,6 +5069,88 @@ body.e-colorpicker-overflow {
   border-color: #db7b48;
 }
 
+.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-dark-lite.scss

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