@taiga-ui/core 4.4.1 → 4.5.0-canary.49229f4

package/pipes/order-week-days/order-week-days.pipe.d.ts

@@ -1,11 +1,9 @@
 import type { PipeTransform } from '@angular/core';
 import type { Observable } from 'rxjs';
 import * as i0 from "@angular/core";
-type WeekDays<T> = [T, T, T, T, T, T, T];
 export declare class TuiOrderWeekDaysPipe implements PipeTransform {
     private readonly firstDayOfWeekIndex;
-    transform<T>(mondayFirstWeekDays$: Observable<WeekDays<T>>): Observable<WeekDays<T>>;
+    transform(mondayFirstWeekDays$: Observable<readonly string[]>): Observable<readonly string[]>;
     static ɵfac: i0.ɵɵFactoryDeclaration<TuiOrderWeekDaysPipe, never>;
     static ɵpipe: i0.ɵɵPipeDeclaration<TuiOrderWeekDaysPipe, "tuiOrderWeekDays", true>;
 }
-export {};

package/styles/components/button.less

@@ -26,7 +26,7 @@
 
     .button-base();
 
-    height: var(--t-size);
+    block-size: var(--t-size);
     justify-content: center;
     border-radius: var(--t-radius);
     padding: var(--t-padding);
@@ -116,22 +116,22 @@
 
         flex-direction: column;
         flex-shrink: 1;
-        height: auto;
+        block-size: auto;
         padding: 0.75rem;
         gap: 0.375rem;
