@teseor/css 1.6.0 → 1.8.0

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

@@ -0,0 +1,204 @@
+{
+  "id": "scroll-area",
+  "type": "component",
+  "title": "Scroll Area",
+  "description": "Scrollable container with styled scrollbar. Provides overflow control and custom scrollbar styling.",
+  "api": "./scroll-area.api.json",
+  "sections": [
+    {
+      "title": "Default",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-scroll-area",
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-scroll-area__viewport",
+                  "children": [
+                    { "tag": "p", "text": "Line 1 of scrollable content" },
+                    { "tag": "p", "text": "Line 2 of scrollable content" },
+                    { "tag": "p", "text": "Line 3 of scrollable content" },
+                    { "tag": "p", "text": "Line 4 of scrollable content" },
+                    { "tag": "p", "text": "Line 5 of scrollable content" },
+                    { "tag": "p", "text": "Line 6 of scrollable content" },
+                    { "tag": "p", "text": "Line 7 of scrollable content" },
+                    { "tag": "p", "text": "Line 8 of scrollable content" },
+                    { "tag": "p", "text": "Line 9 of scrollable content" },
+                    { "tag": "p", "text": "Line 10 of scrollable content" },
+                    { "tag": "p", "text": "Line 11 of scrollable content" },
+                    { "tag": "p", "text": "Line 12 of scrollable content" },
+                    { "tag": "p", "text": "Line 13 of scrollable content" },
+                    { "tag": "p", "text": "Line 14 of scrollable content" },
+                    { "tag": "p", "text": "Line 15 of scrollable content" }
+                  ]
+                }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-scroll-area\">\n  <div class=\"ui-scroll-area__viewport\">\n    Content...\n  </div>\n</div>"
+        }
+      ]
+    },
+    {
+      "title": "Sizes",
+      "examples": [
+        {
+          "layout": "column",
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-scroll-area ui-scroll-area--sm",
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-scroll-area__viewport",
+                  "children": [
+                    { "tag": "p", "text": "Small - Line 1" },
+                    { "tag": "p", "text": "Small - Line 2" },
+                    { "tag": "p", "text": "Small - Line 3" },
+                    { "tag": "p", "text": "Small - Line 4" },
+                    { "tag": "p", "text": "Small - Line 5" },
+                    { "tag": "p", "text": "Small - Line 6" },
+                    { "tag": "p", "text": "Small - Line 7" },
+                    { "tag": "p", "text": "Small - Line 8" }
+                  ]
+                }
+              ]
+            },
+            {
+              "tag": "div",
+              "class": "ui-scroll-area ui-scroll-area--lg",
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-scroll-area__viewport",
+                  "children": [
+                    { "tag": "p", "text": "Large - Line 1" },
+                    { "tag": "p", "text": "Large - Line 2" },
+                    { "tag": "p", "text": "Large - Line 3" },
+                    { "tag": "p", "text": "Large - Line 4" },
+                    { "tag": "p", "text": "Large - Line 5" },
+                    { "tag": "p", "text": "Large - Line 6" },
+                    { "tag": "p", "text": "Large - Line 7" },
+                    { "tag": "p", "text": "Large - Line 8" },
+                    { "tag": "p", "text": "Large - Line 9" },
+                    { "tag": "p", "text": "Large - Line 10" },
+                    { "tag": "p", "text": "Large - Line 11" },
+                    { "tag": "p", "text": "Large - Line 12" },
+                    { "tag": "p", "text": "Large - Line 13" },
+                    { "tag": "p", "text": "Large - Line 14" },
+                    { "tag": "p", "text": "Large - Line 15" },
+                    { "tag": "p", "text": "Large - Line 16" },
+                    { "tag": "p", "text": "Large - Line 17" },
+                    { "tag": "p", "text": "Large - Line 18" },
+                    { "tag": "p", "text": "Large - Line 19" },
+                    { "tag": "p", "text": "Large - Line 20" }
+                  ]
+                }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-scroll-area ui-scroll-area--sm\">...</div>\n<div class=\"ui-scroll-area ui-scroll-area--lg\">...</div>"
+        }
+      ]
+    },
+    {
+      "title": "Thin Scrollbar",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-scroll-area ui-scroll-area--thin",
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-scroll-area__viewport",
+                  "children": [
+                    { "tag": "p", "text": "Thin scrollbar - Line 1" },
+                    { "tag": "p", "text": "Thin scrollbar - Line 2" },
+                    { "tag": "p", "text": "Thin scrollbar - Line 3" },
+                    { "tag": "p", "text": "Thin scrollbar - Line 4" },
+                    { "tag": "p", "text": "Thin scrollbar - Line 5" },
+                    { "tag": "p", "text": "Thin scrollbar - Line 6" },
+                    { "tag": "p", "text": "Thin scrollbar - Line 7" },
+                    { "tag": "p", "text": "Thin scrollbar - Line 8" },
+                    { "tag": "p", "text": "Thin scrollbar - Line 9" },
+                    { "tag": "p", "text": "Thin scrollbar - Line 10" },
+                    { "tag": "p", "text": "Thin scrollbar - Line 11" },
+                    { "tag": "p", "text": "Thin scrollbar - Line 12" }
+                  ]
+                }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-scroll-area ui-scroll-area--thin\">...</div>"
+        }
+      ]
+    },
+    {
+      "title": "Auto-Hide",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-scroll-area ui-scroll-area--auto-hide",
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-scroll-area__viewport",
+                  "children": [
+                    { "tag": "p", "text": "Scrollbar hidden until hover - Line 1" },
+                    { "tag": "p", "text": "Scrollbar hidden until hover - Line 2" },
+                    { "tag": "p", "text": "Scrollbar hidden until hover - Line 3" },
+                    { "tag": "p", "text": "Scrollbar hidden until hover - Line 4" },
+                    { "tag": "p", "text": "Scrollbar hidden until hover - Line 5" },
+                    { "tag": "p", "text": "Scrollbar hidden until hover - Line 6" },
+                    { "tag": "p", "text": "Scrollbar hidden until hover - Line 7" },
+                    { "tag": "p", "text": "Scrollbar hidden until hover - Line 8" },
+                    { "tag": "p", "text": "Scrollbar hidden until hover - Line 9" },
+                    { "tag": "p", "text": "Scrollbar hidden until hover - Line 10" },
+                    { "tag": "p", "text": "Scrollbar hidden until hover - Line 11" },
+                    { "tag": "p", "text": "Scrollbar hidden until hover - Line 12" }
+                  ]
+                }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-scroll-area ui-scroll-area--auto-hide\">...</div>"
+        }
+      ]
+    }
+  ],
+  "customization": [
+    {
+      "token": "--ui-scroll-area-max-height",
+      "default": "calc(var(--ui-row) * 10)",
+      "description": "Default max height"
+    },
+    {
+      "token": "--ui-scroll-area-scrollbar-size",
+      "default": "var(--ui-space-1)",
+      "description": "Scrollbar width"
+    },
+    {
+      "token": "--ui-scroll-area-thumb-color",
+      "default": "var(--ui-color-border-strong)",
+      "description": "Scrollbar thumb color"
+    },
+    {
+      "token": "--ui-scroll-area-thumb-hover-color",
+      "default": "var(--ui-color-neutral-400)",
+      "description": "Scrollbar thumb hover color"
+    },
+    {
+      "token": "--ui-scroll-area-track-color",
+      "default": "transparent",
+      "description": "Scrollbar track background"
+    }
+  ]
+}

