twntyx-css 1.0.9 → 1.0.11

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/divider.json

@@ -37,6 +37,16 @@
       "name": "divider-end",
       "className": "divider-end",
       "description": "Aligns content to the end"
+    },
+    {
+      "name": "divider-dashed",
+      "className": "divider-dashed",
+      "description": "Renders the divider lines with a dashed border style"
+    },
+    {
+      "name": "divider-dotted",
+      "className": "divider-dotted",
+      "description": "Renders the divider lines with a dotted border style"
     }
   ],
   "sizes": [],
@@ -49,7 +59,9 @@
     "optionalClasses": [
       "divider-horizontal",
       "divider-start",
-      "divider-end"
+      "divider-end",
+      "divider-dashed",
+      "divider-dotted"
     ],
     "requiredChildren": [],
     "optionalChildren": []
@@ -60,12 +72,16 @@
     ],
     "required": [],
     "dataAttributes": [],
-    "roles": [],
+    "roles": [
+      "separator"
+    ],
     "aria": []
   },
   "a11y": {
     "interactive": false,
-    "requiredRoles": [],
+    "requiredRoles": [
+      "separator"
+    ],
     "requiredAria": [],
     "keyboardSupport": [],
     "focusBehavior": "No keyboard interaction is required unless nested interactive children are introduced."
@@ -82,7 +98,6 @@
   ],
   "tokenUsage": [
     "line-highlight",
-    "text-default",
     "text-tertiary"
   ],
   "examples": [

package/llm/components/dot-wave-background.json

@@ -0,0 +1,91 @@
+{
+  "id": "dot-wave-background",
+  "name": "Dot Wave Background",
+  "status": "preview",
+  "summary": "Reusable animated dot-wave background for decorative template surfaces and ambient interface layers.",
+  "keywords": [
+    "ambient",
+    "animated background",
+    "background",
+    "backgrounds",
+    "canvas",
+    "decorative",
+    "dot wave",
+    "dot wave background",
+    "dot-wave-background",
+    "dots",
+    "template",
+    "wave"
+  ],
+  "sourcePaths": [
+    "app/design-system/dot-wave-background/page.js",
+    "components/backgrounds/DotWaveBackground.js"
+  ],
+  "apiModel": "html-class",
+  "baseClass": "dot-wave-background",
+  "variants": [],
+  "sizes": [],
+  "states": [],
+  "structure": {
+    "rootElement": "canvas",
+    "requiredClasses": [
+      "dot-wave-background"
+    ],
+    "optionalClasses": [
+      "pointer-events-none"
+    ],
+    "requiredChildren": [],
+    "optionalChildren": []
+  },
+  "attributes": {
+    "allowed": [
+      "aria-hidden",
+      "class",
+      "style"
+    ],
+    "required": [
+      "aria-hidden"
+    ],
+    "dataAttributes": [],
+    "roles": [],
+    "aria": [
+      "aria-hidden"
+    ]
+  },
+  "a11y": {
+    "interactive": false,
+    "requiredRoles": [],
+    "requiredAria": [
+      "aria-hidden"
+    ],
+    "keyboardSupport": [],
+    "focusBehavior": "Decorative canvas backgrounds must remain hidden from assistive technology and must not capture pointer or keyboard interaction."
+  },
+  "dos": [
+    "Apply the base class 'dot-wave-background' on the canvas element.",
+    "Use aria-hidden=\"true\" for decorative background usage.",
+    "Use pointer-events-none when layering the background behind interactive content."
+  ],
+  "donts": [
+    "Do not use the canvas as meaningful content without an accessible alternative.",
+    "Do not allow the background layer to capture pointer events from foreground controls.",
+    "Do not place interactive children inside the decorative canvas."
+  ],
+  "tokenUsage": [],
+  "examples": [
+    {
+      "id": "canonical",
+      "file": "examples/dot-wave-background.html",
+      "description": "Minimal canonical Dot Wave Background usage."
+    }
+  ],
+  "composition": {
+    "patterns": [],
+    "relatedComponents": [],
+    "notes": []
+  },
+  "breakingChangePolicy": {
+    "classContract": "Base class, documented modifiers, and state class names are semver-protected for consumer markup.",
+    "a11yContract": "Documented role and aria requirements are semver-protected for generated markup."
+  }
+}

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/examples/dot-wave-background.html

@@ -0,0 +1 @@
+<canvas class="dot-wave-background pointer-events-none" aria-hidden="true"></canvas>

package/llm/index.json

@@ -1,9 +1,9 @@
 {
   "llmSchemaVersion": "1.0.0",
-  "designSystemVersion": "1.0.9",
+  "designSystemVersion": "1.0.11",
   "packageName": "twntyx-css",
   "apiModel": "html-class",
-  "sourceFingerprint": "da5c687a1df4907a77f8f1b512ad33f27f39b7edff70707323b7590abd5d56ba",
+  "sourceFingerprint": "bcce447bfbebb4a79325f5db8a4af76b85fb2dec7e871f5ff848f6e33901ee92",
   "files": {
     "schema": "schema.json",
     "tokens": "tokens.json",
@@ -627,6 +627,27 @@
         "split"
       ]
     },
+    {
+      "id": "dot-wave-background",
+      "name": "Dot Wave Background",
+      "file": "components/dot-wave-background.json",
+      "status": "preview",
+      "summary": "Reusable animated dot-wave background for decorative template surfaces and ambient interface layers.",
+      "keywords": [
+        "ambient",
+        "animated background",
+        "background",
+        "backgrounds",
+        "canvas",
+        "decorative",
+        "dot wave",
+        "dot wave background",
+        "dot-wave-background",
+        "dots",
+        "template",
+        "wave"
+      ]
+    },
     {
       "id": "field",
       "name": "Field",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "twntyx-css",
-  "version": "1.0.9",
+  "version": "1.0.11",
   "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/animation.css

@@ -107,6 +107,7 @@
     alternate-reverse;
   --animate-bounce-left-small: bounceLeftSmall 0.7s ease-in-out infinite;
   --animate-rotate: rotate 10s linear infinite;
+  --animate-profile-edit-dash: profile-edit-dash 1.2s linear infinite;
   --animate-double-rays: doubleRays 3s cubic-bezier(0.7, 0, 0.3, 1) infinite
     both;
   --animate-double-rays-transform: doubleRaysTransform 3s
@@ -1175,6 +1176,12 @@
     }
   }
 
