@womp/kookie-ui 0.17.0 → 0.19.0

package/src/components/kbd.css

@@ -20,7 +20,7 @@
   min-width: 1.75em;
   box-sizing: border-box;
   word-spacing: var(--raised-word-spacing);
-  border-radius: var(--radius-pill-2);
+  border-radius: var(--radius-control-2);
   
   /* Default sizing (size 2) */
   font-size: var(--font-size-1);
@@ -141,91 +141,91 @@
       line-height: var(--line-height-0);
       letter-spacing: var(--letter-spacing-0);
       padding: calc(var(--space-2) * 0.5) calc(var(--space-2) * 1.5);
-      border-radius: var(--radius-pill-1);
+      border-radius: var(--radius-control-1);
     }
     &:where(.rt-r-size-1) {
       font-size: var(--font-size-1);
       line-height: var(--line-height-1);
       letter-spacing: var(--letter-spacing-1);
       padding: var(--space-2) var(--space-3);
-      border-radius: var(--radius-pill-2);
+      border-radius: var(--radius-control-2);
     }
     &:where(.rt-r-size-2) {
       font-size: var(--font-size-2);
       line-height: var(--line-height-2);
       letter-spacing: var(--letter-spacing-2);
       padding: var(--space-2) calc(var(--space-3) * 1.25);
-      border-radius: var(--radius-pill-2);
+      border-radius: var(--radius-control-2);
     }
     &:where(.rt-r-size-3) {
       font-size: var(--font-size-3);
       line-height: var(--line-height-3);
       letter-spacing: var(--letter-spacing-3);
       padding: calc(var(--space-2) * 1.25) calc(var(--space-3) * 1.5);
-      border-radius: var(--radius-pill-3);
+      border-radius: var(--radius-control-3);
     }
     &:where(.rt-r-size-4) {
       font-size: var(--font-size-4);
       line-height: var(--line-height-4);
       letter-spacing: var(--letter-spacing-4);
       padding: calc(var(--space-2) * 1.5) var(--space-4);
-      border-radius: var(--radius-pill-3);
+      border-radius: var(--radius-control-3);
     }
     &:where(.rt-r-size-5) {
       font-size: var(--font-size-5);
       line-height: var(--line-height-5);
       letter-spacing: var(--letter-spacing-5);
       padding: calc(var(--space-2) * 1.75) calc(var(--space-4) * 1.25);
-      border-radius: var(--radius-pill-4);
+      border-radius: var(--radius-control-4);
     }
     &:where(.rt-r-size-6) {
       font-size: var(--font-size-6);
       line-height: var(--line-height-6);
       letter-spacing: var(--letter-spacing-6);
       padding: var(--space-3) calc(var(--space-4) * 1.5);
-      border-radius: var(--radius-pill-4);
+      border-radius: var(--radius-control-4);
     }
     &:where(.rt-r-size-7) {
       font-size: var(--font-size-7);
       line-height: var(--line-height-7);
       letter-spacing: var(--letter-spacing-7);
       padding: calc(var(--space-3) * 1.25) var(--space-5);
-      border-radius: var(--radius-pill-5);
+      border-radius: var(--radius-control-4);
     }
     &:where(.rt-r-size-8) {
       font-size: var(--font-size-8);
       line-height: var(--line-height-8);
       letter-spacing: var(--letter-spacing-8);
       padding: calc(var(--space-3) * 1.5) calc(var(--space-5) * 1.25);
-      border-radius: var(--radius-pill-5);
+      border-radius: var(--radius-control-4);
     }
     &:where(.rt-r-size-9) {
       font-size: var(--font-size-9);
       line-height: var(--line-height-9);
       letter-spacing: var(--letter-spacing-9);
       padding: calc(var(--space-3) * 1.75) calc(var(--space-5) * 1.5);
-      border-radius: var(--radius-pill-6);
+      border-radius: var(--radius-control-4);
     }
     &:where(.rt-r-size-10) {
       font-size: var(--font-size-10);
       line-height: var(--line-height-10);
       letter-spacing: var(--letter-spacing-10);
       padding: calc(var(--space-3) * 2.0) calc(var(--space-5) * 1.75);
-      border-radius: var(--radius-pill-6);
+      border-radius: var(--radius-control-4);
     }
     &:where(.rt-r-size-11) {
       font-size: var(--font-size-11);
       line-height: var(--line-height-11);
       letter-spacing: var(--letter-spacing-11);
       padding: calc(var(--space-3) * 2.25) calc(var(--space-5) * 2.0);
-      border-radius: var(--radius-pill-6);
+      border-radius: var(--radius-control-4);
     }
     &:where(.rt-r-size-12) {
       font-size: var(--font-size-12);
       line-height: var(--line-height-12);
       letter-spacing: var(--letter-spacing-12);
       padding: calc(var(--space-3) * 2.5) calc(var(--space-5) * 2.25);
-      border-radius: var(--radius-pill-6);
+      border-radius: var(--radius-control-4);
     }
   }
 }

