@taiga-ui/core 4.52.0-canary.a4e325d → 4.52.0-canary.e444d19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@taiga-ui/core",
-  "version": "4.52.0-canary.a4e325d",
+  "version": "4.52.0-canary.e444d19",
   "description": "Core library for creating Angular components and applications using Taiga UI",
   "keywords": [
     "angular",

package/styles/components/icon.less

@@ -9,18 +9,20 @@
  *
  * @vars
  * --t-icon — depending on the data-icon, it can serve as either a mask (`svg`),
-  a background (`image`), or content (`font`) for the icon.
+  a background (`img`), or content (`font`) for the icon.
  * --t-icon-bg — mask for the background
  *
  * @example
- * <tui-icon data-icon="svg" 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;
@@ -28,8 +30,7 @@ tui-icon {
     border: 0 solid transparent;
     vertical-align: middle;
     box-sizing: border-box;
-    mask: var(--t-icon-bg) no-repeat center / calc(~'min(1em, 100%)' + 10 * var(--tui-stroke-width, 0.125rem))
-        ~'min(1em, 100%)' padding-box;
+    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 {
@@ -37,30 +38,35 @@ tui-icon {
         }
     }
 
-    &::before,
-    &[tuiIcons]::before {
-        .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;
+        }
 
-        content: '';
-        display: block;
-        mask:
-            var(--t-icon) no-repeat center / calc(~'min(1em, 100%)' + 10 * var(--tui-stroke-width, 0.125rem))
-                ~'min(1em, 100%)',
-            100% padding-box;
-        background: currentColor;
-    }
+        &[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);
+            }
+        }
 
-    &[data-icon='image']::before {
-        mask: none;
-        background: var(--t-icon) no-repeat center/contain;
+        &::after {
+            .fullsize();
+        }
     }
 
-    &[data-icon='font']::before {
-        content: var(--t-icon);
-        mask: none;
-        background: none;
-        font: 1em/1 var(--tui-font-icon, inherit);
-        text-align: center;
-        text-transform: none;
+    &[data-icon-start] {
+        &::before {
+            .fullsize();
+        }
+
+        &::after {
+            transform: translate(36%, 36%);
+
+            --tui-icon-size: 0.5715em;
+        }
     }
 }

package/styles/components/icons.less

@@ -7,12 +7,12 @@
  *
  * @vars
  * --t-icon-start — depending on the data-icon-start, it can serve as either a mask (`svg`),
-  a background (`image`), or content (`font`) for the ::before element
+  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 (`image`), or content (`font`) for the ::after element
+  a background (`img`), or content (`font`) for the ::after element
  *
  * @example
- * <button tuiIcons data-icon-start="svg" style="--t-icon-start: url('icon.svg')"></button>
+ * <button tuiIcons style="--t-icon-start: url('icon.svg')"></button>
  *
  * @see-also
  * Button, Icon, Link
@@ -27,7 +27,7 @@
         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;
@@ -35,8 +35,10 @@
 
     &::before {
         display: var(--t-icon-start, none);
-        mask: var(--t-icon-start) no-repeat center / calc(~'min(1em, 100%)' + 10 * var(--tui-stroke-width, 0.125rem))
-            ~'min(1em, 100%)' padding-box;
+        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 {
@@ -45,12 +47,12 @@
             ~'min(1em, 100%)' padding-box;
     }
 
-    &[data-icon-start='image']::before {
+    &[data-icon-start='img']::before {
         mask: none;
         background: var(--t-icon-start) no-repeat center/contain padding-box;
     }
 
-    &[data-icon-end='image']::after {
+    &[data-icon-end='img']::after {
         mask: none;
         background: var(--t-icon-end) no-repeat center/contain padding-box;
     }

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;

package/styles/mixins/mixins.less

@@ -77,7 +77,7 @@
     > img,
     > tui-svg,
     > tui-icon,
-    > tui-avatar,
+    > [tuiAvatar],
     > tui-badge,
     > [tuiBadge],
     > [tuiRadio],

package/styles/mixins/mixins.scss

@@ -74,7 +74,7 @@
     > img,
     > tui-svg,
     > tui-icon,
-    > tui-avatar,
+    > [tuiAvatar],
     > tui-badge,
     > [tuiBadge],
     > [tuiRadio],

package/tokens/icon-resolver.d.ts

@@ -5,6 +5,6 @@ export declare const TUI_ICON_RESOLVER: InjectionToken<TuiStringHandler<string>>
  * @deprecated use {@link TUI_ICON_RESOLVER}
  */
 export declare const TUI_ICON_START_RESOLVER: InjectionToken<TuiStringHandler<string>>;
-export declare function tuiGetIconMode(icon?: string | null): 'font' | 'image' | 'svg' | null;
+export declare function tuiGetIconMode(icon?: string | null): string | undefined;
 export declare function tuiInjectIconResolver(): TuiStringHandler<string>;
 export declare function tuiIconResolverProvider(useValue: TuiStringHandler<string>): Provider;