twntyx-css 1.0.3 → 1.0.6

package/llm/components/ai-perl.json

@@ -1,18 +1,11 @@
 {
   "id": "ai-perl",
-  "name": "Perl",
-  "status": "stable",
-  "summary": "Animated AI loader with circular glow ring and letter pulse.",
+  "name": "Ai Perl",
+  "status": "preview",
+  "summary": "Documentation and contract metadata for Ai Perl in the twntyX design system.",
   "keywords": [
-    "ai",
     "ai perl",
-    "ai-perl",
-    "animation",
-    "generating",
-    "loading",
-    "overlay",
-    "perl",
-    "spinner"
+    "ai-perl"
   ],
   "sourcePaths": [
     "app/design-system/ai-perl/page.js",
@@ -75,7 +68,7 @@
     {
       "id": "canonical",
       "file": "examples/ai-perl.html",
-      "description": "Minimal canonical Perl usage."
+      "description": "Minimal canonical Ai Perl usage."
     }
   ],
   "composition": {

package/llm/components/all-components.json

@@ -49,27 +49,35 @@
       "class"
     ],
     "required": [],
-    "dataAttributes": [
-      "data-value"
-    ],
+    "dataAttributes": [],
     "roles": [
+      "progressbar",
       "separator",
       "status"
     ],
     "aria": [
       "aria-current",
-      "aria-label"
+      "aria-hidden",
+      "aria-label",
+      "aria-valuemax",
+      "aria-valuemin",
+      "aria-valuenow"
     ]
   },
   "a11y": {
     "interactive": false,
     "requiredRoles": [
+      "progressbar",
       "separator",
       "status"
     ],
     "requiredAria": [
       "aria-current",
-      "aria-label"
+      "aria-hidden",
+      "aria-label",
+      "aria-valuemax",
+      "aria-valuemin",
+      "aria-valuenow"
     ],
     "keyboardSupport": [],
     "focusBehavior": "No keyboard interaction is required unless nested interactive children are introduced."

package/llm/components/{banner-marketplace.json → banner-funding.json}

@@ -1,5 +1,5 @@
 {
-  "id": "banner-marketplace",
+  "id": "banner-funding",
   "name": "Funding banner",
   "status": "preview",
   "summary": "A marketing banner component designed for promoting fundraising workflows and investor outreach actions.",
@@ -8,8 +8,8 @@
     "alert",
     "announcement",
     "banner",
-    "banner marketplace",
-    "banner-marketplace",
+    "banner funding",
+    "banner-funding",
     "capital raise",
     "fundraising",
     "investor",
@@ -19,17 +19,17 @@
     "promotion"
   ],
   "sourcePaths": [
-    "app/design-system/banner-marketplace/page.js"
+    "app/design-system/banner-funding/page.js"
   ],
   "apiModel": "html-class",
-  "baseClass": "banner-marketplace",
+  "baseClass": "banner-funding",
   "variants": [],
   "sizes": [],
   "states": [],
   "structure": {
     "rootElement": "div",
     "requiredClasses": [
-      "banner-marketplace"
+      "banner-funding"
     ],
     "optionalClasses": [],
     "requiredChildren": [],
@@ -52,7 +52,7 @@
     "focusBehavior": "No keyboard interaction is required unless nested interactive children are introduced."
   },
   "dos": [
-    "Apply the base class 'banner-marketplace' on the root element.",
+    "Apply the base class 'banner-funding' 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."
   ],
@@ -65,7 +65,7 @@
   "examples": [
     {
       "id": "canonical",
-      "file": "examples/banner-marketplace.html",
+      "file": "examples/banner-funding.html",
       "description": "Minimal canonical Funding banner usage."
     }
   ],

package/llm/components/breadcrumb.json

@@ -21,7 +21,6 @@
     "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",

package/llm/components/button-container.json

@@ -109,6 +109,7 @@
     "core-ui-800",
     "core-white",
     "line-attention",
+    "line-brand",
     "line-default",
     "line-error",
     "line-focus",

package/llm/components/{card-assessment.json → card-draggable.json}

@@ -1,39 +1,31 @@
 {
-  "id": "card-assessment",
-  "name": "Investor fit card",
+  "id": "card-draggable",
+  "name": "Draggable card",
   "status": "preview",
-  "summary": "A versatile card component for displaying investor-fit insights, outreach criteria, and funding-readiness signals.",
+  "summary": "A versatile draggablecard component for displaying various items.",
   "keywords": [
     "card",
-    "card assessment",
-    "card-assessment",
-    "criteria",
-    "evaluation",
-    "feedback",
-    "fundraising",
-    "investor",
-    "investor fit",
-    "outreach",
-    "pipeline",
-    "pitch call",
-    "profile",
-    "progress",
-    "readiness",
-    "results",
-    "review"
+    "card draggable",
+    "card-draggable",
+    "drag and drop",
+    "draggable",
+    "items",
+    "list",
+    "reorderable",
+    "sortable"
   ],
   "sourcePaths": [
-    "app/design-system/card-assessment/page.js"
+    "app/design-system/card-draggable/page.js"
   ],
   "apiModel": "html-class",
-  "baseClass": "card-assessment",
+  "baseClass": "card-draggable",
   "variants": [],
   "sizes": [],
   "states": [],
   "structure": {
     "rootElement": "div",
     "requiredClasses": [
-      "card-assessment"
+      "card-draggable"
     ],
     "optionalClasses": [],
     "requiredChildren": [],
@@ -64,7 +56,7 @@
     "focusBehavior": "No keyboard interaction is required unless nested interactive children are introduced."
   },
   "dos": [
-    "Apply the base class 'card-assessment' on the root element.",
+    "Apply the base class 'card-draggable' 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."
   ],
@@ -77,8 +69,8 @@
   "examples": [
     {
       "id": "canonical",
-      "file": "examples/card-assessment.html",
-      "description": "Minimal canonical Investor fit card usage."
+      "file": "examples/card-draggable.html",
+      "description": "Minimal canonical Draggable card usage."
     }
   ],
   "composition": {

package/llm/components/chat-ai.json

@@ -17,19 +17,64 @@
     "new message state"
   ],
   "sourcePaths": [
-    "app/design-system/chat-ai/page.js"
+    "app/design-system/chat-ai/page.js",
+    "assets/styles/button.css",
+    "assets/styles/chat.css",
+    "assets/styles/form-text-select.css",
+    "assets/styles/panel.css",
+    "assets/styles/toast.css"
   ],
   "apiModel": "html-class",
   "baseClass": "chat-ai",
-  "variants": [],
-  "sizes": [],
-  "states": [],
+  "variants": [
+    {
+      "name": "chat-secondary",
+      "className": "chat-secondary",
+      "description": "AI chat visual variant styling."
+    }
+  ],
+  "sizes": [
+    {
+      "name": "chat-loop-stack-lg",
+      "className": "chat-loop-stack-lg",
+      "description": "Large min-height variant for loop stack."
+    }
+  ],
+  "states": [
+    {
+      "name": "chat-loop-loading",
+      "className": "chat-loop-loading",
+      "description": "Animated loading row in loop simulation."
+    },
+    {
+      "name": "chat-loop-message",
+      "className": "chat-loop-message",
+      "description": "Animated resolved message row in loop simulation."
+    },
+    {
+      "name": "is-owner",
+      "className": "is-owner",
+      "description": "Marks messages authored by the current user."
+    },
+    {
+      "name": "is-loading",
+      "className": "is-loading",
+      "description": "Shows loading placeholder behavior for a message group."
+    }
+  ],
   "structure": {
     "rootElement": "div",
     "requiredClasses": [
       "chat-ai"
     ],
-    "optionalClasses": [],
+    "optionalClasses": [
+      "chat-secondary",
+      "chat-loop-stack-lg",
+      "chat-loop-loading",
+      "chat-loop-message",
+      "is-owner",
+      "is-loading"
+    ],
     "requiredChildren": [],
     "optionalChildren": []
   },
@@ -69,7 +114,56 @@
     "Do not rely on undocumented internal classes in production templates.",
     "Do not remove required accessibility attributes when component is interactive."
   ],
-  "tokenUsage": [],
+  "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-50",
+    "core-ui-700",
+    "core-ui-800",
+    "core-ui-900",
+    "core-white",
+    "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-hover",
+    "text-secondary",
+    "text-success",
+    "text-tertiary",
+    "text-warning"
+  ],
   "examples": [
     {
       "id": "canonical",

package/llm/components/chat-footer.json

@@ -22,15 +22,36 @@
   ],
   "apiModel": "html-class",
   "baseClass": "chat-footer",
-  "variants": [],
+  "variants": [
+    {
+      "name": "chat-footer-full",
+      "className": "chat-footer-full",
+      "description": "Extended footer layout for full chat composer demo."
+    },
+    {
+      "name": "chat-input-full",
+      "className": "chat-input-full",
+      "description": "Expanded input row behavior used in full footer mode."
+    }
+  ],
   "sizes": [],
-  "states": [],
+  "states": [
+    {
+      "name": "is-listening",
+      "className": "is-listening",
+      "description": "Active dictation state with listening indicator."
+    }
+  ],
   "structure": {
     "rootElement": "div",
     "requiredClasses": [
       "chat-footer"
     ],
-    "optionalClasses": [],
+    "optionalClasses": [
+      "chat-footer-full",
+      "chat-input-full",
+      "is-listening"
+    ],
     "requiredChildren": [],
     "optionalChildren": []
   },

package/llm/components/checkmark.json

@@ -25,7 +25,6 @@
     "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",

package/llm/components/command-palette.json

@@ -23,7 +23,6 @@
     "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",

package/llm/components/countdown.json

@@ -81,9 +81,9 @@
     "Do not remove required accessibility attributes when component is interactive."
   ],
   "tokenUsage": [
+    "background-brand",
     "background-surface",
     "background-surface-elevated",
-    "brand-default",
     "brand-moderate",
     "line-brand",
     "line-default",

package/llm/components/divider.json

@@ -81,8 +81,8 @@
     "Do not remove required accessibility attributes when component is interactive."
   ],
   "tokenUsage": [
-    "line-default",
     "line-highlight",
+    "text-default",
     "text-tertiary"
   ],
   "examples": [

package/llm/components/illustrations-library.json

@@ -2,7 +2,7 @@
   "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).",
+  "summary": "Browse our collection of custom illustrations and visual elements used to enhance the user experience and reinforce our brand identity across the application.",
   "keywords": [
     "artwork",
     "assets",

package/llm/components/kbd.json

@@ -104,10 +104,10 @@
     "Do not remove required accessibility attributes when component is interactive."
   ],
   "tokenUsage": [
+    "background-brand",
     "background-page",
     "background-surface",
     "background-surface-elevated",
-    "brand-default",
     "brand-moderate",
     "line-brand",
     "line-default",

package/llm/components/key-value.json

@@ -17,13 +17,7 @@
   ],
   "apiModel": "html-class",
   "baseClass": "key-value",
-  "variants": [
-    {
-      "name": "key-value-compact",
-      "className": "key-value-compact",
-      "description": "Compact spacing variant."
-    }
-  ],
+  "variants": [],
   "sizes": [],
   "states": [],
   "structure": {
@@ -31,9 +25,7 @@
     "requiredClasses": [
       "key-value"
     ],
-    "optionalClasses": [
-      "key-value-compact"
-    ],
+    "optionalClasses": [],
     "requiredChildren": [],
     "optionalChildren": []
   },

package/llm/components/loader-symbol.json

@@ -94,10 +94,6 @@
     "Do not remove required accessibility attributes when component is interactive."
   ],
   "tokenUsage": [
-    "core-black",
-    "core-ui-200",
-    "core-ui-700",
-    "core-white",
     "line-strong",
     "text-default"
   ],

