[UIK-3527][color-picker] fixed some color-picker issues (#2547)

<!--- Provide a general summary of your changes in the Title above -->

## Motivation and Context
Fixed UIK-3526, UIK-3527 and UIK-2865
<!--- Why is this change required? What problem does it solve? -->
<!--- If it fixes an open issue, please link to the issue here. -->

## How has this been tested?
Manually
<!--- Please describe in detail how you tested your changes. -->
<!--- For example: -->
<!--- I have added unit tests -->
<!--- I have added Voice Over tests -->
<!--- Code cannot be tested automatically so I have tested it only
manually -->

## Screenshots (if appropriate):

## Types of changes

<!--- What types of changes does your code introduce? Put an `x` in all
the boxes that apply: -->

- [X] Bug fix (non-breaking change which fixes an issue).
- [ ] New feature (non-breaking change which adds functionality).
- [ ] Breaking change (fix or feature that would cause existing
functionality to not work as expected).
- [ ] Nice improve.

## Checklist:

<!--- Go over all the following points, and put an `x` in all the boxes
that apply. -->
<!--- If you're unsure about any of these, don't hesitate to ask. We're
here to help! -->

- [ ] I have updated the documentation accordingly.
- [X] I have added changelog note to corresponding `CHANGELOG.md` file
with planned publish date.
- [ ] I have added new tests on added of fixed functionality.

---------

Signed-off-by: ilyabrower <[email protected]>
Co-authored-by: Valeria-Zimnitskaya <[email protected]>

Author: ilyabrower

semcore/color-picker/CHANGELOG.md

@@ -2,12 +2,14 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
-
 ## [16.1.12] - 2025-11-10
 
 ### Fixed
 
 - Issue with `svg` in `ColorPicker.Trigger` and `ColorPicker.Item`.
+- `size` property didn't apply for the `PaletteManager.InputColor`.
+- Incorrect types for `PaletteManager`.
+- Validation issues in `PaletteManager.InputColor`.
 
 ## [16.1.11] - 2025-10-29
 

semcore/color-picker/__tests__/color-picker.axe-test.tsx

@@ -38,7 +38,7 @@ test.describe(`@color-picker ${TAG.ACCESSIBILITY}`, () => {
   });
 
   test('Input validation', async ({ page }) => {
-    await loadPage(page, 'stories/components/color-picker/docs/examples/input_validation.tsx', 'en');
+    await loadPage(page, 'stories/components/color-picker/tests/examples/input_validation.tsx', 'en');
 
     await page.locator('[data-ui-name="ColorPicker.Trigger"]').click();
     const input = page.locator('input[data-ui-name="PaletteManager.InputColor"]');

semcore/color-picker/__tests__/color-picker.browser-test.tsx

@@ -596,7 +596,7 @@ test.describe(`${TAG.FUNCTIONAL}`, () => {
     await locators.clearColor(page).click();
     await expect(locators.inputColor(page)).toBeFocused();
     await expect(locators.palette(page)).toBeEmpty();
-    await expect(locators.inputColor(page)).toHaveAttribute('aria-invalid', 'true');
+    await expect(locators.inputColor(page)).toHaveAttribute('aria-invalid', 'false');
     await expect(locators.inputColor(page)).toBeEmpty();
 
     await locators.inputColor(page).fill('999');

semcore/color-picker/__tests__/color-picker.browser-test.tsx-snapshots/-visual-Verify-ColorPicker-Item-PaletteManager-Item-and-ColorPicker-Input-1-chromium-linux.png

@@ -3,6 +3,7 @@ import { Box } from '@semcore/flex-box';
 import CheckM from '@semcore/icon/Check/m';
 import CloseM from '@semcore/icon/Close/m';
 import Input from '@semcore/input';
+import type { InputSize } from '@semcore/input';
 import React from 'react';
 
 import style from '../style/color-picker.shadow.css';
@@ -18,6 +19,7 @@ type InputColorAsProps = {
   focus?: boolean;
   Children: any;
   getI18nText: (messageId: string, values?: { [key: string]: string | number }) => string;
+  size?: InputSize;
 };
 
 function isValidHex(hex: string) {
@@ -69,6 +71,7 @@ class InputColorRoot extends Component<InputColorAsProps> {
 
   handlerCancel = (event: React.MouseEvent) => {
     this.handlers.value('', event);
+    this.handlers.state('normal');
   };
 
   handlerChange = debounce((value: string) => {
@@ -91,7 +94,7 @@ class InputColorRoot extends Component<InputColorAsProps> {
   };
 
   render() {
-    const { styles, state, value, onFocus, onBlur, focus, getI18nText } = this.asProps;
+    const { styles, state, value, onFocus, onBlur, focus, getI18nText, size } = this.asProps;
 
     const SPaletteManager = Box;
     const SInputValue = Root;
@@ -108,7 +111,7 @@ class InputColorRoot extends Component<InputColorAsProps> {
         <SInputContainer>
           <span aria-hidden='true'>#</span>
           <SInput>
-            <Input ml={1} w={135} state={state} onKeyDown={this.handlekeyDown}>
+            <Input ml={1} w={135} state={state} size={size} onKeyDown={this.handlekeyDown}>
               <SInputValue
                 render={Input.Value}
                 placeholder='FFFFFF'