@teseor/css 1.14.3 → 1.15.1

package/src/config/tokens/design-tokens.docs.json

@@ -1,239 +0,0 @@
-{
-  "id": "design-tokens",
-  "type": "token",
-  "title": "Design Tokens",
-  "description": "Borders, radius, shadows, motion, z-index, and semantic tokens that form the visual foundation",
-  "skipValidation": true,
-  "sections": [
-    {
-      "title": "Borders",
-      "description": "Border width tokens derived from the 8px unit.",
-      "examples": [
-        {
-          "layout": "row",
-          "items": [
-            {
-              "tag": "div",
-              "style": {
-                "width": "var(--ui-space-8)",
-                "height": "var(--ui-row-2)",
-                "border": "var(--ui-border-width-sm) solid var(--ui-color-border-strong)"
-              }
-            },
-            {
-              "tag": "div",
-              "style": {
-                "width": "var(--ui-space-8)",
-                "height": "var(--ui-row-2)",
-                "border": "var(--ui-border-width-md) solid var(--ui-color-border-strong)"
-              }
-            },
-            {
-              "tag": "div",
-              "style": {
-                "width": "var(--ui-space-8)",
-                "height": "var(--ui-row-2)",
-                "border": "var(--ui-border-width-lg) solid var(--ui-color-border-strong)"
-              }
-            }
-          ],
-          "code": ":root {\n  --ui-border-width-sm: calc(var(--ui-unit) * 0.125); /* 1px */\n  --ui-border-width-md: calc(var(--ui-unit) * 0.25);  /* 2px */\n  --ui-border-width-lg: calc(var(--ui-unit) * 0.5);   /* 4px */\n}"
-        }
-      ]
-    },
-    {
-      "title": "Radius",
-      "description": "Border radius tokens derived from the 8px unit.",
-      "examples": [
-        {
-          "layout": "row",
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-column ui-column--xs",
-              "style": { "align-items": "center" },
-              "children": [
-                {
-                  "tag": "div",
-                  "style": {
-                    "width": "var(--ui-row-3)",
-                    "height": "var(--ui-row-3)",
-                    "background": "var(--ui-color-primary)",
-                    "border-radius": "var(--ui-radius-sm)"
-                  }
-                },
-                { "tag": "small", "text": "sm (4px)" }
-              ]
-            },
-            {
-              "tag": "div",
-              "class": "ui-column ui-column--xs",
-              "style": { "align-items": "center" },
-              "children": [
-                {
-                  "tag": "div",
-                  "style": {
-                    "width": "var(--ui-row-3)",
-                    "height": "var(--ui-row-3)",
-                    "background": "var(--ui-color-primary)",
-                    "border-radius": "var(--ui-radius-md)"
-                  }
-                },
-                { "tag": "small", "text": "md (8px)" }
-              ]
-            },
-            {
-              "tag": "div",
-              "class": "ui-column ui-column--xs",
-              "style": { "align-items": "center" },
-              "children": [
-                {
-                  "tag": "div",
-                  "style": {
-                    "width": "var(--ui-row-3)",
-                    "height": "var(--ui-row-3)",
-                    "background": "var(--ui-color-primary)",
-                    "border-radius": "var(--ui-radius-lg)"
-                  }
-                },
-                { "tag": "small", "text": "lg (16px)" }
-              ]
-            },
-            {
-              "tag": "div",
-              "class": "ui-column ui-column--xs",
-              "style": { "align-items": "center" },
-              "children": [
-                {
-                  "tag": "div",
-                  "style": {
-                    "width": "var(--ui-row-3)",
-                    "height": "var(--ui-row-3)",
-                    "background": "var(--ui-color-primary)",
-                    "border-radius": "var(--ui-radius-full)"
-                  }
-                },
-                { "tag": "small", "text": "full" }
-              ]
-            }
-          ],
-          "code": ":root {\n  --ui-radius-sm: calc(var(--ui-unit) * 0.5); /* 4px */\n  --ui-radius-md: var(--ui-unit);              /* 8px */\n  --ui-radius-lg: calc(var(--ui-unit) * 2);    /* 16px */\n  --ui-radius-full: 9999px;\n}"
-        }
-      ]
-    },
-    {
-      "title": "Shadows",
-      "description": "Elevation shadows using the primary hue for tinted depth.",
-      "examples": [
-        {
-          "layout": "row",
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-column ui-column--xs",
-              "style": { "align-items": "center" },
-              "children": [
-                {
-                  "tag": "div",
-                  "style": {
-                    "width": "var(--ui-space-8)",
-                    "height": "var(--ui-row-3)",
-                    "background": "var(--ui-color-bg)",
-                    "border-radius": "var(--ui-radius-md)",
-                    "box-shadow": "var(--ui-shadow-sm)"
-                  }
-                },
-                { "tag": "small", "text": "sm" }
-              ]
-            },
-            {
-              "tag": "div",
-              "class": "ui-column ui-column--xs",
-              "style": { "align-items": "center" },
-              "children": [
-                {
-                  "tag": "div",
-                  "style": {
-                    "width": "var(--ui-space-8)",
-                    "height": "var(--ui-row-3)",
-                    "background": "var(--ui-color-bg)",
-                    "border-radius": "var(--ui-radius-md)",
-                    "box-shadow": "var(--ui-shadow-md)"
-                  }
-                },
-                { "tag": "small", "text": "md" }
-              ]
-            },
-            {
-              "tag": "div",
-              "class": "ui-column ui-column--xs",
-              "style": { "align-items": "center" },
-              "children": [
-                {
-                  "tag": "div",
-                  "style": {
-                    "width": "var(--ui-space-8)",
-                    "height": "var(--ui-row-3)",
-                    "background": "var(--ui-color-bg)",
-                    "border-radius": "var(--ui-radius-md)",
-                    "box-shadow": "var(--ui-shadow-lg)"
-                  }
-                },
-                { "tag": "small", "text": "lg" }
-              ]
-            }
-          ],
-          "code": ":root {\n  --ui-shadow-sm: 0 1px 2px hsl(var(--ui-hue-primary) 10% 20% / 0.05);\n  --ui-shadow-md: 0 4px 6px hsl(var(--ui-hue-primary) 10% 20% / 0.1);\n  --ui-shadow-lg: 0 10px 15px hsl(var(--ui-hue-primary) 10% 20% / 0.15);\n}"
-        }
-      ]
-    },
-    {
-      "title": "Motion",
-      "description": "Duration and easing tokens. All durations drop to 0ms when prefers-reduced-motion is active.",
-      "examples": [
-        {
-          "title": "Duration scale",
-          "code": ":root {\n  --ui-duration-instant: 50ms;\n  --ui-duration-fast: 100ms;\n  --ui-duration-base: 150ms;\n  --ui-duration-normal: 200ms;\n  --ui-duration-slow: 250ms;\n  --ui-duration-slower: 400ms;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :root {\n    --ui-duration-instant: 0ms;\n    --ui-duration-fast: 0ms;\n    /* ...all set to 0ms */\n  }\n}"
-        },
-        {
-          "title": "Easing functions",
-          "code": ":root {\n  --ui-ease-default: cubic-bezier(0.4, 0, 0.2, 1);\n  --ui-ease-in:      cubic-bezier(0.4, 0, 1, 1);\n  --ui-ease-out:     cubic-bezier(0, 0, 0.2, 1);\n  --ui-ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);\n}"
-        }
-      ]
-    },
-    {
-      "title": "Z-index",
-      "description": "Layering scale with gaps to allow insertion without renumbering.",
-      "examples": [
-        {
-          "title": "Z-index tokens",
-          "code": ":root {\n  --ui-z-base: 0;\n  --ui-z-sticky: 100;\n  --ui-z-dropdown: 200;\n  --ui-z-overlay: 300;\n  --ui-z-modal: 400;\n  --ui-z-popover: 500;\n  --ui-z-tooltip: 600;\n  --ui-z-toast: 700;\n  --ui-z-drawer: 800;\n  --ui-z-debug: 9999;\n}"
-        }
-      ]
-    },
-    {
-      "title": "Semantic Colors",
-      "description": "Context-aware color tokens that resolve automatically in light and dark mode via light-dark().",
-      "examples": [
-        {
-          "title": "Text and background",
-          "code": ":root {\n  color-scheme: light dark;\n  --ui-color-text: light-dark(var(--ui-color-neutral-900), var(--ui-color-neutral-100));\n  --ui-color-text-muted: light-dark(var(--ui-color-neutral-500), var(--ui-color-neutral-400));\n  --ui-color-bg: light-dark(var(--ui-color-neutral-50), var(--ui-color-neutral-900));\n  --ui-color-bg-subtle: light-dark(var(--ui-color-neutral-100), var(--ui-color-neutral-800));\n}"
-        },
-        {
-          "title": "Borders and interactive",
-          "code": ":root {\n  --ui-color-border: light-dark(var(--ui-color-neutral-200), var(--ui-color-neutral-700));\n  --ui-color-border-strong: light-dark(var(--ui-color-neutral-300), var(--ui-color-neutral-600));\n  --ui-color-interactive: var(--ui-color-primary);\n  --ui-color-interactive-hover: var(--ui-color-primary-dark);\n  --ui-color-focus: var(--ui-color-primary-light);\n}"
-        }
-      ]
-    },
-    {
-      "title": "Semantic Spacing",
-      "description": "Named spacing aliases that map to the numeric spacing scale for consistent layout patterns.",
-      "examples": [
-        {
-          "title": "Semantic spacing tokens",
-          "code": ":root {\n  --ui-spacing-xs: var(--ui-space-1);     /* 8px */\n  --ui-spacing-sm: var(--ui-space-2);     /* 16px */\n  --ui-spacing-md: var(--ui-space-4);     /* 32px */\n  --ui-spacing-lg: var(--ui-space-6);     /* 48px */\n  --ui-spacing-xl: var(--ui-space-8);     /* 64px */\n  --ui-spacing-gutter: var(--ui-space-4); /* 32px */\n  --ui-spacing-section: var(--ui-space-8);/* 64px */\n}"
-        }
-      ]
-    }
-  ]
-}

