{
  "$schema": "../schemas/component-contract.schema.json",
  "id": "textfield",
  "version": "2.0.0",
  "name": "TextField",
  "category": "form-input",
  "appStatus": "implemented",
  "intent": "テキスト入力フィールド。Default / Error / Disabled / Success の4状態。",
  "docPath": "components/textfield.md",
  "anatomy": ["label", "input", "helperText?", "errorMessage?"],
  "variants": {
    "default": {
      "description": "標準入力",
      "tokenRefs": {
        "border": "color.semantic.light.input-border",
        "bg": "color.semantic.light.input-bg",
        "radius": "radius.md"
      },
      "tailwind": "w-full px-3 py-2 text-base border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500/50 caret-primary-500"
    },
    "error": {
      "description": "エラー状態",
      "tokenRefs": {
        "border": "color.status.danger.base",
        "radius": "radius.md"
      },
      "tailwind": "w-full px-3 py-2 text-base border border-red-300 rounded-lg focus:ring-2 focus:ring-red-600/50 bg-red-50"
    },
    "disabled": {
      "description": "無効状態",
      "tokenRefs": {
        "border": "color.semantic.light.border-default",
        "radius": "radius.md"
      },
      "tailwind": "w-full px-3 py-2 text-base border border-slate-200 rounded-lg bg-slate-100 text-slate-400 cursor-not-allowed"
    },
    "success": {
      "description": "成功状態",
      "tokenRefs": {
        "border": "color.status.success.base",
        "radius": "radius.md"
      },
      "tailwind": "w-full px-3 py-2 text-base border border-emerald-300 rounded-lg focus:ring-2 focus:ring-emerald-500/50"
    }
  },
  "sizes": {
    "small":  { "height": 36, "tailwind": "px-3 py-1.5 text-sm", "icon": 16 },
    "medium": { "height": 42, "tailwind": "px-3 py-2 text-base", "icon": 20 },
    "large":  { "height": 48, "tailwind": "px-3 py-2.5 text-lg", "icon": 20 }
  },
  "states": ["default", "hover", "focus", "error", "disabled", "success"],
  "a11y": {
    "role": "textbox",
    "required": ["label association", "aria-invalid (error state)", "aria-describedby (error message)"],
    "keyboard": ["Tab"],
    "focusRing": "focus:ring-2 focus:ring-primary-500/50"
  },
  "rules": [
    { "id": "TYPO_NO_PLACEHOLDER_ONLY", "severity": "error" },
    { "id": "FORM_NO_LABEL_OMIT", "severity": "error" },
    { "id": "FORM_NO_COLOR_ONLY_ERROR", "severity": "error" },
    { "id": "FORM_NO_DISTANT_ERROR", "severity": "error" }
  ],
  "htmlSample": {
    "default": "<div class=\"leading-normal\"><label class=\"block text-sm font-medium text-slate-900 mb-1.5\">メール</label><input type=\"email\" class=\"w-full px-3 py-2 text-base border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500/50 caret-primary-500\" placeholder=\"user@example.com\"></div>",
    "error": "<div class=\"leading-normal\"><label class=\"block text-sm font-medium text-slate-900 mb-1.5\">メール</label><input type=\"email\" aria-invalid=\"true\" aria-describedby=\"email-error\" class=\"w-full px-3 py-2 text-base border border-red-300 rounded-lg focus:ring-2 focus:ring-red-600/50 bg-red-50\"><p id=\"email-error\" class=\"text-sm text-red-600 mt-1\">有効なメールアドレスを入力してください</p></div>"
  }
}