twntyx-css 1.0.0

package/llm/components/range-slider.json

@@ -0,0 +1,125 @@
+{
+  "id": "range-slider",
+  "name": "Range slider",
+  "status": "stable",
+  "summary": "Range slider component for selecting numeric values.",
+  "keywords": [
+    "adjust",
+    "control",
+    "drag",
+    "form",
+    "input",
+    "max",
+    "min",
+    "number",
+    "numeric",
+    "range",
+    "range slider",
+    "range-slider",
+    "scale",
+    "slide",
+    "slider",
+    "value"
+  ],
+  "sourcePaths": [
+    "app/design-system/range-slider/page.js",
+    "assets/styles/form-rangeslider.css"
+  ],
+  "apiModel": "html-class",
+  "baseClass": "range-slider",
+  "variants": [],
+  "sizes": [
+    {
+      "name": "range-xs",
+      "className": "range-xs",
+      "description": "Extra small size variant"
+    },
+    {
+      "name": "range-sm",
+      "className": "range-sm",
+      "description": "Small size variant"
+    },
+    {
+      "name": "range-md",
+      "className": "range-md",
+      "description": "Medium size variant (default)"
+    },
+    {
+      "name": "range-lg",
+      "className": "range-lg",
+      "description": "Large size variant"
+    },
+    {
+      "name": "range-xl",
+      "className": "range-xl",
+      "description": "Extra large size variant"
+    }
+  ],
+  "states": [],
+  "structure": {
+    "rootElement": "input",
+    "requiredClasses": [
+      "range-slider"
+    ],
+    "optionalClasses": [
+      "range-xs",
+      "range-sm",
+      "range-md",
+      "range-lg",
+      "range-xl"
+    ],
+    "requiredChildren": [],
+    "optionalChildren": []
+  },
+  "attributes": {
+    "allowed": [
+      "class"
+    ],
+    "required": [],
+    "dataAttributes": [],
+    "roles": [],
+    "aria": []
+  },
+  "a11y": {
+    "interactive": false,
+    "requiredRoles": [],
+    "requiredAria": [],
+    "keyboardSupport": [],
+    "focusBehavior": "No keyboard interaction is required unless nested interactive children are introduced."
+  },
+  "dos": [
+    "Apply the base class 'range-slider' on the root element.",
+    "Use documented modifiers for visual variants instead of ad-hoc custom classes.",
+    "Keep semantic color usage aligned with token classes for light/dark support."
+  ],
+  "donts": [
+    "Do not combine conflicting state classes on the same element.",
+    "Do not rely on undocumented internal classes in production templates.",
+    "Do not remove required accessibility attributes when component is interactive."
+  ],
+  "tokenUsage": [
+    "background-brand",
+    "brand-default",
+    "core-black",
+    "core-white",
+    "line-focus",
+    "line-highlight",
+    "line-strong"
+  ],
+  "examples": [
+    {
+      "id": "canonical",
+      "file": "examples/range-slider.html",
+      "description": "Minimal canonical Range slider usage."
+    }
+  ],
+  "composition": {
+    "patterns": [],
+    "relatedComponents": [],
+    "notes": []
+  },
+  "breakingChangePolicy": {
+    "classContract": "Base class, documented modifiers, and state class names are semver-protected for consumer markup.",
+    "a11yContract": "Documented role and aria requirements are semver-protected for generated markup."
+  }
+}

package/llm/components/scrollbar.json

