contain-css-svelte 1.1.4 → 1.1.7

package/dist/controls/MiniButton.svelte

@@ -30,10 +30,20 @@ const style = $derived(injectVars(restProps, "mini-button", [
   */
 /* Convenience groupings */
 button.primary {
-  --_background-color: var(--primary-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
-  --_color: var(--primary-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
   --link-bg: var(--primary-link-bg, var(--button-link-bg, var(--control-link-bg, inherit)));
   --link-fg: var(--primary-link-fg, var(--button-link-fg, var(--control-link-fg, inherit)));
+  --_bg-mix-color: var(--primary-bg-mix-color, var(--button-bg-mix-color, var(--control-bg-mix-color, var(--bg-mix-color, transparent))));
+  --_bg-mix-amount: var(--primary-bg-mix-amount, var(--button-bg-mix-amount, var(--control-bg-mix-amount, var(--bg-mix-amount, 0%))));
+  --_fg-mix-color: var(--primary-fg-mix-color, var(--button-fg-mix-color, var(--control-fg-mix-color, var(--fg-mix-color, transparent))));
+  --_fg-mix-amount: var(--primary-fg-mix-amount, var(--button-fg-mix-amount, var(--control-fg-mix-amount, var(--fg-mix-amount, 0%))));
+  --_bg-base: var(--primary-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
+  --_fg-base: var(--primary-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
+  --_background-color: color-mix(
+    in srgb,
+    var(--_bg-base),
+    var(--_bg-mix-color) var(--_bg-mix-amount)
+  );
+  --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
   background-color: var(--_background-color);
   color: var(--_color);
 }
@@ -56,10 +66,20 @@ button {
   text-indent: var(--mini-button-indent, var(--button-indent, var(--ui-indent, var(--control-indent, var(--indent, unset)))));
   font-variant: var(--mini-button-font-variant, var(--button-font-variant, var(--ui-font-variant, var(--control-font-variant, var(--font-variant, unset)))));
   text-align: var(--mini-button-text-align, var(--button-text-align, var(--ui-text-align, var(--control-text-align, var(--text-align, unset)))));
-  --_background-color: var(--mini-button-bg, var(--button-bg, var(--control-bg, var(--secondary-bg, var(--bg, unset)))));
-  --_color: var(--mini-button-fg, var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset)))));
   --link-bg: var(--mini-button-link-bg, var(--button-link-bg, var(--control-link-bg, var(--secondary-link-bg, inherit))));
   --link-fg: var(--mini-button-link-fg, var(--button-link-fg, var(--control-link-fg, var(--secondary-link-fg, inherit))));
+  --_bg-mix-color: var(--mini-button-bg-mix-color, var(--button-bg-mix-color, var(--control-bg-mix-color, var(--secondary-bg-mix-color, var(--bg-mix-color, transparent)))));
+  --_bg-mix-amount: var(--mini-button-bg-mix-amount, var(--button-bg-mix-amount, var(--control-bg-mix-amount, var(--secondary-bg-mix-amount, var(--bg-mix-amount, 0%)))));
+  --_fg-mix-color: var(--mini-button-fg-mix-color, var(--button-fg-mix-color, var(--control-fg-mix-color, var(--secondary-fg-mix-color, var(--fg-mix-color, transparent)))));
+  --_fg-mix-amount: var(--mini-button-fg-mix-amount, var(--button-fg-mix-amount, var(--control-fg-mix-amount, var(--secondary-fg-mix-amount, var(--fg-mix-amount, 0%)))));
+  --_bg-base: var(--mini-button-bg, var(--button-bg, var(--control-bg, var(--secondary-bg, var(--bg, unset)))));
+  --_fg-base: var(--mini-button-fg, var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset)))));
+  --_background-color: color-mix(
+    in srgb,
+    var(--_bg-base),
+    var(--_bg-mix-color) var(--_bg-mix-amount)
+  );
+  --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
   background-color: var(--_background-color);
   color: var(--_color);
   cursor: var(--mini-button-cursor, var(--button-cursor, var(--clickable-cursor, var(--cursor, pointer))));
