added icon button component

projects/qd-design-demo/src/app/app.html

@@ -14,6 +14,19 @@
   <qd-button variant="text" [text]="'Play'" [iconName]="'play_arrow'" (click)="onClick()"></qd-button>
   <qd-button variant="text" [text]="'Play'" [iconName]="'play_arrow'" (click)="onClick()" [disabled]="true"></qd-button>
 </div>
+<div class="horizontal">
+  <qd-icon-button variant="filled" [iconName]="'play_arrow'" (click)="onClick()" tooltip="tooltip"></qd-icon-button>
+  <qd-icon-button variant="filled" [iconName]="'play_arrow'" (click)="onClick()" [disabled]="true"></qd-icon-button>
+
+  <qd-icon-button variant="filled-tonal" [iconName]="'play_arrow'" (click)="onClick()"></qd-icon-button>
+  <qd-icon-button variant="filled-tonal" [iconName]="'play_arrow'" (click)="onClick()" [disabled]="true"></qd-icon-button>
+
+  <qd-icon-button variant="outlined" [iconName]="'play_arrow'" (click)="onClick()"></qd-icon-button>
+  <qd-icon-button variant="outlined" [iconName]="'play_arrow'" (click)="onClick()" [disabled]="true"></qd-icon-button>
+
+  <qd-icon-button variant="text" [iconName]="'play_arrow'" (click)="onClick()"></qd-icon-button>
+  <qd-icon-button variant="text" [iconName]="'play_arrow'" (click)="onClick()" [disabled]="true"></qd-icon-button>
+</div>
 <div class="horizontal">
   <qd-card clickable tooltip="tooltip" style="width: 300px" (click)="onClick()">
     <figure image class="image-wrapper">

projects/qd-design-demo/src/app/app.ts

@@ -1,19 +1,19 @@
 import { Component, signal } from '@angular/core';
 import {QdButton} from '../../../qd-design/src/lib/qd-button/qd-button';
