@teseor/css 1.2.4 → 1.4.0

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

@@ -0,0 +1,124 @@
+{
+  "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/03-layout/page-header/page-header.visual.spec.ts

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

package/src/03-layout/sidebar/index.scss

@@ -3,11 +3,11 @@
     display: flex;
     flex-direction: column;
     position: fixed;
-    inset-block-start: 0;
+    inset-block-start: var(--topbar-height, 0);
     inset-inline-start: 0;
     z-index: var(--ui-z-sticky);
 
-    block-size: 100vh;
+    block-size: calc(100vh - var(--topbar-height, 0px));
     inline-size: var(--sidebar-width, calc(var(--unit) * 30));
     overflow-y: auto;
 

package/src/03-layout/topbar/index.scss

@@ -0,0 +1,62 @@
+@layer primitives {
+  .topbar {
+    --_height: var(--ui-topbar-height, var(--ui-row-3));
+    --_bg: var(--ui-topbar-bg, var(--ui-color-bg));
+    --_padding-inline: var(--ui-topbar-padding-inline, var(--ui-space-3));
+    --_border-color: var(--ui-topbar-border-color, var(--ui-color-border));
+    --_z: var(--ui-topbar-z, var(--ui-z-sticky));
+
+    display: flex;
+    align-items: center;
+    z-index: var(--_z);
+
+    block-size: var(--_height);
+    padding-inline: var(--_padding-inline);
+
+    background: var(--_bg);
+  }
+
+  // Sections
+  .topbar__start {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: var(--ui-space-2);
+  }
+
+  .topbar__center {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+    gap: var(--ui-space-2);
+  }
+
+  .topbar__end {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: var(--ui-space-2);
+  }
+
+  // Position modifiers
+  .topbar--sticky {
+    position: sticky;
+    inset-block-start: 0;
+  }
+
+  .topbar--fixed {
+    position: fixed;
+    inset-block-start: 0;
+    inset-inline: 0;
+  }
+
+  // Visual modifiers
+  .topbar--bordered {
+    box-shadow: inset 0 calc(var(--ui-border-width-sm) * -1) 0 0 var(--_border-color);
+  }
+
+  .topbar--raised {
+    box-shadow: var(--shadow-sm);
+  }
+}

package/src/03-layout/topbar/topbar.api.json

@@ -0,0 +1,45 @@
+{
+  "name": "topbar",
+  "element": "header",
+  "modifiers": {
+    "sticky": {
+      "type": "boolean"
+    },
+    "fixed": {
+      "type": "boolean"
+    },
+    "bordered": {
+      "type": "boolean"
+    },
+    "raised": {
+      "type": "boolean"
+    }
+  },
+  "elements": {
+    "start": {},
+    "center": {},
+    "end": {}
+  },
+  "cssVars": [
+    {
+      "name": "--ui-topbar-height",
+      "default": "var(--ui-row-3)"
+    },
+    {
+      "name": "--ui-topbar-bg",
+      "default": "var(--ui-color-bg)"
+    },
+    {
+      "name": "--ui-topbar-padding-inline",
+      "default": "var(--ui-space-3)"
+    },
+    {
+      "name": "--ui-topbar-border-color",
+      "default": "var(--ui-color-border)"
+    },
+    {
+      "name": "--ui-topbar-z",
+      "default": "var(--ui-z-sticky)"
+    }
+  ]
+}

package/src/03-layout/topbar/topbar.docs.json

@@ -0,0 +1,110 @@
+{
+  "id": "topbar",
+  "type": "primitive",
+  "title": "Topbar",
+  "description": "Fixed or sticky header bar for app layouts with start, center, and end sections.",
+  "api": "./topbar.api.json",
+  "sections": [
+    {
+      "title": "Default",
+      "description": "Basic topbar with three sections: start (brand), center (search/nav), and end (actions).",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "header",
+              "class": "ui-topbar ui-topbar--bordered",
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-topbar__start",
+                  "children": [{ "tag": "strong", "text": "Brand" }]
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-topbar__center",
+                  "children": [{ "tag": "span", "text": "Center content" }]
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-topbar__end",
+                  "children": [{ "tag": "span", "text": "Actions" }]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Sticky",
+      "description": "Stays at the top of the viewport on scroll.",
+      "examples": [
+        {
+          "code": "<header class=\"ui-topbar ui-topbar--sticky ui-topbar--bordered\">\n  <div class=\"ui-topbar__start\"><strong>Brand</strong></div>\n  <div class=\"ui-topbar__center\">Nav</div>\n  <div class=\"ui-topbar__end\">Actions</div>\n</header>"
+        }
+      ]
+    },
+    {
+      "title": "Bordered",
+      "description": "Bottom border via inset box-shadow to preserve grid rhythm.",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "header",
+              "class": "ui-topbar ui-topbar--bordered",
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-topbar__start",
+                  "children": [{ "tag": "strong", "text": "Bordered" }]
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-topbar__end",
+                  "children": [{ "tag": "span", "text": "Actions" }]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Raised",
+      "description": "Subtle drop shadow below the topbar.",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "header",
+              "class": "ui-topbar ui-topbar--raised",
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-topbar__start",
+                  "children": [{ "tag": "strong", "text": "Raised" }]
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-topbar__end",
+                  "children": [{ "tag": "span", "text": "Actions" }]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Integration with Sidebar",
+      "description": "Set --topbar-height on .app-shell so sidebar and main offset correctly. The topbar itself uses --fixed, and sidebar/main read --topbar-height.",
+      "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>"
+        }
+      ]
+    }
+  ]
+}

