twntyx-css 1.0.3 → 1.0.5

package/styles/state.css

@@ -3,138 +3,150 @@
 /*----------------------------*/
 
 @property --state-progress {
-  syntax: "<percentage>";
+  syntax: '<percentage>';
   inherits: false;
   initial-value: calc(0 * 1%);
 }
 
 @utility state {
-    @apply py-12 mx-auto max-w-md text-center;
+  @apply py-12 mx-auto max-w-md text-center;
 
-    /* Alignment variants */
-    &.state-left {
-      @apply text-left;
-      .state-icon {
-        @apply mx-0;
-      }
-      .state-actions {
-        @apply justify-start mx-0;
-      }
+  /* Alignment variants */
+  &.state-left {
+    @apply text-left;
+    .state-icon {
+      @apply mx-0;
     }
-    &.state-right {
-      @apply text-right;
-      .state-icon {
-        @apply mx-0;
-      }
-      .state-actions {
-        @apply justify-end mx-0;
-      }
+    .state-actions {
+      @apply justify-start mx-0;
     }
+  }
+  &.state-right {
+    @apply text-right;
+    .state-icon {
+      @apply mx-0;
+    }
+    .state-actions {
+      @apply justify-end mx-0;
+    }
+  }
+
+  /* Icon container */
+  .state-icon {
+    @apply inline-flex relative justify-center items-center mx-0 mb-4 rounded-full size-24;
+    @apply bg-background-brand/20 border border-line-brand/40;
 
-    /* Icon container */
+    &::before {
+      @apply content-[''] absolute inset-0 rounded-full mask;
+    }
+
+    /* Center alignment */
+    .state-center & {
+      @apply mx-auto;
+    }
+    /* Icon image */
+    img {
+      @apply w-full aspect-square;
+    }
+
+    svg {
+      @apply w-1/2 h-auto size-fit;
+    }
+  }
+  /* Animated variant */
+  &.has-animation {
     .state-icon {
-      @apply inline-flex relative justify-center items-center mx-0 mb-4 rounded-full size-24;
+      @apply border-none;
 
       &::before {
-        @apply content-[''] absolute inset-0 rounded-full mask;
+        @apply content-[''] absolute z-10 inset-0 rounded-full;
+        background: conic-gradient(
+          currentColor var(--state-progress),
+          transparent 0
+        );
+        mask: radial-gradient(
+          farthest-side,
+          transparent calc(100% - 1.5px),
+          #fff 0
+        );
+        animation: circle-progress 1.2s cubic-bezier(0.86, 0, 0.07, 1) forwards;
       }
 
-      /* Center alignment */
-      .state-center & {
-        @apply mx-auto;
-      }
-      /* Icon image */
       img {
-        @apply w-full aspect-square;
+        @apply animate-fire-in;
+        animation-delay: 850ms;
       }
-    }
-    /* Animated variant */
-    &.has-animation {
-      .state-icon {
-        @apply border-none;
-
-        &::before {
-          @apply content-[''] absolute z-10 inset-0 rounded-full;
-          background: conic-gradient(currentColor var(--state-progress), transparent 0);
-          mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #fff 0);
-          animation: circle-progress 1.2s cubic-bezier(0.86, 0, 0.07, 1) forwards;
-        }
-
-        img {
-          @apply animate-fire-in;
-          animation-delay: 850ms;
-        }
-        &::after {
-          @apply content-[''] absolute z-0 inset-0 rounded-full border border-line-default animate-ripple-out;
-          animation-delay: 1350ms;
-        }
+      &::after {
+        @apply content-[''] absolute z-0 inset-0 rounded-full border border-line-default animate-ripple-out;
+        animation-delay: 1350ms;
       }
+    }
 
-      > *:not(.state-icon) {
-        @apply animate-success-in-top;
-        &:nth-child(1) {
-          animation-delay: 200ms;
-        }
-        &:nth-child(2) {
-          animation-delay: 600ms;
-        }
-        &:nth-child(3) {
-          animation-delay: 800ms;
-        }
-        &:nth-child(4) {
-          animation-delay: 1000ms;
-        }
+    > *:not(.state-icon) {
+      @apply animate-success-in-top;
+      &:nth-child(1) {
+        animation-delay: 200ms;
+      }
+      &:nth-child(2) {
+        animation-delay: 600ms;
+      }
+      &:nth-child(3) {
+        animation-delay: 800ms;
+      }
+      &:nth-child(4) {
+        animation-delay: 1000ms;
       }
     }
+  }
 
-    /* Variants */
-    &.state-success {
-      .state-icon {
-        @apply surface-success;
-        &::before {
-          @apply text-line-success;
-        }
+  /* Variants */
+  &.state-success {
+    .state-icon {
+      @apply surface-success;
+      &::before {
+        @apply text-line-success;
       }
     }
+  }
 
-    &.state-error {
-      .state-icon {
-        @apply surface-error;
-        &::before {
-          @apply text-line-error;
-        }
+  &.state-error {
+    .state-icon {
+      @apply surface-error;
+      &::before {
+        @apply text-line-error;
       }
     }
+  }
 
-    &.state-info {
-      .state-icon {
-        @apply bg-brand-soft;
-        &::before {
-          @apply text-brand-default;
-        }
+  &.state-info {
+    .state-icon {
+      @apply surface-info;
+      &::before {
+        @apply text-brand-default;
       }
     }
+  }
 
-    &.state-warning {
-      .state-icon {
-        @apply surface-warning;
-        &::before {
-          @apply text-line-warning;
-        }
+  &.state-warning {
+    .state-icon {
+      @apply surface-warning;
+      &::before {
+        @apply text-line-warning;
       }
     }
+  }
 
-    /* Title */
-    .state-title {
-      @apply mb-2 h3 text-balance font-heading font-bold;
-    }
+  /* Title */
+  .state-title {
+    @apply mb-2 h3 text-balance font-heading font-bold;
+  }
 
-    /* Description */
-    .state-description {
-      @apply mb-4 p2 text-balance;
-    }
+  /* Description */
+  .state-description {
+    @apply mb-4 p2 text-balance;
+  }
 
-    /* Actions */
+  /* Actions */
   .state-actions {
     @apply flex flex-col gap-2 justify-center mx-auto mt-4 md:flex-row;
   }

package/styles/steps.css

@@ -10,7 +10,7 @@
   grid-auto-columns: 1fr;
 
   li {
-    @apply grid grid-cols-1 grid-rows-2 place-items-center text-center gap-2 min-w-[4rem] relative text-text-default text-sm;
+    @apply grid grid-cols-1 grid-rows-2 place-items-center text-center gap-2 min-w-16 relative text-text-default text-sm;
 
     &,
     &::before,
@@ -44,7 +44,7 @@
     ~ li {
       @apply text-text-tertiary;
       &::before {
-        @apply bg-line-default from-line-default to-line-default shadow-none border-line-default text-text-tertiary;
+        @apply bg-line-default from-line-default to-line-default shadow-none border-line-default text-text-tertiary text-shadow-white/50;
       }
       &::after {
         @apply bg-line-default;

package/styles/surface.css

@@ -4,16 +4,14 @@
 
 /* Base Surface */
 @utility surface {
-  @apply
-  border
+  @apply border
   bg-background-surface
   border-line-default;
 }
 
 /* Surface Variants */
 @utility surface-placeholder {
-  @apply
-  border
+  @apply border
   border-dashed
   bg-background-page
   border-line-highlight
@@ -21,11 +19,10 @@
 }
 
 @utility surface-elevated {
-  @apply
-  border
+  @apply border
   bg-background-surface-elevated
   border-line-hover/30
-  shadow-[inset_0_-2px_2px_color-mix(in_srgb,var(--tw-inset-shadow-color)_100%,transparent),inset_0_-4px_4px_color-mix(in_srgb,var(--tw-inset-shadow-color)_25%,transparent)]
+  shadow-[inset_0_-1px_1px_color-mix(in_srgb,var(--tw-inset-shadow-color)_100%,transparent),inset_0_-2px_2px_color-mix(in_srgb,var(--tw-inset-shadow-color)_25%,transparent)]
   inset-shadow-white/80
   dark:inset-shadow-white/5;
 }
@@ -34,10 +31,9 @@
   @apply border
   bg-background-surface-sunken
   border-line-strong/35
-  shadow-[inset_0_2px_2px_color-mix(in_srgb,var(--tw-inset-shadow-color)_100%,transparent),inset_0_4px_4px_color-mix(in_srgb,var(--tw-inset-shadow-color)_25%,transparent)]
+  shadow-[inset_0_1px_1px_color-mix(in_srgb,var(--tw-inset-shadow-color)_100%,transparent),inset_0_2px_2px_color-mix(in_srgb,var(--tw-inset-shadow-color)_25%,transparent)]
   inset-shadow-black/5
-  dark:inset-shadow-black/40
-  ;
+  dark:inset-shadow-black/40;
 }
 
 @utility surface-highlighted {
@@ -46,44 +42,36 @@
 
 /* Brand Surfaces */
 @utility surface-brand {
-  @apply 
-  text-text-inverted
+  @apply text-text-inverted
   bg-linear-to-b
   via-75%
   from-[0.5rem]
   to-[calc(100%-0.5rem)]
   from-brand-default
   to-brand-moderate
-  dark:from-brand-moderate
-  dark:to-brand-default
-  /* dark:from-brand-default
-  dark:via-brand-moderate
-  dark:to-brand-default */
+  /* dark:from-brand-moderate */
+  /* dark:to-brand-default */
   border
   border-brand-default
-  /* bg-size-[100%_calc(100%+0.5rem)]
-  bg-repeat
-  bg-position-[50%_calc(50%-0.5rem)] */
-  
-  /* dark:*:drop-shadow-[0_-1px_0_color-mix(in_srgb,var(--tw-drop-shadow-color)_20%,transparent),0_-1px_1px_var(--tw-drop-shadow-color),0_-1px_2px_color-mix(in_srgb,var(--tw-drop-shadow-color)_20%,transparent)] */
-  
-  /* text-shadow-2xs
-  text-shadow-brand-strong/50 */
   transition-[background-position,brightness]
-  shadow-[inset_0_1px_0.5px_0_color-mix(in_srgb,var(--color-brand-moderate)_100%,transparent),inset_0_-2px_0.5px_0_color-mix(in_srgb,var(--color-brand-default)_50%,transparent)]
-  dark:shadow-[inset_0_1px_0.5px_0_color-mix(in_srgb,var(--color-brand-soft)_100%,transparent),inset_0_-2px_0.5px_0_color-mix(in_srgb,var(--color-white)_50%,transparent)]
-  /* dark:shadow-[inset_0_-1px_0.5px_0_color-mix(in_srgb,var(--color-brand-moderate)_100%,transparent),inset_0_-2px_0.5px_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-default)_50%,transparent)]
+  /* dark:shadow-[inset_0_1px_0.5px_0_color-mix(in_srgb,var(--color-brand-soft)_100%,transparent),inset_0_-2px_0.5px_0_color-mix(in_srgb,var(--color-white)_50%,transparent)] */
   duration-75
-  ease-out-cubic
-    ;
+  ease-out-cubic;
 
-    > *, &::before, &::after {
-      @apply
-      drop-shadow-[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)]
+  > *,
+  &::before,
+  &::after {
+    @apply drop-shadow-[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)]
-      drop-shadow-brand-strong/50
-      ;
-    }
+      drop-shadow-brand-strong/50;
+  }
+}
+
+@utility surface-brand-light {
+  @apply bg-background-brand/15
+  border
+  border-line-brand/15;
 }
 
 /* Status Surfaces */
@@ -136,61 +124,59 @@
 }
 
 @utility surface-interactive-brand {
-  @apply 
-  surface-brand
+  @apply surface-brand
   hover:brightness-105
   hover:border-brand-strong
-  active:border-brand-default
-  ;
+  active:border-brand-default;
 }
 
 @utility surface-interactive {
-    @apply cursor-pointer hover:transition-colors include-interactive;
-
-    /* Interactive states for base surface */
-    &.surface {
-      @apply surface-interactive-neutral;
-    }
-
-    /* Interactive states for placeholder surface */
-    &.surface-placeholder {
-      @apply surface-interactive-placeholder;
-    }
-
-    /* Interactive states for elevated surface */
-    &.surface-elevated {
-      @apply hover:bg-background-surface-elevated/90 hover:border-line-hover active:bg-background-surface-elevated/75 active:border-line-strong;
-    }
-
-    /* Interactive states for sunken surface */
-    &.surface-sunken {
-      @apply hover:bg-background-surface hover:border-line-hover active:bg-background-page active:border-line-strong;
-    }
-
-    /* Interactive states for brand surface */
-    &.surface-brand {
-      @apply surface-interactive-brand;
-    }
-
-    /* Interactive states for success surface */
-    &.surface-success {
-      @apply surface-interactive-success;
-    }
-
-    /* Interactive states for error surface */
-    &.surface-error {
-      @apply surface-interactive-error;
-    }
-
-    /* Interactive states for warning surface */
-    &.surface-warning {
-      @apply surface-interactive-warning;
-    }
-
-    /* Interactive states for attention surface */
-    &.surface-attention {
-      @apply surface-interactive-attention;
-    }
+  @apply cursor-pointer hover:transition-colors include-interactive;
+
+  /* Interactive states for base surface */
+  &.surface {
+    @apply surface-interactive-neutral;
+  }
+
+  /* Interactive states for placeholder surface */
+  &.surface-placeholder {
+    @apply surface-interactive-placeholder;
+  }
+
+  /* Interactive states for elevated surface */
+  &.surface-elevated {
+    @apply hover:bg-background-surface-elevated/90 hover:border-line-hover active:bg-background-surface-elevated/75 active:border-line-strong;
+  }
+
+  /* Interactive states for sunken surface */
+  &.surface-sunken {
+    @apply hover:bg-background-surface hover:border-line-hover active:bg-background-page active:border-line-strong;
+  }
+
+  /* Interactive states for brand surface */
+  &.surface-brand {
+    @apply surface-interactive-brand;
+  }
+
+  /* Interactive states for success surface */
+  &.surface-success {
+    @apply surface-interactive-success;
+  }
+
+  /* Interactive states for error surface */
+  &.surface-error {
+    @apply surface-interactive-error;
+  }
+
+  /* Interactive states for warning surface */
+  &.surface-warning {
+    @apply surface-interactive-warning;
+  }
+
+  /* Interactive states for attention surface */
+  &.surface-attention {
+    @apply surface-interactive-attention;
+  }
 
   /* Interactive states for info surface */
   &.surface-info {
@@ -199,8 +185,7 @@
 }
 
 @utility surface-claim {
-  @apply
-  relative
+  @apply relative
   overflow-clip
   rounded-full
   bg-brand-moderate! 
@@ -217,8 +202,7 @@
   --claim-color-3: var(--color-text-inverted);
   --claim-color-4: var(--color-text-inverted);
 
-  @apply 
-  absolute
+  @apply absolute
   z-0
   -inset-1.5
   rounded-full

package/styles/table.css

@@ -100,7 +100,7 @@
   }
 
   th {
-    @apply font-medium text-left whitespace-nowrap text-text-secondary;
+    @apply font-semibold text-left whitespace-nowrap text-text-secondary;
   }
 
   td {
@@ -157,8 +157,8 @@
   }
 
   /* Row selection styles */
-  tr:has(input[type="checkbox"]:checked),
-  tr:has(input[type="radio"]:checked) {
+  tr:has(input[type='checkbox']:checked),
+  tr:has(input[type='radio']:checked) {
     @apply bg-background-brand/5;
     .table-item-title {
       @apply font-medium text-text-default;

package/styles/toast.css

@@ -10,7 +10,7 @@
 }
 
 @utility toast {
-  @apply relative pt-0.5 mx-auto w-full max-w-lg overflow-clip rounded border shadow-xl duration-300 text-text-default bg-background-surface ease-snappy-out border-line-default;
+  @apply relative pt-0.5 mx-auto w-full max-w-lg overflow-clip rounded border shadow-xl duration-300 text-text-default surface-elevated ease-snappy-out;
 
   &::before {
     @apply content-[''] absolute inset-x-0 top-0 h-0.5 rounded-t-xl duration-200 ease-in-out-cubic origin-center;
@@ -71,12 +71,10 @@
 }
 
 @utility toast-action {
-  @apply
-  px-3
+  @apply px-3
   py-1
   ml-3
-  rounded-2xl
-  ;
+  rounded-2xl;
 }
 
 @utility toast-close {

package/llm/components/input-group.json

@@ -1,94 +0,0 @@
-{
-  "id": "input-group",
-  "name": "Input group",
-  "status": "stable",
-  "summary": "Input group pattern for combining controls with prefixes, suffixes, and inline actions.",
-  "keywords": [
-    "addon",
-    "composed input",
-    "input group",
-    "input-group",
-    "prefix",
-    "suffix"
-  ],
-  "sourcePaths": [
-    "app/design-system/input-group/page.js",
-    "assets/styles/form.css",
-    "assets/styles/input-group.css"
-  ],
-  "apiModel": "html-class",
-  "baseClass": "input-group",
-  "variants": [],
-  "sizes": [],
-  "states": [],
-  "structure": {
-    "rootElement": "div",
-    "requiredClasses": [
-      "input-group"
-    ],
-    "optionalClasses": [],
-    "requiredChildren": [],
-    "optionalChildren": []
-  },
-  "attributes": {
-    "allowed": [
-      "class",
-      "id",
-      "tabindex"
-    ],
-    "required": [],
-    "dataAttributes": [],
-    "roles": [],
-    "aria": []
-  },
-  "a11y": {
-    "interactive": true,
-    "requiredRoles": [],
-    "requiredAria": [
-      "aria-label (when no visible label)"
-    ],
-    "keyboardSupport": [
-      "Tab",
-      "Shift+Tab",
-      "Enter",
-      "Space"
-    ],
-    "focusBehavior": "Visible focus state is required when the component is focusable or clickable."
-  },
-  "dos": [
-    "Apply the base class 'input-group' 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": [
-    "background-surface",
-    "background-surface-elevated",
-    "line-brand",
-    "line-default",
-    "line-focus",
-    "line-highlight",
-    "line-strong",
-    "text-tertiary"
-  ],
-  "examples": [
-    {
-      "id": "canonical",
-      "file": "examples/input-group.html",
-      "description": "Minimal canonical Input group 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."
-  }
-}