@womp/kookie-ui 0.3.25 → 0.4.0

package/package.json

@@ -1,16 +1,23 @@
 {
   "name": "@womp/kookie-ui",
-  "version": "0.3.25",
-  "description": "A modern React component library with beautiful design tokens, flexible theming, and comprehensive documentation",
+  "version": "0.4.0",
+  "description": "Kookie UI v1: a React component library with design tokens, flexible theming, a full layout shell, and comprehensive documentation.",
   "keywords": [
     "react",
     "ui",
     "components",
     "design-system",
     "themes",
-    "radix"
+    "radix",
+    "kookie-ui",
+    "kookie-ui-v1",
+    "womp"
   ],
-  "author": "Kushagra Dhawan",
+  "author": {
+    "name": "Kushagra Dhawan",
+    "url": "https://kushagradhawan.com"
+  },
+  "copyright": "Copyright (c) 2024-2026 Womp 3D Inc. Sole author: Kushagra Dhawan.",
   "license": "MIT",
   "engines": {
     "node": ">=16"
@@ -90,7 +97,8 @@
     "layout/**",
     "*.css",
     "postcss-breakpoints.cjs",
-    "postcss-whitespace.cjs"
+    "postcss-whitespace.cjs",
+    "AUTHORS"
   ],
   "scripts": {
     "build": "pnpm clean:dist && pnpm build:js && pnpm build:schemas && pnpm build:css",
@@ -101,8 +109,9 @@
     "build:js:cjs:types": "tsc --outdir dist/cjs",
     "build:js:esm": "node scripts/esbuild-esm.js",
     "build:js:esm:types": "tsc --outdir dist/esm",
-    "build:css": "pnpm build:css:index && pnpm build:css:tokens && pnpm build:css:components && pnpm build:css:utilities && pnpm build:css:layout",
+    "build:css": "pnpm build:css:index && pnpm build:css:fonts && pnpm build:css:tokens && pnpm build:css:components && pnpm build:css:utilities && pnpm build:css:layout",
     "build:css:index": "postcss src/styles/index.css -o styles.css",
+    "build:css:fonts": "postcss src/styles/fonts.css -o fonts.css",
     "build:css:components": "postcss src/components/index.css -o components.css",
     "build:css:utilities": "postcss src/styles/utilities/index.css -o utilities.css",
     "build:css:tokens": "pnpm build:css:tokens:index && pnpm build:css:tokens:base && pnpm build:css:tokens:colors",
@@ -115,12 +124,13 @@
     "build:css:layout:components": "postcss src/components/layout.css -o layout/components.css",
     "build:css:layout:utilities": "postcss src/styles/utilities/layout.css -o layout/utilities.css",
     "dev": "pnpm dev:js & pnpm dev:css",
+    "dev:css:fonts": "postcss src/styles/fonts.css -o fonts.css --watch",
     "dev:js": "pnpm dev:js:cjs & pnpm dev:js:esm & pnpm dev:js:cjs:types & pnpm dev:js:esm:types",
     "dev:js:cjs": "node scripts/esbuild-cjs.js watch=true",
     "dev:js:cjs:types": "tsc --watch --incremental --outdir dist/cjs",
     "dev:js:esm": "node scripts/esbuild-esm.js watch=true",
     "dev:js:esm:types": "tsc --watch --incremental --outdir dist/esm >/dev/null",
-    "dev:css": "postcss src/styles/index.css -o styles.css --watch",
+    "dev:css": "postcss src/styles/index.css -o styles.css --watch & pnpm dev:css:fonts",
     "lint": "pnpm lint:js && pnpm lint:css && pnpm lint:ts",
     "lint:js": "eslint \"src/**/*.ts*\"",
     "lint:ts": "tsc --noEmit",
@@ -131,6 +141,7 @@
     "release:patch": "node scripts/release.js patch",
     "release:minor": "node scripts/release.js minor",
     "release:major": "node scripts/release.js major",
+    "bench": "vitest bench --run --config vitest.bench.config.ts",
     "test": "vitest run",
     "test:watch": "vitest",
     "test:ui": "vitest --ui",

package/schemas/base-button.json

@@ -279,6 +279,5 @@
   "title": "Base-button Component Props",
   "description": "Props schema for the base-button component in Kookie UI",
   "version": "1.0.0",
-  "generatedAt": "2026-08-21T16:33:37.029Z",
   "source": "Zod schema"
 }

package/schemas/button.json

@@ -530,6 +530,5 @@
   "title": "Button Component Props",
   "description": "Props schema for the button component in Kookie UI",
   "version": "1.0.0",
-  "generatedAt": "2026-08-21T16:33:37.036Z",
   "source": "Zod schema"
 }

