@taiga-ui/core 4.32.0 → 4.33.0-canary.a0e1504

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@taiga-ui/core",
-  "version": "4.32.0",
+  "version": "4.33.0-canary.a0e1504",
   "description": "Core library for creating Angular components and applications using Taiga UI",
   "keywords": [
     "angular",
@@ -43,18 +43,18 @@
       "esm": "./esm2022/components/taiga-ui-core-components.mjs",
       "default": "./fesm2022/taiga-ui-core-components.mjs"
     },
-    "./pipes": {
-      "types": "./pipes/index.d.ts",
-      "esm2022": "./esm2022/pipes/taiga-ui-core-pipes.mjs",
-      "esm": "./esm2022/pipes/taiga-ui-core-pipes.mjs",
-      "default": "./fesm2022/taiga-ui-core-pipes.mjs"
-    },
     "./directives": {
       "types": "./directives/index.d.ts",
       "esm2022": "./esm2022/directives/taiga-ui-core-directives.mjs",
       "esm": "./esm2022/directives/taiga-ui-core-directives.mjs",
       "default": "./fesm2022/taiga-ui-core-directives.mjs"
     },
+    "./pipes": {
+      "types": "./pipes/index.d.ts",
+      "esm2022": "./esm2022/pipes/taiga-ui-core-pipes.mjs",
+      "esm": "./esm2022/pipes/taiga-ui-core-pipes.mjs",
+      "default": "./fesm2022/taiga-ui-core-pipes.mjs"
+    },
     "./services": {
       "types": "./services/index.d.ts",
       "esm2022": "./esm2022/services/taiga-ui-core-services.mjs",
@@ -181,60 +181,6 @@
       "esm": "./esm2022/components/textfield/taiga-ui-core-components-textfield.mjs",
       "default": "./fesm2022/taiga-ui-core-components-textfield.mjs"
     },
-    "./pipes/auto-color": {
-      "types": "./pipes/auto-color/index.d.ts",
-      "esm2022": "./esm2022/pipes/auto-color/taiga-ui-core-pipes-auto-color.mjs",
-      "esm": "./esm2022/pipes/auto-color/taiga-ui-core-pipes-auto-color.mjs",
-      "default": "./fesm2022/taiga-ui-core-pipes-auto-color.mjs"
-    },
-    "./pipes/calendar-sheet": {
-      "types": "./pipes/calendar-sheet/index.d.ts",
-      "esm2022": "./esm2022/pipes/calendar-sheet/taiga-ui-core-pipes-calendar-sheet.mjs",
-      "esm": "./esm2022/pipes/calendar-sheet/taiga-ui-core-pipes-calendar-sheet.mjs",
-      "default": "./fesm2022/taiga-ui-core-pipes-calendar-sheet.mjs"
-    },
-    "./pipes/fallback-src": {
-      "types": "./pipes/fallback-src/index.d.ts",
-      "esm2022": "./esm2022/pipes/fallback-src/taiga-ui-core-pipes-fallback-src.mjs",
-      "esm": "./esm2022/pipes/fallback-src/taiga-ui-core-pipes-fallback-src.mjs",
-      "default": "./fesm2022/taiga-ui-core-pipes-fallback-src.mjs"
-    },
-    "./pipes/flag": {
-      "types": "./pipes/flag/index.d.ts",
-      "esm2022": "./esm2022/pipes/flag/taiga-ui-core-pipes-flag.mjs",
-      "esm": "./esm2022/pipes/flag/taiga-ui-core-pipes-flag.mjs",
-      "default": "./fesm2022/taiga-ui-core-pipes-flag.mjs"
-    },
-    "./pipes/format-date": {
-      "types": "./pipes/format-date/index.d.ts",
-      "esm2022": "./esm2022/pipes/format-date/taiga-ui-core-pipes-format-date.mjs",
-      "esm": "./esm2022/pipes/format-date/taiga-ui-core-pipes-format-date.mjs",
-      "default": "./fesm2022/taiga-ui-core-pipes-format-date.mjs"
-    },
-    "./pipes/format-number": {
-      "types": "./pipes/format-number/index.d.ts",
-      "esm2022": "./esm2022/pipes/format-number/taiga-ui-core-pipes-format-number.mjs",
-      "esm": "./esm2022/pipes/format-number/taiga-ui-core-pipes-format-number.mjs",
-      "default": "./fesm2022/taiga-ui-core-pipes-format-number.mjs"
-    },
-    "./pipes/initials": {
-      "types": "./pipes/initials/index.d.ts",
-      "esm2022": "./esm2022/pipes/initials/taiga-ui-core-pipes-initials.mjs",
-      "esm": "./esm2022/pipes/initials/taiga-ui-core-pipes-initials.mjs",
-      "default": "./fesm2022/taiga-ui-core-pipes-initials.mjs"
-    },
-    "./pipes/month": {
-      "types": "./pipes/month/index.d.ts",
-      "esm2022": "./esm2022/pipes/month/taiga-ui-core-pipes-month.mjs",
-      "esm": "./esm2022/pipes/month/taiga-ui-core-pipes-month.mjs",
-      "default": "./fesm2022/taiga-ui-core-pipes-month.mjs"
-    },
-    "./pipes/order-week-days": {
-      "types": "./pipes/order-week-days/index.d.ts",
-      "esm2022": "./esm2022/pipes/order-week-days/taiga-ui-core-pipes-order-week-days.mjs",
-      "esm": "./esm2022/pipes/order-week-days/taiga-ui-core-pipes-order-week-days.mjs",
-      "default": "./fesm2022/taiga-ui-core-pipes-order-week-days.mjs"
-    },
     "./directives/appearance": {
       "types": "./directives/appearance/index.d.ts",
       "esm2022": "./esm2022/directives/appearance/taiga-ui-core-directives-appearance.mjs",
@@ -271,6 +217,12 @@
       "esm": "./esm2022/directives/icons/taiga-ui-core-directives-icons.mjs",
       "default": "./fesm2022/taiga-ui-core-directives-icons.mjs"
     },
