Select Component Test

1. Default

Basic select with fruits

2. Position Modes

Side-by-side: item-aligned vs popper

2b. Popper Mode Options

Different side, align, and offset configurations

3. Groups with Labels and Separators

Organized with Fruits/Vegetables/Proteins

4. Scrollable

Timezone selector with many items

5. Sizes

sm (h-8), default (h-9), lg (h-10) - matching Button and Input sizes

6. Disabled Select

Entire select is disabled

7. Disabled Items

Mix of enabled/disabled items

8. Invalid/Error State

With aria-invalid="true"

9. With Default Value

Pre-selected value: "banana"

10. Event Testing

Console logging select:change and select:open-change

11. Programmatic Control

Buttons to set value, open, close

12. Form Integration

Within a form with submit