From df0767ee6dbc343c41b1720f79a8eb4e3d439a3a Mon Sep 17 00:00:00 2001
From: Pranay Kothapalli <pranaykothapalli@gmail.com>
Date: Tue, 23 Jun 2026 18:58:00 +0530
Subject: [PATCH] fix(accordion): expose --rad-accordion-content CSS variable
 aliases

Add --rad-collapsible-content-height/width on Collapsible content and
--rad-accordion-content-height/width aliases on Accordion content for
Radix migration parity.

Fixes #1917
---
 src/components/ui/Accordion/fragments/AccordionContent.tsx  | 4 ++++
 src/components/ui/Accordion/tests/Accordion.test.tsx        | 6 ++++++
 .../Collapsible/fragments/CollapsiblePrimitiveContent.tsx   | 4 ++++
 3 files changed, 14 insertions(+)

diff --git a/src/components/ui/Accordion/fragments/AccordionContent.tsx b/src/components/ui/Accordion/fragments/AccordionContent.tsx
index a3d87c065..bce6757cd 100644
--- a/src/components/ui/Accordion/fragments/AccordionContent.tsx
+++ b/src/components/ui/Accordion/fragments/AccordionContent.tsx
@@ -31,6 +31,10 @@ const AccordionContent = React.forwardRef<React.ElementRef<'div'>, AccordionCont
                         'var(--radix-collapsible-content-height)',
                     ['--radix-accordion-content-width' as string]:
                         'var(--radix-collapsible-content-width)',
+                    ['--rad-accordion-content-height' as string]:
+                        'var(--rad-collapsible-content-height)',
+                    ['--rad-accordion-content-width' as string]:
+                        'var(--rad-collapsible-content-width)',
                     ...style
                 }}
                 {...props}
diff --git a/src/components/ui/Accordion/tests/Accordion.test.tsx b/src/components/ui/Accordion/tests/Accordion.test.tsx
index c69993441..c23f1fb9d 100644
--- a/src/components/ui/Accordion/tests/Accordion.test.tsx
+++ b/src/components/ui/Accordion/tests/Accordion.test.tsx
@@ -118,6 +118,12 @@ describe('Accordion Component', () => {
         expect(content.style.getPropertyValue('--radix-accordion-content-width')).toBe(
             'var(--radix-collapsible-content-width)'
         );
+        expect(content.style.getPropertyValue('--rad-accordion-content-height')).toBe(
+            'var(--rad-collapsible-content-height)'
+        );
+        expect(content.style.getPropertyValue('--rad-accordion-content-width')).toBe(
+            'var(--rad-collapsible-content-width)'
+        );
     });
 
     test('focus-visible styles use centralized focus ring aliases', () => {
diff --git a/src/core/primitives/Collapsible/fragments/CollapsiblePrimitiveContent.tsx b/src/core/primitives/Collapsible/fragments/CollapsiblePrimitiveContent.tsx
index aaa89905c..db9486ebd 100644
--- a/src/core/primitives/Collapsible/fragments/CollapsiblePrimitiveContent.tsx
+++ b/src/core/primitives/Collapsible/fragments/CollapsiblePrimitiveContent.tsx
@@ -155,6 +155,10 @@ const CollapsiblePrimitiveContent = React.forwardRef<
             heightRef.current !== undefined ? `${heightRef.current}px` : undefined,
         ['--radix-collapsible-content-width' as string]:
             widthRef.current !== undefined ? `${widthRef.current}px` : undefined,
+        ['--rad-collapsible-content-height' as string]:
+            heightRef.current !== undefined ? `${heightRef.current}px` : undefined,
+        ['--rad-collapsible-content-width' as string]:
+            widthRef.current !== undefined ? `${widthRef.current}px` : undefined,
         ...(transitionDuration > 0
             ? { transition: `height ${transitionDuration}ms ${transitionTimingFunction}` }
             : {})