@teseor/css 1.14.3 → 1.15.1

package/src/layout/grid/grid.docs.json

@@ -1,493 +0,0 @@
-{
-  "id": "grid-primitive",
-  "type": "primitive",
-  "title": "Grid",
-  "description": "CSS Grid with column variants, subgrid support, and span utilities.",
-  "api": "grid.api.json",
-  "sections": [
-    {
-      "title": "Columns",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-grid ui-grid--2",
-              "children": [
-                {
-                  "tag": "div",
-                  "text": "1",
-                  "style": {
-                    "background": "var(--ui-color-bg-muted)",
-                    "padding": "var(--ui-space-2)"
-                  }
-                },
-                {
-                  "tag": "div",
-                  "text": "2",
-                  "style": {
-                    "background": "var(--ui-color-bg-muted)",
-                    "padding": "var(--ui-space-2)"
-                  }
-                }
-              ]
-            }
-          ]
-        },
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-grid ui-grid--3",
-              "children": [
-                {
-                  "tag": "div",
-                  "text": "1",
-                  "style": {
-                    "background": "var(--ui-color-bg-muted)",
-                    "padding": "var(--ui-space-2)"
-                  }
-                },
-                {
-                  "tag": "div",
-                  "text": "2",
-                  "style": {
-                    "background": "var(--ui-color-bg-muted)",
-                    "padding": "var(--ui-space-2)"
-                  }
-                },
-                {
-                  "tag": "div",
-                  "text": "3",
-                  "style": {
-                    "background": "var(--ui-color-bg-muted)",
-                    "padding": "var(--ui-space-2)"
-                  }
-                }
-              ]
-            }
-          ]
-        },
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-grid ui-grid--4",
-              "children": [
-                {
-                  "tag": "div",
-                  "text": "1",
-                  "style": {
-                    "background": "var(--ui-color-bg-muted)",
-                    "padding": "var(--ui-space-2)"
-                  }
-                },
-                {
-                  "tag": "div",
-                  "text": "2",
-                  "style": {
-                    "background": "var(--ui-color-bg-muted)",
-                    "padding": "var(--ui-space-2)"
-                  }
-                },
-                {
-                  "tag": "div",
-                  "text": "3",
-                  "style": {
-                    "background": "var(--ui-color-bg-muted)",
-                    "padding": "var(--ui-space-2)"
-                  }
-                },
-                {
-                  "tag": "div",
-                  "text": "4",
-                  "style": {
-                    "background": "var(--ui-color-bg-muted)",
-                    "padding": "var(--ui-space-2)"
-                  }
-                }
-              ]
-            }
-          ]
-        },
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-grid ui-grid--auto",
-              "children": [
-                {
-                  "tag": "div",
-                  "text": "Auto",
-                  "style": {
-                    "background": "var(--ui-color-bg-muted)",
-                    "padding": "var(--ui-space-2)"
-                  }
-                },
-                {
-                  "tag": "div",
-                  "text": "Auto",
-                  "style": {
-                    "background": "var(--ui-color-bg-muted)",
-                    "padding": "var(--ui-space-2)"
-                  }
-                },
-                {
-                  "tag": "div",
-                  "text": "Auto",
-                  "style": {
-                    "background": "var(--ui-color-bg-muted)",
-                    "padding": "var(--ui-space-2)"
-                  }
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "title": "Subgrid",
-      "description": "Children inherit parent grid tracks for cross-item alignment.",
-      "examples": [
-        {
-          "title": "Column subgrid",
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-grid ui-grid--3",
-              "children": [
-                {
-                  "tag": "div",
-                  "class": "ui-grid--subgrid",
-                  "style": {
-                    "grid-column": "span 3"
-                  },
-                  "children": [
-                    {
-                      "tag": "div",
-                      "text": "Subgrid child 1",
-                      "style": {
-                        "background": "var(--ui-color-bg-muted)",
-                        "padding": "var(--ui-space-2)"
-                      }
-                    },
-                    {
-                      "tag": "div",
-                      "text": "Subgrid child 2",
-                      "style": {
-                        "background": "var(--ui-color-bg-muted)",
-                        "padding": "var(--ui-space-2)"
-                      }
-                    },
-                    {
-                      "tag": "div",
-                      "text": "Subgrid child 3",
-                      "style": {
-                        "background": "var(--ui-color-bg-muted)",
-                        "padding": "var(--ui-space-2)"
-                      }
-                    }
-                  ]
-                }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-grid ui-grid--3\">\n  <div class=\"ui-grid--subgrid\" style=\"grid-column: span 3\">\n    <div>Subgrid child 1</div>\n    <div>Subgrid child 2</div>\n    <div>Subgrid child 3</div>\n  </div>\n</div>"
-        },
-        {
-          "title": "Row subgrid (aligned cards)",
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-grid ui-grid--3",
-              "style": {
-                "grid-template-rows": "auto 1fr auto"
-              },
-              "children": [
-                {
-                  "tag": "div",
-                  "class": "ui-grid--subgrid-rows",
-                  "style": {
-                    "grid-row": "span 3",
-                    "border": "1px solid var(--ui-color-border)",
-                    "padding": "var(--ui-space-2)"
-                  },
-                  "children": [
-                    {
-                      "tag": "strong",
-                      "text": "Card A"
-                    },
-                    {
-                      "tag": "p",
-                      "text": "Short content."
-                    },
-                    {
-                      "tag": "span",
-                      "text": "Footer",
-                      "style": {
-                        "color": "var(--ui-color-text-muted)"
-                      }
-                    }
-                  ]
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-grid--subgrid-rows",
-                  "style": {
-                    "grid-row": "span 3",
-                    "border": "1px solid var(--ui-color-border)",
-                    "padding": "var(--ui-space-2)"
-                  },
-                  "children": [
-                    {
-                      "tag": "strong",
-                      "text": "Card B"
-                    },
-                    {
-                      "tag": "p",
-                      "text": "Longer content that wraps to multiple lines to demonstrate row alignment."
-                    },
-                    {
-                      "tag": "span",
-                      "text": "Footer",
-                      "style": {
-                        "color": "var(--ui-color-text-muted)"
-                      }
-                    }
-                  ]
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-grid--subgrid-rows",
-                  "style": {
-                    "grid-row": "span 3",
-                    "border": "1px solid var(--ui-color-border)",
-                    "padding": "var(--ui-space-2)"
-                  },
-                  "children": [
-                    {
-                      "tag": "strong",
-                      "text": "Card C"
-                    },
-                    {
-                      "tag": "p",
-                      "text": "Medium text."
-                    },
-                    {
-                      "tag": "span",
-                      "text": "Footer",
-                      "style": {
-                        "color": "var(--ui-color-text-muted)"
-                      }
-                    }
-                  ]
-                }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-grid ui-grid--3\" style=\"grid-template-rows: auto 1fr auto\">\n  <div class=\"ui-grid--subgrid-rows\" style=\"grid-row: span 3\">\n    <strong>Title</strong>\n    <p>Content</p>\n    <span>Footer</span>\n  </div>\n</div>"
-        },
-        {
-          "title": "Both axes subgrid",
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-grid ui-grid--3",
-              "style": {
-                "grid-template-rows": "auto auto"
-              },
-              "children": [
-                {
-                  "tag": "div",
-                  "class": "ui-grid--subgrid-both",
-                  "style": {
-                    "grid-column": "span 3",
-                    "grid-row": "span 2"
-                  },
-                  "children": [
-                    {
-                      "tag": "div",
-                      "text": "A1",
-                      "style": {
-                        "background": "var(--ui-color-bg-muted)",
-                        "padding": "var(--ui-space-2)"
-                      }
-                    },
-                    {
-                      "tag": "div",
-                      "text": "A2",
-                      "style": {
-                        "background": "var(--ui-color-bg-muted)",
-                        "padding": "var(--ui-space-2)"
-                      }
-                    },
-                    {
-                      "tag": "div",
-                      "text": "A3",
-                      "style": {
-                        "background": "var(--ui-color-bg-muted)",
-                        "padding": "var(--ui-space-2)"
-                      }
-                    },
-                    {
-                      "tag": "div",
-                      "text": "B1",
-                      "style": {
-                        "background": "var(--ui-color-bg-subtle)",
-                        "padding": "var(--ui-space-2)"
-                      }
-                    },
-                    {
-                      "tag": "div",
-                      "text": "B2",
-                      "style": {
-                        "background": "var(--ui-color-bg-subtle)",
-                        "padding": "var(--ui-space-2)"
-                      }
-                    },
-                    {
-                      "tag": "div",
-                      "text": "B3",
-                      "style": {
-                        "background": "var(--ui-color-bg-subtle)",
-                        "padding": "var(--ui-space-2)"
-                      }
-                    }
-                  ]
-                }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-grid ui-grid--3\" style=\"grid-template-rows: auto auto\">\n  <div class=\"ui-grid--subgrid-both\" style=\"grid-column: span 3; grid-row: span 2\">\n    <div>A1</div><div>A2</div><div>A3</div>\n    <div>B1</div><div>B2</div><div>B3</div>\n  </div>\n</div>"
-        }
-      ]
-    },
-    {
-      "title": "Column Span",
-      "description": "Span multiple columns with .ui-grid-col-span-{2,3,4,full} utilities.",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-grid ui-grid--4",
-              "children": [
-                {
-                  "tag": "div",
-                  "text": "Span 2",
-                  "style": {
-                    "grid-column": "span 2",
-                    "background": "var(--ui-color-bg-muted)",
-                    "padding": "var(--ui-space-2)"
-                  }
-                },
-                {
-                  "tag": "div",
-                  "text": "1",
-                  "style": {
-                    "background": "var(--ui-color-bg-subtle)",
-                    "padding": "var(--ui-space-2)"
-                  }
-                },
-                {
-                  "tag": "div",
-                  "text": "1",
-                  "style": {
-                    "background": "var(--ui-color-bg-subtle)",
-                    "padding": "var(--ui-space-2)"
-                  }
-                },
-                {
-                  "tag": "div",
-                  "text": "1",
-                  "style": {
-                    "background": "var(--ui-color-bg-subtle)",
-                    "padding": "var(--ui-space-2)"
-                  }
-                },
-                {
-                  "tag": "div",
-                  "text": "Span 3",
-                  "style": {
-                    "grid-column": "span 3",
-                    "background": "var(--ui-color-bg-muted)",
-                    "padding": "var(--ui-space-2)"
-                  }
-                },
-                {
-                  "tag": "div",
-                  "text": "Span full",
-                  "style": {
-                    "grid-column": "1 / -1",
-                    "background": "var(--ui-color-bg-muted)",
-                    "padding": "var(--ui-space-2)"
-                  }
-                }
-              ]
-            }
-          ],
-          "code": "{% set spans = ['2', '3', '4', 'full'] %}<div class=\"ui-grid ui-grid--4\">\n{% for s in spans %}  <div class=\"ui-grid-col-span-{{ s }}\">Span {{ s }}</div>\n{% endfor %}</div>"
-        }
-      ]
-    },
-    {
-      "title": "Row Span",
-      "description": "Span multiple rows with .ui-grid-row-span-{2,3,full} utilities.",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-grid ui-grid--3",
-              "children": [
-                {
-                  "tag": "div",
-                  "text": "Row span 2",
-                  "style": {
-                    "grid-row": "span 2",
-                    "background": "var(--ui-color-bg-muted)",
-                    "padding": "var(--ui-space-2)"
-                  }
-                },
-                {
-                  "tag": "div",
-                  "text": "1",
-                  "style": {
-                    "background": "var(--ui-color-bg-subtle)",
-                    "padding": "var(--ui-space-2)"
-                  }
-                },
-                {
-                  "tag": "div",
-                  "text": "2",
-                  "style": {
-                    "background": "var(--ui-color-bg-subtle)",
-                    "padding": "var(--ui-space-2)"
-                  }
-                },
-                {
-                  "tag": "div",
-                  "text": "3",
-                  "style": {
-                    "background": "var(--ui-color-bg-subtle)",
-                    "padding": "var(--ui-space-2)"
-                  }
-                },
-                {
-                  "tag": "div",
-                  "text": "4",
-                  "style": {
-                    "background": "var(--ui-color-bg-subtle)",
-                    "padding": "var(--ui-space-2)"
-                  }
-                }
-              ]
-            }
-          ],
-          "code": "{% set spans = ['2', '3', 'full'] %}<div class=\"ui-grid ui-grid--3\">\n{% for s in spans %}  <div class=\"ui-grid-row-span-{{ s }}\">Row span {{ s }}</div>\n{% endfor %}</div>"
-        }
-      ]
-    }
-  ]
-}

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

