Add UA stylesheet for <select> base appearance

source

@@ -3997,6 +3997,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
@@ -138058,6 +138059,104 @@ 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: max(24px, 1lh);
+  min-inline-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;
+  interactivity: inert;
+}
+
+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>