@teseor/css 1.14.3 → 1.15.1

package/src/layout/page-header/page-header.docs.json

@@ -1,124 +0,0 @@
-{
-  "id": "page-header",
-  "type": "primitive",
-  "title": "Page Header",
-  "description": "Content area header with title, description, actions, and optional breadcrumb.",
-  "api": "./page-header.api.json",
-  "sections": [
-    {
-      "title": "Default",
-      "description": "Title with actions on the end side.",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "header",
-              "class": "ui-page-header ui-page-header--bordered",
-              "children": [
-                {
-                  "tag": "div",
-                  "class": "ui-page-header__title",
-                  "children": [
-                    { "tag": "h1", "class": "ui-heading ui-heading--xl", "text": "Users" },
-                    { "tag": "p", "text": "Manage user accounts and permissions." }
-                  ]
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-page-header__actions",
-                  "children": [
-                    { "tag": "button", "class": "ui-button ui-button--primary", "text": "Add user" }
-                  ]
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "title": "With Breadcrumb",
-      "description": "Breadcrumb spans the full width above the title row.",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "header",
-              "class": "ui-page-header ui-page-header--bordered",
-              "children": [
-                {
-                  "tag": "nav",
-                  "class": "ui-page-header__breadcrumb",
-                  "children": [{ "tag": "span", "text": "Home / Settings / Users" }]
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-page-header__title",
-                  "children": [
-                    { "tag": "h1", "class": "ui-heading ui-heading--xl", "text": "Users" }
-                  ]
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-page-header__actions",
-                  "children": [{ "tag": "button", "class": "ui-button", "text": "Export" }]
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "title": "Bordered",
-      "description": "Bottom border via inset box-shadow.",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "header",
-              "class": "ui-page-header ui-page-header--bordered",
-              "children": [
-                {
-                  "tag": "div",
-                  "class": "ui-page-header__title",
-                  "children": [
-                    { "tag": "h1", "class": "ui-heading ui-heading--xl", "text": "Dashboard" }
-                  ]
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "title": "Sticky",
-      "description": "Sticks to the top of the scroll container.",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "header",
-              "class": "ui-page-header ui-page-header--sticky ui-page-header--bordered",
-              "children": [
-                {
-                  "tag": "div",
-                  "class": "ui-page-header__title",
-                  "children": [
-                    { "tag": "h1", "class": "ui-heading ui-heading--xl", "text": "Sticky Header" }
-                  ]
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-page-header__actions",
-                  "children": [{ "tag": "button", "class": "ui-button", "text": "Save" }]
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    }
-  ]
-}

package/src/layout/row/row.docs.json

@@ -1,237 +0,0 @@
-{
-  "id": "row",
-  "type": "primitive",
-  "title": "Row",
-  "description": "Horizontal layout with wrapping.",
-  "api": "row.api.json",
-  "sections": [
-    {
-      "title": "Basic",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-row ui-row--md",
-              "children": [
-                {
-                  "tag": "div",
-                  "text": "Tag 1",
-                  "style": {
-                    "background": "var(--ui-color-bg-muted)",
-                    "padding": "var(--ui-space-2)"
-                  }
-                },
-                {
-                  "tag": "div",
-                  "text": "Tag 2",
-                  "style": {
-                    "background": "var(--ui-color-bg-muted)",
-                    "padding": "var(--ui-space-2)"
-                  }
-                },
-                {
-                  "tag": "div",
-                  "text": "Tag 3",
-                  "style": {
-                    "background": "var(--ui-color-bg-muted)",
-                    "padding": "var(--ui-space-2)"
-                  }
-                },
-                {
-                  "tag": "div",
-                  "text": "Tag 4",
-                  "style": {
-                    "background": "var(--ui-color-bg-muted)",
-                    "padding": "var(--ui-space-2)"
-                  }
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "title": "Sizes",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-row ui-row--xs",
-              "children": [
-                {
-                  "tag": "div",
-                  "text": "xs",
-                  "style": {
-                    "background": "var(--ui-color-bg-muted)",
-                    "padding": "var(--ui-space-1)"
-                  }
-                },
-                {
-                  "tag": "div",
-                  "text": "xs",
-                  "style": {
-                    "background": "var(--ui-color-bg-muted)",
-                    "padding": "var(--ui-space-1)"
-                  }
-                },
-                {
-                  "tag": "div",
-                  "text": "xs",
-                  "style": {
-                    "background": "var(--ui-color-bg-muted)",
-                    "padding": "var(--ui-space-1)"
-                  }
-                }
-              ]
-            }
-          ]
-        },
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-row ui-row--lg",
-              "children": [
-                {
-                  "tag": "div",
-                  "text": "lg",
-                  "style": {
-                    "background": "var(--ui-color-bg-muted)",
-                    "padding": "var(--ui-space-1)"
-                  }
-                },
-                {
-                  "tag": "div",
-                  "text": "lg",
-                  "style": {
-                    "background": "var(--ui-color-bg-muted)",
-                    "padding": "var(--ui-space-1)"
-                  }
-                },
-                {
-                  "tag": "div",
-                  "text": "lg",
-                  "style": {
-                    "background": "var(--ui-color-bg-muted)",
-                    "padding": "var(--ui-space-1)"
-                  }
-                }
-              ]
-            }
-          ]
-        },
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-row ui-row--sm",
-              "children": [
-                {
-                  "tag": "div",
-                  "text": "sm",
-                  "style": {
-                    "background": "var(--ui-color-bg-muted)",
-                    "padding": "var(--ui-space-1)"
-                  }
-                },
-                {
-                  "tag": "div",
-                  "text": "sm",
-                  "style": {
-                    "background": "var(--ui-color-bg-muted)",
-                    "padding": "var(--ui-space-1)"
-                  }
-                },
-                {
-                  "tag": "div",
-                  "text": "sm",
-                  "style": {
-                    "background": "var(--ui-color-bg-muted)",
-                    "padding": "var(--ui-space-1)"
-                  }
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "title": "Alignment",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-row ui-row--start",
-              "style": { "background": "var(--ui-color-bg-muted)" },
-              "children": [
-                {
-                  "tag": "div",
-                  "text": "Start",
-                  "style": { "background": "var(--ui-color-bg)", "padding": "var(--ui-space-2)" }
-                }
-              ]
-            }
-          ]
-        },
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-row ui-row--center",
-              "style": { "background": "var(--ui-color-bg-muted)" },
-              "children": [
-                {
-                  "tag": "div",
-                  "text": "Center",
-                  "style": { "background": "var(--ui-color-bg)", "padding": "var(--ui-space-2)" }
-                }
-              ]
-            }
-          ]
-        },
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-row ui-row--end",
-              "style": { "background": "var(--ui-color-bg-muted)" },
-              "children": [
-                {
-                  "tag": "div",
-                  "text": "End",
-                  "style": { "background": "var(--ui-color-bg)", "padding": "var(--ui-space-2)" }
-                }
-              ]
-            }
-          ]
-        },
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-row ui-row--between",
-              "style": { "background": "var(--ui-color-bg-muted)" },
-              "children": [
-                {
-                  "tag": "div",
-                  "text": "Between A",
-                  "style": { "background": "var(--ui-color-bg)", "padding": "var(--ui-space-2)" }
-                },
-                {
-                  "tag": "div",
-                  "text": "Between B",
-                  "style": { "background": "var(--ui-color-bg)", "padding": "var(--ui-space-2)" }
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    }
-  ]
-}

