@taiga-ui/core 2.36.0 → 2.38.0

package/fesm5/taiga-ui-core-utils-miscellaneous.js.map

@@ -1 +1 @@
-{"version":3,"file":"taiga-ui-core-utils-miscellaneous.js","sources":["ng://@taiga-ui/core/utils/miscellaneous/color-fallback.ts","ng://@taiga-ui/core/utils/miscellaneous/get-border.ts","ng://@taiga-ui/core/utils/miscellaneous/icons-path-factory.ts","ng://@taiga-ui/core/utils/miscellaneous/is-editing-key.ts","ng://@taiga-ui/core/utils/miscellaneous/is-presumed-hTMLString.ts","ng://@taiga-ui/core/utils/miscellaneous/size-bigger.ts","ng://@taiga-ui/core/utils/miscellaneous/taiga-ui-core-utils-miscellaneous.ts"],"sourcesContent":["/** @deprecated */\nexport function colorFallback(color: string | null): string {\n    switch (color) {\n        case 'secondary':\n            return 'var(--tui-info-fill)';\n        case 'error':\n            return 'var(--tui-error-fill)';\n        case 'success':\n            return 'var(--tui-success-fill)';\n        default:\n            return `var(--tui-${color || 'base-05'})`;\n    }\n}\n","const ITEM_SIZE = 1.5;\nconst CONTENT_SIZE = 2.5;\n\nexport function getBorder(\n    hasIcon: boolean,\n    hasCleaner: boolean = false,\n    hasTooltip: boolean = false,\n    hasContent: boolean = false,\n): number {\n    let border = 0;\n\n    if (hasIcon) {\n        border += ITEM_SIZE;\n    }\n\n    if (hasCleaner) {\n        border += ITEM_SIZE;\n    }\n\n    if (hasTooltip) {\n        border += ITEM_SIZE;\n    }\n\n    if (hasContent) {\n        border += CONTENT_SIZE;\n    }\n\n    return border;\n}\n","import {TuiStringHandler} from '@taiga-ui/cdk';\nimport {DEFAULT_ICONS_PATH} from '@taiga-ui/core/constants';\n\nexport function iconsPathFactory(staticPath: string): TuiStringHandler<string> {\n    const base =\n        staticPath[staticPath.length - 1] === '/' ? staticPath : staticPath + '/';\n\n    return name => {\n        if (name.startsWith('tuiIcon')) {\n            return `${base}${name}.svg#${name}`;\n        }\n\n        return DEFAULT_ICONS_PATH(name);\n    };\n}\n","import {tuiEditingKeys} from '@taiga-ui/core/constants';\n\n/**\n * Check if pressed key is interactive in terms of input field\n */\nexport function isEditingKey(key: string): boolean {\n    return key.length === 1 || tuiEditingKeys.indexOf(key) !== -1;\n}\n","export function isPresumedHTMLString(candidate: string): boolean {\n    const trimmed = candidate.trim();\n\n    return trimmed.startsWith('<') && trimmed.endsWith('>');\n}\n","import {TuiSizeXS, TuiSizeXXL} from '@taiga-ui/core/types';\n\nconst SIZES: ReadonlyArray<TuiSizeXS | TuiSizeXXL> = ['xs', 's', 'm', 'l', 'xl', 'xxl'];\n\n/**\n * Compares size constants to determine if first size is bigger than the second\n *\n * @param size size that we need to compare\n * @param biggerThanSize size to compare with, 's' by default\n */\nexport function sizeBigger(\n    size: TuiSizeXS | TuiSizeXXL,\n    biggerThanSize: TuiSizeXS | TuiSizeXXL = 's',\n): boolean {\n    return SIZES.indexOf(size) > SIZES.indexOf(biggerThanSize);\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;AAAA;SACgB,aAAa,CAAC,KAAoB;IAC9C,QAAQ,KAAK;QACT,KAAK,WAAW;YACZ,OAAO,sBAAsB,CAAC;QAClC,KAAK,OAAO;YACR,OAAO,uBAAuB,CAAC;QACnC,KAAK,SAAS;YACV,OAAO,yBAAyB,CAAC;QACrC;YACI,OAAO,gBAAa,KAAK,IAAI,SAAS,OAAG,CAAC;KACjD;AACL;;ACZA,IAAM,SAAS,GAAG,GAAG,CAAC;AACtB,IAAM,YAAY,GAAG,GAAG,CAAC;SAET,SAAS,CACrB,OAAgB,EAChB,UAA2B,EAC3B,UAA2B,EAC3B,UAA2B;IAF3B,2BAAA,EAAA,kBAA2B;IAC3B,2BAAA,EAAA,kBAA2B;IAC3B,2BAAA,EAAA,kBAA2B;IAE3B,IAAI,MAAM,GAAG,CAAC,CAAC;IAEf,IAAI,OAAO,EAAE;QACT,MAAM,IAAI,SAAS,CAAC;KACvB;IAED,IAAI,UAAU,EAAE;QACZ,MAAM,IAAI,SAAS,CAAC;KACvB;IAED,IAAI,UAAU,EAAE;QACZ,MAAM,IAAI,SAAS,CAAC;KACvB;IAED,IAAI,UAAU,EAAE;QACZ,MAAM,IAAI,YAAY,CAAC;KAC1B;IAED,OAAO,MAAM,CAAC;AAClB;;SCzBgB,gBAAgB,CAAC,UAAkB;IAC/C,IAAM,IAAI,GACN,UAAU,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC,KAAK,GAAG,GAAG,UAAU,GAAG,UAAU,GAAG,GAAG,CAAC;IAE9E,OAAO,UAAA,IAAI;QACP,IAAI,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE;YAC5B,OAAO,KAAG,IAAI,GAAG,IAAI,aAAQ,IAAM,CAAC;SACvC;QAED,OAAO,kBAAkB,CAAC,IAAI,CAAC,CAAC;KACnC,CAAC;AACN;;ACZA;;;SAGgB,YAAY,CAAC,GAAW;IACpC,OAAO,GAAG,CAAC,MAAM,KAAK,CAAC,IAAI,cAAc,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC;AAClE;;SCPgB,oBAAoB,CAAC,SAAiB;IAClD,IAAM,OAAO,GAAG,SAAS,CAAC,IAAI,EAAE,CAAC;IAEjC,OAAO,OAAO,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;AAC5D;;ACFA,IAAM,KAAK,GAA0C,CAAC,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;AAExF;;;;;;SAMgB,UAAU,CACtB,IAA4B,EAC5B,cAA4C;IAA5C,+BAAA,EAAA,oBAA4C;IAE5C,OAAO,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;AAC/D;;ACfA;;;;;;"}
+{"version":3,"file":"taiga-ui-core-utils-miscellaneous.js","sources":["ng://@taiga-ui/core/utils/miscellaneous/color-fallback.ts","ng://@taiga-ui/core/utils/miscellaneous/get-border.ts","ng://@taiga-ui/core/utils/miscellaneous/icons-path-factory.ts","ng://@taiga-ui/core/utils/miscellaneous/is-editing-key.ts","ng://@taiga-ui/core/utils/miscellaneous/is-presumed-hTMLString.ts","ng://@taiga-ui/core/utils/miscellaneous/size-bigger.ts","ng://@taiga-ui/core/utils/miscellaneous/taiga-ui-core-utils-miscellaneous.ts"],"sourcesContent":["/** @deprecated */\nexport function colorFallback(color: string | null): string {\n    switch (color) {\n        case 'secondary':\n            return 'var(--tui-info-fill)';\n        case 'error':\n            return 'var(--tui-error-fill)';\n        case 'success':\n            return 'var(--tui-success-fill)';\n        default:\n            return `var(--tui-${color || 'base-05'})`;\n    }\n}\n","const ITEM_SIZE = 1.5;\nconst CONTENT_SIZE = 2.5;\n\nexport function getBorder(\n    hasIcon: boolean,\n    hasCleaner: boolean = false,\n    hasTooltip: boolean = false,\n    hasContent: boolean = false,\n): number {\n    let border = 0;\n\n    if (hasIcon) {\n        border += ITEM_SIZE;\n    }\n\n    if (hasCleaner) {\n        border += ITEM_SIZE;\n    }\n\n    if (hasTooltip) {\n        border += ITEM_SIZE;\n    }\n\n    if (hasContent) {\n        border += CONTENT_SIZE;\n    }\n\n    return border;\n}\n","import {TuiStringHandler} from '@taiga-ui/cdk';\nimport {DEFAULT_ICONS_PATH} from '@taiga-ui/core/constants';\n\nexport function iconsPathFactory(staticPath: string): TuiStringHandler<string> {\n    const base =\n        staticPath[staticPath.length - 1] === '/' ? staticPath : `${staticPath}/`;\n\n    return name => {\n        if (name.startsWith('tuiIcon')) {\n            return `${base}${name}.svg#${name}`;\n        }\n\n        return DEFAULT_ICONS_PATH(name);\n    };\n}\n","import {tuiEditingKeys} from '@taiga-ui/core/constants';\n\n/**\n * Check if pressed key is interactive in terms of input field\n */\nexport function isEditingKey(key: string): boolean {\n    return key.length === 1 || tuiEditingKeys.includes(key);\n}\n","export function isPresumedHTMLString(candidate: string): boolean {\n    const trimmed = candidate.trim();\n\n    return trimmed.startsWith('<') && trimmed.endsWith('>');\n}\n","import {TuiSizeXS, TuiSizeXXL} from '@taiga-ui/core/types';\n\nconst SIZES: ReadonlyArray<TuiSizeXS | TuiSizeXXL> = ['xs', 's', 'm', 'l', 'xl', 'xxl'];\n\n/**\n * Compares size constants to determine if first size is bigger than the second\n *\n * @param size size that we need to compare\n * @param biggerThanSize size to compare with, 's' by default\n */\nexport function sizeBigger(\n    size: TuiSizeXS | TuiSizeXXL,\n    biggerThanSize: TuiSizeXS | TuiSizeXXL = 's',\n): boolean {\n    return SIZES.indexOf(size) > SIZES.indexOf(biggerThanSize);\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;AAAA;SACgB,aAAa,CAAC,KAAoB;IAC9C,QAAQ,KAAK;QACT,KAAK,WAAW;YACZ,OAAO,sBAAsB,CAAC;QAClC,KAAK,OAAO;YACR,OAAO,uBAAuB,CAAC;QACnC,KAAK,SAAS;YACV,OAAO,yBAAyB,CAAC;QACrC;YACI,OAAO,gBAAa,KAAK,IAAI,SAAS,OAAG,CAAC;KACjD;AACL;;ACZA,IAAM,SAAS,GAAG,GAAG,CAAC;AACtB,IAAM,YAAY,GAAG,GAAG,CAAC;SAET,SAAS,CACrB,OAAgB,EAChB,UAA2B,EAC3B,UAA2B,EAC3B,UAA2B;IAF3B,2BAAA,EAAA,kBAA2B;IAC3B,2BAAA,EAAA,kBAA2B;IAC3B,2BAAA,EAAA,kBAA2B;IAE3B,IAAI,MAAM,GAAG,CAAC,CAAC;IAEf,IAAI,OAAO,EAAE;QACT,MAAM,IAAI,SAAS,CAAC;KACvB;IAED,IAAI,UAAU,EAAE;QACZ,MAAM,IAAI,SAAS,CAAC;KACvB;IAED,IAAI,UAAU,EAAE;QACZ,MAAM,IAAI,SAAS,CAAC;KACvB;IAED,IAAI,UAAU,EAAE;QACZ,MAAM,IAAI,YAAY,CAAC;KAC1B;IAED,OAAO,MAAM,CAAC;AAClB;;SCzBgB,gBAAgB,CAAC,UAAkB;IAC/C,IAAM,IAAI,GACN,UAAU,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC,KAAK,GAAG,GAAG,UAAU,GAAM,UAAU,MAAG,CAAC;IAE9E,OAAO,UAAA,IAAI;QACP,IAAI,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE;YAC5B,OAAO,KAAG,IAAI,GAAG,IAAI,aAAQ,IAAM,CAAC;SACvC;QAED,OAAO,kBAAkB,CAAC,IAAI,CAAC,CAAC;KACnC,CAAC;AACN;;ACZA;;;SAGgB,YAAY,CAAC,GAAW;IACpC,OAAO,GAAG,CAAC,MAAM,KAAK,CAAC,IAAI,cAAc,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;AAC5D;;SCPgB,oBAAoB,CAAC,SAAiB;IAClD,IAAM,OAAO,GAAG,SAAS,CAAC,IAAI,EAAE,CAAC;IAEjC,OAAO,OAAO,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;AAC5D;;ACFA,IAAM,KAAK,GAA0C,CAAC,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;AAExF;;;;;;SAMgB,UAAU,CACtB,IAA4B,EAC5B,cAA4C;IAA5C,+BAAA,EAAA,oBAA4C;IAE5C,OAAO,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;AAC/D;;ACfA;;;;;;"}

package/interfaces/dropdown-directive.d.ts

@@ -1,4 +1,4 @@
-import { TuiActiveZoneDirective } from '@taiga-ui/cdk';
+import { TuiActiveZoneDirective, TuiNativeFocusableElement } from '@taiga-ui/cdk';
 import { TuiDropdownWidthT, TuiHorizontalDirection, TuiVerticalDirection } from '@taiga-ui/core/types';
 import { PolymorpheusContent } from '@tinkoff/ng-polymorpheus';
 import { Observable } from 'rxjs';
@@ -6,7 +6,7 @@ export interface TuiDropdown<C = object> {
     refresh$: Observable<any>;
     clientRect: ClientRect;
     content: PolymorpheusContent;
-    host: HTMLElement;
+    host: TuiNativeFocusableElement | HTMLElement;
     align: TuiHorizontalDirection;
     minHeight: number;
     maxHeight: number;

package/modules/notifications/notification-alert/notification-alert.component.d.ts

@@ -1,15 +1,14 @@
 import { ElementRef, OnInit } from '@angular/core';
 import { TuiDestroyService } from '@taiga-ui/cdk';
-import { NotificationTokenOptions } from '@taiga-ui/core/tokens';
+import { TuiNotificationDefaultOptions } from '@taiga-ui/core/tokens';
 import { TuiNotificationContentContext } from '../notification-content-context';
 import { NotificationAlert } from './Notification-alert';
-export declare const DEFAULT_ALERT_AUTOCLOSE_TIMEOUT = 3000;
 export declare class TuiNotificationAlertComponent<O, I> implements OnInit {
     private readonly elementRef;
     private readonly destroy$;
-    readonly options: NotificationTokenOptions;
+    readonly options: TuiNotificationDefaultOptions;
     item: NotificationAlert<O, I>;
-    constructor(elementRef: ElementRef<HTMLElement>, destroy$: TuiDestroyService, options: NotificationTokenOptions);
+    constructor(elementRef: ElementRef<HTMLElement>, destroy$: TuiDestroyService, options: TuiNotificationDefaultOptions);
     ngOnInit(): void;
     get context(): TuiNotificationContentContext<O, I>;
     closeNotification(): void;

package/modules/notifications/notifications.service.d.ts

@@ -1,14 +1,14 @@
 import { TuiNotificationOptions, TuiNotificationOptionsWithData } from '@taiga-ui/core/interfaces';
-import { NotificationTokenOptions } from '@taiga-ui/core/tokens';
+import { TuiNotificationDefaultOptions } from '@taiga-ui/core/tokens';
 import { PolymorpheusContent } from '@tinkoff/ng-polymorpheus';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { NotificationAlert } from './notification-alert/Notification-alert';
 import { TuiNotificationContentContext } from './notification-content-context';
 export declare class TuiNotificationsService {
-    readonly options: NotificationTokenOptions;
+    readonly options: TuiNotificationDefaultOptions;
     /** @internal */
     readonly items$: BehaviorSubject<readonly NotificationAlert<any, any>[]>;
-    constructor(options: NotificationTokenOptions);
+    constructor(options: TuiNotificationDefaultOptions);
     show<O = void>(content: PolymorpheusContent<TuiNotificationContentContext<O>>): Observable<O>;
     show<O = void>(content: PolymorpheusContent<TuiNotificationContentContext<O>>, options: TuiNotificationOptions): Observable<O>;
     show<O, I>(content: PolymorpheusContent<TuiNotificationContentContext<O, I>>, options: TuiNotificationOptionsWithData<I>): Observable<O>;

package/modules/notifications/taiga-ui-core-modules-notifications.metadata.json

@@ -1 +1 @@
-{"__symbolic":"module","version":4,"metadata":{"NotificationAlert":{"__symbolic":"class","arity":2,"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"Observer","module":"rxjs","arguments":[{"__symbolic":"error","message":"Could not resolve type","line":26,"character":36,"context":{"typeName":"O"},"module":"./notification-alert/Notification-alert"}]},{"__symbolic":"reference","name":"PolymorpheusContent","module":"@tinkoff/ng-polymorpheus","arguments":[{"__symbolic":"reference","name":"TuiNotificationContentContext"}]},{"__symbolic":"error","message":"Could not resolve type","line":28,"character":34,"context":{"typeName":"Required"},"module":"./notification-alert/Notification-alert"}]}],"withData":[{"__symbolic":"method"}]}},"DEFAULT_ALERT_AUTOCLOSE_TIMEOUT":3000,"TuiNotificationAlertComponent":{"__symbolic":"class","arity":2,"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":18,"character":1},"arguments":[{"selector":"tui-notification-alert","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":20,"character":21},"member":"OnPush"},"providers":[{"__symbolic":"reference","module":"@taiga-ui/cdk","name":"TuiDestroyService","line":23,"character":16}],"template":"<tui-notification\n    *ngIf=\"item.hasCloseButton; else noClose\"\n    [status]=\"item.status\"\n    [hasIcon]=\"item.hasIcon\"\n    (close)=\"closeNotification()\"\n>\n    <label\n        *ngIf=\"item.label\"\n        polymorpheus-outlet\n        automation-id=\"tui-notification-alert__heading\"\n        class=\"heading\"\n        [content]=\"item.label\"\n        [context]=\"context\"\n    ></label>\n    <div\n        polymorpheus-outlet\n        automation-id=\"tui-notification-alert__content\"\n        class=\"content\"\n        [content]=\"item.content\"\n        [context]=\"context\"\n    ></div>\n</tui-notification>\n<ng-template #noClose>\n    <tui-notification [status]=\"item.status\" [hasIcon]=\"item.hasIcon\">\n        <label\n            *ngIf=\"item.label\"\n            polymorpheus-outlet\n            automation-id=\"tui-notification-alert__heading\"\n            class=\"heading\"\n            [content]=\"item.label\"\n            [context]=\"context\"\n        ></label>\n        <div\n            polymorpheus-outlet\n            automation-id=\"tui-notification-alert__content\"\n            class=\"content\"\n            [content]=\"item.content\"\n            [context]=\"context\"\n        ></div>\n    </tui-notification>\n</ng-template>\n","styles":[":host{box-shadow:0 .5rem 1rem rgba(0,0,0,.16);display:block;border-radius:var(--tui-radius-m)}.heading{font:var(--tui-font-text-m);line-height:1.25rem;font-weight:700;margin:0}.content{color:var(--tui-text-01);word-wrap:break-word}.content:empty{display:none}"]}]}],"members":{"item":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":30,"character":9},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":30,"character":16}]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":31,"character":9},"arguments":[{"__symbolic":"reference","module":"@taiga-ui/cdk","name":"TuiDestroyService","line":31,"character":16}]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":32,"character":9},"arguments":[{"__symbolic":"reference","module":"@taiga-ui/core/tokens","name":"TUI_NOTIFICATION_OPTIONS","line":32,"character":16}]}]],"parameters":[{"__symbolic":"reference","name":"ElementRef","module":"@angular/core","arguments":[{"__symbolic":"error","message":"Could not resolve type","line":30,"character":68,"context":{"typeName":"HTMLElement"},"module":"./notification-alert/notification-alert.component"}]},{"__symbolic":"reference","module":"@taiga-ui/cdk","name":"TuiDestroyService","line":31,"character":62},{"__symbolic":"reference","module":"@taiga-ui/core/tokens","name":"NotificationTokenOptions","line":33,"character":26}]}],"ngOnInit":[{"__symbolic":"method"}],"closeNotification":[{"__symbolic":"method"}],"calculateContext":[{"__symbolic":"method","decorators":[{"__symbolic":"reference","module":"@taiga-ui/cdk","name":"tuiPure","line":48,"character":5}]}],"initAutoClose":[{"__symbolic":"method"}]}},"TuiNotificationAlertModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":7,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":8,"character":14},{"__symbolic":"reference","module":"@tinkoff/ng-polymorpheus","name":"PolymorpheusModule","line":8,"character":28},{"__symbolic":"reference","module":"@taiga-ui/core/components/notification","name":"TuiNotificationModule","line":8,"character":48}],"declarations":[{"__symbolic":"reference","name":"TuiNotificationAlertComponent"}],"exports":[{"__symbolic":"reference","name":"TuiNotificationAlertComponent"}]}]}],"members":{}},"TuiNotificationContentContext":{"__symbolic":"interface"},"NOTIFICATIONS_HOST":{"__symbolic":"reference","name":"TuiNotificationsHostComponent"},"TuiNotificationsModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":10,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":11,"character":14},{"__symbolic":"reference","name":"TuiNotificationAlertModule"},{"__symbolic":"reference","module":"@taiga-ui/cdk","name":"TuiLetModule","line":11,"character":56}],"declarations":[{"__symbolic":"reference","name":"TuiNotificationsHostComponent"}],"exports":[{"__symbolic":"reference","name":"TuiNotificationsHostComponent"}],"entryComponents":[{"__symbolic":"reference","name":"TuiNotificationsHostComponent"}],"providers":[{"provide":{"__symbolic":"reference","name":"TuiNotificationsHostComponent"},"useValue":{"__symbolic":"reference","name":"NOTIFICATIONS_HOST"}}]}]}],"members":{}},"TuiNotificationsService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":16,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":24,"character":9},"arguments":[{"__symbolic":"reference","module":"@taiga-ui/core/tokens","name":"TUI_NOTIFICATION_OPTIONS","line":24,"character":16}]}]],"parameters":[{"__symbolic":"reference","module":"@taiga-ui/core/tokens","name":"NotificationTokenOptions","line":25,"character":26}]}],"show":[{"__symbolic":"method"},{"__symbolic":"method"},{"__symbolic":"method"},{"__symbolic":"method"}]},"statics":{"ɵprov":{}}},"TuiNotificationsHostComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":13,"character":1},"arguments":[{"selector":"tui-notifications-host","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":15,"character":21},"member":"OnPush"},"animations":[{"__symbolic":"reference","module":"@taiga-ui/core/animations","name":"tuiFadeInList","line":18,"character":17},{"__symbolic":"reference","module":"@taiga-ui/core/animations","name":"tuiSlideInRightList","line":18,"character":32},{"__symbolic":"reference","module":"@taiga-ui/core/animations","name":"tuiHeightCollapseList","line":18,"character":53}],"template":"<ng-container *tuiLet=\"service.items$ | async as items\">\n    <div\n        *ngIf=\"items.length\"\n        class=\"wrapper\"\n        [@tuiFadeInList]=\"getAnimation(items.length)\"\n        [@tuiHeightCollapseList]=\"getAnimation(items.length)\"\n        [@tuiSlideInRightList]=\"getAnimation(items.length)\"\n    >\n        <tui-notification-alert\n            *ngFor=\"let item of items\"\n            role=\"alert\"\n            class=\"alert\"\n            [item]=\"item\"\n        ></tui-notification-alert>\n    </div>\n</ng-container>\n","styles":[":host{position:fixed;top:0;left:0;width:100%;height:0}.wrapper{width:18rem;margin-left:auto;padding:2rem 3rem 0 0;pointer-events:none}:host-context(tui-root._mobile) .wrapper{padding:1rem 1rem 0 0}@media screen and (min-width:80em){.wrapper{width:23rem}}.alert{pointer-events:auto}.alert:not(:first-child){margin-top:.75rem}"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":22,"character":9},"arguments":[{"__symbolic":"reference","module":"@taiga-ui/core/tokens","name":"TUI_ANIMATION_OPTIONS","line":22,"character":16}]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":23,"character":9},"arguments":[{"__symbolic":"reference","name":"TuiNotificationsService"}]}]],"parameters":[{"__symbolic":"reference","module":"@angular/animations","name":"AnimationOptions","line":22,"character":65},{"__symbolic":"reference","name":"TuiNotificationsService"}]}],"getAnimation":[{"__symbolic":"method","decorators":[{"__symbolic":"reference","module":"@taiga-ui/cdk","name":"tuiPure","line":26,"character":5}]}]}}},"origins":{"NotificationAlert":"./notification-alert/Notification-alert","DEFAULT_ALERT_AUTOCLOSE_TIMEOUT":"./notification-alert/notification-alert.component","TuiNotificationAlertComponent":"./notification-alert/notification-alert.component","TuiNotificationAlertModule":"./notification-alert/notification-alert.module","TuiNotificationContentContext":"./notification-content-context","NOTIFICATIONS_HOST":"./notifications-host/notifications-host.component","TuiNotificationsModule":"./notifications.module","TuiNotificationsService":"./notifications.service","TuiNotificationsHostComponent":"./notifications-host/notifications-host.component"},"importAs":"@taiga-ui/core/modules/notifications"}
+{"__symbolic":"module","version":4,"metadata":{"NotificationAlert":{"__symbolic":"class","arity":2,"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"Observer","module":"rxjs","arguments":[{"__symbolic":"error","message":"Could not resolve type","line":26,"character":36,"context":{"typeName":"O"},"module":"./notification-alert/Notification-alert"}]},{"__symbolic":"reference","name":"PolymorpheusContent","module":"@tinkoff/ng-polymorpheus","arguments":[{"__symbolic":"reference","name":"TuiNotificationContentContext"}]},{"__symbolic":"error","message":"Could not resolve type","line":28,"character":34,"context":{"typeName":"Required"},"module":"./notification-alert/Notification-alert"}]}],"withData":[{"__symbolic":"method"}]}},"TuiNotificationAlertComponent":{"__symbolic":"class","arity":2,"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":19,"character":1},"arguments":[{"selector":"tui-notification-alert","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":23,"character":21},"member":"OnPush"},"providers":[{"__symbolic":"reference","module":"@taiga-ui/cdk","name":"TuiDestroyService","line":24,"character":16}],"template":"<tui-notification\n    *ngIf=\"item.hasCloseButton; else noClose\"\n    [status]=\"item.status\"\n    [hasIcon]=\"item.hasIcon\"\n    (close)=\"closeNotification()\"\n>\n    <label\n        *ngIf=\"item.label\"\n        polymorpheus-outlet\n        automation-id=\"tui-notification-alert__heading\"\n        class=\"heading\"\n        [content]=\"item.label\"\n        [context]=\"context\"\n    ></label>\n    <div\n        polymorpheus-outlet\n        automation-id=\"tui-notification-alert__content\"\n        class=\"content\"\n        [content]=\"item.content\"\n        [context]=\"context\"\n    ></div>\n</tui-notification>\n<ng-template #noClose>\n    <tui-notification [status]=\"item.status\" [hasIcon]=\"item.hasIcon\">\n        <label\n            *ngIf=\"item.label\"\n            polymorpheus-outlet\n            automation-id=\"tui-notification-alert__heading\"\n            class=\"heading\"\n            [content]=\"item.label\"\n            [context]=\"context\"\n        ></label>\n        <div\n            polymorpheus-outlet\n            automation-id=\"tui-notification-alert__content\"\n            class=\"content\"\n            [content]=\"item.content\"\n            [context]=\"context\"\n        ></div>\n    </tui-notification>\n</ng-template>\n","styles":[":host{box-shadow:0 .5rem 1rem rgba(0,0,0,.16);display:block;border-radius:var(--tui-radius-m)}.heading{font:var(--tui-font-text-m);line-height:1.25rem;font-weight:700;margin:0}.content{color:var(--tui-text-01);word-wrap:break-word}.content:empty{display:none}"]}]}],"members":{"item":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":31,"character":9},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":31,"character":16}]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":32,"character":9},"arguments":[{"__symbolic":"reference","module":"@taiga-ui/cdk","name":"TuiDestroyService","line":32,"character":16}]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":33,"character":9},"arguments":[{"__symbolic":"reference","module":"@taiga-ui/core/tokens","name":"TUI_NOTIFICATION_OPTIONS","line":33,"character":16}]}]],"parameters":[{"__symbolic":"reference","name":"ElementRef","module":"@angular/core","arguments":[{"__symbolic":"error","message":"Could not resolve type","line":31,"character":68,"context":{"typeName":"HTMLElement"},"module":"./notification-alert/notification-alert.component"}]},{"__symbolic":"reference","module":"@taiga-ui/cdk","name":"TuiDestroyService","line":32,"character":62},{"__symbolic":"reference","module":"@taiga-ui/core/tokens","name":"TuiNotificationDefaultOptions","line":34,"character":26}]}],"ngOnInit":[{"__symbolic":"method"}],"closeNotification":[{"__symbolic":"method"}],"calculateContext":[{"__symbolic":"method","decorators":[{"__symbolic":"reference","module":"@taiga-ui/cdk","name":"tuiPure","line":49,"character":5}]}],"initAutoClose":[{"__symbolic":"method"}]}},"TuiNotificationAlertModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":7,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":8,"character":14},{"__symbolic":"reference","module":"@tinkoff/ng-polymorpheus","name":"PolymorpheusModule","line":8,"character":28},{"__symbolic":"reference","module":"@taiga-ui/core/components/notification","name":"TuiNotificationModule","line":8,"character":48}],"declarations":[{"__symbolic":"reference","name":"TuiNotificationAlertComponent"}],"exports":[{"__symbolic":"reference","name":"TuiNotificationAlertComponent"}]}]}],"members":{}},"TuiNotificationContentContext":{"__symbolic":"interface"},"NOTIFICATIONS_HOST":{"__symbolic":"reference","name":"TuiNotificationsHostComponent"},"TuiNotificationsModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":10,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":11,"character":14},{"__symbolic":"reference","name":"TuiNotificationAlertModule"},{"__symbolic":"reference","module":"@taiga-ui/cdk","name":"TuiLetModule","line":11,"character":56}],"declarations":[{"__symbolic":"reference","name":"TuiNotificationsHostComponent"}],"exports":[{"__symbolic":"reference","name":"TuiNotificationsHostComponent"}],"entryComponents":[{"__symbolic":"reference","name":"TuiNotificationsHostComponent"}],"providers":[{"provide":{"__symbolic":"reference","name":"TuiNotificationsHostComponent"},"useValue":{"__symbolic":"reference","name":"NOTIFICATIONS_HOST"}}]}]}],"members":{}},"TuiNotificationsService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":19,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":27,"character":9},"arguments":[{"__symbolic":"reference","module":"@taiga-ui/core/tokens","name":"TUI_NOTIFICATION_OPTIONS","line":27,"character":16}]}]],"parameters":[{"__symbolic":"reference","module":"@taiga-ui/core/tokens","name":"TuiNotificationDefaultOptions","line":28,"character":26}]}],"show":[{"__symbolic":"method"},{"__symbolic":"method"},{"__symbolic":"method"},{"__symbolic":"method"}]},"statics":{"ɵprov":{}}},"TuiNotificationsHostComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":13,"character":1},"arguments":[{"selector":"tui-notifications-host","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":17,"character":21},"member":"OnPush"},"animations":[{"__symbolic":"reference","module":"@taiga-ui/core/animations","name":"tuiFadeInList","line":18,"character":17},{"__symbolic":"reference","module":"@taiga-ui/core/animations","name":"tuiSlideInRightList","line":18,"character":32},{"__symbolic":"reference","module":"@taiga-ui/core/animations","name":"tuiHeightCollapseList","line":18,"character":53}],"template":"<ng-container *tuiLet=\"service.items$ | async as items\">\n    <div\n        *ngIf=\"items.length\"\n        class=\"t-wrapper\"\n        [@tuiFadeInList]=\"getAnimation(items.length)\"\n        [@tuiHeightCollapseList]=\"getAnimation(items.length)\"\n        [@tuiSlideInRightList]=\"getAnimation(items.length)\"\n    >\n        <tui-notification-alert\n            *ngFor=\"let item of items\"\n            role=\"alert\"\n            class=\"t-alert\"\n            [item]=\"item\"\n        ></tui-notification-alert>\n    </div>\n</ng-container>\n","styles":[":host{position:fixed;top:0;left:0;width:100%;height:0}.t-wrapper{width:18rem;margin-left:auto;padding:2rem 3rem 0 0;pointer-events:none}:host-context(tui-root._mobile) .t-wrapper{padding:1rem 1rem 0 0}@media screen and (min-width:80em){.t-wrapper{width:23rem}}.t-alert{pointer-events:auto}.t-alert:not(:first-child){margin-top:.75rem}"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":22,"character":9},"arguments":[{"__symbolic":"reference","module":"@taiga-ui/core/tokens","name":"TUI_ANIMATION_OPTIONS","line":22,"character":16}]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":23,"character":9},"arguments":[{"__symbolic":"reference","name":"TuiNotificationsService"}]}]],"parameters":[{"__symbolic":"reference","module":"@angular/animations","name":"AnimationOptions","line":22,"character":65},{"__symbolic":"reference","name":"TuiNotificationsService"}]}],"getAnimation":[{"__symbolic":"method","decorators":[{"__symbolic":"reference","module":"@taiga-ui/cdk","name":"tuiPure","line":26,"character":5}]}]}}},"origins":{"NotificationAlert":"./notification-alert/Notification-alert","TuiNotificationAlertComponent":"./notification-alert/notification-alert.component","TuiNotificationAlertModule":"./notification-alert/notification-alert.module","TuiNotificationContentContext":"./notification-content-context","NOTIFICATIONS_HOST":"./notifications-host/notifications-host.component","TuiNotificationsModule":"./notifications.module","TuiNotificationsService":"./notifications.service","TuiNotificationsHostComponent":"./notifications-host/notifications-host.component"},"importAs":"@taiga-ui/core/modules/notifications"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@taiga-ui/core",
-  "version": "2.36.0",
+  "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.36.0",
+    "@taiga-ui/i18n": "^2.38.0",
     "tslib": "^1.10.0"
   },
   "peerDependencies": {
-    "@taiga-ui/i18n": ">=2.36.0",
-    "@taiga-ui/cdk": ">=2.36.0",
+    "@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/markup/tui-group.less

@@ -1,3 +1,5 @@
+@import '../taiga-ui-local.less';
+
 .tui-group {
     .createStackingContext();
     display: flex;
@@ -189,7 +191,7 @@
                     }
 
                     &:not(:last-child) {
-                        margin-bottom: @space * 4;
+                        margin-bottom: 1rem;
                     }
                 }
 