package/src/03-layout/topbar/topbar.visual.spec.ts

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

package/src/04-components/actions/button-group/button-group.visual.spec.ts

@@ -7,8 +7,7 @@ const DOCS_PATH = resolve(__dirname, 'button-group.docs.json');
 test.describe('button-group visual regression', () => {
   test('all variations', async ({ page }) => {
     await setupVisualTestFromDocs(page, DOCS_PATH);
-    // TODO: fix grid rhythm - negative margins cause off-grid heights (#178)
-    // await validateGridRhythm(page, 'button-group');
+    await validateGridRhythm(page, 'button-group');
     await saveForLostPixel(page, 'button-group');
     await expect(page.locator('body')).toHaveScreenshot('button-group.visual.png');
   });

package/src/04-components/actions/button-group/index.scss

@@ -59,7 +59,9 @@
   }
 
   .button-group--vertical > .button + .button {
-    margin-block-start: calc(#{t.$unit} / -8);
+    // Remove top border instead of negative margin to stay on 8px grid
+    border-block-start-width: 0;
+
     margin-inline-start: 0;
   }
 

package/src/04-components/data-display/stat/index.scss

@@ -0,0 +1,47 @@
+@use '../../../00-config/tokens/variables' as t;
+
+@layer components.tokens {
+  .stat {
+    --_gap: var(--ui-stat-gap, var(--ui-space-1, #{t.$space-1}));
+  }
+
+  .stat__value {
+    --_font-size: var(--ui-stat-value-font-size, var(--ui-font-size-3xl, #{t.$font-size-3xl}));
+    --_font-weight: var(--ui-stat-value-font-weight, var(--ui-weight-bold, #{t.$weight-bold}));
+    --_line-height: var(--ui-stat-value-line-height, var(--ui-leading-3xl, #{t.$leading-3xl}));
+    --_color: var(--ui-stat-value-color, var(--ui-color-text, #{t.$color-text}));
+  }
+
+  .stat__label {
+    --_font-size: var(--ui-stat-label-font-size, var(--ui-font-size-sm, #{t.$font-size-sm}));
+    --_color: var(--ui-stat-label-color, var(--ui-color-text-muted, #{t.$color-text-muted}));
+    --_line-height: var(--ui-stat-label-line-height, var(--ui-leading-sm, #{t.$leading-sm}));
+  }
+
+  .stat--sm .stat__value {
+    --_font-size: var(--ui-font-size-xl, #{t.$font-size-xl});
+    --_line-height: var(--ui-leading-xl, #{t.$leading-xl});
+  }
+}
+
+@layer components.styles {
+  .stat {
+    display: flex;
+    flex-direction: column;
+    gap: var(--_gap);
+  }
+
+  .stat__value {
+    font-size: var(--_font-size);
+    font-weight: var(--_font-weight);
+    line-height: var(--_line-height);
+    letter-spacing: var(--ui-tracking-display, #{t.$tracking-display});
+    color: var(--_color);
+  }
+
+  .stat__label {
+    font-size: var(--_font-size);
+    line-height: var(--_line-height);
+    color: var(--_color);
+  }
+}

package/src/04-components/data-display/stat/stat.api.json

@@ -0,0 +1,18 @@
+{
+  "name": "stat",
+  "element": "div",
+  "modifiers": {
+    "size": {
+      "values": ["sm"]
+    }
+  },
+  "subElements": ["value", "label"],
+  "cssVars": [
+    { "name": "--ui-stat-gap", "default": "var(--ui-space-1)" },
+    { "name": "--ui-stat-value-font-size", "default": "var(--ui-font-size-3xl)" },
+    { "name": "--ui-stat-value-font-weight", "default": "var(--ui-weight-bold)" },
+    { "name": "--ui-stat-value-color", "default": "var(--ui-color-text)" },
+    { "name": "--ui-stat-label-font-size", "default": "var(--ui-font-size-sm)" },
+    { "name": "--ui-stat-label-color", "default": "var(--ui-color-text-muted)" }
+  ]
+}

package/src/04-components/data-display/stat/stat.docs.json

@@ -0,0 +1,114 @@
+{
+  "id": "stat",
+  "type": "component",
+  "title": "Stat",
+  "description": "Statistic display with prominent value and descriptive label.",
+  "api": "./stat.api.json",
+  "sections": [
+    {
+      "title": "Default",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-stat",
+              "children": [
+                { "tag": "span", "class": "ui-stat__value", "text": "2,847" },
+                { "tag": "span", "class": "ui-stat__label", "text": "Total users" }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Multiple stats",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-cluster ui-cluster--lg",
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-stat",
+                  "children": [
+                    { "tag": "span", "class": "ui-stat__value", "text": "12.5k" },
+                    { "tag": "span", "class": "ui-stat__label", "text": "Revenue" }
+                  ]
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-stat",
+                  "children": [
+                    { "tag": "span", "class": "ui-stat__value", "text": "573" },
+                    { "tag": "span", "class": "ui-stat__label", "text": "Orders" }
+                  ]
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-stat",
+                  "children": [
+                    { "tag": "span", "class": "ui-stat__value", "text": "98%" },
+                    { "tag": "span", "class": "ui-stat__label", "text": "Satisfaction" }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Small",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-stat ui-stat--sm",
+              "children": [
+                { "tag": "span", "class": "ui-stat__value", "text": "42" },
+                { "tag": "span", "class": "ui-stat__label", "text": "Active now" }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "customization": [
+    {
+      "token": "--ui-stat-gap",
+      "default": "var(--ui-space-1)",
+      "description": "Gap between value and label"
+    },
+    {
+      "token": "--ui-stat-value-font-size",
+      "default": "var(--ui-font-size-3xl)",
+      "description": "Value font size"
+    },
+    {
+      "token": "--ui-stat-value-font-weight",
+      "default": "var(--ui-weight-bold)",
+      "description": "Value font weight"
+    },
+    {
+      "token": "--ui-stat-value-color",
+      "default": "var(--ui-color-text)",
+      "description": "Value text color"
+    },
+    {
+      "token": "--ui-stat-label-font-size",
+      "default": "var(--ui-font-size-sm)",
+      "description": "Label font size"
+    },
+    {
+      "token": "--ui-stat-label-color",
+      "default": "var(--ui-color-text-muted)",
+      "description": "Label text color"
+    }
+  ]
+}

package/src/04-components/data-display/stat/stat.visual.spec.ts

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

package/src/04-components/index.scss

@@ -5,6 +5,7 @@
 @forward './data-display/card/index';
 @forward './data-display/data-list/index';
 @forward './data-display/icon/index';
+@forward './data-display/stat/index';
 @forward './data-display/status/index';
 @forward './data-display/table/index';
 @forward './data-display/tag/index';
@@ -26,6 +27,7 @@
 @forward './forms/textarea/index';
 @forward './forms/toggle/index';
 @forward './layout/divider/index';
+@forward './layout/spacer/index';
 @forward './navigation/breadcrumb/index';
 @forward './navigation/menu/index';
 @forward './navigation/nav/index';
@@ -37,6 +39,9 @@
 @forward './overlays/overlay/index';
 @forward './overlays/popover/index';
 @forward './overlays/tooltip/index';
+@forward './typography/blockquote/index';
 @forward './typography/code/index';
 @forward './typography/heading/index';
+@forward './typography/kbd/index';
 @forward './typography/link/index';
+@forward './typography/mark/index';

package/src/04-components/layout/spacer/index.scss

@@ -0,0 +1,11 @@
+@layer components.tokens {
+  .spacer {
+    --_size: var(--ui-spacer-size, 1);
+  }
+}
+
+@layer components.styles {
+  .spacer {
+    flex: var(--_size);
+  }
+}