@lanrenbang/basecoat-ultra 0.1.6 → 0.2.0

package/dist/css/basecoat.css

@@ -263,7 +263,7 @@
   .btn-lg-icon-ghost,
   .btn-lg-icon-link,
   .btn-lg-icon-destructive {
-    @apply inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive cursor-pointer rounded-md;
+    @apply inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive cursor-pointer rounded-md relative;
     
     & svg:not([class*="size-"]) {
       @apply size-4;
@@ -630,9 +630,18 @@
 /* Dialog */
 @layer components {
   @keyframes dialog-spring-in {
-    0% { opacity: 0; transform: scale(0.9); }
-    50% { opacity: 1; transform: scale(1.05); }
-    100% { opacity: 1; transform: scale(1); }
+    0% { 
+      opacity: 0; 
+      transform: translateY(20px); 
+    }
+    70% { 
+      opacity: 0.9; 
+      transform: translateY(-4px); /* Small overshoot up */
+    }
+    100% { 
+      opacity: 1; 
+      transform: translateY(0); /* Perfect final position */
+    }
   }
   
   @keyframes backdrop-in {
@@ -652,17 +661,13 @@
     margin: auto !important; 
     height: fit-content !important;
 
-    /* Open state */
+    /* Open state with spring animation - translate only, no scale */
     &[open] {
       @apply opacity-100 visible;
-      /* 
-         UPDATED ANIMATION (User Request): 
-         Added a spring-like pop-up effect (scale 0.9 -> 1.05 -> 1.0) 
-         instead of the original simple fade/scale.
-         Duration increased to 0.3s for better visibility.
-         Defined in @keyframes dialog-spring-in above.
-      */
-      animation: dialog-spring-in 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.1) forwards;
+      animation: dialog-spring-in 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1) forwards;
+      
+      /* Ensure final state is pixel-perfect */
+      animation-fill-mode: forwards;
     }
 
     /* Backdrop */
@@ -689,9 +694,8 @@
       @apply flex flex-col-reverse gap-2 sm:flex-row sm:justify-end;
     }
     
-    /* Close Button - positioned absolute top-right */
-    > button.close,
-    > form[method='dialog'] > button.close {
+    /* Close Button - positioned absolute top-right, same level as header */
+    > button.close {
       @apply absolute top-4 right-4 p-0 bg-transparent border-0 cursor-pointer;
       @apply ring-offset-background focus:ring-ring text-muted-foreground hover:text-foreground rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none;
       
@@ -761,7 +765,7 @@
       @apply flex w-fit items-center gap-2 text-sm leading-snug font-medium;
     }
     [role="alert"] {
-      @apply text-sm text-destructive font-normal;
+      @apply text-xs text-destructive font-normal;
       
       ul {
         @apply ml-4 flex list-disc flex-col gap-1;
@@ -778,7 +782,7 @@
   .fieldset legend + p,
   .field > p,
   .field section > p {
-    @apply text-muted-foreground text-sm leading-normal font-normal [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4;
+    @apply text-muted-foreground text-xs leading-normal font-normal [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4;
   }
   .fieldset legend + p {
     @apply -mt-1.5;
@@ -915,7 +919,7 @@
     }
   }
   .popover {
-    @apply relative inline-flex;
+    @apply relative inline-block;
 
     [data-popover] {
       @apply p-4;
@@ -1206,7 +1210,7 @@
   .table {
     @apply w-full caption-bottom text-sm;
     thead {
-      @apply [&_tr]:border-b;
+      @apply bg-muted/30 [&_tr]:border-b;
     }
     tbody {
       @apply [&_tr:last-child]:border-0;
@@ -1422,11 +1426,11 @@
       height: var(--carousel-height, 400px); /* Default height */
     }
     .carousel-previous {
-      @apply -top-8 left-1/2 -translate-x-1/2 rotate-90 translate-y-0;
+      @apply -top-8 left-1/2 -translate-x-1/2 translate-y-0;
       top: -2rem !important; /* Force top */
     }
     .carousel-next {
-      @apply -bottom-8 top-auto left-1/2 -translate-x-1/2 rotate-90 translate-y-0;
+      @apply -bottom-8 top-auto left-1/2 -translate-x-1/2 translate-y-0;
       bottom: -2rem !important; /* Force bottom */
       top: auto !important;
     }
@@ -1688,6 +1692,14 @@ Global adaptive lighting system.
      Technique: Uses ::after with inset:0 and border-radius:inherit to mask the shine 
      without requiring overflow:hidden on the parent (which breaks Tooltips).
   */
+  .effect-shine,
+  .btn:not(.btn-link):not(:disabled):not(.no-shine),
+  .neu-btn:not(:disabled):not(.no-shine),
+  .toggle:not(:disabled):not(.no-shine),
+  [role="tab"]:not([aria-selected="true"]):not(:disabled):not(.no-shine) {
+      @apply relative;
+  }
+
   .effect-shine,
   .btn:not(.btn-link):not(:disabled):not(.no-shine),
   .neu-btn:not(:disabled):not(.no-shine),
@@ -1695,8 +1707,6 @@ Global adaptive lighting system.
   [role="tab"]:not([aria-selected="true"]):not(:disabled):not(.no-shine),
   .carousel-previous:not(:disabled):not(.no-shine),
   .carousel-next:not(:disabled):not(.no-shine) {
-      /* Removed @apply relative to prevent overriding absolute positioning on carousel buttons */
-      
       &::after {
           content: '';
           @apply absolute inset-0 z-10 pointer-events-none;