@teseor/css 1.5.0 → 1.7.0

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

@@ -0,0 +1,153 @@
+@use '../../../00-config/tokens/variables' as t;
+
+// @component number-input
+// @element div
+
+@layer components.tokens {
+  .number-input {
+    --_height: var(--ui-number-input-height, var(--ui-row-2, #{t.$row-2}));
+    --_padding-x: var(--ui-number-input-padding-x, var(--ui-space-1, #{t.$space-1}));
+    --_font-size: var(--ui-number-input-font-size, var(--ui-font-size-sm, #{t.$font-size-sm}));
+    --_radius: var(--ui-number-input-radius, var(--ui-radius-md, #{t.$radius-md}));
+    --_bg: var(--ui-number-input-bg, var(--ui-color-bg, #{t.$color-bg}));
+    --_border-color: var(--ui-number-input-border-color, var(--ui-color-border-strong, #{t.$color-border-strong}));
+    --_border-color-focus: var(--ui-number-input-border-color-focus, var(--ui-color-primary, #{t.$color-primary}));
+    --_text: var(--ui-number-input-text, var(--ui-color-text, #{t.$color-text}));
+    --_button-color: var(--ui-number-input-button-color, var(--ui-color-text-muted, #{t.$color-text-muted}));
+    --_button-bg: var(--ui-number-input-button-bg, var(--ui-color-bg-muted, #{t.$color-bg-muted}));
+    --_button-hover-bg: var(--ui-number-input-button-hover-bg, var(--ui-color-border, #{t.$color-border}));
+  }
+
+  // @modifier size
+  .number-input--sm {
+    --_height: var(--ui-number-input-height-sm, calc(#{t.$row} * 1.5));
+    --_font-size: var(--ui-number-input-font-size-sm, var(--ui-font-size-xs, #{t.$font-size-xs}));
+  }
+
+  .number-input--lg {
+    --_height: var(--ui-number-input-height-lg, calc(#{t.$row} * 2.5));
+    --_padding-x: var(--ui-number-input-padding-x-lg, var(--ui-space-2, #{t.$space-2}));
+    --_font-size: var(--ui-number-input-font-size-lg, var(--ui-font-size-md, #{t.$font-size-md}));
+  }
+}
+
+@layer components.styles {
+  .number-input {
+    display: inline-flex;
+    align-items: center;
+
+    block-size: var(--_height);
+
+    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);
+
+    &:focus-within {
+      border-color: var(--_border-color-focus);
+      box-shadow: 0 0 0 var(--ui-border-width-md, #{t.$border-width-md}) var(--ui-color-focus, #{t.$color-focus});
+    }
+
+    &--block {
+      inline-size: 100%;
+    }
+
+    &--disabled,
+    &:has(.number-input__field:disabled) {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  }
+
+  .number-input__field {
+    flex: 1;
+
+    block-size: 100%;
+    min-inline-size: 0;
+    padding: 0 var(--_padding-x);
+
+    font-family: inherit;
+    font-size: var(--_font-size);
+    line-height: 1;
+    text-align: center;
+    color: var(--_text);
+
+    background: transparent;
+    border: none;
+    outline: none;
+
+    // Hide native spinners
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+      margin: 0;
+
+      appearance: none;
+    }
+
+    &[type='number'] {
+      appearance: textfield;
+    }
+  }
+
+  .number-input__decrement,
+  .number-input__increment {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+
+    block-size: 100%;
+    inline-size: var(--_height);
+    padding: 0;
+    margin: 0;
+
+    color: var(--_button-color);
+
+    background: var(--_button-bg);
+    border: none;
+    cursor: pointer;
+
+    transition: background var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease);
+
+    &:hover:not(:disabled) {
+      background: var(--_button-hover-bg);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--ui-color-focus, #{t.$color-focus});
+      outline-offset: -2px;
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+
+    svg {
+      block-size: var(--ui-size-sm, #{t.size(sm)});
+      inline-size: var(--ui-size-sm, #{t.size(sm)});
+
+      fill: none;
+      stroke: currentcolor;
+      stroke-width: 2;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+    }
+  }
+
+  .number-input__decrement {
+    border-start-start-radius: calc(var(--_radius) - var(--ui-border-width-sm, #{t.$border-width-sm}));
+    border-end-start-radius: calc(var(--_radius) - var(--ui-border-width-sm, #{t.$border-width-sm}));
+
+    border-inline-end: var(--ui-border-width-sm, #{t.$border-width-sm}) solid var(--_border-color);
+  }
+
+  .number-input__increment {
+    border-start-end-radius: calc(var(--_radius) - var(--ui-border-width-sm, #{t.$border-width-sm}));
+    border-end-end-radius: calc(var(--_radius) - var(--ui-border-width-sm, #{t.$border-width-sm}));
+
+    border-inline-start: var(--ui-border-width-sm, #{t.$border-width-sm}) solid var(--_border-color);
+  }
+}

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

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

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

@@ -0,0 +1,262 @@
+{
+  "id": "number-input",
+  "type": "component",
+  "title": "Number Input",
+  "description": "Numeric input with increment and decrement stepper buttons.",
+  "api": "./number-input.api.json",
+  "sections": [
+    {
+      "title": "Default",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-number-input",
+              "children": [
+                {
+                  "tag": "button",
+                  "class": "ui-number-input__decrement",
+                  "attrs": { "type": "button", "aria-label": "Decrease" },
+                  "children": [
+                    {
+                      "tag": "svg",
+                      "attrs": { "viewBox": "0 0 24 24" },
+                      "children": [{ "tag": "path", "attrs": { "d": "M5 12h14" } }]
+                    }
+                  ]
+                },
+                {
+                  "tag": "input",
+                  "class": "ui-number-input__field",
+                  "attrs": { "type": "number", "value": "5" }
+                },
+                {
+                  "tag": "button",
+                  "class": "ui-number-input__increment",
+                  "attrs": { "type": "button", "aria-label": "Increase" },
+                  "children": [
+                    {
+                      "tag": "svg",
+                      "attrs": { "viewBox": "0 0 24 24" },
+                      "children": [
+                        { "tag": "path", "attrs": { "d": "M12 5v14" } },
+                        { "tag": "path", "attrs": { "d": "M5 12h14" } }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-number-input\">\n  <button class=\"ui-number-input__decrement\" aria-label=\"Decrease\"><svg>...</svg></button>\n  <input class=\"ui-number-input__field\" type=\"number\" value=\"5\">\n  <button class=\"ui-number-input__increment\" aria-label=\"Increase\"><svg>...</svg></button>\n</div>"
+        }
+      ]
+    },
+    {
+      "title": "Sizes",
+      "examples": [
+        {
+          "layout": "stack",
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-number-input ui-number-input--sm",
+              "children": [
+                {
+                  "tag": "button",
+                  "class": "ui-number-input__decrement",
+                  "attrs": { "type": "button", "aria-label": "Decrease" },
+                  "children": [
+                    {
+                      "tag": "svg",
+                      "attrs": { "viewBox": "0 0 24 24" },
+                      "children": [{ "tag": "path", "attrs": { "d": "M5 12h14" } }]
+                    }
+                  ]
+                },
+                {
+                  "tag": "input",
+                  "class": "ui-number-input__field",
+                  "attrs": { "type": "number", "value": "3" }
+                },
+                {
+                  "tag": "button",
+                  "class": "ui-number-input__increment",
+                  "attrs": { "type": "button", "aria-label": "Increase" },
+                  "children": [
+                    {
+                      "tag": "svg",
+                      "attrs": { "viewBox": "0 0 24 24" },
+                      "children": [
+                        { "tag": "path", "attrs": { "d": "M12 5v14" } },
+                        { "tag": "path", "attrs": { "d": "M5 12h14" } }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "tag": "div",
+              "class": "ui-number-input",
+              "children": [
+                {
+                  "tag": "button",
+                  "class": "ui-number-input__decrement",
+                  "attrs": { "type": "button", "aria-label": "Decrease" },
+                  "children": [
+                    {
+                      "tag": "svg",
+                      "attrs": { "viewBox": "0 0 24 24" },
+                      "children": [{ "tag": "path", "attrs": { "d": "M5 12h14" } }]
+                    }
+                  ]
+                },
+                {
+                  "tag": "input",
+                  "class": "ui-number-input__field",
+                  "attrs": { "type": "number", "value": "5" }
+                },
+                {
+                  "tag": "button",
+                  "class": "ui-number-input__increment",
+                  "attrs": { "type": "button", "aria-label": "Increase" },
+                  "children": [
+                    {
+                      "tag": "svg",
+                      "attrs": { "viewBox": "0 0 24 24" },
+                      "children": [
+                        { "tag": "path", "attrs": { "d": "M12 5v14" } },
+                        { "tag": "path", "attrs": { "d": "M5 12h14" } }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "tag": "div",
+              "class": "ui-number-input ui-number-input--lg",
+              "children": [
+                {
+                  "tag": "button",
+                  "class": "ui-number-input__decrement",
+                  "attrs": { "type": "button", "aria-label": "Decrease" },
+                  "children": [
+                    {
+                      "tag": "svg",
+                      "attrs": { "viewBox": "0 0 24 24" },
+                      "children": [{ "tag": "path", "attrs": { "d": "M5 12h14" } }]
+                    }
+                  ]
+                },
+                {
+                  "tag": "input",
+                  "class": "ui-number-input__field",
+                  "attrs": { "type": "number", "value": "10" }
+                },
+                {
+                  "tag": "button",
+                  "class": "ui-number-input__increment",
+                  "attrs": { "type": "button", "aria-label": "Increase" },
+                  "children": [
+                    {
+                      "tag": "svg",
+                      "attrs": { "viewBox": "0 0 24 24" },
+                      "children": [
+                        { "tag": "path", "attrs": { "d": "M12 5v14" } },
+                        { "tag": "path", "attrs": { "d": "M5 12h14" } }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-number-input ui-number-input--sm\">...</div>\n<div class=\"ui-number-input\">...</div>\n<div class=\"ui-number-input ui-number-input--lg\">...</div>"
+        }
+      ]
+    },
+    {
+      "title": "Disabled",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-number-input ui-number-input--disabled",
+              "children": [
+                {
+                  "tag": "button",
+                  "class": "ui-number-input__decrement",
+                  "attrs": { "type": "button", "aria-label": "Decrease", "disabled": "" },
+                  "children": [
+                    {
+                      "tag": "svg",
+                      "attrs": { "viewBox": "0 0 24 24" },
+                      "children": [{ "tag": "path", "attrs": { "d": "M5 12h14" } }]
+                    }
+                  ]
+                },
+                {
+                  "tag": "input",
+                  "class": "ui-number-input__field",
+                  "attrs": { "type": "number", "value": "0", "disabled": "" }
+                },
+                {
+                  "tag": "button",
+                  "class": "ui-number-input__increment",
+                  "attrs": { "type": "button", "aria-label": "Increase", "disabled": "" },
+                  "children": [
+                    {
+                      "tag": "svg",
+                      "attrs": { "viewBox": "0 0 24 24" },
+                      "children": [
+                        { "tag": "path", "attrs": { "d": "M12 5v14" } },
+                        { "tag": "path", "attrs": { "d": "M5 12h14" } }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-number-input ui-number-input--disabled\">\n  <button disabled>...</button>\n  <input type=\"number\" disabled>\n  <button disabled>...</button>\n</div>"
+        }
+      ]
+    }
+  ],
+  "customization": [
+    {
+      "token": "--ui-number-input-height",
+      "default": "var(--ui-row-2)",
+      "description": "Default height"
+    },
+    {
+      "token": "--ui-number-input-height-sm",
+      "default": "calc(var(--ui-row) * 1.5)",
+      "description": "Small height"
+    },
+    {
+      "token": "--ui-number-input-height-lg",
+      "default": "calc(var(--ui-row) * 2.5)",
+      "description": "Large height"
+    },
+    {
+      "token": "--ui-number-input-button-bg",
+      "default": "var(--ui-color-bg-muted)",
+      "description": "Stepper button background"
+    },
+    {
+      "token": "--ui-number-input-button-hover-bg",
+      "default": "var(--ui-color-border)",
+      "description": "Stepper button hover background"
+    },
+    {
+      "token": "--ui-number-input-border-color-focus",
+      "default": "var(--ui-color-primary)",
+      "description": "Focus border color"
+    }
+  ]
+}

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

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

@@ -0,0 +1,138 @@
+@use '../../../00-config/tokens/variables' as t;
+
+// @component password-input
+// @element div
+
+@layer components.tokens {
+  .password-input {
+    --_height: var(--ui-password-input-height, var(--ui-row-2, #{t.$row-2}));
+    --_padding-x: var(--ui-password-input-padding-x, var(--ui-space-1, #{t.$space-1}));
+    --_font-size: var(--ui-password-input-font-size, var(--ui-font-size-sm, #{t.$font-size-sm}));
+    --_radius: var(--ui-password-input-radius, var(--ui-radius-md, #{t.$radius-md}));
+    --_bg: var(--ui-password-input-bg, var(--ui-color-bg, #{t.$color-bg}));
+    --_border-color: var(--ui-password-input-border-color, var(--ui-color-border-strong, #{t.$color-border-strong}));
+    --_border-color-focus: var(--ui-password-input-border-color-focus, var(--ui-color-primary, #{t.$color-primary}));
+    --_text: var(--ui-password-input-text, var(--ui-color-text, #{t.$color-text}));
+    --_placeholder: var(--ui-password-input-placeholder, var(--ui-color-text-muted, #{t.$color-text-muted}));
+    --_toggle-color: var(--ui-password-input-toggle-color, var(--ui-color-text-muted, #{t.$color-text-muted}));
+    --_toggle-hover-bg: var(--ui-password-input-toggle-hover-bg, var(--ui-color-bg-muted, #{t.$color-bg-muted}));
+  }
+
+  // @modifier size
+  .password-input--sm {
+    --_height: var(--ui-password-input-height-sm, calc(#{t.$row} * 1.5));
+    --_font-size: var(--ui-password-input-font-size-sm, var(--ui-font-size-xs, #{t.$font-size-xs}));
+  }
+
+  .password-input--lg {
+    --_height: var(--ui-password-input-height-lg, calc(#{t.$row} * 2.5));
+    --_padding-x: var(--ui-password-input-padding-x-lg, var(--ui-space-2, #{t.$space-2}));
+    --_font-size: var(--ui-password-input-font-size-lg, var(--ui-font-size-md, #{t.$font-size-md}));
+  }
+
+  // @modifier state
+  .password-input--error {
+    --_border-color: var(--ui-password-input-error-border, var(--ui-color-danger, #{t.$color-danger}));
+    --_border-color-focus: var(--ui-password-input-error-border, var(--ui-color-danger, #{t.$color-danger}));
+  }
+
+  .password-input--success {
+    --_border-color: var(--ui-password-input-success-border, var(--ui-color-success, #{t.$color-success}));
+    --_border-color-focus: var(--ui-password-input-success-border, var(--ui-color-success, #{t.$color-success}));
+  }
+}
+
+@layer components.styles {
+  .password-input {
+    display: inline-flex;
+    align-items: center;
+
+    block-size: var(--_height);
+
+    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);
+
+    &:focus-within,
+    &--focus {
+      border-color: var(--_border-color-focus);
+      box-shadow: 0 0 0 var(--ui-border-width-md, #{t.$border-width-md}) var(--ui-color-focus, #{t.$color-focus});
+    }
+
+    &--block {
+      inline-size: 100%;
+    }
+
+    &--disabled,
+    &:has(.password-input__field:disabled) {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  }
+
+  .password-input__field {
+    flex: 1;
+
+    block-size: 100%;
+    min-inline-size: 0;
+    padding: 0;
+    padding-inline-start: var(--_padding-x);
+
+    font-family: inherit;
+    font-size: var(--_font-size);
+    line-height: 1;
+    color: var(--_text);
+
+    background: transparent;
+    border: none;
+    outline: none;
+
+    &::placeholder {
+      color: var(--_placeholder);
+    }
+  }
+
+  .password-input__toggle {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+
+    block-size: calc(var(--_height) - var(--ui-space-half, #{t.$space-0}) * 2);
+    inline-size: calc(var(--_height) - var(--ui-space-half, #{t.$space-0}) * 2);
+    margin-inline-end: calc(var(--ui-space-half, #{t.$space-0}));
+
+    color: var(--_toggle-color);
+
+    background: transparent;
+    border: none;
+    border-radius: var(--ui-radius-sm, #{t.$radius-sm});
+    cursor: pointer;
+
+    transition: background var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease);
+
+    &:hover {
+      background: var(--_toggle-hover-bg);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--ui-color-focus, #{t.$color-focus});
+      outline-offset: -2px;
+    }
+
+    svg {
+      block-size: var(--ui-size-md, #{t.size(md)});
+      inline-size: var(--ui-size-md, #{t.size(md)});
+
+      fill: none;
+      stroke: currentcolor;
+      stroke-width: 2;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+    }
+  }
+}