chore(demo): Appearance add all options

projects/core/directives/appearance/appearance.directive.ts

@@ -10,7 +10,7 @@ import {
 import {tuiWithStyles} from '@taiga-ui/cdk/utils/miscellaneous';
 import type {TuiInteractiveState} from '@taiga-ui/core/types';
 
-import {TUI_APPEARANCE_OPTIONS} from './appearance.options';
+import {TUI_APPEARANCE_OPTIONS, type TuiAppearanceOptions} from './appearance.options';
 
 @Component({
     standalone: true,
@@ -43,7 +43,7 @@ export class TuiAppearance {
     public readonly focus = signal<boolean | null>(null);
 
     @Input()
-    public set tuiAppearance(appearance: string) {
+    public set tuiAppearance(appearance: TuiAppearanceOptions['appearance']) {
         this.appearance.set(appearance);
     }
 

projects/core/directives/appearance/appearance.options.ts

@@ -1,8 +1,31 @@
 import type {ExistingProvider, ProviderToken} from '@angular/core';
 import {tuiCreateToken, tuiProvide} from '@taiga-ui/cdk/utils/miscellaneous';
 
+/**
+ * Bundled appearances for autocomplete purposes, not exported on purpose
+ */
+type Appearance =
+    | 'accent'
+    | 'destructive'
+    | 'error'
+    | 'flat'
+    | 'floating'
+    | 'glass'
+    | 'info'
+    | 'link'
+    | 'neutral'
+    | 'opposite'
+    | 'outline'
+    | 'primary'
+    | 'secondary'
+    | 'success'
+    | 'textfield'
+    | 'warning'
+    | 'whiteblock'
+    | (Record<never, never> & string);
+
 export interface TuiAppearanceOptions {
-    readonly appearance: string;
+    readonly appearance: Appearance;
 }
 
 export const TUI_APPEARANCE_DEFAULT_OPTIONS: TuiAppearanceOptions = {

projects/demo/src/modules/directives/appearance/examples/4/index.html

@@ -0,0 +1,7 @@
+<button
+    *ngFor="let appearance of appearances"
+    tuiButton
+    [appearance]="appearance"
+>
+    {{ appearance }}
+</button>

projects/demo/src/modules/directives/appearance/examples/4/index.less

@@ -0,0 +1,5 @@
+:host {
+    display: flex;
+    gap: 1rem;
+    flex-wrap: wrap;
+}

projects/demo/src/modules/directives/appearance/examples/4/index.ts

@@ -0,0 +1,35 @@
+import {NgForOf} from '@angular/common';
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiAppearance, TuiButton} from '@taiga-ui/core';
+
+@Component({
+    standalone: true,
+    imports: [TuiAppearance, TuiButton, NgForOf],
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    encapsulation,
+    changeDetection,
+})
+export default class Example {
+    protected readonly appearances = [
+        'primary',
+        'secondary',
+        'destructive',
+        'neutral',
+        'flat',
+        'link',
+        'accent',
+        'opposite',
+        'floating',
+        'textfield',
+        'whiteblock',
+        'outline',
+        'error',
+        'success',
+        'warning',
+        'info',
+        'glass',
+    ] as const;
+}

projects/demo/src/modules/directives/appearance/index.html

@@ -7,27 +7,13 @@
         <p>A directive for visual presets of interactive components</p>
 
         <tui-doc-example
-            id="basic"
-            description="Interactive elements react to pointer natively but you can override state with inputs"
-            heading="Basic"
-            [component]="1 | tuiComponent"
-            [content]="1 | tuiExample"
-        />
-
-        <tui-doc-example
-            id="custom"
-            description="Use LESS or SCSS mixins to create your own appearances in global styles"
-            heading="Custom"
-            [component]="2 | tuiComponent"
-            [content]="2 | tuiExample"
-        />
-
-        <tui-doc-example
-            id="checkbox"
-            description="You can use it on input[type='checkbox'] to create a custom toggle component easily"
-            heading="Checkbox"
-            [component]="3 | tuiComponent"
-            [content]="3 | tuiExample"
+            *ngFor="let example of examples; let index = index; let last = last"
+            [component]="index + 1 | tuiComponent"
+            [content]="index + 1 | tuiExample"
+            [description]="descriptions[index]"
+            [fullsize]="last"
+            [heading]="example"
+            [id]="example | tuiKebab"
         />
     </ng-template>
 

projects/demo/src/modules/directives/appearance/index.ts

@@ -11,6 +11,14 @@ import {TuiButton} from '@taiga-ui/core';
     changeDetection,
 })
 export default class Page {
+    protected examples = ['Basic', 'Custom', 'Checkbox', 'Bundled'];
+    protected descriptions = [
+        'Interactive elements react to pointer natively but you can override state with inputs',
+        'Use LESS or SCSS mixins to create your own appearances in global styles',
+        'You can use it on input[type="checkbox"] to create a custom toggle component easily',
+        'You can create your own appearances or use one of the bundled options',
+    ];
+
     protected appearances = ['primary', 'secondary', 'flat'];
     protected appearance = this.appearances[0]!;
 

projects/layout/components/navigation/aside.style.less

@@ -100,6 +100,7 @@ tui-dropdown[data-appearance='dropdown-navigation'] {
 
     [tuiAsideItem] {
         justify-content: flex-start;
+        margin: 0;
 
         &._active {
             background: transparent;