From 82a3769caaef3f95ad451071575d5e6a74e720ce Mon Sep 17 00:00:00 2001
From: Joey Arhar <jarhar@chromium.org>
Date: Mon, 23 Jun 2025 10:38:07 -0700
Subject: [PATCH 1/8] squash and rebase

---
 source | 1460 +++++++++++++++++++++++++++++++++++++++++---------------
 1 file changed, 1069 insertions(+), 391 deletions(-)

diff --git a/source b/source
index 142c43dfb1f..1d39e4cc493 100644
--- a/source
+++ b/source
@@ -3238,12 +3238,14 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
      <li>The <dfn data-x-href="https://dom.spec.whatwg.org/#concept-tree-child" data-x="concept-tree-child">child</dfn> concept</li>
      <li>The <dfn data-x-href="https://dom.spec.whatwg.org/#concept-tree-root">root</dfn> and <dfn data-x-href="https://dom.spec.whatwg.org/#concept-shadow-including-root">shadow-including root</dfn> concepts</li>
      <li>The <dfn data-x-href="https://dom.spec.whatwg.org/#concept-tree-inclusive-ancestor">inclusive ancestor</dfn>,
+             <dfn data-x-href="https://dom.spec.whatwg.org/#concept-tree-ancestor">ancestor</dfn>,
              <dfn data-x-href="https://dom.spec.whatwg.org/#concept-tree-descendant">descendant</dfn>,
              <dfn data-x="concept-shadow-including-ancestor" data-x-href="https://dom.spec.whatwg.org/#concept-shadow-including-ancestor">shadow-including ancestor</dfn>,
              <dfn data-x-href="https://dom.spec.whatwg.org/#concept-shadow-including-descendant">shadow-including descendant</dfn>,
              <dfn data-x-href="https://dom.spec.whatwg.org/#concept-shadow-including-inclusive-descendant">shadow-including inclusive descendant</dfn>, and
              <dfn data-x-href="https://dom.spec.whatwg.org/#concept-shadow-including-inclusive-ancestor">shadow-including inclusive ancestor</dfn> concepts</li>
      <li>The <dfn data-x-href="https://dom.spec.whatwg.org/#concept-tree-first-child">first child</dfn>,
+             <dfn data-x-href="https://dom.spec.whatwg.org/#concept-tree-last-child">last child</dfn>,
              <dfn data-x-href="https://dom.spec.whatwg.org/#concept-tree-next-sibling">next sibling</dfn>,
              <dfn data-x-href="https://dom.spec.whatwg.org/#concept-tree-previous-sibling">previous sibling</dfn>, and
              <dfn data-x-href="https://dom.spec.whatwg.org/#concept-tree-parent">parent</dfn> concepts</li>
@@ -3366,6 +3368,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
     <ul class="brief">
      <li>The <dfn data-x-href="https://w3c.github.io/uievents/#mouseevent"><code>MouseEvent</code></dfn> interface</li>
      <li>The <code>MouseEvent</code> interface's <dfn data-x="dom-MouseEvent-relatedTarget" data-x-href="https://w3c.github.io/uievents/#dom-mouseevent-relatedtarget"><code>relatedTarget</code></dfn> attribute</li>
+     <li>The <code>MouseEvent</code> interface's <dfn data-x="dom-MouseEvent-button" data-x-href="https://w3c.github.io/uievents/#dom-mouseevent-button"><code>button</code></dfn> attribute</li>
      <li><dfn data-x-href="https://w3c.github.io/uievents/#dictdef-mouseeventinit"><code>MouseEventInit</code></dfn> dictionary type</li>
 
      <li>The <dfn data-x-href="https://w3c.github.io/uievents/#focusevent"><code>FocusEvent</code></dfn> interface</li>
@@ -3866,6 +3869,19 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
       <li>The <dfn data-x-href="https://drafts.csswg.org/css-fonts/#valdef-font-stretch-ultra-expanded">'ultra-expanded'</dfn> value</li>
     </ul>
 
+    <p>The following features are defined in <cite>CSS Forms</cite>:
+    <ref>CSSFORMS</ref></p>
+
+    <ul class="brief">
+     <li>The <dfn data-x-href="https://drafts.csswg.org/css-forms/#the-picker-pseudo-element">picker
+     pseudo-element</dfn></li>
+     <li>The <dfn data-x-href="https://drafts.csswg.org/css-forms/#selectordef-checkmark">checkmark
+     pseudo-element</dfn></li>
+     <li>The <dfn
+     data-x-href="https://drafts.csswg.org/css-forms/#picker-opener-icon-the-picker-icon-pseudo-element">picker-icon
+     pseudo-element</dfn></li>
+    </ul>
+
     <p>The following features are defined in <cite>CSS Grid Layout</cite>: <ref>CSSGRID</ref></p>
 
     <ul class="brief">
@@ -4005,6 +4021,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
       <li>The concept <dfn data-x-href="https://drafts.csswg.org/css-ui/#widget">widget</dfn></li>
       <li>The concept <dfn data-x-href="https://drafts.csswg.org/css-ui/#native-appearance">native appearance</dfn></li>
       <li>The concept <dfn data-x-href="https://drafts.csswg.org/css-ui/#primitive-appearance">primitive appearance</dfn></li>
+      <li>The concept <dfn data-x-href="https://drafts.csswg.org/css-ui/#base-appearance">base appearance</dfn></li>
       <li>The concept <dfn data-x-href="https://drafts.csswg.org/css-ui/#element-with-default-preferred-size">element with default preferred size</dfn></li>
       <li>The <dfn data-x-href="https://drafts.csswg.org/css-ui/#non-devolvable">non-devolvable widget</dfn> and
               <dfn data-x-href="https://drafts.csswg.org/css-ui/#devolvable">devolvable widget</dfn> classification, and the related
@@ -12973,6 +12990,74 @@ https://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20HTML%3E%
   </ul>
 
 
+  <h6><code>select</code> element inner content elements</h6>
+
+  <p><dfn><code>select</code> element inner content elements</dfn> are the elements which are
+  allowed as descendants of <code>select</code> elements.</p>
+
+  <p>The following are <span><code>select</code> element inner content elements</span>:</p>
+
+  <ul class="brief category-list">
+   <li><code>option</code></li>
+
+   <li><code>optgroup</code></li>
+
+   <li><code>hr</code></li>
+
+   <li><span>script-supporting elements</span></li>
+
+   <li><code>noscript</code></li>
+
+   <li><code>div</code></li>
+  </ul>
+
+  <h6><code>optgroup</code> element inner content elements</h6>
+
+  <p><dfn><code>optgroup</code> element inner content elements</dfn> are the elements which are
+  allowed as descendants of <code>optgroup</code> elements.</p>
+
+  <p>The following are <span><code>optgroup</code> element inner content elements</span>:</p>
+
+  <ul class="brief category-list">
+   <li><code>option</code></li>
+
+   <li><span>script-supporting elements</span></li>
+
+   <li><code>noscript</code></li>
+
+   <li><code>div</code></li>
+  </ul>
+
+  <h6><code>option</code> element inner content elements</h6>
+
+  <p><dfn><code>option</code> element inner content elements</dfn> are the elements which are
+  allowed as descendants of <code>option</code> elements.</p>
+
+  <p>The following are <span><code>option</code> element inner content elements</span>:</p>
+
+  <ul class="brief category-list">
+   <li><code>div</code></li>
+
+   <li><span>phrasing content</span></li>
+  </ul>
+
+  <p>The following are excluded from <span><code>option</code> element inner content
+  elements</span>:</p>
+
+  <!-- Explicitly listing datalist and object here are required because they are not listed in
+       interactive content: https://github.com/whatwg/html/issues/10755 -->
+
+  <ul class="brief category-list">
+   <li><code>datalist</code></li>
+
+   <li><code>object</code></li>
+
+   <li><span>interactive content</span></li>
+
+   <li>elements with the <code data-x="attr-tabindex">tabindex</code> attribute specified</li>
+  </ul>
+
+
 
   <h5>Transparent content models</h5>
 
