@teseor/css 1.14.2 → 1.15.0

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

@@ -1,378 +0,0 @@
-{
-  "id": "progress-circle",
-  "type": "component",
-  "mergeInto": "progress",
-  "title": "Progress Circle",
-  "description": "Circular progress indicator showing completion as a donut ring. Set value via --ui-progress-circle-value (0-100).",
-  "api": "./progress-circle.api.json",
-  "sections": [
-    {
-      "title": "Default",
-      "examples": [
-        {
-          "layout": "row",
-          "items": [
-            {
-              "tag": "svg",
-              "class": "ui-progress-circle",
-              "attrs": {
-                "xmlns": "http://www.w3.org/2000/svg",
-                "viewBox": "0 0 100 100",
-                "role": "progressbar",
-                "aria-valuenow": "25",
-                "aria-valuemin": "0",
-                "aria-valuemax": "100"
-              },
-              "style": { "--ui-progress-circle-value": "25" },
-              "children": [
-                {
-                  "tag": "circle",
-                  "class": "ui-progress-circle__track",
-                  "attrs": { "cx": "50", "cy": "50", "r": "45" }
-                },
-                {
-                  "tag": "circle",
-                  "class": "ui-progress-circle__fill",
-                  "attrs": { "cx": "50", "cy": "50", "r": "45" }
-                }
-              ]
-            },
-            {
-              "tag": "svg",
-              "class": "ui-progress-circle",
-              "attrs": {
-                "xmlns": "http://www.w3.org/2000/svg",
-                "viewBox": "0 0 100 100",
-                "role": "progressbar",
-                "aria-valuenow": "50",
-                "aria-valuemin": "0",
-                "aria-valuemax": "100"
-              },
-              "style": { "--ui-progress-circle-value": "50" },
-              "children": [
-                {
-                  "tag": "circle",
-                  "class": "ui-progress-circle__track",
-                  "attrs": { "cx": "50", "cy": "50", "r": "45" }
-                },
-                {
-                  "tag": "circle",
-                  "class": "ui-progress-circle__fill",
-                  "attrs": { "cx": "50", "cy": "50", "r": "45" }
-                }
-              ]
-            },
-            {
-              "tag": "svg",
-              "class": "ui-progress-circle",
-              "attrs": {
-                "xmlns": "http://www.w3.org/2000/svg",
-                "viewBox": "0 0 100 100",
-                "role": "progressbar",
-                "aria-valuenow": "75",
-                "aria-valuemin": "0",
-                "aria-valuemax": "100"
-              },
-              "style": { "--ui-progress-circle-value": "75" },
-              "children": [
-                {
-                  "tag": "circle",
-                  "class": "ui-progress-circle__track",
-                  "attrs": { "cx": "50", "cy": "50", "r": "45" }
-                },
-                {
-                  "tag": "circle",
-                  "class": "ui-progress-circle__fill",
-                  "attrs": { "cx": "50", "cy": "50", "r": "45" }
-                }
-              ]
-            }
-          ],
-          "code": "<svg class=\"ui-progress-circle\" viewBox=\"0 0 100 100\"\n     role=\"progressbar\" aria-valuenow=\"75\"\n     style=\"--ui-progress-circle-value: 75\">\n  <circle class=\"ui-progress-circle__track\" cx=\"50\" cy=\"50\" r=\"45\" />\n  <circle class=\"ui-progress-circle__fill\" cx=\"50\" cy=\"50\" r=\"45\" />\n</svg>"
-        }
-      ]
-    },
-    {
-      "title": "Sizes",
-      "examples": [
-        {
-          "layout": "row",
-          "items": [
-            {
-              "tag": "svg",
-              "class": "ui-progress-circle ui-progress-circle--sm",
-              "attrs": {
-                "xmlns": "http://www.w3.org/2000/svg",
-                "viewBox": "0 0 100 100",
-                "role": "progressbar",
-                "aria-valuenow": "50",
-                "aria-valuemin": "0",
-                "aria-valuemax": "100"
-              },
-              "style": { "--ui-progress-circle-value": "50" },
-              "children": [
-                {
-                  "tag": "circle",
-                  "class": "ui-progress-circle__track",
-                  "attrs": { "cx": "50", "cy": "50", "r": "45" }
-                },
-                {
-                  "tag": "circle",
-                  "class": "ui-progress-circle__fill",
-                  "attrs": { "cx": "50", "cy": "50", "r": "45" }
-                }
-              ]
-            },
-            {
-              "tag": "svg",
-              "class": "ui-progress-circle",
-              "attrs": {
-                "xmlns": "http://www.w3.org/2000/svg",
-                "viewBox": "0 0 100 100",
-                "role": "progressbar",
-                "aria-valuenow": "50",
-                "aria-valuemin": "0",
-                "aria-valuemax": "100"
-              },
-              "style": { "--ui-progress-circle-value": "50" },
-              "children": [
-                {
-                  "tag": "circle",
-                  "class": "ui-progress-circle__track",
-                  "attrs": { "cx": "50", "cy": "50", "r": "45" }
-                },
-                {
-                  "tag": "circle",
-                  "class": "ui-progress-circle__fill",
-                  "attrs": { "cx": "50", "cy": "50", "r": "45" }
-                }
-              ]
-            },
-            {
-              "tag": "svg",
-              "class": "ui-progress-circle ui-progress-circle--lg",
-              "attrs": {
-                "xmlns": "http://www.w3.org/2000/svg",
-                "viewBox": "0 0 100 100",
-                "role": "progressbar",
-                "aria-valuenow": "50",
-                "aria-valuemin": "0",
-                "aria-valuemax": "100"
-              },
-              "style": { "--ui-progress-circle-value": "50" },
-              "children": [
-                {
-                  "tag": "circle",
-                  "class": "ui-progress-circle__track",
-                  "attrs": { "cx": "50", "cy": "50", "r": "45" }
-                },
-                {
-                  "tag": "circle",
-                  "class": "ui-progress-circle__fill",
-                  "attrs": { "cx": "50", "cy": "50", "r": "45" }
-                }
-              ]
-            },
-            {
-              "tag": "svg",
-              "class": "ui-progress-circle ui-progress-circle--xl",
-              "attrs": {
-                "xmlns": "http://www.w3.org/2000/svg",
-                "viewBox": "0 0 100 100",
-                "role": "progressbar",
-                "aria-valuenow": "50",
-                "aria-valuemin": "0",
-                "aria-valuemax": "100"
-              },
-              "style": { "--ui-progress-circle-value": "50" },
-              "children": [
-                {
-                  "tag": "circle",
-                  "class": "ui-progress-circle__track",
-                  "attrs": { "cx": "50", "cy": "50", "r": "45" }
-                },
-                {
-                  "tag": "circle",
-                  "class": "ui-progress-circle__fill",
-                  "attrs": { "cx": "50", "cy": "50", "r": "45" }
-                }
-              ]
-            }
-          ],
-          "code": "<svg class=\"ui-progress-circle ui-progress-circle--sm\" ...>...</svg>\n<svg class=\"ui-progress-circle\" ...>...</svg>\n<svg class=\"ui-progress-circle ui-progress-circle--lg\" ...>...</svg>\n<svg class=\"ui-progress-circle ui-progress-circle--xl\" ...>...</svg>"
-        }
-      ]
-    },
-    {
-      "title": "Colors",
-      "examples": [
-        {
-          "layout": "row",
-          "items": [
-            {
-              "tag": "svg",
-              "class": "ui-progress-circle",
-              "attrs": {
-                "xmlns": "http://www.w3.org/2000/svg",
-                "viewBox": "0 0 100 100",
-                "role": "progressbar",
-                "aria-valuenow": "65",
-                "aria-valuemin": "0",
-                "aria-valuemax": "100"
-              },
-              "style": { "--ui-progress-circle-value": "65" },
-              "children": [
-                {
-                  "tag": "circle",
-                  "class": "ui-progress-circle__track",
-                  "attrs": { "cx": "50", "cy": "50", "r": "45" }
-                },
-                {
-                  "tag": "circle",
-                  "class": "ui-progress-circle__fill",
-                  "attrs": { "cx": "50", "cy": "50", "r": "45" }
-                }
-              ]
-            },
-            {
-              "tag": "svg",
-              "class": "ui-progress-circle ui-progress-circle--success",
-              "attrs": {
-                "xmlns": "http://www.w3.org/2000/svg",
-                "viewBox": "0 0 100 100",
-                "role": "progressbar",
-                "aria-valuenow": "65",
-                "aria-valuemin": "0",
-                "aria-valuemax": "100"
-              },
-              "style": { "--ui-progress-circle-value": "65" },
-              "children": [
-                {
-                  "tag": "circle",
-                  "class": "ui-progress-circle__track",
-                  "attrs": { "cx": "50", "cy": "50", "r": "45" }
-                },
-                {
-                  "tag": "circle",
-                  "class": "ui-progress-circle__fill",
-                  "attrs": { "cx": "50", "cy": "50", "r": "45" }
-                }
-              ]
-            },
-            {
-              "tag": "svg",
-              "class": "ui-progress-circle ui-progress-circle--warning",
-              "attrs": {
-                "xmlns": "http://www.w3.org/2000/svg",
-                "viewBox": "0 0 100 100",
-                "role": "progressbar",
-                "aria-valuenow": "65",
-                "aria-valuemin": "0",
-                "aria-valuemax": "100"
-              },
-              "style": { "--ui-progress-circle-value": "65" },
-              "children": [
-                {
-                  "tag": "circle",
-                  "class": "ui-progress-circle__track",
-                  "attrs": { "cx": "50", "cy": "50", "r": "45" }
-                },
-                {
-                  "tag": "circle",
-                  "class": "ui-progress-circle__fill",
-                  "attrs": { "cx": "50", "cy": "50", "r": "45" }
-                }
-              ]
-            },
-            {
-              "tag": "svg",
-              "class": "ui-progress-circle ui-progress-circle--danger",
-              "attrs": {
-                "xmlns": "http://www.w3.org/2000/svg",
-                "viewBox": "0 0 100 100",
-                "role": "progressbar",
-                "aria-valuenow": "65",
-                "aria-valuemin": "0",
-                "aria-valuemax": "100"
-              },
-              "style": { "--ui-progress-circle-value": "65" },
-              "children": [
-                {
-                  "tag": "circle",
-                  "class": "ui-progress-circle__track",
-                  "attrs": { "cx": "50", "cy": "50", "r": "45" }
-                },
-                {
-                  "tag": "circle",
-                  "class": "ui-progress-circle__fill",
-                  "attrs": { "cx": "50", "cy": "50", "r": "45" }
-                }
-              ]
-            }
-          ],
-          "code": "<svg class=\"ui-progress-circle ui-progress-circle--success\" ...>...</svg>\n<svg class=\"ui-progress-circle ui-progress-circle--warning\" ...>...</svg>\n<svg class=\"ui-progress-circle ui-progress-circle--danger\" ...>...</svg>"
-        }
-      ]
-    },
-    {
-      "title": "Indeterminate",
-      "description": "For unknown progress duration",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "svg",
-              "class": "ui-progress-circle ui-progress-circle--indeterminate",
-              "attrs": {
-                "xmlns": "http://www.w3.org/2000/svg",
-                "viewBox": "0 0 100 100",
-                "role": "progressbar",
-                "aria-label": "Loading"
-              },
-              "children": [
-                {
-                  "tag": "circle",
-                  "class": "ui-progress-circle__track",
-                  "attrs": { "cx": "50", "cy": "50", "r": "45" }
-                },
-                {
-                  "tag": "circle",
-                  "class": "ui-progress-circle__fill",
-                  "attrs": { "cx": "50", "cy": "50", "r": "45" }
-                }
-              ]
-            }
-          ],
-          "code": "<svg class=\"ui-progress-circle ui-progress-circle--indeterminate\"\n     viewBox=\"0 0 100 100\" role=\"progressbar\" aria-label=\"Loading\">\n  <circle class=\"ui-progress-circle__track\" cx=\"50\" cy=\"50\" r=\"45\" />\n  <circle class=\"ui-progress-circle__fill\" cx=\"50\" cy=\"50\" r=\"45\" />\n</svg>"
-        }
-      ]
-    }
-  ],
-  "customization": [
-    {
-      "token": "--ui-progress-circle-size",
-      "default": "calc(var(--ui-unit) * 6)",
-      "description": "Circle diameter"
-    },
-    {
-      "token": "--ui-progress-circle-stroke-width",
-      "default": "8",
-      "description": "Ring thickness (SVG units)"
-    },
-    {
-      "token": "--ui-progress-circle-fill-color",
-      "default": "var(--ui-color-primary)",
-      "description": "Progress arc color"
-    },
-    {
-      "token": "--ui-progress-circle-track-color",
-      "default": "var(--ui-color-border)",
-      "description": "Background ring color"
-    },
-    {
-      "token": "--ui-progress-circle-value",
-      "default": "0",
-      "description": "Progress value (0-100)"
-    }
-  ]
-}

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

