Components

Select

Visible label. Native <select> when options are few (under 7).

Spec

Visible label. aria-label only when the label is visually hidden on purpose (compact toolbar) — still a name.
Native <select> if few options.
Error: border + icon + aria-invalid + aria-describedby.
Disabled: fg-disabled, not in the submit set.
Placeholder: an empty <option>, not the label.
Helper text sits below.
Leading icon / prefix allowed; reserved chevron is the trailing indicator on custom faces. Native uses the platform chevron.
Don't put a form inside a Dropdown and call it a select.

Runnable controls. Not a screenshot. Paper / Ink in the header recolors tokens.

Region

Native because there are six options.

Range

Range is required to compare.

Do	Don't
Native when there are five regions.	A custom listbox for three options.
Empty option as placeholder.	“Select a region” as the visible label and the first option.

Property	Duration	Easing	Trigger	Reduced motion
`transform: scale(0.97)`	120ms `--dur-fast`	`--ease-out`	`:active`	instant
color / border	120ms `--dur-fast`	`--ease-out`	`:hover`	instant
outline	80ms `--dur-micro`	`--ease-out`	`:focus-visible`	instant

Contrast on the field: --fg on --bg-surface. Error text is fg-critical.
Keyboard: native select behavior when native. Custom listbox must implement it all — prefer native.
Face 32 (--control-h-md). Compact-width companion uses the 44 face.
These notes describe construction. They are not a guarantee of WCAG conformance. Validate with axe, keyboard, and operators. See Accessibility.