From 8e171386857e6998920e19952259c6d9c7a720b5 Mon Sep 17 00:00:00 2001
From: Joey Arhar <jarhar@chromium.org>
Date: Wed, 17 Jul 2024 18:16:05 -0700
Subject: [PATCH 01/15] Define base appearance for <select>

---
 source | 192 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 191 insertions(+), 1 deletion(-)

diff --git a/source b/source
index de407dd6dc0..22bb7f8063e 100644
--- a/source
+++ b/source
@@ -1794,6 +1794,9 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
    <span>stack of open elements</span> of an <span>HTML parser</span>, then
    <span>process internal resource links</span> given <var>insertedNode</var>'s
    <span>node document</span>.</p></li>
+
+   <li><p>Run <span>maybe clone option into select button</span> given
+   <var>insertedNode</var>.</p></li>
   </ol>
 
   <p>The <span data-x="concept-node-remove-ext">removing steps</span> for the HTML Standard, given
@@ -1838,6 +1841,9 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
    <li><p>If <var>removedNode</var>'s <code data-x="attr-popover">popover</code> attribute is not in
    the <span data-x="attr-popover-none-state">no popover state</span>, then run the <span>hide
    popover algorithm</span> given <var>removedNode</var>, false, false, and false.</p></li>
+
+   <li><p>Run <span>maybe clone option into select button</span> given
+   <var>oldParent</var>.</p></li>
   </ol>
 
   <p>A <dfn id="insert-an-element-into-a-document" data-x="node is inserted into a document"
@@ -3208,6 +3214,7 @@ 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>,
@@ -3953,6 +3960,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
@@ -4153,6 +4161,12 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
      <li><dfn data-x-href="https://drafts.csswg.org/css-contain/#content-visibility">'content-visibility'</dfn> property</li>
      <li><dfn data-x-href="https://drafts.csswg.org/css-contain/#propdef-content-visibility" data-x="content-visibility-auto">'auto'</dfn> value for <span>'content-visibility'</span></li>
     </ul>
+
+    <p>The following terms are defined in <cite>CSS Anchor Positioning</cite>: <ref>CSSANCHOR</ref></p>
+
+    <ul class="brief">
+     <li><dfn data-x-href="https://drafts.csswg.org/css-anchor-position-1/#implicit-anchor-element">implicit anchor element</dfn></li>
+    </ul>
    </dd>
 
 
