From cb79b7f38c26fbfa1531d4d6fa5ed63e4e42315b Mon Sep 17 00:00:00 2001
From: "a.kiselev" <a.kiselev@evotor.ru>
Date: Fri, 7 Nov 2025 13:27:31 +0300
Subject: [PATCH 1/3] feat(evo-chip): updated styles

---
 .../evo-chip/evo-chip.component.html          |  52 ++-
 .../evo-chip/evo-chip.component.spec.ts       |  24 ++
 .../components/evo-chip/evo-chip.component.ts |  71 ++--
 .../src/lib/styles/components/evo-chip.scss   | 317 +++++++-------
 src/stories/components/evo-chip.stories.ts    | 399 ++++++++++++++----
 5 files changed, 540 insertions(+), 323 deletions(-)

diff --git a/projects/evo-ui-kit/src/lib/components/evo-chip/evo-chip.component.html b/projects/evo-ui-kit/src/lib/components/evo-chip/evo-chip.component.html
index abd40aa77..c4829061d 100644
--- a/projects/evo-ui-kit/src/lib/components/evo-chip/evo-chip.component.html
+++ b/projects/evo-ui-kit/src/lib/components/evo-chip/evo-chip.component.html
@@ -1,49 +1,47 @@
 <label class="chip" [evoUiClass]="classes">
     @switch (type) {
-        @case (templateVariables?.chipTypes.checkbox) {
+        @case (EvoChipType.checkbox) {
             <input
-                type="checkbox"
-                [disabled]="disabled"
-                [ngModel]="value"
-                [value]="inheritedValue"
-                [name]="name"
-                (ngModelChange)="onInputChange($event)"
+                    type="checkbox"
+                    class="chip__input"
+                    [disabled]="disabled"
+                    [name]="name"
+                    [ngModel]="value"
+                    [value]="inheritedValue"
+                    (ngModelChange)="onInputChange($event)"
             />
         }
-        @case (templateVariables?.chipTypes.radio) {
+        @case (EvoChipType.radio) {
             <input
-                type="radio"
-                [disabled]="disabled"
-                [ngModel]="value"
-                [value]="inheritedValue"
-                [name]="name"
-                (ngModelChange)="onInputChange($event)"
+                    type="radio"
+                    class="chip__input"
+                    [disabled]="disabled"
+                    [name]="name"
+                    [ngModel]="value"
+                    [value]="inheritedValue"
+                    (ngModelChange)="onInputChange($event)"
             />
         }
     }
 
-    <div class="chip__label" [evoUiClass]="{disabled: disabled}">
+    <div class="chip__label" [evoUiClass]="{'disabled': disabled}">
         <span class="chip__text">
             <ng-content />
         </span>
 
-        @if ((type !== templateVariables?.chipTypes.label || !closable) && counter !== undefined) {
-            <div class="chip__counter">
-                <span class="chip__counter-value">
-                    {{ counter }}
-                </span>
-            </div>
+        @if (hasCounter) {
+            <div class="chip__counter">{{ counter }}</div>
         }
 
         @if (closable) {
             <button
-                type="button"
-                class="chip__close"
-                [disabled]="disabled"
-                [title]="closeTitle"
-                (click)="onCloseClick($event)"
+                    type="button"
+                    class="chip__close"
+                    [disabled]="disabled"
+                    [title]="closeTitle"
+                    (click)="onCloseClick($event)"
             >
-                <evo-icon shape="decline" />
+                <evo-icon shape="close" class="chip__close-icon" />
             </button>
         }
     </div>
diff --git a/projects/evo-ui-kit/src/lib/components/evo-chip/evo-chip.component.spec.ts b/projects/evo-ui-kit/src/lib/components/evo-chip/evo-chip.component.spec.ts
index e352cdeb5..7c47e76c6 100644
--- a/projects/evo-ui-kit/src/lib/components/evo-chip/evo-chip.component.spec.ts
+++ b/projects/evo-ui-kit/src/lib/components/evo-chip/evo-chip.component.spec.ts
@@ -136,6 +136,30 @@ describe('EvoChipsComponent', () => {
         expect(chipWrapperElement).toHaveClass('chip_theme-grey');
     });
 
+    it('should have class chip_size-normal when size is not passed', () => {
+        createHostByTemplate(`
+            <evo-chip theme="grey" name="myChip" value="1">Chip 1</evo-chip>
+        `);
+        const chipWrapperElement = host.hostFixture.nativeElement.querySelector('evo-chip .chip');
+        expect(chipWrapperElement).toHaveClass('chip_size-normal');
+    });
+
+    it('should have class chip_size-normal when size=normal is passed', () => {
+        createHostByTemplate(`
+            <evo-chip theme="grey" size="normal" name="myChip" value="1">Chip 1</evo-chip>
+        `);
+        const chipWrapperElement = host.hostFixture.nativeElement.querySelector('evo-chip .chip');
+        expect(chipWrapperElement).toHaveClass('chip_size-normal');
+    });
+
+    it('should have class chip_size-large when size=large is passed', () => {
+        createHostByTemplate(`
+            <evo-chip theme="grey" size="large" name="myChip" value="1">Chip 1</evo-chip>
+        `);
+        const chipWrapperElement = host.hostFixture.nativeElement.querySelector('evo-chip .chip');
+        expect(chipWrapperElement).toHaveClass('chip_size-large');
+    });
+
     it('should be disabled and non-clickable if disabled param is passed', fakeAsync(() => {
         createHostByTemplate(`
             <evo-chip theme="grey" name="myChip" value="1">ENABLED</evo-chip>
diff --git a/projects/evo-ui-kit/src/lib/components/evo-chip/evo-chip.component.ts b/projects/evo-ui-kit/src/lib/components/evo-chip/evo-chip.component.ts
index 12a6bcd3a..52477cd5e 100644
--- a/projects/evo-ui-kit/src/lib/components/evo-chip/evo-chip.component.ts
+++ b/projects/evo-ui-kit/src/lib/components/evo-chip/evo-chip.component.ts
@@ -1,22 +1,20 @@
 import {
     AfterViewInit,
+    ChangeDetectionStrategy,
     ChangeDetectorRef,
-    Component,
-    DestroyRef,
+    Component, DestroyRef,
     EventEmitter,
-    forwardRef,
-    inject,
+    forwardRef, inject,
     Injector,
     Input,
-    OnInit,
     Output,
 } from '@angular/core';
-import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 import {ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR} from '@angular/forms';
 import {EvoBaseControl} from '../../common/evo-base-control';
 import {EvoControlStates} from '../../common/evo-control-state-manager/evo-control-states.enum';
 import {EvoUiClassDirective} from '../../directives';
 import {EvoIconComponent} from '../evo-icon';
+import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 
 export enum EvoChipType {
     radio = 'radio', // default
@@ -27,9 +25,10 @@ export enum EvoChipType {
 export enum EvoChipTheme {
     grey = 'grey', // default
     white = 'white',
-    custom = 'custom',
 }
 
+export type EvoChipSize = 'normal' | 'large';
+
 @Component({
     selector: 'evo-chip',
     templateUrl: 'evo-chip.component.html',
@@ -43,55 +42,56 @@ export enum EvoChipTheme {
     ],
     standalone: true,
     imports: [EvoUiClassDirective, FormsModule, EvoIconComponent],
+    changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class EvoChipComponent extends EvoBaseControl implements ControlValueAccessor, OnInit, AfterViewInit {
-    @Input() type: EvoChipType | string;
-    @Input() theme: EvoChipTheme | string;
+export class EvoChipComponent extends EvoBaseControl implements ControlValueAccessor, AfterViewInit {
+    @Input() type: EvoChipType | string = EvoChipType.radio;
+    @Input() theme: EvoChipTheme | string = EvoChipTheme.grey;
+    @Input() size: EvoChipSize = 'normal';
     @Input() counter: number;
     @Input() disabled: boolean;
     @Input() name: string;
     @Input() closable: boolean;
     @Input() closeTitle = '';
 
-    // eslint-disable-next-line
-    @Input('value') set setInitialValue(value: any) {
-        this.inheritedValue = value;
-    }
-
+    // eslint-disable-next-line @angular-eslint/no-output-native
     @Output() close = new EventEmitter<Event>();
 
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    readonly EvoChipType = EvoChipType;
+
     // eslint-disable-next-line
     inheritedValue: any;
     // eslint-disable-next-line
     value: any;
 
-    templateVariables = {
-        chipTypes: EvoChipType,
-        chipThemes: EvoChipTheme,
-    };
-
     private readonly destroyRef = inject(DestroyRef);
     private readonly cdr = inject(ChangeDetectorRef);
 
+    // eslint-disable-next-line
+    @Input('value') set setInitialValue(value: any) {
+        this.inheritedValue = value;
+    }
+
     get classes(): string[] {
         const states = {
             touched: this.control?.touched,
             valid: this.currentState[EvoControlStates.valid],
             invalid: this.currentState[EvoControlStates.invalid],
-            disabled: this.control?.disabled,
+            disabled: this.disabled,
         };
 
         const result = Object.keys(states).filter((key: string) => states[key]);
 
         result.push(`theme-${this.theme || EvoChipTheme.grey}`);
-
-        result.push(`type-${this.type}`);
+        result.push(`type-${this.type || EvoChipType.radio}`);
+        result.push(`size-${this.size || 'normal'}`);
 
         return result;
     }
 
-    ngOnInit(): void {
-        this.initDefaultParams();
+    get hasCounter(): boolean {
+        return (this.type !== EvoChipType.label || !this.closable) && this.counter !== undefined;
     }
 
     ngAfterViewInit(): void {
@@ -109,19 +109,14 @@ export class EvoChipComponent extends EvoBaseControl implements ControlValueAcce
     }
 
     // eslint-disable-next-line
-    registerOnChange(fn: any): void {
+    registerOnChange(fn: (_: any) => void): void {
         this.onChange = fn;
     }
 
-    // eslint-disable-next-line
-    registerOnTouched(fn: any): void {
+    registerOnTouched(fn: () => void): void {
         this.onTouched = fn;
     }
 
-    // eslint-disable-next-line
-    onChange = (_value: any): void => {};
-    onTouched = (): void => {};
-
     setDisabledState(state: boolean): void {
         this.disabled = state;
         this.cdr.markForCheck();
@@ -139,12 +134,8 @@ export class EvoChipComponent extends EvoBaseControl implements ControlValueAcce
         this.close.emit(e);
     }
 
-    private initDefaultParams(): void {
-        if (!this.type) {
-            this.type = EvoChipType.radio;
-        }
-        if (!this.theme) {
-            this.theme = EvoChipTheme.grey;
-        }
-    }
+    // eslint-disable-next-line
+    onChange(_value: any): void {}
+
+    onTouched(): void {}
 }
diff --git a/projects/evo-ui-kit/src/lib/styles/components/evo-chip.scss b/projects/evo-ui-kit/src/lib/styles/components/evo-chip.scss
index e2d268f90..6fe8ed623 100644
--- a/projects/evo-ui-kit/src/lib/styles/components/evo-chip.scss
+++ b/projects/evo-ui-kit/src/lib/styles/components/evo-chip.scss
@@ -1,207 +1,178 @@
-@use 'sass:math';
-@import '../mixins.scss';
+@use '../mixins.scss';
+
+:host {
+  --evo-chip-color: #{mixins.$color-link};
+  --evo-chip-color-hover: #{mixins.$color-link-hover};
+  --evo-chip-color-active: #{mixins.$color-link-active};
+
+  --evo-chip-background-color: #{mixins.$color-background-grey};
+  --evo-chip-background-color-hover: #{mix(mixins.$color-white, mixins.$color-background-grey, 20%)};
+  --evo-chip-background-color-active: #{mix(mixins.$color-black, mixins.$color-background-grey, 10%)};
+
+  --evo-chip-checked-color: #{mixins.$color-white};
+  --evo-chip-checked-color-hover: #{mixins.$color-white};
+  --evo-chip-checked-color-active: #{mixins.$color-white};
+
+  --evo-chip-checked-background-color: #{mixins.$color-link};
+  --evo-chip-checked-background-color-hover: #{mixins.$color-link-hover};
+  --evo-chip-checked-background-color-active: #{mixins.$color-link-active};
+}
 
 .chip {
-    $height: 32px;
-    $parent-selector: &;
-    position: relative;
-    display: inline-flex;
-    max-width: 100%;
+  $root: &;
 
-    &__label {
-        display: flex;
-        align-items: center;
+  --evo-chip-height: 32px;
+  --evo-chip-padding: 4px 8px;
 
-        max-width: inherit;
-        height: $height;
-        margin: 0;
-        padding: 3px 12px;
-        overflow: hidden;
-        color: $color-link;
+  position: relative;
+  display: inline-flex;
+  max-width: 100%;
 
-        @include evo-text-paragraph(p4);
+  &_theme-white {
+    --evo-chip-background-color: #{mixins.$color-white};
+    --evo-chip-background-color-hover: #{mixins.$color-white};
+    --evo-chip-background-color-active: #{mixins.$color-white};
+  }
 
-        background-color: $color-background-grey;
+  &_size-large {
+    --evo-chip-height: 40px;
+    --evo-chip-padding: 8px 12px;
+  }
 
-        border-radius: math.div($height, 2);
+  &__input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+  }
 
-        cursor: pointer;
-        transition:
-            color 0.3s,
-            background-color 0.3s;
+  &__label {
+    display: flex;
+    gap: 8px;
+    align-items: center;
 
-        user-select: none;
-    }
+    height: var(--evo-chip-height);
 
-    input {
-        position: absolute;
-        width: 1px;
-        height: 1px;
-        overflow: hidden;
-        clip: rect(0, 0, 0, 0);
-    }
+    padding: var(--evo-chip-padding);
+    overflow: hidden;
+    text-overflow: ellipsis;
 
-    input:disabled + #{$parent-selector}__label,
-    #{$parent-selector}__label_disabled {
-        color: $color-white !important;
-        background-color: $color-disabled !important;
-    }
+    color: var(--evo-chip-color);
+    background-color: var(--evo-chip-background-color);
+    border-radius: 8px;
+
+    @include mixins.evo-text-paragraph(p4);
+
+    cursor: pointer;
+    user-select: none;
 
-    input:checked + #{$parent-selector}__label {
-        color: $color-white;
-        background-color: $color-link;
+    transition: color 0.3s, background 0.3s;
 
-        &:focus,
-        &:hover {
-            background-color: $color-link-hover;
-        }
+    &:hover,
+    #{$root}__input:focus ~ & {
+      background-color: var(--evo-chip-background-color-hover);
+      color: var(--evo-chip-color-hover);
+    }
 
-        &:active {
-            background-color: $color-link-active;
-        }
+    &:active,
+    #{$root}__input:active ~ & {
+      background-color: var(--evo-chip-background-color-active);
+      color: var(--evo-chip-color-active);
     }
 
-    input:not(:checked) + #{$parent-selector}__label {
-        color: $color-link;
+    #{$root}__input:checked ~ & {
+      background-color: var(--evo-chip-checked-background-color);
+      color: var(--evo-chip-checked-color);
     }
 
-    &_theme-white:not(&_type-label) {
-        input:not(:checked) {
-            & + #{$parent-selector}__label {
-                background-color: $color-white;
-            }
-
-            &:focus + #{$parent-selector}__label,
-            &:hover + #{$parent-selector}__label {
-                background-color: $color-white-hover;
-            }
-
-            &:active + #{$parent-selector}__label {
-                background-color: $color-grey-active;
-            }
-        }
+    #{$root}__input:checked ~ &:hover,
+    #{$root}__input:checked:focus ~ & {
+      background-color: var(--evo-chip-checked-background-color-hover);
+      color: var(--evo-chip-checked-color-hover);
     }
 
-    &_theme-grey:not(&_type-label) {
-        input:not(:checked) {
-            & + #{$parent-selector}__label {
-                background-color: $color-background-grey;
-            }
-
-            &:focus + #{$parent-selector}__label,
-            &:hover + #{$parent-selector}__label {
-                background-color: $color-grey-hover;
-            }
-
-            &:active + #{$parent-selector}__label {
-                background-color: $color-grey-active;
-            }
-        }
+    #{$root}__input:checked ~ &:active,
+    #{$root}__input:checked:active ~ & {
+      background-color: var(--evo-chip-checked-background-color-active);
+      color: var(--evo-chip-checked-color-active);
     }
 
-    &_theme-custom:not(&_type-label) {
-        input:not(:checked) {
-            & + #{$parent-selector}__label {
-                color: var(--evo-chip-color, $color-link);
-                background-color: var(--evo-chip-background-color, $color-background-grey);
-            }
-
-            &:focus + #{$parent-selector}__label,
-            &:hover + #{$parent-selector}__label {
-                color: var(--evo-chip-color-hover, $color-link);
-                background-color: var(--evo-chip-background-color-hover, $color-grey-hover);
-            }
-
-            &:active + #{$parent-selector}__label {
-                color: var(--evo-chip-color-active, $color-link);
-                background-color: var(--evo-chip-background-color-active, $color-grey-active);
-            }
-        }
-
-        input:checked {
-            & + #{$parent-selector}__label {
-                color: var(--evo-chip-checked-color, $color-white) !important;
-                background-color: var(--evo-chip-checked-background-color, $color-link) !important;
-            }
-
-            &:focus + #{$parent-selector}__label,
-            &:hover + #{$parent-selector}__label {
-                color: var(--evo-chip-color-hover, $color-link) !important;
-                background-color: var(--evo-chip-checked-background-color-hover, $color-link-hover) !important;
-            }
-
-            &:active + #{$parent-selector}__label {
-                color: var(--evo-chip-color-active, $color-link) !important;
-                background-color: var(--evo-chip-checked-background-color-active, $color-link-active) !important;
-            }
-        }
+    #{$root}_type-label & {
+      background-color: var(--evo-chip-checked-background-color) !important;
+      color: var(--evo-chip-checked-color) !important;
+      cursor: default;
     }
 
-    &_type-label {
-        #{$parent-selector}__label {
-            color: $color-white;
-            background-color: $color-link;
-            cursor: default;
-        }
+    #{$root}_disabled & {
+      background-color: mixins.$color-disabled !important;
+      color: mixins.$color-white !important;
+      cursor: default;
     }
+  }
 
-    &__text {
-        display: inline-block;
-        align-items: center;
-        max-width: 100%;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
+  &__text {
+    max-width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  &__counter {
+    display: flex;
+    justify-content: center;
+    flex-shrink: 0;
+    align-items: center;
+    min-width: 20px;
+    height: 20px;
+    padding: 1px 6px;
+    overflow: hidden;
+    color: mixins.$color-white;
+    font-weight: 600;
+    font-size: 13px;
+    background-color: mixins.$color-primary;
+    border-radius: 32px;
+    margin: 2px;
+  }
+
+  &__close {
+    position: relative;
+    display: block;
+    width: 24px;
+    height: 24px;
+    cursor: pointer;
+    flex-shrink: 0;
+    color: mixins.$color-link;
+    background: none;
+    transition: 0.3s color;
+
+    &:hover {
+      color: mixins.$color-link-hover;
     }
 
-    &__counter {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        min-width: 18px;
-        min-height: 18px;
-        margin-right: -5px;
-        margin-left: 8px;
-        overflow: hidden;
-        color: $color-white;
-        font-weight: bold;
-        font-size: 12px;
-        background-color: $color-primary;
-        border-radius: 9px;
+    &:active {
+      color: mixins.$color-link-active;
     }
 
-    &__counter-value {
-        margin: 0 3px;
-        line-height: 16px;
+    &:disabled {
+      cursor: default;
+      color: mixins.$color-white !important;
     }
 
-    &__close {
-        position: relative;
-        display: block;
-        width: 24px;
-        height: 24px;
-        margin: 0 -9px 0 8px;
-        padding: 0;
-        color: $color-white;
-        background: none;
-        border: none;
-        cursor: pointer;
-        transition: opacity 0.3s;
-
-        &:not(:disabled):hover {
-            opacity: 0.8;
-        }
-
-        &:not(:disabled):active {
-            opacity: 0.9;
-        }
-
-        evo-icon {
-            z-index: 1;
-            display: block;
-            width: 100%;
-            height: 100%;
-            fill: currentColor;
-        }
+    #{$root}_type-label &,
+    #{$root}__input:checked ~ #{$root}__label & {
+      color: mixins.$color-white;
+
+      &:active {
+        color: var(--evo-chip-background-color-active);
+      }
     }
+  }
+
+  &__close-icon {
+    width: 100%;
+    height: 100%;
+    fill: currentColor;
+    background: none;
+  }
 }
diff --git a/src/stories/components/evo-chip.stories.ts b/src/stories/components/evo-chip.stories.ts
index a9be7911c..9b8bc831f 100644
--- a/src/stories/components/evo-chip.stories.ts
+++ b/src/stories/components/evo-chip.stories.ts
@@ -1,8 +1,7 @@
-import {applicationConfig, moduleMetadata} from '@storybook/angular';
+import {moduleMetadata} from '@storybook/angular';
 import {FormBuilder, FormControl, FormGroup, FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {EvoButtonModule, EvoChipModule} from '@evotor-dev/ui-kit';
-import {importProvidersFrom} from '@angular/core';
-import {HttpClientModule} from '@angular/common/http';
+import {EvoChipModule} from '../../../projects/evo-ui-kit/src/lib/components/evo-chip';
+import {EvoButtonModule} from '../../../projects/evo-ui-kit/src/lib/components/evo-button';
 
 const fb = new FormBuilder();
 const form = fb.group({
@@ -10,13 +9,39 @@ const form = fb.group({
     checkboxes: fb.array([[false], [false], [false]]),
 });
 
+const defaultStyles = `
+    :host {
+        display: flex;
+        flex-direction: column;
+        gap: 32px;
+    }
+
+    .container {
+        display: flex;
+        gap: 24px;
+        flex-direction: column;
+    }
+
+    .title {
+        margin: 0;
+    }
+
+    .inner-container {
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+    }
+
+    .chips-list {
+        display: flex;
+        gap: 8px;
+    }
+`
+
 export default {
     title: 'Components/Chip',
 
     decorators: [
-        applicationConfig({
-            providers: [importProvidersFrom(HttpClientModule)],
-        }),
         moduleMetadata({
             imports: [EvoChipModule, EvoButtonModule, FormsModule, ReactiveFormsModule],
         }),
@@ -25,58 +50,130 @@ export default {
 
 export const DefaultRadioGreyColor = () => ({
     template: `
-            <evo-chip name="myChip" value="1">Chip 1</evo-chip>
-            <evo-chip name="myChip" value="2">Chip 2</evo-chip>
-            <evo-chip name="myChip" value="3">Chip 3</evo-chip>
+            <style>
+                ${defaultStyles}
+            </style>
+
+            <h2 class="evo-text-header evo-text-header_h2 title">Default state (type = radio, theme = grey, size = normal)</h2>
+
+            <div class="chips-list">
+                <evo-chip name="myChip" value="1">Chip 1</evo-chip>
+                <evo-chip name="myChip" value="2">Chip 2</evo-chip>
+                <evo-chip name="myChip" value="3">Chip 3</evo-chip>
+            </div>
         `,
 });
 
-DefaultRadioGreyColor.storyName = 'default (radio, grey color)';
+DefaultRadioGreyColor.storyName = 'default (radio, grey color, normal size)';
 
 export const Types = () => ({
     template: `
-            <h4 style="margin: 10px 0;">radio type</h4>
-            <evo-chip type="radio" name="myChip" value="1">Chip 1</evo-chip>
-            <evo-chip type="radio" name="myChip" value="2">Chip 2</evo-chip>
-            <evo-chip type="radio" name="myChip" value="3">Chip 3</evo-chip>
-
-            <h4 style="margin: 20px 0 10px;">checkbox</h4>
-            <evo-chip type="checkbox" name="myChip" value="1">Chip 1</evo-chip>
-            <evo-chip type="checkbox" name="myChip" value="2">Chip 2</evo-chip>
-            <evo-chip type="checkbox" name="myChip" value="3">Chip 3</evo-chip>
+            <style>
+                ${defaultStyles}
+            </style>
+            <div class="container">
+                <h2 class="evo-text-header evo-text-header_h2 title">Type = radio</h2>
+
+                <div class="inner-container">
+                    <h4 class="evo-text-header evo-text-header_h4 title">Size = normal</h4>
+
+                    <div class="chips-list">
+                        <evo-chip type="radio" name="myChipNormal" value="1">Chip 1</evo-chip>
+                        <evo-chip type="radio" name="myChipNormal" value="2">Chip 2</evo-chip>
+                        <evo-chip type="radio" name="myChipNormal" value="3">Chip 3</evo-chip>
+                    </div>
+                </div>
+
+                <div class="inner-container">
+                    <h4 class="evo-text-header evo-text-header_h4 title">Size = large</h4>
+
+                    <div class="chips-list">
+                        <evo-chip size="large" type="radio" name="myChipLarge" value="1">Chip 1</evo-chip>
+                        <evo-chip size="large" type="radio" name="myChipLarge" value="2">Chip 2</evo-chip>
+                        <evo-chip size="large" type="radio" name="myChipLarge" value="3">Chip 3</evo-chip>
+                    </div>
+                </div>
+            </div>
+
+            <div class="container">
+                <h2 class="evo-text-header evo-text-header_h2 title">Type = checkbox</h2>
+
+                <div class="inner-container">
+                    <h4 class="evo-text-header evo-text-header_h4">Size = normal</h4>
+
+                    <div class="chips-list">
+                        <evo-chip type="checkbox" value="1">Chip 1</evo-chip>
+                        <evo-chip type="checkbox" value="2">Chip 2</evo-chip>
+                        <evo-chip type="checkbox" value="3">Chip 3</evo-chip>
+                    </div>
+                </div>
+
+                <div class="inner-container">
+                    <h4 class="evo-text-header evo-text-header_h4 title">Size = large</h4>
+
+                    <div class="chips-list">
+                        <evo-chip size="large" type="checkbox" value="1">Chip 1</evo-chip>
+                        <evo-chip size="large" type="checkbox" value="2">Chip 2</evo-chip>
+                        <evo-chip size="large" type="checkbox" value="3">Chip 3</evo-chip>
+                    </div>
+                </div>
+            </div>
         `,
 });
 
-Types.storyName = 'types';
+Types.storyName = 'types (radio, checkbox)';
 
 export const WithReactiveForms = () => ({
     template: `
-        <div [formGroup]="form">
-            <h4 class="evo-title evo-title_h4" style="margin: 10px 0;">radio type</h4>
-            <evo-chip type="radio" formControlName="radios" value="1">Chip 1</evo-chip>
-            <evo-chip type="radio" formControlName="radios" [value]="{'object': true}">Chip 2</evo-chip>
-            <evo-chip type="radio" formControlName="radios" value="3">Chip 3</evo-chip>
-            <pre>control value: {{ form.value.radios | json }}</pre>
-
-            <h4 class="evo-title evo-title_h4" style="margin: 20px 0 10px;">checkbox type (control value is boolean)</h4>
-            <evo-chip type="checkbox" [formControl]="form.get('checkboxes').controls[0]">Chip 1</evo-chip>
-            <evo-chip type="checkbox" [formControl]="form.get('checkboxes').controls[1]">Chip 2</evo-chip>
-            <evo-chip type="checkbox" [formControl]="form.get('checkboxes').controls[2]">Chip 3</evo-chip>
-            <pre>control value: {{ form.value.checkboxes | json }}</pre>
-        </div>
-        <h4 class="evo-title evo-title_h4" style="margin: 20px 0 10px;">Patching value in mixed form</h4>
-        <div [formGroup]="mixedForm">
-            <evo-chip
-                *ngFor="let item of list"
-                [formControlName]="item.controlName"
-                [type]="item.type"
-                [value]="item.value"
-            >{{ item.presentationText }}</evo-chip>
-            <br>
-            <br>
-            <p><button evoButton (click)="patchValue()">patch values</button></p>
-            <br>
-            <pre>{{mixedForm.value | json}}</pre>
+        <style>
+            ${defaultStyles}
+
+            .container {
+                align-items: flex-start;
+            }
+        </style>
+
+        <div class="container" [formGroup]="form">
+            <div class="inner-container">
+                <h4 class="evo-title evo-title_h4 title">radio type (size default)</h4>
+
+                <div class="chips-list">
+                    <evo-chip type="radio" formControlName="radios" value="1">Chip 1</evo-chip>
+                    <evo-chip type="radio" formControlName="radios" [value]="{'object': true}">Chip 2</evo-chip>
+                    <evo-chip type="radio" formControlName="radios" value="3">Chip 3</evo-chip>
+                </div>
+
+                <pre>control value: {{ form.value.radios | json }}</pre>
+            </div>
+
+             <div class="inner-container">
+                <h4 class="evo-title evo-title_h4 title">checkbox type (control value is boolean)</h4>
+
+                <div class="chips-list">
+                    <evo-chip type="checkbox" [formControl]="form.get('checkboxes').controls[0]">Chip 1</evo-chip>
+                    <evo-chip type="checkbox" [formControl]="form.get('checkboxes').controls[1]">Chip 2</evo-chip>
+                    <evo-chip type="checkbox" [formControl]="form.get('checkboxes').controls[2]">Chip 3</evo-chip>
+                </div>
+
+                <pre>control value: {{ form.value.checkboxes | json }}</pre>
+             </div>
+
+             <div class="inner-container" [formGroup]="mixedForm">
+                <h4 class="evo-title evo-title_h4 title">Patching value in mixed form</h4>
+
+                <div class="chips-list">
+                    <evo-chip
+                        *ngFor="let item of list"
+                        [formControlName]="item.controlName"
+                        [type]="item.type"
+                        [value]="item.value"
+                    >{{ item.presentationText }}</evo-chip>
+                </div>
+
+                <button evoButton (click)="patchValue()">patch values</button>
+
+                <pre>{{mixedForm.value | json}}</pre>
+             </div>
         </div>
         `,
     props: {
@@ -118,43 +215,105 @@ WithReactiveForms.storyName = 'with reactive forms';
 
 const colors = `
 --evo-chip-color: white;
---evo-chip-background-color: black;
 --evo-chip-color-hover: red;
---evo-chip-background-color-hover: blue;
 --evo-chip-color-active: lightgreen;
---evo-chip-background-color-active: yellow
+
+--evo-chip-background-color: black;
+--evo-chip-background-color-hover: blue;
+--evo-chip-background-color-active: yellow;
+
 --evo-chip-checked-color: purple;
---evo-chip-checked-background-color: cyan;
 --evo-chip-checked-color-hover: tomato;
---evo-chip-checked-background-color-hover: yellow;
 --evo-chip-checked-color-active: grey;
+
+--evo-chip-checked-background-color: cyan;
+--evo-chip-checked-background-color-hover: yellow;
 --evo-chip-checked-background-color-active: white;
 `;
 export const Colors = () => ({
     template: `
-            <div style="margin: 20px 0">
-                <h4 style="margin-bottom: 10px;">theme grey (default)</h4>
-                <evo-chip type="checkbox" name="myChip" value="1">Chip 1</evo-chip>
-                <evo-chip type="checkbox" name="myChip" value="2">Chip 2</evo-chip>
-                <evo-chip type="checkbox" name="myChip" value="3">Chip 3</evo-chip>
-            </div>
+            <style>
+                ${defaultStyles}
 
-            <div style="background-color: #F4F6F8; padding: 20px; margin: 20px 0">
-                <h4 style="margin-bottom: 10px">theme white</h4>
-                <evo-chip type="checkbox" name="myChip" theme="white" value="1">Chip 1</evo-chip>
-                <evo-chip type="checkbox" name="myChip" theme="white" value="2">Chip 2</evo-chip>
-                <evo-chip type="checkbox" name="myChip" theme="white" value="3">Chip 3</evo-chip>
-            </div>
+                .chips-list_dark {
+                    background-color: #f4f6f8;
+                    padding: 8px;
+                }
+            </style>
+
+            <div class="container">
+               <h2 class="evo-text-header evo-text-header_h2 title">Theme = grey (default)</h2>
+
+               <div class="inner-container">
+                   <h4 class="evo-text-header evo-text-header_h4 title">Size = normal</h4>
 
-            <div style=" margin: 20px 0; ${colors} ">
-                <h4 style="margin-bottom: 10px;">theme custom</h4>
-                <p style="white-space: pre-line;margin-bottom: 10px">
-                    ${colors}
-                </p>
-                <evo-chip type="checkbox" theme="custom" name="myChip" value="1">Chip 1</evo-chip>
-                <evo-chip type="checkbox" theme="custom" name="myChip" value="2">Chip 2</evo-chip>
-                <evo-chip type="checkbox" theme="custom" name="myChip" value="3">Chip 3</evo-chip>
+                   <div class="chips-list">
+                       <evo-chip type="checkbox" value="1">Chip 1</evo-chip>
+                       <evo-chip type="checkbox" value="2">Chip 2</evo-chip>
+                       <evo-chip type="checkbox" value="3">Chip 3</evo-chip>
+                   </div>
+               </div>
+
+               <div class="inner-container">
+                   <h4 class="evo-text-header evo-text-header_h4 title">Size = large</h4>
+
+                   <div class="chips-list">
+                       <evo-chip size="large" type="checkbox" value="1">Chip 1</evo-chip>
+                       <evo-chip size="large" type="checkbox" value="2">Chip 2</evo-chip>
+                       <evo-chip size="large" type="checkbox" value="3">Chip 3</evo-chip>
+                   </div>
+               </div>
             </div>
+
+            <div class="container container_dark">
+                <h2 class="evo-text-header evo-text-header_h2 title">Theme = white</h2>
+
+                <div class="inner-container">
+                    <h4 class="evo-text-header evo-text-header_h4 title">Size = normal</h4>
+
+                    <div class="chips-list chips-list_dark">
+                        <evo-chip theme="white" type="checkbox" value="1">Chip 1</evo-chip>
+                        <evo-chip theme="white" type="checkbox" value="2">Chip 2</evo-chip>
+                        <evo-chip theme="white" type="checkbox" value="3">Chip 3</evo-chip>
+                    </div>
+                </div>
+
+                <div class="inner-container">
+                    <h4 class="evo-text-header evo-text-header_h4 title">Size = large</h4>
+
+                    <div class="chips-list chips-list_dark">
+                        <evo-chip theme="white" size="large" type="checkbox" value="1">Chip 1</evo-chip>
+                        <evo-chip theme="white" size="large" type="checkbox" value="2">Chip 2</evo-chip>
+                        <evo-chip theme="white" size="large" type="checkbox" value="3">Chip 3</evo-chip>
+                    </div>
+                </div>
+             </div>
+
+              <div class="container container_dark">
+                <h2 class="evo-text-header evo-text-header_h2 title">Customization</h2>
+
+                <pre>${colors}</pre>
+
+                <div class="inner-container">
+                    <h4 class="evo-text-header evo-text-header_h4 title">Size = normal</h4>
+
+                    <div class="chips-list chips-list_dark">
+                        <evo-chip style="${colors}" type="checkbox" value="1">Chip 1</evo-chip>
+                        <evo-chip style="${colors}" type="checkbox" value="2">Chip 2</evo-chip>
+                        <evo-chip style="${colors}" type="checkbox" value="3">Chip 3</evo-chip>
+                    </div>
+                </div>
+
+                <div class="inner-container">
+                    <h4 class="evo-text-header evo-text-header_h4 title">Size = large</h4>
+
+                    <div class="chips-list chips-list_dark">
+                        <evo-chip style="${colors}" size="large" type="checkbox" value="1">Chip 1</evo-chip>
+                        <evo-chip style="${colors}" size="large" type="checkbox" value="2">Chip 2</evo-chip>
+                        <evo-chip style="${colors}" type="label" size="large" type="checkbox" value="3">Chip 3</evo-chip>
+                    </div>
+                </div>
+             </div>
         `,
 });
 
@@ -162,9 +321,33 @@ Colors.storyName = 'colors';
 
 export const WithCounter = () => ({
     template: `
-            <evo-chip name="myChip" value="1" [counter]="5">Chip 1</evo-chip>
-            <evo-chip name="myChip" value="2" [counter]="50">Chip 2</evo-chip>
-            <evo-chip name="myChip" value="3" [counter]="50000">Chip 3</evo-chip>
+            <style>
+                ${defaultStyles}
+            </style>
+
+            <div class="container">
+                <h2 class="evo-text-header evo-text-header_h2 title">Counter</h2>
+
+                <div class="inner-container">
+                    <h4 class="evo-text-header evo-text-header_h4 title">Size = normal</h4>
+
+                    <div class="chips-list">
+                        <evo-chip name="myChipNormal" value="1" [counter]="5">Chip 1</evo-chip>
+                        <evo-chip name="myChipNormal" value="2" [counter]="50">Chip 2</evo-chip>
+                        <evo-chip name="myChipNormal" value="3" [counter]="50000">Chip 3</evo-chip>
+                    </div>
+                </div>
+
+                <div class="inner-container">
+                    <h4 class="evo-text-header evo-text-header_h4 title">Size = large</h4>
+
+                    <div class="chips-list">
+                        <evo-chip size="large" name="myChipLarge" value="1" [counter]="5">Chip 1</evo-chip>
+                        <evo-chip size="large" name="myChipLarge" value="2" [counter]="50">Chip 2</evo-chip>
+                        <evo-chip size="large" name="myChipLarge" value="3" [counter]="50000">Chip 3</evo-chip>
+                    </div>
+                </div>
+            </div>
         `,
 });
 
@@ -172,9 +355,34 @@ WithCounter.storyName = 'with counter';
 
 export const Disabled = () => ({
     template: `
-            <evo-chip name="myChip" value="1">Chip 1</evo-chip>
-            <evo-chip name="myChip" value="2" [disabled]="true">Chip 2</evo-chip>
-            <evo-chip name="myChip" value="3" [counter]="5" [disabled]="true">Chip 3</evo-chip>
+             <style>
+                ${defaultStyles}
+             </style>
+             <div class="container">
+                <h2 class="evo-text-header evo-text-header_h2 title">Disabled state</h2>
+
+                <div class="inner-container">
+                    <h4 class="evo-text-header evo-text-header_h4 title">Size = normal</h4>
+
+                    <div class="chips-list">
+                        <evo-chip type="checkbox" value="1">Chip 1</evo-chip>
+                        <evo-chip type="checkbox" value="2" [disabled]="true">Chip 2</evo-chip>
+                        <evo-chip type="checkbox" value="3" [disabled]="true" counter="5">Chip 3</evo-chip>
+                        <evo-chip type="checkbox" value="4" [disabled]="true" [closable]="true">Chip 4</evo-chip>
+                    </div>
+                </div>
+
+                <div class="inner-container">
+                    <h4 class="evo-text-header evo-text-header_h4 title">Size = large</h4>
+
+                    <div class="chips-list">
+                        <evo-chip size="large" type="checkbox" value="1">Chip 1</evo-chip>
+                        <evo-chip size="large" type="checkbox" value="2" [disabled]="true">Chip 2</evo-chip>
+                        <evo-chip size="large" type="checkbox" value="3" [disabled]="true" counter="5">Chip 3</evo-chip>
+                        <evo-chip size="large" type="checkbox" value="4" [disabled]="true" [closable]="true">Chip 4</evo-chip>
+                    </div>
+                </div>
+             </div>
         `,
 });
 
@@ -182,11 +390,36 @@ Disabled.storyName = 'disabled';
 
 export const Labels = () => ({
     template: `
-            <evo-chip name="myChip" type="label">Chip 1</evo-chip>
-            <evo-chip name="myChip" type="label" [disabled]="true">Chip 2</evo-chip>
-            <evo-chip name="myChip" type="label" [counter]="5">Chip 3</evo-chip>
-            <evo-chip name="myChip" type="label" [closable]="true">Chip 4</evo-chip>
-            <evo-chip name="myChip" type="label" [closable]="true" [disabled]="true">Chip 5</evo-chip>
+            <style>
+                ${defaultStyles}
+            </style>
+            <div class="container">
+                <h2 class="evo-text-header evo-text-header_h2 title">Type = label</h2>
+
+                <div class="inner-container">
+                    <h4 class="evo-text-header evo-text-header_h4 title">Size = normal</h4>
+
+                    <div class="chips-list">
+                        <evo-chip name="myChipNormal" type="label">Chip 1</evo-chip>
+                        <evo-chip name="myChipNormal" type="label" [disabled]="true">Chip 2</evo-chip>
+                        <evo-chip name="myChipNormal" type="label" [counter]="5">Chip 3</evo-chip>
+                        <evo-chip name="myChipNormal" type="label" [closable]="true">Chip 4</evo-chip>
+                        <evo-chip name="myChipNormal" type="label" [closable]="true" [disabled]="true">Chip 5</evo-chip>
+                    </div>
+                </div>
+
+                <div class="inner-container">
+                    <h4 class="evo-text-header evo-text-header_h4 title">Size = large</h4>
+
+                    <div class="chips-list">
+                        <evo-chip size="large" name="myChipLarge" type="label">Chip 1</evo-chip>
+                        <evo-chip size="large" name="myChipLarge" type="label" [disabled]="true">Chip 2</evo-chip>
+                        <evo-chip size="large" name="myChipLarge" type="label" [counter]="5">Chip 3</evo-chip>
+                        <evo-chip size="large" name="myChipLarge" type="label" [closable]="true">Chip 4</evo-chip>
+                        <evo-chip size="large" name="myChipLarge" type="label" [closable]="true" [disabled]="true">Chip 5</evo-chip>
+                    </div>
+                </div>
+            </div>
         `,
 });
 

From 9e7f0563ff865c770835e195fb9fa5cffd61a26a Mon Sep 17 00:00:00 2001
From: "a.kiselev" <a.kiselev@evotor.ru>
Date: Thu, 19 Feb 2026 15:26:20 +0300
Subject: [PATCH 2/3] feat(evo-counter): use implementation from market

---
 .../evo-counter/evo-counter.component.html    |   3 +
 .../evo-counter/evo-counter.component.scss    |  60 ++++++++++
 .../evo-counter/evo-counter.component.spec.ts | 103 ++++++++++++++++++
 .../evo-counter/evo-counter.component.ts      |  36 ++++++
 .../evo-counter/enums/evo-counter-size.ts     |   5 +
 .../evo-counter/evo-counter.component.html    |   3 -
 .../evo-counter/evo-counter.component.scss    |  37 -------
 .../evo-counter/evo-counter.component.spec.ts |  76 -------------
 .../evo-counter/evo-counter.component.ts      |  35 ------
 .../evo-counter/evo-counter.module.ts         |   2 +-
 .../lib/components/evo-counter/public-api.ts  |   3 +-
 src/stories/components/evo-counter.stories.ts |  18 ++-
 12 files changed, 224 insertions(+), 157 deletions(-)
 create mode 100644 projects/evo-ui-kit/src/lib/components/evo-counter/components/evo-counter/evo-counter.component.html
 create mode 100644 projects/evo-ui-kit/src/lib/components/evo-counter/components/evo-counter/evo-counter.component.scss
 create mode 100644 projects/evo-ui-kit/src/lib/components/evo-counter/components/evo-counter/evo-counter.component.spec.ts
 create mode 100644 projects/evo-ui-kit/src/lib/components/evo-counter/components/evo-counter/evo-counter.component.ts
 create mode 100644 projects/evo-ui-kit/src/lib/components/evo-counter/enums/evo-counter-size.ts
 delete mode 100644 projects/evo-ui-kit/src/lib/components/evo-counter/evo-counter.component.html
 delete mode 100644 projects/evo-ui-kit/src/lib/components/evo-counter/evo-counter.component.scss
 delete mode 100644 projects/evo-ui-kit/src/lib/components/evo-counter/evo-counter.component.spec.ts
 delete mode 100644 projects/evo-ui-kit/src/lib/components/evo-counter/evo-counter.component.ts

diff --git a/projects/evo-ui-kit/src/lib/components/evo-counter/components/evo-counter/evo-counter.component.html b/projects/evo-ui-kit/src/lib/components/evo-counter/components/evo-counter/evo-counter.component.html
new file mode 100644
index 000000000..70fc29bd4
--- /dev/null
+++ b/projects/evo-ui-kit/src/lib/components/evo-counter/components/evo-counter/evo-counter.component.html
@@ -0,0 +1,3 @@
+<div class="evo-counter" [evoUiClass]="blockClasses()">
+    {{counter()}}
+</div>
diff --git a/projects/evo-ui-kit/src/lib/components/evo-counter/components/evo-counter/evo-counter.component.scss b/projects/evo-ui-kit/src/lib/components/evo-counter/components/evo-counter/evo-counter.component.scss
new file mode 100644
index 000000000..9dff55944
--- /dev/null
+++ b/projects/evo-ui-kit/src/lib/components/evo-counter/components/evo-counter/evo-counter.component.scss
@@ -0,0 +1,60 @@
+@use "../../../../styles/mixins";
+
+:host {
+    --evo-counter-background-color: #{mixins.$color-primary};
+    --evo-counter-color: #{mixins.$color-white};
+    --evo-counter-outline-width: 2px;
+    --evo-counter-outline-color: transparent;
+
+    display: block;
+}
+
+.evo-counter {
+    --inner-margin: 0;
+    --inner-size: 18px;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: var(--evo-counter-background-color);
+    border-radius: 32px;
+    color: var(--evo-counter-color);
+    width: fit-content;
+    font-weight: 600;
+    outline: var(--evo-counter-outline-width) solid var(--evo-counter-outline-color);
+
+    margin: var(--inner-margin);
+    min-width: var(--inner-size);
+    height: var(--inner-size);
+
+    &_disabled {
+        background-color: mixins.$color-disabled;
+    }
+
+    &_size_normal {
+        --inner-margin: 2px;
+        --inner-size: calc(24px - var(--inner-margin) * 2);
+
+        font-size: 13px;
+        line-height: 18px;
+        padding: 1px 6px;
+    }
+
+    &_size_large {
+        --inner-margin: 3px;
+        --inner-size: calc(32px - var(--inner-margin) * 2);
+
+        font-size: 17px;
+        line-height: 23px;
+        padding: 1px 8px;
+    }
+
+    &_size_small {
+        --inner-margin: 0;
+        --inner-size: 18px;
+
+        font-size: 10px;
+        line-height: 14px;
+        padding: 2px 6px;
+    }
+}
diff --git a/projects/evo-ui-kit/src/lib/components/evo-counter/components/evo-counter/evo-counter.component.spec.ts b/projects/evo-ui-kit/src/lib/components/evo-counter/components/evo-counter/evo-counter.component.spec.ts
new file mode 100644
index 000000000..9ddec2de9
--- /dev/null
+++ b/projects/evo-ui-kit/src/lib/components/evo-counter/components/evo-counter/evo-counter.component.spec.ts
@@ -0,0 +1,103 @@
+import {ComponentRef} from '@angular/core';
+import {ComponentFixture, fakeAsync, TestBed, waitForAsync} from '@angular/core/testing';
+import {COMPOSITION_BUFFER_MODE} from '@angular/forms';
+import {EvoCounterSize} from '@evotor-dev/ui-kit';
+import {EvoCounterComponent} from './evo-counter.component';
+
+describe('EvoCounterComponent', () => {
+    let component: EvoCounterComponent;
+    let componentRef: ComponentRef<EvoCounterComponent>;
+    let fixture: ComponentFixture<EvoCounterComponent>;
+
+    beforeEach(waitForAsync(() => {
+        TestBed.configureTestingModule({
+            imports: [EvoCounterComponent],
+            providers: [
+                {
+                    provide: COMPOSITION_BUFFER_MODE,
+                    useValue: true,
+                },
+            ],
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.overrideComponent(EvoCounterComponent, {set: {host: {'(click)': 'dummy'}}}).createComponent(
+            EvoCounterComponent,
+        );
+        component = fixture.componentInstance;
+        componentRef = fixture.componentRef;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+
+    it('should be disabled if set disabled attribute to true', fakeAsync(() => {
+        expect(fixture.nativeElement.querySelector('.evo-counter').classList.contains('evo-counter_disabled')).toBeFalsy();
+        // expect(fixture.nativeElement.querySelector('.evo-counter').classList.contains('evo-counter_disabled')).toBeFalsy();
+        expect(component.disabled()).toBeFalsy();
+        componentRef.setInput('disabled', true);
+
+        fixture.debugElement.triggerEventHandler('click', null);
+        fixture.detectChanges();
+
+        expect(component.disabled()).toBeTruthy();
+        expect(
+            fixture.nativeElement.querySelector('.evo-counter').classList.contains('evo-counter_disabled'),
+        ).toBeTruthy();
+    }));
+
+    it('should be normal if size is not set', () => {
+        expect(component.size()).toEqual(EvoCounterSize.NORMAL);
+        expect(
+            fixture.nativeElement.querySelector('.evo-counter').classList.contains('evo-counter_size-small'),
+        ).toBeFalsy();
+    });
+
+    it('should be small if set small size', fakeAsync(() => {
+        expect(fixture.nativeElement.querySelector('.evo-counter').classList.contains('evo-counter_size-small')).toBeFalsy();
+        expect(component.size()).toEqual(EvoCounterSize.NORMAL);
+        componentRef.setInput('size', EvoCounterSize.SMALL);
+
+        fixture.debugElement.triggerEventHandler('click', null);
+        fixture.detectChanges();
+
+        expect(component.size()).toEqual(EvoCounterSize.SMALL);
+    }));
+
+    it('should be large if set large size', fakeAsync(() => {
+        expect(fixture.nativeElement.querySelector('.evo-counter').classList.contains('evo-counter_size_small')).toBeFalsy();
+        expect(component.size()).toEqual(EvoCounterSize.NORMAL);
+        componentRef.setInput('size', EvoCounterSize.LARGE);
+
+        fixture.debugElement.triggerEventHandler('click', null);
+        fixture.detectChanges();
+
+        expect(component.size()).toEqual(EvoCounterSize.LARGE);
+        expect(fixture.nativeElement.querySelector('.evo-counter').classList.contains('evo-counter_size_large')).toBeTruthy();
+    }));
+
+    it('should display the current value if it is less than maxValue', () => {
+        componentRef.setInput('value', 5);
+        componentRef.setInput('maxValue', 10);
+
+        fixture.debugElement.triggerEventHandler('click', null);
+        fixture.detectChanges();
+
+        const content = fixture.nativeElement.querySelector('.evo-counter').textContent;
+        expect(content).toContain('5');
+    });
+
+    it('should display maxValue with a plus sign if value exceeds maxValue', () => {
+        componentRef.setInput('value', 100);
+        componentRef.setInput('maxValue', 99);
+
+        fixture.debugElement.triggerEventHandler('click', null);
+        fixture.detectChanges();
+
+        const content = fixture.nativeElement.querySelector('.evo-counter').textContent;
+        expect(content).toContain('99+');
+    });
+});
diff --git a/projects/evo-ui-kit/src/lib/components/evo-counter/components/evo-counter/evo-counter.component.ts b/projects/evo-ui-kit/src/lib/components/evo-counter/components/evo-counter/evo-counter.component.ts
new file mode 100644
index 000000000..eaeb6671f
--- /dev/null
+++ b/projects/evo-ui-kit/src/lib/components/evo-counter/components/evo-counter/evo-counter.component.ts
@@ -0,0 +1,36 @@
+import {ChangeDetectionStrategy, Component, computed, input} from '@angular/core';
+import {EvoUiClassDirective} from '../../../../directives';
+import {EvoCounterSize} from '../../enums/evo-counter-size';
+
+@Component({
+    selector: 'evo-counter',
+    templateUrl: './evo-counter.component.html',
+    styleUrls: ['./evo-counter.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [
+        EvoUiClassDirective
+    ]
+})
+export class EvoCounterComponent {
+    readonly value = input(0);
+    readonly maxValue = input<number | undefined>(undefined);
+    readonly disabled = input(false);
+    readonly size = input(EvoCounterSize.NORMAL);
+
+    readonly blockClasses = computed((): Record<string, boolean> => {
+        const size: EvoCounterSize = this.size();
+
+        return {
+            disabled: this.disabled(),
+            [`size_${size}`]: !!size,
+        };
+    });
+
+    readonly counter = computed((): string => {
+        const current = this.value();
+        const max = this.maxValue();
+
+        return current > max ? `${max}+` : String(current);
+    });
+}
diff --git a/projects/evo-ui-kit/src/lib/components/evo-counter/enums/evo-counter-size.ts b/projects/evo-ui-kit/src/lib/components/evo-counter/enums/evo-counter-size.ts
new file mode 100644
index 000000000..ab90038fc
--- /dev/null
+++ b/projects/evo-ui-kit/src/lib/components/evo-counter/enums/evo-counter-size.ts
@@ -0,0 +1,5 @@
+export enum EvoCounterSize {
+    LARGE = 'large',
+    NORMAL = 'normal',
+    SMALL = 'small',
+}
diff --git a/projects/evo-ui-kit/src/lib/components/evo-counter/evo-counter.component.html b/projects/evo-ui-kit/src/lib/components/evo-counter/evo-counter.component.html
deleted file mode 100644
index 843972da5..000000000
--- a/projects/evo-ui-kit/src/lib/components/evo-counter/evo-counter.component.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<div class="evo-counter" [evoUiClass]="blockClasses">
-    <span class="evo-counter__value">{{value}}</span>
-</div>
diff --git a/projects/evo-ui-kit/src/lib/components/evo-counter/evo-counter.component.scss b/projects/evo-ui-kit/src/lib/components/evo-counter/evo-counter.component.scss
deleted file mode 100644
index 687d0f535..000000000
--- a/projects/evo-ui-kit/src/lib/components/evo-counter/evo-counter.component.scss
+++ /dev/null
@@ -1,37 +0,0 @@
-@import '../../styles/variables.scss';
-
-.evo-counter {
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    width: fit-content;
-    min-width: 20px;
-    height: 20px;
-    padding: 1px 6px;
-    background-color: $color-primary;
-    border-radius: 32px;
-
-    &_disabled {
-        background-color: $color-disabled;
-    }
-
-    &__value {
-        color: $color-white;
-        font: var(--evo-font);
-        font-weight: 700;
-        font-size: 13px;
-        line-height: 18px;
-    }
-
-    &_size-small {
-        min-width: 18px;
-        height: 18px;
-        padding: 0 6px;
-
-        .evo-counter__value {
-            font-weight: 600;
-            font-size: 10px;
-            line-height: 14px;
-        }
-    }
-}
diff --git a/projects/evo-ui-kit/src/lib/components/evo-counter/evo-counter.component.spec.ts b/projects/evo-ui-kit/src/lib/components/evo-counter/evo-counter.component.spec.ts
deleted file mode 100644
index 3b4101a30..000000000
--- a/projects/evo-ui-kit/src/lib/components/evo-counter/evo-counter.component.spec.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-import {ComponentFixture, fakeAsync, TestBed, waitForAsync} from '@angular/core/testing';
-import {EvoCounterComponent, EvoCounterSize} from './evo-counter.component';
-import {COMPOSITION_BUFFER_MODE} from '@angular/forms';
-
-describe('EvoCounterComponent', () => {
-    let component: EvoCounterComponent;
-    let fixture: ComponentFixture<EvoCounterComponent>;
-    let counterEl: HTMLElement;
-
-    beforeEach(waitForAsync(() => {
-        TestBed.configureTestingModule({
-            imports: [EvoCounterComponent],
-            providers: [
-                {
-                    provide: COMPOSITION_BUFFER_MODE,
-                    useValue: true,
-                },
-            ],
-        }).compileComponents();
-    }));
-
-    beforeEach(() => {
-        fixture = TestBed.overrideComponent(EvoCounterComponent, {set: {host: {'(click)': 'dummy'}}}).createComponent(
-            EvoCounterComponent,
-        );
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-        counterEl = fixture.nativeElement.querySelector('.evo-counter');
-    });
-
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
-
-    it('should be disabled if set disabled attribute to true', fakeAsync(() => {
-        expect(counterEl.classList.contains('evo-counter_disabled')).toBeFalsy();
-        expect(component.disabled).toBeFalsy();
-        component.disabled = true;
-        fixture.debugElement.triggerEventHandler('click', null);
-        fixture.detectChanges();
-        expect(component.disabled).toBeTruthy();
-        expect(
-            fixture.nativeElement.querySelector('.evo-counter').classList.contains('evo-counter_disabled'),
-        ).toBeTruthy();
-    }));
-
-    it('should be normal if size is not set', () => {
-        expect(component.size).toEqual(EvoCounterSize.normal);
-        expect(
-            fixture.nativeElement.querySelector('.evo-counter').classList.contains('evo-counter_size-small'),
-        ).toBeFalsy();
-    });
-
-    it('should be small if set small size', fakeAsync(() => {
-        expect(counterEl.classList.contains('evo-counter_size-small')).toBeFalsy();
-        expect(component.size).toEqual(EvoCounterSize.normal);
-        component.setSize = EvoCounterSize.small;
-        fixture.debugElement.triggerEventHandler('click', null);
-        fixture.detectChanges();
-        expect(component.size).toEqual(EvoCounterSize.small);
-        expect(
-            fixture.nativeElement.querySelector('.evo-counter').classList.contains('evo-counter_size-small'),
-        ).toBeTruthy();
-    }));
-
-    it('should be normal if set incorrect size', () => {
-        expect(component.size).toEqual(EvoCounterSize.normal);
-        component.setSize = 'incorrect' as EvoCounterSize;
-        fixture.debugElement.triggerEventHandler('click', null);
-        fixture.detectChanges();
-        expect(component.size).toEqual(EvoCounterSize.normal);
-        expect(
-            fixture.nativeElement.querySelector('.evo-counter').classList.contains('evo-counter_size-small'),
-        ).toBeFalsy();
-    });
-});
diff --git a/projects/evo-ui-kit/src/lib/components/evo-counter/evo-counter.component.ts b/projects/evo-ui-kit/src/lib/components/evo-counter/evo-counter.component.ts
deleted file mode 100644
index e8d088c50..000000000
--- a/projects/evo-ui-kit/src/lib/components/evo-counter/evo-counter.component.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
-import {EvoUiClassDirective} from '../../directives/evo-ui-class.directive';
-
-export enum EvoCounterSize {
-    small = 'small',
-    normal = 'normal',
-}
-
-@Component({
-    selector: 'evo-counter',
-    templateUrl: './evo-counter.component.html',
-    styleUrls: ['./evo-counter.component.scss'],
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    standalone: true,
-    imports: [EvoUiClassDirective],
-})
-export class EvoCounterComponent {
-    @Input() value: number;
-    @Input() disabled: boolean;
-
-    size: EvoCounterSize = EvoCounterSize.normal;
-
-    @Input('size') set setSize(size: EvoCounterSize | string) {
-        if (EvoCounterSize[size]) {
-            this.size = EvoCounterSize[size];
-        }
-    }
-
-    get blockClasses(): {[cssClass: string]: boolean} {
-        return {
-            disabled: this.disabled,
-            [`size-${this.size}`]: this.size !== EvoCounterSize.normal,
-        };
-    }
-}
diff --git a/projects/evo-ui-kit/src/lib/components/evo-counter/evo-counter.module.ts b/projects/evo-ui-kit/src/lib/components/evo-counter/evo-counter.module.ts
index 92b6c8e53..d14643abf 100644
--- a/projects/evo-ui-kit/src/lib/components/evo-counter/evo-counter.module.ts
+++ b/projects/evo-ui-kit/src/lib/components/evo-counter/evo-counter.module.ts
@@ -1,5 +1,5 @@
 import {NgModule} from '@angular/core';
-import {EvoCounterComponent} from './evo-counter.component';
+import {EvoCounterComponent} from './components/evo-counter/evo-counter.component';
 
 @NgModule({
     imports: [EvoCounterComponent],
diff --git a/projects/evo-ui-kit/src/lib/components/evo-counter/public-api.ts b/projects/evo-ui-kit/src/lib/components/evo-counter/public-api.ts
index cd7a48b06..102811b3b 100644
--- a/projects/evo-ui-kit/src/lib/components/evo-counter/public-api.ts
+++ b/projects/evo-ui-kit/src/lib/components/evo-counter/public-api.ts
@@ -1,2 +1,3 @@
-export * from './evo-counter.component';
+export * from './components/evo-counter/evo-counter.component';
+export * from './enums/evo-counter-size';
 export * from './evo-counter.module';
diff --git a/src/stories/components/evo-counter.stories.ts b/src/stories/components/evo-counter.stories.ts
index 79919d0ff..874a3d380 100644
--- a/src/stories/components/evo-counter.stories.ts
+++ b/src/stories/components/evo-counter.stories.ts
@@ -1,5 +1,5 @@
 import {moduleMetadata} from '@storybook/angular';
-import {EvoCounterModule} from 'projects/evo-ui-kit/src/lib/components/evo-counter';
+import {EvoCounterModule, EvoCounterSize} from 'projects/evo-ui-kit/src/public_api';
 
 export default {
     title: 'Components/Counter',
@@ -33,10 +33,20 @@ export const Default = () => ({
         <div class='section'>
             <h4>Small counter</h4>
             <span class="counter-block">
-                <evo-counter [value]='1' size='small'></evo-counter>
+                <evo-counter [value]='1' size='${EvoCounterSize.SMALL}'></evo-counter>
             </span>
             <span class="counter-block">
-                <evo-counter [value]='32131' size='small'></evo-counter>
+                <evo-counter [value]='32131' size='${EvoCounterSize.SMALL}'></evo-counter>
+            </span>
+        </div>
+
+         <div class='section'>
+            <h4>Large counter</h4>
+            <span class="counter-block">
+                <evo-counter [value]='1' size='${EvoCounterSize.LARGE}'></evo-counter>
+            </span>
+            <span class="counter-block">
+                <evo-counter [value]='32131' size='${EvoCounterSize.LARGE}'></evo-counter>
             </span>
         </div>
 
@@ -46,7 +56,7 @@ export const Default = () => ({
                 <evo-counter [value]='1' [disabled]='true'></evo-counter>
             </span>
             <span class="counter-block">
-                <evo-counter [value]='1' [disabled]='true' size='small'></evo-counter>
+                <evo-counter [value]='1' [disabled]='true' size='${EvoCounterSize.SMALL}'></evo-counter>
             </span>
         </div>
         `,

From 86e5473558e35880c99796cd76bd32b398d68be7 Mon Sep 17 00:00:00 2001
From: "a.kiselev" <a.kiselev@evotor.ru>
Date: Fri, 20 Feb 2026 13:08:42 +0300
Subject: [PATCH 3/3] refactor(evo-chip): use inner css variables

---
 .../evo-chip/evo-chip.component.html          |  70 ++--
 .../evo-chip/evo-chip.component.spec.ts       |  76 +++--
 .../components/evo-chip/evo-chip.component.ts | 127 ++++----
 .../src/lib/styles/components/evo-chip.scss   | 307 ++++++++++--------
 .../evo-ui-kit/src/lib/styles/variables.scss  |   2 +
 src/stories/components/evo-chip.stories.ts    |   7 +-
 6 files changed, 319 insertions(+), 270 deletions(-)

diff --git a/projects/evo-ui-kit/src/lib/components/evo-chip/evo-chip.component.html b/projects/evo-ui-kit/src/lib/components/evo-chip/evo-chip.component.html
index c4829061d..159a9baac 100644
--- a/projects/evo-ui-kit/src/lib/components/evo-chip/evo-chip.component.html
+++ b/projects/evo-ui-kit/src/lib/components/evo-chip/evo-chip.component.html
@@ -1,48 +1,48 @@
-<label class="chip" [evoUiClass]="classes">
-    @switch (type) {
-        @case (EvoChipType.checkbox) {
-            <input
+<div class="chip" [evoUiClass]="classes">
+    <label class="chip__label">
+        @switch (type()) {
+            @case (EvoChipType.checkbox) {
+                <input
                     type="checkbox"
                     class="chip__input"
-                    [disabled]="disabled"
-                    [name]="name"
-                    [ngModel]="value"
-                    [value]="inheritedValue"
+                    [disabled]="disabled()"
+                    [name]="name()"
+                    [ngModel]="currentValue()"
+                    [value]="chipValue()"
                     (ngModelChange)="onInputChange($event)"
-            />
-        }
-        @case (EvoChipType.radio) {
-            <input
+                />
+            }
+            @case (EvoChipType.radio) {
+                <input
                     type="radio"
                     class="chip__input"
-                    [disabled]="disabled"
-                    [name]="name"
-                    [ngModel]="value"
-                    [value]="inheritedValue"
+                    [disabled]="disabled()"
+                    [name]="name()"
+                    [ngModel]="currentValue()"
+                    [value]="chipValue()"
                     (ngModelChange)="onInputChange($event)"
-            />
+                />
+            }
         }
-    }
 
-    <div class="chip__label" [evoUiClass]="{'disabled': disabled}">
         <span class="chip__text">
-            <ng-content />
+            <ng-content/>
         </span>
 
-        @if (hasCounter) {
-            <div class="chip__counter">{{ counter }}</div>
+        @if (hasCounter()) {
+            <evo-counter [value]="counter()"/>
         }
+    </label>
 
-        @if (closable) {
-            <button
-                    type="button"
-                    class="chip__close"
-                    [disabled]="disabled"
-                    [title]="closeTitle"
-                    (click)="onCloseClick($event)"
-            >
-                <evo-icon shape="close" class="chip__close-icon" />
-            </button>
-        }
-    </div>
-</label>
+    @if (closable()) {
+        <button
+            type="button"
+            class="chip__close-btn"
+            [disabled]="disabled()"
+            [title]="closeTitle()"
+            (click)="onCloseClick($event)"
+        >
+            <evo-icon shape="close" class="chip__close-icon"/>
+        </button>
+    }
+</div>
diff --git a/projects/evo-ui-kit/src/lib/components/evo-chip/evo-chip.component.spec.ts b/projects/evo-ui-kit/src/lib/components/evo-chip/evo-chip.component.spec.ts
index 7c47e76c6..2829c17c6 100644
--- a/projects/evo-ui-kit/src/lib/components/evo-chip/evo-chip.component.spec.ts
+++ b/projects/evo-ui-kit/src/lib/components/evo-chip/evo-chip.component.spec.ts
@@ -1,10 +1,12 @@
-import {createHostFactory, SpectatorHost} from '@ngneat/spectator';
-import {EvoChipComponent, EvoChipTheme, EvoChipType} from './evo-chip.component';
+import {Component, DebugElement, QueryList, ViewChildren} from '@angular/core';
+import {fakeAsync, tick} from '@angular/core/testing';
 import {FormsModule, ReactiveFormsModule, UntypedFormArray, UntypedFormControl, UntypedFormGroup} from '@angular/forms';
-import {Component, QueryList, ViewChildren} from '@angular/core';
+import {By} from '@angular/platform-browser';
+import {createHostFactory, SpectatorHost} from '@ngneat/spectator';
 import {EvoUiClassDirective} from '../../directives';
-import {fakeAsync, tick} from '@angular/core/testing';
+import {EvoCounterComponent} from '../evo-counter';
 import {EvoIconComponent} from '../evo-icon';
+import {EvoChipComponent, EvoChipTheme, EvoChipType} from './evo-chip.component';
 
 @Component({selector: 'evo-host-component', template: ''})
 class TestHostComponent {
@@ -18,7 +20,8 @@ class TestHostComponent {
         radios: new UntypedFormControl(''),
     });
 
-    onCloseClick(e: Event) {}
+    onCloseClick(e: Event): void {
+    }
 }
 
 const createHost = createHostFactory({
@@ -55,8 +58,8 @@ describe('EvoChipsComponent', () => {
             <evo-chip name="myChip" value="3">Chip 3</evo-chip>
         `);
         evoChipComponents.forEach((chip: EvoChipComponent) => {
-            expect(chip.type).toEqual(EvoChipType.radio);
-            expect(chip.theme).toEqual(EvoChipTheme.grey);
+            expect(chip.type()).toEqual(EvoChipType.radio);
+            expect(chip.theme()).toEqual(EvoChipTheme.grey);
         });
     });
 
@@ -77,11 +80,11 @@ describe('EvoChipsComponent', () => {
 
         evoChipComponents.forEach((chip: EvoChipComponent, index: number) => {
             if (index === 1) {
-                expect(chip.type).toEqual(EvoChipType.radio);
-                expect(chip.theme).toEqual(EvoChipTheme.grey);
+                expect(chip.type()).toEqual(EvoChipType.radio);
+                expect(chip.theme()).toEqual(EvoChipTheme.grey);
             } else {
-                expect(chip.type).toEqual(EvoChipType.checkbox);
-                expect(chip.theme).toEqual(EvoChipTheme.white);
+                expect(chip.type()).toEqual(EvoChipType.checkbox);
+                expect(chip.theme()).toEqual(EvoChipTheme.white);
             }
         });
     });
@@ -112,52 +115,52 @@ describe('EvoChipsComponent', () => {
         expect(inputElement === null).toBeTruthy();
     });
 
-    it('should have class chip_theme-grey when theme is not passed', () => {
+    it('should have class chip_theme_grey when theme is not passed', () => {
         createHostByTemplate(`
             <evo-chip name="myChip" value="1">Chip 1</evo-chip>
         `);
         const chipWrapperElement = host.hostFixture.nativeElement.querySelector('evo-chip .chip');
-        expect(chipWrapperElement).toHaveClass('chip_theme-grey');
+        expect(chipWrapperElement).toHaveClass('chip_theme_grey');
     });
 
-    it('should have class chip_theme-white when theme is passed', () => {
+    it('should have class chip_theme_white when theme is passed', () => {
         createHostByTemplate(`
             <evo-chip theme="white" name="myChip" value="1">Chip 1</evo-chip>
         `);
         const chipWrapperElement = host.hostFixture.nativeElement.querySelector('evo-chip .chip');
-        expect(chipWrapperElement).toHaveClass('chip_theme-white');
+        expect(chipWrapperElement).toHaveClass('chip_theme_white');
     });
 
-    it('should have class chip_theme-grey when theme is passed', () => {
+    it('should have class chip_theme_grey when theme is passed', () => {
         createHostByTemplate(`
             <evo-chip theme="grey" name="myChip" value="1">Chip 1</evo-chip>
         `);
         const chipWrapperElement = host.hostFixture.nativeElement.querySelector('evo-chip .chip');
-        expect(chipWrapperElement).toHaveClass('chip_theme-grey');
+        expect(chipWrapperElement).toHaveClass('chip_theme_grey');
     });
 
-    it('should have class chip_size-normal when size is not passed', () => {
+    it('should have class chip_size_normal when size is not passed', () => {
         createHostByTemplate(`
             <evo-chip theme="grey" name="myChip" value="1">Chip 1</evo-chip>
         `);
         const chipWrapperElement = host.hostFixture.nativeElement.querySelector('evo-chip .chip');
-        expect(chipWrapperElement).toHaveClass('chip_size-normal');
+        expect(chipWrapperElement).toHaveClass('chip_size_normal');
     });
 
-    it('should have class chip_size-normal when size=normal is passed', () => {
+    it('should have class chip_size_normal when size=normal is passed', () => {
         createHostByTemplate(`
             <evo-chip theme="grey" size="normal" name="myChip" value="1">Chip 1</evo-chip>
         `);
         const chipWrapperElement = host.hostFixture.nativeElement.querySelector('evo-chip .chip');
-        expect(chipWrapperElement).toHaveClass('chip_size-normal');
+        expect(chipWrapperElement).toHaveClass('chip_size_normal');
     });
 
-    it('should have class chip_size-large when size=large is passed', () => {
+    it('should have class chip_size_large when size=large is passed', () => {
         createHostByTemplate(`
             <evo-chip theme="grey" size="large" name="myChip" value="1">Chip 1</evo-chip>
         `);
         const chipWrapperElement = host.hostFixture.nativeElement.querySelector('evo-chip .chip');
-        expect(chipWrapperElement).toHaveClass('chip_size-large');
+        expect(chipWrapperElement).toHaveClass('chip_size_large');
     });
 
     it('should be disabled and non-clickable if disabled param is passed', fakeAsync(() => {
@@ -205,7 +208,7 @@ describe('EvoChipsComponent', () => {
         evoChipComponents.forEach((chip: EvoChipComponent, index: number) => {
             chipElements[index].querySelector('label').dispatchEvent(new MouseEvent('click'));
             host.detectChanges();
-            expect(chip.value === host.hostComponent.values[index]).toBeTruthy();
+            expect(chip.currentValue() === host.hostComponent.values[index]).toBeTruthy();
         });
     });
 
@@ -249,7 +252,7 @@ describe('EvoChipsComponent', () => {
         host.detectChanges();
         const chipElements = host.hostFixture.nativeElement.querySelectorAll('evo-chip');
         chipElements.forEach((chip: HTMLElement, index: number) => {
-            expect(chip.querySelector('.chip__close') === null).toBeFalsy();
+            expect(chip.querySelector('.chip__close-btn') === null).toBeFalsy();
         });
     });
 
@@ -261,10 +264,11 @@ describe('EvoChipsComponent', () => {
         `);
 
         host.detectChanges();
-        const chipElements = host.hostFixture.nativeElement.querySelectorAll('evo-chip');
-        chipElements.forEach((chip: HTMLElement, index: number) => {
-            expect(chip.querySelector('.chip__close') === null).toBeTruthy();
-            expect(chip.querySelector('.chip__counter') === null).toBeFalsy();
+        const chipDebugElements = host.hostFixture.debugElement.queryAll(By.css('evo-chip'));
+
+        chipDebugElements.forEach((chipDebug: DebugElement) => {
+            expect(chipDebug.query(By.css('.chip__close-btn'))).toBeFalsy();
+            expect(chipDebug.query(By.directive(EvoCounterComponent))).toBeTruthy();
         });
     });
 
@@ -276,10 +280,10 @@ describe('EvoChipsComponent', () => {
         `);
 
         host.detectChanges();
-        const chipElements = host.hostFixture.nativeElement.querySelectorAll('evo-chip');
-        chipElements.forEach((chip: HTMLElement, index: number) => {
-            expect(chip.querySelector('.chip__close') === null).toBeFalsy();
-            expect(chip.querySelector('.chip__counter') === null).toBeTruthy();
+        const chipDebugElements = host.hostFixture.debugElement.queryAll(By.css('evo-chip'));
+        chipDebugElements.forEach((chipDebug: DebugElement) => {
+            expect(chipDebug.query(By.css('.chip__close-btn'))).toBeTruthy();
+            expect(chipDebug.query(By.directive(EvoCounterComponent))).toBeFalsy();
         });
     });
 
@@ -295,7 +299,7 @@ describe('EvoChipsComponent', () => {
         host.detectChanges();
         const chipElement = host.hostFixture.nativeElement.querySelector('evo-chip');
         const e = new MouseEvent('click');
-        chipElement.querySelector('.chip__close').dispatchEvent(e);
+        chipElement.querySelector('.chip__close-btn').dispatchEvent(e);
         expect(host.hostComponent.onCloseClick).toHaveBeenCalledWith(e);
     }));
 
@@ -310,7 +314,7 @@ describe('EvoChipsComponent', () => {
 
         host.detectChanges();
         const chipElement = host.hostFixture.nativeElement.querySelector('evo-chip');
-        chipElement.querySelector('.chip__close').click();
+        chipElement.querySelector('.chip__close-btn').click();
         expect(host.hostComponent.onCloseClick).not.toHaveBeenCalled();
     }));
 
@@ -331,7 +335,7 @@ describe('EvoChipsComponent', () => {
         host.detectChanges();
 
         expect(onChangeSpy).not.toHaveBeenCalled();
-        expect(chipComponent.value).toBe(true);
+        expect(chipComponent.currentValue()).toBe(true);
 
         // Сбрасываем spy
         onChangeSpy.calls.reset();
diff --git a/projects/evo-ui-kit/src/lib/components/evo-chip/evo-chip.component.ts b/projects/evo-ui-kit/src/lib/components/evo-chip/evo-chip.component.ts
index 52477cd5e..04b7454b4 100644
--- a/projects/evo-ui-kit/src/lib/components/evo-chip/evo-chip.component.ts
+++ b/projects/evo-ui-kit/src/lib/components/evo-chip/evo-chip.component.ts
@@ -2,19 +2,23 @@ import {
     AfterViewInit,
     ChangeDetectionStrategy,
     ChangeDetectorRef,
-    Component, DestroyRef,
-    EventEmitter,
-    forwardRef, inject,
-    Injector,
-    Input,
-    Output,
+    Component,
+    computed,
+    DestroyRef,
+    forwardRef,
+    inject,
+    input,
+    model,
+    output,
+    signal,
 } from '@angular/core';
+import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 import {ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR} from '@angular/forms';
 import {EvoBaseControl} from '../../common/evo-base-control';
 import {EvoControlStates} from '../../common/evo-control-state-manager/evo-control-states.enum';
 import {EvoUiClassDirective} from '../../directives';
-import {EvoIconComponent} from '../evo-icon';
-import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
+import {EvoCounterComponent} from '../evo-counter';
+import {EvoIconComponent} from "../evo-icon";
 
 export enum EvoChipType {
     radio = 'radio', // default
@@ -36,80 +40,79 @@ export type EvoChipSize = 'normal' | 'large';
     providers: [
         {
             provide: NG_VALUE_ACCESSOR,
-            useExisting: forwardRef(() => EvoChipComponent),
+            useExisting: forwardRef((): typeof EvoChipComponent => EvoChipComponent),
             multi: true,
         },
     ],
     standalone: true,
-    imports: [EvoUiClassDirective, FormsModule, EvoIconComponent],
+    imports: [EvoUiClassDirective, FormsModule, EvoCounterComponent, EvoIconComponent],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class EvoChipComponent extends EvoBaseControl implements ControlValueAccessor, AfterViewInit {
-    @Input() type: EvoChipType | string = EvoChipType.radio;
-    @Input() theme: EvoChipTheme | string = EvoChipTheme.grey;
-    @Input() size: EvoChipSize = 'normal';
-    @Input() counter: number;
-    @Input() disabled: boolean;
-    @Input() name: string;
-    @Input() closable: boolean;
-    @Input() closeTitle = '';
-
-    // eslint-disable-next-line @angular-eslint/no-output-native
-    @Output() close = new EventEmitter<Event>();
+    readonly chipValue = input<unknown>(undefined, {
+        alias: 'value'
+    });
+
+    readonly type = input<EvoChipType | string>(EvoChipType.radio);
+
+    readonly theme = input<EvoChipTheme | string>(EvoChipTheme.grey);
+
+    readonly size = input<EvoChipSize>('normal');
+
+    readonly counter = input<number | undefined>(undefined);
+
+    readonly disabled = model(false);
+
+    readonly name = input<string | undefined>(undefined);
+
+    readonly closable = input(false);
+
+    readonly closeTitle = input('');
+
+    readonly close = output<Event>();
+
+    readonly hasCounter = computed((): boolean =>
+        (this.type() !== EvoChipType.label || !this.closable()) && this.counter() !== undefined);
+
+    readonly currentValue = signal<unknown>(undefined);
 
     // eslint-disable-next-line @typescript-eslint/naming-convention
     readonly EvoChipType = EvoChipType;
 
-    // eslint-disable-next-line
-    inheritedValue: any;
-    // eslint-disable-next-line
-    value: any;
-
     private readonly destroyRef = inject(DestroyRef);
     private readonly cdr = inject(ChangeDetectorRef);
 
-    // eslint-disable-next-line
-    @Input('value') set setInitialValue(value: any) {
-        this.inheritedValue = value;
-    }
+    get classes(): Record<string, boolean> {
+        const theme = this.theme();
+        const type = this.type();
+        const size = this.size();
 
-    get classes(): string[] {
-        const states = {
-            touched: this.control?.touched,
+        return {
             valid: this.currentState[EvoControlStates.valid],
             invalid: this.currentState[EvoControlStates.invalid],
-            disabled: this.disabled,
+            disabled: this.disabled(),
+            [`theme_${theme}`]: !!theme,
+            [`type_${type}`]: !!type,
+            [`size_${size}`]: !!size,
+            'has-counter': this.hasCounter(),
+            'is-closable': this.closable(),
         };
-
-        const result = Object.keys(states).filter((key: string) => states[key]);
-
-        result.push(`theme-${this.theme || EvoChipTheme.grey}`);
-        result.push(`type-${this.type || EvoChipType.radio}`);
-        result.push(`size-${this.size || 'normal'}`);
-
-        return result;
-    }
-
-    get hasCounter(): boolean {
-        return (this.type !== EvoChipType.label || !this.closable) && this.counter !== undefined;
     }
 
     ngAfterViewInit(): void {
-        if (this.control) {
-            this.control.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
-                this.writeValue(this.control.value);
-            });
+        if (!this.control) {
+            return;
         }
+
+        this.control.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((): void => this.writeValue(this.control.value));
     }
 
-    // eslint-disable-next-line
-    writeValue(value: any): void {
-        this.value = value;
+    writeValue(value: unknown): void {
+        this.currentValue.set(value);
         this.cdr.markForCheck();
     }
 
-    // eslint-disable-next-line
-    registerOnChange(fn: (_: any) => void): void {
+    registerOnChange(fn: (_: unknown) => void): void {
         this.onChange = fn;
     }
 
@@ -118,13 +121,12 @@ export class EvoChipComponent extends EvoBaseControl implements ControlValueAcce
     }
 
     setDisabledState(state: boolean): void {
-        this.disabled = state;
+        this.disabled.set(state);
         this.cdr.markForCheck();
     }
 
-    // eslint-disable-next-line
-    onInputChange(value: any): void {
-        this.value = value;
+    onInputChange(value: unknown): void {
+        this.currentValue.set(value);
         this.onChange(value);
         this.onTouched();
         this.cdr.markForCheck();
@@ -134,8 +136,9 @@ export class EvoChipComponent extends EvoBaseControl implements ControlValueAcce
         this.close.emit(e);
     }
 
-    // eslint-disable-next-line
-    onChange(_value: any): void {}
+    onChange(_value: unknown): void {
+    }
 
-    onTouched(): void {}
+    onTouched(): void {
+    }
 }
diff --git a/projects/evo-ui-kit/src/lib/styles/components/evo-chip.scss b/projects/evo-ui-kit/src/lib/styles/components/evo-chip.scss
index 6fe8ed623..cdd1ef1b5 100644
--- a/projects/evo-ui-kit/src/lib/styles/components/evo-chip.scss
+++ b/projects/evo-ui-kit/src/lib/styles/components/evo-chip.scss
@@ -1,178 +1,213 @@
 @use '../mixins.scss';
 
 :host {
-  --evo-chip-color: #{mixins.$color-link};
-  --evo-chip-color-hover: #{mixins.$color-link-hover};
-  --evo-chip-color-active: #{mixins.$color-link-active};
+    --evo-chip-color: #{mixins.$color-link};
+    --evo-chip-color-hover: #{mixins.$color-link-hover};
+    --evo-chip-color-active: #{mixins.$color-link-active};
 
-  --evo-chip-background-color: #{mixins.$color-background-grey};
-  --evo-chip-background-color-hover: #{mix(mixins.$color-white, mixins.$color-background-grey, 20%)};
-  --evo-chip-background-color-active: #{mix(mixins.$color-black, mixins.$color-background-grey, 10%)};
+    --evo-chip-background-color: #{mixins.$color-background-grey};
+    --evo-chip-background-color-hover: #{mixins.$color-grey-hover};
+    --evo-chip-background-color-active: #{mixins.$color-grey-active};
 
-  --evo-chip-checked-color: #{mixins.$color-white};
-  --evo-chip-checked-color-hover: #{mixins.$color-white};
-  --evo-chip-checked-color-active: #{mixins.$color-white};
+    --evo-chip-checked-color: #{mixins.$color-white};
+    --evo-chip-checked-color-hover: #{mixins.$color-white};
+    --evo-chip-checked-color-active: #{mixins.$color-white};
 
-  --evo-chip-checked-background-color: #{mixins.$color-link};
-  --evo-chip-checked-background-color-hover: #{mixins.$color-link-hover};
-  --evo-chip-checked-background-color-active: #{mixins.$color-link-active};
+    --evo-chip-checked-background-color: #{mixins.$color-link};
+    --evo-chip-checked-background-color-hover: #{mixins.$color-link-hover};
+    --evo-chip-checked-background-color-active: #{mixins.$color-link-active};
 }
 
 .chip {
-  $root: &;
+    $root: &;
 
-  --evo-chip-height: 32px;
-  --evo-chip-padding: 4px 8px;
+    position: relative;
+    max-width: 100%;
 
-  position: relative;
-  display: inline-flex;
-  max-width: 100%;
+    --inner-height: 32px;
 
-  &_theme-white {
-    --evo-chip-background-color: #{mixins.$color-white};
-    --evo-chip-background-color-hover: #{mixins.$color-white};
-    --evo-chip-background-color-active: #{mixins.$color-white};
-  }
+    --inner-padding: 4px 8px;
+    --inner-padding-right: 8px;
 
-  &_size-large {
-    --evo-chip-height: 40px;
-    --evo-chip-padding: 8px 12px;
-  }
+    --inner-bg: var(--evo-chip-background-color);
+    --inner-color: var(--evo-chip-color);
 
-  &__input {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-  }
+    --inner-cursor: pointer;
 
-  &__label {
-    display: flex;
-    gap: 8px;
-    align-items: center;
+    --inner-close-right: 2px;
+    --inner-close-padding: 2px;
+    --inner-close-active-bg: #{mixins.$color-cool-gray-06};
 
-    height: var(--evo-chip-height);
+    &_disabled {
+        --inner-bg: #{mixins.$color-disabled} !important;
+        --inner-color: #{mixins.$color-white} !important;
 
-    padding: var(--evo-chip-padding);
-    overflow: hidden;
-    text-overflow: ellipsis;
+        --inner-cursor: default;
+    }
 
-    color: var(--evo-chip-color);
-    background-color: var(--evo-chip-background-color);
-    border-radius: 8px;
+    &:has(#{$root}__input:checked) {
+        --inner-bg: var(--evo-chip-checked-background-color);
+        --inner-color: var(--evo-chip-checked-color);
+
+        &:hover,
+        &:has(:focus-visible) {
+            --inner-bg: var(--evo-chip-checked-background-color-hover);
+            --inner-color: var(--evo-chip-checked-color-hover);
+        }
+
+        &:active,
+        &:has(:active) {
+            --inner-bg: var(--evo-chip-checked-background-color-active);
+            --inner-color: var(--evo-chip-checked-color-active);
+        }
+    }
 
-    @include mixins.evo-text-paragraph(p4);
+    &_theme_grey {
+        --inner-bg: var(--evo-chip-background-color);
+        --inner-color: var(--evo-chip-color);
+        --inner-close-active-bg: #{mixins.$color-cool-gray-06};
+
+        &:hover,
+        &:has(:focus-visible) {
+            --inner-bg: var(--evo-chip-background-color-hover);
+            --inner-color: var(--evo-chip-color-hover);
+        }
+
+        &:active,
+        &:has(:active) {
+            --inner-bg: var(--evo-chip-background-color-active);
+            --inner-color: var(--evo-chip-color-active);
+        }
+    }
 
-    cursor: pointer;
-    user-select: none;
+    &_theme_white {
+        --inner-bg: #{mixins.$color-white};
+        --inner-close-active-bg: #{mixins.$color-cool-gray-12};
 
-    transition: color 0.3s, background 0.3s;
+        &:hover,
+        &:has(:focus-visible) {
+            --inner-color: #{mixins.$color-link-hover};
+        }
 
-    &:hover,
-    #{$root}__input:focus ~ & {
-      background-color: var(--evo-chip-background-color-hover);
-      color: var(--evo-chip-color-hover);
+        &:active,
+        &:has(:active) {
+            --inner-color: #{mixins.$color-link-active};
+        }
     }
 
-    &:active,
-    #{$root}__input:active ~ & {
-      background-color: var(--evo-chip-background-color-active);
-      color: var(--evo-chip-color-active);
+    &_theme_grey,
+    &_theme_white {
+        &#{$root}_type_label {
+            --inner-bg: var(--evo-chip-checked-background-color);
+            --inner-color: var(--evo-chip-checked-color);
+            --inner-close-active-bg: #{mixins.$color-cool-gray-12};
+            --inner-cursor: default;
+        }
     }
 
-    #{$root}__input:checked ~ & {
-      background-color: var(--evo-chip-checked-background-color);
-      color: var(--evo-chip-checked-color);
-    }
+    &_size_normal {
+        --inner-height: 32px;
+        --inner-padding: 4px 8px;
+        --inner-padding-right: 8px;
 
-    #{$root}__input:checked ~ &:hover,
-    #{$root}__input:checked:focus ~ & {
-      background-color: var(--evo-chip-checked-background-color-hover);
-      color: var(--evo-chip-checked-color-hover);
-    }
+        &#{$root}_has-counter {
+            --inner-padding-right: 4px;
+        }
 
-    #{$root}__input:checked ~ &:active,
-    #{$root}__input:checked:active ~ & {
-      background-color: var(--evo-chip-checked-background-color-active);
-      color: var(--evo-chip-checked-color-active);
+        &#{$root}_is-closable {
+            --inner-close-padding: 2px;
+            --inner-close-right: 2px;
+            --inner-padding-right: 36px;
+        }
     }
 
-    #{$root}_type-label & {
-      background-color: var(--evo-chip-checked-background-color) !important;
-      color: var(--evo-chip-checked-color) !important;
-      cursor: default;
-    }
+    &_size_large {
+        --inner-height: 40px;
+        --inner-padding: 8px 12px;
+        --inner-padding-right: 12px;
 
-    #{$root}_disabled & {
-      background-color: mixins.$color-disabled !important;
-      color: mixins.$color-white !important;
-      cursor: default;
+        &#{$root}_has-counter {
+            --inner-padding-right: 8px;
+        }
+
+        &#{$root}_is-closable {
+            --inner-close-padding: 4px;
+            --inner-close-right: 4px;
+            --inner-padding-right: 40px;
+        }
     }
-  }
 
-  &__text {
-    max-width: 100%;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-
-  &__counter {
-    display: flex;
-    justify-content: center;
-    flex-shrink: 0;
-    align-items: center;
-    min-width: 20px;
-    height: 20px;
-    padding: 1px 6px;
-    overflow: hidden;
-    color: mixins.$color-white;
-    font-weight: 600;
-    font-size: 13px;
-    background-color: mixins.$color-primary;
-    border-radius: 32px;
-    margin: 2px;
-  }
-
-  &__close {
-    position: relative;
-    display: block;
-    width: 24px;
-    height: 24px;
-    cursor: pointer;
-    flex-shrink: 0;
-    color: mixins.$color-link;
-    background: none;
-    transition: 0.3s color;
-
-    &:hover {
-      color: mixins.$color-link-hover;
+    &__input {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
     }
 
-    &:active {
-      color: mixins.$color-link-active;
+    &__label {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+
+        height: var(--inner-height);
+
+        padding: var(--inner-padding);
+        padding-right: var(--inner-padding-right);
+
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        background-color: var(--inner-bg);
+        color: var(--inner-color);
+
+        border-radius: 8px;
+
+        @include mixins.evo-text-paragraph(p4);
+
+        cursor: var(--inner-cursor);
+        user-select: none;
+
+        transition: color 0.3s, background 0.3s;
     }
 
-    &:disabled {
-      cursor: default;
-      color: mixins.$color-white !important;
+    &__text {
+        max-width: 100%;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
     }
 
-    #{$root}_type-label &,
-    #{$root}__input:checked ~ #{$root}__label & {
-      color: mixins.$color-white;
+    &__close-btn {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        right: var(--inner-close-right);
+        display: flex;
+        padding: var(--inner-close-padding);
+        cursor: pointer;
+        color: var(--inner-color);
+        background-color: transparent;
+        transition: 0.3s color, 0.3s background-color;
+        border-radius: 4px;
+
+        &:hover,
+        &:focus-visible,
+        &:active {
+            background-color: var(--inner-close-active-bg);
+        }
+
+        &:disabled {
+            background-color: transparent;
+            cursor: default;
+        }
+    }
 
-      &:active {
-        color: var(--evo-chip-background-color-active);
-      }
+    &__close-icon {
+        width: 24px;
+        height: 24px;
+        fill: currentColor;
+        background: none;
+        margin: auto;
     }
-  }
-
-  &__close-icon {
-    width: 100%;
-    height: 100%;
-    fill: currentColor;
-    background: none;
-  }
 }
diff --git a/projects/evo-ui-kit/src/lib/styles/variables.scss b/projects/evo-ui-kit/src/lib/styles/variables.scss
index 27a137e23..569b72c65 100644
--- a/projects/evo-ui-kit/src/lib/styles/variables.scss
+++ b/projects/evo-ui-kit/src/lib/styles/variables.scss
@@ -53,6 +53,8 @@ $color-icon-dark-active: #829fa6;
 
 $color-cool-gray: #001D26;
 $color-cool-gray-04: rgba($color-cool-gray, 0.04);
+$color-cool-gray-06: rgba($color-cool-gray, 0.06);
+$color-cool-gray-12: rgba($color-cool-gray, 0.12);
 
 $color-graph-1: #EB5365;
 $color-graph-2: #9474C9;
diff --git a/src/stories/components/evo-chip.stories.ts b/src/stories/components/evo-chip.stories.ts
index 9b8bc831f..db39b13b5 100644
--- a/src/stories/components/evo-chip.stories.ts
+++ b/src/stories/components/evo-chip.stories.ts
@@ -1,7 +1,9 @@
-import {moduleMetadata} from '@storybook/angular';
+import {applicationConfig, moduleMetadata} from '@storybook/angular';
 import {FormBuilder, FormControl, FormGroup, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {EvoChipModule} from '../../../projects/evo-ui-kit/src/lib/components/evo-chip';
 import {EvoButtonModule} from '../../../projects/evo-ui-kit/src/lib/components/evo-button';
+import {HttpClientModule} from '@angular/common/http';
+import {importProvidersFrom} from "@angular/core";
 
 const fb = new FormBuilder();
 const form = fb.group({
@@ -42,6 +44,9 @@ export default {
     title: 'Components/Chip',
 
     decorators: [
+        applicationConfig({
+            providers: [importProvidersFrom(HttpClientModule)],
+        }),
         moduleMetadata({
             imports: [EvoChipModule, EvoButtonModule, FormsModule, ReactiveFormsModule],
         }),