twntyx-css 1.0.1 → 1.0.3

package/llm/components/loader-text.json

@@ -0,0 +1,100 @@
+{
+  "id": "loader-text",
+  "name": "Text loader",
+  "status": "stable",
+  "summary": "Animated loading text with configurable gradient colors for inline and page loading states.",
+  "keywords": [
+    "gradient",
+    "indicator",
+    "loader text",
+    "loader-text",
+    "loading",
+    "message",
+    "pulse",
+    "status",
+    "text loader",
+    "wait"
+  ],
+  "sourcePaths": [
+    "app/design-system/loader-text/page.js",
+    "assets/styles/loader.css"
+  ],
+  "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"
+    }
+  ],
+  "sizes": [],
+  "states": [],
+  "structure": {
+    "rootElement": "div",
+    "requiredClasses": [
+      "loader-text"
+    ],
+    "optionalClasses": [
+      "from-[color]",
+      "to-[color]"
+    ],
+    "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-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."
+  ],
+  "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",
+    "text-default"
+  ],
+  "examples": [
+    {
+      "id": "canonical",
+      "file": "examples/loader-text.html",
+      "description": "Minimal canonical Text 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/menu.json

@@ -21,6 +21,7 @@
   ],
   "sourcePaths": [
     "app/design-system/menu/page.js",
+    "assets/styles/chat.css",
     "assets/styles/menu.css"
   ],
   "apiModel": "html-class",
@@ -162,12 +163,21 @@
   ],
   "tokenUsage": [
     "background-brand",
+    "background-error",
+    "background-page",
     "background-surface",
+    "background-surface-elevated",
+    "background-surface-sunken",
+    "core-black",
+    "core-white",
     "line-brand",
     "line-default",
+    "line-strong",
     "text-brand",
     "text-default",
     "text-disabled",
+    "text-link",
+    "text-link-hover",
     "text-secondary",
     "text-tertiary"
   ],

package/llm/examples/chat-ai.html

@@ -0,0 +1 @@
+<div class="chat-ai">AI chat structure</div>

package/llm/examples/chat-footer.html

@@ -0,0 +1 @@
+<div class="chat-footer">Chat footer</div>

package/llm/examples/chat-person-to-person.html

@@ -0,0 +1 @@
+<div class="chat">Person to person chat structure</div>

package/llm/examples/chat.html

@@ -1 +1 @@
-<div class="chat chat-secondary">Chat</div>
+<div class="chat">Chat</div>

package/llm/examples/demo.html

@@ -0,0 +1 @@
+<div class="demo">Demo</div>

package/llm/examples/loader-skeleton.html

@@ -0,0 +1 @@
+<div class="skeleton">Skeleton loader</div>

package/llm/examples/loader-symbol.html

@@ -0,0 +1 @@
+<div class="loader">Symbol loader</div>

package/llm/examples/loader-text.html

@@ -0,0 +1 @@
+<div class="loader-text from-[color]">Text loader</div>

package/llm/index.json