package/src/components/content/scroll-area/scroll-area.visual.spec.ts

@@ -0,0 +1,14 @@
+import { resolve } from 'node:path';
+import { expect, test } from '@playwright/test';
+import { saveForLostPixel, setupVisualTestFromDocs, validateGridRhythm } from '../../../testing';
+
+const DOCS_PATH = resolve(__dirname, 'scroll-area.docs.json');
+
+test.describe('scroll-area visual regression', () => {
+  test('all variations', async ({ page }) => {
+    await setupVisualTestFromDocs(page, DOCS_PATH);
+    await validateGridRhythm(page, 'scroll-area');
+    await saveForLostPixel(page, 'scroll-area');
+    await expect(page.locator('body')).toHaveScreenshot('scroll-area-visual.png');
+  });
+});

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/{04-components → components}/data-display/avatar/avatar.api.json

@@ -17,7 +17,7 @@
   "cssVars": [
     {
       "name": "--ui-avatar-size",
-      "default": "calc(#{t.$unit} * 5"
+      "default": "calc(var(--ui-unit) * 5"
     },
     {
       "name": "--ui-avatar-bg",
@@ -37,7 +37,7 @@
     },
     {
       "name": "--ui-avatar-size-xs",
-      "default": "calc(#{t.$unit} * 3"
+      "default": "calc(var(--ui-unit) * 3"
     },
     {
       "name": "--ui-avatar-font-size-xs",
@@ -45,7 +45,7 @@
     },
     {
       "name": "--ui-avatar-size-sm",
-      "default": "calc(#{t.$unit} * 4"
+      "default": "calc(var(--ui-unit) * 4"
     },
     {
       "name": "--ui-avatar-font-size-sm",
@@ -53,7 +53,7 @@
     },
     {
       "name": "--ui-avatar-size-lg",
-      "default": "calc(#{t.$unit} * 6"
+      "default": "calc(var(--ui-unit) * 6"
     },
     {
       "name": "--ui-avatar-font-size-lg",
@@ -61,7 +61,7 @@
     },
     {
       "name": "--ui-avatar-size-xl",
-      "default": "calc(#{t.$unit} * 8"
+      "default": "calc(var(--ui-unit) * 8"
     },
     {
       "name": "--ui-avatar-font-size-xl",

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"
     },
     {

package/src/{04-components → components}/data-display/avatar/index.scss

@@ -1,4 +1,4 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 
 // @component avatar
 // @element div

package/src/{04-components → components}/data-display/badge/badge.api.json

@@ -3,7 +3,7 @@
   "element": "span",
   "modifiers": {
     "size": {
-      "values": ["sm"]
+      "values": ["sm", "lg"]
     },
     "variant": {
       "values": ["primary", "success", "warning", "danger"]
@@ -35,7 +35,7 @@
       "default": "var(--ui-color-bg-muted)"
     },
     {
-      "name": "--ui-badge-text",
+      "name": "--ui-badge-color",
       "default": "var(--ui-color-text)"
     },
     {
@@ -50,6 +50,18 @@
       "name": "--ui-badge-font-size-sm",
       "default": "var(--ui-font-size-xs)"
     },
+    {
+      "name": "--ui-badge-height-lg",
+      "default": "calc(var(--ui-row) * 1.5)"
+    },
+    {
+      "name": "--ui-badge-padding-x-lg",
+      "default": "var(--ui-space-2)"
+    },
+    {
+      "name": "--ui-badge-font-size-lg",
+      "default": "var(--ui-font-size-md)"
+    },
     {
       "name": "--ui-badge-primary-bg",
       "default": "var(--ui-color-primary)"

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

@@ -9,7 +9,7 @@
       "title": "Default",
       "examples": [
         {
-          "html": "<span class=\"ui-badge\">Default</span>"
+          "items": [{ "tag": "span", "class": "ui-badge", "text": "Default" }]
         }
       ]
     },
@@ -24,7 +24,7 @@
             { "tag": "span", "class": "ui-badge ui-badge--warning", "text": "Warning" },
             { "tag": "span", "class": "ui-badge ui-badge--danger", "text": "Danger" }
           ],
-          "layout": "cluster"
+          "layout": "row"
         }
       ]
     },
