@teseor/css 1.6.0 → 1.8.0

package/src/components/forms/password-input/password-input.docs.json

@@ -0,0 +1,276 @@
+{
+  "id": "password-input",
+  "type": "component",
+  "title": "Password Input",
+  "description": "Secure password field with toggle visibility button.",
+  "api": "./password-input.api.json",
+  "sections": [
+    {
+      "title": "Default",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-password-input",
+              "children": [
+                {
+                  "tag": "input",
+                  "class": "ui-password-input__field",
+                  "attrs": { "type": "password", "placeholder": "Enter password" }
+                },
+                {
+                  "tag": "button",
+                  "class": "ui-password-input__toggle",
+                  "attrs": { "type": "button", "aria-label": "Show password" },
+                  "children": [
+                    {
+                      "tag": "svg",
+                      "attrs": { "viewBox": "0 0 24 24" },
+                      "children": [
+                        {
+                          "tag": "path",
+                          "attrs": { "d": "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }
+                        },
+                        { "tag": "circle", "attrs": { "cx": "12", "cy": "12", "r": "3" } }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-password-input\">\n  <input class=\"ui-password-input__field\" type=\"password\" placeholder=\"Enter password\">\n  <button class=\"ui-password-input__toggle\" aria-label=\"Show password\"><svg>...</svg></button>\n</div>"
+        }
+      ]
+    },
+    {
+      "title": "Sizes",
+      "examples": [
+        {
+          "layout": "column",
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-password-input ui-password-input--sm",
+              "children": [
+                {
+                  "tag": "input",
+                  "class": "ui-password-input__field",
+                  "attrs": { "type": "password", "placeholder": "Small" }
+                },
+                {
+                  "tag": "button",
+                  "class": "ui-password-input__toggle",
+                  "attrs": { "type": "button", "aria-label": "Show password" },
+                  "children": [
+                    {
+                      "tag": "svg",
+                      "attrs": { "viewBox": "0 0 24 24" },
+                      "children": [
+                        {
+                          "tag": "path",
+                          "attrs": { "d": "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }
+                        },
+                        { "tag": "circle", "attrs": { "cx": "12", "cy": "12", "r": "3" } }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "tag": "div",
+              "class": "ui-password-input",
+              "children": [
+                {
+                  "tag": "input",
+                  "class": "ui-password-input__field",
+                  "attrs": { "type": "password", "placeholder": "Default" }
+                },
+                {
+                  "tag": "button",
+                  "class": "ui-password-input__toggle",
+                  "attrs": { "type": "button", "aria-label": "Show password" },
+                  "children": [
+                    {
+                      "tag": "svg",
+                      "attrs": { "viewBox": "0 0 24 24" },
+                      "children": [
+                        {
+                          "tag": "path",
+                          "attrs": { "d": "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }
+                        },
+                        { "tag": "circle", "attrs": { "cx": "12", "cy": "12", "r": "3" } }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "tag": "div",
+              "class": "ui-password-input ui-password-input--lg",
+              "children": [
+                {
+                  "tag": "input",
+                  "class": "ui-password-input__field",
+                  "attrs": { "type": "password", "placeholder": "Large" }
+                },
+                {
+                  "tag": "button",
+                  "class": "ui-password-input__toggle",
+                  "attrs": { "type": "button", "aria-label": "Show password" },
+                  "children": [
+                    {
+                      "tag": "svg",
+                      "attrs": { "viewBox": "0 0 24 24" },
+                      "children": [
+                        {
+                          "tag": "path",
+                          "attrs": { "d": "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }
+                        },
+                        { "tag": "circle", "attrs": { "cx": "12", "cy": "12", "r": "3" } }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-password-input ui-password-input--sm\">...</div>\n<div class=\"ui-password-input\">...</div>\n<div class=\"ui-password-input ui-password-input--lg\">...</div>"
+        }
+      ]
+    },
+    {
+      "title": "States",
+      "examples": [
+        {
+          "layout": "column",
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-password-input ui-password-input--error",
+              "children": [
+                {
+                  "tag": "input",
+                  "class": "ui-password-input__field",
+                  "attrs": { "type": "password", "value": "wrongpass" }
+                },
+                {
+                  "tag": "button",
+                  "class": "ui-password-input__toggle",
+                  "attrs": { "type": "button", "aria-label": "Show password" },
+                  "children": [
+                    {
+                      "tag": "svg",
+                      "attrs": { "viewBox": "0 0 24 24" },
+                      "children": [
+                        {
+                          "tag": "path",
+                          "attrs": { "d": "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }
+                        },
+                        { "tag": "circle", "attrs": { "cx": "12", "cy": "12", "r": "3" } }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "tag": "div",
+              "class": "ui-password-input ui-password-input--success",
+              "children": [
+                {
+                  "tag": "input",
+                  "class": "ui-password-input__field",
+                  "attrs": { "type": "password", "value": "correctpass" }
+                },
+                {
+                  "tag": "button",
+                  "class": "ui-password-input__toggle",
+                  "attrs": { "type": "button", "aria-label": "Show password" },
+                  "children": [
+                    {
+                      "tag": "svg",
+                      "attrs": { "viewBox": "0 0 24 24" },
+                      "children": [
+                        {
+                          "tag": "path",
+                          "attrs": { "d": "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }
+                        },
+                        { "tag": "circle", "attrs": { "cx": "12", "cy": "12", "r": "3" } }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "tag": "div",
+              "class": "ui-password-input ui-password-input--disabled",
+              "children": [
+                {
+                  "tag": "input",
+                  "class": "ui-password-input__field",
+                  "attrs": { "type": "password", "placeholder": "Disabled", "disabled": "" }
+                },
+                {
+                  "tag": "button",
+                  "class": "ui-password-input__toggle",
+                  "attrs": { "type": "button", "aria-label": "Show password", "disabled": "" },
+                  "children": [
+                    {
+                      "tag": "svg",
+                      "attrs": { "viewBox": "0 0 24 24" },
+                      "children": [
+                        {
+                          "tag": "path",
+                          "attrs": { "d": "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }
+                        },
+                        { "tag": "circle", "attrs": { "cx": "12", "cy": "12", "r": "3" } }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-password-input ui-password-input--error\">...</div>\n<div class=\"ui-password-input ui-password-input--success\">...</div>\n<div class=\"ui-password-input ui-password-input--disabled\">...</div>"
+        }
+      ]
+    }
+  ],
+  "customization": [
+    {
+      "token": "--ui-password-input-height",
+      "default": "var(--ui-row-2)",
+      "description": "Default height"
+    },
+    {
+      "token": "--ui-password-input-height-sm",
+      "default": "calc(var(--ui-row) * 1.5)",
+      "description": "Small height"
+    },
+    {
+      "token": "--ui-password-input-height-lg",
+      "default": "calc(var(--ui-row) * 2.5)",
+      "description": "Large height"
+    },
+    {
+      "token": "--ui-password-input-bg",
+      "default": "var(--ui-color-bg)",
+      "description": "Background color"
+    },
+    {
+      "token": "--ui-password-input-border-color",
+      "default": "var(--ui-color-border-strong)",
+      "description": "Border color"
+    },
+    {
+      "token": "--ui-password-input-toggle-color",
+      "default": "var(--ui-color-text-muted)",
+      "description": "Toggle button color"
+    }
+  ]
+}

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

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

@@ -1,4 +1,4 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 
 // @component radio
 // @element input
@@ -18,11 +18,16 @@
     --_size: var(--ui-radio-size-lg, calc(#{t.$unit} * 3));
   }
 
-  // @modifier boolean error
+  // @modifier state
   .radio--error {
     --_border-color: var(--ui-radio-error-border, var(--ui-color-danger, #{t.$color-danger}));
     --_border-color-focus: var(--ui-radio-error-border, var(--ui-color-danger, #{t.$color-danger}));
   }
+
+  .radio--success {
+    --_border-color: var(--ui-radio-success-border, var(--ui-color-success, #{t.$color-success}));
+    --_border-color-focus: var(--ui-radio-success-border, var(--ui-color-success, #{t.$color-success}));
+  }
 }
 
 @layer components.styles {
@@ -74,7 +79,9 @@
 
     &:focus-visible {
       border-color: var(--_border-color-focus);
-      outline: none;
+      outline: var(--ui-border-width-md, #{t.$border-width-md}) solid transparent;
+      outline-offset: var(--ui-border-width-sm, #{t.$border-width-sm});
+
       box-shadow: 0 0 0 var(--ui-border-width-md, #{t.$border-width-md}) var(--ui-color-focus, #{t.$color-focus});
     }
 
@@ -89,7 +96,7 @@
     }
 
     &:disabled {
-      opacity: 0.5;
+      opacity: var(--ui-opacity-disabled, 0.5);
       cursor: not-allowed;
     }
   }

package/src/{04-components → components}/forms/radio/radio.api.json

@@ -5,14 +5,14 @@
     "size": {
       "values": ["sm", "lg"]
     },
-    "error": {
-      "type": "boolean"
+    "state": {
+      "values": ["error", "success"]
     }
   },
   "cssVars": [
     {
       "name": "--ui-radio-size",
-      "default": "calc(#{t.$unit} * 2"
+      "default": "calc(var(--ui-unit) * 2"
     },
     {
       "name": "--ui-radio-bg",
@@ -36,11 +36,15 @@
     },
     {
       "name": "--ui-radio-size-lg",
-      "default": "calc(#{t.$unit} * 3"
+      "default": "calc(var(--ui-unit) * 3"
     },
     {
       "name": "--ui-radio-error-border",
       "default": "var(--ui-color-danger)"
+    },
+    {
+      "name": "--ui-radio-success-border",
+      "default": "var(--ui-color-success)"
     }
   ]
 }

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

@@ -9,7 +9,7 @@
       "title": "Default",
       "examples": [
         {
-          "layout": "cluster",
+          "layout": "row",
           "items": [
             { "tag": "input", "class": "ui-radio", "attrs": { "type": "radio", "name": "demo1" } },
             {
@@ -26,7 +26,7 @@
       "title": "Sizes",
       "examples": [
         {
-          "layout": "cluster",
+          "layout": "row",
           "items": [
             {
               "tag": "input",
@@ -52,7 +52,7 @@
       "title": "States",
       "examples": [
         {
-          "layout": "cluster",
+          "layout": "row",
           "items": [
             {
               "tag": "input",
@@ -80,10 +80,10 @@
       ]
     },
     {
-      "title": "Error State",
+      "title": "Validation States",
       "examples": [
         {
-          "layout": "cluster",
+          "layout": "row",
           "items": [
             {
               "tag": "input",
@@ -94,9 +94,19 @@
               "tag": "input",
               "class": "ui-radio ui-radio--error",
               "attrs": { "type": "radio", "name": "error2", "checked": "" }
+            },
+            {
+              "tag": "input",
+              "class": "ui-radio ui-radio--success",
+              "attrs": { "type": "radio", "name": "success1" }
+            },
+            {
+              "tag": "input",
+              "class": "ui-radio ui-radio--success",
+              "attrs": { "type": "radio", "name": "success2", "checked": "" }
             }
           ],
-          "code": "<input type=\"radio\" class=\"ui-radio ui-radio--error\">\n<input type=\"radio\" class=\"ui-radio ui-radio--error\" checked>"
+          "code": "<input type=\"radio\" class=\"ui-radio ui-radio--error\">\n<input type=\"radio\" class=\"ui-radio ui-radio--error\" checked>\n<input type=\"radio\" class=\"ui-radio ui-radio--success\">\n<input type=\"radio\" class=\"ui-radio ui-radio--success\" checked>"
         }
       ]
     },
@@ -104,8 +114,22 @@
       "title": "With Label",
       "examples": [
         {
-          "html": "<label class=\"ui-cluster\" style=\"gap: var(--ui-space-1); cursor: pointer;\"><input type=\"radio\" class=\"ui-radio\" name=\"labeled\"><span>Option one</span></label>",
-          "code": "<label class=\"ui-cluster\">\n  <input type=\"radio\" class=\"ui-radio\" name=\"group\">\n  <span>Option one</span>\n</label>"
+          "items": [
+            {
+              "tag": "label",
+              "class": "ui-row",
+              "attrs": { "style": "gap: var(--ui-space-1); cursor: pointer;" },
+              "children": [
+                {
+                  "tag": "input",
+                  "class": "ui-radio",
+                  "attrs": { "type": "radio", "name": "labeled" }
+                },
+                { "tag": "span", "text": "Option one" }
+              ]
+            }
+          ],
+          "code": "<label class=\"ui-row\">\n  <input type=\"radio\" class=\"ui-radio\" name=\"group\">\n  <span>Option one</span>\n</label>"
         }
       ]
     },
@@ -113,8 +137,66 @@
       "title": "Radio Group",
       "examples": [
         {
-          "html": "<fieldset style=\"border: none; padding: 0; margin: 0;\"><legend style=\"font-weight: 600; margin-block-end: var(--ui-space-1);\">Choose an option</legend><div class=\"ui-stack\" style=\"--stack-gap: var(--ui-space-1);\"><label class=\"ui-cluster\" style=\"gap: var(--ui-space-1); cursor: pointer;\"><input type=\"radio\" class=\"ui-radio\" name=\"group-demo\" checked><span>Option A</span></label><label class=\"ui-cluster\" style=\"gap: var(--ui-space-1); cursor: pointer;\"><input type=\"radio\" class=\"ui-radio\" name=\"group-demo\"><span>Option B</span></label><label class=\"ui-cluster\" style=\"gap: var(--ui-space-1); cursor: pointer;\"><input type=\"radio\" class=\"ui-radio\" name=\"group-demo\"><span>Option C</span></label></div></fieldset>",
-          "code": "<fieldset>\n  <legend>Choose an option</legend>\n  <div class=\"ui-stack\">\n    <label class=\"ui-cluster\">\n      <input type=\"radio\" class=\"ui-radio\" name=\"group\" checked>\n      <span>Option A</span>\n    </label>\n    <label class=\"ui-cluster\">\n      <input type=\"radio\" class=\"ui-radio\" name=\"group\">\n      <span>Option B</span>\n    </label>\n  </div>\n</fieldset>"
+          "items": [
+            {
+              "tag": "fieldset",
+              "attrs": { "style": "border: none; padding: 0; margin: 0;" },
+              "children": [
+                {
+                  "tag": "legend",
+                  "attrs": { "style": "font-weight: 600; margin-block-end: var(--ui-space-1);" },
+                  "text": "Choose an option"
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-column",
+                  "attrs": { "style": "--column-gap: var(--ui-space-1);" },
+                  "children": [
+                    {
+                      "tag": "label",
+                      "class": "ui-row",
+                      "attrs": { "style": "gap: var(--ui-space-1); cursor: pointer;" },
+                      "children": [
+                        {
+                          "tag": "input",
+                          "class": "ui-radio",
+                          "attrs": { "type": "radio", "name": "group-demo", "checked": "" }
+                        },
+                        { "tag": "span", "text": "Option A" }
+                      ]
+                    },
+                    {
+                      "tag": "label",
+                      "class": "ui-row",
+                      "attrs": { "style": "gap: var(--ui-space-1); cursor: pointer;" },
+                      "children": [
+                        {
+                          "tag": "input",
+                          "class": "ui-radio",
+                          "attrs": { "type": "radio", "name": "group-demo" }
+                        },
+                        { "tag": "span", "text": "Option B" }
+                      ]
+                    },
+                    {
+                      "tag": "label",
+                      "class": "ui-row",
+                      "attrs": { "style": "gap: var(--ui-space-1); cursor: pointer;" },
+                      "children": [
+                        {
+                          "tag": "input",
+                          "class": "ui-radio",
+                          "attrs": { "type": "radio", "name": "group-demo" }
+                        },
+                        { "tag": "span", "text": "Option C" }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "code": "<fieldset>\n  <legend>Choose an option</legend>\n  <div class=\"ui-column\">\n    <label class=\"ui-row\">\n      <input type=\"radio\" class=\"ui-radio\" name=\"group\" checked>\n      <span>Option A</span>\n    </label>\n    <label class=\"ui-row\">\n      <input type=\"radio\" class=\"ui-radio\" name=\"group\">\n      <span>Option B</span>\n    </label>\n  </div>\n</fieldset>"
         }
       ]
     }
@@ -122,12 +204,12 @@
   "customization": [
     {
       "token": "--ui-radio-size",
-      "default": "calc(var(--unit) * 2)",
+      "default": "calc(var(--ui-unit) * 2)",
       "description": "Default size"
     },
     {
       "token": "--ui-radio-size-lg",
-      "default": "calc(var(--unit) * 3)",
+      "default": "calc(var(--ui-unit) * 3)",
       "description": "Large size"
     },
     {

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

@@ -1,4 +1,4 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 
 // @component radio-group
 // @element fieldset
@@ -64,7 +64,7 @@
   }
 
   .radio-group__item:has(:disabled) {
-    opacity: 0.5;
+    opacity: var(--ui-opacity-disabled, 0.5);
     cursor: not-allowed;
   }
 
@@ -78,7 +78,7 @@
   // Disabled group
   .radio-group:disabled,
   .radio-group[aria-disabled='true'] {
-    opacity: 0.5;
+    opacity: var(--ui-opacity-disabled, 0.5);
     cursor: not-allowed;
   }
 }

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

@@ -1,6 +1,7 @@
 {
   "id": "radio-group",
   "type": "component",
+  "mergeInto": "radio",
   "title": "Radio Group",
   "description": "Groups related radio buttons with a legend for single selection. Built on native fieldset semantics.",
   "api": "./radio-group.api.json",

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

@@ -1,4 +1,4 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 
 // @component search-input
 // @element div
@@ -65,7 +65,7 @@
     // Disabled
     &--disabled,
     &:has(.search-input__field:disabled) {
-      opacity: 0.5;
+      opacity: var(--ui-opacity-disabled, 0.5);
       cursor: not-allowed;
     }
   }

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

@@ -94,7 +94,7 @@
       "title": "Sizes",
       "examples": [
         {
-          "layout": "stack",
+          "layout": "column",
           "items": [
             {
               "tag": "div",

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

@@ -1,4 +1,4 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 
 // @component select
 // @element select
@@ -12,7 +12,7 @@
     --_bg: var(--ui-select-bg, var(--ui-color-bg, #{t.$color-bg}));
     --_border-color: var(--ui-select-border-color, var(--ui-color-border-strong, #{t.$color-border-strong}));
     --_border-color-focus: var(--ui-select-border-color-focus, var(--ui-color-primary, #{t.$color-primary}));
-    --_text: var(--ui-select-text, var(--ui-color-text, #{t.$color-text}));
+    --_color: var(--ui-select-color, var(--ui-color-text, #{t.$color-text}));
     --_icon-color: var(--ui-select-icon-color, var(--ui-color-text-muted, #{t.$color-text-muted}));
   }
 
@@ -64,7 +64,7 @@
     font-family: inherit;
     font-size: var(--_font-size);
     line-height: 1;
-    color: var(--_text);
+    color: var(--_color);
 
     background-color: var(--_bg);
     // Chevron down arrow
@@ -82,20 +82,22 @@
     background-position: right var(--ui-space-half, #{t.$space-0}) center;
     background-size: calc(var(--_height) * 0.5);
 
-    &:hover:not(:disabled, :focus) {
+    &:hover:not(:disabled, :focus-visible) {
       border-color: var(--ui-color-border-strong, #{t.$color-border-strong});
     }
 
-    &:focus,
+    &:focus-visible,
     &--focus {
       border-color: var(--_border-color-focus);
-      outline: none;
+      outline: var(--ui-border-width-md, #{t.$border-width-md}) solid transparent;
+      outline-offset: var(--ui-border-width-sm, #{t.$border-width-sm});
+
       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;
+      opacity: var(--ui-opacity-disabled, 0.5);
       cursor: not-allowed;
     }