From ab76a9044a911f4293ae6d7b0cfdc30896b7149f Mon Sep 17 00:00:00 2001 From: lilyspiniolas <119537181+lilyspiniolas@users.noreply.github.com> Date: Thu, 20 Jul 2023 16:23:50 -0700 Subject: [PATCH 1/6] Added switch attribute for the input element. --- source | 289 ++++++++++++++++++++++++++++++++++++++------------------- 1 file changed, 193 insertions(+), 96 deletions(-) diff --git a/source b/source index 73646634775..a22a599a481 100644 --- a/source +++ b/source @@ -45969,6 +45969,7 @@ interface HTMLLabelElement : HTMLElement {
size
src
step
+
switch
type
value
width
@@ -46099,6 +46100,7 @@ interface HTMLInputElement : HTMLElement { [CEReactions] attribute unsigned long size; [CEReactions] attribute USVString src; [CEReactions] attribute DOMString step; + [CEReactions] attribute boolean switch; [CEReactions] attribute DOMString type; [CEReactions] attribute DOMString defaultValue; [CEReactions] attribute [LegacyNullToEmptyString] DOMString value; @@ -46139,10 +46141,9 @@ interface HTMLInputElement : HTMLElement { control to allow the user to edit the data.

The type attribute - controls the data type (and associated control) of the element. It is an enumerated - attribute. The following table lists the keywords and states for the attribute — the - keywords in the left column map to the states in the cell in the second column on the same row as - the keyword.

+ controls the data type of the element. It is an enumerated attribute. The following + table lists the keywords and states for the attribute — the keywords in the left column + map to the states in the cell in the second column on the same row as the keyword.

@@ -46231,7 +46232,7 @@ interface HTMLInputElement : HTMLElement { - + - - @@ -136791,6 +136882,12 @@ interface External { +
checkbox Checkbox A set of zero or more values from a predefined list - A checkbox + A checkbox or switch
radio Radio Button @@ -46293,7 +46294,8 @@ interface HTMLInputElement : HTMLElement { required, size, src, - step, and + step, + switch, and width content attributes, the checked, files, @@ -46342,8 +46344,8 @@ interface HTMLInputElement : HTMLElement { Number Range Color - Checkbox, - Radio Button + Checkbox + Radio Button File Upload Submit Button Image Button @@ -46352,7 +46354,7 @@ interface HTMLInputElement : HTMLElement {
Content attributes + Content attributes
accept @@ -46371,7 +46373,7 @@ interface HTMLInputElement : HTMLElement { · · · - + · Yes · · @@ -46395,7 +46397,7 @@ interface HTMLInputElement : HTMLElement { · · · - + · · · Yes @@ -46419,7 +46421,7 @@ interface HTMLInputElement : HTMLElement { Yes Yes · - + · · · · @@ -46443,7 +46445,7 @@ interface HTMLInputElement : HTMLElement { · · Yes - + Yes · · · @@ -46467,7 +46469,7 @@ interface HTMLInputElement : HTMLElement { · · · - + · · · · @@ -46491,7 +46493,7 @@ interface HTMLInputElement : HTMLElement { · · · - + · · Yes Yes @@ -46515,7 +46517,7 @@ interface HTMLInputElement : HTMLElement { · · · - + · · Yes Yes @@ -46539,7 +46541,7 @@ interface HTMLInputElement : HTMLElement { · · · - + · · Yes Yes @@ -46563,7 +46565,7 @@ interface HTMLInputElement : HTMLElement { · · · - + · · Yes Yes @@ -46587,7 +46589,7 @@ interface HTMLInputElement : HTMLElement { · · · - + · · Yes Yes @@ -46611,7 +46613,7 @@ interface HTMLInputElement : HTMLElement { · · · - + · · · Yes @@ -46635,7 +46637,7 @@ interface HTMLInputElement : HTMLElement { Yes Yes · - + · · · · @@ -46659,7 +46661,7 @@ interface HTMLInputElement : HTMLElement { Yes · · - + · · · · @@ -46683,7 +46685,7 @@ interface HTMLInputElement : HTMLElement { · · · - + · · · · @@ -46707,7 +46709,7 @@ interface HTMLInputElement : HTMLElement { Yes · · - + · · · · @@ -46731,7 +46733,7 @@ interface HTMLInputElement : HTMLElement { · · · - + · · · · @@ -46755,7 +46757,7 @@ interface HTMLInputElement : HTMLElement { · · · - + · Yes · · @@ -46779,7 +46781,7 @@ interface HTMLInputElement : HTMLElement { · · · - + · · · · @@ -46803,7 +46805,7 @@ interface HTMLInputElement : HTMLElement { · · · - + · · · · @@ -46827,7 +46829,7 @@ interface HTMLInputElement : HTMLElement { · · · - + · · Yes Yes @@ -46851,7 +46853,7 @@ interface HTMLInputElement : HTMLElement { · · · - + · · Yes Yes @@ -46875,7 +46877,7 @@ interface HTMLInputElement : HTMLElement { · · · - + · · · · @@ -46899,7 +46901,7 @@ interface HTMLInputElement : HTMLElement { · · Yes - + Yes Yes · · @@ -46923,7 +46925,7 @@ interface HTMLInputElement : HTMLElement { · · · - + · · · · @@ -46947,7 +46949,7 @@ interface HTMLInputElement : HTMLElement { · · · - + · · · Yes @@ -46971,7 +46973,31 @@ interface HTMLInputElement : HTMLElement { Yes · · - + · + · + · + · + · + + +
switch + · + · + + · + · + · + · + + + + · + · + · + · + Yes + · · · · @@ -46995,7 +47021,7 @@ interface HTMLInputElement : HTMLElement { · · · - + · · · Yes @@ -47004,7 +47030,7 @@ interface HTMLInputElement : HTMLElement {
IDL attributes and methods + IDL attributes and methods
checked @@ -47023,7 +47049,7 @@ interface HTMLInputElement : HTMLElement { · · Yes - + Yes · · · @@ -47047,7 +47073,7 @@ interface HTMLInputElement : HTMLElement { · · · - + · Yes · · @@ -47071,7 +47097,7 @@ interface HTMLInputElement : HTMLElement { value value default/on - + default/on filename default default @@ -47095,7 +47121,7 @@ interface HTMLInputElement : HTMLElement { · · · - + · · · · @@ -47119,7 +47145,7 @@ interface HTMLInputElement : HTMLElement { Yes · · - + · · · · @@ -47143,7 +47169,7 @@ interface HTMLInputElement : HTMLElement { Yes Yes · - + · · · · @@ -47167,7 +47193,7 @@ interface HTMLInputElement : HTMLElement { · Yes† · - + · Yes† · · @@ -47191,7 +47217,7 @@ interface HTMLInputElement : HTMLElement { · · · - + · · · · @@ -47215,7 +47241,7 @@ interface HTMLInputElement : HTMLElement { · · · - + · · · · @@ -47263,7 +47289,7 @@ interface HTMLInputElement : HTMLElement { · · · - + · · · · @@ -47287,7 +47313,7 @@ interface HTMLInputElement : HTMLElement { · · · - + · · · · @@ -47311,7 +47337,7 @@ interface HTMLInputElement : HTMLElement { Yes · · - + · · · · @@ -47335,7 +47361,7 @@ interface HTMLInputElement : HTMLElement { Yes · · - + · · · · @@ -47344,7 +47370,7 @@ interface HTMLInputElement : HTMLElement {
Events + Events
input event @@ -47363,7 +47389,7 @@ interface HTMLInputElement : HTMLElement { Yes Yes Yes - + Yes Yes · · @@ -47387,7 +47413,7 @@ interface HTMLInputElement : HTMLElement { Yes Yes Yes - + Yes Yes · · @@ -47665,17 +47691,18 @@ interface HTMLInputElement : HTMLElement { for="HTMLInputElement">placeholder, required, size, src, and step IDL attributes must - reflect the respective content attributes of the same name. The dirName IDL attribute must - reflect the dirname content attribute. The readOnly IDL - attribute must reflect the readonly content + for="HTMLInputElement">src, step, and switch IDL + attributes must reflect the respective content attributes of the same name. The dirName IDL + attribute must reflect the dirname content + attribute. The readOnly IDL attribute must reflect the + readonly content attribute. The defaultChecked IDL + attribute must reflect the checked content attribute. The defaultChecked IDL attribute must - reflect the checked content attribute. The - defaultValue IDL attribute must reflect the value content attribute.

@@ -47792,7 +47819,8 @@ interface HTMLInputElement : HTMLElement { required, size, src, - step, and + step, + switch, and width.

The following IDL attributes and methods do not apply to the @@ -47926,7 +47954,8 @@ interface HTMLInputElement : HTMLElement { popovertarget, popovertargetaction, src, - step, and + step, + switch, and width.

The following IDL attributes and methods do not apply to the @@ -48029,7 +48058,8 @@ interface HTMLInputElement : HTMLElement { popovertarget, popovertargetaction, src, - step, and + step, + switch, and width.

The following IDL attributes and methods do not apply to the @@ -48134,7 +48164,8 @@ interface HTMLInputElement : HTMLElement { popovertarget, popovertargetaction, src, - step, and + step, + switch, and width.

The following IDL attributes and methods do not apply to the @@ -48404,7 +48435,8 @@ ldh-str = < as defined in popovertarget, popovertargetaction, src, - step, and + step, + switch, and width.

The following IDL attributes and methods do not apply to the @@ -48502,7 +48534,8 @@ ldh-str = < as defined in popovertarget, popovertargetaction, src, - step, and + step, + switch, and width.

The following IDL attributes and methods do not apply to the @@ -48677,7 +48710,8 @@ ldh-str = < as defined in popovertarget, popovertargetaction, size, - src, and + src, + switch, and width.

The following IDL attributes and methods do not apply to the @@ -48830,7 +48864,8 @@ ldh-str = < as defined in popovertarget, popovertargetaction, size, - src, and + src, + switch, and width.

The following IDL attributes and methods do not apply to the @@ -48987,7 +49022,8 @@ ldh-str = < as defined in popovertarget, popovertargetaction, size, - src, and + src, + switch, and width.

The following IDL attributes and methods do not apply to the element: @@ -49140,7 +49176,8 @@ ldh-str = < as defined in popovertarget, popovertargetaction, size, - src, and + src, + switch, and width.

The following IDL attributes and methods do not apply to the element: @@ -49286,7 +49323,8 @@ ldh-str = < as defined in popovertarget, popovertargetaction, size, - src, and + src, + switch, and width.

The following IDL attributes and methods do not apply to the @@ -49450,7 +49488,8 @@ ldh-str = < as defined in popovertarget, popovertargetaction, size, - src, and + src, + switch, and width.

The following IDL attributes and methods do not apply to the element: @@ -49724,7 +49763,8 @@ ldh-str = < as defined in readonly, required, size, - src, and + src, + switch, and width.

The following IDL attributes and methods do not apply to the element: @@ -49833,7 +49873,8 @@ ldh-str = < as defined in required, size, src, - step, and + step, + switch, and width.

The following IDL attributes and methods do not apply to the element: @@ -49862,17 +49903,21 @@ ldh-str = < as defined in checkedness state. If the element's The input element, when the switch + attribute is not set, represents a tri-state control with two states representing + the element's checkedness, and a third state, which + only applies visually, representing the element's indeterminate IDL attribute. If the element's checkedness state is true, the control represents a positive selection, and if it is false, a negative selection. If the element's indeterminate IDL attribute is set to true, then the control's selection should be obscured as if the control was in a third, indeterminate, state.

-

The control is never a true tri-state control, even if the element's indeterminate IDL attribute is set to true. The indeterminate IDL attribute only gives the appearance of a - third state.

+

The input element, when the switch + attribute is set, represents a two-state control representing the element's checkedness. If the element's checkedness state is true, the control represents a positive + selection, and if it is false, a negative selection.

@@ -49903,7 +49948,8 @@ ldh-str = < as defined in checkbox - controls so that the current value is not visible.

+ controls so that the current value is not visible. Does not apply when the switch attribute is set.

@@ -49911,8 +49957,9 @@ ldh-str = < as defined in
apply to the element: - checked, and - required content attributes; + checked, + required, and + switch content attributes; checked and value IDL attributes.

@@ -50125,7 +50172,8 @@ ldh-str = < as defined in
readonly, size, src, - step, and + step, + switch, and width.

The following IDL attributes and methods do not apply to the element: @@ -50378,7 +50426,8 @@ ldh-str = < as defined in readonly, size, src, - step, and + step, + switch, and width.

The element's value attribute must be omitted.

@@ -50487,7 +50536,8 @@ ldh-str = < as defined in
required, size, src, - step, and + step, + switch, and width.

The following IDL attributes and methods do not apply to the element: @@ -50755,7 +50805,8 @@ ldh-str = < as defined in placeholder, readonly, required, - size, and + size, + switch, and step.

The element's value attribute must be omitted.

@@ -50881,7 +50932,8 @@ ldh-str = < as defined in
required, size, src, - step, and + step, + switch, and width.

The following IDL attributes and methods do not apply to the element: @@ -50966,7 +51018,8 @@ ldh-str = < as defined in required, size, src, - step, and + step, + switch, and width.

The following IDL attributes and methods do not apply to the element: @@ -51878,6 +51931,33 @@ You cannot submit this form when the field is incorrect. +

The switch attribute
+ +

The switch + attribute is a boolean attribute. When specified for an input element in the checkbox state, the indeterminate appearance no longer applies, and its + control becomes a true two-state control with only two visual states which indicate the + element's checkedness.

+ +
+ +

Both inputs in the following code are in the checkbox state. The second input + has the switch attribute set, so its control becomes a switch with only an on and + off state rather than a checkbox with an on, off, and indeterminate state.

+ +
<input type='checkbox' name='mute-notifications-all'>
+<label for="mute-notifications-all">Mute notifications</label>
+<input type='checkbox' switch name='mute-notifications-contacts'>
+<label for="mute-notifications-contacts">Mute notifications from your contacts</label>
+<input type='checkbox' switch name='mute-notifications-strangers'>
+<label for="mute-notifications-strangers">Mute notifications from people not listed in your
+contacts</label>
+ +
+ + +
Common input element APIs
@@ -72304,8 +72384,9 @@ dictionary ValidityStateFlags { data-x="face-state">state of the element, and "2019-03-15" would be a submission value.

-

Suppose you develop a custom element emulating a the behavior of the existing - checkbox input type. Its Suppose you develop a custom element emulating the behavior of the existing + checkbox input type without + the switch attribute set. Its submission value would be the value of its value content attribute, or the string "on". Its state would be one of "checked", summary:first-of-type {

-

The input element as a checkbox and radio button widgets

+

The input element as checkbox, switch, and radio buttons widgets

An input element whose type attribute is in - the Checkbox state is a non-devolvable + the Checkbox state and whose switch attribute is not set is a non-devolvable widget expected to render as an 'inline-block' box containing a single checkbox control, with no label.

Need to detail the expected native appearance and primitive appearance.

+

An input element whose type attribute is in + the Checkbox state and whose switch + attribute is set is a non-devolvable widget expected to render as an 'inline-block' + box containing a single switch control, with no label.

+ +

Need to detail the expected native appearance and primitive + appearance.

+

An input element whose type attribute is in the Radio Button state is a non-devolvable widget expected to render as an 'inline-block' box containing a single radio @@ -134583,6 +134673,7 @@ interface External { size; src; step; + switch; type; value; width

HTML elements Presentational and formatting instructions CSS declarations* +
switch + input + Whether an input in the checkbox state + uses a switch control + Boolean attribute
tabindex HTML elements From f5c54b0e9f9b221d684ff320110ffc2daec88f00 Mon Sep 17 00:00:00 2001 From: lilyspiniolas <119537181+lilyspiniolas@users.noreply.github.com> Date: Mon, 7 Aug 2023 09:31:44 -0700 Subject: [PATCH 2/6] Clarified :indeterminate pseudo-class description Clarified :indeterminate pseudo-class description so that it does not include checkboxes with the switch attribute set, updated description of indeterminate attribute. --- source | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/source b/source index a22a599a481..b6218921657 100644 --- a/source +++ b/source @@ -47680,7 +47680,8 @@ interface HTMLInputElement : HTMLElement { data-x="dom-input-indeterminate">indeterminate IDL attribute must initially be set to false. On getting, it must return the last value it was set to. On setting, it must be set to the new value. It has no effect except for changing the appearance of checkbox controls.

+ data-x="attr-input-type-checkbox">checkbox controls whose switch attribute is not set.

The accept, alt,