chore: remove empty less files

package.json

@@ -117,10 +117,6 @@
         "extends": [
             "@taiga-ui/stylelint-config"
         ],
-        "rules": {
-            "no-empty-source": null,
-            "selector-type-no-unknown": null
-        },
         "overrides": [
             {
                 "files": [

projects/demo/src/modules/components/avatar/index.html

@@ -7,9 +7,9 @@
         <tui-doc-example
             *ngFor="let example of examples; let index = index"
             [component]="index + 1 | tuiComponent"
-            [content]="index + 1 | tuiExample"
-            [heading]="example"
-            [id]="example | tuiKebab"
+            [content]="index + 1 | tuiExample: example.content"
+            [heading]="example.name"
+            [id]="example.name | tuiKebab"
         />
     </ng-template>
 

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

@@ -16,14 +16,13 @@ export default class Page {
     private readonly sanitizer = inject(DomSanitizer);
 
     protected readonly examples = [
-        'Content types',
-        'Colors',
-        'Sizes',
-        'Stacking',
-        'Options with DI',
-        'Labeled',
-        'Outline',
-    ];
+        {name: 'Content types', content: 'html,ts,less'},
+        {name: 'Sizes', content: 'html,ts,less'},
+        {name: 'Stacking', content: 'html,ts,less'},
+        {name: 'Options with DI', content: 'html,ts'},
+        {name: 'Labeled', content: 'html,ts'},
+        {name: 'Outline', content: 'html,ts,less'},
+    ] as const;
 
     protected readonly sizes: ReadonlyArray<TuiSizeXS | TuiSizeXXL> = [
         'xs',

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

@@ -7,7 +7,6 @@ import {TuiBlockStatus} from '@taiga-ui/layout';
     standalone: true,
     imports: [TuiBlockStatus],
     templateUrl: './index.html',
-    styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })

projects/demo/src/modules/components/block-status/examples/2/index.ts

@@ -12,7 +12,6 @@ import {map} from 'rxjs';
     standalone: true,
     imports: [AsyncPipe, NgIf, TuiAsideItemDirective, TuiBlockStatus, TuiButton],
     templateUrl: './index.html',
-    styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })

projects/demo/src/modules/components/block-status/index.html

@@ -9,10 +9,10 @@
         <tui-doc-example
             *ngFor="let example of examples; let index = index"
             [component]="index + 1 | tuiComponent"
-            [content]="index + 1 | tuiExample"
+            [content]="index + 1 | tuiExample: example.content"
             [fullsize]="true"
-            [heading]="example"
-            [id]="example | tuiKebab"
+            [heading]="example.name"
+            [id]="example.name | tuiKebab"
         />
     </ng-template>
 

projects/demo/src/modules/components/block-status/index.ts

@@ -14,10 +14,10 @@ export default class Example {
     protected card = false;
 
     protected readonly examples = [
-        'Basic',
-        'With actions',
-        'Cards',
-        'Customization',
-        'Mobile',
-    ];
+        {name: 'Basic', content: 'html,ts'},
+        {name: 'With actions', content: 'html,ts'},
+        {name: 'Cards', content: 'html,ts,less'},
+        {name: 'Customization', content: 'html,ts,less'},
+        {name: 'Mobile', content: 'html,ts,less'},
+    ] as const;
 }

projects/demo/src/modules/components/breadcrumbs/index.html

@@ -9,7 +9,7 @@
         <tui-doc-example
             *ngFor="let example of examples; let index = index"
             [component]="index + 1 | tuiComponent"
-            [content]="index + 1 | tuiExample"
+            [content]="index + 1 | tuiExample: 'html,ts'"
             [description]="example.description"
             [heading]="example.name"
             [id]="example.name | tuiKebab"

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

@@ -41,7 +41,7 @@ export default class Example {
     protected size: TuiSizeL = this.sizeVariants[0]!;
 
     protected readonly examples = [
-        {name: 'Basic'},
+        {name: 'Basic', description: ''},
         {name: 'More button', description: 'Plus using DI options'},
     ];
 }

projects/demo/src/modules/components/calendar/examples/1/index.ts

@@ -9,7 +9,6 @@ import {TuiCalendar} from '@taiga-ui/core';
     standalone: true,
     imports: [NgIf, TuiCalendar],
     templateUrl: './index.html',
-    styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })

projects/demo/src/modules/components/calendar/examples/2/index.html

