twntyx-css 1.0.8 → 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/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.json

@@ -134,7 +134,6 @@
     "core-ui-100",
     "core-ui-200",
     "core-ui-300",
-    "core-ui-400",
     "core-ui-50",
     "core-ui-600",
     "core-ui-700",

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/progress-bullet.json

@@ -150,9 +150,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/table.json

@@ -171,7 +171,6 @@
     "core-ui-400",
     "core-ui-50",
     "core-ui-500",
-    "core-ui-600",
     "core-ui-700",
     "core-ui-800",
     "core-ui-900",

package/llm/index.json

@@ -1,9 +1,9 @@
 {
   "llmSchemaVersion": "1.0.0",
-  "designSystemVersion": "1.0.8",
+  "designSystemVersion": "1.0.9",
   "packageName": "twntyx-css",
   "apiModel": "html-class",
-  "sourceFingerprint": "6903c44d40ec2318c9d1a121b9f3aa4a706789fada73dfb338c02a9b33ed3465",
+  "sourceFingerprint": "da5c687a1df4907a77f8f1b512ad33f27f39b7edff70707323b7590abd5d56ba",
   "files": {
     "schema": "schema.json",
     "tokens": "tokens.json",

package/package.json

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

package/styles/animation.css

@@ -1357,7 +1357,7 @@
 
   @keyframes tooltipSlideDown {
     0% {
-      transform: translate(0, -1rem);
+      transform: translate(0, 1rem);
       opacity: 0;
     }
     100% {
@@ -1368,7 +1368,7 @@
 
   @keyframes tooltipSlideUp {
     0% {
-      transform: translate(0, 1rem);
+      transform: translate(0, -1rem);
       opacity: 0;
     }
     100% {
@@ -1379,7 +1379,7 @@
 
   @keyframes tooltipSlideRight {
     0% {
-      transform: translateX(1rem);
+      transform: translateX(-1rem);
       opacity: 0;
     }
     100% {
@@ -1390,7 +1390,7 @@
 
   @keyframes tooltipSlideLeft {
     0% {
-      transform: translateX(-1rem);
+      transform: translateX(1rem);
       opacity: 0;
     }
     100% {
@@ -2057,7 +2057,7 @@
   @keyframes tooltip-in-top {
     0% {
       opacity: 0;
-      transform: translateY(4px);
+      transform: translateY(-4px);
     }
     100% {
       opacity: 1;
@@ -2068,7 +2068,7 @@
   @keyframes tooltip-in-bottom {
     0% {
       opacity: 0;
-      transform: translateY(-4px);
+      transform: translateY(4px);
     }
     100% {
       opacity: 1;
@@ -2079,7 +2079,7 @@
   @keyframes tooltip-in-left {
     0% {
       opacity: 0;
-      transform: translateX(4px);
+      transform: translateX(-4px);
     }
     100% {
       opacity: 1;
@@ -2090,7 +2090,7 @@
   @keyframes tooltip-in-right {
     0% {
       opacity: 0;
-      transform: translateX(-4px);
+      transform: translateX(4px);
     }
     100% {
       opacity: 1;

package/styles/collapsible.css

@@ -12,6 +12,11 @@
     > .collapsible-content {
       @apply grid-rows-[1fr]!;
     }
+    &.collapsible-card {
+      > .collapsible-header {
+        @apply rounded-b-sm;
+      }
+    }
   }
 
   &.collapsible-has-arrow {
@@ -81,7 +86,7 @@
   }
 
   .collapsible-header {
-    @apply rounded-[calc(var(--roundness)-0.125rem-1px)] flex-1 flex items-center gap-2 cursor-pointer include-interactive text-text-default;
+    @apply rounded-[calc(var(--roundness)-0.125rem-1px)] text-left flex-1 flex items-center gap-2 cursor-pointer include-interactive text-text-default;
 
     > span {
       @apply flex-1;

package/styles/shared.css

@@ -158,7 +158,7 @@ body {
     @apply relative z-10;
   }
   &::before {
-    @apply content-[''] rounded-[inherit] absolute z-0 inset-0 scale-y-0 translate-y-2 transition-[scale,translate,opacity] duration-75 opacity-0 bg-background-brand/15 ease-out-expo;
+    @apply content-[''] rounded-[inherit] absolute z-0 inset-0 scale-y-0 translate-y-2 transition-[scale,translate,opacity,border-radius] duration-75 opacity-0 bg-background-brand/15 ease-out-expo;
   }
   &:hover {
     @apply include-hover-primary-hover;

package/styles/surface.css

@@ -68,12 +68,15 @@
   via-75%
   from-[0.5rem]
   to-[calc(100%-0.5rem)]
-  to-brand-default
   from-brand-moderate
+  to-brand-default
+  dark:from-brand-default
+  dark:to-brand-moderate
   border
   border-brand-default
   transition-[background-position,brightness]
-  shadow-[inset_0_1px_0_0_color-mix(in_srgb,var(--color-brand-moderate)_100%,transparent),inset_0_-2px_0_0_color-mix(in_srgb,var(--color-brand-strong)_20%,transparent)]
+  shadow-[inset_0_1px_0_0_color-mix(in_srgb,var(--color-brand-moderate)_100%,transparent),inset_0_-2px_0_0_color-mix(in_srgb,var(--color-brand-default)_50%,transparent)]
+  dark:shadow-[inset_0_1px_0_0_color-mix(in_srgb,var(--color-brand-default)_100%,transparent),inset_0_-2px_0_0_color-mix(in_srgb,var(--color-brand-moderate)_50%,transparent)]
   duration-75
   ease-out-cubic;
 
@@ -81,7 +84,7 @@
   &::before,
   &::after {
     @apply drop-shadow-[0_0.5px_0_color-mix(in_srgb,var(--tw-drop-shadow-color)_20%,transparent),0_1px_0_color-mix(in_srgb,var(--tw-drop-shadow-color)_20%,transparent),0_1px_1px_color-mix(in_srgb,var(--tw-drop-shadow-color)_100%,transparent),0_1px_2px_color-mix(in_srgb,var(--tw-drop-shadow-color)_20%,transparent)]
-      dark:drop-shadow-[0_-1px_0_color-mix(in_srgb,var(--tw-drop-shadow-color)_10%,transparent)]
+      dark:drop-shadow-[0_1px_0_color-mix(in_srgb,var(--tw-drop-shadow-color)_10%,transparent)]
       drop-shadow-brand-strong/50;
   }
 }

package/styles/table.css

@@ -10,17 +10,7 @@
     @apply overflow-x-auto;
 
     /* Custom scrollbar styling */
-    &::-webkit-scrollbar {
-      @apply w-2 h-2;
-    }
-
-    &::-webkit-scrollbar-track {
-      @apply rounded-full bg-core-ui-100 dark:bg-core-ui-900;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      @apply rounded-full transition-colors bg-core-ui-400 dark:bg-core-ui-600 hover:bg-text-tertiary;
-    }
+    @apply scrollbar;
   }
 
   /* Sticky first column */