@newtil/materials 0.4.11 → 0.4.14

package/dist/spec.json

@@ -1,10 +1,10 @@
 {
  "$schema": "newtil-component-spec/1",
  "package": "@newtil/materials",
- "version": "0.4.11",
+ "version": "0.4.14",
  "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"
@@ -173,11 +175,61 @@
    },
    "usage": "<div class=\"m3-bottom-sheet sheet-open\">\n  <div class=\"sheet-drag-handle\"></div>\n  <div class=\"sheet-content\">\n    <h3 class=\"sheet-headline\">시트 제목</h3>\n    <p>시트 본문 내용입니다.</p>\n  </div>\n</div>"
   },
+  {
+   "name": "breadcrumb",
+   "class": "m3-breadcrumb",
+   "description": " ====== Breadcrumb (newtil 확장)\n현재 위치 경로: 홈 / 메뉴 / 커피 / 카페라떼. M3 스펙에는 없다.\n구분 기호는 CSS 가 그린다 — 마크업에 \"/\" 를 넣지 않는다.\n사용법:\n  <nav class=\"m3-breadcrumb\" aria-label=\"현재 위치\">\n    <a href=\"/\">홈</a>",
+   "slots": [],
+   "slotOptions": {},
+   "options": {
+    "breadcrumb-separator": [
+     "chevron",
+     "dot",
+     "slash"
+    ],
+    "breadcrumb-size": [
+     "md",
+     "sm"
+    ]
+   },
+   "flags": [],
+   "variables": {
+    "--breadcrumb-gap": {
+     "default": "var(--space-3)"
+    },
+    "--breadcrumb-margin": {
+     "default": "0 0 var(--space-7)"
+    },
+    "--breadcrumb-font-size": {
+     "default": "var(--font-size-body-sm)"
+    },
+    "--breadcrumb-color": {
+     "default": "var(--color-text-muted)"
+    },
+    "--breadcrumb-color-hover": {
+     "default": "var(--color-text)"
+    },
+    "--breadcrumb-current-color": {
+     "default": "var(--color-text)"
+    },
+    "--breadcrumb-current-weight": {
+     "default": "var(--font-weight-semibold)"
+    },
+    "--breadcrumb-separator": {
+     "default": "\"/\""
+    },
+    "--breadcrumb-separator-color": {
+     "default": "var(--color-text-subtle)"
+    }
+   },
+   "usage": "<nav class=\"m3-breadcrumb\" aria-label=\"현재 위치\">\n  <a href=\"#\">홈</a>\n  <a href=\"#\">메뉴</a>\n  <a href=\"#\">커피</a>\n  <span aria-current=\"page\">카페라떼</span>\n</nav>\n<nav class=\"m3-breadcrumb breadcrumb-separator:chevron breadcrumb-size:sm\" aria-label=\"현재 위치\">\n  <a href=\"#\">관리자</a>\n  <a href=\"#\">메뉴 관리</a>\n  <span aria-current=\"page\">새 메뉴</span>\n</nav>"
+  },
   {
    "name": "btn",
    "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 +428,16 @@
     "card-subhead",
     "card-titles"
    ],
