@if (open()) {
  <div class="fixed inset-0" [style.z-index]="zIndex()">
    @if (mask()) {
      <div class="absolute inset-0 bg-black/50 animate-fade-in" (click)="close()"></div>
    }
    <div
      #panel
      tabindex="-1"
      role="dialog"
      aria-modal="true"
      [attr.aria-label]="title() || null"
      [class]="panelClasses()"
      (keydown)="onTrapKeydown($event)"
      [style.width]="sizeWidth()"
      [style.height]="sizeHeight()"
      class="outline-none"
    >
      <div class="flex items-center justify-between border-b border-edge px-5 py-4">
        <h3 class="text-base font-semibold text-ink">{{ title() }}</h3>
        @if (closable()) {
          <button
            type="button"
            class="inline-flex h-8 w-8 items-center justify-center rounded-lg 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>
      <div class="flex-1 overflow-y-auto px-5 py-5 text-sm leading-relaxed text-ink-2">
        <ng-content />
      </div>
    </div>
  </div>
}