@teseor/css 1.6.0 → 1.8.0

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

@@ -1,11 +1,11 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 
 // 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));
+    --_size: var(--ui-progress-circle-size, calc(var(--ui-unit) * 6));
     --_stroke-width: var(--ui-progress-circle-stroke-width, 8);
     --_fill-color: var(--ui-progress-circle-fill-color, var(--ui-color-primary));
     --_track-color: var(--ui-progress-circle-track-color, var(--ui-color-border));
@@ -15,15 +15,15 @@
 
   // @modifier size
   .progress-circle--sm {
-    --_size: var(--ui-progress-circle-size-sm, calc(var(--unit) * 4));
+    --_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));
+    --_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));
+    --_size: var(--ui-progress-circle-size-xl, calc(var(--ui-unit) * 12));
   }
 
   // @modifier variant
@@ -89,4 +89,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

@@ -19,7 +19,7 @@
   "cssVars": [
     {
       "name": "--ui-progress-circle-size",
-      "default": "calc(var(--unit) * 6)"
+      "default": "calc(var(--ui-unit) * 6)"
     },
     {
       "name": "--ui-progress-circle-stroke-width",
@@ -39,15 +39,15 @@
     },
     {
       "name": "--ui-progress-circle-size-sm",
-      "default": "calc(var(--unit) * 4)"
+      "default": "calc(var(--ui-unit) * 4)"
     },
     {
       "name": "--ui-progress-circle-size-lg",
-      "default": "calc(var(--unit) * 8)"
+      "default": "calc(var(--ui-unit) * 8)"
     },
     {
       "name": "--ui-progress-circle-size-xl",
-      "default": "calc(var(--unit) * 12)"
+      "default": "calc(var(--ui-unit) * 12)"
     }
   ]
 }

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,4 +1,4 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 
 // Skeleton - loading placeholder
 // Animated shimmer effect for content loading states
@@ -96,4 +96,14 @@
       opacity: 0.5;
     }
   }
+
+  @media (prefers-reduced-motion: reduce) {
+    .skeleton::after {
+      animation: none;
+    }
+
+    .skeleton--pulse {
+      animation: none;
+    }
+  }
 }

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"
+    }
+  ]
+}

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

@@ -1,11 +1,11 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 
 // @component spinner
 // @element div
 
 @layer components.tokens {
   .spinner {
-    --_size: var(--ui-spinner-size, calc(var(--unit) * 4));
+    --_size: var(--ui-spinner-size, calc(var(--ui-unit) * 4));
     --_border-width: var(--ui-spinner-border-width, var(--ui-border-width-md));
     --_color: var(--ui-spinner-color, currentcolor);
     --_track-color: var(--ui-spinner-track-color, transparent);
@@ -14,22 +14,22 @@
 
   // @modifier size
   .spinner--xs {
-    --_size: var(--ui-spinner-size-xs, calc(var(--unit) * 2));
+    --_size: var(--ui-spinner-size-xs, calc(var(--ui-unit) * 2));
     --_border-width: var(--ui-spinner-border-width-xs, var(--ui-border-width-sm));
   }
 
   .spinner--sm {
-    --_size: var(--ui-spinner-size-sm, calc(var(--unit) * 3));
+    --_size: var(--ui-spinner-size-sm, calc(var(--ui-unit) * 3));
     --_border-width: var(--ui-spinner-border-width-sm, var(--ui-border-width-md));
   }
 
   .spinner--lg {
-    --_size: var(--ui-spinner-size-lg, calc(var(--unit) * 5));
+    --_size: var(--ui-spinner-size-lg, calc(var(--ui-unit) * 5));
     --_border-width: var(--ui-spinner-border-width-lg, var(--ui-border-width-md));
   }
 
   .spinner--xl {
-    --_size: var(--ui-spinner-size-xl, calc(var(--unit) * 6));
+    --_size: var(--ui-spinner-size-xl, calc(var(--ui-unit) * 6));
     --_border-width: var(--ui-spinner-border-width-xl, var(--ui-border-width-lg));
   }
 }
@@ -57,4 +57,10 @@
       transform: rotate(360deg);
     }
   }
+
+  @media (prefers-reduced-motion: reduce) {
+    .spinner {
+      animation: none;
+    }
+  }
 }

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

