@womp/kookie-ui 0.14.4 → 0.15.0

package/src/components/checkbox-cards.props.tsx

@@ -1,4 +1,3 @@
-import { parseVariant } from '../helpers/parse-variant.js';
 import { cardPropDefs } from './card.props.js';
 import { asChildPropDef } from '../props/as-child.prop.js';
 import { colorPropDef } from '../props/color.prop.js';
@@ -6,26 +5,23 @@ import { gridPropDefs } from './grid.props.js';
 
 import type { PropDef } from '../props/prop-def.js';
 
-const sizes = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'] as const;
+const sizes = ['1', '2', '3', '4', '5'] as const;
 // The same list as Card: a selectable card looks like any other card.
 const variants = cardPropDefs.variant.values;
-const panelBackgrounds = ['solid', 'translucent'] as const;
+const materials = ['solid', 'translucent'] as const;
 
 const checkboxCardsRootPropDefs = {
   ...asChildPropDef,
   size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
-  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'raised', parseValue: parseVariant },
-  material: { type: 'enum', values: panelBackgrounds, default: undefined },
-  /** @deprecated Use `material`. Removed in 0.15.0. */
-  panelBackground: { type: 'enum', values: panelBackgrounds, default: undefined },
+  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'raised' },
+  material: { type: 'enum', values: materials, default: undefined },
   ...colorPropDef,
   columns: { ...gridPropDefs.columns, default: 'repeat(auto-fit, minmax(200px, 1fr))' },
   gap: { ...gridPropDefs.gap, default: '4' },
 } satisfies {
   size: PropDef<(typeof sizes)[number]>;
   variant: PropDef<(typeof variants)[number]>;
-  material: PropDef<(typeof panelBackgrounds)[number] | undefined>;
-  panelBackground: PropDef<(typeof panelBackgrounds)[number] | undefined>;
+  material: PropDef<(typeof materials)[number] | undefined>;
   columns: PropDef<(typeof gridPropDefs.columns.values)[number]>;
   gap: PropDef<(typeof gridPropDefs.gap.values)[number]>;
 };

package/src/components/checkbox-cards.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import { useDeprecatedPanelBackgroundWarning } from '../helpers/use-deprecation-warning.js';
 import * as React from 'react';
 import classNames from 'classnames';
 import { Context } from 'radix-ui/internal';