package/src/config/tokens/grid/grid.docs.json

@@ -1,54 +0,0 @@
-{
-  "id": "grid",
-  "type": "token",
-  "title": "Grid System",
-  "description": "All spacing and heights align to the 8px grid.",
-  "skipValidation": true,
-  "sections": [
-    {
-      "examples": [
-        {
-          "layout": "column",
-          "items": [
-            {
-              "tag": "div",
-              "text": "row-1 (16px)",
-              "style": {
-                "background": "var(--ui-color-primary)",
-                "color": "var(--ui-color-text-inverse)",
-                "height": "var(--ui-row-1)",
-                "display": "flex",
-                "align-items": "center",
-                "padding": "0 var(--ui-space-2)"
-              }
-            },
-            {
-              "tag": "div",
-              "text": "row-2 (32px)",
-              "style": {
-                "background": "var(--ui-color-primary)",
-                "color": "var(--ui-color-text-inverse)",
-                "height": "var(--ui-row-2)",
-                "display": "flex",
-                "align-items": "center",
-                "padding": "0 var(--ui-space-2)"
-              }
-            },
-            {
-              "tag": "div",
-              "text": "row-3 (48px)",
-              "style": {
-                "background": "var(--ui-color-primary)",
-                "color": "var(--ui-color-text-inverse)",
-                "height": "var(--ui-row-3)",
-                "display": "flex",
-                "align-items": "center",
-                "padding": "0 var(--ui-space-2)"
-              }
-            }
-          ]
-        }
-      ]
-    }
-  ]
-}

