@teseor/css 1.0.0

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

@@ -0,0 +1,98 @@
+{
+  "id": "heading",
+  "type": "component",
+  "title": "Heading",
+  "description": "Semantic headings with visual size control. Use semantic level (h1-h6) for structure, size modifier for visual styling.",
+  "api": "./heading.api.json",
+  "sections": [
+    {
+      "title": "Sizes",
+      "examples": [
+        {
+          "layout": "stack",
+          "html": "<h1 class=\"ui-heading ui-heading--4xl\">Heading 4xl</h1><h2 class=\"ui-heading ui-heading--3xl\">Heading 3xl</h2><h3 class=\"ui-heading ui-heading--2xl\">Heading 2xl</h3><h4 class=\"ui-heading ui-heading--xl\">Heading xl</h4><h5 class=\"ui-heading ui-heading--lg\">Heading lg</h5><h6 class=\"ui-heading ui-heading--md\">Heading md</h6><p class=\"ui-heading ui-heading--sm\">Heading sm</p>",
+          "code": "<h1 class=\"ui-heading ui-heading--4xl\">4xl</h1>\n<h2 class=\"ui-heading ui-heading--3xl\">3xl</h2>\n<h3 class=\"ui-heading ui-heading--2xl\">2xl</h3>\n<h4 class=\"ui-heading ui-heading--xl\">xl</h4>\n<h5 class=\"ui-heading ui-heading--lg\">lg</h5>\n<h6 class=\"ui-heading ui-heading--md\">md</h6>\n<p class=\"ui-heading ui-heading--sm\">sm</p>"
+        }
+      ]
+    },
+    {
+      "title": "Decoupled Sizing",
+      "description": "Use any size with any semantic level.",
+      "examples": [
+        {
+          "layout": "stack",
+          "html": "<h2 class=\"ui-heading ui-heading--3xl\">h2 styled as 3xl</h2><h1 class=\"ui-heading ui-heading--lg\">h1 styled as lg</h1>",
+          "code": "<h2 class=\"ui-heading ui-heading--3xl\">h2 as 3xl</h2>\n<h1 class=\"ui-heading ui-heading--lg\">h1 as lg</h1>"
+        }
+      ]
+    },
+    {
+      "title": "With Text Utilities",
+      "description": "Combine with text utilities for color and other styles.",
+      "examples": [
+        {
+          "layout": "stack",
+          "html": "<h2 class=\"ui-heading ui-heading--2xl ui-text-muted\">Muted heading</h2><h2 class=\"ui-heading ui-heading--2xl ui-text-primary\">Primary heading</h2>",
+          "code": "<h2 class=\"ui-heading ui-text-muted\">Muted</h2>\n<h2 class=\"ui-heading ui-text-primary\">Primary</h2>"
+        }
+      ]
+    }
+  ],
+  "customization": [
+    {
+      "token": "--ui-heading-font-size",
+      "default": "var(--ui-font-size-xl)",
+      "description": "Default font size"
+    },
+    {
+      "token": "--ui-heading-line-height",
+      "default": "var(--ui-leading-xl)",
+      "description": "Default line height"
+    },
+    {
+      "token": "--ui-heading-weight",
+      "default": "var(--ui-weight-bold)",
+      "description": "Font weight"
+    },
+    {
+      "token": "--ui-heading-color",
+      "default": "var(--ui-color-text)",
+      "description": "Text color"
+    },
+    {
+      "token": "--ui-heading-font-size-4xl",
+      "default": "var(--ui-font-size-4xl)",
+      "description": "4xl size"
+    },
+    {
+      "token": "--ui-heading-font-size-3xl",
+      "default": "var(--ui-font-size-3xl)",
+      "description": "3xl size"
+    },
+    {
+      "token": "--ui-heading-font-size-2xl",
+      "default": "var(--ui-font-size-2xl)",
+      "description": "2xl size"
+    },
+    {
+      "token": "--ui-heading-font-size-xl",
+      "default": "var(--ui-font-size-xl)",
+      "description": "xl size"
+    },
+    {
+      "token": "--ui-heading-font-size-lg",
+      "default": "var(--ui-font-size-lg)",
+      "description": "lg size"
+    },
+    {
+      "token": "--ui-heading-font-size-md",
+      "default": "var(--ui-font-size-md)",
+      "description": "md size"
+    },
+    {
+      "token": "--ui-heading-font-size-sm",
+      "default": "var(--ui-font-size-sm)",
+      "description": "sm size"
+    }
+  ]
+}

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

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

