diff --git a/core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-compact-expanded-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-compact-expanded-ionic-md-ltr-light-Mobile-Chrome-linux.png
index a7f2a9a2ba..41409e2bbc 100644
Binary files a/core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-compact-expanded-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-compact-expanded-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-compact-expanded-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-compact-expanded-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 2e434897c7..a52824cf6b 100644
Binary files a/core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-compact-expanded-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-compact-expanded-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-compact-expanded-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-compact-expanded-ionic-md-ltr-light-Mobile-Safari-linux.png
index e76429954b..189cfbe15e 100644
Binary files a/core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-compact-expanded-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-compact-expanded-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-compact-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-compact-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 4592d9ccbd..026d302139 100644
Binary files a/core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-compact-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-compact-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-compact-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-compact-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 646b1b6d87..614633eebc 100644
Binary files a/core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-compact-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-compact-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-compact-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-compact-ionic-md-ltr-light-Mobile-Safari-linux.png
index 8df1e6f8da..6bc1d82a5e 100644
Binary files a/core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-compact-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-compact-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-inset-expanded-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-inset-expanded-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 0e2ac1bdb8..cc8ecbed71 100644
Binary files a/core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-inset-expanded-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-inset-expanded-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-inset-expanded-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-inset-expanded-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 7473b53a15..18ae93594f 100644
Binary files a/core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-inset-expanded-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-inset-expanded-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-inset-expanded-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-inset-expanded-ionic-md-ltr-light-Mobile-Safari-linux.png
index 88bdb9fc62..f38be2405d 100644
Binary files a/core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-inset-expanded-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-inset-expanded-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-inset-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-inset-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 6994cf20dc..ac7fd3466a 100644
Binary files a/core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-inset-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-inset-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-inset-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-inset-ionic-md-ltr-light-Mobile-Firefox-linux.png
index b91457f2c0..8e6baf4df3 100644
Binary files a/core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-inset-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-inset-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-inset-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-inset-ionic-md-ltr-light-Mobile-Safari-linux.png
index d7d7bd4c18..9d5833427c 100644
Binary files a/core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-inset-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-inset-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/accordion-group/test/states/accordion.e2e.ts-snapshots/accordion-group-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/accordion-group/test/states/accordion.e2e.ts-snapshots/accordion-group-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 7dd8e10044..3ef7394f2f 100644
Binary files a/core/src/components/accordion-group/test/states/accordion.e2e.ts-snapshots/accordion-group-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/accordion-group/test/states/accordion.e2e.ts-snapshots/accordion-group-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/accordion-group/test/states/accordion.e2e.ts-snapshots/accordion-group-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/accordion-group/test/states/accordion.e2e.ts-snapshots/accordion-group-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 66f2278979..256888f5fe 100644
Binary files a/core/src/components/accordion-group/test/states/accordion.e2e.ts-snapshots/accordion-group-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/accordion-group/test/states/accordion.e2e.ts-snapshots/accordion-group-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/accordion-group/test/states/accordion.e2e.ts-snapshots/accordion-group-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/accordion-group/test/states/accordion.e2e.ts-snapshots/accordion-group-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png
index 011d3ac2c9..7330e54ccd 100644
Binary files a/core/src/components/accordion-group/test/states/accordion.e2e.ts-snapshots/accordion-group-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/accordion-group/test/states/accordion.e2e.ts-snapshots/accordion-group-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/accordion/accordion.scss b/core/src/components/accordion/accordion.common.scss
similarity index 70%
rename from core/src/components/accordion/accordion.scss
rename to core/src/components/accordion/accordion.common.scss
index e560c5de33..97716ac695 100644
--- a/core/src/components/accordion/accordion.scss
+++ b/core/src/components/accordion/accordion.common.scss
@@ -1,6 +1,7 @@
-@import "./accordion.vars.scss";
+// @import "../../themes/functions.string";
+// @import "../../themes/mixins";
 
