@teseor/css 1.7.0 → 1.9.0

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

@@ -0,0 +1,257 @@
+{
+  "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>"
+        }
+      ]
+    }
+  ],
+  "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"
+    }
+  ]
+}

package/src/{04-components → components}/feedback/progress-circle/index.scss

@@ -1,29 +1,41 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
+// @component progress-circle
+// @element svg
 
 // Progress Circle - circular progress indicator
 // Uses SVG circles with stroke-dasharray/dashoffset driven by --ui-progress-circle-value
 
 @layer components.tokens {
   .progress-circle {
-    --_size: var(--ui-progress-circle-size, calc(var(--unit) * 6));
-    --_stroke-width: var(--ui-progress-circle-stroke-width, 8);
+    --_duration-slow: var(--ui-duration-slow, #{t.$duration-slow});
+    --_ease-default: var(--ui-ease-default, ease);
+    // @desc Overall size
+    --_size: var(--ui-progress-circle-size, calc(var(--ui-unit) * 6));
+    // @desc Stroke width
+    --_stroke-width: var(--ui-progress-circle-stroke-width, #{t.$progress-circle-stroke-width});
+    // @desc Fill area text color
     --_fill-color: var(--ui-progress-circle-fill-color, var(--ui-color-primary));
+    // @desc Track text color
     --_track-color: var(--ui-progress-circle-track-color, var(--ui-color-border));
+    // @desc Value
     --_value: var(--ui-progress-circle-value, 0);
     --_circumference: 282.743;
   }
 
   // @modifier size
   .progress-circle--sm {
-    --_size: var(--ui-progress-circle-size-sm, calc(var(--unit) * 4));
+    // @desc Overall size at small size
+    --_size: var(--ui-progress-circle-size-sm, calc(var(--ui-unit) * 4));
   }
 
   .progress-circle--lg {
-    --_size: var(--ui-progress-circle-size-lg, calc(var(--unit) * 8));
+    // @desc Overall size at large size
+    --_size: var(--ui-progress-circle-size-lg, calc(var(--ui-unit) * 8));
   }
 
   .progress-circle--xl {
-    --_size: var(--ui-progress-circle-size-xl, calc(var(--unit) * 12));
+    // @desc Overall size at extra-large size
+    --_size: var(--ui-progress-circle-size-xl, calc(var(--ui-unit) * 12));
   }
 
   // @modifier variant
@@ -66,10 +78,11 @@
     stroke-dasharray: var(--_circumference);
     stroke-dashoffset: calc(var(--_circumference) * (1 - var(--_value) / 100));
 
-    transition: stroke-dashoffset var(--ui-duration-slow, 300ms) var(--ui-ease-default, ease);
+    transition: stroke-dashoffset var(--_duration-slow) var(--_ease-default);
   }
 
   // Indeterminate - rotating partial arc
+  // @modifier boolean indeterminate
   .progress-circle--indeterminate {
     animation: progress-circle-rotate 1.4s linear infinite;
   }
@@ -89,4 +102,10 @@
       transform: rotate(270deg);
     }
   }
+
+  @media (prefers-reduced-motion: reduce) {
+    .progress-circle--indeterminate {
+      animation: none;
+    }
+  }
 }

package/src/{04-components → components}/feedback/progress-circle/progress-circle.api.json

