@teseor/css 1.7.0 → 1.9.0

package/src/components/content/divider/divider.docs.json

@@ -0,0 +1,113 @@
+{
+  "id": "divider",
+  "type": "component",
+  "title": "Divider",
+  "description": "Visual separator between content sections. Supports horizontal/vertical orientation and optional text label.",
+  "api": "./divider.api.json",
+  "sections": [
+    {
+      "title": "Default",
+      "examples": [
+        {
+          "items": [{ "tag": "div", "class": "ui-divider", "attrs": { "role": "separator" } }],
+          "code": "<div class=\"ui-divider\" role=\"separator\"></div>"
+        }
+      ]
+    },
+    {
+      "title": "With Label",
+      "examples": [
+        {
+          "items": [
+            { "tag": "div", "class": "ui-divider", "attrs": { "role": "separator" }, "text": "OR" }
+          ],
+          "code": "<div class=\"ui-divider\" role=\"separator\">OR</div>"
+        }
+      ]
+    },
+    {
+      "title": "Label Alignment",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-divider ui-divider--start",
+              "attrs": { "role": "separator" },
+              "text": "Start"
+            },
+            {
+              "tag": "div",
+              "class": "ui-divider",
+              "attrs": { "role": "separator" },
+              "text": "Center"
+            },
+            {
+              "tag": "div",
+              "class": "ui-divider ui-divider--end",
+              "attrs": { "role": "separator" },
+              "text": "End"
+            }
+          ],
+          "code": "<div class=\"ui-divider ui-divider--start\">Start</div>\n<div class=\"ui-divider\">Center</div>\n<div class=\"ui-divider ui-divider--end\">End</div>"
+        }
+      ]
+    },
+    {
+      "title": "Dashed",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-divider ui-divider--dashed",
+              "attrs": { "role": "separator" }
+            }
+          ],
+          "code": "<div class=\"ui-divider ui-divider--dashed\"></div>"
+        }
+      ]
+    },
+    {
+      "title": "Vertical",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "attrs": { "style": "display: flex; height: 64px; align-items: center;" },
+              "children": [
+                { "tag": "span", "text": "Left" },
+                {
+                  "tag": "div",
+                  "class": "ui-divider ui-divider--vertical",
+                  "attrs": { "role": "separator" }
+                },
+                { "tag": "span", "text": "Right" }
+              ]
+            }
+          ],
+          "code": "<div style=\"display: flex;\">\n  <span>Left</span>\n  <div class=\"ui-divider ui-divider--vertical\"></div>\n  <span>Right</span>\n</div>"
+        }
+      ]
+    }
+  ],
+  "customization": [
+    {
+      "token": "--ui-divider-color",
+      "default": "var(--ui-color-border)",
+      "description": "Line color"
+    },
+    { "token": "--ui-divider-line-size", "default": "1px", "description": "Line thickness" },
+    {
+      "token": "--ui-divider-height",
+      "default": "var(--ui-unit)",
+      "description": "Container height"
+    },
+    {
+      "token": "--ui-divider-gap",
+      "default": "calc(var(--ui-unit) * 2)",
+      "description": "Vertical margin"
+    }
+  ]
+}

package/src/{04-components/layout → components/content}/divider/index.scss

