@taiga-ui/core 2.37.1 → 2.38.0

package/fesm5/taiga-ui-core-constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"taiga-ui-core-constants.js","sources":["ng://@taiga-ui/core/constants/absolute-box-sizes.ts","ng://@taiga-ui/core/constants/decimal-symbols.ts","ng://@taiga-ui/core/constants/default-icons-path.ts","ng://@taiga-ui/core/constants/default-marker-handler.ts","ng://@taiga-ui/core/constants/editing-keys.ts","ng://@taiga-ui/core/constants/events.ts","ng://@taiga-ui/core/constants/mask-caret-trap.ts","ng://@taiga-ui/core/constants/media.ts","ng://@taiga-ui/core/constants/regexp.ts","ng://@taiga-ui/core/constants/version.ts","ng://@taiga-ui/core/constants/taiga-ui-core-constants.ts"],"sourcesContent":["export const DEFAULT_MARGIN = 4;\nexport const DEFAULT_MIN_HEIGHT = 80;\nexport const DEFAULT_MAX_HEIGHT = 400;\nexport const DEFAULT_MAX_WIDTH = 600;\n","export const TUI_DECIMAL_SYMBOLS: ReadonlyArray<string> = [',', '.'];\n","import {TuiStringHandler} from '@taiga-ui/cdk';\n\nexport const DEFAULT_ICONS_PATH: TuiStringHandler<string> = name =>\n    name.includes('.svg#') ? name : `#${name}`;\n","import {EMPTY_ARRAY} from '@taiga-ui/cdk';\nimport {TuiMarkerHandler} from '@taiga-ui/core/types';\n\nexport const TUI_DEFAULT_MARKER_HANDLER: TuiMarkerHandler = () => EMPTY_ARRAY;\n","export const tuiEditingKeys: readonly string[] = [\n    'Spacebar',\n    'Backspace',\n    'Delete',\n    'ArrowLeft',\n    'ArrowRight',\n    'Left',\n    'Right',\n    'End',\n    'Home',\n];\n","/**\n * An event indicating that async data for expand has finished loading.\n * Dispatch to finish loading states for {@link TuiExpandComponent}.\n */\nexport const TUI_EXPAND_LOADED = 'tui-expand-loaded';\n\n/**\n * An event for scrolling an element into view within {@link TuiScrollbarComponent}.\n */\nexport const TUI_SCROLL_INTO_VIEW = 'tui-scroll-into-view';\n\n/**\n * An event to notify {@link TuiScrollbarComponent} that\n * it should control a nested element.\n */\nexport const TUI_SCROLLABLE = 'tui-scrollable';\n\n/**\n * An event indicating and error during icon loading in {@link TuiSvgComponent}.\n */\nexport const TUI_ICON_ERROR = 'tui-icon-error';\n","export const MASK_CARET_TRAP = '[]';\n","/**\n * Media constants are exact the same as css media breakpoints\n * @deprecated use TUI_MEDIA token\n */\nexport const MEDIA = {\n    mobile: 320,\n    tablet: 600,\n    desktopSmall: 1024,\n    desktopLarge: 1280,\n};\n","export const TUI_DIGIT_REGEXP = /\\d/;\nexport const TUI_NON_DIGIT_REGEXP = /\\D/;\nexport const TUI_NON_DIGITS_REGEXP = /\\D+/g;\nexport const TUI_LEADING_ZEROES_REGEXP = /^0+/;\nexport const TUI_LAST_PUNCTUATION_MARK_REGEXP = /[.,\\\\/#!$%\\\\^&\\\\*;:{}=\\\\-_`~()]$/;\nexport const TUI_LATIN_REGEXP = /[A-z]/;\nexport const TUI_LATIN_AND_NUMBERS_REGEXP = /[A-z|0-9]/;\n","export const VERSION = '2.37.1';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;IAAa,cAAc,GAAG,EAAE;IACnB,kBAAkB,GAAG,GAAG;IACxB,kBAAkB,GAAG,IAAI;IACzB,iBAAiB,GAAG;;ICHpB,mBAAmB,GAA0B,CAAC,GAAG,EAAE,GAAG;;ICEtD,kBAAkB,GAA6B,UAAA,IAAI;IAC5D,OAAA,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,GAAG,IAAI,GAAG,MAAI,IAAM;AAA1C;;ICAS,0BAA0B,GAAqB,cAAM,OAAA,WAAW;;ICHhE,cAAc,GAAsB;IAC7C,UAAU;IACV,WAAW;IACX,QAAQ;IACR,WAAW;IACX,YAAY;IACZ,MAAM;IACN,OAAO;IACP,KAAK;IACL,MAAM;;;ACTV;;;;IAIa,iBAAiB,GAAG,oBAAoB;AAErD;;;IAGa,oBAAoB,GAAG,uBAAuB;AAE3D;;;;IAIa,cAAc,GAAG,iBAAiB;AAE/C;;;IAGa,cAAc,GAAG;;ICpBjB,eAAe,GAAG;;ACA/B;;;;IAIa,KAAK,GAAG;IACjB,MAAM,EAAE,GAAG;IACX,MAAM,EAAE,GAAG;IACX,YAAY,EAAE,IAAI;IAClB,YAAY,EAAE,IAAI;;;ICRT,gBAAgB,GAAG,KAAK;IACxB,oBAAoB,GAAG,KAAK;IAC5B,qBAAqB,GAAG,OAAO;IAC/B,yBAAyB,GAAG,MAAM;IAClC,gCAAgC,GAAG,mCAAmC;IACtE,gBAAgB,GAAG,QAAQ;IAC3B,4BAA4B,GAAG;;ICN/B,OAAO,GAAG;;ACAvB;;;;;;"}
+{"version":3,"file":"taiga-ui-core-constants.js","sources":["ng://@taiga-ui/core/constants/absolute-box-sizes.ts","ng://@taiga-ui/core/constants/decimal-symbols.ts","ng://@taiga-ui/core/constants/default-icons-path.ts","ng://@taiga-ui/core/constants/default-marker-handler.ts","ng://@taiga-ui/core/constants/editing-keys.ts","ng://@taiga-ui/core/constants/events.ts","ng://@taiga-ui/core/constants/mask-caret-trap.ts","ng://@taiga-ui/core/constants/media.ts","ng://@taiga-ui/core/constants/regexp.ts","ng://@taiga-ui/core/constants/version.ts","ng://@taiga-ui/core/constants/taiga-ui-core-constants.ts"],"sourcesContent":["export const DEFAULT_MARGIN = 4;\nexport const DEFAULT_MIN_HEIGHT = 80;\nexport const DEFAULT_MAX_HEIGHT = 400;\nexport const DEFAULT_MAX_WIDTH = 600;\n","export const TUI_DECIMAL_SYMBOLS: ReadonlyArray<string> = [',', '.'];\n","import {TuiStringHandler} from '@taiga-ui/cdk';\n\nexport const DEFAULT_ICONS_PATH: TuiStringHandler<string> = name =>\n    name.includes('.svg#') ? name : `#${name}`;\n","import {EMPTY_ARRAY} from '@taiga-ui/cdk';\nimport {TuiMarkerHandler} from '@taiga-ui/core/types';\n\nexport const TUI_DEFAULT_MARKER_HANDLER: TuiMarkerHandler = () => EMPTY_ARRAY;\n","export const tuiEditingKeys: readonly string[] = [\n    'Spacebar',\n    'Backspace',\n    'Delete',\n    'ArrowLeft',\n    'ArrowRight',\n    'Left',\n    'Right',\n    'End',\n    'Home',\n];\n","/**\n * An event indicating that async data for expand has finished loading.\n * Dispatch to finish loading states for {@link TuiExpandComponent}.\n */\nexport const TUI_EXPAND_LOADED = 'tui-expand-loaded';\n\n/**\n * An event for scrolling an element into view within {@link TuiScrollbarComponent}.\n */\nexport const TUI_SCROLL_INTO_VIEW = 'tui-scroll-into-view';\n\n/**\n * An event to notify {@link TuiScrollbarComponent} that\n * it should control a nested element.\n */\nexport const TUI_SCROLLABLE = 'tui-scrollable';\n\n/**\n * An event indicating and error during icon loading in {@link TuiSvgComponent}.\n */\nexport const TUI_ICON_ERROR = 'tui-icon-error';\n","export const MASK_CARET_TRAP = '[]';\n","/**\n * Media constants are exact the same as css media breakpoints\n * @deprecated use TUI_MEDIA token\n */\nexport const MEDIA = {\n    mobile: 320,\n    tablet: 600,\n    desktopSmall: 1024,\n    desktopLarge: 1280,\n};\n","export const TUI_DIGIT_REGEXP = /\\d/;\nexport const TUI_NON_DIGIT_REGEXP = /\\D/;\nexport const TUI_NON_DIGITS_REGEXP = /\\D+/g;\nexport const TUI_LEADING_ZEROES_REGEXP = /^0+/;\nexport const TUI_LAST_PUNCTUATION_MARK_REGEXP = /[.,\\\\/#!$%\\\\^&\\\\*;:{}=\\\\-_`~()]$/;\nexport const TUI_LATIN_REGEXP = /[A-z]/;\nexport const TUI_LATIN_AND_NUMBERS_REGEXP = /[A-z|0-9]/;\n","export const VERSION = '2.38.0';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;IAAa,cAAc,GAAG,EAAE;IACnB,kBAAkB,GAAG,GAAG;IACxB,kBAAkB,GAAG,IAAI;IACzB,iBAAiB,GAAG;;ICHpB,mBAAmB,GAA0B,CAAC,GAAG,EAAE,GAAG;;ICEtD,kBAAkB,GAA6B,UAAA,IAAI;IAC5D,OAAA,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,GAAG,IAAI,GAAG,MAAI,IAAM;AAA1C;;ICAS,0BAA0B,GAAqB,cAAM,OAAA,WAAW;;ICHhE,cAAc,GAAsB;IAC7C,UAAU;IACV,WAAW;IACX,QAAQ;IACR,WAAW;IACX,YAAY;IACZ,MAAM;IACN,OAAO;IACP,KAAK;IACL,MAAM;;;ACTV;;;;IAIa,iBAAiB,GAAG,oBAAoB;AAErD;;;IAGa,oBAAoB,GAAG,uBAAuB;AAE3D;;;;IAIa,cAAc,GAAG,iBAAiB;AAE/C;;;IAGa,cAAc,GAAG;;ICpBjB,eAAe,GAAG;;ACA/B;;;;IAIa,KAAK,GAAG;IACjB,MAAM,EAAE,GAAG;IACX,MAAM,EAAE,GAAG;IACX,YAAY,EAAE,IAAI;IAClB,YAAY,EAAE,IAAI;;;ICRT,gBAAgB,GAAG,KAAK;IACxB,oBAAoB,GAAG,KAAK;IAC5B,qBAAqB,GAAG,OAAO;IAC/B,yBAAyB,GAAG,MAAM;IAClC,gCAAgC,GAAG,mCAAmC;IACtE,gBAAgB,GAAG,QAAQ;IAC3B,4BAA4B,GAAG;;ICN/B,OAAO,GAAG;;ACAvB;;;;;;"}

package/fesm5/taiga-ui-core-directives-wrapper.js

@@ -0,0 +1,137 @@
+import { __decorate, __param } from 'tslib';
+import { Inject, Input, HostBinding, Directive, NgModule } from '@angular/core';
+import { MODE_PROVIDER } from '@taiga-ui/core/providers';
+import { TUI_MODE } from '@taiga-ui/core/tokens';
+import { Observable } from 'rxjs';
+
+var TuiWrapperDirective = /** @class */ (function () {
+    function TuiWrapperDirective(mode$) {
+        this.mode$ = mode$;
+        this.disabled = false;
+        this.readOnly = false;
+        // TODO: Rename to `hover` in 3.0
+        this.hovered = null;
+        // TODO: Rename to `active` in 3.0
+        this.pressed = null;
+        this.focused = false;
+        this.invalid = false;
+        this.appearance = '';
+    }
+    Object.defineProperty(TuiWrapperDirective.prototype, "computedInvalid", {
+        get: function () {
+            return !this.disabled && !this.readOnly && this.invalid;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(TuiWrapperDirective.prototype, "computedFocused", {
+        get: function () {
+            return this.focused && !this.disabled;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(TuiWrapperDirective.prototype, "interactiveState", {
+        get: function () {
+            if (this.disabled) {
+                return "disabled" /* Disabled */;
+            }
+            if (this.readOnly) {
+                return "readonly" /* Readonly */;
+            }
+            if (this.pressed) {
+                return "pressed" /* Pressed */;
+            }
+            if (this.hovered) {
+                return "hovered" /* Hovered */;
+            }
+            return null;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(TuiWrapperDirective.prototype, "noHover", {
+        get: function () {
+            return this.readOnly || this.hovered === false;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(TuiWrapperDirective.prototype, "noActive", {
+        get: function () {
+            return this.readOnly || this.pressed === false;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    TuiWrapperDirective.ctorParameters = function () { return [
+        { type: Observable, decorators: [{ type: Inject, args: [TUI_MODE,] }] }
+    ]; };
+    __decorate([
+        Input()
+    ], TuiWrapperDirective.prototype, "disabled", void 0);
+    __decorate([
+        Input()
+    ], TuiWrapperDirective.prototype, "readOnly", void 0);
+    __decorate([
+        Input()
+    ], TuiWrapperDirective.prototype, "hovered", void 0);
+    __decorate([
+        Input()
+    ], TuiWrapperDirective.prototype, "pressed", void 0);
+    __decorate([
+        Input()
+    ], TuiWrapperDirective.prototype, "focused", void 0);
+    __decorate([
+        Input()
+    ], TuiWrapperDirective.prototype, "invalid", void 0);
+    __decorate([
+        Input(),
+        HostBinding('attr.data-appearance')
+    ], TuiWrapperDirective.prototype, "appearance", void 0);
+    __decorate([
+        HostBinding('class._invalid')
+    ], TuiWrapperDirective.prototype, "computedInvalid", null);
+    __decorate([
+        HostBinding('class._focused')
+    ], TuiWrapperDirective.prototype, "computedFocused", null);
+    __decorate([
+        HostBinding('attr.data-state')
+    ], TuiWrapperDirective.prototype, "interactiveState", null);
+    __decorate([
+        HostBinding('class._no-hover')
+    ], TuiWrapperDirective.prototype, "noHover", null);
+    __decorate([
+        HostBinding('class._no-active')
+    ], TuiWrapperDirective.prototype, "noActive", null);
+    TuiWrapperDirective = __decorate([
+        Directive({
+            selector: 'tui-wrapper, [tuiWrapper]',
+            providers: [MODE_PROVIDER],
+            host: {
+                '($.data-mode.attr)': 'mode$',
+            },
+        }),
+        __param(0, Inject(TUI_MODE))
+    ], TuiWrapperDirective);
+    return TuiWrapperDirective;
+}());
+
+var TuiWrapperModule = /** @class */ (function () {
+    function TuiWrapperModule() {
+    }
+    TuiWrapperModule = __decorate([
+        NgModule({
+            declarations: [TuiWrapperDirective],
+            exports: [TuiWrapperDirective],
+        })
+    ], TuiWrapperModule);
+    return TuiWrapperModule;
+}());
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { TuiWrapperDirective, TuiWrapperModule };
+//# sourceMappingURL=taiga-ui-core-directives-wrapper.js.map

package/fesm5/taiga-ui-core-directives-wrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"taiga-ui-core-directives-wrapper.js","sources":["ng://@taiga-ui/core/directives/wrapper/wrapper.directive.ts","ng://@taiga-ui/core/directives/wrapper/wrapper.module.ts","ng://@taiga-ui/core/directives/wrapper/taiga-ui-core-directives-wrapper.ts"],"sourcesContent":["import {Directive, HostBinding, Inject, Input} from '@angular/core';\nimport {TuiInteractiveState} from '@taiga-ui/core/enums';\nimport {MODE_PROVIDER} from '@taiga-ui/core/providers';\nimport {TUI_MODE} from '@taiga-ui/core/tokens';\nimport {TuiBrightness} from '@taiga-ui/core/types';\nimport {Observable} from 'rxjs';\n\n@Directive({\n    selector: 'tui-wrapper, [tuiWrapper]',\n    providers: [MODE_PROVIDER],\n    host: {\n        '($.data-mode.attr)': 'mode$',\n    },\n})\nexport class TuiWrapperDirective {\n    @Input()\n    disabled = false;\n\n    @Input()\n    readOnly = false;\n\n    // TODO: Rename to `hover` in 3.0\n    @Input()\n    hovered: boolean | null = null;\n\n    // TODO: Rename to `active` in 3.0\n    @Input()\n    pressed: boolean | null = null;\n\n    @Input()\n    focused = false;\n\n    @Input()\n    invalid = false;\n\n    @Input()\n    @HostBinding('attr.data-appearance')\n    appearance = '';\n\n    constructor(@Inject(TUI_MODE) readonly mode$: Observable<TuiBrightness | null>) {}\n\n    @HostBinding('class._invalid')\n    get computedInvalid(): boolean {\n        return !this.disabled && !this.readOnly && this.invalid;\n    }\n\n    @HostBinding('class._focused')\n    get computedFocused(): boolean {\n        return this.focused && !this.disabled;\n    }\n\n    @HostBinding('attr.data-state')\n    get interactiveState(): TuiInteractiveState | string | null {\n        if (this.disabled) {\n            return TuiInteractiveState.Disabled;\n        }\n\n        if (this.readOnly) {\n            return TuiInteractiveState.Readonly;\n        }\n\n        if (this.pressed) {\n            return TuiInteractiveState.Pressed;\n        }\n\n        if (this.hovered) {\n            return TuiInteractiveState.Hovered;\n        }\n\n        return null;\n    }\n\n    @HostBinding('class._no-hover')\n    get noHover(): boolean {\n        return this.readOnly || this.hovered === false;\n    }\n\n    @HostBinding('class._no-active')\n    get noActive(): boolean {\n        return this.readOnly || this.pressed === false;\n    }\n}\n","import {NgModule} from '@angular/core';\n\nimport {TuiWrapperDirective} from './wrapper.directive';\n\n@NgModule({\n    declarations: [TuiWrapperDirective],\n    exports: [TuiWrapperDirective],\n})\nexport class TuiWrapperModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;IAuCI,6BAAuC,KAAuC;QAAvC,UAAK,GAAL,KAAK,CAAkC;QAvB9E,aAAQ,GAAG,KAAK,CAAC;QAGjB,aAAQ,GAAG,KAAK,CAAC;;QAIjB,YAAO,GAAmB,IAAI,CAAC;;QAI/B,YAAO,GAAmB,IAAI,CAAC;QAG/B,YAAO,GAAG,KAAK,CAAC;QAGhB,YAAO,GAAG,KAAK,CAAC;QAIhB,eAAU,GAAG,EAAE,CAAC;KAEkE;IAGlF,sBAAI,gDAAe;aAAnB;YACI,OAAO,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,CAAC;SAC3D;;;OAAA;IAGD,sBAAI,gDAAe;aAAnB;YACI,OAAO,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;SACzC;;;OAAA;IAGD,sBAAI,iDAAgB;aAApB;YACI,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACf,iCAAoC;aACvC;YAED,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACf,iCAAoC;aACvC;YAED,IAAI,IAAI,CAAC,OAAO,EAAE;gBACd,+BAAmC;aACtC;YAED,IAAI,IAAI,CAAC,OAAO,EAAE;gBACd,+BAAmC;aACtC;YAED,OAAO,IAAI,CAAC;SACf;;;OAAA;IAGD,sBAAI,wCAAO;aAAX;YACI,OAAO,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,KAAK,KAAK,CAAC;SAClD;;;OAAA;IAGD,sBAAI,yCAAQ;aAAZ;YACI,OAAO,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,KAAK,KAAK,CAAC;SAClD;;;OAAA;;gBAzC6C,UAAU,uBAA3C,MAAM,SAAC,QAAQ;;IAvB5B;QADC,KAAK,EAAE;yDACS;IAGjB;QADC,KAAK,EAAE;yDACS;IAIjB;QADC,KAAK,EAAE;wDACuB;IAI/B;QADC,KAAK,EAAE;wDACuB;IAG/B;QADC,KAAK,EAAE;wDACQ;IAGhB;QADC,KAAK,EAAE;wDACQ;IAIhB;QAFC,KAAK,EAAE;QACP,WAAW,CAAC,sBAAsB,CAAC;2DACpB;IAKhB;QADC,WAAW,CAAC,gBAAgB,CAAC;8DAG7B;IAGD;QADC,WAAW,CAAC,gBAAgB,CAAC;8DAG7B;IAGD;QADC,WAAW,CAAC,iBAAiB,CAAC;+DAmB9B;IAGD;QADC,WAAW,CAAC,iBAAiB,CAAC;sDAG9B;IAGD;QADC,WAAW,CAAC,kBAAkB,CAAC;uDAG/B;IAlEQ,mBAAmB;QAP/B,SAAS,CAAC;YACP,QAAQ,EAAE,2BAA2B;YACrC,SAAS,EAAE,CAAC,aAAa,CAAC;YAC1B,IAAI,EAAE;gBACF,oBAAoB,EAAE,OAAO;aAChC;SACJ,CAAC;QA0Be,WAAA,MAAM,CAAC,QAAQ,CAAC,CAAA;OAzBpB,mBAAmB,CAmE/B;IAAD,0BAAC;CAnED;;;ICNA;KAAgC;IAAnB,gBAAgB;QAJ5B,QAAQ,CAAC;YACN,YAAY,EAAE,CAAC,mBAAmB,CAAC;YACnC,OAAO,EAAE,CAAC,mBAAmB,CAAC;SACjC,CAAC;OACW,gBAAgB,CAAG;IAAD,uBAAC;CAAhC;;ACRA;;;;;;"}

package/fesm5/taiga-ui-core-directives.js

@@ -11,6 +11,7 @@ export * from '@taiga-ui/core/directives/pointer-hint';
 export * from '@taiga-ui/core/directives/scroll-into-view';
 export * from '@taiga-ui/core/directives/table-mode';
 export * from '@taiga-ui/core/directives/textfield-controller';
+export * from '@taiga-ui/core/directives/wrapper';
 
 /**
  * Generated bundle index. Do not edit.

package/fesm5/taiga-ui-core-directives.js.map

@@ -1 +1 @@
-{"version":3,"file":"taiga-ui-core-directives.js","sources":["ng://@taiga-ui/core/directives/taiga-ui-core-directives.ts"],"sourcesContent":["/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA;;"}
+{"version":3,"file":"taiga-ui-core-directives.js","sources":["ng://@taiga-ui/core/directives/taiga-ui-core-directives.ts"],"sourcesContent":["/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA;;"}

package/fesm5/taiga-ui-core-enums.js

@@ -75,7 +75,9 @@ var TuiInteractiveState;
 (function (TuiInteractiveState) {
     TuiInteractiveState["Disabled"] = "disabled";
     TuiInteractiveState["Readonly"] = "readonly";
+    // TODO: Rename to `active` in 3.0
     TuiInteractiveState["Pressed"] = "pressed";
+    // TODO: Rename to `hover` in 3.0
     TuiInteractiveState["Hovered"] = "hovered";
 })(TuiInteractiveState || (TuiInteractiveState = {}));
 

package/fesm5/taiga-ui-core-enums.js.map

@@ -1 +1 @@
-{"version":3,"file":"taiga-ui-core-enums.js","sources":["ng://@taiga-ui/core/enums/appearance.ts","ng://@taiga-ui/core/enums/base-color.ts","ng://@taiga-ui/core/enums/button-shape.ts","ng://@taiga-ui/core/enums/decimal.ts","ng://@taiga-ui/core/enums/dropdown-animation.ts","ng://@taiga-ui/core/enums/dropdown-width.ts","ng://@taiga-ui/core/enums/hint-mode.ts","ng://@taiga-ui/core/enums/interactive-state.ts","ng://@taiga-ui/core/enums/link-mode.ts","ng://@taiga-ui/core/enums/notification.ts","ng://@taiga-ui/core/enums/orientation.ts","ng://@taiga-ui/core/enums/range-state.ts","ng://@taiga-ui/core/enums/support-color.ts","ng://@taiga-ui/core/enums/taiga-ui-core-enums.ts"],"sourcesContent":["export const enum TuiAppearance {\n    Icon = 'icon',\n    Primary = 'primary',\n    Accent = 'accent',\n    Secondary = 'secondary',\n    Table = 'table',\n    Textfield = 'textfield',\n    Flat = 'flat',\n    Outline = 'outline',\n    Whiteblock = 'whiteblock',\n    WhiteblockActive = 'whiteblock-active',\n}\n","/**\n * @deprecated\n */\nexport const enum TuiBaseColor {\n    Primary = 'primary',\n    Secondary = 'secondary',\n    Success = 'success',\n    Error = 'error',\n}\n","/**\n * @deprecated use string values\n */\nexport const enum TuiButtonShape {\n    Square = 'square',\n    Rounded = 'rounded',\n}\n","/**\n * @deprecated use join type {@link TuiDecimalT}\n */\nexport const enum TuiDecimal {\n    NotZero = 'not-zero',\n    Always = 'always',\n    Never = 'never',\n}\n","export const enum TuiDropdownAnimation {\n    FadeInBottom = 'fadeInBottom',\n    FadeInTop = 'fadeInTop',\n}\n","/**\n * @deprecated use join type {@link TuiDropdownWidthT}\n */\nexport const enum TuiDropdownWidth {\n    Fixed = 'fixed',\n    Min = 'min',\n    Auto = 'auto',\n}\n","/**\n * @deprecated use join type {@link TuiHintModeT}\n */\nexport const enum TuiHintMode {\n    Error = 'error',\n    OnDark = 'onDark',\n    Overflow = 'overflow',\n}\n","/**\n * @internal used in calendar, year picker and wrapper\n */\nexport const enum TuiInteractiveState {\n    Disabled = 'disabled',\n    Readonly = 'readonly',\n    Pressed = 'pressed',\n    Hovered = 'hovered',\n}\n","/**\n * @deprecated use string values\n */\nexport const enum TuiLinkMode {\n    Positive = 'positive',\n    Negative = 'negative',\n}\n","export const enum TuiNotification {\n    Info = 'info',\n    Warning = 'warning',\n    Success = 'success',\n    Error = 'error',\n}\n","/**\n * @deprecated use join type {@link TuiOrientationT}\n */\nexport const enum TuiOrientation {\n    Vertical = 'vertical',\n    Horizontal = 'horizontal',\n}\n","/**\n * @internal used in calendar and year picker\n */\nexport const enum TuiRangeState {\n    Start = 'start',\n    End = 'end',\n    Single = 'single',\n}\n","/**\n * @deprecated\n */\nexport const enum TuiSupportColor {\n    Mustard = 'support-01',\n    Texas = 'support-02',\n    Tan = 'support-03',\n    Salmon = 'support-04',\n    Sienna = 'support-05',\n    Bittersweet = 'support-06',\n    Pinkie = 'support-07',\n    Charm = 'support-08',\n    Amethist = 'support-09',\n    Helio = 'support-10',\n    Lilac = 'support-11',\n    Malibu = 'support-12',\n    Havelock = 'support-13',\n    Picton = 'support-14',\n    Mint = 'support-15',\n    Fountain = 'support-16',\n    Puertorico = 'support-17',\n    Bay = 'support-18',\n    Forest = 'support-19',\n    York = 'support-20',\n    Feijoa = 'support-21',\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"IAAkB;AAAlB,WAAkB,aAAa;IAC3B,8BAAa,CAAA;IACb,oCAAmB,CAAA;IACnB,kCAAiB,CAAA;IACjB,wCAAuB,CAAA;IACvB,gCAAe,CAAA;IACf,wCAAuB,CAAA;IACvB,8BAAa,CAAA;IACb,oCAAmB,CAAA;IACnB,0CAAyB,CAAA;IACzB,uDAAsC,CAAA;AAC1C,CAAC,EAXiB,aAAa,KAAb,aAAa;;ACA/B;;;IAGkB;AAAlB,WAAkB,YAAY;IAC1B,mCAAmB,CAAA;IACnB,uCAAuB,CAAA;IACvB,mCAAmB,CAAA;IACnB,+BAAe,CAAA;AACnB,CAAC,EALiB,YAAY,KAAZ,YAAY;;ACH9B;;;IAGkB;AAAlB,WAAkB,cAAc;IAC5B,mCAAiB,CAAA;IACjB,qCAAmB,CAAA;AACvB,CAAC,EAHiB,cAAc,KAAd,cAAc;;ACHhC;;;IAGkB;AAAlB,WAAkB,UAAU;IACxB,kCAAoB,CAAA;IACpB,+BAAiB,CAAA;IACjB,6BAAe,CAAA;AACnB,CAAC,EAJiB,UAAU,KAAV,UAAU;;ICHV;AAAlB,WAAkB,oBAAoB;IAClC,qDAA6B,CAAA;IAC7B,+CAAuB,CAAA;AAC3B,CAAC,EAHiB,oBAAoB,KAApB,oBAAoB;;ACAtC;;;IAGkB;AAAlB,WAAkB,gBAAgB;IAC9B,mCAAe,CAAA;IACf,+BAAW,CAAA;IACX,iCAAa,CAAA;AACjB,CAAC,EAJiB,gBAAgB,KAAhB,gBAAgB;;ACHlC;;;IAGkB;AAAlB,WAAkB,WAAW;IACzB,8BAAe,CAAA;IACf,gCAAiB,CAAA;IACjB,oCAAqB,CAAA;AACzB,CAAC,EAJiB,WAAW,KAAX,WAAW;;ACH7B;;;IAGkB;AAAlB,WAAkB,mBAAmB;IACjC,4CAAqB,CAAA;IACrB,4CAAqB,CAAA;IACrB,0CAAmB,CAAA;IACnB,0CAAmB,CAAA;AACvB,CAAC,EALiB,mBAAmB,KAAnB,mBAAmB;;ACHrC;;;IAGkB;AAAlB,WAAkB,WAAW;IACzB,oCAAqB,CAAA;IACrB,oCAAqB,CAAA;AACzB,CAAC,EAHiB,WAAW,KAAX,WAAW;;ICHX;AAAlB,WAAkB,eAAe;IAC7B,gCAAa,CAAA;IACb,sCAAmB,CAAA;IACnB,sCAAmB,CAAA;IACnB,kCAAe,CAAA;AACnB,CAAC,EALiB,eAAe,KAAf,eAAe;;ACAjC;;;IAGkB;AAAlB,WAAkB,cAAc;IAC5B,uCAAqB,CAAA;IACrB,2CAAyB,CAAA;AAC7B,CAAC,EAHiB,cAAc,KAAd,cAAc;;ACHhC;;;IAGkB;AAAlB,WAAkB,aAAa;IAC3B,gCAAe,CAAA;IACf,4BAAW,CAAA;IACX,kCAAiB,CAAA;AACrB,CAAC,EAJiB,aAAa,KAAb,aAAa;;ACH/B;;;IAGkB;AAAlB,WAAkB,eAAe;IAC7B,yCAAsB,CAAA;IACtB,uCAAoB,CAAA;IACpB,qCAAkB,CAAA;IAClB,wCAAqB,CAAA;IACrB,wCAAqB,CAAA;IACrB,6CAA0B,CAAA;IAC1B,wCAAqB,CAAA;IACrB,uCAAoB,CAAA;IACpB,0CAAuB,CAAA;IACvB,uCAAoB,CAAA;IACpB,uCAAoB,CAAA;IACpB,wCAAqB,CAAA;IACrB,0CAAuB,CAAA;IACvB,wCAAqB,CAAA;IACrB,sCAAmB,CAAA;IACnB,0CAAuB,CAAA;IACvB,4CAAyB,CAAA;IACzB,qCAAkB,CAAA;IAClB,wCAAqB,CAAA;IACrB,sCAAmB,CAAA;IACnB,wCAAqB,CAAA;AACzB,CAAC,EAtBiB,eAAe,KAAf,eAAe;;ACHjC;;;;;;"}
+{"version":3,"file":"taiga-ui-core-enums.js","sources":["ng://@taiga-ui/core/enums/appearance.ts","ng://@taiga-ui/core/enums/base-color.ts","ng://@taiga-ui/core/enums/button-shape.ts","ng://@taiga-ui/core/enums/decimal.ts","ng://@taiga-ui/core/enums/dropdown-animation.ts","ng://@taiga-ui/core/enums/dropdown-width.ts","ng://@taiga-ui/core/enums/hint-mode.ts","ng://@taiga-ui/core/enums/interactive-state.ts","ng://@taiga-ui/core/enums/link-mode.ts","ng://@taiga-ui/core/enums/notification.ts","ng://@taiga-ui/core/enums/orientation.ts","ng://@taiga-ui/core/enums/range-state.ts","ng://@taiga-ui/core/enums/support-color.ts","ng://@taiga-ui/core/enums/taiga-ui-core-enums.ts"],"sourcesContent":["export const enum TuiAppearance {\n    Icon = 'icon',\n    Primary = 'primary',\n    Accent = 'accent',\n    Secondary = 'secondary',\n    Table = 'table',\n    Textfield = 'textfield',\n    Flat = 'flat',\n    Outline = 'outline',\n    Whiteblock = 'whiteblock',\n    WhiteblockActive = 'whiteblock-active',\n}\n","/**\n * @deprecated\n */\nexport const enum TuiBaseColor {\n    Primary = 'primary',\n    Secondary = 'secondary',\n    Success = 'success',\n    Error = 'error',\n}\n","/**\n * @deprecated use string values\n */\nexport const enum TuiButtonShape {\n    Square = 'square',\n    Rounded = 'rounded',\n}\n","/**\n * @deprecated use join type {@link TuiDecimalT}\n */\nexport const enum TuiDecimal {\n    NotZero = 'not-zero',\n    Always = 'always',\n    Never = 'never',\n}\n","export const enum TuiDropdownAnimation {\n    FadeInBottom = 'fadeInBottom',\n    FadeInTop = 'fadeInTop',\n}\n","/**\n * @deprecated use join type {@link TuiDropdownWidthT}\n */\nexport const enum TuiDropdownWidth {\n    Fixed = 'fixed',\n    Min = 'min',\n    Auto = 'auto',\n}\n","/**\n * @deprecated use join type {@link TuiHintModeT}\n */\nexport const enum TuiHintMode {\n    Error = 'error',\n    OnDark = 'onDark',\n    Overflow = 'overflow',\n}\n","/**\n * @internal used in calendar, year picker and wrapper\n */\nexport const enum TuiInteractiveState {\n    Disabled = 'disabled',\n    Readonly = 'readonly',\n    // TODO: Rename to `active` in 3.0\n    Pressed = 'pressed',\n    // TODO: Rename to `hover` in 3.0\n    Hovered = 'hovered',\n}\n","/**\n * @deprecated use string values\n */\nexport const enum TuiLinkMode {\n    Positive = 'positive',\n    Negative = 'negative',\n}\n","export const enum TuiNotification {\n    Info = 'info',\n    Warning = 'warning',\n    Success = 'success',\n    Error = 'error',\n}\n","/**\n * @deprecated use join type {@link TuiOrientationT}\n */\nexport const enum TuiOrientation {\n    Vertical = 'vertical',\n    Horizontal = 'horizontal',\n}\n","/**\n * @internal used in calendar and year picker\n */\nexport const enum TuiRangeState {\n    Start = 'start',\n    End = 'end',\n    Single = 'single',\n}\n","/**\n * @deprecated\n */\nexport const enum TuiSupportColor {\n    Mustard = 'support-01',\n    Texas = 'support-02',\n    Tan = 'support-03',\n    Salmon = 'support-04',\n    Sienna = 'support-05',\n    Bittersweet = 'support-06',\n    Pinkie = 'support-07',\n    Charm = 'support-08',\n    Amethist = 'support-09',\n    Helio = 'support-10',\n    Lilac = 'support-11',\n    Malibu = 'support-12',\n    Havelock = 'support-13',\n    Picton = 'support-14',\n    Mint = 'support-15',\n    Fountain = 'support-16',\n    Puertorico = 'support-17',\n    Bay = 'support-18',\n    Forest = 'support-19',\n    York = 'support-20',\n    Feijoa = 'support-21',\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"IAAkB;AAAlB,WAAkB,aAAa;IAC3B,8BAAa,CAAA;IACb,oCAAmB,CAAA;IACnB,kCAAiB,CAAA;IACjB,wCAAuB,CAAA;IACvB,gCAAe,CAAA;IACf,wCAAuB,CAAA;IACvB,8BAAa,CAAA;IACb,oCAAmB,CAAA;IACnB,0CAAyB,CAAA;IACzB,uDAAsC,CAAA;AAC1C,CAAC,EAXiB,aAAa,KAAb,aAAa;;ACA/B;;;IAGkB;AAAlB,WAAkB,YAAY;IAC1B,mCAAmB,CAAA;IACnB,uCAAuB,CAAA;IACvB,mCAAmB,CAAA;IACnB,+BAAe,CAAA;AACnB,CAAC,EALiB,YAAY,KAAZ,YAAY;;ACH9B;;;IAGkB;AAAlB,WAAkB,cAAc;IAC5B,mCAAiB,CAAA;IACjB,qCAAmB,CAAA;AACvB,CAAC,EAHiB,cAAc,KAAd,cAAc;;ACHhC;;;IAGkB;AAAlB,WAAkB,UAAU;IACxB,kCAAoB,CAAA;IACpB,+BAAiB,CAAA;IACjB,6BAAe,CAAA;AACnB,CAAC,EAJiB,UAAU,KAAV,UAAU;;ICHV;AAAlB,WAAkB,oBAAoB;IAClC,qDAA6B,CAAA;IAC7B,+CAAuB,CAAA;AAC3B,CAAC,EAHiB,oBAAoB,KAApB,oBAAoB;;ACAtC;;;IAGkB;AAAlB,WAAkB,gBAAgB;IAC9B,mCAAe,CAAA;IACf,+BAAW,CAAA;IACX,iCAAa,CAAA;AACjB,CAAC,EAJiB,gBAAgB,KAAhB,gBAAgB;;ACHlC;;;IAGkB;AAAlB,WAAkB,WAAW;IACzB,8BAAe,CAAA;IACf,gCAAiB,CAAA;IACjB,oCAAqB,CAAA;AACzB,CAAC,EAJiB,WAAW,KAAX,WAAW;;ACH7B;;;IAGkB;AAAlB,WAAkB,mBAAmB;IACjC,4CAAqB,CAAA;IACrB,4CAAqB,CAAA;;IAErB,0CAAmB,CAAA;;IAEnB,0CAAmB,CAAA;AACvB,CAAC,EAPiB,mBAAmB,KAAnB,mBAAmB;;ACHrC;;;IAGkB;AAAlB,WAAkB,WAAW;IACzB,oCAAqB,CAAA;IACrB,oCAAqB,CAAA;AACzB,CAAC,EAHiB,WAAW,KAAX,WAAW;;ICHX;AAAlB,WAAkB,eAAe;IAC7B,gCAAa,CAAA;IACb,sCAAmB,CAAA;IACnB,sCAAmB,CAAA;IACnB,kCAAe,CAAA;AACnB,CAAC,EALiB,eAAe,KAAf,eAAe;;ACAjC;;;IAGkB;AAAlB,WAAkB,cAAc;IAC5B,uCAAqB,CAAA;IACrB,2CAAyB,CAAA;AAC7B,CAAC,EAHiB,cAAc,KAAd,cAAc;;ACHhC;;;IAGkB;AAAlB,WAAkB,aAAa;IAC3B,gCAAe,CAAA;IACf,4BAAW,CAAA;IACX,kCAAiB,CAAA;AACrB,CAAC,EAJiB,aAAa,KAAb,aAAa;;ACH/B;;;IAGkB;AAAlB,WAAkB,eAAe;IAC7B,yCAAsB,CAAA;IACtB,uCAAoB,CAAA;IACpB,qCAAkB,CAAA;IAClB,wCAAqB,CAAA;IACrB,wCAAqB,CAAA;IACrB,6CAA0B,CAAA;IAC1B,wCAAqB,CAAA;IACrB,uCAAoB,CAAA;IACpB,0CAAuB,CAAA;IACvB,uCAAoB,CAAA;IACpB,uCAAoB,CAAA;IACpB,wCAAqB,CAAA;IACrB,0CAAuB,CAAA;IACvB,wCAAqB,CAAA;IACrB,sCAAmB,CAAA;IACnB,0CAAuB,CAAA;IACvB,4CAAyB,CAAA;IACzB,qCAAkB,CAAA;IAClB,wCAAqB,CAAA;IACrB,sCAAmB,CAAA;IACnB,wCAAqB,CAAA;AACzB,CAAC,EAtBiB,eAAe,KAAf,eAAe;;ACHjC;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@taiga-ui/core",
-  "version": "2.37.1",
+  "version": "2.38.0",
   "description": "Core library for creating Angular components and applications using Taiga UI",
   "keywords": [
     "angular",
@@ -16,12 +16,12 @@
   "homepage": "https://github.com/tinkoff/taiga-ui",
   "schematics": "./schematics/collection.json",
   "dependencies": {
-    "@taiga-ui/i18n": "^2.37.1",
+    "@taiga-ui/i18n": "^2.38.0",
     "tslib": "^1.10.0"
   },
   "peerDependencies": {
-    "@taiga-ui/i18n": ">=2.37.1",
-    "@taiga-ui/cdk": ">=2.37.1",
+    "@taiga-ui/i18n": ">=2.38.0",
+    "@taiga-ui/cdk": ">=2.38.0",
     "@angular/animations": ">=9.0.0",
     "@angular/common": ">=9.0.0",
     "@angular/core": ">=9.0.0",

package/styles/mixins/textfield.less

@@ -155,12 +155,12 @@
         }
 
         :host._invalid:not(._focused) &,
-        :host._invalid:not(._focused)._hovered & {
+        :host._invalid:not(._focused):hover & {
             color: var(--tui-error-fill);
         }
 
         :host[data-mode='onDark']._invalid:not(._focused) &,
-        :host[data-mode='onDark']._invalid:not(._focused)._hovered & {
+        :host[data-mode='onDark']._invalid:not(._focused):hover & {
             color: var(--tui-error-fill-night);
         }
     }

package/styles/mixins/textfield.scss

@@ -119,12 +119,12 @@
         }
 
         :host._invalid:not(._focused) &,
-        :host._invalid:not(._focused)._hovered & {
+        :host._invalid:not(._focused):hover & {
             color: var(--tui-error-fill);
         }
 
         :host[data-mode='onDark']._invalid:not(._focused) &,
-        :host[data-mode='onDark']._invalid:not(._focused)._hovered & {
+        :host[data-mode='onDark']._invalid:not(._focused):hover & {
             color: var(--tui-error-fill-night);
         }
     }

package/styles/mixins/wrapper.less

@@ -0,0 +1,57 @@
+.wrapper-hover(@ruleset) {
+    &:hover:not(._no-hover),
+    &[data-state='hovered'] {
+        @ruleset();
+    }
+}
+
+.wrapper-active(@ruleset) {
+    &:active:not(._no-active),
+    &[data-state='pressed'],
+    &[data-state='pressed']:hover {
+        @ruleset();
+    }
+}
+
+.wrapper-readonly(@ruleset, @native: false) {
+    // Specificity artificially increased to match `:hover:not()` level
+    & when (@native = true) {
+        &:read-only:read-only,
+        &[data-state='readonly'][data-state='readonly'] {
+            @ruleset();
+        }
+    }
+
+    & when (@native = false) {
+        &[data-state='readonly'][data-state='readonly'] {
+            @ruleset();
+        }
+    }
+}
+
+.wrapper-disabled(@ruleset) {
+    // Specificity artificially increased to match `:hover:not()` level
+    &:disabled:disabled,
+    &[data-state='disabled'][data-state='disabled'] {
+        @ruleset();
+    }
+}
+
+.wrapper-focus(@ruleset) {
+    // TODO: Join rules together once all browsers support focus-visible
+    // Specificity artificially increased to match `:hover:not()` level
+    &:focus-visible:focus-visible {
+        @ruleset();
+    }
+
+    &._focused._focused {
+        @ruleset();
+    }
+}
+
+.wrapper-invalid(@ruleset) {
+    &:invalid:invalid,
+    &._invalid._invalid {
+        @ruleset();
+    }
+}

package/styles/mixins/wrapper.scss

@@ -0,0 +1,57 @@
+@mixin wrapper-hover {
+    &:hover:not(._no-hover),
+    &[data-state='hovered'] {
+        @content;
+    }
+}
+
+@mixin wrapper-active {
+    &:active:not(._no-active),
+    &[data-state='pressed'],
+    &[data-state='pressed']:hover {
+        @content;
+    }
+}
+
+@mixin wrapper-readonly($native: false) {
+    // Specificity artificially increased to match `:hover:not()` level
+    @if $native == true {
+        &:read-only:read-only,
+        &[data-state='readonly'][data-state='readonly'] {
+            @content;
+        }
+    }
+
+    @if $native == false {
+        &[data-state='readonly'][data-state='readonly'] {
+            @content;
+        }
+    }
+}
+
+@mixin wrapper-disabled {
+    // Specificity artificially increased to match `:hover:not()` level
+    &:disabled:disabled,
+    &[data-state='disabled'][data-state='disabled'] {
+        @content;
+    }
+}
+
+@mixin wrapper-focus {
+    // TODO: Join rules together once all browsers support focus-visible
+    // Specificity artificially increased to match `:hover:not()` level
+    &:focus-visible:focus-visible {
+        @content;
+    }
+
+    &._focused._focused {
+        @content;
+    }
+}
+
+@mixin wrapper-invalid {
+    &:invalid:invalid,
+    &._invalid._invalid {
+        @content;
+    }
+}

package/styles/taiga-ui-local.less

@@ -5,4 +5,5 @@
 @import 'mixins/slider.less';
 @import 'mixins/text.less';
 @import 'mixins/textfield.less';
+@import 'mixins/wrapper.less';
 @import 'variables/media.less';

package/styles/taiga-ui-local.scss

@@ -5,4 +5,5 @@ $space: 4px;
 @import 'mixins/slider.scss';
 @import 'mixins/text.scss';
 @import 'mixins/textfield.scss';
+@import 'mixins/wrapper.scss';
 @import 'variables/media.scss';

package/styles/theme/variables.less

@@ -48,7 +48,7 @@
     --tui-base-09: #000; // icons on inverted background
     --tui-primary: #526ed3; // primary buttons, background
     --tui-primary-hover: #6c86e2; // primary buttons hover
-    --tui-primary-active: #314692; // primary buttons hover
+    --tui-primary-active: #314692; // primary buttons pressed
     --tui-primary-text: #fff; // text on primary background
     --tui-secondary: #ebefff; // inputs and secondary buttons
     --tui-secondary-hover: #dfe3f3; // inputs and secondary buttons hover

package/styles/theme/wrapper/accent.less

@@ -1,31 +1,29 @@
-tui-wrapper[data-appearance='accent'] {
+@import '../../taiga-ui-local.less';
+
+/* stylelint-disable order/order */
+tui-wrapper[data-appearance='accent'],
+[tuiWrapper][data-appearance='accent'] {
     background: var(--tui-accent);
     color: var(--tui-accent-text);
 
-    &[data-state='hovered'] {
+    .wrapper-hover({
         background: var(--tui-accent-hover);
-    }
+    });
 
-    &:active,
-    &[data-state='pressed'] {
+    .wrapper-active({
         background: var(--tui-accent-active);
-    }
-
-    &[data-state='disabled'] {
-        opacity: var(--tui-disabled-opacity);
-    }
+    });
 
-    &._invalid {
+    .wrapper-invalid({
         color: var(--tui-negative-night);
         background: var(--tui-error-bg);
 
-        &[data-state='hovered'],
-        &[data-state='pressed'] {
+        .wrapper-hover({
             background: var(--tui-error-bg-hover);
-        }
+        });
 
-        &._focused:after {
-            color: var(--tui-error-fill);
-        }
-    }
+        .wrapper-focus({
+            --tui-focus: var(--tui-error-fill);
+        });
+    });
 }

package/styles/theme/wrapper/base.less

@@ -0,0 +1,35 @@
+@import '../../taiga-ui-local.less';
+
+/* stylelint-disable order/order */
+tui-wrapper,
+[tuiWrapper] {
+    .transition(~'color, background');
+    position: relative;
+    display: block;
+    height: 100%;
+    width: 100%;
+    appearance: none;
+    border-radius: inherit;
+
+    &:after {
+        .transition(box-shadow);
+        .fullsize(absolute, inset);
+        content: '';
+        border-radius: inherit;
+        border: 1px solid currentColor;
+        pointer-events: none;
+        color: transparent;
+    }
+
+    .wrapper-focus({
+        &:after {
+            border-width: 2px;
+            color: var(--tui-focus);
+        }
+    });
+
+    .wrapper-disabled({
+        pointer-events: none;
+        opacity: var(--tui-disabled-opacity);
+    });
+}

package/styles/theme/wrapper/icon.less

@@ -1,42 +1,32 @@
-// TODO: Variables names should not rely on textfield
-tui-wrapper[data-appearance='icon'] {
+@import '../../taiga-ui-local.less';
+
+/* stylelint-disable order/order */
+tui-wrapper[data-appearance='icon'],
+[tuiWrapper][data-appearance='icon'] {
     background: transparent;
     color: var(--tui-base-06);
 
-    &[data-state='hovered'] {
-        color: var(--tui-base-07);
-    }
-
-    &:active,
-    &[data-state='pressed'] {
-        color: var(--tui-base-08);
-    }
-
-    &[data-state='disabled'] {
-        opacity: var(--tui-disabled-opacity);
-    }
-
     &[data-mode='onDark'] {
         color: var(--tui-text-01-night);
         opacity: var(--tui-disabled-opacity);
 
-        &[data-state='hovered'],
-        &[data-state='pressed'] {
-            opacity: 1;
-        }
-
-        &._focused:after {
-            color: var(--tui-base-01);
-        }
+        .wrapper-focus({
+            --tui-focus: var(--tui-base-01);
+        });
     }
 
     &[data-mode='onLight'] {
         color: var(--tui-text-01);
         opacity: var(--tui-disabled-opacity);
-
-        &[data-state='hovered'],
-        &[data-state='pressed'] {
-            opacity: 1;
-        }
     }
+
+    .wrapper-hover({
+        color: var(--tui-base-07);
+        opacity: 1;
+    });
+
+    .wrapper-active({
+        color: var(--tui-base-08);
+        opacity: 1;
+    });
 }