diff --git a/projects/addon-doc/directives/text-code/text-code.directive.ts b/projects/addon-doc/directives/text-code/text-code.directive.ts
index 3d522970e817..9f437bd7805e 100644
--- a/projects/addon-doc/directives/text-code/text-code.directive.ts
+++ b/projects/addon-doc/directives/text-code/text-code.directive.ts
@@ -1,5 +1,8 @@
 import {Directive, Input} from '@angular/core';
 
+/**
+ * @deprecated: use [textContent]="code"
+ */
 @Directive({
     standalone: true,
     selector: 'code[tuiDocText]',
diff --git a/projects/addon-mobile/directives/sidebar/sidebar.component.ts b/projects/addon-mobile/directives/sidebar/sidebar.component.ts
index 8a18b65342ea..168c92d28806 100644
--- a/projects/addon-mobile/directives/sidebar/sidebar.component.ts
+++ b/projects/addon-mobile/directives/sidebar/sidebar.component.ts
@@ -20,7 +20,7 @@ import {TuiSidebarDirective} from './sidebar.directive';
     changeDetection: ChangeDetectionStrategy.OnPush,
     animations: [tuiSlideIn],
     host: {
-        class: '"t-" + direction',
+        '[class]': '"t-" + direction',
         '[@tuiSlideIn]': 'animation',
     },
 })
diff --git a/projects/core/components/expand/expand.component.ts b/projects/core/components/expand/expand.component.ts
index b09fe15dc59c..161fa56c8f1d 100644
--- a/projects/core/components/expand/expand.component.ts
+++ b/projects/core/components/expand/expand.component.ts
@@ -136,7 +136,6 @@ export class TuiExpandComponent {
         }
     }
 
-    // noinspection JSUnusedGlobalSymbols
     protected onExpandLoaded(event: Event): void {
         event.stopPropagation();
 
diff --git a/projects/core/components/scrollbar/scrollbar.component.ts b/projects/core/components/scrollbar/scrollbar.component.ts
index 5dfac4836868..708445c47aba 100644
--- a/projects/core/components/scrollbar/scrollbar.component.ts
+++ b/projects/core/components/scrollbar/scrollbar.component.ts
@@ -57,12 +57,10 @@ export class TuiScrollbar {
         return this.browserScrollRef.nativeElement !== this.el;
     }
 
-    // noinspection JSUnusedGlobalSymbols
     protected onScrollable(element: HTMLElement): void {
         this.browserScrollRef.nativeElement = element;
     }
 
-    // noinspection JSUnusedGlobalSymbols
     protected scrollIntoView(detail: HTMLElement): void {
         if (this.delegated) {
             return;
diff --git a/projects/core/directives/dropdown/dropdown-context.directive.ts b/projects/core/directives/dropdown/dropdown-context.directive.ts
index ef378fc94243..24ef09fda362 100644
--- a/projects/core/directives/dropdown/dropdown-context.directive.ts
+++ b/projects/core/directives/dropdown/dropdown-context.directive.ts
@@ -36,7 +36,7 @@ const MOVE_THRESHOLD = 15;
             'onTouchStart($event.touches[0].clientX, $event.touches[0].clientY)',
         '(document:pointerdown.silent)': 'closeDropdown($event.target)',
         '(document:contextmenu.capture.silent)': 'closeDropdown($event.target)',
-        '(document:keydown.esc)': 'closeDropdown($event.target)',
+        '(document:keydown.esc)': 'closeDropdown($event.currentTarget)',
         '(contextmenu.prevent.stop)': 'onContextMenu($event.clientX, $event.clientY)',
     },
 })
diff --git a/projects/demo/src/modules/components/alert/index.html b/projects/demo/src/modules/components/alert/index.html
index 40f9a9e84f22..d8b76d4f609a 100644
--- a/projects/demo/src/modules/components/alert/index.html
+++ b/projects/demo/src/modules/components/alert/index.html
@@ -78,7 +78,7 @@
                 [(documentationPropertyValue)]="data"
             >
                 Input data of notification, type:
-                <code tuiDocText="<I>"></code>
+                <code [textContent]="'<I>'"></code>
             </ng-template>
             <ng-template
                 documentationPropertyName="autoClose"
