Chỉ báo focus

/* src/index.css — @layer base: áp cho MỌI phần tử nhận focus bằng bàn phím */
:focus-visible {
  outline: 2px solid var(--colorStrokeFocus2); /* đen ở light, trắng ở dark */
  outline-offset: 1px;
  border-radius: var(--borderRadiusMedium);
}

{/* Phần tử tự viết tự có vòng focus nhờ base style — chỉ cần tabIndex và role đúng */}
<div
  role="button"
  tabIndex={0}
  onClick={open}
  onKeyDown={(e) => {
    if (e.key === "Enter" || e.key === " ") {
      e.preventDefault();
      open();
    }
  }}
  className="flex items-center gap-2 rounded-medium p-3 hover:bg-subtle-hover"
>
  …
</div>

{/* Trong khung overflow-hidden (list, card bo góc): kéo outline vào trong để không bị cắt */}
<a href="/files/42" className="block px-3 py-2 hover:bg-subtle-hover focus-visible:-outline-offset-2">…</a>

{/* Muốn đổi kiểu viền thì THAY bằng một chỉ báo tương đương, không xoá */}
<button className="outline-none focus-visible:ring-2 focus-visible:ring-stroke-focus focus-visible:ring-offset-1">…</button>

function RenameDialog() {
  const nameRef = React.useRef<HTMLInputElement>(null);
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button>Đổi tên</Button>
      </DialogTrigger>
      <DialogSurface
        // Mặc định Radix focus phần tử đầu tiên (nút X). Chuyển focus vào ô cần nhập:
        onOpenAutoFocus={(e) => {
          e.preventDefault();
          nameRef.current?.select();
        }}
      >
        <DialogTitle>Đổi tên tệp</DialogTitle>
        <DialogContent>
          <Field label="Tên mới">
            <Input ref={nameRef} defaultValue="Báo cáo quý 3" />
          </Field>
        </DialogContent>
        <DialogActions>
          <DialogClose asChild>
            <Button>Huỷ</Button>
          </DialogClose>
          <DialogClose asChild>
            <Button appearance="primary">Lưu</Button>
          </DialogClose>
        </DialogActions>
      </DialogSurface>
    </Dialog>
  );
}
{/* Đóng bằng Esc, nút X hay Huỷ → focus tự quay về nút "Đổi tên" */}