@teseor/css 1.4.0 → 1.6.0

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

@@ -0,0 +1,338 @@
+{
+  "id": "checkbox-group",
+  "type": "component",
+  "title": "Checkbox Group",
+  "description": "Groups related checkboxes with a legend and consistent spacing. Built on native fieldset semantics.",
+  "api": "./checkbox-group.api.json",
+  "sections": [
+    {
+      "title": "Default",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "fieldset",
+              "class": "ui-checkbox-group",
+              "children": [
+                {
+                  "tag": "legend",
+                  "class": "ui-checkbox-group__legend",
+                  "text": "Notifications"
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-checkbox-group__items",
+                  "children": [
+                    {
+                      "tag": "label",
+                      "class": "ui-checkbox-group__item",
+                      "children": [
+                        {
+                          "tag": "input",
+                          "class": "ui-checkbox",
+                          "attrs": { "type": "checkbox", "checked": "" }
+                        },
+                        { "tag": "span", "text": "Email" }
+                      ]
+                    },
+                    {
+                      "tag": "label",
+                      "class": "ui-checkbox-group__item",
+                      "children": [
+                        { "tag": "input", "class": "ui-checkbox", "attrs": { "type": "checkbox" } },
+                        { "tag": "span", "text": "SMS" }
+                      ]
+                    },
+                    {
+                      "tag": "label",
+                      "class": "ui-checkbox-group__item",
+                      "children": [
+                        { "tag": "input", "class": "ui-checkbox", "attrs": { "type": "checkbox" } },
+                        { "tag": "span", "text": "Push" }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "code": "<fieldset class=\"ui-checkbox-group\">\n  <legend class=\"ui-checkbox-group__legend\">Notifications</legend>\n  <div class=\"ui-checkbox-group__items\">\n    <label class=\"ui-checkbox-group__item\">\n      <input type=\"checkbox\" class=\"ui-checkbox\" checked>\n      <span>Email</span>\n    </label>\n    ...\n  </div>\n</fieldset>"
+        }
+      ]
+    },
+    {
+      "title": "Horizontal",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "fieldset",
+              "class": "ui-checkbox-group ui-checkbox-group--horizontal",
+              "children": [
+                {
+                  "tag": "legend",
+                  "class": "ui-checkbox-group__legend",
+                  "text": "Interests"
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-checkbox-group__items",
+                  "children": [
+                    {
+                      "tag": "label",
+                      "class": "ui-checkbox-group__item",
+                      "children": [
+                        {
+                          "tag": "input",
+                          "class": "ui-checkbox",
+                          "attrs": { "type": "checkbox", "checked": "" }
+                        },
+                        { "tag": "span", "text": "Design" }
+                      ]
+                    },
+                    {
+                      "tag": "label",
+                      "class": "ui-checkbox-group__item",
+                      "children": [
+                        { "tag": "input", "class": "ui-checkbox", "attrs": { "type": "checkbox" } },
+                        { "tag": "span", "text": "Engineering" }
+                      ]
+                    },
+                    {
+                      "tag": "label",
+                      "class": "ui-checkbox-group__item",
+                      "children": [
+                        {
+                          "tag": "input",
+                          "class": "ui-checkbox",
+                          "attrs": { "type": "checkbox", "checked": "" }
+                        },
+                        { "tag": "span", "text": "Product" }
+                      ]
+                    },
+                    {
+                      "tag": "label",
+                      "class": "ui-checkbox-group__item",
+                      "children": [
+                        { "tag": "input", "class": "ui-checkbox", "attrs": { "type": "checkbox" } },
+                        { "tag": "span", "text": "Marketing" }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "code": "<fieldset class=\"ui-checkbox-group ui-checkbox-group--horizontal\">\n  <legend class=\"ui-checkbox-group__legend\">Interests</legend>\n  ...\n</fieldset>"
+        }
+      ]
+    },
+    {
+      "title": "Compact",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "fieldset",
+              "class": "ui-checkbox-group ui-checkbox-group--compact",
+              "children": [
+                {
+                  "tag": "legend",
+                  "class": "ui-checkbox-group__legend",
+                  "text": "Features"
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-checkbox-group__items",
+                  "children": [
+                    {
+                      "tag": "label",
+                      "class": "ui-checkbox-group__item",
+                      "children": [
+                        {
+                          "tag": "input",
+                          "class": "ui-checkbox",
+                          "attrs": { "type": "checkbox", "checked": "" }
+                        },
+                        { "tag": "span", "text": "Dark mode" }
+                      ]
+                    },
+                    {
+                      "tag": "label",
+                      "class": "ui-checkbox-group__item",
+                      "children": [
+                        {
+                          "tag": "input",
+                          "class": "ui-checkbox",
+                          "attrs": { "type": "checkbox", "checked": "" }
+                        },
+                        { "tag": "span", "text": "Notifications" }
+                      ]
+                    },
+                    {
+                      "tag": "label",
+                      "class": "ui-checkbox-group__item",
+                      "children": [
+                        { "tag": "input", "class": "ui-checkbox", "attrs": { "type": "checkbox" } },
+                        { "tag": "span", "text": "Analytics" }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "code": "<fieldset class=\"ui-checkbox-group ui-checkbox-group--compact\">\n  ...\n</fieldset>"
+        }
+      ]
+    },
+    {
+      "title": "Error State",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "fieldset",
+              "class": "ui-checkbox-group ui-checkbox-group--error",
+              "children": [
+                {
+                  "tag": "legend",
+                  "class": "ui-checkbox-group__legend",
+                  "text": "Terms"
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-checkbox-group__items",
+                  "children": [
+                    {
+                      "tag": "label",
+                      "class": "ui-checkbox-group__item",
+                      "children": [
+                        {
+                          "tag": "input",
+                          "class": "ui-checkbox ui-checkbox--error",
+                          "attrs": { "type": "checkbox" }
+                        },
+                        { "tag": "span", "text": "I accept the terms of service" }
+                      ]
+                    },
+                    {
+                      "tag": "label",
+                      "class": "ui-checkbox-group__item",
+                      "children": [
+                        {
+                          "tag": "input",
+                          "class": "ui-checkbox ui-checkbox--error",
+                          "attrs": { "type": "checkbox" }
+                        },
+                        { "tag": "span", "text": "I accept the privacy policy" }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "tag": "span",
+                  "class": "ui-form-error",
+                  "text": "You must accept all terms to continue"
+                }
+              ]
+            }
+          ],
+          "code": "<fieldset class=\"ui-checkbox-group ui-checkbox-group--error\">\n  <legend class=\"ui-checkbox-group__legend\">Terms</legend>\n  <div class=\"ui-checkbox-group__items\">\n    <label class=\"ui-checkbox-group__item\">\n      <input type=\"checkbox\" class=\"ui-checkbox ui-checkbox--error\">\n      <span>I accept the terms of service</span>\n    </label>\n    ...\n  </div>\n  <span class=\"ui-form-error\">You must accept all terms to continue</span>\n</fieldset>"
+        }
+      ]
+    },
+    {
+      "title": "Disabled",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "fieldset",
+              "class": "ui-checkbox-group",
+              "attrs": { "disabled": "" },
+              "children": [
+                {
+                  "tag": "legend",
+                  "class": "ui-checkbox-group__legend",
+                  "text": "Permissions (locked)"
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-checkbox-group__items",
+                  "children": [
+                    {
+                      "tag": "label",
+                      "class": "ui-checkbox-group__item",
+                      "children": [
+                        {
+                          "tag": "input",
+                          "class": "ui-checkbox",
+                          "attrs": { "type": "checkbox", "checked": "" }
+                        },
+                        { "tag": "span", "text": "Read" }
+                      ]
+                    },
+                    {
+                      "tag": "label",
+                      "class": "ui-checkbox-group__item",
+                      "children": [
+                        {
+                          "tag": "input",
+                          "class": "ui-checkbox",
+                          "attrs": { "type": "checkbox", "checked": "" }
+                        },
+                        { "tag": "span", "text": "Write" }
+                      ]
+                    },
+                    {
+                      "tag": "label",
+                      "class": "ui-checkbox-group__item",
+                      "children": [
+                        { "tag": "input", "class": "ui-checkbox", "attrs": { "type": "checkbox" } },
+                        { "tag": "span", "text": "Admin" }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "code": "<fieldset class=\"ui-checkbox-group\" disabled>\n  ...\n</fieldset>"
+        }
+      ]
+    }
+  ],
+  "customization": [
+    {
+      "token": "--ui-checkbox-group-spacing",
+      "default": "var(--ui-space-1)",
+      "description": "Gap between checkbox items"
+    },
+    {
+      "token": "--ui-checkbox-group-legend-size",
+      "default": "var(--ui-font-size-sm)",
+      "description": "Legend font size"
+    },
+    {
+      "token": "--ui-checkbox-group-legend-weight",
+      "default": "var(--ui-weight-medium)",
+      "description": "Legend font weight"
+    },
+    {
+      "token": "--ui-checkbox-group-legend-color",
+      "default": "var(--ui-color-text)",
+      "description": "Legend text color"
+    },
+    {
+      "token": "--ui-checkbox-group-item-gap",
+      "default": "var(--ui-space-1)",
+      "description": "Gap between checkbox and label text"
+    },
+    {
+      "token": "--ui-checkbox-group-error-color",
+      "default": "var(--ui-color-danger)",
+      "description": "Legend color in error state"
+    }
+  ]
+}

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

package/src/04-components/forms/checkbox-group/index.scss

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

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

@@ -0,0 +1,49 @@
+{
+  "name": "fieldset",
+  "element": "fieldset",
+  "modifiers": {
+    "bordered": {
+      "type": "boolean"
+    },
+    "compact": {
+      "type": "boolean"
+    }
+  },
+  "elements": {
+    "legend": {}
+  },
+  "cssVars": [
+    {
+      "name": "--ui-fieldset-spacing",
+      "default": "var(--ui-space-2)"
+    },
+    {
+      "name": "--ui-fieldset-border-color",
+      "default": "var(--ui-color-border)"
+    },
+    {
+      "name": "--ui-fieldset-border-width",
+      "default": "var(--ui-border-width-sm)"
+    },
+    {
+      "name": "--ui-fieldset-border-radius",
+      "default": "var(--ui-radius-md)"
+    },
+    {
+      "name": "--ui-fieldset-padding",
+      "default": "var(--ui-space-2)"
+    },
+    {
+      "name": "--ui-fieldset-legend-size",
+      "default": "var(--ui-font-size-sm)"
+    },
+    {
+      "name": "--ui-fieldset-legend-weight",
+      "default": "var(--ui-weight-medium)"
+    },
+    {
+      "name": "--ui-fieldset-legend-color",
+      "default": "var(--ui-color-text)"
+    }
+  ]
+}