-// Accordion
+// Accordion: Common
 // --------------------------------------------------
 
 :host {
@@ -10,8 +11,6 @@
 
   width: 100%;
 
-  background-color: $accordion-background-color;
-
   overflow: hidden;
 
   /**
@@ -30,14 +29,6 @@
   --border-width: 0px;
 }
 
-:host(.accordion-animated) {
-  transition: all $accordion-transition-duration $accordion-transition-easing;
-}
-
-:host(.accordion-animated) #content {
-  transition: max-height $accordion-transition-duration $accordion-transition-easing;
-}
-
 #content {
   overflow: hidden;
 
@@ -72,16 +63,6 @@
   pointer-events: none;
 }
 
-/**
- * We do not set the opacity on the
- * host otherwise you would see the
- * box-shadow behind it.
- */
-:host(.accordion-disabled) #header,
-:host(.accordion-disabled) #content {
-  opacity: $accordion-disabled-opacity;
-}
-
 @media (prefers-reduced-motion: reduce) {
   :host,
   #content {
diff --git a/core/src/components/accordion/accordion.ionic.scss b/core/src/components/accordion/accordion.ionic.scss
new file mode 100644
index 0000000000..3423831e44
--- /dev/null
+++ b/core/src/components/accordion/accordion.ionic.scss
@@ -0,0 +1,81 @@
+@use "../../themes/ionic/ionic.globals.scss" as globals;
+@use "./accordion.common";
+
+// Ionic Accordion
+// --------------------------------------------------
+
+:host {
+  position: relative;
+}
+
+// The border is added to the ::after element
+// to properly inset the border relative to the entire
+// accordion, rather than just the header.
+:host::after {
+  @include globals.margin(null, globals.$ionic-space-400, null, globals.$ionic-space-400);
+  @include globals.position(null, 0, 0, 0);
+
+  display: block;
+
+  position: absolute;
+
+  height: globals.$ionic-border-size-025;
+
+  background-color: globals.$ionic-color-neutral-300;
+
+  content: "";
+
+  z-index: 3;
+}
+
+:host(.accordion-animated) {
+  transition: all 300ms cubic-bezier(0.25, 0.8, 0.5, 1);
+}
+
+:host(.accordion-animated) #content {
+  transition: max-height 300ms cubic-bezier(0.25, 0.8, 0.5, 1);
+}
+
+// Accordion Header
+// --------------------------------------------------
+
+// The border is removed from the item in the header because
+// we are adding a border to the ::after element of the accordion.
+::slotted(ion-item[slot="header"]) {
+  --border-radius: #{globals.$ionic-border-radius-0};
+  --color: #{globals.$ionic-color-neutral-1200};
+  --border-width: 0;
+  --inner-border-width: 0;
+  --min-height: #{globals.$ionic-scale-700};
+  --padding-top: #{globals.$ionic-space-300};
+  --padding-end: #{globals.$ionic-space-400};
+  --padding-bottom: #{globals.$ionic-space-300};
+  --padding-start: #{globals.$ionic-space-400};
+
+  @include globals.typography(globals.$ionic-heading-h6-medium);
+}
+
+// Shape only applies when inside an inset accordion group
+:host(.in-accordion-group-expand-inset) ::slotted(ion-item[slot="header"]) {
+  --border-radius: #{globals.$ionic-border-radius-400};
+}
+
+// Accordion Content
+// --------------------------------------------------
+
+#content {
+  @include globals.padding(null, globals.$ionic-space-400, globals.$ionic-space-300, globals.$ionic-space-400);
+  @include globals.typography(globals.$ionic-body-md-regular);
+
+  color: globals.$ionic-color-neutral-1000;
+}
+
+// Disabled Accordion
+// --------------------------------------------------
+
+:host(.accordion-disabled)::before {
+  @include globals.border-radius(inherit);
+  @include globals.disabled-state();
+
+  z-index: 2;
+}
diff --git a/core/src/components/accordion/accordion.ios.scss b/core/src/components/accordion/accordion.ios.scss
index 9c428be082..db92476ad5 100644
--- a/core/src/components/accordion/accordion.ios.scss
+++ b/core/src/components/accordion/accordion.ios.scss
@@ -1,4 +1,4 @@
-@import "./accordion.scss";
+@import "./accordion.native";
 @import "../item/item.ios.vars";
 
 // iOS Accordion
diff --git a/core/src/components/accordion/accordion.md.scss b/core/src/components/accordion/accordion.md.scss
index 391934629c..1898d79699 100644
--- a/core/src/components/accordion/accordion.md.scss
+++ b/core/src/components/accordion/accordion.md.scss
@@ -1,4 +1,4 @@
-@import "./accordion.scss";
+@import "./accordion.native";
 
 // Material Design Accordion
 // --------------------------------------------------