-        min-width: 5rem;
+        min-inline-size: 5rem;
         white-space: pre-line;
         font: var(--tui-font-text-ui-s);
 
         & > * {
-            max-height: calc(var(--t-line-height) * 2);
+            max-block-size: calc(var(--t-line-height) * 2);
         }
     }
 }
 
 [tuiIconButton] {
     gap: 0;
-    width: var(--t-size);
+    inline-size: var(--t-size);
     font-size: 0 !important;
     padding: 0;
 

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-width: 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,10 +105,10 @@
         display: inline-flex;
         flex-direction: column;
 
-        --t-group-clip: inset(-1px -1px 1px -1px);
+        --t-group-clip: inset(-1rem -1rem 1px -1rem);
 
         & > * {
-            min-height: auto;
+            min-block-size: auto;
             flex: 0 0 auto;
 
             &:not(:last-child) {
@@ -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/icon.less

@@ -20,21 +20,28 @@
 tui-icon {
     position: relative;
     display: inline-block;
-    width: 1em;
-    height: 1em;
+    inline-size: 1em;
+    block-size: 1em;
     font-size: 1.5rem;
     flex-shrink: 0;
     vertical-align: middle;
     box-sizing: border-box;
     mask: var(--t-icon-bg) no-repeat center/contain;
 
+    @media (hover: hover) {
+        &[data-appearance='icon']:hover {
+            color: var(--tui-text-secondary);
+        }
+    }
+
     &::after,
     &[tuiIcons]::after {
         .fullsize();
 
         content: '';
         display: block;
-        mask: var(--t-icon) no-repeat center/contain intersect;
+        mask: var(--t-icon) no-repeat center/contain;
+        mask-composite: intersect;
         background: currentColor;
     }
 }

package/styles/components/icons.less

@@ -23,8 +23,8 @@
     &::after {
         content: '';
         display: var(--t-icon-start);
-        width: 1em;
-        height: 1em;
+        inline-size: 1em;
+        block-size: 1em;
         line-height: 1em;
         font-size: 1.5rem;
         flex-shrink: 0;

package/styles/components/label.less

@@ -23,7 +23,7 @@
 
     &:not([data-orientation='vertical']) {
         flex-direction: row;
-        width: fit-content;
+        inline-size: fit-content;
         font: var(--tui-font-text-m);
     }
 
@@ -32,7 +32,7 @@
     &:has(tui-primitive-textfield),
     &:has(tui-textarea) {
         flex-direction: column !important;
-        width: auto !important;
+        inline-size: auto !important;
         font: var(--tui-font-text-s) !important;
     }
 

package/styles/components/notification.less

@@ -27,7 +27,7 @@ tui-notification,
 
     position: relative;
     display: flex;
-    max-height: 100%;
+    max-block-size: 100%;
     color: var(--tui-text-primary);
     gap: 0.5rem;
     padding: 1rem;
@@ -35,7 +35,7 @@ tui-notification,
     border-radius: var(--tui-radius-l);
     box-sizing: border-box;
     overflow: hidden;
-    text-align: left;
+    text-align: start;
     text-decoration: none;
 
     &::after {

package/styles/components/textfield.less

@@ -10,7 +10,7 @@ tui-textfield {
     align-items: center;
     pointer-events: none;
     cursor: pointer;
-    height: var(--t-height);
+    block-size: var(--t-height);
     color: var(--tui-text-tertiary);
     padding: 0 var(--tui-padding-l);
     border-radius: var(--tui-radius-l);
@@ -25,10 +25,6 @@ tui-textfield {
         --t-right: 2.25rem;
     }
 
-    &::before {
-        margin-inline-end: 0.75rem;
-    }
-
     &::after {
         margin-inline-start: 0.25rem;
     }
@@ -102,12 +98,25 @@ tui-textfield {
         }
     }
 
+    /*
+    TODO: refactor to the following way after Chrome 105+ & Safari 15.4+
+    &:hover:has(input:not(:read-only)),
+    &:hover:has(select:not([data-mode='readonly'])) {
+        color: var(--tui-text-secondary);
+    }
+    */
     &:hover {
         color: var(--tui-text-secondary);
+
+        &:has(input:read-only),
+        &:has(select[data-mode='readonly']) {
+            color: var(--tui-text-tertiary);
+        }
     }
 
     &::before {
         z-index: 1;
+        margin-inline-end: 0.75rem;
     }
 
     &:has(:disabled:not(.t-filler, button, option))::before,
@@ -153,7 +162,7 @@ tui-textfield {
     .t-template,
     input:defined,
     select:defined {
-        .fullsize();
+        .fullsize(absolute, inset);
 
         appearance: none;
         box-sizing: border-box;
@@ -185,6 +194,7 @@ tui-textfield {
             }
         }
 
+        &:-webkit-autofill,
         &:not(._empty):not(:placeholder-shown) {
             & ~ label {
                 font-size: 0.83em;
@@ -215,6 +225,13 @@ tui-textfield {
                 }
             });
         }
+
+        .ios-only({
+            &._ios-fix {
+                position: fixed;
+                left: 1000rem;
+            }
+        });
     }
 
     label:not([data-orientation='vertical']) {
@@ -237,16 +254,6 @@ tui-textfield {
         cursor: pointer;
     }
 
-    input:defined,
-    select:defined {
-        .ios-only({
-            &._ios-fix {
-                position: fixed;
-                left: 1000rem;
-            }
-        });
-    }
-
     button,
     a {
         pointer-events: auto;

package/styles/components/title.less

@@ -22,7 +22,7 @@
     position: relative;
     display: flex;
     flex-direction: column;
-    text-align: left;
+    text-align: start;
     gap: 0.25rem;
     margin: 0;
     font: var(--tui-font-text-ui-m);

package/styles/mixins/mixins.less

@@ -38,8 +38,8 @@
     left: 0;
 
     & when (@mode = height) {
-        width: 100%;
-        height: 100%;
+        inline-size: 100%;
+        block-size: 100%;
     }
 
     & when (@mode = inset) {
@@ -69,7 +69,7 @@
     white-space: nowrap;
     overflow: hidden;
     vertical-align: middle;
-    max-width: 100%;
+    max-inline-size: 100%;
     gap: calc(var(--t-gap, var(--t-0, 0rem)) - 2 * var(--t-margin, 0rem));
 
     > img,
@@ -123,8 +123,8 @@
     position: absolute;
     clip: rect(1px, 1px, 1px, 1px);
     clip-path: inset(50%);
-    height: 1px;
-    width: 1px;
+    block-size: 1px;
+    inline-size: 1px;
     margin: -1px;
     overflow: hidden;
     padding: 0;

package/styles/mixins/picker.less

@@ -10,7 +10,7 @@
         position: relative;
         display: flex;
         justify-content: space-between;
-        height: 2.25rem;
+        block-size: 2.25rem;
         isolation: isolate;
     }
 
@@ -39,7 +39,7 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        width: @itemSize;
+        inline-size: @itemSize;
         text-align: center;
         outline: none;
         cursor: pointer;
@@ -63,8 +63,8 @@
 
             content: '';
             bottom: 0.3125rem;
-            height: 0.125rem;
-            width: 0.75rem;
+            block-size: 0.125rem;
+            inline-size: 0.75rem;
             border-radius: 0.375rem;
             background: var(--tui-text-primary);
         }
@@ -80,13 +80,13 @@
 
             &:not(:last-child)::before {
                 right: -0.1875rem;
-                border-top-right-radius: 0;
-                border-bottom-right-radius: 0;
+                border-start-end-radius: 0;
+                border-end-end-radius: 0;
             }
 
             &:not([data-range='start']):not(:first-child)::before {
-                border-top-left-radius: 0;
-                border-bottom-left-radius: 0;
+                border-start-start-radius: 0;
+                border-end-start-radius: 0;
             }
 
             &:last-child:first-child::before {
@@ -94,13 +94,13 @@
             }
 
             &:first-child > .t-item {
-                border-top-left-radius: var(--tui-radius-m);
-                border-bottom-left-radius: var(--tui-radius-m);
+                border-start-start-radius: var(--tui-radius-m);
+                border-end-start-radius: var(--tui-radius-m);
             }
 
             &:last-child > .t-item {
-                border-top-right-radius: var(--tui-radius-m);
-                border-bottom-right-radius: var(--tui-radius-m);
+                border-start-end-radius: var(--tui-radius-m);
+                border-end-end-radius: var(--tui-radius-m);
             }
 
             & > .t-item {
@@ -143,16 +143,16 @@
             }
 
             &:not(:first-child)::before {
-                border-top-left-radius: 0;
-                border-bottom-left-radius: 0;
+                border-start-start-radius: 0;
+                border-end-start-radius: 0;
             }
         }
 
         &[data-range='end'] > .t-item {
             &::before {
                 left: 0.625rem;
-                border-top-left-radius: 0;
-                border-bottom-left-radius: 0;
+                border-start-start-radius: 0;
+                border-end-start-radius: 0;
             }
 
             &::after {
@@ -165,8 +165,8 @@
         &[data-range='start'] > .t-item {
             &::before {
                 right: 0.625rem;
-                border-top-right-radius: 0;
-                border-bottom-right-radius: 0;
+                border-start-end-radius: 0;
+                border-end-end-radius: 0;
             }
 
             &::after {

package/styles/mixins/slider.less

@@ -18,13 +18,13 @@
         &:first-child {
             left: -@first-tick-center;
             flex: 1;
-            text-align: left;
+            text-align: start;
         }
 
         &:last-child {
             right: -@first-tick-center;
             flex: 1;
-            text-align: right;
+            text-align: end;
         }
     }
 

package/styles/mixins/slider.scss

@@ -18,13 +18,13 @@ $thumb-diameters: (
         &:first-child {
             left: -$first-tick-center;
             flex: 1;
-            text-align: left;
+            text-align: start;
         }
 
         &:last-child {
             right: -$first-tick-center;
             flex: 1;
-            text-align: right;
+            text-align: end;
         }
     }
 

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

@@ -1,9 +1,9 @@
 @import '@taiga-ui/core/styles/taiga-ui-local.less';
 
 [tuiAppearance][data-appearance='textfield'] {
-    .transition(~'box-shadow, background, outline-color');
+    .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);
@@ -31,21 +31,25 @@
         outline-color: var(--tui-status-negative);
     }
 
-    &[data-mode='readonly'] {
+    &[data-mode='readonly'],
+    input&:read-only:not([data-mode]) {
         box-shadow: none;
         outline-color: var(--tui-border-normal) !important;
     }
 
     &:-webkit-autofill {
         -webkit-text-fill-color: var(--tui-text-primary) !important;
-        border-color: var(--tui-service-autofill-background);
+        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;
     }
 }
 
 [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);