@womp/kookie-ui 0.35.3 → 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);
@@ -10840,12 +10844,12 @@
   min-width: 0;
 }
 :where(.kui-ShellRailContent :is(.kui-SidebarContent, .kui-ShellPaneHeader, .kui-ShellPaneFooter).kui-r-size-1) :where(.kui-SidebarMenuButton, .kui-SidebarMenuSubTrigger) :where(svg) {
-  width: var(--content-icon-size-3);
-  height: var(--content-icon-size-3);
+  width: var(--icon-size-3);
+  height: var(--icon-size-3);
 }
 :where(.kui-ShellRailContent :is(.kui-SidebarContent, .kui-ShellPaneHeader, .kui-ShellPaneFooter):is(.kui-r-size-2, .kui-r-size-3)) :where(.kui-SidebarMenuButton, .kui-SidebarMenuSubTrigger) :where(svg) {
-  width: var(--content-icon-size-4);
-  height: var(--content-icon-size-4);
+  width: var(--icon-size-4);
+  height: var(--icon-size-4);
 }
 :where(.kui-ShellRailContent .kui-SidebarMenuButton > *) {
   display: -webkit-box;
@@ -11666,12 +11670,12 @@
   padding-bottom: var(--space-3) !important;
 }
 .kui-ShellRailContent.kui-r-size-1 .kui-SidebarSearchTrigger svg {
-  width: var(--content-icon-size-2);
-  height: var(--content-icon-size-2);
+  width: var(--icon-size-2);
+  height: var(--icon-size-2);
 }
 .kui-ShellRailContent:is(.kui-r-size-2, .kui-r-size-3) .kui-SidebarSearchTrigger svg {
-  width: var(--content-icon-size-3);
-  height: var(--content-icon-size-3);
+  width: var(--icon-size-3);
+  height: var(--icon-size-3);
 }
 :where(.kui-ShellRailContent) :where(.kui-SidebarSearchTrigger:where([data-state='open'])) {
   background-color: transparent !important;
@@ -11750,8 +11754,8 @@
   -ms-flex-negative: 0;
       flex-shrink: 0;
   color: var(--neutral-a9);
-  width: var(--content-icon-size-2);
-  height: var(--content-icon-size-2);
+  width: var(--icon-size-2);
+  height: var(--icon-size-2);
 }
 .kui-SidebarSearchInput {
   -webkit-box-flex: 1;
@@ -11813,16 +11817,16 @@
   line-height: var(--line-height-1);
 }
 .kui-SidebarSearch.kui-r-size-1 .kui-SidebarSearchIcon {
-  width: var(--content-icon-size-1);
-  height: var(--content-icon-size-1);
+  width: var(--icon-size-1);
+  height: var(--icon-size-1);
 }
 .kui-SidebarSearch.kui-r-size-3 .kui-SidebarSearchInput {
   font-size: var(--font-size-3);
   line-height: var(--line-height-3);
 }
 .kui-SidebarSearch.kui-r-size-3 .kui-SidebarSearchIcon {
-  width: var(--content-icon-size-3);
-  height: var(--content-icon-size-3);
+  width: var(--icon-size-3);
+  height: var(--icon-size-3);
 }
 @media (prefers-contrast: more) {
   :where(.kui-ShellRailContent :is(.kui-SidebarMenuButton[data-active], .kui-SidebarMenuButton[data-highlighted]:not([data-disabled]))) .kui-SidebarMenuIconWrapper {
@@ -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))) {
+.kui-TextAreaRoot:where(.kui-variant-soft):where(:has(.kui-TextAreaInput:disabled)) {
   background-color: var(--neutral-a3);
   background-image: none;
 }
-.kui-TextAreaRoot:where(.kui-variant-soft):where(:has(.kui-TextAreaInput:where(:disabled,:read-only))) {
-  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);
@@ -16658,28 +16657,28 @@
   --notice-radius: var(--radius-surface-1);
   --notice-line: var(--line-height-1);
   --notice-control: var(--control-height-1);
-  --notice-icon-size: var(--content-icon-size-1);
+  --notice-icon-size: var(--icon-size-1);
 }
 .kui-NoticeRoot:where(.kui-r-size-2) {
   --notice-padding: var(--surface-p-2);
   --notice-radius: var(--radius-surface-2);
   --notice-line: var(--line-height-2);
   --notice-control: var(--control-height-2);
-  --notice-icon-size: var(--content-icon-size-2);
+  --notice-icon-size: var(--icon-size-2);
 }
 .kui-NoticeRoot:where(.kui-r-size-3) {
   --notice-padding: var(--surface-p-3);
   --notice-radius: var(--radius-surface-3);
   --notice-line: var(--line-height-3);
   --notice-control: var(--control-height-3);
-  --notice-icon-size: var(--content-icon-size-3);
+  --notice-icon-size: var(--icon-size-3);
 }
 .kui-NoticeRoot:where(.kui-r-size-4) {
   --notice-padding: var(--surface-p-4);
   --notice-radius: var(--radius-surface-4);
   --notice-line: var(--line-height-4);
   --notice-control: var(--control-height-4);
-  --notice-icon-size: var(--content-icon-size-4);
+  --notice-icon-size: var(--icon-size-4);
 }
 .kui-theme:where([data-is-root-theme='true']) {
   position: relative;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@womp/kookie-ui",
-  "version": "0.35.3",
+  "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/notice.css

@@ -76,27 +76,27 @@
     --notice-radius: var(--radius-surface-1);
     --notice-line: var(--line-height-1);
     --notice-control: var(--control-height-1);
-    --notice-icon-size: var(--content-icon-size-1);
+    --notice-icon-size: var(--icon-size-1);
   }
   &:where(.kui-r-size-2) {
     --notice-padding: var(--surface-p-2);
     --notice-radius: var(--radius-surface-2);
     --notice-line: var(--line-height-2);
     --notice-control: var(--control-height-2);
-    --notice-icon-size: var(--content-icon-size-2);
+    --notice-icon-size: var(--icon-size-2);
   }
   &:where(.kui-r-size-3) {
     --notice-padding: var(--surface-p-3);
     --notice-radius: var(--radius-surface-3);
     --notice-line: var(--line-height-3);
     --notice-control: var(--control-height-3);
-    --notice-icon-size: var(--content-icon-size-3);
+    --notice-icon-size: var(--icon-size-3);
   }
   &:where(.kui-r-size-4) {
     --notice-padding: var(--surface-p-4);
     --notice-radius: var(--radius-surface-4);
     --notice-line: var(--line-height-4);
     --notice-control: var(--control-height-4);
-    --notice-icon-size: var(--content-icon-size-4);
+    --notice-icon-size: var(--icon-size-4);
   }
 }

