{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "progress-breakdown",
  "title": "Progress Breakdown",
  "type": "registry:block",
  "description": "Labeled progress bars in a SectionCard. Spell rows out inline with ProgressItem — each bar takes colorIndex to cycle through chart-1..5 colors.",
  "categories": [
    "analytics",
    "dashboard"
  ],
  "files": [
    {
      "path": "packages/elements-lit/src/blocks/progress-breakdown/progress-breakdown.ts",
      "content": "import { LitElement, css, html } from 'lit'\nimport { tailwind } from '../../lib/styles'\nimport { ThemeController } from '../../lib/theme'\n// Side-effect imports: register the composed elements for standalone use\n// (consumers who install only this block still get working primitives).\nimport '../../components/section-card/section-card'\nimport '../../components/progress-item/progress-item'\n\n/**\n * <uip-progress-breakdown> — the registry ProgressBreakdown block as a web component.\n *\n * A <uip-section-card> whose rows are slotted <uip-progress-item> children\n * (React's `children`). `title` is `heading` (`title` is taken by\n * HTMLElement); `description` maps as-is. React's `headerIcon` component prop\n * has no HTML equivalent — slot your own icon with `slot=\"header-action\"`\n * (the demo does this with the trending-up mark). Rows go in the default\n * slot; wrap them in a flex column with a gap (React's\n * contentClassName=\"space-y-4\" — space-y can't target slotted children).\n * No events.\n */\nexport class UipProgressBreakdown extends LitElement {\n  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }\n  // :host display can't be a utility class (the host has no template of its own).\n  static styles = [tailwind, css`:host { display: block; }`]\n\n  static properties = {\n    heading: {},\n    description: {},\n  }\n\n  heading = 'Breakdown'\n  description?: string\n\n  constructor() {\n    super()\n    new ThemeController(this)\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.setAttribute('data-uipkge', '')\n    this.setAttribute('data-slot', 'progress-breakdown')\n  }\n\n  render() {\n    // data-slot lives on this wrapper: <uip-section-card> stamps its own\n    // data-slot=\"section-card\" on connect, which would clobber the block slot.\n    return html`\n      <div data-slot=\"progress-breakdown\">\n        <uip-section-card heading=${this.heading} description=${this.description ?? ''}>\n          <slot name=\"header-action\" slot=\"header-action\"></slot>\n          <slot></slot>\n        </uip-section-card>\n      </div>\n    `\n  }\n}\n\ncustomElements.get('uip-progress-breakdown') || customElements.define('uip-progress-breakdown', UipProgressBreakdown)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uip-progress-breakdown': UipProgressBreakdown\n  }\n}\n",
      "type": "registry:file",
      "target": "src/uip/blocks/progress-breakdown/progress-breakdown.ts"
    }
  ],
  "dependencies": [
    "lit"
  ],
  "registryDependencies": [
    "https://uipkge.dev/r/lit/lit-core.json",
    "https://uipkge.dev/r/lit/progress-item.json",
    "https://uipkge.dev/r/lit/section-card.json"
  ]
}