@womp/kookie-ui 0.25.1 → 0.26.0

package/styles.css

@@ -3378,6 +3378,19 @@
   --color-overlay: var(--black-a6);
   --color-surface: white;
   --color-ground: var(--neutral-1, var(--gray-1));
+  --field-fill: var(--color-surface);
+  --field-fill-hover: var(--neutral-2);
+  --field-fill-disabled: var(--neutral-2);
+  --field-edge: var(--neutral-a3);
+  --field-edge-disabled: var(--neutral-a2);
+  --color-track: var(--neutral-4);
+  --color-track-hover: var(--neutral-5);
+  --color-track-active: var(--neutral-6);
+  --color-thumb: var(--color-surface);
+  --color-mark: var(--neutral-4);
+  --color-mark-hover: var(--neutral-5);
+  --color-mark-active: var(--neutral-6);
+  --color-mark-edge: var(--neutral-a7);
   --color-text: var(--neutral-12);
   --neutral-1: var(--gray-1);
   --neutral-2: var(--gray-2);
@@ -3413,12 +3426,19 @@
   --solid-gray-hover-filter: contrast(0.88) saturate(1.1) brightness(1.1);
   --solid-gray-active-filter: brightness(0.92);
   --solid-gray-open-filter: brightness(0.96);
-  --shadow-1: 0 0 0 0.25px var(--neutral-a6), inset 0 1px 1px 0 var(--black-a2);
-  --shadow-2: 0 0 0 0.25px var(--neutral-a3), 0 1px 3px 0 var(--black-a2), 0 1px 2px -1px var(--black-a2);
-  --shadow-3: 0 0 0 0.25px var(--neutral-a6), 0 4px 6px -1px var(--black-a2), 0 2px 4px -2px var(--black-a2);
-  --shadow-4: 0 0 0 0.5px var(--neutral-a6), 0 10px 15px -3px var(--black-a3), 0 4px 6px -4px var(--black-a3);
-  --shadow-5: 0 0 0 0.5px var(--neutral-a6), 0 20px 25px -5px var(--black-a3), 0 8px 10px -6px var(--black-a3);
-  --shadow-6: 0 0 0 0.5px var(--neutral-a6), 0 25px 50px -12px var(--black-a5);
+  --shadow-1: inset 0 1px 1px rgb(0 0 0 / 0.12), inset 0 2px 4px rgb(0 0 0 / 0.06);
+  --shadow-2: 0 1px 2px rgb(0 0 0 / 0.1), 0 5px 14px -4px rgb(0 0 0 / 0.1), 0 12px 30px -8px rgb(0 0 0 / 0.09);
+  --shadow-3: 0 1px 2px rgb(0 0 0 / 0.1), 0 8px 22px -6px rgb(0 0 0 / 0.1), 0 18px 48px -14px rgb(0 0 0 / 0.09);
+  --shadow-4: 0 1px 2px rgb(0 0 0 / 0.1), 0 24px 64px -12px rgb(0 0 0 / 0.11);
+  --shadow-5: 0 1px 2px rgb(0 0 0 / 0.1), 0 12px 32px -8px rgb(0 0 0 / 0.11), 0 32px 80px -16px rgb(0 0 0 / 0.1);
+  --shadow-6: 0 1px 2px rgb(0 0 0 / 0.1), 0 16px 40px -10px rgb(0 0 0 / 0.12), 0 40px 100px -20px rgb(0 0 0 / 0.12);
+  --surface-chrome: var(--shadow-4);
+  --control-chrome: inset 0 0 0 1px rgb(0 0 0 / 0.08), 0 1px 2px rgb(0 0 0 / 0.04), 0 4px 14px -4px rgb(0 0 0 / 0.08);
+  --control-chrome-active: inset 0 0 0 1px rgb(0 0 0 / 0.1), 0 1px 1px rgb(0 0 0 / 0.04);
+  --control-light: none;
+  --grip-chrome: 0 1px 2px rgb(0 0 0 / 0.16), 0 2px 6px -1px rgb(0 0 0 / 0.18);
+  --floating-chrome: var(--shadow-3);
+  --dialog-chrome: var(--surface-chrome);
   --avatar-image-hover-filter: brightness(0.95) saturate(1.05);
   --avatar-image-active-filter: brightness(0.9) saturate(1.1);
   --segmented-control-indicator-background-color: var(--color-page);
@@ -3459,18 +3479,30 @@
   --color-overlay: var(--black-a8);
   --color-surface: var(--neutral-2, var(--gray-2));
   --color-ground: var(--neutral-1, var(--gray-1));
+  --field-edge: var(--neutral-a4);
+  --color-thumb: var(--neutral-12, var(--gray-12));
+  --color-mark: var(--neutral-5, var(--gray-5));
+  --color-mark-hover: var(--neutral-6, var(--gray-6));
+  --color-mark-active: var(--neutral-7, var(--gray-7));
   --solid-chroma-hover-filter: none;
   --solid-chroma-active-filter: brightness(0.88) contrast(1.03);
   --solid-chroma-open-filter: brightness(0.95) contrast(1.02);
   --solid-gray-hover-filter: contrast(0.88) saturate(1.3) brightness(1.18);
   --solid-gray-active-filter: brightness(0.9);
   --solid-gray-open-filter: brightness(0.95);
-  --shadow-1: inset 0 0 0 0.5px var(--neutral-a6), inset 0 1px 1px 0 var(--black-a3);
-  --shadow-2: 0 0 0 0.5px var(--neutral-a6), 0 1px 3px 0 var(--black-a3), 0 1px 2px -1px var(--black-a3);
-  --shadow-3: 0 0 0 0.5px var(--neutral-a6), 0 4px 6px -1px var(--black-a3), 0 2px 4px -2px var(--black-a3);
-  --shadow-4: 0 0 0 0.5px var(--neutral-a6), 0 10px 15px -3px var(--black-a3), 0 4px 6px -4px var(--black-a3);
-  --shadow-5: 0 0 0 0.5px var(--neutral-a6), 0 20px 25px -5px var(--black-a3), 0 8px 10px -6px var(--black-a3);
-  --shadow-6: 0 0 0 0.5px var(--neutral-a6), 0 25px 50px -12px var(--black-a5);
+  --shadow-1: inset 0 1px 1px rgb(0 0 0 / 0.5), inset 0 2px 4px rgb(0 0 0 / 0.25);
+  --shadow-2: 0 1px 2px rgb(0 0 0 / 0.4), 0 5px 14px -4px rgb(0 0 0 / 0.36), 0 12px 30px -8px rgb(0 0 0 / 0.3);
+  --shadow-3: 0 1px 2px rgb(0 0 0 / 0.4), 0 8px 22px -6px rgb(0 0 0 / 0.36), 0 18px 48px -14px rgb(0 0 0 / 0.3);
+  --shadow-4: 0 1px 2px rgb(0 0 0 / 0.4), 0 24px 64px -12px rgb(0 0 0 / 0.45);
+  --shadow-5: 0 1px 2px rgb(0 0 0 / 0.4), 0 12px 32px -8px rgb(0 0 0 / 0.4), 0 32px 80px -16px rgb(0 0 0 / 0.34);
+  --shadow-6: 0 1px 2px rgb(0 0 0 / 0.4), 0 16px 40px -10px rgb(0 0 0 / 0.45), 0 40px 100px -20px rgb(0 0 0 / 0.4);
+  --surface-chrome: var(--shadow-4);
+  --control-chrome: inset 0 0 0 1px rgb(255 255 255 / 0.08), 0 1px 2px rgb(0 0 0 / 0.35), 0 4px 14px -4px rgb(0 0 0 / 0.45);
+  --control-chrome-active: inset 0 0 0 1px rgb(255 255 255 / 0.1), 0 1px 1px rgb(0 0 0 / 0.4);
+  --control-light: none;
+  --grip-chrome: 0 1px 2px rgb(0 0 0 / 0.5), 0 2px 6px -1px rgb(0 0 0 / 0.4);
+  --floating-chrome: inset 0 1px 0 rgb(255 255 255 / 0.05), var(--shadow-3);
+  --dialog-chrome: var(--surface-chrome);
   --avatar-image-hover-filter: brightness(1.05) saturate(1.05);
   --avatar-image-active-filter: brightness(1.1) saturate(1.1);
 }
@@ -3499,7 +3531,7 @@
   --accent-solid-selection: var(--accent-7);
   --accent-solid-selection-contrast: var(--accent-12);
   --accent-solid-indicator: var(--accent-indicator);
-  --accent-solid-thumb: white;
+  --accent-solid-thumb: var(--color-thumb);
   --accent-solid-badge: var(--accent-12);
   --accent-solid-badge-contrast: var(--accent-1);
   --accent-solid-hover-filter: var(--solid-chroma-hover-filter);
@@ -4912,27 +4944,6 @@
 :where(.kui-SurfaceNest) .kui-SurfaceNest {
   --kui-sf-r: min(var(--kui-nest, var(--kui-sf-radius, var(--radius-surface-2))), var(--kui-sf-radius, var(--radius-surface-2)));
 }
-@supports (color: color-mix(in oklab, white, black)) {
-  :where(.kui-theme) {
-    --shadow-1: 0 0 0 0.25px var(--neutral-a6), inset 0 1px 1px 0 var(--black-a2);
-    --shadow-2: 0 0 0 0.25px var(--neutral-a3), 0 1px 3px 0 var(--black-a2), 0 1px 2px -1px var(--black-a2);
-    --shadow-3: 0 0 0 0.25px var(--neutral-a6), 0 4px 6px -1px var(--black-a2), 0 2px 4px -2px var(--black-a2);
-    --shadow-4: 0 0 0 0.5px var(--neutral-a6), 0 10px 15px -3px var(--black-a3), 0 4px 6px -4px var(--black-a3);
-    --shadow-5: 0 0 0 0.5px var(--neutral-a6), 0 20px 25px -5px var(--black-a3), 0 8px 10px -6px var(--black-a3);
-    --shadow-6: 0 0 0 0.5px var(--neutral-a6), 0 25px 50px -12px var(--black-a5);
-  }
-}
-@supports (color: color-mix(in oklab, white, black)) {
-  :is(.dark, .dark-theme),
-  :is(.dark, .dark-theme) :where(.kui-theme:not(.light, .light-theme)) {
-    --shadow-1: inset 0 0 0 0.5px var(--neutral-a6), inset 0 1px 1px 0 var(--black-a3);
-    --shadow-2: 0 0 0 0.5px var(--neutral-a6), 0 1px 3px 0 var(--black-a3), 0 1px 2px -1px var(--black-a3);
-    --shadow-3: 0 0 0 0.5px var(--neutral-a6), 0 4px 6px -1px var(--black-a3), 0 2px 4px -2px var(--black-a3);
-    --shadow-4: 0 0 0 0.5px var(--neutral-a6), 0 10px 15px -3px var(--black-a3), 0 4px 6px -4px var(--black-a3);
-    --shadow-5: 0 0 0 0.5px var(--neutral-a6), 0 20px 25px -5px var(--black-a3), 0 8px 10px -6px var(--black-a3);
-    --shadow-6: 0 0 0 0.5px var(--neutral-a6), 0 25px 50px -12px var(--black-a5);
-  }
-}
 [data-font-family='sans'] {
   --font-body: var(--font-sans);
 }
