@teseor/css 1.0.0

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

@@ -0,0 +1,85 @@
+{
+  "name": "input",
+  "element": "input",
+  "modifiers": {
+    "size": {
+      "values": ["sm", "lg"]
+    },
+    "variant": {
+      "values": ["filled", "ghost"]
+    },
+    "state": {
+      "values": ["error", "success"]
+    }
+  },
+  "cssVars": [
+    {
+      "name": "--ui-input-height",
+      "default": "var(--ui-row-2)"
+    },
+    {
+      "name": "--ui-input-padding-x",
+      "default": "var(--ui-space-1)"
+    },
+    {
+      "name": "--ui-input-font-size",
+      "default": "var(--ui-font-size-sm)"
+    },
+    {
+      "name": "--ui-input-radius",
+      "default": "var(--ui-radius-md)"
+    },
+    {
+      "name": "--ui-input-bg",
+      "default": "var(--ui-color-bg)"
+    },
+    {
+      "name": "--ui-input-border-color",
+      "default": "var(--ui-color-border-strong)"
+    },
+    {
+      "name": "--ui-input-border-color-focus",
+      "default": "var(--ui-color-primary)"
+    },
+    {
+      "name": "--ui-input-text",
+      "default": "var(--ui-color-text)"
+    },
+    {
+      "name": "--ui-input-placeholder",
+      "default": "var(--ui-color-text-muted)"
+    },
+    {
+      "name": "--ui-input-height-sm",
+      "default": "calc(#{t.$row} * 1.5"
+    },
+    {
+      "name": "--ui-input-font-size-sm",
+      "default": "var(--ui-font-size-xs)"
+    },
+    {
+      "name": "--ui-input-height-lg",
+      "default": "calc(#{t.$row} * 2.5"
+    },
+    {
+      "name": "--ui-input-padding-x-lg",
+      "default": "var(--ui-space-2)"
+    },
+    {
+      "name": "--ui-input-font-size-lg",
+      "default": "var(--ui-font-size-md)"
+    },
+    {
+      "name": "--ui-input-filled-bg",
+      "default": "var(--ui-color-bg-muted)"
+    },
+    {
+      "name": "--ui-input-error-border",
+      "default": "var(--ui-color-danger)"
+    },
+    {
+      "name": "--ui-input-success-border",
+      "default": "var(--ui-color-success)"
+    }
+  ]
+}

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