@@ -34,9 +34,10 @@
         {
           "items": [
             { "tag": "span", "class": "ui-badge ui-badge--sm", "text": "Small" },
-            { "tag": "span", "class": "ui-badge", "text": "Default" }
+            { "tag": "span", "class": "ui-badge", "text": "Default" },
+            { "tag": "span", "class": "ui-badge ui-badge--lg", "text": "Large" }
           ],
-          "layout": "cluster"
+          "layout": "row"
         }
       ]
     },
@@ -44,10 +45,29 @@
       "title": "Use Cases",
       "examples": [
         {
-          "html": "<div class=\"ui-cluster\"><span>Notifications</span><span class=\"ui-badge ui-badge--primary\">5</span></div>"
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-row",
+              "children": [
+                { "tag": "span", "text": "Notifications" },
+                { "tag": "span", "class": "ui-badge ui-badge--primary", "text": "5" }
+              ]
+            }
+          ]
         },
         {
-          "html": "<div class=\"ui-cluster\"><span class=\"ui-badge ui-badge--success\">Published</span><span class=\"ui-badge ui-badge--warning\">Draft</span><span class=\"ui-badge ui-badge--danger\">Archived</span></div>"
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-row",
+              "children": [
+                { "tag": "span", "class": "ui-badge ui-badge--success", "text": "Published" },
+                { "tag": "span", "class": "ui-badge ui-badge--warning", "text": "Draft" },
+                { "tag": "span", "class": "ui-badge ui-badge--danger", "text": "Archived" }
+              ]
+            }
+          ]
         }
       ]
     }
