feat: add subtitle slot to RadioCard matching gonfalon shortDescription

- Add subtitle slot styling to RadioGroup.module.css with secondary text color
- Update selected state styling to use primary color and medium font weight
- Update RadioCardGroup story to demonstrate subtitle slot usage
- Maintain CSS-only approach using descendant selectors for styling

Co-Authored-By: Naomi Hironaka <[email protected]>

Author: devin-ai-integration[bot]

packages/components/src/styles/RadioGroup.module.css

@@ -106,10 +106,22 @@
 		color: var(--lp-color-text-ui-primary);
 	}
 
+	& [slot='heading'] [slot='subtitle'] {
+		font: var(--lp-text-body-2-regular);
+		color: var(--lp-color-text-ui-secondary);
+		text-align: left;
+		white-space: normal;
+	}
+
 	& [slot='description'] {
 		grid-area: description;
 		font: var(--lp-text-body-2-regular);
 		color: var(--lp-color-text-ui-secondary);
 		margin-top: var(--lp-spacing-200);
 	}
+
+	&[data-selected] [slot='heading'] [slot='subtitle'] {
+		color: var(--lp-color-text-ui-primary);
+		font-weight: var(--lp-font-weight-medium);
+	}
 }

packages/components/stories/recipes/composition.stories.tsx

@@ -178,7 +178,10 @@ export const RadioCardGroup: Story = {
 								<div slot="icon">
 									<Icon name="flag" size="medium" />
 								</div>
-								<div slot="label">Feature change</div>
+								<div>
+									<div slot="label">Feature change</div>
+									<div slot="subtitle">A/B test different variations</div>
+								</div>
 							</div>
 							<div slot="description">Compare treatments to see which one wins</div>
 						</Radio>
@@ -187,7 +190,10 @@ export const RadioCardGroup: Story = {
 								<div slot="icon">
 									<Icon name="flask" size="medium" />
 								</div>
-								<div slot="label">Funnel optimization</div>
+								<div>
+									<div slot="label">Funnel optimization</div>
+									<div slot="subtitle">Multi-step conversion tracking</div>
+								</div>
 							</div>
 							<div slot="description">Track the success of a multi-step user flow</div>
 						</Radio>
@@ -196,7 +202,10 @@ export const RadioCardGroup: Story = {
 								<div slot="icon">
 									<Icon name="data" size="medium" />
 								</div>
-								<div slot="label">Data Export only</div>
+								<div>
+									<div slot="label">Data Export only</div>
+									<div slot="subtitle">Raw data for analysis</div>
+								</div>
 							</div>
 							<div slot="description">Create custom experiment analysis in your warehouse</div>
 						</Radio>
@@ -205,7 +214,10 @@ export const RadioCardGroup: Story = {
 								<div slot="icon">
 									<Icon name="circle" size="medium" />
 								</div>
-								<div slot="label">Snowflake native</div>
+								<div>
+									<div slot="label">Snowflake native</div>
+									<div slot="subtitle">Warehouse-powered insights</div>
+								</div>
 							</div>
 							<div slot="description">Analysis powered by your Snowflake warehouse</div>
 						</Radio>
@@ -214,7 +226,10 @@ export const RadioCardGroup: Story = {
 								<div slot="icon">
 									<Icon name="gear" size="medium" />
 								</div>
-								<div slot="label">Simple option</div>
+								<div>
+									<div slot="label">Simple option</div>
+									<div slot="subtitle">Basic configuration</div>
+								</div>
 							</div>
 						</Radio>
 					</div>