refactor(item): add slot styles (#29741)

Co-authored-by: ionitron <hi@ionicframework.com>

core/src/components/item/item.ionic.scss

@@ -11,6 +11,9 @@
   --border-color: #{globals.$ionic-color-neutral-300};
   --border-style: #{globals.$ionic-border-style-solid};
   --border-width: #{0 0 globals.$ionic-border-size-025 0};
+  --detail-icon-color: #{globals.$ionic-color-neutral-800};
+  --detail-icon-font-size: #{globals.$ionic-scale-600};
+  --detail-icon-opacity: 1;
   --min-height: #{globals.$ionic-scale-1800};
   --padding-top: #{globals.$ionic-space-200};
   --padding-end: #{globals.$ionic-space-400};
@@ -29,6 +32,13 @@
   min-height: initial;
 }
 
+// Item Detail Icon
+// --------------------------------------------------
+
+.item-detail-icon {
+  margin-inline-end: 0;
+}
+
 // Ionic Item Slots
 // --------------------------------------------------
 
@@ -40,6 +50,12 @@ slot[name="end"]::slotted(*) {
   @include globals.margin(null, null, null, #{globals.$ionic-space-400});
 }
 
+::slotted(ion-icon:not(.item-detail-icon)) {
+  color: globals.$ionic-color-neutral-1000;
+
+  font-size: globals.$ionic-scale-1000;
+}
+
 // Item: Disabled
 // --------------------------------------------------
 

core/src/components/item/item.tsx

@@ -264,6 +264,14 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
     return config.get('itemDetailIcon', defaultIcon);
   }
 
+  /**
+   * The icon should be flipped when the app is RTL and
+   * the icon is a variation of chevron.
+   */
+  get shouldFlipIcon() {
+    return this.itemDetailIcon === chevronForward || this.itemDetailIcon === caretRightRegular;
+  }
+
   render() {
     const {
       detail,
@@ -273,6 +281,7 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
       disabled,
       href,
       itemDetailIcon,
+      shouldFlipIcon,
       rel,
       target,
       routerAnimation,
@@ -396,7 +405,7 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
                 class="item-detail-icon"
                 part="detail-icon"
                 aria-hidden="true"
-                flip-rtl={itemDetailIcon === chevronForward}
+                flip-rtl={shouldFlipIcon}
               ></ion-icon>
             )}
           </div>