@teseor/css 1.5.0 → 1.7.0

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

@@ -0,0 +1,84 @@
+{
+  "name": "password-input",
+  "element": "div",
+  "modifiers": {
+    "size": {
+      "values": ["sm", "lg"]
+    },
+    "state": {
+      "values": ["error", "success"]
+    },
+    "block": {
+      "type": "boolean"
+    },
+    "disabled": {
+      "type": "boolean"
+    }
+  },
+  "elements": {
+    "field": {},
+    "toggle": {}
+  },
+  "cssVars": [
+    {
+      "name": "--ui-password-input-height",
+      "default": "var(--ui-row-2)"
+    },
+    {
+      "name": "--ui-password-input-height-sm",
+      "default": "calc(var(--ui-row) * 1.5)"
+    },
+    {
+      "name": "--ui-password-input-height-lg",
+      "default": "calc(var(--ui-row) * 2.5)"
+    },
+    {
+      "name": "--ui-password-input-padding-x",
+      "default": "var(--ui-space-1)"
+    },
+    {
+      "name": "--ui-password-input-font-size",
+      "default": "var(--ui-font-size-sm)"
+    },
+    {
+      "name": "--ui-password-input-radius",
+      "default": "var(--ui-radius-md)"
+    },
+    {
+      "name": "--ui-password-input-bg",
+      "default": "var(--ui-color-bg)"
+    },
+    {
+      "name": "--ui-password-input-border-color",
+      "default": "var(--ui-color-border-strong)"
+    },
+    {
+      "name": "--ui-password-input-border-color-focus",
+      "default": "var(--ui-color-primary)"
+    },
+    {
+      "name": "--ui-password-input-text",
+      "default": "var(--ui-color-text)"
+    },
+    {
+      "name": "--ui-password-input-placeholder",
+      "default": "var(--ui-color-text-muted)"
+    },
+    {
+      "name": "--ui-password-input-error-border",
+      "default": "var(--ui-color-danger)"
+    },
+    {
+      "name": "--ui-password-input-success-border",
+      "default": "var(--ui-color-success)"
+    },
+    {
+      "name": "--ui-password-input-toggle-color",
+      "default": "var(--ui-color-text-muted)"
+    },
+    {
+      "name": "--ui-password-input-toggle-hover-bg",
+      "default": "var(--ui-color-bg-muted)"
+    }
+  ]
+}

package/src/04-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": "stack",
+          "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": "stack",
+          "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/04-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/forms/radio-group/index.scss

@@ -0,0 +1,84 @@
+@use '../../../00-config/tokens/variables' as t;
+
+// @component radio-group
+// @element fieldset
+
+@layer components.tokens {
+  .radio-group {
+    --_spacing: var(--ui-radio-group-spacing, var(--ui-space-1, #{t.$space-1}));
+    --_legend-size: var(--ui-radio-group-legend-size, var(--ui-font-size-sm, #{t.$font-size-sm}));
+    --_legend-weight: var(--ui-radio-group-legend-weight, var(--ui-weight-medium, #{t.$weight-medium}));
+    --_legend-color: var(--ui-radio-group-legend-color, var(--ui-color-text, #{t.$color-text}));
+    --_legend-spacing: var(--ui-radio-group-legend-spacing, var(--ui-space-1, #{t.$space-1}));
+    --_item-gap: var(--ui-radio-group-item-gap, var(--ui-space-1, #{t.$space-1}));
+  }
+
+  .radio-group--compact {
+    --_spacing: var(--ui-radio-group-spacing-compact, 0);
+    --_legend-spacing: var(--ui-radio-group-legend-spacing-compact, 0);
+    --_item-gap: var(--ui-radio-group-item-gap-compact, 0);
+  }
+
+  // @modifier state
+  .radio-group--error {
+    --_legend-color: var(--ui-radio-group-error-color, var(--ui-color-danger, #{t.$color-danger}));
+  }
+}
+
+@layer components.styles {
+  .radio-group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--_legend-spacing);
+
+    min-inline-size: 0;
+    padding: 0;
+    margin: 0;
+
+    border: none;
+  }
+
+  .radio-group__legend {
+    padding: 0;
+
+    font-size: var(--_legend-size);
+    font-weight: var(--_legend-weight);
+    line-height: var(--ui-leading-tight-sm, var(--ui-row-1, #{t.$leading-tight-sm}));
+    color: var(--_legend-color);
+  }
+
+  .radio-group__items {
+    display: flex;
+    flex-direction: column;
+    gap: var(--_spacing);
+  }
+
+  .radio-group__item {
+    display: flex;
+    align-items: center;
+    gap: var(--_item-gap);
+
+    line-height: var(--ui-row-1, #{t.$row-1});
+
+    cursor: pointer;
+  }
+
+  .radio-group__item:has(:disabled) {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  // Horizontal layout
+  .radio-group--horizontal > .radio-group__items {
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: var(--ui-space-2, #{t.$space-2});
+  }
+
+  // Disabled group
+  .radio-group:disabled,
+  .radio-group[aria-disabled='true'] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}

package/src/04-components/forms/radio-group/radio-group.api.json

@@ -0,0 +1,54 @@
+{
+  "name": "radio-group",
+  "element": "fieldset",
+  "modifiers": {
+    "horizontal": {
+      "type": "boolean"
+    },
+    "compact": {
+      "type": "boolean"
+    },
+    "error": {
+      "type": "boolean"
+    }
+  },
+  "elements": {
+    "legend": {},
+    "items": {},
+    "item": {}
+  },
+  "cssVars": [
+    {
+      "name": "--ui-radio-group-spacing",
+      "default": "var(--ui-space-1)"
+    },
+    {
+      "name": "--ui-radio-group-spacing-compact",
+      "default": "0"
+    },
+    {
+      "name": "--ui-radio-group-legend-size",
+      "default": "var(--ui-font-size-sm)"
+    },
+    {
+      "name": "--ui-radio-group-legend-weight",
+      "default": "var(--ui-weight-medium)"
+    },
+    {
+      "name": "--ui-radio-group-legend-color",
+      "default": "var(--ui-color-text)"
+    },
+    {
+      "name": "--ui-radio-group-legend-spacing",
+      "default": "var(--ui-space-1)"
+    },
+    {
+      "name": "--ui-radio-group-item-gap",
+      "default": "var(--ui-space-1)"
+    },
+    {
+      "name": "--ui-radio-group-error-color",
+      "default": "var(--ui-color-danger)"
+    }
+  ]
+}