@newtil/materials 0.4.10 → 0.4.12

package/dist/spec.json

@@ -1,10 +1,10 @@
 {
  "$schema": "newtil-component-spec/1",
  "package": "@newtil/materials",
- "version": "0.4.10",
+ "version": "0.4.12",
  "generatedAt": "2026-09-17",
  "conventions": {
-  "option": "클래스 `그룹:값` — 예 `btn:outlined`, `btn-size:sm`. 값이 없는 옵션은 flags.",
+  "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 에 없는 이름은 존재하지 않는다.",
@@ -16,6 +16,7 @@
    "class": "m3-badge",
    "description": " ====== M3 Badge\nM3 spec: small dot (6dp) or large with number (16dp height)\nPosition: top-right corner of parent (needs relative parent)\n사용법:\n  <div style=\"position: relative; display: inline-flex;\">\n    <i class=\"m3-icon icon:mail\"></i>",
    "slots": [],
+   "slotOptions": {},
    "options": {
     "badge": [
      "dot",
@@ -77,6 +78,7 @@
     "sheet-drag-handle",
     "sheet-headline"
    ],
+   "slotOptions": {},
    "options": {
     "sheet": [
      "modal"
@@ -178,6 +180,7 @@
    "class": "m3-btn",
    "description": " ====== M3 Button (Material Design 3 spec-aligned)\nSize :  xs | sm (default) | md | lg | xl\nShape:  round (default) | square\nType :  filled (default) | elevated | tonal | outlined | text\nState:  enabled (default) | disabled | hover | focus | active\nM3 spec source: material-components/material-web tokens",
    "slots": [],
+   "slotOptions": {},
    "options": {
     "btn-state": [
      "active",
@@ -376,6 +379,15 @@
     "card-subhead",
     "card-titles"
    ],
+   "slotOptions": {
+    "card-media": {
+     "card-media": [
+      "square",
+      "video",
+      "wide"
+     ]
+    }
+   },
    "options": {
     "card-state": [
      "disabled",
@@ -524,6 +536,12 @@
     "--card-media-width": {
      "default": "auto"
     },
+    "--card-media-ratio": {
+     "default": "auto"
+    },
+    "--card-media-badge-offset": {
+     "default": "var(--space-3)"
+    },
     "--card-actions-gap": {
      "default": "0.5rem"
     },
@@ -556,6 +574,7 @@
    "class": "m3-checkbox",
    "description": " ====== M3 Checkbox\nM3 spec: 18dp box, 2dp radius, primary when checked\nVariable API: --checkbox-* 변수로 커스텀 가능",
    "slots": [],
+   "slotOptions": {},
    "options": {
     "checkbox-mode": [
      "indeterminate"
@@ -651,6 +670,7 @@
     "chip-close",
     "chip-icon"
    ],
+   "slotOptions": {},
    "options": {
     "chip-state": [
      "disabled"
@@ -743,6 +763,7 @@
    "class": "m3-deco",
    "description": " ====== M3 Deco (Icon + Text Decoration)\n아이콘과 텍스트를 방향에 따라 조합하는 장식 컴포넌트.\nNavigation Bar, Navigation Rail, Tab Bar, 사이드바 메뉴 항목 등에 사용.\n사용법:\n  <span class=\"m3-deco icon:home deco-pos:left\">홈</span>\n  <span class=\"m3-deco icon:home deco-pos:top deco-active\">홈</span>",
    "slots": [],
+   "slotOptions": {},
    "options": {
     "deco-pos": [
      "bottom",
@@ -866,6 +887,7 @@
     "dialog-headline",
     "dialog-icon"
    ],
+   "slotOptions": {},
    "options": {},
    "flags": [
     "dialog-open"
@@ -951,6 +973,7 @@
    "class": "m3-divider",
    "description": " ====== M3 Divider (Material Design 3 spec-aligned)\nType :  full-width (default) | inset | middle-inset | vertical\nM3 spec: 1dp height, outline-variant color\nRef: https://m3.material.io/components/divider/specs\nVariable API: --divider-* 변수로 모든 시각 요소 커스텀 가능",
    "slots": [],
+   "slotOptions": {},
    "options": {
     "divider": [
      "inset",
@@ -993,6 +1016,7 @@
    "class": "m3-fab",
    "description": " ====== M3 FAB (Material Design 3 spec-aligned)\nSize :  fab (default 56dp) | fab:small (40dp) | fab:large (96dp) | fab:extended\nColor:  surface (default) | primary | secondary | tertiary\nState:  enabled (default) | hover | focus | active | disabled\nM3 spec: level3 shadow at rest, level4 on hover\nRef: https://m3.material.io/components/floating-action-button/specs",
    "slots": [],
+   "slotOptions": {},
    "options": {
     "fab-state": [
      "active",
@@ -1102,6 +1126,25 @@
     "form-headline",
     "form-message"
    ],
+   "slotOptions": {
+    "form-actions": {
+     "form-actions": [
+      "between",
+      "center",
+      "end",
+      "start",
+      "stretch"
+     ]
+    },
+    "form-message": {
+     "form-message": [
+      "error",
+      "info",
+      "success",
+      "warning"
+     ]
+    }
+   },
    "options": {
     "form": [
      "compact",
@@ -1185,11 +1228,58 @@
    },
    "usage": "<form class=\"m3-form\" style=\"max-width: 22rem;\">\n  <div class=\"form-header\">\n    <h2 class=\"form-headline\">로그인</h2>\n    <p class=\"form-description\">계정 정보를 입력하세요.</p>\n  </div>\n  <div class=\"form-message form-message:error\">\n    이메일 또는 비밀번호가 올바르지 않습니다.\n  </div>\n  <div class=\"form-fields\">\n    <div class=\"m3-text-field field:outlined\">\n      <input type=\"email\" placeholder=\" \">\n      <label>이메일</label>\n    </div>\n    <div class=\"m3-text-field field:outlined\">\n      <input type=\"password\" placeholder=\" \">\n      <label>비밀번호</label>\n    </div>\n  </div>\n  <div class=\"form-actions\">\n    <button type=\"button\" class=\"m3-btn btn:text\">취소</button>\n    <button type=\"button\" class=\"m3-btn\">로그인</button>\n  </div>\n</form>"
   },
+  {
+   "name": "grid",
+   "class": "m3-grid",
+   "description": " ====== Grid (newtil 확장)\n카드·항목을 반응형 격자로 놓는 콘텐츠 블록. \"가구를 방에 놓는 틀\" 이다.\nM3 스펙에는 없다. 안에 무엇이 들어가든(m3-card, m3-list 항목, 이미지) 격자만 책임진다.\n사용법:\n  <ul class=\"m3-grid grid-cols:3\">\n    <li class=\"m3-card card:outlined\">…</li>",
+   "slots": [],
+   "slotOptions": {},
+   "options": {
+    "grid-cols": [
+     "1",
+     "2",
+     "3",
+     "4",
+     "5",
+     "6",
+     "auto"
+    ],
+    "grid-gap": [
+     "1",
+     "2",
+     "3",
+     "4",
+     "5"
+    ]
+   },
+   "flags": [],
+   "variables": {
+    "--grid-cols": {
+     "default": "3"
+    },
+    "--grid-cols-md": {
+     "default": "2"
+    },
+    "--grid-cols-sm": {
+     "default": "1"
+    },
+    "--grid-gap": {
+     "default": "var(--space-6)",
+     "note": "20px"
+    },
+    "--grid-min": {
+     "default": "16rem",
+     "note": "grid-cols:auto 일 때 최소 열 너비"
+    }
+   },
+   "usage": "<ul class=\"m3-grid grid-cols:3\">\n  <li class=\"m3-card card:outlined card-padding:self\">카드 1</li>\n  <li class=\"m3-card card:outlined card-padding:self\">카드 2</li>\n  <li class=\"m3-card card:outlined card-padding:self\">카드 3</li>\n  <li class=\"m3-card card:outlined card-padding:self\">카드 4</li>\n  <li class=\"m3-card card:outlined card-padding:self\">카드 5</li>\n  <li class=\"m3-card card:outlined card-padding:self\">카드 6</li>\n</ul>"
+  },
   {
    "name": "icon-btn",
    "class": "m3-icon-btn",
    "description": " ====== M3 Icon Button (Material Design 3 spec-aligned)\nType :  standard (default) | filled | tonal | outlined\nToggle: icon-btn-toggle:selected | icon-btn-toggle:unselected\nState:  enabled (default) | hover | focus | active | disabled\nM3 spec: 48dp touch target, 40dp visible container\nRef: https://m3.material.io/components/icon-buttons/specs",
    "slots": [],
+   "slotOptions": {},
    "options": {
     "icon-btn-state": [
      "active",
@@ -1273,6 +1363,7 @@
    "class": "m3-icon",
    "description": " ====== M3 Icon (Material Symbols)\nMaterial Symbols 폰트 기반 아이콘 컴포넌트.\n아이콘 코드포인트는 icon-essential.css (또는 사용자 정의)에서 ::before content로 제공.\n사용법:\n  <i class=\"m3-icon icon:home\"></i>\n  <i class=\"m3-icon icon:search icon-style:rounded icon-filled:1\"></i>",
    "slots": [],
+   "slotOptions": {},
    "options": {
     "icon-style": [
      "outlined",
@@ -1382,6 +1473,7 @@
     "layout-content",
     "layout-header"
    ],
+   "slotOptions": {},
    "options": {
     "layout": [
      "fixed-drawer",
@@ -1447,6 +1539,14 @@
     "list-divider",
     "list-item"
    ],
+   "slotOptions": {
+    "list-divider": {
+     "list-divider": [
+      "full",
+      "inset"
+     ]
+    }
+   },
    "options": {
     "list-size": [
      "compact",
@@ -1568,6 +1668,7 @@
     "menu-divider",
     "menu-item"
    ],
+   "slotOptions": {},
    "options": {},
    "flags": [
     "menu-open"
@@ -1665,6 +1766,7 @@
    "class": "m3-nav-bar",
    "description": " ====== M3 Navigation Bar (Bottom Navigation)\nM3 spec: 80dp height, fixed bottom, 3-5 destinations, surface bg\n내부 아이템은 m3-deco 컴포넌트를 사용하여 icon+text 렌더링.\n사용법:\n  <nav class=\"m3-nav-bar\">\n    <a href=\"#\" class=\"m3-deco icon:home deco-pos:top deco-active\">홈</a>",
    "slots": [],
+   "slotOptions": {},
    "options": {
     "nav-bar": [
      "elevated",
@@ -1731,6 +1833,7 @@
     "drawer-item",
     "drawer-section-header"
    ],
+   "slotOptions": {},
    "options": {
     "drawer": [
      "modal"
@@ -1866,6 +1969,7 @@
     "rail-header",
     "rail-items"
    ],
+   "slotOptions": {},
    "options": {
     "rail": [
      "elevated",
@@ -1935,11 +2039,105 @@
    },
    "usage": "<div class=\"m3-layout\">\n  <!-- Nav Drawer (Expanded에서 표시) -->\n  <nav class=\"m3-nav-drawer layout-drawer\">\n    <div class=\"drawer-header\">\n      <h2 class=\"drawer-headline\">메뉴</h2>\n    </div>\n    <div class=\"drawer-content\">\n      <a href=\"#\" class=\"drawer-item drawer-item-active\">\n        <i class=\"m3-icon icon:home\"></i>\n        <span class=\"drawer-label\">홈</span>\n      </a>\n      <a href=\"#\" class=\"drawer-item\">\n        <i class=\"m3-icon icon:search\"></i>\n        <span class=\"drawer-label\">검색</span>\n      </a>\n      <a href=\"#\" class=\"drawer-item\">\n        <i class=\"m3-icon icon:settings\"></i>\n        <span class=\"drawer-label\">설정</span>\n      </a>\n    </div>\n  </nav>\n\n  <!-- Nav Rail (Medium에서 표시) -->\n  <nav class=\"m3-nav-rail layout-rail\">\n    <div class=\"rail-header\">\n      <button class=\"m3-fab fab:small\"><i class=\"m3-icon icon:edit\"></i></button>\n    </div>\n    <div class=\"rail-items\">\n      <a href=\"#\" class=\"m3-deco icon:home deco-pos:top deco-active\">홈</a>\n      <a href=\"#\" class=\"m3-deco icon:search deco-pos:top\">검색</a>\n      <a href=\"#\" class=\"m3-deco icon:settings deco-pos:top\">설정</a>\n    </div>\n  </nav>\n\n  <!-- Main Content Area -->\n  <div class=\"layout-main\">\n    <header class=\"m3-top-app-bar layout-header\">\n      <button class=\"bar-leading\"><i class=\"m3-icon icon:menu\"></i></button>\n      <h1 class=\"bar-title\">페이지 제목</h1>\n      <div class=\"bar-trailing\">\n        <button><i class=\"m3-icon icon:search\"></i></button>\n      </div>\n    </header>\n    <main class=\"layout-content\">\n      <h2>콘텐츠 영역</h2>\n      <p>페이지의 주요 콘텐츠가 여기에 들어갑니다.</p>\n    </main>\n  </div>\n\n  <!-- Nav Bar (Compact에서 표시) -->\n  <nav class=\"m3-nav-bar layout-bar\">\n    <a href=\"#\" class=\"m3-deco icon:home deco-pos:top deco-active\">홈</a>\n    <a href=\"#\" class=\"m3-deco icon:search deco-pos:top\">검색</a>\n    <a href=\"#\" class=\"m3-deco icon:settings deco-pos:top\">설정</a>\n  </nav>\n</div>"
   },
+  {
+   "name": "pager",
+   "class": "m3-pager",
+   "description": " ====== Pager (newtil 확장)\nM3 스펙에는 페이지네이션 컴포넌트가 없다. 목록 아래 \"이전 · 1 2 3 · 다음\" 을 표준화한다.\n사용법:\n  <nav class=\"m3-pager\" aria-label=\"페이지\">\n    <a class=\"pager-item pager-prev\" href=\"…\" aria-disabled=\"true\">이전</a>\n    <a class=\"pager-item\" href=\"…\" aria-current=\"page\">1</a>",
+   "slots": [
+    "pager-ellipsis",
+    "pager-item"
+   ],
+   "slotOptions": {},
+   "options": {
+    "pager": [
+     "text"
+    ],
+    "pager-align": [
+     "center",
+     "end",
+     "start"
+    ],
+    "pager-size": [
+     "lg",
+     "md",
+     "sm"
+    ]
+   },
+   "flags": [],
+   "variables": {
+    "--pager-gap": {
+     "default": "0.375rem"
+    },
+    "--pager-justify": {
+     "default": "center"
+    },
+    "--pager-margin": {
+     "default": "0"
+    },
+    "--pager-item-height": {
+     "default": "2.25rem",
+     "note": "36px"
+    },
+    "--pager-item-min-width": {
+     "default": "var(--pager-item-height)"
+    },
+    "--pager-item-padding": {
+     "default": "0 0.75rem"
+    },
+    "--pager-item-font-size": {
+     "default": "0.875rem"
+    },
+    "--pager-item-font-weight": {
+     "default": "var(--font-weight-medium)"
+    },
+    "--pager-item-border-radius": {
+     "default": "var(--radius-3)"
+    },
+    "--pager-item-border-width": {
+     "default": "0.0625rem"
+    },
+    "--pager-item-border-color": {
+     "default": "var(--color-border)"
+    },
+    "--pager-item-background": {
+     "default": "var(--color-surface)"
+    },
+    "--pager-item-color": {
+     "default": "var(--color-text)"
+    },
+    "--pager-item-hover-background": {
+     "default": "var(--color-surface-1)"
+    },
+    "--pager-current-background": {
+     "default": "var(--color-text)"
+    },
+    "--pager-current-color": {
+     "default": "var(--color-surface)"
+    },
+    "--pager-current-border-color": {
+     "default": "var(--color-text)"
+    },
+    "--pager-current-font-weight": {
+     "default": "var(--font-weight-bold)"
+    },
+    "--pager-disabled-color": {
+     "default": "var(--color-text-subtle)"
+    },
+    "--pager-disabled-opacity": {
+     "default": "1"
+    },
+    "--pager-transition": {
+     "default": "background-color var(--duration-fast) var(--ease-in-out), color var(--duration-fast) var(--ease-in-out)"
+    }
+   },
+   "usage": "<nav class=\"m3-pager\" aria-label=\"페이지\">\n  <a class=\"pager-item pager-prev\" href=\"#\" aria-disabled=\"true\">이전</a>\n  <a class=\"pager-item\" href=\"#\" aria-current=\"page\">1</a>\n  <a class=\"pager-item\" href=\"#\">2</a>\n  <a class=\"pager-item\" href=\"#\">3</a>\n  <span class=\"pager-ellipsis\">…</span>\n  <a class=\"pager-item\" href=\"#\">12</a>\n  <a class=\"pager-item pager-next\" href=\"#\">다음</a>\n</nav>"
+  },
   {
    "name": "progress",
    "class": "m3-progress",
    "description": " ====== M3 Progress Indicator\nType: linear (default) | circular\nM3 spec: primary track color, 4dp height (linear), 48dp (circular)\n사용법:\n  <div class=\"m3-progress\" style=\"--progress-value: 60%;\"></div>\n  <div class=\"m3-progress progress:indeterminate\"></div>",
    "slots": [],
+   "slotOptions": {},
    "options": {
     "progress": [
      "circular",
@@ -1990,6 +2188,7 @@
    "class": "m3-radio",
    "description": " ====== M3 Radio Button\nM3 spec: 20dp outer ring, 10dp inner dot, primary when selected\nVariable API: --radio-* 변수로 커스텀 가능",
    "slots": [],
+   "slotOptions": {},
    "options": {
     "radio-color": [
      "danger",
@@ -2077,11 +2276,133 @@
    },
    "usage": "<label class=\"m3-radio\">\n  <input type=\"radio\" name=\"option\" value=\"1\">\n  <span>옵션 1</span>\n</label>\n\n<label class=\"m3-radio\">\n  <input type=\"radio\" name=\"option\" value=\"2\">\n  <span>옵션 2</span>\n</label>\n\n<label class=\"m3-radio\">\n  <input type=\"radio\" name=\"option\" value=\"3\" checked>\n  <span>옵션 3 (선택됨)</span>\n</label>"
   },
+  {
+   "name": "site",
+   "class": "m3-site",
+   "description": " ====== Site (newtil 확장)\n공개 사이트의 \"방\": 상단 헤더 · 본문 · 푸터가 세로로 흐르고 본문은 가운데 컨테이너 안에 놓인다.\nm3-layout(드로어 앱 셸)과 다른 종류의 방이다. M3 스펙에는 없다.\n사용법:\n  <div class=\"m3-site\">\n    <header class=\"site-header\">",
+   "slots": [
+    "site-actions",
+    "site-aside",
+    "site-body",
+    "site-container",
+    "site-content",
+    "site-copyright",
+    "site-footer",
+    "site-footer-inner",
+    "site-footer-links",
+    "site-header",
+    "site-header-inner",
+    "site-logo",
+    "site-main",
+    "site-nav"
+   ],
+   "slotOptions": {
+    "site-body": {
+     "site-body": [
+      "aside",
+      "aside-end"
+     ]
+    }
+   },
+   "options": {
+    "site-width": [
+     "default",
+     "narrow",
+     "wide"
+    ]
+   },
+   "flags": [],
+   "variables": {
+    "--site-max-width": {
+     "default": "70rem"
+    },
+    "--site-gutter": {
+     "default": "var(--space-7)",
+     "note": "24px"
+    },
+    "--site-background": {
+     "default": "var(--color-surface-1)"
+    },
+    "--site-header-height": {
+     "default": "4rem",
+     "note": "64px"
+    },
+    "--site-header-background": {
+     "default": "var(--color-surface)"
+    },
+    "--site-header-border": {
+     "default": "0.0625rem solid var(--color-border)"
+    },
+    "--site-header-gap": {
+     "default": "var(--space-8)"
+    },
+    "--site-logo-size": {
+     "default": "var(--font-size-heading-sm)"
+    },
+    "--site-logo-weight": {
+     "default": "var(--font-weight-bold)"
+    },
+    "--site-logo-color": {
+     "default": "var(--color-primary)"
+    },
+    "--site-nav-gap": {
+     "default": "var(--space-6)"
+    },
+    "--site-nav-size": {
+     "default": "var(--font-size-body-sm)"
+    },
+    "--site-nav-color": {
+     "default": "var(--color-text-muted)"
+    },
+    "--site-nav-color-active": {
+     "default": "var(--color-text)"
+    },
+    "--site-nav-weight-active": {
+     "default": "var(--font-weight-semibold)"
+    },
+    "--site-actions-gap": {
+     "default": "var(--space-3)"
+    },
+    "--site-main-padding-top": {
+     "default": "var(--space-9)"
+    },
+    "--site-main-padding-bottom": {
+     "default": "var(--space-11)"
+    },
+    "--site-aside-width": {
+     "default": "12.5rem",
+     "note": "200px"
+    },
+    "--site-body-gap": {
+     "default": "var(--space-8)"
+    },
+    "--site-aside-gap": {
+     "default": "var(--space-5)"
+    },
+    "--site-footer-padding": {
+     "default": "var(--space-8) 0"
+    },
+    "--site-footer-border": {
+     "default": "0.0625rem solid var(--color-border)"
+    },
+    "--site-footer-size": {
+     "default": "var(--font-size-body-sm)"
+    },
+    "--site-footer-color": {
+     "default": "var(--color-text-muted)"
+    },
+    "--site-footer-links-gap": {
+     "default": "var(--space-5)"
+    }
+   },
+   "usage": "<div class=\"m3-site\" style=\"min-height: 22rem;\">\n  <header class=\"site-header\">\n    <div class=\"site-container site-header-inner\">\n      <a class=\"site-logo\" href=\"#\">NCafe</a>\n      <nav class=\"site-nav\"><a href=\"#\" aria-current=\"page\">메뉴</a><a href=\"#\">소개</a><a href=\"#\">장바구니</a></nav>\n      <div class=\"site-actions\"><button class=\"m3-btn btn:outlined btn-size:xs\">로그인</button><button class=\"m3-btn btn-size:xs\">회원가입</button></div>\n    </div>\n  </header>\n  <main class=\"site-main\">\n    <div class=\"site-container\">\n      <div class=\"site-body site-body:aside\">\n        <aside class=\"site-aside\"><div class=\"m3-card card:outlined card-padding:self\">사이드</div></aside>\n        <div class=\"site-content\"><div class=\"m3-card card:outlined card-padding:self\">본문</div></div>\n      </div>\n    </div>\n  </main>\n  <footer class=\"site-footer\">\n    <div class=\"site-container site-footer-inner\">\n      <p class=\"site-copyright\">© 2026 NCafe</p>\n      <nav class=\"site-footer-links\"><a href=\"#\">소개</a><a href=\"#\">이용약관</a></nav>\n    </div>\n  </footer>\n</div>"
+  },
   {
    "name": "slider",
    "class": "m3-slider",
    "description": " ====== M3 Slider\nM3 spec: Track 4dp height, handle 20dp, active track uses primary\nTypes: continuous (default), discrete (with tick marks)\n사용법:\n  <div class=\"m3-slider\">\n    <input type=\"range\" min=\"0\" max=\"100\" value=\"50\">",
    "slots": [],
+   "slotOptions": {},
    "options": {
     "slider": [
      "discrete"
@@ -2175,6 +2496,7 @@
     "snackbar-close",
     "snackbar-text"
    ],
+   "slotOptions": {},
    "options": {
     "snackbar-color": [
      "danger",
@@ -2262,6 +2584,7 @@
    "slots": [
     "switch-label"
    ],
+   "slotOptions": {},
    "options": {
     "switch-color": [
      "danger",
@@ -2361,6 +2684,7 @@
    "slots": [
     "tab-item"
    ],
+   "slotOptions": {},
    "options": {
     "tabs": [
      "full",
@@ -2455,6 +2779,7 @@
     "field-label",
     "field-supporting"
    ],
+   "slotOptions": {},
    "options": {
     "field": [
      "outlined"
@@ -2686,7 +3011,51 @@
      "default": "all var(--duration-fast) var(--ease-in-out)"
     }
    },
-   "usage": "<div style=\"display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center;\">\n  <button class=\"m3-btn\">저장</button>\n  <div class=\"m3-text-field\" style=\"max-width: 14rem;\">\n    <input type=\"text\" placeholder=\" \">\n    <label>이름</label>\n  </div>\n  <label class=\"m3-checkbox\"><input type=\"checkbox\" checked> 동의</label>\n</div>"
+   "usage": "<div class=\"m3-toolbar\">\n  <div class=\"toolbar-start\">총 <strong>31</strong>개의 메뉴</div>\n  <div class=\"toolbar-end\">\n    <div class=\"m3-text-field field:outlined field-label:none\"><select><option>인기순</option><option>최신순</option></select></div>\n  </div>\n</div>\n<form class=\"m3-toolbar toolbar:fill\">\n  <div class=\"m3-text-field field:outlined field-label:none\"><select><option>전체 카테고리</option></select></div>\n  <div class=\"m3-text-field field:outlined field-label:none toolbar-grow\"><input type=\"search\" placeholder=\"메뉴 이름 검색\"></div>\n  <button type=\"button\" class=\"m3-btn btn:outlined\">검색</button>\n</form>"
+  },
+  {
+   "name": "toolbar",
+   "class": "m3-toolbar",
+   "description": " ====== Toolbar (newtil 확장)\n목록 위·표 위에 놓이는 한 줄: 왼쪽 정보(건수·선택 상태) · 오른쪽 동작(정렬·필터·버튼).\nM3 스펙에는 없다. 필터 바(입력 여러 개가 한 줄)도 같은 블록으로 만든다.\n사용법:\n  <div class=\"m3-toolbar\">\n    <div class=\"toolbar-start\">총 <strong>31</strong>개</div>",
+   "slots": [
+    "toolbar-end",
+    "toolbar-start"
+   ],
+   "slotOptions": {},
+   "options": {
+    "toolbar": [
+     "card",
+     "fill"
+    ]
+   },
+   "flags": [],
+   "variables": {
+    "--toolbar-gap": {
+     "default": "var(--space-3)"
+    },
+    "--toolbar-margin": {
+     "default": "0 0 var(--space-5)"
+    },
+    "--toolbar-padding": {
+     "default": "0"
+    },
+    "--toolbar-font-size": {
+     "default": "var(--font-size-body-sm)"
+    },
+    "--toolbar-color": {
+     "default": "var(--color-text-muted)"
+    },
+    "--toolbar-strong-color": {
+     "default": "var(--color-text)"
+    },
+    "--toolbar-border-bottom": {
+     "default": "none"
+    },
+    "--toolbar-min-height": {
+     "default": "2.5rem"
+    }
+   },
+   "usage": "<div class=\"m3-toolbar\">\n  <div class=\"toolbar-start\">총 <strong>31</strong>개의 메뉴</div>\n  <div class=\"toolbar-end\">\n    <div class=\"m3-text-field field:outlined field-label:none\"><select><option>인기순</option><option>최신순</option></select></div>\n  </div>\n</div>\n<form class=\"m3-toolbar toolbar:fill\">\n  <div class=\"m3-text-field field:outlined field-label:none\"><select><option>전체 카테고리</option></select></div>\n  <div class=\"m3-text-field field:outlined field-label:none toolbar-grow\"><input type=\"search\" placeholder=\"메뉴 이름 검색\"></div>\n  <button type=\"button\" class=\"m3-btn btn:outlined\">검색</button>\n</form>"
   },
   {
    "name": "tooltip",
@@ -2697,6 +3066,7 @@
     "tooltip-content",
     "tooltip-title"
    ],
+   "slotOptions": {},
    "options": {
     "tooltip": [
      "rich"
@@ -2800,6 +3170,7 @@
     "bar-title",
     "bar-trailing"
    ],
+   "slotOptions": {},
    "options": {
     "bar": [
      "center",

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@newtil/materials",
-	"version": "0.4.10",
+	"version": "0.4.12",
 	"description": "Material Design 3 구현 CSS 라이브러리 — m3- prefix 기반 컴포넌트 (버튼, 카드, 다이얼로그, 네비 등). @newtil/design-tokens 위에 동작.",
 	"publishConfig": {
 		"access": "public"