@@ -1,31 +1,30 @@
-<div class="wrapper">
-    <tui-calendar
-        [maxViewedMonth]="firstMonth"
-        [month]="firstMonth"
-        [showAdjacent]="false"
-        [value]="value"
-        [(hoveredItem)]="hoveredItem"
-        (dayClick)="onDayClick($event)"
-        (monthChange)="onMonthChangeFirst($event)"
-    />
-    <tui-calendar
-        [maxViewedMonth]="middleMonth"
-        [minViewedMonth]="middleMonth"
-        [month]="middleMonth"
-        [showAdjacent]="false"
-        [value]="value"
-        [(hoveredItem)]="hoveredItem"
-        (dayClick)="onDayClick($event)"
-        (monthChange)="onMonthChangeMiddle($event)"
-    />
-    <tui-calendar
-        [minViewedMonth]="lastMonth"
-        [month]="lastMonth"
-        [showAdjacent]="false"
-        [value]="value"
-        [(hoveredItem)]="hoveredItem"
-        (dayClick)="onDayClick($event)"
-        (monthChange)="onMonthChangeLast($event)"
-    />
-</div>
+<tui-calendar
+    [maxViewedMonth]="firstMonth"
+    [month]="firstMonth"
+    [showAdjacent]="false"
+    [value]="value"
+    [(hoveredItem)]="hoveredItem"
+    (dayClick)="onDayClick($event)"
+    (monthChange)="onMonthChangeFirst($event)"
+/>
+<tui-calendar
+    [maxViewedMonth]="middleMonth"
+    [minViewedMonth]="middleMonth"
+    [month]="middleMonth"
+    [showAdjacent]="false"
+    [value]="value"
+    [(hoveredItem)]="hoveredItem"
+    (dayClick)="onDayClick($event)"
+    (monthChange)="onMonthChangeMiddle($event)"
+/>
+<tui-calendar
+    [minViewedMonth]="lastMonth"
+    [month]="lastMonth"
+    [showAdjacent]="false"
+    [value]="value"
+    [(hoveredItem)]="hoveredItem"
+    (dayClick)="onDayClick($event)"
+    (monthChange)="onMonthChangeLast($event)"
+/>
+
 <div *ngIf="value">Chosen dates: {{ value }}</div>

projects/demo/src/modules/components/calendar/examples/2/index.less

@@ -1,3 +1,8 @@
-.wrapper {
+:host {
     display: flex;
+    flex-wrap: wrap;
+}
+
+div {
+    flex-basis: 100%;
 }

projects/demo/src/modules/components/calendar/examples/3/index.html

@@ -1,34 +1,33 @@
-<div class="wrapper">
-    <tui-calendar
-        [markerHandler]="markerHandler"
-        [maxViewedMonth]="firstMonth"
-        [month]="firstMonth"
-        [showAdjacent]="false"
-        [value]="value"
-        [(hoveredItem)]="hoveredItem"
-        (dayClick)="onDayClick($event)"
-        (monthChange)="onMonthChangeFirst($event)"
-    />
-    <tui-calendar
-        [markerHandler]="markerHandler"
-        [maxViewedMonth]="middleMonth"
-        [minViewedMonth]="middleMonth"
-        [month]="middleMonth"
-        [showAdjacent]="false"
-        [value]="value"
-        [(hoveredItem)]="hoveredItem"
-        (dayClick)="onDayClick($event)"
-        (monthChange)="onMonthChangeMiddle($event)"
-    />
-    <tui-calendar
-        [markerHandler]="markerHandler"
-        [minViewedMonth]="lastMonth"
-        [month]="lastMonth"
-        [showAdjacent]="false"
-        [value]="value"
-        [(hoveredItem)]="hoveredItem"
-        (dayClick)="onDayClick($event)"
-        (monthChange)="onMonthChangeLast($event)"
-    />
-</div>
+<tui-calendar
+    [markerHandler]="markerHandler"
+    [maxViewedMonth]="firstMonth"
+    [month]="firstMonth"
+    [showAdjacent]="false"
+    [value]="value"
+    [(hoveredItem)]="hoveredItem"
+    (dayClick)="onDayClick($event)"
+    (monthChange)="onMonthChangeFirst($event)"
+/>
+<tui-calendar
+    [markerHandler]="markerHandler"
+    [maxViewedMonth]="middleMonth"
+    [minViewedMonth]="middleMonth"
+    [month]="middleMonth"
+    [showAdjacent]="false"
+    [value]="value"
+    [(hoveredItem)]="hoveredItem"
+    (dayClick)="onDayClick($event)"
+    (monthChange)="onMonthChangeMiddle($event)"
+/>
+<tui-calendar
+    [markerHandler]="markerHandler"
+    [minViewedMonth]="lastMonth"
+    [month]="lastMonth"
+    [showAdjacent]="false"
+    [value]="value"
+    [(hoveredItem)]="hoveredItem"
+    (dayClick)="onDayClick($event)"
+    (monthChange)="onMonthChangeLast($event)"
+/>
+
 <div *ngIf="value">Chosen dates: {{ value }}</div>

projects/demo/src/modules/components/calendar/examples/3/index.less

@@ -1,3 +1,8 @@
-.wrapper {
+:host {
     display: flex;
+    flex-wrap: wrap;
+}
+
+div {
+    flex-basis: 100%;
 }

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

@@ -8,7 +8,6 @@ import {TUI_FIRST_DAY_OF_WEEK, TuiCalendar} from '@taiga-ui/core';
     standalone: true,
     imports: [TuiCalendar],
     templateUrl: './index.html',
-    styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
     providers: [

projects/demo/src/modules/components/calendar/examples/6/index.ts

@@ -8,7 +8,6 @@ import {TuiCalendar} from '@taiga-ui/core';
     standalone: true,
     imports: [TuiCalendar],
     templateUrl: './index.html',
-    styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })

projects/demo/src/modules/components/calendar/examples/7/index.ts

@@ -9,7 +9,6 @@ import {TuiCalendar} from '@taiga-ui/core';
     standalone: true,
     imports: [NgIf, TuiCalendar],
     templateUrl: './index.html',
-    styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })

