twntyx-css 1.0.0

package/llm/components/divider.json

@@ -0,0 +1,104 @@
+{
+  "id": "divider",
+  "name": "Divider",
+  "status": "stable",
+  "summary": "Divider component to separate content with an optional label.",
+  "keywords": [
+    "border",
+    "break",
+    "divider",
+    "division",
+    "horizontal",
+    "hr",
+    "line",
+    "rule",
+    "separator",
+    "spacer",
+    "split"
+  ],
+  "sourcePaths": [
+    "app/design-system/divider/page.js",
+    "assets/styles/divider.css"
+  ],
+  "apiModel": "html-class",
+  "baseClass": "divider",
+  "variants": [
+    {
+      "name": "divider-horizontal",
+      "className": "divider-horizontal",
+      "description": "Makes the divider horizontal"
+    },
+    {
+      "name": "divider-start",
+      "className": "divider-start",
+      "description": "Aligns content to the start"
+    },
+    {
+      "name": "divider-end",
+      "className": "divider-end",
+      "description": "Aligns content to the end"
+    }
+  ],
+  "sizes": [],
+  "states": [],
+  "structure": {
+    "rootElement": "div",
+    "requiredClasses": [
+      "divider"
+    ],
+    "optionalClasses": [
+      "divider-horizontal",
+      "divider-start",
+      "divider-end"
+    ],
+    "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 'divider' 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",
+    "line-highlight",
+    "text-tertiary"
+  ],
+  "examples": [
+    {
+      "id": "canonical",
+      "file": "examples/divider.html",
+      "description": "Minimal canonical Divider 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/empty-state.json

@@ -0,0 +1,80 @@
+{
+  "id": "empty-state",
+  "name": "Empty state",
+  "status": "stable",
+  "summary": "Empty state patterns to communicate no-content situations and guide next actions.",
+  "keywords": [
+    "blank state",
+    "empty state",
+    "empty-state",
+    "no data",
+    "placeholder",
+    "zero state"
+  ],
+  "sourcePaths": [
+    "app/design-system/empty-state/page.js",
+    "assets/styles/empty-state.css"
+  ],
+  "apiModel": "html-class",
+  "baseClass": "empty-state",
+  "variants": [],
+  "sizes": [],
+  "states": [],
+  "structure": {
+    "rootElement": "div",
+    "requiredClasses": [
+      "empty-state"
+    ],
+    "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 'empty-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": [
+    "background-surface",
+    "line-default",
+    "text-secondary",
+    "text-tertiary"
+  ],
+  "examples": [
+    {
+      "id": "canonical",
+      "file": "examples/empty-state.html",
+      "description": "Minimal canonical Empty state 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/field.json

@@ -0,0 +1,123 @@
+{
+  "id": "field",
+  "name": "Field",
+  "status": "stable",
+  "summary": "Field composition pattern that pairs labels, helper text, and validation messages with controls.",
+  "keywords": [
+    "error",
+    "field",
+    "form field",
+    "helper text",
+    "label",
+    "validation"
+  ],
+  "sourcePaths": [
+    "app/design-system/field/page.js",
+    "assets/styles/field.css",
+    "assets/styles/form-fileupload.css",
+    "assets/styles/form-text-select.css"
+  ],
+  "apiModel": "html-class",
+  "baseClass": "field",
+  "variants": [],
+  "sizes": [],
+  "states": [
+    {
+      "name": "has-error",
+      "className": "has-error",
+      "description": "Applies error state to the field and helper message."
+    }
+  ],
+  "structure": {
+    "rootElement": "input",
+    "requiredClasses": [
+      "field"
+    ],
+    "optionalClasses": [
+      "has-error"
+    ],
+    "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 'field' 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-error",
+    "background-error-active",
+    "background-info",
+    "background-success",
+    "background-success-active",
+    "background-surface",
+    "background-surface-sunken",
+    "background-warning",
+    "brand-moderate",
+    "brand-strong",
+    "core-black",
+    "core-ui-100",
+    "core-ui-50",
+    "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-default",
+    "text-disabled",
+    "text-error",
+    "text-info",
+    "text-secondary",
+    "text-success",
+    "text-tertiary",
+    "text-warning"
+  ],
+  "examples": [
+    {
+      "id": "canonical",
+      "file": "examples/field.html",
+      "description": "Minimal canonical Field 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/fieldset.json

@@ -0,0 +1,78 @@
+{
+  "id": "fieldset",
+  "name": "Fieldset",
+  "status": "stable",
+  "summary": "Fieldset pattern for grouping related controls with a semantic legend.",
+  "keywords": [
+    "fieldset",
+    "form group",
+    "group",
+    "legend",
+    "options"
+  ],
+  "sourcePaths": [
+    "app/design-system/fieldset/page.js",
+    "assets/styles/fieldset.css"
+  ],
+  "apiModel": "html-class",
+  "baseClass": "fieldset",
+  "variants": [],
+  "sizes": [],
+  "states": [],
+  "structure": {
+    "rootElement": "input",
+    "requiredClasses": [
+      "fieldset"
+    ],
+    "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 'fieldset' 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/fieldset.html",
+      "description": "Minimal canonical Fieldset 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/file-upload.json

@@ -0,0 +1,163 @@
+{
+  "id": "file-upload",
+  "name": "File upload",
+  "status": "stable",
+  "summary": "File upload components for single and multiple files with drag and drop support.",
+  "keywords": [
+    "attachment",
+    "browse",
+    "document",
+    "drag and drop",
+    "dropzone",
+    "file",
+    "file upload",
+    "file-upload",
+    "form",
+    "import",
+    "input",
+    "select",
+    "transfer",
+    "upload",
+    "uploader"
+  ],
+  "sourcePaths": [
+    "app/design-system/file-upload/page.js",
+    "assets/styles/field.css",
+    "assets/styles/form-fileupload.css",
+    "assets/styles/form-text-select.css"
+  ],
+  "apiModel": "html-class",
+  "baseClass": "file-upload",
+  "variants": [
+    {
+      "name": "file-upload-error",
+      "className": "file-upload-error",
+      "description": "Error state styling"
+    },
+    {
+      "name": "file-upload-disabled",
+      "className": "file-upload-disabled",
+      "description": "Disabled state styling"
+    }
+  ],
+  "sizes": [],
+  "states": [
+    {
+      "name": "is-uploading",
+      "className": "is-uploading",
+      "description": "Shows uploading state with progress bar"
+    },
+    {
+      "name": "is-uploaded",
+      "className": "is-uploaded",
+      "description": "Shows success state after upload completion"
+    },
+    {
+      "name": "has-error",
+      "className": "has-error",
+      "description": "Shows error state when upload fails"
+    }
+  ],
+  "structure": {
+    "rootElement": "input",
+    "requiredClasses": [
+      "file-upload"
+    ],
+    "optionalClasses": [
+      "file-upload-error",
+      "file-upload-disabled",
+      "is-uploading",
+      "is-uploaded",
+      "has-error"
+    ],
+    "requiredChildren": [],
+    "optionalChildren": []
+  },
+  "attributes": {
+    "allowed": [
+      "class"
+    ],
+    "required": [],
+    "dataAttributes": [],
+    "roles": [
+      "progressbar"
+    ],
+    "aria": [
+      "aria-label"
+    ]
+  },
+  "a11y": {
+    "interactive": false,
+    "requiredRoles": [
+      "progressbar"
+    ],
+    "requiredAria": [
+      "aria-label"
+    ],
+    "keyboardSupport": [],
+    "focusBehavior": "No keyboard interaction is required unless nested interactive children are introduced."
+  },
+  "dos": [
+    "Apply the base class 'file-upload' 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-error",
+    "background-error-active",
+    "background-info",
+    "background-success",
+    "background-success-active",
+    "background-surface",
+    "background-surface-sunken",
+    "background-warning",
+    "brand-moderate",
+    "brand-strong",
+    "core-black",
+    "core-ui-100",
+    "core-ui-50",
+    "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-default",
+    "text-disabled",
+    "text-error",
+    "text-info",
+    "text-secondary",
+    "text-success",
+    "text-tertiary",
+    "text-warning"
+  ],
+  "examples": [
+    {
+      "id": "canonical",
+      "file": "examples/file-upload.html",
+      "description": "Minimal canonical File upload 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/form-example.json

@@ -0,0 +1,82 @@
+{
+  "id": "form-example",
+  "name": "Form example",
+  "status": "preview",
+  "summary": "Complete form example using all form components.",
+  "keywords": [
+    "complete",
+    "components",
+    "demo",
+    "example",
+    "fields",
+    "form",
+    "form example",
+    "form-example",
+    "inputs",
+    "interactive",
+    "showcase",
+    "submission",
+    "template",
+    "validation"
+  ],
+  "sourcePaths": [
+    "app/design-system/form-example/page.js"
+  ],
+  "apiModel": "html-class",
+  "baseClass": "form-example",
+  "variants": [],
+  "sizes": [],
+  "states": [],
+  "structure": {
+    "rootElement": "div",
+    "requiredClasses": [
+      "form-example"
+    ],
+    "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 'form-example' 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/form-example.html",
+      "description": "Minimal canonical Form example 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/getting-started.json

@@ -0,0 +1,70 @@
+{
+  "id": "getting-started",
+  "name": "Getting Started",
+  "status": "preview",
+  "summary": "Documentation and contract metadata for Getting Started in the twntyX design system.",
+  "keywords": [
+    "getting started",
+    "getting-started"
+  ],
+  "sourcePaths": [
+    "app/design-system/getting-started/page.js"
+  ],
+  "apiModel": "html-class",
+  "baseClass": "getting-started",
+  "variants": [],
+  "sizes": [],
+  "states": [],
+  "structure": {
+    "rootElement": "div",
+    "requiredClasses": [
+      "getting-started"
+    ],
+    "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 'getting-started' 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/getting-started.html",
+      "description": "Minimal canonical Getting Started 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."
+  }
+}