@taiga-ui/core 4.66.0 → 5.0.0-rc.0

package/styles/components/textfield.less

@@ -7,44 +7,60 @@ tui-textfield {
     --t-height: var(--tui-height-l);
     --t-padding: var(--tui-padding-l);
     --t-label-y: -0.75rem;
-    --t-label-font: var(--tui-font-text-s);
+    --t-label-font: var(--tui-font-body-s);
     --t-end: ~'0rem';
     --t-start: ~'0rem';
 
     position: relative;
     display: flex;
     flex-wrap: wrap;
-    align-items: center;
-    cursor: pointer;
+    align-items: flex-start;
     min-block-size: var(--t-height);
     padding: 0 var(--t-padding);
     border-radius: var(--tui-radius-l);
-    font: var(--tui-font-text-ui-m);
+    font: var(--tui-font-ui-m);
     line-height: 1.25rem;
     box-sizing: border-box;
     gap: 0 0.25rem;
     isolation: isolate;
 
-    // Increasing specificity to override custom appearance
-    &[tuiIcons]:read-only {
-        color: var(--tui-text-tertiary);
+    &[tuiAppearance] {
+        outline: none;
+
+        &[data-appearance=''] {
+            color: var(--tui-text-tertiary);
+
+            &:not([data-mode~='readonly']) {
+                .appearance-hover({
+                    color: var(--tui-text-secondary);
+                });
+            }
+        }
     }
 
-    &[style*='--t-icon-start:'] {
+    &[data-icon-start] {
         --t-start: 2.25rem;
     }
 
-    &[style*='--t-icon-end:'] {
+    &[data-icon-end] {
         --t-end: 2.25rem;
     }
 
-    &[tuiIcons]::after {
-        position: relative;
-        block-size: auto;
-        align-self: stretch;
-        border-inline-start: var(--t-padding) solid transparent;
-        border-inline-end: var(--t-padding) solid transparent;
-        margin: 0 calc(-1 * var(--t-padding));
+    &[tuiIcons] {
+        &::before {
+            z-index: 1;
+            block-size: var(--t-height);
+            margin-inline-end: 0.5rem;
+            pointer-events: none;
+        }
+
+        &::after {
+            position: relative;
+            block-size: var(--t-height);
+            cursor: pointer;
+            border-inline: var(--t-padding) solid transparent;
+            margin: 0 calc(-1 * var(--t-padding));
+        }
     }
 
     &::-webkit-resizer {
@@ -68,63 +84,40 @@ tui-textfield {
         background-clip: content-box;
     }
 
-    label,
+    [tuiLabel],
     & > .t-content,
     & > .t-template {
         pointer-events: none;
     }
 
-    input,
-    select,
-    textarea {
-        font: inherit;
-        resize: none;
-        outline: none;
-        padding-block-start: 1.125rem;
-        padding-block-end: 1.125rem;
-        color: var(--tui-text-primary);
-
-        &[inputmode='none'] {
-            caret-color: transparent;
-        }
-    }
-
     &[data-size='s'] {
         --t-height: var(--tui-height-s);
         --t-padding: var(--tui-padding-s);
 
         border-radius: var(--tui-radius-m);
         gap: 0;
-        font: var(--tui-font-text-ui-s);
+        font: var(--tui-font-ui-s);
         line-height: 1rem;
 
-        &[style*='--t-icon-start:'] {
+        &[data-icon-start] {
             --t-start: 1.25rem;
         }
 
-        &[style*='--t-icon-end:'] {
+        &[data-icon-end] {
             --t-end: 1.25rem;
         }
 
         &::before {
-            margin-inline-end: 0.5rem;
-            margin-inline-start: -0.125rem;
+            margin-inline: -0.125rem 0.5rem;
             font-size: 1rem;
         }
 
         &::after {
-            margin-inline-end: calc(-0.125rem - var(--t-padding));
             margin-inline-start: calc(0.625rem - var(--t-padding));
+            margin-inline-end: calc(-0.125rem - var(--t-padding));
             font-size: 1rem;
         }
 
-        input,
-        select,
-        textarea {
-            padding-block-start: 0.5rem;
-            padding-block-end: 0.5rem;
-        }
-
         & > .t-content {
             margin-inline-end: -0.375rem;
         }
@@ -133,24 +126,23 @@ tui-textfield {
     &[data-size='m'] {
         --t-height: var(--tui-height-m);
         --t-padding: var(--tui-padding-m);
-        --t-label-font: var(--tui-font-text-xs);
+        --t-label-font: var(--tui-font-body-xs);
         --t-label-y: -0.5625rem;
 
         border-radius: var(--tui-radius-m);
-        font: var(--tui-font-text-ui-s);
+        font: var(--tui-font-ui-s);
         line-height: 1rem;
 
-        &[style*='--t-icon-start:'] {
+        &[data-icon-start] {
             --t-start: 1.75rem;
         }
 
-        &[style*='--t-icon-end:'] {
+        &[data-icon-end] {
             --t-end: 1.75rem;
         }
 
         &::before {
-            margin-inline-start: -0.125rem;
-            margin-inline-end: 0.125rem;
+            margin-inline: -0.125rem 0.125rem;
         }
 
         &::after {
@@ -158,13 +150,6 @@ tui-textfield {
             margin-inline-end: calc(-0.125rem - var(--t-padding));
         }
 
-        input,
-        select,
-        textarea {
-            padding-block-start: 0.875rem;
-            padding-block-end: 0.875rem;
-        }
-
         & > .t-content {
             margin-inline-end: -0.125rem;
         }
@@ -174,179 +159,94 @@ tui-textfield {
         --t-label: -0.7rem;
     }
 
-    /*
-    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);
-    }
-    */
-    &[tuiIcons]:hover {
-        color: var(--tui-text-secondary);
-
-        &:has(input:read-only):not([multi]),
-        &:has(textarea:read-only),
-        &:has(select[data-mode~='readonly']) {
-            color: var(--tui-text-tertiary);
-        }
-    }
-
-    &::before {
-        z-index: 1;
-        margin-inline-end: 0.5rem;
+    &:is(._disabled, [data-state='disabled']) {
         pointer-events: none;
-    }
-
-    &:has(:disabled:not(.t-filler, button, option, [tuiChip]))::before,
-    &:has(:disabled:not(.t-filler, button, option, [tuiChip]))::after,
-    &:has(:disabled:not(.t-filler, button, option, [tuiChip])) > .t-template {
-        opacity: var(--tui-disabled-opacity);
-    }
-
-    // TODO: Fallback until Safari 15.4
-    &._disabled::before,
-    &._disabled::after,
-    &._disabled > .t-template {
         opacity: var(--tui-disabled-opacity);
-    }
 
-    &:has(label:not(:empty)) {
-        & > .t-template,
-        input:not([type='range']),
-        select:defined,
-        textarea:defined {
-            padding-block-start: calc(var(--t-height) / 3);
-            padding-block-end: 0;
+        [tuiAppearance]:is(._disabled, :disabled, [data-state='disabled']) {
+            opacity: 1;
         }
-    }
 
-    &:not([data-focus='true']):has(label:not(:empty)) {
-        & > .t-template,
-        input:not([type='range']),
-        select:defined,
-        textarea:defined {
-            &::placeholder,
-            &._empty {
-                color: transparent;
-            }
+        tui-icon {
+            display: none;
         }
     }
 
-    // TODO: Fallback until Safari 15.4
     &._with-label {
         & > .t-template,
-        input:not([type='range']),
-        select:defined,
-        textarea:defined {
+        .t-filler,
+        [tuiInput] {
             padding-block-start: calc(var(--t-height) / 3);
             padding-block-end: 0;
         }
-    }
 
-    &:not([data-focus='true'])._with-label {
-        & > .t-template,
-        input:not([type='range']),
-        select:defined,
-        textarea:defined {
-            &::placeholder,
-            &._empty {
-                color: transparent;
+        &:is(:not([data-focus='true']), [data-mode~='readonly']) {
+            & > .t-template,
+            [tuiInput] {
+                &::placeholder,
+                &._empty {
+                    color: transparent;
+                }
             }
         }
     }
 
     & > .t-template,
-    input:defined,
-    select:defined,
-    textarea:defined {
-        .fullsize();
-
+    .t-filler,
+    [tuiInput] {
+        position: absolute;
+        inset-block-start: 0;
+        inset-inline: 0;
+        inline-size: auto;
+        block-size: 100%;
         appearance: none;
+        background: none;
+        font: inherit;
+        resize: none;
+        outline: none;
+        color: var(--tui-text-primary);
         box-sizing: border-box;
         border-radius: inherit;
         border-width: 0;
         overscroll-behavior: none;
         // StackBlitz changes "0rem" to "0" breaking calc
         padding-inline-start: calc(var(--t-start, ~'0rem') + var(--t-padding));
-        padding-inline-end: calc(var(--t-end, ~'0rem') + var(--t-side) + var(--t-padding));
-    }
-
-    & > .t-template {
-        display: flex;
-        align-items: center;
-        color: var(--tui-text-primary);
-    }
-
-    &._with-template input:first-of-type,
-    &._with-template select,
-    &._with-template textarea {
-        color: transparent !important;
-    }
+        padding-inline-end: calc(var(--t-end, ~'0rem') + var(--t-side, ~'0rem') + var(--t-padding));
 
-    input:not([type='range']),
-    select:defined,
-    textarea:defined {
-        pointer-events: auto;
-        background: none;
-
-        // TODO: Remove :not when we drop old select tuiTextfield in v5
-        &:not(select):read-only ~ .t-filler {
+        &:is(input, textarea):read-only ~ .t-filler {
             display: none;
         }
 
         &:disabled {
-            & ~ label,
-            & ~ .t-content {
-                opacity: var(--tui-disabled-opacity);
-
-                > tui-icon {
-                    display: none;
-                }
-            }
+            animation: tuiPresent 1s infinite;
+            opacity: 1;
         }
 
-        &:-webkit-autofill,
-        &:not(._empty):not(:placeholder-shown) {
-            & ~ label {
-                font: var(--t-label-font);
-                line-height: var(--t-height);
-                transform: translateY(var(--t-label-y));
-            }
-
-            &:not(:disabled)[data-mode~='invalid'] ~ label,
-            &:invalid:not(:disabled):not([data-mode]) ~ label {
-                color: var(--tui-text-negative);
-            }
-
-            &:not(:disabled):not([data-mode~='readonly']) ~ .t-content .t-clear {
-                display: flex;
-            }
+        &[inputmode='none'] {
+            caret-color: transparent;
         }
+    }
 
-        &:not([data-mode~='readonly']) {
-            .appearance-focus({
-                &::placeholder,
-                &._empty {
-                    color: var(--tui-text-tertiary);
-                }
+    & > .t-template {
+        display: flex;
+        block-size: 100%;
+        align-items: center;
+    }
 
-                & ~ label {
-                    color: var(--tui-text-primary) !important;
-                    font: var(--t-label-font);
-                    line-height: var(--t-height);
-                    transform: translateY(var(--t-label-y));
-                }
-            });
-        }
+    &._with-template [tuiInput]:first-of-type {
+        color: transparent !important;
+    }
 
-        // @deprecated remove in v5
-        .ios-only({
-            &._ios-fix {
-                position: fixed;
-                left: 1000rem;
-            }
-        });
+    [tuiInput]:-webkit-autofill,
+    [tuiInput][chrome-autofilled], /* Chrome on IOS */
+    [tuiInput]:not(._empty, :placeholder-shown),
+    &[multi][multi]:not(._empty) {
+        [tuiLabel],
+        &:not(tui-textfield) ~ [tuiLabel] {
+            font: var(--t-label-font);
+            line-height: var(--t-height);
+            transform: translateY(var(--t-label-y));
+        }
     }
 
     // Increasing specificity to override all other styles
@@ -359,22 +259,18 @@ tui-textfield {
         flex: 1;
         align-self: flex-start;
         font-size: inherit;
+        user-select: none;
         line-height: var(--t-height);
         transition-duration: inherit;
     }
 
-    label:defined,
-    input:defined::placeholder,
-    textarea:defined::placeholder,
-    select:defined._empty {
+    [tuiLabel],
+    [tuiInput]::placeholder,
+    [tuiInput]._empty {
         color: var(--tui-text-secondary);
     }
 
     select {
-        &:not([data-mode~='readonly']) {
-            cursor: pointer;
-        }
-
         option[value='']:disabled {
             // Hide placeholder from native datalist (Windows OS only)
             color: transparent;
@@ -394,7 +290,8 @@ tui-textfield {
     }
 
     button,
-    a {
+    a,
+    tui-icon {
         pointer-events: auto;
     }
 
@@ -407,26 +304,21 @@ tui-textfield {
         margin-inline-start: auto;
         isolation: isolate;
         border-radius: inherit;
-
-        > tui-icon {
-            pointer-events: auto;
-        }
     }
 
     textarea ~ .t-content {
         min-inline-size: 0.5rem;
     }
 
-    .t-clear {
-        z-index: 1;
+    &:is([data-mode~='readonly'], [data-state='disabled'], ._empty) [tuiButtonX],
+    [tuiInput]._empty ~ .t-content [tuiButtonX],
+    [tuiInput]:disabled ~ .t-content [tuiButtonX] {
         display: none;
-        pointer-events: auto;
     }
 
-    & > .t-filler:defined {
-        pointer-events: none;
+    .t-filler {
+        pointer-events: none !important;
         color: var(--tui-text-tertiary);
-        opacity: 1;
     }
 
     [tuiFluidTypography] {
@@ -440,4 +332,27 @@ tui-textfield {
     &:has(input[type='tel']) {
         direction: ltr;
     }
+
+    .appearance-invalid({
+        [tuiInput]:not(._empty) ~ [tuiLabel],
+        &[multi]:not(._empty) [tuiLabel] {
+            color: var(--tui-text-negative);
+        }
+    });
+
+    &:not([data-mode~='readonly']) {
+        .appearance-focus({
+            [tuiInput]::placeholder,
+            [tuiInput]._empty {
+                color: var(--tui-text-tertiary);
+            }
+
+            [tuiLabel] {
+                color: var(--tui-text-primary) !important;
+                font: var(--t-label-font);
+                line-height: var(--t-height);
+                transform: translateY(var(--t-label-y));
+            }
+        });
+    }
 }

package/styles/components/title.less

@@ -26,32 +26,32 @@
     text-align: start;
     gap: 0.25rem;
     margin: 0;
-    font: var(--tui-font-text-ui-m);
+    font: var(--tui-font-ui-m);
 
     &[data-size='s'] {
         gap: 0.125rem;
-        font: var(--tui-font-text-s);
+        font: var(--tui-font-body-s);
 
         [tuiSubtitle] {
-            font: var(--tui-font-text-xs);
+            font: var(--tui-font-body-xs);
         }
     }
 
     &[data-size='m'] {
         gap: 0.125rem;
-        font: var(--tui-font-heading-5);
+        font: var(--tui-font-heading-h5);
 
         [tuiSubtitle] {
-            font: var(--tui-font-text-m);
+            font: var(--tui-font-body-m);
         }
     }
 
     &[data-size='l'] {
         gap: 0.5rem;
-        font: var(--tui-font-heading-3);
+        font: var(--tui-font-heading-h3);
 
         [tuiSubtitle] {
-            font: var(--tui-font-text-m);
+            font: var(--tui-font-body-m);
         }
     }
 
@@ -67,7 +67,7 @@
 }
 
 [tuiSubtitle] {
-    font: var(--tui-font-text-ui-s);
+    font: var(--tui-font-ui-s);
     margin: 0;
 }
 

package/styles/mixins/appearance.less

@@ -3,7 +3,7 @@
 .appearance-hover(@content) {
     .interactive({
         @media @tui-mouse {
-            &:hover:not(:disabled):not([data-state]) {
+            &:hover:not([data-state]) {
                 @content();
             }
         }
@@ -12,19 +12,11 @@
     &[data-state='hover'] {
         @content();
     }
-
-    /* @deprecated TODO remove in v5 */
-    @media @tui-mouse {
-        &[tuiWrapper]:hover:not(._no-hover),
-        &[tuiWrapper][data-state='hover'] {
-            @content();
-        }
-    }
 }
 
 .appearance-active(@content) {
     .interactive({
-        &:active:not(:disabled):not([data-state]) {
+        &:active:not([data-state]) {
             @content();
         }
     });
@@ -32,13 +24,6 @@
     &[data-state='active'] {
         @content();
     }
-
-    /* @deprecated TODO remove in v5 */
-    &[tuiWrapper]:active:not(._no-active),
-    &[tuiWrapper][data-state='active'],
-    &[tuiWrapper][data-state='active']:hover {
-        @content();
-    }
 }
 
 .appearance-disabled(@content) {
@@ -46,12 +31,6 @@
     &[data-state='disabled'] {
         @content();
     }
-
-    /* @deprecated TODO remove in v5 */
-    &[tuiWrapper]:disabled:not([data-state]),
-    &[tuiWrapper][data-state='disabled'] {
-        @content();
-    }
 }
 
 .appearance-focus(@content) {
@@ -62,10 +41,16 @@
     &[data-focus='true'] {
         @content();
     }
+}
 
-    /* @deprecated TODO remove in v5 */
-    &[tuiWrapper]:not(._focused):has(:focus-visible),
-    &[tuiWrapper]._focused {
+.appearance-invalid(@content) {
+    &:is([data-mode~='invalid'], .tui-invalid, :invalid):not(
+            [data-mode~='readonly'],
+            [data-mode~='valid'],
+            [data-state='disabled'],
+            :disabled,
+            ._disabled
+        ) {
         @content();
     }
 }

package/styles/mixins/appearance.scss

@@ -13,14 +13,6 @@
     &[data-state='hover'] {
         @content;
     }
-
-    /* @deprecated TODO remove in v5 */
-    @media ($tui-mouse) {
-        &[tuiWrapper]:hover:not(._no-hover),
-        &[tuiWrapper][data-state='hover'] {
-            @content;
-        }
-    }
 }
 
 @mixin appearance-active {
@@ -33,13 +25,6 @@
     &[data-state='active'] {
         @content;
     }
-
-    /* @deprecated TODO remove in v5 */
-    &[tuiWrapper]:active:not(._no-active),
-    &[tuiWrapper][data-state='active'],
-    &[tuiWrapper][data-state='active']:hover {
-        @content;
-    }
 }
 
 @mixin appearance-disabled {
@@ -47,12 +32,6 @@
     &[data-state='disabled'] {
         @content;
     }
-
-    /* @deprecated TODO remove in v5 */
-    &[tuiWrapper]:disabled:not([data-state]),
-    &[tuiWrapper][data-state='disabled'] {
-        @content;
-    }
 }
 
 @mixin appearance-focus {
@@ -63,10 +42,16 @@
     &[data-focus='true'] {
         @content;
     }
+}
 
-    /* @deprecated TODO remove in v5 */
-    &[tuiWrapper]:not(._focused):has(:focus-visible),
-    &[tuiWrapper]._focused {
+@mixin appearance-invalid {
+    &:is([data-mode~='invalid'], .tui-invalid, :invalid):not(
+            [data-mode~='readonly'],
+            [data-mode~='valid'],
+            [data-state='disabled'],
+            :disabled,
+            ._disabled
+        ) {
         @content;
     }
 }