@@ -0,0 +1,61 @@
+@use '../../00-config/tokens/variables' as t;
+
+// @component heading
+// @element h2
+
+@layer components.tokens {
+  .heading {
+    --_font-size: var(--ui-heading-font-size, var(--ui-font-size-xl, #{t.$font-size-xl}));
+    --_line-height: var(--ui-heading-line-height, var(--ui-leading-xl, #{t.$leading-xl}));
+    --_weight: var(--ui-heading-weight, var(--ui-weight-bold, #{t.$weight-bold}));
+    --_color: var(--ui-heading-color, var(--ui-color-text, #{t.$color-text}));
+  }
+
+  // @modifier size
+  .heading--4xl {
+    --_font-size: var(--ui-heading-font-size-4xl, var(--ui-font-size-4xl, #{t.$font-size-4xl}));
+    --_line-height: var(--ui-heading-line-height-4xl, var(--ui-leading-4xl, #{t.$leading-4xl}));
+  }
+
+  .heading--3xl {
+    --_font-size: var(--ui-heading-font-size-3xl, var(--ui-font-size-3xl, #{t.$font-size-3xl}));
+    --_line-height: var(--ui-heading-line-height-3xl, var(--ui-leading-3xl, #{t.$leading-3xl}));
+  }
+
+  .heading--2xl {
+    --_font-size: var(--ui-heading-font-size-2xl, var(--ui-font-size-2xl, #{t.$font-size-2xl}));
+    --_line-height: var(--ui-heading-line-height-2xl, var(--ui-leading-2xl, #{t.$leading-2xl}));
+  }
+
+  .heading--xl {
+    --_font-size: var(--ui-heading-font-size-xl, var(--ui-font-size-xl, #{t.$font-size-xl}));
+    --_line-height: var(--ui-heading-line-height-xl, var(--ui-leading-xl, #{t.$leading-xl}));
+  }
+
+  .heading--lg {
+    --_font-size: var(--ui-heading-font-size-lg, var(--ui-font-size-lg, #{t.$font-size-lg}));
+    --_line-height: var(--ui-heading-line-height-lg, var(--ui-leading-lg, #{t.$leading-lg}));
+  }
+
+  .heading--md {
+    --_font-size: var(--ui-heading-font-size-md, var(--ui-font-size-md, #{t.$font-size-md}));
+    --_line-height: var(--ui-heading-line-height-md, var(--ui-leading-tight-md, #{t.$leading-tight-md}));
+  }
+
+  .heading--sm {
+    --_font-size: var(--ui-heading-font-size-sm, var(--ui-font-size-sm, #{t.$font-size-sm}));
+    --_line-height: var(--ui-heading-line-height-sm, var(--ui-leading-tight-sm, #{t.$leading-tight-sm}));
+  }
+
+}
+
+@layer components.styles {
+  .heading {
+    margin: 0;
+
+    font-size: var(--_font-size);
+    font-weight: var(--_weight);
+    line-height: var(--_line-height);
+    color: var(--_color);
+  }
+}

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

@@ -0,0 +1,56 @@
+{
+  "name": "icon",
+  "element": "svg",
+  "modifiers": {
+    "size": {
+      "values": ["xs", "sm", "md", "lg", "xl"]
+    },
+    "stroke": {
+      "values": ["stroke-thin", "stroke-thick"]
+    },
+    "filled": {
+      "type": "boolean"
+    },
+    "spin": {
+      "type": "boolean"
+    }
+  },
+  "cssVars": [
+    {
+      "name": "--ui-icon-size",
+      "default": "1em"
+    },
+    {
+      "name": "--ui-icon-stroke",
+      "default": "2"
+    },
+    {
+      "name": "--ui-icon-size-xs",
+      "default": "calc(#{t.$unit} * 2"
+    },
+    {
+      "name": "--ui-icon-size-sm",
+      "default": "calc(#{t.$unit} * 3"
+    },
+    {
+      "name": "--ui-icon-size-md",
+      "default": "calc(#{t.$unit} * 4"
+    },
+    {
+      "name": "--ui-icon-size-lg",
+      "default": "calc(#{t.$unit} * 5"
+    },
+    {
+      "name": "--ui-icon-size-xl",
+      "default": "calc(#{t.$unit} * 6"
+    },
+    {
+      "name": "--ui-icon-stroke-thin",
+      "default": "1"
+    },
+    {
+      "name": "--ui-icon-stroke-thick",
+      "default": "2.5"
+    }
+  ]
+}

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

@@ -0,0 +1,155 @@
+{
+  "id": "icon",
+  "type": "component",
+  "title": "Icon",
+  "description": "CSS classes for sizing and styling SVG icons. Works with any stroke-based icon set like Lucide, Heroicons, or Feather.",
+  "api": "./icon.api.json",
+  "sections": [
+    {
+      "title": "Basic Usage",
+      "description": "Add the `ui-icon` class to any SVG. Icons inherit color from their parent via `currentColor`.",
+      "api": "./icon.api.json",
+      "examples": [
+        {
+          "html": "<svg class=\"ui-icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M12 5v14M5 12h14\"/></svg>"
+        }
+      ]
+    },
+    {
+      "title": "With Lucide Icons",
+      "description": "Recommended icon set. Copy SVG from lucide.dev and add the ui-icon class.",
+      "api": "./icon.api.json",
+      "examples": [
+        {
+          "html": "<div class=\"ui-cluster ui-cluster--gap-2\"><svg class=\"ui-icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"/><polyline points=\"9 22 9 12 15 12 15 22\"/></svg><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><svg class=\"ui-icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9\"/><path d=\"M10.3 21a1.94 1.94 0 0 0 3.4 0\"/></svg><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></div>"
+        }
+      ]
+    },
+    {
+      "title": "Sizes",
+      "data": {
+        "sizes": [
+          { "mod": "xs", "label": "2u" },
+          { "mod": "sm", "label": "3u" },
+          { "mod": "md", "label": "4u" },
+          { "mod": "lg", "label": "5u" },
+          { "mod": "xl", "label": "6u" }
+        ]
+      },
+      "examples": [
+        {
+          "html": "<div class=\"ui-cluster ui-cluster--gap-2\" style=\"align-items: center\">{% for s in sizes %}<div class=\"ui-stack ui-stack--gap-half\" style=\"align-items: center\"><svg class=\"ui-icon ui-icon--{{ s.mod }}\" 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><small>{{ s.label }}</small></div>{% endfor %}</div>"
+        }
+      ]
+    },
+    {
+      "title": "Stroke Width",
+      "description": "Adjust stroke thickness for visual weight.",
+      "api": "./icon.api.json",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "svg",
+              "class": "ui-icon ui-icon--lg ui-icon--stroke-thin",
+              "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 24 24" },
+              "innerHTML": "<circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.3-4.3\"/>"
+            },
+            {
+              "tag": "svg",
+              "class": "ui-icon ui-icon--lg",
+              "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 24 24" },
+              "innerHTML": "<circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.3-4.3\"/>"
+            },
+            {
+              "tag": "svg",
+              "class": "ui-icon ui-icon--lg ui-icon--stroke-thick",
+              "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 24 24" },
+              "innerHTML": "<circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.3-4.3\"/>"
+            }
+          ],
+          "layout": "cluster"
+        }
+      ]
+    },
+    {
+      "title": "Filled Icons",
+      "description": "For solid icons, use the `--filled` modifier.",
+      "api": "./icon.api.json",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "svg",
+              "class": "ui-icon ui-icon--lg",
+              "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 24 24" },
+              "innerHTML": "<path d=\"M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z\"/>"
+            },
+            {
+              "tag": "svg",
+              "class": "ui-icon ui-icon--lg ui-icon--filled",
+              "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 24 24" },
+              "innerHTML": "<path d=\"M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z\"/>"
+            }
+          ],
+          "layout": "cluster"
+        }
+      ]
+    },
+    {
+      "title": "Spin Animation",
+      "description": "Use `--spin` for loading indicators.",
+      "api": "./icon.api.json",
+      "examples": [
+        {
+          "html": "<svg class=\"ui-icon ui-icon--lg ui-icon--spin\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M21 12a9 9 0 1 1-6.219-8.56\"/></svg>"
+        }
+      ]
+    },
+    {
+      "title": "Color Inheritance",
+      "description": "Icons inherit color from parent text color.",
+      "api": "./icon.api.json",
+      "examples": [
+        {
+          "html": "<div class=\"ui-cluster ui-cluster--gap-2\"><span style=\"color: var(--ui-color-primary)\"><svg class=\"ui-icon ui-icon--lg\" 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><span style=\"color: var(--ui-color-success)\"><svg class=\"ui-icon ui-icon--lg\" 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><span style=\"color: var(--ui-color-danger)\"><svg class=\"ui-icon ui-icon--lg\" 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></div>"
+        }
+      ]
+    }
+  ],
+  "customization": [
+    {
+      "token": "--ui-icon-size",
+      "default": "1em",
+      "description": "Default size (inherits from font)"
+    },
+    {
+      "token": "--ui-icon-size-xs",
+      "default": "calc(var(--unit) * 2)",
+      "description": "Extra small size (16px)"
+    },
+    {
+      "token": "--ui-icon-size-sm",
+      "default": "calc(var(--unit) * 3)",
+      "description": "Small size (24px)"
+    },
+    {
+      "token": "--ui-icon-size-md",
+      "default": "calc(var(--unit) * 4)",
+      "description": "Medium size (32px)"
+    },
+    {
+      "token": "--ui-icon-size-lg",
+      "default": "calc(var(--unit) * 5)",
+      "description": "Large size (40px)"
+    },
+    {
+      "token": "--ui-icon-size-xl",
+      "default": "calc(var(--unit) * 6)",
+      "description": "Extra large size (48px)"
+    },
+    { "token": "--ui-icon-stroke", "default": "2", "description": "Default stroke width" },
+    { "token": "--ui-icon-stroke-thin", "default": "1", "description": "Thin stroke width" },
+    { "token": "--ui-icon-stroke-thick", "default": "2.5", "description": "Thick stroke width" }
+  ]
+}

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

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

@@ -0,0 +1,79 @@
+@use '../../00-config/tokens/variables' as t;
+
+// @component icon
+// @element svg
+
+@layer components.tokens {
+  .icon {
+    --_size: var(--ui-icon-size, 1em);
+    --_stroke: var(--ui-icon-stroke, 2);
+  }
+
+  // @modifier size
+  .icon--xs {
+    --_size: var(--ui-icon-size-xs, calc(#{t.$unit} * 2));
+  }
+
+  .icon--sm {
+    --_size: var(--ui-icon-size-sm, calc(#{t.$unit} * 3));
+  }
+
+  .icon--md {
+    --_size: var(--ui-icon-size-md, calc(#{t.$unit} * 4));
+  }
+
+  .icon--lg {
+    --_size: var(--ui-icon-size-lg, calc(#{t.$unit} * 5));
+  }
+
+  .icon--xl {
+    --_size: var(--ui-icon-size-xl, calc(#{t.$unit} * 6));
+  }
+
+  // @modifier stroke
+  .icon--stroke-thin {
+    --_stroke: var(--ui-icon-stroke-thin, 1);
+  }
+
+  .icon--stroke-thick {
+    --_stroke: var(--ui-icon-stroke-thick, 2.5);
+  }
+
+  // @modifier boolean filled
+  // @modifier boolean spin
+}
+
+@layer components.styles {
+  .icon {
+    display: inline-block;
+    flex-shrink: 0;
+
+    block-size: var(--_size);
+    inline-size: var(--_size);
+
+    vertical-align: middle;
+    color: currentcolor;
+    fill: none;
+    stroke: currentcolor;
+    stroke-width: var(--_stroke);
+    stroke-linecap: round;
+    stroke-linejoin: round;
+
+    // For filled icons
+    &--filled {
+      fill: currentcolor;
+      stroke: none;
+    }
+
+    // Spin animation for loading states
+    &--spin {
+      animation: icon-spin 1s linear infinite;
+    }
+  }
+
+  @keyframes icon-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+}

package/src/04-components/index.scss

@@ -0,0 +1,41 @@
+@forward './accordion/index';
+@forward './alert/index';
+@forward './avatar/index';
+@forward './badge/index';
+@forward './breadcrumb/index';
+@forward './button/index';
+@forward './button-group/index';
+@forward './card/index';
+@forward './checkbox/index';
+@forward './code/index';
+@forward './data-list/index';
+@forward './dialog/index';
+@forward './disclosure/index';
+@forward './divider/index';
+@forward './drawer/index';
+@forward './field/index';
+@forward './form-error/index';
+@forward './form-helper/index';
+@forward './heading/index';
+@forward './icon/index';
+@forward './input/index';
+@forward './label/index';
+@forward './link/index';
+@forward './menu/index';
+@forward './modal/index';
+@forward './overlay/index';
+@forward './pagination/index';
+@forward './popover/index';
+@forward './progress/index';
+@forward './radio/index';
+@forward './select/index';
+@forward './skeleton/index';
+@forward './spinner/index';
+@forward './status/index';
+@forward './table/index';
+@forward './tabs/index';
+@forward './tag/index';
+@forward './textarea/index';
+@forward './toast/index';
+@forward './toggle/index';
+@forward './tooltip/index';

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

@@ -0,0 +1,154 @@
+@use '../../00-config/tokens/variables' as t;
+
+// @component input
+// @element input
+
+@layer components.tokens {
+  .input {
+    --_height: var(--ui-input-height, var(--ui-row-2, #{t.$row-2}));
+    --_padding-x: var(--ui-input-padding-x, var(--ui-space-1, #{t.$space-1}));
+    --_font-size: var(--ui-input-font-size, var(--ui-font-size-sm, #{t.$font-size-sm}));
+    --_radius: var(--ui-input-radius, var(--ui-radius-md, #{t.$radius-md}));
+    --_bg: var(--ui-input-bg, var(--ui-color-bg, #{t.$color-bg}));
+    --_border-color: var(--ui-input-border-color, var(--ui-color-border-strong, #{t.$color-border-strong}));
+    --_border-color-focus: var(--ui-input-border-color-focus, var(--ui-color-primary, #{t.$color-primary}));
+    --_text: var(--ui-input-text, var(--ui-color-text, #{t.$color-text}));
+    --_placeholder: var(--ui-input-placeholder, var(--ui-color-text-muted, #{t.$color-text-muted}));
+  }
+
+  // @modifier size
+  .input--sm {
+    --_height: var(--ui-input-height-sm, calc(#{t.$row} * 1.5));
+    --_font-size: var(--ui-input-font-size-sm, var(--ui-font-size-xs, #{t.$font-size-xs}));
+  }
+
+  .input--lg {
+    --_height: var(--ui-input-height-lg, calc(#{t.$row} * 2.5));
+    --_padding-x: var(--ui-input-padding-x-lg, var(--ui-space-2, #{t.$space-2}));
+    --_font-size: var(--ui-input-font-size-lg, var(--ui-font-size-md, #{t.$font-size-md}));
+  }
+
+  // @modifier variant
+  .input--filled {
+    --_bg: var(--ui-input-filled-bg, var(--ui-color-bg-muted, #{t.$color-bg-muted}));
+    --_border-color: transparent;
+  }
+
+  .input--ghost {
+    --_bg: transparent;
+    --_border-color: transparent;
+  }
+
+  // @modifier state
+  .input--error {
+    --_border-color: var(--ui-input-error-border, var(--ui-color-danger, #{t.$color-danger}));
+    --_border-color-focus: var(--ui-input-error-border, var(--ui-color-danger, #{t.$color-danger}));
+  }
+
+  .input--success {
+    --_border-color: var(--ui-input-success-border, var(--ui-color-success, #{t.$color-success}));
+    --_border-color-focus: var(--ui-input-success-border, var(--ui-color-success, #{t.$color-success}));
+  }
+}
+
+@layer components.styles {
+  .input {
+    display: inline-flex;
+    align-items: center;
+
+    block-size: var(--_height);
+    padding-inline: var(--_padding-x);
+
+    font-family: inherit;
+    font-size: var(--_font-size);
+    line-height: 1;
+    color: var(--_text);
+
+    background: var(--_bg);
+    border: var(--ui-border-width-sm, #{t.$border-width-sm}) solid var(--_border-color);
+    border-radius: var(--_radius);
+
+    transition:
+      border-color var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease),
+      box-shadow var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease);
+
+    &::placeholder {
+      color: var(--_placeholder);
+    }
+
+    &:hover:not(:disabled, :focus) {
+      border-color: var(--ui-color-border-strong, #{t.$color-border-strong});
+    }
+
+    &:focus,
+    &--focus {
+      border-color: var(--_border-color-focus);
+      outline: none;
+      box-shadow: 0 0 0 var(--ui-border-width-md, #{t.$border-width-md}) var(--ui-color-focus, #{t.$color-focus});
+    }
+
+    &:disabled,
+    &--disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    &:read-only {
+      background: var(--ui-color-bg-subtle, #{t.$color-bg-subtle});
+    }
+
+    // Full width
+    &--block {
+      inline-size: 100%;
+    }
+  }
+
+  // Input wrapper for prefix/suffix
+  .input-group {
+    display: inline-flex;
+    align-items: stretch;
+    position: relative;
+
+    .input {
+      flex: 1;
+    }
+
+    // With prefix
+    &--has-prefix .input {
+      padding-inline-start: calc(var(--_height) + var(--ui-space-half, #{t.$space-0}));
+    }
+
+    // With suffix
+    &--has-suffix .input {
+      padding-inline-end: calc(var(--_height) + var(--ui-space-half, #{t.$space-0}));
+    }
+  }
+
+  .input-group__addon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    inset-block: 0;
+
+    inline-size: var(--_height, #{t.$row-2});
+
+    color: var(--ui-color-text-muted, #{t.$color-text-muted});
+
+    pointer-events: none;
+
+    &--start {
+      inset-inline-start: 0;
+    }
+
+    &--end {
+      inset-inline-end: 0;
+    }
+
+    // Interactive addon (buttons)
+    &--interactive {
+      cursor: pointer;
+      pointer-events: auto;
+    }
+  }
+}