@kushagradhawan/kookie-ui 0.1.29 → 0.1.31

package/src/components/_internal/base-checkbox.css

@@ -15,6 +15,28 @@
   border-radius: var(--skeleton-radius);
   --skeleton-radius-override: var(--checkbox-border-radius);
 
+
+  /* Theme-level translucent override */
+  :where([data-panel-background='translucent'], [data-material='translucent']) & {
+    backdrop-filter: var(--backdrop-filter-components);
+    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+  }
+
+  /* Prevent backdrop-filter stacking with parents */
+  isolation: isolate;
+
+  /* Component-level overrides */
+  &:where([data-panel-background='solid'], [data-material='solid']) {
+    backdrop-filter: none;
+    --backdrop-filter-components: none;
+  }
+  
+  &:where([data-panel-background='translucent'], [data-material='translucent']) {
+    backdrop-filter: var(--backdrop-filter-components);
+    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+  }
+
+
   &::before {
     content: '';
     display: block;
@@ -81,14 +103,15 @@
 .rt-BaseCheckboxRoot:where(.rt-variant-solid) {
   &:where([data-state='unchecked']) {
     &::before {
-      background-color: var(--color-surface);
-      box-shadow: inset 0 0 0 var(--border-width-inset) var(--gray-a7);
+      background-color: transparent;
+      box-shadow: inset 0 0 0 1px var(--accent-9);
     }
   }
 
   &:where([data-state='checked'], [data-state='indeterminate']) {
     &::before {
-      background-color: var(--accent-indicator);
+      background-color: var(--accent-9);
+      box-shadow: inset 0 0 0 1px var(--accent-9);
     }
     & :where(.rt-BaseCheckboxIndicator) {
       color: var(--accent-contrast);
@@ -97,17 +120,18 @@
     &:where(.rt-high-contrast) {
       &::before {
         background-color: var(--accent-12);
+        box-shadow: inset 0 0 0 1px var(--accent-12);
       }
       & :where(.rt-BaseCheckboxIndicator) {
-        color: var(--accent-1);
+        color: var(--gray-1);
       }
     }
   }
 
   &:where(:disabled) {
     &::before {
-      box-shadow: inset 0 0 0 var(--border-width-inset) var(--gray-a6);
-      background-color: transparent;
+      box-shadow: inset 0 0 0 1px var(--gray-a6);
+      background-color: var(--gray-a3);
     }
     & :where(.rt-BaseCheckboxIndicator) {
       color: var(--gray-a8);
@@ -123,28 +147,22 @@
   
   &:where([data-state='unchecked']) {
     &::before {
-      background-color: var(--accent-2);
-      /* prettier-ignore */
-      box-shadow:
-        inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--accent-a2),
-        inset 0 var(--classic-border-width) var(--white-a12),
-        inset 0 var(--classic-shadow-blur-medium) var(--classic-shadow-blur-large) var(--accent-a2),
-        inset 0 calc(-1 * var(--classic-border-width)) var(--accent-a6),
-        0 0 0 var(--classic-border-width) var(--accent-a5),
-        0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--accent-a7);
-    }
-    
-    :where(.dark, .dark-theme) &,
-    :where(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) & {
-      &::before {
-        /* prettier-ignore */
-        box-shadow:
-          inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--accent-a3),
-          inset 0 var(--classic-border-width) var(--accent-a11),
-          inset 0 var(--classic-shadow-blur-medium) var(--classic-shadow-blur-large) var(--accent-a2),
-          inset 0 calc(-2 * var(--classic-border-width)) var(--black-a11),
-          0 0 0 var(--classic-border-width-thick) var(--accent-a7),
-          0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--black-a12);
+      color: var(--accent-a11);
+      background-color: var(--color-surface-solid);
+      box-shadow: var(--shadow-2);
+
+      /* Theme-level translucent override */
+      :where([data-panel-background='translucent'], [data-material='translucent']) & {
+        background-color: var(--color-surface-translucent);
+      }
+
+      /* Component-level overrides (higher specificity) */
+      &:where([data-panel-background='solid'], [data-material='solid']) {
+        background-color: var(--color-surface-solid);
+      }
+
+      &:where([data-panel-background='translucent'], [data-material='translucent']) {
+        background-color: var(--color-surface-translucent);
       }
     }
   }
@@ -152,35 +170,44 @@
   &:where([data-state='checked'], [data-state='indeterminate']) {
     &::before {
       background-color: var(--accent-3);
-      /* prettier-ignore */
-      box-shadow:
-        inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--accent-a2),
-        inset 0 var(--classic-border-width) var(--white-a12),
-        inset 0 var(--classic-shadow-blur-medium) var(--classic-shadow-blur-large) var(--accent-a2),
-        inset 0 calc(-1 * var(--classic-border-width)) var(--accent-a6),
-        0 0 0 var(--classic-border-width) var(--accent-a5),
-        0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--accent-a7);
+      box-shadow: var(--shadow-1);
+
+      /* Theme-level translucent override */
+      :where([data-panel-background='translucent'], [data-material='translucent']) & {
+        background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
+      }
+
+      /* Component-level overrides (higher specificity) */
+      &:where([data-panel-background='solid'], [data-material='solid']) {
+        background-color: var(--accent-3);
+      }
+
+      &:where([data-panel-background='translucent'], [data-material='translucent']) {
+        background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
+      }
     }
     & :where(.rt-BaseCheckboxIndicator) {
       color: var(--accent-a11);
     }
-    
-    :where(.dark, .dark-theme) &,
-    :where(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) & {
+
+    &:where(.rt-high-contrast) {
       &::before {
         background-color: var(--accent-3);
-        /* prettier-ignore */
-        box-shadow:
-          inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--accent-a3),
-          inset 0 var(--classic-border-width) var(--accent-a11),
-          inset 0 var(--classic-shadow-blur-medium) var(--classic-shadow-blur-large) var(--accent-a2),
-          inset 0 calc(-2 * var(--classic-border-width)) var(--black-a11),
-          0 0 0 var(--classic-border-width-thick) var(--accent-a7),
-          0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--black-a12);
-      }
-    }
 
