@if (show()) {
  <div class="fixed inset-0 z-[var(--z-modal)] flex" [class]="containerClasses()">
    <div class="absolute inset-0 bg-black/50" [class]="maskClasses()" (click)="onMaskClick()"></div>
    <!-- ⚠️ tabindex="-1" + (keydown) 是焦点管理的一半:面板要能被程序化 focus,
         且 Tab 必须在面板内部回环(见 popup.ts 的 onTrapKeydown) -->
    <div
      #panel
      tabindex="-1"
      [class]="panelClasses()"
      role="dialog"
      aria-modal="true"
      (keydown)="onTrapKeydown($event)"
    >
      @if (closeable()) {
        <button
          type="button"
          class="absolute right-4 top-4 z-10 inline-flex h-10 w-10 items-center justify-center rounded-full text-muted transition-colors hover:text-ink active:bg-surface-active"
          (click)="onCloseClick()"
          aria-label="关闭"
        >
          <i class="fa-solid fa-xmark text-lg" aria-hidden="true"></i>
        </button>
      }
      <ng-content />
    </div>
  </div>
}