[css-forms-1][editorial] fixes for FPWD

Author: svgeesus

css-forms-1/Overview.bs

@@ -2,16 +2,26 @@
 Title: CSS Form Control Styling Level 1
 Shortname: css-forms-1
 Repository: w3c/csswg-drafts
+Prepare for TR: yes
+Date: 2025-03-25
 URL: https://drafts.csswg.org/css-forms-1
+TR: https://www.w3.org/TR/css-forms-1
 Editor: Tim Nguyen, w3cid 137443, Apple Inc. https://apple.com/, [email protected]
 Abstract: This CSS Module defines various ways of styling form controls and their different parts.
 Group: csswg
-Status: UD
+Status: FPWD
 Work Status: Exploring
 Level: None
 Markup Shorthands: css yes, markdown yes
 </pre>
 
+<pre class="link-defaults">
+spec:css-forms-1; type:selector; for:/; text:::field-text
+spec:css-forms-1; type:selector; for:/; text:::clear-icon
+spec:css-forms-1; type:value; for:/; text:::placeholder
+
+</pre>
+
 # Introduction # {#intro}
 
   <em>This section is non-normative.</em>
@@ -28,7 +38,7 @@ Markup Shorthands: css yes, markdown yes
   implementing custom controls from scratch, which was a lot of work,
   hard to get right, and often broke either accessibility or platform conventions.
 
-# Opting Into [=Basic Appearance=]: the ''appearance: base'' value
+# Opting Into [=Basic Appearance=]: the ''appearance: base'' value {#appearance}
 
   ISSUE: Move definition of ''appearance'' here.
 