@@ -227,7 +229,7 @@
 
                     &:not(:last-child) {
                         margin-right: 0;
-                        margin-bottom: @space * 4;
+                        margin-bottom: 1rem;
                     }
                 }
 

package/styles/mixins/slider.less

@@ -0,0 +1,33 @@
+@thumb-diameters: {
+    @s: 0.5rem;
+    @m: 1rem;
+};
+
+.tui-slider-ticks-labels(@input-size: m) {
+    @first-tick-center: @thumb-diameters[ @@input-size] / 2;
+    display: flex;
+    margin: 0 @first-tick-center;
+    font: var(--tui-font-text-s);
+
+    & > * {
+        position: relative;
+        flex: 2;
+        text-align: center;
+
+        &:first-child {
+            left: -@first-tick-center;
+            flex: 1;
+            text-align: left;
+        }
+
+        &:last-child {
+            right: -@first-tick-center;
+            flex: 1;
+            text-align: right;
+        }
+    }
+
+    tui-input-slider + & {
+        margin-left: calc(var(--tui-radius-m) / 2 + @first-tick-center);
+    }
+}

package/styles/mixins/slider.scss

@@ -0,0 +1,34 @@
+$thumb-diameters: (
+    's': 0.5rem,
+    'm': 1rem,
+);
+
+@mixin tui-slider-ticks-labels($input-size: m) {
+    $first-tick-center: map-get($thumb-diameters, $input-size) / 2;
+
+    display: flex;
+    margin: 0 $first-tick-center;
+    font: var(--tui-font-text-s);
+
+    & > * {
+        position: relative;
+        flex: 2;
+        text-align: center;
+
+        &:first-child {
+            left: -$first-tick-center;
+            flex: 1;
+            text-align: left;
+        }
+
+        &:last-child {
+            right: -$first-tick-center;
+            flex: 1;
+            text-align: right;
+        }
+    }
+
+    tui-input-slider + & {
+        margin-left: calc(var(--tui-radius-m) / 2 + #{$first-tick-center});
+    }
+}

package/styles/mixins/textfield.less

@@ -1,3 +1,5 @@
+@line-height-l: 1.25rem;
+
 .textfield-host() {
     .text-basic();
     position: relative;
@@ -21,7 +23,8 @@
         height: var(--tui-height-l);
         min-height: var(--tui-height-l);
         max-height: var(--tui-height-l);
-        font-size: 0.9375rem;
+        font: var(--tui-font-text-m);
+        line-height: @line-height-l;
     }
 }
 
@@ -96,7 +99,7 @@
 
     :host[data-size='l']:not(._label-outside) &,
     :host-context(tui-primitive-textfield[data-size='l']:not(._label-outside)):not(tui-primitive-textfield) {
-        padding-top: 1.25rem;
+        padding-top: @line-height-l;
 
         // Workaround for raising placeholder in temporary autofill
         &:-webkit-autofill + .content .placeholder {
@@ -138,7 +141,6 @@
     .text-overflow();
     display: block;
     width: 100%;
-    font-size: 0.8125rem;
     user-select: none;
     color: var(--tui-text-02);
     pointer-events: none;
@@ -147,18 +149,18 @@
         transform: translateY(-0.625rem);
 
         :host[data-size='m'] & {
-            font-size: 0.69rem;
+            font: var(--tui-font-text-xs);
             transform: translateY(-0.5rem);
             letter-spacing: 0.025rem;
         }
 
         :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

@@ -2,6 +2,8 @@
 
 @import 'mixins/mixins.less';
 @import 'mixins/picker.less';
+@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

@@ -2,6 +2,8 @@ $space: 4px;
 
 @import 'mixins/mixins.scss';
 @import 'mixins/picker.scss';
+@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;
+    });
 }