@@ -1,142 +0,0 @@
-{
-  "id": "skeleton",
-  "type": "component",
-  "title": "Skeleton",
-  "description": "Loading placeholder with shimmer animation for content loading states.",
-  "api": "./skeleton.api.json",
-  "sections": [
-    {
-      "title": "Text Lines",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "attrs": {
-                "style": "display: flex; flex-direction: column; gap: var(--ui-space-1);"
-              },
-              "children": [
-                { "tag": "div", "class": "ui-skeleton ui-skeleton--text" },
-                {
-                  "tag": "div",
-                  "class": "ui-skeleton ui-skeleton--text",
-                  "attrs": { "style": "width: 80%;" }
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-skeleton ui-skeleton--text",
-                  "attrs": { "style": "width: 60%;" }
-                }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-skeleton ui-skeleton--text\"></div>\n<div class=\"ui-skeleton ui-skeleton--text\" style=\"width: 80%;\"></div>\n<div class=\"ui-skeleton ui-skeleton--text\" style=\"width: 60%;\"></div>"
-        }
-      ]
-    },
-    {
-      "title": "Shapes",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "attrs": {
-                "style": "display: flex; gap: var(--ui-space-2); align-items: flex-start;"
-              },
-              "children": [
-                { "tag": "div", "class": "ui-skeleton ui-skeleton--circle" },
-                {
-                  "tag": "div",
-                  "attrs": {
-                    "style": "flex: 1; display: flex; flex-direction: column; gap: var(--ui-space-1);"
-                  },
-                  "children": [
-                    { "tag": "div", "class": "ui-skeleton ui-skeleton--heading" },
-                    { "tag": "div", "class": "ui-skeleton ui-skeleton--text" }
-                  ]
-                }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-skeleton ui-skeleton--circle\"></div>\n<div class=\"ui-skeleton ui-skeleton--heading\"></div>\n<div class=\"ui-skeleton ui-skeleton--text\"></div>"
-        }
-      ]
-    },
-    {
-      "title": "Card Skeleton",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-card",
-              "attrs": { "style": "width: 300px;" },
-              "children": [
-                { "tag": "div", "class": "ui-skeleton ui-skeleton--rect" },
-                {
-                  "tag": "div",
-                  "attrs": {
-                    "style": "padding: var(--ui-space-2); display: flex; flex-direction: column; gap: var(--ui-space-1);"
-                  },
-                  "children": [
-                    { "tag": "div", "class": "ui-skeleton ui-skeleton--heading" },
-                    { "tag": "div", "class": "ui-skeleton ui-skeleton--text" },
-                    {
-                      "tag": "div",
-                      "class": "ui-skeleton ui-skeleton--text",
-                      "attrs": { "style": "width: 70%;" }
-                    }
-                  ]
-                }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-card\">\n  <div class=\"ui-skeleton ui-skeleton--rect\"></div>\n  <div class=\"ui-skeleton ui-skeleton--heading\"></div>\n  <div class=\"ui-skeleton ui-skeleton--text\"></div>\n</div>"
-        }
-      ]
-    },
-    {
-      "title": "Pulse Animation",
-      "examples": [
-        {
-          "items": [{ "tag": "div", "class": "ui-skeleton ui-skeleton--text ui-skeleton--pulse" }],
-          "code": "<div class=\"ui-skeleton ui-skeleton--text ui-skeleton--pulse\"></div>"
-        }
-      ]
-    },
-    {
-      "title": "Static",
-      "description": "No animation, just a placeholder block.",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-skeleton ui-skeleton--static",
-              "attrs": { "style": "width: 200px;" }
-            }
-          ],
-          "code": "<div class=\"ui-skeleton ui-skeleton--static\"></div>"
-        }
-      ]
-    }
-  ],
-  "customization": [
-    {
-      "token": "--ui-skeleton-bg",
-      "default": "var(--ui-color-bg-subtle)",
-      "description": "Background color"
-    },
-    {
-      "token": "--ui-skeleton-shimmer",
-      "default": "rgb(255 255 255 / 0.5)",
-      "description": "Shimmer highlight color"
-    },
-    {
-      "token": "--ui-skeleton-radius",
-      "default": "var(--ui-radius-sm)",
-      "description": "Border radius"
-    }
-  ]
-}

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

