From e1853dd2842352cbe67f7c82447250b206c49db3 Mon Sep 17 00:00:00 2001
From: Alex Inkin <alexander@inkin.ru>
Date: Mon, 16 Sep 2024 19:02:36 +0400
Subject: [PATCH] feat(core): `Appearance` allow multiple modes (#9042)

---
 .../input-card-group.component.ts             |  3 ++-
 .../input-card-group.style.less               |  2 +-
 .../constants/attr-with-values-to-replace.ts  |  2 +-
 .../templates/migrate-button-appearance.ts    |  7 +++++--
 .../tests/schematic-migrate-blocked.spec.ts   |  2 +-
 ...chematic-migrate-button-appearance.spec.ts |  8 +++----
 .../components/textfield/select.directive.ts  |  5 ++---
 .../textfield/textfield.component.ts          |  4 ++--
 .../textfield/textfield.directive.ts          | 21 ++++++++++++-------
 .../appearance/appearance.bindings.ts         |  8 +++++++
 .../appearance/appearance.directive.ts        | 13 +++++++++++-
 .../directives/appearance/with-appearance.ts  |  1 +
 .../core/styles/components/appearance.less    |  2 +-
 projects/core/styles/components/group.less    | 11 +++++-----
 .../core/styles/components/textfield.less     | 10 ++++-----
 .../core/styles/theme/appearance/outline.less | 11 +++++-----
 .../core/styles/theme/appearance/primary.less |  3 ++-
 .../styles/theme/appearance/secondary.less    | 17 +++++++++------
 .../core/styles/theme/appearance/status.less  | 18 ++++++++++------
 .../styles/theme/appearance/textfield.less    |  4 ++--
 .../demo/src/components/appearance/index.html |  4 ++--
 .../demo/src/components/appearance/index.ts   |  4 ++--
 .../src/modules/components/block/index.html   |  2 +-
 .../components/button/examples/2/index.html   | 10 +++++----
 .../components/filter/examples/4/index.html   |  2 +-
 .../dropdown-open/examples/4/index.html       |  2 +-
 .../input-phone-international.template.html   |  7 ++++---
 27 files changed, 115 insertions(+), 68 deletions(-)

diff --git a/projects/addon-commerce/components/input-card-group/input-card-group.component.ts b/projects/addon-commerce/components/input-card-group/input-card-group.component.ts
index 701abc142c24..ca286f17e2f1 100644
--- a/projects/addon-commerce/components/input-card-group/input-card-group.component.ts
+++ b/projects/addon-commerce/components/input-card-group/input-card-group.component.ts
@@ -45,6 +45,7 @@ import {
     TuiAppearance,
     tuiAppearance,
     tuiAppearanceFocus,
+    tuiAppearanceMode,
     tuiAppearanceState,
 } from '@taiga-ui/core/directives/appearance';
 import {
@@ -104,7 +105,6 @@ export interface TuiCard {
     ],
     host: {
         'data-size': 'l',
-        '[attr.data-mode]': 'mode()',
         '(mousedown)': 'onMouseDown($event)',
     },
 })
@@ -144,6 +144,7 @@ export class TuiInputCardGroup
     protected readonly texts = toSignal(inject(TUI_INPUT_CARD_GROUP_TEXTS));
     protected readonly open = tuiDropdownOpen();
 
+    protected readonly m = tuiAppearanceMode(this.mode);
     protected readonly appearance = tuiAppearance(
         inject(TUI_TEXTFIELD_OPTIONS).appearance,
     );
diff --git a/projects/addon-commerce/components/input-card-group/input-card-group.style.less b/projects/addon-commerce/components/input-card-group/input-card-group.style.less
index 6a8ba3e31f9d..9a6576db798a 100644
--- a/projects/addon-commerce/components/input-card-group/input-card-group.style.less
+++ b/projects/addon-commerce/components/input-card-group/input-card-group.style.less
@@ -196,7 +196,7 @@
         transform: translateY(-0.7em);
     }
 