package/src/config/tokens/spacing/spacing.docs.json

@@ -1,114 +0,0 @@
-{
-  "id": "spacing",
-  "type": "token",
-  "title": "Spacing",
-  "description": "Spacing tokens based on the 8px unit.",
-  "skipValidation": true,
-  "sections": [
-    {
-      "examples": [
-        {
-          "layout": "row",
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-column ui-column--xs",
-              "style": { "align-items": "center" },
-              "children": [
-                {
-                  "tag": "div",
-                  "style": {
-                    "width": "var(--ui-space-1)",
-                    "height": "var(--ui-space-4)",
-                    "background": "var(--ui-color-primary)"
-                  }
-                },
-                { "tag": "small", "text": "space-1" }
-              ]
-            },
-            {
-              "tag": "div",
-              "class": "ui-column ui-column--xs",
-              "style": { "align-items": "center" },
-              "children": [
-                {
-                  "tag": "div",
-                  "style": {
-                    "width": "var(--ui-space-2)",
-                    "height": "var(--ui-space-4)",
-                    "background": "var(--ui-color-primary)"
-                  }
-                },
-                { "tag": "small", "text": "space-2" }
-              ]
-            },
-            {
-              "tag": "div",
-              "class": "ui-column ui-column--xs",
-              "style": { "align-items": "center" },
-              "children": [
-                {
-                  "tag": "div",
-                  "style": {
-                    "width": "var(--ui-space-3)",
-                    "height": "var(--ui-space-4)",
-                    "background": "var(--ui-color-primary)"
-                  }
-                },
-                { "tag": "small", "text": "space-3" }
-              ]
-            },
-            {
-              "tag": "div",
-              "class": "ui-column ui-column--xs",
-              "style": { "align-items": "center" },
-              "children": [
-                {
-                  "tag": "div",
-                  "style": {
-                    "width": "var(--ui-space-4)",
-                    "height": "var(--ui-space-4)",
-                    "background": "var(--ui-color-primary)"
-                  }
-                },
-                { "tag": "small", "text": "space-4" }
-              ]
-            },
-            {
-              "tag": "div",
-              "class": "ui-column ui-column--xs",
-              "style": { "align-items": "center" },
-              "children": [
-                {
-                  "tag": "div",
-                  "style": {
-                    "width": "var(--ui-space-6)",
-                    "height": "var(--ui-space-4)",
-                    "background": "var(--ui-color-primary)"
-                  }
-                },
-                { "tag": "small", "text": "space-6" }
-              ]
-            },
-            {
-              "tag": "div",
-              "class": "ui-column ui-column--xs",
-              "style": { "align-items": "center" },
-              "children": [
-                {
-                  "tag": "div",
-                  "style": {
-                    "width": "var(--ui-space-8)",
-                    "height": "var(--ui-space-4)",
-                    "background": "var(--ui-color-primary)"
-                  }
-                },
-                { "tag": "small", "text": "space-8" }
-              ]
-            }
-          ]
-        }
-      ]
-    }
-  ]
-}

