@kushagradhawan/kookie-ui 0.1.21 → 0.1.23

package/src/components/checkbox-cards.css

@@ -22,8 +22,9 @@
   -webkit-tap-highlight-color: transparent;
 
   &:where(:has(:focus-visible)) {
-    outline: 2px solid var(--focus-8);
-    outline-offset: -1px;
+    transition: var(--transition-focus);
+    outline: var(--focus-outline-width) solid var(--focus-8);
+    outline-offset: var(--focus-outline-offset-inset);
 
     &::after {
       outline: inherit;
@@ -65,20 +66,20 @@
       font-size: var(--font-size-2);
       --line-height: var(--line-height-2);
       --letter-spacing: var(--letter-spacing-2);
-      --checkbox-cards-item-padding-top: calc(var(--space-3) / 1.2);
-      --checkbox-cards-item-padding-bottom: calc(var(--space-3) / 1.2);
+      --checkbox-cards-item-padding-top: calc(var(--space-3) * var(--spacing-multiplier-medium));
+      --checkbox-cards-item-padding-bottom: calc(var(--space-3) * var(--spacing-multiplier-medium));
       --checkbox-cards-item-padding-left: var(--space-3);
       --checkbox-cards-item-border-radius: var(--radius-3);
       /* keep in sync with checkbox */
-      --checkbox-cards-item-checkbox-size: calc(var(--space-4) * 0.875);
+      --checkbox-cards-item-checkbox-size: calc(var(--space-4) * var(--spacing-multiplier-medium));
     }
     /* 48px height for the card with one line of text */
     &:where(.rt-r-size-2) {
       font-size: var(--font-size-2);
       --line-height: var(--line-height-2);
       --letter-spacing: var(--letter-spacing-2);
-      --checkbox-cards-item-padding-top: calc(var(--space-4) * 0.875);
-      --checkbox-cards-item-padding-bottom: calc(var(--space-4) * 0.875);
+      --checkbox-cards-item-padding-top: calc(var(--space-4) * var(--spacing-multiplier-medium));
+      --checkbox-cards-item-padding-bottom: calc(var(--space-4) * var(--spacing-multiplier-medium));
       --checkbox-cards-item-padding-left: var(--space-4);
       --checkbox-cards-item-border-radius: var(--radius-3);
       /* keep in sync with checkbox */
@@ -89,12 +90,12 @@
       font-size: var(--font-size-3);
       --line-height: var(--line-height-3);
       --letter-spacing: var(--letter-spacing-3);
-      --checkbox-cards-item-padding-top: calc(var(--space-5) / 1.2);
-      --checkbox-cards-item-padding-bottom: calc(var(--space-5) / 1.2);
+      --checkbox-cards-item-padding-top: calc(var(--space-5) * var(--spacing-multiplier-medium));
+      --checkbox-cards-item-padding-bottom: calc(var(--space-5) * var(--spacing-multiplier-medium));
       --checkbox-cards-item-padding-left: var(--space-5);
       --checkbox-cards-item-border-radius: var(--radius-4);
       /* keep in sync with checkbox */
-      --checkbox-cards-item-checkbox-size: calc(var(--space-4) * 1.25);
+      --checkbox-cards-item-checkbox-size: calc(var(--space-4) * var(--spacing-multiplier-large));
     }
   }
 }
@@ -107,9 +108,11 @@
 
 :where(.rt-CheckboxCardsRoot.rt-variant-surface) {
   .rt-CheckboxCardsItem {
-    --checkbox-cards-item-border-width: 1px;
+    --checkbox-cards-item-border-width: var(--border-width-standard);
     --checkbox-cards-item-background-color: var(--color-surface);
 
+    transition: var(--transition-card);
+
     &::before {
       background-color: var(--checkbox-cards-item-background-color);
     }
@@ -118,12 +121,22 @@
     }
     @media (hover: hover) {
       &:where(:not(:has(:disabled)):hover) {
+        transition-duration: var(--duration-1);
         &::after {
           box-shadow: var(--base-card-surface-hover-box-shadow);
         }
       }
     }
   }
+
+  /* Component-level panel background overrides (higher specificity) */
+  &:where([data-panel-background='solid']) .rt-CheckboxCardsItem {
+    --color-surface: var(--color-surface-solid);
+  }
+
+  &:where([data-panel-background='translucent']) .rt-CheckboxCardsItem {
+    --color-surface: var(--color-surface-translucent);
+  }
 }
 
 /* * * * * * * * * * * * * * * * * * * */
