@taiga-ui/core 4.42.0 → 4.43.0-canary.0505af2

package/styles/components/notification.less

@@ -36,23 +36,28 @@ tui-notification,
     box-sizing: border-box;
     text-align: start;
     text-decoration: none;
-    border-inline-start: var(--t-left) solid transparent;
-    border-inline-end: var(--t-right) solid transparent;
+    border-inline-start: var(--t-start) solid transparent;
+    border-inline-end: var(--t-end) solid transparent;
 
-    --t-left: 0;
-    --t-right: 0;
+    --t-start: 0;
+    --t-end: 0;
 
     &[style*='--t-icon-start:'] {
-        --t-left: 2rem;
+        --t-start: 2rem;
     }
 
     &[style*='--t-icon-end:'] {
-        --t-right: 1.5rem;
+        --t-end: 1.5rem;
     }
 
     &::before {
         position: absolute;
         left: -1rem;
+
+        @supports (inset-inline-start: -1rem) {
+            left: unset;
+            inset-inline-start: -1rem;
+        }
     }
 
     &::after {
@@ -60,8 +65,15 @@ tui-notification,
 
         right: -0.5rem;
         font-size: 1rem;
-        margin: 0 -0.25rem 0 auto;
+        margin: 0;
+        margin-inline-end: -0.25rem;
+        margin-inline-start: auto;
         color: var(--tui-text-tertiary) !important;
+
+        @supports (inset-inline-end: -0.5rem) {
+            right: unset;
+            inset-inline-end: -0.5rem;
+        }
     }
 
     &[data-size='s'] {
@@ -71,17 +83,27 @@ tui-notification,
         border-radius: var(--tui-radius-m);
 
         &[style*='--t-icon-start:'] {
-            --t-left: 1.5rem;
+            --t-start: 1.5rem;
         }
 
         &::before {
             top: 0.5rem;
             left: -0.875rem;
             font-size: 1rem;
+
+            @supports (inset-inline-start: -0.875rem) {
+                left: unset;
+                inset-inline-start: -0.875rem;
+            }
         }
 
         &::after {
             right: -0.875rem;
+
+            @supports (inset-inline-end: -0.875rem) {
+                right: unset;
+                inset-inline-end: -0.875rem;
+            }
         }
 
         tui-icon {
@@ -105,6 +127,11 @@ tui-notification,
         > [tuiIconButton] {
             top: 0;
             right: 0;
+
+            @supports (inset-inline-end: 0) {
+                right: unset;
+                inset-inline-end: 0;
+            }
         }
     }
 
@@ -115,16 +142,26 @@ tui-notification,
         border-radius: var(--tui-radius-m);
 
         &[style*='--t-icon-start:'] {
-            --t-left: 1.625rem;
+            --t-start: 1.625rem;
         }
 
         &::before {
             left: -0.875rem;
             font-size: 1.25rem;
+
+            @supports (inset-inline-start: -0.875rem) {
+                left: unset;
+                inset-inline-start: -0.875rem;
+            }
         }
 
         &::after {
             right: -0.75rem;
+
+            @supports (inset-inline-end: -0.75rem) {
+                right: unset;
+                inset-inline-end: -0.75rem;
+            }
         }
 
         tui-icon {
@@ -148,6 +185,11 @@ tui-notification,
         > [tuiIconButton] {
             top: 0.375rem;
             right: 0.5rem;
+
+            @supports (inset-inline-end: 0.5rem) {
+                right: unset;
+                inset-inline-end: 0.5rem;
+            }
         }
     }
 
@@ -164,7 +206,7 @@ tui-notification,
             display: flex;
             align-items: center;
             gap: 1.25rem;
-            margin-top: 0.625rem;
+            margin-block-start: 0.625rem;
             font: var(--tui-font-text-s);
         }
     }
@@ -175,6 +217,11 @@ tui-notification,
         right: 0.75rem;
         box-shadow: none !important;
         background: transparent !important;
+
+        @supports (inset-inline-end: 0.75rem) {
+            right: unset;
+            inset-inline-end: 0.75rem;
+        }
     }
 }
 

package/styles/components/textfield.less

