@seed-design/react 2.5.1 → 3.0.0

package/src/components/Popover/index.ts

@@ -0,0 +1,32 @@
+export {
+  PopoverAction,
+  PopoverAnchor,
+  PopoverArrow,
+  PopoverArrowTip,
+  PopoverBody,
+  PopoverCloseButton,
+  PopoverContent,
+  PopoverDescription,
+  PopoverFooter,
+  PopoverHeader,
+  PopoverPositioner,
+  PopoverRoot,
+  PopoverTitle,
+  PopoverTrigger,
+  type PopoverActionProps,
+  type PopoverAnchorProps,
+  type PopoverArrowProps,
+  type PopoverArrowTipProps,
+  type PopoverBodyProps,
+  type PopoverCloseButtonProps,
+  type PopoverContentProps,
+  type PopoverDescriptionProps,
+  type PopoverFooterProps,
+  type PopoverHeaderProps,
+  type PopoverPositionerProps,
+  type PopoverRootProps,
+  type PopoverTitleProps,
+  type PopoverTriggerProps,
+} from "./Popover";
+
+export * as Popover from "./Popover.namespace";

package/src/components/QuantityPicker/QuantityPicker.tsx

@@ -118,6 +118,8 @@ export const QuantityPickerRoot = React.forwardRef<HTMLDivElement, QuantityPicke
 
     return (
       <ClassNamesProvider value={classNames}>
+        {/* TODO: `asChild` cannot work here — `withDividers` turns `children` into several
+            elements, which `Slot` refuses. Route them through `Slottable`, or drop `asChild`. */}
         <QuantityPickerPrimitive.Root
           ref={ref}
           className={clsx(classNames.root, className)}

package/src/components/RadioGroup/RadioGroup.namespace.ts

@@ -7,6 +7,7 @@ export {
   RadioGroupItemHiddenInput as ItemHiddenInput,
   type RadioGroupRootProps as RootProps,
   type RadioGroupItemProps as ItemProps,
+  type RadioGroupItemPrimitiveProps as ItemPrimitiveProps,
   type RadioGroupItemLabelProps as ItemLabelProps,
   type RadioGroupItemControlProps as ItemControlProps,
   type RadioGroupItemIndicatorProps as ItemIndicatorProps,

package/src/components/RadioGroup/RadioGroup.tsx

@@ -41,6 +41,8 @@ export interface RadioGroupItemProps
     RadiomarkVariantProps,
     RadioGroupPrimitive.ItemProps {}
 
+export interface RadioGroupItemPrimitiveProps extends RadioGroupPrimitive.ItemProps {}
+
 export const RadioGroupItem = Object.assign(
   forwardRef<HTMLLabelElement, RadioGroupItemProps>(({ className, ...props }, ref) => {
     const [{ radio: radioVariantProps, radiomark: radiomarkVariantProps }, otherProps] =

package/src/components/RadioGroup/index.ts

@@ -7,6 +7,7 @@ export {
   RadioGroupItemHiddenInput,
   type RadioGroupRootProps,
   type RadioGroupItemProps,
+  type RadioGroupItemPrimitiveProps,
   type RadioGroupItemLabelProps,
   type RadioGroupItemControlProps,
   type RadioGroupItemIndicatorProps,

package/src/components/RadioGroupField/RadioGroupField.namespace.ts

@@ -8,6 +8,7 @@ export {
   RadioGroupFieldDescription as Description,
   RadioGroupFieldErrorMessage as ErrorMessage,
   type RadioGroupFieldRootProps as RootProps,
+  type RadioGroupFieldRootPrimitiveProps as RootPrimitiveProps,
   type RadioGroupFieldHeaderProps as HeaderProps,
   type RadioGroupFieldLabelProps as LabelProps,
   type RadioGroupFieldIndicatorTextProps as IndicatorTextProps,

package/src/components/RadioGroupField/RadioGroupField.tsx

@@ -23,9 +23,11 @@ export interface RadioGroupFieldRootProps
   extends FieldVariantProps,
     RadioGroupPrimitive.RootProps {}
 
-export const RadioGroupFieldRoot = withProvider<HTMLDivElement, RadioGroupFieldRootProps>(
-  RadioGroupPrimitive.Root,
-  "root",
+export interface RadioGroupFieldRootPrimitiveProps extends RadioGroupPrimitive.RootProps {}
+
+export const RadioGroupFieldRoot = Object.assign(
+  withProvider<HTMLDivElement, RadioGroupFieldRootProps>(RadioGroupPrimitive.Root, "root"),
+  { Primitive: RadioGroupPrimitive.Root },
 );
 
 ////////////////////////////////////////////////////////////////////////////////////

package/src/components/ResponsiveDialog/ResponsiveDialog.tsx

@@ -18,26 +18,26 @@ import {
 } from "../BottomSheet";
 import { BottomSheetHandle } from "../BottomSheetHandle";
 import {
-  type ContentDialog,
-  ContentDialogAction,
-  ContentDialogBackdrop,
-  ContentDialogBody,
-  ContentDialogCloseButton,
-  ContentDialogContent,
-  ContentDialogDescription,
-  ContentDialogFooter,
-  ContentDialogHeader,
-  ContentDialogPositioner,
-  ContentDialogRoot,
-  ContentDialogTitle,
-  ContentDialogTrigger,
-} from "../ContentDialog";
-
-type SharedProps<ContentDialogProps, BottomSheetProps> = Pick<
-  ContentDialogProps,
-  Extract<keyof ContentDialogProps, keyof BottomSheetProps>
+  type Dialog,
+  DialogAction,
+  DialogBackdrop,
+  DialogBody,
+  DialogCloseButton,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogPositioner,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../Dialog";
+
+type SharedProps<DialogProps, BottomSheetProps> = Pick<
+  DialogProps,
+  Extract<keyof DialogProps, keyof BottomSheetProps>
 > &
-  Pick<BottomSheetProps, Extract<keyof BottomSheetProps, keyof ContentDialogProps>>;
+  Pick<BottomSheetProps, Extract<keyof BottomSheetProps, keyof DialogProps>>;
 
 interface ResponsiveDialogContextValue {
   shouldUseBottomSheet: boolean | undefined;
@@ -67,11 +67,8 @@ export interface ResponsiveDialogRootProps {
    */
   dialogBreakpoint?: Exclude<Breakpoint, "base">;
 
-  /** Props forwarded to the underlying ContentDialog root (at and above the breakpoint). */
-  dialogRootProps?: Omit<
-    ContentDialog.RootProps,
-    "children" | "open" | "defaultOpen" | "onOpenChange"
-  >;
+  /** Props forwarded to the underlying Dialog root (at and above the breakpoint). */
+  dialogRootProps?: Omit<Dialog.RootProps, "children" | "open" | "defaultOpen" | "onOpenChange">;
 
   /** Props forwarded to the underlying BottomSheet root (below the breakpoint). */
   bottomSheetRootProps?: Omit<
@@ -117,9 +114,9 @@ export const ResponsiveDialogRoot = ({
           {children}
         </BottomSheetRoot>
       ) : (
-        <ContentDialogRoot {...dialogRootProps} open={open} onOpenChange={setOpen}>
+        <DialogRoot {...dialogRootProps} open={open} onOpenChange={setOpen}>
           {children}
-        </ContentDialogRoot>
+        </DialogRoot>
       )}
     </ResponsiveDialogContext.Provider>
   );
@@ -127,7 +124,7 @@ export const ResponsiveDialogRoot = ({
 ResponsiveDialogRoot.displayName = "ResponsiveDialogRoot";
 
 export interface ResponsiveDialogTriggerProps
-  extends SharedProps<ContentDialog.TriggerProps, BottomSheet.TriggerProps> {}
+  extends SharedProps<Dialog.TriggerProps, BottomSheet.TriggerProps> {}
 
 export const ResponsiveDialogTrigger = React.forwardRef<
   HTMLButtonElement,
@@ -138,13 +135,13 @@ export const ResponsiveDialogTrigger = React.forwardRef<
   return shouldUseBottomSheet ? (
     <BottomSheetTrigger ref={ref} {...props} />
   ) : (
-    <ContentDialogTrigger ref={ref} {...props} />
+    <DialogTrigger ref={ref} {...props} />
   );
 });
 ResponsiveDialogTrigger.displayName = "ResponsiveDialogTrigger";
 
 export interface ResponsiveDialogPositionerProps
-  extends SharedProps<ContentDialog.PositionerProps, BottomSheet.PositionerProps> {}
+  extends SharedProps<Dialog.PositionerProps, BottomSheet.PositionerProps> {}
 
 export const ResponsiveDialogPositioner = React.forwardRef<
   HTMLDivElement,
@@ -155,13 +152,13 @@ export const ResponsiveDialogPositioner = React.forwardRef<
   return shouldUseBottomSheet ? (
     <BottomSheetPositioner ref={ref} {...props} />
   ) : (
-    <ContentDialogPositioner ref={ref} {...props} />
+    <DialogPositioner ref={ref} {...props} />
   );
 });
 ResponsiveDialogPositioner.displayName = "ResponsiveDialogPositioner";
 
 export interface ResponsiveDialogBackdropProps
-  extends SharedProps<ContentDialog.BackdropProps, BottomSheet.BackdropProps> {}
+  extends SharedProps<Dialog.BackdropProps, BottomSheet.BackdropProps> {}
 
 export const ResponsiveDialogBackdrop = React.forwardRef<
   HTMLDivElement,
@@ -172,13 +169,13 @@ export const ResponsiveDialogBackdrop = React.forwardRef<
   return shouldUseBottomSheet ? (
     <BottomSheetBackdrop ref={ref} {...props} />
   ) : (
-    <ContentDialogBackdrop ref={ref} {...props} />
+    <DialogBackdrop ref={ref} {...props} />
   );
 });
 ResponsiveDialogBackdrop.displayName = "ResponsiveDialogBackdrop";
 
 export interface ResponsiveDialogContentProps
-  extends SharedProps<ContentDialog.ContentProps, BottomSheet.ContentProps> {}
+  extends SharedProps<Dialog.ContentProps, BottomSheet.ContentProps> {}
 
 export const ResponsiveDialogContent = React.forwardRef<
   HTMLDivElement,
@@ -189,13 +186,13 @@ export const ResponsiveDialogContent = React.forwardRef<
   return shouldUseBottomSheet ? (
     <BottomSheetContent ref={ref} {...props} />
   ) : (
-    <ContentDialogContent ref={ref} {...props} />
+    <DialogContent ref={ref} {...props} />
   );
 });
 ResponsiveDialogContent.displayName = "ResponsiveDialogContent";
 
 export interface ResponsiveDialogHeaderProps
-  extends SharedProps<ContentDialog.HeaderProps, BottomSheet.HeaderProps> {}
+  extends SharedProps<Dialog.HeaderProps, BottomSheet.HeaderProps> {}
 
 export const ResponsiveDialogHeader = React.forwardRef<HTMLDivElement, ResponsiveDialogHeaderProps>(
   (props, ref) => {
@@ -204,14 +201,14 @@ export const ResponsiveDialogHeader = React.forwardRef<HTMLDivElement, Responsiv
     return shouldUseBottomSheet ? (
       <BottomSheetHeader ref={ref} {...props} />
     ) : (
-      <ContentDialogHeader ref={ref} {...props} />
+      <DialogHeader ref={ref} {...props} />
     );
   },
 );
 ResponsiveDialogHeader.displayName = "ResponsiveDialogHeader";
 
 export interface ResponsiveDialogTitleProps
-  extends SharedProps<ContentDialog.TitleProps, BottomSheet.TitleProps> {}
+  extends SharedProps<Dialog.TitleProps, BottomSheet.TitleProps> {}
 
 export const ResponsiveDialogTitle = React.forwardRef<
   HTMLHeadingElement,
@@ -222,13 +219,13 @@ export const ResponsiveDialogTitle = React.forwardRef<
   return shouldUseBottomSheet ? (
     <BottomSheetTitle ref={ref} {...props} />
   ) : (
-    <ContentDialogTitle ref={ref} {...props} />
+    <DialogTitle ref={ref} {...props} />
   );
 });
 ResponsiveDialogTitle.displayName = "ResponsiveDialogTitle";
 
 export interface ResponsiveDialogDescriptionProps
-  extends SharedProps<ContentDialog.DescriptionProps, BottomSheet.DescriptionProps> {}
+  extends SharedProps<Dialog.DescriptionProps, BottomSheet.DescriptionProps> {}
 
 export const ResponsiveDialogDescription = React.forwardRef<
   HTMLParagraphElement,
@@ -239,13 +236,13 @@ export const ResponsiveDialogDescription = React.forwardRef<
   return shouldUseBottomSheet ? (
     <BottomSheetDescription ref={ref} {...props} />
   ) : (
-    <ContentDialogDescription ref={ref} {...props} />
+    <DialogDescription ref={ref} {...props} />
   );
 });
 ResponsiveDialogDescription.displayName = "ResponsiveDialogDescription";
 
 export interface ResponsiveDialogBodyProps
