@womp/kookie-ui 0.3.25 → 0.4.0

package/src/components/badge.css

@@ -27,7 +27,7 @@
     --material-blend: 60%;
     --material-alpha: 1;
     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 */
@@ -45,7 +45,7 @@
     --material-blend: 60%;
     --material-alpha: 1;
     backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
   }
 
   /* Reduced motion support */

package/src/components/badge.tsx

@@ -10,6 +10,7 @@ import { Tooltip } from './tooltip.js';
 import type { MarginProps } from '../props/margin.props.js';
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
 import type { GetPropDefTypes } from '../props/prop-def.js';
+import { useDeprecatedPanelBackgroundWarning } from '../helpers/use-deprecation-warning.js';
 
 type BadgeElement = React.ElementRef<'span'>;
 type BadgeOwnProps = GetPropDefTypes<typeof badgePropDefs>;
@@ -52,14 +53,7 @@ const Badge = React.forwardRef<BadgeElement, BadgeProps>((props, forwardedRef) =
     [material, panelBackground],
   );
 
-  // Show deprecation warning for panelBackground when used
-  React.useEffect(() => {
-    if (panelBackground !== undefined) {
-      console.warn(
-        'Warning: The `panelBackground` prop is deprecated and will be removed in a future version. Use `material` prop instead.',
-      );
-    }
-  }, [panelBackground]);
+  useDeprecatedPanelBackgroundWarning(panelBackground);
 
   // Memoize component variable to prevent unnecessary re-renders
   const Comp = React.useMemo(() => (asChild ? Slot.Root : 'span'), [asChild]);

package/src/components/callout.css

@@ -17,7 +17,7 @@
     --material-blend: 60%;
     --material-alpha: 1;
     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 */
@@ -35,7 +35,7 @@
     --material-blend: 60%;
     --material-alpha: 1;
     backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
   }
 
   &:where(.rt-high-contrast) {

package/src/components/chatbar.css

@@ -173,7 +173,7 @@
 /* Theme-level translucent override for the visual shell */
 .rt-ChatbarRoot:where([data-panel-background='translucent'], [data-material='translucent']) .rt-ChatbarBox {
   backdrop-filter: var(--backdrop-filter-components);
-  --backdrop-filter-components: blur(var(--backdrop-blur-components));
+  --backdrop-filter-components: var(--backdrop-filter-components-enabled);
 }
 .rt-ChatbarRoot:where([data-panel-background='solid'], [data-material='solid']) .rt-ChatbarBox {
   backdrop-filter: none;

package/src/components/context-menu.tsx

@@ -23,6 +23,7 @@ import { Kbd } from './kbd.js';
 
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
 import type { GetPropDefTypes } from '../props/prop-def.js';
+import { useDeprecatedPanelBackgroundWarning } from '../helpers/use-deprecation-warning.js';
 
 interface ContextMenuRootProps
   extends React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Root> {}
@@ -56,14 +57,7 @@ const ContextMenuContent = React.forwardRef<ContextMenuContentElement, ContextMe
   (props, forwardedRef) => {
     const themeContext = useThemeContext();
 
-    // 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 =

package/src/components/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 { useBodyPointerEventsCleanup } from '../hooks/use-body-pointer-events-cleanup.js';
 
@@ -33,6 +34,19 @@ const DialogTrigger = React.forwardRef<DialogTriggerElement, DialogTriggerProps>
 );
 DialogTrigger.displayName = 'Dialog.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
+} = dialogContentPropDefs;
+const alignPropDefs = { align: alignPropDef };
+const panelBackgroundPropDefs = { panelBackground: panelBackgroundPropDef };
+const materialPropDefs = { material: materialPropDef };
+
 type DialogContentElement = React.ElementRef<typeof DialogPrimitive.Content>;
 interface DialogContentProps
   extends ComponentPropsWithout<typeof DialogPrimitive.Content, RemovedProps>,
@@ -41,35 +55,23 @@ interface DialogContentProps
 }
 const DialogContent = React.forwardRef<DialogContentElement, DialogContentProps>(
   ({ align, ...props }, forwardedRef) => {
-    const {
-      align: alignPropDef,
-      panelBackground: panelBackgroundPropDef,
-      material: materialPropDef,
-      ...propDefs
-    } = dialogContentPropDefs;
-
-    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,
@@ -78,7 +80,7 @@ const DialogContent = React.forwardRef<DialogContentElement, DialogContentProps>
       panelBackground: _,
       material: __,
       ...contentProps
-    } = extractProps(props, propDefs);
+    } = extractProps(props, contentPropDefs);
 
     // Focus management
     const contentRef = React.useRef<HTMLDivElement>(null);