+   "slotOptions": {
+    "card-media": {
+     "card-media": [
+      "landscape",
+      "square",
+      "video",
+      "wide"
+     ]
+    }
+   },
    "options": {
     "card-state": [
      "disabled",
@@ -524,6 +586,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 +624,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 +720,7 @@
     "chip-close",
     "chip-icon"
    ],
+   "slotOptions": {},
    "options": {
     "chip-state": [
      "disabled"
@@ -743,6 +813,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 +937,7 @@
     "dialog-headline",
     "dialog-icon"
    ],
+   "slotOptions": {},
    "options": {},
    "flags": [
     "dialog-open"
@@ -951,6 +1023,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 +1066,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",
@@ -1096,12 +1170,40 @@
    "description": " ====== M3 Form (newtil 확장)\nM3 스펙에는 Form 전용 컴포넌트가 없습니다. 이 컴포넌트는\n폼의 공통 레이아웃 패턴(헤더 / 필드 / 액션 / 메시지)을 표준화하기 위한\nnewtil 확장입니다.\n사용법:\n  <form class=\"m3-form\">",
    "slots": [
     "form-actions",
+    "form-choice-extra",
     "form-description",
     "form-fields",
+    "form-group",
+    "form-group-choices",
+    "form-group-label",
     "form-header",
     "form-headline",
     "form-message"
    ],
+   "slotOptions": {
+    "form-actions": {
+     "form-actions": [
+      "between",
+      "center",
+      "end",
+      "start",
+      "stretch"
+     ]
+    },
+    "form-message": {
+     "form-message": [
+      "error",
+      "info",
+      "success",
+      "warning"
+     ]
+    },
+    "form-group": {
+     "form-group": [
+      "inline"
+     ]
+    }
+   },
    "options": {
     "form": [
      "compact",
@@ -1125,6 +1227,22 @@
     "--form-header-gap": {
      "default": "0.25rem"
     },
+    "--form-group-gap": {
+     "default": "var(--space-2)"
+    },
+    "--form-group-label-width": {
+     "default": "5.5rem",
+     "note": "form-group:inline 의 레이블 칸"
+    },
+    "--form-group-label-size": {
+     "default": "var(--font-size-body-sm)"
+    },
+    "--form-group-label-weight": {
+     "default": "var(--font-weight-semibold)"
+    },
+    "--form-group-choices-gap": {
+     "default": "var(--space-5)"
+    },
     "--form-headline-size": {
      "default": "1.5rem"
     },
@@ -1190,6 +1308,7 @@
    "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",
@@ -1233,8 +1352,9 @@
   {
    "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",
+   "description": " ====== M3 Icon Button (Material Design 3 spec-aligned)\nType :  standard (default) | filled | tonal | outlined\nToggle: icon-btn-toggle:selected | icon-btn-toggle:unselected\nSize :  icon-btn-size:xs (28px) | sm (32px) | md (40px, 기본, 터치 48px) | lg (48px)\n        xs·sm 은 터치 영역을 늘리지 않는다 — 카드 액션·표 셀·스테퍼처럼 텍스트 버튼 옆에 나란히 놓는 자리용.\nState:  enabled (default) | hover | focus | active | disabled",
    "slots": [],
+   "slotOptions": {},
    "options": {
     "icon-btn-state": [
      "active",
@@ -1242,6 +1362,12 @@
      "focus",
      "hover"
     ],
+    "icon-btn-size": [
+     "lg",
+     "md",
+     "sm",
+     "xs"
+    ],
     "icon-btn": [
      "filled",
      "outlined",
@@ -1318,6 +1444,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",
@@ -1427,6 +1554,7 @@
     "layout-content",
     "layout-header"
    ],
+   "slotOptions": {},
    "options": {
     "layout": [
      "fixed-drawer",
@@ -1492,6 +1620,14 @@
     "list-divider",
     "list-item"
    ],
+   "slotOptions": {
+    "list-divider": {
+     "list-divider": [
+      "full",
+      "inset"
+     ]
+    }
+   },
    "options": {
     "list-size": [
      "compact",
@@ -1613,6 +1749,7 @@
     "menu-divider",
     "menu-item"
    ],
+   "slotOptions": {},
    "options": {},
    "flags": [
     "menu-open"
@@ -1710,6 +1847,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",
@@ -1776,6 +1914,7 @@
     "drawer-item",
     "drawer-section-header"
    ],
+   "slotOptions": {},
    "options": {
     "drawer": [
      "modal"
@@ -1911,6 +2050,7 @@
     "rail-header",
     "rail-items"
    ],
+   "slotOptions": {},
    "options": {
     "rail": [
      "elevated",
@@ -1988,6 +2128,7 @@
     "pager-ellipsis",
     "pager-item"
    ],
+   "slotOptions": {},
    "options": {
     "pager": [
      "text"
@@ -2077,6 +2218,7 @@
    "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",
@@ -2127,6 +2269,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",
@@ -2214,11 +2357,206 @@
    },
    "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": "section",
+   "class": "m3-section",
+   "description": " ====== Section (newtil 확장)\n제목 · 설명 · 본문으로 된 글 덩어리. 상세 페이지의 \"상세 설명 / 영양 정보 / 유의 사항\",\n소개 페이지의 절, 설정 화면의 묶음이 모두 이것이다. M3 스펙에는 없다.\n사용법:\n  <section class=\"m3-section section:divided\">\n    <h2 class=\"section-title\">영양 정보</h2>",
+   "slots": [
+    "section-body",
+    "section-caption",
+    "section-title"
+   ],
+   "slotOptions": {},
+   "options": {
+    "section": [
+     "card",
+     "divided"
+    ],
+    "section-size": [
+     "lg",
+     "md",
+     "sm"
+    ]
+   },
+   "flags": [],
+   "variables": {
+    "--section-padding": {
+     "default": "var(--space-8) 0"
+    },
+    "--section-gap": {
+     "default": "var(--space-4)"
+    },
+    "--section-border": {
+     "default": "none"
+    },
+    "--section-background": {
+     "default": "transparent"
+    },
+    "--section-border-radius": {
+     "default": "0"
+    },
+    "--section-title-size": {
+     "default": "var(--font-size-heading-sm)"
+    },
+    "--section-title-weight": {
+     "default": "var(--font-weight-bold)"
+    },
+    "--section-title-color": {
+     "default": "var(--color-text)"
+    },
+    "--section-caption-size": {
+     "default": "var(--font-size-caption)"
+    },
+    "--section-caption-color": {
+     "default": "var(--color-text-muted)"
+    },
+    "--section-body-size": {
+     "default": "var(--font-size-body)"
+    },
+    "--section-body-line-height": {
+     "default": "var(--line-height-loose)"
+    },
+    "--section-body-color": {
+     "default": "var(--color-text-muted)"
+    },
+    "--section-body-gap": {
+     "default": "var(--space-4)"
+    }
+   },
+   "usage": "<section class=\"m3-section section:divided\">\n  <h2 class=\"section-title\">상세 설명</h2>\n  <div class=\"section-body\">\n    <p>브라질과 콜롬비아 원두를 블렌딩한 하우스 블렌드 에스프레소를 사용합니다.</p>\n    <p>HOT 은 머그로, ICE 는 얼음과 함께 투명 컵으로 제공됩니다.</p>\n  </div>\n</section>\n<section class=\"m3-section section:divided\">\n  <h2 class=\"section-title\">유의 사항</h2>\n  <p class=\"section-caption\">2026년 9월 기준</p>\n  <div class=\"section-body\">\n    <ul><li>우유가 포함된 제품입니다.</li><li>주문 후 30분 이내 픽업해 주세요.</li></ul>\n  </div>\n</section>"
+  },
+  {
+   "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"
+    ],
+    "site-aside": [
+     "lg",
+     "md",
+     "sm"
+    ]
+   },
+   "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"
@@ -2312,6 +2650,7 @@
     "snackbar-close",
     "snackbar-text"
    ],
+   "slotOptions": {},
    "options": {
     "snackbar-color": [
      "danger",
@@ -2392,6 +2731,85 @@
    },
    "usage": "<div class=\"m3-snackbar snackbar-open\">\n  <span class=\"snackbar-text\">파일이 저장되었습니다</span>\n</div>"
   },
+  {
+   "name": "stepper",
+   "class": "m3-stepper",
+   "description": " ====== Stepper (newtil 확장)\n수량 −/＋ 입력. 장바구니·상세 페이지의 \"가구\" 다. M3 스펙에는 없다.\n한 테두리 안에 [빼기][숫자][더하기] 가 붙어 있는 모양이 기본이고, 값 바꾸는 동작은 앱이 맡는다.\n사용법:\n  <div class=\"m3-stepper\" role=\"group\" aria-label=\"수량\">\n    <button type=\"button\" class=\"stepper-btn\" aria-label=\"수량 감소\"><i class=\"m3-icon icon:remove\"></i></button>",
+   "slots": [
+    "stepper-btn",
+    "stepper-input"
+   ],
+   "slotOptions": {},
+   "options": {
+    "stepper": [
+     "outlined",
+     "separated"
+    ],
+    "stepper-size": [
+     "lg",
+     "md",
+     "sm"
+    ]
+   },
+   "flags": [],
+   "variables": {
+    "--stepper-height": {
+     "default": "2.125rem",
+     "note": "34px"
+    },
+    "--stepper-btn-width": {
+     "default": "2rem",
+     "note": "32px"
+    },
+    "--stepper-input-width": {
+     "default": "2.75rem",
+     "note": "44px"
+    },
+    "--stepper-gap": {
+     "default": "0"
+    },
+    "--stepper-font-size": {
+     "default": "var(--font-size-body-sm)"
+    },
+    "--stepper-font-weight": {
+     "default": "var(--font-weight-semibold)"
+    },
+    "--stepper-icon-size": {
+     "default": "1rem"
+    },
+    "--stepper-border-width": {
+     "default": "0.0625rem"
+    },
+    "--stepper-border-color": {
+     "default": "var(--color-border)"
+    },
+    "--stepper-border-radius": {
+     "default": "var(--radius-2)"
+    },
+    "--stepper-background": {
+     "default": "var(--color-surface)"
+    },
+    "--stepper-btn-background": {
+     "default": "var(--color-surface)"
+    },
+    "--stepper-btn-hover-background": {
+     "default": "var(--color-surface-1)"
+    },
+    "--stepper-btn-color": {
+     "default": "var(--color-text)"
+    },
+    "--stepper-input-color": {
+     "default": "var(--color-text)"
+    },
+    "--stepper-divider": {
+     "default": "var(--stepper-border-width) solid var(--stepper-border-color)"
+    },
+    "--stepper-disabled-opacity": {
+     "default": "0.38"
+    }
+   },
+   "usage": "<div class=\"m3-stepper\" role=\"group\" aria-label=\"수량\">\n  <button type=\"button\" class=\"stepper-btn\" aria-label=\"수량 감소\"><i class=\"m3-icon icon:remove\"></i></button>\n  <input class=\"stepper-input\" type=\"number\" value=\"1\" min=\"1\" aria-label=\"수량\">\n  <button type=\"button\" class=\"stepper-btn\" aria-label=\"수량 증가\"><i class=\"m3-icon icon:add\"></i></button>\n</div>\n<div class=\"m3-stepper stepper-size:lg\" role=\"group\" aria-label=\"수량\">\n  <button type=\"button\" class=\"stepper-btn\" aria-label=\"수량 감소\"><i class=\"m3-icon icon:remove\"></i></button>\n  <input class=\"stepper-input\" type=\"number\" value=\"2\" min=\"1\" aria-label=\"수량\">\n  <button type=\"button\" class=\"stepper-btn\" aria-label=\"수량 증가\"><i class=\"m3-icon icon:add\"></i></button>\n</div>\n<div class=\"m3-stepper stepper:separated\" role=\"group\" aria-label=\"수량\">\n  <button type=\"button\" class=\"stepper-btn\" aria-label=\"수량 감소\"><i class=\"m3-icon icon:remove\"></i></button>\n  <input class=\"stepper-input\" type=\"number\" value=\"3\" min=\"1\" aria-label=\"수량\">\n  <button type=\"button\" class=\"stepper-btn\" aria-label=\"수량 증가\"><i class=\"m3-icon icon:add\"></i></button>\n</div>"
+  },
   {
    "name": "switch",
    "class": "m3-switch",
@@ -2399,6 +2817,7 @@
    "slots": [
     "switch-label"
    ],
+   "slotOptions": {},
    "options": {
     "switch-color": [
      "danger",
@@ -2491,6 +2910,71 @@
    },
    "usage": "<label class=\"m3-switch\">\n  <input type=\"checkbox\">\n  <span class=\"switch-label\">Wi-Fi</span>\n</label>\n\n<!-- 켜짐 상태 -->\n<label class=\"m3-switch\">\n  <input type=\"checkbox\" checked>\n  <span class=\"switch-label\">블루투스</span>\n</label>"
   },
+  {
+   "name": "table",
+   "class": "m3-table",
+   "description": " ====== Table (newtil 확장)\n표. M3 에는 data table 스펙이 없어 newtil 이 정한다. 두 쓰임을 한 클래스로:\n  - 데이터 표 (thead + tbody, 관리자 목록)\n  - 항목–값 표 (th scope=row 가 항목, td 가 값 — 영양 정보·주문 정보)\n사용법:\n  <table class=\"m3-table\">",
+   "slots": [
+    "table-align"
+   ],
+   "slotOptions": {},
+   "options": {
+    "table": [
+     "bordered",
+     "hover",
+     "key-value",
+     "striped"
+    ],
+    "table-size": [
+     "lg",
+     "md",
+     "sm"
+    ]
+   },
+   "flags": [],
+   "variables": {
+    "--table-width": {
+     "default": "100%"
+    },
+    "--table-max-width": {
+     "default": "none"
+    },
+    "--table-font-size": {
+     "default": "var(--font-size-body-sm)"
+    },
+    "--table-color": {
+     "default": "var(--color-text)"
+    },
+    "--table-cell-padding": {
+     "default": "var(--space-3) var(--space-4)"
+    },
+    "--table-border-width": {
+     "default": "var(--border-width-1)"
+    },
+    "--table-border-color": {
+     "default": "var(--color-border-subtle)"
+    },
+    "--table-head-background": {
+     "default": "var(--color-surface-2)"
+    },
+    "--table-head-color": {
+     "default": "var(--color-text-muted)"
+    },
+    "--table-head-weight": {
+     "default": "var(--font-weight-semibold)"
+    },
+    "--table-row-hover-background": {
+     "default": "transparent"
+    },
+    "--table-stripe-background": {
+     "default": "var(--color-surface-1)"
+    },
+    "--table-key-width": {
+     "default": "25%"
+    }
+   },
+   "usage": "<table class=\"m3-table\">\n  <thead><tr><th>메뉴</th><th>카테고리</th><th class=\"table-align:end\">가격</th></tr></thead>\n  <tbody>\n    <tr><td>아메리카노</td><td>커피</td><td class=\"table-align:end\">3,500원</td></tr>\n    <tr><td>카페라떼</td><td>커피</td><td class=\"table-align:end\">4,500원</td></tr>\n  </tbody>\n</table>\n<table class=\"m3-table table:key-value\" style=\"--table-max-width: 40rem\">\n  <tbody>\n    <tr><th scope=\"row\">칼로리</th><td>180 kcal</td><th scope=\"row\">나트륨</th><td>115 mg</td></tr>\n    <tr><th scope=\"row\">당류</th><td>13 g</td><th scope=\"row\">포화지방</th><td>4.5 g</td></tr>\n  </tbody>\n</table>"
+  },
   {
    "name": "tabs",
    "class": "m3-tabs",
@@ -2498,6 +2982,7 @@
    "slots": [
     "tab-item"
    ],
+   "slotOptions": {},
    "options": {
     "tabs": [
      "full",
@@ -2592,6 +3077,7 @@
     "field-label",
     "field-supporting"
    ],
+   "slotOptions": {},
    "options": {
     "field": [
      "outlined"
@@ -2823,7 +3309,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",
@@ -2834,6 +3364,7 @@
     "tooltip-content",
     "tooltip-title"
    ],
+   "slotOptions": {},
    "options": {
     "tooltip": [
      "rich"
@@ -2937,6 +3468,7 @@
     "bar-title",
     "bar-trailing"
    ],
+   "slotOptions": {},
    "options": {
     "bar": [
      "center",