-  extends SharedProps<ContentDialog.BodyProps, BottomSheet.BodyProps> {}
+  extends SharedProps<Dialog.BodyProps, BottomSheet.BodyProps> {}
 
 export const ResponsiveDialogBody = React.forwardRef<HTMLDivElement, ResponsiveDialogBodyProps>(
   (props, ref) => {
@@ -254,14 +251,14 @@ export const ResponsiveDialogBody = React.forwardRef<HTMLDivElement, ResponsiveD
     return shouldUseBottomSheet ? (
       <BottomSheetBody ref={ref} {...props} />
     ) : (
-      <ContentDialogBody ref={ref} {...props} />
+      <DialogBody ref={ref} {...props} />
     );
   },
 );
 ResponsiveDialogBody.displayName = "ResponsiveDialogBody";
 
 export interface ResponsiveDialogFooterProps
-  extends SharedProps<ContentDialog.FooterProps, BottomSheet.FooterProps> {}
+  extends SharedProps<Dialog.FooterProps, BottomSheet.FooterProps> {}
 
 export const ResponsiveDialogFooter = React.forwardRef<HTMLDivElement, ResponsiveDialogFooterProps>(
   (props, ref) => {
@@ -270,7 +267,7 @@ export const ResponsiveDialogFooter = React.forwardRef<HTMLDivElement, Responsiv
     return shouldUseBottomSheet ? (
       <BottomSheetFooter ref={ref} {...props} />
     ) : (
-      <ContentDialogFooter ref={ref} {...props} />
+      <DialogFooter ref={ref} {...props} />
     );
   },
 );
