feat(item): add styles for pressed state in ionic theme (#29586)

Issue number: internal

---------

## What is the new behavior?
- Added scss for the pressed state of `ion-item` for the Ionic theme
- Added item with class `ion-activatable` ([according to
docs](https://github.com/ionic-team/ionic-framework/blob/main/docs/component-guide.md#activated))
to test page

## Does this introduce a breaking change?
- [ ] Yes
- [x] No

---------

Co-authored-by: Bernardo Cardoso <[email protected]>

Author: rugoncalves

core/api.txt

@@ -985,6 +985,7 @@ ion-item,prop,type,"button" | "reset" | "submit",'button',false,false
 ion-item,css-prop,--background,ionic
 ion-item,css-prop,--background,ios
 ion-item,css-prop,--background,md
+ion-item,css-prop,--background-activated,ionic
 ion-item,css-prop,--background-activated,ios
 ion-item,css-prop,--background-activated,md
 ion-item,css-prop,--background-activated-opacity,ios

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

@@ -6,6 +6,7 @@
 :host {
   /**
     * @prop --background: Background of the item
+    * @prop --background-activated: Background of the item when pressed. Note: setting this will interfere with the Material Design ripple.
     *
     * @prop --border-color: Color of the item border
     * @prop --border-style: Style of the item border
@@ -20,6 +21,7 @@
     *
     */
   --background: #{globals.$ionic-color-base-white};
+  --background-activated: #{globals.$ionic-color-neutral-200};
   --border-color: #{globals.$ionic-color-neutral-300};
   --border-style: #{globals.$ionic-border-style-solid};
   --border-width: #{globals.$ionic-border-size-025};
@@ -88,3 +90,10 @@
     box-sizing: border-box;
   }
 }
+
+// Item: Activated
+// --------------------------------------------------
+
+:host(.ion-activated) .item-native {
+  background: var(--background-activated);
+}

core/src/components/item/test/theme-ionic/index.html

@@ -158,6 +158,16 @@ <h1>Heading</h1>
           </ion-label>
           <ion-button slot="end" fill="outline">Outline</ion-button>
         </ion-item>
+        <ion-item-divider>
+          <ion-label>Item activatable</ion-label>
+        </ion-item-divider>
+        <ion-item class="ion-activatable">
+          <ion-label slot="start">Start</ion-label>
+          <ion-label>
+            <h1>Heading</h1>
+            <p>Normal paragraph</p>
+          </ion-label>
+        </ion-item>
       </ion-content>
 
       <ion-footer>