[css-forms-1] Explicitly restrict new pseudo-elements to basic appearance mode

css-forms-1/Overview.bs

@@ -313,6 +313,11 @@ spec:css-forms-1; type:value; for:/; text:::placeholder
 
   It typically targets the <{button}> inside an <{input}> element with `type=file`.
 
+  It is generated when the [=originating element=] has [=basic appearance=]. It
+  can also be generated for other ''appearance'' values.
+
+  NOTE: This is allowed in non [=basic appearance=] modes for compatability purposes.
+
   <div class="example" id="file-selector-button-example">
     For example, the following example should show a green border around the
     file selector button:
@@ -358,18 +363,24 @@ spec:css-forms-1; type:value; for:/; text:::placeholder
       The ''::slider-thumb'' pseudo-element represents
       the portion that allows the user to adjust the progress of the control.
 
+      It is only generated when the [=originating element=] has [=basic appearance=].
+
       NOTE: It is typically natively rendered as a circle in most user agents.
 
     <dt><dfn>::slider-track</dfn>
     <dd>
       The ''::slider-track'' pseudo-element represents the portion containing
       both the progressed and unprogressed portions of the control.
 
+      It is only generated when the [=originating element=] has [=basic appearance=].
+
     <dt><dfn>::slider-fill</dfn>
     <dd>
       The ''::slider-fill'' pseudo-element represents
       the portion containing the progressed portion of the control.
 
+      It is only generated when the [=originating element=] has [=basic appearance=].
+
       When the progress of control is indeterminate (like with ''&lt;progress>''),
       the user agent must give this portion an inline-size of zero.
   </dl>
@@ -398,11 +409,18 @@ spec:css-forms-1; type:value; for:/; text:::placeholder
       The ''::placeholder'' pseudo-element represents
       the portion of the <{input}> that contains the placeholder text.
 
+      It is generated when the [=originating element=] has [=basic appearance=]. It
+      can also be generated for other ''appearance'' values.
+
+      NOTE: This is allowed in non [=basic appearance=] modes for compatability purposes.
+
     <dt><dfn>::field-text</dfn>
     <dd>
       The ''::field-text'' pseudo-element represents
       the portion of the <{input}> that contains the editable text.
 
+      It is only generated when the [=originating element=] has [=basic appearance=].
+
     <dt><dfn>::clear-icon</dfn>
     <dd>
       The ''::clear-icon'' pseudo-element represents
@@ -429,10 +447,17 @@ spec:css-forms-1; type:value; for:/; text:::placeholder
       The ''::placeholder'' pseudo-element represents
       the portion of the <{textarea}> that contains the placeholder text.
 
+      It is generated when the [=originating element=] has [=basic appearance=]. It
+      can also be generated for other ''appearance'' values.
+
+      NOTE: This is allowed in non [=basic appearance=] modes for compatability purposes.
+
     <dt><span>''::field-text''</span>
     <dd>
       The ''::field-text'' pseudo-element represents
       the portion of the <{textarea}> that contains the editable text.
+
+      It is only generated when the [=originating element=] has [=basic appearance=].
   </dl>
 
   ISSUE(11850): Define something for the resizer.
@@ -448,16 +473,22 @@ spec:css-forms-1; type:value; for:/; text:::placeholder
     <dd>
       The ''::step-control'' pseudo-element represents
       the portion of a number input that contains the up and down buttons.
+
+      It is only generated when the [=originating element=] has [=basic appearance=].
 
     <dt><dfn>::step-up</dfn>
     <dd>
       The ''::step-up'' pseudo-element represents
       the button that increments the value inside a number input when activated.
 
+      It is only generated when the [=originating element=] has [=basic appearance=].
+
     <dt><dfn>::step-down</dfn>
     <dd>
       The ''::step-down'' pseudo-element represents
       the button that decrements the value inside a number input when activated.
+
+      It is only generated when the [=originating element=] has [=basic appearance=].
   </dl>
 
   Their structure is defined as follows:
@@ -512,11 +543,15 @@ spec:css-forms-1; type:value; for:/; text:::placeholder
     <dd>
       The ''::field-component'' pseudo-element represents
       the portions of the control that contain the date/time component values.
+
+      It is only generated when the [=originating element=] has [=basic appearance=].
 
     <dt><dfn>::field-separator</dfn>
     <dd>
       The ''::field-separator'' pseudo-element represents
       the portions of the control that separate the date/time component values if the user agent provides those portions.
+
+      It is only generated when the [=originating element=] has [=basic appearance=].
   </dl>
 
   Those pseudo-elements are siblings. The exact structure of the control is determined by internationalization and by the host language,
@@ -549,6 +584,8 @@ spec:css-forms-1; type:value; for:/; text:::placeholder
 
   The <dfn>::color-swatch</dfn> pseudo-element represents the portion of the control that displays the chosen color value.
 
+	It is only generated when the [=originating element=] has [=basic appearance=].
+
   <div class="example" id="color-swatch-example">
     For example, the following example should make the input and its color swatch rounded: