@teseor/css 1.8.0 → 1.9.0

package/src/components/content/scroll-area/scroll-area.api.json

@@ -1,16 +1,17 @@
 {
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
   "name": "scroll-area",
   "element": "div",
   "modifiers": {
     "size": {
       "values": ["sm", "lg", "xl"]
     },
+    "thin": {
+      "values": ["scrollbar"]
+    },
     "direction": {
       "values": ["horizontal", "both"]
     },
-    "thin": {
-      "type": "boolean"
-    },
     "auto-hide": {
       "type": "boolean"
     }
@@ -21,43 +22,53 @@
   "cssVars": [
     {
       "name": "--ui-scroll-area-max-height",
-      "default": "calc(var(--ui-row) * 10)"
+      "default": "calc(var(--ui-row) * 10)",
+      "description": "Maximum height"
     },
     {
-      "name": "--ui-scroll-area-max-height-sm",
-      "default": "calc(var(--ui-row) * 5)"
+      "name": "--ui-scroll-area-scrollbar-size",
+      "default": "calc(var(--ui-unit) * 1)",
+      "description": "Scrollbar size"
     },
     {
-      "name": "--ui-scroll-area-max-height-lg",
-      "default": "calc(var(--ui-row) * 15)"
+      "name": "--ui-scroll-area-thumb-color",
+      "default": "var(--ui-color-border-strong)",
+      "description": "Thumb control text color"
     },
     {
-      "name": "--ui-scroll-area-max-height-xl",
-      "default": "calc(var(--ui-row) * 20)"
+      "name": "--ui-scroll-area-thumb-hover-color",
+      "default": "var(--ui-color-neutral-400)",
+      "description": "Thumb hover color"
     },
     {
-      "name": "--ui-scroll-area-scrollbar-size",
-      "default": "var(--ui-space-1)"
+      "name": "--ui-scroll-area-track-color",
+      "default": "transparent",
+      "description": "Track text color"
     },
     {
-      "name": "--ui-scroll-area-scrollbar-size-thin",
-      "default": "calc(var(--ui-space-1) * 0.5)"
+      "name": "--ui-scroll-area-thumb-radius",
+      "default": "var(--ui-radius-full)",
+      "description": "Thumb corner radius"
     },
     {
-      "name": "--ui-scroll-area-thumb-color",
-      "default": "var(--ui-color-border-strong)"
+      "name": "--ui-scroll-area-max-height-sm",
+      "default": "calc(var(--ui-row) * 5)",
+      "description": "Maximum height at small size"
     },
     {
-      "name": "--ui-scroll-area-thumb-hover-color",
-      "default": "var(--ui-color-neutral-400)"
+      "name": "--ui-scroll-area-max-height-lg",
+      "default": "calc(var(--ui-row) * 15)",
+      "description": "Maximum height at large size"
     },
     {
-      "name": "--ui-scroll-area-track-color",
-      "default": "transparent"
+      "name": "--ui-scroll-area-max-height-xl",
+      "default": "calc(var(--ui-row) * 20)",
+      "description": "Maximum height at extra-large size"
     },
     {
-      "name": "--ui-scroll-area-thumb-radius",
-      "default": "var(--ui-radius-full)"
+      "name": "--ui-scroll-area-scrollbar-size-thin",
+      "default": "calc(var(--ui-unit) * 0.5)",
+      "description": "Scrollbar size thin"
     }
   ]
 }

package/src/components/content/scroll-area/scroll-area.docs.json

@@ -68,6 +68,23 @@
                 }
               ]
             },
+            {
+              "tag": "div",
+              "class": "ui-scroll-area ui-scroll-area--xl",
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-scroll-area__viewport",
+                  "children": [
+                    { "tag": "p", "text": "XL - Line 1" },
+                    { "tag": "p", "text": "XL - Line 2" },
+                    { "tag": "p", "text": "XL - Line 3" },
+                    { "tag": "p", "text": "XL - Line 4" },
+                    { "tag": "p", "text": "XL - Line 5" }
+                  ]
+                }
+              ]
+            },
             {
               "tag": "div",
               "class": "ui-scroll-area ui-scroll-area--lg",
@@ -101,7 +118,59 @@
               ]
             }
           ],
