From 7a93a561a30dd69408c7ae3d7489d4e30c113b5c Mon Sep 17 00:00:00 2001
From: Joey Arhar <jarhar@chromium.org>
Date: Wed, 31 Jul 2024 10:22:04 -0700
Subject: [PATCH] Add UA stylesheet for <select> base appearance

Discussion here: https://github.com/w3c/csswg-drafts/issues/10857
---
 source | 88 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 88 insertions(+)

diff --git a/source b/source
index de407dd6dc0..6cfdf529b45 100644
--- a/source
+++ b/source
@@ -3953,6 +3953,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
@@ -135710,6 +135711,93 @@ progress { appearance: auto; }</code></pre>
 
   </div>
 
+  <!-- TODO should this go at the top of the section right below "the select element"? -->
+  <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 {
+  border: 1px solid currentColor;
+  background-color: color-mix(in lab, currentColor 10%, transparent);
+  color: inherit;
+  font: inherit;
+  padding: 0.25em .5em;
+  text-box: trim-both;
+
+  border-radius: 0.25em;
+  display: inline-block;
+  box-sizing: border-box;
+  min-block-size: max(24px, 1.2em);
+  min-inline-size: 24px;
+  white-space: normal;
+}
+
+select:enabled:hover {
+  background-color: color-mix(in lab, currentColor 20%, transparent);
+}
+
+select:enabled:active  {
+  background-color: color-mix(in lab, currentColor 30%, transparent);
+}
+
+select::picker(select) {
+  box-sizing: border-box;
+  overflow: auto;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  border-radius: 0.25em;
+  padding-block: 0.25em;
+  padding-inline: 0;
+  background-color: Field;
+  margin: 0;
+  inset: auto;
+  min-inline-size: anchor-size(self-inline);
+  min-block-size: 1lh;
+  position-area: block-end span-inline-end;
+  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: 24px;
+  align-content: center;
+  display: block;
+  padding-block-start: 0;
+  padding-block-end: 1px;
+  padding-inline: 2px;
+  white-space: nowrap;
+}
+
+select option:hover {
+  background-color: SelectedItem;
+  color: SelectedItemText;
+}
+
+select option::check {
+  content: '\2713' / '';
+}
+select option:not(:checked)::check {
+  visibility: hidden;
+}
+
+select::select-arrow {
+  padding-inline-start: 0.5em;
+  display: block;
+  content: counter(fake-counter-name, disclosure-open);
+}
+
+select optgroup {
+  padding-inline: 2px;
+}
+
+select optgroup option {
+  padding-inline-start: 20px;
+}</code></pre>
+
+
 
   <div w-nodev>