-    :host([data-mode='invalid']) & {
+    :host([data-mode~='invalid']) & {
         color: var(--tui-text-negative);
     }
 
diff --git a/projects/cdk/schematics/ng-update/v4/steps/constants/attr-with-values-to-replace.ts b/projects/cdk/schematics/ng-update/v4/steps/constants/attr-with-values-to-replace.ts
index 4c28567b3016..8c8ffb1463bf 100644
--- a/projects/cdk/schematics/ng-update/v4/steps/constants/attr-with-values-to-replace.ts
+++ b/projects/cdk/schematics/ng-update/v4/steps/constants/attr-with-values-to-replace.ts
@@ -44,7 +44,7 @@ export const ATTR_WITH_VALUES_TO_REPLACE: ReplacementAttributeValue[] = [
     },
     {
         attrNames: ['[pseudoInvalid]'],
-        newAttrName: '[attr.data-mode]',
+        newAttrName: '[tuiAppearanceMode]',
         withTagNames: hasPseudoInvalid,
         valueReplacer: (condition) => `${condition} ? 'invalid' : null`,
     },
diff --git a/projects/cdk/schematics/ng-update/v4/steps/templates/migrate-button-appearance.ts b/projects/cdk/schematics/ng-update/v4/steps/templates/migrate-button-appearance.ts
index b0c067e370f0..7e6c226e8fdc 100644
--- a/projects/cdk/schematics/ng-update/v4/steps/templates/migrate-button-appearance.ts
+++ b/projects/cdk/schematics/ng-update/v4/steps/templates/migrate-button-appearance.ts
@@ -68,7 +68,10 @@ export function migrateButtonAppearance({
                 startOffset + templateOffset,
                 ` ${appearanceInputName}="whiteblock"`,
             );
-            recorder.insertLeft(startOffset + templateOffset, ' data-mode="checked"');
+            recorder.insertLeft(
+                startOffset + templateOffset,
+                ' tuiAppearanceMode="checked"',
+            );
         }
     });
 
@@ -87,6 +90,6 @@ export function migrateButtonAppearance({
 function addTodo(recorder: UpdateRecorder, templateOffset: number): void {
     recorder.insertRight(
         templateOffset,
-        '<!-- Taiga migration TODO: tuiButton "whiteblock-active" appearance is no longer available. Use \'appearance="whiteblock" data-mode="checked"\' -->\n',
+        '<!-- Taiga migration TODO: tuiButton "whiteblock-active" appearance is no longer available. Use \'appearance="whiteblock" tuiAppearanceMode="checked"\' -->\n',
     );
 }
diff --git a/projects/cdk/schematics/ng-update/v4/tests/schematic-migrate-blocked.spec.ts b/projects/cdk/schematics/ng-update/v4/tests/schematic-migrate-blocked.spec.ts
index bfaea4247bbb..826523b375ac 100644
--- a/projects/cdk/schematics/ng-update/v4/tests/schematic-migrate-blocked.spec.ts
+++ b/projects/cdk/schematics/ng-update/v4/tests/schematic-migrate-blocked.spec.ts
@@ -88,7 +88,7 @@ const TEMPLATE_BEFORE = `
 `.trim();
 
 const TEMPLATE_AFTER = `
-<label tuiBlock><input tuiCheckbox type="checkbox" [(ngModel)]="value" [attr.data-mode]="invalid ? 'invalid' : null" [tuiAppearanceFocus]="pseudoFocus">Content</label>
+<label tuiBlock><input tuiCheckbox type="checkbox" [(ngModel)]="value" [tuiAppearanceMode]="invalid ? 'invalid' : null" [tuiAppearanceFocus]="pseudoFocus">Content</label>
 
 <form [formGroup]="testForm">
  <label tuiBlock> <input tuiRadio type="radio"
diff --git a/projects/cdk/schematics/ng-update/v4/tests/schematic-migrate-button-appearance.spec.ts b/projects/cdk/schematics/ng-update/v4/tests/schematic-migrate-button-appearance.spec.ts
index 01abbb261331..8d76f9a10cc0 100644
--- a/projects/cdk/schematics/ng-update/v4/tests/schematic-migrate-button-appearance.spec.ts
+++ b/projects/cdk/schematics/ng-update/v4/tests/schematic-migrate-button-appearance.spec.ts
@@ -62,18 +62,18 @@ const TEMPLATE_WITH_CONDITION_BEFORE = `
 const TEMPLATE_AFTER = `
 <button tuiButton></button>
 
-<button tuiButton appearance="whiteblock" data-mode="checked"></button>
+<button tuiButton appearance="whiteblock" tuiAppearanceMode="checked"></button>
 
-<button tuiButton appearance="whiteblock" data-mode="checked"></button>
+<button tuiButton appearance="whiteblock" tuiAppearanceMode="checked"></button>
 
-<a tuiIconButton appearance="whiteblock" data-mode="checked"></a>
+<a tuiIconButton appearance="whiteblock" tuiAppearanceMode="checked"></a>
 
 <a tuiButton [appearance]="
   'flat'
 "></a>
 `;
 
-const TEMPLATE_WITH_CONDITION_AFTER = `<!-- Taiga migration TODO: tuiButton "whiteblock-active" appearance is no longer available. Use 'appearance="whiteblock" data-mode="checked"' -->
+const TEMPLATE_WITH_CONDITION_AFTER = `<!-- Taiga migration TODO: tuiButton "whiteblock-active" appearance is no longer available. Use 'appearance="whiteblock" tuiAppearanceMode="checked"' -->
 
 <a tuiButton [appearance]="
   true ? appearance : 'flat'
diff --git a/projects/core/components/textfield/select.directive.ts b/projects/core/components/textfield/select.directive.ts
index 07a7779426aa..82c95ced8cb6 100644
--- a/projects/core/components/textfield/select.directive.ts
+++ b/projects/core/components/textfield/select.directive.ts
@@ -20,7 +20,6 @@ import {TuiTextfieldBase, TuiTextfieldDirective} from './textfield.directive';
     hostDirectives: [TuiNativeValidator, TuiAppearance],
     host: {
         '[id]': 'textfield.id',
-        '[attr.data-mode]': 'mode',
         '[class._empty]': 'value === ""',
         '(input)': '0',
         '(focusin)': '0',
@@ -33,14 +32,14 @@ import {TuiTextfieldBase, TuiTextfieldDirective} from './textfield.directive';
         '(keydown.meta.c)': 'onCopy()',
     },
 })
