@ifhover/leaf-ui 0.6.0 → 0.7.0

package/dist/cjs/styles/index.css

@@ -1,4 +1,8 @@
 :root, :host {
+  --leaf-color-primary-ink: #20834a;
+  --leaf-color-primary-indicator: #20834a;
+  --leaf-color-primary-fill-border: transparent;
+  --leaf-color-primary-focus: #20834a6b;
   --leaf-color-option-hover: #ebebeb;
   --leaf-color-primary-text-80: #206f42;
   --leaf-color-success-text-80: #206f42;
@@ -123,6 +127,8 @@
   --leaf-color-on-warning: #202024;
   --leaf-color-primary-hover: #26864f;
   --leaf-color-primary-active: #1b6f3f;
+  --leaf-color-primary-ink-hover: #26864f;
+  --leaf-color-primary-ink-active: #1b6f3f;
   --leaf-color-danger-hover: #cb4848;
   --leaf-color-danger-active: #a33;
   --leaf-color-primary: #20834a;
@@ -167,6 +173,10 @@
 }
 
 [data-leaf-theme="light"] {
+  --leaf-color-primary-ink: #20834a;
+  --leaf-color-primary-indicator: #20834a;
+  --leaf-color-primary-fill-border: transparent;
+  --leaf-color-primary-focus: #20834a6b;
   --leaf-color-option-hover: #ebebeb;
   --leaf-color-primary-text-80: #206f42;
   --leaf-color-success-text-80: #206f42;
@@ -291,6 +301,8 @@
   --leaf-color-on-warning: #202024;
   --leaf-color-primary-hover: #26864f;
   --leaf-color-primary-active: #1b6f3f;
+  --leaf-color-primary-ink-hover: #26864f;
+  --leaf-color-primary-ink-active: #1b6f3f;
   --leaf-color-danger-hover: #cb4848;
   --leaf-color-danger-active: #a33;
   --leaf-color-primary: #20834a;
@@ -311,6 +323,10 @@
 }
 
 [data-leaf-theme="dark"] {
+  --leaf-color-primary-ink: #83cf9e;
+  --leaf-color-primary-indicator: #83cf9e;
+  --leaf-color-primary-fill-border: transparent;
+  --leaf-color-primary-focus: #83cf9e6b;
   --leaf-color-option-hover: #2f2f33;
   --leaf-color-primary-text-80: #98d5ae;
   --leaf-color-success-text-80: #98d5ae;
@@ -435,6 +451,8 @@
   --leaf-color-on-warning: #202024;
   --leaf-color-primary-hover: #8fd4a8;
   --leaf-color-primary-active: #6fb086;
+  --leaf-color-primary-ink-hover: #8fd4a8;
+  --leaf-color-primary-ink-active: #6fb086;
   --leaf-color-danger-hover: #f19191;
   --leaf-color-danger-active: #cb7171;
   --leaf-color-primary: #83cf9e;
@@ -514,12 +532,17 @@
 }
 
 .leaf-button {
+  --leaf-button-border-width: var(--leaf-component-button-border-width, var(--leaf-border-width, 1px));
   --leaf-button-color: var(--leaf-color-primary);
+  --leaf-button-ink: var(--leaf-color-primary-ink, var(--leaf-button-color));
+  --leaf-button-ink-hover: var(--leaf-color-primary-ink-hover, var(--leaf-button-hover));
+  --leaf-button-ink-active: var(--leaf-color-primary-ink-active, var(--leaf-button-active));
+  --leaf-button-fill-border: var(--leaf-color-primary-fill-border, transparent);
   --leaf-button-color-alpha-18: var(--leaf-color-primary-alpha-18);
   --leaf-button-color-alpha-25: var(--leaf-color-primary-alpha-25);
   --leaf-button-color-alpha-42: var(--leaf-color-primary-alpha-42);
   --leaf-button-on-color: var(--leaf-color-on-primary);
-  --leaf-focus-color: var(--leaf-button-color-alpha-42);
+  --leaf-focus-color: var(--leaf-color-primary-focus, var(--leaf-button-color-alpha-42));
   --leaf-button-hover: var(--leaf-color-primary-hover, var(--leaf-button-color));
   --leaf-button-active: var(--leaf-color-primary-active, var(--leaf-button-color));
   --leaf-button-soft-hover: var(--leaf-color-primary-soft-hover, var(--leaf-button-color-alpha-18));
@@ -531,6 +554,7 @@
   gap: var(--leaf-component-button-gap, 6px);
   min-height: var(--leaf-button-height, var(--leaf-current-control-height));
   padding: var(--leaf-component-button-padding, 0 calc(var(--leaf-button-height, var(--leaf-current-control-height)) * .42));
+  border: var(--leaf-button-border-width) solid #0000;
   border-radius: var(--leaf-component-button-radius, var(--leaf-button-radius, var(--leaf-radius)));
   font-family: var(--leaf-font-family);
   font-size: var(--leaf-component-button-font-size, var(--leaf-current-font-size));
@@ -544,7 +568,6 @@
   transition: background-color var(--leaf-motion-duration) var(--leaf-motion-easing),border-color var(--leaf-motion-duration) var(--leaf-motion-easing),color var(--leaf-motion-duration) var(--leaf-motion-easing),box-shadow var(--leaf-motion-duration) var(--leaf-motion-easing),opacity var(--leaf-motion-duration) var(--leaf-motion-easing);
   --leaf-current-font-size: var(--leaf-font-size);
   --leaf-current-control-height: var(--leaf-control-height, 36px);
-  border: 1px solid #0000;
   line-height: 1.5;
   text-decoration: none;
   display: inline-flex;
@@ -552,7 +575,7 @@
 }
 
 .leaf-button:focus-visible {
-  outline: 3px solid var(--leaf-color-focus, var(--leaf-focus-color, var(--leaf-color-primary-alpha-42)));
+  outline: 3px solid var(--leaf-color-focus, var(--leaf-focus-color, var(--leaf-color-primary-focus, var(--leaf-color-primary-alpha-42))));
   outline-offset: 2px;
 }
 
@@ -568,13 +591,13 @@
 
 .leaf-button__wave {
   z-index: 1;
+  inset: calc(-1*var(--leaf-button-border-width));
   box-sizing: border-box;
   border-radius: inherit;
   color: var(--leaf-button-color);
   opacity: 0;
   pointer-events: none;
   position: absolute;
-  inset: -1px;
   box-shadow: 0 0;
 }
 
@@ -615,6 +638,11 @@
 
 .leaf-button--danger {
   --leaf-button-color: var(--leaf-color-danger);
+  --leaf-button-ink: var(--leaf-button-color);
+  --leaf-button-ink-hover: var(--leaf-button-hover);
+  --leaf-button-ink-active: var(--leaf-button-active);
+  --leaf-button-fill-border: transparent;
+  --leaf-focus-color: var(--leaf-button-color-alpha-42);
   --leaf-button-color-alpha-18: var(--leaf-color-danger-alpha-18);
   --leaf-button-color-alpha-25: var(--leaf-color-danger-alpha-25);
   --leaf-button-color-alpha-42: var(--leaf-color-danger-alpha-42);
@@ -626,22 +654,6 @@
   --leaf-button-border: var(--leaf-button-color-alpha-42);
 }
 
-.leaf-button--solid {
-  color: var(--leaf-button-on-color);
-  background: var(--leaf-button-color);
-  box-shadow: none;
-  border-color: #0000;
-}
-
-.leaf-button--solid:hover:not(:disabled) {
-  background: var(--leaf-button-hover);
-}
-
-.leaf-button--solid:active:not(:disabled) {
-  background: var(--leaf-button-active);
-  box-shadow: none;
-}
-
 .leaf-button--ghost {
   color: var(--leaf-color-text);
   background: none;
@@ -669,28 +681,6 @@
   background: var(--leaf-button-soft-active);
 }
 
-.leaf-button--outline {
-  color: var(--leaf-color-text);
-  background: var(--leaf-color-surface);
-  border-color: var(--leaf-component-button-border-color, var(--leaf-color-border));
-  box-shadow: var(--leaf-component-button-shadow, 0 1px 2px #0000000a);
-}
-
-.leaf-button--outline:hover:not(:disabled) {
-  color: var(--leaf-button-hover);
-  border-color: var(--leaf-button-hover);
-}
-
-.leaf-button--outline:active:not(:disabled) {
-  color: var(--leaf-button-active);
-  border-color: var(--leaf-button-active);
-}
-
-.leaf-button--danger.leaf-button--outline {
-  color: var(--leaf-color-danger);
-  border-color: var(--leaf-component-button-border-color, var(--leaf-button-border));
-}
-
 .leaf-button--icon-only {
   width: var(--leaf-button-height, var(--leaf-current-control-height));
   padding: 0;
@@ -701,24 +691,13 @@
 }
 
 .leaf-button--link {
-  min-height: 0;
-  color: var(--leaf-button-color);
-  box-shadow: none;
-  background: none;
   border: 0;
   border-radius: 0;
   align-self: center;
+  min-height: 0;
   padding: 0;
 }
 
-.leaf-button--link:hover:not(:disabled) {
-  color: var(--leaf-button-hover);
-}
-
-.leaf-button--link:active:not(:disabled) {
-  color: var(--leaf-button-active);
-}
-
 .leaf-button--link.leaf-button--icon-only {
   width: auto;
 }
@@ -737,6 +716,111 @@
   height: 100%;
 }
 
