fix(accordion): remove last item divider, update pressed state background color, and add header padding 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);
 }

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.
@@ -166,6 +167,11 @@ export class Accordion implements ComponentInterface {
      * the button has not have been rendered yet.
      */
     raf(() => {
+      /**
+       * Header slot assignment can lag first paint; re-apply defaults so
+       * `accordion-header-item` and button props are set before a11y/screenshots.
+       */
+      this.setItemDefaults();
       /**
        * Set aria label on button inside of ion-item
        * once the inner content has been rendered.
@@ -199,6 +205,8 @@ export class Accordion implements ComponentInterface {
     if (ionItem.lines === undefined) {
       ionItem.lines = 'full';
     }
+
+    ionItem.classList.add('accordion-header-item');
   };
 
   private getSlottedHeaderIonItem = () => {
@@ -431,6 +439,12 @@ export class Accordion implements ComponentInterface {
 
     const shouldExpand = Array.isArray(value) ? value.includes(accordionValue) : value === accordionValue;
 
+    /**
+     * Check if this is the last accordion in the group.
+     */
+    const nextAccordion = this.getNextSibling();
+    this.isLast = nextAccordion === undefined;
+
     if (shouldExpand) {
       this.expandAccordion();
       this.isNext = this.isPrevious = false;
@@ -444,7 +458,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 +538,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/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/accordion/test/states/accordion.e2e.ts

@@ -62,6 +62,13 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens
         config
       );
 
+      /**
+       * Accordion headers must receive `accordion-header-item` after hydration so ionic item
+       * styles apply (activated background). Screenshots alone won't catch a missing class.
+       */
+      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'));
@@ -158,6 +165,9 @@ 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

@@ -122,3 +122,16 @@ slot[name="end"]::slotted(*) {
 :host(.in-select-modal.ion-focused) .item-native {
   --border-radius: #{globals.$ion-border-radius-400};
 }
+
+// Accordion header (ionic theme adds `accordion-header-item` on the slotted header item)
+// Neutral press for `.ion-activated`. Avoid `:host-context(ion-accordion)` — unsupported
+// in WebKit/Firefox; the whole rule group would be ignored (see core mixins.scss).
+// --------------------------------------------------
+:host(.accordion-header-item) {
+  --background-activated: #{globals.$ion-bg-neutral-subtlest-press};
+  --background-activated-opacity: 1;
+}
+
+:host(.accordion-header-item) .item-native {
+  @include globals.padding-horizontal(globals.$ion-space-400);
+}