-    &:where(.rt-high-contrast) {
+        /* Theme-level translucent override for high contrast */
+        :where([data-panel-background='translucent'], [data-material='translucent']) & {
+          background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
+        }
+
+        /* Component-level overrides for high contrast */
+        &:where([data-panel-background='solid'], [data-material='solid']) {
+          background-color: var(--accent-3);
+        }
+
+        &:where([data-panel-background='translucent'], [data-material='translucent']) {
+          background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
+        }
+      }
       & :where(.rt-BaseCheckboxIndicator) {
         color: var(--accent-12);
       }
@@ -191,7 +218,22 @@
     top: calc(var(--classic-elevation-offset) + var(--classic-active-padding-offset-1));
     
     &::before {
-      box-shadow: inset 0 var(--classic-border-width) var(--black-a3), 0 0 0 var(--classic-border-width) var(--accent-a7);
+      background-color: var(--accent-3);
+      box-shadow: var(--shadow-1);
+
+      /* Theme-level translucent override for active */
+      :where([data-panel-background='translucent'], [data-material='translucent']) & {
+        background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
+      }
+
+      /* Component-level overrides for active */
+      &:where([data-panel-background='solid'], [data-material='solid']) {
+        background-color: var(--accent-3);
+      }
+
+      &:where([data-panel-background='translucent'], [data-material='translucent']) {
+        background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
+      }
     }
   }
 
