feat(kit): add tuiConnected directive for Stepper and Cell

projects/demo/src/modules/components/cell/examples/8/index.html

@@ -0,0 +1,77 @@
+<div tuiConnected>
+    <label tuiCell>
+        <tui-badged-content>
+            <tui-icon
+                appearance="error"
+                icon="@tui.arrow-down-left"
+                size="s"
+                tuiBadge
+                tuiSlot="top"
+            />
+            <tui-avatar src="@tui.phone" />
+        </tui-badged-content>
+        <div
+            tuiTitle
+            [style.color]="'var(--tui-text-negative)'"
+        >
+            Allow incoming
+            <div tuiSubtitle>Why would you?</div>
+        </div>
+        <input
+            tuiSwitch
+            type="checkbox"
+            [(ngModel)]="incoming"
+        />
+    </label>
+    <label tuiCell>
+        <tui-badged-content tuiAccessories>
+            <tui-icon
+                appearance="success"
+                icon="@tui.arrow-up-right"
+                size="s"
+                tuiBadge
+                tuiSlot="top"
+            />
+            <tui-avatar src="@tui.phone" />
+        </tui-badged-content>
+        <div tuiTitle>Allow outgoing unusual call that can change your life in an unusual way</div>
+        <div tuiAccessories>
+            <input
+                tuiSwitch
+                type="checkbox"
+                [(ngModel)]="outgoing"
+            />
+        </div>
+    </label>
+    <label tuiCell>
+        <tui-badged-content>
+            <tui-icon
+                appearance="error"
+                icon="@tui.arrow-down-left"
+                size="s"
+                tuiBadge
+                tuiSlot="top"
+            />
+            <tui-avatar src="@tui.phone" />
+        </tui-badged-content>
+        <div
+            tuiTitle
+            [style.color]="'var(--tui-text-negative)'"
+        >
+            Allow incoming
+            <div tuiSubtitle>Why would you?</div>
+        </div>
+        <input
+            tuiSwitch
+            type="checkbox"
+            [(ngModel)]="incoming"
+        />
+    </label>
+</div>
+
+<tui-notification>
+    <div>
+        Can be attached as host directive:
+        <code>hostDirectives: [TuiConnected]</code>
+    </div>
+</tui-notification>

projects/demo/src/modules/components/cell/examples/8/index.less

@@ -0,0 +1,6 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    max-width: 20rem;
+    gap: 1rem;
+}

projects/demo/src/modules/components/cell/examples/8/index.ts

@@ -0,0 +1,66 @@
+import {NgFor} from '@angular/common';
+import {Component} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiIcon, TuiNotification, TuiSurface, TuiTitle} from '@taiga-ui/core';
+import {
+    TuiAvatar,
+    TuiBadge,
+    TuiBadgedContent,
+    TuiConnected,
+    TuiDataListWrapper,
+    TuiSwitch,
+} from '@taiga-ui/kit';
+import {TuiCardLarge, TuiCell} from '@taiga-ui/layout';
+import {TuiSelectModule, TuiTextfieldControllerModule} from '@taiga-ui/legacy';
+
+@Component({
+    standalone: true,
+    imports: [
+        TuiNotification,
+        TuiCell,
+        TuiAvatar,
+        TuiSelectModule,
+        TuiDataListWrapper,
+        TuiTextfieldControllerModule,
+        TuiCardLarge,
+        TuiSurface,
+        NgFor,
+        FormsModule,
+        TuiBadgedContent,
+        TuiIcon,
+        TuiConnected,
+        TuiBadge,
+        TuiSwitch,
+        TuiTitle,
+    ],
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    encapsulation,
+    changeDetection,
+})
+export default class Example {
+    protected readonly items = [
+        {
+            icon: '@tui.eye',
+            title: 'Show more',
+            subtitle: 'Ctrl + Shift + M',
+        },
+        {
+            icon: '@tui.mail',
+            title: 'Send message',
+            subtitle: 'Keep it short',
+        },
+        {
+            icon: '@tui.lock',
+            title: 'Access',
+            subtitle: 'Block your account',
+        },
+    ];
+
+    protected value = this.items[0];
+
+    protected incoming = false;
+    protected outgoing = true;
+}

projects/demo/src/modules/components/cell/index.ts

@@ -22,5 +22,6 @@ export default class Example {
         'Long content',
         'Actions',
         'Combinations',
+        'Connected',
     ];
 }

projects/demo/src/modules/components/stepper/examples/4/index.html

