Define 'native appearance' for host language specs to hook into, and …

…rename 'control' to 'widget'

css-ui-4/Overview.bs

@@ -1745,7 +1745,7 @@ without adverse consequences to compatibility,
 so this specification allows flexibility.
 
 
-<h2 id="control-styling" oldids="form-styling">Control Styling</h2>
+<h2 id="styling-widgets" oldids="form-styling control-styling">Styling Widgets</h2>
 
 <h3 id="appearance-switching" caniuse="css-appearance">Switching appearance</h3>
 
@@ -1785,16 +1785,18 @@ so this specification allows flexibility.
 </div>
 
 While the way most elements in a document look can be fully controlled by CSS,
-<a>controls</a> are typically rendered by UAs using native UI controls of the host operating system,
+<a>widgets</a> are typically rendered by UAs using native UI controls of the host operating system,
 which can neither be replicated nor styled using CSS.
 
-The term <dfn>control</dfn> denotes the following [[HTML]] elements:
-<{button}>, <{input}>, <{meter}>, <{progress}>, <{select}>, and <{textarea}>.
+The term <dfn export>widget</dfn> in this specification denotes elements that can have <dfn export>native appearance</dfn>,
+meaning that they are rendered like analogous native widgets or controls of the host operating system or platform,
+or with a look and feel not otherwise expressible in CSS.
+It is up to the host language (e.g., HTML [[HTML]]) to define which elements can have <a>native appearance</a>.
 
 This specification introduces the 'appearance' property
 to provide some control over this behavior.
 In particular, using ''appearance: none'' allows authors
-to suppress the native style of <a>controls</a>,
+to suppress the <a>native appearance</a> of <a>widgets</a>,
 so that CSS can be used to restyle them.
 
 <pre class="propdef">
@@ -1820,7 +1822,7 @@ Animation type: discrete
 	on a single element or pseudo-element,
 	and are never used outside of the UA stylesheet.
 	The ability provided by this approach to turn any arbitrary element
-	into any arbitrary form control or subcontrol
+	into any arbitrary form control or sub-control
 	was also a significant source of complexity,
 	despite being not particularly useful.
 	The model provided by this specification is deliberately simpler.
@@ -1830,17 +1832,16 @@ Animation type: discrete
 	<dt><dfn>none</dfn>
 	<dd>
 		The element is rendered following the usual rules of CSS.
-		Replaced elements other than <a>controls</a> are not affected by this,
+		Replaced elements other than <a>widgets</a> are not affected by this,
 		and remain replaced elements.
