@taiga-ui/core 4.52.0-canary.ec0802b → 4.52.0-canary.efbd0d4

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

@@ -1,25 +1,20 @@
 import { TuiDriver } from '@taiga-ui/core/classes';
 import * as i0 from "@angular/core";
 export declare class TuiDropdownHover extends TuiDriver {
-    private readonly dropdownHost?;
+    private readonly dropdownHost;
+    private hovered;
     private readonly el;
     private readonly doc;
     private readonly options;
     private readonly activeZone;
     private readonly open;
-    /**
-     * Dropdown can be removed not only via click/touch –
-     * swipe on mobile devices removes dropdown sheet without triggering new mouseover / mouseout events.
-     */
-    private readonly dropdownExternalRemoval$;
     private readonly stream$;
-    showDelay: number;
-    hideDelay: number;
-    hovered: boolean;
+    readonly tuiDropdownShowDelay: import("@angular/core").InputSignal<number>;
+    readonly tuiDropdownHideDelay: import("@angular/core").InputSignal<number>;
     readonly type = "dropdown";
     constructor();
     protected onClick(event: MouseEvent): void;
     private isHovered;
     static ɵfac: i0.ɵɵFactoryDeclaration<TuiDropdownHover, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<TuiDropdownHover, "[tuiDropdownHover]", never, { "showDelay": { "alias": "tuiDropdownShowDelay"; "required": false; }; "hideDelay": { "alias": "tuiDropdownHideDelay"; "required": false; }; }, {}, ["dropdownHost"], never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TuiDropdownHover, "[tuiDropdownHover]", never, { "tuiDropdownShowDelay": { "alias": "tuiDropdownShowDelay"; "required": false; "isSignal": true; }; "tuiDropdownHideDelay": { "alias": "tuiDropdownHideDelay"; "required": false; "isSignal": true; }; }, {}, ["dropdownHost"], never, true, never>;
 }

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

