{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "breakdown",
  "type": "registry:ui",
  "title": "Breakdown (MIAN)",
  "description": "How a total splits into parts: one stacked bar and a list with each part’s value and share.",
  "categories": [
    "data display",
    "breakdown",
    "stacked bar",
    "share",
    "distribution"
  ],
  "registryDependencies": [
    "https://mian.ro/r/mian-base.json"
  ],
  "files": [
    {
      "path": "mian/components/breakdown.css",
      "type": "registry:file",
      "target": "mian/components/breakdown.css",
      "content": ".mn-breakdown { display: grid; gap: .85rem; min-width: 0; }\n.mn-breakdown-bar { display: flex; gap: 2px; height: .7rem; border-radius: min(999px, var(--mn-radius-field)); overflow: hidden; }\n.mn-breakdown-bar > i { flex: var(--v, 1) 1 0; min-width: 3px; background: var(--_s); }\n.mn-breakdown-list { display: grid; margin: 0; padding: 0; list-style: none; font-size: var(--mn-text-sm); }\n.mn-breakdown-list > li { display: grid; grid-template-columns: .65rem minmax(0, 1fr) auto 3.25rem; align-items: center; gap: .65rem; padding: .45rem 0; color: var(--mn-fg); }\n.mn-breakdown-list > li + li { border-top: var(--mn-border-w) solid var(--mn-border); }\n.mn-breakdown-list > li::before { content: \"\"; width: .65rem; height: .65rem; border-radius: 2px; background: var(--_s); }\n.mn-breakdown-list b { font-weight: 600; font-variant-numeric: tabular-nums; }\n.mn-breakdown-list small { color: var(--mn-muted); font-size: .75rem; text-align: end; font-variant-numeric: tabular-nums; }\n:is(.mn-breakdown-bar, .mn-breakdown-list) > :nth-child(1) { --_s: var(--mn-series-1); }\n:is(.mn-breakdown-bar, .mn-breakdown-list) > :nth-child(2) { --_s: var(--mn-series-2); }\n:is(.mn-breakdown-bar, .mn-breakdown-list) > :nth-child(3) { --_s: var(--mn-series-3); }\n:is(.mn-breakdown-bar, .mn-breakdown-list) > :nth-child(4) { --_s: var(--mn-series-4); }\n:is(.mn-breakdown-bar, .mn-breakdown-list) > :nth-child(n+5) { --_s: color-mix(in oklab, var(--mn-fg) 28%, var(--mn-surface-2)); }"
    },
    {
      "path": "mian/examples/breakdown.html",
      "type": "registry:file",
      "target": "mian/examples/breakdown.html",
      "content": "<!-- Traffic by source -->\n<div class=\"mn-breakdown\" style=\"max-width:26rem\">\n  <div class=\"mn-breakdown-bar\" role=\"img\" aria-label=\"Search 46%, direct 28%, referrals 17%, email 9%\"><i style=\"--v:46\"></i><i style=\"--v:28\"></i><i style=\"--v:17\"></i><i style=\"--v:9\"></i></div>\n  <ul class=\"mn-breakdown-list\"><li><span>Search</span><b>18,420</b><small>46%</small></li><li><span>Direct</span><b>11,210</b><small>28%</small></li><li><span>Referrals</span><b>6,810</b><small>17%</small></li><li><span>Email</span><b>3,600</b><small>9%</small></li></ul>\n</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/breakdown",
  "meta": {
    "mian": {
      "license": "LicenseRef-MIAN-1.0",
      "requiresJs": false,
      "classes": [
        "mn-breakdown",
        "mn-breakdown-bar",
        "mn-breakdown-list"
      ],
      "accessibility": [
        "The bar is role=\"img\" with an aria-label listing the shares; the list is the accessible version of the same data.",
        "Keep the list and the bar in the same order so position, not only colour, links them.",
        "Four series colours are distinct; a fifth and later parts share a neutral: group small parts as “Other”."
      ],
      "intents": [
        "stacked bar with legend",
        "share by category",
        "traffic sources",
        "sales by channel",
        "budget split"
      ]
    }
  }
}