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.
@@ -199,6 +200,13 @@ export class Accordion implements ComponentInterface {
     if (ionItem.lines === undefined) {
       ionItem.lines = 'full';
     }
+
+    /**
+     * Ionic theme only: class for accordion header item styling.
+     */
+    if (getIonTheme(this) === 'ionic') {
+      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/item/item.ionic.scss

@@ -122,3 +122,13 @@ slot[name="end"]::slotted(*) {
 :host(.in-select-modal.ion-focused) .item-native {
   --border-radius: #{globals.$ion-border-radius-400};
 }
+
+// Item in Accordion
+// --------------------------------------------------
+:host(.accordion-header-item) {
+  --background-activated: #{globals.$ion-bg-neutral-subtlest-press};
+}
+
+:host(.accordion-header-item) .item-native {
+  @include globals.padding-horizontal(globals.$ion-space-400);
+}