@@ -71,7 +81,7 @@ Markup Shorthands: css yes, markdown yes
 
   For HTML form controls specifically, these principles are applied through the required user agent stylesheet defined in [[#basic-appearance-stylesheet]].
 
-## Examples
+## Examples {#ex-appearance}
 
   ISSUE: Refine these examples through implementation, experimentation, bikeshedding and improvements to the user agent stylesheet.
 
@@ -87,14 +97,14 @@ Markup Shorthands: css yes, markdown yes
 
   NOTE: The form layout used by the following examples is not detailed.
 
-### Default User Agent Colors
+### Default User Agent Colors {#colors}
 
   Here are the [=basic appearance=] colors inheriting respectively the default light and dark mode colors from the root element:
 
   <img src="images/base-screenshot.png" style="width: 50%; height: auto;" alt="Screenshot of the basic appearance with a light color scheme">
   <img src="images/base-screenshot-dark.png" style="width: 50%; height: auto;" alt="Screenshot of the basic appearance with a dark color scheme">  
 
-### Color/Font Customization
+### Color/Font Customization {#custom}
 
   Here are some examples of customization being done on top of the [=basic appearance=]:
 
@@ -131,9 +141,9 @@ Markup Shorthands: css yes, markdown yes
     <img src="images/base-example-2.png" style="width: 100%; height: auto;" alt="Screenshot of a customized basic appearance with green text and a black background">
   </div>
 
-# Styling Pickers
+# Styling Pickers {#pickers}
 
-## The ''::picker()'' pseudo-element
+## The ''::picker()'' pseudo-element {#picker-pseudo}
 
   The <dfn>::picker()</dfn> pseudo-element represents the part of the form control that pops out of the page.
 
@@ -288,7 +298,7 @@ Markup Shorthands: css yes, markdown yes
 
   ISSUE: Add illustrations.
 
-## Picker Opener Icon: the ''::picker-icon'' pseudo-element
+## Picker Opener Icon: the ''::picker-icon'' pseudo-element {#picker-icon}
 
   The <dfn>::picker-icon</dfn> pseudo-element represents the part of the control that represents the icon denoting the presence of the picker.
   It is only generated when the [=originating element=] has [=basic appearance=] and if it opens a picker.
@@ -312,7 +322,7 @@ Markup Shorthands: css yes, markdown yes
     <pre class="lang-css">::file-selector-button { border: 3px solid green }</pre>
   </div>
 
-## Styling Checkmarks: the ''::checkmark'' pseudo-element
+## Styling Checkmarks: the ''::checkmark'' pseudo-element {#checkmark}
 
   The <dfn>::checkmark</dfn> pseudo-element represents an indicator of whether the item is checked, and is present on checkboxes, radios, and option elements.
 
@@ -387,7 +397,7 @@ Markup Shorthands: css yes, markdown yes
 ## Styling Parts for Text Fields: the ''::field-text'' and ''::clear-icon'' pseudo-elements ## {#field-pseudos}
 
   <dl export>
-    <dt><dfn>''::placeholder''</dfn>
+    <dt><dfn>::placeholder</dfn>
     <dd>
       The ''::placeholder'' pseudo-element represents
       the portion of the <{input}> that contains the placeholder text.
@@ -560,7 +570,7 @@ Markup Shorthands: css yes, markdown yes
 
 # Pseudo-Classes # {#pseudo-classes}
 
-## Targeting Different Meter States: the '':low-value'' / '':high-value'' / '':optimal-value'' pseudo-classes
+## Targeting Different Meter States: the '':low-value'' / '':high-value'' / '':optimal-value'' pseudo-classes {#meter-values}
 
   ISSUE(11336): Make sure this is able to replicate UA logic.
 
@@ -572,11 +582,11 @@ Markup Shorthands: css yes, markdown yes
 
   The <dfn>:optimal-value</dfn> pseudo-class matches on a <{meter}> element when its value is in the range determined by the `optimum` / `low` / `high` HTML attributes.
 
-## Targeting Selects that are Listboxes
+## Targeting Selects that are Listboxes {#selects-listboxes}
 
   ISSUE(7422): Define something.
 
-# The ''control-value()'' function
+# The ''control-value()'' function {#control-value}
 
   ISSUE: This is not ready for implementation, file an issue regarding this.
 
@@ -654,7 +664,7 @@ Markup Shorthands: css yes, markdown yes
 
   ISSUE(11837): Color input styles need refining.
 
-## Basics
+## Basics {#stylesheet-basics}
 
 ```css
 input,
@@ -671,7 +681,7 @@ progress {
 }
 ```
 
-## Layout
+## Layout {#stylesheet-layout}
 ```css
 input:not([type=file], [type=range]),
 textarea,
@@ -686,7 +696,7 @@ progress {
 }
 ```
 
-## Sliders
+## Sliders {#stylesheet-sliders}
 
 ISSUE: Refine meter, progress, switch and range input styling.
 
@@ -710,7 +720,7 @@ ISSUE: Refine meter, progress, switch and range input styling.
 }
 ```
 
-## Checkboxes & radios
+## Checkboxes & radios {#stylesheet-checkbox-radio}
 
 ```css
 input:is([type=checkbox]:not([switch]), [type=radio]) {
@@ -738,7 +748,7 @@ input[type=radio]:checked::checkmark {
     width: 100%;
 }
 ```
-## Selects & buttons
+## Selects & buttons {#stylesheet-select-button}
 
 ```css
 select {
@@ -900,7 +910,7 @@ select::picker-icon {
     block-start span-inline-start;
 }
 ```
-<h2 class="no-num non-normative" id="changes">Appendix B: Explorations</h2>
+<h2 class="no-num non-normative" id="explorations">Appendix B: Explorations</h2>
 
 ## Basic Styling Proposals ## {#ideas}
 
@@ -1039,7 +1049,7 @@ Issue: Insert &lt;select> and &lt;datalist> styling proposal and/or whiteboard p
   All options are contain:paint and BFCs.
 
 
-## Input UI Examples ## {#examples}
+## Input UI Examples ## {#ui-examples}
 
 
 This section catalogues as many input UI examples as we can screenshot,