File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
08-14
08-14
08-14
08-14
// FoxSelectOption — 시안: 통합관리자페이지 디자인시스템(KE9UILWhB8qTBe14uXUn4F) Figma select (컴포넌트 세트 111:272)
//
// 셀렉트가 열렸을 때 뜨는 옵션 목록(리스트박스)이다. 항목 하나는 `fox-select-option-item`이
// 담당한다 — 이 파일은 떠 있는 판때기(위치·테두리·그림자·스크롤)만 책임진다.
//
// 마크업 계약 (React 밖 소비자용):
// <ul class="fox-select-option" id="sel-listbox" role="listbox">
// <li class="fox-select-option-item" …>…</li>
// </ul>
//
// ⚠️ 스스로 위치를 잡지 못한다 — `position: absolute`라서 **위치 기준이 되는 조상**
// (`position: relative` 등)이 있어야 한다. `fox-select` 안에서는 `fox-select__control`이
// 그 역할을 한다. 단독으로 쓸 때는 감싸는 쪽이 기준을 만들어야 한다.
//
// ⚠️ 그 대가로 `overflow: hidden`인 조상 안에서는 잘린다(테이블 셀·모달·스크롤 영역).
// 그런 자리에 놓아야 하면 `popover` 속성으로 top layer에 올려야 한다 — DOM 위치는 그대로라
// ARIA 연결과 이벤트 버블링은 유지되고, 대신 기준 요소와의 위치를 anchor positioning이나
// 좌표 계산으로 다시 잡아야 한다. React 포털은 이 패키지에선 쓸 수 없다(프레임워크 무관).
//
// 크기(`size`)에 반응하지 않는다 — 어느 크기에서 열려도 목록은 같은 모양이어야 한다.
//
// ⚠️ TODO: 스크롤 높이(`max-block-size: 24rem` = 240px)는 아직 확정이 아니다. 옵션이 많을
// 때의 상한이 필요해 임시로 잡은 값이고, 시안이 변수로 바인딩하지 않았으며 토큰 스케일에도
// 240이 없다. 확정되면 값을 갈고 — 토큰이 생기면 `fox.*()`로 바꾸고 — 아래 승인 목록에서
// 이 항목을 뺀다.
//
// 토큰이 아닌 값(사용자 승인):
// - `max-block-size: 24rem`(240px): 위 TODO 참고 — 확정 전까지만 유효하다.
// - overflow / list-style / z-index: 구조 규칙.
@use "@fox/styles/abstracts" as fox;
.fox-select-option {
position: absolute;
inset-inline: 0;
inset-block-start: calc(100% + #{fox.gap(2)});
z-index: 10;
margin: 0;
padding: fox.padding(3);
// ⚠️ 확정 전 임시값 — 파일 상단 TODO 참고.
max-block-size: 24rem;
overflow-y: auto;
list-style: none;
border: fox.border(1) solid fox.color(border-neutral-default);
border-radius: fox.form(radius-md);
background: fox.color(surface-neutral-default);
// 시안이 그림자 색을 테마 토큰이 아니라 `alpha/black10` 원시값에 직접 물려 놓았다.
// 그래서 다크 모드에서도 검은 그림자다 — 반전시키려면 `alpha-default-inverse10`이다.
box-shadow: fox.shadow(location1) fox.shadow(location1) fox.shadow(blur1) 0
fox.primitive(alpha-black10);
}