@taiga-ui/core 4.20.0 → 4.21.0-canary.07e335a

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@taiga-ui/core",
-  "version": "4.20.0",
+  "version": "4.21.0-canary.07e335a",
   "description": "Core library for creating Angular components and applications using Taiga UI",
   "keywords": [
     "angular",
@@ -317,10 +317,10 @@
     "@angular/router": ">=16.0.0",
     "@ng-web-apis/common": "^4.11.1",
     "@ng-web-apis/mutation-observer": "^4.11.1",
-    "@taiga-ui/cdk": "^4.20.0",
+    "@taiga-ui/cdk": "^4.21.0",
     "@taiga-ui/event-plugins": "^4.3.1",
-    "@taiga-ui/i18n": "^4.20.0",
-    "@taiga-ui/polymorpheus": "^4.7.4",
+    "@taiga-ui/i18n": "^4.21.0",
+    "@taiga-ui/polymorpheus": "^4.8.0",
     "rxjs": ">=7.0.0"
   },
   "schematics": "./schematics/collection.json",

package/styles/components/appearance.less

@@ -26,7 +26,7 @@
     appearance: none;
     outline: 0.125rem solid transparent;
     outline-offset: -0.125rem;
-    transition-property: color, background, opacity, box-shadow, border, border-radius;
+    transition-property: color, background-color, opacity, box-shadow, border, border-radius;
 
     &.tui-appearance-initializing {
         transition: none !important;

package/styles/mixins/mixins.less

@@ -1,12 +1,12 @@
 @import 'browsers.less';
 
 .interactive(@ruleset) {
-    // TODO switch to :is after Safari 14 support
-    &:-webkit-any(a, button, select, textarea, input, label) {
+    // TODO remove after dropping Safari 13 support
+    &:matches(a, button, select, textarea, input, label) {
         @ruleset();
     }
 
-    &:-moz-any(a, button, select, textarea, input, label) {
+    &:is(a, button, select, textarea, input, label) {
         @ruleset();
     }
 }

package/styles/mixins/mixins.scss

@@ -1,12 +1,12 @@
 @import 'browsers.scss';
 
 @mixin interactive {
-    // TODO switch to :is after Safari 14 and FF 78 support
-    &:-webkit-any(a, button, select, textarea, input) {
+    // TODO remove after dropping Safari 13 support
+    &:matches(a, button, select, textarea, input) {
         @content;
     }
 
-    &:-moz-any(a, button, select, textarea, input) {
+    &:is(a, button, select, textarea, input) {
         @content;
     }
 }

package/styles/theme/appearance/table.less

@@ -0,0 +1,66 @@
+@import '@taiga-ui/core/styles/taiga-ui-local.less';
+
+/*
+TODO: remove :not([tuiWrapper]) after legacy controls deletion
+*/
+[tuiAppearance][data-appearance='table']:not([tuiWrapper]) {
+    content: '';
+    position: fixed;
+    /* TODO: Use inset: -0.0625rem after Safari 14+ support */
+    top: -0.0625rem;
+    bottom: -0.0625rem;
+    left: -0.0625rem;
+    right: -0.0625rem;
+    inline-size: auto;
+    block-size: auto;
+    border-radius: 0;
+    background: transparent;
+    border: none;
+    outline: none;
+    padding-bottom: calc(var(--t-row-height) - var(--t-height));
+
+    &:not(._empty) {
+        color: var(--tui-text-primary);
+    }
+
+    .appearance-hover({
+        &[data-focus='false'] {
+            background-color: var(--tui-background-neutral-1);
+        }
+    });
+
+    .appearance-focus({
+        outline-offset: -0.125rem;
+        outline: 0.125rem solid var(--tui-border-focus);
+    });
+
+    &:invalid,
+    &[data-mode~='invalid'] {
+        background-origin: border-box;
+        background-position: top right;
+        background-repeat: no-repeat;
+        background-image: linear-gradient(to top right, transparent 0% 50%, var(--tui-status-negative) 50% 100%);
+        background-size: 0.5rem 0.5rem;
+
+        &[data-focus='false'] {
+            background-color: var(--tui-status-negative-pale);
+        }
+
+        .appearance-hover({
+            &[data-focus='false'] {
+                background-color: var(--tui-status-negative-pale-hover);
+            }
+        });
+
+        .appearance-disabled({
+            background: transparent;
+            outline: none;
+        });
+
+        .appearance-focus({
+            background-color: transparent;
+            outline-offset: -0.0625rem;
+            outline: 0.0625rem solid var(--tui-status-negative);
+        });
+    }
+}

package/styles/theme/appearance/textfield.less

@@ -1,7 +1,7 @@
 @import '@taiga-ui/core/styles/taiga-ui-local.less';
 
 [tuiAppearance][data-appearance='textfield'] {
-    .transition(~'box-shadow, background, outline-color, border-color');
+    .transition(~'box-shadow, background-color, outline-color, border-color');
 
     --t-shadow: 0 0.125rem 0.1875rem rgba(0, 0, 0, 0.1);
 

package/styles/theme/appearance.less

@@ -8,5 +8,6 @@
 @import 'appearance/primary.less';
 @import 'appearance/secondary.less';
 @import 'appearance/status.less';
+@import 'appearance/table.less';
 // Do not add it, we need it separately in proprietary theme
 // @import 'appearance/textfield.less';