diff --git a/core/src/components/accordion/accordion.native.scss b/core/src/components/accordion/accordion.native.scss
new file mode 100644
index 0000000000..99f0bc4dad
--- /dev/null
+++ b/core/src/components/accordion/accordion.native.scss
@@ -0,0 +1,27 @@
+@import "./accordion.common";
+@import "./accordion.vars.scss";
+
+// Accordion: Native
+// --------------------------------------------------
+
+:host {
+  background-color: $accordion-background-color;
+}
+
+:host(.accordion-animated) {
+  transition: all $accordion-transition-duration $accordion-transition-easing;
+}
+
+:host(.accordion-animated) #content {
+  transition: max-height $accordion-transition-duration $accordion-transition-easing;
+}
+
+/**
+ * We do not set the opacity on the
+ * host otherwise you would see the
+ * box-shadow behind it.
+ */
+:host(.accordion-disabled) #header,
+:host(.accordion-disabled) #content {
+  opacity: $accordion-disabled-opacity;
+}
diff --git a/core/src/components/accordion/accordion.tsx b/core/src/components/accordion/accordion.tsx
index 604399e395..6321c58185 100644
--- a/core/src/components/accordion/accordion.tsx
+++ b/core/src/components/accordion/accordion.tsx
@@ -2,6 +2,7 @@ import caretDownRegular from '@phosphor-icons/core/assets/regular/caret-down.svg
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Element, Host, Prop, State, Watch, h } from '@stencil/core';
 import { addEventListener, getElementRoot, raf, removeEventListener, transitionEndAsync } from '@utils/helpers';
+import { hostContext } from '@utils/theme';
 import { chevronDown } from 'ionicons/icons';
 
 import { config } from '../../global/config';