@@ -134,10 +147,10 @@
 
 :where(.rt-CheckboxCardsRoot.rt-variant-classic) {
   .rt-CheckboxCardsItem {
-    --checkbox-cards-item-border-width: 1px;
+    --checkbox-cards-item-border-width: var(--border-width-standard);
     --checkbox-cards-item-background-color: var(--color-surface);
 
-    transition: box-shadow 120ms;
+    transition: var(--transition-card);
     box-shadow: var(--base-card-classic-box-shadow-outer);
 
     &::before {
@@ -148,7 +161,7 @@
     }
     @media (hover: hover) {
       &:where(:not(:has(:disabled)):hover) {
-        transition-duration: 40ms;
+        transition-duration: var(--duration-1);
         box-shadow: var(--base-card-classic-hover-box-shadow-outer);
         &::after {
           box-shadow: var(--base-card-classic-hover-box-shadow-inner);
@@ -156,6 +169,15 @@
       }
     }
   }
+
+  /* Component-level panel background overrides (higher specificity) */
+  &:where([data-panel-background='solid']) .rt-CheckboxCardsItem {
+    --color-surface: var(--color-surface-solid);
+  }
+
+  &:where([data-panel-background='translucent']) .rt-CheckboxCardsItem {
+    --color-surface: var(--color-surface-translucent);
+  }
 }
 
 /* * * * * * * * * * * * * * * * * * * */

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

@@ -7,11 +7,13 @@ import type { PropDef } from '../props/prop-def.js';
 
 const sizes = ['1', '2', '3'] as const;
 const variants = ['surface', 'classic'] as const;
+const panelBackgrounds = ['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: 'surface' },
+  panelBackground: { type: 'enum', values: panelBackgrounds, default: undefined },
   ...colorPropDef,
   ...highContrastPropDef,
   columns: { ...gridPropDefs.columns, default: 'repeat(auto-fit, minmax(200px, 1fr))' },
@@ -19,6 +21,7 @@ const checkboxCardsRootPropDefs = {
 } satisfies {
   size: PropDef<(typeof sizes)[number]>;
   variant: PropDef<(typeof variants)[number]>;
+  panelBackground: PropDef<(typeof panelBackgrounds)[number] | undefined>;
   columns: PropDef<(typeof gridPropDefs.columns.values)[number]>;
   gap: PropDef<(typeof gridPropDefs.gap.values)[number]>;
 };

package/src/components/checkbox-cards.tsx

@@ -12,6 +12,7 @@ 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';
@@ -44,11 +45,15 @@ interface CheckboxCardsRootProps
     CheckboxCardsRootOwnProps {}
 const CheckboxCardsRoot = React.forwardRef<CheckboxCardsRootElement, CheckboxCardsRootProps>(
   (props: ScopedProps<CheckboxCardsRootProps>, forwardedRef) => {
-    const { __scopeCheckboxCards, className, color, ...rootProps } = extractProps(
-      props,
-      checkboxCardsRootPropDefs,
-      marginPropDefs,
-    );
+    const themeContext = useThemeContext();
+    const panelBackground = props.panelBackground ?? themeContext.panelBackground;
+    const {
+      __scopeCheckboxCards,
+      className,
+      color,
+      panelBackground: _,
+      ...rootProps
+    } = extractProps(props, checkboxCardsRootPropDefs, marginPropDefs);
     const checkboxGroupScope = useCheckboxGroupScope(__scopeCheckboxCards);
     return (
       <CheckboxCardsProvider
@@ -60,6 +65,7 @@ const CheckboxCardsRoot = React.forwardRef<CheckboxCardsRootElement, CheckboxCar
           <CheckboxGroupPrimitive.Root
             {...checkboxGroupScope}
             data-accent-color={color}
+            data-panel-background={panelBackground}
             {...rootProps}
             ref={forwardedRef}
             className={classNames('rt-CheckboxCardsRoot', className)}
@@ -81,9 +87,10 @@ const CheckboxCardsItem = React.forwardRef<
 >(({ __scopeCheckboxCards, children, className, style, ...props }, forwardedRef) => {
   const context = useCheckboxCardsContext('CheckboxCardsItem', __scopeCheckboxCards);
   const checkboxGroupScope = useCheckboxGroupScope(__scopeCheckboxCards);
+
   const { className: checkboxClassName } = extractProps(
     // Pass size / highContrast values from the context and static variant to generate styles
-    { size: context?.size, variant: 'surface', highContrast: context?.highContrast },
+    { size: context?.size, variant: 'solid', highContrast: context?.highContrast },
     // Pass size & variant prop defs to allow it to be extracted
     baseCheckboxPropDefs,
   );

package/src/components/image.css

@@ -16,23 +16,47 @@
 
   @media (hover: hover) {
     &:where(:hover) {
-      transform: scale(1.02);
       box-shadow:
         var(--box-shadow, var(--shadow-2)),
         0 0 0 1px var(--gray-a4);
+      filter: brightness(1.05) contrast(1.02);
     }
   }
 
+  &:where(:active) {
+    filter: brightness(0.98) contrast(1.02);
+  }
+
   &:where(:focus-visible) {
     outline: 2px solid var(--focus-8);
-    outline-offset: 2px;
+    outline-offset: -2px;
+  }
+}
+
+/* Interactive states for asChild usage - target the wrapper element */
+:where(:any-link, button, label) .rt-Image {
+  cursor: pointer;
+
+  @media (hover: hover) {
+    &:where(:hover) {
+      box-shadow:
+        var(--box-shadow, var(--shadow-2)),
+        0 0 0 1px var(--gray-a4);
+      filter: brightness(1.05) contrast(1.02);
+    }
   }
 
   &:where(:active) {
-    transform: scale(0.98);
+    filter: brightness(0.98) contrast(1.02);
   }
 }
 
+/* Focus states for asChild usage - apply to the wrapper */
+:where(:any-link, button, label):where(:focus-visible) .rt-Image {
+  outline: 2px solid var(--focus-8);
+  outline-offset: -2px;
+}
+
 /* Blur variant wrapper */
 .rt-variant-blur {
   position: relative;
@@ -46,17 +70,17 @@
 
   @media (hover: hover) {
     &:where(:hover) {
-      transform: scale(1.02);
+      filter: brightness(1.05) contrast(1.02);
     }
   }
 
-  &:where(:focus-visible) {
-    outline: 2px solid var(--focus-8);
-    outline-offset: 2px;
+  &:where(:active) {
+    filter: brightness(0.98) contrast(1.02);
   }
 
-  &:where(:active) {
-    transform: scale(0.98);
+  &:where(:focus-visible) {
+    outline: 2px solid var(--focus-8);
+    outline-offset: -2px;
   }
 }
 

package/src/components/image.tsx

@@ -287,7 +287,7 @@ const Image = React.forwardRef<ImageElement, ImageProps>((props, forwardedRef) =
     } else {
       // For surface variant with asChild
       return React.cloneElement(child, {
-        className: classNames(child.props?.className, 'rt-Image'),
+        className: classNames(child.props?.className),
         style: {
           textDecoration: 'none', // Reset link underlines
           color: 'inherit', // Reset link colors
@@ -296,6 +296,7 @@ const Image = React.forwardRef<ImageElement, ImageProps>((props, forwardedRef) =
           padding: 0, // Reset button padding
           font: 'inherit', // Reset button fonts
           cursor: 'pointer', // Ensure interactive cursor
+          display: 'inline-block', // Ensure proper sizing
           ...child.props?.style, // Allow user overrides
         },
         children: imageWithPlaceholder,

package/src/components/progress.css

@@ -1,14 +1,14 @@
 .rt-ProgressRoot {
   --progress-value: 0;
   --progress-max: 100;
-  --progress-duration: 5s;
+  --progress-duration: var(--progress-default-duration);
   pointer-events: none;
   position: relative;
   overflow: hidden;
   flex-grow: 1;
   height: var(--progress-height);
   border-radius: max(
-    calc(var(--radius-factor) * var(--progress-height) / 3),
+    calc(var(--radius-factor) * var(--progress-height) / var(--progress-border-radius-factor)),
     calc(var(--radius-factor) * var(--radius-thumb))
   );
 
@@ -30,18 +30,18 @@
 }
 .rt-ProgressIndicator {
   display: block;
-  height: 100%;
-  width: 100%;
+  height: var(--position-full);
+  width: var(--position-full);
 
   transform: scaleX(calc(var(--progress-value) / var(--progress-max)));
   transform-origin: left center;
-  transition: transform 120ms;
+  transition: var(--transition-progress);
 
   &:where([data-state='indeterminate']) {
     animation-name: rt-progress-indicator-indeterminate-grow, var(--progress-indicator-indeterminate-animation-start),
       var(--progress-indicator-indeterminate-animation-repeat);
-    animation-delay: 0s, calc(var(--progress-duration) + 5s), calc(var(--progress-duration) + 7.5s);
-    animation-duration: var(--progress-duration), 2.5s, 5s;
+    animation-delay: 0s, calc(var(--progress-duration) + var(--progress-animation-delay-start)), calc(var(--progress-duration) + var(--progress-animation-delay-shine));
+    animation-duration: var(--progress-duration), var(--progress-animation-duration-fade), var(--progress-animation-duration-pulse);
     animation-iteration-count: 1, 1, infinite;
     animation-fill-mode: both, none, none;
     animation-direction: normal, normal, alternate;
@@ -51,19 +51,19 @@
       position: absolute;
       inset: 0;
       content: '';
-      width: 400%;
+      width: calc(var(--position-full) * var(--progress-shine-width-multiplier));
 
       animation-name: rt-progress-indicator-indeterminate-shine-from-left;
-      animation-delay: calc(var(--progress-duration) + 5s);
-      animation-duration: 5s;
+      animation-delay: calc(var(--progress-duration) + var(--progress-animation-delay-start));
+      animation-duration: var(--progress-animation-duration-pulse);
       animation-fill-mode: backwards;
       animation-iteration-count: infinite;
 
       background-image: linear-gradient(
         to right,
-        transparent 25%,
+        transparent var(--progress-gradient-stop-start),
         var(--progress-indicator-after-linear-gradient),
-        transparent 75%
+        transparent var(--progress-gradient-stop-end)
       );
     }
   }
@@ -71,29 +71,29 @@
 
 @keyframes rt-progress-indicator-indeterminate-grow {
   0% {
-    transform: scaleX(0.01);
+    transform: scaleX(var(--progress-scale-initial));
   }
   20% {
-    transform: scaleX(0.1);
+    transform: scaleX(var(--progress-scale-step-1));
   }
   30% {
-    transform: scaleX(0.6);
+    transform: scaleX(var(--progress-scale-step-2));
   }
   40%,
   50% {
-    transform: scaleX(0.9);
+    transform: scaleX(var(--progress-scale-step-3));
   }
   100% {
-    transform: scaleX(1);
+    transform: scaleX(var(--progress-scale-final));
   }
 }
 
 @keyframes rt-progress-indicator-indeterminate-shine-from-left {
   0% {
-    transform: translateX(-100%);
+    transform: translateX(var(--position-negative-full));
   }
   100% {
-    transform: translateX(0%);
+    transform: translateX(var(--position-zero));
   }
 }
 
@@ -109,7 +109,7 @@
       --progress-height: var(--space-1);
     }
     &:where(.rt-r-size-2) {
-      --progress-height: calc(var(--space-2) * 0.75);
+      --progress-height: calc(var(--space-2) * var(--size-multiplier-small));
     }
     &:where(.rt-r-size-3) {
       --progress-height: var(--space-2);
@@ -131,7 +131,7 @@
   background-color: var(--gray-a3);
 
   &::after {
-    box-shadow: inset 0 0 0 1px var(--gray-a4);
+    box-shadow: inset 0 0 0 var(--border-width-standard) var(--gray-a4);
   }
 
   & :where(.rt-ProgressIndicator) {
@@ -159,10 +159,12 @@
 .rt-ProgressRoot:where(.rt-variant-classic) {
   --progress-indicator-indeterminate-animation-start: rt-progress-indicator-classic-indeterminate-fade;
   --progress-indicator-indeterminate-animation-repeat: rt-progress-indicator-classic-indeterminate-pulse;
+  position: relative;
+  top: calc(var(--classic-elevation-offset) / var(--classic-elevation-factor-subtle));
   background-color: var(--gray-a3);
 
   &::after {
-    box-shadow: var(--shadow-1);
+    box-shadow: var(--classic-inset-shadow-dark);
   }
 
   & :where(.rt-ProgressIndicator) {
@@ -199,7 +201,7 @@
     background-color: var(--accent-8);
 
     &::after {
-      opacity: 0.75;
+      opacity: var(--opacity-soft-variant);
     }
   }
 }
@@ -228,22 +230,22 @@
     background-color: var(--accent-12);
 
     &::after {
-      opacity: 0.75;
+      opacity: var(--opacity-soft-variant);
     }
   }
 }
 
 @keyframes rt-progress-indicator-high-contrast-indeterminate-fade {
   100% {
-    opacity: 0.8;
+    opacity: var(--opacity-high-contrast);
   }
 }
 
 @keyframes rt-progress-indicator-high-contrast-indeterminate-pulse {
   0% {
-    opacity: 0.8;
+    opacity: var(--opacity-high-contrast);
   }
   100% {
-    opacity: 1;
+    opacity: var(--progress-scale-final);
   }
 }

package/src/components/radio-cards.css

@@ -1,4 +1,5 @@
 @import './_internal/base-card.css';
+@import './_internal/base-radio.css';
 
 .rt-RadioCardsRoot {
   line-height: var(--line-height);
@@ -47,7 +48,7 @@
       --line-height: var(--line-height-2);
       --letter-spacing: var(--letter-spacing-2);
       --radio-cards-item-padding-x: var(--space-3);
-      --radio-cards-item-padding-y: calc(var(--space-3) / 1.2);
+      --radio-cards-item-padding-y: calc(var(--space-3) * var(--spacing-multiplier-medium));
       --radio-cards-item-border-radius: var(--radius-3);
     }
     /* 48px height for the card with one line of text */
@@ -56,7 +57,7 @@
       --line-height: var(--line-height-2);
       --letter-spacing: var(--letter-spacing-2);
       --radio-cards-item-padding-x: var(--space-4);
-      --radio-cards-item-padding-y: calc(var(--space-4) * 0.875);
+      --radio-cards-item-padding-y: calc(var(--space-4) * var(--spacing-multiplier-medium));
       --radio-cards-item-border-radius: var(--radius-3);
     }
     /* 64px height for the card with one line of text */
@@ -65,7 +66,7 @@
       --line-height: var(--line-height-3);
       --letter-spacing: var(--letter-spacing-3);
       --radio-cards-item-padding-x: var(--space-5);
-      --radio-cards-item-padding-y: calc(var(--space-5) / 1.2);
+      --radio-cards-item-padding-y: calc(var(--space-5) * var(--spacing-multiplier-medium));
       --radio-cards-item-border-radius: var(--radius-4);
     }
   }
@@ -79,9 +80,11 @@
 
 :where(.rt-RadioCardsRoot.rt-variant-surface) {
   .rt-RadioCardsItem {
-    --radio-cards-item-border-width: 1px;
+    --radio-cards-item-border-width: var(--border-width-standard);
     --radio-cards-item-background-color: var(--color-surface);
 
+    transition: var(--transition-card);
+
     &::before {
       background-color: var(--radio-cards-item-background-color);
     }
@@ -90,12 +93,22 @@
     }
     @media (hover: hover) {
       &:where(:not(:disabled):not([data-state='checked']):hover) {
+        transition-duration: var(--duration-1);
         &::after {
           box-shadow: var(--base-card-surface-hover-box-shadow);
         }
       }
     }
   }
+
+  /* Component-level panel background overrides (higher specificity) */
+  &:where([data-panel-background='solid']) .rt-RadioCardsItem {
+    --color-surface: var(--color-surface-solid);
+  }
+
+  &:where([data-panel-background='translucent']) .rt-RadioCardsItem {
+    --color-surface: var(--color-surface-translucent);
+  }
 }
 
 /* * * * * * * * * * * * * * * * * * * */
@@ -106,10 +119,10 @@
 
 :where(.rt-RadioCardsRoot.rt-variant-classic) {
   .rt-RadioCardsItem {
-    --radio-cards-item-border-width: 1px;
+    --radio-cards-item-border-width: var(--border-width-standard);
     --radio-cards-item-background-color: var(--color-surface);
 
-    transition: box-shadow 120ms;
+    transition: var(--transition-card);
     box-shadow: var(--base-card-classic-box-shadow-outer);
 
     &::before {
@@ -120,7 +133,7 @@
     }
     @media (hover: hover) {
       &:where(:not(:disabled):not([data-state='checked']):hover) {
-        transition-duration: 40ms;
+        transition-duration: var(--duration-1);
         box-shadow: var(--base-card-classic-hover-box-shadow-outer);
         &::after {
           box-shadow: var(--base-card-classic-hover-box-shadow-inner);
@@ -128,6 +141,15 @@
       }
     }
   }
+
+  /* Component-level panel background overrides (higher specificity) */
+  &:where([data-panel-background='solid']) .rt-RadioCardsItem {
+    --color-surface: var(--color-surface-solid);
+  }
+
+  &:where([data-panel-background='translucent']) .rt-RadioCardsItem {
+    --color-surface: var(--color-surface-translucent);
+  }
 }
 
 /* * * * * * * * * * * * * * * * * * * */
@@ -137,8 +159,9 @@
 /* * * * * * * * * * * * * * * * * * * */
 
 .rt-RadioCardsItem:where([data-state='checked']) {
+  transition: var(--transition-fast);
   &::after {
-    outline: 2px solid var(--accent-indicator);
+    outline: var(--focus-outline-width) solid var(--accent-indicator);
   }
   :where(.rt-RadioCardsRoot.rt-high-contrast) & {
     &::after {
@@ -154,8 +177,9 @@
 /* * * * * * * * * * * * * * * * * * * */
 
 .rt-RadioCardsItem:where(:focus-visible) {
+  transition: var(--transition-focus);
   &::after {
-    outline: 2px solid var(--focus-8);
+    outline: var(--focus-outline-width) solid var(--focus-8);
   }
   &:where([data-state='checked']) {
     &::before {

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

@@ -7,11 +7,13 @@ import type { PropDef } from '../props/prop-def.js';
 
 const sizes = ['1', '2', '3'] as const;
 const variants = ['surface', 'classic'] as const;
+const panelBackgrounds = ['solid', 'translucent'] as const;
 
 const radioCardsRootPropDefs = {
   ...asChildPropDef,
   size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
   variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'surface' },
+  panelBackground: { type: 'enum', values: panelBackgrounds, default: undefined },
   ...colorPropDef,
   ...highContrastPropDef,
   columns: { ...gridPropDefs.columns, default: 'repeat(auto-fit, minmax(160px, 1fr))' },
@@ -19,6 +21,7 @@ const radioCardsRootPropDefs = {
 } satisfies {
   size: PropDef<(typeof sizes)[number]>;
   variant: PropDef<(typeof variants)[number]>;
+  panelBackground: PropDef<(typeof panelBackgrounds)[number] | undefined>;
   columns: PropDef<(typeof gridPropDefs.columns.values)[number]>;
   gap: PropDef<(typeof gridPropDefs.gap.values)[number]>;
 };

package/src/components/radio-cards.tsx

@@ -6,6 +6,7 @@ import { radioCardsRootPropDefs } from './radio-cards.props.js';
 import { Grid } from './grid.js';
 import { extractProps } from '../helpers/extract-props.js';
 import { marginPropDefs } from '../props/margin.props.js';
+import { useThemeContext } from './theme.js';
 
 import type { MarginProps } from '../props/margin.props.js';
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
@@ -22,15 +23,19 @@ interface RadioCardsRootProps
     RadioCardsRootOwnProps {}
 const RadioCardsRoot = React.forwardRef<RadioCardsRootElement, RadioCardsRootProps>(
   (props, forwardedRef) => {
-    const { className, color, ...rootProps } = extractProps(
-      props,
-      radioCardsRootPropDefs,
-      marginPropDefs,
-    );
+    const themeContext = useThemeContext();
+    const panelBackground = props.panelBackground ?? themeContext.panelBackground;
+    const {
+      className,
+      color,
+      panelBackground: _,
+      ...rootProps
+    } = extractProps(props, radioCardsRootPropDefs, marginPropDefs);
     return (
       <Grid asChild>
         <RadioGroupPrimitive.Root
           data-accent-color={color}
+          data-panel-background={panelBackground}
           {...rootProps}
           ref={forwardedRef}
           className={classNames('rt-RadioCardsRoot', className)}

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

@@ -5,12 +5,12 @@ import { highContrastPropDef } from '../props/high-contrast.prop.js';
 import type { PropDef } from '../props/prop-def.js';
 
 const sizes = ['1', '2', '3'] as const;
-const variants = ['classic', 'surface', 'soft'] as const;
+const variants = ['classic', 'solid', 'soft'] as const;
 
 const radioGroupRootPropDefs = {
   ...asChildPropDef,
   size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
-  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'surface' },
+  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'solid' },
   ...colorPropDef,
   ...highContrastPropDef,
 } satisfies {