@@ -281,7 +278,7 @@ ResponsiveDialogFooter.displayName = "ResponsiveDialogFooter";
  * composed with an action button via `asChild`.
  */
 export interface ResponsiveDialogActionProps
-  extends SharedProps<ContentDialog.ActionProps, Drawer.CloseButtonProps> {}
+  extends SharedProps<Dialog.ActionProps, Drawer.CloseButtonProps> {}
 
 export const ResponsiveDialogAction = React.forwardRef<
   HTMLButtonElement,
@@ -292,13 +289,13 @@ export const ResponsiveDialogAction = React.forwardRef<
   return shouldUseBottomSheet ? (
     <Drawer.CloseButton ref={ref} {...props} />
   ) : (
-    <ContentDialogAction ref={ref} {...props} />
+    <DialogAction ref={ref} {...props} />
   );
 });
 ResponsiveDialogAction.displayName = "ResponsiveDialogAction";
 
 export interface ResponsiveDialogCloseButtonProps
-  extends SharedProps<ContentDialog.CloseButtonProps, BottomSheet.CloseButtonProps> {}
+  extends SharedProps<Dialog.CloseButtonProps, BottomSheet.CloseButtonProps> {}
 
 export const ResponsiveDialogCloseButton = React.forwardRef<
   HTMLButtonElement,
