@teseor/css 1.3.0 → 1.5.0

package/src/04-components/typography/list/list.docs.json

@@ -0,0 +1,293 @@
+{
+  "id": "list",
+  "type": "component",
+  "title": "List",
+  "description": "Ordered and unordered lists with spacing control, inline layout, and marker customization.",
+  "api": "./list.api.json",
+  "sections": [
+    {
+      "title": "Default",
+      "description": "Unordered list with default bullet markers.",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "ul",
+              "class": "ui-list",
+              "children": [
+                {
+                  "tag": "li",
+                  "text": "First item in the list"
+                },
+                {
+                  "tag": "li",
+                  "text": "Second item in the list"
+                },
+                {
+                  "tag": "li",
+                  "text": "Third item in the list"
+                }
+              ]
+            }
+          ],
+          "code": "<ul class=\"ui-list\">\n  <li>First item</li>\n  <li>Second item</li>\n  <li>Third item</li>\n</ul>"
+        }
+      ]
+    },
+    {
+      "title": "Ordered",
+      "description": "Use on ol for numbered markers.",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "ol",
+              "class": "ui-list",
+              "children": [
+                {
+                  "tag": "li",
+                  "text": "Create the branch"
+                },
+                {
+                  "tag": "li",
+                  "text": "Implement the feature"
+                },
+                {
+                  "tag": "li",
+                  "text": "Open a pull request"
+                },
+                {
+                  "tag": "li",
+                  "text": "Merge after review"
+                }
+              ]
+            }
+          ],
+          "code": "<ol class=\"ui-list\">\n  <li>Create the branch</li>\n  <li>Implement the feature</li>\n  <li>Open a pull request</li>\n  <li>Merge after review</li>\n</ol>"
+        }
+      ]
+    },
+    {
+      "title": "Unstyled",
+      "description": "Removes markers and indent for nav or custom lists.",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "ul",
+              "class": "ui-list ui-list--unstyled",
+              "children": [
+                {
+                  "tag": "li",
+                  "text": "No bullet markers"
+                },
+                {
+                  "tag": "li",
+                  "text": "No inline padding"
+                },
+                {
+                  "tag": "li",
+                  "text": "Clean vertical stack"
+                }
+              ]
+            }
+          ],
+          "code": "<ul class=\"ui-list ui-list--unstyled\">\n  <li>No bullet markers</li>\n  <li>No inline padding</li>\n</ul>"
+        }
+      ]
+    },
+    {
+      "title": "Inline",
+      "description": "Horizontal flow with wrapping. Markers removed.",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "ul",
+              "class": "ui-list ui-list--inline",
+              "children": [
+                {
+                  "tag": "li",
+                  "text": "HTML"
+                },
+                {
+                  "tag": "li",
+                  "text": "CSS"
+                },
+                {
+                  "tag": "li",
+                  "text": "JavaScript"
+                },
+                {
+                  "tag": "li",
+                  "text": "TypeScript"
+                },
+                {
+                  "tag": "li",
+                  "text": "React"
+                }
+              ]
+            }
+          ],
+          "code": "<ul class=\"ui-list ui-list--inline\">\n  <li>HTML</li>\n  <li>CSS</li>\n  <li>JavaScript</li>\n</ul>"
+        }
+      ]
+    },
+    {
+      "title": "Spacing",
+      "description": "Control gap between items with compact or loose variants.",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-stack",
+              "style": {
+                "gap": "var(--ui-space-2)"
+              },
+              "children": [
+                {
+                  "tag": "p",
+                  "text": "Compact"
+                },
+                {
+                  "tag": "ul",
+                  "class": "ui-list ui-list--compact",
+                  "children": [
+                    {
+                      "tag": "li",
+                      "text": "Tight spacing"
+                    },
+                    {
+                      "tag": "li",
+                      "text": "No gap between items"
+                    },
+                    {
+                      "tag": "li",
+                      "text": "Dense content"
+                    }
+                  ]
+                },
+                {
+                  "tag": "p",
+                  "text": "Default"
+                },
+                {
+                  "tag": "ul",
+                  "class": "ui-list",
+                  "children": [
+                    {
+                      "tag": "li",
+                      "text": "Standard spacing"
+                    },
+                    {
+                      "tag": "li",
+                      "text": "One grid unit gap"
+                    },
+                    {
+                      "tag": "li",
+                      "text": "Balanced readability"
+                    }
+                  ]
+                },
+                {
+                  "tag": "p",
+                  "text": "Loose"
+                },
+                {
+                  "tag": "ul",
+                  "class": "ui-list ui-list--loose",
+                  "children": [
+                    {
+                      "tag": "li",
+                      "text": "Extra breathing room"
+                    },
+                    {
+                      "tag": "li",
+                      "text": "Two grid units gap"
+                    },
+                    {
+                      "tag": "li",
+                      "text": "Prominent separation"
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "code": "<ul class=\"ui-list ui-list--compact\">...</ul>\n<ul class=\"ui-list\">...</ul>\n<ul class=\"ui-list ui-list--loose\">...</ul>"
+        }
+      ]
+    },
+    {
+      "title": "Nested",
+      "description": "Lists inside lists inherit spacing and show sub-level markers.",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "ul",
+              "class": "ui-list",
+              "children": [
+                {
+                  "tag": "li",
+                  "text": "Top-level item"
+                },
+                {
+                  "tag": "li",
+                  "children": [
+                    {
+                      "tag": "span",
+                      "text": "Parent with children"
+                    },
+                    {
+                      "tag": "ul",
+                      "class": "ui-list",
+                      "children": [
+                        {
+                          "tag": "li",
+                          "text": "Nested child"
+                        },
+                        {
+                          "tag": "li",
+                          "text": "Another nested child"
+                        }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "tag": "li",
+                  "text": "Back to top level"
+                }
+              ]
+            }
+          ],
+          "code": "<ul class=\"ui-list\">\n  <li>Top-level item</li>\n  <li>\n    Parent with children\n    <ul class=\"ui-list\">\n      <li>Nested child</li>\n    </ul>\n  </li>\n</ul>"
+        }
+      ]
+    }
+  ],
+  "customization": [
+    {
+      "token": "--ui-list-spacing",
+      "default": "var(--unit)",
+      "description": "Gap between items"
+    },
+    {
+      "token": "--ui-list-marker-color",
+      "default": "var(--ui-color-text-muted)",
+      "description": "Bullet or number color"
+    },
+    {
+      "token": "--ui-list-indent",
+      "default": "var(--ui-space-3)",
+      "description": "Inline-start padding for markers"
+    },
+    {
+      "token": "--ui-list-line-height",
+      "default": "var(--ui-leading-md)",
+      "description": "Item line height"
+    }
+  ]
+}

package/src/04-components/typography/list/list.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, 'list.docs.json');
+
+test.describe('list visual regression', () => {
+  test('all variations', async ({ page }) => {
+    await setupVisualTestFromDocs(page, DOCS_PATH);
+    await validateGridRhythm(page, 'list');
+    await saveForLostPixel(page, 'list');
+    await expect(page.locator('body')).toHaveScreenshot('list.visual.png');
+  });
+});