{
  "$schema": "../schemas/component-contract.schema.json",
  "id": "skeleton",
  "version": "2.0.0",
  "name": "Skeleton",
  "category": "feedback",
  "appStatus": "implemented",
  "intent": "ローディングプレースホルダー。aria-busy=\"true\"必須。",
  "docPath": "components/skeleton.md",
  "anatomy": [
    "container",
    "circle?",
    "bar",
    "srOnlyText"
  ],
  "variants": {
    "text": {
      "description": "テキスト行のプレースホルダー",
      "tokenRefs": {
        "bg": "color.semantic.light.border-default",
        "radius": "radius.sm"
      },
      "tailwind": "bg-slate-200 rounded-md h-4 w-full skeleton-pulse"
    },
    "card": {
      "description": "カード型のスケルトン（アバター＋テキスト行）",
      "tokenRefs": {
        "bg": "color.semantic.light.bg-surface",
        "border": "color.semantic.light.border-default",
        "radius": "radius.lg",
        "elevation": "elevation.sm"
      },
      "tailwind": "bg-white rounded-xl border border-slate-200 p-6 shadow-sm"
    },
    "circle": {
      "description": "アバター等の円形プレースホルダー",
      "tokenRefs": {
        "bg": "color.semantic.light.border-default",
        "radius": "radius.full"
      },
      "tailwind": "bg-slate-200 rounded-full w-10 h-10 skeleton-pulse"
    }
  },
  "sizes": {},
  "states": [
    "default",
    "loading",
    "loaded"
  ],
  "a11y": {
    "role": "status",
    "required": [
      "aria-busy=\"true\"",
      "aria-label=\"読み込み中\""
    ],
    "keyboard": [],
    "focusRing": "N/A"
  },
  "rules": [
    {
      "id": "SKELETON_ARIA_BUSY_REQUIRED",
      "severity": "error"
    },
    {
      "id": "SKELETON_ARIA_BUSY_RELEASE",
      "severity": "error"
    },
    {
      "id": "SKELETON_BG_SLATE_200_ONLY",
      "severity": "error"
    },
    {
      "id": "SKELETON_NO_SPINNER_ONLY",
      "severity": "warn"
    },
    {
      "id": "MOTION_REDUCED_MOTION_REQUIRED",
      "severity": "error"
    }
  ],
  "htmlSample": "<div aria-busy=\"true\" role=\"status\" aria-label=\"読み込み中\" class=\"bg-slate-200 rounded-md h-4 w-full skeleton-pulse\"></div>",
  "platformSemantics": {
    "elevation": "APP は製品テーマに合わせて影なしを明示選択できる。省略時は従来の影を維持する。影なし時は押下中も elevation.none のみを読み、sm/md を参照しない。Skeleton の text/circle はカードの elevation を参照しない。"
  }
}