package/llm/components/loader-text.json

@@ -21,18 +21,7 @@
   ],
   "apiModel": "html-class",
   "baseClass": "loader-text",
-  "variants": [
-    {
-      "name": "from-[color]",
-      "className": "from-[color]",
-      "description": "Set the starting color of the text loader"
-    },
-    {
-      "name": "to-[color]",
-      "className": "to-[color]",
-      "description": "Set the ending color of the text loader"
-    }
-  ],
+  "variants": [],
   "sizes": [],
   "states": [],
   "structure": {
@@ -40,10 +29,7 @@
     "requiredClasses": [
       "loader-text"
     ],
-    "optionalClasses": [
-      "from-[color]",
-      "to-[color]"
-    ],
+    "optionalClasses": [],
     "requiredChildren": [],
     "optionalChildren": []
   },
@@ -74,10 +60,6 @@
     "Do not remove required accessibility attributes when component is interactive."
   ],
   "tokenUsage": [
-    "core-black",
-    "core-ui-200",
-    "core-ui-700",
-    "core-white",
     "line-strong",
     "text-default"
   ],

package/llm/components/progress-bullet.json

@@ -35,7 +35,6 @@
     "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",

package/llm/components/state.json

@@ -110,8 +110,9 @@
     "Do not remove required accessibility attributes when component is interactive."
   ],
   "tokenUsage": [
+    "background-brand",
     "brand-default",
-    "brand-soft",
+    "line-brand",
     "line-default",
     "line-error",
     "line-success",

package/llm/components/stepper.json

@@ -63,9 +63,9 @@
     "Do not remove required accessibility attributes when component is interactive."
   ],
   "tokenUsage": [
+    "background-brand",
     "background-surface",
     "background-surface-elevated",
-    "brand-default",
     "brand-moderate",
     "line-brand",
     "line-default",