@womp/kookie-ui 0.16.0 → 0.18.0

package/src/components/chatbar.tsx

@@ -9,6 +9,7 @@ import { Flex } from './flex.js';
 import { ScrollArea } from './scroll-area.js';
 import { Slot } from './slot.js';
 import { NoticeSizeContext } from './notice.js';
+import { useThemeSize } from '../helpers/theme-size.js';
 import { Spinner } from './spinner.js';
 import { Text } from './text.js';
 import { VisuallyHidden } from './visually-hidden.js';
@@ -125,6 +126,9 @@ interface ChatbarContextValue {
   beginFilePickerPress(): void;
 }
 
+/** Chatbar's own range; a Theme size of 4 maps to 3. */
+const chatbarSizePropDef = { values: ['1', '2', '3'] as const };
+
 const ChatbarContext = React.createContext<ChatbarContextValue | null>(null);
 // Value lives in its own context so keystrokes only re-render parts that read it
 const ChatbarValueContext = React.createContext<string>('');
@@ -215,8 +219,6 @@ interface ChatbarRootBaseProps {
   color?: (typeof accentColors)[number];
   /** Optional radius override (matches TextArea) */
   radius?: (typeof radii)[number];
-  /** Panel/material translucency flags (matches TextArea) */
-  material?: 'solid' | 'translucent';
 
   width?: React.CSSProperties['width'];
   maxWidth?: React.CSSProperties['maxWidth'];
@@ -317,11 +319,10 @@ const Root = React.forwardRef<RootElement, RootProps>((props, forwardedRef) => {
     disabled,
     readOnly,
     onSubmit,
-    size = '2',
+    size: sizeProp,
     variant,
     color,
     radius,
-    material,
     width,
     maxWidth,
     attachments: attachmentsProp,
@@ -342,7 +343,7 @@ const Root = React.forwardRef<RootElement, RootProps>((props, forwardedRef) => {
     context,
     ...divProps
   } = props;
-  const effectiveMaterial = material;
+  const size = useThemeSize(sizeProp, chatbarSizePropDef);
 
   const isValueControlled = valueProp != null;
   const [valueUncontrolled, setValueUncontrolled] = React.useState<string>(defaultValue);
@@ -703,7 +704,6 @@ const Root = React.forwardRef<RootElement, RootProps>((props, forwardedRef) => {
               data-drop-active={dragActive ? '' : undefined}
               data-accent-color={color}
               data-radius={radius}
-              data-material={effectiveMaterial}
               onBlurCapture={handleBlurCapture}
             >
               <input
@@ -725,7 +725,6 @@ const Root = React.forwardRef<RootElement, RootProps>((props, forwardedRef) => {
                   style={{ position: 'relative' }}
                   data-accent-color={color}
                   data-radius={radius}
-                  data-material={effectiveMaterial}
                 >
                   <div className="rt-ChatbarGrid">
                     {children}
@@ -1039,8 +1038,8 @@ const AttachmentsRow = React.forwardRef<HTMLDivElement, AttachmentsRowProps>((pr
   return (
     <div>
       <Comp {...divProps} ref={forwardedRef} className={classNames('rt-ChatbarAttachmentsRow', className)} role="list" aria-label={divProps['aria-label'] ?? 'Attachments'}>
-        <ScrollArea className="rt-ChatbarScrollArea" scrollbars="horizontal" size="1">
-          <Flex align="center" gap="2" minWidth="fit-content">
+        <ScrollArea className="rt-ChatbarScrollArea" scrollbars="horizontal">
+          <Flex align="center" gap="3" minWidth="fit-content">
             {ctx.attachments.map((att) => (
               <Attachment key={att.id} attachment={att} asChild={!!renderAttachment}>
                 {renderAttachment?.(att)}
@@ -1123,7 +1122,7 @@ const Attachment = React.forwardRef<HTMLDivElement, AttachmentProps>((props, for
 
   const lead =
     attachment.status === 'uploading' ? (
-      <Spinner size="1" />
+      <Spinner />
     ) : isImage ? (
       <img className="rt-ChatbarAttachmentImage" src={attachment.url} alt="" />
     ) : (
@@ -1367,7 +1366,7 @@ const Send = React.forwardRef<HTMLButtonElement, SendProps>((props, forwardedRef
 
   const glyph =
     mode === 'stop' ? (
-      stopIcon ?? (status === 'submitted' ? <Spinner size={ctx.size} /> : (
+      stopIcon ?? (status === 'submitted' ? <Spinner /> : (
         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
           <rect x="7" y="7" width="10" height="10" rx="2" />
         </svg>

package/src/components/checkbox-cards.css

@@ -15,7 +15,7 @@
 
   display: flex;
   align-items: center;
-  gap: var(--space-2);
+  gap: var(--space-3);
   cursor: var(--cursor-button);
   -webkit-tap-highlight-color: transparent;
 
@@ -61,7 +61,7 @@
       --line-height: var(--line-height-2);
       --letter-spacing: var(--letter-spacing-2);
       /* keep in sync with checkbox */
-      --checkbox-cards-item-checkbox-size: calc(var(--space-4) * var(--spacing-multiplier-medium));
+      --checkbox-cards-item-checkbox-size: calc(var(--space-5) * var(--spacing-multiplier-medium));
     }
     
 
@@ -71,7 +71,7 @@
       --line-height: var(--line-height-2);
       --letter-spacing: var(--letter-spacing-2);
       /* keep in sync with checkbox */
-      --checkbox-cards-item-checkbox-size: var(--space-4);
+      --checkbox-cards-item-checkbox-size: var(--space-5);
     }
     /* Size 3 */
     &:where(.rt-r-size-3) {
@@ -79,7 +79,7 @@
       --line-height: var(--line-height-3);
       --letter-spacing: var(--letter-spacing-3);
       /* keep in sync with checkbox */
-      --checkbox-cards-item-checkbox-size: calc(var(--space-4) * var(--spacing-multiplier-large));
+      --checkbox-cards-item-checkbox-size: calc(var(--space-5) * var(--spacing-multiplier-large));
     }
     /* Size 4 */
     &:where(.rt-r-size-4) {
@@ -87,7 +87,7 @@
       --line-height: var(--line-height-3);
       --letter-spacing: var(--letter-spacing-3);
       /* keep in sync with checkbox */
-      --checkbox-cards-item-checkbox-size: calc(var(--space-4) * var(--spacing-multiplier-large));
+      --checkbox-cards-item-checkbox-size: calc(var(--space-5) * var(--spacing-multiplier-large));
     }
     /* Size 5 */
     &:where(.rt-r-size-5) {
@@ -95,7 +95,7 @@
       --line-height: var(--line-height-4);
       --letter-spacing: var(--letter-spacing-4);
       /* keep in sync with checkbox */
-      --checkbox-cards-item-checkbox-size: calc(var(--space-5) * var(--spacing-multiplier-medium));
+      --checkbox-cards-item-checkbox-size: calc(var(--space-6) * var(--spacing-multiplier-medium));
     }
   }
 }
@@ -150,19 +150,19 @@
 @breakpoints {
   .rt-CheckboxCardsItem {
     &:where(.rt-r-size-1) {
-      --base-card-border-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-1)));
+      --base-card-border-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-2)));
     }
     &:where(.rt-r-size-2) {
-      --base-card-border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-2)));
+      --base-card-border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-3)));
     }
     &:where(.rt-r-size-3) {
-      --base-card-border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
+      --base-card-border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-4)));
     }
     &:where(.rt-r-size-4) {
-      --base-card-border-radius: min(var(--radius-8), calc(var(--radius-4) + var(--space-4)));
+      --base-card-border-radius: min(var(--radius-8), calc(var(--radius-4) + var(--space-5)));
     }
     &:where(.rt-r-size-5) {
-      --base-card-border-radius: min(var(--radius-9), calc(var(--radius-5) + var(--space-5)));
+      --base-card-border-radius: min(var(--radius-9), calc(var(--radius-5) + var(--space-6)));
     }
   }
 }

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

@@ -8,20 +8,17 @@ import type { PropDef } from '../props/prop-def.js';
 const sizes = ['1', '2', '3', '4', '5'] as const;
 // The same list as Card: a selectable card looks like any other card.
 const variants = cardPropDefs.variant.values;
-const materials = ['solid', 'translucent'] as const;
 
 const checkboxCardsRootPropDefs = {
   ...asChildPropDef,
   size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
   variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'raised' },
-  material: { type: 'enum', values: materials, default: undefined },
   ...colorPropDef,
   columns: { ...gridPropDefs.columns, default: 'repeat(auto-fit, minmax(200px, 1fr))' },
   gap: { ...gridPropDefs.gap, default: '4' },
 } satisfies {
   size: PropDef<(typeof sizes)[number]>;
   variant: PropDef<(typeof variants)[number]>;
-  material: PropDef<(typeof materials)[number] | undefined>;
   columns: PropDef<(typeof gridPropDefs.columns.values)[number]>;
   gap: PropDef<(typeof gridPropDefs.gap.values)[number]>;
 };

package/src/components/checkbox-cards.tsx

@@ -12,7 +12,6 @@ import { Grid } from './grid.js';
 import { ThickCheckIcon } from './icons.js';
 import { extractProps } from '../helpers/extract-props.js';
 import { marginPropDefs } from '../props/margin.props.js';
-import { useThemeContext } from './theme.js';
 
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
 import type { MarginProps } from '../props/margin.props.js';
@@ -45,13 +44,10 @@ interface CheckboxCardsRootProps
     CheckboxCardsRootOwnProps {}
 const CheckboxCardsRoot = React.forwardRef<CheckboxCardsRootElement, CheckboxCardsRootProps>(
   (props: ScopedProps<CheckboxCardsRootProps>, forwardedRef) => {
-    const themeContext = useThemeContext();
-    const resolvedMaterial = props.material ?? themeContext.material;
     const {
       __scopeCheckboxCards,
       className,
       color,
-      material: _material,
       ...rootProps
     } = extractProps(props, checkboxCardsRootPropDefs, marginPropDefs);
     const checkboxGroupScope = useCheckboxGroupScope(__scopeCheckboxCards);
@@ -65,7 +61,6 @@ const CheckboxCardsRoot = React.forwardRef<CheckboxCardsRootElement, CheckboxCar
           <CheckboxGroupPrimitive.Root
             {...checkboxGroupScope}
             data-accent-color={color}
-            data-material={resolvedMaterial}
             {...rootProps}
             ref={forwardedRef}
             className={classNames('rt-CheckboxCardsRoot', className)}

package/src/components/checkbox-group.css

@@ -1,7 +1,7 @@
 .rt-CheckboxGroupRoot {
   display: flex;
   flex-direction: column;
-  gap: var(--space-1);
+  gap: var(--space-2);
 }
 
 .rt-CheckboxGroupItem {
@@ -12,20 +12,15 @@
   width: fit-content;
 }
 
+/* The disabled cursor lives in the base mark. */
 .rt-CheckboxGroupItemCheckbox {
-  &:where(:focus-visible) {
-    &::before {
-      outline: 2px solid var(--focus-8);
-      outline-offset: 2px;
-    }
+  &:where(:focus-visible)::before {
+    outline: var(--focus-ring-width, 2px) solid var(--focus-8);
+    outline-offset: var(--focus-ring-offset, 2px);
   }
 
-  &:where(:disabled) {
-    cursor: var(--cursor-disabled);
-
-    &::before {
-      background-color: var(--gray-a3);
-    }
+  &:where(:disabled)::before {
+    background-color: var(--gray-a3);
   }
 }
 

package/src/components/checkbox-group.tsx

@@ -10,6 +10,7 @@ import { checkboxGroupRootPropDefs } from './checkbox-group.props.js';
 import { ThickCheckIcon } from './icons.js';
 import { Text } from './text.js';
 import { extractProps } from '../helpers/extract-props.js';
+import { useThemeSize } from '../helpers/theme-size.js';
 import { marginPropDefs } from '../props/margin.props.js';
 
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
@@ -42,12 +43,13 @@ const CheckboxGroupRoot = React.forwardRef<CheckboxGroupRootElement, CheckboxGro
   (
     {
       color = checkboxGroupRootPropDefs.color.default,
-      size = checkboxGroupRootPropDefs.size.default,
+      size: sizeProp,
       variant = checkboxGroupRootPropDefs.variant.default,
       ...props
     }: ScopedProps<CheckboxGroupRootProps>,
     forwardedRef,
   ) => {
+    const size = useThemeSize(sizeProp, checkboxGroupRootPropDefs.size);
     const { __scopeCheckboxGroup, className, ...rootProps } = extractProps(props, marginPropDefs);
     const checkboxGroupScope = useCheckboxGroupScope(__scopeCheckboxGroup);
     return (

package/src/components/checkbox.css

@@ -1,18 +1,13 @@
 @import './_internal/base-checkbox.css';
 
+/* The disabled cursor lives in the base mark. */
 .rt-CheckboxRoot {
-  &:where(:focus-visible) {
-    &::before {
-      outline: 2px solid var(--focus-8);
-      outline-offset: 2px;
-    }
+  &:where(:focus-visible)::before {
+    outline: var(--focus-ring-width, 2px) solid var(--focus-8);
+    outline-offset: var(--focus-ring-offset, 2px);
   }
 
-  &:where(:disabled) {
-    cursor: var(--cursor-disabled);
-
-    &::before {
-      background-color: var(--gray-a3);
-    }
+  &:where(:disabled)::before {
+    background-color: var(--gray-a3);
   }
 }

package/src/components/checkbox.tsx

@@ -8,6 +8,7 @@ import { useControllableState } from 'radix-ui/internal';
 import { checkboxPropDefs } from './checkbox.props.js';
 import { ThickCheckIcon, ThickDividerHorizontalIcon } from './icons.js';
 import { extractProps } from '../helpers/extract-props.js';
+import { useThemeSizeProps } from '../helpers/theme-size.js';
 import { marginPropDefs } from '../props/margin.props.js';
 
 import type { MarginProps } from '../props/margin.props.js';
@@ -23,7 +24,8 @@ interface CheckboxProps
     >,
     MarginProps,
     CheckboxOwnProps {}
-const Checkbox = React.forwardRef<CheckboxElement, CheckboxProps>((props, forwardedRef) => {
+const Checkbox = React.forwardRef<CheckboxElement, CheckboxProps>((ownProps, forwardedRef) => {
+  const props = useThemeSizeProps(ownProps, checkboxPropDefs.size);
   const {
     className,
     color,

package/src/components/combobox.css

@@ -10,7 +10,7 @@
  * only, so these are the popover behaviours it still needs. Padding lives on
  * the search row and the viewport. */
 .rt-ComboboxContent {
-  --combobox-list-max-height: calc(300px * var(--scaling));
+  --combobox-list-max-height: calc(300px * var(--scale));
 
   min-width: var(--radix-popover-trigger-width);
   max-height: var(--radix-popover-content-available-height);
@@ -68,11 +68,11 @@
 
 /* Room for the check indicator on every size */
 .rt-BaseMenuContent:where(.rt-r-size-1) :where(.rt-ComboboxItem, .rt-ComboboxLabel) {
-  --base-menu-item-padding-left: calc(var(--space-5) / 1.2);
+  --base-menu-item-padding-left: calc(var(--space-6) / 1.2);
 }
 
 .rt-BaseMenuContent:where(.rt-r-size-2, .rt-r-size-3) :where(.rt-ComboboxItem, .rt-ComboboxLabel) {
-  --base-menu-item-padding-left: var(--space-5);
+  --base-menu-item-padding-left: var(--space-6);
 }
 
 /* Search row: shares the surface background, no second panel */
@@ -94,11 +94,6 @@
   background-color: var(--accent-4);
 }
 
-.rt-BaseMenuContent:where(.rt-variant-soft):where([data-material='translucent'])
-  :where(.rt-ComboboxItem[data-selected='true']) {
-  background-color: var(--accent-a4);
-}
-
 :where(.rt-BaseMenuContent.rt-variant-soft) .rt-ComboboxItem:where([data-selected='true']) :where(.rt-Text.rt-emphasis-medium:where(:not([data-accent-color]), [data-accent-color='gray'])) {
   color: var(--gray-11);
 }
@@ -116,7 +111,7 @@
 
 /* Empty state */
 .rt-ComboboxEmpty {
-  padding: var(--space-4);
+  padding: var(--space-5);
   text-align: center;
   color: var(--gray-a11);
   font-size: var(--font-size-2);

package/src/components/combobox.props.tsx

@@ -23,7 +23,6 @@ const triggerVariants = ['raised', 'surface', 'soft', 'outline', 'ghost'] as con
  */
 const comboboxTriggerPropDefs = {
   variant: { type: 'enum', className: 'rt-variant', values: triggerVariants, default: 'raised' },
-  material: { type: 'enum', values: ['solid', 'translucent'] },
   error: { type: 'boolean' },
   loading: { type: 'boolean' },
   disabled: { type: 'boolean' },
@@ -34,7 +33,6 @@ const comboboxTriggerPropDefs = {
   placeholder: { type: 'string' },
 } satisfies {
   variant: PropDef<(typeof triggerVariants)[number]>;
-  material: PropDef<'solid' | 'translucent'>;
   error: PropDef<boolean>;
   loading: PropDef<boolean>;
   disabled: PropDef<boolean>;
@@ -45,7 +43,6 @@ const comboboxTriggerPropDefs = {
 
 // The list is a menu, and menus stop at size 3.
 const contentSizes = ['1', '2', '3'] as const;
-const materials = ['solid', 'translucent'] as const;
 
 /**
  * Styling props for the dropdown surface rendered by Combobox.Content.
@@ -53,14 +50,12 @@ const materials = ['solid', 'translucent'] as const;
 const comboboxContentPropDefs = {
   size: { type: 'enum', className: 'rt-r-size', values: contentSizes, default: '2', responsive: true },
   ...colorPropDef,
-  material: { type: 'enum', values: materials, default: undefined },
   width: widthPropDefs.width,
   minWidth: widthPropDefs.minWidth,
   maxWidth: { ...widthPropDefs.maxWidth, default: '480px' },
   ...heightPropDefs,
 } satisfies {
   size: PropDef<(typeof contentSizes)[number]>;
-  material: PropDef<(typeof materials)[number] | undefined>;
   width: PropDef<string>;
   minWidth: PropDef<string>;
   maxWidth: PropDef<string>;

package/src/components/combobox.tsx

@@ -25,6 +25,7 @@ import { useCallbackRef, useComposedRefs, useControllableState, useLayoutEffect
 import { Command as CommandPrimitive, useCommandState } from 'cmdk';
 
 import { extractProps } from '../helpers/extract-props.js';
+import { useThemeSize } from '../helpers/theme-size.js';
 import { comboboxRootPropDefs, comboboxTriggerPropDefs, comboboxContentPropDefs } from './combobox.props.js';
 import { marginPropDefs } from '../props/margin.props.js';
 import { ChevronDownIcon, ThickCheckIcon } from './icons.js';
@@ -133,7 +134,6 @@ const ComboboxItemContext = React.createContext<ComboboxItemContextValue | null>
 interface ComboboxContentContextValue {
   sizeClassName?: string;
   color?: string;
-  material?: string;
   label?: string;
 }
 
@@ -207,7 +207,7 @@ function readElementLabel(el: HTMLElement): string | undefined {
 const ComboboxRoot: React.FC<ComboboxRootProps> = (props) => {
   const {
     children,
-    size = comboboxRootPropDefs.size.default,
+    size: sizeProp,
     value: valueProp,
     defaultValue = null,
     onValueChange,
@@ -229,6 +229,7 @@ const ComboboxRoot: React.FC<ComboboxRootProps> = (props) => {
     displayValue: displayValueProp,
     ...rootProps
   } = props;
+  const size = useThemeSize(sizeProp, comboboxRootPropDefs.size);
 
   const [open, setOpen] = useControllableState({
     prop: openProp,
@@ -333,14 +334,12 @@ const ComboboxTrigger = React.forwardRef<ComboboxTriggerElement, ComboboxTrigger
     loading,
     color,
     radius,
-    material,
     onClick,
     onKeyDown,
     type: buttonType,
     ...triggerProps
   } = extractProps({ size: ctx.size, ...props }, triggerSizingPropDefs, comboboxTriggerPropDefs, marginPropDefs);
 
-  const resolvedMaterial = material;
   const isDisabled = disabled ?? ctx.disabled;
   const resolvedColor = color ?? ctx.color;
   // Read-only and loading triggers stay focusable but do not open.
@@ -408,7 +407,6 @@ const ComboboxTrigger = React.forwardRef<ComboboxTriggerElement, ComboboxTrigger
       <button
         data-accent-color={resolvedColor}
         data-radius={radius}
-        data-material={resolvedMaterial}
         data-error={error}
         data-loading={loading}
         data-disabled={isDisabled || undefined}
@@ -488,8 +486,6 @@ const ComboboxContent = React.forwardRef<ComboboxContentElement, ComboboxContent
   const ctx = useComboboxContext('Content');
   const themeContext = useThemeContext();
 
-
-  const material = props.material ?? themeContext.material;
   // Menus stop at size 3; a size 4 field opens a size 3 list.
   const rootSize = ctx.size === '4' ? '3' : ctx.size;
   const size = props.size ?? rootSize ?? comboboxContentPropDefs.size.default;
@@ -500,7 +496,6 @@ const ComboboxContent = React.forwardRef<ComboboxContentElement, ComboboxContent
     color,
     forceMount,
     container,
-    material: _material,
     onOpenAutoFocus,
     'aria-label': _ariaLabel,
     'aria-labelledby': ariaLabelledByProp,
@@ -528,10 +523,9 @@ const ComboboxContent = React.forwardRef<ComboboxContentElement, ComboboxContent
       // Responsive-aware size class for the search field (never String() a responsive object).
       sizeClassName: extractProps({ size }, contentSizePropDefs).className || undefined,
       color: resolvedColor,
-      material,
       label,
     }),
-    [size, resolvedColor, material, label],
+    [size, resolvedColor, label],
   );
 
   const commandRef = React.useRef<HTMLDivElement>(null);
@@ -556,7 +550,6 @@ const ComboboxContent = React.forwardRef<ComboboxContentElement, ComboboxContent
       <Theme asChild>
         <PopoverPrimitive.Content
           data-accent-color={resolvedColor}
-          data-material={material}
           align="start"
           sideOffset={4}
           collisionPadding={10}
@@ -619,7 +612,6 @@ const ComboboxInput = React.forwardRef<ComboboxInputElement, ComboboxInputProps>
       <div
         className={classNames('rt-TextFieldRoot', 'rt-ComboboxInputRoot', contentContext?.sizeClassName, `rt-variant-${textFieldVariant}`)}
         data-accent-color={contentContext?.color}
-        data-material={contentContext?.material}
       >
         {startAdornment ? <div className="rt-TextFieldSlot">{startAdornment}</div> : null}
         <CommandPrimitive.Input

package/src/components/context-menu.tsx

@@ -21,12 +21,12 @@ import {
 import { Theme, useThemeContext } from './theme.js';
 import { ThickCheckIcon, ThickChevronRightIcon, ThickDotIcon } from './icons.js';
 import { extractProps } from '../helpers/extract-props.js';
+import { useThemeSizeProps } from '../helpers/theme-size.js';
 import { requireReactElement } from '../helpers/require-react-element.js';
 import { MenuProvider } from './_internal/menu-context.js';
 import {
   MenuShortcut,
   getMenuAlignOffset,
-  resolveMenuMaterial,
   toAriaKeyShortcuts,
   useResolvedResponsiveValue,
 } from './_internal/base-menu.utils.js';
@@ -59,7 +59,6 @@ type ContextMenuSurfaceProps = GetPropDefTypes<typeof contextMenuContentPropDefs
 type ContextMenuContentContextValue = {
   size?: ContextMenuSurfaceProps['size'];
   color?: ContextMenuSurfaceProps['color'];
-  material?: ContextMenuSurfaceProps['material'];
 };
 const ContextMenuContentContext = React.createContext<ContextMenuContentContextValue>({});
 type ContextMenuContentElement = React.ElementRef<typeof ContextMenuPrimitive.Content>;
@@ -78,11 +77,9 @@ interface ContextMenuContentProps
   submenuBehavior?: Responsive<'cascade' | 'drill-down'>;
 }
 const ContextMenuContent = React.forwardRef<ContextMenuContentElement, ContextMenuContentProps>(
-  (props, forwardedRef) => {
+  (ownProps, forwardedRef) => {
+    const props = useThemeSizeProps(ownProps, contextMenuContentPropDefs.size);
     const themeContext = useThemeContext();
-
-
-    const material = resolveMenuMaterial(props.material, themeContext);
     const {
       size = contextMenuContentPropDefs.size.default,
     } = props;
@@ -92,7 +89,6 @@ const ContextMenuContent = React.forwardRef<ContextMenuContentElement, ContextMe
       color,
       container,
       forceMount,
-      material: _material,
       submenuBehavior: _submenuBehavior,
       virtualized = false,
       ...contentProps
@@ -102,8 +98,8 @@ const ContextMenuContent = React.forwardRef<ContextMenuContentElement, ContextMe
     const scalarSize = useResolvedResponsiveValue(size, contextMenuContentPropDefs.size.default);
 
     const contextValue = React.useMemo(
-      () => ({ size, color: resolvedColor, material }),
-      [size, resolvedColor, material],
+      () => ({ size, color: resolvedColor }),
+      [size, resolvedColor],
     );
 
     const body = (
@@ -117,8 +113,7 @@ const ContextMenuContent = React.forwardRef<ContextMenuContentElement, ContextMe
         <Theme asChild>
           <ContextMenuPrimitive.Content
             data-accent-color={resolvedColor}
-            data-material={material}
-            alignOffset={getMenuAlignOffset(scalarSize, themeContext.scaling)}
+            alignOffset={getMenuAlignOffset(scalarSize)}
             collisionPadding={10}
             {...contentProps}
             asChild={false}
@@ -355,14 +350,10 @@ const ContextMenuSubContent = React.forwardRef<
   ContextMenuSubContentProps
 >((props, forwardedRef) => {
   const parent = React.useContext(ContextMenuContentContext);
-  const themeContext = useThemeContext();
-
 
   // A submenu inherits the parent surface, and its own props win.
   const size = props.size ?? parent.size;
   const color = props.color ?? parent.color;
-  const material =
-    props.material ?? parent.material ?? resolveMenuMaterial(undefined, themeContext);
 
   const {
     className,
@@ -370,7 +361,6 @@ const ContextMenuSubContent = React.forwardRef<
     container,
     forceMount,
     color: _color,
-    material: _material,
     virtualized = false,
     ...subContentProps
   } = extractProps({ ...props, size }, contextMenuSubContentPropDefs);
@@ -378,8 +368,8 @@ const ContextMenuSubContent = React.forwardRef<
   const scalarSize = useResolvedResponsiveValue(size, contextMenuSubContentPropDefs.size.default);
 
   const contextValue = React.useMemo(
-    () => ({ size, color, material }),
-    [size, color, material],
+    () => ({ size, color }),
+    [size, color],
   );
 
   const body = (
@@ -393,8 +383,7 @@ const ContextMenuSubContent = React.forwardRef<
       <Theme asChild>
         <ContextMenuPrimitive.SubContent
           data-accent-color={color}
-          data-material={material}
-          alignOffset={getMenuAlignOffset(scalarSize, themeContext.scaling)}
+          alignOffset={getMenuAlignOffset(scalarSize)}
           // Side offset accounts for the outer solid box-shadow
           sideOffset={1}
           collisionPadding={10}

package/src/components/data-list.css

@@ -81,13 +81,13 @@
 @breakpoints {
   .rt-DataListRoot {
     &:where(.rt-r-size-1) {
-      gap: var(--space-3);
+      gap: var(--space-4);
     }
     &:where(.rt-r-size-2) {
-      gap: var(--space-4);
+      gap: var(--space-5);
     }
     &:where(.rt-r-size-3) {
-      gap: calc(var(--space-4) * 1.25);
+      gap: calc(var(--space-5) * 1.25);
     }
   }
 }
@@ -113,7 +113,7 @@
 
         display: flex;
         flex-direction: column;
-        gap: var(--space-1);
+        gap: var(--space-2);
       }
 
       & :where(.rt-DataListLabel) {

package/src/components/data-list.tsx

@@ -8,6 +8,7 @@ import {
   dataListLabelPropDefs,
 } from './data-list.props.js';
 import { extractProps } from '../helpers/extract-props.js';
+import { useThemeSizeProps } from '../helpers/theme-size.js';
 import { marginPropDefs } from '../props/margin.props.js';
 
 import type { MarginProps } from '../props/margin.props.js';
@@ -21,7 +22,8 @@ interface DataListRootProps
     MarginProps,
     DataListRootOwnProps {}
 const DataListRoot = React.forwardRef<DataListRootElement, DataListRootProps>(
-  (props, forwardedRef) => {
+  (ownProps, forwardedRef) => {
+    const props = useThemeSizeProps(ownProps, dataListRootPropDefs.size);
     const { className, ...dataListProps } = extractProps(
       props,
       dataListRootPropDefs,

package/src/components/dialog.css

@@ -1,13 +1 @@
 @import './_internal/base-dialog.css';
-
-/* Add blur effect to Dialog overlay */
-.rt-DialogOverlay::before {
-  backdrop-filter: var(--backdrop-filter-components) !important;
-}
-
-/* Safari backdrop-filter fallback */
-@supports not (backdrop-filter: blur(1px)) {
-  .rt-DialogOverlay::before {
-    backdrop-filter: none !important;
-  }
-}