@@ -212,10 +254,96 @@
 
 .rt-BaseCheckboxRoot:where(.rt-variant-soft) {
   &::before {
-    background-color: var(--accent-a5);
+    background-color: var(--accent-3);
+
+    /* Theme-level translucent override */
+    :where([data-panel-background='translucent'], [data-material='translucent']) & {
+      background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
+    }
+
+    /* Component-level overrides (higher specificity) */
+    &:where([data-panel-background='solid'], [data-material='solid']) {
+      background-color: var(--accent-3);
+    }
+
+    &:where([data-panel-background='translucent'], [data-material='translucent']) {
+      background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
+    }
+  }
+
+  &:where([data-state='checked'], [data-state='indeterminate']) {
+    & :where(.rt-BaseCheckboxIndicator) {
+      color: var(--accent-a11);
+    }
+
+    &:where(.rt-high-contrast) {
+      & :where(.rt-BaseCheckboxIndicator) {
+        color: var(--accent-12);
+      }
+    }
+  }
+
+  &:where(:disabled) {
+    &::before {
+      background-color: var(--gray-a3);
+    }
+    & :where(.rt-BaseCheckboxIndicator) {
+      color: var(--gray-a8);
+    }
+  }
+}
+
+
+
+/* outline */
+
+.rt-BaseCheckboxRoot:where(.rt-variant-outline) {
+  &:where([data-state='unchecked']) {
+    &::before {
+      box-shadow: inset 0 0 0 1px var(--accent-6);
+      color: var(--accent-11);
+
+      /* Theme-level translucent override */
+      :where([data-panel-background='translucent'], [data-material='translucent']) & {
+        box-shadow: inset 0 0 0 1px var(--accent-a6);
+        color: var(--accent-a11);
+      }
+
+      /* Component-level overrides (higher specificity) */
+      &:where([data-panel-background='solid'], [data-material='solid']) {
+        box-shadow: inset 0 0 0 1px var(--accent-6);
+        color: var(--accent-11);
+      }
+
+      &:where([data-panel-background='translucent'], [data-material='translucent']) {
+        box-shadow: inset 0 0 0 1px var(--accent-a6);
+        color: var(--accent-a11);
+      }
+    }
   }
 
   &:where([data-state='checked'], [data-state='indeterminate']) {
+    &::before {
+      background-color: var(--accent-2);
+      box-shadow: inset 0 0 0 1px var(--accent-7);
+
+      /* Theme-level translucent override */
+      :where([data-panel-background='translucent'], [data-material='translucent']) & {
+        background-color: color-mix(in srgb, var(--accent-a2), var(--accent-2) 60%);
+        box-shadow: inset 0 0 0 1px var(--accent-a7);
+      }
+
+      /* Component-level overrides (higher specificity) */
+      &:where([data-panel-background='solid'], [data-material='solid']) {
+        background-color: var(--accent-2);
+        box-shadow: inset 0 0 0 1px var(--accent-7);
+      }
+
+      &:where([data-panel-background='translucent'], [data-material='translucent']) {
+        background-color: color-mix(in srgb, var(--accent-a2), var(--accent-2) 60%);
+        box-shadow: inset 0 0 0 1px var(--accent-a7);
+      }
+    }
     & :where(.rt-BaseCheckboxIndicator) {
       color: var(--accent-a11);
     }
@@ -229,6 +357,7 @@
 
   &:where(:disabled) {
     &::before {
+      box-shadow: inset 0 0 0 1px var(--gray-a7);
       background-color: transparent;
     }
     & :where(.rt-BaseCheckboxIndicator) {
@@ -236,3 +365,74 @@
     }
   }
 }
+
+/* surface */
+
+.rt-BaseCheckboxRoot:where(.rt-variant-surface) {
+  &:where([data-state='unchecked']) {
+    &::before {
+      background-color: var(--accent-2);
+      box-shadow: inset 0 0 0 1px var(--accent-6);
+
+      /* Theme-level translucent override */
+      :where([data-panel-background='translucent'], [data-material='translucent']) & {
+        background-color: color-mix(in srgb, var(--accent-a2), var(--accent-2) 60%);
+        box-shadow: inset 0 0 0 1px var(--accent-a6);
+      }
+
+      /* Component-level overrides (higher specificity) */
+      &:where([data-panel-background='solid'], [data-material='solid']) {
+        background-color: var(--accent-2);
+        box-shadow: inset 0 0 0 1px var(--accent-6);
+      }
+
+      &:where([data-panel-background='translucent'], [data-material='translucent']) {
+        background-color: color-mix(in srgb, var(--accent-a2), var(--accent-2) 60%);
+        box-shadow: inset 0 0 0 1px var(--accent-a6);
+      }
+    }
+  }
+
+  &:where([data-state='checked'], [data-state='indeterminate']) {
+    &::before {
+      background-color: var(--accent-3);
+      box-shadow: inset 0 0 0 1px var(--accent-8);
+
+      /* Theme-level translucent override */
+      :where([data-panel-background='translucent'], [data-material='translucent']) & {
+        background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
+        box-shadow: inset 0 0 0 1px var(--accent-a8);
+      }
+
+      /* Component-level overrides (higher specificity) */
+      &:where([data-panel-background='solid'], [data-material='solid']) {
+        background-color: var(--accent-3);
+        box-shadow: inset 0 0 0 1px var(--accent-8);
+      }
+
+      &:where([data-panel-background='translucent'], [data-material='translucent']) {
+        background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
+        box-shadow: inset 0 0 0 1px var(--accent-a8);
+      }
+    }
+    & :where(.rt-BaseCheckboxIndicator) {
+      color: var(--accent-a11);
+    }
+
+    &:where(.rt-high-contrast) {
+      & :where(.rt-BaseCheckboxIndicator) {
+        color: var(--accent-12);
+      }
+    }
+  }
+
+  &:where(:disabled) {
+    &::before {
+      box-shadow: inset 0 0 0 1px var(--gray-a6);
+      background-color: var(--gray-a2);
+    }
+    & :where(.rt-BaseCheckboxIndicator) {
+      color: var(--gray-a8);
+    }
+  }
+}

package/src/components/_internal/base-checkbox.props.ts

@@ -4,16 +4,19 @@ import { highContrastPropDef } from '../../props/high-contrast.prop.js';
 import type { PropDef } from '../../props/prop-def.js';
 
 const sizes = ['1', '2', '3'] as const;
-const variants = ['classic', 'solid', 'soft'] as const;
+const variants = ['classic', 'solid', 'soft', 'outline', 'surface'] as const;
+const materials = ['solid', 'translucent'] as const;
 
 const baseCheckboxPropDefs = {
   size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
   variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'solid' },
+  material: { type: 'enum', values: materials, default: undefined },
   ...colorPropDef,
   ...highContrastPropDef,
 } satisfies {
   size: PropDef<(typeof sizes)[number]>;
   variant: PropDef<(typeof variants)[number]>;
+  material: PropDef<(typeof materials)[number] | undefined>;
 };
 
 export { baseCheckboxPropDefs };

