@taiga-ui/core 5.0.0-rc.2 → 5.0.0-rc.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@taiga-ui/core",
-  "version": "5.0.0-rc.2",
+  "version": "5.0.0-rc.4",
   "description": "Core library for creating Angular components and applications using Taiga UI",
   "keywords": [
     "angular",
@@ -17,8 +17,26 @@
     "url": "https://github.com/taiga-family/taiga-ui"
   },
   "license": "Apache-2.0",
+  "peerDependencies": {
+    "@angular/common": ">=19.0.0",
+    "@angular/core": ">=19.0.0",
+    "@angular/forms": ">=19.0.0",
+    "@angular/platform-browser": ">=19.0.0",
+    "@angular/router": ">=19.0.0",
+    "@ng-web-apis/common": "^5.1.0",
+    "@ng-web-apis/mutation-observer": "^5.1.0",
+    "@ng-web-apis/platform": "^5.1.0",
+    "@taiga-ui/cdk": "^5.0.0-rc.4",
+    "@taiga-ui/event-plugins": "^5.0.0",
+    "@taiga-ui/i18n": "^5.0.0-rc.4",
+    "@taiga-ui/polymorpheus": "^5.0.0",
+    "@taiga-ui/styles": "^5.0.0-rc.4",
+    "rxjs": ">=7.0.0"
+  },
+  "schematics": "./schematics/collection.json",
+  "module": "fesm2022/taiga-ui-core.mjs",
+  "typings": "index.d.ts",
   "exports": {
-    "./styles/*": "./styles/*",
     "./package.json": {
       "default": "./package.json"
     },
@@ -74,6 +92,10 @@
       "types": "./components/cell/index.d.ts",
       "default": "./fesm2022/taiga-ui-core-components-cell.mjs"
     },
+    "./components/checkbox": {
+      "types": "./components/checkbox/index.d.ts",
+      "default": "./fesm2022/taiga-ui-core-components-checkbox.mjs"
+    },
     "./components/data-list": {
       "types": "./components/data-list/index.d.ts",
       "default": "./fesm2022/taiga-ui-core-components-data-list.mjs"
@@ -110,6 +132,10 @@
       "types": "./components/notification/index.d.ts",
       "default": "./fesm2022/taiga-ui-core-components-notification.mjs"
     },
+    "./components/radio": {
+      "types": "./components/radio/index.d.ts",
+      "default": "./fesm2022/taiga-ui-core-components-radio.mjs"
+    },
     "./components/root": {
       "types": "./components/root/index.d.ts",
       "default": "./fesm2022/taiga-ui-core-components-root.mjs"
@@ -118,6 +144,10 @@
       "types": "./components/scrollbar/index.d.ts",
       "default": "./fesm2022/taiga-ui-core-components-scrollbar.mjs"
     },
+    "./components/slider": {
+      "types": "./components/slider/index.d.ts",
+      "default": "./fesm2022/taiga-ui-core-components-slider.mjs"
+    },
     "./components/spin-button": {
       "types": "./components/spin-button/index.d.ts",
       "default": "./fesm2022/taiga-ui-core-components-spin-button.mjs"
@@ -199,24 +229,6 @@
       "default": "./fesm2022/taiga-ui-core-utils-miscellaneous.mjs"
     }
   },
