@teseor/css 1.5.0 → 1.7.0

package/src/04-components/layout/scroll-area/index.scss

@@ -0,0 +1,92 @@
+@use '../../../00-config/tokens/variables' as t;
+
+// @component scroll-area
+// @element div
+
+@layer components.tokens {
+  .scroll-area {
+    --_max-height: var(--ui-scroll-area-max-height, calc(#{t.$row} * 10));
+    --_scrollbar-size: var(--ui-scroll-area-scrollbar-size, calc(#{t.$unit} * 1));
+    --_thumb-color: var(--ui-scroll-area-thumb-color, var(--ui-color-border-strong, #{t.$color-border-strong}));
+    --_thumb-hover-color: var(--ui-scroll-area-thumb-hover-color, var(--ui-color-neutral-400, #{t.$color-neutral-400}));
+    --_track-color: var(--ui-scroll-area-track-color, transparent);
+    --_thumb-radius: var(--ui-scroll-area-thumb-radius, var(--ui-radius-full, #{t.$radius-full}));
+  }
+
+  // @modifier size
+  .scroll-area--sm {
+    --_max-height: var(--ui-scroll-area-max-height-sm, calc(#{t.$row} * 5));
+  }
+
+  .scroll-area--lg {
+    --_max-height: var(--ui-scroll-area-max-height-lg, calc(#{t.$row} * 15));
+  }
+
+  .scroll-area--xl {
+    --_max-height: var(--ui-scroll-area-max-height-xl, calc(#{t.$row} * 20));
+  }
+
+  // @modifier thin scrollbar
+  .scroll-area--thin {
+    --_scrollbar-size: var(--ui-scroll-area-scrollbar-size-thin, calc(#{t.$unit} * 0.5));
+  }
+}
+
+@layer components.styles {
+  .scroll-area {
+    overflow: hidden;
+  }
+
+  .scroll-area__viewport {
+    max-block-size: var(--_max-height);
+    overflow-x: hidden;
+    overflow-y: auto;
+
+    // Firefox
+    scrollbar-width: thin;
+    scrollbar-color: var(--_thumb-color) var(--_track-color);
+  }
+
+  // WebKit scrollbar styles
+  .scroll-area__viewport::-webkit-scrollbar {
+    block-size: var(--_scrollbar-size);
+    inline-size: var(--_scrollbar-size);
+  }
+
+  .scroll-area__viewport::-webkit-scrollbar-track {
+    background: var(--_track-color);
+  }
+
+  .scroll-area__viewport::-webkit-scrollbar-thumb {
+    background: var(--_thumb-color);
+    border-radius: var(--_thumb-radius);
+  }
+
+  .scroll-area__viewport::-webkit-scrollbar-thumb:hover {
+    background: var(--_thumb-hover-color);
+  }
+
+  // Horizontal scrolling
+  .scroll-area--horizontal > .scroll-area__viewport {
+    max-block-size: none;
+    overflow-x: auto;
+    overflow-y: hidden;
+  }
+
+  // Both directions
+  .scroll-area--both > .scroll-area__viewport {
+    overflow-x: auto;
+    overflow-y: auto;
+  }
+
+  // Auto-hide: fade scrollbar until hover
+  .scroll-area--auto-hide > .scroll-area__viewport::-webkit-scrollbar-thumb {
+    background: transparent;
+
+    transition: background var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease);
+  }
+
+  .scroll-area--auto-hide > .scroll-area__viewport:hover::-webkit-scrollbar-thumb {
+    background: var(--_thumb-color);
+  }
+}

package/src/04-components/layout/scroll-area/scroll-area.api.json

@@ -0,0 +1,63 @@
+{
+  "name": "scroll-area",
+  "element": "div",
+  "modifiers": {
+    "size": {
+      "values": ["sm", "lg", "xl"]
+    },
+    "direction": {
+      "values": ["horizontal", "both"]
+    },
+    "thin": {
+      "type": "boolean"
+    },
+    "auto-hide": {
+      "type": "boolean"
+    }
+  },
+  "elements": {
+    "viewport": {}
+  },
+  "cssVars": [
+    {
+      "name": "--ui-scroll-area-max-height",
+      "default": "calc(var(--ui-row) * 10)"
+    },
+    {
+      "name": "--ui-scroll-area-max-height-sm",
+      "default": "calc(var(--ui-row) * 5)"
+    },
+    {
+      "name": "--ui-scroll-area-max-height-lg",
+      "default": "calc(var(--ui-row) * 15)"
+    },
+    {
+      "name": "--ui-scroll-area-max-height-xl",
+      "default": "calc(var(--ui-row) * 20)"
+    },
+    {
+      "name": "--ui-scroll-area-scrollbar-size",
+      "default": "var(--ui-space-1)"
+    },
+    {
+      "name": "--ui-scroll-area-scrollbar-size-thin",
+      "default": "calc(var(--ui-space-1) * 0.5)"
+    },
+    {
+      "name": "--ui-scroll-area-thumb-color",
+      "default": "var(--ui-color-border-strong)"
+    },
+    {
+      "name": "--ui-scroll-area-thumb-hover-color",
+      "default": "var(--ui-color-neutral-400)"
+    },
+    {
+      "name": "--ui-scroll-area-track-color",
+      "default": "transparent"
+    },
+    {
+      "name": "--ui-scroll-area-thumb-radius",
+      "default": "var(--ui-radius-full)"
+    }
+  ]
+}

package/src/04-components/layout/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": "stack",
+          "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/04-components/layout/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/navigation/dropdown-menu/dropdown-menu.api.json

@@ -0,0 +1,37 @@
+{
+  "name": "dropdown-menu",
+  "element": "div",
+  "modifiers": {
+    "open": {
+      "type": "boolean"
+    },
+    "top": {
+      "type": "boolean"
+    },
+    "align-end": {
+      "type": "boolean"
+    },
+    "full-width": {
+      "type": "boolean"
+    }
+  },
+  "elements": {
+    "trigger": {},
+    "trigger-icon": {},
+    "panel": {}
+  },
+  "cssVars": [
+    {
+      "name": "--ui-dropdown-menu-z",
+      "default": "200"
+    },
+    {
+      "name": "--ui-dropdown-menu-panel-offset",
+      "default": "var(--ui-space-1)"
+    },
+    {
+      "name": "--ui-dropdown-menu-panel-min-width",
+      "default": "auto"
+    }
+  ]
+}