fix(checkbox): ensure to propagate invalid state to indicator

.changeset/tired-clowns-walk.md

@@ -0,0 +1,5 @@
+---
+'@vapor-ui/core': patch
+---
+
+propagate `invalid` state to indicator element

packages/core/src/components/checkbox/checkbox.test.tsx

@@ -183,6 +183,17 @@ describe('Checkbox', () => {
 
             expect(checkbox).not.toHaveAttribute('aria-invalid');
         });
+
+        it('should propagate the invalid state to the indicator', async () => {
+            const rendered = render(
+                <Checkbox.Root id="checkbox" aria-label={LABEL_TEXT} invalid>
+                    <Checkbox.IndicatorPrimitive data-testid="indicator" />
+                </Checkbox.Root>,
+            );
+            const indicator = rendered.getByTestId('indicator');
+
+            expect(indicator).toHaveAttribute('data-invalid');
+        });
     });
 
     describe('prop: indeterminate', () => {
@@ -217,6 +228,17 @@ describe('Checkbox', () => {
 
             expect(checkbox).toHaveAttribute('aria-checked', 'mixed');
         });
+
+        it('should propagate the indeterminate state to the indicator', async () => {
+            const rendered = render(
+                <Checkbox.Root id="checkbox" aria-label={LABEL_TEXT} indeterminate>
+                    <Checkbox.IndicatorPrimitive data-testid="indicator" />
+                </Checkbox.Root>,
+            );
+            const indicator = rendered.getByTestId('indicator');
+
+            expect(indicator).toHaveAttribute('data-indeterminate');
+        });
     });
 
     describe('prop: disabled', () => {
@@ -245,6 +267,17 @@ describe('Checkbox', () => {
             expect(onCheckedChange).not.toHaveBeenCalled();
             expect(checkbox).not.toBeChecked();
         });
+
+        it('should propagate the disabled state to the indicator', async () => {
+            const rendered = render(
+                <Checkbox.Root id="checkbox" aria-label={LABEL_TEXT} disabled>
+                    <Checkbox.IndicatorPrimitive data-testid="indicator" />
+                </Checkbox.Root>,
+            );
+            const indicator = rendered.getByTestId('indicator');
+
+            expect(indicator).toHaveAttribute('data-disabled');
+        });
     });
 
     describe('prop: readOnly', () => {
@@ -292,6 +325,17 @@ describe('Checkbox', () => {
             await userEvent.tab();
             expect(nextButton).toHaveFocus();
         });
+
+        it('should propagate the readOnly state to the indicator', async () => {
+            const rendered = render(
+                <Checkbox.Root id="checkbox" aria-label={LABEL_TEXT} readOnly>
+                    <Checkbox.IndicatorPrimitive data-testid="indicator" />
+                </Checkbox.Root>,
+            );
+            const indicator = rendered.getByTestId('indicator');
+
+            expect(indicator).toHaveAttribute('data-readonly');
+        });
     });
 });
 

packages/core/src/components/checkbox/checkbox.tsx

@@ -58,7 +58,7 @@ export const CheckboxRoot = forwardRef<HTMLElement, CheckboxRoot.Props>((props,
         },
     });
 
-    return <CheckboxProvider value={{ size, indeterminate }}>{root}</CheckboxProvider>;
+    return <CheckboxProvider value={variantProps}>{root}</CheckboxProvider>;
 });
 CheckboxRoot.displayName = 'Checkbox.Root';