@womp/kookie-ui 0.14.4 → 0.15.0

package/src/components/_internal/shell-store.tsx

@@ -3,8 +3,8 @@
 /**
  * The Shell's state model (0.8.0), ported from kookie-ui-v2's Shell.
  *
- * - State lives on the pane. Each pane holds `auto | open | closed` (the
- *   Sidebar adds `thin`). `auto` means untouched: the stylesheet decides what
+ * - State lives on the pane. Each pane holds `auto | open | closed`.
+ *   `auto` means untouched: the stylesheet decides what
  *   it shows at each breakpoint, so first paint is right with no script, the
  *   server and the client render the same markup, and no open-state callback
  *   can fire on mount or on a resize.
@@ -26,8 +26,8 @@ import type { Breakpoint, PaneName, PresentationValue } from '../shell.types.js'
 
 export type Table<T> = Record<Breakpoint, T>;
 
-/** What a pane shows: open, open at its thin width (Sidebar only), or closed. */
-export type PaneValue = 'open' | 'thin' | 'closed';
+/** What a pane shows: open or closed. */
+export type PaneValue = 'open' | 'closed';
 
 type ResponsiveInput<T> = T | Partial<Record<Breakpoint, T>> | undefined;
 

package/src/components/accordion.css

@@ -5,7 +5,7 @@
   isolation: isolate;
 
   /* 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);
   }
@@ -14,12 +14,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,24 +47,23 @@
   /* 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);
     backdrop-filter: var(--backdrop-filter-components);
   }
 
   /* 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);
     backdrop-filter: none;
     --backdrop-filter-components: none;
   }
 
-  &: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);
     backdrop-filter: var(--backdrop-filter-components);
@@ -76,22 +75,21 @@
   /* 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);
     backdrop-filter: var(--backdrop-filter-components);
   }
 
   /* Component-level overrides (higher specificity) */
-  &:where([data-panel-background='solid'], [data-material='solid']) {
+  &:where([data-material='solid']) {
     background-color: var(--color-surface-solid);
     backdrop-filter: none;
     --backdrop-filter-components: none;
   }
 
-  &:where([data-panel-background='translucent'], [data-material='translucent']) {
+  &:where([data-material='translucent']) {
     background-color: var(--color-surface-translucent);
     backdrop-filter: var(--backdrop-filter-components);
     --backdrop-filter-components: var(--backdrop-filter-components-enabled);
@@ -101,22 +99,21 @@
 :where(.rt-AccordionRoot:where(.rt-variant-soft)) {
   /* Base state: solid color for solid panels */
   background-color: var(--accent-2);
-  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%);
     backdrop-filter: var(--backdrop-filter-components);
   }
 
   /* Component-level overrides (higher specificity) */
-  &:where([data-panel-background='solid'], [data-material='solid']) {
+  &:where([data-material='solid']) {
     background-color: var(--accent-2);
     backdrop-filter: none;
     --backdrop-filter-components: none;
   }
 
-  &: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%);
     backdrop-filter: var(--backdrop-filter-components);
     --backdrop-filter-components: var(--backdrop-filter-components-enabled);
@@ -126,21 +123,20 @@
 :where(.rt-AccordionRoot:where(.rt-variant-outline)) {
   /* 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);
     backdrop-filter: none;
     --backdrop-filter-components: none;
   }
 
-  &:where([data-panel-background='translucent'], [data-material='translucent']) {
+  &:where([data-material='translucent']) {
     box-shadow: inset 0 0 0 1px var(--accent-a6);
     backdrop-filter: var(--backdrop-filter-components);
     --backdrop-filter-components: var(--backdrop-filter-components-enabled);
@@ -184,8 +180,6 @@
   }
 }
 
-
-
 /* Accordion Item */
 .rt-AccordionItem {
   overflow: hidden;
@@ -218,7 +212,6 @@
   line-height: var(--line-height-3);
   color: var(--gray-12);
   cursor: pointer;
-  transition: var(--transition-accordion-trigger);
 }
 
 /* Size variants */
@@ -246,15 +239,9 @@
 @media (hover: hover) {
   :where(.rt-AccordionTrigger:hover) {
     background-color: var(--gray-a3);
-    transform: translateY(-1px);
   }
 }
 
-:where(.rt-AccordionTrigger:active) {
-  transform: translateY(0px) scale(0.98);
-  transition: var(--transition-accordion-trigger-active);
-}
-
 /* Trigger colour reads the loud ink in every variant; gray resolves to step 12 */
 :where(.rt-AccordionRoot:where(.rt-variant-soft, .rt-variant-outline, .rt-variant-surface, .rt-variant-ghost, .rt-variant-raised)) .rt-AccordionTrigger {
   color: var(--accent-ink);
@@ -267,16 +254,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%);
     }
   }
@@ -285,7 +272,6 @@
 :where(.rt-AccordionRoot:where(.rt-variant-raised):focus-within) {
   outline: 2px solid var(--focus-8);
   outline-offset: 2px;
-  transition: var(--transition-text-field);
 }
 
 @media (hover: hover) {
@@ -293,16 +279,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%);
     }
   }