package/src/components/_internal/base-dialog.css

@@ -56,17 +56,17 @@
   outline: none;
 
   /* Theme-level backdrop filter for auto dialogs */
-  :where([data-panel-background='translucent']) & {
+  :where([data-panel-background='translucent'], [data-material='translucent']) & {
     backdrop-filter: var(--backdrop-filter-dialog);
   }
 
   /* Component-level overrides (when panelBackground prop is explicitly set) */
-  &:where([data-panel-background='solid']) {
+  &:where([data-panel-background='solid'], [data-material='solid']) {
     background-color: var(--color-dialog-solid);
     backdrop-filter: none;
   }
 
-  &:where([data-panel-background='translucent']) {
+  &:where([data-panel-background='translucent'], [data-material='translucent']) {
     background-color: var(--color-dialog-translucent);
     backdrop-filter: var(--backdrop-filter-dialog);
   }
@@ -134,24 +134,55 @@
   .rt-BaseDialogOverlay {
     /* Keep the overlay mounted until the children have animated */
     &:where([data-state='closed']) {
-      animation: rt-dialog-overlay-no-op 160ms cubic-bezier(0.16, 1, 0.3, 1);
+      animation: rt-dialog-overlay-no-op var(--duration-4) var(--ease-spring-1);
     }
     &:where([data-state='open'])::before {
-      animation: rt-fade-in 200ms cubic-bezier(0.16, 1, 0.3, 1);
+      animation: rt-fade-in var(--duration-5) var(--ease-spring-1);
     }
     &:where([data-state='closed'])::before {
       opacity: 0;
-      animation: rt-fade-out 160ms cubic-bezier(0.16, 1, 0.3, 1);
+      animation: rt-fade-out var(--duration-4) var(--ease-spring-1);
     }
   }
 
   .rt-BaseDialogContent {
     &:where([data-state='open']) {
-      animation: rt-dialog-content-show 200ms cubic-bezier(0.16, 1, 0.3, 1);
+      animation: rt-dialog-content-show var(--duration-5) var(--ease-spring-1);
     }
     &:where([data-state='closed']) {
       opacity: 0;
-      animation: rt-dialog-content-hide 100ms cubic-bezier(0.16, 1, 0.3, 1);
+      animation: rt-dialog-content-hide var(--duration-3) var(--ease-spring-1);
     }
   }
 }
+
+/* Safari backdrop-filter fallback */
+@supports not (backdrop-filter: blur(1px)) {
+  :where(.rt-BaseDialogContent[data-material='translucent']),
+  :where(.rt-BaseDialogContent[data-panel-background='translucent']) {
+    background-color: var(--color-dialog-solid);
+  }
+}
+
+/* Forced colors support */
+@media (forced-colors: active) {
+  .rt-BaseDialogContent {
+    border: 1px solid CanvasText;
+  }
+  .rt-BaseDialogOverlay::before {
+    background-color: Canvas;
+  }
+}
+
+/* Screen reader only content */
+.rt-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}

package/src/components/_internal/base-menu.css

@@ -13,10 +13,21 @@
   backdrop-filter: var(--backdrop-filter-panel);
   box-shadow: var(--shadow-5);
   transition: var(--transition-background-blur);
+  
+  /* GPU optimization: limit paint scope and prevent backdrop-filter layering */
+  contain: paint;
+  isolation: isolate;
+
+  /* Optimize backdrop-filter performance during animations */
+  &:where([data-state="open"]) {
+    will-change: transform, opacity;
+  }
 
-  /* Reduced motion support */
+  /* Enhanced reduced motion support */
   @media (prefers-reduced-motion: reduce) {
     transition: none;
+    will-change: auto;
+    backdrop-filter: none; /* Remove blur for motion-sensitive users */
   }
 
   /* Component-level overrides (higher specificity) */
@@ -68,9 +79,16 @@
     cursor: default;
   }
 
