@taiga-ui/core 4.51.0 → 4.52.0-canary.05c3268

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@taiga-ui/core",
-  "version": "4.51.0",
+  "version": "4.52.0-canary.05c3268",
   "description": "Core library for creating Angular components and applications using Taiga UI",
   "keywords": [
     "angular",
@@ -21,317 +21,213 @@
     },
     ".": {
       "types": "./index.d.ts",
-      "esm2022": "./esm2022/taiga-ui-core.mjs",
-      "esm": "./esm2022/taiga-ui-core.mjs",
       "default": "./fesm2022/taiga-ui-core.mjs"
     },
     "./animations": {
       "types": "./animations/index.d.ts",
-      "esm2022": "./esm2022/animations/taiga-ui-core-animations.mjs",
-      "esm": "./esm2022/animations/taiga-ui-core-animations.mjs",
       "default": "./fesm2022/taiga-ui-core-animations.mjs"
     },
     "./classes": {
       "types": "./classes/index.d.ts",
-      "esm2022": "./esm2022/classes/taiga-ui-core-classes.mjs",
-      "esm": "./esm2022/classes/taiga-ui-core-classes.mjs",
       "default": "./fesm2022/taiga-ui-core-classes.mjs"
     },
     "./components": {
       "types": "./components/index.d.ts",
-      "esm2022": "./esm2022/components/taiga-ui-core-components.mjs",
-      "esm": "./esm2022/components/taiga-ui-core-components.mjs",
       "default": "./fesm2022/taiga-ui-core-components.mjs"
     },
     "./directives": {
       "types": "./directives/index.d.ts",
-      "esm2022": "./esm2022/directives/taiga-ui-core-directives.mjs",
-      "esm": "./esm2022/directives/taiga-ui-core-directives.mjs",
       "default": "./fesm2022/taiga-ui-core-directives.mjs"
     },
     "./pipes": {
       "types": "./pipes/index.d.ts",
-      "esm2022": "./esm2022/pipes/taiga-ui-core-pipes.mjs",
-      "esm": "./esm2022/pipes/taiga-ui-core-pipes.mjs",
       "default": "./fesm2022/taiga-ui-core-pipes.mjs"
     },
     "./services": {
       "types": "./services/index.d.ts",
-      "esm2022": "./esm2022/services/taiga-ui-core-services.mjs",
-      "esm": "./esm2022/services/taiga-ui-core-services.mjs",
       "default": "./fesm2022/taiga-ui-core-services.mjs"
     },
     "./tokens": {
       "types": "./tokens/index.d.ts",
-      "esm2022": "./esm2022/tokens/taiga-ui-core-tokens.mjs",
-      "esm": "./esm2022/tokens/taiga-ui-core-tokens.mjs",
       "default": "./fesm2022/taiga-ui-core-tokens.mjs"
     },
     "./types": {
       "types": "./types/index.d.ts",
-      "esm2022": "./esm2022/types/taiga-ui-core-types.mjs",
-      "esm": "./esm2022/types/taiga-ui-core-types.mjs",
       "default": "./fesm2022/taiga-ui-core-types.mjs"
     },
     "./utils": {
       "types": "./utils/index.d.ts",
-      "esm2022": "./esm2022/utils/taiga-ui-core-utils.mjs",
-      "esm": "./esm2022/utils/taiga-ui-core-utils.mjs",
       "default": "./fesm2022/taiga-ui-core-utils.mjs"
     },
     "./components/alert": {
       "types": "./components/alert/index.d.ts",
-      "esm2022": "./esm2022/components/alert/taiga-ui-core-components-alert.mjs",
-      "esm": "./esm2022/components/alert/taiga-ui-core-components-alert.mjs",
       "default": "./fesm2022/taiga-ui-core-components-alert.mjs"
     },
     "./components/button": {
       "types": "./components/button/index.d.ts",
-      "esm2022": "./esm2022/components/button/taiga-ui-core-components-button.mjs",
-      "esm": "./esm2022/components/button/taiga-ui-core-components-button.mjs",
       "default": "./fesm2022/taiga-ui-core-components-button.mjs"
     },
     "./components/calendar": {
       "types": "./components/calendar/index.d.ts",
-      "esm2022": "./esm2022/components/calendar/taiga-ui-core-components-calendar.mjs",
-      "esm": "./esm2022/components/calendar/taiga-ui-core-components-calendar.mjs",
       "default": "./fesm2022/taiga-ui-core-components-calendar.mjs"
     },
+    "./components/cell": {
+      "types": "./components/cell/index.d.ts",
+      "default": "./fesm2022/taiga-ui-core-components-cell.mjs"
+    },
     "./components/data-list": {
       "types": "./components/data-list/index.d.ts",
-      "esm2022": "./esm2022/components/data-list/taiga-ui-core-components-data-list.mjs",
-      "esm": "./esm2022/components/data-list/taiga-ui-core-components-data-list.mjs",
       "default": "./fesm2022/taiga-ui-core-components-data-list.mjs"
     },
     "./components/dialog": {
       "types": "./components/dialog/index.d.ts",
-      "esm2022": "./esm2022/components/dialog/taiga-ui-core-components-dialog.mjs",
-      "esm": "./esm2022/components/dialog/taiga-ui-core-components-dialog.mjs",
       "default": "./fesm2022/taiga-ui-core-components-dialog.mjs"
     },
     "./components/error": {
       "types": "./components/error/index.d.ts",
-      "esm2022": "./esm2022/components/error/taiga-ui-core-components-error.mjs",
-      "esm": "./esm2022/components/error/taiga-ui-core-components-error.mjs",
       "default": "./fesm2022/taiga-ui-core-components-error.mjs"
     },
     "./components/expand": {
       "types": "./components/expand/index.d.ts",
-      "esm2022": "./esm2022/components/expand/taiga-ui-core-components-expand.mjs",
-      "esm": "./esm2022/components/expand/taiga-ui-core-components-expand.mjs",
       "default": "./fesm2022/taiga-ui-core-components-expand.mjs"
     },