@@ -59,6 +79,11 @@
       "description": "Default height"
     },
     { "token": "--ui-badge-height-sm", "default": "var(--ui-row)", "description": "Small height" },
+    {
+      "token": "--ui-badge-height-lg",
+      "default": "calc(var(--ui-row) * 1.5)",
+      "description": "Large height"
+    },
     {
       "token": "--ui-badge-padding-x",
       "default": "var(--ui-space-1)",
@@ -84,6 +109,6 @@
       "default": "var(--ui-color-bg-muted)",
       "description": "Background color"
     },
-    { "token": "--ui-badge-text", "default": "var(--ui-color-text)", "description": "Text color" }
+    { "token": "--ui-badge-color", "default": "var(--ui-color-text)", "description": "Text color" }
   ]
 }

package/src/{04-components → components}/data-display/badge/index.scss

@@ -1,4 +1,4 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 
 // @component badge
 // @element span
@@ -14,7 +14,7 @@
     --_font-weight: var(--ui-badge-font-weight, var(--ui-weight-medium, #{t.$weight-medium}));
     --_radius: var(--ui-badge-radius, var(--ui-radius-full, #{t.$radius-full}));
     --_bg: var(--_accent);
-    --_text: var(--ui-badge-text, var(--ui-color-text, #{t.$color-text}));
+    --_color: var(--ui-badge-color, var(--ui-color-text, #{t.$color-text}));
   }
 
   // @modifier size
@@ -24,25 +24,31 @@
     --_font-size: var(--ui-badge-font-size-sm, calc(var(--ui-font-size-xs, #{t.$font-size-xs}) * 0.85));
   }
 
+  .badge--lg {
+    --_height: var(--ui-badge-height-lg, calc(var(--ui-row, #{t.$row}) * 1.5));
+    --_padding-x: var(--ui-badge-padding-x-lg, var(--ui-space-2, #{t.$space-2}));
+    --_font-size: var(--ui-badge-font-size-lg, var(--ui-font-size-md, #{t.$font-size-md}));
+  }
+
   // @modifier variant
   .badge--primary {
     --_accent: var(--ui-color-primary, #{t.$color-primary});
-    --_text: var(--ui-color-text-inverse, #{t.$color-text-inverse});
+    --_color: var(--ui-color-text-inverse, #{t.$color-text-inverse});
   }
 
   .badge--success {
     --_accent: var(--ui-color-success, #{t.$color-success});
-    --_text: var(--ui-color-text-inverse, #{t.$color-text-inverse});
+    --_color: var(--ui-color-text-inverse, #{t.$color-text-inverse});
   }
 
   .badge--warning {
     --_accent: var(--ui-color-warning, #{t.$color-warning});
-    --_text: var(--ui-color-text, #{t.$color-text});
+    --_color: var(--ui-color-text, #{t.$color-text});
   }
 
   .badge--danger {
     --_accent: var(--ui-color-danger, #{t.$color-danger});
-    --_text: var(--ui-color-text-inverse, #{t.$color-text-inverse});
+    --_color: var(--ui-color-text-inverse, #{t.$color-text-inverse});
   }
 }
 
@@ -59,7 +65,7 @@
     font-weight: var(--_font-weight);
     line-height: 1;
     white-space: nowrap;
-    color: var(--_text);
+    color: var(--_color);
 
     background: var(--_bg);
     border-radius: var(--_radius);

package/src/{04-components → components}/data-display/card/card.api.json

@@ -10,6 +10,9 @@
     },
     "flush": {
       "type": "boolean"
+    },
+    "interactive": {
+      "type": "boolean"
     }
   },
   "cssVars": [
@@ -48,6 +51,18 @@
     {
       "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)"
     }
   ]
 }