@teseor/css 1.14.2 → 1.15.0

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

@@ -1,339 +0,0 @@
-{
-  "id": "checkbox-group",
-  "type": "component",
-  "mergeInto": "checkbox",
-  "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/components/forms/field/field.docs.json

@@ -1,276 +0,0 @@
-{
-  "id": "field",
-  "type": "component",
-  "title": "Field",
-  "description": "Form field wrapper that combines label, control, helper text, and error message.",
-  "api": "./field.api.json",
-  "sections": [
-    {
-      "title": "Default",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-field",
-              "children": [
-                {
-                  "tag": "label",
-                  "class": "ui-label",
-                  "text": "Email",
-                  "attrs": {
-                    "for": "email"
-                  }
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-field__control",
-                  "children": [
-                    {
-                      "tag": "input",
-                      "class": "ui-input",
-                      "attrs": {
-                        "type": "email",
-                        "id": "email",
-                        "placeholder": "Enter email"
-                      }
-                    }
-                  ]
-                }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-field\">\n  <label class=\"ui-label\" for=\"email\">Email</label>\n  <div class=\"ui-field__control\">\n    <input type=\"email\" id=\"email\" class=\"ui-input\">\n  </div>\n</div>"
-        }
-      ]
-    },
-    {
-      "title": "With Helper Text",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-field",
-              "children": [
-                {
-                  "tag": "label",
-                  "class": "ui-label",
-                  "text": "Password",
-                  "attrs": {
-                    "for": "password"
-                  }
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-field__control",
-                  "children": [
-                    {
-                      "tag": "input",
-                      "class": "ui-input",
-                      "attrs": {
-                        "type": "password",
-                        "id": "password"
-                      }
-                    },
-                    {
-                      "tag": "span",
-                      "class": "ui-form-helper",
-                      "text": "Must be at least 8 characters"
-                    }
-                  ]
-                }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-field\">\n  <label class=\"ui-label\" for=\"password\">Password</label>\n  <div class=\"ui-field__control\">\n    <input type=\"password\" id=\"password\" class=\"ui-input\">\n    <span class=\"ui-form-helper\">Must be at least 8 characters</span>\n  </div>\n</div>"
-        }
-      ]
-    },
-    {
-      "title": "With Error",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-field",
-              "children": [
-                {
-                  "tag": "label",
-                  "class": "ui-label",
-                  "text": "Username",
-                  "attrs": {
-                    "for": "username"
-                  }
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-field__control",
-                  "children": [
-                    {
-                      "tag": "input",
-                      "class": "ui-input ui-input--error",
-                      "attrs": {
-                        "type": "text",
-                        "id": "username",
-                        "value": "ab"
-                      }
-                    },
-                    {
-                      "tag": "span",
-                      "class": "ui-form-error",
-                      "text": "Username must be at least 3 characters"
-                    }
-                  ]
-                }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-field\">\n  <label class=\"ui-label\" for=\"username\">Username</label>\n  <div class=\"ui-field__control\">\n    <input type=\"text\" id=\"username\" class=\"ui-input ui-input--error\">\n    <span class=\"ui-form-error\">Username must be at least 3 characters</span>\n  </div>\n</div>"
-        }
-      ]
-    },
-    {
-      "title": "Horizontal Layout",
-      "description": "Label beside control for wider forms",
-      "api": "./field.api.json",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-field ui-field--horizontal",
-              "children": [
-                {
-                  "tag": "label",
-                  "class": "ui-label ui-field__label",
-                  "text": "Full Name",
-                  "attrs": {
-                    "for": "name"
-                  }
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-field__control",
-                  "children": [
-                    {
-                      "tag": "input",
-                      "class": "ui-input",
-                      "attrs": {
-                        "type": "text",
-                        "id": "name"
-                      }
-                    },
-                    {
-                      "tag": "span",
-                      "class": "ui-form-helper",
-                      "text": "As it appears on your ID"
-                    }
-                  ]
-                }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-field ui-field--horizontal\">\n  <label class=\"ui-label ui-field__label\" for=\"name\">Full Name</label>\n  <div class=\"ui-field__control\">\n    <input type=\"text\" id=\"name\" class=\"ui-input\">\n    <span class=\"ui-form-helper\">As it appears on your ID</span>\n  </div>\n</div>"
-        }
-      ]
-    },
-    {
-      "title": "Responsive Layout",
-      "description": "Auto-switches to horizontal layout when container is wide enough (>= 30rem). Requires a parent with container-type: inline-size (use ui-container-inline utility).",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-container-inline",
-              "children": [
-                {
-                  "tag": "div",
-                  "class": "ui-field ui-field--responsive",
-                  "children": [
-                    {
-                      "tag": "label",
-                      "class": "ui-label ui-field__label",
-                      "text": "Full Name",
-                      "attrs": {
-                        "for": "resp-name"
-                      }
-                    },
-                    {
-                      "tag": "div",
-                      "class": "ui-field__control",
-                      "children": [
-                        {
-                          "tag": "input",
-                          "class": "ui-input",
-                          "attrs": {
-                            "type": "text",
-                            "id": "resp-name"
-                          }
-                        },
-                        {
-                          "tag": "span",
-                          "class": "ui-form-helper",
-                          "text": "Stacks vertically in narrow containers, horizontal at >= 30rem"
-                        }
-                      ]
-                    }
-                  ]
-                }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-container-inline\">\n  <div class=\"ui-field ui-field--responsive\">\n    <label class=\"ui-label ui-field__label\" for=\"name\">Full Name</label>\n    <div class=\"ui-field__control\">\n      <input type=\"text\" id=\"name\" class=\"ui-input\">\n    </div>\n  </div>\n</div>"
-        }
-      ]
-    },
-    {
-      "title": "Required Field",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-field",
-              "children": [
-                {
-                  "tag": "label",
-                  "class": "ui-label ui-label--required",
-                  "text": "Required Field",
-                  "attrs": {
-                    "for": "req"
-                  }
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-field__control",
-                  "children": [
-                    {
-                      "tag": "input",
-                      "class": "ui-input",
-                      "attrs": {
-                        "type": "text",
-                        "id": "req",
-                        "required": ""
-                      }
-                    }
-                  ]
-                }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-field\">\n  <label class=\"ui-label ui-label--required\" for=\"req\">Required Field</label>\n  <div class=\"ui-field__control\">\n    <input type=\"text\" id=\"req\" class=\"ui-input\" required>\n  </div>\n</div>"
-        }
-      ]
-    }
-  ],
-  "customization": [
-    {
-      "token": "--ui-field-gap",
-      "default": "0",
-      "description": "Gap between field elements"
-    }
-  ]
-}