twntyx-css 1.0.0

package/llm/components/breadcrumb.json

@@ -0,0 +1,169 @@
+{
+  "id": "breadcrumb",
+  "name": "Breadcrumb",
+  "status": "stable",
+  "summary": "Breadcrumb navigation for showing the user's current location and path hierarchy.",
+  "keywords": [
+    "breadcrumb",
+    "current page",
+    "hierarchy",
+    "location",
+    "navigation",
+    "path",
+    "trail"
+  ],
+  "sourcePaths": [
+    "app/design-system/breadcrumb/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/timeline.css",
+    "assets/styles/toast.css"
+  ],
+  "apiModel": "html-class",
+  "baseClass": "breadcrumb",
+  "variants": [],
+  "sizes": [],
+  "states": [
+    {
+      "name": "is-active",
+      "className": "is-active",
+      "description": "Visual highlight for an intermediate active item."
+    },
+    {
+      "name": "is-current",
+      "className": "is-current",
+      "description": "Current page item. Keep this as the only aria-current target."
+    }
+  ],
+  "structure": {
+    "rootElement": "a",
+    "requiredClasses": [
+      "breadcrumb"
+    ],
+    "optionalClasses": [
+      "is-active",
+      "is-current"
+    ],
+    "requiredChildren": [],
+    "optionalChildren": []
+  },
+  "attributes": {
+    "allowed": [
+      "class"
+    ],
+    "required": [],
+    "dataAttributes": [],
+    "roles": [],
+    "aria": [
+      "aria-current",
+      "aria-hidden",
+      "aria-label"
+    ]
+  },
+  "a11y": {
+    "interactive": false,
+    "requiredRoles": [],
+    "requiredAria": [
+      "aria-current",
+      "aria-hidden",
+      "aria-label"
+    ],
+    "keyboardSupport": [],
+    "focusBehavior": "No keyboard interaction is required unless nested interactive children are introduced."
+  },
+  "dos": [
+    "Apply the base class 'breadcrumb' 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-brand-active",
+    "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/breadcrumb.html",
+      "description": "Minimal canonical Breadcrumb usage."
+    }
+  ],
+  "composition": {
+    "patterns": [
+      "navigation-hierarchy"
+    ],
+    "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/button-container.json

@@ -0,0 +1,150 @@
+{
+  "id": "button-container",
+  "name": "Button container",
+  "status": "stable",
+  "summary": "Button container styles for claim effects and highlighted button surfaces.",
+  "keywords": [
+    "button",
+    "button container",
+    "button-container",
+    "claim",
+    "container",
+    "effect",
+    "glow",
+    "highlight",
+    "ring",
+    "surface",
+    "wrapper"
+  ],
+  "sourcePaths": [
+    "app/design-system/button-container/page.js",
+    "assets/styles/button.css",
+    "assets/styles/surface.css"
+  ],
+  "apiModel": "html-class",
+  "baseClass": "button-container",
+  "variants": [
+    {
+      "name": "surface-claim",
+      "className": "surface-claim",
+      "description": "Claim surface wrapper with animated ring effect"
+    }
+  ],
+  "sizes": [],
+  "states": [],
+  "structure": {
+    "rootElement": "button",
+    "requiredClasses": [
+      "button-container"
+    ],
+    "optionalClasses": [
+      "surface-claim"
+    ],
+    "requiredChildren": [],
+    "optionalChildren": []
+  },
+  "attributes": {
+    "allowed": [
+      "class",
+      "id",
+      "tabindex"
+    ],
+    "required": [],
+    "dataAttributes": [],
+    "roles": [],
+    "aria": [
+      "aria-label"
+    ]
+  },
+  "a11y": {
+    "interactive": true,
+    "requiredRoles": [],
+    "requiredAria": [
+      "aria-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 'button-container' 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-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-soft",
+    "brand-strong",
+    "core-black",
+    "core-ui-100",
+    "core-ui-200",
+    "core-ui-600",
+    "core-ui-800",
+    "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-brand",
+    "text-brand-active",
+    "text-brand-hover",
+    "text-default",
+    "text-error",
+    "text-info",
+    "text-inverted",
+    "text-secondary",
+    "text-success",
+    "text-tertiary",
+    "text-warning"
+  ],
+  "examples": [
+    {
+      "id": "canonical",
+      "file": "examples/button-container.html",
+      "description": "Minimal canonical Button container 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/button-feedback.json

@@ -0,0 +1,155 @@
+{
+  "id": "button-feedback",
+  "name": "Button feedback",
+  "status": "stable",
+  "summary": "Button feedback patterns for inline messages and status tooltips.",
+  "keywords": [
+    "attention",
+    "button",
+    "button feedback",
+    "button-feedback",
+    "error",
+    "feedback",
+    "message",
+    "status",
+    "success",
+    "tooltip"
+  ],
+  "sourcePaths": [
+    "app/design-system/button-feedback/page.js"
+  ],
+  "apiModel": "html-class",
+  "baseClass": "button",
+  "variants": [
+    {
+      "name": "Primary",
+      "className": "button-primary",
+      "description": "Primary feedback trigger style."
+    },
+    {
+      "name": "Secondary",
+      "className": "button-secondary",
+      "description": "Secondary feedback trigger style."
+    },
+    {
+      "name": "Plain",
+      "className": "button-plain",
+      "description": "Plain feedback trigger style."
+    },
+    {
+      "name": "Destructive",
+      "className": "button-destructive",
+      "description": "Destructive feedback trigger style."
+    }
+  ],
+  "sizes": [
+    {
+      "name": "Extra small",
+      "className": "button-xs",
+      "description": "Compact control for dense toolbars."
+    },
+    {
+      "name": "Small",
+      "className": "button-sm",
+      "description": "Small control for inline actions."
+    },
+    {
+      "name": "Large",
+      "className": "button-lg",
+      "description": "Large control for emphasis and touch targets."
+    }
+  ],
+  "states": [
+    {
+      "name": "Loading",
+      "className": "is-loading",
+      "description": "Temporarily hides label and shows loading indicator."
+    },
+    {
+      "name": "Charging",
+      "className": "is-charging",
+      "description": "Triggers charging animation for long-running operations."
+    }
+  ],
+  "structure": {
+    "rootElement": "button",
+    "requiredClasses": [
+      "button-feedback"
+    ],
+    "optionalClasses": [],
+    "requiredChildren": [],
+    "optionalChildren": []
+  },
+  "attributes": {
+    "allowed": [
+      "class",
+      "type",
+      "disabled",
+      "data-feedback",
+      "data-feedback-icon",
+      "aria-label"
+    ],
+    "required": [
+      "type",
+      "data-feedback"
+    ],
+    "dataAttributes": [
+      "data-feedback",
+      "data-feedback-icon"
+    ],
+    "roles": [],
+    "aria": [
+      "aria-label"
+    ]
+  },
+  "a11y": {
+    "interactive": true,
+    "requiredRoles": [],
+    "requiredAria": [
+      "aria-label (required when icon-only)",
+      "status text must be announced in context"
+    ],
+    "keyboardSupport": [
+      "Tab",
+      "Shift+Tab",
+      "Enter",
+      "Space"
+    ],
+    "focusBehavior": "Feedback trigger remains keyboard focusable and keeps visible focus ring before and after message animation."
+  },
+  "dos": [
+    "Use `data-feedback` for short confirmation/error text after button activation.",
+    "Provide `data-feedback-icon` only for semantic states (`success`, `error`, `attention`).",
+    "Keep feedback messages under one sentence."
+  ],
+  "donts": [
+    "Do not replace persistent error handling with transient feedback only.",
+    "Do not use feedback animation as the only success indicator in critical flows.",
+    "Do not fire repeated feedback messages on disabled controls."
+  ],
+  "tokenUsage": [],
+  "examples": [
+    {
+      "id": "canonical",
+      "file": "examples/button-feedback.html",
+      "description": "Minimal canonical Button feedback usage."
+    }
+  ],
+  "composition": {
+    "patterns": [
+      "feedback-and-status"
+    ],
+    "relatedComponents": [
+      "button",
+      "toast",
+      "state"
+    ],
+    "notes": [
+      "Use toast or state components when feedback needs longer visibility than the inline animation window."
+    ]
+  },
+  "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."
+  }
+}