@@ -116,46 +136,96 @@ button {
 }
 
 button.primary {
-  --_background-color: var(--primary-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
-  --_color: var(--primary-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
   --link-bg: var(--primary-link-bg, var(--button-link-bg, var(--control-link-bg, inherit)));
   --link-fg: var(--primary-link-fg, var(--button-link-fg, var(--control-link-fg, inherit)));
+  --_bg-mix-color: var(--primary-bg-mix-color, var(--button-bg-mix-color, var(--control-bg-mix-color, var(--bg-mix-color, transparent))));
+  --_bg-mix-amount: var(--primary-bg-mix-amount, var(--button-bg-mix-amount, var(--control-bg-mix-amount, var(--bg-mix-amount, 0%))));
+  --_fg-mix-color: var(--primary-fg-mix-color, var(--button-fg-mix-color, var(--control-fg-mix-color, var(--fg-mix-color, transparent))));
+  --_fg-mix-amount: var(--primary-fg-mix-amount, var(--button-fg-mix-amount, var(--control-fg-mix-amount, var(--fg-mix-amount, 0%))));
+  --_bg-base: var(--primary-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
+  --_fg-base: var(--primary-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
+  --_background-color: color-mix(
+    in srgb,
+    var(--_bg-base),
+    var(--_bg-mix-color) var(--_bg-mix-amount)
+  );
+  --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
   background-color: var(--_background-color);
   color: var(--_color);
 }
 
 button.warning {
-  --_background-color: var(--warning-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
-  --_color: var(--warning-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
   --link-bg: var(--warning-link-bg, var(--button-link-bg, var(--control-link-bg, inherit)));
   --link-fg: var(--warning-link-fg, var(--button-link-fg, var(--control-link-fg, inherit)));
+  --_bg-mix-color: var(--warning-bg-mix-color, var(--button-bg-mix-color, var(--control-bg-mix-color, var(--bg-mix-color, transparent))));
+  --_bg-mix-amount: var(--warning-bg-mix-amount, var(--button-bg-mix-amount, var(--control-bg-mix-amount, var(--bg-mix-amount, 0%))));
+  --_fg-mix-color: var(--warning-fg-mix-color, var(--button-fg-mix-color, var(--control-fg-mix-color, var(--fg-mix-color, transparent))));
+  --_fg-mix-amount: var(--warning-fg-mix-amount, var(--button-fg-mix-amount, var(--control-fg-mix-amount, var(--fg-mix-amount, 0%))));
+  --_bg-base: var(--warning-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
+  --_fg-base: var(--warning-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
+  --_background-color: color-mix(
+    in srgb,
+    var(--_bg-base),
+    var(--_bg-mix-color) var(--_bg-mix-amount)
+  );
+  --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
   background-color: var(--_background-color);
   color: var(--_color);
 }
 
 button.danger {
-  --_background-color: var(--danger-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
-  --_color: var(--danger-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
   --link-bg: var(--danger-link-bg, var(--button-link-bg, var(--control-link-bg, inherit)));
   --link-fg: var(--danger-link-fg, var(--button-link-fg, var(--control-link-fg, inherit)));
+  --_bg-mix-color: var(--danger-bg-mix-color, var(--button-bg-mix-color, var(--control-bg-mix-color, var(--bg-mix-color, transparent))));
+  --_bg-mix-amount: var(--danger-bg-mix-amount, var(--button-bg-mix-amount, var(--control-bg-mix-amount, var(--bg-mix-amount, 0%))));
+  --_fg-mix-color: var(--danger-fg-mix-color, var(--button-fg-mix-color, var(--control-fg-mix-color, var(--fg-mix-color, transparent))));
+  --_fg-mix-amount: var(--danger-fg-mix-amount, var(--button-fg-mix-amount, var(--control-fg-mix-amount, var(--fg-mix-amount, 0%))));
+  --_bg-base: var(--danger-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
+  --_fg-base: var(--danger-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
+  --_background-color: color-mix(
+    in srgb,
+    var(--_bg-base),
+    var(--_bg-mix-color) var(--_bg-mix-amount)
+  );
+  --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
   background-color: var(--_background-color);
   color: var(--_color);
 }
 
 button.success {
-  --_background-color: var(--success-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
-  --_color: var(--success-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
   --link-bg: var(--success-link-bg, var(--button-link-bg, var(--control-link-bg, inherit)));
   --link-fg: var(--success-link-fg, var(--button-link-fg, var(--control-link-fg, inherit)));
+  --_bg-mix-color: var(--success-bg-mix-color, var(--button-bg-mix-color, var(--control-bg-mix-color, var(--bg-mix-color, transparent))));
+  --_bg-mix-amount: var(--success-bg-mix-amount, var(--button-bg-mix-amount, var(--control-bg-mix-amount, var(--bg-mix-amount, 0%))));
+  --_fg-mix-color: var(--success-fg-mix-color, var(--button-fg-mix-color, var(--control-fg-mix-color, var(--fg-mix-color, transparent))));
+  --_fg-mix-amount: var(--success-fg-mix-amount, var(--button-fg-mix-amount, var(--control-fg-mix-amount, var(--fg-mix-amount, 0%))));
+  --_bg-base: var(--success-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
+  --_fg-base: var(--success-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
+  --_background-color: color-mix(
+    in srgb,
+    var(--_bg-base),
+    var(--_bg-mix-color) var(--_bg-mix-amount)
+  );
+  --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
   background-color: var(--_background-color);
   color: var(--_color);
 }
 
 button.info {
-  --_background-color: var(--info-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
-  --_color: var(--info-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
   --link-bg: var(--info-link-bg, var(--button-link-bg, var(--control-link-bg, inherit)));
   --link-fg: var(--info-link-fg, var(--button-link-fg, var(--control-link-fg, inherit)));
+  --_bg-mix-color: var(--info-bg-mix-color, var(--button-bg-mix-color, var(--control-bg-mix-color, var(--bg-mix-color, transparent))));
+  --_bg-mix-amount: var(--info-bg-mix-amount, var(--button-bg-mix-amount, var(--control-bg-mix-amount, var(--bg-mix-amount, 0%))));
+  --_fg-mix-color: var(--info-fg-mix-color, var(--button-fg-mix-color, var(--control-fg-mix-color, var(--fg-mix-color, transparent))));
+  --_fg-mix-amount: var(--info-fg-mix-amount, var(--button-fg-mix-amount, var(--control-fg-mix-amount, var(--fg-mix-amount, 0%))));
+  --_bg-base: var(--info-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
+  --_fg-base: var(--info-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
+  --_background-color: color-mix(
+    in srgb,
+    var(--_bg-base),
+    var(--_bg-mix-color) var(--_bg-mix-amount)
+  );
+  --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
   background-color: var(--_background-color);
   color: var(--_color);
 }</style>

package/dist/controls/Option.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">let { children, value, ...restProps } = $props();
-let template = $state(null);
+let template = $state();
 // Extract text content from rendered children
-let textContent = $derived(template ? template.textContent : "");
+let textContent = $derived(template ? template.textContent ?? "" : "");
 let htmlContent = $derived(template ? template.innerHTML : "");
 export {};
 </script>
@@ -10,6 +10,6 @@ export {};
   {@html textContent}
 </option>
 
-<div bind:this={template} style="display: none;" class="option-template hidden">
+<div bind:this={template} style="display: none;" class="option-template hidden" aria-hidden="true">
   {@render children?.()}
 </div>

package/dist/controls/RadioButton.svelte

@@ -136,10 +136,20 @@ label.radio-item::before {
   content: " ";
   width: var(--radio-button-size, var(--font-size, var(--size, 1em)));
   height: var(--radio-button-size, var(--font-size, var(--size, 1em)));
-  --_background-color: var(--radio-button-bg, var(--toggle-bg, var(--inactive-bg, var(--secondary-bg, var(--bg, unset)))));
-  --_color: var(--radio-button-fg, var(--toggle-fg, var(--inactive-fg, var(--secondary-fg, var(--fg, unset)))));
   --link-bg: var(--radio-button-link-bg, var(--toggle-link-bg, var(--inactive-link-bg, var(--secondary-link-bg, inherit))));
   --link-fg: var(--radio-button-link-fg, var(--toggle-link-fg, var(--inactive-link-fg, var(--secondary-link-fg, inherit))));
+  --_bg-mix-color: var(--radio-button-bg-mix-color, var(--toggle-bg-mix-color, var(--inactive-bg-mix-color, var(--secondary-bg-mix-color, var(--bg-mix-color, transparent)))));
+  --_bg-mix-amount: var(--radio-button-bg-mix-amount, var(--toggle-bg-mix-amount, var(--inactive-bg-mix-amount, var(--secondary-bg-mix-amount, var(--bg-mix-amount, 0%)))));
+  --_fg-mix-color: var(--radio-button-fg-mix-color, var(--toggle-fg-mix-color, var(--inactive-fg-mix-color, var(--secondary-fg-mix-color, var(--fg-mix-color, transparent)))));
+  --_fg-mix-amount: var(--radio-button-fg-mix-amount, var(--toggle-fg-mix-amount, var(--inactive-fg-mix-amount, var(--secondary-fg-mix-amount, var(--fg-mix-amount, 0%)))));
+  --_bg-base: var(--radio-button-bg, var(--toggle-bg, var(--inactive-bg, var(--secondary-bg, var(--bg, unset)))));
+  --_fg-base: var(--radio-button-fg, var(--toggle-fg, var(--inactive-fg, var(--secondary-fg, var(--fg, unset)))));
+  --_background-color: color-mix(
+    in srgb,
+    var(--_bg-base),
+    var(--_bg-mix-color) var(--_bg-mix-amount)
+  );
+  --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
   background-color: var(--_background-color);
   color: var(--_color);
   border: var(--radio-button-border, var(--border, 1px solid var(--border-color)));
@@ -163,10 +173,20 @@ label.radio-item:active::before {
 }
 
 label.radio-item:has(input:checked)::before {
-  --_background-color: var(--radio-button-checked-bg, var(--toggle-on-bg, var(--primary-bg, var(--bg, unset))));
-  --_color: var(--radio-button-checked-fg, var(--toggle-on-fg, var(--primary-fg, var(--fg, unset))));
   --link-bg: var(--radio-button-checked-link-bg, var(--toggle-on-link-bg, var(--primary-link-bg, inherit)));
   --link-fg: var(--radio-button-checked-link-fg, var(--toggle-on-link-fg, var(--primary-link-fg, inherit)));
+  --_bg-mix-color: var(--radio-button-checked-bg-mix-color, var(--toggle-on-bg-mix-color, var(--primary-bg-mix-color, var(--bg-mix-color, transparent))));
+  --_bg-mix-amount: var(--radio-button-checked-bg-mix-amount, var(--toggle-on-bg-mix-amount, var(--primary-bg-mix-amount, var(--bg-mix-amount, 0%))));
+  --_fg-mix-color: var(--radio-button-checked-fg-mix-color, var(--toggle-on-fg-mix-color, var(--primary-fg-mix-color, var(--fg-mix-color, transparent))));
+  --_fg-mix-amount: var(--radio-button-checked-fg-mix-amount, var(--toggle-on-fg-mix-amount, var(--primary-fg-mix-amount, var(--fg-mix-amount, 0%))));
+  --_bg-base: var(--radio-button-checked-bg, var(--toggle-on-bg, var(--primary-bg, var(--bg, unset))));
+  --_fg-base: var(--radio-button-checked-fg, var(--toggle-on-fg, var(--primary-fg, var(--fg, unset))));
+  --_background-color: color-mix(
+    in srgb,
+    var(--_bg-base),
+    var(--_bg-mix-color) var(--_bg-mix-amount)
+  );
+  --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
   background-color: var(--_background-color);
   color: var(--_color);
   border: var(--radio-button-checked-border, var(--toggle-on-border, var(--border, radio-button)));

package/dist/controls/Select.svelte

@@ -6,9 +6,8 @@ let observer;
 let resizeObserver;
 let targetWidth = $state("");
 let optionButtons = $state([]);
-onMount(async () => {
-    await tick(); // Ensure slot content is rendered
-    updateOptions();
+onMount(() => {
+    tick().then(() => updateOptions());
     // Observe changes in the select element
     observer = new MutationObserver((mutations) => {
         mutations.forEach((mutation) => {
@@ -56,6 +55,8 @@ function updateTargetWidth() {
     targetWidth = maxWidth ? maxWidth + "px" : "100%"; // || 150; // Fallback width if measurement fails
 }
 function setValue(idx) {
+    if (!selectElement)
+        return;
     selectElement.selectedIndex = idx;
     selectElement.dispatchEvent(new Event("change", { bubbles: true }));
     activeOption = options[idx];
@@ -126,10 +127,20 @@ select,
   --_padding: var(--select-padding, var(--input-padding, var(--menu-padding, var(--control-padding, var(--surface-padding, var(--padding, 4px))))));
   padding: var(--_padding);
   border-radius: var(--select-square-radius, var(--input-square-radius, var(--menu-square-radius, var(--control-square-radius, var(--surface-square-radius, var(--square-radius, 0))))));
-  --_background-color: var(--select-bg, var(--input-bg, var(--menu-bg, var(--control-bg, var(--surface-bg, var(--bg, unset))))));
-  --_color: var(--select-fg, var(--input-fg, var(--menu-fg, var(--control-fg, var(--surface-fg, var(--fg, unset))))));
   --link-bg: var(--select-link-bg, var(--input-link-bg, var(--menu-link-bg, var(--control-link-bg, var(--surface-link-bg, inherit)))));
   --link-fg: var(--select-link-fg, var(--input-link-fg, var(--menu-link-fg, var(--control-link-fg, var(--surface-link-fg, inherit)))));
+  --_bg-mix-color: var(--select-bg-mix-color, var(--input-bg-mix-color, var(--menu-bg-mix-color, var(--control-bg-mix-color, var(--surface-bg-mix-color, var(--bg-mix-color, transparent))))));
+  --_bg-mix-amount: var(--select-bg-mix-amount, var(--input-bg-mix-amount, var(--menu-bg-mix-amount, var(--control-bg-mix-amount, var(--surface-bg-mix-amount, var(--bg-mix-amount, 0%))))));
+  --_fg-mix-color: var(--select-fg-mix-color, var(--input-fg-mix-color, var(--menu-fg-mix-color, var(--control-fg-mix-color, var(--surface-fg-mix-color, var(--fg-mix-color, transparent))))));
+  --_fg-mix-amount: var(--select-fg-mix-amount, var(--input-fg-mix-amount, var(--menu-fg-mix-amount, var(--control-fg-mix-amount, var(--surface-fg-mix-amount, var(--fg-mix-amount, 0%))))));
+  --_bg-base: var(--select-bg, var(--input-bg, var(--menu-bg, var(--control-bg, var(--surface-bg, var(--bg, unset))))));
+  --_fg-base: var(--select-fg, var(--input-fg, var(--menu-fg, var(--control-fg, var(--surface-fg, var(--fg, unset))))));
+  --_background-color: color-mix(
+    in srgb,
+    var(--_bg-base),
+    var(--_bg-mix-color) var(--_bg-mix-amount)
+  );
+  --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
   background-color: var(--_background-color);
   color: var(--_color);
   width: var(--select-width, var(--target-width, var(--dropdown-menu-width, min(12em, 100vw))));
@@ -179,10 +190,20 @@ button:focus-visible {
 }
 
 .dropdown-wrapper {
-  --_background-color: var(--select-bg, var(--input-bg, var(--menu-bg, var(--control-bg, var(--surface-bg, var(--bg, unset))))));
-  --_color: var(--select-fg, var(--input-fg, var(--menu-fg, var(--control-fg, var(--surface-fg, var(--fg, unset))))));
   --link-bg: var(--select-link-bg, var(--input-link-bg, var(--menu-link-bg, var(--control-link-bg, var(--surface-link-bg, inherit)))));
   --link-fg: var(--select-link-fg, var(--input-link-fg, var(--menu-link-fg, var(--control-link-fg, var(--surface-link-fg, inherit)))));
+  --_bg-mix-color: var(--select-bg-mix-color, var(--input-bg-mix-color, var(--menu-bg-mix-color, var(--control-bg-mix-color, var(--surface-bg-mix-color, var(--bg-mix-color, transparent))))));
+  --_bg-mix-amount: var(--select-bg-mix-amount, var(--input-bg-mix-amount, var(--menu-bg-mix-amount, var(--control-bg-mix-amount, var(--surface-bg-mix-amount, var(--bg-mix-amount, 0%))))));
+  --_fg-mix-color: var(--select-fg-mix-color, var(--input-fg-mix-color, var(--menu-fg-mix-color, var(--control-fg-mix-color, var(--surface-fg-mix-color, var(--fg-mix-color, transparent))))));
+  --_fg-mix-amount: var(--select-fg-mix-amount, var(--input-fg-mix-amount, var(--menu-fg-mix-amount, var(--control-fg-mix-amount, var(--surface-fg-mix-amount, var(--fg-mix-amount, 0%))))));
+  --_bg-base: var(--select-bg, var(--input-bg, var(--menu-bg, var(--control-bg, var(--surface-bg, var(--bg, unset))))));
+  --_fg-base: var(--select-fg, var(--input-fg, var(--menu-fg, var(--control-fg, var(--surface-fg, var(--fg, unset))))));
+  --_background-color: color-mix(
+    in srgb,
+    var(--_bg-base),
+    var(--_bg-mix-color) var(--_bg-mix-amount)
+  );
+  --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
   background-color: var(--_background-color);
   color: var(--_color);
   --menu-item-justify: var(--select-menu-item-justify, flex-start);

package/dist/controls/Slider.svelte

@@ -1,6 +1,10 @@
 <script lang="ts">import { injectVars } from "../util";
 let { value = $bindable(0), min = 0, max = 100, step = 1, ...restProps } = $props();
-const { style: inlineStyle, ...elementProps } = restProps;
+const inlineStyle = $derived(restProps.style);
+const elementProps = $derived.by(() => {
+    const { style: _, ...rest } = restProps;
+    return rest;
+});
 const normalizedMin = $derived(Number.isFinite(min) ? min : 0);
 const normalizedMax = $derived(Number.isFinite(max) && max > normalizedMin ? max : normalizedMin + 1);
 const clampedValue = $derived(Math.min(Math.max(Number(value) || 0, normalizedMin), normalizedMax));

package/dist/controls/TabItem.svelte

@@ -23,10 +23,20 @@ const style = $derived(injectVars(restProps, "tab", ["bg", "fg", "padding", "wid
 
 .tab > :global(button),
 .tab > :global(div > button) {
-  --_background-color: var(--tab-bg, var(--button-bg, var(--control-bg, var(--secondary-bg, var(--bg, unset)))));
-  --_color: var(--tab-fg, var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset)))));
   --link-bg: var(--tab-link-bg, var(--button-link-bg, var(--control-link-bg, var(--secondary-link-bg, inherit))));
   --link-fg: var(--tab-link-fg, var(--button-link-fg, var(--control-link-fg, var(--secondary-link-fg, inherit))));
+  --_bg-mix-color: var(--tab-bg-mix-color, var(--button-bg-mix-color, var(--control-bg-mix-color, var(--secondary-bg-mix-color, var(--bg-mix-color, transparent)))));
+  --_bg-mix-amount: var(--tab-bg-mix-amount, var(--button-bg-mix-amount, var(--control-bg-mix-amount, var(--secondary-bg-mix-amount, var(--bg-mix-amount, 0%)))));
+  --_fg-mix-color: var(--tab-fg-mix-color, var(--button-fg-mix-color, var(--control-fg-mix-color, var(--secondary-fg-mix-color, var(--fg-mix-color, transparent)))));
+  --_fg-mix-amount: var(--tab-fg-mix-amount, var(--button-fg-mix-amount, var(--control-fg-mix-amount, var(--secondary-fg-mix-amount, var(--fg-mix-amount, 0%)))));
+  --_bg-base: var(--tab-bg, var(--button-bg, var(--control-bg, var(--secondary-bg, var(--bg, unset)))));
+  --_fg-base: var(--tab-fg, var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset)))));
+  --_background-color: color-mix(
+    in srgb,
+    var(--_bg-base),
+    var(--_bg-mix-color) var(--_bg-mix-amount)
+  );
+  --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
   background-color: var(--_background-color);
   color: var(--_color);
   box-sizing: border-box;
@@ -75,10 +85,20 @@ const style = $derived(injectVars(restProps, "tab", ["bg", "fg", "padding", "wid
 
 .tab.active > :global(button),
 .tab.active > :global(div > button) {
-  --_background-color: var(--tab-active-bg, var(--primary-bg, var(--tab-bg, var(--button-bg, var(--control-bg, var(--secondary-bg, var(--bg, unset)))))));
-  --_color: var(--tab-active-fg, var(--primary-fg, var(--tab-fg, var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset)))))));
   --link-bg: var(--tab-active-link-bg, var(--primary-link-bg, var(--tab-link-bg, var(--button-link-bg, var(--control-link-bg, var(--secondary-link-bg, inherit))))));
   --link-fg: var(--tab-active-link-fg, var(--primary-link-fg, var(--tab-link-fg, var(--button-link-fg, var(--control-link-fg, var(--secondary-link-fg, inherit))))));
+  --_bg-mix-color: var(--tab-active-bg-mix-color, var(--primary-bg-mix-color, var(--tab-bg-mix-color, var(--button-bg-mix-color, var(--control-bg-mix-color, var(--secondary-bg-mix-color, var(--bg-mix-color, transparent)))))));
+  --_bg-mix-amount: var(--tab-active-bg-mix-amount, var(--primary-bg-mix-amount, var(--tab-bg-mix-amount, var(--button-bg-mix-amount, var(--control-bg-mix-amount, var(--secondary-bg-mix-amount, var(--bg-mix-amount, 0%)))))));
+  --_fg-mix-color: var(--tab-active-fg-mix-color, var(--primary-fg-mix-color, var(--tab-fg-mix-color, var(--button-fg-mix-color, var(--control-fg-mix-color, var(--secondary-fg-mix-color, var(--fg-mix-color, transparent)))))));
+  --_fg-mix-amount: var(--tab-active-fg-mix-amount, var(--primary-fg-mix-amount, var(--tab-fg-mix-amount, var(--button-fg-mix-amount, var(--control-fg-mix-amount, var(--secondary-fg-mix-amount, var(--fg-mix-amount, 0%)))))));
+  --_bg-base: var(--tab-active-bg, var(--primary-bg, var(--tab-bg, var(--button-bg, var(--control-bg, var(--secondary-bg, var(--bg, unset)))))));
+  --_fg-base: var(--tab-active-fg, var(--primary-fg, var(--tab-fg, var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset)))))));
+  --_background-color: color-mix(
+    in srgb,
+    var(--_bg-base),
+    var(--_bg-mix-color) var(--_bg-mix-amount)
+  );
+  --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
   background-color: var(--_background-color);
   color: var(--_color);
   font-family: var(--tab-active-font-family, var(--tab-font-family, var(--button-font-family, var(--ui-font-family, var(--control-font-family, var(--secondary-font-family, var(--font-family, unset)))))));

package/dist/controls/Toggle.svelte

@@ -79,10 +79,20 @@ const effectiveOnLabel = $derived(onLabel || children);
 }
 
 .toggle-track {
-  --_background-color: var(--toggle-bg, var(--toggle-off-bg, var(--inactive-bg, var(--secondary-bg, var(--bg, unset)))));
-  --_color: var(--toggle-fg, var(--toggle-off-fg, var(--inactive-fg, var(--secondary-fg, var(--fg, unset)))));
   --link-bg: var(--toggle-link-bg, var(--toggle-off-link-bg, var(--inactive-link-bg, var(--secondary-link-bg, inherit))));
   --link-fg: var(--toggle-link-fg, var(--toggle-off-link-fg, var(--inactive-link-fg, var(--secondary-link-fg, inherit))));
+  --_bg-mix-color: var(--toggle-bg-mix-color, var(--toggle-off-bg-mix-color, var(--inactive-bg-mix-color, var(--secondary-bg-mix-color, var(--bg-mix-color, transparent)))));
+  --_bg-mix-amount: var(--toggle-bg-mix-amount, var(--toggle-off-bg-mix-amount, var(--inactive-bg-mix-amount, var(--secondary-bg-mix-amount, var(--bg-mix-amount, 0%)))));
+  --_fg-mix-color: var(--toggle-fg-mix-color, var(--toggle-off-fg-mix-color, var(--inactive-fg-mix-color, var(--secondary-fg-mix-color, var(--fg-mix-color, transparent)))));
+  --_fg-mix-amount: var(--toggle-fg-mix-amount, var(--toggle-off-fg-mix-amount, var(--inactive-fg-mix-amount, var(--secondary-fg-mix-amount, var(--fg-mix-amount, 0%)))));
+  --_bg-base: var(--toggle-bg, var(--toggle-off-bg, var(--inactive-bg, var(--secondary-bg, var(--bg, unset)))));
+  --_fg-base: var(--toggle-fg, var(--toggle-off-fg, var(--inactive-fg, var(--secondary-fg, var(--fg, unset)))));
+  --_background-color: color-mix(
+    in srgb,
+    var(--_bg-base),
+    var(--_bg-mix-color) var(--_bg-mix-amount)
+  );
+  --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
   background-color: var(--_background-color);
   color: var(--_color);
   display: block;
@@ -138,10 +148,20 @@ input[type=checkbox] {
 }
 
 .toggle:has(input:checked) .toggle-track {
-  --_background-color: var(--toggle-on-bg, var(--primary-bg, var(--toggle-bg, var(--bg, unset))));
-  --_color: var(--toggle-on-fg, var(--primary-fg, var(--toggle-fg, var(--fg, unset))));
   --link-bg: var(--toggle-on-link-bg, var(--primary-link-bg, var(--toggle-link-bg, inherit)));
   --link-fg: var(--toggle-on-link-fg, var(--primary-link-fg, var(--toggle-link-fg, inherit)));
+  --_bg-mix-color: var(--toggle-on-bg-mix-color, var(--primary-bg-mix-color, var(--toggle-bg-mix-color, var(--bg-mix-color, transparent))));
+  --_bg-mix-amount: var(--toggle-on-bg-mix-amount, var(--primary-bg-mix-amount, var(--toggle-bg-mix-amount, var(--bg-mix-amount, 0%))));
+  --_fg-mix-color: var(--toggle-on-fg-mix-color, var(--primary-fg-mix-color, var(--toggle-fg-mix-color, var(--fg-mix-color, transparent))));
+  --_fg-mix-amount: var(--toggle-on-fg-mix-amount, var(--primary-fg-mix-amount, var(--toggle-fg-mix-amount, var(--fg-mix-amount, 0%))));
+  --_bg-base: var(--toggle-on-bg, var(--primary-bg, var(--toggle-bg, var(--bg, unset))));
+  --_fg-base: var(--toggle-on-fg, var(--primary-fg, var(--toggle-fg, var(--fg, unset))));
+  --_background-color: color-mix(
+    in srgb,
+    var(--_bg-base),
+    var(--_bg-mix-color) var(--_bg-mix-amount)
+  );
+  --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
   background-color: var(--_background-color);
   color: var(--_color);
   border: var(--toggle-on-border, var(--toggle-border, var(--border, 1px solid transparent)));

package/dist/cssprops.js

@@ -41,8 +41,10 @@ const miscComponentProps = [
     "--split-pane-right-width",
     "--split-pane-left-width",
     "--sidebar-collapse",
+    "--sidebar-compact-side-padding",
     "--sidebar-expand",
     "--sidebar-transition",
+    "--sidebar-mobile-icon-filter",
     "--resizer-grab-width",
     "--resizer-grab-height",
     "--resizer-color",
@@ -124,6 +126,7 @@ const components = [
     ...[
         "button",
         "mini-button",
+        "menu-trigger",
         "menu-item",
         "dropdown-menu",
         "select",

package/dist/dropdowns/DropdownMenu.svelte

@@ -13,7 +13,16 @@ let buttonElement = $state();
 let dropdownContentElement = $state();
 let isOpen = $state(false);
 // Style injection
-const style = $derived(injectVars(props, "menu", ["bg", "fg", "padding", "width", "height"]));
+const style = $derived(injectVars(props, "menu", [
+    "bg",
+    "fg",
+    "padding",
+    "width",
+    "height",
+    "triggerBg",
+    "triggerFg",
+    "triggerPadding",
+]));
 let dropdownTop = $state(0);
 let dropdownLeft = $state(0);
 let dropdownMaxHeight = $state(0);
@@ -34,13 +43,13 @@ function computePosition() {
     }
     dropdownMaxHeight = window.innerHeight - dropdownTop;
 }
-function triggerMenu(e) {
+function triggerMenu(_e) {
     if (!isOpen) {
         injectVariablesIntoDropdown();
         computePosition();
     }
 }
-function dismissPopover(e) {
+function dismissPopover(_e) {
     if (!popoverDiv)
         return;
     popoverDiv.hidePopover();
@@ -63,7 +72,7 @@ function handleKeystroke(event) {
     else {
         searchString = "";
         if (event.key === "Escape") {
-            popoverDiv.hidePopover();
+            popoverDiv?.hidePopover();
         }
         else if (event.key === "ArrowDown" || event.key === "ArrowUp") {
             event.preventDefault(); // Prevent default to stop scrolling the page
@@ -87,7 +96,7 @@ function maybeFocusMatch(searchString) {
     }
 }
 function navigateMenu(direction) {
-    if (!popoverDiv.matches(":popover-open") && buttonElement) {
+    if (!popoverDiv?.matches(":popover-open") && buttonElement) {
         buttonElement.click();
         return;
     }
@@ -171,48 +180,58 @@ let popoverDiv = $state();
   */
 /* Convenience groupings */
 button {
-  --_background-color: var(--menu-bg, var(--button-bg, var(--surface-bg, var(--bg, unset))));
-  --_color: var(--menu-fg, var(--button-fg, var(--surface-fg, var(--fg, unset))));
-  --link-bg: var(--menu-link-bg, var(--button-link-bg, var(--surface-link-bg, inherit)));
-  --link-fg: var(--menu-link-fg, var(--button-link-fg, var(--surface-link-fg, inherit)));
+  --link-bg: var(--menu-trigger-link-bg, var(--menu-link-bg, var(--button-link-bg, var(--surface-link-bg, inherit))));
+  --link-fg: var(--menu-trigger-link-fg, var(--menu-link-fg, var(--button-link-fg, var(--surface-link-fg, inherit))));
+  --_bg-mix-color: var(--menu-trigger-bg-mix-color, var(--menu-bg-mix-color, var(--button-bg-mix-color, var(--surface-bg-mix-color, var(--bg-mix-color, transparent)))));
+  --_bg-mix-amount: var(--menu-trigger-bg-mix-amount, var(--menu-bg-mix-amount, var(--button-bg-mix-amount, var(--surface-bg-mix-amount, var(--bg-mix-amount, 0%)))));
+  --_fg-mix-color: var(--menu-trigger-fg-mix-color, var(--menu-fg-mix-color, var(--button-fg-mix-color, var(--surface-fg-mix-color, var(--fg-mix-color, transparent)))));
+  --_fg-mix-amount: var(--menu-trigger-fg-mix-amount, var(--menu-fg-mix-amount, var(--button-fg-mix-amount, var(--surface-fg-mix-amount, var(--fg-mix-amount, 0%)))));
+  --_bg-base: var(--menu-trigger-bg, var(--menu-bg, var(--button-bg, var(--surface-bg, var(--bg, unset)))));
+  --_fg-base: var(--menu-trigger-fg, var(--menu-fg, var(--button-fg, var(--surface-fg, var(--fg, unset)))));
+  --_background-color: color-mix(
+    in srgb,
+    var(--_bg-base),
+    var(--_bg-mix-color) var(--_bg-mix-amount)
+  );
+  --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
   background-color: var(--_background-color);
   color: var(--_color);
   box-sizing: border-box;
-  border: var(--menu-border, var(--button-border, var(--surface-border, var(--border, inherit))));
-  border-width: var(--menu-border-width, var(--button-border-width, var(--surface-border-width, var(--__missing-border-width))));
-  border-style: var(--menu-border-style, var(--button-border-style, var(--surface-border-style, var(--__missing-border-style))));
-  border-color: var(--menu-border-color, var(--button-border-color, var(--surface-border-color, var(--__missing-border-color))));
-  border-top: var(--menu-border-top, var(--button-border-top, var(--surface-border-top, var(--border-top, var(--menu-border, var(--button-border, var(--surface-border, var(--border, none))))))));
-  border-right: var(--menu-border-right, var(--button-border-right, var(--surface-border-right, var(--border-right, var(--menu-border, var(--button-border, var(--surface-border, var(--border, none))))))));
-  border-bottom: var(--menu-border-bottom, var(--button-border-bottom, var(--surface-border-bottom, var(--border-bottom, var(--menu-border, var(--button-border, var(--surface-border, var(--border, none))))))));
-  border-left: var(--menu-border-left, var(--button-border-left, var(--surface-border-left, var(--border-left, var(--menu-border, var(--button-border, var(--surface-border, var(--border, none))))))));
-  --_padding: var(--menu-padding, var(--button-padding, var(--surface-padding, var(--padding, 4px))));
+  border: var(--menu-trigger-border, var(--menu-border, var(--button-border, var(--surface-border, var(--border, inherit)))));
+  border-width: var(--menu-trigger-border-width, var(--menu-border-width, var(--button-border-width, var(--surface-border-width, var(--__missing-border-width)))));
+  border-style: var(--menu-trigger-border-style, var(--menu-border-style, var(--button-border-style, var(--surface-border-style, var(--__missing-border-style)))));
+  border-color: var(--menu-trigger-border-color, var(--menu-border-color, var(--button-border-color, var(--surface-border-color, var(--__missing-border-color)))));
+  border-top: var(--menu-trigger-border-top, var(--menu-border-top, var(--button-border-top, var(--surface-border-top, var(--border-top, var(--menu-trigger-border, var(--menu-border, var(--button-border, var(--surface-border, var(--border, none))))))))));
+  border-right: var(--menu-trigger-border-right, var(--menu-border-right, var(--button-border-right, var(--surface-border-right, var(--border-right, var(--menu-trigger-border, var(--menu-border, var(--button-border, var(--surface-border, var(--border, none))))))))));
+  border-bottom: var(--menu-trigger-border-bottom, var(--menu-border-bottom, var(--button-border-bottom, var(--surface-border-bottom, var(--border-bottom, var(--menu-trigger-border, var(--menu-border, var(--button-border, var(--surface-border, var(--border, none))))))))));
+  border-left: var(--menu-trigger-border-left, var(--menu-border-left, var(--button-border-left, var(--surface-border-left, var(--border-left, var(--menu-trigger-border, var(--menu-border, var(--button-border, var(--surface-border, var(--border, none))))))))));
+  --_padding: var(--menu-trigger-padding, var(--menu-padding, var(--button-padding, var(--surface-padding, var(--padding, 4px)))));
   padding: var(--_padding);
-  border-radius: var(--menu-square-radius, var(--button-square-radius, var(--surface-square-radius, var(--square-radius, 0))));
-  cursor: var(--menu-cursor, var(--button-cursor, var(--control-cursor, var(--cursor, pointer))));
-  transition: filter var(--menu-transition, var(--button-transition, var(--control-transition, var(--transition, 300ms)))), background-color var(--menu-transition, var(--button-transition, var(--control-transition, var(--transition, 300ms)))), border-color var(--menu-transition, var(--button-transition, var(--control-transition, var(--transition, 300ms)))), box-shadow var(--menu-transition, var(--button-transition, var(--control-transition, var(--transition, 300ms)))), transform var(--menu-transition, var(--button-transition, var(--control-transition, var(--transition, 300ms))));
+  border-radius: var(--menu-trigger-square-radius, var(--menu-square-radius, var(--button-square-radius, var(--surface-square-radius, var(--square-radius, 0)))));
+  cursor: var(--menu-trigger-cursor, var(--menu-cursor, var(--button-cursor, var(--control-cursor, var(--cursor, pointer)))));
+  transition: filter var(--menu-trigger-transition, var(--menu-transition, var(--button-transition, var(--control-transition, var(--transition, 300ms))))), background-color var(--menu-trigger-transition, var(--menu-transition, var(--button-transition, var(--control-transition, var(--transition, 300ms))))), border-color var(--menu-trigger-transition, var(--menu-transition, var(--button-transition, var(--control-transition, var(--transition, 300ms))))), box-shadow var(--menu-trigger-transition, var(--menu-transition, var(--button-transition, var(--control-transition, var(--transition, 300ms))))), transform var(--menu-trigger-transition, var(--menu-transition, var(--button-transition, var(--control-transition, var(--transition, 300ms)))));
 }
 
 button:hover {
-  filter: var(--menu-hover-filter, var(--button-hover-filter, var(--control-hover-filter, var(--hover-filter, brightness(1.05)))));
-  transform: var(--menu-hover-transform, var(--button-hover-transform, var(--control-hover-transform, var(--hover-transform, none))));
+  filter: var(--menu-trigger-hover-filter, var(--menu-hover-filter, var(--button-hover-filter, var(--control-hover-filter, var(--hover-filter, brightness(1.05))))));
+  transform: var(--menu-trigger-hover-transform, var(--menu-hover-transform, var(--button-hover-transform, var(--control-hover-transform, var(--hover-transform, none)))));
   background-color: color-mix(in oklch, var(--_background-color) var(--hover-base-color-percentage, 90%), var(--hover-color-mix, white) calc(100% - var(--hover-base-color-percentage, 90%)));
-  box-shadow: var(--menu-hover-box-shadow, var(--button-hover-box-shadow, var(--control-hover-box-shadow, var(--hover-box-shadow, var(--_box-shadow, none)))));
+  box-shadow: var(--menu-trigger-hover-box-shadow, var(--menu-hover-box-shadow, var(--button-hover-box-shadow, var(--control-hover-box-shadow, var(--hover-box-shadow, var(--_box-shadow, none))))));
 }
 
 button:active {
-  filter: var(--menu-active-filter, var(--button-active-filter, var(--control-active-filter, var(--active-filter, brightness(0.9)))));
-  transform: var(--menu-active-transform, var(--button-active-transform, var(--control-active-transform, var(--active-transform, none))));
+  filter: var(--menu-trigger-active-filter, var(--menu-active-filter, var(--button-active-filter, var(--control-active-filter, var(--active-filter, brightness(0.9))))));
+  transform: var(--menu-trigger-active-transform, var(--menu-active-transform, var(--button-active-transform, var(--control-active-transform, var(--active-transform, none)))));
   background-color: color-mix(in oklch, var(--_background-color) var(--active-base-color-percentage, 90%), var(--active-color-mix, black) calc(100% - var(--active-base-color-percentage, 90%)));
-  box-shadow: var(--menu-active-box-shadow, var(--button-active-box-shadow, var(--control-active-box-shadow, var(--active-box-shadow, var(--_box-shadow, none)))));
+  box-shadow: var(--menu-trigger-active-box-shadow, var(--menu-active-box-shadow, var(--button-active-box-shadow, var(--control-active-box-shadow, var(--active-box-shadow, var(--_box-shadow, none))))));
 }
 
 button:disabled {
-  cursor: var(--menu-disabled-cursor, var(--button-disabled-cursor, var(--control-disabled-cursor, var(--disabled-cursor, not-allowed))));
-  transform: var(--menu-disabled-transform, var(--button-disabled-transform, var(--control-disabled-transform, var(--disabled-transform, none))));
-  filter: var(--menu-disabled-filter, var(--button-disabled-filter, var(--control-disabled-filter, var(--disabled-filter, grayscale(0.5)))));
+  cursor: var(--menu-trigger-disabled-cursor, var(--menu-disabled-cursor, var(--button-disabled-cursor, var(--control-disabled-cursor, var(--disabled-cursor, not-allowed)))));
+  transform: var(--menu-trigger-disabled-transform, var(--menu-disabled-transform, var(--button-disabled-transform, var(--control-disabled-transform, var(--disabled-transform, none)))));
+  filter: var(--menu-trigger-disabled-filter, var(--menu-disabled-filter, var(--button-disabled-filter, var(--control-disabled-filter, var(--disabled-filter, grayscale(0.5))))));
   background-color: color-mix(in oklch, var(--_background-color) var(--disabled-base-color-percentage, 50%), var(--disabled-color-mix, gray) calc(100% - var(--disabled-base-color-percentage, 50%)));
-  box-shadow: var(--menu-disabled-box-shadow, var(--button-disabled-box-shadow, var(--control-disabled-box-shadow, var(--disabled-box-shadow, var(--_box-shadow, none)))));
+  box-shadow: var(--menu-trigger-disabled-box-shadow, var(--menu-disabled-box-shadow, var(--button-disabled-box-shadow, var(--control-disabled-box-shadow, var(--disabled-box-shadow, var(--_box-shadow, none))))));
 }
 
 button:focus-visible {
@@ -226,10 +245,20 @@ button {
 }
 
 .dropdown-content :global(.menu) {
-  --_background-color: var(--menu-bg, var(--surface-bg, var(--bg, unset)));
-  --_color: var(--menu-fg, var(--surface-fg, var(--fg, unset)));
   --link-bg: var(--menu-link-bg, var(--surface-link-bg, inherit));
   --link-fg: var(--menu-link-fg, var(--surface-link-fg, inherit));
+  --_bg-mix-color: var(--menu-bg-mix-color, var(--surface-bg-mix-color, var(--bg-mix-color, transparent)));
+  --_bg-mix-amount: var(--menu-bg-mix-amount, var(--surface-bg-mix-amount, var(--bg-mix-amount, 0%)));
+  --_fg-mix-color: var(--menu-fg-mix-color, var(--surface-fg-mix-color, var(--fg-mix-color, transparent)));
+  --_fg-mix-amount: var(--menu-fg-mix-amount, var(--surface-fg-mix-amount, var(--fg-mix-amount, 0%)));
+  --_bg-base: var(--menu-bg, var(--surface-bg, var(--bg, unset)));
+  --_fg-base: var(--menu-fg, var(--surface-fg, var(--fg, unset)));
+  --_background-color: color-mix(
+    in srgb,
+    var(--_bg-base),
+    var(--_bg-mix-color) var(--_bg-mix-amount)
+  );
+  --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
   background-color: var(--_background-color);
   color: var(--_color);
   font-family: var(--menu-font-family, var(--surface-font-family, var(--font-family, unset)));
@@ -354,10 +383,20 @@ button {
 .dropdown-content {
   width: max(var(--dropdown-menu-min-width, 12em), var(--dropdown-menu-width, 12em));
   min-width: var(--dropdown-menu-min-width, 12em);
-  --_background-color: var(--dropdown-menu-bg, var(--menu-bg, var(--surface-bg, var(--bg, unset))));
-  --_color: var(--dropdown-menu-fg, var(--menu-fg, var(--surface-fg, var(--fg, unset))));
   --link-bg: var(--dropdown-menu-link-bg, var(--menu-link-bg, var(--surface-link-bg, inherit)));
   --link-fg: var(--dropdown-menu-link-fg, var(--menu-link-fg, var(--surface-link-fg, inherit)));
+  --_bg-mix-color: var(--dropdown-menu-bg-mix-color, var(--menu-bg-mix-color, var(--surface-bg-mix-color, var(--bg-mix-color, transparent))));
+  --_bg-mix-amount: var(--dropdown-menu-bg-mix-amount, var(--menu-bg-mix-amount, var(--surface-bg-mix-amount, var(--bg-mix-amount, 0%))));
+  --_fg-mix-color: var(--dropdown-menu-fg-mix-color, var(--menu-fg-mix-color, var(--surface-fg-mix-color, var(--fg-mix-color, transparent))));
+  --_fg-mix-amount: var(--dropdown-menu-fg-mix-amount, var(--menu-fg-mix-amount, var(--surface-fg-mix-amount, var(--fg-mix-amount, 0%))));
+  --_bg-base: var(--dropdown-menu-bg, var(--menu-bg, var(--surface-bg, var(--bg, unset))));
+  --_fg-base: var(--dropdown-menu-fg, var(--menu-fg, var(--surface-fg, var(--fg, unset))));
+  --_background-color: color-mix(
+    in srgb,
+    var(--_bg-base),
+    var(--_bg-mix-color) var(--_bg-mix-amount)
+  );
+  --_color: color-mix(in srgb, var(--_fg-base), var(--_fg-mix-color) var(--_fg-mix-amount));
   background-color: var(--_background-color);
   color: var(--_color);
   --_box-shadow: