@teseor/css 1.7.0 → 1.9.0

package/src/04-components/feedback/skeleton/skeleton.docs.json

@@ -1,62 +0,0 @@
-{
-  "id": "skeleton",
-  "type": "component",
-  "title": "Skeleton",
-  "description": "Loading placeholder with shimmer animation for content loading states.",
-  "api": "./skeleton.api.json",
-  "sections": [
-    {
-      "title": "Text Lines",
-      "examples": [
-        {
-          "html": "<div style=\"display: flex; flex-direction: column; gap: var(--ui-space-1);\"><div class=\"ui-skeleton ui-skeleton--text\"></div><div class=\"ui-skeleton ui-skeleton--text\" style=\"width: 80%;\"></div><div class=\"ui-skeleton ui-skeleton--text\" style=\"width: 60%;\"></div></div>",
-          "code": "<div class=\"ui-skeleton ui-skeleton--text\"></div>\n<div class=\"ui-skeleton ui-skeleton--text\" style=\"width: 80%;\"></div>\n<div class=\"ui-skeleton ui-skeleton--text\" style=\"width: 60%;\"></div>"
-        }
-      ]
-    },
-    {
-      "title": "Shapes",
-      "examples": [
-        {
-          "html": "<div style=\"display: flex; gap: var(--ui-space-2); align-items: flex-start;\"><div class=\"ui-skeleton ui-skeleton--circle\"></div><div style=\"flex: 1; display: flex; flex-direction: column; gap: var(--ui-space-1);\"><div class=\"ui-skeleton ui-skeleton--heading\"></div><div class=\"ui-skeleton ui-skeleton--text\"></div></div></div>",
-          "code": "<div class=\"ui-skeleton ui-skeleton--circle\"></div>\n<div class=\"ui-skeleton ui-skeleton--heading\"></div>\n<div class=\"ui-skeleton ui-skeleton--text\"></div>"
-        }
-      ]
-    },
-    {
-      "title": "Card Skeleton",
-      "examples": [
-        {
-          "html": "<div class=\"ui-card\" style=\"width: 300px;\"><div class=\"ui-skeleton ui-skeleton--rect\"></div><div style=\"padding: var(--ui-space-2); display: flex; flex-direction: column; gap: var(--ui-space-1);\"><div class=\"ui-skeleton ui-skeleton--heading\"></div><div class=\"ui-skeleton ui-skeleton--text\"></div><div class=\"ui-skeleton ui-skeleton--text\" style=\"width: 70%;\"></div></div></div>",
-          "code": "<div class=\"ui-card\">\n  <div class=\"ui-skeleton ui-skeleton--rect\"></div>\n  <div class=\"ui-skeleton ui-skeleton--heading\"></div>\n  <div class=\"ui-skeleton ui-skeleton--text\"></div>\n</div>"
-        }
-      ]
-    },
-    {
-      "title": "Pulse Animation",
-      "examples": [
-        {
-          "html": "<div class=\"ui-skeleton ui-skeleton--text ui-skeleton--pulse\"></div>",
-          "code": "<div class=\"ui-skeleton ui-skeleton--text ui-skeleton--pulse\"></div>"
-        }
-      ]
-    }
-  ],
-  "customization": [
-    {
-      "token": "--ui-skeleton-bg",
-      "default": "var(--ui-color-bg-subtle)",
-      "description": "Background color"
-    },
-    {
-      "token": "--ui-skeleton-shimmer",
-      "default": "rgb(255 255 255 / 0.5)",
-      "description": "Shimmer highlight color"
-    },
-    {
-      "token": "--ui-skeleton-radius",
-      "default": "var(--ui-radius-sm)",
-      "description": "Border radius"
-    }
-  ]
-}

package/src/04-components/feedback/spinner/spinner.api.json

