twntyx-css 1.0.0

package/llm/components/navbar.json

@@ -0,0 +1,158 @@
+{
+  "id": "navbar",
+  "name": "Navbar",
+  "status": "stable",
+  "summary": "Navbar layout pattern for top-level product navigation and actions.",
+  "keywords": [
+    "header",
+    "nav",
+    "navbar",
+    "navigation bar",
+    "site navigation",
+    "top bar"
+  ],
+  "sourcePaths": [
+    "app/design-system/navbar/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": "navbar",
+  "variants": [],
+  "sizes": [],
+  "states": [
+    {
+      "name": "is-active",
+      "className": "is-active",
+      "description": "Highlights the active navigation item."
+    }
+  ],
+  "structure": {
+    "rootElement": "a",
+    "requiredClasses": [
+      "navbar"
+    ],
+    "optionalClasses": [
+      "is-active"
+    ],
+    "requiredChildren": [],
+    "optionalChildren": []
+  },
+  "attributes": {
+    "allowed": [
+      "class"
+    ],
+    "required": [],
+    "dataAttributes": [],
+    "roles": [],
+    "aria": [
+      "aria-current",
+      "aria-label"
+    ]
+  },
+  "a11y": {
+    "interactive": false,
+    "requiredRoles": [],
+    "requiredAria": [
+      "aria-current",
+      "aria-label"
+    ],
+    "keyboardSupport": [],
+    "focusBehavior": "No keyboard interaction is required unless nested interactive children are introduced."
+  },
+  "dos": [
+    "Apply the base class 'navbar' 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/navbar.html",
+      "description": "Minimal canonical Navbar 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/pagination.json

@@ -0,0 +1,122 @@
+{
+  "id": "pagination",
+  "name": "Pagination",
+  "status": "stable",
+  "summary": "Pagination component for navigating through multiple pages of content.",
+  "keywords": [
+    "entries",
+    "items",
+    "list",
+    "navigation",
+    "next",
+    "numbers",
+    "pager",
+    "pages",
+    "pagination",
+    "previous",
+    "records",
+    "results",
+    "table"
+  ],
+  "sourcePaths": [
+    "app/design-system/pagination/page.js",
+    "assets/styles/pagination.css"
+  ],
+  "apiModel": "html-class",
+  "baseClass": "pagination",
+  "variants": [
+    {
+      "name": "pagination-compact",
+      "className": "pagination-compact",
+      "description": "Compact variant without gaps between items"
+    }
+  ],
+  "sizes": [
+    {
+      "name": "pagination-sm",
+      "className": "pagination-sm",
+      "description": "Small size variant"
+    },
+    {
+      "name": "pagination-lg",
+      "className": "pagination-lg",
+      "description": "Large size variant"
+    }
+  ],
+  "states": [],
+  "structure": {
+    "rootElement": "a",
+    "requiredClasses": [
+      "pagination"
+    ],
+    "optionalClasses": [
+      "pagination-compact",
+      "pagination-sm",
+      "pagination-lg"
+    ],
+    "requiredChildren": [],
+    "optionalChildren": []
+  },
+  "attributes": {
+    "allowed": [
+      "class",
+      "id",
+      "tabindex"
+    ],
+    "required": [],
+    "dataAttributes": [],
+    "roles": [],
+    "aria": [
+      "aria-current",
+      "aria-label"
+    ]
+  },
+  "a11y": {
+    "interactive": true,
+    "requiredRoles": [],
+    "requiredAria": [
+      "aria-current",
+      "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 'pagination' 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": [
+    "line-default",
+    "text-default",
+    "text-tertiary"
+  ],
+  "examples": [
+    {
+      "id": "canonical",
+      "file": "examples/pagination.html",
+      "description": "Minimal canonical Pagination usage."
+    }
+  ],
+  "composition": {
+    "patterns": [
+      "table-data-disclosure"
+    ],
+    "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/pie-chart.json

@@ -0,0 +1,94 @@
+{
+  "id": "pie-chart",
+  "name": "Pie chart",
+  "status": "stable",
+  "summary": "Pie chart used to visualize data in a circular format.",
+  "keywords": [
+    "analytics",
+    "chart",
+    "circle",
+    "comparison",
+    "data visualization",
+    "dataset",
+    "distribution",
+    "graph",
+    "parts",
+    "percentage",
+    "pie",
+    "pie chart",
+    "pie-chart",
+    "probability",
+    "proportion",
+    "ratio",
+    "sector",
+    "segment",
+    "slice",
+    "statistics",
+    "visualization",
+    "whole"
+  ],
+  "sourcePaths": [
+    "app/design-system/pie-chart/page.js"
+  ],
+  "apiModel": "html-class",
+  "baseClass": "chart-distribution",
+  "variants": [],
+  "sizes": [],
+  "states": [],
+  "structure": {
+    "rootElement": "div",
+    "requiredClasses": [
+      "chart-distribution"
+    ],
+    "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-distribution' 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/pie-chart.html",
+      "description": "Minimal canonical Pie 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/popover.json

@@ -0,0 +1,174 @@
+{
+  "id": "popover",
+  "name": "Popover",
+  "status": "stable",
+  "summary": "Native HTML popovers for overlays, panels, and menus using browser-managed focus, keyboard support, and no custom JavaScript.",
+  "keywords": [
+    "menu",
+    "native html",
+    "off-canvas",
+    "overlay",
+    "panel",
+    "popover",
+    "popoverTarget",
+    "popoverTargetaction",
+    "popup",
+    "tooltip"
+  ],
+  "sourcePaths": [
+    "app/design-system/popover/page.js",
+    "assets/styles/popover.css"
+  ],
+  "apiModel": "html-class",
+  "baseClass": "popover",
+  "variants": [
+    {
+      "name": "popover-fixed",
+      "className": "popover-fixed",
+      "description": "Viewport-level layout mode using fixed positioning."
+    },
+    {
+      "name": "popover-absolute",
+      "className": "popover-absolute",
+      "description": "Absolute layout mode in native top layer, with backdrop visually disabled."
+    },
+    {
+      "name": "popover-overlay",
+      "className": "popover-overlay",
+      "description": "Forces backdrop overlay on open popovers (useful for explicit fixed mode)."
+    },
+    {
+      "name": "popover-no-overlay",
+      "className": "popover-no-overlay",
+      "description": "Disables backdrop overlay for open popovers, including fixed mode."
+    },
+    {
+      "name": "popover-top",
+      "className": "popover-top",
+      "description": "Top center position."
+    },
+    {
+      "name": "popover-bottom",
+      "className": "popover-bottom",
+      "description": "Bottom center position."
+    },
+    {
+      "name": "popover-left",
+      "className": "popover-left",
+      "description": "Middle left position."
+    },
+    {
+      "name": "popover-right",
+      "className": "popover-right",
+      "description": "Middle right position."
+    },
+    {
+      "name": "popover-top-left",
+      "className": "popover-top-left",
+      "description": "Top left corner position."
+    },
+    {
+      "name": "popover-top-right",
+      "className": "popover-top-right",
+      "description": "Top right corner position."
+    },
+    {
+      "name": "popover-bottom-left",
+      "className": "popover-bottom-left",
+      "description": "Bottom left corner position."
+    },
+    {
+      "name": "popover-bottom-right",
+      "className": "popover-bottom-right",
+      "description": "Bottom right corner position."
+    },
+    {
+      "name": "popover-right-full",
+      "className": "popover-right-full",
+      "description": "Right-side full-height panel variant."
+    }
+  ],
+  "sizes": [],
+  "states": [],
+  "structure": {
+    "rootElement": "div",
+    "requiredClasses": [
+      "popover"
+    ],
+    "optionalClasses": [
+      "popover-fixed",
+      "popover-absolute",
+      "popover-overlay",
+      "popover-no-overlay",
+      "popover-top",
+      "popover-bottom",
+      "popover-left",
+      "popover-right",
+      "popover-top-left",
+      "popover-top-right",
+      "popover-bottom-left",
+      "popover-bottom-right",
+      "popover-right-full"
+    ],
+    "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 'popover' 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",
+    "line-default",
+    "text-default",
+    "text-secondary",
+    "text-tertiary"
+  ],
+  "examples": [
+    {
+      "id": "canonical",
+      "file": "examples/popover.html",
+      "description": "Minimal canonical Popover 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."
+  }
+}