@teseor/css 1.7.0 → 1.9.0

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

@@ -1,35 +1,48 @@
-@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));
+    // @desc Overall size
+    --_size: var(--ui-spinner-size, calc(var(--ui-unit) * 4));
+    // @desc Border thickness
     --_border-width: var(--ui-spinner-border-width, var(--ui-border-width-md));
+    // @desc Text color
     --_color: var(--ui-spinner-color, currentcolor);
+    // @desc Track text color
     --_track-color: var(--ui-spinner-track-color, transparent);
-    --_duration: var(--ui-spinner-duration, 750ms);
+    // @desc Animation duration
+    --_duration: var(--ui-spinner-duration, #{t.$spinner-duration});
   }
 
   // @modifier size
   .spinner--xs {
-    --_size: var(--ui-spinner-size-xs, calc(var(--unit) * 2));
+    // @desc Overall size at extra-small size
+    --_size: var(--ui-spinner-size-xs, calc(var(--ui-unit) * 2));
+    // @desc Border thickness at extra-small size
     --_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));
+    // @desc Overall size at small size
+    --_size: var(--ui-spinner-size-sm, calc(var(--ui-unit) * 3));
+    // @desc Border thickness at small size
     --_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));
+    // @desc Overall size at large size
+    --_size: var(--ui-spinner-size-lg, calc(var(--ui-unit) * 5));
+    // @desc Border thickness at large size
     --_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));
+    // @desc Overall size at extra-large size
+    --_size: var(--ui-spinner-size-xl, calc(var(--ui-unit) * 6));
+    // @desc Border thickness at extra-large size
     --_border-width: var(--ui-spinner-border-width-xl, var(--ui-border-width-lg));
   }
 }
@@ -57,4 +70,10 @@
       transform: rotate(360deg);
     }
   }
+
+  @media (prefers-reduced-motion: reduce) {
+    .spinner {
+      animation: none;
+    }
+  }
 }

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

