refactor(select): add select research

Author: thejackshelton

apps/website/src/routes/docs/headless/select/examples/hero.tsx

@@ -11,7 +11,6 @@ export default component$(() => {
         class="hidden"
         style={{ padding: '0px', margin: '0px', listStyle: 'none' }}
       >
-        <SelectOption disabled>My option</SelectOption>
         {usersSig.value.map((user) => (
           <SelectOption key={user}>{user}</SelectOption>
         ))}

packages/kit-headless/src/components/select/notes.md

@@ -0,0 +1,34 @@
+What do we absolutely need? I am talking about the bare minimum, but powerful functionality we need for a select component.
+
+# Select Research
+
+## Anatomy:
+
+    <Select>
+        <SelectTrigger />
+        <SelectPopover>
+            <SelectListbox>
+                <SelectOption>
+            </SelectListbox>
+        </SelectPopover>
+    </Select>
+
+## Props:
+
+    name: bind:selected
+    type: Signal
+    description: controlled selected value, manages the selected option.
+
+    name: defaultSelected
+    type: boolean
+    description: uncontrolled selected value, sets the initial selected option.
+
+    name: onSelectedChange$
+    type: PropFunction
+    description: Prop function called when the value changes.
+
+    name: multiple
+    type: boolean
+    description: used for multi-select
+
+## Keyboard Interactions:

packages/kit-headless/src/components/select/select-trigger.tsx

@@ -164,11 +164,11 @@ export const SelectTrigger = component$<SelectTriggerProps>((props) => {
       {...props}
       ref={context.triggerRef}
       onClick$={[handleClick$, props.onClick$]}
-      aria-expanded={context.isListboxOpenSig.value}
       onKeyDown$={[handleKeyDownSync$, handleKeyDown$, props.onKeyDown$]}
       data-open={context.isListboxOpenSig.value ? '' : undefined}
       data-closed={!context.isListboxOpenSig.value ? '' : undefined}
       class="bg-slate-800 p-2 text-white"
+      aria-expanded={context.isListboxOpenSig.value}
     >
       <Slot />
       {context.selectedOptionRef.value?.textContent}