@@ -461,27 +461,6 @@ h6 {
461461 font-weight : bold;
462462}
463463
464- x h1 {
465- margin-block : 0.83em ;
466- font-size : 1.5em ;
467- }
468- x x h1 {
469- margin-block : 1em ;
470- font-size : 1.17em ;
471- }
472- x x x h1 {
473- margin-block : 1.33em ;
474- font-size : 1em ;
475- }
476- x x x x h1 {
477- margin-block : 1.67em ;
478- font-size : 0.83em ;
479- }
480- x x x x x h1 {
481- margin-block : 2.33em ;
482- font-size : 0.67em ;
483- }
484-
485464dir ,
486465dd ,
487466dl ,
@@ -1179,3 +1158,95 @@ meter {
11791158progress {
11801159 appearance : auto;
11811160}
1161+
1162+ select {
1163+ text-transform : initial;
1164+ text-align : initial;
1165+ text-indent : initial;
1166+ background-color : transparent;
1167+ border : 1px solid currentColor;
1168+ padding-block : 0.25em ;
1169+ padding-inline : 0.5em ;
1170+ min-block-size : calc-size (auto, max (size, 24px , 1lh ));
1171+ min-inline-size : calc-size (auto, max (size, 24px ));
1172+ display : inline-flex;
1173+ gap : 0.5em ;
1174+ border-radius : 0.5em ;
1175+ user-select : none;
1176+ box-sizing : border-box;
1177+ field-sizing : content !important ;
1178+ }
1179+
1180+ select > button : first-child {
1181+ all : unset;
1182+ display : contents;
1183+ }
1184+
1185+ select : enabled : hover ,
1186+ select option : enabled : hover {
1187+ background-color : color-mix (in lab, currentColor 10% , transparent);
1188+ }
1189+ select : enabled : active ,
1190+ select option : enabled : active {
1191+ background-color : color-mix (in lab, currentColor 20% , transparent);
1192+ }
1193+ select : disabled ,
1194+ select option : disabled {
1195+ color : color-mix (in lab, currentColor 50% , transparent);
1196+ }
1197+
1198+ ::picker (select ) {
1199+ box-sizing : border-box;
1200+ border : 1px solid;
1201+ padding : 0 ;
1202+ color : CanvasText;
1203+ background-color : Canvas;
1204+ margin : 0 ;
1205+ inset : auto;
1206+ min-inline-size : anchor-size (self-inline);
1207+ max-block-size : stretch;
1208+ overflow : auto;
1209+ position-area : block-end span-inline-end;
1210+ position-try-order : most-block-size;
1211+ position-try-fallbacks :
1212+ block-start span-inline-end,
1213+ block-end span-inline-start,
1214+ block-start span-inline-start;
1215+ }
1216+
1217+ select option {
1218+ min-inline-size : 24px ;
1219+ min-block-size : max (24px , 1lh );
1220+ padding-inline : 0.5em ;
1221+ padding-block-end : 0 ;
1222+ display : flex;
1223+ align-items : center;
1224+ gap : 0.5em ;
1225+ white-space : nowrap;
1226+ }
1227+
1228+ select option ::checkmark {
1229+ content : "\2713" / "" ;
1230+ }
1231+ select option : not (: checked )::checkmark {
1232+ visibility : hidden;
1233+ }
1234+
1235+ select ::picker-icon {
1236+ content : counter (fake-counter-name, disclosure-open);
1237+ display : block;
1238+ margin-inline-start : auto;
1239+ }
1240+
1241+ select optgroup {
1242+ font-weight : bolder;
1243+ }
1244+
1245+ select optgroup option {
1246+ font-weight : normal;
1247+ }
1248+
1249+ select optgroup legend {
1250+ padding-inline : 0.5em ;
1251+ min-block-size : 1lh ;
1252+ }
0 commit comments