Grouped List

The component is self-contained: one file, no dependencies, its own palette in the local --vibeui-select-034-* variables. No native <select> is involved: the list is real markup, so sections, the check mark and the active row highlight belong to the design instead of the operating system. Inside is a role="listbox" with nested role="group", every heading tied to its group through aria-labelledby and stuck to the top of the panel with position:sticky. Keyboard: arrows move the active row, Home and End jump to the ends of the list, Enter and Space pick, Esc closes and returns focus to the field; the active row is announced through aria-activedescendant. The check mark is drawn with two rotated borders, so no icon library is needed; unselected rows keep its slot via visibility, otherwise the text jumps at the moment of selection. The open prop expands the list in page flow — a showcase mode for the catalogue card and screenshots, with no light dismiss. When name is set, the value is submitted through a hidden input.