@@ -7,8 +7,8 @@ tui-textfield {
     --t-height: var(--tui-height-l);
     --t-padding: var(--tui-padding-l);
     --t-label: -0.7em;
-    --t-right: ~'0rem';
-    --t-left: ~'0rem';
+    --t-end: ~'0rem';
+    --t-start: ~'0rem';
 
     position: relative;
     display: flex;
@@ -25,19 +25,19 @@ tui-textfield {
     isolation: isolate;
 
     &[style*='--t-icon-start:'] {
-        --t-left: 2.25rem;
+        --t-start: 2.25rem;
     }
 
     &[style*='--t-icon-end:'] {
-        --t-right: 2.25rem;
+        --t-end: 2.25rem;
     }
 
     &[tuiIcons]::after {
         position: relative;
         block-size: auto;
         align-self: stretch;
-        border-left: var(--t-padding) solid transparent;
-        border-right: var(--t-padding) solid transparent;
+        border-inline-start: var(--t-padding) solid transparent;
+        border-inline-end: var(--t-padding) solid transparent;
         margin: 0 calc(-1 * var(--t-padding));
     }
 
@@ -91,20 +91,22 @@ tui-textfield {
         font: var(--tui-font-text-ui-s);
 
         &[style*='--t-icon-start:'] {
-            --t-left: 1.25rem;
+            --t-start: 1.25rem;
         }
 
         &[style*='--t-icon-end:'] {
-            --t-right: 1.25rem;
+            --t-end: 1.25rem;
         }
 
         &::before {
-            margin: 0 0.5rem 0 -0.125rem;
+            margin-inline-end: 0.5rem;
+            margin-inline-start: -0.125rem;
             font-size: 1rem;
         }
 
         &::after {
-            margin: 0 calc(-0.125rem - var(--t-padding)) 0 calc(0.575rem - var(--t-padding));
+            margin-inline-end: calc(-0.125rem - var(--t-padding));
+            margin-inline-start: calc(0.625rem - var(--t-padding));
             font-size: 1rem;
         }
 
@@ -129,19 +131,21 @@ tui-textfield {
         font: var(--tui-font-text-ui-s);
 
         &[style*='--t-icon-start:'] {
-            --t-left: 1.75rem;
+            --t-start: 1.75rem;
         }
 
         &[style*='--t-icon-end:'] {
-            --t-right: 1.75rem;
+            --t-end: 1.75rem;
         }
 
         &::before {
-            margin: 0 0.125rem 0 -0.125rem;
+            margin-inline-start: -0.125rem;
+            margin-inline-end: 0.125rem;
         }
 
         &::after {
-            margin: 0 calc(-0.125rem - var(--t-padding)) 0 calc(0.25rem - var(--t-padding));
+            margin-inline-start: calc(0.25rem - var(--t-padding));
+            margin-inline-end: calc(-0.125rem - var(--t-padding));
         }
 
         input,
@@ -204,7 +208,14 @@ tui-textfield {
         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;
@@ -218,9 +229,16 @@ tui-textfield {
         input:not([type='range']),
         select:defined,
         textarea:defined {
-            padding-top: calc(var(--t-height) / 3);
+            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;
@@ -240,8 +258,8 @@ tui-textfield {
         border-width: 0;
         overscroll-behavior: none;
         // StackBlitz changes "0rem" to "0" breaking calc
-        padding-inline-start: calc(var(--t-left, ~'0rem') + var(--t-padding));
-        padding-inline-end: calc(var(--t-right, ~'0rem') + var(--t-side) + var(--t-padding));
+        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 {
@@ -309,6 +327,7 @@ tui-textfield {
             });
         }
 
+        // @deprecated remove in v5
         .ios-only({
             &._ios-fix {
                 position: fixed;

package/styles/mixins/mixins.less

@@ -162,7 +162,7 @@
 
 .tui-line-clamp(@count: 3) {
     display: -webkit-box;
-    -webkit-box-orient: vertical;
+    -webkit-box-orient: block-axis;
     -webkit-line-clamp: @count;
     line-clamp: @count;
     overflow: hidden;

package/styles/mixins/slider.less

@@ -30,15 +30,15 @@
 
     tui-textfield + &, /* TODO: add :has([tuiInputSlider]) */
     tui-input-slider + & {
-        margin-left: calc(var(--tui-radius-m) / 2 + @first-tick-center);
+        margin-inline-start: calc(var(--tui-radius-m) / 2 + @first-tick-center);
     }
 
     tui-input-range + &,
     tui-range + & {
         @thumb: @thumb-diameters[@@input-size];
 
-        margin-left: @thumb;
-        margin-right: @thumb;
+        margin-inline-start: @thumb;
+        margin-inline-end: @thumb;
 
         & > * {
             &:first-child {

package/styles/mixins/slider.scss

@@ -29,14 +29,14 @@ $thumb-diameters: (
     }
 
     tui-input-slider + & {
-        margin-left: calc(var(--tui-radius-m) / 2 + #{$first-tick-center});
+        margin-inline-start: calc(var(--tui-radius-m) / 2 + #{$first-tick-center});
     }
 
     tui-input-range + &,
     tui-range + & {
         $thumb: map-get($thumb-diameters, $input-size);
-        margin-left: $thumb;
-        margin-right: $thumb;
+        margin-inline-start: $thumb;
+        margin-inline-end: $thumb;
 
         & > * {
             &:first-child {

package/styles/theme/appearance/table.less

@@ -17,7 +17,7 @@ TODO: remove :not([tuiWrapper]) after legacy controls deletion
     background: transparent;
     border: none;
     outline: none;
-    border-bottom: calc(var(--t-row-height) - var(--t-height)) solid transparent;
+    border-block-end: calc(var(--t-row-height) - var(--t-height)) solid transparent;
 
     &:not(._empty) {
         color: var(--tui-text-primary);

package/tokens/animations-speed.d.ts

@@ -1,4 +1,5 @@
+import { InjectionToken } from '@angular/core';
 /**
  * Speed of all Taiga UI animations. 1 equals 300ms.
  */
-export declare const TUI_ANIMATIONS_SPEED: import("@angular/core").InjectionToken<number>;
+export declare const TUI_ANIMATIONS_SPEED: InjectionToken<number>;

package/tokens/assets-path.d.ts

@@ -1,3 +1,4 @@
 import type { ValueProvider } from '@angular/core';
-export declare const TUI_ASSETS_PATH: import("@angular/core").InjectionToken<string>;
+import { InjectionToken } from '@angular/core';
+export declare const TUI_ASSETS_PATH: InjectionToken<string>;
 export declare function tuiAssetsPathProvider(useValue: string): ValueProvider;

package/tokens/auxiliary.d.ts

@@ -1,3 +1,4 @@
 import type { Provider, Type } from '@angular/core';
-export declare const TUI_AUXILIARY: import("@angular/core").InjectionToken<null>;
+import { InjectionToken } from '@angular/core';
+export declare const TUI_AUXILIARY: InjectionToken<null>;
 export declare function tuiAsAuxiliary(x: Type<unknown>): Provider;

package/tokens/common-icons.d.ts

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

package/tokens/dark-mode.d.ts

@@ -1,6 +1,7 @@
 import type { WritableSignal } from '@angular/core';
+import { InjectionToken } from '@angular/core';
 export declare const TUI_DARK_MODE_DEFAULT_KEY = "tuiDark";
-export declare const TUI_DARK_MODE_KEY: import("@angular/core").InjectionToken<string>;
-export declare const TUI_DARK_MODE: import("@angular/core").InjectionToken<WritableSignal<boolean> & {
+export declare const TUI_DARK_MODE_KEY: InjectionToken<string>;
+export declare const TUI_DARK_MODE: InjectionToken<WritableSignal<boolean> & {
     reset(): void;
 }>;

package/tokens/date-format.d.ts

@@ -1,4 +1,5 @@
-import type { InjectionToken, Provider } from '@angular/core';
+import type { Provider } from '@angular/core';
+import { InjectionToken } from '@angular/core';
 import type { TuiDateMode } from '@taiga-ui/cdk/date-time';
 import type { Observable } from 'rxjs';
 /**

package/tokens/day-type-handler.d.ts

@@ -1,6 +1,7 @@
+import { InjectionToken } from '@angular/core';
 import type { TuiDay } from '@taiga-ui/cdk/date-time';
 import type { TuiHandler } from '@taiga-ui/cdk/types';
 /**
  * Token for adding data-type attribute to calendar cell
  */
-export declare const TUI_DAY_TYPE_HANDLER: import("@angular/core").InjectionToken<TuiHandler<TuiDay, string>>;
+export declare const TUI_DAY_TYPE_HANDLER: InjectionToken<TuiHandler<TuiDay, string>>;

package/tokens/first-day-of-week.d.ts

@@ -1,4 +1,5 @@
+import { InjectionToken } from '@angular/core';
 /**
  * The first day of the week index
  */
-export declare const TUI_FIRST_DAY_OF_WEEK: import("@angular/core").InjectionToken<0 | 1 | 2 | 3 | 4 | 5 | 6>;
+export declare const TUI_FIRST_DAY_OF_WEEK: InjectionToken<0 | 1 | 2 | 3 | 4 | 5 | 6>;

package/tokens/i18n.d.ts

@@ -1,28 +1,29 @@
+import { InjectionToken } from '@angular/core';
 /**
  * Localized months names
  */
-export declare const TUI_MONTHS: import("@angular/core").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("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]>>;
 /**
  * i18n 'close' word
  */
-export declare const TUI_CLOSE_WORD: import("@angular/core").InjectionToken<import("rxjs").Observable<string>>;
+export declare const TUI_CLOSE_WORD: InjectionToken<import("rxjs").Observable<string>>;
 /**
  * i18n 'clear' word
  */
-export declare const TUI_CLEAR_WORD: import("@angular/core").InjectionToken<import("rxjs").Observable<string>>;
+export declare const TUI_CLEAR_WORD: InjectionToken<import("rxjs").Observable<string>>;
 /**
  * i18n 'Nothing found' message
  */
-export declare const TUI_NOTHING_FOUND_MESSAGE: import("@angular/core").InjectionToken<import("rxjs").Observable<string>>;
+export declare const TUI_NOTHING_FOUND_MESSAGE: InjectionToken<import("rxjs").Observable<string>>;
 /**
  * i18n of error message
  */
-export declare const TUI_DEFAULT_ERROR_MESSAGE: import("@angular/core").InjectionToken<import("rxjs").Observable<string>>;
+export declare const TUI_DEFAULT_ERROR_MESSAGE: InjectionToken<import("rxjs").Observable<string>>;
 /**
  * spin i18n texts
  */
-export declare const TUI_SPIN_TEXTS: import("@angular/core").InjectionToken<import("rxjs").Observable<readonly [previous: string, next: string]>>;
+export declare const TUI_SPIN_TEXTS: InjectionToken<import("rxjs").Observable<readonly [previous: string, next: string]>>;
 /**
  * calendars i18n texts
  */
-export declare const TUI_SHORT_WEEK_DAYS: import("@angular/core").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("rxjs").Observable<readonly [Monday: string, Tuesday: string, Wednesday: string, Thursday: string, Friday: string, Saturday: string, Sunday: string]>>;

package/tokens/icon-resolver.d.ts

@@ -1,9 +1,10 @@
 import type { Provider } from '@angular/core';
+import { InjectionToken } from '@angular/core';
 import type { TuiStringHandler } from '@taiga-ui/cdk/types';
-export declare const TUI_ICON_RESOLVER: import("@angular/core").InjectionToken<TuiStringHandler<string>>;
+export declare const TUI_ICON_RESOLVER: InjectionToken<TuiStringHandler<string>>;
 /**
  * @deprecated use {@link TUI_ICON_RESOLVER}
  */
-export declare const TUI_ICON_START_RESOLVER: import("@angular/core").InjectionToken<TuiStringHandler<string>>;
+export declare const TUI_ICON_START_RESOLVER: InjectionToken<TuiStringHandler<string>>;
 export declare function tuiInjectIconResolver(): TuiStringHandler<string>;
 export declare function tuiIconResolverProvider(useValue: TuiStringHandler<string>): Provider;

package/tokens/icon.d.ts

@@ -1,2 +1,3 @@
-export declare const TUI_ICON_START: import("@angular/core").InjectionToken<string>;
-export declare const TUI_ICON_END: import("@angular/core").InjectionToken<string>;
+import { InjectionToken } from '@angular/core';
+export declare const TUI_ICON_START: InjectionToken<string>;
+export declare const TUI_ICON_END: InjectionToken<string>;

package/tokens/icons.d.ts

@@ -1,7 +1,8 @@
 import type { FactoryProvider } from '@angular/core';
-export declare const TUI_ICON_REGISTRY: import("@angular/core").InjectionToken<Record<string, string>>;
+import { 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: import("@angular/core").InjectionToken<Record<string, string>>;
+export declare const TUI_ICON_STARTS: InjectionToken<Record<string, string>>;
 export declare function tuiIconsProvider(icons: Record<string, string>): FactoryProvider;

package/tokens/media.d.ts

@@ -1,3 +1,4 @@
+import { InjectionToken } from '@angular/core';
 export interface TuiMedia {
     readonly desktopLarge: number;
     readonly desktopSmall: number;
@@ -7,4 +8,4 @@ export interface TuiMedia {
 /**
  * Token for media constant
  */
-export declare const TUI_MEDIA: import("@angular/core").InjectionToken<TuiMedia>;
+export declare const TUI_MEDIA: InjectionToken<TuiMedia>;

package/tokens/number-format.d.ts

@@ -1,4 +1,5 @@
-import type { InjectionToken, Provider } from '@angular/core';
+import type { Provider } from '@angular/core';
+import { InjectionToken } from '@angular/core';
 import type { TuiRounding } from '@taiga-ui/cdk/types';
 import type { Observable } from 'rxjs';
 export type TuiDecimalMode = 'always' | 'not-zero' | 'pad';

package/tokens/reduced-motion.d.ts

@@ -1 +1,2 @@
-export declare const TUI_REDUCED_MOTION: import("@angular/core").InjectionToken<boolean>;
+import { InjectionToken } from '@angular/core';
+export declare const TUI_REDUCED_MOTION: InjectionToken<boolean>;

package/tokens/scroll-ref.d.ts

@@ -1,2 +1,2 @@
-import { ElementRef } from '@angular/core';
-export declare const TUI_SCROLL_REF: import("@angular/core").InjectionToken<ElementRef<HTMLElement>>;
+import { ElementRef, InjectionToken } from '@angular/core';
+export declare const TUI_SCROLL_REF: InjectionToken<ElementRef<HTMLElement>>;

package/tokens/selection-stream.d.ts

@@ -1,5 +1,6 @@
+import { InjectionToken } from '@angular/core';
 import type { Observable } from 'rxjs';
 /**
  * A stream of possible selection changes
  */
-export declare const TUI_SELECTION_STREAM: import("@angular/core").InjectionToken<Observable<unknown>>;
+export declare const TUI_SELECTION_STREAM: InjectionToken<Observable<unknown>>;

package/tokens/spin-icons.d.ts

@@ -1,5 +1,6 @@
+import { InjectionToken } from '@angular/core';
 export interface TuiSpinIcons {
     readonly decrement: string;
     readonly increment: string;
 }
-export declare const TUI_SPIN_ICONS: import("@angular/core").InjectionToken<TuiSpinIcons>;
+export declare const TUI_SPIN_ICONS: InjectionToken<TuiSpinIcons>;

package/tokens/theme.d.ts

@@ -1 +1,2 @@
-export declare const TUI_THEME: import("@angular/core").InjectionToken<string>;
+import { InjectionToken } from '@angular/core';
+export declare const TUI_THEME: InjectionToken<string>;

package/tokens/viewport.d.ts

@@ -1,7 +1,8 @@
 import type { Provider, Type } from '@angular/core';
+import { InjectionToken } from '@angular/core';
 import type { TuiRectAccessor } from '@taiga-ui/core/classes';
 /**
  * Viewport accessor
  */
-export declare const TUI_VIEWPORT: import("@angular/core").InjectionToken<TuiRectAccessor>;
+export declare const TUI_VIEWPORT: InjectionToken<TuiRectAccessor>;
 export declare function tuiAsViewport(accessor: Type<TuiRectAccessor>): Provider;