fix(accodian): add padding for nested accordians

Author: OS-susmitabhowmik

core/src/components/accordion/accordion.tsx

@@ -201,6 +201,12 @@ export class Accordion implements ComponentInterface {
       ionItem.lines = 'full';
     }
 
+    /**
+     * Add a class to identify this item as an accordion header
+     * for specific styling purposes
+     */
+    ionItem.classList.add('accordion-header-item');
+
     /**
      * Set the pressed state background color for ionic theme.
      * This overrides the default blue color from ion-item.

core/src/components/accordion/test/nested/index.html

@@ -11,7 +11,7 @@
     <style>
       .grid {
         display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
         grid-row-gap: 20px;
         grid-column-gap: 20px;
       }

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

@@ -122,3 +122,10 @@ 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
+:host(.accordion-header-item) .item-native {
+  @include globals.padding-horizontal(globals.$ion-space-400);
+}