@@ -53096,6 +53110,10 @@ interface <dfn interface>HTMLButtonElement</dfn> : <span>HTMLElement</span> {
    <li><p>If <var>element</var>'s <span>node document</span> is not <span>fully active</span>, then
    return.</p></li>
 
+   <li><p>If <var>element</var>'s <span>parent</span> is a <code>select</code> element, then
+   <span>show the picker, if applicable</span> given <var>element</var>'s <span>parent</span> and
+   return.</p></li>
+
    <li>
     <p>If <var>element</var> has a <span>form owner</span> then switch on <var>element</var>'s <code
     data-x="attr-button-type">type</code> attribute's state, then:</p>
@@ -54156,6 +54174,89 @@ interface <dfn interface>HTMLOptionElement</dfn> : <span>HTMLElement</span> {
 
   </div>
 
+  <p>To get the <dfn>option element ancestor select</dfn> given an <code>option</code>
+  <var>option</var>:</p>
+
+  <ol>
+   <li>
+    <p>For each <var>ancestor</var> of <var>option</var>'s <span
+    data-x="ancestor">ancestors</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 option into select button</dfn>, given an <code>Element</code>
+  <var>element</var>:</p>
+
+  <ol>
+   <li>
+    <p>For each <var>ancestor</var> of <var>element</var>'s <span
+    data-x="ancestor">ancestors</span>:</p>
+
+    <ol>
+     <li>
+      <p>If all of the following conditions are true:</p>
+
+      <ul>
+       <li><p><var>ancestor</var> is an <code>option</code> element;</p></li>
+
+       <li><p><var>ancestor</var> has a non-null <span>option element ancestor
+       select</span>;</p></li>
+
+       <li><p><var>ancestor</var>'s <span>option element ancestor select</span> is rendered as a
+       <span>drop-down box</span>;</p></li>
+
+       <li><p><var>ancestor</var>'s <span data-x="concept-option-selectedness">selectedness</span>
+       is true,</p></li>
+      </ul>
+
+      <p>then set <var>ancestor</var>'s <span>option element ancestor select</span>'s <span>select
+      fallback button text</span> to the value of <var>ancestor</var>'s <span
+      data-x="dom-option-label">label</span>.</p>
+     </li>
+    </ol>
+   </li>
+  </ol>
+
+  <p>Whenever an <code>option</code> <var>option</var>'s <span
+  data-x="concept-option-selectedness">selectedness</span> is set to true, run <span>maybe clone
+  option into select button</span> given <var>option</var>.</p>
+
+  <p>The <span>activation behavior</span> of an <code>option</code> <var>option</var> is to run the
+  following steps:</p>
+
+  <ol>
+   <li><p>Let <var>select</var> be the <span>option element ancestor select</span> given
+   <var>option</var>.</p></li>
+
+   <li><p>If <var>select</var> is null, 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>:</p>
+
+    <ol>
+     <li><p>Run the <span>hide popover algorithm</span> given the first item in <var>select</var>'s
+     <span>select popover slot</span>'s <span>assigned nodes</span>.</p></li>
+    </ol>
+   </li>
+  </ol>
+
   <dl class="domintro">
    <dt><code data-x=""><var>option</var>.<span subdfn data-x="dom-option-selected">selected</span></code></dt>
 
@@ -135678,12 +135779,98 @@ 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>
 
+  <!-- TODO should parts of this be in form-elements instead of rendering? -->
+
+  <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>When a <code>select</code> is being rendered as a <span>drop-down box</span> with a <span>base
+  appearance</span>, it is expected to render as if it has the following <span>shadow
+  root</span>:</p>
+
+  <pre><code class="html" data-x="">&lt;slot id="select-button-slot">
+  &lt;div id="select-fallback-button-text">&lt;/div>
+&lt;/slot>
+&lt;div id="select-popover" popover="auto">
+  &lt;slot id="select-popover-slot">&lt;/slot>
+&lt;/div></code></pre>
+
+  <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><code>select</code> elements rendered as a <span>drop-down box</span> with <span>base
+  appearance</span> each contain the following elements as shown with ID attributes in the above
+  HTML:</p>
+
+  <!-- TODO is it OK for me to use <ul>, <li>, and <p> like this even though it isn't an
+  algorithm? -->
+  <ul>
+   <li><p>A <dfn>select button slot</dfn>, which is a <code>slot</code>.</p></li>
+
+   <li><p><dfn>Select fallback button text</dfn>, which is a <code>div</code>.</p></li>
+
+   <li><p>A <dfn>select popover</dfn>, which is a <code>div</code>.</p></li>
+
+   <li><p>A <dfn>select popover slot</dfn>, which is a <code>slot</code>.</p></li>
+  </ul>
+
+  <p>The <span>implicit anchor element</span> of the <span>select popover</span> element is the
+  <code>select</code> element shadow host of the shadow host in which <span>select popover</span>
+  resides.</p>
+
+  <p>The <span>shadow root</span> used for <code>select</code>'s <span>drop-down box</span>
+  <span>base appearance</span> must have its <span>slot assignment</span> set to "<code
+  data-x="">manual</code>". The <span>shadow root</span> must also have <span>delegates focus</span>
+  set to true if <span>select button slot</span> has an assigned node.</p>
+
+  <p class="note">Without <span>delegates focus</span> set to true, the <code>select</code> itself
+  would receive focus instead of the <code>button</code> which is slotted into the <span>select
+  button slot</span>.</p>
+
+  <p><code>select</code> elements rendered as a <span>drop-down box</span> with <span>base
+  appearance</span> must render as if they are using <span>manual slot assignment</span> with the
+  following <dfn>base select slotting algorithm</dfn> to <span data-x="assign a slot">assign</span>
+  their child nodes to slots. To perform the <span>base select slotting algorithm</span>, given a
+  <code>select</code> element <var>select</var>:</p>
+
+  <ol>
+   <li><p>Let <var>firstButton</var> be null.</p></li>
+
+   <li><p>Let <var>otherChildren</var> be « ».</p></li>
+
+   <li>
+    <p><span data-x="list iterate">For each</span> <code>Node</code> <var>child</var> in
+    <var>select</var>'s <span data-x="concept-tree-child">children</span>:</p>
+
+    <ol>
+     <li><p>If <var>child</var> is a <code>button</code> and <var>firstButton</var> is null, then set
+     <var>firstButton</var> to <var>child</var>.</p></li>
+
+     <li><p>Otherwise, <span data-x="list append">append</span> <var>child</var> to
+     <var>otherChildren</var>.</p></li>
+    </ol>
+   </li>
+
+   <li><p>Set <var>select</var>'s <span>select button slot</span>'s <span>manually assigned
+   nodes</span> to <var>firstButton</var>.</p></li>
+
+   <li><p>Set <var>select</var>'s <span>select popover slot</span>'s <span>manually assigned
+   nodes</span> to <var>otherChildren</var>.</p></li>
+  </ol>
+
   <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>
+  has one. If the <code>option</code> is being rendered in a <code>select</code> which is being
+  rendered as a <span>drop-down box</span> with <span>base appearance</span>, 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>
@@ -143126,6 +143313,9 @@ INSERT INTERFACES HERE
    <dt id="refsCSSALIGN">[CSSALIGN]</dt>
    <dd><cite><a href="https://w3c.github.io/csswg-drafts/css-align/">CSS Box Alignment</a></cite>, E. Etemad, T. Atkins. W3C.</dd>
 
+   <dt id="refsCSSANCHOR">[CSSANCHOR]</dt>
+   <dd><cite><a href="https://drafts.csswg.org/css-anchor-position-1/">CSS Anchor Positioning</a></cite>, T. Atkins, E. Etemad, I. Kilpatrick. W3C.</dd>
+
    <dt id="refsCSSANIMATIONS">[CSSANIMATIONS]</dt>
    <dd><cite><a href="https://w3c.github.io/csswg-drafts/css-animations/">CSS Animations</a></cite>, D. Jackson, D. Hyatt, C. Marrin, S. Galineau, L. Baron. W3C.</dd>
 

From f8cd659023141b3884f82621a025047a44e2305a Mon Sep 17 00:00:00 2001
From: Joey Arhar <jarhar@chromium.org>
Date: Mon, 11 Nov 2024 09:54:00 -0800
Subject: [PATCH 02/15] rewrote a lot

---
 source | 166 +++++++++++++++------------------------------------------
 1 file changed, 44 insertions(+), 122 deletions(-)

diff --git a/source b/source
index 22bb7f8063e..0037ff59bb3 100644
--- a/source
+++ b/source
@@ -1794,9 +1794,6 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
    <span>stack of open elements</span> of an <span>HTML parser</span>, then
    <span>process internal resource links</span> given <var>insertedNode</var>'s
    <span>node document</span>.</p></li>
-
-   <li><p>Run <span>maybe clone option into select button</span> given
-   <var>insertedNode</var>.</p></li>
   </ol>
 
   <p>The <span data-x="concept-node-remove-ext">removing steps</span> for the HTML Standard, given
@@ -1841,9 +1838,6 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
    <li><p>If <var>removedNode</var>'s <code data-x="attr-popover">popover</code> attribute is not in
    the <span data-x="attr-popover-none-state">no popover state</span>, then run the <span>hide
    popover algorithm</span> given <var>removedNode</var>, false, false, and false.</p></li>
-
-   <li><p>Run <span>maybe clone option into select button</span> given
-   <var>oldParent</var>.</p></li>
   </ol>
 
   <p>A <dfn id="insert-an-element-into-a-document" data-x="node is inserted into a document"
@@ -53110,10 +53104,6 @@ interface <dfn interface>HTMLButtonElement</dfn> : <span>HTMLElement</span> {
    <li><p>If <var>element</var>'s <span>node document</span> is not <span>fully active</span>, then
    return.</p></li>
 
-   <li><p>If <var>element</var>'s <span>parent</span> is a <code>select</code> element, then
-   <span>show the picker, if applicable</span> given <var>element</var>'s <span>parent</span> and
-   return.</p></li>
-
    <li>
     <p>If <var>element</var> has a <span>form owner</span> then switch on <var>element</var>'s <code
     data-x="attr-button-type">type</code> attribute's state, then:</p>
@@ -53473,6 +53463,9 @@ 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>clone selected option into select 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>
@@ -54191,43 +54184,24 @@ interface <dfn interface>HTMLOptionElement</dfn> : <span>HTMLElement</span> {
    <li><p>Return null.</p></li>
   </ol>
 
-  <p>To <dfn>maybe clone option into select button</dfn>, given an <code>Element</code>
-  <var>element</var>:</p>
+  <p>To <dfn>clone selected option into select button</dfn>, given a <code>select</code> element
+  <var>select</var>:</p>
 
   <ol>
-   <li>
-    <p>For each <var>ancestor</var> of <var>element</var>'s <span
-    data-x="ancestor">ancestors</span>:</p>
-
-    <ol>
-     <li>
-      <p>If all of the following conditions are true:</p>
-
-      <ul>
-       <li><p><var>ancestor</var> is an <code>option</code> element;</p></li>
-
-       <li><p><var>ancestor</var> has a non-null <span>option element ancestor
-       select</span>;</p></li>
+   <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><var>ancestor</var>'s <span>option element ancestor select</span> is rendered as a
-       <span>drop-down box</span>;</p></li>
+   <li><p>Let <var>text</var> be an empty string.</p></li>
 
-       <li><p><var>ancestor</var>'s <span data-x="concept-option-selectedness">selectedness</span>
-       is true,</p></li>
-      </ul>
+   <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>
 
-      <p>then set <var>ancestor</var>'s <span>option element ancestor select</span>'s <span>select
-      fallback button text</span> to the value of <var>ancestor</var>'s <span
-      data-x="dom-option-label">label</span>.</p>
-     </li>
-    </ol>
-   </li>
+   <li><p>Set <var>select</var>'s <span>select fallback button text</span> to
+   <var>text</var>.</p></li>
   </ol>
 
-  <p>Whenever an <code>option</code> <var>option</var>'s <span
-  data-x="concept-option-selectedness">selectedness</span> is set to true, run <span>maybe clone
-  option into select button</span> given <var>option</var>.</p>
-
   <p>The <span>activation behavior</span> of an <code>option</code> <var>option</var> is to run the
   following steps:</p>
 
@@ -54246,15 +54220,9 @@ interface <dfn interface>HTMLOptionElement</dfn> : <span>HTMLElement</span> {
    <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>:</p>
-
-    <ol>
-     <li><p>Run the <span>hide popover algorithm</span> given the first item in <var>select</var>'s
-     <span>select popover slot</span>'s <span>assigned nodes</span>.</p></li>
-    </ol>
-   </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>
 
   <dl class="domintro">
@@ -135779,97 +135747,51 @@ 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>
 
-  <!-- TODO should parts of this be in form-elements instead of rendering? -->
-
   <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>When a <code>select</code> is being rendered as a <span>drop-down box</span> with a <span>base
-  appearance</span>, it is expected to render as if it has the following <span>shadow
-  root</span>:</p>
-
-  <pre><code class="html" data-x="">&lt;slot id="select-button-slot">
-  &lt;div id="select-fallback-button-text">&lt;/div>
-&lt;/slot>
-&lt;div id="select-popover" popover="auto">
-  &lt;slot id="select-popover-slot">&lt;/slot>
-&lt;/div></code></pre>
-
-  <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><code>select</code> elements rendered as a <span>drop-down box</span> with <span>base
-  appearance</span> each contain the following elements as shown with ID attributes in the above
-  HTML:</p>
-
-  <!-- TODO is it OK for me to use <ul>, <li>, and <p> like this even though it isn't an
-  algorithm? -->
-  <ul>
-   <li><p>A <dfn>select button slot</dfn>, which is a <code>slot</code>.</p></li>
-
-   <li><p><dfn>Select fallback button text</dfn>, which is a <code>div</code>.</p></li>
-
-   <li><p>A <dfn>select popover</dfn>, which is a <code>div</code>.</p></li>
-
-   <li><p>A <dfn>select popover slot</dfn>, which is a <code>slot</code>.</p></li>
-  </ul>
-
-  <p>The <span>implicit anchor element</span> of the <span>select popover</span> element is the
-  <code>select</code> element shadow host of the shadow host in which <span>select popover</span>
-  resides.</p>
-
-  <p>The <span>shadow root</span> used for <code>select</code>'s <span>drop-down box</span>
-  <span>base appearance</span> must have its <span>slot assignment</span> set to "<code
-  data-x="">manual</code>". The <span>shadow root</span> must also have <span>delegates focus</span>
-  set to true if <span>select button slot</span> has an assigned node.</p>
-
-  <p class="note">Without <span>delegates focus</span> set to true, the <code>select</code> itself
-  would receive focus instead of the <code>button</code> which is slotted into the <span>select
-  button slot</span>.</p>
-
-  <p><code>select</code> elements rendered as a <span>drop-down box</span> with <span>base
-  appearance</span> must render as if they are using <span>manual slot assignment</span> with the
-  following <dfn>base select slotting algorithm</dfn> to <span data-x="assign a slot">assign</span>
-  their child nodes to slots. To perform the <span>base select slotting algorithm</span>, given a
-  <code>select</code> element <var>select</var>:</p>
+  appearance</span>, it is expected to render as if it has a <span>shadow tree</span> with the
+  following elements:</p>
 
   <ol>
-   <li><p>Let <var>firstButton</var> be null.</p></li>
-
-   <li><p>Let <var>otherChildren</var> be « ».</p></li>
+   <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><span data-x="list iterate">For each</span> <code>Node</code> <var>child</var> in
-    <var>select</var>'s <span data-x="concept-tree-child">children</span>:</p>
+   <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>
 
-    <ol>
-     <li><p>If <var>child</var> is a <code>button</code> and <var>firstButton</var> is null, then set
-     <var>firstButton</var> to <var>child</var>.</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>.</p></li>
 
-     <li><p>Otherwise, <span data-x="list append">append</span> <var>child</var> to
-     <var>otherChildren</var>.</p></li>
-    </ol>
-   </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>
 
-   <li><p>Set <var>select</var>'s <span>select button slot</span>'s <span>manually assigned
-   nodes</span> to <var>firstButton</var>.</p></li>
+  <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>
 
-   <li><p>Set <var>select</var>'s <span>select popover slot</span>'s <span>manually assigned
-   nodes</span> to <var>otherChildren</var>.</p></li>
-  </ol>
+  <p>The <span>select popover</span>'s <span>implicit anchor element</span> is its associated
+  <code>select</code> element.</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. If the <code>option</code> is being rendered in a <code>select</code> which is being
-  rendered as a <span>drop-down box</span> with <span>base appearance</span>, then the
-  <code>option</code> is expected to render all of its children rather than by displaying its <span
+  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>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

From 85b785f6ff028d0f16bc5c8899d442df1c732d80 Mon Sep 17 00:00:00 2001
From: Joey Arhar <jarhar@chromium.org>
Date: Wed, 13 Nov 2024 11:42:31 -0800
Subject: [PATCH 03/15] prevent select button from being default submit button

---
 source | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/source b/source
index 62fe5e7b14b..1fff801219e 100644
--- a/source
+++ b/source
@@ -59701,7 +59701,8 @@ fur
 
   <p>A <code>form</code> element's <dfn>default button</dfn> is the first <span
   data-x="concept-submit-button">submit button</span> in <span>tree order</span> whose <span>form
-  owner</span> is that <code>form</code> element.</p>
+  owner</span> is that <code>form</code> element and who is not slotted into a <code>select</code>
+  element's <span>select button slot</span>.</p>
 
   <p>If the user agent supports letting the user submit a form implicitly (for example, on some
   platforms hitting the "enter" key while a text control is <span>focused</span> implicitly submits

From 8dc3b0e27e65859c7911a1c0c456d4f4b17b6009 Mon Sep 17 00:00:00 2001
From: Joey Arhar <jarhar@chromium.org>
Date: Thu, 5 Dec 2024 11:44:06 -0800
Subject: [PATCH 04/15] reverse tree order

---
 source | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/source b/source
index f3136204eff..e682fdc0f5d 100644
--- a/source
+++ b/source
@@ -54565,7 +54565,7 @@ interface <dfn interface>HTMLOptionElement</dfn> : <span>HTMLElement</span> {
   <ol>
    <li>
     <p>For each <var>ancestor</var> of <var>option</var>'s <span
-    data-x="ancestor">ancestors</span>:</p>
+    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

From 46f457e53eb6065a36f219eddc923f39cc51dea7 Mon Sep 17 00:00:00 2001
From: Joey Arhar <jarhar@chromium.org>
Date: Thu, 5 Dec 2024 11:56:01 -0800
Subject: [PATCH 05/15] code around elements

---
 source | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/source b/source
index e682fdc0f5d..685f6c75619 100644
--- a/source
+++ b/source
@@ -53855,8 +53855,8 @@ 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>clone selected option into select button</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
@@ -54559,8 +54559,8 @@ interface <dfn interface>HTMLOptionElement</dfn> : <span>HTMLElement</span> {
 
   </div>
 
-  <p>To get the <dfn>option element ancestor select</dfn> given an <code>option</code>
-  <var>option</var>:</p>
+  <p>To get the <dfn><code>option</code> ancestor <code>select</code></dfn> given an
+  <code>option</code> <var>option</var>:</p>
 
   <ol>
    <li>
@@ -54576,8 +54576,8 @@ interface <dfn interface>HTMLOptionElement</dfn> : <span>HTMLElement</span> {
    <li><p>Return null.</p></li>
   </ol>
 
-  <p>To <dfn>clone selected option into select button</dfn>, given a <code>select</code> element
-  <var>select</var>:</p>
+  <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
@@ -54598,8 +54598,8 @@ interface <dfn interface>HTMLOptionElement</dfn> : <span>HTMLElement</span> {
   following steps:</p>
 
   <ol>
-   <li><p>Let <var>select</var> be the <span>option element ancestor select</span> given
-   <var>option</var>.</p></li>
+   <li><p>Let <var>select</var> be the <span><code>option</code> ancestor <code>select</code></span>
+   given <var>option</var>.</p></li>
 
    <li><p>If <var>select</var> is null, then return.</p></li>
 

From d9bc0b46bd1241deac882ee8ef51c58042f71797 Mon Sep 17 00:00:00 2001
From: Joey Arhar <jarhar@chromium.org>
Date: Thu, 5 Dec 2024 11:58:07 -0800
Subject: [PATCH 06/15] nits

---
 source | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/source b/source
index 685f6c75619..dbd8bf8d47c 100644
--- a/source
+++ b/source
@@ -54583,9 +54583,9 @@ interface <dfn interface>HTMLOptionElement</dfn> : <span>HTMLElement</span> {
    <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>
+   exists; otherwise null.</p></li>
 
-   <li><p>Let <var>text</var> be an empty string.</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>
@@ -54594,8 +54594,8 @@ interface <dfn interface>HTMLOptionElement</dfn> : <span>HTMLElement</span> {
    <var>text</var>.</p></li>
   </ol>
 
-  <p>The <span>activation behavior</span> of an <code>option</code> <var>option</var> is to run the
-  following steps:</p>
+  <p>The <span>activation behavior</span> of an <code>option</code> element <var>option</var> is to
+  run the following steps:</p>
 
   <ol>
    <li><p>Let <var>select</var> be the <span><code>option</code> ancestor <code>select</code></span>

From 72c006b164c74716aa7f5d270aa7250ae0ad087e Mon Sep 17 00:00:00 2001
From: Joey Arhar <jarhar@chromium.org>
Date: Thu, 5 Dec 2024 13:11:30 -0800
Subject: [PATCH 07/15] add open the picker paragraph

---
 source | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/source b/source
index dbd8bf8d47c..d4c2fd8567d 100644
--- a/source
+++ b/source
@@ -53833,6 +53833,14 @@ 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>. Opening the picker will either fire a
+  corresponding <code data-x="event-mousedown">mousedown</code> or <code
+  data-x="event-keydown">keydown</code> event on the <code>select</code> element. Calling
+  <code data-x="dom-Event-preventDefault">preventDefault()</code> on either of these events will
+  prevent the picker from opening. Otherwise, the picker is opened.</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

From 24008402af210c8453874a50ec3be7699413f99a Mon Sep 17 00:00:00 2001
From: Joey Arhar <jarhar@chromium.org>
Date: Thu, 5 Dec 2024 13:45:23 -0800
Subject: [PATCH 08/15] add arrow key events

---
 source | 47 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 47 insertions(+)

diff --git a/source b/source
index d4c2fd8567d..8ec978a62b4 100644
--- a/source
+++ b/source
@@ -53841,6 +53841,53 @@ interface <dfn interface>HTMLSelectElement</dfn> : <span>HTMLElement</span> {
   <code data-x="dom-Event-preventDefault">preventDefault()</code> on either of these events will
   prevent the picker from opening. Otherwise, the picker is opened.</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-focus-next-option">focus the next option</dfn> and <dfn
+  data-x="select-focus-previous-option">focus the previous option</dfn>. Performing either of these
+  actions will fire a corresponding <code data-x="event-keydown">keydown</code> event on the
+  currently focused <code>option</code> element. Calling <code
+  data-x="dom-Event-preventDefault">preventDefault()</code> on this event will prevent the
+  corresponding algorithm from running.</p>
+
+  <p>To <span data-x="select-focus-next-option">focus the next option</span> given a currently
+  focused <code>option</code> element <var>option</var> in a <code>select</code> element
+  <var>select</var>:</p>
+
+  <ol>
+   <li>
+    <p><span>While</span> <var>option</var> is not null:</p>
+
+    <ol>
+     <li><p>Set <var>option</var> to the next element in <var>select</var>'s <span
+     data-x="concept-select-option-list">list of options</span> if any such element exists;
+     otherwise null.</p></li>
+
+     <li><p>If <var>option</var> is not null and is <span>focusable</span>, then run the
+     <span>focusing steps</span> given <var>option</var> and return.</p></li>
+    </ol>
+   </li>
+  </ol>
+
+  <p>To <span data-x="select-focus-previous-option">focus the previous option</span> given a currently
+  focused <code>option</code> element <var>option</var> in a <code>select</code> element
+  <var>select</var>:</p>
+
+  <ol>
+   <li>
+    <p><span>While</span> <var>option</var> is not null:</p>
+
+    <ol>
+     <li><p>Set <var>option</var> to the previous element in <var>select</var>'s <span
+     data-x="concept-select-option-list">list of options</span> if any such element exists;
+     otherwise null.</p></li>
+
+     <li><p>If <var>option</var> is not null and is <span>focusable</span>, then run the
+     <span>focusing steps</span> given <var>option</var> and return.</p></li>
+    </ol>
+   </li>
+  </ol>
+
   <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

From dcf650bf3af29a9ec21e5ff781fcc76b3ec056b3 Mon Sep 17 00:00:00 2001
From: Joey Arhar <jarhar@chromium.org>
Date: Fri, 6 Dec 2024 12:30:40 -0800
Subject: [PATCH 09/15] replace activation behavior for options

---
 source | 52 +++++++++++++++++++++++++---------------------------
 1 file changed, 25 insertions(+), 27 deletions(-)

diff --git a/source b/source
index 8ec978a62b4..0e928448d04 100644
--- a/source
+++ b/source
@@ -53750,10 +53750,31 @@ interface <dfn interface>HTMLSelectElement</dfn> : <span>HTMLElement</span> {
   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>
+  <code data-x="event-click">click</code> event), the user agent must run the <span>pick an
+  option</span> algorithm given the <code>select</code> and the picked <code>option</code>. If the
+  <code>select</code> is being rendered with <span>base appearance</span>, then <span
+  data-x="concept-select-pick">picking</span> an <code>option</code> will fire a corresponding <code
+  data-x="event-keydown">keydown</code> or <code data-x="event-mouseup">mouseup</code> event.
+  Calling <code data-x="dom-Event-preventDefault">preventDefault()</code> on either of these events
+  will prevent the <span>pick an option</span> algorithm from running.</p>
+
+  <p>To <dfn>pick an option</dfn> given a <code>select</code> element <var>select</var> and an
+  <code>option</code> element <var>option</var>:</p>
+
+  <ol>
+   <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
@@ -54649,29 +54670,6 @@ interface <dfn interface>HTMLOptionElement</dfn> : <span>HTMLElement</span> {
    <var>text</var>.</p></li>
   </ol>
 
-  <p>The <span>activation behavior</span> of an <code>option</code> element <var>option</var> is to
-  run the following steps:</p>
-
-  <ol>
-   <li><p>Let <var>select</var> be the <span><code>option</code> ancestor <code>select</code></span>
-   given <var>option</var>.</p></li>
-
-   <li><p>If <var>select</var> is null, 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>
-
   <dl class="domintro">
    <dt><code data-x=""><var>option</var>.<span subdfn data-x="dom-option-selected">selected</span></code></dt>
 

From 9758b7b18a53ba04020a73887988addb419e0ccc Mon Sep 17 00:00:00 2001
From: Joey Arhar <jarhar@chromium.org>
Date: Thu, 12 Dec 2024 16:28:05 -0800
Subject: [PATCH 10/15] Update focus another option

---
 source | 55 ++++++++++---------------------------------------------
 1 file changed, 10 insertions(+), 45 deletions(-)

diff --git a/source b/source
index 0e928448d04..1e8b4af6150 100644
--- a/source
+++ b/source
@@ -53863,51 +53863,16 @@ interface <dfn interface>HTMLSelectElement</dfn> : <span>HTMLElement</span> {
   prevent the picker from opening. Otherwise, the picker is opened.</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-focus-next-option">focus the next option</dfn> and <dfn
-  data-x="select-focus-previous-option">focus the previous option</dfn>. Performing either of these
-  actions will fire a corresponding <code data-x="event-keydown">keydown</code> event on the
-  currently focused <code>option</code> element. Calling <code
-  data-x="dom-Event-preventDefault">preventDefault()</code> on this event will prevent the
-  corresponding algorithm from running.</p>
-
-  <p>To <span data-x="select-focus-next-option">focus the next option</span> given a currently
-  focused <code>option</code> element <var>option</var> in a <code>select</code> element
-  <var>select</var>:</p>
-
-  <ol>
-   <li>
-    <p><span>While</span> <var>option</var> is not null:</p>
-
-    <ol>
-     <li><p>Set <var>option</var> to the next element in <var>select</var>'s <span
-     data-x="concept-select-option-list">list of options</span> if any such element exists;
-     otherwise null.</p></li>
-
-     <li><p>If <var>option</var> is not null and is <span>focusable</span>, then run the
-     <span>focusing steps</span> given <var>option</var> and return.</p></li>
-    </ol>
-   </li>
-  </ol>
-
-  <p>To <span data-x="select-focus-previous-option">focus the previous option</span> given a currently
-  focused <code>option</code> element <var>option</var> in a <code>select</code> element
-  <var>select</var>:</p>
-
-  <ol>
-   <li>
-    <p><span>While</span> <var>option</var> is not null:</p>
-
-    <ol>
-     <li><p>Set <var>option</var> to the previous element in <var>select</var>'s <span
-     data-x="concept-select-option-list">list of options</span> if any such element exists;
-     otherwise null.</p></li>
-
-     <li><p>If <var>option</var> is not null and is <span>focusable</span>, then run the
-     <span>focusing steps</span> given <var>option</var> and return.</p></li>
-    </ol>
-   </li>
-  </ol>
+  appearance</span>, then the user agent should allow the user to <dfn>focus another option</dfn>.
+  Performing this action will fire a corresponding <code data-x="event-keydown">keydown</code> event
+  on the currently focused <code>option</code> element, then run the <span>focusing steps</span> on
+  another <code>option</code> within the <code>select</code>. Calling <code
+  data-x="dom-Event-preventDefault">preventDefault()</code> on the <code
+  data-x="event-keydown">keydown</code> event will prevent the new <code>option</code> from being
+  focused.</p>
+
+  <p class="note">Implementations commonly allow the user to choose the next or previous option via
+  the arrow-up and arrow-down keys, or pick the first or last option via the Home or End keys.</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

From 3c8e35df7c529cbbb17d3438cc753caa04db51b3 Mon Sep 17 00:00:00 2001
From: Joey Arhar <jarhar@chromium.org>
Date: Thu, 26 Dec 2024 10:47:40 -0800
Subject: [PATCH 11/15] add pageup/pagedown

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

diff --git a/source b/source
index 1e8b4af6150..8338496fcc6 100644
--- a/source
+++ b/source
@@ -53871,8 +53871,9 @@ interface <dfn interface>HTMLSelectElement</dfn> : <span>HTMLElement</span> {
   data-x="event-keydown">keydown</code> event will prevent the new <code>option</code> from being
   focused.</p>
 
-  <p class="note">Implementations commonly allow the user to choose the next or previous option via
-  the arrow-up and arrow-down keys, or pick the first or last option via the Home or End keys.</p>
+  <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>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

From c151264d9b0eecbfbba2ce83501dd831178906be Mon Sep 17 00:00:00 2001
From: Joey Arhar <jarhar@chromium.org>
Date: Thu, 16 Jan 2025 08:41:03 -0800
Subject: [PATCH 12/15] move more of option picking into algorithm

---
 source | 37 +++++++++++++++++++------------------
 1 file changed, 19 insertions(+), 18 deletions(-)

diff --git a/source b/source
index 8338496fcc6..980e51fd8ba 100644
--- a/source
+++ b/source
@@ -53742,26 +53742,27 @@ 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 run the <span>pick an
-  option</span> algorithm given the <code>select</code> and the picked <code>option</code>. If the
-  <code>select</code> is being rendered with <span>base appearance</span>, then <span
-  data-x="concept-select-pick">picking</span> an <code>option</code> will fire a corresponding <code
-  data-x="event-keydown">keydown</code> or <code data-x="event-mouseup">mouseup</code> event.
-  Calling <code data-x="dom-Event-preventDefault">preventDefault()</code> on either of these events
-  will prevent the <span>pick an option</span> algorithm from running.</p>
-
-  <p>To <dfn>pick an option</dfn> given a <code>select</code> element <var>select</var> and an
-  <code>option</code> element <var>option</var>:</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> is 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>Set <var>option</var>'s <span data-x="concept-option-selectedness">selectedness</span> to
    true.</p></li>
 

From 7a18a770d50148a31170af9926dc58d2e2f18a19 Mon Sep 17 00:00:00 2001
From: Joey Arhar <jarhar@chromium.org>
Date: Thu, 16 Jan 2025 09:03:55 -0800
Subject: [PATCH 13/15] move more user interaction stuff into algorithms

---
 source | 31 +++++++++++++++++++------------
 1 file changed, 19 insertions(+), 12 deletions(-)

diff --git a/source b/source
index 980e51fd8ba..f6ab9b57977 100644
--- a/source
+++ b/source
@@ -53857,20 +53857,27 @@ interface <dfn interface>HTMLSelectElement</dfn> : <span>HTMLElement</span> {
 
   <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>. Opening the picker will either fire a
-  corresponding <code data-x="event-mousedown">mousedown</code> or <code
-  data-x="event-keydown">keydown</code> event on the <code>select</code> element. Calling
-  <code data-x="dom-Event-preventDefault">preventDefault()</code> on either of these events will
-  prevent the picker from opening. Otherwise, the picker is opened.</p>
+  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>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>.
-  Performing this action will fire a corresponding <code data-x="event-keydown">keydown</code> event
-  on the currently focused <code>option</code> element, then run the <span>focusing steps</span> on
-  another <code>option</code> within the <code>select</code>. Calling <code
-  data-x="dom-Event-preventDefault">preventDefault()</code> on the <code
-  data-x="event-keydown">keydown</code> event will prevent the new <code>option</code> from being
-  focused.</p>
+  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

From 45bbc64cbe522f36224b4e5d6a126fed30a6db18 Mon Sep 17 00:00:00 2001
From: Joey Arhar <jarhar@chromium.org>
Date: Thu, 23 Jan 2025 07:50:17 -0800
Subject: [PATCH 14/15] add separate opt in for picker

---
 source | 36 +++++++++++++++++++++++++++++-------
 1 file changed, 29 insertions(+), 7 deletions(-)

diff --git a/source b/source
index f6ab9b57977..47620e04c87 100644
--- a/source
+++ b/source
@@ -3857,6 +3857,14 @@ 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/#picker-pseudo-element">picker
+     pseudo-element</dfn></li>
+    </ul>
+
     <p>The following features are defined in <cite>CSS Grid Layout</cite>: <ref>CSSGRID</ref></p>
 
     <ul class="brief">
@@ -53748,9 +53756,9 @@ interface <dfn interface>HTMLSelectElement</dfn> : <span>HTMLElement</span> {
   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> is 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>
+  <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
@@ -137310,6 +137318,11 @@ progress { appearance: auto; }</code></pre>
   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 a <span>base
   appearance</span>, it is expected to render as if it has a <span>shadow tree</span> with the
   following elements:</p>
@@ -137325,7 +137338,8 @@ 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>.</p></li>
+   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
@@ -137339,6 +137353,10 @@ progress { appearance: auto; }</code></pre>
   <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>
 
@@ -137348,9 +137366,10 @@ progress { appearance: auto; }</code></pre>
   <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. 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>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
+  <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
@@ -144856,6 +144875,9 @@ INSERT INTERFACES HERE
    <dt id="refsCSSFONTS">[CSSFONTS]</dt>
    <dd><cite><a href="https://w3c.github.io/csswg-drafts/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://w3c.github.io/csswg-drafts/css-flexbox/">CSS Flexible Box Layout</a></cite>, T. Atkins, E. Etemad, R. Atanassov. W3C.</dd>
 

From c5b6645c61f5e4b9f5bd5e92f52449f66ee50a77 Mon Sep 17 00:00:00 2001
From: Joey Arhar <jarhar@chromium.org>
Date: Thu, 23 Jan 2025 13:46:24 -0800
Subject: [PATCH 15/15] dom feedback

---
 source | 22 ++--------------------
 1 file changed, 2 insertions(+), 20 deletions(-)

diff --git a/source b/source
index 47620e04c87..2b4abef5108 100644
--- a/source
+++ b/source
@@ -3236,7 +3236,6 @@ 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>,
@@ -54617,23 +54616,6 @@ interface <dfn interface>HTMLOptionElement</dfn> : <span>HTMLElement</span> {
 
   </div>
 
-  <p>To get the <dfn><code>option</code> ancestor <code>select</code></dfn> given an
-  <code>option</code> <var>option</var>:</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>clone selected <code>option</code> into <code>select</code> button</dfn>, given a
   <code>select</code> element <var>select</var>:</p>
 
@@ -137323,8 +137305,8 @@ progress { appearance: auto; }</code></pre>
   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 a <span>base
-  appearance</span>, it is expected to render as if it has a <span>shadow tree</span> with the
+  <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>