{
  "id": "touch-target",
  "type": "foundation",
  "status": "published",
  "name": {
    "zh": "触控目标",
    "en": "Touch Target"
  },
  "aliases": [
    "触控目标",
    "点击热区",
    "可点区域",
    "按钮太小点不到",
    "手指点得中的范围",
    "点按热区",
    "touch target",
    "tap target"
  ],
  "category": [
    "Accessibility",
    "Interaction",
    "Foundation"
  ],
  "description": {
    "zh": "触控目标是手指能点中的可交互范围，不等于图标看起来多大。苹果 HIG 建议至少 44×44 CSS 像素，Material 建议 48dp；相邻目标之间还要留约 8px 间距，避免误触。视觉小图标可以用透明内边距或伪元素把热区撑大，而不用改变外观。",
    "en": "A touch target is the tappable area a finger must hit, not the icon size. Aim for 44×44 CSS px (48dp), about 8px between targets, and pad small icons to size."
  },
  "use_when": [
    {
      "zh": "任何需要手指或鼠标点击、拖动的可交互控件",
      "en": "Any control a finger or pointer taps, drags or presses"
    },
    {
      "zh": "图标按钮、关闭按钮、列表行等视觉尺寸偏小的元素",
      "en": "Icon buttons, close buttons and list rows that look small"
    },
    {
      "zh": "边缘或角落里的操作，容易和相邻目标一起点到",
      "en": "Edge and corner actions that sit close to their neighbours"
    }
  ],
  "avoid_when": [
    {
      "zh": "纯展示、不可点击的图标与装饰元素",
      "en": "Decorative icons that are never interactive"
    },
    {
      "zh": "桌面端密集数据表格内的单元格选择",
      "en": "Dense desktop data grids where cells are selected intentionally"
    },
    {
      "zh": "把热区无节制扩大导致相邻目标重叠",
      "en": "Blowing up hit areas until neighbouring targets overlap"
    }
  ],
  "tags": [
    "accessibility",
    "foundation",
    "interaction",
    "ergonomics"
  ],
  "api": [
    "min-height",
    "min-width",
    "padding",
    "touch-action"
  ],
  "framework_names": [
    {
      "framework": "Apple HIG",
      "name": "44×44 pt",
      "url": "https://developer.apple.com/design/human-interface-guidelines/accessibility",
      "note": {
        "zh": "苹果建议的最小可点尺寸",
        "en": "Apple's recommended minimum tappable size"
      }
    },
    {
      "framework": "Material Design",
      "name": "48×48 dp",
      "url": "https://m3.material.io/foundations/accessible-design/overview",
      "note": {
        "zh": "Material 建议的最小触控目标",
        "en": "Material's minimum touch target"
      }
    },
    {
      "framework": "WCAG 2.2",
      "name": "Target Size (Minimum) — 24×24",
      "url": "https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html",
      "note": {
        "zh": "WCAG 的合规底线，产品应做得更大",
        "en": "The accessibility floor — ship larger in practice"
      }
    }
  ],
  "variants": [
    {
      "id": "comfortable",
      "name": {
        "zh": "舒适大热区",
        "en": "Comfortable"
      },
      "note": {
        "zh": "热区 44×44 起，主操作最稳妥",
        "en": "Hit area from 44×44 — safest for primary actions"
      }
    },
    {
      "id": "padded-icon",
      "name": {
        "zh": "图标加内边距",
        "en": "Padded icon"
      },
      "note": {
        "zh": "视觉 24px，靠透明 padding 撑到 44px",
        "en": "24px glyph grown to 44px with transparent padding"
      }
    },
    {
      "id": "inline-text",
      "name": {
        "zh": "行内文字链",
        "en": "Inline text link"
      },
      "note": {
        "zh": "用行高与内边距扩热区，不改视觉",
        "en": "Extend the hit area with line-height and padding"
      }
    }
  ],
  "anatomy": [
    "可见尺寸（Visual size）",
    "热区（Hit area）",
    "目标间距（Target spacing）",
    "触控最小边（Minimum edge）"
  ],
  "related": [
    {
      "id": "breakpoints",
      "relation": "similar_to"
    },
    {
      "id": "button",
      "relation": "used_with"
    },
    {
      "id": "fab",
      "relation": "used_with"
    },
    {
      "id": "focus-ring",
      "relation": "used_with"
    }
  ],
  "demo": {
    "component": "touch-target",
    "modes": [
      "default",
      "dark",
      "variants"
    ]
  },
  "sources": [
    {
      "name": "Apple HIG — Accessibility",
      "url": "https://developer.apple.com/design/human-interface-guidelines/accessibility"
    },
    {
      "name": "Material Design — Accessible design",
      "url": "https://m3.material.io/foundations/accessible-design/overview"
    },
    {
      "name": "W3C WAI — WCAG 2.2 Target Size (Minimum)",
      "url": "https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html"
    }
  ],
  "implementation": {
    "css": [
      "min-height: 44px",
      "min-width: 44px",
      "padding: 10px",
      "touch-action: manipulation",
      "aspect-ratio: 1"
    ],
    "notes": {
      "zh": "给可交互元素设 min-width / min-height: 44px（或 48px），并在容器上用 gap 保证目标间距，而不是靠 margin 互相挤。图标视觉保持 24px，用 padding: 10px 把热区补到 44px；不方便加 padding 时用 ::before { content: ''; position: absolute; inset: -10px; } 扩展热区。onmouseover 出现的内容不算触控目标。触摸端加 touch-action: manipulation 去掉 300ms 双击缩放延迟。",
      "en": "Give interactive elements min-width / min-height: 44px (or 48px) and use gap on the container for spacing instead of margins. Keep the glyph at 24px and pad it to 44px; when padding is awkward, expand with ::before { content: ''; position: absolute; inset: -10px; }. Content only revealed on hover is not a valid target. On touch devices add touch-action: manipulation to drop the 300ms double-tap delay."
    }
  },
  "prompts": {
    "basic": {
      "zh": "统一可交互控件的触控目标尺寸，让手指在手机上都能轻松点中。",
      "en": "Unify touch target sizes across controls so every action is easy to tap on a phone."
    },
    "design": {
      "zh": "触控目标规范：可点区域至少 44×44 CSS 像素（Material 48dp）；相邻目标之间留 8px 以上间距；视觉小于 44px 的图标用透明内边距或伪元素补足热区；默认图标 24px 配 10px 内边距达到 44px；列表行高不低于 44px；任何操作都不应只能 hover 触发。",
      "en": "Touch target spec: tappable area at least 44×44 CSS px (Material 48dp); 8px or more between neighbours; pad small glyphs up to the minimum with transparent padding or a pseudo-element; the default 24px icon plus 10px padding reaches 44px; list rows no shorter than 44px; no action should be hover-only."
    },
    "implementation": {
      "zh": "用 min-height: 44px; min-width: 44px 给按钮、图标按钮和列表行兜底，容器用 display: flex; gap: 8px 控制间距。图标热区不足时用 padding 或 ::before 的负 inset 扩展，不要放大图标本身。用 :active / :focus-visible 给出命中反馈。检查所有触控目标在 320px 宽屏下不重叠。",
      "en": "Back buttons, icon buttons and list rows with min-height: 44px; min-width: 44px, and space them with display: flex; gap: 8px. When an icon's hit area is short, extend it with padding or a negative-inset ::before rather than enlarging the glyph. Provide :active / :focus-visible feedback. Verify no targets overlap at 320px wide."
    },
    "agent": {
      "zh": "在当前项目中落实触控目标尺寸。\n先检查现有组件体系和 Design Token，优先复用当前组件。\n要求：\n- 所有可交互元素热区至少 44×44 CSS 像素，间距不少于 8px\n- 小图标用内边距或伪元素扩展热区，不改变视觉尺寸\n- 提供可见的按下与聚焦反馈，不依赖 hover\n保持现有项目视觉风格。不要新增不必要依赖。\n尊重 prefers-reduced-motion。\n完成后运行项目现有检查，并列出修改的文件。",
      "en": "Enforce touch target sizes in the current project.\nInspect the existing component system and design tokens first; reuse what is already there.\nRequirements:\n- Every interactive element has a hit area of at least 44×44 CSS px with 8px spacing\n- Small icons extend their hit area via padding or pseudo-elements without changing visual size\n- Provide visible press and focus feedback; never rely on hover\nKeep the project's existing visual style. Do not add unnecessary dependencies.\nRespect prefers-reduced-motion.\nRun existing project checks when done and list the modified files."
    }
  }
}