@teseor/css 1.0.0

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

@@ -0,0 +1,251 @@
+@use '../../00-config/tokens/variables' as t;
+
+// Drawer - slide-out panel
+// Side panel that slides in from edge
+
+@layer components.tokens {
+  .drawer {
+    --_size: var(--ui-drawer-size, calc(#{t.$unit} * 40));
+    --_max-size: var(--ui-drawer-max-size, 90%);
+    --_bg: var(--ui-drawer-bg, var(--ui-color-bg, #{t.$color-bg}));
+    --_shadow: var(--ui-drawer-shadow, var(--shadow-lg));
+    --_header-padding: var(--ui-drawer-header-padding, calc(#{t.$unit} * 2) calc(#{t.$unit} * 3));
+    --_body-padding: var(--ui-drawer-body-padding, calc(#{t.$unit} * 3));
+    --_footer-padding: var(--ui-drawer-footer-padding, calc(#{t.$unit} * 2) calc(#{t.$unit} * 3));
+    --_border-color: var(--ui-drawer-border-color, var(--ui-color-border, #{t.$color-border}));
+  }
+
+  .drawer--sm {
+    --_size: calc(#{t.$unit} * 30);
+  }
+
+  .drawer--lg {
+    --_size: calc(#{t.$unit} * 50);
+  }
+
+  .drawer--full {
+    --_size: 100%;
+    --_max-size: 100%;
+  }
+}
+
+@layer components.styles {
+  // Overlay/backdrop
+  .drawer-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: var(--ui-z-drawer, 900);
+
+    background: var(--ui-overlay-bg, rgb(0 0 0 / 0.5));
+  }
+
+  .drawer-overlay[data-state="open"] {
+    animation: drawer-overlay-in var(--ui-duration-normal, 200ms) var(--ui-ease-out, ease-out);
+  }
+
+  .drawer-overlay[data-state="closed"] {
+    animation: drawer-overlay-out var(--ui-duration-fast, 100ms) var(--ui-ease-in, ease-in);
+  }
+
+  @keyframes drawer-overlay-in {
+    from {
+      opacity: 0;
+    }
+  }
+
+  @keyframes drawer-overlay-out {
+    to {
+      opacity: 0;
+    }
+  }
+
+  // Content panel
+  .drawer {
+
+    display: flex;
+    flex-direction: column;
+    position: fixed;
+    z-index: var(--ui-z-drawer, 900);
+
+    background: var(--_bg);
+    box-shadow: var(--_shadow);
+  }
+
+  // Direction variants
+  .drawer--end {
+    inset-block: 0;
+    inset-inline-end: 0;
+
+    inline-size: var(--_size);
+    max-inline-size: var(--_max-size);
+
+    box-shadow: calc(var(--ui-border-width-sm, 1px) * -1) 0 0 var(--_border-color);
+  }
+
+  .drawer--start {
+    inset-block: 0;
+    inset-inline-start: 0;
+
+    inline-size: var(--_size);
+    max-inline-size: var(--_max-size);
+
+    box-shadow: var(--ui-border-width-sm, 1px) 0 0 var(--_border-color);
+  }
+
+  .drawer--top {
+    inset-block-start: 0;
+    inset-inline: 0;
+
+    block-size: var(--_size);
+    max-block-size: var(--_max-size);
+
+    box-shadow: 0 var(--ui-border-width-sm, 1px) 0 var(--_border-color);
+  }
+
+  .drawer--bottom {
+    inset-block-end: 0;
+    inset-inline: 0;
+
+    block-size: var(--_size);
+    max-block-size: var(--_max-size);
+
+    box-shadow: 0 calc(var(--ui-border-width-sm, 1px) * -1) 0 var(--_border-color);
+  }
+
+  // Animation states
+  .drawer--end[data-state="open"] {
+    animation: drawer-slide-in-end var(--ui-duration-normal, 200ms) var(--ui-ease-out, ease-out);
+  }
+
+  .drawer--end[data-state="closed"] {
+    animation: drawer-slide-out-end var(--ui-duration-fast, 100ms) var(--ui-ease-in, ease-in);
+  }
+
+  .drawer--start[data-state="open"] {
+    animation: drawer-slide-in-start var(--ui-duration-normal, 200ms) var(--ui-ease-out, ease-out);
+  }
+
+  .drawer--start[data-state="closed"] {
+    animation: drawer-slide-out-start var(--ui-duration-fast, 100ms) var(--ui-ease-in, ease-in);
+  }
+
+  .drawer--top[data-state="open"] {
+    animation: drawer-slide-in-top var(--ui-duration-normal, 200ms) var(--ui-ease-out, ease-out);
+  }
+
+  .drawer--top[data-state="closed"] {
+    animation: drawer-slide-out-top var(--ui-duration-fast, 100ms) var(--ui-ease-in, ease-in);
+  }
+
+  .drawer--bottom[data-state="open"] {
+    animation: drawer-slide-in-bottom var(--ui-duration-normal, 200ms) var(--ui-ease-out, ease-out);
+  }
+
+  .drawer--bottom[data-state="closed"] {
+    animation: drawer-slide-out-bottom var(--ui-duration-fast, 100ms) var(--ui-ease-in, ease-in);
+  }
+
+  @keyframes drawer-slide-in-end {
+    from {
+      transform: translateX(100%);
+    }
+  }
+
+  @keyframes drawer-slide-out-end {
+    to {
+      transform: translateX(100%);
+    }
+  }
+
+  @keyframes drawer-slide-in-start {
+    from {
+      transform: translateX(-100%);
+    }
+  }
+
+  @keyframes drawer-slide-out-start {
+    to {
+      transform: translateX(-100%);
+    }
+  }
+
+  @keyframes drawer-slide-in-top {
+    from {
+      transform: translateY(-100%);
+    }
+  }
+
+  @keyframes drawer-slide-out-top {
+    to {
+      transform: translateY(-100%);
+    }
+  }
+
+  @keyframes drawer-slide-in-bottom {
+    from {
+      transform: translateY(100%);
+    }
+  }
+
+  @keyframes drawer-slide-out-bottom {
+    to {
+      transform: translateY(100%);
+    }
+  }
+
+  // Structure
+  .drawer__header {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: space-between;
+    gap: calc(#{t.$unit} * 2);
+
+    padding: var(--_header-padding);
+
+    box-shadow: inset 0 calc(var(--ui-border-width-sm, 1px) * -1) 0 var(--_border-color);
+  }
+
+  .drawer__title {
+    margin: 0;
+
+    font-size: var(--ui-font-size-lg, #{t.$font-size-lg});
+    font-weight: var(--ui-weight-semibold, 600);
+    line-height: var(--ui-row-1, #{t.$row});
+  }
+
+  .drawer__description {
+    margin: 0;
+
+    font-size: var(--ui-font-size-sm, #{t.$font-size-sm});
+    line-height: var(--ui-row-1, #{t.$row});
+    color: var(--ui-color-text-muted, #{t.$color-text-muted});
+  }
+
+  .drawer__close {
+    flex-shrink: 0;
+
+    margin-inline-start: auto;
+  }
+
+  .drawer__body {
+    flex: 1 1 auto;
+
+    padding: var(--_body-padding);
+    overflow-y: auto;
+
+    line-height: var(--ui-row-1, #{t.$row});
+  }
+
+  .drawer__footer {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: flex-end;
+    gap: calc(#{t.$unit} * 2);
+
+    padding: var(--_footer-padding);
+
+    box-shadow: inset 0 var(--ui-border-width-sm, 1px) 0 var(--_border-color);
+  }
+}

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

@@ -0,0 +1,11 @@
+{
+  "name": "field",
+  "element": "div",
+  "modifiers": {},
+  "cssVars": [
+    {
+      "name": "--ui-field-gap",
+      "default": "0"
+    }
+  ]
+}

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

@@ -0,0 +1,59 @@
+{
+  "id": "field",
+  "type": "component",
+  "title": "Field",
+  "description": "Form field wrapper that combines label, control, helper text, and error message.",
+  "api": "./field.api.json",
+  "sections": [
+    {
+      "title": "Default",
+      "examples": [
+        {
+          "html": "<div class=\"ui-field\"><label class=\"ui-label\" for=\"email\">Email</label><div class=\"ui-field__control\"><input type=\"email\" id=\"email\" class=\"ui-input\" placeholder=\"Enter email\"></div></div>",
+          "code": "<div class=\"ui-field\">\n  <label class=\"ui-label\" for=\"email\">Email</label>\n  <div class=\"ui-field__control\">\n    <input type=\"email\" id=\"email\" class=\"ui-input\">\n  </div>\n</div>"
+        }
+      ]
+    },
+    {
+      "title": "With Helper Text",
+      "examples": [
+        {
+          "html": "<div class=\"ui-field\"><label class=\"ui-label\" for=\"password\">Password</label><div class=\"ui-field__control\"><input type=\"password\" id=\"password\" class=\"ui-input\"><span class=\"ui-form-helper\">Must be at least 8 characters</span></div></div>",
+          "code": "<div class=\"ui-field\">\n  <label class=\"ui-label\" for=\"password\">Password</label>\n  <div class=\"ui-field__control\">\n    <input type=\"password\" id=\"password\" class=\"ui-input\">\n    <span class=\"ui-form-helper\">Must be at least 8 characters</span>\n  </div>\n</div>"
+        }
+      ]
+    },
+    {
+      "title": "With Error",
+      "examples": [
+        {
+          "html": "<div class=\"ui-field\"><label class=\"ui-label\" for=\"username\">Username</label><div class=\"ui-field__control\"><input type=\"text\" id=\"username\" class=\"ui-input ui-input--error\" value=\"ab\"><span class=\"ui-form-error\">Username must be at least 3 characters</span></div></div>",
+          "code": "<div class=\"ui-field\">\n  <label class=\"ui-label\" for=\"username\">Username</label>\n  <div class=\"ui-field__control\">\n    <input type=\"text\" id=\"username\" class=\"ui-input ui-input--error\">\n    <span class=\"ui-form-error\">Username must be at least 3 characters</span>\n  </div>\n</div>"
+        }
+      ]
+    },
+    {
+      "title": "Horizontal Layout",
+      "description": "Label beside control for wider forms",
+      "api": "./field.api.json",
+      "examples": [
+        {
+          "html": "<div class=\"ui-field ui-field--horizontal\"><label class=\"ui-label ui-field__label\" for=\"name\">Full Name</label><div class=\"ui-field__control\"><input type=\"text\" id=\"name\" class=\"ui-input\"><span class=\"ui-form-helper\">As it appears on your ID</span></div></div>",
+          "code": "<div class=\"ui-field ui-field--horizontal\">\n  <label class=\"ui-label ui-field__label\" for=\"name\">Full Name</label>\n  <div class=\"ui-field__control\">\n    <input type=\"text\" id=\"name\" class=\"ui-input\">\n    <span class=\"ui-form-helper\">As it appears on your ID</span>\n  </div>\n</div>"
+        }
+      ]
+    },
+    {
+      "title": "Required Field",
+      "examples": [
+        {
+          "html": "<div class=\"ui-field\"><label class=\"ui-label ui-label--required\" for=\"req\">Required Field</label><div class=\"ui-field__control\"><input type=\"text\" id=\"req\" class=\"ui-input\" required></div></div>",
+          "code": "<div class=\"ui-field\">\n  <label class=\"ui-label ui-label--required\" for=\"req\">Required Field</label>\n  <div class=\"ui-field__control\">\n    <input type=\"text\" id=\"req\" class=\"ui-input\" required>\n  </div>\n</div>"
+        }
+      ]
+    }
+  ],
+  "customization": [
+    { "token": "--ui-field-gap", "default": "0", "description": "Gap between field elements" }
+  ]
+}

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

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

@@ -0,0 +1,44 @@
+@use '../../00-config/tokens/variables' as t;
+
+// Field - form field wrapper
+// Combines label, control, helper text, and error message
+
+@layer components.tokens {
+  .field {
+    --_gap: var(--ui-field-gap, 0);
+  }
+}
+
+@layer components.styles {
+  .field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--_gap);
+  }
+
+  // Control wrapper for input + addons
+  .field__control {
+    display: flex;
+    flex-direction: column;
+  }
+
+  // Horizontal layout variant
+  .field--horizontal {
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: flex-start;
+  }
+
+  .field--horizontal > .field__label {
+    flex: 0 0 auto;
+
+    min-inline-size: calc(#{t.$unit} * 15);
+    padding-block-start: calc(#{t.$unit} * 1);
+  }
+
+  .field--horizontal > .field__control {
+    flex: 1 1 0;
+
+    min-inline-size: calc(#{t.$unit} * 20);
+  }
+}

package/src/04-components/form-error/form-error.api.json

@@ -0,0 +1,19 @@
+{
+  "name": "form-error",
+  "element": "div",
+  "modifiers": {},
+  "cssVars": [
+    {
+      "name": "--ui-form-error-color",
+      "default": "var(--ui-color-danger)"
+    },
+    {
+      "name": "--ui-form-error-size",
+      "default": "var(--ui-font-size-sm)"
+    },
+    {
+      "name": "--ui-form-error-gap",
+      "default": "0"
+    }
+  ]
+}

package/src/04-components/form-error/form-error.docs.json

@@ -0,0 +1,40 @@
+{
+  "id": "form-error",
+  "type": "component",
+  "title": "Form Error",
+  "description": "Validation error message for form fields. Displays in danger color.",
+  "api": "./form-error.api.json",
+  "sections": [
+    {
+      "title": "Default",
+      "examples": [
+        {
+          "html": "<span class=\"ui-form-error\">This field is required</span>",
+          "code": "<span class=\"ui-form-error\">This field is required</span>"
+        }
+      ]
+    },
+    {
+      "title": "With Icon",
+      "examples": [
+        {
+          "html": "<span class=\"ui-form-error\"><svg class=\"ui-form-error__icon ui-icon ui-icon--sm\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\"/></svg>Please enter a valid email</span>",
+          "code": "<span class=\"ui-form-error\">\n  <svg class=\"ui-form-error__icon ui-icon ui-icon--sm\">...</svg>\n  Please enter a valid email\n</span>"
+        }
+      ]
+    }
+  ],
+  "customization": [
+    {
+      "token": "--ui-form-error-color",
+      "default": "var(--ui-color-danger)",
+      "description": "Error text color"
+    },
+    {
+      "token": "--ui-form-error-size",
+      "default": "var(--ui-font-size-sm)",
+      "description": "Font size"
+    },
+    { "token": "--ui-form-error-gap", "default": "0", "description": "Gap between icon and text" }
+  ]
+}

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

package/src/04-components/form-error/index.scss

@@ -0,0 +1,31 @@
+@use '../../00-config/tokens/variables' as t;
+
+// Form Error - validation error message for form fields
+// Displays error text with danger color
+
+@layer components.tokens {
+  .form-error {
+    --_color: var(--ui-form-error-color, var(--ui-color-danger));
+    --_size: var(--ui-form-error-size, var(--ui-font-size-sm, #{t.$font-size-sm}));
+    --_gap: var(--ui-form-error-gap, 0);
+  }
+}
+
+@layer components.styles {
+  .form-error {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--_gap);
+
+    margin-block-start: var(--_gap);
+
+    font-size: var(--_size);
+    line-height: var(--ui-leading-tight-sm, var(--ui-row-1));
+    color: var(--_color);
+  }
+
+  // Icon slot
+  .form-error__icon {
+    flex-shrink: 0;
+  }
+}

package/src/04-components/form-helper/form-helper.api.json

@@ -0,0 +1,19 @@
+{
+  "name": "form-helper",
+  "element": "div",
+  "modifiers": {},
+  "cssVars": [
+    {
+      "name": "--ui-form-helper-color",
+      "default": "var(--ui-color-text-muted)"
+    },
+    {
+      "name": "--ui-form-helper-size",
+      "default": "var(--ui-font-size-sm)"
+    },
+    {
+      "name": "--ui-form-helper-gap",
+      "default": "0"
+    }
+  ]
+}

package/src/04-components/form-helper/form-helper.docs.json

@@ -0,0 +1,31 @@
+{
+  "id": "form-helper",
+  "type": "component",
+  "title": "Form Helper",
+  "description": "Helper text for form fields. Provides additional context or instructions.",
+  "api": "./form-helper.api.json",
+  "sections": [
+    {
+      "title": "Default",
+      "examples": [
+        {
+          "html": "<span class=\"ui-form-helper\">Must be at least 8 characters</span>",
+          "code": "<span class=\"ui-form-helper\">Must be at least 8 characters</span>"
+        }
+      ]
+    }
+  ],
+  "customization": [
+    {
+      "token": "--ui-form-helper-color",
+      "default": "var(--ui-color-text-muted)",
+      "description": "Text color"
+    },
+    {
+      "token": "--ui-form-helper-size",
+      "default": "var(--ui-font-size-sm)",
+      "description": "Font size"
+    },
+    { "token": "--ui-form-helper-gap", "default": "0", "description": "Top margin spacing" }
+  ]
+}

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

package/src/04-components/form-helper/index.scss

@@ -0,0 +1,24 @@
+@use '../../00-config/tokens/variables' as t;
+
+// Form Helper - helper text for form fields
+// Displays muted text below form controls
+
+@layer components.tokens {
+  .form-helper {
+    --_color: var(--ui-form-helper-color, var(--ui-color-text-muted));
+    --_size: var(--ui-form-helper-size, var(--ui-font-size-sm, #{t.$font-size-sm}));
+    --_gap: var(--ui-form-helper-gap, 0);
+  }
+}
+
+@layer components.styles {
+  .form-helper {
+    display: block;
+
+    margin-block-start: var(--_gap);
+
+    font-size: var(--_size);
+    line-height: var(--ui-leading-tight-sm, var(--ui-row-1));
+    color: var(--_color);
+  }
+}

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

@@ -0,0 +1,83 @@
+{
+  "name": "heading",
+  "element": "h2",
+  "modifiers": {
+    "size": {
+      "values": ["4xl", "3xl", "2xl", "xl", "lg", "md", "sm"]
+    }
+  },
+  "cssVars": [
+    {
+      "name": "--ui-heading-font-size",
+      "default": "var(--ui-font-size-xl)"
+    },
+    {
+      "name": "--ui-heading-line-height",
+      "default": "var(--ui-leading-xl)"
+    },
+    {
+      "name": "--ui-heading-weight",
+      "default": "var(--ui-weight-bold)"
+    },
+    {
+      "name": "--ui-heading-color",
+      "default": "var(--ui-color-text)"
+    },
+    {
+      "name": "--ui-heading-font-size-4xl",
+      "default": "var(--ui-font-size-4xl)"
+    },
+    {
+      "name": "--ui-heading-line-height-4xl",
+      "default": "var(--ui-leading-4xl)"
+    },
+    {
+      "name": "--ui-heading-font-size-3xl",
+      "default": "var(--ui-font-size-3xl)"
+    },
+    {
+      "name": "--ui-heading-line-height-3xl",
+      "default": "var(--ui-leading-3xl)"
+    },
+    {
+      "name": "--ui-heading-font-size-2xl",
+      "default": "var(--ui-font-size-2xl)"
+    },
+    {
+      "name": "--ui-heading-line-height-2xl",
+      "default": "var(--ui-leading-2xl)"
+    },
+    {
+      "name": "--ui-heading-font-size-xl",
+      "default": "var(--ui-font-size-xl)"
+    },
+    {
+      "name": "--ui-heading-line-height-xl",
+      "default": "var(--ui-leading-xl)"
+    },
+    {
+      "name": "--ui-heading-font-size-lg",
+      "default": "var(--ui-font-size-lg)"
+    },
+    {
+      "name": "--ui-heading-line-height-lg",
+      "default": "var(--ui-leading-lg)"
+    },
+    {
+      "name": "--ui-heading-font-size-md",
+      "default": "var(--ui-font-size-md)"
+    },
+    {
+      "name": "--ui-heading-line-height-md",
+      "default": "var(--ui-leading-tight-md)"
+    },
+    {
+      "name": "--ui-heading-font-size-sm",
+      "default": "var(--ui-font-size-sm)"
+    },
+    {
+      "name": "--ui-heading-line-height-sm",
+      "default": "var(--ui-leading-tight-sm)"
+    }
+  ]
+}