@taiga-ui/core 4.5.0 → 4.6.0-canary.d8f9586

package/styles/components/group.less

@@ -26,26 +26,23 @@
 
     --t-group-radius: var(--tui-radius-l);
     --t-group-margin: -1px;
-    --t-group-clip: inset(-1px 1px -1px -1px);
+    --t-group-clip: inset(-1rem 1px -1rem -1rem);
 
     & > * {
         z-index: 1;
         flex: 1 1 0;
         min-inline-size: 0;
 
-        &._disabled,
-        &._disabled:hover {
+        &:disabled,
+        &._disabled {
             z-index: 0;
         }
 
-        &:invalid {
+        &:invalid,
+        &[data-mode='invalid'] {
             z-index: 2;
 
             --t-group-clip: none;
-
-            &:hover {
-                z-index: 4;
-            }
         }
 
         &:has(:invalid),
@@ -53,44 +50,28 @@
             z-index: 2;
 
             --t-group-clip: none;
-
-            &:hover {
-                z-index: 4;
-            }
-        }
-
-        &:hover {
-            z-index: 3;
-
-            --t-group-clip: inset(-1px 0.5px -1px -1px);
-        }
-
-        &:has([data-state='hover']) {
-            z-index: 3;
-
-            --t-group-clip: none;
         }
 
         &:focus-within {
-            z-index: 5;
+            z-index: 3;
 
             --t-group-clip: none;
         }
 
         &:has([data-focus='true']) {
-            z-index: 5;
+            z-index: 3;
 
             --t-group-clip: none;
         }
 
         &[data-mode='checked'] {
-            z-index: 6;
+            z-index: 4;
 
             --t-group-clip: none;
         }
 
         &:has([tuiBlock]:checked) {
-            z-index: 6;
+            z-index: 4;
 
             --t-group-clip: none;
         }
@@ -124,7 +105,7 @@
         display: inline-flex;
         flex-direction: column;
 
-        --t-group-clip: inset(-1px -1px 1px -1px);
+        --t-group-clip: inset(-1rem -1rem 1px -1rem);
 
         & > * {
             min-block-size: auto;
@@ -146,10 +127,6 @@
             &:only-child {
                 border-radius: var(--t-group-radius);
             }
-
-            &:hover {
-                --t-group-clip: inset(-1px -1px 0.5px -1px);
-            }
         }
     }
 }

package/styles/components/textfield.less

@@ -25,10 +25,6 @@ tui-textfield {
         --t-right: 2.25rem;
     }
 
-    &::before {
-        margin-inline-end: 0.75rem;
-    }
-
     &::after {
         margin-inline-start: 0.25rem;
     }
@@ -59,7 +55,7 @@ tui-textfield {
         }
 
         &::after {
-            margin: 0 -0.175rem 0 0.25rem;
+            margin: 0 -0.175rem 0 0.575rem;
             font-size: 1rem;
         }
 
@@ -70,6 +66,7 @@ tui-textfield {
 
         .t-content {
             gap: 0;
+            margin-inline-end: -0.325rem;
         }
     }
 
@@ -93,13 +90,17 @@ tui-textfield {
         }
 
         &::after {
-            margin: 0 -0.125rem 0 0.375rem;
+            margin: 0 -0.125rem 0 0.5rem;
         }
 
         input,
         select {
             font: var(--tui-font-text-s);
         }
