@taiga-ui/core 4.52.0-canary.46625cf → 4.52.0-canary.49575ff

package/styles/components/textfield.less

@@ -6,8 +6,8 @@ tui-textfield {
 
     --t-height: var(--tui-height-l);
     --t-padding: var(--tui-padding-l);
-    --t-label: -0.7em;
-    --t-label-size: 0.83em;
+    --t-label-y: -0.75rem;
+    --t-label-font: var(--tui-font-body-s);
     --t-end: ~'0rem';
     --t-start: ~'0rem';
 
@@ -19,7 +19,7 @@ tui-textfield {
     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;
@@ -30,11 +30,11 @@ tui-textfield {
         color: var(--tui-text-tertiary);
     }
 
-    &[style*='--t-icon-start:'] {
+    &[data-icon-start] {
         --t-start: 2.25rem;
     }
 
-    &[style*='--t-icon-end:'] {
+    &[data-icon-end] {
         --t-end: 2.25rem;
     }
 
@@ -42,8 +42,7 @@ tui-textfield {
         position: relative;
         block-size: auto;
         align-self: stretch;
-        border-inline-start: var(--t-padding) solid transparent;
-        border-inline-end: var(--t-padding) solid transparent;
+        border-inline: var(--t-padding) solid transparent;
         margin: 0 calc(-1 * var(--t-padding));
     }
 
@@ -80,8 +79,7 @@ tui-textfield {
         font: inherit;
         resize: none;
         outline: none;
-        padding-block-start: 1.125rem;
-        padding-block-end: 1.125rem;
+        padding-block: 1.125rem;
         color: var(--tui-text-primary);
 
         &[inputmode='none'] {
@@ -95,34 +93,31 @@ tui-textfield {
 
         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: calc(0.625rem - var(--t-padding)) calc(-0.125rem - var(--t-padding));
             font-size: 1rem;
         }
 
         input,
         select,
         textarea {
-            padding-block-start: 0.5rem;
-            padding-block-end: 0.5rem;
+            padding-block: 0.5rem;
         }
 
         & > .t-content {
@@ -133,34 +128,33 @@ tui-textfield {
     &[data-size='m'] {
         --t-height: var(--tui-height-m);
         --t-padding: var(--tui-padding-m);
+        --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 {
-            margin-inline-start: calc(0.25rem - var(--t-padding));
-            margin-inline-end: calc(-0.125rem - var(--t-padding));
+            margin-inline: calc(0.25rem - var(--t-padding)) calc(-0.125rem - var(--t-padding));
         }
 
         input,
         select,
         textarea {
-            padding-block-start: 0.875rem;
-            padding-block-end: 0.875rem;
+            padding-block: 0.875rem;
         }
 
         & > .t-content {
@@ -209,36 +203,12 @@ tui-textfield {
         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;
-        }
-    }
-
-    &:not([data-focus='true']):has(label:not(:empty)) {
-        & > .t-template,
-        input:not([type='range']),
-        select:defined,
-        textarea:defined {
-            &::placeholder,
-            &._empty {
-                color: transparent;
-            }
-        }
-    }
-
-    // TODO: Fallback until Safari 15.4
     &._with-label {
         & > .t-template,
         input:not([type='range']),
         select:defined,
         textarea:defined {
-            padding-block-start: calc(var(--t-height) / 3);
-            padding-block-end: 0;
+            padding-block: calc(var(--t-height) / 3) 0;
         }
     }
 
@@ -266,8 +236,12 @@ tui-textfield {
         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));
+        padding-inline: calc(var(--t-start, ~'0rem') + var(--t-padding))
+            calc(var(--t-end, ~'0rem') + var(--t-side, ~'0rem') + var(--t-padding));
+
+        &:disabled {
+            animation: tuiPresent 1s infinite;
+        }
     }
 
     & > .t-template {
@@ -288,7 +262,6 @@ tui-textfield {
         pointer-events: auto;
         background: none;
 
-        // TODO: Remove :not when we drop old select tuiTextfield in v5
         &:not(select):read-only ~ .t-filler {
             display: none;
         }
@@ -307,8 +280,9 @@ tui-textfield {
         &:-webkit-autofill,
         &:not(._empty):not(:placeholder-shown) {
             & ~ label {
-                font-size: var(--t-label-size);
-                transform: translateY(var(--t-label));
+                font: var(--t-label-font);
+                line-height: var(--t-height);
+                transform: translateY(var(--t-label-y));
             }
 
             &:not(:disabled)[data-mode~='invalid'] ~ label,
@@ -330,19 +304,12 @@ tui-textfield {
 
                 & ~ label {
                     color: var(--tui-text-primary) !important;
-                    font-size: var(--t-label-size);
-                    transform: translateY(var(--t-label));
+                    font: var(--t-label-font);
+                    line-height: var(--t-height);
+                    transform: translateY(var(--t-label-y));
                 }
             });
         }
-
-        // @deprecated remove in v5
-        .ios-only({
-            &._ios-fix {
-                position: fixed;
-                left: 1000rem;
-            }
-        });
     }
 
     // Increasing specificity to override all other styles
@@ -420,7 +387,7 @@ tui-textfield {
     }
 
     & > .t-filler:defined {
-        pointer-events: none;
+        pointer-events: none !important;
         color: var(--tui-text-tertiary);
         opacity: 1;
     }

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,15 @@
     &[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
+        ) {
         @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,15 @@
     &[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
+        ) {
         @content;
     }
 }

package/styles/mixins/date-picker.less

@@ -4,7 +4,7 @@
     .t-row {
         display: flex;
         justify-content: flex-start;
-        font: var(--tui-font-text-m);
+        font: var(--tui-font-body-m);
 
         &:first-child {
             justify-content: flex-end;

package/styles/mixins/mixins.less

@@ -1,11 +1,6 @@
 @import 'browsers.less';
 
 .interactive(@ruleset) {
-    // TODO remove after dropping Safari 13 support
-    &:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled) {
-        @ruleset();
-    }
-
     &:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled) {
         @ruleset();
     }
@@ -171,11 +166,3 @@
 .tui-mask(@x, @y, @r) {
     mask: radial-gradient(circle at @x @y, transparent @r, black @r);
 }
-
-.portal-loop (@i) when (@i > 0) {
-    .portal-loop(@i - 1);
-
-    &:nth-of-type(@{i}) {
-        grid-row: ~'1000@{i}';
-    }
-}

package/styles/mixins/mixins.scss

@@ -1,11 +1,6 @@
 @import 'browsers.scss';
 
 @mixin interactive {
-    // TODO remove after dropping Safari 13 support
-    &:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled) {
-        @content;
-    }
-
     &:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled) {
         @content;
     }
@@ -164,11 +159,3 @@
 @mixin tui-mask($x, $y, $r) {
     mask: radial-gradient(circle at $x $y, transparent $r, black $r);
 }
-
-@mixin portal-loop($n) {
-    @for $i from 1 through $n {
-        &:nth-of-type(#{$i}) {
-            grid-row: #{$i + 10000};
-        }
-    }
-}

package/styles/mixins/picker.less

@@ -4,7 +4,7 @@
 .picker(@itemSize) {
     :host {
         display: block;
-        font: var(--tui-font-text-m);
+        font: var(--tui-font-body-m);
     }
 
     .t-row {

package/styles/mixins/picker.scss

@@ -4,7 +4,7 @@
 @mixin picker($itemSize) {
     :host {
         display: block;
-        font: var(--tui-font-text-m);
+        font: var(--tui-font-body-m);
     }
 
     .t-row {

package/styles/mixins/slider.less

@@ -15,7 +15,7 @@
     --t-offset: calc(@thumb / 2);
 
     display: flex;
-    font: var(--tui-font-text-s);
+    font: var(--tui-font-body-s);
     margin-inline-start: var(--t-offset);
     margin-inline-end: var(--t-offset);
 

package/styles/mixins/slider.scss

@@ -17,7 +17,7 @@ $track-inset: (
     --t-offset: calc($thumb / 2);
 
     display: flex;
-    font: var(--tui-font-text-s);
+    font: var(--tui-font-body-s);
     margin-inline-start: var(--t-offset);
     margin-inline-end: var(--t-offset);
 
@@ -60,12 +60,11 @@ $track-inset: (
         --t-offset: calc(var(--tui-radius-l) / 2 + $thumb / 2);
     }
 
-    tui-input-range:not([new]) + &, /* TODO(v5): delete */
     tui-range + & {
         --t-offset: $thumb;
     }
 
-    tui-input-range[new] + & {
+    tui-input-range + & {
         --t-offset: calc(map-get($track-inset, $input-size) + $thumb);
     }
 }

package/styles/taiga-ui-local.less

@@ -3,6 +3,5 @@
 @import 'mixins/mixins.less';
 @import 'mixins/picker.less';
 @import 'mixins/slider.less';
-@import 'mixins/wrapper.less';
 @import 'mixins/appearance.less';
 @import 'variables/media.less';

package/styles/taiga-ui-local.scss

@@ -2,6 +2,5 @@
 @import 'mixins/mixins.scss';
 @import 'mixins/picker.scss';
 @import 'mixins/slider.scss';
-@import 'mixins/wrapper.scss';
 @import 'mixins/appearance.scss';
 @import 'variables/media.scss';

package/styles/taiga-ui-theme.less

@@ -1,5 +1,4 @@
 @import 'theme/variables.less';
 @import 'theme/palette.less';
 @import 'theme/appearance.less';
-@import 'theme/wrapper.less';
 @import 'theme/appearance/textfield.less';

package/styles/theme/appearance/outline.less

@@ -2,9 +2,7 @@
 
 [tuiAppearance][data-appearance='outline'],
 [tuiAppearance][data-appearance='outline-destructive'],
-[tuiAppearance][data-appearance='outline-grayscale'],
-/* TODO @deprecated remove in v5 */
-[tuiAppearance][data-appearance='whiteblock'] {
+[tuiAppearance][data-appearance='outline-grayscale'] {
     --t-bs: var(--tui-border-normal);
 
     color: var(--tui-text-action);
@@ -25,17 +23,14 @@
         });
     }
 
-    &:invalid:not([data-mode]),
-    &[data-mode~='invalid'],
-    &.tui-invalid:not([data-mode]) {
+    .appearance-invalid({
         box-shadow: inset 0 0 0 1px var(--tui-status-negative-pale-hover);
-    }
 
-    &:checked:invalid:not([data-mode]),
-    &[data-mode~='checked'][data-mode~='invalid'],
-    &:checked.tui-invalid:not([data-mode]) {
-        box-shadow: inset 0 0 0 2px var(--tui-status-negative);
-    }
+        &:checked,
+        &[data-mode~='checked'] {
+            box-shadow: inset 0 0 0 2px var(--tui-status-negative);
+        }
+    });
 
     .appearance-hover({
         cursor: pointer;
@@ -48,9 +43,7 @@
     });
 }
 
-[tuiAppearance][data-appearance='outline-grayscale'],
-/* TODO @deprecated remove in v5 */
-[tuiAppearance][data-appearance='whiteblock'] {
+[tuiAppearance][data-appearance='outline-grayscale'] {
     color: var(--tui-text-primary);
 }
 
@@ -60,9 +53,7 @@
 
 [tuiAppearance][data-appearance='icon'],
 [tuiAppearance][data-appearance='outline-grayscale'],
-[tuiAppearance][data-appearance='floating'],
-/* TODO @deprecated remove in v5 */
-[tuiAppearance][data-appearance='whiteblock'] {
+[tuiAppearance][data-appearance='floating'] {
     color: var(--tui-text-primary);
 
     &::before,

package/styles/theme/appearance/primary.less

@@ -6,11 +6,9 @@
     background: var(--t-bg);
     color: var(--tui-text-primary-on-accent-1);
 
-    &:invalid:not([data-mode]),
-    &[data-mode~='invalid'],
-    &.tui-invalid:not([data-mode]) {
+    .appearance-invalid({
         background: var(--tui-status-negative);
-    }
+    });
 
     .appearance-hover({
         --t-bg: var(--tui-background-accent-1-hover);

package/styles/theme/appearance/secondary.less

@@ -2,9 +2,7 @@
 
 [tuiAppearance][data-appearance='secondary'],
 [tuiAppearance][data-appearance='secondary-destructive'],
-[tuiAppearance][data-appearance='secondary-grayscale'],
-/* TODO @deprecated remove in v5 */
-[tuiAppearance][data-appearance='destructive'] {
+[tuiAppearance][data-appearance='secondary-grayscale'] {
     background: var(--tui-background-neutral-1);
     color: var(--tui-text-action);
 
@@ -30,9 +28,7 @@
             background: var(--tui-background-accent-1-pressed);
         });
 
-        &:invalid:not([data-mode]),
-        &[data-mode~='invalid'],
-        &.tui-invalid:not([data-mode]) {
+        .appearance-invalid({
             background: var(--tui-status-negative);
             color: #fff;
 
@@ -45,12 +41,10 @@
                 background: var(--tui-status-negative);
                 color: #fff;
             });
-        }
+        });
     }
 
-    &:invalid:not([data-mode]),
-    &[data-mode~='invalid'],
-    &.tui-invalid:not([data-mode]) {
+    .appearance-invalid({
         color: var(--tui-text-negative);
         background: var(--tui-status-negative-pale);
 
@@ -63,12 +57,10 @@
             color: var(--tui-text-negative-hover);
             background: var(--tui-status-negative-pale-hover);
         });
-    }
+    });
 }
 
-[tuiAppearance][data-appearance='secondary-destructive'],
-/* TODO @deprecated remove in v5 */
-[tuiAppearance][data-appearance='destructive'] {
+[tuiAppearance][data-appearance='secondary-destructive'] {
     color: var(--tui-text-negative);
 }