twntyx-css 1.0.3 → 1.0.5

package/llm/components/{empty-state.json → template-navbar.json}

@@ -1,29 +1,27 @@
 {
-  "id": "empty-state",
-  "name": "Empty state",
-  "status": "stable",
-  "summary": "Empty state patterns to communicate no-content situations and guide next actions.",
+  "id": "template-navbar",
+  "name": "Navbar",
+  "status": "preview",
+  "summary": "A template for a navbar component.",
   "keywords": [
-    "blank state",
-    "empty state",
-    "empty-state",
-    "no data",
-    "placeholder",
-    "zero state"
+    "navbar",
+    "navigation bar",
+    "template navbar",
+    "template-navbar",
+    "top bar"
   ],
   "sourcePaths": [
-    "app/design-system/empty-state/page.js",
-    "assets/styles/empty-state.css"
+    "app/design-system/template-navbar/page.js"
   ],
   "apiModel": "html-class",
-  "baseClass": "empty-state",
+  "baseClass": "template-navbar",
   "variants": [],
   "sizes": [],
   "states": [],
   "structure": {
-    "rootElement": "div",
+    "rootElement": "a",
     "requiredClasses": [
-      "empty-state"
+      "template-navbar"
     ],
     "optionalClasses": [],
     "requiredChildren": [],
@@ -36,17 +34,21 @@
     "required": [],
     "dataAttributes": [],
     "roles": [],
-    "aria": []
+    "aria": [
+      "aria-label"
+    ]
   },
   "a11y": {
     "interactive": false,
     "requiredRoles": [],
-    "requiredAria": [],
+    "requiredAria": [
+      "aria-label"
+    ],
     "keyboardSupport": [],
     "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 'template-navbar' 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."
   ],
@@ -55,21 +57,18 @@
     "Do not rely on undocumented internal classes in production templates.",
     "Do not remove required accessibility attributes when component is interactive."
   ],
-  "tokenUsage": [
-    "background-surface",
-    "line-default",
-    "text-secondary",
-    "text-tertiary"
-  ],
+  "tokenUsage": [],
   "examples": [
     {
       "id": "canonical",
-      "file": "examples/empty-state.html",
-      "description": "Minimal canonical Empty state usage."
+      "file": "examples/template-navbar.html",
+      "description": "Minimal canonical Navbar usage."
     }
   ],
   "composition": {
-    "patterns": [],
+    "patterns": [
+      "navigation-hierarchy"
+    ],
     "relatedComponents": [],
     "notes": []
   },

package/llm/components/text-input.json

@@ -21,125 +21,19 @@
     "write"
   ],
   "sourcePaths": [
-    "app/design-system/text-input/page.js",
-    "assets/styles/breadcrumb.css",
-    "assets/styles/button.css",
-    "assets/styles/chat.css",
-    "assets/styles/checkmark.css",
-    "assets/styles/command.css",
-    "assets/styles/field.css",
-    "assets/styles/form-checkbox-radio-toggle.css",
-    "assets/styles/form-shared.css",
-    "assets/styles/form-text-select.css",
-    "assets/styles/input-group.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"
+    "app/design-system/text-input/page.js"
   ],
   "apiModel": "html-class",
