@womp/kookie-ui 0.14.4 → 0.15.0

package/src/components/text-area.css

@@ -21,12 +21,12 @@
    * Component-level material override
    * When component has explicit material prop, override the inherited theme values.
    */
-  &:where([data-material='solid'], [data-panel-background='solid']) {
+  &:where([data-material='solid']) {
     --material-blend: 100%;
     --material-alpha: 0;
   }
 
-  &:where([data-material='translucent'], [data-panel-background='translucent']) {
+  &:where([data-material='translucent']) {
     --material-blend: 60%;
     --material-alpha: 1;
   }
@@ -39,13 +39,12 @@
   font-weight: var(--font-weight-regular);
   font-style: normal;
   text-align: start;
-  transition: var(--transition-text-field);
 
   /* Allows the `resize` property to work on the div */
   overflow: hidden;
 
   /* Theme-level translucent override */
-  :where([data-panel-background='translucent'], [data-material='translucent']) & {
+  :where([data-material='translucent']) & {
     backdrop-filter: var(--backdrop-filter-components);
     --backdrop-filter-components: var(--backdrop-filter-components-enabled);
   }
@@ -54,12 +53,12 @@
   isolation: isolate;
 
   /* Component-level overrides */
-  &:where([data-panel-background='solid'], [data-material='solid']) {
+  &:where([data-material='solid']) {
     backdrop-filter: none;
     --backdrop-filter-components: none;
   }
   
-  &:where([data-panel-background='translucent'], [data-material='translucent']) {
+  &:where([data-material='translucent']) {
     backdrop-filter: var(--backdrop-filter-components);
     --backdrop-filter-components: var(--backdrop-filter-components-enabled);
   }
@@ -72,10 +71,6 @@
   &::selection {
     background-color: var(--v-selection-color, var(--focus-a5));
   }
-
-  @media (prefers-reduced-motion: reduce) {
-    transition: none;
-  }
 }
 
 .rt-TextAreaInput {
@@ -252,7 +247,6 @@
   --v-border-hover-a: var(--accent-a7);
   --v-placeholder-color: var(--gray-a10);
   /* Outline uses a different transition */
-  transition: var(--transition-background-blur);
 }
 
 /* Surface variant palette */
@@ -434,10 +428,9 @@
 
   background-color: var(--color-surface-solid);
   box-shadow: var(--shadow-2);
-  transition: var(--transition-text-field);
 
   /* Translucent theme override */
-  &:where([data-panel-background='translucent'], [data-material='translucent']) {
+  &:where([data-material='translucent']) {
     background-color: var(--color-surface-translucent);
   }
 

package/src/components/text-area.props.tsx

@@ -1,27 +1,22 @@
-import { parseVariant } from '../helpers/parse-variant.js';
 import { colorPropDef } from '../props/color.prop.js';
 import { radiusPropDef } from '../props/radius.prop.js';
 
 import type { PropDef } from '../props/prop-def.js';
 
 const sizes = ['1', '2', '3', '4'] as const;
-const variants = ['raised', 'surface', 'soft', 'outline', 'ghost', 'classic'] as const;
+const variants = ['raised', 'surface', 'soft', 'outline', 'ghost'] as const;
 const resizeValues = ['none', 'vertical', 'horizontal', 'both'] as const;
-const panelBackgrounds = ['solid', 'translucent'] as const;
 const materials = ['solid', 'translucent'] as const;
 
 // prettier-ignore
 const textAreaPropDefs = {
   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 },
+  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'raised' },
   resize: { type: 'enum', className: 'rt-r-resize', values: resizeValues,  responsive: true },
-  panelBackground: { type: 'enum', values: panelBackgrounds, default: undefined },
   material: { type: 'enum', values: materials, default: undefined },
   // Error and validation props
   error: { type: 'boolean', default: false },
   errorMessage: { type: 'string', default: undefined },
-  /** @deprecated Use `error`. Removed in 0.15.0. */
-  isInvalid: { type: 'boolean' },
   required: { type: 'boolean', default: false },
   // Accessibility props
   'aria-describedby': { type: 'string', default: undefined },
@@ -32,11 +27,9 @@ const textAreaPropDefs = {
   size: PropDef<(typeof sizes)[number]>;
   variant: PropDef<(typeof variants)[number]>;
   resize: PropDef<(typeof resizeValues)[number]>;
-  panelBackground: PropDef<(typeof panelBackgrounds)[number] | undefined>;
   material: PropDef<(typeof materials)[number] | undefined>;
   error: PropDef<boolean>;
   errorMessage: PropDef<string | undefined>;
-  isInvalid: PropDef<boolean>;
   required: PropDef<boolean>;
   'aria-describedby': PropDef<string | undefined>;
   'aria-labelledby': PropDef<string | undefined>;

package/src/components/text-area.tsx

@@ -1,4 +1,3 @@
-import { warnDeprecated } from '../helpers/warn-deprecated.js';
 import * as React from 'react';
 import classNames from 'classnames';
 
@@ -21,9 +20,9 @@ interface TextAreaProps
     TextAreaOwnProps {}
 
 const TextArea = React.forwardRef<TextAreaElement, TextAreaProps>((props, forwardedRef) => {
-  const { className, color, radius, panelBackground, material, style, ...textAreaProps } =
+  const { className, color, radius, material, style, ...textAreaProps } =
     extractProps(props, textAreaPropDefs, marginPropDefs);
-  const effectiveMaterial = material || panelBackground;
+  const effectiveMaterial = material;
 
   // Generate unique IDs for accessibility
   const errorId = React.useId();
@@ -31,10 +30,7 @@ const TextArea = React.forwardRef<TextAreaElement, TextAreaProps>((props, forwar
   const { 'aria-describedby': ariaDescribedby, 'aria-labelledby': ariaLabelledby } = textAreaProps;
 
   // Determine invalid state
-  const isInvalid = textAreaProps.error || textAreaProps.isInvalid;
-  if (textAreaProps.isInvalid !== undefined && textAreaProps.isInvalid !== false) {
-    warnDeprecated('`isInvalid` is deprecated and will be removed in 0.15.0. Use `error`, the one name every field uses for an invalid value.');
-  }
+  const isInvalid = textAreaProps.error;
 
   // Build aria-describedby string
   const describedBy = React.useMemo(() => {
@@ -58,7 +54,7 @@ const TextArea = React.forwardRef<TextAreaElement, TextAreaProps>((props, forwar
   const {
     error,
     errorMessage,
-    isInvalid: _isInvalid,
+   
     required,
     'aria-describedby': _ariaDescribedby,
     'aria-labelledby': _ariaLabelledby,
@@ -69,7 +65,6 @@ const TextArea = React.forwardRef<TextAreaElement, TextAreaProps>((props, forwar
     <div
       data-accent-color={color}
       data-radius={radius}
-      data-panel-background={effectiveMaterial}
       data-material={effectiveMaterial}
       className={classNames('rt-TextAreaRoot', className, {
         'rt-error': isInvalid,

package/src/components/text-field.css

@@ -1,7 +1,6 @@
 .rt-TextFieldRoot {
   display: flex;
   align-items: stretch;
-  transition: var(--transition-text-field);
   contain: paint;
 
   font-family: var(--default-font-family);
@@ -10,7 +9,7 @@
   text-align: start;
 
     /* Theme-level translucent override */
-    :where([data-panel-background='translucent'], [data-material='translucent']) & {
+    :where([data-material='translucent']) & {
       backdrop-filter: var(--backdrop-filter-components);
       --backdrop-filter-components: var(--backdrop-filter-components-enabled);
     }
@@ -19,12 +18,12 @@
   isolation: isolate;
 
   /* Component-level overrides */
-  &:where([data-panel-background='solid'], [data-material='solid']) {
+  &:where([data-material='solid']) {
     backdrop-filter: none;
     --backdrop-filter-components: none;
   }
   
-  &:where([data-panel-background='translucent'], [data-material='translucent']) {
+  &:where([data-material='translucent']) {
     backdrop-filter: var(--backdrop-filter-components);
     --backdrop-filter-components: var(--backdrop-filter-components-enabled);
   }
@@ -47,9 +46,6 @@
   }
 
   /* Reduced motion support */
-  @media (prefers-reduced-motion: reduce) {
-    transition: none;
-  }
 }
 
 .rt-TextFieldInput {
@@ -365,19 +361,18 @@
 
   /* Base state: solid colors for solid panels */
   box-shadow: inset 0 0 0 1px var(--accent-6);
-  transition: var(--transition-background-blur);
 
   /* Theme-level translucent override */
-  :where([data-panel-background='translucent'], [data-material='translucent']) & {
+  :where([data-material='translucent']) & {
     box-shadow: inset 0 0 0 1px var(--accent-a6);
   }
 
   /* Component-level overrides (higher specificity) */
-  &:where([data-panel-background='solid'], [data-material='solid']) {
+  &:where([data-material='solid']) {
     box-shadow: inset 0 0 0 1px var(--accent-6);
   }
 
-  &:where([data-panel-background='translucent'], [data-material='translucent']) {
+  &:where([data-material='translucent']) {
     box-shadow: inset 0 0 0 1px var(--accent-a6);
   }
 
@@ -388,18 +383,18 @@
       box-shadow: inset 0 0 0 1px var(--accent-7);
       
       /* Theme-level translucent override for hover */
-      :where([data-panel-background='translucent'], [data-material='translucent']) & {
+      :where([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 for hover */
-      &:where([data-panel-background='solid'], [data-material='solid']) {
+      &:where([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']) {
+      &:where([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);
       }
@@ -444,19 +439,18 @@
   /* Base state: solid surface for solid panels */
   background-color: var(--color-surface-solid);
   box-shadow: var(--shadow-2);
-  transition: var(--transition-text-field);
 
   /* Theme-level translucent override */
-  :where([data-panel-background='translucent'], [data-material='translucent']) & {
+  :where([data-material='translucent']) & {
     background-color: var(--color-surface-translucent);
   }
 
   /* Component-level overrides (higher specificity) */
-  &:where([data-panel-background='solid'], [data-material='solid']) {
+  &:where([data-material='solid']) {
     background-color: var(--color-surface-solid);
   }
 
-  &:where([data-panel-background='translucent'], [data-material='translucent']) {
+  &:where([data-material='translucent']) {
     background-color: var(--color-surface-translucent);
   }
 
@@ -467,16 +461,16 @@
       box-shadow: var(--shadow-2);
 
       /* Theme-level translucent override for hover */
-      :where([data-panel-background='translucent'], [data-material='translucent']) & {
+      :where([data-material='translucent']) & {
         background-color: color-mix(in srgb, var(--accent-a2), var(--accent-2) 60%);
       }
 
       /* Component-level overrides for hover */
-      &:where([data-panel-background='solid'], [data-material='solid']) {
+      &:where([data-material='solid']) {
         background-color: var(--accent-2);
       }
 
-      &:where([data-panel-background='translucent'], [data-material='translucent']) {
+      &:where([data-material='translucent']) {
         background-color: color-mix(in srgb, var(--accent-a2), var(--accent-2) 60%);
       }
     }
@@ -523,19 +517,18 @@
 
   /* Base state: solid color for solid panels */
   background-color: var(--accent-3);
-  transition: var(--transition-background-blur);
 
   /* Theme-level translucent override */
-  :where([data-panel-background='translucent'], [data-material='translucent']) & {
+  :where([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']) {
+  &:where([data-material='solid']) {
     background-color: var(--accent-3);
   }
 
-  &:where([data-panel-background='translucent'], [data-material='translucent']) {
+  &:where([data-material='translucent']) {
     background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
   }
 
@@ -545,16 +538,16 @@
       background-color: var(--accent-4);
       
       /* Theme-level translucent override for hover */
-      :where([data-panel-background='translucent'], [data-material='translucent']) & {
+      :where([data-material='translucent']) & {
         background-color: color-mix(in srgb, var(--accent-a4), var(--accent-4) 60%);
       }
 
       /* Component-level overrides for hover */
-      &:where([data-panel-background='solid'], [data-material='solid']) {
+      &:where([data-material='solid']) {
         background-color: var(--accent-4);
       }
 
-      &:where([data-panel-background='translucent'], [data-material='translucent']) {
+      &:where([data-material='translucent']) {
         background-color: color-mix(in srgb, var(--accent-a4), var(--accent-4) 60%);
       }
     }
@@ -617,16 +610,16 @@
       background-color: var(--accent-3);
       
       /* Theme-level translucent override for hover */
-      :where([data-panel-background='translucent'], [data-material='translucent']) & {
+      :where([data-material='translucent']) & {
         background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
       }
 
       /* Component-level overrides for hover */
-      &:where([data-panel-background='solid'], [data-material='solid']) {
+      &:where([data-material='solid']) {
         background-color: var(--accent-3);
       }
 
-      &:where([data-panel-background='translucent'], [data-material='translucent']) {
+      &:where([data-material='translucent']) {
         background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
       }
 
@@ -643,16 +636,16 @@
     background-color: var(--accent-2);
 
     /* Theme-level translucent override */
-    :where([data-panel-background='translucent'], [data-material='translucent']) & {
+    :where([data-material='translucent']) & {
       background-color: var(--accent-a2);
     }
 
     /* Component-level overrides */
-    &:where([data-panel-background='solid'], [data-material='solid']) {
+    &:where([data-material='solid']) {
       background-color: var(--accent-2);
     }
 
-    &:where([data-panel-background='translucent'], [data-material='translucent']) {
+    &:where([data-material='translucent']) {
       background-color: var(--accent-a2);
     }
 
@@ -684,21 +677,20 @@
   /* Base state: solid accent for solid panels */
   background-color: var(--accent-2);
   box-shadow: inset 0 0 0 1px var(--accent-6);
-  transition: var(--transition-background-blur);
 
   /* Theme-level translucent override */
-  :where([data-panel-background='translucent'], [data-material='translucent']) & {
+  :where([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']) {
+  &:where([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']) {
+  &:where([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);
   }
@@ -724,18 +716,18 @@
       box-shadow: inset 0 0 0 1px var(--accent-7);
       
       /* Theme-level translucent override for hover */
-      :where([data-panel-background='translucent'], [data-material='translucent']) & {
+      :where([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-a7);
       }
 
       /* Component-level overrides for hover */
-      &:where([data-panel-background='solid'], [data-material='solid']) {
+      &:where([data-material='solid']) {
         background-color: var(--accent-3);
         box-shadow: inset 0 0 0 1px var(--accent-7);
       }
 
-      &:where([data-panel-background='translucent'], [data-material='translucent']) {
+      &:where([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-a7);
       }
@@ -749,18 +741,18 @@
     box-shadow: inset 0 0 0 var(--text-field-border-width) var(--accent-8);
 
     /* Theme-level translucent override */
-    :where([data-panel-background='translucent'], [data-material='translucent']) & {
+    :where([data-material='translucent']) & {
       background-color: var(--accent-a2);
       box-shadow: inset 0 0 0 var(--text-field-border-width) var(--accent-a8);
     }
 
     /* Component-level overrides */
-    &:where([data-panel-background='solid'], [data-material='solid']) {
+    &:where([data-material='solid']) {
       background-color: var(--accent-2);
       box-shadow: inset 0 0 0 var(--text-field-border-width) var(--accent-8);
     }
 
-    &:where([data-panel-background='translucent'], [data-material='translucent']) {
+    &:where([data-material='translucent']) {
       background-color: var(--accent-a2);
       box-shadow: inset 0 0 0 var(--text-field-border-width) var(--accent-a8);
     }

package/src/components/text-field.props.tsx

@@ -1,4 +1,3 @@
-import { parseVariant } from '../helpers/parse-variant.js';
 import { colorPropDef } from '../props/color.prop.js';
 import { paddingPropDefs } from '../props/padding.props.js';
 import { radiusPropDef } from '../props/radius.prop.js';
@@ -7,36 +6,30 @@ import { flexPropDefs } from './flex.props.js';
 import type { PropDef } from '../props/prop-def.js';
 
 const sizes = ['1', '2', '3', '4'] as const;
-const variants = ['raised', 'surface', 'soft', 'ghost', 'outline', 'classic'] as const;
-const panelBackgrounds = ['solid', 'translucent'] as const;
+const variants = ['raised', 'surface', 'soft', 'ghost', 'outline'] as const;
 const materials = ['solid', 'translucent'] as const;
 
 const textFieldRootPropDefs = {
   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 },
+  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'raised' },
   // Error and validation props
   error: { type: 'boolean', default: false },
   errorMessage: { type: 'string', default: undefined },
-  /** @deprecated Use `error`. Removed in 0.15.0. */
-  isInvalid: { type: 'boolean' },
   required: { type: 'boolean', default: false },
   // Accessibility props
   'aria-describedby': { type: 'string', default: undefined },
   'aria-labelledby': { type: 'string', default: undefined },
   ...colorPropDef,
   ...radiusPropDef,
-  panelBackground: { type: 'enum', values: panelBackgrounds, default: undefined },
   material: { type: 'enum', values: materials, default: undefined },
 } satisfies {
   size: PropDef<(typeof sizes)[number]>;
   variant: PropDef<(typeof variants)[number]>;
   error: PropDef<boolean>;
   errorMessage: PropDef<string | undefined>;
-  isInvalid: PropDef<boolean>;
   required: PropDef<boolean>;
   'aria-describedby': PropDef<string | undefined>;
   'aria-labelledby': PropDef<string | undefined>;
-  panelBackground: PropDef<(typeof panelBackgrounds)[number] | undefined>;
   material: PropDef<(typeof materials)[number] | undefined>;
 };
 

package/src/components/text-field.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import { warnDeprecated } from '../helpers/warn-deprecated.js';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import classNames from 'classnames';
@@ -25,17 +24,14 @@ type TextFieldInputProps = ComponentPropsWithout<'input', NotInputTextualAttribu
 interface TextFieldRootProps extends TextFieldInputProps, MarginProps, TextFieldRootOwnProps {}
 const TextFieldRoot = React.forwardRef<TextFieldRootElement, TextFieldRootProps>((props, forwardedRef) => {
   const inputRef = React.useRef<HTMLInputElement>(null);
-  const { children, className, color, radius, panelBackground, material, style, ...inputProps } = extractProps(props, textFieldRootPropDefs, marginPropDefs);
-  const effectiveMaterial = material || panelBackground;
+  const { children, className, color, radius, material, style, ...inputProps } = extractProps(props, textFieldRootPropDefs, marginPropDefs);
+  const effectiveMaterial = material;
 
   // Generate unique IDs for accessibility
   const errorId = React.useId();
 
   // Determine invalid state
-  const isInvalid = inputProps.error || inputProps.isInvalid;
-  if (inputProps.isInvalid !== undefined && inputProps.isInvalid !== false) {
-    warnDeprecated('`isInvalid` is deprecated and will be removed in 0.15.0. Use `error`, the one name every field uses for an invalid value.');
-  }
+  const isInvalid = inputProps.error;
 
   const { 'aria-describedby': ariaDescribedby, 'aria-labelledby': ariaLabelledby } = inputProps;
 
@@ -58,7 +54,7 @@ const TextFieldRoot = React.forwardRef<TextFieldRootElement, TextFieldRootProps>
   );
 
   // Filter out our custom props to avoid DOM warnings
-  const { error, errorMessage, isInvalid: _isInvalid, required, 'aria-describedby': _ariaDescribedby, 'aria-labelledby': _ariaLabelledby, ...nativeInputProps } = inputProps;
+  const { error, errorMessage, required, 'aria-describedby': _ariaDescribedby, 'aria-labelledby': _ariaLabelledby, ...nativeInputProps } = inputProps;
 
   // Memoized pointer event handler
   const handlePointerDown = React.useCallback((event: React.PointerEvent) => {
@@ -90,7 +86,6 @@ const TextFieldRoot = React.forwardRef<TextFieldRootElement, TextFieldRootProps>
     <div
       data-accent-color={color}
       data-radius={radius}
-      data-panel-background={effectiveMaterial}
       data-material={effectiveMaterial}
       style={style}
       className={classNames('rt-TextFieldRoot', className, {

package/src/components/theme-panel.tsx

@@ -138,9 +138,6 @@ const ThemePanelImpl = React.forwardRef<ThemePanelImplElement, ThemePanelImplPro
             borderRadius: 'var(--radius-4)',
             backgroundColor: 'var(--color-panel-solid)',
             transformOrigin: 'top center',
-            transitionProperty: 'transform, box-shadow',
-            transitionDuration: '200ms',
-            transitionTimingFunction: open ? 'ease-out' : 'ease-in',
             transform: open ? 'none' : 'translateX(105%)',
             boxShadow: open ? 'var(--shadow-5)' : 'var(--shadow-2)',
             ...props.style,
@@ -188,8 +185,8 @@ const ThemePanelContent = React.forwardRef<ThemePanelContentElement, ThemePanelC
       onAccentColorChange,
       grayColor,
       onGrayColorChange,
-      panelBackground,
-      onPanelBackgroundChange,
+      material,
+      onMaterialChange,
       radius,
       onRadiusChange,
       scaling,
@@ -231,8 +228,7 @@ const ThemePanelContent = React.forwardRef<ThemePanelContentElement, ThemePanelC
         appearance: appearance === themePropDefs.appearance.default ? undefined : appearance,
         accentColor: accentColor === themePropDefs.accentColor.default ? undefined : accentColor,
         grayColor: grayColor === themePropDefs.grayColor.default ? undefined : grayColor,
-        panelBackground:
-          panelBackground === themePropDefs.panelBackground.default ? undefined : panelBackground,
+        material: material === themePropDefs.material.default ? undefined : material,
         radius: radius === themePropDefs.radius.default ? undefined : radius,
         scaling: scaling === themePropDefs.scaling.default ? undefined : scaling,
       } satisfies GetPropDefTypes<typeof themePropDefs>;
@@ -525,7 +521,7 @@ const ThemePanelContent = React.forwardRef<ThemePanelContentElement, ThemePanelC
           {/* Panel background */}
           <ThemePanelSection>
             <Flex align="center" gap="2">
-              <ThemePanelHeading id="panel-background-title">Panel background</ThemePanelHeading>
+              <ThemePanelHeading id="material-title">Material</ThemePanelHeading>
               <Popover.Root>
                 <Popover.Trigger>
                   <IconButton size="1" variant="ghost" color="gray">
@@ -566,18 +562,18 @@ const ThemePanelContent = React.forwardRef<ThemePanelContentElement, ThemePanelC
               rows={{ initial: '2', sm: '1' }}
               gap="2"
               role="group"
-              aria-labelledby="panel-background-title"
+              aria-labelledby="material-title"
             >
-              {themePropDefs.panelBackground.values.map((value) => (
+              {themePropDefs.material.values.map((value) => (
                 <label key={value} className="rt-ThemePanelRadioCard">
                   <input
                     className="rt-ThemePanelRadioCardInput"
                     type="radio"
-                    name="panelBackground"
+                    name="material"
                     value={value}
-                    checked={panelBackground === value}
+                    checked={material === value}
                     onChange={(event) =>
-                      onPanelBackgroundChange(event.target.value as typeof panelBackground)
+                      onMaterialChange(event.target.value as typeof material)
                     }
                   />
                   <Flex align="center" justify="center" height="32px" gap="2">

package/src/components/theme.props.tsx

@@ -5,7 +5,6 @@ import { radii } from '../props/radius.prop.js';
 import type { GetPropDefTypes, PropDef } from '../props/prop-def.js';
 
 const appearances = ['inherit', 'light', 'dark'] as const;
-const panelBackgrounds = ['solid', 'translucent'] as const;
 const materials = ['solid', 'translucent'] as const;
 const scalings = ['90%', '95%', '100%', '105%', '110%'] as const;
 const fontFamilies = ['sans', 'mono', 'serif'] as const;
@@ -41,23 +40,9 @@ const themePropDefs = {
    */
   grayColor: { type: 'enum', values: grayColors, default: 'gray' },
   /**
-   * Controls whether to use a solid or translucent background color on panelled
-   * elements such as Card or Table is solid or translucent.
-   *
-   * @link
-   * https://www.radix-ui.com/themes/docs/theme/visual-style
+   * What surfaces are made of: `solid`, or `translucent` with a backdrop blur.
    */
   material: { type: 'enum', values: materials, default: 'solid' },
-  /**
-   * Controls whether to use a solid or translucent background color on panelled
-   * elements such as Card or Table is solid or translucent.
-   *
-   * @deprecated Use `material` prop instead. This prop will be removed in a future version.
-   *
-   * @link
-   * https://www.radix-ui.com/themes/docs/theme/visual-style
-   */
-  panelBackground: { type: 'enum', values: panelBackgrounds, default: 'solid' },
   /**
    * Sets the default radius of the components.
    *
@@ -95,7 +80,6 @@ const themePropDefs = {
   accentColor: PropDef<(typeof accentColors)[number]>;
   grayColor: PropDef<(typeof grayColors)[number]>;
   material: PropDef<(typeof materials)[number]>;
-  panelBackground: PropDef<(typeof panelBackgrounds)[number]>;
   radius: PropDef<(typeof radii)[number]>;
   scaling: PropDef<(typeof scalings)[number]>;
   fontFamily: PropDef<(typeof fontFamilies)[number]>;