package/src/layout/main/main.docs.json

@@ -1,87 +0,0 @@
-{
-  "id": "main",
-  "type": "primitive",
-  "title": "Main",
-  "description": "Main content area that accounts for sidebar and topbar offsets in app layouts.",
-  "api": "main.api.json",
-  "sections": [
-    {
-      "title": "Default",
-      "description": "Offsets content for a start-side sidebar and optional topbar.",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "style": { "position": "relative", "height": "var(--ui-row-4)" },
-              "children": [
-                {
-                  "tag": "main",
-                  "class": "ui-main",
-                  "style": {
-                    "background": "var(--ui-color-bg-muted)",
-                    "padding": "var(--ui-space-2)"
-                  },
-                  "children": [{ "tag": "p", "text": "Main content area" }]
-                }
-              ]
-            }
-          ],
-          "code": "<main class=\"ui-main\">Main content area</main>"
-        }
-      ]
-    },
-    {
-      "title": "Sidebar End",
-      "description": "Offsets content for an end-side sidebar instead of start.",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "style": { "position": "relative", "height": "var(--ui-row-4)" },
-              "children": [
-                {
-                  "tag": "main",
-                  "class": "ui-main ui-main--sidebar-end",
-                  "style": {
-                    "background": "var(--ui-color-bg-muted)",
-                    "padding": "var(--ui-space-2)"
-                  },
-                  "children": [{ "tag": "p", "text": "Content with end sidebar" }]
-                }
-              ]
-            }
-          ],
-          "code": "<main class=\"ui-main ui-main--sidebar-end\">Content with end sidebar</main>"
-        }
-      ]
-    },
-    {
-      "title": "Full Width",
-      "description": "No sidebar offset. Use when there is no sidebar.",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "style": { "position": "relative", "height": "var(--ui-row-4)" },
-              "children": [
-                {
-                  "tag": "main",
-                  "class": "ui-main ui-main--full",
-                  "style": {
-                    "background": "var(--ui-color-bg-muted)",
-                    "padding": "var(--ui-space-2)"
-                  },
-                  "children": [{ "tag": "p", "text": "Full width content" }]
-                }
-              ]
-            }
-          ],
-          "code": "<main class=\"ui-main ui-main--full\">Full width content</main>"
-        }
-      ]
-    }
-  ]
-}