package/src/debug/debug.docs.json

@@ -1,96 +0,0 @@
-{
-  "id": "debug",
-  "type": "utility",
-  "title": "Debug",
-  "description": "Visual debugging overlays for grid alignment, baseline rhythm, and element boundaries",
-  "skipValidation": true,
-  "sections": [
-    {
-      "title": "Grid Overlay",
-      "description": "Shows the 8px unit grid. Add the class to any container.",
-      "examples": [
-        {
-          "title": "Unit grid",
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-debug-grid",
-              "style": {
-                "height": "var(--ui-row-6)",
-                "position": "relative"
-              }
-            }
-          ],
-          "code": "<div class=\"ui-debug-grid\">\n  <!-- 8px grid lines appear -->\n</div>"
-        }
-      ]
-    },
-    {
-      "title": "Row Grid",
-      "description": "Shows both 8px unit lines and stronger row (16px) lines.",
-      "examples": [
-        {
-          "title": "Unit + row grid",
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-debug-grid-rows",
-              "style": {
-                "height": "var(--ui-row-6)",
-                "position": "relative"
-              }
-            }
-          ],
-          "code": "<div class=\"ui-debug-grid-rows\">\n  <!-- 8px + 16px grid lines -->\n</div>"
-        }
-      ]
-    },
-    {
-      "title": "Baseline",
-      "description": "Horizontal baseline grid for verifying text alignment.",
-      "examples": [
-        {
-          "title": "Baseline grid",
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-debug-baseline",
-              "style": {
-                "height": "var(--ui-row-6)",
-                "position": "relative"
-              }
-            }
-          ],
-          "code": "<div class=\"ui-debug-baseline\">\n  <!-- Horizontal 8px baseline lines -->\n</div>"
-        }
-      ]
-    },
-    {
-      "title": "Outline",
-      "description": "Outlines all child elements to reveal layout boundaries.",
-      "examples": [
-        {
-          "title": "Element outlines",
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-debug-outline",
-              "children": [
-                {
-                  "tag": "div",
-                  "class": "ui-row ui-row--sm",
-                  "children": [
-                    { "tag": "div", "text": "A", "style": { "padding": "var(--ui-space-1)" } },
-                    { "tag": "div", "text": "B", "style": { "padding": "var(--ui-space-1)" } },
-                    { "tag": "div", "text": "C", "style": { "padding": "var(--ui-space-1)" } }
-                  ]
-                }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-debug-outline\">\n  <!-- All children get red outlines -->\n</div>"
-        }
-      ]
-    }
-  ]
-}

package/src/layout/app-shell/app-shell.docs.json

