twntyx-css 1.0.0

package/llm/components/stacked-chart.json

@@ -0,0 +1,100 @@
+{
+  "id": "stacked-chart",
+  "name": "Stacked chart",
+  "status": "stable",
+  "summary": "Stacked chart component used to visualize and compare scores or performance metrics across multiple individuals or groups.",
+  "keywords": [
+    "analytics",
+    "benchmark",
+    "chart",
+    "comparison",
+    "data visualization",
+    "distribution",
+    "evaluation",
+    "graph",
+    "group",
+    "individual",
+    "investor score",
+    "measurement",
+    "metrics",
+    "performance",
+    "ranking",
+    "results",
+    "score",
+    "stacked",
+    "stacked chart",
+    "stacked-chart",
+    "statistics",
+    "visualization"
+  ],
+  "sourcePaths": [
+    "app/design-system/stacked-chart/page.js",
+    "assets/styles/chart-stacked.css"
+  ],
+  "apiModel": "html-class",
+  "baseClass": "chart-stacked",
+  "variants": [],
+  "sizes": [],
+  "states": [],
+  "structure": {
+    "rootElement": "div",
+    "requiredClasses": [
+      "chart-stacked"
+    ],
+    "optionalClasses": [],
+    "requiredChildren": [],
+    "optionalChildren": []
+  },
+  "attributes": {
+    "allowed": [
+      "class"
+    ],
+    "required": [],
+    "dataAttributes": [],
+    "roles": [],
+    "aria": [
+      "aria-label"
+    ]
+  },
+  "a11y": {
+    "interactive": false,
+    "requiredRoles": [],
+    "requiredAria": [
+      "aria-label"
+    ],
+    "keyboardSupport": [],
+    "focusBehavior": "No keyboard interaction is required unless nested interactive children are introduced."
+  },
+  "dos": [
+    "Apply the base class 'chart-stacked' 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-surface-elevated",
+    "line-default",
+    "line-subtle",
+    "text-tertiary"
+  ],
+  "examples": [
+    {
+      "id": "canonical",
+      "file": "examples/stacked-chart.html",
+      "description": "Minimal canonical Stacked chart 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/state.json

@@ -0,0 +1,138 @@
+{
+  "id": "state",
+  "name": "State",
+  "status": "stable",
+  "summary": "State feedback for displaying temporary messages and feedback.",
+  "keywords": [
+    "alert",
+    "banner",
+    "error",
+    "feedback",
+    "indicator",
+    "info",
+    "message",
+    "notification",
+    "response",
+    "state",
+    "status",
+    "success",
+    "toast",
+    "update",
+    "warning"
+  ],
+  "sourcePaths": [
+    "app/design-system/state/page.js",
+    "assets/styles/state.css"
+  ],
+  "apiModel": "html-class",
+  "baseClass": "state",
+  "variants": [
+    {
+      "name": "state-success",
+      "className": "state-success",
+      "description": "Applies success state styling"
+    },
+    {
+      "name": "state-error",
+      "className": "state-error",
+      "description": "Applies error state styling"
+    },
+    {
+      "name": "state-info",
+      "className": "state-info",
+      "description": "Applies info state styling"
+    },
+    {
+      "name": "state-warning",
+      "className": "state-warning",
+      "description": "Applies warning state styling"
+    },
+    {
+      "name": "state-left",
+      "className": "state-left",
+      "description": "Left aligns the state content"
+    },
+    {
+      "name": "state-right",
+      "className": "state-right",
+      "description": "Right aligns the state content"
+    }
+  ],
+  "sizes": [],
+  "states": [
+    {
+      "name": "has-animation",
+      "className": "has-animation",
+      "description": "Enables animation effects"
+    }
+  ],
+  "structure": {
+    "rootElement": "div",
+    "requiredClasses": [
+      "state"
+    ],
+    "optionalClasses": [
+      "state-success",
+      "state-error",
+      "state-info",
+      "state-warning",
+      "state-left",
+      "state-right",
+      "has-animation"
+    ],
+    "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 'state' 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": [
+    "brand-default",
+    "brand-soft",
+    "line-default",
+    "line-error",
+    "line-success",
+    "line-warning"
+  ],
+  "examples": [
+    {
+      "id": "canonical",
+      "file": "examples/state.html",
+      "description": "Minimal canonical State usage."
+    }
+  ],
+  "composition": {
+    "patterns": [
+      "feedback-and-status"
+    ],
+    "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/stepper.json

@@ -0,0 +1,95 @@
+{
+  "id": "stepper",
+  "name": "Stepper",
+  "status": "stable",
+  "summary": "Animated number stepper for displaying percentage values.",
+  "keywords": [
+    "control",
+    "count",
+    "counter",
+    "decrement",
+    "increment",
+    "input",
+    "number",
+    "numeric",
+    "percentage",
+    "progress",
+    "stepper",
+    "value"
+  ],
+  "sourcePaths": [
+    "app/design-system/stepper/page.js",
+    "assets/styles/shared.css",
+    "assets/styles/stepper.css"
+  ],
+  "apiModel": "html-class",
+  "baseClass": "stepper",
+  "variants": [],
+  "sizes": [],
+  "states": [],
+  "structure": {
+    "rootElement": "button",
+    "requiredClasses": [
+      "stepper"
+    ],
+    "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 'stepper' 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-surface",
+    "background-surface-elevated",
+    "brand-default",
+    "brand-moderate",
+    "line-brand",
+    "line-default",
+    "line-error",
+    "line-focus",
+    "line-highlight",
+    "line-strong",
+    "text-default",
+    "text-inverted"
+  ],
+  "examples": [
+    {
+      "id": "canonical",
+      "file": "examples/stepper.html",
+      "description": "Minimal canonical Stepper 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/steps.json

@@ -0,0 +1,177 @@
+{
+  "id": "steps",
+  "name": "Steps",
+  "status": "stable",
+  "summary": "Step-by-step navigation component for multi-step processes.",
+  "keywords": [
+    "flow",
+    "guide",
+    "journey",
+    "navigation",
+    "path",
+    "phases",
+    "process",
+    "progress",
+    "sequence",
+    "stages",
+    "stepper",
+    "steps",
+    "wizard"
+  ],
+  "sourcePaths": [
+    "app/design-system/steps/page.js",
+    "assets/styles/breadcrumb.css",
+    "assets/styles/button.css",
+    "assets/styles/chat.css",
+    "assets/styles/checkmark.css",
+    "assets/styles/command.css",
+    "assets/styles/form-text-select.css",
+    "assets/styles/menu.css",
+    "assets/styles/navbar.css",
+    "assets/styles/pagination.css",
+    "assets/styles/progress.css",
+    "assets/styles/steps.css",
+    "assets/styles/tab.css",
+    "assets/styles/table.css",
+    "assets/styles/toast.css"
+  ],
+  "apiModel": "html-class",
+  "baseClass": "steps",
+  "variants": [
+    {
+      "name": "steps-vertical",
+      "className": "steps-vertical",
+      "description": "Makes steps display vertically"
+    }
+  ],
+  "sizes": [
+    {
+      "name": "steps-sm",
+      "className": "steps-sm",
+      "description": "Small size variant"
+    },
+    {
+      "name": "steps-lg",
+      "className": "steps-lg",
+      "description": "Large size variant"
+    }
+  ],
+  "states": [
+    {
+      "name": "is-active",
+      "className": "is-active",
+      "description": "Marks a step as active/complete"
+    }
+  ],
+  "structure": {
+    "rootElement": "div",
+    "requiredClasses": [
+      "steps"
+    ],
+    "optionalClasses": [
+      "steps-vertical",
+      "steps-sm",
+      "steps-lg",
+      "is-active"
+    ],
+    "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 'steps' 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-600",
+    "core-ui-700",
+    "core-ui-800",
+    "core-ui-900",
+    "core-white",
+    "line-brand",
+    "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-active",
+    "text-link-hover",
+    "text-secondary",
+    "text-success",
+    "text-tertiary",
+    "text-warning"
+  ],
+  "examples": [
+    {
+      "id": "canonical",
+      "file": "examples/steps.html",
+      "description": "Minimal canonical Steps 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/surface.json

@@ -0,0 +1,181 @@
+{
+  "id": "surface",
+  "name": "Surface",
+  "status": "stable",
+  "summary": "Surface components for creating consistent container styles with backgrounds and borders.",
+  "keywords": [
+    "area",
+    "background",
+    "block",
+    "border",
+    "box",
+    "card",
+    "container",
+    "panel",
+    "region",
+    "section",
+    "surface",
+    "wrapper"
+  ],
+  "sourcePaths": [
+    "app/design-system/surface/page.js",
+    "assets/styles/form-checkbox-radio-toggle.css",
+    "assets/styles/surface.css"
+  ],
+  "apiModel": "html-class",
+  "baseClass": "surface",
+  "variants": [
+    {
+      "name": "surface-elevated",
+      "className": "surface-elevated",
+      "description": "Surface with elevated background color"
+    },
+    {
+      "name": "surface-sunken",
+      "className": "surface-sunken",
+      "description": "Surface with sunken background color"
+    },
+    {
+      "name": "surface-brand",
+      "className": "surface-brand",
+      "description": "Surface with brand colors"
+    },
+    {
+      "name": "surface-success",
+      "className": "surface-success",
+      "description": "Surface with success status colors"
+    },
+    {
+      "name": "surface-error",
+      "className": "surface-error",
+      "description": "Surface with error status colors"
+    },
+    {
+      "name": "surface-warning",
+      "className": "surface-warning",
+      "description": "Surface with warning status colors"
+    },
+    {
+      "name": "surface-info",
+      "className": "surface-info",
+      "description": "Surface with info status colors"
+    },
+    {
+      "name": "surface-interactive",
+      "className": "surface-interactive",
+      "description": "Makes any surface variant interactive with hover and active states"
+    }
+  ],
+  "sizes": [],
+  "states": [],
+  "structure": {
+    "rootElement": "div",
+    "requiredClasses": [
+      "surface"
+    ],
+    "optionalClasses": [
+      "surface-elevated",
+      "surface-sunken",
+      "surface-brand",
+      "surface-success",
+      "surface-error",
+      "surface-warning",
+      "surface-info",
+      "surface-interactive"
+    ],
+    "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 'surface' 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-attention",
+    "background-attention-active",
+    "background-error",
+    "background-error-active",
+    "background-info",
+    "background-info-active",
+    "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-soft",
+    "brand-strong",
+    "core-black",
+    "core-ui-200",
+    "core-ui-300",
+    "core-ui-400",
+    "core-ui-50",
+    "core-ui-500",
+    "core-ui-600",
+    "core-ui-700",
+    "core-ui-900",
+    "core-white",
+    "line-attention",
+    "line-default",
+    "line-error",
+    "line-focus",
+    "line-highlight",
+    "line-hover",
+    "line-info",
+    "line-strong",
+    "line-success",
+    "line-warning",
+    "text-attention",
+    "text-default",
+    "text-error",
+    "text-info",
+    "text-inverted",
+    "text-success",
+    "text-tertiary",
+    "text-warning"
+  ],
+  "examples": [
+    {
+      "id": "canonical",
+      "file": "examples/surface.html",
+      "description": "Minimal canonical Surface usage."
+    }
+  ],
+  "composition": {
+    "patterns": [
+      "surface-and-content"
+    ],
+    "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."
+  }
+}