@@ -5761,8 +5772,8 @@
 }
 :where(.kui-AccordionRoot:where(.kui-variant-raised)) {
   background-color: var(--color-surface);
-  -webkit-box-shadow: var(--shadow-2);
-          box-shadow: var(--shadow-2);
+  -webkit-box-shadow: var(--surface-chrome);
+          box-shadow: var(--surface-chrome);
 }
 :where(.kui-AccordionRoot:where(.kui-variant-soft)) {
   background-color: var(--accent-2);
@@ -6048,8 +6059,8 @@
 @media (hover: hover) {
   :where(.kui-AccordionRoot:where(.kui-variant-raised):hover) {
     background-color: var(--accent-2);
-    -webkit-box-shadow: var(--shadow-2);
-            box-shadow: var(--shadow-2);
+    -webkit-box-shadow: var(--surface-chrome);
+            box-shadow: var(--surface-chrome);
   }
 }
 @media (hover: hover) {
@@ -6335,8 +6346,8 @@
   --kui-sf-p: var(--dialog-content-padding);
   box-sizing: border-box;
   background-color: var(--color-surface);
-  -webkit-box-shadow: var(--shadow-6);
-          box-shadow: var(--shadow-6);
+  -webkit-box-shadow: var(--dialog-chrome);
+          box-shadow: var(--dialog-chrome);
   outline: none;
 }
 .kui-BaseDialogContent:where(.kui-r-size-1) {
@@ -7267,8 +7278,8 @@
   top: 0;
   color: var(--accent-ink);
   background-color: var(--color-surface);
-  -webkit-box-shadow: var(--shadow-2);
-          box-shadow: var(--shadow-2);
+  -webkit-box-shadow: var(--control-chrome);
+          box-shadow: var(--control-chrome);
 }
 .kui-AvatarRoot:where(.kui-variant-raised):where([data-disabled]) :where(.kui-AvatarFallback) {
   color: var(--neutral-a8);
@@ -7280,8 +7291,8 @@
 @media (hover: hover) {
   .kui-AvatarRoot:where(button,a,[role='button']):where(.kui-variant-raised):where(:hover:not(:disabled,[data-disabled])) {
     background-color: var(--neutral-2);
-    -webkit-box-shadow: var(--shadow-2);
-            box-shadow: var(--shadow-2);
+    -webkit-box-shadow: var(--control-chrome);
+            box-shadow: var(--control-chrome);
   }
   .kui-AvatarRoot:where(button,a,[role='button']):where(.kui-variant-raised):where(:hover:not(:disabled,[data-disabled])) :where(.kui-AvatarFallback) {
     background-color: inherit;
@@ -7689,8 +7700,8 @@
   position: relative;
   top: var(--raised-elevation-offset);
   color: var(--accent-ink);
-  -webkit-box-shadow: var(--shadow-2);
-          box-shadow: var(--shadow-2);
+  -webkit-box-shadow: var(--control-chrome);
+          box-shadow: var(--control-chrome);
   --raised-surface: var(--color-surface);
   background-color: var(--raised-surface);
 }
@@ -8015,7 +8026,7 @@
   --v-bg-active-a: var(--accent-a5);
   --v-bg-pressed: var(--accent-5);
   --v-bg-pressed-a: var(--accent-a5);
-  --v-shadow-hover: var(--shadow-2);
+  --v-shadow-hover: var(--control-chrome);
 }
 .kui-BaseButton:where(.kui-variant-ghost) {
   --v-color: var(--accent-ink);
@@ -8125,20 +8136,21 @@
   position: relative;
   color: var(--accent-ink);
   background-color: var(--color-surface);
-  -webkit-box-shadow: var(--shadow-2);
-          box-shadow: var(--shadow-2);
+  background-image: var(--control-light);
+  -webkit-box-shadow: var(--control-chrome);
+          box-shadow: var(--control-chrome);
 }
 @media (hover: hover) {
   .kui-BaseButton:where(.kui-variant-raised):where(:hover:not([data-disabled],[aria-disabled='true'])) {
     background-color: var(--neutral-2);
-    -webkit-box-shadow: var(--shadow-2);
-            box-shadow: var(--shadow-2);
+    -webkit-box-shadow: var(--control-chrome);
+            box-shadow: var(--control-chrome);
   }
 }
 .kui-BaseButton:where(.kui-variant-raised):where([data-state='open']),.kui-BaseButton:where(.kui-variant-raised):where(:active:not([data-state='open'],[data-disabled],[aria-disabled='true'])),.kui-BaseButton:where(.kui-variant-raised):where([data-state='on']:not([data-disabled],[aria-disabled='true'])) {
   background-color: var(--neutral-3);
-  -webkit-box-shadow: var(--shadow-1);
-          box-shadow: var(--shadow-1);
+  -webkit-box-shadow: var(--control-chrome-active);
+          box-shadow: var(--control-chrome-active);
 }
 @media (pointer: coarse) {
   .kui-BaseButton:where(.kui-variant-raised):where(:active:not([data-state='open'],[data-disabled],[aria-disabled='true'])) {
@@ -8149,21 +8161,25 @@
 .kui-BaseButton:where(.kui-variant-raised):where([data-disabled],[aria-disabled='true']) {
   color: var(--neutral-a8);
   background-color: var(--neutral-a3);
+  background-image: none;
   -webkit-box-shadow: none;
           box-shadow: none;
   top: 0;
 }
 .kui-BaseButton:where(.kui-variant-solid) {
   background-color: var(--accent-solid);
+  background-image: var(--control-light);
   color: var(--accent-solid-contrast);
+  -webkit-box-shadow: var(--control-chrome);
+          box-shadow: var(--control-chrome);
 }
 @media (hover: hover) {
   .kui-BaseButton:where(.kui-variant-solid):where(:hover:not([data-disabled],[aria-disabled='true'])) {
     background-color: var(--accent-solid-hover);
     -webkit-filter: var(--accent-solid-hover-filter);
             filter: var(--accent-solid-hover-filter);
-    -webkit-box-shadow: var(--shadow-2);
-            box-shadow: var(--shadow-2);
+    -webkit-box-shadow: var(--control-chrome);
+            box-shadow: var(--control-chrome);
   }
 }
 .kui-BaseButton:where(.kui-variant-solid):where([data-state='open']) {
@@ -8175,6 +8191,8 @@
   background-color: var(--accent-solid-active);
   -webkit-filter: var(--accent-solid-active-filter);
           filter: var(--accent-solid-active-filter);
+  -webkit-box-shadow: var(--control-chrome-active);
+          box-shadow: var(--control-chrome-active);
 }
 .kui-BaseButton:where(.kui-variant-solid):where([data-state='on']) {
   background-color: var(--accent-solid-hover);
@@ -8189,6 +8207,7 @@
 .kui-BaseButton:where(.kui-variant-solid):where([data-disabled],[aria-disabled='true']) {
   color: var(--neutral-a8);
   background-color: var(--neutral-a3);
+  background-image: none;
   -webkit-box-shadow: none;
           box-shadow: none;
   -webkit-filter: none;
@@ -8748,8 +8767,8 @@
   --card-background-color: var(--color-surface);
   position: relative;
   top: var(--raised-elevation-offset);
-  -webkit-box-shadow: var(--shadow-2);
-          box-shadow: var(--shadow-2);
+  -webkit-box-shadow: var(--surface-chrome);
+          box-shadow: var(--surface-chrome);
 }
 .kui-BaseCard:where(.kui-variant-raised)::before {
   background-color: var(--card-background-color);
@@ -8764,11 +8783,11 @@
 }
 @media (hover: hover) {
   .kui-BaseCard:where(.kui-variant-raised):where(:-moz-any-link,button,label):where(:hover) {
-    box-shadow: var(--shadow-2);
+    box-shadow: var(--surface-chrome);
   }
   .kui-BaseCard:where(.kui-variant-raised):where(:any-link,button,label):where(:hover) {
-    -webkit-box-shadow: var(--shadow-2);
-            box-shadow: var(--shadow-2);
+    -webkit-box-shadow: var(--surface-chrome);
+            box-shadow: var(--surface-chrome);
   }
   .kui-BaseCard:where(.kui-variant-raised):where(:-moz-any-link,button,label):where(:hover)::before {
     background-color: var(--neutral-2);
@@ -8910,10 +8929,11 @@
   --checkbox-radius-ratio-max: 0.4;
   --checkbox-radius-max: calc(var(--checkbox-size) * var(--checkbox-radius-ratio-max));
   isolation: isolate;
-  --checkbox-unchecked-hover: var(--accent-a2);
-  --checkbox-unchecked-active: var(--accent-a3);
-  --checkbox-checked-hover: var(--accent-4);
-  --checkbox-checked-active: var(--accent-5);
+  --checkbox-fill: var(--color-mark);
+  --checkbox-fill-hover: var(--color-mark-hover);
+  --checkbox-fill-active: var(--color-mark-active);
+  --checkbox-edge: var(--color-mark-edge);
+  --checkbox-glyph: var(--accent-solid-contrast);
 }
 .kui-BaseCheckboxRoot::before {
   content: '';
@@ -8921,6 +8941,9 @@
   height: var(--checkbox-size);
   width: var(--checkbox-size);
   border-radius: var(--checkbox-border-radius);
+  background-color: var(--checkbox-fill);
+  -webkit-box-shadow: inset 0 0 0 1px var(--checkbox-edge);
+          box-shadow: inset 0 0 0 1px var(--checkbox-edge);
 }
 .kui-BaseCheckboxIndicator {
   position: absolute;
@@ -9061,159 +9084,40 @@
     --checkbox-border-radius: min(var(--radius-1), var(--checkbox-radius-max));
   }
 }
-.kui-BaseCheckboxRoot:where(.kui-variant-solid):where([data-state='unchecked'])::before {
-  background-color: transparent;
-  -webkit-box-shadow: inset 0 0 0 1px var(--accent-9);
-          box-shadow: inset 0 0 0 1px var(--accent-9);
-}
-.kui-BaseCheckboxRoot:where(.kui-variant-solid):where([data-state='checked'],[data-state='indeterminate'])::before {
-  background-color: var(--accent-solid);
-  -webkit-box-shadow: inset 0 0 0 1px var(--accent-solid);
-          box-shadow: inset 0 0 0 1px var(--accent-solid);
-}
-.kui-BaseCheckboxRoot:where(.kui-variant-solid):where([data-state='checked'],[data-state='indeterminate']) :where(.kui-BaseCheckboxIndicator) {
-  color: var(--accent-solid-contrast);
-}
-.kui-BaseCheckboxRoot:where(.kui-variant-solid):where(:disabled)::before {
-  -webkit-box-shadow: inset 0 0 0 1px var(--neutral-a6);
-          box-shadow: inset 0 0 0 1px var(--neutral-a6);
-  background-color: var(--neutral-a3);
-}
-.kui-BaseCheckboxRoot:where(.kui-variant-solid):where(:disabled) :where(.kui-BaseCheckboxIndicator) {
-  color: var(--neutral-a8);
-}
-.kui-BaseCheckboxRoot:where(.kui-variant-raised) {
-  position: relative;
-  top: var(--raised-elevation-offset);
-  --checkbox-unchecked-hover: var(--color-surface);
-  --checkbox-unchecked-active: var(--accent-3);
-}
-.kui-BaseCheckboxRoot:where(.kui-variant-raised):where([data-state='unchecked'])::before {
-  color: var(--accent-ink);
-  background-color: var(--color-surface);
-  -webkit-box-shadow: var(--shadow-2);
-          box-shadow: var(--shadow-2);
-}
-.kui-BaseCheckboxRoot:where(.kui-variant-raised):where([data-state='checked'],[data-state='indeterminate'])::before {
-  background-color: var(--accent-3);
-}
-.kui-BaseCheckboxRoot:where(.kui-variant-raised):where([data-state='checked'],[data-state='indeterminate']) :where(.kui-BaseCheckboxIndicator) {
-  color: var(--accent-ink);
-}
-.kui-BaseCheckboxRoot:where(.kui-variant-raised):where(:active:not(:disabled)) {
-  top: calc(var(--raised-elevation-offset) + var(--raised-active-padding-offset-1));
-}
-.kui-BaseCheckboxRoot:where(.kui-variant-raised):where(:active:not(:disabled))::before {
-  background-color: var(--accent-3);
-}
-.kui-BaseCheckboxRoot:where(.kui-variant-raised):where(:disabled)::before {
-  background-color: var(--neutral-a3);
-  -webkit-box-shadow: none;
-          box-shadow: none;
-  background-image: none;
-}
-.kui-BaseCheckboxRoot:where(.kui-variant-raised):where(:disabled) :where(.kui-BaseCheckboxIndicator) {
-  color: var(--neutral-a8);
-}
-.kui-BaseCheckboxRoot:where(.kui-variant-raised):where(:disabled) {
-  top: 0;
+.kui-BaseCheckboxRoot:where([data-state='checked'],[data-state='indeterminate']) {
+  --checkbox-fill: var(--accent-solid);
+  --checkbox-fill-hover: var(--accent-solid-hover);
+  --checkbox-fill-active: var(--accent-solid-active);
+  --checkbox-edge: transparent;
 }
-.kui-BaseCheckboxRoot:where(.kui-variant-soft)::before {
-  background-color: var(--accent-3);
+.kui-BaseCheckboxRoot:where([aria-invalid='true']) {
+  --checkbox-edge: var(--red-8);
 }
-.kui-BaseCheckboxRoot:where(.kui-variant-soft):where([data-state='checked'],[data-state='indeterminate']) :where(.kui-BaseCheckboxIndicator) {
-  color: var(--accent-ink);
-}
-.kui-BaseCheckboxRoot:where(.kui-variant-soft):where(:disabled)::before {
-  background-color: var(--neutral-a3);
+.kui-BaseCheckboxRoot:where([aria-invalid='true']):where([data-state='checked'],[data-state='indeterminate']) {
+  --checkbox-fill: var(--red-3);
+  --checkbox-fill-hover: var(--red-4);
+  --checkbox-fill-active: var(--red-5);
+  --checkbox-edge: var(--red-8);
+  --checkbox-glyph: var(--red-11);
 }
-.kui-BaseCheckboxRoot:where(.kui-variant-soft):where(:disabled) :where(.kui-BaseCheckboxIndicator) {
-  color: var(--neutral-a8);
-}
-.kui-BaseCheckboxRoot:where(.kui-variant-outline):where([data-state='unchecked'])::before {
-  -webkit-box-shadow: inset 0 0 0 1px var(--accent-6);
-          box-shadow: inset 0 0 0 1px var(--accent-6);
-  color: var(--accent-ink);
-}
-.kui-BaseCheckboxRoot:where(.kui-variant-outline):where([data-state='checked'],[data-state='indeterminate'])::before {
-  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);
-}
-.kui-BaseCheckboxRoot:where(.kui-variant-outline):where([data-state='checked'],[data-state='indeterminate']) :where(.kui-BaseCheckboxIndicator) {
-  color: var(--accent-ink);
-}
-.kui-BaseCheckboxRoot:where(.kui-variant-outline):where(:disabled)::before {
-  -webkit-box-shadow: inset 0 0 0 1px var(--neutral-a7);
-          box-shadow: inset 0 0 0 1px var(--neutral-a7);
-  background-color: transparent;
-}
-.kui-BaseCheckboxRoot:where(.kui-variant-outline):where(:disabled) :where(.kui-BaseCheckboxIndicator) {
-  color: var(--neutral-a8);
-}
-.kui-BaseCheckboxRoot:where(.kui-variant-surface):where([data-state='unchecked'])::before {
-  background-color: var(--accent-2);
-  -webkit-box-shadow: inset 0 0 0 1px var(--accent-6);
-          box-shadow: inset 0 0 0 1px var(--accent-6);
-}
-.kui-BaseCheckboxRoot:where(.kui-variant-surface):where([data-state='checked'],[data-state='indeterminate'])::before {
-  background-color: var(--accent-3);
-  -webkit-box-shadow: inset 0 0 0 1px var(--accent-8);
-          box-shadow: inset 0 0 0 1px var(--accent-8);
-}
-.kui-BaseCheckboxRoot:where(.kui-variant-surface):where([data-state='checked'],[data-state='indeterminate']) :where(.kui-BaseCheckboxIndicator) {
-  color: var(--accent-ink);
-}
-.kui-BaseCheckboxRoot:where(.kui-variant-surface):where(:disabled)::before {
-  -webkit-box-shadow: inset 0 0 0 1px var(--neutral-a6);
-          box-shadow: inset 0 0 0 1px var(--neutral-a6);
-  background-color: var(--neutral-a2);
-}
-.kui-BaseCheckboxRoot:where(.kui-variant-surface):where(:disabled) :where(.kui-BaseCheckboxIndicator) {
-  color: var(--neutral-a8);
-}
-.kui-BaseCheckboxRoot:where(.kui-variant-solid) {
-  --checkbox-checked-hover: var(--accent-solid-hover);
-  --checkbox-checked-active: var(--accent-solid-active);
-}
-.kui-BaseCheckboxRoot:where(.kui-variant-soft) {
-  --checkbox-unchecked-hover: var(--accent-4);
-  --checkbox-unchecked-active: var(--accent-5);
-}
-.kui-BaseCheckboxRoot:where(.kui-variant-outline) {
-  --checkbox-checked-hover: var(--accent-3);
-  --checkbox-checked-active: var(--accent-4);
+.kui-BaseCheckboxRoot:where(:disabled,[data-disabled]) {
+  --checkbox-fill: var(--neutral-a3);
+  --checkbox-fill-hover: var(--neutral-a3);
+  --checkbox-fill-active: var(--neutral-a3);
+  --checkbox-edge: var(--neutral-a6);
+  --checkbox-glyph: var(--neutral-a8);
+  cursor: default;
 }
-.kui-BaseCheckboxRoot:where(.kui-variant-surface) {
-  --checkbox-unchecked-hover: var(--accent-3);
-  --checkbox-unchecked-active: var(--accent-4);
+.kui-BaseCheckboxRoot :where(.kui-BaseCheckboxIndicator) {
+  color: var(--checkbox-glyph);
 }
 @media (hover: hover) {
   .kui-BaseCheckboxRoot:where(:hover:not(:disabled,[data-disabled]))::before {
-    background-color: var(--checkbox-unchecked-hover);
-  }
-  .kui-BaseCheckboxRoot:where(:hover:not(:disabled,[data-disabled])):where([data-state='checked'],[data-state='indeterminate'])::before {
-    background-color: var(--checkbox-checked-hover);
+    background-color: var(--checkbox-fill-hover);
   }
 }
 .kui-BaseCheckboxRoot:where(:active:not(:disabled,[data-disabled]))::before {
-  background-color: var(--checkbox-unchecked-active);
-}
-.kui-BaseCheckboxRoot:where(:active:not(:disabled,[data-disabled])):where([data-state='checked'],[data-state='indeterminate'])::before {
-  background-color: var(--checkbox-checked-active);
-}
-.kui-BaseCheckboxRoot:where(.kui-variant-solid:active:not(:disabled,[data-disabled])):where([data-state='checked'],[data-state='indeterminate'])::before {
-  -webkit-box-shadow: inset 0 0 0 1px var(--checkbox-checked-active);
-          box-shadow: inset 0 0 0 1px var(--checkbox-checked-active);
-}
-@media (hover: hover) {
-  .kui-BaseCheckboxRoot:where(.kui-variant-solid:hover:not(:disabled,[data-disabled])):where([data-state='checked'],[data-state='indeterminate'])::before {
-    -webkit-box-shadow: inset 0 0 0 1px var(--checkbox-checked-hover);
-            box-shadow: inset 0 0 0 1px var(--checkbox-checked-hover);
-  }
-}
-.kui-BaseCheckboxRoot:where(:disabled,[data-disabled]) {
-  cursor: default;
+  background-color: var(--checkbox-fill-active);
 }
 @media (forced-colors: active) {
   .kui-BaseCheckboxRoot::before {
@@ -9651,8 +9555,8 @@
   overflow: hidden;
   z-index: 200;
   background-color: var(--color-surface);
-  -webkit-box-shadow: var(--shadow-5);
-          box-shadow: var(--shadow-5);
+  -webkit-box-shadow: var(--floating-chrome);
+          box-shadow: var(--floating-chrome);
   contain: paint;
   isolation: isolate;
 }
@@ -10214,7 +10118,7 @@
     outline: 2px solid Highlight;
     outline-offset: 2px;
   }
-  .kui-BaseMenuContent {
+  .kui-BaseMenuContent:not(:where(.kui-SidebarContent)) {
     border: 1px solid CanvasText;
   }
   .kui-BaseMenuSeparator {
@@ -11132,21 +11036,18 @@
 .kui-TextFieldRoot:where(.kui-variant-raised) {
   --text-field-selection-color: var(--focus-a5);
   --text-field-focus-color: var(--focus-8);
-  --text-field-border-width: 0px;
-  background-color: var(--color-surface);
-  -webkit-box-shadow: var(--shadow-2);
-          box-shadow: var(--shadow-2);
+  --text-field-border-width: 1px;
+  background-color: var(--field-fill);
+  -webkit-box-shadow: var(--control-chrome);
+          box-shadow: var(--control-chrome);
 }
 @media (hover: hover) {
-  .kui-TextFieldRoot:where(.kui-variant-raised):where(:hover:not(:has(.kui-TextFieldInput:where(:focus,:disabled)))) {
-    background-color: var(--accent-2);
-    -webkit-box-shadow: var(--shadow-2);
-            box-shadow: var(--shadow-2);
+  .kui-TextFieldRoot:where(.kui-variant-raised):where(:hover:not(:has(.kui-TextFieldInput:where(:focus,:disabled,:-moz-read-only)))) {
+    background-color: var(--field-fill-hover);
+  }
+  .kui-TextFieldRoot:where(.kui-variant-raised):where(:hover:not(:has(.kui-TextFieldInput:where(:focus,:disabled,:read-only)))) {
+    background-color: var(--field-fill-hover);
   }
-}
-.kui-TextFieldRoot:where(.kui-variant-raised):where(:has(.kui-TextFieldInput:focus)) {
-  -webkit-box-shadow: var(--shadow-2), 0 0 0 2px var(--focus-8);
-          box-shadow: var(--shadow-2), 0 0 0 2px var(--focus-8);
 }
 :is(.kui-TextFieldRoot:where(.kui-variant-raised) :where(.kui-TextFieldInput))::-webkit-input-placeholder {
   color: var(--neutral-a10);
@@ -11171,18 +11072,23 @@
 }
 .kui-TextFieldRoot:where(.kui-variant-raised):where(:has(.kui-TextFieldInput:where(:autofill,[data-com-onepassword-filled]):not(:disabled,:-moz-read-only))) {
   background-image: linear-gradient(var(--focus-a2), var(--focus-a2));
-  box-shadow: var(--shadow-2);
+  box-shadow: inset 0 0 0 1px var(--focus-a5);
 }
 .kui-TextFieldRoot:where(.kui-variant-raised):where(:has(.kui-TextFieldInput:where(:autofill,[data-com-onepassword-filled]):not(:disabled,:read-only))) {
   background-image: linear-gradient(var(--focus-a2), var(--focus-a2));
-  -webkit-box-shadow: var(--shadow-2);
-          box-shadow: var(--shadow-2);
+  -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-raised):where(:has(.kui-TextFieldInput:where(:disabled,:-moz-read-only))) {
-  background-image: linear-gradient(var(--neutral-a2), var(--neutral-a2));
+.kui-TextFieldRoot:where(.kui-variant-raised):where(:has(.kui-TextFieldInput:-moz-read-only:not(:disabled))) {
+  background-color: transparent;
 }
-.kui-TextFieldRoot:where(.kui-variant-raised):where(:has(.kui-TextFieldInput:where(:disabled,:read-only))) {
-  background-image: linear-gradient(var(--neutral-a2), var(--neutral-a2));
+.kui-TextFieldRoot:where(.kui-variant-raised):where(:has(.kui-TextFieldInput:read-only:not(:disabled))) {
+  background-color: transparent;
+}
+.kui-TextFieldRoot:where(.kui-variant-raised):where(:has(.kui-TextFieldInput:disabled)) {
+  background-color: var(--field-fill-disabled);
+  -webkit-box-shadow: inset 0 0 0 1px var(--field-edge-disabled);
+          box-shadow: inset 0 0 0 1px var(--field-edge-disabled);
 }
 .kui-TextFieldRoot:where(.kui-variant-soft) {
   --text-field-selection-color: var(--accent-a5);
@@ -11406,30 +11312,16 @@
 .kui-TextFieldRoot:where(:has(> .kui-TextFieldInput[aria-invalid='true'])) {
   --text-field-focus-color: var(--red-8);
 }
-.kui-TextFieldRoot:where(:has( > .kui-TextFieldInput[aria-invalid='true'])):where(.kui-variant-outline,.kui-variant-surface,.kui-variant-soft,.kui-variant-ghost) {
+.kui-TextFieldRoot:where(:has( > .kui-TextFieldInput[aria-invalid='true'])):where(.kui-variant-raised,.kui-variant-outline,.kui-variant-surface,.kui-variant-soft,.kui-variant-ghost) {
   -webkit-box-shadow: inset 0 0 0 1px var(--red-6);
           box-shadow: inset 0 0 0 1px var(--red-6);
 }
 @media (hover: hover) {
-  .kui-TextFieldRoot:where(:has( > .kui-TextFieldInput[aria-invalid='true'])):where(.kui-variant-outline,.kui-variant-surface,.kui-variant-soft,.kui-variant-ghost):where(:hover:not(:has(.kui-TextFieldInput:where(:focus,:disabled)))) {
+  .kui-TextFieldRoot:where(:has( > .kui-TextFieldInput[aria-invalid='true'])):where(.kui-variant-raised,.kui-variant-outline,.kui-variant-surface,.kui-variant-soft,.kui-variant-ghost):where(:hover:not(:has(.kui-TextFieldInput:where(:focus,:disabled)))) {
     -webkit-box-shadow: inset 0 0 0 1px var(--red-7);
             box-shadow: inset 0 0 0 1px var(--red-7);
   }
 }
-.kui-TextFieldRoot:where(:has( > .kui-TextFieldInput[aria-invalid='true'])):where(.kui-variant-raised) {
-  -webkit-box-shadow: var(--shadow-2), inset 0 0 0 1px var(--red-6);
-          box-shadow: var(--shadow-2), inset 0 0 0 1px var(--red-6);
-}
-@media (hover: hover) {
-  .kui-TextFieldRoot:where(:has( > .kui-TextFieldInput[aria-invalid='true'])):where(.kui-variant-raised):where(:hover:not(:has(.kui-TextFieldInput:where(:focus,:disabled)))) {
-    -webkit-box-shadow: var(--shadow-2), inset 0 0 0 1px var(--red-7);
-            box-shadow: var(--shadow-2), inset 0 0 0 1px var(--red-7);
-  }
-}
-.kui-TextFieldRoot:where(:has( > .kui-TextFieldInput[aria-invalid='true'])):where(.kui-variant-raised):where(:has(.kui-TextFieldInput:focus)) {
-  -webkit-box-shadow: var(--shadow-2), inset 0 0 0 1px var(--red-6), 0 0 0 2px var(--red-8);
-          box-shadow: var(--shadow-2), inset 0 0 0 1px var(--red-6), 0 0 0 2px var(--red-8);
-}
 .kui-TextFieldErrorMessage {
   font-family: var(--default-font-family);
   font-weight: var(--font-weight-regular);
@@ -12597,8 +12489,8 @@
 }
 .kui-PopoverContent {
   background-color: var(--color-surface);
-  -webkit-box-shadow: var(--shadow-5);
-          box-shadow: var(--shadow-5);
+  -webkit-box-shadow: var(--floating-chrome);
+          box-shadow: var(--floating-chrome);
   min-width: var(--radix-popover-trigger-width);
   outline: 0;
   overflow: auto;
@@ -12955,13 +12847,19 @@
   cursor: var(--cursor-radio);
   height: var(--line-height, var(--radio-size));
   isolation: isolate;
-  --radio-unchecked-hover: var(--accent-a2);
-  --radio-unchecked-active: var(--accent-a3);
-  --radio-checked-hover: var(--accent-4);
-  --radio-checked-active: var(--accent-5);
+  --radio-fill: var(--color-mark);
+  --radio-fill-hover: var(--color-mark-hover);
+  --radio-fill-active: var(--color-mark-active);
+  --radio-edge: var(--color-mark-edge);
+  --radio-dot: var(--accent-solid-contrast);
 }
 .kui-BaseRadioRoot:where(:disabled,[data-disabled]) {
   cursor: default;
+  --radio-fill: var(--neutral-a3);
+  --radio-fill-hover: var(--neutral-a3);
+  --radio-fill-active: var(--neutral-a3);
+  --radio-edge: var(--neutral-a6);
+  --radio-dot: var(--neutral-a8);
 }
 .kui-BaseRadioRoot::before {
   content: '';
@@ -12969,6 +12867,9 @@
   height: var(--radio-size);
   width: var(--radio-size);
   border-radius: 100%;
+  background-color: var(--radio-fill);
+  -webkit-box-shadow: inset 0 0 0 1px var(--radio-edge);
+          box-shadow: inset 0 0 0 1px var(--radio-edge);
 }
 .kui-BaseRadioRoot::after {
   pointer-events: none;
@@ -12978,6 +12879,7 @@
   border-radius: 100%;
   -webkit-transform: scale(0.4);
           transform: scale(0.4);
+  background-color: var(--radio-dot);
 }
 .kui-BaseRadioRoot:where(:checked,[data-state='checked'])::after {
   content: '';
@@ -13068,157 +12970,29 @@
     --radio-size: var(--mark-4, calc(26px * var(--scale)));
   }
 }
-.kui-BaseRadioRoot:where(.kui-variant-solid):where(:not(:checked),[data-state='unchecked'])::before {
-  background-color: transparent;
-  -webkit-box-shadow: inset 0 0 0 1px var(--accent-9);
-          box-shadow: inset 0 0 0 1px var(--accent-9);
-}
-.kui-BaseRadioRoot:where(.kui-variant-solid):where(:checked,[data-state='checked'])::before {
-  background-color: var(--accent-solid);
-  -webkit-box-shadow: inset 0 0 0 1px var(--accent-solid);
-          box-shadow: inset 0 0 0 1px var(--accent-solid);
-}
-.kui-BaseRadioRoot:where(.kui-variant-solid)::after {
-  background-color: var(--accent-solid-contrast);
-}
-.kui-BaseRadioRoot:where(.kui-variant-solid):where(:disabled,[data-disabled])::before {
-  -webkit-box-shadow: inset 0 0 0 1px var(--neutral-a6);
-          box-shadow: inset 0 0 0 1px var(--neutral-a6);
-  background-color: var(--neutral-a3);
-}
-.kui-BaseRadioRoot:where(.kui-variant-solid):where(:disabled,[data-disabled])::after {
-  background-color: var(--neutral-a8);
-}
-.kui-BaseRadioRoot:where(.kui-variant-raised) {
-  position: relative;
-  top: var(--raised-elevation-offset);
-  --radio-unchecked-hover: var(--color-surface);
-  --radio-unchecked-active: var(--accent-3);
-}
-.kui-BaseRadioRoot:where(.kui-variant-raised):where(:not(:checked),[data-state='unchecked'])::before {
-  color: var(--accent-ink);
-  background-color: var(--color-surface);
-  -webkit-box-shadow: var(--shadow-2);
-          box-shadow: var(--shadow-2);
-}
-.kui-BaseRadioRoot:where(.kui-variant-raised):where(:checked,[data-state='checked'])::before {
-  background-color: var(--accent-3);
-}
-.kui-BaseRadioRoot:where(.kui-variant-raised)::after {
-  background-color: var(--accent-ink);
-}
-.kui-BaseRadioRoot:where(.kui-variant-raised):where(:active:not(:disabled,[data-disabled])) {
-  top: calc(var(--raised-elevation-offset) + var(--raised-active-padding-offset-1));
-}
-.kui-BaseRadioRoot:where(.kui-variant-raised):where(:active:not(:disabled,[data-disabled]))::before {
-  background-color: var(--accent-3);
-}
-.kui-BaseRadioRoot:where(.kui-variant-raised):where(:disabled,[data-disabled])::before {
-  background-color: var(--neutral-a3);
-  -webkit-box-shadow: none;
-          box-shadow: none;
-  background-image: none;
-}
-.kui-BaseRadioRoot:where(.kui-variant-raised):where(:disabled,[data-disabled])::after {
-  background-color: var(--neutral-a8);
-}
-.kui-BaseRadioRoot:where(.kui-variant-raised):where(:disabled,[data-disabled]) {
-  top: 0;
-}
-.kui-BaseRadioRoot:where(.kui-variant-soft)::before {
-  background-color: var(--accent-3);
-}
-.kui-BaseRadioRoot:where(.kui-variant-soft)::after {
-  background-color: var(--accent-ink);
+.kui-BaseRadioRoot:where(:checked,[data-state='checked']) {
+  --radio-fill: var(--accent-solid);
+  --radio-fill-hover: var(--accent-solid-hover);
+  --radio-fill-active: var(--accent-solid-active);
+  --radio-edge: transparent;
 }
-.kui-BaseRadioRoot:where(.kui-variant-soft):where(:focus-visible)::before {
-  outline-color: var(--accent-a8);
+.kui-BaseRadioRoot:where([aria-invalid='true']) {
+  --radio-edge: var(--red-8);
 }
-.kui-BaseRadioRoot:where(.kui-variant-soft):where(:disabled,[data-disabled])::before {
-  background-color: var(--neutral-a3);
-}
-.kui-BaseRadioRoot:where(.kui-variant-soft):where(:disabled,[data-disabled])::after {
-  background-color: var(--neutral-a8);
-}
-.kui-BaseRadioRoot:where(.kui-variant-outline):where(:not(:checked),[data-state='unchecked'])::before {
-  -webkit-box-shadow: inset 0 0 0 1px var(--accent-6);
-          box-shadow: inset 0 0 0 1px var(--accent-6);
-  color: var(--accent-ink);
-}
-.kui-BaseRadioRoot:where(.kui-variant-outline):where(:checked,[data-state='checked'])::before {
-  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);
-}
-.kui-BaseRadioRoot:where(.kui-variant-outline)::after {
-  background-color: var(--accent-ink);
-}
-.kui-BaseRadioRoot:where(.kui-variant-outline):where(:disabled,[data-disabled])::before {
-  -webkit-box-shadow: inset 0 0 0 1px var(--neutral-a7);
-          box-shadow: inset 0 0 0 1px var(--neutral-a7);
-  background-color: transparent;
-}
-.kui-BaseRadioRoot:where(.kui-variant-outline):where(:disabled,[data-disabled])::after {
-  background-color: var(--neutral-a8);
-}
-.kui-BaseRadioRoot:where(.kui-variant-surface):where(:not(:checked),[data-state='unchecked'])::before {
-  background-color: var(--accent-2);
-  -webkit-box-shadow: inset 0 0 0 1px var(--accent-6);
-          box-shadow: inset 0 0 0 1px var(--accent-6);
-}
-.kui-BaseRadioRoot:where(.kui-variant-surface):where(:checked,[data-state='checked'])::before {
-  background-color: var(--accent-3);
-  -webkit-box-shadow: inset 0 0 0 1px var(--accent-8);
-          box-shadow: inset 0 0 0 1px var(--accent-8);
-}
-.kui-BaseRadioRoot:where(.kui-variant-surface)::after {
-  background-color: var(--accent-ink);
-}
-.kui-BaseRadioRoot:where(.kui-variant-surface):where(:disabled,[data-disabled])::before {
-  -webkit-box-shadow: inset 0 0 0 1px var(--neutral-a6);
-          box-shadow: inset 0 0 0 1px var(--neutral-a6);
-  background-color: var(--neutral-a2);
-}
-.kui-BaseRadioRoot:where(.kui-variant-surface):where(:disabled,[data-disabled])::after {
-  background-color: var(--neutral-a8);
-}
-.kui-BaseRadioRoot:where(.kui-variant-solid) {
-  --radio-checked-hover: var(--accent-solid-hover);
-  --radio-checked-active: var(--accent-solid-active);
-}
-.kui-BaseRadioRoot:where(.kui-variant-soft) {
-  --radio-unchecked-hover: var(--accent-4);
-  --radio-unchecked-active: var(--accent-5);
-}
-.kui-BaseRadioRoot:where(.kui-variant-outline) {
-  --radio-checked-hover: var(--accent-3);
-  --radio-checked-active: var(--accent-4);
-}
-.kui-BaseRadioRoot:where(.kui-variant-surface) {
-  --radio-unchecked-hover: var(--accent-3);
-  --radio-unchecked-active: var(--accent-4);
+.kui-BaseRadioRoot:where([aria-invalid='true']):where(:checked,[data-state='checked']) {
+  --radio-fill: var(--red-3);
+  --radio-fill-hover: var(--red-4);
+  --radio-fill-active: var(--red-5);
+  --radio-edge: var(--red-8);
+  --radio-dot: var(--red-11);
 }
 @media (hover: hover) {
   .kui-BaseRadioRoot:where(:hover:not(:disabled,[data-disabled]))::before {
-    background-color: var(--radio-unchecked-hover);
-  }
-  .kui-BaseRadioRoot:where(:hover:not(:disabled,[data-disabled])):where(:checked,[data-state='checked'])::before {
-    background-color: var(--radio-checked-hover);
-  }
-  .kui-BaseRadioRoot:where(.kui-variant-solid:hover:not(:disabled,[data-disabled])):where(:checked,[data-state='checked'])::before {
-    -webkit-box-shadow: inset 0 0 0 1px var(--radio-checked-hover);
-            box-shadow: inset 0 0 0 1px var(--radio-checked-hover);
+    background-color: var(--radio-fill-hover);
   }
 }
 .kui-BaseRadioRoot:where(:active:not(:disabled,[data-disabled]))::before {
-  background-color: var(--radio-unchecked-active);
-}
-.kui-BaseRadioRoot:where(:active:not(:disabled,[data-disabled])):where(:checked,[data-state='checked'])::before {
-  background-color: var(--radio-checked-active);
-}
-.kui-BaseRadioRoot:where(.kui-variant-solid:active:not(:disabled,[data-disabled])):where(:checked,[data-state='checked'])::before {
-  -webkit-box-shadow: inset 0 0 0 1px var(--radio-checked-active);
-          box-shadow: inset 0 0 0 1px var(--radio-checked-active);
+  background-color: var(--radio-fill-active);
 }
 @media (forced-colors: active) {
   .kui-BaseRadioRoot::before {
@@ -13565,8 +13339,8 @@
   position: absolute;
   border-radius: max(calc(var(--border-width-standard) * 0.5), calc(var(--segmented-control-border-radius) - var(--border-width-standard)));
   background-color: var(--segmented-control-indicator-background-color);
-  -webkit-box-shadow: var(--shadow-2);
-          box-shadow: var(--shadow-2);
+  -webkit-box-shadow: var(--control-chrome);
+          box-shadow: var(--control-chrome);
   content: '';
 }
 :where(.kui-SegmentedControlItem[data-state='on']) ~ .kui-SegmentedControlIndicator {
@@ -14689,6 +14463,7 @@
     background-color: Highlight;
   }
   .kui-SegmentedControlItem:where([data-state='on']) {
+    forced-color-adjust: none;
     color: HighlightText;
   }
   .kui-SegmentedControlRoot:where([data-disabled]),
@@ -14728,8 +14503,8 @@
   overflow: hidden;
   z-index: 200;
   background-color: var(--color-surface);
-  -webkit-box-shadow: var(--shadow-5);
-          box-shadow: var(--shadow-5);
+  -webkit-box-shadow: var(--floating-chrome);
+          box-shadow: var(--floating-chrome);
 }
 .kui-SelectContent:where([data-side]) {
   min-width: var(--radix-select-trigger-width);
@@ -15157,11 +14932,10 @@
 }
 .kui-SelectTrigger:where(.kui-variant-raised) {
   position: relative;
-  top: var(--raised-elevation-offset);
   color: var(--accent-ink);
-  background-color: var(--color-surface);
-  -webkit-box-shadow: var(--shadow-2);
-          box-shadow: var(--shadow-2);
+  background-color: var(--field-fill);
+  -webkit-box-shadow: var(--control-chrome);
+          box-shadow: var(--control-chrome);
 }
 .kui-SelectTrigger:where(.kui-variant-raised):where(:focus-visible) {
   outline: 2px solid var(--focus-8);
@@ -15169,25 +14943,19 @@
 }
 @media (hover: hover) {
   .kui-SelectTrigger:where(.kui-variant-raised):where(:hover:not(:disabled)) {
-    background-color: var(--accent-2);
-    -webkit-box-shadow: var(--shadow-2);
-            box-shadow: var(--shadow-2);
+    background-color: var(--field-fill-hover);
   }
 }
-.kui-SelectTrigger:where(.kui-variant-raised):where([data-state='open']) {
-  background-color: var(--accent-3);
-}
-.kui-SelectTrigger:where(.kui-variant-raised):where(:active:not([data-state='open'],[data-disabled])) {
-  background-color: var(--accent-3);
+.kui-SelectTrigger:where(.kui-variant-raised):where([data-state='open']),.kui-SelectTrigger:where(.kui-variant-raised):where(:active:not([data-state='open'],[data-disabled])) {
+  background-color: var(--neutral-5);
 }
 .kui-SelectTrigger:where(.kui-variant-raised):where(:disabled) {
   color: var(--neutral-a8);
-  background-color: var(--neutral-a3);
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  background-color: var(--field-fill-disabled);
+  -webkit-box-shadow: inset 0 0 0 1px var(--field-edge-disabled);
+          box-shadow: inset 0 0 0 1px var(--field-edge-disabled);
   outline: none;
   cursor: default;
-  top: 0;
 }
 .kui-SelectTrigger:where(.kui-variant-raised):where([data-placeholder]) :where(.kui-SelectTriggerInner) {
   color: var(--neutral-a10);
@@ -15331,30 +15099,20 @@
   color: var(--neutral-a8);
   opacity: 1;
 }
-.kui-SelectTrigger:where([aria-invalid='true']):where(:not(.kui-variant-raised)) {
+.kui-SelectTrigger:where([aria-invalid='true']) {
   -webkit-box-shadow: inset 0 0 0 1px var(--red-6);
           box-shadow: inset 0 0 0 1px var(--red-6);
 }
 @media (hover: hover) {
-  .kui-SelectTrigger:where([aria-invalid='true']):where(:not(.kui-variant-raised)):where(:hover:not(:disabled)) {
+  .kui-SelectTrigger:where([aria-invalid='true']):where(:hover:not(:disabled)) {
     -webkit-box-shadow: inset 0 0 0 1px var(--red-7);
             box-shadow: inset 0 0 0 1px var(--red-7);
   }
 }
-.kui-SelectTrigger:where([aria-invalid='true']):where(:not(.kui-variant-raised)):where([data-state='open'],:active) {
+.kui-SelectTrigger:where([aria-invalid='true']):where([data-state='open'],:active) {
   -webkit-box-shadow: inset 0 0 0 1px var(--red-7);
           box-shadow: inset 0 0 0 1px var(--red-7);
 }
-.kui-SelectTrigger:where([aria-invalid='true']):where(.kui-variant-raised) {
-  -webkit-box-shadow: var(--shadow-2), inset 0 0 0 1px var(--red-6);
-          box-shadow: var(--shadow-2), inset 0 0 0 1px var(--red-6);
-}
-@media (hover: hover) {
-  .kui-SelectTrigger:where([aria-invalid='true']):where(.kui-variant-raised):where(:hover:not(:disabled)) {
-    -webkit-box-shadow: var(--shadow-2), inset 0 0 0 1px var(--red-7);
-            box-shadow: var(--shadow-2), inset 0 0 0 1px var(--red-7);
-  }
-}
 .kui-SelectTrigger:where([aria-invalid='true']):where(:focus-visible) {
   outline-color: var(--red-8);
 }
@@ -16044,6 +15802,11 @@
       -ms-flex: 1;
           flex: 1;
 }
+.kui-SidebarHeader:where(.kui-SidebarHeader--container) > :where(.kui-Toolbar) {
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+}
 .kui-SidebarFooter:where(.kui-SidebarFooter--container) {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -16064,6 +15827,11 @@
       -ms-flex: 1;
           flex: 1;
 }
+.kui-SidebarFooter:where(.kui-SidebarFooter--container) > :where(.kui-Toolbar) {
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+}
 .kui-SidebarHeader :where(.kui-SidebarMenuButton),
 .kui-SidebarFooter :where(.kui-SidebarMenuButton) {
   display: -webkit-box;
@@ -16938,6 +16706,13 @@
     color: var(--accent-solid-contrast);
   }
 }
+@media (forced-colors: active) {
+  .kui-SidebarMenuButton:where([data-active]) {
+    forced-color-adjust: none;
+    background-color: Highlight;
+    color: HighlightText;
+  }
+}
 .kui-ShellRoot {
   --shell-inset-gap: var(--space-3);
   --shell-rail-offset: 0px;
@@ -17118,12 +16893,15 @@
   z-index: 1;
   pointer-events: none;
 }
-:is(.kui-ShellPaneHeader[data-float],.kui-ShellPaneFooter[data-float]) > :where(*),:is(.kui-ShellPaneHeader[data-float],.kui-ShellPaneFooter[data-float]) > :where(.kui-Toolbar) > :where(*) {
+:is(.kui-ShellPaneHeader[data-float],.kui-ShellPaneFooter[data-float]) > :where(*) {
   pointer-events: auto;
 }
 :is(.kui-ShellPaneHeader[data-float],.kui-ShellPaneFooter[data-float]) > :where(.kui-Toolbar) {
   pointer-events: none;
 }
+:is(.kui-ShellPaneHeader[data-float],.kui-ShellPaneFooter[data-float]) > :where(.kui-Toolbar) :where(.kui-ToolbarGroup,.kui-BaseButton,.kui-TextFieldRoot,.kui-SelectTrigger,.kui-SegmentedControlRoot,[href],[tabindex]) {
+  pointer-events: auto;
+}
 .kui-ShellPaneHeader[data-float] {
   top: 0;
 }
@@ -17299,7 +17077,7 @@
   --kui-shell-row: 1 / -1;
   --kui-shell-col: 1 / -1;
   --kui-shell-surface: var(--color-surface);
-  --kui-shell-shadow: var(--shadow-5);
+  --kui-shell-shadow: var(--dialog-chrome);
   --kui-shell-edge: 1px;
   --kui-shell-cap: calc(100% - var(--space-9) - var(--kui-shell-start, 0px));
   --kui-shell-offset: var(--shell-rail-offset, 0px);
@@ -17312,7 +17090,7 @@
   --kui-shell-row: 2 / 3;
   --kui-shell-col: 1 / -1;
   --kui-shell-surface: var(--color-surface);
-  --kui-shell-shadow: var(--shadow-4);
+  --kui-shell-shadow: var(--surface-chrome);
   --kui-shell-edge: 1px;
   --kui-shell-cap: initial;
   --kui-shell-offset: var(--shell-rail-offset, 0px);
@@ -17341,7 +17119,7 @@
   --kui-shell-row: 1 / -1;
   --kui-shell-col: 1 / -1;
   --kui-shell-surface: var(--color-surface);
-  --kui-shell-shadow: var(--shadow-5);
+  --kui-shell-shadow: var(--dialog-chrome);
   --kui-shell-edge: 1px;
   --kui-shell-cap: calc(100% - var(--space-9) - var(--kui-shell-start, 0px));
   --kui-shell-offset: var(--shell-rail-offset, 0px);
@@ -17354,7 +17132,7 @@
   --kui-shell-row: 2 / 3;
   --kui-shell-col: 1 / -1;
   --kui-shell-surface: var(--color-surface);
-  --kui-shell-shadow: var(--shadow-4);
+  --kui-shell-shadow: var(--surface-chrome);
   --kui-shell-edge: 1px;
   --kui-shell-cap: initial;
   --kui-shell-offset: var(--shell-rail-offset, 0px);
@@ -17392,7 +17170,7 @@
     --kui-shell-row: 1 / -1;
     --kui-shell-col: 1 / -1;
     --kui-shell-surface: var(--color-surface);
-    --kui-shell-shadow: var(--shadow-5);
+    --kui-shell-shadow: var(--dialog-chrome);
     --kui-shell-edge: 1px;
     --kui-shell-cap: calc(100% - var(--space-9) - var(--kui-shell-start, 0px));
     --kui-shell-offset: var(--shell-rail-offset, 0px);
@@ -17405,7 +17183,7 @@
     --kui-shell-row: 2 / 3;
     --kui-shell-col: 1 / -1;
     --kui-shell-surface: var(--color-surface);
-    --kui-shell-shadow: var(--shadow-4);
+    --kui-shell-shadow: var(--surface-chrome);
     --kui-shell-edge: 1px;
     --kui-shell-cap: initial;
     --kui-shell-offset: var(--shell-rail-offset, 0px);
@@ -17444,7 +17222,7 @@
     --kui-shell-row: 1 / -1;
     --kui-shell-col: 1 / -1;
     --kui-shell-surface: var(--color-surface);
-    --kui-shell-shadow: var(--shadow-5);
+    --kui-shell-shadow: var(--dialog-chrome);
     --kui-shell-edge: 1px;
     --kui-shell-cap: calc(100% - var(--space-9) - var(--kui-shell-start, 0px));
     --kui-shell-offset: var(--shell-rail-offset, 0px);
@@ -17457,7 +17235,7 @@
     --kui-shell-row: 2 / 3;
     --kui-shell-col: 1 / -1;
     --kui-shell-surface: var(--color-surface);
-    --kui-shell-shadow: var(--shadow-4);
+    --kui-shell-shadow: var(--surface-chrome);
     --kui-shell-edge: 1px;
     --kui-shell-cap: initial;
     --kui-shell-offset: var(--shell-rail-offset, 0px);
@@ -17496,7 +17274,7 @@
     --kui-shell-row: 1 / -1;
     --kui-shell-col: 1 / -1;
     --kui-shell-surface: var(--color-surface);
-    --kui-shell-shadow: var(--shadow-5);
+    --kui-shell-shadow: var(--dialog-chrome);
     --kui-shell-edge: 1px;
     --kui-shell-cap: calc(100% - var(--space-9) - var(--kui-shell-start, 0px));
     --kui-shell-offset: var(--shell-rail-offset, 0px);
@@ -17509,7 +17287,7 @@
     --kui-shell-row: 2 / 3;
     --kui-shell-col: 1 / -1;
     --kui-shell-surface: var(--color-surface);
-    --kui-shell-shadow: var(--shadow-4);
+    --kui-shell-shadow: var(--surface-chrome);
     --kui-shell-edge: 1px;
     --kui-shell-cap: initial;
     --kui-shell-offset: var(--shell-rail-offset, 0px);
@@ -17548,7 +17326,7 @@
     --kui-shell-row: 1 / -1;
     --kui-shell-col: 1 / -1;
     --kui-shell-surface: var(--color-surface);
-    --kui-shell-shadow: var(--shadow-5);
+    --kui-shell-shadow: var(--dialog-chrome);
     --kui-shell-edge: 1px;
     --kui-shell-cap: calc(100% - var(--space-9) - var(--kui-shell-start, 0px));
     --kui-shell-offset: var(--shell-rail-offset, 0px);
@@ -17561,7 +17339,7 @@
     --kui-shell-row: 2 / 3;
     --kui-shell-col: 1 / -1;
     --kui-shell-surface: var(--color-surface);
-    --kui-shell-shadow: var(--shadow-4);
+    --kui-shell-shadow: var(--surface-chrome);
     --kui-shell-edge: 1px;
     --kui-shell-cap: initial;
     --kui-shell-offset: var(--shell-rail-offset, 0px);
@@ -17600,7 +17378,7 @@
     --kui-shell-row: 1 / -1;
     --kui-shell-col: 1 / -1;
     --kui-shell-surface: var(--color-surface);
-    --kui-shell-shadow: var(--shadow-5);
+    --kui-shell-shadow: var(--dialog-chrome);
     --kui-shell-edge: 1px;
     --kui-shell-cap: calc(100% - var(--space-9) - var(--kui-shell-start, 0px));
     --kui-shell-offset: var(--shell-rail-offset, 0px);
@@ -17613,7 +17391,7 @@
     --kui-shell-row: 2 / 3;
     --kui-shell-col: 1 / -1;
     --kui-shell-surface: var(--color-surface);
-    --kui-shell-shadow: var(--shadow-4);
+    --kui-shell-shadow: var(--surface-chrome);
     --kui-shell-edge: 1px;
     --kui-shell-cap: initial;
     --kui-shell-offset: var(--shell-rail-offset, 0px);
@@ -17638,7 +17416,7 @@
   --kui-shell-row: 2 / 3;
   --kui-shell-col: 1 / -1;
   --kui-shell-surface: var(--color-surface);
-  --kui-shell-shadow: var(--shadow-4);
+  --kui-shell-shadow: var(--surface-chrome);
   --kui-shell-edge: 1px;
   --kui-shell-offset: var(--shell-rail-offset, 0px);
   --kui-shell-handle: none;
@@ -17675,8 +17453,8 @@
   margin: var(--shell-inset-gap);
   border-radius: var(--radius-surface-1);
   background: var(--color-page);
-  -webkit-box-shadow: var(--shadow-2);
-          box-shadow: var(--shadow-2);
+  -webkit-box-shadow: var(--surface-chrome);
+          box-shadow: var(--surface-chrome);
 }
 .kui-ShellRoot:has(> .kui-ShellRail[data-inset][data-presentation='fixed'][data-mode]:not([data-mode='collapsed'])) > .kui-ShellPanel[data-inset][data-presentation='fixed'],
 .kui-ShellRoot:has(> .kui-ShellPanel[data-inset][data-presentation='fixed'][data-mode]:not([data-mode='collapsed'])) > .kui-ShellSidebar[data-inset][data-presentation='fixed'],
@@ -17843,24 +17621,12 @@
           flex-direction: column;
   width: var(--slider-track-size);
 }
-.kui-SliderTrack {
-  overflow: hidden;
-  position: relative;
-  -webkit-box-flex: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
-  border-radius: inherit;
-}
 .kui-SliderTrack:where([data-orientation='horizontal']) {
   height: var(--slider-track-size);
 }
 .kui-SliderTrack:where([data-orientation='vertical']) {
   width: var(--slider-track-size);
 }
-.kui-SliderRange {
-  position: absolute;
-  border-radius: inherit;
-}
 .kui-SliderRange:where([data-orientation='horizontal']) {
   height: var(--position-full);
 }
@@ -17890,8 +17656,8 @@
   inset: calc(var(--slider-thumb-inset-factor) * var(--slider-thumb-overshoot-base, var(--slider-track-size)) * -1);
   background-color: var(--accent-solid-thumb);
   border-radius: var(--slider-thumb-radius);
-  -webkit-box-shadow: var(--slider-thumb-box-shadow, var(--shadow-2));
-          box-shadow: var(--slider-thumb-box-shadow, var(--shadow-2));
+  -webkit-box-shadow: var(--slider-thumb-box-shadow, var(--grip-chrome));
+          box-shadow: var(--slider-thumb-box-shadow, var(--grip-chrome));
   cursor: pointer;
 }
 .kui-SliderThumb:where(:focus-visible)::after {
@@ -18103,30 +17869,19 @@
     --slider-thumb-radius: calc(var(--radius-4) * 0.75);
   }
 }
-.kui-SliderRoot:where(.kui-variant-surface) :where(.kui-SliderTrack) {
-  background-color: var(--neutral-2);
-  -webkit-box-shadow: inset 0 0 0 1px var(--neutral-6);
-          box-shadow: inset 0 0 0 1px var(--neutral-6);
-}
-:is(.kui-SliderRoot:where(.kui-variant-surface) :where(.kui-SliderTrack)):where([data-disabled]) {
-  -webkit-box-shadow: inset 0 0 0 1px var(--neutral-5);
-          box-shadow: inset 0 0 0 1px var(--neutral-5);
-}
-.kui-SliderRoot:where(.kui-variant-surface) :where(.kui-SliderRange) {
-  background-color: var(--accent-solid);
-}
-.kui-SliderRoot:where(.kui-variant-soft) :where(.kui-SliderTrack) {
-  background-color: var(--neutral-3);
-}
-.kui-SliderRoot:where(.kui-variant-soft) :where(.kui-SliderRange) {
-  background-color: var(--accent-solid);
-}
-.kui-SliderRoot:where(.kui-variant-outline) :where(.kui-SliderTrack) {
-  -webkit-box-shadow: inset 0 0 0 1px var(--neutral-6);
-          box-shadow: inset 0 0 0 1px var(--neutral-6);
+.kui-SliderTrack {
+  background-color: var(--color-track);
+  overflow: hidden;
+  position: relative;
+  -webkit-box-flex: 1;
+      -ms-flex-positive: 1;
+          flex-grow: 1;
+  border-radius: inherit;
 }
-.kui-SliderRoot:where(.kui-variant-outline) :where(.kui-SliderRange) {
+.kui-SliderRange {
   background-color: var(--accent-solid);
+  position: absolute;
+  border-radius: inherit;
 }
 .kui-SliderRoot:where([data-disabled]) {
   cursor: default;
@@ -18408,8 +18163,6 @@
   --switch-thumb-size: calc(var(--switch-height) - var(--switch-thumb-inset) * 2);
   --switch-thumb-translate-x: calc(var(--switch-width) - var(--switch-height));
   isolation: isolate;
-  --switch-off-hover: var(--neutral-a2);
-  --switch-off-active: var(--neutral-a3);
 }
 .kui-SwitchRoot::before {
   content: '';
@@ -18418,20 +18171,23 @@
   height: var(--switch-height);
   border-radius: 9999px;
   cursor: var(--cursor-switch);
+  background-color: var(--color-track);
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .kui-SwitchRoot:where(:focus-visible)::before {
   outline: var(--focus-ring-width, 2px) solid var(--focus-8);
   outline-offset: var(--focus-ring-offset, 2px);
 }
 .kui-SwitchThumb {
-  background-color: white;
+  background-color: var(--color-thumb);
   position: absolute;
   inset-inline-start: var(--switch-thumb-inset);
   width: var(--switch-thumb-size);
   height: var(--switch-thumb-size);
   border-radius: 9999px;
-  -webkit-box-shadow: var(--shadow-2);
-          box-shadow: var(--shadow-2);
+  -webkit-box-shadow: var(--grip-chrome);
+          box-shadow: var(--grip-chrome);
 }
 .kui-SwitchThumb:where([data-state='checked']) {
   background-color: var(--accent-solid-thumb);
@@ -18547,49 +18303,19 @@
     --switch-width: var(--switch-w-4, calc(48px * var(--scale)));
   }
 }
-.kui-SwitchRoot:where(.kui-variant-surface)::before {
-  background-color: var(--neutral-2);
-  -webkit-box-shadow: inset 0 0 0 1px var(--neutral-6);
-          box-shadow: inset 0 0 0 1px var(--neutral-6);
-}
-.kui-SwitchRoot:where(.kui-variant-surface):where([data-state='checked'])::before {
-  background-color: var(--accent-solid);
-  -webkit-box-shadow: none;
-          box-shadow: none;
-}
-.kui-SwitchRoot:where(.kui-variant-soft)::before {
-  background-color: var(--neutral-3);
-}
-.kui-SwitchRoot:where(.kui-variant-soft):where([data-state='checked'])::before {
-  background-color: var(--accent-solid);
-}
-.kui-SwitchRoot:where(.kui-variant-outline)::before {
-  -webkit-box-shadow: inset 0 0 0 1px var(--neutral-6);
-          box-shadow: inset 0 0 0 1px var(--neutral-6);
-}
-.kui-SwitchRoot:where(.kui-variant-outline):where([data-state='checked'])::before {
+.kui-SwitchRoot:where([data-state='checked'])::before {
   background-color: var(--accent-solid);
-  -webkit-box-shadow: none;
-          box-shadow: none;
-}
-.kui-SwitchRoot:where(.kui-variant-surface) {
-  --switch-off-hover: var(--neutral-3);
-  --switch-off-active: var(--neutral-4);
-}
-.kui-SwitchRoot:where(.kui-variant-soft) {
-  --switch-off-hover: var(--neutral-4);
-  --switch-off-active: var(--neutral-5);
 }
 @media (hover: hover) {
   .kui-SwitchRoot:where(:hover:not([data-disabled]))::before {
-    background-color: var(--switch-off-hover);
+    background-color: var(--color-track-hover);
   }
   .kui-SwitchRoot:where(:hover:not([data-disabled]):is([data-state='checked']))::before {
     background-color: var(--accent-solid-hover);
   }
 }
 .kui-SwitchRoot:where(:active:not([data-disabled]))::before {
-  background-color: var(--switch-off-active);
+  background-color: var(--color-track-active);
 }
 .kui-SwitchRoot:where(:active:not([data-disabled]):is([data-state='checked']))::before {
   background-color: var(--accent-solid-active);
@@ -20050,12 +19776,12 @@
           box-shadow: inset 0 0 0 1px var(--accent-a5), inset 0 0 0 1px var(--neutral-a4);
 }
 .kui-TextAreaRoot:where(.kui-variant-raised) {
-  --text-area-border-width: 0px;
+  --text-area-border-width: 1px;
   --v-selection-color: var(--focus-a5);
   --v-focus-color: var(--focus-8);
-  background-color: var(--color-surface);
-  -webkit-box-shadow: var(--shadow-2);
-          box-shadow: var(--shadow-2);
+  background-color: var(--field-fill);
+  -webkit-box-shadow: var(--control-chrome);
+          box-shadow: var(--control-chrome);
 }
 :is(.kui-TextAreaRoot:where(.kui-variant-raised) :where(.kui-TextAreaInput))::-webkit-input-placeholder {
   color: var(--neutral-a10);
@@ -20073,30 +19799,32 @@
   color: var(--neutral-a10);
 }
 @media (hover: hover) {
-  .kui-TextAreaRoot:where(.kui-variant-raised):where(:hover:not(:has(.kui-TextAreaInput:where(:focus,:disabled)))) {
-    background-color: var(--accent-2);
-    -webkit-box-shadow: var(--shadow-2);
-            box-shadow: var(--shadow-2);
+  .kui-TextAreaRoot:where(.kui-variant-raised):where(:hover:not(:has(.kui-TextAreaInput:where(:focus,:disabled,:-moz-read-only)))) {
+    background-color: var(--field-fill-hover);
+  }
+  .kui-TextAreaRoot:where(.kui-variant-raised):where(:hover:not(:has(.kui-TextAreaInput:where(:focus,:disabled,:read-only)))) {
+    background-color: var(--field-fill-hover);
   }
-}
-.kui-TextAreaRoot:where(.kui-variant-raised):where(:has(.kui-TextAreaInput:focus)) {
-  -webkit-box-shadow: var(--shadow-2), 0 0 0 2px var(--focus-8);
-          box-shadow: var(--shadow-2), 0 0 0 2px var(--focus-8);
 }
 .kui-TextAreaRoot:where(.kui-variant-raised):where(:has(.kui-TextAreaInput:where(:autofill,[data-com-onepassword-filled]):not(:disabled,:-moz-read-only))) {
   background-image: linear-gradient(var(--focus-a2), var(--focus-a2));
-  box-shadow: var(--shadow-2);
+  box-shadow: inset 0 0 0 1px var(--focus-a5);
 }
 .kui-TextAreaRoot:where(.kui-variant-raised):where(:has(.kui-TextAreaInput:where(:autofill,[data-com-onepassword-filled]):not(:disabled,:read-only))) {
   background-image: linear-gradient(var(--focus-a2), var(--focus-a2));
-  -webkit-box-shadow: var(--shadow-2);
-          box-shadow: var(--shadow-2);
+  -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-raised):where(:has(.kui-TextAreaInput:where(:disabled,:-moz-read-only))) {
-  background-image: linear-gradient(var(--neutral-a2), var(--neutral-a2));
+.kui-TextAreaRoot:where(.kui-variant-raised):where(:has(.kui-TextAreaInput:-moz-read-only:not(:disabled))) {
+  background-color: transparent;
 }
-.kui-TextAreaRoot:where(.kui-variant-raised):where(:has(.kui-TextAreaInput:where(:disabled,:read-only))) {
-  background-image: linear-gradient(var(--neutral-a2), var(--neutral-a2));
+.kui-TextAreaRoot:where(.kui-variant-raised):where(:has(.kui-TextAreaInput:read-only:not(:disabled))) {
+  background-color: transparent;
+}
+.kui-TextAreaRoot:where(.kui-variant-raised):where(:has(.kui-TextAreaInput:disabled)) {
+  background-color: var(--field-fill-disabled);
+  -webkit-box-shadow: inset 0 0 0 1px var(--field-edge-disabled);
+          box-shadow: inset 0 0 0 1px var(--field-edge-disabled);
 }
 .kui-TextAreaInput:where(:-moz-read-only:not(:disabled)) {
   color: var(--neutral-a11);
@@ -20152,30 +19880,16 @@
 .kui-TextAreaRoot:where(:has(> .kui-TextAreaInput[aria-invalid='true'])) {
   --v-focus-color: var(--red-8);
 }
-.kui-TextAreaRoot:where(:has( > .kui-TextAreaInput[aria-invalid='true'])):where(.kui-variant-outline,.kui-variant-surface,.kui-variant-soft,.kui-variant-ghost) {
+.kui-TextAreaRoot:where(:has( > .kui-TextAreaInput[aria-invalid='true'])):where(.kui-variant-raised,.kui-variant-outline,.kui-variant-surface,.kui-variant-soft,.kui-variant-ghost) {
   -webkit-box-shadow: inset 0 0 0 1px var(--red-6);
           box-shadow: inset 0 0 0 1px var(--red-6);
 }
 @media (hover: hover) {
-  .kui-TextAreaRoot:where(:has( > .kui-TextAreaInput[aria-invalid='true'])):where(.kui-variant-outline,.kui-variant-surface,.kui-variant-soft,.kui-variant-ghost):where(:hover:not(:has(.kui-TextAreaInput:where(:focus,:disabled)))) {
+  .kui-TextAreaRoot:where(:has( > .kui-TextAreaInput[aria-invalid='true'])):where(.kui-variant-raised,.kui-variant-outline,.kui-variant-surface,.kui-variant-soft,.kui-variant-ghost):where(:hover:not(:has(.kui-TextAreaInput:where(:focus,:disabled)))) {
     -webkit-box-shadow: inset 0 0 0 1px var(--red-7);
             box-shadow: inset 0 0 0 1px var(--red-7);
   }
 }
-.kui-TextAreaRoot:where(:has( > .kui-TextAreaInput[aria-invalid='true'])):where(.kui-variant-raised) {
-  -webkit-box-shadow: var(--shadow-2), inset 0 0 0 1px var(--red-6);
-          box-shadow: var(--shadow-2), inset 0 0 0 1px var(--red-6);
-}
-@media (hover: hover) {
-  .kui-TextAreaRoot:where(:has( > .kui-TextAreaInput[aria-invalid='true'])):where(.kui-variant-raised):where(:hover:not(:has(.kui-TextAreaInput:where(:focus,:disabled)))) {
-    -webkit-box-shadow: var(--shadow-2), inset 0 0 0 1px var(--red-7);
-            box-shadow: var(--shadow-2), inset 0 0 0 1px var(--red-7);
-  }
-}
-.kui-TextAreaRoot:where(:has( > .kui-TextAreaInput[aria-invalid='true'])):where(.kui-variant-raised):where(:has(.kui-TextAreaInput:focus)) {
-  -webkit-box-shadow: var(--shadow-2), inset 0 0 0 1px var(--red-6), 0 0 0 2px var(--red-8);
-          box-shadow: var(--shadow-2), inset 0 0 0 1px var(--red-6), 0 0 0 2px var(--red-8);
-}
 .kui-TextAreaErrorMessage {
   font-family: var(--default-font-family);
   font-weight: var(--font-weight-regular);
@@ -20283,8 +19997,8 @@
 }
 :where(.kui-Toolbar[data-backdrop]) .kui-ToolbarGroup {
   background-color: var(--color-surface);
-  -webkit-box-shadow: var(--shadow-2);
-          box-shadow: var(--shadow-2);
+  -webkit-box-shadow: var(--control-chrome);
+          box-shadow: var(--control-chrome);
 }
 .kui-ToolbarGroup > :where(.kui-BaseButton) {
   --base-button-height: calc(var(--toolbar-control-height) - 2 * var(--toolbar-group-inset));
@@ -21176,19 +20890,17 @@
   --v-selection-color: var(--focus-a5);
   --v-focus-color: var(--focus-8);
   background-color: var(--color-surface);
-  -webkit-box-shadow: var(--shadow-2);
-          box-shadow: var(--shadow-2);
+  -webkit-box-shadow: var(--surface-chrome);
+          box-shadow: var(--surface-chrome);
 }
 @media (hover: hover) {
   .kui-ChatbarBox:where(.kui-variant-raised):where(:hover:not(:focus-within)):where(:not(.kui-ChatbarRoot:is([data-disabled],[data-readonly]) *)) {
     background-color: var(--accent-2);
-    -webkit-box-shadow: var(--shadow-3);
-            box-shadow: var(--shadow-3);
   }
 }
 .kui-ChatbarBox:where(.kui-variant-raised):where(:focus-within) {
-  -webkit-box-shadow: var(--shadow-2), 0 0 0 2px var(--v-focus-color, var(--focus-8));
-          box-shadow: var(--shadow-2), 0 0 0 2px var(--v-focus-color, var(--focus-8));
+  -webkit-box-shadow: var(--surface-chrome), 0 0 0 2px var(--v-focus-color, var(--focus-8));
+          box-shadow: var(--surface-chrome), 0 0 0 2px var(--v-focus-color, var(--focus-8));
 }
 @media (forced-colors: active) {
   .kui-ChatbarBox {