twntyx-css 1.0.10 → 1.0.12

package/README.md

@@ -28,12 +28,47 @@ npm install twntyx-css
 
 ### 3. Import the css
 
-Import the Framework CSS into your project stylesheet.
+Import the framework stylesheets into your project. Load fonts before globals so bundlers resolve packaged font files correctly:
 
 ```css
+@import url('twntyx-css/styles/font.css');
 @import 'twntyx-css/styles/globals.css';
 ```
 
+Or import both in your app entry:
+
+```js
+import 'twntyx-css/styles/font.css';
+import 'twntyx-css/styles/globals.css';
+```
+
+### Nuxt + Tailwind CSS v4
+
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  css: [
+    'twntyx-css/styles/font.css',
+    'twntyx-css/styles/globals.css',
+  ],
+  postcss: {
+    plugins: {
+      '@tailwindcss/postcss': {},
+    },
+  },
+})
+```
+
+twntyx-css ships `@font-face` rules for Instrument Sans and Gazpacho, so `@nuxt/fonts` is optional.
+
+### Fonts troubleshooting
+
+If fonts fall back to system defaults:
+
+1. Import `twntyx-css/styles/font.css` before `twntyx-css/styles/globals.css`.
+2. In DevTools Network, confirm font requests resolve to bundled assets (not `/fonts/...` at your site root).
+3. After upgrading, clear `.nuxt/` and `node_modules/.cache`.
+
 ### 4. Adapt webpack config.
 
 Add postcss-loader to webpack.config.js.

package/llm/components/chat-ai.json

@@ -17,64 +17,19 @@
     "new message state"
   ],
   "sourcePaths": [
-    "app/design-system/chat-ai/page.js",
-    "assets/styles/button.css",
-    "assets/styles/chat.css",
-    "assets/styles/form-text-select.css",
-    "assets/styles/panel.css",
-    "assets/styles/toast.css"
+    "app/design-system/chat-ai/page.js"
   ],
   "apiModel": "html-class",
   "baseClass": "chat-ai",
-  "variants": [
-    {
-      "name": "chat-secondary",
-      "className": "chat-secondary",
-      "description": "AI chat visual variant styling."
-    }
-  ],
-  "sizes": [
-    {
-      "name": "chat-loop-stack-lg",
-      "className": "chat-loop-stack-lg",
-      "description": "Large min-height variant for loop stack."
-    }
-  ],
-  "states": [
-    {
-      "name": "chat-loop-loading",
-      "className": "chat-loop-loading",
-      "description": "Animated loading row in loop simulation."
-    },
-    {
-      "name": "chat-loop-message",
-      "className": "chat-loop-message",
-      "description": "Animated resolved message row in loop simulation."
-    },
-    {
-      "name": "is-owner",
-      "className": "is-owner",
-      "description": "Marks messages authored by the current user."
-    },
-    {
-      "name": "is-loading",
-      "className": "is-loading",
-      "description": "Shows loading placeholder behavior for a message group."
-    }
-  ],
+  "variants": [],
+  "sizes": [],
+  "states": [],
   "structure": {
     "rootElement": "div",
     "requiredClasses": [
       "chat-ai"
     ],
-    "optionalClasses": [
-      "chat-secondary",
-      "chat-loop-stack-lg",
-      "chat-loop-loading",
-      "chat-loop-message",
-      "is-owner",
-      "is-loading"
-    ],
+    "optionalClasses": [],
     "requiredChildren": [],
     "optionalChildren": []
   },
@@ -114,56 +69,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-50",
-    "core-ui-700",
-    "core-ui-800",
-    "core-ui-900",
-    "core-white",
-    "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-hover",
-    "text-secondary",
-    "text-success",
-    "text-tertiary",
-    "text-warning"
-  ],
+  "tokenUsage": [],
   "examples": [
     {
       "id": "canonical",

package/llm/components/menu.json

@@ -66,6 +66,11 @@
       "name": "menu-rounded-full",
       "className": "menu-rounded-full",
       "description": "Applies fully rounded corners to menu items"
+    },
+    {
+      "name": "menu-row-action-hover",
+      "className": "menu-row-action-hover",
+      "description": "Reveals the row action button only on row hover or focus"
     }
   ],
   "sizes": [
@@ -116,6 +121,7 @@
       "disabled",
       "menu-rounded-none",
       "menu-rounded-full",
+      "menu-row-action-hover",
       "menu-xs",
       "menu-sm",
       "menu-lg",

package/llm/examples/chat-ai.html

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

package/llm/index.json

@@ -1,9 +1,9 @@
 {
   "llmSchemaVersion": "1.0.0",
-  "designSystemVersion": "1.0.10",
+  "designSystemVersion": "1.0.12",
   "packageName": "twntyx-css",
   "apiModel": "html-class",
-  "sourceFingerprint": "f7c8ee0540e7bb413846b1be281b9f5034f86ab48ade5f990858bbcce6fea5ad",
+  "sourceFingerprint": "b01e7500be1e207fadfd0231734490a316c01e8aa0452755ec72ddedf3ce711d",
   "files": {
     "schema": "schema.json",
     "tokens": "tokens.json",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "twntyx-css",
-  "version": "1.0.10",
+  "version": "1.0.12",
   "exports": {
     "./llm": "./llm/index.json",
     "./llm/components/*": "./llm/components/*.json",
@@ -11,6 +11,7 @@
     "./*": "./*",
     "./fonts/*": "./fonts/*",
     "./styles": "./styles/globals.css",
+    "./styles/font.css": "./styles/font.css",
     "./styles/*": "./styles/*",
     "./tailwind.config": "./tailwind.config.cjs"
   },

package/styles/button.css

@@ -310,7 +310,7 @@
 }
 
 @utility button-destructive {
-  @apply border backdrop-blur include-border-destructive bg-background-error border-line-error hover:border-line-error text-text-error active:bg-background-surface-elevated;
+  @apply border backdrop-blur include-border-destructive bg-background-error border-line-error hover:border-text-error text-text-error active:bg-background-surface-elevated;
 
   &.is-active {
     @apply bg-background-surface-elevated;
@@ -318,7 +318,7 @@
 }
 
 @utility button-constructive {
-  @apply border backdrop-blur include-border-destructive bg-background-success border-line-success hover:border-line-success text-text-success active:bg-background-surface-elevated;
+  @apply border backdrop-blur include-border-destructive bg-background-success border-line-success hover:border-text-success text-text-success active:bg-background-surface-elevated;
 
   &.is-active {
     @apply bg-background-surface-elevated;

package/styles/chat.css

@@ -332,7 +332,9 @@
         top-0
         md:top-3.5
         left-0
-        animate-loading-text-gradient;
+        animate-loading-text-gradient
+        from-text-default
+        to-text-default/10;
       }
     }
   }

package/styles/font.css

@@ -4,7 +4,7 @@
 
 @font-face {
   font-family: "Instrument Sans";
-  src: url("../fonts/InstrumentSans-VariableFont_wdth,wght.ttf") format("truetype");
+  src: url("../fonts/InstrumentSans-Variable.ttf") format("truetype");
   font-weight: 100 900;
   font-style: normal;
   font-display: swap;
@@ -12,7 +12,7 @@
 
 @font-face {
   font-family: "Instrument Sans";
-  src: url("../fonts/InstrumentSans-Italic-VariableFont_wdth,wght.ttf") format("truetype");
+  src: url("../fonts/InstrumentSans-Italic-Variable.ttf") format("truetype");
   font-weight: 100 900;
   font-style: italic;
   font-display: swap;

package/styles/globals.css

@@ -1,3 +1,4 @@
+@import url("./font.css");
 @import 'tailwindcss';
 @import './theme.css';
 
@@ -25,7 +26,6 @@
 @import './drawer.css';
 @import './fieldset.css';
 @import './field.css';
-@import './font.css';
 @import './dropdown.css';
 @import './form-shared.css';
 @import './form-checkbox-radio-toggle.css';

package/styles/menu.css

@@ -21,7 +21,7 @@
     @apply flex relative flex-col flex-wrap items-stretch shrink-0;
 
     /* Default Link/Button Style */
-    > *:not(ul, details, .menu-title) {
+    > *:not(ul, details, .menu-title, .menu-row) {
       @apply flex gap-2 items-center px-4 py-2 w-full max-w-full text-sm rounded cursor-pointer include-hover-primary include-interactive text-text-tertiary hover:text-text-default disabled:cursor-not-allowed disabled:text-text-disabled disabled:hover:bg-transparent;
 
       &:active {
@@ -31,6 +31,44 @@
       }
     }
 
+    /* Split row: main link + contextual action */
+    > .menu-row {
+      @apply flex gap-1 items-center px-4 py-2 w-full max-w-full text-sm rounded cursor-default include-hover-primary include-interactive text-text-tertiary hover:text-text-default;
+
+      > :where(a, button:not(.menu-row-action)) {
+        @apply flex flex-1 gap-2 items-center min-w-0 p-0 rounded-none cursor-pointer text-inherit hover:text-inherit outline-transparent focus-visible:outline-transparent active:outline-transparent;
+
+        &::before {
+          @apply hidden;
+        }
+
+        &:active > * {
+          @apply translate-y-px duration-0;
+        }
+      }
+
+      > .menu-row-action {
+        @apply relative z-10 flex shrink-0 justify-center items-center size-6 rounded cursor-pointer include-interactive text-text-tertiary hover:text-text-default;
+
+        &::before {
+          @apply hidden;
+        }
+
+        svg {
+          @apply fill-current size-4;
+        }
+      }
+    }
+
+    &.menu-row-action-hover > .menu-row > .menu-row-action {
+      @apply opacity-0 pointer-events-none transition-opacity duration-75;
+    }
+
+    &.menu-row-action-hover > .menu-row:hover > .menu-row-action,
+    &.menu-row-action-hover > .menu-row:focus-within > .menu-row-action {
+      @apply opacity-100 pointer-events-auto;
+    }
+
     span {
       @apply truncate min-w-fit;
     }
@@ -39,7 +77,7 @@
       &:has(svg:only-child) {
         @apply px-2;
       }
-      > *:not(svg, .avatar) {
+      > *:not(svg, .avatar, .material-symbols-rounded) {
         @apply w-full;
       }
       svg {
@@ -51,8 +89,12 @@
       @apply include-interactive;
     }
 
+    > .menu-row > :where(a, button:not(.menu-row-action)) {
+      @apply outline-transparent focus-visible:outline-transparent active:outline-transparent;
+    }
+
     &.is-selected {
-      > *:not(ul, details, .menu-title) {
+      > *:not(ul, details, .menu-title, .menu-row) {
         @apply include-hover-primary-hover;
       }
     }
@@ -95,11 +137,23 @@
       }
     }
 
+    &.is-disabled > .menu-row {
+      @apply cursor-not-allowed text-text-disabled hover:text-text-disabled;
+
+      > :where(a, button) {
+        @apply pointer-events-none;
+      }
+    }
+
     &.is-active > * {
       @apply font-medium include-hover-primary-active text-text-brand-active hover:text-text-brand-active;
     }
 
-    &:has(:focus-visible) > * {
+    &.is-active > .menu-row {
+      @apply font-medium include-hover-primary-active text-text-brand-active hover:text-text-brand-active;
+    }
+
+    &:has(:focus-visible) > *:not(.menu-row) {
       @apply outline-line-brand;
     }
   }
@@ -157,8 +211,11 @@
 @utility menu-xs {
   @apply text-xs;
   li {
+    > .menu-row {
+      @apply gap-1 px-2 py-1 text-xs;
+    }
     > * {
-      &:not(ul, details, .menu-title),
+      &:not(ul, details, .menu-title, .menu-row),
       details > summary {
         @apply gap-1 px-2 py-1 text-xs;
       }
@@ -183,8 +240,11 @@
 @utility menu-sm {
   @apply text-xs;
   li {
+    > .menu-row {
+      @apply gap-1.5 px-3 py-1.5 text-xs;
+    }
     > * {
-      &:not(ul, details, .menu-title),
+      &:not(ul, details, .menu-title, .menu-row),
       details > summary {
         @apply gap-1.5 px-3 py-1.5 text-xs;
       }
@@ -207,12 +267,15 @@
 }
 
 @utility menu-lg {
-  @apply text-xs;
+  @apply text-base;
   li {
+    > .menu-row {
+      @apply gap-3 px-5 py-3 text-base;
+    }
     > * {
-      &:not(ul, details, .menu-title),
+      &:not(ul, details, .menu-title, .menu-row),
       details > summary {
-        @apply gap-3 px-5 py-3 text-xs;
+        @apply gap-3 px-5 py-3 text-base;
       }
       &:has(svg:only-child) {
         @apply px-3;
@@ -235,7 +298,8 @@
 /* Roundness modifiers */
 @utility menu-rounded-none {
   li {
-    > *:not(ul, details, .menu-title),
+    > *:not(ul, details, .menu-title, .menu-row),
+    > .menu-row,
     details > summary {
       &,
       &::before {
@@ -247,7 +311,8 @@
 
 @utility menu-rounded-sm {
   li {
-    > *:not(ul, details, .menu-title),
+    > *:not(ul, details, .menu-title, .menu-row),
+    > .menu-row,
     details > summary {
       &,
       &::before {
@@ -259,7 +324,8 @@
 
 @utility menu-rounded-lg {
   li {
-    > *:not(ul, details, .menu-title),
+    > *:not(ul, details, .menu-title, .menu-row),
+    > .menu-row,
     details > summary {
       &,
       &::before {
@@ -271,7 +337,8 @@
 
 @utility menu-rounded-full {
   li {
-    > *:not(ul, details, .menu-title),
+    > *:not(ul, details, .menu-title, .menu-row),
+    > .menu-row,
     details > summary {
       &,
       &::before {

package/styles/typography.css

@@ -110,3 +110,7 @@ h6 {
     }
   }
 }
+
+.material-symbols-rounded {
+  @apply leading-none;
+}