feat(item): add parts support for detail-icon (#20979)

core/api.txt

@@ -528,6 +528,7 @@ ion-item,css-prop,--padding-start
 ion-item,css-prop,--padding-top
 ion-item,css-prop,--ripple-color
 ion-item,css-prop,--transition
+ion-item,part,detail-icon
 
 ion-item-divider,shadow
 ion-item-divider,prop,color,string | undefined,undefined,false,false

core/src/components/item/item.tsx

@@ -11,6 +11,8 @@ import { createColorClasses, hostContext, openURL } from '../../utils/theme';
  * @slot - Content is placed between the named slots if provided without a slot.
  * @slot start - Content is placed to the left of the item text in LTR, and to the right in RTL.
  * @slot end - Content is placed to the right of the item text in LTR, and to the left in RTL.
+ *
+ * @part detail-icon - The chevron icon for the item. Only applies when `detail="true"`.
  */
 @Component({
   tag: 'ion-item',
@@ -213,7 +215,7 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
                 <slot></slot>
               </div>
               <slot name="end"></slot>
-              {showDetail && <ion-icon icon={detailIcon} lazy={false} class="item-detail-icon"></ion-icon>}
+              {showDetail && <ion-icon icon={detailIcon} lazy={false} class="item-detail-icon" part="detail-icon"></ion-icon>}
               <div class="item-inner-highlight"></div>
             </div>
             {canActivate && mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}

core/src/components/item/readme.md

@@ -1397,6 +1397,13 @@ Item Inputs
 | `"start"` | Content is placed to the left of the item text in LTR, and to the right in RTL. |
 
 
+## Shadow Parts
+
+| Part            | Description                                                       |
+| --------------- | ----------------------------------------------------------------- |
+| `"detail-icon"` | The chevron icon for the item. Only applies when `detail="true"`. |
+
+
 ## CSS Custom Properties
 
 | Name                             | Description                                                                                                   |

core/src/components/item/test/buttons/index.html

@@ -53,6 +53,13 @@
         <ion-label>button[ion-item] danger</ion-label>
       </ion-item>
 
+      <ion-item button detail class="item-part">
+        <ion-label>
+          <h1>button[ion-item] detail</h1>
+          <h2>Footnote</h2>
+        </ion-label>
+      </ion-item>
+
       <ion-item button onclick="testClickOutsize(event)">
         <ion-button slot="start" onclick="testClick(event)">Default</ion-button>
         <ion-label>Inner Buttons</ion-label>
@@ -159,6 +166,27 @@
       --background-hover-opacity: 1;
       --color-hover: purple;
     }
+
+    .item-part h1 {
+      font-size: 18px;
+      font-weight: 500;
+
+      color: #333;
+    }
+
+    .item-part h2 {
+      font-size: 14px;
+
+      color: #888;
+    }
+
+    .item-part::part(detail-icon) {
+      margin-top: -18px;
+
+      color: red;
+
+      opacity: 1;
+    }
   </style>
 
   <script>