package/src/components/dropdown-menu.tsx

@@ -30,6 +30,7 @@ import { Kbd } from './kbd.js';
 import type { IconProps } from './icons.js';
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
 import type { GetPropDefTypes, Responsive } from '../props/prop-def.js';
+import { useDeprecatedPanelBackgroundWarning } from '../helpers/use-deprecation-warning.js';
 
 interface DropdownMenuRootProps
   extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Root> {}
@@ -113,14 +114,7 @@ const DropdownMenuContent = React.forwardRef<DropdownMenuContentElement, Dropdow
   (props, forwardedRef) => {
     const themeContext = useThemeContext();
 
-    // 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 =

package/src/components/heading.css

@@ -6,9 +6,16 @@
   font-weight: var(--font-weight-bold);
   line-height: var(--line-height);
 
-  &:where(.rt-r-ff-sans) { font-family: var(--default-font-family-sans); }
-  &:where(.rt-r-ff-mono) { font-family: var(--default-font-family-mono); }
-  &:where(.rt-r-ff-serif) { font-family: var(--font-serif); }
+  /* `font` prop — all three resolve through the same tier-1 stacks. */
+  &:where(.rt-r-ff-sans) {
+    font-family: var(--font-sans);
+  }
+  &:where(.rt-r-ff-mono) {
+    font-family: var(--font-mono);
+  }
+  &:where(.rt-r-ff-serif) {
+    font-family: var(--font-serif);
+  }
 
   :where(&) {
     margin: 0;

package/src/components/popover.css

@@ -1,4 +1,11 @@
 .rt-PopoverContent {
+  /*
+   * 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;
   /* Base state: use --color-panel which adapts to theme context */
   background-color: var(--color-panel);
   backdrop-filter: var(--backdrop-filter-panel);

package/src/components/progress.css

@@ -15,7 +15,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);
   }
 
   /* Prevent backdrop-filter stacking with parent elements */
@@ -32,7 +32,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);
   }
 }
 
@@ -40,8 +40,21 @@
 .rt-ProgressIndicator {
   display: block;
   height: var(--position-full);
-  width: max(calc(var(--progress-value) / var(--progress-max) * 100%), var(--progress-height));
+  width: var(--position-full);
   border-radius: var(--progress-indicator-radius);
+
+  /*
+   * The bar is full width and slid into place rather than grown. `width` is a
+   * layout property: animating it re-lays-out on every frame, and the
+   * indeterminate animation never stops, so a visible bar reflowed forever.
+   * `.rt-ProgressRoot` clips the overhang. `max()` keeps a sliver of the bar
+   * visible at very low values, as the width form did.
+   */
+  transform: translateX(
+    calc(
+      -100% + max(calc(var(--progress-value) / var(--progress-max) * 100%), var(--progress-height))
+    )
+  );
   transition: var(--transition-progress);
 
   &:where([data-state='indeterminate']) {
@@ -55,20 +68,20 @@
 
 @keyframes rt-progress-indicator-indeterminate-grow {
   0% {
-    width: calc(var(--progress-scale-initial) * 100%);
+    transform: translateX(calc(-100% + var(--progress-scale-initial) * 100%));
   }
   20% {
-    width: calc(var(--progress-scale-step-1) * 100%);
+    transform: translateX(calc(-100% + var(--progress-scale-step-1) * 100%));
   }
   30% {
-    width: calc(var(--progress-scale-step-2) * 100%);
+    transform: translateX(calc(-100% + var(--progress-scale-step-2) * 100%));
   }
   40%,
   50% {
-    width: calc(var(--progress-scale-step-3) * 100%);
+    transform: translateX(calc(-100% + var(--progress-scale-step-3) * 100%));
   }
   100% {
-    width: calc(var(--progress-scale-final) * 100%);
+    transform: translateX(calc(-100% + var(--progress-scale-final) * 100%));
   }
 }
 

package/src/components/segmented-control.css

@@ -32,7 +32,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);
   }
 
   /* 
@@ -46,7 +46,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);
   }
 
   /* Disable backdrop-filter when inside elements that already have backdrop-filter */

