feat(experimental): Accordion add new component

package.json

@@ -97,6 +97,14 @@
                     "@angular-eslint/prefer-standalone": "off"
                 }
             },
+            {
+                "files": [
+                    "**/accordion/**/*.html"
+                ],
+                "rules": {
+                    "@angular-eslint/template/button-has-type": "off"
+                }
+            },
             {
                 "files": [
                     "**/*.ts"

projects/core/styles/components/appearance.less

@@ -20,12 +20,13 @@
  * Button
  */
 [tuiAppearance] {
-    .transition(~'color, background, opacity, box-shadow, border');
+    .transition(all);
 
     position: relative;
     appearance: none;
     outline: 0.125rem solid transparent;
     outline-offset: -0.125rem;
+    transition-property: color, background, opacity, box-shadow, border, border-radius;
 
     &.tui-appearance-initializing {
         transition: none !important;

projects/core/styles/components/group.less

@@ -62,7 +62,7 @@
             --t-group-mask: none;
         }
 
-        &:focus-within {
+        &:has(:focus-visible) {
             z-index: 3;
 
             --t-group-mask: none;

projects/demo/src/modules/app/app.routes.ts

@@ -94,6 +94,11 @@ export const ROUTES: Routes = [
         title: 'Accordion',
         loadComponent: async () => import('../components/accordion'),
     }),
+    route({
+        path: DemoRoute.AccordionOld,
+        title: 'Accordion (Deprecated)',
+        loadComponent: async () => import('../components/accordion-'),
+    }),
     route({
         path: DemoRoute.Avatar,
         title: 'Avatar',

projects/demo/src/modules/app/demo-routes.ts

@@ -15,6 +15,7 @@ export const DemoRoute = {
     Portals: '/portals',
     Viewport: '/viewport',
     Accordion: '/components/accordion',
+    AccordionOld: '/components/accordion-deprecated',
     Avatar: '/components/avatar',
     Badge: '/components/badge',
     BadgedContent: '/components/badged-content',

projects/demo/src/modules/app/pages.ts

@@ -159,6 +159,12 @@ export const pages: DocRoutePages = [
         keywords: 'open, аккордеон, expand, раскрывашка, spoiler, cut',
         route: DemoRoute.Accordion,
     },
+    {
+        section: 'Components',
+        title: 'Accordion (Deprecated)',
+        keywords: 'open, аккордеон, expand, раскрывашка, spoiler, cut',
+        route: DemoRoute.AccordionOld,
+    },
     {
         section: 'Components',
         title: 'Alert',

projects/demo/src/modules/components/accordion-/examples/1/index.html

@@ -0,0 +1,22 @@
+<tui-accordion class="container">
+    <tui-accordion-item>
+        Taiga UI cdk
+        <ng-template tuiAccordionItemContent>
+            Development kit consisting of the low level tools and abstractions used to develop Taiga UI Angular entities
+        </ng-template>
+    </tui-accordion-item>
+    <tui-accordion-item>
+        Taiga UI core
+        <ng-template tuiAccordionItemContent>
+            <div #content>
+                Basic elements needed to develop components, directives and more using Taiga UI design system
+            </div>
+        </ng-template>
+    </tui-accordion-item>
+    <tui-accordion-item>
+        Taiga UI kit
+        <ng-template tuiAccordionItemContent>
+            The main set of components used to build Taiga UI based Angular applications
+        </ng-template>
+    </tui-accordion-item>
+</tui-accordion>

projects/demo/src/modules/components/accordion-/examples/1/index.ts

@@ -0,0 +1,14 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiAccordion} from '@taiga-ui/kit';
+
+@Component({
+    standalone: true,
+    imports: [TuiAccordion],
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    encapsulation,
+    changeDetection,
+})
+export default class Example {}

projects/demo/src/modules/components/accordion-/examples/2/index.html

@@ -0,0 +1,209 @@
+<tui-accordion
+    class="container"
+    [rounded]="false"
+>
+    <tui-accordion-item
+        borders="top-bottom"
+        [showArrow]="false"
+    >
+        <div class="operation-header">
+            <div class="operation-date">
+                4
+                <div class="operation-month">May</div>
+            </div>
+            <div class="operation-pic">
+                <tui-icon
+                    icon="assets/icons/rubles.svg"
+                    class="operation-icon"
+                />
+            </div>
+            <div class="operation-title">Get your money</div>
+            <div class="operation-info">
+                <span class="operation-amount">{{ 23000 | tuiAmount: 'RUB' | async }}</span>
+                <div class="operation-status">Waiting for approve</div>
+            </div>
+        </div>
+        <ng-template tuiAccordionItemContent>
+            <h3 class="form-title">Payment form</h3>
+            <form
+                class="operation-form"
+                [formGroup]="testForm"
+            >
+                <tui-input
+                    formControlName="name"
+                    class="input"
+                >
+                    Your name
+                    <input
+                        placeholder="Roman Sedov"
+                        tuiTextfieldLegacy
+                    />
+                </tui-input>
+                <tui-select
+                    formControlName="accounts"
+                    class="input"
+                >
+                    Choose an account
+                    <tui-data-list-wrapper
+                        *tuiDataList
+                        [items]="accounts"
+                    />
+                </tui-select>
+                <div class="buttons">
+                    <button
+                        size="l"
+                        tuiButton
+                        type="submit"
+                        class="tui-space_right-2"
+                    >
+                        Send
+                    </button>
+                    <button
+                        appearance="flat"
+                        size="l"
+                        tuiButton
+                        type="button"
+                    >
+                        Cancel
+                    </button>
+                </div>
+            </form>
+        </ng-template>
+    </tui-accordion-item>
+    <tui-accordion-item
+        borders="top-bottom"
+        [showArrow]="false"
+    >
+        <div class="operation-header">
+            <div class="operation-date">
+                5
+                <div class="operation-month">May</div>
+            </div>
+            <div class="operation-pic">
+                <tui-icon
+                    icon="assets/icons/rubles.svg"
+                    class="operation-icon"
+                />
+            </div>
+            <div class="operation-title">Get your money back</div>
+            <div class="operation-info">
+                <span class="operation-amount">{{ 23000 | tuiAmount: 'RUB' | async }}</span>
+                <div class="operation-status operation-status_success">Approved</div>
+            </div>
+        </div>
+        <ng-template tuiAccordionItemContent>
+            <h3 class="form-title">Payment form</h3>
+            <form
+                class="operation-form"
+                [formGroup]="testForm"
+            >
+                <tui-input
+                    formControlName="name"
+                    class="input"
+                >
+                    Your name
+                    <input
+                        placeholder="Roman Sedov"
+                        tuiTextfieldLegacy
+                    />
+                </tui-input>
+                <tui-select
+                    formControlName="accounts"
+                    class="input"
+                >
+                    Choose an account
+                    <tui-data-list-wrapper
+                        *tuiDataList
+                        [items]="accounts"
+                    />
+                </tui-select>
+                <div class="buttons">
+                    <button
+                        size="l"
+                        tuiButton
+                        type="submit"
+                        class="tui-space_right-2"
+                    >
+                        Send
+                    </button>
+                    <button
+                        appearance="flat"
+                        size="l"
+                        tuiButton
+                        type="button"
+                    >
+                        Cancel
+                    </button>
+                </div>
+            </form>
+        </ng-template>
+    </tui-accordion-item>
+    <tui-accordion-item
+        borders="top-bottom"
+        [showArrow]="false"
+    >
+        <div class="operation-header">
+            <div class="operation-date">
+                6
+                <div class="operation-month">May</div>
+            </div>
+            <div class="operation-pic">
+                <tui-icon
+                    icon="assets/icons/rubles.svg"
+                    class="operation-icon"
+                />
+            </div>
+            <div class="operation-title">Get your neighbor's money</div>
+            <div class="operation-info">
+                <span class="operation-amount">{{ 23000 | tuiAmount: 'RUB' | async }}</span>
+                <div class="operation-status operation-status_error">Declined</div>
+            </div>
+        </div>
+        <ng-template tuiAccordionItemContent>
+            <h3 class="form-title">Payment form</h3>
+            <form
+                class="operation-form"
+                [formGroup]="testForm"
+            >
+                <tui-input
+                    formControlName="name"
+                    class="input"
+                >
+                    Your name
+                    <input
+                        placeholder="Roman Sedov"
+                        tuiTextfieldLegacy
+                    />
+                </tui-input>
+                <tui-select
+                    formControlName="accounts"
+                    class="input"
+                >
+                    Choose an account
+                    <tui-data-list-wrapper
+                        *tuiDataList
+                        [items]="accounts"
+                    />
+                </tui-select>
+                <div class="buttons">
+                    <button
+                        size="l"
+                        tuiButton
+                        type="submit"
+                        class="tui-space_right-2"
+                    >
+                        Send
+                    </button>
+                    <button
+                        appearance="flat"
+                        size="l"
+                        tuiButton
+                        type="button"
+                    >
+                        Cancel
+                    </button>
+                </div>
+            </form>
+        </ng-template>
+    </tui-accordion-item>
+</tui-accordion>

projects/demo/src/modules/components/accordion-/examples/2/index.less

@@ -0,0 +1,74 @@
+@import '@taiga-ui/core/styles/taiga-ui-local';
+
+.container {
+    max-inline-size: 46.875rem;
+}
+
+.operation-header {
+    display: flex;
+    font: var(--tui-font-text-l);
+    align-items: center;
+}
+
+.operation-date {
+    font: var(--tui-font-text-xl);
+    text-align: center;
+}
+
+.operation-date,
+.operation-info {
+    color: var(--tui-text-secondary);
+}
+
+.operation-month,
+.operation-status {
+    font: var(--tui-font-text-s);
+}
+
+.operation-pic {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    margin: 0 1.5rem;
+    background: var(--tui-background-neutral-1);
+    border-radius: 100%;
+    inline-size: 3rem;
+    block-size: 3rem;
+    color: var(--tui-text-tertiary);
+}
+
+.operation-title {
+    .text-overflow();
+
+    margin-right: 1.5rem;
+    flex-grow: 1;
+}
+
+.operation-info {
+    text-align: end;
+}
+
+.operation-status {
+    &_success {
+        color: var(--tui-text-positive);
+    }
+
+    &_error {
+        color: var(--tui-text-negative);
+    }
+}
+
+.form-title {
+    font: var(--tui-font-heading-6);
+    margin: 0 0 1.25rem;
+}
+
+.input {
+    max-inline-size: 28.75rem;
+    margin-bottom: 1.25rem;
+}
+
+.buttons {
+    display: flex;
+}