twntyx-css 1.0.7 → 1.0.9

package/README.md

@@ -101,20 +101,59 @@ cp node_modules/twntyx-css/llm/assistants/codex/AGENTS.md ./AGENTS.md
 cp node_modules/twntyx-css/llm/assistants/claude/CLAUDE.md ./CLAUDE.md
 ```
 
-## Publishing
+## Publishing a new version
 
-From the repository root:
+The npm package is **`twntyx-css`**, published from the `framework/` folder. Version lives in **`framework/package.json`** (`version` field).
+
+### 1. Bump the version
+
+Each publish needs a **new semver** than anything already on [npm](https://www.npmjs.com/package/twntyx-css). npm will reject republishing the same version (403).
+
+Edit `framework/package.json` and increment `version` (e.g. `1.0.8` → `1.0.9` for a patch).
+
+### 2. Log in to npm
+
+From any directory:
+
+```bash
+npm whoami
+```
+
+If that fails, run `npm login` and use an account that is a **maintainer** of `twntyx-css`. Granular access tokens must allow **publish** for this package.
+
+### 3. Dry run (optional)
+
+From the **repository root**:
 
 ```bash
 npm run pack:framework
 ```
 
-When ready to publish:
+This runs the same prepare step as publish and shows what would go into the tarball, without uploading.
+
+### 4. Publish
+
+Still from the **repository root**:
 
 ```bash
 npm run publish:framework
 ```
 
+That script:
+
+1. Runs `scripts/package-framework.mjs` (syncs styles/fonts into `framework/`, rebuilds the LLM kit, validates metadata).
+2. Runs `npm publish --access public ./framework` (uses a separate cache under `/tmp/twntyx-npm-cache`).
+
+Publishing also triggers **`prepack`** in `framework/package.json`, which runs the prepare script again so the packed tarball matches a fresh build.
+
+### Troubleshooting
+
+| Symptom | Likely cause |
+|--------|----------------|
+| **403** — cannot publish over previously published version | Bump `framework/package.json` `version`. |
+| **404** on `PUT` / “not in this registry” | Usually **auth**: not logged in, expired token, or token without publish rights. Fix with `npm login` or a new publish-capable token. |
+| Prepare / validation errors | Fix LLM or assistant-guide issues, then retry; see `LLM_MAINTENANCE.md`. |
+
 ## That's it!
 
 Your projects can now consume the twntyX theme and components. ✨

package/llm/components/avatar.json

@@ -93,9 +93,9 @@
     "background-error",
     "background-error-active",
     "background-inverted",
-    "background-neutral",
     "background-neutral-active",
     "background-page",
+    "background-success",
     "background-success-active",
     "background-surface",
     "background-surface-elevated",
@@ -112,8 +112,10 @@
     "line-brand",
     "line-default",
     "line-error",
+    "line-highlight",
     "line-strong",
     "line-subtle",
+    "line-success",
     "text-attention",
     "text-brand",
     "text-brand-active",

package/llm/components/badge.json

@@ -21,133 +21,21 @@
   "sourcePaths": [
     "app/design-system/badge/page.js",
     "assets/styles/badge.css",
-    "assets/styles/button.css",
     "assets/styles/contest.css",
     "assets/styles/form-text-select.css",
     "assets/styles/shared.css"
   ],
   "apiModel": "html-class",
   "baseClass": "badge",
-  "variants": [
-    {
-      "name": "badge-placeholder",
-      "className": "badge-placeholder",
-      "description": "Placeholder badge style"
-    },
-    {
-      "name": "badge-neutral",
-      "className": "badge-neutral",
-      "description": "Neutral badge style"
-    },
-    {
-      "name": "badge-success",
-      "className": "badge-success",
-      "description": "Success badge style"
-    },
-    {
-      "name": "badge-error",
-      "className": "badge-error",
-      "description": "Error badge style"
-    },
-    {
-      "name": "badge-warning",
-      "className": "badge-warning",
-      "description": "Warning badge style"
-    },
-    {
-      "name": "badge-info",
-      "className": "badge-info",
-      "description": "Info badge style"
-    },
-    {
-      "name": "badge-attention",
-      "className": "badge-attention",
-      "description": "Attention badge style"
-    },
-    {
-      "name": "badge-brand",
-      "className": "badge-brand",
-      "description": "Brand badge style"
-    },
-    {
-      "name": "badge-filled",
-      "className": "badge-filled",
-      "description": "Filled badge style variant"
-    },
-    {
-      "name": "badge-interactive",
-      "className": "badge-interactive",
-      "description": "Interactive/clickable badge style"
-    },
-    {
-      "name": "badge-status-undefined",
-      "className": "badge-status-undefined",
-      "description": "Status badge - no data"
-    },
-    {
-      "name": "badge-status-verylow",
-      "className": "badge-status-verylow",
-      "description": "Status badge - very low"
-    },
-    {
-      "name": "badge-status-low",
-      "className": "badge-status-low",
-      "description": "Status badge - low"
-    },
-    {
-      "name": "badge-status-high",
-      "className": "badge-status-high",
-      "description": "Status badge - high"
-    },
-    {
-      "name": "badge-status-veryhigh",
-      "className": "badge-status-veryhigh",
-      "description": "Status badge - very high"
-    }
-  ],
-  "sizes": [
-    {
-      "name": "badge-sm",
-      "className": "badge-sm",
-      "description": "Small badge size"
-    },
-    {
-      "name": "badge-lg",
-      "className": "badge-lg",
-      "description": "Large badge size"
-    },
-    {
-      "name": "badge-status-medium",
-      "className": "badge-status-medium",
-      "description": "Status badge - medium"
-    }
-  ],
+  "variants": [],
+  "sizes": [],
   "states": [],
   "structure": {
     "rootElement": "div",
     "requiredClasses": [
       "badge"
     ],
-    "optionalClasses": [
-      "badge-placeholder",
-      "badge-neutral",
-      "badge-success",
-      "badge-error",
-      "badge-warning",
-      "badge-info",
-      "badge-attention",
-      "badge-brand",
-      "badge-filled",
-      "badge-interactive",
-      "badge-status-undefined",
-      "badge-status-verylow",
-      "badge-status-low",
-      "badge-status-high",
-      "badge-status-veryhigh",
-      "badge-sm",
-      "badge-lg",
-      "badge-status-medium"
-    ],
+    "optionalClasses": [],
     "requiredChildren": [],
     "optionalChildren": []
   },
@@ -184,10 +72,8 @@
   "tokenUsage": [
     "background-attention-active",
     "background-brand",
-    "background-brand-active",
     "background-error",
     "background-info",
-    "background-inverted",
     "background-neutral",
     "background-success",
     "background-surface",
@@ -200,14 +86,21 @@
     "core-black",
     "core-green-100",
     "core-green-200",
+    "core-green-300",
+    "core-green-400",
     "core-green-50",
     "core-green-700",
     "core-green-800",
     "core-green-900",
+    "core-green-950",
     "core-orange-100",
+    "core-orange-300",
     "core-orange-700",
+    "core-orange-900",
     "core-red-100",
+    "core-red-300",
     "core-red-700",
+    "core-red-900",
     "core-ui-100",
     "core-ui-200",
     "core-ui-300",
@@ -228,9 +121,6 @@
     "line-success",
     "line-warning",
     "text-attention",
-    "text-brand",
-    "text-brand-active",
-    "text-brand-hover",
     "text-default",
     "text-disabled",
     "text-error",

package/llm/components/breadcrumb.json

@@ -113,9 +113,7 @@
     "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",

package/llm/components/button-container.json

@@ -100,7 +100,6 @@
     "background-warning-active",
     "brand-default",
     "brand-moderate",
-    "brand-soft",
     "brand-strong",
     "core-black",
     "core-ui-100",

package/llm/components/button.json

@@ -33,114 +33,19 @@
     "assets/styles/form-text-select.css",
     "assets/styles/join.css",
     "assets/styles/shared.css",
-    "assets/styles/table.css",
-    "assets/styles/toast.css"
+    "assets/styles/table.css"
   ],
   "apiModel": "html-class",
   "baseClass": "button",
-  "variants": [
-    {
-      "name": "button-primary",
-      "className": "button-primary",
-      "description": "Primary button style"
-    },
-    {
-      "name": "button-secondary",
-      "className": "button-secondary",
-      "description": "Secondary button style"
-    },
-    {
-      "name": "button-tertiary",
-      "className": "button-tertiary",
-      "description": "Tertiary button style"
-    },
-    {
-      "name": "button-plain",
-      "className": "button-plain",
-      "description": "Plain button style without background"
-    },
-    {
-      "name": "button-destructive",
-      "className": "button-destructive",
-      "description": "Destructive action button style"
-    },
-    {
-      "name": "button-discreet",
-      "className": "button-discreet",
-      "description": "Discreet button style with minimal visual impact"
-    },
-    {
-      "name": "button-menu",
-      "className": "button-menu",
-      "description": "Menu button style"
-    },
-    {
-      "name": "button-sso",
-      "className": "button-sso",
-      "description": "Single sign-on button style"
-    },
-    {
-      "name": "button-close",
-      "className": "button-close",
-      "description": "Close button style with X icon"
-    }
-  ],
-  "sizes": [
-    {
-      "name": "button-xs",
-      "className": "button-xs",
-      "description": "Extra small button size"
-    },
-    {
-      "name": "button-sm",
-      "className": "button-sm",
-      "description": "Small button size"
-    },
-    {
-      "name": "button-lg",
-      "className": "button-lg",
-      "description": "Large button size"
-    }
-  ],
-  "states": [
-    {
-      "name": "is-loading",
-      "className": "is-loading",
-      "description": "Shows loading spinner state"
-    },
-    {
-      "name": "is-charging",
-      "className": "is-charging",
-      "description": "Shows charging animation state"
-    },
-    {
-      "name": "is-charging-done",
-      "className": "is-charging-done",
-      "description": "Shows completed charging state"
-    }
-  ],
+  "variants": [],
+  "sizes": [],
+  "states": [],
   "structure": {
     "rootElement": "button",
     "requiredClasses": [
       "button"
     ],
-    "optionalClasses": [
-      "button-primary",
-      "button-secondary",
-      "button-tertiary",
-      "button-plain",
-      "button-destructive",
-      "button-discreet",
-      "button-menu",
-      "button-sso",
-      "button-close",
-      "button-xs",
-      "button-sm",
-      "button-lg",
-      "is-loading",
-      "is-charging",
-      "is-charging-done"
-    ],
+    "optionalClasses": [],
     "requiredChildren": [],
     "optionalChildren": []
   },
@@ -196,37 +101,39 @@
     "background-brand",
     "background-brand-active",
     "background-error",
-    "background-error-active",
     "background-info",
-    "background-info-active",
     "background-inverted",
     "background-neutral",
     "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-green-100",
     "core-green-200",
+    "core-green-300",
+    "core-green-400",
     "core-green-50",
     "core-green-700",
     "core-green-800",
     "core-green-900",
+    "core-green-950",
     "core-orange-100",
+    "core-orange-300",
     "core-orange-700",
+    "core-orange-900",
     "core-red-100",
+    "core-red-300",
     "core-red-700",
+    "core-red-900",
     "core-ui-100",
     "core-ui-200",
     "core-ui-300",
-    "core-ui-400",
     "core-ui-50",
     "core-ui-600",
     "core-ui-700",

package/llm/components/chat-footer.json

@@ -22,36 +22,15 @@
   ],
   "apiModel": "html-class",
   "baseClass": "chat-footer",
-  "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."
-    }
-  ],
+  "variants": [],
   "sizes": [],
-  "states": [
-    {
-      "name": "is-listening",
-      "className": "is-listening",
-      "description": "Active dictation state with listening indicator."
-    }
-  ],
+  "states": [],
   "structure": {
     "rootElement": "div",
     "requiredClasses": [
       "chat-footer"
     ],
-    "optionalClasses": [
-      "chat-footer-full",
-      "chat-input-full",
-      "is-listening"
-    ],
+    "optionalClasses": [],
     "requiredChildren": [],
     "optionalChildren": []
   },
@@ -63,14 +42,18 @@
     "dataAttributes": [],
     "roles": [],
     "aria": [
-      "aria-label"
+      "aria-hidden",
+      "aria-label",
+      "aria-pressed"
     ]
   },
   "a11y": {
     "interactive": false,
     "requiredRoles": [],
     "requiredAria": [
-      "aria-label"
+      "aria-hidden",
+      "aria-label",
+      "aria-pressed"
     ],
     "keyboardSupport": [],
     "focusBehavior": "No keyboard interaction is required unless nested interactive children are introduced."
@@ -86,7 +69,6 @@
     "Do not remove required accessibility attributes when component is interactive."
   ],
   "tokenUsage": [
-    "background-error",
     "background-page",
     "background-surface",
     "background-surface-elevated",
@@ -94,6 +76,7 @@
     "core-black",
     "core-white",
     "line-default",
+    "line-highlight",
     "line-strong",
     "text-default",
     "text-link",

package/llm/components/chat.json

@@ -52,7 +52,6 @@
     "Do not remove required accessibility attributes when component is interactive."
   ],
   "tokenUsage": [
-    "background-error",
     "background-page",
     "background-surface",
     "background-surface-elevated",
@@ -60,6 +59,7 @@
     "core-black",
     "core-white",
     "line-default",
+    "line-highlight",
     "line-strong",
     "text-default",
     "text-link",

package/llm/components/checkmark.json

@@ -122,9 +122,7 @@
     "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",

package/llm/components/combobox.json

@@ -112,6 +112,7 @@
     "line-success",
     "line-warning",
     "text-brand",
+    "text-brand-active",
     "text-default",
     "text-disabled",
     "text-error",

package/llm/components/command-palette.json

@@ -15,46 +15,19 @@
     "spotlight"
   ],
   "sourcePaths": [
-    "app/design-system/command-palette/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/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/command-palette/page.js"
   ],
   "apiModel": "html-class",
-  "baseClass": "command",
+  "baseClass": "command-palette",
   "variants": [],
   "sizes": [],
-  "states": [
-    {
-      "name": "is-active",
-      "className": "is-active",
-      "description": "Highlights the current command option (on li or trigger element)."
-    },
-    {
-      "name": "is-empty",
-      "className": "is-empty",
-      "description": "Styles the empty-result message block."
-    }
-  ],
+  "states": [],
   "structure": {
     "rootElement": "div",
     "requiredClasses": [
-      "command"
-    ],
-    "optionalClasses": [
-      "is-active",
-      "is-empty"
+      "command-palette"
     ],
+    "optionalClasses": [],
     "requiredChildren": [],
     "optionalChildren": []
   },
@@ -75,7 +48,7 @@
     "focusBehavior": "No keyboard interaction is required unless nested interactive children are introduced."
   },
   "dos": [
-    "Apply the base class 'command' on the root element.",
+    "Apply the base class 'command-palette' 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."
   ],
@@ -84,61 +57,7 @@
     "Do not rely on undocumented internal classes in production templates.",
     "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"
-  ],
+  "tokenUsage": [],
   "examples": [
     {
       "id": "canonical",

package/llm/components/datepicker.json

@@ -122,6 +122,7 @@
     "line-success",
     "line-warning",
     "text-brand",
+    "text-brand-active",
     "text-default",
     "text-disabled",
     "text-error",