@teseor/css 1.7.0 → 1.9.0

package/src/{03-layout → layout}/app-shell/app-shell.docs.json

@@ -27,11 +27,11 @@
       "title": "Sidebar Widths",
       "examples": [
         {
-          "layout": "stack",
+          "layout": "column",
           "items": [
             {
               "tag": "div",
-              "class": "ui-cluster ui-cluster--sm",
+              "class": "ui-row ui-row--sm",
               "children": [
                 { "tag": "code", "text": ".ui-sidebar--sm" },
                 { "tag": "span", "text": "192px (24 units)" }
@@ -39,7 +39,7 @@
             },
             {
               "tag": "div",
-              "class": "ui-cluster ui-cluster--sm",
+              "class": "ui-row ui-row--sm",
               "children": [
                 { "tag": "code", "text": ".ui-sidebar--md" },
                 { "tag": "span", "text": "240px (30 units) - default" }
@@ -47,7 +47,7 @@
             },
             {
               "tag": "div",
-              "class": "ui-cluster ui-cluster--sm",
+              "class": "ui-row ui-row--sm",
               "children": [
                 { "tag": "code", "text": ".ui-sidebar--lg" },
                 { "tag": "span", "text": "320px (40 units)" }
@@ -70,11 +70,11 @@
       "title": "Container Widths",
       "examples": [
         {
-          "layout": "stack",
+          "layout": "column",
           "items": [
             {
               "tag": "div",
-              "class": "ui-cluster ui-cluster--sm",
+              "class": "ui-row ui-row--sm",
               "children": [
                 { "tag": "code", "text": ".ui-container--sm" },
                 { "tag": "span", "text": "640px (80 units)" }
@@ -82,7 +82,7 @@
             },
             {
               "tag": "div",
-              "class": "ui-cluster ui-cluster--sm",
+              "class": "ui-row ui-row--sm",
               "children": [
                 { "tag": "code", "text": ".ui-container--md" },
                 { "tag": "span", "text": "800px (100 units)" }
@@ -90,7 +90,7 @@
             },
             {
               "tag": "div",
-              "class": "ui-cluster ui-cluster--sm",
+              "class": "ui-row ui-row--sm",
               "children": [
                 { "tag": "code", "text": ".ui-container--lg" },
                 { "tag": "span", "text": "960px (120 units) - default" }
@@ -98,7 +98,7 @@
             },
             {
               "tag": "div",
-              "class": "ui-cluster ui-cluster--sm",
+              "class": "ui-row ui-row--sm",
               "children": [
                 { "tag": "code", "text": ".ui-container--xl" },
                 { "tag": "span", "text": "1280px (160 units)" }
@@ -106,7 +106,7 @@
             },
             {
               "tag": "div",
-              "class": "ui-cluster ui-cluster--sm",
+              "class": "ui-row ui-row--sm",
               "children": [
                 { "tag": "code", "text": ".ui-container--full" },
                 { "tag": "span", "text": "No max width" }
@@ -125,6 +125,24 @@
         }
       ]
     },
+    {
+      "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": [

package/src/layout/app-shell/app-shell.visual.spec.ts

@@ -0,0 +1,13 @@
+import { resolve } from 'node:path';
+import { expect, test } from '@playwright/test';
+import { saveForLostPixel, setupVisualTestFromDocs } from '../../testing';
+
+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');
+  });
+});

package/src/layout/app-shell/index.scss

@@ -0,0 +1,9 @@
+// @component app-shell
+// @element body
+// @related topbar, sidebar, main, container, footer
+
+@layer primitives {
+  .app-shell {
+    min-block-size: 100vh;
+  }
+}

package/src/{03-layout → layout}/aspect-ratio/aspect-ratio.api.json

@@ -1,4 +1,5 @@
 {
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
   "name": "aspect-ratio",
   "element": "div",
   "modifiers": {
@@ -6,11 +7,5 @@
       "values": ["square", "video", "photo", "wide", "portrait"]
     }
   },
-  "cssVars": [
-    {
-      "name": "--ui-aspect-ratio",
-      "description": "Custom aspect ratio",
-      "default": "1 / 1"
-    }
-  ]
+  "cssVars": []
 }

package/src/{03-layout → layout}/aspect-ratio/aspect-ratio.docs.json

@@ -12,7 +12,7 @@
           "items": [
             {
               "tag": "div",
-              "class": "ui-cluster ui-cluster--md",
+              "class": "ui-row ui-row--md",
               "children": [
                 {
                   "tag": "div",
@@ -112,7 +112,7 @@
           "items": [
             {
               "tag": "div",
-              "class": "ui-cluster ui-cluster--md",
+              "class": "ui-row ui-row--md",
               "children": [
                 {
                   "tag": "div",

package/src/{03-layout → layout}/aspect-ratio/index.scss

@@ -1,3 +1,6 @@
+// @component aspect-ratio
+// @element div
+
 @layer primitives {
   .aspect-ratio {
     aspect-ratio: var(--aspect-ratio, 1 / 1);
@@ -15,6 +18,7 @@
   }
 
   // Preset ratios — functional names, not math
+  // @modifier ratio
   .aspect-ratio--square { --aspect-ratio: 1 / 1; }
   .aspect-ratio--video { --aspect-ratio: 16 / 9; }
   .aspect-ratio--photo { --aspect-ratio: 4 / 3; }

package/src/layout/box/box.api.json

@@ -0,0 +1,32 @@
+{
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
+  "name": "box",
+  "element": "div",
+  "modifiers": {
+    "p-1": {
+      "type": "boolean"
+    },
+    "p-2": {
+      "type": "boolean"
+    },
+    "p-3": {
+      "type": "boolean"
+    },
+    "p-4": {
+      "type": "boolean"
+    },
+    "bg-subtle": {
+      "type": "boolean"
+    },
+    "bg-muted": {
+      "type": "boolean"
+    },
+    "rounded": {
+      "type": "boolean"
+    },
+    "rounded-lg": {
+      "type": "boolean"
+    }
+  },
+  "cssVars": []
+}

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

@@ -0,0 +1,93 @@
+{
+  "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

@@ -0,0 +1,13 @@
+import { resolve } from 'node:path';
+import { expect, test } from '@playwright/test';
+import { saveForLostPixel, setupVisualTestFromDocs } from '../../testing';
+
+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/box/index.scss

@@ -0,0 +1,52 @@
+@use '../../config/tokens/variables' as t;
+// @component box
+// @element div
+
+// Box - base container with style props
+// Foundation for other layout primitives
+
+@layer primitives {
+  .box {
+    --_space-1: var(--ui-space-1, #{t.$space-1});
+    --_space-2: var(--ui-space-2, #{t.$space-2});
+    --_space-3: var(--ui-space-3, #{t.$space-3});
+    --_space-4: var(--ui-space-4, #{t.$space-4});
+    --_color-bg-subtle: var(--ui-color-bg-subtle, #{t.$color-bg-subtle});
+    --_color-bg-muted: var(--ui-color-bg-muted, #{t.$color-bg-muted});
+    --_radius-md: var(--ui-radius-md, #{t.$radius-md});
+    --_radius-lg: var(--ui-radius-lg, #{t.$radius-lg});
+    --_padding: var(--box-padding, 0);
+    --_bg: var(--box-bg, transparent);
+    --_color: var(--box-color, inherit);
+    --_radius: var(--box-radius, 0);
+
+    padding: var(--_padding);
+
+    color: var(--_color);
+
+    background: var(--_bg);
+    border-radius: var(--_radius);
+  }
+
+  // Padding modifiers
+  // @modifier boolean p-1
+  .box--p-1 { --_padding: var(--_space-1); }
+  // @modifier boolean p-2
+  .box--p-2 { --_padding: var(--_space-2); }
+  // @modifier boolean p-3
+  .box--p-3 { --_padding: var(--_space-3); }
+  // @modifier boolean p-4
+  .box--p-4 { --_padding: var(--_space-4); }
+
+  // Background modifiers
+  // @modifier boolean bg-subtle
+  .box--bg-subtle { --_bg: var(--_color-bg-subtle); }
+  // @modifier boolean bg-muted
+  .box--bg-muted { --_bg: var(--_color-bg-muted); }
+
+  // Border radius modifiers
+  // @modifier boolean rounded
+  .box--rounded { --_radius: var(--_radius-md); }
+  // @modifier boolean rounded-lg
+  .box--rounded-lg { --_radius: var(--_radius-lg); }
+}

package/src/layout/center/center.api.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
+  "name": "center",
+  "element": "div",
+  "modifiers": {},
+  "cssVars": []
+}

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

@@ -0,0 +1,13 @@
+import { resolve } from 'node:path';
+import { expect, test } from '@playwright/test';
+import { saveForLostPixel, setupVisualTestFromDocs } from '../../testing';
+
+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/{03-layout → layout}/center/index.scss

@@ -1,3 +1,6 @@
+// @component center
+// @element div
+
 @layer primitives {
   .center {
     display: flex;

package/src/layout/column/column.api.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
+  "name": "column",
+  "element": "div",
+  "modifiers": {
+    "size": {
+      "values": ["xs", "sm", "md", "lg", "xl"]
+    }
+  },
+  "cssVars": []
+}

package/src/{03-layout/stack/stack.docs.json → layout/column/column.docs.json}

@@ -1,9 +1,9 @@
 {
-  "id": "stack",
+  "id": "column",
   "type": "primitive",
-  "title": "Stack",
+  "title": "Column",
   "description": "Vertical layout with consistent gap.",
-  "api": "stack.api.json",
+  "api": "column.api.json",
   "sections": [
     {
       "title": "Basic",
@@ -12,7 +12,7 @@
           "items": [
             {
               "tag": "div",
-              "class": "ui-stack ui-stack--sm",
+              "class": "ui-column ui-column--sm",
               "children": [
                 {
                   "tag": "div",
@@ -51,7 +51,7 @@
           "items": [
             {
               "tag": "div",
-              "class": "ui-stack ui-stack--xs",
+              "class": "ui-column ui-column--xs",
               "children": [
                 {
                   "tag": "div",
@@ -77,7 +77,7 @@
           "items": [
             {
               "tag": "div",
-              "class": "ui-stack ui-stack--md",
+              "class": "ui-column ui-column--md",
               "children": [
                 {
                   "tag": "div",
@@ -103,7 +103,7 @@
           "items": [
             {
               "tag": "div",
-              "class": "ui-stack ui-stack--lg",
+              "class": "ui-column ui-column--lg",
               "children": [
                 {
                   "tag": "div",

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

@@ -0,0 +1,13 @@
+import { resolve } from 'node:path';
+import { expect, test } from '@playwright/test';
+import { saveForLostPixel, setupVisualTestFromDocs } from '../../testing';
+
+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/column/index.scss

@@ -0,0 +1,22 @@
+// @component column
+// @element div
+
+@layer primitives {
+  .column {
+    --_space-2: var(--ui-space-2);
+    --_space-1: var(--ui-space-1);
+    --_space-4: var(--ui-space-4);
+    --_space-6: var(--ui-space-6);
+    --_space-8: var(--ui-space-8);
+    display: flex;
+    flex-direction: column;
+    gap: var(--column-gap, var(--_space-2));
+  }
+
+  // @modifier size
+  .column--xs { --column-gap: var(--_space-1); }
+  .column--sm { --column-gap: var(--_space-2); }
+  .column--md { --column-gap: var(--_space-4); }
+  .column--lg { --column-gap: var(--_space-6); }
+  .column--xl { --column-gap: var(--_space-8); }
+}

package/src/{03-layout → layout}/container/container.api.json

@@ -1,12 +1,13 @@
 {
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
   "name": "container",
   "element": "div",
   "modifiers": {
-    "size": {
-      "values": ["sm", "md", "lg", "xl", "full"]
-    },
     "center": {
       "type": "boolean"
+    },
+    "size": {
+      "values": ["sm", "md", "lg", "xl", "full"]
     }
   },
   "cssVars": []

package/src/layout/container/index.scss

@@ -0,0 +1,24 @@
+// @component container
+// @element div
+
+@layer primitives {
+  .container {
+    --_unit: var(--ui-unit);
+    --_space-4: var(--ui-space-4);
+    max-inline-size: var(--container-width, calc(var(--_unit) * 120));
+    padding-inline: var(--_space-4);
+  }
+
+  // @modifier boolean center
+  .container--center {
+    margin-inline: auto;
+  }
+
+  // Size modifiers
+  // @modifier size
+  .container--sm { --container-width: calc(var(--_unit) * 80); }
+  .container--md { --container-width: calc(var(--_unit) * 100); }
+  .container--lg { --container-width: calc(var(--_unit) * 120); }
+  .container--xl { --container-width: calc(var(--_unit) * 160); }
+  .container--full { max-inline-size: none; }
+}

package/src/layout/content/content.api.json

@@ -0,0 +1,30 @@
+{
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
+  "name": "content",
+  "element": "div",
+  "modifiers": {
+    "prose": {
+      "type": "boolean"
+    },
+    "flush": {
+      "type": "boolean"
+    }
+  },
+  "cssVars": [
+    {
+      "name": "--ui-content-padding-block",
+      "default": "var(--ui-space-4)",
+      "description": "Vertical padding"
+    },
+    {
+      "name": "--ui-content-padding-inline",
+      "default": "var(--ui-space-4)",
+      "description": "Horizontal padding"
+    },
+    {
+      "name": "--ui-content-gap",
+      "default": "var(--ui-space-3)",
+      "description": "Gap between children"
+    }
+  ]
+}

package/src/{03-layout → layout}/content/index.scss

@@ -1,7 +1,14 @@
+// @component content
+// @element div
+
 @layer primitives {
   .content {
+    --_unit: var(--ui-unit);
+    // @desc Vertical padding
     --_padding-block: var(--ui-content-padding-block, var(--ui-space-4));
+    // @desc Horizontal padding
     --_padding-inline: var(--ui-content-padding-inline, var(--ui-space-4));
+    // @desc Gap between children
     --_gap: var(--ui-content-gap, var(--ui-space-3));
 
     display: flex;
@@ -13,11 +20,13 @@
   }
 
   // Prose-friendly: narrower max-width for readability
+  // @modifier boolean prose
   .content--prose {
-    max-inline-size: calc(var(--unit) * 80);
+    max-inline-size: calc(var(--_unit) * 80);
   }
 
   // Flush: no padding, just gap
+  // @modifier boolean flush
   .content--flush {
     padding-block: 0;
     padding-inline: 0;

package/src/{03-layout → layout}/footer/footer.api.json

@@ -1,4 +1,5 @@
 {
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
   "name": "footer",
   "element": "footer",
   "modifiers": {
@@ -23,23 +24,28 @@
   "cssVars": [
     {
       "name": "--ui-footer-height",
-      "default": "var(--ui-row-3)"
+      "default": "var(--ui-row-3)",
+      "description": "Overall height"
     },
     {
       "name": "--ui-footer-bg",
-      "default": "var(--ui-color-bg)"
+      "default": "var(--ui-color-bg)",
+      "description": "Background color"
     },
     {
       "name": "--ui-footer-padding-inline",
-      "default": "var(--ui-space-3)"
+      "default": "var(--ui-space-3)",
+      "description": "Horizontal padding"
     },
     {
       "name": "--ui-footer-border-color",
-      "default": "var(--ui-color-border)"
+      "default": "var(--ui-color-border)",
+      "description": "Border color"
     },
     {
       "name": "--ui-footer-z",
-      "default": "var(--ui-z-sticky)"
+      "default": "var(--ui-z-sticky)",
+      "description": "Z-index stacking order"
     }
   ]
 }