docs: improve styling filters

close #30911

Author: lekhmanrus

docs/src/app/pages/component-viewer/token-table.html

@@ -10,11 +10,37 @@
 
   <mat-form-field subscriptSizing="dynamic" appearance="outline">
     <mat-label>Filter by type</mat-label>
-    <mat-select [value]="typeFilter()" (selectionChange)="typeFilter.set($event.value)">
+    <mat-select [(value)]="typeFilter">
       @for (type of types; track $index) {
         <mat-option [value]="type">{{type | titlecase}}</mat-option>
       }
     </mat-select>
+    @if (typeFilter()) {
+      <button matSuffix matIconButton aria-label="Clear type filter" matTooltip="Clear type filter"
+              (click)="typeFilter.set(null); $event.stopPropagation()">
+        <mat-icon>clear</mat-icon>
+      </button>
+    }
+  </mat-form-field>
+
+  <mat-form-field subscriptSizing="dynamic" appearance="outline">
+    <mat-label>Filter by system token</mat-label>
+    <input #systemTokenInput matInput [matAutocomplete]="systemTokenAutocomplete"
+           [value]="systemTokenFilter()"
+           (input)="systemTokenFilter.set(systemTokenInput.value)"/>
+    <mat-autocomplete autoActiveFirstOption #systemTokenAutocomplete="matAutocomplete"
+                      (optionSelected)="systemTokenFilter.set(systemTokenInput.value)">
+      @for (systemToken of systemTokens(); track systemToken) {
+        <mat-option [value]="systemToken">{{systemToken}}</mat-option>
+      }
+    </mat-autocomplete>
+    @if (systemTokenFilter()) {
+      <button matSuffix matIconButton aria-label="Clear system token filter"
+              matTooltip="Clear system token filter"
+              (click)="systemTokenFilter.set(''); $event.stopPropagation()">
+        <mat-icon>clear</mat-icon>
+      </button>
+    }
   </mat-form-field>
 
   <button mat-button (click)="reset()">Reset filters</button>

docs/src/app/pages/component-viewer/token-table.ts

@@ -8,10 +8,13 @@
 
 import {ChangeDetectionStrategy, Component, computed, input, signal} from '@angular/core';
 import {TitleCasePipe} from '@angular/common';
-import {MatButton} from '@angular/material/button';
-import {MatFormField, MatLabel} from '@angular/material/form-field';
+import {MatAutocomplete, MatAutocompleteTrigger} from '@angular/material/autocomplete';
+import {MatButton, MatIconButton} from '@angular/material/button';
+import {MatFormField, MatLabel, MatSuffix} from '@angular/material/form-field';
+import {MatIcon} from '@angular/material/icon';
 import {MatInput} from '@angular/material/input';
 import {MatOption, MatSelect} from '@angular/material/select';
+import {MatTooltip} from '@angular/material/tooltip';
 import {TokenName} from './token-name';
 
 type TokenType = 'base' | 'color' | 'typography' | 'density';
@@ -30,35 +33,54 @@ export interface Token {
   styleUrl: './token-table.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
+    MatAutocomplete,
+    MatAutocompleteTrigger,
     MatButton,
+    MatIconButton,
     MatFormField,
     MatLabel,
+    MatSuffix,
+    MatIcon,
     MatInput,
     MatSelect,
     MatOption,
+    MatTooltip,
     TokenName,
     TitleCasePipe,
   ],
 })
 export class TokenTable {
-  tokens = input.required<Token[]>();
+  readonly tokens = input.required<Token[]>();
 
-  protected nameFilter = signal('');
-  protected typeFilter = signal<TokenType | null>(null);
-  protected types: TokenType[] = ['base', 'color', 'typography', 'density'];
-  protected filteredTokens = computed(() => {
+  protected readonly nameFilter = signal('');
+  protected readonly typeFilter = signal<TokenType | null>(null);
+  protected readonly systemTokenFilter = signal('');
+  protected readonly types: TokenType[] = ['base', 'color', 'typography', 'density'];
+  protected readonly systemTokens = computed(() => {
+    return [
+      ...new Set(
+        this.tokens()
+          .map(token => token.derivedFrom)
+          .filter(Boolean),
+      ),
+    ];
+  });
+  protected readonly filteredTokens = computed(() => {
     const name = this.nameFilter().trim().toLowerCase();
     const typeFilter = this.typeFilter();
+    const systemTokenFilter = this.systemTokenFilter();
 
     return this.tokens().filter(
       token =>
         (!name || token.overridesName.toLowerCase().includes(name)) &&
-        (!typeFilter || token.type === typeFilter),
+        (!typeFilter || token.type === typeFilter) &&
+        (!systemTokenFilter || token.derivedFrom?.toLowerCase().includes(systemTokenFilter)),
     );
   });
 
   protected reset() {
     this.nameFilter.set('');
     this.typeFilter.set(null);
+    this.systemTokenFilter.set('');
   }
 }