@@ -314,18 +300,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);
     }
@@ -338,18 +324,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);
     }
@@ -362,16 +348,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%);
     }
   
@@ -446,39 +432,6 @@
 }
 
 /* Content animations */
-:where(.rt-AccordionContent[data-state="open"]) {
-  animation: rt-slide-down var(--motion-duration-small) var(--motion-spring-snappy);
-}
-
-:where(.rt-AccordionContent[data-state="closed"]) {
-  animation: rt-slide-up var(--motion-duration-micro) var(--motion-spring-snappy);
-}
-
-@keyframes rt-slide-down {
-  0% {
-    height: 0;
-    opacity: 0;
-    transform: translateY(-4px) scaleY(0.98);
-  }
-  100% {
-    height: var(--radix-accordion-content-height);
-    opacity: 1;
-    transform: translateY(0) scaleY(1);
-  }
-}
-
-@keyframes rt-slide-up {
-  0% {
-    height: var(--radix-accordion-content-height);
-    opacity: 1;
-    transform: translateY(0) scaleY(1);
-  }
-  100% {
-    height: 0;
-    opacity: 0;
-    transform: translateY(-4px) scaleY(0.98);
-  }
-}
 
 /* Color accent support */
 @media (hover: hover) {
@@ -488,12 +441,6 @@
 }
 
 /* Reduced motion */
