@teseor/css 1.14.3 → 1.15.1

package/src/layout/aspect-ratio/aspect-ratio.docs.json

@@ -1,193 +0,0 @@
-{
-  "id": "aspect-ratio",
-  "type": "primitive",
-  "title": "Aspect Ratio",
-  "description": "Constrains a container to a specific aspect ratio. Media children fill the container automatically.",
-  "api": "aspect-ratio.api.json",
-  "sections": [
-    {
-      "title": "Presets",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-row ui-row--md",
-              "children": [
-                {
-                  "tag": "div",
-                  "class": "ui-aspect-ratio ui-aspect-ratio--square",
-                  "style": {
-                    "inline-size": "160px",
-                    "background": "var(--ui-color-bg-muted)"
-                  },
-                  "children": [
-                    {
-                      "tag": "span",
-                      "text": "square",
-                      "style": {
-                        "padding": "var(--ui-space-2)"
-                      }
-                    }
-                  ]
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-aspect-ratio ui-aspect-ratio--video",
-                  "style": {
-                    "inline-size": "160px",
-                    "background": "var(--ui-color-bg-muted)"
-                  },
-                  "children": [
-                    {
-                      "tag": "span",
-                      "text": "video",
-                      "style": {
-                        "padding": "var(--ui-space-2)"
-                      }
-                    }
-                  ]
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-aspect-ratio ui-aspect-ratio--photo",
-                  "style": {
-                    "inline-size": "160px",
-                    "background": "var(--ui-color-bg-muted)"
-                  },
-                  "children": [
-                    {
-                      "tag": "span",
-                      "text": "photo",
-                      "style": {
-                        "padding": "var(--ui-space-2)"
-                      }
-                    }
-                  ]
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-aspect-ratio ui-aspect-ratio--wide",
-                  "style": {
-                    "inline-size": "160px",
-                    "background": "var(--ui-color-bg-muted)"
-                  },
-                  "children": [
-                    {
-                      "tag": "span",
-                      "text": "wide",
-                      "style": {
-                        "padding": "var(--ui-space-2)"
-                      }
-                    }
-                  ]
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-aspect-ratio ui-aspect-ratio--portrait",
-                  "style": {
-                    "inline-size": "160px",
-                    "background": "var(--ui-color-bg-muted)"
-                  },
-                  "children": [
-                    {
-                      "tag": "span",
-                      "text": "portrait",
-                      "style": {
-                        "padding": "var(--ui-space-2)"
-                      }
-                    }
-                  ]
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "title": "With Media",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-row ui-row--md",
-              "children": [
-                {
-                  "tag": "div",
-                  "class": "ui-aspect-ratio ui-aspect-ratio--video",
-                  "style": {
-                    "inline-size": "240px"
-                  },
-                  "children": [
-                    {
-                      "tag": "div",
-                      "text": "img (video)",
-                      "style": {
-                        "inline-size": "100%",
-                        "block-size": "100%",
-                        "background": "var(--ui-color-primary)",
-                        "color": "var(--ui-color-on-primary)",
-                        "display": "grid",
-                        "place-items": "center"
-                      }
-                    }
-                  ]
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-aspect-ratio ui-aspect-ratio--square",
-                  "style": {
-                    "inline-size": "240px"
-                  },
-                  "children": [
-                    {
-                      "tag": "div",
-                      "text": "img (square)",
-                      "style": {
-                        "inline-size": "100%",
-                        "block-size": "100%",
-                        "background": "var(--ui-color-primary)",
-                        "color": "var(--ui-color-on-primary)",
-                        "display": "grid",
-                        "place-items": "center"
-                      }
-                    }
-                  ]
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "title": "Custom Ratio",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-aspect-ratio",
-              "style": {
-                "--ui-aspect-ratio": "2.35 / 1",
-                "inline-size": "320px",
-                "background": "var(--ui-color-bg-muted)"
-              },
-              "children": [
-                {
-                  "tag": "span",
-                  "text": "2.35:1 (cinemascope)",
-                  "style": {
-                    "padding": "var(--ui-space-2)"
-                  }
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    }
-  ]
-}

package/src/layout/box/box.docs.json

@@ -1,93 +0,0 @@
-{
-  "id": "box",
-  "type": "primitive",
-  "title": "Box",
-  "description": "Base container with style props. Foundation for layout primitives.",
-  "api": "box.api.json",
-  "sections": [
-    {
-      "title": "Default",
-      "examples": [
-        {
-          "items": [{ "tag": "div", "class": "ui-box", "text": "Content" }],
-          "code": "<div class=\"ui-box\">Content</div>"
-        }
-      ]
-    },
-    {
-      "title": "Padding",
-      "examples": [
-        {
-          "layout": "column",
-          "items": [
-            { "tag": "div", "class": "ui-box ui-box--p-1 ui-box--bg-subtle", "text": "Padding 1" },
-            { "tag": "div", "class": "ui-box ui-box--p-2 ui-box--bg-subtle", "text": "Padding 2" },
-            { "tag": "div", "class": "ui-box ui-box--p-3 ui-box--bg-subtle", "text": "Padding 3" },
-            { "tag": "div", "class": "ui-box ui-box--p-4 ui-box--bg-subtle", "text": "Padding 4" }
-          ],
-          "code": "<div class=\"ui-box ui-box--p-1\">...</div>\n<div class=\"ui-box ui-box--p-2\">...</div>\n<div class=\"ui-box ui-box--p-3\">...</div>\n<div class=\"ui-box ui-box--p-4\">...</div>"
-        }
-      ]
-    },
-    {
-      "title": "Background",
-      "examples": [
-        {
-          "layout": "column",
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-box ui-box--p-2 ui-box--bg-subtle",
-              "text": "Subtle background"
-            },
-            {
-              "tag": "div",
-              "class": "ui-box ui-box--p-2 ui-box--bg-muted",
-              "text": "Muted background"
-            }
-          ],
-          "code": "<div class=\"ui-box ui-box--bg-subtle\">...</div>\n<div class=\"ui-box ui-box--bg-muted\">...</div>"
-        }
-      ]
-    },
-    {
-      "title": "Rounded",
-      "examples": [
-        {
-          "layout": "row",
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-box ui-box--p-3 ui-box--bg-subtle ui-box--rounded",
-              "text": "Rounded"
-            },
-            {
-              "tag": "div",
-              "class": "ui-box ui-box--p-3 ui-box--bg-subtle ui-box--rounded-lg",
-              "text": "Rounded lg"
-            }
-          ],
-          "code": "<div class=\"ui-box ui-box--rounded\">...</div>\n<div class=\"ui-box ui-box--rounded-lg\">...</div>"
-        }
-      ]
-    },
-    {
-      "title": "Custom via CSS Variables",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-box",
-              "attrs": {
-                "style": "--box-padding: var(--ui-space-3); --box-bg: var(--ui-color-primary); --box-color: white; --box-radius: var(--ui-radius-lg);"
-              },
-              "text": "Custom box"
-            }
-          ],
-          "code": "<div class=\"ui-box\" style=\"--box-padding: ...; --box-bg: ...;\">...</div>"
-        }
-      ]
-    }
-  ]
-}

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

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