-  /* Reduced motion support */
+  /* Focus-visible support */
+  &:where(:focus-visible) {
+    outline: 2px solid var(--focus-8);
+    outline-offset: -2px;
+  }
+
+  /* Enhanced reduced motion support */
   @media (prefers-reduced-motion: reduce) {
     transition: none;
+    backdrop-filter: none; /* Remove any backdrop effects for motion-sensitive users */
   }
 }
 
@@ -303,15 +321,16 @@
   background-color: var(--gray-a6);
 }
 
-/* solid */
+/* solid and soft variants - consolidated to reduce duplication */
 
-.rt-BaseMenuContent:where(.rt-variant-solid) {
+.rt-BaseMenuContent:where(.rt-variant-solid, .rt-variant-soft) {
   & :where(.rt-BaseMenuSubTrigger) {
     transition: var(--transition-menu);
     
-    /* Reduced motion support */
+    /* Enhanced reduced motion support */
     @media (prefers-reduced-motion: reduce) {
       transition: none;
+      backdrop-filter: none; /* Remove backdrop effects for motion-sensitive users */
     }
     
     /* Remove backdrop-filter transitions in translucent mode to prevent flickering */
@@ -319,6 +338,17 @@
       transition: background var(--duration-1) var(--ease-1), color var(--duration-2) var(--ease-1);
     }
   }
+  
+  & :where(.rt-BaseMenuItem) {
+    /* Remove backdrop-filter transitions in translucent mode to prevent flickering */
+    :where([data-panel-background='translucent']) & {
+      transition: background var(--duration-1) var(--ease-1), color var(--duration-2) var(--ease-1);
+    }
+  }
+}
+
+/* solid variant specific styles */
+.rt-BaseMenuContent:where(.rt-variant-solid) {
   & :where(.rt-BaseMenuSubTrigger[data-state='open']) {
     /* Base state: solid gray for solid panels */
     background-color: var(--gray-3);
@@ -341,12 +371,7 @@
       /* No backdrop-filter here to prevent double-blur with container */
     }
   }
