@taiga-ui/kit 4.52.0-canary.932d3ef → 4.52.0-canary.9471234

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@taiga-ui/kit",
-  "version": "4.52.0-canary.932d3ef",
+  "version": "4.52.0-canary.9471234",
   "description": "Taiga UI Angular main components kit",
   "keywords": [
     "angular",
@@ -10,7 +10,10 @@
     "directive"
   ],
   "homepage": "https://github.com/taiga-family/taiga-ui",
-  "repository": "https://github.com/taiga-family/taiga-ui",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/taiga-family/taiga-ui"
+  },
   "license": "Apache-2.0",
   "exports": {
     "./styles/*": "./styles/*",
@@ -113,6 +116,10 @@
       "types": "./components/confirm/index.d.ts",
       "default": "./fesm2022/taiga-ui-kit-components-confirm.mjs"
     },
+    "./components/copy": {
+      "types": "./components/copy/index.d.ts",
+      "default": "./fesm2022/taiga-ui-kit-components-copy.mjs"
+    },
     "./components/data-list-wrapper": {
       "types": "./components/data-list-wrapper/index.d.ts",
       "default": "./fesm2022/taiga-ui-kit-components-data-list-wrapper.mjs"
@@ -121,10 +128,6 @@
       "types": "./components/drawer/index.d.ts",
       "default": "./fesm2022/taiga-ui-kit-components-drawer.mjs"
     },
-    "./components/elastic-container": {
-      "types": "./components/elastic-container/index.d.ts",
-      "default": "./fesm2022/taiga-ui-kit-components-elastic-container.mjs"
-    },
     "./components/files": {
       "types": "./components/files/index.d.ts",
       "default": "./fesm2022/taiga-ui-kit-components-files.mjs"
@@ -133,9 +136,9 @@
       "types": "./components/filter/index.d.ts",
       "default": "./fesm2022/taiga-ui-kit-components-filter.mjs"
     },
