{ "$schema": "newtil-component-spec/1", "package": "@newtil/materials", "version": "0.4.27", "generatedAt": "2026-09-19", "conventions": { "option": "클래스 `그룹:값` — 예 `btn:outlined`, `btn-size:sm`. 값이 없는 옵션은 flags. slotOptions 는 슬롯 요소에 붙이는 옵션 (예 card-media 에 `card-media:square`).", "variable": "컴포넌트 요소 자신에 준다: 인라인 style 또는 `.scope .m3-x { --x-*: … }`. 부모 요소의 style 은 상속되지 않는다.", "order": "타입(class) → 옵션(options/flags) → 변수(variables). 변수는 옵션으로 안 될 때만.", "tokens": "색·간격·모서리·글꼴은 design-tokens 변수만. tokens.groups 에 없는 이름은 존재하지 않는다.", "brand": "브랜드색은 씨앗 하나 `--brand` (design-tokens 0.2.3). 램프와 on-primary 는 계산된다. 회색조는 --_hue-gray-* 를 hex 로." }, "components": [ { "name": "badge", "class": "m3-badge", "description": "알림 수·상태를 작은 원이나 알약에 담는다. 아이콘 모서리에 얹거나(기본) 글자 옆에 인라인으로.\nM3 spec: small dot (6dp) or large with number (16dp height)\nPosition: top-right corner of parent (needs relative parent)\n사용법:\n
\n ", "slots": [], "slotOptions": {}, "options": { "badge": [ "dot", "inline" ], "badge-color": [ "danger", "neutral", "primary", "secondary", "success", "warning" ] }, "flags": [], "variables": { "--badge-background": { "default": "var(--color-danger)" }, "--badge-color": { "default": "var(--color-on-danger)" }, "--badge-font-size": { "default": "0.6875rem" }, "--badge-font-weight": { "default": "var(--font-weight-medium)" }, "--badge-min-width": { "default": "1rem" }, "--badge-height": { "default": "1rem" }, "--badge-padding": { "default": "0 0.25rem" }, "--badge-border-radius": { "default": "var(--radius-full)" }, "--badge-position": { "default": "absolute" }, "--badge-top": { "default": "-0.25rem" }, "--badge-right": { "default": "-0.25rem" } }, "usage": "
\n \n 3\n
\n\n
\n \n 99+\n
" }, { "name": "bottom-sheet", "class": "m3-bottom-sheet", "description": "화면 아래에서 올라오는 시트. 모바일의 선택지·필터·상세 미리보기.\nM3 spec: surface container, rounded top corners (28dp), drag handle\nTypes: standard (non-modal, default), modal (with scrim)\nHidden by default, shown with sheet-open.\n사용법:\n
", "slots": [ "sheet-content", "sheet-drag-handle", "sheet-headline" ], "slotOptions": {}, "options": { "sheet": [ "modal" ] }, "flags": [ "sheet-open" ], "variables": { "--sheet-background": { "default": "var(--color-surface)" }, "--sheet-border-radius": { "default": "1.75rem 1.75rem 0 0" }, "--sheet-max-height": { "default": "80vh" }, "--sheet-z-index": { "default": "var(--z-modal)" }, "--sheet-box-shadow": { "default": "var(--shadow-lg)" }, "--sheet-padding": { "default": "0" }, "--sheet-border": { "default": "none" }, "--sheet-color": { "default": "var(--color-text)" }, "--sheet-bottom": { "default": "0" }, "--sheet-left": { "default": "0" }, "--sheet-width": { "default": "100%" }, "--sheet-handle-width": { "default": "2rem" }, "--sheet-handle-height": { "default": "0.25rem" }, "--sheet-handle-color": { "default": "var(--color-border)" }, "--sheet-handle-border-radius": { "default": "var(--radius-full)" }, "--sheet-handle-margin": { "default": "1rem auto 0" }, "--sheet-headline-font-size": { "default": "1rem" }, "--sheet-headline-font-weight": { "default": "var(--font-weight-medium, 500)" }, "--sheet-headline-color": { "default": "var(--color-text)" }, "--sheet-headline-line-height": { "default": "1.5rem" }, "--sheet-headline-margin": { "default": "0 0 0.5rem" }, "--sheet-content-padding": { "default": "1rem 1.5rem 1.5rem" }, "--sheet-content-color": { "default": "var(--color-text-muted)" }, "--sheet-content-font-size": { "default": "0.875rem" }, "--sheet-content-line-height": { "default": "1.25rem" }, "--sheet-scrim-color": { "default": "var(--color-scrim)" }, "--sheet-scrim-z-index": { "default": "var(--z-overlay)" }, "--sheet-transition": { "default": "transform var(--duration-normal) var(--ease-out)" } }, "usage": "
\n
\n
\n

시트 제목

\n

시트 본문 내용입니다.

\n
\n
" }, { "name": "breadcrumb", "class": "m3-breadcrumb", "description": "현재 위치 경로. 홈 / 메뉴 / 커피 / 카페라떼. 구분 기호는 CSS 가 그린다.\n현재 위치 경로: 홈 / 메뉴 / 커피 / 카페라떼. M3 스펙에는 없다.\n구분 기호는 CSS 가 그린다 — 마크업에 \"/\" 를 넣지 않는다.\n사용법:\n