@@ -138,7 +138,7 @@
                     You can also customize notification logic with a component. Inject
                     <code>POLYMORPHEUS_CONTEXT</code>
                     into the component to get context input data and to output results. It has the following interface:
-                    <code tuiDocText="TuiPopover<TuiAlertOptions<I>, O>"></code>
+                    <code [textContent]="'TuiPopover<TuiAlertOptions<I>, O>'"></code>
                     , where
                     <code>O</code>
                     is output data type and
diff --git a/projects/demo/src/modules/components/combo-box/index.html b/projects/demo/src/modules/components/combo-box/index.html
index 40e04378e725..1835174a62c5 100644
--- a/projects/demo/src/modules/components/combo-box/index.html
+++ b/projects/demo/src/modules/components/combo-box/index.html
@@ -221,7 +221,7 @@
                 [(documentationPropertyValue)]="strict"
             >
                 Value must only be an item of suggestions&nbsp;
-                <code tuiDocText="<T>"></code>
+                <code [textContent]="'<T>'"></code>
 
                 <p>
                     <strong>
@@ -232,7 +232,7 @@
                         can handle
                         <code>string</code>
                         value, as well as
-                        <code tuiDocText="<T>"></code>
+                        <code [textContent]="'<T>'"></code>
                     </strong>
                 </p>
             </ng-template>
diff --git a/projects/demo/src/modules/components/dialog/index.html b/projects/demo/src/modules/components/dialog/index.html
index d63ac7c8600d..0bf6bbd3790b 100644
--- a/projects/demo/src/modules/components/dialog/index.html
+++ b/projects/demo/src/modules/components/dialog/index.html
@@ -209,9 +209,9 @@ <h2 *ngIf="size === 'xl'">Template can be customized</h2>
 
                 <p>
                     Pass
-                    <code tuiDocText="Observable<boolean>"></code>
+                    <code [textContent]="'Observable<boolean>'"></code>
                     if you want prevent closing, for example, with a confirmation prompt. Be careful, passing
-                    <code tuiDocText="Observable<boolean>"></code>
+                    <code [textContent]="'Observable<boolean>'"></code>
                     will always display cross button even if it emits
                     <code>false</code>
                     value!
@@ -223,7 +223,7 @@ <h2 *ngIf="size === 'xl'">Template can be customized</h2>
                 [(documentationPropertyValue)]="dismissible"
             >
                 Dialog can be canceled with Escape key or with a click outside. Pass
-                <code tuiDocText="Observable<boolean>"></code>
+                <code [textContent]="'Observable<boolean>'"></code>
                 if you want prevent closing, for example, with a confirmation prompt.
             </ng-template>
             <ng-template
@@ -232,7 +232,7 @@ <h2 *ngIf="size === 'xl'">Template can be customized</h2>
                 [(documentationPropertyValue)]="data"
             >
                 Input data for dialog, type:
-                <code tuiDocText="<T>"></code>
+                <code [textContent]="'<T>'"></code>
             </ng-template>
             <ng-template
                 documentationPropertyName="header"
@@ -298,7 +298,7 @@ <h2 *ngIf="size === 'xl'">Template can be customized</h2>
                     in it. Dialog will provide this token with some useful options:
                     <code>$implicit</code>
                     with
-                    <code tuiDocText="Observer<O>"></code>
+                    <code [textContent]="'Observer<O>'"></code>
                     and
                     <code>completeWith</code>
                     hook to call
diff --git a/projects/demo/src/modules/components/input/index.html b/projects/demo/src/modules/components/input/index.html
index 6445426e73f2..52f0782e157a 100644
--- a/projects/demo/src/modules/components/input/index.html
+++ b/projects/demo/src/modules/components/input/index.html
@@ -291,7 +291,7 @@
                 [(documentationPropertyValue)]="placeholder"
             >
                 Placeholder (use external
-                <code tuiDocText="<input tuiTextfieldLegacy />"></code>
+                <code [textContent]="'<input tuiTextfieldLegacy />'"></code>
                 to set it)
             </ng-template>
         </tui-doc-documentation>
