네이티브 플랫폼

Todae는 브라우저를 다시 구현하지 않고 그 위에 만들어집니다. 아래 기능을 JavaScript 대체 구현 없이 사용하므로, 이 기능들이 있는 브라우저가 곧 Todae가 지원하는 브라우저입니다. 별도의 지원 매트릭스는 없습니다.

• CSS 앵커 포지셔닝: 팝오버와 툴팁을 트리거 옆에 배치하고, position-try-fallbacks로 뷰포트 가장자리에서 뒤집습니다. 없으면: 표면이 트리거 옆에 배치되지 않고 뷰포트 왼쪽 위 모서리 근처에 놓입니다.
• Popover API: Popover.Root와 Tooltip.Root를 최상위 레이어에 표시합니다. Todae에 필수입니다.
• <dialog>와 showModal(): Dialog.Root와 BottomSheet.Root의 최상위 레이어, ::backdrop, inert가 되는 뒤 페이지, Escape, <form method="dialog">에 씁니다. Todae에 필수입니다. 스크림은 ::backdrop에서 Todae의 사용자 정의 속성을 읽으며, 현재 브라우저에서는 ::backdrop이 다이얼로그에서 이를 상속합니다. 상속하지 않는 오래된 엔진에서는 스크림 색이 보이지 않습니다.
• closedby: dismissOnEscape={false}인 BottomSheet에서 브라우저가 Escape를 무시하게 합니다. 없으면: Escape가 여전히 닫기를 요청하고, Todae가 시트를 열린 채로 둡니다.
• inert: 칩 측정용 사본을 숨깁니다. Todae에 필수입니다.
• <details name>: 하나만 열리는 아코디언. 없으면: 한 그룹의 여러 디스클로저가 동시에 열릴 수 있습니다.
• ::details-content: 디스클로저 내용을 서서히 나타냅니다. 없으면: 내용이 바로 나타납니다.
• field-sizing: content: autoGrow를 쓴 Field.Textarea. 없으면: textarea가 rows 높이를 유지하고 스크롤됩니다.
• :has(): Field와 Chip의 포커스 링과 장식 요소 레이아웃, Alert의 열 배치, 모달 <dialog>가 열려 있는 동안 페이지 스크롤 멈춤(:modal과 함께). Todae에 필수입니다.
• scrollbar-gutter: 모달 <dialog>가 페이지 스크롤을 멈추는 동안 스크롤바 자리를 유지합니다. 없으면: 모달이 열릴 때 페이지가 스크롤바 너비만큼 밀립니다.
• 캐스케이드 레이어: Todae의 리셋, 토큰, 컴포넌트와 회사 테마의 순서를 정합니다. Todae에 필수입니다.
• 상대 색상 문법: color.bg.selected처럼 토큰에서 만든 반투명 색상. Todae에 필수입니다.
• @starting-style: Dialog 진입 전환. 없으면: 다이얼로그가 전환 없이 나타납니다.
• dvh 단위: 모바일 브라우저 UI를 따르는 Dialog와 BottomSheet 높이. Todae에 필수입니다.

가장 중요한 동작은 실제 브라우저(Playwright를 통한 Chromium)에서 테스트합니다. 겹쳐 쌓인 오버레이 사이의 Escape 순서, 모달 포커스와 복원, 뷰포트 가장자리에서의 뒤집기, 칩 오버플로 측정, 바텀 시트 드래그입니다. 모든 문서 예시도 그곳에서 axe로 검사합니다.