Bits UI 2.19.5 Checkbox, Accordion, Dialog와 Svelte 5.57.1. 모든 시각적 스타일은 독자적으로 제작했습니다. · 구현 레퍼런스
02
Bits UI 디자인 시스템 디자인 참조
Bits UI 2.19.5 및 Svelte 5.57.1. Bits UI는 헤드리스입니다. 이 예제에 포함된 모든 --app-* 색상, 타이포그래피 및 간격 값은 독자적인 명시적 구성으로, 공식 Bits UI 디자인 토큰이 아닙니다. 네이티브 데이터 속성과 구성 요소 속성은 별도로 표시했습니다.
체크리스트는 $state를 사용해 개별 답변, 확장된 섹션 ID, 대화상자 표시 여부를 관리합니다. $derived로 계산한 완료 항목 수는 화면에 표시되는 진행 상황과 전체 선택 체크박스에 반영됩니다. 따라서 단일 Svelte 모델에서 기준 데이터를 관리하고, Bits UI는 각 구성 요소의 네이티브 상호작용을 제공합니다.
Checkbox, Accordion, Dialog는 각자의 파트로 조합됩니다. 검토 대화상자가 체크리스트 답변을 관리할 필요도, 아코디언이 닫힐 때 답변을 지울 필요도 없습니다. 이러한 분리는 여러 섹션으로 구성된 양식을 만드는 데 유용한 출발점입니다. 인터페이스에서 보이는 파트가 바뀌어도 모델은 그대로 유지됩니다.
이 예제는 Svelte 5 룬을 사용합니다. $state는 그룹, 확장된 섹션, 대화상자 표시 여부 및 저장 상태에 사용하고, $derived는 완료 항목 수를 계산합니다. Bits UI 2.19.5를 직접 가져옵니다. 이 독자적인 시각 스타일을 적용하는 데 Tailwind 플러그인, 테마 공급자 또는 아이콘 라이브러리는 필요하지 않습니다.
전체 App.svelte 및 style.css 파일은 기본 Vite Svelte 프로젝트에서 작동합니다. 진입점에서는 이전 방식인 new App 생성자 대신 Svelte의 mount를 사용합니다. 예제를 다른 곳으로 옮길 때는 구성 요소의 룬 문법과 Bits UI 2.19.5 의존성을 함께 유지하세요. 여기에 표시된 바인딩과 콜백은 이전 Svelte 구성 요소 API가 아닙니다.
6개의 불리언 확인 항목이 세 그룹에 나뉘어 있습니다. 6개 모두 true일 때 전체 선택 컨트롤이 선택 상태가 되고, 1개에서 5개까지 true일 때 혼합 상태가 됩니다. onCheckedChange 콜백은 모든 확인 항목을 업데이트하므로 혼합 상태를 별도 플래그로 저장하지 않고 계산해 도출합니다. 덕분에 플래그가 실제 상태와 어긋나지 않습니다.
개별 컨트롤은 작은 변경 함수를 호출해 모델을 업데이트하고 저장된 피드백을 무효화합니다. 확인 항목을 하나 선택하면 렌더링된 네이티브 전체 선택 체크박스에 aria-checked=mixed가 표시됩니다. 스타일시트는 data-state=checked 및 data-state=indeterminate에 반응하므로 동작과 표현이 동일한 네이티브 상태에 연결됩니다.
첫 번째 포커스 표시 확인 항목을 선택하고 전체 선택 컨트롤의 대시를 살펴보세요.
Open Review 체크리스트를 열고 ‘검토 완료 저장’이 비활성화되어 있는지 확인하세요.
Accordion.Root는 type=multiple과 바인딩된 확장 그룹 ID 배열을 사용합니다. 키보드 흐름에서는 처음에 펼쳐져 있고, Form 보정 섹션과 Result 피드백 섹션은 각각 독립적으로 열 수 있습니다. 확인 항목 값은 부모 상태에 저장되므로 섹션을 접어도 지워지지 않습니다.
각 트리거에는 완료한 항목 수가 표시되므로 콘텐츠를 접어도 진행 상황을 확인할 수 있습니다. 기본 Header, Trigger, Content 파트는 예상되는 관계와 키보드 동작을 유지합니다. 더하기 표시는 트리거의 data-state에 따라 회전하며, 별도의 클릭 핸들러로 확장을 제어하지 않고 모션 감소 설정을 따릅니다.
검토 화면에는 Dialog.Root, Trigger, Portal, Overlay, Content, Title, Description, Close를 사용합니다. Title과 Description은 실제 기본 파트이므로 Bits UI에서 두 요소의 접근 가능한 관계를 설정할 수 있습니다. Portal은 오버레이를 체크리스트 패널의 일반 흐름 바깥에 배치합니다.
콘텐츠에는 반응형 최대 너비를 설정하고, 오버레이에만 뷰포트 기준 최대 높이를 적용합니다. 검토 내용이 길어지면 스크롤할 수 있습니다. Escape 키로 대화상자를 닫아도 체크리스트는 초기화되지 않습니다. 오버레이가 열릴 때 트리거를 제거하지 말고 포커스가 돌아갈 대상으로 유지하세요.
Bits UI 디자인 시스템: 애플리케이션의 시각적 규칙을 명확하고 재사용 가능하게 만드세요
애플리케이션의 시각적 규칙을 명시하고 재사용하기
CSS에서는 네이티브 체크 상태와 불확정 상태를 같은 동작 역할에 연결하되, 각각 다른 글리프를 사용합니다. 별도의 포커스 역할은 키보드 위치를 나타내므로 컨트롤이 선택된 상태를 계속 표시하면서 다음 키보드 동작이 적용될 위치도 함께 보여줄 수 있습니다.
명명된 간격 척도는 4, 8, 12, 16, 24, 32픽셀입니다. 패널에는 데스크톱에서 24픽셀, 좁은 화면에서 16픽셀 간격을 적용합니다. 사양 표에는 이러한 구체적인 선택을 사용자 정의 설정으로 문서화해 독자가 패키지에서 보장하는 값으로 오해하지 않고 그대로 재현하거나 바꿀 수 있도록 합니다.
체크리스트는 독자가 표시한 항목을 기록합니다. 다른 페이지를 검사하거나 키보드 테스트를 실행하지 않으며, 접근성 적합성을 확인하지도 않습니다. 여섯 가지 항목이 실제 접근성 동작을 다루므로 소개 문구와 검토 설명에서 이 범위를 분명히 밝혀야 합니다.
여섯 항목을 모두 표시할 때까지 저장 버튼을 비활성화합니다. 저장 문구에는 독자가 여섯 항목을 모두 표시했으며 결과가 로컬에 저장된다는 점을 알립니다. 누락된 항목을 확인하기 위해 부분 검토를 열 수는 있지만, 검토 완료 메시지는 표시되지 않습니다. 이러한 구분으로 예제의 상태 전환을 명확하게 유지합니다.
항목을 하나씩 변경하거나 전체 변경하면 저장 상태가 초기화됩니다. 따라서 체크 항목을 해제한 뒤에도 완료 확인 메시지가 남아 있는 상황을 방지합니다. 모두 지우기 동작은 처음에 펼쳐져 있던 섹션을 다시 펼치고 검토 대화상자를 닫아 관련 상태를 모두 알려진 시작 상태로 되돌립니다.
상태 영역은 오버레이 바깥에 있으므로 대화상자를 닫은 뒤에도 저장 메시지가 문서에 남습니다. 메시지는 페이지의 로컬 상태를 설명하며 보고서를 제출했다고 암시하지 않습니다. 새로고침하면 체크리스트가 초기화되며, 자체 완결형 데모에 적합한 동작입니다.
모든 체크박스에는 고유 ID와 연결된 화면 표시 레이블이 있습니다. 체크 상태와 불확정 상태는 네이티브 컨트롤로 표현하고, 체크 표시와 대시는 장식 요소로 처리합니다. 일부만 선택된 상태가 일반적인 미선택 항목으로 안내되지 않도록 Boolean 체크 값과 파생된 불확정 값을 모두 전체 선택 컨트롤에 연결하세요.
Dialog.Title과 Dialog.Description은 네이티브 구조를 통해 검토 화면의 이름과 설명을 제공합니다. Portal은 오버레이를 아코디언 레이아웃에서 분리하고, Dialog.Close는 명시적인 닫기 동작을 제공합니다. 오버레이가 닫힌 뒤에도 저장 결과가 유지되도록 상태 영역을 바깥에 두어 대화상자 콘텐츠와 함께 사라지지 않게 합니다.
$state/$derived 모델, 제어형 체크박스, Portal 기반 검토 대화상자로 구성한 네이티브 Bits UI 구조입니다.
svelte
<script>
import {Accordion,Checkbox,Dialog} from 'bits-ui';
let groups=$state([{id:'keyboard',name:'Keyboard flow',description:'Move through the interface without a pointer.',checks:[{id:'focus',label:'Every action has a visible focus indicator.',done:false},{id:'order',label:'Focus follows the visual reading order.',done:false}]},{id:'forms',name:'Form correction',description:'Make a mistake and recover from it.',checks:[{id:'labels',label:'Each input has a persistent visible label.',done:false},{id:'errors',label:'Errors identify the field and explain the correction.',done:false}]},{id:'feedback',name:'Result feedback',description:'Confirm that the outcome is understandable.',checks:[{id:'status',label:'A status message describes the completed action.',done:false},{id:'color',label:'Meaning remains clear without color alone.',done:false}]}]);
let expanded=$state(['keyboard']),open=$state(false),saved=$state(false);
const complete=$derived(groups.reduce((sum,g)=>sum+g.checks.filter(c=>c.done).length,0));
function change(check,value){check.done=value;saved=false}
function all(value){groups.forEach(g=>g.checks.forEach(c=>c.done=value));saved=false}
function reset(){all(false);expanded=['keyboard'];open=false}
</script>
<main class="check-shell"><header><p class="eyebrow">INTERFACE REVIEW · MANUAL CHECKLIST</p><h1>Check the experience between the screens.</h1><p>Work through six practical checks, then review what you have marked. This is a personal checklist, not an automated accessibility test.</p></header><div class="check-layout"><section class="check-panel"><div class="bulk"><Checkbox.Root id="all-checks" checked={complete===6} indeterminate={complete>0&&complete<6} onCheckedChange={all} class="checkbox"><span aria-hidden="true">{complete===6?'✓':complete>0?'−':''}</span></Checkbox.Root><label for="all-checks">Mark all checks</label><span class="count">{complete}/6</span></div><Accordion.Root type="multiple" bind:value={expanded} class="accordion">{#each groups as group}<Accordion.Item value={group.id} class="accordion-item"><Accordion.Header class="accordion-heading"><Accordion.Trigger class="accordion-trigger"><span>{group.name}<small>{group.checks.filter(c=>c.done).length} of 2 checked</small></span><span class="plus" aria-hidden="true">+</span></Accordion.Trigger></Accordion.Header><Accordion.Content class="accordion-content"><p class="group-description">{group.description}</p>{#each group.checks as check}<div class="check-row"><Checkbox.Root id={check.id} checked={check.done} onCheckedChange={value=>change(check,value)} class="checkbox"><span aria-hidden="true">{check.done?'✓':''}</span></Checkbox.Root><label for={check.id}>{check.label}</label></div>{/each}</Accordion.Content></Accordion.Item>{/each}</Accordion.Root><Dialog.Root bind:open><Dialog.Trigger class="primary">Review checklist</Dialog.Trigger><Dialog.Portal><Dialog.Overlay class="overlay"/><Dialog.Content class="dialog"><Dialog.Title class="dialog-title">Your review snapshot</Dialog.Title><Dialog.Description class="dialog-description">{complete} of 6 checks are marked. Saving records your own review state; it does not certify the interface.</Dialog.Description><ul class="review-summary">{#each groups as group}<li><strong>{group.name}</strong><span>{group.checks.filter(c=>c.done).length} / 2</span></li>{/each}</ul>{#if complete<6}<p class="remaining">Return to the checklist to finish the remaining {6-complete} checks.</p>{/if}<div class="dialog-actions"><Dialog.Close class="secondary">Back to checks</Dialog.Close><button class="primary" disabled={complete<6} onclick={()=>{saved=true;open=false}}>Save completed review</button></div></Dialog.Content></Dialog.Portal></Dialog.Root><button class="reset" onclick={reset}>Clear all checks</button><p class="result" role="status">{saved?'Completed review saved locally. All six checks were marked by you.':'Progress stays in this preview until you reload.'}</p></section><aside class="check-notes"><div class="focus-art" aria-hidden="true"><span></span><i></i><b></b></div><p class="eyebrow">WHAT TO LOOK FOR</p><h2>Make the next action clear.</h2><p>A good check leaves evidence: where focus moved, what an error said, or how a result was announced.</p><dl><div><dt>Keyboard</dt><dd>Tab, Shift+Tab, Enter and Escape should support the relevant task.</dd></div><div><dt>Correction</dt><dd>Keep the user’s input and point to a specific next step.</dd></div><div><dt>Feedback</dt><dd>Describe the outcome in words as well as visual styling.</dd></div></dl></aside></div></main>
Svelte 5.57.1에서 Bits UI 2.19.5를 검증했습니다. 전체 사용자 정의 스타일시트가 필요하며, Bits UI는 기본 색상이나 페이지 레이아웃을 제공하지 않습니다.
자바스크립트
// npm create vite@latest bits-review -- --template svelte
// cd bits-review && npm install
// npm install [email protected][email protected]
// Save the complete examples as src/App.svelte and src/style.css.
// src/main.js:
import {mount} from 'svelte';
import App from './App.svelte';
import './style.css';
mount(App, {target:document.querySelector('#app')});
// index.html: <div id="app"></div><script type="module" src="/src/main.js"></script>
// npm run dev
프로젝트를 위한 프롬프트
에이전트 프롬프트
Bits UI 2.19.5와 Svelte 5를 사용해 제공된 수동 인터페이스 검토를 구현하세요. 세 개의 Accordion 섹션에 체크 항목 여섯 개를 배치하고, 개별 답변을 바탕으로 전체 선택의 체크 상태와 불확정 상태를 계산합니다. 섹션을 접어도 답변은 유지하세요. 전체 Dialog 파트로 검토 화면을 구성해 미완료 상태도 확인할 수 있게 하되, 여섯 항목을 모두 표시하기 전까지 저장 버튼은 비활성화하세요. 답변이 바뀌면 저장된 피드백을 무효화하고, 모두 지우기를 실행하면 처음의 확장 상태를 복원하고 검토 화면을 닫으세요. CSS 전체를 포함하고, 결과는 자동화된 접근성 인증이 아닌 독자가 표시한 로컬 점검 결과라고 설명하세요.
05
Bits UI 디자인 시스템 출처 및 범위
Svelte 5.57.1에서 Bits UI 2.19.5를 사용합니다. 애플리케이션 토큰과 일러스트레이션은 사용자 정의 항목입니다. 이는 로컬 상태를 사용하는 수동 체크리스트이며, 자동화된 접근성 감사나 인증이 아닙니다.
