@taiga-ui/core 4.19.0 → 4.20.0-canary.ef907c4

package/styles/components/textfield.less

@@ -17,6 +17,7 @@ tui-textfield {
     border-radius: var(--tui-radius-l);
     font: var(--tui-font-text-m);
     box-sizing: border-box;
+    gap: 0.25rem;
 
     &[style*='--t-icon-start:'] {
         --t-left: 2.25rem;
@@ -26,10 +27,6 @@ tui-textfield {
         --t-right: 2.25rem;
     }
 
-    &::after {
-        margin-inline-start: 0.25rem;
-    }
-
     input,
     select {
         font: var(--tui-font-text-m);
@@ -40,6 +37,7 @@ tui-textfield {
         --t-padding: var(--tui-padding-s);
 
         border-radius: var(--tui-radius-m);
+        gap: 0;
         font: var(--tui-font-text-s);
 
         &[style*='--t-icon-start:'] {
@@ -66,7 +64,6 @@ tui-textfield {
         }
 
         .t-content {
-            gap: 0;
             margin-inline-end: -0.325rem;
         }
     }
@@ -87,11 +84,11 @@ tui-textfield {
         }
 
         &::before {
-            margin: 0 0.375rem 0 -0.125rem;
+            margin: 0 0.125rem 0 -0.125rem;
         }
 
         &::after {
-            margin: 0 -0.125rem 0 0.5rem;
+            margin: 0 -0.125rem 0 0.25rem;
         }
 
         input,
@@ -122,7 +119,7 @@ tui-textfield {
 
     &::before {
         z-index: 1;
-        margin-inline-end: 0.75rem;
+        margin-inline-end: 0.5rem;
     }
 
     &:has(:disabled:not(.t-filler, button, option))::before,
@@ -182,8 +179,10 @@ tui-textfield {
     .t-template {
         display: flex;
         align-items: center;
+        color: var(--tui-text-primary);
     }
 
+    &._with-template input,
     &._with-template select {
         color: transparent !important;
     }
@@ -276,7 +275,7 @@ tui-textfield {
     .t-content {
         display: flex;
         align-items: center;
-        gap: 0.25rem;
+        gap: inherit;
         margin-inline-start: auto;
         isolation: isolate;
         border-radius: inherit;

package/styles/theme/appearance/outline.less

@@ -66,7 +66,7 @@
 
     &::before,
     &::after {
-        .transition(color);
+        .transition(~'color, transform');
 
         color: var(--tui-text-tertiary);
     }

package/styles/theme/palette.less

@@ -1,6 +1,4 @@
-[tuiTheme='dark'] {
-    color-scheme: dark;
-
+.dark() {
     // Backgrounds
     --tui-background-base: #222;
     --tui-background-base-alt: #333;
@@ -47,12 +45,7 @@
     --tui-text-negative-hover: #bb593a;
 }
 
-[tuiTheme='light'] {
-    color-scheme: light;
-}
-
-&:root,
-[tuiTheme='light'] {
+.light() {
     // Backgrounds
     --tui-background-base: #fff;
     --tui-background-base-alt: #f6f6f6;
@@ -138,3 +131,29 @@
     --tui-shadow-medium-hover: 0 1.25rem 4rem rgba(0, 0, 0, 0.18);
     --tui-shadow-popup: 0 1.25rem 3rem rgba(0, 0, 0, 0.2);
 }
+
+@media screen {
+    [tuiTheme='dark'] {
+        color-scheme: dark;
+
+        .dark();
+    }
+
+    [tuiTheme='light'] {
+        color-scheme: light;
+    }
+
+    &:root,
+    [tuiTheme='light'] {
+        .light();
+    }
+}
+
+@media print {
+    &:root,
+    [tuiTheme] {
+        color-scheme: light;
+
+        .light();
+    }
+}

package/utils/miscellaneous/to-animation-options.d.ts

@@ -1,4 +1,4 @@
 import type { AnimationOptions } from '@angular/animations';
 export declare const TUI_ANIMATIONS_DEFAULT_DURATION = 300;
-export declare function tuiToAnimationOptions(speed: number, easing?: string): AnimationOptions;
+export declare function tuiToAnimationOptions(speed?: number, easing?: string): AnimationOptions;
 export declare function tuiGetDuration(speed: number): number;