@@ -33,7 +34,7 @@ const enum AccordionState {
   styleUrls: {
     ios: 'accordion.ios.scss',
     md: 'accordion.md.scss',
-    ionic: 'accordion.md.scss',
+    ionic: 'accordion.ionic.scss',
   },
   shadow: {
     delegatesFocus: true,
@@ -48,7 +49,7 @@ export class Accordion implements ComponentInterface {
 
   private currentRaf: number | undefined;
 
-  @Element() el?: HTMLElement;
+  @Element() el!: HTMLElement;
 
   @State() state: AccordionState = AccordionState.Collapsed;
   @State() isNext = false;
@@ -378,10 +379,6 @@ export class Accordion implements ComponentInterface {
   };
 
   private getNextSibling = () => {
-    if (!this.el) {
-      return;
-    }
-
     const nextSibling = this.el.nextElementSibling;
 
     if (nextSibling?.tagName !== 'ION-ACCORDION') {
@@ -392,10 +389,6 @@ export class Accordion implements ComponentInterface {
   };
 
   private getPreviousSibling = () => {
-    if (!this.el) {
-      return;
-    }
-
     const previousSibling = this.el.previousElementSibling;
 
     if (previousSibling?.tagName !== 'ION-ACCORDION') {
@@ -449,6 +442,8 @@ export class Accordion implements ComponentInterface {
           'accordion-readonly': readonly,
 
           'accordion-animated': this.shouldAnimate(),
+
+          'in-accordion-group-expand-inset': hostContext('.accordion-group-expand-inset', this.el),
         }}
       >
         <div
diff --git a/core/src/components/accordion/test/basic/accordion.e2e.ts b/core/src/components/accordion/test/basic/accordion.e2e.ts
index b1b855e979..a072ad25e2 100644
--- a/core/src/components/accordion/test/basic/accordion.e2e.ts
+++ b/core/src/components/accordion/test/basic/accordion.e2e.ts
@@ -12,6 +12,7 @@ configs().forEach(({ config, screenshot, title }) => {
     });
   });
 });
+
 configs({ directions: ['ltr'] }).forEach(({ config, title }) => {
   test.describe(title('accordion: ionChange'), () => {
     test.beforeEach(async ({ page }) => {
@@ -58,3 +59,39 @@ configs({ directions: ['ltr'] }).forEach(({ config, title }) => {
     });
   });
 });
+
+configs({ modes: ['ionic-md'] }).forEach(({ config, screenshot, title }) => {
+  test.describe(title('accordion: basic'), () => {
+    test('should not have visual regressions with text content', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-accordion-group value="first">
+          <ion-accordion value="first">
+            <ion-item slot="header">
+              <ion-label>Accordion title</ion-label>
+            </ion-item>
+            <div slot="content">This is the body of the accordion.</div>
+          </ion-accordion>
+          <ion-accordion value="second">
+            <ion-item slot="header">
+              <ion-label>Accordion title</ion-label>
+            </ion-item>
+            <div slot="content">This is the body of the accordion.</div>
+          </ion-accordion>
+          <ion-accordion value="third">
+            <ion-item slot="header">
+              <ion-label>Accordion title</ion-label>
+            </ion-item>
+            <div slot="content">This is the body of the accordion.</div>
+          </ion-accordion>
+        </ion-accordion-group>
+      `,
+        config
+      );
+
+      const accordion = page.locator('ion-accordion-group');
+
+      await expect(accordion).toHaveScreenshot(screenshot('accordion-basic-text'));
+    });
+  });
+});
diff --git a/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-text-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-text-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..41409e2bbc
Binary files /dev/null and b/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-text-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-text-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-text-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..a52824cf6b
Binary files /dev/null and b/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-text-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-text-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-text-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..189cfbe15e
Binary files /dev/null and b/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-text-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-text-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-text-ionic-md-rtl-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..2fc9c92c46
Binary files /dev/null and b/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-text-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-text-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-text-ionic-md-rtl-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..24cadf2a67
Binary files /dev/null and b/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-text-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-text-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-text-ionic-md-rtl-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..9d8eca3c34
Binary files /dev/null and b/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-text-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/accordion/test/multiple/accordion.e2e.ts b/core/src/components/accordion/test/multiple/accordion.e2e.ts
index 49c6e0ef58..d43b9fbd88 100644
--- a/core/src/components/accordion/test/multiple/accordion.e2e.ts
+++ b/core/src/components/accordion/test/multiple/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: ['ionic-md', 'md', 'ios'] }).forEach(({ config, screenshot, title }) => {
   test.describe(title('accordion: multiple'), () => {
     test('should update value and visually expand items', async ({ page }) => {
       await page.goto(`/src/components/accordion/test/multiple`, config);
diff --git a/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-one-open-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-one-open-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..9979664237
Binary files /dev/null and b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-one-open-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-one-open-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-one-open-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..06110121ac
Binary files /dev/null and b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-one-open-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-one-open-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-one-open-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..9581a4659f
Binary files /dev/null and b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-one-open-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-two-open-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-two-open-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..0ee4a92096
Binary files /dev/null and b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-two-open-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-two-open-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-two-open-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..3886a7fb52
Binary files /dev/null and b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-two-open-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-two-open-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-two-open-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..b85f2fc321
Binary files /dev/null and b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-two-open-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-zero-open-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-zero-open-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..e0587f8662
Binary files /dev/null and b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-zero-open-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-zero-open-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-zero-open-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..fb910a9f50
Binary files /dev/null and b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-zero-open-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-zero-open-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-zero-open-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..8799053047
Binary files /dev/null and b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-zero-open-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/accordion/test/states/accordion.e2e.ts b/core/src/components/accordion/test/states/accordion.e2e.ts
new file mode 100644
index 0000000000..0ed35b5931
--- /dev/null
+++ b/core/src/components/accordion/test/states/accordion.e2e.ts
@@ -0,0 +1,198 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screenshot, title }) => {
+  test.describe(title('accordion: states'), () => {
+    test('should render disabled state', async ({ page }) => {
+      await page.setContent(
+        `
+      <ion-accordion-group value="first">
+        <ion-accordion value="first" disabled="true">
+          <ion-item slot="header">
+            <ion-label>Accordion title</ion-label>
+          </ion-item>
+          <div slot="content">This is the body of the accordion.</div>
+        </ion-accordion>
+        <ion-accordion value="second">
+          <ion-item slot="header">
+            <ion-label>Accordion title</ion-label>
+          </ion-item>
+          <div slot="content">This is the body of the accordion.</div>
+        </ion-accordion>
+        <ion-accordion value="third">
+          <ion-item slot="header">
+            <ion-label>Accordion title</ion-label>
+          </ion-item>
+          <div slot="content">This is the body of the accordion.</div>
+        </ion-accordion>
+      </ion-accordion-group>
+    `,
+        config
+      );
+
+      const accordionGroup = page.locator('ion-accordion-group');
+
+      await expect(accordionGroup).toHaveScreenshot(screenshot('accordion-states-disabled'));
+    });
+
+    test('should render activated state', async ({ page }) => {
+      await page.setContent(
+        `
+      <ion-accordion-group value="first">
+        <ion-accordion value="first">
+          <ion-item slot="header" class="ion-activated">
+            <ion-label>Accordion title</ion-label>
+          </ion-item>
+          <div slot="content">This is the body of the accordion.</div>
+        </ion-accordion>
+        <ion-accordion value="second">
+          <ion-item slot="header">
+            <ion-label>Accordion title</ion-label>
+          </ion-item>
+          <div slot="content">This is the body of the accordion.</div>
+        </ion-accordion>
+        <ion-accordion value="third">
+          <ion-item slot="header">
+            <ion-label>Accordion title</ion-label>
+          </ion-item>
+          <div slot="content">This is the body of the accordion.</div>
+        </ion-accordion>
+      </ion-accordion-group>
+    `,
+        config
+      );
+
+      const accordionGroup = page.locator('ion-accordion-group');
+
+      await expect(accordionGroup).toHaveScreenshot(screenshot('accordion-states-activated'));
+    });
+
+    test('should render focused state', async ({ page }) => {
+      await page.setContent(
+        `
+      <ion-accordion-group value="first">
+        <ion-accordion value="first">
+          <ion-item slot="header" class="ion-focused">
+            <ion-label>Accordion title</ion-label>
+          </ion-item>
+          <div slot="content">This is the body of the accordion.</div>
+        </ion-accordion>
+        <ion-accordion value="second">
+          <ion-item slot="header">
+            <ion-label>Accordion title</ion-label>
+          </ion-item>
+          <div slot="content">This is the body of the accordion.</div>
+        </ion-accordion>
+        <ion-accordion value="third">
+          <ion-item slot="header">
+            <ion-label>Accordion title</ion-label>
+          </ion-item>
+          <div slot="content">This is the body of the accordion.</div>
+        </ion-accordion>
+      </ion-accordion-group>
+    `,
+        config
+      );
+
+      const accordionGroup = page.locator('ion-accordion-group');
+
+      await expect(accordionGroup).toHaveScreenshot(screenshot('accordion-states-focused'));
+    });
+
+    test('should render disabled state when group is inset', async ({ page }) => {
+      await page.setContent(
+        `
+      <ion-accordion-group value="first" expand="inset">
+        <ion-accordion value="first" disabled="true">
+          <ion-item slot="header">
+            <ion-label>Accordion title</ion-label>
+          </ion-item>
+          <div slot="content">This is the body of the accordion.</div>
+        </ion-accordion>
+        <ion-accordion value="second">
+          <ion-item slot="header">
+            <ion-label>Accordion title</ion-label>
+          </ion-item>
+          <div slot="content">This is the body of the accordion.</div>
+        </ion-accordion>
+        <ion-accordion value="third">
+          <ion-item slot="header">
+            <ion-label>Accordion title</ion-label>
+          </ion-item>
+          <div slot="content">This is the body of the accordion.</div>
+        </ion-accordion>
+      </ion-accordion-group>
+    `,
+        config
+      );
+
+      const accordionGroup = page.locator('ion-accordion-group');
+
+      await expect(accordionGroup).toHaveScreenshot(screenshot('accordion-states-inset-disabled'));
+    });
+
+    test('should render activated state when group is inset', async ({ page }) => {
+      await page.setContent(
+        `
+      <ion-accordion-group value="first" expand="inset">
+        <ion-accordion value="first">
+          <ion-item slot="header" class="ion-activated">
+            <ion-label>Accordion title</ion-label>
+          </ion-item>
+          <div slot="content">This is the body of the accordion.</div>
+        </ion-accordion>
+        <ion-accordion value="second">
+          <ion-item slot="header">
+            <ion-label>Accordion title</ion-label>
+          </ion-item>
+          <div slot="content">This is the body of the accordion.</div>
+        </ion-accordion>
+        <ion-accordion value="third">
+          <ion-item slot="header">
+            <ion-label>Accordion title</ion-label>
+          </ion-item>
+          <div slot="content">This is the body of the accordion.</div>
+        </ion-accordion>
+      </ion-accordion-group>
+    `,
+        config
+      );
+
+      const accordionGroup = page.locator('ion-accordion-group');
+
+      await expect(accordionGroup).toHaveScreenshot(screenshot('accordion-states-inset-activated'));
+    });
+
+    test('should render focused state when group is inset', async ({ page }) => {
+      await page.setContent(
+        `
+      <ion-accordion-group value="first" expand="inset">
+        <ion-accordion value="first">
+          <ion-item slot="header" class="ion-focused">
+            <ion-label>Accordion title</ion-label>
+          </ion-item>
+          <div slot="content">This is the body of the accordion.</div>
+        </ion-accordion>
+        <ion-accordion value="second">
+          <ion-item slot="header">
+            <ion-label>Accordion title</ion-label>
+          </ion-item>
+          <div slot="content">This is the body of the accordion.</div>
+        </ion-accordion>
+        <ion-accordion value="third">
+          <ion-item slot="header">
+            <ion-label>Accordion title</ion-label>
+          </ion-item>
+          <div slot="content">This is the body of the accordion.</div>
+        </ion-accordion>
+      </ion-accordion-group>
+    `,
+        config
+      );
+
+      const accordionGroup = page.locator('ion-accordion-group');
+
+      await expect(accordionGroup).toHaveScreenshot(screenshot('accordion-states-inset-focused'));
+    });
+  });
+});
diff --git a/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-activated-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-activated-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..78f98f9644
Binary files /dev/null and b/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-activated-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-activated-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-activated-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..6fea33f5d4
Binary files /dev/null and b/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-activated-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-activated-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-activated-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..8e2661520a
Binary files /dev/null and b/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-activated-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..71c7700d21
Binary files /dev/null and b/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..f13421fd7c
Binary files /dev/null and b/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..72a968c465
Binary files /dev/null and b/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..9062591742
Binary files /dev/null and b/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..c60124c80f
Binary files /dev/null and b/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-focused-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-focused-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..91c841d813
Binary files /dev/null and b/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-focused-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-inset-activated-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-inset-activated-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..f6b961a63f
Binary files /dev/null and b/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-inset-activated-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-inset-activated-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-inset-activated-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..256e78a9bb
Binary files /dev/null and b/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-inset-activated-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-inset-activated-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-inset-activated-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..9a1ed8e7ee
Binary files /dev/null and b/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-inset-activated-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-inset-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-inset-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..a00b621fbf
Binary files /dev/null and b/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-inset-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-inset-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-inset-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..b99924c13e
Binary files /dev/null and b/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-inset-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-inset-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-inset-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..dac83064b3
Binary files /dev/null and b/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-inset-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-inset-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-inset-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..8e087e54bb
Binary files /dev/null and b/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-inset-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-inset-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-inset-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..880e16966d
Binary files /dev/null and b/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-inset-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-inset-focused-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-inset-focused-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..1a95278c57
Binary files /dev/null and b/core/src/components/accordion/test/states/accordion.e2e.ts-snapshots/accordion-states-inset-focused-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/accordion/test/states/index.html b/core/src/components/accordion/test/states/index.html
new file mode 100644
index 0000000000..8fcc69360b
--- /dev/null
+++ b/core/src/components/accordion/test/states/index.html
@@ -0,0 +1,210 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Accordion - States</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+    <style>
+      .grid {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        grid-row-gap: 20px;
+        grid-column-gap: 20px;
+      }
+      h2 {
+        font-size: 12px;
+        font-weight: normal;
+
+        color: #6f7378;
+
+        margin-top: 10px;
+        margin-left: 5px;
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header translucent="true">
+        <ion-toolbar>
+          <ion-title>Accordion - States</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content fullscreen="true" color="light">
+        <div class="grid ion-padding">
+          <div class="grid-item">
+            <h2>Disabled</h2>
+            <ion-accordion value="first" disabled="true">
+              <ion-item slot="header">
+                <ion-label>Accordion title</ion-label>
+              </ion-item>
+              <div slot="content">This is the body of the accordion.</div>
+            </ion-accordion>
+          </div>
+          <div class="grid-item">
+            <h2>Pressed</h2>
+            <ion-accordion value="first">
+              <ion-item slot="header" class="ion-activated">
+                <ion-label>Accordion title</ion-label>
+              </ion-item>
+              <div slot="content">This is the body of the accordion.</div>
+            </ion-accordion>
+          </div>
+          <div class="grid-item">
+            <h2>Focused</h2>
+            <ion-accordion value="first">
+              <ion-item slot="header" class="ion-focused">
+                <ion-label>Accordion title</ion-label>
+              </ion-item>
+              <div slot="content">This is the body of the accordion.</div>
+            </ion-accordion>
+          </div>
+
+          <div class="grid-item">
+            <h2>Disabled</h2>
+            <ion-accordion-group value="first">
+              <ion-accordion value="first" disabled="true">
+                <ion-item slot="header">
+                  <ion-label>Accordion title</ion-label>
+                </ion-item>
+                <div slot="content">This is the body of the accordion.</div>
+              </ion-accordion>
+              <ion-accordion value="second">
+                <ion-item slot="header">
+                  <ion-label>Accordion title</ion-label>
+                </ion-item>
+                <div slot="content">This is the body of the accordion.</div>
+              </ion-accordion>
+              <ion-accordion value="third">
+                <ion-item slot="header">
+                  <ion-label>Accordion title</ion-label>
+                </ion-item>
+                <div slot="content">This is the body of the accordion.</div>
+              </ion-accordion>
+            </ion-accordion-group>
+          </div>
+          <div class="grid-item">
+            <h2>Pressed</h2>
+            <ion-accordion-group value="first">
+              <ion-accordion value="first">
+                <ion-item slot="header" class="ion-activated">
+                  <ion-label>Accordion title</ion-label>
+                </ion-item>
+                <div slot="content">This is the body of the accordion.</div>
+              </ion-accordion>
+              <ion-accordion value="second">
+                <ion-item slot="header">
+                  <ion-label>Accordion title</ion-label>
+                </ion-item>
+                <div slot="content">This is the body of the accordion.</div>
+              </ion-accordion>
+              <ion-accordion value="third">
+                <ion-item slot="header">
+                  <ion-label>Accordion title</ion-label>
+                </ion-item>
+                <div slot="content">This is the body of the accordion.</div>
+              </ion-accordion>
+            </ion-accordion-group>
+          </div>
+          <div class="grid-item">
+            <h2>Focused</h2>
+            <ion-accordion-group value="first">
+              <ion-accordion value="first">
+                <ion-item slot="header" class="ion-focused">
+                  <ion-label>Accordion title</ion-label>
+                </ion-item>
+                <div slot="content">This is the body of the accordion.</div>
+              </ion-accordion>
+              <ion-accordion value="second">
+                <ion-item slot="header">
+                  <ion-label>Accordion title</ion-label>
+                </ion-item>
+                <div slot="content">This is the body of the accordion.</div>
+              </ion-accordion>
+              <ion-accordion value="third">
+                <ion-item slot="header">
+                  <ion-label>Accordion title</ion-label>
+                </ion-item>
+                <div slot="content">This is the body of the accordion.</div>
+              </ion-accordion>
+            </ion-accordion-group>
+          </div>
+
+          <div class="grid-item">
+            <h2>Inset: Disabled</h2>
+            <ion-accordion-group value="first" expand="inset">
+              <ion-accordion value="first" disabled="true">
+                <ion-item slot="header">
+                  <ion-label>Accordion title</ion-label>
+                </ion-item>
+                <div slot="content">This is the body of the accordion.</div>
+              </ion-accordion>
+              <ion-accordion value="second">
+                <ion-item slot="header">
+                  <ion-label>Accordion title</ion-label>
+                </ion-item>
+                <div slot="content">This is the body of the accordion.</div>
+              </ion-accordion>
+              <ion-accordion value="third">
+                <ion-item slot="header">
+                  <ion-label>Accordion title</ion-label>
+                </ion-item>
+                <div slot="content">This is the body of the accordion.</div>
+              </ion-accordion>
+            </ion-accordion-group>
+          </div>
+          <div class="grid-item">
+            <h2>Inset: Pressed</h2>
+            <ion-accordion-group value="first" expand="inset">
+              <ion-accordion value="first">
+                <ion-item slot="header" class="ion-activated">
+                  <ion-label>Accordion title</ion-label>
+                </ion-item>
+                <div slot="content">This is the body of the accordion.</div>
+              </ion-accordion>
+              <ion-accordion value="second">
+                <ion-item slot="header">
+                  <ion-label>Accordion title</ion-label>
+                </ion-item>
+                <div slot="content">This is the body of the accordion.</div>
+              </ion-accordion>
+              <ion-accordion value="third">
+                <ion-item slot="header">
+                  <ion-label>Accordion title</ion-label>
+                </ion-item>
+                <div slot="content">This is the body of the accordion.</div>
+              </ion-accordion>
+            </ion-accordion-group>
+          </div>
+          <div class="grid-item">
+            <h2>Inset: Focused</h2>
+            <ion-accordion-group value="first" expand="inset">
+              <ion-accordion value="first">
+                <ion-item slot="header" class="ion-focused">
+                  <ion-label>Accordion title</ion-label>
+                </ion-item>
+                <div slot="content">This is the body of the accordion.</div>
+              </ion-accordion>
+              <ion-accordion value="second">
+                <ion-item slot="header">
+                  <ion-label>Accordion title</ion-label>
+                </ion-item>
+                <div slot="content">This is the body of the accordion.</div>
+              </ion-accordion>
+              <ion-accordion value="third">
+                <ion-item slot="header">
+                  <ion-label>Accordion title</ion-label>
+                </ion-item>
+                <div slot="content">This is the body of the accordion.</div>
+              </ion-accordion>
+            </ion-accordion-group>
+          </div>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/core/src/components/item/item.common.scss b/core/src/components/item/item.common.scss
index 991cc9d671..10cb8a048d 100644
--- a/core/src/components/item/item.common.scss
+++ b/core/src/components/item/item.common.scss
@@ -191,6 +191,8 @@
 
   background: var(--background);
 
+  line-height: inherit;
+
   overflow: inherit;
 
   z-index: 1;
diff --git a/core/src/components/item/item.ionic.scss b/core/src/components/item/item.ionic.scss
index 06c0e30902..211d21e913 100644
--- a/core/src/components/item/item.ionic.scss
+++ b/core/src/components/item/item.ionic.scss
@@ -83,6 +83,7 @@ slot[name="end"]::slotted(*) {
 }
 
 :host(.ion-focused) .item-native::after {
+  @include globals.border-radius(inherit);
   @include globals.position(0, 0, 0, 0);
 
   position: absolute;
diff --git a/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png
index d4eca3ff72..a8f2e98be3 100644
Binary files a/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png
index d37e7a5b96..b9570d1191 100644
Binary files a/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Safari-linux.png
index 0e4485f9c0..a39adb72e9 100644
Binary files a/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/css/ionic/core.ionic.scss b/core/src/css/ionic/core.ionic.scss
index 95071e1ec9..928291ee32 100644
--- a/core/src/css/ionic/core.ionic.scss
+++ b/core/src/css/ionic/core.ionic.scss
@@ -310,6 +310,13 @@ ion-accordion-group.accordion-group-expand-inset > ion-accordion:last-of-type {
   border-bottom-right-radius: globals.$ionic-border-radius-200;
 }
 
+// The toggle icon is nested in the accordion item so we need to
+// style it from a global level.
+ion-accordion > [slot="header"] .ion-accordion-toggle-icon {
+  color: globals.$ionic-color-neutral-1000;
+  font-size: globals.$ionic-scale-600;
+}
+
 ion-accordion.accordion-animated > [slot="header"] .ion-accordion-toggle-icon {
   transition: 300ms transform cubic-bezier(0.25, 0.8, 0.5, 1);
 }
@@ -331,6 +338,20 @@ ion-accordion.accordion-expanded > [slot="header"] .ion-accordion-toggle-icon {
   transform: rotate(180deg);
 }
 
+// Items inside of an accordion should have reduced padding
+// due to the padding added to the accordion content.
+ion-accordion > [slot="content"] ion-item {
+  @include globals.typography(globals.$ionic-body-md-regular);
+
+  color: globals.$ionic-color-neutral-1000;
+
+  --padding-start: 0;
+  --padding-top: #{globals.$ionic-space-300};
+  --padding-bottom: #{globals.$ionic-space-300};
+  --padding-end: 0;
+  --min-height: #{globals.$ionic-scale-700};
+}
+
 // Safari/iOS 15 changes the appearance of input[type="date"].
 // For backwards compatibility from Ionic 5/Safari 14 designs,
 // we override the appearance only when using within an ion-input.