@teseor/css 1.5.0 → 1.7.0

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

@@ -0,0 +1,257 @@
+{
+  "id": "search-input",
+  "type": "component",
+  "title": "Search Input",
+  "description": "Search field with built-in search icon and optional clear button.",
+  "api": "./search-input.api.json",
+  "sections": [
+    {
+      "title": "Default",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-search-input",
+              "children": [
+                {
+                  "tag": "span",
+                  "class": "ui-search-input__icon",
+                  "children": [
+                    {
+                      "tag": "svg",
+                      "attrs": { "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-search-input__field",
+                  "attrs": { "type": "search", "placeholder": "Search..." }
+                }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-search-input\">\n  <span class=\"ui-search-input__icon\"><svg>...</svg></span>\n  <input class=\"ui-search-input__field\" type=\"search\" placeholder=\"Search...\">\n</div>"
+        }
+      ]
+    },
+    {
+      "title": "With Clear Button",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-search-input ui-search-input--has-clear",
+              "children": [
+                {
+                  "tag": "span",
+                  "class": "ui-search-input__icon",
+                  "children": [
+                    {
+                      "tag": "svg",
+                      "attrs": { "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-search-input__field",
+                  "attrs": { "type": "search", "value": "Design tokens" }
+                },
+                {
+                  "tag": "button",
+                  "class": "ui-search-input__clear",
+                  "attrs": { "type": "button", "aria-label": "Clear search" },
+                  "children": [
+                    {
+                      "tag": "svg",
+                      "attrs": { "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-search-input ui-search-input--has-clear\">\n  <span class=\"ui-search-input__icon\"><svg>...</svg></span>\n  <input class=\"ui-search-input__field\" type=\"search\" value=\"Design tokens\">\n  <button class=\"ui-search-input__clear\" aria-label=\"Clear search\"><svg>...</svg></button>\n</div>"
+        }
+      ]
+    },
+    {
+      "title": "Sizes",
+      "examples": [
+        {
+          "layout": "stack",
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-search-input ui-search-input--sm",
+              "children": [
+                {
+                  "tag": "span",
+                  "class": "ui-search-input__icon",
+                  "children": [
+                    {
+                      "tag": "svg",
+                      "attrs": { "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-search-input__field",
+                  "attrs": { "type": "search", "placeholder": "Small" }
+                }
+              ]
+            },
+            {
+              "tag": "div",
+              "class": "ui-search-input",
+              "children": [
+                {
+                  "tag": "span",
+                  "class": "ui-search-input__icon",
+                  "children": [
+                    {
+                      "tag": "svg",
+                      "attrs": { "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-search-input__field",
+                  "attrs": { "type": "search", "placeholder": "Default" }
+                }
+              ]
+            },
+            {
+              "tag": "div",
+              "class": "ui-search-input ui-search-input--lg",
+              "children": [
+                {
+                  "tag": "span",
+                  "class": "ui-search-input__icon",
+                  "children": [
+                    {
+                      "tag": "svg",
+                      "attrs": { "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-search-input__field",
+                  "attrs": { "type": "search", "placeholder": "Large" }
+                }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-search-input ui-search-input--sm\">...</div>\n<div class=\"ui-search-input\">...</div>\n<div class=\"ui-search-input ui-search-input--lg\">...</div>"
+        }
+      ]
+    },
+    {
+      "title": "Disabled",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-search-input ui-search-input--disabled",
+              "children": [
+                {
+                  "tag": "span",
+                  "class": "ui-search-input__icon",
+                  "children": [
+                    {
+                      "tag": "svg",
+                      "attrs": { "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-search-input__field",
+                  "attrs": { "type": "search", "placeholder": "Disabled", "disabled": "" }
+                }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-search-input ui-search-input--disabled\">\n  <span class=\"ui-search-input__icon\"><svg>...</svg></span>\n  <input class=\"ui-search-input__field\" type=\"search\" disabled>\n</div>"
+        }
+      ]
+    }
+  ],
+  "customization": [
+    {
+      "token": "--ui-search-input-height",
+      "default": "var(--ui-row-2)",
+      "description": "Default height"
+    },
+    {
+      "token": "--ui-search-input-height-sm",
+      "default": "calc(var(--ui-row) * 1.5)",
+      "description": "Small height"
+    },
+    {
+      "token": "--ui-search-input-height-lg",
+      "default": "calc(var(--ui-row) * 2.5)",
+      "description": "Large height"
+    },
+    {
+      "token": "--ui-search-input-bg",
+      "default": "var(--ui-color-bg)",
+      "description": "Background color"
+    },
+    {
+      "token": "--ui-search-input-border-color",
+      "default": "var(--ui-color-border-strong)",
+      "description": "Border color"
+    },
+    {
+      "token": "--ui-search-input-border-color-focus",
+      "default": "var(--ui-color-primary)",
+      "description": "Focus border color"
+    },
+    {
+      "token": "--ui-search-input-icon-color",
+      "default": "var(--ui-color-text-muted)",
+      "description": "Search icon color"
+    },
+    {
+      "token": "--ui-search-input-clear-color",
+      "default": "var(--ui-color-text-muted)",
+      "description": "Clear button color"
+    }
+  ]
+}

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

package/src/04-components/forms/slider/index.scss

@@ -0,0 +1,153 @@
+@use '../../../00-config/tokens/variables' as t;
+
+// @component slider
+// @element input[type="range"]
+
+@layer components.tokens {
+  .slider {
+    --_height: var(--ui-slider-height, var(--ui-row-2, #{t.$row-2}));
+    --_track-height: var(--ui-slider-track-height, #{t.$unit});
+    --_track-bg: var(--ui-slider-track-bg, var(--ui-color-bg-subtle, rgb(0 0 0 / 0.1)));
+    --_track-fill: var(--ui-slider-track-fill, var(--ui-color-primary));
+    --_track-radius: var(--ui-slider-track-radius, var(--ui-radius-full, #{t.$radius-full}));
+    --_thumb-size: var(--ui-slider-thumb-size, calc(#{t.$unit} * 2.5));
+    --_thumb-bg: var(--ui-slider-thumb-bg, var(--ui-color-bg, #{t.$color-bg}));
+    --_thumb-border-color: var(--ui-slider-thumb-border-color, var(--ui-color-primary));
+    --_thumb-border-width: var(--ui-slider-thumb-border-width, var(--ui-border-width-md, #{t.$border-width-md}));
+    --_thumb-radius: var(--ui-slider-thumb-radius, var(--ui-radius-full, #{t.$radius-full}));
+    --_thumb-shadow: var(--ui-slider-thumb-shadow, 0 1px 3px rgb(0 0 0 / 0.2));
+    --_focus-ring: var(--ui-slider-focus-ring, var(--ui-color-focus, #{t.$color-focus}));
+  }
+
+  // @modifier size
+  .slider--sm {
+    --_height: var(--ui-slider-height-sm, calc(#{t.$row} * 1.5));
+    --_track-height: calc(#{t.$unit} * 0.5);
+    --_thumb-size: calc(#{t.$unit} * 2);
+  }
+
+  .slider--lg {
+    --_height: var(--ui-slider-height-lg, calc(#{t.$row} * 2.5));
+    --_track-height: calc(#{t.$unit} * 1.5);
+    --_thumb-size: calc(#{t.$unit} * 3);
+  }
+
+  // @modifier color
+  .slider--success {
+    --_track-fill: var(--ui-color-success);
+    --_thumb-border-color: var(--ui-color-success);
+  }
+
+  .slider--warning {
+    --_track-fill: var(--ui-color-warning);
+    --_thumb-border-color: var(--ui-color-warning);
+  }
+
+  .slider--danger {
+    --_track-fill: var(--ui-color-danger);
+    --_thumb-border-color: var(--ui-color-danger);
+  }
+}
+
+@layer components.styles {
+  .slider {
+    display: inline-flex;
+    align-items: center;
+
+    block-size: var(--_height);
+    inline-size: 100%;
+    padding: 0;
+    margin: 0;
+
+    background: transparent;
+    cursor: pointer;
+    appearance: none;
+
+    // Webkit track
+    &::-webkit-slider-runnable-track {
+      block-size: var(--_track-height);
+
+      background: var(--_track-bg);
+      border-radius: var(--_track-radius);
+    }
+
+    // Firefox track
+    &::-moz-range-track {
+      block-size: var(--_track-height);
+
+      background: var(--_track-bg);
+      border: none;
+      border-radius: var(--_track-radius);
+    }
+
+    // Firefox filled portion
+    &::-moz-range-progress {
+      block-size: var(--_track-height);
+
+      background: var(--_track-fill);
+      border-radius: var(--_track-radius);
+    }
+
+    // Webkit thumb
+    &::-webkit-slider-thumb {
+      block-size: var(--_thumb-size);
+      inline-size: var(--_thumb-size);
+      margin-block-start: calc((var(--_track-height) - var(--_thumb-size)) / 2);
+
+      background: var(--_thumb-bg);
+      border: var(--_thumb-border-width) solid var(--_thumb-border-color);
+      border-radius: var(--_thumb-radius);
+      box-shadow: var(--_thumb-shadow);
+      appearance: none;
+
+      transition:
+        box-shadow var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease),
+        transform var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease);
+    }
+
+    // Firefox thumb
+    &::-moz-range-thumb {
+      block-size: var(--_thumb-size);
+      inline-size: var(--_thumb-size);
+
+      background: var(--_thumb-bg);
+      border: var(--_thumb-border-width) solid var(--_thumb-border-color);
+      border-radius: var(--_thumb-radius);
+      box-shadow: var(--_thumb-shadow);
+
+      transition:
+        box-shadow var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease),
+        transform var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease);
+    }
+
+    // Focus state
+    &:focus-visible {
+      outline: none;
+
+      &::-webkit-slider-thumb {
+        box-shadow: 0 0 0 var(--ui-border-width-md, #{t.$border-width-md}) var(--_focus-ring);
+      }
+
+      &::-moz-range-thumb {
+        box-shadow: 0 0 0 var(--ui-border-width-md, #{t.$border-width-md}) var(--_focus-ring);
+      }
+    }
+
+    // Hover state
+    &:hover:not(:disabled) {
+      &::-webkit-slider-thumb {
+        transform: scale(1.1);
+      }
+
+      &::-moz-range-thumb {
+        transform: scale(1.1);
+      }
+    }
+
+    // Disabled state
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  }
+}

package/src/04-components/forms/slider/slider.api.json

@@ -0,0 +1,70 @@
+{
+  "name": "slider",
+  "element": "input",
+  "modifiers": {
+    "size": {
+      "values": ["sm", "lg"]
+    },
+    "color": {
+      "values": ["success", "warning", "danger"]
+    }
+  },
+  "cssVars": [
+    {
+      "name": "--ui-slider-height",
+      "default": "var(--ui-row-2)"
+    },
+    {
+      "name": "--ui-slider-height-sm",
+      "default": "calc(var(--ui-row) * 1.5)"
+    },
+    {
+      "name": "--ui-slider-height-lg",
+      "default": "calc(var(--ui-row) * 2.5)"
+    },
+    {
+      "name": "--ui-slider-track-height",
+      "default": "var(--ui-unit)"
+    },
+    {
+      "name": "--ui-slider-track-bg",
+      "default": "var(--ui-color-bg-subtle)"
+    },
+    {
+      "name": "--ui-slider-track-fill",
+      "default": "var(--ui-color-primary)"
+    },
+    {
+      "name": "--ui-slider-track-radius",
+      "default": "var(--ui-radius-full)"
+    },
+    {
+      "name": "--ui-slider-thumb-size",
+      "default": "calc(var(--ui-unit) * 2.5)"
+    },
+    {
+      "name": "--ui-slider-thumb-bg",
+      "default": "var(--ui-color-bg)"
+    },
+    {
+      "name": "--ui-slider-thumb-border-color",
+      "default": "var(--ui-color-primary)"
+    },
+    {
+      "name": "--ui-slider-thumb-border-width",
+      "default": "var(--ui-border-width-md)"
+    },
+    {
+      "name": "--ui-slider-thumb-radius",
+      "default": "var(--ui-radius-full)"
+    },
+    {
+      "name": "--ui-slider-thumb-shadow",
+      "default": "0 1px 3px rgb(0 0 0 / 0.2)"
+    },
+    {
+      "name": "--ui-slider-focus-ring",
+      "default": "var(--ui-color-focus)"
+    }
+  ]
+}

package/src/04-components/forms/slider/slider.docs.json

@@ -0,0 +1,144 @@
+{
+  "id": "slider",
+  "type": "component",
+  "title": "Slider",
+  "description": "Range value selection. Styles the native range input cross-browser for track and thumb.",
+  "api": "./slider.api.json",
+  "sections": [
+    {
+      "title": "Default",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "input",
+              "class": "ui-slider",
+              "attrs": { "type": "range", "min": "0", "max": "100", "value": "50" }
+            }
+          ],
+          "code": "<input type=\"range\" class=\"ui-slider\" min=\"0\" max=\"100\" value=\"50\">"
+        }
+      ]
+    },
+    {
+      "title": "Sizes",
+      "examples": [
+        {
+          "layout": "stack",
+          "items": [
+            {
+              "tag": "input",
+              "class": "ui-slider ui-slider--sm",
+              "attrs": { "type": "range", "min": "0", "max": "100", "value": "30" }
+            },
+            {
+              "tag": "input",
+              "class": "ui-slider",
+              "attrs": { "type": "range", "min": "0", "max": "100", "value": "50" }
+            },
+            {
+              "tag": "input",
+              "class": "ui-slider ui-slider--lg",
+              "attrs": { "type": "range", "min": "0", "max": "100", "value": "70" }
+            }
+          ],
+          "code": "<input type=\"range\" class=\"ui-slider ui-slider--sm\" value=\"30\">\n<input type=\"range\" class=\"ui-slider\" value=\"50\">\n<input type=\"range\" class=\"ui-slider ui-slider--lg\" value=\"70\">"
+        }
+      ]
+    },
+    {
+      "title": "Colors",
+      "examples": [
+        {
+          "layout": "stack",
+          "items": [
+            {
+              "tag": "input",
+              "class": "ui-slider",
+              "attrs": { "type": "range", "min": "0", "max": "100", "value": "50" }
+            },
+            {
+              "tag": "input",
+              "class": "ui-slider ui-slider--success",
+              "attrs": { "type": "range", "min": "0", "max": "100", "value": "80" }
+            },
+            {
+              "tag": "input",
+              "class": "ui-slider ui-slider--warning",
+              "attrs": { "type": "range", "min": "0", "max": "100", "value": "60" }
+            },
+            {
+              "tag": "input",
+              "class": "ui-slider ui-slider--danger",
+              "attrs": { "type": "range", "min": "0", "max": "100", "value": "25" }
+            }
+          ],
+          "code": "<input type=\"range\" class=\"ui-slider\" value=\"50\">\n<input type=\"range\" class=\"ui-slider ui-slider--success\" value=\"80\">\n<input type=\"range\" class=\"ui-slider ui-slider--warning\" value=\"60\">\n<input type=\"range\" class=\"ui-slider ui-slider--danger\" value=\"25\">"
+        }
+      ]
+    },
+    {
+      "title": "Disabled",
+      "examples": [
+        {
+          "layout": "stack",
+          "items": [
+            {
+              "tag": "input",
+              "class": "ui-slider",
+              "attrs": { "type": "range", "min": "0", "max": "100", "value": "40", "disabled": "" }
+            },
+            {
+              "tag": "input",
+              "class": "ui-slider ui-slider--success",
+              "attrs": { "type": "range", "min": "0", "max": "100", "value": "70", "disabled": "" }
+            }
+          ],
+          "code": "<input type=\"range\" class=\"ui-slider\" value=\"40\" disabled>\n<input type=\"range\" class=\"ui-slider ui-slider--success\" value=\"70\" disabled>"
+        }
+      ]
+    }
+  ],
+  "customization": [
+    {
+      "token": "--ui-slider-height",
+      "default": "var(--ui-row-2)",
+      "description": "Component height (clickable area)"
+    },
+    {
+      "token": "--ui-slider-track-height",
+      "default": "var(--ui-unit)",
+      "description": "Track bar height"
+    },
+    {
+      "token": "--ui-slider-track-bg",
+      "default": "var(--ui-color-bg-subtle)",
+      "description": "Track background"
+    },
+    {
+      "token": "--ui-slider-track-fill",
+      "default": "var(--ui-color-primary)",
+      "description": "Filled portion color (Firefox)"
+    },
+    {
+      "token": "--ui-slider-thumb-size",
+      "default": "calc(var(--ui-unit) * 2.5)",
+      "description": "Thumb diameter"
+    },
+    {
+      "token": "--ui-slider-thumb-bg",
+      "default": "var(--ui-color-bg)",
+      "description": "Thumb background"
+    },
+    {
+      "token": "--ui-slider-thumb-border-color",
+      "default": "var(--ui-color-primary)",
+      "description": "Thumb border color"
+    },
+    {
+      "token": "--ui-slider-focus-ring",
+      "default": "var(--ui-color-focus)",
+      "description": "Focus ring color"
+    }
+  ]
+}

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

package/src/04-components/index.scss

@@ -20,6 +20,7 @@
 @forward './feedback/spinner/index';
 @forward './feedback/toast/index';
 @forward './forms/checkbox/index';
+@forward './forms/checkbox-group/index';
 @forward './forms/field/index';
 @forward './forms/fieldset/index';
 @forward './forms/form/index';
@@ -27,13 +28,20 @@
 @forward './forms/form-helper/index';
 @forward './forms/input/index';
 @forward './forms/label/index';
+@forward './forms/number-input/index';
+@forward './forms/password-input/index';
 @forward './forms/radio/index';
+@forward './forms/radio-group/index';
+@forward './forms/search-input/index';
 @forward './forms/select/index';
+@forward './forms/slider/index';
 @forward './forms/textarea/index';
 @forward './forms/toggle/index';
 @forward './layout/divider/index';
+@forward './layout/scroll-area/index';
 @forward './layout/spacer/index';
 @forward './navigation/breadcrumb/index';
+@forward './navigation/dropdown-menu/index';
 @forward './navigation/menu/index';
 @forward './navigation/nav/index';
 @forward './navigation/pagination/index';