@womp/kookie-ui 0.25.1 → 0.26.0

package/components.css

@@ -631,8 +631,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);
@@ -918,8 +918,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) {
@@ -1205,8 +1205,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) {
@@ -2137,8 +2137,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);
@@ -2150,8 +2150,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;
@@ -2569,8 +2569,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);
 }
@@ -2895,7 +2895,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);
@@ -3005,20 +3005,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'])) {
@@ -3029,21 +3030,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']) {
@@ -3055,6 +3060,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);
@@ -3069,6 +3076,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;
@@ -3628,8 +3636,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);
@@ -3644,11 +3652,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);
@@ -3790,10 +3798,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: '';
@@ -3801,6 +3810,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;
@@ -3941,159 +3953,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(.kui-variant-soft)::before {
-  background-color: var(--accent-3);
-}
-.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(.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([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-solid) {
-  --checkbox-checked-hover: var(--accent-solid-hover);
-  --checkbox-checked-active: var(--accent-solid-active);
+.kui-BaseCheckboxRoot:where([aria-invalid='true']) {
+  --checkbox-edge: var(--red-8);
 }
-.kui-BaseCheckboxRoot:where(.kui-variant-soft) {
-  --checkbox-unchecked-hover: var(--accent-4);
-  --checkbox-unchecked-active: var(--accent-5);
+.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-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 {
@@ -4531,8 +4424,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;
 }
@@ -5094,7 +4987,7 @@
     outline: 2px solid Highlight;
     outline-offset: 2px;
   }
-  .kui-BaseMenuContent {
+  .kui-BaseMenuContent:not(:where(.kui-SidebarContent)) {
     border: 1px solid CanvasText;
   }
   .kui-BaseMenuSeparator {
@@ -6012,21 +5905,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);
@@ -6051,18 +5941,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);
@@ -6286,30 +6181,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);
@@ -7477,8 +7358,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;
@@ -7835,13 +7716,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: '';
@@ -7849,6 +7736,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;
@@ -7858,6 +7748,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: '';
@@ -7948,157 +7839,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(.kui-variant-soft):where(:focus-visible)::before {
-  outline-color: var(--accent-a8);
-}
-.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(: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-solid) {
-  --radio-checked-hover: var(--accent-solid-hover);
-  --radio-checked-active: var(--accent-solid-active);
+.kui-BaseRadioRoot:where([aria-invalid='true']) {
+  --radio-edge: var(--red-8);
 }
-.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 {
@@ -8459,8 +8222,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 {
@@ -9583,6 +9346,7 @@
     background-color: Highlight;
   }
   .kui-SegmentedControlItem:where([data-state='on']) {
+    forced-color-adjust: none;
     color: HighlightText;
   }
   .kui-SegmentedControlRoot:where([data-disabled]),
@@ -9622,8 +9386,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);
@@ -10051,11 +9815,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);
@@ -10063,25 +9826,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);
@@ -10225,30 +9982,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);
 }
@@ -10938,6 +10685,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;
@@ -10958,6 +10710,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;
@@ -11832,6 +11589,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;
@@ -12012,12 +11776,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;
 }
@@ -12193,7 +11960,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);
@@ -12206,7 +11973,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);
@@ -12235,7 +12002,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);
@@ -12248,7 +12015,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);
@@ -12286,7 +12053,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);
@@ -12299,7 +12066,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);
@@ -12338,7 +12105,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);
@@ -12351,7 +12118,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);
@@ -12390,7 +12157,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);
@@ -12403,7 +12170,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);
@@ -12442,7 +12209,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);
@@ -12455,7 +12222,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);
@@ -12494,7 +12261,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);
@@ -12507,7 +12274,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);
@@ -12532,7 +12299,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;
@@ -12569,8 +12336,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'],
@@ -12737,24 +12504,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);
 }
@@ -12784,8 +12539,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 {
@@ -12997,30 +12752,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;
@@ -13302,8 +13046,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: '';
@@ -13312,20 +13054,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);
@@ -13441,49 +13186,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);
@@ -14944,12 +14659,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);
@@ -14967,30 +14682,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);
@@ -15046,30 +14763,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);
@@ -15177,8 +14880,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));
@@ -16070,19 +15773,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 {