+    "./directives/items-handlers": {
+      "types": "./directives/items-handlers/index.d.ts",
+      "esm2022": "./esm2022/directives/items-handlers/taiga-ui-core-directives-items-handlers.mjs",
+      "esm": "./esm2022/directives/items-handlers/taiga-ui-core-directives-items-handlers.mjs",
+      "default": "./fesm2022/taiga-ui-core-directives-items-handlers.mjs"
+    },
     "./directives/number-format": {
       "types": "./directives/number-format/index.d.ts",
       "esm2022": "./esm2022/directives/number-format/taiga-ui-core-directives-number-format.mjs",
@@ -295,6 +247,60 @@
       "esm": "./esm2022/directives/title/taiga-ui-core-directives-title.mjs",
       "default": "./fesm2022/taiga-ui-core-directives-title.mjs"
     },
+    "./pipes/auto-color": {
+      "types": "./pipes/auto-color/index.d.ts",
+      "esm2022": "./esm2022/pipes/auto-color/taiga-ui-core-pipes-auto-color.mjs",
+      "esm": "./esm2022/pipes/auto-color/taiga-ui-core-pipes-auto-color.mjs",
+      "default": "./fesm2022/taiga-ui-core-pipes-auto-color.mjs"
+    },
+    "./pipes/calendar-sheet": {
+      "types": "./pipes/calendar-sheet/index.d.ts",
+      "esm2022": "./esm2022/pipes/calendar-sheet/taiga-ui-core-pipes-calendar-sheet.mjs",
+      "esm": "./esm2022/pipes/calendar-sheet/taiga-ui-core-pipes-calendar-sheet.mjs",
+      "default": "./fesm2022/taiga-ui-core-pipes-calendar-sheet.mjs"
+    },
+    "./pipes/fallback-src": {
+      "types": "./pipes/fallback-src/index.d.ts",
+      "esm2022": "./esm2022/pipes/fallback-src/taiga-ui-core-pipes-fallback-src.mjs",
+      "esm": "./esm2022/pipes/fallback-src/taiga-ui-core-pipes-fallback-src.mjs",
+      "default": "./fesm2022/taiga-ui-core-pipes-fallback-src.mjs"
+    },
+    "./pipes/flag": {
+      "types": "./pipes/flag/index.d.ts",
+      "esm2022": "./esm2022/pipes/flag/taiga-ui-core-pipes-flag.mjs",
+      "esm": "./esm2022/pipes/flag/taiga-ui-core-pipes-flag.mjs",
+      "default": "./fesm2022/taiga-ui-core-pipes-flag.mjs"
+    },
+    "./pipes/format-date": {
+      "types": "./pipes/format-date/index.d.ts",
+      "esm2022": "./esm2022/pipes/format-date/taiga-ui-core-pipes-format-date.mjs",
+      "esm": "./esm2022/pipes/format-date/taiga-ui-core-pipes-format-date.mjs",
+      "default": "./fesm2022/taiga-ui-core-pipes-format-date.mjs"
+    },
+    "./pipes/format-number": {
+      "types": "./pipes/format-number/index.d.ts",
+      "esm2022": "./esm2022/pipes/format-number/taiga-ui-core-pipes-format-number.mjs",
+      "esm": "./esm2022/pipes/format-number/taiga-ui-core-pipes-format-number.mjs",
+      "default": "./fesm2022/taiga-ui-core-pipes-format-number.mjs"
+    },
+    "./pipes/initials": {
+      "types": "./pipes/initials/index.d.ts",
+      "esm2022": "./esm2022/pipes/initials/taiga-ui-core-pipes-initials.mjs",
+      "esm": "./esm2022/pipes/initials/taiga-ui-core-pipes-initials.mjs",
+      "default": "./fesm2022/taiga-ui-core-pipes-initials.mjs"
+    },
+    "./pipes/month": {
+      "types": "./pipes/month/index.d.ts",
+      "esm2022": "./esm2022/pipes/month/taiga-ui-core-pipes-month.mjs",
+      "esm": "./esm2022/pipes/month/taiga-ui-core-pipes-month.mjs",
+      "default": "./fesm2022/taiga-ui-core-pipes-month.mjs"
+    },
+    "./pipes/order-week-days": {
+      "types": "./pipes/order-week-days/index.d.ts",
+      "esm2022": "./esm2022/pipes/order-week-days/taiga-ui-core-pipes-order-week-days.mjs",
+      "esm": "./esm2022/pipes/order-week-days/taiga-ui-core-pipes-order-week-days.mjs",
+      "default": "./fesm2022/taiga-ui-core-pipes-order-week-days.mjs"
+    },
     "./utils/dom": {
       "types": "./utils/dom/index.d.ts",
       "esm2022": "./esm2022/utils/dom/taiga-ui-core-utils-dom.mjs",
@@ -323,9 +329,9 @@
     "@angular/router": ">=16.0.0",
     "@ng-web-apis/common": "^4.12.0",
     "@ng-web-apis/mutation-observer": "^4.12.0",
-    "@taiga-ui/cdk": "^4.32.0",
+    "@taiga-ui/cdk": "^4.33.0",
     "@taiga-ui/event-plugins": "^4.5.1",
-    "@taiga-ui/i18n": "^4.32.0",
+    "@taiga-ui/i18n": "^4.33.0",
     "@taiga-ui/polymorpheus": "^4.9.0",
     "rxjs": ">=7.0.0"
   },

