@taiga-ui/core 4.52.0-canary.6ee9658 → 4.52.0-canary.763e67d

package/portals/dropdown/dropdown-open.directive.d.ts

@@ -0,0 +1,30 @@
+import * as i0 from "@angular/core";
+import * as i1 from "@taiga-ui/cdk/directives/obscured";
+import * as i2 from "@taiga-ui/cdk/directives/active-zone";
+export declare class TuiDropdownOpen {
+    private readonly dropdownHost;
+    private readonly directive;
+    private readonly el;
+    private readonly obscured;
+    private readonly activeZone;
+    private readonly driver;
+    private readonly dropdown;
+    readonly enabled: import("@angular/core").InputSignal<boolean>;
+    readonly open: import("@angular/core").ModelSignal<boolean>;
+    protected readonly driveEffect: import("@angular/core").EffectRef;
+    protected readonly syncSub: import("rxjs").Subscription;
+    protected readonly closeSub: import("rxjs").Subscription;
+    toggle(open: boolean): void;
+    protected onEsc(event: KeyboardEvent): void;
+    protected onClick(target: HTMLElement): void;
+    protected onArrow(event: KeyboardEvent, up: boolean): void;
+    protected onKeydown(event: KeyboardEvent): void;
+    private get host();
+    private get editable();
+    private get focused();
+    private update;
+    private drive;
+    private focusDropdown;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TuiDropdownOpen, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TuiDropdownOpen, "[tuiDropdown][tuiDropdownAuto],[tuiDropdown][tuiDropdownOpen],[tuiDropdown][tuiDropdownOpenChange]", never, { "enabled": { "alias": "tuiDropdownEnabled"; "required": false; "isSignal": true; }; "open": { "alias": "tuiDropdownOpen"; "required": false; "isSignal": true; }; }, { "open": "tuiDropdownOpenChange"; }, ["dropdownHost"], never, true, [{ directive: typeof i1.TuiObscured; inputs: {}; outputs: {}; }, { directive: typeof i2.TuiActiveZone; inputs: { "tuiActiveZoneParent": "tuiActiveZoneParent"; }; outputs: { "tuiActiveZoneChange": "tuiActiveZoneChange"; }; }]>;
+}

package/{directives → portals}/dropdown/dropdown-position-sided.directive.d.ts

