@teseor/css 1.6.0 → 1.8.0

package/src/components/feedback/toast/toast.docs.json

@@ -0,0 +1,281 @@
+{
+  "id": "toast",
+  "type": "component",
+  "title": "Toast",
+  "api": "./toast.api.json",
+  "sections": [
+    {
+      "title": "Default",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-toast",
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-toast__content",
+                  "children": [
+                    { "tag": "p", "class": "ui-toast__title", "text": "Notification" },
+                    {
+                      "tag": "p",
+                      "class": "ui-toast__description",
+                      "text": "Your changes have been saved."
+                    }
+                  ]
+                },
+                { "tag": "button", "class": "ui-toast__close", "text": "X" }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Variants",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-toast ui-toast--success",
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-toast__content",
+                  "children": [
+                    { "tag": "p", "class": "ui-toast__title", "text": "Success" },
+                    {
+                      "tag": "p",
+                      "class": "ui-toast__description",
+                      "text": "Operation completed successfully."
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "layout": "column"
+        },
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-toast ui-toast--warning",
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-toast__content",
+                  "children": [
+                    { "tag": "p", "class": "ui-toast__title", "text": "Warning" },
+                    {
+                      "tag": "p",
+                      "class": "ui-toast__description",
+                      "text": "Please review before continuing."
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "layout": "column"
+        },
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-toast ui-toast--danger",
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-toast__content",
+                  "children": [
+                    { "tag": "p", "class": "ui-toast__title", "text": "Error" },
+                    {
+                      "tag": "p",
+                      "class": "ui-toast__description",
+                      "text": "Something went wrong."
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "layout": "column"
+        },
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-toast ui-toast--info",
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-toast__content",
+                  "children": [
+                    { "tag": "p", "class": "ui-toast__title", "text": "Info" },
+                    {
+                      "tag": "p",
+                      "class": "ui-toast__description",
+                      "text": "New updates available."
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "layout": "column"
+        }
+      ]
+    },
+    {
+      "title": "With Action",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-toast",
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-toast__content",
+                  "children": [
+                    { "tag": "p", "class": "ui-toast__title", "text": "File deleted" },
+                    {
+                      "tag": "p",
+                      "class": "ui-toast__description",
+                      "text": "document.pdf was moved to trash."
+                    }
+                  ]
+                },
+                {
+                  "tag": "button",
+                  "class": "ui-toast__action ui-button ui-button--sm ui-button--secondary",
+                  "text": "Undo"
+                },
+                { "tag": "button", "class": "ui-toast__close", "text": "X" }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Viewport Positions",
+      "description": "Container positions for toast placement",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "attrs": {
+                "style": "position:relative;height:200px;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)"
+              },
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-toast-viewport ui-toast-viewport--top-end",
+                  "attrs": { "style": "position:absolute" },
+                  "children": [
+                    {
+                      "tag": "div",
+                      "class": "ui-toast",
+                      "children": [
+                        {
+                          "tag": "div",
+                          "class": "ui-toast__content",
+                          "children": [
+                            { "tag": "p", "class": "ui-toast__title", "text": "Top End" }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "layout": "column"
+        },
+        {
+          "items": [
+            {
+              "tag": "div",
+              "attrs": {
+                "style": "position:relative;height:200px;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)"
+              },
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-toast-viewport ui-toast-viewport--bottom-end",
+                  "attrs": { "style": "position:absolute" },
+                  "children": [
+                    {
+                      "tag": "div",
+                      "class": "ui-toast",
+                      "children": [
+                        {
+                          "tag": "div",
+                          "class": "ui-toast__content",
+                          "children": [
+                            { "tag": "p", "class": "ui-toast__title", "text": "Bottom End" }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "layout": "column"
+        }
+      ]
+    }
+  ],
+  "customization": [
+    {
+      "token": "--ui-toast-viewport-gap",
+      "default": "var(--ui-unit)",
+      "description": "Gap between toasts in viewport"
+    },
+    {
+      "token": "--ui-toast-viewport-padding",
+      "default": "calc(var(--ui-unit) * 2)",
+      "description": "Viewport padding from edges"
+    },
+    {
+      "token": "--ui-toast-viewport-max-width",
+      "default": "420px",
+      "description": "Maximum toast width"
+    },
+    {
+      "token": "--ui-toast-padding",
+      "default": "calc(var(--ui-unit) * 2)",
+      "description": "Toast padding"
+    },
+    {
+      "token": "--ui-toast-gap",
+      "default": "var(--ui-unit)",
+      "description": "Gap between toast elements"
+    },
+    {
+      "token": "--ui-toast-radius",
+      "default": "var(--ui-radius-md)",
+      "description": "Border radius"
+    },
+    {
+      "token": "--ui-toast-bg",
+      "default": "var(--ui-color-bg)",
+      "description": "Background color"
+    },
+    {
+      "token": "--ui-toast-border-color",
+      "default": "var(--ui-color-border)",
+      "description": "Border color"
+    },
+    { "token": "--ui-toast-shadow", "default": "var(--shadow-lg)", "description": "Box shadow" }
+  ]
+}

package/src/{04-components → components}/forms/checkbox/checkbox.api.json

@@ -5,14 +5,14 @@
     "size": {
       "values": ["sm", "lg"]
     },
-    "error": {
-      "type": "boolean"
+    "state": {
+      "values": ["error", "success"]
     }
   },
   "cssVars": [
     {
       "name": "--ui-checkbox-size",
-      "default": "calc(#{t.$unit} * 2"
+      "default": "calc(var(--ui-unit) * 2"
     },
     {
       "name": "--ui-checkbox-radius",
@@ -40,11 +40,15 @@
     },
     {
       "name": "--ui-checkbox-size-lg",
-      "default": "calc(#{t.$unit} * 3"
+      "default": "calc(var(--ui-unit) * 3"
     },
     {
       "name": "--ui-checkbox-error-border",
       "default": "var(--ui-color-danger)"
+    },
+    {
+      "name": "--ui-checkbox-success-border",
+      "default": "var(--ui-color-success)"
     }
   ]
 }

package/src/{04-components → components}/forms/checkbox/checkbox.docs.json

@@ -9,7 +9,7 @@
       "title": "Default",
       "examples": [
         {
-          "layout": "cluster",
+          "layout": "row",
           "items": [
             { "tag": "input", "class": "ui-checkbox", "attrs": { "type": "checkbox" } },
             {
@@ -26,7 +26,7 @@
       "title": "Sizes",
       "examples": [
         {
-          "layout": "cluster",
+          "layout": "row",
           "items": [
             {
               "tag": "input",
@@ -52,7 +52,7 @@
       "title": "States",
       "examples": [
         {
-          "layout": "cluster",
+          "layout": "row",
           "items": [
             { "tag": "input", "class": "ui-checkbox", "attrs": { "type": "checkbox" } },
             {
@@ -76,10 +76,10 @@
       ]
     },
     {
-      "title": "Error State",
+      "title": "Validation States",
       "examples": [
         {
-          "layout": "cluster",
+          "layout": "row",
           "items": [
             {
               "tag": "input",
@@ -90,9 +90,19 @@
               "tag": "input",
               "class": "ui-checkbox ui-checkbox--error",
               "attrs": { "type": "checkbox", "checked": "" }
+            },
+            {
+              "tag": "input",
+              "class": "ui-checkbox ui-checkbox--success",
+              "attrs": { "type": "checkbox" }
+            },
+            {
+              "tag": "input",
+              "class": "ui-checkbox ui-checkbox--success",
+              "attrs": { "type": "checkbox", "checked": "" }
             }
           ],
-          "code": "<input type=\"checkbox\" class=\"ui-checkbox ui-checkbox--error\">\n<input type=\"checkbox\" class=\"ui-checkbox ui-checkbox--error\" checked>"
+          "code": "<input type=\"checkbox\" class=\"ui-checkbox ui-checkbox--error\">\n<input type=\"checkbox\" class=\"ui-checkbox ui-checkbox--error\" checked>\n<input type=\"checkbox\" class=\"ui-checkbox ui-checkbox--success\">\n<input type=\"checkbox\" class=\"ui-checkbox ui-checkbox--success\" checked>"
         }
       ]
     },
@@ -100,8 +110,18 @@
       "title": "With Label",
       "examples": [
         {
-          "html": "<label class=\"ui-cluster\" style=\"gap: var(--ui-space-1); cursor: pointer;\"><input type=\"checkbox\" class=\"ui-checkbox\"><span>Accept terms and conditions</span></label>",
-          "code": "<label class=\"ui-cluster\">\n  <input type=\"checkbox\" class=\"ui-checkbox\">\n  <span>Accept terms</span>\n</label>"
+          "items": [
+            {
+              "tag": "label",
+              "class": "ui-row",
+              "attrs": { "style": "gap: var(--ui-space-1); cursor: pointer;" },
+              "children": [
+                { "tag": "input", "class": "ui-checkbox", "attrs": { "type": "checkbox" } },
+                { "tag": "span", "text": "Accept terms and conditions" }
+              ]
+            }
+          ],
+          "code": "<label class=\"ui-row\">\n  <input type=\"checkbox\" class=\"ui-checkbox\">\n  <span>Accept terms</span>\n</label>"
         }
       ]
     }
@@ -109,12 +129,12 @@
   "customization": [
     {
       "token": "--ui-checkbox-size",
-      "default": "calc(var(--unit) * 2)",
+      "default": "calc(var(--ui-unit) * 2)",
       "description": "Default size"
     },
     {
       "token": "--ui-checkbox-size-lg",
-      "default": "calc(var(--unit) * 3)",
+      "default": "calc(var(--ui-unit) * 3)",
       "description": "Large size"
     },
     {

package/src/{04-components → components}/forms/checkbox/index.scss

@@ -1,4 +1,4 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 
 // @component checkbox
 // @element input
@@ -19,11 +19,16 @@
     --_size: var(--ui-checkbox-size-lg, calc(#{t.$unit} * 3));
   }
 
-  // @modifier boolean error
+  // @modifier state
   .checkbox--error {
     --_border-color: var(--ui-checkbox-error-border, var(--ui-color-danger, #{t.$color-danger}));
     --_border-color-focus: var(--ui-checkbox-error-border, var(--ui-color-danger, #{t.$color-danger}));
   }
+
+  .checkbox--success {
+    --_border-color: var(--ui-checkbox-success-border, var(--ui-color-success, #{t.$color-success}));
+    --_border-color-focus: var(--ui-checkbox-success-border, var(--ui-color-success, #{t.$color-success}));
+  }
 }
 
 @layer components.styles {
@@ -72,7 +77,9 @@
 
     &:focus-visible {
       border-color: var(--_border-color-focus);
-      outline: none;
+      outline: var(--ui-border-width-md, #{t.$border-width-md}) solid transparent;
+      outline-offset: var(--ui-border-width-sm, #{t.$border-width-sm});
+
       box-shadow: 0 0 0 var(--ui-border-width-md, #{t.$border-width-md}) var(--ui-color-focus, #{t.$color-focus});
     }
 
@@ -97,7 +104,7 @@
     }
 
     &:disabled {
-      opacity: 0.5;
+      opacity: var(--ui-opacity-disabled, 0.5);
       cursor: not-allowed;
     }
   }

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

@@ -1,6 +1,7 @@
 {
   "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",

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

@@ -1,4 +1,4 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 
 // @component checkbox-group
 // @element fieldset
@@ -64,7 +64,7 @@
   }
 
   .checkbox-group__item:has(:disabled) {
-    opacity: 0.5;
+    opacity: var(--ui-opacity-disabled, 0.5);
     cursor: not-allowed;
   }
 
@@ -78,7 +78,7 @@
   // Disabled group
   .checkbox-group:disabled,
   .checkbox-group[aria-disabled='true'] {
-    opacity: 0.5;
+    opacity: var(--ui-opacity-disabled, 0.5);
     cursor: not-allowed;
   }
 }

package/src/components/forms/field/field.docs.json

@@ -0,0 +1,190 @@
+{
+  "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": "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" }
+  ]
+}

package/src/{04-components → components}/forms/field/index.scss

@@ -1,4 +1,4 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 
 // Field - form field wrapper
 // Combines label, control, helper text, and error message