-export class TuiSelect extends TuiTextfieldBase {
+export class TuiSelect<T> extends TuiTextfieldBase<T> {
     private readonly nav = inject(WA_NAVIGATOR);
     private readonly control = inject(NgControl);
 
     @Input()
     public placeholder = '';
 
-    public override setValue(value: string): void {
+    public override setValue(value: T): void {
         this.control.control?.setValue(value);
         this.el.dispatchEvent(new Event('input', {bubbles: true}));
     }
diff --git a/projects/core/components/textfield/textfield.component.ts b/projects/core/components/textfield/textfield.component.ts
index 5692fe8d63a6..d8504a6bc774 100644
--- a/projects/core/components/textfield/textfield.component.ts
+++ b/projects/core/components/textfield/textfield.component.ts
@@ -70,7 +70,7 @@ export class TuiTextfieldComponent<T> implements TuiDataListHost<T> {
     private readonly focusedIn = tuiFocusedIn(tuiInjectElement());
 
     @ContentChild(forwardRef(() => TuiTextfieldDirective))
-    protected readonly directive?: TuiTextfieldDirective;
+    protected readonly directive?: TuiTextfieldDirective<T>;
 
     @ContentChild(forwardRef(() => TuiLabel), {read: ElementRef})
     protected readonly label?: ElementRef<HTMLElement>;
@@ -114,7 +114,7 @@ export class TuiTextfieldComponent<T> implements TuiDataListHost<T> {
     }
 
     public handleOption(option: T): void {
-        this.directive?.setValue(this.stringify(option));
+        this.directive?.setValue(option);
         this.open.set(false);
     }
 
diff --git a/projects/core/components/textfield/textfield.directive.ts b/projects/core/components/textfield/textfield.directive.ts
index 388c86038202..f9ea94e9517b 100644
--- a/projects/core/components/textfield/textfield.directive.ts
+++ b/projects/core/components/textfield/textfield.directive.ts
@@ -1,10 +1,11 @@
-import {computed, Directive, inject, Input, signal} from '@angular/core';
+import {computed, Directive, inject, Input, type OnChanges, signal} from '@angular/core';
 import {TuiNativeValidator} from '@taiga-ui/cdk/directives/native-validator';
 import {tuiInjectElement} from '@taiga-ui/cdk/utils/dom';
 import {
     TuiAppearance,
     tuiAppearance,
     tuiAppearanceFocus,
+    tuiAppearanceMode,
     tuiAppearanceState,
 } from '@taiga-ui/core/directives/appearance';
 import type {TuiInteractiveState} from '@taiga-ui/core/types';
@@ -13,18 +14,20 @@ import {TuiTextfieldComponent} from './textfield.component';
 import {TUI_TEXTFIELD_OPTIONS} from './textfield.options';
 
 @Directive()
-export class TuiTextfieldBase {
+export class TuiTextfieldBase<T> implements OnChanges {
     // TODO: refactor to signal inputs after Angular update
     private readonly focused = signal<boolean | null>(null);
 
     protected readonly a = tuiAppearance(inject(TUI_TEXTFIELD_OPTIONS).appearance);
     protected readonly s = tuiAppearanceState(null);
+    protected readonly m = tuiAppearanceMode(this.mode);
     protected readonly f = tuiAppearanceFocus(
         computed(() => this.focused() || this.textfield.focused()),
     );
 
-    protected readonly textfield = inject(TuiTextfieldComponent);
     protected readonly el = tuiInjectElement<HTMLInputElement>();
+    protected readonly textfield: TuiTextfieldComponent<T> =
+        inject(TuiTextfieldComponent);
 
     @Input()
     public readOnly = false;
@@ -58,8 +61,13 @@ export class TuiTextfieldBase {
         return null;
     }
 
-    public setValue(value: string | null): void {
-        this.el.value = value || '';
+    // TODO: refactor to signal inputs after Angular update
+    public ngOnChanges(): void {
+        this.m.set(this.mode);
+    }
+
+    public setValue(value: T | null): void {
+        this.el.value = value == null ? '' : this.textfield.stringify(value);
         this.el.dispatchEvent(new Event('input', {bubbles: true}));
     }
 }
@@ -72,10 +80,9 @@ export class TuiTextfieldBase {
         '[id]': 'textfield.id',
         '[readOnly]': 'readOnly',
         '[class._empty]': 'el.value === ""',
-        '[attr.data-mode]': 'mode',
         '(input)': '0',
         '(focusin)': '0',
         '(focusout)': '0',
     },
 })
-export class TuiTextfieldDirective extends TuiTextfieldBase {}
+export class TuiTextfieldDirective<T> extends TuiTextfieldBase<T> {}
diff --git a/projects/core/directives/appearance/appearance.bindings.ts b/projects/core/directives/appearance/appearance.bindings.ts
index 4404c1fa16b3..67a231a3f4d7 100644
--- a/projects/core/directives/appearance/appearance.bindings.ts
+++ b/projects/core/directives/appearance/appearance.bindings.ts
@@ -10,6 +10,8 @@ type S = TuiInteractiveState | null;
 
 type F = boolean | null;
 
+type M = string | readonly string[] | null;
+
 export function tuiAppearance(value: A | WritableSignal<A>): WritableSignal<A>;
 export function tuiAppearance(value: Signal<A>): Signal<A>;
 export function tuiAppearance(value: A | Signal<A>): Signal<A> {
@@ -27,3 +29,9 @@ export function tuiAppearanceFocus(value: Signal<F>): Signal<F>;
 export function tuiAppearanceFocus(value: F | Signal<F>): Signal<F> {
     return tuiDirectiveBinding(TuiAppearance, 'focus', value);
 }
+
+export function tuiAppearanceMode(value: M | WritableSignal<M>): WritableSignal<M>;
+export function tuiAppearanceMode(value: Signal<M>): Signal<M>;
+export function tuiAppearanceMode(value: M | Signal<M>): Signal<M> {
+    return tuiDirectiveBinding(TuiAppearance, 'mode', value);
+}
diff --git a/projects/core/directives/appearance/appearance.directive.ts b/projects/core/directives/appearance/appearance.directive.ts
index ba5d9f933245..8df05ec68b89 100644
--- a/projects/core/directives/appearance/appearance.directive.ts
+++ b/projects/core/directives/appearance/appearance.directive.ts
@@ -1,13 +1,14 @@
 import {
     ChangeDetectionStrategy,
     Component,
+    computed,
     Directive,
     inject,
     Input,
     signal,
     ViewEncapsulation,
 } from '@angular/core';
-import {tuiWithStyles} from '@taiga-ui/cdk/utils/miscellaneous';
+import {tuiIsString, tuiWithStyles} from '@taiga-ui/cdk/utils/miscellaneous';
 import type {TuiInteractiveState} from '@taiga-ui/core/types';
 
 import {TUI_APPEARANCE_OPTIONS, type TuiAppearanceOptions} from './appearance.options';
@@ -32,15 +33,20 @@ class TuiAppearanceStyles {}
         '[attr.data-appearance]': 'appearance()',
         '[attr.data-state]': 'state()',
         '[attr.data-focus]': 'focus()',
+        '[attr.data-mode]': 'modes()',
     },
 })
 export class TuiAppearance {
     protected readonly nothing = tuiWithStyles(TuiAppearanceStyles);
+    protected readonly modes = computed((mode = this.mode()) =>
+        !mode || tuiIsString(mode) ? mode : mode.join(' '),
+    );
 
     // TODO: refactor to signal inputs after Angular update
     public readonly appearance = signal(inject(TUI_APPEARANCE_OPTIONS).appearance);
     public readonly state = signal<TuiInteractiveState | null>(null);
     public readonly focus = signal<boolean | null>(null);
+    public readonly mode = signal<string | readonly string[] | null>(null);
 
     @Input()
     public set tuiAppearance(appearance: TuiAppearanceOptions['appearance']) {
@@ -56,4 +62,9 @@ export class TuiAppearance {
     public set tuiAppearanceFocus(focus: boolean | null) {
         this.focus.set(focus);
     }
+
+    @Input()
+    public set tuiAppearanceMode(mode: string | readonly string[] | null) {
+        this.mode.set(mode);
+    }
 }
diff --git a/projects/core/directives/appearance/with-appearance.ts b/projects/core/directives/appearance/with-appearance.ts
index 3488b4e7e8cb..76040d5fc624 100644
--- a/projects/core/directives/appearance/with-appearance.ts
+++ b/projects/core/directives/appearance/with-appearance.ts
@@ -11,6 +11,7 @@ import {TuiAppearance} from './appearance.directive';
                 'tuiAppearance: appearance',
                 'tuiAppearanceState',
                 'tuiAppearanceFocus',
+                'tuiAppearanceMode',
             ],
         },
     ],
diff --git a/projects/core/styles/components/appearance.less b/projects/core/styles/components/appearance.less
index e94499d4d426..48df8d6d69e4 100644
--- a/projects/core/styles/components/appearance.less
+++ b/projects/core/styles/components/appearance.less
@@ -11,7 +11,7 @@
  * data-appearance — current appearance
  * data-state — manual interactive state override ('active' | 'disabled' | 'hover')
  * data-focus — manual :focus-visible state override
- * data-mode — arbitrary manual mode like 'checked', 'invalid' or 'readonly'
+ * data-mode — arbitrary manual mode like 'checked', 'invalid' or 'checked invalid'
  *
  * @example
  * <button tuiAppearance data-appearance='primary'></button>
diff --git a/projects/core/styles/components/group.less b/projects/core/styles/components/group.less
index 5e0b5029081b..fd6c5f353fb0 100644
--- a/projects/core/styles/components/group.less
+++ b/projects/core/styles/components/group.less
@@ -38,15 +38,15 @@
             z-index: 0;
         }
 