package/src/components/message-scroller.tsx

@@ -144,7 +144,7 @@ type ButtonProps = Omit<IconButtonProps, 'aria-label' | 'aria-labelledby' | 'var
  * Place it inside `Root`, after the viewport. It sits over the viewport's bottom edge.
  */
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ direction = 'end', behavior, className, children, size = '2', variant = 'surface', emphasis, color = 'gray', radius = 'full', 'aria-label': label, ...props }, forwardedRef) => (
+  ({ direction = 'end', behavior, className, children, size, variant = 'surface', emphasis, color = 'gray', radius = 'full', 'aria-label': label, ...props }, forwardedRef) => (
     <Primitive.Button
       direction={direction}
       {...(behavior ? { behavior } : {})}

package/src/components/navbar.tsx

@@ -9,6 +9,7 @@ import type { FlexProps } from './flex.js';
 
 import { navbarRootPropDefs } from './navbar.props.js';
 import { extractProps } from '../helpers/extract-props.js';
+import { useThemeSizeProps } from '../helpers/theme-size.js';
 
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
 import type { GetPropDefTypes } from '../props/prop-def.js';
@@ -35,7 +36,8 @@ interface NavbarRootProps
     NavbarRootOwnProps {}
 
 const NavbarRoot = React.forwardRef<NavbarRootElement, NavbarRootProps>(
-  (props, forwardedRef) => {
+  (ownProps, forwardedRef) => {
+    const props = useThemeSizeProps(ownProps, navbarRootPropDefs.size);
     const { children, className, ...rootProps } = extractProps(
       props,
       navbarRootPropDefs,

package/src/components/notice.css

@@ -10,7 +10,6 @@
   align-items: flex-start;
   min-width: 0;
   color: var(--accent-ink);
-  border-radius: var(--notice-radius);
 
   /* An alpha fill, so the strip is a tint of whatever it sits on, as Callout was. */
   background-color: var(--accent-a3);
@@ -65,29 +64,40 @@
 }
 
 .rt-NoticeRoot {
-  /* Callout's spacing: an even inset on every side, wider steps between icon, words and actions. */
+  /* v2 notice: a panel's padding, one gap at every size, and a corner concentric with the
+     buttons it holds (control corner + padding). At `none` the padding term drops out, so a
+     square theme stays square. */
+  gap: var(--layout-space-4);
+  --notice-corner-on: min(1, calc(var(--radius-factor, 1) * 1000));
+  border-radius: calc(var(--notice-control-radius) + var(--notice-padding) * var(--notice-corner-on));
+  padding: var(--notice-padding);
+
   &:where(.rt-r-size-1) {
-    gap: var(--space-3);
-    padding: var(--space-4);
+    --notice-padding: var(--panel-p-1);
+    --notice-control-radius: var(--radius-control-1);
     --notice-line: var(--line-height-1);
     --notice-control: var(--control-height-1);
-    --notice-radius: var(--radius-surface-1);
     --notice-icon-size: var(--content-icon-size-1);
   }
   &:where(.rt-r-size-2) {
-    gap: var(--space-4);
-    padding: var(--space-5);
+    --notice-padding: var(--panel-p-2);
+    --notice-control-radius: var(--radius-control-2);
     --notice-line: var(--line-height-2);
     --notice-control: var(--control-height-2);
-    --notice-radius: var(--radius-surface-2);
     --notice-icon-size: var(--content-icon-size-2);
   }
   &:where(.rt-r-size-3) {
-    gap: var(--space-5);
-    padding: var(--space-6);
+    --notice-padding: var(--panel-p-3);
+    --notice-control-radius: var(--radius-control-3);
     --notice-line: var(--line-height-3);
     --notice-control: var(--control-height-3);
-    --notice-radius: var(--radius-surface-3);
     --notice-icon-size: var(--content-icon-size-3);
   }
+  &:where(.rt-r-size-4) {
+    --notice-padding: var(--panel-p-4);
+    --notice-control-radius: var(--radius-control-4);
+    --notice-line: var(--line-height-4);
+    --notice-control: var(--control-height-4);
+    --notice-icon-size: var(--content-icon-size-4);
+  }
 }

package/src/components/notice.tsx

@@ -24,16 +24,20 @@ import classNames from 'classnames';
 import { Button } from './button.js';
 import { IconButton } from './icon-button.js';
 import { Text } from './text.js';
+import { useThemeSize } from '../helpers/theme-size.js';
 import { accentColorPropDef } from '../props/color.prop.js';
 
-type NoticeSize = '1' | '2' | '3';
+type NoticeSize = '1' | '2' | '3' | '4';
 
 /** The size a notice takes when it doesn't set one. `Chatbar.Root` provides its own size here. */
 const NoticeSizeContext = React.createContext<NoticeSize | undefined>(undefined);
+
+/** Notice's own range, the Theme's four sizes. */
+const noticeSizePropDef = { values: ['1', '2', '3', '4'] as const };
 type NoticeColor = (typeof accentColorPropDef)['color']['values'][number];
 
 interface StripProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'children'> {
-  /** Padding, text and button size. Default `2`. */
+  /** Padding, text and button size. Defaults to the nearest Theme's size. */
   size?: NoticeSize;
   /**
    * The category of the message, not its volume. Default `gray`. Use a colour only when it adds a
@@ -98,7 +102,7 @@ Strip.displayName = 'Strip';
 /** A condition that is true now, with at most one action that fixes it. */
 const Notice = React.forwardRef<HTMLDivElement, NoticeProps>(({ icon, action, onDismiss, dismissLabel = 'Dismiss', size: sizeProp, ...props }, forwardedRef) => {
   const contextSize = React.useContext(NoticeSizeContext);
-  const size = sizeProp ?? contextSize ?? '2';
+  const size = useThemeSize(sizeProp ?? contextSize, noticeSizePropDef);
   const trailing =
     action || onDismiss ? (
       <span className="rt-NoticeActions">
@@ -120,7 +124,7 @@ Notice.displayName = 'Notice';
 const Confirmation = React.forwardRef<HTMLDivElement, ConfirmationProps>(
   ({ confirmLabel, cancelLabel = 'Not now', onConfirm, onCancel, busy = false, size: sizeProp, color = 'gray', ...props }, forwardedRef) => {
     const contextSize = React.useContext(NoticeSizeContext);
-    const size = sizeProp ?? contextSize ?? '2';
+    const size = useThemeSize(sizeProp ?? contextSize, noticeSizePropDef);
     return (
     <Strip
       {...props}

package/src/components/popover.css

@@ -7,10 +7,6 @@
   position: relative;
   z-index: 200; /* Above dialogs (100) so popovers inside dialogs/sheets work */
 
-  --inset-padding-top: var(--popover-content-padding);
-  --inset-padding-right: var(--popover-content-padding);
-  --inset-padding-bottom: var(--popover-content-padding);
-  --inset-padding-left: var(--popover-content-padding);
   /* Default toolbar padding maps to content padding; overridden per size below */
   --popover-toolbar-padding: var(--popover-content-padding);
   padding: var(--popover-content-padding);
@@ -67,24 +63,24 @@
 @breakpoints {
   .rt-PopoverContent {
     &:where(.rt-r-size-1) {
-      --popover-content-padding: var(--space-4);
+      --popover-content-padding: var(--surface-p-1);
       --popover-toolbar-padding: var(--space-3);
-      border-radius: min(var(--radius-surface-3), calc(var(--radius-surface-1) + var(--space-3)));
+      border-radius: var(--radius-surface-1);
     }
     &:where(.rt-r-size-2) {
-      --popover-content-padding: var(--space-5);
+      --popover-content-padding: var(--surface-p-2);
       --popover-toolbar-padding: var(--space-3);
-      border-radius: min(var(--radius-surface-4), calc(var(--radius-surface-2) + var(--space-4)));
+      border-radius: var(--radius-surface-2);
     }
     &:where(.rt-r-size-3) {
-      --popover-content-padding: var(--space-6);
+      --popover-content-padding: var(--surface-p-3);
       --popover-toolbar-padding: var(--space-4);
-      border-radius: min(var(--radius-surface-5), calc(var(--radius-surface-3) + var(--space-5)));
+      border-radius: var(--radius-surface-3);
     }
     &:where(.rt-r-size-4) {
-      --popover-content-padding: var(--space-7);
+      --popover-content-padding: var(--surface-p-4);
       --popover-toolbar-padding: var(--space-5);
-      border-radius: min(var(--radius-surface-6), calc(var(--radius-surface-4) + var(--space-6)));
+      border-radius: var(--radius-surface-4);
     }
   }
 }

package/src/components/popover.tsx

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 import { Popover as PopoverPrimitive } from 'radix-ui';
 
 import { extractProps } from '../helpers/extract-props.js';
+import { useThemeSizeProps } from '../helpers/theme-size.js';
 import { requireReactElement } from '../helpers/require-react-element.js';
 import { popoverContentPropDefs } from './popover.props.js';
 import { Theme } from './theme.js';
@@ -58,7 +59,8 @@ interface PopoverContentProps
   container?: React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Portal>['container'];
 }
 const PopoverContent = React.forwardRef<PopoverContentElement, PopoverContentProps>(
-  (props, forwardedRef) => {
+  (ownProps, forwardedRef) => {
+    const props = useThemeSizeProps(ownProps, popoverContentPropDefs.size);
     const {
       className,
       forceMount,

package/src/components/progress.css

@@ -2,6 +2,9 @@
   --progress-value: 0;
   --progress-max: 100;
   --progress-duration: var(--progress-default-duration);
+  --progress-height: var(--progress-slider-height-2);
+  --progress-radius: var(--progress-slider-radius-2);
+  --progress-indicator-radius: var(--progress-slider-radius-2);
   pointer-events: none;
   position: relative;
   overflow: hidden;
@@ -25,11 +28,7 @@
    * `.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))
-    )
-  );
+  transform: translateX(calc(-100% + max(calc(var(--progress-value) / var(--progress-max) * 100%), var(--progress-height))));
 
   &:where([data-state='indeterminate']) {
     animation-name: rt-progress-indicator-indeterminate-grow;
@@ -59,37 +58,6 @@
   }
 }
 
-/***************************************************************************************************
- *                                                                                                 *
- * SIZES                                                                                           *
- *                                                                                                 *
- ***************************************************************************************************/
-
-@breakpoints {
-  .rt-ProgressRoot {
-    &:where(.rt-r-size-1) {
-      --progress-height: var(--progress-slider-height-1);
-      --progress-radius: var(--progress-slider-radius-1);
-      --progress-indicator-radius: var(--progress-slider-radius-1);
-    }
-    &:where(.rt-r-size-2) {
-      --progress-height: var(--progress-slider-height-2);
-      --progress-radius: var(--progress-slider-radius-2);
-      --progress-indicator-radius: var(--progress-slider-radius-2);
-    }
-    &:where(.rt-r-size-3) {
-      --progress-height: var(--progress-slider-height-3);
-      --progress-radius: var(--progress-slider-radius-3);
-      --progress-indicator-radius: var(--progress-slider-radius-3);
-    }
-    &:where(.rt-r-size-4) {
-      --progress-height: var(--progress-slider-height-4);
-      --progress-radius: var(--progress-slider-radius-4);
-      --progress-indicator-radius: var(--progress-slider-radius-4);
-    }
-  }
-}
-
 /***************************************************************************************************
  *                                                                                                 *
  * VARIANTS                                                                                        *
@@ -127,4 +95,3 @@
     background-color: var(--accent-solid);
   }
 }
-

package/src/components/progress.props.tsx

@@ -3,17 +3,14 @@ import { radiusPropDef } from '../props/radius.prop.js';
 
 import type { PropDef } from '../props/prop-def.js';
 
-const sizes = ['1', '2', '3', '4'] as const;
 const variants = ['surface', 'soft', 'outline'] as const;
 
 const progressPropDefs = {
-  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
   variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'surface' },
   ...colorPropDef,
   ...radiusPropDef,
   duration: { type: 'string' },
 } satisfies {
-  size: PropDef<(typeof sizes)[number]>;
   variant: PropDef<(typeof variants)[number]>;
   duration: PropDef<string>;
 };

package/src/components/radio-cards.css

@@ -59,17 +59,9 @@
       --line-height: var(--line-height-3);
       --letter-spacing: var(--letter-spacing-3);
     }
-    /* Size 5 */
-    &:where(.rt-r-size-5) {
-      font-size: var(--font-size-4);
-      --line-height: var(--line-height-4);
-      --letter-spacing: var(--letter-spacing-4);
-    }
   }
 }
 
-
-
 /* * * * * * * * * * * * * * * * * * * */
 /*                                     */
 /*             All checked             */
@@ -116,33 +108,3 @@
   }
   outline-color: var(--gray-8);
 }
-
-/*
- * Pin the item shell to the control channel.
- *
- * These are selection controls that happen to be card-shaped, not surfaces:
- * they sit in a row of choices and read as one large target each. Inheriting
- * BaseCard's damped surface radius made them square off while every other
- * control in the same form stayed round, so they take the control channel
- * instead — the same formulas BaseCard used before the surface split. The
- * mark inside keeps its own radius.
- */
-@breakpoints {
-  .rt-RadioCardsItem {
-    &:where(.rt-r-size-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-3)));
-    }
-    &:where(.rt-r-size-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-5)));
-    }
-    &:where(.rt-r-size-5) {
-      --base-card-border-radius: min(var(--radius-9), calc(var(--radius-5) + var(--space-6)));
-    }
-  }
-}

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

@@ -5,12 +5,13 @@ import { gridPropDefs } from './grid.props.js';
 
 import type { PropDef } from '../props/prop-def.js';
 
-const sizes = ['1', '2', '3', '4', '5'] as const;
+const sizes = ['1', '2', '3', '4'] as const;
 // The same list as Card: a selectable card looks like any other card.
 const variants = cardPropDefs.variant.values;
 
 const radioCardsRootPropDefs = {
   ...asChildPropDef,
+  /** The Card surface ladder: padding --surface-p-N, corner --radius-surface-N. Unset, it follows the Theme size. */
   size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
   variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'raised' },
   ...colorPropDef,

package/src/components/radio-cards.tsx

@@ -5,6 +5,7 @@ import { RadioGroup as RadioGroupPrimitive } from 'radix-ui';
 import { radioCardsRootPropDefs } from './radio-cards.props.js';
 import { Grid } from './grid.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';
@@ -33,14 +34,19 @@ interface RadioCardsRootProps
     MarginProps,
     RadioCardsRootOwnProps {}
 const RadioCardsRoot = React.forwardRef<RadioCardsRootElement, RadioCardsRootProps>(
-  (props, forwardedRef) => {
+  (ownProps, forwardedRef) => {
+    const props = useThemeSizeProps(ownProps, radioCardsRootPropDefs.size);
     const {
       className,
       color,
       ...rootProps
     } = extractProps(props, radioCardsRootPropDefs, marginPropDefs);
+    // Items read the resolved size, so an unset size still pads them at the default.
+    const size = props.size ?? radioCardsRootPropDefs.size.default;
+    const variant = props.variant;
+    const context = React.useMemo(() => ({ size, variant }), [size, variant]);
     return (
-      <RadioCardsContext.Provider value={{ size: props.size, variant: props.variant }}>
+      <RadioCardsContext.Provider value={context}>
         <Grid asChild>
           <RadioGroupPrimitive.Root
             data-accent-color={color}
@@ -63,7 +69,11 @@ const RadioCardsItem = React.forwardRef<RadioCardsItemElement, RadioCardsItemPro
   ({ className, ...props }, forwardedRef) => {
     const context = useRadioCardsContext();
     const variantClass = context?.variant ? `rt-variant-${context.variant}` : undefined;
-    const sizeClass = context?.size ? `rt-r-size-${context.size}` : undefined;
+    // extractProps writes the responsive size classes (`md:rt-r-size-3`) a template string cannot.
+    const { className: sizeClass } = extractProps(
+      { size: context?.size },
+      { size: radioCardsRootPropDefs.size },
+    );
 
     return (
       <RadioGroupPrimitive.Item

package/src/components/radio-group.props.tsx

@@ -4,7 +4,7 @@ import { colorPropDef } from '../props/color.prop.js';
 
 import type { PropDef } from '../props/prop-def.js';
 
-const sizes = ['1', '2', '3'] as const;
+const sizes = ['1', '2', '3', '4'] as const;
 // The same list as Radio: a group offers exactly what its items can draw.
 const variants = baseRadioPropDefs.variant.values;
 

package/src/components/radio-group.tsx

@@ -8,6 +8,7 @@ import { RadioGroup as RadioGroupPrimitive } from 'radix-ui';
 import { radioGroupRootPropDefs } from './radio-group.props.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';
@@ -40,12 +41,13 @@ const RadioGroupRoot = React.forwardRef<RadioGroupRootElement, RadioGroupRootPro
   (
     {
       color = radioGroupRootPropDefs.color.default,
-      size = radioGroupRootPropDefs.size.default,
+      size: sizeProp,
       variant = radioGroupRootPropDefs.variant.default,
       ...props
     }: ScopedProps<RadioGroupRootProps>,
     forwardedRef
   ) => {
+    const size = useThemeSize(sizeProp, radioGroupRootPropDefs.size);
     const { __scopeRadioGroup, className, ...rootProps } = extractProps(props, marginPropDefs);
     const radioGroupScope = useRadioGroupScope(__scopeRadioGroup);
     return (

package/src/components/radio.tsx

@@ -7,6 +7,7 @@ import { composeEventHandlers } from 'radix-ui/internal';
 import { radioPropDefs } from './radio.props.js';
 import { marginPropDefs } from '../props/margin.props.js';
 import { extractProps } from '../helpers/extract-props.js';
+import { useThemeSizeProps } from '../helpers/theme-size.js';
 
 import type { MarginProps } from '../props/margin.props.js';
 import type { ComponentPropsWithout } from '../helpers/component-props.js';
@@ -24,7 +25,8 @@ type RadioInputProps = ComponentPropsWithout<
 >;
 interface RadioProps extends RadioInputProps, MarginProps, RadioOwnProps {}
 
-const Radio = React.forwardRef<RadioElement, RadioProps>((props, forwardedRef) => {
+const Radio = React.forwardRef<RadioElement, RadioProps>((ownProps, forwardedRef) => {
+  const props = useThemeSizeProps(ownProps, radioPropDefs.size);
   const { className, color, onChange, onValueChange, ...radioProps } = extractProps(
     props,
     radioPropDefs,

package/src/components/scroll-area.css

@@ -7,6 +7,8 @@
   --scrollarea-scrollbar-vertical-margin-bottom: var(--space-2);
   --scrollarea-scrollbar-vertical-margin-left: var(--space-2);
   --scrollarea-scrollbar-vertical-margin-right: var(--space-2);
+  --scrollarea-scrollbar-size: var(--space-2);
+  --scrollarea-scrollbar-border-radius: var(--radius-control-1);
 }
 
 .rt-ScrollAreaRoot {
@@ -78,29 +80,6 @@
   }
 }
 
-/***************************************************************************************************
- *                                                                                                 *
- * SIZES                                                                                           *
- *                                                                                                 *
- ***************************************************************************************************/
-
-@breakpoints {
-  .rt-ScrollAreaScrollbar {
-    &:where(.rt-r-size-1) {
-      --scrollarea-scrollbar-size: var(--space-2);
-      --scrollarea-scrollbar-border-radius: var(--radius-pill-1);
-    }
-    &:where(.rt-r-size-2) {
-      --scrollarea-scrollbar-size: var(--space-3);
-      --scrollarea-scrollbar-border-radius: var(--radius-pill-1);
-    }
-    &:where(.rt-r-size-3) {
-      --scrollarea-scrollbar-size: var(--space-4);
-      --scrollarea-scrollbar-border-radius: var(--radius-pill-1);
-    }
-  }
-}
-
 /***************************************************************************************************
  *                                                                                                 *
  * VARIANTS                                                                                        *

package/src/components/scroll-area.props.tsx

@@ -3,12 +3,10 @@ import { radiusPropDef } from '../props/radius.prop.js';
 
 import type { PropDef } from '../props/prop-def.js';
 
-const sizes = ['1', '2', '3'] as const;
 const scrollbarsValues = ['vertical', 'horizontal', 'both'] as const;
 
 const scrollAreaPropDefs = {
   ...asChildPropDef,
-  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '1', responsive: true },
   ...radiusPropDef,
   scrollbars: { type: 'enum', values: scrollbarsValues, default: 'both' },
   /**
@@ -19,7 +17,6 @@ const scrollAreaPropDefs = {
    */
   fade: { type: 'boolean', default: false },
 } satisfies {
-  size: PropDef<(typeof sizes)[number]>;
   scrollbars: PropDef<(typeof scrollbarsValues)[number]>;
   fade: PropDef<boolean>;
 };