-@media (prefers-reduced-motion: reduce) {
-  :where(.rt-AccordionContent[data-state="open"]),
-  :where(.rt-AccordionContent[data-state="closed"]) {
-    animation: none;
-  }
-}
 
 /* Safari backdrop-filter fallback */
 @supports not (backdrop-filter: blur(1px)) {
@@ -538,13 +485,13 @@
   :where(.rt-AccordionRoot.rt-variant-soft:hover) {
     background-color: var(--accent-4);
   }
-  :where([data-panel-background='translucent'], [data-material='translucent']) :where(.rt-AccordionRoot.rt-variant-soft:hover) {
+  :where([data-material='translucent']) :where(.rt-AccordionRoot.rt-variant-soft:hover) {
     background-color: color-mix(in srgb, var(--accent-a4), var(--accent-4) 60%);
   }
-  :where(.rt-AccordionRoot.rt-variant-soft[data-panel-background='solid'], .rt-AccordionRoot.rt-variant-soft[data-material='solid']:hover) {
+  :where(.rt-AccordionRoot.rt-variant-soft[data-material='solid'], .rt-AccordionRoot.rt-variant-soft[data-material='solid']:hover) {
     background-color: var(--accent-4);
   }
-  :where(.rt-AccordionRoot.rt-variant-soft[data-panel-background='translucent'], .rt-AccordionRoot.rt-variant-soft[data-material='translucent']:hover) {
+  :where(.rt-AccordionRoot.rt-variant-soft[data-material='translucent'], .rt-AccordionRoot.rt-variant-soft[data-material='translucent']:hover) {
     background-color: color-mix(in srgb, var(--accent-a4), var(--accent-4) 60%);
   }
 }
@@ -555,15 +502,15 @@
     background-color: var(--accent-2);
     box-shadow: inset 0 0 0 1px var(--accent-7);
   }
-  :where([data-panel-background='translucent'], [data-material='translucent']) :where(.rt-AccordionRoot.rt-variant-outline:hover) {
+  :where([data-material='translucent']) :where(.rt-AccordionRoot.rt-variant-outline:hover) {
     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-AccordionRoot.rt-variant-outline[data-panel-background='solid'], .rt-AccordionRoot.rt-variant-outline[data-material='solid']:hover) {
+  :where(.rt-AccordionRoot.rt-variant-outline[data-material='solid'], .rt-AccordionRoot.rt-variant-outline[data-material='solid']:hover) {
     background-color: var(--accent-2);
     box-shadow: inset 0 0 0 1px var(--accent-7);
   }
-  :where(.rt-AccordionRoot.rt-variant-outline[data-panel-background='translucent'], .rt-AccordionRoot.rt-variant-outline[data-material='translucent']:hover) {
+  :where(.rt-AccordionRoot.rt-variant-outline[data-material='translucent'], .rt-AccordionRoot.rt-variant-outline[data-material='translucent']:hover) {
     background-color: color-mix(in srgb, var(--accent-a2), var(--accent-2) 60%);
     box-shadow: inset 0 0 0 1px var(--accent-a7);
   }
@@ -575,15 +522,15 @@
     background-color: var(--accent-3);
     box-shadow: inset 0 0 0 1px var(--accent-7);
   }
-  :where([data-panel-background='translucent'], [data-material='translucent']) :where(.rt-AccordionRoot.rt-variant-surface:hover) {
+  :where([data-material='translucent']) :where(.rt-AccordionRoot.rt-variant-surface:hover) {
     background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
     box-shadow: inset 0 0 0 1px var(--accent-a7);
   }
-  :where(.rt-AccordionRoot.rt-variant-surface[data-panel-background='solid'], .rt-AccordionRoot.rt-variant-surface[data-material='solid']:hover) {
+  :where(.rt-AccordionRoot.rt-variant-surface[data-material='solid'], .rt-AccordionRoot.rt-variant-surface[data-material='solid']:hover) {
     background-color: var(--accent-3);
     box-shadow: inset 0 0 0 1px var(--accent-7);
   }
-  :where(.rt-AccordionRoot.rt-variant-surface[data-panel-background='translucent'], .rt-AccordionRoot.rt-variant-surface[data-material='translucent']:hover) {
+  :where(.rt-AccordionRoot.rt-variant-surface[data-material='translucent'], .rt-AccordionRoot.rt-variant-surface[data-material='translucent']:hover) {
     background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
     box-shadow: inset 0 0 0 1px var(--accent-a7);
   }
@@ -594,13 +541,13 @@
   :where(.rt-AccordionRoot.rt-variant-ghost:hover) {
     background-color: var(--accent-2);
   }
-  :where([data-panel-background='translucent'], [data-material='translucent']) :where(.rt-AccordionRoot.rt-variant-ghost:hover) {
+  :where([data-material='translucent']) :where(.rt-AccordionRoot.rt-variant-ghost:hover) {
     background-color: color-mix(in srgb, var(--accent-a2), var(--accent-2) 60%);
   }
-  :where(.rt-AccordionRoot.rt-variant-ghost[data-panel-background='solid'], .rt-AccordionRoot.rt-variant-ghost[data-material='solid']:hover) {
+  :where(.rt-AccordionRoot.rt-variant-ghost[data-material='solid'], .rt-AccordionRoot.rt-variant-ghost[data-material='solid']:hover) {
     background-color: var(--accent-2);
   }
-  :where(.rt-AccordionRoot.rt-variant-ghost[data-panel-background='translucent'], .rt-AccordionRoot.rt-variant-ghost[data-material='translucent']:hover) {
+  :where(.rt-AccordionRoot.rt-variant-ghost[data-material='translucent'], .rt-AccordionRoot.rt-variant-ghost[data-material='translucent']:hover) {
     background-color: color-mix(in srgb, var(--accent-a2), var(--accent-2) 60%);
   }
 } 

package/src/components/accordion.props.tsx

@@ -1,4 +1,3 @@
-import { parseVariant } from '../helpers/parse-variant.js';
 import { asChildPropDef } from '../props/as-child.prop.js';
 import { colorPropDef } from '../props/color.prop.js';
 import { radiusPropDef } from '../props/radius.prop.js';
@@ -6,26 +5,21 @@ 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', 'soft', 'surface', 'outline', 'ghost', 'classic'] as const;
-const panelBackgrounds = ['solid', 'translucent'] as const;
+const variants = ['raised', 'soft', 'surface', 'outline', 'ghost'] as const;
+const materials = ['solid', 'translucent'] as const;
 
 const accordionRootPropDefs = {
   ...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 },
+  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'raised' },
   ...colorPropDef,
   ...radiusPropDef,
-  material: { type: 'enum', values: panelBackgrounds, default: undefined },
-  /**
-   * @deprecated Use `material` prop instead. This prop will be removed in a future version.
-   */
-  panelBackground: { type: 'enum', values: panelBackgrounds, default: undefined },
+  material: { type: 'enum', values: materials, default: undefined },
   flush: { type: 'boolean', default: false },
 } 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>;
   flush: PropDef<boolean>;
 };
 
@@ -66,8 +60,7 @@ export type AccordionRootOwnProps = {
   variant?: (typeof variants)[number];
   color?: string;
   radius?: string;
-  material?: (typeof panelBackgrounds)[number];
-  panelBackground?: (typeof panelBackgrounds)[number];
+  material?: (typeof materials)[number];
   flush?: boolean;
 };
 

package/src/components/accordion.tsx

@@ -19,7 +19,6 @@ import type {
   AccordionContentOwnProps,
 } from './accordion.props.js';
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
-import { useDeprecatedPanelBackgroundWarning } from '../helpers/use-deprecation-warning.js';
 
 // Root component
 type AccordionRootElement = React.ElementRef<typeof AccordionPrimitive.Root>;
@@ -29,17 +28,15 @@ interface AccordionRootProps
 
 const AccordionRoot = React.forwardRef<AccordionRootElement, AccordionRootProps>(
   (props, forwardedRef) => {
-    const { className, panelBackground, material, flush, radius, color, ...extractedRadixProps } =
+    const { className, material, flush, radius, color, ...extractedRadixProps } =
       extractProps(props, accordionRootPropDefs);
 
     const radixProps = extractedRadixProps as React.ComponentPropsWithoutRef<
       typeof AccordionPrimitive.Root
     >;
 
-    useDeprecatedPanelBackgroundWarning(props.panelBackground);
 
-    // Material takes precedence over panelBackground
-    const effectiveMaterial = material ?? panelBackground;
+    const effectiveMaterial = material;
 
     // Ensure single accordions can collapse by default unless explicitly set
     if (radixProps.type === 'single' && radixProps.collapsible === undefined) {
@@ -76,7 +73,6 @@ const AccordionRoot = React.forwardRef<AccordionRootElement, AccordionRootProps>
         ref={forwardedRef}
         className={classNames('rt-AccordionRoot', className)}
         data-accent-color={color}
-        data-panel-background={effectiveMaterial}
         data-material={effectiveMaterial}
         data-flush={flush || undefined}
         data-radius={radius}

package/src/components/alert-dialog.props.tsx

@@ -9,7 +9,6 @@ const alertDialogContentPropDefs = {
 } satisfies {
   align: PropDef<'start' | 'center'>;
   size: PropDef<'1' | '2' | '3' | '4'>;
-  panelBackground: PropDef<'solid' | 'translucent' | undefined>;
   width: PropDef<string>;
   minWidth: PropDef<string>;
   maxWidth: PropDef<string>;

package/src/components/alert-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 type { AlertDialogContentOwnProps } from './alert-dialog.props.js';
@@ -41,12 +40,10 @@ AlertDialogTrigger.displayName = 'AlertDialog.Trigger';
 // them on every render.
 const {
   align: alignPropDef,
-  panelBackground: panelBackgroundPropDef,
   material: materialPropDef,
   ...contentPropDefs
 } = alertDialogContentPropDefs;
 const alignPropDefs = { align: alignPropDef };
-const panelBackgroundPropDefs = { panelBackground: panelBackgroundPropDef };
 const materialPropDefs = { material: materialPropDef };
 
 type AlertDialogContentElement = React.ElementRef<typeof AlertDialogPrimitive.Content>;
@@ -59,27 +56,19 @@ const AlertDialogContent = React.forwardRef<AlertDialogContentElement, AlertDial
   ({ 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);
@@ -154,7 +143,6 @@ const AlertDialogContent = React.forwardRef<AlertDialogContentElement, AlertDial
                   ref={combinedRef}
                   className={classNames('rt-BaseDialogContent', 'rt-AlertDialogContent', className)}
                   data-material={materialValue}
-                  data-panel-background={materialValue}
                   tabIndex={-1}
                   role="alertdialog"
                   aria-modal="true"

package/src/components/avatar.css

@@ -17,19 +17,9 @@
  ***************************************************************************************************/
 
 .rt-AvatarRoot {
-  /*
-   * Component-level material override
-   * When avatar has explicit material prop, override the inherited theme values.
-   */
-  &:where([data-material='solid'], [data-panel-background='solid']) {
-    --material-blend: 100%;
-    --material-alpha: 0;
-  }
-
-  &:where([data-material='translucent'], [data-panel-background='translucent']) {
-    --material-blend: 60%;
-    --material-alpha: 1;
-  }
+  /* Avatar takes no material: it stays solid inside a translucent theme or surface. */
+  --material-blend: 100%;
+  --material-alpha: 0;
 
   display: inline-flex;
   align-items: center;
@@ -42,24 +32,11 @@
   position: relative;
 
   /* Theme-level translucent override */
-  :where([data-panel-background='translucent'], [data-material='translucent']) & {
-    backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
-  }
 
   /* Prevent backdrop-filter stacking with parents */
-  isolation: isolate;
+  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: var(--backdrop-filter-components-enabled);
-  }
 }
 
 /* Interactive states for avatars used as buttons/links */
@@ -68,12 +45,8 @@
 .rt-AvatarRoot:where(a),
 .rt-AvatarRoot:where([role="button"]) {
   cursor: pointer;
-  transition: var(--transition-button);
 
   /* Reduced motion support */
-  @media (prefers-reduced-motion: reduce) {
-    transition: none;
-  }
 
   &:where(:focus-visible) {
     outline: var(--focus-outline-width) solid var(--focus-8);

package/src/components/avatar.props.tsx

@@ -1,28 +1,20 @@
-import { parseVariant } from '../helpers/parse-variant.js';
 import { asChildPropDef } from '../props/as-child.prop.js';
 import { grayAccentColorPropDef, accentColors } 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', '5', '6', '7', '8', '9', '10', '11', '12'] as const;
-const variants = ['raised', 'solid', 'soft', 'surface', 'outline', 'classic'] as const;
-const panelBackgrounds = ['solid', 'translucent'] as const;
-const materials = ['solid', 'translucent'] as const;
+const sizes = ['1', '2', '3', '4', '5', '6', '7', '8', '9'] as const;
+const variants = ['raised', 'solid', 'soft', 'surface', 'outline'] as const;
 const objectFitValues = ['cover', 'contain', 'fill', 'scale-down', 'none'] as const;
 
 const avatarPropDefs = {
   ...asChildPropDef,
   size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '3', responsive: true },
-  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'raised', parseValue: parseVariant },
+  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'raised' },
   ...grayAccentColorPropDef,
   ...radiusPropDef,
   fallback: { type: 'ReactNode', required: true },
-  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, default: undefined },
   /**
    * Status indicator color. Renders a small colored dot at the bottom-right corner.
    * Cannot be used together with `badge`.
@@ -43,8 +35,6 @@ const avatarPropDefs = {
   size: PropDef<(typeof sizes)[number]>;
   variant: PropDef<(typeof variants)[number]>;
   fallback: PropDef<React.ReactNode>;
-  material: PropDef<(typeof materials)[number] | undefined>;
-  panelBackground: PropDef<(typeof panelBackgrounds)[number] | undefined>;
   status: PropDef<(typeof accentColors)[number] | undefined>;
   badge: PropDef<React.ReactNode>;
   fit: PropDef<(typeof objectFitValues)[number]>;