@@ -1,121 +0,0 @@
-{
-  "id": "spinner",
-  "type": "component",
-  "title": "Spinner",
-  "description": "Loading indicator with pure CSS animation. Inherits color from parent.",
-  "api": "./spinner.api.json",
-  "sections": [
-    {
-      "title": "Default",
-      "examples": [
-        {
-          "layout": "row",
-          "items": [{ "tag": "div", "class": "ui-spinner" }],
-          "code": "<div class=\"ui-spinner\"></div>"
-        }
-      ]
-    },
-    {
-      "title": "Sizes",
-      "examples": [
-        {
-          "layout": "row",
-          "items": [
-            { "tag": "div", "class": "ui-spinner ui-spinner--xs" },
-            { "tag": "div", "class": "ui-spinner ui-spinner--sm" },
-            { "tag": "div", "class": "ui-spinner" },
-            { "tag": "div", "class": "ui-spinner ui-spinner--lg" },
-            { "tag": "div", "class": "ui-spinner ui-spinner--xl" }
-          ],
-          "code": "<div class=\"ui-spinner ui-spinner--xs\"></div>\n<div class=\"ui-spinner ui-spinner--sm\"></div>\n<div class=\"ui-spinner\"></div>\n<div class=\"ui-spinner ui-spinner--lg\"></div>\n<div class=\"ui-spinner ui-spinner--xl\"></div>"
-        }
-      ]
-    },
-    {
-      "title": "Color Inheritance",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-row",
-              "attrs": { "style": "gap: var(--ui-space-2);" },
-              "children": [
-                {
-                  "tag": "div",
-                  "attrs": { "style": "color: var(--ui-color-primary);" },
-                  "children": [{ "tag": "div", "class": "ui-spinner" }]
-                },
-                {
-                  "tag": "div",
-                  "attrs": { "style": "color: var(--ui-color-danger);" },
-                  "children": [{ "tag": "div", "class": "ui-spinner" }]
-                },
-                {
-                  "tag": "div",
-                  "attrs": { "style": "color: var(--ui-color-success);" },
-                  "children": [{ "tag": "div", "class": "ui-spinner" }]
-                }
-              ]
-            }
-          ],
-          "code": "<div style=\"color: var(--ui-color-primary);\">\n  <div class=\"ui-spinner\"></div>\n</div>"
-        }
-      ]
-    },
-    {
-      "title": "In Button",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "button",
-              "class": "ui-button ui-button--primary",
-              "attrs": { "disabled": true, "style": "opacity: 0.7;" },
-              "children": [
-                { "tag": "div", "class": "ui-spinner ui-spinner--xs" },
-                { "tag": "span", "text": "Loading..." }
-              ]
-            }
-          ],
-          "code": "<button class=\"ui-button\" disabled>\n  <div class=\"ui-spinner ui-spinner--xs\"></div>\n  <span>Loading...</span>\n</button>"
-        }
-      ]
-    }
-  ],
-  "customization": [
-    {
-      "token": "--ui-spinner-size",
-      "default": "calc(var(--ui-unit) * 4)",
-      "description": "Default size"
-    },
-    {
-      "token": "--ui-spinner-size-xs",
-      "default": "calc(var(--ui-unit) * 2)",
-      "description": "Extra small size"
-    },
-    {
-      "token": "--ui-spinner-size-sm",
-      "default": "calc(var(--ui-unit) * 3)",
-      "description": "Small size"
-    },
-    {
-      "token": "--ui-spinner-size-lg",
-      "default": "calc(var(--ui-unit) * 5)",
-      "description": "Large size"
-    },
-    {
-      "token": "--ui-spinner-size-xl",
-      "default": "calc(var(--ui-unit) * 6)",
-      "description": "Extra large size"
-    },
-    {
-      "token": "--ui-spinner-border-width",
-      "default": "var(--ui-border-width-md)",
-      "description": "Border width"
-    },
-    { "token": "--ui-spinner-color", "default": "currentcolor", "description": "Spinner color" },
-    { "token": "--ui-spinner-track-color", "default": "transparent", "description": "Track color" },
-    { "token": "--ui-spinner-duration", "default": "750ms", "description": "Animation duration" }
-  ]
-}