@basis-ng/styles 0.0.1-alpha.189 → 0.0.1-alpha.190

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@basis-ng/styles",
-  "version": "0.0.1-alpha.189",
+  "version": "0.0.1-alpha.190",
   "description": "CSS foundation for @basis-ng/primitives components",
   "main": "src/index.css",
   "exports": {

package/src/components/button.css

@@ -1,7 +1,7 @@
 /* Button styles — grouped sections: Base / Variants / Sizes / States / Squared */
 button[b-button] {
   /* Base */
-  @apply transition-colors duration-150 flex items-center justify-center gap-x-1.5 disabled:opacity-50 disabled:cursor-not-allowed;
+  @apply transition-colors duration-150 flex items-center justify-center gap-x-1.5 disabled:opacity-60 disabled:pointer-events-none;
 
   /* Default spacing/typography applied when no explicit size is present */
   @apply px-3 py-0 text-sm h-8 rounded-size-md;

package/src/components/checkbox.css

@@ -10,7 +10,7 @@ button[b-checkbox] {
   }
 
   &[data-disabled] {
-    @apply opacity-50 cursor-not-allowed;
+    @apply opacity-60 pointer-events-none;
   }
 
   &[data-state='checked'] {

package/src/components/input.css

@@ -8,7 +8,9 @@ input[b-input] {
   @apply px-2.5 py-0 text-sm h-8 rounded-size-md;
 
   /* Disabled */
-  @apply disabled:opacity-50 disabled:cursor-not-allowed;
+  &:disabled {
+    @apply opacity-60 pointer-events-none;
+  }
 
   &:focus-visible:not(:read-only) {
     /* Keep primary outline on focus to maintain emphasis */
@@ -30,10 +32,6 @@ input[b-input] {
     }
   }
 
-  &:disabled {
-    @apply opacity-60 pointer-events-none;
-  }
-
   /* Sizes */
   &.b-size-sm {
     @apply px-2 py-0 text-xs h-6 rounded-size-sm;

package/src/components/select.css

@@ -3,7 +3,7 @@ b-select {
 
   button[b-select-trigger] {
     /* Base */
-    @apply w-full transition-colors duration-150 flex items-center justify-between gap-x-1.5 disabled:opacity-50 disabled:cursor-not-allowed;
+    @apply w-full transition-colors duration-150 flex items-center justify-between gap-x-1.5 disabled:opacity-60 disabled:pointer-events-none;
 
     /* Default spacing/typography applied when no explicit size is present */
     @apply px-3 py-0 text-sm h-8 rounded-size-md gap-2;
@@ -60,23 +60,21 @@ b-select {
       }
     }
   }
-}
 
-/* Invalid state - Angular applies ng-invalid/ng-touched to parent wrapper components, not b-select */
-.ng-invalid.ng-touched b-select,
-b-select.ng-invalid.ng-touched {
-  button[b-select-trigger] {
-    @apply text-destructive inset-ring-destructive/20 bg-destructive/10 hover:bg-destructive/20;
-    @apply dark:text-destructive-dark dark:inset-ring-destructive-dark/20 dark:bg-destructive-dark/10 dark:hover:bg-destructive-dark/20;
+  &.ng-invalid.ng-touched {
+    button[b-select-trigger] {
+      @apply text-destructive inset-ring-destructive/20 bg-destructive/10 hover:bg-destructive/20;
+      @apply dark:text-destructive-dark dark:inset-ring-destructive-dark/20 dark:bg-destructive-dark/10 dark:hover:bg-destructive-dark/20;
 
-    b-select-value {
-      @apply text-destructive;
-      @apply dark:text-destructive-dark;
-    }
+      b-select-value {
+        @apply text-destructive;
+        @apply dark:text-destructive-dark;
+      }
 
-    &:focus-visible {
-      @apply outline-destructive;
-      @apply dark:outline-destructive-dark;
+      &:focus-visible {
+        @apply outline-destructive;
+        @apply dark:outline-destructive-dark;
+      }
     }
   }
 }

package/src/components/tabs.css

@@ -36,7 +36,7 @@ b-tabs {
 
     /* Disabled state */
     &[aria-disabled='true'] {
-      @apply opacity-50 cursor-not-allowed pointer-events-none;
+      @apply opacity-60 pointer-events-none;
     }
   }