twntyx-css 1.0.2 → 1.0.5

package/llm/components/ai-orb.json

@@ -69,7 +69,6 @@
     "core-ui-500",
     "core-ui-600",
     "core-white",
-    "text-default",
     "text-inverted"
   ],
   "examples": [

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",
@@ -69,14 +62,13 @@
     "core-ui-500",
     "core-ui-600",
     "core-white",
-    "text-default",
     "text-inverted"
   ],
   "examples": [
     {
       "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/{skeleton.json → loader-skeleton.json}

@@ -1,12 +1,14 @@
 {
-  "id": "skeleton",
-  "name": "Skeleton",
+  "id": "loader-skeleton",
+  "name": "Skeleton loader",
   "status": "stable",
   "summary": "Skeleton loaders provide visual placeholders for content while it loads, improving perceived performance.",
   "keywords": [
     "animation",
     "fallback",
     "loader",
+    "loader skeleton",
+    "loader-skeleton",
     "loading",
     "placeholder",
     "preview",
@@ -19,7 +21,7 @@
     "wave"
   ],
   "sourcePaths": [
-    "app/design-system/skeleton/page.js",
+    "app/design-system/loader-skeleton/page.js",
     "assets/styles/skeleton.css"
   ],
   "apiModel": "html-class",
@@ -68,8 +70,8 @@
   "examples": [
     {
       "id": "canonical",
-      "file": "examples/skeleton.html",
-      "description": "Minimal canonical Skeleton usage."
+      "file": "examples/loader-skeleton.html",
+      "description": "Minimal canonical Skeleton loader usage."
     }
   ],
   "composition": {

package/llm/components/{loader.json → loader-symbol.json}

@@ -1,13 +1,15 @@
 {
-  "id": "loader",
-  "name": "Loader",
+  "id": "loader-symbol",
+  "name": "Symbol loader",
   "status": "stable",
-  "summary": "Loading indicators and spinners to show content loading states.",
+  "summary": "Loading indicators and symbol-based spinners to show content loading states.",
   "keywords": [
     "animation",
     "busy",
     "indicator",
     "loader",
+    "loader symbol",
+    "loader-symbol",
     "loading",
     "processing",
     "progress",
@@ -16,7 +18,7 @@
     "wait"
   ],
   "sourcePaths": [
-    "app/design-system/loader/page.js",
+    "app/design-system/loader-symbol/page.js",
     "assets/styles/loader.css"
   ],
   "apiModel": "html-class",
@@ -92,18 +94,14 @@
     "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"
   ],
   "examples": [
     {
       "id": "canonical",
-      "file": "examples/loader.html",
-      "description": "Minimal canonical Loader usage."
+      "file": "examples/loader-symbol.html",
+      "description": "Minimal canonical Symbol loader usage."
     }
   ],
   "composition": {

package/llm/components/{empty-state.json → loader-text.json}

@@ -1,29 +1,33 @@
 {
-  "id": "empty-state",
-  "name": "Empty state",
+  "id": "loader-text",
+  "name": "Text loader",
   "status": "stable",
-  "summary": "Empty state patterns to communicate no-content situations and guide next actions.",
+  "summary": "Animated loading text with configurable gradient colors for inline and page loading states.",
   "keywords": [
-    "blank state",
-    "empty state",
-    "empty-state",
-    "no data",
-    "placeholder",
-    "zero state"
+    "gradient",
+    "indicator",
+    "loader text",
+    "loader-text",
+    "loading",
+    "message",
+    "pulse",
+    "status",
+    "text loader",
+    "wait"
   ],
   "sourcePaths": [
-    "app/design-system/empty-state/page.js",
-    "assets/styles/empty-state.css"
+    "app/design-system/loader-text/page.js",
+    "assets/styles/loader.css"
   ],
   "apiModel": "html-class",
-  "baseClass": "empty-state",
+  "baseClass": "loader-text",
   "variants": [],
   "sizes": [],
   "states": [],
   "structure": {
     "rootElement": "div",
     "requiredClasses": [
-      "empty-state"
+      "loader-text"
     ],
     "optionalClasses": [],
     "requiredChildren": [],
@@ -46,7 +50,7 @@
     "focusBehavior": "No keyboard interaction is required unless nested interactive children are introduced."
   },
   "dos": [
-    "Apply the base class 'empty-state' on the root element.",
+    "Apply the base class 'loader-text' 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."
   ],
@@ -56,16 +60,14 @@
     "Do not remove required accessibility attributes when component is interactive."
   ],
   "tokenUsage": [
-    "background-surface",
-    "line-default",
-    "text-secondary",
-    "text-tertiary"
+    "line-strong",
+    "text-default"
   ],
   "examples": [
     {
       "id": "canonical",
-      "file": "examples/empty-state.html",
-      "description": "Minimal canonical Empty state usage."
+      "file": "examples/loader-text.html",
+      "description": "Minimal canonical Text loader usage."
     }
   ],
   "composition": {

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