@taiga-ui/core 4.52.0-canary.d626d20 → 4.52.0-canary.e07790b

package/styles/mixins/slider.less

@@ -1,7 +1,6 @@
 @thumb-diameters: {
     @s: 0.5rem;
     @m: 0.75rem;
-    @l: 0.75rem;
 };
 
 @track-inset: {
@@ -10,9 +9,8 @@
     @l: 1rem;
 };
 
-// TODO(v5): use `l` by default (default size for new textfields)
-.tui-slider-ticks-labels(@input-size: m) {
-    @thumb: @thumb-diameters[@@input-size];
+.tui-slider-ticks-labels(@thumb-size: m) {
+    @thumb: @thumb-diameters[@@thumb-size];
 
     --t-offset: calc(@thumb / 2);
 
@@ -45,27 +43,34 @@
         }
     }
 
-    /* TODO(v5): delete */
-    tui-input-slider + & {
-        margin-inline-start: calc(var(--tui-radius-m) / 2 + var(--t-offset));
+    tui-range + & {
+        --t-offset: @thumb;
     }
 
     /* TODO: add :has([tuiInputSlider]) */
-    tui-textfield + & {
-        --t-offset: calc(var(--tui-radius-m) / 2 + @thumb / 2);
+    tui-textfield[data-size='l'] + & {
+        --t-offset: calc(@track-inset[@l] + @thumb / 2);
     }
 
     /* TODO: add :has([tuiInputSlider]) */
-    tui-textfield[data-size='l'] + & {
-        --t-offset: calc(var(--tui-radius-l) / 2 + @thumb / 2);
+    tui-textfield[data-size='m'] + & {
+        --t-offset: calc(@track-inset[@m] + @thumb / 2);
     }
 
-    tui-input-range:not([new]) + &, /* TODO(v5): delete */
-    tui-range + & {
-        --t-offset: @thumb;
+    /* TODO: add :has([tuiInputSlider]) */
+    tui-textfield[data-size='s'] + & {
+        --t-offset: calc(@track-inset[@s] + @thumb / 2);
+    }
+
+    tui-input-range[data-size='l'] + & {
+        --t-offset: calc(@track-inset[@l] + @thumb);
+    }
+
+    tui-input-range[data-size='m'] + & {
+        --t-offset: calc(@track-inset[@m] + @thumb);
     }
 
-    tui-input-range[new] + & {
-        --t-offset: calc(@track-inset[@@input-size] + @thumb);
+    tui-input-range[data-size='s'] + & {
+        --t-offset: calc(@track-inset[@s] + @thumb);
     }
 }

package/styles/mixins/slider.scss

@@ -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,15 +53,12 @@
 
 [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,
     &::after {
-        .transition(~'color, transform');
-
+        transition-property: color, transform;
         color: var(--tui-text-tertiary);
     }
 

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

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

@@ -15,8 +15,7 @@
     // TODO: Remove tuiWrapper hack in v5
     &:not([tuiWrapper])::before,
     &:not([tuiWrapper])::after {
-        .transition(~'color, transform');
-
+        transition-property: color, transform;
         color: var(--tui-text-tertiary);
     }
 

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,10 +1,8 @@
-@font-fallback: -apple-system, 'BlinkMacSystemFont', system-ui, 'Roboto', 'Segoe UI', 'Helvetica Neue', sans-serif;
-
 &:root,
 &:host {
     // Fonts
-    --tui-font-heading: 'Manrope', @font-fallback;
-    --tui-font-text: 'Manrope', @font-fallback;
+    --tui-font-heading: 'Manrope', system-ui, sans-serif;
+    --tui-font-text: '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);

package/tokens/common-icons.d.ts

@@ -1,4 +1,3 @@
-import { InjectionToken, type Provider } from '@angular/core';
 export interface TuiCommonIcons {
     readonly check: string;
     readonly close: string;
@@ -6,6 +5,7 @@ export interface TuiCommonIcons {
     readonly more: string;
     readonly search: string;
     readonly ellipsis: string;
+    readonly decrement: string;
+    readonly increment: string;
 }
-export declare const TUI_COMMON_ICONS: InjectionToken<TuiCommonIcons>;
-export declare function tuiCommonIconsProvider(icons: Partial<TuiCommonIcons>): Provider;
+export declare const TUI_COMMON_ICONS: import("@angular/core").InjectionToken<TuiCommonIcons>, tuiCommonIconsProvider: (item: Partial<TuiCommonIcons> | (() => Partial<TuiCommonIcons>)) => import("@angular/core").FactoryProvider;

package/tokens/date-format.d.ts

@@ -1,6 +1,5 @@
-import { InjectionToken, type Provider } from '@angular/core';
+import { InjectionToken, type Provider, type Signal } from '@angular/core';
 import { type TuiDateMode } from '@taiga-ui/cdk/date-time';
-import { type Observable } from 'rxjs';
 /**
  * Formatting configuration for displayed dates
  */
@@ -19,5 +18,5 @@ export declare const TUI_DEFAULT_DATE_FORMAT: TuiDateFormatSettings;
 /**
  * Formatting configuration for displayed dates
  */
-export declare const TUI_DATE_FORMAT: InjectionToken<Observable<TuiDateFormatSettings>>;
+export declare const TUI_DATE_FORMAT: InjectionToken<Signal<TuiDateFormatSettings>>;
 export declare function tuiDateFormatProvider(options: Partial<TuiDateFormatSettings>): Provider;

package/tokens/i18n.d.ts

@@ -2,28 +2,28 @@ import { InjectionToken } from '@angular/core';
 /**
  * Localized months names
  */
-export declare const TUI_MONTHS: InjectionToken<import("rxjs").Observable<readonly [January: string, February: string, March: string, April: string, May: string, June: string, July: string, August: string, September: string, October: string, November: string, December: string]>>;
+export declare const TUI_MONTHS: InjectionToken<import("@angular/core").Signal<readonly [January: string, February: string, March: string, April: string, May: string, June: string, July: string, August: string, September: string, October: string, November: string, December: string]>>;
 /**
  * i18n 'close' word
  */
-export declare const TUI_CLOSE_WORD: InjectionToken<import("rxjs").Observable<string>>;
+export declare const TUI_CLOSE_WORD: InjectionToken<import("@angular/core").Signal<string>>;
 /**
  * i18n 'clear' word
  */
-export declare const TUI_CLEAR_WORD: InjectionToken<import("rxjs").Observable<string>>;
+export declare const TUI_CLEAR_WORD: InjectionToken<import("@angular/core").Signal<string>>;
 /**
  * i18n 'Nothing found' message
  */
-export declare const TUI_NOTHING_FOUND_MESSAGE: InjectionToken<import("rxjs").Observable<string>>;
+export declare const TUI_NOTHING_FOUND_MESSAGE: InjectionToken<import("@angular/core").Signal<string>>;
 /**
  * i18n of error message
  */
-export declare const TUI_DEFAULT_ERROR_MESSAGE: InjectionToken<import("rxjs").Observable<string>>;
+export declare const TUI_DEFAULT_ERROR_MESSAGE: InjectionToken<import("@angular/core").Signal<string>>;
 /**
  * spin i18n texts
  */
-export declare const TUI_SPIN_TEXTS: InjectionToken<import("rxjs").Observable<readonly [previous: string, next: string]>>;
+export declare const TUI_SPIN_TEXTS: InjectionToken<import("@angular/core").Signal<readonly [previous: string, next: string]>>;
 /**
  * calendars i18n texts
  */
-export declare const TUI_SHORT_WEEK_DAYS: InjectionToken<import("rxjs").Observable<readonly [Monday: string, Tuesday: string, Wednesday: string, Thursday: string, Friday: string, Saturday: string, Sunday: string]>>;
+export declare const TUI_SHORT_WEEK_DAYS: InjectionToken<import("@angular/core").Signal<readonly [Monday: string, Tuesday: string, Wednesday: string, Thursday: string, Friday: string, Saturday: string, Sunday: string]>>;

package/tokens/icon-resolver.d.ts

@@ -1,10 +1,6 @@
 import { InjectionToken, type Provider } from '@angular/core';
 import { type TuiStringHandler } from '@taiga-ui/cdk/types';
 export declare const TUI_ICON_RESOLVER: InjectionToken<TuiStringHandler<string>>;
-/**
- * @deprecated use {@link TUI_ICON_RESOLVER}
- */
-export declare const TUI_ICON_START_RESOLVER: InjectionToken<TuiStringHandler<string>>;
-export declare function tuiGetIconMode(icon?: string | null): 'font' | 'image' | 'svg' | null;
+export declare function tuiGetIconMode(icon?: string | null): string | undefined;
 export declare function tuiInjectIconResolver(): TuiStringHandler<string>;
 export declare function tuiIconResolverProvider(useValue: TuiStringHandler<string>): Provider;

package/tokens/icons.d.ts

@@ -1,7 +1,3 @@
 import { type FactoryProvider, InjectionToken } from '@angular/core';
 export declare const TUI_ICON_REGISTRY: InjectionToken<Record<string, string>>;
-/**
- * @deprecated: use {@link TUI_ICON_REGISTRY}
- */
-export declare const TUI_ICON_STARTS: InjectionToken<Record<string, string>>;
 export declare function tuiIconsProvider(icons: Record<string, string>): FactoryProvider;

package/tokens/index.d.ts

@@ -4,8 +4,6 @@ export * from './auxiliary';
 export * from './common-icons';
 export * from './dark-mode';
 export * from './date-format';
-export * from './day-type-handler';
-export * from './first-day-of-week';
 export * from './i18n';
 export * from './icon';
 export * from './icon-resolver';
@@ -13,8 +11,7 @@ export * from './icons';
 export * from './media';
 export * from './number-format';
 export * from './reduced-motion';
-export * from './scroll-ref';
 export * from './selection-stream';
-export * from './spin-icons';
 export * from './theme';
+export * from './validation-errors';
 export * from './viewport';

package/tokens/number-format.d.ts

@@ -1,6 +1,5 @@
-import { InjectionToken, type Provider } from '@angular/core';
+import { InjectionToken, type Provider, type Signal } from '@angular/core';
 import { type TuiRounding } from '@taiga-ui/cdk/types';
-import { type Observable } from 'rxjs';
 export type TuiDecimalMode = 'always' | 'not-zero' | 'pad';
 export type TuiDecimalSymbol = ',' | '.';
 /**
@@ -35,5 +34,5 @@ export declare const TUI_DEFAULT_NUMBER_FORMAT: TuiNumberFormatSettings;
 /**
  * Formatting configuration for displayed numbers
  */
-export declare const TUI_NUMBER_FORMAT: InjectionToken<Observable<TuiNumberFormatSettings>>;
+export declare const TUI_NUMBER_FORMAT: InjectionToken<Signal<TuiNumberFormatSettings>>;
 export declare function tuiNumberFormatProvider(options: Partial<TuiNumberFormatSettings>): Provider;

package/tokens/validation-errors.d.ts

@@ -0,0 +1,4 @@
+import { InjectionToken, type Provider, type Signal } from '@angular/core';
+import { type PolymorpheusContent } from '@taiga-ui/polymorpheus';
+export declare const TUI_VALIDATION_ERRORS: InjectionToken<Record<string, PolymorpheusContent | Signal<PolymorpheusContent>>>;
+export declare const tuiValidationErrorsProvider: (useValue: Record<string, PolymorpheusContent | Signal<PolymorpheusContent>>) => Provider;

package/types/index.d.ts

@@ -2,7 +2,4 @@ export type * from './direction';
 export type * from './interactive-state';
 export type * from './orientation';
 export type * from './point';
-export type * from './portal-item';
-export type * from './range-state';
 export type * from './size';
-export type * from './value-content-context';

package/types/point.d.ts

@@ -1 +1 @@
-export type TuiPoint = Readonly<[number, number]>;
+export type TuiPoint = Readonly<[x: number, y: number]>;

package/types/size.d.ts

@@ -1,14 +1,3 @@
-/**
- * Various sizes for components
- *
- * 'xxs' - extra extra small
- * 'xs' - extra small
- * 's' - small
- * 'm' - medium (typically default)
- * 'l' - large
- * 'xl' - extra large
- * 'xxl' - extra extra large
- */
 export type TuiSizeM = 'm';
 export type TuiSizeS = TuiSizeM | 's';
 export type TuiSizeL = TuiSizeM | 'l';

package/utils/format/index.d.ts

@@ -1,4 +1,3 @@
 export * from './format-number';
 export * from './get-fractional-part-padded';
 export * from './number-to-string-without-exp';
-export * from './string-hash-to-hsl';

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/utils/miscellaneous/get-duration.d.ts

@@ -0,0 +1,2 @@
+export declare const TUI_ANIMATIONS_DEFAULT_DURATION = 300;
+export declare function tuiGetDuration(speed: number): number;

package/utils/miscellaneous/index.d.ts

@@ -1,6 +1,7 @@
 export * from './font-scaling';
+export * from './get-duration';
 export * from './is-editing-key';
 export * from './is-obscured';
 export * from './override-options';
+export * from './provide-taiga';
 export * from './size-bigger';
-export * from './to-animation-options';

package/utils/miscellaneous/provide-taiga.d.ts

@@ -0,0 +1,13 @@
+import { type EnvironmentProviders, InjectionToken, type Provider } from '@angular/core';
+interface ExperimentalAPIs {
+    readonly all: boolean;
+}
+export interface TuiOptions {
+    readonly mode?: 'dark' | 'light';
+    readonly apis: Partial<ExperimentalAPIs> | 'stable';
+    readonly fontScaling: boolean;
+    readonly scrollbars: 'custom' | 'native';
+}
+export declare const TUI_OPTIONS: InjectionToken<TuiOptions>;
+export declare function provideTaiga(config?: Partial<TuiOptions>): Array<EnvironmentProviders | Provider>;
+export {};