+.leaf-button.leaf-button--solid {
+  --leaf-button-rest-color: var(--leaf-button-on-color);
+  --leaf-button-rest-background: var(--leaf-button-color);
+  --leaf-button-rest-border: var(--leaf-button-fill-border);
+  --leaf-button-rest-shadow: none;
+  --leaf-button-hover-color: var(--leaf-button-rest-color);
+  --leaf-button-hover-background: var(--leaf-button-hover);
+  --leaf-button-hover-border: var(--leaf-button-rest-border);
+  --leaf-button-active-color: var(--leaf-button-rest-color);
+  --leaf-button-active-background: var(--leaf-button-active);
+  --leaf-button-active-border: var(--leaf-button-rest-border);
+}
+
+.leaf-button.leaf-button--outline {
+  --leaf-button-rest-color: var(--leaf-color-text);
+  --leaf-button-rest-background: var(--leaf-color-surface);
+  --leaf-button-rest-border: var(--leaf-color-border);
+  --leaf-button-rest-shadow: 0 1px 2px #0000000a;
+  --leaf-button-hover-color: var(--leaf-button-ink-hover);
+  --leaf-button-hover-background: var(--leaf-button-rest-background);
+  --leaf-button-hover-border: var(--leaf-button-ink-hover);
+  --leaf-button-active-color: var(--leaf-button-ink-active);
+  --leaf-button-active-background: var(--leaf-button-rest-background);
+  --leaf-button-active-border: var(--leaf-button-ink-active);
+}
+
+.leaf-button.leaf-button--outline.leaf-button--danger {
+  --leaf-button-rest-color: var(--leaf-button-color);
+  --leaf-button-rest-border: var(--leaf-button-border);
+}
+
+.leaf-button.leaf-button--soft {
+  --leaf-button-rest-color: var(--leaf-color-text);
+  --leaf-button-rest-background: var(--leaf-color-surface-muted);
+  --leaf-button-rest-border: transparent;
+  --leaf-button-rest-shadow: none;
+  --leaf-button-hover-color: var(--leaf-button-rest-color);
+  --leaf-button-hover-background: var(--leaf-color-option-hover);
+  --leaf-button-hover-border: transparent;
+  --leaf-button-active-color: var(--leaf-button-rest-color);
+  --leaf-button-active-background: color-mix(in srgb, var(--leaf-color-text) 14%, var(--leaf-color-surface));
+  --leaf-button-active-border: transparent;
+}
+
+.leaf-button.leaf-button--soft.leaf-button--danger {
+  --leaf-button-rest-color: var(--leaf-button-color);
+  --leaf-button-rest-background: var(--leaf-color-danger-surface-6);
+  --leaf-button-hover-color: var(--leaf-button-hover);
+  --leaf-button-hover-background: var(--leaf-button-soft-hover);
+  --leaf-button-active-color: var(--leaf-button-active);
+  --leaf-button-active-background: var(--leaf-button-soft-active);
+}
+
+.leaf-button.leaf-button--link {
+  --leaf-button-rest-color: var(--leaf-button-ink);
+  --leaf-button-rest-background: transparent;
+  --leaf-button-rest-border: transparent;
+  --leaf-button-rest-shadow: none;
+  --leaf-button-hover-color: var(--leaf-button-ink-hover);
+  --leaf-button-hover-background: transparent;
+  --leaf-button-hover-border: transparent;
+  --leaf-button-active-color: var(--leaf-button-ink-active);
+  --leaf-button-active-background: transparent;
+  --leaf-button-active-border: transparent;
+}
+
+.leaf-button:is(.leaf-button--solid, .leaf-button--outline, .leaf-button--soft, .leaf-button--link) {
+  --leaf-button-base-color: var(--leaf-component-button-color, var(--leaf-button-rest-color));
+  --leaf-button-base-background: var(--leaf-component-button-background, var(--leaf-button-rest-background));
+  --leaf-button-base-border: var(--leaf-component-button-border-color, var(--leaf-frame-border-color, var(--leaf-button-rest-border)));
+  --leaf-button-base-shadow: var(--leaf-component-button-shadow, var(--leaf-control-shadow, var(--leaf-button-rest-shadow)));
+  color: var(--leaf-button-base-color);
+  background: var(--leaf-button-base-background);
+  border-color: var(--leaf-button-base-border);
+  box-shadow: var(--leaf-button-base-shadow);
+}
+
+.leaf-button:is(.leaf-button--solid, .leaf-button--outline, .leaf-button--soft, .leaf-button--link):focus-visible:not(:disabled) {
+  color: var(--leaf-component-button-focus-color, var(--leaf-button-base-color));
+  background: var(--leaf-component-button-focus-background, var(--leaf-button-base-background));
+  border-color: var(--leaf-component-button-focus-border-color, var(--leaf-button-base-border));
+  box-shadow: var(--leaf-component-button-focus-shadow, var(--leaf-button-base-shadow));
+}
+
+.leaf-button:is(.leaf-button--solid, .leaf-button--outline, .leaf-button--soft, .leaf-button--link):hover:not(:disabled):not([data-loading]):where(:not(:focus-visible)) {
+  color: var(--leaf-component-button-hover-color, var(--leaf-button-hover-color));
+  background: var(--leaf-component-button-hover-background, var(--leaf-button-hover-background));
+  border-color: var(--leaf-component-button-hover-border-color, var(--leaf-component-button-border-color, var(--leaf-frame-border-color, var(--leaf-button-hover-border))));
+  box-shadow: var(--leaf-component-button-hover-shadow, var(--leaf-button-base-shadow));
+}
+
+.leaf-button:is(.leaf-button--solid, .leaf-button--outline, .leaf-button--soft, .leaf-button--link):active:not(:disabled):not([data-loading]) {
+  color: var(--leaf-component-button-active-color, var(--leaf-button-active-color));
+  background: var(--leaf-component-button-active-background, var(--leaf-button-active-background));
+  border-color: var(--leaf-component-button-active-border-color, var(--leaf-component-button-border-color, var(--leaf-frame-border-color, var(--leaf-button-active-border))));
+  box-shadow: var(--leaf-component-button-active-shadow, var(--leaf-button-base-shadow));
+}
+
+.leaf-button:is(.leaf-button--solid, .leaf-button--outline, .leaf-button--soft, .leaf-button--link):disabled {
+  color: var(--leaf-component-button-disabled-color, var(--leaf-button-base-color));
+  background: var(--leaf-component-button-disabled-background, var(--leaf-button-base-background));
+  border-color: var(--leaf-component-button-disabled-border-color, var(--leaf-button-base-border));
+  box-shadow: var(--leaf-component-button-disabled-shadow, var(--leaf-button-base-shadow));
+}
+
 @keyframes leaf-spin {
   to {
     transform: rotate(360deg);
@@ -762,16 +846,16 @@
     display: none;
   }
 
-  .leaf-button {
+  .leaf-button:is(.leaf-button--solid, .leaf-button--outline, .leaf-button--soft, .leaf-button--link, .leaf-button--ghost) {
     border-color: buttontext;
   }
 
-  .leaf-button:disabled {
+  .leaf-button:is(.leaf-button--solid, .leaf-button--outline, .leaf-button--soft, .leaf-button--link, .leaf-button--ghost):disabled {
     color: graytext;
     border-color: graytext;
   }
 
-  .leaf-button:focus-visible {
+  .leaf-button:is(.leaf-button--solid, .leaf-button--outline, .leaf-button--soft, .leaf-button--link, .leaf-button--ghost):focus-visible {
     outline-color: highlight;
   }
 }
@@ -793,7 +877,7 @@
 .leaf-button-group--attached > .leaf-button:not(:first-child) {
   border-start-start-radius: 0;
   border-end-start-radius: 0;
-  margin-inline-start: -1px;
+  margin-inline-start: calc(-1*var(--leaf-button-border-width));
 }
 
 .leaf-button-group--attached > .leaf-button:not(:last-child) {
@@ -821,11 +905,11 @@
 }
 
 .leaf-split-button > .leaf-button--outline {
-  --leaf-split-button-divider-color: var(--leaf-component-button-border-color, var(--leaf-color-border));
+  --leaf-split-button-divider-color: var(--leaf-component-button-border-color, var(--leaf-frame-border-color, var(--leaf-color-border)));
 }
 
 .leaf-split-button > .leaf-button--outline.leaf-button--danger {
-  --leaf-split-button-divider-color: var(--leaf-component-button-border-color, var(--leaf-button-border));
+  --leaf-split-button-divider-color: var(--leaf-component-button-border-color, var(--leaf-frame-border-color, var(--leaf-button-border)));
 }
 
 .leaf-split-button > .leaf-button--outline:first-child {
@@ -843,7 +927,7 @@
 .leaf-split-button > .leaf-button + .leaf-button:before {
   content: "";
   z-index: 2;
-  background: var(--leaf-component-button-border-color, var(--leaf-color-border));
+  background: var(--leaf-component-button-border-color, var(--leaf-frame-border-color, var(--leaf-color-border)));
   pointer-events: none;
   width: 1px;
   position: absolute;
@@ -894,18 +978,23 @@
 }
 
 .leaf-input {
-  --leaf-field-color: var(--leaf-color-primary);
+  --leaf-field-color: var(--leaf-color-primary-indicator, var(--leaf-color-primary));
   --leaf-field-color-alpha-12: var(--leaf-color-primary-alpha-12);
   --leaf-field-color-border-30: var(--leaf-color-primary-border-30);
   --leaf-field-hover-color: var(--leaf-color-border-hover, var(--leaf-field-color));
+  --leaf-field-border-width: var(--leaf-component-input-border-width, var(--leaf-border-width, 1px));
+  --leaf-field-text: var(--leaf-component-input-color, var(--leaf-color-text));
+  --leaf-field-rest-border: var(--leaf-component-input-border-color, var(--leaf-frame-border-color, var(--leaf-color-border)));
+  --leaf-field-background: var(--leaf-component-input-background, var(--leaf-color-surface));
+  --leaf-field-shadow: var(--leaf-component-input-shadow, var(--leaf-control-shadow, 0 0 0 0 transparent));
   box-sizing: border-box;
-  border: 1px solid var(--leaf-color-border);
+  border: var(--leaf-field-border-width) solid var(--leaf-component-input-border-color, var(--leaf-frame-border-color, var(--leaf-color-border)));
   border-radius: var(--leaf-component-input-radius, var(--leaf-radius));
   width: 100%;
   min-width: 0;
   color: var(--leaf-component-input-color, var(--leaf-color-text));
   background: var(--leaf-component-input-background, var(--leaf-color-surface));
-  box-shadow: var(--leaf-component-input-shadow, none);
+  box-shadow: var(--leaf-field-shadow);
   font-family: var(--leaf-font-family);
   font-size: var(--leaf-component-input-font-size, var(--leaf-current-font-size));
   line-height: var(--leaf-line-height, 1.5);
@@ -913,6 +1002,7 @@
 }
 
 .leaf-input[data-status="error"] {
+  --leaf-field-rest-border: var(--leaf-field-color);
   --leaf-field-color: var(--leaf-color-danger);
   --leaf-field-color-alpha-12: var(--leaf-color-danger-alpha-12);
   --leaf-field-color-border-30: var(--leaf-color-danger-border-30);
@@ -921,6 +1011,7 @@
 }
 
 .leaf-input[data-status="warning"] {
+  --leaf-field-rest-border: var(--leaf-field-color);
   --leaf-field-color: var(--leaf-color-warning);
   --leaf-field-color-alpha-12: var(--leaf-color-warning-alpha-12);
   --leaf-field-color-border-30: var(--leaf-color-warning-border-30);
@@ -928,33 +1019,53 @@
   border-color: var(--leaf-field-color);
 }
 
-.leaf-input:hover:not([data-disabled]):not(:disabled):not(:focus-within):not([data-open]) {
-  border-color: var(--leaf-field-hover-color);
+.leaf-input[data-disabled], .leaf-input:disabled {
+  opacity: .55;
+  cursor: not-allowed;
 }
 
-.leaf-input:focus-within, .leaf-input[data-open] {
-  border-color: var(--leaf-field-color);
-  box-shadow: 0 0 0 3px var(--leaf-field-color-alpha-12);
+.leaf-input:hover:not([data-disabled]):not(:disabled):where(:not(:focus-within):not([data-open])) {
+  color: var(--leaf-component-input-hover-color, var(--leaf-field-text));
+  background: var(--leaf-component-input-hover-background, var(--leaf-field-background));
+  border-color: var(--leaf-component-input-hover-border-color, var(--leaf-field-hover-color));
+  box-shadow: var(--leaf-component-input-hover-shadow, var(--leaf-field-shadow));
 }
 
-.leaf-input[data-disabled], .leaf-input:disabled {
-  background: var(--leaf-color-surface-muted);
-  opacity: .55;
-  cursor: not-allowed;
+.leaf-input:is(:focus-within, [data-open]):not([data-disabled]):not(:disabled) {
+  color: var(--leaf-component-input-focus-color, var(--leaf-field-text));
+  background: var(--leaf-component-input-focus-background, var(--leaf-field-background));
+  border-color: var(--leaf-component-input-focus-border-color, var(--leaf-field-color));
+  box-shadow: var(--leaf-component-input-focus-shadow, var(--leaf-field-shadow));
+  outline: 3px solid var(--leaf-color-focus, var(--leaf-field-color-alpha-12));
+  outline-offset: 0;
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .leaf-input {
-    transition: none;
-  }
+.leaf-input:active:not([data-disabled]):not(:disabled) {
+  color: var(--leaf-component-input-active-color, var(--leaf-field-text));
+  background: var(--leaf-component-input-active-background, var(--leaf-field-background));
+  border-color: var(--leaf-component-input-active-border-color, var(--leaf-field-hover-color));
+  box-shadow: var(--leaf-component-input-active-shadow, var(--leaf-field-shadow));
+}
+
+.leaf-input[data-disabled], .leaf-input:disabled {
+  color: var(--leaf-component-input-disabled-color, var(--leaf-field-text));
+  background: var(--leaf-component-input-disabled-background, var(--leaf-color-surface-muted));
+  border-color: var(--leaf-component-input-disabled-border-color, var(--leaf-field-rest-border));
+  box-shadow: var(--leaf-component-input-disabled-shadow, var(--leaf-field-shadow));
 }
 
 @media (forced-colors: active) {
-  .leaf-input:focus-within {
+  .leaf-input:is(:focus-within, [data-open]):not([data-disabled]):not(:disabled) {
     outline: 2px solid highlight;
   }
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .leaf-input {
+    transition: none;
+  }
+}
+
 .leaf-input {
   align-items: center;
   gap: var(--leaf-component-input-gap, 8px);
@@ -1050,7 +1161,7 @@
 }
 
 .leaf-input__visibility:focus-visible, .leaf-input__clear:focus-visible {
-  outline: 3px solid var(--leaf-color-focus, var(--leaf-focus-color, var(--leaf-color-primary-alpha-42)));
+  outline: 3px solid var(--leaf-color-focus, var(--leaf-focus-color, var(--leaf-color-primary-focus, var(--leaf-color-primary-alpha-42))));
   outline-offset: 2px;
 }
 
@@ -1095,7 +1206,7 @@
 .leaf-input-group--compact > :not(:first-child) {
   border-start-start-radius: 0;
   border-end-start-radius: 0;
-  margin-inline-start: -1px;
+  margin-inline-start: calc(-1*var(--leaf-field-border-width, var(--leaf-button-border-width, var(--leaf-border-width, 1px))));
 }
 
 .leaf-input-group--compact > :not(:last-child) {
@@ -1134,18 +1245,23 @@
 }
 
 .leaf-textarea {
-  --leaf-field-color: var(--leaf-color-primary);
+  --leaf-field-color: var(--leaf-color-primary-indicator, var(--leaf-color-primary));
   --leaf-field-color-alpha-12: var(--leaf-color-primary-alpha-12);
   --leaf-field-color-border-30: var(--leaf-color-primary-border-30);
   --leaf-field-hover-color: var(--leaf-color-border-hover, var(--leaf-field-color));
+  --leaf-field-border-width: var(--leaf-component-textarea-border-width, var(--leaf-border-width, 1px));
+  --leaf-field-text: var(--leaf-component-textarea-color, var(--leaf-color-text));
+  --leaf-field-rest-border: var(--leaf-component-textarea-border-color, var(--leaf-frame-border-color, var(--leaf-color-border)));
+  --leaf-field-background: var(--leaf-component-textarea-background, var(--leaf-color-surface));
+  --leaf-field-shadow: var(--leaf-component-textarea-shadow, var(--leaf-control-shadow, 0 0 0 0 transparent));
   box-sizing: border-box;
-  border: 1px solid var(--leaf-color-border);
+  border: var(--leaf-field-border-width) solid var(--leaf-component-textarea-border-color, var(--leaf-frame-border-color, var(--leaf-color-border)));
   border-radius: var(--leaf-component-textarea-radius, var(--leaf-radius));
   width: 100%;
   min-width: 0;
   color: var(--leaf-component-textarea-color, var(--leaf-color-text));
   background: var(--leaf-component-textarea-background, var(--leaf-color-surface));
-  box-shadow: var(--leaf-component-textarea-shadow, none);
+  box-shadow: var(--leaf-field-shadow);
   font-family: var(--leaf-font-family);
   font-size: var(--leaf-component-textarea-font-size, var(--leaf-current-font-size));
   line-height: var(--leaf-line-height, 1.5);
@@ -1153,6 +1269,7 @@
 }
 
 .leaf-textarea[data-status="error"] {
+  --leaf-field-rest-border: var(--leaf-field-color);
   --leaf-field-color: var(--leaf-color-danger);
   --leaf-field-color-alpha-12: var(--leaf-color-danger-alpha-12);
   --leaf-field-color-border-30: var(--leaf-color-danger-border-30);
@@ -1161,6 +1278,7 @@
 }
 
 .leaf-textarea[data-status="warning"] {
+  --leaf-field-rest-border: var(--leaf-field-color);
   --leaf-field-color: var(--leaf-color-warning);
   --leaf-field-color-alpha-12: var(--leaf-color-warning-alpha-12);
   --leaf-field-color-border-30: var(--leaf-color-warning-border-30);
@@ -1168,33 +1286,53 @@
   border-color: var(--leaf-field-color);
 }
 
-.leaf-textarea:hover:not([data-disabled]):not(:disabled):not(:focus-within):not([data-open]) {
-  border-color: var(--leaf-field-hover-color);
+.leaf-textarea[data-disabled], .leaf-textarea:disabled {
+  opacity: .55;
+  cursor: not-allowed;
 }
 
-.leaf-textarea:focus-within, .leaf-textarea[data-open] {
-  border-color: var(--leaf-field-color);
-  box-shadow: 0 0 0 3px var(--leaf-field-color-alpha-12);
+.leaf-textarea:hover:not([data-disabled]):not(:disabled):where(:not(:focus-within):not([data-open])) {
+  color: var(--leaf-component-textarea-hover-color, var(--leaf-field-text));
+  background: var(--leaf-component-textarea-hover-background, var(--leaf-field-background));
+  border-color: var(--leaf-component-textarea-hover-border-color, var(--leaf-field-hover-color));
+  box-shadow: var(--leaf-component-textarea-hover-shadow, var(--leaf-field-shadow));
 }
 
-.leaf-textarea[data-disabled], .leaf-textarea:disabled {
-  background: var(--leaf-color-surface-muted);
-  opacity: .55;
-  cursor: not-allowed;
+.leaf-textarea:is(:focus-within, [data-open]):not([data-disabled]):not(:disabled) {
+  color: var(--leaf-component-textarea-focus-color, var(--leaf-field-text));
+  background: var(--leaf-component-textarea-focus-background, var(--leaf-field-background));
+  border-color: var(--leaf-component-textarea-focus-border-color, var(--leaf-field-color));
+  box-shadow: var(--leaf-component-textarea-focus-shadow, var(--leaf-field-shadow));
+  outline: 3px solid var(--leaf-color-focus, var(--leaf-field-color-alpha-12));
+  outline-offset: 0;
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .leaf-textarea {
-    transition: none;
-  }
+.leaf-textarea:active:not([data-disabled]):not(:disabled) {
+  color: var(--leaf-component-textarea-active-color, var(--leaf-field-text));
+  background: var(--leaf-component-textarea-active-background, var(--leaf-field-background));
+  border-color: var(--leaf-component-textarea-active-border-color, var(--leaf-field-hover-color));
+  box-shadow: var(--leaf-component-textarea-active-shadow, var(--leaf-field-shadow));
+}
+
+.leaf-textarea[data-disabled], .leaf-textarea:disabled {
+  color: var(--leaf-component-textarea-disabled-color, var(--leaf-field-text));
+  background: var(--leaf-component-textarea-disabled-background, var(--leaf-color-surface-muted));
+  border-color: var(--leaf-component-textarea-disabled-border-color, var(--leaf-field-rest-border));
+  box-shadow: var(--leaf-component-textarea-disabled-shadow, var(--leaf-field-shadow));
 }
 
 @media (forced-colors: active) {
-  .leaf-textarea:focus-within {
+  .leaf-textarea:is(:focus-within, [data-open]):not([data-disabled]):not(:disabled) {
     outline: 2px solid highlight;
   }
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .leaf-textarea {
+    transition: none;
+  }
+}
+
 .leaf-textarea {
   min-height: calc(var(--leaf-current-control-height)*2);
   padding: var(--leaf-component-textarea-padding, var(--leaf-spacing-sm) var(--leaf-density-field-padding));
@@ -1266,7 +1404,7 @@
   box-sizing: border-box;
   min-height: var(--leaf-current-control-height);
   max-width: 100%;
-  color: var(--leaf-color-text);
+  color: var(--leaf-component-checkbox-color, var(--leaf-color-text));
   font-family: var(--leaf-font-family);
   font-size: var(--leaf-current-font-size);
   cursor: pointer;
@@ -1292,8 +1430,8 @@
 
 .leaf-checkbox__input {
   box-sizing: border-box;
-  border: 1px solid var(--leaf-color-border);
-  background: var(--leaf-color-surface);
+  border: var(--leaf-component-checkbox-border-width, var(--leaf-border-width, 1px)) solid var(--leaf-component-checkbox-border-color, var(--leaf-frame-border-color, var(--leaf-color-border)));
+  background: var(--leaf-component-checkbox-background, var(--leaf-color-surface));
   appearance: none;
   width: 18px;
   height: 18px;
@@ -1303,23 +1441,15 @@
 }
 
 .leaf-checkbox__input:checked, .leaf-checkbox__input:indeterminate {
-  border-color: var(--leaf-color-primary);
-  background: var(--leaf-color-primary);
-}
-
-.leaf-checkbox__input:hover:not(:disabled) {
-  border-color: var(--leaf-color-primary);
+  border-color: var(--leaf-frame-border-color, var(--leaf-color-primary-indicator, var(--leaf-color-primary)));
+  background: var(--leaf-color-primary-indicator, var(--leaf-color-primary));
 }
 
 .leaf-checkbox__input:focus-visible {
-  outline: 3px solid var(--leaf-color-focus, var(--leaf-focus-color, var(--leaf-color-primary-alpha-42)));
+  outline: 3px solid var(--leaf-color-focus, var(--leaf-focus-color, var(--leaf-color-primary-focus, var(--leaf-color-primary-alpha-42))));
   outline-offset: 2px;
 }
 
-.leaf-checkbox:hover:not([data-disabled]) .leaf-checkbox__input {
-  border-color: var(--leaf-color-primary);
-}
-
 @media (prefers-reduced-motion: reduce) {
   .leaf-checkbox__input, .leaf-checkbox__mark {
     transition: none;
@@ -1392,11 +1522,11 @@
   width: 100%;
   min-height: calc(var(--leaf-current-control-height) + 24px);
   padding: var(--leaf-component-checkbox-padding, calc(var(--leaf-spacing) * 1.75));
-  border: 1px solid var(--leaf-component-checkbox-border-color, var(--leaf-color-border));
+  border: var(--leaf-component-checkbox-border-width, var(--leaf-border-width, 1px)) solid var(--leaf-component-checkbox-border-color, var(--leaf-frame-border-color, var(--leaf-color-border)));
   border-radius: var(--leaf-component-checkbox-radius, var(--leaf-radius-md));
   color: var(--leaf-component-checkbox-color, var(--leaf-color-text));
   background: var(--leaf-component-checkbox-background, var(--leaf-color-surface));
-  box-shadow: var(--leaf-component-checkbox-shadow, none);
+  box-shadow: var(--leaf-component-checkbox-shadow, var(--leaf-surface-shadow, none));
   transition: border-color var(--leaf-motion-duration) var(--leaf-motion-easing),background-color var(--leaf-motion-duration) var(--leaf-motion-easing),box-shadow var(--leaf-motion-duration) var(--leaf-motion-easing);
 }
 
@@ -1423,11 +1553,11 @@
 }
 
 :is(.leaf-checkbox--card:has(.leaf-checkbox__input:checked), .leaf-checkbox--card:has(.leaf-checkbox__input:indeterminate)) {
-  border-color: var(--leaf-color-primary);
+  border-color: var(--leaf-color-primary-indicator, var(--leaf-color-primary));
 }
 
 .leaf-checkbox--card:has(.leaf-checkbox__input:focus-visible) {
-  outline: 3px solid var(--leaf-color-focus, var(--leaf-focus-color, var(--leaf-color-primary-alpha-42)));
+  outline: 3px solid var(--leaf-color-focus, var(--leaf-focus-color, var(--leaf-color-primary-focus, var(--leaf-color-primary-alpha-42))));
   outline-offset: 2px;
 }
 
@@ -1552,7 +1682,7 @@
 }
 
 .leaf-checkbox-group--list .leaf-checkbox-group__options {
-  border: 1px solid var(--leaf-component-checkbox-border-color, var(--leaf-color-border));
+  border: var(--leaf-component-checkbox-border-width, var(--leaf-border-width, 1px)) solid var(--leaf-component-checkbox-border-color, var(--leaf-frame-border-color, var(--leaf-color-border)));
   border-radius: var(--leaf-component-checkbox-radius, var(--leaf-radius-md));
   background: var(--leaf-component-checkbox-background, var(--leaf-color-surface));
   flex-direction: column;
@@ -1587,6 +1717,62 @@
   background: var(--leaf-color-surface-muted);
 }
 
+.leaf-checkbox:hover:not([data-disabled]):where(:not(:has(input:focus-visible))) {
+  color: var(--leaf-component-checkbox-hover-color, var(--leaf-component-checkbox-color, var(--leaf-color-text)));
+}
+
+.leaf-checkbox:active:not([data-disabled]) {
+  color: var(--leaf-component-checkbox-active-color, var(--leaf-component-checkbox-color, var(--leaf-color-text)));
+}
+
+.leaf-checkbox:where(:has(input:focus-visible)):not([data-disabled]) {
+  color: var(--leaf-component-checkbox-focus-color, var(--leaf-component-checkbox-color, var(--leaf-color-text)));
+}
+
+.leaf-checkbox[data-disabled] {
+  color: var(--leaf-component-checkbox-disabled-color, var(--leaf-component-checkbox-color, var(--leaf-color-text)));
+}
+
+.leaf-checkbox__input {
+  --leaf-choice-background: var(--leaf-component-checkbox-background, var(--leaf-color-surface));
+  --leaf-choice-border: var(--leaf-component-checkbox-border-color, var(--leaf-frame-border-color, var(--leaf-color-border)));
+  --leaf-choice-shadow: var(--leaf-component-checkbox-shadow, var(--leaf-control-shadow, var(--leaf-shadow-xs)));
+  box-shadow: var(--leaf-choice-shadow);
+}
+
+.leaf-checkbox__input:checked, .leaf-checkbox__input:indeterminate {
+  --leaf-choice-background: var(--leaf-color-primary-indicator, var(--leaf-color-primary));
+  --leaf-choice-border: var(--leaf-frame-border-color, var(--leaf-color-primary-indicator, var(--leaf-color-primary)));
+}
+
+.leaf-checkbox__input:focus-visible:not(:disabled) {
+  color: var(--leaf-component-checkbox-focus-color, inherit);
+  background: var(--leaf-component-checkbox-focus-background, var(--leaf-choice-background));
+  border-color: var(--leaf-component-checkbox-focus-border-color, var(--leaf-choice-border));
+  box-shadow: var(--leaf-component-checkbox-focus-shadow, var(--leaf-choice-shadow));
+}
+
+.leaf-checkbox__input:disabled {
+  color: var(--leaf-component-checkbox-disabled-color, inherit);
+  background: var(--leaf-component-checkbox-disabled-background, var(--leaf-choice-background));
+  border-color: var(--leaf-component-checkbox-disabled-border-color, var(--leaf-choice-border));
+  box-shadow: var(--leaf-component-checkbox-disabled-shadow, var(--leaf-choice-shadow));
+}
+
+.leaf-checkbox:hover:not([data-disabled]) .leaf-checkbox__input:not(:disabled):where(:not(:focus-visible)) {
+  color: var(--leaf-component-checkbox-hover-color, inherit);
+  background: var(--leaf-component-checkbox-hover-background, var(--leaf-choice-background));
+  border-color: var(--leaf-component-checkbox-hover-border-color, var(--leaf-color-primary-indicator, var(--leaf-color-primary)));
+  box-shadow: var(--leaf-component-checkbox-hover-shadow, var(--leaf-choice-shadow));
+}
+
+.leaf-checkbox:active:not([data-disabled]) .leaf-checkbox__input:not(:disabled) {
+  color: var(--leaf-component-checkbox-active-color, inherit);
+  background: var(--leaf-component-checkbox-active-background, var(--leaf-choice-background));
+  border-color: var(--leaf-component-checkbox-active-border-color, var(--leaf-color-primary-indicator, var(--leaf-color-primary)));
+  box-shadow: var(--leaf-component-checkbox-active-shadow, var(--leaf-choice-shadow));
+}
+
 .leaf-radio {
   --leaf-current-font-size: var(--leaf-font-size);
   --leaf-current-control-height: var(--leaf-control-height, 36px);
@@ -1606,7 +1792,7 @@
   box-sizing: border-box;
   min-height: var(--leaf-current-control-height);
   max-width: 100%;
-  color: var(--leaf-color-text);
+  color: var(--leaf-component-radio-color, var(--leaf-color-text));
   font-family: var(--leaf-font-family);
   font-size: var(--leaf-current-font-size);
   cursor: pointer;
@@ -1632,8 +1818,8 @@
 
 .leaf-radio__input {
   box-sizing: border-box;
-  border: 1px solid var(--leaf-color-border);
-  background: var(--leaf-color-surface);
+  border: var(--leaf-component-radio-border-width, var(--leaf-border-width, 1px)) solid var(--leaf-component-radio-border-color, var(--leaf-frame-border-color, var(--leaf-color-border)));
+  background: var(--leaf-component-radio-background, var(--leaf-color-surface));
   appearance: none;
   width: 18px;
   height: 18px;
@@ -1643,23 +1829,15 @@
 }
 
 .leaf-radio__input:checked, .leaf-radio__input:indeterminate {
-  border-color: var(--leaf-color-primary);
-  background: var(--leaf-color-primary);
-}
-
-.leaf-radio__input:hover:not(:disabled) {
-  border-color: var(--leaf-color-primary);
+  border-color: var(--leaf-frame-border-color, var(--leaf-color-primary-indicator, var(--leaf-color-primary)));
+  background: var(--leaf-color-primary-indicator, var(--leaf-color-primary));
 }
 
 .leaf-radio__input:focus-visible {
-  outline: 3px solid var(--leaf-color-focus, var(--leaf-focus-color, var(--leaf-color-primary-alpha-42)));
+  outline: 3px solid var(--leaf-color-focus, var(--leaf-focus-color, var(--leaf-color-primary-focus, var(--leaf-color-primary-alpha-42))));
   outline-offset: 2px;
 }
 
-.leaf-radio:hover:not([data-disabled]) .leaf-radio__input {
-  border-color: var(--leaf-color-primary);
-}
-
 @media (prefers-reduced-motion: reduce) {
   .leaf-radio__input, .leaf-radio__mark {
     transition: none;
@@ -1732,11 +1910,11 @@
   width: 100%;
   min-height: calc(var(--leaf-current-control-height) + 24px);
   padding: var(--leaf-component-radio-padding, calc(var(--leaf-spacing) * 1.75));
-  border: 1px solid var(--leaf-component-radio-border-color, var(--leaf-color-border));
+  border: var(--leaf-component-radio-border-width, var(--leaf-border-width, 1px)) solid var(--leaf-component-radio-border-color, var(--leaf-frame-border-color, var(--leaf-color-border)));
   border-radius: var(--leaf-component-radio-radius, var(--leaf-radius-md));
   color: var(--leaf-component-radio-color, var(--leaf-color-text));
   background: var(--leaf-component-radio-background, var(--leaf-color-surface));
-  box-shadow: var(--leaf-component-radio-shadow, none);
+  box-shadow: var(--leaf-component-radio-shadow, var(--leaf-surface-shadow, none));
   transition: border-color var(--leaf-motion-duration) var(--leaf-motion-easing),background-color var(--leaf-motion-duration) var(--leaf-motion-easing),box-shadow var(--leaf-motion-duration) var(--leaf-motion-easing);
 }
 
@@ -1763,11 +1941,11 @@
 }
 
 :is(.leaf-radio--card:has(.leaf-radio__input:checked), .leaf-radio--card:has(.leaf-radio__input:indeterminate)) {
-  border-color: var(--leaf-color-primary);
+  border-color: var(--leaf-color-primary-indicator, var(--leaf-color-primary));
 }
 
 .leaf-radio--card:has(.leaf-radio__input:focus-visible) {
-  outline: 3px solid var(--leaf-color-focus, var(--leaf-focus-color, var(--leaf-color-primary-alpha-42)));
+  outline: 3px solid var(--leaf-color-focus, var(--leaf-focus-color, var(--leaf-color-primary-focus, var(--leaf-color-primary-alpha-42))));
   outline-offset: 2px;
 }
 
@@ -1873,7 +2051,7 @@
 }
 
 .leaf-radio-group--list .leaf-radio-group__options {
-  border: 1px solid var(--leaf-component-radio-border-color, var(--leaf-color-border));
+  border: var(--leaf-component-radio-border-width, var(--leaf-border-width, 1px)) solid var(--leaf-component-radio-border-color, var(--leaf-frame-border-color, var(--leaf-color-border)));
   border-radius: var(--leaf-component-radio-radius, var(--leaf-radius-md));
   background: var(--leaf-component-radio-background, var(--leaf-color-surface));
   flex-direction: column;
@@ -1908,6 +2086,62 @@
   background: var(--leaf-color-surface-muted);
 }
 
+.leaf-radio:hover:not([data-disabled]):where(:not(:has(input:focus-visible))) {
+  color: var(--leaf-component-radio-hover-color, var(--leaf-component-radio-color, var(--leaf-color-text)));
+}
+
+.leaf-radio:active:not([data-disabled]) {
+  color: var(--leaf-component-radio-active-color, var(--leaf-component-radio-color, var(--leaf-color-text)));
+}
+
+.leaf-radio:where(:has(input:focus-visible)):not([data-disabled]) {
+  color: var(--leaf-component-radio-focus-color, var(--leaf-component-radio-color, var(--leaf-color-text)));
+}
+
+.leaf-radio[data-disabled] {
+  color: var(--leaf-component-radio-disabled-color, var(--leaf-component-radio-color, var(--leaf-color-text)));
+}
+
+.leaf-radio__input {
+  --leaf-choice-background: var(--leaf-component-radio-background, var(--leaf-color-surface));
+  --leaf-choice-border: var(--leaf-component-radio-border-color, var(--leaf-frame-border-color, var(--leaf-color-border)));
+  --leaf-choice-shadow: var(--leaf-component-radio-shadow, var(--leaf-control-shadow, var(--leaf-shadow-xs)));
+  box-shadow: var(--leaf-choice-shadow);
+}
+
+.leaf-radio__input:checked, .leaf-radio__input:indeterminate {
+  --leaf-choice-background: var(--leaf-color-primary-indicator, var(--leaf-color-primary));
+  --leaf-choice-border: var(--leaf-frame-border-color, var(--leaf-color-primary-indicator, var(--leaf-color-primary)));
+}
+
+.leaf-radio__input:focus-visible:not(:disabled) {
+  color: var(--leaf-component-radio-focus-color, inherit);
+  background: var(--leaf-component-radio-focus-background, var(--leaf-choice-background));
+  border-color: var(--leaf-component-radio-focus-border-color, var(--leaf-choice-border));
+  box-shadow: var(--leaf-component-radio-focus-shadow, var(--leaf-choice-shadow));
+}
+
+.leaf-radio__input:disabled {
+  color: var(--leaf-component-radio-disabled-color, inherit);
+  background: var(--leaf-component-radio-disabled-background, var(--leaf-choice-background));
+  border-color: var(--leaf-component-radio-disabled-border-color, var(--leaf-choice-border));
+  box-shadow: var(--leaf-component-radio-disabled-shadow, var(--leaf-choice-shadow));
+}
+
+.leaf-radio:hover:not([data-disabled]) .leaf-radio__input:not(:disabled):where(:not(:focus-visible)) {
+  color: var(--leaf-component-radio-hover-color, inherit);
+  background: var(--leaf-component-radio-hover-background, var(--leaf-choice-background));
+  border-color: var(--leaf-component-radio-hover-border-color, var(--leaf-color-primary-indicator, var(--leaf-color-primary)));
+  box-shadow: var(--leaf-component-radio-hover-shadow, var(--leaf-choice-shadow));
+}
+
+.leaf-radio:active:not([data-disabled]) .leaf-radio__input:not(:disabled) {
+  color: var(--leaf-component-radio-active-color, inherit);
+  background: var(--leaf-component-radio-active-background, var(--leaf-choice-background));
+  border-color: var(--leaf-component-radio-active-border-color, var(--leaf-color-primary-indicator, var(--leaf-color-primary)));
+  box-shadow: var(--leaf-component-radio-active-shadow, var(--leaf-choice-shadow));
+}
+
 .leaf-switch {
   --leaf-current-font-size: var(--leaf-font-size);
   --leaf-current-control-height: var(--leaf-control-height, 36px);
@@ -1927,7 +2161,7 @@
   box-sizing: border-box;
   min-height: var(--leaf-current-control-height);
   max-width: 100%;
-  color: var(--leaf-color-text);
+  color: var(--leaf-component-switch-color, var(--leaf-color-text));
   font-family: var(--leaf-font-family);
   font-size: var(--leaf-current-font-size);
   cursor: pointer;
@@ -1953,8 +2187,8 @@
 
 .leaf-switch__input {
   box-sizing: border-box;
-  border: 1px solid var(--leaf-color-border);
-  background: var(--leaf-color-surface);
+  border: var(--leaf-component-switch-border-width, var(--leaf-border-width, 1px)) solid var(--leaf-component-switch-border-color, var(--leaf-frame-border-color, var(--leaf-color-border)));
+  background: var(--leaf-component-switch-background, var(--leaf-color-surface));
   appearance: none;
   width: 18px;
   height: 18px;
@@ -1964,23 +2198,15 @@
 }
 
 .leaf-switch__input:checked, .leaf-switch__input:indeterminate {
-  border-color: var(--leaf-color-primary);
-  background: var(--leaf-color-primary);
-}
-
-.leaf-switch__input:hover:not(:disabled) {
-  border-color: var(--leaf-color-primary);
+  border-color: var(--leaf-frame-border-color, var(--leaf-color-primary-indicator, var(--leaf-color-primary)));
+  background: var(--leaf-color-primary-indicator, var(--leaf-color-primary));
 }
 
 .leaf-switch__input:focus-visible {
-  outline: 3px solid var(--leaf-color-focus, var(--leaf-focus-color, var(--leaf-color-primary-alpha-42)));
+  outline: 3px solid var(--leaf-color-focus, var(--leaf-focus-color, var(--leaf-color-primary-focus, var(--leaf-color-primary-alpha-42))));
   outline-offset: 2px;
 }
 
-.leaf-switch:hover:not([data-disabled]) .leaf-switch__input {
-  border-color: var(--leaf-color-primary);
-}
-
 @media (prefers-reduced-motion: reduce) {
   .leaf-switch__input, .leaf-switch__mark {
     transition: none;
@@ -1998,7 +2224,24 @@
   }
 }
 
+.leaf-switch:hover:not([data-disabled]):where(:not(:has(input:focus-visible))) {
+  color: var(--leaf-component-switch-hover-color, var(--leaf-component-switch-color, var(--leaf-color-text)));
+}
+
+.leaf-switch:active:not([data-disabled]) {
+  color: var(--leaf-component-switch-active-color, var(--leaf-component-switch-color, var(--leaf-color-text)));
+}
+
+.leaf-switch:where(:has(input:focus-visible)):not([data-disabled]) {
+  color: var(--leaf-component-switch-focus-color, var(--leaf-component-switch-color, var(--leaf-color-text)));
+}
+
+.leaf-switch[data-disabled] {
+  color: var(--leaf-component-switch-disabled-color, var(--leaf-component-switch-color, var(--leaf-color-text)));
+}
+
 .leaf-switch {
+  --leaf-switch-border-width: var(--leaf-component-switch-border-width, var(--leaf-border-width, 1px));
   --leaf-switch-width: 36px;
   --leaf-switch-height: 20px;
   --leaf-switch-thumb: 14px;
@@ -2043,15 +2286,18 @@
 
 .leaf-switch__track {
   box-sizing: border-box;
-  background: var(--leaf-color-text-subtle-surface-muted-38);
-  pointer-events: none;
   width: 100%;
   height: 100%;
+  padding: max(0px,3px - var(--leaf-switch-border-width));
+  border: var(--leaf-switch-border-width) solid var(--leaf-component-switch-border-color, var(--leaf-frame-border-color, transparent));
+  --leaf-switch-track-background: var(--leaf-component-switch-background, var(--leaf-color-text-subtle-surface-muted-38));
+  --leaf-switch-track-shadow: var(--leaf-component-switch-shadow, var(--leaf-control-shadow, inset 0 1px 2px #00000014));
+  background: var(--leaf-switch-track-background);
+  box-shadow: var(--leaf-switch-track-shadow);
+  pointer-events: none;
   transition: background-color var(--leaf-motion-duration) var(--leaf-motion-easing),box-shadow var(--leaf-motion-duration) var(--leaf-motion-easing);
   border-radius: 999px;
-  padding: 3px;
   display: block;
-  box-shadow: inset 0 1px 2px #00000014;
 }
 
 .leaf-switch__thumb {
@@ -2068,7 +2314,8 @@
 }
 
 .leaf-switch__input:checked + .leaf-switch__track {
-  background: var(--leaf-color-primary);
+  --leaf-switch-track-background: var(--leaf-color-primary-indicator, var(--leaf-color-primary));
+  background: var(--leaf-switch-track-background);
 }
 
 .leaf-switch__input:checked + .leaf-switch__track .leaf-switch__thumb {
@@ -2084,15 +2331,39 @@
   transform: translateX(calc((var(--leaf-switch-width) - var(--leaf-switch-height) - 4px) * var(--leaf-switch-direction)));
 }
 
-.leaf-switch:hover:not([data-disabled]) .leaf-switch__track {
-  box-shadow: inset 0 1px 2px #00000014,0 0 0 3px var(--leaf-color-primary-alpha-8);
-}
-
 .leaf-switch__input:focus-visible + .leaf-switch__track {
-  outline: 3px solid var(--leaf-color-focus, var(--leaf-focus-color, var(--leaf-color-primary-alpha-42)));
+  outline: 3px solid var(--leaf-color-focus, var(--leaf-focus-color, var(--leaf-color-primary-focus, var(--leaf-color-primary-alpha-42))));
   outline-offset: 2px;
 }
 
+.leaf-switch__input:focus-visible:not(:disabled) + .leaf-switch__track {
+  color: var(--leaf-component-switch-focus-color, inherit);
+  background: var(--leaf-component-switch-focus-background, var(--leaf-switch-track-background));
+  border-color: var(--leaf-component-switch-focus-border-color, var(--leaf-component-switch-border-color, var(--leaf-frame-border-color, transparent)));
+  box-shadow: var(--leaf-component-switch-focus-shadow, var(--leaf-switch-track-shadow));
+}
+
+.leaf-switch:hover:not([data-disabled]):where(:not(:has(input:focus-visible))) .leaf-switch__track {
+  color: var(--leaf-component-switch-hover-color, inherit);
+  background: var(--leaf-component-switch-hover-background, var(--leaf-switch-track-background));
+  border-color: var(--leaf-component-switch-hover-border-color, var(--leaf-component-switch-border-color, var(--leaf-frame-border-color, transparent)));
+  box-shadow: var(--leaf-component-switch-hover-shadow, var(--leaf-component-switch-shadow, var(--leaf-control-shadow, inset 0 1px 2px #00000014, 0 0 0 3px var(--leaf-color-primary-alpha-8))));
+}
+
+.leaf-switch:active:not([data-disabled]) .leaf-switch__track {
+  color: var(--leaf-component-switch-active-color, inherit);
+  background: var(--leaf-component-switch-active-background, var(--leaf-switch-track-background));
+  border-color: var(--leaf-component-switch-active-border-color, var(--leaf-component-switch-border-color, var(--leaf-frame-border-color, transparent)));
+  box-shadow: var(--leaf-component-switch-active-shadow, var(--leaf-switch-track-shadow));
+}
+
+.leaf-switch[data-disabled] .leaf-switch__track {
+  color: var(--leaf-component-switch-disabled-color, inherit);
+  background: var(--leaf-component-switch-disabled-background, var(--leaf-switch-track-background));
+  border-color: var(--leaf-component-switch-disabled-border-color, var(--leaf-component-switch-border-color, var(--leaf-frame-border-color, transparent)));
+  box-shadow: var(--leaf-component-switch-disabled-shadow, var(--leaf-switch-track-shadow));
+}
+
 .leaf-switch__spinner {
   width: 10px;
   height: 10px;
@@ -2111,16 +2382,16 @@
 }
 
 @media (forced-colors: active) {
-  .leaf-switch__track {
+  .leaf-switch .leaf-switch__control > .leaf-switch__input + .leaf-switch__track {
     background: canvas;
-    border: 1px solid buttontext;
+    border-color: buttontext;
   }
 
   .leaf-switch__thumb {
     background: buttontext;
   }
 
-  .leaf-switch__input:checked + .leaf-switch__track {
+  .leaf-switch .leaf-switch__control > .leaf-switch__input:checked + .leaf-switch__track {
     background: highlight;
   }
 
@@ -2140,6 +2411,7 @@
 }
 
 .leaf-picker-clear {
+  inset-inline-end: 8px;
   width: 18px;
   height: 18px;
   color: var(--leaf-color-text-muted);
@@ -2154,7 +2426,6 @@
   display: inline-flex;
   position: absolute;
   top: 50%;
-  right: 8px;
   transform: translateY(-50%);
 }
 
@@ -2164,20 +2435,20 @@
 }
 
 .leaf-picker-clear:focus-visible {
-  outline: 2px solid var(--leaf-color-primary);
+  outline: 2px solid var(--leaf-color-primary-indicator, var(--leaf-color-primary));
   outline-offset: 2px;
 }
 
 .leaf-picker-clear--before-arrow {
-  right: 30px;
+  inset-inline-end: 30px;
 }
 
 .leaf-date-picker[data-clearable] > .leaf-date-picker__trigger {
-  padding-right: 34px;
+  padding-inline-end: 34px;
 }
 
 .leaf-select[data-clearable] > .leaf-select__trigger > span, .leaf-time-picker[data-clearable] > .leaf-time-picker__trigger > span, .leaf-cascader[data-clearable] > .leaf-cascader__trigger > span {
-  margin-right: 24px;
+  margin-inline-end: 24px;
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -2205,7 +2476,7 @@
   box-sizing: border-box;
   min-width: 0;
   max-width: 100%;
-  height: calc(var(--leaf-current-control-height) - 8px);
+  height: max(1px,var(--leaf-current-control-height) - 6px - 2*var(--leaf-field-border-width, var(--leaf-border-width, 1px)));
   border-radius: var(--leaf-radius-sm);
   background: var(--leaf-color-surface-muted);
   box-shadow: inset 0 0 0 1px var(--leaf-color-divider);
@@ -2324,18 +2595,23 @@
 }
 
 .leaf-select {
-  --leaf-field-color: var(--leaf-color-primary);
+  --leaf-field-color: var(--leaf-color-primary-indicator, var(--leaf-color-primary));
   --leaf-field-color-alpha-12: var(--leaf-color-primary-alpha-12);
   --leaf-field-color-border-30: var(--leaf-color-primary-border-30);
   --leaf-field-hover-color: var(--leaf-color-border-hover, var(--leaf-field-color));
+  --leaf-field-border-width: var(--leaf-component-select-border-width, var(--leaf-border-width, 1px));
+  --leaf-field-text: var(--leaf-component-select-color, var(--leaf-color-text));
+  --leaf-field-rest-border: var(--leaf-component-select-border-color, var(--leaf-frame-border-color, var(--leaf-color-border)));
+  --leaf-field-background: var(--leaf-component-select-background, var(--leaf-color-surface));
+  --leaf-field-shadow: var(--leaf-component-select-shadow, var(--leaf-control-shadow, 0 0 0 0 transparent));
   box-sizing: border-box;
-  border: 1px solid var(--leaf-color-border);
+  border: var(--leaf-field-border-width) solid var(--leaf-component-select-border-color, var(--leaf-frame-border-color, var(--leaf-color-border)));
   border-radius: var(--leaf-component-select-radius, var(--leaf-radius));
   width: 100%;
   min-width: 0;
   color: var(--leaf-component-select-color, var(--leaf-color-text));
   background: var(--leaf-component-select-background, var(--leaf-color-surface));
-  box-shadow: var(--leaf-component-select-shadow, none);
+  box-shadow: var(--leaf-field-shadow);
   font-family: var(--leaf-font-family);
   font-size: var(--leaf-component-select-font-size, var(--leaf-current-font-size));
   line-height: var(--leaf-line-height, 1.5);
@@ -2343,6 +2619,7 @@
 }
 
 .leaf-select[data-status="error"] {
+  --leaf-field-rest-border: var(--leaf-field-color);
   --leaf-field-color: var(--leaf-color-danger);
   --leaf-field-color-alpha-12: var(--leaf-color-danger-alpha-12);
   --leaf-field-color-border-30: var(--leaf-color-danger-border-30);
@@ -2351,6 +2628,7 @@
 }
 
 .leaf-select[data-status="warning"] {
+  --leaf-field-rest-border: var(--leaf-field-color);
   --leaf-field-color: var(--leaf-color-warning);
   --leaf-field-color-alpha-12: var(--leaf-color-warning-alpha-12);
   --leaf-field-color-border-30: var(--leaf-color-warning-border-30);
@@ -2358,33 +2636,53 @@
   border-color: var(--leaf-field-color);
 }
 
-.leaf-select:hover:not([data-disabled]):not(:disabled):not(:focus-within):not([data-open]) {
-  border-color: var(--leaf-field-hover-color);
+.leaf-select[data-disabled], .leaf-select:disabled {
+  opacity: .55;
+  cursor: not-allowed;
 }
 
-.leaf-select:focus-within, .leaf-select[data-open] {
-  border-color: var(--leaf-field-color);
-  box-shadow: 0 0 0 3px var(--leaf-field-color-alpha-12);
+.leaf-select:hover:not([data-disabled]):not(:disabled):where(:not(:focus-within):not([data-open])) {
+  color: var(--leaf-component-select-hover-color, var(--leaf-field-text));
+  background: var(--leaf-component-select-hover-background, var(--leaf-field-background));
+  border-color: var(--leaf-component-select-hover-border-color, var(--leaf-field-hover-color));
+  box-shadow: var(--leaf-component-select-hover-shadow, var(--leaf-field-shadow));
 }
 
-.leaf-select[data-disabled], .leaf-select:disabled {
-  background: var(--leaf-color-surface-muted);
-  opacity: .55;
-  cursor: not-allowed;
+.leaf-select:is(:focus-within, [data-open]):not([data-disabled]):not(:disabled) {
+  color: var(--leaf-component-select-focus-color, var(--leaf-field-text));
+  background: var(--leaf-component-select-focus-background, var(--leaf-field-background));
+  border-color: var(--leaf-component-select-focus-border-color, var(--leaf-field-color));
+  box-shadow: var(--leaf-component-select-focus-shadow, var(--leaf-field-shadow));
+  outline: 3px solid var(--leaf-color-focus, var(--leaf-field-color-alpha-12));
+  outline-offset: 0;
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .leaf-select {
-    transition: none;
-  }
+.leaf-select:active:not([data-disabled]):not(:disabled) {
+  color: var(--leaf-component-select-active-color, var(--leaf-field-text));
+  background: var(--leaf-component-select-active-background, var(--leaf-field-background));
+  border-color: var(--leaf-component-select-active-border-color, var(--leaf-field-hover-color));
+  box-shadow: var(--leaf-component-select-active-shadow, var(--leaf-field-shadow));
+}
+
+.leaf-select[data-disabled], .leaf-select:disabled {
+  color: var(--leaf-component-select-disabled-color, var(--leaf-field-text));
+  background: var(--leaf-component-select-disabled-background, var(--leaf-color-surface-muted));
+  border-color: var(--leaf-component-select-disabled-border-color, var(--leaf-field-rest-border));
+  box-shadow: var(--leaf-component-select-disabled-shadow, var(--leaf-field-shadow));
 }
 
 @media (forced-colors: active) {
-  .leaf-select:focus-within {
+  .leaf-select:is(:focus-within, [data-open]):not([data-disabled]):not(:disabled) {
     outline: 2px solid highlight;
   }
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .leaf-select {
+    transition: none;
+  }
+}
+
 .leaf-select {
   min-height: var(--leaf-current-control-height);
   padding: var(--leaf-component-select-padding, 0 30px 0 var(--leaf-density-field-padding));
@@ -2398,11 +2696,6 @@
   cursor: text;
 }
 
-.leaf-select[data-open] {
-  border-color: var(--leaf-field-color);
-  box-shadow: 0 0 0 3px var(--leaf-field-color-alpha-12);
-}
-
 .leaf-select[data-disabled] {
   cursor: not-allowed;
 }
@@ -2421,7 +2714,7 @@
   box-sizing: border-box;
   width: 100%;
   min-width: 0;
-  height: calc(var(--leaf-current-control-height) - 2px);
+  height: calc(var(--leaf-current-control-height) - 2*var(--leaf-field-border-width));
   border-radius: inherit;
   color: inherit;
   font: inherit;
@@ -2517,12 +2810,16 @@
 }
 
 .leaf-select--multiple {
-  padding-top: 3px;
-  padding-bottom: 3px;
+  padding-block: var(--leaf-component-select-padding-top, 3px) var(--leaf-component-select-padding-bottom, 3px);
+  padding-inline: var(--leaf-component-select-padding-left, 3px) var(--leaf-component-select-padding-right, 30px);
+}
+
+.leaf-select--multiple:where([dir="rtl"]) {
+  padding-inline: var(--leaf-component-select-padding-right, 3px) var(--leaf-component-select-padding-left, 30px);
 }
 
 .leaf-select--multiple .leaf-select__input {
-  height: calc(var(--leaf-current-control-height) - 8px);
+  height: max(1px,var(--leaf-current-control-height) - 6px - 2*var(--leaf-field-border-width, var(--leaf-border-width, 1px)));
   min-width: 0;
 }
 
@@ -2567,7 +2864,15 @@
   --leaf-current-font-size: var(--leaf-font-size-lg);
 }
 
-.leaf-menu, .leaf-segmented, .leaf-color-picker__formats, .leaf-tabs--card .leaf-tabs__list, .leaf-floating {
+.leaf-select__panel {
+  --leaf-surface-border: var(--leaf-component-select-border-width, var(--leaf-component-floating-border-width, var(--leaf-border-width, 1px)));
+  border-color: var(--leaf-component-select-border-color, var(--leaf-component-floating-border-color, var(--leaf-frame-border-color, var(--leaf-color-border))));
+  color: var(--leaf-component-select-color, var(--leaf-component-floating-color, var(--leaf-color-text)));
+  background: var(--leaf-component-select-background, var(--leaf-component-floating-background, var(--leaf-color-surface-raised, var(--leaf-color-surface))));
+  box-shadow: var(--leaf-component-select-shadow, var(--leaf-component-floating-shadow, var(--leaf-surface-shadow, var(--leaf-shadow-md))));
+}
+
+.leaf-menu, .leaf-color-picker__formats, .leaf-tabs--card .leaf-tabs__list, .leaf-floating {
   --leaf-surface-inner-top: max(0px, var(--leaf-surface-radius) - var(--leaf-surface-padding-top) - var(--leaf-surface-border));
   --leaf-surface-inner-right: max(0px, var(--leaf-surface-radius) - var(--leaf-surface-padding-right) - var(--leaf-surface-border));
   --leaf-surface-inner-bottom: max(0px, var(--leaf-surface-radius) - var(--leaf-surface-padding-bottom) - var(--leaf-surface-border));
@@ -2580,7 +2885,7 @@
 .leaf-floating {
   --leaf-surface-radius: var(--leaf-component-floating-radius, var(--leaf-radius-lg));
   --leaf-surface-padding: var(--leaf-component-floating-padding, 6px);
-  --leaf-surface-border: 1px;
+  --leaf-surface-border: var(--leaf-component-floating-border-width, var(--leaf-border-width, 1px));
   --leaf-surface-padding-top: var(--leaf-component-floating-padding-top, var(--leaf-surface-padding));
   --leaf-surface-padding-right: var(--leaf-component-floating-padding-right, var(--leaf-surface-padding));
   --leaf-surface-padding-bottom: var(--leaf-component-floating-padding-bottom, var(--leaf-surface-padding));
@@ -2592,14 +2897,14 @@
   --leaf-popup-origin-y: top;
   box-sizing: border-box;
   z-index: var(--leaf-z-index-popup, 1000);
-  border: var(--leaf-surface-border) solid var(--leaf-color-border);
+  border: var(--leaf-surface-border) solid var(--leaf-component-floating-border-color, var(--leaf-frame-border-color, var(--leaf-color-border)));
   max-width: min(420px, 100vw - 24px);
   max-height: min(360px, 100vh - 32px);
-  color: var(--leaf-color-text);
+  color: var(--leaf-component-floating-color, var(--leaf-color-text));
   font-family: var(--leaf-font-family);
   font-size: var(--leaf-font-size);
-  background: var(--leaf-color-surface-raised, var(--leaf-color-surface));
-  box-shadow: var(--leaf-shadow-md);
+  background: var(--leaf-component-floating-background, var(--leaf-color-surface-raised, var(--leaf-color-surface)));
+  box-shadow: var(--leaf-component-floating-shadow, var(--leaf-surface-shadow, var(--leaf-shadow-md)));
   overscroll-behavior: contain;
   opacity: 1;
   transform-origin: var(--leaf-popup-origin-x) var(--leaf-popup-origin-y);
@@ -2663,6 +2968,19 @@
   }
 }
 
+.leaf-floating.leaf-scrollbar {
+  border-radius: var(--leaf-surface-radius);
+  width: auto;
+  overflow: hidden;
+}
+
+.leaf-floating > .leaf-floating__viewport {
+  box-sizing: border-box;
+  border-radius: var(--leaf-surface-inner-radius);
+  overscroll-behavior: contain;
+  position: relative;
+}
+
 .leaf-form-value {
   clip-path: inset(50%);
   opacity: 0;
@@ -2703,7 +3021,7 @@
 }
 
 .leaf-floating__option[aria-selected="true"] {
-  color: var(--leaf-color-primary);
+  color: var(--leaf-color-primary-ink, var(--leaf-color-primary));
   font-weight: var(--leaf-font-weight);
   background: var(--leaf-color-primary-surface-9);
 }
@@ -2715,7 +3033,7 @@
 }
 
 .leaf-floating__option:focus-visible {
-  outline: 2px solid var(--leaf-color-primary);
+  outline: 2px solid var(--leaf-color-primary-indicator, var(--leaf-color-primary));
   outline-offset: -2px;
 }
 
@@ -2818,7 +3136,7 @@
 }
 
 .leaf-floating__loading-icon {
-  color: var(--leaf-color-primary);
+  color: var(--leaf-color-primary-ink, var(--leaf-color-primary));
   animation: var(--leaf-motion-animation, leaf-floating-spin calc(var(--leaf-motion-duration) * 4) linear infinite);
   animation-play-state: var(--leaf-motion-play-state, running);
 }
@@ -2851,18 +3169,23 @@
 }
 
 .leaf-date-picker {
-  --leaf-field-color: var(--leaf-color-primary);
+  --leaf-field-color: var(--leaf-color-primary-indicator, var(--leaf-color-primary));
   --leaf-field-color-alpha-12: var(--leaf-color-primary-alpha-12);
   --leaf-field-color-border-30: var(--leaf-color-primary-border-30);
   --leaf-field-hover-color: var(--leaf-color-border-hover, var(--leaf-field-color));
+  --leaf-field-border-width: var(--leaf-component-date-picker-border-width, var(--leaf-border-width, 1px));
+  --leaf-field-text: var(--leaf-component-date-picker-color, var(--leaf-color-text));
+  --leaf-field-rest-border: var(--leaf-component-date-picker-border-color, var(--leaf-frame-border-color, var(--leaf-color-border)));
+  --leaf-field-background: var(--leaf-component-date-picker-background, var(--leaf-color-surface));
+  --leaf-field-shadow: var(--leaf-component-date-picker-shadow, var(--leaf-control-shadow, 0 0 0 0 transparent));
   box-sizing: border-box;
-  border: 1px solid var(--leaf-color-border);
+  border: var(--leaf-field-border-width) solid var(--leaf-component-date-picker-border-color, var(--leaf-frame-border-color, var(--leaf-color-border)));
   border-radius: var(--leaf-component-date-picker-radius, var(--leaf-radius));
   width: 100%;
   min-width: 0;
   color: var(--leaf-component-date-picker-color, var(--leaf-color-text));
   background: var(--leaf-component-date-picker-background, var(--leaf-color-surface));
-  box-shadow: var(--leaf-component-date-picker-shadow, none);
+  box-shadow: var(--leaf-field-shadow);
   font-family: var(--leaf-font-family);
   font-size: var(--leaf-component-date-picker-font-size, var(--leaf-current-font-size));
   line-height: var(--leaf-line-height, 1.5);
@@ -2870,6 +3193,7 @@
 }
 
 .leaf-date-picker[data-status="error"] {
+  --leaf-field-rest-border: var(--leaf-field-color);
   --leaf-field-color: var(--leaf-color-danger);
   --leaf-field-color-alpha-12: var(--leaf-color-danger-alpha-12);
   --leaf-field-color-border-30: var(--leaf-color-danger-border-30);
@@ -2878,6 +3202,7 @@
 }
 
 .leaf-date-picker[data-status="warning"] {
+  --leaf-field-rest-border: var(--leaf-field-color);
   --leaf-field-color: var(--leaf-color-warning);
   --leaf-field-color-alpha-12: var(--leaf-color-warning-alpha-12);
   --leaf-field-color-border-30: var(--leaf-color-warning-border-30);
@@ -2885,33 +3210,53 @@
   border-color: var(--leaf-field-color);
 }
 
-.leaf-date-picker:hover:not([data-disabled]):not(:disabled):not(:focus-within):not([data-open]) {
-  border-color: var(--leaf-field-hover-color);
+.leaf-date-picker[data-disabled], .leaf-date-picker:disabled {
+  opacity: .55;
+  cursor: not-allowed;
 }
 
-.leaf-date-picker:focus-within, .leaf-date-picker[data-open] {
-  border-color: var(--leaf-field-color);
-  box-shadow: 0 0 0 3px var(--leaf-field-color-alpha-12);
+.leaf-date-picker:hover:not([data-disabled]):not(:disabled):where(:not(:focus-within):not([data-open])) {
+  color: var(--leaf-component-date-picker-hover-color, var(--leaf-field-text));
+  background: var(--leaf-component-date-picker-hover-background, var(--leaf-field-background));
+  border-color: var(--leaf-component-date-picker-hover-border-color, var(--leaf-field-hover-color));
+  box-shadow: var(--leaf-component-date-picker-hover-shadow, var(--leaf-field-shadow));
 }
 
-.leaf-date-picker[data-disabled], .leaf-date-picker:disabled {
-  background: var(--leaf-color-surface-muted);
-  opacity: .55;
-  cursor: not-allowed;
+.leaf-date-picker:is(:focus-within, [data-open]):not([data-disabled]):not(:disabled) {
+  color: var(--leaf-component-date-picker-focus-color, var(--leaf-field-text));
+  background: var(--leaf-component-date-picker-focus-background, var(--leaf-field-background));
+  border-color: var(--leaf-component-date-picker-focus-border-color, var(--leaf-field-color));
+  box-shadow: var(--leaf-component-date-picker-focus-shadow, var(--leaf-field-shadow));
+  outline: 3px solid var(--leaf-color-focus, var(--leaf-field-color-alpha-12));
+  outline-offset: 0;
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .leaf-date-picker {
-    transition: none;
-  }
+.leaf-date-picker:active:not([data-disabled]):not(:disabled) {
+  color: var(--leaf-component-date-picker-active-color, var(--leaf-field-text));
+  background: var(--leaf-component-date-picker-active-background, var(--leaf-field-background));
+  border-color: var(--leaf-component-date-picker-active-border-color, var(--leaf-field-hover-color));
+  box-shadow: var(--leaf-component-date-picker-active-shadow, var(--leaf-field-shadow));
+}
+
+.leaf-date-picker[data-disabled], .leaf-date-picker:disabled {
+  color: var(--leaf-component-date-picker-disabled-color, var(--leaf-field-text));
+  background: var(--leaf-component-date-picker-disabled-background, var(--leaf-color-surface-muted));
+  border-color: var(--leaf-component-date-picker-disabled-border-color, var(--leaf-field-rest-border));
+  box-shadow: var(--leaf-component-date-picker-disabled-shadow, var(--leaf-field-shadow));
 }
 
 @media (forced-colors: active) {
-  .leaf-date-picker:focus-within {
+  .leaf-date-picker:is(:focus-within, [data-open]):not([data-disabled]):not(:disabled) {
     outline: 2px solid highlight;
   }
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .leaf-date-picker {
+    transition: none;
+  }
+}
+
 .leaf-date-picker {
   height: var(--leaf-current-control-height);
   align-items: center;
@@ -2983,7 +3328,7 @@
 }
 
 .leaf-date-picker[data-open] .leaf-date-picker__icon {
-  color: var(--leaf-color-primary);
+  color: var(--leaf-color-primary-ink, var(--leaf-color-primary));
 }
 
 .leaf-date-picker__panel {
@@ -3034,7 +3379,7 @@
 }
 
 .leaf-date-picker__nav:focus-visible {
-  outline: 3px solid var(--leaf-color-focus, var(--leaf-focus-color, var(--leaf-color-primary-alpha-42)));
+  outline: 3px solid var(--leaf-color-focus, var(--leaf-focus-color, var(--leaf-color-primary-focus, var(--leaf-color-primary-alpha-42))));
   outline-offset: 2px;
 }
 
@@ -3065,7 +3410,7 @@
 }
 
 .leaf-date-picker__day:focus-visible {
-  outline: 3px solid var(--leaf-color-focus, var(--leaf-focus-color, var(--leaf-color-primary-alpha-42)));
+  outline: 3px solid var(--leaf-color-focus, var(--leaf-focus-color, var(--leaf-color-primary-focus, var(--leaf-color-primary-alpha-42))));
   outline-offset: 2px;
   outline-offset: -1px;
 }
@@ -3083,7 +3428,7 @@
 
 .leaf-date-picker__day--selected, .leaf-date-picker__day--selected:hover:not(:disabled) {
   color: var(--leaf-color-on-primary);
-  background: var(--leaf-color-primary);
+  background: var(--leaf-color-primary-indicator, var(--leaf-color-primary));
   box-shadow: var(--leaf-shadow-xs);
 }
 
@@ -3120,6 +3465,14 @@
   display: flex;
 }
 
+.leaf-date-picker__panel {
+  --leaf-surface-border: var(--leaf-component-date-picker-border-width, var(--leaf-component-floating-border-width, var(--leaf-border-width, 1px)));
+  border-color: var(--leaf-component-date-picker-border-color, var(--leaf-component-floating-border-color, var(--leaf-frame-border-color, var(--leaf-color-border))));
+  color: var(--leaf-component-date-picker-color, var(--leaf-component-floating-color, var(--leaf-color-text)));
+  background: var(--leaf-component-date-picker-background, var(--leaf-component-floating-background, var(--leaf-color-surface-raised, var(--leaf-color-surface))));
+  box-shadow: var(--leaf-component-date-picker-shadow, var(--leaf-component-floating-shadow, var(--leaf-surface-shadow, var(--leaf-shadow-md))));
+}
+
 .leaf-time-picker__panel {
   --leaf-surface-padding: 0px;
   --leaf-surface-padding-top: 0px;
@@ -3157,14 +3510,14 @@
 }
 
 .leaf-time-picker__column {
-  scrollbar-width: thin;
   overscroll-behavior: contain;
+  position: relative;
+}
+
+.leaf-time-picker__options {
   flex-direction: column;
   gap: 2px;
-  max-height: 210px;
   display: flex;
-  position: relative;
-  overflow-y: auto;
 }
 
 .leaf-time-picker__column .leaf-floating__option {
@@ -3215,6 +3568,14 @@
   }
 }
 
+.leaf-time-picker__panel {
+  --leaf-surface-border: var(--leaf-component-time-picker-border-width, var(--leaf-component-floating-border-width, var(--leaf-border-width, 1px)));
+  border-color: var(--leaf-component-time-picker-border-color, var(--leaf-component-floating-border-color, var(--leaf-frame-border-color, var(--leaf-color-border))));
+  color: var(--leaf-component-time-picker-color, var(--leaf-component-floating-color, var(--leaf-color-text)));
+  background: var(--leaf-component-time-picker-background, var(--leaf-component-floating-background, var(--leaf-color-surface-raised, var(--leaf-color-surface))));
+  box-shadow: var(--leaf-component-time-picker-shadow, var(--leaf-component-floating-shadow, var(--leaf-surface-shadow, var(--leaf-shadow-md))));
+}
+
 .leaf-autocomplete {
   --leaf-current-font-size: var(--leaf-font-size);
   --leaf-current-control-height: var(--leaf-control-height, 36px);
@@ -3231,25 +3592,31 @@
 }
 
 .leaf-autocomplete {
-  --leaf-field-color: var(--leaf-color-primary);
+  --leaf-field-color: var(--leaf-color-primary-indicator, var(--leaf-color-primary));
   --leaf-field-color-alpha-12: var(--leaf-color-primary-alpha-12);
   --leaf-field-color-border-30: var(--leaf-color-primary-border-30);
   --leaf-field-hover-color: var(--leaf-color-border-hover, var(--leaf-field-color));
+  --leaf-field-border-width: var(--leaf-component-auto-complete-border-width, var(--leaf-border-width, 1px));
+  --leaf-field-text: var(--leaf-component-auto-complete-color, var(--leaf-color-text));
+  --leaf-field-rest-border: var(--leaf-component-auto-complete-border-color, var(--leaf-frame-border-color, var(--leaf-color-border)));
+  --leaf-field-background: var(--leaf-component-auto-complete-background, var(--leaf-color-surface));
+  --leaf-field-shadow: var(--leaf-component-auto-complete-shadow, var(--leaf-control-shadow, 0 0 0 0 transparent));
   box-sizing: border-box;
-  border: 1px solid var(--leaf-color-border);
-  border-radius: var(--leaf-component-autocomplete-radius, var(--leaf-radius));
+  border: var(--leaf-field-border-width) solid var(--leaf-component-auto-complete-border-color, var(--leaf-frame-border-color, var(--leaf-color-border)));
+  border-radius: var(--leaf-component-auto-complete-radius, var(--leaf-radius));
   width: 100%;
   min-width: 0;
-  color: var(--leaf-component-autocomplete-color, var(--leaf-color-text));
-  background: var(--leaf-component-autocomplete-background, var(--leaf-color-surface));
-  box-shadow: var(--leaf-component-autocomplete-shadow, none);
+  color: var(--leaf-component-auto-complete-color, var(--leaf-color-text));
+  background: var(--leaf-component-auto-complete-background, var(--leaf-color-surface));
+  box-shadow: var(--leaf-field-shadow);
   font-family: var(--leaf-font-family);
-  font-size: var(--leaf-component-autocomplete-font-size, var(--leaf-current-font-size));
+  font-size: var(--leaf-component-auto-complete-font-size, var(--leaf-current-font-size));
   line-height: var(--leaf-line-height, 1.5);
   transition: border-color var(--leaf-motion-fast) var(--leaf-motion-easing),background-color var(--leaf-motion-fast) var(--leaf-motion-easing),box-shadow var(--leaf-motion-duration) var(--leaf-motion-easing);
 }
 
 .leaf-autocomplete[data-status="error"] {
+  --leaf-field-rest-border: var(--leaf-field-color);
   --leaf-field-color: var(--leaf-color-danger);
   --leaf-field-color-alpha-12: var(--leaf-color-danger-alpha-12);
   --leaf-field-color-border-30: var(--leaf-color-danger-border-30);
@@ -3258,6 +3625,7 @@
 }
 
 .leaf-autocomplete[data-status="warning"] {
+  --leaf-field-rest-border: var(--leaf-field-color);
   --leaf-field-color: var(--leaf-color-warning);
   --leaf-field-color-alpha-12: var(--leaf-color-warning-alpha-12);
   --leaf-field-color-border-30: var(--leaf-color-warning-border-30);
@@ -3265,33 +3633,53 @@
   border-color: var(--leaf-field-color);
 }
 
-.leaf-autocomplete:hover:not([data-disabled]):not(:disabled):not(:focus-within):not([data-open]) {
-  border-color: var(--leaf-field-hover-color);
+.leaf-autocomplete[data-disabled], .leaf-autocomplete:disabled {
+  opacity: .55;
+  cursor: not-allowed;
 }
 
-.leaf-autocomplete:focus-within, .leaf-autocomplete[data-open] {
-  border-color: var(--leaf-field-color);
-  box-shadow: 0 0 0 3px var(--leaf-field-color-alpha-12);
+.leaf-autocomplete:hover:not([data-disabled]):not(:disabled):where(:not(:focus-within):not([data-open])) {
+  color: var(--leaf-component-auto-complete-hover-color, var(--leaf-field-text));
+  background: var(--leaf-component-auto-complete-hover-background, var(--leaf-field-background));
+  border-color: var(--leaf-component-auto-complete-hover-border-color, var(--leaf-field-hover-color));
+  box-shadow: var(--leaf-component-auto-complete-hover-shadow, var(--leaf-field-shadow));
 }
 
-.leaf-autocomplete[data-disabled], .leaf-autocomplete:disabled {
-  background: var(--leaf-color-surface-muted);
-  opacity: .55;
-  cursor: not-allowed;
+.leaf-autocomplete:is(:focus-within, [data-open]):not([data-disabled]):not(:disabled) {
+  color: var(--leaf-component-auto-complete-focus-color, var(--leaf-field-text));
+  background: var(--leaf-component-auto-complete-focus-background, var(--leaf-field-background));
+  border-color: var(--leaf-component-auto-complete-focus-border-color, var(--leaf-field-color));
+  box-shadow: var(--leaf-component-auto-complete-focus-shadow, var(--leaf-field-shadow));
+  outline: 3px solid var(--leaf-color-focus, var(--leaf-field-color-alpha-12));
+  outline-offset: 0;
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .leaf-autocomplete {
-    transition: none;
-  }
+.leaf-autocomplete:active:not([data-disabled]):not(:disabled) {
+  color: var(--leaf-component-auto-complete-active-color, var(--leaf-field-text));
+  background: var(--leaf-component-auto-complete-active-background, var(--leaf-field-background));
+  border-color: var(--leaf-component-auto-complete-active-border-color, var(--leaf-field-hover-color));
+  box-shadow: var(--leaf-component-auto-complete-active-shadow, var(--leaf-field-shadow));
+}
+
+.leaf-autocomplete[data-disabled], .leaf-autocomplete:disabled {
+  color: var(--leaf-component-auto-complete-disabled-color, var(--leaf-field-text));
+  background: var(--leaf-component-auto-complete-disabled-background, var(--leaf-color-surface-muted));
+  border-color: var(--leaf-component-auto-complete-disabled-border-color, var(--leaf-field-rest-border));
+  box-shadow: var(--leaf-component-auto-complete-disabled-shadow, var(--leaf-field-shadow));
 }
 
 @media (forced-colors: active) {
-  .leaf-autocomplete:focus-within {
+  .leaf-autocomplete:is(:focus-within, [data-open]):not([data-disabled]):not(:disabled) {
     outline: 2px solid highlight;
   }
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .leaf-autocomplete {
+    transition: none;
+  }
+}
+
 .leaf-autocomplete {
   height: var(--leaf-current-control-height);
   display: inline-flex;
@@ -3322,11 +3710,6 @@
   cursor: not-allowed;
 }
 
-.leaf-autocomplete[data-open] {
-  border-color: var(--leaf-field-color);
-  box-shadow: 0 0 0 3px var(--leaf-field-color-alpha-12);
-}
-
 .leaf-autocomplete__panel .leaf-floating__option {
   justify-content: space-between;
 }
@@ -3335,24 +3718,37 @@
   border-color: #0000;
 }
 
+.leaf-autocomplete__panel {
+  --leaf-surface-border: var(--leaf-component-auto-complete-border-width, var(--leaf-component-floating-border-width, var(--leaf-border-width, 1px)));
+  border-color: var(--leaf-component-auto-complete-border-color, var(--leaf-component-floating-border-color, var(--leaf-frame-border-color, var(--leaf-color-border))));
+  color: var(--leaf-component-auto-complete-color, var(--leaf-component-floating-color, var(--leaf-color-text)));
+  background: var(--leaf-component-auto-complete-background, var(--leaf-component-floating-background, var(--leaf-color-surface-raised, var(--leaf-color-surface))));
+  box-shadow: var(--leaf-component-auto-complete-shadow, var(--leaf-component-floating-shadow, var(--leaf-surface-shadow, var(--leaf-shadow-md))));
+}
+
 .leaf-cascader {
   --leaf-current-font-size: var(--leaf-font-size);
   --leaf-current-control-height: var(--leaf-control-height, 36px);
 }
 
 .leaf-cascader {
-  --leaf-field-color: var(--leaf-color-primary);
+  --leaf-field-color: var(--leaf-color-primary-indicator, var(--leaf-color-primary));
   --leaf-field-color-alpha-12: var(--leaf-color-primary-alpha-12);
   --leaf-field-color-border-30: var(--leaf-color-primary-border-30);
   --leaf-field-hover-color: var(--leaf-color-border-hover, var(--leaf-field-color));
+  --leaf-field-border-width: var(--leaf-component-cascader-border-width, var(--leaf-border-width, 1px));
+  --leaf-field-text: var(--leaf-component-cascader-color, var(--leaf-color-text));
+  --leaf-field-rest-border: var(--leaf-component-cascader-border-color, var(--leaf-frame-border-color, var(--leaf-color-border)));
+  --leaf-field-background: var(--leaf-component-cascader-background, var(--leaf-color-surface));
+  --leaf-field-shadow: var(--leaf-component-cascader-shadow, var(--leaf-control-shadow, 0 0 0 0 transparent));
   box-sizing: border-box;
-  border: 1px solid var(--leaf-color-border);
+  border: var(--leaf-field-border-width) solid var(--leaf-component-cascader-border-color, var(--leaf-frame-border-color, var(--leaf-color-border)));
   border-radius: var(--leaf-component-cascader-radius, var(--leaf-radius));
   width: 100%;
   min-width: 0;
   color: var(--leaf-component-cascader-color, var(--leaf-color-text));
   background: var(--leaf-component-cascader-background, var(--leaf-color-surface));
-  box-shadow: var(--leaf-component-cascader-shadow, none);
+  box-shadow: var(--leaf-field-shadow);
   font-family: var(--leaf-font-family);
   font-size: var(--leaf-component-cascader-font-size, var(--leaf-current-font-size));
   line-height: var(--leaf-line-height, 1.5);
@@ -3360,6 +3756,7 @@
 }
 
 .leaf-cascader[data-status="error"] {
+  --leaf-field-rest-border: var(--leaf-field-color);
   --leaf-field-color: var(--leaf-color-danger);
   --leaf-field-color-alpha-12: var(--leaf-color-danger-alpha-12);
   --leaf-field-color-border-30: var(--leaf-color-danger-border-30);
@@ -3368,6 +3765,7 @@
 }
 
 .leaf-cascader[data-status="warning"] {
+  --leaf-field-rest-border: var(--leaf-field-color);
   --leaf-field-color: var(--leaf-color-warning);
   --leaf-field-color-alpha-12: var(--leaf-color-warning-alpha-12);
   --leaf-field-color-border-30: var(--leaf-color-warning-border-30);
@@ -3375,33 +3773,53 @@
   border-color: var(--leaf-field-color);
 }
 
-.leaf-cascader:hover:not([data-disabled]):not(:disabled):not(:focus-within):not([data-open]) {
-  border-color: var(--leaf-field-hover-color);
+.leaf-cascader[data-disabled], .leaf-cascader:disabled {
+  opacity: .55;
+  cursor: not-allowed;
+}
+
+.leaf-cascader:hover:not([data-disabled]):not(:disabled):where(:not(:focus-within):not([data-open])) {
+  color: var(--leaf-component-cascader-hover-color, var(--leaf-field-text));
+  background: var(--leaf-component-cascader-hover-background, var(--leaf-field-background));
+  border-color: var(--leaf-component-cascader-hover-border-color, var(--leaf-field-hover-color));
+  box-shadow: var(--leaf-component-cascader-hover-shadow, var(--leaf-field-shadow));
 }
 
-.leaf-cascader:focus-within, .leaf-cascader[data-open] {
-  border-color: var(--leaf-field-color);
-  box-shadow: 0 0 0 3px var(--leaf-field-color-alpha-12);
+.leaf-cascader:is(:focus-within, [data-open]):not([data-disabled]):not(:disabled) {
+  color: var(--leaf-component-cascader-focus-color, var(--leaf-field-text));
+  background: var(--leaf-component-cascader-focus-background, var(--leaf-field-background));
+  border-color: var(--leaf-component-cascader-focus-border-color, var(--leaf-field-color));
+  box-shadow: var(--leaf-component-cascader-focus-shadow, var(--leaf-field-shadow));
+  outline: 3px solid var(--leaf-color-focus, var(--leaf-field-color-alpha-12));
+  outline-offset: 0;
 }
 
-.leaf-cascader[data-disabled], .leaf-cascader:disabled {
-  background: var(--leaf-color-surface-muted);
-  opacity: .55;
-  cursor: not-allowed;
+.leaf-cascader:active:not([data-disabled]):not(:disabled) {
+  color: var(--leaf-component-cascader-active-color, var(--leaf-field-text));
+  background: var(--leaf-component-cascader-active-background, var(--leaf-field-background));
+  border-color: var(--leaf-component-cascader-active-border-color, var(--leaf-field-hover-color));
+  box-shadow: var(--leaf-component-cascader-active-shadow, var(--leaf-field-shadow));
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .leaf-cascader {
-    transition: none;
-  }
+.leaf-cascader[data-disabled], .leaf-cascader:disabled {
+  color: var(--leaf-component-cascader-disabled-color, var(--leaf-field-text));
+  background: var(--leaf-component-cascader-disabled-background, var(--leaf-color-surface-muted));
+  border-color: var(--leaf-component-cascader-disabled-border-color, var(--leaf-field-rest-border));
+  box-shadow: var(--leaf-component-cascader-disabled-shadow, var(--leaf-field-shadow));
 }
 
 @media (forced-colors: active) {
-  .leaf-cascader:focus-within {
+  .leaf-cascader:is(:focus-within, [data-open]):not([data-disabled]):not(:disabled) {
     outline: 2px solid highlight;
   }
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .leaf-cascader {
+    transition: none;
+  }
+}
+
 .leaf-cascader {
   min-height: var(--leaf-current-control-height);
   display: inline-flex;
@@ -3411,7 +3829,7 @@
 .leaf-cascader__trigger {
   box-sizing: border-box;
   width: 100%;
-  min-height: calc(var(--leaf-current-control-height) - 2px);
+  min-height: calc(var(--leaf-current-control-height) - 2*var(--leaf-field-border-width));
   border-radius: inherit;
   color: inherit;
   font: inherit;
@@ -3432,7 +3850,7 @@
 }
 
 .leaf-cascader__trigger:focus-visible {
-  outline: 3px solid var(--leaf-color-focus, var(--leaf-focus-color, var(--leaf-color-primary-alpha-42)));
+  outline: 3px solid var(--leaf-color-focus, var(--leaf-focus-color, var(--leaf-color-primary-focus, var(--leaf-color-primary-alpha-42))));
   outline-offset: 2px;
 }
 
@@ -3455,7 +3873,12 @@
 }
 
 .leaf-cascader--multiple .leaf-cascader__trigger {
-  padding-block: 3px;
+  padding-block: var(--leaf-component-cascader-padding-top, 3px) var(--leaf-component-cascader-padding-bottom, 3px);
+  padding-inline: var(--leaf-component-cascader-padding-left, 3px) var(--leaf-component-cascader-padding-right, 10px);
+}
+
+.leaf-cascader--multiple .leaf-cascader__trigger:where([dir="rtl"]) {
+  padding-inline: var(--leaf-component-cascader-padding-right, 3px) var(--leaf-component-cascader-padding-left, 10px);
 }
 
 .leaf-cascader--multiple .leaf-cascader__value {
@@ -3474,7 +3897,6 @@
 .leaf-cascader__panel {
   width: max-content;
   max-width: min(560px, 100vw - 24px);
-  overflow: auto hidden;
 }
 
 .leaf-cascader__columns {
@@ -3518,11 +3940,6 @@
   transform: rotate(180deg) translateX(2px);
 }
 
-.leaf-cascader[data-open] {
-  border-color: var(--leaf-field-color);
-  box-shadow: 0 0 0 3px var(--leaf-field-color-alpha-12);
-}
-
 .leaf-cascader[data-open] .leaf-cascader__trigger > svg {
   transform: rotate(180deg);
 }
@@ -3583,6 +4000,14 @@
   --leaf-current-font-size: var(--leaf-font-size-lg);
 }
 
+.leaf-cascader__panel {
+  --leaf-surface-border: var(--leaf-component-cascader-border-width, var(--leaf-component-floating-border-width, var(--leaf-border-width, 1px)));
+  border-color: var(--leaf-component-cascader-border-color, var(--leaf-component-floating-border-color, var(--leaf-frame-border-color, var(--leaf-color-border))));
+  color: var(--leaf-component-cascader-color, var(--leaf-component-floating-color, var(--leaf-color-text)));
+  background: var(--leaf-component-cascader-background, var(--leaf-component-floating-background, var(--leaf-color-surface-raised, var(--leaf-color-surface))));
+  box-shadow: var(--leaf-component-cascader-shadow, var(--leaf-component-floating-shadow, var(--leaf-surface-shadow, var(--leaf-shadow-md))));
+}
+
 .leaf-form {
   gap: var(--leaf-component-form-gap, var(--leaf-density-form-gap));
   color: var(--leaf-component-form-color, var(--leaf-color-text));
@@ -3593,6 +4018,7 @@
 
 .leaf-form-field {
   gap: 12px;
+  min-width: 0;
   display: grid;
 }
 
@@ -3609,6 +4035,22 @@
   grid-template-columns: minmax(0, 1fr);
 }
 
+.leaf-form-field--settings {
+  align-items: center;
+  gap: var(--leaf-spacing-lg);
+  grid-template-columns: minmax(0, 1fr) fit-content(50%);
+}
+
+.leaf-form-field--settings > .leaf-form-field__body {
+  grid-column: 2;
+  justify-self: end;
+  max-width: 100%;
+}
+
+.leaf-form-field__header {
+  min-width: 0;
+}
+
 .leaf-form-field__label {
   min-height: var(--leaf-control-height);
   align-self: start;
@@ -3622,15 +4064,21 @@
   width: max-content;
 }
 
-.leaf-form-field--right .leaf-form-field__label {
+.leaf-form-field--horizontal.leaf-form-field--right .leaf-form-field__label {
   justify-content: flex-end;
 }
 
-.leaf-form-field--vertical .leaf-form-field__label {
+.leaf-form-field--vertical .leaf-form-field__label, .leaf-form-field--settings .leaf-form-field__label {
   justify-content: flex-start;
   min-height: 0;
 }
 
+.leaf-form-field--vertical .leaf-form-field__label > span, .leaf-form-field--settings .leaf-form-field__label > span {
+  white-space: normal;
+  overflow-wrap: anywhere;
+  width: auto;
+}
+
 .leaf-form-field__required {
   color: var(--leaf-color-danger);
   margin-right: 4px;
@@ -3652,27 +4100,60 @@
   line-height: 1.5;
 }
 
+.leaf-form-field__summary-description {
+  color: var(--leaf-color-text-muted);
+  font-size: var(--leaf-font-size-sm);
+  overflow-wrap: anywhere;
+  margin-top: 4px;
+  line-height: 1.5;
+}
+
 .leaf-form-field__error {
   color: var(--leaf-color-danger);
   animation: var(--leaf-motion-animation, leaf-content-in var(--leaf-motion-duration) var(--leaf-motion-easing));
 }
 
 @media (max-width: 560px) {
-  .leaf-form-field--horizontal {
+  .leaf-form-field--horizontal, .leaf-form-field--settings {
     grid-template-columns: minmax(0, 1fr);
     gap: 6px;
   }
 
-  .leaf-form-field--horizontal > .leaf-form-field__body {
+  .leaf-form-field--horizontal > .leaf-form-field__body, .leaf-form-field--settings > .leaf-form-field__body {
     grid-column: 1;
+    justify-self: stretch;
   }
 
-  .leaf-form-field--horizontal .leaf-form-field__label {
+  .leaf-form-field--horizontal.leaf-form-field--right .leaf-form-field__label, .leaf-form-field--horizontal .leaf-form-field__label {
     justify-content: flex-start;
     min-height: 0;
   }
 }
 
+.leaf-form--settings, .leaf-form-group.leaf-form-group--settings, .leaf-form--settings > .leaf-form-list, .leaf-form-group--settings > .leaf-form-list {
+  gap: 0;
+}
+
+.leaf-form--settings > :not(.leaf-form-field) + *, .leaf-form--settings > .leaf-form-field + :not(.leaf-form-field), .leaf-form-group.leaf-form-group--settings > :not(.leaf-form-field) + *, .leaf-form-group.leaf-form-group--settings > .leaf-form-field + :not(.leaf-form-field), .leaf-form--settings > .leaf-form-list > :not(.leaf-form-field) + *, .leaf-form--settings > .leaf-form-list > .leaf-form-field + :not(.leaf-form-field), .leaf-form-group--settings > .leaf-form-list > :not(.leaf-form-field) + *, .leaf-form-group--settings > .leaf-form-list > .leaf-form-field + :not(.leaf-form-field) {
+  margin-block-start: var(--leaf-component-form-gap, var(--leaf-density-form-gap));
+}
+
+.leaf-form--settings > .leaf-form-field--settings-row, .leaf-form-group.leaf-form-group--settings > .leaf-form-field--settings-row, .leaf-form--settings > .leaf-form-list > .leaf-form-field--settings-row, .leaf-form-group--settings > .leaf-form-list > .leaf-form-field--settings-row {
+  padding-block: var(--leaf-component-form-gap, var(--leaf-spacing-md));
+}
+
+.leaf-form--settings > .leaf-form-field--settings-row + .leaf-form-field--settings-row, .leaf-form-group.leaf-form-group--settings > .leaf-form-field--settings-row + .leaf-form-field--settings-row, .leaf-form--settings > .leaf-form-list > .leaf-form-field--settings-row + .leaf-form-field--settings-row, .leaf-form-group--settings > .leaf-form-list > .leaf-form-field--settings-row + .leaf-form-field--settings-row {
+  border-block-start: 1px solid var(--leaf-color-divider);
+}
+
+.leaf-form--settings > .leaf-form-field--settings-row:first-child, .leaf-form-group.leaf-form-group--settings > .leaf-form-field--settings-row:first-child, .leaf-form--settings > .leaf-form-list > .leaf-form-field--settings-row:first-child, .leaf-form-group--settings > .leaf-form-list > .leaf-form-field--settings-row:first-child {
+  padding-block-start: 0;
+}
+
+.leaf-form--settings > .leaf-form-field--settings-row:last-child, .leaf-form-group.leaf-form-group--settings > .leaf-form-field--settings-row:last-child, .leaf-form--settings > .leaf-form-list > .leaf-form-field--settings-row:last-child, .leaf-form-group--settings > .leaf-form-list > .leaf-form-field--settings-row:last-child {
+  padding-block-end: 0;
+}
+
 .leaf-form-group {
   gap: var(--leaf-component-form-gap, var(--leaf-density-form-gap));
   border: 0;
@@ -3953,14 +4434,14 @@
 
 .leaf-modal {
   box-sizing: border-box;
-  border: 1px solid var(--leaf-component-modal-border-color, var(--leaf-color-divider));
+  border: var(--leaf-component-modal-border-width, var(--leaf-border-width, 1px)) solid var(--leaf-component-modal-border-color, var(--leaf-frame-border-color, var(--leaf-color-divider)));
   border-radius: var(--leaf-component-modal-radius, var(--leaf-radius-lg));
   background: var(--leaf-component-modal-background, var(--leaf-color-surface));
   max-width: 100%;
   max-height: calc(100vh - 48px);
   color: var(--leaf-component-modal-color, var(--leaf-color-text));
   font: var(--leaf-component-modal-font-size, var(--leaf-font-size))/1.6 var(--leaf-font-family);
-  box-shadow: var(--leaf-component-modal-shadow, var(--leaf-shadow-lg));
+  box-shadow: var(--leaf-component-modal-shadow, var(--leaf-surface-shadow, var(--leaf-shadow-lg)));
   opacity: 1;
   transition: transform var(--leaf-motion-slow) var(--leaf-motion-spring),opacity var(--leaf-motion-slow) var(--leaf-motion-easing);
   outline: none;
@@ -4025,7 +4506,7 @@
 }
 
 .leaf-modal__close:focus-visible {
-  outline: 2px solid var(--leaf-color-primary);
+  outline: 2px solid var(--leaf-color-primary-indicator, var(--leaf-color-primary));
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -4061,7 +4542,8 @@
   color: var(--leaf-component-alert-color, var(--leaf-color-text));
   font: var(--leaf-font-size)/1.5 var(--leaf-font-family);
   border-radius: var(--leaf-component-alert-radius, var(--leaf-radius-md));
-  border: 1px solid var(--leaf-component-alert-border-color, var(--leaf-color-divider));
+  border: var(--leaf-component-alert-border-width, var(--leaf-border-width, 1px)) solid var(--leaf-component-alert-border-color, var(--leaf-frame-border-color, var(--leaf-color-divider)));
+  box-shadow: var(--leaf-component-alert-shadow, var(--leaf-surface-shadow, none));
   padding: var(--leaf-component-alert-padding, 14px 16px);
   display: flex;
 }
@@ -4184,6 +4666,10 @@
 }
 
 .leaf-confirm {
+  border-width: var(--leaf-component-confirm-border-width, var(--leaf-component-modal-border-width, var(--leaf-border-width, 1px)));
+  border-color: var(--leaf-component-confirm-border-color, var(--leaf-component-modal-border-color, var(--leaf-frame-border-color, var(--leaf-color-divider))));
+  background: var(--leaf-component-confirm-background, var(--leaf-component-modal-background, var(--leaf-color-surface)));
+  box-shadow: var(--leaf-component-confirm-shadow, var(--leaf-component-modal-shadow, var(--leaf-surface-shadow, var(--leaf-shadow-lg))));
   --leaf-feedback-color: var(--leaf-color-text);
   --leaf-feedback-color-border-12: var(--leaf-color-text-border-12);
   --leaf-feedback-color-surface-5: var(--leaf-color-text-surface-5);
@@ -4353,7 +4839,7 @@
 }
 
 .leaf-dropdown .leaf-floating__option[aria-checked="true"] {
-  color: var(--leaf-color-primary);
+  color: var(--leaf-color-primary-ink, var(--leaf-color-primary));
   background: var(--leaf-color-primary-surface-9);
 }
 
@@ -4364,15 +4850,15 @@
 
 .leaf-dropdown__highlight {
   box-sizing: border-box;
-  top: 0;
-  left: var(--leaf-surface-padding-left);
-  right: var(--leaf-surface-padding-right);
   height: var(--leaf-menu-highlight-height, var(--leaf-density-option-height));
   translate: 0 var(--leaf-menu-highlight-y, 0px);
   border: 1px solid var(--leaf-color-border-alpha-55);
   border-radius: var(--leaf-floating-option-radius);
   background: var(--leaf-color-option-hover);
   position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
 }
 
 .leaf-dropdown__highlight[data-selected] {
@@ -4433,6 +4919,14 @@
   }
 }
 
+.leaf-dropdown {
+  --leaf-surface-border: var(--leaf-component-dropdown-border-width, var(--leaf-component-floating-border-width, var(--leaf-border-width, 1px)));
+  border-color: var(--leaf-component-dropdown-border-color, var(--leaf-component-floating-border-color, var(--leaf-frame-border-color, var(--leaf-color-border))));
+  color: var(--leaf-component-dropdown-color, var(--leaf-component-floating-color, var(--leaf-color-text)));
+  background: var(--leaf-component-dropdown-background, var(--leaf-component-floating-background, var(--leaf-color-surface-raised, var(--leaf-color-surface))));
+  box-shadow: var(--leaf-component-dropdown-shadow, var(--leaf-component-floating-shadow, var(--leaf-surface-shadow, var(--leaf-shadow-md))));
+}
+
 .leaf-message-region {
   z-index: var(--leaf-z-index-message, 1200);
   pointer-events: none;
@@ -4486,12 +4980,12 @@
   box-sizing: border-box;
   max-width: 100%;
   padding: var(--leaf-component-message-padding, 10px 14px);
-  border: 1px solid var(--leaf-color-divider);
+  border: var(--leaf-component-message-border-width, var(--leaf-border-width, 1px)) solid var(--leaf-component-message-border-color, var(--leaf-frame-border-color, var(--leaf-color-divider)));
   border-radius: var(--leaf-component-message-radius, var(--leaf-radius));
   background: var(--leaf-component-message-background, var(--leaf-color-surface-raised, var(--leaf-color-surface)));
   color: var(--leaf-component-message-color, var(--leaf-color-text));
   font: var(--leaf-component-message-font-size, var(--leaf-font-size))/1.5 var(--leaf-font-family);
-  box-shadow: var(--leaf-component-message-shadow, var(--leaf-shadow-md));
+  box-shadow: var(--leaf-component-message-shadow, var(--leaf-surface-shadow, var(--leaf-shadow-md)));
   pointer-events: auto;
   transition: transform var(--leaf-motion-slow) var(--leaf-motion-easing);
   display: flex;
@@ -4509,7 +5003,7 @@
 }
 
 .leaf-message__icon {
-  color: var(--leaf-feedback-color, var(--leaf-color-primary));
+  color: var(--leaf-feedback-color, var(--leaf-color-primary-ink, var(--leaf-color-primary)));
   flex-shrink: 0;
   justify-content: center;
   align-items: center;
@@ -4550,7 +5044,7 @@
 }
 
 .leaf-message > button:focus-visible {
-  outline: 2px solid var(--leaf-color-primary);
+  outline: 2px solid var(--leaf-color-primary-indicator, var(--leaf-color-primary));
 }
 
 .leaf-message[data-state="closing"] {
@@ -4601,7 +5095,7 @@
 }
 
 .leaf-calendar__heading:focus-visible {
-  outline: 2px solid var(--leaf-color-primary);
+  outline: 2px solid var(--leaf-color-primary-indicator, var(--leaf-color-primary));
 }
 
 .leaf-calendar__weekdays, .leaf-calendar__cells {
@@ -4699,12 +5193,12 @@
 }
 
 .leaf-picker-footer .leaf-button--ghost {
-  color: var(--leaf-color-primary);
+  color: var(--leaf-color-primary-ink, var(--leaf-color-primary));
 }
 
 .leaf-picker-time-toggle {
   border-radius: var(--leaf-radius-sm);
-  color: var(--leaf-color-primary);
+  color: var(--leaf-color-primary-ink, var(--leaf-color-primary));
   font: inherit;
   cursor: pointer;
   transition: color var(--leaf-motion-fast) var(--leaf-motion-easing),background-color var(--leaf-motion-fast) var(--leaf-motion-easing);
@@ -4720,7 +5214,7 @@
 }
 
 .leaf-picker-time-toggle:focus-visible {
-  outline: 2px solid var(--leaf-color-primary);
+  outline: 2px solid var(--leaf-color-primary-indicator, var(--leaf-color-primary));
 }
 
 .leaf-picker-time-view {
@@ -4795,30 +5289,32 @@
 }
 
 .leaf-steps__item {
+  column-gap: var(--leaf-steps-gap);
   flex: 1;
+  grid-template-columns: auto minmax(12px, 1fr);
   min-width: 0;
   padding-inline-end: 24px;
   list-style: none;
+  display: grid;
   position: relative;
 }
 
 .leaf-steps__item:last-child {
   flex: 0 auto;
   padding-inline-end: 0;
+  display: block;
 }
 
 .leaf-steps__item:not(:last-child):before, .leaf-steps__item:not(:last-child):after {
   content: "";
-  top: calc(var(--leaf-steps-icon-size)/2);
   background: var(--leaf-color-border);
+  grid-area: 1 / 2;
   height: 1px;
-  position: absolute;
-  inset-inline-start: calc(var(--leaf-steps-icon-size) + var(--leaf-steps-gap));
-  inset-inline-end: 12px;
+  margin-block-start: calc(var(--leaf-steps-icon-size)/2);
 }
 
 .leaf-steps__item:not(:last-child):after {
-  background: var(--leaf-color-primary);
+  background: var(--leaf-color-primary-indicator, var(--leaf-color-primary));
   transform-origin: 0;
   transition: transform var(--leaf-motion-slow) var(--leaf-motion-easing);
   transform: scaleX(0);
@@ -4837,6 +5333,7 @@
   text-align: start;
   background: none;
   border: 0;
+  grid-area: 1 / 1;
   padding: 0;
   display: flex;
   position: relative;
@@ -4853,7 +5350,7 @@
 }
 
 .leaf-steps button.leaf-steps__content:focus-visible {
-  outline: 3px solid var(--leaf-color-focus, var(--leaf-focus-color, var(--leaf-color-primary-alpha-42)));
+  outline: 3px solid var(--leaf-color-focus, var(--leaf-focus-color, var(--leaf-color-primary-focus, var(--leaf-color-primary-alpha-42))));
   outline-offset: 2px;
 }
 
@@ -4883,7 +5380,6 @@
 
 .leaf-steps__title {
   padding-block: calc((var(--leaf-steps-icon-size) - 1.5em)/2);
-  background: var(--leaf-color-surface);
   padding-inline-end: 10px;
   display: inline-block;
 }
@@ -4896,8 +5392,8 @@
 
 [data-status="process"] .leaf-steps__icon {
   background: var(--leaf-color-surface);
-  border-color: var(--leaf-color-primary);
-  color: var(--leaf-color-primary);
+  border-color: var(--leaf-color-primary-indicator, var(--leaf-color-primary));
+  color: var(--leaf-color-primary-ink, var(--leaf-color-primary));
   border-width: 1.5px;
 }
 
@@ -4906,8 +5402,8 @@
 }
 
 [data-status="finish"] .leaf-steps__icon {
-  background: var(--leaf-color-primary);
-  border-color: var(--leaf-color-primary);
+  background: var(--leaf-color-primary-indicator, var(--leaf-color-primary));
+  border-color: var(--leaf-color-primary-indicator, var(--leaf-color-primary));
   color: var(--leaf-color-on-primary);
 }
 
@@ -4933,6 +5429,7 @@
 
 .leaf-steps--vertical .leaf-steps__item {
   padding-inline-end: 0;
+  display: block;
 }
 
 .leaf-steps--vertical .leaf-steps__item:before, .leaf-steps--vertical .leaf-steps__item:after {
@@ -4940,6 +5437,8 @@
   bottom: -14px;
   width: 1px;
   height: auto;
+  margin-block-start: 0;
+  position: absolute;
   inset-inline-start: calc(var(--leaf-steps-icon-size)/2);
 }
 
@@ -4961,6 +5460,12 @@
     padding-inline-end: 4px;
   }
 
+  .leaf-steps--horizontal .leaf-steps__item:before, .leaf-steps--horizontal .leaf-steps__item:after {
+    position: absolute;
+    inset-inline-start: calc(var(--leaf-steps-icon-size) + 8px);
+    inset-inline-end: 0;
+  }
+
   .leaf-steps--horizontal .leaf-steps__content {
     flex-direction: column;
     gap: 4px;
@@ -4998,7 +5503,7 @@
 }
 
 .leaf-steps--dot [data-status="process"] .leaf-steps__icon, .leaf-steps--dot [data-status="finish"] .leaf-steps__icon {
-  color: var(--leaf-color-primary);
+  color: var(--leaf-color-primary-ink, var(--leaf-color-primary));
   background: none;
 }
 
@@ -5006,7 +5511,7 @@
   fill: none;
   width: calc(100% + 8px);
   height: calc(100% + 8px);
-  stroke: var(--leaf-color-primary);
+  stroke: var(--leaf-color-primary-indicator, var(--leaf-color-primary));
   stroke-width: 2px;
   pointer-events: none;
   position: absolute;
@@ -5079,13 +5584,13 @@
 }
 
 .leaf-breadcrumb a:hover:not([aria-current="page"]) {
-  color: var(--leaf-color-primary);
+  color: var(--leaf-color-primary-ink, var(--leaf-color-primary));
   -webkit-text-decoration-color: var(--leaf-color-primary-alpha-45);
   text-decoration-color: var(--leaf-color-primary-alpha-45);
 }
 
 .leaf-breadcrumb a:focus-visible {
-  outline: 2px solid var(--leaf-color-primary);
+  outline: 2px solid var(--leaf-color-primary-indicator, var(--leaf-color-primary));
   outline-offset: 3px;
 }
 
@@ -5133,7 +5638,7 @@
   height: var(--leaf-indicator-height, 0px);
   transform: translate(var(--leaf-indicator-x, 0px), var(--leaf-indicator-y, 0px));
   box-sizing: border-box;
-  border: 1px solid var(--leaf-color-primary-border-24);
+  border: var(--leaf-border-width, 1px) solid var(--leaf-frame-border-color, var(--leaf-color-primary-border-24));
   border-radius: var(--leaf-radius);
   background: var(--leaf-color-primary-surface-8);
   opacity: 0;
@@ -5154,6 +5659,7 @@
   box-sizing: border-box;
   min-width: var(--leaf-current-control-height);
   height: var(--leaf-current-control-height);
+  border: var(--leaf-border-width, 1px) solid #0000;
   border-radius: var(--leaf-radius);
   color: inherit;
   font: inherit;
@@ -5162,7 +5668,6 @@
   cursor: pointer;
   transition: background-color var(--leaf-motion-duration),border-color var(--leaf-motion-duration),color var(--leaf-motion-duration),box-shadow var(--leaf-motion-duration) var(--leaf-motion-easing);
   background: none;
-  border: 1px solid #0000;
   justify-content: center;
   align-items: center;
   padding: 0 8px;
@@ -5176,7 +5681,7 @@
 }
 
 .leaf-pagination > button[aria-current="page"], .leaf-pagination__entry > button[aria-current="page"] {
-  color: var(--leaf-color-primary);
+  color: var(--leaf-color-primary-ink, var(--leaf-color-primary));
   font-weight: var(--leaf-font-weight);
   background: none;
   border-color: #0000;
@@ -5196,33 +5701,34 @@
 }
 
 .leaf-pagination > button:focus-visible, .leaf-pagination__entry > button:focus-visible {
-  outline: 3px solid var(--leaf-color-focus, var(--leaf-focus-color, var(--leaf-color-primary-alpha-42)));
+  outline: 3px solid var(--leaf-color-focus, var(--leaf-focus-color, var(--leaf-color-primary-focus, var(--leaf-color-primary-alpha-42))));
   outline-offset: 2px;
 }
 
 .leaf-pagination--outline > button, .leaf-pagination--outline .leaf-pagination__entry > button {
-  border-color: var(--leaf-color-border);
+  border-color: var(--leaf-frame-border-color, var(--leaf-color-border));
+  box-shadow: var(--leaf-control-shadow, none);
 }
 
 .leaf-pagination--outline > button:before, .leaf-pagination--outline .leaf-pagination__entry > button:before {
   content: "";
   z-index: -2;
+  inset: calc(-1*var(--leaf-border-width, 1px));
   border-radius: inherit;
   background: var(--leaf-color-surface);
   pointer-events: none;
   position: absolute;
-  inset: -1px;
 }
 
 .leaf-pagination--outline > button:hover:not(:disabled):not([aria-current="page"]), .leaf-pagination--outline .leaf-pagination__entry > button:hover:not(:disabled):not([aria-current="page"]) {
-  color: var(--leaf-color-primary-hover, var(--leaf-color-primary));
-  border-color: var(--leaf-color-primary-hover, var(--leaf-color-primary));
+  color: var(--leaf-color-primary-ink-hover, var(--leaf-color-primary-hover, var(--leaf-color-primary)));
+  border-color: var(--leaf-color-primary-ink-hover, var(--leaf-color-primary-hover, var(--leaf-color-primary)));
   background: none;
 }
 
 .leaf-pagination--outline > button:active:not(:disabled):not([aria-current="page"]), .leaf-pagination--outline .leaf-pagination__entry > button:active:not(:disabled):not([aria-current="page"]) {
-  color: var(--leaf-color-primary-active, var(--leaf-color-primary));
-  border-color: var(--leaf-color-primary-active, var(--leaf-color-primary));
+  color: var(--leaf-color-primary-ink-active, var(--leaf-color-primary-active, var(--leaf-color-primary)));
+  border-color: var(--leaf-color-primary-ink-active, var(--leaf-color-primary-active, var(--leaf-color-primary)));
 }
 
 .leaf-pagination--outline > button[aria-current="page"], .leaf-pagination--outline .leaf-pagination__entry > button[aria-current="page"] {
@@ -5234,7 +5740,7 @@
 }
 
 .leaf-pagination--outline .leaf-pagination__indicator {
-  border-color: var(--leaf-color-primary);
+  border-color: var(--leaf-frame-border-color, var(--leaf-color-primary-indicator, var(--leaf-color-primary)));
 }
 
 .leaf-pagination[data-disabled] .leaf-pagination__indicator[data-visible="true"] {
@@ -5484,7 +5990,7 @@
 }
 
 .leaf-checkable-tag:focus-visible {
-  outline: 2px solid var(--leaf-color-primary);
+  outline: 2px solid var(--leaf-color-primary-indicator, var(--leaf-color-primary));
   outline-offset: 2px;
 }
 
@@ -5811,10 +6317,10 @@
   max-width: 100%;
   max-height: 100%;
   color: var(--leaf-component-drawer-color, var(--leaf-color-text));
-  border: 1px solid var(--leaf-component-drawer-border-color, var(--leaf-color-divider));
+  border: var(--leaf-component-drawer-border-width, var(--leaf-border-width, 1px)) solid var(--leaf-component-drawer-border-color, var(--leaf-frame-border-color, var(--leaf-color-divider)));
   background: var(--leaf-component-drawer-background, var(--leaf-color-surface));
   font: var(--leaf-component-drawer-font-size, var(--leaf-font-size))/1.6 var(--leaf-font-family);
-  box-shadow: var(--leaf-component-drawer-shadow, var(--leaf-shadow-lg));
+  box-shadow: var(--leaf-component-drawer-shadow, var(--leaf-surface-shadow, var(--leaf-shadow-lg)));
   opacity: 1;
   transition: transform var(--leaf-motion-slow) var(--leaf-motion-easing),opacity var(--leaf-motion-slow) var(--leaf-motion-easing);
   outline: none;
@@ -5836,7 +6342,19 @@
 }
 
 .leaf-drawer__body {
+  border-radius: 0;
   flex: 1;
+  padding: 0;
+  overflow: hidden;
+}
+
+.leaf-drawer__viewport {
+  overscroll-behavior: contain;
+}
+
+.leaf-drawer__content {
+  box-sizing: border-box;
+  padding: var(--leaf-component-drawer-padding, var(--leaf-density-dialog-block) var(--leaf-density-dialog-inline));
 }
 
 .leaf-drawer-mask[data-state="closing"] .leaf-drawer {
@@ -5864,7 +6382,7 @@
 
 .leaf-drawer__resize:after {
   content: "";
-  background: var(--leaf-color-primary);
+  background: var(--leaf-color-primary-indicator, var(--leaf-color-primary));
   opacity: 0;
   transition: opacity var(--leaf-motion-fast) var(--leaf-motion-easing);
   position: absolute;
@@ -5876,7 +6394,7 @@
 }
 
 .leaf-drawer__resize:focus-visible {
-  outline: 2px solid var(--leaf-color-primary);
+  outline: 2px solid var(--leaf-color-primary-indicator, var(--leaf-color-primary));
   outline-offset: -2px;
 }
 
@@ -5933,7 +6451,7 @@
 .leaf-loading__spinner {
   width: var(--leaf-spinner-size);
   height: var(--leaf-spinner-size);
-  color: var(--leaf-color-primary);
+  color: var(--leaf-color-primary-ink, var(--leaf-color-primary));
   animation: var(--leaf-motion-animation, leaf-spin calc(var(--leaf-motion-duration) * 4.5) linear infinite);
   animation-play-state: var(--leaf-motion-play-state);
 }
@@ -5990,7 +6508,7 @@
 }
 
 .leaf-progress {
-  --leaf-progress-color: var(--leaf-color-primary);
+  --leaf-progress-color: var(--leaf-color-primary-indicator, var(--leaf-color-primary));
 }
 
 .leaf-progress[data-status="success"] {
@@ -6179,7 +6697,7 @@
   background: var(--leaf-component-tooltip-background, var(--leaf-color-text));
   font-size: var(--leaf-font-size-sm);
   overflow-wrap: anywhere;
-  box-shadow: var(--leaf-component-tooltip-shadow, var(--leaf-shadow-md));
+  box-shadow: var(--leaf-component-tooltip-shadow, var(--leaf-surface-shadow, var(--leaf-shadow-md)));
   transition-duration: var(--leaf-motion-fast),var(--leaf-motion-duration),var(--leaf-motion-duration);
   border: 0;
   line-height: 1.6;
@@ -6191,12 +6709,13 @@
 
 .leaf-calendar-view {
   box-sizing: border-box;
-  border: 1px solid var(--leaf-color-border);
-  border-radius: var(--leaf-radius-md);
-  background: var(--leaf-color-surface-raised, var(--leaf-color-surface));
+  border: var(--leaf-component-calendar-border-width, var(--leaf-border-width, 1px)) solid var(--leaf-component-calendar-border-color, var(--leaf-frame-border-color, var(--leaf-color-border)));
   width: 300px;
   min-width: 0;
   max-width: 100%;
+  box-shadow: var(--leaf-component-calendar-shadow, var(--leaf-surface-shadow, none));
+  border-radius: var(--leaf-radius-md);
+  background: var(--leaf-color-surface-raised, var(--leaf-color-surface));
   color: var(--leaf-color-text);
   font: var(--leaf-font-size)/1.5 var(--leaf-font-family);
 }
@@ -6269,11 +6788,11 @@
 
 .leaf-calendar-view--full .leaf-calendar__today:hover {
   background: var(--leaf-color-primary-surface-10);
-  color: var(--leaf-color-primary);
+  color: var(--leaf-color-primary-ink, var(--leaf-color-primary));
 }
 
 .leaf-calendar-view--full .leaf-calendar__today:focus-visible {
-  outline: 2px solid var(--leaf-color-primary);
+  outline: 2px solid var(--leaf-color-primary-indicator, var(--leaf-color-primary));
   outline-offset: 2px;
 }
 
@@ -6310,7 +6829,7 @@
 }
 
 .leaf-calendar-view--full .leaf-date-picker__day[aria-current="date"]:not(:disabled) {
-  border-color: var(--leaf-color-primary);
+  border-color: var(--leaf-color-primary-indicator, var(--leaf-color-primary));
 }
 
 .leaf-calendar-view--full .leaf-date-picker__day--outside {
@@ -6349,7 +6868,7 @@
 }
 
 .leaf-calendar-view--full .leaf-date-picker__day--selected:not(:disabled) .leaf-calendar__cell-label {
-  background: var(--leaf-color-primary);
+  background: var(--leaf-color-primary-indicator, var(--leaf-color-primary));
   color: var(--leaf-color-on-primary);
 }
 
@@ -6421,16 +6940,6 @@
   --leaf-current-control-height: var(--leaf-control-height, 36px);
 }
 
-.leaf-tabs--sm {
-  --leaf-current-control-height: var(--leaf-control-height-sm, 30px);
-  --leaf-current-font-size: var(--leaf-font-size-sm, 12px);
-}
-
-.leaf-tabs--lg {
-  --leaf-current-control-height: var(--leaf-control-height-lg, 42px);
-  --leaf-current-font-size: var(--leaf-font-size-lg, 16px);
-}
-
 .leaf-tabs {
   min-width: 0;
   color: var(--leaf-component-tabs-color, var(--leaf-color-text));
@@ -6443,12 +6952,14 @@
   display: flex;
 }
 
-.leaf-tabs__list {
-  scrollbar-width: thin;
+.leaf-tabs__scroll {
+  flex: 1;
   min-width: 0;
+}
+
+.leaf-tabs__list {
+  box-sizing: border-box;
   box-shadow: inset 0 -1px 0 var(--leaf-color-divider);
-  flex: 1;
-  overflow: auto;
 }
 
 .leaf-tabs__track {
@@ -6484,7 +6995,7 @@
 .leaf-tabs__indicator:after {
   content: "";
   inset-inline: 0;
-  background: var(--leaf-color-primary);
+  background: var(--leaf-color-primary-indicator, var(--leaf-color-primary));
   border-radius: 2px;
   height: 2px;
   position: absolute;
@@ -6510,25 +7021,17 @@
 }
 
 .leaf-tabs__tab[aria-selected="true"] {
-  color: var(--leaf-color-primary);
+  color: var(--leaf-color-primary-ink, var(--leaf-color-primary));
   font-weight: var(--leaf-font-weight);
 }
 
-.leaf-tabs__tab:hover:not(:disabled):not([aria-selected="true"]) {
-  color: var(--leaf-color-primary-hover, var(--leaf-color-primary));
-}
-
-.leaf-tabs__tab:active:not(:disabled):not([aria-selected="true"]) {
-  color: var(--leaf-color-primary-active, var(--leaf-color-primary));
-}
-
 .leaf-tabs__tab:disabled {
   opacity: .45;
   cursor: not-allowed;
 }
 
 .leaf-tabs__tab:focus-visible {
-  outline: 2px solid var(--leaf-color-primary);
+  outline: 2px solid var(--leaf-color-primary-indicator, var(--leaf-color-primary));
   outline-offset: -3px;
 }
 
@@ -6574,7 +7077,7 @@
 }
 
 .leaf-tabs__close:focus-visible {
-  outline: 3px solid var(--leaf-color-focus, var(--leaf-focus-color, var(--leaf-color-primary-alpha-42)));
+  outline: 3px solid var(--leaf-color-focus, var(--leaf-focus-color, var(--leaf-color-primary-focus, var(--leaf-color-primary-alpha-42))));
   outline-offset: 2px;
 }
 
@@ -6595,7 +7098,7 @@
 }
 
 .leaf-tabs__drag:focus-visible {
-  outline: 3px solid var(--leaf-color-focus, var(--leaf-focus-color, var(--leaf-color-primary-alpha-42)));
+  outline: 3px solid var(--leaf-color-focus, var(--leaf-focus-color, var(--leaf-color-primary-focus, var(--leaf-color-primary-alpha-42))));
   outline-offset: 2px;
 }
 
@@ -6621,7 +7124,7 @@
 }
 
 .leaf-tabs__panel:focus-visible {
-  outline: 3px solid var(--leaf-color-focus, var(--leaf-focus-color, var(--leaf-color-primary-alpha-42)));
+  outline: 3px solid var(--leaf-color-focus, var(--leaf-focus-color, var(--leaf-color-primary-focus, var(--leaf-color-primary-alpha-42))));
   outline-offset: 2px;
   outline-offset: -2px;
 }
@@ -6632,27 +7135,32 @@
 
 .leaf-tabs--card .leaf-tabs__list {
   --leaf-surface-radius: var(--leaf-component-tabs-radius, var(--leaf-radius));
-  --leaf-surface-padding: var(--leaf-component-tabs-padding, var(--leaf-tabs-card-padding, 4px));
-  --leaf-surface-border: 1px;
+  --leaf-surface-padding: var(--leaf-component-tabs-padding, 3px);
+  --leaf-surface-border: var(--leaf-component-tabs-border-width, var(--leaf-border-width, 1px));
   --leaf-surface-padding-top: var(--leaf-component-tabs-padding-top, var(--leaf-surface-padding));
   --leaf-surface-padding-right: var(--leaf-component-tabs-padding-right, var(--leaf-surface-padding));
   --leaf-surface-padding-bottom: var(--leaf-component-tabs-padding-bottom, var(--leaf-surface-padding));
   --leaf-surface-padding-left: var(--leaf-component-tabs-padding-left, var(--leaf-surface-padding));
   box-sizing: border-box;
-  --leaf-tabs-card-tab-height: max(1px, calc(var(--leaf-current-control-height) - var(--leaf-surface-padding-top) - var(--leaf-surface-padding-bottom) - 2px));
+  --leaf-tabs-card-tab-height: max(1px, calc(var(--leaf-current-control-height) - var(--leaf-surface-padding-top) - var(--leaf-surface-padding-bottom) - 2 * var(--leaf-surface-border)));
   min-height: var(--leaf-current-control-height);
-  border: 1px solid var(--leaf-color-border);
-  background: var(--leaf-color-surface-muted);
-  box-shadow: none;
+  border: var(--leaf-surface-border) solid var(--leaf-component-tabs-border-color, var(--leaf-frame-border-color, var(--leaf-color-border-alpha-65)));
+  background: var(--leaf-component-tabs-background, var(--leaf-color-surface-muted));
+  box-shadow: var(--leaf-component-tabs-shadow, var(--leaf-control-shadow, none));
+  flex: 0 auto;
+}
+
+.leaf-tabs--card .leaf-tabs__scroll {
   flex: 0 auto;
+  width: auto;
 }
 
 .leaf-tabs--card .leaf-tabs__track {
+  gap: var(--leaf-component-tabs-gap, 3px);
   box-sizing: border-box;
   min-width: calc(100% + var(--leaf-surface-padding-left) + var(--leaf-surface-padding-right));
   padding: var(--leaf-surface-padding-top) var(--leaf-surface-padding-right) var(--leaf-surface-padding-bottom) var(--leaf-surface-padding-left);
   margin: calc(-1*var(--leaf-surface-padding-top)) calc(-1*var(--leaf-surface-padding-right)) calc(-1*var(--leaf-surface-padding-bottom)) calc(-1*var(--leaf-surface-padding-left));
-  gap: 2px;
 }
 
 .leaf-tabs--card .leaf-tabs__indicator {
@@ -6742,10 +7250,28 @@
   min-height: var(--leaf-tabs-card-tab-height);
   border-radius: var(--leaf-surface-inner-radius);
   font-weight: var(--leaf-font-weight);
+  color: var(--leaf-component-tabs-color, var(--leaf-color-text));
+  gap: 6px;
   padding: 0 12px;
   line-height: 1.5;
 }
 
+.leaf-tabs--card:is(.leaf-tabs--left, .leaf-tabs--right) .leaf-tabs__track {
+  gap: var(--leaf-component-tabs-gap, 3px);
+}
+
+.leaf-tabs--block .leaf-tabs__list, .leaf-tabs--block .leaf-tabs__scroll {
+  flex: 1;
+}
+
+.leaf-tabs--block .leaf-tabs__track {
+  width: auto;
+}
+
+.leaf-tabs--block .leaf-tabs__entry, .leaf-tabs--block .leaf-tabs__tab {
+  flex: 1;
+}
+
 @media (prefers-reduced-motion: reduce) {
   .leaf-tabs__tab, .leaf-tabs__close, .leaf-tabs__indicator[data-animate="true"] {
     transition: none;
@@ -6758,17 +7284,61 @@
 }
 
 .leaf-tabs--sm {
-  --leaf-tabs-card-padding: 2px;
   --leaf-current-control-height: var(--leaf-component-tabs-height-sm, var(--leaf-control-height-sm));
   --leaf-current-font-size: var(--leaf-font-size-sm);
 }
 
 .leaf-tabs--lg {
-  --leaf-tabs-card-padding: 5px;
   --leaf-current-control-height: var(--leaf-component-tabs-height-lg, var(--leaf-control-height-lg));
   --leaf-current-font-size: var(--leaf-font-size-lg);
 }
 
+.leaf-tabs__tab {
+  --leaf-tabs-tab-color: var(--leaf-color-text-muted);
+  --leaf-tabs-tab-hover-color: var(--leaf-color-primary-ink-hover, var(--leaf-color-primary-hover, var(--leaf-color-primary)));
+  --leaf-tabs-tab-active-color: var(--leaf-color-primary-ink-active, var(--leaf-color-primary-active, var(--leaf-color-primary)));
+}
+
+.leaf-tabs__tab[aria-selected="true"] {
+  --leaf-tabs-tab-color: var(--leaf-color-primary-ink, var(--leaf-color-primary));
+  --leaf-tabs-tab-hover-color: var(--leaf-color-primary-ink, var(--leaf-color-primary));
+  --leaf-tabs-tab-active-color: var(--leaf-color-primary-ink, var(--leaf-color-primary));
+}
+
+.leaf-tabs__tab:focus-visible:not(:disabled) {
+  color: var(--leaf-component-tabs-focus-color, var(--leaf-tabs-tab-color));
+  background: var(--leaf-component-tabs-focus-background, transparent);
+  border-color: var(--leaf-component-tabs-focus-border-color, transparent);
+  box-shadow: var(--leaf-component-tabs-focus-shadow, none);
+}
+
+.leaf-tabs__tab:hover:not(:disabled):where(:not(:focus-visible)) {
+  color: var(--leaf-component-tabs-hover-color, var(--leaf-tabs-tab-hover-color));
+  background: var(--leaf-component-tabs-hover-background, transparent);
+  border-color: var(--leaf-component-tabs-hover-border-color, transparent);
+  box-shadow: var(--leaf-component-tabs-hover-shadow, none);
+}
+
+.leaf-tabs__tab:active:not(:disabled) {
+  color: var(--leaf-component-tabs-active-color, var(--leaf-tabs-tab-active-color));
+  background: var(--leaf-component-tabs-active-background, transparent);
+  border-color: var(--leaf-component-tabs-active-border-color, transparent);
+  box-shadow: var(--leaf-component-tabs-active-shadow, none);
+}
+
+.leaf-tabs__tab:disabled {
+  color: var(--leaf-component-tabs-disabled-color, var(--leaf-tabs-tab-color));
+  background: var(--leaf-component-tabs-disabled-background, transparent);
+  border-color: var(--leaf-component-tabs-disabled-border-color, transparent);
+  box-shadow: var(--leaf-component-tabs-disabled-shadow, none);
+}
+
+.leaf-tabs--card .leaf-tabs__tab {
+  --leaf-tabs-tab-color: var(--leaf-component-tabs-color, var(--leaf-color-text));
+  --leaf-tabs-tab-hover-color: var(--leaf-tabs-tab-color);
+  --leaf-tabs-tab-active-color: var(--leaf-tabs-tab-color);
+}
+
 @media (forced-colors: active) {
   .leaf-tabs__indicator:after, .leaf-tabs--card .leaf-tabs__indicator {
     forced-color-adjust: none;
@@ -6790,18 +7360,23 @@
 }
 
 .leaf-input-number {
-  --leaf-field-color: var(--leaf-color-primary);
+  --leaf-field-color: var(--leaf-color-primary-indicator, var(--leaf-color-primary));
   --leaf-field-color-alpha-12: var(--leaf-color-primary-alpha-12);
   --leaf-field-color-border-30: var(--leaf-color-primary-border-30);
   --leaf-field-hover-color: var(--leaf-color-border-hover, var(--leaf-field-color));
+  --leaf-field-border-width: var(--leaf-component-input-number-border-width, var(--leaf-border-width, 1px));
+  --leaf-field-text: var(--leaf-component-input-number-color, var(--leaf-color-text));
+  --leaf-field-rest-border: var(--leaf-component-input-number-border-color, var(--leaf-frame-border-color, var(--leaf-color-border)));
+  --leaf-field-background: var(--leaf-component-input-number-background, var(--leaf-color-surface));
+  --leaf-field-shadow: var(--leaf-component-input-number-shadow, var(--leaf-control-shadow, 0 0 0 0 transparent));
   box-sizing: border-box;
-  border: 1px solid var(--leaf-color-border);
+  border: var(--leaf-field-border-width) solid var(--leaf-component-input-number-border-color, var(--leaf-frame-border-color, var(--leaf-color-border)));
   border-radius: var(--leaf-component-input-number-radius, var(--leaf-radius));
   width: 100%;
   min-width: 0;
   color: var(--leaf-component-input-number-color, var(--leaf-color-text));
   background: var(--leaf-component-input-number-background, var(--leaf-color-surface));
-  box-shadow: var(--leaf-component-input-number-shadow, none);
+  box-shadow: var(--leaf-field-shadow);
   font-family: var(--leaf-font-family);
   font-size: var(--leaf-component-input-number-font-size, var(--leaf-current-font-size));
   line-height: var(--leaf-line-height, 1.5);
@@ -6809,6 +7384,7 @@
 }
 
 .leaf-input-number[data-status="error"] {
+  --leaf-field-rest-border: var(--leaf-field-color);
   --leaf-field-color: var(--leaf-color-danger);
   --leaf-field-color-alpha-12: var(--leaf-color-danger-alpha-12);
   --leaf-field-color-border-30: var(--leaf-color-danger-border-30);
@@ -6817,6 +7393,7 @@
 }
 
 .leaf-input-number[data-status="warning"] {
+  --leaf-field-rest-border: var(--leaf-field-color);
   --leaf-field-color: var(--leaf-color-warning);
   --leaf-field-color-alpha-12: var(--leaf-color-warning-alpha-12);
   --leaf-field-color-border-30: var(--leaf-color-warning-border-30);
@@ -6824,33 +7401,53 @@
   border-color: var(--leaf-field-color);
 }
 
-.leaf-input-number:hover:not([data-disabled]):not(:disabled):not(:focus-within):not([data-open]) {
-  border-color: var(--leaf-field-hover-color);
+.leaf-input-number[data-disabled], .leaf-input-number:disabled {
+  opacity: .55;
+  cursor: not-allowed;
 }
 
-.leaf-input-number:focus-within, .leaf-input-number[data-open] {
-  border-color: var(--leaf-field-color);
-  box-shadow: 0 0 0 3px var(--leaf-field-color-alpha-12);
+.leaf-input-number:hover:not([data-disabled]):not(:disabled):where(:not(:focus-within):not([data-open])) {
+  color: var(--leaf-component-input-number-hover-color, var(--leaf-field-text));
+  background: var(--leaf-component-input-number-hover-background, var(--leaf-field-background));
+  border-color: var(--leaf-component-input-number-hover-border-color, var(--leaf-field-hover-color));
+  box-shadow: var(--leaf-component-input-number-hover-shadow, var(--leaf-field-shadow));
 }
 
-.leaf-input-number[data-disabled], .leaf-input-number:disabled {
-  background: var(--leaf-color-surface-muted);
-  opacity: .55;
-  cursor: not-allowed;
+.leaf-input-number:is(:focus-within, [data-open]):not([data-disabled]):not(:disabled) {
+  color: var(--leaf-component-input-number-focus-color, var(--leaf-field-text));
+  background: var(--leaf-component-input-number-focus-background, var(--leaf-field-background));
+  border-color: var(--leaf-component-input-number-focus-border-color, var(--leaf-field-color));
+  box-shadow: var(--leaf-component-input-number-focus-shadow, var(--leaf-field-shadow));
+  outline: 3px solid var(--leaf-color-focus, var(--leaf-field-color-alpha-12));
+  outline-offset: 0;
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .leaf-input-number {
-    transition: none;
-  }
+.leaf-input-number:active:not([data-disabled]):not(:disabled) {
+  color: var(--leaf-component-input-number-active-color, var(--leaf-field-text));
+  background: var(--leaf-component-input-number-active-background, var(--leaf-field-background));
+  border-color: var(--leaf-component-input-number-active-border-color, var(--leaf-field-hover-color));
+  box-shadow: var(--leaf-component-input-number-active-shadow, var(--leaf-field-shadow));
+}
+
+.leaf-input-number[data-disabled], .leaf-input-number:disabled {
+  color: var(--leaf-component-input-number-disabled-color, var(--leaf-field-text));
+  background: var(--leaf-component-input-number-disabled-background, var(--leaf-color-surface-muted));
+  border-color: var(--leaf-component-input-number-disabled-border-color, var(--leaf-field-rest-border));
+  box-shadow: var(--leaf-component-input-number-disabled-shadow, var(--leaf-field-shadow));
 }
 
 @media (forced-colors: active) {
-  .leaf-input-number:focus-within {
+  .leaf-input-number:is(:focus-within, [data-open]):not([data-disabled]):not(:disabled) {
     outline: 2px solid highlight;
   }
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .leaf-input-number {
+    transition: none;
+  }
+}
+
 .leaf-input-number {
   align-items: center;
   gap: var(--leaf-component-input-number-gap, 8px);
@@ -6914,7 +7511,7 @@
 }
 
 .leaf-input-number__controls button:hover:not(:disabled) {
-  color: var(--leaf-color-primary);
+  color: var(--leaf-color-primary-ink, var(--leaf-color-primary));
   background: var(--leaf-color-surface-muted);
 }
 
@@ -6932,7 +7529,7 @@
 }
 
 .leaf-input-number__controls button:focus-visible {
-  outline: 2px solid var(--leaf-color-primary);
+  outline: 2px solid var(--leaf-color-primary-indicator, var(--leaf-color-primary));
   outline-offset: -2px;
 }
 
@@ -6969,12 +7566,12 @@
 .leaf-avatar {
   box-sizing: border-box;
   vertical-align: middle;
-  border: 1px solid var(--leaf-color-border);
   width: 40px;
   height: 40px;
   color: var(--leaf-component-avatar-color, var(--leaf-color-text-muted));
   background: var(--leaf-component-avatar-background, var(--leaf-color-surface-muted));
   font: var(--leaf-font-weight) 15px/1 var(--leaf-font-family);
+  border: 2px solid #fff;
   flex: none;
   justify-content: center;
   align-items: center;
@@ -7037,14 +7634,16 @@
 
 .leaf-avatar-group {
   align-items: center;
-  padding-inline-start: 3px;
   display: flex;
 }
 
 .leaf-avatar-group > .leaf-avatar, .leaf-avatar-group > button {
-  box-shadow: 0 0 0 3px var(--leaf-color-surface);
   border-radius: 50%;
-  margin-inline-start: -3px;
+  margin-inline-start: -8px;
+}
+
+.leaf-avatar-group > :first-child {
+  margin-inline-start: 0;
 }
 
 .leaf-avatar-group__more {
@@ -7067,7 +7666,7 @@
 }
 
 .leaf-avatar-group__more:focus-visible {
-  outline: 2px solid var(--leaf-color-primary);
+  outline: 2px solid var(--leaf-color-primary-indicator, var(--leaf-color-primary));
   outline-offset: 3px;
 }
 
@@ -7088,18 +7687,19 @@
   --leaf-card-heading-gap: var(--leaf-component-card-gap, calc(var(--leaf-spacing) * 2));
   --leaf-card-title-font-size: calc(var(--leaf-font-size) + 1px);
   box-sizing: border-box;
+  border: var(--leaf-component-card-border-width, var(--leaf-border-width, 1px)) solid #0000;
   border-radius: var(--leaf-component-card-radius, var(--leaf-radius-md));
   background: var(--leaf-component-card-background, var(--leaf-color-surface));
   min-width: 0;
   color: var(--leaf-component-card-color, var(--leaf-color-text));
   font: var(--leaf-component-card-font-size, var(--leaf-font-size))/1.6 var(--leaf-font-family);
   transition: border-color var(--leaf-motion-duration) var(--leaf-motion-easing),box-shadow var(--leaf-motion-duration) var(--leaf-motion-easing);
-  border: 1px solid #0000;
+  box-shadow: var(--leaf-component-card-shadow, var(--leaf-surface-shadow, none));
 }
 
 .leaf-card--bordered {
-  border-color: var(--leaf-component-card-border-color, var(--leaf-color-divider));
-  box-shadow: var(--leaf-component-card-shadow, none);
+  border-color: var(--leaf-component-card-border-color, var(--leaf-frame-border-color, var(--leaf-color-divider)));
+  box-shadow: var(--leaf-component-card-shadow, var(--leaf-surface-shadow, none));
 }
 
 .leaf-card--sm {
@@ -7186,7 +7786,7 @@
 }
 
 .leaf-card--divided > .leaf-card__header {
-  border-block-end: 1px solid var(--leaf-component-card-border-color, var(--leaf-color-divider));
+  border-block-end: 1px solid var(--leaf-component-card-border-color, var(--leaf-frame-border-color, var(--leaf-color-divider)));
 }
 
 .leaf-card--divided > .leaf-card__header + .leaf-card__body {
@@ -7195,7 +7795,7 @@
 
 .leaf-card--divided > .leaf-card__footer {
   padding-block: var(--leaf-component-card-padding-top, calc(var(--leaf-spacing) * 1.5)) var(--leaf-component-card-padding-bottom, calc(var(--leaf-spacing) * 1.5));
-  border-block-start: 1px solid var(--leaf-component-card-border-color, var(--leaf-color-divider));
+  border-block-start: 1px solid var(--leaf-component-card-border-color, var(--leaf-frame-border-color, var(--leaf-color-divider)));
   background: var(--leaf-component-card-footer-background, var(--leaf-color-surface-muted));
 }
 
@@ -7225,18 +7825,18 @@
 
 .leaf-card__tabs > .leaf-tabs__header {
   padding: var(--leaf-card-padding);
-  border-block-end: 1px solid var(--leaf-component-card-border-color, var(--leaf-color-divider));
+  border-block-end: 1px solid var(--leaf-component-card-border-color, var(--leaf-frame-border-color, var(--leaf-color-divider)));
   background: var(--leaf-component-card-header-background, transparent);
   border-start-start-radius: inherit;
   border-start-end-radius: inherit;
   padding-block: 0;
 }
 
-.leaf-card__tabs > .leaf-tabs__header > .leaf-tabs__list {
+.leaf-card__tabs > .leaf-tabs__header > .leaf-tabs__scroll > .leaf-tabs__list {
   box-shadow: none;
 }
 
-.leaf-card__tabs > .leaf-tabs__header > .leaf-tabs__list > .leaf-tabs__track {
+.leaf-card__tabs > .leaf-tabs__header > .leaf-tabs__scroll > .leaf-tabs__list > .leaf-scrollbar__content > .leaf-tabs__track {
   gap: var(--leaf-spacing-md);
 }
 
@@ -7261,23 +7861,23 @@
   align-items: stretch;
 }
 
-.leaf-card > .leaf-card__tabs:first-child > .leaf-tabs__header > .leaf-tabs__list, .leaf-card > .leaf-card__cover + .leaf-card__tabs > .leaf-tabs__header > .leaf-tabs__list {
+.leaf-card > .leaf-card__tabs:first-child > .leaf-tabs__header > .leaf-tabs__scroll > .leaf-tabs__list, .leaf-card > .leaf-card__cover + .leaf-card__tabs > .leaf-tabs__header > .leaf-tabs__scroll > .leaf-tabs__list {
   display: flex;
 }
 
-.leaf-card > .leaf-card__tabs:first-child > .leaf-tabs__header > .leaf-tabs__list > .leaf-tabs__track, .leaf-card > .leaf-card__cover + .leaf-card__tabs > .leaf-tabs__header > .leaf-tabs__list > .leaf-tabs__track {
+.leaf-card > .leaf-card__tabs:first-child > .leaf-tabs__header > .leaf-tabs__scroll > .leaf-tabs__list > .leaf-scrollbar__content > .leaf-tabs__track, .leaf-card > .leaf-card__cover + .leaf-card__tabs > .leaf-tabs__header > .leaf-tabs__scroll > .leaf-tabs__list > .leaf-scrollbar__content > .leaf-tabs__track {
   flex-shrink: 0;
 }
 
-.leaf-card > .leaf-card__tabs:first-child > .leaf-tabs__header > .leaf-tabs__list > .leaf-tabs__track > .leaf-tabs__entry, .leaf-card > .leaf-card__cover + .leaf-card__tabs > .leaf-tabs__header > .leaf-tabs__list > .leaf-tabs__track > .leaf-tabs__entry {
+.leaf-card > .leaf-card__tabs:first-child > .leaf-tabs__header > .leaf-tabs__scroll > .leaf-tabs__list > .leaf-scrollbar__content > .leaf-tabs__track > .leaf-tabs__entry, .leaf-card > .leaf-card__cover + .leaf-card__tabs > .leaf-tabs__header > .leaf-tabs__scroll > .leaf-tabs__list > .leaf-scrollbar__content > .leaf-tabs__track > .leaf-tabs__entry {
   align-items: stretch;
 }
 
-.leaf-card > .leaf-card__tabs:first-child > .leaf-tabs__header > .leaf-tabs__list > .leaf-tabs__track > .leaf-tabs__entry > .leaf-tabs__tab, .leaf-card > .leaf-card__cover + .leaf-card__tabs > .leaf-tabs__header > .leaf-tabs__list > .leaf-tabs__track > .leaf-tabs__entry > .leaf-tabs__tab {
+.leaf-card > .leaf-card__tabs:first-child > .leaf-tabs__header > .leaf-tabs__scroll > .leaf-tabs__list > .leaf-scrollbar__content > .leaf-tabs__track > .leaf-tabs__entry > .leaf-tabs__tab, .leaf-card > .leaf-card__cover + .leaf-card__tabs > .leaf-tabs__header > .leaf-tabs__scroll > .leaf-tabs__list > .leaf-scrollbar__content > .leaf-tabs__track > .leaf-tabs__entry > .leaf-tabs__tab {
   min-height: var(--leaf-card-tab-heading-height);
 }
 
-.leaf-card > .leaf-card__tabs:first-child > .leaf-tabs__header > .leaf-tabs__list > .leaf-tabs__track > .leaf-tabs__entry > .leaf-tabs__close, .leaf-card > .leaf-card__tabs:first-child > .leaf-tabs__header > .leaf-tabs__list > .leaf-tabs__track > .leaf-tabs__entry > .leaf-tabs__drag, .leaf-card > .leaf-card__cover + .leaf-card__tabs > .leaf-tabs__header > .leaf-tabs__list > .leaf-tabs__track > .leaf-tabs__entry > .leaf-tabs__close, .leaf-card > .leaf-card__cover + .leaf-card__tabs > .leaf-tabs__header > .leaf-tabs__list > .leaf-tabs__track > .leaf-tabs__entry > .leaf-tabs__drag, .leaf-card > .leaf-card__tabs:first-child > .leaf-tabs__header > .leaf-tabs__extra, .leaf-card > .leaf-card__cover + .leaf-card__tabs > .leaf-tabs__header > .leaf-tabs__extra {
+.leaf-card > .leaf-card__tabs:first-child > .leaf-tabs__header > .leaf-tabs__scroll > .leaf-tabs__list > .leaf-scrollbar__content > .leaf-tabs__track > .leaf-tabs__entry > .leaf-tabs__close, .leaf-card > .leaf-card__tabs:first-child > .leaf-tabs__header > .leaf-tabs__scroll > .leaf-tabs__list > .leaf-scrollbar__content > .leaf-tabs__track > .leaf-tabs__entry > .leaf-tabs__drag, .leaf-card > .leaf-card__cover + .leaf-card__tabs > .leaf-tabs__header > .leaf-tabs__scroll > .leaf-tabs__list > .leaf-scrollbar__content > .leaf-tabs__track > .leaf-tabs__entry > .leaf-tabs__close, .leaf-card > .leaf-card__cover + .leaf-card__tabs > .leaf-tabs__header > .leaf-tabs__scroll > .leaf-tabs__list > .leaf-scrollbar__content > .leaf-tabs__track > .leaf-tabs__entry > .leaf-tabs__drag, .leaf-card > .leaf-card__tabs:first-child > .leaf-tabs__header > .leaf-tabs__extra, .leaf-card > .leaf-card__cover + .leaf-card__tabs > .leaf-tabs__header > .leaf-tabs__extra {
   align-self: center;
 }
 
@@ -7316,7 +7916,8 @@
 }
 
 .leaf-collapse--bordered {
-  border: 1px solid var(--leaf-color-border);
+  border: var(--leaf-component-collapse-border-width, var(--leaf-border-width, 1px)) solid var(--leaf-component-collapse-border-color, var(--leaf-frame-border-color, var(--leaf-color-border)));
+  box-shadow: var(--leaf-component-collapse-shadow, var(--leaf-surface-shadow, none));
 }
 
 .leaf-collapse__item + .leaf-collapse__item {
@@ -7364,7 +7965,7 @@
 }
 
 .leaf-collapse__trigger:focus-visible {
-  outline: 2px solid var(--leaf-color-primary);
+  outline: 2px solid var(--leaf-color-primary-indicator, var(--leaf-color-primary));
   outline-offset: -3px;
 }
 
@@ -7627,6 +8228,14 @@
   margin-block-end: 0;
 }
 
+.leaf-popover {
+  --leaf-surface-border: var(--leaf-component-popover-border-width, var(--leaf-component-floating-border-width, var(--leaf-border-width, 1px)));
+  border-color: var(--leaf-component-popover-border-color, var(--leaf-component-floating-border-color, var(--leaf-frame-border-color, var(--leaf-color-border-alpha-85))));
+  color: var(--leaf-component-popover-color, var(--leaf-component-floating-color, var(--leaf-color-text)));
+  background: var(--leaf-component-popover-background, var(--leaf-component-floating-background, var(--leaf-color-surface-raised, var(--leaf-color-surface))));
+  box-shadow: var(--leaf-component-popover-shadow, var(--leaf-component-floating-shadow, var(--leaf-surface-shadow, var(--leaf-shadow-md))));
+}
+
 .leaf-rate {
   --leaf-rate-size: 24px;
   --leaf-rate-color: #ffc53d;
@@ -7700,7 +8309,7 @@
 }
 
 .leaf-rate__option:focus-visible {
-  outline: 2px solid var(--leaf-color-primary);
+  outline: 2px solid var(--leaf-color-primary-indicator, var(--leaf-color-primary));
   outline-offset: 3px;
 }
 
@@ -7811,7 +8420,7 @@
 
 .leaf-slider__fill {
   border-radius: inherit;
-  background: var(--leaf-color-primary);
+  background: var(--leaf-color-primary-indicator, var(--leaf-color-primary));
   height: 100%;
   position: absolute;
   inset-inline-start: var(--leaf-slider-start);
@@ -7840,7 +8449,7 @@
 
 .leaf-slider__input::-webkit-slider-thumb {
   appearance: none;
-  border: 2px solid var(--leaf-color-primary);
+  border: 2px solid var(--leaf-color-primary-indicator, var(--leaf-color-primary));
   background: var(--leaf-color-surface);
   cursor: grab;
   width: 16px;
@@ -7858,7 +8467,7 @@
 
 .leaf-slider__input::-moz-range-thumb {
   box-sizing: border-box;
-  border: 2px solid var(--leaf-color-primary);
+  border: 2px solid var(--leaf-color-primary-indicator, var(--leaf-color-primary));
   background: var(--leaf-color-surface);
   cursor: grab;
   width: 16px;
@@ -7926,7 +8535,7 @@
   pointer-events: none;
   font-variant-numeric: tabular-nums;
   transition: opacity var(--leaf-motion-fast) var(--leaf-motion-easing),transform var(--leaf-motion-duration) var(--leaf-motion-spring);
-  color: var(--leaf-color-primary);
+  color: var(--leaf-color-primary-ink, var(--leaf-color-primary));
   position: absolute;
   top: -16px;
   transform: translateY(3px);
@@ -7959,7 +8568,7 @@
 }
 
 .leaf-slider__mark[data-active] .leaf-slider__dot, .leaf-slider__mark:hover:not(:disabled) .leaf-slider__dot {
-  background: var(--leaf-color-primary);
+  background: var(--leaf-color-primary-indicator, var(--leaf-color-primary));
   transform: scale(1.25);
 }
 
@@ -8123,7 +8732,7 @@
 }
 
 .leaf-tree__item:focus-visible > .leaf-tree__row, .leaf-tree__item:focus-visible > .leaf-tree__drag-row > .leaf-tree__row {
-  outline: 2px solid var(--leaf-color-primary);
+  outline: 2px solid var(--leaf-color-primary-indicator, var(--leaf-color-primary));
   outline-offset: -2px;
 }
 
@@ -8149,7 +8758,7 @@
 }
 
 .leaf-tree__row[data-selected], .leaf-tree__row[data-selected]:hover {
-  color: var(--leaf-color-primary);
+  color: var(--leaf-color-primary-ink, var(--leaf-color-primary));
   background: var(--leaf-color-primary-surface-9);
 }
 
@@ -8214,7 +8823,7 @@
 }
 
 .leaf-tree__title[data-match] {
-  color: var(--leaf-color-primary);
+  color: var(--leaf-color-primary-ink, var(--leaf-color-primary));
   font-weight: 600;
 }
 
@@ -8263,7 +8872,7 @@
 
 .leaf-tree__drag-row[data-drop="before"]:before, .leaf-tree__drag-row[data-drop="after"]:after {
   content: "";
-  background: var(--leaf-color-primary);
+  background: var(--leaf-color-primary-indicator, var(--leaf-color-primary));
   height: 2px;
   position: absolute;
   left: 0;
@@ -8313,18 +8922,23 @@
 }
 
 .leaf-tree-select {
-  --leaf-field-color: var(--leaf-color-primary);
+  --leaf-field-color: var(--leaf-color-primary-indicator, var(--leaf-color-primary));
   --leaf-field-color-alpha-12: var(--leaf-color-primary-alpha-12);
   --leaf-field-color-border-30: var(--leaf-color-primary-border-30);
   --leaf-field-hover-color: var(--leaf-color-border-hover, var(--leaf-field-color));
+  --leaf-field-border-width: var(--leaf-component-tree-select-border-width, var(--leaf-border-width, 1px));
+  --leaf-field-text: var(--leaf-component-tree-select-color, var(--leaf-color-text));
+  --leaf-field-rest-border: var(--leaf-component-tree-select-border-color, var(--leaf-frame-border-color, var(--leaf-color-border)));
+  --leaf-field-background: var(--leaf-component-tree-select-background, var(--leaf-color-surface));
+  --leaf-field-shadow: var(--leaf-component-tree-select-shadow, var(--leaf-control-shadow, 0 0 0 0 transparent));
   box-sizing: border-box;
-  border: 1px solid var(--leaf-color-border);
+  border: var(--leaf-field-border-width) solid var(--leaf-component-tree-select-border-color, var(--leaf-frame-border-color, var(--leaf-color-border)));
   border-radius: var(--leaf-component-tree-select-radius, var(--leaf-radius));
   width: 100%;
   min-width: 0;
   color: var(--leaf-component-tree-select-color, var(--leaf-color-text));
   background: var(--leaf-component-tree-select-background, var(--leaf-color-surface));
-  box-shadow: var(--leaf-component-tree-select-shadow, none);
+  box-shadow: var(--leaf-field-shadow);
   font-family: var(--leaf-font-family);
   font-size: var(--leaf-component-tree-select-font-size, var(--leaf-current-font-size));
   line-height: var(--leaf-line-height, 1.5);
@@ -8332,6 +8946,7 @@
 }
 
 .leaf-tree-select[data-status="error"] {
+  --leaf-field-rest-border: var(--leaf-field-color);
   --leaf-field-color: var(--leaf-color-danger);
   --leaf-field-color-alpha-12: var(--leaf-color-danger-alpha-12);
   --leaf-field-color-border-30: var(--leaf-color-danger-border-30);
@@ -8340,6 +8955,7 @@
 }
 
 .leaf-tree-select[data-status="warning"] {
+  --leaf-field-rest-border: var(--leaf-field-color);
   --leaf-field-color: var(--leaf-color-warning);
   --leaf-field-color-alpha-12: var(--leaf-color-warning-alpha-12);
   --leaf-field-color-border-30: var(--leaf-color-warning-border-30);
@@ -8347,33 +8963,53 @@
   border-color: var(--leaf-field-color);
 }
 
-.leaf-tree-select:hover:not([data-disabled]):not(:disabled):not(:focus-within):not([data-open]) {
-  border-color: var(--leaf-field-hover-color);
+.leaf-tree-select[data-disabled], .leaf-tree-select:disabled {
+  opacity: .55;
+  cursor: not-allowed;
+}
+
+.leaf-tree-select:hover:not([data-disabled]):not(:disabled):where(:not(:focus-within):not([data-open])) {
+  color: var(--leaf-component-tree-select-hover-color, var(--leaf-field-text));
+  background: var(--leaf-component-tree-select-hover-background, var(--leaf-field-background));
+  border-color: var(--leaf-component-tree-select-hover-border-color, var(--leaf-field-hover-color));
+  box-shadow: var(--leaf-component-tree-select-hover-shadow, var(--leaf-field-shadow));
 }
 
-.leaf-tree-select:focus-within, .leaf-tree-select[data-open] {
-  border-color: var(--leaf-field-color);
-  box-shadow: 0 0 0 3px var(--leaf-field-color-alpha-12);
+.leaf-tree-select:is(:focus-within, [data-open]):not([data-disabled]):not(:disabled) {
+  color: var(--leaf-component-tree-select-focus-color, var(--leaf-field-text));
+  background: var(--leaf-component-tree-select-focus-background, var(--leaf-field-background));
+  border-color: var(--leaf-component-tree-select-focus-border-color, var(--leaf-field-color));
+  box-shadow: var(--leaf-component-tree-select-focus-shadow, var(--leaf-field-shadow));
+  outline: 3px solid var(--leaf-color-focus, var(--leaf-field-color-alpha-12));
+  outline-offset: 0;
 }
 
-.leaf-tree-select[data-disabled], .leaf-tree-select:disabled {
-  background: var(--leaf-color-surface-muted);
-  opacity: .55;
-  cursor: not-allowed;
+.leaf-tree-select:active:not([data-disabled]):not(:disabled) {
+  color: var(--leaf-component-tree-select-active-color, var(--leaf-field-text));
+  background: var(--leaf-component-tree-select-active-background, var(--leaf-field-background));
+  border-color: var(--leaf-component-tree-select-active-border-color, var(--leaf-field-hover-color));
+  box-shadow: var(--leaf-component-tree-select-active-shadow, var(--leaf-field-shadow));
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .leaf-tree-select {
-    transition: none;
-  }
+.leaf-tree-select[data-disabled], .leaf-tree-select:disabled {
+  color: var(--leaf-component-tree-select-disabled-color, var(--leaf-field-text));
+  background: var(--leaf-component-tree-select-disabled-background, var(--leaf-color-surface-muted));
+  border-color: var(--leaf-component-tree-select-disabled-border-color, var(--leaf-field-rest-border));
+  box-shadow: var(--leaf-component-tree-select-disabled-shadow, var(--leaf-field-shadow));
 }
 
 @media (forced-colors: active) {
-  .leaf-tree-select:focus-within {
+  .leaf-tree-select:is(:focus-within, [data-open]):not([data-disabled]):not(:disabled) {
     outline: 2px solid highlight;
   }
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .leaf-tree-select {
+    transition: none;
+  }
+}
+
 .leaf-tree-select {
   min-height: var(--leaf-current-control-height);
   padding: var(--leaf-component-tree-select-padding, 0 30px 0 10px);
@@ -8391,11 +9027,6 @@
   padding-inline-end: 54px;
 }
 
-.leaf-tree-select[data-open] {
-  border-color: var(--leaf-field-color);
-  box-shadow: 0 0 0 3px var(--leaf-field-color-alpha-12);
-}
-
 .leaf-tree-select__input-wrap {
   flex: 1;
   min-width: 24px;
@@ -8405,7 +9036,7 @@
 .leaf-tree-select__input {
   box-sizing: border-box;
   width: 100%;
-  height: calc(var(--leaf-current-control-height) - 2px);
+  height: calc(var(--leaf-current-control-height) - 2*var(--leaf-field-border-width));
   min-width: 0;
   color: inherit;
   font: inherit;
@@ -8488,11 +9119,16 @@
 }
 
 .leaf-tree-select--multiple {
-  padding-block: 3px;
+  padding-block: var(--leaf-component-tree-select-padding-top, 3px) var(--leaf-component-tree-select-padding-bottom, 3px);
+  padding-inline: var(--leaf-component-tree-select-padding-left, 3px) var(--leaf-component-tree-select-padding-right, 30px);
+}
+
+.leaf-tree-select--multiple:where([dir="rtl"]) {
+  padding-inline: var(--leaf-component-tree-select-padding-right, 3px) var(--leaf-component-tree-select-padding-left, 30px);
 }
 
 .leaf-tree-select--multiple .leaf-tree-select__input {
-  height: calc(var(--leaf-current-control-height) - 8px);
+  height: max(1px,var(--leaf-current-control-height) - 6px - 2*var(--leaf-field-border-width, var(--leaf-border-width, 1px)));
 }
 
 .leaf-tree-select__panel {
@@ -8539,24 +9175,37 @@
   --leaf-current-font-size: var(--leaf-font-size-lg);
 }
 
+.leaf-tree-select__panel {
+  --leaf-surface-border: var(--leaf-component-tree-select-border-width, var(--leaf-component-floating-border-width, var(--leaf-border-width, 1px)));
+  border-color: var(--leaf-component-tree-select-border-color, var(--leaf-component-floating-border-color, var(--leaf-frame-border-color, var(--leaf-color-border))));
+  color: var(--leaf-component-tree-select-color, var(--leaf-component-floating-color, var(--leaf-color-text)));
+  background: var(--leaf-component-tree-select-background, var(--leaf-component-floating-background, var(--leaf-color-surface-raised, var(--leaf-color-surface))));
+  box-shadow: var(--leaf-component-tree-select-shadow, var(--leaf-component-floating-shadow, var(--leaf-surface-shadow, var(--leaf-shadow-md))));
+}
+
 .leaf-color-picker {
   --leaf-current-font-size: var(--leaf-font-size);
   --leaf-current-control-height: var(--leaf-control-height, 36px);
 }
 
 .leaf-color-picker {
-  --leaf-field-color: var(--leaf-color-primary);
+  --leaf-field-color: var(--leaf-color-primary-indicator, var(--leaf-color-primary));
   --leaf-field-color-alpha-12: var(--leaf-color-primary-alpha-12);
   --leaf-field-color-border-30: var(--leaf-color-primary-border-30);
   --leaf-field-hover-color: var(--leaf-color-border-hover, var(--leaf-field-color));
+  --leaf-field-border-width: var(--leaf-component-color-picker-border-width, var(--leaf-border-width, 1px));
+  --leaf-field-text: var(--leaf-component-color-picker-color, var(--leaf-color-text));
+  --leaf-field-rest-border: var(--leaf-component-color-picker-border-color, var(--leaf-frame-border-color, var(--leaf-color-border)));
+  --leaf-field-background: var(--leaf-component-color-picker-background, var(--leaf-color-surface));
+  --leaf-field-shadow: var(--leaf-component-color-picker-shadow, var(--leaf-control-shadow, 0 0 0 0 transparent));
   box-sizing: border-box;
-  border: 1px solid var(--leaf-color-border);
+  border: var(--leaf-field-border-width) solid var(--leaf-component-color-picker-border-color, var(--leaf-frame-border-color, var(--leaf-color-border)));
   border-radius: var(--leaf-component-color-picker-radius, var(--leaf-radius));
   width: 100%;
   min-width: 0;
   color: var(--leaf-component-color-picker-color, var(--leaf-color-text));
   background: var(--leaf-component-color-picker-background, var(--leaf-color-surface));
-  box-shadow: var(--leaf-component-color-picker-shadow, none);
+  box-shadow: var(--leaf-field-shadow);
   font-family: var(--leaf-font-family);
   font-size: var(--leaf-component-color-picker-font-size, var(--leaf-current-font-size));
   line-height: var(--leaf-line-height, 1.5);
@@ -8564,6 +9213,7 @@
 }
 
 .leaf-color-picker[data-status="error"] {
+  --leaf-field-rest-border: var(--leaf-field-color);
   --leaf-field-color: var(--leaf-color-danger);
   --leaf-field-color-alpha-12: var(--leaf-color-danger-alpha-12);
   --leaf-field-color-border-30: var(--leaf-color-danger-border-30);
@@ -8572,6 +9222,7 @@
 }
 
 .leaf-color-picker[data-status="warning"] {
+  --leaf-field-rest-border: var(--leaf-field-color);
   --leaf-field-color: var(--leaf-color-warning);
   --leaf-field-color-alpha-12: var(--leaf-color-warning-alpha-12);
   --leaf-field-color-border-30: var(--leaf-color-warning-border-30);
@@ -8579,33 +9230,53 @@
   border-color: var(--leaf-field-color);
 }
 
-.leaf-color-picker:hover:not([data-disabled]):not(:disabled):not(:focus-within):not([data-open]) {
-  border-color: var(--leaf-field-hover-color);
+.leaf-color-picker[data-disabled], .leaf-color-picker:disabled {
+  opacity: .55;
+  cursor: not-allowed;
 }
 
-.leaf-color-picker:focus-within, .leaf-color-picker[data-open] {
-  border-color: var(--leaf-field-color);
-  box-shadow: 0 0 0 3px var(--leaf-field-color-alpha-12);
+.leaf-color-picker:hover:not([data-disabled]):not(:disabled):where(:not(:focus-within):not([data-open])) {
+  color: var(--leaf-component-color-picker-hover-color, var(--leaf-field-text));
+  background: var(--leaf-component-color-picker-hover-background, var(--leaf-field-background));
+  border-color: var(--leaf-component-color-picker-hover-border-color, var(--leaf-field-hover-color));
+  box-shadow: var(--leaf-component-color-picker-hover-shadow, var(--leaf-field-shadow));
 }
 
-.leaf-color-picker[data-disabled], .leaf-color-picker:disabled {
-  background: var(--leaf-color-surface-muted);
-  opacity: .55;
-  cursor: not-allowed;
+.leaf-color-picker:is(:focus-within, [data-open]):not([data-disabled]):not(:disabled) {
+  color: var(--leaf-component-color-picker-focus-color, var(--leaf-field-text));
+  background: var(--leaf-component-color-picker-focus-background, var(--leaf-field-background));
+  border-color: var(--leaf-component-color-picker-focus-border-color, var(--leaf-field-color));
+  box-shadow: var(--leaf-component-color-picker-focus-shadow, var(--leaf-field-shadow));
+  outline: 3px solid var(--leaf-color-focus, var(--leaf-field-color-alpha-12));
+  outline-offset: 0;
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .leaf-color-picker {
-    transition: none;
-  }
+.leaf-color-picker:active:not([data-disabled]):not(:disabled) {
+  color: var(--leaf-component-color-picker-active-color, var(--leaf-field-text));
+  background: var(--leaf-component-color-picker-active-background, var(--leaf-field-background));
+  border-color: var(--leaf-component-color-picker-active-border-color, var(--leaf-field-hover-color));
+  box-shadow: var(--leaf-component-color-picker-active-shadow, var(--leaf-field-shadow));
+}
+
+.leaf-color-picker[data-disabled], .leaf-color-picker:disabled {
+  color: var(--leaf-component-color-picker-disabled-color, var(--leaf-field-text));
+  background: var(--leaf-component-color-picker-disabled-background, var(--leaf-color-surface-muted));
+  border-color: var(--leaf-component-color-picker-disabled-border-color, var(--leaf-field-rest-border));
+  box-shadow: var(--leaf-component-color-picker-disabled-shadow, var(--leaf-field-shadow));
 }
 
 @media (forced-colors: active) {
-  .leaf-color-picker:focus-within {
+  .leaf-color-picker:is(:focus-within, [data-open]):not([data-disabled]):not(:disabled) {
     outline: 2px solid highlight;
   }
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .leaf-color-picker {
+    transition: none;
+  }
+}
+
 .leaf-color-picker {
   width: auto;
   height: var(--leaf-current-control-height);
@@ -8620,15 +9291,10 @@
   cursor: default;
 }
 
-.leaf-color-picker[data-open] {
-  border-color: var(--leaf-field-color);
-  box-shadow: 0 0 0 3px var(--leaf-field-color-alpha-12);
-}
-
 .leaf-color-picker__trigger {
   box-sizing: border-box;
-  min-width: calc(var(--leaf-current-control-height) - 2px);
-  height: calc(var(--leaf-current-control-height) - 2px);
+  min-width: calc(var(--leaf-current-control-height) - 2*var(--leaf-field-border-width));
+  height: calc(var(--leaf-current-control-height) - 2*var(--leaf-field-border-width));
   border-radius: inherit;
   color: inherit;
   font: inherit;
@@ -8736,7 +9402,7 @@
 }
 
 .leaf-color-picker__area:focus-visible {
-  outline: 2px solid var(--leaf-color-primary);
+  outline: 2px solid var(--leaf-color-primary-indicator, var(--leaf-color-primary));
   outline-offset: 3px;
 }
 
@@ -8819,7 +9485,7 @@
 }
 
 .leaf-color-picker__sliders input:focus-visible {
-  outline: 2px solid var(--leaf-color-primary);
+  outline: 2px solid var(--leaf-color-primary-indicator, var(--leaf-color-primary));
   outline-offset: 3px;
 }
 
@@ -8889,7 +9555,7 @@
 }
 
 .leaf-color-picker__input:focus {
-  border-color: var(--leaf-color-primary);
+  border-color: var(--leaf-color-primary-indicator, var(--leaf-color-primary));
   box-shadow: 0 0 0 3px var(--leaf-color-primary-alpha-12);
 }
 
@@ -8938,7 +9604,7 @@
 }
 
 .leaf-color-picker__preset[aria-pressed="true"], .leaf-color-picker__preset:focus-visible {
-  outline: 2px solid var(--leaf-color-primary);
+  outline: 2px solid var(--leaf-color-primary-indicator, var(--leaf-color-primary));
   outline-offset: 2px;
 }
 
@@ -8979,11 +9645,11 @@
 }
 
 .leaf-color-picker__stops > button:not(.leaf-button)[aria-pressed="true"] {
-  box-shadow: 0 0 0 2px var(--leaf-color-primary);
+  box-shadow: 0 0 0 2px var(--leaf-color-primary-indicator, var(--leaf-color-primary));
 }
 
 .leaf-color-picker__stops > button:not(.leaf-button):focus-visible {
-  outline: 2px solid var(--leaf-color-primary);
+  outline: 2px solid var(--leaf-color-primary-indicator, var(--leaf-color-primary));
   outline-offset: 3px;
 }
 
@@ -9029,6 +9695,14 @@
   --leaf-current-font-size: var(--leaf-font-size-lg);
 }
 
+.leaf-color-picker__panel {
+  --leaf-surface-border: var(--leaf-component-color-picker-border-width, var(--leaf-component-floating-border-width, var(--leaf-border-width, 1px)));
+  border-color: var(--leaf-component-color-picker-border-color, var(--leaf-component-floating-border-color, var(--leaf-frame-border-color, var(--leaf-color-border))));
+  color: var(--leaf-component-color-picker-color, var(--leaf-component-floating-color, var(--leaf-color-text)));
+  background: var(--leaf-component-color-picker-background, var(--leaf-component-floating-background, var(--leaf-color-surface-raised, var(--leaf-color-surface))));
+  box-shadow: var(--leaf-component-color-picker-shadow, var(--leaf-component-floating-shadow, var(--leaf-surface-shadow, var(--leaf-shadow-md))));
+}
+
 .leaf-file-list {
   --leaf-file-visual-size: 40px;
   --leaf-file-action-size: var(--leaf-control-height-sm);
@@ -9040,7 +9714,8 @@
 }
 
 .leaf-file-list__items {
-  border: 1px solid var(--leaf-color-border);
+  border: var(--leaf-component-file-list-border-width, var(--leaf-border-width, 1px)) solid var(--leaf-component-file-list-border-color, var(--leaf-frame-border-color, var(--leaf-color-border)));
+  box-shadow: var(--leaf-component-file-list-shadow, var(--leaf-surface-shadow, none));
   border-radius: var(--leaf-radius-md);
   background: var(--leaf-color-surface);
   margin: 0;
@@ -9061,13 +9736,13 @@
 }
 
 .leaf-file-list__item:first-child {
-  border-start-start-radius: max(0px,var(--leaf-radius-md) - 1px);
-  border-start-end-radius: max(0px,var(--leaf-radius-md) - 1px);
+  border-start-start-radius: max(0px,var(--leaf-radius-md) - var(--leaf-component-file-list-border-width, var(--leaf-border-width, 1px)));
+  border-start-end-radius: max(0px,var(--leaf-radius-md) - var(--leaf-component-file-list-border-width, var(--leaf-border-width, 1px)));
 }
 
 .leaf-file-list__item:last-child {
-  border-end-end-radius: max(0px,var(--leaf-radius-md) - 1px);
-  border-end-start-radius: max(0px,var(--leaf-radius-md) - 1px);
+  border-end-end-radius: max(0px,var(--leaf-radius-md) - var(--leaf-component-file-list-border-width, var(--leaf-border-width, 1px)));
+  border-end-start-radius: max(0px,var(--leaf-radius-md) - var(--leaf-component-file-list-border-width, var(--leaf-border-width, 1px)));
 }
 
 .leaf-file-list__item + .leaf-file-list__item {
@@ -9100,7 +9775,7 @@
 }
 
 .leaf-file-list__icon[data-kind="image"], .leaf-file-list__icon[data-kind="sheet"] {
-  --leaf-file-accent: var(--leaf-color-primary);
+  --leaf-file-accent: var(--leaf-color-primary-ink, var(--leaf-color-primary));
   --leaf-file-surface: var(--leaf-color-primary-surface-5);
 }
 
@@ -9209,17 +9884,17 @@
 }
 
 .leaf-file-list__action:hover:not(:disabled):not([aria-disabled="true"]), .leaf-file-list__actions > .leaf-button--icon-only:hover:not(:disabled):not([aria-disabled="true"]) {
-  color: var(--leaf-color-primary);
+  color: var(--leaf-color-primary-ink, var(--leaf-color-primary));
   background: var(--leaf-color-primary-surface-9);
 }
 
 .leaf-file-list__action:active:not(:disabled):not([aria-disabled="true"]), .leaf-file-list__actions > .leaf-button--icon-only:active:not(:disabled):not([aria-disabled="true"]) {
-  color: var(--leaf-color-primary-active);
+  color: var(--leaf-color-primary-ink-active, var(--leaf-color-primary-active));
   background: var(--leaf-color-primary-surface-14);
 }
 
 .leaf-file-list__action:focus-visible, .leaf-file-list__actions > .leaf-button--icon-only:focus-visible {
-  outline: 3px solid var(--leaf-color-focus, var(--leaf-focus-color, var(--leaf-color-primary-alpha-42)));
+  outline: 3px solid var(--leaf-color-focus, var(--leaf-focus-color, var(--leaf-color-primary-focus, var(--leaf-color-primary-alpha-42))));
   outline-offset: 2px;
 }
 
@@ -9263,7 +9938,7 @@
 }
 
 .leaf-file-list__status[data-status="uploading"] {
-  color: var(--leaf-color-primary);
+  color: var(--leaf-color-primary-ink, var(--leaf-color-primary));
 }
 
 .leaf-file-list__progress {
@@ -9277,7 +9952,7 @@
 
 .leaf-file-list__progress > span {
   border-radius: inherit;
-  background: var(--leaf-color-primary);
+  background: var(--leaf-color-primary-indicator, var(--leaf-color-primary));
   height: 100%;
   transition: width var(--leaf-motion-duration) var(--leaf-motion-easing);
   display: block;
@@ -9326,6 +10001,7 @@
 }
 
 .leaf-file-list--picture-card .leaf-file-list__items {
+  box-shadow: none;
   background: none;
   border: 0;
   grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr));
@@ -9334,7 +10010,8 @@
 }
 
 .leaf-file-list--picture-card .leaf-file-list__item {
-  border: 1px solid var(--leaf-color-border);
+  border: var(--leaf-component-file-list-border-width, var(--leaf-border-width, 1px)) solid var(--leaf-component-file-list-border-color, var(--leaf-frame-border-color, var(--leaf-color-border)));
+  box-shadow: var(--leaf-component-file-list-shadow, var(--leaf-surface-shadow, none));
   border-radius: var(--leaf-radius-md);
   background: var(--leaf-color-surface);
   flex-direction: column;
@@ -9347,7 +10024,7 @@
   aspect-ratio: 16 / 10;
   border: 0;
   border-bottom: 1px solid var(--leaf-color-border);
-  border-radius: max(0px,var(--leaf-radius-md) - 1px) max(0px,var(--leaf-radius-md) - 1px) 0 0;
+  border-radius: max(0px,var(--leaf-radius-md) - var(--leaf-component-file-list-border-width, var(--leaf-border-width, 1px))) max(0px,var(--leaf-radius-md) - var(--leaf-component-file-list-border-width, var(--leaf-border-width, 1px))) 0 0;
   background: var(--leaf-color-surface-muted);
   block-size: auto;
   inline-size: 100%;
@@ -9448,11 +10125,12 @@
 
 .leaf-upload__dropzone {
   box-sizing: border-box;
-  border: 1px dashed var(--leaf-color-border);
-  border-radius: var(--leaf-radius-md);
-  background: var(--leaf-color-surface);
+  border: var(--leaf-component-upload-border-width, var(--leaf-border-width, 1px)) dashed var(--leaf-component-upload-border-color, var(--leaf-frame-border-color, var(--leaf-color-border)));
   width: 100%;
   min-height: 160px;
+  box-shadow: var(--leaf-component-upload-shadow, var(--leaf-surface-shadow, none));
+  border-radius: var(--leaf-radius-md);
+  background: var(--leaf-color-surface);
   color: inherit;
   font: inherit;
   cursor: pointer;
@@ -9466,7 +10144,7 @@
 }
 
 .leaf-upload__dropzone:hover:not(:disabled) {
-  border-color: var(--leaf-color-primary);
+  border-color: var(--leaf-color-primary-indicator, var(--leaf-color-primary));
   background: var(--leaf-color-surface-raised);
 }
 
@@ -9475,7 +10153,7 @@
 }
 
 .leaf-upload__dropzone:focus-visible {
-  outline: 3px solid var(--leaf-color-focus, var(--leaf-focus-color, var(--leaf-color-primary-alpha-42)));
+  outline: 3px solid var(--leaf-color-focus, var(--leaf-focus-color, var(--leaf-color-primary-focus, var(--leaf-color-primary-alpha-42))));
   outline-offset: 2px;
 }
 
@@ -9485,7 +10163,7 @@
 }
 
 .leaf-upload[data-dragging] .leaf-upload__dropzone {
-  border-color: var(--leaf-color-primary);
+  border-color: var(--leaf-color-primary-indicator, var(--leaf-color-primary));
   background: var(--leaf-color-primary-surface-7);
   box-shadow: 0 0 0 4px var(--leaf-color-primary-alpha-10);
 }
@@ -9503,7 +10181,7 @@
 }
 
 .leaf-upload__dropzone:hover:not(:disabled) .leaf-upload__symbol, .leaf-upload[data-dragging] .leaf-upload__symbol {
-  color: var(--leaf-color-primary);
+  color: var(--leaf-color-primary-ink, var(--leaf-color-primary));
   background: var(--leaf-color-primary-surface-8);
   transform: translateY(-2px);
 }
@@ -9586,7 +10264,6 @@
 .leaf-layout__sider-content {
   flex: 1;
   min-height: 0;
-  overflow: auto;
 }
 
 .leaf-layout__sider[data-collapsed] > .leaf-button {
@@ -9718,6 +10395,20 @@
   overflow: hidden;
 }
 
+.leaf-scrollbar--external {
+  max-width: none;
+  display: block;
+  overflow: visible;
+}
+
+.leaf-scrollbar--external > textarea {
+  scrollbar-width: none;
+}
+
+.leaf-scrollbar--external > textarea::-webkit-scrollbar {
+  display: none;
+}
+
 .leaf-scrollbar__viewport {
   border-radius: inherit;
   overscroll-behavior: auto;
@@ -9733,7 +10424,7 @@
 }
 
 .leaf-scrollbar__viewport:focus-visible {
-  outline: 3px solid var(--leaf-color-focus, var(--leaf-focus-color, var(--leaf-color-primary-alpha-42)));
+  outline: 3px solid var(--leaf-color-focus, var(--leaf-focus-color, var(--leaf-color-primary-focus, var(--leaf-color-primary-alpha-42))));
   outline-offset: 2px;
   outline-offset: -3px;
 }
@@ -9799,7 +10490,7 @@
 }
 
 .leaf-scrollbar__bar:has(:focus-visible) {
-  outline: 2px solid var(--leaf-color-primary);
+  outline: 2px solid var(--leaf-color-primary-indicator, var(--leaf-color-primary));
   outline-offset: 2px;
   border-radius: 999px;
 }
@@ -9866,142 +10557,6 @@
   }
 }
 
-.leaf-segmented {
-  --leaf-current-font-size: var(--leaf-font-size);
-  --leaf-current-control-height: var(--leaf-control-height, 36px);
-}
-
-.leaf-segmented {
-  --leaf-surface-radius: var(--leaf-component-segmented-radius, var(--leaf-radius));
-  --leaf-surface-padding: var(--leaf-component-segmented-padding, 3px);
-  --leaf-surface-border: 1px;
-  --leaf-surface-padding-top: var(--leaf-component-segmented-padding-top, var(--leaf-surface-padding));
-  --leaf-surface-padding-right: var(--leaf-component-segmented-padding-right, var(--leaf-surface-padding));
-  --leaf-surface-padding-bottom: var(--leaf-component-segmented-padding-bottom, var(--leaf-surface-padding));
-  --leaf-surface-padding-left: var(--leaf-component-segmented-padding-left, var(--leaf-surface-padding));
-  isolation: isolate;
-  align-self: flex-start;
-  gap: var(--leaf-component-segmented-gap, 3px);
-  background: var(--leaf-component-segmented-background, var(--leaf-color-surface-muted));
-  box-sizing: border-box;
-  border: 1px solid var(--leaf-color-border-alpha-65);
-  width: max-content;
-  max-width: 100%;
-  display: inline-flex;
-  position: relative;
-}
-
-.leaf-segmented__indicator {
-  z-index: -1;
-  pointer-events: none;
-  width: var(--leaf-indicator-width, 0px);
-  height: var(--leaf-indicator-height, 0px);
-  transform: translate(var(--leaf-indicator-x, 0px), var(--leaf-indicator-y, 0px));
-  border-radius: var(--leaf-surface-inner-radius);
-  background: var(--leaf-color-surface-raised);
-  box-shadow: var(--leaf-shadow-xs);
-  opacity: 0;
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-
-.leaf-segmented__indicator[data-visible="true"] {
-  opacity: 1;
-}
-
-.leaf-segmented__indicator[data-animate="true"] {
-  transition: transform var(--leaf-motion-slow) var(--leaf-motion-spring),width var(--leaf-motion-slow) var(--leaf-motion-spring),height var(--leaf-motion-slow) var(--leaf-motion-spring);
-}
-
-.leaf-segmented--block {
-  align-self: stretch;
-  width: 100%;
-  display: flex;
-}
-
-.leaf-segmented--block > button {
-  flex: 1;
-}
-
-.leaf-segmented > button {
-  height: calc(var(--leaf-current-control-height) - var(--leaf-surface-padding-top) - var(--leaf-surface-padding-bottom) - 2px);
-  border-radius: var(--leaf-surface-inner-radius);
-  color: var(--leaf-color-text-muted);
-  font: var(--leaf-current-font-size)/1.5 var(--leaf-font-family);
-  white-space: nowrap;
-  cursor: pointer;
-  transition: color var(--leaf-motion-fast) var(--leaf-motion-easing),transform var(--leaf-motion-fast) var(--leaf-motion-easing);
-  background: none;
-  border: 0;
-  justify-content: center;
-  align-items: center;
-  gap: 6px;
-  padding: 0 12px;
-  display: inline-flex;
-}
-
-.leaf-segmented > button[aria-checked="true"] {
-  color: var(--leaf-color-text);
-  font-weight: var(--leaf-font-weight);
-}
-
-.leaf-segmented > button:hover:not(:disabled) {
-  color: var(--leaf-color-text);
-}
-
-.leaf-segmented > button:active:not(:disabled) {
-  transform: scale(.97);
-}
-
-.leaf-segmented > button:focus-visible {
-  outline: 3px solid var(--leaf-color-focus, var(--leaf-focus-color, var(--leaf-color-primary-alpha-42)));
-  outline-offset: 2px;
-}
-
-.leaf-segmented > button:disabled {
-  opacity: .45;
-  cursor: not-allowed;
-}
-
-.leaf-segmented > button svg {
-  width: 16px;
-  height: 16px;
-  display: block;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .leaf-segmented > button, .leaf-segmented__indicator[data-animate="true"] {
-    transition: none;
-  }
-}
-
-.leaf-segmented {
-  --leaf-current-control-height: var(--leaf-component-segmented-height, var(--leaf-control-height));
-  --leaf-current-font-size: var(--leaf-component-segmented-font-size, var(--leaf-font-size));
-}
-
-.leaf-segmented--sm {
-  --leaf-current-control-height: var(--leaf-component-segmented-height-sm, var(--leaf-control-height-sm));
-  --leaf-current-font-size: var(--leaf-font-size-sm);
-}
-
-.leaf-segmented--lg {
-  --leaf-current-control-height: var(--leaf-component-segmented-height-lg, var(--leaf-control-height-lg));
-  --leaf-current-font-size: var(--leaf-font-size-lg);
-}
-
-@media (forced-colors: active) {
-  .leaf-segmented__indicator {
-    forced-color-adjust: none;
-    background: highlight;
-  }
-
-  .leaf-segmented > button[aria-checked="true"] {
-    color: highlighttext;
-  }
-}
-
 .leaf-back-top {
   z-index: var(--leaf-z-index-popup);
   inset-inline-end: 24px;
@@ -10088,7 +10643,8 @@
 }
 
 .leaf-descriptions--bordered {
-  border: 1px solid var(--leaf-color-border);
+  border: var(--leaf-component-descriptions-border-width, var(--leaf-border-width, 1px)) solid var(--leaf-component-descriptions-border-color, var(--leaf-frame-border-color, var(--leaf-color-border)));
+  box-shadow: var(--leaf-component-descriptions-shadow, var(--leaf-surface-shadow, none));
   border-radius: var(--leaf-radius-md);
   background: var(--leaf-color-surface);
   padding: 16px 20px;
@@ -10310,12 +10866,12 @@
 }
 
 .leaf-menu__item[data-active-parent] {
-  color: var(--leaf-color-primary);
+  color: var(--leaf-color-primary-ink, var(--leaf-color-primary));
   font-weight: var(--leaf-font-weight);
 }
 
 .leaf-menu__item[data-selected], .leaf-menu__item[data-selected]:hover:not(:disabled) {
-  color: var(--leaf-color-primary);
+  color: var(--leaf-color-primary-ink-active, var(--leaf-color-primary-ink, var(--leaf-color-primary)));
   font-weight: var(--leaf-font-weight);
   background: none;
 }
@@ -10334,7 +10890,7 @@
 }
 
 .leaf-menu__item:focus-visible {
-  outline: 3px solid var(--leaf-color-focus, var(--leaf-focus-color, var(--leaf-color-primary-alpha-42)));
+  outline: 3px solid var(--leaf-color-focus, var(--leaf-focus-color, var(--leaf-color-primary-focus, var(--leaf-color-primary-alpha-42))));
   outline-offset: 2px;
 }
 
@@ -10381,6 +10937,10 @@
   line-height: 1.5;
 }
 
+.leaf-menu--collapsed .leaf-menu__group-label {
+  display: none;
+}
+
 .leaf-menu__divider {
   background: var(--leaf-color-divider);
   height: 1px;
@@ -10406,18 +10966,6 @@
   position: relative;
 }
 
-.leaf-menu--horizontal .leaf-menu__submenu {
-  z-index: var(--leaf-z-index-popup);
-  inset-inline-start: 0;
-  background: var(--leaf-color-surface);
-  border-radius: var(--leaf-component-menu-radius, var(--leaf-radius));
-  min-width: 180px;
-  padding: 6px;
-  position: absolute;
-  top: 100%;
-  box-shadow: 0 6px 24px #00000018;
-}
-
 .leaf-menu--collapsed .leaf-menu__label {
   opacity: 0;
   max-width: 0;
@@ -10477,10 +11025,114 @@
   padding: 0;
 }
 
+.leaf-menu-group > .leaf-menu__group-label {
+  padding-inline: 0;
+}
+
 .leaf-menu__divider {
   border: 0;
 }
 
+.leaf-menu__popup.leaf-dropdown {
+  --leaf-surface-border: var(--leaf-component-menu-border-width, var(--leaf-component-floating-border-width, var(--leaf-border-width, 1px)));
+  border-color: var(--leaf-component-menu-border-color, var(--leaf-component-floating-border-color, var(--leaf-frame-border-color, var(--leaf-color-border))));
+  color: var(--leaf-component-menu-color, var(--leaf-component-floating-color, var(--leaf-color-text)));
+  background: var(--leaf-component-menu-background, var(--leaf-component-floating-background, var(--leaf-color-surface-raised, var(--leaf-color-surface))));
+  box-shadow: var(--leaf-component-menu-shadow, var(--leaf-component-floating-shadow, var(--leaf-surface-shadow, var(--leaf-shadow-md))));
+  --leaf-surface-radius: var(--leaf-component-menu-radius, var(--leaf-radius-lg));
+  --leaf-surface-padding: var(--leaf-component-menu-padding, 6px);
+  --leaf-surface-padding-top: var(--leaf-component-menu-padding-top, var(--leaf-surface-padding));
+  --leaf-surface-padding-right: var(--leaf-component-menu-padding-right, var(--leaf-surface-padding));
+  --leaf-surface-padding-bottom: var(--leaf-component-menu-padding-bottom, var(--leaf-surface-padding));
+  --leaf-surface-padding-left: var(--leaf-component-menu-padding-left, var(--leaf-surface-padding));
+  --leaf-floating-option-radius: var(--leaf-component-menu-radius, var(--leaf-radius));
+  border-radius: var(--leaf-surface-radius);
+  min-width: min(208px, 100vw - 24px);
+  font-size: var(--leaf-component-menu-font-size, var(--leaf-font-size));
+  gap: 2px;
+}
+
+.leaf-menu__popup.leaf-dropdown > .leaf-floating__viewport {
+  border-radius: var(--leaf-surface-inner-radius);
+}
+
+.leaf-menu__popup.leaf-dropdown > .leaf-floating__viewport > .leaf-scrollbar__content {
+  flex-direction: column;
+  gap: 2px;
+  display: flex;
+}
+
+.leaf-menu__popup.leaf-dropdown .leaf-floating__option {
+  min-height: var(--leaf-control-height);
+  line-height: 1.5;
+  font-size: inherit;
+  gap: 10px;
+  margin: 0;
+  padding-inline: 10px;
+  text-decoration: none;
+}
+
+.leaf-menu__popup.leaf-dropdown .leaf-floating__option[aria-current="page"], .leaf-menu__popup.leaf-dropdown .leaf-floating__option[aria-current="page"]:is(:hover, :focus-visible, :active):not(:disabled):not([aria-disabled="true"]) {
+  background: var(--leaf-color-primary-surface-9);
+  color: var(--leaf-color-primary-ink-active, var(--leaf-color-primary-ink, var(--leaf-color-primary)));
+  font-weight: var(--leaf-font-weight);
+}
+
+.leaf-menu__popup.leaf-dropdown .leaf-floating__option[data-active-parent="true"] {
+  color: var(--leaf-color-primary-ink, var(--leaf-color-primary));
+  font-weight: var(--leaf-font-weight);
+}
+
+.leaf-menu__popup.leaf-dropdown .leaf-dropdown__highlight {
+  border: 0;
+  left: 0;
+  right: 0;
+}
+
+.leaf-menu__popup.leaf-dropdown .leaf-dropdown__arrow {
+  color: var(--leaf-color-text-muted);
+  flex: none;
+}
+
+.leaf-menu__popup.leaf-dropdown .leaf-dropdown__group {
+  padding: 10px 10px 5px;
+}
+
+.leaf-menu__popup.leaf-dropdown .leaf-dropdown__divider {
+  border-color: var(--leaf-color-divider);
+  margin-block: 5px;
+}
+
+.leaf-menu__popup-title {
+  color: var(--leaf-color-text-muted);
+  font-size: max(1px,var(--leaf-font-size) - 2px);
+  font-weight: var(--leaf-font-weight);
+  letter-spacing: .04em;
+  text-transform: uppercase;
+  border-bottom: 1px solid var(--leaf-color-divider);
+  margin: 0 4px 4px;
+  padding: 6px 6px 10px;
+  line-height: 1.5;
+}
+
+.leaf-menu__popup-icon {
+  flex: 0 0 20px;
+  justify-content: center;
+  align-items: center;
+  display: inline-flex;
+}
+
+.leaf-menu__popup-icon svg {
+  width: 18px;
+  height: 18px;
+}
+
+.leaf-menu__popup-label {
+  overflow-wrap: anywhere;
+  flex: 1;
+  min-width: 0;
+}
+
 @media (forced-colors: active) {
   .leaf-menu__indicator {
     forced-color-adjust: none;
@@ -10490,21 +11142,23 @@
   .leaf-menu__item[data-selected] {
     color: highlighttext;
   }
+
+  .leaf-menu__popup .leaf-floating__option[aria-current="page"] {
+    outline-offset: -1px;
+    outline: 1px solid highlight;
+  }
 }
 
 .leaf-virtual-list {
   overscroll-behavior: contain;
-  scrollbar-width: thin;
-  scrollbar-color: var(--leaf-color-border) #0000;
   min-width: 0;
   color: var(--leaf-color-text);
   font: var(--leaf-font-size)/1.5 var(--leaf-font-family);
   position: relative;
-  overflow: auto;
 }
 
 .leaf-virtual-list:focus-visible {
-  outline: 3px solid var(--leaf-color-focus, var(--leaf-focus-color, var(--leaf-color-primary-alpha-42)));
+  outline: 3px solid var(--leaf-color-focus, var(--leaf-focus-color, var(--leaf-color-primary-focus, var(--leaf-color-primary-alpha-42))));
   outline-offset: 2px;
 }
 
@@ -10880,7 +11534,7 @@
 }
 
 .leaf-image__trigger:focus-visible {
-  outline: 2px solid var(--leaf-color-primary);
+  outline: 2px solid var(--leaf-color-primary-indicator, var(--leaf-color-primary));
   outline-offset: -3px;
 }
 
@@ -11101,7 +11755,6 @@
 }
 
 .leaf-image-viewer__thumbnails {
-  scrollbar-width: none;
   overscroll-behavior: contain;
   border: 0;
   align-items: center;
@@ -11111,11 +11764,6 @@
   padding: 4px;
   display: flex;
   position: relative;
-  overflow-x: auto;
-}
-
-.leaf-image-viewer__thumbnails::-webkit-scrollbar {
-  display: none;
 }
 
 .leaf-image-viewer__thumbnail {
@@ -11303,10 +11951,10 @@
   box-sizing: border-box;
   width: var(--leaf-otp-size);
   height: var(--leaf-otp-size);
-  border: 1px solid var(--leaf-color-border);
+  border: var(--leaf-component-input-otp-border-width, var(--leaf-border-width, 1px)) solid var(--leaf-component-input-otp-border-color, var(--leaf-frame-border-color, var(--leaf-color-border)));
   border-radius: var(--leaf-radius);
   background: var(--leaf-color-surface);
-  box-shadow: var(--leaf-shadow-xs);
+  box-shadow: var(--leaf-component-input-otp-shadow, var(--leaf-control-shadow, var(--leaf-shadow-xs)));
   font-variant-numeric: tabular-nums;
   transition: border-color var(--leaf-motion-duration) var(--leaf-motion-easing),background-color var(--leaf-motion-duration) var(--leaf-motion-easing),box-shadow var(--leaf-motion-duration) var(--leaf-motion-easing),transform var(--leaf-motion-duration) var(--leaf-motion-spring);
   place-items: center;
@@ -11320,8 +11968,10 @@
 }
 
 .leaf-input-otp__slot[data-active] {
-  border-color: var(--leaf-color-primary);
-  box-shadow: 0 0 0 3px var(--leaf-color-primary-alpha-12);
+  border-color: var(--leaf-color-primary-indicator, var(--leaf-color-primary));
+  box-shadow: var(--leaf-component-input-otp-focus-shadow, var(--leaf-component-input-otp-shadow, var(--leaf-control-shadow, var(--leaf-shadow-xs))));
+  outline: 3px solid var(--leaf-color-focus, var(--leaf-color-primary-alpha-12));
+  outline-offset: 0;
   transform: translateY(-1px);
 }
 
@@ -11384,10 +12034,11 @@
 }
 
 .leaf-transfer__panel {
-  border: 1px solid var(--leaf-color-border);
+  border: var(--leaf-component-transfer-border-width, var(--leaf-border-width, 1px)) solid var(--leaf-component-transfer-border-color, var(--leaf-frame-border-color, var(--leaf-color-border)));
+  min-width: 0;
+  box-shadow: var(--leaf-component-transfer-shadow, var(--leaf-surface-shadow, none));
   border-radius: var(--leaf-radius-md);
   background: var(--leaf-color-surface);
-  min-width: 0;
   transition: border-color var(--leaf-motion-duration) var(--leaf-motion-easing);
   flex: 1;
   overflow: hidden;
@@ -11421,9 +12072,8 @@
 }
 
 .leaf-transfer__list {
-  scrollbar-width: thin;
+  box-sizing: border-box;
   padding: 0 4px 4px;
-  overflow: auto;
 }
 
 .leaf-transfer__item {
@@ -11585,10 +12235,10 @@
 .leaf-notification {
   gap: var(--leaf-component-notification-gap, 12px);
   padding: var(--leaf-component-notification-padding, 16px);
-  border: 1px solid var(--leaf-color-divider);
+  border: var(--leaf-component-notification-border-width, var(--leaf-border-width, 1px)) solid var(--leaf-component-notification-border-color, var(--leaf-frame-border-color, var(--leaf-color-divider)));
   border-radius: var(--leaf-component-notification-radius, var(--leaf-radius-lg));
   background: var(--leaf-component-notification-background, var(--leaf-color-surface-raised, var(--leaf-color-surface)));
-  box-shadow: var(--leaf-component-notification-shadow, var(--leaf-shadow-md));
+  box-shadow: var(--leaf-component-notification-shadow, var(--leaf-surface-shadow, var(--leaf-shadow-md)));
   color: var(--leaf-component-notification-color, var(--leaf-color-text));
   font: var(--leaf-component-notification-font-size, var(--leaf-font-size))/1.6 var(--leaf-font-family);
   pointer-events: auto;
@@ -11671,7 +12321,7 @@
 }
 
 .leaf-notification__close:focus-visible {
-  outline: 2px solid var(--leaf-color-primary);
+  outline: 2px solid var(--leaf-color-primary-indicator, var(--leaf-color-primary));
 }
 
 .leaf-notification--info {
@@ -11799,7 +12449,8 @@
   width: 100%;
   min-width: 0;
   color: var(--leaf-color-text);
-  border: 1px solid var(--leaf-color-border);
+  border: var(--leaf-component-error-boundary-border-width, var(--leaf-border-width, 1px)) solid var(--leaf-component-error-boundary-border-color, var(--leaf-frame-border-color, var(--leaf-color-border)));
+  box-shadow: var(--leaf-component-error-boundary-shadow, var(--leaf-surface-shadow, none));
   border-radius: var(--leaf-radius-md);
   background: var(--leaf-color-surface);
   animation: var(--leaf-motion-animation, leaf-error-reveal var(--leaf-motion-duration) var(--leaf-motion-easing));
@@ -11851,7 +12502,7 @@
 }
 
 .leaf-loading-bar > span {
-  background: var(--leaf-color-primary);
+  background: var(--leaf-color-primary-indicator, var(--leaf-color-primary));
   height: 100%;
   box-shadow: 0 0 8px var(--leaf-color-primary-alpha-55);
   transition: width var(--leaf-motion-slow) var(--leaf-motion-easing),background-color var(--leaf-motion-duration) var(--leaf-motion-easing);
@@ -11948,7 +12599,7 @@
 }
 
 .leaf-text__action {
-  color: var(--leaf-color-primary);
+  color: var(--leaf-color-primary-ink, var(--leaf-color-primary));
   font: inherit;
   cursor: pointer;
   border-radius: var(--leaf-radius-sm);
@@ -11962,7 +12613,7 @@
 }
 
 .leaf-text__action:focus-visible {
-  outline: 2px solid var(--leaf-color-primary);
+  outline: 2px solid var(--leaf-color-primary-indicator, var(--leaf-color-primary));
   outline-offset: 2px;
 }
 
@@ -12004,7 +12655,7 @@
 }
 
 .leaf-link {
-  color: var(--leaf-color-primary);
+  color: var(--leaf-color-primary-ink, var(--leaf-color-primary));
   font: inherit;
   text-underline-offset: 4px;
   transition: color var(--leaf-motion-fast) var(--leaf-motion-easing);
@@ -12020,7 +12671,7 @@
 }
 
 .leaf-link:focus-visible {
-  outline: 2px solid var(--leaf-color-primary);
+  outline: 2px solid var(--leaf-color-primary-indicator, var(--leaf-color-primary));
   outline-offset: 3px;
   border-radius: 2px;
 }
@@ -12047,7 +12698,7 @@
 }
 
 .leaf-text__editor:focus {
-  outline: 2px solid var(--leaf-color-primary);
+  outline: 2px solid var(--leaf-color-primary-indicator, var(--leaf-color-primary));
   outline-offset: 2px;
 }
 
@@ -12134,7 +12785,7 @@
 
 .leaf-anchor__indicator:before {
   content: "";
-  background: var(--leaf-color-primary);
+  background: var(--leaf-color-primary-indicator, var(--leaf-color-primary));
   border-radius: 2px;
   width: 2px;
   position: absolute;
@@ -12162,12 +12813,12 @@
 }
 
 .leaf-anchor a:hover, .leaf-anchor a[aria-current] {
-  color: var(--leaf-color-primary);
+  color: var(--leaf-color-primary-ink, var(--leaf-color-primary));
   background: var(--leaf-color-primary-alpha-4);
 }
 
 .leaf-anchor a:focus-visible {
-  outline: 2px solid var(--leaf-color-primary);
+  outline: 2px solid var(--leaf-color-primary-indicator, var(--leaf-color-primary));
   outline-offset: -2px;
   border-radius: var(--leaf-radius-sm);
 }
@@ -12199,7 +12850,7 @@
 .leaf-splitter__panel {
   min-width: 0;
   min-height: 0;
-  overflow: auto;
+  overflow: hidden;
 }
 
 .leaf-splitter__panel[data-collapsed] {
@@ -12223,7 +12874,7 @@
   inset-inline-start: 50%;
   border-radius: var(--leaf-radius-sm);
   background: var(--leaf-color-surface);
-  color: var(--leaf-color-primary);
+  color: var(--leaf-color-primary-ink, var(--leaf-color-primary));
   cursor: pointer;
   z-index: 1;
   border: 0;
@@ -12269,14 +12920,14 @@
 .leaf-tour {
   box-sizing: border-box;
   border-radius: var(--leaf-radius-lg);
-  border: 1px solid var(--leaf-color-border);
+  border: var(--leaf-component-tour-border-width, var(--leaf-border-width, 1px)) solid var(--leaf-component-tour-border-color, var(--leaf-frame-border-color, var(--leaf-color-border)));
   background: var(--leaf-color-surface-raised, var(--leaf-color-surface));
   width: 330px;
   max-width: calc(100vw - 32px);
   color: var(--leaf-color-text);
   font: var(--leaf-component-tour-font-size, var(--leaf-font-size)) var(--leaf-font-family);
   z-index: calc(var(--leaf-z-index-modal) + 5);
-  box-shadow: var(--leaf-shadow-lg, 0 12px 50px #0003);
+  box-shadow: var(--leaf-component-tour-shadow, var(--leaf-surface-shadow, var(--leaf-shadow-lg)));
   pointer-events: auto;
   padding: 18px;
 }
@@ -12419,7 +13070,7 @@
 }
 
 .leaf-carousel__arrow:focus-visible {
-  outline: 2px solid var(--leaf-color-primary);
+  outline: 2px solid var(--leaf-color-primary-indicator, var(--leaf-color-primary));
   outline-offset: 3px;
 }
 
@@ -12455,12 +13106,12 @@
 }
 
 .leaf-carousel__dots button:focus-visible {
-  outline: 2px solid var(--leaf-color-primary);
+  outline: 2px solid var(--leaf-color-primary-indicator, var(--leaf-color-primary));
   outline-offset: 3px;
 }
 
 .leaf-carousel__dots button[aria-current] {
-  background: var(--leaf-color-primary);
+  background: var(--leaf-color-primary-indicator, var(--leaf-color-primary));
   width: 20px;
 }
 
@@ -12616,6 +13267,14 @@
   }
 }
 
+.leaf-mentions__panel {
+  --leaf-surface-border: var(--leaf-component-mentions-border-width, var(--leaf-component-floating-border-width, var(--leaf-border-width, 1px)));
+  border-color: var(--leaf-component-mentions-border-color, var(--leaf-component-floating-border-color, var(--leaf-frame-border-color, var(--leaf-color-border))));
+  color: var(--leaf-component-mentions-color, var(--leaf-component-floating-color, var(--leaf-color-text)));
+  background: var(--leaf-component-mentions-background, var(--leaf-component-floating-background, var(--leaf-color-surface-raised, var(--leaf-color-surface))));
+  box-shadow: var(--leaf-component-mentions-shadow, var(--leaf-component-floating-shadow, var(--leaf-surface-shadow, var(--leaf-shadow-md))));
+}
+
 .leaf-command-palette .leaf-modal__header {
   padding: 18px 20px 10px;
 }
@@ -12630,15 +13289,16 @@
   padding: 4px 16px 0;
 }
 
+.leaf-command-palette__results {
+  margin-top: 10px;
+}
+
 .leaf-command-palette__list {
   --leaf-floating-option-radius: var(--leaf-radius-sm);
   overscroll-behavior: contain;
   min-height: 72px;
-  max-height: 340px;
-  margin-top: 10px;
   padding: 4px;
   position: relative;
-  overflow: auto;
 }
 
 .leaf-command-palette__list .leaf-floating__option {
@@ -12830,7 +13490,7 @@
 }
 
 .leaf-bottom-navigation button[aria-current], .leaf-bottom-navigation a[aria-current] {
-  color: var(--leaf-color-primary);
+  color: var(--leaf-color-primary-ink, var(--leaf-color-primary));
 }
 
 .leaf-bottom-navigation button[aria-current] .leaf-bottom-navigation__icon, .leaf-bottom-navigation a[aria-current] .leaf-bottom-navigation__icon {
@@ -12861,7 +13521,7 @@
 }
 
 .leaf-bottom-navigation [data-leaf-navigation]:focus-visible {
-  outline: 2px solid var(--leaf-color-primary);
+  outline: 2px solid var(--leaf-color-primary-indicator, var(--leaf-color-primary));
   outline-offset: -2px;
 }
 
@@ -12887,7 +13547,7 @@
   --leaf-table-surface: var(--leaf-component-table-background, var(--leaf-color-surface));
   box-sizing: border-box;
   contain: inline-size;
-  border: 1px solid var(--leaf-color-border);
+  border: var(--leaf-component-table-border-width, var(--leaf-border-width, 1px)) solid var(--leaf-component-table-border-color, var(--leaf-frame-border-color, var(--leaf-color-border)));
   border-radius: var(--leaf-component-table-radius, var(--leaf-radius));
   background: var(--leaf-table-surface);
   width: 100%;
@@ -12897,7 +13557,7 @@
   font-family: var(--leaf-font-family);
   font-size: var(--leaf-component-table-font-size, var(--leaf-font-size));
   line-height: var(--leaf-line-height, 1.6);
-  box-shadow: var(--leaf-component-table-shadow, none);
+  box-shadow: var(--leaf-component-table-shadow, var(--leaf-surface-shadow, none));
   position: relative;
 }
 
@@ -12928,7 +13588,7 @@
 }
 
 .leaf-table__viewport:focus-visible {
-  outline: 3px solid var(--leaf-color-focus, var(--leaf-focus-color, var(--leaf-color-primary-alpha-42)));
+  outline: 3px solid var(--leaf-color-focus, var(--leaf-focus-color, var(--leaf-color-primary-focus, var(--leaf-color-primary-alpha-42))));
   outline-offset: 2px;
   outline-offset: -3px;
 }
@@ -13001,8 +13661,8 @@
   font-size: var(--leaf-font-size-sm);
   font-weight: var(--leaf-font-weight);
   background: var(--leaf-color-surface-muted);
+  border-block-end: 1px solid var(--leaf-color-divider);
   white-space: nowrap;
-  border-block-end: 0;
   position: relative;
 }
 
@@ -13010,10 +13670,14 @@
   border-block-end: 0;
 }
 
-.leaf-table--striped .leaf-table__body > .leaf-table__row:nth-child(2n):not(.leaf-table__state-row), .leaf-table__body > .leaf-table__row:not(.leaf-table__state-row):hover {
+.leaf-table--striped .leaf-table__body > .leaf-table__row:nth-child(2n):not(.leaf-table__state-row) {
   --leaf-table-row-background: var(--leaf-color-surface-muted);
 }
 
+.leaf-table__body > .leaf-table__row:not(.leaf-table__state-row):hover {
+  --leaf-table-row-background: var(--leaf-color-primary-surface-6);
+}
+
 .leaf-table__body > .leaf-table__row[data-selected], .leaf-table__body > .leaf-table__row[data-selected]:hover {
   --leaf-table-row-background: var(--leaf-color-primary-soft);
 }
@@ -13100,11 +13764,11 @@
 
 .leaf-data-table__drag-handle:hover {
   background: var(--leaf-color-primary-soft);
-  color: var(--leaf-color-primary);
+  color: var(--leaf-color-primary-ink, var(--leaf-color-primary));
 }
 
 .leaf-data-table__drag-handle:focus-visible {
-  outline: 3px solid var(--leaf-color-focus, var(--leaf-focus-color, var(--leaf-color-primary-alpha-42)));
+  outline: 3px solid var(--leaf-color-focus, var(--leaf-focus-color, var(--leaf-color-primary-focus, var(--leaf-color-primary-alpha-42))));
   outline-offset: 2px;
 }
 
@@ -13172,17 +13836,17 @@
 }
 
 .leaf-data-table__sort:hover {
-  color: var(--leaf-color-primary);
+  color: var(--leaf-color-primary-ink, var(--leaf-color-primary));
 }
 
 .leaf-data-table__sort:focus-visible {
-  outline: 3px solid var(--leaf-color-focus, var(--leaf-focus-color, var(--leaf-color-primary-alpha-42)));
+  outline: 3px solid var(--leaf-color-focus, var(--leaf-focus-color, var(--leaf-color-primary-focus, var(--leaf-color-primary-alpha-42))));
   outline-offset: 2px;
   border-radius: var(--leaf-radius-sm);
 }
 
 .leaf-data-table__sort[data-sorted] {
-  color: var(--leaf-color-primary);
+  color: var(--leaf-color-primary-ink, var(--leaf-color-primary));
 }
 
 .leaf-data-table__sort svg {
@@ -13223,11 +13887,11 @@
 
 .leaf-data-table__expand:hover {
   background: var(--leaf-color-primary-soft);
-  color: var(--leaf-color-primary);
+  color: var(--leaf-color-primary-ink, var(--leaf-color-primary));
 }
 
 .leaf-data-table__expand:focus-visible {
-  outline: 3px solid var(--leaf-color-focus, var(--leaf-focus-color, var(--leaf-color-primary-alpha-42)));
+  outline: 3px solid var(--leaf-color-focus, var(--leaf-focus-color, var(--leaf-color-primary-focus, var(--leaf-color-primary-alpha-42))));
   outline-offset: 2px;
 }
 
@@ -13272,11 +13936,11 @@
 }
 
 .leaf-data-table__resize:hover:after, .leaf-data-table__resize:focus-visible:after, .leaf-data-table__resize[data-resizing]:after {
-  background: var(--leaf-color-primary);
+  background: var(--leaf-color-primary-indicator, var(--leaf-color-primary));
 }
 
 .leaf-data-table__resize:focus-visible {
-  outline: 3px solid var(--leaf-color-focus, var(--leaf-focus-color, var(--leaf-color-primary-alpha-42)));
+  outline: 3px solid var(--leaf-color-focus, var(--leaf-focus-color, var(--leaf-color-primary-focus, var(--leaf-color-primary-alpha-42))));
   outline-offset: 2px;
 }