docs: updated docs

Author: thejackshelton

apps/website/src/routes/docs/headless/select/examples/option-value.tsx renamed to apps/website/src/routes/docs/headless/select/examples/item-value.tsx

@@ -5,10 +5,11 @@ import { LuCheck, LuX } from '@qwikest/icons/lucide';
 export default component$(() => {
   useStyles$(styles);
   const users = ['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby'];
-  const display = useSignal<string[]>([]);
+  const display = useSignal<string[]>(['Jim']);
+  const selected = useSignal<string[]>(['Jim']);
 
   return (
-    <Select.Root multiple bind:display={display} class="select">
+    <Select.Root multiple bind:display={display} bind:value={selected} class="select">
       <Select.Label>Logged in users</Select.Label>
       <Select.Trigger class="select-trigger">
         <Select.Value>
@@ -17,7 +18,7 @@ export default component$(() => {
               {opt}
               <span
                 onClick$={() =>
-                  (display.value = display.value?.filter(
+                  (selected.value = selected.value?.filter(
                     (selectedOpt) => selectedOpt !== opt,
                   ))
                 }

apps/website/src/routes/docs/headless/select/examples/multiple-pill.tsx

@@ -5,14 +5,12 @@ import { LuCheck } from '@qwikest/icons/lucide';
 export default component$(() => {
   useStyles$(styles);
   const users = ['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby'];
-  const displaySig = useSignal<string[]>([]);
+  const display = useSignal<string[]>([]);
 
   return (
-    <Select.Root bind:display={displaySig} multiple class="select">
+    <Select.Root bind:display={display} multiple class="select">
       <Select.Trigger class="select-trigger">
-        <Select.Value>
-          {displaySig.value.length > 0 ? displaySig.value.join(', ') : 'Select an option'}
-        </Select.Value>
+        <Select.Value>{display.value.join(', ')}</Select.Value>
       </Select.Trigger>
       <Select.Popover class="select-popover">
         <Select.Listbox class="select-listbox">