Core idea: Meta-controls are controls that create, arrange, or otherwise manipulate other controls. For example, the QuickUI catalog provides several meta-controls that present JavaScript arrays as various types of lists whose items are represented by individual controls.

The demo code renders an array of text strings using a List control. The List class takes an array passed to its items() property, and creates a control for each item in the array. The string value of each array item will be passed to the content() property of the corresponding control. By default, a List renders each item as a plain Control instance, which has no special UI; it’s ultimately just a wrapper for a div.

Your goal: Change the created control from a List to a ListBox. The ListBox class renders its items as list items, which are essentially buttons with no border. It also confers selection semantics, and adds keyboard support for moving the selection up and down the list. Once you’ve tried the control as a ListBox, change it to a MultiListBox (for multiple selection support) or a ListComboBox (for a combo box variant that includes AutoComplete).

You can change the control class used to render list items by setting the list’s itemClass() property. Try changing the list back to a plain List, then set itemClass(LabeledColorSwatch) to render each string as a CSS color swatch. Then step through the above progression: ListBox, MultiListBox, ListComboBox, to see how each meta-control class now handles the list items. Each class’ behavior — e.g., keyboard navigation, AutoComplete — should still work.