@@ -0,0 +1,77 @@
+{
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
+  "name": "spinner",
+  "element": "div",
+  "modifiers": {
+    "size": {
+      "values": ["xs", "sm", "lg", "xl"]
+    }
+  },
+  "cssVars": [
+    {
+      "name": "--ui-spinner-size",
+      "default": "calc(var(--ui-unit) * 4)",
+      "description": "Overall size"
+    },
+    {
+      "name": "--ui-spinner-border-width",
+      "default": "var(--ui-border-width-md)",
+      "description": "Border thickness"
+    },
+    {
+      "name": "--ui-spinner-color",
+      "default": "currentcolor",
+      "description": "Text color"
+    },
+    {
+      "name": "--ui-spinner-track-color",
+      "default": "transparent",
+      "description": "Track text color"
+    },
+    {
+      "name": "--ui-spinner-duration",
+      "default": "var(--ui-spinner-duration)",
+      "description": "Animation duration"
+    },
+    {
+      "name": "--ui-spinner-size-xs",
+      "default": "calc(var(--ui-unit) * 2)",
+      "description": "Overall size at extra-small size"
+    },
+    {
+      "name": "--ui-spinner-border-width-xs",
+      "default": "var(--ui-border-width-sm)",
+      "description": "Border thickness at extra-small size"
+    },
+    {
+      "name": "--ui-spinner-size-sm",
+      "default": "calc(var(--ui-unit) * 3)",
+      "description": "Overall size at small size"
+    },
+    {
+      "name": "--ui-spinner-border-width-sm",
+      "default": "var(--ui-border-width-md)",
+      "description": "Border thickness at small size"
+    },
+    {
+      "name": "--ui-spinner-size-lg",
+      "default": "calc(var(--ui-unit) * 5)",
+      "description": "Overall size at large size"
+    },
+    {
+      "name": "--ui-spinner-border-width-lg",
+      "default": "var(--ui-border-width-md)",
+      "description": "Border thickness at large size"
+    },
+    {
+      "name": "--ui-spinner-size-xl",
+      "default": "calc(var(--ui-unit) * 6)",
+      "description": "Overall size at extra-large size"
+    },
+    {
+      "name": "--ui-spinner-border-width-xl",
+      "default": "var(--ui-border-width-lg)",
+      "description": "Border thickness at extra-large size"
+    }
+  ]
+}

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,24 +1,48 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
+// @component toast
+// @element div
+// @related toast-viewport
 
 // Toast - notification messages
 // Appears in viewport corner with auto-dismiss
 
 @layer components.tokens {
   .toast-viewport {
+    --_z-toast: var(--ui-z-toast, #{t.$z-toast});
+    // @desc Viewport gap
     --_gap: var(--ui-toast-viewport-gap, calc(#{t.$unit} * 1));
+    // @desc Viewport padding
     --_padding: var(--ui-toast-viewport-padding, calc(#{t.$unit} * 2));
-    --_max-width: var(--ui-toast-viewport-max-width, 420px);
+    // @desc Viewport max width
+    --_max-width: var(--ui-toast-viewport-max-width, #{t.$toast-viewport-max-width});
   }
 
   .toast {
+    --_border-width-sm: var(--ui-border-width-sm, #{t.$border-width-sm});
+    --_weight-medium: var(--ui-weight-medium, #{t.$weight-medium});
+    --_row-1: var(--ui-row-1, #{t.$row});
+    --_font-size-sm: var(--ui-font-size-sm, #{t.$font-size-sm});
+    --_color-text-muted: var(--ui-color-text-muted, #{t.$color-text-muted});
+    --_color-text: var(--ui-color-text, #{t.$color-text});
+    --_duration-normal: var(--ui-duration-normal, #{t.$duration-normal});
+    --_ease-out: var(--ui-ease-out, ease-out);
+    --_duration-fast: var(--ui-duration-fast, #{t.$duration-fast});
+    --_ease-in: var(--ui-ease-in, ease-in);
+    // @desc Padding on all sides
     --_padding: var(--ui-toast-padding, calc(#{t.$unit} * 2));
+    // @desc Gap between children
     --_gap: var(--ui-toast-gap, calc(#{t.$unit} * 1));
+    // @desc Corner radius
     --_radius: var(--ui-toast-radius, var(--ui-radius-md, #{t.$radius-md}));
+    // @desc Background color
     --_bg: var(--ui-toast-bg, var(--ui-color-bg, #{t.$color-bg}));
+    // @desc Border color
     --_border-color: var(--ui-toast-border-color, var(--ui-color-border, #{t.$color-border}));
-    --_shadow: var(--ui-toast-shadow, var(--shadow-lg));
+    // @desc Box shadow
+    --_shadow: var(--ui-toast-shadow, var(--ui-shadow-lg));
   }
 
+  // @modifier variant
   .toast--success {
     --_border-color: var(--ui-color-success);
   }
@@ -44,7 +68,7 @@
     flex-direction: column;
     gap: var(--_gap);
     position: fixed;
-    z-index: var(--ui-z-toast, 1000);
+    z-index: var(--_z-toast);
 
     max-inline-size: var(--_max-width);
     padding: var(--_padding);
@@ -99,10 +123,10 @@
 
     background: var(--_bg);
     border-radius: var(--_radius);
-    outline: var(--ui-border-width-sm, 0.0625rem) solid var(--_border-color);
+    outline: var(--_border-width-sm) solid var(--_border-color);
     box-shadow: var(--_shadow);
     pointer-events: auto;
-    outline-offset: calc(var(--ui-border-width-sm, 0.0625rem) * -1);
+    outline-offset: calc(var(--_border-width-sm) * -1);
   }
 
   .toast__icon {
@@ -118,16 +142,16 @@
   .toast__title {
     margin: 0;
 
-    font-weight: var(--ui-weight-medium, #{t.$weight-medium});
-    line-height: var(--ui-row-1, #{t.$row});
+    font-weight: var(--_weight-medium);
+    line-height: var(--_row-1);
   }
 
   .toast__description {
     margin: 0;
 
-    font-size: var(--ui-font-size-sm, #{t.$font-size-sm});
-    line-height: var(--ui-row-1, #{t.$row});
-    color: var(--ui-color-text-muted, #{t.$color-text-muted});
+    font-size: var(--_font-size-sm);
+    line-height: var(--_row-1);
+    color: var(--_color-text-muted);
   }
 
   .toast__action {
@@ -140,28 +164,28 @@
     align-items: center;
     justify-content: center;
 
-    block-size: var(--ui-row-1, #{t.$row});
-    inline-size: var(--ui-row-1, #{t.$row});
+    block-size: var(--_row-1);
+    inline-size: var(--_row-1);
     padding: 0;
 
-    color: var(--ui-color-text-muted, #{t.$color-text-muted});
+    color: var(--_color-text-muted);
 
     background: none;
     border: none;
     cursor: pointer;
 
     &:hover {
-      color: var(--ui-color-text, #{t.$color-text});
+      color: var(--_color-text);
     }
   }
 
   // Animation states
   .toast[data-state="open"] {
-    animation: toast-slide-in var(--ui-duration-normal, 200ms) var(--ui-ease-out, ease-out);
+    animation: toast-slide-in var(--_duration-normal) var(--_ease-out);
   }
 
   .toast[data-state="closed"] {
-    animation: toast-slide-out var(--ui-duration-fast, 100ms) var(--ui-ease-in, ease-in);
+    animation: toast-slide-out var(--_duration-fast) var(--_ease-in);
   }
 
   @keyframes toast-slide-in {
@@ -177,4 +201,10 @@
       transform: translateX(100%);
     }
   }
+
+  @media (prefers-reduced-motion: reduce) {
+    .toast[data-state] {
+      animation: none;
+    }
+  }
 }

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

@@ -0,0 +1,90 @@
+{
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
+  "name": "toast",
+  "element": "div",
+  "modifiers": {
+    "variant": {
+      "values": ["success", "warning", "danger", "info"]
+    }
+  },
+  "elements": {
+    "icon": {},
+    "content": {},
+    "title": {},
+    "description": {},
+    "action": {},
+    "close": {}
+  },
+  "relatedComponents": [
+    {
+      "name": "toast-viewport",
+      "modifiers": {
+        "top-end": {
+          "type": "boolean"
+        },
+        "top-start": {
+          "type": "boolean"
+        },
+        "bottom-end": {
+          "type": "boolean"
+        },
+        "bottom-start": {
+          "type": "boolean"
+        },
+        "top-center": {
+          "type": "boolean"
+        },
+        "bottom-center": {
+          "type": "boolean"
+        }
+      }
+    }
+  ],
+  "cssVars": [
+    {
+      "name": "--ui-toast-viewport-gap",
+      "default": "calc(var(--ui-unit) * 1)",
+      "description": "Viewport gap"
+    },
+    {
+      "name": "--ui-toast-viewport-padding",
+      "default": "calc(var(--ui-unit) * 2)",
+      "description": "Viewport padding"
+    },
+    {
+      "name": "--ui-toast-viewport-max-width",
+      "default": "var(--ui-toast-viewport-max-width)",
+      "description": "Viewport max width"
+    },
+    {
+      "name": "--ui-toast-padding",
+      "default": "calc(var(--ui-unit) * 2)",
+      "description": "Padding on all sides"
+    },
+    {
+      "name": "--ui-toast-gap",
+      "default": "calc(var(--ui-unit) * 1)",
+      "description": "Gap between children"
+    },
+    {
+      "name": "--ui-toast-radius",
+      "default": "var(--ui-radius-md)",
+      "description": "Corner radius"
+    },
+    {
+      "name": "--ui-toast-bg",
+      "default": "var(--ui-color-bg)",
+      "description": "Background color"
+    },
+    {
+      "name": "--ui-toast-border-color",
+      "default": "var(--ui-color-border)",
+      "description": "Border color"
+    },
+    {
+      "name": "--ui-toast-shadow",
+      "default": "var(--ui-shadow-lg)",
+      "description": "Box shadow"
+    }
+  ]
+}