carbon-components-svelte

Carbon Components Svelte는 IBM이 유지 관리하는 오픈 소스 디자인 시스템인 Carbon Design System을 구현한 Svelte 프레임워크용 컴포넌트 라이브러리입니다. README에 따르면, 입력창부터 데이터 테이블까지 90개 이상의 컴포넌트, 5가지 내장 테마(라이트 2종, 다크 3종), props, events, slots를 아우르는 완전한 타입 지정 TypeScript API를 제공하며, 키보드 및 스크린 리더 지원을 통해 WCAG 2.1 AA 접근성을 목표로 합니다. 스타일링은 사전 컴파일된 CSS로 로드하거나 플래그십 carbon-components 패키지에서 SCSS를 직접 임포트할 수 있으며, README에서는 사용하지 않는 컴포넌트 스타일을 제거할 수 있어 후자가 더 성능이 좋다고 설명합니다. white(기본 라이트), g10(라이트), g80, g90, g100(다크)의 5가지 테마 스타일시트가 제공되며, CSS 사용자 정의 속성을 사용하여 5가지를 모두 포함하는 all.css 번들도 제공됩니다. 동적 테마 설정은 all.css를 임포트하고 마크업이나 스크립트에서 html 요소에 테마 속성을 설정하여 수행하며, 반응형 전환을 위한 Theme 컴포넌트도 사용할 수 있습니다. 컴포넌트는 Svelte 스크립트 블록 내에서 패키지로부터 임포트하며, README는 컴포넌트 API 세부 정보를 위해 프로젝트 문서 사이트를 안내합니다. 더 넓은 생태계에는 size prop을 통해 4가지 크기(16, 20, 24, 32 픽셀) 중 선택 가능한 2,700개 이상의 아이콘을 포함한 Carbon Icons Svelte, 빈 상태, 온보딩, 히어로 섹션 및 기능 강조용으로 설계된 1,500개 이상의 일러스트 픽토그램(기본 64 픽셀)을 포함한 Carbon Pictograms Svelte, 25개 이상의 d3 기반 차트를 포함한 Carbon Charts Svelte, 그리고 선택적 개발 의존성으로 설명되는 Carbon Preprocess Svelte가 포함됩니다. Carbon Preprocess Svelte는 두 가지 최적화를 제공합니다. optimizeImports는 components, icons, pictograms 패키지의 배럴 임포트를 소스 Svelte 파일 경로로 재작성하는 Svelte 전처리기이며, README에 따르면 이는 IDE의 자동 완성 기능을 유지하면서 개발 및 프로덕션 컴파일 시간을 단축할 수 있습니다. optimizeCss는 빌드 시 사용하지 않는 Carbon 스타일을 제거하는 Vite 및 Rollup 플러그인입니다. README는 빌드된 스타일시트가 약 606kB에서 약 53kB로 줄어드는 예시를 보여주며, 라이브러리 버전 0.85.0 이상이 필요하다고 명시합니다. Vite, SvelteKit, Rollup, Webpack에 대한 설정 스니펫이 제공되며, 저장소에 각 환경에 대한 예제 프로젝트가 포함되어 있습니다. TypeScript 정의는 sveld로 생성됩니다. 문서는 LLM 친화적인 일반 텍스트로도 게시됩니다. 각 항목이 컴포넌트별 Markdown 문서로 연결되는 llms.txt 컴포넌트 인덱스와 전체 문서를 포함하는 llms-full.txt 파일이 제공되며, URL 끝에 .md를 추가하여 모든 컴포넌트의 Markdown 문서를 확인할 수 있습니다. 이 프로젝트는 Apache 2.0 라이선스 하에 있으며 기여 가이드라인과 변경 로그를 제공합니다. README는 이 패키지가 CI 환경에서 비식별 및 익명화된 메트릭 데이터를 수집하기 위해 IBM Telemetry를 사용하며, 의존성으로 설치하는 것이 해당 수집에 동의하는 것임을 밝히고, 거부 방법 및 수집 데이터 세부 정보에 대해 IBM 문서를 안내합니다.