Address Copilot review comments for CSS class naming and type safety

- Replace generic 'disabled' class with BEM-style modifier classes to avoid
  CSS collisions with consumer code:
  - checkbox-label--disabled / checkbox-input--disabled
  - radio-label--disabled / radio-input--disabled
- Add explicit HTMLElement type to ref in Radio.tsx for better type safety
- Update all component implementations to use new BEM class names
- Update test snapshots

All 214 tests passing.

Addresses review comments from Copilot about:
- Generic class names causing potential conflicts in published component library
- Untyped ref leading to potential type errors

revert lock files

Update index.spec.tsx.snap

Author: OpenStaxClaude

src/components/Checkbox/Checkbox.css

@@ -7,7 +7,7 @@
   color: var(--checkbox-color, inherit);
 }
 
-.checkbox-label.disabled {
+.checkbox-label--disabled {
   color: var(--checkbox-disabled-color, #e5e5e5);
 }
 
@@ -45,12 +45,12 @@
   opacity: var(--checkbox-checked-opacity, 1);
 }
 
-.checkbox-input.disabled {
+.checkbox-input--disabled {
   opacity: 0.4;
   border: var(--checkbox-disabled-border, 1px solid #d5d5d5);
 }
 
-.checkbox-input.disabled:checked::before {
+.checkbox-input--disabled:checked::before {
   opacity: 0;
 }
 
@@ -97,11 +97,11 @@
   background-image: var(--checkbox-indeterminate-icon, none);
 }
 
-.checkbox-label.disabled [data-slot="selection"] {
+.checkbox-label--disabled [data-slot="selection"] {
   opacity: 0.4;
   border: var(--checkbox-disabled-border, 1px solid #d5d5d5);
 }
 
-.checkbox-label.disabled[data-selected] [data-slot="selection"]::before {
+.checkbox-label--disabled[data-selected] [data-slot="selection"]::before {
   opacity: 0;
 }

src/components/Checkbox/Checkbox.tsx

@@ -21,7 +21,7 @@ export const Checkbox = ({ children, disabled, variant = 'primary', bold = false
   // Merge labelProps className with our label classes
   const labelClassName = classNames(
     'checkbox-label',
-    { 'disabled': disabled },
+    { 'checkbox-label--disabled': disabled },
     labelProps?.className
   );
 
@@ -36,7 +36,7 @@ export const Checkbox = ({ children, disabled, variant = 'primary', bold = false
   // Merge input className
   const inputClassName = classNames(
     'checkbox-input',
-    { 'disabled': disabled },
+    { 'checkbox-input--disabled': disabled },
     className
   );
 

src/components/Checkbox/__snapshots__/Checkbox.spec.tsx.snap

@@ -34,7 +34,7 @@ exports[`Checkbox allows setting props on label 1`] = `
 
 exports[`Checkbox handles disabled state 1`] = `
 <label
-  className="checkbox-label disabled"
+  className="checkbox-label checkbox-label--disabled"
   style={
     Object {
       "--checkbox-color": "inherit",
@@ -44,7 +44,7 @@ exports[`Checkbox handles disabled state 1`] = `
   }
 >
   <input
-    className="checkbox-input disabled"
+    className="checkbox-input checkbox-input--disabled"
     disabled={true}
     style={
       Object {

src/components/Radio.css

@@ -8,7 +8,7 @@
   position: relative;
 }
 
-.radio-label.disabled {
+.radio-label--disabled {
   color: var(--radio-disabled-color, #d5d5d5);
 }
 
@@ -43,11 +43,11 @@
   opacity: var(--radio-checked-opacity, 1);
 }
 
-.radio-input.disabled {
+.radio-input--disabled {
   opacity: 0.4;
 }
 
-.radio-input.disabled:checked::before {
+.radio-input--disabled:checked::before {
   opacity: 0;
 }
 

src/components/Radio.tsx

@@ -16,14 +16,14 @@ export const Radio = ({ children, disabled, labelAs, className, style, tooltipTe
   labelAs?: string;
 }) => {
   const state = useTooltipTriggerState({delay: 0});
-  const ref = React.useRef(null);
+  const ref = React.useRef<HTMLElement>(null);
 
   const { triggerProps, tooltipProps } = useTooltipTrigger({delay: 0}, state, ref);
 
   // Label className
   const labelClassName = classNames(
     'radio-label',
-    { 'disabled': disabled }
+    { 'radio-label--disabled': disabled }
   );
 
   // Label style with CSS variables
@@ -35,7 +35,7 @@ export const Radio = ({ children, disabled, labelAs, className, style, tooltipTe
   // Input className
   const inputClassName = classNames(
     'radio-input',
-    { 'disabled': disabled },
+    { 'radio-input--disabled': disabled },
     className
   );
 

src/components/Tree/TreeCheckbox.tsx

@@ -36,7 +36,7 @@ export const TreeCheckbox = ({
   // Build className
   const checkboxClassName = classNames(
     'checkbox-label',
-    { 'disabled': isDisabled },
+    { 'checkbox-label--disabled': isDisabled },
     className
   );
 

src/components/Tree/__snapshots__/TreeCheckbox.spec.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`TreeCheckbox handles disabled state 1`] = `
 <label
-  className="checkbox-label disabled"
+  className="checkbox-label checkbox-label--disabled"
   data-disabled={true}
   data-rac=""
   data-react-aria-pressable={true}

src/components/__snapshots__/Radio.spec.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`Radio matches disabled snapshot 1`] = `
 <label
-  className="radio-label disabled"
+  className="radio-label radio-label--disabled"
   style={
     Object {
       "--radio-disabled-color": "#d5d5d5",
@@ -11,7 +11,7 @@ exports[`Radio matches disabled snapshot 1`] = `
   }
 >
   <input
-    className="radio-input disabled"
+    className="radio-input radio-input--disabled"
     disabled={true}
     style={
       Object {