{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "comparison",
  "type": "registry:ui",
  "title": "Comparison table (MIAN)",
  "description": "Plans or products side by side: grouped feature rows, included and not-included marks, a highlighted column and a sticky header.",
  "categories": [
    "sections",
    "comparison table",
    "compare plans",
    "feature comparison",
    "pricing table"
  ],
  "registryDependencies": [
    "https://mian.ro/r/mian-base.json"
  ],
  "files": [
    {
      "path": "mian/components/comparison.css",
      "type": "registry:file",
      "target": "mian/components/comparison.css",
      "content": ".mn-compare { min-width: 36rem; }\n.mn-compare thead th { position: sticky; top: 0; z-index: 1; background: var(--mn-surface); vertical-align: bottom; font: var(--mn-heading-weight) 1rem/1.3 var(--mn-font-heading); }\n.mn-compare thead th small { display: block; margin-top: .15rem; color: inherit; font: 400 var(--mn-text-sm) var(--mn-font); font-variant-numeric: tabular-nums; }\n.mn-compare tbody th[scope=\"row\"] { font-weight: 400; color: var(--mn-fg); }\n.mn-compare th[scope=\"row\"], .mn-compare thead th:first-child { position: sticky; left: 0; background: var(--mn-surface); }\n.mn-compare td { text-align: center; font-variant-numeric: tabular-nums; }\n.mn-compare thead th:not(:first-child) { text-align: center; }\n.mn-compare .mn-compare-featured { background: color-mix(in oklab, var(--mn-primary) 7%, var(--mn-surface)); }\n.mn-compare-group th { padding-top: 1.25rem; background: none; color: var(--mn-muted); font: 600 .75rem/1 var(--mn-font); letter-spacing: .06em; text-transform: uppercase; text-align: start; }\n.mn-compare-yes { display: inline-grid; place-items: center; color: var(--mn-primary-text); }\n.mn-compare-yes svg { width: 1.1rem; height: 1.1rem; }\n.mn-compare-no { display: inline-block; width: .8rem; height: 2px; vertical-align: middle; background: var(--mn-input); }"
    },
    {
      "path": "mian/examples/comparison.html",
      "type": "registry:file",
      "target": "mian/examples/comparison.html",
      "content": "<!-- Compare plans -->\n<div class=\"mn-table-wrap\"><table class=\"mn-table mn-compare\">\n  <caption class=\"mn-sr-only\">Plan comparison</caption>\n  <thead><tr><th scope=\"col\">Feature</th><th scope=\"col\">Starter<small>€0</small></th><th scope=\"col\" class=\"mn-compare-featured\">Team<small>€12 / seat</small></th><th scope=\"col\">Business<small>€29 / seat</small></th></tr></thead>\n  <tbody>\n    <tr class=\"mn-compare-group\"><th scope=\"colgroup\" colspan=\"4\">Books</th></tr>\n    <tr><th scope=\"row\">Entities</th><td>1</td><td class=\"mn-compare-featured\">5</td><td>Unlimited</td></tr>\n    <tr><th scope=\"row\">Bank feeds</th><td><span class=\"mn-compare-yes\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M20 6 9 17l-5-5\"/></svg><span class=\"mn-sr-only\">Included</span></span></td><td class=\"mn-compare-featured\"><span class=\"mn-compare-yes\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M20 6 9 17l-5-5\"/></svg><span class=\"mn-sr-only\">Included</span></span></td><td><span class=\"mn-compare-yes\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M20 6 9 17l-5-5\"/></svg><span class=\"mn-sr-only\">Included</span></span></td></tr>\n    <tr><th scope=\"row\">Multi-currency</th><td><span class=\"mn-compare-no\"><span class=\"mn-sr-only\">Not included</span></span></td><td class=\"mn-compare-featured\"><span class=\"mn-compare-yes\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M20 6 9 17l-5-5\"/></svg><span class=\"mn-sr-only\">Included</span></span></td><td><span class=\"mn-compare-yes\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M20 6 9 17l-5-5\"/></svg><span class=\"mn-sr-only\">Included</span></span></td></tr>\n    <tr class=\"mn-compare-group\"><th scope=\"colgroup\" colspan=\"4\">Control</th></tr>\n    <tr><th scope=\"row\">Approval flows</th><td><span class=\"mn-compare-no\"><span class=\"mn-sr-only\">Not included</span></span></td><td class=\"mn-compare-featured\"><span class=\"mn-compare-yes\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M20 6 9 17l-5-5\"/></svg><span class=\"mn-sr-only\">Included</span></span></td><td><span class=\"mn-compare-yes\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M20 6 9 17l-5-5\"/></svg><span class=\"mn-sr-only\">Included</span></span></td></tr>\n    <tr><th scope=\"row\">Audit log</th><td><span class=\"mn-compare-no\"><span class=\"mn-sr-only\">Not included</span></span></td><td class=\"mn-compare-featured\">90 days</td><td>Unlimited</td></tr>\n    <tr><th scope=\"row\">SSO</th><td><span class=\"mn-compare-no\"><span class=\"mn-sr-only\">Not included</span></span></td><td class=\"mn-compare-featured\"><span class=\"mn-compare-no\"><span class=\"mn-sr-only\">Not included</span></span></td><td><span class=\"mn-compare-yes\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M20 6 9 17l-5-5\"/></svg><span class=\"mn-sr-only\">Included</span></span></td></tr>\n  </tbody></table></div>"
    }
  ],
  "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/comparison",
  "meta": {
    "mian": {
      "license": "LicenseRef-MIAN-1.0",
      "requiresJs": false,
      "classes": [
        "mn-compare",
        "mn-compare-group",
        "mn-compare-featured",
        "mn-compare-yes · mn-compare-no"
      ],
      "accessibility": [
        "It is a real table: plans are column headers, features are row headers, so each cell is announced as “Team, Audit log, Included”.",
        "Marks carry visually hidden text; never rely on the tick alone.",
        "On narrow screens the table scrolls inside mn-table-wrap with the feature column kept visible."
      ],
      "intents": [
        "compare plans",
        "feature comparison table",
        "plan matrix",
        "versus competitors",
        "which plan"
      ]
    }
  }
}