fix(accordion): update styles for ionic theme

core/src/components/accordion/accordion.ionic.scss

@@ -28,6 +28,11 @@
   z-index: 3;
 }
 
+// Hide the divider for the last accordion item
+:host(.accordion-last)::after {
+  display: none;
+}
+
 :host(.accordion-animated) {
   transition: all 300ms cubic-bezier(0.25, 0.8, 0.5, 1);
 }
@@ -51,6 +56,7 @@
   --padding-end: #{globals.$ion-space-400};
   --padding-bottom: #{globals.$ion-space-300};
   --padding-start: #{globals.$ion-space-400};
+  --background-activated: #{globals.$ion-bg-neutral-subtlest-press};
 
   @include globals.typography(globals.$ion-heading-h6-medium);
 }

core/src/components/accordion/accordion.tsx

@@ -87,6 +87,7 @@ export class Accordion implements ComponentInterface {
   @State() state: AccordionState = AccordionState.Collapsed;
   @State() isNext = false;
   @State() isPrevious = false;
+  @State() isLast = false;
   /**
    * Tracks whether a user-initiated interaction has occurred.
    * Animations are disabled until the first interaction happens.
@@ -431,6 +432,9 @@ export class Accordion implements ComponentInterface {
 
     const shouldExpand = Array.isArray(value) ? value.includes(accordionValue) : value === accordionValue;
 
+    const nextAccordion = this.getNextSibling();
+    this.isLast = nextAccordion === undefined;
+
     if (shouldExpand) {
       this.expandAccordion();
       this.isNext = this.isPrevious = false;
@@ -444,7 +448,6 @@ export class Accordion implements ComponentInterface {
        * applied. Check to see if the
        * next or previous accordion is selected.
        */
-      const nextAccordion = this.getNextSibling();
       const nextAccordionValue = nextAccordion?.value;
 
       if (nextAccordionValue !== undefined) {
@@ -525,6 +528,7 @@ export class Accordion implements ComponentInterface {
 
           'accordion-next': this.isNext,
           'accordion-previous': this.isPrevious,
+          'accordion-last': this.isLast,
 
           'accordion-disabled': disabled,
           'accordion-readonly': readonly,

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

@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
-configs({ directions: ['ltr'] }).forEach(({ config, screenshot, title }) => {
+configs({ directions: ['ltr'], modes: ['md', 'ios', 'ionic-md'] }).forEach(({ config, screenshot, title }) => {
   test.describe(title('accordion: nested'), () => {
     test('parent and child should not be disabled', async ({ page }) => {
       await page.goto(`/src/components/accordion/test/nested`, config);

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/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
 // --------------------------------------------------