{
  "element": "nve-progress-bar",
  "entrypoint": "@nvidia-elements/core/progress-bar/progress-bar.examples.json",
  "items": [
    {
      "id": "progress-bar",
      "name": "Default",
      "template": "<nve-progress-bar value=\"50\"></nve-progress-bar>\n",
      "summary": "Standard progress bar for representing completion levels from 0% to 100% for task tracking.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "progress-bar-status",
      "name": "Status",
      "template": "<div nve-layout=\"column gap:md pad:lg full\">\n  <nve-progress-bar value=\"0\"></nve-progress-bar>\n  <nve-progress-bar value=\"10\"></nve-progress-bar>\n  <nve-progress-bar status=\"accent\" value=\"25\"></nve-progress-bar>\n  <nve-progress-bar status=\"success\" value=\"50\"></nve-progress-bar>\n  <nve-progress-bar status=\"warning\" value=\"75\"></nve-progress-bar>\n  <nve-progress-bar status=\"danger\" value=\"100\"></nve-progress-bar>\n</div>\n",
      "summary": "Progress bars with different status colors showing completion levels from 0% to 100% for task tracking.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "progress-bar-max",
      "name": "Max",
      "template": "<div nve-layout=\"column gap:md pad:lg full\">\n  <nve-progress-bar status=\"accent\" value=\"25\" max=\"50\"></nve-progress-bar>\n  <nve-progress-bar status=\"accent\" value=\"45\" max=\"50\"></nve-progress-bar>\n</div>\n",
      "summary": "Progress bars with custom max values for representing non-percentage based progress like file counts or steps.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "progress-bar-labeled",
      "name": "Labeled",
      "template": "<div nve-layout=\"column gap:xs pad:lg align:horizontal-stretch full\">\n  <div nve-layout=\"row align:space-between\">\n    <p nve-text=\"label sm\">Upload Status</p>\n    <p nve-text=\"label emphasis sm\">80%</p>\n  </div>\n  <nve-progress-bar status=\"accent\" value=\"80\"></nve-progress-bar>\n</div>\n",
      "summary": "Use a labeled progress bar with percentage display to communicate upload or task status.",
      "description": "",
      "composition": false,
      "tags": [
        "pattern"
      ]
    },
    {
      "id": "progress-bar-indeterminate",
      "name": "Indeterminate",
      "template": "<nve-progress-bar></nve-progress-bar>\n",
      "summary": "Indeterminate progress bar for showing activity when completion time is unknown, like loading or processing.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "progress-bar-indeterminate-status-colors",
      "name": "IndeterminateStatusColors",
      "template": "<div nve-layout=\"column gap:md full\">\n  <nve-progress-bar status=\"accent\"></nve-progress-bar>\n  <nve-progress-bar status=\"warning\"></nve-progress-bar>\n  <nve-progress-bar status=\"danger\"></nve-progress-bar>\n</div>\n",
      "summary": "Progress bars display as an animated loading indicator when no `value` attribute exists.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "progress-bar-indeterminate-custom-color",
      "name": "IndeterminateCustomColor",
      "template": "<nve-progress-bar\n  style=\"--accent-color: var(--nve-sys-accent-primary-background); --height: var(--nve-ref-size-150); --opacity: 1\"\n></nve-progress-bar>\n",
      "summary": "Indeterminate progress bar with custom color, height, and opacity for brand-specific styling and visual emphasis.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "progress-bar-custom-heights",
      "name": "CustomHeights",
      "template": "<div nve-layout=\"column gap:md full\">\n  <nve-progress-bar style=\"--height: var(--nve-ref-size-100)\"></nve-progress-bar>\n  <nve-progress-bar style=\"--height: var(--nve-ref-size-200)\"></nve-progress-bar>\n  <nve-progress-bar style=\"--height: var(--nve-ref-size-300)\"></nve-progress-bar>\n</div>\n",
      "summary": "Progress bars with custom heights for different visual prominence levels and layout requirements.",
      "description": "The progress bar's height accepts customization through the `--height` CSS custom property. This allows you to create progress bars that match your application's visual hierarchy and emphasis needs. For consistency and theming, use design system tokens, but any value that suits your layout also works.",
      "composition": false,
      "tags": [
        "test-case"
      ]
    }
  ]
}