package/src/components/sidebar.css

@@ -79,14 +79,14 @@
 /* Icon size: the one line that differs by size */
 /* stylelint-disable-next-line selector-max-type */
 :where(.kui-ShellRailContent :is(.kui-SidebarContent, .kui-ShellPaneHeader, .kui-ShellPaneFooter).kui-r-size-1) :where(.kui-SidebarMenuButton, .kui-SidebarMenuSubTrigger) :where(svg) {
-  width: var(--content-icon-size-3);
-  height: var(--content-icon-size-3);
+  width: var(--icon-size-3);
+  height: var(--icon-size-3);
 }
 
 /* stylelint-disable-next-line selector-max-type */
 :where(.kui-ShellRailContent :is(.kui-SidebarContent, .kui-ShellPaneHeader, .kui-ShellPaneFooter):is(.kui-r-size-2, .kui-r-size-3)) :where(.kui-SidebarMenuButton, .kui-SidebarMenuSubTrigger) :where(svg) {
-  width: var(--content-icon-size-4);
-  height: var(--content-icon-size-4);
+  width: var(--icon-size-4);
+  height: var(--icon-size-4);
 }
 
 /* Ellipsis on root child content when using asChild (e.g., Next.js Link) */
@@ -619,14 +619,14 @@
 /* Matches the effective icon size of other menu buttons (expanded-mode rules win on specificity) */
 /* stylelint-disable-next-line selector-max-type, selector-max-specificity */
 .kui-ShellRailContent.kui-r-size-1 .kui-SidebarSearchTrigger svg {
-  width: var(--content-icon-size-2);
-  height: var(--content-icon-size-2);
+  width: var(--icon-size-2);
+  height: var(--icon-size-2);
 }
 
 /* stylelint-disable-next-line selector-max-type, selector-max-specificity */
 .kui-ShellRailContent:is(.kui-r-size-2, .kui-r-size-3) .kui-SidebarSearchTrigger svg {
-  width: var(--content-icon-size-3);
-  height: var(--content-icon-size-3);
+  width: var(--icon-size-3);
+  height: var(--icon-size-3);
 }
 
 /* Remove hover background from thin trigger button itself (styles live on icon wrapper) */
@@ -733,8 +733,8 @@
 .kui-SidebarSearchIcon {
   flex-shrink: 0;
   color: var(--neutral-a9);
-  width: var(--content-icon-size-2);
-  height: var(--content-icon-size-2);
+  width: var(--icon-size-2);
+  height: var(--icon-size-2);
 }
 
 /* Search input */