package/src/layout/center/center.docs.json

@@ -1,63 +0,0 @@
-{
-  "id": "center",
-  "type": "primitive",
-  "title": "Center",
-  "description": "Centers content horizontally and vertically.",
-  "api": "center.api.json",
-  "sections": [
-    {
-      "title": "Basic",
-      "description": "Centers children both horizontally and vertically using flexbox.",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-center",
-              "style": { "height": "var(--ui-row-4)", "background": "var(--ui-color-bg-muted)" },
-              "children": [{ "tag": "span", "text": "Centered content" }]
-            }
-          ],
-          "code": "<div class=\"ui-center\" style=\"height: var(--ui-row-4);\">\n  <span>Centered content</span>\n</div>"
-        }
-      ]
-    },
-    {
-      "title": "Column Direction",
-      "description": "Stack centered children vertically.",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-center ui-center--column",
-              "style": { "height": "var(--ui-row-6)", "background": "var(--ui-color-bg-muted)" },
-              "children": [
-                { "tag": "span", "text": "First line" },
-                { "tag": "span", "text": "Second line" }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-center ui-center--column\" style=\"height: var(--ui-row-6);\">\n  <span>First line</span>\n  <span>Second line</span>\n</div>"
-        }
-      ]
-    },
-    {
-      "title": "Full Page Center",
-      "description": "Center content within a full viewport area, useful for loading or empty states.",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-center",
-              "style": { "height": "var(--ui-row-8)", "background": "var(--ui-color-bg-muted)" },
-              "children": [{ "tag": "p", "text": "No results found" }]
-            }
-          ],
-          "code": "<div class=\"ui-center\" style=\"height: 100vh;\">\n  <p>No results found</p>\n</div>"
-        }
-      ]
-    }
-  ]
-}

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

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

package/src/layout/column/column.docs.json