-		Controls are <em>not</em> made to look like native controls of the host operating system.
+		<a>Widgets</a> must not have their <a>native appearance</a>.
 		See [[#appearance-decorative]] and [[#appearance-semantics]] for details.
 
 	<dt><dfn>auto</dfn>
 	<dd>
-		UAs may render <a>controls</a> using native controls of the host operating system
-		or with a look and feel not otherwise expressible in CSS.
+		<a>Widgets</a> may have their <a>native appearance</a>.
 
-		Elements other than <a>controls</a> must be rendered as if ''appearance/none'' had been specified.
+		Elements other than <a>widgets</a> must be rendered as if ''appearance/none'' had been specified.
 
 	<dt><dfn>button</dfn>
 	<dd>
@@ -1878,8 +1879,8 @@ Animation type: discrete
 
 		<pre class=prod style="white-space: normal"><<compat>> =  <dfn>searchfield</dfn> | <dfn>textarea</dfn> | <dfn>push-button</dfn> | <dfn>slider-horizontal</dfn> | <dfn>checkbox</dfn> | <dfn>radio</dfn> | <dfn>square-button</dfn> | <dfn>menulist</dfn> | <dfn>listbox</dfn> | <dfn>meter</dfn> | <dfn>progress-bar</dfn></pre>
 
-		Issue: When 'auto' is widely supported,
-		recommend using 'auto' instead.
+		Issue: When ''appearance/auto'' is widely supported,
+		recommend using ''appearance/auto'' instead.
 
 		Issue: If any of these value is not needed for web compat,
 		they should be dropped from this list;
@@ -1889,7 +1890,7 @@ Animation type: discrete
 		some of these values need to be promoted to being full blown values
 		with effects on arbitrary elements like ''button'',
 		or that
-		some of these values need to have some side effects on some <a>controls</a>.
+		some of these values need to have some side effects on some <a>widgets</a>.
 
 
 </dl>
@@ -1920,7 +1921,7 @@ Animation type: discrete
 	and activating (for example by clicking) the element would toggle the state as usual.
 </div>
 
-On <a>controls</a> where the computed value is ''appearance/auto'' or one of the <<compat>> values,
+On <a>widgets</a> where the computed value is ''appearance/auto'' or one of the <<compat>> values,
 and on any element where the computed value is ''appearance/button'',
 UAs may disregard some CSS properties
 to ensure that the intended appearance is preserved,
@@ -1949,7 +1950,7 @@ Issue: Are there more properties should include in this list?
 Should we remove some?
 Should whitelist the properties that are ok to ignore instead of
 blacklisting those that are not?
-Either way, UAs do ignore some properties when rendering <a>controls</a>,
+Either way, UAs do ignore some properties when rendering <a>widgets</a>,
 so this specification needs to say something about this.
 
 For compatibility with legacy content, UAs must also support <dfn property export>-webkit-appearance</dfn>
@@ -1958,7 +1959,7 @@ as a [=legacy name alias=] of 'appearance'.
 <h4 id=appearance-decorative>
 Effects of 'appearance' on Decorative Aspects of Elements</h4>
 
-All decorative visual aspects of a <a>control</a> which are not caused by a CSS style rule
+All decorative visual aspects of a <a>widget</a> which are not caused by a CSS style rule
 must be suppressed when the appearance is changed using 'appearance',
 even if the UA's internal representation for this element
 was composed of multiple elements or pseudo elements combined together.
@@ -1971,14 +1972,14 @@ was composed of multiple elements or pseudo elements combined together.
 </div>
 
 UAs should include in their User Agent stylesheet style rules
-to give <a>controls</a> a recognizable shape when 'appearance' is ''appearance/none''.
+to give <a>widgets</a> a recognizable shape when 'appearance' is ''appearance/none''.
 
 Note: Authors may therefore need to override these UA style rules to get the styling
 they intended.
 
 <div class=advisement>
 	Authors may find it convenient to use ''all: unset'',
-	to get fully unstyled <a>controls</a>
+	to get fully unstyled <a>widgets</a>
 	which they can then style as they want without interference from the browser's UA stylesheet.
 	However, this also suppresses the focus indicators provided by the same UA stylesheet.
 	In order avoid damaging accessibility,
@@ -1989,16 +1990,16 @@ they intended.
 <h4 id=appearance-semantics>
 Effects of 'appearance' on Semantic Aspects of Elements</h4>
 
-UAs must preserve aspects of the <a>control</a>
-which are necessary to operate the <a>control</a> with its original semantics.
+UAs must preserve aspects of the <a>widget</a>
+which are necessary to operate the <a>widget</a> with its original semantics.
 The UA may however give them a different look and feel
-as long as it remains possible to operate the <a>control</a>.
-Aspects of a <a>control</a> which are merely needed to observe the state the <a>control</a> is in
+as long as it remains possible to operate the <a>widget</a>.
+Aspects of a <a>widget</a> which are merely needed to observe the state the <a>widget</a> is in
 and are not needed to operate it
 should be suppressed as well
 when the same information can be conveyed using ordinary CSS.
 Document languages should specify
-for each <a>control</a> that they define
+for each <a>widget</a> that they define
 what needs to be preserved.
 
 <div class=example>