twntyx-css 1.0.0

package/llm/components/icons-reference.json

@@ -0,0 +1,78 @@
+{
+  "id": "icons-reference",
+  "name": "Icons reference",
+  "status": "stable",
+  "summary": "Collection of icons used throughout the application, twntyX uses [Google's Material Symbols and Icons](https://fonts.google.com/icons), which provides us with an extensive icon library with over 2,500 glyphs",
+  "keywords": [
+    "assets",
+    "collection",
+    "glyphs",
+    "icons",
+    "icons reference",
+    "icons-reference",
+    "interface elements",
+    "material symbols",
+    "pictograms",
+    "visual indicators"
+  ],
+  "sourcePaths": [
+    "app/design-system/icons-reference/page.js"
+  ],
+  "apiModel": "html-class",
+  "baseClass": "icons-reference",
+  "variants": [],
+  "sizes": [],
+  "states": [],
+  "structure": {
+    "rootElement": "div",
+    "requiredClasses": [
+      "icons-reference"
+    ],
+    "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 'icons-reference' 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/icons-reference.html",
+      "description": "Minimal canonical Icons reference 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/illustrations-library.json

@@ -0,0 +1,78 @@
+{
+  "id": "illustrations-library",
+  "name": "Illustrations library",
+  "status": "stable",
+  "summary": "Browse our collection of custom illustrations and visual elements used to enhance the user experience and reinforce our brand identity across the application. The source assets located in [Figma](https://www.figma.com/design/1zI7ewgpqCGoxrPpiu6w2R/Product-illustrations?m=auto&t=LU9WIUq52kD6qdO8-1) *(Marketing / Assets)*, which can also be downloaded as a [.fig file](/figma/Product_illustrations.fig).",
+  "keywords": [
+    "artwork",
+    "assets",
+    "brand assets",
+    "decorative graphics",
+    "graphics",
+    "illustrations",
+    "illustrations library",
+    "illustrations-library",
+    "images",
+    "visual elements"
+  ],
+  "sourcePaths": [
+    "app/design-system/illustrations-library/page.js"
+  ],
+  "apiModel": "html-class",
+  "baseClass": "illustrations-library",
+  "variants": [],
+  "sizes": [],
+  "states": [],
+  "structure": {
+    "rootElement": "div",
+    "requiredClasses": [
+      "illustrations-library"
+    ],
+    "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 'illustrations-library' 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/illustrations-library.html",
+      "description": "Minimal canonical Illustrations library 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/input-group.json

@@ -0,0 +1,94 @@
+{
+  "id": "input-group",
+  "name": "Input group",
+  "status": "stable",
+  "summary": "Input group pattern for combining controls with prefixes, suffixes, and inline actions.",
+  "keywords": [
+    "addon",
+    "composed input",
+    "input group",
+    "input-group",
+    "prefix",
+    "suffix"
+  ],
+  "sourcePaths": [
+    "app/design-system/input-group/page.js",
+    "assets/styles/form.css",
+    "assets/styles/input-group.css"
+  ],
+  "apiModel": "html-class",
+  "baseClass": "input-group",
+  "variants": [],
+  "sizes": [],
+  "states": [],
+  "structure": {
+    "rootElement": "div",
+    "requiredClasses": [
+      "input-group"
+    ],
+    "optionalClasses": [],
+    "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 'input-group' 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",
+    "line-brand",
+    "line-default",
+    "line-focus",
+    "line-highlight",
+    "line-strong",
+    "text-tertiary"
+  ],
+  "examples": [
+    {
+      "id": "canonical",
+      "file": "examples/input-group.html",
+      "description": "Minimal canonical Input group 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/introduction.json

@@ -0,0 +1,71 @@
+{
+  "id": "introduction",
+  "name": "Introduction",
+  "status": "stable",
+  "summary": "The **twntyX CSS Framework** is a comprehensive design system that empowers developers to rapidly build consistent, accessible, and brand-aligned user interfaces. Check out our [getting started guide](/design-system/getting-started) or explore our [components](/design-system/button).",
+  "keywords": [
+    "introduction",
+    "luigUI",
+    "overview"
+  ],
+  "sourcePaths": [
+    "app/design-system/introduction/page.js"
+  ],
+  "apiModel": "html-class",
+  "baseClass": "introduction",
+  "variants": [],
+  "sizes": [],
+  "states": [],
+  "structure": {
+    "rootElement": "div",
+    "requiredClasses": [
+      "introduction"
+    ],
+    "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 'introduction' 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/introduction.html",
+      "description": "Minimal canonical Introduction 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/join.json

@@ -0,0 +1,105 @@
+{
+  "id": "join",
+  "name": "Join",
+  "status": "stable",
+  "summary": "Join component for grouping multiple items together with consistent styling.",
+  "keywords": [
+    "button group",
+    "container",
+    "group",
+    "input group",
+    "join"
+  ],
+  "sourcePaths": [
+    "app/design-system/join/page.js",
+    "assets/styles/button.css",
+    "assets/styles/join.css"
+  ],
+  "apiModel": "html-class",
+  "baseClass": "join",
+  "variants": [],
+  "sizes": [],
+  "states": [],
+  "structure": {
+    "rootElement": "div",
+    "requiredClasses": [
+      "join"
+    ],
+    "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 'join' 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-inverted",
+    "background-surface",
+    "background-surface-elevated",
+    "brand-default",
+    "brand-strong",
+    "core-black",
+    "core-ui-100",
+    "core-ui-800",
+    "core-white",
+    "line-default",
+    "line-error",
+    "line-strong",
+    "text-attention",
+    "text-brand",
+    "text-brand-active",
+    "text-brand-hover",
+    "text-default",
+    "text-error",
+    "text-inverted",
+    "text-secondary",
+    "text-success",
+    "text-tertiary"
+  ],
+  "examples": [
+    {
+      "id": "canonical",
+      "file": "examples/join.html",
+      "description": "Minimal canonical Join 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/kbd.json

@@ -0,0 +1,139 @@
+{
+  "id": "kbd",
+  "name": "Kbd",
+  "status": "stable",
+  "summary": "Display keyboard shortcuts and key combinations.",
+  "keywords": [
+    "command",
+    "control",
+    "hotkey",
+    "hotkeys",
+    "input",
+    "kbd",
+    "key",
+    "keybind",
+    "keybinding",
+    "keyboard",
+    "keypress",
+    "keys",
+    "shortcut"
+  ],
+  "sourcePaths": [
+    "app/design-system/kbd/page.js",
+    "assets/styles/colors.css",
+    "assets/styles/kbd.css",
+    "assets/styles/shared.css"
+  ],
+  "apiModel": "html-class",
+  "baseClass": "kbd",
+  "variants": [
+    {
+      "name": "kbd-combo",
+      "className": "kbd-combo",
+      "description": "Style for key combinations"
+    },
+    {
+      "name": "kbd-ghost",
+      "className": "kbd-ghost",
+      "description": "Ghost keyboard key"
+    },
+    {
+      "name": "inverted",
+      "className": "inverted",
+      "description": "Inverted keyboard key"
+    },
+    {
+      "name": "kbd-disabled",
+      "className": "kbd-disabled",
+      "description": "Disabled state for keyboard key"
+    }
+  ],
+  "sizes": [
+    {
+      "name": "kbd-sm",
+      "className": "kbd-sm",
+      "description": "Small keyboard key size"
+    },
+    {
+      "name": "kbd-lg",
+      "className": "kbd-lg",
+      "description": "Large keyboard key size"
+    }
+  ],
+  "states": [],
+  "structure": {
+    "rootElement": "kbd",
+    "requiredClasses": [
+      "kbd"
+    ],
+    "optionalClasses": [
+      "kbd-combo",
+      "kbd-ghost",
+      "inverted",
+      "kbd-disabled",
+      "kbd-sm",
+      "kbd-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 'kbd' 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-page",
+    "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",
+    "text-secondary",
+    "text-tertiary"
+  ],
+  "examples": [
+    {
+      "id": "canonical",
+      "file": "examples/kbd.html",
+      "description": "Minimal canonical Kbd 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/key-value.json

@@ -0,0 +1,86 @@
+{
+  "id": "key-value",
+  "name": "Key-value",
+  "status": "stable",
+  "summary": "Key-value layout for compact metadata, account details, and structured summaries.",
+  "keywords": [
+    "definition list",
+    "details",
+    "key value",
+    "key-value",
+    "label value",
+    "metadata"
+  ],
+  "sourcePaths": [
+    "app/design-system/key-value/page.js",
+    "assets/styles/key-value.css"
+  ],
+  "apiModel": "html-class",
+  "baseClass": "key-value",
+  "variants": [
+    {
+      "name": "key-value-compact",
+      "className": "key-value-compact",
+      "description": "Compact spacing variant."
+    }
+  ],
+  "sizes": [],
+  "states": [],
+  "structure": {
+    "rootElement": "div",
+    "requiredClasses": [
+      "key-value"
+    ],
+    "optionalClasses": [
+      "key-value-compact"
+    ],
+    "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 'key-value' 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",
+    "text-tertiary"
+  ],
+  "examples": [
+    {
+      "id": "canonical",
+      "file": "examples/key-value.html",
+      "description": "Minimal canonical Key-value 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."
+  }
+}