@taiga-ui/core 4.33.0 → 4.34.0-canary.7b7adbb

package/styles/components/textfield.less

@@ -50,8 +50,8 @@ tui-textfield {
     }
 
     label,
-    .t-content,
-    .t-template {
+    & > .t-content,
+    & > .t-template {
         pointer-events: none;
     }
 
@@ -98,7 +98,7 @@ tui-textfield {
             padding-block-end: 0.5rem;
         }
 
-        .t-content {
+        & > .t-content {
             margin-inline-end: -0.325rem;
         }
     }
@@ -134,7 +134,7 @@ tui-textfield {
             padding-block-end: 0.875rem;
         }
 
-        .t-content {
+        & > .t-content {
             margin-inline-end: -0.125rem;
         }
     }
@@ -164,19 +164,19 @@ tui-textfield {
 
     &:has(:disabled:not(.t-filler, button, option))::before,
     &:has(:disabled:not(.t-filler, button, option))::after,
-    &:has(:disabled:not(.t-filler, button, option)) .t-template {
+    &:has(:disabled:not(.t-filler, button, option)) > .t-template {
         opacity: var(--tui-disabled-opacity);
     }
 
     // TODO: Fallback until Safari 15.4
     &._disabled::before,
     &._disabled::after,
-    &._disabled .t-template {
+    &._disabled > .t-template {
         opacity: var(--tui-disabled-opacity);
     }
 
     &:has(label:not(:empty)) {
-        .t-template,
+        & > .t-template,
         input:not([type='range']),
         select:defined,
         textarea:defined {
@@ -192,7 +192,7 @@ tui-textfield {
 
     // TODO: Fallback until Safari 15.4
     &._with-label {
-        .t-template,
+        & > .t-template,
         input:not([type='range']),
         select:defined,
         textarea:defined {
@@ -206,7 +206,7 @@ tui-textfield {
         }
     }
 
-    .t-template,
+    & > .t-template,
     input:defined,
     select:defined,
     textarea:defined {
@@ -222,7 +222,7 @@ tui-textfield {
         padding-inline-end: calc(var(--t-right, ~'0rem') + var(--t-side) + var(--t-padding));
     }
 
-    .t-template {
+    & > .t-template {
         display: flex;
         align-items: center;
         color: var(--tui-text-primary);
@@ -315,13 +315,27 @@ tui-textfield {
         color: var(--tui-text-secondary);
     }
 
-    select:not([data-mode~='readonly']) {
-        cursor: pointer;
-    }
+    select {
+        &:not([data-mode~='readonly']) {
+            cursor: pointer;
+        }
 
-    select option:not(:disabled) {
-        // In Windows OS native options inherit color of host <select>
-        color: var(--tui-text-primary);
+        option[value='']:disabled {
+            // Hide placeholder from native datalist (Windows OS only)
+            color: transparent;
+        }
+
+        optgroup,
+        option {
+            // Windows OS only
+            background-color: var(--tui-background-elevation-3);
+        }
+
+        optgroup,
+        option:not(:disabled) {
+            // In Windows OS native options inherit color of host <select>
+            color: var(--tui-text-primary);
+        }
     }
 
     button,
@@ -329,7 +343,7 @@ tui-textfield {
         pointer-events: auto;
     }
 
-    .t-content {
+    & > .t-content {
         display: flex;
         block-size: var(--t-height);
         align-items: center;
@@ -353,7 +367,7 @@ tui-textfield {
         pointer-events: auto;
     }
 
-    .t-filler:defined {
+    & > .t-filler:defined {
         pointer-events: none;
         background: none;
         color: var(--tui-text-tertiary);

package/styles/mixins/mixins.less

@@ -89,6 +89,7 @@
     }
 }
 
+// TODO remove @speed in 5.0
 // transition
 .transition(@param: all, @speed: var(--tui-duration, 300ms)) {
     transition-property: @param;
@@ -158,3 +159,12 @@
     min-inline-size: 0;
     max-inline-size: max-content;
 }
+
+.tui-line-clamp(@count: 3) {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: @count;
+    line-clamp: @count;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}

package/styles/mixins/mixins.scss

@@ -152,3 +152,12 @@
     min-inline-size: 0;
     max-inline-size: max-content;
 }
+
+@mixin tui-line-clamp($count: 3) {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: $count;
+    line-clamp: $count;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}

package/styles/theme/appearance/textfield.less

@@ -70,7 +70,6 @@
 [tuiTheme='dark'] [tuiAppearance][data-appearance='textfield'],
 [tuiTheme='dark'][tuiAppearance][data-appearance='textfield'] {
     background-color: var(--tui-background-neutral-1);
-    color-scheme: dark;
 
     .appearance-hover({
         background-color: var(--tui-background-neutral-1-hover);