-    "./components/fullscreen": {
-      "types": "./components/fullscreen/index.d.ts",
-      "esm2022": "./esm2022/components/fullscreen/taiga-ui-core-components-fullscreen.mjs",
-      "esm": "./esm2022/components/fullscreen/taiga-ui-core-components-fullscreen.mjs",
-      "default": "./fesm2022/taiga-ui-core-components-fullscreen.mjs"
+    "./components/header": {
+      "types": "./components/header/index.d.ts",
+      "default": "./fesm2022/taiga-ui-core-components-header.mjs"
     },
     "./components/icon": {
       "types": "./components/icon/index.d.ts",
-      "esm2022": "./esm2022/components/icon/taiga-ui-core-components-icon.mjs",
-      "esm": "./esm2022/components/icon/taiga-ui-core-components-icon.mjs",
       "default": "./fesm2022/taiga-ui-core-components-icon.mjs"
     },
     "./components/label": {
       "types": "./components/label/index.d.ts",
-      "esm2022": "./esm2022/components/label/taiga-ui-core-components-label.mjs",
-      "esm": "./esm2022/components/label/taiga-ui-core-components-label.mjs",
       "default": "./fesm2022/taiga-ui-core-components-label.mjs"
     },
     "./components/link": {
       "types": "./components/link/index.d.ts",
-      "esm2022": "./esm2022/components/link/taiga-ui-core-components-link.mjs",
-      "esm": "./esm2022/components/link/taiga-ui-core-components-link.mjs",
       "default": "./fesm2022/taiga-ui-core-components-link.mjs"
     },
     "./components/loader": {
       "types": "./components/loader/index.d.ts",
-      "esm2022": "./esm2022/components/loader/taiga-ui-core-components-loader.mjs",
-      "esm": "./esm2022/components/loader/taiga-ui-core-components-loader.mjs",
       "default": "./fesm2022/taiga-ui-core-components-loader.mjs"
     },
     "./components/notification": {
       "types": "./components/notification/index.d.ts",
-      "esm2022": "./esm2022/components/notification/taiga-ui-core-components-notification.mjs",
-      "esm": "./esm2022/components/notification/taiga-ui-core-components-notification.mjs",
       "default": "./fesm2022/taiga-ui-core-components-notification.mjs"
     },
     "./components/root": {
       "types": "./components/root/index.d.ts",
-      "esm2022": "./esm2022/components/root/taiga-ui-core-components-root.mjs",
-      "esm": "./esm2022/components/root/taiga-ui-core-components-root.mjs",
       "default": "./fesm2022/taiga-ui-core-components-root.mjs"
     },
     "./components/scrollbar": {
       "types": "./components/scrollbar/index.d.ts",
-      "esm2022": "./esm2022/components/scrollbar/taiga-ui-core-components-scrollbar.mjs",
-      "esm": "./esm2022/components/scrollbar/taiga-ui-core-components-scrollbar.mjs",
       "default": "./fesm2022/taiga-ui-core-components-scrollbar.mjs"
     },
     "./components/spin-button": {
       "types": "./components/spin-button/index.d.ts",
-      "esm2022": "./esm2022/components/spin-button/taiga-ui-core-components-spin-button.mjs",
-      "esm": "./esm2022/components/spin-button/taiga-ui-core-components-spin-button.mjs",
       "default": "./fesm2022/taiga-ui-core-components-spin-button.mjs"
     },
     "./components/textfield": {
       "types": "./components/textfield/index.d.ts",
-      "esm2022": "./esm2022/components/textfield/taiga-ui-core-components-textfield.mjs",
-      "esm": "./esm2022/components/textfield/taiga-ui-core-components-textfield.mjs",
       "default": "./fesm2022/taiga-ui-core-components-textfield.mjs"
     },
     "./directives/appearance": {
       "types": "./directives/appearance/index.d.ts",
-      "esm2022": "./esm2022/directives/appearance/taiga-ui-core-directives-appearance.mjs",
-      "esm": "./esm2022/directives/appearance/taiga-ui-core-directives-appearance.mjs",
       "default": "./fesm2022/taiga-ui-core-directives-appearance.mjs"
     },
     "./directives/date-format": {
       "types": "./directives/date-format/index.d.ts",
-      "esm2022": "./esm2022/directives/date-format/taiga-ui-core-directives-date-format.mjs",
-      "esm": "./esm2022/directives/date-format/taiga-ui-core-directives-date-format.mjs",
       "default": "./fesm2022/taiga-ui-core-directives-date-format.mjs"
     },
     "./directives/dropdown": {
       "types": "./directives/dropdown/index.d.ts",
-      "esm2022": "./esm2022/directives/dropdown/taiga-ui-core-directives-dropdown.mjs",
-      "esm": "./esm2022/directives/dropdown/taiga-ui-core-directives-dropdown.mjs",
       "default": "./fesm2022/taiga-ui-core-directives-dropdown.mjs"
     },
     "./directives/group": {
       "types": "./directives/group/index.d.ts",
-      "esm2022": "./esm2022/directives/group/taiga-ui-core-directives-group.mjs",
-      "esm": "./esm2022/directives/group/taiga-ui-core-directives-group.mjs",
       "default": "./fesm2022/taiga-ui-core-directives-group.mjs"
     },
     "./directives/hint": {
       "types": "./directives/hint/index.d.ts",
-      "esm2022": "./esm2022/directives/hint/taiga-ui-core-directives-hint.mjs",
-      "esm": "./esm2022/directives/hint/taiga-ui-core-directives-hint.mjs",
       "default": "./fesm2022/taiga-ui-core-directives-hint.mjs"
     },
     "./directives/icons": {
       "types": "./directives/icons/index.d.ts",
-      "esm2022": "./esm2022/directives/icons/taiga-ui-core-directives-icons.mjs",
-      "esm": "./esm2022/directives/icons/taiga-ui-core-directives-icons.mjs",
       "default": "./fesm2022/taiga-ui-core-directives-icons.mjs"
     },
     "./directives/items-handlers": {
       "types": "./directives/items-handlers/index.d.ts",
-      "esm2022": "./esm2022/directives/items-handlers/taiga-ui-core-directives-items-handlers.mjs",
-      "esm": "./esm2022/directives/items-handlers/taiga-ui-core-directives-items-handlers.mjs",
       "default": "./fesm2022/taiga-ui-core-directives-items-handlers.mjs"
     },
     "./directives/number-format": {
       "types": "./directives/number-format/index.d.ts",
-      "esm2022": "./esm2022/directives/number-format/taiga-ui-core-directives-number-format.mjs",
-      "esm": "./esm2022/directives/number-format/taiga-ui-core-directives-number-format.mjs",
       "default": "./fesm2022/taiga-ui-core-directives-number-format.mjs"
     },
     "./directives/popup": {
       "types": "./directives/popup/index.d.ts",
-      "esm2022": "./esm2022/directives/popup/taiga-ui-core-directives-popup.mjs",
-      "esm": "./esm2022/directives/popup/taiga-ui-core-directives-popup.mjs",
       "default": "./fesm2022/taiga-ui-core-directives-popup.mjs"
     },
-    "./directives/surface": {
-      "types": "./directives/surface/index.d.ts",
-      "esm2022": "./esm2022/directives/surface/taiga-ui-core-directives-surface.mjs",
-      "esm": "./esm2022/directives/surface/taiga-ui-core-directives-surface.mjs",
-      "default": "./fesm2022/taiga-ui-core-directives-surface.mjs"
-    },
     "./directives/title": {
       "types": "./directives/title/index.d.ts",
-      "esm2022": "./esm2022/directives/title/taiga-ui-core-directives-title.mjs",
-      "esm": "./esm2022/directives/title/taiga-ui-core-directives-title.mjs",
       "default": "./fesm2022/taiga-ui-core-directives-title.mjs"
     },
     "./pipes/auto-color": {
       "types": "./pipes/auto-color/index.d.ts",
-      "esm2022": "./esm2022/pipes/auto-color/taiga-ui-core-pipes-auto-color.mjs",
-      "esm": "./esm2022/pipes/auto-color/taiga-ui-core-pipes-auto-color.mjs",
       "default": "./fesm2022/taiga-ui-core-pipes-auto-color.mjs"
     },
     "./pipes/calendar-sheet": {
       "types": "./pipes/calendar-sheet/index.d.ts",
-      "esm2022": "./esm2022/pipes/calendar-sheet/taiga-ui-core-pipes-calendar-sheet.mjs",
-      "esm": "./esm2022/pipes/calendar-sheet/taiga-ui-core-pipes-calendar-sheet.mjs",
       "default": "./fesm2022/taiga-ui-core-pipes-calendar-sheet.mjs"
     },
-    "./pipes/fallback-src": {
-      "types": "./pipes/fallback-src/index.d.ts",
-      "esm2022": "./esm2022/pipes/fallback-src/taiga-ui-core-pipes-fallback-src.mjs",
-      "esm": "./esm2022/pipes/fallback-src/taiga-ui-core-pipes-fallback-src.mjs",
-      "default": "./fesm2022/taiga-ui-core-pipes-fallback-src.mjs"
-    },
     "./pipes/flag": {
       "types": "./pipes/flag/index.d.ts",
-      "esm2022": "./esm2022/pipes/flag/taiga-ui-core-pipes-flag.mjs",
-      "esm": "./esm2022/pipes/flag/taiga-ui-core-pipes-flag.mjs",
       "default": "./fesm2022/taiga-ui-core-pipes-flag.mjs"
     },
     "./pipes/format-date": {
       "types": "./pipes/format-date/index.d.ts",
-      "esm2022": "./esm2022/pipes/format-date/taiga-ui-core-pipes-format-date.mjs",
-      "esm": "./esm2022/pipes/format-date/taiga-ui-core-pipes-format-date.mjs",
       "default": "./fesm2022/taiga-ui-core-pipes-format-date.mjs"
     },
     "./pipes/format-number": {
       "types": "./pipes/format-number/index.d.ts",
-      "esm2022": "./esm2022/pipes/format-number/taiga-ui-core-pipes-format-number.mjs",
-      "esm": "./esm2022/pipes/format-number/taiga-ui-core-pipes-format-number.mjs",
       "default": "./fesm2022/taiga-ui-core-pipes-format-number.mjs"
     },
     "./pipes/initials": {
       "types": "./pipes/initials/index.d.ts",
-      "esm2022": "./esm2022/pipes/initials/taiga-ui-core-pipes-initials.mjs",
-      "esm": "./esm2022/pipes/initials/taiga-ui-core-pipes-initials.mjs",
       "default": "./fesm2022/taiga-ui-core-pipes-initials.mjs"
     },
     "./pipes/month": {
       "types": "./pipes/month/index.d.ts",
-      "esm2022": "./esm2022/pipes/month/taiga-ui-core-pipes-month.mjs",
-      "esm": "./esm2022/pipes/month/taiga-ui-core-pipes-month.mjs",
       "default": "./fesm2022/taiga-ui-core-pipes-month.mjs"
     },
     "./pipes/order-week-days": {
       "types": "./pipes/order-week-days/index.d.ts",
-      "esm2022": "./esm2022/pipes/order-week-days/taiga-ui-core-pipes-order-week-days.mjs",
-      "esm": "./esm2022/pipes/order-week-days/taiga-ui-core-pipes-order-week-days.mjs",
       "default": "./fesm2022/taiga-ui-core-pipes-order-week-days.mjs"
     },
     "./utils/dom": {
       "types": "./utils/dom/index.d.ts",
-      "esm2022": "./esm2022/utils/dom/taiga-ui-core-utils-dom.mjs",
-      "esm": "./esm2022/utils/dom/taiga-ui-core-utils-dom.mjs",
       "default": "./fesm2022/taiga-ui-core-utils-dom.mjs"
     },
     "./utils/format": {
       "types": "./utils/format/index.d.ts",
-      "esm2022": "./esm2022/utils/format/taiga-ui-core-utils-format.mjs",
-      "esm": "./esm2022/utils/format/taiga-ui-core-utils-format.mjs",
       "default": "./fesm2022/taiga-ui-core-utils-format.mjs"
     },
     "./utils/miscellaneous": {
       "types": "./utils/miscellaneous/index.d.ts",
-      "esm2022": "./esm2022/utils/miscellaneous/taiga-ui-core-utils-miscellaneous.mjs",
-      "esm": "./esm2022/utils/miscellaneous/taiga-ui-core-utils-miscellaneous.mjs",
       "default": "./fesm2022/taiga-ui-core-utils-miscellaneous.mjs"
     }
   },
   "peerDependencies": {
-    "@angular/animations": ">=16.0.0",
-    "@angular/common": ">=16.0.0",
-    "@angular/core": ">=16.0.0",
-    "@angular/forms": ">=16.0.0",
-    "@angular/platform-browser": ">=16.0.0",
-    "@angular/router": ">=16.0.0",
-    "@ng-web-apis/common": "^4.12.0",
-    "@ng-web-apis/mutation-observer": "^4.12.0",
-    "@taiga-ui/cdk": "^4.51.0",
-    "@taiga-ui/event-plugins": "^4.6.0",
-    "@taiga-ui/i18n": "^4.51.0",
+    "@angular/animations": ">=19.0.0",
+    "@angular/common": ">=19.0.0",
+    "@angular/core": ">=19.0.0",
+    "@angular/forms": ">=19.0.0",
+    "@angular/platform-browser": ">=19.0.0",
+    "@angular/router": ">=19.0.0",
+    "@ng-web-apis/common": "^4.12.2",
+    "@ng-web-apis/mutation-observer": "^4.12.2",
+    "@taiga-ui/cdk": "^4.52.0",
+    "@taiga-ui/event-plugins": "^4.7.0",
+    "@taiga-ui/i18n": "^4.52.0",
     "@taiga-ui/polymorpheus": "^4.9.0",
     "rxjs": ">=7.0.0"
   },

