{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "task-list",
  "type": "registry:ui",
  "title": "Task list (MIAN)",
  "description": "A checklist where a finished task is struck through as the box is ticked.",
  "categories": [
    "forms",
    "task list",
    "todo",
    "checklist",
    "to-do list"
  ],
  "registryDependencies": [
    "https://mian.ro/r/mian-base.json"
  ],
  "files": [
    {
      "path": "mian/components/task-list.css",
      "type": "registry:file",
      "target": "mian/components/task-list.css",
      "content": ".mn-tasks { display: grid; gap: .35rem; margin: 0; padding: 0; list-style: none; }\n.mn-task { position: relative; display: flex; align-items: center; gap: .7rem; padding: .6rem .8rem; border: var(--mn-border-w) solid var(--mn-border); border-radius: var(--mn-radius-field); background: var(--mn-card); color: var(--mn-fg); font-size: var(--mn-text-sm); cursor: pointer; transition: background-color var(--mn-duration) var(--mn-ease), border-color var(--mn-duration) var(--mn-ease); }\n.mn-task:hover { border-color: color-mix(in oklab, var(--mn-border), var(--mn-fg) 25%); }\n.mn-task > span { position: relative; min-width: 0; transition: color var(--mn-dur) var(--mn-ease-out); }\n.mn-task > span::after { content: \"\"; position: absolute; left: 0; top: 55%; width: 100%; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform var(--mn-dur-slow) var(--mn-ease-out); }\n.mn-task:has(input:checked) > span { color: var(--mn-muted); }\n.mn-task:has(input:checked) > span::after { transform: scaleX(1); }\n.mn-task:has(input:focus-visible) { outline: 2px solid var(--mn-ring); outline-offset: 2px; }\n.mn-task-meta { margin-inline-start: auto; flex: none; color: var(--mn-muted); font-size: .75rem; }"
    },
    {
      "path": "mian/examples/task-list.html",
      "type": "registry:file",
      "target": "mian/examples/task-list.html",
      "content": "<!-- Before launch -->\n<ul class=\"mn-tasks\" style=\"width:min(100%,26rem)\">\n  <li><label class=\"mn-task\"><input class=\"mn-checkbox\" type=\"checkbox\" checked><span>Replace placeholder photographs</span><span class=\"mn-task-meta\">Done</span></label></li>\n  <li><label class=\"mn-task\"><input class=\"mn-checkbox\" type=\"checkbox\" checked><span>Check both colour modes</span><span class=\"mn-task-meta\">Done</span></label></li>\n  <li><label class=\"mn-task\"><input class=\"mn-checkbox\" type=\"checkbox\"><span>Tab through every page</span><span class=\"mn-task-meta\">Today</span></label></li>\n  <li><label class=\"mn-task\"><input class=\"mn-checkbox\" type=\"checkbox\"><span>Read the copy aloud</span><span class=\"mn-task-meta\">Tomorrow</span></label></li>\n</ul>"
    }
  ],
  "docs": "MIAN components are HTML + CSS classes, not React components. The styles are already included in mian-base; this item adds the component's CSS section and example markup for reference. Docs: https://mian.ro/components/task-list",
  "meta": {
    "mian": {
      "license": "LicenseRef-MIAN-1.0",
      "requiresJs": false,
      "classes": [
        "mn-tasks",
        "mn-task",
        "mn-task-meta"
      ],
      "accessibility": [
        "Each task is a real checkbox with its text as the label, so the whole row is the hit area.",
        "Done is conveyed by the checked state, not only by the line through the text.",
        "The line draws in 360 ms and not at all under reduced motion."
      ],
      "intents": [
        "todo list",
        "checklist with strike through",
        "tasks",
        "launch checklist"
      ]
    }
  }
}