@@ -1,63 +0,0 @@
-{
-  "name": "spinner",
-  "element": "div",
-  "modifiers": {
-    "size": {
-      "values": ["xs", "sm", "lg", "xl"]
-    }
-  },
-  "cssVars": [
-    {
-      "name": "--ui-spinner-size",
-      "default": "var(--unit)"
-    },
-    {
-      "name": "--ui-spinner-border-width",
-      "default": "var(--ui-border-width-md)"
-    },
-    {
-      "name": "--ui-spinner-color",
-      "default": "currentcolor"
-    },
-    {
-      "name": "--ui-spinner-track-color",
-      "default": "transparent"
-    },
-    {
-      "name": "--ui-spinner-duration",
-      "default": "750ms"
-    },
-    {
-      "name": "--ui-spinner-size-xs",
-      "default": "var(--unit)"
-    },
-    {
-      "name": "--ui-spinner-border-width-xs",
-      "default": "var(--ui-border-width-sm)"
-    },
-    {
-      "name": "--ui-spinner-size-sm",
-      "default": "var(--unit)"
-    },
-    {
-      "name": "--ui-spinner-border-width-sm",
-      "default": "var(--ui-border-width-md)"
-    },
-    {
-      "name": "--ui-spinner-size-lg",
-      "default": "var(--unit)"
-    },
-    {
-      "name": "--ui-spinner-border-width-lg",
-      "default": "var(--ui-border-width-md)"
-    },
-    {
-      "name": "--ui-spinner-size-xl",
-      "default": "var(--unit)"
-    },
-    {
-      "name": "--ui-spinner-border-width-xl",
-      "default": "var(--ui-border-width-lg)"
-    }
-  ]
-}

package/src/04-components/feedback/toast/toast.api.json

@@ -1,64 +0,0 @@
-{
-  "name": "toast",
-  "element": "div",
-  "modifiers": {
-    "variant": {
-      "values": ["success", "warning", "danger", "info"]
-    }
-  },
-  "elements": {
-    "content": {},
-    "title": {},
-    "description": {},
-    "close": {},
-    "action": {}
-  },
-  "relatedComponents": [
-    {
-      "name": "toast-viewport",
-      "modifiers": {
-        "position": {
-          "values": ["top-end", "bottom-end"]
-        }
-      }
-    }
-  ],
-  "cssVars": [
-    {
-      "name": "--ui-toast-viewport-gap",
-      "default": "calc(#{t.$unit} * 1"
-    },
-    {
-      "name": "--ui-toast-viewport-padding",
-      "default": "calc(#{t.$unit} * 2"
-    },
-    {
-      "name": "--ui-toast-viewport-max-width",
-      "default": "420px"
-    },
-    {
-      "name": "--ui-toast-padding",
-      "default": "calc(#{t.$unit} * 2"
-    },
-    {
-      "name": "--ui-toast-gap",
-      "default": "calc(#{t.$unit} * 1"
-    },
-    {
-      "name": "--ui-toast-radius",
-      "default": "var(--ui-radius-md)"
-    },
-    {
-      "name": "--ui-toast-bg",
-      "default": "var(--ui-color-bg)"
-    },
-    {
-      "name": "--ui-toast-border-color",
-      "default": "var(--ui-color-border)"
-    },
-    {
-      "name": "--ui-toast-shadow",
-      "default": "var(--shadow-lg)"
-    }
-  ]
-}

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