@@ -1,13 +1,19 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 
 // @component divider
 // @element div
 
 @layer components.tokens {
   .divider {
-    --_color: var(--ui-divider-color, var(--ui-color-border, rgb(0 0 0 / 0.1)));
-    --_line-size: var(--ui-divider-line-size, 1px);
+    --_font-size-sm: var(--ui-font-size-sm, #{t.$font-size-sm});
+    --_color-text-muted: var(--ui-color-text-muted);
+    // @desc Text color
+    --_color: var(--ui-divider-color, var(--ui-color-border, #{t.$color-border}));
+    // @desc Line size
+    --_line-size: var(--ui-divider-line-size, #{t.$border-width-sm});
+    // @desc Overall height
     --_height: var(--ui-divider-height, #{t.$unit});
+    // @desc Gap between children
     --_gap: var(--ui-divider-gap, calc(#{t.$unit} * 2));
   }
 }
@@ -20,9 +26,9 @@
     block-size: var(--_height);
     margin: var(--_gap) 0;
 
-    font-size: var(--ui-font-size-sm, #{t.$font-size-sm});
+    font-size: var(--_font-size-sm);
     line-height: 1;
-    color: var(--ui-color-text-muted);
+    color: var(--_color-text-muted);
   }
 
   // Horizontal line (default)
@@ -74,6 +80,7 @@
   }
 
   // @modifier align
+  // @modifier position
   .divider--start::before {
     display: none;
   }

package/src/{04-components/layout → components/content}/scroll-area/index.scss

@@ -1,33 +1,45 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 
 // @component scroll-area
 // @element div
 
 @layer components.tokens {
   .scroll-area {
+    --_duration-fast: var(--ui-duration-fast, #{t.$duration-fast});
+    --_ease-default: var(--ui-ease-default, ease);
+    // @desc Maximum height
     --_max-height: var(--ui-scroll-area-max-height, calc(#{t.$row} * 10));
+    // @desc Scrollbar size
     --_scrollbar-size: var(--ui-scroll-area-scrollbar-size, calc(#{t.$unit} * 1));
+    // @desc Thumb control text color
     --_thumb-color: var(--ui-scroll-area-thumb-color, var(--ui-color-border-strong, #{t.$color-border-strong}));
+    // @desc Thumb hover color
     --_thumb-hover-color: var(--ui-scroll-area-thumb-hover-color, var(--ui-color-neutral-400, #{t.$color-neutral-400}));
+    // @desc Track text color
     --_track-color: var(--ui-scroll-area-track-color, transparent);
+    // @desc Thumb corner radius
     --_thumb-radius: var(--ui-scroll-area-thumb-radius, var(--ui-radius-full, #{t.$radius-full}));
   }
 
   // @modifier size
   .scroll-area--sm {
+    // @desc Maximum height at small size
     --_max-height: var(--ui-scroll-area-max-height-sm, calc(#{t.$row} * 5));
   }
 
   .scroll-area--lg {
+    // @desc Maximum height at large size
     --_max-height: var(--ui-scroll-area-max-height-lg, calc(#{t.$row} * 15));
   }
 
   .scroll-area--xl {
+    // @desc Maximum height at extra-large size
     --_max-height: var(--ui-scroll-area-max-height-xl, calc(#{t.$row} * 20));
   }
 
   // @modifier thin scrollbar
   .scroll-area--thin {
+    // @desc Scrollbar size thin
     --_scrollbar-size: var(--ui-scroll-area-scrollbar-size-thin, calc(#{t.$unit} * 0.5));
   }
 }
@@ -67,6 +79,7 @@
   }
 
   // Horizontal scrolling
+  // @modifier direction
   .scroll-area--horizontal > .scroll-area__viewport {
     max-block-size: none;
     overflow-x: auto;
@@ -80,10 +93,11 @@
   }
 
   // Auto-hide: fade scrollbar until hover
+  // @modifier boolean auto-hide
   .scroll-area--auto-hide > .scroll-area__viewport::-webkit-scrollbar-thumb {
     background: transparent;
 
-    transition: background var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease);
+    transition: background var(--_duration-fast) var(--_ease-default);
   }
 
   .scroll-area--auto-hide > .scroll-area__viewport:hover::-webkit-scrollbar-thumb {

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

@@ -0,0 +1,74 @@
+{
+  "$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"]
+    },
+    "auto-hide": {
+      "type": "boolean"
+    }
+  },
+  "elements": {
+    "viewport": {}
+  },
+  "cssVars": [
+    {
+      "name": "--ui-scroll-area-max-height",
+      "default": "calc(var(--ui-row) * 10)",
+      "description": "Maximum height"
+    },
+    {
+      "name": "--ui-scroll-area-scrollbar-size",
+      "default": "calc(var(--ui-unit) * 1)",
+      "description": "Scrollbar size"
+    },
+    {
+      "name": "--ui-scroll-area-thumb-color",
+      "default": "var(--ui-color-border-strong)",
+      "description": "Thumb control text color"
+    },
+    {
+      "name": "--ui-scroll-area-thumb-hover-color",
+      "default": "var(--ui-color-neutral-400)",
+      "description": "Thumb hover color"
+    },
+    {
+      "name": "--ui-scroll-area-track-color",
+      "default": "transparent",
+      "description": "Track text color"
+    },
+    {
+      "name": "--ui-scroll-area-thumb-radius",
+      "default": "var(--ui-radius-full)",
+      "description": "Thumb corner radius"
+    },
+    {
+      "name": "--ui-scroll-area-max-height-sm",
+      "default": "calc(var(--ui-row) * 5)",
+      "description": "Maximum height at small size"
+    },
+    {
+      "name": "--ui-scroll-area-max-height-lg",
+      "default": "calc(var(--ui-row) * 15)",
+      "description": "Maximum height at large size"
+    },
+    {
+      "name": "--ui-scroll-area-max-height-xl",
+      "default": "calc(var(--ui-row) * 20)",
+      "description": "Maximum height at extra-large size"
+    },
+    {
+      "name": "--ui-scroll-area-scrollbar-size-thin",
+      "default": "calc(var(--ui-unit) * 0.5)",
+      "description": "Scrollbar size thin"
+    }
+  ]
+}

package/src/{04-components/layout → components/content}/scroll-area/scroll-area.docs.json

@@ -46,7 +46,7 @@
       "title": "Sizes",
       "examples": [
         {
-          "layout": "stack",
+          "layout": "column",
           "items": [
             {
               "tag": "div",
@@ -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

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

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

@@ -0,0 +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": "var(--ui-spacer-size)",
+      "description": "Overall size"
+    }
+  ]
+}

package/src/{04-components/layout → components/content}/spacer/spacer.docs.json

@@ -12,7 +12,7 @@
           "items": [
             {
               "tag": "div",
-              "class": "ui-cluster",
+              "class": "ui-row",
               "style": {
                 "inline-size": "100%",
                 "background": "var(--ui-color-bg-subtle)",
@@ -49,7 +49,7 @@
           "items": [
             {
               "tag": "div",
-              "class": "ui-cluster",
+              "class": "ui-row",
               "style": {
                 "inline-size": "100%",
                 "background": "var(--ui-color-bg-subtle)",

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

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

package/src/{04-components → components}/data-display/avatar/avatar.docs.json

@@ -9,7 +9,7 @@
       "title": "Default",
       "examples": [
         {
-          "layout": "cluster",
+          "layout": "row",
           "items": [
             {
               "tag": "div",
@@ -36,7 +36,7 @@
       "title": "Sizes",
       "examples": [
         {
-          "layout": "cluster",
+          "layout": "row",
           "items": [
             {
               "tag": "div",
@@ -72,7 +72,7 @@
       "title": "Square Shape",
       "examples": [
         {
-          "layout": "cluster",
+          "layout": "row",
           "items": [
             {
               "tag": "div",
@@ -99,7 +99,7 @@
       "title": "With Images",
       "examples": [
         {
-          "layout": "cluster",
+          "layout": "row",
           "items": [
             {
               "tag": "div",
@@ -143,7 +143,52 @@
       "title": "Avatar Group",
       "examples": [
         {
-          "html": "<div class=\"ui-avatar-group\"><div class=\"ui-avatar\"><img class=\"ui-avatar__image\" src=\"https://i.pravatar.cc/80?u=g1\" alt=\"\"></div><div class=\"ui-avatar\"><img class=\"ui-avatar__image\" src=\"https://i.pravatar.cc/80?u=g2\" alt=\"\"></div><div class=\"ui-avatar\"><img class=\"ui-avatar__image\" src=\"https://i.pravatar.cc/80?u=g3\" alt=\"\"></div><div class=\"ui-avatar\"><span class=\"ui-avatar__fallback\">+5</span></div></div>",
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-avatar-group",
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-avatar",
+                  "children": [
+                    {
+                      "tag": "img",
+                      "class": "ui-avatar__image",
+                      "attrs": { "src": "https://i.pravatar.cc/80?u=g1", "alt": "" }
+                    }
+                  ]
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-avatar",
+                  "children": [
+                    {
+                      "tag": "img",
+                      "class": "ui-avatar__image",
+                      "attrs": { "src": "https://i.pravatar.cc/80?u=g2", "alt": "" }
+                    }
+                  ]
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-avatar",
+                  "children": [
+                    {
+                      "tag": "img",
+                      "class": "ui-avatar__image",
+                      "attrs": { "src": "https://i.pravatar.cc/80?u=g3", "alt": "" }
+                    }
+                  ]
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-avatar",
+                  "children": [{ "tag": "span", "class": "ui-avatar__fallback", "text": "+5" }]
+                }
+              ]
+            }
+          ],
           "code": "<div class=\"ui-avatar-group\">\n  <div class=\"ui-avatar\">\n    <img class=\"ui-avatar__image\" src=\"...\" alt=\"\">\n  </div>\n  <div class=\"ui-avatar\">\n    <img class=\"ui-avatar__image\" src=\"...\" alt=\"\">\n  </div>\n  <div class=\"ui-avatar\">\n    <span class=\"ui-avatar__fallback\">+5</span>\n  </div>\n</div>"
         }
       ]
@@ -152,27 +197,27 @@
   "customization": [
     {
       "token": "--ui-avatar-size",
-      "default": "calc(var(--unit) * 5)",
+      "default": "calc(var(--ui-unit) * 5)",
       "description": "Default size"
     },
     {
       "token": "--ui-avatar-size-xs",
-      "default": "calc(var(--unit) * 3)",
+      "default": "calc(var(--ui-unit) * 3)",
       "description": "Extra small size"
     },
     {
       "token": "--ui-avatar-size-sm",
-      "default": "calc(var(--unit) * 4)",
+      "default": "calc(var(--ui-unit) * 4)",
       "description": "Small size"
     },
     {
       "token": "--ui-avatar-size-lg",
-      "default": "calc(var(--unit) * 6)",
+      "default": "calc(var(--ui-unit) * 6)",
       "description": "Large size"
     },
     {
       "token": "--ui-avatar-size-xl",
-      "default": "calc(var(--unit) * 8)",
+      "default": "calc(var(--ui-unit) * 8)",
       "description": "Extra large size"
     },
     {