@@ -9,7 +9,7 @@
   "cssVars": [
     {
       "name": "--ui-spinner-size",
-      "default": "var(--unit)"
+      "default": "var(--ui-unit)"
     },
     {
       "name": "--ui-spinner-border-width",
@@ -29,7 +29,7 @@
     },
     {
       "name": "--ui-spinner-size-xs",
-      "default": "var(--unit)"
+      "default": "var(--ui-unit)"
     },
     {
       "name": "--ui-spinner-border-width-xs",
@@ -37,7 +37,7 @@
     },
     {
       "name": "--ui-spinner-size-sm",
-      "default": "var(--unit)"
+      "default": "var(--ui-unit)"
     },
     {
       "name": "--ui-spinner-border-width-sm",
@@ -45,7 +45,7 @@
     },
     {
       "name": "--ui-spinner-size-lg",
-      "default": "var(--unit)"
+      "default": "var(--ui-unit)"
     },
     {
       "name": "--ui-spinner-border-width-lg",
@@ -53,7 +53,7 @@
     },
     {
       "name": "--ui-spinner-size-xl",
-      "default": "var(--unit)"
+      "default": "var(--ui-unit)"
     },
     {
       "name": "--ui-spinner-border-width-xl",

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

@@ -9,7 +9,7 @@
       "title": "Default",
       "examples": [
         {
-          "layout": "cluster",
+          "layout": "row",
           "items": [{ "tag": "div", "class": "ui-spinner" }],
           "code": "<div class=\"ui-spinner\"></div>"
         }
@@ -19,7 +19,7 @@
       "title": "Sizes",
       "examples": [
         {
-          "layout": "cluster",
+          "layout": "row",
           "items": [
             { "tag": "div", "class": "ui-spinner ui-spinner--xs" },
             { "tag": "div", "class": "ui-spinner ui-spinner--sm" },
@@ -35,7 +35,30 @@
       "title": "Color Inheritance",
       "examples": [
         {
-          "html": "<div class=\"ui-cluster\" style=\"gap: var(--ui-space-2);\"><div style=\"color: var(--ui-color-primary);\"><div class=\"ui-spinner\"></div></div><div style=\"color: var(--ui-color-danger);\"><div class=\"ui-spinner\"></div></div><div style=\"color: var(--ui-color-success);\"><div class=\"ui-spinner\"></div></div></div>",
+          "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>"
         }
       ]
@@ -44,7 +67,17 @@
       "title": "In Button",
       "examples": [
         {
-          "html": "<button class=\"ui-button ui-button--primary\" disabled style=\"opacity: 0.7;\"><div class=\"ui-spinner ui-spinner--xs\"></div><span>Loading...</span></button>",
+          "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>"
         }
       ]
@@ -53,27 +86,27 @@
   "customization": [
     {
       "token": "--ui-spinner-size",
-      "default": "calc(var(--unit) * 4)",
+      "default": "calc(var(--ui-unit) * 4)",
       "description": "Default size"
     },
     {
       "token": "--ui-spinner-size-xs",
-      "default": "calc(var(--unit) * 2)",
+      "default": "calc(var(--ui-unit) * 2)",
       "description": "Extra small size"
     },
     {
       "token": "--ui-spinner-size-sm",
-      "default": "calc(var(--unit) * 3)",
+      "default": "calc(var(--ui-unit) * 3)",
       "description": "Small size"
     },
     {
       "token": "--ui-spinner-size-lg",
-      "default": "calc(var(--unit) * 5)",
+      "default": "calc(var(--ui-unit) * 5)",
       "description": "Large size"
     },
     {
       "token": "--ui-spinner-size-xl",
-      "default": "calc(var(--unit) * 6)",
+      "default": "calc(var(--ui-unit) * 6)",
       "description": "Extra large size"
     },
     {

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

@@ -1,4 +1,4 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 
 // Toast - notification messages
 // Appears in viewport corner with auto-dismiss
@@ -16,7 +16,7 @@
     --_radius: var(--ui-toast-radius, var(--ui-radius-md, #{t.$radius-md}));
     --_bg: var(--ui-toast-bg, var(--ui-color-bg, #{t.$color-bg}));
     --_border-color: var(--ui-toast-border-color, var(--ui-color-border, #{t.$color-border}));
-    --_shadow: var(--ui-toast-shadow, var(--shadow-lg));
+    --_shadow: var(--ui-toast-shadow, var(--ui-shadow-lg));
   }
 
   .toast--success {
@@ -177,4 +177,10 @@
       transform: translateX(100%);
     }
   }
+
+  @media (prefers-reduced-motion: reduce) {
+    .toast[data-state] {
+      animation: none;
+    }
+  }
 }

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

@@ -26,11 +26,11 @@
   "cssVars": [
     {
       "name": "--ui-toast-viewport-gap",
-      "default": "calc(#{t.$unit} * 1"
+      "default": "calc(var(--ui-unit) * 1"
     },
     {
       "name": "--ui-toast-viewport-padding",
-      "default": "calc(#{t.$unit} * 2"
+      "default": "calc(var(--ui-unit) * 2"
     },
     {
       "name": "--ui-toast-viewport-max-width",
@@ -38,11 +38,11 @@
     },
     {
       "name": "--ui-toast-padding",
-      "default": "calc(#{t.$unit} * 2"
+      "default": "calc(var(--ui-unit) * 2"
     },
     {
       "name": "--ui-toast-gap",
-      "default": "calc(#{t.$unit} * 1"
+      "default": "calc(var(--ui-unit) * 1"
     },
     {
       "name": "--ui-toast-radius",