+  @keyframes profile-edit-dash {
+    to {
+      stroke-dashoffset: -2;
+    }
+  }
+
   @keyframes bounceLeft {
     0%,
     100% {
@@ -2203,8 +2210,8 @@
 .flip {
   @apply relative
   transition-transform
-  duration-[1.25s]
-  ease-[cubic-bezier(0.8,0,0.2,1)];
+  duration-500
+  ease-in-out-cubic;
   transform-style: preserve-3d;
   /* backface-visibility: hidden; */
 

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/datepicker.css

@@ -109,7 +109,7 @@
 }
 
 @utility datepicker-subheader {
-  @apply flex pb-1.5;
+  @apply flex pb-1.5 justify-center;
 
   > span {
     @apply block m-px w-10 text-sm text-center text-core-ui-500 dark:text-core-ui-400;

package/styles/divider.css

@@ -11,7 +11,7 @@
   /* Lines using pseudo elements */
   &::before,
   &::after {
-    @apply content-[''] bg-text-default/10;
+    @apply content-[''] border-t border-t-text-default/10;
   }
 
   /* Horizontal divider lines */
@@ -28,7 +28,7 @@
 
     &::before,
     &::after {
-      @apply w-px h-full;
+      @apply w-px h-full border-l border-l-text-default/10;
     }
   }
 
@@ -38,13 +38,13 @@
       @apply flex-[0.25];
     }
     &::after {
-      @apply flex-[1];
+      @apply flex-1;
     }
   }
 
   &.divider-end {
     &::before {
-      @apply flex-[1];
+      @apply flex-1;
     }
     &::after {
       @apply flex-[0.25];
@@ -66,7 +66,21 @@
   &.divider-highlight {
     &::before,
     &::after {
-      @apply bg-line-highlight;
+      @apply border-line-highlight;
+    }
+  }
+
+  &.divider-dashed {
+    &::before,
+    &::after {
+      @apply border-dashed;
+    }
+  }
+
+  &.divider-dotted {
+    &::before,
+    &::after {
+      @apply border-dotted;
     }
   }
 }

package/styles/font.css

@@ -4,56 +4,70 @@
 
 @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;
 }
 
 @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;
 }
 
 @font-face {
   font-family: "Gazpacho";
-  src: url("../fonts/GazpachoRegular.otf") format("opentype");
+  src: url("../fonts/GazpachoRegular.woff2") format("woff2"),
+    url("../fonts/GazpachoRegular.otf") format("opentype");
   font-weight: 400;
   font-style: normal;
+  font-display: swap;
 }
 
 @font-face {
   font-family: "Gazpacho";
-  src: url("../fonts/GazpachoRegularItalic.otf") format("opentype");
+  src: url("../fonts/GazpachoRegularItalic.woff2") format("woff2"),
+    url("../fonts/GazpachoRegularItalic.otf") format("opentype");
   font-weight: 400;
   font-style: italic;
+  font-display: swap;
 }
 
 @font-face {
   font-family: "Gazpacho";
-  src: url("../fonts/GazpachoMedium.otf") format("opentype");
+  src: url("../fonts/GazpachoMedium.woff2") format("woff2"),
+    url("../fonts/GazpachoMedium.otf") format("opentype");
   font-weight: 500;
   font-style: normal;
+  font-display: swap;
 }
 
 @font-face {
   font-family: "Gazpacho";
-  src: url("../fonts/GazpachoMediumItalic.otf") format("opentype");
+  src: url("../fonts/GazpachoMediumItalic.woff2") format("woff2"),
+    url("../fonts/GazpachoMediumItalic.otf") format("opentype");
   font-weight: 500;
   font-style: italic;
+  font-display: swap;
 }
 
 @font-face {
   font-family: "Gazpacho";
-  src: url("../fonts/GazpachoBold.otf") format("opentype");
+  src: url("../fonts/GazpachoBold.woff2") format("woff2"),
+    url("../fonts/GazpachoBold.otf") format("opentype");
   font-weight: 700;
   font-style: normal;
+  font-display: swap;
 }
 
 @font-face {
   font-family: "Gazpacho";
-  src: url("../fonts/GazpachoBoldItalic.otf") format("opentype");
+  src: url("../fonts/GazpachoBoldItalic.woff2") format("woff2"),
+    url("../fonts/GazpachoBoldItalic.otf") format("opentype");
   font-weight: 700;
   font-style: italic;
-}
+  font-display: swap;
+}