package/src/layout/nav-rail/nav-rail.docs.json

@@ -1,76 +0,0 @@
-{
-  "id": "nav-rail",
-  "type": "primitive",
-  "title": "Nav Rail",
-  "description": "Narrow fixed vertical navigation rail for icon-based navigation with bottom actions.",
-  "api": "./nav-rail.api.json",
-  "sections": [
-    {
-      "title": "Default",
-      "description": "Fixed narrow rail with icon items and bottom actions.",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "nav",
-              "class": "ui-nav-rail",
-              "style": "position: relative; block-size: 320px",
-              "children": [
-                {
-                  "tag": "div",
-                  "class": "ui-nav-rail__items",
-                  "children": [
-                    {
-                      "tag": "button",
-                      "class": "ui-button ui-button--ghost ui-button--icon",
-                      "text": "H"
-                    },
-                    {
-                      "tag": "button",
-                      "class": "ui-button ui-button--ghost ui-button--icon",
-                      "text": "S"
-                    },
-                    {
-                      "tag": "button",
-                      "class": "ui-button ui-button--ghost ui-button--icon",
-                      "text": "M"
-                    }
-                  ]
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-nav-rail__actions",
-                  "children": [
-                    {
-                      "tag": "button",
-                      "class": "ui-button ui-button--ghost ui-button--icon",
-                      "text": "G"
-                    }
-                  ]
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "title": "End Position",
-      "description": "Rail on the end (right in LTR) side.",
-      "examples": [
-        {
-          "code": "<nav class=\"ui-nav-rail ui-nav-rail--end\">\n  <div class=\"ui-nav-rail__items\">\n    <!-- icon buttons -->\n  </div>\n  <div class=\"ui-nav-rail__actions\">\n    <!-- settings, profile -->\n  </div>\n</nav>"
-        }
-      ]
-    },
-    {
-      "title": "With Topbar",
-      "description": "Nav rail respects --topbar-height, offsetting below the topbar.",
-      "examples": [
-        {
-          "code": "<body class=\"ui-app-shell\" style=\"--topbar-height: var(--ui-row-3)\">\n  <header class=\"ui-topbar ui-topbar--fixed ui-topbar--bordered\">\n    <div class=\"ui-topbar__start\"><strong>App</strong></div>\n  </header>\n  <nav class=\"ui-nav-rail\">\n    <div class=\"ui-nav-rail__items\"><!-- icons --></div>\n  </nav>\n</body>"
-        }
-      ]
-    }
-  ]
-}

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