@@ -47,14 +46,12 @@ interface CheckboxCardsRootProps
 const CheckboxCardsRoot = React.forwardRef<CheckboxCardsRootElement, CheckboxCardsRootProps>(
   (props: ScopedProps<CheckboxCardsRootProps>, forwardedRef) => {
     const themeContext = useThemeContext();
-    useDeprecatedPanelBackgroundWarning(props.panelBackground);
-    const panelBackground = props.material ?? props.panelBackground ?? themeContext.material ?? themeContext.panelBackground;
+    const resolvedMaterial = props.material ?? themeContext.material;
     const {
       __scopeCheckboxCards,
       className,
       color,
       material: _material,
-      panelBackground: _,
       ...rootProps
     } = extractProps(props, checkboxCardsRootPropDefs, marginPropDefs);
     const checkboxGroupScope = useCheckboxGroupScope(__scopeCheckboxCards);
@@ -68,8 +65,7 @@ const CheckboxCardsRoot = React.forwardRef<CheckboxCardsRootElement, CheckboxCar
           <CheckboxGroupPrimitive.Root
             {...checkboxGroupScope}
             data-accent-color={color}
-            data-panel-background={panelBackground}
-            data-material={panelBackground}
+            data-material={resolvedMaterial}
             {...rootProps}
             ref={forwardedRef}
             className={classNames('rt-CheckboxCardsRoot', className)}

package/src/components/checkbox.tsx

@@ -27,7 +27,6 @@ const Checkbox = React.forwardRef<CheckboxElement, CheckboxProps>((props, forwar
   const {
     className,
     color,
-    material,
     checked: checkedProp,
     defaultChecked: defaultCheckedProp,
     onCheckedChange,
@@ -43,7 +42,6 @@ const Checkbox = React.forwardRef<CheckboxElement, CheckboxProps>((props, forwar
   return (
     <CheckboxPrimitive.Root
       data-accent-color={color}
-      data-material={material}
       {...checkboxProps}
       defaultChecked={defaultCheckedProp}
       checked={checked}

package/src/components/code.css

@@ -33,6 +33,11 @@
 
 @breakpoints {
   .rt-Code {
+    &:where(.rt-r-size-0) {
+      font-size: calc(var(--font-size-0) * var(--code-variant-font-size-adjust));
+      line-height: var(--line-height-0);
+      --letter-spacing: var(--letter-spacing-0);
+    }
     &:where(.rt-r-size-1) {
       font-size: calc(var(--font-size-1) * var(--code-variant-font-size-adjust));
       line-height: var(--line-height-1);
@@ -78,6 +83,21 @@
       line-height: var(--line-height-9);
       --letter-spacing: var(--letter-spacing-9);
     }
+    &:where(.rt-r-size-10) {
+      font-size: calc(var(--font-size-10) * var(--code-variant-font-size-adjust));
+      line-height: var(--line-height-10);
+      --letter-spacing: var(--letter-spacing-10);
+    }
+    &:where(.rt-r-size-11) {
+      font-size: calc(var(--font-size-11) * var(--code-variant-font-size-adjust));
+      line-height: var(--line-height-11);
+      --letter-spacing: var(--letter-spacing-11);
+    }
+    &:where(.rt-r-size-12) {
+      font-size: calc(var(--font-size-12) * var(--code-variant-font-size-adjust));
+      line-height: var(--line-height-12);
+      --letter-spacing: var(--letter-spacing-12);
+    }
   }
 }
 

package/src/components/code.props.tsx

@@ -7,7 +7,7 @@ import { weightPropDef } from '../props/weight.prop.js';
 
 import type { PropDef } from '../props/prop-def.js';
 
-const sizes = ['1', '2', '3', '4', '5', '6', '7', '8', '9'] as const;
+const sizes = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'] as const;
 const variants = ['solid', 'soft', 'outline', 'ghost'] as const;
 
 const codePropDefs = {

package/src/components/combobox.css

@@ -89,24 +89,12 @@
  * =============================================================================
  */
 
-/* Solid variant. Gray fills with step 12 through the solid tokens */
-.rt-BaseMenuContent:where(.rt-variant-solid) :where(.rt-ComboboxItem[data-selected='true']) {
-  background-color: var(--accent-solid);
-  color: var(--accent-solid-contrast);
-}
-
-/* Muted text follows the highlight colour. Badges keep their own colours.
- * Same specificity as the Text and base-menu colour rules; wins by coming later. */
-:where(.rt-BaseMenuContent.rt-variant-solid) .rt-ComboboxItem:where([data-selected='true']) :where(.rt-Text, [data-accent-color='gray']:not(.rt-Badge)) {
-  color: inherit;
-}
-
 /* Soft variant */
 .rt-BaseMenuContent:where(.rt-variant-soft) :where(.rt-ComboboxItem[data-selected='true']) {
   background-color: var(--accent-4);
 }
 
-.rt-BaseMenuContent:where(.rt-variant-soft):where([data-panel-background='translucent'], [data-material='translucent'])
+.rt-BaseMenuContent:where(.rt-variant-soft):where([data-material='translucent'])
   :where(.rt-ComboboxItem[data-selected='true']) {
   background-color: var(--accent-a4);
 }
@@ -141,3 +129,16 @@
     outline-offset: -2px;
   }
 }
+
+/* The highlight is solid when the system asks for more contrast. Gray fills with step 12. */
+@media (prefers-contrast: more) {
+  .rt-BaseMenuContent:where(.rt-variant-soft) :where(.rt-ComboboxItem[data-selected='true']) {
+    background-color: var(--accent-solid);
+    color: var(--accent-solid-contrast);
+  }
+
+  /* Muted text follows the highlight colour. Badges keep their own colours. */
+  :where(.rt-BaseMenuContent.rt-variant-soft) .rt-ComboboxItem:where([data-selected='true']) :where(.rt-Text, [data-accent-color='gray']:not(.rt-Badge)) {
+    color: inherit;
+  }
+}

package/src/components/combobox.props.tsx

@@ -1,4 +1,3 @@
-import { parseVariant } from '../helpers/parse-variant.js';
 import { colorPropDef } from '../props/color.prop.js';
 import { radiusPropDef } from '../props/radius.prop.js';
 import { widthPropDefs } from '../props/width.props.js';
@@ -17,18 +16,13 @@ const comboboxRootPropDefs = {
   size: PropDef<(typeof sizes)[number]>;
 };
 
-const triggerVariants = ['raised', 'surface', 'soft', 'outline', 'ghost', 'classic'] as const;
+const triggerVariants = ['raised', 'surface', 'soft', 'outline', 'ghost'] as const;
 
 /**
  * Token-aware props specific to Combobox.Trigger.
  */
 const comboboxTriggerPropDefs = {
-  variant: { type: 'enum', className: 'rt-variant', values: triggerVariants, default: 'raised', parseValue: parseVariant },
-  panelBackground: {
-    type: 'enum',
-    className: 'rt-panel-background',
-    values: ['solid', 'translucent'],
-  },
+  variant: { type: 'enum', className: 'rt-variant', values: triggerVariants, default: 'raised' },
   material: { type: 'enum', values: ['solid', 'translucent'] },
   error: { type: 'boolean' },
   loading: { type: 'boolean' },
@@ -40,7 +34,6 @@ const comboboxTriggerPropDefs = {
   placeholder: { type: 'string' },
 } satisfies {
   variant: PropDef<(typeof triggerVariants)[number]>;
-  panelBackground: PropDef<'solid' | 'translucent'>;
   material: PropDef<'solid' | 'translucent'>;
   error: PropDef<boolean>;
   loading: PropDef<boolean>;
@@ -52,7 +45,6 @@ const comboboxTriggerPropDefs = {
 
 // The list is a menu, and menus stop at size 3.
 const contentSizes = ['1', '2', '3'] as const;
-const contentVariants = ['solid', 'soft'] as const;
 const materials = ['solid', 'translucent'] as const;
 
 /**
@@ -60,20 +52,15 @@ const materials = ['solid', 'translucent'] as const;
  */
 const comboboxContentPropDefs = {
   size: { type: 'enum', className: 'rt-r-size', values: contentSizes, default: '2', responsive: true },
-  variant: { type: 'enum', className: 'rt-variant', values: contentVariants, default: 'soft' },
   ...colorPropDef,
   material: { type: 'enum', values: materials, default: undefined },
-  /** @deprecated Use `material`. */
-  panelBackground: { type: 'enum', values: materials, default: undefined },
   width: widthPropDefs.width,
   minWidth: widthPropDefs.minWidth,
   maxWidth: { ...widthPropDefs.maxWidth, default: '480px' },
   ...heightPropDefs,
 } satisfies {
   size: PropDef<(typeof contentSizes)[number]>;
-  variant: PropDef<(typeof contentVariants)[number]>;
   material: PropDef<(typeof materials)[number] | undefined>;
-  panelBackground: PropDef<(typeof materials)[number] | undefined>;
   width: PropDef<string>;
   minWidth: PropDef<string>;
   maxWidth: PropDef<string>;

package/src/components/combobox.tsx

@@ -25,7 +25,6 @@ import { useCallbackRef, useComposedRefs, useControllableState, useLayoutEffect
 import { Command as CommandPrimitive, useCommandState } from 'cmdk';
 
 import { extractProps } from '../helpers/extract-props.js';
-import { useDeprecatedPanelBackgroundWarning } from '../helpers/use-deprecation-warning.js';
 import { comboboxRootPropDefs, comboboxTriggerPropDefs, comboboxContentPropDefs } from './combobox.props.js';
 import { marginPropDefs } from '../props/margin.props.js';
 import { ChevronDownIcon, ThickCheckIcon } from './icons.js';
@@ -132,7 +131,6 @@ const ComboboxItemContext = React.createContext<ComboboxItemContextValue | null>
 
 /** Values resolved by Content and read by Input and List. */
 interface ComboboxContentContextValue {
-  variant: 'solid' | 'soft';
   sizeClassName?: string;
   color?: string;
   material?: string;
@@ -342,9 +340,7 @@ const ComboboxTrigger = React.forwardRef<ComboboxTriggerElement, ComboboxTrigger
     ...triggerProps
   } = extractProps({ size: ctx.size, ...props }, triggerSizingPropDefs, comboboxTriggerPropDefs, marginPropDefs);
 
-  // `panelBackground` has a className prop def, so extractProps strips it.
-  const { panelBackground } = props;
-  const resolvedMaterial = material ?? panelBackground;
+  const resolvedMaterial = material;
   const isDisabled = disabled ?? ctx.disabled;
   const resolvedColor = color ?? ctx.color;
   // Read-only and loading triggers stay focusable but do not open.
@@ -412,7 +408,6 @@ const ComboboxTrigger = React.forwardRef<ComboboxTriggerElement, ComboboxTrigger
       <button
         data-accent-color={resolvedColor}
         data-radius={radius}
-        data-panel-background={resolvedMaterial}
         data-material={resolvedMaterial}
         data-error={error}
         data-loading={loading}
@@ -493,18 +488,11 @@ const ComboboxContent = React.forwardRef<ComboboxContentElement, ComboboxContent
   const ctx = useComboboxContext('Content');
   const themeContext = useThemeContext();
 
-  useDeprecatedPanelBackgroundWarning(props.panelBackground);
 
-  const material = props.material ?? props.panelBackground ?? themeContext.material ?? themeContext.panelBackground;
+  const material = props.material ?? themeContext.material;
   // Menus stop at size 3; a size 4 field opens a size 3 list.
   const rootSize = ctx.size === '4' ? '3' : ctx.size;
   const size = props.size ?? rootSize ?? comboboxContentPropDefs.size.default;
-  if (props.variant !== undefined) {
-    warnDeprecated(
-      'The menu `variant` prop is deprecated and will be removed in 0.15.0. Menus highlight with a soft fill, and a solid one when the person asks for more contrast.',
-    );
-  }
-  const variant = props.variant ?? comboboxContentPropDefs.variant.default;
 
   const {
     className,
@@ -513,12 +501,11 @@ const ComboboxContent = React.forwardRef<ComboboxContentElement, ComboboxContent
     forceMount,
     container,
     material: _material,
-    panelBackground: _panelBackground,
     onOpenAutoFocus,
     'aria-label': _ariaLabel,
     'aria-labelledby': ariaLabelledByProp,
     ...contentProps
-  } = extractProps({ ...props, size, variant }, comboboxContentPropDefs);
+  } = extractProps({ ...props, size }, comboboxContentPropDefs);
 
   const resolvedColor = color || ctx.color || themeContext.accentColor;
 
@@ -538,14 +525,13 @@ const ComboboxContent = React.forwardRef<ComboboxContentElement, ComboboxContent
 
   const contentContextValue = React.useMemo<ComboboxContentContextValue>(
     () => ({
-      variant,
       // Responsive-aware size class for the search field (never String() a responsive object).
       sizeClassName: extractProps({ size }, contentSizePropDefs).className || undefined,
       color: resolvedColor,
       material,
       label,
     }),
-    [variant, size, resolvedColor, material, label],
+    [size, resolvedColor, material, label],
   );
 
   const commandRef = React.useRef<HTMLDivElement>(null);
@@ -571,7 +557,6 @@ const ComboboxContent = React.forwardRef<ComboboxContentElement, ComboboxContent
         <PopoverPrimitive.Content
           data-accent-color={resolvedColor}
           data-material={material}
-          data-panel-background={material}
           align="start"
           sideOffset={4}
           collisionPadding={10}
@@ -581,7 +566,8 @@ const ComboboxContent = React.forwardRef<ComboboxContentElement, ComboboxContent
           forceMount={forceMount ? true : undefined}
           onOpenAutoFocus={handleOpenAutoFocus}
           ref={forwardedRef}
-          className={classNames('rt-PopperContent', 'rt-BaseMenuContent', 'rt-ComboboxContent', className)}
+          className={classNames('rt-PopperContent', 'rt-BaseMenuContent',
+          'rt-variant-soft', 'rt-ComboboxContent', className)}
         >
           <ComboboxContentContext.Provider value={contentContextValue}>
             <CommandPrimitive
@@ -623,8 +609,7 @@ const ComboboxInput = React.forwardRef<ComboboxInputElement, ComboboxInputProps>
     const search = React.useContext(ComboboxSearchContext);
     const contentContext = useComboboxContentContext();
 
-    const contentVariant = contentContext?.variant ?? 'soft';
-    const textFieldVariant = inputVariant ?? (contentVariant === 'solid' ? 'surface' : 'soft');
+    const textFieldVariant = inputVariant ?? 'soft';
 
     // The search text lives in Root; only this component subscribes to it.
     const searchValue = value ?? search?.value ?? '';
@@ -635,7 +620,6 @@ const ComboboxInput = React.forwardRef<ComboboxInputElement, ComboboxInputProps>
         className={classNames('rt-TextFieldRoot', 'rt-ComboboxInputRoot', contentContext?.sizeClassName, `rt-variant-${textFieldVariant}`)}
         data-accent-color={contentContext?.color}
         data-material={contentContext?.material}
-        data-panel-background={contentContext?.material}
       >
         {startAdornment ? <div className="rt-TextFieldSlot">{startAdornment}</div> : null}
         <CommandPrimitive.Input

package/src/components/context-menu.tsx

@@ -22,7 +22,6 @@ import { Theme, useThemeContext } from './theme.js';
 import { ThickCheckIcon, ThickChevronRightIcon, ThickDotIcon } from './icons.js';
 import { extractProps } from '../helpers/extract-props.js';
 import { requireReactElement } from '../helpers/require-react-element.js';
-import { useDeprecatedPanelBackgroundWarning } from '../helpers/use-deprecation-warning.js';
 import { MenuProvider } from './_internal/menu-context.js';
 import {
   MenuShortcut,
@@ -59,7 +58,6 @@ type ContextMenuSurfaceProps = GetPropDefTypes<typeof contextMenuContentPropDefs
 
 type ContextMenuContentContextValue = {
   size?: ContextMenuSurfaceProps['size'];
-  variant?: ContextMenuSurfaceProps['variant'];
   color?: ContextMenuSurfaceProps['color'];
   material?: ContextMenuSurfaceProps['material'];
 };
@@ -83,12 +81,10 @@ const ContextMenuContent = React.forwardRef<ContextMenuContentElement, ContextMe
   (props, forwardedRef) => {
     const themeContext = useThemeContext();
 
-    useDeprecatedPanelBackgroundWarning(props.panelBackground);
 
-    const material = resolveMenuMaterial(props.material, props.panelBackground, themeContext);
+    const material = resolveMenuMaterial(props.material, themeContext);
     const {
       size = contextMenuContentPropDefs.size.default,
-      variant = contextMenuContentPropDefs.variant.default,
     } = props;
     const {
       className,
@@ -97,19 +93,17 @@ const ContextMenuContent = React.forwardRef<ContextMenuContentElement, ContextMe
       container,
       forceMount,
       material: _material,
-      panelBackground: _panelBackground,
       submenuBehavior: _submenuBehavior,
       virtualized = false,
       ...contentProps
     } = extractProps(props, contextMenuContentPropDefs);
 
-    if (props.variant !== undefined) warnDeprecated('The menu `variant` prop is deprecated and will be removed in 0.15.0. Menus highlight with a soft fill, and a solid one when the person asks for more contrast.');
     const resolvedColor = color || themeContext.accentColor;
     const scalarSize = useResolvedResponsiveValue(size, contextMenuContentPropDefs.size.default);
 
     const contextValue = React.useMemo(
-      () => ({ size, variant, color: resolvedColor, material }),
-      [size, variant, resolvedColor, material],
+      () => ({ size, color: resolvedColor, material }),
+      [size, resolvedColor, material],
     );
 
     const body = (
@@ -124,7 +118,6 @@ const ContextMenuContent = React.forwardRef<ContextMenuContentElement, ContextMe
           <ContextMenuPrimitive.Content
             data-accent-color={resolvedColor}
             data-material={material}
-            data-panel-background={material}
             alignOffset={getMenuAlignOffset(scalarSize, themeContext.scaling)}
             collisionPadding={10}
             {...contentProps}
@@ -133,6 +126,7 @@ const ContextMenuContent = React.forwardRef<ContextMenuContentElement, ContextMe
             className={classNames(
               'rt-PopperContent',
               'rt-BaseMenuContent',
+          'rt-variant-soft',
               'rt-ContextMenuContent',
               className,
             )}
@@ -363,14 +357,12 @@ const ContextMenuSubContent = React.forwardRef<
   const parent = React.useContext(ContextMenuContentContext);
   const themeContext = useThemeContext();
 
-  useDeprecatedPanelBackgroundWarning(props.panelBackground);
 
   // A submenu inherits the parent surface, and its own props win.
   const size = props.size ?? parent.size;
-  const variant = props.variant ?? parent.variant;
   const color = props.color ?? parent.color;
   const material =
-    props.material ?? props.panelBackground ?? parent.material ?? resolveMenuMaterial(undefined, undefined, themeContext);
+    props.material ?? parent.material ?? resolveMenuMaterial(undefined, themeContext);
 
   const {
     className,
@@ -379,16 +371,15 @@ const ContextMenuSubContent = React.forwardRef<
     forceMount,
     color: _color,
     material: _material,
-    panelBackground: _panelBackground,
     virtualized = false,
     ...subContentProps
-  } = extractProps({ ...props, size, variant }, contextMenuSubContentPropDefs);
+  } = extractProps({ ...props, size }, contextMenuSubContentPropDefs);
 
   const scalarSize = useResolvedResponsiveValue(size, contextMenuSubContentPropDefs.size.default);
 
   const contextValue = React.useMemo(
-    () => ({ size, variant, color, material }),
-    [size, variant, color, material],
+    () => ({ size, color, material }),
+    [size, color, material],
   );
 
   const body = (
@@ -403,7 +394,6 @@ const ContextMenuSubContent = React.forwardRef<
         <ContextMenuPrimitive.SubContent
           data-accent-color={color}
           data-material={material}
-          data-panel-background={material}
           alignOffset={getMenuAlignOffset(scalarSize, themeContext.scaling)}
           // Side offset accounts for the outer solid box-shadow
           sideOffset={1}
@@ -414,6 +404,7 @@ const ContextMenuSubContent = React.forwardRef<
           className={classNames(
             'rt-PopperContent',
             'rt-BaseMenuContent',
+          'rt-variant-soft',
             'rt-BaseMenuSubContent',
             'rt-ContextMenuContent',
             'rt-ContextMenuSubContent',

package/src/components/dialog.props.tsx

@@ -7,7 +7,6 @@ import type { PropDef, GetPropDefTypes } from '../props/prop-def.js';
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const alignValues = ['start', 'center'] as const;
 const contentSizes = ['1', '2', '3', '4'] as const;
-const panelBackgrounds = ['solid', 'translucent'] as const;
 const materials = ['solid', 'translucent'] as const;
 
 const dialogContentPropDefs = {
@@ -25,7 +24,6 @@ const dialogContentPropDefs = {
     default: '3',
     responsive: true,
   },
-  panelBackground: { type: 'enum', values: panelBackgrounds, default: undefined },
   material: { type: 'enum', values: materials, default: undefined },
   width: widthPropDefs.width,
   minWidth: widthPropDefs.minWidth,
@@ -34,7 +32,6 @@ const dialogContentPropDefs = {
 } satisfies {
   align: PropDef<(typeof alignValues)[number]>;
   size: PropDef<(typeof contentSizes)[number]>;
-  panelBackground: PropDef<(typeof panelBackgrounds)[number] | undefined>;
   material: PropDef<(typeof materials)[number] | undefined>;
   width: PropDef<string>;
   minWidth: PropDef<string>;

package/src/components/dialog.tsx

@@ -7,7 +7,6 @@ import { Heading } from './heading.js';
 import { Text } from './text.js';
 import { Theme } from './theme.js';
 import { extractProps } from '../helpers/extract-props.js';
-import { useDeprecatedPanelBackgroundWarning } from '../helpers/use-deprecation-warning.js';
 import { requireReactElement } from '../helpers/require-react-element.js';
 import { useBodyPointerEventsCleanup } from '../hooks/use-body-pointer-events-cleanup.js';
 
@@ -39,12 +38,10 @@ DialogTrigger.displayName = 'Dialog.Trigger';
 // them on every render.
 const {
   align: alignPropDef,
-  panelBackground: panelBackgroundPropDef,
   material: materialPropDef,
   ...contentPropDefs
 } = dialogContentPropDefs;
 const alignPropDefs = { align: alignPropDef };
-const panelBackgroundPropDefs = { panelBackground: panelBackgroundPropDef };
 const materialPropDefs = { material: materialPropDef };
 
 type DialogContentElement = React.ElementRef<typeof DialogPrimitive.Content>;
@@ -57,27 +54,19 @@ const DialogContent = React.forwardRef<DialogContentElement, DialogContentProps>
   ({ align, ...props }, forwardedRef) => {
     const { className: alignClassName } = extractProps({ align }, alignPropDefs);
 
-    // Extract panelBackground and material from props
-    const { panelBackground: extractedPanelBackground } = extractProps(
-      { panelBackground: props.panelBackground },
-      panelBackgroundPropDefs,
-    );
 
     const { material: extractedMaterial } = extractProps(
       { material: props.material },
       materialPropDefs,
     );
 
-    useDeprecatedPanelBackgroundWarning(props.panelBackground);
 
-    // Material takes precedence over the deprecated panelBackground
-    const materialValue = extractedMaterial ?? extractedPanelBackground;
+    const materialValue = extractedMaterial;
 
     const {
       className,
       forceMount,
       container,
-      panelBackground: _,
       material: __,
       ...contentProps
     } = extractProps(props, contentPropDefs);
@@ -155,7 +144,6 @@ const DialogContent = React.forwardRef<DialogContentElement, DialogContentProps>
                   ref={combinedRef}
                   className={classNames('rt-BaseDialogContent', 'rt-DialogContent', className)}
                   data-material={materialValue}
-                  data-panel-background={materialValue}
                   tabIndex={-1}
                   role="dialog"
                   aria-modal="true"

package/src/components/dropdown-menu.css

@@ -104,24 +104,3 @@
  * DRILL-DOWN ANIMATIONS                                                                           *
  *                                                                                                 *
  ***************************************************************************************************/
-
-@media (prefers-reduced-motion: no-preference) {
-  .rt-DropdownMenuDrillDownPanel:where([data-drill-down-active][data-animation-direction='forward']) {
-    animation: rt-drill-down-enter-from-right var(--motion-duration-small) var(--motion-ease-smooth);
-  }
-
-  .rt-DropdownMenuDrillDownPanel:where([data-drill-down-active][data-animation-direction='backward']),
-  .rt-DropdownMenuDrillDownRoot:where([data-submenu-behavior='drill-down']:not([data-drill-down-active])[data-animation-direction='backward']) {
-    animation: rt-drill-down-enter-from-left var(--motion-duration-small) var(--motion-ease-smooth);
-  }
-
-  /* Mirror the slide direction in right-to-left layouts */
-  :where([dir='rtl']) .rt-DropdownMenuDrillDownPanel:where([data-drill-down-active][data-animation-direction='forward']) {
-    animation-name: rt-drill-down-enter-from-left;
-  }
-
-  :where([dir='rtl']) .rt-DropdownMenuDrillDownPanel:where([data-drill-down-active][data-animation-direction='backward']),
-  :where([dir='rtl']) .rt-DropdownMenuDrillDownRoot:where([data-submenu-behavior='drill-down']:not([data-drill-down-active])[data-animation-direction='backward']) {
-    animation-name: rt-drill-down-enter-from-right;
-  }
-}