-  "baseClass": "input-text",
-  "variants": [
-    {
-      "name": "input-divide",
-      "className": "input-divide",
-      "description": "Adds divider between input and addons"
-    },
-    {
-      "name": "input-chevron",
-      "className": "input-chevron",
-      "description": "Adds animated chevron to input"
-    },
-    {
-      "name": "input-required",
-      "className": "input-required",
-      "description": "Adds required indicator to label"
-    },
-    {
-      "name": "input-ghost",
-      "className": "input-ghost",
-      "description": "Removes borders and background"
-    },
-    {
-      "name": "input-rounded-none",
-      "className": "input-rounded-none",
-      "description": "Removes border radius"
-    },
-    {
-      "name": "input-rounded-full",
-      "className": "input-rounded-full",
-      "description": "Fully rounded corners (default)"
-    }
-  ],
-  "sizes": [
-    {
-      "name": "input-xs",
-      "className": "input-xs",
-      "description": "Extra small size variant"
-    },
-    {
-      "name": "input-sm",
-      "className": "input-sm",
-      "description": "Small size variant"
-    },
-    {
-      "name": "input-lg",
-      "className": "input-lg",
-      "description": "Large size variant"
-    },
-    {
-      "name": "input-rounded-sm",
-      "className": "input-rounded-sm",
-      "description": "Small border radius (2px)"
-    },
-    {
-      "name": "input-rounded-md",
-      "className": "input-rounded-md",
-      "description": "Medium border radius (6px)"
-    },
-    {
-      "name": "input-rounded-lg",
-      "className": "input-rounded-lg",
-      "description": "Large border radius (8px)"
-    }
-  ],
-  "states": [
-    {
-      "name": "is-loading",
-      "className": "is-loading",
-      "description": "Shows loading spinner"
-    },
-    {
-      "name": "is-active",
-      "className": "is-active",
-      "description": "Active/focused state"
-    }
-  ],
+  "baseClass": "text-input",
+  "variants": [],
+  "sizes": [],
+  "states": [],
   "structure": {
     "rootElement": "input",
     "requiredClasses": [
-      "input-text"
-    ],
-    "optionalClasses": [
-      "input-divide",
-      "input-chevron",
-      "input-required",
-      "input-ghost",
-      "input-rounded-none",
-      "input-rounded-full",
-      "input-xs",
-      "input-sm",
-      "input-lg",
-      "input-rounded-sm",
-      "input-rounded-md",
-      "input-rounded-lg",
-      "is-loading",
-      "is-active"
+      "text-input"
     ],
+    "optionalClasses": [],
     "requiredChildren": [],
     "optionalChildren": []
   },
@@ -192,62 +86,7 @@
     "Do not hide error text when `aria-invalid` is set.",
     "Do not apply destructive styles to neutral data entry states."
   ],
-  "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-500",
-    "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"
-  ],
+  "tokenUsage": [],
   "examples": [
     {
       "id": "canonical",

package/llm/components/toast.json

@@ -128,9 +128,7 @@
     "background-error-active",
     "background-info-active",
     "background-success-active",
-    "background-surface",
     "background-warning-active",
-    "line-default",
     "text-default",
     "text-error",
     "text-info",

package/llm/components/tooltip.json

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

package/llm/examples/ai-perl.html

@@ -1 +1 @@
-<div class="ai-perl">Perl</div>
+<div class="ai-perl">Ai Perl</div>

package/llm/examples/banner-funding.html

@@ -0,0 +1 @@
+<div class="banner-funding">Funding banner</div>

package/llm/examples/chat-ai.html

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

package/llm/examples/chat-footer.html

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

package/llm/examples/key-value.html

@@ -1 +1 @@
-<div class="key-value key-value-compact">Key-value</div>
+<div class="key-value">Key-value</div>

package/llm/examples/loader-text.html

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

package/llm/examples/steps.html

@@ -1 +1 @@
-<div class="steps steps-vertical">Steps</div>
+<div class="steps">Steps</div>

package/llm/examples/template-navbar.html

@@ -0,0 +1 @@
+<a class="template-navbar" href="#">Navbar</a>

package/llm/index.json

@@ -1,9 +1,9 @@
 {
   "llmSchemaVersion": "1.0.0",
-  "designSystemVersion": "1.0.3",
+  "designSystemVersion": "1.0.5",
   "packageName": "twntyx-css",
   "apiModel": "html-class",
-  "sourceFingerprint": "3d83af24c73bdcd72a4b708f61c25fe52a177fe10b41c2b2ba325a3cf9abf037",
+  "sourceFingerprint": "bd6f1d8c217682374a3d5519f14a8c18f182db2cea28a2eb3dd66148a1b33dfa",
   "files": {
     "schema": "schema.json",
     "tokens": "tokens.json",
@@ -57,20 +57,13 @@
     },
     {
       "id": "ai-perl",
-      "name": "Perl",
+      "name": "Ai Perl",
       "file": "components/ai-perl.json",
-      "status": "stable",
-      "summary": "Animated AI loader with circular glow ring and letter pulse.",
+      "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"
       ]
     },
     {
@@ -198,9 +191,9 @@
       ]
     },
     {
-      "id": "banner-marketplace",
+      "id": "banner-funding",
       "name": "Funding banner",
-      "file": "components/banner-marketplace.json",
+      "file": "components/banner-funding.json",
       "status": "preview",
       "summary": "A marketing banner component designed for promoting fundraising workflows and investor outreach actions.",
       "keywords": [
@@ -208,8 +201,8 @@
         "alert",
         "announcement",
         "banner",
-        "banner marketplace",
-        "banner-marketplace",
+        "banner funding",
+        "banner-funding",
         "capital raise",
         "fundraising",
         "investor",
@@ -642,21 +635,6 @@
         "split"
       ]
     },
-    {
-      "id": "empty-state",
-      "name": "Empty state",
-      "file": "components/empty-state.json",
-      "status": "stable",
-      "summary": "Empty state patterns to communicate no-content situations and guide next actions.",
-      "keywords": [
-        "blank state",
-        "empty state",
-        "empty-state",
-        "no data",
-        "placeholder",
-        "zero state"
-      ]
-    },
     {
       "id": "field",
       "name": "Field",
@@ -791,21 +769,6 @@
         "visual elements"
       ]
     },
