UI Kit — Buttons

Sizes
default (h-s)
h-m
h-l

Variants — hover & ripple
strong-yellow
light-yellow
gray
outline

States
normal
disabled
disabled outline
as <a> link Link button
focus-visible
focus-visible yellow

Full width

Tom Select
sidebar — label
single select
sidebar — no search
single select
sidebar — label + icon
When do you want to buy?
sort-by

Currency Select — Tom Select (sell-vehicle price field)

Symbol-only compact control glued to the price input, 3-column grid dropdown, no search, hover tooltip CODE — Name. Analog of the current Select2 #currency picker.

symbol control + grid dropdown + tooltip
preselected EUR

Select2 Multiselect — sell vehicle style
empty — checkbox dropdown
preselected values

Inline Select — compact (Tom Select, data-select="inline-filter")
empty (placeholder)
preselected value
wider — toilet types

Inline Select — native .battery-type-select (used in dynamic innerHTML)
empty placeholder
with selection

Search Select — city/location style (optgroups)
search — label + required + optgroups
City
search — location/country style + optgroups
search — preselected value + optgroups
Location

Location Multi-Select — Tom Select country picker with region tabs (location-tom-select)
empty
preselected — UA

Modal — shared overlay skeleton (template-parts/components/modal.php)
size s (452px) + footer
size m (490px) + footer
size l (629px) + footer
no footer
SweetAlert (.modal-window)