@teseor/css 1.14.2 → 1.15.0

package/src/components/feedback/progress/progress.docs.json

@@ -1,315 +0,0 @@
-{
-  "id": "progress",
-  "type": "component",
-  "title": "Progress",
-  "description": "Progress bar indicator showing completion status. Use aria-valuenow for accessibility.",
-  "api": "./progress.api.json",
-  "sections": [
-    {
-      "title": "Default",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-progress",
-              "attrs": {
-                "role": "progressbar",
-                "aria-valuenow": "60",
-                "aria-valuemin": "0",
-                "aria-valuemax": "100",
-                "aria-label": "Loading"
-              },
-              "children": [
-                { "tag": "div", "class": "ui-progress__bar", "attrs": { "style": "width: 60%;" } }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-progress\" role=\"progressbar\"\n     aria-valuenow=\"60\" aria-valuemin=\"0\" aria-valuemax=\"100\">\n  <div class=\"ui-progress__bar\" style=\"width: 60%;\"></div>\n</div>"
-        }
-      ]
-    },
-    {
-      "title": "Sizes",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "attrs": {
-                "style": "display: flex; flex-direction: column; gap: var(--ui-space-2);"
-              },
-              "children": [
-                {
-                  "tag": "div",
-                  "class": "ui-progress ui-progress--sm",
-                  "attrs": {
-                    "role": "progressbar",
-                    "aria-valuenow": "40",
-                    "aria-valuemin": "0",
-                    "aria-valuemax": "100"
-                  },
-                  "children": [
-                    {
-                      "tag": "div",
-                      "class": "ui-progress__bar",
-                      "attrs": { "style": "width: 40%;" }
-                    }
-                  ]
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-progress",
-                  "attrs": {
-                    "role": "progressbar",
-                    "aria-valuenow": "60",
-                    "aria-valuemin": "0",
-                    "aria-valuemax": "100"
-                  },
-                  "children": [
-                    {
-                      "tag": "div",
-                      "class": "ui-progress__bar",
-                      "attrs": { "style": "width: 60%;" }
-                    }
-                  ]
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-progress ui-progress--lg",
-                  "attrs": {
-                    "role": "progressbar",
-                    "aria-valuenow": "80",
-                    "aria-valuemin": "0",
-                    "aria-valuemax": "100"
-                  },
-                  "children": [
-                    {
-                      "tag": "div",
-                      "class": "ui-progress__bar",
-                      "attrs": { "style": "width: 80%;" }
-                    }
-                  ]
-                }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-progress ui-progress--sm\">...</div>\n<div class=\"ui-progress\">...</div>\n<div class=\"ui-progress ui-progress--lg\">...</div>"
-        }
-      ]
-    },
-    {
-      "title": "Colors",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "attrs": {
-                "style": "display: flex; flex-direction: column; gap: var(--ui-space-2);"
-              },
-              "children": [
-                {
-                  "tag": "div",
-                  "class": "ui-progress ui-progress--success",
-                  "attrs": {
-                    "role": "progressbar",
-                    "aria-valuenow": "100",
-                    "aria-valuemin": "0",
-                    "aria-valuemax": "100"
-                  },
-                  "children": [
-                    {
-                      "tag": "div",
-                      "class": "ui-progress__bar",
-                      "attrs": { "style": "width: 100%;" }
-                    }
-                  ]
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-progress ui-progress--warning",
-                  "attrs": {
-                    "role": "progressbar",
-                    "aria-valuenow": "60",
-                    "aria-valuemin": "0",
-                    "aria-valuemax": "100"
-                  },
-                  "children": [
-                    {
-                      "tag": "div",
-                      "class": "ui-progress__bar",
-                      "attrs": { "style": "width: 60%;" }
-                    }
-                  ]
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-progress ui-progress--danger",
-                  "attrs": {
-                    "role": "progressbar",
-                    "aria-valuenow": "25",
-                    "aria-valuemin": "0",
-                    "aria-valuemax": "100"
-                  },
-                  "children": [
-                    {
-                      "tag": "div",
-                      "class": "ui-progress__bar",
-                      "attrs": { "style": "width: 25%;" }
-                    }
-                  ]
-                }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-progress ui-progress--success\">...</div>\n<div class=\"ui-progress ui-progress--warning\">...</div>\n<div class=\"ui-progress ui-progress--danger\">...</div>"
-        }
-      ]
-    },
-    {
-      "title": "Striped",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-progress ui-progress--striped",
-              "attrs": {
-                "role": "progressbar",
-                "aria-valuenow": "70",
-                "aria-valuemin": "0",
-                "aria-valuemax": "100"
-              },
-              "children": [
-                { "tag": "div", "class": "ui-progress__bar", "attrs": { "style": "width: 70%;" } }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-progress ui-progress--striped\">\n  <div class=\"ui-progress__bar\" style=\"width: 70%;\"></div>\n</div>"
-        }
-      ]
-    },
-    {
-      "title": "Animated Stripes",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-progress ui-progress--striped ui-progress--animated",
-              "attrs": {
-                "role": "progressbar",
-                "aria-valuenow": "50",
-                "aria-valuemin": "0",
-                "aria-valuemax": "100"
-              },
-              "children": [
-                { "tag": "div", "class": "ui-progress__bar", "attrs": { "style": "width: 50%;" } }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-progress ui-progress--striped ui-progress--animated\">\n  <div class=\"ui-progress__bar\" style=\"width: 50%;\"></div>\n</div>"
-        }
-      ]
-    },
-    {
-      "title": "Indeterminate",
-      "description": "For unknown progress duration",
-      "api": "./progress.api.json",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-progress ui-progress--indeterminate",
-              "attrs": { "role": "progressbar", "aria-label": "Loading" },
-              "children": [{ "tag": "div", "class": "ui-progress__bar" }]
-            }
-          ],
-          "code": "<div class=\"ui-progress ui-progress--indeterminate\"\n     role=\"progressbar\" aria-label=\"Loading\">\n  <div class=\"ui-progress__bar\"></div>\n</div>"
-        }
-      ]
-    },
-    {
-      "title": "Typed Custom Property",
-      "description": "Set value via --ui-progress-value instead of inline width. The @property registration enables smooth CSS transitions when JS updates the value.",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "attrs": {
-                "style": "display: flex; flex-direction: column; gap: var(--ui-space-2);"
-              },
-              "children": [
-                {
-                  "tag": "div",
-                  "class": "ui-progress",
-                  "attrs": {
-                    "role": "progressbar",
-                    "aria-valuenow": "25",
-                    "aria-valuemin": "0",
-                    "aria-valuemax": "100"
-                  },
-                  "children": [
-                    {
-                      "tag": "div",
-                      "class": "ui-progress__bar",
-                      "style": { "--ui-progress-value": "25%" }
-                    }
-                  ]
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-progress",
-                  "attrs": {
-                    "role": "progressbar",
-                    "aria-valuenow": "75",
-                    "aria-valuemin": "0",
-                    "aria-valuemax": "100"
-                  },
-                  "children": [
-                    {
-                      "tag": "div",
-                      "class": "ui-progress__bar",
-                      "style": { "--ui-progress-value": "75%" }
-                    }
-                  ]
-                }
-              ]
-            }
-          ],
-          "code": "<!-- CSS-only smooth transitions via @property -->\n<div class=\"ui-progress\" role=\"progressbar\" aria-valuenow=\"75\">\n  <div class=\"ui-progress__bar\"\n       style=\"--ui-progress-value: 75%;\"></div>\n</div>\n\n<!-- Update from JS: el.style.setProperty('--ui-progress-value', '90%') -->"
-        }
-      ]
-    }
-  ],
-  "customization": [
-    {
-      "token": "--ui-progress-height",
-      "default": "calc(var(--ui-unit) * 1)",
-      "description": "Bar height"
-    },
-    {
-      "token": "--ui-progress-bg",
-      "default": "var(--ui-color-bg-subtle)",
-      "description": "Track background"
-    },
-    {
-      "token": "--ui-progress-fill",
-      "default": "var(--ui-color-primary)",
-      "description": "Fill color"
-    },
-    {
-      "token": "--ui-progress-radius",
-      "default": "var(--ui-radius-full)",
-      "description": "Border radius"
-    },
-    {
-      "token": "--ui-progress-value",
-      "default": "0%",
-      "description": "Progress value as percentage (typed via @property for smooth transitions)"
-    }
-  ]
-}