package/styles/components/appearance.less

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

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);
         }
@@ -142,8 +178,10 @@ tui-textfield {
     &:has(label:not(:empty)) {
         .t-template,
         input:not([type='range']),
-        select:defined {
-            padding-top: calc(var(--t-height) / 3);
+        select:defined,
+        textarea:defined {
+            padding-block-start: calc(var(--t-height) / 3);
+            padding-block-end: 0;
 
             &::placeholder,
             &._empty {
@@ -156,8 +194,10 @@ tui-textfield {
     &._with-label {
         .t-template,
         input:not([type='range']),
-        select:defined {
+        select:defined,
+        textarea:defined {
             padding-top: calc(var(--t-height) / 3);
+            padding-block-end: 0;
 
             &::placeholder,
             &._empty {
@@ -168,13 +208,15 @@ tui-textfield {
 
     .t-template,
     input:defined,
-    select:defined {
+    select:defined,
+    textarea:defined {
         .fullsize();
 
         appearance: none;
         box-sizing: border-box;
         border-radius: inherit;
-        border: none;
+        border-width: 0;
+        overscroll-behavior: none;
         // 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,12 +229,14 @@ tui-textfield {
     }
 
     &._with-template input:not([type='range']),
-    &._with-template select {
+    &._with-template select,
+    &._with-template textarea {
         color: transparent !important;
     }
 
     input:not([type='range']),
-    select:defined {
+    select:defined,
+    textarea:defined {
         pointer-events: auto;
         background: transparent;
 
@@ -251,18 +295,22 @@ 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,
     input:defined::placeholder,
+    textarea:defined::placeholder,
     select:defined._empty {
         color: var(--tui-text-secondary);
     }
@@ -271,6 +319,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;
@@ -278,6 +331,7 @@ tui-textfield {
 
     .t-content {
         display: flex;
+        block-size: var(--t-height);
         align-items: center;
         gap: inherit;
         margin-inline-start: auto;
@@ -289,6 +343,10 @@ tui-textfield {
         }
     }
 
+    textarea ~ .t-content {
+        min-inline-size: 0.5rem;
+    }
+
     .t-clear {
         z-index: 1;
         display: none;

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/appearance/textfield.less

@@ -10,7 +10,7 @@
     box-shadow: var(--t-shadow);
     outline: 1px solid var(--tui-border-normal);
     outline-offset: -1px;
-    border: none;
+    border-width: 0;
 
     // TODO: Remove tuiWrapper hack in v5
     &:not([tuiWrapper])::before,