projects/demo/src/modules/components/calendar/index.html

@@ -24,10 +24,11 @@
         <tui-doc-example
             *ngFor="let example of examples; let index = index"
             [component]="index + 1 | tuiComponent"
-            [content]="index + 1 | tuiExample"
+            [content]="index + 1 | tuiExample: example.content"
             [description]="description"
-            [heading]="example"
-            [id]="example | tuiKebab"
+            [fullsize]="example.fullsize"
+            [heading]="example.name"
+            [id]="example.name | tuiKebab"
         >
             <ng-template
                 #description

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

@@ -29,14 +29,14 @@ const ONE_DOT: [string] = ['var(--tui-status-positive)'];
 })
 export default class Example {
     protected readonly examples = [
-        'Basic',
-        'Range',
-        'With markers',
-        'Localization',
-        'Color customization',
-        'Select multiple dates',
-        'Open in year view',
-    ];
+        {name: 'Basic', content: 'html,ts', fullsize: false},
+        {name: 'Range', content: 'html,ts,less', fullsize: true},
+        {name: 'With markers', content: 'html,ts,less', fullsize: true},
+        {name: 'Localization', content: 'html,ts', fullsize: false},
+        {name: 'Color customization', content: 'html,ts,less', fullsize: false},
+        {name: 'Select multiple dates', content: 'html,ts', fullsize: false},
+        {name: 'Open in year view', content: 'html,ts', fullsize: false},
+    ] as const;
 
     protected showAdjacent = true;
 

projects/demo/src/modules/components/card-large/index.html

@@ -8,10 +8,10 @@
         <tui-doc-example
             *ngFor="let example of examples; let index = index"
             [component]="index + 1 | tuiComponent"
-            [content]="index + 1 | tuiExample: 'html,less'"
+            [content]="index + 1 | tuiExample: example.content"
             [fullsize]="index === 5 || index === 8"
-            [heading]="example"
-            [id]="example | tuiKebab"
+            [heading]="example.name"
+            [id]="example.name | tuiKebab"
         />
     </ng-template>
 

projects/demo/src/modules/components/card-large/index.ts

@@ -10,17 +10,17 @@ import {TuiDemo} from '@demo/utils';
 })
 export default class Example {
     protected readonly examples = [
-        'Basic',
-        'Avatar',
-        'Single item',
-        'Cards List',
-        'Cell List',
-        'Cell List (2 columns)',
-        'Cell List (actions)',
-        'Footer alignment',
-        'Map',
-        'Image',
-        'Image-dark',
-        'Paddings and radiuses',
-    ];
+        {name: 'Basic', content: 'html,less'},
+        {name: 'Avatar', content: 'html'},
+        {name: 'Single item', content: 'html,less'},
+        {name: 'Cards List', content: 'html,less'},
+        {name: 'Cell List', content: 'html'},
+        {name: 'Cell List (2 columns)', content: 'html,less'},
+        {name: 'Cell List (actions)', content: 'html,less'},
+        {name: 'Footer alignment', content: 'html,less'},
+        {name: 'Map', content: 'html'},
+        {name: 'Image', content: 'html,less'},
+        {name: 'Image-dark', content: 'html,less'},
+        {name: "Paddings and radius's", content: 'html'},
+    ] as const;
 }

projects/demo/src/modules/components/icon/index.html

@@ -9,10 +9,10 @@
         <tui-doc-example
             *ngFor="let example of examples; let index = index"
             [component]="index + 1 | tuiComponent"
-            [content]="index + 1 | tuiExample"
+            [content]="index + 1 | tuiExample: example.content"
             [description]="descriptions[index]"
-            [heading]="example"
-            [id]="example | tuiKebab"
+            [heading]="example.name"
+            [id]="example.name | tuiKebab"
         />
     </ng-template>