diff --git a/projects/demo/src/modules/app/app.routes.ts b/projects/demo/src/modules/app/app.routes.ts
index 446059c073893..6c97cdcc913c5 100644
--- a/projects/demo/src/modules/app/app.routes.ts
+++ b/projects/demo/src/modules/app/app.routes.ts
@@ -361,6 +361,15 @@ export const ROUTES: Routes = [
title: 'ButtonClose',
},
},
+ {
+ path: 'experimental/button-group-card',
+ loadChildren: async () =>
+ (await import('../experimental/button-group-card/button-group-card.module'))
+ .ExampleTuiButtonGroupCardModule,
+ data: {
+ title: 'ButtonGroupCard',
+ },
+ },
{
path: 'experimental/cell',
loadChildren: async () =>
diff --git a/projects/demo/src/modules/app/pages.ts b/projects/demo/src/modules/app/pages.ts
index 0d6fd8f86cd97..aa17a1a31905b 100644
--- a/projects/demo/src/modules/app/pages.ts
+++ b/projects/demo/src/modules/app/pages.ts
@@ -916,6 +916,12 @@ export const pages: TuiDocPages = [
keywords: 'кнопка, button, close, закрыть',
route: '/experimental/button-close',
},
+ {
+ section: 'Experimental',
+ title: 'ButtonGroupCard',
+ keywords: 'кнопка, button, group, card, группа',
+ route: '/experimental/button-group-card',
+ },
],
},
{
diff --git a/projects/demo/src/modules/experimental/button-group-card/button-group-card.component.ts b/projects/demo/src/modules/experimental/button-group-card/button-group-card.component.ts
new file mode 100644
index 0000000000000..ec01ce7f3db10
--- /dev/null
+++ b/projects/demo/src/modules/experimental/button-group-card/button-group-card.component.ts
@@ -0,0 +1,30 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDocExample, TuiRawLoaderContent} from '@taiga-ui/addon-doc';
+
+@Component({
+ selector: 'example-button-group-card',
+ templateUrl: './button-group-card.template.html',
+ changeDetection,
+})
+export class ExampleTuiButtonGroupCardComponent {
+ readonly exampleModule: TuiRawLoaderContent = import(
+ './examples/import/import-module.md?raw'
+ );
+
+ readonly exampleHtml: TuiRawLoaderContent = import(
+ './examples/import/insert-template.md?raw'
+ );
+
+ readonly example1: TuiDocExample = {
+ HTML: import('./examples/1/index.html?raw'),
+ };
+
+ readonly example2: TuiDocExample = {
+ HTML: import('./examples/2/index.html?raw'),
+ };
+
+ readonly example3: TuiDocExample = {
+ HTML: import('./examples/3/index.html?raw'),
+ };
+}
diff --git a/projects/demo/src/modules/experimental/button-group-card/button-group-card.module.ts b/projects/demo/src/modules/experimental/button-group-card/button-group-card.module.ts
new file mode 100644
index 0000000000000..ab8476388e1e7
--- /dev/null
+++ b/projects/demo/src/modules/experimental/button-group-card/button-group-card.module.ts
@@ -0,0 +1,39 @@
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {tuiGetDocModules} from '@taiga-ui/addon-doc';
+import {TuiNotificationModule} from '@taiga-ui/core';
+import {
+ TuiBadgedContentModule,
+ TuiButtonGroupCardModule,
+ TuiButtonModule,
+ TuiButtonVerticalModule,
+ TuiCellModule,
+ TuiSurfaceModule,
+} from '@taiga-ui/experimental';
+
+import {ExampleTuiButtonGroupCardComponent} from './button-group-card.component';
+import {TuiButtonGroupCardExample1} from './examples/1';
+import {TuiButtonGroupCardExample2} from './examples/2';
+import {TuiButtonGroupCardExample3} from './examples/3';
+
+@NgModule({
+ imports: [
+ CommonModule,
+ TuiNotificationModule,
+ TuiButtonModule,
+ tuiGetDocModules(ExampleTuiButtonGroupCardComponent),
+ TuiButtonVerticalModule,
+ TuiSurfaceModule,
+ TuiCellModule,
+ TuiButtonGroupCardModule,
+ TuiBadgedContentModule,
+ ],
+ declarations: [
+ ExampleTuiButtonGroupCardComponent,
+ TuiButtonGroupCardExample1,
+ TuiButtonGroupCardExample2,
+ TuiButtonGroupCardExample3,
+ ],
+ exports: [ExampleTuiButtonGroupCardComponent],
+})
+export class ExampleTuiButtonGroupCardModule {}
diff --git a/projects/demo/src/modules/experimental/button-group-card/button-group-card.template.html b/projects/demo/src/modules/experimental/button-group-card/button-group-card.template.html
new file mode 100644
index 0000000000000..b41b541abbd5c
--- /dev/null
+++ b/projects/demo/src/modules/experimental/button-group-card/button-group-card.template.html
@@ -0,0 +1,59 @@
+
+
+
+ This code is
+ experimental
+ and is a subject to change. Expect final solution to be shipped in the next major version
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ -
+
Import module:
+
+
+
+
+ -
+
Add to the template:
+
+
+
+
+
+
diff --git a/projects/demo/src/modules/experimental/button-group-card/examples/1/index.html b/projects/demo/src/modules/experimental/button-group-card/examples/1/index.html
new file mode 100644
index 0000000000000..34ed263a82c5d
--- /dev/null
+++ b/projects/demo/src/modules/experimental/button-group-card/examples/1/index.html
@@ -0,0 +1,70 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/projects/demo/src/modules/experimental/button-group-card/examples/1/index.less b/projects/demo/src/modules/experimental/button-group-card/examples/1/index.less
new file mode 100644
index 0000000000000..23d25a3bb0a19
--- /dev/null
+++ b/projects/demo/src/modules/experimental/button-group-card/examples/1/index.less
@@ -0,0 +1,5 @@
+:host {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+}
diff --git a/projects/demo/src/modules/experimental/button-group-card/examples/1/index.ts b/projects/demo/src/modules/experimental/button-group-card/examples/1/index.ts
new file mode 100644
index 0000000000000..620e6c7b48c94
--- /dev/null
+++ b/projects/demo/src/modules/experimental/button-group-card/examples/1/index.ts
@@ -0,0 +1,12 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+
+@Component({
+ selector: 'tui-button-group-card-example-1',
+ templateUrl: './index.html',
+ styleUrls: ['./index.less'],
+ encapsulation,
+ changeDetection,
+})
+export class TuiButtonGroupCardExample1 {}
diff --git a/projects/demo/src/modules/experimental/button-group-card/examples/2/index.html b/projects/demo/src/modules/experimental/button-group-card/examples/2/index.html
new file mode 100644
index 0000000000000..40d43152f7584
--- /dev/null
+++ b/projects/demo/src/modules/experimental/button-group-card/examples/2/index.html
@@ -0,0 +1,70 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/projects/demo/src/modules/experimental/button-group-card/examples/2/index.less b/projects/demo/src/modules/experimental/button-group-card/examples/2/index.less
new file mode 100644
index 0000000000000..23d25a3bb0a19
--- /dev/null
+++ b/projects/demo/src/modules/experimental/button-group-card/examples/2/index.less
@@ -0,0 +1,5 @@
+:host {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+}
diff --git a/projects/demo/src/modules/experimental/button-group-card/examples/2/index.ts b/projects/demo/src/modules/experimental/button-group-card/examples/2/index.ts
new file mode 100644
index 0000000000000..577d4ef56f254
--- /dev/null
+++ b/projects/demo/src/modules/experimental/button-group-card/examples/2/index.ts
@@ -0,0 +1,12 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+
+@Component({
+ selector: 'tui-button-group-card-example-2',
+ templateUrl: './index.html',
+ styleUrls: ['./index.less'],
+ encapsulation,
+ changeDetection,
+})
+export class TuiButtonGroupCardExample2 {}
diff --git a/projects/demo/src/modules/experimental/button-group-card/examples/3/index.html b/projects/demo/src/modules/experimental/button-group-card/examples/3/index.html
new file mode 100644
index 0000000000000..45efaa7e46da6
--- /dev/null
+++ b/projects/demo/src/modules/experimental/button-group-card/examples/3/index.html
@@ -0,0 +1,70 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/projects/demo/src/modules/experimental/button-group-card/examples/3/index.less b/projects/demo/src/modules/experimental/button-group-card/examples/3/index.less
new file mode 100644
index 0000000000000..23d25a3bb0a19
--- /dev/null
+++ b/projects/demo/src/modules/experimental/button-group-card/examples/3/index.less
@@ -0,0 +1,5 @@
+:host {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+}
diff --git a/projects/demo/src/modules/experimental/button-group-card/examples/3/index.ts b/projects/demo/src/modules/experimental/button-group-card/examples/3/index.ts
new file mode 100644
index 0000000000000..67292085bb211
--- /dev/null
+++ b/projects/demo/src/modules/experimental/button-group-card/examples/3/index.ts
@@ -0,0 +1,12 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+
+@Component({
+ selector: 'tui-button-group-card-example-3',
+ templateUrl: './index.html',
+ styleUrls: ['./index.less'],
+ encapsulation,
+ changeDetection,
+})
+export class TuiButtonGroupCardExample3 {}
diff --git a/projects/demo/src/modules/experimental/button-group-card/examples/import/import-module.md b/projects/demo/src/modules/experimental/button-group-card/examples/import/import-module.md
new file mode 100644
index 0000000000000..edef2496b6b05
--- /dev/null
+++ b/projects/demo/src/modules/experimental/button-group-card/examples/import/import-module.md
@@ -0,0 +1,14 @@
+```ts
+import {NgModule} from '@angular/core';
+import {TuiButtonGroupCardModule} from '@taiga-ui/experimental';
+// ...
+
+@NgModule({
+ imports: [
+ // ...
+ TuiButtonModule,
+ TuiButtonGroupCardModule,
+ ],
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/experimental/button-group-card/examples/import/insert-template.md b/projects/demo/src/modules/experimental/button-group-card/examples/import/insert-template.md
new file mode 100644
index 0000000000000..49a025688b7ef
--- /dev/null
+++ b/projects/demo/src/modules/experimental/button-group-card/examples/import/insert-template.md
@@ -0,0 +1,15 @@
+```html
+
+
+
+```
diff --git a/projects/demo/used-icons.ts b/projects/demo/used-icons.ts
index 99021f8b75940..8ccf0a2845c84 100644
--- a/projects/demo/used-icons.ts
+++ b/projects/demo/used-icons.ts
@@ -101,6 +101,7 @@ export const TUI_USED_ICONS = [
'tuiIconLock',
'tuiIconUsers',
'tuiIconClock',
+ 'tuiIconArrowRightCircleLarge',
'tuiIconPlusSquareLarge',
'tuiIconTarget',
'tuiIconGooglePay',
diff --git a/projects/experimental/directives/button-group-card/button-group-card.component.ts b/projects/experimental/directives/button-group-card/button-group-card.component.ts
new file mode 100644
index 0000000000000..e1a1cdd71516e
--- /dev/null
+++ b/projects/experimental/directives/button-group-card/button-group-card.component.ts
@@ -0,0 +1,12 @@
+import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core';
+
+@Component({
+ template: '',
+ styleUrls: ['./button-group-card.style.less'],
+ encapsulation: ViewEncapsulation.None,
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ host: {
+ class: 'tui-button-group-card-styles',
+ },
+})
+export class TuiButtonGroupCardComponent {}
diff --git a/projects/experimental/directives/button-group-card/button-group-card.directive.ts b/projects/experimental/directives/button-group-card/button-group-card.directive.ts
new file mode 100644
index 0000000000000..d5fa7e3f081b4
--- /dev/null
+++ b/projects/experimental/directives/button-group-card/button-group-card.directive.ts
@@ -0,0 +1,15 @@
+import {Directive, Inject} from '@angular/core';
+import {TuiDirectiveStylesService} from '@taiga-ui/cdk';
+
+import {TuiButtonGroupCardComponent} from './button-group-card.component';
+
+@Directive({
+ selector: '[tuiButtonGroupCard]',
+})
+export class TuiButtonGroupCardDirective {
+ constructor(
+ @Inject(TuiDirectiveStylesService) directiveStyles: TuiDirectiveStylesService,
+ ) {
+ directiveStyles.addComponent(TuiButtonGroupCardComponent);
+ }
+}
diff --git a/projects/experimental/directives/button-group-card/button-group-card.module.ts b/projects/experimental/directives/button-group-card/button-group-card.module.ts
new file mode 100644
index 0000000000000..3990a94329df1
--- /dev/null
+++ b/projects/experimental/directives/button-group-card/button-group-card.module.ts
@@ -0,0 +1,10 @@
+import {NgModule} from '@angular/core';
+
+import {TuiButtonGroupCardComponent} from './button-group-card.component';
+import {TuiButtonGroupCardDirective} from './button-group-card.directive';
+
+@NgModule({
+ declarations: [TuiButtonGroupCardDirective, TuiButtonGroupCardComponent],
+ exports: [TuiButtonGroupCardDirective],
+})
+export class TuiButtonGroupCardModule {}
diff --git a/projects/experimental/directives/button-group-card/button-group-card.style.less b/projects/experimental/directives/button-group-card/button-group-card.style.less
new file mode 100644
index 0000000000000..4ee56e63444f4
--- /dev/null
+++ b/projects/experimental/directives/button-group-card/button-group-card.style.less
@@ -0,0 +1,52 @@
+@import '@taiga-ui/core/styles/taiga-ui-local';
+
+[tuiButtonGroupCard] {
+ display: flex;
+ min-width: 21.4375rem;
+ border-radius: 1.5rem;
+
+ &[data-surface='dark'] > [tuiButton][tuiAppearance] {
+ color: #fff;
+
+ &:hover {
+ background: rgba(256, 256, 256, 0.13);
+ }
+ }
+
+ > [tuiButton][tuiButtonVertical] {
+ flex-grow: 1;
+ flex-basis: 0;
+ border-radius: 0;
+ padding: 1.125rem 0.25rem;
+ min-width: 6.625rem;
+ gap: 0.5rem;
+ }
+
+ > [tuiButton][tuiButtonVertical]:only-child {
+ flex-direction: row;
+ border-radius: 0.75rem;
+ padding: 1rem 0;
+ }
+
+ > [tuiButton]:first-child {
+ border-top-left-radius: 1.5rem;
+ border-bottom-left-radius: 1.5rem;
+ }
+
+ > [tuiButton]:last-child {
+ border-top-right-radius: 1.5rem;
+ border-bottom-right-radius: 1.5rem;
+ }
+
+ &:has([tuiButton]:only-child) {
+ border-radius: 0.75rem;
+ }
+
+ &:nth-child(2) > [tuiButton][tuiButtonVertical]:first-child {
+ padding-left: 1.75rem;
+ }
+
+ &:nth-child(2) > [tuiButton][tuiButtonVertical]:last-child {
+ padding-right: 1.75rem;
+ }
+}
diff --git a/projects/experimental/directives/button-group-card/index.ts b/projects/experimental/directives/button-group-card/index.ts
new file mode 100644
index 0000000000000..36137fb1b3fa3
--- /dev/null
+++ b/projects/experimental/directives/button-group-card/index.ts
@@ -0,0 +1,3 @@
+export * from './button-group-card.component';
+export * from './button-group-card.directive';
+export * from './button-group-card.module';
diff --git a/projects/experimental/directives/button-group-card/ng-package.json b/projects/experimental/directives/button-group-card/ng-package.json
new file mode 100644
index 0000000000000..bebf62dcb5e51
--- /dev/null
+++ b/projects/experimental/directives/button-group-card/ng-package.json
@@ -0,0 +1,5 @@
+{
+ "lib": {
+ "entryFile": "index.ts"
+ }
+}
diff --git a/projects/experimental/directives/index.ts b/projects/experimental/directives/index.ts
index 78a556d9b6c25..26bbc7c95376a 100644
--- a/projects/experimental/directives/index.ts
+++ b/projects/experimental/directives/index.ts
@@ -1,5 +1,6 @@
export * from '@taiga-ui/experimental/directives/appearance';
export * from '@taiga-ui/experimental/directives/button-close';
+export * from '@taiga-ui/experimental/directives/button-group-card';
export * from '@taiga-ui/experimental/directives/button-vertical';
export * from '@taiga-ui/experimental/directives/card';
export * from '@taiga-ui/experimental/directives/cell';
diff --git a/projects/experimental/directives/surface/surface.style.less b/projects/experimental/directives/surface/surface.style.less
index 76392701964a2..1b2c2e248a810 100644
--- a/projects/experimental/directives/surface/surface.style.less
+++ b/projects/experimental/directives/surface/surface.style.less
@@ -164,3 +164,20 @@ input[tuiSurfaceLayer] {
}
}
}
+
+[tuiSurface][data-surface='dark'] {
+ background: linear-gradient(90deg, rgba(125, 140, 160, 1) 0%, rgba(100, 115, 130, 1) 31%);
+
+ button&,
+ a& {
+ &:active {
+ transform: scale(0.95);
+ }
+
+ @media (hover: hover) and (pointer: fine) {
+ &:hover {
+ transform: scale(1.15);
+ }
+ }
+ }
+}