diff --git a/core/src/components/accordion-group/accordion-group.common.scss b/core/src/components/accordion-group/accordion-group.common.scss
new file mode 100644
index 0000000000..510b0d85a6
--- /dev/null
+++ b/core/src/components/accordion-group/accordion-group.common.scss
@@ -0,0 +1,6 @@
+// Accordion Group: Common
+// --------------------------------------------------
+
+:host {
+ display: block;
+}
diff --git a/core/src/components/accordion-group/accordion-group.ionic.scss b/core/src/components/accordion-group/accordion-group.ionic.scss
new file mode 100644
index 0000000000..5ed4ffa3d1
--- /dev/null
+++ b/core/src/components/accordion-group/accordion-group.ionic.scss
@@ -0,0 +1,20 @@
+@use "../../themes/ionic/ionic.globals.scss" as globals;
+@use "./accordion-group.common";
+
+// Ionic Accordion Group
+// --------------------------------------------------
+
+:host {
+ min-width: 272px;
+
+ background-color: globals.$ionic-color-base-white;
+}
+
+// Inset Accordion Group
+// --------------------------------------------------
+
+// Shape and padding only apply if the group is inset
+:host(.accordion-group-expand-inset) {
+ @include globals.border-radius(globals.$ionic-border-radius-400);
+ @include globals.padding(globals.$ionic-space-100);
+}
diff --git a/core/src/components/accordion-group/accordion-group.ios.scss b/core/src/components/accordion-group/accordion-group.ios.scss
index fdf32c14a7..c47bf8d6cb 100644
--- a/core/src/components/accordion-group/accordion-group.ios.scss
+++ b/core/src/components/accordion-group/accordion-group.ios.scss
@@ -1,4 +1,4 @@
-@import "./accordion-group";
+@import "./accordion-group.native";
// iOS Accordion Group
// --------------------------------------------------
diff --git a/core/src/components/accordion-group/accordion-group.md.scss b/core/src/components/accordion-group/accordion-group.md.scss
index 5a3e0cef12..cafa0f087b 100644
--- a/core/src/components/accordion-group/accordion-group.md.scss
+++ b/core/src/components/accordion-group/accordion-group.md.scss
@@ -1,4 +1,4 @@
-@import "./accordion-group";
+@import "./accordion-group.native";
@import "../accordion/accordion.md.vars";
// Material Design Accordion Group
diff --git a/core/src/components/accordion-group/accordion-group.scss b/core/src/components/accordion-group/accordion-group.native.scss
similarity index 82%
rename from core/src/components/accordion-group/accordion-group.scss
rename to core/src/components/accordion-group/accordion-group.native.scss
index b02c96ad71..b34175d933 100644
--- a/core/src/components/accordion-group/accordion-group.scss
+++ b/core/src/components/accordion-group/accordion-group.native.scss
@@ -1,13 +1,10 @@
+@import "./accordion-group.common";
@import "../../themes/native/native.globals";
@import "../accordion/accordion.vars";
-// Accordion Group
+// Accordion Group: Native
// --------------------------------------------------
-:host {
- display: block;
-}
-
:host(.accordion-group-expand-inset) {
@include margin($accordion-inset-margin, $accordion-inset-margin, $accordion-inset-margin, $accordion-inset-margin);
}
diff --git a/core/src/components/accordion-group/accordion-group.tsx b/core/src/components/accordion-group/accordion-group.tsx
index 556b08993c..1e2caedb02 100644
--- a/core/src/components/accordion-group/accordion-group.tsx
+++ b/core/src/components/accordion-group/accordion-group.tsx
@@ -15,7 +15,7 @@ import type { AccordionGroupChangeEventDetail } from './accordion-group-interfac
styleUrls: {
ios: 'accordion-group.ios.scss',
md: 'accordion-group.md.scss',
- ionic: 'accordion-group.md.scss',
+ ionic: 'accordion-group.ionic.scss',
},
shadow: true,
})
diff --git a/core/src/components/accordion-group/test/expand/accordion.e2e.ts b/core/src/components/accordion-group/test/expand/accordion.e2e.ts
new file mode 100644
index 0000000000..a79d5dd438
--- /dev/null
+++ b/core/src/components/accordion-group/test/expand/accordion.e2e.ts
@@ -0,0 +1,162 @@
+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-group: expand'), () => {
+ test.describe(title('compact'), () => {
+ test('should not have visual regressions', async ({ page }) => {
+ await page.setContent(
+ `
+
+
+
+
+ Accordion title
+
+ This is the body of the accordion.
+
+
+
+ Accordion title
+
+ This is the body of the accordion.
+
+
+
+ Accordion title
+
+ This is the body of the accordion.
+
+
+ `,
+ config
+ );
+
+ const accordionGroup = page.locator('ion-accordion-group');
+
+ await expect(accordionGroup).toHaveScreenshot(screenshot('accordion-group-expand-compact'));
+ });
+
+ test('should not have visual regressions when expanded', async ({ page }) => {
+ await page.setContent(
+ `
+
+
+
+
+ Accordion title
+
+ This is the body of the accordion.
+
+
+
+ Accordion title
+
+ This is the body of the accordion.
+
+
+
+ Accordion title
+
+ This is the body of the accordion.
+
+
+ `,
+ config
+ );
+
+ const accordionGroup = page.locator('ion-accordion-group');
+
+ await expect(accordionGroup).toHaveScreenshot(screenshot('accordion-group-expand-compact-expanded'));
+ });
+ });
+
+ test.describe(title('inset'), () => {
+ test('should not have visual regressions', async ({ page }) => {
+ await page.setContent(
+ `
+
+
+
+
+ Accordion title
+
+ This is the body of the accordion.
+
+
+
+ Accordion title
+
+ This is the body of the accordion.
+
+
+
+ Accordion title
+
+ This is the body of the accordion.
+
+
+ `,
+ config
+ );
+
+ const accordionGroup = page.locator('ion-accordion-group');
+
+ await expect(accordionGroup).toHaveScreenshot(screenshot('accordion-group-expand-inset'));
+ });
+
+ test('should not have visual regressions when expanded', async ({ page }) => {
+ await page.setContent(
+ `
+
+
+
+
+ Accordion title
+
+ This is the body of the accordion.
+
+
+
+ Accordion title
+
+ This is the body of the accordion.
+
+
+
+ Accordion title
+
+ This is the body of the accordion.
+
+
+ `,
+ config
+ );
+
+ const accordionGroup = page.locator('ion-accordion-group');
+
+ await expect(accordionGroup).toHaveScreenshot(screenshot('accordion-group-expand-inset-expanded'));
+ });
+ });
+ });
+});
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
new file mode 100644
index 0000000000..a7f2a9a2ba
Binary files /dev/null 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
new file mode 100644
index 0000000000..2e434897c7
Binary files /dev/null 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
new file mode 100644
index 0000000000..e76429954b
Binary files /dev/null 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
new file mode 100644
index 0000000000..4592d9ccbd
Binary files /dev/null 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
new file mode 100644
index 0000000000..646b1b6d87
Binary files /dev/null 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
new file mode 100644
index 0000000000..8df1e6f8da
Binary files /dev/null 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
new file mode 100644
index 0000000000..0e2ac1bdb8
Binary files /dev/null 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
new file mode 100644
index 0000000000..7473b53a15
Binary files /dev/null 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
new file mode 100644
index 0000000000..88bdb9fc62
Binary files /dev/null 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
new file mode 100644
index 0000000000..6994cf20dc
Binary files /dev/null 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
new file mode 100644
index 0000000000..b91457f2c0
Binary files /dev/null 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
new file mode 100644
index 0000000000..d7d7bd4c18
Binary files /dev/null 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/expand/index.html b/core/src/components/accordion-group/test/expand/index.html
new file mode 100644
index 0000000000..4b1e30b29c
--- /dev/null
+++ b/core/src/components/accordion-group/test/expand/index.html
@@ -0,0 +1,135 @@
+
+
+
+
+ Accordion Group - Expand
+
+
+
+
+
+
+
+
+
+
+
+
+ Accordion Group - Expand
+
+
+
+
+
+
Default
+
+
+
+ Accordion title
+
+ This is the body of the accordion.
+
+
+
+ Accordion title
+
+ This is the body of the accordion.
+
+
+
+ Accordion title
+
+ This is the body of the accordion.
+
+
+
+
+
Default: Expanded
+
+
+
+ Accordion title
+
+ This is the body of the accordion.
+
+
+
+ Accordion title
+
+ This is the body of the accordion.
+
+
+
+ Accordion title
+
+ This is the body of the accordion.
+
+
+
+
+
Inset
+
+
+
+ Accordion title
+
+ This is the body of the accordion.
+
+
+
+ Accordion title
+
+ This is the body of the accordion.
+
+
+
+ Accordion title
+
+ This is the body of the accordion.
+
+
+
+
+
Inset: Expanded
+
+
+
+ Accordion title
+
+ This is the body of the accordion.
+
+
+
+ Accordion title
+
+ This is the body of the accordion.
+
+
+
+ Accordion title
+
+ This is the body of the accordion.
+
+
+
+
+
+
+
+
diff --git a/core/src/components/accordion-group/test/states/accordion.e2e.ts b/core/src/components/accordion-group/test/states/accordion.e2e.ts
new file mode 100644
index 0000000000..4a64227331
--- /dev/null
+++ b/core/src/components/accordion-group/test/states/accordion.e2e.ts
@@ -0,0 +1,38 @@
+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-group: states'), () => {
+ test('should render disabled state', async ({ page }) => {
+ await page.setContent(
+ `
+
+
+
+ Accordion title
+
+ This is the body of the accordion.
+
+
+
+ Accordion title
+
+ This is the body of the accordion.
+
+
+
+ Accordion title
+
+ This is the body of the accordion.
+
+
+ `,
+ config
+ );
+
+ const accordionGroup = page.locator('ion-accordion-group');
+
+ await expect(accordionGroup).toHaveScreenshot(screenshot('accordion-group-disabled'));
+ });
+ });
+});
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
new file mode 100644
index 0000000000..7dd8e10044
Binary files /dev/null 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
new file mode 100644
index 0000000000..66f2278979
Binary files /dev/null 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
new file mode 100644
index 0000000000..011d3ac2c9
Binary files /dev/null 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-group/test/states/index.html b/core/src/components/accordion-group/test/states/index.html
new file mode 100644
index 0000000000..5045868ca7
--- /dev/null
+++ b/core/src/components/accordion-group/test/states/index.html
@@ -0,0 +1,89 @@
+
+
+
+
+ Accordion Group - States
+
+
+
+
+
+
+
+
+
+
+
+
+ Accordion Group - States
+
+
+
+
+
+
Default
+
+
+
+ Accordion title
+
+ This is the body of the accordion.
+
+
+
+ Accordion title
+
+ This is the body of the accordion.
+
+
+
+ Accordion title
+
+ This is the body of the accordion.
+
+
+
+
+
Disabled
+
+
+
+ Accordion title
+
+ This is the body of the accordion.
+
+
+
+ Accordion title
+
+ This is the body of the accordion.
+
+
+
+ Accordion title
+
+ This is the body of the accordion.
+
+
+
+
+
+
+
+
diff --git a/core/src/css/ionic/core.ionic.scss b/core/src/css/ionic/core.ionic.scss
index a95cff2717..95071e1ec9 100644
--- a/core/src/css/ionic/core.ionic.scss
+++ b/core/src/css/ionic/core.ionic.scss
@@ -309,9 +309,6 @@ ion-accordion-group.accordion-group-expand-inset > ion-accordion:last-of-type {
border-bottom-left-radius: globals.$ionic-border-radius-200;
border-bottom-right-radius: globals.$ionic-border-radius-200;
}
-ion-accordion-group > ion-accordion:last-of-type ion-item[slot="header"] {
- --border-width: 0;
-}
ion-accordion.accordion-animated > [slot="header"] .ion-accordion-toggle-icon {
transition: 300ms transform cubic-bezier(0.25, 0.8, 0.5, 1);
@@ -334,16 +331,6 @@ ion-accordion.accordion-expanded > [slot="header"] .ion-accordion-toggle-icon {
transform: rotate(180deg);
}
-ion-accordion-group.accordion-group-expand-inset.md > ion-accordion.accordion-previous ion-item[slot="header"] {
- --border-width: 0;
- --inner-border-width: 0;
-}
-
-ion-accordion-group.accordion-group-expand-inset.md > ion-accordion.accordion-expanding:first-of-type,
-ion-accordion-group.accordion-group-expand-inset.md > ion-accordion.accordion-expanded:first-of-type {
- margin-top: 0;
-}
-
// 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.