package/schemas/icon-button.json

@@ -313,6 +313,5 @@
   "title": "Icon-button Component Props",
   "description": "Props schema for the icon-button component in Kookie UI",
   "version": "1.0.0",
-  "generatedAt": "2026-08-21T16:33:37.037Z",
   "source": "Zod schema"
 }

package/schemas/index.json

@@ -3,7 +3,6 @@
   "title": "Kookie UI Button Components",
   "description": "Complete JSON Schema collection for all button components in Kookie UI",
   "version": "1.0.0",
-  "generatedAt": "2026-08-21T16:33:37.040Z",
   "source": "Zod schemas",
   "components": {
     "base-button": {
@@ -287,7 +286,6 @@
       "title": "Base-button Component Props",
       "description": "Props schema for the base-button component in Kookie UI",
       "version": "1.0.0",
-      "generatedAt": "2026-08-21T16:33:37.029Z",
       "source": "Zod schema"
     },
     "button": {
@@ -822,7 +820,6 @@
       "title": "Button Component Props",
       "description": "Props schema for the button component in Kookie UI",
       "version": "1.0.0",
-      "generatedAt": "2026-08-21T16:33:37.036Z",
       "source": "Zod schema"
     },
     "icon-button": {
@@ -1140,7 +1137,6 @@
       "title": "Icon-button Component Props",
       "description": "Props schema for the icon-button component in Kookie UI",
       "version": "1.0.0",
-      "generatedAt": "2026-08-21T16:33:37.037Z",
       "source": "Zod schema"
     },
     "toggle-button": {
@@ -1683,7 +1679,6 @@
       "title": "Toggle-button Component Props",
       "description": "Props schema for the toggle-button component in Kookie UI",
       "version": "1.0.0",
-      "generatedAt": "2026-08-21T16:33:37.038Z",
       "source": "Zod schema"
     },
     "toggle-icon-button": {
@@ -2009,7 +2004,6 @@
       "title": "Toggle-icon-button Component Props",
       "description": "Props schema for the toggle-icon-button component in Kookie UI",
       "version": "1.0.0",
-      "generatedAt": "2026-08-21T16:33:37.039Z",
       "source": "Zod schema"
     }
   }

package/schemas/toggle-button.json

@@ -538,6 +538,5 @@
   "title": "Toggle-button Component Props",
   "description": "Props schema for the toggle-button component in Kookie UI",
   "version": "1.0.0",
-  "generatedAt": "2026-08-21T16:33:37.038Z",
   "source": "Zod schema"
 }

package/schemas/toggle-icon-button.json

@@ -321,6 +321,5 @@
   "title": "Toggle-icon-button Component Props",
   "description": "Props schema for the toggle-icon-button component in Kookie UI",
   "version": "1.0.0",
-  "generatedAt": "2026-08-21T16:33:37.039Z",
   "source": "Zod schema"
 }

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

@@ -66,7 +66,7 @@
   /* 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));
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
   }
 
   /* Prevent backdrop-filter stacking with parent elements */
@@ -80,7 +80,7 @@
 
   &:where([data-panel-background='translucent'], [data-material='translucent']) {
     backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
   }
 
   /* Forced colors support for high contrast mode */

package/src/components/_internal/base-button.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { Slot } from 'radix-ui';
-import { composeRefs } from 'radix-ui/internal';
 
 import { baseButtonPropDefs } from './base-button.props.js';
 import { Flex } from '../flex.js';
 import { Spinner } from '../spinner.js';
 import { VisuallyHidden } from '../visually-hidden.js';
 import { extractProps } from '../../helpers/extract-props.js';
