@teseor/css 1.0.0

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

@@ -0,0 +1,13 @@
+@layer primitives {
+  .stack {
+    display: flex;
+    flex-direction: column;
+    gap: var(--stack-gap, var(--ui-space-2));
+  }
+
+  .stack--xs { --stack-gap: var(--ui-space-1); }
+  .stack--sm { --stack-gap: var(--ui-space-2); }
+  .stack--md { --stack-gap: var(--ui-space-4); }
+  .stack--lg { --stack-gap: var(--ui-space-6); }
+  .stack--xl { --stack-gap: var(--ui-space-8); }
+}

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

@@ -0,0 +1,10 @@
+{
+  "name": "stack",
+  "element": "div",
+  "modifiers": {
+    "size": {
+      "values": ["xs", "sm", "md", "lg"]
+    }
+  },
+  "cssVars": []
+}

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

@@ -0,0 +1,131 @@
+{
+  "id": "stack",
+  "type": "primitive",
+  "title": "Stack",
+  "description": "Vertical layout with consistent gap.",
+  "api": "stack.api.json",
+  "sections": [
+    {
+      "title": "Basic",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-stack ui-stack--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-stack ui-stack--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-stack ui-stack--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-stack ui-stack--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)"
+                  }
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

package/src/04-components/accordion/accordion.api.json

@@ -0,0 +1,19 @@
+{
+  "name": "accordion",
+  "element": "div",
+  "modifiers": {},
+  "cssVars": [
+    {
+      "name": "--ui-accordion-border-color",
+      "default": "var(--ui-color-border)"
+    },
+    {
+      "name": "--ui-accordion-border-width",
+      "default": "1px"
+    },
+    {
+      "name": "--ui-accordion-radius",
+      "default": "var(--ui-radius-md)"
+    }
+  ]
+}

package/src/04-components/accordion/accordion.docs.json

@@ -0,0 +1,51 @@
+{
+  "id": "accordion",
+  "type": "component",
+  "title": "Accordion",
+  "description": "Container for grouped expandable sections. Use with disclosure components.",
+  "api": "./accordion.api.json",
+  "sections": [
+    {
+      "title": "Default",
+      "examples": [
+        {
+          "html": "<div class=\"ui-accordion\"><details class=\"ui-disclosure\"><summary class=\"ui-disclosure__trigger\">Section 1<span class=\"ui-disclosure__icon\">&#9662;</span></summary><div class=\"ui-disclosure__content\"><p>Content for section 1</p></div></details><details class=\"ui-disclosure\"><summary class=\"ui-disclosure__trigger\">Section 2<span class=\"ui-disclosure__icon\">&#9662;</span></summary><div class=\"ui-disclosure__content\"><p>Content for section 2</p></div></details><details class=\"ui-disclosure\"><summary class=\"ui-disclosure__trigger\">Section 3<span class=\"ui-disclosure__icon\">&#9662;</span></summary><div class=\"ui-disclosure__content\"><p>Content for section 3</p></div></details></div>",
+          "code": "<div class=\"ui-accordion\">\n  <details class=\"ui-disclosure\">\n    <summary class=\"ui-disclosure__trigger\">Section 1</summary>\n    <div class=\"ui-disclosure__content\">...</div>\n  </details>\n  <details class=\"ui-disclosure\">\n    <summary class=\"ui-disclosure__trigger\">Section 2</summary>\n    <div class=\"ui-disclosure__content\">...</div>\n  </details>\n</div>"
+        }
+      ]
+    },
+    {
+      "title": "Separated",
+      "description": "Gap between accordion items",
+      "api": "./accordion.api.json",
+      "examples": [
+        {
+          "html": "<div class=\"ui-accordion ui-accordion--separated\"><details class=\"ui-disclosure\"><summary class=\"ui-disclosure__trigger\">Section 1<span class=\"ui-disclosure__icon\">&#9662;</span></summary><div class=\"ui-disclosure__content\"><p>Content for section 1</p></div></details><details class=\"ui-disclosure\"><summary class=\"ui-disclosure__trigger\">Section 2<span class=\"ui-disclosure__icon\">&#9662;</span></summary><div class=\"ui-disclosure__content\"><p>Content for section 2</p></div></details></div>",
+          "code": "<div class=\"ui-accordion ui-accordion--separated\">\n  ...\n</div>"
+        }
+      ]
+    },
+    {
+      "title": "With One Open",
+      "examples": [
+        {
+          "html": "<div class=\"ui-accordion\"><details class=\"ui-disclosure\" open><summary class=\"ui-disclosure__trigger\">Open Section<span class=\"ui-disclosure__icon\">&#9662;</span></summary><div class=\"ui-disclosure__content\"><p>This section starts open</p></div></details><details class=\"ui-disclosure\"><summary class=\"ui-disclosure__trigger\">Closed Section<span class=\"ui-disclosure__icon\">&#9662;</span></summary><div class=\"ui-disclosure__content\"><p>Click to open</p></div></details></div>",
+          "code": "<div class=\"ui-accordion\">\n  <details class=\"ui-disclosure\" open>\n    <summary class=\"ui-disclosure__trigger\">Open Section</summary>\n    <div class=\"ui-disclosure__content\">...</div>\n  </details>\n  <details class=\"ui-disclosure\">\n    ...\n  </details>\n</div>"
+        }
+      ]
+    }
+  ],
+  "customization": [
+    {
+      "token": "--ui-accordion-border-color",
+      "default": "var(--ui-color-border)",
+      "description": "Border color"
+    },
+    { "token": "--ui-accordion-border-width", "default": "1px", "description": "Border width" },
+    {
+      "token": "--ui-accordion-radius",
+      "default": "var(--ui-radius-md)",
+      "description": "Border radius"
+    }
+  ]
+}

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

package/src/04-components/accordion/index.scss

@@ -0,0 +1,78 @@
+@use '../../00-config/tokens/variables' as t;
+
+// Accordion - grouped expandable sections
+// Container for multiple disclosure items
+
+@layer components.tokens {
+  .accordion {
+    --_border-color: var(--ui-accordion-border-color, var(--ui-color-border, rgb(0 0 0 / 0.1)));
+    --_border-width: var(--ui-accordion-border-width, 1px);
+    --_radius: var(--ui-accordion-radius, var(--ui-radius-md, calc(#{t.$unit} * 1)));
+  }
+}
+
+@layer components.styles {
+  .accordion {
+    border-radius: var(--_radius);
+    // Use outline instead of border - doesn't affect box dimensions
+    outline: var(--_border-width) solid var(--_border-color);
+    outline-offset: calc(var(--_border-width) * -1);
+  }
+
+  // Remove individual borders from nested disclosures
+  .accordion > .disclosure {
+    // Reset disclosure's border-width token so its height calculation is correct
+    --_border-width: 0;
+    border: none;
+    border-radius: 0;
+  }
+
+  // Add dividers between items
+  .accordion > .disclosure + .disclosure {
+    border-block-start: 1px solid var(--_border-color);
+  }
+
+  // Round first and last items
+  .accordion > .disclosure:first-child .disclosure__trigger {
+    border-start-start-radius: var(--_radius);
+    border-start-end-radius: var(--_radius);
+  }
+
+  .accordion > .disclosure:last-child .disclosure__trigger {
+    border-end-start-radius: var(--_radius);
+    border-end-end-radius: var(--_radius);
+  }
+
+  // When last item is open, content needs rounding
+  .accordion > .disclosure:last-child .disclosure__content {
+    border-end-start-radius: var(--_radius);
+    border-end-end-radius: var(--_radius);
+  }
+
+  // Borderless variant
+  .accordion--borderless {
+    border: none;
+  }
+
+  .accordion--borderless > .disclosure + .disclosure {
+    border-block-start: none;
+  }
+
+  // Separated variant - gap between items
+  .accordion--separated {
+    display: flex;
+    flex-direction: column;
+    gap: calc(#{t.$unit} * 1);
+
+    border: none;
+  }
+
+  .accordion--separated > .disclosure {
+    border: 1px solid var(--_border-color);
+    border-radius: var(--_radius);
+  }
+
+  .accordion--separated > .disclosure + .disclosure {
+    border-block-start: 1px solid var(--_border-color);
+  }
+}

package/src/04-components/alert/alert.api.json

@@ -0,0 +1,91 @@
+{
+  "name": "alert",
+  "element": "div",
+  "modifiers": {
+    "variant": {
+      "values": ["info", "success", "warning", "danger"]
+    }
+  },
+  "cssVars": [
+    {
+      "name": "--ui-alert-padding",
+      "default": "var(--ui-space-2)"
+    },
+    {
+      "name": "--ui-alert-border-width",
+      "default": "var(--ui-border-width-sm)"
+    },
+    {
+      "name": "--ui-alert-gap",
+      "default": "var(--ui-space-1)"
+    },
+    {
+      "name": "--ui-alert-radius",
+      "default": "var(--ui-radius-md)"
+    },
+    {
+      "name": "--ui-alert-bg",
+      "default": "var(--ui-color-bg-subtle)"
+    },
+    {
+      "name": "--ui-alert-border-color",
+      "default": "var(--ui-color-border)"
+    },
+    {
+      "name": "--ui-alert-color",
+      "default": "var(--ui-color-text)"
+    },
+    {
+      "name": "--ui-alert-icon-color",
+      "default": "currentcolor"
+    },
+    {
+      "name": "--ui-alert-info-bg",
+      "default": "var(--ui-color-bg-subtle)"
+    },
+    {
+      "name": "--ui-alert-info-border",
+      "default": "var(--ui-color-primary)"
+    },
+    {
+      "name": "--ui-alert-info-icon",
+      "default": "var(--ui-color-primary)"
+    },
+    {
+      "name": "--ui-alert-success-bg",
+      "default": "var(--ui-color-bg-subtle)"
+    },
+    {
+      "name": "--ui-alert-success-border",
+      "default": "var(--ui-color-success)"
+    },
+    {
+      "name": "--ui-alert-success-icon",
+      "default": "var(--ui-color-success)"
+    },
+    {
+      "name": "--ui-alert-warning-bg",
+      "default": "var(--ui-color-bg-subtle)"
+    },
+    {
+      "name": "--ui-alert-warning-border",
+      "default": "var(--ui-color-warning)"
+    },
+    {
+      "name": "--ui-alert-warning-icon",
+      "default": "var(--ui-color-warning)"
+    },
+    {
+      "name": "--ui-alert-danger-bg",
+      "default": "var(--ui-color-bg-subtle)"
+    },
+    {
+      "name": "--ui-alert-danger-border",
+      "default": "var(--ui-color-danger)"
+    },
+    {
+      "name": "--ui-alert-danger-icon",
+      "default": "var(--ui-color-danger)"
+    }
+  ]
+}

package/src/04-components/alert/alert.docs.json

@@ -0,0 +1,79 @@
+{
+  "id": "alert",
+  "type": "component",
+  "title": "Alert",
+  "description": "Informational banner for important messages. Use variants for different message types.",
+  "api": "./alert.api.json",
+  "sections": [
+    {
+      "title": "Default",
+      "examples": [
+        {
+          "html": "<div class=\"ui-alert\"><div class=\"ui-alert__content\"><p class=\"ui-alert__title\">Note</p><p class=\"ui-alert__description\">This is a default alert message.</p></div></div>",
+          "code": "<div class=\"ui-alert\">\n  <div class=\"ui-alert__content\">\n    <p class=\"ui-alert__title\">Note</p>\n    <p class=\"ui-alert__description\">This is a default alert.</p>\n  </div>\n</div>"
+        }
+      ]
+    },
+    {
+      "title": "Variants",
+      "examples": [
+        {
+          "html": "<div class=\"ui-stack\" style=\"--stack-gap: var(--ui-space-2);\"><div class=\"ui-alert ui-alert--info\"><div class=\"ui-alert__content\"><p class=\"ui-alert__title\">Info</p><p class=\"ui-alert__description\">Informational message for the user.</p></div></div><div class=\"ui-alert ui-alert--success\"><div class=\"ui-alert__content\"><p class=\"ui-alert__title\">Success</p><p class=\"ui-alert__description\">Your action was completed successfully.</p></div></div><div class=\"ui-alert ui-alert--warning\"><div class=\"ui-alert__content\"><p class=\"ui-alert__title\">Warning</p><p class=\"ui-alert__description\">Please review before continuing.</p></div></div><div class=\"ui-alert ui-alert--danger\"><div class=\"ui-alert__content\"><p class=\"ui-alert__title\">Error</p><p class=\"ui-alert__description\">Something went wrong. Please try again.</p></div></div></div>",
+          "code": "<div class=\"ui-alert ui-alert--info\">...</div>\n<div class=\"ui-alert ui-alert--success\">...</div>\n<div class=\"ui-alert ui-alert--warning\">...</div>\n<div class=\"ui-alert ui-alert--danger\">...</div>"
+        }
+      ]
+    },
+    {
+      "title": "With Icon",
+      "examples": [
+        {
+          "html": "<div class=\"ui-alert ui-alert--info\"><svg class=\"ui-icon ui-icon--sm ui-alert__icon\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"></circle><path d=\"M12 16v-4\"></path><path d=\"M12 8h.01\"></path></svg><div class=\"ui-alert__content\"><p class=\"ui-alert__description\">Your session will expire in 5 minutes.</p></div></div>",
+          "code": "<div class=\"ui-alert ui-alert--info\">\n  <svg class=\"ui-icon ui-alert__icon\">...</svg>\n  <div class=\"ui-alert__content\">\n    <p class=\"ui-alert__description\">Your session will expire.</p>\n  </div>\n</div>"
+        }
+      ]
+    },
+    {
+      "title": "Description Only",
+      "examples": [
+        {
+          "html": "<div class=\"ui-alert ui-alert--success\"><div class=\"ui-alert__content\"><p class=\"ui-alert__description\">File uploaded successfully.</p></div></div>",
+          "code": "<div class=\"ui-alert ui-alert--success\">\n  <div class=\"ui-alert__content\">\n    <p class=\"ui-alert__description\">File uploaded.</p>\n  </div>\n</div>"
+        }
+      ]
+    }
+  ],
+  "customization": [
+    {
+      "token": "--ui-alert-padding",
+      "default": "var(--ui-space-2)",
+      "description": "Inner padding"
+    },
+    {
+      "token": "--ui-alert-gap",
+      "default": "var(--ui-space-1)",
+      "description": "Gap between icon and content"
+    },
+    {
+      "token": "--ui-alert-radius",
+      "default": "var(--ui-radius-md)",
+      "description": "Border radius"
+    },
+    {
+      "token": "--ui-alert-border-width",
+      "default": "var(--ui-border-width-sm)",
+      "description": "Border width"
+    },
+    {
+      "token": "--ui-alert-bg",
+      "default": "var(--ui-color-bg-subtle)",
+      "description": "Background color"
+    },
+    {
+      "token": "--ui-alert-border-color",
+      "default": "var(--ui-color-border)",
+      "description": "Border color"
+    },
+    { "token": "--ui-alert-color", "default": "var(--ui-color-text)", "description": "Text color" },
+    { "token": "--ui-alert-icon-color", "default": "currentcolor", "description": "Icon color" }
+  ]
+}

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

package/src/04-components/alert/index.scss

@@ -0,0 +1,108 @@
+@use '../../00-config/tokens/variables' as t;
+
+// @component alert
+// @element div
+
+@layer components.tokens {
+  .alert {
+    --_padding: var(--ui-alert-padding, var(--ui-space-2, #{t.$space-2}));
+    --_border-width: var(--ui-alert-border-width, var(--ui-border-width-sm, #{t.$border-width-sm}));
+    --_gap: var(--ui-alert-gap, var(--ui-space-1, #{t.$space-1}));
+    --_radius: var(--ui-alert-radius, var(--ui-radius-md, #{t.$radius-md}));
+    --_bg: var(--ui-alert-bg, var(--ui-color-bg-subtle, #{t.$color-bg-subtle}));
+    --_border-color: var(--ui-alert-border-color, var(--ui-color-border, #{t.$color-border}));
+    --_color: var(--ui-alert-color, var(--ui-color-text, #{t.$color-text}));
+    --_icon-color: var(--ui-alert-icon-color, currentcolor);
+  }
+
+  // @modifier variant
+  .alert--info {
+    --_bg: var(--ui-alert-info-bg, var(--ui-color-bg-subtle, #{t.$color-bg-subtle}));
+    --_border-color: var(--ui-alert-info-border, var(--ui-color-primary, #{t.$color-primary}));
+    --_icon-color: var(--ui-alert-info-icon, var(--ui-color-primary, #{t.$color-primary}));
+  }
+
+  .alert--success {
+    --_bg: var(--ui-alert-success-bg, var(--ui-color-bg-subtle, #{t.$color-bg-subtle}));
+    --_border-color: var(--ui-alert-success-border, var(--ui-color-success, #{t.$color-success}));
+    --_icon-color: var(--ui-alert-success-icon, var(--ui-color-success, #{t.$color-success}));
+  }
+
+  .alert--warning {
+    --_bg: var(--ui-alert-warning-bg, var(--ui-color-bg-subtle, #{t.$color-bg-subtle}));
+    --_border-color: var(--ui-alert-warning-border, var(--ui-color-warning, #{t.$color-warning}));
+    --_icon-color: var(--ui-alert-warning-icon, var(--ui-color-warning, #{t.$color-warning}));
+  }
+
+  .alert--danger {
+    --_bg: var(--ui-alert-danger-bg, var(--ui-color-bg-subtle, #{t.$color-bg-subtle}));
+    --_border-color: var(--ui-alert-danger-border, var(--ui-color-danger, #{t.$color-danger}));
+    --_icon-color: var(--ui-alert-danger-icon, var(--ui-color-danger, #{t.$color-danger}));
+  }
+}
+
+@layer components.styles {
+  .alert {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--_gap);
+
+    // Subtract border from padding to maintain grid rhythm
+    padding: calc(var(--_padding) - var(--_border-width));
+    padding-inline: var(--_padding);
+
+    color: var(--_color);
+
+    background: var(--_bg);
+    border: var(--_border-width) solid var(--_border-color);
+    border-radius: var(--_radius);
+    border-inline-start-width: calc(#{t.$unit} * 0.5);
+  }
+
+  .alert__icon {
+    flex-shrink: 0;
+
+    color: var(--_icon-color);
+  }
+
+  .alert__content {
+    flex: 1;
+
+    min-inline-size: 0;
+  }
+
+  .alert__title {
+    margin: 0;
+
+    font-weight: var(--ui-weight-medium, #{t.$weight-medium});
+    // Line-height aligned to grid (24px = 3 units)
+    line-height: var(--ui-row-1, #{t.$row});
+  }
+
+  .alert__description {
+    margin: 0;
+    margin-block-start: calc(#{t.$unit} * 1);
+
+    font-size: var(--ui-font-size-sm, #{t.$font-size-sm});
+    // Line-height aligned to grid (16px = 2 units for smaller text)
+    line-height: var(--ui-row-1, #{t.$row});
+    color: var(--ui-color-text-muted, #{t.$color-text-muted});
+  }
+
+  .alert__close {
+    flex-shrink: 0;
+    align-self: flex-start;
+
+    padding: 0;
+
+    color: var(--ui-color-text-muted, #{t.$color-text-muted});
+
+    background: none;
+    border: none;
+    cursor: pointer;
+
+    &:hover {
+      color: var(--ui-color-text, #{t.$color-text});
+    }
+  }
+}