@@ -309,7 +306,7 @@ export const ResponsiveDialogCloseButton = React.forwardRef<
   return shouldUseBottomSheet ? (
     <BottomSheetCloseButton ref={ref} {...props} />
   ) : (
-    <ContentDialogCloseButton ref={ref} {...props} />
+    <DialogCloseButton ref={ref} {...props} />
   );
 });
 ResponsiveDialogCloseButton.displayName = "ResponsiveDialogCloseButton";

package/src/components/SegmentedControl/SegmentedControl.tsx

@@ -5,6 +5,7 @@ import {
 import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
 import { SegmentedControl as SegmentedControlPrimitive } from "@seed-design/react-segmented-control";
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
+import { withContentScale } from "../../utils/withContentScale";
 
 const { withProvider, withContext } = createSlotRecipeContext(segmentedControl);
 
@@ -28,9 +29,8 @@ export const SegmentedControlIndicator = withContext<
 
 export interface SegmentedControlItemProps extends SegmentedControlPrimitive.ItemProps {}
 
-export const SegmentedControlItem = withContext<HTMLLabelElement, SegmentedControlItemProps>(
-  SegmentedControlPrimitive.Item,
-  "item",
+export const SegmentedControlItem = withContentScale(
+  withContext<HTMLLabelElement, SegmentedControlItemProps>(SegmentedControlPrimitive.Item, "item"),
 );
 
 export interface SegmentedControlItemHiddenInputProps

package/src/components/Select/Select.tsx

@@ -19,6 +19,7 @@ import * as React from "react";
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
 import { createWithStateProps } from "../../utils/createWithStateProps";
 import { splitMultipleVariantsProps } from "../../utils/splitMultipleVariantsProps";
+import { withContentScale } from "../../utils/withContentScale";
 import { InternalIcon, type InternalIconProps } from "../private/Icon";
 
 // A select-only combobox spans three specs — the trigger, the floating listbox
@@ -96,8 +97,8 @@ export interface SelectTriggerProps
   extends SelectTriggerVariantProps,
     SelectPrimitive.TriggerProps {}
 
-export const SelectTrigger = React.forwardRef<HTMLButtonElement, SelectTriggerProps>(
-  ({ className, ...props }, ref) => {
+export const SelectTrigger = withContentScale(
+  React.forwardRef<HTMLButtonElement, SelectTriggerProps>(({ className, ...props }, ref) => {
     const [variantProps, otherProps] = selectTrigger.splitVariantProps(props);
     const rootProps = useTriggerProps();
 
@@ -138,7 +139,7 @@ export const SelectTrigger = React.forwardRef<HTMLButtonElement, SelectTriggerPr
         />
       </TriggerClassNamesProvider>
     );
-  },
+  }),
 );
 SelectTrigger.displayName = "SelectTrigger";
 
@@ -290,8 +291,8 @@ export interface SelectItemProps
   prefixIcon?: React.ReactNode;
 }
 
-export const SelectItem = React.forwardRef<HTMLDivElement, SelectItemProps>(
-  ({ prefixIcon, className, ...props }, ref) => {
+export const SelectItem = withContentScale(
+  React.forwardRef<HTMLDivElement, SelectItemProps>(({ prefixIcon, className, ...props }, ref) => {
     const [variantProps, otherProps] = selectItem.splitVariantProps(props);
     const rootProps = useItemProps();
 
@@ -307,7 +308,7 @@ export const SelectItem = React.forwardRef<HTMLDivElement, SelectItemProps>(
         />
       </ItemClassNamesProvider>
     );
-  },
+  }),
 );
 SelectItem.displayName = "SelectItem";
 

package/src/components/SelectBox/CheckSelectBox.tsx

@@ -1,4 +1,5 @@
-import { composeRefs } from "@radix-ui/react-compose-refs";
+import { composeRefs, useComposedRefs } from "@radix-ui/react-compose-refs";
+import { Slottable } from "@radix-ui/react-slot";
 import { selectBox, type SelectBoxVariantProps } from "@seed-design/css/recipes/select-box";
 import {
   selectBoxCheckmark,
@@ -16,6 +17,7 @@ import {
   useCollapsibleContext,
 } from "@seed-design/react-collapsible";
 import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import { ContentScale, useScaleFeedback } from "@seed-design/react-scale-feedback";
 import clsx from "clsx";
 import {
   createContext,
@@ -114,6 +116,13 @@ export interface CheckSelectBoxRootProps
   footerVisibility?: "when-selected" | "when-not-selected" | "always";
 }
 
+/**
+ * Assembled by hand instead of through `withContentScale`, because the footer provider has to
+ * sit inside the element to read the checkbox context, and `Slot` only recognises a `Slottable`
+ * among its direct children. Wrapping the HOC's `Slottable` in the provider would hide it, and
+ * `Slot` would then fall back to slotting onto the provider, which drops the class and the ref.
+ * Owning both here keeps the provider inside the content scale box, below the `Slottable`.
+ */
 export const CheckSelectBoxRoot = forwardRef<HTMLLabelElement, CheckSelectBoxRootProps>(
   ({ footerVisibility = "when-selected", className, children, ...props }, ref) => {
     const [variantProps, otherProps] = selectBox.splitVariantProps(props);
@@ -122,20 +131,29 @@ export const CheckSelectBoxRoot = forwardRef<HTMLLabelElement, CheckSelectBoxRoo
       ...variantProps,
     });
 
+    const { scaleFeedbackRef, scaleFeedbackClassName } = useScaleFeedback();
+    const composedRef = useComposedRefs(scaleFeedbackRef, ref);
+
     return (
       <ClassNamesProvider value={classNames}>
         <CheckboxPrimitive.Root
-          ref={ref}
-          className={clsx(classNames.root, className)}
+          ref={composedRef}
+          className={clsx(scaleFeedbackClassName, classNames.root, className)}
           {...otherProps}
         >
-          {footerVisibility === "always" ? (
-            children
-          ) : (
-            <FooterVisibilityProvider footerVisibility={footerVisibility}>
-              {children}
-            </FooterVisibilityProvider>
-          )}
+          <Slottable child={children}>
+            {(content) => (
+              <ContentScale>
+                {footerVisibility === "always" ? (
+                  content
+                ) : (
+                  <FooterVisibilityProvider footerVisibility={footerVisibility}>
+                    {content}
+                  </FooterVisibilityProvider>
+                )}
+              </ContentScale>
+            )}
+          </Slottable>
         </CheckboxPrimitive.Root>
       </ClassNamesProvider>
     );

package/src/components/SelectBox/RadioSelectBox.tsx

@@ -1,4 +1,5 @@
-import { composeRefs } from "@radix-ui/react-compose-refs";
+import { composeRefs, useComposedRefs } from "@radix-ui/react-compose-refs";
+import { Slottable } from "@radix-ui/react-slot";
 import { selectBox, type SelectBoxVariantProps } from "@seed-design/css/recipes/select-box";
 import {
   selectBoxGroup,
@@ -15,6 +16,7 @@ import {
   RadioGroup as RadioGroupPrimitive,
   useRadioGroupItemContext,
 } from "@seed-design/react-radio-group";
+import { ContentScale, useScaleFeedback } from "@seed-design/react-scale-feedback";
 import {
   createContext,
   forwardRef,
@@ -113,6 +115,13 @@ export interface RadioSelectBoxItemProps
   footerVisibility?: "when-selected" | "when-not-selected" | "always";
 }
 
+/**
+ * Assembled by hand instead of through `withContentScale`, because the footer provider has to
+ * sit inside the element to read the radio item context, and `Slot` only recognises a `Slottable`
+ * among its direct children. Wrapping the HOC's `Slottable` in the provider would hide it, and
+ * `Slot` would then fall back to slotting onto the provider, which drops the class and the ref.
+ * Owning both here keeps the provider inside the content scale box, below the `Slottable`.
+ */
 export const RadioSelectBoxItem = forwardRef<HTMLLabelElement, RadioSelectBoxItemProps>(
   ({ footerVisibility = "when-selected", className, children, ...props }, ref) => {
     const [variantProps, otherProps] = selectBox.splitVariantProps(props);
@@ -121,20 +130,29 @@ export const RadioSelectBoxItem = forwardRef<HTMLLabelElement, RadioSelectBoxIte
       ...variantProps,
     });
 
+    const { scaleFeedbackRef, scaleFeedbackClassName } = useScaleFeedback();
+    const composedRef = useComposedRefs(scaleFeedbackRef, ref);
+
     return (
       <ClassNamesProvider value={classNames}>
         <RadioGroupPrimitive.Item
-          ref={ref}
-          className={clsx(classNames.root, className)}
+          ref={composedRef}
+          className={clsx(scaleFeedbackClassName, classNames.root, className)}
           {...otherProps}
         >
-          {footerVisibility === "always" ? (
-            children
-          ) : (
-            <FooterVisibilityProvider footerVisibility={footerVisibility}>
-              {children}
-            </FooterVisibilityProvider>
-          )}
+          <Slottable child={children}>
+            {(content) => (
+              <ContentScale>
+                {footerVisibility === "always" ? (
+                  content
+                ) : (
+                  <FooterVisibilityProvider footerVisibility={footerVisibility}>
+                    {content}
+                  </FooterVisibilityProvider>
+                )}
+              </ContentScale>
+            )}
+          </Slottable>
         </RadioGroupPrimitive.Item>
       </ClassNamesProvider>
     );