{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "breakdown",
  "name": "Breakdown",
  "category": "Data display",
  "description": "How a total splits into parts: one stacked bar and a list with each part’s value and share.",
  "tags": [
    "breakdown",
    "stacked bar",
    "share",
    "distribution",
    "by channel",
    "by category",
    "legend",
    "composition",
    "dashboard"
  ],
  "requiresJs": false,
  "license": "LicenseRef-MIAN-1.0",
  "composition": {
    "role": null,
    "intents": [
      "stacked bar with legend",
      "share by category",
      "traffic sources",
      "sales by channel",
      "budget split"
    ],
    "prominence": null,
    "density": null,
    "worksAfter": [],
    "worksBefore": [],
    "alternatives": [
      "chart",
      "funnel"
    ],
    "avoid": null
  },
  "url": "https://mian.ro/components/breakdown",
  "markdownUrl": "https://mian.ro/ai/components/breakdown.md",
  "classes": [
    {
      "name": "mn-breakdown",
      "description": "The bar and its list."
    },
    {
      "name": "mn-breakdown-bar",
      "description": "The stacked bar. Each <i> takes --v, its share."
    },
    {
      "name": "mn-breakdown-list",
      "description": "One row per part, in the same order: label, value (<b>), share (<small>). The swatch is drawn for you."
    }
  ],
  "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”."
  ],
  "examples": [
    {
      "title": "Traffic by source",
      "description": null,
      "html": "<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>"
    }
  ],
  "css": ".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)); }",
  "js": null,
  "install": {
    "css": "https://mian.ro/dist/mian.css",
    "js": null,
    "registryItem": "https://mian.ro/r/breakdown.json"
  }
}