-    {
-      "id": "input-group",
-      "name": "Input group",
-      "file": "components/input-group.json",
-      "status": "stable",
-      "summary": "Input group pattern for combining controls with prefixes, suffixes, and inline actions.",
-      "keywords": [
-        "addon",
-        "composed input",
-        "input group",
-        "input-group",
-        "prefix",
-        "suffix"
-      ]
-    },
     {
       "id": "introduction",
       "name": "Introduction",
@@ -1019,21 +982,6 @@
         "window"
       ]
     },
-    {
-      "id": "navbar",
-      "name": "Navbar",
-      "file": "components/navbar.json",
-      "status": "stable",
-      "summary": "Navbar layout pattern for top-level product navigation and actions.",
-      "keywords": [
-        "header",
-        "nav",
-        "navbar",
-        "navigation bar",
-        "site navigation",
-        "top bar"
-      ]
-    },
     {
       "id": "pagination",
       "name": "Pagination",
@@ -1510,6 +1458,20 @@
         "template-login"
       ]
     },
+    {
+      "id": "template-navbar",
+      "name": "Navbar",
+      "file": "components/template-navbar.json",
+      "status": "preview",
+      "summary": "A template for a navbar component.",
+      "keywords": [
+        "navbar",
+        "navigation bar",
+        "template navbar",
+        "template-navbar",
+        "top bar"
+      ]
+    },
     {
       "id": "template-stats",
       "name": "Stats template",

package/llm/patterns.json

@@ -70,13 +70,13 @@
       "name": "Navigation Hierarchy",
       "summary": "Coordinate global and local navigation primitives.",
       "components": [
-        "navbar",
+        "template-navbar",
         "menu",
         "breadcrumb",
         "tabs",
         "link"
       ],
-      "template": "Use navbar for global sections, breadcrumb for hierarchy, and tabs/menu for local context switching.",
+      "template": "Use template-navbar for global sections, breadcrumb for hierarchy, and tabs/menu for local context switching.",
       "dos": [
         "Keep active location unambiguous.",
         "Preserve keyboard navigation across all items."

package/llm/tokens.json

@@ -230,7 +230,7 @@
       },
       "resolvedValues": {
         "light": "#f6e6e8",
-        "dark": "#680e1c"
+        "dark": "#4d0a14"
       },
       "sourcePaths": [
         "assets/styles/colors.css",
@@ -317,7 +317,7 @@
       },
       "resolvedValues": {
         "light": "#e6eaf6",
-        "dark": "#081740"
+        "dark": "#0a1c4d"
       },
       "sourcePaths": [
         "assets/styles/colors.css",
@@ -519,8 +519,8 @@
         "dark": "rgba(32, 28, 23, 0.95)"
       },
       "resolvedValues": {
-        "light": "color-mix(in srgb, var(--raw-color-core-ui-900) 95%, transparent)",
-        "dark": "color-mix(in srgb, var(--raw-color-core-ui-900) 95%, transparent)"
+        "light": "color-mix( in srgb, var(--raw-color-core-ui-900) 95%, transparent )",
+        "dark": "color-mix( in srgb, var(--raw-color-core-ui-900) 95%, transparent )"
       },
       "sourcePaths": [
         "assets/styles/colors.css",
@@ -1245,12 +1245,12 @@
         "reference": null
       },
       "values": {
-        "light": "#081740",
-        "dark": "#081740"
+        "light": "#0a1c4d",
+        "dark": "#0a1c4d"
       },
       "resolvedValues": {
-        "light": "#081740",
-        "dark": "#081740"
+        "light": "#0a1c4d",
+        "dark": "#0a1c4d"
       },
       "sourcePaths": [
         "assets/styles/colors.css",
@@ -2070,12 +2070,12 @@
         "reference": null
       },
       "values": {
-        "light": "#401b08",
-        "dark": "#401b08"
+        "light": "#4d200a",
+        "dark": "#4d200a"
       },
       "resolvedValues": {
-        "light": "#401b08",
-        "dark": "#401b08"
+        "light": "#4d200a",
+        "dark": "#4d200a"
       },
       "sourcePaths": [
         "assets/styles/colors.css",
@@ -2345,12 +2345,12 @@
         "reference": null
       },
       "values": {
-        "light": "#400810",
-        "dark": "#400810"
+        "light": "#4d0a14",
+        "dark": "#4d0a14"
       },
       "resolvedValues": {
-        "light": "#400810",
-        "dark": "#400810"
+        "light": "#4d0a14",
+        "dark": "#4d0a14"
       },
       "sourcePaths": [
         "assets/styles/colors.css",
@@ -2620,12 +2620,12 @@
         "reference": null
       },
       "values": {
-        "light": "#0e0c09",
-        "dark": "#0e0c09"
+        "light": "#191510",
+        "dark": "#191510"
       },
       "resolvedValues": {
-        "light": "#0e0c09",
-        "dark": "#0e0c09"
+        "light": "#191510",
+        "dark": "#191510"
       },
       "sourcePaths": [
         "assets/styles/colors.css",
@@ -3229,12 +3229,12 @@
         "reference": null
       },
       "values": {
-        "light": "color-mix(in srgb, var(--raw-color-border-strong) 50%, transparent)",
-        "dark": "color-mix(in srgb, var(--raw-color-border-strong-dark) 50%, transparent)"
+        "light": "color-mix( in srgb, var(--raw-color-border-strong) 50%, transparent )",
+        "dark": "color-mix( in srgb, var(--raw-color-border-strong-dark) 50%, transparent )"
       },
       "resolvedValues": {
-        "light": "color-mix(in srgb, var(--raw-color-border-strong) 50%, transparent)",
-        "dark": "color-mix(in srgb, var(--raw-color-border-strong-dark) 50%, transparent)"
+        "light": "color-mix( in srgb, var(--raw-color-border-strong) 50%, transparent )",
+        "dark": "color-mix( in srgb, var(--raw-color-border-strong-dark) 50%, transparent )"
       },
       "sourcePaths": [
         "assets/styles/colors.css",
@@ -3631,16 +3631,16 @@
         ],
         "reference": {
           "light": "Core/Red 600",
-          "dark": "Core/Red 300"
+          "dark": "Core/Red 500"
         }
       },
       "values": {
         "light": "#c6263e",
-        "dark": "#e7a9b2"
+        "dark": "#df7e8d"
       },
       "resolvedValues": {
         "light": "#c6263e",
-        "dark": "#e7a9b2"
+        "dark": "#d84f63"
       },
       "sourcePaths": [
         "assets/styles/colors.css",
@@ -3843,16 +3843,16 @@
         ],
         "reference": {
           "light": "Core/Green 700",
-          "dark": "Core/Green 300"
+          "dark": "Core/Green 400"
         }
       },
       "values": {
         "light": "#1ba46b",
-        "dark": "#a9e7cd"
+        "dark": "#7edfb6"
       },
       "resolvedValues": {
         "light": "#1ba46b",
-        "dark": "#a9e7cd"
+        "dark": "#7edfb6"
       },
       "sourcePaths": [
         "assets/styles/colors.css",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "twntyx-css",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "exports": {
     "./llm": "./llm/index.json",
     "./llm/components/*": "./llm/components/*.json",