@@ -1,9 +1,9 @@
 {
   "llmSchemaVersion": "1.0.0",
-  "designSystemVersion": "1.0.1",
+  "designSystemVersion": "1.0.3",
   "packageName": "twntyx-css",
   "apiModel": "html-class",
-  "sourceFingerprint": "0d67c24ed9207b2b6608184923d21917bd858192f3b090b8b464a63f83df00cb",
+  "sourceFingerprint": "3d83af24c73bdcd72a4b708f61c25fe52a177fe10b41c2b2ba325a3cf9abf037",
   "files": {
     "schema": "schema.json",
     "tokens": "tokens.json",
@@ -375,15 +375,69 @@
       "id": "chat",
       "name": "Chat",
       "file": "components/chat.json",
+      "status": "preview",
+      "summary": "Documentation and contract metadata for Chat in the twntyX design system.",
+      "keywords": [
+        "chat"
+      ]
+    },
+    {
+      "id": "chat-ai",
+      "name": "AI chat structure",
+      "file": "components/chat-ai.json",
       "status": "stable",
-      "summary": "Chat component for displaying conversations between users or with AI assistants.",
+      "summary": "AI chat conversation patterns with text, media, MCP bubbles, loading, and assistant response loop simulations.",
       "keywords": [
         "ai chat",
+        "assistant",
         "chat",
+        "chat ai",
+        "chat-ai",
         "chatbot",
-        "communication",
+        "loading state",
+        "mcp fallback",
+        "mcp result",
+        "mcp tool action",
+        "new message state"
+      ]
+    },
+    {
+      "id": "chat-footer",
+      "name": "Chat footer",
+      "file": "components/chat-footer.json",
+      "status": "stable",
+      "summary": "Chat composer/footer patterns including the current footer and a full variant with file upload trigger, model selector, and dictation simulation.",
+      "keywords": [
+        "attachment",
+        "chat",
+        "chat footer",
+        "chat input",
+        "chat-footer",
+        "composer",
+        "dictation",
+        "footer",
+        "ghost select",
+        "model selector"
+      ]
+    },
+    {
+      "id": "chat-person-to-person",
+      "name": "Person to person chat structure",
+      "file": "components/chat-person-to-person.json",
+      "status": "stable",
+      "summary": "Conversation patterns between people, including text, image attachments, MCP content, loading and new-message simulation states.",
+      "keywords": [
+        "chat",
+        "chat person to person",
+        "chat structure",
+        "chat-person-to-person",
         "conversation",
-        "messages"
+        "human chat",
+        "loading state",
+        "mcp",
+        "message attachments",
+        "messages",
+        "person to person"
       ]
     },
     {
@@ -558,6 +612,16 @@
         "time"
       ]
     },
+    {
+      "id": "demo",
+      "name": "Demo",
+      "file": "components/demo.json",
+      "status": "preview",
+      "summary": "Documentation and contract metadata for Demo in the twntyX design system.",
+      "keywords": [
+        "demo"
+      ]
+    },
     {
       "id": "divider",
       "name": "Divider",
@@ -694,7 +758,7 @@
       "name": "Icons reference",
       "file": "components/icons-reference.json",
       "status": "stable",
-      "summary": "Collection of icons used throughout the application, twntyX uses [Google's Material Symbols and Icons](https://fonts.google.com/icons) (weight 300, rounded), which provides us with an extensive icon library with over 2,500 glyphs",
+      "summary": "Collection of icons used throughout the application, twntyX uses [Google's Material Symbols and Icons](https://fonts.google.com/icons?icon.style=Rounded&icon.query=soun&icon.size=24) (weight 300, rounded), which provides us with an extensive icon library with over 2,500 glyphs",
       "keywords": [
         "assets",
         "collection",
@@ -828,16 +892,42 @@
       ]
     },
     {
-      "id": "loader",
-      "name": "Loader",
-      "file": "components/loader.json",
+      "id": "loader-skeleton",
+      "name": "Skeleton loader",
+      "file": "components/loader-skeleton.json",
+      "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",
+        "progress",
+        "pulse",
+        "shimmer",
+        "skeleton",
+        "suspense",
+        "wait",
+        "wave"
+      ]
+    },
+    {
+      "id": "loader-symbol",
+      "name": "Symbol loader",
+      "file": "components/loader-symbol.json",
       "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",
@@ -846,6 +936,25 @@
         "wait"
       ]
     },
+    {
+      "id": "loader-text",
+      "name": "Text loader",
+      "file": "components/loader-text.json",
+      "status": "stable",
+      "summary": "Animated loading text with configurable gradient colors for inline and page loading states.",
+      "keywords": [
+        "gradient",
+        "indicator",
+        "loader text",
+        "loader-text",
+        "loading",
+        "message",
+        "pulse",
+        "status",
+        "text loader",
+        "wait"
+      ]
+    },
     {
       "id": "logotype",
       "name": "Logotype",
@@ -1196,28 +1305,6 @@
         "stack"
       ]
     },
-    {
-      "id": "skeleton",
-      "name": "Skeleton",
-      "file": "components/skeleton.json",
-      "status": "stable",
-      "summary": "Skeleton loaders provide visual placeholders for content while it loads, improving perceived performance.",
-      "keywords": [
-        "animation",
-        "fallback",
-        "loader",
-        "loading",
-        "placeholder",
-        "preview",
-        "progress",
-        "pulse",
-        "shimmer",
-        "skeleton",
-        "suspense",
-        "wait",
-        "wave"
-      ]
-    },
     {
       "id": "stacked-chart",
       "name": "Stacked chart",