@@ -789,8 +789,8 @@
 
 /* stylelint-disable-next-line selector-max-specificity */
 .kui-SidebarSearch.kui-r-size-1 .kui-SidebarSearchIcon {
-  width: var(--content-icon-size-1);
-  height: var(--content-icon-size-1);
+  width: var(--icon-size-1);
+  height: var(--icon-size-1);
 }
 
 /* stylelint-disable-next-line selector-max-specificity */
@@ -801,8 +801,8 @@
 
 /* stylelint-disable-next-line selector-max-specificity */
 .kui-SidebarSearch.kui-r-size-3 .kui-SidebarSearchIcon {
-  width: var(--content-icon-size-3);
-  height: var(--content-icon-size-3);
+  width: var(--icon-size-3);
+  height: var(--icon-size-3);
 }
 
 /* In a Rail the fill is the icon tile, not the row. Under more contrast the tile goes solid and its icon

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/src/styles/tokens/constants.css

@@ -28,11 +28,11 @@
   --trigger-icon-size-3: 11px;
   --trigger-icon-size-4: 12px;
 
-  /* Content icon size constants (for buttons, menu items) */
-  --content-icon-size-1: calc(var(--space-6) * 0.55);
-  --content-icon-size-2: calc(var(--space-7) * 0.525);
-  --content-icon-size-3: calc(var(--space-8) * 0.5125);
-  --content-icon-size-4: calc(var(--space-9) * 0.5);
+  /* Older names for the icon sizes, kept for apps that read them */
+  --content-icon-size-1: var(--icon-size-1);
+  --content-icon-size-2: var(--icon-size-2);
+  --content-icon-size-3: var(--icon-size-3);
+  --content-icon-size-4: var(--icon-size-4);
 
   /* Indicator icon size constants (for checkboxes, radio, sub-triggers) */
   --indicator-icon-size-1: calc(9px * var(--scale));

package/styles.css

@@ -3326,10 +3326,10 @@
   --trigger-icon-size-2: 11px;
   --trigger-icon-size-3: 11px;
   --trigger-icon-size-4: 12px;
-  --content-icon-size-1: calc(var(--space-6) * 0.55);
-  --content-icon-size-2: calc(var(--space-7) * 0.525);
-  --content-icon-size-3: calc(var(--space-8) * 0.5125);
-  --content-icon-size-4: calc(var(--space-9) * 0.5);
+  --content-icon-size-1: var(--icon-size-1);
+  --content-icon-size-2: var(--icon-size-2);
+  --content-icon-size-3: var(--icon-size-3);
+  --content-icon-size-4: var(--icon-size-4);
   --indicator-icon-size-1: calc(9px * var(--scale));
   --indicator-icon-size-2: calc(10px * var(--scale));
   --indicator-icon-size-3: calc(12px * var(--scale));
