twntyx-css 1.0.0

package/llm/components/color-usage.json

@@ -0,0 +1,83 @@
+{
+  "id": "color-usage",
+  "name": "Color usage",
+  "status": "stable",
+  "summary": "Learn how to effectively apply our color system through detailed guidelines, accessibility requirements, and best practices for creating visually cohesive and WCAG-compliant interfaces.",
+  "keywords": [
+    "accessibility",
+    "best practices",
+    "color combinations",
+    "color guidelines",
+    "color hierarchy",
+    "color usage",
+    "color-usage",
+    "colors",
+    "contrast",
+    "theme",
+    "usage"
+  ],
+  "sourcePaths": [
+    "app/design-system/color-usage/page.js"
+  ],
+  "apiModel": "html-class",
+  "baseClass": "color-usage",
+  "variants": [],
+  "sizes": [],
+  "states": [],
+  "structure": {
+    "rootElement": "div",
+    "requiredClasses": [
+      "color-usage"
+    ],
+    "optionalClasses": [],
+    "requiredChildren": [],
+    "optionalChildren": []
+  },
+  "attributes": {
+    "allowed": [
+      "class"
+    ],
+    "required": [],
+    "dataAttributes": [],
+    "roles": [],
+    "aria": [
+      "aria-hidden"
+    ]
+  },
+  "a11y": {
+    "interactive": false,
+    "requiredRoles": [],
+    "requiredAria": [
+      "aria-hidden"
+    ],
+    "keyboardSupport": [],
+    "focusBehavior": "No keyboard interaction is required unless nested interactive children are introduced."
+  },
+  "dos": [
+    "Apply the base class 'color-usage' 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/color-usage.html",
+      "description": "Minimal canonical Color usage 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/combobox.json

@@ -0,0 +1,143 @@
+{
+  "id": "combobox",
+  "name": "Combobox",
+  "status": "stable",
+  "summary": "Combobox pattern for searchable selection with keyboard-friendly option lists.",
+  "keywords": [
+    "autocomplete",
+    "combobox",
+    "filter options",
+    "search select",
+    "typeahead"
+  ],
+  "sourcePaths": [
+    "app/design-system/combobox/page.js",
+    "assets/styles/combobox.css",
+    "assets/styles/datepicker.css",
+    "assets/styles/form-text-select.css",
+    "assets/styles/menu.css"
+  ],
+  "apiModel": "html-class",
+  "baseClass": "combobox",
+  "variants": [],
+  "sizes": [],
+  "states": [
+    {
+      "name": "is-selected",
+      "className": "is-selected",
+      "description": "Selected option state (on li or option element)."
+    },
+    {
+      "name": "is-highlighted",
+      "className": "is-highlighted",
+      "description": "Keyboard-highlighted option state (on li or option element)."
+    }
+  ],
+  "structure": {
+    "rootElement": "input",
+    "requiredClasses": [
+      "combobox"
+    ],
+    "optionalClasses": [
+      "is-selected",
+      "is-highlighted"
+    ],
+    "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 'combobox' 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-hover",
+    "background-error",
+    "background-info",
+    "background-success",
+    "background-surface",
+    "background-surface-elevated",
+    "background-surface-sunken",
+    "background-warning",
+    "brand-moderate",
+    "brand-strong",
+    "core-black",
+    "core-ui-100",
+    "core-ui-200",
+    "core-ui-400",
+    "core-ui-50",
+    "core-ui-500",
+    "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-brand",
+    "text-default",
+    "text-disabled",
+    "text-error",
+    "text-info",
+    "text-inverted",
+    "text-secondary",
+    "text-success",
+    "text-tertiary",
+    "text-warning"
+  ],
+  "examples": [
+    {
+      "id": "canonical",
+      "file": "examples/combobox.html",
+      "description": "Minimal canonical Combobox 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/command-palette.json

@@ -0,0 +1,159 @@
+{
+  "id": "command-palette",
+  "name": "Command palette",
+  "status": "stable",
+  "summary": "Searchable command palette pattern for fast navigation and actions.",
+  "keywords": [
+    "command",
+    "command palette",
+    "command-palette",
+    "menu",
+    "palette",
+    "quick actions",
+    "search",
+    "shortcuts",
+    "spotlight"
+  ],
+  "sourcePaths": [
+    "app/design-system/command-palette/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": "command",
+  "variants": [],
+  "sizes": [],
+  "states": [
+    {
+      "name": "is-active",
+      "className": "is-active",
+      "description": "Highlights the current command option (on li or trigger element)."
+    },
+    {
+      "name": "is-empty",
+      "className": "is-empty",
+      "description": "Styles the empty-result message block."
+    }
+  ],
+  "structure": {
+    "rootElement": "div",
+    "requiredClasses": [
+      "command"
+    ],
+    "optionalClasses": [
+      "is-active",
+      "is-empty"
+    ],
+    "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 'command' 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/command-palette.html",
+      "description": "Minimal canonical Command palette 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/countdown.json

@@ -0,0 +1,113 @@
+{
+  "id": "countdown",
+  "name": "Countdown",
+  "status": "stable",
+  "summary": "Animated countdown timer with various display options.",
+  "keywords": [
+    "alert",
+    "clock",
+    "countdown",
+    "counter",
+    "deadline",
+    "duration",
+    "reminder",
+    "stopwatch",
+    "time",
+    "timer"
+  ],
+  "sourcePaths": [
+    "app/design-system/countdown/page.js",
+    "assets/styles/countdown.css",
+    "assets/styles/shared.css"
+  ],
+  "apiModel": "html-class",
+  "baseClass": "countdown",
+  "variants": [],
+  "sizes": [
+    {
+      "name": "text-xs",
+      "className": "text-xs",
+      "description": "Extra small size variant"
+    },
+    {
+      "name": "text-sm",
+      "className": "text-sm",
+      "description": "Small size variant"
+    },
+    {
+      "name": "text-lg",
+      "className": "text-lg",
+      "description": "Large size variant"
+    }
+  ],
+  "states": [],
+  "structure": {
+    "rootElement": "div",
+    "requiredClasses": [
+      "countdown"
+    ],
+    "optionalClasses": [
+      "text-xs",
+      "text-sm",
+      "text-lg"
+    ],
+    "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 'countdown' 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/countdown.html",
+      "description": "Minimal canonical Countdown 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/datepicker.json

@@ -0,0 +1,151 @@
+{
+  "id": "datepicker",
+  "name": "Datepicker",
+  "status": "stable",
+  "summary": "Calendar component for selecting single dates or date ranges with an intuitive interface.",
+  "keywords": [
+    "calendar",
+    "date",
+    "date picker",
+    "date range",
+    "date selection",
+    "datepicker",
+    "range",
+    "time"
+  ],
+  "sourcePaths": [
+    "app/design-system/datepicker/page.js",
+    "assets/styles/combobox.css",
+    "assets/styles/datepicker.css",
+    "assets/styles/form-text-select.css",
+    "assets/styles/menu.css"
+  ],
+  "apiModel": "html-class",
+  "baseClass": "datepicker",
+  "variants": [
+    {
+      "name": "range-start",
+      "className": "range-start",
+      "description": "Marks the start date of a selected range"
+    },
+    {
+      "name": "range-end",
+      "className": "range-end",
+      "description": "Marks the end date of a selected range"
+    }
+  ],
+  "sizes": [],
+  "states": [
+    {
+      "name": "is-selected",
+      "className": "is-selected",
+      "description": "Indicates currently selected date"
+    }
+  ],
+  "structure": {
+    "rootElement": "input",
+    "requiredClasses": [
+      "datepicker"
+    ],
+    "optionalClasses": [
+      "range-start",
+      "range-end",
+      "is-selected"
+    ],
+    "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 'datepicker' 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-hover",
+    "background-error",
+    "background-info",
+    "background-success",
+    "background-surface",
+    "background-surface-elevated",
+    "background-surface-sunken",
+    "background-warning",
+    "brand-moderate",
+    "brand-strong",
+    "core-black",
+    "core-ui-100",
+    "core-ui-200",
+    "core-ui-400",
+    "core-ui-50",
+    "core-ui-500",
+    "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-brand",
+    "text-default",
+    "text-disabled",
+    "text-error",
+    "text-info",
+    "text-inverted",
+    "text-secondary",
+    "text-success",
+    "text-tertiary",
+    "text-warning"
+  ],
+  "examples": [
+    {
+      "id": "canonical",
+      "file": "examples/datepicker.html",
+      "description": "Minimal canonical Datepicker 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."
+  }
+}