@taiga-ui/core 4.52.0-canary.40b6993 → 4.52.0-canary.49575ff

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);
 }
 

package/styles/theme/appearance/status.less

@@ -1,7 +1,5 @@
 @import '@taiga-ui/core/styles/taiga-ui-local.less';
 
-[tuiAppearance][data-appearance='error'], /* TODO @deprecated remove in v5 */
-[tuiAppearance][data-appearance='success'], /* TODO @deprecated remove in v5 */
 [tuiAppearance][data-appearance='negative'],
 [tuiAppearance][data-appearance='positive'],
 [tuiAppearance][data-appearance='warning'],
@@ -16,7 +14,6 @@
     }
 }
 
-[tuiAppearance][data-appearance='error'], /* TODO @deprecated remove in v5 */
 [tuiAppearance][data-appearance='negative'] {
     --t-bg: var(--tui-status-negative-pale);
 
@@ -39,7 +36,6 @@
     }
 }
 
-[tuiAppearance][data-appearance='success'], /* TODO @deprecated remove in v5 */
 [tuiAppearance][data-appearance='positive'] {
     --t-bg: var(--tui-status-positive-pale);
 

package/styles/theme/appearance/table.less

@@ -1,47 +1,54 @@
 @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: -1px after Safari 14+ support */
-    top: -1px;
-    bottom: -1px;
-    left: -1px;
-    right: -1px;
-    inline-size: auto;
+[tuiAppearance][data-appearance='table'] {
     block-size: auto;
-    border-radius: 0;
+    border-radius: 0 !important;
     background: transparent;
+    color: var(--tui-text-primary);
     border: none;
     outline: none;
     border-block-end: calc(var(--t-row-height) - var(--t-height)) solid transparent;
 
-    &:not(._empty) {
-        color: var(--tui-text-primary);
+    &:is(tui-textfield[multi]),
+    &:is(tui-input-card-group) {
+        min-block-size: 100%;
+        border-block-end: 0;
     }
 
-    .appearance-hover({
-        &[data-focus='false'] {
-            background-color: var(--tui-background-neutral-1);
-        }
-    });
+    &:is(textarea) {
+        block-size: 100%;
+        border-block-end: 0;
+    }
+
+    &::before,
+    &::after {
+        color: var(--tui-text-tertiary);
+    }
+
+    &:not([data-mode~='readonly']) {
+        .appearance-hover({
+            &[data-focus='false'] {
+                background-color: var(--tui-background-neutral-1);
+            }
+
+            &::before,
+            &::after {
+                color: var(--tui-text-secondary);
+            }
+        });
+    }
 
     .appearance-focus({
-        outline-offset: -0.125rem;
+        outline-offset: -1px;
         outline: 0.125rem solid var(--tui-border-focus);
     });
 
-    &:invalid:not([data-mode]),
-    &[data-mode~='invalid'],
-    &.tui-invalid:not([data-mode]) {
-        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;
+    .appearance-invalid({
+        background:
+            linear-gradient(to top right, transparent 0% 50%, var(--tui-status-negative) 50% 100%)
+            top right / 0.5rem 0.5rem
+            no-repeat
+            border-box;
 
         &[data-focus='false'] {
             background-color: var(--tui-status-negative-pale);
@@ -60,8 +67,8 @@ TODO: remove :not([tuiWrapper]) after legacy controls deletion
 
         .appearance-focus({
             background-color: transparent;
-            outline-offset: -0.0625rem;
+            outline-offset: 0;
             outline: 0.0625rem solid var(--tui-status-negative);
         });
-    }
+    });
 }

package/styles/theme/appearance.less

@@ -3,7 +3,6 @@
 @import 'appearance/flat.less';
 @import 'appearance/floating.less';
 @import 'appearance/glass.less';
-@import 'appearance/opposite.less';
 @import 'appearance/outline.less';
 @import 'appearance/primary.less';
 @import 'appearance/secondary.less';

package/styles/theme/variables.less

@@ -1,27 +1,28 @@
 &:root,
 &:host {
     // Fonts
-    --tui-font-heading: 'Manrope', system-ui, sans-serif;
-    --tui-font-text: 'Manrope', system-ui, sans-serif;
+    --tui-font-family-text: 'Manrope', system-ui, sans-serif;
+    --tui-font-family-display: 'Manrope', system-ui, sans-serif;
     --tui-font-offset: ~'0rem';
     // Heading
-    --tui-font-heading-1: bold calc(var(--tui-font-offset) + 3.125rem) / 3.5rem var(--tui-font-heading);
-    --tui-font-heading-2: bold calc(var(--tui-font-offset) + 2.75rem) / 3rem var(--tui-font-heading);
-    --tui-font-heading-3: bold calc(var(--tui-font-offset) + 2.25rem) / 2.5rem var(--tui-font-heading);
-    --tui-font-heading-4: bold calc(var(--tui-font-offset) + 1.75rem) / 2rem var(--tui-font-heading);
-    --tui-font-heading-5: bold calc(var(--tui-font-offset) + 1.5rem) / 1.75rem var(--tui-font-heading);
-    --tui-font-heading-6: bold calc(var(--tui-font-offset) + 1.25rem) / 1.5rem var(--tui-font-heading);
+    --tui-font-heading-h1: bold calc(var(--tui-font-offset) + 3.125rem) / calc(50 / 56) var(--tui-font-family-display);
+    --tui-font-heading-h2: bold calc(var(--tui-font-offset) + 2.75rem) / calc(48 / 44) var(--tui-font-family-display);
+    --tui-font-heading-h3: bold calc(var(--tui-font-offset) + 2.25rem) / calc(40 / 36) var(--tui-font-family-display);
+    --tui-font-heading-h4: bold calc(var(--tui-font-offset) + 1.75rem) / calc(32 / 28) var(--tui-font-family-display);
+    --tui-font-heading-h5: bold calc(var(--tui-font-offset) + 1.5rem) / calc(28 / 24) var(--tui-font-family-display);
+    --tui-font-heading-h6: bold calc(var(--tui-font-offset) + 1.25rem) / calc(24 / 20) var(--tui-font-family-display);
     // Body
-    --tui-font-text-xl: normal calc(var(--tui-font-offset) + 1.1875rem) / 1.75rem var(--tui-font-text);
-    --tui-font-text-l: normal calc(var(--tui-font-offset) + 1.0625rem) / 1.75rem var(--tui-font-text);
-    --tui-font-text-m: normal calc(var(--tui-font-offset) + 1rem) / 1.5rem var(--tui-font-text);
-    --tui-font-text-s: normal calc(var(--tui-font-offset) + 0.8125rem) / 1.25rem var(--tui-font-text);
-    --tui-font-text-xs: normal calc(var(--tui-font-offset) + 0.6875rem) / 1rem var(--tui-font-text);
+    --tui-font-legacy-body-xl: normal calc(var(--tui-font-offset) + 1.1875rem) / calc(28 / 19)
+        var(--tui-font-family-text);
+    --tui-font-body-l: normal calc(var(--tui-font-offset) + 1.0625rem) / calc(28 / 17) var(--tui-font-family-text);
+    --tui-font-body-m: normal calc(var(--tui-font-offset) + 1rem) / calc(24 / 16) var(--tui-font-family-text);
+    --tui-font-body-s: normal calc(var(--tui-font-offset) + 0.8125rem) / calc(20 / 13) var(--tui-font-family-text);
+    --tui-font-body-xs: normal calc(var(--tui-font-offset) + 0.6875rem) / calc(16 / 11) var(--tui-font-family-text);
     // Reduced
-    --tui-font-text-ui-l: normal calc(var(--tui-font-offset) + 1.0625rem) / 1.5rem var(--tui-font-text);
-    --tui-font-text-ui-m: normal calc(var(--tui-font-offset) + 1rem) / 1.25rem var(--tui-font-text);
-    --tui-font-text-ui-s: normal calc(var(--tui-font-offset) + 0.8125rem) / 1rem var(--tui-font-text);
-    --tui-font-text-ui-xs: normal calc(var(--tui-font-offset) + 0.6875rem) / 0.8125rem var(--tui-font-text);
+    --tui-font-ui-l: normal calc(var(--tui-font-offset) + 1.0625rem) / calc(24 / 17) var(--tui-font-family-text);
+    --tui-font-ui-m: normal calc(var(--tui-font-offset) + 1rem) / calc(20 / 16) var(--tui-font-family-text);
+    --tui-font-ui-s: normal calc(var(--tui-font-offset) + 0.8125rem) / calc(16 / 13) var(--tui-font-family-text);
+    --tui-font-ui-xs: normal calc(var(--tui-font-offset) + 0.6875rem) / calc(13 / 11) var(--tui-font-family-text);
     // Radii
     --tui-radius-xs: 0.25rem;
     --tui-radius-s: 0.5rem;

package/tokens/breakpoint.d.ts

@@ -0,0 +1,4 @@
+import { InjectionToken, type Signal } from '@angular/core';
+import { type TuiMedia } from './media';
+export type TuiBreakpointMediaKey = keyof Omit<TuiMedia, 'tablet'>;
+export declare const TUI_BREAKPOINT: InjectionToken<Signal<"desktopLarge" | "desktopSmall" | "mobile">>;

package/tokens/index.d.ts

@@ -1,6 +1,7 @@
 export * from './animations-speed';
 export * from './assets-path';
 export * from './auxiliary';
+export * from './breakpoint';
 export * from './common-icons';
 export * from './dark-mode';
 export * from './date-format';

package/utils/miscellaneous/font-scaling.d.ts

@@ -1,2 +1,3 @@
-import { type Provider } from '@angular/core';
+import { InjectionToken, type Provider, type WritableSignal } from '@angular/core';
+export declare const TUI_FONT_OFFSET: InjectionToken<WritableSignal<number>>;
 export declare function tuiEnableFontScaling(): Provider;

package/services/breakpoint.service.d.ts

@@ -1,16 +0,0 @@
-import { type TuiMedia } from '@taiga-ui/core/tokens';
-import { Observable } from 'rxjs';
-import * as i0 from "@angular/core";
-export type TuiBreakpointMediaKey = keyof Omit<TuiMedia, 'tablet'>;
-/**
- * Service to provide the current breakpoint based on Taiga UI's media queries
- */
-export declare class TuiBreakpointService extends Observable<TuiBreakpointMediaKey | null> {
-    private readonly media;
-    private readonly sorted;
-    private readonly invert;
-    private readonly stream$;
-    constructor();
-    static ɵfac: i0.ɵɵFactoryDeclaration<TuiBreakpointService, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<TuiBreakpointService>;
-}

package/styles/mixins/wrapper.less

@@ -1,64 +0,0 @@
-/**
- * @deprecated use appearance instead
- */
-.wrapper-hover(@ruleset) {
-    @media @tui-mouse {
-        &:hover:not(._no-hover),
-        &[data-state='hover'] {
-            @ruleset();
-        }
-    }
-}
-
-.wrapper-active(@ruleset) {
-    &:active:not(._no-active),
-    &[data-state='active'],
-    &[data-state='active']:hover {
-        @ruleset();
-    }
-}
-
-.wrapper-readonly(@ruleset, @native: false) {
-    // Specificity artificially increased to match `:hover:not()` level
-    & when (@native = true) {
-        &:read-only:read-only,
-        &[data-state='readonly'][data-state='readonly'] {
-            @ruleset();
-        }
-    }
-
-    & when (@native = false) {
-        &[data-state='readonly'][data-state='readonly'] {
-            @ruleset();
-        }
-    }
-}
-
-.wrapper-disabled(@ruleset) {
-    // Specificity artificially increased to match `:hover:not()` level
-    &:disabled:disabled,
-    &[data-state='disabled'][data-state='disabled'] {
-        @ruleset();
-    }
-}
-
-.wrapper-focus(@ruleset) {
-    &:focus-visible:focus-visible {
-        @ruleset();
-    }
-
-    &:has(:focus-visible) {
-        @ruleset();
-    }
-
-    &._focused._focused {
-        @ruleset();
-    }
-}
-
-.wrapper-invalid(@ruleset) {
-    &:invalid:invalid,
-    &._invalid._invalid {
-        @ruleset();
-    }
-}

package/styles/mixins/wrapper.scss

@@ -1,61 +0,0 @@
-@import '../variables/media.scss';
-
-@mixin wrapper-hover {
-    @media ($tui-mouse) {
-        &:hover:not(._no-hover),
-        &[data-state='hover'] {
-            @content;
-        }
-    }
-}
-
-@mixin wrapper-active {
-    &:active:not(._no-active),
-    &[data-state='active'],
-    &[data-state='active']:hover {
-        @content;
-    }
-}
-
-@mixin wrapper-readonly($native: false) {
-    // Specificity artificially increased to match `:hover:not()` level
-    @if $native == true {
-        &:read-only:read-only,
-        &[data-state='readonly'][data-state='readonly'] {
-            @content;
-        }
-    }
-
-    @if $native == false {
-        &[data-state='readonly'][data-state='readonly'] {
-            @content;
-        }
-    }
-}
-
-@mixin wrapper-disabled {
-    // Specificity artificially increased to match `:hover:not()` level
-    &:disabled:disabled,
-    &[data-state='disabled'][data-state='disabled'] {
-        @content;
-    }
-}
-
-@mixin wrapper-focus {
-    // TODO: Join rules together once all browsers support focus-visible
-    // Specificity artificially increased to match `:hover:not()` level
-    &:focus-visible:focus-visible {
-        @content;
-    }
-
-    &._focused._focused {
-        @content;
-    }
-}
-
-@mixin wrapper-invalid {
-    &:invalid:invalid,
-    &._invalid._invalid {
-        @content;
-    }
-}

package/styles/theme/appearance/opposite.less

@@ -1,17 +0,0 @@
-@import '@taiga-ui/core/styles/taiga-ui-local.less';
-
-/* TODO @deprecated remove in v5 */
-[tuiAppearance][data-appearance='opposite'] {
-    --tui-border-focus: #979797;
-
-    background: var(--tui-background-accent-opposite);
-    color: var(--tui-background-base);
-
-    .appearance-hover({
-        background: var(--tui-background-accent-opposite-hover);
-    });
-
-    .appearance-active({
-        background: var(--tui-background-accent-opposite-pressed);
-    });
-}

package/styles/theme/wrapper.less

@@ -1,211 +0,0 @@
-@import '@taiga-ui/core/styles/taiga-ui-local.less';
-
-/**
- * TODO: Drop in v.5
- * @deprecated use appearance instead
- */
-[tuiWrapper] {
-    .transition(~'color, background, opacity');
-
-    position: relative;
-    display: block;
-    block-size: 100%;
-    inline-size: 100%;
-    appearance: none;
-    border-radius: inherit;
-
-    .wrapper-disabled({
-        pointer-events: none;
-        opacity: var(--tui-disabled-opacity);
-    });
-}
-
-[tuiWrapper][data-appearance='textfield'] {
-    .transition(~'box-shadow, background');
-
-    background: var(--tui-background-base);
-    color: var(--tui-text-primary);
-    outline: none !important;
-    box-shadow: 0 0.125rem 0.1875rem rgba(0, 0, 0, 0.1);
-
-    &::after {
-        .transition(color);
-        .fullsize(absolute, inset);
-
-        content: '';
-        border-radius: inherit;
-        border: 1px solid currentColor;
-        pointer-events: none;
-        color: var(--tui-border-normal);
-    }
-
-    .wrapper-hover({
-        box-shadow: 0 0.125rem 0.3125rem rgba(0, 0, 0, 0.16);
-    });
-
-    .wrapper-focus({
-        box-shadow: none;
-
-        &:after {
-            border-width: 2px;
-            color: var(--tui-background-accent-1);
-        }
-    });
-
-    .wrapper-readonly({
-        box-shadow: none;
-        background: transparent;
-
-        &:after {
-            color: var(--tui-border-normal);
-        }
-    });
-
-    .wrapper-disabled({
-        box-shadow: none;
-    });
-
-    .wrapper-invalid({
-        &:after {
-            color: var(--tui-text-negative);
-        }
-    });
-}
-
-[tuiTheme='dark'][tuiWrapper][data-appearance='textfield'],
-[tuiTheme='dark'] [tuiWrapper][data-appearance='textfield'] {
-    background: var(--tui-background-neutral-1);
-
-    .wrapper-hover({
-        background: var(--tui-background-neutral-1-hover);
-    });
-
-    .wrapper-focus({
-        background: transparent;
-    });
-}
-
-/* stylelint-disable order/order */
-[tuiWrapper][data-appearance='table'] {
-    border-radius: 0;
-    background: transparent;
-    color: var(--tui-text-primary);
-    outline: none !important;
-
-    /* stylelint-disable meowtec/no-px */
-    &::before,
-    &[data-appearance='table']::after {
-        content: '';
-        position: fixed;
-        top: -0.03125rem;
-        left: -1px;
-        right: -0.03125rem;
-        bottom: -1px;
-    }
-    /* stylelint-enable meowtec/no-px */
-
-    &::before {
-        .transition(background);
-
-        z-index: -1;
-        background-repeat: no-repeat;
-        background-position: top right;
-        background-size: 0.5rem 0.5rem;
-    }
-
-    &[data-appearance='table']::after {
-        border: 1px solid currentColor;
-        border-radius: inherit;
-        pointer-events: none;
-        color: var(--tui-border-normal);
-    }
-
-    .wrapper-hover({
-        &:not(._focused):before {
-            background-color: var(--tui-background-neutral-1);
-        }
-    });
-
-    .wrapper-focus({
-        background: transparent;
-
-        &:after {
-            border-width: 2px;
-            color: var(--tui-border-focus);
-        }
-    });
-
-    .wrapper-invalid({
-        &:before {
-            background-image: linear-gradient(to top right, transparent 0%, transparent 50%, var(--tui-status-negative) 50%, var(--tui-status-negative) 100%);
-        }
-
-        &:not(._focused):before {
-            background-color: var(--tui-status-negative-pale);
-        }
-
-        .wrapper-hover({
-            &:not(._focused):before {
-                background-color: var(--tui-status-negative-pale-hover);
-            }
-        });
-
-        .wrapper-disabled({
-            background: transparent;
-        });
-
-        .wrapper-focus({
-            background: transparent;
-
-            --tui-border-focus: var(--tui-status-negative);
-
-            &:after {
-                border-width: 1px;
-            }
-        });
-    });
-}
-
-table [tuiWrapper][data-appearance='table'] {
-    &[data-appearance='table']:not(._focused)::after {
-        border-width: 0;
-    }
-
-    &._focused {
-        z-index: 1;
-    }
-}
-
-[tuiWrapper][data-appearance='icon'] {
-    color: var(--tui-text-tertiary);
-
-    [tuiWrapper]:not([data-state='readonly']):hover .t-textfield-icon &:not([data-state='disabled']) {
-        color: var(--tui-text-secondary);
-    }
-
-    .wrapper-hover({
-        color: var(--tui-text-secondary);
-    });
-
-    .wrapper-active({
-        color: var(--tui-text-primary);
-    });
-}
-
-tui-primitive-textfield:hover:not(._disabled) [tuiAppearance][data-appearance='icon'],
-tui-textarea:hover:not(._disabled) [tuiAppearance][data-appearance='icon'],
-tui-input-tag:hover:not(._disabled) [tuiAppearance][data-appearance='icon'] {
-    color: var(--tui-text-secondary);
-
-    .wrapper-active({
-        color: var(--tui-text-primary);
-    });
-}
-
-[tuiWrapper][data-appearance='none'] {
-    outline: none;
-
-    &::after {
-        border: none;
-    }
-}