@womp/kookie-ui 0.35.4 → 0.35.5

package/components.css

@@ -6059,7 +6059,11 @@
           box-shadow: inset 0 0 0 1px var(--accent-6);
 }
 @media (hover: hover) {
-  .kui-TextFieldRoot:where(.kui-variant-outline):where(:hover:not(:has(.kui-TextFieldInput:where(:focus,:disabled)))) {
+  .kui-TextFieldRoot:where(.kui-variant-outline):where(:hover:not(:has(.kui-TextFieldInput:where(:focus,:disabled,:-moz-read-only)))) {
+    background-color: var(--accent-2);
+    box-shadow: inset 0 0 0 1px var(--accent-7);
+  }
+  .kui-TextFieldRoot:where(.kui-variant-outline):where(:hover:not(:has(.kui-TextFieldInput:where(:focus,:disabled,:read-only)))) {
     background-color: var(--accent-2);
     -webkit-box-shadow: inset 0 0 0 1px var(--accent-7);
             box-shadow: inset 0 0 0 1px var(--accent-7);
@@ -6095,11 +6099,7 @@
   -webkit-box-shadow: inset 0 0 0 1px var(--focus-a5);
           box-shadow: inset 0 0 0 1px var(--focus-a5);
 }
-.kui-TextFieldRoot:where(.kui-variant-outline):where(:has(.kui-TextFieldInput:where(:disabled,:-moz-read-only))) {
-  background-image: linear-gradient(var(--neutral-a2), var(--neutral-a2));
-  box-shadow: inset 0 0 0 var(--text-field-border-width) var(--neutral-a6);
-}
-.kui-TextFieldRoot:where(.kui-variant-outline):where(:has(.kui-TextFieldInput:where(:disabled,:read-only))) {
+.kui-TextFieldRoot:where(.kui-variant-outline):where(:has(.kui-TextFieldInput:disabled)) {
   background-image: linear-gradient(var(--neutral-a2), var(--neutral-a2));
   -webkit-box-shadow: inset 0 0 0 var(--text-field-border-width) var(--neutral-a6);
           box-shadow: inset 0 0 0 var(--text-field-border-width) var(--neutral-a6);
@@ -6168,7 +6168,10 @@
   background-color: var(--accent-3);
 }
 @media (hover: hover) {
-  .kui-TextFieldRoot:where(.kui-variant-soft):where(:hover:not(:has(.kui-TextFieldInput:where(:focus,:disabled)))) {
+  .kui-TextFieldRoot:where(.kui-variant-soft):where(:hover:not(:has(.kui-TextFieldInput:where(:focus,:disabled,:-moz-read-only)))) {
+    background-color: var(--accent-4);
+  }
+  .kui-TextFieldRoot:where(.kui-variant-soft):where(:hover:not(:has(.kui-TextFieldInput:where(:focus,:disabled,:read-only)))) {
     background-color: var(--accent-4);
   }
 }
@@ -6205,10 +6208,7 @@
   -webkit-box-shadow: inset 0 0 0 1px var(--accent-a5), inset 0 0 0 1px var(--neutral-a4);
           box-shadow: inset 0 0 0 1px var(--accent-a5), inset 0 0 0 1px var(--neutral-a4);
 }
-.kui-TextFieldRoot:where(.kui-variant-soft):where(:has(.kui-TextFieldInput:where(:disabled,:-moz-read-only))) {
-  background-color: var(--neutral-a3);
-}
-.kui-TextFieldRoot:where(.kui-variant-soft):where(:has(.kui-TextFieldInput:where(:disabled,:read-only))) {
+.kui-TextFieldRoot:where(.kui-variant-soft):where(:has(.kui-TextFieldInput:disabled)) {
   background-color: var(--neutral-a3);
 }
 .kui-TextFieldRoot:where(.kui-variant-ghost) {
@@ -6240,7 +6240,10 @@
   color: var(--accent-a11);
 }
 @media (hover: hover) {
-  .kui-TextFieldRoot:where(.kui-variant-ghost):where(:hover:not(:has(.kui-TextFieldInput:where(:focus,:disabled)))) {
+  .kui-TextFieldRoot:where(.kui-variant-ghost):where(:hover:not(:has(.kui-TextFieldInput:where(:focus,:disabled,:-moz-read-only)))) {
+    background-color: var(--accent-3);
+  }
+  .kui-TextFieldRoot:where(.kui-variant-ghost):where(:hover:not(:has(.kui-TextFieldInput:where(:focus,:disabled,:read-only)))) {
     background-color: var(--accent-3);
   }
 }
@@ -6256,11 +6259,7 @@
   -webkit-box-shadow: inset 0 0 0 1px var(--accent-a5), inset 0 0 0 1px var(--neutral-a4);
           box-shadow: inset 0 0 0 1px var(--accent-a5), inset 0 0 0 1px var(--neutral-a4);
 }
-.kui-TextFieldRoot:where(.kui-variant-ghost):where(:has(.kui-TextFieldInput:where(:disabled,:-moz-read-only))) {
-  background-color: var(--neutral-a2);
-  color: var(--neutral-a8);
-}
-.kui-TextFieldRoot:where(.kui-variant-ghost):where(:has(.kui-TextFieldInput:where(:disabled,:read-only))) {
+.kui-TextFieldRoot:where(.kui-variant-ghost):where(:has(.kui-TextFieldInput:disabled)) {
   background-color: var(--neutral-a2);
   color: var(--neutral-a8);
 }
@@ -6294,7 +6293,11 @@
   color: var(--accent-a11);
 }
 @media (hover: hover) {
-  .kui-TextFieldRoot:where(.kui-variant-surface):where(:hover:not(:has(.kui-TextFieldInput:where(:focus,:disabled)))) {
+  .kui-TextFieldRoot:where(.kui-variant-surface):where(:hover:not(:has(.kui-TextFieldInput:where(:focus,:disabled,:-moz-read-only)))) {
+    background-color: var(--accent-3);
+    box-shadow: inset 0 0 0 1px var(--accent-7);
+  }
+  .kui-TextFieldRoot:where(.kui-variant-surface):where(:hover:not(:has(.kui-TextFieldInput:where(:focus,:disabled,:read-only)))) {
     background-color: var(--accent-3);
     -webkit-box-shadow: inset 0 0 0 1px var(--accent-7);
             box-shadow: inset 0 0 0 1px var(--accent-7);
@@ -6314,17 +6317,18 @@
   -webkit-box-shadow: inset 0 0 0 1px var(--accent-a5), inset 0 0 0 1px var(--neutral-a4);
           box-shadow: inset 0 0 0 1px var(--accent-a5), inset 0 0 0 1px var(--neutral-a4);
 }
-.kui-TextFieldRoot:where(.kui-variant-surface):where(:has(.kui-TextFieldInput:where(:disabled,:-moz-read-only))) {
-  background-color: var(--neutral-a2);
-  box-shadow: inset 0 0 0 var(--text-field-border-width) var(--neutral-a6);
-  color: var(--neutral-a8);
-}
-.kui-TextFieldRoot:where(.kui-variant-surface):where(:has(.kui-TextFieldInput:where(:disabled,:read-only))) {
+.kui-TextFieldRoot:where(.kui-variant-surface):where(:has(.kui-TextFieldInput:disabled)) {
   background-color: var(--neutral-a2);
   -webkit-box-shadow: inset 0 0 0 var(--text-field-border-width) var(--neutral-a6);
           box-shadow: inset 0 0 0 var(--text-field-border-width) var(--neutral-a6);
   color: var(--neutral-a8);
 }
+.kui-TextFieldRoot:where(:has(.kui-TextFieldInput:-moz-read-only:not(:disabled))) {
+  background-color: transparent;
+}
+.kui-TextFieldRoot:where(:has(.kui-TextFieldInput:read-only:not(:disabled))) {
+  background-color: transparent;
+}
 .kui-TextFieldInput:where(:-moz-read-only:not(:disabled)) {
   color: var(--neutral-a11);
   -webkit-text-fill-color: var(--neutral-a11);
@@ -15018,7 +15022,10 @@
   opacity: var(--v-placeholder-opacity, 1);
 }
 @media (hover: hover) {
-  .kui-TextAreaRoot:where(.kui-variant-soft,.kui-variant-ghost,.kui-variant-outline,.kui-variant-surface):where(:hover:not(:has(.kui-TextAreaInput:where(:focus,:disabled)))) {
+  .kui-TextAreaRoot:where(.kui-variant-soft,.kui-variant-ghost,.kui-variant-outline,.kui-variant-surface):where(:hover:not(:has(.kui-TextAreaInput:where(:focus,:disabled,:-moz-read-only)))) {
+    background-color: var(--v-bg-hover);
+  }
+  .kui-TextAreaRoot:where(.kui-variant-soft,.kui-variant-ghost,.kui-variant-outline,.kui-variant-surface):where(:hover:not(:has(.kui-TextAreaInput:where(:focus,:disabled,:read-only)))) {
     background-color: var(--v-bg-hover);
   }
 }
@@ -15031,11 +15038,7 @@
   -webkit-box-shadow: inset 0 0 0 1px var(--focus-a5);
           box-shadow: inset 0 0 0 1px var(--focus-a5);
 }
-.kui-TextAreaRoot:where(.kui-variant-soft,.kui-variant-ghost,.kui-variant-outline,.kui-variant-surface):where(:has(.kui-TextAreaInput:where(:disabled,:-moz-read-only))) {
-  background-color: var(--neutral-a2);
-  background-image: linear-gradient(var(--neutral-a2), var(--neutral-a2));
-}
-.kui-TextAreaRoot:where(.kui-variant-soft,.kui-variant-ghost,.kui-variant-outline,.kui-variant-surface):where(:has(.kui-TextAreaInput:where(:disabled,:read-only))) {
+.kui-TextAreaRoot:where(.kui-variant-soft,.kui-variant-ghost,.kui-variant-outline,.kui-variant-surface):where(:has(.kui-TextAreaInput:disabled)) {
   background-color: var(--neutral-a2);
   background-image: linear-gradient(var(--neutral-a2), var(--neutral-a2));
 }
@@ -15044,15 +15047,15 @@
           box-shadow: inset 0 0 0 1px var(--v-border);
 }
 @media (hover: hover) {
-  .kui-TextAreaRoot:where(.kui-variant-outline,.kui-variant-surface):where(:hover:not(:has(.kui-TextAreaInput:where(:focus,:disabled)))) {
+  .kui-TextAreaRoot:where(.kui-variant-outline,.kui-variant-surface):where(:hover:not(:has(.kui-TextAreaInput:where(:focus,:disabled,:-moz-read-only)))) {
+    box-shadow: inset 0 0 0 1px var(--v-border-hover);
+  }
+  .kui-TextAreaRoot:where(.kui-variant-outline,.kui-variant-surface):where(:hover:not(:has(.kui-TextAreaInput:where(:focus,:disabled,:read-only)))) {
     -webkit-box-shadow: inset 0 0 0 1px var(--v-border-hover);
             box-shadow: inset 0 0 0 1px var(--v-border-hover);
   }
 }
-.kui-TextAreaRoot:where(.kui-variant-outline,.kui-variant-surface):where(:has(.kui-TextAreaInput:where(:disabled,:-moz-read-only))) {
-  box-shadow: inset 0 0 0 var(--text-area-border-width) var(--neutral-a6);
-}
-.kui-TextAreaRoot:where(.kui-variant-outline,.kui-variant-surface):where(:has(.kui-TextAreaInput:where(:disabled,:read-only))) {
+.kui-TextAreaRoot:where(.kui-variant-outline,.kui-variant-surface):where(:has(.kui-TextAreaInput:disabled)) {
   -webkit-box-shadow: inset 0 0 0 var(--text-area-border-width) var(--neutral-a6);
           box-shadow: inset 0 0 0 var(--text-area-border-width) var(--neutral-a6);
 }
@@ -15073,18 +15076,11 @@
           box-shadow: inset 0 0 0 1px var(--accent-a5), inset 0 0 0 1px var(--neutral-a4);
   background-image: none;
 }
-.kui-TextAreaRoot:where(.kui-variant-soft):where(:has(.kui-TextAreaInput:where(:disabled,:-moz-read-only))) {
-  background-color: var(--neutral-a3);
-  background-image: none;
-}
-.kui-TextAreaRoot:where(.kui-variant-soft):where(:has(.kui-TextAreaInput:where(:disabled,:read-only))) {
+.kui-TextAreaRoot:where(.kui-variant-soft):where(:has(.kui-TextAreaInput:disabled)) {
   background-color: var(--neutral-a3);
   background-image: none;
 }
-.kui-TextAreaRoot:where(.kui-variant-ghost):where(:has(.kui-TextAreaInput:where(:disabled,:-moz-read-only))) {
-  color: var(--neutral-a8);
-}
-.kui-TextAreaRoot:where(.kui-variant-ghost):where(:has(.kui-TextAreaInput:where(:disabled,:read-only))) {
+.kui-TextAreaRoot:where(.kui-variant-ghost):where(:has(.kui-TextAreaInput:disabled)) {
   color: var(--neutral-a8);
 }
 .kui-TextAreaRoot:where(.kui-variant-ghost):where(:has(.kui-TextAreaInput:where(:autofill,[data-com-onepassword-filled]):not(:disabled,:-moz-read-only))) {
@@ -15096,10 +15092,7 @@
   -webkit-box-shadow: inset 0 0 0 1px var(--accent-a5), inset 0 0 0 1px var(--neutral-a4);
           box-shadow: inset 0 0 0 1px var(--accent-a5), inset 0 0 0 1px var(--neutral-a4);
 }
-.kui-TextAreaRoot:where(.kui-variant-surface):where(:has(.kui-TextAreaInput:where(:disabled,:-moz-read-only))) {
-  color: var(--neutral-a8);
-}
-.kui-TextAreaRoot:where(.kui-variant-surface):where(:has(.kui-TextAreaInput:where(:disabled,:read-only))) {
+.kui-TextAreaRoot:where(.kui-variant-surface):where(:has(.kui-TextAreaInput:disabled)) {
   color: var(--neutral-a8);
 }
 .kui-TextAreaRoot:where(.kui-variant-surface):where(:has(.kui-TextAreaInput:where(:autofill,[data-com-onepassword-filled]):not(:disabled,:-moz-read-only))) {
@@ -15162,6 +15155,12 @@
   -webkit-box-shadow: inset 0 0 0 1px var(--field-edge-disabled);
           box-shadow: inset 0 0 0 1px var(--field-edge-disabled);
 }
+.kui-TextAreaRoot:where(:has(.kui-TextAreaInput:-moz-read-only:not(:disabled))) {
+  background-color: transparent;
+}
+.kui-TextAreaRoot:where(:has(.kui-TextAreaInput:read-only:not(:disabled))) {
+  background-color: transparent;
+}
 .kui-TextAreaInput:where(:-moz-read-only:not(:disabled)) {
   color: var(--neutral-a11);
   -webkit-text-fill-color: var(--neutral-a11);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@womp/kookie-ui",
-  "version": "0.35.4",
+  "version": "0.35.5",
   "description": "Kookie UI v1: a React component library with design tokens, flexible theming, a full layout shell, and comprehensive documentation.",
   "keywords": [
     "react",

package/src/components/text-area.css

@@ -253,7 +253,7 @@
 
   /* Hover state */
   @media (hover: hover) {
-    &:where(:hover:not(:has(.kui-TextAreaInput:where(:focus, :disabled)))) {
+    &:where(:hover:not(:has(.kui-TextAreaInput:where(:focus, :disabled, :read-only)))) {
       background-color: var(--v-bg-hover);
     }
   }
@@ -265,8 +265,8 @@
     box-shadow: inset 0 0 0 1px var(--focus-a5);
   }
 
-  /* Disabled/read-only state */
-  &:where(:has(.kui-TextAreaInput:where(:disabled, :read-only))) {
+  /* Disabled state */
+  &:where(:has(.kui-TextAreaInput:disabled)) {
     background-color: var(--neutral-a2);
     background-image: linear-gradient(var(--neutral-a2), var(--neutral-a2));
   }
@@ -279,13 +279,13 @@
 
   /* Hover state border */
   @media (hover: hover) {
-    &:where(:hover:not(:has(.kui-TextAreaInput:where(:focus, :disabled)))) {
+    &:where(:hover:not(:has(.kui-TextAreaInput:where(:focus, :disabled, :read-only)))) {
       box-shadow: inset 0 0 0 1px var(--v-border-hover);
     }
   }
 
   /* Disabled state border */
-  &:where(:has(.kui-TextAreaInput:where(:disabled, :read-only))) {
+  &:where(:has(.kui-TextAreaInput:disabled)) {
     box-shadow: inset 0 0 0 var(--text-area-border-width) var(--neutral-a6);
   }
 }
@@ -313,7 +313,7 @@
     background-image: none;
   }
 
-  &:where(:has(.kui-TextAreaInput:where(:disabled, :read-only))) {
+  &:where(:has(.kui-TextAreaInput:disabled)) {
     background-color: var(--neutral-a3);
     background-image: none;
   }
@@ -321,7 +321,7 @@
 
 /* Ghost disabled - specific color */
 .kui-TextAreaRoot:where(.kui-variant-ghost) {
-  &:where(:has(.kui-TextAreaInput:where(:disabled, :read-only))) {
+  &:where(:has(.kui-TextAreaInput:disabled)) {
     color: var(--neutral-a8);
   }
 
@@ -334,7 +334,7 @@
 
 /* Surface disabled - specific color */
 .kui-TextAreaRoot:where(.kui-variant-surface) {
-  &:where(:has(.kui-TextAreaInput:where(:disabled, :read-only))) {
+  &:where(:has(.kui-TextAreaInput:disabled)) {
     color: var(--neutral-a8);
   }
 
@@ -392,6 +392,12 @@
   }
 }
 
+/* Read-only drops the fill in every variant and keeps the edge and the value: nothing here
+   takes input, but the value is still there to select and copy. */
+.kui-TextAreaRoot:where(:has(.kui-TextAreaInput:read-only:not(:disabled))) {
+  background-color: transparent;
+}
+
 /***************************************************************************************************
  *                                                                                                 *
  * DISABLED STATES                                                                                 *

package/src/components/text-field.css

@@ -358,7 +358,7 @@
 
   /* Hover effects */
   @media (hover: hover) {
-    &:where(:hover:not(:has(.kui-TextFieldInput:where(:focus, :disabled)))) {
+    &:where(:hover:not(:has(.kui-TextFieldInput:where(:focus, :disabled, :read-only)))) {
       background-color: var(--accent-2);
       box-shadow: inset 0 0 0 1px var(--accent-7);
     }
@@ -385,7 +385,7 @@
     box-shadow: inset 0 0 0 1px var(--focus-a5);
   }
 
-  &:where(:has(.kui-TextFieldInput:where(:disabled, :read-only))) {
+  &:where(:has(.kui-TextFieldInput:disabled)) {
     /* Blend with grey */
     background-image: linear-gradient(var(--neutral-a2), var(--neutral-a2));
     box-shadow: inset 0 0 0 var(--text-field-border-width) var(--neutral-a6);
@@ -452,7 +452,7 @@
 
   /* Hover effects */
   @media (hover: hover) {
-    &:where(:hover:not(:has(.kui-TextFieldInput:where(:focus, :disabled)))) {
+    &:where(:hover:not(:has(.kui-TextFieldInput:where(:focus, :disabled, :read-only)))) {
       background-color: var(--accent-4);
     }
   }
@@ -478,7 +478,7 @@
     box-shadow: inset 0 0 0 1px var(--accent-a5), inset 0 0 0 1px var(--neutral-a4);
   }
 
-  &:where(:has(.kui-TextFieldInput:where(:disabled, :read-only))) {
+  &:where(:has(.kui-TextFieldInput:disabled)) {
     background-color: var(--neutral-a3);
   }
 }
@@ -509,7 +509,7 @@
 
   /* Hover effects */
   @media (hover: hover) {
-    &:where(:hover:not(:has(.kui-TextFieldInput:where(:focus, :disabled)))) {
+    &:where(:hover:not(:has(.kui-TextFieldInput:where(:focus, :disabled, :read-only)))) {
       background-color: var(--accent-3);
     }
   }
@@ -525,7 +525,7 @@
     box-shadow: inset 0 0 0 1px var(--accent-a5), inset 0 0 0 1px var(--neutral-a4);
   }
 
-  &:where(:has(.kui-TextFieldInput:where(:disabled, :read-only))) {
+  &:where(:has(.kui-TextFieldInput:disabled)) {
     background-color: var(--neutral-a2);
     color: var(--neutral-a8);
   }
@@ -557,7 +557,7 @@
 
   /* Hover effects */
   @media (hover: hover) {
-    &:where(:hover:not(:has(.kui-TextFieldInput:where(:focus, :disabled)))) {
+    &:where(:hover:not(:has(.kui-TextFieldInput:where(:focus, :disabled, :read-only)))) {
       background-color: var(--accent-3);
       box-shadow: inset 0 0 0 1px var(--accent-7);
     }
@@ -575,13 +575,19 @@
     box-shadow: inset 0 0 0 1px var(--accent-a5), inset 0 0 0 1px var(--neutral-a4);
   }
 
-  &:where(:has(.kui-TextFieldInput:where(:disabled, :read-only))) {
+  &:where(:has(.kui-TextFieldInput:disabled)) {
     background-color: var(--neutral-a2);
     box-shadow: inset 0 0 0 var(--text-field-border-width) var(--neutral-a6);
     color: var(--neutral-a8);
   }
 }
 
+/* Read-only drops the fill in every variant and keeps the edge and the value: nothing here
+   takes input, but the value is still there to select and copy. */
+.kui-TextFieldRoot:where(:has(.kui-TextFieldInput:read-only:not(:disabled))) {
+  background-color: transparent;
+}
+
 /* Read-only text fields: the value stays selectable, so the caret cursor stays. */
 .kui-TextFieldInput {
   &:where(:read-only:not(:disabled)) {

package/styles.css

@@ -11219,7 +11219,11 @@
           box-shadow: inset 0 0 0 1px var(--accent-6);
 }
 @media (hover: hover) {
-  .kui-TextFieldRoot:where(.kui-variant-outline):where(:hover:not(:has(.kui-TextFieldInput:where(:focus,:disabled)))) {
+  .kui-TextFieldRoot:where(.kui-variant-outline):where(:hover:not(:has(.kui-TextFieldInput:where(:focus,:disabled,:-moz-read-only)))) {
+    background-color: var(--accent-2);
+    box-shadow: inset 0 0 0 1px var(--accent-7);
+  }
+  .kui-TextFieldRoot:where(.kui-variant-outline):where(:hover:not(:has(.kui-TextFieldInput:where(:focus,:disabled,:read-only)))) {
     background-color: var(--accent-2);
     -webkit-box-shadow: inset 0 0 0 1px var(--accent-7);
             box-shadow: inset 0 0 0 1px var(--accent-7);
@@ -11255,11 +11259,7 @@
   -webkit-box-shadow: inset 0 0 0 1px var(--focus-a5);
           box-shadow: inset 0 0 0 1px var(--focus-a5);
 }
-.kui-TextFieldRoot:where(.kui-variant-outline):where(:has(.kui-TextFieldInput:where(:disabled,:-moz-read-only))) {
-  background-image: linear-gradient(var(--neutral-a2), var(--neutral-a2));
-  box-shadow: inset 0 0 0 var(--text-field-border-width) var(--neutral-a6);
-}
-.kui-TextFieldRoot:where(.kui-variant-outline):where(:has(.kui-TextFieldInput:where(:disabled,:read-only))) {
+.kui-TextFieldRoot:where(.kui-variant-outline):where(:has(.kui-TextFieldInput:disabled)) {
   background-image: linear-gradient(var(--neutral-a2), var(--neutral-a2));
   -webkit-box-shadow: inset 0 0 0 var(--text-field-border-width) var(--neutral-a6);
           box-shadow: inset 0 0 0 var(--text-field-border-width) var(--neutral-a6);
@@ -11328,7 +11328,10 @@
   background-color: var(--accent-3);
 }
 @media (hover: hover) {
-  .kui-TextFieldRoot:where(.kui-variant-soft):where(:hover:not(:has(.kui-TextFieldInput:where(:focus,:disabled)))) {
+  .kui-TextFieldRoot:where(.kui-variant-soft):where(:hover:not(:has(.kui-TextFieldInput:where(:focus,:disabled,:-moz-read-only)))) {
+    background-color: var(--accent-4);
+  }
+  .kui-TextFieldRoot:where(.kui-variant-soft):where(:hover:not(:has(.kui-TextFieldInput:where(:focus,:disabled,:read-only)))) {
     background-color: var(--accent-4);
   }
 }
@@ -11365,10 +11368,7 @@
   -webkit-box-shadow: inset 0 0 0 1px var(--accent-a5), inset 0 0 0 1px var(--neutral-a4);
           box-shadow: inset 0 0 0 1px var(--accent-a5), inset 0 0 0 1px var(--neutral-a4);
 }
-.kui-TextFieldRoot:where(.kui-variant-soft):where(:has(.kui-TextFieldInput:where(:disabled,:-moz-read-only))) {
-  background-color: var(--neutral-a3);
-}
-.kui-TextFieldRoot:where(.kui-variant-soft):where(:has(.kui-TextFieldInput:where(:disabled,:read-only))) {
+.kui-TextFieldRoot:where(.kui-variant-soft):where(:has(.kui-TextFieldInput:disabled)) {
   background-color: var(--neutral-a3);
 }
 .kui-TextFieldRoot:where(.kui-variant-ghost) {
@@ -11400,7 +11400,10 @@
   color: var(--accent-a11);
 }
 @media (hover: hover) {
-  .kui-TextFieldRoot:where(.kui-variant-ghost):where(:hover:not(:has(.kui-TextFieldInput:where(:focus,:disabled)))) {
+  .kui-TextFieldRoot:where(.kui-variant-ghost):where(:hover:not(:has(.kui-TextFieldInput:where(:focus,:disabled,:-moz-read-only)))) {
+    background-color: var(--accent-3);
+  }
+  .kui-TextFieldRoot:where(.kui-variant-ghost):where(:hover:not(:has(.kui-TextFieldInput:where(:focus,:disabled,:read-only)))) {
     background-color: var(--accent-3);
   }
 }
@@ -11416,11 +11419,7 @@
   -webkit-box-shadow: inset 0 0 0 1px var(--accent-a5), inset 0 0 0 1px var(--neutral-a4);
           box-shadow: inset 0 0 0 1px var(--accent-a5), inset 0 0 0 1px var(--neutral-a4);
 }
-.kui-TextFieldRoot:where(.kui-variant-ghost):where(:has(.kui-TextFieldInput:where(:disabled,:-moz-read-only))) {
-  background-color: var(--neutral-a2);
-  color: var(--neutral-a8);
-}
-.kui-TextFieldRoot:where(.kui-variant-ghost):where(:has(.kui-TextFieldInput:where(:disabled,:read-only))) {
+.kui-TextFieldRoot:where(.kui-variant-ghost):where(:has(.kui-TextFieldInput:disabled)) {
   background-color: var(--neutral-a2);
   color: var(--neutral-a8);
 }
@@ -11454,7 +11453,11 @@
   color: var(--accent-a11);
 }
 @media (hover: hover) {
-  .kui-TextFieldRoot:where(.kui-variant-surface):where(:hover:not(:has(.kui-TextFieldInput:where(:focus,:disabled)))) {
+  .kui-TextFieldRoot:where(.kui-variant-surface):where(:hover:not(:has(.kui-TextFieldInput:where(:focus,:disabled,:-moz-read-only)))) {
+    background-color: var(--accent-3);
+    box-shadow: inset 0 0 0 1px var(--accent-7);
+  }
+  .kui-TextFieldRoot:where(.kui-variant-surface):where(:hover:not(:has(.kui-TextFieldInput:where(:focus,:disabled,:read-only)))) {
     background-color: var(--accent-3);
     -webkit-box-shadow: inset 0 0 0 1px var(--accent-7);
             box-shadow: inset 0 0 0 1px var(--accent-7);
@@ -11474,17 +11477,18 @@
   -webkit-box-shadow: inset 0 0 0 1px var(--accent-a5), inset 0 0 0 1px var(--neutral-a4);
           box-shadow: inset 0 0 0 1px var(--accent-a5), inset 0 0 0 1px var(--neutral-a4);
 }
-.kui-TextFieldRoot:where(.kui-variant-surface):where(:has(.kui-TextFieldInput:where(:disabled,:-moz-read-only))) {
-  background-color: var(--neutral-a2);
-  box-shadow: inset 0 0 0 var(--text-field-border-width) var(--neutral-a6);
-  color: var(--neutral-a8);
-}
-.kui-TextFieldRoot:where(.kui-variant-surface):where(:has(.kui-TextFieldInput:where(:disabled,:read-only))) {
+.kui-TextFieldRoot:where(.kui-variant-surface):where(:has(.kui-TextFieldInput:disabled)) {
   background-color: var(--neutral-a2);
   -webkit-box-shadow: inset 0 0 0 var(--text-field-border-width) var(--neutral-a6);
           box-shadow: inset 0 0 0 var(--text-field-border-width) var(--neutral-a6);
   color: var(--neutral-a8);
 }
+.kui-TextFieldRoot:where(:has(.kui-TextFieldInput:-moz-read-only:not(:disabled))) {
+  background-color: transparent;
+}
+.kui-TextFieldRoot:where(:has(.kui-TextFieldInput:read-only:not(:disabled))) {
+  background-color: transparent;
+}
 .kui-TextFieldInput:where(:-moz-read-only:not(:disabled)) {
   color: var(--neutral-a11);
   -webkit-text-fill-color: var(--neutral-a11);
@@ -20164,7 +20168,10 @@
   opacity: var(--v-placeholder-opacity, 1);
 }
 @media (hover: hover) {
-  .kui-TextAreaRoot:where(.kui-variant-soft,.kui-variant-ghost,.kui-variant-outline,.kui-variant-surface):where(:hover:not(:has(.kui-TextAreaInput:where(:focus,:disabled)))) {
+  .kui-TextAreaRoot:where(.kui-variant-soft,.kui-variant-ghost,.kui-variant-outline,.kui-variant-surface):where(:hover:not(:has(.kui-TextAreaInput:where(:focus,:disabled,:-moz-read-only)))) {
+    background-color: var(--v-bg-hover);
+  }
+  .kui-TextAreaRoot:where(.kui-variant-soft,.kui-variant-ghost,.kui-variant-outline,.kui-variant-surface):where(:hover:not(:has(.kui-TextAreaInput:where(:focus,:disabled,:read-only)))) {
     background-color: var(--v-bg-hover);
   }
 }
@@ -20177,11 +20184,7 @@
   -webkit-box-shadow: inset 0 0 0 1px var(--focus-a5);
           box-shadow: inset 0 0 0 1px var(--focus-a5);
 }
-.kui-TextAreaRoot:where(.kui-variant-soft,.kui-variant-ghost,.kui-variant-outline,.kui-variant-surface):where(:has(.kui-TextAreaInput:where(:disabled,:-moz-read-only))) {
-  background-color: var(--neutral-a2);
-  background-image: linear-gradient(var(--neutral-a2), var(--neutral-a2));
-}
-.kui-TextAreaRoot:where(.kui-variant-soft,.kui-variant-ghost,.kui-variant-outline,.kui-variant-surface):where(:has(.kui-TextAreaInput:where(:disabled,:read-only))) {
+.kui-TextAreaRoot:where(.kui-variant-soft,.kui-variant-ghost,.kui-variant-outline,.kui-variant-surface):where(:has(.kui-TextAreaInput:disabled)) {
   background-color: var(--neutral-a2);
   background-image: linear-gradient(var(--neutral-a2), var(--neutral-a2));
 }
@@ -20190,15 +20193,15 @@
           box-shadow: inset 0 0 0 1px var(--v-border);
 }
 @media (hover: hover) {
-  .kui-TextAreaRoot:where(.kui-variant-outline,.kui-variant-surface):where(:hover:not(:has(.kui-TextAreaInput:where(:focus,:disabled)))) {
+  .kui-TextAreaRoot:where(.kui-variant-outline,.kui-variant-surface):where(:hover:not(:has(.kui-TextAreaInput:where(:focus,:disabled,:-moz-read-only)))) {
+    box-shadow: inset 0 0 0 1px var(--v-border-hover);
+  }
+  .kui-TextAreaRoot:where(.kui-variant-outline,.kui-variant-surface):where(:hover:not(:has(.kui-TextAreaInput:where(:focus,:disabled,:read-only)))) {
     -webkit-box-shadow: inset 0 0 0 1px var(--v-border-hover);
             box-shadow: inset 0 0 0 1px var(--v-border-hover);
   }
 }
-.kui-TextAreaRoot:where(.kui-variant-outline,.kui-variant-surface):where(:has(.kui-TextAreaInput:where(:disabled,:-moz-read-only))) {
-  box-shadow: inset 0 0 0 var(--text-area-border-width) var(--neutral-a6);
-}
-.kui-TextAreaRoot:where(.kui-variant-outline,.kui-variant-surface):where(:has(.kui-TextAreaInput:where(:disabled,:read-only))) {
+.kui-TextAreaRoot:where(.kui-variant-outline,.kui-variant-surface):where(:has(.kui-TextAreaInput:disabled)) {
   -webkit-box-shadow: inset 0 0 0 var(--text-area-border-width) var(--neutral-a6);
           box-shadow: inset 0 0 0 var(--text-area-border-width) var(--neutral-a6);
 }
@@ -20219,18 +20222,11 @@
           box-shadow: inset 0 0 0 1px var(--accent-a5), inset 0 0 0 1px var(--neutral-a4);
   background-image: none;
 }
-.kui-TextAreaRoot:where(.kui-variant-soft):where(:has(.kui-TextAreaInput:where(:disabled,:-moz-read-only))) {
-  background-color: var(--neutral-a3);
-  background-image: none;
-}
-.kui-TextAreaRoot:where(.kui-variant-soft):where(:has(.kui-TextAreaInput:where(:disabled,:read-only))) {
+.kui-TextAreaRoot:where(.kui-variant-soft):where(:has(.kui-TextAreaInput:disabled)) {
   background-color: var(--neutral-a3);
   background-image: none;
 }
-.kui-TextAreaRoot:where(.kui-variant-ghost):where(:has(.kui-TextAreaInput:where(:disabled,:-moz-read-only))) {
-  color: var(--neutral-a8);
-}
-.kui-TextAreaRoot:where(.kui-variant-ghost):where(:has(.kui-TextAreaInput:where(:disabled,:read-only))) {
+.kui-TextAreaRoot:where(.kui-variant-ghost):where(:has(.kui-TextAreaInput:disabled)) {
   color: var(--neutral-a8);
 }
 .kui-TextAreaRoot:where(.kui-variant-ghost):where(:has(.kui-TextAreaInput:where(:autofill,[data-com-onepassword-filled]):not(:disabled,:-moz-read-only))) {
@@ -20242,10 +20238,7 @@
   -webkit-box-shadow: inset 0 0 0 1px var(--accent-a5), inset 0 0 0 1px var(--neutral-a4);
           box-shadow: inset 0 0 0 1px var(--accent-a5), inset 0 0 0 1px var(--neutral-a4);
 }
-.kui-TextAreaRoot:where(.kui-variant-surface):where(:has(.kui-TextAreaInput:where(:disabled,:-moz-read-only))) {
-  color: var(--neutral-a8);
-}
-.kui-TextAreaRoot:where(.kui-variant-surface):where(:has(.kui-TextAreaInput:where(:disabled,:read-only))) {
+.kui-TextAreaRoot:where(.kui-variant-surface):where(:has(.kui-TextAreaInput:disabled)) {
   color: var(--neutral-a8);
 }
 .kui-TextAreaRoot:where(.kui-variant-surface):where(:has(.kui-TextAreaInput:where(:autofill,[data-com-onepassword-filled]):not(:disabled,:-moz-read-only))) {
@@ -20308,6 +20301,12 @@
   -webkit-box-shadow: inset 0 0 0 1px var(--field-edge-disabled);
           box-shadow: inset 0 0 0 1px var(--field-edge-disabled);
 }
+.kui-TextAreaRoot:where(:has(.kui-TextAreaInput:-moz-read-only:not(:disabled))) {
+  background-color: transparent;
+}
+.kui-TextAreaRoot:where(:has(.kui-TextAreaInput:read-only:not(:disabled))) {
+  background-color: transparent;
+}
 .kui-TextAreaInput:where(:-moz-read-only:not(:disabled)) {
   color: var(--neutral-a11);
   -webkit-text-fill-color: var(--neutral-a11);