fix(checkbox): add invalid+checked+hover checkbox styles (#3617)

- add missing ::before pseudo to target the before element in the
invalid/checked/hover state
- update metadata.json
- create changeset

Author: marissahuysentruyt

.changeset/blue-wasps-talk.md

@@ -0,0 +1,5 @@
+---
+"@spectrum-css/checkbox": patch
+---
+
+Adds a `::before` pseudo element to properly target the `.spectrum-Checkbox-input:checked + .spectrum-Checkbox-box` element. The selector update, specifically in the invalid+checked+hover state should now get the proper error background color, as opposed to the default background color.

components/checkbox/dist/metadata.json

@@ -66,7 +66,7 @@
     ".spectrum-Checkbox.is-invalid.is-indeterminate:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before",
     ".spectrum-Checkbox.is-invalid.is-indeterminate:hover .spectrum-Checkbox-label",
     ".spectrum-Checkbox.is-invalid:hover .spectrum-Checkbox-box:before",
-    ".spectrum-Checkbox.is-invalid:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box",
+    ".spectrum-Checkbox.is-invalid:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before",
     ".spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input",
     ".spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input:checked:disabled + .spectrum-Checkbox-box:before",
     ".spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input:checked:disabled ~ .spectrum-Checkbox-label",

components/checkbox/index.css

@@ -158,7 +158,7 @@
 		}
 
 		&:hover {
-			.spectrum-Checkbox-input:checked + .spectrum-Checkbox-box,
+			.spectrum-Checkbox-input:checked + .spectrum-Checkbox-box::before,
 			.spectrum-Checkbox-box::before {
 				border-color: var(--highcontrast-checkbox-color-hover, var(--mod-checkbox-invalid-color-hover, var(--spectrum-checkbox-invalid-color-hover)));
 			}
@@ -280,6 +280,7 @@
 		}
 	}
 
+	/* TODO: Because this selector was moved to the default variant's styles, this selector block can be deleted when it is safe to make changes to selectors. */
 	/* Invalid Hover States */
 	&.is-invalid:hover {
 		&.is-indeterminate .spectrum-Checkbox-box,