twntyx-css 1.0.5 → 1.0.6

package/llm/components/{card-assessment.json → card-draggable.json}

@@ -1,39 +1,31 @@
 {
-  "id": "card-assessment",
-  "name": "Investor fit card",
+  "id": "card-draggable",
+  "name": "Draggable card",
   "status": "preview",
-  "summary": "A versatile card component for displaying investor-fit insights, outreach criteria, and funding-readiness signals.",
+  "summary": "A versatile draggablecard component for displaying various items.",
   "keywords": [
     "card",
-    "card assessment",
-    "card-assessment",
-    "criteria",
-    "evaluation",
-    "feedback",
-    "fundraising",
-    "investor",
-    "investor fit",
-    "outreach",
-    "pipeline",
-    "pitch call",
-    "profile",
-    "progress",
-    "readiness",
-    "results",
-    "review"
+    "card draggable",
+    "card-draggable",
+    "drag and drop",
+    "draggable",
+    "items",
+    "list",
+    "reorderable",
+    "sortable"
   ],
   "sourcePaths": [
-    "app/design-system/card-assessment/page.js"
+    "app/design-system/card-draggable/page.js"
   ],
   "apiModel": "html-class",
-  "baseClass": "card-assessment",
+  "baseClass": "card-draggable",
   "variants": [],
   "sizes": [],
   "states": [],
   "structure": {
     "rootElement": "div",
     "requiredClasses": [
-      "card-assessment"
+      "card-draggable"
     ],
     "optionalClasses": [],
     "requiredChildren": [],
@@ -64,7 +56,7 @@
     "focusBehavior": "No keyboard interaction is required unless nested interactive children are introduced."
   },
   "dos": [
-    "Apply the base class 'card-assessment' on the root element.",
+    "Apply the base class 'card-draggable' 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."
   ],
@@ -77,8 +69,8 @@
   "examples": [
     {
       "id": "canonical",
-      "file": "examples/card-assessment.html",
-      "description": "Minimal canonical Investor fit card usage."
+      "file": "examples/card-draggable.html",
+      "description": "Minimal canonical Draggable card usage."
     }
   ],
   "composition": {

package/llm/components/illustrations-library.json

@@ -2,7 +2,7 @@
   "id": "illustrations-library",
   "name": "Illustrations library",
   "status": "stable",
-  "summary": "Browse our collection of custom illustrations and visual elements used to enhance the user experience and reinforce our brand identity across the application. The source assets located in [Figma](https://www.figma.com/design/1zI7ewgpqCGoxrPpiu6w2R/Product-illustrations?m=auto&t=LU9WIUq52kD6qdO8-1) *(Marketing / Assets)*, which can also be downloaded as a [.fig file](/figma/Product_illustrations.fig).",
+  "summary": "Browse our collection of custom illustrations and visual elements used to enhance the user experience and reinforce our brand identity across the application.",
   "keywords": [
     "artwork",
     "assets",

package/llm/components/template-onboarding.json

@@ -0,0 +1,82 @@
+{
+  "id": "template-onboarding",
+  "name": "Onboarding",
+  "status": "preview",
+  "summary": "A template for an onboarding process.",
+  "keywords": [
+    "getting started",
+    "guide",
+    "help",
+    "introduction",
+    "onboarding",
+    "support",
+    "template onboarding",
+    "template-onboarding",
+    "tutorial",
+    "welcome"
+  ],
+  "sourcePaths": [
+    "app/design-system/template-onboarding/page.js"
+  ],
+  "apiModel": "html-class",
+  "baseClass": "template-onboarding",
+  "variants": [],
+  "sizes": [],
+  "states": [],
+  "structure": {
+    "rootElement": "div",
+    "requiredClasses": [
+      "template-onboarding"
+    ],
+    "optionalClasses": [],
+    "requiredChildren": [],
+    "optionalChildren": []
+  },
+  "attributes": {
+    "allowed": [
+      "class"
+    ],
+    "required": [],
+    "dataAttributes": [],
+    "roles": [],
+    "aria": [
+      "aria-label"
+    ]
+  },
+  "a11y": {
+    "interactive": false,
+    "requiredRoles": [],
+    "requiredAria": [
+      "aria-label"
+    ],
+    "keyboardSupport": [],
+    "focusBehavior": "No keyboard interaction is required unless nested interactive children are introduced."
+  },
+  "dos": [
+    "Apply the base class 'template-onboarding' 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."
+  ],
+  "donts": [
+    "Do not combine conflicting state classes on the same element.",
+    "Do not rely on undocumented internal classes in production templates.",
+    "Do not remove required accessibility attributes when component is interactive."
+  ],
+  "tokenUsage": [],
+  "examples": [
+    {
+      "id": "canonical",
+      "file": "examples/template-onboarding.html",
+      "description": "Minimal canonical Onboarding 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/components/template-stats.json

@@ -1,6 +1,6 @@
 {
   "id": "template-stats",
-  "name": "Stats template",
+  "name": "Stats",
   "status": "preview",
   "summary": "Tailwind-first stats template for composing metric cards directly in markup without component-specific classes.",
   "keywords": [
@@ -61,7 +61,7 @@
     {
       "id": "canonical",
       "file": "examples/template-stats.html",
-      "description": "Minimal canonical Stats template usage."
+      "description": "Minimal canonical Stats usage."
     }
   ],
   "composition": {

package/llm/examples/card-draggable.html

@@ -0,0 +1 @@
+<div class="card-draggable">Draggable card</div>

package/llm/examples/template-onboarding.html

@@ -0,0 +1 @@
+<div class="template-onboarding">Onboarding</div>

package/llm/examples/template-stats.html

@@ -1 +1 @@
-<div class="template-stats">Stats template</div>
+<div class="template-stats">Stats</div>

package/llm/index.json

@@ -1,9 +1,9 @@
 {
   "llmSchemaVersion": "1.0.0",
-  "designSystemVersion": "1.0.5",
+  "designSystemVersion": "1.0.6",
   "packageName": "twntyx-css",
   "apiModel": "html-class",
-  "sourceFingerprint": "bd6f1d8c217682374a3d5519f14a8c18f182db2cea28a2eb3dd66148a1b33dfa",
+  "sourceFingerprint": "4cd39f2680d99524f0624f0487aa006fb4b948b3ef1926fb82d2b1d6e0b608e9",
   "files": {
     "schema": "schema.json",
     "tokens": "tokens.json",
@@ -315,29 +315,21 @@
       ]
     },
     {
-      "id": "card-assessment",
-      "name": "Investor fit card",
-      "file": "components/card-assessment.json",
+      "id": "card-draggable",
+      "name": "Draggable card",
+      "file": "components/card-draggable.json",
       "status": "preview",
-      "summary": "A versatile card component for displaying investor-fit insights, outreach criteria, and funding-readiness signals.",
+      "summary": "A versatile draggablecard component for displaying various items.",
       "keywords": [
         "card",
-        "card assessment",
-        "card-assessment",
-        "criteria",
-        "evaluation",
-        "feedback",
-        "fundraising",
-        "investor",
-        "investor fit",
-        "outreach",
-        "pipeline",
-        "pitch call",
-        "profile",
-        "progress",
-        "readiness",
-        "results",
-        "review"
+        "card draggable",
+        "card-draggable",
+        "drag and drop",
+        "draggable",
+        "items",
+        "list",
+        "reorderable",
+        "sortable"
       ]
     },
     {
@@ -755,7 +747,7 @@
       "name": "Illustrations library",
       "file": "components/illustrations-library.json",
       "status": "stable",
-      "summary": "Browse our collection of custom illustrations and visual elements used to enhance the user experience and reinforce our brand identity across the application. The source assets located in [Figma](https://www.figma.com/design/1zI7ewgpqCGoxrPpiu6w2R/Product-illustrations?m=auto&t=LU9WIUq52kD6qdO8-1) *(Marketing / Assets)*, which can also be downloaded as a [.fig file](/figma/Product_illustrations.fig).",
+      "summary": "Browse our collection of custom illustrations and visual elements used to enhance the user experience and reinforce our brand identity across the application.",
       "keywords": [
         "artwork",
         "assets",
@@ -1472,9 +1464,28 @@
         "top bar"
       ]
     },
+    {
+      "id": "template-onboarding",
+      "name": "Onboarding",
+      "file": "components/template-onboarding.json",
+      "status": "preview",
+      "summary": "A template for an onboarding process.",
+      "keywords": [
+        "getting started",
+        "guide",
+        "help",
+        "introduction",
+        "onboarding",
+        "support",
+        "template onboarding",
+        "template-onboarding",
+        "tutorial",
+        "welcome"
+      ]
+    },
     {
       "id": "template-stats",
-      "name": "Stats template",
+      "name": "Stats",
       "file": "components/template-stats.json",
       "status": "preview",
       "summary": "Tailwind-first stats template for composing metric cards directly in markup without component-specific classes.",

package/package.json

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

package/styles/countdown.css

@@ -3,63 +3,50 @@
 /*----------------------------*/
 
 .countdown {
-  @apply
-  leading-[0]
+  @apply leading-[0]
   inline-flex
-  items-baseline
-  ;
+  items-baseline;
+  @-moz-document url-prefix() {
+    @apply items-center!;
+  }
   > * {
-    @apply
-    not-italic
-    ;
+    @apply not-italic;
   }
 
   > i:not(:last-child) {
-    @apply
-    mr-0.5
-    ;
+    @apply mr-0.5;
   }
   > span {
-    @apply
-    h-4
+    @apply h-4
     leading-none
     inline-block
     overflow-y-hidden
-    /* mx-auto */
-    ;
+    /* mx-auto */;
     &::before {
-      @apply
-      relative
+      @apply relative
       content-["00\a_01\a_02\a_03\a_04\a_05\a_06\a_07\a_08\a_09\a_10\a_11\a_12\a_13\a_14\a_15\a_16\a_17\a_18\a_19\a_20\a_21\a_22\a_23\a_24\a_25\a_26\a_27\a_28\a_29\a_30\a_31\a_32\a_33\a_34\a_35\a_36\a_37\a_38\a_39\a_40\a_41\a_42\a_43\a_44\a_45\a_46\a_47\a_48\a_49\a_50\a_51\a_52\a_53\a_54\a_55\a_56\a_57\a_58\a_59\a_60\a_61\a_62\a_63\a_64\a_65\a_66\a_67\a_68\a_69\a_70\a_71\a_72\a_73\a_74\a_75\a_76\a_77\a_78\a_79\a_80\a_81\a_82\a_83\a_84\a_85\a_86\a_87\a_88\a_89\a_90\a_91\a_92\a_93\a_94\a_95\a_96\a_97\a_98\a_99\a"]
       whitespace-pre
       text-center
       transition-all
       duration-1000
       top-[calc(var(--value)_*_-1em)]
-      ease-[cubic-bezier(0.9,0,0.1,1)]
-      ;
+      ease-[cubic-bezier(0.9,0,0.1,1)];
     }
   }
 }
 
 .chip {
   .countdown > span {
-    @apply
-    h-4
-    ;
+    @apply h-4;
   }
   &.chip-sm {
     .countdown > span {
-      @apply
-      h-3
-      ;
+      @apply h-3;
     }
   }
   &.chip-xs {
     .countdown > span {
-      @apply
-      h-2
-      ;
+      @apply h-2;
     }
   }
-}
+}

package/styles/progress.css

@@ -16,35 +16,37 @@
 }
 
 @utility progress-radial {
-    @apply inline-flex overflow-hidden relative justify-center items-center rounded-full transition-all duration-75 include-transition;
+  @apply inline-flex overflow-hidden relative justify-center items-center rounded-full transition-all duration-75 include-transition;
 
-    width: var(--size);
-    height: var(--size);
+  width: var(--size);
+  height: var(--size);
 
-    /* Create the radial progress background */
-    background:
-      radial-gradient(farthest-side, currentColor 98%, transparent) top/var(--thickness) var(--thickness) no-repeat,
-      conic-gradient(currentColor calc(var(--value) * 1%), transparent 0);
+  /* Create the radial progress background */
+  background:
+    radial-gradient(farthest-side, currentColor 98%, transparent)
+      top/var(--thickness) var(--thickness) no-repeat,
+    conic-gradient(currentColor calc(var(--value) * 1%), transparent 0);
 
-    /* Progress indicator dot */
-    &::after {
-      @apply absolute 
+  /* Progress indicator dot */
+  &::after {
+    @apply absolute 
       rounded-full 
       bg-current
       content-['']
       transition-transform
       include-transition duration-75;
-      width: var(--thickness);
-      height: var(--thickness);
-      inset: calc(50% - var(--thickness) / 2);
-      transform: rotate(calc(var(--value) * 3.6deg - 90deg)) translate(calc(var(--size) / 2 - 50%));
-    }
+    width: var(--thickness);
+    height: var(--thickness);
+    inset: calc(50% - var(--thickness) / 2);
+    transform: rotate(calc(var(--value) * 3.6deg - 90deg))
+      translate(calc(var(--size) / 2 - 50%));
+  }
 
-    /* Inner circle */
-    .progress-inner {
-      @apply absolute rounded-full bg-background-surface;
-      inset: var(--thickness);
-    }
+  /* Inner circle */
+  .progress-inner {
+    @apply absolute rounded-full bg-background-surface;
+    inset: var(--thickness);
+  }
 
   /* Value text */
   .progress-value {
@@ -54,66 +56,66 @@
 
 /* Size variants */
 @utility progress-xs {
-    --size: 44px;
-    --thickness: 2px;
+  --size: 44px;
+  --thickness: 2px;
   @apply text-xs;
 }
 
 @utility progress-sm {
-    --size: 64px;
-    --thickness: 3px;
+  --size: 64px;
+  --thickness: 3px;
   @apply text-sm;
 }
 
 @utility progress-md {
-    --size: 96px;
-    --thickness: 4px;
+  --size: 96px;
+  --thickness: 4px;
   @apply text-base;
 }
 
 @utility progress-lg {
-    --size: 128px;
-    --thickness: 6px;
+  --size: 128px;
+  --thickness: 6px;
   @apply text-xl;
 }
 
 @utility progress-xl {
-    --size: 160px;
-    --thickness: 8px;
+  --size: 160px;
+  --thickness: 8px;
   @apply text-2xl;
 }
 
 /* Linear progress */
 @utility progress-linear {
-    --thickness: 6px;
-    @apply relative w-full rounded-full bg-line-highlight text-background-brand h-(--thickness);
+  --thickness: 6px;
+  @apply relative w-full rounded-full bg-line-highlight text-background-brand h-(--thickness);
 
-    /* Progress bar */
-    &::after {
-      @apply content-[''] absolute inset-0 bg-current rounded-full transition-all duration-300 ease-out-quart;
-      width: var(--value, 0%);
-    }
+  /* Progress bar */
+  &::after {
+    @apply content-[''] absolute inset-0 bg-current rounded-full transition-all duration-300 ease-out-quart;
+    width: var(--value, 0%);
+  }
 
-    /* Size variants */
-    &.progress-xs {
-      --thickness: 2px;
-    }
+  /* Size variants */
+  &.progress-xs {
+    --thickness: 2px;
+  }
 
-    &.progress-sm {
-      --thickness: 4px;
-    }
+  &.progress-sm {
+    --thickness: 4px;
+  }
 
-    &.progress-md {
-      --thickness: 6px;
-    }
+  &.progress-md {
+    --thickness: 6px;
+  }
 
-    &.progress-lg {
-      --thickness: 10px;
-    }
+  &.progress-lg {
+    --thickness: 10px;
+  }
 
-    &.progress-xl {
-      --thickness: 12px;
-    }
+  &.progress-xl {
+    --thickness: 12px;
+  }
 
   .progress-label {
     @apply text-xs text-text-tertiary whitespace-nowrap inline absolute bottom-2.5 -translate-x-full left-[calc(var(--value))];
@@ -122,86 +124,86 @@
 
 /* Bullet progress */
 @utility progress-bullet {
-    --thickness: 8px;
-    @apply flex gap-[calc(var(--thickness)/1.75)] text-brand-default;
+  --thickness: 8px;
+  @apply flex gap-(--thickness) text-brand-default;
 
-    &:not(:has(.is-active)) li,
-    li.is-active ~ li {
-      &::after {
-        @apply translate-y-full;
-      }
+  &:not(:has(.is-active)) li,
+  li.is-active ~ li {
+    &::after {
+      @apply translate-y-full;
+    }
+  }
+
+  li {
+    @apply overflow-hidden relative rounded-full size-2 bg-line-highlight h-(--thickness) w-(--thickness);
+
+    &::after {
+      @apply content-[''] absolute inset-0 rounded-full transition-transform duration-0 ease-out-cubic translate-y-0 bg-current;
+    }
+  }
+
+  li.is-active {
+    &::after {
+      @apply bg-current duration-500;
     }
+  }
+
+  &.progress-xs {
+    --thickness: 4px;
+  }
+
+  &.progress-sm {
+    --thickness: 6px;
+  }
+
+  &.progress-md {
+    --thickness: 8px;
+  }
+
+  &.progress-lg {
+    --thickness: 10px;
+  }
+
+  &.progress-xl {
+    --thickness: 12px;
+  }
+
+  /* Full width variant */
+  &.progress-full {
+    --thickness: 4px;
+    @apply w-full;
 
     li {
-      @apply overflow-hidden relative rounded-full size-2 bg-line-highlight h-(--thickness) w-(--thickness);
+      @apply flex-1 h-(--thickness);
 
       &::after {
-        @apply content-[''] absolute inset-0 rounded-full transition-transform duration-0 ease-out-cubic translate-y-0 bg-current;
+        @apply w-full opacity-100 translate-x-0 translate-y-0;
       }
     }
 
-    li.is-active {
+    &:not(:has(.is-active)) li,
+    li.is-active ~ li {
       &::after {
-        @apply bg-current duration-500;
+        @apply -translate-x-[calc(100%+2px)] translate-y-0;
       }
     }
 
     &.progress-xs {
-      --thickness: 4px;
+      --thickness: 1px;
     }
 
     &.progress-sm {
-      --thickness: 6px;
+      --thickness: 2px;
     }
 
     &.progress-md {
-      --thickness: 8px;
+      --thickness: 4px;
     }
 
     &.progress-lg {
-      --thickness: 10px;
-    }
-
-    &.progress-xl {
-      --thickness: 12px;
+      --thickness: 6px;
     }
 
-    /* Full width variant */
-    &.progress-full {
-      --thickness: 4px;
-      @apply w-full;
-
-      li {
-        @apply flex-1 h-(--thickness);
-
-        &::after {
-          @apply w-full opacity-100 translate-x-0 translate-y-0;
-        }
-      }
-
-      &:not(:has(.is-active)) li,
-      li.is-active ~ li {
-        &::after {
-          @apply -translate-x-[calc(100%+2px)] translate-y-0;
-        }
-      }
-
-      &.progress-xs {
-        --thickness: 1px;
-      }
-
-      &.progress-sm {
-        --thickness: 2px;
-      }
-
-      &.progress-md {
-        --thickness: 4px;
-      }
-
-      &.progress-lg {
-        --thickness: 6px;
-      }
-
     &.progress-xl {
       --thickness: 8px;
     }

package/styles/stepper.css

@@ -3,22 +3,20 @@
 /*----------------------------*/
 
 .stepper {
-  @apply
-  leading-[0]
+  @apply leading-[0]
   inline-flex
-  items-baseline
-  ;
+  items-baseline;
+  @-moz-document url-prefix() {
+    @apply items-center!;
+  }
   > span {
-    @apply
-    h-4
+    @apply h-4
     leading-none
     inline-block
     overflow-y-hidden
-    mx-auto
-    ;
+    mx-auto;
     &::before {
-      @apply
-      relative
+      @apply relative
       content-["1\a_2\a_3\a_4\a_5\a_6\a_7\a_8\a_9\a_0\a_1\a_2\a_3\a_4\a_5\a_6\a_7\a_8\a_9\a_0\a_1\a_2\a_3\a_4\a_5\a_6\a_7\a_8\a_9\a_0\a_1\a_2\a_3\a_4\a_5\a_6\a_7\a_8\a_9\a_0\a_1\a_2\a_3\a_4\a_5\a_6\a_7\a_8\a_9\a"]
       whitespace-pre
       text-center
@@ -27,8 +25,7 @@
       top-0
       ease-[cubic-bezier(0.9,0,0.1,1)]
       animate-[stepper_5s_cubic-bezier(0.9,0,0.1,1)_both]
-      block
-      ;
+      block;
     }
     &:nth-last-child(1)::before {
       animation-duration: 2s;
@@ -69,4 +66,4 @@
   100% {
     transform: translateY(calc(-8.95em + (var(--value) * -1em)));
   }
-}
+}

package/llm/examples/card-assessment.html

@@ -1 +0,0 @@
-<div class="card-assessment">Investor fit card</div>