feat!: handle color states on form elements (#234)

docs/content/3.forms/4.select-menu.md

@@ -8,7 +8,7 @@ headlessui:
 
 ## Usage
 
-The SelectMenu component renders by default a [Select](/forms/select) component and is based on the `ui.select` preset. You can use most of the Select props to configure the display if you don't want to override the default slot such as [size](/forms/select#size), [placeholder](/forms/select#placeholder), [appearance](/forms/select#appearance), [icon](/forms/select#icon), [disabled](/forms/select#disabled), etc.
+The SelectMenu component renders by default a [Select](/forms/select) component and is based on the `ui.select` preset. You can use most of the Select props to configure the display if you don't want to override the default slot such as [color](/forms/select#style), [variant](/forms/select#style), [size](/forms/select#size), [placeholder](/forms/select#placeholder), [icon](/forms/select#icon), [disabled](/forms/select#disabled), etc.
 
 Like the Select component, you can use the `options` prop to pass an array of strings or objects.
 
@@ -148,6 +148,10 @@ baseProps:
   options: ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
 props:
   icon: 'i-heroicons-magnifying-glass-20-solid'
+  color: 'white'
+extraColors:
+  - white
+  - gray
 excludedProps:
   - icon
 ---
@@ -157,6 +161,8 @@ excludedProps:
 
 Use the `searchable` prop to enable search.
 
+Use the `searchable-placeholder` prop to set a different placeholder.
+
 This will use Headless UI [Combobox](https://headlessui.com/vue/combobox) component instead of [Listbox](https://headlessui.com/vue/listbox).
 
 ::component-card
@@ -167,6 +173,7 @@ baseProps:
   options: ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
 props:
   searchable: true
+  searchablePlaceholder: 'Search a person...'
 ---
 ::