@@ -0,0 +1,12 @@
+<tui-stepper
+    orientation="vertical"
+    tuiConnected
+    [activeItemIndex]="1"
+>
+    <button
+        *ngFor="let step of steps"
+        tuiStep
+    >
+        {{ step }}
+    </button>
+</tui-stepper>

projects/demo/src/modules/components/stepper/examples/4/index.ts

@@ -0,0 +1,21 @@
+import {NgForOf} from '@angular/common';
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiConnected, TuiStepper} from '@taiga-ui/kit';
+
+@Component({
+    standalone: true,
+    imports: [TuiStepper, TuiConnected, NgForOf],
+    templateUrl: './index.html',
+    encapsulation,
+    changeDetection,
+})
+export default class Example {
+    protected readonly steps = [
+        'Start Up',
+        'Cash In',
+        'Sell out this huge amount that you have been saving up for many years of hard work',
+        'Bro Down',
+    ];
+}

projects/demo/src/modules/components/stepper/index.ts

@@ -13,7 +13,12 @@ import {TuiStepper} from '@taiga-ui/kit';
 export default class Page {
     protected activeItemIndex = 0;
 
-    protected readonly examples = ['Basic', 'Vertical', 'Vertical autoscroll'];
+    protected readonly examples = [
+        'Basic',
+        'Vertical',
+        'Vertical autoscroll',
+        'Vertical connected',
+    ];
 
     protected readonly orientationVariants: readonly TuiOrientation[] = [
         'horizontal',

projects/kit/directives/connected/connected.directive.ts

@@ -0,0 +1,30 @@
+import {
+    ChangeDetectionStrategy,
+    Component,
+    Directive,
+    ViewEncapsulation,
+} from '@angular/core';
+import {tuiWithStyles} from '@taiga-ui/cdk/utils/miscellaneous';
+
+@Component({
+    standalone: true,
+    template: '',
+    styleUrls: ['./connected.style.less'],
+    encapsulation: ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    host: {
+        class: 'tui-connected-styles',
+    },
+})
+class TuiConnectedStyles {}
+
+@Directive({
+    standalone: true,
+    selector: '[tuiConnected]',
+    host: {
+        tuiConnected: '',
+    },
+})
+export class TuiConnected {
+    protected readonly nothing = tuiWithStyles(TuiConnectedStyles);
+}

projects/kit/directives/connected/connected.style.less

@@ -0,0 +1,26 @@
+@import '@taiga-ui/core/styles/taiga-ui-local';
+
+[tuiConnected] {
+    --t-image-size: 2.5rem;
+    --t-connected-height: calc(100% - var(--t-image-size) - 0.5rem);
+
+    [tuiCell],
+    [tuiStep] {
+        &:not(:last-of-type)::after {
+            content: '';
+            position: absolute;
+            top: calc(var(--t-image-size) + 0.25rem);
+            left: calc(var(--t-image-size) / 2);
+            height: var(--t-connected-height);
+            width: 1px;
+            background-color: var(--tui-border-normal);
+            background-clip: content-box;
+            padding: inherit;
+        }
+    }
+
+    [tuiStep] {
+        --t-image-size: 2rem;
+        --t-connected-height: calc(100% - var(--t-image-size) + 0.75rem);
+    }
+}

projects/kit/directives/connected/index.ts

@@ -0,0 +1 @@
+export * from './connected.directive';

projects/kit/directives/connected/ng-package.json

@@ -0,0 +1,5 @@
+{
+    "lib": {
+        "entryFile": "index.ts"
+    }
+}

projects/kit/directives/index.ts

@@ -1,6 +1,7 @@
 export * from '@taiga-ui/kit/directives/button-close';
 export * from '@taiga-ui/kit/directives/button-group';
 export * from '@taiga-ui/kit/directives/chevron';
+export * from '@taiga-ui/kit/directives/connected';
 export * from '@taiga-ui/kit/directives/data-list-dropdown-manager';
 export * from '@taiga-ui/kit/directives/fade';
 export * from '@taiga-ui/kit/directives/fluid-typography';

projects/layout/components/cell/cell.directive.ts

@@ -26,7 +26,7 @@ class TuiCellStyles {}
     standalone: true,
     selector: '[tuiCell]:not(ng-template)',
     providers: [
-        tuiAvatarOptionsProvider({size: 's'}),
+        tuiAvatarOptionsProvider({size: 'm'}),
         tuiButtonOptionsProvider({size: 's'}),
     ],
     host: {