diff --git a/projects/demo/src/modules/components/progress-bar/examples/2/index.html b/projects/demo/src/modules/components/progress-bar/examples/2/index.html
index 463f2f4ddbfa..f9df187e6bb7 100644
--- a/projects/demo/src/modules/components/progress-bar/examples/2/index.html
+++ b/projects/demo/src/modules/components/progress-bar/examples/2/index.html
@@ -1,7 +1,7 @@
 <h6 class="description">Single color</h6>
 <p>
     Use
-    <code tuiDocText="<progress />"></code>
+    <code [textContent]="'<progress />'"></code>
     's CSS-property
     <code>color</code>
     to set solid color of progress indicator.
diff --git a/projects/demo/src/modules/components/progress-bar/examples/2/index.ts b/projects/demo/src/modules/components/progress-bar/examples/2/index.ts
index 6a3c540cdbd2..d731b12191b2 100644
--- a/projects/demo/src/modules/components/progress-bar/examples/2/index.ts
+++ b/projects/demo/src/modules/components/progress-bar/examples/2/index.ts
@@ -2,14 +2,13 @@ import {AsyncPipe, isPlatformServer} from '@angular/common';
 import {Component, inject, PLATFORM_ID} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
-import {TuiDocText} from '@taiga-ui/addon-doc';
 import {TUI_IS_E2E} from '@taiga-ui/cdk';
 import {TuiProgress} from '@taiga-ui/kit';
 import {of, timer} from 'rxjs';
 
 @Component({
     standalone: true,
-    imports: [TuiDocText, TuiProgress, AsyncPipe],
+    imports: [TuiProgress, AsyncPipe],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,
diff --git a/projects/demo/src/modules/components/progress-bar/index.html b/projects/demo/src/modules/components/progress-bar/index.html
index bc9dc63ca4ef..7c558ad7ad83 100644
--- a/projects/demo/src/modules/components/progress-bar/index.html
+++ b/projects/demo/src/modules/components/progress-bar/index.html
@@ -11,13 +11,13 @@
             </dt>
             <dd>
                 – attribute component for native html tag
-                <code tuiDocText="<progress />"></code>
+                <code [textContent]="'<progress />'"></code>
                 .
             </dd>
         </dl>
         <p>
             <strong>Usage:</strong>
-            <code tuiDocText='<progress tuiProgressBar value="40" max="100"></progress>'></code>
+            <code [textContent]="'<progress tuiProgressBar value=\'40\' max=\'100\'></progress>'"></code>
             .
         </p>
 
@@ -119,7 +119,7 @@
                     value
                 </a>
                 of
-                <code tuiDocText="<progress />"></code>
+                <code [textContent]="'<progress />'"></code>
             </ng-template>
 
             <ng-template
@@ -138,7 +138,7 @@
                     max
                 </a>
                 of
-                <code tuiDocText="<progress />"></code>
+                <code [textContent]="'<progress />'"></code>
             </ng-template>
 
             <ng-template
@@ -161,7 +161,7 @@
                 Color of the progress indicator
                 <p>
                     We recommend set solid color via
-                    <code tuiDocText="<progress />"></code>
+                    <code [textContent]="'<progress />'"></code>
                     's CSS-property
                     <code>color</code>
                     (especially, if you support old not-chromium based Edge)
diff --git a/projects/demo/src/modules/components/progress-circle/index.html b/projects/demo/src/modules/components/progress-circle/index.html
index 9a670a3da8b9..bdeeac9783e2 100644
--- a/projects/demo/src/modules/components/progress-circle/index.html
+++ b/projects/demo/src/modules/components/progress-circle/index.html
@@ -7,7 +7,7 @@
     <ng-template pageTab>
         <dl>
             <dt>
-                <code tuiDocText="<tui-progress-circle />"></code>
+                <code [textContent]="'<tui-progress-circle />'"></code>
             </dt>
             <dd>
                 is a component to visually represent the completion of a process or operation (as a partially filled
diff --git a/projects/demo/src/modules/components/services/scroll-service/index.html b/projects/demo/src/modules/components/services/scroll-service/index.html
index 5cc3c6720648..b6d411c5886c 100644
--- a/projects/demo/src/modules/components/services/scroll-service/index.html
+++ b/projects/demo/src/modules/components/services/scroll-service/index.html
@@ -19,7 +19,7 @@
         <p>
             Method
             <strong>
-                <code tuiDocText="scroll$: Observable<[number, number]>"></code>
+                <code [textContent]="'scroll$: Observable<[number, number]>'"></code>
             </strong>
             <em>
                 (emits a tuple tuple
diff --git a/projects/demo/src/modules/components/slider/index.html b/projects/demo/src/modules/components/slider/index.html
index 188e5f8233a9..17121bacaab6 100644
--- a/projects/demo/src/modules/components/slider/index.html
+++ b/projects/demo/src/modules/components/slider/index.html
@@ -10,7 +10,7 @@
             </dt>
             <dd>
                 attribute component for native html tag
-                <code tuiDocText='<input type="range" />'></code>
+                <code [textContent]="'<input type=\'range\' />'"></code>
                 to choose a value from a limited range.
             </dd>
         </dl>
@@ -28,7 +28,7 @@
         </p>
         <p>
             <strong>Usage:</strong>
-            <code tuiDocText='<input tuiSlider type="range" min="0" max="100" step="1" />'></code>
+            <code [textContent]="'<input tuiSlider type=\'range\' min=\'0\' max=\'100\' step=\'1\' />'"></code>
             .
         </p>
 
@@ -147,7 +147,7 @@
                     max
                 </a>
                 of
-                <code tuiDocText='<input type="range" />'></code>
+                <code [textContent]="'<input type=\'range\' />'"></code>
             </ng-template>
             <ng-template
                 documentationPropertyMode="input"
@@ -165,7 +165,7 @@
                     min
                 </a>
                 of
-                <code tuiDocText='<input type="range" />'></code>
+                <code [textContent]="'<input type=\'range\' />'"></code>
             </ng-template>
             <ng-template
                 documentationPropertyMode="input"
@@ -183,7 +183,7 @@
                     step
                 </a>
                 of
-                <code tuiDocText='<input type="range" />'></code>
+                <code [textContent]="'<input type=\'range\' />'"></code>
             </ng-template>
             <ng-template
                 documentationPropertyMode="input"
diff --git a/projects/demo/src/modules/components/textarea/index.html b/projects/demo/src/modules/components/textarea/index.html
index 5c72e7257945..51f0df708930 100644
--- a/projects/demo/src/modules/components/textarea/index.html
+++ b/projects/demo/src/modules/components/textarea/index.html
@@ -114,7 +114,7 @@
                 [(documentationPropertyValue)]="maxLength"
             >
                 Use maxLength for highlighting extra characters. If you want to limit the number of characters, add
-                <code tuiDocText="<textarea tuiTextfieldLegacy></textarea>"></code>
+                <code [textContent]="'<textarea tuiTextfieldLegacy />'"></code>
                 with native maxlength attribute.
             </ng-template>
             <ng-template
diff --git a/projects/demo/src/modules/directives/swipe/examples/1/index.ts b/projects/demo/src/modules/directives/swipe/examples/1/index.ts
index 368a74e8ba5f..289e992ca0af 100644
--- a/projects/demo/src/modules/directives/swipe/examples/1/index.ts
+++ b/projects/demo/src/modules/directives/swipe/examples/1/index.ts
@@ -12,7 +12,7 @@ import {TuiSwipe} from '@taiga-ui/cdk';
     encapsulation,
     changeDetection,
     host: {
-        class: 'swiped',
+        '[class]': 'swiped',
     },
 })
 export default class Example {
diff --git a/projects/demo/src/modules/markup/spaces/examples/1/index.html b/projects/demo/src/modules/markup/spaces/examples/1/index.html
index f94bf991e7bd..788c6decde95 100644
--- a/projects/demo/src/modules/markup/spaces/examples/1/index.html
+++ b/projects/demo/src/modules/markup/spaces/examples/1/index.html
@@ -1,6 +1,6 @@
 <h2 class="title">
     Margin top
-    <code tuiDocText="tui-space_top-<value>"></code>
+    <code [textContent]="'tui-space_top-<value>'"></code>
 </h2>
 <div class="row">
     <div class="example tui-space_top-1 tui-space_right-2">
@@ -21,7 +21,7 @@ <h2 class="title">
 </div>
 <h2 class="title">
     Margin bottom
-    <code tuiDocText="tui-space_bottom-<value>"></code>
+    <code [textContent]="'tui-space_bottom-<value>'"></code>
 </h2>
 <div class="row row_align-items_bottom">
     <div class="example tui-space_bottom-1 tui-space_right-2">
@@ -42,7 +42,7 @@ <h2 class="title">
 </div>
 <h2 class="title">
     Margin right
-    <code tuiDocText="tui-space_right-<value>"></code>
+    <code [textContent]="'tui-space_right-<value>'"></code>
 </h2>
 <div class="row">
     <div class="example tui-space_right-1">
@@ -64,7 +64,7 @@ <h2 class="title">
 </div>
 <h2 class="title">
     Margin left
-    <code tuiDocText="tui-space_left-<value>"></code>
+    <code [textContent]="'tui-space_left-<value>'"></code>
 </h2>
 <div class="row">
     <div class="example"></div>
@@ -86,9 +86,9 @@ <h2 class="title">
 </div>
 <h2 class="title">
     Vertical and horizontal margins
-    <code tuiDocText="tui-space_vertical-<value>"></code>
+    <code [textContent]="'tui-space_vertical-<value>'"></code>
     and
-    <code tuiDocText="tui-space_horizontal-<value>"></code>
+    <code [textContent]="'tui-space_horizontal-<value>'"></code>
 </h2>
 <div class="row">
     <div class="example tui-space_vertical-4">
diff --git a/projects/demo/src/modules/markup/spaces/examples/1/index.ts b/projects/demo/src/modules/markup/spaces/examples/1/index.ts
index 741e14e2217d..ec986e07b7e0 100644
--- a/projects/demo/src/modules/markup/spaces/examples/1/index.ts
+++ b/projects/demo/src/modules/markup/spaces/examples/1/index.ts
@@ -2,11 +2,11 @@ import {ClipboardModule} from '@angular/cdk/clipboard';
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
-import {TuiDocCopy, TuiDocText} from '@taiga-ui/addon-doc';
+import {TuiDocCopy} from '@taiga-ui/addon-doc';
 
 @Component({
     standalone: true,
-    imports: [TuiDocText, TuiDocCopy, ClipboardModule],
+    imports: [TuiDocCopy, ClipboardModule],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,
diff --git a/projects/demo/src/modules/markup/spaces/examples/2/index.html b/projects/demo/src/modules/markup/spaces/examples/2/index.html
index 734887722be6..fe70ecca1a53 100644
--- a/projects/demo/src/modules/markup/spaces/examples/2/index.html
+++ b/projects/demo/src/modules/markup/spaces/examples/2/index.html
@@ -1,6 +1,6 @@
 <h2 class="title">
     Margin top
-    <code tuiDocText=".tui-space(top, <value>);"></code>
+    <code [textContent]="'.tui-space(top, <value>);'"></code>
 </h2>
 <div class="row">
     <div class="example example_top-1">
@@ -21,7 +21,7 @@ <h2 class="title">
 </div>
 <h2 class="title">
     Margin bottom
-    <code tuiDocText=".tui-space(bottom, <value>);"></code>
+    <code [textContent]="'.tui-space(bottom, <value>);'"></code>
 </h2>
 <div class="row row_align-items_bottom">
     <div class="example example_bottom-1">
@@ -42,7 +42,7 @@ <h2 class="title">
 </div>
 <h2 class="title">
     Margin right
-    <code tuiDocText=".tui-space(right, <value>);"></code>
+    <code [textContent]="'.tui-space(right, <value>);'"></code>
 </h2>
 <div class="row">
     <div class="example example_right-1">
@@ -64,7 +64,7 @@ <h2 class="title">
 </div>
 <h2 class="title">
     Margin left
-    <code tuiDocText=".tui-space(left, <value>);"></code>
+    <code [textContent]="'.tui-space(left, <value>);'"></code>
 </h2>
 <div class="row">
     <div class="example"></div>
@@ -86,9 +86,9 @@ <h2 class="title">
 </div>
 <h2 class="title">
     Vertical and horizontal margins
-    <code tuiDocText=".tui-space(vertical, <value>);"></code>
+    <code [textContent]="'.tui-space(vertical, <value>);'"></code>
     and
-    <code tuiDocText=".tui-space(horizontal, <value>);"></code>
+    <code [textContent]="'.tui-space(horizontal, <value>);'"></code>
 </h2>
 <div class="row">
     <div class="example example_vertical">
diff --git a/projects/demo/src/modules/markup/spaces/examples/2/index.ts b/projects/demo/src/modules/markup/spaces/examples/2/index.ts
index 741e14e2217d..ec986e07b7e0 100644
--- a/projects/demo/src/modules/markup/spaces/examples/2/index.ts
+++ b/projects/demo/src/modules/markup/spaces/examples/2/index.ts
@@ -2,11 +2,11 @@ import {ClipboardModule} from '@angular/cdk/clipboard';
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
-import {TuiDocCopy, TuiDocText} from '@taiga-ui/addon-doc';
+import {TuiDocCopy} from '@taiga-ui/addon-doc';
 
 @Component({
     standalone: true,
-    imports: [TuiDocText, TuiDocCopy, ClipboardModule],
+    imports: [TuiDocCopy, ClipboardModule],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,
diff --git a/projects/demo/src/modules/markup/spaces/index.html b/projects/demo/src/modules/markup/spaces/index.html
index ffa56d103655..63d1608d7e46 100644
--- a/projects/demo/src/modules/markup/spaces/index.html
+++ b/projects/demo/src/modules/markup/spaces/index.html
@@ -11,7 +11,7 @@
 
         <div class="tui-space_bottom-3">
             You can build a class with direction and value between 0 and 15 (
-            <code tuiDocText="tui-space_<direction>-<value>"></code>
+            <code [textContent]="'tui-space_<direction>-<value>'"></code>
             ).
         </div>
 
@@ -28,7 +28,7 @@
 
         <p>
             Mixin also gets a direction and a value (
-            <code tuiDocText=".tui-space(<direction>, <value>);"></code>
+            <code [textContent]="'.tui-space(<direction>, <value>);'"></code>
             ).
         </p>
 
diff --git a/projects/kit/components/avatar/avatar-labeled.component.ts b/projects/kit/components/avatar/avatar-labeled.component.ts
index 39dee2435d0d..e78213fd480d 100644
--- a/projects/kit/components/avatar/avatar-labeled.component.ts
+++ b/projects/kit/components/avatar/avatar-labeled.component.ts
@@ -26,9 +26,6 @@ import {TuiFade} from '@taiga-ui/kit/directives/fade';
     styleUrls: ['./avatar-labeled.styles.less'],
     encapsulation: ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush,
-    host: {
-        '[attr.title]': 'label',
-    },
 })
 export class TuiAvatarLabeled {
     @Input()
diff --git a/projects/kit/components/progress/progress-circle/progress-circle.component.ts b/projects/kit/components/progress/progress-circle/progress-circle.component.ts
index 594d2947c3d2..245d07baea8a 100644
--- a/projects/kit/components/progress/progress-circle/progress-circle.component.ts
+++ b/projects/kit/components/progress/progress-circle/progress-circle.component.ts
@@ -13,9 +13,9 @@ import {TUI_PROGRESS_OPTIONS} from '../progress.options';
     styleUrls: ['./progress-circle.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
     host: {
-        '[style.--tui-progress-color]': 'color',
         '[attr.data-size]': 'size',
-        '[style.--progress-ratio]': 'progressRatio',
+        '[style.--tui-progress-color]': 'color',
+        '[style.--t-progress-ratio]': 'progressRatio',
     },
 })
 export class TuiProgressCircle {
diff --git a/projects/kit/components/progress/progress-circle/progress-circle.style.less b/projects/kit/components/progress/progress-circle/progress-circle.style.less
index aecea4b9695f..101948019682 100644
--- a/projects/kit/components/progress/progress-circle/progress-circle.style.less
+++ b/projects/kit/components/progress/progress-circle/progress-circle.style.less
@@ -84,7 +84,7 @@
 
     &_filled {
         transition: stroke-dashoffset var(--tui-duration) linear;
-        stroke-dashoffset: calc(@circumference - var(--progress-ratio) * @circumference);
+        stroke-dashoffset: calc(@circumference - var(--t-progress-ratio) * @circumference);
     }
 }