-  & :where(.rt-BaseMenuItem) {
-    /* Remove backdrop-filter transitions in translucent mode to prevent flickering */
-    :where([data-panel-background='translucent']) & {
-      transition: background var(--duration-1) var(--ease-1), color var(--duration-2) var(--ease-1);
-    }
-  }
+  
   & :where(.rt-BaseMenuItem[data-highlighted]) {
     background-color: var(--accent-9);
     color: var(--accent-contrast);
@@ -365,6 +390,7 @@
       color: inherit !important;
     }
   }
+  
   &:where(.rt-high-contrast) {
     & :where(.rt-BaseMenuItem[data-highlighted]) {
       background-color: var(--accent-12);
@@ -400,22 +426,8 @@
   }
 }
 
-/* soft */
-
+/* soft variant specific styles */
 .rt-BaseMenuContent:where(.rt-variant-soft) {
-  & :where(.rt-BaseMenuSubTrigger) {
-    transition: var(--transition-menu);
-    
-    /* Reduced motion support */
-    @media (prefers-reduced-motion: reduce) {
-      transition: none;
-    }
-    
-    /* Remove backdrop-filter transitions in translucent mode to prevent flickering */
-    :where([data-panel-background='translucent']) & {
-      transition: background var(--duration-1) var(--ease-1), color var(--duration-2) var(--ease-1);
-    }
-  }
   & :where(.rt-BaseMenuSubTrigger[data-state='open']) {
     /* Base state: solid accent for solid panels */
     background-color: var(--accent-3);
@@ -438,12 +450,7 @@
       /* No backdrop-filter here to prevent double-blur with container */
     }
   }
-  & :where(.rt-BaseMenuItem) {
-    /* Remove backdrop-filter transitions in translucent mode to prevent flickering */
-    :where([data-panel-background='translucent']) & {
-      transition: background var(--duration-1) var(--ease-1), color var(--duration-2) var(--ease-1);
-    }
-  }
+  
   & :where(.rt-BaseMenuItem[data-highlighted]) {
     /* Base state: solid accent for solid panels */
     background-color: var(--accent-4);
@@ -472,3 +479,19 @@
     }
   }
 }
+
+/* Forced colors support */
+@media (forced-colors: active) {
+  .rt-BaseMenuItem:where(:focus-visible) {
+    outline: 2px solid Highlight;
+    outline-offset: 2px;
+  }
+  
+  .rt-BaseMenuContent {
+    border: 1px solid CanvasText;
+  }
+  
+  .rt-BaseMenuSeparator {
+    background-color: CanvasText;
+  }
+}

package/src/components/_internal/base-menu.props.ts

@@ -7,6 +7,7 @@ import type { PropDef } from '../../props/prop-def.js';
 const contentSizes = ['1', '2'] as const;
 const contentVariants = ['solid', 'soft'] as const;
 const panelBackgrounds = ['solid', 'translucent'] as const;
+const materials = ['solid', 'translucent'] as const;
 
 const baseMenuContentPropDefs = {
   size: {
@@ -22,6 +23,14 @@ const baseMenuContentPropDefs = {
     values: contentVariants,
     default: 'solid',
   },
+  material: {
+    type: 'enum',
+    values: materials,
+    default: undefined,
+  },
+  /**
+   * @deprecated Use `material` prop instead. This prop will be removed in a future version.
+   */
   panelBackground: {
     type: 'enum',
     values: panelBackgrounds,
@@ -32,6 +41,7 @@ const baseMenuContentPropDefs = {
 } satisfies {
   size: PropDef<(typeof contentSizes)[number]>;
   variant: PropDef<(typeof contentVariants)[number]>;
+  material: PropDef<(typeof materials)[number] | undefined>;
   panelBackground: PropDef<(typeof panelBackgrounds)[number] | undefined>;
 };