+
+        .t-content {
+            margin-inline-end: -0.125rem;
+        }
     }
 
     /*
@@ -120,6 +121,7 @@ tui-textfield {
 
     &::before {
         z-index: 1;
+        margin-inline-end: 0.75rem;
     }
 
     &:has(:disabled:not(.t-filler, button, option))::before,
@@ -141,9 +143,11 @@ tui-textfield {
         select {
             padding-top: calc(var(--t-height) / 3);
 
-            &::placeholder,
+            &:not(:-webkit-autofill)::placeholder,
             &._empty {
-                color: transparent;
+                caret-color: var(--tui-text-primary);
+                color: transparent !important;
+                -webkit-text-fill-color: transparent !important;
             }
         }
     }
@@ -155,9 +159,11 @@ tui-textfield {
         select {
             padding-top: calc(var(--t-height) / 3);
 
-            &::placeholder,
+            &:not(:-webkit-autofill)::placeholder,
             &._empty {
-                color: transparent;
+                caret-color: var(--tui-text-primary);
+                color: transparent !important;
+                -webkit-text-fill-color: transparent !important;
             }
         }
     }
@@ -191,7 +197,7 @@ tui-textfield {
             & ~ .t-content {
                 opacity: var(--tui-disabled-opacity);
 
-                [tuiTooltip] {
+                tui-icon {
                     display: none;
                 }
             }
@@ -218,7 +224,9 @@ tui-textfield {
             .appearance-focus({
                 &::placeholder,
                 &._empty {
-                    color: var(--tui-text-tertiary);
+                    caret-color: var(--tui-text-primary);
+                    color: transparent !important;
+                    -webkit-text-fill-color: var(--tui-text-tertiary) !important;
                 }
 
                 & ~ label {
@@ -228,6 +236,13 @@ tui-textfield {
                 }
             });
         }
+
+        .ios-only({
+            &._ios-fix {
+                position: fixed;
+                left: 1000rem;
+            }
+        });
     }
 
     label:not([data-orientation='vertical']) {
@@ -250,16 +265,6 @@ tui-textfield {
         cursor: pointer;
     }
 
-    input:defined,
-    select:defined {
-        .ios-only({
-            &._ios-fix {
-                position: fixed;
-                left: 1000rem;
-            }
-        });
-    }
-
     button,
     a {
         pointer-events: auto;
@@ -271,6 +276,10 @@ tui-textfield {
         gap: 0.25rem;
         margin-inline-start: auto;
         isolation: isolate;
+
+        tui-icon {
+            pointer-events: auto;
+        }
     }
 
     .t-clear {

package/styles/theme/appearance/floating.less

@@ -2,8 +2,8 @@
 
 [tuiAppearance][data-appearance='floating'] {
     background: #fff;
-    color: rgba(0, 0, 0, 0.8);
-    box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.1);
+    color: rgb(0 0 0 / 80%);
+    box-shadow: 0 0.25rem 1.25rem rgb(0 0 0 / 10%);
 
     .appearance-hover({
         box-shadow: 0 0.875rem 2.625rem rgba(0, 0, 0, 0.14);

package/styles/theme/appearance/glass.less

@@ -1,11 +1,11 @@
 @import '@taiga-ui/core/styles/taiga-ui-local.less';
 
 [tuiAppearance][data-appearance='glass'] {
-    background: rgba(0, 0, 0, 0.4);
+    background: rgb(0 0 0 / 40%);
     color: #fff;
     backdrop-filter: blur(1rem);
 
-    --tui-border-focus: rgba(255, 255, 255, 0.64);
+    --tui-border-focus: rgb(255 255 255 / 64%);
 
     .appearance-hover({
         background: rgba(0, 0, 0, 0.48);
@@ -18,7 +18,7 @@
 
 [tuiTheme='dark'] [tuiAppearance][data-appearance='glass'],
 [tuiTheme='dark'][tuiAppearance][data-appearance='glass'] {
-    background: rgba(255, 255, 255, 0.3);
+    background: rgb(255 255 255 / 30%);
 
     .appearance-hover({
         background: rgba(255, 255, 255, 0.4);

package/styles/theme/appearance/opposite.less

@@ -1,7 +1,7 @@
 @import '@taiga-ui/core/styles/taiga-ui-local.less';
 
 [tuiAppearance][data-appearance='opposite'] {
-    --tui-border-focus: rgba(255, 255, 255, 0.64);
+    --tui-border-focus: rgb(255 255 255 / 64%);
 
     background: var(--tui-background-accent-opposite);
     color: var(--tui-background-base);
@@ -17,5 +17,5 @@
 
 [tuiTheme='dark'] [tuiAppearance][data-appearance='opposite'],
 [tuiTheme='dark'][tuiAppearance][data-appearance='opposite'] {
-    --tui-border-focus: rgba(51, 51, 51, 0.48);
+    --tui-border-focus: rgb(51 51 51 / 48%);
 }

package/styles/theme/appearance/textfield.less

@@ -3,7 +3,7 @@
 [tuiAppearance][data-appearance='textfield'] {
     .transition(~'box-shadow, background, outline-color, border-color');
 
-    --t-shadow: 0 0.125rem 0.1875rem rgba(0, 0, 0, 0.1);
+    --t-shadow: 0 0.125rem 0.1875rem rgb(0 0 0 / 10%);
 
     background-color: var(--tui-background-base);
     color: var(--tui-text-primary);
@@ -42,6 +42,11 @@
         caret-color: var(--tui-text-primary) !important;
         border-color: var(--tui-service-autofill-background) !important;
         box-shadow: 0 0 0 100rem var(--tui-service-autofill-background) inset !important;
+        transition: background-color 600000s 0s;
+
+        &::placeholder {
+            -webkit-text-fill-color: var(--tui-text-secondary);
+        }
     }
 }
 

package/styles/theme/palette.less

@@ -2,40 +2,41 @@
     // Backgrounds
     --tui-background-base: #222;
     --tui-background-base-alt: #333;
-    --tui-background-neutral-1: rgba(255, 255, 255, 0.08);
-    --tui-background-neutral-1-hover: rgba(255, 255, 255, 0.16);
-    --tui-background-neutral-1-pressed: rgba(255, 255, 255, 0.24);
-    --tui-background-neutral-2: rgba(255, 255, 255, 0.24);
-    --tui-background-neutral-2-hover: rgba(255, 255, 255, 0.32);
-    --tui-background-neutral-2-pressed: rgba(255, 255, 255, 0.4);
+    --tui-background-neutral-1: rgb(255 255 255 / 8%);
+    --tui-background-neutral-1-hover: rgb(255 255 255 / 16%);
+    --tui-background-neutral-1-pressed: rgb(255 255 255 / 24%);
+    --tui-background-neutral-2: rgb(255 255 255 / 24%);
+    --tui-background-neutral-2-hover: rgb(255 255 255 / 32%);
+    --tui-background-neutral-2-pressed: rgb(255 255 255 / 40%);
     --tui-background-accent-opposite: #fff;
     --tui-background-accent-opposite-hover: #f6f6f6;
     --tui-background-accent-opposite-pressed: #ededed;
-    --tui-background-elevation-1: #222;
-    --tui-background-elevation-2: #222;
+    --tui-background-elevation-1: #292929;
+    --tui-background-elevation-2: #333;
+    --tui-background-elevation-3: #333;
     // Other
-    --tui-service-autofill-background: rgb(85, 74, 42);
-    --tui-border-normal: rgba(255, 255, 255, 0.14);
-    --tui-border-hover: rgba(255, 255, 255, 0.6);
-    --tui-border-focus: rgba(255, 255, 255, 0.64);
+    --tui-service-autofill-background: rgb(85 74 42);
+    --tui-border-normal: rgb(255 255 255 / 14%);
+    --tui-border-hover: rgb(255 255 255 / 60%);
+    --tui-border-focus: rgb(255 255 255 / 64%);
     // Statuses
-    --tui-status-negative: rgba(255, 140, 103, 1);
-    --tui-status-negative-pale: rgba(244, 87, 37, 0.32);
-    --tui-status-negative-pale-hover: rgba(244, 87, 37, 0.4);
-    --tui-status-positive: rgb(74, 201, 155);
-    --tui-status-positive-pale: rgba(74, 201, 155, 0.32);
-    --tui-status-positive-pale-hover: rgba(74, 201, 155, 0.4);
-    --tui-status-warning: rgb(255, 199, 0);
-    --tui-status-warning-pale: rgba(255, 199, 0, 0.32);
-    --tui-status-warning-pale-hover: rgba(255, 199, 0, 0.4);
-    --tui-status-info: rgb(112, 182, 246);
-    --tui-status-info-pale: rgba(112, 182, 246, 0.32);
-    --tui-status-info-pale-hover: rgba(112, 182, 246, 0.4);
-    --tui-status-neutral: rgb(149, 155, 164);
+    --tui-status-negative: rgb(255 140 103 / 100%);
+    --tui-status-negative-pale: rgb(244 87 37 / 32%);
+    --tui-status-negative-pale-hover: rgb(244 87 37 / 40%);
+    --tui-status-positive: rgb(74 201 155);
+    --tui-status-positive-pale: rgb(74 201 155 / 32%);
+    --tui-status-positive-pale-hover: rgb(74 201 155 / 40%);
+    --tui-status-warning: rgb(255 199 0);
+    --tui-status-warning-pale: rgb(255 199 0 / 32%);
+    --tui-status-warning-pale-hover: rgb(255 199 0 / 40%);
+    --tui-status-info: rgb(112 182 246);
+    --tui-status-info-pale: rgb(112 182 246 / 32%);
+    --tui-status-info-pale-hover: rgb(112 182 246 / 40%);
+    --tui-status-neutral: rgb(149 155 164);
     // Text
-    --tui-text-primary: rgba(255, 255, 255, 1);
-    --tui-text-secondary: rgba(255, 255, 255, 0.72);
-    --tui-text-tertiary: rgba(255, 255, 255, 0.6);
+    --tui-text-primary: rgb(255 255 255 / 100%);
+    --tui-text-secondary: rgb(255 255 255 / 72%);
+    --tui-text-tertiary: rgb(255 255 255 / 60%);
     --tui-text-action: #6788ff;
     --tui-text-action-hover: #526ed3;
     --tui-text-positive: #44c596;
@@ -49,12 +50,12 @@
     // Backgrounds
     --tui-background-base: #fff;
     --tui-background-base-alt: #f6f6f6;
-    --tui-background-neutral-1: rgba(0, 0, 0, 0.04);
-    --tui-background-neutral-1-hover: rgba(0, 0, 0, 0.08);
-    --tui-background-neutral-1-pressed: rgba(0, 0, 0, 0.12);
-    --tui-background-neutral-2: rgba(0, 0, 0, 0.08);
-    --tui-background-neutral-2-hover: rgba(0, 0, 0, 0.1);
-    --tui-background-neutral-2-pressed: rgba(0, 0, 0, 0.14);
+    --tui-background-neutral-1: rgb(0 0 0 / 4%);
+    --tui-background-neutral-1-hover: rgb(0 0 0 / 8%);
+    --tui-background-neutral-1-pressed: rgb(0 0 0 / 12%);
+    --tui-background-neutral-2: rgb(0 0 0 / 8%);
+    --tui-background-neutral-2-hover: rgb(0 0 0 / 10%);
+    --tui-background-neutral-2-pressed: rgb(0 0 0 / 14%);
     --tui-background-accent-1: #526ed3;
     --tui-background-accent-1-hover: #6c86e2;
     --tui-background-accent-1-pressed: #314692;
@@ -66,31 +67,32 @@
     --tui-background-accent-opposite-pressed: #808080;
     --tui-background-elevation-1: #fff;
     --tui-background-elevation-2: #fff;
+    --tui-background-elevation-3: #fff;
     // Other
     --tui-service-autofill-background: #fff5c0;
-    --tui-service-selection-background: rgba(112, 182, 246, 0.12);
-    --tui-service-backdrop: rgba(0, 0, 0, 0.75);
-    --tui-border-normal: rgba(0, 0, 0, 0.1);
-    --tui-border-hover: rgba(0, 0, 0, 0.16);
-    --tui-border-focus: rgba(51, 51, 51, 0.64);
+    --tui-service-selection-background: rgb(112 182 246 / 12%);
+    --tui-service-backdrop: rgb(0 0 0 / 75%);
+    --tui-border-normal: rgb(0 0 0 / 10%);
+    --tui-border-hover: rgb(0 0 0 / 16%);
+    --tui-border-focus: rgb(51 51 51 / 64%);
     // Statuses
-    --tui-status-negative: rgba(244, 87, 37, 1);
-    --tui-status-negative-pale: rgba(244, 87, 37, 0.12);
-    --tui-status-negative-pale-hover: rgba(244, 87, 37, 0.24);
-    --tui-status-positive: rgba(74, 201, 155, 1);
-    --tui-status-positive-pale: rgba(74, 201, 155, 0.12);
-    --tui-status-positive-pale-hover: rgba(74, 201, 155, 0.24);
-    --tui-status-warning: rgba(255, 199, 0, 1);
-    --tui-status-warning-pale: rgba(255, 199, 0, 0.12);
-    --tui-status-warning-pale-hover: rgba(255, 199, 0, 0.24);
-    --tui-status-info: rgba(112, 182, 246, 1);
-    --tui-status-info-pale: rgba(112, 182, 246, 0.12);
-    --tui-status-info-pale-hover: rgba(112, 182, 246, 0.24);
-    --tui-status-neutral: rgb(121, 129, 140);
+    --tui-status-negative: rgb(244 87 37 / 100%);
+    --tui-status-negative-pale: rgb(244 87 37 / 12%);
+    --tui-status-negative-pale-hover: rgb(244 87 37 / 24%);
+    --tui-status-positive: rgb(74 201 155 / 100%);
+    --tui-status-positive-pale: rgb(74 201 155 / 12%);
+    --tui-status-positive-pale-hover: rgb(74 201 155 / 24%);
+    --tui-status-warning: rgb(255 199 0 / 100%);
+    --tui-status-warning-pale: rgb(255 199 0 / 12%);
+    --tui-status-warning-pale-hover: rgb(255 199 0 / 24%);
+    --tui-status-info: rgb(112 182 246 / 100%);
+    --tui-status-info-pale: rgb(112 182 246 / 12%);
+    --tui-status-info-pale-hover: rgb(112 182 246 / 24%);
+    --tui-status-neutral: rgb(121 129 140);
     // Text
-    --tui-text-primary: rgba(27, 31, 59, 1);
-    --tui-text-secondary: rgba(27, 31, 59, 0.65);
-    --tui-text-tertiary: rgba(27, 31, 59, 0.4);
+    --tui-text-primary: rgb(27 31 59 / 100%);
+    --tui-text-secondary: rgb(27 31 59 / 65%);
+    --tui-text-tertiary: rgb(27 31 59 / 40%);
     --tui-text-primary-on-accent-1: #fff;
     --tui-text-primary-on-accent-2: #fff;
     --tui-text-action: #526ed3;
@@ -124,9 +126,9 @@
     --tui-chart-categorical-21: #3682db;
     --tui-chart-categorical-22: #34b41f;
     // Shadows
-    --tui-shadow-small: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.1);
-    --tui-shadow-small-hover: 0 1rem 2.5rem rgba(0, 0, 0, 0.14);
-    --tui-shadow-medium: 0 0.375rem 2rem rgba(0, 0, 0, 0.12);
-    --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);
+    --tui-shadow-small: 0 0.25rem 1.25rem rgb(0 0 0 / 10%);
+    --tui-shadow-small-hover: 0 1rem 2.5rem rgb(0 0 0 / 14%);
+    --tui-shadow-medium: 0 0.375rem 2rem rgb(0 0 0 / 12%);
+    --tui-shadow-medium-hover: 0 1.25rem 4rem rgb(0 0 0 / 18%);
+    --tui-shadow-popup: 0 1.25rem 3rem rgb(0 0 0 / 20%);
 }

package/styles/theme/wrapper.less

@@ -51,7 +51,7 @@
 
     background: var(--tui-background-base);
     color: var(--tui-text-primary);
-    box-shadow: 0 0.125rem 0.1875rem rgba(0, 0, 0, 0.1);
+    box-shadow: 0 0.125rem 0.1875rem rgb(0 0 0 / 10%);
 
     &::after {
         .transition(color);