fix(accordion): refactor nested accordion styles and remove additional class

Author: OS-susmitabhowmik

core/src/components/accordion/accordion.tsx

@@ -200,12 +200,6 @@ export class Accordion implements ComponentInterface {
     if (ionItem.lines === undefined) {
       ionItem.lines = 'full';
     }
-
-    /**
-     * Add a class to identify this item as an accordion header
-     * for specific styling purposes
-     */
-    ionItem.classList.add('accordion-header-item');
   };
 
   private getSlottedHeaderIonItem = () => {

core/src/components/accordion/test/states/accordion.e2e.ts

@@ -62,9 +62,6 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens
         config
       );
 
-      const firstHeaderItem = page.locator('ion-accordion').first().locator('ion-item[slot="header"]');
-      await expect(firstHeaderItem).toHaveClass(/accordion-header-item/);
-
       const accordionGroup = page.locator('ion-accordion-group');
 
       await expect(accordionGroup).toHaveScreenshot(screenshot('accordion-states-activated'));
@@ -161,9 +158,6 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens
         config
       );
 
-      const firstHeaderItem = page.locator('ion-accordion').first().locator('ion-item[slot="header"]');
-      await expect(firstHeaderItem).toHaveClass(/accordion-header-item/);
-
       const accordionGroup = page.locator('ion-accordion-group');
 
       await expect(accordionGroup).toHaveScreenshot(screenshot('accordion-states-inset-activated'));

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

@@ -121,11 +121,4 @@ slot[name="end"]::slotted(*) {
 
 :host(.in-select-modal.ion-focused) .item-native {
   --border-radius: #{globals.$ion-border-radius-400};
-}
-
-// Item in Accordion
-// --------------------------------------------------
-// Ensure button element in accordion header has proper horizontal padding specifically for nested accordions
-:host(.accordion-header-item) .item-native {
-  @include globals.padding-horizontal(globals.$ion-space-400);
-}
+}

core/src/css/ionic/core.ionic.scss

@@ -332,13 +332,16 @@ ion-accordion > [slot="content"] ion-item {
 
   color: globals.$ion-primitives-neutral-1000;
 
-  --padding-start: 0;
   --padding-top: #{globals.$ion-space-300};
   --padding-bottom: #{globals.$ion-space-300};
-  --padding-end: 0;
   --min-height: #{globals.$ion-scale-700};
 }
 
+ion-accordion > [slot="content"] ion-item:not([slot="header"]) {
+  --padding-start: 0;
+  --padding-end: 0;
+}
+
 // Datetime Styles
 // --------------------------------------------------