twntyx-css 1.0.9 → 1.0.10

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/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.10",
   "packageName": "twntyx-css",
   "apiModel": "html-class",
-  "sourceFingerprint": "da5c687a1df4907a77f8f1b512ad33f27f39b7edff70707323b7590abd5d56ba",
+  "sourceFingerprint": "f7c8ee0540e7bb413846b1be281b9f5034f86ab48ade5f990858bbcce6fea5ad",
   "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.10",
   "exports": {
     "./llm": "./llm/index.json",
     "./llm/components/*": "./llm/components/*.json",

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/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

@@ -7,6 +7,7 @@
   src: url("../fonts/InstrumentSans-VariableFont_wdth,wght.ttf") format("truetype");
   font-weight: 100 900;
   font-style: normal;
+  font-display: swap;
 }
 
 @font-face {
@@ -14,46 +15,59 @@
   src: url("../fonts/InstrumentSans-Italic-VariableFont_wdth,wght.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/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;
 }