package/src/layout/sidebar/sidebar.docs.json

@@ -1,63 +0,0 @@
-{
-  "id": "sidebar",
-  "type": "primitive",
-  "title": "Sidebar",
-  "description": "Fixed-position sidebar for app layouts with adjustable widths and positioning.",
-  "api": "./sidebar.api.json",
-  "sections": [
-    {
-      "title": "Basic",
-      "description": "Default sidebar positioned on the start side. Use inside an app-shell layout.",
-      "examples": [
-        {
-          "code": "<aside class=\"ui-sidebar\">\n  <p>Sidebar content</p>\n</aside>"
-        }
-      ]
-    },
-    {
-      "title": "Widths",
-      "description": "Three width options via size modifiers.",
-      "examples": [
-        {
-          "layout": "column",
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-row",
-              "children": [
-                { "tag": "code", "text": "--sm" },
-                { "tag": "span", "text": "192px (24 units)" }
-              ]
-            },
-            {
-              "tag": "div",
-              "class": "ui-row",
-              "children": [
-                { "tag": "code", "text": "--md" },
-                { "tag": "span", "text": "240px (30 units, default)" }
-              ]
-            },
-            {
-              "tag": "div",
-              "class": "ui-row",
-              "children": [
-                { "tag": "code", "text": "--lg" },
-                { "tag": "span", "text": "320px (40 units)" }
-              ]
-            }
-          ],
-          "code": "<aside class=\"ui-sidebar ui-sidebar--sm\">192px</aside>\n<aside class=\"ui-sidebar ui-sidebar--md\">240px (default)</aside>\n<aside class=\"ui-sidebar ui-sidebar--lg\">320px</aside>"
-        }
-      ]
-    },
-    {
-      "title": "End Position",
-      "description": "Position sidebar on the end side with --end modifier.",
-      "examples": [
-        {
-          "code": "<aside class=\"ui-sidebar ui-sidebar--end\">\n  <p>End sidebar</p>\n</aside>"
-        }
-      ]
-    }
-  ]
-}

package/src/layout/sidebar/sidebar.visual.spec.ts

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