diff --git a/packages/core/src/components/group-item/group-item.scss b/packages/core/src/components/group-item/group-item.scss
index d6fdd6c1f0e..24be8e61b3a 100644
--- a/packages/core/src/components/group-item/group-item.scss
+++ b/packages/core/src/components/group-item/group-item.scss
@@ -66,11 +66,21 @@
@include hover {
background-color: var(--theme-group-item--background--hover);
border-color: var(--theme-group-item--border-color--hover);
+
+ &.selected {
+ border-color: var(--theme-group-item--border-color--selected);
+ background-color: var(--theme-group-item--background--selected);
+ }
}
@include active {
background-color: var(--theme-group-item--background--active);
border-color: var(--theme-group-item--border-color--active);
+
+ &.selected {
+ border-color: var(--theme-group-item--border-color--selected);
+ background-color: var(--theme-group-item--background--selected);
+ }
}
}
diff --git a/packages/core/src/components/group/group.scss b/packages/core/src/components/group/group.scss
index 83d8ab6bf1f..00711bae0f9 100644
--- a/packages/core/src/components/group/group.scss
+++ b/packages/core/src/components/group/group.scss
@@ -36,11 +36,21 @@
@include hover {
background-color: var(--theme-group-item--background--hover);
border-color: var(--theme-group-item--border-color--hover);
+
+ &.selected {
+ border: var(--theme-primary-bdr-2);
+ background-color: var(--theme-group-item--background--selected);
+ }
}
@include active {
background-color: var(--theme-group-item--background--active);
border-color: var(--theme-group-item--border-color--active);
+
+ &.selected {
+ border: var(--theme-primary-bdr-2);
+ background-color: var(--theme-group-item--background--selected);
+ }
}
@include focus-visible {
diff --git a/packages/core/src/tests/group/basic/index.html b/packages/core/src/tests/group/basic/index.html
index 786a844c682..8fab7b69e6a 100644
--- a/packages/core/src/tests/group/basic/index.html
+++ b/packages/core/src/tests/group/basic/index.html
@@ -14,7 +14,7 @@
Stencil Component Starter
-
+
diff --git a/packages/core/src/tests/group/group.e2e.ts b/packages/core/src/tests/group/group.e2e.ts
index fe74c537270..39ea7598743 100644
--- a/packages/core/src/tests/group/group.e2e.ts
+++ b/packages/core/src/tests/group/group.e2e.ts
@@ -26,5 +26,21 @@ regressionTest.describe('group', () => {
});
});
+ regressionTest('selected', async ({ page }) => {
+ await page.goto('group/basic');
+ await page.click("[id='group']");
+ await page.hover("[id='group']");
+ expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
+ });
+
+ regressionTest('item selected', async ({ page }) => {
+ await page.goto('group/basic');
+ await page.locator('.btn-expand-header').click();
+ await page.locator('text=Example text 1').first().click();
+ await page.locator('text=Example text 1').first().hover();
+
+ expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
+ });
+
// ix-icon-button
});
diff --git a/packages/core/src/tests/group/group.e2e.ts-snapshots/group-item-selected-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/group/group.e2e.ts-snapshots/group-item-selected-1-chromium---theme-classic-dark-linux.png
new file mode 100644
index 00000000000..c679336d54d
Binary files /dev/null and b/packages/core/src/tests/group/group.e2e.ts-snapshots/group-item-selected-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/tests/group/group.e2e.ts-snapshots/group-item-selected-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/group/group.e2e.ts-snapshots/group-item-selected-1-chromium---theme-classic-light-linux.png
new file mode 100644
index 00000000000..f985ffe7fe9
Binary files /dev/null and b/packages/core/src/tests/group/group.e2e.ts-snapshots/group-item-selected-1-chromium---theme-classic-light-linux.png differ
diff --git a/packages/core/src/tests/group/group.e2e.ts-snapshots/group-selected-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/group/group.e2e.ts-snapshots/group-selected-1-chromium---theme-classic-dark-linux.png
new file mode 100644
index 00000000000..2782dabdfd1
Binary files /dev/null and b/packages/core/src/tests/group/group.e2e.ts-snapshots/group-selected-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/tests/group/group.e2e.ts-snapshots/group-selected-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/group/group.e2e.ts-snapshots/group-selected-1-chromium---theme-classic-light-linux.png
new file mode 100644
index 00000000000..9ea6b89fd57
Binary files /dev/null and b/packages/core/src/tests/group/group.e2e.ts-snapshots/group-selected-1-chromium---theme-classic-light-linux.png differ