@taiga-ui/core 4.52.0-canary.bf9131e → 4.52.0-canary.c8448e0

package/fesm2022/{taiga-ui-core-directives-hint.mjs → taiga-ui-core-portals-hint.mjs}

@@ -1,7 +1,6 @@
-import { __decorate } from 'tslib';
 import * as i0 from '@angular/core';
-import { InjectionToken, Directive, Optional, Self, SkipSelf, inject, Input, input, output, INJECTOR, ChangeDetectionStrategy, Component, TemplateRef, signal, computed } from '@angular/core';
-import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
+import { InjectionToken, Directive, Optional, SkipSelf, inject, input, output, INJECTOR, ChangeDetectionStrategy, Component, TemplateRef, forwardRef, signal, computed } from '@angular/core';
+import { outputFromObservable, takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
 import { EMPTY_CLIENT_RECT } from '@taiga-ui/cdk/constants';
 import * as i3 from '@taiga-ui/cdk/directives/active-zone';
 import { TuiActiveZone } from '@taiga-ui/cdk/directives/active-zone';
@@ -11,17 +10,17 @@ import { TuiHoveredService } from '@taiga-ui/cdk/directives/hovered';
 import { TUI_IS_MOBILE } from '@taiga-ui/cdk/tokens';
 import { tuiInjectElement, tuiPointToClientRect } from '@taiga-ui/cdk/utils/dom';
 import { tuiClamp } from '@taiga-ui/cdk/utils/math';
-import { tuiProvide, tuiPure, tuiSetSignal, tuiPx, tuiIsPresent } from '@taiga-ui/cdk/utils/miscellaneous';
-import { TuiDriverDirective, TuiDriver, tuiAsDriver, TuiPositionAccessor, tuiFallbackAccessor, TuiRectAccessor, tuiAsRectAccessor, tuiAsVehicle, tuiPositionAccessorFor, tuiRectAccessorFor } from '@taiga-ui/core/classes';
+import { tuiSetSignal, tuiPx, tuiIsPresent } from '@taiga-ui/cdk/utils/miscellaneous';
+import { TuiDriverDirective, TuiDriver, tuiAsDriver, TuiPositionAccessor, tuiFallbackAccessor, TuiRectAccessor, tuiAsVehicle, tuiAsRectAccessor, tuiPositionAccessorFor, tuiRectAccessorFor } from '@taiga-ui/core/classes';
 import { tuiButtonOptionsProvider } from '@taiga-ui/core/components/button';
 import * as i1 from '@taiga-ui/core/directives/appearance';
 import { tuiAppearance, TuiAppearance } from '@taiga-ui/core/directives/appearance';
 import { TuiPositionService, TuiVisualViewportService } from '@taiga-ui/core/services';
 import { TUI_VIEWPORT } from '@taiga-ui/core/tokens';
-import { tuiOverrideOptions, tuiIsObscured } from '@taiga-ui/core/utils';
+import { tuiOverrideOptions, tuiIsObscured } from '@taiga-ui/core/utils/miscellaneous';
 import { PolymorpheusComponent, PolymorpheusOutlet } from '@taiga-ui/polymorpheus';
-import { Subject, merge, switchMap, of, delay, takeUntil, repeat, filter, map, tap, takeWhile, distinctUntilChanged, fromEvent, debounce, timer, startWith, skip, BehaviorSubject } from 'rxjs';
-import { TuiPopupService } from '@taiga-ui/core/directives/popup';
+import { Subject, merge, switchMap, of, delay, takeUntil, repeat, filter, map, tap, distinctUntilChanged, takeWhile, fromEvent, debounce, timer, startWith, skip, BehaviorSubject } from 'rxjs';
+import { TuiPopupService } from '@taiga-ui/core/portals/popup';
 import { DOCUMENT } from '@angular/common';
 import { tuiIfMap, tuiTypedFromEvent, tuiZoneOptimized } from '@taiga-ui/cdk/observables';
 import { tuiIsFocused } from '@taiga-ui/cdk/utils/focus';
@@ -38,30 +37,30 @@ class TuiHintDriver extends TuiDriverDirective {
         super(...arguments);
         this.type = 'hint';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiHintDriver, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: TuiHintDriver, isStandalone: true, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiHintDriver, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: TuiHintDriver, isStandalone: true, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiHintDriver, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiHintDriver, decorators: [{
             type: Directive
         }] });
 
 const TUI_HINT_DIRECTIONS = [
-    'bottom-left',
+    'bottom-start',
     'bottom',
-    'bottom-right',
-    'top-left',
+    'bottom-end',
+    'top-start',
     'top',
-    'top-right',
-    'left-top',
-    'left',
-    'left-bottom',
-    'right-top',
-    'right',
-    'right-bottom',
+    'top-end',
+    'start-top',
+    'start',
+    'start-bottom',
+    'end-top',
+    'end',
+    'end-bottom',
 ];
 /** Default values for hint options */
 const TUI_HINT_DEFAULT_OPTIONS = {
-    direction: 'bottom-left',
+    direction: 'bottom-start',
     showDelay: 500,
     hideDelay: 200,
     appearance: '',
@@ -76,54 +75,9 @@ const TUI_HINT_OPTIONS = new InjectionToken(ngDevMode ? 'TUI_HINT_OPTIONS' : '',
 });
 const tuiHintOptionsProvider = (override) => ({
     provide: TUI_HINT_OPTIONS,
-    deps: [
-        [new Optional(), new Self(), TuiHintOptionsDirective],
-        [new Optional(), new SkipSelf(), TUI_HINT_OPTIONS],
-    ],
+    deps: [[new Optional(), new SkipSelf(), TUI_HINT_OPTIONS]],
     useFactory: tuiOverrideOptions(override, TUI_HINT_DEFAULT_OPTIONS),
 });