package/src/components/select.css

@@ -16,7 +16,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 */
@@ -30,7 +30,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(.rt-high-contrast) {
@@ -71,6 +71,13 @@
 }
 
 .rt-SelectContent {
+  /*
+   * 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(--select-content-padding);
   --scrollarea-scrollbar-vertical-margin-bottom: var(--select-content-padding);
   --scrollarea-scrollbar-horizontal-margin-left: var(--select-content-padding);

package/src/components/sheet.tsx

@@ -43,6 +43,7 @@ import { Theme } from './theme.js';
 import { Heading } from './heading.js';
 import { Text } from './text.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';
 
@@ -85,6 +86,30 @@ Trigger.displayName = 'Sheet.Trigger';
 
 // Content
 /** Element type for `Sheet.Content`. */
+// Reuse dialog content prop defs for size/width/height tokens, but handle
+// material/panelBackground explicitly to avoid forwarding unknown DOM props.
+// Built 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 every time a sheet renders.
+const {
+  align: _alignPropDef,
+  panelBackground: panelBackgroundPropDef,
+  material: materialPropDef,
+  ...dialogPropDefsForSheet
+} = dialogContentPropDefs;
+
+const materialPropDefs = {
+  panelBackground: panelBackgroundPropDef,
+  material: materialPropDef,
+};
+
+// Override dialog's default maxWidth (600px) to avoid clamping Sheet by default
+const { default: _mwDefault, ...maxWidthWithoutDefault } = dialogPropDefsForSheet.maxWidth;
+const sheetPropDefs = {
+  ...dialogPropDefsForSheet,
+  maxWidth: maxWidthWithoutDefault,
+} as typeof dialogPropDefsForSheet;
+
 type SheetContentElement = React.ElementRef<typeof DialogPrimitive.Content>;
 interface SheetContentProps
   extends ComponentPropsWithout<typeof DialogPrimitive.Content, RemovedProps>,
@@ -120,40 +145,18 @@ const Content = React.forwardRef<SheetContentElement, SheetContentProps>(
       bottom: 'bottom',
     };
     const normalizedSide = normalizedSideMap[side];
-    // Reuse dialog content prop defs for size/width/height tokens, but handle
-    // material/panelBackground explicitly to avoid forwarding unknown DOM props.
-    const {
-      align: _alignPropDef,
-      panelBackground: panelBackgroundPropDef,
-      material: materialPropDef,
-      ...propDefs
-    } = dialogContentPropDefs;
-
     // Extract panelBackground and material together (remove from DOM props)
     const { panelBackground: resolvedPanelBackground, material: resolvedMaterial } = extractProps(
       { panelBackground: panelBackgroundProp, material: materialProp },
-      { panelBackground: panelBackgroundPropDef, material: materialPropDef },
+      materialPropDefs,
     );
 
-    const materialValue = React.useMemo(() => {
-      if (resolvedPanelBackground !== undefined) {
-        if (process.env.NODE_ENV !== 'production') {
-          console.warn(
-            'Warning: The `panelBackground` prop is deprecated and will be removed in a future version. Use the `material` prop instead.',
-          );
-        }
-      }
-      return resolvedMaterial ?? resolvedPanelBackground;
-    }, [resolvedMaterial, resolvedPanelBackground]);
+    useDeprecatedPanelBackgroundWarning(panelBackgroundProp);
+
+    // Material takes precedence over the deprecated panelBackground
+    const materialValue = resolvedMaterial ?? resolvedPanelBackground;
 
-    // Now extract remaining props using dialog defs so size/width/height classnames are applied
-    // Override dialog's default maxWidth (600px) to avoid clamping Sheet by default
-    // Match dialog.tsx: extract once and avoid leaking panel/material
-    const { default: _mwDefault, ...maxWidthWithoutDefault } = propDefs.maxWidth;
-    const sheetPropDefs = {
-      ...propDefs,
-      maxWidth: maxWidthWithoutDefault,
-    } as typeof propDefs;
+    // Size/width/height class names come from the dialog defs — see `sheetPropDefs`.
     const { className: extractedClassName, ...contentProps } = extractProps(
       restProps,
       sheetPropDefs,