@@ -0,0 +1,189 @@
+{
+  "id": "input",
+  "type": "component",
+  "title": "Input",
+  "description": "Text input field for user data entry. Heights align to grid rows.",
+  "api": "./input.api.json",
+  "sections": [
+    {
+      "title": "Default",
+      "examples": [
+        {
+          "html": "<input class=\"ui-input\" type=\"text\" placeholder=\"Enter text...\">"
+        }
+      ]
+    },
+    {
+      "title": "Sizes",
+      "examples": [
+        {
+          "layout": "stack",
+          "items": [
+            {
+              "tag": "input",
+              "class": "ui-input ui-input--sm",
+              "attrs": { "type": "text", "placeholder": "Small (1.5 rows)" }
+            },
+            {
+              "tag": "input",
+              "class": "ui-input",
+              "attrs": { "type": "text", "placeholder": "Default (2 rows)" }
+            },
+            {
+              "tag": "input",
+              "class": "ui-input ui-input--lg",
+              "attrs": { "type": "text", "placeholder": "Large (2.5 rows)" }
+            }
+          ],
+          "code": "<input class=\"ui-input ui-input--sm\" placeholder=\"Small\">\n<input class=\"ui-input\" placeholder=\"Default\">\n<input class=\"ui-input ui-input--lg\" placeholder=\"Large\">"
+        }
+      ]
+    },
+    {
+      "title": "Variants",
+      "examples": [
+        {
+          "layout": "stack",
+          "items": [
+            {
+              "tag": "input",
+              "class": "ui-input",
+              "attrs": { "type": "text", "placeholder": "Outline (default)" }
+            },
+            {
+              "tag": "input",
+              "class": "ui-input ui-input--filled",
+              "attrs": { "type": "text", "placeholder": "Filled" }
+            },
+            {
+              "tag": "input",
+              "class": "ui-input ui-input--ghost",
+              "attrs": { "type": "text", "placeholder": "Ghost" }
+            }
+          ],
+          "code": "<input class=\"ui-input\" placeholder=\"Outline\">\n<input class=\"ui-input ui-input--filled\" placeholder=\"Filled\">\n<input class=\"ui-input ui-input--ghost\" placeholder=\"Ghost\">"
+        }
+      ]
+    },
+    {
+      "title": "States",
+      "examples": [
+        {
+          "layout": "stack",
+          "items": [
+            {
+              "tag": "input",
+              "class": "ui-input",
+              "attrs": { "type": "text", "placeholder": "Default" }
+            },
+            {
+              "tag": "input",
+              "class": "ui-input ui-input--error",
+              "attrs": { "type": "text", "value": "Invalid input" }
+            },
+            {
+              "tag": "input",
+              "class": "ui-input ui-input--success",
+              "attrs": { "type": "text", "value": "Valid input" }
+            },
+            {
+              "tag": "input",
+              "class": "ui-input",
+              "attrs": { "type": "text", "placeholder": "Disabled", "disabled": "" }
+            },
+            {
+              "tag": "input",
+              "class": "ui-input",
+              "attrs": { "type": "text", "value": "Read only", "readonly": "" }
+            }
+          ],
+          "code": "<input class=\"ui-input\" placeholder=\"Default\">\n<input class=\"ui-input ui-input--error\" value=\"Invalid\">\n<input class=\"ui-input ui-input--success\" value=\"Valid\">\n<input class=\"ui-input\" disabled placeholder=\"Disabled\">\n<input class=\"ui-input\" readonly value=\"Read only\">"
+        }
+      ]
+    },
+    {
+      "title": "Full Width",
+      "examples": [
+        {
+          "html": "<input class=\"ui-input ui-input--block\" type=\"text\" placeholder=\"Full width input\">"
+        }
+      ]
+    },
+    {
+      "title": "With Prefix Icon",
+      "examples": [
+        {
+          "html": "<div class=\"ui-input-group ui-input-group--has-prefix\"><span class=\"ui-input-group__addon ui-input-group__addon--start\"><svg class=\"ui-icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.3-4.3\"/></svg></span><input class=\"ui-input ui-input--block\" type=\"search\" placeholder=\"Search...\"></div>",
+          "code": "<div class=\"ui-input-group ui-input-group--has-prefix\">\n  <span class=\"ui-input-group__addon ui-input-group__addon--start\">\n    <svg class=\"ui-icon\"><!-- search icon --></svg>\n  </span>\n  <input class=\"ui-input ui-input--block\" type=\"search\" placeholder=\"Search...\">\n</div>"
+        }
+      ]
+    },
+    {
+      "title": "With Suffix Icon",
+      "examples": [
+        {
+          "html": "<div class=\"ui-input-group ui-input-group--has-suffix\"><input class=\"ui-input ui-input--block\" type=\"email\" placeholder=\"Email address\"><span class=\"ui-input-group__addon ui-input-group__addon--end\"><svg class=\"ui-icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><rect width=\"20\" height=\"16\" x=\"2\" y=\"4\" rx=\"2\"/><path d=\"m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7\"/></svg></span></div>",
+          "code": "<div class=\"ui-input-group ui-input-group--has-suffix\">\n  <input class=\"ui-input ui-input--block\" type=\"email\" placeholder=\"Email\">\n  <span class=\"ui-input-group__addon ui-input-group__addon--end\">\n    <svg class=\"ui-icon\"><!-- mail icon --></svg>\n  </span>\n</div>"
+        }
+      ]
+    },
+    {
+      "title": "With Both Addons",
+      "examples": [
+        {
+          "html": "<div class=\"ui-input-group ui-input-group--has-prefix ui-input-group--has-suffix\"><span class=\"ui-input-group__addon ui-input-group__addon--start\"><svg class=\"ui-icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"/><circle cx=\"12\" cy=\"7\" r=\"4\"/></svg></span><input class=\"ui-input ui-input--block\" type=\"text\" placeholder=\"Username\"><span class=\"ui-input-group__addon ui-input-group__addon--end ui-input-group__addon--interactive\"><svg class=\"ui-icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M18 6 6 18\"/><path d=\"m6 6 12 12\"/></svg></span></div>",
+          "code": "<div class=\"ui-input-group ui-input-group--has-prefix ui-input-group--has-suffix\">\n  <span class=\"ui-input-group__addon ui-input-group__addon--start\">...</span>\n  <input class=\"ui-input ui-input--block\" placeholder=\"Username\">\n  <span class=\"ui-input-group__addon ui-input-group__addon--end ui-input-group__addon--interactive\">...</span>\n</div>"
+        }
+      ]
+    }
+  ],
+  "customization": [
+    { "token": "--ui-input-height", "default": "var(--ui-row-2)", "description": "Default height" },
+    {
+      "token": "--ui-input-height-sm",
+      "default": "calc(var(--row) * 1.5)",
+      "description": "Small height"
+    },
+    {
+      "token": "--ui-input-height-lg",
+      "default": "calc(var(--row) * 2.5)",
+      "description": "Large height"
+    },
+    {
+      "token": "--ui-input-padding-x",
+      "default": "var(--ui-space-1)",
+      "description": "Horizontal padding"
+    },
+    {
+      "token": "--ui-input-font-size",
+      "default": "var(--ui-font-size-sm)",
+      "description": "Font size"
+    },
+    {
+      "token": "--ui-input-radius",
+      "default": "var(--ui-radius-md)",
+      "description": "Border radius"
+    },
+    {
+      "token": "--ui-input-bg",
+      "default": "var(--ui-color-bg)",
+      "description": "Background color"
+    },
+    {
+      "token": "--ui-input-border-color",
+      "default": "var(--ui-color-border-strong)",
+      "description": "Border color"
+    },
+    {
+      "token": "--ui-input-border-color-focus",
+      "default": "var(--ui-color-primary)",
+      "description": "Focus border color"
+    },
+    { "token": "--ui-input-text", "default": "var(--ui-color-text)", "description": "Text color" },
+    {
+      "token": "--ui-input-placeholder",
+      "default": "var(--ui-color-text-muted)",
+      "description": "Placeholder color"
+    }
+  ]
+}

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

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