@@ -0,0 +1,96 @@
+{
+  "id": "scrollbar",
+  "name": "Scrollbar",
+  "status": "stable",
+  "summary": "Alternative scrollbar designs for the browser's scrollbar.",
+  "keywords": [
+    "bar",
+    "container",
+    "custom scrollbar",
+    "overflow",
+    "pane",
+    "scroll",
+    "scroll styling",
+    "scrollbar",
+    "scroller",
+    "scrolling",
+    "thumb",
+    "track",
+    "viewport"
+  ],
+  "sourcePaths": [
+    "app/design-system/scrollbar/page.js",
+    "assets/styles/scrollbar.css"
+  ],
+  "apiModel": "html-class",
+  "baseClass": "scrollbar",
+  "variants": [
+    {
+      "name": "scrollbar",
+      "className": "scrollbar",
+      "description": "Custom scrollbar"
+    }
+  ],
+  "sizes": [],
+  "states": [],
+  "structure": {
+    "rootElement": "div",
+    "requiredClasses": [
+      "scrollbar"
+    ],
+    "optionalClasses": [
+      "scrollbar"
+    ],
+    "requiredChildren": [],
+    "optionalChildren": []
+  },
+  "attributes": {
+    "allowed": [
+      "class"
+    ],
+    "required": [],
+    "dataAttributes": [],
+    "roles": [],
+    "aria": []
+  },
+  "a11y": {
+    "interactive": false,
+    "requiredRoles": [],
+    "requiredAria": [],
+    "keyboardSupport": [],
+    "focusBehavior": "No keyboard interaction is required unless nested interactive children are introduced."
+  },
+  "dos": [
+    "Apply the base class 'scrollbar' on the root element.",
+    "Use documented modifiers for visual variants instead of ad-hoc custom classes.",
+    "Keep semantic color usage aligned with token classes for light/dark support."
+  ],
+  "donts": [
+    "Do not combine conflicting state classes on the same element.",
+    "Do not rely on undocumented internal classes in production templates.",
+    "Do not remove required accessibility attributes when component is interactive."
+  ],
+  "tokenUsage": [
+    "core-ui-100",
+    "core-ui-300",
+    "core-ui-400",
+    "core-ui-500",
+    "core-ui-700"
+  ],
+  "examples": [
+    {
+      "id": "canonical",
+      "file": "examples/scrollbar.html",
+      "description": "Minimal canonical Scrollbar usage."
+    }
+  ],
+  "composition": {
+    "patterns": [],
+    "relatedComponents": [],
+    "notes": []
+  },
+  "breakingChangePolicy": {
+    "classContract": "Base class, documented modifiers, and state class names are semver-protected for consumer markup.",
+    "a11yContract": "Documented role and aria requirements are semver-protected for generated markup."
+  }
+}

package/llm/components/select-input.json