package/pipes/index.d.ts

@@ -1,6 +1,5 @@
 export * from '@taiga-ui/core/pipes/auto-color';
 export * from '@taiga-ui/core/pipes/calendar-sheet';
-export * from '@taiga-ui/core/pipes/fallback-src';
 export * from '@taiga-ui/core/pipes/flag';
 export * from '@taiga-ui/core/pipes/format-date';
 export * from '@taiga-ui/core/pipes/format-number';

package/styles/components/appearance.less

@@ -28,6 +28,12 @@
     outline-offset: -0.125rem;
     transition-property: color, background-color, opacity, box-shadow, border-color, border-radius, filter;
 
+    &::before,
+    &::after {
+        transition-duration: inherit;
+        transition-timing-function: ease-in-out;
+    }
+
     .appearance-focus({
         outline-color: var(--tui-border-focus);
     });

package/styles/components/button.less

@@ -52,7 +52,6 @@
 
         font: var(--tui-font-text-s);
 
-        tui-svg,
         tui-icon,
         &::before {
             font-size: 1rem;
@@ -68,7 +67,6 @@
 
         font: var(--tui-font-text-s);
 
-        tui-svg,
         tui-icon,
         &:not([tuiIconButton][data-appearance='icon']):not([tuiIconButton][data-appearance='link'])::before {
             font-size: 1rem;

package/styles/components/icon.less

@@ -5,21 +5,24 @@
  * @selector tui-icon
  *
  * @description
- * Container for displaying icons colored with CSS (color/background) using mask
+ * Container for displaying icons colored with CSS (color/background)
  *
  * @vars
- * --t-icon — mask for the icon
+ * --t-icon — depending on the data-icon, it can serve as either a mask (`svg`),
+  a background (`img`), or content (`font`) for the icon.
  * --t-icon-bg — mask for the background
  *
  * @example
- * <tui-icon style="--t-icon: url('icon.svg')"></tui-icon>
+ * <tui-icon tuiIcons style="--t-icon: url('icon.svg')"></tui-icon>
  *
  * @see-also
  * Icons
  */
 tui-icon {
+    --tui-icon-size: 1em;
+
     position: relative;
-    display: inline-block;
+    display: inline-flex;
     inline-size: 1em;
     block-size: 1em;
     font-size: 1.5rem;
@@ -27,7 +30,7 @@ tui-icon {
     border: 0 solid transparent;
     vertical-align: middle;
     box-sizing: border-box;
-    mask: var(--t-icon-bg) no-repeat center/contain;
+    mask: var(--t-icon-bg) no-repeat center / calc(100% + 10 * var(--tui-stroke-width, 0.125rem)) 100%;
 
     @media @tui-mouse {
         &[data-appearance='icon']:hover {
@@ -35,13 +38,35 @@ tui-icon {
         }
     }
 
-    &::after,
-    &[tuiIcons]::after {
-        .fullsize();
+    &[data-icon-end] {
+        &::before {
+            mask-image:
+                var(--t-icon-start),
+                radial-gradient(circle at bottom 0.1em right 0.1em, transparent calc(0.4em - 0.5px), #000 0.4em);
+            mask-composite: intersect;
+        }
+
+        &[data-icon-start='img'],
+        &[data-icon-start='font'] {
+            &::before {
+                mask: radial-gradient(circle at bottom 0.1em right 0.1em, transparent calc(0.4em - 0.5px), #000 0.4em);
+            }
+        }
 
-        content: '';
-        display: block;
-        mask: var(--t-icon) no-repeat center/contain;
-        background: currentColor;
+        &::after {
+            .fullsize();
+        }
+    }
+
+    &[data-icon-start] {
+        &::before {
+            .fullsize();
+        }
+
+        &::after {
+            transform: translate(36%, 36%);
+
+            --tui-icon-size: 0.5715em;
+        }
     }
 }

package/styles/components/icons.less

@@ -3,11 +3,13 @@
  * @selector [tuiIcons]
  *
  * @description
- * Icons directive applies CSS mask to ::before and ::after pseudo elements
+ * Icons directive applies styles to ::before and ::after pseudo elements
  *
  * @vars
- * --t-icon-start — mask for ::before element
- * --t-icon-end — mask for ::after element
+ * --t-icon-start — depending on the data-icon-start, it can serve as either a mask (`svg`),
+  a background (`img`), or content (`font`) for the ::before element
+ * --t-icon-end — depending on the data-icon-end, it can serve as either a mask (`svg`),
+  a background (`img`), or content (`font`) for the ::after element
  *
  * @example
  * <button tuiIcons style="--t-icon-start: url('icon.svg')"></button>
@@ -22,19 +24,55 @@
     &::before,
     &::after {
         content: '';
-        display: var(--t-icon-start);
         inline-size: 1em;
         block-size: 1em;
         line-height: 1em;
-        font-size: 1.5rem;
+        font-size: var(--tui-icon-size, 1.5rem);
         flex-shrink: 0;
         box-sizing: content-box;
         background: currentColor;
-        mask: var(--t-icon-start) no-repeat center/contain padding-box;
+    }
+
+    &::before {
+        display: var(--t-icon-start);
+        mask:
+            var(--t-icon-start) no-repeat center / calc(~'min(1em, 100%)' + 10 * var(--tui-stroke-width, 0.125rem))
+                ~'min(1em, 100%)',
+            100% padding-box;
     }
 
     &::after {
         display: var(--t-icon-end);
-        mask: var(--t-icon-end) no-repeat center/contain padding-box;
+        mask: var(--t-icon-end) no-repeat center / calc(~'min(1em, 100%)' + 10 * var(--tui-stroke-width, 0.125rem))
+            ~'min(1em, 100%)' padding-box;
+    }
+
+    &[data-icon-start='img']::before {
+        mask: none;
+        background: var(--t-icon-start) no-repeat center / 1em padding-box;
+    }
+
+    &[data-icon-end='img']::after {
+        mask: none;
+        background: var(--t-icon-end) no-repeat center / 1em padding-box;
+    }
+
+    &[data-icon-start='font']::before,
+    &[data-icon-end='font']::after {
+        display: grid;
+        mask: none;
+        background: none;
+        font: 1.3em/1 var(--tui-font-icon, inherit);
+        text-align: center;
+        place-content: center;
+        text-transform: none;
+    }
+
+    &[data-icon-start='font']::before {
+        content: var(--t-icon-start);
+    }
+
+    &[data-icon-end='font']::after {
+        content: var(--t-icon-end);
     }
 }

package/styles/components/link.less

@@ -14,9 +14,6 @@
  * Icons, Appearance, Button
  */
 [tuiLink] {
-    // TODO: Remove in v5
-    --tui-text-tertiary: var(--tui-text-secondary);
-
     .transition(~'color, text-decoration, opacity');
 
     padding: 0;
@@ -53,6 +50,7 @@
         font-size: 0;
         line-height: 0;
         box-sizing: border-box;
+        mask-size: calc(100% + 10 * var(--tui-stroke-width, 0.125rem)) 100%;
     }
 
     &[tuiChevron]::after {

package/styles/mixins/mixins.less

@@ -75,9 +75,8 @@
     gap: calc(var(--t-gap, ~'0rem') - 2 * var(--t-margin, 0rem));
 
     > img,
-    > tui-svg,
     > tui-icon,
-    > tui-avatar,
+    > [tuiAvatar],
     > tui-badge,
     > [tuiBadge],
     > [tuiRadio],

package/styles/mixins/mixins.scss

@@ -72,9 +72,8 @@
     gap: calc(var(--t-gap) - 2 * var(--t-margin));
 
     > img,
-    > tui-svg,
     > tui-icon,
-    > tui-avatar,
+    > [tuiAvatar],
     > tui-badge,
     > [tuiBadge],
     > [tuiRadio],

package/styles/mixins/slider.less

@@ -1,7 +1,6 @@
 @thumb-diameters: {
     @s: 0.5rem;
     @m: 0.75rem;
-    @l: 0.75rem;
 };
 
 @track-inset: {
@@ -10,9 +9,8 @@
     @l: 1rem;
 };
 
-// TODO(v5): use `l` by default (default size for new textfields)
-.tui-slider-ticks-labels(@input-size: m) {
-    @thumb: @thumb-diameters[@@input-size];
+.tui-slider-ticks-labels(@thumb-size: m) {
+    @thumb: @thumb-diameters[@@thumb-size];
 
     --t-offset: calc(@thumb / 2);
 
@@ -45,27 +43,34 @@
         }
     }
 
-    /* TODO(v5): delete */
-    tui-input-slider + & {
-        margin-inline-start: calc(var(--tui-radius-m) / 2 + var(--t-offset));
+    tui-range + & {
+        --t-offset: @thumb;
     }
 
     /* TODO: add :has([tuiInputSlider]) */
-    tui-textfield + & {
-        --t-offset: calc(var(--tui-radius-m) / 2 + @thumb / 2);
+    tui-textfield[data-size='l'] + & {
+        --t-offset: calc(@track-inset[@l] + @thumb / 2);
     }
 
     /* TODO: add :has([tuiInputSlider]) */
-    tui-textfield[data-size='l'] + & {
-        --t-offset: calc(var(--tui-radius-l) / 2 + @thumb / 2);
+    tui-textfield[data-size='m'] + & {
+        --t-offset: calc(@track-inset[@m] + @thumb / 2);
     }
 
-    tui-input-range:not([new]) + &, /* TODO(v5): delete */
-    tui-range + & {
-        --t-offset: @thumb;
+    /* TODO: add :has([tuiInputSlider]) */
+    tui-textfield[data-size='s'] + & {
+        --t-offset: calc(@track-inset[@s] + @thumb / 2);
+    }
+
+    tui-input-range[data-size='l'] + & {
+        --t-offset: calc(@track-inset[@l] + @thumb);
+    }
+
+    tui-input-range[data-size='m'] + & {
+        --t-offset: calc(@track-inset[@m] + @thumb);
     }
 
-    tui-input-range[new] + & {
-        --t-offset: calc(@track-inset[@@input-size] + @thumb);
+    tui-input-range[data-size='s'] + & {
+        --t-offset: calc(@track-inset[@s] + @thumb);
     }
 }