-          "code": "<div class=\"ui-scroll-area ui-scroll-area--sm\">...</div>\n<div class=\"ui-scroll-area ui-scroll-area--lg\">...</div>"
+          "code": "<div class=\"ui-scroll-area ui-scroll-area--sm\">...</div>\n<div class=\"ui-scroll-area ui-scroll-area--lg\">...</div>\n<div class=\"ui-scroll-area ui-scroll-area--xl\">...</div>"
+        }
+      ]
+    },
+    {
+      "title": "Direction",
+      "examples": [
+        {
+          "layout": "column",
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-scroll-area ui-scroll-area--horizontal",
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-scroll-area__viewport",
+                  "children": [
+                    {
+                      "tag": "p",
+                      "style": { "white-space": "nowrap" },
+                      "text": "This content scrolls horizontally when it overflows the container width. Resize the window to test."
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "tag": "div",
+              "class": "ui-scroll-area ui-scroll-area--both ui-scroll-area--sm",
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-scroll-area__viewport",
+                  "children": [
+                    {
+                      "tag": "p",
+                      "style": { "white-space": "nowrap" },
+                      "text": "Both directions - Line 1 with long content that overflows horizontally"
+                    },
+                    { "tag": "p", "text": "Line 2" },
+                    { "tag": "p", "text": "Line 3" },
+                    { "tag": "p", "text": "Line 4" },
+                    { "tag": "p", "text": "Line 5" },
+                    { "tag": "p", "text": "Line 6" },
+                    { "tag": "p", "text": "Line 7" },
+                    { "tag": "p", "text": "Line 8" }
+                  ]
+                }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-scroll-area ui-scroll-area--horizontal\">...</div>\n<div class=\"ui-scroll-area ui-scroll-area--both\">...</div>"
         }
       ]
     },

package/src/components/content/spacer/index.scss

@@ -1,6 +1,11 @@
+@use '../../../config/tokens/variables' as t;
+// @component spacer
+// @element div
+
 @layer components.tokens {
   .spacer {
-    --_size: var(--ui-spacer-size, 1);
+    // @desc Overall size
+    --_size: var(--ui-spacer-size, #{t.$spacer-size});
   }
 }
 

package/src/components/content/spacer/spacer.api.json

@@ -1,6 +1,13 @@
 {
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
   "name": "spacer",
   "element": "div",
   "modifiers": {},
-  "cssVars": [{ "name": "--ui-spacer-size", "default": "1" }]
+  "cssVars": [
+    {
+      "name": "--ui-spacer-size",
+      "default": "var(--ui-spacer-size)",
+      "description": "Overall size"
+    }
+  ]
 }

package/src/components/data-display/avatar/avatar.api.json

@@ -1,4 +1,5 @@
 {
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
   "name": "avatar",
   "element": "div",
   "modifiers": {
@@ -10,66 +11,84 @@
     }
   },
   "elements": {
-    "fallback": {},
-    "image": {}
+    "image": {},
+    "fallback": {}
   },
-  "relatedComponents": ["avatar-group"],
+  "relatedComponents": [
+    {
+      "name": "avatar-group"
+    }
+  ],
   "cssVars": [
     {
       "name": "--ui-avatar-size",
-      "default": "calc(var(--ui-unit) * 5"
+      "default": "calc(var(--ui-unit) * 5)",
+      "description": "Overall size"
     },
     {
       "name": "--ui-avatar-bg",
-      "default": "var(--ui-color-bg-subtle)"
+      "default": "var(--ui-color-bg-subtle)",
+      "description": "Background color"
     },
     {
       "name": "--ui-avatar-color",
-      "default": "var(--ui-color-text-muted)"
+      "default": "var(--ui-color-text-muted)",
+      "description": "Text color"
     },
     {
       "name": "--ui-avatar-font-size",
-      "default": "var(--ui-font-size-sm)"
+      "default": "var(--ui-font-size-sm)",
+      "description": "Font size"
     },
     {
       "name": "--ui-avatar-radius",
-      "default": "50%"
+      "default": "50%",
+      "description": "Corner radius"
     },
     {
       "name": "--ui-avatar-size-xs",
-      "default": "calc(var(--ui-unit) * 3"
+      "default": "calc(var(--ui-unit) * 3)",
+      "description": "Overall size at extra-small size"
     },
     {
       "name": "--ui-avatar-font-size-xs",
-      "default": "var(--ui-font-size-xs)"
+      "default": "var(--ui-font-size-xs)",
+      "description": "Font size at extra-small size"
     },
     {
       "name": "--ui-avatar-size-sm",
-      "default": "calc(var(--ui-unit) * 4"
+      "default": "calc(var(--ui-unit) * 4)",
+      "description": "Overall size at small size"
     },
     {
       "name": "--ui-avatar-font-size-sm",
-      "default": "var(--ui-font-size-xs)"
+      "default": "var(--ui-font-size-xs)",
+      "description": "Font size at small size"
     },
     {
       "name": "--ui-avatar-size-lg",
-      "default": "calc(var(--ui-unit) * 6"
+      "default": "calc(var(--ui-unit) * 6)",
+      "description": "Overall size at large size"
     },
     {
       "name": "--ui-avatar-font-size-lg",
-      "default": "var(--ui-font-size-md)"
+      "default": "var(--ui-font-size-md)",
+      "description": "Font size at large size"
     },
     {
       "name": "--ui-avatar-size-xl",
-      "default": "calc(var(--ui-unit) * 8"
+      "default": "calc(var(--ui-unit) * 8)",
+      "description": "Overall size at extra-large size"
     },
     {
       "name": "--ui-avatar-font-size-xl",
-      "default": "var(--ui-font-size-lg)"
+      "default": "var(--ui-font-size-lg)",
+      "description": "Font size at extra-large size"
     },
     {
       "name": "--ui-avatar-radius-square",
-      "default": "var(--ui-radius-md)"
+      "default": "var(--ui-radius-md)",
+      "description": "Radius square"
     }
   ]
 }

package/src/components/data-display/avatar/index.scss

@@ -2,39 +2,57 @@
 
 // @component avatar
 // @element div
+// @related avatar-group
 
 @layer components.tokens {
   .avatar {
+    --_weight-medium: var(--ui-weight-medium, #{t.$weight-medium});
+    --_border-width-sm: var(--ui-border-width-sm, #{t.$border-width-sm});
+    --_color-bg: var(--ui-color-bg, #{t.$color-bg});
+    // @desc Overall size
     --_size: var(--ui-avatar-size, calc(#{t.$unit} * 5));
+    // @desc Background color
     --_bg: var(--ui-avatar-bg, var(--ui-color-bg-subtle, #{t.$color-bg-subtle}));
+    // @desc Text color
     --_color: var(--ui-avatar-color, var(--ui-color-text-muted, #{t.$color-text-muted}));
+    // @desc Font size
     --_font-size: var(--ui-avatar-font-size, var(--ui-font-size-sm, #{t.$font-size-sm}));
+    // @desc Corner radius
     --_radius: var(--ui-avatar-radius, 50%);
   }
 
   // @modifier size
   .avatar--xs {
+    // @desc Overall size at extra-small size
     --_size: var(--ui-avatar-size-xs, calc(#{t.$unit} * 3));
+    // @desc Font size at extra-small size
     --_font-size: var(--ui-avatar-font-size-xs, var(--ui-font-size-xs, #{t.$font-size-xs}));
   }
 
   .avatar--sm {
+    // @desc Overall size at small size
     --_size: var(--ui-avatar-size-sm, calc(#{t.$unit} * 4));
+    // @desc Font size at small size
     --_font-size: var(--ui-avatar-font-size-sm, var(--ui-font-size-xs, #{t.$font-size-xs}));
   }
 
   .avatar--lg {
+    // @desc Overall size at large size
     --_size: var(--ui-avatar-size-lg, calc(#{t.$unit} * 6));
+    // @desc Font size at large size
     --_font-size: var(--ui-avatar-font-size-lg, var(--ui-font-size-md, #{t.$font-size-md}));
   }
 
   .avatar--xl {
+    // @desc Overall size at extra-large size
     --_size: var(--ui-avatar-size-xl, calc(#{t.$unit} * 8));
+    // @desc Font size at extra-large size
     --_font-size: var(--ui-avatar-font-size-xl, var(--ui-font-size-lg, #{t.$font-size-lg}));
   }
 
   // @modifier boolean square
   .avatar--square {
+    // @desc Radius square
     --_radius: var(--ui-avatar-radius-square, var(--ui-radius-md, #{t.$radius-md}));
   }
 }
@@ -53,7 +71,7 @@
     overflow: hidden;
 
     font-size: var(--_font-size);
-    font-weight: var(--ui-weight-medium, #{t.$weight-medium});
+    font-weight: var(--_weight-medium);
     line-height: 1;
     text-transform: uppercase;
     color: var(--_color);
@@ -94,7 +112,7 @@
     > .avatar {
       margin-inline-start: calc(var(--_size) * -0.25);
 
-      border: var(--ui-border-width-sm, #{t.$border-width-sm}) solid var(--ui-color-bg, #{t.$color-bg});
+      border: var(--_border-width-sm) solid var(--_color-bg);
 
       &:last-child {
         margin-inline-start: 0;

package/src/components/data-display/badge/badge.api.json

@@ -1,4 +1,5 @@
 {
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
   "name": "badge",
   "element": "span",
   "modifiers": {
@@ -10,89 +11,70 @@
     }
   },
   "cssVars": [
+    {
+      "name": "--ui-badge-accent",
+      "default": "var(--ui-color-bg-muted)",
+      "description": "Accent color"
+    },
     {
       "name": "--ui-badge-height",
-      "default": "var(--ui-row)"
+      "default": "calc(var(--ui-row) * 1.25)",
+      "description": "Overall height"
     },
     {
       "name": "--ui-badge-padding-x",
-      "default": "var(--ui-space-1)"
+      "default": "var(--ui-space-1)",
+      "description": "Horizontal padding"
     },
     {
       "name": "--ui-badge-font-size",
-      "default": "var(--ui-font-size-xs)"
+      "default": "var(--ui-font-size-xs)",
+      "description": "Font size"
     },
     {
       "name": "--ui-badge-font-weight",
-      "default": "var(--ui-weight-medium)"
+      "default": "var(--ui-weight-medium)",
+      "description": "Font weight"
     },
     {
       "name": "--ui-badge-radius",
-      "default": "var(--ui-radius-full)"
-    },
-    {
-      "name": "--ui-badge-bg",
-      "default": "var(--ui-color-bg-muted)"
+      "default": "var(--ui-radius-full)",
+      "description": "Corner radius"
     },
     {
       "name": "--ui-badge-color",
-      "default": "var(--ui-color-text)"
+      "default": "var(--ui-color-text)",
+      "description": "Text color"
     },
     {
       "name": "--ui-badge-height-sm",
-      "default": "var(--ui-row)"
+      "default": "var(--ui-row)",
+      "description": "Overall height at small size"
     },
     {
       "name": "--ui-badge-padding-x-sm",
-      "default": "var(--ui-space-0)"
+      "default": "var(--ui-space-0)",
+      "description": "Horizontal padding at small size"
     },
     {
       "name": "--ui-badge-font-size-sm",
-      "default": "var(--ui-font-size-xs)"
+      "default": "calc(var(--ui-font-size-xs) * 0.85)",
+      "description": "Font size at small size"
     },
     {
       "name": "--ui-badge-height-lg",
-      "default": "calc(var(--ui-row) * 1.5)"
+      "default": "calc(var(--ui-row) * 1.5)",
+      "description": "Overall height at large size"
     },
     {
       "name": "--ui-badge-padding-x-lg",
-      "default": "var(--ui-space-2)"
+      "default": "var(--ui-space-2)",
+      "description": "Horizontal padding at large size"
     },
     {
       "name": "--ui-badge-font-size-lg",
-      "default": "var(--ui-font-size-md)"
-    },
-    {
-      "name": "--ui-badge-primary-bg",
-      "default": "var(--ui-color-primary)"
-    },
-    {
-      "name": "--ui-badge-primary-text",
-      "default": "var(--ui-color-text-inverse)"
-    },
-    {
-      "name": "--ui-badge-success-bg",
-      "default": "var(--ui-color-success)"
-    },
-    {
-      "name": "--ui-badge-success-text",
-      "default": "var(--ui-color-text-inverse)"
-    },
-    {
-      "name": "--ui-badge-warning-bg",
-      "default": "var(--ui-color-warning)"
-    },
-    {
-      "name": "--ui-badge-warning-text",
-      "default": "var(--ui-color-text)"
-    },
-    {
-      "name": "--ui-badge-danger-bg",
-      "default": "var(--ui-color-danger)"
-    },
-    {
-      "name": "--ui-badge-danger-text",
-      "default": "var(--ui-color-text-inverse)"
+      "default": "var(--ui-font-size-md)",
+      "description": "Font size at large size"
     }
   ]
 }

package/src/components/data-display/badge/index.scss

@@ -6,27 +6,40 @@
 @layer components.tokens {
   .badge {
     // Single accent color - variants override this
+    // @desc Accent color
     --_accent: var(--ui-badge-accent, var(--ui-color-bg-muted, #{t.$color-bg-muted}));
 
+    // @desc Overall height
     --_height: var(--ui-badge-height, calc(var(--ui-row, #{t.$row}) * 1.25));
+    // @desc Horizontal padding
     --_padding-x: var(--ui-badge-padding-x, var(--ui-space-1, #{t.$space-1}));
+    // @desc Font size
     --_font-size: var(--ui-badge-font-size, var(--ui-font-size-xs, #{t.$font-size-xs}));
+    // @desc Font weight
     --_font-weight: var(--ui-badge-font-weight, var(--ui-weight-medium, #{t.$weight-medium}));
+    // @desc Corner radius
     --_radius: var(--ui-badge-radius, var(--ui-radius-full, #{t.$radius-full}));
     --_bg: var(--_accent);
+    // @desc Text color
     --_color: var(--ui-badge-color, var(--ui-color-text, #{t.$color-text}));
   }
 
   // @modifier size
   .badge--sm {
+    // @desc Overall height at small size
     --_height: var(--ui-badge-height-sm, var(--ui-row, #{t.$row}));
+    // @desc Horizontal padding at small size
     --_padding-x: var(--ui-badge-padding-x-sm, var(--ui-space-0, #{t.$space-0}));
+    // @desc Font size at small size
     --_font-size: var(--ui-badge-font-size-sm, calc(var(--ui-font-size-xs, #{t.$font-size-xs}) * 0.85));
   }
 
   .badge--lg {
+    // @desc Overall height at large size
     --_height: var(--ui-badge-height-lg, calc(var(--ui-row, #{t.$row}) * 1.5));
+    // @desc Horizontal padding at large size
     --_padding-x: var(--ui-badge-padding-x-lg, var(--ui-space-2, #{t.$space-2}));
+    // @desc Font size at large size
     --_font-size: var(--ui-badge-font-size-lg, var(--ui-font-size-md, #{t.$font-size-md}));
   }
 

package/src/components/data-display/card/card.api.json

@@ -1,4 +1,5 @@
 {
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
   "name": "card",
   "element": "div",
   "modifiers": {
@@ -8,61 +9,58 @@
     "size": {
       "values": ["sm", "lg"]
     },
-    "flush": {
+    "interactive": {
       "type": "boolean"
     },
-    "interactive": {
+    "flush": {
       "type": "boolean"
     }
   },
   "cssVars": [
     {
       "name": "--ui-card-padding",
-      "default": "var(--ui-space-4)"
+      "default": "var(--ui-space-4)",
+      "description": "Padding on all sides"
     },
     {
       "name": "--ui-card-border-width",
-      "default": "var(--ui-border-width-sm)"
+      "default": "var(--ui-border-width-sm)",
+      "description": "Border thickness"
     },
     {
       "name": "--ui-card-bg",
-      "default": "var(--ui-color-bg)"
+      "default": "var(--ui-color-bg)",
+      "description": "Background color"
     },
     {
       "name": "--ui-card-border-color",
-      "default": "var(--ui-color-border)"
+      "default": "var(--ui-color-border)",
+      "description": "Border color"
     },
     {
       "name": "--ui-card-radius",
-      "default": "var(--ui-radius-md)"
+      "default": "var(--ui-radius-md)",
+      "description": "Corner radius"
     },
     {
       "name": "--ui-card-bg-subtle",
-      "default": "var(--ui-color-bg-subtle)"
+      "default": "var(--ui-color-bg-subtle)",
+      "description": "Bg subtle"
     },
     {
       "name": "--ui-card-bg-muted",
-      "default": "var(--ui-color-bg-muted)"
+      "default": "var(--ui-color-bg-muted)",
+      "description": "Bg muted"
     },
     {
       "name": "--ui-card-padding-sm",
-      "default": "var(--ui-space-2)"
+      "default": "var(--ui-space-2)",
+      "description": "Padding on all sides at small size"
     },
     {
       "name": "--ui-card-padding-lg",
-      "default": "var(--ui-space-6)"
-    },
-    {
-      "name": "--ui-card-bg-hover",
-      "default": "var(--ui-color-bg-subtle)"
-    },
-    {
-      "name": "--ui-card-border-color-hover",
-      "default": "var(--ui-color-border-strong)"
-    },
-    {
-      "name": "--ui-card-bg-active",
-      "default": "var(--ui-color-bg-muted)"
+      "default": "var(--ui-space-6)",
+      "description": "Padding on all sides at large size"
     }
   ]
 }