{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "task-list",
  "name": "Task list",
  "category": "Forms",
  "description": "A checklist where a finished task is struck through as the box is ticked.",
  "tags": [
    "task list",
    "todo",
    "checklist",
    "to-do list",
    "tasks",
    "done",
    "strike through"
  ],
  "requiresJs": false,
  "license": "LicenseRef-MIAN-1.0",
  "composition": {
    "role": null,
    "intents": [
      "todo list",
      "checklist with strike through",
      "tasks",
      "launch checklist"
    ],
    "prominence": null,
    "density": null,
    "worksAfter": [],
    "worksBefore": [],
    "alternatives": [
      "onboarding",
      "list"
    ],
    "avoid": null
  },
  "url": "https://mian.ro/components/task-list",
  "markdownUrl": "https://mian.ro/ai/components/task-list.md",
  "classes": [
    {
      "name": "mn-tasks",
      "description": "On a <ul>."
    },
    {
      "name": "mn-task",
      "description": "One task: a <label> holding an mn-checkbox and a <span> with the text."
    },
    {
      "name": "mn-task-meta",
      "description": "A due date or an owner at the end of the row."
    }
  ],
  "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."
  ],
  "examples": [
    {
      "title": "Before launch",
      "description": null,
      "html": "<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>"
    }
  ],
  "css": ".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; }",
  "js": null,
  "install": {
    "css": "https://mian.ro/dist/mian.css",
    "js": null,
    "registryItem": "https://mian.ro/r/task-list.json"
  }
}