twntyx-css 1.0.3 → 1.0.5

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/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/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",

package/llm/components/steps.json

@@ -20,60 +20,19 @@
   ],
   "sourcePaths": [
     "app/design-system/steps/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"
+    "assets/styles/steps.css"
   ],
   "apiModel": "html-class",
   "baseClass": "steps",
-  "variants": [
-    {
-      "name": "steps-vertical",
-      "className": "steps-vertical",
-      "description": "Makes steps display vertically"
-    }
-  ],
-  "sizes": [
-    {
-      "name": "steps-sm",
-      "className": "steps-sm",
-      "description": "Small size variant"
-    },
-    {
-      "name": "steps-lg",
-      "className": "steps-lg",
-      "description": "Large size variant"
-    }
-  ],
-  "states": [
-    {
-      "name": "is-active",
-      "className": "is-active",
-      "description": "Marks a step as active/complete"
-    }
-  ],
+  "variants": [],
+  "sizes": [],
+  "states": [],
   "structure": {
     "rootElement": "div",
     "requiredClasses": [
       "steps"
     ],
-    "optionalClasses": [
-      "steps-vertical",
-      "steps-sm",
-      "steps-lg",
-      "is-active"
-    ],
+    "optionalClasses": [],
     "requiredChildren": [],
     "optionalChildren": []
   },
@@ -104,59 +63,11 @@
     "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"
+    "text-tertiary"
   ],
   "examples": [
     {

package/llm/components/surface.json

@@ -115,6 +115,7 @@
   "tokenUsage": [
     "background-attention",
     "background-attention-active",
+    "background-brand",
     "background-error",
     "background-error-active",
     "background-info",
@@ -142,6 +143,7 @@
     "core-ui-900",
     "core-white",
     "line-attention",
+    "line-brand",
     "line-default",
     "line-error",
     "line-focus",

package/llm/components/tabs.json

@@ -111,6 +111,7 @@
     "Do not remove required accessibility attributes when component is interactive."
   ],
   "tokenUsage": [
+    "background-brand",
     "background-surface",
     "background-surface-elevated",
     "brand-default",