package/styles/form-shared.css

@@ -1,18 +1,18 @@
-@import "tailwindcss";
+@import 'tailwindcss';
 
 /*----------------------------*/
 /* FORM */
 /*----------------------------*/
 
 @utility input-label {
-  @apply text-sm font-normal select-none;
+  @apply text-xs uppercase tracking-wider text-text-secondary font-bold font-body select-none;
 
   &:is(label) {
     @apply cursor-pointer;
   }
 
   small {
-    @apply text-xs font-light;
+    @apply text-xxs;
   }
 }
 

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

@@ -39,7 +39,7 @@
       &:has(svg:only-child) {
         @apply px-2;
       }
-      > *:not(svg, .avatar) {
+      > *:not(svg, .avatar, .material-symbols-rounded) {
         @apply w-full;
       }
       svg {

package/styles/surface.css

@@ -75,7 +75,7 @@
   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-default)_50%,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-strong)_15%,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;
@@ -148,7 +148,10 @@
   @apply surface-brand
   hover:brightness-105
   hover:border-brand-strong
-  active:border-brand-default;
+  active:border-brand-default
+  transition-[filter,box-shadow,border-color]
+  hover:shadow-[inset_0_1px_0_0_color-mix(in_srgb,var(--color-brand-moderate)_100%,transparent),inset_0_-1px_0_0_color-mix(in_srgb,var(--color-brand-strong)_15%,transparent)]
+  dark:hover:shadow-[inset_0_1px_0_0_color-mix(in_srgb,var(--color-brand-default)_100%,transparent),inset_0_-1px_0_0_color-mix(in_srgb,var(--color-brand-moderate)_50%,transparent)];
 }
 
 @utility surface-interactive {

package/styles/timeline.css

@@ -14,8 +14,7 @@
 }
 
 @utility timeline-dot {
-  @apply
-  size-(--timeline-marker-size)
+  @apply size-(--timeline-marker-size)
   block
   rounded-full
   border
@@ -24,8 +23,7 @@
 }
 
 @utility timeline-marker {
-  @apply
-  size-(--timeline-marker-size)
+  @apply size-(--timeline-marker-size)
   inline-flex
   shrink-0
   items-center
@@ -44,8 +42,7 @@
 }
 
 @utility timeline-connector {
-  @apply
-  block
+  @apply block
   rounded-full
   bg-line-default;
 }
@@ -55,7 +52,7 @@
 .timeline-vertical,
 .timeline-activity {
   > :where(li, .timeline-item) {
-    @apply relative px-(--timeline-item-indent);
+    @apply relative pl-(--timeline-item-indent);
   }
 
   > :where(li, .timeline-item):not(:last-child)::before {
@@ -78,7 +75,7 @@
   --timeline-item-indent: 1.75rem;
 
   > :where(li, .timeline-item):not(:last-child) {
-    @apply pb-10;
+    @apply pb-4;
   }
 
   > :where(li, .timeline-item) > :where(.timeline-marker, .timeline-dot) {
@@ -96,7 +93,7 @@
   --timeline-item-indent: 2.25rem;
 
   > :where(li, .timeline-item):not(:last-child) {
-    @apply pb-10;
+    @apply pb-4;
   }
 
   > :where(li, .timeline-item) > .timeline-marker {
@@ -141,7 +138,7 @@
   --timeline-item-indent: 2.25rem;
 
   > :where(li, .timeline-item):not(:last-child) {
-    @apply pb-10;
+    @apply pb-4;
   }
 
   > :where(li, .timeline-item) > .timeline-marker {

package/styles/typography.css

@@ -54,6 +54,10 @@ body {
   @apply text-sm font-light font-body;
 }
 
+@utility label {
+  @apply text-xs font-bold tracking-wide uppercase font-body;
+}
+
 @utility caption {
   @apply text-xs font-normal font-body;
 }
@@ -106,3 +110,7 @@ h6 {
     }
   }
 }
+
+.material-symbols-rounded {
+  @apply leading-none;
+}