fix(item): counter has appropriate contrast (#25266)

resolves #25262

core/src/components/item/item.md.scss

@@ -476,7 +476,5 @@
 // --------------------------------------------------
 
 .item-counter {
-  color: #{$item-md-input-counter-color};
-
   letter-spacing: #{$item-md-input-counter-letter-spacing};
 }

core/src/components/item/item.scss

@@ -539,9 +539,11 @@ ion-ripple-effect {
 .item-counter {
   @include margin-horizontal(auto, null);
 
-  padding-inline-start: 16px;
+  color: #{$background-color-step-550};
 
   white-space: nowrap;
+
+  padding-inline-start: 16px;
 }
 
 // Item: Reduced Motion

core/src/components/item/test/counter/e2e.ts

@@ -2,15 +2,6 @@ import type { E2EPage } from '@stencil/core/testing';
 import { newE2EPage } from '@stencil/core/testing';
 
 describe('item: counter', () => {
-  it('should match existing visual screenshots', async () => {
-    const page = await newE2EPage({
-      url: '/src/components/item/test/counter?ionic:_testing=true',
-    });
-
-    const compare = await page.compareScreenshot();
-    expect(compare).toMatchScreenshot();
-  });
-
   describe('custom formatter', () => {
     let page: E2EPage;
 

core/src/components/item/test/counter/item.e2e.ts

@@ -0,0 +1,12 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('item: counter', () => {
+  test('should not have visual regressions', async ({ page }) => {
+    await page.goto(`/src/components/item/test/counter`);
+
+    await page.setIonViewport();
+
+    expect(await page.screenshot()).toMatchSnapshot(`item-counter-diff-${page.getSnapshotSettings()}.png`);
+  });
+});