@@ -0,0 +1,224 @@
+{
+  "id": "select-input",
+  "name": "Select input",
+  "status": "stable",
+  "summary": "Select input component for choosing from predefined options.",
+  "keywords": [
+    "choice",
+    "choose",
+    "combobox",
+    "dropdown",
+    "field",
+    "form",
+    "input",
+    "list",
+    "menu",
+    "options",
+    "picker",
+    "select",
+    "select input",
+    "select-input",
+    "selection"
+  ],
+  "sourcePaths": [
+    "app/design-system/select-input/page.js",
+    "assets/styles/button.css",
+    "assets/styles/chat.css",
+    "assets/styles/collapsible.css",
+    "assets/styles/field.css",
+    "assets/styles/form-checkbox-radio-toggle.css",
+    "assets/styles/form-text-select.css",
+    "assets/styles/input-group.css",
+    "assets/styles/toast.css"
+  ],
+  "apiModel": "html-class",
+  "baseClass": "input-select",
+  "variants": [
+    {
+      "name": "input-divide",
+      "className": "input-divide",
+      "description": "Adds divider between select and addons"
+    },
+    {
+      "name": "input-ghost",
+      "className": "input-ghost",
+      "description": "Removes borders and background"
+    },
+    {
+      "name": "rounded-none",
+      "className": "rounded-none",
+      "description": "Removes border radius"
+    },
+    {
+      "name": "rounded-full",
+      "className": "rounded-full",
+      "description": "Fully rounded corners (default)"
+    }
+  ],
+  "sizes": [
+    {
+      "name": "input-xs",
+      "className": "input-xs",
+      "description": "Extra small size variant"
+    },
+    {
+      "name": "input-sm",
+      "className": "input-sm",
+      "description": "Small size variant"
+    },
+    {
+      "name": "input-lg",
+      "className": "input-lg",
+      "description": "Large size variant"
+    },
+    {
+      "name": "rounded-sm",
+      "className": "rounded-sm",
+      "description": "Small border radius (2px)"
+    },
+    {
+      "name": "rounded-md",
+      "className": "rounded-md",
+      "description": "Medium border radius (6px)"
+    },
+    {
+      "name": "rounded-lg",
+      "className": "rounded-lg",
+      "description": "Large border radius (8px)"
+    }
+  ],
+  "states": [
+    {
+      "name": "is-loading",
+      "className": "is-loading",
+      "description": "Shows loading spinner"
+    }
+  ],
+  "structure": {
+    "rootElement": "input",
+    "requiredClasses": [
+      "input-select"
+    ],
+    "optionalClasses": [
+      "input-divide",
+      "input-ghost",
+      "rounded-none",
+      "rounded-full",
+      "input-xs",
+      "input-sm",
+      "input-lg",
+      "rounded-sm",
+      "rounded-md",
+      "rounded-lg",
+      "is-loading"
+    ],
+    "requiredChildren": [],
+    "optionalChildren": []
+  },
+  "attributes": {
+    "allowed": [
+      "class",
+      "id",
+      "tabindex"
+    ],
+    "required": [],
+    "dataAttributes": [],
+    "roles": [],
+    "aria": []
+  },
+  "a11y": {
+    "interactive": true,
+    "requiredRoles": [],
+    "requiredAria": [
+      "aria-label (when no visible label)"
+    ],
+    "keyboardSupport": [
+      "Tab",
+      "Shift+Tab",
+      "Enter",
+      "Space"
+    ],
+    "focusBehavior": "Visible focus state is required when the component is focusable or clickable."
+  },
+  "dos": [
+    "Apply the base class 'input-select' on the root element.",
+    "Use documented modifiers for visual variants instead of ad-hoc custom classes.",
+    "Keep semantic color usage aligned with token classes for light/dark support."
+  ],
+  "donts": [
+    "Do not combine conflicting state classes on the same element.",
+    "Do not rely on undocumented internal classes in production templates.",
+    "Do not remove required accessibility attributes when component is interactive."
+  ],
+  "tokenUsage": [
+    "background-brand",
+    "background-brand-active",
+    "background-error",
+    "background-error-active",
+    "background-info",
+    "background-info-active",
+    "background-inverted",
+    "background-page",
+    "background-success",
+    "background-success-active",
+    "background-surface",
+    "background-surface-elevated",
+    "background-surface-sunken",
+    "background-warning",
+    "background-warning-active",
+    "brand-default",
+    "brand-moderate",
+    "brand-strong",
+    "core-black",
+    "core-ui-100",
+    "core-ui-300",
+    "core-ui-400",
+    "core-ui-50",
+    "core-ui-500",
+    "core-ui-700",
+    "core-ui-800",
+    "core-ui-900",
+    "core-white",
+    "line-default",
+    "line-error",
+    "line-focus",
+    "line-highlight",
+    "line-info",
+    "line-strong",
+    "line-success",
+    "line-warning",
+    "text-attention",
+    "text-brand",
+    "text-brand-active",
+    "text-brand-hover",
+    "text-default",
+    "text-disabled",
+    "text-error",
+    "text-info",
+    "text-inverted",
+    "text-link",
+    "text-link-hover",
+    "text-secondary",
+    "text-success",
+    "text-tertiary",
+    "text-warning"
+  ],
+  "examples": [
+    {
+      "id": "canonical",
+      "file": "examples/select-input.html",
+      "description": "Minimal canonical Select input usage."
+    }
+  ],
+  "composition": {
+    "patterns": [
+      "form-field-composition"
+    ],
+    "relatedComponents": [],
+    "notes": []
+  },
+  "breakingChangePolicy": {
+    "classContract": "Base class, documented modifiers, and state class names are semver-protected for consumer markup.",
+    "a11yContract": "Documented role and aria requirements are semver-protected for generated markup."
+  }
+}

package/llm/components/shadows.json

