{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "progress-item",
  "title": "Progress Item",
  "type": "registry:ui",
  "description": "Labeled progress row — item name on the left, progress bar in the middle, percent or count on the right. Use for batched task lists, file upload queues, or onboarding checklists.",
  "categories": [
    "feedback"
  ],
  "files": [
    {
      "path": "packages/elements-lit/src/components/progress-item/progress-item.ts",
      "content": "import { LitElement, css, html } from 'lit'\nimport { cn } from '../../lib/utils'\nimport { tailwind } from '../../lib/styles'\nimport { ThemeController } from '../../lib/theme'\nimport '../progress/progress'\n\n// Maps to canonical shadcn chart tokens (chart-1..5). Cycles through 5 hues.\n// React targets `[&_[data-slot=progress-indicator]]`, which can't see into\n// <uip-progress>'s shadow root, so the same colours go on its `indicator` part.\nconst barColors = [\n  '[&::part(indicator)]:bg-primary',\n  '[&::part(indicator)]:bg-[var(--chart-1)]',\n  '[&::part(indicator)]:bg-[var(--chart-2)]',\n  '[&::part(indicator)]:bg-[var(--chart-3)]',\n  '[&::part(indicator)]:bg-[var(--chart-4)]',\n  '[&::part(indicator)]:bg-[var(--chart-5)]',\n]\n\n/**\n * <uip-progress-item> — the registry ProgressItem: a label / value row over a\n * <uip-progress>.\n *\n * The inner progress re-exports its parts, so the indicator colour can be set\n * from outside and wins over `color-index` (React: \"barClass takes precedence\"):\n * React's `barClass` → `class=\"[&::part(indicator)]:bg-emerald-500\"` (the bar\n * colour) or `[&::part(progress)]:…` (the track) on the host. Parts: `base`\n * (the row), `progress` (the track) and `indicator`.\n */\nexport class UipProgressItem extends LitElement {\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    label: {},\n    value: { type: Number },\n    secondaryLabel: { attribute: 'secondary-label' },\n    colorIndex: { type: Number, attribute: 'color-index' },\n  }\n\n  label = ''\n  value = 0\n  secondaryLabel?: string\n  colorIndex?: number\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-item')\n  }\n\n  render() {\n    const colorClass = this.colorIndex !== undefined ? barColors[this.colorIndex % barColors.length] : ''\n    return html`<div part=\"base\" data-uipkge=\"\" data-slot=\"progress-item\" class=\"group/progress space-y-1.5\">\n      <div class=\"flex items-center justify-between text-sm\">\n        <span class=\"font-medium\">${this.label}</span>\n        <span class=\"text-muted-foreground text-xs tabular-nums\">${this.secondaryLabel ?? `${this.value}%`}</span>\n      </div>\n      <uip-progress\n        exportparts=\"base: progress, indicator\"\n        .value=${this.value}\n        class=${cn(\n          '[&::part(base)]:h-2 [&::part(base)]:transition-colors [&::part(base)]:duration-200',\n          colorClass,\n        )}\n      ></uip-progress>\n    </div>`\n  }\n}\n\ncustomElements.get('uip-progress-item') || customElements.define('uip-progress-item', UipProgressItem)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uip-progress-item': UipProgressItem\n  }\n}\n",
      "type": "registry:file",
      "target": "src/uip/components/progress-item/progress-item.ts"
    }
  ],
  "dependencies": [
    "lit"
  ],
  "registryDependencies": [
    "https://uipkge.dev/r/lit/lit-core.json",
    "https://uipkge.dev/r/lit/progress.json"
  ]
}