-import {QdButtonType} from '../../../qd-design/src/enums/qd-button-type.enum';
+import {QdIconButton}  from '../../../qd-design/src/lib/qd-icon-button/qd-icon-button';
 import {QdCard} from '../../../qd-design/src/lib/qd-card/qd-card';
 import {NgOptimizedImage} from '@angular/common';
 import {QdTooltipDirective} from '../../../qd-design/src/directives/qd-tooltip-directive';
 
 @Component({
   selector: 'app-root',
-  imports: [QdButton, QdCard, NgOptimizedImage, QdTooltipDirective],
+  imports: [QdButton, QdIconButton, QdCard, NgOptimizedImage, QdTooltipDirective],
   templateUrl: './app.html',
+  standalone: true,
   styleUrl: './app.scss'
 })
 export class App {
   protected readonly title = signal('qd-design-demo');
-  protected readonly QdButtonType = QdButtonType;
 
   public onClick() {
     console.log('clicked');

projects/qd-design/src/directives/qd-button-variant.ts

@@ -1,11 +1,14 @@
-import {Directive, HostBinding, Input} from '@angular/core';
+import {Directive, input} from '@angular/core';
 
 export type QdButtonVariant = 'elevated' | 'filled' | 'filled-tonal' | 'outlined' | 'text';
 
 @Directive({
   standalone: true,
-  selector: 'qd-button[variant]'
+  selector: 'qd-button[variant]',
+  host: {
+    '[attr.data-variant]': 'variant()'
+  }
 })
 export class QdButtonVariantDirective {
-  @Input() @HostBinding('attr.data-variant') variant: QdButtonVariant = 'filled';
+  variant = input<QdButtonVariant>('filled');
 }

projects/qd-design/src/directives/qd-card-variant.ts

@@ -1,11 +1,14 @@
-import {Directive, HostBinding, Input} from '@angular/core';
+import {Directive, input} from '@angular/core';
 
 export type QdCardVariant = 'elevated' | 'filled' | 'outlined';
 
 @Directive({
   standalone: true,
-  selector: 'qd-card[variant]'
+  selector: 'qd-card[variant]',
+  host: {
+    '[attr.data-variant]': 'variant()'
+  }
 })
 export class QdCardVariantDirective {
-  @Input() @HostBinding('attr.data-variant') variant: QdCardVariant = 'filled';
+  variant = input<QdCardVariant>('filled');
 }

projects/qd-design/src/directives/qd-icon-button-variant.ts

@@ -0,0 +1,15 @@
+import {Directive, input} from '@angular/core';
+
+
+export type QdIconButtonVariant = 'filled' | 'filled-tonal' | 'outlined' | 'text';
+
+@Directive({
+  standalone: true,
+  selector: 'qd-icon-button[variant]',
+  host: {
+    '[attr.data-variant]': 'variant()'
+  }
+})
+export class QdIconButtonVariantDirective {
+  variant = input<QdIconButtonVariant>('filled');
+}

projects/qd-design/src/lib/qd-button/qd-button.css

@@ -466,6 +466,12 @@ body.dark-theme {
   height: fit-content;
   width: fit-content;
 }
+:host.disabled:disabled, :host.disabled:disabled:active, :host.disabled:disabled:hover, :host.disabled:disabled:focus {
+  pointer-events: none;
+}
+:host.disabled.disabled {
+  pointer-events: none;
+}
 
 .button {
   display: flex;

projects/qd-design/src/lib/qd-button/qd-button.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../styles/qd_design_system.scss","../../styles/typography/typography.token.scss","../../styles/typography/typography.module.scss","../../styles/design/look_and_feel.scss","../../styles/colors/light-theme.scss","../../styles/colors/dark-theme.scss","qd-button.scss","../../styles/design/overall-design.scss"],"names":[],"mappings":"AAQQ;ACRR;AACE;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACzGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AClIF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AHjDF;EITE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EJpCA;;;AAGF;EACE;IKhBA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;AL3BF;EKrBE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AC/CF;EACE;EACA;EACA;EACA;;;AAmBF;EHZE;EACA,gBGYiB;EHqCjB;EGnCA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EAEE;EACA;EACA;EACA;;;AAIJ;EC9CE;EDgDA;;ACgCA;EA5EA;EDgDE;;ACgCF;EAhFA;EDgDE;;ACiBF;EACE;EAlEF;EDqDE;;ACiBF;EAtEA;EDqDE;;ACEF;EAvDA;ED0DE;;ACCF;EA3DA;ED0DE;;ACfF;EACE;ED9CF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;ACuCF;EACE;EDnDF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAwDF;EAEE;;AAGF;EAEE;;;AAIJ;EACE;;ACDA;EAhFA;EDqFE;;ACDF;EApFA;EDqFE;;AChBF;EACE;EAtEF;ED0FE;;AChBF;EA1EA;ED0FE;;AC/BF;EA3DA;ED+FE;;AChCF;EA/DA;ED+FE;;AChDF;EACE;ED9CF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;ACuCF;EACE;EDnDF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAyFF;EAEE;;AAGF;EAEE;;;AAIJ;EACE;;AClCA;EDqCE;EACA;;AClCF;EDiCE;EACA;;ACjDF;EACE;EDoDA;EACA;;ACjDF;EDgDE;EACA;;AChEF;EDoEE;EACA;;ACjEF;EDgEE;EACA;;ACjFF;EACE;ED9CF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;ACuCF;EACE;EDnDF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AA0HF;EAEE;;AAGF;EAEE;;;AAIJ;EACE;EACA;;ACpEA;EDuEE;;ACnEF;EDmEE;;AClFF;EACE;EDqFA;;ACjFF;EDiFE;;AChGF;EDoGE;;AChGF;EDgGE;;AChHF;EACE;EDmHA;EACA;EAlKF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;ACuCF;EACE;ED8GA;EACA;EAlKF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AA2JF;EAEE;;AAGF;EAEE;;;AAIJ;EACE;;ACpGA;EDuGE;;ACnGF;EDmGE;;AClHF;EACE;EDqHA;;ACjHF;EDiHE;;AChIF;EDoIE;;AChIF;EDgIE;;AChJF;EACE;EDmJA;EAjMF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;ACuCF;EACE;ED8IA;EAjMF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AA0LF;EAEE;;AAGF;EAEE","file":"qd-button.css"}
+{"version":3,"sourceRoot":"","sources":["../../styles/qd_design_system.scss","../../styles/typography/typography.token.scss","../../styles/typography/typography.module.scss","../../styles/design/look_and_feel.scss","../../styles/colors/light-theme.scss","../../styles/colors/dark-theme.scss","qd-button.scss","../../styles/design/overall-design.scss"],"names":[],"mappings":"AAQQ;ACRR;AACE;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACzGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AClIF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AHjDF;EITE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EJpCA;;;AAGF;EACE;IKhBA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;AL3BF;EKrBE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AC/CF;EACE;EACA;EACA;EACA;;ACiDA;EACE;;AAIF;EACE;;;AD9BJ;EHlBE;EACA,gBGkBiB;EH+BjB;EG7BA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EAEE;EACA;EACA;EACA;;;AAIJ;ECpDE;EDsDA;;AC0BA;EA5EA;EDsDE;;AC0BF;EAhFA;EDsDE;;ACWF;EACE;EAlEF;ED2DE;;ACWF;EAtEA;ED2DE;;ACJF;EAvDA;EDgEE;;ACLF;EA3DA;EDgEE;;ACrBF;EACE;EDxCF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;ACiCF;EACE;ED7CF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAwDF;EAEE;;AAGF;EAEE;;;AAIJ;EACE;;ACPA;EAhFA;ED2FE;;ACPF;EApFA;ED2FE;;ACtBF;EACE;EAtEF;EDgGE;;ACtBF;EA1EA;EDgGE;;ACrCF;EA3DA;EDqGE;;ACtCF;EA/DA;EDqGE;;ACtDF;EACE;EDxCF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;ACiCF;EACE;ED7CF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAyFF;EAEE;;AAGF;EAEE;;;AAIJ;EACE;;ACxCA;ED2CE;EACA;;ACxCF;EDuCE;EACA;;ACvDF;EACE;ED0DA;EACA;;ACvDF;EDsDE;EACA;;ACtEF;ED0EE;EACA;;ACvEF;EDsEE;EACA;;ACvFF;EACE;EDxCF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;ACiCF;EACE;ED7CF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AA0HF;EAEE;;AAGF;EAEE;;;AAIJ;EACE;EACA;;AC1EA;ED6EE;;ACzEF;EDyEE;;ACxFF;EACE;ED2FA;;ACvFF;EDuFE;;ACtGF;ED0GE;;ACtGF;EDsGE;;ACtHF;EACE;EDyHA;EACA;EAlKF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;ACiCF;EACE;EDoHA;EACA;EAlKF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AA2JF;EAEE;;AAGF;EAEE;;;AAIJ;EACE;;AC1GA;ED6GE;;ACzGF;EDyGE;;ACxHF;EACE;ED2HA;;ACvHF;EDuHE;;ACtIF;ED0IE;;ACtIF;EDsIE;;ACtJF;EACE;EDyJA;EAjMF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;ACiCF;EACE;EDoJA;EAjMF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AA0LF;EAEE;;AAGF;EAEE","file":"qd-button.css"}

projects/qd-design/src/lib/qd-button/qd-button.scss

@@ -5,6 +5,12 @@
   background-color: transparent;
   height: fit-content;
   width: fit-content;
+
+  &.disabled {
+    @include qd.disabled {
+
+    }
+  }
 }
 
 @mixin button-disabled {

projects/qd-design/src/lib/qd-button/qd-button.ts

@@ -7,6 +7,7 @@ import {QdButtonVariantDirective} from '../../directives/qd-button-variant';
   imports: [
     QdIcon
   ],
+  standalone: true,
   templateUrl: './qd-button.html',
   styleUrl: './qd-button.scss',
   hostDirectives: [
@@ -14,10 +15,12 @@ import {QdButtonVariantDirective} from '../../directives/qd-button-variant';
       directive: QdButtonVariantDirective,
       inputs: ['variant']
     }
-  ]
+  ],
+  host: {
+    '[class.disabled]': 'disabled()',
+  }
 })
 export class QdButton {
-  // Optional inputs
   iconName = input<String>();
   text = input<string | number>();
   disabled = input<Boolean>(false);

projects/qd-design/src/lib/qd-icon-button/qd-icon-button.css

@@ -0,0 +1,750 @@
+@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
+:root {
+  /* body - large */
+  --md-sys-typescale-body-large-font-family-name: Roboto;
+  --md-sys-typescale-body-large-font-family-style: Regular;
+  --md-sys-typescale-body-large-font-size: 18px;
+  --md-sys-typescale-body-large-font-weight: 400px;
+  --md-sys-typescale-body-large-letter-spacing: 0.50px;
+  --md-sys-typescale-body-large-line-height: 22px;
+  /* body - medium */
+  --md-sys-typescale-body-medium-font-family-name: Roboto;
+  --md-sys-typescale-body-medium-font-family-style: Regular;
+  --md-sys-typescale-body-medium-font-size: 16px;
+  --md-sys-typescale-body-medium-font-weight: 400px;
+  --md-sys-typescale-body-medium-letter-spacing: 0.25px;
+  --md-sys-typescale-body-medium-line-height: 20px;
+  /* body - small */
+  --md-sys-typescale-body-small-font-family-name: Roboto;
+  --md-sys-typescale-body-small-font-family-style: Regular;
+  --md-sys-typescale-body-small-font-size: 14px;
+  --md-sys-typescale-body-small-font-weight: 400px;
+  --md-sys-typescale-body-small-letter-spacing: 0.40px;
+  --md-sys-typescale-body-small-line-height: 18px;
+  /* display - large */
+  --md-sys-typescale-display-large-font-family-name: Roboto;
+  --md-sys-typescale-display-large-font-family-style: Regular;
+  --md-sys-typescale-display-large-font-size: 51px;
+  --md-sys-typescale-display-large-font-weight: 400px;
+  --md-sys-typescale-display-large-letter-spacing: -0.25px;
+  --md-sys-typescale-display-large-line-height: 61px;
+  /* display - medium */
+  --md-sys-typescale-display-medium-font-family-name: Roboto;
+  --md-sys-typescale-display-medium-font-family-style: Regular;
+  --md-sys-typescale-display-medium-font-size: 42px;
+  --md-sys-typescale-display-medium-font-weight: 400px;
+  --md-sys-typescale-display-medium-letter-spacing: 0px;
+  --md-sys-typescale-display-medium-line-height: 52px;
+  /* display - small */
+  --md-sys-typescale-display-small-font-family-name: Roboto;
+  --md-sys-typescale-display-small-font-family-style: Regular;
+  --md-sys-typescale-display-small-font-size: 40px;
+  --md-sys-typescale-display-small-font-weight: 400px;
+  --md-sys-typescale-display-small-letter-spacing: 0px;
+  --md-sys-typescale-display-small-line-height: 50px;
+  /* headline - large */
+  --md-sys-typescale-headline-large-font-family-name: Roboto;
+  --md-sys-typescale-headline-large-font-family-style: Regular;
+  --md-sys-typescale-headline-large-font-size: 36px;
+  --md-sys-typescale-headline-large-font-weight: 400px;
+  --md-sys-typescale-headline-large-letter-spacing: 0px;
+  --md-sys-typescale-headline-large-line-height: 44px;
+  /* headline - medium */
+  --md-sys-typescale-headline-medium-font-family-name: Roboto;
+  --md-sys-typescale-headline-medium-font-family-style: Regular;
+  --md-sys-typescale-headline-medium-font-size: 32px;
+  --md-sys-typescale-headline-medium-font-weight: 400px;
+  --md-sys-typescale-headline-medium-letter-spacing: 0px;
+  --md-sys-typescale-headline-medium-line-height: 36px;
+  /* headline - small */
+  --md-sys-typescale-headline-small-font-family-name: Roboto;
+  --md-sys-typescale-headline-small-font-family-style: Regular;
+  --md-sys-typescale-headline-small-font-size: 28px;
+  --md-sys-typescale-headline-small-font-weight: 400px;
+  --md-sys-typescale-headline-small-letter-spacing: 0px;
+  --md-sys-typescale-headline-small-line-height: 36px;
+  /* label - large */
+  --md-sys-typescale-label-large-font-family-name: Roboto;
+  --md-sys-typescale-label-large-font-family-style: Regular;
+  --md-sys-typescale-label-large-font-size: 12px;
+  --md-sys-typescale-label-large-font-weight: 500px;
+  --md-sys-typescale-label-large-letter-spacing: 0.10px;
+  --md-sys-typescale-label-large-line-height: 14px;
+  /* label - medium */
+  --md-sys-typescale-label-medium-font-family-name: Roboto;
+  --md-sys-typescale-label-medium-font-family-style: Regular;
+  --md-sys-typescale-label-medium-font-size: 11px;
+  --md-sys-typescale-label-medium-font-weight: 500px;
+  --md-sys-typescale-label-medium-letter-spacing: 0.50px;
+  --md-sys-typescale-label-medium-line-height: 15px;
+  /* label - small */
+  --md-sys-typescale-label-small-font-family-name: Roboto;
+  --md-sys-typescale-label-small-font-family-style: Regular;
+  --md-sys-typescale-label-small-font-size: 10px;
+  --md-sys-typescale-label-small-font-weight: 500px;
+  --md-sys-typescale-label-small-letter-spacing: 0.50px;
+  --md-sys-typescale-label-small-line-height: 14px;
+  /* title - large */
+  --md-sys-typescale-title-large-font-family-name: Roboto;
+  --md-sys-typescale-title-large-font-family-style: Regular;
+  --md-sys-typescale-title-large-font-size: 25px;
+  --md-sys-typescale-title-large-font-weight: 400px;
+  --md-sys-typescale-title-large-letter-spacing: 0px;
+  --md-sys-typescale-title-large-line-height: 31px;
+  /* title - medium */
+  --md-sys-typescale-title-medium-font-family-name: Roboto;
+  --md-sys-typescale-title-medium-font-family-style: Regular;
+  --md-sys-typescale-title-medium-font-size: 22px;
+  --md-sys-typescale-title-medium-font-weight: 500px;
+  --md-sys-typescale-title-medium-letter-spacing: 0.15px;
+  --md-sys-typescale-title-medium-line-height: 28px;
+  /* title - small */
+  --md-sys-typescale-title-small-font-family-name: Roboto;
+  --md-sys-typescale-title-small-font-family-style: Regular;
+  --md-sys-typescale-title-small-font-size: 20px;
+  --md-sys-typescale-title-small-font-weight: 500px;
+  --md-sys-typescale-title-small-letter-spacing: 0.10px;
+  --md-sys-typescale-title-small-line-height: 16px;
+}
+
+.display-large {
+  font-family: var(--md-sys-typescale-display-large-font-family-name);
+  font-size: var(--md-sys-typescale-display-large-font-size);
+  font-style: var(--md-sys-typescale-display-large-font-family-style);
+  font-weight: var(--md-sys-typescale-display-large-font-weight);
+  letter-spacing: var(--md-sys-typescale-display-large-tracking);
+  line-height: var(--md-sys-typescale-display-large-line-height);
+  text-decoration: var(--md-sys-typescale-display-large-text-decoration);
+  text-transform: var(--md-sys-typescale-display-large-text-transform);
+}
+
+.display-medium {
+  font-family: var(--md-sys-typescale-display-medium-font-family-name);
+  font-size: var(--md-sys-typescale-display-medium-font-size);
+  font-style: var(--md-sys-typescale-display-medium-font-family-style);
+  font-weight: var(--md-sys-typescale-display-medium-font-weight);
+  letter-spacing: var(--md-sys-typescale-display-medium-tracking);
+  line-height: var(--md-sys-typescale-display-medium-line-height);
+  text-decoration: var(--md-sys-typescale-display-medium-text-decoration);
+  text-transform: var(--md-sys-typescale-display-medium-text-transform);
+}
+
+.display-small {
+  font-family: var(--md-sys-typescale-display-small-font-family-name);
+  font-size: var(--md-sys-typescale-display-small-font-size);
+  font-style: var(--md-sys-typescale-display-small-font-family-style);
+  font-weight: var(--md-sys-typescale-display-small-font-weight);
+  letter-spacing: var(--md-sys-typescale-display-small-tracking);
+  line-height: var(--md-sys-typescale-display-small-line-height);
+  text-decoration: var(--md-sys-typescale-display-small-text-decoration);
+  text-transform: var(--md-sys-typescale-display-small-text-transform);
+}
+
+.headline-large {
+  font-family: var(--md-sys-typescale-headline-large-font-family-name);
+  font-size: var(--md-sys-typescale-headline-large-font-size);
+  font-style: var(--md-sys-typescale-headline-large-font-family-style);
+  font-weight: var(--md-sys-typescale-headline-large-font-weight);
+  letter-spacing: var(--md-sys-typescale-headline-large-tracking);
+  line-height: var(--md-sys-typescale-headline-large-line-height);
+  text-decoration: var(--md-sys-typescale-headline-large-text-decoration);
+  text-transform: var(--md-sys-typescale-headline-large-text-transform);
+}
+
+.headline-medium {
+  font-family: var(--md-sys-typescale-headline-medium-font-family-name);
+  font-size: var(--md-sys-typescale-headline-medium-font-size);
+  font-style: var(--md-sys-typescale-headline-medium-font-family-style);
+  font-weight: var(--md-sys-typescale-headline-medium-font-weight);
+  letter-spacing: var(--md-sys-typescale-headline-medium-tracking);
+  line-height: var(--md-sys-typescale-headline-medium-line-height);
+  text-decoration: var(--md-sys-typescale-headline-medium-text-decoration);
+  text-transform: var(--md-sys-typescale-headline-medium-text-transform);
+}
+
+.headline-small {
+  font-family: var(--md-sys-typescale-headline-small-font-family-name);
+  font-size: var(--md-sys-typescale-headline-small-font-size);
+  font-style: var(--md-sys-typescale-headline-small-font-family-style);
+  font-weight: var(--md-sys-typescale-headline-small-font-weight);
+  letter-spacing: var(--md-sys-typescale-headline-small-tracking);
+  line-height: var(--md-sys-typescale-headline-small-line-height);
+  text-decoration: var(--md-sys-typescale-headline-small-text-decoration);
+  text-transform: var(--md-sys-typescale-headline-small-text-transform);
+}
+
+.body-large {
+  font-family: var(--md-sys-typescale-body-large-font-family-name);
+  font-size: var(--md-sys-typescale-body-large-font-size);
+  font-style: var(--md-sys-typescale-body-large-font-family-style);
+  font-weight: var(--md-sys-typescale-body-large-font-weight);
+  letter-spacing: var(--md-sys-typescale-body-large-tracking);
+  line-height: var(--md-sys-typescale-body-large-line-height);
+  text-decoration: var(--md-sys-typescale-body-large-text-decoration);
+  text-transform: var(--md-sys-typescale-body-large-text-transform);
+}
+
+.body-medium {
+  font-family: var(--md-sys-typescale-body-medium-font-family-name);
+  font-size: var(--md-sys-typescale-body-medium-font-size);
+  font-style: var(--md-sys-typescale-body-medium-font-family-style);
+  font-weight: var(--md-sys-typescale-body-medium-font-weight);
+  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
+  line-height: var(--md-sys-typescale-body-medium-line-height);
+  text-decoration: var(--md-sys-typescale-body-medium-text-decoration);
+  text-transform: var(--md-sys-typescale-body-medium-text-transform);
+}
+
+.body-small {
+  font-family: var(--md-sys-typescale-body-small-font-family-name);
+  font-size: var(--md-sys-typescale-body-small-font-size);
+  font-style: var(--md-sys-typescale-body-small-font-family-style);
+  font-weight: var(--md-sys-typescale-body-small-font-weight);
+  letter-spacing: var(--md-sys-typescale-body-small-tracking);
+  line-height: var(--md-sys-typescale-body-small-line-height);
+  text-decoration: var(--md-sys-typescale-body-small-text-decoration);
+  text-transform: var(--md-sys-typescale-body-small-text-transform);
+}
+
+.label-large, .button-content, :host[data-variant=filled] .button .content, :host[data-variant=filled-tonal] .button .content, :host[data-variant=outlined] .button .content, :host[data-variant=text] .button .content {
+  font-family: var(--md-sys-typescale-label-large-font-family-name);
+  font-size: var(--md-sys-typescale-label-large-font-size);
+  font-style: var(--md-sys-typescale-label-large-font-family-style);
+  font-weight: var(--md-sys-typescale-label-large-font-weight);
+  letter-spacing: var(--md-sys-typescale-label-large-tracking);
+  line-height: var(--md-sys-typescale-label-large-line-height);
+  text-decoration: var(--md-sys-typescale-label-large-text-decoration);
+  text-transform: var(--md-sys-typescale-label-large-text-transform);
+}
+
+.label-medium {
+  font-family: var(--md-sys-typescale-label-medium-font-family-name);
+  font-size: var(--md-sys-typescale-label-medium-font-size);
+  font-style: var(--md-sys-typescale-label-medium-font-family-style);
+  font-weight: var(--md-sys-typescale-label-medium-font-weight);
+  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
+  line-height: var(--md-sys-typescale-label-medium-line-height);
+  text-decoration: var(--md-sys-typescale-label-medium-text-decoration);
+  text-transform: var(--md-sys-typescale-label-medium-text-transform);
+}
+
+.label-small {
+  font-family: var(--md-sys-typescale-label-small-font-family-name);
+  font-size: var(--md-sys-typescale-label-small-font-size);
+  font-style: var(--md-sys-typescale-label-small-font-family-style);
+  font-weight: var(--md-sys-typescale-label-small-font-weight);
+  letter-spacing: var(--md-sys-typescale-label-small-tracking);
+  line-height: var(--md-sys-typescale-label-small-line-height);
+  text-decoration: var(--md-sys-typescale-label-small-text-decoration);
+  text-transform: var(--md-sys-typescale-label-small-text-transform);
+}
+
+.title-large {
+  font-family: var(--md-sys-typescale-title-large-font-family-name);
+  font-size: var(--md-sys-typescale-title-large-font-size);
+  font-style: var(--md-sys-typescale-title-large-font-family-style);
+  font-weight: var(--md-sys-typescale-title-large-font-weight);
+  letter-spacing: var(--md-sys-typescale-title-large-tracking);
+  line-height: var(--md-sys-typescale-title-large-line-height);
+  text-decoration: var(--md-sys-typescale-title-large-text-decoration);
+  text-transform: var(--md-sys-typescale-title-large-text-transform);
+}
+
+.title-medium {
+  font-family: var(--md-sys-typescale-title-medium-font-family-name);
+  font-size: var(--md-sys-typescale-title-medium-font-size);
+  font-style: var(--md-sys-typescale-title-medium-font-family-style);
+  font-weight: var(--md-sys-typescale-title-medium-font-weight);
+  letter-spacing: var(--md-sys-typescale-title-medium-tracking);
+  line-height: var(--md-sys-typescale-title-medium-line-height);
+  text-decoration: var(--md-sys-typescale-title-medium-text-decoration);
+  text-transform: var(--md-sys-typescale-title-medium-text-transform);
+}
+
+.title-small {
+  font-family: var(--md-sys-typescale-title-small-font-family-name);
+  font-size: var(--md-sys-typescale-title-small-font-size);
+  font-style: var(--md-sys-typescale-title-small-font-family-style);
+  font-weight: var(--md-sys-typescale-title-small-font-weight);
+  letter-spacing: var(--md-sys-typescale-title-small-tracking);
+  line-height: var(--md-sys-typescale-title-small-line-height);
+  text-decoration: var(--md-sys-typescale-title-small-text-decoration);
+  text-transform: var(--md-sys-typescale-title-small-text-transform);
+}
+
+.scrollable-y {
+  max-height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.height-100 {
+  height: 100%;
+  max-height: 100%;
+  min-height: 100%;
+}
+
+.height-100-vh {
+  height: 100vh;
+  max-height: 100vh;
+  min-height: 100vh;
+}
+
+.width-100 {
+  max-width: 100%;
+  min-width: 100%;
+  width: 100%;
+}
+
+.width-100-vw {
+  max-width: 100vw;
+  min-width: 100vw;
+  width: 100vw;
+}
+
+body {
+  --md-sys-color-primary: rgb(73 93 146);
+  --md-sys-color-surface-tint: rgb(73 93 146);
+  --md-sys-color-on-primary: rgb(255 255 255);
+  --md-sys-color-primary-container: rgb(218 225 255);
+  --md-sys-color-on-primary-container: rgb(49 69 120);
+  --md-sys-color-secondary: rgb(88 94 113);
+  --md-sys-color-on-secondary: rgb(255 255 255);
+  --md-sys-color-secondary-container: rgb(221 226 249);
+  --md-sys-color-on-secondary-container: rgb(65 70 89);
+  --md-sys-color-tertiary: rgb(115 84 113);
+  --md-sys-color-on-tertiary: rgb(255 255 255);
+  --md-sys-color-tertiary-container: rgb(255 214 249);
+  --md-sys-color-on-tertiary-container: rgb(90 61 88);
+  --md-sys-color-error: rgb(186 26 26);
+  --md-sys-color-on-error: rgb(255 255 255);
+  --md-sys-color-error-container: rgb(255 218 214);
+  --md-sys-color-on-error-container: rgb(147 0 10);
+  --md-sys-color-background: rgb(250 248 255);
+  --md-sys-color-on-background: rgb(26 27 33);
+  --md-sys-color-surface: rgb(250 248 255);
+  --md-sys-color-on-surface: rgb(26 27 33);
+  --md-sys-color-surface-variant: rgb(225 226 236);
+  --md-sys-color-on-surface-variant: rgb(69 70 79);
+  --md-sys-color-outline: rgb(117 118 128);
+  --md-sys-color-outline-variant: rgb(197 198 208);
+  --md-sys-color-shadow: rgb(0 0 0);
+  --md-sys-color-scrim: rgb(0 0 0);
+  --md-sys-color-inverse-surface: rgb(47 48 54);
+  --md-sys-color-inverse-on-surface: rgb(241 240 247);
+  --md-sys-color-inverse-primary: rgb(179 197 255);
+  --md-sys-color-primary-fixed: rgb(218 225 255);
+  --md-sys-color-on-primary-fixed: rgb(0 24 73);
+  --md-sys-color-primary-fixed-dim: rgb(179 197 255);
+  --md-sys-color-on-primary-fixed-variant: rgb(49 69 120);
+  --md-sys-color-secondary-fixed: rgb(221 226 249);
+  --md-sys-color-on-secondary-fixed: rgb(21 27 44);
+  --md-sys-color-secondary-fixed-dim: rgb(193 198 221);
+  --md-sys-color-on-secondary-fixed-variant: rgb(65 70 89);
+  --md-sys-color-tertiary-fixed: rgb(255 214 249);
+  --md-sys-color-on-tertiary-fixed: rgb(43 18 43);
+  --md-sys-color-tertiary-fixed-dim: rgb(225 187 220);
+  --md-sys-color-on-tertiary-fixed-variant: rgb(90 61 88);
+  --md-sys-color-surface-dim: rgb(218 217 224);
+  --md-sys-color-surface-bright: rgb(250 248 255);
+  --md-sys-color-surface-container-lowest: rgb(255 255 255);
+  --md-sys-color-surface-container-low: rgb(244 243 250);
+  --md-sys-color-surface-container: rgb(238 237 244);
+  --md-sys-color-surface-container-high: rgb(232 231 239);
+  --md-sys-color-surface-container-highest: rgb(227 226 233);
+  transition: background-color 0.3s, color 0.3s;
+}
+
+@media (prefers-color-scheme: dark) {
+  body:not(.light-theme) {
+    --md-sys-color-primary: rgb(179 197 255);
+    --md-sys-color-surface-tint: rgb(179 197 255);
+    --md-sys-color-on-primary: rgb(25 46 96);
+    --md-sys-color-primary-container: rgb(49 69 120);
+    --md-sys-color-on-primary-container: rgb(218 225 255);
+    --md-sys-color-secondary: rgb(193 198 221);
+    --md-sys-color-on-secondary: rgb(42 48 66);
+    --md-sys-color-secondary-container: rgb(65 70 89);
+    --md-sys-color-on-secondary-container: rgb(221 226 249);
+    --md-sys-color-tertiary: rgb(225 187 220);
+    --md-sys-color-on-tertiary: rgb(66 39 65);
+    --md-sys-color-tertiary-container: rgb(90 61 88);
+    --md-sys-color-on-tertiary-container: rgb(255 214 249);
+    --md-sys-color-error: rgb(255 180 171);
+    --md-sys-color-on-error: rgb(105 0 5);
+    --md-sys-color-error-container: rgb(147 0 10);
+    --md-sys-color-on-error-container: rgb(255 218 214);
+    --md-sys-color-background: rgb(18 19 24);
+    --md-sys-color-on-background: rgb(227 226 233);
+    --md-sys-color-surface: rgb(18 19 24);
+    --md-sys-color-on-surface: rgb(227 226 233);
+    --md-sys-color-surface-variant: rgb(69 70 79);
+    --md-sys-color-on-surface-variant: rgb(197 198 208);
+    --md-sys-color-outline: rgb(143 144 154);
+    --md-sys-color-outline-variant: rgb(69 70 79);
+    --md-sys-color-shadow: rgb(0 0 0);
+    --md-sys-color-scrim: rgb(0 0 0);
+    --md-sys-color-inverse-surface: rgb(227 226 233);
+    --md-sys-color-inverse-on-surface: rgb(47 48 54);
+    --md-sys-color-inverse-primary: rgb(73 93 146);
+    --md-sys-color-primary-fixed: rgb(218 225 255);
+    --md-sys-color-on-primary-fixed: rgb(0 24 73);
+    --md-sys-color-primary-fixed-dim: rgb(179 197 255);
+    --md-sys-color-on-primary-fixed-variant: rgb(49 69 120);
+    --md-sys-color-secondary-fixed: rgb(221 226 249);
+    --md-sys-color-on-secondary-fixed: rgb(21 27 44);
+    --md-sys-color-secondary-fixed-dim: rgb(193 198 221);
+    --md-sys-color-on-secondary-fixed-variant: rgb(65 70 89);
+    --md-sys-color-tertiary-fixed: rgb(255 214 249);
+    --md-sys-color-on-tertiary-fixed: rgb(43 18 43);
+    --md-sys-color-tertiary-fixed-dim: rgb(225 187 220);
+    --md-sys-color-on-tertiary-fixed-variant: rgb(90 61 88);
+    --md-sys-color-surface-dim: rgb(18 19 24);
+    --md-sys-color-surface-bright: rgb(56 57 63);
+    --md-sys-color-surface-container-lowest: rgb(13 14 19);
+    --md-sys-color-surface-container-low: rgb(26 27 33);
+    --md-sys-color-surface-container: rgb(30 31 37);
+    --md-sys-color-surface-container-high: rgb(41 42 47);
+    --md-sys-color-surface-container-highest: rgb(51 52 58);
+  }
+}
+body.dark-theme {
+  --md-sys-color-primary: rgb(179 197 255);
+  --md-sys-color-surface-tint: rgb(179 197 255);
+  --md-sys-color-on-primary: rgb(25 46 96);
+  --md-sys-color-primary-container: rgb(49 69 120);
+  --md-sys-color-on-primary-container: rgb(218 225 255);
+  --md-sys-color-secondary: rgb(193 198 221);
+  --md-sys-color-on-secondary: rgb(42 48 66);
+  --md-sys-color-secondary-container: rgb(65 70 89);
+  --md-sys-color-on-secondary-container: rgb(221 226 249);
+  --md-sys-color-tertiary: rgb(225 187 220);
+  --md-sys-color-on-tertiary: rgb(66 39 65);
+  --md-sys-color-tertiary-container: rgb(90 61 88);
+  --md-sys-color-on-tertiary-container: rgb(255 214 249);
+  --md-sys-color-error: rgb(255 180 171);
+  --md-sys-color-on-error: rgb(105 0 5);
+  --md-sys-color-error-container: rgb(147 0 10);
+  --md-sys-color-on-error-container: rgb(255 218 214);
+  --md-sys-color-background: rgb(18 19 24);
+  --md-sys-color-on-background: rgb(227 226 233);
+  --md-sys-color-surface: rgb(18 19 24);
+  --md-sys-color-on-surface: rgb(227 226 233);
+  --md-sys-color-surface-variant: rgb(69 70 79);
+  --md-sys-color-on-surface-variant: rgb(197 198 208);
+  --md-sys-color-outline: rgb(143 144 154);
+  --md-sys-color-outline-variant: rgb(69 70 79);
+  --md-sys-color-shadow: rgb(0 0 0);
+  --md-sys-color-scrim: rgb(0 0 0);
+  --md-sys-color-inverse-surface: rgb(227 226 233);
+  --md-sys-color-inverse-on-surface: rgb(47 48 54);
+  --md-sys-color-inverse-primary: rgb(73 93 146);
+  --md-sys-color-primary-fixed: rgb(218 225 255);
+  --md-sys-color-on-primary-fixed: rgb(0 24 73);
+  --md-sys-color-primary-fixed-dim: rgb(179 197 255);
+  --md-sys-color-on-primary-fixed-variant: rgb(49 69 120);
+  --md-sys-color-secondary-fixed: rgb(221 226 249);
+  --md-sys-color-on-secondary-fixed: rgb(21 27 44);
+  --md-sys-color-secondary-fixed-dim: rgb(193 198 221);
+  --md-sys-color-on-secondary-fixed-variant: rgb(65 70 89);
+  --md-sys-color-tertiary-fixed: rgb(255 214 249);
+  --md-sys-color-on-tertiary-fixed: rgb(43 18 43);
+  --md-sys-color-tertiary-fixed-dim: rgb(225 187 220);
+  --md-sys-color-on-tertiary-fixed-variant: rgb(90 61 88);
+  --md-sys-color-surface-dim: rgb(18 19 24);
+  --md-sys-color-surface-bright: rgb(56 57 63);
+  --md-sys-color-surface-container-lowest: rgb(13 14 19);
+  --md-sys-color-surface-container-low: rgb(26 27 33);
+  --md-sys-color-surface-container: rgb(30 31 37);
+  --md-sys-color-surface-container-high: rgb(41 42 47);
+  --md-sys-color-surface-container-highest: rgb(51 52 58);
+}
+
+:host {
+  display: flex;
+  background-color: transparent;
+  height: fit-content;
+  width: fit-content;
+}
+:host.disabled:disabled, :host.disabled:disabled:active, :host.disabled:disabled:hover, :host.disabled:disabled:focus {
+  pointer-events: none;
+}
+:host.disabled.disabled {
+  pointer-events: none;
+}
+
+.button {
+  display: flex;
+  flex-direction: row;
+  cursor: pointer;
+  background-color: transparent;
+  border: 1px solid transparent;
+  border-radius: 20px;
+  box-sizing: border-box;
+  height: 40px;
+  padding: 8px;
+  transition: all 200ms ease-in-out;
+  width: 40px;
+}
+.button-icon, :host[data-variant=text] .button .icon, :host[data-variant=outlined] .button .icon, :host[data-variant=filled-tonal] .button .icon, :host[data-variant=filled] .button .icon {
+  background-color: transparent;
+  height: 24px;
+  margin: auto;
+  padding: 0;
+  width: 24px;
+}
+.button-content, :host[data-variant=text] .button .content, :host[data-variant=outlined] .button .content, :host[data-variant=filled-tonal] .button .content, :host[data-variant=filled] .button .content {
+  background-color: transparent;
+  height: fit-content;
+  margin: auto 8px;
+  padding: 0;
+}
+
+:host[data-variant=filled] .button {
+  background-color: var(--md-sys-color-primary);
+}
+:host[data-variant=filled] .button:enabled:hover, :host[data-variant=filled] .button:hover {
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+  background-color: color-mix(in hsl, var(--md-sys-color-primary), var(--md-sys-color-on-primary) 8%);
+}
+:host[data-variant=filled] .button.hover {
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+  background-color: color-mix(in hsl, var(--md-sys-color-primary), var(--md-sys-color-on-primary) 8%);
+}
+:host[data-variant=filled] .button:enabled:focus-visible, :host[data-variant=filled] .button:focus-visible {
+  outline: none;
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+  background-color: color-mix(in hsl, var(--md-sys-color-primary), var(--md-sys-color-on-primary) 12%);
+}
+:host[data-variant=filled] .button.focus {
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+  background-color: color-mix(in hsl, var(--md-sys-color-primary), var(--md-sys-color-on-primary) 12%);
+}
+:host[data-variant=filled] .button:enabled:active, :host[data-variant=filled] .button:active {
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+  background-color: color-mix(in hsl, var(--md-sys-color-primary), var(--md-sys-color-on-primary) 12%);
+}
+:host[data-variant=filled] .button.active {
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+  background-color: color-mix(in hsl, var(--md-sys-color-primary), var(--md-sys-color-on-primary) 12%);
+}
+:host[data-variant=filled] .button:disabled, :host[data-variant=filled] .button:disabled:active, :host[data-variant=filled] .button:disabled:hover, :host[data-variant=filled] .button:disabled:focus {
+  pointer-events: none;
+  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
+  cursor: default;
+  box-shadow: none;
+}
+:host[data-variant=filled] .button:disabled .icon, :host[data-variant=filled] .button:disabled:active .icon, :host[data-variant=filled] .button:disabled:hover .icon, :host[data-variant=filled] .button:disabled:focus .icon {
+  color: color-mix(in srgb, var(--md-sys-color-on-surface) 32%, transparent);
+  background: transparent;
+}
+:host[data-variant=filled] .button:disabled .content, :host[data-variant=filled] .button:disabled:active .content, :host[data-variant=filled] .button:disabled:hover .content, :host[data-variant=filled] .button:disabled:focus .content {
+  color: color-mix(in srgb, var(--md-sys-color-on-surface) 32%, transparent);
+  background: transparent;
+}
+:host[data-variant=filled] .button.disabled {
+  pointer-events: none;
+  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
+  cursor: default;
+  box-shadow: none;
+}
+:host[data-variant=filled] .button.disabled .icon {
+  color: color-mix(in srgb, var(--md-sys-color-on-surface) 32%, transparent);
+  background: transparent;
+}
+:host[data-variant=filled] .button.disabled .content {
+  color: color-mix(in srgb, var(--md-sys-color-on-surface) 32%, transparent);
+  background: transparent;
+}
+:host[data-variant=filled] .button .icon {
+  color: var(--md-sys-color-on-primary);
+}
+:host[data-variant=filled] .button .content {
+  color: var(--md-sys-color-on-primary);
+}
+
+:host[data-variant=filled-tonal] .button {
+  background-color: var(--md-sys-color-secondary-container);
+}
+:host[data-variant=filled-tonal] .button:enabled:hover, :host[data-variant=filled-tonal] .button:hover {
+  background-color: color-mix(in hsl, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 8%);
+  box-shadow: var(--md-sys-elevation-1);
+}
+:host[data-variant=filled-tonal] .button.hover {
+  background-color: color-mix(in hsl, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 8%);
+  box-shadow: var(--md-sys-elevation-1);
+}
+:host[data-variant=filled-tonal] .button:enabled:focus-visible, :host[data-variant=filled-tonal] .button:focus-visible {
+  outline: none;
+  background-color: color-mix(in hsl, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 12%);
+  box-shadow: var(--md-sys-elevation-1);
+}
+:host[data-variant=filled-tonal] .button.focus {
+  background-color: color-mix(in hsl, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 12%);
+  box-shadow: var(--md-sys-elevation-1);
+}
+:host[data-variant=filled-tonal] .button:enabled:active, :host[data-variant=filled-tonal] .button:active {
+  background-color: color-mix(in hsl, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 12%);
+  box-shadow: var(--md-sys-elevation-1);
+}
+:host[data-variant=filled-tonal] .button.active {
+  background-color: color-mix(in hsl, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 12%);
+  box-shadow: var(--md-sys-elevation-1);
+}
+:host[data-variant=filled-tonal] .button:disabled, :host[data-variant=filled-tonal] .button:disabled:active, :host[data-variant=filled-tonal] .button:disabled:hover, :host[data-variant=filled-tonal] .button:disabled:focus {
+  pointer-events: none;
+  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
+  cursor: default;
+  box-shadow: none;
+}
+:host[data-variant=filled-tonal] .button:disabled .icon, :host[data-variant=filled-tonal] .button:disabled:active .icon, :host[data-variant=filled-tonal] .button:disabled:hover .icon, :host[data-variant=filled-tonal] .button:disabled:focus .icon {
+  color: color-mix(in srgb, var(--md-sys-color-on-surface) 32%, transparent);
+  background: transparent;
+}
+:host[data-variant=filled-tonal] .button:disabled .content, :host[data-variant=filled-tonal] .button:disabled:active .content, :host[data-variant=filled-tonal] .button:disabled:hover .content, :host[data-variant=filled-tonal] .button:disabled:focus .content {
+  color: color-mix(in srgb, var(--md-sys-color-on-surface) 32%, transparent);
+  background: transparent;
+}
+:host[data-variant=filled-tonal] .button.disabled {
+  pointer-events: none;
+  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
+  cursor: default;
+  box-shadow: none;
+}
+:host[data-variant=filled-tonal] .button.disabled .icon {
+  color: color-mix(in srgb, var(--md-sys-color-on-surface) 32%, transparent);
+  background: transparent;
+}
+:host[data-variant=filled-tonal] .button.disabled .content {
+  color: color-mix(in srgb, var(--md-sys-color-on-surface) 32%, transparent);
+  background: transparent;
+}
+:host[data-variant=filled-tonal] .button .icon {
+  color: var(--md-sys-color-on-secondary-container);
+}
+:host[data-variant=filled-tonal] .button .content {
+  color: var(--md-sys-color-on-secondary-container);
+}
+
+:host[data-variant=outlined] .button {
+  background-color: transparent;
+  border: 1px solid var(--md-sys-color-outline-variant);
+}
+:host[data-variant=outlined] .button:enabled:hover, :host[data-variant=outlined] .button:hover {
+  background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
+}
+:host[data-variant=outlined] .button.hover {
+  background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
+}
+:host[data-variant=outlined] .button:enabled:focus-visible, :host[data-variant=outlined] .button:focus-visible {
+  outline: none;
+  background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
+}
+:host[data-variant=outlined] .button.focus {
+  background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
+}
+:host[data-variant=outlined] .button:enabled:active, :host[data-variant=outlined] .button:active {
+  background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
+}
+:host[data-variant=outlined] .button.active {
+  background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
+}
+:host[data-variant=outlined] .button:disabled, :host[data-variant=outlined] .button:disabled:active, :host[data-variant=outlined] .button:disabled:hover, :host[data-variant=outlined] .button:disabled:focus {
+  pointer-events: none;
+  background-color: transparent;
+  border: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
+  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
+  cursor: default;
+  box-shadow: none;
+}
+:host[data-variant=outlined] .button:disabled .icon, :host[data-variant=outlined] .button:disabled:active .icon, :host[data-variant=outlined] .button:disabled:hover .icon, :host[data-variant=outlined] .button:disabled:focus .icon {
+  color: color-mix(in srgb, var(--md-sys-color-on-surface) 32%, transparent);
+  background: transparent;
+}
+:host[data-variant=outlined] .button:disabled .content, :host[data-variant=outlined] .button:disabled:active .content, :host[data-variant=outlined] .button:disabled:hover .content, :host[data-variant=outlined] .button:disabled:focus .content {
+  color: color-mix(in srgb, var(--md-sys-color-on-surface) 32%, transparent);
+  background: transparent;
+}
+:host[data-variant=outlined] .button.disabled {
+  pointer-events: none;
+  background-color: transparent;
+  border: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
+  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
+  cursor: default;
+  box-shadow: none;
+}
+:host[data-variant=outlined] .button.disabled .icon {
+  color: color-mix(in srgb, var(--md-sys-color-on-surface) 32%, transparent);
+  background: transparent;
+}
+:host[data-variant=outlined] .button.disabled .content {
+  color: color-mix(in srgb, var(--md-sys-color-on-surface) 32%, transparent);
+  background: transparent;
+}
+:host[data-variant=outlined] .button .icon {
+  color: var(--md-sys-color-on-surface-variant);
+}
+:host[data-variant=outlined] .button .content {
+  color: var(--md-sys-color-on-surface-variant);
+}
+
+:host[data-variant=text] .button {
+  padding: 0 4px;
+}
+:host[data-variant=text] .button:enabled:hover, :host[data-variant=text] .button:hover {
+  background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
+}
+:host[data-variant=text] .button.hover {
+  background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
+}
+:host[data-variant=text] .button:enabled:focus-visible, :host[data-variant=text] .button:focus-visible {
+  outline: none;
+  background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
+}
+:host[data-variant=text] .button.focus {
+  background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
+}
+:host[data-variant=text] .button:enabled:active, :host[data-variant=text] .button:active {
+  background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
+}
+:host[data-variant=text] .button.active {
+  background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
+}
+:host[data-variant=text] .button:disabled, :host[data-variant=text] .button:disabled:active, :host[data-variant=text] .button:disabled:hover, :host[data-variant=text] .button:disabled:focus {
+  pointer-events: none;
+  background-color: transparent;
+  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
+  cursor: default;
+  box-shadow: none;
+}
+:host[data-variant=text] .button:disabled .icon, :host[data-variant=text] .button:disabled:active .icon, :host[data-variant=text] .button:disabled:hover .icon, :host[data-variant=text] .button:disabled:focus .icon {
+  color: color-mix(in srgb, var(--md-sys-color-on-surface) 32%, transparent);
+  background: transparent;
+}
+:host[data-variant=text] .button:disabled .content, :host[data-variant=text] .button:disabled:active .content, :host[data-variant=text] .button:disabled:hover .content, :host[data-variant=text] .button:disabled:focus .content {
+  color: color-mix(in srgb, var(--md-sys-color-on-surface) 32%, transparent);
+  background: transparent;
+}
+:host[data-variant=text] .button.disabled {
+  pointer-events: none;
+  background-color: transparent;
+  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
+  cursor: default;
+  box-shadow: none;
+}
+:host[data-variant=text] .button.disabled .icon {
+  color: color-mix(in srgb, var(--md-sys-color-on-surface) 32%, transparent);
+  background: transparent;
+}
+:host[data-variant=text] .button.disabled .content {
+  color: color-mix(in srgb, var(--md-sys-color-on-surface) 32%, transparent);
+  background: transparent;
+}
+:host[data-variant=text] .button .icon {
+  color: var(--md-sys-color-primary);
+}
+:host[data-variant=text] .button .content {
+  color: var(--md-sys-color-primary);
+}
+
+/*# sourceMappingURL=qd-icon-button.css.map */

projects/qd-design/src/lib/qd-icon-button/qd-icon-button.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../styles/qd_design_system.scss","../../styles/typography/typography.token.scss","../../styles/typography/typography.module.scss","../../styles/design/look_and_feel.scss","../../styles/colors/light-theme.scss","../../styles/colors/dark-theme.scss","qd-icon-button.scss","../../styles/design/overall-design.scss"],"names":[],"mappings":"AAQQ;ACRR;AACE;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACzGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AClIF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AHjDF;EITE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EJpCA;;;AAGF;EACE;IKhBA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;AL3BF;EKrBE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AC/CF;EACE;EACA;EACA;EACA;;ACiDA;EACE;;AAIF;EACE;;;AD9BJ;EHlBE;EACA,gBGkBiB;EH+BjB;EG7BA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EAEE;EACA;EACA;EACA;;;AAIJ;EACE;;AC2BA;EAhFA;EDyDE;;AC2BF;EApFA;EDyDE;;ACYF;EACE;EAtEF;ED8DE;;ACYF;EA1EA;ED8DE;;ACHF;EA3DA;EDmEE;;ACJF;EA/DA;EDmEE;;ACpBF;EACE;EDxCF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;ACiCF;EACE;ED7CF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAuDF;EAEE;;AAGF;EAEE;;;AAIJ;EACE;;ACNA;EDSE;EACA;;ACNF;EDKE;EACA;;ACrBF;EACE;EDwBA;EACA;;ACrBF;EDoBE;EACA;;ACpCF;EDwCE;EACA;;ACrCF;EDoCE;EACA;;ACrDF;EACE;EDxCF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;ACiCF;EACE;ED7CF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAwFF;EAEE;;AAGF;EAEE;;;AAIJ;EACE;EACA;;ACxCA;ED2CE;;ACvCF;EDuCE;;ACtDF;EACE;EDyDA;;ACrDF;EDqDE;;ACpEF;EDwEE;;ACpEF;EDoEE;;ACpFF;EACE;EDuFA;EACA;EAhIF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;ACiCF;EACE;EDkFA;EACA;EAhIF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAyHF;EAEE;;AAGF;EAEE;;;AAIJ;EACE;;ACxEA;ED2EE;;ACvEF;EDuEE;;ACtFF;EACE;EDyFA;;ACrFF;EDqFE;;ACpGF;EDwGE;;ACpGF;EDoGE;;ACpHF;EACE;EDuHA;EA/JF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;ACiCF;EACE;EDkHA;EA/JF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAwJF;EAEE;;AAGF;EAEE","file":"qd-icon-button.css"}

projects/qd-design/src/lib/qd-icon-button/qd-icon-button.html

@@ -0,0 +1,8 @@
+<button [class]="'button'"
+        [disabled]="disabled()"
+        [type]="type()">
+  <qd-icon [iconName]="iconName()!"
+           [size]="24"
+           class="icon">
+  </qd-icon>
+</button>

projects/qd-design/src/lib/qd-icon-button/qd-icon-button.scss

@@ -0,0 +1,189 @@
+@use '../../styles/qd_design_system' as qd;
+
+:host {
+  display: flex;
+  background-color: transparent;
+  height: fit-content;
+  width: fit-content;
+
+  &.disabled {
+    @include qd.disabled {
+
+    }
+  }
+}
+
+@mixin button-disabled {
+  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
+  cursor: default;
+  box-shadow: none;
+
+  .icon {
+    color: color-mix(in srgb, var(--md-sys-color-on-surface) 32%, transparent);
+    background: transparent;
+  }
+
+  .content {
+    color: color-mix(in srgb, var(--md-sys-color-on-surface) 32%, transparent);
+    background: transparent;
+  }
+}
+
+.button {
+  @include qd.flex(row);
+  @include qd.clickable;
+  background-color: transparent;
+  border: 1px solid transparent;
+  border-radius: 20px;
+  box-sizing: border-box;
+  height: 40px;
+  padding: 8px;
+  transition: all 200ms ease-in-out;
+  width: 40px;
+
+  &-icon {
+    background-color: transparent;
+    height: 24px;
+    margin: auto;
+    padding: 0;
+    width: 24px;
+  }
+
+  &-content {
+    @extend .label-large;
+    background-color: transparent;
+    height: fit-content;
+    margin: auto 8px;
+    padding: 0;
+  }
+}
+
+:host[data-variant='filled'] .button {
+  background-color: var(--md-sys-color-primary);
+
+  @include qd.hover {
+    @include qd.elevation-1;
+    background-color: color-mix(in hsl, var(--md-sys-color-primary), var(--md-sys-color-on-primary) 8%);
+  }
+
+  @include qd.focus {
+    @include qd.elevation-1;
+    background-color: color-mix(in hsl, var(--md-sys-color-primary), var(--md-sys-color-on-primary) 12%);
+  }
+
+  @include qd.active {
+    @include qd.elevation-1;
+    background-color: color-mix(in hsl, var(--md-sys-color-primary), var(--md-sys-color-on-primary) 12%);
+  }
+
+  @include qd.disabled {
+    @include button-disabled;
+  }
+
+  .icon {
+    @extend .button-icon;
+    color: var(--md-sys-color-on-primary);
+  }
+
+  .content {
+    @extend .button-content;
+    color: var(--md-sys-color-on-primary);
+  }
+}
+
+:host[data-variant='filled-tonal'] .button {
+  background-color: var(--md-sys-color-secondary-container);
+
+  @include qd.hover {
+    background-color: color-mix(in hsl, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 8%);
+    box-shadow: var(--md-sys-elevation-1);
+  }
+
+  @include qd.focus {
+    background-color: color-mix(in hsl, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 12%);
+    box-shadow: var(--md-sys-elevation-1);
+  }
+
+  @include qd.active {
+    background-color: color-mix(in hsl, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 12%);
+    box-shadow: var(--md-sys-elevation-1);
+  }
+
+  @include qd.disabled {
+    @include button-disabled;
+  }
+
+  .icon {
+    @extend .button-icon;
+    color: var(--md-sys-color-on-secondary-container);
+  }
+
+  .content {
+    @extend .button-content;
+    color: var(--md-sys-color-on-secondary-container);
+  }
+}
+
+:host[data-variant='outlined']  .button {
+  background-color: transparent;
+  border: 1px solid var(--md-sys-color-outline-variant);
+
+  @include qd.hover {
+    background-color:  color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
+  }
+
+  @include qd.focus {
+    background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
+  }
+
+  @include qd.active {
+    background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
+  }
+
+  @include qd.disabled {
+    background-color: transparent;
+    border: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
+    @include button-disabled;
+  }
+
+  .icon {
+    @extend .button-icon;
+    color: var(--md-sys-color-on-surface-variant);
+  }
+
+  .content {
+    @extend .button-content;
+    color: var(--md-sys-color-on-surface-variant);
+  }
+}
+
+:host[data-variant='text'] .button {
+  padding: 0 4px;
+
+  @include qd.hover {
+    background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
+  }
+
+  @include qd.focus {
+    background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
+  }
+
+  @include qd.active {
+    background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
+  }
+
+  @include qd.disabled {
+    background-color: transparent;
+    @include button-disabled;
+  }
+
+  .icon {
+    @extend .button-icon;
+    color: var(--md-sys-color-primary);
+  }
+
+  .content {
+    @extend .button-content;
+    color: var(--md-sys-color-primary);
+  }
+}

projects/qd-design/src/lib/qd-icon-button/qd-icon-button.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { QdIconButton } from './qd-icon-button';
+
+describe('QdIconButton', () => {
+  let component: QdIconButton;
+  let fixture: ComponentFixture<QdIconButton>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [QdIconButton]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(QdIconButton);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/qd-design/src/lib/qd-icon-button/qd-icon-button.ts

@@ -0,0 +1,28 @@
+import {Component, input} from '@angular/core';
+import {QdIcon} from '../qd-icon/qd-icon';
+import {QdIconButtonVariantDirective} from '../../directives/qd-icon-button-variant';
+
+@Component({
+  selector: 'qd-icon-button',
+  imports: [
+    QdIcon
+  ],
+  templateUrl: './qd-icon-button.html',
+  styleUrl: './qd-icon-button.scss',
+  standalone: true,
+  hostDirectives: [
+    {
+      directive: QdIconButtonVariantDirective,
+      inputs: ['variant']
+    }
+  ],
+  host: {
+    '[class.disabled]': 'disabled()',
+  }
+})
+export class QdIconButton {
+  iconName = input<String>();
+  disabled = input<Boolean>(false);
+  type = input<'button' | 'submit' | 'reset'>('button');
+
+}

projects/qd-design/src/lib/qd-icon/qd-icon.ts

@@ -5,6 +5,7 @@ import {NgStyle} from '@angular/common';
   selector: 'qd-icon',
   imports: [NgStyle],
   templateUrl: './qd-icon.html',
+  standalone: true,
   styleUrl: './qd-icon.scss'
 })
 export class QdIcon {