@@ -14617,11 +14702,11 @@ interface <dfn interface>DOMStringMap</dfn> {
     <ul>
      <li><p><code>select</code> elements have an associated non-replaced inline <span>CSS box</span>
      whose child boxes include only those of <code>optgroup</code> and <code>option</code> element
-     child nodes;</p></li>
+     descendant nodes;</p></li>
 
      <li><p><code>optgroup</code> elements have an associated non-replaced block-level <span>CSS
-     box</span> whose child boxes include only those of <code>option</code> element child nodes;
-     and</p></li>
+     box</span> whose child boxes include only those of <code>option</code> element descendant
+     nodes; and</p></li>
 
      <li><p><code>option</code> elements have an associated non-replaced block-level <span>CSS
      box</span> whose child boxes are as normal for non-replaced block-level <span data-x="CSS
@@ -19971,6 +20056,7 @@ and is further discussed below.&lt;/div></code></pre>
   <dl class="element">
    <dt><span data-x="concept-element-categories">Categories</span>:</dt>
    <dd><span>Flow content</span>.</dd>
+   <dd><span><code>select</code> element inner content elements</span>.</dd>
    <dt><span data-x="concept-element-contexts">Contexts in which this element can be used</span>:</dt>
    <dd>Where <span>flow content</span> is expected.</dd>
    <dd>As a child of a <code>select</code> element.</dd>
@@ -21705,12 +21791,21 @@ included with Exhibit B.
    <dt><span data-x="concept-element-categories">Categories</span>:</dt>
    <dd><span>Flow content</span>.</dd>
    <dd><span>Palpable content</span>.</dd>
+   <dd><span><code>select</code> element inner content elements</span>.</dd>
+   <dd><span><code>optgroup</code> element inner content elements</span>.</dd>
+   <dd><span><code>option</code> element inner content elements</span>.</dd>
    <dt><span data-x="concept-element-contexts">Contexts in which this element can be used</span>:</dt>
    <dd>Where <span>flow content</span> is expected.</dd>
    <dd>As a child of a <code>dl</code> element.</dd>
    <dt><span data-x="concept-element-content-model">Content model</span>:</dt>
    <dd>If the element is a child of a <code>dl</code> element: one or more <code>dt</code> elements followed by one or more <code>dd</code> elements, optionally intermixed with <span>script-supporting elements</span>.</dd>
-   <dd>If the element is not a child of a <code>dl</code> element: <span>flow content</span>.</dd>
+   <dd>Otherwise, if the element is a descendant of an <code>option</code> element: Zero or more
+   <span><code>option</code> element inner content elements</span>.</dd>
+   <dd>Otherwise, if the element is a descendant of an <code>optgroup</code> element: Zero or more
+   <span><code>optgroup</code> element inner content elements</span>.</dd>
+   <dd>Otherwise, if the element is a descendant of a <code>select</code> element: Zero or more
+   <span><code>select</code> element inner content elements</span>.</dd>
+   <dd>Otherwise: <span>flow content</span>.</dd>
    <dt><span data-x="concept-element-attributes">Content attributes</span>:</dt>
    <dd><span>Global attributes</span></dd>
    <dt><span
@@ -24525,7 +24620,10 @@ wormhole connection.&lt;/mark>&lt;/p></code></pre>
    <dt><span data-x="concept-element-contexts">Contexts in which this element can be used</span>:</dt>
    <dd>Where <span>phrasing content</span> is expected.</dd>
    <dt><span data-x="concept-element-content-model">Content model</span>:</dt>
-   <dd><span>Phrasing content</span>.</dd>
+   <dd>If the element is a descendant of an <code>option</code> element: Zero or more
+   <span><code>option</code> element inner content elements</span>, except <code>div</code>
+   elements.</dd>
+   <dd>Otherwise: <span>Phrasing content</span>.</dd>
    <dt><span data-x="concept-element-attributes">Content attributes</span>:</dt>
    <dd><span>Global attributes</span></dd>
    <dt><span
@@ -53505,10 +53603,12 @@ You cannot submit this form when the field is incorrect.</samp></pre>
    <dd><span>Palpable content</span>.</dd>
    <dt><span data-x="concept-element-contexts">Contexts in which this element can be used</span>:</dt>
    <dd>Where <span>phrasing content</span> is expected.</dd>
+   <dd>As the first child of a <code>select</code> element.</dd>
    <dt><span data-x="concept-element-content-model">Content model</span>:</dt>
    <dd><span>Phrasing content</span>, but there must be no <span>interactive content</span>
    descendant and no descendant with the <code data-x="attr-tabindex">tabindex</code> attribute
-   specified.</dd>
+   specified. If the element is the first child of a <code>select</code> element, then it may also
+   have zero or one descendant <code>selectedcontent</code> element.</dd>
    <dt><span data-x="concept-element-attributes">Content attributes</span>:</dt>
    <dd><span>Global attributes</span></dd>
    <dd><code data-x="attr-button-command">command</code></dd>
@@ -53602,9 +53702,10 @@ interface <dfn interface>HTMLButtonElement</dfn> : <span>HTMLElement</span> {
 
   <ul>
    <li><p>the <code data-x="attr-button-type">type</code> attribute is in the <span
-   data-x="attr-button-type-auto-state">Auto</span> state and both the <code
+   data-x="attr-button-type-auto-state">Auto</span> state, both the <code
    data-x="attr-button-command">command</code> and <code
-   data-x="attr-button-commandfor">commandfor</code> content attributes are not present;
+   data-x="attr-button-commandfor">commandfor</code> content attributes are not present, and the
+   <span>parent</span> node is not a <code>select</code> element;
    or</p></li>
 
    <li><p>the <code data-x="attr-button-type">type</code> attribute is in the <span
@@ -53675,6 +53776,10 @@ interface <dfn interface>HTMLButtonElement</dfn> : <span>HTMLElement</span> {
   <p>A <dfn data-x="attr-button-command-custom">custom command keyword</dfn> is a string that
   <span>starts with</span> "<code data-x="">--</code>".</p>
 
+  <p>If a <code>button</code> element is the first <span data-x="concept-tree-child">child</span>
+  which is an <span>element</span> of a <code>select</code> element, then it is
+  <span>inert</span>.</p>
+
   <div w-nodev>
 
   <p>A <code>button</code> element <var>element</var>'s <span>activation behavior</span> given
@@ -54001,7 +54106,9 @@ interface <dfn interface>HTMLButtonElement</dfn> : <span>HTMLElement</span> {
    <dt><span data-x="concept-element-contexts">Contexts in which this element can be used</span>:</dt>
    <dd>Where <span>phrasing content</span> is expected.</dd>
    <dt><span data-x="concept-element-content-model">Content model</span>:</dt>
-   <dd>Zero or more <code>option</code>, <code>optgroup</code>, <code>hr</code>, and <span data-x="script-supporting elements">script-supporting</span> elements.</dd>
+   <dd>Zero or one <code>button</code> element if the <code>select</code> is a <span>drop-down
+   box</span> followed by zero or more <span><code>select</code> element inner content
+   elements</span>.</dd>
    <dt><span data-x="concept-element-attributes">Content attributes</span>:</dt>
    <dd><span>Global attributes</span></dd>
    <dd><code data-x="attr-fe-autocomplete">autocomplete</code></dd>
@@ -54097,10 +54204,48 @@ interface <dfn interface>HTMLSelectElement</dfn> : <span>HTMLElement</span> {
 
   </div>
 
-  <p>The <dfn data-x="concept-select-option-list">list of options</dfn> for a <code>select</code>
-  element consists of all the <code>option</code> element children of the <code>select</code>
-  element, and all the <code>option</code> element children of all the <code>optgroup</code> element
-  children of the <code>select</code> element, in <span>tree order</span>.</p>
+  <p>To get the <dfn data-x="concept-select-option-list">list of options</dfn> given a
+  <code>select</code> element <var>select</var>:</p>
+
+  <ol>
+   <li><p>Let <var>options</var> be « ».</p></li>
+
+   <li>
+    <p>Let <var>node</var> be the <span>first child</span> of <var>select</var> in <span>tree
+    order</span>.</p>
+
+    <p><span>While</span> <var>node</var> is not null:</p>
+
+    <ol>
+     <li><p>If <var>node</var> is an <code>option</code> element, then <span data-x="list
+     append">append</span> <var>node</var> to <var>options</var>.</p></li>
+
+     <li>
+      <p>If any of the following conditions are true:</p>
+
+      <ul>
+       <li><p><var>node</var> is a <code>select</code> element;</p></li>
+
+       <li><p><var>node</var> is an <code>hr</code> element;</p></li>
+
+       <li><p><var>node</var> is an <code>option</code> element;</p></li>
+
+       <li><p><var>node</var> is an <code>optgroup</code> element and <var>node</var> has an
+       <span>ancestor</span> <code>optgroup</code> in between itself and <var>select</var>,</p></li>
+      </ul>
+
+      <p>then set <var>node</var> to the next <span>descendant</span> of <var>select</var> in
+      <span>tree order</span>, excluding <var>node</var>'s <span
+      data-x="descendant">descendants</span>, if any such node exists; otherwise null.</p>
+
+      <p>Otherwise, set <var>node</var> to the next <span>descendant</span> of <var>select</var> in
+      <span>tree order</span>, if any such node exists; otherwise null.</p>
+     </li>
+    </ol>
+   </li>
+
+   <li><p>Return <var>options</var>.</p></li>
+  </ol>
 
   <p>The <dfn element-attr for="select"><code data-x="attr-select-required">required</code></dfn>
   attribute is a <span>boolean attribute</span>. When specified, the user will be required to select
@@ -54140,18 +54285,43 @@ interface <dfn interface>HTMLSelectElement</dfn> : <span>HTMLElement</span> {
 
   <div w-nodev>
 
-  <p>If the <code data-x="attr-select-multiple">multiple</code> attribute is absent, and the element
-  is not <span data-x="concept-fe-disabled">disabled</span>, then the user agent should allow the
-  user to pick an <code>option</code> element in its <span data-x="concept-select-option-list">list
-  of options</span> that is itself not <span data-x="concept-option-disabled">disabled</span>. Upon
-  this <code>option</code> element being <dfn data-x="concept-select-pick">picked</dfn> (either
-  through a click, or through unfocusing the element after changing its value, or through a <span
-  data-x="option-command">menu command</span>, or through any other mechanism), and before the
-  relevant user interaction event <!-- interaction event spec point --> is queued (e.g. before the
-  <code data-x="event-click">click</code> event), the user agent must set the <span
-  data-x="concept-option-selectedness">selectedness</span> of the picked <code>option</code> element
-  to true, set its <span data-x="concept-option-dirtiness">dirtiness</span> to true, and then
-  <span>send <code>select</code> update notifications</span>.</p>
+  <p>The user agent should allow the user to <dfn data-x="concept-select-pick">pick</dfn> an
+  <code>option</code> element from a <code>select</code> element in its <span
+  data-x="concept-select-option-list">list of options</span> (either through a click, or through
+  unfocusing the element after changing its value, or through a <span data-x="option-command">menu
+  command</span>, or through any other mechanism) by running the <span>pick an option</span>
+  algorithm given the <code>select</code> element, the <code>option</code> element, and if
+  <code>select</code> and its <span>select popover </span> are both being rendered with <span>base
+  appearance</span>, a corresponding <code data-x="event-keydown">keydown</code> or <code
+  data-x="event-mouseup">mouseup</code> event, otherwise null.</p>
+
+  <p>To <dfn>pick an option</dfn> given a <code>select</code> element <var>select</var>, an
+  <code>option</code> element <var>option</var>, and an <code>Event</code> or null
+  <var>event</var>:</p>
+
+  <ol>
+   <li><p>If <var>select</var> has the <code data-x="attr-select-multiple">multiple</code> attribute
+   or <var>select</var> is <span data-x="concept-fe-disabled">disabled</span>, then return.</p></li>
+
+   <li><p>If <var>event</var> is not null and <var>event</var>'s <span>canceled flag</span> is set,
+   then return.</p></li>
+
+   <li><p>If <var>event</var> is a <code>MouseEvent</code> and <var>event</var>'s <code
+   data-x="dom-MouseEvent-button">button</code> attribute is not 1, then return.</p></li>
+
+   <li><p>Set <var>option</var>'s <span data-x="concept-option-selectedness">selectedness</span> to
+   true.</p></li>
+
+   <li><p>Set <var>option</var>'s <span data-x="concept-option-dirtiness">dirtiness</span> to
+   true.</p></li>
+
+   <li><p><span>Send <code>select</code> update notifications</span> given
+   <var>select</var>.</p></li>
+
+   <li><p>If <var>select</var> is being rendered as a <span>drop-down box</span> with <span>base
+   appearance</span>, then run the <span>hide popover algorithm</span> given <var>select</var>'s
+   <span>select popover</span>.</p></li>
+  </ol>
 
   <p>If the <code data-x="attr-select-multiple">multiple</code> attribute is absent, whenever an
   <code>option</code> element in the <code>select</code> element's <span
@@ -54250,6 +54420,42 @@ interface <dfn interface>HTMLSelectElement</dfn> : <span>HTMLElement</span> {
   options</span> <dfn data-x="ask for a reset">asks for a reset</dfn>, then run that
   <code>select</code> element's <span>selectedness setting algorithm</span>.</p>
 
+  <p>If the <code>select</code> is being rendered as a <span>drop-down box</span> with <span>base
+  appearance</span>, then the user agent should allow the user to <dfn
+  data-x="select-open-picker">open the picker</dfn> given a corresponding <code>select</code>
+  element <var>select</var> and a corresponding <code data-x="event-mousedown">mousedown</code> or
+  <code data-x="event-keydown">keydown</code> event <var>event</var>:
+
+  <ol>
+   <li><p>If <var>event</var>'s <span>canceled flag</span> is set, then return.</p></li>
+
+   <li><p>If <var>event</var>'s <code data-x="dom-MouseEvent-button">button</code> attribute is not
+   1, then return.</p></li>
+
+   <li><p>Run the <span>show popover</span> algorithm given <var>select</var>'s <span>select
+   popover</span>, false, and <var>select</var>.</p></li>
+  </ol>
+
+  <p>If the <code>select</code> is being rendered as a <span>drop-down box</span> with <span>base
+  appearance</span>, then the user agent should allow the user to <dfn>focus another option</dfn>
+  given the new <code>option</code> element to focus <var>option</var> and a <code
+  data-x="event-keydown">keydown</code> event <var>event</var>:</p>
+
+  <ol>
+   <li><p>If <var>event</var>'s <span>canceled flag</span> is set, then return.</p></li>
+
+   <li><p>Run the <span>focusing steps</span> on <var>newOption</var>.</p></li>
+  </ol>
+
+  <p class="note">Implementations commonly allow the user to focus the next or previous option via
+  the arrow-up and arrow-down keys, focus the first or last option via the Home or End keys, or
+  focus the first or last option in the viewport of the picker via the PageUp or PageDown keys.</p>
+
+  <p class="note">Which particular keys of the keyboard cause these actions might differ across
+  implementations and platforms. The ARIA Authoring Practices Guide has good recommendations for
+  this behavior <a
+  href="https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/">here</a>.</p>
+
   <p>If the <code data-x="attr-select-multiple">multiple</code> attribute is present, and the
   element is not <span data-x="concept-fe-disabled">disabled</span>, then the user agent should
   allow the user to <dfn data-x="concept-select-toggle">toggle</dfn> the <span
@@ -54272,6 +54478,12 @@ interface <dfn interface>HTMLSelectElement</dfn> : <span>HTMLElement</span> {
   <ol>
    <li>Set the <code>select</code> element's <span>user validity</span> to true.</li>
 
+   <li><p>Run <span>update a <code>select</code>'s <code>selectedcontent</code></span> given the
+   <code>select</code> element.</p></li>
+
+   <li><p>Run <span>clone selected <code>option</code> into <code>select</code> button</span> given
+   the <code>select</code> element.</p></li>
+
    <li><p><span data-x="concept-event-fire">Fire an event</span> named <code
    data-x="event-input">input</code> at the <code>select</code> element, with the <code
    data-x="dom-Event-bubbles">bubbles</code> and <code data-x="dom-Event-composed">composed</code>
@@ -54489,13 +54701,33 @@ interface <dfn interface>HTMLSelectElement</dfn> : <span>HTMLElement</span> {
   order</span> that has its <span data-x="concept-option-selectedness">selectedness</span> set to
   true, if any. If there isn't one, then it must return &#x2212;1.</p>
 
-  <p>On setting, the <code data-x="dom-select-selectedIndex">selectedIndex</code> attribute must set
-  the <span data-x="concept-option-selectedness">selectedness</span> of all the <code>option</code>
-  elements in the <span data-x="concept-select-option-list">list of options</span> to false, and
-  then the <code>option</code> element in the <span data-x="concept-select-option-list">list of
-  options</span> whose <span data-x="concept-option-index">index</span> is the given new value, if
-  any, must have its <span data-x="concept-option-selectedness">selectedness</span> set to true and
-  its <span data-x="concept-option-dirtiness">dirtiness</span> set to true.</p>
+  <p>The <code data-x="dom-select-selectedIndex">selectedIndex</code> setter steps are:</p>
+
+  <ol>
+   <li><p>Let <var>firstMatchingOption</var> be null.</p></li>
+
+   <li>
+    <p>For each <var>option</var> of <span>this</span>'s <span
+    data-x="concept-select-option-list">list of options</span>:</p>
+
+    <ol>
+     <li><p>Set <var>option</var>'s <span data-x="concept-option-selectedness">selectedness</span>
+     to false.</p></li>
+
+     <li><p>If <var>firstMatchingOption</var> is null and <var>option</var>'s <span
+     data-x="concept-option-index">index</span> is equal to the given value, then set
+     <var>firstMatchingOption</var> to <var>option</var>.</p></li>
+    </ol>
+   </li>
+
+   <li><p>If <var>firstMatchingOption</var> is not null, then set <var>firstMatchingOption</var>'s
+   <span data-x="concept-option-selectedness">selectedness</span> to true and set
+   <var>firstMatchingOption</var>'s <span data-x="concept-option-dirtiness">dirtiness</span> to
+   true.</p></li>
+
+   <li><p>Run <span>update a <code>select</code>'s <code>selectedcontent</code></span> given
+   <span>this</span>.</p></li>
+  </ol>
 
   <p class="note">This can result in no element having a <span
   data-x="concept-option-selectedness">selectedness</span> set to true even in the case of the
@@ -54509,14 +54741,33 @@ interface <dfn interface>HTMLSelectElement</dfn> : <span>HTMLElement</span> {
   data-x="concept-option-selectedness">selectedness</span> set to true, if any. If there isn't one,
   then it must return the empty string.</p>
 
-  <p>On setting, the <code data-x="dom-select-value">value</code> attribute must set the <span
-  data-x="concept-option-selectedness">selectedness</span> of all the <code>option</code> elements
-  in the <span data-x="concept-select-option-list">list of options</span> to false, and then the
-  first <code>option</code> element in the <span data-x="concept-select-option-list">list of
-  options</span>, in <span>tree order</span>, whose <span data-x="concept-option-value">value</span>
-  is equal to the given new value, if any, must have its <span
-  data-x="concept-option-selectedness">selectedness</span> set to true and its <span
-  data-x="concept-option-dirtiness">dirtiness</span> set to true.</p>
+  <p>The <code data-x="dom-select-value">value</code> setter steps are:</p>
+
+  <ol>
+   <li><p>Let <var>firstMatchingOption</var> be null.</p></li>
+
+   <li>
+    <p>For each <var>option</var> of <span>this</span>'s <span
+    data-x="concept-select-option-list">list of options</span>:</p>
+
+    <ol>
+     <li><p>Set <var>option</var>'s <span data-x="concept-option-selectedness">selectedness</span>
+     to false.</p></li>
+
+     <li><p>If <var>firstMatchingOption</var> is null and <var>option</var>'s <span
+     data-x="concept-option-value">value</span> is equal to the given value, then set
+     <var>firstMatchingOption</var> to <var>option</var>.</p></li>
+    </ol>
+   </li>
+
+   <li><p>If <var>firstMatchingOption</var> is not null, then set <var>firstMatchingOption</var>'s
+   <span data-x="concept-option-selectedness">selectedness</span> to true and set
+   <var>firstMatchingOption</var>'s <span data-x="concept-option-dirtiness">dirtiness</span> to
+   true.</p></li>
+
+   <li><p>Run <span>update a <code>select</code>'s <code>selectedcontent</code></span> given
+   <span>this</span>.</p></li>
+  </ol>
 
   <p class="note">This can result in no element having a <span
   data-x="concept-option-selectedness">selectedness</span> set to true even in the case of the
@@ -54636,6 +54887,13 @@ interface <dfn interface>HTMLSelectElement</dfn> : <span>HTMLElement</span> {
   &hellip;</code></pre>
   </div>
 
+  <div class="note">
+   <p>The first child <code>button</code> element as allowed by the content model of
+   <code>select</code> is not a submit button. It is used to replace the in-page rendering of the
+   <code>select</code> element. Its form submission behavior is prevented because it has inert set
+   in the UA stylesheet.</p>
+  </div>
+
 
 
   <h4>The <dfn element><code>datalist</code></dfn> element</h4>
@@ -54747,11 +55005,12 @@ interface <dfn interface>HTMLDataListElement</dfn> : <span>HTMLElement</span> {
 
   <dl class="element">
    <dt><span data-x="concept-element-categories">Categories</span>:</dt>
-   <dd>None.</dd>
+   <dd><span><code>select</code> element inner content elements</span>.</dd>
    <dt><span data-x="concept-element-contexts">Contexts in which this element can be used</span>:</dt>
-   <dd>As a child of a <code>select</code> element.</dd>
+   <dd>As a descendant of a <code>select</code> element.</dd>
    <dt><span data-x="concept-element-content-model">Content model</span>:</dt>
-   <dd>Zero or more <code>option</code> and <span data-x="script-supporting elements">script-supporting</span> elements.</dd>
+   <dd>Zero or one <code>legend</code> element followed by zero or more <span><code>optgroup</code>
+   element inner content elements</span>.</dd>
    <dt><span data-x="concept-element-attributes">Content attributes</span>:</dt>
    <dd><span>Global attributes</span></dd>
    <dd><code data-x="attr-optgroup-disabled">disabled</code></dd>
@@ -54793,9 +55052,8 @@ interface <dfn interface>HTMLOptGroupElement</dfn> : <span>HTMLElement</span> {
   of <code>option</code> elements together.</p>
 
   <p>The <dfn element-attr for="optgroup"><code data-x="attr-optgroup-label">label</code></dfn>
-  attribute must be specified. Its value gives the name of the group, for the purposes of the user
-  interface. <span w-nodev>User agents should use this attribute's value when labeling the group of
-  <code>option</code> elements in a <code>select</code> element.</span></p>
+  attribute must be specified if the <code>optgroup</code> has no child <code>legend</code>
+  element.</p>
 
   <div w-nodev>
 
@@ -54806,6 +55064,27 @@ interface <dfn interface>HTMLOptGroupElement</dfn> : <span>HTMLElement</span> {
 
   </div>
 
+  <p>To <dfn data-x="concept-optgroup-label">get an <code>optgroup</code> element's label</dfn>,
+  given an <code>optgroup</code> <var>optgroup</var>:</p>
+
+  <ol>
+   <li><p>If <var>optgroup</var> has a child <code>legend</code> element, then return the result of
+   <span data-x="strip and collapse ASCII whitespace">stripping and collapsing ASCII
+   whitespace</span> from the concatenation of <span data-x="concept-cd-data">data</span> of all the
+   <code>Text</code> node descendants of <var>optgroup</var>'s first child <code>legend</code>
+   element, in <span>tree order</span>, excluding any that are descendants of descendants of the
+   <code>legend</code> that are themselves <code>script</code> or <span>SVG
+   <code>script</code></span> elements.</p></li>
+
+   <li><p>Otherwise, return the value of <var>optgroup</var>'s <code
+   data-x="attr-optgroup-label">label</code> attribute.</p></li>
+  </ol>
+
+  <p>The value of the <span data-x="concept-optgroup-label"><code>optgroup</code> label
+  algorithm</span> gives the name of the group, for the purposes of the user interface. <span
+  w-nodev>User agends should use this attribute's value when labeling the group of
+  <code>option</code> elements in a <code>select</code> element.</span></p>
+
   <p class="note">There is no way to select an <code>optgroup</code> element. Only
   <code>option</code> elements can be selected. An <code>optgroup</code> element merely provides a
   label for a group of <code>option</code> elements.</p>
@@ -54844,19 +55123,20 @@ interface <dfn interface>HTMLOptGroupElement</dfn> : <span>HTMLElement</span> {
 
   <dl class="element">
    <dt><span data-x="concept-element-categories">Categories</span>:</dt>
-   <dd>None.</dd>
+   <dd><span><code>select</code> element inner content elements</span>.</dd>
+   <dd><span><code>optgroup</code> element inner content elements</span>.</dd>
    <dt><span data-x="concept-element-contexts">Contexts in which this element can be used</span>:</dt>
-   <dd>As a child of a <code>select</code> element.</dd>
+   <dd>As a descendant of a <code>select</code> element.</dd>
    <dd>As a child of a <code>datalist</code> element.</dd>
-   <dd>As a child of an <code>optgroup</code> element.</dd>
+   <dd>As a descendant of an <code>optgroup</code> element.</dd>
    <dt><span data-x="concept-element-content-model">Content model</span>:</dt>
    <dd>If the element has a <code data-x="attr-option-label">label</code> attribute and a <code data-x="attr-option-value">value</code> attribute: <span data-x="concept-content-nothing">Nothing</span>.</dd>
    <dd>If the element has a <code data-x="attr-option-label">label</code> attribute but no <code data-x="attr-option-value">value</code> attribute: <span data-x="text content">Text</span>.</dd>
    <dd>If the element has no <code data-x="attr-option-label">label</code> attribute and is not a
-   child of a <code>datalist</code> element: <span data-x="text content">Text</span> that is not
-   <span>inter-element whitespace</span>.</dd>
-   <dd>If the element has no <code data-x="attr-option-label">label</code> attribute and is a child
-   of a <code>datalist</code> element: <span data-x="text content">Text</span>.</dd>
+   child of a <code>datalist</code> element: Zero or more <span><code>option</code> element
+   inner content elements</span>.</dd>
+   <dd>If the element has no <code data-x="attr-option-label">label</code> attribute and is a
+   child of a <code>datalist</code> element: <span data-x="text content">Text</span>.</dd>
    <dt><span data-x="concept-element-attributes">Content attributes</span>:</dt>
    <dd><span>Global attributes</span></dd>
    <dd><code data-x="attr-option-disabled">disabled</code></dd>
@@ -54924,8 +55204,8 @@ interface <dfn interface>HTMLOptionElement</dfn> : <span>HTMLElement</span> {
   <p>The <dfn element-attr for="option"><code data-x="attr-option-value">value</code></dfn>
   attribute provides a value for element. The <dfn data-x="concept-option-value">value</dfn> of an
   <code>option</code> element is the value of the <code data-x="attr-option-value">value</code>
-  content attribute, if there is one, or, if there is not, the value of the element's <code
-  data-x="dom-option-text">text</code> IDL attribute.</p>
+  content attribute, if there is one, or, if there is not, the result of <span>collect option
+  text</span> given <span>this</span> and false.</p>
 
   <p>The <dfn element-attr for="option"><code data-x="attr-option-selected">selected</code></dfn>
   attribute is a <span>boolean attribute</span>. It represents the default <span
@@ -54973,6 +55253,97 @@ interface <dfn interface>HTMLOptionElement</dfn> : <span>HTMLElement</span> {
 
   </div>
 
+  <p>The <code>option</code> <span>HTML element insertion steps</span>, given
+  <var>insertedOption</var>, are:</p>
+
+  <ol>
+   <li>
+    <p>For each <var>ancestor</var> of <var>insertedOption</var>'s <span
+    data-x="ancestor">ancestors</span> in reverse <span>tree order</span>:</p>
+
+    <ol>
+     <li><p>If <var>ancestor</var> is a <code>select</code> element, then run the <span>selectedness
+     setting algorithm</span> given <var>ancestor</var> and return.</p></li>
+    </ol>
+   </li>
+  </ol>
+
+  <p>The <code>option</code> <span>HTML element removing steps</span>, given
+  <var>removedOption</var> and <var>oldParent</var>, are:</p>
+
+  <ol>
+   <li>
+    <p>For each <var>ancestor</var> of <var>oldParent</var>'s <span data-x="inclusive
+    ancestor">inclusive ancestors</span> in reverse <span>tree order</span>:</p>
+
+    <ol>
+     <li><p>If <var>ancestor</var> is a <code>select</code> element, then run the <span>selectedness
+     setting algorithm</span> given <var>ancestor</var> and return.</p></li>
+    </ol>
+  </ol>
+
+  <p>To get the <dfn><code>option</code> element nearest ancestor <code>select</code></dfn> given an
+  <code>option</code> <var>option</var>, run these steps. They return a <code>select</code> or
+  null.</p>
+
+  <ol>
+   <li>
+    <p>For each <var>ancestor</var> of <var>option</var>'s <span data-x="ancestor">ancestors</span>,
+    in reverse <span>tree order</span>:</p>
+
+    <ol>
+     <li><p>If <var>ancestor</var> is a <code>select</code>, then return
+     <var>ancestor</var>.</p></li>
+    </ol>
+   </li>
+
+   <li><p>Return null.</p></li>
+  </ol>
+
+  <p>To <dfn>maybe clone an <code>option</code> into <code>selectedcontent</code></dfn>, given an
+  <code>option</code> <var>option</var>:</p>
+
+  <ol>
+   <li><p>Let <var>select</var> be <var>option</var>'s <span><code>option</code> element nearest
+   ancestor <code>select</code></span>.</p></li>
+
+   <li>
+    <p>If all of the following conditions are true:</p>
+
+    <ul>
+     <li><p><var>select</var> is not null;</p></li>
+
+     <li><p><var>option</var>'s <span data-x="concept-option-selectedness">selectedness</span> is
+     true; and</p></li>
+
+     <li><p><var>select</var>'s <span data-x="select-enabled-selectedcontent">enabled
+     <code>selectedcontent</code></span> is not null,</p></li>
+    </ul>
+
+    <p>then run <span>clone an <code>option</code> into a <code>selectedcontent</code></span> given
+    <var>option</var> and <var>select</var>'s <span data-x="select-enabled-selectedcontent">enabled
+    <code>selectedcontent</code></span>.</p>
+   </li>
+  </ol>
+
+  <p>To <dfn>clone selected <code>option</code> into <code>select</code> button</dfn>, given a
+  <code>select</code> element <var>select</var>:</p>
+
+  <ol>
+   <li><p>Let <var>option</var> be the first element of <var>select</var>'s <span
+   data-x="concept-select-option-list">option list</span> whose <span
+   data-x="concept-option-selectedness">selectedness</span> is set to true, if such an element
+   exists; otherwise null.</p></li>
+
+   <li><p>Let <var>text</var> be the empty string.</p></li>
+
+   <li><p>If <var>option</var> is not null, then set <var>text</var> to <var>option</var>'s <span
+   data-x="dom-option-label">label</span>.</p></li>
+
+   <li><p>Set <var>select</var>'s <span>select fallback button text</span> to
+   <var>text</var>.</p></li>
+  </ol>
+
   <dl class="domintro">
    <dt><code data-x=""><var>option</var>.<span subdfn data-x="dom-option-selected">selected</span></code></dt>
 
@@ -55049,12 +55420,8 @@ interface <dfn interface>HTMLOptionElement</dfn> : <span>HTMLElement</span> {
   IDL attribute must return the element's <span data-x="concept-option-index">index</span>.</p>
 
   <p>The <dfn attribute for="HTMLOptionElement"><code data-x="dom-option-text">text</code></dfn> IDL
-  attribute, on getting, must return the result of <span data-x="strip and collapse ASCII
-  whitespace">stripping and collapsing ASCII whitespace</span> from the concatenation of <span
-  data-x="concept-cd-data">data</span> of all the <code>Text</code> node descendants of the
-  <code>option</code> element, in <span>tree order</span>, excluding any that are descendants of
-  descendants of the <code>option</code> element that are themselves <code>script</code> or
-  <span>SVG <code>script</code></span> elements.</p>
+  attribute, on getting, must return the result of <span>collect option text</span> given
+  <span>this</span> and false.</p>
 
   <p>The <code data-x="dom-option-text">text</code> attribute's setter must <span>string replace
   all</span> with the given value within this element.</p>
@@ -55102,6 +55469,54 @@ interface <dfn interface>HTMLOptionElement</dfn> : <span>HTMLElement</span> {
    <li><p>Return <var>option</var>.</p></li>
   </ol>
 
+  <p>To <dfn>collect option text</dfn>, given an <code>option</code> element <var>option</var> and a
+  boolean <var>includeAltText</var>:</p>
+
+  <ol>
+   <li><p>Let <var>text</var> be the empty string.</p></li>
+
+   <li>
+    <p>For each <span>descendant</span> of <var>option</var> in <span>tree order</span>:</p>
+
+    <ol>
+     <li><p>If <var>descendant</var> is a <code>script</code> or <span>SVG
+     <code>script</code></span> element, then <span>continue</span> skipping all <span
+     data-x="descendant">descendants</span> of <var>descendant</var>.</p></li>
+
+     <li><p>If <span>descendant</span> is a <code>Text</code> node, then set <var>text</var> to the
+     concatenation of <var>text</var> and <span>descendant</span>'s <span
+     data-x="concept-cd-data">data</span>.</p></li>
+
+     <li>
+      <p>If <span>descendant</span> is an <code>img</code> element and <var>includeAltText</var> is
+      true, then:</p>
+
+      <ol>
+       <li><p>If the value of <span>descendant</span>'s <code data-x="attr-img-alt">alt</code>
+       attribute is not empty, then set <var>text</var> to the concatenation of <var>text</var>,
+       <code data-x="">" "</code>, the value of <span>descendant</span>'s <code
+       data-x="attr-img-alt">alt</code> attribute, and <code data-x="">" "</code>.</p></li>
+
+       <li><p><span>Continue</span> skipping all <span data-x="descendant">descendants</span> of
+       <var>descendant</var>.</p></li>
+      </ol>
+     </li>
+    </ol>
+   </li>
+
+   <li><p>Return the result of <span>strip and collapse ASCII whitespace</span> given
+   <var>text</var>.</p></li>
+  </ol>
+
+  </div>
+
+  <div class="note">
+   <p>When no <code data-x="attr-option-value">value</code> attribute is set on the
+   <code>option</code> element, its text contents are used to generate a submittable value. In the
+   case that the <code>option</code> element has child elements, this can lead to unexpected results
+   such as <code>option</code> elements which render differently but have the same value. In order
+   to address this, setting the <code data-x="attr-option-value">value</code> attribute on
+   <code>option</code> elements is recommended.</p>
   </div>
 
 
@@ -56591,8 +57006,13 @@ interface <dfn interface>HTMLFieldSetElement</dfn> : <span>HTMLElement</span> {
    <dd>None.</dd>
    <dt><span data-x="concept-element-contexts">Contexts in which this element can be used</span>:</dt>
    <dd>As the <span>first child</span> of a <code>fieldset</code> element.</dd>
+   <dd>As the <span>first child</span> of an <code>optgroup</code> element.</dd>
    <dt><span data-x="concept-element-content-model">Content model</span>:</dt>
-   <dd><span>Phrasing content</span>, optionally intermixed with <span>heading content</span>.</dd>
+   <dd>If the element is a child of an <code>optgroup</code> element: <span>Phrasing content</span>,
+   but there must be no <span>interactive content</span> and no descendant with the <code
+   data-x="attr-tabindex">tabindex</code> attribute.</dd>
+   <dd>Otherwise: <span>Phrasing content</span>, optionally intermixed with <span>heading
+   content</span>.</dd>
    <dt><span data-x="concept-element-attributes">Content attributes</span>:</dt>
    <dd><span>Global attributes</span></dd>
    <dt><span
@@ -56615,7 +57035,8 @@ interface <dfn interface>HTMLLegendElement</dfn> : <span>HTMLElement</span> {
 
   <p>The <code>legend</code> element <span>represents</span> a caption for the rest of the contents
   of the <code>legend</code> element's parent <code>fieldset</code> element<span w-nodev>, if
-  any</span>.</p>
+  any</span>. Otherwise, if the <code>legend</code> has a parent <code>optgroup</code> element, then
+  the <code>legend</code> represents the <code>optgroup</code>'s label.</p>
 
   <dl class="domintro">
    <dt><code data-x=""><var>legend</var>.<span subdfn data-x="dom-legend-form">form</span></code></dt>
@@ -56634,6 +57055,213 @@ interface <dfn interface>HTMLLegendElement</dfn> : <span>HTMLElement</span> {
 
   </div>
 
+  <h4>The <dfn element><code>selectedcontent</code></dfn> element</h4>
+
+  <dl class="element">
+   <dt><span data-x="concept-element-categories">Categories</span>:</dt>
+   <dd>None.</dd>
+   <dt><span data-x="concept-element-contexts">Contexts in which this element can be used</span>:</dt>
+   <dd>As a descendant of a <code>button</code> element which is a child of a <code>select</code>
+   element.</dd>
+   <dt><span data-x="concept-element-content-model">Content model</span>:</dt>
+   <dd><span data-x="concept-content-nothing">Nothing</span>.</dd>
+   <dt><span data-x="concept-element-attributes">Content attributes</span>:</dt>
+   <dd><span>Global attributes</span></dd>
+   <dt><span data-x="concept-element-accessibility-considerations">Accessibility considerations</span>:</dt>
+   <dd><a href="https://w3c.github.io/html-aria/#el-selectedcontent">For authors</a>.</dd>
+   <dd><a href="https://w3c.github.io/html-aam/#el-selectedcontent">For implementers</a>.</dd>
+   <dt><span data-x="concept-element-dom">DOM interface</span>:</dt>
+   <dd w-nodev>
+    <pre><code class="idl">[Exposed=Window]
+interface <dfn interface>HTMLSelectedContentElement</dfn> : <span>HTMLElement</span> {
+  [<span>HTMLConstructor</span>] constructor();
+};</code></pre>
+   </dd>
+   <dd w-dev>Uses <code>HTMLSelectedContentElement</code>.</dd>
+  </dl>
+
+  <p>The <code>selectedcontent</code> element reflects the contents of a <code>select</code>
+  element's currently selected <code>option</code> element. <code>selectedcontent</code> elements
+  can be used to declaratively show the selected <code>option</code> element's contents within the
+  <code>select</code> element's first child <code>button</code> element.</p>
+
+  <p class="note">The <code>option</code> element's <code data-x="attr-option-label">label</code>
+  attribute can be used to render a visible label for the option, but the
+  <code>selectedcontent</code> element will not reflect the content of the <code
+  data-x="attr-option-label">label</code> attribute.</p>
+
+  <p w-dev>Every time the selected <code>option</code> of a <code>select</code> switches from one
+  option to another, the <code>selectedcontent</code> element removes all of its children and
+  replaces them with a new copy of the DOM structure of the <code>select</code>'s selected
+  <code>option</code> element.</p>
+
+  <p>Every <code>selectedcontent</code> element has a <dfn
+  data-x="selectedcontent-disabled">disabled</dfn> state, which is a boolean, initially set to
+  false.</p>
+
+  <p>To <dfn>update a <code>select</code>'s <code>selectedcontent</code></dfn> given a
+  <code>select</code> element <var>select</var>:</p>
+
+  <ol>
+   <li><p>Let <var>selectedcontent</var> be the result of <span
+   data-x="select-enabled-selectedcontent">get a <code>select</code>'s enabled
+   <code>selectedcontent</code></span> given <var>select</var>.</p></li>
+
+   <li><p>If <var>selectedcontent</var> is null, then return.</p></li>
+
+   <li><p>Let <var>option</var> be the first <code>option</code> in <var>select</var>'s <span
+   data-x="concept-select-option-list">list of options</span> whose <span
+   data-x="concept-option-selectedness">selectedness</span> is true, if any such <code>option</code>
+   exists, otherwise null.</p></li>
+
+   <li><p>If <var>option</var> is null, then run <span>clear a <code>selectedcontent</code></span>
+   given <var>selectedcontent</var>.</p></li>
+
+   <li><p>Otherwise, run <span>clone an option into a <code>selectedcontent</code></span> given
+   <var>option</var> and <var>selectedcontent</var>.</p></li>
+  </ol>
+
+  <p>To <dfn data-x="select-enabled-selectedcontent">get a <code>select</code>'s enabled
+  <code>selectedcontent</code></dfn> given a <code>select</code> element <var>select</var>:</p>
+
+  <ol>
+   <li><p>If <var>select</var> has the <code data-x="attr-select-multiple">multiple</code>
+   attribute, then return null.</p></li>
+
+   <li><p>Let <var>selectedcontent</var> be the first <code>selectedcontent</code> element
+   <span>descendant</span> of <var>select</var> in <span>tree order</span> if any such element
+   exists; otherwise return null.</p></li>
+
+   <li><p>If <var>selectedcontent</var> is <span data-x="selectedcontent-disabled">disabled</span>,
+   then return null.</p></li>
+
+   <li><p>Return <var>selectedcontent</var>.</p></li>
+  </ol>
+
+  <p>To <dfn>clone an <code>option</code> into a <code>selectedcontent</code></dfn>, given an
+  <code>option</code> element <var>option</var> and a <code>selectedcontent</code> element
+  <var>selectedcontent</var>:</p>
+
+  <ol>
+   <li><p>Let <var>documentFragment</var> be a new <code>DocumentFragment</code> whose <span>node
+   document</span> is <var>option</var>'s <span>node document</span>.</p></li>
+
+   <li>
+    <p>For each <var>child</var> of <var>option</var>'s <span
+    data-x="concept-tree-child">children</span>:</p>
+
+    <ol>
+     <li><p>Let <var>childClone</var> be the result of running <span
+     data-x="concept-node-clone">clone</span> given <var>child</var> with <span
+     data-x="concept-node-clone-subtree">subtree</span> set to true.</p></li>
+
+     <li><p><span data-x="concept-node-append">Append</span> <var>childClone</var> to
+     <var>documentFragment</var>.</p></li>
+    </ol>
+   </li>
+
+   <li><p><span data-x="concept-node-replace-all">Replace all</span> with
+   <var>documentFragment</var> within <var>selectedcontent</var>.</p></li>
+  </ol>
+
+  <p>To <dfn>clear a <code>selectedcontent</code></dfn> given a <code>selectedcontent</code> element
+  <var>selectedcontent</var>:</p>
+
+  <ol>
+   <li><p><span data-x="concept-node-replace-all">Replace all</span> with null within
+   <var>selectedcontent</var>.</p></li>
+  </ol>
+
+  <p>To <dfn>clear a <code>select</code>'s non-primary <code>selectedcontent</code> elements</dfn>,
+  given a <code>select</code> element <var>select</var>:</p>
+
+  <ol>
+   <li><p>Let <var>passedFirstSelectedcontent</var> be false.</p></li>
+
+   <li>
+    <p>For each <var>descendant</var> of <var>select</var>'s <span
+    data-x="descendant">descendants</span> in <span>tree order</span> that is a
+    <code>selectedcontent</code> element:</p>
+
+    <ol>
+     <li><p>If <var>passedFirstSelectedcontent</var> is false, then set
+     <var>passedFirstSelectedcontent</var> to true.</p></li>
+
+     <li><p>Otherwise, run <span>clear a <code>selectedcontent</code></span> given
+     <var>descendant</var>.</p></li>
+    </ol>
+   </li>
+  </ol>
+
+  <p>The <code>selectedcontent</code> <span>HTML element post-connection steps</span>, given
+  <var>selectedcontent</var>, are:</p>
+
+  <ol>
+   <li><p>Let <var>nearestSelectAncestor</var> be null.</p></li>
+
+   <li><p>Let <var>ancestor</var> be <var>selectedcontent</var>'s <span>parent</span>.</p></li>
+
+   <li><p>Set <var>selectedcontent</var>'s <span data-x="selectedcontent-disabled">disabled</span>
+   state to false.</p></li>
+
+   <li>
+    <p>For each <var>ancestor</var> of <var>selectedcontent</var>'s <span
+    data-x="ancestor">ancestors</span>, in reverse <span>tree order</span>:</p>
+
+    <ol>
+     <li>
+      <p>If <var>ancestor</var> is a <code>select</code> element:</p>
+
+      <ol>
+       <li><p>If <var>nearestSelectAncestor</var> is null, then set <var>nearestSelectAncestor</var>
+       to <var>select</var>.</p></li>
+
+       <li><p>Otherwise, set <var>selectedcontent</var>'s <span
+       data-x="selectedcontent-disabled">disabled</span> state to true.</p></li>
+      </ol>
+     </li>
+
+     <li><p>If <var>ancestor</var> is an <code>option</code> element or a
+     <code>selectedcontent</code> element, then set <var>selectedcontent</var>'s <span
+     data-x="selectedcontent-disabled">disabled</span> state to true.</p></li>
+    </ol>
+   </li>
+
+   <li><p>If <var>nearestSelectAncestor</var> is null or <var>nearestSelectAncestor</var> has the
+   <code data-x="attr-select-multiple">multiple</code> attribute, then return.</p></li>
+
+   <li><p>Run <span>update a <code>select</code>'s <code>selectedcontent</code></span> given
+   <var>nearestSelectAncestor</var>.</p></li>
+
+   <li><p>Run <span>clear a <code>select</code>'s non-primary <code>selectedcontent</code>
+   elements</span> given <var>nearestSelectAncestor</var>.</p></li>
+  </ol>
+
+  <p>The <code>selectedcontent</code> <span>HTML element removing steps</span>, given
+  <var>selectedcontent</var> and <var>oldParent</var>, are:</p>
+
+  <ol>
+   <li>
+    <p>For each <var>ancestor</var> of <var>selectedcontent</var>'s <span
+    data-x="ancestor">ancestors</span>, in reverse <span>tree order</span>:</p>
+
+    <ol>
+     <li><p>If <var>ancestor</var> is a <code>select</code> element, then return.</p></li>
+    </ol>
+   </li>
+
+   <li>
+    <p>For each <var>ancestor</var> of <var>oldParent</var>'s <span data-x="inclusive
+    ancestor">inclusive ancestors</span>, in reverse <span>tree order</span>:</p>
+
+    <ol>
+     <li><p>If <var>ancestor</var> is a <code>select</code> element, then run <span>update a
+     <code>select</code>'s <code>selectedcontent</code></span> given <var>ancestor</var> and
+     return.</p></li>
+    </ol>
+   </li>
+  </ol>
+
 
 
   <h4 split-filename="form-control-infrastructure">Form control infrastructure</h4>
@@ -64691,6 +65319,8 @@ not-slash     = %x0000-002E / %x0030-10FFFF
    <dd><span>Metadata content</span>.</dd>
    <dd><span>Flow content</span>.</dd>
    <dd><span>Phrasing content</span>.</dd>
+   <dd><span><code>select</code> element inner content elements</span>.</dd>
+   <dd><span><code>optgroup</code> element inner content elements</span>.</dd>
    <dt><span data-x="concept-element-contexts">Contexts in which this element can be used</span>:</dt>
    <dd>In a <code>head</code> element of an <span data-x="HTML documents">HTML document</span>, if there are no ancestor <code>noscript</code> elements.</dd>
    <dd>Where <span>phrasing content</span> is expected in <span>HTML documents</span>, if there are no ancestor <code>noscript</code> elements.</dd>
@@ -127988,25 +128618,22 @@ dictionary <dfn dictionary>StorageEventInit</dfn> : <span>EventInit</span> {
   caption">in caption</span>", "<span data-x="insertion mode: in column group">in column
   group</span>", "<span data-x="insertion mode: in table body">in table body</span>", "<span
   data-x="insertion mode: in row">in row</span>", "<span data-x="insertion mode: in cell">in
-  cell</span>", "<span data-x="insertion mode: in select">in select</span>", "<span data-x="insertion
-  mode: in select in table">in select in table</span>", "<span data-x="insertion mode: in
-  template">in template</span>", "<span data-x="insertion mode: after body">after body</span>",
-  "<span data-x="insertion mode: in frameset">in frameset</span>", "<span data-x="insertion mode:
-  after frameset">after frameset</span>", "<span data-x="insertion mode: after after body">after
-  after body</span>", and "<span data-x="insertion mode: after after frameset">after after
-  frameset</span>" during the course of the parsing, as described in the <span>tree
-  construction</span> stage. The insertion mode affects how tokens are processed and whether CDATA
-  sections are supported.</p>
+  cell</span>", "<span data-x="insertion mode: in template">in template</span>", "<span
+  data-x="insertion mode: after body">after body</span>", "<span data-x="insertion mode: in
+  frameset">in frameset</span>", "<span data-x="insertion mode: after frameset">after
+  frameset</span>", "<span data-x="insertion mode: after after body">after after body</span>", and
+  "<span data-x="insertion mode: after after frameset">after after frameset</span>" during the
+  course of the parsing, as described in the <span>tree construction</span> stage. The insertion
+  mode affects how tokens are processed and whether CDATA sections are supported.</p>
 
   <p>Several of these modes, namely "<span data-x="insertion mode: in head">in head</span>", "<span
-  data-x="insertion mode: in body">in body</span>", "<span data-x="insertion mode: in table">in
-  table</span>", and "<span data-x="insertion mode: in select">in select</span>", are special, in
-  that the other modes defer to them at various times. When the algorithm below says that the user
-  agent is to do something "<dfn>using the rules for</dfn> the <var>m</var> insertion
-  mode", where <var>m</var> is one of these modes, the user agent must use the rules
-  described under the <var>m</var> <span>insertion mode</span>'s section, but must leave
-  the <span>insertion mode</span> unchanged unless the rules in <var>m</var> themselves
-  switch the <span>insertion mode</span> to a new value.</p>
+  data-x="insertion mode: in body">in body</span>", and "<span data-x="insertion mode: in table">in
+  table</span>", are special, in that the other modes defer to them at various times. When the
+  algorithm below says that the user agent is to do something "<dfn>using the rules for</dfn> the
+  <var>m</var> insertion mode", where <var>m</var> is one of these modes, the user agent must use
+  the rules described under the <var>m</var> <span>insertion mode</span>'s section, but must leave
+  the <span>insertion mode</span> unchanged unless the rules in <var>m</var> themselves switch the
+  <span>insertion mode</span> to a new value.</p>
 
   <p>When the insertion mode is switched to "<span data-x="insertion mode: text">text</span>" or
   "<span data-x="insertion mode: in table text">in table text</span>", the <dfn>original insertion
@@ -128037,37 +128664,6 @@ dictionary <dfn dictionary>StorageEventInit</dfn> : <span>EventInit</span> {
    parsing algorithm</span> (<span>fragment case</span>), set <var>node</var> to the <var
    data-x="concept-frag-parse-context">context</var> element passed to that algorithm.</p></li>
 
-   <li>
-    <p>If <var>node</var> is a <code>select</code> element, run these substeps:</p>
-
-    <ol>
-     <li><p>If <var>last</var> is true, jump to the step below labeled
-     <i>done</i>.</p></li>
-
-     <li><p>Let <var>ancestor</var> be <var>node</var>.</p></li>
-
-     <li><p><i>Loop</i>: If <var>ancestor</var> is the first node in the <span>stack of
-     open elements</span>, jump to the step below labeled <i>done</i>.</p></li>
-
-     <li><p>Let <var>ancestor</var> be the node before <var>ancestor</var> in the
-     <span>stack of open elements</span>.</p></li>
-
-     <li><p>If <var>ancestor</var> is a <code>template</code> node, jump to the step below
-     labeled <i>done</i>.</p></li>
-
-     <li><p>If <var>ancestor</var> is a <code>table</code> node, switch the <span>insertion
-     mode</span> to "<span data-x="insertion mode: in select in table">in select in table</span>"
-     and return.</p></li> <!-- consider
-     <table><tr><td><select><template></template><caption></table>
-     https://software.hixie.ch/utilities/js/live-dom-viewer/?saved=2374 -->
-
-     <li><p>Jump back to the step labeled <i>loop</i>.</p></li>
-
-     <li><p><i>Done</i>: Switch the <span>insertion mode</span> to "<span data-x="insertion mode: in
-     select">in select</span>" and return.</p></li>
-    </ol>
-   </li>
-
    <li><p>If <var>node</var> is a <code>td</code> or <code>th</code> element and <var>last</var> is
    false, then switch the <span>insertion mode</span> to "<span data-x="insertion mode: in cell">in
    cell</span>" and return.</p></li>
@@ -128266,6 +128862,7 @@ dictionary <dfn dictionary>StorageEventInit</dfn> : <span>EventInit</span> {
    <li><code>th</code></li>
    <li><code>marquee</code></li>
    <li><code>object</code></li>
+   <li><code>select</code></li>
    <li><code>template</code></li>
    <li><span>MathML <code>mi</code></span></li>
    <li><span>MathML <code>mo</code></span></li>
@@ -128312,17 +128909,6 @@ dictionary <dfn dictionary>StorageEventInit</dfn> : <span>EventInit</span> {
    <li><code>template</code> in the <span>HTML namespace</span></li>
   </ul>
 
-  <p>The <span>stack of open elements</span> is said to <dfn data-x="has an element in select
-  scope">have a particular element in select scope</dfn> when it <span data-x="has an element in the
-  specific scope">has that element in the specific scope</span> consisting of all element types
-  <em>except</em> the following:</p>
-
-  <ul class="brief">
-   <!--<li><code>select</code> in the <span>HTML namespace</span></li>-->
-   <li><code>optgroup</code> in the <span>HTML namespace</span></li>
-   <li><code>option</code> in the <span>HTML namespace</span></li>
-  </ul>
-
   <p>Nothing happens if at any time any of the elements in the <span>stack of open elements</span>
   are moved to a new location in, or removed from, the <code>Document</code> tree. In particular,
   the stack is not changed in this situation. This can cause, amongst other strange effects, content
@@ -132666,7 +133252,7 @@ document.body.appendChild(text);
    <!-- the normal ones -->
    <dt>An end tag whose tag name is one of: "address", "article", "aside", "blockquote", "button",
    "center", "details", "dialog", "dir", "div", "dl", "fieldset", "figcaption", "figure", "footer",
-   "header", "hgroup", "listing", "main", "menu", "nav", "ol", "pre", "search", "section",
+   "header", "hgroup", "listing", "main", "menu", "nav", "ol", "pre", "search", "section", "select",
    "summary", "ul"</dt>
    <dd>
     <p>If the <span>stack of open elements</span> does not <span data-x="has an element in
@@ -132957,6 +133543,28 @@ document.body.appendChild(text);
 
    <dt>A start tag whose tag name is "input"</dt>
    <dd>
+    <p>If the parser was created as part of the <span>HTML fragment parsing algorithm</span>
+    (<span>fragment case</span>) and the <span data-x="concept-frag-parse-context">context</span>
+    element passed to that algorithm is a <code>select</code> element:</p>
+
+    <ol>
+     <li><p><span>Parse error</span>.</p></li>
+
+     <li><p>Ignore the token.</p></li>
+
+     <li><p>Return.</p></li>
+    </ol>
+
+    <p>If the <span>stack of open elements</span> <span data-x="has an element in scope">has a
+    <code>select</code> element in scope</span>:</p>
+
+    <ol>
+     <li><p><span>Parse error</span>.</p></li>
+
+     <li><p>Pop elements from the <span>stack of open elements</span> until a <code>select</code>
+     element has been popped from the stack.</p></li>
+    </ol>
+
     <p><span>Reconstruct the active formatting elements</span>, if any.</p>
 
     <p><span>Insert an HTML element</span> for the token. Immediately pop the <span>current
@@ -132985,6 +133593,18 @@ document.body.appendChild(text);
     <code>p</code> element in button scope</span>, then <span>close a <code>p</code>
     element</span>.</p>
 
+    <p>If the <span>stack of open elements</span> <span data-x="has an element in scope">has a
+    <code>select</code> element in scope</span>:</p>
+
+    <ol>
+     <li><p><span>Generate implied end tags</span>.<p></li>
+
+     <li><p>If the <span>stack of open elements</span> <span data-x="has an element in scope">has an
+     <code>option</code> element in scope</span> or <span data-x="has an element in scope">has an
+     <code>optgroup</code> element in scope</span>, then this is a <span>parse
+     error</span>.</p></li>
+    </ol>
+
     <p><span>Insert an HTML element</span> for the token. Immediately pop the <span>current
     node</span> off the <span>stack of open elements</span>.</p>
 
@@ -133054,31 +133674,97 @@ document.body.appendChild(text);
 
    <dt>A start tag whose tag name is "select"</dt>
    <dd>
-    <p><span>Reconstruct the active formatting elements</span>, if any.</p>
+    <p>If the parser was created as part of the <span>HTML fragment parsing algorithm</span>
+    (<span>fragment case</span>) and the <span data-x="concept-frag-parse-context">context</span>
+    element passed to that algorithm is a <code>select</code> element:</p>
 
-    <p><span>Insert an HTML element</span> for the token.</p>
+    <ol>
+     <li><p><span>Parse error</span>.</p></li>
 
-    <p>Set the <span>frameset-ok flag</span> to "not ok".</p>
+     <li><p>Ignore the token.</p></li>
+    </ol>
+
+    <p>Otherwise, if the <span>stack of open elements</span> <span data-x="has an element in
+    scope">has a <code>select</code> element in scope</span>:</p>
+
+    <ol>
+     <li><p><span>Parse error</span>.</p></li>
+
+     <li><p>Ignore the token.</p></li>
+
+     <li><p>Pop elements from the <span>stack of open elements</span> until a <code>select</code>
+     element has been popped from the stack.</p></li>
+    </ol>
+
+    <p>Otherwise:</p>
+
+    <ol>
+     <li><p><span>Reconstruct the active formatting elements</span>, if any.</p></li>
+
+     <li><p><span>Insert an HTML element</span> for the token.</p></li>
+
+     <li><p>Set the <span>frameset-ok flag</span> to "not ok".</p></li>
+    </ol>
+   </dd>
+
+   <dt>A start tag whose tag name is "option"</dt>
+   <dd>
+    <p>If the <span>stack of open elements</span> <span data-x="has an element in scope">has a
+    <code>select</code> element in scope</span>:</p>
+
+    <ol>
+     <li><p><span>Generate implied end tags</span> except for <code>optgroup</code>
+     elements.</p></li>
+
+     <li><p>If the <span>stack of open elements</span> <span data-x="has an element in scope">has an
+     <code>option</code> element in scope</span>, then this is a <span>parse error</span>.</p></li>
+    </ol>
+
+    <p>Otherwise:</p>
+
+    <ol>
+     <li><p>If the <span>current node</span> is an <code>option</code> element, then pop the
+     <span>current node</span> off the <span>stack of open elements</span>.</p></li>
+    </ol>
+
+    <p><span>Reconstruct the active formatting elements</span>, if any.</p>
 
-    <p>If the <span>insertion mode</span> is one of "<span data-x="insertion mode: in table">in
-    table</span>", "<span data-x="insertion mode: in caption">in caption</span>", "<span
-    data-x="insertion mode: in table body">in table body</span>", "<span data-x="insertion mode: in
-    row">in row</span>", or "<span data-x="insertion mode: in cell">in cell</span>", then switch the
-    <span>insertion mode</span> to "<span data-x="insertion mode: in select in table">in select in
-    table</span>". Otherwise, switch the <span>insertion mode</span> to "<span data-x="insertion
-    mode: in select">in select</span>".</p>
+    <p><span>Insert an HTML element</span> for the token.</p>
    </dd>
 
-   <dt>A start tag whose tag name is one of: "optgroup", "option"</dt>
+   <dt>A start tag whose tag name is "optgroup"</dt>
    <dd>
-    <p>If the <span>current node</span> is an <code>option</code> element, then pop the
-    <span>current node</span> off the <span>stack of open elements</span>.</p>
+    <p>If the <span>stack of open elements</span> <span data-x="has an element in scope">has a
+    <code>select</code> element in scope</span>:</p>
+
+    <ol>
+     <li><p><span>Generate implied end tags</span>.</p></li>
+
+     <li><p>If the <span>stack of open elements</span> <span data-x="has an element in scope">has an
+     <code>option</code> element in scope</span> or <span data-x="has an element in scope">has an
+     <code>optgroup</code> element in scope</span>, then this is a <span>parse
+     error</span>.</p></li>
+    </ol>
+
+    <p>Otherwise, if the <span>current node</span> is an <code>option</code> element, then pop the
+    <span>current node</span> from the <span>stack of open elements</span>.</p>
 
     <p><span>Reconstruct the active formatting elements</span>, if any.</p>
 
     <p><span>Insert an HTML element</span> for the token.</p>
    </dd>
 
+   <dt>An end tag whose tag name is "option"</dt>
+   <dd>
+    <p>Let <var>option</var> be the first <code>option</code> element in the <span>stack of open
+    elements</span>.</p>
+
+    <p>Run the steps for "any other end tag."</p>
+
+    <p>If <var>option</var> is no longer in the <span>stack of open elements</span>, then run
+    <span>maybe clone an option into selectedcontent</span> given <var>option</var>.</p>
+   </dd>
+
    <dt>A start tag whose tag name is one of: "rb", "rtc"</dt>
    <dd>
     <p>If the <span>stack of open elements</span> <span data-x="has an element in scope">has a
@@ -134224,239 +134910,6 @@ document.body.appendChild(text);
   same time, nor can it have neither when the <span>close the cell</span> algorithm is invoked.</p>
 
 
-  <h6 id="parsing-main-inselect">The "<dfn data-x="insertion mode: in select">in select</dfn>" insertion mode</h6>
-
-  <p>When the user agent is to apply the rules for the "<span data-x="insertion mode: in select">in
-  select</span>" <span>insertion mode</span>, the user agent must handle the token as follows:</p>
-
-  <dl class="switch">
-
-   <dt>A character token that is U+0000 NULL</dt>
-   <dd>
-    <p><span>Parse error</span>. Ignore the token.</p>
-   </dd>
-
-   <dt>Any other character token</dt>
-   <dd>
-    <p><span data-x="insert a character">Insert the token's character</span>.</p>
-   </dd>
-
-   <dt>A comment token</dt>
-   <dd>
-    <p><span>Insert a comment</span>.</p>
-   </dd>
-
-   <dt>A DOCTYPE token</dt>
-   <dd>
-    <p><span>Parse error</span>. Ignore the token.</p>
-   </dd>
-
-   <dt>A start tag whose tag name is "html"</dt>
-   <dd>
-    <p>Process the token <span>using the rules for</span> the "<span data-x="insertion mode: in
-    body">in body</span>" <span>insertion mode</span>.</p>
-   </dd>
-
-   <dt>A start tag whose tag name is "option"</dt>
-   <dd>
-    <!-- fake </option> (maybe) -->
-    <p>If the <span>current node</span> is an <code>option</code> element, pop that node from the
-    <span>stack of open elements</span>.</p>
-    <!-- end of fake </option> -->
-
-    <p><span>Insert an HTML element</span> for the token.</p>
-   </dd>
-
-   <dt>A start tag whose tag name is "optgroup"</dt>
-   <dd>
-    <!-- fake </option> (maybe) -->
-    <p>If the <span>current node</span> is an <code>option</code> element, pop that node from the
-    <span>stack of open elements</span>.</p>
-    <!-- end of fake </option> -->
-
-    <!-- fake </optgroup> (maybe) -->
-    <p>If the <span>current node</span> is an <code>optgroup</code> element, pop that node from the
-    <span>stack of open elements</span>.</p>
-    <!-- end of fake </optgroup> -->
-
-    <p><span>Insert an HTML element</span> for the token.</p>
-   </dd>
-
-   <dt>A start tag whose tag name is "hr"</dt>
-   <dd>
-    <!-- fake </option> (maybe) -->
-    <p>If the <span>current node</span> is an <code>option</code> element, pop that node from the
-    <span>stack of open elements</span>.</p>
-    <!-- end of fake </option> -->
-
-    <!-- fake </optgroup> (maybe) -->
-    <p>If the <span>current node</span> is an <code>optgroup</code> element, pop that node from the
-    <span>stack of open elements</span>.</p>
-    <!-- end of fake </optgroup> -->
-
-    <p><span>Insert an HTML element</span> for the token. Immediately pop the <span>current
-    node</span> off the <span>stack of open elements</span>.</p>
-
-    <p><span data-x="acknowledge self-closing flag">Acknowledge the token's <i data-x="self-closing
-    flag">self-closing flag</i></span>, if it is set.</p>
-   </dd>
-
-   <dt>An end tag whose tag name is "optgroup"</dt>
-   <dd>
-    <!-- fake </option> (maybe) -->
-    <p>First, if the <span>current node</span> is an <code>option</code> element, and the node
-    immediately before it in the <span>stack of open elements</span> is an <code>optgroup</code>
-    element, then pop the <span>current node</span> from the <span>stack of open
-    elements</span>.</p>
-    <!-- end of fake </option> -->
-
-    <p>If the <span>current node</span> is an <code>optgroup</code> element, then pop that node from
-    the <span>stack of open elements</span>. Otherwise, this is a <span>parse error</span>; ignore
-    the token.</p>
-   </dd>
-
-   <dt>An end tag whose tag name is "option"</dt>
-   <dd>
-    <p>If the <span>current node</span> is an <code>option</code> element, then pop that node from
-    the <span>stack of open elements</span>. Otherwise, this is a <span>parse error</span>; ignore
-    the token.</p>
-   </dd>
-
-   <dt>An end tag whose tag name is "select"</dt>
-   <dd>
-    <p>If the <span>stack of open elements</span> does not <span data-x="has an element in select
-    scope">have a <code>select</code> element in select scope</span>, this is a <span>parse
-    error</span>; ignore the token. (<span>fragment case</span>)</p>
-
-    <p>Otherwise:</p>
-
-    <ol>
-     <li><p>Pop elements from the <span>stack of open elements</span> until a <code>select</code> element
-     has been popped from the stack.</p></li>
-
-     <li><p><span>Reset the insertion mode appropriately</span>.</p></li>
-    </ol>
-   </dd>
-
-   <dt>A start tag whose tag name is "select"</dt>
-   <dd>
-    <p><span>Parse error</span>.</p>
-
-    <!-- fake </select> -->
-    <p>If the <span>stack of open elements</span> does not <span data-x="has an element in select
-    scope">have a <code>select</code> element in select scope</span>, ignore the token.
-    (<span>fragment case</span>)</p>
-
-    <p>Otherwise:</p>
-
-    <ol>
-     <li><p>Pop elements from the <span>stack of open elements</span> until a <code>select</code> element
-     has been popped from the stack.</p></li>
-
-     <li><p><span>Reset the insertion mode appropriately</span>.</p></li>
-     <!-- end of fake </select> -->
-
-     <li><p class="note">It just gets treated like an end tag.</p></li>
-    </ol>
-   </dd>
-
-   <dt>A start tag whose tag name is one of: "input", "keygen", "textarea"</dt>
-   <dd>
-    <p><span>Parse error</span>.</p>
-
-    <!-- fake </select> -->
-    <p>If the <span>stack of open elements</span> does not <span data-x="has an element in select
-    scope">have a <code>select</code> element in select scope</span>, ignore the token.
-    (<span>fragment case</span>)</p>
-
-    <p>Otherwise:</p>
-
-    <ol>
-     <li><p>Pop elements from the <span>stack of open elements</span> until a <code>select</code> element
-     has been popped from the stack.</p></li>
-
-     <li><p><span>Reset the insertion mode appropriately</span>.</p></li>
-     <!-- end of fake </select> -->
-
-     <li><p>Reprocess the token.</p></li>
-    </ol>
-   </dd>
-
-   <dt>A start tag whose tag name is one of: "script", "template"</dt>
-   <dt>An end tag whose tag name is "template"</dt>
-   <dd>
-    <p>Process the token <span>using the rules for</span> the "<span data-x="insertion mode: in
-    head">in head</span>" <span>insertion mode</span>.</p>
-   </dd>
-
-   <dt>An end-of-file token</dt>
-   <dd>
-    <p>Process the token <span>using the rules for</span> the "<span data-x="insertion mode: in
-    body">in body</span>" <span>insertion mode</span>.</p>
-   </dd>
-
-   <dt>Anything else</dt>
-   <dd>
-    <p><span>Parse error</span>. Ignore the token.</p>
-   </dd>
-  </dl>
-
-
-  <h6 id="parsing-main-inselectintable">The "<dfn data-x="insertion mode: in select in table">in select in table</dfn>" insertion mode</h6>
-
-  <p>When the user agent is to apply the rules for the "<span data-x="insertion mode: in select in
-  table">in select in table</span>" <span>insertion mode</span>, the user agent must handle the
-  token as follows:</p>
-
-  <dl class="switch">
-
-   <dt>A start tag whose tag name is one of: "caption", "table", "tbody", "tfoot", "thead", "tr",
-   "td", "th"</dt>
-   <dd>
-    <p><span>Parse error</span>.</p>
-
-    <!-- fake </select> -->
-    <p>Pop elements from the <span>stack of open elements</span> until a <code>select</code> element
-    has been popped from the stack.</p>
-
-    <p><span>Reset the insertion mode appropriately</span>.</p>
-    <!-- end of fake </select> -->
-
-    <p>Reprocess the token.</p>
-   </dd>
-
-   <dt>An end tag whose tag name is one of: "caption", "table", "tbody", "tfoot", "thead", "tr",
-   "td", "th"</dt>
-   <dd>
-    <p><span>Parse error</span>.</p>
-
-    <p>If the <span>stack of open elements</span> does not <span data-x="has an element in table
-    scope">have an element in table scope</span> that is an <span data-x="HTML elements">HTML
-    element</span> with the same tag name as that of the token, then ignore the token.</p>
-
-    <p>Otherwise:</p>
-
-    <ol>
-     <!-- fake </select> -->
-     <li><p>Pop elements from the <span>stack of open elements</span> until a <code>select</code> element
-     has been popped from the stack.</p></li>
-
-     <li><p><span>Reset the insertion mode appropriately</span>.</p></li>
-     <!-- end of fake </select> -->
-
-     <li><p>Reprocess the token.</p></li>
-    </ol>
-   </dd>
-
-   <dt>Anything else</dt>
-   <dd>
-    <p>Process the token <span>using the rules for</span> the "<span data-x="insertion mode: in
-    select">in select</span>" <span>insertion mode</span>.</p>
-   </dd>
-  </dl>
-
-
-
   <h6 id="parsing-main-intemplate">The "<dfn data-x="insertion mode: in template">in template</dfn>" insertion mode</h6>
 
   <p>When the user agent is to apply the rules for the "<span data-x="insertion mode: in template">in
@@ -139344,12 +139797,75 @@ progress { appearance: auto; }</code></pre>
   with the element's <code>optgroup</code> element <span data-x="concept-tree-child">children</span>
   providing headers for groups of options where applicable.</p>
 
+  <p><code>select</code> elements which render as a <span>drop-down box</span> support a <span>base
+  appearance</span> in addition to <span>native appearance</span> and <span>primitive
+  appearance</span>.</p>
+
+  <p>The <code>select</code> element's <span>select popover</span> supports a <span>base
+  appearance</span> and a <span>native appearance</span>. The <span>select popover</span> can only
+  be rendered with <span>base appearance</span> if its associated <code>select</code> is being
+  rendered with <span>base appearance</span>.</p>
+
+  <p>When a <code>select</code> is being rendered as a <span>drop-down box</span> with <span>base
+  appearance</span>, it is expected to render with a <span>shadow tree</span> that contains the
+  following elements:</p>
+
+  <ol>
+   <li><p>A <dfn>select button slot</dfn>, which is a <code>slot</code> element. It is appended to
+   the <code>select</code>'s <span>shadow root</span> as the first child. It is expected to take the
+   first child element of the <code>select</code> if the first child element is a
+   <code>button</code>, otherwise the <span>select fallback button text</span>.</p></li>
+
+   <li><p>A <dfn>select fallback button text</dfn>, which is a <code>div</code> element. It is
+   appended to the <span>select button slot</span>.</p></li>
+
+   <li><p>A <dfn>select popover</dfn>, which is a <code>div</code> element. It is appended to the
+   <code>select</code>'s <span>shadow root</span> as the second child, after the <span>select button
+   slot</span>. The <code>select</code> element's <span>picker pseudo-element</span> is the
+   <span>select popover</span>.</p></li>
+
+   <li><p>A <dfn>select popover slot</dfn>, which is a <code>slot</code> element. It is appended to
+   the <span>select popover</span>. It is expected to take all child nodes of the
+   <code>select</code> except for the first child <code>button</code>, which is taken by the
+   <code>select button slot</code>.</p></li>
+  </ol>
+
+  <p class="note">Since <span>base appearance</span> is determined by computing style, it isn't
+  possible to swap this DOM structure when switching appearance. Implementations can always include
+  the DOM structure for <span>base appearance</span> when the <code>select</code> is rendered as a
+  <span>drop-down box</span> and then choose to include or exclude it from the layout tree in order
+  to control whether it gets rendered or not.</p>
+
+  <p class="note">The <span>select popover</span> is only rendered when it is opted in to <span>base
+  appearance</span> separately from the <code>select</code> element. Otherwise, a native picker is
+  used.</p>
+
+  <p>The <span>select popover</span>'s <span>implicit anchor element</span> is its associated
+  <code>select</code> element.</p>
+
+  <p>When a <code>select</code> element is being rendered with <span>native appearance</span> or
+  <span>primitive appearance</span>, the <span>picker pseudo-element</span> and the
+  <span>picker-icon pseudo-element</span> do not apply.</p>
+
+  <p>The <span>picker pseudo-element</span> is not rendered when it has <span>native
+  appearance</span> or <span>primitive appearance</span>.</p>
+
+  <p>The <span>checkmark pseudo-element</span> only applies to <code>option</code> elements which
+  are inside a <code>select</code> element with <span>base appearance</span> whose <span>picker
+  pseudo-element</span> has <span>base appearance</span>.</p>
+
   <p>An <code>optgroup</code> element is expected to be rendered by displaying the element's <code
   data-x="attr-optgroup-label">label</code> attribute.</p>
 
-  <p>An <code>option</code> element is expected to be rendered by displaying the element's <span
-  data-x="concept-option-label">label</span>, indented under its <code>optgroup</code> element if it
-  has one.</p>
+  <p>An <code>option</code> element is expected to be rendered by displaying the result of
+  <span>collect option text</span> given the <code>option</code> and true, indented under its
+  <code>optgroup</code> element if it has one. If the <code>option</code> is in a
+  <code>select</code> which is being rendered as a <span>drop-down box</span> with <span>base
+  appearance</span>, and the <code>select</code>'s <span>select popover</span> is being rendered
+  with <span>base appearance</span>, and the <code>option</code>'s <code
+  data-x="attr-option-label">label</code> attribute is not set, then the <code>option</code> is
+  expected to render all of its children rather than by displaying its <span
+  data-x="concept-option-label">label</span>.</p>
 
   <p>Each sequence of one or more child <code>hr</code> element siblings may be rendered as a single
   separator.</p>
@@ -139376,6 +139892,102 @@ progress { appearance: auto; }</code></pre>
 
   </div>
 
+  <p>The following styles are expected to apply to <code>select</code> elements when they are being
+  rendered as a <span>drop-down box</span> with <span>base appearance</span>:</p>
+
+  <pre><code class="css">@namespace "http://www.w3.org/1999/xhtml";
+
+select {
+  text-transform: initial;
+  text-align: initial;
+  text-indent: initial;
+  background-color: transparent;
+  border: 1px solid currentColor;
+  padding-block: 0.25em;
+  padding-inline: 0.5em;
+  min-block-size: calc-size(auto, max(size, 24px, 1lh));
+  min-inline-size: calc-size(auto, max(size, 24px));
+  display: inline-flex;
+  gap: 0.5em;
+  border-radius: 0.5em;
+  user-select: none;
+  box-sizing: border-box;
+  field-sizing: content !important;
+}
+
+select > button:first-child {
+  all: unset;
+  display: contents;
+}
+
+select:enabled:hover,
+select option:enabled:hover {
+  background-color: color-mix(in lab, currentColor 10%, transparent);
+}
+select:enabled:active,
+select option:enabled:active {
+  background-color: color-mix(in lab, currentColor 20%, transparent);
+}
+select:disabled,
+select option:disabled {
+  color: color-mix(in lab, currentColor 50%, transparent);
+}
+
+::picker(select) {
+  box-sizing: border-box;
+  border: 1px solid;
+  padding: 0;
+  color: CanvasText;
+  background-color: Canvas;
+  margin: 0;
+  inset: auto;
+  min-inline-size: anchor-size(self-inline);
+  max-block-size: stretch;
+  overflow: auto;
+  position-area: block-end span-inline-end;
+  position-try-order: most-block-size;
+  position-try-fallbacks:
+    block-start span-inline-end,
+    block-end span-inline-start,
+    block-start span-inline-start;
+}
+
+select option {
+  min-inline-size: 24px;
+  min-block-size: max(24px, 1lh);
+  padding-inline: 0.5em;
+  padding-block-end: 0;
+  display: flex;
+  align-items: center;
+  gap: 0.5em;
+  white-space: nowrap;
+}
+
+select option::checkmark {
+  content: '\2713' / '';
+}
+select option:not(:checked)::checkmark {
+  visibility: hidden;
+}
+
+select::picker-icon {
+  content: counter(fake-counter-name, disclosure-open);
+  display: block;
+  margin-inline-start: auto;
+}
+
+select optgroup {
+  font-weight: bolder;
+}
+
+select optgroup option {
+  font-weight: normal;
+}
+
+select optgroup legend {
+  padding-inline: 0.5em;
+  min-block-size: 1lh;
+}</code></pre>
 
   <div w-nodev>
 
@@ -142528,10 +143140,19 @@ interface <dfn interface>External</dfn> {
      <th><code>div</code></th>
      <td>Generic flow container, or container for name-value groups in <code>dl</code> elements</td>
      <td><span data-x="Flow content">flow</span>;
-         <span data-x="Palpable content">palpable</span></td>
+         <span data-x="Palpable content">palpable</span>;
+         <span><code>select</code> element inner content elements</span>;
+         <span><code>optgroup</code> element inner content elements</span>;
+         <span><code>option</code> element inner content elements</span></td>
      <td><span data-x="Flow content">flow</span>;
-         <code>dl</code></td>
-     <td><span data-x="Flow content">flow</span></td>
+         <code>dl</code>;
+         <span><code>select</code> element inner content elements</span>;
+         <span><code>optgroup</code> element inner content elements</span>;
+         <span><code>option</code> element inner content elements</span></td>
+     <td><span data-x="Flow content">flow</span>
+         <span><code>select</code> element inner content elements</span>*;
+         <span><code>optgroup</code> element inner content elements</span>*;
+         <span><code>option</code> element inner content elements</span>*</td>
      <td><span data-x="global attributes">globals</span></td>
      <td><code>HTMLDivElement</code></td>
     </tr>
@@ -142720,8 +143341,10 @@ interface <dfn interface>External</dfn> {
     <tr>
      <th><code>hr</code></th>
      <td>Thematic break</td>
-     <td><span data-x="Flow content">flow</span></td>
-     <td><span data-x="Flow content">flow</span></td>
+     <td><span data-x="Flow content">flow</span>;
+         <span><code>select</code> element inner content elements</span></td>
+     <td><span data-x="Flow content">flow</span>;
+         <span><code>select</code> element inner content elements</span></td>
      <td>empty</td>
      <td><span data-x="global attributes">globals</span></td>
      <td><code>HTMLHRElement</code></td>
@@ -142899,8 +143522,9 @@ interface <dfn interface>External</dfn> {
      <th><code>legend</code></th>
      <td>Caption for <code>fieldset</code></td>
      <td>none</td>
-     <td><code>fieldset</code></td>
-     <td><span data-x="Phrasing content">phrasing</span>;
+     <td><code>fieldset</code>;
+         <code>optgroup</code></td>
+     <td><span data-x="Phrasing content">phrasing</span>*;
          <span data-x="heading content">heading content</span></td>
      <td><span data-x="global attributes">globals</span></td>
      <td><code>HTMLLegendElement</code></td>
@@ -143066,7 +143690,9 @@ interface <dfn interface>External</dfn> {
      <td>Fallback content for script</td>
      <td><span data-x="Metadata content">metadata</span>;
          <span data-x="Flow content">flow</span>;
-         <span data-x="Phrasing content">phrasing</span></td>
+         <span data-x="Phrasing content">phrasing</span>;
+         <span><code>select</code> element inner content elements</span>;
+         <span><code>optgroup</code> element inner content elements</span></td>
      <td><code>head</code>*;
          <span data-x="Phrasing content">phrasing</span>*</td>
      <td>varies*</td>
@@ -143114,10 +143740,11 @@ interface <dfn interface>External</dfn> {
     <tr>
      <th><code>optgroup</code></th>
      <td>Group of options in a list box</td>
-     <td>none</td>
-     <td><code>select</code></td>
-     <td><code>option</code>;
-         <span>script-supporting elements</span></td>
+     <td><span><code>select</code> element inner content elements</span></td>
+     <td><code>select</code>;
+         <code>div</code>*</td>
+     <td><code><code>optgroup</code> element inner content elements</code>;
+         <code>legend</code>*</td>
      <td><span data-x="global attributes">globals</span>;
          <code data-x="attr-optgroup-disabled">disabled</code>;
          <code data-x="attr-optgroup-label">label</code></td>
@@ -143127,11 +143754,14 @@ interface <dfn interface>External</dfn> {
     <tr>
      <th><code>option</code></th>
      <td>Option in a list box or combo box control</td>
-     <td>none</td>
+     <td><span><code>select</code> element inner content elements</span>;
+         <span><code>optgroup</code> element inner content elements</span></td>
      <td><code>select</code>;
          <code>datalist</code>;
-         <code>optgroup</code></td>
-     <td><span data-x="text content">text</span>*</td>
+         <code>optgroup</code>;
+         <code>div</code>*</td>
+     <td><span data-x="text content">text</span>*;
+         <span><code>option</code> element inner content elements</span>*</td>
      <td><span data-x="global attributes">globals</span>;
          <code data-x="attr-option-disabled">disabled</code>;
          <code data-x="attr-option-label">label</code>;
@@ -143343,9 +143973,8 @@ interface <dfn interface>External</dfn> {
          <span data-x="Form-associated element">form-associated</span>;
          <span data-x="Palpable content">palpable</span></td>
      <td><span data-x="Phrasing content">phrasing</span></td>
-     <td><code>option</code>;
-         <code>optgroup</code>;
-         <span>script-supporting elements</span></td>
+     <td><span><code>select</code> element inner content elements</span>;
+         <code>button</code>*</td>
      <td><span data-x="global attributes">globals</span>;
          <code data-x="attr-fe-autocomplete">autocomplete</code>;
          <code data-x="attr-fe-disabled">disabled</code>;
@@ -143357,6 +143986,16 @@ interface <dfn interface>External</dfn> {
      <td><code>HTMLSelectElement</code></td>
     </tr>
 
+    <tr>
+     <th><code>selectedcontent</code></th>
+     <td>Mirrors content from an <code>option</code></td>
+     <td>none</td>
+     <td><code>button</code></td>
+     <td>empty</td>
+     <td><span data-x="global attributes">globals</span></td>
+     <td><code>HTMLSelectedContentElement</code></td>
+    </tr>
+
     <tr>
      <th><code>slot</code></th>
      <td>Shadow tree slot</td>
@@ -143406,7 +144045,8 @@ interface <dfn interface>External</dfn> {
      <td><span data-x="Flow content">flow</span>;
          <span data-x="Phrasing content">phrasing</span>;
          <span data-x="Palpable content">palpable</span></td>
-     <td><span data-x="Phrasing content">phrasing</span></td>
+     <td><span data-x="Phrasing content">phrasing</span>;
+         <span><code>option</code> element inner content elements</span>*</td>
      <td><span data-x="Phrasing content">phrasing</span></td>
      <td><span data-x="global attributes">globals</span></td>
      <td><code>HTMLSpanElement</code></td>
@@ -144179,6 +144819,37 @@ interface <dfn interface>External</dfn> {
      <td>
       &mdash;
 
+    <tr>
+     <td> <span><code>select</code> element inner content elements</span>
+     <td>
+      <code>option</code>;
+      <code>optgroup</code>;
+      <code>hr</code>;
+      <span>script-supporting elements</span>;
+      <code>noscript</code>;
+      <code>div</code>
+     <td>
+      &mdash;
+
+    <tr>
+     <td> <span><code>optgroup</code> element inner content elements</span>
+     <td>
+      <code>option</code>;
+      <span>script-supporting elements</span>;
+      <code>noscript</code>;
+      <code>div</code>
+     <td>
+      &mdash;
+
+    <tr>
+     <td> <span><code>option</code> element inner content elements</span>
+     <td>
+      <code>div</code>
+     <td>
+      <span>phrasing content</span> except for <code>datalist</code>, <code>object</code>,
+      <span>interactive content</span>, or elements with <code
+      data-x="attr-tabindex">tabindex</code>
+
   </table>
 
 
@@ -146195,6 +146866,10 @@ interface <dfn interface>External</dfn> {
      <td> <code>select</code>
      <td> <code>HTMLSelectElement</code> : <code>HTMLElement</code>
 
+    <tr>
+     <td> <code>selectedcontent</code>
+     <td> <code>HTMLSelectedContentElement</code> : <code>HTMLElement</code>
+
     <tr>
      <td> <code>slot</code>
      <td> <code>HTMLSlotElement</code> : <code>HTMLElement</code>
@@ -146888,6 +147563,9 @@ INSERT INTERFACES HERE
    <dt id="refsCSSFONTS">[CSSFONTS]</dt>
    <dd><cite><a href="https://drafts.csswg.org/css-fonts/">CSS Fonts</a></cite>, J. Daggett. W3C.</dd>
 
+   <dt id="refsCSSFORMS">[CSSFORMS]</dt>
+   <dd><cite><a href="https://w3c.github.io/csswg-drafts/css-forms/">CSS Forms</a></cite>, T. Nguyen. W3C.</dd>
+
    <dt id="refsCSSFLEXBOX">[CSSFLEXBOX]</dt>
    <dd><cite><a href="https://drafts.csswg.org/css-flexbox/">CSS Flexible Box Layout</a></cite>, T. Atkins, E. Etemad, R. Atanassov. W3C.</dd>
 

From 3496706a58534c1625b8aa70bf3ff8bebe9c5ffe Mon Sep 17 00:00:00 2001
From: Joey Arhar <jarhar@chromium.org>
Date: Wed, 25 Jun 2025 11:51:01 -0700
Subject: [PATCH 2/8] add selectedcontent to phrasing content

---
 source | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/source b/source
index 1d39e4cc493..624c1274b42 100644
--- a/source
+++ b/source
@@ -12763,6 +12763,8 @@ console.assert(image.height === 200);</code></pre>
    <li><code>samp</code></li>
    <li><code>script</code></li>
    <li><code>select</code></li>
+   <li><code>selectedcontent</code> (if it is a descendant of a <code>button</code> in a
+   <code>select</code>)</li>
    <li><code>slot</code></li>
    <li><code>small</code></li>
    <li><code>span</code></li>
@@ -57059,7 +57061,7 @@ interface <dfn interface>HTMLLegendElement</dfn> : <span>HTMLElement</span> {
 
   <dl class="element">
    <dt><span data-x="concept-element-categories">Categories</span>:</dt>
-   <dd>None.</dd>
+   <dd><span>Phrasing content</span>.</dd>
    <dt><span data-x="concept-element-contexts">Contexts in which this element can be used</span>:</dt>
    <dd>As a descendant of a <code>button</code> element which is a child of a <code>select</code>
    element.</dd>
@@ -144596,6 +144598,7 @@ interface <dfn interface>External</dfn> {
       <code>samp</code>;
       <code>script</code>;
       <code>select</code>;
+      <code>selectedcontent</code>;
       <code>slot</code>;
       <code>small</code>;
       <code>span</code>;

From e39a1f2c05c0bcc24335bb3a7be91693e1fbbbb2 Mon Sep 17 00:00:00 2001
From: Joey Arhar <jarhar@chromium.org>
Date: Mon, 7 Jul 2025 16:32:58 -0700
Subject: [PATCH 3/8] descendant of datalist

---
 source | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/source b/source
index 624c1274b42..dec020bb457 100644
--- a/source
+++ b/source
@@ -55129,16 +55129,16 @@ interface <dfn interface>HTMLOptGroupElement</dfn> : <span>HTMLElement</span> {
    <dd><span><code>optgroup</code> element inner content elements</span>.</dd>
    <dt><span data-x="concept-element-contexts">Contexts in which this element can be used</span>:</dt>
    <dd>As a descendant of a <code>select</code> element.</dd>
-   <dd>As a child of a <code>datalist</code> element.</dd>
+   <dd>As a descendant of a <code>datalist</code> element.</dd>
    <dd>As a descendant of an <code>optgroup</code> element.</dd>
    <dt><span data-x="concept-element-content-model">Content model</span>:</dt>
    <dd>If the element has a <code data-x="attr-option-label">label</code> attribute and a <code data-x="attr-option-value">value</code> attribute: <span data-x="concept-content-nothing">Nothing</span>.</dd>
    <dd>If the element has a <code data-x="attr-option-label">label</code> attribute but no <code data-x="attr-option-value">value</code> attribute: <span data-x="text content">Text</span>.</dd>
    <dd>If the element has no <code data-x="attr-option-label">label</code> attribute and is not a
-   child of a <code>datalist</code> element: Zero or more <span><code>option</code> element
+   descendant of a <code>datalist</code> element: Zero or more <span><code>option</code> element
    inner content elements</span>.</dd>
    <dd>If the element has no <code data-x="attr-option-label">label</code> attribute and is a
-   child of a <code>datalist</code> element: <span data-x="text content">Text</span>.</dd>
+   descendant of a <code>datalist</code> element: <span data-x="text content">Text</span>.</dd>
    <dt><span data-x="concept-element-attributes">Content attributes</span>:</dt>
    <dd><span>Global attributes</span></dd>
    <dd><code data-x="attr-option-disabled">disabled</code></dd>

From 22573b5cd516e4e88e57f721264195ef56a7a235 Mon Sep 17 00:00:00 2001
From: Domenic Denicola <d@domenic.me>
Date: Fri, 18 Jul 2025 12:34:17 +0900
Subject: [PATCH 4/8] Minor editorial nits

---
 source | 104 ++++++++++++++++++++++++++-------------------------------
 1 file changed, 48 insertions(+), 56 deletions(-)

diff --git a/source b/source
index dec020bb457..23cf0118587 100644
--- a/source
+++ b/source
@@ -3873,13 +3873,9 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
     <ref>CSSFORMS</ref></p>
 
     <ul class="brief">
-     <li>The <dfn data-x-href="https://drafts.csswg.org/css-forms/#the-picker-pseudo-element">picker
-     pseudo-element</dfn></li>
-     <li>The <dfn data-x-href="https://drafts.csswg.org/css-forms/#selectordef-checkmark">checkmark
-     pseudo-element</dfn></li>
-     <li>The <dfn
-     data-x-href="https://drafts.csswg.org/css-forms/#picker-opener-icon-the-picker-icon-pseudo-element">picker-icon
-     pseudo-element</dfn></li>
+     <li><dfn data-x-href="https://drafts.csswg.org/css-forms/#the-picker-pseudo-element">'::picker'</dfn></li>
+     <li><dfn data-x-href="https://drafts.csswg.org/css-forms/#selectordef-checkmark">'::checkmark'</dfn></li>
+     <li><dfn data-x-href="https://drafts.csswg.org/css-forms/#picker-opener-icon-the-picker-icon-pseudo-element">'::picker-icon'</dfn></li>
     </ul>
 
     <p>The following features are defined in <cite>CSS Grid Layout</cite>: <ref>CSSGRID</ref></p>
@@ -13040,7 +13036,7 @@ https://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20HTML%3E%
   <ul class="brief category-list">
    <li><code>div</code></li>
 
-   <li><span>phrasing content</span></li>
+   <li><span>phrasing content</span> that is not in the following exclusion list</li>
   </ul>
 
   <p>The following are excluded from <span><code>option</code> element inner content
@@ -21800,7 +21796,7 @@ included with Exhibit B.
    <dd>Where <span>flow content</span> is expected.</dd>
    <dd>As a child of a <code>dl</code> element.</dd>
    <dt><span data-x="concept-element-content-model">Content model</span>:</dt>
-   <dd>If the element is a child of a <code>dl</code> element: one or more <code>dt</code> elements followed by one or more <code>dd</code> elements, optionally intermixed with <span>script-supporting elements</span>.</dd>
+   <dd>If the element is a child of a <code>dl</code> element: One or more <code>dt</code> elements followed by one or more <code>dd</code> elements, optionally intermixed with <span>script-supporting elements</span>.</dd>
    <dd>Otherwise, if the element is a descendant of an <code>option</code> element: Zero or more
    <span><code>option</code> element inner content elements</span>.</dd>
    <dd>Otherwise, if the element is a descendant of an <code>optgroup</code> element: Zero or more
@@ -54108,8 +54104,8 @@ interface <dfn interface>HTMLButtonElement</dfn> : <span>HTMLElement</span> {
    <dt><span data-x="concept-element-contexts">Contexts in which this element can be used</span>:</dt>
    <dd>Where <span>phrasing content</span> is expected.</dd>
    <dt><span data-x="concept-element-content-model">Content model</span>:</dt>
-   <dd>Zero or one <code>button</code> element if the <code>select</code> is a <span>drop-down
-   box</span> followed by zero or more <span><code>select</code> element inner content
+   <dd>Zero or one <code>button</code> elements if the <code>select</code> is a <span>drop-down
+   box</span>, followed by zero or more <span><code>select</code> element inner content
    elements</span>.</dd>
    <dt><span data-x="concept-element-attributes">Content attributes</span>:</dt>
    <dd><span>Global attributes</span></dd>
@@ -54212,10 +54208,10 @@ interface <dfn interface>HTMLSelectElement</dfn> : <span>HTMLElement</span> {
   <ol>
    <li><p>Let <var>options</var> be « ».</p></li>
 
-   <li>
-    <p>Let <var>node</var> be the <span>first child</span> of <var>select</var> in <span>tree
-    order</span>.</p>
+   <li><p>Let <var>node</var> be the <span>first child</span> of <var>select</var> in <span>tree
+   order</span>.</p></li>
 
+   <li>
     <p><span>While</span> <var>node</var> is not null:</p>
 
     <ol>
@@ -54454,9 +54450,9 @@ interface <dfn interface>HTMLSelectElement</dfn> : <span>HTMLElement</span> {
   focus the first or last option in the viewport of the picker via the PageUp or PageDown keys.</p>
 
   <p class="note">Which particular keys of the keyboard cause these actions might differ across
-  implementations and platforms. The ARIA Authoring Practices Guide has good recommendations for
-  this behavior <a
-  href="https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/">here</a>.</p>
+  implementations and platforms. The ARIA Authoring Practices Guide has good <a
+  href="https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/">recommendations</a>
+  for this behavior.</p>
 
   <p>If the <code data-x="attr-select-multiple">multiple</code> attribute is present, and the
   element is not <span data-x="concept-fe-disabled">disabled</span>, then the user agent should
@@ -54697,11 +54693,11 @@ interface <dfn interface>HTMLSelectElement</dfn> : <span>HTMLElement</span> {
   <span data-x="concept-option-selectedness">selectedness</span> set to true.</p>
 
   <p>The <dfn attribute for="HTMLSelectElement"><code
-  data-x="dom-select-selectedIndex">selectedIndex</code></dfn> IDL attribute, on getting, must
-  return the <span data-x="concept-option-index">index</span> of the first <code>option</code>
-  element in the <span data-x="concept-select-option-list">list of options</span> in <span>tree
+  data-x="dom-select-selectedIndex">selectedIndex</code></dfn> getter steps are to return the <span
+  data-x="concept-option-index">index</span> of the first <code>option</code> element in
+  <span>this</span>'s <span data-x="concept-select-option-list">list of options</span> in <span>tree
   order</span> that has its <span data-x="concept-option-selectedness">selectedness</span> set to
-  true, if any. If there isn't one, then it must return &#x2212;1.</p>
+  true, if any. If there isn't one, then return &#x2212;1.</p>
 
   <p>The <code data-x="dom-select-selectedIndex">selectedIndex</code> setter steps are:</p>
 
@@ -54737,11 +54733,11 @@ interface <dfn interface>HTMLSelectElement</dfn> : <span>HTMLElement</span> {
   attribute and a <span data-x="concept-select-size">display size</span> of 1.</p>
 
   <p>The <dfn attribute for="HTMLSelectElement"><code data-x="dom-select-value">value</code></dfn>
-  IDL attribute, on getting, must return the <span data-x="concept-option-value">value</span> of the
-  first <code>option</code> element in the <span data-x="concept-select-option-list">list of
-  options</span> in <span>tree order</span> that has its <span
-  data-x="concept-option-selectedness">selectedness</span> set to true, if any. If there isn't one,
-  then it must return the empty string.</p>
+  getter steps are to return the <span data-x="concept-option-value">value</span> of the
+  first <code>option</code> element in <span>this</span>'s <span
+  data-x="concept-select-option-list">list of options</span> in <span>tree order</span> that has its
+  <span data-x="concept-option-selectedness">selectedness</span> set to true, if any. If there isn't
+  one, then return the empty string.</p>
 
   <p>The <code data-x="dom-select-value">value</code> setter steps are:</p>
 
@@ -54889,13 +54885,10 @@ interface <dfn interface>HTMLSelectElement</dfn> : <span>HTMLElement</span> {
   &hellip;</code></pre>
   </div>
 
-  <div class="note">
-   <p>The first child <code>button</code> element as allowed by the content model of
-   <code>select</code> is not a submit button. It is used to replace the in-page rendering of the
-   <code>select</code> element. Its form submission behavior is prevented because it has inert set
-   in the UA stylesheet.</p>
-  </div>
-
+  <p class="note" id="note-first-button-in-select-not-submit">The first child <code>button</code>
+  element as allowed by the content model of <code>select</code> is not a submit button. It is used
+  to replace the in-page rendering of the <code>select</code> element. Its form submission behavior
+  is prevented because it is <span>inert</span>.</p>
 
 
   <h4>The <dfn element><code>datalist</code></dfn> element</h4>
@@ -55084,7 +55077,7 @@ interface <dfn interface>HTMLOptGroupElement</dfn> : <span>HTMLElement</span> {
 
   <p>The value of the <span data-x="concept-optgroup-label"><code>optgroup</code> label
   algorithm</span> gives the name of the group, for the purposes of the user interface. <span
-  w-nodev>User agends should use this attribute's value when labeling the group of
+  w-nodev>User agents should use this attribute's value when labeling the group of
   <code>option</code> elements in a <code>select</code> element.</span></p>
 
   <p class="note">There is no way to select an <code>optgroup</code> element. Only
@@ -55421,12 +55414,12 @@ interface <dfn interface>HTMLOptionElement</dfn> : <span>HTMLElement</span> {
   <p>The <dfn attribute for="HTMLOptionElement"><code data-x="dom-option-index">index</code></dfn>
   IDL attribute must return the element's <span data-x="concept-option-index">index</span>.</p>
 
-  <p>The <dfn attribute for="HTMLOptionElement"><code data-x="dom-option-text">text</code></dfn> IDL
-  attribute, on getting, must return the result of <span>collect option text</span> given
-  <span>this</span> and false.</p>
+  <p>The <dfn attribute for="HTMLOptionElement"><code data-x="dom-option-text">text</code></dfn>
+  getter steps are to return the result of <span>collect option text</span> given <span>this</span>
+  and false.</p>
 
-  <p>The <code data-x="dom-option-text">text</code> attribute's setter must <span>string replace
-  all</span> with the given value within this element.</p>
+  <p>The <code data-x="dom-option-text">text</code> setter steps are to <span>string replace
+  all</span> with the given value within <span>this</span>.</p>
 
   <p>The <dfn attribute for="HTMLOptionElement"><code data-x="dom-option-form">form</code></dfn> IDL
   attribute's behavior depends on whether the <code>option</code> element is in a
@@ -55512,14 +55505,13 @@ interface <dfn interface>HTMLOptionElement</dfn> : <span>HTMLElement</span> {
 
   </div>
 
-  <div class="note">
-   <p>When no <code data-x="attr-option-value">value</code> attribute is set on the
-   <code>option</code> element, its text contents are used to generate a submittable value. In the
-   case that the <code>option</code> element has child elements, this can lead to unexpected results
-   such as <code>option</code> elements which render differently but have the same value. In order
-   to address this, setting the <code data-x="attr-option-value">value</code> attribute on
-   <code>option</code> elements is recommended.</p>
-  </div>
+  <p class="note" id="note-option-no-value">When no <code data-x="attr-option-value">value</code>
+  attribute is set on the <code>option</code> element, its text contents are used to generate a
+  submittable value. In the case that the <code>option</code> element has child elements, this can
+  lead to unexpected results such as <code>option</code> elements which render differently but have
+  the same value. In order to address this, setting the <code
+  data-x="attr-option-value">value</code> attribute on <code>option</code> elements is
+  recommended.</p>
 
 
 
@@ -139248,8 +139240,8 @@ details[open] > summary:first-of-type {
   </ol>
 
   <p class="note">The structure of this shadow tree is observable through the ways that the children
-  of the <code>details</code> element and the '::details-content' pseudo-element respond to CSS
-  styles.</p>
+  of the <code>details</code> element and the <span>'::details-content'</span> pseudo-element
+  respond to CSS styles.</p>
 
   <!-- https://mail.gnome.org/archives/usability/2006-June/msg00015.html -->
 
@@ -139823,7 +139815,7 @@ progress { appearance: auto; }</code></pre>
 
    <li><p>A <dfn>select popover</dfn>, which is a <code>div</code> element. It is appended to the
    <code>select</code>'s <span>shadow root</span> as the second child, after the <span>select button
-   slot</span>. The <code>select</code> element's <span>picker pseudo-element</span> is the
+   slot</span>. The <code>select</code> element's <span>'::picker'</span> pseudo-element is the
    <span>select popover</span>.</p></li>
 
    <li><p>A <dfn>select popover slot</dfn>, which is a <code>slot</code> element. It is appended to
@@ -139846,15 +139838,15 @@ progress { appearance: auto; }</code></pre>
   <code>select</code> element.</p>
 
   <p>When a <code>select</code> element is being rendered with <span>native appearance</span> or
-  <span>primitive appearance</span>, the <span>picker pseudo-element</span> and the
-  <span>picker-icon pseudo-element</span> do not apply.</p>
+  <span>primitive appearance</span>, the <span>'::picker'</span> pseudo-element and the
+  <span>'::picker-icon'</span> pseudo-element do not apply.</p>
 
-  <p>The <span>picker pseudo-element</span> is not rendered when it has <span>native
+  <p>The <span>'::picker'</span> pseudo-element is not rendered when it has <span>native
   appearance</span> or <span>primitive appearance</span>.</p>
 
-  <p>The <span>checkmark pseudo-element</span> only applies to <code>option</code> elements which
-  are inside a <code>select</code> element with <span>base appearance</span> whose <span>picker
-  pseudo-element</span> has <span>base appearance</span>.</p>
+  <p>The <span>'::checkmark'</span> pseudo-element only applies to <code>option</code> elements
+  which are inside a <code>select</code> element with <span>base appearance</span> whose
+  <span>'::picker'</span> pseudo-element has <span>base appearance</span>.</p>
 
   <p>An <code>optgroup</code> element is expected to be rendered by displaying the element's <code
   data-x="attr-optgroup-label">label</code> attribute.</p>

From 963b6123409fc16db83ff888a8463e275f9bf010 Mon Sep 17 00:00:00 2001
From: Domenic Denicola <d@domenic.me>
Date: Fri, 18 Jul 2025 13:03:56 +0900
Subject: [PATCH 5/8] Rearrange (minimal content changes) select section, with
 separators

---
 source | 342 +++++++++++++++++++++++++++++----------------------------
 1 file changed, 174 insertions(+), 168 deletions(-)

diff --git a/source b/source
index 23cf0118587..702be826135 100644
--- a/source
+++ b/source
@@ -54190,65 +54190,18 @@ interface <dfn interface>HTMLSelectElement</dfn> : <span>HTMLElement</span> {
   attribute, if specified, must have a value that is a <span>valid non-negative integer</span>
   greater than zero.</p>
 
-  <div w-nodev>
-
-  <p>The <dfn data-x="concept-select-size">display size</dfn> of a <code>select</code> element is the
-  result of applying the <span>rules for parsing non-negative integers</span> to the value of
-  element's <code data-x="attr-select-size">size</code> attribute, if it has one and parsing it is
-  successful. If applying those rules to the attribute's value is not successful, or if the <code
-  data-x="attr-select-size">size</code> attribute is absent, then the element's <span
-  data-x="concept-select-size">display size</span> is 4 if the element's <code
-  data-x="attr-select-multiple">multiple</code> content attribute is present, and 1 otherwise.</p>
-
-  </div>
-
-  <p>To get the <dfn data-x="concept-select-option-list">list of options</dfn> given a
-  <code>select</code> element <var>select</var>:</p>
-
-  <ol>
-   <li><p>Let <var>options</var> be « ».</p></li>
-
-   <li><p>Let <var>node</var> be the <span>first child</span> of <var>select</var> in <span>tree
-   order</span>.</p></li>
-
-   <li>
-    <p><span>While</span> <var>node</var> is not null:</p>
-
-    <ol>
-     <li><p>If <var>node</var> is an <code>option</code> element, then <span data-x="list
-     append">append</span> <var>node</var> to <var>options</var>.</p></li>
-
-     <li>
-      <p>If any of the following conditions are true:</p>
-
-      <ul>
-       <li><p><var>node</var> is a <code>select</code> element;</p></li>
-
-       <li><p><var>node</var> is an <code>hr</code> element;</p></li>
-
-       <li><p><var>node</var> is an <code>option</code> element;</p></li>
-
-       <li><p><var>node</var> is an <code>optgroup</code> element and <var>node</var> has an
-       <span>ancestor</span> <code>optgroup</code> in between itself and <var>select</var>,</p></li>
-      </ul>
-
-      <p>then set <var>node</var> to the next <span>descendant</span> of <var>select</var> in
-      <span>tree order</span>, excluding <var>node</var>'s <span
-      data-x="descendant">descendants</span>, if any such node exists; otherwise null.</p>
-
-      <p>Otherwise, set <var>node</var> to the next <span>descendant</span> of <var>select</var> in
-      <span>tree order</span>, if any such node exists; otherwise null.</p>
-     </li>
-    </ol>
-   </li>
-
-   <li><p>Return <var>options</var>.</p></li>
-  </ol>
-
   <p>The <dfn element-attr for="select"><code data-x="attr-select-required">required</code></dfn>
   attribute is a <span>boolean attribute</span>. When specified, the user will be required to select
   a value before submitting the form.</p>
 
+  <p>The <code data-x="attr-fae-form">form</code> attribute is used to explicitly associate the
+  <code>select</code> element with its <span>form owner</span>. The <code
+  data-x="attr-fe-name">name</code> attribute represents the element's name. The <code
+  data-x="attr-fe-disabled">disabled</code> attribute is used to make the control non-interactive
+  and to prevent its value from being submitted. The <code
+  data-x="attr-fe-autocomplete">autocomplete</code> attribute controls how the user agent provides
+  autofill behavior.</p>
+
   <p>If a <code>select</code> element has a <code data-x="attr-select-required">required</code>
   attribute specified, does not have a <code data-x="attr-select-multiple">multiple</code> attribute
   specified, and has a <span data-x="concept-select-size">display size</span> of 1; and if the <span
@@ -54269,6 +54222,8 @@ interface <dfn interface>HTMLSelectElement</dfn> : <span>HTMLElement</span> {
 
   <div w-nodev>
 
+  <hr>
+
   <p><strong>Constraint validation</strong>: If the element has its <code
   data-x="attr-select-required">required</code> attribute specified, and either none of the
   <code>option</code> elements in the <code>select</code> element's <span
@@ -54279,9 +54234,37 @@ interface <dfn interface>HTMLSelectElement</dfn> : <span>HTMLElement</span> {
   data-x="concept-option-selectedness">selectedness</span> set to true is the <span>placeholder label
   option</span>, then the element is <span>suffering from being missing</span>.</p>
 
-  </div>
+  <p>The <span data-x="concept-form-reset-control">reset algorithm</span> for a <code>select</code>
+  element <var>selectElement</var> is:</p>
+
+  <ol>
+   <li><p>Set <var>selectElement</var>'s <span>user validity</span> to false.</p></li>
+
+   <li>
+    <p><span data-x="list iterate">For each</span> <var>optionElement</var> of
+    <var>selectElement</var>'s <span data-x="concept-select-option-list">list of
+    options</span>:</p>
+
+    <ol>
+     <li><p>If <var>optionElement</var> has a <code data-x="attr-option-selected">selected</code>
+     attribute, then set <var>optionElement</var>'s <span
+     data-x="concept-option-selectedness">selectedness</span> to true; otherwise set it to
+     false.</p></li>
+
+     <li><p>Set <var>optionElement</var>'s <span data-x="concept-option-dirtiness">dirtiness</span>
+     to false.</p></li>
+    </ol>
+   </li>
+
+   <li><p>Run the <span>selectedness setting algorithm</span> given
+   <var>selectElement</var>.</p></li>
+  </ol>
+
+  <p>A <code>select</code> element that is not <span data-x="concept-fe-disabled">disabled</span> is
+  <i data-x="concept-fe-mutable">mutable</i>.</p>
+
+  <hr>
 
-  <div w-nodev>
 
   <p>The user agent should allow the user to <dfn data-x="concept-select-pick">pick</dfn> an
   <code>option</code> element from a <code>select</code> element in its <span
@@ -54343,81 +54326,6 @@ interface <dfn interface>HTMLSelectElement</dfn> : <span>HTMLElement</span> {
   false, set its <span data-x="concept-option-dirtiness">dirtiness</span> to true, and then
   <span>send <code>select</code> update notifications</span>.</p>
 
-  <p>The <dfn>selectedness setting algorithm</dfn>, given a <code>select</code> element
-  <var>element</var>, is to run the following steps:</p>
-
-  <ol>
-   <li><p>If <var>element</var>'s <code data-x="attr-select-multiple">multiple</code> attribute is
-   absent, and <var>element</var>'s <span data-x="concept-select-size">display size</span> is 1,
-   and no <code>option</code> elements in the <var>element</var>'s <span
-   data-x="concept-select-option-list">list of options</span> have their <span
-   data-x="concept-option-selectedness">selectedness</span> set to true, then set the <span
-   data-x="concept-option-selectedness">selectedness</span> of the first <code>option</code>
-   element in the <span data-x="concept-select-option-list">list of options</span> in
-   <span>tree order</span> that is not <span data-x="concept-option-disabled">disabled</span>,
-   if any, to true, and return.</p></li>
-
-   <li><p>If <var>element</var>'s <code data-x="attr-select-multiple">multiple</code> attribute is
-   absent, and two or more <code>option</code> elements in <var>element</var>'s <span
-   data-x="concept-select-option-list">list of options</span> have their <span
-   data-x="concept-option-selectedness">selectedness</span> set to true, then set the <span
-   data-x="concept-option-selectedness">selectedness</span> of all but the last <code>option</code>
-   element with its <span data-x="concept-option-selectedness">selectedness</span> set to true in
-   the <span data-x="concept-select-option-list">list of options</span> in <span>tree order</span>
-   to false.</p></li>
-  </ol>
-
-  <p>The <code>option</code> <span data-x="html element insertion steps">HTML element insertion
-  steps</span>, given <var>insertedNode</var>, are:</p>
-
-  <ol>
-   <li><p>If <var>insertedNode</var>'s parent is a <code>select</code> element, or
-   <var>insertedNode</var>'s parent is an <code>optgroup</code> element whose parent is a
-   <code>select</code> element, then run that <code>select</code> element's <span>selectedness
-   setting algorithm</span>.</p></li>
-  </ol>
-
-  <p>The <code>option</code> <span data-x="html element removing steps">HTML element removing
-  steps</span>, given <var>removedNode</var> and <var>oldParent</var>, are:</p>
-
-  <ol>
-   <li><p>If <var>oldParent</var> is a <code>select</code> element, or <var>oldParent</var> is an
-   <code>optgroup</code> element whose parent is a <code>select</code> element, then run that
-   <code>select</code> element's <span>selectedness setting algorithm</span>.</p></li>
-  </ol>
-
-  <p>The <code>option</code> <span>HTML element moving steps</span>, given <var>movedNode</var> and
-  <var>oldParent</var>, are:</p>
-
-  <ol>
-   <li><p>Run the <code>option</code> <span>HTML element removing steps</span> given
-   <var>movedNode</var> and <var>oldParent</var>.</p></li>
-
-   <li><p>Run the <code>option</code> <span>HTML element insertion steps</span> given
-   <var>movedNode</var>.</p></li>
-  </ol>
-
-  <p>The <code>optgroup</code> <span data-x="html element removing steps">HTML element removing
-  steps</span>, given <var>removedNode</var> and <var>oldParent</var>, are:</p>
-
-  <ol>
-   <li><p>If <var>oldParent</var> is a <code>select</code> element and <var>removedNode</var> has an
-   <code>option</code> child, then run <var>oldParent</var>'s <span>selectedness setting
-   algorithm</span>.</p></li>
-  </ol>
-
-  <p>The <code>optgroup</code> <span>HTML element moving steps</span>, given <var>movedNode</var>
-  and <var>oldParent</var>, are:</p>
-
-  <ol>
-   <li><p>Run the <code>optgroup</code> <span>HTML element removing steps</span> given
-   <var>movedNode</var> and <var>oldParent</var>.</p></li>
-  </ol>
-
-  <p>If an <code>option</code> element in the <span data-x="concept-select-option-list">list of
-  options</span> <dfn data-x="ask for a reset">asks for a reset</dfn>, then run that
-  <code>select</code> element's <span>selectedness setting algorithm</span>.</p>
-
   <p>If the <code>select</code> is being rendered as a <span>drop-down box</span> with <span>base
   appearance</span>, then the user agent should allow the user to <dfn
   data-x="select-open-picker">open the picker</dfn> given a corresponding <code>select</code>
@@ -54469,66 +54377,162 @@ interface <dfn interface>HTMLSelectElement</dfn> : <span>HTMLElement</span> {
   data-x="concept-option-dirtiness">dirtiness</span> of the element must be set to true, and the
   user agent must <span>send <code>select</code> update notifications</span>.</p>
 
-  <p>When the user agent is to <dfn>send <code>select</code> update notifications</dfn>, <span>queue
-  an element task</span> on the <span>user interaction task source</span> given the <code>select</code>
-  element to run these steps:</p>
+  <hr>
+
+  <p>The <dfn data-x="concept-select-size">display size</dfn> of a <code>select</code> element is the
+  result of applying the <span>rules for parsing non-negative integers</span> to the value of
+  element's <code data-x="attr-select-size">size</code> attribute, if it has one and parsing it is
+  successful. If applying those rules to the attribute's value is not successful, or if the <code
+  data-x="attr-select-size">size</code> attribute is absent, then the element's <span
+  data-x="concept-select-size">display size</span> is 4 if the element's <code
+  data-x="attr-select-multiple">multiple</code> content attribute is present, and 1 otherwise.</p>
+
+  <p>To get the <dfn data-x="concept-select-option-list">list of options</dfn> given a
+  <code>select</code> element <var>select</var>:</p>
+
+  <ol>
+   <li><p>Let <var>options</var> be « ».</p></li>
+
+   <li><p>Let <var>node</var> be the <span>first child</span> of <var>select</var> in <span>tree
+   order</span>.</p></li>
+
+   <li>
+    <p><span>While</span> <var>node</var> is not null:</p>
+
+    <ol>
+     <li><p>If <var>node</var> is an <code>option</code> element, then <span data-x="list
+     append">append</span> <var>node</var> to <var>options</var>.</p></li>
+
+     <li>
+      <p>If any of the following conditions are true:</p>
+
+      <ul>
+       <li><p><var>node</var> is a <code>select</code> element;</p></li>
+
+       <li><p><var>node</var> is an <code>hr</code> element;</p></li>
+
+       <li><p><var>node</var> is an <code>option</code> element;</p></li>
+
+       <li><p><var>node</var> is an <code>optgroup</code> element and <var>node</var> has an
+       <span>ancestor</span> <code>optgroup</code> in between itself and <var>select</var>,</p></li>
+      </ul>
+
+      <p>then set <var>node</var> to the next <span>descendant</span> of <var>select</var> in
+      <span>tree order</span>, excluding <var>node</var>'s <span
+      data-x="descendant">descendants</span>, if any such node exists; otherwise null.</p>
+
+      <p>Otherwise, set <var>node</var> to the next <span>descendant</span> of <var>select</var> in
+      <span>tree order</span>, if any such node exists; otherwise null.</p>
+     </li>
+    </ol>
+   </li>
+
+   <li><p>Return <var>options</var>.</p></li>
+  </ol>
+
+  <p>If an <code>option</code> element in the <span data-x="concept-select-option-list">list of
+  options</span> <dfn data-x="ask for a reset">asks for a reset</dfn>, then run that
+  <code>select</code> element's <span>selectedness setting algorithm</span>.</p>
+
+  <p>The <dfn>selectedness setting algorithm</dfn>, given a <code>select</code> element
+  <var>element</var>, is to run the following steps:</p>
+
+  <ol>
+   <li><p>If <var>element</var>'s <code data-x="attr-select-multiple">multiple</code> attribute is
+   absent, and <var>element</var>'s <span data-x="concept-select-size">display size</span> is 1,
+   and no <code>option</code> elements in the <var>element</var>'s <span
+   data-x="concept-select-option-list">list of options</span> have their <span
+   data-x="concept-option-selectedness">selectedness</span> set to true, then set the <span
+   data-x="concept-option-selectedness">selectedness</span> of the first <code>option</code>
+   element in the <span data-x="concept-select-option-list">list of options</span> in
+   <span>tree order</span> that is not <span data-x="concept-option-disabled">disabled</span>,
+   if any, to true, and return.</p></li>
+
+   <li><p>If <var>element</var>'s <code data-x="attr-select-multiple">multiple</code> attribute is
+   absent, and two or more <code>option</code> elements in <var>element</var>'s <span
+   data-x="concept-select-option-list">list of options</span> have their <span
+   data-x="concept-option-selectedness">selectedness</span> set to true, then set the <span
+   data-x="concept-option-selectedness">selectedness</span> of all but the last <code>option</code>
+   element with its <span data-x="concept-option-selectedness">selectedness</span> set to true in
+   the <span data-x="concept-select-option-list">list of options</span> in <span>tree order</span>
+   to false.</p></li>
+  </ol>
+
+  <p>To <dfn>send <code>select</code> update notifications</dfn> for a <code>select</code> element
+  <var>element</var>, <span>queue an element task</span> on the <span>user interaction task
+  source</span> given <var>element</var> to run these steps:</p>
 
   <ol>
-   <li>Set the <code>select</code> element's <span>user validity</span> to true.</li>
+   <li>Set <var>element</var>'s <span>user validity</span> to true.</li>
 
-   <li><p>Run <span>update a <code>select</code>'s <code>selectedcontent</code></span> given the
-   <code>select</code> element.</p></li>
+   <li><p>Run <span>update a <code>select</code>'s <code>selectedcontent</code></span> given
+   <var>element</var>.</p></li>
 
    <li><p>Run <span>clone selected <code>option</code> into <code>select</code> button</span> given
-   the <code>select</code> element.</p></li>
+   <var>element</var>.</p></li>
 
    <li><p><span data-x="concept-event-fire">Fire an event</span> named <code
-   data-x="event-input">input</code> at the <code>select</code> element, with the <code
+   data-x="event-input">input</code> at <var>element</var>, with the <code
    data-x="dom-Event-bubbles">bubbles</code> and <code data-x="dom-Event-composed">composed</code>
    attributes initialized to true.</p></li>
 
    <li><p><span data-x="concept-event-fire">Fire an event</span> named <code
-   data-x="event-change">change</code> at the <code>select</code> element, with the <code
+   data-x="event-change">change</code> at <var>element</var>, with the <code
    data-x="dom-Event-bubbles">bubbles</code> attribute initialized to true.</p></li>
   </ol>
 
-  <p>The <span data-x="concept-form-reset-control">reset algorithm</span> for a <code>select</code>
-  element <var>selectElement</var> is:</p>
+  <hr>
+
+  <p>The <code>option</code> <span data-x="html element insertion steps">HTML element insertion
+  steps</span>, given <var>insertedNode</var>, are:</p>
 
   <ol>
-   <li><p>Set <var>selectElement</var>'s <span>user validity</span> to false.</p></li>
+   <li><p>If <var>insertedNode</var>'s parent is a <code>select</code> element, or
+   <var>insertedNode</var>'s parent is an <code>optgroup</code> element whose parent is a
+   <code>select</code> element, then run that <code>select</code> element's <span>selectedness
+   setting algorithm</span>.</p></li>
+  </ol>
 
-   <li>
-    <p><span data-x="list iterate">For each</span> <var>optionElement</var> of
-    <var>selectElement</var>'s <span data-x="concept-select-option-list">list of
-    options</span>:</p>
+  <p>The <code>option</code> <span data-x="html element removing steps">HTML element removing
+  steps</span>, given <var>removedNode</var> and <var>oldParent</var>, are:</p>
 
-    <ol>
-     <li><p>If <var>optionElement</var> has a <code data-x="attr-option-selected">selected</code>
-     attribute, then set <var>optionElement</var>'s <span
-     data-x="concept-option-selectedness">selectedness</span> to true; otherwise set it to
-     false.</p></li>
+  <ol>
+   <li><p>If <var>oldParent</var> is a <code>select</code> element, or <var>oldParent</var> is an
+   <code>optgroup</code> element whose parent is a <code>select</code> element, then run that
+   <code>select</code> element's <span>selectedness setting algorithm</span>.</p></li>
+  </ol>
 
-     <li><p>Set <var>optionElement</var>'s <span data-x="concept-option-dirtiness">dirtiness</span>
-     to false.</p></li>
-    </ol>
-   </li>
+  <p>The <code>option</code> <span>HTML element moving steps</span>, given <var>movedNode</var> and
+  <var>oldParent</var>, are:</p>
 
-   <li><p>Run the <span>selectedness setting algorithm</span> given
-   <var>selectElement</var>.</p></li>
+  <ol>
+   <li><p>Run the <code>option</code> <span>HTML element removing steps</span> given
+   <var>movedNode</var> and <var>oldParent</var>.</p></li>
+
+   <li><p>Run the <code>option</code> <span>HTML element insertion steps</span> given
+   <var>movedNode</var>.</p></li>
   </ol>
 
-  </div>
+  <p>The <code>optgroup</code> <span data-x="html element removing steps">HTML element removing
+  steps</span>, given <var>removedNode</var> and <var>oldParent</var>, are:</p>
 
-  <p>
-  The <code data-x="attr-fae-form">form</code> attribute is used to explicitly associate the <code>select</code> element with its <span>form owner</span>.
-  The <code data-x="attr-fe-name">name</code> attribute represents the element's name.
-  The <code data-x="attr-fe-disabled">disabled</code> attribute is used to make the control non-interactive and to prevent its value from being submitted.
-  The <code data-x="attr-fe-autocomplete">autocomplete</code> attribute controls how the user agent provides autofill behavior.
-  </p>
+  <ol>
+   <li><p>If <var>oldParent</var> is a <code>select</code> element and <var>removedNode</var> has an
+   <code>option</code> child, then run <var>oldParent</var>'s <span>selectedness setting
+   algorithm</span>.</p></li>
+  </ol>
 
-  <p>A <code>select</code> element that is not <span data-x="concept-fe-disabled">disabled</span> is
-  <i data-x="concept-fe-mutable">mutable</i>.</p>
+  <p>The <code>optgroup</code> <span>HTML element moving steps</span>, given <var>movedNode</var>
+  and <var>oldParent</var>, are:</p>
+
+  <ol>
+   <li><p>Run the <code>optgroup</code> <span>HTML element removing steps</span> given
+   <var>movedNode</var> and <var>oldParent</var>.</p></li>
+  </ol>
+
+  </div>
+
+  <hr>
 
   <dl class="domintro">
    <dt><code data-x=""><var>select</var>.<span subdfn data-x="dom-select-type">type</span></code></dt>
@@ -54801,6 +54805,8 @@ interface <dfn interface>HTMLSelectElement</dfn> : <span>HTMLElement</span> {
 
   </div>
 
+  <hr>
+
   <div class="example">
 
    <p>The following example shows how a <code>select</code> element can be used to offer the user

From a3592b610ecbe9dce264fc14a14a45bda858efef Mon Sep 17 00:00:00 2001
From: Domenic Denicola <d@domenic.me>
Date: Fri, 18 Jul 2025 13:06:03 +0900
Subject: [PATCH 6/8] Have only one "pick" algorithm

---
 source | 23 +++++++++++------------
 1 file changed, 11 insertions(+), 12 deletions(-)

diff --git a/source b/source
index 702be826135..1ab38085de3 100644
--- a/source
+++ b/source
@@ -54265,20 +54265,19 @@ interface <dfn interface>HTMLSelectElement</dfn> : <span>HTMLElement</span> {
 
   <hr>
 
-
-  <p>The user agent should allow the user to <dfn data-x="concept-select-pick">pick</dfn> an
-  <code>option</code> element from a <code>select</code> element in its <span
-  data-x="concept-select-option-list">list of options</span> (either through a click, or through
-  unfocusing the element after changing its value, or through a <span data-x="option-command">menu
-  command</span>, or through any other mechanism) by running the <span>pick an option</span>
-  algorithm given the <code>select</code> element, the <code>option</code> element, and if
-  <code>select</code> and its <span>select popover </span> are both being rendered with <span>base
-  appearance</span>, a corresponding <code data-x="event-keydown">keydown</code> or <code
+  <p>The user agent should allow the user to pick an <code>option</code> element from a
+  <code>select</code> element in its <span data-x="concept-select-option-list">list of
+  options</span> (either through a click, or through unfocusing the element after changing its
+  value, or through a <span data-x="option-command">menu command</span>, or through any other
+  mechanism) by running the <span data-x="concept-select-pick">pick an option</span> algorithm given
+  the <code>select</code> element, the <code>option</code> element, and if <code>select</code> and
+  its <span>select popover </span> are both being rendered with <span>base appearance</span>, a
+  corresponding <code data-x="event-keydown">keydown</code> or <code
   data-x="event-mouseup">mouseup</code> event, otherwise null.</p>
 
-  <p>To <dfn>pick an option</dfn> given a <code>select</code> element <var>select</var>, an
-  <code>option</code> element <var>option</var>, and an <code>Event</code> or null
-  <var>event</var>:</p>
+  <p>To <dfn data-x="concept-select-pick">pick an option</dfn> given a <code>select</code> element
+  <var>select</var>, an <code>option</code> element <var>option</var>, and an <code>Event</code> or
+  null <var>event</var>:</p>
 
   <ol>
    <li><p>If <var>select</var> has the <code data-x="attr-select-multiple">multiple</code> attribute

From f0c51229bcfab592691a22e9f57756c41f16002e Mon Sep 17 00:00:00 2001
From: Joey Arhar <jarhar@chromium.org>
Date: Fri, 18 Jul 2025 12:20:03 -0700
Subject: [PATCH 7/8] remove duplicate option insertion/removal steps

---
 source | 41 +++++++++++------------------------------
 1 file changed, 11 insertions(+), 30 deletions(-)

diff --git a/source b/source
index 1ab38085de3..055d177716f 100644
--- a/source
+++ b/source
@@ -54482,36 +54482,6 @@ interface <dfn interface>HTMLSelectElement</dfn> : <span>HTMLElement</span> {
 
   <hr>
 
-  <p>The <code>option</code> <span data-x="html element insertion steps">HTML element insertion
-  steps</span>, given <var>insertedNode</var>, are:</p>
-
-  <ol>
-   <li><p>If <var>insertedNode</var>'s parent is a <code>select</code> element, or
-   <var>insertedNode</var>'s parent is an <code>optgroup</code> element whose parent is a
-   <code>select</code> element, then run that <code>select</code> element's <span>selectedness
-   setting algorithm</span>.</p></li>
-  </ol>
-
-  <p>The <code>option</code> <span data-x="html element removing steps">HTML element removing
-  steps</span>, given <var>removedNode</var> and <var>oldParent</var>, are:</p>
-
-  <ol>
-   <li><p>If <var>oldParent</var> is a <code>select</code> element, or <var>oldParent</var> is an
-   <code>optgroup</code> element whose parent is a <code>select</code> element, then run that
-   <code>select</code> element's <span>selectedness setting algorithm</span>.</p></li>
-  </ol>
-
-  <p>The <code>option</code> <span>HTML element moving steps</span>, given <var>movedNode</var> and
-  <var>oldParent</var>, are:</p>
-
-  <ol>
-   <li><p>Run the <code>option</code> <span>HTML element removing steps</span> given
-   <var>movedNode</var> and <var>oldParent</var>.</p></li>
-
-   <li><p>Run the <code>option</code> <span>HTML element insertion steps</span> given
-   <var>movedNode</var>.</p></li>
-  </ol>
-
   <p>The <code>optgroup</code> <span data-x="html element removing steps">HTML element removing
   steps</span>, given <var>removedNode</var> and <var>oldParent</var>, are:</p>
 
@@ -55282,6 +55252,17 @@ interface <dfn interface>HTMLOptionElement</dfn> : <span>HTMLElement</span> {
     </ol>
   </ol>
 
+  <p>The <code>option</code> <span>HTML element moving steps</span>, given <var>movedNode</var> and
+  <var>oldParent</var>, are:</p>
+
+  <ol>
+   <li><p>Run the <code>option</code> <span>HTML element removing steps</span> given
+   <var>movedNode</var> and <var>oldParent</var>.</p></li>
+
+   <li><p>Run the <code>option</code> <span>HTML element insertion steps</span> given
+   <var>movedNode</var>.</p></li>
+  </ol>
+
   <p>To get the <dfn><code>option</code> element nearest ancestor <code>select</code></dfn> given an
   <code>option</code> <var>option</var>, run these steps. They return a <code>select</code> or
   null.</p>

From 78856836271646e86f08a637792d4a1b37f177a9 Mon Sep 17 00:00:00 2001
From: Joey Arhar <jarhar@chromium.org>
Date: Mon, 21 Jul 2025 08:47:44 -0700
Subject: [PATCH 8/8] move optgroup insertion steps to optgroup section

---
 source | 36 +++++++++++++++++-------------------
 1 file changed, 17 insertions(+), 19 deletions(-)

diff --git a/source b/source
index 055d177716f..3f0c0c889a8 100644
--- a/source
+++ b/source
@@ -54480,25 +54480,6 @@ interface <dfn interface>HTMLSelectElement</dfn> : <span>HTMLElement</span> {
    data-x="dom-Event-bubbles">bubbles</code> attribute initialized to true.</p></li>
   </ol>
 
-  <hr>
-
-  <p>The <code>optgroup</code> <span data-x="html element removing steps">HTML element removing
-  steps</span>, given <var>removedNode</var> and <var>oldParent</var>, are:</p>
-
-  <ol>
-   <li><p>If <var>oldParent</var> is a <code>select</code> element and <var>removedNode</var> has an
-   <code>option</code> child, then run <var>oldParent</var>'s <span>selectedness setting
-   algorithm</span>.</p></li>
-  </ol>
-
-  <p>The <code>optgroup</code> <span>HTML element moving steps</span>, given <var>movedNode</var>
-  and <var>oldParent</var>, are:</p>
-
-  <ol>
-   <li><p>Run the <code>optgroup</code> <span>HTML element removing steps</span> given
-   <var>movedNode</var> and <var>oldParent</var>.</p></li>
-  </ol>
-
   </div>
 
   <hr>
@@ -55034,6 +55015,23 @@ interface <dfn interface>HTMLOptGroupElement</dfn> : <span>HTMLElement</span> {
 
   </div>
 
+  <p>The <code>optgroup</code> <span data-x="html element removing steps">HTML element removing
+  steps</span>, given <var>removedNode</var> and <var>oldParent</var>, are:</p>
+
+  <ol>
+   <li><p>If <var>oldParent</var> is a <code>select</code> element and <var>removedNode</var> has an
+   <code>option</code> child, then run <var>oldParent</var>'s <span>selectedness setting
+   algorithm</span>.</p></li>
+  </ol>
+
+  <p>The <code>optgroup</code> <span>HTML element moving steps</span>, given <var>movedNode</var>
+  and <var>oldParent</var>, are:</p>
+
+  <ol>
+   <li><p>Run the <code>optgroup</code> <span>HTML element removing steps</span> given
+   <var>movedNode</var> and <var>oldParent</var>.</p></li>
+  </ol>
+
   <p>To <dfn data-x="concept-optgroup-label">get an <code>optgroup</code> element's label</dfn>,
   given an <code>optgroup</code> <var>optgroup</var>:</p>