@@ -1,4 +1,5 @@
 {
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
   "name": "progress-circle",
   "element": "svg",
   "modifiers": {
@@ -19,35 +20,43 @@
   "cssVars": [
     {
       "name": "--ui-progress-circle-size",
-      "default": "calc(var(--unit) * 6)"
+      "default": "calc(var(--ui-unit) * 6)",
+      "description": "Overall size"
     },
     {
       "name": "--ui-progress-circle-stroke-width",
-      "default": "8"
+      "default": "var(--ui-progress-circle-stroke-width)",
+      "description": "Stroke width"
     },
     {
       "name": "--ui-progress-circle-fill-color",
-      "default": "var(--ui-color-primary)"
+      "default": "var(--ui-color-primary)",
+      "description": "Fill area text color"
     },
     {
       "name": "--ui-progress-circle-track-color",
-      "default": "var(--ui-color-border)"
+      "default": "var(--ui-color-border)",
+      "description": "Track text color"
     },
     {
       "name": "--ui-progress-circle-value",
-      "default": "0"
+      "default": "0",
+      "description": "Value"
     },
     {
       "name": "--ui-progress-circle-size-sm",
-      "default": "calc(var(--unit) * 4)"
+      "default": "calc(var(--ui-unit) * 4)",
+      "description": "Overall size at small size"
     },
     {
       "name": "--ui-progress-circle-size-lg",
-      "default": "calc(var(--unit) * 8)"
+      "default": "calc(var(--ui-unit) * 8)",
+      "description": "Overall size at large size"
     },
     {
       "name": "--ui-progress-circle-size-xl",
-      "default": "calc(var(--unit) * 12)"
+      "default": "calc(var(--ui-unit) * 12)",
+      "description": "Overall size at extra-large size"
     }
   ]
 }

package/src/{04-components → components}/feedback/progress-circle/progress-circle.docs.json

@@ -1,6 +1,7 @@
 {
   "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",
@@ -9,7 +10,7 @@
       "title": "Default",
       "examples": [
         {
-          "layout": "cluster",
+          "layout": "row",
           "items": [
             {
               "tag": "svg",
@@ -95,7 +96,7 @@
       "title": "Sizes",
       "examples": [
         {
-          "layout": "cluster",
+          "layout": "row",
           "items": [
             {
               "tag": "svg",
@@ -206,7 +207,7 @@
       "title": "Colors",
       "examples": [
         {
-          "layout": "cluster",
+          "layout": "row",
           "items": [
             {
               "tag": "svg",
@@ -350,7 +351,7 @@
   "customization": [
     {
       "token": "--ui-progress-circle-size",
-      "default": "calc(var(--unit) * 6)",
+      "default": "calc(var(--ui-unit) * 6)",
       "description": "Circle diameter"
     },
     {

package/src/{04-components → components}/feedback/skeleton/index.scss

@@ -1,12 +1,17 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
+// @component skeleton
+// @element div
 
 // Skeleton - loading placeholder
 // Animated shimmer effect for content loading states
 
 @layer components.tokens {
   .skeleton {
-    --_bg: var(--ui-skeleton-bg, var(--ui-color-bg-subtle, rgb(0 0 0 / 0.1)));
-    --_shimmer: var(--ui-skeleton-shimmer, rgb(255 255 255 / 0.5));
+    // @desc Background color
+    --_bg: var(--ui-skeleton-bg, var(--ui-color-bg-subtle, #{t.$overlay-bg-subtle}));
+    // @desc Shimmer
+    --_shimmer: var(--ui-skeleton-shimmer, #{t.$skeleton-shimmer});
+    // @desc Corner radius
     --_radius: var(--ui-skeleton-radius, var(--ui-radius-sm, calc(#{t.$unit} / 2)));
   }
 }
@@ -47,6 +52,7 @@
   }
 
   // Text line variant
+  // @modifier variant
   .skeleton--text {
     block-size: calc(#{t.$unit} * 2);
     inline-size: 100%;
@@ -78,6 +84,7 @@
   }
 
   // Pulse animation alternative
+  // @modifier boolean pulse
   .skeleton--pulse {
     animation: skeleton-pulse 1.5s infinite ease-in-out;
   }
@@ -96,4 +103,14 @@
       opacity: 0.5;
     }
   }
+
+  @media (prefers-reduced-motion: reduce) {
+    .skeleton::after {
+      animation: none;
+    }
+
+    .skeleton--pulse {
+      animation: none;
+    }
+  }
 }

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

@@ -0,0 +1,30 @@
+{
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
+  "name": "skeleton",
+  "element": "div",
+  "modifiers": {
+    "variant": {
+      "values": ["text", "heading", "circle", "rect", "static"]
+    },
+    "pulse": {
+      "type": "boolean"
+    }
+  },
+  "cssVars": [
+    {
+      "name": "--ui-skeleton-bg",
+      "default": "var(--ui-color-bg-subtle)",
+      "description": "Background color"
+    },
+    {
+      "name": "--ui-skeleton-shimmer",
+      "default": "var(--ui-skeleton-shimmer)",
+      "description": "Shimmer"
+    },
+    {
+      "name": "--ui-skeleton-radius",
+      "default": "var(--ui-radius-sm)",
+      "description": "Corner radius"
+    }
+  ]
+}

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

@@ -0,0 +1,126 @@
+{
+  "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>"
+        }
+      ]
+    }
+  ],
+  "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"
+    }
+  ]
+}