feat(ui): migrate Checkbox component to React Aria

Migrates the Checkbox component from Base UI Components to React Aria Components.

Breaking changes:
- Props renamed to React Aria conventions (checked → isSelected, disabled → isDisabled, etc.)
- Label prop removed - use children instead
- CSS class bui-CheckboxLabel removed
- Data attribute changed from data-checked to data-selected
- Use without label is no longer supported

Migration example:
Before: <Checkbox label="Accept terms" checked={agreed} onChange={setAgreed} />
After: <Checkbox isSelected={agreed} onChange={setAgreed}>Accept terms</Checkbox>

Changes include:
- Updated TypeScript types and component implementation
- Migrated CSS to use React Aria data attributes ([data-selected], [data-disabled], etc.)
- Updated Storybook stories and documentation
- Fixed CSS structure to properly separate label wrapper and checkbox indicator styles
- Updated component definitions and API reports
- Created changeset with migration guide

Signed-off-by: Johan Persson <johanopersson@gmail.com>

docs-ui/src/content/components/checkbox.props.ts

@@ -5,31 +5,32 @@ import {
 } from '@/utils/propDefs';
 
 export const checkboxPropDefs: Record<string, PropDef> = {
-  label: {
-    type: 'string',
-    responsive: false,
-  },
-  defaultChecked: {
+  children: {
     type: 'enum',
-    values: ['boolean', "'indeterminate'"],
+    values: ['React.ReactNode'],
     responsive: false,
   },
-  checked: {
-    type: 'enum',
-    values: ['boolean', "'indeterminate'"],
-    responsive: false,
-  },
-  onChange: {
-    type: 'enum',
-    values: ["(checked: boolean | 'indeterminate') => void"],
-    responsive: false,
-  },
-  disabled: {
+  isSelected: {
     type: 'enum',
     values: ['boolean'],
     responsive: false,
   },
-  required: {
+  defaultSelected: {
+    type: 'enum',
+    values: ['boolean'],
+    responsive: false,
+  },
+  onChange: {
+    type: 'enum',
+    values: ['(isSelected: boolean) => void'],
+    responsive: false,
+  },
+  isDisabled: {
+    type: 'enum',
+    values: ['boolean'],
+    responsive: false,
+  },
+  isRequired: {
     type: 'enum',
     values: ['boolean'],
     responsive: false,
@@ -48,13 +49,13 @@ export const checkboxPropDefs: Record<string, PropDef> = {
 
 export const checkboxUsageSnippet = `import { Checkbox } from '@backstage/ui';
 
-<Checkbox />`;
+<Checkbox>Accept terms</Checkbox>`;
 
-export const checkboxDefaultSnippet = `<Checkbox label="Accept terms and conditions" />`;
+export const checkboxDefaultSnippet = `<Checkbox>Accept terms and conditions</Checkbox>`;
 
-export const checkboxVariantsSnippet = `<Inline alignY="center">
-  <Checkbox />
-  <Checkbox checked />
-  <Checkbox label="Checkbox" />
-  <Checkbox label="Checkbox" checked />
-</Inline>`;
+export const checkboxVariantsSnippet = `<Flex direction="column" gap="2">
+  <Checkbox>Unchecked</Checkbox>
+  <Checkbox isSelected>Checked</Checkbox>
+  <Checkbox isDisabled>Disabled</Checkbox>
+  <Checkbox isSelected isDisabled>Checked & Disabled</Checkbox>
+</Flex>`;