@syncfusion/ej2-angular-inputs 23.2.4 → 24.1.41

package/styles/rating/_layout.scss

@@ -16,7 +16,10 @@
       margin: 4px;
 
       &:focus-visible:not(:hover) .e-rating-focus {
-        outline: 1px solid;
+        &:not(:has(svg)),
+        .e-rating-item:has(svg) {
+          outline: 1px solid;
+        }
       }
 
       &:focus-visible {
@@ -30,6 +33,9 @@
     }
 
     .e-rating-item-container {
+      &:has(svg) {
+        line-height: $rating-li-line-height;
+      }
       cursor: pointer;
       font-size: $rating-li-font-size;
       padding: $rating-li-padding;
@@ -44,12 +50,11 @@
       }
     }
 
-    &.e-rating-animation:not(.e-disabled) {
-      .e-rating-item-container:hover .e-rating-item {
-        transition: transform 150ms cubic-bezier(.4, 0, .2, 1) 0ms;
-        transform: scale(1.4);
-        pointer-events: none;
-      }
+    &.e-rating-animation.e-touch-select:not(.e-disabled) .e-rating-item-container.e-rating-focus .e-rating-item,
+    &.e-rating-animation:not(.e-disabled, .e-rating-touch) .e-rating-item-container:hover .e-rating-item {
+      transition: transform 150ms cubic-bezier(.4, 0, .2, 1) 0ms;
+      transform: scale(1.4);
+      pointer-events: none;
     }
 
     &.e-disabled {
@@ -158,6 +163,9 @@
   .e-small.e-rating-container,
   .e-small .e-rating-container {
     .e-rating-item-container {
+      &:has(svg) {
+        line-height: $rating-small-li-line-height;
+      }
       font-size: $rating-small-li-font-size;
     }
 
@@ -174,6 +182,9 @@
   .e-bigger.e-rating-container,
   .e-bigger .e-rating-container {
     .e-rating-item-container {
+      &:has(svg) {
+        line-height: $rating-bigger-li-line-height;
+      }
       font-size: $rating-bigger-li-font-size;
     }
 
@@ -192,6 +203,9 @@
   .e-bigger .e-small.e-rating-container,
   .e-small .e-bigger.e-rating-container {
     .e-rating-item-container {
+      &:has(svg) {
+        line-height: $rating-bigger-small-li-line-height;
+      }
       font-size: $rating-bigger-small-li-font-size;
     }
 

package/styles/rating/_material-dark-definition.scss

@@ -1,5 +1,6 @@
 $rating-li-font-size: 20px !default;
 $rating-li-padding: 4px !default;
+$rating-li-line-height: 13px !default;
 $rating-li-min-width-height: 28px !default;
 $rating-focus-border-radius: 0 !default;
 $rating-label-bottom-margin: 4px !default;
@@ -12,18 +13,21 @@ $rating-reset-font-size : 16px !default;
 $rating-tooltip-tip-bottom-height: 8px !default;
 
 $rating-small-li-font-size: 16px !default;
+$rating-small-li-line-height: 9px !default;
 $rating-small-li-min-width-height: 24px !default;
 $rating-small-label-font-size: 10px !default;
 $rating-small-label-line-height: 16px !default;
 $rating-small-reset-font-size : 12px !default;
 
 $rating-bigger-li-font-size: 32px !default;
+$rating-bigger-li-line-height: 21px !default;
 $rating-bigger-li-min-width-height: 40px !default;
 $rating-bigger-label-font-size: 14px !default;
 $rating-bigger-label-line-height: 22px !default;
 $rating-bigger-reset-font-size : 28px !default;
 
 $rating-bigger-small-li-font-size: 24px !default;
+$rating-bigger-small-li-line-height: 17px !default;
 $rating-bigger-small-li-min-width-height: 32px !default;
 $rating-bigger-small-label-font-size: 12px !default;
 $rating-bigger-small-label-line-height: 18px !default;

package/styles/rating/_material-definition.scss

@@ -1,5 +1,6 @@
 $rating-li-font-size: 20px !default;
 $rating-li-padding: 4px !default;
+$rating-li-line-height: 13px !default;
 $rating-li-min-width-height: 28px !default;
 $rating-focus-border-radius: 0 !default;
 $rating-label-bottom-margin: 4px !default;
@@ -12,18 +13,21 @@ $rating-reset-font-size : 16px !default;
 $rating-tooltip-tip-bottom-height: 8px !default;
 
 $rating-small-li-font-size: 16px !default;
+$rating-small-li-line-height: 9px !default;
 $rating-small-li-min-width-height: 24px !default;
 $rating-small-label-font-size: 10px !default;
 $rating-small-label-line-height: 16px !default;
 $rating-small-reset-font-size : 12px !default;
 
 $rating-bigger-li-font-size: 32px !default;
+$rating-bigger-li-line-height: 21px !default;
 $rating-bigger-li-min-width-height: 40px !default;
 $rating-bigger-label-font-size: 14px !default;
 $rating-bigger-label-line-height: 22px !default;
 $rating-bigger-reset-font-size : 28px !default;
 
 $rating-bigger-small-li-font-size: 24px !default;
+$rating-bigger-small-li-line-height: 17px !default;
 $rating-bigger-small-li-min-width-height: 32px !default;
 $rating-bigger-small-label-font-size: 12px !default;
 $rating-bigger-small-label-line-height: 18px !default;

package/styles/rating/_material3-definition.scss

@@ -1,5 +1,6 @@
 $rating-li-font-size: 20px !default;
 $rating-li-padding: 4px !default;
+$rating-li-line-height: 13px !default;
 $rating-li-min-width-height: 28px !default;
 $rating-focus-border-radius: 0 !default;
 $rating-label-bottom-margin: 8px !default;
@@ -12,18 +13,21 @@ $rating-reset-font-size : 16px !default;
 $rating-tooltip-tip-bottom-height: 8px !default;
 
 $rating-small-li-font-size: 16px !default;
+$rating-small-li-line-height: 9px !default;
 $rating-small-li-min-width-height: 24px !default;
 $rating-small-label-font-size: 10px !default;
 $rating-small-label-line-height: 16px !default;
 $rating-small-reset-font-size : 12px !default;
 
 $rating-bigger-li-font-size: 28px !default;
+$rating-bigger-li-line-height: 21px !default;
 $rating-bigger-li-min-width-height: 36px !default;
 $rating-bigger-label-font-size: 14px !default;
 $rating-bigger-label-line-height: 22px !default;
 $rating-bigger-reset-font-size : 24px !default;
 
 $rating-bigger-small-li-font-size: 24px !default;
+$rating-bigger-small-li-line-height: 17px !default;
 $rating-bigger-small-li-min-width-height: 32px !default;
 $rating-bigger-small-label-font-size: 12px !default;
 $rating-bigger-small-label-line-height: 18px !default;

package/styles/rating/_tailwind-definition.scss

@@ -1,5 +1,6 @@
 $rating-li-font-size: $font-icon-20 !default;
 $rating-li-padding: 4px !default;
+$rating-li-line-height: 3px !default;
 $rating-li-min-width-height: 28px !default;
 $rating-focus-border-radius: 4px !default;
 $rating-label-bottom-margin: 6px !default;
@@ -12,18 +13,21 @@ $rating-reset-font-size : $font-icon-16 !default;
 $rating-tooltip-tip-bottom-height: 8px !default;
 
 $rating-small-li-font-size: $font-icon-16 !default;
+$rating-small-li-line-height: 10px !default;
 $rating-small-li-min-width-height: 24px !default;
 $rating-small-label-font-size: $text-xxs !default;
 $rating-small-label-line-height: 16px !default;
 $rating-small-reset-font-size : $font-icon-12 !default;
 
 $rating-bigger-li-font-size: $font-icon-24 !default;
+$rating-bigger-li-line-height: 18px !default;
 $rating-bigger-li-min-width-height: 32px !default;
 $rating-bigger-label-font-size: $text-2xl !default;
 $rating-bigger-label-line-height: 22px !default;
 $rating-bigger-reset-font-size : $font-icon-20 !default;
 
 $rating-bigger-small-li-font-size: $font-icon-22 !default;
+$rating-bigger-small-li-line-height: 15px !default;
 $rating-bigger-small-li-min-width-height: 30px !default;
 $rating-bigger-small-label-font-size: $text-xs !default;
 $rating-bigger-small-label-line-height: 18px !default;

package/styles/rating/_theme.scss

@@ -2,8 +2,11 @@
   .e-rating-container {
     .e-rating-item-list {
       &:focus-visible:not(:hover) .e-rating-focus {
-        outline-color: $rating-li-focus;
-        border-radius: $rating-focus-border-radius;
+        &:not(:has(svg)),
+        .e-rating-item:has(svg) {
+          outline-color: $rating-li-focus;
+          border-radius: $rating-focus-border-radius;
+        }
       }
     }
 

package/styles/rating/bootstrap-dark.css

@@ -18,7 +18,8 @@
   padding: 0;
   margin: 4px;
 }
-.e-rating-container .e-rating-item-list:focus-visible:not(:hover) .e-rating-focus {
+.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: 1px solid;
 }
 .e-rating-container .e-rating-item-list:focus-visible {
@@ -37,10 +38,13 @@
   min-height: calc(1em + 8px);
   position: relative;
 }
+.e-rating-container .e-rating-item-container:has(svg) {
+  line-height: 9px;
+}
 .e-rating-container .e-rating-item-container .e-rating-item {
   display: block;
 }
-.e-rating-container.e-rating-animation:not(.e-disabled) .e-rating-item-container:hover .e-rating-item {
+.e-rating-container.e-rating-animation.e-touch-select:not(.e-disabled) .e-rating-item-container.e-rating-focus .e-rating-item, .e-rating-container.e-rating-animation:not(.e-disabled, .e-rating-touch) .e-rating-item-container:hover .e-rating-item {
   transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   transform: scale(1.4);
   pointer-events: none;
@@ -130,6 +134,10 @@
 .e-small .e-rating-container .e-rating-item-container {
   font-size: 16px;
 }
+.e-small.e-rating-container .e-rating-item-container:has(svg),
+.e-small .e-rating-container .e-rating-item-container:has(svg) {
+  line-height: 4px;
+}
 .e-small.e-rating-container .e-rating-label,
 .e-small .e-rating-container .e-rating-label {
   font-size: 10px;
@@ -144,6 +152,10 @@
 .e-bigger .e-rating-container .e-rating-item-container {
   font-size: 32px;
 }
+.e-bigger.e-rating-container .e-rating-item-container:has(svg),
+.e-bigger .e-rating-container .e-rating-item-container:has(svg) {
+  line-height: 16px;
+}
 .e-bigger.e-rating-container .e-rating-label,
 .e-bigger .e-rating-container .e-rating-label {
   font-size: 14px;
@@ -160,6 +172,12 @@
 .e-small .e-bigger.e-rating-container .e-rating-item-container {
   font-size: 26px;
 }
+.e-bigger.e-small.e-rating-container .e-rating-item-container:has(svg),
+.e-bigger.e-small .e-rating-container .e-rating-item-container:has(svg),
+.e-bigger .e-small.e-rating-container .e-rating-item-container:has(svg),
+.e-small .e-bigger.e-rating-container .e-rating-item-container:has(svg) {
+  line-height: 9px;
+}
 .e-bigger.e-small.e-rating-container .e-rating-label,
 .e-bigger.e-small .e-rating-container .e-rating-label,
 .e-bigger .e-small.e-rating-container .e-rating-label,
@@ -174,7 +192,8 @@
   font-size: 22px;
 }
 
-.e-rating-container .e-rating-item-list:focus-visible:not(:hover) .e-rating-focus {
+.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: #676767;
   border-radius: 2px;
 }

package/styles/rating/bootstrap.css

@@ -18,7 +18,8 @@
   padding: 0;
   margin: 4px;
 }
-.e-rating-container .e-rating-item-list:focus-visible:not(:hover) .e-rating-focus {
+.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: 1px solid;
 }
 .e-rating-container .e-rating-item-list:focus-visible {
@@ -37,10 +38,13 @@
   min-height: calc(1em + 8px);
   position: relative;
 }
+.e-rating-container .e-rating-item-container:has(svg) {
+  line-height: 9px;
+}
 .e-rating-container .e-rating-item-container .e-rating-item {
   display: block;
 }
-.e-rating-container.e-rating-animation:not(.e-disabled) .e-rating-item-container:hover .e-rating-item {
+.e-rating-container.e-rating-animation.e-touch-select:not(.e-disabled) .e-rating-item-container.e-rating-focus .e-rating-item, .e-rating-container.e-rating-animation:not(.e-disabled, .e-rating-touch) .e-rating-item-container:hover .e-rating-item {
   transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   transform: scale(1.4);
   pointer-events: none;
@@ -130,6 +134,10 @@
 .e-small .e-rating-container .e-rating-item-container {
   font-size: 16px;
 }
+.e-small.e-rating-container .e-rating-item-container:has(svg),
+.e-small .e-rating-container .e-rating-item-container:has(svg) {
+  line-height: 4px;
+}
 .e-small.e-rating-container .e-rating-label,
 .e-small .e-rating-container .e-rating-label {
   font-size: 10px;
@@ -144,6 +152,10 @@
 .e-bigger .e-rating-container .e-rating-item-container {
   font-size: 32px;
 }
+.e-bigger.e-rating-container .e-rating-item-container:has(svg),
+.e-bigger .e-rating-container .e-rating-item-container:has(svg) {
+  line-height: 16px;
+}
 .e-bigger.e-rating-container .e-rating-label,
 .e-bigger .e-rating-container .e-rating-label {
   font-size: 14px;
@@ -160,6 +172,12 @@
 .e-small .e-bigger.e-rating-container .e-rating-item-container {
   font-size: 26px;
 }
+.e-bigger.e-small.e-rating-container .e-rating-item-container:has(svg),
+.e-bigger.e-small .e-rating-container .e-rating-item-container:has(svg),
+.e-bigger .e-small.e-rating-container .e-rating-item-container:has(svg),
+.e-small .e-bigger.e-rating-container .e-rating-item-container:has(svg) {
+  line-height: 9px;
+}
 .e-bigger.e-small.e-rating-container .e-rating-label,
 .e-bigger.e-small .e-rating-container .e-rating-label,
 .e-bigger .e-small.e-rating-container .e-rating-label,
@@ -174,7 +192,8 @@
   font-size: 24px;
 }
 
-.e-rating-container .e-rating-item-list:focus-visible:not(:hover) .e-rating-focus {
+.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: #adadad;
   border-radius: 2px;
 }

package/styles/rating/bootstrap4.css

@@ -18,7 +18,8 @@
   padding: 0;
   margin: 4px;
 }
-.e-rating-container .e-rating-item-list:focus-visible:not(:hover) .e-rating-focus {
+.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: 1px solid;
 }
 .e-rating-container .e-rating-item-list:focus-visible {
@@ -37,10 +38,13 @@
   min-height: calc(1em + 8px);
   position: relative;
 }
+.e-rating-container .e-rating-item-container:has(svg) {
+  line-height: 11px;
+}
 .e-rating-container .e-rating-item-container .e-rating-item {
   display: block;
 }
-.e-rating-container.e-rating-animation:not(.e-disabled) .e-rating-item-container:hover .e-rating-item {
+.e-rating-container.e-rating-animation.e-touch-select:not(.e-disabled) .e-rating-item-container.e-rating-focus .e-rating-item, .e-rating-container.e-rating-animation:not(.e-disabled, .e-rating-touch) .e-rating-item-container:hover .e-rating-item {
   transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   transform: scale(1.4);
   pointer-events: none;
@@ -130,6 +134,10 @@
 .e-small .e-rating-container .e-rating-item-container {
   font-size: 16px;
 }
+.e-small.e-rating-container .e-rating-item-container:has(svg),
+.e-small .e-rating-container .e-rating-item-container:has(svg) {
+  line-height: 4px;
+}
 .e-small.e-rating-container .e-rating-label,
 .e-small .e-rating-container .e-rating-label {
   font-size: 10px;
@@ -144,6 +152,10 @@
 .e-bigger .e-rating-container .e-rating-item-container {
   font-size: 32px;
 }
+.e-bigger.e-rating-container .e-rating-item-container:has(svg),
+.e-bigger .e-rating-container .e-rating-item-container:has(svg) {
+  line-height: 13px;
+}
 .e-bigger.e-rating-container .e-rating-label,
 .e-bigger .e-rating-container .e-rating-label {
   font-size: 14px;
@@ -160,6 +172,12 @@
 .e-small .e-bigger.e-rating-container .e-rating-item-container {
   font-size: 24px;
 }
+.e-bigger.e-small.e-rating-container .e-rating-item-container:has(svg),
+.e-bigger.e-small .e-rating-container .e-rating-item-container:has(svg),
+.e-bigger .e-small.e-rating-container .e-rating-item-container:has(svg),
+.e-small .e-bigger.e-rating-container .e-rating-item-container:has(svg) {
+  line-height: 9px;
+}
 .e-bigger.e-small.e-rating-container .e-rating-label,
 .e-bigger.e-small .e-rating-container .e-rating-label,
 .e-bigger .e-small.e-rating-container .e-rating-label,
@@ -174,7 +192,8 @@
   font-size: 20px;
 }
 
-.e-rating-container .e-rating-item-list:focus-visible:not(:hover) .e-rating-focus {
+.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: #007bff;
   border-radius: 4px;
 }

package/styles/rating/bootstrap5-dark.css

@@ -18,7 +18,8 @@
   padding: 0;
   margin: 4px;
 }
-.e-rating-container .e-rating-item-list:focus-visible:not(:hover) .e-rating-focus {
+.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: 1px solid;
 }
 .e-rating-container .e-rating-item-list:focus-visible {
@@ -37,10 +38,13 @@
   min-height: calc(1em + 8px);
   position: relative;
 }
+.e-rating-container .e-rating-item-container:has(svg) {
+  line-height: 13px;
+}
 .e-rating-container .e-rating-item-container .e-rating-item {
   display: block;
 }
-.e-rating-container.e-rating-animation:not(.e-disabled) .e-rating-item-container:hover .e-rating-item {
+.e-rating-container.e-rating-animation.e-touch-select:not(.e-disabled) .e-rating-item-container.e-rating-focus .e-rating-item, .e-rating-container.e-rating-animation:not(.e-disabled, .e-rating-touch) .e-rating-item-container:hover .e-rating-item {
   transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   transform: scale(1.4);
   pointer-events: none;
@@ -130,6 +134,10 @@
 .e-small .e-rating-container .e-rating-item-container {
   font-size: 16px;
 }
+.e-small.e-rating-container .e-rating-item-container:has(svg),
+.e-small .e-rating-container .e-rating-item-container:has(svg) {
+  line-height: 6px;
+}
 .e-small.e-rating-container .e-rating-label,
 .e-small .e-rating-container .e-rating-label {
   font-size: 10px;
@@ -144,6 +152,10 @@
 .e-bigger .e-rating-container .e-rating-item-container {
   font-size: 32px;
 }
+.e-bigger.e-rating-container .e-rating-item-container:has(svg),
+.e-bigger .e-rating-container .e-rating-item-container:has(svg) {
+  line-height: 13px;
+}
 .e-bigger.e-rating-container .e-rating-label,
 .e-bigger .e-rating-container .e-rating-label {
   font-size: 14px;
@@ -160,6 +172,12 @@
 .e-small .e-bigger.e-rating-container .e-rating-item-container {
   font-size: 26px;
 }
+.e-bigger.e-small.e-rating-container .e-rating-item-container:has(svg),
+.e-bigger.e-small .e-rating-container .e-rating-item-container:has(svg),
+.e-bigger .e-small.e-rating-container .e-rating-item-container:has(svg),
+.e-small .e-bigger.e-rating-container .e-rating-item-container:has(svg) {
+  line-height: 13px;
+}
 .e-bigger.e-small.e-rating-container .e-rating-label,
 .e-bigger.e-small .e-rating-container .e-rating-label,
 .e-bigger .e-small.e-rating-container .e-rating-label,
@@ -174,7 +192,8 @@
   font-size: 22px;
 }
 
-.e-rating-container .e-rating-item-list:focus-visible:not(:hover) .e-rating-focus {
+.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: #0d6efd;
   border-radius: 4px;
 }

package/styles/rating/bootstrap5.css

@@ -18,7 +18,8 @@
   padding: 0;
   margin: 4px;
 }
-.e-rating-container .e-rating-item-list:focus-visible:not(:hover) .e-rating-focus {
+.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: 1px solid;
 }
 .e-rating-container .e-rating-item-list:focus-visible {
@@ -37,10 +38,13 @@
   min-height: calc(1em + 8px);
   position: relative;
 }
+.e-rating-container .e-rating-item-container:has(svg) {
+  line-height: 13px;
+}
 .e-rating-container .e-rating-item-container .e-rating-item {
   display: block;
 }
-.e-rating-container.e-rating-animation:not(.e-disabled) .e-rating-item-container:hover .e-rating-item {
+.e-rating-container.e-rating-animation.e-touch-select:not(.e-disabled) .e-rating-item-container.e-rating-focus .e-rating-item, .e-rating-container.e-rating-animation:not(.e-disabled, .e-rating-touch) .e-rating-item-container:hover .e-rating-item {
   transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   transform: scale(1.4);
   pointer-events: none;
@@ -130,6 +134,10 @@
 .e-small .e-rating-container .e-rating-item-container {
   font-size: 16px;
 }
+.e-small.e-rating-container .e-rating-item-container:has(svg),
+.e-small .e-rating-container .e-rating-item-container:has(svg) {
+  line-height: 6px;
+}
 .e-small.e-rating-container .e-rating-label,
 .e-small .e-rating-container .e-rating-label {
   font-size: 10px;
@@ -144,6 +152,10 @@
 .e-bigger .e-rating-container .e-rating-item-container {
   font-size: 32px;
 }
+.e-bigger.e-rating-container .e-rating-item-container:has(svg),
+.e-bigger .e-rating-container .e-rating-item-container:has(svg) {
+  line-height: 13px;
+}
 .e-bigger.e-rating-container .e-rating-label,
 .e-bigger .e-rating-container .e-rating-label {
   font-size: 14px;
@@ -160,6 +172,12 @@
 .e-small .e-bigger.e-rating-container .e-rating-item-container {
   font-size: 26px;
 }
+.e-bigger.e-small.e-rating-container .e-rating-item-container:has(svg),
+.e-bigger.e-small .e-rating-container .e-rating-item-container:has(svg),
+.e-bigger .e-small.e-rating-container .e-rating-item-container:has(svg),
+.e-small .e-bigger.e-rating-container .e-rating-item-container:has(svg) {
+  line-height: 13px;
+}
 .e-bigger.e-small.e-rating-container .e-rating-label,
 .e-bigger.e-small .e-rating-container .e-rating-label,
 .e-bigger .e-small.e-rating-container .e-rating-label,
@@ -174,7 +192,8 @@
   font-size: 22px;
 }
 
-.e-rating-container .e-rating-item-list:focus-visible:not(:hover) .e-rating-focus {
+.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: #0d6efd;
   border-radius: 4px;
 }

package/styles/rating/fabric-dark.css

@@ -18,7 +18,8 @@
   padding: 0;
   margin: 4px;
 }
-.e-rating-container .e-rating-item-list:focus-visible:not(:hover) .e-rating-focus {
+.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: 1px solid;
 }
 .e-rating-container .e-rating-item-list:focus-visible {
@@ -37,10 +38,13 @@
   min-height: calc(1em + 8px);
   position: relative;
 }
+.e-rating-container .e-rating-item-container:has(svg) {
+  line-height: 13px;
+}
 .e-rating-container .e-rating-item-container .e-rating-item {
   display: block;
 }
-.e-rating-container.e-rating-animation:not(.e-disabled) .e-rating-item-container:hover .e-rating-item {
+.e-rating-container.e-rating-animation.e-touch-select:not(.e-disabled) .e-rating-item-container.e-rating-focus .e-rating-item, .e-rating-container.e-rating-animation:not(.e-disabled, .e-rating-touch) .e-rating-item-container:hover .e-rating-item {
   transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   transform: scale(1.4);
   pointer-events: none;
@@ -130,6 +134,10 @@
 .e-small .e-rating-container .e-rating-item-container {
   font-size: 16px;
 }
+.e-small.e-rating-container .e-rating-item-container:has(svg),
+.e-small .e-rating-container .e-rating-item-container:has(svg) {
+  line-height: 10px;
+}
 .e-small.e-rating-container .e-rating-label,
 .e-small .e-rating-container .e-rating-label {
   font-size: 10px;
@@ -144,6 +152,10 @@
 .e-bigger .e-rating-container .e-rating-item-container {
   font-size: 28px;
 }
+.e-bigger.e-rating-container .e-rating-item-container:has(svg),
+.e-bigger .e-rating-container .e-rating-item-container:has(svg) {
+  line-height: 21px;
+}
 .e-bigger.e-rating-container .e-rating-label,
 .e-bigger .e-rating-container .e-rating-label {
   font-size: 14px;
@@ -160,6 +172,12 @@
 .e-small .e-bigger.e-rating-container .e-rating-item-container {
   font-size: 24px;
 }
+.e-bigger.e-small.e-rating-container .e-rating-item-container:has(svg),
+.e-bigger.e-small .e-rating-container .e-rating-item-container:has(svg),
+.e-bigger .e-small.e-rating-container .e-rating-item-container:has(svg),
+.e-small .e-bigger.e-rating-container .e-rating-item-container:has(svg) {
+  line-height: 19px;
+}
 .e-bigger.e-small.e-rating-container .e-rating-label,
 .e-bigger.e-small .e-rating-container .e-rating-label,
 .e-bigger .e-small.e-rating-container .e-rating-label,
@@ -174,7 +192,8 @@
   font-size: 20px;
 }
 
-.e-rating-container .e-rating-item-list:focus-visible:not(:hover) .e-rating-focus {
+.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: #fff;
   border-radius: 0;
 }

package/styles/rating/fabric.css

@@ -18,7 +18,8 @@
   padding: 0;
   margin: 4px;
 }
-.e-rating-container .e-rating-item-list:focus-visible:not(:hover) .e-rating-focus {
+.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: 1px solid;
 }
 .e-rating-container .e-rating-item-list:focus-visible {
@@ -37,10 +38,13 @@
   min-height: calc(1em + 8px);
   position: relative;
 }
+.e-rating-container .e-rating-item-container:has(svg) {
+  line-height: 13px;
+}
 .e-rating-container .e-rating-item-container .e-rating-item {
   display: block;
 }
-.e-rating-container.e-rating-animation:not(.e-disabled) .e-rating-item-container:hover .e-rating-item {
+.e-rating-container.e-rating-animation.e-touch-select:not(.e-disabled) .e-rating-item-container.e-rating-focus .e-rating-item, .e-rating-container.e-rating-animation:not(.e-disabled, .e-rating-touch) .e-rating-item-container:hover .e-rating-item {
   transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   transform: scale(1.4);
   pointer-events: none;
@@ -130,6 +134,10 @@
 .e-small .e-rating-container .e-rating-item-container {
   font-size: 16px;
 }
+.e-small.e-rating-container .e-rating-item-container:has(svg),
+.e-small .e-rating-container .e-rating-item-container:has(svg) {
+  line-height: 13px;
+}
 .e-small.e-rating-container .e-rating-label,
 .e-small .e-rating-container .e-rating-label {
   font-size: 10px;
@@ -144,6 +152,10 @@
 .e-bigger .e-rating-container .e-rating-item-container {
   font-size: 28px;
 }
+.e-bigger.e-rating-container .e-rating-item-container:has(svg),
+.e-bigger .e-rating-container .e-rating-item-container:has(svg) {
+  line-height: 21px;
+}
 .e-bigger.e-rating-container .e-rating-label,
 .e-bigger .e-rating-container .e-rating-label {
   font-size: 14px;
@@ -160,6 +172,12 @@
 .e-small .e-bigger.e-rating-container .e-rating-item-container {
   font-size: 24px;
 }
+.e-bigger.e-small.e-rating-container .e-rating-item-container:has(svg),
+.e-bigger.e-small .e-rating-container .e-rating-item-container:has(svg),
+.e-bigger .e-small.e-rating-container .e-rating-item-container:has(svg),
+.e-small .e-bigger.e-rating-container .e-rating-item-container:has(svg) {
+  line-height: 19px;
+}
 .e-bigger.e-small.e-rating-container .e-rating-label,
 .e-bigger.e-small .e-rating-container .e-rating-label,
 .e-bigger .e-small.e-rating-container .e-rating-label,
@@ -174,7 +192,8 @@
   font-size: 20px;
 }
 
-.e-rating-container .e-rating-item-list:focus-visible:not(:hover) .e-rating-focus {
+.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;
   border-radius: 0;
 }