@teseor/css 1.7.0 → 1.9.0

package/src/{04-components → components}/forms/form-helper/index.scss

@@ -1,12 +1,18 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
+// @component form-helper
+// @element div
 
 // Form Helper - helper text for form fields
 // Displays muted text below form controls
 
 @layer components.tokens {
   .form-helper {
+    --_leading-tight-sm: var(--ui-leading-tight-sm, var(--ui-row-1));
+    // @desc Text color
     --_color: var(--ui-form-helper-color, var(--ui-color-text-muted));
+    // @desc Overall size
     --_size: var(--ui-form-helper-size, var(--ui-font-size-sm, #{t.$font-size-sm}));
+    // @desc Gap between children
     --_gap: var(--ui-form-helper-gap, 0);
   }
 }
@@ -18,7 +24,7 @@
     margin-block-start: var(--_gap);
 
     font-size: var(--_size);
-    line-height: var(--ui-leading-tight-sm, var(--ui-row-1));
+    line-height: var(--_leading-tight-sm);
     color: var(--_color);
   }
 }

package/src/{04-components → components}/forms/input/index.scss

@@ -1,35 +1,61 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 
 // @component input
 // @element input
+// @related input-group
 
 @layer components.tokens {
   .input {
+    --_border-width-sm: var(--ui-border-width-sm, #{t.$border-width-sm});
+    --_duration-fast: var(--ui-duration-fast, #{t.$duration-fast});
+    --_ease-default: var(--ui-ease-default, ease);
+    --_color-border-strong: var(--ui-color-border-strong, #{t.$color-border-strong});
+    --_border-width-md: var(--ui-border-width-md, #{t.$border-width-md});
+    --_color-focus: var(--ui-color-focus, #{t.$color-focus});
+    --_opacity-disabled: var(--ui-opacity-disabled, #{t.$opacity-disabled});
+    --_color-bg-subtle: var(--ui-color-bg-subtle, #{t.$color-bg-subtle});
+    --_space-half: var(--ui-space-half, #{t.$space-0});
+    --_color-text-muted: var(--ui-color-text-muted, #{t.$color-text-muted});
+    // @desc Overall height
     --_height: var(--ui-input-height, var(--ui-row-2, #{t.$row-2}));
+    // @desc Horizontal padding
     --_padding-x: var(--ui-input-padding-x, var(--ui-space-1, #{t.$space-1}));
+    // @desc Font size
     --_font-size: var(--ui-input-font-size, var(--ui-font-size-sm, #{t.$font-size-sm}));
+    // @desc Corner radius
     --_radius: var(--ui-input-radius, var(--ui-radius-md, #{t.$radius-md}));
+    // @desc Background color
     --_bg: var(--ui-input-bg, var(--ui-color-bg, #{t.$color-bg}));
+    // @desc Border color
     --_border-color: var(--ui-input-border-color, var(--ui-color-border-strong, #{t.$color-border-strong}));
+    // @desc Border color focus
     --_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}));
+    // @desc Text color
+    --_color: var(--ui-input-color, var(--ui-color-text, #{t.$color-text}));
+    // @desc Placeholder
     --_placeholder: var(--ui-input-placeholder, var(--ui-color-text-muted, #{t.$color-text-muted}));
   }
 
   // @modifier size
   .input--sm {
+    // @desc Overall height at small size
     --_height: var(--ui-input-height-sm, calc(#{t.$row} * 1.5));
+    // @desc Font size at small size
     --_font-size: var(--ui-input-font-size-sm, var(--ui-font-size-xs, #{t.$font-size-xs}));
   }
 
   .input--lg {
+    // @desc Overall height at large size
     --_height: var(--ui-input-height-lg, calc(#{t.$row} * 2.5));
+    // @desc Horizontal padding at large size
     --_padding-x: var(--ui-input-padding-x-lg, var(--ui-space-2, #{t.$space-2}));
+    // @desc Font size at large size
     --_font-size: var(--ui-input-font-size-lg, var(--ui-font-size-md, #{t.$font-size-md}));
   }
 
   // @modifier variant
   .input--filled {
+    // @desc Filled bg
     --_bg: var(--ui-input-filled-bg, var(--ui-color-bg-muted, #{t.$color-bg-muted}));
     --_border-color: transparent;
   }
@@ -41,12 +67,16 @@
 
   // @modifier state
   .input--error {
+    // @desc Error border
     --_border-color: var(--ui-input-error-border, var(--ui-color-danger, #{t.$color-danger}));
+    // @desc Error border
     --_border-color-focus: var(--ui-input-error-border, var(--ui-color-danger, #{t.$color-danger}));
   }
 
   .input--success {
+    // @desc Success border
     --_border-color: var(--ui-input-success-border, var(--ui-color-success, #{t.$color-success}));
+    // @desc Success border
     --_border-color-focus: var(--ui-input-success-border, var(--ui-color-success, #{t.$color-success}));
   }
 }
@@ -62,42 +92,45 @@
     font-family: inherit;
     font-size: var(--_font-size);
     line-height: 1;
-    color: var(--_text);
+    color: var(--_color);
 
     background: var(--_bg);
-    border: var(--ui-border-width-sm, #{t.$border-width-sm}) solid var(--_border-color);
+    border: var(--_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);
+      border-color var(--_duration-fast) var(--_ease-default),
+      box-shadow var(--_duration-fast) var(--_ease-default);
 
     &::placeholder {
       color: var(--_placeholder);
     }
 
-    &:hover:not(:disabled, :focus) {
-      border-color: var(--ui-color-border-strong, #{t.$color-border-strong});
+    &:hover:not(:disabled, :focus-visible) {
+      border-color: var(--_color-border-strong);
     }
 
-    &:focus,
+    &:focus-visible,
     &--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});
+      outline: var(--_border-width-md) solid transparent;
+      outline-offset: var(--_border-width-sm);
+
+      box-shadow: 0 0 0 var(--_border-width-md) var(--_color-focus);
     }
 
     &:disabled,
     &--disabled {
-      opacity: 0.5;
+      opacity: var(--_opacity-disabled);
       cursor: not-allowed;
     }
 
     &:read-only {
-      background: var(--ui-color-bg-subtle, #{t.$color-bg-subtle});
+      background: var(--_color-bg-subtle);
     }
 
     // Full width
+  // @modifier boolean block
     &--block {
       inline-size: 100%;
     }
@@ -115,12 +148,12 @@
 
     // With prefix
     &--has-prefix .input {
-      padding-inline-start: calc(var(--_height) + var(--ui-space-half, #{t.$space-0}));
+      padding-inline-start: calc(var(--_height) + var(--_space-half));
     }
 
     // With suffix
     &--has-suffix .input {
-      padding-inline-end: calc(var(--_height) + var(--ui-space-half, #{t.$space-0}));
+      padding-inline-end: calc(var(--_height) + var(--_space-half));
     }
   }
 
@@ -133,7 +166,7 @@
 
     inline-size: var(--_height, #{t.$row-2});
 
-    color: var(--ui-color-text-muted, #{t.$color-text-muted});
+    color: var(--_color-text-muted);
 
     pointer-events: none;
 

package/src/components/forms/input/input.api.json

@@ -0,0 +1,114 @@
+{
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
+  "name": "input",
+  "element": "input",
+  "modifiers": {
+    "size": {
+      "values": ["sm", "lg"]
+    },
+    "variant": {
+      "values": ["filled", "ghost"]
+    },
+    "state": {
+      "values": ["error", "success"]
+    },
+    "block": {
+      "type": "boolean"
+    }
+  },
+  "relatedComponents": [
+    {
+      "name": "input-group",
+      "elements": {
+        "addon": {}
+      }
+    }
+  ],
+  "cssVars": [
+    {
+      "name": "--ui-input-height",
+      "default": "var(--ui-row-2)",
+      "description": "Overall height"
+    },
+    {
+      "name": "--ui-input-padding-x",
+      "default": "var(--ui-space-1)",
+      "description": "Horizontal padding"
+    },
+    {
+      "name": "--ui-input-font-size",
+      "default": "var(--ui-font-size-sm)",
+      "description": "Font size"
+    },
+    {
+      "name": "--ui-input-radius",
+      "default": "var(--ui-radius-md)",
+      "description": "Corner radius"
+    },
+    {
+      "name": "--ui-input-bg",
+      "default": "var(--ui-color-bg)",
+      "description": "Background color"
+    },
+    {
+      "name": "--ui-input-border-color",
+      "default": "var(--ui-color-border-strong)",
+      "description": "Border color"
+    },
+    {
+      "name": "--ui-input-border-color-focus",
+      "default": "var(--ui-color-primary)",
+      "description": "Border color focus"
+    },
+    {
+      "name": "--ui-input-color",
+      "default": "var(--ui-color-text)",
+      "description": "Text color"
+    },
+    {
+      "name": "--ui-input-placeholder",
+      "default": "var(--ui-color-text-muted)",
+      "description": "Placeholder"
+    },
+    {
+      "name": "--ui-input-height-sm",
+      "default": "calc(var(--ui-row) * 1.5)",
+      "description": "Overall height at small size"
+    },
+    {
+      "name": "--ui-input-font-size-sm",
+      "default": "var(--ui-font-size-xs)",
+      "description": "Font size at small size"
+    },
+    {
+      "name": "--ui-input-height-lg",
+      "default": "calc(var(--ui-row) * 2.5)",
+      "description": "Overall height at large size"
+    },
+    {
+      "name": "--ui-input-padding-x-lg",
+      "default": "var(--ui-space-2)",
+      "description": "Horizontal padding at large size"
+    },
+    {
+      "name": "--ui-input-font-size-lg",
+      "default": "var(--ui-font-size-md)",
+      "description": "Font size at large size"
+    },
+    {
+      "name": "--ui-input-filled-bg",
+      "default": "var(--ui-color-bg-muted)",
+      "description": "Filled bg"
+    },
+    {
+      "name": "--ui-input-error-border",
+      "default": "var(--ui-color-danger)",
+      "description": "Error border"
+    },
+    {
+      "name": "--ui-input-success-border",
+      "default": "var(--ui-color-success)",
+      "description": "Success border"
+    }
+  ]
+}

package/src/{04-components → components}/forms/input/input.docs.json

@@ -9,7 +9,13 @@
       "title": "Default",
       "examples": [
         {
-          "html": "<input class=\"ui-input\" type=\"text\" placeholder=\"Enter text...\">"
+          "items": [
+            {
+              "tag": "input",
+              "class": "ui-input",
+              "attrs": { "type": "text", "placeholder": "Enter text..." }
+            }
+          ]
         }
       ]
     },
@@ -17,7 +23,7 @@
       "title": "Sizes",
       "examples": [
         {
-          "layout": "stack",
+          "layout": "column",
           "items": [
             {
               "tag": "input",
@@ -43,7 +49,7 @@
       "title": "Variants",
       "examples": [
         {
-          "layout": "stack",
+          "layout": "column",
           "items": [
             {
               "tag": "input",
@@ -69,7 +75,7 @@
       "title": "States",
       "examples": [
         {
-          "layout": "stack",
+          "layout": "column",
           "items": [
             {
               "tag": "input",
@@ -105,7 +111,13 @@
       "title": "Full Width",
       "examples": [
         {
-          "html": "<input class=\"ui-input ui-input--block\" type=\"text\" placeholder=\"Full width input\">"
+          "items": [
+            {
+              "tag": "input",
+              "class": "ui-input ui-input--block",
+              "attrs": { "type": "text", "placeholder": "Full width input" }
+            }
+          ]
         }
       ]
     },
@@ -113,7 +125,34 @@
       "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>",
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-input-group ui-input-group--has-prefix",
+              "children": [
+                {
+                  "tag": "span",
+                  "class": "ui-input-group__addon ui-input-group__addon--start",
+                  "children": [
+                    {
+                      "tag": "svg",
+                      "class": "ui-icon",
+                      "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 24 24" },
+                      "children": [
+                        { "tag": "circle", "attrs": { "cx": "11", "cy": "11", "r": "8" } },
+                        { "tag": "path", "attrs": { "d": "m21 21-4.3-4.3" } }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "tag": "input",
+                  "class": "ui-input ui-input--block",
+                  "attrs": { "type": "search", "placeholder": "Search..." }
+                }
+              ]
+            }
+          ],
           "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>"
         }
       ]
@@ -122,7 +161,40 @@
       "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>",
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-input-group ui-input-group--has-suffix",
+              "children": [
+                {
+                  "tag": "input",
+                  "class": "ui-input ui-input--block",
+                  "attrs": { "type": "email", "placeholder": "Email address" }
+                },
+                {
+                  "tag": "span",
+                  "class": "ui-input-group__addon ui-input-group__addon--end",
+                  "children": [
+                    {
+                      "tag": "svg",
+                      "class": "ui-icon",
+                      "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 24 24" },
+                      "children": [
+                        {
+                          "tag": "rect",
+                          "attrs": { "width": "20", "height": "16", "x": "2", "y": "4", "rx": "2" }
+                        },
+                        {
+                          "tag": "path",
+                          "attrs": { "d": "m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" }
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
           "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>"
         }
       ]
@@ -131,7 +203,52 @@
       "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>",
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-input-group ui-input-group--has-prefix ui-input-group--has-suffix",
+              "children": [
+                {
+                  "tag": "span",
+                  "class": "ui-input-group__addon ui-input-group__addon--start",
+                  "children": [
+                    {
+                      "tag": "svg",
+                      "class": "ui-icon",
+                      "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 24 24" },
+                      "children": [
+                        {
+                          "tag": "path",
+                          "attrs": { "d": "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" }
+                        },
+                        { "tag": "circle", "attrs": { "cx": "12", "cy": "7", "r": "4" } }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "tag": "input",
+                  "class": "ui-input ui-input--block",
+                  "attrs": { "type": "text", "placeholder": "Username" }
+                },
+                {
+                  "tag": "span",
+                  "class": "ui-input-group__addon ui-input-group__addon--end ui-input-group__addon--interactive",
+                  "children": [
+                    {
+                      "tag": "svg",
+                      "class": "ui-icon",
+                      "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 24 24" },
+                      "children": [
+                        { "tag": "path", "attrs": { "d": "M18 6 6 18" } },
+                        { "tag": "path", "attrs": { "d": "m6 6 12 12" } }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
           "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>"
         }
       ]
@@ -141,12 +258,12 @@
     { "token": "--ui-input-height", "default": "var(--ui-row-2)", "description": "Default height" },
     {
       "token": "--ui-input-height-sm",
-      "default": "calc(var(--row) * 1.5)",
+      "default": "calc(var(--ui-row) * 1.5)",
       "description": "Small height"
     },
     {
       "token": "--ui-input-height-lg",
-      "default": "calc(var(--row) * 2.5)",
+      "default": "calc(var(--ui-row) * 2.5)",
       "description": "Large height"
     },
     {
@@ -179,7 +296,7 @@
       "default": "var(--ui-color-primary)",
       "description": "Focus border color"
     },
-    { "token": "--ui-input-text", "default": "var(--ui-color-text)", "description": "Text color" },
+    { "token": "--ui-input-color", "default": "var(--ui-color-text)", "description": "Text color" },
     {
       "token": "--ui-input-placeholder",
       "default": "var(--ui-color-text-muted)",

package/src/{04-components → components}/forms/label/index.scss

@@ -1,17 +1,26 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 
 // @component label
 // @element label
 
 @layer components.tokens {
   .label {
+    --_weight-medium: var(--ui-weight-medium, #{t.$weight-medium});
+    --_leading-tight-sm: var(--ui-leading-tight-sm, var(--ui-row-1));
+    --_opacity-disabled: var(--ui-opacity-disabled, #{t.$opacity-disabled});
+    --_weight-normal: var(--ui-weight-normal, #{t.$weight-normal});
+    --_color-text-muted: var(--ui-color-text-muted, #{t.$color-text-muted});
+    // @desc Font size
     --_font-size: var(--ui-label-font-size, var(--ui-font-size-sm, #{t.$font-size-sm}));
+    // @desc Text color
     --_color: var(--ui-label-color, var(--ui-color-text, #{t.$color-text}));
+    // @desc Required color
     --_required-color: var(--ui-label-required-color, var(--ui-color-danger, #{t.$color-danger}));
   }
 
   // @modifier size
   .label--lg {
+    // @desc Font size at large size
     --_font-size: var(--ui-label-font-size-lg, var(--ui-font-size-md, #{t.$font-size-md}));
   }
 }
@@ -23,14 +32,14 @@
     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));
+    font-weight: var(--_weight-medium);
+    line-height: var(--_leading-tight-sm);
     color: var(--_color);
 
     cursor: pointer;
 
     &[aria-disabled='true'] {
-      opacity: 0.5;
+      opacity: var(--_opacity-disabled);
       cursor: not-allowed;
     }
   }
@@ -40,7 +49,7 @@
   }
 
   .label__optional {
-    font-weight: var(--ui-weight-normal, #{t.$weight-normal});
-    color: var(--ui-color-text-muted, #{t.$color-text-muted});
+    font-weight: var(--_weight-normal);
+    color: var(--_color-text-muted);
   }
 }

package/src/components/forms/label/label.api.json

@@ -0,0 +1,36 @@
+{
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
+  "name": "label",
+  "element": "label",
+  "modifiers": {
+    "size": {
+      "values": ["lg"]
+    }
+  },
+  "elements": {
+    "required": {},
+    "optional": {}
+  },
+  "cssVars": [
+    {
+      "name": "--ui-label-font-size",
+      "default": "var(--ui-font-size-sm)",
+      "description": "Font size"
+    },
+    {
+      "name": "--ui-label-color",
+      "default": "var(--ui-color-text)",
+      "description": "Text color"
+    },
+    {
+      "name": "--ui-label-required-color",
+      "default": "var(--ui-color-danger)",
+      "description": "Required color"
+    },
+    {
+      "name": "--ui-label-font-size-lg",
+      "default": "var(--ui-font-size-md)",
+      "description": "Font size at large size"
+    }
+  ]
+}