Select
The browser's own <select>, dressed in the palette. The closed control is ours. The open list belongs to the browser, so it follows color-scheme and takes --bg-muted and --text-default from the select option rule, but the highlight is the operating system's.
quiet is the tool-row select (entities' suggest and retype): UI face, --text-muted, 2.2rem, or 2rem as .sm. It has no hover and no focus style of its own. tag-add is the borderless "+ add" at the end of a tag editor, with a rule on hover. field and wizard are the settings and first-run selects, which share the input field's shape.
Drawn, not live: the list opens outside the page. The width is the select's, the text lines up with the select's own, and the row under the pointer is Chrome's --platform-highlight with --platform-highlight-text text, inside a --platform-rule rule, sampled from Chrome on Windows in both themes. They are the browser's colours, not ours, and the live list's highlight comes from the operating system; they are tokens only so this drawing, and Figma's Platform collection, follow the theme.
select.quiet-select[.sm] tool rows select.tag-add a tag editor's "+ add" .set-control select settings field #wizard-body select first-run field option --bg-muted, --text-default (the open list)
Fill --bg-muted; rule --border-default, focus --border-accent; value --text-muted (quiet, tag-add) or --text-default; radius --radius-base, --radius-sm. In Figma: Select (kind × state, a value property, the chevron drawn as a vector) and Select list (kind, three option properties).