@taiga-ui/core 3.36.2 → 3.37.0-dev.main.89945b8

package/fesm2015/taiga-ui-core-utils-miscellaneous.js

@@ -2,19 +2,20 @@ import { TUI_CACHE_BUSTING_PAYLOAD, DEFAULT_ICONS_PATH, tuiEditingKeys } from '@
 
 const ITEM_SIZE = 1.5;
 const CONTENT_SIZE = 2.5;
-function tuiGetBorder(hasIcon, hasCleaner = false, hasTooltip = false, hasContent = false) {
+function tuiGetBorder(hasIcon, hasCleaner = false, hasTooltip = false, hasContent = false, size = `m`) {
+    const offset = size === `s` ? 0 : 0.25;
     let border = 0;
     if (hasIcon) {
-        border += ITEM_SIZE;
+        border += ITEM_SIZE + offset;
     }
     if (hasCleaner) {
-        border += ITEM_SIZE;
+        border += ITEM_SIZE + offset;
     }
     if (hasTooltip) {
-        border += ITEM_SIZE;
+        border += ITEM_SIZE + offset;
     }
     if (hasContent) {
-        border += CONTENT_SIZE;
+        border += CONTENT_SIZE + offset;
     }
     return border;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"taiga-ui-core-utils-miscellaneous.js","sources":["../../../projects/core/utils/miscellaneous/get-border.ts","../../../projects/core/utils/miscellaneous/icons-path-factory.ts","../../../projects/core/utils/miscellaneous/is-editing-key.ts","../../../projects/core/utils/miscellaneous/is-presumed-html-string.ts","../../../projects/core/utils/miscellaneous/override-options.ts","../../../projects/core/utils/miscellaneous/size-bigger.ts","../../../projects/core/utils/miscellaneous/taiga-ui-core-utils-miscellaneous.ts"],"sourcesContent":["const ITEM_SIZE = 1.5;\nconst CONTENT_SIZE = 2.5;\n\nexport function tuiGetBorder(\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, TUI_CACHE_BUSTING_PAYLOAD} from '@taiga-ui/core/constants';\n\nexport function tuiIconsPathFactory(staticPath: string): TuiStringHandler<string> {\n    const base = staticPath.endsWith(`/`) ? staticPath : `${staticPath}/`;\n\n    return name => {\n        if (name.startsWith(`tuiIcon`)) {\n            return `${base}${name}.svg${TUI_CACHE_BUSTING_PAYLOAD}#${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 tuiIsEditingKey(key: string): boolean {\n    return key.length === 1 || tuiEditingKeys.includes(key);\n}\n","export function tuiIsPresumedHTMLString(candidate: string): boolean {\n    const trimmed = candidate.trim();\n\n    return trimmed.startsWith(`<`) && trimmed.endsWith(`>`);\n}\n","export function tuiOverrideOptions<T>(\n    override: Partial<T>,\n    fallback: T,\n): (directive: T | null, options: T | null) => T {\n    return (directive, options) => {\n        const result = directive || {...(options || fallback)};\n\n        Object.keys(override).forEach(key => {\n            // Update directive props with new defaults before inputs are processed\n            (result as any)[key] = override[key as keyof T];\n        });\n\n        return result;\n    };\n}\n","import {TuiSizeXXL, TuiSizeXXS} from '@taiga-ui/core/types';\n\nconst SIZES: Record<TuiSizeXXL | TuiSizeXXS, number> = {\n    xxs: 0,\n    xs: 1,\n    s: 2,\n    m: 3,\n    l: 4,\n    xl: 5,\n    xxl: 6,\n};\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 tuiSizeBigger(\n    size: TuiSizeXXL | TuiSizeXXS,\n    biggerThanSize: TuiSizeXXL | TuiSizeXXS = `s`,\n): boolean {\n    return SIZES[size] > SIZES[biggerThanSize];\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;AAAA,MAAM,SAAS,GAAG,GAAG,CAAC;AACtB,MAAM,YAAY,GAAG,GAAG,CAAC;AAET,SAAA,YAAY,CACxB,OAAgB,EAChB,UAAA,GAAsB,KAAK,EAC3B,UAAsB,GAAA,KAAK,EAC3B,UAAA,GAAsB,KAAK,EAAA;IAE3B,IAAI,MAAM,GAAG,CAAC,CAAC;AAEf,IAAA,IAAI,OAAO,EAAE;QACT,MAAM,IAAI,SAAS,CAAC;AACvB,KAAA;AAED,IAAA,IAAI,UAAU,EAAE;QACZ,MAAM,IAAI,SAAS,CAAC;AACvB,KAAA;AAED,IAAA,IAAI,UAAU,EAAE;QACZ,MAAM,IAAI,SAAS,CAAC;AACvB,KAAA;AAED,IAAA,IAAI,UAAU,EAAE;QACZ,MAAM,IAAI,YAAY,CAAC;AAC1B,KAAA;AAED,IAAA,OAAO,MAAM,CAAC;AAClB;;ACzBM,SAAU,mBAAmB,CAAC,UAAkB,EAAA;AAClD,IAAA,MAAM,IAAI,GAAG,UAAU,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAG,UAAU,GAAG,CAAG,EAAA,UAAU,GAAG,CAAC;IAEtE,OAAO,IAAI,IAAG;AACV,QAAA,IAAI,IAAI,CAAC,UAAU,CAAC,CAAA,OAAA,CAAS,CAAC,EAAE;YAC5B,OAAO,CAAA,EAAG,IAAI,CAAG,EAAA,IAAI,OAAO,yBAAyB,CAAA,CAAA,EAAI,IAAI,CAAA,CAAE,CAAC;AACnE,SAAA;AAED,QAAA,OAAO,kBAAkB,CAAC,IAAI,CAAC,CAAC;AACpC,KAAC,CAAC;AACN;;ACXA;;AAEG;AACG,SAAU,eAAe,CAAC,GAAW,EAAA;AACvC,IAAA,OAAO,GAAG,CAAC,MAAM,KAAK,CAAC,IAAI,cAAc,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;AAC5D;;ACPM,SAAU,uBAAuB,CAAC,SAAiB,EAAA;AACrD,IAAA,MAAM,OAAO,GAAG,SAAS,CAAC,IAAI,EAAE,CAAC;AAEjC,IAAA,OAAO,OAAO,CAAC,UAAU,CAAC,CAAG,CAAA,CAAA,CAAC,IAAI,OAAO,CAAC,QAAQ,CAAC,CAAA,CAAA,CAAG,CAAC,CAAC;AAC5D;;ACJgB,SAAA,kBAAkB,CAC9B,QAAoB,EACpB,QAAW,EAAA;AAEX,IAAA,OAAO,CAAC,SAAS,EAAE,OAAO,KAAI;QAC1B,MAAM,MAAM,GAAG,SAAS,IAAQ,MAAA,CAAA,MAAA,CAAA,EAAA,GAAC,OAAO,IAAI,QAAQ,EAAE,CAAC;QAEvD,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,GAAG,IAAG;;YAE/B,MAAc,CAAC,GAAG,CAAC,GAAG,QAAQ,CAAC,GAAc,CAAC,CAAC;AACpD,SAAC,CAAC,CAAC;AAEH,QAAA,OAAO,MAAM,CAAC;AAClB,KAAC,CAAC;AACN;;ACZA,MAAM,KAAK,GAA4C;AACnD,IAAA,GAAG,EAAE,CAAC;AACN,IAAA,EAAE,EAAE,CAAC;AACL,IAAA,CAAC,EAAE,CAAC;AACJ,IAAA,CAAC,EAAE,CAAC;AACJ,IAAA,CAAC,EAAE,CAAC;AACJ,IAAA,EAAE,EAAE,CAAC;AACL,IAAA,GAAG,EAAE,CAAC;CACT,CAAC;AAEF;;;;;AAKG;SACa,aAAa,CACzB,IAA6B,EAC7B,iBAA0C,CAAG,CAAA,CAAA,EAAA;IAE7C,OAAO,KAAK,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC,cAAc,CAAC,CAAC;AAC/C;;ACvBA;;AAEG;;;;"}
+{"version":3,"file":"taiga-ui-core-utils-miscellaneous.js","sources":["../../../projects/core/utils/miscellaneous/get-border.ts","../../../projects/core/utils/miscellaneous/icons-path-factory.ts","../../../projects/core/utils/miscellaneous/is-editing-key.ts","../../../projects/core/utils/miscellaneous/is-presumed-html-string.ts","../../../projects/core/utils/miscellaneous/override-options.ts","../../../projects/core/utils/miscellaneous/size-bigger.ts","../../../projects/core/utils/miscellaneous/taiga-ui-core-utils-miscellaneous.ts"],"sourcesContent":["import {TuiSizeL, TuiSizeS} from '@taiga-ui/core/types';\n\nconst ITEM_SIZE = 1.5;\nconst CONTENT_SIZE = 2.5;\n\nexport function tuiGetBorder(\n    hasIcon: boolean,\n    hasCleaner: boolean = false,\n    hasTooltip: boolean = false,\n    hasContent: boolean = false,\n    size: TuiSizeL | TuiSizeS = `m`,\n): number {\n    const offset = size === `s` ? 0 : 0.25;\n    let border = 0;\n\n    if (hasIcon) {\n        border += ITEM_SIZE + offset;\n    }\n\n    if (hasCleaner) {\n        border += ITEM_SIZE + offset;\n    }\n\n    if (hasTooltip) {\n        border += ITEM_SIZE + offset;\n    }\n\n    if (hasContent) {\n        border += CONTENT_SIZE + offset;\n    }\n\n    return border;\n}\n","import {TuiStringHandler} from '@taiga-ui/cdk';\nimport {DEFAULT_ICONS_PATH, TUI_CACHE_BUSTING_PAYLOAD} from '@taiga-ui/core/constants';\n\nexport function tuiIconsPathFactory(staticPath: string): TuiStringHandler<string> {\n    const base = staticPath.endsWith(`/`) ? staticPath : `${staticPath}/`;\n\n    return name => {\n        if (name.startsWith(`tuiIcon`)) {\n            return `${base}${name}.svg${TUI_CACHE_BUSTING_PAYLOAD}#${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 tuiIsEditingKey(key: string): boolean {\n    return key.length === 1 || tuiEditingKeys.includes(key);\n}\n","export function tuiIsPresumedHTMLString(candidate: string): boolean {\n    const trimmed = candidate.trim();\n\n    return trimmed.startsWith(`<`) && trimmed.endsWith(`>`);\n}\n","export function tuiOverrideOptions<T>(\n    override: Partial<T>,\n    fallback: T,\n): (directive: T | null, options: T | null) => T {\n    return (directive, options) => {\n        const result = directive || {...(options || fallback)};\n\n        Object.keys(override).forEach(key => {\n            // Update directive props with new defaults before inputs are processed\n            (result as any)[key] = override[key as keyof T];\n        });\n\n        return result;\n    };\n}\n","import {TuiSizeXXL, TuiSizeXXS} from '@taiga-ui/core/types';\n\nconst SIZES: Record<TuiSizeXXL | TuiSizeXXS, number> = {\n    xxs: 0,\n    xs: 1,\n    s: 2,\n    m: 3,\n    l: 4,\n    xl: 5,\n    xxl: 6,\n};\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 tuiSizeBigger(\n    size: TuiSizeXXL | TuiSizeXXS,\n    biggerThanSize: TuiSizeXXL | TuiSizeXXS = `s`,\n): boolean {\n    return SIZES[size] > SIZES[biggerThanSize];\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/interfaces/alert-options.d.ts

@@ -1,9 +1,9 @@
-import { TuiContextWithImplicit, TuiHandler } from '@taiga-ui/cdk';
+import { TuiHandler } from '@taiga-ui/cdk';
 import { TuiNotification } from '@taiga-ui/core/enums';
 import { PolymorpheusContent } from '@tinkoff/ng-polymorpheus';
 export declare type TuiAlertAutoClose = TuiHandler<TuiNotification, boolean | number> | boolean | number;
 export interface TuiAlertOptions<I> {
-    readonly label: PolymorpheusContent<TuiContextWithImplicit<TuiNotification>>;
+    readonly label: PolymorpheusContent<TuiAlertOptions<I>>;
     readonly status: TuiNotification;
     readonly hasIcon: boolean;
     readonly autoClose: TuiAlertAutoClose;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@taiga-ui/core",
-  "version": "3.36.2",
+  "version": "3.37.0-dev.main.89945b8",
   "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.36.2",
+    "@taiga-ui/i18n": "^3.37.0",
     "tslib": ">=2.0.0"
   },
   "peerDependencies": {
@@ -27,8 +27,8 @@
     "@angular/router": ">=12.0.0",
     "@ng-web-apis/common": ">=3.0.0",
     "@ng-web-apis/mutation-observer": ">=3.0.0",
-    "@taiga-ui/cdk": ">=3.36.2",
-    "@taiga-ui/i18n": ">=3.36.2",
+    "@taiga-ui/cdk": ">=3.37.0",
+    "@taiga-ui/i18n": ">=3.37.0",
     "@tinkoff/ng-event-plugins": ">=3.1.0",
     "@tinkoff/ng-polymorpheus": ">=4.0.0",
     "rxjs": ">=6.0.0"

package/styles/mixins/textfield.less

@@ -1,11 +1,9 @@
-@line-height-l: 1.25rem;
-
 .textfield-host() {
     .text-basic();
     position: relative;
     display: block;
-    border-radius: var(--tui-radius-m);
     text-align: left;
+    border-radius: var(--tui-radius-m);
     height: var(--tui-height);
     min-height: var(--tui-height);
     max-height: var(--tui-height);
@@ -21,7 +19,7 @@
     &[data-size='l'] {
         --tui-height: var(--tui-height-l);
         font: var(--tui-font-text-m);
-        line-height: @line-height-l;
+        line-height: 1.25rem;
     }
 }
 
@@ -29,7 +27,6 @@
     display: flex;
     height: 100%;
     width: 100%;
-    padding: 0 var(--tui-padding-m);
     box-sizing: border-box;
     align-items: center;
     overflow: hidden;
@@ -38,17 +35,12 @@
         padding: 0 var(--tui-padding-s);
     }
 
-    :host[data-size='l'] & {
-        padding: 0 var(--tui-padding-l);
-    }
-
-    &:after {
-        content: '';
-        margin-right: -0.25rem;
+    :host[data-size='m'] & {
+        padding: 0 var(--tui-padding-m);
     }
 
-    :host[data-size='m'] &:after {
-        display: none;
+    :host[data-size='l'] & {
+        padding: 0 var(--tui-padding-l);
     }
 }
 
@@ -56,9 +48,7 @@
     .text-basic();
     .clearinput();
     .fullsize();
-    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);
@@ -114,6 +104,12 @@
         padding: 0 var(--tui-padding-s);
     }
 
+    :host[data-size='m'] &,
+    :host-context(tui-primitive-textfield[data-size='m']):not(tui-primitive-textfield),
+    :host-context(tui-text-area[data-size='m']):not(tui-text-area) {
+        padding: 0 var(--tui-padding-m);
+    }
+
     :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) {
@@ -129,7 +125,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: @line-height-l;
+        padding-top: 1.25rem;
 
         // Workaround for raising placeholder in temporary autofill
         &:-webkit-autofill + .t-content .t-placeholder {
@@ -160,15 +156,10 @@
 .textfield-wrapper() {
     flex: 1;
     min-width: 0;
-    padding-right: 0.25rem;
     padding-inline-end: 0.25rem;
-    padding-inline-start: 0;
-
-    & + * {
-        margin: 0;
-    }
 }
 
+// TODO: Rename to label in 4.0
 .textfield-placeholder() {
     .transition(~'transform, font-size, color, letter-spacing');
     .text-overflow();
@@ -253,17 +244,33 @@
     display: flex;
     width: 1.5rem;
     height: 1.5rem;
-    margin: 0 0 0 0.25rem;
-    margin-inline-start: 0.25rem;
-    margin-inline-end: 0;
     align-items: center;
     justify-content: center;
     box-sizing: border-box;
     cursor: pointer;
+    pointer-events: none;
+}
+
+.input-icons() {
+    display: flex;
+    align-items: center;
+
+    :host[data-size='m'] & {
+        margin-inline-end: -0.125rem;
+    }
+
+    :host[data-size='s'] & {
+        margin-inline-end: -0.375rem;
+    }
+
+    :host:not([data-size='s']) & > :not(:first-child) {
+        margin-inline-start: 0.25rem;
+    }
 }
 
 .icon-button() {
     .input-icon();
+    pointer-events: auto;
 
     :host._readonly &,
     :host._disabled & {
@@ -296,21 +303,26 @@
         .icon-button();
     }
 
-    // @bad TODO: Refactor this and interactive icons together
     .t-icon {
         .input-icon();
-        pointer-events: none;
 
         &_left {
-            margin: 0 0.375rem 0 -0.25rem;
-            margin-inline-start: -0.25rem;
-            margin-inline-end: 0.375rem;
+            :host[data-size='s'] & {
+                margin-inline-start: -0.375rem;
+            }
+
+            :host[data-size='m'] & {
+                margin-inline-start: -0.125rem;
+                margin-inline-end: 0.375rem;
+            }
 
             :host[data-size='l'] & {
-                margin: 0 0.5rem 0 -0.25rem;
-                margin-inline-start: -0.25rem;
-                margin-inline-end: 0.5rem;
+                margin-inline-end: 0.75rem;
             }
         }
     }
+
+    .t-icons {
+        .input-icons();
+    }
 }

package/styles/mixins/textfield.scss

@@ -4,8 +4,8 @@ $line-height-l: 1.25rem;
     @include text-basic();
     position: relative;
     display: block;
-    border-radius: var(--tui-radius-m);
     text-align: left;
+    border-radius: var(--tui-radius-m);
     height: var(--tui-height);
     min-height: var(--tui-height);
     max-height: var(--tui-height);
@@ -20,9 +20,8 @@ $line-height-l: 1.25rem;
 
     &[data-size='l'] {
         --tui-height: var(--tui-height-l);
-
         font: var(--tui-font-text-m);
-        line-height: $line-height-l;
+        line-height: 1.25rem;
     }
 }
 
@@ -30,7 +29,6 @@ $line-height-l: 1.25rem;
     display: flex;
     height: 100%;
     width: 100%;
-    padding: 0 var(--tui-padding-m);
     box-sizing: border-box;
     align-items: center;
     overflow: hidden;
@@ -39,17 +37,12 @@ $line-height-l: 1.25rem;
         padding: 0 var(--tui-padding-s);
     }
 
-    :host[data-size='l'] & {
-        padding: 0 var(--tui-padding-l);
-    }
-
-    &:after {
-        content: '';
-        margin-right: -0.25rem;
+    :host[data-size='m'] & {
+        padding: 0 var(--tui-padding-m);
     }
 
-    :host[data-size='m'] &:after {
-        display: none;
+    :host[data-size='l'] & {
+        padding: 0 var(--tui-padding-l);
     }
 }
 
@@ -57,9 +50,7 @@ $line-height-l: 1.25rem;
     @include text-basic();
     @include clearinput();
     @include fullsize();
-    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);
@@ -69,11 +60,44 @@ $line-height-l: 1.25rem;
     overflow: hidden;
     text-transform: inherit;
     resize: none;
-    text-overflow: ellipsis;
+
+    /* stylelint-disable */
+    /* Safari autofill icons */
+    //noinspection CssInvalidPseudoSelector
+    &:-webkit-autofill,
+    &:-webkit-autofill::first-line {
+        font-size: inherit;
+        line-height: inherit;
+    }
+    /* stylelint-enable */
+
+    //noinspection ALL
+    &::-webkit-caps-lock-indicator,
+    &::-webkit-contacts-auto-fill-button,
+    &::-webkit-credit-card-auto-fill-button,
+    &::-webkit-credentials-auto-fill-button,
+    &::-webkit-strong-password-auto-fill-button {
+        @include webkit-auto-fill-button-hidden();
+    }
+
+    &::placeholder {
+        color: var(--tui-text-03);
+        opacity: 0;
+    }
+
+    :host._focused:not(._readonly) &::placeholder,
+    :host-context(tui-primitive-textfield._focused:not(._readonly)) &::placeholder,
+    :host-context(tui-text-area._focused:not(._readonly)) &::placeholder {
+        opacity: 1;
+    }
 
     [tuiWrapper][data-mode='onDark'] &,
     :host-context([tuiWrapper][data-mode='onDark']) {
         @include autofill(dark);
+
+        &::placeholder {
+            color: var(--tui-text-03-night);
+        }
     }
 
     :host[data-size='s'] &,
@@ -82,6 +106,12 @@ $line-height-l: 1.25rem;
         padding: 0 var(--tui-padding-s);
     }
 
+    :host[data-size='m'] &,
+    :host-context(tui-primitive-textfield[data-size='m']):not(tui-primitive-textfield),
+    :host-context(tui-text-area[data-size='m']):not(tui-text-area) {
+        padding: 0 var(--tui-padding-m);
+    }
+
     :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) {
@@ -91,13 +121,13 @@ $line-height-l: 1.25rem;
     :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
+        // @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) &,
     :host-context(tui-primitive-textfield[data-size='l']:not(._label-outside)):not(tui-primitive-textfield) {
-        padding-top: $line-height-l;
+        padding-top: 1.25rem;
 
         // Workaround for raising placeholder in temporary autofill
         &:-webkit-autofill + .t-content .t-placeholder {
@@ -128,22 +158,17 @@ $line-height-l: 1.25rem;
 @mixin textfield-wrapper() {
     flex: 1;
     min-width: 0;
-    padding-right: 0.25rem;
     padding-inline-end: 0.25rem;
-    padding-inline-start: 0;
-
-    & + * {
-        margin: 0;
-    }
 }
 
+// TODO: Rename to label in 4.0
 @mixin textfield-placeholder() {
     @include transition('transform, font-size, color, letter-spacing');
-    @include text-basic();
     @include text-overflow();
     display: block;
     width: 100%;
     user-select: none;
+    font: var(--tui-font-text-s);
     color: var(--tui-text-02);
     pointer-events: none;
     will-change: transform;
@@ -177,7 +202,8 @@ $line-height-l: 1.25rem;
     }
 
     :host[data-size='l'] & {
-        font-size: 0.9375rem;
+        font: var(--tui-font-text-m);
+        line-height: 1.25rem;
 
         &_raised {
             font-size: 0.8156rem;
@@ -220,17 +246,33 @@ $line-height-l: 1.25rem;
     display: flex;
     width: 1.5rem;
     height: 1.5rem;
-    margin: 0 0 0 0.25rem;
-    margin-inline-start: 0.25rem;
-    margin-inline-end: 0;
     align-items: center;
     justify-content: center;
     box-sizing: border-box;
     cursor: pointer;
+    pointer-events: none;
+}
+
+@mixin input-icons() {
+    display: flex;
+    align-items: center;
+
+    :host[data-size='m'] & {
+        margin-inline-end: -0.125rem;
+    }
+
+    :host[data-size='s'] & {
+        margin-inline-end: -0.375rem;
+    }
+
+    :host:not([data-size='s']) & > :not(:first-child) {
+        margin-inline-start: 0.25rem;
+    }
 }
 
 @mixin icon-button() {
     @include input-icon();
+    pointer-events: auto;
 
     :host._readonly &,
     :host._disabled & {
@@ -263,19 +305,26 @@ $line-height-l: 1.25rem;
         @include icon-button();
     }
 
-    // $bad TODO: Refactor this and interactive icons together
     .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;
+                margin-inline-start: -0.375rem;
+            }
+
+            :host[data-size='m'] & {
+                margin-inline-start: -0.125rem;
+                margin-inline-end: 0.375rem;
+            }
+
+            :host[data-size='l'] & {
+                margin-inline-end: 0.75rem;
             }
         }
     }
+
+    .t-icons {
+        @include input-icons();
+    }
 }

package/tokens/notification-options.d.ts

@@ -1,7 +1,13 @@
 import { Provider } from '@angular/core';
+import { TuiContextWithImplicit } from '@taiga-ui/cdk';
+import { TuiNotification } from '@taiga-ui/core/enums';
 import { TuiAlertOptions } from '@taiga-ui/core/interfaces';
+import { PolymorpheusContent } from '@tinkoff/ng-polymorpheus';
 export interface TuiNotificationDefaultOptions extends Omit<TuiAlertOptions<unknown>, 'data'> {
+    /** @deprecated Use {@link TuiNotificationDefaultOptions.icon} instead */
+    readonly hasIcon: boolean;
     readonly defaultAutoCloseTime: number;
+    readonly icon: PolymorpheusContent<TuiContextWithImplicit<TuiNotification>>;
 }
 /** Default values for the notification options. */
 export declare const TUI_NOTIFICATION_DEFAULT_OPTIONS: TuiNotificationDefaultOptions;

package/utils/miscellaneous/get-border.d.ts

@@ -1 +1,2 @@
-export declare function tuiGetBorder(hasIcon: boolean, hasCleaner?: boolean, hasTooltip?: boolean, hasContent?: boolean): number;
+import { TuiSizeL, TuiSizeS } from '@taiga-ui/core/types';
+export declare function tuiGetBorder(hasIcon: boolean, hasCleaner?: boolean, hasTooltip?: boolean, hasContent?: boolean, size?: TuiSizeL | TuiSizeS): number;