twntyx-css 1.0.2 → 1.0.5

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

package/llm/components/{input-group.json → template-navbar.json}

@@ -1,30 +1,27 @@
 {
-  "id": "input-group",
-  "name": "Input group",
-  "status": "stable",
-  "summary": "Input group pattern for combining controls with prefixes, suffixes, and inline actions.",
+  "id": "template-navbar",
+  "name": "Navbar",
+  "status": "preview",
+  "summary": "A template for a navbar component.",
   "keywords": [
-    "addon",
-    "composed input",
-    "input group",
-    "input-group",
-    "prefix",
-    "suffix"
+    "navbar",
+    "navigation bar",
+    "template navbar",
+    "template-navbar",
+    "top bar"
   ],
   "sourcePaths": [
-    "app/design-system/input-group/page.js",
-    "assets/styles/form.css",
-    "assets/styles/input-group.css"
+    "app/design-system/template-navbar/page.js"
   ],
   "apiModel": "html-class",
-  "baseClass": "input-group",
+  "baseClass": "template-navbar",
   "variants": [],
   "sizes": [],
   "states": [],
   "structure": {
-    "rootElement": "div",
+    "rootElement": "a",
     "requiredClasses": [
-      "input-group"
+      "template-navbar"
     ],
     "optionalClasses": [],
     "requiredChildren": [],
@@ -32,31 +29,26 @@
   },
   "attributes": {
     "allowed": [
-      "class",
-      "id",
-      "tabindex"
+      "class"
     ],
     "required": [],
     "dataAttributes": [],
     "roles": [],
-    "aria": []
+    "aria": [
+      "aria-label"
+    ]
   },
   "a11y": {
-    "interactive": true,
+    "interactive": false,
     "requiredRoles": [],
     "requiredAria": [
-      "aria-label (when no visible label)"
+      "aria-label"
     ],
-    "keyboardSupport": [
-      "Tab",
-      "Shift+Tab",
-      "Enter",
-      "Space"
-    ],
-    "focusBehavior": "Visible focus state is required when the component is focusable or clickable."
+    "keyboardSupport": [],
+    "focusBehavior": "No keyboard interaction is required unless nested interactive children are introduced."
   },
   "dos": [
-    "Apply the base class 'input-group' 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."
   ],
@@ -65,25 +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",
-    "background-surface-elevated",
-    "line-brand",
-    "line-default",
-    "line-focus",
-    "line-highlight",
-    "line-strong",
-    "text-tertiary"
-  ],
+  "tokenUsage": [],
   "examples": [
     {
       "id": "canonical",
-      "file": "examples/input-group.html",
-      "description": "Minimal canonical Input group 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-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">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>