fix(core): Textfield should not change color of chevron on hover if…

… `readOnly` is enabled (#8754)

projects/core/styles/components/textfield.less

@@ -102,8 +102,20 @@ tui-textfield {
         }
     }
 
+    /*
+    TODO: refactor to the following way after Chrome 105+ & Safari 15.4+
+    &:hover:has(input:not(:read-only)),
+    &:hover:has(select:not([data-mode='readonly'])) {
+        color: var(--tui-text-secondary);
+    }
+    */
     &:hover {
         color: var(--tui-text-secondary);
+
+        &:has(input:read-only),
+        &:has(select[data-mode='readonly']) {
+            color: var(--tui-text-tertiary);
+        }
     }
 
     &::before {

projects/demo-playwright/tests/core/textfield/textfield.spec.ts

@@ -0,0 +1,42 @@
+import {DemoRoute} from '@demo/routes';
+import {TuiDocumentationPagePO, tuiGoto} from '@demo-playwright/utils';
+import {expect, type Locator, test} from '@playwright/test';
+
+test.describe('Textfield', () => {
+    test.describe('interactivity on hover', () => {
+        let example!: Locator;
+
+        test.beforeEach(async ({page}) => {
+            await tuiGoto(page, DemoRoute.Textfield);
+            example = new TuiDocumentationPagePO(page).getExample('#states');
+        });
+
+        test('disable state', async () => {
+            const textfield = example.locator('tui-textfield:has(input:disabled)');
+
+            await textfield.hover({force: true});
+
+            await expect(example).toHaveScreenshot('textfield-disabled-hover.png');
+        });
+
+        test('readonly state', async () => {
+            const textfield = example.locator('tui-textfield:has(input:read-only)', {
+                hasText: 'Read-only',
+            });
+
+            await textfield.hover();
+
+            await expect(example).toHaveScreenshot('textfield-readonly-hover.png');
+        });
+
+        test('invalid state', async () => {
+            const textfield = example.locator('tui-textfield', {
+                hasText: 'Invalid',
+            });
+
+            await textfield.hover();
+
+            await expect(example).toHaveScreenshot('textfield-invalid-hover.png');
+        });
+    });
+});