@@ -0,0 +1,46 @@
+@use '../../00-config/tokens/variables' as t;
+
+// @component label
+// @element label
+
+@layer components.tokens {
+  .label {
+    --_font-size: var(--ui-label-font-size, var(--ui-font-size-sm, #{t.$font-size-sm}));
+    --_color: var(--ui-label-color, var(--ui-color-text, #{t.$color-text}));
+    --_required-color: var(--ui-label-required-color, var(--ui-color-danger, #{t.$color-danger}));
+  }
+
+  // @modifier size
+  .label--lg {
+    --_font-size: var(--ui-label-font-size-lg, var(--ui-font-size-md, #{t.$font-size-md}));
+  }
+}
+
+@layer components.styles {
+  .label {
+    display: inline-flex;
+    align-items: baseline;
+    gap: 0;
+
+    font-size: var(--_font-size);
+    font-weight: var(--ui-weight-medium, #{t.$weight-medium});
+    line-height: var(--ui-leading-tight-sm, var(--ui-row-1));
+    color: var(--_color);
+
+    cursor: pointer;
+
+    &[aria-disabled='true'] {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  }
+
+  .label__required {
+    color: var(--_required-color);
+  }
+
+  .label__optional {
+    font-weight: var(--ui-weight-normal, #{t.$weight-normal});
+    color: var(--ui-color-text-muted, #{t.$color-text-muted});
+  }
+}

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

@@ -0,0 +1,27 @@
+{
+  "name": "label",
+  "element": "label",
+  "modifiers": {
+    "size": {
+      "values": ["lg"]
+    }
+  },
+  "cssVars": [
+    {
+      "name": "--ui-label-font-size",
+      "default": "var(--ui-font-size-sm)"
+    },
+    {
+      "name": "--ui-label-color",
+      "default": "var(--ui-color-text)"
+    },
+    {
+      "name": "--ui-label-required-color",
+      "default": "var(--ui-color-danger)"
+    },
+    {
+      "name": "--ui-label-font-size-lg",
+      "default": "var(--ui-font-size-md)"
+    }
+  ]
+}

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

@@ -0,0 +1,73 @@
+{
+  "id": "label",
+  "type": "component",
+  "title": "Label",
+  "description": "Form control labels. Associates text with inputs via htmlFor or wrapping.",
+  "api": "./label.api.json",
+  "sections": [
+    {
+      "title": "Default",
+      "examples": [
+        {
+          "html": "<label class=\"ui-label\" for=\"input1\">Email address</label>",
+          "code": "<label class=\"ui-label\" for=\"input\">Email address</label>"
+        }
+      ]
+    },
+    {
+      "title": "Required",
+      "examples": [
+        {
+          "html": "<label class=\"ui-label\" for=\"input2\">Email address<span class=\"ui-label__required\">*</span></label>",
+          "code": "<label class=\"ui-label\" for=\"input\">\n  Email address\n  <span class=\"ui-label__required\">*</span>\n</label>"
+        }
+      ]
+    },
+    {
+      "title": "Optional",
+      "examples": [
+        {
+          "html": "<label class=\"ui-label\" for=\"input3\">Phone number<span class=\"ui-label__optional\">(optional)</span></label>",
+          "code": "<label class=\"ui-label\" for=\"input\">\n  Phone number\n  <span class=\"ui-label__optional\">(optional)</span>\n</label>"
+        }
+      ]
+    },
+    {
+      "title": "Sizes",
+      "examples": [
+        {
+          "layout": "stack",
+          "html": "<label class=\"ui-label\">Default size</label><label class=\"ui-label ui-label--lg\">Large size</label>",
+          "code": "<label class=\"ui-label\">Default</label>\n<label class=\"ui-label ui-label--lg\">Large</label>"
+        }
+      ]
+    },
+    {
+      "title": "Disabled",
+      "examples": [
+        {
+          "html": "<label class=\"ui-label\" aria-disabled=\"true\">Disabled label</label>",
+          "code": "<label class=\"ui-label\" aria-disabled=\"true\">Disabled</label>"
+        }
+      ]
+    }
+  ],
+  "customization": [
+    {
+      "token": "--ui-label-font-size",
+      "default": "var(--ui-font-size-sm)",
+      "description": "Default font size"
+    },
+    {
+      "token": "--ui-label-font-size-lg",
+      "default": "var(--ui-font-size-md)",
+      "description": "Large font size"
+    },
+    { "token": "--ui-label-color", "default": "var(--ui-color-text)", "description": "Text color" },
+    {
+      "token": "--ui-label-required-color",
+      "default": "var(--ui-color-danger)",
+      "description": "Required indicator color"
+    }
+  ]
+}

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

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

@@ -0,0 +1,73 @@
+@use '../../00-config/tokens/variables' as t;
+
+// @component link
+// @element a
+
+@layer components.tokens {
+  .link {
+    --_color: var(--ui-link-color, var(--ui-color-primary));
+    --_color-hover: var(--ui-link-color-hover, var(--ui-color-primary-hover, color-mix(in srgb, var(--_color) 85%, black)));
+    --_color-visited: var(--ui-link-color-visited, var(--_color));
+    --_decoration: var(--ui-link-decoration, underline);
+    --_decoration-hover: var(--ui-link-decoration-hover, underline);
+  }
+
+  // @modifier variant
+  .link--muted {
+    --_color: var(--ui-link-color-muted, var(--ui-color-text-muted));
+    --_color-hover: var(--ui-link-color-muted-hover, var(--ui-color-text));
+  }
+
+  .link--subtle {
+    --_decoration: none;
+    --_decoration-hover: underline;
+  }
+}
+
+@layer components.styles {
+  .link {
+    text-decoration: var(--_decoration);
+    color: var(--_color);
+
+    cursor: pointer;
+
+    transition: color var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease);
+    text-underline-offset: calc(#{t.$unit} / 4);
+
+    &:hover {
+      text-decoration: var(--_decoration-hover);
+      color: var(--_color-hover);
+    }
+
+    &:focus-visible {
+      border-radius: calc(#{t.$unit} / 4);
+      outline: 2px solid var(--ui-color-focus, var(--ui-color-primary));
+      outline-offset: calc(#{t.$unit} / 4);
+    }
+
+    &:visited {
+      color: var(--_color-visited);
+    }
+  }
+
+  // Disabled link
+  .link--disabled,
+  .link[aria-disabled="true"] {
+    color: var(--ui-color-text-muted);
+
+    opacity: 0.6;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  // External link indicator
+  .link--external::after {
+
+    content: "\2197"; // ↗
+    display: inline-block;
+
+    margin-inline-start: calc(#{t.$unit} / 4);
+
+    font-size: 0.75em;
+  }
+}

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

@@ -0,0 +1,39 @@
+{
+  "name": "link",
+  "element": "a",
+  "modifiers": {
+    "variant": {
+      "values": ["muted", "subtle"]
+    }
+  },
+  "cssVars": [
+    {
+      "name": "--ui-link-color",
+      "default": "var(--ui-color-primary)"
+    },
+    {
+      "name": "--ui-link-color-hover",
+      "default": "var(--ui-color-primary-hover)"
+    },
+    {
+      "name": "--ui-link-color-visited",
+      "default": "var(--_color)"
+    },
+    {
+      "name": "--ui-link-decoration",
+      "default": "underline"
+    },
+    {
+      "name": "--ui-link-decoration-hover",
+      "default": "underline"
+    },
+    {
+      "name": "--ui-link-color-muted",
+      "default": "var(--ui-color-text-muted)"
+    },
+    {
+      "name": "--ui-link-color-muted-hover",
+      "default": "var(--ui-color-text)"
+    }
+  ]
+}

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

@@ -0,0 +1,104 @@
+{
+  "id": "link",
+  "type": "component",
+  "title": "Link",
+  "description": "Styled anchor element for text links with consistent hover and focus states.",
+  "api": "./link.api.json",
+  "sections": [
+    {
+      "title": "Default",
+      "examples": [
+        {
+          "html": "<a href=\"#\" class=\"ui-link\">Default link</a>",
+          "code": "<a href=\"#\" class=\"ui-link\">Default link</a>"
+        }
+      ]
+    },
+    {
+      "title": "Muted Variant",
+      "description": "For secondary or less prominent links",
+      "api": "./link.api.json",
+      "examples": [
+        {
+          "html": "<a href=\"#\" class=\"ui-link ui-link--muted\">Muted link</a>",
+          "code": "<a href=\"#\" class=\"ui-link ui-link--muted\">Muted link</a>"
+        }
+      ]
+    },
+    {
+      "title": "Subtle Variant",
+      "description": "No underline by default, shows on hover",
+      "api": "./link.api.json",
+      "examples": [
+        {
+          "html": "<a href=\"#\" class=\"ui-link ui-link--subtle\">Subtle link</a>",
+          "code": "<a href=\"#\" class=\"ui-link ui-link--subtle\">Subtle link</a>"
+        }
+      ]
+    },
+    {
+      "title": "External Link",
+      "description": "Adds arrow indicator for external links",
+      "api": "./link.api.json",
+      "examples": [
+        {
+          "html": "<a href=\"#\" class=\"ui-link ui-link--external\">External link</a>",
+          "code": "<a href=\"#\" class=\"ui-link ui-link--external\">External link</a>"
+        }
+      ]
+    },
+    {
+      "title": "Disabled",
+      "examples": [
+        {
+          "html": "<a href=\"#\" class=\"ui-link ui-link--disabled\" aria-disabled=\"true\">Disabled link</a>",
+          "code": "<a href=\"#\" class=\"ui-link ui-link--disabled\" aria-disabled=\"true\">\n  Disabled link\n</a>"
+        }
+      ]
+    },
+    {
+      "title": "In Context",
+      "description": "Links inherit text size from context",
+      "api": "./link.api.json",
+      "examples": [
+        {
+          "html": "<p style=\"font-size: var(--ui-size-sm);\">Read our <a href=\"#\" class=\"ui-link\">privacy policy</a> for more information.</p>",
+          "code": "<p>\n  Read our <a href=\"#\" class=\"ui-link\">privacy policy</a>\n  for more information.\n</p>"
+        }
+      ]
+    }
+  ],
+  "customization": [
+    {
+      "token": "--ui-link-color",
+      "default": "var(--ui-color-primary)",
+      "description": "Default link color"
+    },
+    {
+      "token": "--ui-link-color-hover",
+      "default": "var(--ui-color-primary-hover)",
+      "description": "Hover color"
+    },
+    {
+      "token": "--ui-link-color-visited",
+      "default": "var(--ui-link-color)",
+      "description": "Visited link color"
+    },
+    { "token": "--ui-link-decoration", "default": "underline", "description": "Text decoration" },
+    {
+      "token": "--ui-link-decoration-hover",
+      "default": "underline",
+      "description": "Hover text decoration"
+    },
+    {
+      "token": "--ui-link-color-muted",
+      "default": "var(--ui-color-text-muted)",
+      "description": "Muted variant color"
+    },
+    {
+      "token": "--ui-link-color-muted-hover",
+      "default": "var(--ui-color-text)",
+      "description": "Muted variant hover color"
+    }
+  ]
+}