-  "peerDependencies": {
-    "@angular/common": ">=19.0.0",
-    "@angular/core": ">=19.0.0",
-    "@angular/forms": ">=19.0.0",
-    "@angular/platform-browser": ">=19.0.0",
-    "@angular/router": ">=19.0.0",
-    "@ng-web-apis/common": "^5.0.3",
-    "@ng-web-apis/mutation-observer": "^5.0.3",
-    "@ng-web-apis/platform": "^5.0.3",
-    "@taiga-ui/cdk": "^5.0.0-rc.2",
-    "@taiga-ui/event-plugins": "^5.0.0",
-    "@taiga-ui/i18n": "^5.0.0-rc.2",
-    "@taiga-ui/polymorpheus": "^5.0.0",
-    "rxjs": ">=7.0.0"
-  },
-  "schematics": "./schematics/collection.json",
-  "module": "fesm2022/taiga-ui-core.mjs",
-  "typings": "index.d.ts",
   "sideEffects": false,
   "dependencies": {
     "tslib": ">=2.8.1"

package/portals/dropdown/dropdown-a11y.directive.d.ts

@@ -0,0 +1,10 @@
+import * as i0 from "@angular/core";
+export declare class TuiDropdownA11y {
+    private readonly el;
+    private readonly dropdown;
+    private readonly open;
+    readonly tuiDropdownRole: import("@angular/core").InputSignal<string>;
+    protected readonly sync: import("@angular/core").EffectRef;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TuiDropdownA11y, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TuiDropdownA11y, "[tuiDropdownA11y]", never, { "tuiDropdownRole": { "alias": "tuiDropdownRole"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/portals/dropdown/dropdown-close.directive.d.ts

@@ -5,10 +5,10 @@ export declare class TuiDropdownClose {
     private readonly open;
     private readonly obscured;
     private readonly activeZone;
-    protected readonly tuiDropdownClose: import("@angular/core").OutputRef<boolean | void | (KeyboardEvent & {
-        readonly currentTarget: Document;
-    }) | (FocusEvent & {
+    protected readonly tuiDropdownClose: import("@angular/core").OutputRef<boolean | void | (FocusEvent & {
         readonly currentTarget: HTMLElement;
+    }) | (KeyboardEvent & {
+        readonly currentTarget: Document;
     })>;
     static ɵfac: i0.ɵɵFactoryDeclaration<TuiDropdownClose, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<TuiDropdownClose, never, never, {}, { "tuiDropdownClose": "tuiDropdownClose"; }, never, never, true, never>;

package/portals/dropdown/dropdown-open.directive.d.ts

@@ -1,7 +1,8 @@
 import * as i0 from "@angular/core";
 import * as i1 from "@taiga-ui/cdk/directives/obscured";
-import * as i2 from "./dropdown-close.directive";
-import * as i3 from "@taiga-ui/cdk/directives/active-zone";
+import * as i2 from "./dropdown-a11y.directive";
+import * as i3 from "./dropdown-close.directive";
+import * as i4 from "@taiga-ui/cdk/directives/active-zone";
 export declare class TuiDropdownOpen {
     private readonly dropdownHost;
     private readonly directive;
@@ -25,5 +26,5 @@ export declare class TuiDropdownOpen {
     private drive;
     private focusDropdown;
     static ɵfac: i0.ɵɵFactoryDeclaration<TuiDropdownOpen, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<TuiDropdownOpen, "[tuiDropdown][tuiDropdownAuto],[tuiDropdown][tuiDropdownOpen],[tuiDropdown][tuiDropdownOpenChange]", never, { "enabled": { "alias": "tuiDropdownEnabled"; "required": false; "isSignal": true; }; "open": { "alias": "tuiDropdownOpen"; "required": false; "isSignal": true; }; }, { "open": "tuiDropdownOpenChange"; }, ["dropdownHost"], never, true, [{ directive: typeof i1.TuiObscured; inputs: {}; outputs: {}; }, { directive: typeof i2.TuiDropdownClose; inputs: {}; outputs: { "tuiDropdownClose": "tuiDropdownClose"; }; }, { directive: typeof i3.TuiActiveZone; inputs: { "tuiActiveZoneParent": "tuiActiveZoneParent"; }; outputs: { "tuiActiveZoneChange": "tuiActiveZoneChange"; }; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TuiDropdownOpen, "[tuiDropdown][tuiDropdownAuto],[tuiDropdown][tuiDropdownOpen],[tuiDropdown][tuiDropdownOpenChange]", never, { "enabled": { "alias": "tuiDropdownEnabled"; "required": false; "isSignal": true; }; "open": { "alias": "tuiDropdownOpen"; "required": false; "isSignal": true; }; }, { "open": "tuiDropdownOpenChange"; }, ["dropdownHost"], never, true, [{ directive: typeof i1.TuiObscured; inputs: {}; outputs: {}; }, { directive: typeof i2.TuiDropdownA11y; inputs: { "tuiDropdownRole": "tuiDropdownRole"; }; outputs: {}; }, { directive: typeof i3.TuiDropdownClose; inputs: {}; outputs: { "tuiDropdownClose": "tuiDropdownClose"; }; }, { directive: typeof i4.TuiActiveZone; inputs: { "tuiActiveZoneParent": "tuiActiveZoneParent"; }; outputs: { "tuiActiveZoneChange": "tuiActiveZoneChange"; }; }]>;
 }

package/portals/dropdown/dropdown-selection.directive.d.ts

@@ -37,6 +37,7 @@ export declare class TuiDropdownSelection extends TuiDriver implements TuiRectAc
      * Create an invisible DIV styled exactly like input/textarea element inside directive
      */
     private initGhost;
+    private isCaretVisible;
     static ɵfac: i0.ɵɵFactoryDeclaration<TuiDropdownSelection, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<TuiDropdownSelection, "[tuiDropdownSelection]", never, { "tuiDropdownSelection": { "alias": "tuiDropdownSelection"; "required": false; "isSignal": true; }; "tuiDropdownSelectionPosition": { "alias": "tuiDropdownSelectionPosition"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/portals/dropdown/dropdown.d.ts

@@ -1,6 +1,7 @@
 import { TuiDropdownComponent } from './dropdown.component';
 import { TuiDropdownDirective } from './dropdown.directive';
 import { TuiDropdownDriverDirective } from './dropdown.driver';
+import { TuiDropdownA11y } from './dropdown-a11y.directive';
 import { TuiDropdownContent } from './dropdown-content.directive';
 import { TuiDropdownContext } from './dropdown-context.directive';
 import { TuiDropdownHover } from './dropdown-hover.directive';
@@ -10,4 +11,4 @@ import { TuiDropdownOptionsDirective } from './dropdown-options.directive';
 import { TuiDropdownPosition } from './dropdown-position.directive';
 import { TuiDropdownPositionSided } from './dropdown-position-sided.directive';
 import { TuiDropdownSelection } from './dropdown-selection.directive';
-export declare const TuiDropdown: readonly [typeof TuiDropdownOptionsDirective, typeof TuiDropdownDriverDirective, typeof TuiDropdownDirective, typeof TuiDropdownComponent, typeof TuiDropdownOpen, typeof TuiDropdownManual, typeof TuiDropdownHover, typeof TuiDropdownContent, typeof TuiDropdownContext, typeof TuiDropdownPosition, typeof TuiDropdownPositionSided, typeof TuiDropdownSelection];
+export declare const TuiDropdown: readonly [typeof TuiDropdownOptionsDirective, typeof TuiDropdownDriverDirective, typeof TuiDropdownDirective, typeof TuiDropdownComponent, typeof TuiDropdownA11y, typeof TuiDropdownOpen, typeof TuiDropdownManual, typeof TuiDropdownHover, typeof TuiDropdownContent, typeof TuiDropdownContext, typeof TuiDropdownPosition, typeof TuiDropdownPositionSided, typeof TuiDropdownSelection];

package/portals/dropdown/dropdown.directive.d.ts

@@ -1,7 +1,7 @@
-import { type AfterViewChecked, type ComponentRef, type OnDestroy } from '@angular/core';
+import { type AfterViewChecked, type ComponentRef, type OnDestroy, TemplateRef } from '@angular/core';
 import { type TuiContext } from '@taiga-ui/cdk/types';
 import { type TuiRectAccessor, type TuiVehicle } from '@taiga-ui/core/classes';
-import { PolymorpheusComponent, type PolymorpheusContent } from '@taiga-ui/polymorpheus';
+import { PolymorpheusComponent, type PolymorpheusContent, PolymorpheusTemplate } from '@taiga-ui/polymorpheus';
 import * as i0 from "@angular/core";
 import * as i1 from "./dropdown.driver";
 import * as i2 from "./dropdown-position.directive";
@@ -12,17 +12,17 @@ export declare class TuiDropdownDirective implements AfterViewChecked, OnDestroy
     private readonly drivers;
     protected readonly sub: import("rxjs").Subscription;
     protected readonly autoClose: import("@angular/core").EffectRef;
+    readonly id: string;
     readonly ref: import("@angular/core").WritableSignal<ComponentRef<unknown> | null>;
     readonly el: HTMLElement;
     readonly type = "dropdown";
     readonly component: PolymorpheusComponent<any>;
-    readonly tuiDropdown: import("@angular/core").InputSignal<PolymorpheusContent<TuiContext<() => void>>>;
-    readonly content: import("@angular/core").Signal<PolymorpheusContent<TuiContext<() => void>>>;
+    readonly content: import("@angular/core").InputSignalWithTransform<string | number | PolymorpheusComponent<unknown> | import("@angular/platform-browser").SafeValue | import("@taiga-ui/polymorpheus").PolymorpheusHandler<TuiContext<() => void>> | PolymorpheusTemplate<"" | Partial<TuiContext<() => void>>> | TemplateRef<Partial<TuiContext<() => void>>> | null | undefined, PolymorpheusContent<TuiContext<() => void>>>;
     get position(): 'absolute' | 'fixed';
     ngAfterViewChecked(): void;
     ngOnDestroy(): void;
     getClientRect(): DOMRect;
     toggle(show: boolean): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<TuiDropdownDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<TuiDropdownDirective, "[tuiDropdown]:not(ng-container):not(ng-template)", ["tuiDropdown"], { "tuiDropdown": { "alias": "tuiDropdown"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.TuiDropdownDriverDirective; inputs: {}; outputs: {}; }, { directive: typeof i2.TuiDropdownPosition; inputs: {}; outputs: { "tuiDropdownDirectionChange": "tuiDropdownDirectionChange"; }; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TuiDropdownDirective, "[tuiDropdown]:not(ng-container):not(ng-template)", ["tuiDropdown"], { "content": { "alias": "tuiDropdown"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.TuiDropdownDriverDirective; inputs: {}; outputs: {}; }, { directive: typeof i2.TuiDropdownPosition; inputs: {}; outputs: { "tuiDropdownDirectionChange": "tuiDropdownDirectionChange"; }; }]>;
 }

package/portals/dropdown/index.d.ts

@@ -4,6 +4,7 @@ export * from './dropdown.component';
 export * from './dropdown.directive';
 export * from './dropdown.driver';
 export * from './dropdown.providers';
+export * from './dropdown-a11y.directive';
 export * from './dropdown-close.directive';
 export * from './dropdown-content.directive';
 export * from './dropdown-context.directive';

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

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

package/components/textfield/textfield-icon.d.ts

@@ -1,6 +0,0 @@
-import { type ProviderToken, type Signal } from '@angular/core';
-import { type TuiStringHandler } from '@taiga-ui/cdk/types';
-import { type TuiSizeL, type TuiSizeS } from '@taiga-ui/core/types';
-export declare function tuiTextfieldIcon(token: ProviderToken<{
-    icon: TuiStringHandler<TuiSizeL | TuiSizeS>;
-}>): Signal<string>;

package/styles/components/appearance.less

@@ -1,51 +0,0 @@
-@import '@taiga-ui/core/styles/taiga-ui-local.less';
-
-/**
- * @name Appearance
- * @selector [tuiAppearance]
- *
- * @description
- * Base directive to apply different styles to interactive elements
- *
- * @attributes
- * data-appearance — current appearance
- * data-state — manual interactive state override ('active' | 'disabled' | 'hover')
- * data-focus — manual :focus-visible state override
- * data-mode — arbitrary manual mode like 'checked', 'invalid' or 'checked invalid'
- *
- * @example
- * <button tuiAppearance data-appearance='primary'></button>
- *
- * @see-also
- * Button
- */
-[tuiAppearance]:where(*&) {
-    .transition(all);
-
-    position: relative;
-    appearance: none;
-    outline: 0.125rem solid transparent;
-    outline-offset: -0.125rem;
-    transition-property: color, background-color, opacity, box-shadow, border-color, border-radius, filter;
-
-    &::before,
-    &::after {
-        transition-property: none;
-        transition-duration: inherit;
-        transition-timing-function: ease-in-out;
-    }
-
-    .appearance-focus({
-        outline-color: var(--tui-border-focus);
-    });
-
-    .appearance-disabled({
-        cursor: initial;
-        opacity: var(--tui-disabled-opacity);
-
-        &::before,
-        &::after {
-            cursor: initial;
-        }
-    });
-}

package/styles/components/button.less

@@ -1,134 +0,0 @@
-@import '@taiga-ui/core/styles/taiga-ui-local.less';
-
-/**
- * @name Button
- * @selector [tuiButton], [tuiIconButton]
- *
- * @description
- * Plain button design, applicable to both links and buttons
- *
- * @attributes
- * data-size — size (default: 'l') ('xs' | 's' | 'm' | 'l')
- *
- * @example
- * <button tuiButton>Click me</button>
- *
- * @see-also
- * Icons, Appearance, Link
- */
-[tuiButton]:where(*&),
-[tuiIconButton]:where(*&) {
-    --t-size: var(--tui-height-l);
-    --t-radius: var(--tui-radius-l);
-    --t-gap: 0.25rem;
-    --t-padding: 0 1.25rem;
-    --t-margin: -0.25rem;
-
-    .button-base();
-
-    block-size: var(--t-size);
-    justify-content: center;
-    border-radius: var(--t-radius);
-    padding: var(--t-padding);
-    user-select: none;
-    cursor: pointer;
-    font: var(--tui-font-body-m);
-    font-weight: bold;
-
-    > .t-loader {
-        .center-all();
-
-        .t-text {
-            position: absolute;
-        }
-    }
-
-    &[data-size='xs'] {
-        --t-size: var(--tui-height-xs);
-        --t-radius: var(--tui-radius-xs);
-        --t-gap: 0.125rem;
-        --t-padding: 0 0.375rem;
-        --t-margin: -0.125rem;
-
-        font: var(--tui-font-body-s);
-
-        tui-icon,
-        &::before,
-        &::after {
-            font-size: 1rem;
-        }
-    }
-
-    &[data-size='s'] {
-        --t-size: var(--tui-height-s);
-        --t-radius: var(--tui-radius-s);
-        --t-gap: 0.125rem;
-        --t-padding: 0 0.625rem;
-        --t-margin: -0.125rem;
-
-        font: var(--tui-font-body-s);
-
-        tui-icon,
-        &:not([tuiIconButton][data-appearance='icon'], [tuiIconButton][data-appearance='link'])::before,
-        &:not([tuiIconButton][data-appearance='icon'], [tuiIconButton][data-appearance='link'])::after {
-            font-size: 1rem;
-        }
-    }
-
-    &[data-size='m'] {
-        --t-size: var(--tui-height-m);
-        --t-radius: var(--tui-radius-m);
-        --t-gap: 0.125rem;
-        --t-padding: 0 1rem;
-        --t-margin: -0.375rem;
-
-        font: var(--tui-font-body-m);
-        font-weight: bold;
-    }
-
-    &._loading {
-        --tui-disabled-opacity: 1;
-
-        -webkit-text-fill-color: transparent;
-
-        > *,
-        &::before,
-        &::after {
-            opacity: 0;
-        }
-
-        > .t-loader {
-            opacity: 1;
-        }
-    }
-
-    &[tuiButtonVertical] {
-        // StackBlitz changes "0rem" to "0" breaking calc
-        --t-margin: ~'0rem' !important;
-        --t-line-height: 1rem;
-
-        flex-direction: column;
-        flex-shrink: 1;
-        block-size: auto;
-        padding: 0.75rem;
-        gap: 0.375rem;
-        min-inline-size: 5rem;
-        white-space: pre-line;
-        font: var(--tui-font-ui-s);
-
-        & > * {
-            max-block-size: calc(var(--t-line-height) * 2);
-        }
-    }
-}
-
-[tuiIconButton]:where(*&) {
-    gap: 0;
-    inline-size: var(--t-size);
-    font-size: 0 !important;
-    padding: 0;
-
-    &&[data-icon-start]::after {
-        display: none;
-    }
-}

package/styles/components/group.less

@@ -1,172 +0,0 @@
-/**
- * @name Group
- * @selector [tuiGroup]
- *
- * @description
- * A directive to combine children into rounded flex group
- *
- * @attributes
- * data-size — size (default: 'l') ('s' | 'm' | 'l')
- * data-orientation — orientation (default: 'horizontal') ('horizontal' | 'vertical')
- *
- * @example
- * <div tuiGroup>
- *   <button tuiButton>Click me</button>
- *   <button tuiButton>Click me</button>
- *   <button tuiButton>Click me</button>
- * </div>
- *
- * @see-also
- * Button, Block, Textfield
- */
-[tuiGroup]:where(*&) {
-    position: relative;
-    display: flex;
-    transform: translate3d(0, 0, 0);
-
-    --t-group-radius: var(--tui-radius-l);
-    --t-group-margin: -1px;
-    --t-group-mask: linear-gradient(
-        to right,
-        rgba(0, 0, 0, 0.5) 1px,
-        #000 2px,
-        #000 calc(100% - 2px),
-        rgba(0, 0, 0, 0.5)
-    );
-    --t-group-mask-end: linear-gradient(to right, rgba(0, 0, 0, 0.5) 1px, #000 2px);
-    --t-group-mask-start: linear-gradient(to right, #000 calc(100% - 2px), rgba(0, 0, 0, 0.5) calc(100% - 1px));
-
-    & > * {
-        z-index: 1;
-        flex: 1 1 0;
-        min-inline-size: 0;
-        mask: var(--t-group-mask);
-        mask-clip: no-clip;
-
-        &:disabled,
-        &._disabled {
-            z-index: 0;
-        }
-
-        &:invalid:not([data-mode]),
-        &[data-mode~='invalid'] {
-            z-index: 2;
-
-            --t-group-mask: none;
-        }
-
-        &:has(:invalid:not([data-mode])),
-        &:has([data-mode~='invalid']) {
-            z-index: 2;
-
-            --t-group-mask: none;
-        }
-
-        &:has(:focus-visible) {
-            z-index: 3;
-
-            --t-group-mask: none;
-        }
-
-        &:has([data-focus='true']) {
-            z-index: 3;
-
-            --t-group-mask: none;
-        }
-
-        &:checked:not([data-mode]),
-        &[data-mode~='checked'] {
-            z-index: 4;
-
-            --t-group-mask: none;
-        }
-
-        &:has([tuiBlock]:checked) {
-            z-index: 4;
-
-            --t-group-mask: none;
-        }
-
-        &:not(:last-child) {
-            margin-inline-end: var(--t-group-margin);
-        }
-
-        &:nth-child(n) {
-            border-radius: 0;
-        }
-
-        &:first-child {
-            border-radius: var(--t-group-radius) 0 0 var(--t-group-radius);
-            mask-image: var(--t-group-mask-start);
-        }
-
-        &:last-child {
-            border-radius: 0 var(--t-group-radius) var(--t-group-radius) 0;
-            mask-image: var(--t-group-mask-end);
-        }
-
-        &:only-child {
-            border-radius: var(--t-group-radius);
-            mask: none;
-        }
-    }
-
-    [dir='rtl'] &:not([data-orientation='vertical']) > * {
-        &:first-child {
-            border-radius: 0 var(--t-group-radius) var(--t-group-radius) 0;
-            mask-image: var(--t-group-mask-end);
-        }
-
-        &:last-child {
-            border-radius: var(--t-group-radius) 0 0 var(--t-group-radius);
-            mask-image: var(--t-group-mask-start);
-        }
-
-        &:only-child {
-            border-radius: var(--t-group-radius);
-            mask: none;
-        }
-    }
-
-    &[data-size='s'],
-    &[data-size='m'] {
-        --t-group-radius: var(--tui-radius-m);
-    }
-
-    &[data-orientation='vertical'] {
-        display: inline-flex;
-        flex-direction: column;
-
-        --t-group-mask: linear-gradient(
-            to bottom,
-            rgba(0, 0, 0, 0.5) 1px,
-            #000 2px,
-            #000 calc(100% - 2px),
-            rgba(0, 0, 0, 0.5)
-        );
-        --t-group-mask-start: linear-gradient(to bottom, #000 calc(100% - 2px), rgba(0, 0, 0, 0.5) calc(100% - 1px));
-        --t-group-mask-end: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 1px, #000 2px);
-
-        & > * {
-            min-block-size: auto;
-            flex: 0 0 auto;
-
-            &:not(:last-child) {
-                margin-inline-end: 0;
-                margin-block-end: var(--t-group-margin);
-            }
-
-            &:first-child {
-                border-radius: var(--t-group-radius) var(--t-group-radius) 0 0;
-            }
-
-            &:last-child {
-                border-radius: 0 0 var(--t-group-radius) var(--t-group-radius);
-            }
-
-            &:only-child {
-                border-radius: var(--t-group-radius);
-            }
-        }
-    }
-}

package/styles/components/icon.less

@@ -1,83 +0,0 @@
-@import '@taiga-ui/core/styles/taiga-ui-local.less';
-
-/**
- * @name Icon
- * @selector tui-icon
- *
- * @description
- * Container for displaying icons colored with CSS (color/background)
- *
- * @vars
- * --t-icon — depending on the data-icon, it can serve as either a mask (`svg`),
-  a background (`img`), or content (`font`) for the icon.
- * --t-icon-bg — mask for the background
- *
- * @example
- * <tui-icon tuiIcons style="--t-icon: url('icon.svg')"></tui-icon>
- *
- * @see-also
- * Icons
- */
-tui-icon:where(*&) {
-    --tui-icon-size: 1em;
-
-    position: relative;
-    display: inline-flex;
-    inline-size: 1em;
-    block-size: 1em;
-    font-size: 1.5rem;
-    flex-shrink: 0;
-    border: 0 solid transparent;
-    vertical-align: middle;
-    box-sizing: border-box;
-    mask: var(--t-icon-bg) no-repeat center / calc(100% + 10 * var(--tui-stroke-width, 0.125rem)) 100%;
-    zoom: ~'calc(100% * (min(max(var(--tui-font-offset) - 10px, 0px), 1px) / 0.8px))';
-
-    @media @tui-mouse {
-        &[data-appearance='icon']:hover {
-            color: var(--tui-text-secondary);
-        }
-    }
-
-    &[data-icon-end] {
-        &::before {
-            mask-image:
-                var(--t-icon-start),
-                radial-gradient(circle at bottom 0.1em right 0.1em, transparent calc(0.4em - 0.5px), #000 0.4em);
-            mask-composite: intersect;
-        }
-
-        &[data-icon-start='img'],
-        &[data-icon-start='font'] {
-            &::before {
-                mask: radial-gradient(circle at bottom 0.1em right 0.1em, transparent calc(0.4em - 0.5px), #000 0.4em);
-            }
-        }
-
-        &::after {
-            .fullsize();
-        }
-    }
-
-    &[data-icon-start] {
-        &::before {
-            .fullsize();
-        }
-
-        &::after {
-            transform: translate(36%, 36%);
-
-            --tui-icon-size: 0.5715em;
-        }
-    }
-
-    &[data-icon-start='img']::before,
-    &[data-icon-end='img']::after {
-        zoom: 1;
-    }
-
-    &[data-icon-start='font']::before,
-    &[data-icon-end='font']::after {
-        zoom: 0.667;
-    }
-}