@@ -6,10 +6,10 @@ export declare class TuiDropdownPositionSided extends TuiPositionAccessor {
     private readonly viewport;
     private readonly vertical;
     private previous;
-    tuiDropdownSided: boolean | string;
-    tuiDropdownSidedOffset: number;
+    readonly tuiDropdownSided: import("@angular/core").InputSignal<string | boolean>;
+    readonly tuiDropdownSidedOffset: import("@angular/core").InputSignal<number>;
     readonly type = "dropdown";
     getPosition(rect: DOMRect): TuiPoint;
     static ɵfac: i0.ɵɵFactoryDeclaration<TuiDropdownPositionSided, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<TuiDropdownPositionSided, "[tuiDropdownSided]", never, { "tuiDropdownSided": { "alias": "tuiDropdownSided"; "required": false; }; "tuiDropdownSidedOffset": { "alias": "tuiDropdownSidedOffset"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TuiDropdownPositionSided, "[tuiDropdownSided]", never, { "tuiDropdownSided": { "alias": "tuiDropdownSided"; "required": false; "isSignal": true; }; "tuiDropdownSidedOffset": { "alias": "tuiDropdownSidedOffset"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/{directives → portals}/dropdown/dropdown-position.directive.d.ts

@@ -1,6 +1,6 @@
-import { EventEmitter } from '@angular/core';
 import { TuiPositionAccessor, TuiRectAccessor } from '@taiga-ui/core/classes';
 import { type TuiPoint, type TuiVerticalDirection } from '@taiga-ui/core/types';
+import { Subject } from 'rxjs';
 import { type TuiDropdownAlign } from './dropdown-options.directive';
 import * as i0 from "@angular/core";
 export declare class TuiDropdownPosition extends TuiPositionAccessor {
@@ -8,12 +8,12 @@ export declare class TuiDropdownPosition extends TuiPositionAccessor {
     private readonly options;
     private readonly viewport;
     private previous?;
-    readonly directionChange: EventEmitter<TuiVerticalDirection>;
+    readonly direction: Subject<TuiVerticalDirection>;
     readonly type = "dropdown";
     readonly accessor: TuiRectAccessor;
-    emitDirection(direction: TuiVerticalDirection): void;
+    readonly tuiDropdownDirectionChange: import("@angular/core").OutputRef<TuiVerticalDirection>;
     getPosition({ width, height }: DOMRect): TuiPoint;
     getAlign(align: TuiDropdownAlign): TuiDropdownAlign;
     static ɵfac: i0.ɵɵFactoryDeclaration<TuiDropdownPosition, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<TuiDropdownPosition, never, never, {}, { "directionChange": "tuiDropdownDirectionChange"; }, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TuiDropdownPosition, never, never, {}, { "tuiDropdownDirectionChange": "tuiDropdownDirectionChange"; }, never, never, true, never>;
 }

package/{directives → portals}/dropdown/dropdown-selection.directive.d.ts

@@ -1,7 +1,6 @@
 import { type OnDestroy, ViewContainerRef } from '@angular/core';
 import { type TuiBooleanHandler } from '@taiga-ui/cdk/types';
 import { TuiDriver, type TuiRectAccessor } from '@taiga-ui/core/classes';
-import { BehaviorSubject } from 'rxjs';
 import { TuiDropdownDirective } from './dropdown.directive';
 import * as i0 from "@angular/core";
 export declare class TuiDropdownSelection extends TuiDriver implements TuiRectAccessor, OnDestroy {
@@ -10,13 +9,13 @@ export declare class TuiDropdownSelection extends TuiDriver implements TuiRectAc
     protected readonly vcr: ViewContainerRef;
     protected readonly dropdown: TuiDropdownDirective;
     protected readonly el: HTMLElement;
-    protected readonly handler$: BehaviorSubject<TuiBooleanHandler<Range>>;
+    protected readonly handler: import("@angular/core").Signal<TuiBooleanHandler<Range>>;
     protected readonly stream$: import("rxjs").Observable<boolean>;
     protected range: Range;
-    position: 'selection' | 'tag' | 'word';
     readonly type = "dropdown";
+    readonly tuiDropdownSelection: import("@angular/core").InputSignal<string | TuiBooleanHandler<Range>>;
+    readonly tuiDropdownSelectionPosition: import("@angular/core").InputSignal<"selection" | "tag" | "word">;
     constructor();
-    set tuiDropdownSelection(visible: TuiBooleanHandler<Range> | string);
     getClientRect(): DOMRect;
     ngOnDestroy(): void;
     private get ghostHost();
@@ -39,5 +38,5 @@ export declare class TuiDropdownSelection extends TuiDriver implements TuiRectAc
      */
     private initGhost;
     static ɵfac: i0.ɵɵFactoryDeclaration<TuiDropdownSelection, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<TuiDropdownSelection, "[tuiDropdownSelection]", never, { "position": { "alias": "tuiDropdownSelectionPosition"; "required": false; }; "tuiDropdownSelection": { "alias": "tuiDropdownSelection"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TuiDropdownSelection, "[tuiDropdownSelection]", never, { "tuiDropdownSelection": { "alias": "tuiDropdownSelection"; "required": false; "isSignal": true; }; "tuiDropdownSelectionPosition": { "alias": "tuiDropdownSelectionPosition"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/{directives → portals}/dropdown/dropdown.bindings.d.ts

@@ -5,5 +5,4 @@ export declare function tuiDropdown(value: C | WritableSignal<C>): WritableSigna
 export declare function tuiDropdown(value: Signal<C>): Signal<C>;
 export declare function tuiDropdownEnabled(value: WritableSignal<boolean> | boolean): WritableSignal<boolean>;
 export declare function tuiDropdownEnabled(value: Signal<boolean>): Signal<boolean>;
-export declare function tuiDropdownOpen(): WritableSignal<boolean>;
 export {};

package/{directives → portals}/dropdown/dropdown.d.ts

@@ -6,9 +6,8 @@ import { TuiDropdownContext } from './dropdown-context.directive';
 import { TuiDropdownHover } from './dropdown-hover.directive';
 import { TuiDropdownManual } from './dropdown-manual.directive';
 import { TuiDropdownOpen } from './dropdown-open.directive';
-import { TuiDropdownOpenLegacy } from './dropdown-open-legacy.directive';
 import { TuiDropdownOptionsDirective } from './dropdown-options.directive';
 import { TuiDropdownPosition } from './dropdown-position.directive';
 import { TuiDropdownPositionSided } from './dropdown-position-sided.directive';
 import { TuiDropdownSelection } from './dropdown-selection.directive';
-export declare const TuiDropdown: readonly [typeof TuiDropdownOptionsDirective, typeof TuiDropdownDriverDirective, typeof TuiDropdownDirective, typeof TuiDropdownComponent, typeof TuiDropdownOpen, typeof TuiDropdownOpenLegacy, typeof TuiDropdownManual, typeof TuiDropdownHover, typeof TuiDropdownContent, typeof TuiDropdownContext, typeof TuiDropdownPosition, typeof TuiDropdownPositionSided, typeof TuiDropdownSelection];
+export declare const TuiDropdown: readonly [typeof TuiDropdownOptionsDirective, typeof TuiDropdownDriverDirective, typeof TuiDropdownDirective, typeof TuiDropdownComponent, typeof TuiDropdownOpen, typeof TuiDropdownManual, typeof TuiDropdownHover, typeof TuiDropdownContent, typeof TuiDropdownContext, typeof TuiDropdownPosition, typeof TuiDropdownPositionSided, typeof TuiDropdownSelection];

package/{directives → portals}/dropdown/dropdown.directive.d.ts

@@ -11,19 +11,18 @@ export declare class TuiDropdownDirective implements AfterViewChecked, OnDestroy
     private readonly cdr;
     private readonly drivers;
     protected readonly sub: import("rxjs").Subscription;
+    protected readonly autoClose: import("@angular/core").EffectRef;
+    readonly ref: import("@angular/core").WritableSignal<ComponentRef<unknown> | null>;
     readonly el: HTMLElement;
     readonly type = "dropdown";
     readonly component: PolymorpheusComponent<any>;
-    ref: import("@angular/core").WritableSignal<ComponentRef<unknown> | null>;
-    readonly _content: import("@angular/core").WritableSignal<PolymorpheusContent<TuiContext<() => void>>>;
-    set tuiDropdown(content: PolymorpheusContent<TuiContext<() => void>>);
+    readonly tuiDropdown: import("@angular/core").InputSignal<PolymorpheusContent<TuiContext<() => void>>>;
+    readonly content: import("@angular/core").Signal<PolymorpheusContent<TuiContext<() => void>>>;
     get position(): 'absolute' | 'fixed';
-    get content(): PolymorpheusContent<TuiContext<() => void>>;
-    set content(x: PolymorpheusContent<TuiContext<() => void>>);
     ngAfterViewChecked(): void;
     ngOnDestroy(): void;
     getClientRect(): DOMRect;
     toggle(show: boolean): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<TuiDropdownDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<TuiDropdownDirective, "[tuiDropdown]:not(ng-container):not(ng-template)", ["tuiDropdown"], { "tuiDropdown": { "alias": "tuiDropdown"; "required": false; }; }, {}, never, never, true, [{ directive: typeof i1.TuiDropdownDriverDirective; inputs: {}; outputs: {}; }, { directive: typeof i2.TuiDropdownPosition; inputs: {}; outputs: { "tuiDropdownDirectionChange": "tuiDropdownDirectionChange"; }; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TuiDropdownDirective, "[tuiDropdown]:not(ng-container):not(ng-template)", ["tuiDropdown"], { "tuiDropdown": { "alias": "tuiDropdown"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.TuiDropdownDriverDirective; inputs: {}; outputs: {}; }, { directive: typeof i2.TuiDropdownPosition; inputs: {}; outputs: { "tuiDropdownDirectionChange": "tuiDropdownDirectionChange"; }; }]>;
 }

package/{directives → portals}/dropdown/index.d.ts

@@ -11,7 +11,6 @@ export * from './dropdown-hover.options';
 export * from './dropdown-limit-width';
 export * from './dropdown-manual.directive';
 export * from './dropdown-open.directive';
-export * from './dropdown-open-legacy.directive';
 export * from './dropdown-options.directive';
 export * from './dropdown-position.directive';
 export * from './dropdown-position-sided.directive';

package/{directives → portals}/hint/hint-position.directive.d.ts

@@ -4,17 +4,17 @@ import { type TuiHintDirection } from './hint-options.directive';
 import * as i0 from "@angular/core";
 export declare class TuiHintPosition extends TuiPositionAccessor {
     private readonly el;
-    private readonly offset;
     private readonly viewport;
     private readonly accessor;
     private readonly points;
     readonly direction: import("@angular/core").InputSignal<TuiHintDirection | TuiHintDirection[]>;
+    readonly offset: import("@angular/core").InputSignal<number>;
     readonly directionChange: import("@angular/core").OutputEmitterRef<TuiHintDirection>;
     readonly type = "hint";
     emitDirection(direction: TuiHintDirection): void;
-    getPosition(rect: DOMRect, el?: HTMLElement): TuiPoint;
+    getPosition({ width, height }: DOMRect): TuiPoint;
     private get fallback();
     private checkPosition;
     static ɵfac: i0.ɵɵFactoryDeclaration<TuiHintPosition, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<TuiHintPosition, never, never, { "direction": { "alias": "tuiHintDirection"; "required": false; "isSignal": true; }; }, { "directionChange": "tuiHintDirectionChange"; }, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TuiHintPosition, never, never, { "direction": { "alias": "tuiHintDirection"; "required": false; "isSignal": true; }; "offset": { "alias": "tuiHintOffset"; "required": false; "isSignal": true; }; }, { "directionChange": "tuiHintDirectionChange"; }, never, never, true, never>;
 }

package/{directives → portals}/hint/hint.directive.d.ts

@@ -20,5 +20,5 @@ export declare class TuiHintDirective<C> implements OnDestroy, OnChanges, TuiRec
     getClientRect(): DOMRect;
     toggle(show: boolean): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<TuiHintDirective<any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<TuiHintDirective<any>, "[tuiHint]:not(ng-container):not(ng-template)", never, { "content": { "alias": "tuiHint"; "required": false; "isSignal": true; }; "context": { "alias": "tuiHintContext"; "required": false; "isSignal": true; }; "appearance": { "alias": "tuiHintAppearance"; "required": false; "isSignal": true; }; }, { "visible": "tuiHintVisible"; }, never, never, true, [{ directive: typeof i1.TuiHintDriver; inputs: {}; outputs: {}; }, { directive: typeof i2.TuiHintHover; inputs: { "tuiHintHideDelay": "tuiHintHideDelay"; "tuiHintShowDelay": "tuiHintShowDelay"; }; outputs: {}; }, { directive: typeof i3.TuiHintPosition; inputs: { "tuiHintDirection": "tuiHintDirection"; }; outputs: { "tuiHintDirectionChange": "tuiHintDirectionChange"; }; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TuiHintDirective<any>, "[tuiHint]:not(ng-container):not(ng-template)", never, { "content": { "alias": "tuiHint"; "required": false; "isSignal": true; }; "context": { "alias": "tuiHintContext"; "required": false; "isSignal": true; }; "appearance": { "alias": "tuiHintAppearance"; "required": false; "isSignal": true; }; }, { "visible": "tuiHintVisible"; }, never, never, true, [{ directive: typeof i1.TuiHintDriver; inputs: {}; outputs: {}; }, { directive: typeof i2.TuiHintHover; inputs: { "tuiHintHideDelay": "tuiHintHideDelay"; "tuiHintShowDelay": "tuiHintShowDelay"; }; outputs: {}; }, { directive: typeof i3.TuiHintPosition; inputs: { "tuiHintDirection": "tuiHintDirection"; "tuiHintOffset": "tuiHintOffset"; }; outputs: { "tuiHintDirectionChange": "tuiHintDirectionChange"; }; }]>;
 }

package/portals/index.d.ts

@@ -0,0 +1,6 @@
+export * from '@taiga-ui/core/portals/alert';
+export * from '@taiga-ui/core/portals/dialog';
+export * from '@taiga-ui/core/portals/dropdown';
+export * from '@taiga-ui/core/portals/hint';
+export * from '@taiga-ui/core/portals/modal';
+export * from '@taiga-ui/core/portals/popup';

package/services/index.d.ts

@@ -1,5 +1,3 @@
 export * from './breakpoint.service';
-export * from './dark-theme.service';
-export * from './format-date.service';
 export * from './position.service';
 export * from './visual-viewport.service';

package/styles/components/appearance.less

@@ -41,5 +41,10 @@
     .appearance-disabled({
         cursor: initial;
         opacity: var(--tui-disabled-opacity);
+
+        &::before,
+        &::after {
+            cursor: initial;
+        }
     });
 }

package/styles/components/button.less

@@ -138,7 +138,7 @@
         margin: 0;
     }
 
-    &&[style*='--t-icon-start:']::after {
+    &&[data-icon-start]::after {
         display: none;
     }
 }

package/styles/components/link.less

@@ -21,19 +21,15 @@
     border: none;
     cursor: pointer;
     font: inherit;
-    color: var(--tui-text-primary);
+    color: inherit;
+    border-radius: 0.125rem;
+    outline-width: 1px;
+    outline-offset: -1px;
     text-decoration: none dashed currentColor;
     text-underline-offset: 0.2em;
-    text-decoration-thickness: 0.7px;
+    text-decoration-thickness: 1px;
     text-decoration-color: color-mix(in lch, currentColor, transparent);
 
-    // TODO: Remove in v5
-    @media @tui-mouse {
-        &:hover {
-            --tui-text-secondary: var(--tui-text-primary);
-        }
-    }
-
     &::before {
         margin-inline-end: 0.25rem;
     }
@@ -58,12 +54,6 @@
         display: inline-block;
     }
 
-    .appearance-focus({
-        outline: none;
-        background: var(--tui-service-selection-background);
-        background: color-mix(in lch, currentColor 12%, transparent);
-    });
-
     .appearance-hover({
         text-decoration-color: currentColor;
     });
@@ -72,13 +62,8 @@
         text-decoration-color: currentColor;
     });
 
-    @media @tui-mouse {
-        &[data-appearance='']:hover {
-            opacity: 0.7;
-        }
-    }
-
-    &[data-appearance='']:active {
-        opacity: 0.7;
+    &[data-appearance=''] {
+        text-decoration-line: underline;
+        text-decoration-style: solid;
     }
 }

package/styles/components/notification.less

@@ -42,11 +42,11 @@ tui-notification,
     --t-start: 0;
     --t-end: 0;
 
-    &[style*='--t-icon-start:'] {
+    &[data-icon-start] {
         --t-start: 2rem;
     }
 
-    &[style*='--t-icon-end:'] {
+    &[data-icon-end] {
         --t-end: 1.5rem;
     }
 
@@ -78,7 +78,7 @@ tui-notification,
         line-height: 1.25rem;
         border-radius: var(--tui-radius-m);
 
-        &[style*='--t-icon-start:'] {
+        &[data-icon-start] {
             --t-start: 1.5rem;
         }
 
@@ -133,7 +133,7 @@ tui-notification,
         line-height: 1.25rem;
         border-radius: var(--tui-radius-m);
 
-        &[style*='--t-icon-start:'] {
+        &[data-icon-start] {
             --t-start: 1.625rem;
         }
 

package/styles/components/textfield.less

@@ -6,8 +6,8 @@ tui-textfield {
 
     --t-height: var(--tui-height-l);
     --t-padding: var(--tui-padding-l);
-    --t-label: -0.7em;
-    --t-label-size: 0.83em;
+    --t-label-y: -0.75rem;
+    --t-label-font: var(--tui-font-text-s);
     --t-end: ~'0rem';
     --t-start: ~'0rem';
 
@@ -30,11 +30,11 @@ tui-textfield {
         color: var(--tui-text-tertiary);
     }
 
-    &[style*='--t-icon-start:'] {
+    &[data-icon-start] {
         --t-start: 2.25rem;
     }
 
-    &[style*='--t-icon-end:'] {
+    &[data-icon-end] {
         --t-end: 2.25rem;
     }
 
@@ -42,8 +42,7 @@ tui-textfield {
         position: relative;
         block-size: auto;
         align-self: stretch;
-        border-inline-start: var(--t-padding) solid transparent;
-        border-inline-end: var(--t-padding) solid transparent;
+        border-inline: var(--t-padding) solid transparent;
         margin: 0 calc(-1 * var(--t-padding));
     }
 
@@ -80,8 +79,7 @@ tui-textfield {
         font: inherit;
         resize: none;
         outline: none;
-        padding-block-start: 1.125rem;
-        padding-block-end: 1.125rem;
+        padding-block: 1.125rem;
         color: var(--tui-text-primary);
 
         &[inputmode='none'] {
@@ -98,31 +96,28 @@ tui-textfield {
         font: var(--tui-font-text-ui-s);
         line-height: 1rem;
 
-        &[style*='--t-icon-start:'] {
+        &[data-icon-start] {
             --t-start: 1.25rem;
         }
 
-        &[style*='--t-icon-end:'] {
+        &[data-icon-end] {
             --t-end: 1.25rem;
         }
 
         &::before {
-            margin-inline-end: 0.5rem;
-            margin-inline-start: -0.125rem;
+            margin-inline: -0.125rem 0.5rem;
             font-size: 1rem;
         }
 
         &::after {
-            margin-inline-end: calc(-0.125rem - var(--t-padding));
-            margin-inline-start: calc(0.625rem - var(--t-padding));
+            margin-inline: calc(0.625rem - var(--t-padding)) calc(-0.125rem - var(--t-padding));
             font-size: 1rem;
         }
 
         input,
         select,
         textarea {
-            padding-block-start: 0.5rem;
-            padding-block-end: 0.5rem;
+            padding-block: 0.5rem;
         }
 
         & > .t-content {
@@ -133,34 +128,33 @@ tui-textfield {
     &[data-size='m'] {
         --t-height: var(--tui-height-m);
         --t-padding: var(--tui-padding-m);
+        --t-label-font: var(--tui-font-text-xs);
+        --t-label-y: -0.5625rem;
 
         border-radius: var(--tui-radius-m);
         font: var(--tui-font-text-ui-s);
         line-height: 1rem;
 
-        &[style*='--t-icon-start:'] {
+        &[data-icon-start] {
             --t-start: 1.75rem;
         }
 
-        &[style*='--t-icon-end:'] {
+        &[data-icon-end] {
             --t-end: 1.75rem;
         }
 
         &::before {
-            margin-inline-start: -0.125rem;
-            margin-inline-end: 0.125rem;
+            margin-inline: -0.125rem 0.125rem;
         }
 
         &::after {
-            margin-inline-start: calc(0.25rem - var(--t-padding));
-            margin-inline-end: calc(-0.125rem - var(--t-padding));
+            margin-inline: calc(0.25rem - var(--t-padding)) calc(-0.125rem - var(--t-padding));
         }
 
         input,
         select,
         textarea {
-            padding-block-start: 0.875rem;
-            padding-block-end: 0.875rem;
+            padding-block: 0.875rem;
         }
 
         & > .t-content {
@@ -209,36 +203,12 @@ tui-textfield {
         opacity: var(--tui-disabled-opacity);
     }
 
-    &:has(label:not(:empty)) {
-        & > .t-template,
-        input:not([type='range']),
-        select:defined,
-        textarea:defined {
-            padding-block-start: calc(var(--t-height) / 3);
-            padding-block-end: 0;
-        }
-    }
-
-    &:not([data-focus='true']):has(label:not(:empty)) {
-        & > .t-template,
-        input:not([type='range']),
-        select:defined,
-        textarea:defined {
-            &::placeholder,
-            &._empty {
-                color: transparent;
-            }
-        }
-    }
-
-    // TODO: Fallback until Safari 15.4
     &._with-label {
         & > .t-template,
         input:not([type='range']),
         select:defined,
         textarea:defined {
-            padding-block-start: calc(var(--t-height) / 3);
-            padding-block-end: 0;
+            padding-block: calc(var(--t-height) / 3) 0;
         }
     }
 
@@ -266,8 +236,12 @@ tui-textfield {
         border-width: 0;
         overscroll-behavior: none;
         // StackBlitz changes "0rem" to "0" breaking calc
-        padding-inline-start: calc(var(--t-start, ~'0rem') + var(--t-padding));
-        padding-inline-end: calc(var(--t-end, ~'0rem') + var(--t-side) + var(--t-padding));
+        padding-inline: calc(var(--t-start, ~'0rem') + var(--t-padding))
+            calc(var(--t-end, ~'0rem') + var(--t-side, ~'0rem') + var(--t-padding));
+
+        &:disabled {
+            animation: tuiPresent 1s infinite;
+        }
     }
 
     & > .t-template {
@@ -288,7 +262,6 @@ tui-textfield {
         pointer-events: auto;
         background: none;
 
-        // TODO: Remove :not when we drop old select tuiTextfield in v5
         &:not(select):read-only ~ .t-filler {
             display: none;
         }
@@ -307,8 +280,9 @@ tui-textfield {
         &:-webkit-autofill,
         &:not(._empty):not(:placeholder-shown) {
             & ~ label {
-                font-size: var(--t-label-size);
-                transform: translateY(var(--t-label));
+                font: var(--t-label-font);
+                line-height: var(--t-height);
+                transform: translateY(var(--t-label-y));
             }
 
             &:not(:disabled)[data-mode~='invalid'] ~ label,
@@ -330,19 +304,12 @@ tui-textfield {
 
                 & ~ label {
                     color: var(--tui-text-primary) !important;
-                    font-size: var(--t-label-size);
-                    transform: translateY(var(--t-label));
+                    font: var(--t-label-font);
+                    line-height: var(--t-height);
+                    transform: translateY(var(--t-label-y));
                 }
             });
         }
-
-        // @deprecated remove in v5
-        .ios-only({
-            &._ios-fix {
-                position: fixed;
-                left: 1000rem;
-            }
-        });
     }
 
     // Increasing specificity to override all other styles
@@ -420,7 +387,7 @@ tui-textfield {
     }
 
     & > .t-filler:defined {
-        pointer-events: none;
+        pointer-events: none !important;
         color: var(--tui-text-tertiary);
         opacity: 1;
     }

package/styles/mixins/appearance.less

@@ -3,7 +3,7 @@
 .appearance-hover(@content) {
     .interactive({
         @media @tui-mouse {
-            &:hover:not(:disabled):not([data-state]) {
+            &:hover:not([data-state]) {
                 @content();
             }
         }
@@ -12,14 +12,6 @@
     &[data-state='hover'] {
         @content();
     }
-
-    /* @deprecated TODO remove in v5 */
-    @media @tui-mouse {
-        &[tuiWrapper]:hover:not(._no-hover),
-        &[tuiWrapper][data-state='hover'] {
-            @content();
-        }
-    }
 }
 
 .appearance-active(@content) {
@@ -32,13 +24,6 @@
     &[data-state='active'] {
         @content();
     }
-
-    /* @deprecated TODO remove in v5 */
-    &[tuiWrapper]:active:not(._no-active),
-    &[tuiWrapper][data-state='active'],
-    &[tuiWrapper][data-state='active']:hover {
-        @content();
-    }
 }
 
 .appearance-disabled(@content) {
@@ -46,12 +31,6 @@
     &[data-state='disabled'] {
         @content();
     }
-
-    /* @deprecated TODO remove in v5 */
-    &[tuiWrapper]:disabled:not([data-state]),
-    &[tuiWrapper][data-state='disabled'] {
-        @content();
-    }
 }
 
 .appearance-focus(@content) {
@@ -62,10 +41,15 @@
     &[data-focus='true'] {
         @content();
     }
+}
 
-    /* @deprecated TODO remove in v5 */
-    &[tuiWrapper]:not(._focused):has(:focus-visible),
-    &[tuiWrapper]._focused {
+.appearance-invalid(@content) {
+    &:is([data-mode~='invalid'], .tui-invalid, :invalid):not(
+            [data-mode~='readonly'],
+            [data-mode~='valid'],
+            [data-state='disabled'],
+            :disabled
+        ) {
         @content();
     }
 }