twntyx-css 1.0.0

package/llm/components/link.json

@@ -0,0 +1,120 @@
+{
+  "id": "link",
+  "name": "Link",
+  "status": "stable",
+  "summary": "Accessible link component for navigating between pages or external resources, with support for different visual styles, states and behaviors.",
+  "keywords": [
+    "a11y",
+    "accessibility",
+    "anchor",
+    "button link",
+    "external link",
+    "href",
+    "hyperlink",
+    "internal link",
+    "link",
+    "navigation",
+    "routing",
+    "text link",
+    "url"
+  ],
+  "sourcePaths": [
+    "app/design-system/link/page.js",
+    "assets/styles/link.css"
+  ],
+  "apiModel": "html-class",
+  "baseClass": "link",
+  "variants": [
+    {
+      "name": "link-base",
+      "className": "link-base",
+      "description": "Default link style with hover and active states"
+    },
+    {
+      "name": "link-underline",
+      "className": "link-underline",
+      "description": "Underlined link style that removes underline on active state"
+    },
+    {
+      "name": "link-subtle",
+      "className": "link-subtle",
+      "description": "Subtle link style with background hover effect and smaller text"
+    }
+  ],
+  "sizes": [],
+  "states": [],
+  "structure": {
+    "rootElement": "a",
+    "requiredClasses": [
+      "link"
+    ],
+    "optionalClasses": [
+      "link-base",
+      "link-underline",
+      "link-subtle"
+    ],
+    "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 'link' 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-elevated",
+    "brand-default",
+    "text-brand",
+    "text-brand-active",
+    "text-brand-hover",
+    "text-tertiary"
+  ],
+  "examples": [
+    {
+      "id": "canonical",
+      "file": "examples/link.html",
+      "description": "Minimal canonical Link 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/loader.json

@@ -0,0 +1,117 @@
+{
+  "id": "loader",
+  "name": "Loader",
+  "status": "stable",
+  "summary": "Loading indicators and spinners to show content loading states.",
+  "keywords": [
+    "animation",
+    "busy",
+    "indicator",
+    "loader",
+    "loading",
+    "processing",
+    "progress",
+    "spinner",
+    "status",
+    "wait"
+  ],
+  "sourcePaths": [
+    "app/design-system/loader/page.js",
+    "assets/styles/loader.css"
+  ],
+  "apiModel": "html-class",
+  "baseClass": "loader",
+  "variants": [],
+  "sizes": [
+    {
+      "name": "loader-xl",
+      "className": "loader-xl",
+      "description": "Extra large loader size"
+    },
+    {
+      "name": "loader-lg",
+      "className": "loader-lg",
+      "description": "Large loader size"
+    },
+    {
+      "name": "loader-md",
+      "className": "loader-md",
+      "description": "Medium loader size (default)"
+    },
+    {
+      "name": "loader-sm",
+      "className": "loader-sm",
+      "description": "Small loader size"
+    },
+    {
+      "name": "loader-xs",
+      "className": "loader-xs",
+      "description": "Extra small loader size"
+    }
+  ],
+  "states": [],
+  "structure": {
+    "rootElement": "div",
+    "requiredClasses": [
+      "loader"
+    ],
+    "optionalClasses": [
+      "loader-xl",
+      "loader-lg",
+      "loader-md",
+      "loader-sm",
+      "loader-xs"
+    ],
+    "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 'loader' 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": [
+    "core-black",
+    "core-ui-200",
+    "core-ui-700",
+    "core-white",
+    "line-strong"
+  ],
+  "examples": [
+    {
+      "id": "canonical",
+      "file": "examples/loader.html",
+      "description": "Minimal canonical Loader 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/logotype.json

@@ -0,0 +1,75 @@
+{
+  "id": "logotype",
+  "name": "Logotype",
+  "status": "stable",
+  "summary": "Logotype component for displaying the brand logo.",
+  "keywords": [
+    "brand",
+    "branding",
+    "identity",
+    "logo",
+    "logotype",
+    "visual"
+  ],
+  "sourcePaths": [
+    "app/design-system/logotype/page.js",
+    "assets/styles/logotype.css"
+  ],
+  "apiModel": "html-class",
+  "baseClass": "logotype",
+  "variants": [],
+  "sizes": [],
+  "states": [],
+  "structure": {
+    "rootElement": "div",
+    "requiredClasses": [
+      "logotype"
+    ],
+    "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 'logotype' 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/logotype.html",
+      "description": "Minimal canonical Logotype 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/menu.json

@@ -0,0 +1,192 @@
+{
+  "id": "menu",
+  "name": "Menu",
+  "status": "stable",
+  "summary": "Menu is used to display a list of links vertically or horizontally.",
+  "keywords": [
+    "choices",
+    "dropdown",
+    "horizontal",
+    "items",
+    "links",
+    "list",
+    "menu",
+    "nav",
+    "navbar",
+    "navigation",
+    "options",
+    "select",
+    "ui",
+    "vertical"
+  ],
+  "sourcePaths": [
+    "app/design-system/menu/page.js",
+    "assets/styles/menu.css"
+  ],
+  "apiModel": "html-class",
+  "baseClass": "menu",
+  "variants": [
+    {
+      "name": "menu-dropdown-toggle",
+      "className": "menu-dropdown-toggle",
+      "description": "Toggle button for dropdown menu"
+    },
+    {
+      "name": "menu-dropdown-show",
+      "className": "menu-dropdown-show",
+      "description": "Shows the dropdown menu when applied"
+    },
+    {
+      "name": "menu-horizontal",
+      "className": "menu-horizontal",
+      "description": "Makes the menu display horizontally"
+    },
+    {
+      "name": "menu-check",
+      "className": "menu-check",
+      "description": "Applies check icon to active menu item"
+    },
+    {
+      "name": "active",
+      "className": "active",
+      "description": "Applies active state to menu item"
+    },
+    {
+      "name": "disabled",
+      "className": "disabled",
+      "description": "Disables menu item"
+    },
+    {
+      "name": "menu-rounded-none",
+      "className": "menu-rounded-none",
+      "description": "Removes rounded corners from menu items"
+    },
+    {
+      "name": "menu-rounded-full",
+      "className": "menu-rounded-full",
+      "description": "Applies fully rounded corners to menu items"
+    }
+  ],
+  "sizes": [
+    {
+      "name": "menu-xs",
+      "className": "menu-xs",
+      "description": "Extra small menu items"
+    },
+    {
+      "name": "menu-sm",
+      "className": "menu-sm",
+      "description": "Small menu items"
+    },
+    {
+      "name": "menu-lg",
+      "className": "menu-lg",
+      "description": "Large menu items"
+    },
+    {
+      "name": "menu-rounded-sm",
+      "className": "menu-rounded-sm",
+      "description": "Applies small rounded corners to menu items"
+    },
+    {
+      "name": "menu-rounded-lg",
+      "className": "menu-rounded-lg",
+      "description": "Applies large rounded corners to menu items"
+    }
+  ],
+  "states": [
+    {
+      "name": "details[open]",
+      "className": "details[open]",
+      "description": "State for open collapsible menu"
+    }
+  ],
+  "structure": {
+    "rootElement": "a",
+    "requiredClasses": [
+      "menu"
+    ],
+    "optionalClasses": [
+      "menu-dropdown-toggle",
+      "menu-dropdown-show",
+      "menu-horizontal",
+      "menu-check",
+      "active",
+      "disabled",
+      "menu-rounded-none",
+      "menu-rounded-full",
+      "menu-xs",
+      "menu-sm",
+      "menu-lg",
+      "menu-rounded-sm",
+      "menu-rounded-lg",
+      "details[open]"
+    ],
+    "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 'menu' 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-surface",
+    "line-brand",
+    "line-default",
+    "text-brand",
+    "text-default",
+    "text-disabled",
+    "text-secondary",
+    "text-tertiary"
+  ],
+  "examples": [
+    {
+      "id": "canonical",
+      "file": "examples/menu.html",
+      "description": "Minimal canonical Menu 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/modal.json

@@ -0,0 +1,167 @@
+{
+  "id": "modal",
+  "name": "Modal",
+  "status": "stable",
+  "summary": "Modal dialogs for displaying content that requires attention or user input.",
+  "keywords": [
+    "alert",
+    "attention",
+    "content",
+    "dialog",
+    "focus",
+    "form",
+    "interaction",
+    "layer",
+    "lightbox",
+    "message",
+    "modal",
+    "notification",
+    "overlay",
+    "panel",
+    "popup",
+    "screen",
+    "window"
+  ],
+  "sourcePaths": [
+    "app/design-system/modal/page.js",
+    "assets/styles/modal.css"
+  ],
+  "apiModel": "html-class",
+  "baseClass": "modal",
+  "variants": [
+    {
+      "name": "modal-sticky-header",
+      "className": "modal-sticky-header",
+      "description": "Sticky header variant"
+    },
+    {
+      "name": "modal-sticky-footer",
+      "className": "modal-sticky-footer",
+      "description": "Sticky footer variant"
+    },
+    {
+      "name": "modal-full",
+      "className": "modal-full",
+      "description": "Full screen modal"
+    }
+  ],
+  "sizes": [
+    {
+      "name": "modal-sm",
+      "className": "modal-sm",
+      "description": "Small width variant (max-w-md)"
+    },
+    {
+      "name": "modal-md",
+      "className": "modal-md",
+      "description": "Medium width variant (max-w-xl)"
+    },
+    {
+      "name": "modal-lg",
+      "className": "modal-lg",
+      "description": "Large width variant (max-w-3xl)"
+    },
+    {
+      "name": "modal-xl",
+      "className": "modal-xl",
+      "description": "Extra large width variant (max-w-4xl)"
+    }
+  ],
+  "states": [],
+  "structure": {
+    "rootElement": "dialog",
+    "requiredClasses": [
+      "modal"
+    ],
+    "optionalClasses": [
+      "modal-sticky-header",
+      "modal-sticky-footer",
+      "modal-full",
+      "modal-sm",
+      "modal-md",
+      "modal-lg",
+      "modal-xl"
+    ],
+    "requiredChildren": [],
+    "optionalChildren": []
+  },
+  "attributes": {
+    "allowed": [
+      "class",
+      "open",
+      "role",
+      "aria-modal",
+      "aria-labelledby",
+      "aria-describedby"
+    ],
+    "required": [
+      "role",
+      "aria-modal"
+    ],
+    "dataAttributes": [],
+    "roles": [
+      "dialog"
+    ],
+    "aria": [
+      "aria-modal",
+      "aria-labelledby",
+      "aria-describedby"
+    ]
+  },
+  "a11y": {
+    "interactive": true,
+    "requiredRoles": [
+      "dialog"
+    ],
+    "requiredAria": [
+      "aria-modal",
+      "aria-labelledby"
+    ],
+    "keyboardSupport": [
+      "Tab",
+      "Shift+Tab",
+      "Escape",
+      "Enter"
+    ],
+    "focusBehavior": "When opened, focus moves inside the modal and returns to the trigger when closed."
+  },
+  "dos": [
+    "Use modals only for blocking, decision-critical flows.",
+    "Include a visible close action and Escape key support.",
+    "Set `aria-labelledby` to the modal title and keep title concise."
+  ],
+  "donts": [
+    "Do not open nested modals.",
+    "Do not trap focus without a keyboard-accessible close action.",
+    "Do not place long-form navigation inside modal dialogs."
+  ],
+  "tokenUsage": [
+    "background-overlay",
+    "background-surface",
+    "line-default"
+  ],
+  "examples": [
+    {
+      "id": "canonical",
+      "file": "examples/modal.html",
+      "description": "Minimal canonical Modal usage."
+    }
+  ],
+  "composition": {
+    "patterns": [
+      "feedback-and-status"
+    ],
+    "relatedComponents": [
+      "button",
+      "state",
+      "toast"
+    ],
+    "notes": [
+      "Use modal footer actions in deterministic order: secondary cancel before primary confirm."
+    ]
+  },
+  "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."
+  }
+}