-/**
- * @deprecated: drop in 5.0
- */
-class TuiHintOptionsDirective {
-    constructor() {
-        this.options = inject(TUI_HINT_OPTIONS, { skipSelf: true });
-        this.direction = this.options.direction;
-        this.appearance = this.options.appearance;
-        this.showDelay = this.options.showDelay;
-        this.hideDelay = this.options.hideDelay;
-        this.icon = this.options.icon;
-        this.change$ = new Subject();
-    }
-    ngOnChanges() {
-        this.change$.next();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiHintOptionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: TuiHintOptionsDirective, isStandalone: true, selector: "[tuiHintContent]", inputs: { content: ["tuiHintContent", "content"], direction: ["tuiHintDirection", "direction"], appearance: ["tuiHintAppearance", "appearance"], showDelay: ["tuiHintShowDelay", "showDelay"], hideDelay: ["tuiHintHideDelay", "hideDelay"] }, providers: [tuiProvide(TUI_HINT_OPTIONS, TuiHintOptionsDirective)], usesOnChanges: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiHintOptionsDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    standalone: true,
-                    selector: '[tuiHintContent]',
-                    providers: [tuiProvide(TUI_HINT_OPTIONS, TuiHintOptionsDirective)],
-                }]
-        }], propDecorators: { content: [{
-                type: Input,
-                args: ['tuiHintContent']
-            }], direction: [{
-                type: Input,
-                args: ['tuiHintDirection']
-            }], appearance: [{
-                type: Input,
-                args: ['tuiHintAppearance']
-            }], showDelay: [{
-                type: Input,
-                args: ['tuiHintShowDelay']
-            }], hideDelay: [{
-                type: Input,
-                args: ['tuiHintHideDelay']
-            }] } });
 
 class TuiHintHover extends TuiDriver {
     constructor() {
@@ -137,7 +91,7 @@ class TuiHintHover extends TuiDriver {
         this.stream$ = merge(this.toggle$.pipe(switchMap((show) => this.isMobile
             ? of(show)
             : of(show).pipe(delay(show ? 0 : this.hideDelay()))), takeUntil(this.hovered$), repeat()), this.hovered$.pipe(switchMap((show) => this.isMobile
-            ? of(show)
+            ? of(show).pipe(delay(0))
             : of(show).pipe(delay(show ? this.showDelay() : this.hideDelay()))), takeUntil(this.toggle$), repeat())).pipe(filter(() => this.enabled), map((value) => value &&
             (this.el.hasAttribute('tuiHintPointer') || !tuiIsObscured(this.el))), tap((visible) => {
             this.visible = visible;
@@ -162,10 +116,10 @@ class TuiHintHover extends TuiDriver {
     close() {
         this.toggle$.next(false);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiHintHover, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.15", type: TuiHintHover, isStandalone: true, inputs: { showDelay: { classPropertyName: "showDelay", publicName: "tuiHintShowDelay", isSignal: true, isRequired: false, transformFunction: null }, hideDelay: { classPropertyName: "hideDelay", publicName: "tuiHintHideDelay", isSignal: true, isRequired: false, transformFunction: null } }, providers: [tuiAsDriver(TuiHintHover), TuiHoveredService], exportAs: ["tuiHintHover"], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiHintHover, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.17", type: TuiHintHover, isStandalone: true, inputs: { showDelay: { classPropertyName: "showDelay", publicName: "tuiHintShowDelay", isSignal: true, isRequired: false, transformFunction: null }, hideDelay: { classPropertyName: "hideDelay", publicName: "tuiHintHideDelay", isSignal: true, isRequired: false, transformFunction: null } }, providers: [tuiAsDriver(TuiHintHover), TuiHoveredService], exportAs: ["tuiHintHover"], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiHintHover, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiHintHover, decorators: [{
             type: Directive,
             args: [{
                     providers: [tuiAsDriver(TuiHintHover), TuiHoveredService],
@@ -175,66 +129,62 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
 
 const GAP$1 = 8;
 const ARROW_OFFSET = 24;
-const TOP = 0;
-const LEFT = 1;
+const TOP = 1;
+const LEFT = 0;
 class TuiHintPosition extends TuiPositionAccessor {
     constructor() {
         super(...arguments);
         this.el = tuiInjectElement();
-        this.offset = inject(TUI_IS_MOBILE) ? 16 : 8;
         this.viewport = inject(TUI_VIEWPORT);
-        this.accessor = tuiFallbackAccessor('hint')(inject(TuiRectAccessor), inject(TuiHintDirective));
+        this.directionChange = new Subject();
+        this.accessor = tuiFallbackAccessor('hint')(inject(TuiRectAccessor, { optional: true }), { getClientRect: () => this.el.getBoundingClientRect() });
         this.points = TUI_HINT_DIRECTIONS.reduce((acc, direction) => ({ ...acc, [direction]: [0, 0] }), {});
         this.direction = input(inject(TUI_HINT_OPTIONS).direction, {
             alias: 'tuiHintDirection',
         });
-        this.directionChange = output({
-            alias: 'tuiHintDirectionChange',
+        this.offset = input(inject(TUI_IS_MOBILE) ? 16 : 8, {
+            alias: 'tuiHintOffset',
         });
+        this.tuiHintDirectionChange = outputFromObservable(this.directionChange.pipe(distinctUntilChanged()));
         this.type = 'hint';
     }
-    emitDirection(direction) {
-        this.directionChange.emit(direction);
-    }
-    getPosition(rect, el) {
+    getPosition({ width, height }) {
         const direction = this.direction();
-        const width = el?.clientWidth ?? rect.width;
-        const height = el?.clientHeight ?? rect.height;
-        const hostRect = this.accessor.getClientRect() ?? EMPTY_CLIENT_RECT;
+        const hostRect = this.accessor.getClientRect();
         const leftCenter = hostRect.left + hostRect.width / 2;
         const topCenter = hostRect.top + hostRect.height / 2;
         const rtl = this.el.matches('[dir="rtl"] :scope');
-        this.points['top-left'][TOP] = hostRect.top - height - this.offset;
-        this.points['top-left'][LEFT] = leftCenter - width + ARROW_OFFSET;
-        this.points.top[TOP] = this.points['top-left'][TOP];
+        this.points['top-start'][TOP] = hostRect.top - height - this.offset();
+        this.points['top-start'][LEFT] = leftCenter - width + ARROW_OFFSET;
+        this.points.top[TOP] = this.points['top-start'][TOP];
         this.points.top[LEFT] = leftCenter - width / 2;
-        this.points['top-right'][TOP] = this.points['top-left'][TOP];
-        this.points['top-right'][LEFT] = leftCenter - ARROW_OFFSET;
-        this.points['bottom-left'][TOP] = hostRect.bottom + this.offset;
-        this.points['bottom-left'][LEFT] = this.points['top-left'][LEFT];
-        this.points.bottom[TOP] = this.points['bottom-left'][TOP];
+        this.points['top-end'][TOP] = this.points['top-start'][TOP];
+        this.points['top-end'][LEFT] = leftCenter - ARROW_OFFSET;
+        this.points['bottom-start'][TOP] = hostRect.bottom + this.offset();
+        this.points['bottom-start'][LEFT] = this.points['top-start'][LEFT];
+        this.points.bottom[TOP] = this.points['bottom-start'][TOP];
         this.points.bottom[LEFT] = this.points.top[LEFT];
-        this.points['bottom-right'][TOP] = this.points['bottom-left'][TOP];
-        this.points['bottom-right'][LEFT] = this.points['top-right'][LEFT];
-        this.points['left-top'][TOP] = topCenter - height + ARROW_OFFSET;
-        this.points['left-top'][LEFT] = hostRect.left - width - this.offset;
-        this.points.left[TOP] = topCenter - height / 2;
-        this.points.left[LEFT] = this.points['left-top'][LEFT];
-        this.points['left-bottom'][TOP] = topCenter - ARROW_OFFSET;
-        this.points['left-bottom'][LEFT] = this.points['left-top'][LEFT];
-        this.points['right-top'][TOP] = this.points['left-top'][TOP];
-        this.points['right-top'][LEFT] = hostRect.right + this.offset;
-        this.points.right[TOP] = this.points.left[TOP];
-        this.points.right[LEFT] = this.points['right-top'][LEFT];
-        this.points['right-bottom'][TOP] = this.points['left-bottom'][TOP];
-        this.points['right-bottom'][LEFT] = this.points['right-top'][LEFT];
+        this.points['bottom-end'][TOP] = this.points['bottom-start'][TOP];
+        this.points['bottom-end'][LEFT] = this.points['top-end'][LEFT];
+        this.points['start-top'][TOP] = topCenter - height + ARROW_OFFSET;
+        this.points['start-top'][LEFT] = hostRect.left - width - this.offset();
+        this.points.start[TOP] = topCenter - height / 2;
+        this.points.start[LEFT] = this.points['start-top'][LEFT];
+        this.points['start-bottom'][TOP] = topCenter - ARROW_OFFSET;
+        this.points['start-bottom'][LEFT] = this.points['start-top'][LEFT];
+        this.points['end-top'][TOP] = this.points['start-top'][TOP];
+        this.points['end-top'][LEFT] = hostRect.right + this.offset();
+        this.points.end[TOP] = this.points.start[TOP];
+        this.points.end[LEFT] = this.points['end-top'][LEFT];
+        this.points['end-bottom'][TOP] = this.points['start-bottom'][TOP];
+        this.points['end-bottom'][LEFT] = this.points['end-top'][LEFT];
         const array = Array.isArray(direction) ? direction : [direction];
         const priority = array.map((direction) => adjust(direction, rtl));
         const updated = priority
             .concat(TUI_HINT_DIRECTIONS)
             .find((dir) => this.checkPosition(this.points[dir], width, height)) ||
             this.fallback;
-        this.emitDirection(adjust(updated, rtl));
+        this.directionChange.next(adjust(updated, rtl));
         return this.points[updated];
     }
     get fallback() {
@@ -243,22 +193,19 @@ class TuiHintPosition extends TuiPositionAccessor {
             ? 'top'
             : 'bottom';
     }
-    checkPosition([top, left], width, height) {
+    checkPosition([left, top], width, height) {
         const viewport = this.viewport.getClientRect();
         return (top > viewport.top + GAP$1 &&
             left > viewport.left + GAP$1 &&
             top + height < viewport.bottom - GAP$1 &&
             left + width < viewport.right - GAP$1);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiHintPosition, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.15", type: TuiHintPosition, isStandalone: true, inputs: { direction: { classPropertyName: "direction", publicName: "tuiHintDirection", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { directionChange: "tuiHintDirectionChange" }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiHintPosition, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.17", type: TuiHintPosition, isStandalone: true, inputs: { direction: { classPropertyName: "direction", publicName: "tuiHintDirection", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "tuiHintOffset", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tuiHintDirectionChange: "tuiHintDirectionChange" }, usesInheritance: true, ngImport: i0 }); }
 }
-__decorate([
-    tuiPure
-], TuiHintPosition.prototype, "emitDirection", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiHintPosition, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiHintPosition, decorators: [{
             type: Directive
-        }], propDecorators: { emitDirection: [] } });
+        }] });
 function adjust(direction, rtl) {
     if (rtl && direction.includes('left')) {
         return direction.replace('left', 'right');
@@ -304,23 +251,21 @@ class TuiHintDirective {
             this.visible.emit(false);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiHintDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.15", type: TuiHintDirective, isStandalone: true, selector: "[tuiHint]:not(ng-container):not(ng-template)", inputs: { content: { classPropertyName: "content", publicName: "tuiHint", isSignal: true, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "tuiHintContext", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "tuiHintAppearance", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "tuiHintVisible" }, providers: [
-            tuiAsRectAccessor(TuiHintDirective),
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiHintDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.17", type: TuiHintDirective, isStandalone: true, selector: "[tuiHint]:not(ng-container):not(ng-template)", inputs: { content: { classPropertyName: "content", publicName: "tuiHint", isSignal: true, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "tuiHintContext", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "tuiHintAppearance", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "tuiHintVisible" }, providers: [
             tuiAsVehicle(TuiHintDirective),
             {
                 provide: PolymorpheusComponent,
                 deps: [TUI_HINT_COMPONENT, INJECTOR],
                 useClass: PolymorpheusComponent,
             },
-        ], usesOnChanges: true, hostDirectives: [{ directive: TuiHintDriver }, { directive: TuiHintHover, inputs: ["tuiHintHideDelay", "tuiHintHideDelay", "tuiHintShowDelay", "tuiHintShowDelay"] }, { directive: TuiHintPosition, inputs: ["tuiHintDirection", "tuiHintDirection"], outputs: ["tuiHintDirectionChange", "tuiHintDirectionChange"] }], ngImport: i0 }); }
+        ], usesOnChanges: true, hostDirectives: [{ directive: TuiHintDriver }, { directive: TuiHintHover, inputs: ["tuiHintHideDelay", "tuiHintHideDelay", "tuiHintShowDelay", "tuiHintShowDelay"] }, { directive: TuiHintPosition, inputs: ["tuiHintDirection", "tuiHintDirection", "tuiHintOffset", "tuiHintOffset"], outputs: ["tuiHintDirectionChange", "tuiHintDirectionChange"] }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiHintDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiHintDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tuiHint]:not(ng-container):not(ng-template)',
                     providers: [
-                        tuiAsRectAccessor(TuiHintDirective),
                         tuiAsVehicle(TuiHintDirective),
                         {
                             provide: PolymorpheusComponent,
@@ -336,7 +281,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         },
                         {
                             directive: TuiHintPosition,
-                            inputs: ['tuiHintDirection'],
+                            inputs: ['tuiHintDirection', 'tuiHintOffset'],
                             outputs: ['tuiHintDirectionChange'],
                         },
                     ],
@@ -354,10 +299,10 @@ class TuiHintPointer extends TuiHintHover {
     onMove({ clientX, clientY }) {
         this.currentRect = tuiPointToClientRect(clientX, clientY);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiHintPointer, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: TuiHintPointer, isStandalone: true, selector: "[tuiHint][tuiHintPointer]", host: { listeners: { "mousemove.zoneless": "onMove($event)" } }, providers: [tuiAsRectAccessor(TuiHintPointer), tuiAsDriver(TuiHintPointer)], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiHintPointer, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: TuiHintPointer, isStandalone: true, selector: "[tuiHint][tuiHintPointer]", host: { listeners: { "mousemove.zoneless": "onMove($event)" } }, providers: [tuiAsRectAccessor(TuiHintPointer), tuiAsDriver(TuiHintPointer)], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiHintPointer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiHintPointer, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tuiHint][tuiHintPointer]',
@@ -372,10 +317,10 @@ class TuiHintUnstyledComponent {
     constructor() {
         this.hint = inject(TuiHintDirective);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiHintUnstyledComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TuiHintUnstyledComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: '<ng-container *polymorpheusOutlet="hint.content()" />', isInline: true, dependencies: [{ kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiHintUnstyledComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: TuiHintUnstyledComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: '<ng-container *polymorpheusOutlet="hint.content()" />', isInline: true, dependencies: [{ kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiHintUnstyledComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiHintUnstyledComponent, decorators: [{
             type: Component,
             args: [{
                     imports: [PolymorpheusOutlet],
@@ -389,10 +334,10 @@ class TuiHintUnstyled {
         tuiSetSignal(hint.content, inject((TemplateRef)));
         hint.component = new PolymorpheusComponent(TuiHintUnstyledComponent, inject(INJECTOR));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiHintUnstyled, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: TuiHintUnstyled, isStandalone: true, selector: "ng-template[tuiHint]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiHintUnstyled, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: TuiHintUnstyled, isStandalone: true, selector: "ng-template[tuiHint]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiHintUnstyled, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiHintUnstyled, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ng-template[tuiHint]',
@@ -403,7 +348,7 @@ const TUI_HINT_PROVIDERS = [
     TuiPositionService,
     TuiHoveredService,
     tuiPositionAccessorFor('hint', TuiHintPosition),
-    tuiRectAccessorFor('hint', TuiHintDirective),
+    tuiRectAccessorFor('hint', forwardRef(() => TuiHintDirective)),
 ];
 const GAP = 8;
 class TuiHintComponent {
@@ -426,7 +371,7 @@ class TuiHintComponent {
         inject(TuiPositionService)
             .pipe(takeWhile(() => this.hint.el.isConnected), map((point) => this.vvs.correct(point)), takeUntilDestroyed())
             .subscribe({
-            next: ([top, left]) => this.update(top, left),
+            next: (point) => this.update(...point),
             complete: () => this.hover.close(),
         });
         inject(TuiHoveredService)
@@ -440,13 +385,13 @@ class TuiHintComponent {
         }
     }
     apply(top, left, beakTop, beakLeft) {
-        this.el.style.top = top;
-        this.el.style.left = left;
+        this.el.style.setProperty('top', top);
+        this.el.style.setProperty('left', left);
         this.el.style.setProperty('--t-top', `${beakTop}%`);
         this.el.style.setProperty('--t-left', `${beakLeft}%`);
         this.el.style.setProperty('--t-rotate', !beakLeft || Math.ceil(beakLeft) === 100 ? '90deg' : '0deg');
     }
-    update(top, left) {
+    update(left, top) {
         const { clientHeight, clientWidth } = this.el;
         const rect = this.accessor.getClientRect();
         if (rect === EMPTY_CLIENT_RECT || !clientHeight || !clientWidth) {
@@ -460,19 +405,16 @@ class TuiHintComponent {
         ]);
         this.apply(tuiPx(Math.round(top)), tuiPx(Math.round(safeLeft)), Math.round((tuiClamp(beakTop, 0, clientHeight) / clientHeight) * 100), Math.round((tuiClamp(beakLeft, 0, clientWidth) / clientWidth) * 100));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiHintComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TuiHintComponent, isStandalone: true, selector: "tui-hint", host: { attributes: { "role": "tooltip" }, listeners: { "document:click": "onClick($event.target)" }, properties: { "class._untouchable": "pointer", "class._mobile": "isMobile", "attr.tuiTheme": "theme" } }, providers: [TUI_HINT_PROVIDERS, tuiButtonOptionsProvider({ size: 's' })], hostDirectives: [{ directive: i1.TuiAppearance }, { directive: i2.TuiAnimated }, { directive: i3.TuiActiveZone }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiHintComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: TuiHintComponent, isStandalone: true, selector: "tui-hint", host: { attributes: { "role": "tooltip" }, listeners: { "document:click": "onClick($event.target)" }, properties: { "class._untouchable": "pointer", "class._mobile": "isMobile", "attr.tuiTheme": "theme" } }, providers: [TUI_HINT_PROVIDERS, tuiButtonOptionsProvider({ size: 's' })], hostDirectives: [{ directive: i1.TuiAppearance }, { directive: i2.TuiAnimated }, { directive: i3.TuiActiveZone }], ngImport: i0, template: `
         <ng-content />
         <span
             *polymorpheusOutlet="content() as text; context: hint.context()"
             [innerHTML]="text"
         ></span>
-    `, isInline: true, styles: [":host{position:absolute;max-inline-size:min(20rem,calc(100% - 1rem));padding:.75rem 1rem;background:var(--tui-background-accent-1);border-radius:var(--tui-radius-l);color:var(--tui-text-primary-on-accent-1);box-sizing:border-box;font:var(--tui-font-text-s);white-space:pre-line;overflow-wrap:break-word;transform-origin:var(--t-left) var(--t-top);--tui-background-elevation-2: var(--tui-background-elevation-3)}:host.tui-enter,:host.tui-leave{animation-name:tuiFade}:host :host-context(tui-root._mobile).tui-enter{animation:tuiFade var(--tui-duration) ease-in-out,tuiScale var(--tui-duration) cubic-bezier(.34,1.56,.64,1)}:host :host-context(tui-root._mobile).tui-leave{animation:tuiFade var(--tui-duration) ease-in-out reverse,tuiScale var(--tui-duration) ease-in-out reverse}:host:before{content:\"\";position:absolute;top:var(--t-top);left:var(--t-left);inline-size:.75rem;block-size:.5rem;background:inherit;-webkit-mask-image:url('data:image/svg+xml,<svg viewBox=\"0 0 12 8\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.61336 1.69607L2.44882 2.96493C1.84795 3.61964 0.949361 3.99951 0.00053941 4C0.000359608 4 0.000179805 4 0 4C0.000179863 4 0.000359764 4 0.000539623 4C0.949362 4.00049 1.84795 4.38036 2.44882 5.03506L3.61336 6.30394C4.55981 7.33517 5.03303 7.85079 5.63254 7.96535C5.87433 8.01155 6.12436 8.01155 6.36616 7.96535C6.96567 7.85079 7.43889 7.33517 8.38534 6.30393L9.54988 5.03507C10.1511 4.37994 11.0505 4 12 4C11.0505 4 10.1511 3.62006 9.54988 2.96493L8.38534 1.69606C7.43889 0.664826 6.96567 0.149207 6.36616 0.0346517C6.12436 -0.0115506 5.87433 -0.0115506 5.63254 0.0346517C5.03303 0.149207 4.55981 0.664827 3.61336 1.69607Z\" /></svg>');mask-image:url('data:image/svg+xml,<svg viewBox=\"0 0 12 8\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.61336 1.69607L2.44882 2.96493C1.84795 3.61964 0.949361 3.99951 0.00053941 4C0.000359608 4 0.000179805 4 0 4C0.000179863 4 0.000359764 4 0.000539623 4C0.949362 4.00049 1.84795 4.38036 2.44882 5.03506L3.61336 6.30394C4.55981 7.33517 5.03303 7.85079 5.63254 7.96535C5.87433 8.01155 6.12436 8.01155 6.36616 7.96535C6.96567 7.85079 7.43889 7.33517 8.38534 6.30393L9.54988 5.03507C10.1511 4.37994 11.0505 4 12 4C11.0505 4 10.1511 3.62006 9.54988 2.96493L8.38534 1.69606C7.43889 0.664826 6.96567 0.149207 6.36616 0.0346517C6.12436 -0.0115506 5.87433 -0.0115506 5.63254 0.0346517C5.03303 0.149207 4.55981 0.664827 3.61336 1.69607Z\" /></svg>');transition:none;transform:translate(-50%,-50%) rotate(var(--t-rotate))}:host._mobile{font:var(--tui-font-text-m)}:host._mobile:before{inline-size:1.5rem;block-size:1.125rem;-webkit-mask-image:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 18\"><path d=\"M7.22854 3.81615L4.89971 6.6711C3.69732 8.14514 1.8988 9 0 9C1.8988 9 3.69732 9.85486 4.89971 11.3289L7.22854 14.1839L7.22854 14.1839C9.12123 16.5041 10.0676 17.6643 11.2665 17.922C11.75 18.026 12.25 18.026 12.7335 17.922C13.9324 17.6643 14.8788 16.5041 16.7715 14.1839L19.1003 11.3289C20.3027 9.85486 22.1012 9 24 9C22.1012 9 20.3027 8.14514 19.1003 6.6711L16.7715 3.81614C14.8788 1.49586 13.9324 0.335716 12.7335 0.0779663C12.25 -0.0259888 11.75 -0.0259888 11.2665 0.0779663C10.0676 0.335716 9.12123 1.49586 7.22854 3.81614L7.22854 3.81615Z\" /></svg>');mask-image:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 18\"><path d=\"M7.22854 3.81615L4.89971 6.6711C3.69732 8.14514 1.8988 9 0 9C1.8988 9 3.69732 9.85486 4.89971 11.3289L7.22854 14.1839L7.22854 14.1839C9.12123 16.5041 10.0676 17.6643 11.2665 17.922C11.75 18.026 12.25 18.026 12.7335 17.922C13.9324 17.6643 14.8788 16.5041 16.7715 14.1839L19.1003 11.3289C20.3027 9.85486 22.1012 9 24 9C22.1012 9 20.3027 8.14514 19.1003 6.6711L16.7715 3.81614C14.8788 1.49586 13.9324 0.335716 12.7335 0.0779663C12.25 -0.0259888 11.75 -0.0259888 11.2665 0.0779663C10.0676 0.335716 9.12123 1.49586 7.22854 3.81614L7.22854 3.81615Z\" /></svg>')}:host:not([style*=top]){visibility:hidden}:host._untouchable{pointer-events:none}:host ::ng-deep [tuiTitle]{margin-block-end:.75rem}:host ::ng-deep [tuiTitle]+footer{margin-block-start:.75rem}:host ::ng-deep [tuiIconButton][data-appearance=icon][data-size=xs]{float:inline-end;margin-inline-end:-.25rem}:host ::ng-deep img{display:block;border-radius:var(--tui-radius-m)}:host ::ng-deep footer{display:flex;justify-content:flex-end;gap:.5rem;inline-size:18rem;max-inline-size:100%;margin:1rem 0 .25rem}\n"], dependencies: [{ kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    `, isInline: true, styles: [":host{position:absolute;max-inline-size:min(20rem,calc(100% - 1rem));padding:.75rem 1rem;background:var(--tui-background-accent-1);border-radius:var(--tui-radius-l);color:var(--tui-text-primary-on-accent-1);box-sizing:border-box;font:var(--tui-font-body-s);white-space:pre-line;overflow-wrap:break-word;transform-origin:var(--t-left) var(--t-top);--tui-background-elevation-2: var(--tui-background-elevation-3)}:host.tui-enter,:host.tui-leave{animation-name:tuiFade}:host :host-context(tui-root._mobile).tui-enter{animation:tuiFade var(--tui-duration) ease-in-out,tuiScale var(--tui-duration) cubic-bezier(.34,1.56,.64,1)}:host :host-context(tui-root._mobile).tui-leave{animation:tuiFade var(--tui-duration) ease-in-out reverse,tuiScale var(--tui-duration) ease-in-out reverse}:host:before{content:\"\";position:absolute;top:var(--t-top);left:var(--t-left);inline-size:.75rem;block-size:.5rem;background:inherit;-webkit-mask-image:url('data:image/svg+xml,<svg viewBox=\"0 0 12 8\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.61336 1.69607L2.44882 2.96493C1.84795 3.61964 0.949361 3.99951 0.00053941 4C0.000359608 4 0.000179805 4 0 4C0.000179863 4 0.000359764 4 0.000539623 4C0.949362 4.00049 1.84795 4.38036 2.44882 5.03506L3.61336 6.30394C4.55981 7.33517 5.03303 7.85079 5.63254 7.96535C5.87433 8.01155 6.12436 8.01155 6.36616 7.96535C6.96567 7.85079 7.43889 7.33517 8.38534 6.30393L9.54988 5.03507C10.1511 4.37994 11.0505 4 12 4C11.0505 4 10.1511 3.62006 9.54988 2.96493L8.38534 1.69606C7.43889 0.664826 6.96567 0.149207 6.36616 0.0346517C6.12436 -0.0115506 5.87433 -0.0115506 5.63254 0.0346517C5.03303 0.149207 4.55981 0.664827 3.61336 1.69607Z\" /></svg>');mask-image:url('data:image/svg+xml,<svg viewBox=\"0 0 12 8\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.61336 1.69607L2.44882 2.96493C1.84795 3.61964 0.949361 3.99951 0.00053941 4C0.000359608 4 0.000179805 4 0 4C0.000179863 4 0.000359764 4 0.000539623 4C0.949362 4.00049 1.84795 4.38036 2.44882 5.03506L3.61336 6.30394C4.55981 7.33517 5.03303 7.85079 5.63254 7.96535C5.87433 8.01155 6.12436 8.01155 6.36616 7.96535C6.96567 7.85079 7.43889 7.33517 8.38534 6.30393L9.54988 5.03507C10.1511 4.37994 11.0505 4 12 4C11.0505 4 10.1511 3.62006 9.54988 2.96493L8.38534 1.69606C7.43889 0.664826 6.96567 0.149207 6.36616 0.0346517C6.12436 -0.0115506 5.87433 -0.0115506 5.63254 0.0346517C5.03303 0.149207 4.55981 0.664827 3.61336 1.69607Z\" /></svg>');transition:none;transform:translate(-50%,-50%) rotate(var(--t-rotate))}:host._mobile{font:var(--tui-font-body-m)}:host._mobile:before{inline-size:1.5rem;block-size:1.125rem;-webkit-mask-image:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 18\"><path d=\"M7.22854 3.81615L4.89971 6.6711C3.69732 8.14514 1.8988 9 0 9C1.8988 9 3.69732 9.85486 4.89971 11.3289L7.22854 14.1839L7.22854 14.1839C9.12123 16.5041 10.0676 17.6643 11.2665 17.922C11.75 18.026 12.25 18.026 12.7335 17.922C13.9324 17.6643 14.8788 16.5041 16.7715 14.1839L19.1003 11.3289C20.3027 9.85486 22.1012 9 24 9C22.1012 9 20.3027 8.14514 19.1003 6.6711L16.7715 3.81614C14.8788 1.49586 13.9324 0.335716 12.7335 0.0779663C12.25 -0.0259888 11.75 -0.0259888 11.2665 0.0779663C10.0676 0.335716 9.12123 1.49586 7.22854 3.81614L7.22854 3.81615Z\" /></svg>');mask-image:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 18\"><path d=\"M7.22854 3.81615L4.89971 6.6711C3.69732 8.14514 1.8988 9 0 9C1.8988 9 3.69732 9.85486 4.89971 11.3289L7.22854 14.1839L7.22854 14.1839C9.12123 16.5041 10.0676 17.6643 11.2665 17.922C11.75 18.026 12.25 18.026 12.7335 17.922C13.9324 17.6643 14.8788 16.5041 16.7715 14.1839L19.1003 11.3289C20.3027 9.85486 22.1012 9 24 9C22.1012 9 20.3027 8.14514 19.1003 6.6711L16.7715 3.81614C14.8788 1.49586 13.9324 0.335716 12.7335 0.0779663C12.25 -0.0259888 11.75 -0.0259888 11.2665 0.0779663C10.0676 0.335716 9.12123 1.49586 7.22854 3.81614L7.22854 3.81615Z\" /></svg>')}:host:not([style*=top]){visibility:hidden}:host._untouchable{pointer-events:none}:host ::ng-deep [tuiTitle]{margin-block-end:.75rem}:host ::ng-deep [tuiTitle]+footer{margin-block-start:.75rem}:host ::ng-deep [tuiIconButton][data-appearance=icon][data-size=xs]{float:inline-end;margin-inline-end:-.25rem}:host ::ng-deep img{display:block;border-radius:var(--tui-radius-m)}:host ::ng-deep footer{display:flex;justify-content:flex-end;gap:.5rem;inline-size:18rem;max-inline-size:100%;margin:1rem 0 .25rem}\n"], dependencies: [{ kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-__decorate([
-    tuiPure
-], TuiHintComponent.prototype, "apply", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiHintComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiHintComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tui-hint', imports: [PolymorpheusOutlet], template: `
         <ng-content />
@@ -486,8 +428,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         '[class._mobile]': 'isMobile',
                         '[attr.tuiTheme]': 'theme',
                         '(document:click)': 'onClick($event.target)',
-                    }, styles: [":host{position:absolute;max-inline-size:min(20rem,calc(100% - 1rem));padding:.75rem 1rem;background:var(--tui-background-accent-1);border-radius:var(--tui-radius-l);color:var(--tui-text-primary-on-accent-1);box-sizing:border-box;font:var(--tui-font-text-s);white-space:pre-line;overflow-wrap:break-word;transform-origin:var(--t-left) var(--t-top);--tui-background-elevation-2: var(--tui-background-elevation-3)}:host.tui-enter,:host.tui-leave{animation-name:tuiFade}:host :host-context(tui-root._mobile).tui-enter{animation:tuiFade var(--tui-duration) ease-in-out,tuiScale var(--tui-duration) cubic-bezier(.34,1.56,.64,1)}:host :host-context(tui-root._mobile).tui-leave{animation:tuiFade var(--tui-duration) ease-in-out reverse,tuiScale var(--tui-duration) ease-in-out reverse}:host:before{content:\"\";position:absolute;top:var(--t-top);left:var(--t-left);inline-size:.75rem;block-size:.5rem;background:inherit;-webkit-mask-image:url('data:image/svg+xml,<svg viewBox=\"0 0 12 8\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.61336 1.69607L2.44882 2.96493C1.84795 3.61964 0.949361 3.99951 0.00053941 4C0.000359608 4 0.000179805 4 0 4C0.000179863 4 0.000359764 4 0.000539623 4C0.949362 4.00049 1.84795 4.38036 2.44882 5.03506L3.61336 6.30394C4.55981 7.33517 5.03303 7.85079 5.63254 7.96535C5.87433 8.01155 6.12436 8.01155 6.36616 7.96535C6.96567 7.85079 7.43889 7.33517 8.38534 6.30393L9.54988 5.03507C10.1511 4.37994 11.0505 4 12 4C11.0505 4 10.1511 3.62006 9.54988 2.96493L8.38534 1.69606C7.43889 0.664826 6.96567 0.149207 6.36616 0.0346517C6.12436 -0.0115506 5.87433 -0.0115506 5.63254 0.0346517C5.03303 0.149207 4.55981 0.664827 3.61336 1.69607Z\" /></svg>');mask-image:url('data:image/svg+xml,<svg viewBox=\"0 0 12 8\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.61336 1.69607L2.44882 2.96493C1.84795 3.61964 0.949361 3.99951 0.00053941 4C0.000359608 4 0.000179805 4 0 4C0.000179863 4 0.000359764 4 0.000539623 4C0.949362 4.00049 1.84795 4.38036 2.44882 5.03506L3.61336 6.30394C4.55981 7.33517 5.03303 7.85079 5.63254 7.96535C5.87433 8.01155 6.12436 8.01155 6.36616 7.96535C6.96567 7.85079 7.43889 7.33517 8.38534 6.30393L9.54988 5.03507C10.1511 4.37994 11.0505 4 12 4C11.0505 4 10.1511 3.62006 9.54988 2.96493L8.38534 1.69606C7.43889 0.664826 6.96567 0.149207 6.36616 0.0346517C6.12436 -0.0115506 5.87433 -0.0115506 5.63254 0.0346517C5.03303 0.149207 4.55981 0.664827 3.61336 1.69607Z\" /></svg>');transition:none;transform:translate(-50%,-50%) rotate(var(--t-rotate))}:host._mobile{font:var(--tui-font-text-m)}:host._mobile:before{inline-size:1.5rem;block-size:1.125rem;-webkit-mask-image:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 18\"><path d=\"M7.22854 3.81615L4.89971 6.6711C3.69732 8.14514 1.8988 9 0 9C1.8988 9 3.69732 9.85486 4.89971 11.3289L7.22854 14.1839L7.22854 14.1839C9.12123 16.5041 10.0676 17.6643 11.2665 17.922C11.75 18.026 12.25 18.026 12.7335 17.922C13.9324 17.6643 14.8788 16.5041 16.7715 14.1839L19.1003 11.3289C20.3027 9.85486 22.1012 9 24 9C22.1012 9 20.3027 8.14514 19.1003 6.6711L16.7715 3.81614C14.8788 1.49586 13.9324 0.335716 12.7335 0.0779663C12.25 -0.0259888 11.75 -0.0259888 11.2665 0.0779663C10.0676 0.335716 9.12123 1.49586 7.22854 3.81614L7.22854 3.81615Z\" /></svg>');mask-image:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 18\"><path d=\"M7.22854 3.81615L4.89971 6.6711C3.69732 8.14514 1.8988 9 0 9C1.8988 9 3.69732 9.85486 4.89971 11.3289L7.22854 14.1839L7.22854 14.1839C9.12123 16.5041 10.0676 17.6643 11.2665 17.922C11.75 18.026 12.25 18.026 12.7335 17.922C13.9324 17.6643 14.8788 16.5041 16.7715 14.1839L19.1003 11.3289C20.3027 9.85486 22.1012 9 24 9C22.1012 9 20.3027 8.14514 19.1003 6.6711L16.7715 3.81614C14.8788 1.49586 13.9324 0.335716 12.7335 0.0779663C12.25 -0.0259888 11.75 -0.0259888 11.2665 0.0779663C10.0676 0.335716 9.12123 1.49586 7.22854 3.81614L7.22854 3.81615Z\" /></svg>')}:host:not([style*=top]){visibility:hidden}:host._untouchable{pointer-events:none}:host ::ng-deep [tuiTitle]{margin-block-end:.75rem}:host ::ng-deep [tuiTitle]+footer{margin-block-start:.75rem}:host ::ng-deep [tuiIconButton][data-appearance=icon][data-size=xs]{float:inline-end;margin-inline-end:-.25rem}:host ::ng-deep img{display:block;border-radius:var(--tui-radius-m)}:host ::ng-deep footer{display:flex;justify-content:flex-end;gap:.5rem;inline-size:18rem;max-inline-size:100%;margin:1rem 0 .25rem}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { apply: [] } });
+                    }, styles: [":host{position:absolute;max-inline-size:min(20rem,calc(100% - 1rem));padding:.75rem 1rem;background:var(--tui-background-accent-1);border-radius:var(--tui-radius-l);color:var(--tui-text-primary-on-accent-1);box-sizing:border-box;font:var(--tui-font-body-s);white-space:pre-line;overflow-wrap:break-word;transform-origin:var(--t-left) var(--t-top);--tui-background-elevation-2: var(--tui-background-elevation-3)}:host.tui-enter,:host.tui-leave{animation-name:tuiFade}:host :host-context(tui-root._mobile).tui-enter{animation:tuiFade var(--tui-duration) ease-in-out,tuiScale var(--tui-duration) cubic-bezier(.34,1.56,.64,1)}:host :host-context(tui-root._mobile).tui-leave{animation:tuiFade var(--tui-duration) ease-in-out reverse,tuiScale var(--tui-duration) ease-in-out reverse}:host:before{content:\"\";position:absolute;top:var(--t-top);left:var(--t-left);inline-size:.75rem;block-size:.5rem;background:inherit;-webkit-mask-image:url('data:image/svg+xml,<svg viewBox=\"0 0 12 8\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.61336 1.69607L2.44882 2.96493C1.84795 3.61964 0.949361 3.99951 0.00053941 4C0.000359608 4 0.000179805 4 0 4C0.000179863 4 0.000359764 4 0.000539623 4C0.949362 4.00049 1.84795 4.38036 2.44882 5.03506L3.61336 6.30394C4.55981 7.33517 5.03303 7.85079 5.63254 7.96535C5.87433 8.01155 6.12436 8.01155 6.36616 7.96535C6.96567 7.85079 7.43889 7.33517 8.38534 6.30393L9.54988 5.03507C10.1511 4.37994 11.0505 4 12 4C11.0505 4 10.1511 3.62006 9.54988 2.96493L8.38534 1.69606C7.43889 0.664826 6.96567 0.149207 6.36616 0.0346517C6.12436 -0.0115506 5.87433 -0.0115506 5.63254 0.0346517C5.03303 0.149207 4.55981 0.664827 3.61336 1.69607Z\" /></svg>');mask-image:url('data:image/svg+xml,<svg viewBox=\"0 0 12 8\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.61336 1.69607L2.44882 2.96493C1.84795 3.61964 0.949361 3.99951 0.00053941 4C0.000359608 4 0.000179805 4 0 4C0.000179863 4 0.000359764 4 0.000539623 4C0.949362 4.00049 1.84795 4.38036 2.44882 5.03506L3.61336 6.30394C4.55981 7.33517 5.03303 7.85079 5.63254 7.96535C5.87433 8.01155 6.12436 8.01155 6.36616 7.96535C6.96567 7.85079 7.43889 7.33517 8.38534 6.30393L9.54988 5.03507C10.1511 4.37994 11.0505 4 12 4C11.0505 4 10.1511 3.62006 9.54988 2.96493L8.38534 1.69606C7.43889 0.664826 6.96567 0.149207 6.36616 0.0346517C6.12436 -0.0115506 5.87433 -0.0115506 5.63254 0.0346517C5.03303 0.149207 4.55981 0.664827 3.61336 1.69607Z\" /></svg>');transition:none;transform:translate(-50%,-50%) rotate(var(--t-rotate))}:host._mobile{font:var(--tui-font-body-m)}:host._mobile:before{inline-size:1.5rem;block-size:1.125rem;-webkit-mask-image:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 18\"><path d=\"M7.22854 3.81615L4.89971 6.6711C3.69732 8.14514 1.8988 9 0 9C1.8988 9 3.69732 9.85486 4.89971 11.3289L7.22854 14.1839L7.22854 14.1839C9.12123 16.5041 10.0676 17.6643 11.2665 17.922C11.75 18.026 12.25 18.026 12.7335 17.922C13.9324 17.6643 14.8788 16.5041 16.7715 14.1839L19.1003 11.3289C20.3027 9.85486 22.1012 9 24 9C22.1012 9 20.3027 8.14514 19.1003 6.6711L16.7715 3.81614C14.8788 1.49586 13.9324 0.335716 12.7335 0.0779663C12.25 -0.0259888 11.75 -0.0259888 11.2665 0.0779663C10.0676 0.335716 9.12123 1.49586 7.22854 3.81614L7.22854 3.81615Z\" /></svg>');mask-image:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 18\"><path d=\"M7.22854 3.81615L4.89971 6.6711C3.69732 8.14514 1.8988 9 0 9C1.8988 9 3.69732 9.85486 4.89971 11.3289L7.22854 14.1839L7.22854 14.1839C9.12123 16.5041 10.0676 17.6643 11.2665 17.922C11.75 18.026 12.25 18.026 12.7335 17.922C13.9324 17.6643 14.8788 16.5041 16.7715 14.1839L19.1003 11.3289C20.3027 9.85486 22.1012 9 24 9C22.1012 9 20.3027 8.14514 19.1003 6.6711L16.7715 3.81614C14.8788 1.49586 13.9324 0.335716 12.7335 0.0779663C12.25 -0.0259888 11.75 -0.0259888 11.2665 0.0779663C10.0676 0.335716 9.12123 1.49586 7.22854 3.81614L7.22854 3.81615Z\" /></svg>')}:host:not([style*=top]){visibility:hidden}:host._untouchable{pointer-events:none}:host ::ng-deep [tuiTitle]{margin-block-end:.75rem}:host ::ng-deep [tuiTitle]+footer{margin-block-start:.75rem}:host ::ng-deep [tuiIconButton][data-appearance=icon][data-size=xs]{float:inline-end;margin-inline-end:-.25rem}:host ::ng-deep img{display:block;border-radius:var(--tui-radius-m)}:host ::ng-deep footer{display:flex;justify-content:flex-end;gap:.5rem;inline-size:18rem;max-inline-size:100%;margin:1rem 0 .25rem}\n"] }]
+        }], ctorParameters: () => [] });
 
 class TuiHintDescribe extends TuiDriver {
     constructor() {
@@ -504,10 +446,10 @@ class TuiHintDescribe extends TuiDriver {
     get focused() {
         return tuiIsFocused(this.element());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiHintDescribe, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.15", type: TuiHintDescribe, isStandalone: true, selector: "[tuiHintDescribe]", inputs: { id: { classPropertyName: "id", publicName: "tuiHintDescribe", isSignal: true, isRequired: false, transformFunction: null } }, providers: [tuiAsDriver(TuiHintDescribe)], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiHintDescribe, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.17", type: TuiHintDescribe, isStandalone: true, selector: "[tuiHintDescribe]", inputs: { id: { classPropertyName: "id", publicName: "tuiHintDescribe", isSignal: true, isRequired: false, transformFunction: null } }, providers: [tuiAsDriver(TuiHintDescribe)], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiHintDescribe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiHintDescribe, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tuiHintDescribe]',
@@ -524,10 +466,10 @@ class TuiHintHost extends TuiRectAccessor {
     getClientRect() {
         return this.tuiHintHost()?.getBoundingClientRect() || EMPTY_CLIENT_RECT;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiHintHost, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.15", type: TuiHintHost, isStandalone: true, selector: "[tuiHint][tuiHintHost]", inputs: { tuiHintHost: { classPropertyName: "tuiHintHost", publicName: "tuiHintHost", isSignal: true, isRequired: false, transformFunction: null } }, providers: [tuiAsRectAccessor(TuiHintHost)], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiHintHost, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.17", type: TuiHintHost, isStandalone: true, selector: "[tuiHint][tuiHintHost]", inputs: { tuiHintHost: { classPropertyName: "tuiHintHost", publicName: "tuiHintHost", isSignal: true, isRequired: false, transformFunction: null } }, providers: [tuiAsRectAccessor(TuiHintHost)], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiHintHost, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiHintHost, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tuiHint][tuiHintHost]',
@@ -548,10 +490,10 @@ class TuiHintManual extends TuiDriver {
         this.stream$.next(!!this.visible());
         this.hover.enabled = this.visible() === null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiHintManual, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.15", type: TuiHintManual, isStandalone: true, selector: "[tuiHint][tuiHintManual]", inputs: { visible: { classPropertyName: "visible", publicName: "tuiHintManual", isSignal: true, isRequired: false, transformFunction: null } }, providers: [tuiAsDriver(TuiHintManual)], usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiHintManual, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.17", type: TuiHintManual, isStandalone: true, selector: "[tuiHint][tuiHintManual]", inputs: { visible: { classPropertyName: "visible", publicName: "tuiHintManual", isSignal: true, isRequired: false, transformFunction: null } }, providers: [tuiAsDriver(TuiHintManual)], usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiHintManual, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiHintManual, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tuiHint][tuiHintManual]',
@@ -569,10 +511,10 @@ class TuiHintOverflow {
             ? this.content() || textContent
             : '');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiHintOverflow, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.15", type: TuiHintOverflow, isStandalone: true, selector: "[tuiHintOverflow]", inputs: { content: { classPropertyName: "content", publicName: "tuiHintOverflow", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "onMouseEnter($event.currentTarget)" } }, hostDirectives: [{ directive: TuiHintDirective, inputs: ["tuiHintAppearance", "tuiHintAppearance"] }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiHintOverflow, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.17", type: TuiHintOverflow, isStandalone: true, selector: "[tuiHintOverflow]", inputs: { content: { classPropertyName: "content", publicName: "tuiHintOverflow", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "onMouseEnter($event.currentTarget)" } }, hostDirectives: [{ directive: TuiHintDirective, inputs: ["tuiHintAppearance", "tuiHintAppearance"] }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiHintOverflow, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiHintOverflow, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tuiHintOverflow]',
@@ -591,7 +533,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
 const TuiHint = [
     TuiHintComponent,
     TuiHintDirective,
-    TuiHintOptionsDirective,
     TuiHintUnstyled,
     TuiHintDriver,
     TuiHintPosition,
@@ -607,5 +548,5 @@ const TuiHint = [
  * Generated bundle index. Do not edit.
  */
 
-export { TUI_HINT_COMPONENT, TUI_HINT_DEFAULT_OPTIONS, TUI_HINT_DIRECTIONS, TUI_HINT_OPTIONS, TUI_HINT_PROVIDERS, TuiHint, TuiHintComponent, TuiHintDescribe, TuiHintDirective, TuiHintDriver, TuiHintHost, TuiHintHover, TuiHintManual, TuiHintOptionsDirective, TuiHintOverflow, TuiHintPointer, TuiHintPosition, TuiHintUnstyled, TuiHintUnstyledComponent, tuiHintOptionsProvider };
-//# sourceMappingURL=taiga-ui-core-directives-hint.mjs.map
+export { TUI_HINT_COMPONENT, TUI_HINT_DEFAULT_OPTIONS, TUI_HINT_DIRECTIONS, TUI_HINT_OPTIONS, TUI_HINT_PROVIDERS, TuiHint, TuiHintComponent, TuiHintDescribe, TuiHintDirective, TuiHintDriver, TuiHintHost, TuiHintHover, TuiHintManual, TuiHintOverflow, TuiHintPointer, TuiHintPosition, TuiHintUnstyled, TuiHintUnstyledComponent, tuiHintOptionsProvider };
+//# sourceMappingURL=taiga-ui-core-portals-hint.mjs.map