@@ -1,99 +0,0 @@
-{
-  "api": "./toast.api.json",
-  "sections": [
-    {
-      "title": "Default",
-      "examples": [
-        {
-          "html": "<div class=\"ui-toast\"><div class=\"ui-toast__content\"><p class=\"ui-toast__title\">Notification</p><p class=\"ui-toast__description\">Your changes have been saved.</p></div><button class=\"ui-toast__close\">X</button></div>"
-        }
-      ]
-    },
-    {
-      "title": "Variants",
-      "examples": [
-        {
-          "html": "<div class=\"ui-toast ui-toast--success\"><div class=\"ui-toast__content\"><p class=\"ui-toast__title\">Success</p><p class=\"ui-toast__description\">Operation completed successfully.</p></div></div>",
-          "layout": "stack"
-        },
-        {
-          "html": "<div class=\"ui-toast ui-toast--warning\"><div class=\"ui-toast__content\"><p class=\"ui-toast__title\">Warning</p><p class=\"ui-toast__description\">Please review before continuing.</p></div></div>",
-          "layout": "stack"
-        },
-        {
-          "html": "<div class=\"ui-toast ui-toast--danger\"><div class=\"ui-toast__content\"><p class=\"ui-toast__title\">Error</p><p class=\"ui-toast__description\">Something went wrong.</p></div></div>",
-          "layout": "stack"
-        },
-        {
-          "html": "<div class=\"ui-toast ui-toast--info\"><div class=\"ui-toast__content\"><p class=\"ui-toast__title\">Info</p><p class=\"ui-toast__description\">New updates available.</p></div></div>",
-          "layout": "stack"
-        }
-      ]
-    },
-    {
-      "title": "With Action",
-      "examples": [
-        {
-          "html": "<div class=\"ui-toast\"><div class=\"ui-toast__content\"><p class=\"ui-toast__title\">File deleted</p><p class=\"ui-toast__description\">document.pdf was moved to trash.</p></div><button class=\"ui-toast__action ui-button ui-button--sm ui-button--secondary\">Undo</button><button class=\"ui-toast__close\">X</button></div>"
-        }
-      ]
-    },
-    {
-      "title": "Viewport Positions",
-      "description": "Container positions for toast placement",
-      "examples": [
-        {
-          "html": "<div style=\"position:relative;height:200px;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)\"><div class=\"ui-toast-viewport ui-toast-viewport--top-end\" style=\"position:absolute\"><div class=\"ui-toast\"><div class=\"ui-toast__content\"><p class=\"ui-toast__title\">Top End</p></div></div></div></div>",
-          "layout": "stack"
-        },
-        {
-          "html": "<div style=\"position:relative;height:200px;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)\"><div class=\"ui-toast-viewport ui-toast-viewport--bottom-end\" style=\"position:absolute\"><div class=\"ui-toast\"><div class=\"ui-toast__content\"><p class=\"ui-toast__title\">Bottom End</p></div></div></div></div>",
-          "layout": "stack"
-        }
-      ]
-    }
-  ],
-  "customization": [
-    {
-      "token": "--ui-toast-viewport-gap",
-      "default": "var(--unit)",
-      "description": "Gap between toasts in viewport"
-    },
-    {
-      "token": "--ui-toast-viewport-padding",
-      "default": "calc(var(--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(--unit) * 2)",
-      "description": "Toast padding"
-    },
-    {
-      "token": "--ui-toast-gap",
-      "default": "var(--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/forms/checkbox/checkbox.api.json

@@ -1,50 +0,0 @@
-{
-  "name": "checkbox",
-  "element": "input",
-  "modifiers": {
-    "size": {
-      "values": ["sm", "lg"]
-    },
-    "error": {
-      "type": "boolean"
-    }
-  },
-  "cssVars": [
-    {
-      "name": "--ui-checkbox-size",
-      "default": "calc(#{t.$unit} * 2"
-    },
-    {
-      "name": "--ui-checkbox-radius",
-      "default": "var(--ui-radius-sm)"
-    },
-    {
-      "name": "--ui-checkbox-bg",
-      "default": "var(--ui-color-bg)"
-    },
-    {
-      "name": "--ui-checkbox-bg-checked",
-      "default": "var(--ui-color-primary)"
-    },
-    {
-      "name": "--ui-checkbox-border-color",
-      "default": "var(--ui-color-border-strong)"
-    },
-    {
-      "name": "--ui-checkbox-border-color-focus",
-      "default": "var(--ui-color-primary)"
-    },
-    {
-      "name": "--ui-checkbox-check-color",
-      "default": "var(--ui-color-text-inverse)"
-    },
-    {
-      "name": "--ui-checkbox-size-lg",
-      "default": "calc(#{t.$unit} * 3"
-    },
-    {
-      "name": "--ui-checkbox-error-border",
-      "default": "var(--ui-color-danger)"
-    }
-  ]
-}

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

@@ -1,54 +0,0 @@
-{
-  "name": "checkbox-group",
-  "element": "fieldset",
-  "modifiers": {
-    "horizontal": {
-      "type": "boolean"
-    },
-    "compact": {
-      "type": "boolean"
-    },
-    "error": {
-      "type": "boolean"
-    }
-  },
-  "elements": {
-    "legend": {},
-    "items": {},
-    "item": {}
-  },
-  "cssVars": [
-    {
-      "name": "--ui-checkbox-group-spacing",
-      "default": "var(--ui-space-1)"
-    },
-    {
-      "name": "--ui-checkbox-group-spacing-compact",
-      "default": "0"
-    },
-    {
-      "name": "--ui-checkbox-group-legend-size",
-      "default": "var(--ui-font-size-sm)"
-    },
-    {
-      "name": "--ui-checkbox-group-legend-weight",
-      "default": "var(--ui-weight-medium)"
-    },
-    {
-      "name": "--ui-checkbox-group-legend-color",
-      "default": "var(--ui-color-text)"
-    },
-    {
-      "name": "--ui-checkbox-group-legend-spacing",
-      "default": "var(--ui-space-1)"
-    },
-    {
-      "name": "--ui-checkbox-group-item-gap",
-      "default": "var(--ui-space-1)"
-    },
-    {
-      "name": "--ui-checkbox-group-error-color",
-      "default": "var(--ui-color-danger)"
-    }
-  ]
-}

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

@@ -1,19 +0,0 @@
-{
-  "name": "field",
-  "element": "div",
-  "modifiers": {
-    "horizontal": {
-      "type": "boolean"
-    }
-  },
-  "elements": {
-    "label": {},
-    "control": {}
-  },
-  "cssVars": [
-    {
-      "name": "--ui-field-gap",
-      "default": "0"
-    }
-  ]
-}

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

@@ -1,59 +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": [
-        {
-          "html": "<div class=\"ui-field\"><label class=\"ui-label\" for=\"email\">Email</label><div class=\"ui-field__control\"><input type=\"email\" id=\"email\" class=\"ui-input\" placeholder=\"Enter email\"></div></div>",
-          "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": [
-        {
-          "html": "<div class=\"ui-field\"><label class=\"ui-label\" for=\"password\">Password</label><div class=\"ui-field__control\"><input type=\"password\" id=\"password\" class=\"ui-input\"><span class=\"ui-form-helper\">Must be at least 8 characters</span></div></div>",
-          "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": [
-        {
-          "html": "<div class=\"ui-field\"><label class=\"ui-label\" for=\"username\">Username</label><div class=\"ui-field__control\"><input type=\"text\" id=\"username\" class=\"ui-input ui-input--error\" value=\"ab\"><span class=\"ui-form-error\">Username must be at least 3 characters</span></div></div>",
-          "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": [
-        {
-          "html": "<div class=\"ui-field ui-field--horizontal\"><label class=\"ui-label ui-field__label\" for=\"name\">Full Name</label><div class=\"ui-field__control\"><input type=\"text\" id=\"name\" class=\"ui-input\"><span class=\"ui-form-helper\">As it appears on your ID</span></div></div>",
-          "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": [
-        {
-          "html": "<div class=\"ui-field\"><label class=\"ui-label ui-label--required\" for=\"req\">Required Field</label><div class=\"ui-field__control\"><input type=\"text\" id=\"req\" class=\"ui-input\" required></div></div>",
-          "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/forms/fieldset/fieldset.api.json

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

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

@@ -1,38 +0,0 @@
-{
-  "name": "form",
-  "element": "form",
-  "modifiers": {
-    "compact": {
-      "type": "boolean"
-    },
-    "inline": {
-      "type": "boolean"
-    }
-  },
-  "elements": {
-    "section": {},
-    "actions": {}
-  },
-  "cssVars": [
-    {
-      "name": "--ui-form-spacing",
-      "default": "var(--ui-space-3)"
-    },
-    {
-      "name": "--ui-form-actions-gap",
-      "default": "var(--ui-space-2)"
-    },
-    {
-      "name": "--ui-form-section-spacing",
-      "default": "var(--ui-space-4)"
-    },
-    {
-      "name": "--ui-form-spacing-compact",
-      "default": "var(--ui-space-2)"
-    },
-    {
-      "name": "--ui-form-section-spacing-compact",
-      "default": "var(--ui-space-3)"
-    }
-  ]
-}

package/src/04-components/forms/form-error/form-error.api.json

@@ -1,22 +0,0 @@
-{
-  "name": "form-error",
-  "element": "div",
-  "modifiers": {},
-  "elements": {
-    "icon": {}
-  },
-  "cssVars": [
-    {
-      "name": "--ui-form-error-color",
-      "default": "var(--ui-color-danger)"
-    },
-    {
-      "name": "--ui-form-error-size",
-      "default": "var(--ui-font-size-sm)"
-    },
-    {
-      "name": "--ui-form-error-gap",
-      "default": "0"
-    }
-  ]
-}

package/src/04-components/forms/form-helper/form-helper.api.json

@@ -1,19 +0,0 @@
-{
-  "name": "form-helper",
-  "element": "div",
-  "modifiers": {},
-  "cssVars": [
-    {
-      "name": "--ui-form-helper-color",
-      "default": "var(--ui-color-text-muted)"
-    },
-    {
-      "name": "--ui-form-helper-size",
-      "default": "var(--ui-font-size-sm)"
-    },
-    {
-      "name": "--ui-form-helper-gap",
-      "default": "0"
-    }
-  ]
-}