@taiga-ui/core 4.31.0 → 4.32.0-canary.67993cb

package/styles/components/textfield.less

@@ -1,6 +1,7 @@
 @import '@taiga-ui/core/styles/taiga-ui-local.less';
 
 tui-textfield {
+    .scrollbar-hidden();
     .transition(color);
 
     --t-height: var(--tui-height-l);
@@ -8,16 +9,16 @@ tui-textfield {
 
     position: relative;
     display: flex;
+    flex-wrap: wrap;
     align-items: center;
-    pointer-events: none;
     cursor: pointer;
-    block-size: var(--t-height);
+    min-block-size: var(--t-height);
     color: var(--tui-text-tertiary);
     padding: 0 var(--t-padding);
     border-radius: var(--tui-radius-l);
-    font: var(--tui-font-text-m);
+    font: var(--tui-font-text-ui-m);
     box-sizing: border-box;
-    gap: 0.25rem;
+    gap: 0 0.25rem;
 
     &[style*='--t-icon-start:'] {
         --t-left: 2.25rem;
@@ -27,13 +28,40 @@ tui-textfield {
         --t-right: 2.25rem;
     }
 
-    input,
-    select {
-        font: var(--tui-font-text-m);
+    &::-webkit-resizer {
+        border: 0.25rem solid transparent;
+        inline-size: 0.5rem;
+        block-size: 0.5rem;
+        box-sizing: content-box;
+        color: var(--tui-text-tertiary);
+        background: linear-gradient(
+            -45deg,
+            transparent,
+            transparent 0.125rem,
+            currentColor 0.125rem,
+            currentColor 0.1875rem,
+            transparent 0.1875rem,
+            transparent 0.25rem,
+            currentColor 0.25rem,
+            currentColor 0.3125rem,
+            transparent 0.35rem
+        );
+        background-clip: content-box;
+    }
 
-        &[inputmode='none'] {
-            caret-color: transparent;
-        }
+    label,
+    .t-content,
+    .t-template {
+        pointer-events: none;
+    }
+
+    input,
+    select,
+    textarea {
+        font: var(--tui-font-text-ui-m);
+        resize: none;
+        padding-block-start: 1.125rem;
+        padding-block-end: 1.125rem;
     }
 
     &[data-size='s'] {
@@ -42,7 +70,7 @@ tui-textfield {
 
         border-radius: var(--tui-radius-m);
         gap: 0;
-        font: var(--tui-font-text-s);
+        font: var(--tui-font-text-ui-s);
 
         &[style*='--t-icon-start:'] {
             --t-left: 1.25rem;
@@ -63,8 +91,11 @@ tui-textfield {
         }
 
         input,
-        select {
-            font: var(--tui-font-text-s);
+        select,
+        textarea {
+            font: var(--tui-font-text-ui-s);
+            padding-block-start: 0.5rem;
+            padding-block-end: 0.5rem;
         }
 
         .t-content {
@@ -77,7 +108,7 @@ tui-textfield {
         --t-padding: var(--tui-padding-m);
 
         border-radius: var(--tui-radius-m);
-        font: var(--tui-font-text-s);
+        font: var(--tui-font-text-ui-s);
 
         &[style*='--t-icon-start:'] {
             --t-left: 1.75rem;
@@ -96,8 +127,11 @@ tui-textfield {
         }
 
         input,
-        select {
-            font: var(--tui-font-text-s);
+        select,
+        textarea {
+            font: var(--tui-font-text-ui-s);
+            padding-block-start: 0.875rem;
+            padding-block-end: 0.875rem;
         }
 
         .t-content {
@@ -108,6 +142,7 @@ tui-textfield {
     /*
     TODO: refactor to the following way after Chrome 105+ & Safari 15.4+
     &:hover:has(input:not(:read-only)),
+    &:hover:has(textarea:not(:read-only)),
     &:hover:has(select:not([data-mode='readonly'])) {
         color: var(--tui-text-secondary);
     }
@@ -116,6 +151,7 @@ tui-textfield {
         color: var(--tui-text-secondary);
 
         &:has(input:read-only),
+        &:has(textarea:read-only),
         &:has(select[data-mode~='readonly']) {
             color: var(--tui-text-tertiary);
         }
@@ -141,9 +177,11 @@ tui-textfield {
 
     &:has(label:not(:empty)) {
         .t-template,
-        input:first-of-type,
-        select:defined {
-            padding-top: calc(var(--t-height) / 3);
+        input:not([type='range']),
+        select:defined,
+        textarea:defined {
+            padding-block-start: calc(var(--t-height) / 3);
+            padding-block-end: 0;
 
             &::placeholder,
             &._empty {
@@ -155,9 +193,11 @@ tui-textfield {
     // TODO: Fallback until Safari 15.4
     &._with-label {
         .t-template,
-        input:first-of-type,
-        select:defined {
+        input:not([type='range']),
+        select:defined,
+        textarea:defined {
             padding-top: calc(var(--t-height) / 3);
+            padding-block-end: 0;
 
             &::placeholder,
             &._empty {
@@ -168,16 +208,16 @@ tui-textfield {
 
     .t-template,
     input:defined,
-    select:defined {
+    select:defined,
+    textarea:defined {
         .fullsize();
 
         appearance: none;
         box-sizing: border-box;
         border-radius: inherit;
-        padding: inherit;
         border: none;
-        text-indent: var(--t-left, 0);
         // StackBlitz changes "0rem" to "0" breaking calc
+        padding-inline-start: calc(var(--t-left, ~'0rem') + var(--t-padding));
         padding-inline-end: calc(var(--t-right, ~'0rem') + var(--t-side) + var(--t-padding));
     }
 
@@ -187,13 +227,15 @@ tui-textfield {
         color: var(--tui-text-primary);
     }
 
-    &._with-template input:first-of-type,
-    &._with-template select {
+    &._with-template input:not([type='range']),
+    &._with-template select,
+    &._with-template textarea {
         color: transparent !important;
     }
 
-    input:first-of-type,
-    select:defined {
+    input:not([type='range']),
+    select:defined,
+    textarea:defined {
         pointer-events: auto;
         background: transparent;
 
@@ -252,14 +294,17 @@ tui-textfield {
         });
     }
 
-    label:not([data-orientation='vertical']) {
+    // Increasing specificity to override all other styles
+    [tuiLabel][tuiLabel][tuiLabel] {
         .transition(all);
         .text-overflow();
 
         position: relative;
         display: block;
         flex: 1;
+        align-self: flex-start;
         font-size: inherit;
+        line-height: var(--t-height);
     }
 
     label:defined,
@@ -272,6 +317,11 @@ tui-textfield {
         cursor: pointer;
     }
 
+    select option:not(:disabled) {
+        // In Windows OS native options inherit color of host <select>
+        color: var(--tui-text-primary);
+    }
+
     button,
     a {
         pointer-events: auto;
@@ -279,6 +329,7 @@ tui-textfield {
 
     .t-content {
         display: flex;
+        block-size: var(--t-height);
         align-items: center;
         gap: inherit;
         margin-inline-start: auto;

package/styles/theme/appearance/table.less

@@ -17,7 +17,7 @@ TODO: remove :not([tuiWrapper]) after legacy controls deletion
     background: transparent;
     border: none;
     outline: none;
-    padding-bottom: calc(var(--t-row-height) - var(--t-height));
+    border-bottom: calc(var(--t-row-height) - var(--t-height)) solid transparent;
 
     &:not(._empty) {
         color: var(--tui-text-primary);

package/styles/theme/palette.less

@@ -12,8 +12,8 @@
     --tui-background-accent-opposite-hover: #f6f6f6;
     --tui-background-accent-opposite-pressed: #ededed;
     --tui-background-elevation-1: #292929;
-    --tui-background-elevation-2: #333;
-    --tui-background-elevation-3: #333;
+    --tui-background-elevation-2: #2f2f2f;
+    --tui-background-elevation-3: #373737;
     // Other
     --tui-service-autofill-background: rgb(85, 74, 42);
     --tui-border-normal: rgba(255, 255, 255, 0.14);