@@ -2,8 +2,8 @@ import { type OnChanges } from '@angular/core';
 import * as i0 from "@angular/core";
 export declare class TuiDropdownManual implements OnChanges {
     private readonly driver;
-    tuiDropdownManual: boolean | '';
+    readonly tuiDropdownManual: import("@angular/core").InputSignal<boolean | "">;
     ngOnChanges(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<TuiDropdownManual, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<TuiDropdownManual, "[tuiDropdownManual]", never, { "tuiDropdownManual": { "alias": "tuiDropdownManual"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TuiDropdownManual, "[tuiDropdownManual]", never, { "tuiDropdownManual": { "alias": "tuiDropdownManual"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

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-options.directive.d.ts

@@ -12,11 +12,7 @@ export interface TuiDropdownOptions {
     readonly minHeight: number;
     readonly offset: number;
 }
-/** Default values for dropdown options */
 export declare const TUI_DROPDOWN_DEFAULT_OPTIONS: TuiDropdownOptions;
-/**
- * Default parameters for dropdown directive
- */
 export declare const TUI_DROPDOWN_OPTIONS: InjectionToken<TuiDropdownOptions>;
 export declare const tuiDropdownOptionsProvider: (options: Partial<TuiDropdownOptions>) => FactoryProvider;
 export declare class TuiDropdownOptionsDirective implements TuiDropdownOptions {

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,2 @@
-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

@@ -32,7 +32,7 @@
     padding: var(--t-padding);
     user-select: none;
     cursor: pointer;
-    font: var(--tui-font-text-m);
+    font: var(--tui-font-body-m);
     font-weight: bold;
 
     > .t-loader {
@@ -50,10 +50,11 @@
         --t-padding: 0 0.375rem;
         --t-margin: -0.125rem;
 
-        font: var(--tui-font-text-s);
+        font: var(--tui-font-body-s);
 
         tui-icon,
-        &::before {
+        &::before,
+        &::after {
             font-size: 1rem;
         }
     }
@@ -65,10 +66,11 @@
         --t-padding: 0 0.625rem;
         --t-margin: -0.125rem;
 
-        font: var(--tui-font-text-s);
+        font: var(--tui-font-body-s);
 
         tui-icon,
-        &:not([tuiIconButton][data-appearance='icon']):not([tuiIconButton][data-appearance='link'])::before {
+        &:not([tuiIconButton][data-appearance='icon'], [tuiIconButton][data-appearance='link'])::before,
+        &:not([tuiIconButton][data-appearance='icon'], [tuiIconButton][data-appearance='link'])::after {
             font-size: 1rem;
         }
     }
@@ -80,12 +82,8 @@
         --t-padding: 0 1rem;
         --t-margin: -0.375rem;
 
-        font: var(--tui-font-text-m);
+        font: var(--tui-font-body-m);
         font-weight: bold;
-
-        &::after {
-            margin-inline-end: -0.125rem;
-        }
     }
 
     &._loading {
@@ -104,10 +102,6 @@
         }
     }
 
-    &[tuiIcons]::after {
-        font-size: 1rem;
-    }
-
     &[tuiButtonVertical] {
         // StackBlitz changes "0rem" to "0" breaking calc
         --t-margin: ~'0rem' !important;
@@ -120,7 +114,7 @@
         gap: 0.375rem;
         min-inline-size: 5rem;
         white-space: pre-line;
-        font: var(--tui-font-text-ui-s);
+        font: var(--tui-font-ui-s);
 
         & > * {
             max-block-size: calc(var(--t-line-height) * 2);
@@ -134,11 +128,7 @@
     font-size: 0 !important;
     padding: 0;
 
-    &[data-size='l']::after {
-        margin: 0;
-    }
-
-    &&[style*='--t-icon-start:']::after {
+    &&[data-icon-start]::after {
         display: none;
     }
 }

package/styles/components/icon.less

@@ -31,6 +31,7 @@ tui-icon {
     vertical-align: middle;
     box-sizing: border-box;
     mask: var(--t-icon-bg) no-repeat center / calc(100% + 10 * var(--tui-stroke-width, 0.125rem)) 100%;
+    zoom: ~'calc(100% * (min(max(var(--tui-font-offset) - 10px, 0px), 1px) / 0.8px))';
 
     @media @tui-mouse {
         &[data-appearance='icon']:hover {
@@ -69,4 +70,14 @@ tui-icon {
             --tui-icon-size: 0.5715em;
         }
     }
+
+    &[data-icon-start='img']::before,
+    &[data-icon-end='img']::after {
+        zoom: 1;
+    }
+
+    &[data-icon-start='font']::before,
+    &[data-icon-end='font']::after {
+        zoom: 0.667;
+    }
 }

package/styles/components/icons.less

@@ -31,6 +31,7 @@
         flex-shrink: 0;
         box-sizing: content-box;
         background: currentColor;
+        zoom: ~'calc(100% * (min(max(var(--tui-font-offset) - 10px, 0px), 1px) / 0.8px))';
     }
 
     &::before {
@@ -62,7 +63,7 @@
         display: grid;
         mask: none;
         background: none;
-        font: 1.3em/1 var(--tui-font-icon, inherit);
+        font: 1.5em / 1 var(--tui-font-icon, inherit);
         text-align: center;
         place-content: center;
         text-transform: none;

package/styles/components/label.less

@@ -18,22 +18,13 @@
     display: flex;
     gap: 0.25rem;
     flex-direction: column;
-    font: var(--tui-font-text-s);
+    font: var(--tui-font-body-s);
     color: var(--tui-text-primary);
 
     &:not([data-orientation='vertical']) {
         flex-direction: row;
         inline-size: fit-content;
-        font: var(--tui-font-text-m);
-    }
-
-    // TODO: Remove after legacy inputs are dropped
-    &:has(tui-textfield),
-    &:has(tui-primitive-textfield),
-    &:has(tui-textarea) {
-        flex-direction: column !important;
-        inline-size: auto !important;
-        font: var(--tui-font-text-s) !important;
+        font: var(--tui-font-body-m);
     }
 
     input[type='checkbox'],
@@ -47,7 +38,7 @@
     }
 
     small {
-        font: var(--tui-font-text-s);
+        font: var(--tui-font-body-s);
     }
 
     [tuiTitle] {

package/styles/components/link.less

@@ -21,19 +21,14 @@
     border: none;
     cursor: pointer;
     font: inherit;
-    color: var(--tui-text-primary);
-    text-decoration: none dashed currentColor;
+    color: inherit;
+    border-radius: 0.125rem;
+    outline-width: 1px;
+    outline-offset: -1px;
     text-underline-offset: 0.2em;
-    text-decoration-thickness: 0.7px;
+    text-decoration: none dashed currentColor 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 +53,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 +61,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

@@ -2,7 +2,7 @@
 
 /**
  * @name Notification
- * @selector tui-notification, [tuiNotification]
+ * @selector [tuiNotification]
  *
  * @description
  * A colored rounded block of information with optional icon, title, subtitle and actions
@@ -11,17 +11,16 @@
  * data-size — size (default: 'l') ('s' | 'm' | 'l')
  *
  * @example
- * <tui-notification tuiAppearance data-appearance="negative">
+ * <div tuiNotification tuiAppearance data-appearance="negative">
  *   <span tuiTitle>
  *     Error
  *     <span tuiSubtitle>Something went wrong</span>
  *   </span>
- * </tui-notification>
+ * </div>
  *
  * @see-also
  * Icons, Appearance
  */
-tui-notification,
 [tuiNotification] {
     .button-clear();
 
@@ -30,7 +29,7 @@ tui-notification,
     max-block-size: 100%;
     color: var(--tui-text-primary);
     padding: 1rem;
-    font: var(--tui-font-text-m);
+    font: var(--tui-font-body-m);
     line-height: 1.5rem;
     border-radius: var(--tui-radius-l);
     box-sizing: border-box;
@@ -39,14 +38,18 @@ tui-notification,
     border-inline-start: var(--t-start) solid transparent;
     border-inline-end: var(--t-end) solid transparent;
 
+    .interactive({
+        cursor: pointer;
+    });
+
     --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;
     }
 
@@ -74,11 +77,11 @@ tui-notification,
 
     &[data-size='s'] {
         padding: 0.375rem 0.625rem;
-        font: var(--tui-font-text-s);
+        font: var(--tui-font-body-s);
         line-height: 1.25rem;
         border-radius: var(--tui-radius-m);
 
-        &[style*='--t-icon-start:'] {
+        &[data-icon-start] {
             --t-start: 1.5rem;
         }
 
@@ -103,12 +106,12 @@ tui-notification,
         }
 
         [tuiTitle] {
-            font: var(--tui-font-text-s);
+            font: var(--tui-font-body-s);
             font-weight: bold;
         }
 
         [tuiSubtitle] {
-            font: var(--tui-font-text-s);
+            font: var(--tui-font-body-s);
         }
 
         [tuiSubtitle] + * {
@@ -129,11 +132,11 @@ tui-notification,
 
     &[data-size='m'] {
         padding: 0.75rem;
-        font: var(--tui-font-text-s);
+        font: var(--tui-font-body-s);
         line-height: 1.25rem;
         border-radius: var(--tui-radius-m);
 
-        &[style*='--t-icon-start:'] {
+        &[data-icon-start] {
             --t-start: 1.625rem;
         }
 
@@ -157,12 +160,12 @@ tui-notification,
         }
 
         [tuiTitle] {
-            font: var(--tui-font-text-ui-m);
+            font: var(--tui-font-ui-m);
             font-weight: bold;
         }
 
         [tuiSubtitle] {
-            font: var(--tui-font-text-s);
+            font: var(--tui-font-body-s);
         }
 
         [tuiSubtitle] + * {
@@ -183,19 +186,19 @@ tui-notification,
 
     [tuiTitle] {
         gap: 0.125rem;
-        font: var(--tui-font-text-ui-l);
+        font: var(--tui-font-ui-l);
         font-weight: bold;
     }
 
     [tuiSubtitle] {
-        font: var(--tui-font-text-m);
+        font: var(--tui-font-body-m);
 
         + * {
             display: flex;
             align-items: center;
             gap: 1.25rem;
             margin-block-start: 0.625rem;
-            font: var(--tui-font-text-s);
+            font: var(--tui-font-body-s);
         }
     }
 
@@ -212,7 +215,3 @@ tui-notification,
         }
     }
 }
-
-[tuiNotification] {
-    cursor: pointer;
-}