{
  "context": "Evaluates how the solution uses @fortawesome/vue-fontawesome layered containers, icons, and text helpers to build the stacked notification badge described in the spec. Scoring rewards correct use of provided props (position, fixedWidth, size/transform) instead of custom DOM or SVG hacks.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "Layers wrapper",
      "description": "Uses FontAwesomeLayers to wrap all icon/text children so stacking relies on the package's fa-layers behavior rather than custom absolute positioning.",
      "max_score": 25
    },
    {
      "name": "Badge overlay",
      "description": "Renders badgeValue via FontAwesomeLayersText (or equivalent text helper) with its position prop set for the chosen corner and applies badgeColor styling while keeping the base icon centered.",
      "max_score": 25
    },
    {
      "name": "Dual icons",
      "description": "Stacks base and overlay icons as separate FontAwesomeIcon children inside the layer wrapper, leveraging size/transform props for alignment instead of manual SVG manipulation.",
      "max_score": 20
    },
    {
      "name": "Fixed width",
      "description": "Honors the fixedWidth prop by passing it to FontAwesomeLayers so the component emits the package's fixed-width class rather than custom spacing hacks.",
      "max_score": 15
    },
    {
      "name": "Badge toggle",
      "description": "Skips rendering FontAwesomeLayersText when badgeValue is empty/undefined to avoid empty badge markup while still rendering icons.",
      "max_score": 15
    }
  ]
}