@taiga-ui/core 3.2.0 → 3.3.0

package/bundles/taiga-ui-core-components-root.umd.js

@@ -377,7 +377,7 @@
         return TuiRootComponent;
     }());
     TuiRootComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiRootComponent, deps: [{ token: tokens.TUI_ANIMATIONS_DURATION }, { token: i0.ElementRef }, { token: i3.TUI_DIALOGS }, { token: i3.TUI_IS_MOBILE }, { token: tokens.TUI_ASSERT_ENABLED }, { token: tokens.TUI_IS_MOBILE_RES }, { token: i5.DOCUMENT }, { token: tokens.TUI_THEME }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TuiRootComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TuiRootComponent, selector: "tui-root", host: { attributes: { "data-tui-version": "3.2.0" }, listeners: { "$.class._mobile": "isMobileRes$" }, properties: { "style.--tui-duration": "duration + \"ms\"" } }, providers: [providers.TUI_IS_MOBILE_RES_PROVIDER], ngImport: i0__namespace, template: "<tui-scroll-controls\n    *ngIf=\"scrollbars$ | async\"\n    class=\"t-scrollbar\"\n></tui-scroll-controls>\n<tui-svg-defs-host></tui-svg-defs-host>\n<tui-dropdown-host>\n    <div class=\"t-content\">\n        <ng-content></ng-content>\n    </div>\n    <ng-content select=\"tuiOverContent\"></ng-content>\n    <tui-dialog-host></tui-dialog-host>\n    <ng-content select=\"tuiOverDialogs\"></ng-content>\n    <tui-alert-host></tui-alert-host>\n    <ng-content select=\"tuiOverAlerts\"></ng-content>\n</tui-dropdown-host>\n<ng-content select=\"tuiOverPortals\"></ng-content>\n<tui-hints-host></tui-hints-host>\n<ng-content select=\"tuiOverHints\"></ng-content>\n", styles: ["@-webkit-keyframes tuiPresent{to{content:\"1\"}}@keyframes tuiPresent{to{content:\"1\"}}:host{position:relative;display:block;flex:1;-webkit-tap-highlight-color:transparent}.t-scrollbar{position:fixed;top:0;left:0;bottom:0;right:0;margin:0}.t-content{position:relative;z-index:0;height:100%}\n"], components: [{ type: i1__namespace.TuiScrollControlsComponent, selector: "tui-scroll-controls" }, { type: i2__namespace.TuiSvgDefsHostComponent, selector: "tui-svg-defs-host" }, { type: i3__namespace.TuiDropdownHostComponent, selector: "tui-dropdown-host" }, { type: i3__namespace.TuiDialogHostComponent, selector: "tui-dialog-host" }, { type: i3__namespace.TuiAlertHostComponent, selector: "tui-alert-host" }, { type: i4__namespace.TuiHintsHostComponent, selector: "tui-hints-host" }], directives: [{ type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i5__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    TuiRootComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TuiRootComponent, selector: "tui-root", host: { attributes: { "data-tui-version": "3.3.0" }, listeners: { "$.class._mobile": "isMobileRes$" }, properties: { "style.--tui-duration": "duration + \"ms\"" } }, providers: [providers.TUI_IS_MOBILE_RES_PROVIDER], ngImport: i0__namespace, template: "<tui-scroll-controls\n    *ngIf=\"scrollbars$ | async\"\n    class=\"t-scrollbar\"\n></tui-scroll-controls>\n<tui-svg-defs-host></tui-svg-defs-host>\n<tui-dropdown-host>\n    <div class=\"t-content\">\n        <ng-content></ng-content>\n    </div>\n    <ng-content select=\"tuiOverContent\"></ng-content>\n    <tui-dialog-host></tui-dialog-host>\n    <ng-content select=\"tuiOverDialogs\"></ng-content>\n    <tui-alert-host></tui-alert-host>\n    <ng-content select=\"tuiOverAlerts\"></ng-content>\n</tui-dropdown-host>\n<ng-content select=\"tuiOverPortals\"></ng-content>\n<tui-hints-host></tui-hints-host>\n<ng-content select=\"tuiOverHints\"></ng-content>\n", styles: ["@-webkit-keyframes tuiPresent{to{content:\"1\"}}@keyframes tuiPresent{to{content:\"1\"}}:host{position:relative;display:block;flex:1;-webkit-tap-highlight-color:transparent}.t-scrollbar{position:fixed;top:0;left:0;bottom:0;right:0;margin:0}.t-content{position:relative;z-index:0;height:100%}\n"], components: [{ type: i1__namespace.TuiScrollControlsComponent, selector: "tui-scroll-controls" }, { type: i2__namespace.TuiSvgDefsHostComponent, selector: "tui-svg-defs-host" }, { type: i3__namespace.TuiDropdownHostComponent, selector: "tui-dropdown-host" }, { type: i3__namespace.TuiDialogHostComponent, selector: "tui-dialog-host" }, { type: i3__namespace.TuiAlertHostComponent, selector: "tui-alert-host" }, { type: i4__namespace.TuiHintsHostComponent, selector: "tui-hints-host" }], directives: [{ type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i5__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiRootComponent, decorators: [{
                 type: i0.Component,
                 args: [{

package/esm2015/components/root/root.component.js

@@ -27,7 +27,7 @@ export class TuiRootComponent {
     }
 }
 TuiRootComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiRootComponent, deps: [{ token: TUI_ANIMATIONS_DURATION }, { token: ElementRef }, { token: TUI_DIALOGS }, { token: TUI_IS_MOBILE }, { token: TUI_ASSERT_ENABLED }, { token: TUI_IS_MOBILE_RES }, { token: DOCUMENT }, { token: TUI_THEME }], target: i0.ɵɵFactoryTarget.Component });
-TuiRootComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TuiRootComponent, selector: "tui-root", host: { attributes: { "data-tui-version": "3.2.0" }, listeners: { "$.class._mobile": "isMobileRes$" }, properties: { "style.--tui-duration": "duration + \"ms\"" } }, providers: [TUI_IS_MOBILE_RES_PROVIDER], ngImport: i0, template: "<tui-scroll-controls\n    *ngIf=\"scrollbars$ | async\"\n    class=\"t-scrollbar\"\n></tui-scroll-controls>\n<tui-svg-defs-host></tui-svg-defs-host>\n<tui-dropdown-host>\n    <div class=\"t-content\">\n        <ng-content></ng-content>\n    </div>\n    <ng-content select=\"tuiOverContent\"></ng-content>\n    <tui-dialog-host></tui-dialog-host>\n    <ng-content select=\"tuiOverDialogs\"></ng-content>\n    <tui-alert-host></tui-alert-host>\n    <ng-content select=\"tuiOverAlerts\"></ng-content>\n</tui-dropdown-host>\n<ng-content select=\"tuiOverPortals\"></ng-content>\n<tui-hints-host></tui-hints-host>\n<ng-content select=\"tuiOverHints\"></ng-content>\n", styles: ["@-webkit-keyframes tuiPresent{to{content:\"1\"}}@keyframes tuiPresent{to{content:\"1\"}}:host{position:relative;display:block;flex:1;-webkit-tap-highlight-color:transparent}.t-scrollbar{position:fixed;top:0;left:0;bottom:0;right:0;margin:0}.t-content{position:relative;z-index:0;height:100%}\n"], components: [{ type: i1.TuiScrollControlsComponent, selector: "tui-scroll-controls" }, { type: i2.TuiSvgDefsHostComponent, selector: "tui-svg-defs-host" }, { type: i3.TuiDropdownHostComponent, selector: "tui-dropdown-host" }, { type: i3.TuiDialogHostComponent, selector: "tui-dialog-host" }, { type: i3.TuiAlertHostComponent, selector: "tui-alert-host" }, { type: i4.TuiHintsHostComponent, selector: "tui-hints-host" }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i5.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TuiRootComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TuiRootComponent, selector: "tui-root", host: { attributes: { "data-tui-version": "3.3.0" }, listeners: { "$.class._mobile": "isMobileRes$" }, properties: { "style.--tui-duration": "duration + \"ms\"" } }, providers: [TUI_IS_MOBILE_RES_PROVIDER], ngImport: i0, template: "<tui-scroll-controls\n    *ngIf=\"scrollbars$ | async\"\n    class=\"t-scrollbar\"\n></tui-scroll-controls>\n<tui-svg-defs-host></tui-svg-defs-host>\n<tui-dropdown-host>\n    <div class=\"t-content\">\n        <ng-content></ng-content>\n    </div>\n    <ng-content select=\"tuiOverContent\"></ng-content>\n    <tui-dialog-host></tui-dialog-host>\n    <ng-content select=\"tuiOverDialogs\"></ng-content>\n    <tui-alert-host></tui-alert-host>\n    <ng-content select=\"tuiOverAlerts\"></ng-content>\n</tui-dropdown-host>\n<ng-content select=\"tuiOverPortals\"></ng-content>\n<tui-hints-host></tui-hints-host>\n<ng-content select=\"tuiOverHints\"></ng-content>\n", styles: ["@-webkit-keyframes tuiPresent{to{content:\"1\"}}@keyframes tuiPresent{to{content:\"1\"}}:host{position:relative;display:block;flex:1;-webkit-tap-highlight-color:transparent}.t-scrollbar{position:fixed;top:0;left:0;bottom:0;right:0;margin:0}.t-content{position:relative;z-index:0;height:100%}\n"], components: [{ type: i1.TuiScrollControlsComponent, selector: "tui-scroll-controls" }, { type: i2.TuiSvgDefsHostComponent, selector: "tui-svg-defs-host" }, { type: i3.TuiDropdownHostComponent, selector: "tui-dropdown-host" }, { type: i3.TuiDialogHostComponent, selector: "tui-dialog-host" }, { type: i3.TuiAlertHostComponent, selector: "tui-alert-host" }, { type: i4.TuiHintsHostComponent, selector: "tui-hints-host" }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i5.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiRootComponent, decorators: [{
             type: Component,
             args: [{

package/fesm2015/taiga-ui-core-components-root.js

@@ -32,7 +32,7 @@ class TuiRootComponent {
     }
 }
 TuiRootComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiRootComponent, deps: [{ token: TUI_ANIMATIONS_DURATION }, { token: ElementRef }, { token: TUI_DIALOGS }, { token: TUI_IS_MOBILE }, { token: TUI_ASSERT_ENABLED }, { token: TUI_IS_MOBILE_RES }, { token: DOCUMENT }, { token: TUI_THEME }], target: i0.ɵɵFactoryTarget.Component });
-TuiRootComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TuiRootComponent, selector: "tui-root", host: { attributes: { "data-tui-version": "3.2.0" }, listeners: { "$.class._mobile": "isMobileRes$" }, properties: { "style.--tui-duration": "duration + \"ms\"" } }, providers: [TUI_IS_MOBILE_RES_PROVIDER], ngImport: i0, template: "<tui-scroll-controls\n    *ngIf=\"scrollbars$ | async\"\n    class=\"t-scrollbar\"\n></tui-scroll-controls>\n<tui-svg-defs-host></tui-svg-defs-host>\n<tui-dropdown-host>\n    <div class=\"t-content\">\n        <ng-content></ng-content>\n    </div>\n    <ng-content select=\"tuiOverContent\"></ng-content>\n    <tui-dialog-host></tui-dialog-host>\n    <ng-content select=\"tuiOverDialogs\"></ng-content>\n    <tui-alert-host></tui-alert-host>\n    <ng-content select=\"tuiOverAlerts\"></ng-content>\n</tui-dropdown-host>\n<ng-content select=\"tuiOverPortals\"></ng-content>\n<tui-hints-host></tui-hints-host>\n<ng-content select=\"tuiOverHints\"></ng-content>\n", styles: ["@-webkit-keyframes tuiPresent{to{content:\"1\"}}@keyframes tuiPresent{to{content:\"1\"}}:host{position:relative;display:block;flex:1;-webkit-tap-highlight-color:transparent}.t-scrollbar{position:fixed;top:0;left:0;bottom:0;right:0;margin:0}.t-content{position:relative;z-index:0;height:100%}\n"], components: [{ type: i1.TuiScrollControlsComponent, selector: "tui-scroll-controls" }, { type: i2.TuiSvgDefsHostComponent, selector: "tui-svg-defs-host" }, { type: i3.TuiDropdownHostComponent, selector: "tui-dropdown-host" }, { type: i3.TuiDialogHostComponent, selector: "tui-dialog-host" }, { type: i3.TuiAlertHostComponent, selector: "tui-alert-host" }, { type: i4.TuiHintsHostComponent, selector: "tui-hints-host" }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i5.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TuiRootComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TuiRootComponent, selector: "tui-root", host: { attributes: { "data-tui-version": "3.3.0" }, listeners: { "$.class._mobile": "isMobileRes$" }, properties: { "style.--tui-duration": "duration + \"ms\"" } }, providers: [TUI_IS_MOBILE_RES_PROVIDER], ngImport: i0, template: "<tui-scroll-controls\n    *ngIf=\"scrollbars$ | async\"\n    class=\"t-scrollbar\"\n></tui-scroll-controls>\n<tui-svg-defs-host></tui-svg-defs-host>\n<tui-dropdown-host>\n    <div class=\"t-content\">\n        <ng-content></ng-content>\n    </div>\n    <ng-content select=\"tuiOverContent\"></ng-content>\n    <tui-dialog-host></tui-dialog-host>\n    <ng-content select=\"tuiOverDialogs\"></ng-content>\n    <tui-alert-host></tui-alert-host>\n    <ng-content select=\"tuiOverAlerts\"></ng-content>\n</tui-dropdown-host>\n<ng-content select=\"tuiOverPortals\"></ng-content>\n<tui-hints-host></tui-hints-host>\n<ng-content select=\"tuiOverHints\"></ng-content>\n", styles: ["@-webkit-keyframes tuiPresent{to{content:\"1\"}}@keyframes tuiPresent{to{content:\"1\"}}:host{position:relative;display:block;flex:1;-webkit-tap-highlight-color:transparent}.t-scrollbar{position:fixed;top:0;left:0;bottom:0;right:0;margin:0}.t-content{position:relative;z-index:0;height:100%}\n"], components: [{ type: i1.TuiScrollControlsComponent, selector: "tui-scroll-controls" }, { type: i2.TuiSvgDefsHostComponent, selector: "tui-svg-defs-host" }, { type: i3.TuiDropdownHostComponent, selector: "tui-dropdown-host" }, { type: i3.TuiDialogHostComponent, selector: "tui-dialog-host" }, { type: i3.TuiAlertHostComponent, selector: "tui-alert-host" }, { type: i4.TuiHintsHostComponent, selector: "tui-hints-host" }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i5.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiRootComponent, decorators: [{
             type: Component,
             args: [{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@taiga-ui/core",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "Core library for creating Angular components and applications using Taiga UI",
   "keywords": [
     "angular",
@@ -15,7 +15,7 @@
   "repository": "https://github.com/tinkoff/taiga-ui",
   "license": "Apache-2.0",
   "dependencies": {
-    "@taiga-ui/i18n": "^3.2.0",
+    "@taiga-ui/i18n": "^3.3.0",
     "tslib": "^2.0.0"
   },
   "peerDependencies": {
@@ -27,8 +27,8 @@
     "@angular/router": ">=9.0.0",
     "@ng-web-apis/common": ">=2.0.0",
     "@ng-web-apis/mutation-observer": ">=2.0.0",
-    "@taiga-ui/cdk": ">=3.2.0",
-    "@taiga-ui/i18n": ">=3.2.0",
+    "@taiga-ui/cdk": ">=3.3.0",
+    "@taiga-ui/i18n": ">=3.3.0",
     "@tinkoff/ng-event-plugins": ">=3.0.0",
     "@tinkoff/ng-polymorpheus": ">=4.0.0",
     "rxjs": ">=6.0.0"

package/styles/mixins/mixins.scss

@@ -53,8 +53,33 @@
     line-height: inherit;
 }
 
-@mixin clearinput() {
+@mixin autofill($mode: default) {
+    &:-webkit-autofill,
+    &:-webkit-autofill:hover,
+    &:-webkit-autofill:focus {
+        caret-color: var(--tui-base-09);
+        border-radius: inherit;
+        color: inherit !important;
+        background-color: transparent !important;
+
+        @if ($mode == default) {
+            -webkit-text-fill-color: var(--tui-text-01) !important;
+            border-color: var(--tui-autofill);
+            -webkit-box-shadow: 0 0 0 100rem var(--tui-autofill) inset !important; // to overlay native background
+        }
+
+        @if ($mode == dark) {
+            -webkit-text-fill-color: var(--tui-text-01-night) !important;
+            border-color: var(--tui-autofill-night);
+            -webkit-box-shadow: 0 0 0 100rem var(--tui-autofill-night) inset !important;
+        }
+    }
+}
+
+@mixin clearinput($mode: default) {
+    @include autofill($mode);
     padding: 0;
+    margin: 0;
     border: 0;
     border-radius: inherit;
     background: none;
@@ -67,16 +92,6 @@
     appearance: none;
     word-break: keep-all;
     -webkit-text-fill-color: currentColor; // for Safari
-
-    &:-webkit-autofill,
-    &:-webkit-autofill:hover,
-    &:-webkit-autofill:focus {
-        border-radius: inherit;
-        -webkit-text-fill-color: inherit !important;
-        color: inherit !important;
-        background-color: transparent !important;
-        -webkit-box-shadow: 0 0 0 1000px var(--tui-autofill) inset !important; // to overlay native background
-    }
 }
 
 @mixin visually-hidden() {
@@ -101,7 +116,7 @@
             height: 1rem;
             border-radius: 6.25rem;
             background-clip: padding-box;
-            border: 0.375rem solid transparent;
+            border: 2.667rem solid transparent;
         }
 
         &::-webkit-scrollbar {
@@ -131,12 +146,12 @@
 
     // Dropdown
     @if ($mode == 2) {
-        box-shadow: 0 0.5rem 1rem rgba(51, 51, 51, 0.2);
+        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.16);
     }
 
     // Modal
     @if ($mode == 3) {
-        box-shadow: 0 1.125rem 1.875rem rgba(51, 51, 51, 0.52);
+        box-shadow: 0 1.125rem 1.875rem rgba(0, 0, 0, 0.48);
     }
 
     // Sidebar
@@ -156,7 +171,7 @@
 
     // Modal mobile
     @if ($mode == 7) {
-        box-shadow: 0 -1rem 1.75rem rgba(51, 51, 51, 0.24);
+        box-shadow: 0 -1rem 1.75rem rgba(0, 0, 0, 0.24);
     }
 }
 
@@ -260,16 +275,16 @@
 }
 
 // typical properties for text overflow with ellipsis
-@mixin text-overflow() {
-    white-space: nowrap;
+@mixin text-overflow($type: nowrap) {
+    white-space: $type;
     overflow: hidden;
     text-overflow: ellipsis;
 }
 
 /* stylelint-disable selector-max-specificity */
 @mixin text-overflow-with-fade(
-    $color: rgba(255, 255, 255, 1),
-    $transparentColor: rgba(255, 255, 255, 0),
+    $color: var(--tui-base-01),
+    $transparentColor: transparent,
     $width: 1.875rem
 ) {
     position: relative;
@@ -357,6 +372,7 @@
 
 // hide an element visually without hiding it from screen readers
 @mixin sr-only() {
+    position: absolute;
     clip: rect(1px, 1px, 1px, 1px);
     clip-path: inset(50%);
     height: 1px;
@@ -364,5 +380,4 @@
     margin: -1px;
     overflow: hidden;
     padding: 0;
-    position: absolute;
 }

package/styles/mixins/picker.scss

@@ -1,20 +1,20 @@
 @mixin picker($itemSize) {
     :host {
-        @include text-body-m();
         display: block;
+        font: var(--tui-font-text-m);
     }
 
     .t-row {
         @include createStackingContext();
         display: flex;
         justify-content: space-between;
-        height: 36px;
+        height: 2.25rem;
     }
 
     .t-item {
         position: relative;
         flex: 1;
-        line-height: 32px;
+        line-height: 2rem;
         border-radius: var(--tui-radius-m);
 
         &:before,
@@ -57,10 +57,10 @@
         &_today:after {
             @include center-left();
             content: '';
-            bottom: 5px;
-            height: 2px;
-            width: 12px;
-            border-radius: 6px;
+            bottom: 0.3125rem;
+            height: 0.125rem;
+            width: 0.75rem;
+            border-radius: 0.375rem;
             background-color: var(--tui-text-02);
         }
 
@@ -123,25 +123,25 @@
 
         &[data-range='end'] > .t-item {
             &:before {
-                left: 4px;
+                left: 0.25rem;
             }
 
             &:after {
-                left: -32px;
+                left: -2rem;
                 right: 100%;
-                transform: translateX(23px) scaleY(0.6) scaleX(0.4) rotate(45deg);
+                transform: translateX(1.4375rem) scaleY(0.6) scaleX(0.4) rotate(45deg);
             }
         }
 
         &[data-range='start'] > .t-item {
             &:before {
-                right: 4px;
+                right: 0.25rem;
             }
 
             &:after {
                 left: 100%;
-                right: -32px;
-                transform: translateX(-23px) scaleY(0.6) scaleX(0.4) rotate(45deg);
+                right: -2rem;
+                transform: translateX(-1.4375rem) scaleY(0.6) scaleX(0.4) rotate(45deg);
             }
         }
 

package/styles/mixins/slider.scss

@@ -31,4 +31,21 @@ $thumb-diameters: (
     tui-input-slider + & {
         margin-left: calc(var(--tui-radius-m) / 2 + #{$first-tick-center});
     }
+
+    tui-input-range + &,
+    tui-range + & {
+        $thumb: map-get($thumb-diameters, $input-size);
+        margin-left: $thumb;
+        margin-right: $thumb;
+
+        & > * {
+            &:first-child {
+                left: -$thumb;
+            }
+
+            &:last-child {
+                right: -$thumb;
+            }
+        }
+    }
 }

package/styles/mixins/text.scss

@@ -3,6 +3,8 @@
     color: var(--tui-text-01);
 }
 
+// TODO: 4.0 delete all deprecations below
+
 // headings
 
 // deprecated

package/styles/mixins/textfield.scss

@@ -1,8 +1,11 @@
+$line-height-l: 1.25rem;
+
 @mixin textfield-host() {
     @include text-basic();
     position: relative;
     display: block;
     border-radius: var(--tui-radius-m);
+    text-align: left;
 
     &[data-size='s'] {
         height: var(--tui-height-s);
@@ -20,7 +23,8 @@
         height: var(--tui-height-l);
         min-height: var(--tui-height-l);
         max-height: var(--tui-height-l);
-        font-size: 15px;
+        font: var(--tui-font-text-m);
+        line-height: $line-height-l;
     }
 }
 
@@ -28,17 +32,26 @@
     display: flex;
     height: 100%;
     width: 100%;
-    padding: 0 12px;
+    padding: 0 var(--tui-padding-m);
     box-sizing: border-box;
     align-items: center;
     overflow: hidden;
 
     :host[data-size='s'] & {
-        padding-right: 8px;
+        padding: 0 var(--tui-padding-s);
     }
 
     :host[data-size='l'] & {
-        padding-left: 16px;
+        padding: 0 var(--tui-padding-l);
+    }
+
+    &:after {
+        content: '';
+        margin-right: -0.25rem;
+    }
+
+    :host[data-size='m'] &:after {
+        display: none;
     }
 }
 
@@ -46,75 +59,101 @@
     @include text-basic();
     @include clearinput();
     @include fullsize();
-    padding: 0 12px;
+    padding: 0 var(--tui-padding-m);
+    border: solid transparent;
+    border-width: 0 var(--border-end, 0) 0 var(--border-start, 0);
+    border-inline-start-width: var(--border-start, 0);
+    border-inline-end-width: var(--border-end, 0);
+    text-indent: var(--text-indent);
+    text-align: inherit;
     box-sizing: border-box;
     white-space: nowrap;
     overflow: hidden;
     text-transform: inherit;
+    resize: none;
+    text-overflow: ellipsis;
 
-    :host[data-size='s'] & {
-        padding: 0 8px 0 12px;
+    :host[data-mode='onDark'] &,
+    :host-context(tui-primitive-textfield[data-mode='onDark']),
+    :host-context(tui-text-area[data-mode='onDark']) {
+        @include autofill(dark);
     }
 
-    :host[data-size='l'] & {
-        padding: 0 16px;
+    :host[data-size='s'] &,
+    :host-context(tui-primitive-textfield[data-size='s']):not(tui-primitive-textfield),
+    :host-context(tui-text-area[data-size='s']):not(tui-text-area) {
+        padding: 0 var(--tui-padding-s);
     }
 
-    :host._disabled & {
+    :host[data-size='l'] &,
+    :host-context(tui-primitive-textfield[data-size='l']):not(tui-primitive-textfield),
+    :host-context(tui-text-area[data-size='l']):not(tui-text-area) {
+        padding: 0 var(--tui-padding-l);
+    }
+
+    :host._disabled &,
+    :host-context(tui-primitive-textfield._disabled),
+    :host-context(tui-text-area._disabled) {
         // $bad TODO: research why you can reach disabled textfield with mask inside a label without that
         pointer-events: none;
     }
 
-    :host[data-size='l']:not(._label-outside) & {
-        padding-top: 20px;
+    :host[data-size='l']:not(._label-outside) &,
+    :host-context(tui-primitive-textfield[data-size='l']:not(._label-outside)):not(tui-primitive-textfield) {
+        padding-top: $line-height-l;
 
         // Workaround for raising placeholder in temporary autofill
-        &:-webkit-autofill + .content .placeholder {
-            width: 114%; // compensation of scale(0.87)
-            transform: translateY(-10px) scale(0.87);
+        &:-webkit-autofill + .t-content .t-placeholder {
+            font-size: 0.8156rem;
+            transform: translateY(-0.625rem);
         }
     }
 
-    :host[data-size='m']:not(._label-outside) & {
-        padding-top: 18px;
+    :host[data-size='m']:not(._label-outside) &,
+    :host-context(tui-primitive-textfield[data-size='m']:not(._label-outside)):not(tui-primitive-textfield) {
+        padding-top: 1.125rem;
 
         // Workaround for raising placeholder in temporary autofill
-        &:-webkit-autofill + .content .placeholder {
-            width: 118%; // compensation of scale(0.85)
-            transform: translateY(-8px) scale(0.85);
+        &:-webkit-autofill + .t-content .t-placeholder {
+            font-size: 0.69rem;
+            transform: translateY(-0.5rem);
         }
     }
+
+    :host._hidden input&,
+    :host-context(tui-primitive-textfield._hidden) {
+        opacity: 0;
+        text-indent: -10em; // Hide blinking caret even in IE
+        -webkit-user-select: none; // Hide blinking caret in mobile safari
+    }
 }
 
 @mixin textfield-wrapper() {
     flex: 1;
     min-width: 0;
-    padding-right: $space;
+    padding-right: 0.25rem;
+    padding-inline-end: 0.25rem;
+    padding-inline-start: 0;
 }
 
 @mixin textfield-placeholder() {
-    @include transition('transform, min-width, color, letter-spacing');
+    @include transition('transform, font-size, color, letter-spacing');
     @include text-basic();
     @include text-overflow();
     display: block;
     width: 100%;
-    height: 20px;
-    font-size: 13px;
-    box-sizing: border-box;
     user-select: none;
-    pointer-events: none;
     color: var(--tui-text-02);
-    transform-origin: left;
-    letter-spacing: normal;
-    text-transform: none;
+    pointer-events: none;
+    will-change: transform;
+    transform: translateY(0);
 
     &_raised {
-        width: 114%; // compensation of scale(0.87)
-        transform: translateY(-10px) scale(0.87);
+        transform: translateY(-0.625rem);
 
         :host[data-size='m'] & {
-            width: 118%;
-            transform: translateY(-8px) scale(0.85);
+            font: var(--tui-font-text-xs);
+            transform: translateY(-0.5rem);
             letter-spacing: 0.025rem;
         }
 
@@ -136,7 +175,11 @@
     }
 
     :host[data-size='l'] & {
-        font-size: 15px;
+        font-size: 0.9375rem;
+
+        &_raised {
+            font-size: 0.8156rem;
+        }
     }
 
     :host[data-size='m']._focused:not(._label-outside) &,
@@ -164,6 +207,7 @@
 
     @supports (-webkit-hyphens: none) {
         & {
+            will-change: unset;
             transition-property: transform, color, letter-spacing;
         }
     }
@@ -171,8 +215,8 @@
 
 @mixin input-icon() {
     display: flex;
-    width: 24px;
-    height: 24px;
+    width: 1.5rem;
+    height: 1.5rem;
     align-items: center;
     justify-content: center;
     color: var(--tui-text-03);
@@ -208,92 +252,43 @@
     }
 }
 
-@mixin example-text() {
-    display: flex;
-    align-items: center;
-    height: 20px;
-    margin: -20px 0;
-    padding: 10px 0;
-    box-sizing: content-box;
-    color: var(--tui-text-03);
-    letter-spacing: normal;
-    text-transform: none;
-
-    :host[data-size='m']._label-outside & {
-        margin-top: -19px;
-    }
-
-    :host[data-mode='onDark'] & {
-        color: var(--tui-text-03-night);
-    }
-}
-
 @mixin textfield() {
     :host {
         @include textfield-host();
     }
 
-    .input {
+    .t-input {
         @include textfield-input();
     }
 
-    .ghost {
-        visibility: hidden;
-        white-space: pre;
-        text-overflow: clip;
-    }
-
-    .filler {
-        vertical-align: middle;
-    }
-
-    .content {
+    .t-content {
         @include textfield-content();
     }
 
-    .wrapper {
+    .t-wrapper {
         @include textfield-wrapper();
     }
 
-    .value-decoration {
-        @include example-text();
-    }
-
-    .value-decoration-inner {
-        @include text-overflow();
-        min-width: 0;
-    }
-
-    .postfix {
-        @include transition('color');
-        color: var(--tui-text-01);
-
-        &_shifted {
-            margin-left: 0.5ch;
-        }
-
-        :host[data-mode='onDark'] & {
-            color: var(--tui-text-01-night);
-        }
-    }
-
-    .placeholder {
+    .t-placeholder {
         @include textfield-placeholder();
     }
 
-    .cleaner {
+    .t-cleaner {
         @include icon-button();
     }
 
     // $bad TODO: Refactor this and interactive icons together
-    .icon {
+    .t-icon {
         @include input-icon();
 
         &_left {
             margin: 0 2 * $space 0 -$space;
+            margin-inline-start: -$space;
+            margin-inline-end: 2 * $space;
 
             :host[data-size='s'] & {
                 margin-right: $space;
+                margin-inline-end: $space;
             }
         }
     }

package/styles/mixins/wrapper.scss

@@ -1,7 +1,9 @@
 @mixin wrapper-hover {
-    &:hover:not(._no-hover),
-    &[data-state='hover'] {
-        @content;
+    @media (hover: hover) {
+        &:hover:not(._no-hover),
+        &[data-state='hover'] {
+            @content;
+        }
     }
 }
 

package/styles/variables/media.scss

@@ -1,3 +1,24 @@
+$tui-media-retina: '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)';
+$tui-media-retina-mobile: '(-webkit-min-device-pixel-ratio: 2) and (max-width: 37.4625em), (min-resolution: 192dpi) and (max-width: 37.4625em)';
+$tui-media-retina-tablet: '(-webkit-min-device-pixel-ratio: 2) and (max-width: 63.9625em), (min-resolution: 192dpi) and (max-width: 63.9625em)';
+$tui-media-retina-desktop: '(-webkit-min-device-pixel-ratio: 2) and (max-width: 84.9625em), (min-resolution: 192dpi) and (max-width: 84.9625em)';
+
+$tui-mobile: 'screen and (max-width: 47.9625em)';
+$tui-mobile-min: 'screen and (min-width: 22.5em)';
+$tui-mobile-interval: '(min-width: 22.5em) and (max-width: 47.9625em)';
+
+$tui-tablet: 'screen and (max-width: 63.9625em)';
+$tui-tablet-min: 'screen and (min-width: 48em)';
+$tui-tablet-interval: '(min-width: 48em) and (max-width: 63.9625em)';
+
+$tui-desktop: 'screen and (max-width: 79.9625em)';
+$tui-desktop-min: 'screen and (min-width: 64em)';
+$tui-desktop-interval: '(min-width: 64em) and (max-width: 79.9625em)';
+
+$tui-desktop-lg-min: 'screen and (min-width: 80em)';
+
+// TODO: 4.0 delete all deprecations below
+// deprecated
 $media-retina: '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)';
 $media-retina-mobile: '(-webkit-min-device-pixel-ratio: 2) and (max-width: 599px), (min-resolution: 192dpi) and (max-width: 599px)';
 $media-retina-tablet: '(-webkit-min-device-pixel-ratio: 2) and (max-width: 1023px), (min-resolution: 192dpi) and (max-width: 1023px)';