@@ -0,0 +1,107 @@
+{
+  "id": "shadows",
+  "name": "Shadows",
+  "status": "stable",
+  "summary": "Layered shadow system for adding depth and elevation to elements.",
+  "keywords": [
+    "blur",
+    "box-shadow",
+    "depth",
+    "dimension",
+    "drop",
+    "effect",
+    "elevation",
+    "layer",
+    "shade",
+    "shadows",
+    "spread",
+    "stack"
+  ],
+  "sourcePaths": [
+    "app/design-system/shadows/page.js",
+    "assets/styles/shadow.css"
+  ],
+  "apiModel": "html-class",
+  "baseClass": "shadow-sm",
+  "variants": [],
+  "sizes": [
+    {
+      "name": "shadow-sm",
+      "className": "shadow-sm",
+      "description": "Small elevation shadow (1-4px)"
+    },
+    {
+      "name": "shadow-md",
+      "className": "shadow-md",
+      "description": "Medium elevation shadow (1-8px)"
+    },
+    {
+      "name": "shadow-lg",
+      "className": "shadow-lg",
+      "description": "Large elevation shadow (1-16px)"
+    },
+    {
+      "name": "shadow-xl",
+      "className": "shadow-xl",
+      "description": "Extra large elevation shadow (1-32px)"
+    }
+  ],
+  "states": [],
+  "structure": {
+    "rootElement": "div",
+    "requiredClasses": [
+      "shadow-sm"
+    ],
+    "optionalClasses": [
+      "shadow-sm",
+      "shadow-md",
+      "shadow-lg",
+      "shadow-xl"
+    ],
+    "requiredChildren": [],
+    "optionalChildren": []
+  },
+  "attributes": {
+    "allowed": [
+      "class"
+    ],
+    "required": [],
+    "dataAttributes": [],
+    "roles": [],
+    "aria": []
+  },
+  "a11y": {
+    "interactive": false,
+    "requiredRoles": [],
+    "requiredAria": [],
+    "keyboardSupport": [],
+    "focusBehavior": "No keyboard interaction is required unless nested interactive children are introduced."
+  },
+  "dos": [
+    "Apply the base class 'shadow-sm' on the root element.",
+    "Use documented modifiers for visual variants instead of ad-hoc custom classes.",
+    "Keep semantic color usage aligned with token classes for light/dark support."
+  ],
+  "donts": [
+    "Do not combine conflicting state classes on the same element.",
+    "Do not rely on undocumented internal classes in production templates.",
+    "Do not remove required accessibility attributes when component is interactive."
+  ],
+  "tokenUsage": [],
+  "examples": [
+    {
+      "id": "canonical",
+      "file": "examples/shadows.html",
+      "description": "Minimal canonical Shadows usage."
+    }
+  ],
+  "composition": {
+    "patterns": [],
+    "relatedComponents": [],
+    "notes": []
+  },
+  "breakingChangePolicy": {
+    "classContract": "Base class, documented modifiers, and state class names are semver-protected for consumer markup.",
+    "a11yContract": "Documented role and aria requirements are semver-protected for generated markup."
+  }
+}

package/llm/components/skeleton.json

@@ -0,0 +1,84 @@
+{
+  "id": "skeleton",
+  "name": "Skeleton",
+  "status": "stable",
+  "summary": "Skeleton loaders provide visual placeholders for content while it loads, improving perceived performance.",
+  "keywords": [
+    "animation",
+    "fallback",
+    "loader",
+    "loading",
+    "placeholder",
+    "preview",
+    "progress",
+    "pulse",
+    "shimmer",
+    "skeleton",
+    "suspense",
+    "wait",
+    "wave"
+  ],
+  "sourcePaths": [
+    "app/design-system/skeleton/page.js",
+    "assets/styles/skeleton.css"
+  ],
+  "apiModel": "html-class",
+  "baseClass": "skeleton",
+  "variants": [],
+  "sizes": [],
+  "states": [],
+  "structure": {
+    "rootElement": "div",
+    "requiredClasses": [
+      "skeleton"
+    ],
+    "optionalClasses": [],
+    "requiredChildren": [],
+    "optionalChildren": []
+  },
+  "attributes": {
+    "allowed": [
+      "class"
+    ],
+    "required": [],
+    "dataAttributes": [],
+    "roles": [],
+    "aria": []
+  },
+  "a11y": {
+    "interactive": false,
+    "requiredRoles": [],
+    "requiredAria": [],
+    "keyboardSupport": [],
+    "focusBehavior": "No keyboard interaction is required unless nested interactive children are introduced."
+  },
+  "dos": [
+    "Apply the base class 'skeleton' on the root element.",
+    "Use documented modifiers for visual variants instead of ad-hoc custom classes.",
+    "Keep semantic color usage aligned with token classes for light/dark support."
+  ],
+  "donts": [
+    "Do not combine conflicting state classes on the same element.",
+    "Do not rely on undocumented internal classes in production templates.",
+    "Do not remove required accessibility attributes when component is interactive."
+  ],
+  "tokenUsage": [
+    "text-default"
+  ],
+  "examples": [
+    {
+      "id": "canonical",
+      "file": "examples/skeleton.html",
+      "description": "Minimal canonical Skeleton usage."
+    }
+  ],
+  "composition": {
+    "patterns": [],
+    "relatedComponents": [],
+    "notes": []
+  },
+  "breakingChangePolicy": {
+    "classContract": "Base class, documented modifiers, and state class names are semver-protected for consumer markup.",
+    "a11yContract": "Documented role and aria requirements are semver-protected for generated markup."
+  }
+}