-        &:invalid,
-        &[data-mode='invalid'] {
+        &:invalid:not([data-mode]),
+        &[data-mode~='invalid'] {
             z-index: 2;
 
             --t-group-clip: none;
         }
 
-        &:has(:invalid),
-        &:has([data-mode='invalid']) {
+        &:has(:invalid:not([data-mode])),
+        &:has([data-mode~='invalid']) {
             z-index: 2;
 
             --t-group-clip: none;
@@ -64,7 +64,8 @@
             --t-group-clip: none;
         }
 
-        &[data-mode='checked'] {
+        &:checked:not([data-mode]),
+        &[data-mode~='checked'] {
             z-index: 4;
 
             --t-group-clip: none;
diff --git a/projects/core/styles/components/textfield.less b/projects/core/styles/components/textfield.less
index 857cda3124ae..53eba2130887 100644
--- a/projects/core/styles/components/textfield.less
+++ b/projects/core/styles/components/textfield.less
@@ -114,7 +114,7 @@ tui-textfield {
         color: var(--tui-text-secondary);
 
         &:has(input:read-only),
-        &:has(select[data-mode='readonly']) {
+        &:has(select[data-mode~='readonly']) {
             color: var(--tui-text-tertiary);
         }
     }
@@ -219,17 +219,17 @@ tui-textfield {
                 transform: translateY(-0.7em);
             }
 
-            &:not(:disabled)[data-mode='invalid'] ~ label,
+            &:not(:disabled)[data-mode~='invalid'] ~ label,
             &:invalid:not(:disabled):not([data-mode]) ~ label {
                 color: var(--tui-text-negative);
             }
 
-            &:not(:disabled):not([data-mode='readonly']) ~ .t-content .t-clear {
+            &:not(:disabled):not([data-mode~='readonly']) ~ .t-content .t-clear {
                 display: flex;
             }
         }
 
-        &:not([data-mode='readonly']) {
+        &:not([data-mode~='readonly']) {
             .appearance-focus({
                 &::placeholder,
                 &._empty {
@@ -270,7 +270,7 @@ tui-textfield {
         color: var(--tui-text-secondary);
     }
 
-    select:not([data-mode='readonly']) {
+    select:not([data-mode~='readonly']) {
         cursor: pointer;
     }
 
diff --git a/projects/core/styles/theme/appearance/outline.less b/projects/core/styles/theme/appearance/outline.less
index 37101b78a1dd..4ce0839847bb 100644
--- a/projects/core/styles/theme/appearance/outline.less
+++ b/projects/core/styles/theme/appearance/outline.less
@@ -7,8 +7,8 @@
     color: var(--tui-text-action);
     box-shadow: inset 0 0 0 1px var(--t-bs);
 
-    &:checked,
-    &[data-mode='checked'] {
+    &:checked:not([data-mode]),
+    &[data-mode~='checked'] {
         --t-bs: var(--tui-background-accent-1);
 
         box-shadow: inset 0 0 0 2px var(--t-bs);
@@ -22,12 +22,13 @@
         });
     }
 
-    &:invalid {
+    &:invalid:not([data-mode]),
+    &[data-mode~='invalid'] {
         box-shadow: inset 0 0 0 1px var(--tui-status-negative-pale-hover);
     }
 
-    &:checked:invalid,
-    &[data-mode='checked']:invalid {
+    &:checked:invalid:not([data-mode]),
+    &[data-mode~='checked'][data-mode~='invalid'] {
         box-shadow: inset 0 0 0 2px var(--tui-status-negative);
     }
 
diff --git a/projects/core/styles/theme/appearance/primary.less b/projects/core/styles/theme/appearance/primary.less
index 37a5ed0b573f..ec2b8fce8916 100644
--- a/projects/core/styles/theme/appearance/primary.less
+++ b/projects/core/styles/theme/appearance/primary.less
@@ -6,7 +6,8 @@
     background: var(--t-bg);
     color: var(--tui-text-primary-on-accent-1);
 
-    &:invalid {
+    &:invalid:not([data-mode]),
+    &[data-mode~='invalid'] {
         background: var(--tui-status-negative);
     }
 
diff --git a/projects/core/styles/theme/appearance/secondary.less b/projects/core/styles/theme/appearance/secondary.less
index 9b8f13d4a504..76e17a183d9e 100644
--- a/projects/core/styles/theme/appearance/secondary.less
+++ b/projects/core/styles/theme/appearance/secondary.less
@@ -14,8 +14,9 @@
         background: var(--tui-background-neutral-1-pressed);
     });
 
-    &:checked,
-    &[type='checkbox']:indeterminate {
+    &:checked:not([data-mode]),
+    &[data-mode~='checked'],
+    &[type='checkbox']:indeterminate:not([data-mode]) {
         background: var(--tui-background-accent-1);
         color: var(--tui-text-primary-on-accent-1);
 
@@ -27,7 +28,8 @@
             background: var(--tui-background-accent-1-pressed);
         });
 
-        &:invalid {
+        &:invalid:not([data-mode]),
+        &[data-mode~='invalid'] {
             background: var(--tui-status-negative);
             color: #fff;
 
@@ -43,7 +45,8 @@
         }
     }
 
-    &:invalid {
+    &:invalid:not([data-mode]),
+    &[data-mode~='invalid'] {
         color: var(--tui-text-negative);
         background: var(--tui-status-negative-pale);
 
@@ -60,11 +63,13 @@
 }
 
 [tuiAppearance][data-appearance='flat'],
-[tuiAppearance][data-appearance='flat']:invalid {
+[tuiAppearance][data-appearance='flat']:invalid:not([data-mode]),
+[tuiAppearance][data-appearance='flat'][data-mode~='invalid'] {
     background: transparent;
 }
 
-[tuiAppearance][data-appearance='flat']:checked {
+[tuiAppearance][data-appearance='flat']:checked:not([data-mode]),
+[tuiAppearance][data-appearance='flat'][data-mode~='checked'] {
     background: var(--tui-background-neutral-1);
 
     .appearance-hover({
diff --git a/projects/core/styles/theme/appearance/status.less b/projects/core/styles/theme/appearance/status.less
index 93b9a5a567b4..808a5385e45e 100644
--- a/projects/core/styles/theme/appearance/status.less
+++ b/projects/core/styles/theme/appearance/status.less
@@ -7,7 +7,8 @@
 [tuiAppearance][data-appearance='neutral'] {
     background: var(--t-bg);
 
-    &:checked {
+    &:checked:not([data-mode]),
+    &[data-mode~='checked'] {
         color: #fff;
     }
 }
@@ -28,7 +29,8 @@
         --t-bg: var(--tui-status-negative-pale-hover);
     });
 
-    &:checked {
+    &:checked:not([data-mode]),
+    &[data-mode~='checked'] {
         background: var(--tui-status-negative);
     }
 }
@@ -49,7 +51,8 @@
         --t-bg: var(--tui-status-positive-pale-hover);
     });
 
-    &:checked {
+    &:checked:not([data-mode]),
+    &[data-mode~='checked'] {
         background: var(--tui-status-positive);
     }
 }
@@ -70,7 +73,8 @@
         --t-bg: var(--tui-status-warning-pale-hover);
     });
 
-    &:checked {
+    &:checked:not([data-mode]),
+    &[data-mode~='checked'] {
         background: var(--tui-status-warning);
     }
 }
@@ -91,7 +95,8 @@
         --t-bg: var(--tui-status-info-pale-hover);
     });
 
-    &:checked {
+    &:checked:not([data-mode]),
+    &[data-mode~='checked'] {
         background: var(--tui-status-info);
     }
 }
@@ -112,7 +117,8 @@
         --t-bg: var(--tui-background-neutral-1-pressed);
     });
 
-    &:checked {
+    &:checked:not([data-mode]),
+    &[data-mode~='checked'] {
         background: var(--tui-status-neutral);
     }
 }
diff --git a/projects/core/styles/theme/appearance/textfield.less b/projects/core/styles/theme/appearance/textfield.less
index e73644659a3d..67d14e2f8c13 100644
--- a/projects/core/styles/theme/appearance/textfield.less
+++ b/projects/core/styles/theme/appearance/textfield.less
@@ -26,12 +26,12 @@
         box-shadow: none;
     });
 
-    &[data-mode='invalid'][data-mode='invalid'],
+    &[data-mode~='invalid'][data-mode~='invalid'],
     &:invalid:not([data-mode]) {
         outline-color: var(--tui-status-negative);
     }
 
-    &[data-mode='readonly'],
+    &[data-mode~='readonly'],
     input&:read-only:not([data-mode]) {
         box-shadow: none;
         outline-color: var(--tui-border-normal) !important;
diff --git a/projects/demo/src/components/appearance/index.html b/projects/demo/src/components/appearance/index.html
index f3dce105c240..771f275968a0 100644
--- a/projects/demo/src/components/appearance/index.html
+++ b/projects/demo/src/components/appearance/index.html
@@ -40,9 +40,9 @@
     Manual focus state override
 </tr>
 <tr
-    name="[attr.data-mode]"
+    name="[tuiAppearanceMode]"
     tuiDocAPIItem
-    type="string | null"
+    type="string | string[] | null"
     [items]="modes"
     [(value)]="mode"
 >
diff --git a/projects/demo/src/components/appearance/index.ts b/projects/demo/src/components/appearance/index.ts
index 1c011f46a4d7..02ac9689668c 100644
--- a/projects/demo/src/components/appearance/index.ts
+++ b/projects/demo/src/components/appearance/index.ts
@@ -14,7 +14,7 @@ import {type TuiInteractiveState, TuiLink, TuiTitle} from '@taiga-ui/core';
 export class TuiDocAppearance {
     protected readonly routes = DemoRoute;
     protected selected = '';
-    protected readonly modes = ['invalid', 'checked'];
+    protected readonly modes = ['invalid', 'checked', ['invalid', 'checked']];
     protected readonly appearances = [
         'primary',
         'secondary',
@@ -48,7 +48,7 @@ export class TuiDocAppearance {
 
     public state: TuiInteractiveState | null = null;
     public focus: boolean | null = null;
-    public mode: string | null = null;
+    public mode: string | readonly string[] | null = null;
 
     public get appearance(): string {
         return this.selected || this.tuiDocAppearance[0] || this.appearances[0];
diff --git a/projects/demo/src/modules/components/block/index.html b/projects/demo/src/modules/components/block/index.html
index 674de30adcf9..342296161715 100644
--- a/projects/demo/src/modules/components/block/index.html
+++ b/projects/demo/src/modules/components/block/index.html
@@ -22,10 +22,10 @@
         <tui-doc-demo>
             <label
                 [appearance]="appearance.appearance"
-                [attr.data-mode]="appearance.mode"
                 [iconEnd]="icons.iconEnd"
                 [iconStart]="icons.iconStart"
                 [tuiAppearanceFocus]="appearance.focus"
+                [tuiAppearanceMode]="appearance.mode"
                 [tuiAppearanceState]="appearance.state"
                 [tuiBlock]="size"
             >
diff --git a/projects/demo/src/modules/components/button/examples/2/index.html b/projects/demo/src/modules/components/button/examples/2/index.html
index a4aef49f7f3c..857ee269cb66 100644
--- a/projects/demo/src/modules/components/button/examples/2/index.html
+++ b/projects/demo/src/modules/components/button/examples/2/index.html
@@ -80,15 +80,17 @@
 
 <p>
     Use
-    <code>data-mode="checked"</code>
-    class to emulate
+    <code>tuiAppearanceMode</code>
+    to emulate
     <code>:checked</code>
+    /
+    <code>:invalid</code>
     CSS state for whiteblock/outline appearance:
 </p>
 
 <button
     appearance="outline"
-    data-mode="checked"
+    tuiAppearanceMode="checked"
     tuiButton
     type="button"
 >
@@ -97,7 +99,7 @@
 
 <button
     appearance="whiteblock"
-    data-mode="checked"
+    tuiAppearanceMode="checked invalid"
     tuiButton
     type="button"
 >
diff --git a/projects/demo/src/modules/components/filter/examples/4/index.html b/projects/demo/src/modules/components/filter/examples/4/index.html
index 20d8048ee9ed..036165d4a898 100644
--- a/projects/demo/src/modules/components/filter/examples/4/index.html
+++ b/projects/demo/src/modules/components/filter/examples/4/index.html
@@ -7,7 +7,7 @@
         tuiButton
         type="button"
         class="item tui-space_right-1 tui-space_bottom-1"
-        [attr.data-mode]="checked$ | async"
+        [tuiAppearanceMode]="checked$ | async"
         (click)="toggleAll()"
     >
         All
diff --git a/projects/demo/src/modules/directives/dropdown-open/examples/4/index.html b/projects/demo/src/modules/directives/dropdown-open/examples/4/index.html
index 325a753beffe..02a868a3f640 100644
--- a/projects/demo/src/modules/directives/dropdown-open/examples/4/index.html
+++ b/projects/demo/src/modules/directives/dropdown-open/examples/4/index.html
@@ -3,7 +3,7 @@
         appearance="whiteblock"
         tuiButton
         type="button"
-        [attr.data-mode]="length ? 'checked' : null"
+        [tuiAppearanceMode]="length ? 'checked' : null"
         [tuiDropdown]="dropdown"
         [(tuiDropdownOpen)]="open"
         (keydown.delete)="form.reset()"
diff --git a/projects/kit/components/input-phone-international/input-phone-international.template.html b/projects/kit/components/input-phone-international/input-phone-international.template.html
index 3d1e7ef79e20..c8dba2d0487f 100644
--- a/projects/kit/components/input-phone-international/input-phone-international.template.html
+++ b/projects/kit/components/input-phone-international/input-phone-international.template.html
@@ -6,10 +6,10 @@
     <select
         ngModel=""
         tuiTextfield
+        [attr.data-mode]="mode()"
         [disabled]="disabled()"
         [focused]="open() || null"
         [ngModelOptions]="{standalone: true}"
-        [readOnly]="readOnly()"
     ></select>
 
     <ng-template #flag>
@@ -22,14 +22,15 @@
 </tui-textfield>
 
 <tui-textfield>
+    <!--TODO: Replace attribute bindings with inputs after Angular updated and signal bindings properly update-->
     <input
         autocomplete="new-password"
         tuiTextfield
+        [attr.data-mode]="mode()"
+        [attr.readonly]="readOnly() || null"
         [disabled]="disabled()"
-        [invalid]="invalid()"
         [maskito]="mask()"
         [ngModelOptions]="{standalone: true}"
-        [readOnly]="readOnly()"
         [(ngModel)]="textfieldValue"
         (beforeinput.capture)="onPaste($event)"
         (blur)="onTouched()"