@teseor/css 1.4.0 → 1.6.0

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)"
+    }
+  ]
+}

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

@@ -0,0 +1,350 @@
+{
+  "id": "radio-group",
+  "type": "component",
+  "title": "Radio Group",
+  "description": "Groups related radio buttons with a legend for single selection. Built on native fieldset semantics.",
+  "api": "./radio-group.api.json",
+  "sections": [
+    {
+      "title": "Default",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "fieldset",
+              "class": "ui-radio-group",
+              "children": [
+                {
+                  "tag": "legend",
+                  "class": "ui-radio-group__legend",
+                  "text": "Payment method"
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-radio-group__items",
+                  "children": [
+                    {
+                      "tag": "label",
+                      "class": "ui-radio-group__item",
+                      "children": [
+                        {
+                          "tag": "input",
+                          "class": "ui-radio",
+                          "attrs": { "type": "radio", "name": "payment", "checked": "" }
+                        },
+                        { "tag": "span", "text": "Credit card" }
+                      ]
+                    },
+                    {
+                      "tag": "label",
+                      "class": "ui-radio-group__item",
+                      "children": [
+                        {
+                          "tag": "input",
+                          "class": "ui-radio",
+                          "attrs": { "type": "radio", "name": "payment" }
+                        },
+                        { "tag": "span", "text": "Debit card" }
+                      ]
+                    },
+                    {
+                      "tag": "label",
+                      "class": "ui-radio-group__item",
+                      "children": [
+                        {
+                          "tag": "input",
+                          "class": "ui-radio",
+                          "attrs": { "type": "radio", "name": "payment" }
+                        },
+                        { "tag": "span", "text": "Bank transfer" }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "code": "<fieldset class=\"ui-radio-group\">\n  <legend class=\"ui-radio-group__legend\">Payment method</legend>\n  <div class=\"ui-radio-group__items\">\n    <label class=\"ui-radio-group__item\">\n      <input type=\"radio\" class=\"ui-radio\" name=\"payment\" checked>\n      <span>Credit card</span>\n    </label>\n    ...\n  </div>\n</fieldset>"
+        }
+      ]
+    },
+    {
+      "title": "Horizontal",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "fieldset",
+              "class": "ui-radio-group ui-radio-group--horizontal",
+              "children": [
+                {
+                  "tag": "legend",
+                  "class": "ui-radio-group__legend",
+                  "text": "Size"
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-radio-group__items",
+                  "children": [
+                    {
+                      "tag": "label",
+                      "class": "ui-radio-group__item",
+                      "children": [
+                        {
+                          "tag": "input",
+                          "class": "ui-radio",
+                          "attrs": { "type": "radio", "name": "size", "checked": "" }
+                        },
+                        { "tag": "span", "text": "Small" }
+                      ]
+                    },
+                    {
+                      "tag": "label",
+                      "class": "ui-radio-group__item",
+                      "children": [
+                        {
+                          "tag": "input",
+                          "class": "ui-radio",
+                          "attrs": { "type": "radio", "name": "size" }
+                        },
+                        { "tag": "span", "text": "Medium" }
+                      ]
+                    },
+                    {
+                      "tag": "label",
+                      "class": "ui-radio-group__item",
+                      "children": [
+                        {
+                          "tag": "input",
+                          "class": "ui-radio",
+                          "attrs": { "type": "radio", "name": "size" }
+                        },
+                        { "tag": "span", "text": "Large" }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "code": "<fieldset class=\"ui-radio-group ui-radio-group--horizontal\">\n  <legend class=\"ui-radio-group__legend\">Size</legend>\n  ...\n</fieldset>"
+        }
+      ]
+    },
+    {
+      "title": "Compact",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "fieldset",
+              "class": "ui-radio-group ui-radio-group--compact",
+              "children": [
+                {
+                  "tag": "legend",
+                  "class": "ui-radio-group__legend",
+                  "text": "Priority"
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-radio-group__items",
+                  "children": [
+                    {
+                      "tag": "label",
+                      "class": "ui-radio-group__item",
+                      "children": [
+                        {
+                          "tag": "input",
+                          "class": "ui-radio",
+                          "attrs": { "type": "radio", "name": "priority", "checked": "" }
+                        },
+                        { "tag": "span", "text": "Low" }
+                      ]
+                    },
+                    {
+                      "tag": "label",
+                      "class": "ui-radio-group__item",
+                      "children": [
+                        {
+                          "tag": "input",
+                          "class": "ui-radio",
+                          "attrs": { "type": "radio", "name": "priority" }
+                        },
+                        { "tag": "span", "text": "Medium" }
+                      ]
+                    },
+                    {
+                      "tag": "label",
+                      "class": "ui-radio-group__item",
+                      "children": [
+                        {
+                          "tag": "input",
+                          "class": "ui-radio",
+                          "attrs": { "type": "radio", "name": "priority" }
+                        },
+                        { "tag": "span", "text": "High" }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "code": "<fieldset class=\"ui-radio-group ui-radio-group--compact\">\n  ...\n</fieldset>"
+        }
+      ]
+    },
+    {
+      "title": "Error State",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "fieldset",
+              "class": "ui-radio-group ui-radio-group--error",
+              "children": [
+                {
+                  "tag": "legend",
+                  "class": "ui-radio-group__legend",
+                  "text": "Shipping"
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-radio-group__items",
+                  "children": [
+                    {
+                      "tag": "label",
+                      "class": "ui-radio-group__item",
+                      "children": [
+                        {
+                          "tag": "input",
+                          "class": "ui-radio ui-radio--error",
+                          "attrs": { "type": "radio", "name": "shipping" }
+                        },
+                        { "tag": "span", "text": "Standard" }
+                      ]
+                    },
+                    {
+                      "tag": "label",
+                      "class": "ui-radio-group__item",
+                      "children": [
+                        {
+                          "tag": "input",
+                          "class": "ui-radio ui-radio--error",
+                          "attrs": { "type": "radio", "name": "shipping" }
+                        },
+                        { "tag": "span", "text": "Express" }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "tag": "span",
+                  "class": "ui-form-error",
+                  "text": "Please select a shipping method"
+                }
+              ]
+            }
+          ],
+          "code": "<fieldset class=\"ui-radio-group ui-radio-group--error\">\n  <legend class=\"ui-radio-group__legend\">Shipping</legend>\n  <div class=\"ui-radio-group__items\">\n    <label class=\"ui-radio-group__item\">\n      <input type=\"radio\" class=\"ui-radio ui-radio--error\" name=\"shipping\">\n      <span>Standard</span>\n    </label>\n    ...\n  </div>\n  <span class=\"ui-form-error\">Please select a shipping method</span>\n</fieldset>"
+        }
+      ]
+    },
+    {
+      "title": "Disabled",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "fieldset",
+              "class": "ui-radio-group",
+              "attrs": { "disabled": "" },
+              "children": [
+                {
+                  "tag": "legend",
+                  "class": "ui-radio-group__legend",
+                  "text": "Plan (locked)"
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-radio-group__items",
+                  "children": [
+                    {
+                      "tag": "label",
+                      "class": "ui-radio-group__item",
+                      "children": [
+                        {
+                          "tag": "input",
+                          "class": "ui-radio",
+                          "attrs": { "type": "radio", "name": "plan", "checked": "" }
+                        },
+                        { "tag": "span", "text": "Free" }
+                      ]
+                    },
+                    {
+                      "tag": "label",
+                      "class": "ui-radio-group__item",
+                      "children": [
+                        {
+                          "tag": "input",
+                          "class": "ui-radio",
+                          "attrs": { "type": "radio", "name": "plan" }
+                        },
+                        { "tag": "span", "text": "Pro" }
+                      ]
+                    },
+                    {
+                      "tag": "label",
+                      "class": "ui-radio-group__item",
+                      "children": [
+                        {
+                          "tag": "input",
+                          "class": "ui-radio",
+                          "attrs": { "type": "radio", "name": "plan" }
+                        },
+                        { "tag": "span", "text": "Enterprise" }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "code": "<fieldset class=\"ui-radio-group\" disabled>\n  ...\n</fieldset>"
+        }
+      ]
+    }
+  ],
+  "customization": [
+    {
+      "token": "--ui-radio-group-spacing",
+      "default": "var(--ui-space-1)",
+      "description": "Gap between radio items"
+    },
+    {
+      "token": "--ui-radio-group-legend-size",
+      "default": "var(--ui-font-size-sm)",
+      "description": "Legend font size"
+    },
+    {
+      "token": "--ui-radio-group-legend-weight",
+      "default": "var(--ui-weight-medium)",
+      "description": "Legend font weight"
+    },
+    {
+      "token": "--ui-radio-group-legend-color",
+      "default": "var(--ui-color-text)",
+      "description": "Legend text color"
+    },
+    {
+      "token": "--ui-radio-group-item-gap",
+      "default": "var(--ui-space-1)",
+      "description": "Gap between radio and label text"
+    },
+    {
+      "token": "--ui-radio-group-error-color",
+      "default": "var(--ui-color-danger)",
+      "description": "Legend color in error state"
+    }
+  ]
+}

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

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

@@ -0,0 +1,172 @@
+@use '../../../00-config/tokens/variables' as t;
+
+// @component search-input
+// @element div
+
+@layer components.tokens {
+  .search-input {
+    --_height: var(--ui-search-input-height, var(--ui-row-2, #{t.$row-2}));
+    --_padding-x: var(--ui-search-input-padding-x, var(--ui-space-1, #{t.$space-1}));
+    --_font-size: var(--ui-search-input-font-size, var(--ui-font-size-sm, #{t.$font-size-sm}));
+    --_radius: var(--ui-search-input-radius, var(--ui-radius-md, #{t.$radius-md}));
+    --_bg: var(--ui-search-input-bg, var(--ui-color-bg, #{t.$color-bg}));
+    --_border-color: var(--ui-search-input-border-color, var(--ui-color-border-strong, #{t.$color-border-strong}));
+    --_border-color-focus: var(--ui-search-input-border-color-focus, var(--ui-color-primary, #{t.$color-primary}));
+    --_text: var(--ui-search-input-text, var(--ui-color-text, #{t.$color-text}));
+    --_placeholder: var(--ui-search-input-placeholder, var(--ui-color-text-muted, #{t.$color-text-muted}));
+    --_icon-color: var(--ui-search-input-icon-color, var(--ui-color-text-muted, #{t.$color-text-muted}));
+    --_icon-size: var(--ui-search-input-icon-size, var(--ui-size-md, #{t.size(md)}));
+    --_clear-color: var(--ui-search-input-clear-color, var(--ui-color-text-muted, #{t.$color-text-muted}));
+    --_clear-hover-bg: var(--ui-search-input-clear-hover-bg, var(--ui-color-bg-muted, #{t.$color-bg-muted}));
+  }
+
+  // @modifier size
+  .search-input--sm {
+    --_height: var(--ui-search-input-height-sm, calc(#{t.$row} * 1.5));
+    --_font-size: var(--ui-search-input-font-size-sm, var(--ui-font-size-xs, #{t.$font-size-xs}));
+    --_icon-size: var(--ui-search-input-icon-size-sm, var(--ui-size-sm, #{t.size(sm)}));
+  }
+
+  .search-input--lg {
+    --_height: var(--ui-search-input-height-lg, calc(#{t.$row} * 2.5));
+    --_padding-x: var(--ui-search-input-padding-x-lg, var(--ui-space-2, #{t.$space-2}));
+    --_font-size: var(--ui-search-input-font-size-lg, var(--ui-font-size-md, #{t.$font-size-md}));
+    --_icon-size: var(--ui-search-input-icon-size-lg, var(--ui-size-lg, #{t.size(lg)}));
+  }
+}
+
+@layer components.styles {
+  .search-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 via inner field
+    &: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});
+    }
+
+    // Full width
+    &--block {
+      inline-size: 100%;
+    }
+
+    // Disabled
+    &--disabled,
+    &:has(.search-input__field:disabled) {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  }
+
+  // Search icon
+  .search-input__icon {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+
+    inline-size: var(--_height);
+
+    color: var(--_icon-color);
+
+    pointer-events: none;
+
+    svg {
+      block-size: var(--_icon-size);
+      inline-size: var(--_icon-size);
+
+      fill: none;
+      stroke: currentcolor;
+      stroke-width: 2;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+    }
+  }
+
+  // Native search input
+  .search-input__field {
+    flex: 1;
+
+    block-size: 100%;
+    min-inline-size: 0;
+    padding: 0;
+    padding-inline-end: 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);
+    }
+
+    // Suppress native webkit cancel button
+    &::-webkit-search-cancel-button,
+    &::-webkit-search-decoration {
+      appearance: none;
+    }
+  }
+
+  // Field padding when clear button present
+  .search-input--has-clear .search-input__field {
+    padding-inline-end: 0;
+  }
+
+  // Clear button
+  .search-input__clear {
+    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(--_clear-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(--_clear-hover-bg);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--ui-color-focus, #{t.$color-focus});
+      outline-offset: -2px;
+    }
+
+    svg {
+      block-size: var(--_icon-size);
+      inline-size: var(--_icon-size);
+
+      fill: none;
+      stroke: currentcolor;
+      stroke-width: 2;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+    }
+  }
+}

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

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