+import { useDeprecatedPanelBackgroundWarning } from '../../helpers/use-deprecation-warning.js';
 import { mapResponsiveProp, mapButtonSizeToSpinnerSize } from '../../helpers/map-prop-values.js';
 import { marginPropDefs } from '../../props/margin.props.js';
 
@@ -80,66 +80,11 @@ const BaseButton = React.forwardRef<BaseButtonElement, BaseButtonProps>((props,
     ...baseButtonProps
   } = extractProps(props, baseButtonPropDefs, marginPropDefs);
 
-  // Show deprecation warning for panelBackground when used
-  // This helps developers migrate to the new material prop
-  React.useEffect(() => {
-    if (props.panelBackground !== undefined) {
-      console.warn('Warning: The `panelBackground` prop is deprecated and will be removed in a future version. Use `material` prop instead.');
-    }
-  }, [props.panelBackground]);
+  useDeprecatedPanelBackgroundWarning(props.panelBackground);
 
   // Material takes precedence over panelBackground for backward compatibility
   const effectiveMaterial = material ?? panelBackground;
 
-  // Will-change cleanup for backdrop-filter performance optimization
-  // This prevents layout thrashing when using translucent materials
-  const buttonRef = React.useRef<HTMLElement>(null);
-
-  // Use a ref to track current material value to avoid stale closures in setTimeout
-  const materialRef = React.useRef(effectiveMaterial);
-  materialRef.current = effectiveMaterial;
-
-  React.useEffect(() => {
-    const button = buttonRef.current;
-    if (!button) return;
-
-    const hasTranslucentMaterial = effectiveMaterial === 'translucent';
-
-    if (hasTranslucentMaterial) {
-      // Add will-change when material is translucent to optimize rendering
-      button.style.setProperty('will-change', 'backdrop-filter');
-
-      // Track timeout for cleanup
-      let timeoutId: ReturnType<typeof setTimeout> | undefined;
-
-      // Clean up will-change after transition completes to prevent memory leaks
-      const cleanup = () => {
-        const transitionDuration = getComputedStyle(button).getPropertyValue('--duration-2') || '75ms';
-        const duration = parseInt(transitionDuration) || 75;
-
-        timeoutId = setTimeout(() => {
-          // Use ref to get current value, not stale closure value
-          if (button && materialRef.current !== 'translucent') {
-            button.style.setProperty('will-change', 'auto');
-          }
-        }, duration);
-      };
-
-      // Listen for material changes to clean up will-change property
-      const observer = new MutationObserver(cleanup);
-      observer.observe(button, { attributes: true, attributeFilter: ['data-material'] });
-
-      return () => {
-        if (timeoutId) clearTimeout(timeoutId);
-        observer.disconnect();
-        button.style.setProperty('will-change', 'auto');
-      };
-    } else {
-      // Remove will-change when material is not translucent
-      button.style.setProperty('will-change', 'auto');
-    }
-  }, [effectiveMaterial]);
-
   // asChild takes precedence over as prop for Radix Slot integration
   // When asChild is true, we use Slot.Root to merge props onto the child element
   // When asChild is false, we render as the specified element (or button by default)
@@ -194,7 +139,7 @@ const BaseButton = React.forwardRef<BaseButtonElement, BaseButtonProps>((props,
       data-flush={flush ? 'true' : undefined}
       {...baseButtonProps}
       {...accessibilityProps}
-      ref={composeRefs(buttonRef, forwardedRef)}
+      ref={forwardedRef}
       className={classNames('rt-reset', 'rt-BaseButton', className)}
       {...(shouldPassDisabled && { disabled })}
       {...(isNativeButtonElement && !hasExplicitTypeAttribute ? { type: 'button' } : {})}

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

@@ -88,7 +88,7 @@
   /* Backdrop-filter for ::before - applies to outline, soft, surface */
   :where([data-panel-background='translucent'], [data-material='translucent']) &::before {
     backdrop-filter: var(--backdrop-filter-panel);
-    --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
+    --backdrop-filter-panel: var(--backdrop-filter-panel-enabled);
   }
 
   &:where([data-material='solid'], [data-panel-background='solid'])::before {
@@ -97,7 +97,7 @@
 
   &:where([data-material='translucent'], [data-panel-background='translucent'])::before {
     backdrop-filter: var(--backdrop-filter-panel);
-    --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
+    --backdrop-filter-panel: var(--backdrop-filter-panel-enabled);
   }
 
   /* Interactive scale - applies to all interactive cards */
@@ -413,6 +413,21 @@
  ***************************************************************************************************/
 
 .rt-BaseCard:where(.rt-variant-ghost) {
+  /*
+   * Ghost is the only card variant whose backdrop filter sits on the element
+   * rather than on ::before, which makes it — and only it — the backdrop root
+   * for its contents. A component nested here would re-blur an already blurred
+   * surface, so switch the component filter off for the subtree.
+   *
+   * The other variants deliberately do not do this: their filter is on
+   * ::before, so the card element is not a backdrop root and a nested
+   * component is still blurring the page itself. Measured over a textured
+   * background, dropping it there is a visible change (max 82/255 channel
+   * delta) rather than the imperceptible one it is on a real backdrop root
+   * (max 7/255).
+   */
+  --backdrop-filter-components-enabled: none;
+
   --card-border-width: 0px;
   --v-bg-hover: var(--gray-3);
   --v-bg-hover-a: var(--gray-a3);
@@ -454,7 +469,7 @@
   /* Backdrop-filter handling for ghost - on element, not ::before */
   :where([data-panel-background='translucent'], [data-material='translucent']) & {
     backdrop-filter: var(--backdrop-filter-panel);
-    --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
+    --backdrop-filter-panel: var(--backdrop-filter-panel-enabled);
   }
 
   &:where([data-panel-background='solid'], [data-material='solid']) {
@@ -463,7 +478,7 @@
 
   &:where([data-panel-background='translucent'], [data-material='translucent']) {
     backdrop-filter: var(--backdrop-filter-panel);
-    --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
+    --backdrop-filter-panel: var(--backdrop-filter-panel-enabled);
   }
 
   /* Interactive states - background on element, not ::before */

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

@@ -19,7 +19,7 @@
   /* 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));
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
   }
 
   /* Prevent backdrop-filter stacking with parents */
@@ -33,7 +33,7 @@
   
   &:where([data-panel-background='translucent'], [data-material='translucent']) {
     backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
   }
 
 

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

@@ -37,6 +37,13 @@
 }
 
 .rt-BaseDialogContent {
+  /*
+   * This surface blurs its own backdrop, which makes it the backdrop root for
+   * everything inside it. A component nested here would re-blur an already
+   * blurred, already flat surface for the full cost of another blur pass, so
+   * switch the component filter off for the subtree. See tokens/blur.css.
+   */
+  --backdrop-filter-components-enabled: none;
   margin: auto;
   width: 100%;
   z-index: 1;

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

@@ -1,4 +1,11 @@
 .rt-BaseMenuContent {
+  /*
+   * This surface blurs its own backdrop, which makes it the backdrop root for
+   * everything inside it. A component nested here would re-blur an already
+   * blurred, already flat surface for the full cost of another blur pass, so
+   * switch the component filter off for the subtree. See tokens/blur.css.
+   */
+  --backdrop-filter-components-enabled: none;
   --scrollarea-scrollbar-vertical-margin-top: var(--base-menu-content-padding);
   --scrollarea-scrollbar-vertical-margin-bottom: var(--base-menu-content-padding);
   --scrollarea-scrollbar-horizontal-margin-left: var(--base-menu-content-padding);

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

@@ -19,7 +19,7 @@
   /* 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));
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
   }
 
   /* Prevent backdrop-filter stacking with parents */
@@ -33,7 +33,7 @@
   
   &:where([data-panel-background='translucent'], [data-material='translucent']) {
     backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
   }
 
   &:where(:disabled, [data-disabled]) {

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

@@ -28,6 +28,13 @@
 
 /* Sidebar Container */
 .rt-SidebarContainer {
+  /*
+   * This surface blurs its own backdrop, which makes it the backdrop root for
+   * everything inside it. A component nested here would re-blur an already
+   * blurred, already flat surface for the full cost of another blur pass, so
+   * switch the component filter off for the subtree. See tokens/blur.css.
+   */
+  --backdrop-filter-components-enabled: none;
   --sidebar-base-border-radius: 0; /* Default to no radius */
   display: flex;
   flex-direction: column;

package/src/components/_internal/base-tab-list.css

@@ -161,7 +161,7 @@
       :where(.rt-BaseTabList[data-panel-background='translucent']) & {
         background-color: var(--gray-a3);
         backdrop-filter: var(--backdrop-filter-components);
-        --backdrop-filter-components: blur(var(--backdrop-blur-components));
+        --backdrop-filter-components: var(--backdrop-filter-components-enabled);
       }
 
       /* Disable backdrop-filter when inside elements that already have backdrop-filter */
@@ -189,7 +189,7 @@
       :where(.rt-BaseTabList[data-panel-background='translucent']) & {
         background-color: var(--accent-a3);
         backdrop-filter: var(--backdrop-filter-components);
-        --backdrop-filter-components: blur(var(--backdrop-blur-components));
+        --backdrop-filter-components: var(--backdrop-filter-components-enabled);
       }
     }
   }

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

@@ -77,7 +77,30 @@ export const PaneHandle = React.forwardRef<HTMLDivElement, React.ComponentPropsW
         body.style.cursor = orientation === 'vertical' ? 'col-resize' : 'row-resize';
         body.style.userSelect = 'none';
         onResizeStart?.(startSize);
+
+        // The move handler is attached to the handle, the document and the
+        // window so the drag survives environments where PointerEvent does not
+        // reach all three. A real move therefore arrives here several times:
+        // once per node it propagates through, plus again as the compatibility
+        // mouse event. Doing the work more than once per movement is pure waste
+        // on the most latency-sensitive interaction in the shell, so ignore the
+        // repeats.
+        let lastHandledMove: Event | null = null;
+        let seenPointerEvent = false;
+
+        const shouldHandle = (ev: Event, pointerType: string) => {
+          if (ev.type === pointerType) seenPointerEvent = true;
+          // Once pointer events are known to work, the mouse fallbacks are
+          // duplicates of an event we have already handled.
+          else if (seenPointerEvent) return false;
+          return true;
+        };
+
         const handleMove = (ev: PointerEvent) => {
+          if (!shouldHandle(ev, 'pointermove')) return;
+          if (ev === lastHandledMove) return;
+          lastHandledMove = ev;
+
           const client = orientation === 'vertical' ? ev.clientX : ev.clientY;
           const next = clamp(computeNext(client, startClient, startSize));
           container.style.setProperty(cssVarName, `${next}px`);
@@ -106,7 +129,11 @@ export const PaneHandle = React.forwardRef<HTMLDivElement, React.ComponentPropsW
           body.style.userSelect = prevUserSelect;
           activeCleanupRef.current = null;
         };
+        let finished = false;
         const handleUp = () => {
+          if (finished) return;
+          finished = true;
+
           const finalSize = parseFloat(getComputedStyle(container).getPropertyValue(cssVarName) || `${defaultSize}`);
           let snapped = finalSize;
           if (snapPoints && snapPoints.length) {

package/src/components/accordion.css

@@ -7,7 +7,7 @@
   /* 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));
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
   }
 
   /* Prevent backdrop-filter stacking with parents */
@@ -21,7 +21,7 @@
   
   &:where([data-panel-background='translucent'], [data-material='translucent']) {
     backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
   }
 }
 
@@ -68,7 +68,7 @@
     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);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
   }
 }
 
@@ -94,7 +94,7 @@
   &:where([data-panel-background='translucent'], [data-material='translucent']) {
     background-color: var(--color-surface-translucent);
     backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
   }
 }
 
@@ -119,7 +119,7 @@
   &:where([data-panel-background='translucent'], [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: blur(var(--backdrop-blur-components));
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
   }
 }
 
@@ -143,7 +143,7 @@
   &:where([data-panel-background='translucent'], [data-material='translucent']) {
     box-shadow: inset 0 0 0 1px var(--accent-a6);
     backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
   }
 }
 

package/src/components/accordion.tsx

@@ -19,6 +19,7 @@ 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>;
@@ -35,14 +36,7 @@ const AccordionRoot = React.forwardRef<AccordionRootElement, AccordionRootProps>
       typeof AccordionPrimitive.Root
     >;
 
-    // Show deprecation warning for panelBackground when used
-    React.useEffect(() => {
-      if (props.panelBackground !== undefined) {
-        console.warn(
-          'Warning: The `panelBackground` prop is deprecated and will be removed in a future version. Use `material` prop instead.',
-        );
-      }
-    }, [props.panelBackground]);
+    useDeprecatedPanelBackgroundWarning(props.panelBackground);
 
     // Material takes precedence over panelBackground
     const effectiveMaterial = material ?? panelBackground;

package/src/components/alert-dialog.tsx

@@ -7,6 +7,7 @@ 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';
@@ -35,6 +36,19 @@ const AlertDialogTrigger = React.forwardRef<AlertDialogTriggerElement, AlertDial
 );
 AlertDialogTrigger.displayName = 'AlertDialog.Trigger';
 
+// Split once at module scope. `extractProps` memoises on the identity of the
+// prop def objects it is handed, so rebuilding these per render would recompile
+// 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>;
 interface AlertDialogContentProps
   extends ComponentPropsWithout<typeof AlertDialogPrimitive.Content, RemovedProps>,
@@ -43,35 +57,23 @@ interface AlertDialogContentProps
 }
 const AlertDialogContent = React.forwardRef<AlertDialogContentElement, AlertDialogContentProps>(
   ({ align, ...props }, forwardedRef) => {
-    const {
-      align: alignPropDef,
-      panelBackground: panelBackgroundPropDef,
-      material: materialPropDef,
-      ...propDefs
-    } = alertDialogContentPropDefs;
-
-    const { className: alignClassName } = extractProps({ align }, { align: alignPropDef });
+    const { className: alignClassName } = extractProps({ align }, alignPropDefs);
 
     // Extract panelBackground and material from props
     const { panelBackground: extractedPanelBackground } = extractProps(
       { panelBackground: props.panelBackground },
-      { panelBackground: panelBackgroundPropDef },
+      panelBackgroundPropDefs,
     );
 
     const { material: extractedMaterial } = extractProps(
       { material: props.material },
-      { material: materialPropDef },
+      materialPropDefs,
     );
 
-    // Handle material prop with panelBackground fallback
-    const materialValue = React.useMemo(() => {
-      if (extractedMaterial !== undefined) {
-        console.warn(
-          'Warning: The `panelBackground` prop is deprecated and will be removed in a future version. Use `material` prop instead.',
-        );
-      }
-      return extractedMaterial ?? extractedPanelBackground;
-    }, [extractedMaterial, extractedPanelBackground]);
+    useDeprecatedPanelBackgroundWarning(props.panelBackground);
+
+    // Material takes precedence over the deprecated panelBackground
+    const materialValue = extractedMaterial ?? extractedPanelBackground;
 
     const {
       className,
@@ -80,7 +82,7 @@ const AlertDialogContent = React.forwardRef<AlertDialogContentElement, AlertDial
       panelBackground: _,
       material: __,
       ...contentProps
-    } = extractProps(props, propDefs);
+    } = extractProps(props, contentPropDefs);
 
     // Focus management
     const contentRef = React.useRef<HTMLDivElement>(null);

package/src/components/avatar.css

@@ -44,7 +44,7 @@
   /* 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));
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
   }
 
   /* Prevent backdrop-filter stacking with parents */
@@ -58,7 +58,7 @@
 
   &:where([data-panel-background='translucent'], [data-material='translucent']) {
     backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
   }
 }