-    "./components/floating-container": {
-      "types": "./components/floating-container/index.d.ts",
-      "default": "./fesm2022/taiga-ui-kit-components-floating-container.mjs"
+    "./components/fullscreen": {
+      "types": "./components/fullscreen/index.d.ts",
+      "default": "./fesm2022/taiga-ui-kit-components-fullscreen.mjs"
     },
     "./components/input-chip": {
       "types": "./components/input-chip/index.d.ts",
@@ -177,10 +180,6 @@
       "types": "./components/input-number/index.d.ts",
       "default": "./fesm2022/taiga-ui-kit-components-input-number.mjs"
     },
-    "./components/input-password": {
-      "types": "./components/input-password/index.d.ts",
-      "default": "./fesm2022/taiga-ui-kit-components-input-password.mjs"
-    },
     "./components/input-phone": {
       "types": "./components/input-phone/index.d.ts",
       "default": "./fesm2022/taiga-ui-kit-components-input-phone.mjs"
@@ -241,18 +240,10 @@
       "types": "./components/pagination/index.d.ts",
       "default": "./fesm2022/taiga-ui-kit-components-pagination.mjs"
     },
-    "./components/pdf-viewer": {
-      "types": "./components/pdf-viewer/index.d.ts",
-      "default": "./fesm2022/taiga-ui-kit-components-pdf-viewer.mjs"
-    },
     "./components/pin": {
       "types": "./components/pin/index.d.ts",
       "default": "./fesm2022/taiga-ui-kit-components-pin.mjs"
     },
-    "./components/preview": {
-      "types": "./components/preview/index.d.ts",
-      "default": "./fesm2022/taiga-ui-kit-components-preview.mjs"
-    },
     "./components/progress": {
       "types": "./components/progress/index.d.ts",
       "default": "./fesm2022/taiga-ui-kit-components-progress.mjs"
@@ -261,6 +252,10 @@
       "types": "./components/pulse/index.d.ts",
       "default": "./fesm2022/taiga-ui-kit-components-pulse.mjs"
     },
+    "./components/preview": {
+      "types": "./components/preview/index.d.ts",
+      "default": "./fesm2022/taiga-ui-kit-components-preview.mjs"
+    },
     "./components/push": {
       "types": "./components/push/index.d.ts",
       "default": "./fesm2022/taiga-ui-kit-components-push.mjs"
@@ -297,10 +292,6 @@
       "types": "./components/slider/index.d.ts",
       "default": "./fesm2022/taiga-ui-kit-components-slider.mjs"
     },
-    "./components/slides": {
-      "types": "./components/slides/index.d.ts",
-      "default": "./fesm2022/taiga-ui-kit-components-slides.mjs"
-    },
     "./components/status": {
       "types": "./components/status/index.d.ts",
       "default": "./fesm2022/taiga-ui-kit-components-status.mjs"
@@ -317,21 +308,25 @@
       "types": "./components/tabs/index.d.ts",
       "default": "./fesm2022/taiga-ui-kit-components-tabs.mjs"
     },
+    "./components/textarea": {
+      "types": "./components/textarea/index.d.ts",
+      "default": "./fesm2022/taiga-ui-kit-components-textarea.mjs"
+    },
     "./components/tiles": {
       "types": "./components/tiles/index.d.ts",
       "default": "./fesm2022/taiga-ui-kit-components-tiles.mjs"
     },
-    "./components/textarea": {
-      "types": "./components/textarea/index.d.ts",
-      "default": "./fesm2022/taiga-ui-kit-components-textarea.mjs"
+    "./components/toast": {
+      "types": "./components/toast/index.d.ts",
+      "default": "./fesm2022/taiga-ui-kit-components-toast.mjs"
     },
     "./components/tree": {
       "types": "./components/tree/index.d.ts",
       "default": "./fesm2022/taiga-ui-kit-components-tree.mjs"
     },
-    "./directives/button-close": {
-      "types": "./directives/button-close/index.d.ts",
-      "default": "./fesm2022/taiga-ui-kit-directives-button-close.mjs"
+    "./directives/appearance-proxy": {
+      "types": "./directives/appearance-proxy/index.d.ts",
+      "default": "./fesm2022/taiga-ui-kit-directives-appearance-proxy.mjs"
     },
     "./directives/button-group": {
       "types": "./directives/button-group/index.d.ts",
@@ -349,10 +344,6 @@
       "types": "./directives/connected/index.d.ts",
       "default": "./fesm2022/taiga-ui-kit-directives-connected.mjs"
     },
-    "./directives/copy": {
-      "types": "./directives/copy/index.d.ts",
-      "default": "./fesm2022/taiga-ui-kit-directives-copy.mjs"
-    },
     "./directives/data-list-dropdown-manager": {
       "types": "./directives/data-list-dropdown-manager/index.d.ts",
       "default": "./fesm2022/taiga-ui-kit-directives-data-list-dropdown-manager.mjs"
@@ -369,10 +360,6 @@
       "types": "./directives/highlight/index.d.ts",
       "default": "./fesm2022/taiga-ui-kit-directives-highlight.mjs"
     },
-    "./directives/lazy-loading": {
-      "types": "./directives/lazy-loading/index.d.ts",
-      "default": "./fesm2022/taiga-ui-kit-directives-lazy-loading.mjs"
-    },
     "./directives/password": {
       "types": "./directives/password/index.d.ts",
       "default": "./fesm2022/taiga-ui-kit-directives-password.mjs"
@@ -405,22 +392,30 @@
       "types": "./directives/unmask-handler/index.d.ts",
       "default": "./fesm2022/taiga-ui-kit-directives-unmask-handler.mjs"
     },
-    "./pipes/emails": {
-      "types": "./pipes/emails/index.d.ts",
-      "default": "./fesm2022/taiga-ui-kit-pipes-emails.mjs"
-    },
-    "./pipes/field-error": {
-      "types": "./pipes/field-error/index.d.ts",
-      "default": "./fesm2022/taiga-ui-kit-pipes-field-error.mjs"
+    "./pipes/auto-color": {
+      "types": "./pipes/auto-color/index.d.ts",
+      "default": "./fesm2022/taiga-ui-kit-pipes-auto-color.mjs"
     },
     "./pipes/filter-by-input": {
       "types": "./pipes/filter-by-input/index.d.ts",
       "default": "./fesm2022/taiga-ui-kit-pipes-filter-by-input.mjs"
     },
+    "./pipes/emails": {
+      "types": "./pipes/emails/index.d.ts",
+      "default": "./fesm2022/taiga-ui-kit-pipes-emails.mjs"
+    },
+    "./pipes/flag": {
+      "types": "./pipes/flag/index.d.ts",
+      "default": "./fesm2022/taiga-ui-kit-pipes-flag.mjs"
+    },
     "./pipes/hide-selected": {
       "types": "./pipes/hide-selected/index.d.ts",
       "default": "./fesm2022/taiga-ui-kit-pipes-hide-selected.mjs"
     },
+    "./pipes/initials": {
+      "types": "./pipes/initials/index.d.ts",
+      "default": "./fesm2022/taiga-ui-kit-pipes-initials.mjs"
+    },
     "./pipes/sort-countries": {
       "types": "./pipes/sort-countries/index.d.ts",
       "default": "./fesm2022/taiga-ui-kit-pipes-sort-countries.mjs"
@@ -432,10 +427,6 @@
     "./pipes/stringify-content": {
       "types": "./pipes/stringify-content/index.d.ts",
       "default": "./fesm2022/taiga-ui-kit-pipes-stringify-content.mjs"
-    },
-    "./components/preview/dialog": {
-      "types": "./components/preview/dialog/index.d.ts",
-      "default": "./fesm2022/taiga-ui-kit-components-preview-dialog.mjs"
     }
   },
   "peerDependencies": {
@@ -443,18 +434,20 @@
     "@angular/core": ">=19.0.0",
     "@angular/forms": ">=19.0.0",
     "@angular/router": ">=19.0.0",
-    "@maskito/angular": "^3.10.3",
-    "@maskito/core": "^3.10.3",
-    "@maskito/kit": "^3.10.3",
-    "@maskito/phone": "^3.10.3",
-    "@ng-web-apis/common": "^4.12.0",
-    "@ng-web-apis/intersection-observer": "^4.12.0",
-    "@ng-web-apis/mutation-observer": "^4.12.0",
-    "@ng-web-apis/resize-observer": "^4.12.0",
+    "@maskito/angular": "^5.0.0",
+    "@maskito/core": "^5.0.0",
+    "@maskito/kit": "^5.0.0",
+    "@maskito/phone": "^5.0.0",
+    "@ng-web-apis/common": "^5.0.1",
+    "@ng-web-apis/intersection-observer": "^5.0.1",
+    "@ng-web-apis/mutation-observer": "^5.0.1",
+    "@ng-web-apis/platform": "^5.0.1",
+    "@ng-web-apis/resize-observer": "^5.0.1",
     "@taiga-ui/cdk": "^4.52.0",
     "@taiga-ui/core": "^4.52.0",
+    "@taiga-ui/design-tokens": "~0.274.0",
     "@taiga-ui/i18n": "^4.52.0",
-    "@taiga-ui/polymorpheus": "^4.9.0",
+    "@taiga-ui/polymorpheus": "^5.0.0",
     "rxjs": ">=7.0.0"
   },
   "module": "fesm2022/taiga-ui-kit.mjs",

package/pipes/auto-color/auto-color.pipe.d.ts

@@ -0,0 +1,13 @@
+import { type PipeTransform } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class TuiAutoColorPipe implements PipeTransform {
+    transform(text: string): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TuiAutoColorPipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<TuiAutoColorPipe, "tuiAutoColor", true>;
+}
+/**
+ * Converts a string to an HSL color
+ * @param value string to convert
+ * @return HSL color string
+ */
+export declare function tuiAutoColor(value: string): string;

package/pipes/auto-color/index.d.ts

@@ -0,0 +1 @@
+export * from './auto-color.pipe';

package/pipes/filter-by-input/filter-by-input.pipe.d.ts

@@ -3,8 +3,11 @@ import { type TuiStringMatcher } from '@taiga-ui/cdk/types';
 import * as i0 from "@angular/core";
 export declare class TuiFilterByInputPipe implements PipeTransform {
     private readonly textfield;
-    private readonly host;
-    private readonly itemsHandlers;
+    private readonly handlers;
+    private readonly multi;
+    private readonly matcher;
+    private readonly items;
+    private readonly filtered;
     transform<T>(items: ReadonlyArray<readonly T[]>, matcher?: TuiStringMatcher<T>): ReadonlyArray<readonly T[]>;
     transform<T>(items: readonly T[], matcher?: TuiStringMatcher<T>): readonly T[];
     transform<T>(items: ReadonlyArray<readonly T[]> | null, matcher?: TuiStringMatcher<T>): ReadonlyArray<readonly T[]> | null;

package/pipes/flag/flag.pipe.d.ts

@@ -0,0 +1,13 @@
+import { type PipeTransform } from '@angular/core';
+import { type TuiCountryIsoCode } from '@taiga-ui/i18n/types';
+import * as i0 from "@angular/core";
+type IsoCode = TuiCountryIsoCode | string;
+export declare class TuiFlagPipe implements PipeTransform {
+    private readonly staticPath;
+    transform(countryIsoCode: IsoCode): string;
+    transform(countryIsoCode: IsoCode | undefined): string | null;
+    transform(countryIsoCode?: IsoCode | null): string | null;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TuiFlagPipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<TuiFlagPipe, "tuiFlag", true>;
+}
+export {};

package/pipes/flag/index.d.ts

@@ -0,0 +1 @@
+export * from './flag.pipe';

package/pipes/hide-selected/hide-selected.pipe.d.ts

@@ -3,6 +3,8 @@ import * as i0 from "@angular/core";
 export declare class TuiHideSelectedPipe implements PipeTransform {
     private readonly textfield;
     private readonly handlers;
+    private readonly items;
+    private readonly filtered;
     transform<T>(items: readonly T[] | null): readonly T[] | null;
     transform<T>(items: ReadonlyArray<readonly T[]> | null): ReadonlyArray<readonly T[]> | null;
     private filter2d;

package/pipes/index.d.ts

@@ -1,7 +1,9 @@
+export * from '@taiga-ui/kit/pipes/auto-color';
 export * from '@taiga-ui/kit/pipes/emails';
-export * from '@taiga-ui/kit/pipes/field-error';
 export * from '@taiga-ui/kit/pipes/filter-by-input';
+export * from '@taiga-ui/kit/pipes/flag';
 export * from '@taiga-ui/kit/pipes/hide-selected';
+export * from '@taiga-ui/kit/pipes/initials';
 export * from '@taiga-ui/kit/pipes/sort-countries';
 export * from '@taiga-ui/kit/pipes/stringify';
 export * from '@taiga-ui/kit/pipes/stringify-content';

package/pipes/initials/index.d.ts

@@ -0,0 +1 @@
+export * from './initials.pipe';

package/pipes/initials/initials.pipe.d.ts

@@ -0,0 +1,7 @@
+import { type PipeTransform } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class TuiInitialsPipe implements PipeTransform {
+    transform(text: string): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TuiInitialsPipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<TuiInitialsPipe, "tuiInitials", true>;
+}

package/pipes/sort-countries/sort-countries.pipe.d.ts

@@ -1,10 +1,11 @@
 import { type PipeTransform } from '@angular/core';
 import { type TuiCountryIsoCode } from '@taiga-ui/i18n/types';
-import { type Observable } from 'rxjs';
 import * as i0 from "@angular/core";
 export declare class TuiSortCountriesPipe implements PipeTransform {
-    private readonly countriesNames$;
-    transform(countries: readonly TuiCountryIsoCode[]): Observable<TuiCountryIsoCode[]>;
+    private readonly names;
+    private readonly countries;
+    private readonly result;
+    transform(countries: readonly TuiCountryIsoCode[]): TuiCountryIsoCode[];
     static ɵfac: i0.ɵɵFactoryDeclaration<TuiSortCountriesPipe, never>;
     static ɵpipe: i0.ɵɵPipeDeclaration<TuiSortCountriesPipe, "tuiSortCountries", true>;
 }

package/pipes/stringify-content/stringify-content.pipe.d.ts

@@ -1,9 +1,8 @@
 import { type PipeTransform } from '@angular/core';
-import { type TuiStringHandler } from '@taiga-ui/cdk/types';
-import { type TuiValueContentContext } from '@taiga-ui/core/types';
+import { type TuiContext, type TuiStringHandler } from '@taiga-ui/cdk/types';
 import * as i0 from "@angular/core";
 export declare class TuiStringifyContentPipe implements PipeTransform {
-    transform<T>(stringify: TuiStringHandler<T>): TuiStringHandler<TuiValueContentContext<T>>;
+    transform<T>(stringify: TuiStringHandler<T>): TuiStringHandler<TuiContext<T>>;
     static ɵfac: i0.ɵɵFactoryDeclaration<TuiStringifyContentPipe, never>;
     static ɵpipe: i0.ɵɵPipeDeclaration<TuiStringifyContentPipe, "tuiStringifyContent", true>;
 }

package/styles/components/avatar.less

@@ -0,0 +1,188 @@
+@import '@taiga-ui/core/styles/taiga-ui-local.less';
+
+/**
+ * @name Avatar
+ * @selector [tuiAvatar]
+ *
+ * @description
+ * An avatar component which can be used with icons, text or images
+ * and is applicable to static elements as well as buttons and links
+ *
+ * @attributes
+ * data-size — size (default: 'l') ('xs' | 's' | 'm' | 'l' | 'xl' | 'xxl')
+ * data-shape — shape (default: 'round') ('round' | 'square')
+ *
+ * @example
+ * <span tuiAvatar tuiIcons style="--t-icon-start: url('icon.svg')"></span>
+ * <button tuiAvatar>
+ *   <img src="path/to/image" alt="Avatar" />
+ * </button>
+ *
+ * @see-also
+ * Icons, Icon, Appearance
+ */
+[tuiAvatar] {
+    --t-size: var(--tui-height-l);
+    --t-radius: 0.75rem;
+    --t-corner-offset: calc((var(--t-radius) * 1.4142 - var(--t-radius)) * 1 / 1.4142);
+
+    position: relative;
+    display: inline-flex;
+    flex-shrink: 0;
+    inline-size: var(--t-size);
+    block-size: var(--t-size);
+    align-items: center;
+    justify-content: center;
+    white-space: nowrap;
+    border-radius: var(--t-radius);
+    border: none;
+    background: var(--tui-background-neutral-1);
+    color: var(--tui-text-secondary);
+    vertical-align: middle;
+    box-sizing: border-box;
+    padding: 0.25rem;
+    font: var(--tui-font-body-l);
+    font-weight: bold;
+    opacity: 0.999; // Kick in hardware rendering layer to avoid artifacts on the edges
+
+    &::before {
+        inline-size: auto;
+        block-size: auto;
+    }
+
+    &:not(._initials)::before {
+        position: absolute;
+        inset: 0;
+        font-size: calc(var(--t-size) * 0.6);
+    }
+
+    &[data-size='xs'] {
+        --t-size: var(--tui-height-xs);
+        --t-radius: 0.5rem;
+
+        font: var(--tui-font-ui-xs);
+        font-size: 0.5625rem;
+
+        &._initials::before {
+            font: var(--tui-font-ui-xs);
+            font-weight: bold;
+        }
+    }
+
+    &[data-size='s'] {
+        --t-size: var(--tui-height-s);
+        --t-radius: 0.5rem;
+
+        font: var(--tui-font-ui-xs);
+        font-weight: bold;
+
+        &._initials::before {
+            font: var(--tui-font-body-s);
+            font-weight: bold;
+        }
+    }
+
+    &[data-size='m'] {
+        --t-size: calc(var(--tui-height-m) - 0.25rem);
+        --t-radius: 0.75rem;
+
+        font: var(--tui-font-ui-m);
+        font-weight: bold;
+
+        &._initials::before {
+            font: var(--tui-font-body-m);
+            font-weight: bold;
+        }
+    }
+
+    &[data-size='xl'] {
+        --t-size: 5rem;
+        --t-radius: 0.75rem;
+
+        font: var(--tui-font-heading-h4);
+
+        &._initials::before {
+            font: var(--tui-font-heading-h3);
+        }
+    }
+
+    &[data-size='xxl'] {
+        --t-size: 6rem;
+        --t-radius: 1rem;
+
+        font: var(--tui-font-heading-h3);
+
+        &._initials::before {
+            font: var(--tui-font-heading-h3);
+        }
+    }
+
+    &[data-size='xxxl'] {
+        --t-size: 8rem;
+        --t-radius: 1.25rem;
+
+        font: var(--tui-font-heading-h3);
+
+        &._initials::before {
+            font: var(--tui-font-heading-h2);
+        }
+    }
+
+    &:not([data-shape='square']) {
+        --t-radius: calc(var(--t-size) / 2);
+    }
+
+    &._initials {
+        &::before {
+            content: attr(data-icon-start);
+            mask: none;
+            background: none;
+            font: var(--tui-font-heading-h6);
+        }
+    }
+
+    &._badge {
+        mask: radial-gradient(
+            circle at calc(100% - var(--t-corner-offset)) calc(100% - var(--t-corner-offset)),
+            black 0.23rem,
+            transparent 0.25rem,
+            transparent 0.375rem,
+            black 0.39rem
+        );
+        mask-clip: no-clip;
+
+        &::after {
+            content: '';
+            position: absolute;
+            top: calc(100% - var(--t-corner-offset));
+            left: calc(100% - var(--t-corner-offset));
+            display: block;
+            inline-size: 0.55rem;
+            block-size: 0.55rem;
+            border-radius: 100%;
+            background: var(--t-badge);
+            transform: translate3d(-50%, -50%, 0);
+        }
+    }
+
+    &._fallback {
+        img,
+        video {
+            display: none;
+        }
+    }
+
+    img,
+    video,
+    picture {
+        .fullsize();
+
+        object-fit: cover;
+        box-sizing: border-box;
+        border-radius: inherit;
+    }
+
+    &:has(img, video):not(._fallback) {
+        background: none;
+    }
+}

package/styles/components/badge.less

@@ -2,7 +2,7 @@
 
 /**
  * @name Badge
- * @selector tui-badge, [tuiBadge]
+ * @selector [tuiBadge]
  *
  * @description
  * A basic badge that can be used on it's own or on buttons/links
@@ -11,12 +11,11 @@
  * data-size — size (default: 'l') ('s' | 'm' | 'l' | 'xl')
  *
  * @example
- * <tui-badge>99+</tui-badge>
+ * <div[tuiBadge]>99+</div>
  *
  * @see-also
  * Icons, Appearance, Chip, Block
  */
-tui-badge,
 [tuiBadge] {
     --t-icon-size: 1rem;
     --t-padding: 0 0.5rem;
@@ -26,13 +25,14 @@ tui-badge,
     .button-base();
 
     border-radius: 6rem;
+    justify-content: center;
     background: #959595;
     color: var(--tui-background-base);
     padding: var(--t-padding);
     block-size: var(--t-size);
     min-inline-size: var(--t-size);
     inline-size: fit-content;
-    font: var(--tui-font-text-s);
+    font: var(--tui-font-body-s);
 
     &[tuiStatus]::before {
         inline-size: 0.375rem;
@@ -74,7 +74,7 @@ tui-badge,
         --t-icon-size: 0.625rem;
         --t-margin: -0.125rem;
 
-        font: var(--tui-font-text-xs);
+        font: var(--tui-font-body-xs);
 
         &[tuiStatus]::before {
             inline-size: 0.25rem;
@@ -95,7 +95,7 @@ tui-badge,
         --t-padding: 0 0.75rem;
         --t-size: var(--tui-height-s);
 
-        font: var(--tui-font-text-m);
+        font: var(--tui-font-body-m);
 
         &[tuiStatus]::before {
             inline-size: 0.5rem;

package/styles/components/block.less

@@ -14,7 +14,7 @@
  * <label tuiBlock>
  *   Click me
  *   <input tuiBlock />
- * </tui-badge>
+ * </label>
  *
  * @see-also
  * Icons, Appearance, Link, Button
@@ -33,20 +33,20 @@
     box-sizing: border-box;
     cursor: pointer;
     overflow: hidden;
-    font: var(--tui-font-text-m);
+    font: var(--tui-font-body-m);
     padding: var(--tui-padding-l);
     isolation: isolate;
 
     &[data-size='s'] {
         gap: 0.5rem;
-        font: var(--tui-font-text-ui-s);
+        font: var(--tui-font-ui-s);
         padding: 0.5rem;
 
         --t-height: var(--tui-height-s);
         --t-radius: var(--tui-radius-m);
 
         [tuiSubtitle] {
-            font: var(--tui-font-text-ui-xs);
+            font: var(--tui-font-ui-xs);
         }
 
         [tuiTooltip] {
@@ -56,7 +56,7 @@
 
     &[data-size='m'] {
         gap: 0.625rem;
-        font: var(--tui-font-text-ui-m);
+        font: var(--tui-font-ui-m);
         padding: var(--tui-padding-m);
 
         --t-height: var(--tui-height-m);