feat: added native select styling

packages/components/src/components/select/select.scss

@@ -45,4 +45,41 @@
 			display: none;
 		}
 	}
+
+	// enable customized styling
+	@supports (appearance: base-select) {
+		select,
+		/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+		::picker(select) {
+			/* stylelint-disable-next-line declaration-property-value-no-unknown */
+			appearance: base-select;
+		}
+
+		/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+		&::picker-icon {
+			display: none;
+		}
+
+		/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+		:is(::picker(select)) {
+			@extend %default-card;
+		}
+
+		option {
+			justify-content: space-between;
+			// change order of the included text and pseudo-element within this flexbox item, to make sure the icon is always on the right
+			flex-direction: row-reverse;
+
+			&:checked {
+				font-weight: 700;
+			}
+
+			/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+			:is(&::checkmark) {
+				@extend %icon;
+
+				@include icons.icon-content("check");
+			}
+		}
+	}
 }

showcases/screen-reader/__snapshots__/windows/chromium/DBSelect-default-1.txt

@@ -1 +1 @@
-["Label, combo box, collapsed, (Default) Regular","expanded","Option 1. list. Option 1, not selected, 1 of 3","Option 2, not selected, 2 of 3"]
+["Label, combo box, collapsed, (Default) Regular","","expanded. list. Option 1, not selected, 1 of 3","Option 2, not selected, 2 of 3"]