@if (visible()) {
  <div
    role="alert"
    [class]="'flex items-start gap-3 rounded-lg border border-l-4 p-4 ' + typeClass().container"
  >
    @if (showIcon()) {
      <i
        [class]="'fa-solid mt-0.5 text-base ' + typeClass().icon + ' ' + icons[type()]"
        aria-hidden="true"
      ></i>
    }
    <div class="min-w-0 flex-1">
      @if (title()) {
        <p class="text-sm font-semibold text-ink">{{ title() }}</p>
      }
      @if (description()) {
        <p class="mt-0.5 text-sm text-muted">{{ description() }}</p>
      }
      <ng-content />
    </div>
    @if (closable()) {
      <button
        type="button"
        class="-m-1 shrink-0 rounded-md p-1 text-muted transition-colors hover:bg-surface-hover hover:text-ink"
        (click)="close()"
        aria-label="关闭"
      >
        <i class="fa-solid fa-xmark" aria-hidden="true"></i>
      </button>
    }
  </div>
}