@@ -1,157 +0,0 @@
-{
-  "id": "column",
-  "type": "primitive",
-  "title": "Column",
-  "description": "Vertical layout with consistent gap.",
-  "api": "column.api.json",
-  "sections": [
-    {
-      "title": "Basic",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-column ui-column--sm",
-              "children": [
-                {
-                  "tag": "div",
-                  "text": "Item 1",
-                  "style": {
-                    "background": "var(--ui-color-bg-muted)",
-                    "padding": "var(--ui-space-2)"
-                  }
-                },
-                {
-                  "tag": "div",
-                  "text": "Item 2",
-                  "style": {
-                    "background": "var(--ui-color-bg-muted)",
-                    "padding": "var(--ui-space-2)"
-                  }
-                },
-                {
-                  "tag": "div",
-                  "text": "Item 3",
-                  "style": {
-                    "background": "var(--ui-color-bg-muted)",
-                    "padding": "var(--ui-space-2)"
-                  }
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "title": "Sizes",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-column ui-column--xs",
-              "children": [
-                {
-                  "tag": "div",
-                  "text": "xs gap",
-                  "style": {
-                    "background": "var(--ui-color-bg-muted)",
-                    "padding": "var(--ui-space-1)"
-                  }
-                },
-                {
-                  "tag": "div",
-                  "text": "xs gap",
-                  "style": {
-                    "background": "var(--ui-color-bg-muted)",
-                    "padding": "var(--ui-space-1)"
-                  }
-                }
-              ]
-            }
-          ]
-        },
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-column ui-column--md",
-              "children": [
-                {
-                  "tag": "div",
-                  "text": "md gap",
-                  "style": {
-                    "background": "var(--ui-color-bg-muted)",
-                    "padding": "var(--ui-space-1)"
-                  }
-                },
-                {
-                  "tag": "div",
-                  "text": "md gap",
-                  "style": {
-                    "background": "var(--ui-color-bg-muted)",
-                    "padding": "var(--ui-space-1)"
-                  }
-                }
-              ]
-            }
-          ]
-        },
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-column ui-column--lg",
-              "children": [
-                {
-                  "tag": "div",
-                  "text": "lg gap",
-                  "style": {
-                    "background": "var(--ui-color-bg-muted)",
-                    "padding": "var(--ui-space-1)"
-                  }
-                },
-                {
-                  "tag": "div",
-                  "text": "lg gap",
-                  "style": {
-                    "background": "var(--ui-color-bg-muted)",
-                    "padding": "var(--ui-space-1)"
-                  }
-                }
-              ]
-            }
-          ]
-        },
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-column ui-column--xl",
-              "children": [
-                {
-                  "tag": "div",
-                  "text": "xl gap",
-                  "style": {
-                    "background": "var(--ui-color-bg-muted)",
-                    "padding": "var(--ui-space-1)"
-                  }
-                },
-                {
-                  "tag": "div",
-                  "text": "xl gap",
-                  "style": {
-                    "background": "var(--ui-color-bg-muted)",
-                    "padding": "var(--ui-space-1)"
-                  }
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    }
-  ]
-}

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

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

package/src/layout/container/container.docs.json

@@ -1,85 +0,0 @@
-{
-  "id": "container",
-  "type": "primitive",
-  "title": "Container",
-  "description": "Content wrapper with max-width and inline padding. Centers page content with consistent margins.",
-  "api": "container.api.json",
-  "sections": [
-    {
-      "title": "Default",
-      "description": "Constrains content to a max width with horizontal padding.",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-container",
-              "style": { "background": "var(--ui-color-bg-muted)" },
-              "children": [{ "tag": "p", "text": "Content within a container" }]
-            }
-          ],
-          "code": "<div class=\"ui-container\">Content within a container</div>"
-        }
-      ]
-    },
-    {
-      "title": "Centered",
-      "description": "Centers the container horizontally with auto margins.",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-container ui-container--center",
-              "style": { "background": "var(--ui-color-bg-muted)" },
-              "children": [{ "tag": "p", "text": "Centered container" }]
-            }
-          ],
-          "code": "<div class=\"ui-container ui-container--center\">Centered container</div>"
-        }
-      ]
-    },
-    {
-      "title": "Sizes",
-      "description": "Width presets for different layout needs.",
-      "examples": [
-        {
-          "layout": "column",
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-container ui-container--sm ui-container--center",
-              "style": { "background": "var(--ui-color-bg-muted)" },
-              "children": [{ "tag": "p", "text": "Small" }]
-            },
-            {
-              "tag": "div",
-              "class": "ui-container ui-container--md ui-container--center",
-              "style": { "background": "var(--ui-color-bg-muted)" },
-              "children": [{ "tag": "p", "text": "Medium" }]
-            },
-            {
-              "tag": "div",
-              "class": "ui-container ui-container--lg ui-container--center",
-              "style": { "background": "var(--ui-color-bg-muted)" },
-              "children": [{ "tag": "p", "text": "Large (default)" }]
-            },
-            {
-              "tag": "div",
-              "class": "ui-container ui-container--xl ui-container--center",
-              "style": { "background": "var(--ui-color-bg-muted)" },
-              "children": [{ "tag": "p", "text": "Extra large" }]
-            },
-            {
-              "tag": "div",
-              "class": "ui-container ui-container--full",
-              "style": { "background": "var(--ui-color-bg-muted)" },
-              "children": [{ "tag": "p", "text": "Full width" }]
-            }
-          ],
-          "code": "<div class=\"ui-container ui-container--sm\">Small</div>\n<div class=\"ui-container ui-container--md\">Medium</div>\n<div class=\"ui-container ui-container--lg\">Large</div>\n<div class=\"ui-container ui-container--xl\">Extra large</div>\n<div class=\"ui-container ui-container--full\">Full width</div>"
-        }
-      ]
-    }
-  ]
-}