@@ -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);
@@ -15986,12 +15990,12 @@
   min-width: 0;
 }
 :where(.kui-ShellRailContent :is(.kui-SidebarContent, .kui-ShellPaneHeader, .kui-ShellPaneFooter).kui-r-size-1) :where(.kui-SidebarMenuButton, .kui-SidebarMenuSubTrigger) :where(svg) {
-  width: var(--content-icon-size-3);
-  height: var(--content-icon-size-3);
+  width: var(--icon-size-3);
+  height: var(--icon-size-3);
 }
 :where(.kui-ShellRailContent :is(.kui-SidebarContent, .kui-ShellPaneHeader, .kui-ShellPaneFooter):is(.kui-r-size-2, .kui-r-size-3)) :where(.kui-SidebarMenuButton, .kui-SidebarMenuSubTrigger) :where(svg) {
-  width: var(--content-icon-size-4);
-  height: var(--content-icon-size-4);
+  width: var(--icon-size-4);
+  height: var(--icon-size-4);
 }
 :where(.kui-ShellRailContent .kui-SidebarMenuButton > *) {
   display: -webkit-box;
@@ -16812,12 +16816,12 @@
   padding-bottom: var(--space-3) !important;
 }
 .kui-ShellRailContent.kui-r-size-1 .kui-SidebarSearchTrigger svg {
-  width: var(--content-icon-size-2);
-  height: var(--content-icon-size-2);
+  width: var(--icon-size-2);
+  height: var(--icon-size-2);
 }
 .kui-ShellRailContent:is(.kui-r-size-2, .kui-r-size-3) .kui-SidebarSearchTrigger svg {
-  width: var(--content-icon-size-3);
-  height: var(--content-icon-size-3);
+  width: var(--icon-size-3);
+  height: var(--icon-size-3);
 }
 :where(.kui-ShellRailContent) :where(.kui-SidebarSearchTrigger:where([data-state='open'])) {
   background-color: transparent !important;
@@ -16896,8 +16900,8 @@
   -ms-flex-negative: 0;
       flex-shrink: 0;
   color: var(--neutral-a9);
-  width: var(--content-icon-size-2);
-  height: var(--content-icon-size-2);
+  width: var(--icon-size-2);
+  height: var(--icon-size-2);
 }
 .kui-SidebarSearchInput {
   -webkit-box-flex: 1;
@@ -16959,16 +16963,16 @@
   line-height: var(--line-height-1);
 }
 .kui-SidebarSearch.kui-r-size-1 .kui-SidebarSearchIcon {
-  width: var(--content-icon-size-1);
-  height: var(--content-icon-size-1);
+  width: var(--icon-size-1);
+  height: var(--icon-size-1);
 }
 .kui-SidebarSearch.kui-r-size-3 .kui-SidebarSearchInput {
   font-size: var(--font-size-3);
   line-height: var(--line-height-3);
 }
 .kui-SidebarSearch.kui-r-size-3 .kui-SidebarSearchIcon {
-  width: var(--content-icon-size-3);
-  height: var(--content-icon-size-3);
+  width: var(--icon-size-3);
+  height: var(--icon-size-3);
 }
 @media (prefers-contrast: more) {
   :where(.kui-ShellRailContent :is(.kui-SidebarMenuButton[data-active], .kui-SidebarMenuButton[data-highlighted]:not([data-disabled]))) .kui-SidebarMenuIconWrapper {
@@ -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))) {
+.kui-TextAreaRoot:where(.kui-variant-soft):where(:has(.kui-TextAreaInput:disabled)) {
   background-color: var(--neutral-a3);
   background-image: none;
 }
-.kui-TextAreaRoot:where(.kui-variant-soft):where(:has(.kui-TextAreaInput:where(:disabled,:read-only))) {
-  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);
@@ -21804,28 +21803,28 @@
   --notice-radius: var(--radius-surface-1);
   --notice-line: var(--line-height-1);
   --notice-control: var(--control-height-1);
-  --notice-icon-size: var(--content-icon-size-1);
+  --notice-icon-size: var(--icon-size-1);
 }
 .kui-NoticeRoot:where(.kui-r-size-2) {
   --notice-padding: var(--surface-p-2);
   --notice-radius: var(--radius-surface-2);
   --notice-line: var(--line-height-2);
   --notice-control: var(--control-height-2);
-  --notice-icon-size: var(--content-icon-size-2);
+  --notice-icon-size: var(--icon-size-2);
 }
 .kui-NoticeRoot:where(.kui-r-size-3) {
   --notice-padding: var(--surface-p-3);
   --notice-radius: var(--radius-surface-3);
   --notice-line: var(--line-height-3);
   --notice-control: var(--control-height-3);
-  --notice-icon-size: var(--content-icon-size-3);
+  --notice-icon-size: var(--icon-size-3);
 }
 .kui-NoticeRoot:where(.kui-r-size-4) {
   --notice-padding: var(--surface-p-4);
   --notice-radius: var(--radius-surface-4);
   --notice-line: var(--line-height-4);
   --notice-control: var(--control-height-4);
-  --notice-icon-size: var(--content-icon-size-4);
+  --notice-icon-size: var(--icon-size-4);
 }
 .kui-theme:where([data-is-root-theme='true']) {
   position: relative;

package/tokens.css

@@ -3326,10 +3326,10 @@
   --trigger-icon-size-2: 11px;
   --trigger-icon-size-3: 11px;
   --trigger-icon-size-4: 12px;
-  --content-icon-size-1: calc(var(--space-6) * 0.55);
-  --content-icon-size-2: calc(var(--space-7) * 0.525);
-  --content-icon-size-3: calc(var(--space-8) * 0.5125);
-  --content-icon-size-4: calc(var(--space-9) * 0.5);
+  --content-icon-size-1: var(--icon-size-1);
+  --content-icon-size-2: var(--icon-size-2);
+  --content-icon-size-3: var(--icon-size-3);
+  --content-icon-size-4: var(--icon-size-4);
   --indicator-icon-size-1: calc(9px * var(--scale));
   --indicator-icon-size-2: calc(10px * var(--scale));
   --indicator-icon-size-3: calc(12px * var(--scale));