@@ -1,155 +0,0 @@
-{
-  "id": "layout",
-  "type": "primitive",
-  "title": "Layout",
-  "description": "Layout primitives for app shells with sidebars and content containers.",
-  "api": "app-shell.api.json",
-  "sections": [
-    {
-      "title": "App Shell + Sidebar + Main",
-      "description": "This page uses the layout primitives:",
-      "examples": [
-        {
-          "code": "<body class=\"ui-app-shell\">\n  <aside class=\"ui-sidebar\">\n    <!-- sidebar content -->\n  </aside>\n  <main class=\"ui-main\">\n    <div class=\"ui-container\">\n      <!-- page content -->\n    </div>\n  </main>\n</body>"
-        }
-      ]
-    },
-    {
-      "title": "With Topbar",
-      "description": "Add a fixed topbar by setting --topbar-height on app-shell. Sidebar and main offset automatically.",
-      "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    <div class=\"ui-topbar__end\">User</div>\n  </header>\n  <aside class=\"ui-sidebar\">Sidebar</aside>\n  <main class=\"ui-main\">\n    <div class=\"ui-container\">Content</div>\n  </main>\n</body>"
-        }
-      ]
-    },
-    {
-      "title": "Sidebar Widths",
-      "examples": [
-        {
-          "layout": "column",
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-row ui-row--sm",
-              "children": [
-                { "tag": "code", "text": ".ui-sidebar--sm" },
-                { "tag": "span", "text": "192px (24 units)" }
-              ]
-            },
-            {
-              "tag": "div",
-              "class": "ui-row ui-row--sm",
-              "children": [
-                { "tag": "code", "text": ".ui-sidebar--md" },
-                { "tag": "span", "text": "240px (30 units) - default" }
-              ]
-            },
-            {
-              "tag": "div",
-              "class": "ui-row ui-row--sm",
-              "children": [
-                { "tag": "code", "text": ".ui-sidebar--lg" },
-                { "tag": "span", "text": "320px (40 units)" }
-              ]
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "title": "Sidebar Position",
-      "description": "By default, sidebar is on the start (left in LTR). Use .ui-sidebar--end for right-side:",
-      "examples": [
-        {
-          "code": "<aside class=\"ui-sidebar ui-sidebar--end\">...</aside>\n<main class=\"ui-main ui-main--sidebar-end\">...</main>"
-        }
-      ]
-    },
-    {
-      "title": "Container Widths",
-      "examples": [
-        {
-          "layout": "column",
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-row ui-row--sm",
-              "children": [
-                { "tag": "code", "text": ".ui-container--sm" },
-                { "tag": "span", "text": "640px (80 units)" }
-              ]
-            },
-            {
-              "tag": "div",
-              "class": "ui-row ui-row--sm",
-              "children": [
-                { "tag": "code", "text": ".ui-container--md" },
-                { "tag": "span", "text": "800px (100 units)" }
-              ]
-            },
-            {
-              "tag": "div",
-              "class": "ui-row ui-row--sm",
-              "children": [
-                { "tag": "code", "text": ".ui-container--lg" },
-                { "tag": "span", "text": "960px (120 units) - default" }
-              ]
-            },
-            {
-              "tag": "div",
-              "class": "ui-row ui-row--sm",
-              "children": [
-                { "tag": "code", "text": ".ui-container--xl" },
-                { "tag": "span", "text": "1280px (160 units)" }
-              ]
-            },
-            {
-              "tag": "div",
-              "class": "ui-row ui-row--sm",
-              "children": [
-                { "tag": "code", "text": ".ui-container--full" },
-                { "tag": "span", "text": "No max width" }
-              ]
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "title": "With Footer",
-      "description": "Place footer inside the content area, after the container.",
-      "examples": [
-        {
-          "code": "<body class=\"ui-app-shell\">\n  <main class=\"ui-main ui-main--full\">\n    <div class=\"ui-container\">Content</div>\n    <footer class=\"ui-footer ui-footer--bordered\">\n      <div class=\"ui-footer__start\"><small>Brand</small></div>\n      <div class=\"ui-footer__end\"><small>v1.0.0</small></div>\n    </footer>\n  </main>\n</body>"
-        }
-      ]
-    },
-    {
-      "title": "Topbar Variants",
-      "description": "Sticky stays in flow, raised adds shadow.",
-      "examples": [
-        {
-          "code": "<header class=\"ui-topbar ui-topbar--sticky ui-topbar--bordered\">...</header>\n<header class=\"ui-topbar ui-topbar--raised\">...</header>"
-        }
-      ]
-    },
-    {
-      "title": "Footer Variants",
-      "description": "Sticky, fixed, and raised options.",
-      "examples": [
-        {
-          "code": "<footer class=\"ui-footer ui-footer--sticky ui-footer--bordered\">...</footer>\n<footer class=\"ui-footer ui-footer--fixed\">...</footer>\n<footer class=\"ui-footer ui-footer--raised\">...</footer>"
-        }
-      ]
-    },
-    {
-      "title": "Centered Container",
-      "examples": [
-        {
-          "code": "<div class=\"ui-container ui-container--center\">\n  <!-- centered content with max-width -->\n</div>"
-        }
-      ]
-    }
-  ]
-}

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