[selectors-4] Per WG resolution, add the :unchecked pseudo-class. Fold :indeterminate into the same section, and give some host language guidance. #10746

Author: tabatkins

selectors-4/Overview.bs

@@ -350,17 +350,14 @@ Selectors Overview</h2>
 				<td>[[#the-default-pseudo]]
 				<td>3-UI/4
 			<tr>
-				<td><code>E:checked</code>
+				<td><code>E:checked</code><br><code>E:unchecked</code><br><code>E:indeterminate</code>
 				<td>a user interface element E that is checked/selected
-					(for instance a radio-button or checkbox)
-				<td>[[#checked]]
+					(for instance a radio-button or checkbox),
+					unchecked,
+					or in an indeterminate state
+					(neither checked nor unchecked)
+				<td>[[#input-value-states]]
 				<td>3
-			<tr>
-				<td><code>E:indeterminate</code>
-				<td>a user interface element E that is in an indeterminate state
-						(neither checked nor unchecked)
-				<td>[[#indeterminate]]
-				<td>4
 			<tr>
 				<td><code>E:valid</code><br><code>E:invalid</code>
 				<td>a user-input element E that meets, or doesn't, its data validity semantics
@@ -2809,42 +2806,64 @@ The Default-option Pseudo-class: '':default''</h4>
 <h3 id="input-value-states">
 Input Value States</h3>
 
-<h4 id="checked">
-The Selected-option Pseudo-class: '':checked''</h4>
+<h4 id="checked" oldids="indeterminate">
+The Selected-option Pseudo-classes: '':checked'', '':unchecked'', and '':indeterminate''</h4>
+
+	Radio and checkbox elements can be toggled by the user,
+	and some menu items are “checked” when the user selects them.
+	This state is reflected by the <dfn export>input value pseudo-classes</dfn>.
 
-	Radio and checkbox elements can be toggled by the user.
-	Some menu items are “checked” when the user selects them.
 	When such elements are toggled “on”
 	the <dfn id='checked-pseudo'>:checked</dfn> pseudo-class applies.
 	For example, [[HTML5]] defines that <a href="https://html.spec.whatwg.org/multipage/semantics-other.html#selector-checked">checked checkboxes, radio buttons, and selected <code>&lt;option></code> elements</a> match '':checked''.
+	Similarly, when such elements are toggled “off”,
+	the <dfn id='unchecked-pseudo'>:unchecked</dfn> pseudo-class applies.
+
+	If an element that <em>could</em> match '':checked'' or '':unchecked''
+	is neither "on" nor "off",
+	the <dfn id='indeterminate-pseudo'>:indeterminate</dfn> pseudo-class applies.
+	'':indeterminate'' also matches elements which do not have a notion of being "checked",
+	but whose "value" is still in an indeterminate state,
+	such as a progress meter whose progress percentage is unknown.
+
+	These three pseudo-classes are mutually exclusive;
+	an element can only match at most one of them at a time.
+	(And might match none,
+	if the concept of being "checked" doesn't apply to them.)
+	If the "indeterminate" concept is not mutually exclusive
+	with the "checked"/"unchecked" concept in a host language
+	(for example, in HTML a checkbox's "indeterminate" state is a separate boolean
+	from its "checked" state boolean),
+	being indeterminate wins over being checked/unchecked
+	for the purpose of matching these pseudo-classes.
 
-	While the '':checked'' pseudo-class is dynamic in nature,
-	and can altered by user action,
-	since it can also be based on the presence of semantic attributes in the document
-	(such as the <code>selected</code> and <code>checked</code> attributes in [[HTML5]]),
-	it applies to all media.
-
-	<div class="example">
-		An unchecked checkbox can be selected by using the negation
-		pseudo-class:
-
-		<pre>input[type=checkbox]:not(:checked)</pre>
+	<div class=example>
+		For example, in HTML:
+
+		* Checkboxes match '':indeterminate''
+			if their {{HTMLInputElement/indeterminate}} property is true;
+			otherwise, they match '':checked'' or '':unchecked''
+			depending on their {{HTMLInputElement/checked}} property.
+		* Radio buttons match '':checked'' if their {{HTMLInputElement/checked}} property is true.
+			Otherwise, they match '':unchecked'' if they're in a radio group
+			that contains a '':checked'' radio button.
+			Otherwise (their {{HTMLInputElement/checked}} property is false,
+			but they're alone or in a radio group with no checked radio button),
+			they match '':indeterminate''.
+		* <{option}> elements within a <{select}>
+			match '':checked'' or '':unchecked''
+			depending on their {{HTMLOptionElement/selected}} property.
+			(They're never '':indeterminate''.)
+		* <{progress}> elements match '':indeterminate''
+			if they lack a <code>value</code> attribute
 	</div>
 
-<h4 id="indeterminate">
-The Indeterminate-value Pseudo-class: '':indeterminate''</h4>
-
-	The <dfn id='indeterminate-pseudo'>:indeterminate</dfn> pseudo-class applies to UI elements whose
-	value is in an indeterminate state.
-	For example, radio and checkbox elements can be toggled between checked and unchecked states,
-	but are sometimes in an indeterminate state, neither checked nor unchecked.
-	Similarly a progress meter can be in an indeterminate state when the percent completion is unknown.
-	For example, [[HTML5]] defines how <a href="https://html.spec.whatwg.org/multipage/semantics-other.html#selector-indeterminate">checkboxes</a> can be made to match '':indeterminate''.
+	While the [=input value pseudo-classes=] are dynamic in nature,
+	and can altered by user action,
+	since they can also be based on the presence of semantic attributes in the document
+	(such as the <code>selected</code> and <code>checked</code> attributes in [[HTML5]]),
+	they apply to all media.
 
-	Like the '':checked'' pseudo-class, '':indeterminate''
-	applies to all media. Components of a radio-group initialized with no
-	pre-selected choice, for example, would be '':indeterminate''
-	even in a static display.
 
 <h3 id='ui-validity'>
 Input Value-checking</h3>